diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 4d173ab222..523da568d9 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -21,9 +21,15 @@
 
 
 /apps/web/src/models/Call.ts                             @element-hq/element-call-reviewers
+/apps/web/test/unit-tests/models/Call-test.ts            @element-hq/element-call-reviewers
+/apps/web/src/stores/CallStore.ts                        @element-hq/element-call-reviewers
+/apps/web/test/unit-tests/stores/CallStore-test.ts       @element-hq/element-call-reviewers
 /apps/web/src/call-types.ts                              @element-hq/element-call-reviewers
 /apps/web/src/components/views/voip                      @element-hq/element-call-reviewers
-/apps/web/playwright/e2e/voip/element-call.spec.ts       @element-hq/element-call-reviewers
+/apps/web/res/css/views/voip                             @element-hq/element-call-reviewers
+/apps/web/playwright/e2e/voip                            @element-hq/element-call-reviewers
+/apps/web/playwright/snapshots/voip                      @element-hq/element-call-reviewers
+/apps/web/test/test-utils/call.ts                        @element-hq/element-call-reviewers
 
 # Ignore translations as those will be updated by GHA for Localazy download
 /apps/web/src/i18n/strings
diff --git a/.github/actions/setup-playwright/action.yml b/.github/actions/setup-playwright/action.yml
index 1276191d2b..d711672106 100644
--- a/.github/actions/setup-playwright/action.yml
+++ b/.github/actions/setup-playwright/action.yml
@@ -21,7 +21,7 @@ runs:
               PREFIX: ${{ runner.os }}-${{ runner.arch }}
 
         - name: Cache playwright binaries
-          uses: actions/cache@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5
+          uses: actions/cache@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6
           if: inputs.write-cache == 'true'
           id: cache
           with:
@@ -30,7 +30,7 @@ runs:
 
         # When running in merge queue only restore the cache, never write it
         - name: Restore playwright binaries cache
-          uses: actions/cache/restore@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5
+          uses: actions/cache/restore@55cc8345863c7cc4c66a329aec7e433d2d1c52a9 # v6
           if: inputs.write-cache != 'true'
           id: cache-restore
           with:
diff --git a/.github/labels.yml b/.github/labels.yml
index 8cf5613f92..cced609c4e 100644
--- a/.github/labels.yml
+++ b/.github/labels.yml
@@ -91,9 +91,6 @@
 - name: "A-Modules"
   description: "Module system related"
   color: "bfd4f2"
-- name: "A-New-Search-Experience"
-  description: "The new search dialog available in Labs"
-  color: "bfd4f2"
 - name: "A-Packaging"
   description: "Packaging, signing, releasing"
   color: "bfd4f2"
diff --git a/.github/release-drafter.yml b/.github/release-drafter.yml
index 5045f2bfc9..d0843c8197 100644
--- a/.github/release-drafter.yml
+++ b/.github/release-drafter.yml
@@ -1,3 +1,5 @@
 _extends: matrix-org/matrix-js-sdk
 version-resolver:
     default: patch
+# Exclude modules releases
+tag-prefix: v
diff --git a/.github/renovate.json b/.github/renovate.json
index 928cfd4ad0..30fc8f8028 100644
--- a/.github/renovate.json
+++ b/.github/renovate.json
@@ -11,15 +11,25 @@
             "matchDepTypes": ["testcontainers-docker"],
             "matchPackageNames": ["*"]
         },
+        {
+            "description": "Group all pnpm updates",
+            "groupName": "pnpm",
+            "groupSlug": "pnpm",
+            "matchPackageNames": ["pnpm", "ghcr.io/pnpm/pnpm"]
+        },
         {
             "description": "Separate updates to overrides from other groups",
-            "matchDepTypes": ["pnpm.overrides"],
+            "matchManagers": ["npm"],
+            "matchFileNames": ["pnpm-workspace.yaml"],
+            "matchDepTypes": ["pnpm-workspace.overrides"],
             "groupSlug": null
         },
         {
             "description": "Disable any major updates to overrides as this almost always is wrong",
-            "matchDepTypes": ["pnpm.overrides"],
             "matchUpdateTypes": ["major"],
+            "matchManagers": ["npm"],
+            "matchFileNames": ["pnpm-workspace.yaml"],
+            "matchDepTypes": ["pnpm-workspace.overrides"],
             "enabled": false
         }
     ],
@@ -41,6 +51,25 @@
             "matchStrings": ["hakDependencies.$each(function($v, $k) { { 'packageName': $k, 'currentValue': $v } })"],
             "datasourceTemplate": "npm",
             "depTypeTemplate": "hak"
+        },
+        {
+            "description": "Update pnpm in devEngines",
+            "customType": "jsonata",
+            "fileFormat": "json",
+            "managerFilePatterns": ["/(^|/)package\\.json$/"],
+            "matchStrings": [
+                "devEngines.packageManager.name = 'pnpm' ? { 'currentValue': devEngines.packageManager.version } : null"
+            ],
+            "depNameTemplate": "pnpm",
+            "datasourceTemplate": "npm",
+            "depTypeTemplate": "devengines"
         }
-    ]
+    ],
+    "toolSettings": {
+        "nodeMaxMemory": 2048
+    },
+    "env": {
+        "PNPM_MAX_WORKERS": "2",
+        "PNPM_WORKERS": "2"
+    }
 }
diff --git a/.github/workflows/release-module.yml b/.github/workflows/release-module.yml
new file mode 100644
index 0000000000..699562dc54
--- /dev/null
+++ b/.github/workflows/release-module.yml
@@ -0,0 +1,57 @@
+name: Release module
+run-name: Release modules
+
+on:
+    push:
+        tags:
+            - "module/*/v*.*.*"
+
+permissions: {}
+
+jobs:
+    release:
+        name: Build and release module
+        runs-on: ubuntu-24.04
+        permissions:
+            contents: write
+        steps:
+            - name: Parse tag
+              env:
+                  TAG: ${{ github.ref_name }}
+              run: |
+                  MODULE=$(echo "$TAG" | cut -d'/' -f2)
+                  VERSION=$(echo "$TAG" | cut -d'/' -f3)
+                  echo "MODULE=$MODULE" >> "$GITHUB_ENV"
+                  echo "VERSION=$VERSION" >> "$GITHUB_ENV"
+                  echo "TAG=$TAG" >> "$GITHUB_ENV"
+                  echo "ARCHIVE=${MODULE}-${VERSION}.zip" >> "$GITHUB_ENV"
+
+            - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7
+              with:
+                  persist-credentials: false
+
+            - uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9
+
+            - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7
+              with:
+                  cache: "pnpm"
+                  node-version: "lts/*"
+
+            - name: Install deps
+              run: pnpm install --frozen-lockfile
+
+            - name: Build
+              run: pnpm --filter "./modules/$MODULE" run build
+
+            - name: Create archive
+              run: zip -r "$ARCHIVE" -j "modules/$MODULE/lib"
+
+            - name: Create GitHub release
+              env:
+                  GH_TOKEN: ${{ github.token }}
+              run: |
+                  gh release create "$TAG" \
+                    --title "$VERSION $MODULE" \
+                    --draft \
+                    --latest=false \
+                    "$ARCHIVE"
diff --git a/.github/workflows/shared-component-storybook-netlify.yaml b/.github/workflows/shared-component-storybook-netlify.yaml
new file mode 100644
index 0000000000..ae0e2c1550
--- /dev/null
+++ b/.github/workflows/shared-component-storybook-netlify.yaml
@@ -0,0 +1,47 @@
+# Triggers after the shared component storybook has finished building,
+# taking the artifact and uploading it to Netlify for easier viewing
+name: Upload Shared Component Storybook to Netlify
+on:
+    # Privilege escalation necessary to deploy to Netlify
+    # 🚨 We must not execute any checked out code here.
+    workflow_run: # zizmor: ignore[dangerous-triggers]
+        workflows: ["Build shared component storybook"]
+        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 != 'cancelled' && github.event.workflow_run.event == 'pull_request'
+        name: Upload Storybook
+        runs-on: ubuntu-24.04
+        environment: Netlify
+        permissions:
+            actions: read
+            deployments: write
+        steps:
+            - name: 📥 Download artifact
+              uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8
+              with:
+                  github-token: ${{ secrets.GITHUB_TOKEN }}
+                  run-id: ${{ github.event.workflow_run.id }}
+                  name: shared-components-storybook
+                  path: storybook-static
+
+            - name: 📤 Deploy to Netlify
+              uses: matrix-org/netlify-pr-preview@9805cd123fc9a7e421e35340a05e1ebc5dee46b5 # v3
+              with:
+                  path: storybook-static
+                  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 Storybook
+                  deployment_env: SharedComponentStorybook
+                  prefix: "storybook-"
diff --git a/.gitignore b/.gitignore
index 74cd2f75e5..49264df068 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,6 +18,7 @@ package-lock.json
 /.tmp
 .vscode
 .vscode/
+.zed/
 .env
 .env.*
 coverage
diff --git a/.husky/pre-commit b/.husky/pre-commit
index 3c15019b78..8ba25f36cd 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1 +1 @@
-npx lint-staged --concurrent false
+pnpm exec lint-staged --concurrent false
diff --git a/.lintstagedrc b/.lintstagedrc
index f8904d4eb3..1f90222067 100644
--- a/.lintstagedrc
+++ b/.lintstagedrc
@@ -1,3 +1,4 @@
 {
-    "*": "prettier --write --ignore-unknown"
+    "*": "oxfmt --no-error-on-unmatched-pattern",
+    "*.{js,jsx,ts,tsx,mjs,cjs}": "oxlint --no-error-on-unmatched-pattern"
 }
diff --git a/.oxfmtrc.jsonc b/.oxfmtrc.jsonc
new file mode 100644
index 0000000000..04f20cdda4
--- /dev/null
+++ b/.oxfmtrc.jsonc
@@ -0,0 +1,73 @@
+{
+    "$schema": "./node_modules/oxfmt/configuration_schema.json",
+    "printWidth": 120,
+    "tabWidth": 4,
+    "quoteProps": "consistent",
+    "trailingComma": "all",
+    "sortPackageJson": false,
+    "ignorePatterns": [
+        "/build",
+        "/dist",
+        "/lib",
+        "node_modules",
+        "/apps/web/webapp",
+        "/*.log",
+        "pnpm-lock.yaml",
+        "electron/dist",
+        "electron/pub",
+        "**/.idea",
+        "/.tmp",
+        "webpack-stats.json",
+        ".vscode",
+        ".vscode/",
+        ".env",
+        "coverage",
+        // Auto-generated files,
+        "*.api.md",
+        "/apps/web/src/modules.ts",
+        "/apps/web/src/modules.js",
+        "src/i18n/strings",
+        "/apps/web/build_config.yaml",
+        // Raises an error because it contains a template var breaking the script tag,
+        "/apps/web/src/vector/index.html",
+        "/apps/web/src/vector/modernizr.cjs",
+        "/docs/lib",
+        "/book",
+        "debian/tmp",
+        "/.npmrc",
+        "package-lock.json",
+        // This file is generated
+        "CHANGELOG.md",
+        "/docs/changelogs",
+        // Legacy skinning file that some people might still have,
+        "/apps/web/src/component-index.js",
+        // Downloaded and already minified,
+        "/apps/web/res/jitsi_external_api.min.js",
+        // This file is also machine-generated,
+        "/apps/web/playwright/e2e/crypto/test_indexeddb_cryptostore_dump/dump.json",
+        "/apps/web/playwright/test-results/",
+        "/apps/web/playwright/html-report/",
+        "/apps/web/playwright/logs/",
+        "/apps/web/playwright/snapshots/",
+        "/apps/desktop/.hak/",
+        "/apps/desktop/dist/",
+        "/apps/desktop/build/",
+        "/apps/desktop/dockerbuild/",
+        "/apps/desktop/deploys/",
+        "/apps/desktop/lib/",
+        "/apps/desktop/webapp",
+        "/apps/desktop/playwright/html-report",
+        "/apps/desktop/playwright/test-results",
+        // Shared components generated files,
+        "/packages/shared-components/dist/",
+        "/packages/shared-components/src/i18n/i18nKeys.d.ts",
+        "/packages/shared-components/typedoc/",
+        "/packages/shared-components/storybook-static/",
+        // These files are generated by running `pnpm -r lint:types` and do not adhere to oxfmt's requirements.
+        // All of them are .gitignored within their parent directory.,
+        "/packages/playwright-common/lib/",
+        "/packages/module-api/lib/",
+        "/packages/module-api/temp/",
+        "/.nx/",
+    ],
+}
diff --git a/.prettierignore b/.prettierignore
deleted file mode 100644
index 0a8f1a2baf..0000000000
--- a/.prettierignore
+++ /dev/null
@@ -1,71 +0,0 @@
-/build
-/dist
-/lib
-node_modules
-/apps/web/webapp
-/*.log
-pnpm-lock.yaml
-electron/dist
-electron/pub
-**/.idea
-/.tmp
-webpack-stats.json
-.vscode
-.vscode/
-.env
-coverage
-# Auto-generated files
-*.api.md
-/apps/web/src/modules.ts
-/apps/web/src/modules.js
-src/i18n/strings
-/apps/web/build_config.yaml
-# Raises an error because it contains a template var breaking the script tag
-/apps/web/src/vector/index.html
-/apps/web/src/vector/modernizr.cjs
-/docs/lib
-/book
-debian/tmp
-/.npmrc
-package-lock.json
-
-# This file is owned, parsed, and generated by allchange, which doesn't comply with prettier
-CHANGELOG.md
-/docs/changelogs
-
-# Legacy skinning file that some people might still have
-/apps/web/src/component-index.js
-
-# Downloaded and already minified
-/apps/web/res/jitsi_external_api.min.js
-
-# This file is also machine-generated
-/apps/web/playwright/e2e/crypto/test_indexeddb_cryptostore_dump/dump.json
-/apps/web/playwright/test-results/
-/apps/web/playwright/html-report/
-/apps/web/playwright/logs/
-/apps/web/playwright/snapshots/
-
-/apps/desktop/.hak/
-/apps/desktop/dist/
-/apps/desktop/build/
-/apps/desktop/dockerbuild/
-/apps/desktop/deploys/
-/apps/desktop/lib/
-/apps/desktop/webapp
-/apps/desktop/playwright/html-report
-/apps/desktop/playwright/test-results
-
-# Shared components generated files
-/packages/shared-components/dist/
-/packages/shared-components/src/i18n/i18nKeys.d.ts
-/packages/shared-components/typedoc/
-/packages/shared-components/storybook-static/
-
-# These files are generated by running `pnpm -r lint:types` and do not adhere to prettier's requirements.
-# All of them are .gitignored within their parent directory.
-/packages/playwright-common/lib/
-/packages/module-api/lib/
-/packages/module-api/temp/
-
-/.nx/
diff --git a/.prettierrc.cjs b/.prettierrc.cjs
deleted file mode 100644
index 6a17910f1a..0000000000
--- a/.prettierrc.cjs
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require("eslint-plugin-matrix-org/.prettierrc.js");
diff --git a/CHANGELOG.md b/CHANGELOG.md
index a721f263bd..d9d60ead3e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,276 @@
+Changes in [1.12.26](https://github.com/element-hq/element-web/releases/tag/v1.12.26) (2026-08-18)
+==================================================================================================
+## ✨ Features
+
+* Timeline MVVM 1 - Shared TimelineView and Overlay Buttons ([#34464](https://github.com/element-hq/element-web/pull/34464)). Contributed by @langleyd.
+* Tell the user when registration is being rate limited ([#34519](https://github.com/element-hq/element-web/pull/34519)). Contributed by @hayaksi1.
+* Provide element-web modules docker image ([#34657](https://github.com/element-hq/element-web/pull/34657)). Contributed by @t3chguy.
+* Show \& clear your own on-a-call status ([#34613](https://github.com/element-hq/element-web/pull/34613)). Contributed by @dbkr.
+* feat(widget): Rtc transports discovery for widgets ([#34393](https://github.com/element-hq/element-web/pull/34393)). Contributed by @BillCarsonFr.
+* Custom user status ([#34386](https://github.com/element-hq/element-web/pull/34386)). Contributed by @dbkr.
+* Add a Module API for accessing storage helper functions. ([#34284](https://github.com/element-hq/element-web/pull/34284)). Contributed by @Half-Shot.
+* Room list: persist section state (expanded/collapsed) ([#34351](https://github.com/element-hq/element-web/pull/34351)). Contributed by @florianduros.
+
+## 🐛 Bug Fixes
+
+* [Backport staging] macOS Fix: Can't change homeserver on login or press the logout button on the splash/loading srceen ([#34706](https://github.com/element-hq/element-web/pull/34706)). Contributed by @RiotRobot.
+* [Backport staging] Cachebust languages.json ([#34711](https://github.com/element-hq/element-web/pull/34711)). Contributed by @RiotRobot.
+* Fix layout of user status dropdown ([#34668](https://github.com/element-hq/element-web/pull/34668)). Contributed by @dbkr.
+* Fix notification badge sizing ([#34655](https://github.com/element-hq/element-web/pull/34655)). Contributed by @ZacksBot.
+* Keep a file's extension when it is renamed in the desktop save dialog ([#34601](https://github.com/element-hq/element-web/pull/34601)). Contributed by @hayaksi1.
+* Update the pinned message banner when a pinned message is edited ([#34631](https://github.com/element-hq/element-web/pull/34631)). Contributed by @hayaksi1.
+* Use the dark code highlighting stylesheet in the dark-custom theme ([#34491](https://github.com/element-hq/element-web/pull/34491)). Contributed by @hayaksi1.
+* Keep a copy of the audio buffer so the WAV fallback can run ([#34481](https://github.com/element-hq/element-web/pull/34481)). Contributed by @hayaksi1.
+* Update the member list invite button when power levels change ([#34475](https://github.com/element-hq/element-web/pull/34475)). Contributed by @hayaksi1.
+* Open linkified room aliases and permalinks in the app rather than the browser ([#34507](https://github.com/element-hq/element-web/pull/34507)). Contributed by @hayaksi1.
+* Stop large audio playback when the media element ends ([#34495](https://github.com/element-hq/element-web/pull/34495)). Contributed by @hayaksi1.
+* Fix spacing in user status dropdown ([#34589](https://github.com/element-hq/element-web/pull/34589)). Contributed by @dbkr.
+* Reverse a confirmed autocomplete with a single undo ([#34635](https://github.com/element-hq/element-web/pull/34635)). Contributed by @hayaksi1.
+* Allow a notification keyword to start with a dot ([#34574](https://github.com/element-hq/element-web/pull/34574)). Contributed by @hayaksi1.
+* Fix mistaken reference to element\_call.disable in docs ([#34647](https://github.com/element-hq/element-web/pull/34647)). Contributed by @robintown.
+* Round the room preview dialog like everything around it ([#34597](https://github.com/element-hq/element-web/pull/34597)). Contributed by @hayaksi1.
+* Increase Threads panel header height to 64px to match Pinned Message banner ([#34566](https://github.com/element-hq/element-web/pull/34566)). Contributed by @PrinceXDev.
+* fix: align room timeline scrollbar to viewport edge  ([#33788](https://github.com/element-hq/element-web/pull/33788)). Contributed by @Adi-Beker.
+* Let a click on the separator wander a little before it counts as a drag ([#34580](https://github.com/element-hq/element-web/pull/34580)). Contributed by @hayaksi1.
+* Surface an error when a downloaded file can't be opened instead of failing silently ([#33998](https://github.com/element-hq/element-web/pull/33998)). Contributed by @hayaksi1.
+* Keep emoji at code size inside code blocks so line numbers stay aligned ([#34497](https://github.com/element-hq/element-web/pull/34497)). Contributed by @hayaksi1.
+* Make permalinks to the same event work more than once ([#34483](https://github.com/element-hq/element-web/pull/34483)). Contributed by @hayaksi1.
+* Remove code to round panel size on resize ([#34543](https://github.com/element-hq/element-web/pull/34543)). Contributed by @MidhunSureshR.
+* Do not ask for a room address when the room already has one ([#34499](https://github.com/element-hq/element-web/pull/34499)). Contributed by @hayaksi1.
+* Show the filename in the audio player title when the event has one ([#34479](https://github.com/element-hq/element-web/pull/34479)). Contributed by @hayaksi1.
+* Treat an unset profile field as unchanged in collapsed membership summaries ([#34493](https://github.com/element-hq/element-web/pull/34493)). Contributed by @hayaksi1.
+* Open space settings when editing a space topic ([#34477](https://github.com/element-hq/element-web/pull/34477)). Contributed by @hayaksi1.
+* Show "border" type of separator when clicking on separator ([#34549](https://github.com/element-hq/element-web/pull/34549)). Contributed by @MidhunSureshR.
+* fix member list scroll bug where invited 3PID users replace joined members ([#34427](https://github.com/element-hq/element-web/pull/34427)). Contributed by @rizzler13.
+* Update Twemoji credits links ([#34461](https://github.com/element-hq/element-web/pull/34461)). Contributed by @t3chguy.
+* Fix joinRoom failing when the roomviewstore state changes. ([#34180](https://github.com/element-hq/element-web/pull/34180)). Contributed by @Half-Shot.
+* Fixed collapsed URL preview incorrect aspect ratio for chromium ([#34382](https://github.com/element-hq/element-web/pull/34382)). Contributed by @Siriusmart.
+
+
+Changes in [1.12.25](https://github.com/element-hq/element-web/releases/tag/v1.12.25) (2026-08-05)
+==================================================================================================
+## 🦖 Deprecations
+
+* Remove support for MSC3391 \& MSC3852 ([#34400](https://github.com/element-hq/element-web/pull/34400)). Contributed by @t3chguy.
+
+## ✨ Features
+
+* Auto Collapse Behaviour - Collapse left panel during calls ([#33771](https://github.com/element-hq/element-web/pull/33771)). Contributed by @MidhunSureshR.
+* Use correct color for cancel button in dialog ([#34308](https://github.com/element-hq/element-web/pull/34308)). Contributed by @florianduros.
+* Auto Collapse Behaviour - Collapse left panel on window resize ([#32964](https://github.com/element-hq/element-web/pull/32964)). Contributed by @MidhunSureshR.
+* Room list: change `Edit section` label to `Save` in edit section dialog ([#34364](https://github.com/element-hq/element-web/pull/34364)). Contributed by @florianduros.
+* Set auto on-a-call status ([#34306](https://github.com/element-hq/element-web/pull/34306)). Contributed by @dbkr.
+* Collapsed URL previews in timeline ([#34165](https://github.com/element-hq/element-web/pull/34165)). Contributed by @Siriusmart.
+* Include the url preview bundle field in the devtools timeline event editor ([#34289](https://github.com/element-hq/element-web/pull/34289)). Contributed by @Siriusmart.
+* Use url preview bundle for URL preview in timeline (MSC4095) ([#34170](https://github.com/element-hq/element-web/pull/34170)). Contributed by @Siriusmart.
+* Support for reading m.call status ([#34295](https://github.com/element-hq/element-web/pull/34295)). Contributed by @dbkr.
+* Auto Collapse Behaviour - Add necessary functionality to `UIStore` ([#32963](https://github.com/element-hq/element-web/pull/32963)). Contributed by @MidhunSureshR.
+* Introduce a Module API to get application settings. ([#34278](https://github.com/element-hq/element-web/pull/34278)). Contributed by @Half-Shot.
+* Make notification settings copy/layout more user-friendly ([#34120](https://github.com/element-hq/element-web/pull/34120)). Contributed by @mxandreas.
+
+## 🐛 Bug Fixes
+
+* Fix various dialogs failing to open due to containing linked text ([#34304](https://github.com/element-hq/element-web/pull/34304)). Contributed by @Half-Shot.
+* Draw a styled 32px macOS title bar band ([#34419](https://github.com/element-hq/element-web/pull/34419)). Contributed by @langleyd.
+* Room list: fix scrolling with touch device ([#34381](https://github.com/element-hq/element-web/pull/34381)). Contributed by @florianduros.
+* Update to Seshat 5.0.0, fixing panics ([#34396](https://github.com/element-hq/element-web/pull/34396)). Contributed by @richvdh.
+* Add ellipsis and title to spotlight search results ([#34379](https://github.com/element-hq/element-web/pull/34379)). Contributed by @langleyd.
+* Room list: increase startup performance when rooms have notifications ([#34358](https://github.com/element-hq/element-web/pull/34358)). Contributed by @florianduros.
+* Widen the macOS title-bar drag strips so the window is easy to move ([#33991](https://github.com/element-hq/element-web/pull/33991)). Contributed by @hayaksi1.
+* Warn when an encrypted search runs before the index has finished building ([#34001](https://github.com/element-hq/element-web/pull/34001)). Contributed by @hayaksi1.
+* Make the text copy button use IconButton ([#34224](https://github.com/element-hq/element-web/pull/34224)). Contributed by @dbkr.
+* Room list: fix \*Chat moved\* toast appearing when room list is loaded ([#34305](https://github.com/element-hq/element-web/pull/34305)). Contributed by @florianduros.
+* Enable some oxlint a11y rules \& improve keyboard accessibility ([#34291](https://github.com/element-hq/element-web/pull/34291)). Contributed by @t3chguy.
+* Fix join call button in header having two labels ([#34293](https://github.com/element-hq/element-web/pull/34293)). Contributed by @robintown.
+* Fixed sending url preview bundles relying on update delay ([#34266](https://github.com/element-hq/element-web/pull/34266)). Contributed by @Siriusmart.
+* Room list: fix when a room is added twice ([#34281](https://github.com/element-hq/element-web/pull/34281)). Contributed by @florianduros.
+* Make the persistent-storage request observable and warn when it is denied ([#33987](https://github.com/element-hq/element-web/pull/33987)). Contributed by @hayaksi1.
+* Give the collapsed space panel separator clearance from the macOS traffic lights ([#34243](https://github.com/element-hq/element-web/pull/34243)). Contributed by @spoisseroux.
+* Fix incorrect plural form in call tile ([#34272](https://github.com/element-hq/element-web/pull/34272)). Contributed by @florianduros.
+
+
+Changes in [1.12.24](https://github.com/element-hq/element-web/releases/tag/v1.12.24) (2026-07-21)
+==================================================================================================
+## ✨ Features
+
+* Add user status to autocomplete suggestion ([#34241](https://github.com/element-hq/element-web/pull/34241)). Contributed by @dbkr.
+* Add user status to dm room header ([#34225](https://github.com/element-hq/element-web/pull/34225)). Contributed by @dbkr.
+* User status in room summary card ([#34239](https://github.com/element-hq/element-web/pull/34239)). Contributed by @dbkr.
+* Sending URL Preview Bundles (MSC 4095) ([#34150](https://github.com/element-hq/element-web/pull/34150)). Contributed by @Siriusmart.
+* Add config param to disable client wellknown fetch ([#34084](https://github.com/element-hq/element-web/pull/34084)). Contributed by @langleyd.
+* Ongoing call tiles - Implement the view-models and store ([#34198](https://github.com/element-hq/element-web/pull/34198)). Contributed by @MidhunSureshR.
+* Ongoing call tiles - Implement the required views ([#34197](https://github.com/element-hq/element-web/pull/34197)). Contributed by @MidhunSureshR.
+* Add user status emoji to member list ([#34210](https://github.com/element-hq/element-web/pull/34210)). Contributed by @dbkr.
+* Add user status in user info right panel card ([#34212](https://github.com/element-hq/element-web/pull/34212)). Contributed by @dbkr.
+* RoomList: add back Favourites and Low Priority filters when sections are disabled ([#34162](https://github.com/element-hq/element-web/pull/34162)). Contributed by @florianduros.
+* Add user status to DM rooms in the room list ([#34191](https://github.com/element-hq/element-web/pull/34191)). Contributed by @dbkr.
+* Adapt OAuth2 implementation to Matrix Spec v1.18 ([#34026](https://github.com/element-hq/element-web/pull/34026)). Contributed by @t3chguy.
+* Implement tombstone tiles for calls in room and DM ([#34141](https://github.com/element-hq/element-web/pull/34141)). Contributed by @MidhunSureshR.
+* Allow disabling legacy calls and make `Voice & Video` settings `Legacy Voice & Video` ([#33692](https://github.com/element-hq/element-web/pull/33692)). Contributed by @toger5.
+* UI for setting user status ([#33856](https://github.com/element-hq/element-web/pull/33856)). Contributed by @dbkr.
+* Start voice call in PiP (not in fullscreen) ([#34055](https://github.com/element-hq/element-web/pull/34055)). Contributed by @toger5.
+* Add a module API for overriding the composer preview. ([#33978](https://github.com/element-hq/element-web/pull/33978)). Contributed by @Half-Shot.
+* Remove legacy room list ([#34040](https://github.com/element-hq/element-web/pull/34040)). Contributed by @florianduros.
+* Add URL preview above message composer ([#33964](https://github.com/element-hq/element-web/pull/33964)). Contributed by @Half-Shot.
+
+## 🐛 Bug Fixes
+
+* Fix icon in Jitsi lobby not rendering correctly ([#34246](https://github.com/element-hq/element-web/pull/34246)). Contributed by @t3chguy.
+* Automatically recover from a renderer crash instead of leaving a blank window ([#33988](https://github.com/element-hq/element-web/pull/33988)). Contributed by @hayaksi1.
+* Fetch authenticated media through the session for "Save image as" ([#33997](https://github.com/element-hq/element-web/pull/33997)). Contributed by @hayaksi1.
+* RoomList: fix room scroll when clicked in thread activity centre ([#34179](https://github.com/element-hq/element-web/pull/34179)). Contributed by @florianduros.
+* Center long user ids in the user menu ([#34182](https://github.com/element-hq/element-web/pull/34182)). Contributed by @dbkr.
+* Fix composer preview getting stuck on a single module API preview ([#34173](https://github.com/element-hq/element-web/pull/34173)). Contributed by @Half-Shot.
+* Throttle notification sounds so a backlog doesn't play them all at once ([#33989](https://github.com/element-hq/element-web/pull/33989)). Contributed by @hayaksi1.
+* Change user ID colour to secondary ([#34129](https://github.com/element-hq/element-web/pull/34129)). Contributed by @dbkr.
+* Fix map tooltip overlapping message composer ([#33982](https://github.com/element-hq/element-web/pull/33982)). Contributed by @Tamajit-005.
+* Clear the composer preview after sending a message. ([#34116](https://github.com/element-hq/element-web/pull/34116)). Contributed by @Half-Shot.
+* Room list: fix unnecessary re-rendering of room list items while scrolling ([#34112](https://github.com/element-hq/element-web/pull/34112)). Contributed by @florianduros.
+* Room list: improve performance with smarter custom section loading ([#34102](https://github.com/element-hq/element-web/pull/34102)). Contributed by @florianduros.
+* Pluralise the multi-session remove button and confirmation dialog ([#33983](https://github.com/element-hq/element-web/pull/33983)). Contributed by @nnhhoang.
+
+
+Changes in [1.12.23](https://github.com/element-hq/element-web/releases/tag/v1.12.23) (2026-07-07)
+==================================================================================================
+## ✨ Features
+
+* Sticky Header for Room List Sections ([#33968](https://github.com/element-hq/element-web/pull/33968)). Contributed by @langleyd.
+* Improve link preview look and feel ([#33981](https://github.com/element-hq/element-web/pull/33981)). Contributed by @Half-Shot.
+* Room list: move sections out of labs to all the users ([#33810](https://github.com/element-hq/element-web/pull/33810)). Contributed by @florianduros.
+* Add "user identity" display to dev tools ([#33977](https://github.com/element-hq/element-web/pull/33977)). Contributed by @richvdh.
+* Add unread toast to room list sections ([#33961](https://github.com/element-hq/element-web/pull/33961)). Contributed by @langleyd.
+* Room list: add drag and drop of sections to reorder them ([#33606](https://github.com/element-hq/element-web/pull/33606)). Contributed by @florianduros.
+* Room list: add release announcement for sections ([#33800](https://github.com/element-hq/element-web/pull/33800)). Contributed by @florianduros.
+
+## 🐛 Bug Fixes
+
+* [Backport staging] Room list: put toast over sticky headers ([#34137](https://github.com/element-hq/element-web/pull/34137)). Contributed by @RiotRobot.
+* [Backport staging] Update Compound to fix tooltips ([#34097](https://github.com/element-hq/element-web/pull/34097)). Contributed by @RiotRobot.
+* Fix: Focusing a room in the room list(without hovering) doesn't allow tabbing to the more menu ([#34043](https://github.com/element-hq/element-web/pull/34043)). Contributed by @langleyd.
+* Fix double tooltip on collapsed Quick Settings button ([#33923](https://github.com/element-hq/element-web/pull/33923)). Contributed by @t3chguy.
+* Fix long display / user names in UserMenu ([#33900](https://github.com/element-hq/element-web/pull/33900)). Contributed by @dbkr.
+* Fix handling of deeplinks on Element Desktop ([#33827](https://github.com/element-hq/element-web/pull/33827)). Contributed by @t3chguy.
+
+
+Changes in [1.12.22](https://github.com/element-hq/element-web/releases/tag/v1.12.22) (2026-06-23)
+==================================================================================================
+## ✨ Features
+
+* User status in user menu ([#33797](https://github.com/element-hq/element-web/pull/33797)). Contributed by @dbkr.
+* Room list: add notifications to section headers ([#33826](https://github.com/element-hq/element-web/pull/33826)). Contributed by @florianduros.
+* Room list: remove logic to expand a section when a filter is selected ([#33785](https://github.com/element-hq/element-web/pull/33785)). Contributed by @florianduros.
+* Add mechanism to locally enforce MSC1763 retention rules ([#33772](https://github.com/element-hq/element-web/pull/33772)). Contributed by @Half-Shot.
+* Disable URL previews per-message when the message provides a hint ([#33775](https://github.com/element-hq/element-web/pull/33775)). Contributed by @Half-Shot.
+* Room list: improve section in room list context menu ([#33733](https://github.com/element-hq/element-web/pull/33733)). Contributed by @florianduros.
+* Room list: remove "Sections are only for you” in edition section dialog ([#33780](https://github.com/element-hq/element-web/pull/33780)). Contributed by @florianduros.
+* Room list: remove checkmark in section toast ([#33779](https://github.com/element-hq/element-web/pull/33779)). Contributed by @florianduros.
+* Room list: add fade effect to room list item being dragged ([#33696](https://github.com/element-hq/element-web/pull/33696)). Contributed by @florianduros.
+* Add user status on user profile icon ([#33653](https://github.com/element-hq/element-web/pull/33653)). Contributed by @dbkr.
+* [Labs] Sign in with QR on new EW using generated QR for MSC4108 v2024 ([#33184](https://github.com/element-hq/element-web/pull/33184)). Contributed by @t3chguy.
+* Room list: add expand all icon to room list header ([#33732](https://github.com/element-hq/element-web/pull/33732)). Contributed by @florianduros.
+* Implement new separator design ([#33599](https://github.com/element-hq/element-web/pull/33599)). Contributed by @MidhunSureshR.
+
+## 🐛 Bug Fixes
+
+* [Backport staging] Fix broken scrollbar introduced by separator redesign ([#33947](https://github.com/element-hq/element-web/pull/33947)). Contributed by @RiotRobot.
+* Apply html utils sanitiser to embedded page ([#33842](https://github.com/element-hq/element-web/pull/33842)). Contributed by @t3chguy.
+* Room list: fix keyboard navigation on sections ([#33809](https://github.com/element-hq/element-web/pull/33809)). Contributed by @florianduros.
+* Room list: hide the empty/collapse icon when the room list is empty ([#33814](https://github.com/element-hq/element-web/pull/33814)). Contributed by @florianduros.
+* Handle unknown screens better  ([#33793](https://github.com/element-hq/element-web/pull/33793)). Contributed by @t3chguy.
+* Make presence icons \& colours consistent throughout the app ([#33764](https://github.com/element-hq/element-web/pull/33764)). Contributed by @dbkr.
+* Add padding to account for input outline in devtools ([#33766](https://github.com/element-hq/element-web/pull/33766)). Contributed by @Johennes.
+* Limit width of the display name in user menu ([#33746](https://github.com/element-hq/element-web/pull/33746)). Contributed by @dbkr.
+* Room list: hide empty section when a filter is enabled ([#33747](https://github.com/element-hq/element-web/pull/33747)). Contributed by @florianduros.
+* Room list: display compose menu when sections are enabled ([#33725](https://github.com/element-hq/element-web/pull/33725)). Contributed by @florianduros.
+
+
+Changes in [1.12.21](https://github.com/element-hq/element-web/releases/tag/v1.12.21) (2026-06-09)
+==================================================================================================
+## ✨ Features
+
+* Bump module API to 1.14.0 ([#33685](https://github.com/element-hq/element-web/pull/33685)). Contributed by @Half-Shot.
+* Apply new design and display logic to logout confirmation dialog ([#33426](https://github.com/element-hq/element-web/pull/33426)). Contributed by @uhoreg.
+* Room list: improve custom sections in Spaces  ([#33523](https://github.com/element-hq/element-web/pull/33523)). Contributed by @florianduros.
+* Periodically nag the user if their device remains unverified ([#33346](https://github.com/element-hq/element-web/pull/33346)). Contributed by @uhoreg.
+* Use the separator as border between roomlist and main panel ([#33598](https://github.com/element-hq/element-web/pull/33598)). Contributed by @MidhunSureshR.
+* Add support for `m.recent_emoji` account data event ([#33172](https://github.com/element-hq/element-web/pull/33172)). Contributed by @t3chguy.
+* Room list: reduce font size of sections ([#33580](https://github.com/element-hq/element-web/pull/33580)). Contributed by @florianduros.
+
+## 🐛 Bug Fixes
+
+* Remove resizer from fullscreen modules(like multiroom) ([#33684](https://github.com/element-hq/element-web/pull/33684)). Contributed by @langleyd.
+* fix: use configured brand name in JSON and PlainText chat export filenames ([#33680](https://github.com/element-hq/element-web/pull/33680)). Contributed by @RoySerbi.
+* Fix pinned message banner disappearing when a pinned message event is unkown ([#33534](https://github.com/element-hq/element-web/pull/33534)). Contributed by @florianduros.
+
+
+Changes in [1.12.20](https://github.com/element-hq/element-web/releases/tag/v1.12.20) (2026-05-27)
+==================================================================================================
+## 🐛 Bug Fixes
+
+* [Backport staging] Realign the User Menu profile picture on desktop ([#33634](https://github.com/element-hq/element-web/pull/33634)). Contributed by @RiotRobot.
+
+
+Changes in [1.12.19](https://github.com/element-hq/element-web/releases/tag/v1.12.19) (2026-05-27)
+==================================================================================================
+## 🦖 Deprecations
+
+* Remove MSC3215 (Report to Moderators) labs feature ([#33492](https://github.com/element-hq/element-web/pull/33492)). Contributed by @turt2live.
+
+## ✨ Features
+
+* Tweak new user menu design ([#33444](https://github.com/element-hq/element-web/pull/33444)). Contributed by @dbkr.
+* Call Tile - Improve tile alignment in modern and bubble layout ([#33478](https://github.com/element-hq/element-web/pull/33478)). Contributed by @MidhunSureshR.
+* Module API for adding new file upload mechanisms ([#33355](https://github.com/element-hq/element-web/pull/33355)). Contributed by @Half-Shot.
+* Incoming Element Calls now trigger a regular OS notification ([#33499](https://github.com/element-hq/element-web/pull/33499)). Contributed by @MatrimAl.
+* Call Tile - Support declined call tile ([#33371](https://github.com/element-hq/element-web/pull/33371)). Contributed by @MidhunSureshR.
+* Room list: drag and drop rooms into sections ([#33366](https://github.com/element-hq/element-web/pull/33366)). Contributed by @florianduros.
+* Call Tile - Render a tile showing that a call was started ([#32988](https://github.com/element-hq/element-web/pull/32988)). Contributed by @MidhunSureshR.
+* Update button in incoming call toast to say 'Decline' ([#33405](https://github.com/element-hq/element-web/pull/33405)). Contributed by @robintown.
+* Refactor and redesign user menu ([#32812](https://github.com/element-hq/element-web/pull/32812)). Contributed by @Half-Shot.
+
+## 🐛 Bug Fixes
+
+* Ensure interface gradually reduces visible buttons when viewport shrinks ([#33477](https://github.com/element-hq/element-web/pull/33477)). Contributed by @Half-Shot.
+* Room list: add robustness to custom section loading ([#33475](https://github.com/element-hq/element-web/pull/33475)). Contributed by @florianduros.
+* Make it possible to scroll overflowing hidden events again ([#33481](https://github.com/element-hq/element-web/pull/33481)). Contributed by @robintown.
+* Fix user menu overlap with macos window controls ([#33425](https://github.com/element-hq/element-web/pull/33425)). Contributed by @dbkr.
+* Visually indicate on hover that user menu can be clicked ([#33408](https://github.com/element-hq/element-web/pull/33408)). Contributed by @robintown.
+* Fix TAC badges when hovered ([#33423](https://github.com/element-hq/element-web/pull/33423)). Contributed by @florianduros.
+
+
+Changes in [1.12.18](https://github.com/element-hq/element-web/releases/tag/v1.12.18) (2026-05-12)
+==================================================================================================
+## ✨ Features
+
+* Room list: add collapse/expand all sections ([#33318](https://github.com/element-hq/element-web/pull/33318)). Contributed by @florianduros.
+* Show user status in timeline ([#32991](https://github.com/element-hq/element-web/pull/32991)). Contributed by @Half-Shot.
+* Disable URL Preview setting if disabled on the homeserver ([#33279](https://github.com/element-hq/element-web/pull/33279)). Contributed by @Half-Shot.
+* Go to welcome on logout ([#33306](https://github.com/element-hq/element-web/pull/33306)). Contributed by @t3chguy.
+* Room list: edit or remove custom sections ([#33283](https://github.com/element-hq/element-web/pull/33283)). Contributed by @florianduros.
+* Re-generate QR code if the channel expires before scan ([#33303](https://github.com/element-hq/element-web/pull/33303)). Contributed by @t3chguy.
+* Update toast styles, improve incoming call notifications ([#33043](https://github.com/element-hq/element-web/pull/33043)). Contributed by @robintown.
+* Add Module Composer API ([#33284](https://github.com/element-hq/element-web/pull/33284)). Contributed by @Half-Shot.
+* Room list: exclude default section from room list item menu ([#33278](https://github.com/element-hq/element-web/pull/33278)). Contributed by @florianduros.
+* Show 'Verify this device' toast even if there are no encrypted rooms yet ([#32891](https://github.com/element-hq/element-web/pull/32891)). Contributed by @andybalaam.
+* Promote "Share encrypted history" from labs ([#33281](https://github.com/element-hq/element-web/pull/33281)). Contributed by @richvdh.
+* Room list: assign room to section when section is created ([#33240](https://github.com/element-hq/element-web/pull/33240)). Contributed by @florianduros.
+* Confirm before inviting unknown users to a DM/room ([#33171](https://github.com/element-hq/element-web/pull/33171)). Contributed by @richvdh.
+* Room list: assign room to custom section ([#33238](https://github.com/element-hq/element-web/pull/33238)). Contributed by @florianduros.
+* Redesign link previews ([#33061](https://github.com/element-hq/element-web/pull/33061)). Contributed by @Half-Shot.
+* Room list: scroll to newly creation section ([#33210](https://github.com/element-hq/element-web/pull/33210)). Contributed by @florianduros.
+
+## 🐛 Bug Fixes
+
+* Update home page CSS ([#32723](https://github.com/element-hq/element-web/pull/32723)). Contributed by @wolterkam.
+* Web: Fix typo in `152x152` icon source of `manifest.json` ([#33369](https://github.com/element-hq/element-web/pull/33369)). Contributed by @bartvdbraak.
+* prevent replay hover from restarting playback ([#33364](https://github.com/element-hq/element-web/pull/33364)). Contributed by @ZacksBot.
+* Properly save `undefined` id tokens from OIDC login ([#33345](https://github.com/element-hq/element-web/pull/33345)). Contributed by @gingershaped.
+* Show the right cursor when hovering over a space ([#33351](https://github.com/element-hq/element-web/pull/33351)). Contributed by @robintown.
+* Set `type` in auth dict for `m.oauth` UIA stage ([#33344](https://github.com/element-hq/element-web/pull/33344)). Contributed by @gingershaped.
+* Remove duplicated UI in appearance settings ([#33336](https://github.com/element-hq/element-web/pull/33336)). Contributed by @t3chguy.
+* Move playwright-common wait-on from devDependencies to dependencies ([#33272](https://github.com/element-hq/element-web/pull/33272)). Contributed by @t3chguy.
+
+
 Changes in [1.12.17](https://github.com/element-hq/element-web/releases/tag/v1.12.17) (2026-04-30)
 ==================================================================================================
 ## 🐛 Bug Fixes
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 615e496938..8e5b3de55c 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -140,6 +140,10 @@ These are located in `/spec/` in `matrix-js-sdk` or `/test/` in `element-web`.
 When writing unit tests, please aim for a high level of test coverage
 for new code - 80% or greater. If you cannot achieve that, please document
 why it's not possible in your PR.
+CI will validate that the coverage reached on your change is sufficient,
+you can also assert this locally by installing https://github.com/Bachmann1234/diff_cover,
+running the entire test suite in coverage mode `pnpm coverage` then running
+`pnpm coverage:diff` to see the coverage of the diff between your HEAD and `develop`.
 
 Some sections of code are not sensible to add coverage for, such as those
 which explicitly inhibit noisy logging for tests. Which can be hidden using
diff --git a/apps/desktop/.eslintrc.cjs b/apps/desktop/.eslintrc.cjs
deleted file mode 100644
index 7a1d06729c..0000000000
--- a/apps/desktop/.eslintrc.cjs
+++ /dev/null
@@ -1,97 +0,0 @@
-module.exports = {
-    plugins: ["matrix-org", "n"],
-    extends: ["plugin:matrix-org/javascript"],
-    parserOptions: {
-        ecmaVersion: 2021,
-        project: ["tsconfig.json"],
-    },
-    env: {
-        es6: true,
-        node: true,
-        // we also have some browser code (ie. the preload script)
-        browser: true,
-    },
-    // 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: {
-        "quotes": "off",
-        "indent": "off",
-        "prefer-promise-reject-errors": "off",
-        "no-async-promise-executor": "off",
-
-        "n/file-extension-in-import": ["error", "always"],
-        "unicorn/prefer-node-protocol": ["error"],
-    },
-    overrides: [
-        {
-            files: ["src/**/*.ts"],
-            extends: ["plugin:matrix-org/typescript"],
-            rules: {
-                // Things we do that break the ideal style
-                "prefer-promise-reject-errors": "off",
-                "quotes": "off",
-
-                "@typescript-eslint/no-explicit-any": "off",
-                // We're okay with assertion errors when we ask for them
-                "@typescript-eslint/no-non-null-assertion": "off",
-            },
-        },
-        {
-            files: ["hak/**/*.ts"],
-            extends: ["plugin:matrix-org/typescript"],
-            parserOptions: {
-                project: ["hak/tsconfig.json"],
-            },
-            rules: {
-                // Things we do that break the ideal style
-                "prefer-promise-reject-errors": "off",
-                "quotes": "off",
-                "n/file-extension-in-import": "off",
-
-                "@typescript-eslint/no-explicit-any": "off",
-                // We're okay with assertion errors when we ask for them
-                "@typescript-eslint/no-non-null-assertion": "off",
-            },
-        },
-        {
-            files: ["scripts/**/*.ts"],
-            extends: ["plugin:matrix-org/typescript"],
-            parserOptions: {
-                project: ["scripts/tsconfig.json"],
-            },
-            rules: {
-                // Things we do that break the ideal style
-                "prefer-promise-reject-errors": "off",
-                "quotes": "off",
-                "n/file-extension-in-import": "off",
-
-                "@typescript-eslint/no-explicit-any": "off",
-                // We're okay with assertion errors when we ask for them
-                "@typescript-eslint/no-non-null-assertion": "off",
-            },
-        },
-        {
-            files: ["playwright/**/*.ts"],
-            extends: ["plugin:matrix-org/typescript"],
-            parserOptions: {
-                project: ["playwright/tsconfig.json"],
-            },
-            rules: {
-                // Things we do that break the ideal style
-                "prefer-promise-reject-errors": "off",
-                "quotes": "off",
-
-                "@typescript-eslint/no-explicit-any": "off",
-                // We're okay with assertion errors when we ask for them
-                "@typescript-eslint/no-non-null-assertion": "off",
-            },
-        },
-        {
-            files: ["src/**/*.test.ts", "electron-builder.ts", "vitest.config.ts"],
-            extends: ["plugin:matrix-org/typescript"],
-            parserOptions: {
-                project: ["tsconfig.node.json"],
-            },
-        },
-    ],
-};
diff --git a/apps/desktop/.lintstagedrc b/apps/desktop/.lintstagedrc
deleted file mode 100644
index 673a390518..0000000000
--- a/apps/desktop/.lintstagedrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-    "*": "prettier --write --ignore-unknown",
-    "*.(ts|tsx)": ["eslint --fix"]
-}
diff --git a/apps/desktop/.node-version b/apps/desktop/.node-version
index 5bf4400f22..8dfc5cb1af 100644
--- a/apps/desktop/.node-version
+++ b/apps/desktop/.node-version
@@ -1 +1 @@
-24.15.0
+24.18.1
diff --git a/apps/desktop/.prettierrc.cjs b/apps/desktop/.prettierrc.cjs
deleted file mode 100644
index 6a17910f1a..0000000000
--- a/apps/desktop/.prettierrc.cjs
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require("eslint-plugin-matrix-org/.prettierrc.js");
diff --git a/apps/desktop/README.md b/apps/desktop/README.md
index e502355a12..5c7d4874fb 100644
--- a/apps/desktop/README.md
+++ b/apps/desktop/README.md
@@ -1,9 +1,4 @@
-![Build](https://github.com/vector-im/element-desktop/actions/workflows/build_desktop_and_deploy.yaml/badge.svg)
-![Static Analysis](https://github.com/vector-im/element-desktop/actions/workflows/static_analysis.yaml/badge.svg)
-[![Localazy](https://img.shields.io/endpoint?url=https%3A%2F%2Fconnect.localazy.com%2Fstatus%2Felement-web%2Fdata%3Fcontent%3Dall%26title%3Dlocalazy%26logo%3Dtrue)](https://localazy.com/p/element-web)
-[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=element-desktop&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=element-desktop)
-[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=element-desktop&metric=vulnerabilities)](https://sonarcloud.io/summary/new_code?id=element-desktop)
-[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=element-desktop&metric=bugs)](https://sonarcloud.io/summary/new_code?id=element-desktop)
+![Build](https://github.com/element-hq/element-web/actions/workflows/build_desktop_and_deploy.yaml/badge.svg)
 
 # Element Desktop
 
@@ -63,7 +58,7 @@ ln -s ../web/webapp ./
 
 TODO: List native pre-requisites
 
-Optionally, [build the native modules](https://github.com/vector-im/element-desktop/blob/develop/docs/native-node-modules.md),
+Optionally, [build the native modules](https://github.com/element-hq/element-web/blob/develop/docs/native-node-modules.md),
 which include support for searching in encrypted rooms and secure storage. Skipping this step is fine, you just won't have those features.
 
 Then, run
diff --git a/apps/desktop/babel.config.cjs b/apps/desktop/babel.config.cjs
index 9545b5983d..c603e3cf98 100644
--- a/apps/desktop/babel.config.cjs
+++ b/apps/desktop/babel.config.cjs
@@ -1,3 +1,10 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
 module.exports = {
     presets: [["@babel/preset-env", { targets: { node: "current" } }], "@babel/preset-typescript"],
 };
diff --git a/apps/desktop/dockerbuild/Dockerfile b/apps/desktop/dockerbuild/Dockerfile
index c529c5619b..792e677947 100644
--- a/apps/desktop/dockerbuild/Dockerfile
+++ b/apps/desktop/dockerbuild/Dockerfile
@@ -1,10 +1,17 @@
+# syntax=docker.io/docker/dockerfile:1.25-labs@sha256:4426b5e269e36911b94fb79cf67f1fd7155ef11b2bbc8ab23cbfcbc97130efe9
 # Docker image to facilitate building Element Desktop's native bits using a glibc version (2.31)
 # with broader compatibility, down to Debian bullseye & Ubuntu focal.
 
-FROM rust:bullseye@sha256:85f9d38ab80fa5752a6fd5bff34c953a59ce2c7ccb0d47fb678d3c0300b8a331
+# PNPM source
+FROM ghcr.io/pnpm/pnpm:11.10.0@sha256:9a6eb06d5f861d830fe27d85a91415e60527fa45ec45b52ee43c92a8aaf3bf8a AS pnpm
+
+FROM rust:bullseye@sha256:33e0cd779c556a248ac05acabb695c1da0cffaccc1796da507451482ac94d277
 
 ENV DEBIAN_FRONTEND=noninteractive
 
+COPY --from=pnpm /opt/pnpm /opt/pnpm
+RUN ln -s /opt/pnpm/pnpm /usr/local/bin/pnpm
+
 RUN apt-get -qq update && apt-get -y -qq dist-upgrade && \
   apt-get -y -qq install --no-install-recommends \
   # tclsh is required for building SQLite as part of SQLCipher
@@ -16,8 +23,9 @@ RUN ln -s /usr/bin/python3 /usr/bin/python & ln -s /usr/bin/pip3 /usr/bin/pip
 
 ENV DEBUG_COLORS=true
 ENV FORCE_COLOR=true
+ENV COREPACK_ENABLE_DOWNLOAD_PROMPT=0
 
-WORKDIR /project
+WORKDIR /project/apps/desktop
 
 ARG TARGETOS
 ARG TARGETARCH
diff --git a/apps/desktop/dockerbuild/setup.sh b/apps/desktop/dockerbuild/setup.sh
index a1b89d0faa..1b01e8ee69 100755
--- a/apps/desktop/dockerbuild/setup.sh
+++ b/apps/desktop/dockerbuild/setup.sh
@@ -9,4 +9,5 @@ ARCH="${archMap["$TARGETARCH"]}"
 NODE_VERSION=$(cat /.node-version | sed -e 's/^v//')
 curl --proto "=https" -L "https://nodejs.org/dist/v$NODE_VERSION/node-v$NODE_VERSION-$TARGETOS-$ARCH.tar.gz" | tar xz -C /usr/local --strip-components=1 && \
   unlink /usr/local/CHANGELOG.md && unlink /usr/local/LICENSE && unlink /usr/local/README.md
-corepack enable
\ No newline at end of file
+# We need yarn classic to build seshat
+npm install --global yarn@1
diff --git a/apps/desktop/electron-builder.ts b/apps/desktop/electron-builder.ts
index 08b5cef03a..174fe991d4 100644
--- a/apps/desktop/electron-builder.ts
+++ b/apps/desktop/electron-builder.ts
@@ -1,7 +1,15 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
 import * as os from "node:os";
 import * as fs from "node:fs";
-import * as path from "node:path";
-import { type Configuration as BaseConfiguration } from "electron-builder";
+import path from "node:path";
+import { type Configuration as BaseConfiguration, log } from "electron-builder";
+import { LogMessageByKey } from "app-builder-lib/out/node-module-collector/moduleManager.js";
 
 /**
  * This script has different outputs depending on your os platform.
@@ -70,7 +78,7 @@ if (process.env.VARIANT_PATH) {
     console.log(`Using variant configuration from '${process.env.VARIANT_PATH}':`);
     variant = {
         ...variant,
-        ...JSON.parse(fs.readFileSync(`${process.env.VARIANT_PATH}`, "utf8")),
+        ...JSON.parse(fs.readFileSync(process.env.VARIANT_PATH, "utf8")),
     };
 } else {
     console.warn(`No VARIANT_PATH specified, using default variant configuration '${DEFAULT_VARIANT}':`);
@@ -259,4 +267,17 @@ if (os.platform() === "linux") {
     }
 }
 
+// Treat certain warnings as a fatal error
+const FATAL_WARNINGS = [LogMessageByKey.PKG_NOT_ON_DISK, LogMessageByKey.PKG_NOT_FOUND];
+// Otherwise we just burn time running the tests for no reason.
+if (typeof log !== "undefined") {
+    const prevTransform = log.messageTransformer;
+    log.messageTransformer = (message, level) => {
+        if (level === "warn" && FATAL_WARNINGS.some((w) => message.startsWith(w))) {
+            throw new Error(`electron-builder: ${message}`);
+        }
+        return prevTransform?.(message, level) ?? message;
+    };
+}
+
 export default config;
diff --git a/apps/desktop/element.io/nightly/config.json b/apps/desktop/element.io/nightly/config.json
index 3cb23b0b5e..9c0cecfaa5 100644
--- a/apps/desktop/element.io/nightly/config.json
+++ b/apps/desktop/element.io/nightly/config.json
@@ -51,15 +51,11 @@
     "features": {
         "threadsActivityCentre": true,
         "feature_spotlight": true,
-        "feature_group_calls": true,
         "feature_video_rooms": true,
         "feature_element_call_video_rooms": true
     },
     "setting_defaults": {
         "RustCrypto.staged_rollout_percent": 100
     },
-    "element_call": {
-        "url": "https://call.element.dev"
-    },
     "map_style_url": "https://api.maptiler.com/maps/streets/style.json?key=fU3vlMsMn4Jb6dnEIFsx"
 }
diff --git a/apps/desktop/element.io/release/config.json b/apps/desktop/element.io/release/config.json
index 9bc948b2b6..b8aed8743d 100644
--- a/apps/desktop/element.io/release/config.json
+++ b/apps/desktop/element.io/release/config.json
@@ -50,10 +50,6 @@
     },
     "features": {
         "feature_video_rooms": true,
-        "feature_group_calls": true,
         "feature_element_call_video_rooms": true
-    },
-    "element_call": {
-        "url": "https://call.element.io"
     }
 }
diff --git a/apps/desktop/hak/matrix-seshat/check.ts b/apps/desktop/hak/matrix-seshat/check.ts
index 99a107eb5a..dba992e6fc 100644
--- a/apps/desktop/hak/matrix-seshat/check.ts
+++ b/apps/desktop/hak/matrix-seshat/check.ts
@@ -48,8 +48,9 @@ export default async function (hakEnv: HakEnv, moduleInfo: DependencyInfo): Prom
                             "` " +
                             "or your package manager if not using `rustup`",
                     );
+                    return;
                 }
-                fsProm.unlink("tmp").then(resolve);
+                resolve(fsProm.unlink("tmp"));
             },
         );
         rustc.stdin!.write("fn main() {}");
diff --git a/apps/desktop/hak/tsconfig.json b/apps/desktop/hak/tsconfig.json
index b762dda71a..2a3a2f7bdd 100644
--- a/apps/desktop/hak/tsconfig.json
+++ b/apps/desktop/hak/tsconfig.json
@@ -8,7 +8,9 @@
         "strict": true,
         "lib": ["es2022"],
         "types": ["node"],
-        "allowImportingTsExtensions": true
+        "allowImportingTsExtensions": true,
+        "skipLibCheck": true,
+        "noEmit": true
     },
     "include": ["../scripts/@types/*.d.ts", "./**/*.ts"]
 }
diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index f32776f09a..dec0f590f1 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -3,7 +3,7 @@
     "productName": "ThreadNet",
     "main": "lib/electron-main.js",
     "exports": "./lib/electron-main.js",
-    "version": "1.12.17",
+    "version": "1.12.26",
     "description": "Element: the future of secure communication",
     "author": {
         "name": "Element",
@@ -23,15 +23,13 @@
     "scripts": {
         "i18n": "matrix-gen-i18n && pnpm i18n:sort && pnpm i18n:lint",
         "i18n:sort": "matrix-sort-i18n src/i18n/strings/en_EN.json",
-        "i18n:lint": "prettier --log-level=silent  --write src/i18n/strings/ --ignore-path /dev/null",
+        "i18n:lint": "oxfmt src/i18n/strings/",
         "i18n:diff": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && pnpm i18n && matrix-compare-i18n-files src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
         "mkdirs": "mkdirp packages deploys",
         "fetch": "pnpm run mkdirs && node scripts/fetch-package.ts",
         "asar-webapp": "asar p webapp webapp.asar",
         "start": "nx start",
-        "lint": "pnpm lint:types && pnpm lint:js",
-        "lint:js": "eslint --max-warnings 0 src hak playwright scripts",
-        "lint:js-fix": "eslint --fix --max-warnings 0 src hak playwright scripts && prettier --log-level=warn --write .",
+        "lint": "pnpm lint:types",
         "lint:types": "pnpm lint:types:src && pnpm lint:types:node && pnpm lint:types:test && pnpm lint:types:scripts && pnpm lint:types:hak",
         "lint:types:src": "tsc --noEmit",
         "lint:types:node": "tsc --noEmit -p tsconfig.node.json",
@@ -47,13 +45,15 @@
         "docker:setup": "docker build --platform linux/amd64 -t element-desktop-dockerbuild -f dockerbuild/Dockerfile .",
         "docker:build:native": "scripts/in-docker.sh pnpm run hak",
         "docker:build": "scripts/in-docker.sh pnpm run build",
-        "docker:install": "scripts/in-docker.sh pnpm install",
+        "docker:install": "scripts/in-docker.sh pnpm install --filter=element-desktop --frozen-lockfile",
         "clean": "rimraf webapp.asar dist packages deploys lib",
         "hak": "node scripts/hak/index.ts",
         "test:unit": "vitest",
         "test:playwright": "nx test:playwright --",
         "test:playwright:open": "nx test:playwright -- --ui",
         "test:playwright:screenshots": "nx test:playwright:screenshots --",
+        "coverage": "pnpm test:unit --coverage",
+        "coverage:diff": "diff-cover --config-file ../../diff-cover.toml coverage/lcov.info",
         "sane-postinstall": "electron-builder install-app-deps"
     },
     "dependencies": {
@@ -70,50 +70,39 @@
         "@babel/core": "^7.18.10",
         "@babel/preset-env": "^7.18.10",
         "@babel/preset-typescript": "^7.18.6",
-        "@electron/asar": "4.2.0",
+        "@electron/asar": "4.2.1",
         "@electron/fuses": "^2.1.1",
-        "@element-hq/vite-common": "workspace:*",
         "@playwright/test": "catalog:",
-        "@stylistic/eslint-plugin": "^5.0.0",
         "@types/auto-launch": "^5.0.1",
         "@types/counterpart": "^0.18.1",
         "@types/minimist": "^1.2.1",
-        "@types/node": "18.19.130",
+        "@types/node": "catalog:",
         "@types/pacote": "^11.1.1",
-        "@typescript-eslint/eslint-plugin": "^8.0.0",
-        "@typescript-eslint/parser": "^8.0.0",
-        "@vitest/coverage-v8": "catalog:",
-        "app-builder-lib": "26.9.1",
+        "@typescript/native": "catalog:",
+        "app-builder-lib": "26.15.3",
         "chokidar": "^5.0.0",
         "detect-libc": "^2.0.0",
-        "electron": "42.0.0",
-        "electron-builder": "26.9.1",
-        "electron-builder-squirrel-windows": "26.9.1",
+        "electron": "43.2.0",
+        "electron-builder": "26.15.3",
+        "electron-builder-squirrel-windows": "26.15.3",
         "electron-devtools-installer": "^4.0.0",
-        "eslint": "^8.26.0",
-        "eslint-config-google": "^0.14.0",
-        "eslint-config-prettier": "^10.0.0",
-        "eslint-plugin-import": "^2.25.4",
-        "eslint-plugin-matrix-org": "^3.0.0",
-        "eslint-plugin-n": "^17.12.0",
-        "eslint-plugin-unicorn": "^56.0.0",
         "glob": "^13.0.0",
         "matrix-web-i18n": "catalog:",
         "memfs": "^4.57.2",
         "mkdirp": "^3.0.0",
-        "pacote": "^21.0.0",
-        "prettier": "^3.0.0",
+        "pacote": "^22.0.0",
         "rimraf": "^6.0.0",
+        "shared-types": "workspace:*",
         "tar": "^7.5.8",
-        "typescript": "6.0.3",
-        "vitest": "catalog:",
-        "vitest-sonar-reporter": "catalog:"
+        "typescript": "catalog:ts6",
+        "vitest": "catalog:"
     },
     "hakDependencies": {
-        "matrix-seshat": "4.2.0"
+        "matrix-seshat": "5.0.0"
     },
-    "packageManager": "pnpm@10.33.3+sha512.a19744364a7e248b92657a4ca5973f9354d21caf982579674b1c539f32c7420c47138ad8b1254df07aba9bc782d9b3029e3db34d5dbff974326eb74dac8ff489",
     "nx": {
-        "includedScripts": []
+        "includedScripts": [
+            "lint:types"
+        ]
     }
 }
diff --git a/apps/desktop/playwright/Dockerfile b/apps/desktop/playwright/Dockerfile
index 212eeb3438..6e4ac756b4 100644
--- a/apps/desktop/playwright/Dockerfile
+++ b/apps/desktop/playwright/Dockerfile
@@ -1,14 +1,21 @@
-FROM mcr.microsoft.com/playwright:v1.59.1-jammy@sha256:8a0360d39d1973be506dd59002904a774f6d697d4946c94063b3fd006461c8ff
+# syntax=docker.io/docker/dockerfile:1.25-labs@sha256:4426b5e269e36911b94fb79cf67f1fd7155ef11b2bbc8ab23cbfcbc97130efe9
+
+# PNPM source
+FROM ghcr.io/pnpm/pnpm:11.10.0@sha256:9a6eb06d5f861d830fe27d85a91415e60527fa45ec45b52ee43c92a8aaf3bf8a AS pnpm
+
+FROM mcr.microsoft.com/playwright:v1.61.1-jammy@sha256:7b86926fff94374389e8e1f4fdc5c76d050d4a06a7886bb537bf412b20e2b71e
 
 WORKDIR /work
 
+COPY --from=pnpm /opt/pnpm /opt/pnpm
+RUN ln -s /opt/pnpm/pnpm /usr/local/bin/pnpm
+
 RUN apt-get update && \
     apt-get -y install xvfb dbus-x11 && \
     apt-get purge -y --auto-remove && \
     rm -rf /var/lib/apt/lists/* && \
-    corepack enable
+    npm install -g pnpm@latest-11
 
-ENV COREPACK_ENABLE_DOWNLOAD_PROMPT=0
 ENV GITHUB_ACTIONS=1
 ENV DEBUG=pw:browser
 
diff --git a/apps/desktop/playwright/e2e/launch/config-options.spec.ts b/apps/desktop/playwright/e2e/launch/config-options.spec.ts
index 39d7c1d584..db5e91711c 100644
--- a/apps/desktop/playwright/e2e/launch/config-options.spec.ts
+++ b/apps/desktop/playwright/e2e/launch/config-options.spec.ts
@@ -5,19 +5,16 @@ 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 { resolve, dirname } from "node:path";
 import { fileURLToPath } from "node:url";
 
 import { test, expect } from "../../element-desktop-test.js";
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
 test.describe("App config options", () => {
     test.describe("Should load custom config via env", () => {
         test.slow();
         test.use({
             extraEnv: {
-                ELEMENT_DESKTOP_CONFIG_JSON: resolve(__dirname, "../..", "fixtures/custom-config.json"),
+                ELEMENT_DESKTOP_CONFIG_JSON: fileURLToPath(import.meta.resolve("../../fixtures/custom-config.json")),
             },
         });
         test("should launch and use configured homeserver", async ({ page }) => {
@@ -31,7 +28,7 @@ test.describe("App config options", () => {
     test.describe("Should load custom config via argument", () => {
         test.slow();
         test.use({
-            extraArgs: ["--config", resolve(__dirname, "../..", "fixtures/custom-config.json")],
+            extraArgs: ["--config", fileURLToPath(import.meta.resolve("../../fixtures/custom-config.json"))],
         });
         test("should launch and use configured homeserver", async ({ page }) => {
             await page.locator("#matrixchat").waitFor();
diff --git a/apps/desktop/playwright/e2e/launch/oidc.spec.ts b/apps/desktop/playwright/e2e/launch/oidc.spec.ts
index c741217a58..f366dd2e5e 100644
--- a/apps/desktop/playwright/e2e/launch/oidc.spec.ts
+++ b/apps/desktop/playwright/e2e/launch/oidc.spec.ts
@@ -9,7 +9,7 @@ import { test, expect } from "../../element-desktop-test.js";
 
 declare global {
     interface ElectronPlatform {
-        getOidcCallbackUrl(): URL;
+        getOAuthCallbackUrl(): URL;
     }
 
     interface Window {
@@ -29,7 +29,7 @@ test.describe("OIDC Native", () => {
     test("should use OIDC callback URL without authority component", async ({ page }) => {
         await expect(
             page.evaluate<string>(() => {
-                return window.mxPlatformPeg.get().getOidcCallbackUrl().toString();
+                return window.mxPlatformPeg.get().getOAuthCallbackUrl().toString();
             }),
         ).resolves.toMatch(/io\.element\.(desktop|nightly):\/vector\/webapp\//);
     });
diff --git a/apps/desktop/playwright/element-desktop-test.ts b/apps/desktop/playwright/element-desktop-test.ts
index b2fa3c983e..86ca5d1a72 100644
--- a/apps/desktop/playwright/element-desktop-test.ts
+++ b/apps/desktop/playwright/element-desktop-test.ts
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { _electron as electron, test as base, expect as baseExpect, type ElectronApplication } from "@playwright/test";
 import fs from "node:fs/promises";
-import path, { dirname } from "node:path";
+import path from "node:path";
 import os from "node:os";
 import { fileURLToPath } from "node:url";
 import { PassThrough } from "node:stream";
@@ -44,22 +44,19 @@ interface Fixtures {
     stderr: CapturedPassThrough;
 }
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 export const test = base.extend<Fixtures>({
     extraEnv: {},
     extraArgs: [],
 
-    // eslint-disable-next-line no-empty-pattern
     stdout: async ({}, use) => {
         await use(new CapturedPassThrough());
     },
-    // eslint-disable-next-line no-empty-pattern
     stderr: async ({}, use) => {
         await use(new CapturedPassThrough());
     },
 
-    // eslint-disable-next-line no-empty-pattern
     tmpDir: async ({}, use) => {
         const tmpDir = await fs.mkdtemp(path.join(os.tmpdir(), "element-desktop-tests-"));
         await use(tmpDir);
diff --git a/apps/desktop/scripts/copy-res.ts b/apps/desktop/scripts/copy-res.ts
index 18ce877d11..e8ac13b60f 100644
--- a/apps/desktop/scripts/copy-res.ts
+++ b/apps/desktop/scripts/copy-res.ts
@@ -1,10 +1,17 @@
 #!/usr/bin/env node
 
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
 // copies resources into the lib directory.
 
 import parseArgs from "minimist";
 import * as chokidar from "chokidar";
-import * as path from "node:path";
+import path from "node:path";
 import * as fs from "node:fs";
 
 const argv = parseArgs(process.argv.slice(2), {});
diff --git a/apps/desktop/scripts/fetch-package.ts b/apps/desktop/scripts/fetch-package.ts
index 21876c2a69..2d882f29f1 100644
--- a/apps/desktop/scripts/fetch-package.ts
+++ b/apps/desktop/scripts/fetch-package.ts
@@ -1,6 +1,12 @@
 #!/usr/bin/env node
+/*
+Copyright 2026 Element Creations Ltd.
 
-import * as path from "node:path";
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import path from "node:path";
 import { createWriteStream, promises as fs } from "node:fs";
 import * as childProcess from "node:child_process";
 import * as tar from "tar";
diff --git a/apps/desktop/scripts/generate-nightly-version.ts b/apps/desktop/scripts/generate-nightly-version.ts
index eef0ab997b..aa8245d99e 100644
--- a/apps/desktop/scripts/generate-nightly-version.ts
+++ b/apps/desktop/scripts/generate-nightly-version.ts
@@ -1,4 +1,10 @@
 #!/usr/bin/env node
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
 
 /**
  * Script to generate incremental Nightly build versions, based on the latest Nightly build version of that kind.
diff --git a/apps/desktop/scripts/get-version.ts b/apps/desktop/scripts/get-version.ts
index 2d28b3a24d..90e2b4d9be 100644
--- a/apps/desktop/scripts/get-version.ts
+++ b/apps/desktop/scripts/get-version.ts
@@ -1,4 +1,10 @@
 #!/usr/bin/env node
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
 
 /*
  * Checks for the presence of a webapp, inspects its version and prints it
diff --git a/apps/desktop/scripts/hak/copy.ts b/apps/desktop/scripts/hak/copy.ts
index dd266201cf..167aa8ef0b 100644
--- a/apps/desktop/scripts/hak/copy.ts
+++ b/apps/desktop/scripts/hak/copy.ts
@@ -27,7 +27,7 @@ export default async function copy(hakEnv: HakEnv, moduleInfo: DependencyInfo):
         if (moduleInfo.moduleBuildDirs.length > 1) {
             if (!hakEnv.isMac()) {
                 console.error(
-                    "You asked me to copy multiple targets but I've only been taught " + "how to do that on macOS.",
+                    "You asked me to copy multiple targets but I've only been taught how to do that on macOS.",
                 );
                 throw new Error("Can't copy multiple targets on this platform");
             }
diff --git a/apps/desktop/scripts/hak/hakEnv.ts b/apps/desktop/scripts/hak/hakEnv.ts
index 4ce382dc11..f3194f4f09 100644
--- a/apps/desktop/scripts/hak/hakEnv.ts
+++ b/apps/desktop/scripts/hak/hakEnv.ts
@@ -14,7 +14,7 @@ import childProcess, { type SpawnOptions } from "node:child_process";
 import { type Arch, type Target, TARGETS, getHost, isHostId, type TargetId } from "./target.ts";
 
 async function getRuntimeVersion(projectRoot: string): Promise<string> {
-    const electronVersion = await getElectronVersionFromInstalled(path.join(projectRoot, "..", ".."));
+    const electronVersion = await getElectronVersionFromInstalled(projectRoot);
     if (!electronVersion) {
         throw new Error("Can't determine Electron version");
     }
diff --git a/apps/desktop/scripts/hak/index.ts b/apps/desktop/scripts/hak/index.ts
index ea02582632..a48ac96f6b 100644
--- a/apps/desktop/scripts/hak/index.ts
+++ b/apps/desktop/scripts/hak/index.ts
@@ -6,7 +6,7 @@ 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 path, { dirname } from "node:path";
+import path from "node:path";
 import { fileURLToPath } from "node:url";
 
 import HakEnv from "./hakEnv.ts";
@@ -28,7 +28,7 @@ const METACOMMANDS: Record<string, string[]> = {
 // Scripts valid in a hak.json 'scripts' section
 const HAKSCRIPTS = ["check", "fetch", "build"];
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 async function main(): Promise<void> {
     const prefix = path.join(__dirname, "..", "..");
@@ -38,7 +38,6 @@ async function main(): Promise<void> {
     // Can be specified multiple times for the copy command to bundle
     // multiple arches into a single universal output module)
     for (;;) {
-        // eslint-disable-line no-constant-condition
         const targetIndex = process.argv.indexOf("--target");
         if (targetIndex === -1) break;
 
@@ -132,7 +131,7 @@ async function main(): Promise<void> {
         for (const mod of modules) {
             const depInfo = deps[mod];
             if (depInfo === undefined) {
-                console.log("Module " + mod + " not found - is it in hakDependencies " + "in your package.json?");
+                console.log(`Module ${mod} not found - is it in hakDependencies in your package.json?`);
                 process.exit(1);
             }
             console.log("hak " + cmd + ": " + mod);
diff --git a/apps/desktop/scripts/in-docker.sh b/apps/desktop/scripts/in-docker.sh
index 3df278bcb5..c358c3776f 100755
--- a/apps/desktop/scripts/in-docker.sh
+++ b/apps/desktop/scripts/in-docker.sh
@@ -12,7 +12,11 @@ if [ $? != 0 ]; then
     exit 1
 fi
 
-mkdir -p docker/node_modules docker/.hak docker/.gnupg
+mkdir -p \
+      docker/workspace_node_modules \
+      docker/node_modules \
+      docker/.hak \
+      docker/.gnupg
 
 # Taken from https://www.electron.build/multi-platform-build#docker
 # Pass through any vars prefixed with INDOCKER_, removing the prefix
@@ -21,9 +25,10 @@ docker run --rm -ti \
  --env-file <(env | grep -E '^INDOCKER_' | sed -e 's/^INDOCKER_//') \
  --env ELECTRON_CACHE="/root/.cache/electron" \
  --env ELECTRON_BUILDER_CACHE="/root/.cache/electron-builder" \
- -v ${PWD}:/project \
- -v ${PWD}/docker/node_modules:/project/node_modules \
- -v ${PWD}/docker/.hak:/project/.hak \
+ -v ${PWD}/../../:/project \
+ -v ${PWD}/docker/workspace_node_modules:/project/node_modules \
+ -v ${PWD}/docker/node_modules:/project/apps/desktop/node_modules \
+ -v ${PWD}/docker/.hak:/project/apps/desktop/.hak \
  -v ${PWD}/docker/.gnupg:/root/.gnupg \
  -v ~/.cache/electron:/root/.cache/electron \
  -v ~/.cache/electron-builder:/root/.cache/electron-builder \
diff --git a/apps/desktop/scripts/set-version.ts b/apps/desktop/scripts/set-version.ts
index 01e5027802..8f5041c1d3 100644
--- a/apps/desktop/scripts/set-version.ts
+++ b/apps/desktop/scripts/set-version.ts
@@ -1,4 +1,10 @@
 #!/usr/bin/env node
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
 
 /*
  * Checks for the presence of a webapp, inspects its version and sets the
diff --git a/apps/desktop/scripts/tsconfig.json b/apps/desktop/scripts/tsconfig.json
index bff3b8ae81..5b5a8b7096 100644
--- a/apps/desktop/scripts/tsconfig.json
+++ b/apps/desktop/scripts/tsconfig.json
@@ -10,7 +10,8 @@
         "strict": true,
         "lib": ["es2022"],
         "types": ["node"],
-        "allowImportingTsExtensions": true
+        "allowImportingTsExtensions": true,
+        "noEmit": true
     },
     "include": ["../src/@types", "./**/*.ts"]
 }
diff --git a/apps/desktop/src/@types/global.d.ts b/apps/desktop/src/@types/global.d.ts
index 840cc92077..3cba8d2fcc 100644
--- a/apps/desktop/src/@types/global.d.ts
+++ b/apps/desktop/src/@types/global.d.ts
@@ -10,13 +10,8 @@ import { type BrowserWindow } from "electron";
 import { type AppLocalization } from "../language-helper.js";
 
 // global type extensions need to use var for whatever reason
-/* eslint-disable no-var */
 declare global {
-    type IConfigOptions = Record<string, any>;
-
     var mainWindow: BrowserWindow | null;
     var appQuitting: boolean;
     var appLocalization: AppLocalization;
-    var vectorConfig: IConfigOptions;
 }
-/* eslint-enable no-var */
diff --git a/apps/desktop/src/@types/matrix-seshat.d.ts b/apps/desktop/src/@types/matrix-seshat.d.ts
index e93147b673..d68846fd2c 100644
--- a/apps/desktop/src/@types/matrix-seshat.d.ts
+++ b/apps/desktop/src/@types/matrix-seshat.d.ts
@@ -11,7 +11,6 @@ declare module "matrix-seshat" {
         passphrase?: string;
     }
 
-    /* eslint-disable camelcase */
     interface IMatrixEvent {
         event_id: string;
         sender: string;
@@ -49,7 +48,6 @@ declare module "matrix-seshat" {
             context: ISearchContext;
         }>;
     }
-    /* eslint-enable camelcase */
 
     interface ICheckpoint {
         roomId: string;
diff --git a/apps/desktop/src/args.test.ts b/apps/desktop/src/args.test.ts
new file mode 100644
index 0000000000..58e189185a
--- /dev/null
+++ b/apps/desktop/src/args.test.ts
@@ -0,0 +1,323 @@
+/*
+Copyright 2026 Element Creations 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 { expect, describe, it, beforeEach, vi } from "vitest";
+import { fs as memfs, vol } from "memfs";
+import { app } from "electron";
+
+import { type Args, getArgs, getArgsForProtocolRegistration } from "./args.js";
+import type ProtocolHandler from "./protocol.js";
+
+vi.mock("node:fs", () => ({ default: memfs }));
+vi.mock("electron", () => ({
+    app: {
+        getPath: vi.fn().mockImplementation((dirName) => {
+            if (dirName === "userData") return "/Users/name/Library/Application Support/Element";
+            if (dirName === "appData") return "/Users/name/Library/Application Support";
+            throw new Error("Not implemented");
+        }),
+        getName: vi.fn().mockReturnValue("Element"),
+        exit: vi.fn(),
+    },
+}));
+
+beforeEach(() => {
+    // Reset the state of the in-memory fs
+    vol.reset();
+    vi.restoreAllMocks();
+    vi.clearAllMocks();
+});
+
+describe("getArgsForProtocolRegistration", () => {
+    it("should return an empty array for default args", () => {
+        expect(
+            getArgsForProtocolRegistration({
+                userDataPath: "/Users/name/Library/Application Support/Element",
+                devtools: false,
+                update: true,
+                hidden: false,
+                positional: [],
+            }),
+        ).toStrictEqual([]);
+    });
+
+    it("should handle standard args", () => {
+        expect(
+            getArgsForProtocolRegistration({
+                userDataPath: "/Users/name/Library/Application Support/Custom",
+                localConfigPath: "/root/config.json",
+                devtools: true,
+                update: false,
+                hidden: false,
+                positional: [],
+            }),
+        ).toStrictEqual([
+            "--no-update",
+            "--config",
+            "/root/config.json",
+            "--profile-dir",
+            "/Users/name/Library/Application Support/Custom",
+        ]);
+    });
+
+    it("should ignore hidden=true", () => {
+        expect(
+            getArgsForProtocolRegistration({
+                userDataPath: "/Users/name/Library/Application Support/Element",
+                devtools: false,
+                update: true,
+                hidden: true,
+                positional: [],
+            }),
+        ).toStrictEqual([]);
+    });
+
+    it("should ignore positional args", () => {
+        expect(
+            getArgsForProtocolRegistration({
+                userDataPath: "/Users/name/Library/Application Support/Element",
+                devtools: false,
+                update: true,
+                hidden: false,
+                positional: ["element://foobar"],
+            }),
+        ).toStrictEqual([]);
+    });
+});
+
+describe("getArgs", () => {
+    function run(...args: string[]): Args {
+        vi.spyOn(process, "argv", "get").mockReturnValue(["/path/to/app", ...args]);
+        const mockProtocolHandler = {
+            getProfileFromDeeplink: vi.fn(),
+        } as unknown as ProtocolHandler;
+        return getArgs(mockProtocolHandler);
+    }
+
+    it("should handle '--help'", () => {
+        const args = run("--help");
+        expect(args).toEqual({
+            userDataPath: "/Users/name/Library/Application Support/Element",
+            devtools: false,
+            update: true,
+            hidden: false,
+            positional: ["/path/to/app"],
+        });
+        expect(app.exit).toHaveBeenCalled();
+    });
+
+    it("should handle no command line args", () => {
+        const args = run();
+        expect(args).toEqual({
+            userDataPath: "/Users/name/Library/Application Support/Element",
+            devtools: false,
+            update: true,
+            hidden: false,
+            positional: ["/path/to/app"],
+        });
+        expect(app.exit).not.toHaveBeenCalled();
+    });
+
+    it("should handle '--hidden'", () => {
+        const args = run("--hidden");
+        expect(args).toEqual({
+            userDataPath: "/Users/name/Library/Application Support/Element",
+            devtools: false,
+            update: true,
+            hidden: true,
+            positional: ["/path/to/app"],
+        });
+    });
+
+    it("should handle '--no-update'", () => {
+        const args = run("--no-update");
+        expect(args).toEqual({
+            userDataPath: "/Users/name/Library/Application Support/Element",
+            devtools: false,
+            update: false,
+            hidden: false,
+            positional: ["/path/to/app"],
+        });
+    });
+
+    describe("storageMode", () => {
+        it("should handle valid '--storage-mode'", () => {
+            const args = run("--storage-mode=force-plaintext");
+            expect(args).toEqual({
+                userDataPath: "/Users/name/Library/Application Support/Element",
+                devtools: false,
+                update: true,
+                hidden: false,
+                positional: ["/path/to/app"],
+                storageMode: "force-plaintext",
+            });
+        });
+
+        it("should ignore invalid '--storage-mode'", () => {
+            const args = run("--storage-mode=magic");
+            expect(args).toEqual({
+                userDataPath: "/Users/name/Library/Application Support/Element",
+                devtools: false,
+                update: true,
+                hidden: false,
+                positional: ["/path/to/app"],
+                storageMode: undefined,
+            });
+        });
+    });
+
+    describe("userDataPath", () => {
+        it("should handle deeplinks", () => {
+            vi.spyOn(process, "argv", "get").mockReturnValue([
+                "/path/to/app",
+                "protocol:/#state=foo:element-desktop-ssoid:XXYYZZ&code=bar",
+            ]);
+            const mockProtocolHandler = {
+                getProfileFromDeeplink: vi.fn().mockReturnValue("/path/to/deeplinked-profile"),
+            } as unknown as ProtocolHandler;
+            const args = getArgs(mockProtocolHandler);
+
+            expect(mockProtocolHandler.getProfileFromDeeplink).toHaveBeenCalledWith(process.argv);
+            expect(args).toEqual({
+                userDataPath: "/path/to/deeplinked-profile",
+                devtools: false,
+                update: true,
+                hidden: false,
+                positional: [...process.argv],
+            });
+        });
+
+        it("should handle '--profile-dir'", () => {
+            const args = run("--profile-dir", "/path/to/profile");
+            expect(args).toEqual({
+                userDataPath: "/path/to/profile",
+                devtools: false,
+                update: true,
+                hidden: false,
+                positional: ["/path/to/app"],
+            });
+        });
+
+        it("should handle '--profile'", () => {
+            const args = run("--profile", "work");
+            expect(args).toEqual({
+                userDataPath: "/Users/name/Library/Application Support/Element-work",
+                devtools: false,
+                update: true,
+                hidden: false,
+                positional: ["/path/to/app"],
+            });
+        });
+
+        it("should handle ELEMENT_PROFILE_DIR", () => {
+            vi.spyOn(process, "env", "get").mockReturnValue({
+                ELEMENT_PROFILE_DIR: "/mnt/foo/profile",
+            });
+            const args = run();
+            expect(args).toEqual({
+                userDataPath: "/mnt/foo/profile",
+                devtools: false,
+                update: true,
+                hidden: false,
+                positional: ["/path/to/app"],
+            });
+        });
+
+        it("should prefer deeplink over ELEMENT_PROFILE_DIR", () => {
+            vi.spyOn(process, "argv", "get").mockReturnValue(["/path/to/app", "protocol:/#state=foo&code=bar"]);
+            vi.spyOn(process, "env", "get").mockReturnValue({
+                ELEMENT_PROFILE_DIR: "/mnt/foo/profile",
+            });
+            const mockProtocolHandler = {
+                getProfileFromDeeplink: vi.fn().mockReturnValue("/path/to/deeplinked-profile"),
+            } as unknown as ProtocolHandler;
+            const args = getArgs(mockProtocolHandler);
+
+            expect(mockProtocolHandler.getProfileFromDeeplink).toHaveBeenCalledWith(process.argv);
+            expect(args).toEqual({
+                userDataPath: "/path/to/deeplinked-profile",
+                devtools: false,
+                update: true,
+                hidden: false,
+                positional: [...process.argv],
+            });
+        });
+
+        it("should combine ELEMENT_PROFILE_DIR with '--profile'", () => {
+            vi.spyOn(process, "env", "get").mockReturnValue({
+                ELEMENT_PROFILE_DIR: "/mnt/foo/profile",
+            });
+            const args = run("--profile", "play");
+            expect(args).toEqual({
+                userDataPath: "/mnt/foo/profile-play",
+                devtools: false,
+                update: true,
+                hidden: false,
+                positional: ["/path/to/app"],
+            });
+        });
+
+        it("should handle old Riot data dirs", () => {
+            vol.fromJSON({
+                "/Users/name/Library/Application Support/Riot/IndexedDB": "This is a real IDB. I promise.",
+            });
+
+            const args = run();
+            expect(args).toEqual({
+                userDataPath: "/Users/name/Library/Application Support/Riot",
+                devtools: false,
+                update: true,
+                hidden: false,
+                positional: ["/path/to/app"],
+            });
+        });
+    });
+
+    describe("localConfigPath", () => {
+        it("should handle '--config'", () => {
+            const args = run("--config", "/path/to/config.json");
+            expect(args).toEqual({
+                userDataPath: "/Users/name/Library/Application Support/Element",
+                devtools: false,
+                update: true,
+                hidden: false,
+                positional: ["/path/to/app"],
+                localConfigPath: "/path/to/config.json",
+            });
+        });
+
+        it("should handle ELEMENT_DESKTOP_CONFIG_JSON", () => {
+            vi.spyOn(process, "env", "get").mockReturnValue({
+                ELEMENT_DESKTOP_CONFIG_JSON: "/path/for/config.json",
+            });
+            const args = run();
+            expect(args).toEqual({
+                userDataPath: "/Users/name/Library/Application Support/Element",
+                devtools: false,
+                update: true,
+                hidden: false,
+                positional: ["/path/to/app"],
+                localConfigPath: "/path/for/config.json",
+            });
+        });
+
+        it("should prefer arg over env", () => {
+            vi.spyOn(process, "env", "get").mockReturnValue({
+                ELEMENT_DESKTOP_CONFIG_JSON: "/path/for/config.json",
+            });
+            const args = run("--config", "/path/to/config.json");
+            expect(args).toEqual({
+                userDataPath: "/Users/name/Library/Application Support/Element",
+                devtools: false,
+                update: true,
+                hidden: false,
+                positional: ["/path/to/app"],
+                localConfigPath: "/path/to/config.json",
+            });
+        });
+    });
+});
diff --git a/apps/desktop/src/args.ts b/apps/desktop/src/args.ts
new file mode 100644
index 0000000000..4f4f8fec52
--- /dev/null
+++ b/apps/desktop/src/args.ts
@@ -0,0 +1,165 @@
+/*
+Copyright 2026 Element Creations 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 minimist, { type ParsedArgs } from "minimist";
+import { app } from "electron";
+import fs from "node:fs";
+import path from "node:path";
+
+import { Mode } from "./store.js";
+import type ProtocolHandler from "./protocol.js";
+
+const defaultUserDataDir = app.getPath("userData");
+
+/**
+ * Calculates the command line arguments to include in the protocol registration,
+ * some parameters, e.g. '--hidden' are omitted as it'd cause the app to not be focused.
+ * Excludes all positional arguments as those are only relevant once, e.g. for OIDC auth callbacks.
+ * Includes unknown parameters as they are sometimes handled by Electron, e.g. `--proxy`.
+ * @param parsedArgs - the args the application was started with
+ */
+export function getArgsForProtocolRegistration(parsedArgs: Args): string[] {
+    const args: string[] = [];
+
+    if (!parsedArgs.update) {
+        args.push("--no-update");
+    }
+
+    if (parsedArgs.localConfigPath) {
+        args.push("--config", parsedArgs.localConfigPath);
+    }
+
+    if (parsedArgs.userDataPath != defaultUserDataDir) {
+        args.push("--profile-dir", parsedArgs.userDataPath);
+    }
+
+    return args;
+}
+
+/**
+ * Element Desktop launch args, returned by {@link getArgs}
+ */
+export interface Args {
+    /**
+     * Path to user data, root of all persistent data for this profile.
+     */
+    userDataPath: string;
+    /**
+     * Path to local override config.json file.
+     */
+    localConfigPath?: string;
+    /**
+     * The store {@link Mode} to use.
+     */
+    storageMode?: Mode;
+    /**
+     * Whether to install devtools.
+     */
+    devtools: boolean;
+    /**
+     * Whether to start the auto-updater.
+     */
+    update: boolean;
+    /**
+     * Whether to start the app hidden.
+     */
+    hidden: boolean;
+    /**
+     * Additional positional arguments found.
+     */
+    positional: string[];
+}
+
+/**
+ * Electron creates the user data directory (with just an empty 'Dictionaries' directory...)
+ * as soon as the app path is set, so pick a random path in it that must exist if it's a
+ * real user data directory.
+ */
+function isRealUserDataDir(d: string): boolean {
+    return fs.existsSync(path.join(d, "IndexedDB"));
+}
+
+function getUserDataPath(argv: ParsedArgs, protocolHandler: ProtocolHandler): string {
+    // check if we are passed a profile in the SSO callback url
+    const userDataPathInProtocol = protocolHandler.getProfileFromDeeplink(argv["_"]);
+    if (userDataPathInProtocol) {
+        return userDataPathInProtocol;
+    }
+
+    if (argv["profile-dir"]) {
+        return argv["profile-dir"];
+    }
+
+    let newUserDataPath = process.env.ELEMENT_PROFILE_DIR ?? defaultUserDataDir;
+    if (argv["profile"]) {
+        newUserDataPath += "-" + argv["profile"];
+    }
+
+    const newUserDataPathExists = isRealUserDataDir(newUserDataPath);
+    let oldUserDataPath = path.join(app.getPath("appData"), app.getName().replace("Element", "Riot"));
+    if (argv["profile"]) {
+        oldUserDataPath += "-" + argv["profile"];
+    }
+
+    const oldUserDataPathExists = isRealUserDataDir(oldUserDataPath);
+    console.log(`${newUserDataPath} exists: ${newUserDataPathExists ? "yes" : "no"}`);
+    console.log(`${oldUserDataPath} exists: ${oldUserDataPathExists ? "yes" : "no"}`);
+
+    if (!newUserDataPathExists && oldUserDataPathExists) {
+        console.log(`Using legacy user data path: ${oldUserDataPath}`);
+        return oldUserDataPath;
+    }
+    return newUserDataPath;
+}
+
+/**
+ * Parses command line arguments and handles the `--help` flag.
+ * If `--help` is present, it prints usage information and exits the application.
+ * Must be called before Electron's userData is set.
+ */
+export function getArgs(protocolHandler: ProtocolHandler): Args {
+    const argv = minimist(process.argv, {
+        alias: { help: "h" },
+    });
+
+    if (argv["help"]) {
+        console.log("Options:");
+        console.log("  --profile-dir {path}: Path to where to store the profile.");
+        console.log(
+            `  --profile {name}:     Name of alternate profile to use, allows for running multiple accounts.\n` +
+                `                         Ignored if --profile-dir is specified.\n` +
+                `                         The ELEMENT_PROFILE_DIR environment variable may be used to change the default profile path.\n` +
+                `                         It is overridden by --profile-dir, but can be combined with --profile.`,
+        );
+        console.log("  --devtools:           Install and use react-devtools and react-perf.");
+        console.log(
+            `  --config:             Path to the config.json file. May also be specified via the ELEMENT_DESKTOP_CONFIG_JSON environment variable.\n` +
+                `                         Otherwise use the default user location '${defaultUserDataDir}'`,
+        );
+        console.log("  --no-update:          Disable automatic updating.");
+        console.log("  --hidden:             Start the application hidden in the system tray.");
+        console.log("  --help:               Displays this help message.");
+        console.log("And more such as --proxy, see: https://electronjs.org/docs/api/command-line-switches");
+        app.exit();
+    }
+
+    let storageMode: Mode | undefined;
+    if ([Mode.Encrypted, Mode.ForcePlaintext, Mode.AllowPlaintext].includes(argv["storage-mode"])) {
+        storageMode = argv["storage-mode"];
+    }
+
+    return {
+        userDataPath: getUserDataPath(argv, protocolHandler),
+        localConfigPath: argv["config"] ?? process.env.ELEMENT_DESKTOP_CONFIG_JSON,
+        storageMode,
+        devtools: argv["devtools"] || false,
+        // Minimist parses `--no-`-prefixed arguments as booleans with value `false` rather than verbatim.
+        update: argv["update"] ?? true,
+        hidden: argv["hidden"] || false,
+        positional: argv["_"],
+    };
+}
diff --git a/apps/desktop/src/asar.ts b/apps/desktop/src/asar.ts
index ba9e9800da..0fc371b47b 100644
--- a/apps/desktop/src/asar.ts
+++ b/apps/desktop/src/asar.ts
@@ -6,11 +6,11 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { fileURLToPath } from "node:url";
-import { dirname } from "node:path";
+import path from "node:path";
 
 import { tryPaths } from "./utils.js";
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 let asarPathPromise: Promise<string> | undefined;
 // Get the webapp resource file path, memoizes result
diff --git a/apps/desktop/src/auto-launch.ts b/apps/desktop/src/auto-launch.ts
index 52c51bacc6..54271127c1 100644
--- a/apps/desktop/src/auto-launch.ts
+++ b/apps/desktop/src/auto-launch.ts
@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 import BaseAutoLaunch from "auto-launch";
 
 import Store from "./store.js";
+import { getConfig } from "./config.js";
 
 export type AutoLaunchState = "enabled" | "minimised" | "disabled";
 
@@ -19,7 +20,7 @@ export class AutoLaunch extends BaseAutoLaunch {
         if (!AutoLaunch.internalInstance) {
             if (!Store.instance) throw new Error("Store not initialized");
             AutoLaunch.internalInstance = new AutoLaunch({
-                name: global.vectorConfig.brand || "Element",
+                name: getConfig().brand,
                 isHidden: Store.instance.get("openAtLoginMinimised"),
                 mac: {
                     useLaunchAgent: true,
diff --git a/apps/desktop/src/build-config.test.ts b/apps/desktop/src/build-config.test.ts
new file mode 100644
index 0000000000..24db7f0d3f
--- /dev/null
+++ b/apps/desktop/src/build-config.test.ts
@@ -0,0 +1,42 @@
+/*
+Copyright 2026 Element Creations 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 { expect, describe, it, beforeEach, vi } from "vitest";
+import { fs as memfs, vol } from "memfs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { getBuildConfig } from "./build-config.js";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+vi.mock("node:fs", () => ({ default: memfs }));
+
+beforeEach(() => {
+    // Reset the state of the in-memory fs
+    vol.reset();
+});
+
+describe("getBuildConfig", () => {
+    it("should read fields from package.json correctly", () => {
+        vol.fromJSON(
+            {
+                "../package.json": JSON.stringify({
+                    electron_appId: "app.id",
+                    electron_protocol: "proto",
+                    electron_windows_cert_sn: "subject.name",
+                }),
+            },
+            __dirname,
+        );
+
+        const config = getBuildConfig();
+        expect(config.appId).toBe("app.id");
+        expect(config.protocol).toBe("proto");
+        expect(config.windowsCertSubjectName).toBe("subject.name");
+    });
+});
diff --git a/apps/desktop/src/build-config.ts b/apps/desktop/src/build-config.ts
index b4d52865a3..ff04a79e24 100644
--- a/apps/desktop/src/build-config.ts
+++ b/apps/desktop/src/build-config.ts
@@ -5,12 +5,13 @@ 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 path, { dirname } from "node:path";
+import path from "node:path";
 import { fileURLToPath } from "node:url";
+import { type JsonObject } from "shared-types";
 
-import { type JsonObject, loadJsonFile } from "./utils.js";
+import { loadJsonFile } from "./utils.js";
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 let buildConfig: BuildConfig;
 
diff --git a/apps/desktop/src/config.test.ts b/apps/desktop/src/config.test.ts
new file mode 100644
index 0000000000..275b1f3e28
--- /dev/null
+++ b/apps/desktop/src/config.test.ts
@@ -0,0 +1,183 @@
+/*
+Copyright 2026 Element Creations 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 { expect, describe, it, beforeEach, vi } from "vitest";
+import { fs as memfs, vol } from "memfs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { dialog } from "electron";
+
+import { type ConfigOptions } from "./config.js";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+vi.mock("node:fs", () => ({ default: memfs }));
+vi.mock("node:fs/promises", () => ({ default: memfs.promises }));
+
+vi.mock("electron", () => ({
+    app: {
+        getPath: vi.fn().mockReturnValue("/Users/name/Library/Application Support/Element"),
+        whenReady: (): Promise<void> => Promise.resolve(),
+    },
+    dialog: {
+        showMessageBox: vi.fn(),
+    },
+}));
+
+beforeEach(() => {
+    // Reset the state of the in-memory fs
+    vol.reset();
+});
+
+describe("loadConfig", () => {
+    let loadConfig: (localConfigPath: string | undefined) => Promise<ConfigOptions>;
+
+    beforeEach(async () => {
+        vol.fromJSON(
+            {
+                "../webapp.asar/config.json": JSON.stringify({
+                    web_base_url: "https://chat.org.com",
+                    default_hs_url: "https://matrix.org.com",
+                }),
+            },
+            __dirname,
+        );
+
+        vi.resetModules();
+        ({ loadConfig } = await import("./config.js"));
+    });
+
+    it("should ignore localConfigPath if does not exist", async () => {
+        const config = await loadConfig("/invalid-path/custom-config.json");
+        expect(config.brand).toBe("Element");
+        expect(config.web_base_url).toBe("https://chat.org.com");
+        expect(config.default_hs_url).toBe("https://matrix.org.com");
+    });
+
+    it("should read localConfigPath if exists", async () => {
+        vol.fromJSON({
+            "/home/custom-config.json": JSON.stringify({
+                brand: "foobar",
+            }),
+        });
+
+        const config = await loadConfig("/home/custom-config.json");
+        expect(config.brand).toBe("foobar");
+    });
+
+    it("should load default local config if exists", async () => {
+        vol.fromJSON({
+            "/Users/name/Library/Application Support/Element/config.json": JSON.stringify({
+                brand: "foobar",
+            }),
+        });
+
+        const config = await loadConfig(undefined);
+        expect(config.brand).toBe("foobar");
+    });
+
+    it("should apply defaults to any missing fields", async () => {
+        vol.fromJSON({
+            "/home/custom-config.json": JSON.stringify({
+                brand: "foobar",
+            }),
+        });
+
+        const config = await loadConfig("/home/custom-config.json");
+        expect(config.help_url).toBe("https://element.io/help");
+        expect(config.web_base_url).toBe("https://chat.org.com");
+    });
+
+    it("should support all config files missing", async () => {
+        vol.reset();
+        vol.fromJSON(
+            {
+                "../webapp.asar/version": "v1.2.3",
+            },
+            __dirname,
+        );
+
+        const config = await loadConfig(undefined);
+        expect(config.help_url).toBe("https://element.io/help");
+        expect(config.web_base_url).toBe("https://app.element.io/");
+    });
+
+    it("should handle key conflicts around default homeserver config", async () => {
+        vol.fromJSON({
+            "/home/custom-config.json": JSON.stringify({
+                default_server_name: "other-org.com",
+            }),
+        });
+
+        const config = await loadConfig("/home/custom-config.json");
+        expect(config.default_server_name).toBe("other-org.com");
+        expect(config.default_hs_url).toBeUndefined();
+        expect(config.default_server_config).toBeUndefined();
+    });
+
+    it("should map module paths correctly", async () => {
+        vol.fromJSON(
+            {
+                "../webapp.asar/config.json": JSON.stringify({
+                    web_base_url: "https://chat.org.com",
+                    default_hs_url: "https://matrix.org.com",
+                    modules: ["/modules/banner", "module2"],
+                }),
+            },
+            __dirname,
+        );
+
+        const config = await loadConfig("/home/custom-config.json");
+        expect(config.help_url).toBe("https://element.io/help");
+        expect(config.web_base_url).toBe("https://chat.org.com");
+        expect(config.modules).toStrictEqual(["/webapp/modules/banner", "module2"]);
+    });
+
+    it("should show a dialog when encountering a SyntaxError", async () => {
+        vol.fromJSON({
+            "/home/custom-config.json": "NOT_JSON",
+        });
+
+        await loadConfig("/home/custom-config.json");
+        expect(dialog.showMessageBox).toHaveBeenCalledWith({
+            detail: "Unexpected token 'N', \"NOT_JSON\" is not valid JSON",
+            message:
+                "Your custom Element configuration contains invalid JSON. Please correct the problem and reopen Element.",
+            title: "Your Element is misconfigured",
+            type: "error",
+        });
+    });
+});
+
+describe("getConfig", () => {
+    let loadConfig: (localConfigPath: string | undefined) => Promise<ConfigOptions>;
+    let getConfig: () => ConfigOptions;
+
+    beforeEach(async () => {
+        vol.fromJSON(
+            {
+                "../webapp.asar/config.json": JSON.stringify({
+                    web_base_url: "https://chat.org.com",
+                }),
+            },
+            __dirname,
+        );
+
+        vi.resetModules();
+        ({ loadConfig, getConfig } = await import("./config.js"));
+    });
+
+    it("should return undefined if loadConfig has not been called", () => {
+        expect(getConfig()).toBeUndefined();
+    });
+
+    it("should return the config once it is loaded", async () => {
+        const config = await loadConfig(undefined);
+        expect(config.web_base_url).toBe("https://chat.org.com");
+        expect(config).toStrictEqual(getConfig());
+    });
+});
diff --git a/apps/desktop/src/config.ts b/apps/desktop/src/config.ts
index f2415738d9..09d3446300 100644
--- a/apps/desktop/src/config.ts
+++ b/apps/desktop/src/config.ts
@@ -5,6 +5,116 @@ 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.
 */
 
-export function getBrand(): string {
-    return global.vectorConfig.brand || "Element";
+import { app, dialog } from "electron";
+import path from "node:path";
+import { type ResolveDefaults, type DesktopConfigJson, type JsonDocument } from "shared-types";
+
+import { getAsarPath } from "./asar.js";
+import { loadJsonFile } from "./utils.js";
+
+export type ConfigOptions = ResolveDefaults<DesktopConfigJson, typeof DEFAULTS>;
+
+const ConfigFilename = "config.json";
+
+let config: ConfigOptions;
+
+const homeserverProps = ["default_is_url", "default_hs_url", "default_server_name", "default_server_config"] as const;
+
+function loadLocalConfigFile(location: string | undefined): JsonDocument {
+    if (location) {
+        console.log("Loading local config: " + location);
+        return loadJsonFile(location);
+    } else {
+        const configDir = app.getPath("userData");
+        console.log(`Loading local config: ${path.join(configDir, ConfigFilename)}`);
+        return loadJsonFile(configDir, ConfigFilename);
+    }
+}
+
+const DEFAULTS = {
+    brand: "Element",
+    help_url: "https://element.io/help",
+    web_base_url: "https://app.element.io/",
+} satisfies DesktopConfigJson;
+
+function applyDefaults(conf: DesktopConfigJson): asserts conf is ConfigOptions {
+    for (const k in DEFAULTS) {
+        const key = k as keyof typeof DEFAULTS;
+        conf[key] ||= DEFAULTS[key];
+    }
+}
+
+let loadConfigPromise: Promise<ConfigOptions> | undefined;
+// Loads the config from asar, and applies a config.json from userData atop if one exists
+// Writes config to `global.vectorConfig`. Idempotent, returns the same promise on subsequent calls.
+export function loadConfig(localConfigPath: string | undefined): Promise<ConfigOptions> {
+    if (loadConfigPromise) return loadConfigPromise;
+
+    async function actuallyLoadConfig(): Promise<ConfigOptions> {
+        const asarPath = await getAsarPath();
+
+        try {
+            console.log(`Loading app config: ${path.join(asarPath, ConfigFilename)}`);
+            // XXX: we trust that we built the package with a sane config, but should use something like zod here in future
+            const loadedConfig = loadJsonFile(asarPath, ConfigFilename) as unknown as DesktopConfigJson;
+            applyDefaults(loadedConfig);
+            config = loadedConfig;
+        } catch {
+            // it would be nice to check the error code here and bail if the config
+            // is unparsable, but we get MODULE_NOT_FOUND in the case of a missing
+            // file or invalid json, so node is just very unhelpful.
+            // Continue with the defaults (ie. an empty config)
+            config = { ...DEFAULTS };
+        }
+
+        try {
+            // Load local config and use it to override values from the one baked with the build
+            const localConfig = loadLocalConfigFile(localConfigPath);
+
+            // If the local config has a homeserver defined, don't use the homeserver from the build
+            // config. This is to avoid a problem where Riot thinks there are multiple homeservers
+            // defined, and panics as a result.
+            if (Object.keys(localConfig).some((k) => homeserverProps.includes(<any>k))) {
+                for (const key of homeserverProps) {
+                    delete config[key];
+                }
+            }
+
+            config = Object.assign(config, localConfig);
+        } catch (e) {
+            if (e instanceof SyntaxError) {
+                await app.whenReady();
+                void dialog.showMessageBox({
+                    type: "error",
+                    title: `Your ${config.brand} is misconfigured`,
+                    message:
+                        `Your custom ${config.brand} configuration contains invalid JSON. ` +
+                        `Please correct the problem and reopen ${config.brand}.`,
+                    detail: e.message || "",
+                });
+            }
+
+            // Could not load local config, this is expected in most cases.
+        }
+
+        // Tweak modules paths as they assume the root is at the same level as webapp, but for `vector://vector/webapp` it is not.
+        if (Array.isArray(config.modules)) {
+            config.modules = config.modules.map((m) => {
+                if (m.startsWith("/")) {
+                    return "/webapp" + m;
+                }
+                return m;
+            });
+        }
+
+        // Apply defaults again in case the local config had an explicit null/undefined value for required keys.
+        applyDefaults(config);
+        return config;
+    }
+    loadConfigPromise = actuallyLoadConfig();
+    return loadConfigPromise;
+}
+
+export function getConfig(): ConfigOptions {
+    return config;
 }
diff --git a/apps/desktop/src/electron-main.ts b/apps/desktop/src/electron-main.ts
index 372c6fad24..7bb269baca 100644
--- a/apps/desktop/src/electron-main.ts
+++ b/apps/desktop/src/electron-main.ts
@@ -22,13 +22,10 @@ import {
     protocol,
     desktopCapturer,
 } from "electron";
-// eslint-disable-next-line n/file-extension-in-import
 import * as Sentry from "@sentry/electron/main";
-import path, { dirname } from "node:path";
+import path from "node:path";
 import windowStateKeeper from "electron-window-state";
-import fs from "node:fs";
 import { URL, fileURLToPath } from "node:url";
-import minimist from "minimist";
 
 import "./ipc.js";
 import "./seshat.js";
@@ -43,171 +40,31 @@ import ProtocolHandler from "./protocol.js";
 import { _t, AppLocalization } from "./language-helper.js";
 import { setDisplayMediaCallback } from "./displayMediaCallback.js";
 import { setupMacosTitleBar } from "./macos-titlebar.js";
-import { type Json, loadJsonFile } from "./utils.js";
 import { setupMediaAuth } from "./media-auth.js";
+import { type RendererRecovery, setupRendererRecovery } from "./renderer-recovery.js";
 import { getBuildConfig } from "./build-config.js";
 import { getAsarPath } from "./asar.js";
 import { getIconPath } from "./icon.js";
+import { getArgs } from "./args.js";
+import { type ConfigOptions, loadConfig } from "./config.js";
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
-const argv = minimist(process.argv, {
-    alias: { help: "h" },
-});
-
-if (argv["help"]) {
-    console.log("Options:");
-    console.log("  --profile-dir {path}: Path to where to store the profile.");
-    console.log(
-        `  --profile {name}:     Name of alternate profile to use, allows for running multiple accounts.\n` +
-            `                         Ignored if --profile-dir is specified.\n` +
-            `                         The ELEMENT_PROFILE_DIR environment variable may be used to change the default profile path.\n` +
-            `                         It is overridden by --profile-dir, but can be combined with --profile.`,
-    );
-    console.log("  --devtools:           Install and use react-devtools and react-perf.");
-    console.log(
-        `  --config:             Path to the config.json file. May also be specified via the ELEMENT_DESKTOP_CONFIG_JSON environment variable.\n` +
-            `                         Otherwise use the default user location '${app.getPath("userData")}'`,
-    );
-    console.log("  --no-update:          Disable automatic updating.");
-    console.log("  --hidden:             Start the application hidden in the system tray.");
-    console.log("  --help:               Displays this help message.");
-    console.log("And more such as --proxy, see: https://electronjs.org/docs/api/command-line-switches");
-    app.exit();
-}
-
-const LocalConfigLocation = process.env.ELEMENT_DESKTOP_CONFIG_JSON ?? argv["config"];
-const LocalConfigFilename = "config.json";
-
-// Electron creates the user data directory (with just an empty 'Dictionaries' directory...)
-// as soon as the app path is set, so pick a random path in it that must exist if it's a
-// real user data directory.
-function isRealUserDataDir(d: string): boolean {
-    return fs.existsSync(path.join(d, "IndexedDB"));
-}
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const buildConfig = getBuildConfig();
 const protocolHandler = new ProtocolHandler(buildConfig.protocol);
+const args = getArgs(protocolHandler);
 
-// check if we are passed a profile in the SSO callback url
-let userDataPath: string;
+app.setPath("userData", args.userDataPath);
 
-const userDataPathInProtocol = protocolHandler.getProfileFromDeeplink(argv["_"]);
-if (userDataPathInProtocol) {
-    userDataPath = userDataPathInProtocol;
-} else if (argv["profile-dir"]) {
-    userDataPath = argv["profile-dir"];
-} else {
-    let newUserDataPath = process.env.ELEMENT_PROFILE_DIR ?? app.getPath("userData");
-    if (argv["profile"]) {
-        newUserDataPath += "-" + argv["profile"];
-    }
-    const newUserDataPathExists = isRealUserDataDir(newUserDataPath);
-    let oldUserDataPath = path.join(app.getPath("appData"), app.getName().replace("Element", "Riot"));
-    if (argv["profile"]) {
-        oldUserDataPath += "-" + argv["profile"];
-    }
-
-    const oldUserDataPathExists = isRealUserDataDir(oldUserDataPath);
-    console.log(newUserDataPath + " exists: " + (newUserDataPathExists ? "yes" : "no"));
-    console.log(oldUserDataPath + " exists: " + (oldUserDataPathExists ? "yes" : "no"));
-    if (!newUserDataPathExists && oldUserDataPathExists) {
-        console.log("Using legacy user data path: " + oldUserDataPath);
-        userDataPath = oldUserDataPath;
-    } else {
-        userDataPath = newUserDataPath;
-    }
-}
-app.setPath("userData", userDataPath);
-
-const homeserverProps = ["default_is_url", "default_hs_url", "default_server_name", "default_server_config"] as const;
-
-function loadLocalConfigFile(): Json {
-    if (LocalConfigLocation) {
-        console.log("Loading local config: " + LocalConfigLocation);
-        return loadJsonFile(LocalConfigLocation);
-    } else {
-        const configDir = app.getPath("userData");
-        console.log(`Loading local config: ${path.join(configDir, LocalConfigFilename)}`);
-        return loadJsonFile(configDir, LocalConfigFilename);
-    }
-}
-
-let loadConfigPromise: Promise<void> | undefined;
-// Loads the config from asar, and applies a config.json from userData atop if one exists
-// Writes config to `global.vectorConfig`. Idempotent, returns the same promise on subsequent calls.
-function loadConfig(): Promise<void> {
-    if (loadConfigPromise) return loadConfigPromise;
-
-    async function actuallyLoadConfig(): Promise<void> {
-        const asarPath = await getAsarPath();
-
-        try {
-            console.log(`Loading app config: ${path.join(asarPath, LocalConfigFilename)}`);
-            global.vectorConfig = loadJsonFile(asarPath, LocalConfigFilename);
-        } catch {
-            // it would be nice to check the error code here and bail if the config
-            // is unparsable, but we get MODULE_NOT_FOUND in the case of a missing
-            // file or invalid json, so node is just very unhelpful.
-            // Continue with the defaults (ie. an empty config)
-            global.vectorConfig = {};
-        }
-
-        try {
-            // Load local config and use it to override values from the one baked with the build
-            const localConfig = loadLocalConfigFile();
-
-            // If the local config has a homeserver defined, don't use the homeserver from the build
-            // config. This is to avoid a problem where Riot thinks there are multiple homeservers
-            // defined, and panics as a result.
-            if (Object.keys(localConfig).find((k) => homeserverProps.includes(<any>k))) {
-                // Rip out all the homeserver options from the vector config
-                global.vectorConfig = Object.keys(global.vectorConfig)
-                    .filter((k) => !homeserverProps.includes(<any>k))
-                    .reduce(
-                        (obj, key) => {
-                            obj[key] = global.vectorConfig[key];
-                            return obj;
-                        },
-                        {} as Omit<Partial<(typeof global)["vectorConfig"]>, keyof typeof homeserverProps>,
-                    );
-            }
-
-            global.vectorConfig = Object.assign(global.vectorConfig, localConfig);
-        } catch (e) {
-            if (e instanceof SyntaxError) {
-                await app.whenReady();
-                void dialog.showMessageBox({
-                    type: "error",
-                    title: `Your ${global.vectorConfig.brand || "Element"} is misconfigured`,
-                    message:
-                        `Your custom ${global.vectorConfig.brand || "Element"} configuration contains invalid JSON. ` +
-                        `Please correct the problem and reopen ${global.vectorConfig.brand || "Element"}.`,
-                    detail: e.message || "",
-                });
-            }
-
-            // Could not load local config, this is expected in most cases.
-        }
-
-        // Tweak modules paths as they assume the root is at the same level as webapp, but for `vector://vector/webapp` it is not.
-        if (Array.isArray(global.vectorConfig.modules)) {
-            global.vectorConfig.modules = global.vectorConfig.modules.map((m) => {
-                if (m.startsWith("/")) {
-                    return "/webapp" + m;
-                }
-                return m;
-            });
-        }
-    }
-    loadConfigPromise = actuallyLoadConfig();
-    return loadConfigPromise;
-}
+// Renderer crash auto-recovery for the main window (element-web#32222). Held at module scope so the
+// dock `activate` / `second-instance` relaunch handlers can route a crashed renderer through the same
+// capped recovery rather than reloading inline (which would re-arm an already-given-up crash loop).
+let rendererRecovery: RendererRecovery | undefined;
 
 // Configure Electron Sentry and crashReporter using sentry.dsn in config.json if one is present.
 async function configureSentry(): Promise<void> {
-    await loadConfig();
-    const { dsn, environment } = global.vectorConfig.sentry || {};
+    const config = await loadConfig(args.localConfigPath);
+    const { dsn, environment } = config.sentry || {};
     if (dsn) {
         console.log(`Enabling Sentry with dsn=${dsn} environment=${environment}`);
         Sentry.init({
@@ -251,9 +108,6 @@ if (!gotLock) {
     app.exit();
 }
 
-// do this after we know we are the primary instance of the app
-protocolHandler.initialise(userDataPath);
-
 // Register the scheme the app is served from as 'standard'
 // which allows things like relative URLs and IndexedDB to
 // work.
@@ -284,7 +138,7 @@ app.enableSandbox();
 // We disable media controls here. We do this because calls use audio and video elements and they sometimes capture the media keys. See https://github.com/vector-im/element-web/issues/15704
 app.commandLine.appendSwitch("disable-features", "HardwareMediaKeyHandling,MediaSessionService");
 
-const store = Store.initialize(argv["storage-mode"]); // must be called before any async actions
+const store = Store.initialize(args.storageMode); // must be called before any async actions
 
 // Disable hardware acceleration if the setting has been set.
 if (store.get("disableHardwareAcceleration")) {
@@ -296,10 +150,11 @@ app.on("ready", async () => {
     console.debug("Reached Electron ready state");
 
     let asarPath: string;
+    let config: ConfigOptions;
 
     try {
         asarPath = await getAsarPath();
-        await loadConfig();
+        config = await loadConfig(args.localConfigPath);
     } catch (e) {
         console.log("App setup failed: exiting", e);
         process.exit(1);
@@ -310,7 +165,7 @@ app.on("ready", async () => {
         return;
     }
 
-    if (argv["devtools"]) {
+    if (args.devtools) {
         try {
             const { installExtension, REACT_DEVELOPER_TOOLS } = await import("electron-devtools-installer");
             installExtension(REACT_DEVELOPER_TOOLS)
@@ -373,11 +228,10 @@ app.on("ready", async () => {
         });
     });
 
-    // Minimist parses `--no-`-prefixed arguments as booleans with value `false` rather than verbatim.
-    if (argv["update"] === false) {
+    if (!args.update) {
         console.log("Auto update disabled via command line flag");
-    } else if (global.vectorConfig["update_base_url"]) {
-        void updater.start(global.vectorConfig["update_base_url"]);
+    } else if (config.update_base_url) {
+        void updater.start(config.update_base_url);
     } else {
         console.log("No update_base_url is defined: auto update is disabled");
     }
@@ -401,7 +255,7 @@ app.on("ready", async () => {
         backgroundColor: "#fff",
 
         titleBarStyle: process.platform === "darwin" ? "hidden" : "default",
-        trafficLightPosition: { x: 9, y: 8 },
+        trafficLightPosition: { x: 12, y: 8 },
 
         icon: await getIconPath(),
         show: false,
@@ -430,7 +284,11 @@ app.on("ready", async () => {
         app.exit(1);
     }
 
-    void global.mainWindow.loadURL("vector://vector/webapp/");
+    // do this after we know we are the primary instance of the app
+    const hasDeeplink = protocolHandler.initialise(args);
+    if (!hasDeeplink) {
+        void global.mainWindow.loadURL("vector://vector/webapp/");
+    }
 
     if (process.platform === "darwin") {
         setupMacosTitleBar(global.mainWindow);
@@ -447,7 +305,7 @@ app.on("ready", async () => {
         if (!global.mainWindow) return;
         mainWindowState.manage(global.mainWindow);
 
-        if (!argv["hidden"]) {
+        if (!args.hidden) {
             global.mainWindow.show();
         } else {
             // hide here explicitly because window manage above sometimes shows it
@@ -474,7 +332,7 @@ app.on("ready", async () => {
                     buttons: [
                         _t("action|cancel"),
                         _t("action|close_brand", {
-                            brand: global.vectorConfig.brand || "Element",
+                            brand: config.brand,
                         }),
                     ],
                     message: _t("confirm_quit"),
@@ -524,6 +382,11 @@ app.on("ready", async () => {
 
     webContentsHandler(global.mainWindow.webContents);
 
+    // Auto-recover from an upstream renderer/GPU-process crash (white screen, element-web#32222). This
+    // is a MITIGATION of an upstream Electron/Chromium defect, not a root-cause fix — without it a dead
+    // renderer stays a permanent blank window the user can only escape by killing the whole app.
+    rendererRecovery = setupRendererRecovery(global.mainWindow);
+
     session.defaultSession.setDisplayMediaRequestHandler(
         (_, callback) => {
             if (process.env.XDG_SESSION_TYPE === "wayland") {
@@ -532,11 +395,13 @@ app.on("ready", async () => {
                 desktopCapturer
                     .getSources({ types: ["screen", "window"] })
                     .then((sources) => {
+                        // oxlint-disable-next-line promise/no-callback-in-promise
                         callback({ video: sources[0] });
                     })
                     .catch((err) => {
                         // If the user cancels the dialog an error occurs "Failed to get sources"
                         console.error("Wayland: failed to get user-selected source:", err);
+                        // oxlint-disable-next-line promise/no-callback-in-promise
                         callback({ video: { id: "", name: "" } }); // The promise does not return if no dummy is passed here as source
                     });
             } else {
@@ -555,6 +420,11 @@ app.on("window-all-closed", () => {
 });
 
 app.on("activate", () => {
+    // If the renderer crashed while the window was hidden (element-web#32222), reload it before showing
+    // so the user sees the UI rather than the white screen. Routed through the capped recovery (rather
+    // than an inline reload) so a relaunch can't re-arm a crash loop we've already given up on; it is a
+    // no-op when the renderer is healthy.
+    rendererRecovery?.recoverIfCrashed();
     global.mainWindow?.show();
 });
 
@@ -572,6 +442,10 @@ app.on("second-instance", (ev, commandLine, workingDirectory) => {
 
     // Someone tried to run a second instance, we should focus our window.
     if (global.mainWindow) {
+        // If the renderer crashed (element-web#32222), reload before surfacing the window so the user is
+        // brought to a working UI rather than a white screen. Routed through the capped recovery so a
+        // relaunch can't re-arm a crash loop we've already given up on; a no-op for a healthy window.
+        rendererRecovery?.recoverIfCrashed();
         if (!global.mainWindow.isVisible()) global.mainWindow.show();
         if (global.mainWindow.isMinimized()) global.mainWindow.restore();
         global.mainWindow.focus();
diff --git a/apps/desktop/src/i18n/strings/en_EN.json b/apps/desktop/src/i18n/strings/en_EN.json
index 88c584a00c..c4574fd130 100644
--- a/apps/desktop/src/i18n/strings/en_EN.json
+++ b/apps/desktop/src/i18n/strings/en_EN.json
@@ -27,6 +27,10 @@
         "yes": "Yes"
     },
     "confirm_quit": "Are you sure you want to quit?",
+    "download": {
+        "unable_to_open_description": "The file could not be opened. It may have been moved or deleted.",
+        "unable_to_open_title": "Unable to open file"
+    },
     "edit_menu": {
         "speech": "Speech",
         "speech_start_speaking": "Start Speaking",
@@ -53,6 +57,11 @@
         "services": "Services",
         "unhide": "Unhide"
     },
+    "renderer_crash": {
+        "detail": "Quit and reopen the app to continue. If this keeps happening, restarting your computer or clearing the app's cache may help.",
+        "message": "%(brand)s recovered from a problem several times but it keeps happening, so it has stopped trying.",
+        "title": "%(brand)s keeps crashing"
+    },
     "right_click_menu": {
         "add_to_dictionary": "Add to dictionary",
         "copy_email": "Copy email address",
@@ -63,6 +72,10 @@
         "save_image_as_error_description": "The image failed to save",
         "save_image_as_error_title": "Failed to save image"
     },
+    "save_dialog": {
+        "all_files": "All Files",
+        "named_file_type": "%(extension)s File"
+    },
     "store": {
         "error": {
             "backend_changed": "Clear data and reload?",
diff --git a/apps/desktop/src/i18n/strings/et.json b/apps/desktop/src/i18n/strings/et.json
index 97433700f3..e568799d7b 100644
--- a/apps/desktop/src/i18n/strings/et.json
+++ b/apps/desktop/src/i18n/strings/et.json
@@ -27,6 +27,10 @@
         "yes": "Jah"
     },
     "confirm_quit": "Kas sa kindlasti soovid rakendusest väljuda?",
+    "download": {
+        "unable_to_open_description": "Faili avamine ei õnnestunud. See võib olla tõstetud mujale või kustutatud.",
+        "unable_to_open_title": "Faili avamine ei õnnestu"
+    },
     "edit_menu": {
         "speech": "Kõne",
         "speech_start_speaking": "Alusta rääkimist",
@@ -53,6 +57,11 @@
         "services": "Teenused",
         "unhide": "Näita uuesti"
     },
+    "renderer_crash": {
+        "detail": "Jätkamiseks sulge rakendus ja ava see uuesti. Kui probleem kordub, võib aidata arvuti uuesti käivitamine või rakenduse vahemälu tühjendamine.",
+        "message": "%(brand)s on mitu korda probleemist taastunud, kuid viga kordub ikka ja jälle ning rakendus on edasise proovimise lõpetanud.",
+        "title": "%(brand)s jookseb ühtevalu kokku"
+    },
     "right_click_menu": {
         "add_to_dictionary": "Lisa sõnastikku",
         "copy_email": "Kopeeri e-posti aadress",
diff --git a/apps/desktop/src/i18n/strings/fr.json b/apps/desktop/src/i18n/strings/fr.json
index 9c3babb1f5..47e9ccf949 100644
--- a/apps/desktop/src/i18n/strings/fr.json
+++ b/apps/desktop/src/i18n/strings/fr.json
@@ -27,6 +27,10 @@
         "yes": "Oui"
     },
     "confirm_quit": "Êtes-vous sûr de vouloir quitter ?",
+    "download": {
+        "unable_to_open_description": "Impossible d'ouvrir le fichier. Il a peut-être été déplacé ou supprimé.",
+        "unable_to_open_title": "Impossible d'ouvrir le fichier"
+    },
     "edit_menu": {
         "speech": "Dictée",
         "speech_start_speaking": "Commencer la dictée",
@@ -53,6 +57,11 @@
         "services": "Services",
         "unhide": "Dé-masquer"
     },
+    "renderer_crash": {
+        "detail": "Redémarrer l'application pour continuer. Si le problème persiste, redémarrer votre ordinateur ou vider le cache de l'application peut résoudre le problème.",
+        "message": "%(brand)s s'est remis d'un problème à plusieurs reprises, mais celui-ci continue de se produire, il a donc cessé d'essayer.",
+        "title": "%(brand)s s'arrête brutalement de façon répétée"
+    },
     "right_click_menu": {
         "add_to_dictionary": "Ajouter au dictionnaire",
         "copy_email": "Copier l’adresse e-mail",
diff --git a/apps/desktop/src/i18n/strings/hr.json b/apps/desktop/src/i18n/strings/hr.json
index 3d09d16596..39aaa29221 100644
--- a/apps/desktop/src/i18n/strings/hr.json
+++ b/apps/desktop/src/i18n/strings/hr.json
@@ -54,6 +54,11 @@
         "services": "Usluge",
         "unhide": "Otkrij"
     },
+    "renderer_crash": {
+        "detail": "Zatvorite i ponovno otvorite aplikaciju kako biste nastavili. Ako se to nastavi događati, moglo bi pomoći ponovno pokretanje računala ili brisanje predmemorije aplikacije.",
+        "message": "%(brand)s se nekoliko puta oporavio od problema, ali se problem i dalje javlja, pa je prestao pokušavati.",
+        "title": "%(brand)s se stalno ruši"
+    },
     "right_click_menu": {
         "add_to_dictionary": "Dodaj u rječnik",
         "copy_email": "Kopiraj e-adresu",
diff --git a/apps/desktop/src/i18n/strings/pl.json b/apps/desktop/src/i18n/strings/pl.json
index fc209c9e71..5b04975cf8 100644
--- a/apps/desktop/src/i18n/strings/pl.json
+++ b/apps/desktop/src/i18n/strings/pl.json
@@ -54,6 +54,11 @@
         "services": "Usługi",
         "unhide": "Odkryj"
     },
+    "renderer_crash": {
+        "detail": "Zamknij i uruchom ponownie aplikację, żeby kontynuować. Jeśli problem nie ustępuje, spróbuj wyczyścić pamięć podręczną i zresetować komputer.",
+        "message": "%(brand)s przestał próbować naprawić problem, który udało się ominąć lecz ciągle się ponawia.",
+        "title": "%(brand)s nie może przestać się zawieszać"
+    },
     "right_click_menu": {
         "add_to_dictionary": "Dodaj do słownika",
         "copy_email": "Kopiuj adres e-mail",
diff --git a/apps/desktop/src/i18n/strings/uk.json b/apps/desktop/src/i18n/strings/uk.json
index 2b29b8c03b..306148204a 100644
--- a/apps/desktop/src/i18n/strings/uk.json
+++ b/apps/desktop/src/i18n/strings/uk.json
@@ -27,6 +27,10 @@
         "yes": "Так"
     },
     "confirm_quit": "Ви впевнені, що хочете вийти?",
+    "download": {
+        "unable_to_open_description": "Не вдалося відкрити файл. Можливо, його було переміщено або видалено.",
+        "unable_to_open_title": "Неможливо відкрити файл"
+    },
     "edit_menu": {
         "speech": "Мовлення",
         "speech_start_speaking": "Почати говорити",
@@ -54,6 +58,11 @@
         "services": "Служби",
         "unhide": "Показати"
     },
+    "renderer_crash": {
+        "detail": "Закрийте та знову запустіть застосунок, щоб продовжити роботу. Якщо ця проблема повторюється, може допомогти перезапуск комп’ютера або очищення кешу застосунку.",
+        "message": "%(brand)s кілька разів відновлювався після проблеми, але вона постійно виникає, тому спроби припинилися.",
+        "title": "Збої %(brand)s продовжуються"
+    },
     "right_click_menu": {
         "add_to_dictionary": "Додати до словника",
         "copy_email": "Копіювати адресу е-пошти",
diff --git a/apps/desktop/src/i18n/strings/zh_Hans.json b/apps/desktop/src/i18n/strings/zh_Hans.json
index d9b6be5832..14974c3fec 100644
--- a/apps/desktop/src/i18n/strings/zh_Hans.json
+++ b/apps/desktop/src/i18n/strings/zh_Hans.json
@@ -27,6 +27,10 @@
         "yes": "是"
     },
     "confirm_quit": "你确定要退出吗？",
+    "download": {
+        "unable_to_open_description": "无法打开文件，它可能已被移动或删除。",
+        "unable_to_open_title": "无法打开文件"
+    },
     "edit_menu": {
         "speech": "讲话",
         "speech_start_speaking": "开始讲话",
@@ -52,6 +56,11 @@
         "services": "服务",
         "unhide": "显示"
     },
+    "renderer_crash": {
+        "detail": "退出并重新打开 app 以继续。如果问题仍然存在，重启电脑或清除缓存或许有用。",
+        "message": "%(brand)s 已经多次从故障中恢复，但仍然反复发生，因此已停止尝试。",
+        "title": "%(brand)s 仍在持续崩溃"
+    },
     "right_click_menu": {
         "add_to_dictionary": "添加到字典",
         "copy_email": "复制邮箱地址",
@@ -62,6 +71,10 @@
         "save_image_as_error_description": "图片保存失败",
         "save_image_as_error_title": "图片保存失败"
     },
+    "save_dialog": {
+        "all_files": "所有文件",
+        "named_file_type": "%(extension)s 文件"
+    },
     "store": {
         "error": {
             "backend_changed": "清除数据并重新加载？",
diff --git a/apps/desktop/src/icon.test.ts b/apps/desktop/src/icon.test.ts
new file mode 100644
index 0000000000..a8886be9b5
--- /dev/null
+++ b/apps/desktop/src/icon.test.ts
@@ -0,0 +1,44 @@
+/*
+Copyright 2026 Element Creations 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 { expect, describe, it, beforeEach, vi } from "vitest";
+import { fs as memfs, vol } from "memfs";
+
+import { getIconPath } from "./icon.js";
+import { fileURLToPath } from "node:url";
+
+vi.mock("node:fs/promises", () => ({ default: memfs.promises }));
+
+beforeEach(() => {
+    // Reset the state of the in-memory fs
+    vol.reset();
+});
+
+describe("getIconPath", () => {
+    beforeEach(() => {
+        vol.fromJSON(
+            {
+                "build/icon.png": "png",
+                "build/icon.ico": "ico",
+            },
+            fileURLToPath(import.meta.resolve("../webapp")),
+        );
+    });
+
+    it("should use .ico on Windows", async () => {
+        vi.spyOn(process, "platform", "get").mockReturnValue("win32");
+        await expect(getIconPath()).resolves.toEqual(fileURLToPath(import.meta.resolve("../build/icon.ico")));
+    });
+    it("should use .png on macOS", async () => {
+        vi.spyOn(process, "platform", "get").mockReturnValue("darwin");
+        await expect(getIconPath()).resolves.toEqual(fileURLToPath(import.meta.resolve("../build/icon.png")));
+    });
+    it("should use .png on Linux", async () => {
+        vi.spyOn(process, "platform", "get").mockReturnValue("linux");
+        await expect(getIconPath()).resolves.toEqual(fileURLToPath(import.meta.resolve("../build/icon.png")));
+    });
+});
diff --git a/apps/desktop/src/ipc.test.ts b/apps/desktop/src/ipc.test.ts
new file mode 100644
index 0000000000..5b69168f75
--- /dev/null
+++ b/apps/desktop/src/ipc.test.ts
@@ -0,0 +1,36 @@
+/*
+Copyright 2026 Element Creations 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 { expect, describe, it, vi } from "vitest";
+import { ipcMain, type IpcMainInvokeEvent } from "electron";
+
+import { getConfig } from "./config.js";
+
+vi.mock("electron", () => ({
+    ipcMain: {
+        on: vi.fn(),
+        once: vi.fn(),
+        handle: vi.fn(),
+    },
+}));
+
+vi.mock("./config.js");
+
+describe("getConfig", () => {
+    it("should call config.getConfig and return the value", async () => {
+        const config = { brand: "BRAND", help_url: "HELP_URL", web_base_url: "WEB_BASE_URL" };
+        vi.mocked(getConfig).mockReturnValue(config);
+
+        await import("./ipc.js");
+
+        const handler = vi.mocked(ipcMain.handle).mock.calls.find(([channel]) => channel === "getConfig")?.[1];
+        expect(handler).toBeDefined();
+
+        expect(handler!(new Event("test") as unknown as IpcMainInvokeEvent)).toStrictEqual(config);
+        expect(getConfig).toHaveBeenCalled();
+    });
+});
diff --git a/apps/desktop/src/ipc.ts b/apps/desktop/src/ipc.ts
index c59f70eb82..229a525662 100644
--- a/apps/desktop/src/ipc.ts
+++ b/apps/desktop/src/ipc.ts
@@ -11,6 +11,7 @@ import IpcMainEvent = Electron.IpcMainEvent;
 import { randomArray } from "./utils.js";
 import { getDisplayMediaCallback, setDisplayMediaCallback } from "./displayMediaCallback.js";
 import Store, { clearDataAndRelaunch } from "./store.js";
+import { getConfig } from "./config.js";
 
 let focusHandlerAttached = false;
 ipcMain.on("loudNotification", function (): void {
@@ -143,7 +144,7 @@ ipcMain.on("ipcCall", async function (_ev: IpcMainEvent, payload) {
             }));
             break;
         case "callDisplayMediaCallback":
-            await getDisplayMediaCallback()?.({ video: args[0] });
+            getDisplayMediaCallback()?.({ video: args[0] });
             setDisplayMediaCallback(null);
             ret = null;
             break;
@@ -217,7 +218,7 @@ ipcMain.on("ipcCall", async function (_ev: IpcMainEvent, payload) {
     });
 });
 
-ipcMain.handle("getConfig", () => global.vectorConfig);
+ipcMain.handle("getConfig", getConfig);
 
 const initialisePromiseWithResolvers = Promise.withResolvers<void>();
 export const initialisePromise = initialisePromiseWithResolvers.promise;
diff --git a/apps/desktop/src/language-helper.ts b/apps/desktop/src/language-helper.ts
index 23a859a902..1194810902 100644
--- a/apps/desktop/src/language-helper.ts
+++ b/apps/desktop/src/language-helper.ts
@@ -7,14 +7,14 @@ Please see LICENSE files in the repository root for full details.
 
 import counterpart from "counterpart";
 import { type TranslationKey as TKey } from "matrix-web-i18n";
-import { dirname } from "node:path";
+import path from "node:path";
 import { fileURLToPath } from "node:url";
 
 import type EN from "./i18n/strings/en_EN.json";
 import { loadJsonFile } from "./utils.js";
 import type Store from "./store.js";
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const FALLBACK_LOCALE = "en";
 
@@ -77,7 +77,6 @@ export class AppLocalization {
 
         if (store.has(AppLocalization.STORE_KEY)) {
             const locales = store.get(AppLocalization.STORE_KEY);
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             this.setAppLocale(locales!);
         }
 
@@ -113,7 +112,7 @@ export class AppLocalization {
             locales = [locales];
         }
 
-        const loadedLocales = locales.filter((locale) => {
+        const chosenLocale = locales.find((locale) => {
             const translations = this.fetchTranslationJson(locale);
             if (translations !== null) {
                 counterpart.registerTranslations(locale, translations);
@@ -121,7 +120,7 @@ export class AppLocalization {
             return !!translations;
         });
 
-        counterpart.setLocale(loadedLocales[0]);
+        counterpart.setLocale(chosenLocale!);
         this.store.set(AppLocalization.STORE_KEY, locales);
 
         this.resetLocalizedUI();
diff --git a/apps/desktop/src/macos-titlebar.test.ts b/apps/desktop/src/macos-titlebar.test.ts
new file mode 100644
index 0000000000..c22ce2299d
--- /dev/null
+++ b/apps/desktop/src/macos-titlebar.test.ts
@@ -0,0 +1,238 @@
+/*
+Copyright 2026 Spencer Poisseroux
+Copyright 2026 hayaksi1
+
+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 { afterEach, describe, expect, it, vi, type Mock } from "vitest";
+import type { BrowserWindow } from "electron";
+
+import { buildTitleBarCss, setupMacosTitleBar, TITLE_BAR_HEIGHT_PX } from "./macos-titlebar.js";
+
+/**
+ * Extract the declaration block for the first rule whose selector list contains the given selector.
+ */
+function ruleBlock(css: string, selector: string): string {
+    const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const blockMatch = new RegExp(`[^{}]*${escaped}[^{}]*\\{([^}]*)\\}`).exec(css);
+    expect(blockMatch, `expected a rule block for "${selector}"`).not.toBeNull();
+    return blockMatch![1];
+}
+
+describe("buildTitleBarCss", () => {
+    const css = buildTitleBarCss();
+
+    it("returns a non-empty CSS string", () => {
+        expect(typeof css).toBe("string");
+        expect(css.length).toBeGreaterThan(0);
+    });
+
+    it("draws the title bar band at the designed height", () => {
+        const bar = ruleBlock(css, "body::before");
+        expect(bar).toMatch(new RegExp(`height:\\s*${TITLE_BAR_HEIGHT_PX}px`));
+        expect(bar).toMatch(/position:\s*fixed/);
+    });
+
+    it("styles the title bar with the canvas background and separator tokens", () => {
+        // Matches the design spec: bg/canvas/default fill with a 1px separator/primary hairline below.
+        const bar = ruleBlock(css, "body::before");
+        expect(bar).toMatch(/background:\s*var\(--cpd-color-bg-canvas-default\b/);
+        expect(bar).toMatch(/border-bottom:\s*1px\s+solid\s+var\(--cpd-color-separator-primary\b/);
+    });
+
+    it("makes the title bar a drag handle", () => {
+        expect(ruleBlock(css, "body::before")).toMatch(/-webkit-app-region:\s*drag/);
+    });
+
+    it("pushes the app content below the title bar band", () => {
+        const body = ruleBlock(css, "body");
+        expect(body).toMatch(new RegExp(`padding-top:\\s*${TITLE_BAR_HEIGHT_PX}px`));
+        expect(body).toMatch(/box-sizing:\s*border-box/);
+    });
+
+    it("keeps the window draggable through an overlapping dialog panel", () => {
+        // Regression guard: a blanket `.mx_Dialog`/`.mx_Dialog_border` no-drag carves the panel
+        // (incl. the Glass border) out of the band, killing the drag where a centred dialog overlaps
+        // it. The panel must stay transparent to the drag calc so body::before shows through.
+        expect(css).not.toMatch(/(^|[^_-])\.mx_Dialog\s*\{[^}]*no-drag/);
+        expect(css).not.toMatch(/\.mx_Dialog_border\b[^{]*\{[^}]*no-drag/);
+    });
+
+    it("does not gate the drag region on a modal being open", () => {
+        // Regression guard: an earlier draft no-dragged the whole bar via the aria-hidden modal
+        // signal, making the window undraggable with e.g. the settings dialog open.
+        expect(css).not.toContain("aria-hidden");
+    });
+
+    it("does not turn whole screens into drag regions (#34661)", () => {
+        // Regression guard: these screens cover the window, and the controls drawn on them keep the
+        // default app-region of `none` — so they never subtract from the region and their clicks
+        // become window drags instead. That left the device verification screen and the splash
+        // screen's sign-out button reachable only by keyboard. The band is the drag handle.
+        expect(css).not.toMatch(/\.mx_AuthPage[^{]*\{[^}]*-webkit-app-region:\s*drag/);
+        expect(css).not.toMatch(/\.mx_MatrixChat_splash[^{]*\{[^}]*-webkit-app-region:\s*drag/);
+    });
+
+    it("keeps floating portal overlays clickable within the band", () => {
+        // Compound menus/tooltips render in body-level portals and can open anywhere, incl. the band.
+        expect(css).toMatch(/\[data-radix-popper-content-wrapper\][^{]*\{[^}]*-webkit-app-region:\s*no-drag/);
+    });
+
+    it("no longer carves per-surface drag strips into the app chrome", () => {
+        // The dedicated bar replaces the old hacks; their reappearance would double up the offset.
+        expect(css).not.toContain(".mx_LeftPanel::before");
+        expect(css).not.toContain(".mx_RoomView::before");
+        expect(css).not.toContain(".mx_SpaceRoomView::before");
+        expect(css).not.toContain(".mx_UserMenu");
+        expect(css).not.toContain(".mx_SpacePanel");
+    });
+
+    it("keeps the lightbox sender info clear of the traffic lights", () => {
+        expect(ruleBlock(css, ".mx_ImageView_info_wrapper")).toMatch(
+            new RegExp(`margin-top:\\s*${TITLE_BAR_HEIGHT_PX}px`),
+        );
+    });
+
+    it("keeps the lightbox header a drag handle with interactive elements excluded", () => {
+        expect(ruleBlock(css, ".mx_ImageView_panel")).toMatch(/-webkit-app-region:\s*drag/);
+        expect(css).toMatch(/\.mx_ImageView_panel\s*>\s*\.mx_ImageView_toolbar\s*>\s*\*\s*\{[^}]*no-drag/);
+    });
+
+    it("keeps context menus excluded from the drag region (no-drag)", () => {
+        expect(ruleBlock(css, ".mx_ContextualMenu")).toMatch(/-webkit-app-region:\s*no-drag/);
+    });
+
+    it("keeps iframes excluded from the drag region (no-drag)", () => {
+        // iframes (e.g. recaptcha, widgets) must remain interactive.
+        expect(css).toMatch(/iframe\s*\{[^}]*-webkit-app-region:\s*no-drag/);
+    });
+});
+
+describe("setupMacosTitleBar", () => {
+    /** Minimal `BrowserWindow` stand-in: the module only ever touches these members. */
+    function mockWindow(): {
+        window: BrowserWindow;
+        windowHandlers: Map<string, () => void>;
+        webContentsHandlers: Map<string, () => void>;
+        insertCSS: Mock;
+        removeInsertedCSS: Mock;
+        isFullScreen: Mock;
+    } {
+        const windowHandlers = new Map<string, () => void>();
+        const webContentsHandlers = new Map<string, () => void>();
+        const insertCSS = vi.fn<(css: string) => Promise<string>>().mockResolvedValue("css-key-1");
+        const removeInsertedCSS = vi.fn<(key: string) => Promise<void>>().mockResolvedValue(undefined);
+        const isFullScreen = vi.fn<() => boolean>().mockReturnValue(false);
+
+        const window = {
+            on: vi.fn((event: string, handler: () => void) => {
+                windowHandlers.set(event, handler);
+            }),
+            isFullScreen,
+            webContents: {
+                on: vi.fn((event: string, handler: () => void) => {
+                    webContentsHandlers.set(event, handler);
+                }),
+                insertCSS,
+                removeInsertedCSS,
+            },
+        } as unknown as BrowserWindow;
+
+        return { window, windowHandlers, webContentsHandlers, insertCSS, removeInsertedCSS, isFullScreen };
+    }
+
+    /**
+     * The listeners are `() => void` and start `applyStyling()` without awaiting it, so awaiting a handler's
+     * own return value would prove nothing. Yield to the macrotask queue instead, which drains the pending
+     * microtasks and lets that fire-and-forget promise settle before we assert on its effects.
+     */
+    function flushStyling(): Promise<void> {
+        return new Promise((resolve) => setTimeout(resolve, 0));
+    }
+
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+
+    it("does nothing on non-darwin platforms", () => {
+        vi.spyOn(process, "platform", "get").mockReturnValue("win32");
+        const { window, insertCSS } = mockWindow();
+
+        setupMacosTitleBar(window);
+
+        expect(window.on).not.toHaveBeenCalled();
+        expect(window.webContents.on).not.toHaveBeenCalled();
+        expect(insertCSS).not.toHaveBeenCalled();
+    });
+
+    it("registers the full-screen and load listeners on darwin", () => {
+        vi.spyOn(process, "platform", "get").mockReturnValue("darwin");
+        const { window } = mockWindow();
+
+        setupMacosTitleBar(window);
+
+        expect(window.on).toHaveBeenCalledWith("enter-full-screen", expect.any(Function));
+        expect(window.on).toHaveBeenCalledWith("leave-full-screen", expect.any(Function));
+        expect(window.webContents.on).toHaveBeenCalledWith("did-finish-load", expect.any(Function));
+    });
+
+    it("injects the title bar CSS once the page has loaded", async () => {
+        vi.spyOn(process, "platform", "get").mockReturnValue("darwin");
+        const { window, webContentsHandlers, insertCSS } = mockWindow();
+
+        setupMacosTitleBar(window);
+        webContentsHandlers.get("did-finish-load")!();
+        await flushStyling();
+
+        expect(insertCSS).toHaveBeenCalledOnce();
+        expect(insertCSS).toHaveBeenCalledWith(buildTitleBarCss());
+    });
+
+    it("does not inject the CSS if the window loads while already full screen", async () => {
+        vi.spyOn(process, "platform", "get").mockReturnValue("darwin");
+        const { window, webContentsHandlers, insertCSS, isFullScreen } = mockWindow();
+        isFullScreen.mockReturnValue(true);
+
+        setupMacosTitleBar(window);
+        webContentsHandlers.get("did-finish-load")!();
+        await flushStyling();
+
+        expect(insertCSS).not.toHaveBeenCalled();
+    });
+
+    it("removes the injected CSS when entering full screen", async () => {
+        vi.spyOn(process, "platform", "get").mockReturnValue("darwin");
+        const { window, windowHandlers, webContentsHandlers, removeInsertedCSS } = mockWindow();
+
+        setupMacosTitleBar(window);
+        webContentsHandlers.get("did-finish-load")!();
+        await flushStyling();
+        windowHandlers.get("enter-full-screen")!();
+
+        expect(removeInsertedCSS).toHaveBeenCalledWith("css-key-1");
+    });
+
+    it("does not attempt to remove the CSS if none was ever injected", async () => {
+        vi.spyOn(process, "platform", "get").mockReturnValue("darwin");
+        const { window, windowHandlers, removeInsertedCSS } = mockWindow();
+
+        setupMacosTitleBar(window);
+        windowHandlers.get("enter-full-screen")!();
+        await flushStyling();
+
+        expect(removeInsertedCSS).not.toHaveBeenCalled();
+    });
+
+    it("re-injects the CSS when leaving full screen", async () => {
+        vi.spyOn(process, "platform", "get").mockReturnValue("darwin");
+        const { window, windowHandlers, insertCSS } = mockWindow();
+
+        setupMacosTitleBar(window);
+        windowHandlers.get("leave-full-screen")!();
+        await flushStyling();
+
+        expect(insertCSS).toHaveBeenCalledWith(buildTitleBarCss());
+    });
+});
diff --git a/apps/desktop/src/macos-titlebar.ts b/apps/desktop/src/macos-titlebar.ts
index b8b839d6ce..1864a389d7 100644
--- a/apps/desktop/src/macos-titlebar.ts
+++ b/apps/desktop/src/macos-titlebar.ts
@@ -7,69 +7,67 @@ Please see LICENSE files in the repository root for full details.
 
 import type { BrowserWindow } from "electron";
 
-export function setupMacosTitleBar(window: BrowserWindow): void {
-    if (process.platform !== "darwin") return;
+/**
+ * Height of the styled title bar band, matching the design spec
+ * (https://www.figma.com/design/MAUsalKv7bRRNKlAAigtNd/Community-contributions?node-id=76-12996).
+ * The `trafficLightPosition` in `electron-main.ts` vertically centres the native window controls
+ * within this band — keep the two in sync.
+ */
+export const TITLE_BAR_HEIGHT_PX = 32;
 
-    let cssKey: string | undefined;
+/**
+ * Build the CSS injected into the renderer to draw the macOS title bar band.
+ *
+ * `electron-main.ts` uses `titleBarStyle: "hidden"`, which keeps the native window frame, rounded
+ * corners and traffic lights but removes the native bar surface. This CSS paints that surface: a
+ * full-width strip at the top of the window in the canvas background colour with a hairline
+ * separator underneath, and pushes the app content below it. The strip is the window's drag
+ * handle.
+ *
+ * The drag region is built from `-webkit-app-region` rects only: elements keep the default value
+ * (`none`) and are ignored unless they explicitly set `drag`/`no-drag`. So the band stays draggable
+ * underneath any overlay whose surface is transparent to the calc (a dialog's backdrop, a menu's
+ * container), and an overlay panel that a user clicks (dialog panels, context menus, the lightbox
+ * chrome) sets `no-drag` so its rect is subtracted and it stays interactive. An element must never
+ * be both clickable and a drag handle.
+ *
+ * Extracted as a pure helper so the string contract can be unit-tested (see macos-titlebar.test.ts).
+ */
+export function buildTitleBarCss(): string {
+    return `
+            /* Reserve a band at the top of the window for the title bar */
+            body {
+                box-sizing: border-box;
+                height: 100%;
+                padding-top: ${TITLE_BAR_HEIGHT_PX}px !important;
+            }
 
-    async function applyStyling(): Promise<void> {
-        cssKey = await window.webContents.insertCSS(`
-            /* Create margin of space for the traffic light buttons */
-            .mx_UserMenu {
-                /* We zero the margin and use padding as we want to use it as a drag handle */ 
-                margin-top: 0 !important;
-                margin-left: 0 !important;
-                padding-top: 32px !important;
-                padding-left: 20px !important;
+            /* The title bar itself: canvas background with a hairline separator below */
+            body::before {
+                content: "";
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                height: ${TITLE_BAR_HEIGHT_PX}px;
+                box-sizing: border-box;
+                /* Fallback colours for pages loaded without the app themes (e.g. the error view) */
+                background: var(--cpd-color-bg-canvas-default, #ffffff);
+                border-bottom: 1px solid var(--cpd-color-separator-primary, #e1e6ec);
                 -webkit-app-region: drag;
                 -webkit-user-select: none;
             }
-            /* Exclude the button from being a drag handle and not working */
-            .mx_UserMenu > * {
-                -webkit-app-region: no-drag;            
+
+            /* Exclude floating menus and tooltips, which render in body-level portals */
+            [data-radix-popper-content-wrapper] {
+                -webkit-app-region: no-drag;
             }
-            /* Maintain alignment of the toggle space panel button */
-            .mx_SpacePanel_toggleCollapse {
-                /* 19px original top value, 32px margin-top above, 12px original margin-top value */
-                top: calc(19px + 32px - 12px) !important;
-            }
-            /* Prevent the media lightbox sender info from clipping into the traffic light buttons */
+
+            /* The image lightbox covers the whole window, including the title bar band; keep its
+               sender info clear of the traffic lights, and let its header double as a drag handle */
             .mx_ImageView_info_wrapper {
-                margin-top: 32px;
+                margin-top: ${TITLE_BAR_HEIGHT_PX}px;
             }
-            
-            /* Mark the splash screen as a drag handle */
-            .mx_MatrixChat_splash {
-                -webkit-app-region: drag;
-            }
-            /* Exclude the splash buttons from being drag handles */
-            .mx_MatrixChat_splashButtons {
-                -webkit-app-region: no-drag;
-            }
-            
-            /* Mark the background as a drag handle */
-            .mx_AuthPage {
-                -webkit-app-region: drag;
-            }
-            /* Exclude the main content elements from being drag handles */
-            .mx_AuthPage .mx_AuthPage_modalContent,
-            .mx_AuthPage .mx_AuthPage_modalBlur,
-            .mx_AuthPage .mx_AuthFooter > *,
-            .mx_AuthPage .mx_Dropdown_menu {
-                -webkit-app-region: no-drag;
-            }
-        
-            /* Mark the home page background as a drag handle */
-            .mx_HomePage {
-                -webkit-app-region: drag;
-            }
-            /* Exclude interactive elements from being drag handles */
-            .mx_HomePage .mx_HomePage_body,
-            .mx_HomePage .mx_HomePage_default_wrapper > * {
-                -webkit-app-region: no-drag;
-            }
-            
-            /* Mark the header as a drag handle */
             .mx_ImageView_panel {
                 -webkit-app-region: drag;
             }
@@ -79,27 +77,8 @@ export function setupMacosTitleBar(window: BrowserWindow): void {
             .mx_ImageView_panel > .mx_ImageView_toolbar > * {
                 -webkit-app-region: no-drag;
             }
-            
-            /* Mark the background as a drag handle only if no modal is open */
-            .mx_MatrixChat_wrapper[aria-hidden="false"] .mx_RoomView_wrapper,
-            .mx_MatrixChat_wrapper[aria-hidden="false"] .mx_HomePage {
-                -webkit-app-region: drag;
-            }
-            /* Exclude content elements from being drag handles */
-            .mx_SpaceRoomView_landing > *,
-            .mx_RoomPreviewBar,
-            .mx_RoomView_body,
-            .mx_AutoHideScrollbar,
-            .mx_RightPanel_ResizeWrapper,
-            .mx_RoomPreviewCard,
-            .mx_LeftPanel,
-            .mx_RoomView,
-            .mx_SpaceRoomView,
-            .mx_AccessibleButton,
-            .mx_Dialog {
-                -webkit-app-region: no-drag;
-            }
-            /* Exclude context menus and their backgrounds */
+
+            /* Exclude context menus and their backgrounds, which may open within the band */
             .mx_ContextualMenu, .mx_ContextualMenu_background {
                 -webkit-app-region: no-drag;
             }
@@ -107,40 +86,16 @@ export function setupMacosTitleBar(window: BrowserWindow): void {
             iframe {
                 -webkit-app-region: no-drag;
             }
+        `;
+}
 
-            /* Add a bar above room header + left panel */
-            
-            .mx_LeftPanel {
-                flex-direction: column;
-            }
+export function setupMacosTitleBar(window: BrowserWindow): void {
+    if (process.platform !== "darwin") return;
 
-            .mx_LeftPanel::before {
-                content: "";
-                height: 20px;
-                -webkit-app-region: drag;
-            }
-            
-            .mx_LeftPanel_newRoomList::before {
-                /* Aligned with the room header */
-                height: 13px;
-                border-right: 1px solid var(--cpd-color-bg-subtle-primary);
-            }
+    let cssKey: string | undefined;
 
-            .mx_RoomView::before,
-            .mx_SpaceRoomView::before {
-                content: "";
-                -webkit-app-region: drag;
-            }
-            
-            .mx_SpaceRoomView::before {
-                display: block;
-                height: 24px;            
-            }
-
-            .mx_RoomView::before {
-                height: 13px;
-            }
-        `);
+    async function applyStyling(): Promise<void> {
+        cssKey = await window.webContents.insertCSS(buildTitleBarCss());
     }
 
     window.on("enter-full-screen", () => {
diff --git a/apps/desktop/src/preload.cts b/apps/desktop/src/preload.cts
index 677f996397..8425b7b82e 100644
--- a/apps/desktop/src/preload.cts
+++ b/apps/desktop/src/preload.cts
@@ -8,7 +8,8 @@ Please see LICENSE files in the repository root for full details.
 
 // This file is compiled to CommonJS rather than ESM otherwise the browser chokes on the import statement.
 
-import { ipcRenderer, contextBridge, IpcRendererEvent } from "electron";
+import { ipcRenderer, contextBridge, type IpcRendererEvent } from "electron";
+import type { ConfigOptions } from "./config.js" with { "resolution-mode": "import" };
 
 // Expose only expected IPC wrapper APIs to the renderer process to avoid
 // handing out generalised messaging access.
@@ -54,7 +55,7 @@ contextBridge.exposeInMainWorld("electron", {
     async initialise(): Promise<{
         protocol: string;
         sessionId: string;
-        config: IConfigOptions;
+        config: ConfigOptions;
         supportedSettings: Record<string, boolean>;
         /**
          * Do we need to render badge overlays for new notifications?
diff --git a/apps/desktop/src/protocol.test.ts b/apps/desktop/src/protocol.test.ts
index 396a59f065..2f85301623 100644
--- a/apps/desktop/src/protocol.test.ts
+++ b/apps/desktop/src/protocol.test.ts
@@ -7,6 +7,8 @@ Please see LICENSE files in the repository root for full details.
 
 import { expect, describe, it, beforeEach, vi } from "vitest";
 import { fs as memfs, vol } from "memfs";
+import EventEmitter from "node:events";
+import { app } from "electron";
 
 import ProtocolHandler from "./protocol.js";
 
@@ -15,34 +17,45 @@ const TEST_SESSION_ID = "test_session_id";
 const USER_DATA_DIR = "/Users/name/Library/Application Support/Element";
 
 vi.mock("node:fs", () => ({ default: memfs }));
-vi.mock("electron", () => ({
-    app: {
-        getPath: vi.fn().mockReturnValue("/Users/name/Library/Application Support/Element"),
-        on: vi.fn(),
-    },
-    ipcMain: {
-        handle: vi.fn(),
-    },
-}));
+vi.mock("electron", () => {
+    const emitter = new EventEmitter();
+
+    return {
+        app: {
+            isPackaged: true,
+            getPath: vi.fn().mockReturnValue("/Users/name/Library/Application Support/Element"),
+            getAppPath: vi.fn().mockReturnValue("/bin/element-desktop"),
+            setAsDefaultProtocolClient: vi.fn(),
+            on: emitter.on.bind(emitter),
+            emit: emitter.emit.bind(emitter),
+            removeAllListeners: emitter.removeAllListeners.bind(emitter),
+        },
+        ipcMain: {
+            handle: vi.fn(),
+        },
+    };
+});
 
 beforeEach(() => {
     // Reset the state of the in-memory fs
     vol.reset();
+    // Clear the event emitter
+    app.removeAllListeners();
 });
 
 describe("ProtocolHandler", () => {
+    beforeEach(() => {
+        vol.fromJSON(
+            {
+                "./sso-sessions.json": JSON.stringify({ [TEST_SESSION_ID]: USER_DATA_DIR }),
+            },
+            USER_DATA_DIR,
+        );
+    });
+
     describe("getProfileFromDeeplink", () => {
         const handler = new ProtocolHandler(TEST_PROTOCOL);
 
-        beforeEach(() => {
-            vol.fromJSON(
-                {
-                    "./sso-sessions.json": JSON.stringify({ [TEST_SESSION_ID]: USER_DATA_DIR }),
-                },
-                USER_DATA_DIR,
-            );
-        });
-
         it("should handle legacy SSO URIs", () => {
             expect(
                 handler.getProfileFromDeeplink([
@@ -84,4 +97,77 @@ describe("ProtocolHandler", () => {
             expect(handler.getProfileFromDeeplink(["Element.app", `test.unrelated:/vector/webapp/`])).toBeUndefined();
         });
     });
+
+    it.each(["darwin", "linux", "win32"] as const)("should handle deeplink on %s", (platform) => {
+        vi.spyOn(process, "platform", "get").mockReturnValue(platform);
+        vi.stubGlobal("mainWindow", {
+            loadURL: vi.fn(),
+        });
+
+        const handler = new ProtocolHandler(TEST_PROTOCOL);
+        expect(handler).toBeTruthy();
+
+        const incomingUri = "test.proto:/#/room/#matrix:matrix.org";
+        const expectedUri = "vector://vector/webapp/#/room/#matrix:matrix.org";
+
+        if (platform === "darwin") {
+            app.emit("open-url", new Event("test"), incomingUri);
+        } else {
+            app.emit("second-instance", new Event("test"), ["/path/to/app", incomingUri]);
+        }
+
+        expect(global.mainWindow!.loadURL).toHaveBeenCalledWith(expectedUri);
+    });
+
+    it("should safely deal with wrong protocol deeplinks", () => {
+        vi.spyOn(process, "platform", "get").mockReturnValue("darwin");
+        vi.stubGlobal("mainWindow", {
+            loadURL: vi.fn(),
+        });
+
+        const handler = new ProtocolHandler(TEST_PROTOCOL);
+        expect(handler).toBeTruthy();
+
+        app.emit("open-url", new Event("test"), "random.proto:/#/room/#matrix:matrix.org");
+
+        expect(global.mainWindow!.loadURL).not.toHaveBeenCalled();
+    });
+
+    describe("initialise", () => {
+        beforeEach(() => {
+            vi.spyOn(process, "execPath", "get").mockReturnValue("/bin/element-desktop");
+        });
+
+        it("should set as default protocol client", () => {
+            const handler = new ProtocolHandler(TEST_PROTOCOL);
+            handler.initialise({
+                userDataPath: USER_DATA_DIR,
+                devtools: false,
+                update: false,
+                hidden: false,
+                positional: ["/bin/element-desktop"],
+            });
+
+            const args = ["--no-update"];
+            expect(app.setAsDefaultProtocolClient).toHaveBeenCalledWith(TEST_PROTOCOL, "/bin/element-desktop", args);
+            expect(app.setAsDefaultProtocolClient).toHaveBeenCalledWith("element", "/bin/element-desktop", args);
+        });
+
+        it("should handle deeplink", () => {
+            vi.stubGlobal("mainWindow", {
+                loadURL: vi.fn(),
+            });
+
+            const handler = new ProtocolHandler(TEST_PROTOCOL);
+            handler.initialise({
+                userDataPath: "/data",
+                devtools: false,
+                update: false,
+                hidden: false,
+                positional: ["/bin/element-desktop", "test.proto:/#/room/#matrix:matrix.org"],
+            });
+
+            expect(global.mainWindow!.loadURL).toHaveBeenCalledWith("vector://vector/webapp/#/room/#matrix:matrix.org");
+        });
+    });
 });
diff --git a/apps/desktop/src/protocol.ts b/apps/desktop/src/protocol.ts
index ad2558fc2a..7d2cb527f1 100644
--- a/apps/desktop/src/protocol.ts
+++ b/apps/desktop/src/protocol.ts
@@ -12,6 +12,8 @@ import path from "node:path";
 import fs from "node:fs";
 import { randomUUID } from "node:crypto";
 
+import { type Args, getArgsForProtocolRegistration } from "./args.js";
+
 const LEGACY_PROTOCOL = "element";
 const SEARCH_PARAM = "element-desktop-ssoid";
 const STORE_FILE_NAME = "sso-sessions.json";
@@ -24,32 +26,19 @@ export default class ProtocolHandler {
     private readonly sessionId: string;
 
     public constructor(private readonly protocol: string) {
-        // get all args except `hidden` as it'd mean the app would not get focused
-        // XXX: passing args to protocol handlers only works on Windows, so unpackaged deep-linking
-        // --profile/--profile-dir are passed via the SEARCH_PARAM var in the callback url
-        const args = process.argv.slice(1).filter((arg) => arg !== "--hidden" && arg !== "-hidden");
-        if (app.isPackaged) {
-            app.setAsDefaultProtocolClient(this.protocol, process.execPath, args);
-            app.setAsDefaultProtocolClient(LEGACY_PROTOCOL, process.execPath, args);
-        } else if (process.platform === "win32") {
-            // on Mac/Linux this would just cause the electron binary to open
-            // special handler for running without being packaged, e.g `electron .` by passing our app path to electron
-            app.setAsDefaultProtocolClient(this.protocol, process.execPath, [app.getAppPath(), ...args]);
-            app.setAsDefaultProtocolClient(LEGACY_PROTOCOL, process.execPath, [app.getAppPath(), ...args]);
-        }
-
         if (process.platform === "darwin") {
             // Protocol handler for macos
             app.on("open-url", (ev, url) => {
                 ev.preventDefault();
-                this.processUrl(url);
+                this.handleDeeplink(url);
             });
         } else {
             // Protocol handler for win32/Linux
             app.on("second-instance", (ev, commandLine) => {
-                const url = commandLine[commandLine.length - 1];
-                if (!url.startsWith(`${this.protocol}:/`) && !url.startsWith(`${LEGACY_PROTOCOL}://`)) return;
-                this.processUrl(url);
+                const url = commandLine.at(-1);
+                if (url && this.checkArgIsUrl(url)) {
+                    this.handleDeeplink(url);
+                }
             });
         }
 
@@ -59,6 +48,23 @@ export default class ProtocolHandler {
         ipcMain.handle("getProtocol", this.onGetProtocol);
     }
 
+    private checkArgIsUrl = (arg: string): boolean => {
+        return arg.startsWith(`${this.protocol}:/`) || arg.startsWith(`${LEGACY_PROTOCOL}://`);
+    };
+
+    private setAsDefaultProtocolClient(parsedArgs: Args): void {
+        const args = getArgsForProtocolRegistration(parsedArgs);
+        if (app.isPackaged) {
+            app.setAsDefaultProtocolClient(this.protocol, process.execPath, args);
+            app.setAsDefaultProtocolClient(LEGACY_PROTOCOL, process.execPath, args);
+        } else if (process.platform === "win32") {
+            // on Mac/Linux this would just cause the electron binary to open
+            // special handler for running without being packaged, e.g `electron .` by passing our app path to electron
+            app.setAsDefaultProtocolClient(this.protocol, process.execPath, [app.getAppPath(), ...args]);
+            app.setAsDefaultProtocolClient(LEGACY_PROTOCOL, process.execPath, [app.getAppPath(), ...args]);
+        }
+    }
+
     private readonly onGetProtocol = (): { protocol: string; sessionId: string } => {
         return {
             protocol: this.protocol,
@@ -66,8 +72,8 @@ export default class ProtocolHandler {
         };
     };
 
-    private processUrl(url: string): void {
-        if (!global.mainWindow) return;
+    private handleDeeplink(url: string): boolean {
+        if (!global.mainWindow) return false;
 
         const parsed = new URL(url);
         // sanity check: we only register for the one protocol, so we shouldn't
@@ -75,7 +81,7 @@ export default class ProtocolHandler {
         // with the Element app.
         if (parsed.protocol !== `${this.protocol}:` && parsed.protocol !== `${LEGACY_PROTOCOL}:`) {
             console.log("Ignoring unexpected protocol: ", parsed.protocol);
-            return;
+            return false;
         }
 
         const urlToLoad = new URL("vector://vector/webapp/");
@@ -90,6 +96,7 @@ export default class ProtocolHandler {
 
         console.log("Opening URL: ", urlToLoad.href);
         void global.mainWindow.loadURL(urlToLoad.href);
+        return true;
     }
 
     private readStore(): Record<string, string> {
@@ -107,16 +114,30 @@ export default class ProtocolHandler {
         fs.writeFileSync(storePath, JSON.stringify(this.store));
     }
 
-    public initialise(userDataPath: string): void {
+    /**
+     * Initialises the ProtocolHandler
+     * Registers the app as the default protocol client for deeplink handling.
+     * Handles any deeplink passed in via args on app start.
+     * Must be called after mainWindow is set up and any initial navigation is fired.
+     * @returns whether a deeplink was present in args and navigated to.
+     */
+    public initialise(args: Args): boolean {
+        this.setAsDefaultProtocolClient(args);
+
+        const url = args.positional.find(this.checkArgIsUrl);
+        const hasDeeplink = url ? this.handleDeeplink(url) : false;
+
         for (const key in this.store) {
             // ensure each instance only has one (the latest) session ID to prevent the file growing unbounded
-            if (this.store[key] === userDataPath) {
+            if (this.store[key] === args.userDataPath) {
                 delete this.store[key];
                 break;
             }
         }
-        this.store[this.sessionId] = userDataPath;
+        this.store[this.sessionId] = args.userDataPath;
         this.writeStore();
+
+        return hasDeeplink;
     }
 
     public getProfileFromDeeplink(args: string[]): string | undefined {
diff --git a/apps/desktop/src/renderer-recovery.test.ts b/apps/desktop/src/renderer-recovery.test.ts
new file mode 100644
index 0000000000..b50376197e
--- /dev/null
+++ b/apps/desktop/src/renderer-recovery.test.ts
@@ -0,0 +1,350 @@
+/*
+Copyright 2026 hayaksi1
+
+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 { describe, it, expect, beforeEach, vi } from "vitest";
+import { type BrowserWindow, type RenderProcessGoneDetails } from "electron";
+
+import {
+    CRASH_REASONS,
+    RECOVERY_ATTEMPT_CAP,
+    RECOVERY_WINDOW_MS,
+    decideRendererRecoveryAction,
+    RendererRecovery,
+    setupRendererRecovery,
+} from "./renderer-recovery.js";
+
+// `_t` is irrelevant to the recovery logic; stub it so importing the module under test (which pulls in
+// language-helper transitively via the dialog copy) never touches the real i18n machinery.
+vi.mock("./language-helper.js", () => ({
+    _t: (key: string): string => key,
+}));
+
+vi.mock("./config.js", () => ({
+    getConfig: (): { brand: string } => ({ brand: "Element" }),
+}));
+
+describe("decideRendererRecoveryAction", () => {
+    it.each(CRASH_REASONS)("returns 'reload' for the crash-class reason %s", (reason) => {
+        expect(decideRendererRecoveryAction({ reason, appQuitting: false, attemptsInWindow: 0 })).toBe("reload");
+    });
+
+    it.each(["clean-exit", "killed", "abnormal-exit", "memory-eviction"] as const)(
+        "returns 'ignore' for the non-crash reason %s",
+        (reason) => {
+            expect(decideRendererRecoveryAction({ reason, appQuitting: false, attemptsInWindow: 0 })).toBe("ignore");
+        },
+    );
+
+    it("returns 'ignore' when a quit is in progress even for a crash reason", () => {
+        expect(decideRendererRecoveryAction({ reason: "crashed", appQuitting: true, attemptsInWindow: 0 })).toBe(
+            "ignore",
+        );
+    });
+
+    it("returns 'reload' while still under the attempt cap", () => {
+        expect(
+            decideRendererRecoveryAction({
+                reason: "crashed",
+                appQuitting: false,
+                attemptsInWindow: RECOVERY_ATTEMPT_CAP - 1,
+            }),
+        ).toBe("reload");
+    });
+
+    it("returns 'dialog' once the attempt cap is reached (crash-loop guard)", () => {
+        expect(
+            decideRendererRecoveryAction({
+                reason: "crashed",
+                appQuitting: false,
+                attemptsInWindow: RECOVERY_ATTEMPT_CAP,
+            }),
+        ).toBe("dialog");
+    });
+});
+
+// A fake BrowserWindow that captures the webContents listeners into a map so tests can fire them,
+// mirroring the window-state.test.ts buildWin() pattern.
+function buildFakeWin(): {
+    win: BrowserWindow;
+    handlers: Record<string, (...args: unknown[]) => void>;
+    reload: ReturnType<typeof vi.fn>;
+    isCrashed: ReturnType<typeof vi.fn>;
+    isDestroyed: ReturnType<typeof vi.fn>;
+} {
+    const handlers: Record<string, (...args: unknown[]) => void> = {};
+    const reload = vi.fn();
+    const isCrashed = vi.fn(() => false);
+    const isDestroyed = vi.fn(() => false);
+    const win = {
+        isDestroyed,
+        webContents: {
+            on: vi.fn((event: string, cb: (...args: unknown[]) => void) => {
+                handlers[event] = cb;
+            }),
+            reload,
+            isCrashed,
+        },
+    } as unknown as BrowserWindow;
+    return { win, handlers, reload, isCrashed, isDestroyed };
+}
+
+const goneDetails = (reason: RenderProcessGoneDetails["reason"]): RenderProcessGoneDetails =>
+    ({ reason }) as RenderProcessGoneDetails;
+
+describe("RendererRecovery", () => {
+    let now = 0;
+    const clock = (): number => now;
+    const showDialog = vi.fn<() => void>();
+
+    beforeEach(() => {
+        now = 0;
+        showDialog.mockClear();
+    });
+
+    it("reloads the window on a 'crashed' render-process-gone event", () => {
+        const { win, handlers, reload } = buildFakeWin();
+        new RendererRecovery({ win, clock, isQuitting: (): boolean => false, showDialog }).register();
+
+        handlers["render-process-gone"]({}, goneDetails("crashed"));
+
+        expect(reload).toHaveBeenCalledTimes(1);
+        expect(showDialog).not.toHaveBeenCalled();
+    });
+
+    it.each(["oom", "launch-failed", "integrity-failure"] as const)(
+        "reloads the window on a '%s' render-process-gone event",
+        (reason) => {
+            const { win, handlers, reload } = buildFakeWin();
+            new RendererRecovery({ win, clock, isQuitting: (): boolean => false, showDialog }).register();
+
+            handlers["render-process-gone"]({}, goneDetails(reason));
+
+            expect(reload).toHaveBeenCalledTimes(1);
+        },
+    );
+
+    it("does NOT reload for 'clean-exit' or 'killed'", () => {
+        const { win, handlers, reload } = buildFakeWin();
+        new RendererRecovery({ win, clock, isQuitting: (): boolean => false, showDialog }).register();
+
+        handlers["render-process-gone"]({}, goneDetails("clean-exit"));
+        handlers["render-process-gone"]({}, goneDetails("killed"));
+
+        expect(reload).not.toHaveBeenCalled();
+        expect(showDialog).not.toHaveBeenCalled();
+    });
+
+    it("does NOT reload while the app is quitting (legitimate shutdown / macOS app.hide path)", () => {
+        const { win, handlers, reload } = buildFakeWin();
+        new RendererRecovery({ win, clock, isQuitting: (): boolean => true, showDialog }).register();
+
+        handlers["render-process-gone"]({}, goneDetails("crashed"));
+
+        expect(reload).not.toHaveBeenCalled();
+        expect(showDialog).not.toHaveBeenCalled();
+    });
+
+    it("does NOT reload a window that has already been destroyed", () => {
+        const { win, handlers, reload, isDestroyed } = buildFakeWin();
+        isDestroyed.mockReturnValue(true);
+        new RendererRecovery({ win, clock, isQuitting: (): boolean => false, showDialog }).register();
+
+        handlers["render-process-gone"]({}, goneDetails("crashed"));
+
+        expect(reload).not.toHaveBeenCalled();
+    });
+
+    it("stops reloading after the attempt cap and shows the error dialog instead (crash-loop guard)", () => {
+        const { win, handlers, reload } = buildFakeWin();
+        new RendererRecovery({ win, clock, isQuitting: (): boolean => false, showDialog }).register();
+
+        // The first RECOVERY_ATTEMPT_CAP crashes reload; the next one trips the cap and shows the dialog.
+        for (let i = 0; i < RECOVERY_ATTEMPT_CAP; i++) {
+            handlers["render-process-gone"]({}, goneDetails("crashed"));
+        }
+        expect(reload).toHaveBeenCalledTimes(RECOVERY_ATTEMPT_CAP);
+        expect(showDialog).not.toHaveBeenCalled();
+
+        handlers["render-process-gone"]({}, goneDetails("crashed"));
+        expect(reload).toHaveBeenCalledTimes(RECOVERY_ATTEMPT_CAP); // no further reload
+        expect(showDialog).toHaveBeenCalledTimes(1);
+    });
+
+    it("resets the attempt counter once crashes fall outside the rolling window", () => {
+        const { win, handlers, reload } = buildFakeWin();
+        new RendererRecovery({ win, clock, isQuitting: (): boolean => false, showDialog }).register();
+
+        for (let i = 0; i < RECOVERY_ATTEMPT_CAP; i++) {
+            handlers["render-process-gone"]({}, goneDetails("crashed"));
+        }
+        expect(reload).toHaveBeenCalledTimes(RECOVERY_ATTEMPT_CAP);
+
+        // Advance past the rolling window: the earlier attempts no longer count, so we reload again.
+        now += RECOVERY_WINDOW_MS + 1;
+        handlers["render-process-gone"]({}, goneDetails("crashed"));
+
+        expect(reload).toHaveBeenCalledTimes(RECOVERY_ATTEMPT_CAP + 1);
+        expect(showDialog).not.toHaveBeenCalled();
+    });
+
+    it("reloads once on the first 'unresponsive' event but not repeatedly (bounded)", () => {
+        const { win, handlers, reload } = buildFakeWin();
+        new RendererRecovery({ win, clock, isQuitting: (): boolean => false, showDialog }).register();
+
+        handlers["unresponsive"]();
+        expect(reload).toHaveBeenCalledTimes(1);
+
+        // A second hang inside the same window must not stack reloads.
+        handlers["unresponsive"]();
+        expect(reload).toHaveBeenCalledTimes(1);
+    });
+
+    it("does NOT reload on 'unresponsive' while quitting", () => {
+        const { win, handlers, reload } = buildFakeWin();
+        new RendererRecovery({ win, clock, isQuitting: (): boolean => true, showDialog }).register();
+
+        handlers["unresponsive"]();
+
+        expect(reload).not.toHaveBeenCalled();
+    });
+
+    it("shows the error dialog (instead of reloading) when 'unresponsive' fires while already at the reload cap", () => {
+        const { win, handlers, reload } = buildFakeWin();
+        new RendererRecovery({ win, clock, isQuitting: (): boolean => false, showDialog }).register();
+
+        // Fill the rolling window with crash reloads up to the cap so a hang now can't reload again.
+        for (let i = 0; i < RECOVERY_ATTEMPT_CAP; i++) {
+            handlers["render-process-gone"]({}, goneDetails("crashed"));
+        }
+        expect(reload).toHaveBeenCalledTimes(RECOVERY_ATTEMPT_CAP);
+
+        handlers["unresponsive"]();
+
+        expect(reload).toHaveBeenCalledTimes(RECOVERY_ATTEMPT_CAP); // no further reload
+        expect(showDialog).toHaveBeenCalledTimes(1);
+    });
+});
+
+// A user-initiated relaunch (dock activate / second-instance) must reload a crashed renderer through the
+// SAME crash-loop cap, so a relaunch can't silently re-arm a loop the recovery has already given up on.
+describe("RendererRecovery.recoverIfCrashed", () => {
+    let now = 0;
+    const clock = (): number => now;
+    const showDialog = vi.fn<() => void>();
+
+    beforeEach(() => {
+        now = 0;
+        showDialog.mockClear();
+    });
+
+    it("reloads a crashed renderer when under the cap", () => {
+        const { win, reload, isCrashed } = buildFakeWin();
+        isCrashed.mockReturnValue(true);
+        const recovery = new RendererRecovery({ win, clock, isQuitting: (): boolean => false, showDialog });
+        recovery.register();
+
+        recovery.recoverIfCrashed();
+
+        expect(reload).toHaveBeenCalledTimes(1);
+        expect(showDialog).not.toHaveBeenCalled();
+    });
+
+    it("does nothing when the renderer is not crashed", () => {
+        const { win, reload } = buildFakeWin(); // isCrashed defaults to false
+        const recovery = new RendererRecovery({ win, clock, isQuitting: (): boolean => false, showDialog });
+        recovery.register();
+
+        recovery.recoverIfCrashed();
+
+        expect(reload).not.toHaveBeenCalled();
+        expect(showDialog).not.toHaveBeenCalled();
+    });
+
+    it("does NOT reload (and shows the dialog) when crashed but the crash-loop cap was already hit", () => {
+        const { win, handlers, reload, isCrashed } = buildFakeWin();
+        isCrashed.mockReturnValue(true);
+        const recovery = new RendererRecovery({ win, clock, isQuitting: (): boolean => false, showDialog });
+        recovery.register();
+
+        // Exhaust the cap via genuine crash events so the loop has already been given up on.
+        for (let i = 0; i < RECOVERY_ATTEMPT_CAP; i++) {
+            handlers["render-process-gone"]({}, goneDetails("crashed"));
+        }
+        showDialog.mockClear();
+        expect(reload).toHaveBeenCalledTimes(RECOVERY_ATTEMPT_CAP);
+
+        // A user-initiated relaunch must not silently re-arm the loop.
+        recovery.recoverIfCrashed();
+
+        expect(reload).toHaveBeenCalledTimes(RECOVERY_ATTEMPT_CAP); // no extra reload
+        expect(showDialog).toHaveBeenCalledTimes(1);
+    });
+
+    it("counts its OWN reloads toward the crash-loop cap (relaunch can't reload past the cap)", () => {
+        const { win, reload, isCrashed } = buildFakeWin();
+        isCrashed.mockReturnValue(true);
+        const recovery = new RendererRecovery({ win, clock, isQuitting: (): boolean => false, showDialog });
+        recovery.register();
+
+        // Mashing dock-activate / second-instance on a crashed renderer must not reload past the cap:
+        // recoverIfCrashed records each of its own reloads, so the shared cap is fed both ways.
+        for (let i = 0; i < RECOVERY_ATTEMPT_CAP; i++) {
+            recovery.recoverIfCrashed();
+        }
+        expect(reload).toHaveBeenCalledTimes(RECOVERY_ATTEMPT_CAP);
+        expect(showDialog).not.toHaveBeenCalled();
+
+        recovery.recoverIfCrashed();
+        expect(reload).toHaveBeenCalledTimes(RECOVERY_ATTEMPT_CAP); // no extra reload — loop given up on
+        expect(showDialog).toHaveBeenCalledTimes(1);
+    });
+
+    it("does nothing when the window is destroyed", () => {
+        const { win, reload, isCrashed, isDestroyed } = buildFakeWin();
+        isCrashed.mockReturnValue(true);
+        isDestroyed.mockReturnValue(true);
+        const recovery = new RendererRecovery({ win, clock, isQuitting: (): boolean => false, showDialog });
+        recovery.register();
+
+        recovery.recoverIfCrashed();
+
+        expect(reload).not.toHaveBeenCalled();
+        expect(showDialog).not.toHaveBeenCalled();
+    });
+
+    it("does nothing while the app is quitting", () => {
+        const { win, reload, isCrashed } = buildFakeWin();
+        isCrashed.mockReturnValue(true);
+        const recovery = new RendererRecovery({ win, clock, isQuitting: (): boolean => true, showDialog });
+        recovery.register();
+
+        recovery.recoverIfCrashed();
+
+        expect(reload).not.toHaveBeenCalled();
+    });
+});
+
+describe("setupRendererRecovery", () => {
+    it("registers render-process-gone and unresponsive listeners on the window's webContents", () => {
+        const { win } = buildFakeWin();
+
+        setupRendererRecovery(win);
+
+        const on = vi.mocked(win.webContents.on);
+        const events = on.mock.calls.map((c) => c[0]);
+        expect(events).toContain("render-process-gone");
+        expect(events).toContain("unresponsive");
+    });
+
+    it("returns the RendererRecovery instance so callers can route relaunch recovery through the cap", () => {
+        const { win } = buildFakeWin();
+
+        const recovery = setupRendererRecovery(win);
+
+        expect(recovery).toBeInstanceOf(RendererRecovery);
+    });
+});
diff --git a/apps/desktop/src/renderer-recovery.ts b/apps/desktop/src/renderer-recovery.ts
new file mode 100644
index 0000000000..cd4fafa504
--- /dev/null
+++ b/apps/desktop/src/renderer-recovery.ts
@@ -0,0 +1,240 @@
+/*
+Copyright 2026 hayaksi1
+
+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 BrowserWindow, type RenderProcessGoneDetails, dialog } from "electron";
+
+import { _t } from "./language-helper.js";
+import { getConfig } from "./config.js";
+
+/**
+ * Auto-recovery for a dead renderer ("white screen, no UI after switching back", element-web#32222).
+ *
+ * IMPORTANT — this is a MITIGATION, not a root-cause fix. The white screen itself is an UPSTREAM
+ * Electron/Chromium renderer/GPU-process crash (commonly a corrupted GPUCache) that reproduces across
+ * Linux/Windows/macOS and which we cannot fix in this repository. What we *can* fix is the in-repo gap:
+ * previously there was no `render-process-gone` / `unresponsive` handler anywhere in the main process,
+ * so once the renderer died the window stayed permanently blank and the user had to kill the whole app.
+ * We turn that dead window back into a reload. The render-process-gone → reload pattern is industry
+ * standard (VS Code / Slack / Discord all do it).
+ *
+ * The decision logic is kept pure and the Electron wiring thin so it can be unit-tested without a GUI.
+ */
+
+/**
+ * The crash-class `render-process-gone` reasons we treat as recoverable and reload for.
+ *
+ * Deliberately EXCLUDED from the union of possible reasons:
+ *  - `clean-exit`       — the renderer exited normally (e.g. teardown); nothing to recover.
+ *  - `killed`           — the process was killed (often by us / the OS on purpose); don't fight it.
+ *  - `abnormal-exit`    — ambiguous; can be an intentional kill, so we stay conservative and don't reload.
+ *  - `memory-eviction`  — Chromium reclaiming a backgrounded renderer to save memory; reloading here
+ *                         would cause spurious reloads when the window is simply hidden.
+ */
+export const CRASH_REASONS = ["crashed", "oom", "launch-failed", "integrity-failure"] as const;
+
+export type CrashReason = (typeof CRASH_REASONS)[number];
+
+/** How many reloads we permit inside {@link RECOVERY_WINDOW_MS} before we give up and warn instead. */
+export const RECOVERY_ATTEMPT_CAP = 3;
+
+/** Rolling window over which {@link RECOVERY_ATTEMPT_CAP} is counted, to distinguish a one-off crash from a loop. */
+export const RECOVERY_WINDOW_MS = 60 * 1000;
+
+/** The action the recovery logic decides to take for a given `render-process-gone` event. */
+export type RecoveryAction = "reload" | "dialog" | "ignore";
+
+function isCrashReason(reason: RenderProcessGoneDetails["reason"]): reason is CrashReason {
+    return (CRASH_REASONS as readonly string[]).includes(reason);
+}
+
+/**
+ * Pure decision for what to do when the renderer is gone. No side effects, fully unit-testable.
+ *
+ * @param input.reason - the `render-process-gone` reason reported by Electron.
+ * @param input.appQuitting - whether a legitimate app quit is underway (so we must NOT reload).
+ * @param input.attemptsInWindow - reloads already performed inside the current rolling window.
+ * @returns `"ignore"` for benign reasons / during quit, `"dialog"` once the cap is hit (crash loop),
+ *          otherwise `"reload"`.
+ */
+export function decideRendererRecoveryAction(input: {
+    reason: RenderProcessGoneDetails["reason"];
+    appQuitting: boolean;
+    attemptsInWindow: number;
+}): RecoveryAction {
+    // Never resurrect a renderer that went away as part of a legitimate shutdown (including the macOS
+    // app.hide() path, where we deliberately tear things down) — reloading then would fight the quit.
+    if (input.appQuitting) return "ignore";
+
+    // Only act on genuine crash-class reasons; benign exits are left alone.
+    if (!isCrashReason(input.reason)) return "ignore";
+
+    // Crash-LOOP guard: once we've already reloaded the cap's worth of times in this window, stop
+    // reloading (it clearly isn't recovering) and surface an error dialog instead.
+    if (input.attemptsInWindow >= RECOVERY_ATTEMPT_CAP) return "dialog";
+
+    return "reload";
+}
+
+/** Minimal surface of `BrowserWindow` the recovery needs — kept narrow so tests can fake it. */
+type RecoverableWindow = Pick<BrowserWindow, "isDestroyed"> & {
+    webContents: Pick<BrowserWindow["webContents"], "on" | "reload" | "isCrashed">;
+};
+
+/** Injectable dependencies so the wiring is testable without a live Electron GUI. */
+export interface RendererRecoveryDeps {
+    win: RecoverableWindow;
+    /** Returns the current time in ms (injected so the rolling window can be tested deterministically). */
+    clock: () => number;
+    /** Whether a real quit is in progress (wraps `global.appQuitting`). */
+    isQuitting: () => boolean;
+    /** Shows the "couldn't recover" error dialog. Injected so tests don't pop a real dialog. */
+    showDialog: () => void;
+}
+
+/**
+ * Stateful coordinator wrapping {@link decideRendererRecoveryAction} with the attempt accounting and
+ * the actual Electron side effects (reload / dialog). One instance per window.
+ */
+export class RendererRecovery {
+    /** Timestamps (per {@link RendererRecoveryDeps.clock}) of the reloads still inside the rolling window. */
+    private attempts: number[] = [];
+    /** Whether we've already reloaded for an `unresponsive` hang in the current window (bounded once). */
+    private unresponsiveHandled = false;
+
+    public constructor(private readonly deps: RendererRecoveryDeps) {}
+
+    /** Wire the recovery handlers onto the window's webContents. */
+    public register(): void {
+        this.deps.win.webContents.on("render-process-gone", (_event, details) => {
+            this.onRenderProcessGone(details);
+        });
+        this.deps.win.webContents.on("unresponsive", () => {
+            this.onUnresponsive();
+        });
+    }
+
+    /** Drop attempt timestamps that have aged out of the rolling window. */
+    private pruneAttempts(): void {
+        const cutoff = this.deps.clock() - RECOVERY_WINDOW_MS;
+        this.attempts = this.attempts.filter((t) => t > cutoff);
+        // Once the window is quiet again, allow a future hang to be recovered once more.
+        if (this.attempts.length === 0) this.unresponsiveHandled = false;
+    }
+
+    private onRenderProcessGone(details: RenderProcessGoneDetails): void {
+        // MITIGATION (element-web#32222): the renderer died upstream — try to bring the UI back rather
+        // than leaving a permanent white screen the user can only escape by killing the whole app.
+        console.warn(`renderer-recovery: render-process-gone, reason=${details.reason}`);
+
+        if (this.deps.win.isDestroyed()) return;
+
+        this.pruneAttempts();
+        const action = decideRendererRecoveryAction({
+            reason: details.reason,
+            appQuitting: this.deps.isQuitting(),
+            attemptsInWindow: this.attempts.length,
+        });
+
+        this.performAction(action);
+    }
+
+    /**
+     * Recover a renderer that is *already* crashed, driven by a user-initiated relaunch (the dock
+     * `activate` / `second-instance` paths in electron-main.ts) rather than a `render-process-gone`
+     * event. Routed through the SAME attempt cap as {@link onRenderProcessGone} so a relaunch can't
+     * silently re-arm a crash loop we've already given up on (element-web#32222) — once the cap is hit
+     * the user gets the error dialog instead of yet another reload.
+     */
+    public recoverIfCrashed(): void {
+        if (this.deps.win.isDestroyed()) return;
+        if (!this.deps.win.webContents.isCrashed()) return;
+
+        this.pruneAttempts();
+        const action = decideRendererRecoveryAction({
+            // The renderer is crashed (isCrashed() above); treat it as a crash-class recovery.
+            reason: "crashed",
+            appQuitting: this.deps.isQuitting(),
+            attemptsInWindow: this.attempts.length,
+        });
+
+        this.performAction(action);
+    }
+
+    /** Execute the decided {@link RecoveryAction}: reload (recording the attempt) / dialog / ignore. */
+    private performAction(action: RecoveryAction): void {
+        switch (action) {
+            case "reload":
+                this.attempts.push(this.deps.clock());
+                console.warn(
+                    `renderer-recovery: reloading renderer (attempt ${this.attempts.length}/${RECOVERY_ATTEMPT_CAP})`,
+                );
+                this.deps.win.webContents.reload();
+                break;
+            case "dialog":
+                console.error("renderer-recovery: renderer crash loop detected, giving up and warning the user");
+                this.deps.showDialog();
+                break;
+            case "ignore":
+                break;
+        }
+    }
+
+    private onUnresponsive(): void {
+        // A hung (not crashed) renderer: conservatively reload at most once per rolling window, and never
+        // during a quit. We reuse the same attempt cap so a hang-loop can't reload forever either.
+        console.warn("renderer-recovery: renderer unresponsive");
+
+        if (this.deps.win.isDestroyed() || this.deps.isQuitting()) return;
+
+        this.pruneAttempts();
+        if (this.unresponsiveHandled) return;
+        if (this.attempts.length >= RECOVERY_ATTEMPT_CAP) {
+            console.error("renderer-recovery: unresponsive while already at the reload cap, warning the user");
+            this.deps.showDialog();
+            return;
+        }
+
+        this.unresponsiveHandled = true;
+        this.attempts.push(this.deps.clock());
+        console.warn("renderer-recovery: reloading unresponsive renderer");
+        this.deps.win.webContents.reload();
+    }
+}
+
+/**
+ * Show the "we couldn't recover the window" error dialog. Mirrors the dialog/i18n convention used by
+ * store.ts / electron-main.ts (`dialog.showMessageBox` + `_t`).
+ */
+function showCrashLoopDialog(win: BrowserWindow): void {
+    const brand = getConfig().brand;
+    void dialog.showMessageBox(win, {
+        type: "error",
+        title: _t("renderer_crash|title", { brand }),
+        message: _t("renderer_crash|message", { brand }),
+        detail: _t("renderer_crash|detail"),
+        buttons: [_t("action|close")],
+    });
+}
+
+/**
+ * Install renderer auto-recovery on the main window. Thin Electron wiring around {@link RendererRecovery};
+ * follows the `setupX(win)` named-export seam used by media-auth.ts / media-permissions.ts.
+ *
+ * @param win - the main BrowserWindow whose renderer we guard.
+ * @returns the {@link RendererRecovery} instance so the caller can route user-initiated relaunch
+ *          recovery (dock `activate` / `second-instance`) through {@link RendererRecovery.recoverIfCrashed}.
+ */
+export function setupRendererRecovery(win: BrowserWindow): RendererRecovery {
+    const recovery = new RendererRecovery({
+        win,
+        clock: (): number => Date.now(),
+        isQuitting: (): boolean => global.appQuitting,
+        showDialog: (): void => showCrashLoopDialog(win),
+    });
+    recovery.register();
+    return recovery;
+}
diff --git a/apps/desktop/src/save-image.test.ts b/apps/desktop/src/save-image.test.ts
new file mode 100644
index 0000000000..f1ac82db6f
--- /dev/null
+++ b/apps/desktop/src/save-image.test.ts
@@ -0,0 +1,135 @@
+/*
+Copyright 2026 hayaksi1
+
+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 { expect, describe, it, beforeEach, vi, type Mock } from "vitest";
+import { nativeImage, type Session } from "electron";
+import fs from "node:fs";
+import * as streamPromises from "node:stream/promises";
+
+import { saveImageToFile, writeNativeImage } from "./save-image.js";
+
+vi.mock("electron", () => ({
+    nativeImage: {
+        createFromDataURL: vi.fn(),
+    },
+}));
+
+vi.mock("node:fs", () => ({
+    default: {
+        createWriteStream: vi.fn(),
+        promises: {
+            writeFile: vi.fn(() => Promise.resolve()),
+        },
+    },
+}));
+
+vi.mock("node:stream/promises", () => ({
+    pipeline: vi.fn(() => Promise.resolve()),
+}));
+
+const createFromDataURL = vi.mocked(nativeImage.createFromDataURL);
+const createWriteStream = vi.mocked(fs.createWriteStream);
+const writeFile = vi.mocked(fs.promises.writeFile);
+const pipeline = vi.mocked(streamPromises.pipeline);
+
+/** A stub {@link NativeImage} exposing the encoder methods `writeNativeImage` selects between. */
+function stubNativeImage(): { toPNG: Mock; toJPEG: Mock; toBitmap: Mock } {
+    return {
+        toPNG: vi.fn(() => Buffer.from("png")),
+        toJPEG: vi.fn(() => Buffer.from("jpeg")),
+        toBitmap: vi.fn(() => Buffer.from("bmp")),
+    };
+}
+
+/** A fake Electron {@link Session} exposing only the `fetch` method used by `saveImageToFile`. */
+function fakeSession(fetchImpl: Mock): Session {
+    return { fetch: fetchImpl } as unknown as Session;
+}
+
+describe("save-image", () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        createFromDataURL.mockReturnValue(stubNativeImage() as never);
+        createWriteStream.mockReturnValue({} as never);
+    });
+
+    describe("saveImageToFile", () => {
+        it("decodes a data: URL into a NativeImage and writes it without fetching", async () => {
+            const session = fakeSession(vi.fn());
+            const globalFetch = vi.spyOn(globalThis, "fetch");
+
+            await saveImageToFile("data:image/png;base64,AAAA", "/tmp/out.png", session);
+
+            expect(createFromDataURL).toHaveBeenCalledWith("data:image/png;base64,AAAA");
+            expect(writeFile).toHaveBeenCalledTimes(1);
+            expect(session.fetch).not.toHaveBeenCalled();
+            expect(globalFetch).not.toHaveBeenCalled();
+        });
+
+        it("fetches http(s) URLs through the injected session and pipes the body to disk", async () => {
+            const body = { kind: "stream" };
+            const fetchImpl = vi.fn(() => Promise.resolve({ ok: true, body }));
+            const session = fakeSession(fetchImpl);
+            const writeStream = { kind: "writeStream" };
+            createWriteStream.mockReturnValue(writeStream as never);
+            const globalFetch = vi.spyOn(globalThis, "fetch");
+
+            await saveImageToFile("https://hs.example/_matrix/media/v3/download/x/y", "/tmp/out.png", session);
+
+            // Regression assertion (#32362): the injected session fetch is used so the media-auth
+            // webRequest interceptors apply; the main-process global fetch must NOT be called.
+            expect(fetchImpl).toHaveBeenCalledWith("https://hs.example/_matrix/media/v3/download/x/y");
+            expect(globalFetch).not.toHaveBeenCalled();
+            expect(createWriteStream).toHaveBeenCalledWith("/tmp/out.png");
+            expect(pipeline).toHaveBeenCalledWith(body, writeStream);
+        });
+
+        it("throws when the session fetch responds with a non-ok status", async () => {
+            const fetchImpl = vi.fn(() => Promise.resolve({ ok: false, statusText: "Not Found" }));
+            const session = fakeSession(fetchImpl);
+
+            await expect(saveImageToFile("https://hs.example/image.png", "/tmp/out.png", session)).rejects.toThrow(
+                "unexpected response Not Found",
+            );
+            expect(pipeline).not.toHaveBeenCalled();
+        });
+
+        it("throws when the session fetch responds without a body", async () => {
+            const fetchImpl = vi.fn(() => Promise.resolve({ ok: true, body: null, statusText: "OK" }));
+            const session = fakeSession(fetchImpl);
+
+            await expect(saveImageToFile("https://hs.example/image.png", "/tmp/out.png", session)).rejects.toThrow(
+                "unexpected response has no body OK",
+            );
+            expect(pipeline).not.toHaveBeenCalled();
+        });
+    });
+
+    describe("writeNativeImage", () => {
+        it("encodes .jpg/.jpeg as JPEG", async () => {
+            const img = stubNativeImage();
+            await writeNativeImage("/tmp/out.jpg", img as never);
+            expect(img.toJPEG).toHaveBeenCalledWith(100);
+            expect(img.toPNG).not.toHaveBeenCalled();
+            expect(img.toBitmap).not.toHaveBeenCalled();
+        });
+
+        it("encodes .bmp as a bitmap", async () => {
+            const img = stubNativeImage();
+            await writeNativeImage("/tmp/out.bmp", img as never);
+            expect(img.toBitmap).toHaveBeenCalled();
+            expect(img.toPNG).not.toHaveBeenCalled();
+        });
+
+        it("encodes unknown extensions as PNG", async () => {
+            const img = stubNativeImage();
+            await writeNativeImage("/tmp/out.weird", img as never);
+            expect(img.toPNG).toHaveBeenCalled();
+            expect(img.toJPEG).not.toHaveBeenCalled();
+        });
+    });
+});
diff --git a/apps/desktop/src/save-image.ts b/apps/desktop/src/save-image.ts
new file mode 100644
index 0000000000..640c42a015
--- /dev/null
+++ b/apps/desktop/src/save-image.ts
@@ -0,0 +1,52 @@
+/*
+Copyright 2026 hayaksi1
+
+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 { nativeImage, type NativeImage, type Session } from "electron";
+import fs from "node:fs";
+import { pipeline } from "node:stream/promises";
+
+/**
+ * Writes an Electron {@link NativeImage} to disk, encoding it based on the target file extension.
+ * Falls back to PNG for unknown extensions.
+ */
+export function writeNativeImage(filePath: string, img: NativeImage): Promise<void> {
+    switch (filePath.split(".").pop()?.toLowerCase()) {
+        case "jpg":
+        case "jpeg":
+            return fs.promises.writeFile(filePath, img.toJPEG(100));
+        case "bmp":
+            return fs.promises.writeFile(filePath, img.toBitmap());
+        case "png":
+        default:
+            return fs.promises.writeFile(filePath, img.toPNG());
+    }
+}
+
+/**
+ * Saves an image to a file on disk.
+ *
+ * `data:` URLs are decoded directly into a {@link NativeImage}. Network (`http(s):`) URLs are
+ * fetched through the supplied Electron {@link Session} rather than Node's global `fetch`, so that
+ * the session's `webRequest` interceptors apply — in particular the authenticated-media handlers in
+ * `media-auth.ts` which rewrite the download URL and attach the `Authorization` header. Using the
+ * main-process global `fetch` bypasses those interceptors and fails with 401/404 on modern Synapse
+ * (authenticated media, MSC3916). See https://github.com/element-hq/element-web/issues/32362.
+ *
+ * @param url - the `data:` or `http(s):` URL of the image to save
+ * @param filePath - the destination path on disk
+ * @param session - the Electron session whose `webRequest` interceptors should apply to the fetch
+ */
+export async function saveImageToFile(url: string, filePath: string, session: Session): Promise<void> {
+    if (url.startsWith("data:")) {
+        await writeNativeImage(filePath, nativeImage.createFromDataURL(url));
+    } else {
+        const resp = await session.fetch(url);
+        if (!resp.ok) throw new Error(`unexpected response ${resp.statusText}`);
+        if (!resp.body) throw new Error(`unexpected response has no body ${resp.statusText}`);
+        await pipeline(resp.body, fs.createWriteStream(filePath));
+    }
+}
diff --git a/apps/desktop/src/store.ts b/apps/desktop/src/store.ts
index dee629be92..12ff4d9472 100644
--- a/apps/desktop/src/store.ts
+++ b/apps/desktop/src/store.ts
@@ -18,6 +18,7 @@ import ElectronStore from "electron-store";
 import { app, safeStorage, dialog, type SafeStorage, type Session } from "electron";
 
 import { _t } from "./language-helper.js";
+import { getConfig } from "./config.js";
 
 /**
  * String union type representing all the safeStorage backends.
@@ -126,7 +127,7 @@ class SafeStorageWriter extends StorageWriter {
     }
 }
 
-const enum Mode {
+export const enum Mode {
     Encrypted = "encrypted", // default
     AllowPlaintext = "allow-plaintext",
     ForcePlaintext = "force-plaintext",
@@ -373,7 +374,7 @@ class Store extends ElectronStore<StoreData> {
                 message: _t("store|error|backend_no_encryption"),
                 detail: _t("store|error|backend_no_encryption_detail", {
                     backend: safeStorage.getSelectedStorageBackend(),
-                    brand: global.vectorConfig.brand || "Element",
+                    brand: getConfig().brand,
                 }),
                 type: "error",
                 buttons: [_t("action|cancel"), _t("store|error|unsupported_keyring_use_plaintext")],
@@ -389,7 +390,7 @@ class Store extends ElectronStore<StoreData> {
                 title: _t("store|error|unsupported_keyring_title"),
                 message: _t("store|error|unsupported_keyring"),
                 detail: _t("store|error|unsupported_keyring_detail", {
-                    brand: global.vectorConfig.brand || "Element",
+                    brand: getConfig().brand,
                     link: "https://www.electronjs.org/docs/latest/api/safe-storage#safestoragegetselectedstoragebackend-linux",
                 }),
                 type: "error",
diff --git a/apps/desktop/src/tray.test.ts b/apps/desktop/src/tray.test.ts
new file mode 100644
index 0000000000..9820d06639
--- /dev/null
+++ b/apps/desktop/src/tray.test.ts
@@ -0,0 +1,50 @@
+/*
+Copyright 2026 Element Creations 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 { expect, describe, it, beforeEach, vi } from "vitest";
+import { Tray } from "electron";
+
+import { getConfig } from "./config.js";
+
+vi.mock("electron", () => ({
+    Tray: vi.fn(
+        class {
+            public setToolTip = vi.fn();
+            public setContextMenu = vi.fn();
+            public on = vi.fn();
+        },
+    ),
+    Menu: {
+        buildFromTemplate: vi.fn(),
+    },
+    nativeImage: {
+        createFromPath: vi.fn(),
+    },
+    app: {
+        isPackaged: true,
+    },
+}));
+
+vi.mock("./icon.js");
+vi.mock("./config.js");
+
+describe("create", () => {
+    let create: () => Promise<void>;
+
+    beforeEach(async () => {
+        // The tray is disabled on macOS so test under win32
+        vi.spyOn(process, "platform", "get").mockReturnValue("win32");
+        ({ create } = await import("./tray.js"));
+    });
+
+    it("should use config.brand", async () => {
+        vi.mocked(getConfig).mockReturnValue({ brand: "ChatApp", help_url: "HELP_URL", web_base_url: "WEB_BASE_URL" });
+        await create();
+        const tray = vi.mocked(Tray).mock.instances[0];
+        expect(tray.setToolTip).toHaveBeenCalledWith("ChatApp");
+    });
+});
diff --git a/apps/desktop/src/tray.ts b/apps/desktop/src/tray.ts
index f6833f2f2f..3d8015aba8 100644
--- a/apps/desktop/src/tray.ts
+++ b/apps/desktop/src/tray.ts
@@ -15,8 +15,8 @@ import path from "node:path";
 
 import { _t } from "./language-helper.js";
 import { getBuildConfig } from "./build-config.js";
-import { getBrand } from "./config.js";
 import { getIconPath } from "./icon.js";
+import { getConfig } from "./config.js";
 
 // This hardcoded uuid is an arbitrary v4 uuid generated on https://www.uuidgenerator.net/version4
 const UUID_NAMESPACE = "9fc9c6a0-9ffe-45c9-9cd7-5639ae38b232";
@@ -62,7 +62,7 @@ export async function create(): Promise<void> {
         trayIcon = new Tray(defaultIcon);
     }
 
-    trayIcon.setToolTip(getBrand());
+    trayIcon.setToolTip(getConfig().brand);
     initApplicationMenu();
     trayIcon.on("click", toggleWin);
 
diff --git a/apps/desktop/src/updater.ts b/apps/desktop/src/updater.ts
index 5b35fc5a09..e6702d38c5 100644
--- a/apps/desktop/src/updater.ts
+++ b/apps/desktop/src/updater.ts
@@ -12,7 +12,7 @@ import os from "node:os";
 import { getSquirrelExecutable } from "./squirrelhooks.js";
 import { _t } from "./language-helper.js";
 import { initialisePromise } from "./ipc.js";
-import { getBrand } from "./config.js";
+import { getConfig } from "./config.js";
 
 const UPDATE_POLL_INTERVAL_MS = 60 * 60 * 1000;
 const INITIAL_UPDATE_DELAY_MS = 30 * 1000;
@@ -150,7 +150,7 @@ async function available(): Promise<boolean> {
             initialisePromise.then(() => {
                 ipcMain.emit("showToast", {
                     title: _t("eol|title"),
-                    description: _t("eol|no_more_updates", { brand: getBrand() }),
+                    description: _t("eol|no_more_updates", { brand: getConfig().brand }),
                 });
             });
             console.warn("Auto update not supported, macOS version too old");
@@ -161,7 +161,7 @@ async function available(): Promise<boolean> {
             initialisePromise.then(() => {
                 ipcMain.emit("showToast", {
                     title: _t("eol|title"),
-                    description: _t("eol|warning", { brand: getBrand() }),
+                    description: _t("eol|warning", { brand: getConfig().brand }),
                 });
             });
         }
diff --git a/apps/desktop/src/utils.test.ts b/apps/desktop/src/utils.test.ts
new file mode 100644
index 0000000000..aa099c6f65
--- /dev/null
+++ b/apps/desktop/src/utils.test.ts
@@ -0,0 +1,78 @@
+/*
+Copyright 2026 Element Creations 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 { expect, describe, it, beforeEach, vi } from "vitest";
+import { fs as memfs, vol } from "memfs";
+
+import { loadJsonFile, tryPaths, randomArray } from "./utils.js";
+
+vi.mock("node:fs", () => ({ default: memfs }));
+vi.mock("node:fs/promises", () => ({ default: memfs.promises }));
+
+beforeEach(() => {
+    // Reset the state of the in-memory fs
+    vol.reset();
+});
+
+describe("randomArray", () => {
+    it("should return an array matching the requested size", async () => {
+        function toUnpaddedBase64Size(size: number): number {
+            return Math.ceil((4 * size) / 3);
+        }
+
+        await expect(randomArray(100)).resolves.toHaveLength(toUnpaddedBase64Size(100));
+        await expect(randomArray(32)).resolves.toHaveLength(toUnpaddedBase64Size(32));
+    });
+
+    it("should return a unique random array", async () => {
+        const arr1 = await randomArray(60);
+        const arr2 = await randomArray(60);
+        expect(arr1).not.toEqual(arr2);
+    });
+});
+
+describe("loadJsonFile", () => {
+    beforeEach(() => {
+        vol.fromJSON({
+            "./file.json": JSON.stringify({ file1: true }),
+            "./nested/deep/file.json": JSON.stringify({ file2: true }),
+        });
+    });
+
+    it("should load and parse a JSON file correctly", () => {
+        expect(loadJsonFile("file.json")).toStrictEqual({ file1: true });
+    });
+
+    it("should use args as path segments", () => {
+        expect(loadJsonFile("nested", "deep", "file.json")).toStrictEqual({ file2: true });
+    });
+
+    it("should return an empty object when file does not exist", () => {
+        expect(loadJsonFile("unknown-file.json")).toStrictEqual({});
+    });
+});
+
+describe("tryPaths", () => {
+    beforeEach(() => {
+        vol.fromNestedJSON({
+            "./dirA/": {},
+            "./dir/dirB/": {},
+        });
+    });
+
+    it("should find file relative to given root", async () => {
+        await expect(tryPaths("name", "dir", ["dirB"])).resolves.toEqual("dir/dirB/");
+    });
+
+    it("should handle unknown paths", async () => {
+        await expect(tryPaths("name", ".", ["dirB", "dirA"])).resolves.toEqual("dirA/");
+    });
+
+    it("should throw error if file does not exist", async () => {
+        await expect(tryPaths("name", "dir", ["a.json", "b.json"])).rejects.toThrow("Failed to find name path");
+    });
+});
diff --git a/apps/desktop/src/utils.ts b/apps/desktop/src/utils.ts
index 368211aba7..eedabf5237 100644
--- a/apps/desktop/src/utils.ts
+++ b/apps/desktop/src/utils.ts
@@ -9,7 +9,12 @@ import crypto from "node:crypto";
 import fs from "node:fs";
 import path from "node:path";
 import afs from "node:fs/promises";
+import { type JsonDocument } from "shared-types";
 
+/**
+ * Returns a random array of a specified size in unpadded base64
+ * @param size - the size of the underlying random array
+ */
 export async function randomArray(size: number): Promise<string> {
     return new Promise((resolve, reject) => {
         crypto.randomBytes(size, (err, buf) => {
@@ -22,19 +27,12 @@ export async function randomArray(size: number): Promise<string> {
     });
 }
 
-type JsonValue = null | string | number;
-type JsonArray = Array<JsonValue | JsonObject | JsonArray>;
-export interface JsonObject {
-    [key: string]: JsonObject | JsonArray | JsonValue;
-}
-export type Json = JsonArray | JsonObject;
-
 /**
  * Synchronously load a JSON file from the local filesystem.
  * Unlike `require`, will never execute any javascript in a loaded file.
  * @param paths - An array of path segments which will be joined using the system's path delimiter.
  */
-export function loadJsonFile<T extends Json>(...paths: string[]): T {
+export function loadJsonFile<T extends JsonDocument>(...paths: string[]): T {
     const joinedPaths = path.join(...paths);
 
     if (!fs.existsSync(joinedPaths)) {
@@ -62,9 +60,9 @@ export async function tryPaths(name: string, root: string, rawPaths: string[]):
             return p + "/";
         } catch {}
     }
-    console.log(`Couldn't find ${name} files in any of: `);
+    console.log(`Couldn't find '${name}' in any of: `);
     for (const p of paths) {
         console.log("\t" + path.resolve(p));
     }
-    throw new Error(`Failed to find ${name} files`);
+    throw new Error(`Failed to find ${name} path`);
 }
diff --git a/apps/desktop/src/vectormenu.test.ts b/apps/desktop/src/vectormenu.test.ts
new file mode 100644
index 0000000000..5b3582e7c7
--- /dev/null
+++ b/apps/desktop/src/vectormenu.test.ts
@@ -0,0 +1,61 @@
+/*
+Copyright 2026 Element Creations 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 { expect, describe, it, vi, beforeEach } from "vitest";
+import { type Menu, type MenuItemConstructorOptions, shell } from "electron";
+
+import { type buildMenuTemplate as _buildMenuTemplate } from "./vectormenu.js";
+import { type ConfigOptions } from "./config.js";
+
+vi.mock("electron", () => ({
+    app: {
+        name: "ChatApp",
+    },
+    shell: {
+        openExternal: vi.fn(),
+    },
+    Menu: { buildFromTemplate: ((items) => ({ items })) as (typeof Menu)["buildFromTemplate"] } as unknown as Menu,
+}));
+
+vi.mock("./config.js", () => ({
+    getConfig: (): Partial<ConfigOptions> => ({
+        brand: "IAMBRAND",
+        help_url: "https://i.need.help",
+    }),
+}));
+
+vi.mock("./language-helper.js", () => ({
+    _t: (k: string): string => k,
+}));
+
+describe("buildMenuTemplate", () => {
+    describe.each(["darwin", "linux", "win32"] as const)("on %s", (platform) => {
+        let buildMenuTemplate: typeof _buildMenuTemplate;
+
+        beforeEach(async () => {
+            vi.spyOn(process, "platform", "get").mockReturnValue(platform);
+            vi.resetModules();
+            ({ buildMenuTemplate } = await import("./vectormenu.js"));
+        });
+
+        it.runIf(platform === "darwin")("should have an app-named item first", () => {
+            const menu = buildMenuTemplate();
+            expect(menu.items[0].label).toBe("ChatApp");
+        });
+
+        it("should include expected `help` menu", () => {
+            const menu = buildMenuTemplate();
+
+            const helpMenu = menu.items.at(-1)!;
+            expect(helpMenu.label).toBe("common|help");
+            const helpSubmenu = helpMenu.submenu as unknown as MenuItemConstructorOptions[];
+            expect(helpSubmenu[0].label).toBe("common|brand_help");
+            helpSubmenu[0].click!(menu.items.at(-1)!, undefined, new Event("click") as KeyboardEvent);
+            expect(shell.openExternal).toHaveBeenCalledWith("https://i.need.help");
+        });
+    });
+});
diff --git a/apps/desktop/src/vectormenu.ts b/apps/desktop/src/vectormenu.ts
index d5bab05ed5..6680396e90 100644
--- a/apps/desktop/src/vectormenu.ts
+++ b/apps/desktop/src/vectormenu.ts
@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import { app, shell, Menu, type MenuItem, type MenuItemConstructorOptions } from "electron";
 
 import { _t } from "./language-helper.js";
+import { getConfig } from "./config.js";
 
 const isMac = process.platform === "darwin";
 
@@ -129,10 +130,9 @@ export function buildMenuTemplate(): Menu {
             role: "help",
             submenu: [
                 {
-                    // XXX: vectorConfig won't have defaults applied to it so we need to duplicate them here
-                    label: _t("common|brand_help", { brand: global.vectorConfig?.brand || "Element" }),
+                    label: _t("common|brand_help", { brand: getConfig().brand }),
                     click(): void {
-                        void shell.openExternal(global.vectorConfig?.help_url || "https://element.io/help");
+                        void shell.openExternal(getConfig().help_url);
                     },
                 },
             ],
diff --git a/apps/desktop/src/webcontents-handler.test.ts b/apps/desktop/src/webcontents-handler.test.ts
new file mode 100644
index 0000000000..e629352f9f
--- /dev/null
+++ b/apps/desktop/src/webcontents-handler.test.ts
@@ -0,0 +1,224 @@
+/*
+Copyright 2026 hayaksi1
+
+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 { beforeEach, describe, expect, it, vi, type Mock } from "vitest";
+import { dialog, shell, type WebContents } from "electron";
+
+// The `userDownloadAction` listener is registered at import time, so capture the callbacks that
+// `ipcMain.on` receives in order to invoke the handler under test directly.
+const { ipcHandlers, menus } = vi.hoisted(() => ({
+    ipcHandlers: {} as Record<string, (...args: unknown[]) => unknown>,
+    // Every context menu the handler builds, in construction order, so a test can click an entry.
+    menus: [] as MenuStub[],
+}));
+
+interface MenuItemStub {
+    label: string;
+    click?: () => void | Promise<void>;
+}
+
+interface MenuStub {
+    items: MenuItemStub[];
+}
+
+vi.mock("electron", () => ({
+    clipboard: { writeText: vi.fn() },
+    Menu: class {
+        public readonly items: MenuItemStub[] = [];
+        public constructor() {
+            menus.push(this);
+        }
+        public append(item: MenuItemStub): void {
+            this.items.push(item);
+        }
+        public popup(): void {}
+    },
+    MenuItem: class {
+        public readonly label: string;
+        public readonly click?: () => void | Promise<void>;
+        public constructor(options: MenuItemStub) {
+            this.label = options.label;
+            this.click = options.click;
+        }
+    },
+    shell: { openExternal: vi.fn(), openPath: vi.fn() },
+    dialog: { showMessageBox: vi.fn(), showSaveDialog: vi.fn() },
+    ipcMain: {
+        on: vi.fn((channel: string, cb: (...args: unknown[]) => unknown) => {
+            ipcHandlers[channel] = cb;
+        }),
+    },
+}));
+vi.mock("./language-helper.js", () => ({ _t: (key: string): string => key }));
+vi.mock("./config.js", () => ({ getConfig: (): Record<string, never> => ({}) }));
+vi.mock("./save-image.js", () => ({ saveImageToFile: vi.fn() }));
+
+const registerWebContentsHandlers = (await import("./webcontents-handler.js")).default;
+
+interface MockWebContents {
+    setWindowOpenHandler: Mock;
+    on: Mock;
+    send: Mock;
+    copyImageAt: Mock;
+    session: { on: Mock };
+    handlers: Record<string, (...args: unknown[]) => void>;
+    sessionHandlers: Record<string, (...args: unknown[]) => void>;
+}
+
+function makeWebContents(): MockWebContents {
+    const handlers: Record<string, (...args: unknown[]) => void> = {};
+    const sessionHandlers: Record<string, (...args: unknown[]) => void> = {};
+    return {
+        setWindowOpenHandler: vi.fn(),
+        on: vi.fn((ev: string, cb: (...args: unknown[]) => void): void => {
+            handlers[ev] = cb;
+        }),
+        send: vi.fn(),
+        copyImageAt: vi.fn(),
+        session: {
+            on: vi.fn((ev: string, cb: (...args: unknown[]) => void): void => {
+                sessionHandlers[ev] = cb;
+            }),
+        },
+        handlers,
+        sessionHandlers,
+    };
+}
+
+interface MockDownloadItem {
+    once: (ev: string, cb: (...args: unknown[]) => void) => void;
+    getFilename: () => string;
+    getSavePath: () => string;
+    setSaveDialogOptions: Mock;
+    doneHandlers: Record<string, (...args: unknown[]) => void>;
+}
+
+function makeDownloadItem(savePath: string): MockDownloadItem {
+    const doneHandlers: Record<string, (...args: unknown[]) => void> = {};
+    return {
+        once: (ev: string, cb: (...args: unknown[]) => void): void => {
+            doneHandlers[ev] = cb;
+        },
+        getFilename: (): string => savePath.split("/").pop()!,
+        getSavePath: (): string => savePath,
+        setSaveDialogOptions: vi.fn(),
+        doneHandlers,
+    };
+}
+
+/**
+ * Drives the real will-download → done("completed") flow so the download is registered the way it is
+ * in production, and returns the id the handler assigned to it.
+ */
+function completeDownload(wc: MockWebContents, savePath: string): number {
+    const item = makeDownloadItem(savePath);
+    wc.sessionHandlers["will-download"]({}, item);
+    item.doneHandlers["done"]({}, "completed");
+    const completed = wc.send.mock.calls.find((c) => c[0] === "userDownloadCompleted");
+    return (completed![1] as { id: number }).id;
+}
+
+describe("userDownloadAction handler", () => {
+    let wc: MockWebContents;
+
+    beforeEach(() => {
+        vi.clearAllMocks();
+        wc = makeWebContents();
+        registerWebContentsHandlers(wc as unknown as WebContents);
+    });
+
+    it("opens the file when the user clicks Open on a known download", async () => {
+        vi.mocked(shell.openPath).mockResolvedValue("");
+        const id = completeDownload(wc, "/tmp/file.pdf");
+
+        await ipcHandlers["userDownloadAction"]({}, { id, open: true });
+
+        expect(shell.openPath).toHaveBeenCalledWith("/tmp/file.pdf");
+        expect(dialog.showMessageBox).not.toHaveBeenCalled();
+    });
+
+    it("shows the underlying error when the open fails, rather than failing silently", async () => {
+        vi.mocked(shell.openPath).mockResolvedValue("LSOpenURLsWithRole failed");
+        const id = completeDownload(wc, "/tmp/file.pdf");
+
+        await ipcHandlers["userDownloadAction"]({}, { id, open: true });
+
+        expect(shell.openPath).toHaveBeenCalledWith("/tmp/file.pdf");
+        expect(dialog.showMessageBox).toHaveBeenCalledWith(
+            expect.objectContaining({ type: "error", detail: "LSOpenURLsWithRole failed" }),
+        );
+    });
+
+    it("does not open anything on a plain dismiss", async () => {
+        const id = completeDownload(wc, "/tmp/file.pdf");
+
+        await ipcHandlers["userDownloadAction"]({}, { id, open: false });
+
+        expect(shell.openPath).not.toHaveBeenCalled();
+    });
+
+    it("removes the entry so a repeated open is a no-op", async () => {
+        vi.mocked(shell.openPath).mockResolvedValue("");
+        const id = completeDownload(wc, "/tmp/file.pdf");
+
+        await ipcHandlers["userDownloadAction"]({}, { id, open: true });
+        vi.mocked(shell.openPath).mockClear();
+        await ipcHandlers["userDownloadAction"]({}, { id, open: true });
+
+        expect(shell.openPath).not.toHaveBeenCalled();
+    });
+});
+
+describe("save dialog filters", () => {
+    let wc: MockWebContents;
+
+    beforeEach(() => {
+        vi.clearAllMocks();
+        menus.length = 0;
+        wc = makeWebContents();
+        registerWebContentsHandlers(wc as unknown as WebContents);
+    });
+
+    it("names a download's own file type, so renaming it does not strip the extension", () => {
+        const item = makeDownloadItem("/tmp/photo.jpg");
+
+        wc.sessionHandlers["will-download"]({}, item);
+
+        expect(item.setSaveDialogOptions).toHaveBeenCalledWith({
+            filters: [expect.objectContaining({ extensions: ["jpg"] }), expect.objectContaining({ extensions: ["*"] })],
+        });
+    });
+
+    it("leaves the dialog alone for a download which has no extension to preserve", () => {
+        const item = makeDownloadItem("/tmp/archive");
+
+        wc.sessionHandlers["will-download"]({}, item);
+
+        expect(item.setSaveDialogOptions).not.toHaveBeenCalled();
+    });
+
+    it("names the file type when saving an image from the context menu too", async () => {
+        vi.mocked(dialog.showSaveDialog).mockResolvedValue({ canceled: false, filePath: "/tmp/renamed.jpg" });
+
+        wc.handlers["context-menu"](
+            { preventDefault: vi.fn() },
+            { srcURL: "https://example.org/photo.jpg", hasImageContents: true, suggestedFilename: "photo.jpg" },
+        );
+        const saveAs = menus[0].items.find((item) => item.label === "right_click_menu|save_image_as");
+        await saveAs!.click!();
+
+        expect(dialog.showSaveDialog).toHaveBeenCalledWith(
+            expect.objectContaining({
+                defaultPath: "photo.jpg",
+                filters: [
+                    expect.objectContaining({ extensions: ["jpg"] }),
+                    expect.objectContaining({ extensions: ["*"] }),
+                ],
+            }),
+        );
+    });
+});
diff --git a/apps/desktop/src/webcontents-handler.ts b/apps/desktop/src/webcontents-handler.ts
index 78dbfd791b..15dfdcfd84 100644
--- a/apps/desktop/src/webcontents-handler.ts
+++ b/apps/desktop/src/webcontents-handler.ts
@@ -7,31 +7,51 @@ Please see LICENSE files in the repository root for full details.
 
 import {
     clipboard,
-    nativeImage,
     Menu,
     MenuItem,
     shell,
     dialog,
     ipcMain,
-    type NativeImage,
     type WebContents,
     type ContextMenuParams,
     type DownloadItem,
+    type FileFilter,
     type MenuItemConstructorOptions,
     type IpcMainEvent,
     type Event,
 } from "electron";
 import url from "node:url";
-import fs from "node:fs";
-import { pipeline } from "node:stream/promises";
 import path from "node:path";
 
 import { _t } from "./language-helper.js";
+import { saveImageToFile } from "./save-image.js";
+import { getConfig } from "./config.js";
 
 const MAILTO_PREFIX = "mailto:";
 
 const PERMITTED_URL_SCHEMES: string[] = ["http:", "https:", MAILTO_PREFIX];
 
+/**
+ * Work out the filters a save dialog should offer so that a file keeps its own extension.
+ *
+ * A dialog which only offers "All Files" lets someone replace "photo.jpg" with "photo" and end up
+ * with a file the shell no longer knows how to open — the extension is simply gone. Naming the
+ * file's own type first means the dialog puts the extension back, which is what a browser already
+ * does for the same download.
+ *
+ * @param fileName - The name being suggested to the user, which may carry no extension at all.
+ * @returns Filters to pass to a save dialog, or undefined when there is no extension to preserve.
+ */
+function saveDialogFilters(fileName: string): FileFilter[] | undefined {
+    // extname() keeps the leading dot, and returns an empty string for a name which has none.
+    const extension = path.extname(fileName).slice(1);
+    if (!extension) return undefined;
+    return [
+        { name: _t("save_dialog|named_file_type", { extension: extension.toUpperCase() }), extensions: [extension] },
+        { name: _t("save_dialog|all_files"), extensions: ["*"] },
+    ];
+}
+
 function safeOpenURL(target: string): void {
     // openExternal passes the target to open/start/xdg-open,
     // so put fairly stringent limits on what can be opened
@@ -56,26 +76,13 @@ function onWindowOrNavigate(ev: Event, target: string): void {
     safeOpenURL(target);
 }
 
-function writeNativeImage(filePath: string, img: NativeImage): Promise<void> {
-    switch (filePath.split(".").pop()?.toLowerCase()) {
-        case "jpg":
-        case "jpeg":
-            return fs.promises.writeFile(filePath, img.toJPEG(100));
-        case "bmp":
-            return fs.promises.writeFile(filePath, img.toBitmap());
-        case "png":
-        default:
-            return fs.promises.writeFile(filePath, img.toPNG());
-    }
-}
-
 function onLinkContextMenu(ev: Event, params: ContextMenuParams, webContents: WebContents): void {
     let url = params.linkURL || params.srcURL;
 
     if (url.startsWith("vector://vector/webapp")) {
         // Avoid showing a context menu for app icons
         if (params.hasImageContents) return;
-        const baseUrl = vectorConfig.web_base_url ?? "https://app.element.io/";
+        const baseUrl = getConfig().web_base_url;
         // Rewrite URL so that it can be used outside the app
         url = baseUrl + url.substring(23);
     }
@@ -144,19 +151,13 @@ function onLinkContextMenu(ev: Event, params: ContextMenuParams, webContents: We
                     const targetFileName = params.suggestedFilename || params.altText || "image.png";
                     const { filePath } = await dialog.showSaveDialog({
                         defaultPath: targetFileName,
+                        filters: saveDialogFilters(targetFileName),
                     });
 
                     if (!filePath) return; // user cancelled dialog
 
                     try {
-                        if (url.startsWith("data:")) {
-                            await writeNativeImage(filePath, nativeImage.createFromDataURL(url));
-                        } else {
-                            const resp = await fetch(url);
-                            if (!resp.ok) throw new Error(`unexpected response ${resp.statusText}`);
-                            if (!resp.body) throw new Error(`unexpected response has no body ${resp.statusText}`);
-                            await pipeline(resp.body, fs.createWriteStream(filePath));
-                        }
+                        await saveImageToFile(url, filePath, webContents.session);
                     } catch (err) {
                         console.error(err);
                         void dialog.showMessageBox({
@@ -265,12 +266,22 @@ function onEditableContextMenu(ev: Event, params: ContextMenuParams, webContents
 
 let userDownloadIndex = 0;
 const userDownloadMap = new Map<number, string>(); // Map from id to path
-ipcMain.on("userDownloadAction", function (ev: IpcMainEvent, { id, open = false }) {
+ipcMain.on("userDownloadAction", async function (ev: IpcMainEvent, { id, open = false }) {
     const path = userDownloadMap.get(id);
-    if (open && path) {
-        void shell.openPath(path);
-    }
     userDownloadMap.delete(id);
+    if (open && path) {
+        // openPath resolves to a non-empty error string on failure, an empty one on success.
+        const error = await shell.openPath(path);
+        if (error) {
+            console.error(`Failed to open downloaded file ${path}: ${error}`);
+            void dialog.showMessageBox({
+                type: "error",
+                title: _t("download|unable_to_open_title"),
+                message: _t("download|unable_to_open_description"),
+                detail: error,
+            });
+        }
+    }
 });
 
 export default (webContents: WebContents): void => {
@@ -295,6 +306,11 @@ export default (webContents: WebContents): void => {
     });
 
     webContents.session.on("will-download", (event: Event, item: DownloadItem): void => {
+        // Electron only offers "All Files" unless it is told otherwise, so say what this download is
+        // before it puts the save dialog up.
+        const filters = saveDialogFilters(item.getFilename());
+        if (filters) item.setSaveDialogOptions({ filters });
+
         item.once("done", (event, state) => {
             if (state === "completed") {
                 const savePath = item.getSavePath();
diff --git a/apps/desktop/tsconfig.node.json b/apps/desktop/tsconfig.node.json
index c9de5ead8d..ff4455db14 100644
--- a/apps/desktop/tsconfig.node.json
+++ b/apps/desktop/tsconfig.node.json
@@ -4,6 +4,7 @@
         "module": "nodenext",
         "moduleResolution": "NodeNext",
         "target": "es2022",
+        "lib": ["es2024"],
         "sourceMap": false,
         "typeRoots": [],
         "types": [],
diff --git a/apps/desktop/vitest.config.ts b/apps/desktop/vitest.config.ts
index e9572047a0..f0fd2c96e6 100644
--- a/apps/desktop/vitest.config.ts
+++ b/apps/desktop/vitest.config.ts
@@ -5,19 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import { defineConfig, mergeConfig } from "vitest/config";
-import baseConfig from "@element-hq/vite-common/vite.config.js";
+import { defineProject } from "vitest/config";
 
-export default mergeConfig(
-    baseConfig,
-    defineConfig({
-        test: {
-            coverage: {
-                // The coverage report currently chokes on this file as it doesn't process it as TypeScript
-                exclude: ["src/preload.cts"],
-            },
-            include: ["src/**/*.test.ts"],
-        },
-    }),
-    true,
-);
+export default defineProject({
+    test: {
+        include: ["src/**/*.test.ts"],
+        environment: "node",
+        pool: "threads",
+        globals: false,
+    },
+});
diff --git a/apps/web/.eslintignore b/apps/web/.eslintignore
deleted file mode 100644
index 8c739b4d77..0000000000
--- a/apps/web/.eslintignore
+++ /dev/null
@@ -1,18 +0,0 @@
-src/vector/modernizr.cjs
-test/end-to-end-tests/node_modules/
-test/end-to-end-tests/element/
-test/end-to-end-tests/synapse/
-test/end-to-end-tests/lib/
-# Legacy skinning file that some people might still have
-src/component-index.js
-# Auto-generated file
-src/modules.ts
-src/modules.js
-# Test result files
-/playwright/test-results/
-/playwright/html-report/
-
-# Shared components generated files
-/packages/shared-components/dist/
-/packages/shared-components/src/i18n/i18nKeys.d.ts
-/packages/shared-components/typedoc/
diff --git a/apps/web/.eslintrc.cjs b/apps/web/.eslintrc.cjs
deleted file mode 100644
index a5cc00f80b..0000000000
--- a/apps/web/.eslintrc.cjs
+++ /dev/null
@@ -1,347 +0,0 @@
-/*
-Copyright 2025 Element Creations 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.
-*/
-
-module.exports = {
-    plugins: ["matrix-org", "eslint-plugin-react-compiler"],
-    extends: ["plugin:matrix-org/babel", "plugin:matrix-org/react", "plugin:matrix-org/a11y"],
-    parserOptions: {
-        project: ["./tsconfig.json"],
-        tsconfigRootDir: __dirname,
-    },
-    env: {
-        browser: true,
-        node: true,
-    },
-    globals: {
-        LANGUAGES_FILE: "readonly",
-    },
-    rules: {
-        // Things we do that break the ideal style
-        "no-constant-condition": "off",
-        "prefer-promise-reject-errors": "off",
-        "no-async-promise-executor": "off",
-        "no-extra-boolean-cast": "off",
-
-        // Bind or arrow functions in props causes performance issues (but we
-        // currently use them in some places).
-        // It's disabled here, but we should using it sparingly.
-        "react/jsx-no-bind": "off",
-        "react/jsx-key": ["error"],
-
-        "no-restricted-properties": [
-            "error",
-            ...buildRestrictedPropertiesOptions(
-                ["window.innerHeight", "window.innerWidth", "window.visualViewport"],
-                "Use UIStore to access window dimensions instead.",
-            ),
-            ...buildRestrictedPropertiesOptions(
-                ["React.forwardRef", "*.forwardRef", "forwardRef"],
-                "Use ref props instead.",
-            ),
-            ...buildRestrictedPropertiesOptions(
-                ["*.mxcUrlToHttp", "*.getHttpUriForMxc"],
-                "Use Media helper instead to centralise access for customisation.",
-            ),
-            ...buildRestrictedPropertiesOptions(["window.setImmediate"], "Use setTimeout instead."),
-        ],
-        "no-restricted-globals": [
-            "error",
-            {
-                name: "setImmediate",
-                message: "Use setTimeout instead.",
-            },
-            {
-                name: "Buffer",
-                message: "Buffer is not available in the web.",
-            },
-        ],
-
-        "import/no-duplicates": ["error"],
-        // Ban matrix-js-sdk/src imports in favour of matrix-js-sdk/src/matrix imports to prevent unleashing hell.
-        // Ban compound-design-tokens raw svg imports in favour of their React component counterparts
-        "no-restricted-imports": [
-            "error",
-            {
-                paths: [
-                    {
-                        name: "react",
-                        importNames: ["forwardRef"],
-                        message: "Use ref props instead.",
-                    },
-                    {
-                        name: "@testing-library/react",
-                        message: "Please use jest-matrix-react instead",
-                    },
-                    {
-                        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",
-                    },
-                    {
-                        name: "emojibase-regex",
-                        message:
-                            "This regex doesn't actually test for emoji. See the docs at https://emojibase.dev/docs/regex/ and prefer our own EMOJI_REGEX from HtmlUtils.",
-                    },
-                ],
-                patterns: [
-                    {
-                        group: [
-                            "matrix-js-sdk/src/**",
-                            "!matrix-js-sdk/src/matrix",
-                            "!matrix-js-sdk/src/crypto-api",
-                            "!matrix-js-sdk/src/types",
-                            "!matrix-js-sdk/src/testing",
-                            "!matrix-js-sdk/src/utils/**",
-                            "matrix-js-sdk/src/utils/internal/**",
-                            "matrix-js-sdk/lib",
-                            "matrix-js-sdk/lib/",
-                            "matrix-js-sdk/lib/**",
-                            // XXX: Temporarily allow these as they are not available via the main export
-                            "!matrix-js-sdk/src/logger",
-                            "!matrix-js-sdk/src/errors",
-                            "!matrix-js-sdk/src/utils",
-                            "!matrix-js-sdk/src/version-support",
-                            "!matrix-js-sdk/src/randomstring",
-                            "!matrix-js-sdk/src/sliding-sync",
-                            "!matrix-js-sdk/src/browser-index",
-                            "!matrix-js-sdk/src/feature",
-                            "!matrix-js-sdk/src/NamespacedValue",
-                            "!matrix-js-sdk/src/ReEmitter",
-                            "!matrix-js-sdk/src/event-mapper",
-                            "!matrix-js-sdk/src/interactive-auth",
-                            "!matrix-js-sdk/src/secret-storage",
-                            "!matrix-js-sdk/src/room-hierarchy",
-                            "!matrix-js-sdk/src/rendezvous",
-                            "!matrix-js-sdk/src/indexeddb-worker",
-                            "!matrix-js-sdk/src/pushprocessor",
-                            "!matrix-js-sdk/src/extensible_events_v1",
-                            "!matrix-js-sdk/src/extensible_events_v1/PollStartEvent",
-                            "!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/oidc",
-                            "!matrix-js-sdk/src/oidc/discovery",
-                            "!matrix-js-sdk/src/oidc/authorize",
-                            "!matrix-js-sdk/src/oidc/validate",
-                            "!matrix-js-sdk/src/oidc/error",
-                            "!matrix-js-sdk/src/oidc/register",
-                            "!matrix-js-sdk/src/webrtc",
-                            "!matrix-js-sdk/src/webrtc/call",
-                            "!matrix-js-sdk/src/webrtc/callFeed",
-                            "!matrix-js-sdk/src/webrtc/mediaHandler",
-                            "!matrix-js-sdk/src/webrtc/callEventTypes",
-                            "!matrix-js-sdk/src/webrtc/callEventHandler",
-                            "!matrix-js-sdk/src/webrtc/groupCallEventHandler",
-                            "!matrix-js-sdk/src/models",
-                            "!matrix-js-sdk/src/models/read-receipt",
-                            "!matrix-js-sdk/src/models/relations-container",
-                            "!matrix-js-sdk/src/models/related-relations",
-                            "!matrix-js-sdk/src/matrixrtc",
-                        ],
-                        message: "Please use matrix-js-sdk/src/matrix instead",
-                    },
-                    {
-                        group: ["emojibase-regex/emoji*"],
-                        message:
-                            "This regex doesn't actually test for emoji. See the docs at https://emojibase.dev/docs/regex/ and prefer our own EMOJI_REGEX from HtmlUtils.",
-                    },
-                    {
-                        group: ["@vector-im/compound-design-tokens/icons/*"],
-                        message: "Please use @vector-im/compound-design-tokens/assets/web/icons/* instead",
-                    },
-                    {
-                        group: ["**/packages/shared-components/**", "../packages/shared-components/**"],
-                        message: "Please use @element-hq/web-shared-components",
-                    },
-                ],
-            },
-        ],
-
-        // There are too many a11y violations to fix at once
-        // Turn violated rules off until they are fixed
-        "jsx-a11y/aria-activedescendant-has-tabindex": "off",
-        "jsx-a11y/click-events-have-key-events": "off",
-        "jsx-a11y/interactive-supports-focus": "off",
-        "jsx-a11y/media-has-caption": "off",
-        "jsx-a11y/mouse-events-have-key-events": "off",
-        "jsx-a11y/no-autofocus": "off",
-        "jsx-a11y/no-noninteractive-element-interactions": "off",
-        "jsx-a11y/no-noninteractive-element-to-interactive-role": "off",
-        "jsx-a11y/no-noninteractive-tabindex": "off",
-        "jsx-a11y/no-static-element-interactions": "off",
-        "jsx-a11y/role-supports-aria-props": "off",
-
-        "matrix-org/require-copyright-header": "error",
-
-        "react-compiler/react-compiler": "error",
-    },
-    overrides: [
-        {
-            files: ["src/**/*.{ts,tsx}", "test/**/*.{ts,tsx}", "playwright/**/*.ts", "*.ts"],
-            extends: ["plugin:matrix-org/typescript", "plugin:matrix-org/react"],
-            rules: {
-                "@typescript-eslint/unbound-method": ["error", { ignoreStatic: true }],
-                "@typescript-eslint/explicit-function-return-type": [
-                    "error",
-                    {
-                        allowExpressions: true,
-                    },
-                ],
-
-                // Things we do that break the ideal style
-                "prefer-promise-reject-errors": "off",
-                "no-extra-boolean-cast": "off",
-
-                // Remove Babel things manually due to override limitations
-                "@babel/no-invalid-this": ["off"],
-
-                // We're okay being explicit at the moment
-                "@typescript-eslint/no-empty-interface": "off",
-                // We disable this while we're transitioning
-                "@typescript-eslint/no-explicit-any": "off",
-                // We'd rather not do this but we do
-                "@typescript-eslint/ban-ts-comment": "off",
-                // We're okay with assertion errors when we ask for them
-                "@typescript-eslint/no-non-null-assertion": "off",
-                "@typescript-eslint/no-empty-object-type": [
-                    "error",
-                    {
-                        // We do this sometimes to brand interfaces
-                        allowInterfaces: "with-single-extends",
-                    },
-                ],
-            },
-        },
-        {
-            files: ["test/**/*.{ts,tsx}", "playwright/**/*.ts"],
-            extends: ["plugin:matrix-org/jest"],
-            rules: {
-                // We don't need super strict typing in test utilities
-                "@typescript-eslint/explicit-function-return-type": "off",
-                "@typescript-eslint/explicit-member-accessibility": "off",
-                "@typescript-eslint/no-empty-object-type": "off",
-                "@typescript-eslint/unbound-method": "off",
-
-                // Jest/Playwright specific
-
-                // Disabled tests are a reality for now but as soon as all of the xits are
-                // eliminated, we should enforce this.
-                "jest/no-disabled-tests": "off",
-                // Also treat "oldBackendOnly" as a test function.
-                // Used in some crypto tests.
-                "jest/no-standalone-expect": [
-                    "error",
-                    {
-                        additionalTestBlockFunctions: ["beforeAll", "beforeEach", "oldBackendOnly"],
-                    },
-                ],
-
-                // These are fine in tests
-                "no-restricted-globals": "off",
-                "react-compiler/react-compiler": "off",
-            },
-        },
-        {
-            files: ["playwright/**/*.ts"],
-            parserOptions: {
-                project: ["./playwright/tsconfig.json"],
-            },
-            rules: {
-                "react-hooks/rules-of-hooks": ["off"],
-                "@typescript-eslint/no-floating-promises": ["error"],
-            },
-        },
-        {
-            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: {
-            version: "detect",
-        },
-    },
-};
-
-function buildRestrictedPropertiesOptions(properties, message) {
-    return properties.map((prop) => {
-        let [object, property] = prop.split(".");
-        if (object === "*") {
-            object = undefined;
-        }
-        return {
-            object,
-            property,
-            message,
-        };
-    });
-}
diff --git a/apps/web/.lintstagedrc b/apps/web/.lintstagedrc
index eaabd3138b..ae8a7fc7e9 100644
--- a/apps/web/.lintstagedrc
+++ b/apps/web/.lintstagedrc
@@ -1,7 +1,5 @@
 {
-    "*": "prettier --write --ignore-unknown",
-    "src/**/*.(ts|tsx)": ["eslint --fix"],
-    "scripts/**/*.(ts|tsx)": ["eslint --fix"],
-    "module_system/**/*.(ts|tsx)": ["eslint --fix"],
+    "*": "oxfmt --no-error-on-unmatched-pattern",
+    "*.{js,jsx,ts,tsx,mjs,cjs}": "oxlint --no-error-on-unmatched-pattern",
     "*.pcss": ["stylelint --fix"]
 }
diff --git a/apps/web/.stylelintrc.cjs b/apps/web/.stylelintrc.cjs
index 2ccb2abf75..4388f7919d 100644
--- a/apps/web/.stylelintrc.cjs
+++ b/apps/web/.stylelintrc.cjs
@@ -1,3 +1,10 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
 module.exports = {
     extends: ["stylelint-config-standard"],
     customSyntax: "postcss-scss",
@@ -62,10 +69,10 @@ module.exports = {
                     { 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",
+                    "./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",
                 ],
             },
         ],
diff --git a/apps/web/@types/url-preview.ts b/apps/web/@types/url-preview.ts
new file mode 100644
index 0000000000..761f4c33bc
--- /dev/null
+++ b/apps/web/@types/url-preview.ts
@@ -0,0 +1,40 @@
+/*
+ * Copyright 2026 Element Creations 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 EncryptedFile,
+    type RoomMessageEventContent as SdkRoomMessageEventContent,
+} from "matrix-js-sdk/src/types";
+
+/**
+ * Bundled URL previews in MSC-4095
+ *
+ * @see https://github.com/matrix-org/matrix-spec-proposals/pull/4095
+ */
+interface UnstableBundledUrlPreviews {
+    "com.beeper.linkpreviews"?: UnstableBundledUrlPreviewSingle[];
+}
+
+/**
+ * Single item in bundled URL previews in MSC4095
+ *
+ * @see https://github.com/matrix-org/matrix-spec-proposals/pull/4095
+ */
+export interface UnstableBundledUrlPreviewSingle {
+    "matched_url": string;
+    "beeper:image:encryption"?: EncryptedFile;
+    "matrix:image:size"?: number;
+    "og:image"?: string;
+    "og:url"?: string;
+    "og:image:width"?: number;
+    "og:image:height"?: number;
+    "og:image:type"?: string;
+    "og:title"?: string;
+    "og:description"?: string;
+}
+
+export type RoomMessageEventContent = SdkRoomMessageEventContent & UnstableBundledUrlPreviews;
diff --git a/apps/web/@types/webpack-version-file-plugin.d.ts b/apps/web/@types/webpack-version-file-plugin.d.ts
index 7869805f83..95432bdb1c 100644
--- a/apps/web/@types/webpack-version-file-plugin.d.ts
+++ b/apps/web/@types/webpack-version-file-plugin.d.ts
@@ -13,6 +13,7 @@ declare module "webpack-version-file-plugin" {
         extras?: Record<string, string>;
     }
 
+    // oxlint-disable-next-line typescript/no-extraneous-class
     export default class VersionFilePlugin {
         public constructor(opts: Opts);
     }
diff --git a/apps/web/Dockerfile b/apps/web/Dockerfile
index 8c0049fb07..67f7bd8450 100644
--- a/apps/web/Dockerfile
+++ b/apps/web/Dockerfile
@@ -1,8 +1,14 @@
-# syntax=docker.io/docker/dockerfile:1.23-labs@sha256:7eca9451d94f9b8ad22e44988b92d595d3e4d65163794237949a8c3413fbed5d
+# syntax=docker.io/docker/dockerfile:1.25-labs@sha256:4426b5e269e36911b94fb79cf67f1fd7155ef11b2bbc8ab23cbfcbc97130efe9
 # Context must be the root of the monorepo
 
+# PNPM source
+FROM --platform=$BUILDPLATFORM ghcr.io/pnpm/pnpm:11.10.0@sha256:9a6eb06d5f861d830fe27d85a91415e60527fa45ec45b52ee43c92a8aaf3bf8a AS pnpm
+
 # Builder
-FROM --platform=$BUILDPLATFORM node:24-bullseye@sha256:2c00db8852d28215c6203fafe9f05046acd9fdd48bcfc42467f4cba39b42dab4 AS builder
+FROM --platform=$BUILDPLATFORM node:24-bullseye@sha256:f7250178a8fcdde6e7340c7f3945e0c5cbcc10bedddc6bcf61edb39ce8f390d2 AS builder
+
+COPY --from=pnpm /opt/pnpm /opt/pnpm
+RUN ln -s /opt/pnpm/pnpm /usr/local/bin/pnpm
 
 # Support custom branch of the js-sdk. This also helps us build images of element-web develop.
 ARG USE_CUSTOM_SDKS=false
@@ -13,9 +19,8 @@ WORKDIR /src
 
 # Install dependencies
 COPY --parents package.json pnpm-lock.yaml pnpm-workspace.yaml patches scripts **/package.json /src/
-RUN corepack enable
-RUN --mount=type=bind,source=.git,target=/src/.git /src/scripts/docker-link-repos.sh
 RUN pnpm install --frozen-lockfile
+RUN --mount=type=bind,source=.git,target=/src/.git /src/scripts/docker-link-repos.sh
 
 # Build
 COPY --link --exclude=.git --exclude=apps/web/docker . /src
@@ -25,7 +30,7 @@ RUN --mount=type=bind,source=.git,target=/src/.git /src/scripts/docker-package.s
 RUN cp /src/apps/web/config.sample.json /src/apps/web/webapp/config.json
 
 # App
-FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:1df9285ed5bdaaad9ca503ac608e12fe1ba93136bb249fe976477989c1db4ede
+FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:22f839c5fb4007dc24d203a170a9e03fc185d660bfefc34ac6823a7aef085cbc AS element_web
 
 # Need root user to install packages & manipulate the usr directory
 USER root
@@ -50,3 +55,39 @@ USER nginx
 ENV ELEMENT_WEB_PORT=80
 
 HEALTHCHECK --start-period=5s CMD wget -q --spider http://localhost:$ELEMENT_WEB_PORT/config.json
+
+# Modules are consumed as prebuilt release artifacts rather than built from source.
+# Each module is pinned to a version and the sha256 of its release archive.
+FROM --platform=$BUILDPLATFORM alpine:3.22@sha256:14358309a308569c32bdc37e2e0e9694be33a9d99e68afb0f5ff33cc1f695dce AS modules
+
+ARG MODULE_BANNER_VERSION=v1.0.0
+ADD --checksum=sha256:8aabd9d43d40ffb499050246f7968323a08895b6f53bd48a71d4c7f0daf96634 \
+    https://github.com/element-hq/element-web/releases/download/module%2Fbanner%2F${MODULE_BANNER_VERSION}/banner-${MODULE_BANNER_VERSION}.zip \
+    /tmp/modules/banner.zip
+
+ARG MODULE_RESTRICTED_GUESTS_VERSION=v1.0.0
+ADD --checksum=sha256:d883327469ae78504a4e0aa8ebf2bbf525a9407ab10430ef42cf9338cc0821bb \
+    https://github.com/element-hq/element-web/releases/download/module%2Frestricted-guests%2F${MODULE_RESTRICTED_GUESTS_VERSION}/restricted-guests-${MODULE_RESTRICTED_GUESTS_VERSION}.zip \
+    /tmp/modules/restricted-guests.zip
+
+ARG MODULE_WIDGET_LIFECYCLE_VERSION=v1.0.0
+ADD --checksum=sha256:125e5a7a045e3cebee2c82ca30a477ebc8e31ee3bd139ae46e177612c25cc988 \
+    https://github.com/element-hq/element-web/releases/download/module%2Fwidget-lifecycle%2F${MODULE_WIDGET_LIFECYCLE_VERSION}/widget-lifecycle-${MODULE_WIDGET_LIFECYCLE_VERSION}.zip \
+    /tmp/modules/widget-lifecycle.zip
+
+ARG MODULE_WIDGET_TOGGLES_VERSION=v1.0.0
+ADD --checksum=sha256:27b0d0d9d803c41855aa94f02493ce214321f8d0c65af500d85875a3ef20efb0 \
+    https://github.com/element-hq/element-web/releases/download/module%2Fwidget-toggles%2F${MODULE_WIDGET_TOGGLES_VERSION}/widget-toggles-${MODULE_WIDGET_TOGGLES_VERSION}.zip \
+    /tmp/modules/widget-toggles.zip
+
+# Unpack the modules
+RUN apk add --no-cache unzip && \
+    for archive in /tmp/modules/*.zip; do \
+        name=$(basename "$archive" .zip); \
+        mkdir -p "/modules/$name" && unzip -q "$archive" -d "/modules/$name"; \
+    done
+
+# Target with element_web + `/modules` copied in
+FROM element_web AS element_web_modules
+
+COPY --from=modules /modules /modules
diff --git a/apps/web/I18nWebpackPlugin.ts b/apps/web/I18nWebpackPlugin.ts
index 732f03dda1..10649e47f6 100644
--- a/apps/web/I18nWebpackPlugin.ts
+++ b/apps/web/I18nWebpackPlugin.ts
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 import webpack from "webpack";
 import * as fs from "node:fs/promises";
-import * as path from "node:path";
+import path from "node:path";
 import _ from "lodash";
 import { type Translations } from "matrix-web-i18n";
 
@@ -62,7 +62,7 @@ export class I18nWebpackPlugin {
                     }
 
                     const primaryPath = paths[0];
-                    const includeLangs = [...new Set([...(await fs.readdir(primaryPath))])]
+                    const includeLangs = [...new Set(await fs.readdir(primaryPath))]
                         .filter((fn) => fn.endsWith(".json"))
                         .map((f) => f.slice(0, -5));
 
diff --git a/apps/web/README.md b/apps/web/README.md
index c0683d7017..c4b84a1268 100644
--- a/apps/web/README.md
+++ b/apps/web/README.md
@@ -126,5 +126,5 @@ Element Web supports a module system that allows you to extend or modify functio
 
 Modules are extensions that can add or modify Element Web's functionality. They are:
 
-- Built using the [`@element-hq/element-web-module-api`](https://github.com/element-hq/element-modules/tree/main/packages/element-web-module-api)
+- Built using the [`@element-hq/element-web-module-api`](https://github.com/element-hq/element-web/tree/develop/packages/module-api)
 - Loaded in EW via [config.json](../../docs/config.md#modules)
diff --git a/apps/web/__mocks__/cssMock.js b/apps/web/__mocks__/cssMock.js
index 9b5d9b3476..a85e0e6eb1 100644
--- a/apps/web/__mocks__/cssMock.js
+++ b/apps/web/__mocks__/cssMock.js
@@ -1 +1,8 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
 module.exports = "css-file-stub";
diff --git a/apps/web/__mocks__/empty.js b/apps/web/__mocks__/empty.js
index 51fb4fe937..ef57358c34 100644
--- a/apps/web/__mocks__/empty.js
+++ b/apps/web/__mocks__/empty.js
@@ -1,2 +1,9 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
 // Yes, this is empty.
 module.exports = {};
diff --git a/apps/web/__mocks__/imageMock.js b/apps/web/__mocks__/imageMock.js
index 474ac702b4..2d381a609d 100644
--- a/apps/web/__mocks__/imageMock.js
+++ b/apps/web/__mocks__/imageMock.js
@@ -1 +1,8 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
 module.exports = "image-file-stub";
diff --git a/apps/web/__mocks__/languages.json b/apps/web/__mocks__/languages.json
deleted file mode 100644
index 35a400808b..0000000000
--- a/apps/web/__mocks__/languages.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-    "en": "en_EN.json",
-    "en-us": "en_US.json"
-}
diff --git a/apps/web/__mocks__/maplibre-gl.js b/apps/web/__mocks__/maplibre-gl.js
index 475648e774..a76c529e2f 100644
--- a/apps/web/__mocks__/maplibre-gl.js
+++ b/apps/web/__mocks__/maplibre-gl.js
@@ -6,7 +6,7 @@ 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.
 */
 
-const EventEmitter = require("events");
+const EventEmitter = require("node:events");
 const { LngLat, NavigationControl, LngLatBounds } = require("maplibre-gl");
 
 class MockMap extends EventEmitter {
diff --git a/apps/web/__mocks__/svg-react.js b/apps/web/__mocks__/svg-react.js
new file mode 100644
index 0000000000..16ec267a35
--- /dev/null
+++ b/apps/web/__mocks__/svg-react.js
@@ -0,0 +1,8 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+export default "div";
diff --git a/apps/web/__mocks__/svg.js b/apps/web/__mocks__/svg.js
index ee2ab11a01..bc2b312afe 100644
--- a/apps/web/__mocks__/svg.js
+++ b/apps/web/__mocks__/svg.js
@@ -1,2 +1,8 @@
-export const Icon = "div";
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
 export default "image-file-stub";
diff --git a/apps/web/test/test-utils/oidc.ts b/apps/web/__mocks__/workerFactoryMock-jest.js
similarity index 71%
rename from apps/web/test/test-utils/oidc.ts
rename to apps/web/__mocks__/workerFactoryMock-jest.js
index c8032551b0..a6f04ce086 100644
--- a/apps/web/test/test-utils/oidc.ts
+++ b/apps/web/__mocks__/workerFactoryMock-jest.js
@@ -6,4 +6,6 @@ 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.
 */
 
-export { makeDelegatedAuthConfig, mockOpenIdConfiguration } from "matrix-js-sdk/src/testing";
+export default function workerFactory(options) {
+    return jest.fn;
+}
diff --git a/apps/web/__mocks__/workerFactoryMock.js b/apps/web/__mocks__/workerFactoryMock.js
index a6f04ce086..e637f835c2 100644
--- a/apps/web/__mocks__/workerFactoryMock.js
+++ b/apps/web/__mocks__/workerFactoryMock.js
@@ -6,6 +6,10 @@ 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 { vi } from "vitest";
+
 export default function workerFactory(options) {
-    return jest.fn;
+    return {
+        postMessage: vi.fn(),
+    };
 }
diff --git a/apps/web/babel.config.cjs b/apps/web/babel.config.cjs
index 58df067b79..ee3c95ccd0 100644
--- a/apps/web/babel.config.cjs
+++ b/apps/web/babel.config.cjs
@@ -1,3 +1,10 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
 module.exports = {
     sourceMaps: true,
     presets: [
diff --git a/apps/web/config.sample.json b/apps/web/config.sample.json
index 24b087f43e..44efbee7f9 100644
--- a/apps/web/config.sample.json
+++ b/apps/web/config.sample.json
@@ -42,8 +42,9 @@
         "preferred_domain": "meet.element.io"
     },
     "element_call": {
-        "url": "https://call.element.io",
-        "brand": "Element Call"
+        "brand": "Element Call",
+        "disable": false,
+        "use_exclusively": false
     },
     "map_style_url": "https://api.maptiler.com/maps/streets/style.json?key=fU3vlMsMn4Jb6dnEIFsx"
 }
diff --git a/apps/web/element.io/app/config.json b/apps/web/element.io/app/config.json
index 032712a5d8..c1e6158007 100644
--- a/apps/web/element.io/app/config.json
+++ b/apps/web/element.io/app/config.json
@@ -47,10 +47,6 @@
     },
     "features": {
         "feature_video_rooms": true,
-        "feature_group_calls": true,
         "feature_element_call_video_rooms": true
-    },
-    "element_call": {
-        "url": "https://call.element.io"
     }
 }
diff --git a/apps/web/element.io/develop/config.json b/apps/web/element.io/develop/config.json
index 2db410355c..2539a1e8f1 100644
--- a/apps/web/element.io/develop/config.json
+++ b/apps/web/element.io/develop/config.json
@@ -48,15 +48,11 @@
     "features": {
         "threadsActivityCentre": true,
         "feature_video_rooms": true,
-        "feature_group_calls": true,
         "feature_element_call_video_rooms": true
     },
     "setting_defaults": {
         "RustCrypto.staged_rollout_percent": 100,
         "Registration.mobileRegistrationHelper": true
     },
-    "element_call": {
-        "url": "https://call.element.dev"
-    },
     "map_style_url": "https://api.maptiler.com/maps/streets/style.json?key=fU3vlMsMn4Jb6dnEIFsx"
 }
diff --git a/apps/web/jest.config.ts b/apps/web/jest.config.ts
index c1a8b6ad23..83b3cf7479 100644
--- a/apps/web/jest.config.ts
+++ b/apps/web/jest.config.ts
@@ -6,10 +6,14 @@ 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 { env } from "process";
+import { env } from "node:process";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
 
 import type { Config } from "jest";
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
 const config: Config = {
     testEnvironment: "jest-fixed-jsdom",
     testEnvironmentOptions: {
@@ -27,38 +31,46 @@ const config: Config = {
     moduleNameMapper: {
         // Support CSS module
         "\\.(module.css)$": "identity-obj-proxy",
-        "\\.(css|scss|pcss)$": "<rootDir>/__mocks__/cssMock.js",
+        "\\.(css|scss|pcss)(\\?raw)?$": "<rootDir>/__mocks__/cssMock.js",
         "\\.(gif|png|ttf|woff2)$": "<rootDir>/__mocks__/imageMock.js",
         "\\.svg$": "<rootDir>/__mocks__/svg.js",
-        "\\$webapp/i18n/languages.json": "<rootDir>/__mocks__/languages.json",
-        "^react$": "<rootDir>/../../node_modules/react",
-        "^react-dom$": "<rootDir>/../../node_modules/react-dom",
-        "^matrix-js-sdk$": "<rootDir>/../../node_modules/matrix-js-sdk/src",
-        "^matrix-react-sdk$": "<rootDir>/src",
+        "\\.svg\\?react$": "<rootDir>/__mocks__/svg-react.js",
+        "^matrix-js-sdk(.*)$": "<rootDir>/node_modules/matrix-js-sdk$1",
+        "^react$": "<rootDir>/node_modules/react",
+        "^react-dom$": "<rootDir>/node_modules/react-dom",
         "decoderWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
         "decoderWorker\\.min\\.wasm": "<rootDir>/__mocks__/empty.js",
         "waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
         "context-filter-polyfill": "<rootDir>/__mocks__/empty.js",
-        "workers/(.+)Factory": "<rootDir>/__mocks__/workerFactoryMock.js",
-        "^!!raw-loader!.*": "jest-raw-loader",
+        "workers/(.+)Factory": "<rootDir>/__mocks__/workerFactoryMock-jest.js",
+        ".*\\?raw": "jest-raw-loader",
         "recorderWorkletFactory": "<rootDir>/__mocks__/empty.js",
-        "@vector-im/compound-web": "<rootDir>/../../node_modules/@vector-im/compound-web",
+        "@vector-im/compound-web": "<rootDir>/node_modules/@vector-im/compound-web",
+        "^vitest$": "<rootDir>/__mocks__/empty.js",
+        "jest-mock-vitest-adapter": "<rootDir>/test/setup/adapter.ts",
+        "test-utils-rtl": "<rootDir>/test/test-utils/jest-matrix-react.tsx",
     },
     transformIgnorePatterns: [
-        "/node_modules/(?!(mime|matrix-js-sdk|uuid|p-retry|is-network-error|react-merge-refs|is-ip|ip-regex|super-regex|function-timeout|time-span|convert-hrtime|clone-regexp|is-regexp|matrix-web-i18n|await-lock|@element-hq/web-shared-components|react-virtuoso|lodash|domutils|domhandler|domelementtype|dom-serializer|entities)).+$",
+        `${path.join(__dirname, "../..")}/node_modules/.pnpm/(?!(matrix-js-sdk|htmlparser2|mime|uuid|p-retry|is-network-error|react-merge-refs|is-ip|ip-regex|super-regex|function-timeout|time-span|convert-hrtime|clone-regexp|is-regexp|matrix-web-i18n|await-lock|@element-hq/web-shared-components|react-virtuoso|lodash|domutils|domhandler|domelementtype|dom-serializer|entities)).+$`,
     ],
     collectCoverageFrom: [
         "<rootDir>/src/**/*.{js,ts,tsx}",
-        "<rootDir>/packages/**/*.{js,ts,tsx}",
         // getSessionLock is piped into a different JS context via stringification, and the coverage functionality is
         // not available in that contest. So, turn off coverage instrumentation for it.
         "!<rootDir>/src/utils/SessionLock.ts",
         // Coverage chokes on type definition files
         "!<rootDir>/src/**/*.d.ts",
+        // Ignore vitest tests
+        "!<rootDir>/src/**/*.test.{ts,tsx}",
+        "!<rootDir>/src/test/**",
+        // Exclude mocks
+        "!<rootDir>/src/**/*-{mock,mocks}.{ts,tsx}",
     ],
-    coverageReporters: ["text-summary", "lcov"],
+    coverageReporters: ["text-summary", ["lcov", { projectRoot: "../../" }]],
     prettierPath: null,
     moduleDirectories: ["node_modules", "test/test-utils"],
+    workerIdleMemoryLimit: "512MB",
+    snapshotSerializers: ["<rootDir>/src/test/react-use-id-serializer.ts"],
 };
 
 // if we're running under GHA, enable relevant reporters
@@ -66,7 +78,6 @@ if (env["GITHUB_ACTIONS"] !== undefined) {
     config.reporters ??= [];
     config.reporters.push(["github-actions", { silent: false }]);
     config.reporters.push("summary");
-    config.reporters.push("@casualbot/jest-sonar-reporter");
 
     // if we're running against the develop branch, also enable the slow test reporter
     if (env["GITHUB_REF"] == "refs/heads/develop") {
diff --git a/apps/web/module_system/installer.ts b/apps/web/module_system/installer.ts
index e2da8eb229..b179f394ca 100644
--- a/apps/web/module_system/installer.ts
+++ b/apps/web/module_system/installer.ts
@@ -134,9 +134,9 @@ function getOptionalDepNames(pkgJsonStr: string): string[] {
 function findDepVersionInPackageJson(dep: string, pkgJsonStr: string): string {
     const pkgJson = JSON.parse(pkgJsonStr);
     const packages = {
-        ...(pkgJson["optionalDependencies"] ?? {}),
-        ...(pkgJson["devDependencies"] ?? {}),
-        ...(pkgJson["dependencies"] ?? {}),
+        ...pkgJson["optionalDependencies"],
+        ...pkgJson["devDependencies"],
+        ...pkgJson["dependencies"],
     };
     return packages[dep];
 }
diff --git a/apps/web/package.json b/apps/web/package.json
index 3e3802e918..7cd4ce2229 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.12.17",
+    "version": "1.12.26",
     "description": "Element: the future of secure communication",
     "author": "New Vector Ltd.",
     "repository": {
@@ -15,7 +15,7 @@
     "scripts": {
         "i18n": "matrix-gen-i18n src res && pnpm i18n:sort && pnpm i18n:lint",
         "i18n:sort": "matrix-sort-i18n src/i18n/strings/en_EN.json",
-        "i18n:lint": "matrix-i18n-lint && prettier --log-level=silent --write src/i18n/strings/ --ignore-path /dev/null",
+        "i18n:lint": "matrix-i18n-lint && oxfmt src/i18n/strings/",
         "i18n:diff": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && pnpm i18n && matrix-compare-i18n-files src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
         "rethemendex": "sh ./res/css/rethemendex.sh",
         "build": "nx build",
@@ -24,16 +24,16 @@
         "vendor:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js",
         "dist": "./scripts/package.sh",
         "start": "nx start",
-        "lint": "pnpm lint:types && pnpm lint:js && pnpm lint:style",
-        "lint:js": "eslint --max-warnings 0 src test playwright module_system",
-        "lint:js-fix": "eslint --fix src test playwright module_system",
+        "lint": "pnpm lint:types && pnpm lint:style",
         "lint:types": "nx lint:types",
         "lint:style": "stylelint \"res/css/**/*.pcss\"",
         "test": "nx test:unit",
+        "test:vitest": "nx test:vitest",
         "test:playwright": "nx test:playwright --",
         "test:playwright:open": "nx test:playwright -- --ui",
         "test:playwright:screenshots": "nx test:playwright:screenshots --",
         "coverage": "pnpm test --coverage",
+        "coverage:diff": "diff-cover --config-file ../../diff-cover.toml coverage/lcov.info",
         "analyse:webpack-bundles": "webpack-bundle-analyzer webpack-stats.json webapp"
     },
     "dependencies": {
@@ -43,17 +43,17 @@
         "@fontsource/fira-code": "^5",
         "@fontsource/inter": "catalog:",
         "@formatjs/intl-segmenter": "^12.0.0",
-        "@matrix-org/analytics-events": "^0.33.0",
-        "@matrix-org/emojibase-bindings": "^1.5.0",
+        "@matrix-org/analytics-events": "^0.37.0",
+        "@matrix-org/emojibase-bindings": "catalog:",
         "@matrix-org/react-sdk-module-api": "^2.4.0",
         "@sentry/browser": "^10.0.0",
         "@types/png-chunks-extract": "^1.0.2",
         "@vector-im/compound-design-tokens": "catalog:",
         "@vector-im/compound-web": "catalog:",
         "@vector-im/matrix-wysiwyg": "2.40.0",
-        "@zxcvbn-ts/core": "^3.0.4",
-        "@zxcvbn-ts/language-common": "^3.0.4",
-        "@zxcvbn-ts/language-en": "^3.0.2",
+        "@zxcvbn-ts/core": "^4.0.0",
+        "@zxcvbn-ts/language-common": "^4.0.0",
+        "@zxcvbn-ts/language-en": "^4.0.0",
         "await-lock": "^3.0.0",
         "bloom-filters": "^3.0.3",
         "blurhash": "^2.0.3",
@@ -66,30 +66,29 @@
         "domutils": "^4.0.0",
         "emojibase-regex": "^17.0.0",
         "escape-html": "^1.0.3",
+        "events": "^3.3.0",
         "file-saver": "^2.0.5",
-        "filesize": "11.0.17",
+        "filesize": "11.0.22",
         "github-markdown-css": "^5.5.1",
         "glob-to-regexp": "^0.4.1",
         "highlight.js": "^11.3.1",
         "html-entities": "^2.0.0",
         "html-react-parser": "^6.0.0",
         "is-ip": "^5.0.0",
-        "js-xxhash": "^5.0.0",
         "jsrsasign": "^11.0.0",
         "jszip": "^3.7.0",
-        "katex": "^0.16.0",
+        "katex": "^0.18.0",
         "lodash": "npm:lodash-es@4.18.1",
         "maplibre-gl": "^5.0.0",
         "matrix-encrypt-attachment": "^1.0.3",
-        "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#d19cb751da8bbdc75c19db751fff25f21761d23a",
-        "matrix-widget-api": "^1.16.1",
+        "matrix-js-sdk": "42.2.0",
+        "matrix-widget-api": "^1.18.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",
+        "pako": "^3.0.0",
         "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.372.8",
+        "posthog-js": "1.407.2",
         "qrcode": "1.5.4",
         "re-resizable": "6.11.2",
         "react": "catalog:",
@@ -101,15 +100,13 @@
         "react-transition-group": "^4.4.1",
         "rfc4648": "^1.4.0",
         "sanitize-filename": "^1.6.3",
-        "sanitize-html": "2.17.3",
+        "sanitize-html": "2.17.6",
         "tar-js": "^0.3.0",
         "ua-parser-js": "1.0.40",
         "what-input": "^5.2.10"
     },
     "devDependencies": {
         "@babel/core": "^7.12.10",
-        "@babel/eslint-parser": "^7.12.10",
-        "@babel/eslint-plugin": "^7.12.10",
         "@babel/plugin-proposal-decorators": "^7.25.9",
         "@babel/plugin-proposal-export-default-from": "^7.12.1",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
@@ -128,19 +125,18 @@
         "@sorb/threadnet-call-embedded": "0.19.2-threadnet.12",
         "@element-hq/element-web-playwright-common": "workspace:*",
         "@fetch-mock/jest": "^0.2.20",
+        "@fetch-mock/vitest": "^0.2.18",
         "@jest/globals": "^30.2.0",
         "@peculiar/webcrypto": "^1.4.3",
         "@playwright/test": "catalog:",
         "@principalstudio/html-webpack-inject-preload": "^1.2.7",
         "@sentry/webpack-plugin": "^5.0.0",
-        "@stylistic/eslint-plugin": "^5.0.0",
         "@svgr/webpack": "^8.0.0",
         "@testing-library/dom": "^10.4.0",
-        "@testing-library/jest-dom": "^6.4.8",
+        "@testing-library/jest-dom": "^7.0.0",
         "@testing-library/react": "^16.0.0",
         "@testing-library/user-event": "^14.5.2",
         "@types/commonmark": "^0.27.4",
-        "@types/content-type": "^1.1.9",
         "@types/css-tree": "^2.3.8",
         "@types/diff-match-patch": "^1.0.32",
         "@types/escape-html": "^1.0.1",
@@ -152,8 +148,7 @@
         "@types/jsrsasign": "^10.5.4",
         "@types/lodash": "^4.14.168",
         "@types/modernizr": "^3.5.3",
-        "@types/node": "22",
-        "@types/pako": "^2.0.0",
+        "@types/node": "catalog:",
         "@types/postcss-import": "^14.0.3",
         "@types/qrcode": "^1.3.5",
         "@types/react": "catalog:",
@@ -161,12 +156,12 @@
         "@types/react-dom": "catalog:",
         "@types/react-transition-group": "^4.4.0",
         "@types/sanitize-html": "2.16.1",
-        "@types/sdp-transform": "^2.4.10",
+        "@types/sdp-transform": "^3.0.0",
         "@types/semver": "^7.5.8",
         "@types/tar-js": "^0.3.5",
         "@types/ua-parser-js": "^0.7.36",
-        "@typescript-eslint/eslint-plugin": "^8.19.0",
-        "@typescript-eslint/parser": "^8.19.0",
+        "@typescript/native": "catalog:",
+        "@vitest/spy": "catalog:",
         "babel-jest": "^30.0.0",
         "babel-loader": "^10.0.0",
         "babel-plugin-jsx-remove-data-test-id": "^3.0.0",
@@ -175,21 +170,10 @@
         "css-loader": "^7.0.0",
         "css-minimizer-webpack-plugin": "^8.0.0",
         "dotenv": "^17.0.0",
-        "eslint": "8.57.1",
-        "eslint-config-google": "^0.14.0",
-        "eslint-config-prettier": "^10.0.0",
-        "eslint-plugin-deprecate": "0.9.0",
-        "eslint-plugin-import": "^2.25.4",
-        "eslint-plugin-jest": "^29.0.0",
-        "eslint-plugin-jsx-a11y": "^6.5.1",
-        "eslint-plugin-matrix-org": "^3.0.0",
-        "eslint-plugin-react": "^7.28.0",
-        "eslint-plugin-react-compiler": "^19.0.0-beta-df7b47d-20241124",
-        "eslint-plugin-react-hooks": "^7.0.0",
-        "eslint-plugin-unicorn": "^56.0.0",
         "express": "^5.0.0",
         "fake-indexeddb": "^6.0.0",
         "file-loader": "^6.0.0",
+        "happy-dom": "^20.10.2",
         "html-webpack-plugin": "^5.5.3",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^30.0.0",
@@ -202,47 +186,44 @@
         "matrix-web-i18n": "catalog:",
         "mini-css-extract-plugin": "2.10.2",
         "modernizr": "^3.12.0",
+        "oxfmt": "0.60.0",
         "playwright-core": "catalog:",
-        "postcss": "8.5.14",
+        "postcss": "8.5.25",
         "postcss-easings": "4.0.0",
         "postcss-hexrgba": "2.1.0",
         "postcss-import": "16.1.1",
         "postcss-loader": "8.2.1",
         "postcss-mixins": "12.1.2",
-        "postcss-nested": "7.0.2",
-        "postcss-preset-env": "11.2.1",
+        "postcss-nested": "8.0.1",
+        "postcss-preset-env": "11.3.2",
         "postcss-scss": "4.0.9",
         "postcss-simple-vars": "7.0.1",
-        "prettier": "3.8.3",
         "process": "^0.11.10",
-        "raw-loader": "^4.0.2",
         "semver": "^7.5.2",
+        "shared-types": "workspace:*",
         "source-map-loader": "^5.0.0",
         "stylelint": "^17.0.0",
         "stylelint-config-standard": "^40.0.0",
         "stylelint-scss": "^7.0.0",
         "stylelint-value-no-unknown-custom-properties": "^6.0.1",
         "terser-webpack-plugin": "^5.3.9",
-        "testcontainers": "^11.0.0",
-        "typescript": "catalog:",
+        "testcontainers": "^12.0.0",
+        "typescript": "catalog:ts6",
         "util": "^0.12.5",
+        "vite-plugin-svgr": "catalog:",
+        "vitest": "catalog:",
+        "vitest-canvas-mock": "^1.1.4",
         "web-streams-polyfill": "^4.0.0",
         "webpack": "^5.89.0",
         "webpack-bundle-analyzer": "^5.0.0",
         "webpack-cli": "^7.0.0",
-        "webpack-dev-server": "^5.0.0",
+        "webpack-dev-server": "^6.0.0",
         "webpack-retry-chunk-load-plugin": "^3.1.1",
         "webpack-version-file-plugin": "^0.5.0",
         "yaml": "^2.3.3"
     },
-    "@casualbot/jest-sonar-reporter": {
-        "outputDirectory": "coverage",
-        "outputName": "jest-sonar-report.xml",
-        "relativePaths": true
-    },
     "engines": {
         "node": ">=22.18"
     },
-    "packageManager": "pnpm@10.33.3+sha512.a19744364a7e248b92657a4ca5973f9354d21caf982579674b1c539f32c7420c47138ad8b1254df07aba9bc782d9b3029e3db34d5dbff974326eb74dac8ff489",
     "private": true
 }
diff --git a/apps/web/playwright/e2e/accessibility/keyboard-navigation.spec.ts b/apps/web/playwright/e2e/accessibility/keyboard-navigation.spec.ts
index a43a4e07b4..edd7b37ea8 100644
--- a/apps/web/playwright/e2e/accessibility/keyboard-navigation.spec.ts
+++ b/apps/web/playwright/e2e/accessibility/keyboard-navigation.spec.ts
@@ -6,6 +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 { rejectToast } from "@element-hq/element-web-playwright-common";
+
 import { test, expect } from "../../element-web-test";
 import { Bot } from "../../pages/bot";
 
@@ -15,7 +17,7 @@ test.describe("Landmark navigation tests", () => {
     });
 
     test("without any rooms", async ({ page, homeserver, app, user }) => {
-        await app.closeVerifyToast();
+        await rejectToast(page, "Verify this device");
 
         // sometimes the space button doesn't appear right away
         await expect(page.locator(".mx_SpaceButton_active")).toBeVisible();
@@ -63,7 +65,7 @@ test.describe("Landmark navigation tests", () => {
                 await cli.invite(bobRoom.room_id, bob);
             },
             {
-                bob: bob.credentials.userId,
+                bob: bob.credentials!.userId,
             },
         );
 
@@ -116,11 +118,11 @@ test.describe("Landmark navigation tests", () => {
                 await cli.invite(bobRoom.room_id, bob);
             },
             {
-                bob: bob.credentials.userId,
+                bob: bob.credentials!.userId,
             },
         );
 
-        await app.closeVerifyToast();
+        await rejectToast(page, "Verify this device");
         await app.viewRoomByName("Bob");
         // confirm the room was loaded
         await expect(page.getByText("Bob joined the room")).toBeVisible();
diff --git a/apps/web/playwright/e2e/audio-player/audio-player.spec.ts b/apps/web/playwright/e2e/audio-player/audio-player.spec.ts
index 8223996a61..e20791ae94 100644
--- a/apps/web/playwright/e2e/audio-player/audio-player.spec.ts
+++ b/apps/web/playwright/e2e/audio-player/audio-player.spec.ts
@@ -7,6 +7,9 @@ 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 { readFile } from "node:fs/promises";
+import { rejectToast } from "@element-hq/element-web-playwright-common";
+
 import type { Locator, Page } from "@playwright/test";
 import { test, expect, type ExtendedToMatchScreenshotOptions } from "../../element-web-test";
 import { SettingLevel } from "../../../src/settings/SettingLevel";
@@ -28,6 +31,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
     test.use({
         displayName: "Hanako",
     });
+    let roomId: string;
 
     const uploadFile = async (app: ElementAppPage, sampleFile: string) => {
         // Upload a file from the message composer
@@ -42,6 +46,37 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         await expect(app.page.getByTestId("audio-player-name").last().filter({ hasText: sampleFile })).toBeVisible();
     };
 
+    const sendAudioFile = async (app: ElementAppPage, sampleFile: string, replyToEventId?: string): Promise<string> => {
+        const file = await readFile(getSampleFilePath(sampleFile));
+        const upload = await app.client.uploadContent(file, { name: sampleFile, type: "audio/ogg" });
+        const content = {
+            body: sampleFile,
+            msgtype: "m.audio",
+            url: upload.content_uri,
+            info: {
+                mimetype: "audio/ogg",
+                size: file.byteLength,
+                duration: 1000,
+            },
+            ...(replyToEventId
+                ? {
+                      "m.relates_to": {
+                          "m.in_reply_to": {
+                              event_id: replyToEventId,
+                          },
+                      },
+                  }
+                : {}),
+        };
+
+        const { event_id: eventId } = await app.client.sendEvent(roomId, null, "m.room.message", content);
+        await expect(
+            app.page.locator(".mx_EventTile_last").getByRole("region", { name: "Audio player" }),
+        ).toBeVisible();
+        await expect(app.page.getByTestId("audio-player-name").last()).toHaveText(sampleFile);
+        return eventId;
+    };
+
     const scrollToBottomOfTimeline = async (page: Page) => {
         await page.locator(".mx_RoomView_MessageList").click();
         await page.mouse.wheel(0, 100);
@@ -139,8 +174,8 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
     };
 
     test.beforeEach(async ({ page, app, user }) => {
-        await app.closeVerifyToast();
-        await app.client.createRoom({ name: "Test Room" });
+        await rejectToast(page, "Verify this device");
+        roomId = await app.client.createRoom({ name: "Test Room" });
         await app.viewRoomByName("Test Room");
 
         // Wait until configuration is finished
@@ -267,27 +302,9 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
 
             const tile = page.locator(".mx_EventTile_last");
 
-            await uploadFile(app, "upload-first.ogg");
-
-            // Assert that the audio player is rendered
-            await expect(
-                page.locator(".mx_EventTile_last").getByRole("region", { name: "Audio player" }),
-            ).toBeVisible();
-
-            await clickButtonReply(tile);
-
-            // Reply to the player with another audio file
-            await uploadFile(app, "upload-second.ogg");
-
-            // Assert that the audio player is rendered
-            await expect(
-                page.locator(".mx_EventTile_last").getByRole("region", { name: "Audio player" }),
-            ).toBeVisible();
-
-            await clickButtonReply(tile);
-
-            // Reply to the player with yet another audio file to create a reply chain
-            await uploadFile(app, "upload-third.ogg");
+            const firstEventId = await sendAudioFile(app, "upload-first.ogg");
+            const secondEventId = await sendAudioFile(app, "upload-second.ogg", firstEventId);
+            await sendAudioFile(app, "upload-third.ogg", secondEventId);
 
             // Assert that the audio player is rendered
             await expect(tile.getByRole("region", { name: "Audio player" })).toBeVisible();
@@ -296,7 +313,9 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
             await expect(tile.locator(".mx_ReplyChain")).toHaveCount(2);
 
             // Assert that one line contains the user name
-            await expect(tile.locator(".mx_ReplyChain .mx_ReplyTile_sender").getByText(user.displayName)).toBeVisible();
+            await expect(
+                tile.locator(".mx_ReplyChain .mx_ReplyTile_sender").getByText(user.displayName!),
+            ).toBeVisible();
 
             // Assert that the other line contains the file button
             await expect(tile.locator(".mx_ReplyChain .mx_MFileBody")).toBeVisible();
diff --git a/apps/web/playwright/e2e/chat-export/html-export.spec.ts b/apps/web/playwright/e2e/chat-export/html-export.spec.ts
index aed032b09b..1436ef59c5 100644
--- a/apps/web/playwright/e2e/chat-export/html-export.spec.ts
+++ b/apps/web/playwright/e2e/chat-export/html-export.spec.ts
@@ -99,9 +99,12 @@ test.describe("HTML Export", () => {
 
             // Send a bunch of messages to populate the room
             for (let i = 1; i < 10; i++) {
-                const respone = await app.client.sendMessage(room.roomId, { body: `Testing ${i}`, msgtype: "m.text" });
+                const response = await app.client.sendMessage(room!.roomId, {
+                    body: `Testing ${i}`,
+                    msgtype: "m.text",
+                });
                 if (i == 1) {
-                    await app.client.reactToMessage(room.roomId, null, respone.event_id, "🙃");
+                    await app.client.reactToMessage(room!.roomId, null, response.event_id, "🙃");
                 }
             }
 
diff --git a/apps/web/playwright/e2e/composer/CIDER.spec.ts b/apps/web/playwright/e2e/composer/CIDER.spec.ts
index 89f4cad276..ef92710c10 100644
--- a/apps/web/playwright/e2e/composer/CIDER.spec.ts
+++ b/apps/web/playwright/e2e/composer/CIDER.spec.ts
@@ -6,6 +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 { rejectToastIfExists } from "@element-hq/element-web-playwright-common";
+
 import { test, expect } from "../../element-web-test";
 import { SettingLevel } from "../../../src/settings/SettingLevel";
 import { getSampleFilePath } from "../../sample-files";
@@ -18,6 +20,7 @@ test.describe("Composer", () => {
         botCreateOpts: {
             displayName: "Bob",
         },
+        lockLeftPanelWidth: false,
     });
 
     test.use({
@@ -28,7 +31,9 @@ test.describe("Composer", () => {
         },
     });
 
-    test.beforeEach(async ({ room }) => {}); // trigger room fixture
+    test.beforeEach(async ({ app, room /* trigger room fixture */ }) => {
+        await rejectToastIfExists(app.page, "Notifications");
+    });
 
     test.describe("CIDER", () => {
         test("sends a message when you click send or press Enter", async ({ page }) => {
@@ -69,7 +74,7 @@ test.describe("Composer", () => {
         test("should allow user to input emoji via graphical picker", async ({ page, app }) => {
             await app.getComposer(false).getByRole("button", { name: "Emoji" }).click();
 
-            await page.getByTestId("mx_EmojiPicker").locator(".mx_EmojiPicker_item", { hasText: "😇" }).click();
+            await page.getByLabel("Emoji picker").getByRole("button", { name: "😇" }).click();
 
             await page.locator(".mx_ContextualMenu_background").click(); // Close emoji picker
             await page.getByRole("textbox", { name: "Send an unencrypted message…" }).press("Enter"); // Send message
@@ -77,13 +82,22 @@ test.describe("Composer", () => {
             await expect(page.locator(".mx_EventTile_body", { hasText: "😇" })).toBeVisible();
         });
 
+        test("renders in narrow viewports", { tag: "@screenshot" }, async ({ page, bot, app }) => {
+            // Shrink the viewport
+            await page.setViewportSize({ width: 500, height: 1080 });
+            // Shrinking the viewport will collapse the left-panel, so manually expand it.
+            await app.resizeLeftPanel(150);
+            // Now take the screenshot
+            await expect(app.getComposer()).toMatchScreenshot("narrow.png");
+        });
+
         test.describe("render emoji picker with larger viewport height", async () => {
             test.use({ viewport: { width: 1280, height: 720 } });
             test("render emoji picker", { tag: "@screenshot" }, async ({ page, app }) => {
                 await app.getComposer(false).getByRole("button", { name: "Emoji" }).click();
                 // Mask the background of the screenshot to avoid failing the test just because some
                 // other component have changed its rendering.
-                await expect(page.getByTestId("mx_EmojiPicker")).toMatchScreenshot("emoji-picker.png", {
+                await expect(page.getByLabel("Emoji picker")).toMatchScreenshot("emoji-picker.png", {
                     css: `
                         .mx_ContextualMenu_background {
                             background-color: magenta !important;
@@ -99,7 +113,7 @@ test.describe("Composer", () => {
                 await app.getComposer(false).getByRole("button", { name: "Emoji" }).click();
                 // Mask the background of the screenshot to avoid failing the test just because some
                 // other component have changed its rendering.
-                await expect(page.getByTestId("mx_EmojiPicker")).toMatchScreenshot("emoji-picker-small.png", {
+                await expect(page.getByLabel("Emoji picker")).toMatchScreenshot("emoji-picker-small.png", {
                     css: `
                         .mx_ContextualMenu_background {
                             background-color: magenta !important;
@@ -116,7 +130,7 @@ test.describe("Composer", () => {
             await emojiButton.click();
 
             // Wait for emoji picker to be visible
-            const emojiPicker = page.getByTestId("mx_EmojiPicker");
+            const emojiPicker = page.getByLabel("Emoji picker");
             await expect(emojiPicker).toBeVisible();
 
             // Get initial focused element (should be search input)
@@ -131,8 +145,8 @@ test.describe("Composer", () => {
             await page.keyboard.press("Tab");
 
             // Verify we're still within the emoji picker (not back to composer)
-            const focusedElement = await page.evaluate(() => document.activeElement?.closest(".mx_EmojiPicker"));
-            expect(focusedElement).not.toBeNull();
+            const focusStillInPicker = await emojiPicker.evaluate((el) => el.contains(document.activeElement));
+            expect(focusStillInPicker).toBe(true);
 
             // Close with Escape key
             await page.keyboard.press("Escape");
@@ -170,16 +184,17 @@ test.describe("Composer", () => {
             // Set up a private room so we have another user to mention
             await app.client.createRoom({
                 is_direct: true,
-                invite: [bot.credentials.userId],
+                invite: [bot.credentials!.userId],
             });
             await app.viewRoomByName("Bob");
 
             const composer = page.getByRole("textbox", { name: "Send an unencrypted message…" });
+            await composer.click();
             await composer.pressSequentially("@bob");
 
             // Note that we include the user ID here as the room tile is also an 'option' role
             // with text 'Bob'
-            await page.getByRole("option", { name: `Bob ${bot.credentials.userId}` }).click();
+            await page.getByRole("option", { name: `Bob ${bot.credentials!.userId}` }).click();
             await expect(composer.getByText("Bob")).toBeVisible();
             await expect(composer).toMatchScreenshot("mention.png");
             await composer.press("Enter");
@@ -201,14 +216,8 @@ test.describe("Composer", () => {
         });
 
         test("can paste a file", async ({ page, bot, app }) => {
-            // Set up a private room so we have another user to mention
-            await app.client.createRoom({
-                is_direct: true,
-                invite: [bot.credentials.userId],
-            });
-            await app.viewRoomByName("Bob");
             await app.composerDragAndPasteFile("room", getSampleFilePath("riot.png"), "image/png");
-            await expect(page.locator(".mx_MImageBody")).toBeVisible();
+            await expect(page.locator(".mx_ImageBody")).toBeVisible();
         });
     });
 });
diff --git a/apps/web/playwright/e2e/composer/RTE.spec.ts b/apps/web/playwright/e2e/composer/RTE.spec.ts
index 2c5f8071ec..e9ba8aaa32 100644
--- a/apps/web/playwright/e2e/composer/RTE.spec.ts
+++ b/apps/web/playwright/e2e/composer/RTE.spec.ts
@@ -100,7 +100,7 @@ test.describe("Composer", () => {
                     // Set up a private room so we have another user to mention
                     await app.client.createRoom({
                         is_direct: true,
-                        invite: [bob.credentials.userId],
+                        invite: [bob.credentials!.userId],
                     });
                     await app.viewRoomByName("Bob");
 
@@ -113,11 +113,11 @@ test.describe("Composer", () => {
                     await expect(page.getByTestId("autocomplete-wrapper")).toBeEmpty();
 
                     // Entering the first letter of the other user's name opens the autocomplete...
-                    await page.getByRole("textbox").pressSequentially(bob.credentials.displayName.slice(0, 1));
+                    await page.getByRole("textbox").pressSequentially(bob.credentials!.displayName!.slice(0, 1));
                     // ...with the other user name visible, and clicking that username...
-                    await page.getByTestId("autocomplete-wrapper").getByText(bob.credentials.displayName).click();
+                    await page.getByTestId("autocomplete-wrapper").getByText(bob.credentials!.displayName!).click();
                     // ...inserts the username into the composer
-                    const pill = page.getByRole("textbox").getByText(bob.credentials.displayName, { exact: false });
+                    const pill = page.getByRole("textbox").getByText(bob.credentials!.displayName!, { exact: false });
                     await expect(pill).toHaveAttribute("contenteditable", "false");
                     await expect(pill).toHaveAttribute("data-mention-type", "user");
 
@@ -125,7 +125,7 @@ test.describe("Composer", () => {
                     await page.getByRole("button", { name: "Send message" }).click();
 
                     // Typing an @, then other user's name, then trailing space closes the autocomplete
-                    await page.getByRole("textbox").pressSequentially(`@${bob.credentials.displayName} `);
+                    await page.getByRole("textbox").pressSequentially(`@${bob.credentials!.displayName!} `);
                     await expect(page.getByTestId("autocomplete-wrapper")).toBeEmpty();
 
                     // Send the message to clear the composer
@@ -134,7 +134,7 @@ test.describe("Composer", () => {
                     // Moving the cursor back to an "incomplete" mention opens the autocomplete
                     await page
                         .getByRole("textbox")
-                        .pressSequentially(`initial text @${bob.credentials.displayName.slice(0, 1)} abc`);
+                        .pressSequentially(`initial text @${bob.credentials!.displayName!.slice(0, 1)} abc`);
                     await expect(page.getByTestId("autocomplete-wrapper")).toBeEmpty();
                     // Move the cursor left by 4 to put it to: `@B| abc`, check autocomplete displays
                     await page.getByRole("textbox").press("ArrowLeft");
@@ -145,7 +145,7 @@ test.describe("Composer", () => {
 
                     // Selecting the autocomplete option using Enter inserts it into the composer
                     await page.getByRole("textbox").press("Enter");
-                    const pill2 = page.getByRole("textbox").getByText(bob.credentials.displayName, { exact: false });
+                    const pill2 = page.getByRole("textbox").getByText(bob.credentials!.displayName!, { exact: false });
                     await expect(pill2).toHaveAttribute("contenteditable", "false");
                     await expect(pill2).toHaveAttribute("data-mention-type", "user");
                 });
@@ -198,7 +198,7 @@ test.describe("Composer", () => {
 
         test("can paste a file", async ({ page, bot, app }) => {
             await app.composerDragAndPasteFile("room", getSampleFilePath("riot.png"), "image/png");
-            await expect(page.locator(".mx_MImageBody")).toBeVisible();
+            await expect(page.locator(".mx_ImageBody")).toBeVisible();
         });
 
         test("can paste a file in a thread", async ({ page, app }) => {
@@ -213,7 +213,22 @@ test.describe("Composer", () => {
             await tile.getByRole("button", { name: "Reply in thread" }).click();
 
             await app.composerDragAndPasteFile("thread", getSampleFilePath("riot.png"), "image/png");
-            await expect(page.locator(".mx_MImageBody")).toBeVisible();
+            await expect(page.locator(".mx_ImageBody")).toBeVisible();
+        });
+
+        test.describe(() => {
+            test.use({
+                lockLeftPanelWidth: false,
+            });
+
+            test("renders in narrow viewports", { tag: "@screenshot" }, async ({ page, bot, app }) => {
+                // Shrink the viewport
+                await page.setViewportSize({ width: 750, height: 1080 });
+                // Shrinking the viewport will collapse the left-panel, so manually expand it.
+                await app.resizeLeftPanel(150);
+                // Now take the screenshot
+                await expect(page.locator(".mx_MessageComposer_wrapper")).toMatchScreenshot("narrow.png");
+            });
         });
 
         test.describe("when Control+Enter is required to send", () => {
diff --git a/apps/web/playwright/e2e/crypto/backups-mas.spec.ts b/apps/web/playwright/e2e/crypto/backups-mas.spec.ts
index 477ca2a42f..3768c51e4d 100644
--- a/apps/web/playwright/e2e/crypto/backups-mas.spec.ts
+++ b/apps/web/playwright/e2e/crypto/backups-mas.spec.ts
@@ -89,13 +89,13 @@ test.describe("Key backup reset from elsewhere", () => {
         await page.getByRole("textbox", { name: "Name" }).fill("test room");
         await page.getByRole("button", { name: "Create room" }).click();
 
-        const accessToken = await page.evaluate(() => window.mxMatrixClientPeg.get().getAccessToken());
+        const accessToken = await page.evaluate(() => window.mxMatrixClientPeg.get().getAccessToken()!);
 
         const csAPI = new TestClientServerAPI(request, homeserver, accessToken);
 
         const backupInfo = await csAPI.getCurrentBackupInfo();
 
-        await csAPI.deleteBackupVersion(backupInfo.version);
+        await csAPI.deleteBackupVersion(backupInfo!.version);
 
         await page.getByRole("textbox", { name: "Send a message…" }).fill("/discardsession");
         await page.getByRole("button", { name: "Send message" }).click();
diff --git a/apps/web/playwright/e2e/crypto/crypto.spec.ts b/apps/web/playwright/e2e/crypto/crypto.spec.ts
index 5d9231b67b..88872052f2 100644
--- a/apps/web/playwright/e2e/crypto/crypto.spec.ts
+++ b/apps/web/playwright/e2e/crypto/crypto.spec.ts
@@ -6,6 +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 { rejectToast } from "@element-hq/element-web-playwright-common";
+
 import type { Page } from "@playwright/test";
 import { expect, test } from "../../element-web-test";
 import { autoJoin, createSharedRoomWithUser, enableKeyBackup, verify } from "./utils";
@@ -23,8 +25,8 @@ const checkDMRoom = async (page: Page) => {
 const startDMWithBob = async (page: Page, bob: Bot) => {
     await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "New conversation" }).click();
     await page.getByRole("menuitem", { name: "Start chat" }).click();
-    await page.getByTestId("invite-dialog-input").fill(bob.credentials.userId);
-    await page.getByRole("option", { name: bob.credentials.displayName }).click();
+    await page.getByTestId("invite-dialog-input").fill(bob.credentials!.userId);
+    await page.getByRole("option", { name: bob.credentials!.displayName! }).click();
     await expect(page.getByTestId("invite-dialog-input-wrapper").getByText("Bob")).toBeVisible();
     await page.getByRole("button", { name: "Go" }).click();
 
@@ -80,14 +82,14 @@ test.describe("Cryptography", function () {
      * @param keyType
      */
     async function verifyKey(app: ElementAppPage, keyType: "master" | "self_signing" | "user_signing") {
-        const accountData: { encrypted: Record<string, Record<string, string>> } = await app.client.evaluate(
+        const accountData = await app.client.evaluate(
             (cli, keyType) => cli.getAccountDataFromServer(`m.cross_signing.${keyType}`),
             keyType,
         );
 
-        expect(accountData.encrypted).toBeDefined();
-        const keys = Object.keys(accountData.encrypted);
-        const key = accountData.encrypted[keys[0]];
+        expect(accountData?.encrypted).toBeDefined();
+        const keys = Object.keys(accountData!.encrypted);
+        const key = accountData!.encrypted[keys[0]];
         expect(key.ciphertext).toBeDefined();
         expect(key.iv).toBeDefined();
         expect(key.mac).toBeDefined();
@@ -117,9 +119,9 @@ test.describe("Cryptography", function () {
         async function fetchMasterKey() {
             return await test.step("Fetch master key from server", async () => {
                 const k = await app.client.evaluate(async (cli) => {
-                    const userId = cli.getUserId();
+                    const userId = cli.getSafeUserId();
                     const keys = await cli.downloadKeysForUsers([userId]);
-                    return Object.values(keys.master_keys[userId].keys)[0];
+                    return Object.values(keys.master_keys![userId].keys)[0];
                 });
                 console.log(`fetchMasterKey: ${k}`);
                 return k;
@@ -136,7 +138,7 @@ test.describe("Cryptography", function () {
         await encryptionTab.getByRole("button", { name: "Continue" }).click();
 
         // Enter the password
-        await page.getByPlaceholder("Password").fill(aliceCredentials.password);
+        await page.getByPlaceholder("Password").fill(aliceCredentials.password!);
         await page.getByRole("button", { name: "Continue" }).click();
 
         await expect(async () => {
@@ -161,7 +163,7 @@ test.describe("Cryptography", function () {
         await encryptionTab.getByRole("button", { name: "Continue" }).click();
 
         // Enter the password
-        await page.getByPlaceholder("Password").fill(aliceCredentials.password);
+        await page.getByPlaceholder("Password").fill(aliceCredentials.password!);
         await page.getByRole("button", { name: "Continue" }).click();
 
         // Key storage should now be enabled
@@ -172,7 +174,7 @@ test.describe("Cryptography", function () {
         "creating a DM should work, being e2e-encrypted / user verification",
         { tag: "@screenshot" },
         async ({ page, app, bot: bob, user: aliceCredentials }) => {
-            await app.closeVerifyToast();
+            await rejectToast(page, "Verify this device");
             await app.client.bootstrapCrossSigning(aliceCredentials);
             await startDMWithBob(page, bob);
             // send first message
@@ -207,7 +209,7 @@ test.describe("Cryptography", function () {
         await autoJoin(bob);
 
         // we need to have a room with the other user present, so we can open the verification panel
-        await createSharedRoomWithUser(app, bob.credentials.userId);
+        await createSharedRoomWithUser(app, bob.credentials!.userId);
         await verify(app, bob);
     });
 });
diff --git a/apps/web/playwright/e2e/crypto/decryption-failure-messages.spec.ts b/apps/web/playwright/e2e/crypto/decryption-failure-messages.spec.ts
index 1dc04ee905..bffa7ff539 100644
--- a/apps/web/playwright/e2e/crypto/decryption-failure-messages.spec.ts
+++ b/apps/web/playwright/e2e/crypto/decryption-failure-messages.spec.ts
@@ -6,6 +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 { rejectToastIfExists } from "@element-hq/element-web-playwright-common";
+
 import type { Preset, RoomMemberEvent, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 import { expect, test } from "../../element-web-test";
 import {
@@ -46,7 +48,11 @@ test.describe("Cryptography", function () {
                 // Log in again, and see how the message looks.
                 await logIntoElement(page, credentials);
                 // Dismiss the "Back up your chats" toast, otherwise it gets in the way of clicking the room list
-                await page.getByRole("button", { name: "Dismiss" }).click();
+                await page
+                    .getByRole("alert")
+                    .filter({ hasText: "Back up your chats" })
+                    .getByRole("button", { name: "Dismiss" })
+                    .click();
                 await app.viewRoomByName("Test room");
                 const lastTile = page.locator(".mx_EventTile").last();
                 await expect(lastTile).toContainText("Historical messages are not available on this device");
@@ -118,6 +124,9 @@ test.describe("Cryptography", function () {
                 user: alice,
                 bot: bob,
             }) => {
+                await rejectToastIfExists(page, "Verify this device");
+                await rejectToastIfExists(page, "Notifications");
+
                 // Bob creates an encrypted room and sends a message to it. He then invites Alice
                 const roomId = await bob.evaluate(
                     async (client, { alice }) => {
@@ -224,6 +233,9 @@ test.describe("Cryptography", function () {
                 user: alice,
                 bot: bob,
             }) => {
+                await rejectToastIfExists(page, "Verify this device");
+                await rejectToastIfExists(page, "Notifications");
+
                 // Bob:
                 // - creates an encrypted room,
                 // - invites Alice,
diff --git a/apps/web/playwright/e2e/crypto/dehydration-mas.spec.ts b/apps/web/playwright/e2e/crypto/dehydration-mas.spec.ts
new file mode 100644
index 0000000000..fded708df3
--- /dev/null
+++ b/apps/web/playwright/e2e/crypto/dehydration-mas.spec.ts
@@ -0,0 +1,79 @@
+/*
+ Copyright 2026 Element Creations 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 { expect, test } from "../../element-web-test.ts";
+import { masHomeserver } from "../../plugins/homeserver/synapse/masHomeserver.ts";
+import {
+    autoJoin,
+    createSharedEncryptedRoomWithUser,
+    enableKeyBackup,
+    logOutOfElement,
+    verifyAfterLogin,
+} from "./utils.ts";
+import { registerAccountMas } from "../oidc";
+import { Bot } from "../../pages/bot.ts";
+
+test.use({
+    ...masHomeserver,
+    synapseConfig: {
+        experimental_features: {
+            msc3814_enabled: true,
+        },
+    },
+});
+
+test.describe("Device dehydration, on a MAS-enabled homeserver", () => {
+    test("Can read messages sent while logged out", async ({ mailpitClient, homeserver, page, app }, testInfo) => {
+        test.slow();
+        const aliceUserId = `alice_${testInfo.testId}`;
+        const alicePassword = "Pa$sW0rD!";
+
+        const recoveryKey =
+            await test.step("Alice registers and sets up recovery => a dehydrated device is created", async () => {
+                await page.goto("/#/login");
+                await page.getByRole("button", { name: "Continue" }).click();
+
+                await registerAccountMas(page, mailpitClient, aliceUserId, `${aliceUserId}@email.com`, alicePassword);
+                return await enableKeyBackup(app);
+            });
+
+        const [bob, testRoomId] = await test.step("Bob registers and joins a room with Alice", async () => {
+            const bob = new Bot(page, homeserver, { displayName: "Bob" });
+            await autoJoin(bob);
+
+            // Create an encrypted room, and wait for Bob to join it.
+            const testRoomId = await createSharedEncryptedRoomWithUser(app, bob.credentials!.userId);
+
+            // Even though Alice has seen Bob's join event, Bob may not have done so yet. Wait for the sync to arrive.
+            await bob.awaitRoomMembership(testRoomId);
+            return [bob, testRoomId];
+        });
+
+        await test.step("Alice logs out", async () => {
+            await logOutOfElement(page);
+        });
+
+        await test.step("Bob sends a message", async () => {
+            await bob.sendMessage(testRoomId, "test encrypted 1");
+        });
+
+        await test.step("Alice logs in again", async () => {
+            await page.getByRole("link", { name: "Sign in" }).click();
+            await page.getByRole("button", { name: "Continue" }).click();
+
+            await expect(page.getByText("Continue to Element?")).toBeVisible();
+            await page.getByRole("button", { name: "Continue" }).click();
+
+            await verifyAfterLogin(page, recoveryKey);
+            await app.viewRoomById(testRoomId);
+        });
+
+        await test.step("Alice can decrypt Bob's message", async () => {
+            await expect(page.getByText("test encrypted 1")).toBeVisible();
+        });
+    });
+});
diff --git a/apps/web/playwright/e2e/crypto/dehydration.spec.ts b/apps/web/playwright/e2e/crypto/dehydration.spec.ts
index ccb98e89df..24ee94129b 100644
--- a/apps/web/playwright/e2e/crypto/dehydration.spec.ts
+++ b/apps/web/playwright/e2e/crypto/dehydration.spec.ts
@@ -8,9 +8,18 @@ Please see LICENSE files in the repository root for full details.
 
 import { test, expect } from "../../element-web-test";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
-import { createBot, logIntoElement } from "./utils.ts";
+import {
+    autoJoin,
+    createBot,
+    createSharedEncryptedRoomWithUser,
+    enableKeyBackup,
+    logIntoElement,
+    logOutOfElement,
+    verifyAfterLogin,
+} from "./utils.ts";
 import { type Client } from "../../pages/client.ts";
 import { type ElementAppPage } from "../../pages/ElementAppPage.ts";
+import { Bot } from "../../pages/bot.ts";
 
 const NAME = "Alice";
 
@@ -18,7 +27,6 @@ test.use({
     displayName: NAME,
     synapseConfig: {
         experimental_features: {
-            msc2697_enabled: false,
             msc3814_enabled: true,
         },
     },
@@ -40,15 +48,10 @@ test.describe("Dehydration", () => {
         await settings.getByRole("button", { name: "Verify this device" }).click();
         await page.getByRole("button", { name: "Can't confirm?" }).click();
         await page.getByRole("button", { name: "Continue" }).click();
+        await app.closeDialog();
 
         // Set up recovery
-        await page.getByRole("button", { name: "Get recovery key" }).click();
-        await page.getByRole("button", { name: "Continue" }).click();
-        const recoveryKey = await page.getByTestId("recoveryKey").innerText();
-        await page.getByRole("button", { name: "Continue" }).click();
-        await page.getByRole("textbox").fill(recoveryKey);
-        await page.getByRole("button", { name: "Finish set up" }).click();
-        await page.getByRole("button", { name: "Close" }).click();
+        await enableKeyBackup(app);
 
         await expectDehydratedDeviceEnabled(app);
 
@@ -61,28 +64,7 @@ test.describe("Dehydration", () => {
 
     test("'Get recovery key' creates dehydrated device", async ({ app, credentials, page }) => {
         await logIntoElement(page, credentials);
-
-        const settingsDialogLocator = await app.settings.openUserSettings("Encryption");
-        await settingsDialogLocator.getByRole("button", { name: "Get recovery key" }).click();
-
-        // First it displays an informative panel about the recovery key
-        await expect(settingsDialogLocator.getByRole("heading", { name: "Get recovery key" })).toBeVisible();
-        await settingsDialogLocator.getByRole("button", { name: "Continue" }).click();
-
-        // Next, it displays the new recovery key. We click on the copy button.
-        await expect(settingsDialogLocator.getByText("Save your recovery key somewhere safe")).toBeVisible();
-        await settingsDialogLocator.getByRole("button", { name: "Copy" }).click();
-        const recoveryKey = await app.getClipboard();
-        await settingsDialogLocator.getByRole("button", { name: "Continue" }).click();
-
-        await expect(
-            settingsDialogLocator.getByText("Enter your recovery key to confirm", { exact: true }),
-        ).toBeVisible();
-        await settingsDialogLocator.getByRole("textbox").fill(recoveryKey);
-        await settingsDialogLocator.getByRole("button", { name: "Finish set up" }).click();
-
-        await app.settings.closeDialog();
-
+        await enableKeyBackup(app);
         await expectDehydratedDeviceEnabled(app);
     });
 
@@ -95,7 +77,7 @@ test.describe("Dehydration", () => {
         // Set up cross-signing and recovery
         const { botClient } = await createBot(page, homeserver, credentials);
         // ... and dehydration
-        await botClient.evaluate(async (client) => await client.getCrypto().startDehydration());
+        await botClient.evaluate(async (client) => await client.getCrypto()!.startDehydration());
 
         const initialDehydratedDeviceIds = await getDehydratedDeviceIds(botClient);
         expect(initialDehydratedDeviceIds.length).toBe(1);
@@ -111,17 +93,11 @@ test.describe("Dehydration", () => {
             page.getByRole("heading", { name: "Are you sure you want to reset your digital identity?" }),
         ).toBeVisible();
         await page.getByRole("button", { name: "Continue", exact: true }).click();
-        await page.getByPlaceholder("Password").fill(credentials.password);
+        await page.getByPlaceholder("Password").fill(credentials.password!);
         await page.getByRole("button", { name: "Continue" }).click();
 
         // And set up recovery
-        const settings = await app.settings.openUserSettings("Encryption");
-        await settings.getByRole("button", { name: "Get recovery key" }).click();
-        await settings.getByRole("button", { name: "Continue" }).click();
-        const recoveryKey = await settings.getByTestId("recoveryKey").innerText();
-        await settings.getByRole("button", { name: "Continue" }).click();
-        await settings.getByRole("textbox").fill(recoveryKey);
-        await settings.getByRole("button", { name: "Finish set up" }).click();
+        await enableKeyBackup(app);
 
         // There should be a brand new dehydrated device
         await expectDehydratedDeviceEnabled(app);
@@ -132,41 +108,72 @@ test.describe("Dehydration", () => {
 
         // Create a dehydrated device by setting up recovery (see "'Set up
         // recovery' creates dehydrated device" test above)
-        const settingsDialogLocator = await app.settings.openUserSettings("Encryption");
-        await settingsDialogLocator.getByRole("button", { name: "Get recovery key" }).click();
-
-        // First it displays an informative panel about the recovery key
-        await expect(settingsDialogLocator.getByRole("heading", { name: "Get recovery key" })).toBeVisible();
-        await settingsDialogLocator.getByRole("button", { name: "Continue" }).click();
-
-        // Next, it displays the new recovery key. We click on the copy button.
-        await expect(settingsDialogLocator.getByText("Save your recovery key somewhere safe")).toBeVisible();
-        await settingsDialogLocator.getByRole("button", { name: "Copy" }).click();
-        const recoveryKey = await app.getClipboard();
-        await settingsDialogLocator.getByRole("button", { name: "Continue" }).click();
-
-        await expect(
-            settingsDialogLocator.getByText("Enter your recovery key to confirm", { exact: true }),
-        ).toBeVisible();
-        await settingsDialogLocator.getByRole("textbox").fill(recoveryKey);
-        await settingsDialogLocator.getByRole("button", { name: "Finish set up" }).click();
-
+        await enableKeyBackup(app);
         await expectDehydratedDeviceEnabled(app);
 
         // After recovery is set up, we reset our cryptographic identity, which
         // should drop the dehydrated device.
+        const settingsDialogLocator = await app.settings.openUserSettings("Encryption");
         await settingsDialogLocator.getByRole("button", { name: "Reset cryptographic identity" }).click();
         await settingsDialogLocator.getByRole("button", { name: "Continue" }).click();
 
         await expectDehydratedDeviceDisabled(app);
     });
+
+    test("Can read messages sent while logged out", async ({ homeserver, credentials, page, app }) => {
+        const recoveryKey =
+            await test.step("Alice logs in and sets up recovery => a dehydrated device is created", async () => {
+                // This test does a page reload to work around a bug, so we need to avoid the `pageWithCredentials` and `user`
+                // fixtures poke credentials into localStorage via a pageload script. We therefore log in manually.
+                await logIntoElement(page, credentials);
+
+                // Logging in will have created a cross-signing identity for us. Now set up recovery, to create a dehydrated device.
+                const recoveryKey = await enableKeyBackup(app);
+
+                await expectDehydratedDeviceEnabled(app);
+                return recoveryKey;
+            });
+
+        const [bob, testRoomId] = await test.step("Bob and Alice make a shared room", async () => {
+            // As above, we need to avoid the `user` fixture: we therefore also need to avoid the `bot` fixture, which
+            // depends on the `user` fixture. We just create the bot manually.
+            const bob = new Bot(page, homeserver, { displayName: "Bob" });
+            await autoJoin(bob);
+
+            // create an encrypted room, and wait for Bob to join it.
+            const testRoomId = await createSharedEncryptedRoomWithUser(app, bob.credentials!.userId);
+
+            // Even though Alice has seen Bob's join event, Bob may not have done so yet. Wait for the sync to arrive.
+            await bob.awaitRoomMembership(testRoomId);
+            return [bob, testRoomId];
+        });
+
+        await test.step("Alice logs out", async () => {
+            await logOutOfElement(page);
+        });
+
+        await test.step("Bob sends a message", async () => {
+            await bob.sendMessage(testRoomId, "test encrypted 1");
+        });
+
+        await test.step("Alice logs back in, and should be able to view Bob's message", async () => {
+            // Reload to work around a Rust crypto bug where it can hold onto the indexeddb even after logout
+            // https://github.com/element-hq/element-web/issues/25779
+            await page.reload();
+
+            await logIntoElement(page, credentials);
+            await verifyAfterLogin(page, recoveryKey);
+            await app.viewRoomById(testRoomId);
+            await expect(page.getByText("test encrypted 1")).toBeVisible();
+        });
+    });
 });
 
 async function getDehydratedDeviceIds(client: Client): Promise<string[]> {
     return await client.evaluate(async (client) => {
-        const userId = client.getUserId();
-        const devices = await client.getCrypto().getUserDeviceInfo([userId]);
-        return Array.from(devices.get(userId).values())
+        const userId = client.getSafeUserId();
+        const devices = await client.getCrypto()!.getUserDeviceInfo([userId]);
+        return Array.from(devices.get(userId)!.values())
             .filter((d) => d.dehydrated)
             .map((d) => d.deviceId);
     });
diff --git a/apps/web/playwright/e2e/crypto/device-verification.spec.ts b/apps/web/playwright/e2e/crypto/device-verification.spec.ts
index 7fd17177d3..eff50f72c1 100644
--- a/apps/web/playwright/e2e/crypto/device-verification.spec.ts
+++ b/apps/web/playwright/e2e/crypto/device-verification.spec.ts
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import jsQR from "jsqr";
+import { assertNoToasts, getToast, rejectToast } from "@element-hq/element-web-playwright-common";
 
 import type { JSHandle, Locator, Page } from "@playwright/test";
 import type { VerificationRequest } from "matrix-js-sdk/src/crypto-api";
@@ -81,11 +82,7 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
     );
 
     // 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,
-        toasts,
-    }) => {
+    test("No toast after verification, even if the secrets take a while to arrive", async ({ page, credentials }) => {
         // Before we log in, the bot creates an encrypted room, so that we can test the toast behaviour that only happens
         // when we are in an encrypted room.
         await aliceBotClient.createRoom({
@@ -124,9 +121,8 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         await infoDialog.getByRole("button", { name: "Got it" }).click();
 
         // There should be no toast (other than the notifications one)
-        await toasts.rejectToast("Verify this device");
-        await toasts.rejectToast("Notifications");
-        await toasts.assertNoToasts();
+        await rejectToast(page, "Notifications");
+        await assertNoToasts(page);
 
         // There may still be a `/sendToDevice/m.secret.request` in flight, which will later throw an error and cause
         // a *subsequent* test to fail. Tell playwright to ignore any errors resulting from in-flight routes.
@@ -173,8 +169,8 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
             await app.client.evaluate(async (cli, aliceBotCredentials) => {
                 const deviceStatus = await cli
                     .getCrypto()!
-                    .getDeviceVerificationStatus(aliceBotCredentials.userId, aliceBotCredentials.deviceId);
-                if (!deviceStatus.isVerified()) {
+                    .getDeviceVerificationStatus(aliceBotCredentials!.userId, aliceBotCredentials!.deviceId);
+                if (!deviceStatus!.isVerified()) {
                     throw new Error("Bot device was not verified after QR code verification");
                 }
             }, aliceBotClient.credentials);
@@ -197,14 +193,14 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
     );
 
     test("Verify device with Recovery Key during login", async ({ page, app, credentials, homeserver }) => {
-        const recoveryKey = (await aliceBotClient.getRecoveryKey()).encodedPrivateKey;
+        const recoveryKey = (await aliceBotClient.getRecoveryKey()).encodedPrivateKey!;
 
         await logIntoElement(page, credentials);
         await enterRecoveryKeyAndCheckVerified(page, app, recoveryKey);
     });
 
     test("Verify device with Recovery Key from settings", async ({ page, app, credentials }) => {
-        const recoveryKey = (await aliceBotClient.getRecoveryKey()).encodedPrivateKey;
+        const recoveryKey = (await aliceBotClient.getRecoveryKey()).encodedPrivateKey!;
 
         await logIntoElement(page, credentials);
 
@@ -273,7 +269,7 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         await checkDeviceIsConnectedKeyBackup(app, expectedBackupVersion, true);
     }
 
-    test("Handle incoming verification request with SAS", async ({ page, credentials, homeserver, toasts, app }) => {
+    test("Handle incoming verification request with SAS", async ({ page, credentials, homeserver, app }) => {
         /* Log in but don't verify the device */
         await logIntoElement(page, credentials);
         const authPage = page.locator(".mx_AuthPage");
@@ -281,7 +277,7 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         await authPage.getByRole("button", { name: "I'll verify later" }).click();
 
         await page.waitForSelector(".mx_MatrixChat");
-        const elementDeviceId = await page.evaluate(() => window.mxMatrixClientPeg.get().getDeviceId());
+        const elementDeviceId = await page.evaluate(() => window.mxMatrixClientPeg.get().getDeviceId()!);
 
         /* Create an encrypted room so the "Verify this device" toast appears */
         await app.client.createRoom({
@@ -303,9 +299,9 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         );
 
         /* Check the toast for the incoming request */
-        const toast = await toasts.getToast("Verification requested");
+        const toast = await getToast(page, "Verification requested");
         // it should contain the device ID of the requesting device
-        await expect(toast.getByText(`${aliceBotClient.credentials.deviceId} from `)).toBeVisible();
+        await expect(toast.getByText(`${aliceBotClient.credentials!.deviceId} from `)).toBeVisible();
         // Accept
         await toast.getByRole("button", { name: "Start verification" }).click();
 
@@ -315,7 +311,7 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         /* on the bot side, wait for the verifier to exist ... */
         const verifier = await awaitVerifier(botVerificationRequest);
         // ... confirm ...
-        void botVerificationRequest.evaluate((verificationRequest) => verificationRequest.verifier.verify());
+        void botVerificationRequest.evaluate((verificationRequest) => verificationRequest.verifier!.verify());
         // ... and then check the emoji match
         await doTwoWaySasVerification(page, verifier);
 
@@ -341,7 +337,7 @@ async function readQrCode(base: Locator) {
     >(async (img) => {
         // draw the image on a canvas
         const myCanvas = new OffscreenCanvas(img.width, img.height);
-        const ctx = myCanvas.getContext("2d");
+        const ctx = myCanvas.getContext("2d")!;
         ctx.drawImage(img, 0, 0);
 
         // read the image data
@@ -356,5 +352,5 @@ async function readQrCode(base: Locator) {
 
     // now we can decode the QR code.
     const result = jsQR(new Uint8ClampedArray(imageData.buffer), imageData.width, imageData.height);
-    return new Uint8Array(result.binaryData);
+    return new Uint8Array(result!.binaryData);
 }
diff --git a/apps/web/playwright/e2e/crypto/event-shields.spec.ts b/apps/web/playwright/e2e/crypto/event-shields.spec.ts
index e09fdaf9fc..e25bcf3b73 100644
--- a/apps/web/playwright/e2e/crypto/event-shields.spec.ts
+++ b/apps/web/playwright/e2e/crypto/event-shields.spec.ts
@@ -12,11 +12,12 @@ import { expect, test } from "../../element-web-test";
 import {
     autoJoin,
     createSecondBotDevice,
-    createSharedRoomWithUser,
+    createSharedEncryptedRoomWithUser,
     enableKeyBackup,
-    logIntoElementAndVerify,
+    logIntoElement,
     logOutOfElement,
     verify,
+    verifyAfterLogin,
     waitForDevices,
 } from "./utils";
 import { bootstrapCrossSigningForClient } from "../../pages/client.ts";
@@ -39,18 +40,7 @@ test.describe("Cryptography", function () {
             await autoJoin(bob);
 
             // create an encrypted room, and wait for Bob to join it.
-            testRoomId = await createSharedRoomWithUser(app, bob.credentials.userId, {
-                name: "TestRoom",
-                initial_state: [
-                    {
-                        type: "m.room.encryption",
-                        state_key: "",
-                        content: {
-                            algorithm: "m.megolm.v1.aes-sha2",
-                        },
-                    },
-                ],
-            });
+            testRoomId = await createSharedEncryptedRoomWithUser(app, bob.credentials!.userId);
 
             // Even though Alice has seen Bob's join event, Bob may not have done so yet. Wait for the sync to arrive.
             await bob.awaitRoomMembership(testRoomId);
@@ -138,7 +128,7 @@ test.describe("Cryptography", function () {
                 await bobSecondDevice.evaluate((cli) => cli.logout(true));
 
                 // wait for the logout to propagate.
-                await waitForDevices(app, bob.credentials.userId, 1);
+                await waitForDevices(app, bob.credentials!.userId, 1);
 
                 // close and reopen the room, to get the shield to update.
                 await app.viewRoomByName("Bob");
@@ -181,7 +171,8 @@ test.describe("Cryptography", function () {
                     window.localStorage.clear();
                 });
                 await page.reload();
-                await logIntoElementAndVerify(page, aliceCredentials, securityKey);
+                await logIntoElement(page, aliceCredentials);
+                await verifyAfterLogin(page, securityKey);
 
                 /* go back to the test room and find Bob's message again */
                 await app.viewRoomById(testRoomId);
@@ -254,7 +245,7 @@ test.describe("Cryptography", function () {
                 // Workaround for https://github.com/element-hq/element-web/issues/28640:
                 // make sure that Alice has seen Bob's identity before she goes offline. We do this by opening
                 // his user info.
-                await waitForDevices(app, bob.credentials.userId, 1);
+                await waitForDevices(app, bob.credentials!.userId, 1);
 
                 // Our app is blocked from syncing while Bob sends his messages.
                 await app.client.network.goOffline();
@@ -295,7 +286,7 @@ test.describe("Cryptography", function () {
 
                 // Bob logs in a new device and resets cross-signing
                 const bobSecondDevice = await createSecondBotDevice(page, homeserver, bob);
-                await bootstrapCrossSigningForClient(await bobSecondDevice.prepareClient(), bob.credentials, true);
+                await bootstrapCrossSigningForClient(await bobSecondDevice.prepareClient(), bob.credentials!, true);
 
                 /* should show an error for a message from a previously verified device */
                 await bobSecondDevice.sendMessage(testRoomId, "test encrypted from user that was previously verified");
diff --git a/apps/web/playwright/e2e/crypto/history-sharing.spec.ts b/apps/web/playwright/e2e/crypto/history-sharing.spec.ts
index f2017e9467..186f98eee3 100644
--- a/apps/web/playwright/e2e/crypto/history-sharing.spec.ts
+++ b/apps/web/playwright/e2e/crypto/history-sharing.spec.ts
@@ -5,7 +5,7 @@ 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 { createNewInstance } from "@element-hq/element-web-playwright-common";
+import { closeReleaseAnnouncement, createNewInstance, rejectToast } from "@element-hq/element-web-playwright-common";
 
 import { expect, test } from "../../element-web-test";
 import { ElementAppPage } from "../../pages/ElementAppPage";
@@ -30,6 +30,11 @@ test.describe("History sharing", function () {
             await aliceElementApp.client.bootstrapCrossSigning(aliceCredentials);
             await aliceElementApp.closeKeyStorageToast();
 
+            await rejectToast(alicePage, "Notifications");
+
+            // Close the release announcement about the new room list sections
+            await closeReleaseAnnouncement(alicePage, "Introducing Sections");
+
             // Register a second user, and open it in a second instance of the app
             const bobCredentials = await homeserver.registerUser(`user_${testInfo.testId}_bob`, "password", "Bob");
             const bobPage = await createNewInstance(browser, bobCredentials, {}, labsFlags);
@@ -37,8 +42,6 @@ test.describe("History sharing", function () {
             await bobElementApp.client.bootstrapCrossSigning(bobCredentials);
             await bobElementApp.closeKeyStorageToast();
 
-            await aliceElementApp.closeNotificationToast();
-
             // Create the room and send a message
             await createRoom(alicePage, "TestRoom", true);
 
@@ -61,12 +64,20 @@ test.describe("History sharing", function () {
             // Bob should now be able to decrypt the event
             await expect(bobPage.getByText("A message from Alice")).toBeVisible();
 
-            // Exclude message timestamps and RR avatars from the screenshot. Bob sometimes sees Alice's RR on the
+            // Mask message timestamps and exclude RR avatars from the screenshot. Bob sometimes sees Alice's RR on the
             // previous event, which is surprising but not what we're testing here.
-            const mask = [bobPage.locator(".mx_MessageTimestamp"), bobPage.locator(".mx_ReadReceiptGroup_container")];
-            await expect(bobPage.locator(".mx_RoomView_body")).toMatchScreenshot("shared-history-invite-accepted.png", {
-                mask,
-            });
+            const mask = [bobPage.locator(".mx_MessageTimestamp")];
+            await expect(bobPage.locator(".mx_RoomView_timeline")).toMatchScreenshot(
+                "shared-history-invite-accepted.png",
+                {
+                    mask,
+                    css: `
+                    .mx_ReadReceiptGroup_container {
+                        display: none !important;
+                    }
+                `,
+                },
+            );
         },
     );
 
diff --git a/apps/web/playwright/e2e/crypto/invisible-crypto.spec.ts b/apps/web/playwright/e2e/crypto/invisible-crypto.spec.ts
index db0961b560..86b6d205ec 100644
--- a/apps/web/playwright/e2e/crypto/invisible-crypto.spec.ts
+++ b/apps/web/playwright/e2e/crypto/invisible-crypto.spec.ts
@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { expect, test } from "../../element-web-test";
-import { autoJoin, createSecondBotDevice, createSharedRoomWithUser, verify } from "./utils";
+import { autoJoin, createSecondBotDevice, createSharedEncryptedRoomWithUser, verify } from "./utils";
 import { bootstrapCrossSigningForClient } from "../../pages/client.ts";
 
 /** Tests for the "invisible crypto" behaviour -- i.e., when the "exclude insecure devices" setting is enabled */
@@ -29,25 +29,14 @@ test.describe("Invisible cryptography", () => {
         await autoJoin(bob);
 
         // create an encrypted room
-        const testRoomId = await createSharedRoomWithUser(app, bob.credentials.userId, {
-            name: "TestRoom",
-            initial_state: [
-                {
-                    type: "m.room.encryption",
-                    state_key: "",
-                    content: {
-                        algorithm: "m.megolm.v1.aes-sha2",
-                    },
-                },
-            ],
-        });
+        const testRoomId = await createSharedEncryptedRoomWithUser(app, bob.credentials!.userId);
 
         // Verify Bob
         await verify(app, bob);
 
         // Bob logs in a new device and resets cross-signing
         const bobSecondDevice = await createSecondBotDevice(page, homeserver, bob);
-        await bootstrapCrossSigningForClient(await bobSecondDevice.prepareClient(), bob.credentials, true);
+        await bootstrapCrossSigningForClient(await bobSecondDevice.prepareClient(), bob.credentials!, true);
 
         /* should show an error for a message from a previously verified device */
         await bobSecondDevice.sendMessage(testRoomId, "test encrypted from user that was previously verified");
diff --git a/apps/web/playwright/e2e/crypto/logout.spec.ts b/apps/web/playwright/e2e/crypto/logout.spec.ts
index 6cf02f3408..64bfd9122a 100644
--- a/apps/web/playwright/e2e/crypto/logout.spec.ts
+++ b/apps/web/playwright/e2e/crypto/logout.spec.ts
@@ -30,7 +30,7 @@ test.describe("Logout tests", () => {
         const currentDialogLocator = page.locator(".mx_Dialog");
 
         await expect(
-            currentDialogLocator.getByRole("heading", { name: "You'll lose access to your encrypted messages" }),
+            currentDialogLocator.getByRole("heading", { name: "You're about to lose access to your encrypted chats" }),
         ).toBeVisible();
     });
 
@@ -51,7 +51,7 @@ test.describe("Logout tests", () => {
         await expect(currentDialogLocator.getByText("Are you sure you want to Remove this device?")).toBeVisible();
     });
 
-    test("Logout directly if the user has no room keys", async ({ page, app }) => {
+    test("Ask to set up recovery on logout even if not in encrypted room", async ({ page, app }) => {
         await createRoom(page, "Clear room", false);
 
         await sendMessageInCurrentRoom(page, "Hello public world!");
@@ -60,7 +60,10 @@ test.describe("Logout tests", () => {
         await locator.getByRole("menuitem", { name: "All settings", exact: true }).click();
         await page.getByRole("button", { name: "Remove this device", exact: true }).click();
 
-        // Should have logged out directly
-        await expect(page.getByRole("heading", { name: "Be in your element" })).toBeVisible();
+        const currentDialogLocator = page.locator(".mx_Dialog");
+
+        await expect(
+            currentDialogLocator.getByRole("heading", { name: "You're about to lose access to your encrypted chats" }),
+        ).toBeVisible();
     });
 });
diff --git a/apps/web/playwright/e2e/crypto/migration.spec.ts b/apps/web/playwright/e2e/crypto/migration.spec.ts
index 191568c29c..59c68f7336 100644
--- a/apps/web/playwright/e2e/crypto/migration.spec.ts
+++ b/apps/web/playwright/e2e/crypto/migration.spec.ts
@@ -6,14 +6,13 @@ 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 path from "path";
+import path from "node:path";
 import { readFile } from "node:fs/promises";
-import { dirname } from "node:path";
 import { fileURLToPath } from "node:url";
 
 import { expect, test } from "../../element-web-test";
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 test.describe("migration", { tag: "@no-webkit" }, function () {
     test.use({
@@ -41,8 +40,8 @@ test.describe("migration", { tag: "@no-webkit" }, function () {
         // When the progress bar first loads, it should have a high max (one per megolm session to import), and
         // a relatively low value.
         const progressBar = page.getByRole("progressbar");
-        const initialProgress = parseFloat(await progressBar.getAttribute("value"));
-        const initialMax = parseFloat(await progressBar.getAttribute("max"));
+        const initialProgress = parseFloat((await progressBar.getAttribute("value"))!);
+        const initialMax = parseFloat((await progressBar.getAttribute("max"))!);
         expect(initialMax).toBeGreaterThan(4000);
         expect(initialProgress).toBeGreaterThanOrEqual(0);
         expect(initialProgress).toBeLessThanOrEqual(500);
@@ -53,8 +52,8 @@ test.describe("migration", { tag: "@no-webkit" }, function () {
                 async () => {
                     const progressBar = page.getByRole("progressbar");
                     return (
-                        (parseFloat(await progressBar.getAttribute("value")) * 100.0) /
-                        parseFloat(await progressBar.getAttribute("max"))
+                        (parseFloat((await progressBar.getAttribute("value"))!) * 100.0) /
+                        parseFloat((await progressBar.getAttribute("max"))!)
                     );
                 },
                 { timeout: 60000 },
diff --git a/apps/web/playwright/e2e/crypto/toasts.spec.ts b/apps/web/playwright/e2e/crypto/toasts.spec.ts
index 72451a03da..58c029c33b 100644
--- a/apps/web/playwright/e2e/crypto/toasts.spec.ts
+++ b/apps/web/playwright/e2e/crypto/toasts.spec.ts
@@ -6,9 +6,10 @@
  */
 
 import { type GeneratedSecretStorageKey } from "matrix-js-sdk/src/crypto-api";
+import { assertNoToasts, getToast, rejectToast } from "@element-hq/element-web-playwright-common";
 
-import { test, expect } from "../../element-web-test";
-import { createBot, deleteCachedSecrets, disableKeyBackup, logIntoElement, logIntoElementAndVerify } from "./utils";
+import { expect, test } from "../../element-web-test";
+import { createBot, deleteCachedSecrets, disableKeyBackup, logIntoElement, verifyAfterLogin } from "./utils";
 import { type Bot } from "../../pages/bot";
 
 // Mask the background of the screenshot to avoid failing the test just because some
@@ -28,7 +29,8 @@ test.describe("Key storage out of sync toast", () => {
         const res = await createBot(page, homeserver, credentials);
         recoveryKey = res.recoveryKey;
 
-        await logIntoElementAndVerify(page, credentials, recoveryKey.encodedPrivateKey);
+        await logIntoElement(page, credentials);
+        await verifyAfterLogin(page, recoveryKey.encodedPrivateKey!);
 
         await deleteCachedSecrets(page);
     });
@@ -41,7 +43,7 @@ test.describe("Key storage out of sync toast", () => {
 
         await page.getByRole("button", { name: "Enter recovery key" }).click();
 
-        await page.getByRole("textbox", { name: "Recovery Key" }).fill(recoveryKey.encodedPrivateKey);
+        await page.getByRole("textbox", { name: "Recovery Key" }).fill(recoveryKey.encodedPrivateKey!);
         await page.getByRole("button", { name: "Continue" }).click();
 
         await expect(page.getByRole("button", { name: "Enter recovery key" })).not.toBeVisible();
@@ -61,16 +63,17 @@ test.describe("Key storage out of sync toast", () => {
 });
 
 test.describe("'Turn on key storage' toast", () => {
-    let botClient: Bot | undefined;
+    let botClient: Bot;
 
-    test.beforeEach(async ({ page, homeserver, credentials, toasts }) => {
+    test.beforeEach(async ({ page, homeserver, credentials }) => {
         // Set up all crypto stuff. Key storage defaults to on.
 
         const res = await createBot(page, homeserver, credentials);
         const recoveryKey = res.recoveryKey;
         botClient = res.botClient;
 
-        await logIntoElementAndVerify(page, credentials, recoveryKey.encodedPrivateKey);
+        await logIntoElement(page, credentials);
+        await verifyAfterLogin(page, recoveryKey.encodedPrivateKey!);
 
         // We won't be prompted for crypto setup unless we have an e2e room, so make one
         await page
@@ -81,13 +84,13 @@ test.describe("'Turn on key storage' toast", () => {
         await page.getByRole("textbox", { name: "Name" }).fill("Test room");
         await page.getByRole("button", { name: "Create room" }).click();
 
-        await toasts.rejectToast("Notifications");
+        await rejectToast(page, "Notifications");
     });
 
-    test("should not show toast if key storage is on", async ({ page, toasts }) => {
+    test("should not show toast if key storage is on", async ({ page }) => {
         // Given the default situation after signing in
         // Then no toast is shown (because key storage is on)
-        await toasts.assertNoToasts();
+        await assertNoToasts(page);
 
         // When we reload
         await page.reload();
@@ -96,15 +99,15 @@ test.describe("'Turn on key storage' toast", () => {
         await new Promise((resolve) => setTimeout(resolve, 2000));
 
         // Then still no toast is shown
-        await toasts.assertNoToasts();
+        await assertNoToasts(page);
     });
 
-    test("should not show toast if key storage is off because we turned it off", async ({ app, page, toasts }) => {
+    test("should not show toast if key storage is off because we turned it off", async ({ app, page }) => {
         // Given the backup is disabled because we disabled it
         await disableKeyBackup(app);
 
         // Then no toast is shown
-        await toasts.assertNoToasts();
+        await assertNoToasts(page);
 
         // When we reload
         await page.reload();
@@ -113,13 +116,14 @@ test.describe("'Turn on key storage' toast", () => {
         await new Promise((resolve) => setTimeout(resolve, 2000));
 
         // Then still no toast is shown
-        await toasts.assertNoToasts();
+        await assertNoToasts(page);
     });
 
-    test("should show toast if key storage is off but account data is missing", async ({ app, page, toasts }) => {
+    test("should show toast if key storage is off but account data is missing", async ({ app, page }) => {
         // Given the backup is disabled but we didn't set account data saying that is expected
         await disableKeyBackup(app);
-        await botClient.setAccountData("m.org.matrix.custom.backup_disabled", { disabled: false });
+        await botClient.setAccountData("m.org.matrix.custom.backup_disabled", {} as any as { disabled: boolean });
+        await botClient.setAccountData("m.key_backup", {} as any as { enabled: boolean });
 
         // Wait for the account data setting to stick
         await new Promise((resolve) => setTimeout(resolve, 2000));
@@ -128,7 +132,7 @@ test.describe("'Turn on key storage' toast", () => {
         await page.reload();
 
         // Then the toast is displayed
-        let toast = await toasts.getToast("Turn on key storage");
+        let toast = await getToast(page, "Turn on key storage");
 
         // And when we click "Continue"
         await toast.getByRole("button", { name: "Continue" }).click();
@@ -140,7 +144,7 @@ test.describe("'Turn on key storage' toast", () => {
         await page.getByRole("button", { name: "Close dialog" }).click();
 
         // Then we see the toast again
-        toast = await toasts.getToast("Turn on key storage");
+        toast = await getToast(page, "Turn on key storage");
 
         // And when we click "Dismiss"
         await toast.getByRole("button", { name: "Dismiss" }).click();
@@ -154,7 +158,7 @@ test.describe("'Turn on key storage' toast", () => {
         await page.getByTestId("dialog-background").click({ force: true, position: { x: 10, y: 10 } });
 
         // Then we see the toast again
-        toast = await toasts.getToast("Turn on key storage");
+        toast = await getToast(page, "Turn on key storage");
 
         // And when we click Dismiss and then "Go to Settings"
         await toast.getByRole("button", { name: "Dismiss" }).click();
@@ -165,12 +169,12 @@ test.describe("'Turn on key storage' toast", () => {
 
         // And when we close that, see the toast, click Dismiss, and Yes, Dismiss
         await page.getByRole("button", { name: "Close dialog" }).click();
-        toast = await toasts.getToast("Turn on key storage");
+        toast = await getToast(page, "Turn on key storage");
         await toast.getByRole("button", { name: "Dismiss" }).click();
         await page.getByRole("button", { name: "Yes, dismiss" }).click();
 
         // Then the toast is gone
-        await toasts.assertNoToasts();
+        await assertNoToasts(page);
     });
 });
 
diff --git a/apps/web/playwright/e2e/crypto/user-verification.spec.ts b/apps/web/playwright/e2e/crypto/user-verification.spec.ts
index ebe86c0a6e..f4cc78dfd5 100644
--- a/apps/web/playwright/e2e/crypto/user-verification.spec.ts
+++ b/apps/web/playwright/e2e/crypto/user-verification.spec.ts
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type Preset, type Visibility } from "matrix-js-sdk/src/matrix";
+import { getToast } from "@element-hq/element-web-playwright-common";
 
 import { test, expect } from "../../element-web-test";
 import { doTwoWaySasVerification, awaitVerifier, waitForDevices } from "./utils";
@@ -36,10 +37,9 @@ test.describe("User verification", () => {
         page,
         bot: bob,
         user: aliceCredentials,
-        toasts,
         room: { roomId: dmRoomId },
     }) => {
-        await waitForDevices(app, bob.credentials.userId, 1);
+        await waitForDevices(app, bob.credentials!.userId, 1);
         await expect(page.getByRole("button", { name: "Avatar" })).toBeVisible();
         const avatar = page.getByRole("button", { name: "Avatar" });
         await avatar.click();
@@ -47,22 +47,22 @@ test.describe("User verification", () => {
         // once Alice has joined, Bob starts the verification
         const bobVerificationRequest = await bob.evaluateHandle(
             async (client, { dmRoomId, aliceCredentials }) => {
-                const room = client.getRoom(dmRoomId);
+                const room = client.getRoom(dmRoomId)!;
                 while (room.getMember(aliceCredentials.userId)?.membership !== "join") {
                     await new Promise((resolve) => {
                         room.once(window.matrixcs.RoomStateEvent.Members, resolve);
                     });
                 }
 
-                return client.getCrypto().requestVerificationDM(aliceCredentials.userId, dmRoomId);
+                return client.getCrypto()!.requestVerificationDM(aliceCredentials.userId, dmRoomId);
             },
             { dmRoomId, aliceCredentials },
         );
 
         // there should also be a toast
-        const toast = await toasts.getToast("Verification requested");
+        const toast = await getToast(page, "Verification requested");
         // it should contain the details of the requesting user
-        await expect(toast.getByText(`Bob (${bob.credentials.userId})`)).toBeVisible();
+        await expect(toast.getByText(`Bob (${bob.credentials!.userId})`)).toBeVisible();
         // Accept
         await toast.getByRole("button", { name: "Verify User" }).click();
 
@@ -91,10 +91,9 @@ test.describe("User verification", () => {
         page,
         bot: bob,
         user: aliceCredentials,
-        toasts,
         room: { roomId: dmRoomId },
     }) => {
-        await waitForDevices(app, bob.credentials.userId, 1);
+        await waitForDevices(app, bob.credentials!.userId, 1);
         await expect(page.getByRole("button", { name: "Avatar" })).toBeVisible();
         const avatar = page.getByRole("button", { name: "Avatar" });
         await avatar.click();
@@ -102,20 +101,20 @@ test.describe("User verification", () => {
         // once Alice has joined, Bob starts the verification
         const bobVerificationRequest = await bob.evaluateHandle(
             async (client, { dmRoomId, aliceCredentials }) => {
-                const room = client.getRoom(dmRoomId);
+                const room = client.getRoom(dmRoomId)!;
                 while (room.getMember(aliceCredentials.userId)?.membership !== "join") {
                     await new Promise((resolve) => {
                         room.once(window.matrixcs.RoomStateEvent.Members, resolve);
                     });
                 }
 
-                return client.getCrypto().requestVerificationDM(aliceCredentials.userId, dmRoomId);
+                return client.getCrypto()!.requestVerificationDM(aliceCredentials.userId, dmRoomId);
             },
             { dmRoomId, aliceCredentials },
         );
 
         // Accept verification via toast
-        const toast = await toasts.getToast("Verification requested");
+        const toast = await getToast(page, "Verification requested");
         await toast.getByRole("button", { name: "Verify User" }).click();
 
         // Wait for the QR code to be rendered. If we don't do this, then the QR code can be rendered just as
diff --git a/apps/web/playwright/e2e/crypto/utils.ts b/apps/web/playwright/e2e/crypto/utils.ts
index f08863ccdb..194a10bf22 100644
--- a/apps/web/playwright/e2e/crypto/utils.ts
+++ b/apps/web/playwright/e2e/crypto/utils.ts
@@ -51,7 +51,7 @@ export async function createBot(
     botClient.setCredentials(credentials);
     // Backup is prepared in the background. Poll until it is ready.
     const botClientHandle = await botClient.prepareClient();
-    let expectedBackupVersion: string;
+    let expectedBackupVersion: string | null;
     await expect
         .poll(async () => {
             expectedBackupVersion = await botClientHandle.evaluate((cli) =>
@@ -63,7 +63,7 @@ export async function createBot(
 
     const recoveryKey = await botClient.getRecoveryKey();
 
-    return { botClient, recoveryKey, expectedBackupVersion };
+    return { botClient, recoveryKey, expectedBackupVersion: expectedBackupVersion! };
 }
 
 /**
@@ -98,13 +98,15 @@ export async function waitForVerificationRequest(client: Client): Promise<JSHand
 export function handleSasVerification(verifier: JSHandle<Verifier>): Promise<EmojiMapping[]> {
     return verifier.evaluate((verifier) => {
         const event = verifier.getShowSasCallbacks();
-        if (event) return event.sas.emoji;
+        if (event) {
+            return event.sas.emoji!;
+        }
 
         return new Promise<EmojiMapping[]>((resolve) => {
             const onShowSas = (event: ShowSasCallbacks) => {
                 verifier.off("show_sas" as VerifierEvent, onShowSas);
                 void event.confirm();
-                resolve(event.sas.emoji);
+                resolve(event.sas.emoji!);
             };
 
             verifier.on("show_sas" as VerifierEvent, onShowSas);
@@ -117,24 +119,24 @@ export function handleSasVerification(verifier: JSHandle<Verifier>): Promise<Emo
  */
 export async function checkDeviceIsCrossSigned(app: ElementAppPage): Promise<void> {
     const { userId, deviceId, keys } = await app.client.evaluate(async (cli: MatrixClient) => {
-        const deviceId = cli.getDeviceId();
-        const userId = cli.getUserId();
+        const deviceId = cli.getDeviceId()!;
+        const userId = cli.getSafeUserId();
         const keys = await cli.downloadKeysForUsers([userId]);
 
         return { userId, deviceId, keys };
     });
 
     // there should be three cross-signing keys
-    expect(keys.master_keys[userId]).toHaveProperty("keys");
-    expect(keys.self_signing_keys[userId]).toHaveProperty("keys");
-    expect(keys.user_signing_keys[userId]).toHaveProperty("keys");
+    expect(keys.master_keys![userId]).toHaveProperty("keys");
+    expect(keys.self_signing_keys![userId]).toHaveProperty("keys");
+    expect(keys.user_signing_keys![userId]).toHaveProperty("keys");
 
     // and the device should be signed by the self-signing key
-    const selfSigningKeyId = Object.keys(keys.self_signing_keys[userId].keys)[0];
+    const selfSigningKeyId = Object.keys(keys.self_signing_keys![userId].keys)[0];
 
     expect(keys.device_keys[userId][deviceId]).toBeDefined();
 
-    const myDeviceSignatures = keys.device_keys[userId][deviceId].signatures[userId];
+    const myDeviceSignatures = keys.device_keys[userId][deviceId].signatures![userId];
     expect(myDeviceSignatures[selfSigningKeyId]).toBeDefined();
 }
 
@@ -190,7 +192,7 @@ export async function checkDeviceIsConnectedKeyBackup(
     // We have a key backup
     expect(backupInfo).toBeDefined();
     // The key backup version is as expected
-    expect(backupInfo.version).toBe(expectedBackupVersion);
+    expect(backupInfo!.version).toBe(expectedBackupVersion);
     // The active backup version is as expected
     expect(activeBackupVersion).toBe(expectedBackupVersion);
     // The backup key is stored in 4S
@@ -211,19 +213,19 @@ export async function logIntoElement(page: Page, credentials: Credentials) {
     await page.goto("/#/login");
 
     await page.getByRole("textbox", { name: "Username" }).fill(credentials.userId);
-    await page.getByPlaceholder("Password").fill(credentials.password);
+    await page.getByPlaceholder("Password").fill(credentials.password!);
     await page.getByRole("button", { name: "Sign in" }).click();
 }
 
 /**
- * Fill in the login form in Element with the given creds, and then complete the `CompleteSecurity` step, using the
- * given recovery key. (Normally this will verify the new device using the secrets from 4S.)
+ * Complete the `CompleteSecurity` step that happens after login, using the given recovery key.
+ * (Normally this will verify the new device using the secrets from 4S.)
  *
  * Afterwards, waits for the application to redirect to the home page.
+ *
+ * This is normally useful after a call to {@link logIntoElement} or {@link logInAccountMas}.
  */
-export async function logIntoElementAndVerify(page: Page, credentials: Credentials, recoveryKey: string) {
-    await logIntoElement(page, credentials);
-
+export async function verifyAfterLogin(page: Page, recoveryKey: string) {
     await page.locator(".mx_AuthPage").getByRole("button", { name: "Use recovery key" }).click();
 
     const useSecurityKey = page.locator(".mx_Dialog").getByRole("button", { name: "Use recovery key" });
@@ -248,7 +250,7 @@ export async function logIntoElementAndVerify(page: Page, credentials: Credentia
  * Click the "sign out" option in Element, and wait for the welcome page to load
  *
  * @param page - Playwright `Page` object.
- * @param discardKeys - if true, expect a "You'll lose access to your encrypted messages" dialog, and dismiss it.
+ * @param discardKeys - if true, expect a "You're about to lose access to your encrypted chats" dialog, and dismiss it.
  */
 export async function logOutOfElement(page: Page, discardKeys: boolean = false) {
     await page.getByRole("button", { name: "User menu" }).click();
@@ -256,7 +258,7 @@ export async function logOutOfElement(page: Page, discardKeys: boolean = false)
     await page.getByRole("menu", { name: "User menu" }).getByRole("menuitem", { name: "All settings" }).click();
     await page.getByRole("button", { name: "Remove this device" }).click();
     if (discardKeys) {
-        await page.getByRole("button", { name: "I don't want my encrypted messages" }).click();
+        await page.getByRole("button", { name: "Remove this device anyway" }).click();
     } else {
         await page.locator(".mx_Dialog .mx_QuestionDialog").getByRole("button", { name: "Remove this device" }).click();
     }
@@ -379,7 +381,7 @@ export async function completeCreateSecretStorageDialog(
     // the step is quite quick, and playwright can miss it, so we can't test for it.
     if (opts && Object.hasOwn(opts, "accountPassword")) {
         await expect(currentDialogLocator.getByRole("heading", { name: "Setting up keys" })).toBeVisible();
-        await page.getByPlaceholder("Password").fill(opts!.accountPassword);
+        await page.getByPlaceholder("Password").fill(opts!.accountPassword!);
         await currentDialogLocator.getByRole("button", { name: "Continue" }).click();
     }
 
@@ -406,6 +408,7 @@ export async function copyAndContinue(page: Page) {
  * @param opts - other options for the createRoom call
  *
  * @returns a promise which resolves to the room ID
+ * @see createSharedEncryptedRoomWithUser
  */
 export async function createSharedRoomWithUser(
     app: ElementAppPage,
@@ -423,6 +426,32 @@ export async function createSharedRoomWithUser(
     return roomId;
 }
 
+/**
+ * Create a shared, encrypted room with the given user, and wait for them to join
+ *
+ * @param other - UserID of the other user
+ * @param opts - other options for the createRoom call
+ *
+ * @returns a promise which resolves to the room ID
+ * @see createSharedRoomWithUser
+ */
+export async function createSharedEncryptedRoomWithUser(
+    app: ElementAppPage,
+    other: string,
+    opts: Omit<ICreateRoomOpts, "invite"> = { name: "TestRoom" },
+): Promise<string> {
+    opts = structuredClone(opts);
+    opts.initial_state ??= [];
+    opts.initial_state.push({
+        type: "m.room.encryption",
+        state_key: "",
+        content: {
+            algorithm: "m.megolm.v1.aes-sha2",
+        },
+    });
+    return createSharedRoomWithUser(app, other, opts);
+}
+
 /**
  * Send a message in the current room
  * @param page
@@ -568,7 +597,7 @@ export async function createSecondBotDevice(page: Page, homeserver: HomeserverIn
         bootstrapSecretStorage: false,
         bootstrapCrossSigning: false,
     });
-    bobSecondDevice.setCredentials(await homeserver.loginUser(bob.credentials.userId, bob.credentials.password));
+    bobSecondDevice.setCredentials(await homeserver.loginUser(bob.credentials!.userId, bob.credentials!.password!));
     await bobSecondDevice.prepareClient();
     return bobSecondDevice;
 }
@@ -611,7 +640,7 @@ export async function waitForDevices(
             for (let i = 0; i < 10; ++i) {
                 const userDeviceMap = await cli.getCrypto()?.getUserDeviceInfo([userId], true);
                 const deviceMap = userDeviceMap?.get(userId);
-                if (deviceMap.size === expectedNumberOfDevices) return true;
+                if (deviceMap?.size === expectedNumberOfDevices) return true;
                 await new Promise((r) => setTimeout(r, 500));
             }
             return false;
diff --git a/apps/web/playwright/e2e/devtools/lowbandwidth.spec.ts b/apps/web/playwright/e2e/devtools/lowbandwidth.spec.ts
index 8d5022623d..025868a815 100644
--- a/apps/web/playwright/e2e/devtools/lowbandwidth.spec.ts
+++ b/apps/web/playwright/e2e/devtools/lowbandwidth.spec.ts
@@ -5,6 +5,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 { rejectToast } from "@element-hq/element-web-playwright-common";
+
 import { test, expect } from "../../element-web-test";
 import { getSampleFilePath } from "../../sample-files";
 
@@ -19,7 +21,7 @@ test.describe("Devtools", () => {
         const profileSettings = userSettings.locator(".mx_UserProfileSettings");
         await profileSettings.getByAltText("Upload").setInputFiles(getSampleFilePath("riot.png"));
         await app.closeDialog();
-        await app.closeVerifyToast();
+        await rejectToast(page, "Verify this device");
 
         // Create an initial room.
         const createRoomDialog = await app.openCreateRoomDialog();
diff --git a/apps/web/playwright/e2e/editing/editing.spec.ts b/apps/web/playwright/e2e/editing/editing.spec.ts
index 9b0efecb26..8b8180c77b 100644
--- a/apps/web/playwright/e2e/editing/editing.spec.ts
+++ b/apps/web/playwright/e2e/editing/editing.spec.ts
@@ -362,7 +362,7 @@ test.describe("Editing", () => {
         const messageTile = page.locator(`[data-event-id="${originalEventId}"]`);
         // at this point, the edit event should still be unknown
         const timeline = await app.client.evaluate(
-            (cli, { testRoomId, editEventId }) => cli.getRoom(testRoomId).getTimelineForEvent(editEventId),
+            (cli, { testRoomId, editEventId }) => cli.getRoom(testRoomId)!.getTimelineForEvent(editEventId),
             { testRoomId, editEventId },
         );
         expect(timeline).toBeNull();
diff --git a/apps/web/playwright/e2e/feedback/rageshakes.spec.ts b/apps/web/playwright/e2e/feedback/rageshakes.spec.ts
index 58476f04ac..9fae568c82 100644
--- a/apps/web/playwright/e2e/feedback/rageshakes.spec.ts
+++ b/apps/web/playwright/e2e/feedback/rageshakes.spec.ts
@@ -94,7 +94,7 @@ test.describe("Rageshakes", () => {
                 if (request.method() !== "POST") {
                     throw Error("Expected POST");
                 }
-                const fields = formDataParser(request.postData(), await request.headerValue("Content-Type"));
+                const fields = formDataParser(request.postData()!, await request.headerValue("Content-Type"));
                 expect(fields.text).toEqual(
                     "These are some notes\n\nIssue: https://github.com/element-hq/element-web/12345",
                 );
diff --git a/apps/web/playwright/e2e/file-upload/image-upload.spec.ts b/apps/web/playwright/e2e/file-upload/image-upload.spec.ts
index 67ca01bd09..2af553ed66 100644
--- a/apps/web/playwright/e2e/file-upload/image-upload.spec.ts
+++ b/apps/web/playwright/e2e/file-upload/image-upload.spec.ts
@@ -37,7 +37,7 @@ test.describe("Image Upload", () => {
     test("should allow upload via drag and drop", { tag: "@screenshot" }, async ({ page, app }) => {
         await app.composerDragAndUploadFiles("room", getSampleFilePath("riot.png"), "image/png");
         await app.timeline.scrollToBottom();
-        const imgTile = page.locator(".mx_MImageBody").first();
+        const imgTile = page.locator(".mx_ImageBody").first();
         await expect(imgTile).toBeVisible();
     });
 });
diff --git a/apps/web/playwright/e2e/forgot-password/forgot-password.spec.ts b/apps/web/playwright/e2e/forgot-password/forgot-password.spec.ts
index d075afda73..1b9dad290c 100644
--- a/apps/web/playwright/e2e/forgot-password/forgot-password.spec.ts
+++ b/apps/web/playwright/e2e/forgot-password/forgot-password.spec.ts
@@ -14,7 +14,6 @@ import { isDendrite } from "../../plugins/homeserver/dendrite";
 const email = "user@nowhere.dummy";
 
 const test = base.extend({
-    // eslint-disable-next-line no-empty-pattern
     credentials: async ({}, use, testInfo) => {
         await use({
             username: `user_${testInfo.testId}`,
@@ -57,7 +56,7 @@ test.describe("Forgot Password", () => {
         "renders email verification dialog properly",
         { tag: "@screenshot" },
         async ({ page, homeserver, credentials }) => {
-            const user = await homeserver.registerUser(credentials.username, credentials.password);
+            const user = await homeserver.registerUser(credentials.username, credentials.password!);
 
             await homeserver.setThreepid(user.userId, "email", email);
 
@@ -74,8 +73,8 @@ test.describe("Forgot Password", () => {
 
             await page.getByRole("button", { name: "Next" }).click();
 
-            await page.getByRole("textbox", { name: "New Password", exact: true }).fill(credentials.password);
-            await page.getByRole("textbox", { name: "Confirm new password", exact: true }).fill(credentials.password);
+            await page.getByRole("textbox", { name: "New Password", exact: true }).fill(credentials.password!);
+            await page.getByRole("textbox", { name: "Confirm new password", exact: true }).fill(credentials.password!);
 
             await page.getByRole("button", { name: "Reset password" }).click();
 
diff --git a/apps/web/playwright/e2e/integration-manager/kick.spec.ts b/apps/web/playwright/e2e/integration-manager/kick.spec.ts
index b1aa9eff52..e41d95d2bb 100644
--- a/apps/web/playwright/e2e/integration-manager/kick.spec.ts
+++ b/apps/web/playwright/e2e/integration-manager/kick.spec.ts
@@ -6,6 +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 { closeReleaseAnnouncement } from "@element-hq/element-web-playwright-common";
+
 import type { Page } from "@playwright/test";
 import { test, expect } from "../../element-web-test";
 import { openIntegrationManager } from "./utils";
@@ -139,20 +141,30 @@ test.describe("Integration Manager: Kick", () => {
         await app.viewRoomByName(ROOM_NAME);
     });
 
+    test.beforeEach(async ({ page, user, app, room }) => {
+        // Close the release announcement about the new room list sections
+        await closeReleaseAnnouncement(page, "Introducing Sections");
+    });
+
     test("should kick the target", async ({ page, app, bot: targetUser, room }) => {
         await app.viewRoomByName(ROOM_NAME);
-        await app.client.inviteUser(room.roomId, targetUser.credentials.userId);
+        await app.client.inviteUser(room.roomId, targetUser.credentials!.userId);
         await expect(page.getByText(`${BOT_DISPLAY_NAME} joined the room`)).toBeVisible();
 
         await openIntegrationManager(app);
-        await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
+        await sendActionFromIntegrationManager(
+            page,
+            integrationManagerUrl,
+            room.roomId,
+            targetUser.credentials!.userId,
+        );
         await closeIntegrationManager(page, integrationManagerUrl);
         await expectKickedMessage(page, true);
     });
 
     test("should not kick the target if lacking permissions", async ({ page, app, user, bot: targetUser, room }) => {
         await app.viewRoomByName(ROOM_NAME);
-        await app.client.inviteUser(room.roomId, targetUser.credentials.userId);
+        await app.client.inviteUser(room.roomId, targetUser.credentials!.userId);
         await expect(page.getByText(`${BOT_DISPLAY_NAME} joined the room`)).toBeVisible();
 
         await app.client.sendStateEvent(room.roomId, "m.room.power_levels", {
@@ -163,31 +175,46 @@ test.describe("Integration Manager: Kick", () => {
         });
 
         await openIntegrationManager(app);
-        await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
+        await sendActionFromIntegrationManager(
+            page,
+            integrationManagerUrl,
+            room.roomId,
+            targetUser.credentials!.userId,
+        );
         await closeIntegrationManager(page, integrationManagerUrl);
         await expectKickedMessage(page, false);
     });
 
     test("should no-op if the target already left", async ({ page, app, bot: targetUser, room }) => {
         await app.viewRoomByName(ROOM_NAME);
-        await app.client.inviteUser(room.roomId, targetUser.credentials.userId);
+        await app.client.inviteUser(room.roomId, targetUser.credentials!.userId);
         await expect(page.getByText(`${BOT_DISPLAY_NAME} joined the room`)).toBeVisible();
         await targetUser.leave(room.roomId);
 
         await openIntegrationManager(app);
-        await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
+        await sendActionFromIntegrationManager(
+            page,
+            integrationManagerUrl,
+            room.roomId,
+            targetUser.credentials!.userId,
+        );
         await closeIntegrationManager(page, integrationManagerUrl);
         await expectKickedMessage(page, false);
     });
 
     test("should no-op if the target was banned", async ({ page, app, bot: targetUser, room }) => {
         await app.viewRoomByName(ROOM_NAME);
-        await app.client.inviteUser(room.roomId, targetUser.credentials.userId);
+        await app.client.inviteUser(room.roomId, targetUser.credentials!.userId);
         await expect(page.getByText(`${BOT_DISPLAY_NAME} joined the room`)).toBeVisible();
-        await app.client.ban(room.roomId, targetUser.credentials.userId);
+        await app.client.ban(room.roomId, targetUser.credentials!.userId);
 
         await openIntegrationManager(app);
-        await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
+        await sendActionFromIntegrationManager(
+            page,
+            integrationManagerUrl,
+            room.roomId,
+            targetUser.credentials!.userId,
+        );
         await closeIntegrationManager(page, integrationManagerUrl);
         await expectKickedMessage(page, false);
     });
@@ -196,7 +223,12 @@ test.describe("Integration Manager: Kick", () => {
         await app.viewRoomByName(ROOM_NAME);
 
         await openIntegrationManager(app);
-        await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
+        await sendActionFromIntegrationManager(
+            page,
+            integrationManagerUrl,
+            room.roomId,
+            targetUser.credentials!.userId,
+        );
         await closeIntegrationManager(page, integrationManagerUrl);
         await expectKickedMessage(page, false);
     });
diff --git a/apps/web/playwright/e2e/integration-manager/send_event.spec.ts b/apps/web/playwright/e2e/integration-manager/send_event.spec.ts
index 7edcf9812b..f100e7ea64 100644
--- a/apps/web/playwright/e2e/integration-manager/send_event.spec.ts
+++ b/apps/web/playwright/e2e/integration-manager/send_event.spec.ts
@@ -6,6 +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 { closeReleaseAnnouncement, rejectToast } from "@element-hq/element-web-playwright-common";
+
 import type { Page } from "@playwright/test";
 import { test, expect } from "../../element-web-test";
 import { openIntegrationManager } from "./utils";
@@ -103,6 +105,11 @@ test.describe("Integration Manager: Send Event", () => {
     });
 
     test.beforeEach(async ({ page, user, app, room }) => {
+        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");
+        // Close the release announcement about the new room list sections
+        await closeReleaseAnnouncement(page, "Introducing Sections");
+
         await app.client.setAccountData("m.widgets", {
             "m.integration_manager": {
                 content: {
diff --git a/apps/web/playwright/e2e/invite/invite-dialog.spec.ts b/apps/web/playwright/e2e/invite/invite-dialog.spec.ts
index 811f948f05..ea518d588d 100644
--- a/apps/web/playwright/e2e/invite/invite-dialog.spec.ts
+++ b/apps/web/playwright/e2e/invite/invite-dialog.spec.ts
@@ -7,6 +7,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 { rejectToast } from "@element-hq/element-web-playwright-common";
+
 import { test, expect } from "../../element-web-test";
 
 /**
@@ -53,13 +55,13 @@ test.describe("Invite dialog", function () {
 
         await expect(other.locator(".mx_InviteDialog_identityServer")).not.toBeVisible();
 
-        await other.getByTestId("invite-dialog-input").fill(bot.credentials.userId);
+        await other.getByTestId("invite-dialog-input").fill(bot.credentials!.userId);
 
         // Assert that notification about identity servers appears after typing userId
         await expect(other.locator(".mx_InviteDialog_identityServer")).toBeVisible();
 
         // Assert that the bot id is rendered properly
-        await expect(other.getByRole("option", { name: botName }).getByText(bot.credentials.userId)).toBeVisible();
+        await expect(other.getByRole("option", { name: botName }).getByText(bot.credentials!.userId)).toBeVisible();
 
         await other.getByRole("option", { name: botName }).click();
 
@@ -91,7 +93,7 @@ test.describe("Invite dialog", function () {
         "should support inviting a user to Direct Messages",
         { tag: "@screenshot" },
         async ({ page, app, user, bot }) => {
-            await app.closeVerifyToast();
+            await rejectToast(page, "Verify this device");
             await page
                 .getByRole("navigation", { name: "Room list" })
                 .getByRole("button", { name: "New conversation" })
@@ -110,9 +112,9 @@ test.describe("Invite dialog", function () {
             // Take a snapshot of the invite dialog
             await expect(page.locator(".mx_Dialog")).toMatchScreenshot("invite-dialog-dm-without-user.png");
 
-            await other.getByTestId("invite-dialog-input").fill(bot.credentials.userId);
+            await other.getByTestId("invite-dialog-input").fill(bot.credentials!.userId);
 
-            await expect(other.getByRole("option", { name: botName }).getByText(bot.credentials.userId)).toBeVisible();
+            await expect(other.getByRole("option", { name: botName }).getByText(bot.credentials!.userId)).toBeVisible();
             await other.getByRole("option", { name: botName }).click();
 
             await expect(other.getByTestId("invite-dialog-input-wrapper").getByText(botName)).toBeVisible();
diff --git a/apps/web/playwright/e2e/knock/create-knock-room.spec.ts b/apps/web/playwright/e2e/knock/create-knock-room.spec.ts
index 1813907160..5097d12096 100644
--- a/apps/web/playwright/e2e/knock/create-knock-room.spec.ts
+++ b/apps/web/playwright/e2e/knock/create-knock-room.spec.ts
@@ -6,6 +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 { rejectToast } from "@element-hq/element-web-playwright-common";
+
 import { test, expect } from "../../element-web-test";
 import { waitForRoom } from "../utils";
 import { Filter } from "../../pages/Spotlight";
@@ -19,7 +21,7 @@ test.describe("Create Knock Room", () => {
     });
 
     test("should create a knock room", async ({ page, app, user }) => {
-        await app.closeVerifyToast();
+        await rejectToast(page, "Verify this device");
 
         const dialog = await app.openCreateRoomDialog();
         await dialog.getByRole("textbox", { name: "Name" }).fill("Cybersecurity");
@@ -39,7 +41,7 @@ test.describe("Create Knock Room", () => {
     });
 
     test("should create a room and change a join rule to knock", async ({ page, app, user }) => {
-        await app.closeVerifyToast();
+        await rejectToast(page, "Verify this device");
 
         const dialog = await app.openCreateRoomDialog();
         await dialog.getByRole("textbox", { name: "Name" }).fill("Cybersecurity");
@@ -63,7 +65,7 @@ test.describe("Create Knock Room", () => {
     });
 
     test("should create a public knock room", async ({ page, app, user }) => {
-        await app.closeVerifyToast();
+        await rejectToast(page, "Verify this device");
 
         const dialog = await app.openCreateRoomDialog();
         await dialog.getByRole("textbox", { name: "Name" }).fill("Cybersecurity");
diff --git a/apps/web/playwright/e2e/lazy-loading/lazy-loading.spec.ts b/apps/web/playwright/e2e/lazy-loading/lazy-loading.spec.ts
index f6f098a079..7d286b27d4 100644
--- a/apps/web/playwright/e2e/lazy-loading/lazy-loading.spec.ts
+++ b/apps/web/playwright/e2e/lazy-loading/lazy-loading.spec.ts
@@ -80,8 +80,12 @@ test.describe("Lazy Loading", () => {
     async function checkPaginatedDisplayNames(app: ElementAppPage, charlies: Bot[]) {
         await app.timeline.scrollToTop();
         for (const charly of charlies) {
-            await expect(await app.timeline.findEventTile(charly.credentials.displayName, charlyMsg1)).toBeAttached();
-            await expect(await app.timeline.findEventTile(charly.credentials.displayName, charlyMsg2)).toBeAttached();
+            await expect(
+                (await app.timeline.findEventTile(charly.credentials!.displayName!, charlyMsg1))!,
+            ).toBeAttached();
+            await expect(
+                (await app.timeline.findEventTile(charly.credentials!.displayName!, charlyMsg2))!,
+            ).toBeAttached();
         }
     }
 
@@ -99,13 +103,13 @@ test.describe("Lazy Loading", () => {
         await expect(getMemberInMemberlist(page, "Alice")).toBeAttached();
         await expect(getMemberInMemberlist(page, "Bob")).toBeAttached();
         for (const charly of charlies) {
-            await expect(getMemberInMemberlist(page, charly.credentials.displayName)).toBeAttached();
+            await expect(getMemberInMemberlist(page, charly.credentials!.displayName!)).toBeAttached();
         }
     }
 
     async function checkMemberListLacksCharlies(page: Page, charlies: Bot[]) {
         for (const charly of charlies) {
-            await expect(getMemberInMemberlist(page, charly.credentials.displayName)).not.toBeAttached();
+            await expect(getMemberInMemberlist(page, charly.credentials!.displayName!)).not.toBeAttached();
         }
     }
 
diff --git a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-collapse.spec.ts b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-collapse.spec.ts
index 73a670ee9f..977b0ffa24 100644
--- a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-collapse.spec.ts
+++ b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-collapse.spec.ts
@@ -5,17 +5,20 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
+import { rejectToast } from "@element-hq/element-web-playwright-common";
+
 import { test, expect } from "../../../element-web-test";
 import type { Locator, Page } from "playwright-core";
 
 test.describe("Collapsible Room list", () => {
     test.use({
         displayName: "Alice",
+        lockLeftPanelWidth: false,
     });
 
     test.beforeEach(async ({ page, app, user }) => {
-        await app.closeVerifyToast();
-        await app.closeNotificationToast();
+        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");
         for (let i = 0; i < 10; i++) {
             await app.client.createRoom({ name: `room${i}` });
         }
@@ -30,8 +33,8 @@ test.describe("Collapsible Room list", () => {
         const boundingBox = await leftPanelLocator.boundingBox();
 
         // Move mouse 2px to the right of the left-panel, this should be region that the user drags to resize the panel.
-        const mouseX = boundingBox.x + boundingBox.width + 2;
-        const mouseY = boundingBox.y + boundingBox.height / 2;
+        const mouseX = boundingBox!.x + boundingBox!.width + 2;
+        const mouseY = boundingBox!.y + boundingBox!.height / 2;
 
         await page.mouse.move(mouseX, mouseY);
         await page.mouse.down();
@@ -47,12 +50,12 @@ test.describe("Collapsible Room list", () => {
         // Contract the panel
         let previousBoundingBox = await resize(page, -50);
         let currentBoundingBox = await leftPanelLocator.boundingBox();
-        expect(currentBoundingBox.width).toBeCloseTo(previousBoundingBox.width - 50, 0);
+        expect(currentBoundingBox!.width).toBeCloseTo(previousBoundingBox!.width - 50, 0);
 
         // Expand the panel
         previousBoundingBox = await resize(page, 30);
         currentBoundingBox = await leftPanelLocator.boundingBox();
-        expect(currentBoundingBox.width).toBeCloseTo(previousBoundingBox.width + 30, 0);
+        expect(currentBoundingBox!.width).toBeCloseTo(previousBoundingBox!.width + 30, 0);
     });
 
     test(
@@ -64,7 +67,7 @@ test.describe("Collapsible Room list", () => {
             // Collapse the panel
             await resize(page, -300);
             let currentBoundingBox = await leftPanelLocator.boundingBox();
-            expect(currentBoundingBox.width).toStrictEqual(0);
+            expect(currentBoundingBox!.width).toStrictEqual(0);
 
             // Expect te separator to be shown
             const separator = page.getByRole("separator", { name: "Click or drag to expand" });
@@ -74,19 +77,19 @@ test.describe("Collapsible Room list", () => {
             // Should be possible to expand by clicking on the separator
             await separator.click();
             currentBoundingBox = await leftPanelLocator.boundingBox();
-            expect(currentBoundingBox.width).toBeGreaterThan(365);
+            expect(currentBoundingBox!.width).toBeGreaterThan(365);
 
             // Collapse the panel again
             await resize(page, -300);
 
             // Check that the panel can be expanded by dragging the separator
             const separatorBoundingBox = await separator.boundingBox();
-            const mouseX = separatorBoundingBox.x + separatorBoundingBox.width / 2;
-            const mouseY = separatorBoundingBox.y + separatorBoundingBox.height / 2;
+            const mouseX = separatorBoundingBox!.x + separatorBoundingBox!.width / 2;
+            const mouseY = separatorBoundingBox!.y + separatorBoundingBox!.height / 2;
             await page.mouse.move(mouseX, mouseY);
             await page.mouse.down();
             await page.mouse.move(mouseX + 400, mouseY);
-            expect(currentBoundingBox.width).toBeGreaterThan(365);
+            expect(currentBoundingBox!.width).toBeGreaterThan(365);
         },
     );
 });
diff --git a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-custom-sections.spec.ts b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-custom-sections.spec.ts
index e40b1a6c0d..671fb8cc84 100644
--- a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-custom-sections.spec.ts
+++ b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-custom-sections.spec.ts
@@ -6,14 +6,22 @@
  */
 
 import { type Page } from "@playwright/test";
+import { closeReleaseAnnouncement, rejectToast } from "@element-hq/element-web-playwright-common";
 
 import { expect, test } from "../../../element-web-test";
-import { getRoomList, getRoomListHeader, getSectionHeader } from "./utils";
+import {
+    assertRoomInSection,
+    assertSectionsOrder,
+    dragRoomToSection,
+    dragSectionToSection,
+    getRoomList,
+    getRoomListHeader,
+    getSectionHeader,
+} from "./utils";
 
 test.describe("Room list custom sections", () => {
     test.use({
         displayName: "Alice",
-        labsFlags: ["feature_new_room_list", "feature_room_list_sections"],
         botCreateOpts: {
             displayName: "BotBob",
             autoAcceptInvites: true,
@@ -40,26 +48,13 @@ test.describe("Room list custom sections", () => {
         await expect(dialog).not.toBeVisible();
     }
 
-    /**
-     * Asserts a room is nested under a specific section using the treegrid aria-level hierarchy.
-     * Section header rows sit at aria-level=1; room rows nested within a section sit at aria-level=2.
-     * Verifies that the closest preceding aria-level=1 row is the expected section header.
-     */
-    async function assertRoomInSection(page: Page, sectionName: string, roomName: string): Promise<void> {
-        const roomList = getRoomList(page);
-        const roomRow = roomList.getByRole("row", { name: `Open room ${roomName}` });
-        // Room row must be at aria-level=2 (i.e. inside a section)
-        await expect(roomRow).toHaveAttribute("aria-level", "2");
-        // The closest preceding aria-level=1 row must be the expected section header.
-        // XPath preceding:: axis returns nodes before the context in document order; [1] picks the nearest one.
-        const closestSectionHeader = roomRow.locator(`xpath=preceding::*[@role="row" and @aria-level="1"][1]`);
-        await expect(closestSectionHeader).toContainText(sectionName);
-    }
-
     test.beforeEach(async ({ page, app, user }) => {
-        // The notification toast is displayed above the search section
-        await app.closeNotificationToast();
-        await app.closeVerifyToast();
+        // The toasts are displayed above the search section
+        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");
+
+        // Close the release announcement about the new room list sections
+        await closeReleaseAnnouncement(page, "Introducing Sections");
 
         // Focus the user menu to avoid hover decoration
         await page.getByRole("button", { name: "User menu" }).focus();
@@ -216,7 +211,7 @@ test.describe("Room list custom sections", () => {
 
             // Change the name and confirm
             await dialog.getByRole("textbox", { name: "Section name" }).fill("Personal");
-            await dialog.getByRole("button", { name: "Edit section" }).click();
+            await dialog.getByRole("button", { name: "Save" }).click();
 
             // Dialog should close
             await expect(dialog).not.toBeVisible();
@@ -299,6 +294,33 @@ test.describe("Room list custom sections", () => {
         });
     });
 
+    test.describe("Section reordering via dnd", () => {
+        test("should reorder custom sections via dnd", async ({ page, app }) => {
+            await app.client.createRoom({ name: "my room" });
+            await createCustomSection(page, "Work");
+            await createCustomSection(page, "Personal");
+
+            // Default placement: custom sections sit at the top of Chats
+            await assertSectionsOrder(page, ["Work", "Personal", "Chats"]);
+
+            // Moves Work after Chats
+            await dragSectionToSection(page, "Work", "Chats");
+            await assertSectionsOrder(page, ["Personal", "Chats", "Work"]);
+        });
+
+        test("should insert a section before the target when dragging up", async ({ page, app }) => {
+            await app.client.createRoom({ name: "my room" });
+            await createCustomSection(page, "Work");
+            await createCustomSection(page, "Personal");
+
+            await assertSectionsOrder(page, ["Work", "Personal", "Chats"]);
+
+            // Personal sits below Work, so dragging it onto Work inserts it before Work.
+            await dragSectionToSection(page, "Personal", "Work");
+            await assertSectionsOrder(page, ["Personal", "Work", "Chats"]);
+        });
+    });
+
     test.describe("Adding a room to a custom section", () => {
         test("should add a room to a custom section via the More Options menu", async ({ page, app }) => {
             await app.client.createRoom({ name: "my room" });
@@ -345,6 +367,22 @@ test.describe("Room list custom sections", () => {
             },
         );
 
+        test("should accept drag and drop into a section created after another section exists", async ({
+            page,
+            app,
+        }) => {
+            await app.client.createRoom({ name: "room A" });
+            await app.client.createRoom({ name: "room B" });
+            await createCustomSection(page, "Work");
+            await createCustomSection(page, "Personal");
+
+            await dragRoomToSection(page, "room A", "Personal");
+            await assertRoomInSection(page, "Personal", "room A");
+
+            await dragRoomToSection(page, "room B", "Work");
+            await assertRoomInSection(page, "Work", "room B");
+        });
+
         test("should remove a room from a custom section when toggling the same section", async ({ page, app }) => {
             await app.client.createRoom({ name: "my room" });
             await createCustomSection(page, "Work");
@@ -370,5 +408,33 @@ test.describe("Room list custom sections", () => {
             // Room is back in the Chats section
             await assertRoomInSection(page, "Chats", "my room");
         });
+
+        test("should remove a room from a custom section via the 'Remove from section' menu entry", async ({
+            page,
+            app,
+        }) => {
+            await app.client.createRoom({ name: "my room" });
+            await createCustomSection(page, "Work");
+
+            const roomList = getRoomList(page);
+
+            // Move the room to the Work section
+            let roomItem = roomList.getByRole("row", { name: "Open room my room" });
+            await roomItem.hover();
+            await roomItem.getByRole("button", { name: "More Options" }).click();
+            await page.getByRole("menuitem", { name: "Move to" }).hover();
+            await page.getByRole("menuitem", { name: "Work" }).click();
+
+            await assertRoomInSection(page, "Work", "my room");
+
+            // Open the More Options menu and click "Remove from section"
+            roomItem = roomList.getByRole("row", { name: "Open room my room" });
+            await roomItem.hover();
+            await roomItem.getByRole("button", { name: "More Options" }).click();
+            await page.getByRole("menuitem", { name: "Remove from section" }).click();
+
+            // Room is back in the Chats section
+            await assertRoomInSection(page, "Chats", "my room");
+        });
     });
 });
diff --git a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts
index 495ced07f6..4488d66cc8 100644
--- a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts
+++ b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts
@@ -7,6 +7,7 @@
 
 import { type Visibility } from "matrix-js-sdk/src/matrix";
 import { type Page } from "@playwright/test";
+import { closeReleaseAnnouncement, rejectToast } from "@element-hq/element-web-playwright-common";
 
 import { expect, test } from "../../../element-web-test";
 import { SettingLevel } from "../../../../src/settings/SettingLevel";
@@ -19,7 +20,6 @@ test.describe("Room list filters and sort", () => {
             displayName: "BotBob",
             autoAcceptInvites: true,
         },
-        labsFlags: ["feature_new_room_list"],
     });
 
     /**
@@ -32,8 +32,11 @@ test.describe("Room list filters and sort", () => {
 
     test.beforeEach(async ({ page, app, bot, user }) => {
         // The toasts are displayed above the search section
-        await app.closeVerifyToast();
-        await app.closeNotificationToast();
+        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");
+
+        // Close the release announcement about the new room list sections
+        await closeReleaseAnnouncement(page, "Introducing Sections");
     });
 
     test("Tombstoned rooms are not shown even when they receive updates", async ({ page, app, bot }) => {
@@ -45,7 +48,7 @@ test.describe("Room list filters and sort", () => {
         We will also send a simple message in this room.
         */
         const oldRoomId = await app.client.createRoom({ name: "Old Room" });
-        await app.client.inviteUser(oldRoomId, bot.credentials.userId);
+        await app.client.inviteUser(oldRoomId, bot.credentials!.userId);
         await bot.joinRoom(oldRoomId);
         const response = await app.client.sendMessage(oldRoomId, "Hello!");
 
@@ -96,8 +99,8 @@ test.describe("Room list filters and sort", () => {
     });
 
     test.describe("Room list", () => {
-        let unReadDmId: string | undefined;
-        let unReadRoomId: string | undefined;
+        let unReadDmId: string;
+        let unReadRoomId: string;
 
         test.beforeEach(async ({ page, app, bot, user }) => {
             await app.client.createRoom({ name: "empty room" });
@@ -111,7 +114,7 @@ test.describe("Room list filters and sort", () => {
             await bot.sendMessage(unReadDmId, "I am a robot. Beep.");
 
             unReadRoomId = await app.client.createRoom({ name: "unread room" });
-            await app.client.inviteUser(unReadRoomId, bot.credentials.userId);
+            await app.client.inviteUser(unReadRoomId, bot.credentials!.userId);
             await bot.joinRoom(unReadRoomId);
             await bot.sendMessage(unReadRoomId, "I am a robot. Beep.");
 
@@ -132,7 +135,7 @@ test.describe("Room list filters and sort", () => {
             });
 
             const mentionRoomId = await app.client.createRoom({ name: "room with mention" });
-            await app.client.inviteUser(mentionRoomId, bot.credentials.userId);
+            await app.client.inviteUser(mentionRoomId, bot.credentials!.userId);
             await bot.joinRoom(mentionRoomId);
 
             const clientBot = await bot.prepareClient();
@@ -176,19 +179,19 @@ test.describe("Room list filters and sort", () => {
             await expect.poll(() => roomList.locator("role=option").count()).toBe(2);
 
             await primaryFilters.getByRole("option", { name: "Rooms" }).click();
-            await expect(roomList.getByRole("option", { name: "unread room" })).toBeVisible();
-            await expect(roomList.getByRole("option", { name: "favourite room" })).toBeVisible();
-            await expect(roomList.getByRole("option", { name: "empty room" })).toBeVisible();
-            await expect(roomList.getByRole("option", { name: "room with mention" })).toBeVisible();
-            await expect(roomList.getByRole("option", { name: "Low prio room" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=option").count()).toBe(5);
+            // "Open room" prefix disambiguates the room tile from the "Toggle Chats section with
+            // unread rooms" section header button, which also matches the "unread room" substring.
+            await expect(roomList.getByRole("button", { name: "Open room unread room" })).toBeVisible();
+            await expect(roomList.getByRole("button", { name: "favourite room" })).toBeVisible();
+            await expect(roomList.getByRole("button", { name: "empty room" })).toBeVisible();
+            await expect(roomList.getByRole("button", { name: "room with mention" })).toBeVisible();
+            await expect(roomList.getByRole("button", { name: "Low prio room" })).toBeVisible();
+            // 5 room tiles spread across 3 sections (Favourites, Rooms, Low priority); each section
+            // header is also a button, so 5 rooms + 3 section headers = 8 buttons.
+            await expect.poll(() => roomList.locator("role=button").count()).toBe(8);
 
             await getFilterExpandButton(page).click();
 
-            await primaryFilters.getByRole("option", { name: "Favourite" }).click();
-            await expect(roomList.getByRole("option", { name: "favourite room" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=option").count()).toBe(1);
-
             await primaryFilters.getByRole("option", { name: "Mentions" }).click();
             await expect(roomList.getByRole("option", { name: "room with mention" })).toBeVisible();
             await expect.poll(() => roomList.locator("role=option").count()).toBe(1);
@@ -211,11 +214,11 @@ test.describe("Room list filters and sort", () => {
                 // Let's configure unread dm room so that we only get notification for mentions and keywords
                 await app.viewRoomById(unReadDmId);
                 await app.settings.openRoomSettings("Notifications");
-                await page.getByText("@mentions & keywords").click();
+                await page.getByText("@mentions and replies").click();
                 await app.settings.closeDialog();
 
                 // Let's open a room other than unread room or unread dm
-                await roomListView.getByRole("option", { name: "Open room favourite room" }).click();
+                await roomListView.getByRole("button", { name: "Open room favourite room" }).click();
 
                 // Let's make the bot send a new message in both rooms
                 await bot.sendMessage(unReadDmId, "Hello!");
@@ -238,15 +241,20 @@ test.describe("Room list filters and sort", () => {
             await getRoomOptionsMenu(page).click();
             await page.getByRole("menuitemradio", { name: "A-Z" }).click();
 
-            await expect(roomListView.getByRole("option").first()).toHaveText(/empty room/);
+            // Favourite + chat section headers are buttons + favourite room
+            await expect(roomListView.getByRole("button").nth(3)).toHaveText(/empty room/);
         });
 
-        test("should move room to the top on message when sorting by activity", async ({ page, bot }) => {
+        test("should move room to the top on message (chat section) when sorting by activity", async ({
+            page,
+            bot,
+        }) => {
             const roomListView = getRoomList(page);
 
             await bot.sendMessage(unReadDmId, "Hello!");
 
-            await expect(roomListView.getByRole("option").first()).toHaveText(/unread dm/);
+            // Favourite + chat section headers are buttons + favourite room
+            await expect(roomListView.getByRole("button").nth(3)).toHaveText(/unread dm/);
         });
     });
 
@@ -301,7 +309,7 @@ test.describe("Room list filters and sort", () => {
             );
         });
 
-        ["People", "Rooms", "Favourite"].forEach((filter) => {
+        ["People", "Rooms"].forEach((filter) => {
             test(
                 `should render the placeholder for ${filter} filter`,
                 { tag: "@screenshot" },
diff --git a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-header.spec.ts b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-header.spec.ts
index 471311c3f6..5f94abc19d 100644
--- a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-header.spec.ts
+++ b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-header.spec.ts
@@ -5,18 +5,19 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
+import { closeReleaseAnnouncement, rejectToast } from "@element-hq/element-web-playwright-common";
+
 import { test, expect } from "../../../element-web-test";
 import { getHeaderSection } from "./utils";
 
 test.describe("Header section of the room list", () => {
-    test.use({
-        labsFlags: ["feature_new_room_list"],
-    });
-
     test.beforeEach(async ({ page, app, user }) => {
         // The toasts are displayed above the search section
-        await app.closeVerifyToast();
-        await app.closeNotificationToast();
+        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");
+
+        // Close the release announcement about the new room list sections
+        await closeReleaseAnnouncement(page, "Introducing Sections");
     });
 
     test("should render the header section", { tag: "@screenshot" }, async ({ page, app, user }) => {
diff --git a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts
index eae61c8bab..1630e44a4c 100644
--- a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts
+++ b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts
@@ -5,18 +5,20 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
+import { rejectToast } from "@element-hq/element-web-playwright-common";
+
 import { test, expect } from "../../../element-web-test";
 import { getRoomListView } from "./utils";
 
 test.describe("Room list panel", () => {
     test.use({
-        labsFlags: ["feature_new_room_list"],
+        displayName: "Eve",
     });
 
     test.beforeEach(async ({ page, app, user }) => {
         // The toasts are displayed above the search section
-        await app.closeVerifyToast();
-        await app.closeNotificationToast();
+        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");
 
         // Populate the room list
         for (let i = 0; i < 20; i++) {
@@ -34,9 +36,11 @@ test.describe("Room list panel", () => {
         await expect(roomListView).toMatchScreenshot("room-list-panel.png");
     });
 
-    test("should respond to small screen sizes", { tag: "@screenshot" }, async ({ page }) => {
-        await page.setViewportSize({ width: 575, height: 600 });
-        const roomListPanel = getRoomListView(page);
-        await expect(roomListPanel).toMatchScreenshot("room-list-panel-smallscreen.png");
+    test.describe("small screen", () => {
+        test.use({ lockLeftPanelWidth: false });
+        test("should respond to small screen sizes", { tag: "@screenshot" }, async ({ page }) => {
+            await page.setViewportSize({ width: 575, height: 600 });
+            await expect(page).toMatchScreenshot("room-list-panel-smallscreen.png");
+        });
     });
 });
diff --git a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-search.spec.ts b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-search.spec.ts
index 492b3f429d..665d2431d2 100644
--- a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-search.spec.ts
+++ b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-search.spec.ts
@@ -5,18 +5,16 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
+import { rejectToast } from "@element-hq/element-web-playwright-common";
+
 import { test, expect } from "../../../element-web-test";
 import { getSearchSection } from "./utils";
 
 test.describe("Search section of the room list", () => {
-    test.use({
-        labsFlags: ["feature_new_room_list"],
-    });
-
     test.beforeEach(async ({ page, app, user }) => {
         // The toasts are displayed above the search section
-        await app.closeVerifyToast();
-        await app.closeNotificationToast();
+        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");
     });
 
     test("should render the search section", { tag: "@screenshot" }, async ({ page, app, user }) => {
diff --git a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-sections.spec.ts b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-sections.spec.ts
index d8c12f55da..5e36ff01a2 100644
--- a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-sections.spec.ts
+++ b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-sections.spec.ts
@@ -5,13 +5,15 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
+import { rejectToast, rejectToastIfExists } from "@element-hq/element-web-playwright-common";
+
 import { expect, test } from "../../../element-web-test";
-import { getPrimaryFilters, getRoomList, getSectionHeader } from "./utils";
+import { SettingLevel } from "../../../../src/settings/SettingLevel";
+import { assertRoomInSection, dragRoomToSection, getPrimaryFilters, getRoomList, getSectionHeader } from "./utils";
 
 test.describe("Room list sections", () => {
     test.use({
         displayName: "Alice",
-        labsFlags: ["feature_new_room_list", "feature_room_list_sections"],
         botCreateOpts: {
             displayName: "BotBob",
             autoAcceptInvites: true,
@@ -20,8 +22,8 @@ test.describe("Room list sections", () => {
 
     test.beforeEach(async ({ page, app, user }) => {
         // The toasts are displayed above the search section
-        await app.closeVerifyToast();
-        await app.closeNotificationToast();
+        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");
 
         // focus the user menu to avoid to have hover decoration
         await page.getByRole("button", { name: "User menu" }).focus();
@@ -88,6 +90,85 @@ test.describe("Room list sections", () => {
         });
     });
 
+    test.describe("Show sections setting", () => {
+        test.beforeEach(async ({ app }) => {
+            // A favourite room and a regular room so that, when sections are enabled, we get
+            // two meaningful sections (Favourites + Chats).
+            const favouriteId = await app.client.createRoom({ name: "favourite room" });
+            await app.client.evaluate(async (client, roomId) => {
+                await client.setRoomTag(roomId, "m.favourite");
+            }, favouriteId);
+            await app.client.createRoom({ name: "regular room" });
+        });
+
+        test("toggling RoomList.showSections switches between a sectioned and a flat list", async ({ page, app }) => {
+            const roomList = getRoomList(page);
+
+            // Sections are enabled by default: section headers are visible and rooms render as treegrid rows.
+            await expect(getSectionHeader(page, "Favourites")).toBeVisible();
+            await expect(getSectionHeader(page, "Chats")).toBeVisible();
+            await expect(roomList.getByRole("row", { name: "Open room favourite room" })).toBeVisible();
+
+            // Disable sections
+            await app.settings.setValue("RoomList.showSections", null, SettingLevel.ACCOUNT, false);
+
+            // The list becomes flat: no section headers, rooms render as listbox options.
+            await expect(getSectionHeader(page, "Favourites")).not.toBeVisible();
+            await expect(getSectionHeader(page, "Chats")).not.toBeVisible();
+            await expect(page.getByRole("listbox", { name: "Room list", exact: true })).toBeVisible();
+            await expect(roomList.getByRole("option", { name: "Open room favourite room" })).toBeVisible();
+            await expect(roomList.getByRole("option", { name: "Open room regular room" })).toBeVisible();
+
+            // Re-enable sections
+            await app.settings.setValue("RoomList.showSections", null, SettingLevel.ACCOUNT, true);
+
+            // The sections reappear.
+            await expect(getSectionHeader(page, "Favourites")).toBeVisible();
+            await expect(getSectionHeader(page, "Chats")).toBeVisible();
+            await expect(roomList.getByRole("row", { name: "Open room favourite room" })).toBeVisible();
+        });
+    });
+
+    test.describe("Filters when sections are disabled", () => {
+        test.beforeEach(async ({ app }) => {
+            await app.settings.setValue("RoomList.showSections", null, SettingLevel.ACCOUNT, false);
+
+            // A favourite room, a low priority room, and a regular room.
+            const favouriteId = await app.client.createRoom({ name: "favourite room" });
+            await app.client.evaluate(async (client, roomId) => {
+                await client.setRoomTag(roomId, "m.favourite");
+            }, favouriteId);
+            const lowPrioId = await app.client.createRoom({ name: "low prio room" });
+            await app.client.evaluate(async (client, roomId) => {
+                await client.setRoomTag(roomId, "m.lowpriority");
+            }, lowPrioId);
+            await app.client.createRoom({ name: "regular room" });
+        });
+
+        test("shows the Favourites and Low Priority filters and filters the flat list", async ({ page }) => {
+            const roomList = getRoomList(page);
+            const primaryFilters = getPrimaryFilters(page);
+
+            // Expand the filter list to reveal all filters
+            await primaryFilters.getByRole("button", { name: "Expand filter list" }).click();
+
+            // The Favourites and Low Priority filters are available again when sections are disabled
+            await expect(primaryFilters.getByRole("option", { name: "Favourites" })).toBeVisible();
+            await expect(primaryFilters.getByRole("option", { name: "Low priority" })).toBeVisible();
+
+            // Filtering by Favourites shows only the favourite room
+            await primaryFilters.getByRole("option", { name: "Favourites" }).click();
+            await expect(roomList.getByRole("option", { name: "Open room favourite room" })).toBeVisible();
+            await expect(roomList.getByRole("option", { name: "Open room regular room" })).not.toBeVisible();
+            await expect(roomList.getByRole("option", { name: "Open room low prio room" })).not.toBeVisible();
+
+            // Switching to the Low Priority filter shows only the low priority room
+            await primaryFilters.getByRole("option", { name: "Low priority" }).click();
+            await expect(roomList.getByRole("option", { name: "Open room low prio room" })).toBeVisible();
+            await expect(roomList.getByRole("option", { name: "Open room favourite room" })).not.toBeVisible();
+        });
+    });
+
     test.describe("Section collapse and expand", () => {
         [
             { section: "Favourites", roomName: "favourite room", tag: "m.favourite" },
@@ -148,6 +229,63 @@ test.describe("Room list sections", () => {
         });
     });
 
+    test.describe("Section collapse state persistence", () => {
+        test.beforeEach(async ({ app }) => {
+            // A favourite room (so we get a Favourites section) and a regular room in Chats,
+            // giving us two independent sections whose expansion state we can assert.
+            const favouriteId = await app.client.createRoom({ name: "favourite room" });
+            await app.client.evaluate(async (client, roomId) => {
+                await client.setRoomTag(roomId, "m.favourite");
+            }, favouriteId);
+            await app.client.createRoom({ name: "regular room" });
+        });
+
+        test("persists the collapsed/expanded state across reloads", async ({ page }) => {
+            const roomList = getRoomList(page);
+            const favouritesHeader = getSectionHeader(page, "Favourites");
+            const chatsHeader = getSectionHeader(page, "Chats");
+            const favRoom = roomList.getByRole("row", { name: "Open room favourite room" });
+            const regularRoom = roomList.getByRole("row", { name: "Open room regular room" });
+
+            // Collapse both the Favourites and Chats sections
+            await expect(favouritesHeader).toHaveAttribute("aria-expanded", "true");
+            await favouritesHeader.click();
+            await expect(favouritesHeader).toHaveAttribute("aria-expanded", "false");
+            await expect(favRoom).not.toBeVisible();
+
+            await expect(chatsHeader).toHaveAttribute("aria-expanded", "true");
+            await chatsHeader.click();
+            await expect(chatsHeader).toHaveAttribute("aria-expanded", "false");
+            await expect(regularRoom).not.toBeVisible();
+
+            // Reload the page: the collapsed state is persisted at the device level and should survive
+            await page.reload();
+            await rejectToastIfExists(page, "Verify this device");
+            await rejectToastIfExists(page, "Notifications");
+
+            // Both sections are still collapsed and their rooms stay hidden
+            await expect(getSectionHeader(page, "Favourites")).toHaveAttribute("aria-expanded", "false");
+            await expect(getRoomList(page).getByRole("row", { name: "Open room favourite room" })).not.toBeVisible();
+            await expect(getSectionHeader(page, "Chats")).toHaveAttribute("aria-expanded", "false");
+            await expect(getRoomList(page).getByRole("row", { name: "Open room regular room" })).not.toBeVisible();
+
+            // Expand them again and reload: the expanded state is likewise persisted
+            await getSectionHeader(page, "Favourites").click();
+            await expect(getSectionHeader(page, "Favourites")).toHaveAttribute("aria-expanded", "true");
+            await getSectionHeader(page, "Chats").click();
+            await expect(getSectionHeader(page, "Chats")).toHaveAttribute("aria-expanded", "true");
+
+            await page.reload();
+            await rejectToastIfExists(page, "Verify this device");
+            await rejectToastIfExists(page, "Notifications");
+
+            await expect(getSectionHeader(page, "Favourites")).toHaveAttribute("aria-expanded", "true");
+            await expect(getRoomList(page).getByRole("row", { name: "Open room favourite room" })).toBeVisible();
+            await expect(getSectionHeader(page, "Chats")).toHaveAttribute("aria-expanded", "true");
+            await expect(getRoomList(page).getByRole("row", { name: "Open room regular room" })).toBeVisible();
+        });
+    });
+
     test.describe("Rooms placement in sections", () => {
         test("should move a room between sections when tags change", async ({ page, app }) => {
             await app.client.createRoom({ name: "my room" });
@@ -182,31 +320,125 @@ test.describe("Room list sections", () => {
             roomItem = roomList.getByRole("row", { name: "Open room my room" });
             await expect(roomItem).toBeVisible();
         });
+
+        test("should move a room from Chats to Favourites when using dnd", async ({ page, app }) => {
+            await app.client.createRoom({ name: "my room" });
+
+            const favouriteId = await app.client.createRoom({ name: "favourite room" });
+            await app.client.evaluate(async (client, roomId) => {
+                await client.setRoomTag(roomId, "m.favourite");
+            }, favouriteId);
+
+            await dragRoomToSection(page, "my room", "Favourites");
+            await assertRoomInSection(page, "Favourites", "my room");
+        });
+
+        test("should move a room from Favourites to Chats when using dnd", async ({ page, app }) => {
+            const favouriteId = await app.client.createRoom({ name: "my room" });
+            await app.client.evaluate(async (client, roomId) => {
+                await client.setRoomTag(roomId, "m.favourite");
+            }, favouriteId);
+
+            // Create a second favourite room to ensure we stay in section mode (not flat list)
+            const favouriteId2 = await app.client.createRoom({ name: "favourite room" });
+            await app.client.evaluate(async (client, roomId) => {
+                await client.setRoomTag(roomId, "m.favourite");
+            }, favouriteId2);
+
+            // Ensure the Chats section is visible by creating a room in it
+            await app.client.createRoom({ name: "room in chats" });
+
+            await dragRoomToSection(page, "my room", "Chats");
+            await assertRoomInSection(page, "Chats", "my room");
+        });
     });
 
-    test("should show unread indicator on section header", async ({ page, app, bot }) => {
-        // Create a favourite room
-        const favouriteId = await app.client.createRoom({ name: "favourite room" });
-        await app.client.evaluate(async (client, roomId) => {
-            await client.setRoomTag(roomId, "m.favourite");
-        }, favouriteId);
+    test.describe("Section header notification", () => {
+        test("should show unread indicator on section header", async ({ page, app, bot }) => {
+            // Create a favourite room
+            const favouriteId = await app.client.createRoom({ name: "favourite room" });
+            await app.client.evaluate(async (client, roomId) => {
+                await client.setRoomTag(roomId, "m.favourite");
+            }, favouriteId);
 
-        const roomList = getRoomList(page);
+            const roomList = getRoomList(page);
 
-        // Invite the bot and have it send a message to generate an unread
-        await app.client.inviteUser(favouriteId, bot.credentials.userId);
-        await bot.joinRoom(favouriteId);
-        await bot.sendMessage(favouriteId, "Hello from bot!");
+            // Invite the bot and have it send a message to generate an unread
+            await app.client.inviteUser(favouriteId, bot.credentials!.userId);
+            await bot.joinRoom(favouriteId);
+            await bot.sendMessage(favouriteId, "Hello from bot!");
 
-        let sectionHeader = getSectionHeader(page, "Favourites", true);
-        await expect(sectionHeader).toBeVisible();
+            let sectionHeader = getSectionHeader(page, "Favourites", true);
+            await expect(sectionHeader).toBeVisible();
 
-        // Open the room to mark it as read
-        await roomList.getByRole("row", { name: "Open room favourite room" }).click();
+            // Open the room to mark it as read
+            await roomList.getByRole("row", { name: "Open room favourite room" }).click();
 
-        // The section should no longer be unread
-        sectionHeader = getSectionHeader(page, "Favourites", false);
-        await expect(sectionHeader).toBeVisible();
+            // The section should no longer be unread
+            sectionHeader = getSectionHeader(page, "Favourites", false);
+            await expect(sectionHeader).toBeVisible();
+        });
+
+        test(
+            "should aggregate notification decorations on the collapsed section header",
+            { tag: "@screenshot" },
+            async ({ page, app, user, bot }) => {
+                // A favourite room to keep the room list in section mode (otherwise it renders as a flat list)
+                const favouriteId = await app.client.createRoom({ name: "favourite room" });
+                await app.client.evaluate(async (client, roomId) => {
+                    await client.setRoomTag(roomId, "m.favourite");
+                }, favouriteId);
+
+                // A room with a mention, landing in the Chats section
+                const mentionId = await app.client.createRoom({ name: "mention room" });
+                await app.client.inviteUser(mentionId, bot.credentials!.userId);
+                await bot.joinRoom(mentionId);
+                const clientBot = await bot.prepareClient();
+                await clientBot.evaluate(
+                    async (client, { roomId, userId }) => {
+                        await client.sendMessage(roomId, {
+                            // @ts-ignore ignore usage of MsgType.text
+                            "msgtype": "m.text",
+                            "body": "User",
+                            "format": "org.matrix.custom.html",
+                            "formatted_body": `<a href="https://matrix.to/#/${userId}">User</a>`,
+                            "m.mentions": {
+                                user_ids: [userId],
+                            },
+                        });
+                    },
+                    { roomId: mentionId, userId: user.userId },
+                );
+
+                // A room we are invited to, landing in the Chats section
+                await bot.createRoom({
+                    name: "invited room",
+                    invite: [user.userId],
+                    is_direct: true,
+                });
+
+                const roomList = getRoomList(page);
+
+                // Wait for the mention decoration to sync onto the mention room before collapsing, so the
+                // section header aggregation has the room states available.
+                await expect(
+                    roomList.getByRole("row", { name: /mention room/ }).getByTestId("notification-decoration"),
+                ).toBeVisible();
+
+                // Collapse the Chats section so the aggregated decoration is displayed on its header
+                const chatsHeader = getSectionHeader(page, "Chats", true);
+                await expect(chatsHeader).toBeVisible();
+                await chatsHeader.click();
+
+                // The header hides its decoration while hovered/focused, so move the pointer away
+                await page.mouse.move(0, 0);
+
+                // The collapsed header aggregates the mention and the invitation
+                await expect(chatsHeader.getByTestId("notification-decoration")).toBeVisible();
+
+                await expect(chatsHeader).toMatchScreenshot("room-list-section-header-notification.png");
+            },
+        );
     });
 
     test.describe("Sections and filters interaction", () => {
@@ -232,13 +464,13 @@ test.describe("Room list sections", () => {
             await app.client.evaluate(async (client, roomId) => {
                 await client.setRoomTag(roomId, "m.favourite");
             }, favouriteId);
-            await app.client.inviteUser(favouriteId, bot.credentials.userId);
+            await app.client.inviteUser(favouriteId, bot.credentials!.userId);
             await bot.joinRoom(favouriteId);
             await bot.sendMessage(favouriteId, "Hello from favourite!");
 
             // Create a regular room with unread messages
             const regularId = await app.client.createRoom({ name: "regular with unread" });
-            await app.client.inviteUser(regularId, bot.credentials.userId);
+            await app.client.inviteUser(regularId, bot.credentials!.userId);
             await bot.joinRoom(regularId);
             await bot.sendMessage(regularId, "Hello from regular!");
 
@@ -257,4 +489,131 @@ test.describe("Room list sections", () => {
             await expect(roomList.getByRole("row", { name: "no unread room" })).not.toBeVisible();
         });
     });
+
+    test.describe("Section keyboard navigation", () => {
+        test.beforeEach(async ({ app }) => {
+            // A favourite room forces section mode and gives us a non-trivial first section.
+            const favouriteId = await app.client.createRoom({ name: "favourite room" });
+            await app.client.evaluate(async (client, roomId) => {
+                await client.setRoomTag(roomId, "m.favourite");
+            }, favouriteId);
+
+            // A chats-section room so we have a second section to navigate to.
+            await app.client.createRoom({ name: "chat room" });
+        });
+
+        test("Arrow Down/Up move focus through sections and rooms", async ({ page }) => {
+            const roomList = getRoomList(page);
+            const favouritesHeader = getSectionHeader(page, "Favourites");
+            // In treegrid mode, a room renders as <div role="row"><div role="gridcell"><button …></button></div></div>.
+            // Only the inner <button> is focusable, so target it by role for focus assertions.
+            const favRoomButton = roomList.getByRole("button", { name: "Open room favourite room" });
+            const chatsHeader = getSectionHeader(page, "Chats");
+
+            await expect(favouritesHeader).toBeVisible();
+            await expect(favRoomButton).toBeVisible();
+            await expect(chatsHeader).toBeVisible();
+
+            await favouritesHeader.focus();
+            await expect(favouritesHeader).toBeFocused();
+
+            // Down moves into the favourite section's room.
+            await page.keyboard.press("ArrowDown");
+            await expect(favRoomButton).toBeFocused();
+
+            // Down again jumps to the next section header.
+            await page.keyboard.press("ArrowDown");
+            await expect(chatsHeader).toBeFocused();
+
+            // Up reverses the traversal.
+            await page.keyboard.press("ArrowUp");
+            await expect(favRoomButton).toBeFocused();
+
+            await page.keyboard.press("ArrowUp");
+            await expect(favouritesHeader).toBeFocused();
+        });
+
+        test("Arrow Right expands a collapsed section", async ({ page }) => {
+            const favouritesHeader = getSectionHeader(page, "Favourites");
+            const favRoom = getRoomList(page).getByRole("row", { name: "Open room favourite room" });
+
+            // Collapse the section via click so we know we start expanded=false.
+            await favouritesHeader.click();
+            await expect(favouritesHeader).toHaveAttribute("aria-expanded", "false");
+            await expect(favRoom).not.toBeVisible();
+
+            await favouritesHeader.focus();
+            await page.keyboard.press("ArrowRight");
+
+            await expect(favouritesHeader).toHaveAttribute("aria-expanded", "true");
+            await expect(favRoom).toBeVisible();
+        });
+
+        test("Arrow Right is a no-op on an already-expanded section", async ({ page }) => {
+            const favouritesHeader = getSectionHeader(page, "Favourites");
+            await expect(favouritesHeader).toHaveAttribute("aria-expanded", "true");
+
+            await favouritesHeader.focus();
+            await page.keyboard.press("ArrowRight");
+
+            await expect(favouritesHeader).toHaveAttribute("aria-expanded", "true");
+        });
+
+        test("Arrow Left collapses an expanded section", async ({ page }) => {
+            const favouritesHeader = getSectionHeader(page, "Favourites");
+            const favRoom = getRoomList(page).getByRole("row", { name: "Open room favourite room" });
+
+            await expect(favouritesHeader).toHaveAttribute("aria-expanded", "true");
+            await expect(favRoom).toBeVisible();
+
+            await favouritesHeader.focus();
+            await page.keyboard.press("ArrowLeft");
+
+            await expect(favouritesHeader).toHaveAttribute("aria-expanded", "false");
+            await expect(favRoom).not.toBeVisible();
+        });
+
+        test("Arrow Left is a no-op on an already-collapsed section", async ({ page }) => {
+            const favouritesHeader = getSectionHeader(page, "Favourites");
+
+            await favouritesHeader.click();
+            await expect(favouritesHeader).toHaveAttribute("aria-expanded", "false");
+
+            await favouritesHeader.focus();
+            await page.keyboard.press("ArrowLeft");
+
+            await expect(favouritesHeader).toHaveAttribute("aria-expanded", "false");
+        });
+
+        test("Arrow Right on an expanded section with rooms moves focus to its first room", async ({ page }) => {
+            const favouritesHeader = getSectionHeader(page, "Favourites");
+            const favRoomButton = getRoomList(page).getByRole("button", { name: "Open room favourite room" });
+
+            await expect(favouritesHeader).toHaveAttribute("aria-expanded", "true");
+
+            await favouritesHeader.focus();
+            await expect(favouritesHeader).toBeFocused();
+
+            await page.keyboard.press("ArrowRight");
+
+            // Focus must move to the first room in the section, not the next section header.
+            await expect(favRoomButton).toBeFocused();
+            // The section should remain expanded.
+            await expect(favouritesHeader).toHaveAttribute("aria-expanded", "true");
+        });
+
+        test("Arrow Left on the first room of a section moves focus back to the section header", async ({ page }) => {
+            const favouritesHeader = getSectionHeader(page, "Favourites");
+            const favRoomButton = getRoomList(page).getByRole("button", { name: "Open room favourite room" });
+
+            await expect(favouritesHeader).toHaveAttribute("aria-expanded", "true");
+
+            await favRoomButton.focus();
+            await expect(favRoomButton).toBeFocused();
+
+            await page.keyboard.press("ArrowLeft");
+
+            await expect(favouritesHeader).toBeFocused();
+        });
+    });
 });
diff --git a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-unread-toast.spec.ts b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-unread-toast.spec.ts
new file mode 100644
index 0000000000..d4bb2a4e1f
--- /dev/null
+++ b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-unread-toast.spec.ts
@@ -0,0 +1,192 @@
+/*
+ * Copyright 2026 Element Creations 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 { rejectToast } from "@element-hq/element-web-playwright-common";
+
+import { expect, test } from "../../../element-web-test";
+import { type ElementAppPage } from "../../../pages/ElementAppPage";
+import { getRoomList, getRoomOptionsMenu, getSectionHeader } from "./utils";
+
+/**
+ * The unread-activity toast ("Unread messages") appears at the bottom of the room list when a room with a
+ * notification count (the green decoration) is scrolled below the visible area. Clicking it scrolls that
+ * room into view. Rooms with only an unread-activity dot (white/black) must not trigger it.
+ */
+test.describe("Room list unread activity toast", () => {
+    test.use({
+        displayName: "Alice",
+        botCreateOpts: {
+            displayName: "BotBob",
+            autoAcceptInvites: true,
+        },
+    });
+
+    const getToast = (page: Page) => page.getByRole("button", { name: "Unread messages" });
+
+    /**
+     * Create `count` filler rooms whose names sort alphabetically before any room named "zzz …",
+     * so that under A-Z sorting they fill the top of the list and push the "zzz …" room below the fold.
+     */
+    async function createFillerRooms(app: ElementAppPage, count: number): Promise<void> {
+        for (let i = 0; i < count; i++) {
+            await app.client.createRoom({ name: `room ${String(i).padStart(2, "0")}` });
+        }
+    }
+
+    /** Switch the room list to alphabetical sorting so room positions are deterministic. */
+    async function sortAlphabetically(page: Page): Promise<void> {
+        await getRoomOptionsMenu(page).click();
+        await page.getByRole("menuitemradio", { name: "A-Z" }).click();
+    }
+
+    test.describe("flat list", () => {
+        test.beforeEach(async ({ page, app, user }) => {
+            // Toasts are displayed above the room list; dismiss the unrelated ones.
+            await rejectToast(page, "Verify this device");
+            await rejectToast(page, "Notifications");
+            // Focus the user menu so room rows are not decorated by hover.
+            await page.getByRole("button", { name: "User menu" }).focus();
+        });
+
+        test("shows a toast for a notifying room below the fold and scrolls to it on click", async ({
+            page,
+            app,
+            bot,
+        }) => {
+            const roomList = getRoomList(page);
+
+            // A room with a real notification count, named so it sorts to the very bottom under A-Z.
+            const targetId = await app.client.createRoom({ name: "zzz unread room" });
+            await app.client.inviteUser(targetId, bot.credentials!.userId);
+            await bot.joinRoom(targetId);
+
+            // Enough filler rooms to push the target well below the visible area.
+            await createFillerRooms(app, 20);
+
+            await sortAlphabetically(page);
+
+            // The bot notifies the target room, producing a green notification count.
+            await bot.sendMessage(targetId, "Hello from the bottom!");
+
+            const targetRow = roomList.getByRole("option", { name: "Open room zzz unread room" });
+
+            // The toast appears because the notifying room is below the fold, and the room itself is offscreen.
+            await expect(getToast(page)).toBeVisible();
+            await expect(targetRow).not.toBeInViewport();
+
+            // Clicking the toast scrolls the notifying room into view…
+            await getToast(page).click();
+            await expect(targetRow).toBeInViewport();
+
+            // …and the toast goes away once there is nothing left unread below the fold.
+            await expect(getToast(page)).not.toBeVisible();
+        });
+
+        test("does not show a toast when the only unread room below the fold has an activity dot", async ({
+            page,
+            app,
+            bot,
+        }) => {
+            const roomList = getRoomList(page);
+
+            // Another room to park on, so the activity room stays unread (focused rooms are marked read).
+            const otherRoomId = await app.client.createRoom({ name: "aaa other room" });
+
+            // The target's unread state will only ever be an activity dot, never a notification count: set it
+            // to "@mentions & keywords" so a plain (non-mention) message produces activity rather than a count.
+            const targetId = await app.client.createRoom({ name: "zzz activity room" });
+            await app.client.inviteUser(targetId, bot.credentials!.userId);
+            await bot.joinRoom(targetId);
+
+            await app.viewRoomById(targetId);
+            await app.settings.openRoomSettings("Notifications");
+            await page.getByText("@mentions and replies only").click();
+            await app.settings.closeDialog();
+
+            // Enable showing activity (dots) in the room list, so the activity dot is actually rendered.
+            await app.settings.openUserSettings("Notifications");
+            await page
+                .getByRole("switch", { name: "Show all activity in the room list (dots or number of unread messages)" })
+                .check();
+            await app.settings.closeDialog();
+
+            // Park on the other room so the target stays unread, then send a plain (non-mention) message.
+            await app.viewRoomById(otherRoomId);
+            await bot.sendMessage(targetId, "just activity, no mention");
+
+            // The target shows an unread-activity dot: a decoration with no count (no digits).
+            const targetRow = roomList.getByRole("option", { name: "Open room zzz activity room" });
+            const decoration = targetRow.getByTestId("notification-decoration");
+            await expect(decoration).toBeVisible();
+            await expect(decoration).not.toHaveText(/\d/);
+
+            // Push the activity-dot room below the fold with filler rooms and A-Z sorting.
+            await createFillerRooms(app, 20);
+            await sortAlphabetically(page);
+
+            // The list has settled (a top filler room is visible) but the activity dot must not raise the toast.
+            await expect(roomList.getByRole("option", { name: "Open room room 00" })).toBeVisible();
+            await expect(targetRow).not.toBeInViewport();
+            await expect(getToast(page)).not.toBeVisible();
+        });
+    });
+
+    test.describe("sections", () => {
+        test.beforeEach(async ({ page, app, user }) => {
+            await rejectToast(page, "Verify this device");
+            await rejectToast(page, "Notifications");
+            await page.getByRole("button", { name: "User menu" }).focus();
+        });
+
+        test("shows a toast for a collapsed section that hides a notifying room", async ({ page, app, bot }) => {
+            const roomList = getRoomList(page);
+
+            // A regular (Chats) room with a notification count.
+            const notifyId = await app.client.createRoom({ name: "chats notify room" });
+            await app.client.inviteUser(notifyId, bot.credentials!.userId);
+            await bot.joinRoom(notifyId);
+
+            // A favourite room so the list renders in section mode from the start.
+            const favouriteId = await app.client.createRoom({ name: "favourite room" });
+            await app.client.evaluate(async (client, roomId) => {
+                await client.setRoomTag(roomId, "m.favourite");
+            }, favouriteId);
+
+            const chatsHeader = getSectionHeader(page, "Chats");
+            await expect(chatsHeader).toBeVisible();
+
+            // Notify the Chats room and collapse the section while its header is still on screen.
+            await bot.sendMessage(notifyId, "Hidden in a collapsed section");
+            await expect(
+                roomList
+                    .getByRole("row", { name: "Open room chats notify room" })
+                    .getByTestId("notification-decoration"),
+            ).toBeVisible();
+            await chatsHeader.click();
+            await expect(chatsHeader).toHaveAttribute("aria-expanded", "false");
+
+            // Grow the Favourites section until the collapsed Chats header is pushed below the fold.
+            for (let i = 0; i < 20; i++) {
+                const id = await app.client.createRoom({ name: `favourite ${String(i).padStart(2, "0")}` });
+                await app.client.evaluate(async (client, roomId) => {
+                    await client.setRoomTag(roomId, "m.favourite");
+                }, id);
+            }
+
+            // Wait until the collapsed Chats header has been pushed offscreen (all favourites synced).
+            await expect(chatsHeader).not.toBeInViewport();
+
+            // The collapsed Chats header is offscreen, but its hidden notification raises the toast.
+            await expect(getToast(page)).toBeVisible();
+
+            // Clicking the toast scrolls the collapsed section header into view.
+            await getToast(page).click();
+            await expect(chatsHeader).toBeInViewport();
+        });
+    });
+});
diff --git a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts
index a782913f8b..a0135d725a 100644
--- a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts
+++ b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts
@@ -6,6 +6,7 @@
  */
 
 import { type Page } from "@playwright/test";
+import { closeReleaseAnnouncement, rejectToast } from "@element-hq/element-web-playwright-common";
 
 import { expect, test } from "../../../element-web-test";
 import { type Bot } from "../../../pages/bot";
@@ -15,7 +16,6 @@ import { getRoomList } from "./utils";
 test.describe("Room list", () => {
     test.use({
         displayName: "Alice",
-        labsFlags: ["feature_new_room_list"],
         botCreateOpts: {
             displayName: "BotBob",
         },
@@ -23,8 +23,11 @@ test.describe("Room list", () => {
 
     test.beforeEach(async ({ page, app, user }) => {
         // The toasts are displayed above the search section
-        await app.closeVerifyToast();
-        await app.closeNotificationToast();
+        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");
+
+        // Close the release announcement about the new room list sections
+        await closeReleaseAnnouncement(page, "Introducing Sections");
 
         // focus the user menu to avoid to have hover decoration
         await page.getByRole("button", { name: "User menu" }).focus();
@@ -70,11 +73,11 @@ test.describe("Room list", () => {
 
         test("should open the more options menu", { tag: "@screenshot" }, async ({ page, app, user }) => {
             const roomListView = getRoomList(page);
-            const roomItem = roomListView.getByRole("option", { name: "Open room room29" });
+            let roomItem = roomListView.getByRole("option", { name: "Open room room29" });
             await roomItem.hover();
 
             await expect(roomItem).toMatchScreenshot("room-list-item-hover.png");
-            const roomItemMenu = roomItem.getByRole("button", { name: "More Options" });
+            let roomItemMenu = roomItem.getByRole("button", { name: "More Options" });
             await roomItemMenu.click();
             await expect(page).toMatchScreenshot("room-list-item-open-more-options.png");
 
@@ -82,7 +85,9 @@ test.describe("Room list", () => {
             await page.getByRole("menuitemcheckbox", { name: "Favourited" }).click();
 
             // Check that the room is favourited
+            roomItem = roomListView.getByRole("gridcell", { name: "Open room room29" });
             await roomItem.hover();
+            roomItemMenu = roomItem.getByRole("button", { name: "More Options" });
             await roomItemMenu.click();
             await expect(page.getByRole("menuitemcheckbox", { name: "Favourited" })).toBeChecked();
             // It should show the invite dialog
@@ -187,7 +192,7 @@ test.describe("Room list", () => {
                 const roomListView = getRoomList(page);
 
                 const roomId = await app.client.createRoom({ name: "1 notification" });
-                await app.client.inviteUser(roomId, bot.credentials.userId);
+                await app.client.inviteUser(roomId, bot.credentials!.userId);
                 await bot.joinRoom(roomId);
                 await bot.sendMessage(roomId, "I am a robot. Beep.");
 
@@ -252,6 +257,40 @@ test.describe("Room list", () => {
                 await expect(notificationButton).toBeFocused();
             });
 
+            test("should reveal the options menu when a room is focused with the keyboard", async ({
+                page,
+                app,
+                user,
+            }) => {
+                // Regression test: navigating the room list with the keyboard must reveal a room's hover
+                // menu so the "More options" button is reachable by Tab, rather than focus escaping to
+                // <body>. The reveal must depend on keyboard focus alone, so we move focus with the
+                // keyboard to an adjacent room the pointer is NOT over — otherwise :hover would reveal
+                // the menu and mask the behaviour (which is why the other keyboard tests don't catch it).
+                const roomListView = getRoomList(page);
+                const room29 = roomListView.getByRole("option", { name: "Open room room29" });
+                const room28 = roomListView.getByRole("option", { name: "Open room room28" });
+                const moreButton = room28.getByRole("button", { name: "More options" });
+
+                // Open the room, then put focus back on the room list item.
+                await room29.click();
+                await room29.click();
+                await expect(room29).toBeFocused();
+
+                // Keyboard-focus the adjacent room (the pointer is still over room29, not room28), so the
+                // menu's visibility depends purely on keyboard focus and not on :hover.
+                await page.keyboard.press("ArrowDown");
+                await expect(room28).toBeFocused();
+
+                // The "More options" button must be revealed and reachable by Tab.
+                await page.keyboard.press("Tab");
+                await expect(moreButton).toBeFocused();
+
+                // TODO: once menu-close focus restoration is fixed, extend this to open the menu
+                // (Enter) and assert that Escape returns focus to a room list item rather than <body>.
+                // Today that focus restoration is broken, so it isn't asserted here.
+            });
+
             test("should navigate to the top and then bottom of the room list", async ({ page, app, user }) => {
                 const roomListView = getRoomList(page);
 
@@ -275,7 +314,7 @@ test.describe("Room list", () => {
     });
 
     test.describe("Avatar decoration", () => {
-        test.use({ labsFlags: ["feature_video_rooms", "feature_new_room_list"] });
+        test.use({ labsFlags: ["feature_video_rooms"] });
 
         test("should be a public room", { tag: "@screenshot" }, async ({ page, app, user }) => {
             // @ts-ignore Visibility enum is not accessible
@@ -295,13 +334,14 @@ test.describe("Room list", () => {
             // @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("option", { name: "low priority room" });
+            let publicRoom = roomListView.getByRole("option", { name: "low priority room" });
 
             // Make room low priority
             await publicRoom.click({ button: "right" });
             await page.getByRole("menuitemcheckbox", { name: "Low priority" }).click();
 
             // Should have low priority decoration
+            publicRoom = roomListView.getByRole("gridcell", { name: "low priority room" });
             await expect(publicRoom.locator(".mx_RoomAvatarView_icon")).toHaveAccessibleName(
                 "This is a low priority room",
             );
@@ -356,7 +396,7 @@ test.describe("Room list", () => {
             const roomListView = getRoomList(page);
 
             const roomId = await app.client.createRoom({ name: "2 notifications" });
-            await app.client.inviteUser(roomId, bot.credentials.userId);
+            await app.client.inviteUser(roomId, bot.credentials!.userId);
             await bot.joinRoom(roomId);
 
             await bot.sendMessage(roomId, "I am a robot. Beep.");
@@ -372,7 +412,7 @@ test.describe("Room list", () => {
             const roomListView = getRoomList(page);
 
             const roomId = await app.client.createRoom({ name: "mention" });
-            await app.client.inviteUser(roomId, bot.credentials.userId);
+            await app.client.inviteUser(roomId, bot.credentials!.userId);
             await bot.joinRoom(roomId);
 
             const clientBot = await bot.prepareClient();
@@ -405,7 +445,7 @@ test.describe("Room list", () => {
             // focus the user menu to avoid to have hover decoration
             await page.getByRole("button", { name: "User menu" }).focus();
 
-            await app.client.inviteUser(roomId, bot.credentials.userId);
+            await app.client.inviteUser(roomId, bot.credentials!.userId);
             await bot.joinRoom(roomId);
             await bot.sendMessage(roomId, "I am a robot. Beep.");
 
@@ -443,12 +483,12 @@ test.describe("Room list", () => {
             const otherRoomId = await app.client.createRoom({ name: "other room" });
 
             const roomId = await app.client.createRoom({ name: "activity" });
-            await app.client.inviteUser(roomId, bot.credentials.userId);
+            await app.client.inviteUser(roomId, bot.credentials!.userId);
             await bot.joinRoom(roomId);
 
             await app.viewRoomById(roomId);
             await app.settings.openRoomSettings("Notifications");
-            await page.getByText("@mentions & keywords").click();
+            await page.getByText("@mentions and replies only").click();
             await app.settings.closeDialog();
 
             await app.settings.openUserSettings("Notifications");
@@ -470,7 +510,7 @@ test.describe("Room list", () => {
             const roomListView = getRoomList(page);
 
             const roomId = await app.client.createRoom({ name: "mark as unread" });
-            await app.client.inviteUser(roomId, bot.credentials.userId);
+            await app.client.inviteUser(roomId, bot.credentials!.userId);
             await bot.joinRoom(roomId);
 
             const room = roomListView.getByRole("option", { name: "mark as unread" });
@@ -487,12 +527,12 @@ test.describe("Room list", () => {
             const roomListView = getRoomList(page);
 
             const roomId = await app.client.createRoom({ name: "silent" });
-            await app.client.inviteUser(roomId, bot.credentials.userId);
+            await app.client.inviteUser(roomId, bot.credentials!.userId);
             await bot.joinRoom(roomId);
 
             await app.viewRoomById(roomId);
             await app.settings.openRoomSettings("Notifications");
-            await page.getByText("Off").click();
+            await page.getByText("Mute").click();
             await app.settings.closeDialog();
 
             const room = roomListView.getByRole("option", { name: "silent" });
diff --git a/apps/web/playwright/e2e/left-panel/room-list-panel/utils.ts b/apps/web/playwright/e2e/left-panel/room-list-panel/utils.ts
index 523b268c80..78d2a6c032 100644
--- a/apps/web/playwright/e2e/left-panel/room-list-panel/utils.ts
+++ b/apps/web/playwright/e2e/left-panel/room-list-panel/utils.ts
@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { type Locator, type Page } from "@playwright/test";
+import { expect, type Locator, type Page } from "@playwright/test";
 
 /**
  * Get the room list
@@ -30,11 +30,136 @@ export function getRoomListHeader(page: Page): Locator {
  * @param isUnread Whether to look for the unread version of the section header
  */
 export function getSectionHeader(page: Page, sectionName: string, isUnread = false): Locator {
-    return getRoomList(page).getByRole("gridcell", {
-        name: isUnread ? `Toggle ${sectionName} section with unread room(s)` : `Toggle ${sectionName} section`,
+    return getRoomList(page).getByRole("button", {
+        name: isUnread ? `Toggle ${sectionName} section with unread rooms` : `Toggle ${sectionName} section`,
     });
 }
 
+/**
+ * Asserts a room is nested under a specific section using the treegrid aria-level hierarchy.
+ * Section header rows sit at aria-level=1; room rows nested within a section sit at aria-level=2.
+ * Verifies that the closest preceding aria-level=1 row is the expected section header.
+ */
+export async function assertRoomInSection(page: Page, sectionName: string, roomName: string): Promise<void> {
+    const roomList = getRoomList(page);
+    const roomRow = roomList.getByRole("row", { name: `Open room ${roomName}` });
+    // Room row must be at aria-level=2 (i.e. inside a section)
+    await expect(roomRow).toHaveAttribute("aria-level", "2");
+    // The closest preceding aria-level=1 row must be the expected section header.
+    // XPath preceding:: axis returns nodes before the context in document order; [1] picks the nearest one.
+    const closestSectionHeader = roomRow.locator(`xpath=preceding::*[@role="row" and @aria-level="1"][1]`);
+    await expect(closestSectionHeader).toContainText(sectionName);
+}
+
+/**
+ * Drag and drop a room row onto a section header
+ * @param page
+ * @param roomName
+ * @param sectionName
+ */
+export async function dragRoomToSection(page: Page, roomName: string, sectionName: string): Promise<void> {
+    const sourceRow = getRoomList(page).getByRole("row", { name: `Open room ${roomName}` });
+    const source = sourceRow.locator("button").first();
+    const target = getSectionHeader(page, sectionName);
+
+    await expect(sourceRow).toBeVisible();
+    await expect(source).toBeVisible();
+    await expect(target).toBeVisible();
+
+    const sourceBox = await getBoundingBox(source, `room ${roomName}`);
+    const targetBox = await getBoundingBox(target, `section ${sectionName}`);
+
+    const sourceX = sourceBox.x + sourceBox.width / 2;
+    const sourceY = sourceBox.y + sourceBox.height / 2;
+    const targetY = targetBox.y + targetBox.height / 2;
+
+    // Grab the room
+    await page.mouse.move(sourceX, sourceY);
+    await page.mouse.down();
+    //  Move the room on the section header
+    await page.mouse.move(sourceX, targetY, { steps: 10 });
+    // Drop the room
+    await page.mouse.up();
+}
+
+/**
+ * Wait for a locator to have stable viewport geometry and return its bounding box.
+ *
+ * Playwright's boundingBox() returns null when the element is not visible or is detached.
+ * Room list updates are driven by sync and virtualization, so a newly-created room or
+ * section can match the locator before it is ready for mouse coordinates.
+ */
+async function getBoundingBox(
+    locator: Locator,
+    description: string,
+): Promise<NonNullable<Awaited<ReturnType<Locator["boundingBox"]>>>> {
+    await locator.scrollIntoViewIfNeeded();
+    await expect
+        .poll(() => locator.boundingBox(), { message: `Expected ${description} to have a bounding box` })
+        .not.toBeNull();
+
+    const box = await locator.boundingBox();
+    if (!box) {
+        throw new Error(`Expected ${description} to have a bounding box`);
+    }
+
+    return box;
+}
+
+/**
+ * Drag and drop a section header onto another section header. The dragged section is moved
+ * relative to the target: dropped before the target when dragging up, after the target when
+ * dragging down. Because the dnd start handler collapses every section, the layout changes
+ * once the drag activates — so the target position is recomputed after activation rather
+ * than cached up-front.
+ */
+export async function dragSectionToSection(
+    page: Page,
+    sourceSectionName: string,
+    targetSectionName: string,
+): Promise<void> {
+    const source = getSectionHeader(page, sourceSectionName);
+    const sourceBox = await source.boundingBox();
+    if (!sourceBox) throw new Error(`Source section ${sourceSectionName} has no bounding box`);
+
+    const sourceX = sourceBox.x + sourceBox.width / 2;
+    const sourceY = sourceBox.y + sourceBox.height / 2;
+
+    // Grab the section header
+    await page.mouse.move(sourceX, sourceY);
+    await page.mouse.down();
+    // Move past the 5px PointerSensor activation threshold so the drag actually starts.
+    // This triggers onSectionDragStart, which collapses all sections.
+    await page.mouse.move(sourceX, sourceY + 10, { steps: 5 });
+
+    // Re-query the target now that the layout has reflowed.
+    const target = getSectionHeader(page, targetSectionName);
+    const targetBox = await target.boundingBox();
+    if (!targetBox) throw new Error(`Target section ${targetSectionName} has no bounding box`);
+    const targetY = targetBox.y + targetBox.height / 2;
+
+    // Move onto the (possibly relocated) target section header and drop.
+    await page.mouse.move(sourceX, targetY, { steps: 10 });
+    await page.mouse.up();
+}
+
+/**
+ * Assert the displayed section headers appear in the given top-to-bottom order.
+ */
+export async function assertSectionsOrder(page: Page, expectedOrder: string[]): Promise<void> {
+    const positions: Array<{ name: string; y: number }> = [];
+    for (const name of expectedOrder) {
+        const header = getSectionHeader(page, name);
+        await expect(header).toBeVisible();
+        const box = await header.boundingBox();
+        if (!box) throw new Error(`Section ${name} has no bounding box`);
+        positions.push({ name, y: box.y });
+    }
+    for (let i = 1; i < positions.length; i++) {
+        expect(positions[i].y).toBeGreaterThan(positions[i - 1].y);
+    }
+}
+
 /**
  * Get the primary filters container
  * @param page
diff --git a/apps/web/playwright/e2e/links/composer-url-preview.spec.ts b/apps/web/playwright/e2e/links/composer-url-preview.spec.ts
new file mode 100644
index 0000000000..84eda0641f
--- /dev/null
+++ b/apps/web/playwright/e2e/links/composer-url-preview.spec.ts
@@ -0,0 +1,81 @@
+/*
+ * Copyright 2026 Element Creations 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";
+
+const PREVIEW_URL_PATTERN = /.*\/_matrix\/(client\/v1\/media|media\/v3)\/preview_url.*/;
+
+test.describe("Composer URL preview", () => {
+    test.use({
+        displayName: "Alice",
+        room: async ({ user, app }, use) => {
+            const roomId = await app.client.createRoom({ name: "Test room" });
+            await use({ roomId });
+        },
+    });
+
+    for (const editor of ["cider", "rich text"]) {
+        test.describe(`in ${editor}`, () => {
+            test.use({
+                labsFlags: editor === "rich_text" ? ["feature_wysiwyg_composer"] : [],
+            });
+
+            test("shows a preview when a URL is typed into the composer", async ({ page, app, room }) => {
+                await page.route(PREVIEW_URL_PATTERN, (route) =>
+                    route.fulfill({
+                        json: {
+                            "og:title": "Example Site",
+                            "og:description": "A great description",
+                            "og:site_name": "example.org",
+                        },
+                    }),
+                );
+
+                await page.goto(`#/room/${room.roomId}`);
+                const composerRegion = page.getByRole("region", { name: "Message composer" });
+                const composer = composerRegion.getByRole("textbox", { name: "Send an unencrypted message…" });
+                await composer.pressSequentially("https://example.org/");
+                const preview = composerRegion.getByRole("link", { name: "Example Site" });
+                await expect(preview).toBeVisible();
+                await composer.press("Enter");
+                await expect(composer).toBeEmpty();
+                await expect(preview).toBeHidden();
+            });
+
+            test("does not show a preview when the server returns a 404", async ({ page, app, room }) => {
+                await page.route(PREVIEW_URL_PATTERN, (route) => route.fulfill({ status: 404 }));
+
+                await page.goto(`#/room/${room.roomId}`);
+                const composer = page.getByRole("textbox", { name: "Send an unencrypted message…" });
+                await composer.pressSequentially("https://example.org/");
+
+                await expect(page.getByRole("button", { name: "Hide preview" })).not.toBeVisible();
+            });
+
+            test("shows the second URL's preview if the first has no valid preview", async ({ page, app, room }) => {
+                await page.route(PREVIEW_URL_PATTERN, (route, request) => {
+                    const url = new URL(request.url()).searchParams.get("url");
+                    if (url === "https://example.org/") {
+                        return route.fulfill({ status: 404 });
+                    }
+                    return route.fulfill({
+                        json: {
+                            "og:title": "Fallback Site",
+                            "og:site_name": "fallback.example.org",
+                        },
+                    });
+                });
+
+                await page.goto(`#/room/${room.roomId}`);
+                const composer = page.getByRole("textbox", { name: "Send an unencrypted message…" });
+                await composer.pressSequentially("https://example.org/ https://fallback.example.org/");
+
+                await expect(page.getByRole("link", { name: "Fallback Site" })).toBeVisible();
+            });
+        });
+    }
+});
diff --git a/apps/web/playwright/e2e/links/messages.spec.ts b/apps/web/playwright/e2e/links/messages.spec.ts
index 74af6c834e..b90465cb6c 100644
--- a/apps/web/playwright/e2e/links/messages.spec.ts
+++ b/apps/web/playwright/e2e/links/messages.spec.ts
@@ -1,9 +1,10 @@
 /*
-Copyright 2026 New Vector Ltd.
+ * Copyright 2026 Element Creations 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.
+ */
 
-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";
 
 test.describe("Message links", () => {
diff --git a/apps/web/playwright/e2e/links/permalinks.spec.ts b/apps/web/playwright/e2e/links/permalinks.spec.ts
index cd1aa5c42e..6463475608 100644
--- a/apps/web/playwright/e2e/links/permalinks.spec.ts
+++ b/apps/web/playwright/e2e/links/permalinks.spec.ts
@@ -38,8 +38,8 @@ test.describe("permalinks", () => {
 
         await app.viewRoomByName(room1Name);
 
-        await app.client.inviteUser(room1Id, bob.credentials.userId);
-        await app.client.inviteUser(room2Id, charlotte.credentials.userId);
+        await app.client.inviteUser(room1Id, bob.credentials!.userId);
+        await app.client.inviteUser(room2Id, charlotte.credentials!.userId);
 
         await app.client.sendMessage(room1Id, "At room mention: @room");
 
@@ -65,11 +65,11 @@ test.describe("permalinks", () => {
 
         await app.client.sendMessage(
             room1Id,
-            `Permalink to a user in the room: ${permalinkPrefix}${bob.credentials.userId}`,
+            `Permalink to a user in the room: ${permalinkPrefix}${bob.credentials!.userId}`,
         );
         await app.client.sendMessage(
             room1Id,
-            `Permalink to a user in another room: ${permalinkPrefix}${charlotte.credentials.userId}`,
+            `Permalink to a user in another room: ${permalinkPrefix}${charlotte.credentials!.userId}`,
         );
         await app.client.sendMessage(
             room1Id,
@@ -117,14 +117,14 @@ test.describe("triple-click message selection", () => {
         await bot.prepareClient();
 
         const roomId = await app.client.createRoom({ name: "Test Room" });
-        await app.client.inviteUser(roomId, bot.credentials.userId);
+        await app.client.inviteUser(roomId, bot.credentials!.userId);
         await app.viewRoomByName("Test Room");
 
         // Send a message with user and room pills
         await app.client.sendMessage(
             roomId,
             `Testing triple-click message selection. ` +
-                `User: ${permalinkPrefix}${bot.credentials.userId}, ` +
+                `User: ${permalinkPrefix}${bot.credentials!.userId}, ` +
                 `Room: ${permalinkPrefix}${roomId}, ` +
                 `Message: ${permalinkPrefix}${roomId}/$dummy-event, ` +
                 `and @room mention.`,
diff --git a/apps/web/playwright/e2e/links/topic.spec.ts b/apps/web/playwright/e2e/links/topic.spec.ts
index fff866119d..f72a6b3854 100644
--- a/apps/web/playwright/e2e/links/topic.spec.ts
+++ b/apps/web/playwright/e2e/links/topic.spec.ts
@@ -1,9 +1,10 @@
 /*
-Copyright 2026 New Vector Ltd.
+ * Copyright 2026 Element Creations 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.
+ */
 
-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";
 
 test.describe("Topic links", () => {
diff --git a/apps/web/playwright/e2e/login/login-consent.spec.ts b/apps/web/playwright/e2e/login/login-consent.spec.ts
index 23f10e39bb..f9aa7442dc 100644
--- a/apps/web/playwright/e2e/login/login-consent.spec.ts
+++ b/apps/web/playwright/e2e/login/login-consent.spec.ts
@@ -75,7 +75,7 @@ async function login(page: Page, homeserver: HomeserverInstance, credentials: Cr
     await selectHomeserver(page, homeserver.baseUrl);
 
     await page.getByRole("textbox", { name: "Username" }).fill(credentials.username);
-    await page.getByPlaceholder("Password").fill(credentials.password);
+    await page.getByPlaceholder("Password").fill(credentials.password!);
     await page.getByRole("button", { name: "Sign in" }).click();
 }
 
@@ -152,7 +152,7 @@ test.describe("Login", () => {
             await expect(axe).toHaveNoViolations();
 
             await page.getByRole("textbox", { name: "Username" }).fill(credentials.username);
-            await page.getByPlaceholder("Password").fill(credentials.password);
+            await page.getByPlaceholder("Password").fill(credentials.password!);
             await page.getByRole("button", { name: "Sign in" }).click();
 
             await expect(page).toHaveURL(/\/#\/home$/);
@@ -323,7 +323,7 @@ test.describe("Login", () => {
 
                 // Finally we actually continue
                 await page.getByRole("button", { name: "Continue" }).click();
-                await page.getByPlaceholder("Password").fill(credentials.password);
+                await page.getByPlaceholder("Password").fill(credentials.password!);
                 await page.getByRole("button", { name: "Continue" }).click();
 
                 // We end up at the Home screen
@@ -336,12 +336,13 @@ test.describe("Login", () => {
     test.describe("logout", () => {
         test("should go to welcome page on logout", async ({ page, user }) => {
             await page.getByRole("button", { name: "User menu" }).click();
-            await expect(page.getByText(user.displayName, { exact: true })).toBeVisible();
+            await expect(page.getByText(user.displayName!, { exact: true })).toBeVisible();
 
             // Allow the outstanding requests queue to settle before logging out
             await page.waitForTimeout(2000);
             await page.getByRole("menu", { name: "User menu" }).getByRole("menuitem", { name: "All settings" }).click();
             await page.getByRole("button", { name: "Remove this device" }).click();
+            await page.getByRole("button", { name: "Remove this device anyway" }).click();
             await expect(page).toHaveURL(/\/#\/welcome$/);
         });
     });
diff --git a/apps/web/playwright/e2e/login/logout_redirect_url.spec.ts b/apps/web/playwright/e2e/login/logout_redirect_url.spec.ts
index 57596de0f4..1da1917dcb 100644
--- a/apps/web/playwright/e2e/login/logout_redirect_url.spec.ts
+++ b/apps/web/playwright/e2e/login/logout_redirect_url.spec.ts
@@ -24,12 +24,13 @@ test.use({
 test.describe("logout with logout_redirect_url", () => {
     test("should respect logout_redirect_url", async ({ page, user }) => {
         await page.getByRole("button", { name: "User menu" }).click();
-        await expect(page.getByText(user.displayName, { exact: true })).toBeVisible();
+        await expect(page.getByText(user.displayName!, { exact: true })).toBeVisible();
 
         // give a change for the outstanding requests queue to settle before logging out
         await page.waitForTimeout(2000);
         await page.getByRole("menu", { name: "User menu" }).getByRole("menuitem", { name: "All settings" }).click();
         await page.getByRole("button", { name: "Remove this device" }).click();
+        await page.getByRole("button", { name: "Remove this device anyway" }).click();
 
         await expect(page).toHaveURL(/\/decoder-ring\/$/);
     });
diff --git a/apps/web/playwright/e2e/login/soft_logout.spec.ts b/apps/web/playwright/e2e/login/soft_logout.spec.ts
index 2c9325e757..23293c67bd 100644
--- a/apps/web/playwright/e2e/login/soft_logout.spec.ts
+++ b/apps/web/playwright/e2e/login/soft_logout.spec.ts
@@ -26,7 +26,7 @@ test.describe("Soft logout with password user", () => {
     test("shows the soft-logout page when a request fails, and allows a re-login", async ({ page, user }) => {
         await interceptRequestsWithSoftLogout(page, user);
         await expect(page.getByText("You're signed out")).toBeVisible();
-        await page.getByPlaceholder("Password").fill(user.password);
+        await page.getByPlaceholder("Password").fill(user.password!);
         await page.getByPlaceholder("Password").press("Enter");
 
         // back to the welcome page
diff --git a/apps/web/playwright/e2e/login/utils.ts b/apps/web/playwright/e2e/login/utils.ts
index e9ff05bb69..82681bfe55 100644
--- a/apps/web/playwright/e2e/login/utils.ts
+++ b/apps/web/playwright/e2e/login/utils.ts
@@ -52,13 +52,13 @@ export async function doTokenRegistration(
 
     return page.evaluate(() => ({
         homeserverBaseUrl: window.mxMatrixClientPeg.get().getHomeserverUrl(),
-        accessToken: window.mxMatrixClientPeg.get().getAccessToken(),
-        userId: window.mxMatrixClientPeg.get().getUserId(),
-        deviceId: window.mxMatrixClientPeg.get().getDeviceId(),
+        accessToken: window.mxMatrixClientPeg.get().getAccessToken()!,
+        userId: window.mxMatrixClientPeg.get().getSafeUserId(),
+        deviceId: window.mxMatrixClientPeg.get().getDeviceId()!,
         homeServer: window.mxMatrixClientPeg.get().getHomeserverUrl(),
         password: null,
         displayName: "Alice",
-        username: window.mxMatrixClientPeg.get().getUserIdLocalpart(),
+        username: window.mxMatrixClientPeg.get().getUserIdLocalpart()!,
     }));
 }
 
diff --git a/apps/web/playwright/e2e/messages/messages.spec.ts b/apps/web/playwright/e2e/messages/messages.spec.ts
index 60fa6a9572..ad9218037f 100644
--- a/apps/web/playwright/e2e/messages/messages.spec.ts
+++ b/apps/web/playwright/e2e/messages/messages.spec.ts
@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 /* See readme.md for tips on writing these tests. */
 
 import { type Locator, type Page } from "@playwright/test";
+import { rejectToast } from "@element-hq/element-web-playwright-common";
 
 import { test, expect } from "../../element-web-test";
 import { readSampleFileSync } from "../../sample-files";
@@ -85,10 +86,10 @@ test.describe("Message rendering", () => {
         test.describe(`with ${direction} display name`, { tag: "@screenshot" }, () => {
             test.use({
                 displayName,
-                room: async ({ user, app }, use) => {
+                room: async ({ user, app, page }, use) => {
                     const roomId = await app.client.createRoom({ name: "Test room" });
                     await use({ roomId });
-                    await app.closeVerifyToast();
+                    await rejectToast(page, "Verify this device");
                 },
             });
 
@@ -216,10 +217,10 @@ test.describe("Message rendering", () => {
 test.describe("Message url previews", () => {
     test.use({
         displayName: "Alice",
-        room: async ({ user, app }, use) => {
+        room: async ({ user, app, page }, use) => {
             const roomId = await app.client.createRoom({ name: "Test room" });
             await use({ roomId });
-            await app.closeVerifyToast();
+            await rejectToast(page, "Verify this device");
         },
     });
     test("should render a basic preview", { tag: "@screenshot" }, async ({ page, user, app, room, axe }) => {
diff --git a/apps/web/playwright/e2e/modules/composer.spec.ts b/apps/web/playwright/e2e/modules/composer.spec.ts
new file mode 100644
index 0000000000..7da67730aa
--- /dev/null
+++ b/apps/web/playwright/e2e/modules/composer.spec.ts
@@ -0,0 +1,37 @@
+/*
+Copyright 2026 Element Creations 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 { getSampleFilePath } from "../../sample-files";
+
+test.describe("Composer API", () => {
+    test.use({
+        displayName: "Manny",
+        config: {
+            modules: ["/modules/upload-module.js"],
+        },
+        page: async ({ page }, use) => {
+            await page.route("/modules/upload-module.js", async (route) => {
+                await route.fulfill({ path: getSampleFilePath("upload-module.js") });
+            });
+            await use(page);
+        },
+        room: async ({ page, app, user, bot }, use) => {
+            const roomId = await app.client.createRoom({ name: "TestRoom" });
+            await use({ roomId });
+        },
+    });
+    test("should be able to select custom uploader", async ({ page, room, app }) => {
+        page.on("dialog", (dialog) => console.log("Dialog discovered", dialog));
+        await app.viewRoomById(room.roomId);
+        await app.getComposer().getByRole("button", { name: "Attachment" }).click();
+        await page.getByRole("menuitem", { name: "Example uploader" }).click({ noWaitAfter: true });
+        await page.locator(".mx_Dialog").getByRole("button", { name: "Upload" }).click();
+        const fileTile = page.locator(".mx_MFileBody").first();
+        await expect(fileTile).toBeVisible();
+    });
+});
diff --git a/apps/web/playwright/e2e/modules/custom-component.spec.ts b/apps/web/playwright/e2e/modules/custom-component.spec.ts
index 5d2dc34aef..568e01963a 100644
--- a/apps/web/playwright/e2e/modules/custom-component.spec.ts
+++ b/apps/web/playwright/e2e/modules/custom-component.spec.ts
@@ -52,7 +52,7 @@ test.describe("Custom Component API", () => {
             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(
+                await expect(page.locator(".mx_EventTile_last")).toMatchScreenshot(
                     "custom-component-tile.png",
                     screenshotOptions(page),
                 );
@@ -64,7 +64,7 @@ test.describe("Custom Component API", () => {
             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(
+                await expect(page.locator(".mx_EventTile_last")).toMatchScreenshot(
                     "custom-component-tile-fall-through.png",
                     screenshotOptions(page),
                 );
@@ -76,7 +76,7 @@ test.describe("Custom Component API", () => {
             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(
+                await expect(page.locator(".mx_EventTile_last")).toMatchScreenshot(
                     "custom-component-tile-original.png",
                     screenshotOptions(page),
                 );
@@ -87,7 +87,7 @@ test.describe("Custom Component API", () => {
             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" }),
+                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 ({
@@ -105,12 +105,16 @@ test.describe("Custom Component API", () => {
             });
 
             await app.timeline.scrollToBottom();
-            const imgTile = page.locator(".mx_MImageBody").first();
+            const imgTile = page.locator(".mx_ImageBody").first();
             await expect(imgTile).toBeVisible();
+            const image = imgTile.getByRole("img", { name: "bad.png" });
+            await expect(image).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();
+            await image.click();
+            const imageView = page.getByLabel("Image view");
+            await expect(imageView).toBeVisible();
+            await expect(imageView.getByLabel("Download")).not.toBeVisible();
         });
         test("should allow downloading media when the allowDownloading hint is set to true", async ({
             page,
@@ -127,12 +131,16 @@ test.describe("Custom Component API", () => {
             });
 
             await app.timeline.scrollToBottom();
-            const imgTile = page.locator(".mx_MImageBody").first();
+            const imgTile = page.locator(".mx_ImageBody").first();
             await expect(imgTile).toBeVisible();
+            const image = imgTile.getByRole("img", { name: "good.png" });
+            await expect(image).toBeVisible();
             await imgTile.hover();
             await expect(page.getByRole("button", { name: "Download" })).toBeVisible();
-            await imgTile.click();
-            await expect(page.getByLabel("Image view").getByLabel("Download")).toBeVisible();
+            await image.click();
+            const imageView = page.getByLabel("Image view");
+            await expect(imageView).toBeVisible();
+            await expect(imageView.getByLabel("Download")).toBeVisible();
         });
         test(
             "should render the next registered component if the filter function throws",
@@ -140,7 +148,7 @@ test.describe("Custom Component API", () => {
             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(
+                await expect(page.locator(".mx_EventTile_last")).toMatchScreenshot(
                     "custom-component-crash-handle-filter.png",
                     screenshotOptions(page),
                 );
@@ -152,7 +160,7 @@ test.describe("Custom Component API", () => {
             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(
+                await expect(page.locator(".mx_EventTile_last")).toMatchScreenshot(
                     "custom-component-crash-handle-renderer.png",
                     screenshotOptions(page),
                 );
diff --git a/apps/web/playwright/e2e/modules/settings.spec.ts b/apps/web/playwright/e2e/modules/settings.spec.ts
new file mode 100644
index 0000000000..76791c97ba
--- /dev/null
+++ b/apps/web/playwright/e2e/modules/settings.spec.ts
@@ -0,0 +1,34 @@
+/*
+Copyright 2026 Element Creations 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 { getSampleFilePath } from "../../sample-files";
+
+test.describe("Settings API", () => {
+    test.use({
+        displayName: "Manny",
+        config: {
+            modules: ["/modules/settings-module.js"],
+            setting_defaults: {
+                language: "de",
+            },
+        },
+        page: async ({ page }, use) => {
+            await page.route("/modules/settings-module.js", async (route) => {
+                await route.fulfill({ path: getSampleFilePath("settings-module.js") });
+            });
+            await use(page);
+        },
+    });
+
+    test("should read a config-resolved setting value via api.settings.getValue", async ({ page }) => {
+        const dialogPromise = page.waitForEvent("dialog");
+        await page.goto("/");
+        const dialog = await dialogPromise;
+        expect(dialog.message()).toBe("de");
+    });
+});
diff --git a/apps/web/playwright/e2e/oidc/index.ts b/apps/web/playwright/e2e/oidc/index.ts
index 2cc6d48176..37838acf21 100644
--- a/apps/web/playwright/e2e/oidc/index.ts
+++ b/apps/web/playwright/e2e/oidc/index.ts
@@ -30,12 +30,12 @@ export async function registerAccountMas(
     await page.getByRole("textbox", { name: "Confirm Password" }).fill(password);
     await page.getByRole("button", { name: "Continue" }).click();
 
-    let code: string;
+    let code!: string;
     await expect(async () => {
         const messages = await mailpit.listMessages();
         expect(messages.messages[0].To[0].Address).toEqual(email);
         const text = await mailpit.renderMessageText(messages.messages[0].ID);
-        [, code] = text.match(/Your verification code to confirm this email address is: (\d{6})/);
+        [, code] = text.match(/Your verification code to confirm this email address is: (\d{6})/)!;
     }).toPass();
 
     await page.getByRole("textbox", { name: "6-digit code" }).fill(code);
diff --git a/apps/web/playwright/e2e/oidc/oidc-native.spec.ts b/apps/web/playwright/e2e/oidc/oidc-native.spec.ts
index 21b79a1d13..dd797f9d6a 100644
--- a/apps/web/playwright/e2e/oidc/oidc-native.spec.ts
+++ b/apps/web/playwright/e2e/oidc/oidc-native.spec.ts
@@ -29,7 +29,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
     }, testInfo) => {
         await page.clock.install();
 
-        const tokenUri = `${mas.baseUrl}/oauth2/token`;
+        const tokenUri = `${mas!.baseUrl}/oauth2/token`;
         const tokenApiPromise = page.waitForRequest(
             (request) => request.url() === tokenUri && request.postDataJSON()["grant_type"] === "authorization_code",
         );
@@ -66,7 +66,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         await newPage.close();
 
         // Assert logging out revokes both tokens
-        const revokeUri = `${mas.baseUrl}/oauth2/revoke`;
+        const revokeUri = `${mas!.baseUrl}/oauth2/revoke`;
         const revokeAccessTokenPromise = page.waitForRequest(
             (request) => request.url() === revokeUri && request.postDataJSON()["token_type_hint"] === "access_token",
         );
@@ -76,6 +76,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         const locator = await app.settings.openUserMenu();
         await locator.getByRole("menuitem", { name: "All settings", exact: true }).click();
         await page.getByRole("button", { name: "Remove this device", exact: true }).click();
+        await page.getByRole("button", { name: "Remove this device anyway" }).click();
         await revokeAccessTokenPromise;
         await revokeRefreshTokenPromise;
     });
@@ -94,17 +95,16 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
             await expect(page.getByText("Welcome")).toBeVisible();
             await page.goto("about:blank");
 
-            const result = await mas.manage("kill-sessions", userId);
+            const result = await mas!.manage("kill-sessions", userId);
             expect(result.output).toContain("Ended 1 active OAuth 2.0 session");
 
             await page.goto("http://localhost:8080");
             await expect(
                 page.getByText("For security, this session has been removed. 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);
+            await expect.poll(() => page.evaluate(() => Object.keys(localStorage))).toHaveLength(0);
         },
     );
 
@@ -125,6 +125,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         await page.waitForTimeout(2000);
         await page.getByRole("menu", { name: "User menu" }).getByRole("menuitem", { name: "All settings" }).click();
         await page.getByRole("button", { name: "Remove this device" }).click();
+        await page.getByRole("button", { name: "Remove this device anyway" }).click();
         await expect(page).toHaveURL(/\/#\/welcome$/);
 
         // Log in again
@@ -159,6 +160,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
             await page.waitForTimeout(2000);
             await page.getByRole("menu", { name: "User menu" }).getByRole("menuitem", { name: "All settings" }).click();
             await page.getByRole("button", { name: "Remove this device" }).click();
+            await page.getByRole("button", { name: "Remove this device anyway" }).click();
             await expect(page).toHaveURL(/\/#\/welcome$/);
 
             // Log in again
@@ -210,6 +212,12 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
                     .getByRole("menuitem", { name: "All settings" })
                     .click();
                 await page.getByRole("button", { name: "Remove this device" }).click();
+                // Since we have another device, it only shows a normal logout
+                // confirmation dialog, rather than prompting the user to set up
+                // recovery. Use the test ID to find this button to avoid
+                // ambiguity between the dialog button and the one in Settings.
+                await page.getByTestId("dialog-primary-button").click();
+
                 await expect(page).toHaveURL(/\/#\/welcome$/);
 
                 // Log in again
diff --git a/apps/web/playwright/e2e/one-to-one-chat/one-to-one-chat.spec.ts b/apps/web/playwright/e2e/one-to-one-chat/one-to-one-chat.spec.ts
index 6ad69deba9..312084c895 100644
--- a/apps/web/playwright/e2e/one-to-one-chat/one-to-one-chat.spec.ts
+++ b/apps/web/playwright/e2e/one-to-one-chat/one-to-one-chat.spec.ts
@@ -12,7 +12,7 @@ import { type Credentials } from "../../plugins/homeserver";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
 
 const test = base.extend<{
-    user2?: Credentials;
+    user2: Credentials;
 }>({});
 
 test.describe("1:1 chat room", () => {
@@ -38,12 +38,12 @@ test.describe("1:1 chat room", () => {
 
         // wait till the room was left
         await expect(
-            page.getByRole("group", { name: "Rooms" }).locator(".mx_RoomTile").getByText(user2.displayName),
+            page.getByRole("group", { name: "Rooms" }).locator(".mx_RoomTile").getByText(user2.displayName!),
         ).not.toBeVisible();
         await page.waitForTimeout(500); // avoid race condition with routing
 
         // open new 1:1 chat room
         await page.goto(`/#/user/${user2.userId}?action=chat`);
-        await expect(page.locator(".mx_RoomHeader_heading").getByText(user2.displayName)).toBeVisible();
+        await expect(page.locator(".mx_RoomHeader_heading").getByText(user2.displayName!)).toBeVisible();
     });
 });
diff --git a/apps/web/playwright/e2e/pinned-messages/index.ts b/apps/web/playwright/e2e/pinned-messages/index.ts
index 793dc1b45e..c3a326be32 100644
--- a/apps/web/playwright/e2e/pinned-messages/index.ts
+++ b/apps/web/playwright/e2e/pinned-messages/index.ts
@@ -19,7 +19,7 @@ type RoomRef = { name: string; roomId: string };
  * Set up for pinned message tests.
  */
 export const test = base.extend<{
-    room1Name?: string;
+    room1Name: string;
     room1: { name: string; roomId: string };
     util: Helpers;
 }>({
@@ -28,7 +28,7 @@ export const test = base.extend<{
 
     room1Name: "Room 1",
     room1: async ({ room1Name: name, app, user, bot }, use) => {
-        const roomId = await app.client.createRoom({ name, invite: [bot.credentials.userId] });
+        const roomId = await app.client.createRoom({ name, invite: [bot.credentials!.userId] });
         await bot.awaitRoomMembership(roomId);
         await use({ name, roomId });
     },
diff --git a/apps/web/playwright/e2e/polls/pollHistory.spec.ts b/apps/web/playwright/e2e/polls/pollHistory.spec.ts
index 4f2adff40d..71271a3986 100644
--- a/apps/web/playwright/e2e/polls/pollHistory.spec.ts
+++ b/apps/web/playwright/e2e/polls/pollHistory.spec.ts
@@ -95,7 +95,7 @@ test.describe("Poll history", () => {
 
         const roomId = await app.client.createRoom({});
 
-        await app.client.inviteUser(roomId, bot.credentials.userId);
+        await app.client.inviteUser(roomId, bot.credentials!.userId);
         await page.goto("/#/room/" + roomId);
         // wait until Bob joined
         await expect(page.getByText("BotBob joined the room")).toBeAttached();
diff --git a/apps/web/playwright/e2e/polls/polls.spec.ts b/apps/web/playwright/e2e/polls/polls.spec.ts
index f10b46f209..9452b2f9f0 100644
--- a/apps/web/playwright/e2e/polls/polls.spec.ts
+++ b/apps/web/playwright/e2e/polls/polls.spec.ts
@@ -98,7 +98,7 @@ test.describe("Polls", () => {
 
     test("should be creatable and votable", { tag: "@screenshot" }, async ({ page, app, bot, user }) => {
         const roomId: string = await app.client.createRoom({});
-        await app.client.inviteUser(roomId, bot.credentials.userId);
+        await app.client.inviteUser(roomId, bot.credentials!.userId);
         await page.goto("/#/room/" + roomId);
         // wait until Bob joined
         await expect(page.getByText("BotBob joined the room")).toBeAttached();
@@ -116,10 +116,10 @@ test.describe("Polls", () => {
         await createPoll(page, pollParams);
 
         // Wait for message to send, get its ID and save as @pollId
-        const pollId = await page
+        const pollId = (await page
             .locator(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]")
             .filter({ hasText: pollParams.title })
-            .getAttribute("data-scroll-tokens");
+            .getAttribute("data-scroll-tokens"))!;
         await expect(getPollTile(page, pollId)).toMatchScreenshot("Polls_Timeline_tile_no_votes.png", {
             css: `
                 .mx_MessageTimestamp {
@@ -162,7 +162,7 @@ test.describe("Polls", () => {
 
     test("should be editable from context menu if no votes have been cast", async ({ page, app, user, bot }) => {
         const roomId: string = await app.client.createRoom({});
-        await app.client.inviteUser(roomId, bot.credentials.userId);
+        await app.client.inviteUser(roomId, bot.credentials!.userId);
         await page.goto("/#/room/" + roomId);
 
         const locator = await app.openMessageComposerOptions();
@@ -175,10 +175,10 @@ test.describe("Polls", () => {
         await createPoll(page, pollParams);
 
         // Wait for message to send, get its ID and save as @pollId
-        const pollId = await page
+        const pollId = (await page
             .locator(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]")
             .filter({ hasText: pollParams.title })
-            .getAttribute("data-scroll-tokens");
+            .getAttribute("data-scroll-tokens"))!;
 
         // Open context menu
         await getPollTile(page, pollId).click({ button: "right" });
@@ -192,7 +192,7 @@ test.describe("Polls", () => {
 
     test("should not be editable from context menu if votes have been cast", async ({ page, app, user, bot }) => {
         const roomId: string = await app.client.createRoom({});
-        await app.client.inviteUser(roomId, bot.credentials.userId);
+        await app.client.inviteUser(roomId, bot.credentials!.userId);
         await page.goto("/#/room/" + roomId);
 
         const locator = await app.openMessageComposerOptions();
@@ -205,10 +205,10 @@ test.describe("Polls", () => {
         await createPoll(page, pollParams);
 
         // Wait for message to send, get its ID and save as @pollId
-        const pollId = await page
+        const pollId = (await page
             .locator(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]")
             .filter({ hasText: pollParams.title })
-            .getAttribute("data-scroll-tokens");
+            .getAttribute("data-scroll-tokens"))!;
 
         // Bot votes 'Maybe' in the poll
         await botVoteForOption(page, bot, roomId, pollId, pollParams.options[2]);
@@ -234,8 +234,8 @@ test.describe("Polls", () => {
             await botCharlie.prepareClient();
 
             const roomId: string = await app.client.createRoom({});
-            await app.client.inviteUser(roomId, bot.credentials.userId);
-            await app.client.inviteUser(roomId, botCharlie.credentials.userId);
+            await app.client.inviteUser(roomId, bot.credentials!.userId);
+            await app.client.inviteUser(roomId, botCharlie.credentials!.userId);
             await page.goto("/#/room/" + roomId);
 
             // wait until the bots joined
@@ -253,10 +253,10 @@ test.describe("Polls", () => {
             await createPoll(page, pollParams);
 
             // Wait for message to send, get its ID and save as @pollId
-            const pollId = await page
+            const pollId = (await page
                 .locator(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]")
                 .filter({ hasText: pollParams.title })
-                .getAttribute("data-scroll-tokens");
+                .getAttribute("data-scroll-tokens"))!;
 
             // Bob starts thread on the poll
             await bot.sendMessage(
diff --git a/apps/web/playwright/e2e/presence/presence.spec.ts b/apps/web/playwright/e2e/presence/presence.spec.ts
index 684fd8a5bf..b451d307e2 100644
--- a/apps/web/playwright/e2e/presence/presence.spec.ts
+++ b/apps/web/playwright/e2e/presence/presence.spec.ts
@@ -18,7 +18,7 @@ test.describe("Presence tests", () => {
         // This is failing on CI (https://github.com/element-hq/element-web/issues/27270)
         // but not locally, so debugging this is going to be tricky. Let's disable it for now.
         test.skip("renders unreachable presence state correctly", async ({ page, app, user, bot: bob }) => {
-            await app.client.createRoom({ name: "My Room", invite: [bob.credentials.userId] });
+            await app.client.createRoom({ name: "My Room", invite: [bob.credentials!.userId] });
             await app.viewRoomByName("My Room");
 
             await bob.evaluate(async (client) => {
@@ -36,7 +36,7 @@ test.describe("Presence tests", () => {
                                 events: [
                                     {
                                         type: "m.presence",
-                                        sender: bob.credentials.userId,
+                                        sender: bob.credentials!.userId,
                                         content: {
                                             presence: "io.element.unreachable",
                                             currently_active: false,
diff --git a/apps/web/playwright/e2e/read-receipts/high-level.spec.ts b/apps/web/playwright/e2e/read-receipts/high-level.spec.ts
index a723928c57..d3d2e5765c 100644
--- a/apps/web/playwright/e2e/read-receipts/high-level.spec.ts
+++ b/apps/web/playwright/e2e/read-receipts/high-level.spec.ts
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 /* See readme.md for tips on writing these tests. */
 
-import { customEvent, many, test } from ".";
+import { many, test } from ".";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
 
 test.describe("Read receipts", { tag: "@mergequeue" }, () => {
@@ -20,6 +20,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
             roomAlpha: room1,
             roomBeta: room2,
             util,
+            msg,
         }) => {
             await util.goTo(room1);
             await util.assertRead(room2);
@@ -29,13 +30,14 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
             await util.markAsRead(room2);
             await util.assertRead(room2);
 
-            await util.receiveMessages(room2, [customEvent("org.custom.event", { body: "foobar" })]);
+            await util.receiveMessages(room2, [msg.customEvent("org.custom.event", { body: "foobar" })]);
             await util.assertRead(room2);
         });
         test("Sending an important event after unimportant ones makes the room unread", async ({
             roomAlpha: room1,
             roomBeta: room2,
             util,
+            msg,
         }) => {
             // Given We have read the important messages
             await util.goTo(room1);
@@ -47,7 +49,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
             await util.goTo(room1);
 
             // When we receive unimportant messages
-            await util.receiveMessages(room2, [customEvent("org.custom.event", { body: "foobar" })]);
+            await util.receiveMessages(room2, [msg.customEvent("org.custom.event", { body: "foobar" })]);
 
             // Then the room is still read
             await util.assertStillRead(room2);
@@ -62,6 +64,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
             roomAlpha: room1,
             roomBeta: room2,
             util,
+            msg,
         }) => {
             // Display room 1
             await util.goTo(room1);
@@ -71,9 +74,9 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
 
             // We received 3 unimportant messages to room2
             await util.receiveMessages(room2, [
-                customEvent("org.custom.event", { body: "foobar1" }),
-                customEvent("org.custom.event", { body: "foobar2" }),
-                customEvent("org.custom.event", { body: "foobar3" }),
+                msg.customEvent("org.custom.event", { body: "foobar1" }),
+                msg.customEvent("org.custom.event", { body: "foobar2" }),
+                msg.customEvent("org.custom.event", { body: "foobar3" }),
             ]);
 
             // The room 2 is still read
diff --git a/apps/web/playwright/e2e/read-receipts/index.ts b/apps/web/playwright/e2e/read-receipts/index.ts
index bd04be36a8..1df837a236 100644
--- a/apps/web/playwright/e2e/read-receipts/index.ts
+++ b/apps/web/playwright/e2e/read-receipts/index.ts
@@ -23,9 +23,9 @@ type RoomRef = { name: string; roomId: string };
  * - Invite the bot to both rooms and ensure that it has joined
  */
 export const test = base.extend<{
-    roomAlphaName?: string;
+    roomAlphaName: string;
     roomAlpha: RoomRef;
-    roomBetaName?: string;
+    roomBetaName: string;
     roomBeta: RoomRef;
     msg: MessageBuilder;
     util: Helpers;
@@ -35,13 +35,13 @@ export const test = base.extend<{
 
     roomAlphaName: "Room Alpha",
     roomAlpha: async ({ roomAlphaName: name, app, user, bot }, use) => {
-        const roomId = await app.client.createRoom({ name, invite: [bot.credentials.userId] });
+        const roomId = await app.client.createRoom({ name, invite: [bot.credentials!.userId] });
         await bot.awaitRoomMembership(roomId);
         await use({ name, roomId });
     },
     roomBetaName: "Room Beta",
     roomBeta: async ({ roomBetaName: name, app, user, bot }, use) => {
-        const roomId = await app.client.createRoom({ name, invite: [bot.credentials.userId] });
+        const roomId = await app.client.createRoom({ name, invite: [bot.credentials!.userId] });
         await bot.awaitRoomMembership(roomId);
         await use({ name, roomId });
     },
@@ -159,7 +159,7 @@ export class MessageBuilder {
                         ev.getRelation()?.rel_type === "m.thread"
                             ? {
                                   rel_type: "m.thread",
-                                  event_id: ev.getRelation().event_id,
+                                  event_id: ev.getRelation()!.event_id,
                               }
                             : {};
 
@@ -222,11 +222,11 @@ export class MessageBuilder {
             public async performAction(bot: Bot, room: JSHandle<Room>): Promise<void> {
                 const ev = await this.messageFinder.getMessage(room, targetMessage, true);
                 const { id, threadId } = await ev.evaluate((ev) => ({
-                    id: ev.getId(),
+                    id: ev.getId()!,
                     threadId: !ev.isThreadRoot ? ev.threadRootId : undefined,
                 }));
                 const roomId = await room.evaluate((room) => room.roomId);
-                await bot.reactToMessage(roomId, threadId, id, reaction);
+                await bot.reactToMessage(roomId, threadId ?? null, id, reaction);
             }
         })(this);
     }
@@ -240,11 +240,11 @@ export class MessageBuilder {
             public async performAction(bot: Bot, room: JSHandle<Room>): Promise<void> {
                 const ev = await this.messageFinder.getMessage(room, targetMessage, true);
                 const { id, threadId } = await ev.evaluate((ev) => ({
-                    id: ev.getId(),
+                    id: ev.getId()!,
                     threadId: !ev.isThreadRoot ? ev.threadRootId : undefined,
                 }));
                 const roomId = await room.evaluate((room) => room.roomId);
-                await bot.redactEvent(roomId, threadId, id);
+                await bot.redactEvent(roomId, threadId!, id);
             }
         })(this);
     }
@@ -286,6 +286,20 @@ export class MessageBuilder {
             { event },
         );
     }
+
+    /**
+     * BotActionSpec to send a custom event
+     * @param eventType - the type of the event to send
+     * @param content - the event content to send
+     */
+    customEvent(eventType: string, content: Record<string, any>): BotActionSpec {
+        return new (class extends BotActionSpec {
+            public async performAction(cli: Client, room: JSHandle<Room>): Promise<void> {
+                const roomId = await room.evaluate((room) => room.roomId);
+                await cli.sendEvent(roomId, null, eventType, content);
+            }
+        })(this);
+    }
 }
 
 /**
@@ -295,11 +309,7 @@ export class MessageBuilder {
  * MessageBuilder.replyTo} which creates a reply based on a previous message.
  */
 export abstract class MessageContentSpec {
-    messageFinder: MessageBuilder | null;
-
-    constructor(messageFinder: MessageBuilder = null) {
-        this.messageFinder = messageFinder;
-    }
+    constructor(public readonly messageFinder: MessageBuilder) {}
 
     public abstract getContent(room: JSHandle<Room>): Promise<Record<string, unknown>>;
 }
@@ -312,11 +322,7 @@ export abstract class MessageContentSpec {
  * MessageBuilder.redactionOf} which redacts the message we are referring to.
  */
 export abstract class BotActionSpec {
-    messageFinder: MessageBuilder | null;
-
-    constructor(messageFinder: MessageBuilder = null) {
-        this.messageFinder = messageFinder;
-    }
+    constructor(public readonly messageFinder: MessageBuilder) {}
 
     public abstract performAction(client: Client, room: JSHandle<Room>): Promise<void>;
 }
@@ -542,7 +548,7 @@ class Helpers {
 
     async findRoomById(roomId: string): Promise<JSHandle<Room>> {
         return this.app.client.evaluateHandle((cli, roomId) => {
-            return cli.getRooms().find((r) => r.roomId === roomId);
+            return cli.getRooms().find((r) => r.roomId === roomId)!;
         }, roomId);
     }
 
@@ -557,7 +563,7 @@ class Helpers {
      */
     async assertReadThread(rootMessage: string) {
         const tile = await this.getThreadListTile(rootMessage);
-        await expect(tile.locator(".mx_NotificationBadge")).not.toBeVisible();
+        await expect(tile.getByTestId("notification-badge")).not.toBeVisible();
     }
 
     /**
@@ -566,7 +572,7 @@ class Helpers {
      */
     async assertUnreadThread(rootMessage: string) {
         const tile = await this.getThreadListTile(rootMessage);
-        await expect(tile.locator(".mx_NotificationBadge")).toBeVisible();
+        await expect(tile.getByTestId("notification-badge")).toBeVisible();
     }
 
     /**
@@ -609,25 +615,11 @@ class Helpers {
         const roomListContainer = this.page.getByTestId("room-list");
         const roomTiles = roomListContainer.getByRole("option");
         for (const [i, room] of rooms.entries()) {
-            await expect(roomTiles.nth(i)).toHaveAccessibleName(new RegExp(`${room.name}`));
+            await expect(roomTiles.nth(i)).toHaveAccessibleName(new RegExp(room.name));
         }
     }
 }
 
-/**
- * BotActionSpec to send a custom event
- * @param eventType - the type of the event to send
- * @param content - the event content to send
- */
-export function customEvent(eventType: string, content: Record<string, any>): BotActionSpec {
-    return new (class extends BotActionSpec {
-        public async performAction(cli: Client, room: JSHandle<Room>): Promise<void> {
-            const roomId = await room.evaluate((room) => room.roomId);
-            await cli.sendEvent(roomId, null, eventType, content);
-        }
-    })();
-}
-
 /**
  * Generate strings with the supplied prefix, suffixed with numbers.
  *
diff --git a/apps/web/playwright/e2e/read-receipts/reactions-in-threads.spec.ts b/apps/web/playwright/e2e/read-receipts/reactions-in-threads.spec.ts
index b2cd2e554a..622e8e6021 100644
--- a/apps/web/playwright/e2e/read-receipts/reactions-in-threads.spec.ts
+++ b/apps/web/playwright/e2e/read-receipts/reactions-in-threads.spec.ts
@@ -180,7 +180,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
                 await util.openThread("Msg1");
                 await page.locator(".mx_ThreadPanel").getByText("Reply1a").hover();
                 await page.getByRole("button", { name: "React" }).click();
-                await page.locator(".mx_EmojiPicker_body").getByText("😀").click();
+                await page.getByLabel("Emoji Picker").getByRole("gridcell", { name: "😀" }).click();
 
                 // And cancel the reaction
                 await page.locator(".mx_ThreadPanel").getByLabel("Mae reacted with 😀").click();
@@ -191,9 +191,9 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
                 // And I can do it all again without an error
                 await page.locator(".mx_ThreadPanel").getByText("Reply1a").hover();
                 await page.getByRole("button", { name: "React" }).click();
-                await page.locator(".mx_EmojiPicker_body").getByText("😀").first().click();
+                await page.getByLabel("Emoji Picker").getByRole("gridcell", { name: "😀" }).first().click();
                 await page.locator(".mx_ThreadPanel").getByLabel("Mae reacted with 😀").click();
-                await expect(await page.locator(".mx_ThreadPanel").getByLabel("Mae reacted with 😀")).not.toBeVisible();
+                await expect(page.locator(".mx_ThreadPanel").getByLabel("Mae reacted with 😀")).not.toBeVisible();
             });
         });
     });
diff --git a/apps/web/playwright/e2e/read-receipts/read-receipts.spec.ts b/apps/web/playwright/e2e/read-receipts/read-receipts.spec.ts
index 9e38cd4d71..627eb1e3c7 100644
--- a/apps/web/playwright/e2e/read-receipts/read-receipts.spec.ts
+++ b/apps/web/playwright/e2e/read-receipts/read-receipts.spec.ts
@@ -64,7 +64,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
     const sendThreadedReadReceipt = async (
         app: ElementAppPage,
         eventResponse: ISendEventResponse,
-        threadRootEventResponse: ISendEventResponse = undefined,
+        threadRootEventResponse?: ISendEventResponse,
     ) => {
         await app.client.sendReadReceipt(
             await fakeEventFromSent(app, eventResponse, threadRootEventResponse?.event_id),
@@ -93,10 +93,10 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
          */
         selectedRoomId = await app.client.createRoom({ name: selectedRoomName });
         // Invite the bot to Other room
-        otherRoomId = await app.client.createRoom({ name: otherRoomName, invite: [bot.credentials.userId] });
+        otherRoomId = await app.client.createRoom({ name: otherRoomName, invite: [bot.credentials!.userId] });
 
         await page.goto(`/#/room/${otherRoomId}`);
-        await expect(page.getByText(`${bot.credentials.displayName} joined the room`)).toBeVisible();
+        await expect(page.getByText(`${bot.credentials!.displayName} joined the room`)).toBeVisible();
 
         // Then go into Selected room
         await page.goto(`/#/room/${selectedRoomId}`);
@@ -120,11 +120,11 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
         await sendUnthreadedReadReceipt(app, main2);
 
         // (So the room has no unreads)
-        await expect(page.getByLabel(`${otherRoomName}`)).toBeVisible();
+        await expect(page.getByLabel(otherRoomName)).toBeVisible();
 
         // And we persuade the app to persist its state to indexeddb by reloading and waiting
         await page.reload();
-        await expect(page.getByLabel(`${selectedRoomName}`)).toBeVisible();
+        await expect(page.getByLabel(selectedRoomName)).toBeVisible();
 
         // And we reload again, fetching the persisted state FROM indexeddb
         await page.reload();
@@ -132,7 +132,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
         // Then the room is read, because the persisted state correctly remembers both
         // receipts. (In #24629, the unthreaded receipt overwrote the main thread one,
         // meaning that the room still said it had unread messages.)
-        await expect(page.getByLabel(`${otherRoomName}`)).toBeVisible();
+        await expect(page.getByLabel(otherRoomName)).toBeVisible();
         await expect(page.getByLabel(`${otherRoomName} Unread messages.`)).not.toBeVisible();
     });
 
@@ -172,7 +172,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
         await sendThreadedReadReceipt(app, main3);
 
         // Then the room has no unreads
-        await expect(page.getByLabel(`${otherRoomName}`)).toBeVisible();
+        await expect(page.getByLabel(otherRoomName)).toBeVisible();
     });
 
     test("Recognises unread messages on other thread after receiving a receipt for earlier ones", async ({
@@ -210,7 +210,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
         await sendThreadedReadReceipt(app, thread1b, main1);
 
         // Then the room has no unreads
-        await expect(page.getByLabel(`${otherRoomName}`)).toBeVisible();
+        await expect(page.getByLabel(otherRoomName)).toBeVisible();
         await util.goTo({ name: otherRoomName, roomId: otherRoomId });
         await util.assertReadThread("Message 1");
     });
@@ -235,7 +235,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
         // thread. The one in main is read because the unthreaded
         // receipt is for a later event. The room should therefore be
         // read, and the thread unread.
-        await expect(page.getByLabel(`${otherRoomName}`)).toBeVisible();
+        await expect(page.getByLabel(otherRoomName)).toBeVisible();
         await util.goTo({ name: otherRoomName, roomId: otherRoomId });
         await util.assertUnreadThread("Message 1");
     });
@@ -287,7 +287,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
             sendMessageResponses.push(await sendMessage(bot, i));
         }
 
-        const lastMessageId = sendMessageResponses.at(-1).event_id;
+        const lastMessageId = sendMessageResponses.at(-1)!.event_id;
         const uriEncodedLastMessageId = encodeURIComponent(lastMessageId);
 
         // wait until all messages have been received
@@ -330,7 +330,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
 
         const readMarkersRequest2 = await readMarkersRequestPromise2;
         expect(readMarkersRequest2.postDataJSON()).toEqual({
-            ["m.fully_read"]: sendMessageResponses.at(-1).event_id,
+            ["m.fully_read"]: sendMessageResponses.at(-1)!.event_id,
         });
     });
 });
diff --git a/apps/web/playwright/e2e/read-receipts/room-list-order.spec.ts b/apps/web/playwright/e2e/read-receipts/room-list-order.spec.ts
index c13730107c..fdfd64083f 100644
--- a/apps/web/playwright/e2e/read-receipts/room-list-order.spec.ts
+++ b/apps/web/playwright/e2e/read-receipts/room-list-order.spec.ts
@@ -22,7 +22,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
             bot,
         }) => {
             // Create a third room to navigate to
-            const room3Id = await app.client.createRoom({ name: "Room Gamma", invite: [bot.credentials.userId] });
+            const room3Id = await app.client.createRoom({ name: "Room Gamma", invite: [bot.credentials!.userId] });
             await bot.awaitRoomMembership(room3Id);
             const room3 = { name: "Room Gamma", roomId: room3Id };
 
@@ -51,7 +51,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
             bot,
         }) => {
             // Create a third room to navigate to
-            const room3Id = await app.client.createRoom({ name: "Room Gamma", invite: [bot.credentials.userId] });
+            const room3Id = await app.client.createRoom({ name: "Room Gamma", invite: [bot.credentials!.userId] });
             await bot.awaitRoomMembership(room3Id);
             const room3 = { name: "Room Gamma", roomId: room3Id };
 
diff --git a/apps/web/playwright/e2e/register/email.spec.ts b/apps/web/playwright/e2e/register/email.spec.ts
index bf8a2157f5..a629266954 100644
--- a/apps/web/playwright/e2e/register/email.spec.ts
+++ b/apps/web/playwright/e2e/register/email.spec.ts
@@ -55,7 +55,7 @@ test.describe("Email Registration", async () => {
             expect(messages.messages).toHaveLength(1);
             expect(messages.messages[0].To[0].Address).toEqual("alice@email.com");
             const text = await mailpitClient.renderMessageText(messages.messages[0].ID);
-            const [emailLink] = text.match(/http.+/);
+            const [emailLink] = text.match(/http.+/)!;
             await request.get(emailLink); // "Click" the link in the email
 
             await expect(page.getByText("Welcome alice")).toBeVisible();
diff --git a/apps/web/playwright/e2e/release-announcement/releaseAnnouncement.spec.ts b/apps/web/playwright/e2e/release-announcement/releaseAnnouncement.spec.ts
index 8f0a73ebff..e73c5fa7cd 100644
--- a/apps/web/playwright/e2e/release-announcement/releaseAnnouncement.spec.ts
+++ b/apps/web/playwright/e2e/release-announcement/releaseAnnouncement.spec.ts
@@ -6,15 +6,12 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { test, expect } from "./";
+import { rejectToast } from "@element-hq/element-web-playwright-common";
+
+import { test } from "./";
 
 test.describe("Release announcement", () => {
     test.use({
-        config: {
-            features: {
-                feature_release_announcement: true,
-            },
-        },
         room: async ({ app, user }, use) => {
             const roomId = await app.client.createRoom({
                 name: "Test room",
@@ -22,37 +19,31 @@ test.describe("Release announcement", () => {
             await app.viewRoomById(roomId);
             await use({ roomId });
         },
-        labsFlags: ["feature_new_room_list"],
+        labsFlags: ["feature_room_list_sections"],
+    });
+
+    test.beforeEach(async ({ page, app, user }) => {
+        // The toasts are displayed above the search section
+        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");
     });
 
     // There is no release announcement currently live
-    test.skip(
-        "should display the new room list release announcement",
+    test(
+        "should display the room list section release announcement",
         { tag: "@screenshot" },
         async ({ page, app, room, util }) => {
-            // dismiss the toast so the announcement appears
-            await page.getByRole("button", { name: "Dismiss" }).click();
+            const sectionName = "Introducing Sections";
+            // The section release announcement should be displayed
+            await util.assertReleaseAnnouncementIsVisible(sectionName);
+            // Hide the section release announcement
+            const dialog = util.getReleaseAnnouncement(sectionName);
+            await dialog.getByRole("button", { name: "Ok" }).click();
 
-            const newSoundsName = "We’ve refreshed your sounds";
-            // The new sounds release announcement should be displayed
-            await util.assertReleaseAnnouncementIsVisible(newSoundsName);
-            // Hide the new sounds release announcement
-            const newSoundsDialog = util.getReleaseAnnouncement(newSoundsName);
-            await newSoundsDialog.getByRole("button", { name: "OK" }).click();
-
-            const newRoomListName = "Chats has a new look!";
-            // The new room list release announcement should be displayed
-            await util.assertReleaseAnnouncementIsVisible(newRoomListName);
-            // Hide the new room list release announcement
-            const dialog = util.getReleaseAnnouncement(newRoomListName);
-            await dialog.getByRole("button", { name: "Next" }).click();
-
-            await util.assertReleaseAnnouncementIsNotVisible(newRoomListName);
+            await util.assertReleaseAnnouncementIsNotVisible(sectionName);
 
             await page.reload();
-            await expect(page.getByRole("button", { name: "Room options" })).toBeVisible();
-            // Check that once the release announcements has been marked as viewed, it does not appear again
-            await util.assertReleaseAnnouncementIsNotVisible(newRoomListName);
+            await util.assertReleaseAnnouncementIsNotVisible(sectionName);
         },
     );
 });
diff --git a/apps/web/playwright/e2e/retention/retention-global.spec.ts b/apps/web/playwright/e2e/retention/retention-global.spec.ts
new file mode 100644
index 0000000000..d158771f4a
--- /dev/null
+++ b/apps/web/playwright/e2e/retention/retention-global.spec.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright 2026 Element Creations 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 { rejectToastIfExists } from "@element-hq/element-web-playwright-common";
+
+import { isDendrite } from "../../plugins/homeserver/dendrite";
+import { checkRetentionInRoom } from "./utils";
+import { test } from "../../element-web-test";
+
+const ONE_MINUTE_STR = "60s";
+
+test.use({
+    synapseConfig: {
+        retention: {
+            enabled: true,
+            default_policy: {
+                max_lifetime: ONE_MINUTE_STR,
+            },
+            allowed_lifetime_min: ONE_MINUTE_STR,
+            allowed_lifetime_max: ONE_MINUTE_STR,
+        },
+        experimental_features: {
+            msc1763_enabled: true,
+        },
+    },
+});
+test.describe("global retention rules", () => {
+    test.skip(isDendrite, "dendrite does not support retention");
+    test.use({
+        displayName: "Tom",
+        botCreateOpts: {
+            displayName: "Bob",
+        },
+        labsFlags: ["feature_retention"],
+    });
+    test.beforeEach(async ({ app, homeserver, page, user }) => {
+        await rejectToastIfExists(page, "Verify this device");
+        await rejectToastIfExists(page, "Notifications");
+        await page.clock.install();
+    });
+
+    test("should apply", async ({ app, bot, page }) => {
+        const roomId = await app.client.createRoom({
+            name: "Test",
+            invite: [bot.credentials!.userId],
+        });
+        await checkRetentionInRoom({ app, bot, page }, roomId);
+    });
+});
diff --git a/apps/web/playwright/e2e/retention/retention.spec.ts b/apps/web/playwright/e2e/retention/retention.spec.ts
new file mode 100644
index 0000000000..40048b9a5a
--- /dev/null
+++ b/apps/web/playwright/e2e/retention/retention.spec.ts
@@ -0,0 +1,124 @@
+/*
+ * Copyright 2026 Element Creations 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 { rejectToastIfExists } from "@element-hq/element-web-playwright-common";
+
+import { isDendrite } from "../../plugins/homeserver/dendrite";
+import { test, expect } from "../../element-web-test";
+import { checkRetentionInRoom, ONE_MINUTE } from "./utils";
+
+const ONE_MINUTE_STR = "60s";
+
+test.use({
+    synapseConfig: {
+        retention: {
+            enabled: true,
+            // deliberately no default policy.
+            allowed_lifetime_min: ONE_MINUTE_STR,
+            allowed_lifetime_max: ONE_MINUTE_STR,
+        },
+        experimental_features: {
+            msc1763_enabled: true,
+        },
+    },
+});
+
+test.describe("Retention", () => {
+    test.skip(isDendrite, "dendrite does not support retention");
+    test.use({
+        displayName: "Tom",
+        botCreateOpts: {
+            displayName: "Bob",
+        },
+        labsFlags: ["feature_retention"],
+    });
+
+    test.beforeEach(async ({ app, homeserver, page, user }) => {
+        await rejectToastIfExists(page, "Verify this device");
+        await rejectToastIfExists(page, "Notifications");
+        await page.clock.install();
+    });
+
+    test("should apply retention to a bunch of messages", async ({ app, homeserver, page, user, bot }) => {
+        const roomId = await app.client.createRoom({
+            name: "Test",
+            invite: [bot.credentials!.userId],
+            initial_state: [
+                {
+                    state_key: "",
+                    type: "org.matrix.msc1763.retention",
+                    content: {
+                        max_lifetime: ONE_MINUTE,
+                    },
+                },
+            ],
+        });
+        // When the bot joins the room=
+        await bot.joinRoom(roomId);
+        await app.viewRoomByName("Test");
+        await checkRetentionInRoom({ app, bot, page }, roomId);
+    });
+
+    test("retention rules should apply after restart", async ({ app, bot, page }) => {
+        const roomId = await app.client.createRoom({
+            name: "Test",
+            invite: [bot.credentials!.userId],
+        });
+        await bot.joinRoom(roomId);
+        await app.viewRoomByName("Test");
+        const tiles = (
+            await Promise.all(Array.from({ length: 5 }).map((_o, index) => bot.sendMessage(roomId, `Message ${index}`)))
+        ).map(({ event_id: evtId }) =>
+            page.locator(`.mx_RoomView_MessageList .mx_EventTile[data-event-id='${evtId}']`),
+        );
+        for (const tile of tiles) {
+            await expect(tile).toBeVisible();
+        }
+        // Reload and apply new policy
+        await page.reload();
+        await page.clock.fastForward(ONE_MINUTE + 1);
+        await page.route("**/_matrix/client/unstable/org.matrix.msc1763/retention/configuration", (route) => {
+            return route.fulfill({
+                json: {
+                    policies: {
+                        "*": {
+                            max_lifetime: ONE_MINUTE,
+                        },
+                    },
+                },
+            });
+        });
+        await app.viewRoomByName("Test");
+        for (const tile of tiles) {
+            await expect(tile).toBeHidden();
+        }
+    });
+
+    test("should stop applying retention when the policy is removed", async ({ app, homeserver, page, user, bot }) => {
+        const currentTime = new Date();
+        const roomId = await app.client.createRoom({
+            name: "Test",
+            invite: [bot.credentials!.userId],
+            initial_state: [
+                {
+                    state_key: "",
+                    type: "org.matrix.msc1763.retention",
+                    content: {
+                        max_lifetime: ONE_MINUTE,
+                    },
+                },
+            ],
+        });
+        await checkRetentionInRoom({ app, bot, page }, roomId);
+        // Check that retention rules no longer apply.
+        await page.clock.setFixedTime(currentTime);
+        const { event_id: eventId } = await bot.sendMessage(roomId, `Message afterwards`);
+        await app.client.sendStateEvent(roomId, "org.matrix.msc1763.retention", {});
+        await page.clock.fastForward(ONE_MINUTE + 1);
+        await expect(page.locator(`.mx_RoomView_MessageList .mx_EventTile[data-event-id='${eventId}']`)).toBeVisible();
+    });
+});
diff --git a/apps/web/playwright/e2e/retention/utils.ts b/apps/web/playwright/e2e/retention/utils.ts
new file mode 100644
index 0000000000..d94167dd8c
--- /dev/null
+++ b/apps/web/playwright/e2e/retention/utils.ts
@@ -0,0 +1,29 @@
+/*
+ * Copyright 2026 Element Creations 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 { expect, type TestFixtures } from "../../element-web-test";
+import type { Page } from "@playwright/test";
+
+export const ONE_MINUTE = 60 * 1000;
+
+export async function checkRetentionInRoom(
+    { bot, app, page }: Pick<TestFixtures, "app" | "bot"> & { page: Page },
+    roomId: string,
+) {
+    await bot.joinRoom(roomId);
+    await app.viewRoomById(roomId);
+    const tiles = (
+        await Promise.all(Array.from({ length: 5 }).map((_o, index) => bot.sendMessage(roomId, `Message ${index}`)))
+    ).map(({ event_id: evtId }) => page.locator(`.mx_RoomView_MessageList .mx_EventTile[data-event-id='${evtId}']`));
+    for (const tile of tiles) {
+        await expect(tile).toBeVisible();
+    }
+    await page.clock.fastForward(ONE_MINUTE + 1);
+    for (const tile of tiles) {
+        await expect(tile).toBeHidden();
+    }
+}
diff --git a/apps/web/playwright/e2e/right-panel/file-panel.spec.ts b/apps/web/playwright/e2e/right-panel/file-panel.spec.ts
index e89c10b20f..94d3c69544 100644
--- a/apps/web/playwright/e2e/right-panel/file-panel.spec.ts
+++ b/apps/web/playwright/e2e/right-panel/file-panel.spec.ts
@@ -87,9 +87,9 @@ test.describe("FilePanel", () => {
             await expect(filePanelMessageList.getByText(NAME)).toHaveCount(3);
 
             // Detect the image file
-            const image = filePanelMessageList.locator(".mx_EventTile_mediaLine.mx_EventTile_image .mx_MImageBody");
+            const image = filePanelMessageList.locator(".mx_EventTile_mediaLine.mx_EventTile_image .mx_ImageBody");
             // Assert that the image is specified as thumbnail and has the alt string
-            await expect(image.locator("img[class='mx_MImageBody_thumbnail']")).toBeVisible();
+            await expect(image.locator("img.mx_ImageBody_image")).toBeVisible();
             await expect(image.locator("img[alt='riot.png']")).toBeVisible();
 
             // Detect the audio file
@@ -113,7 +113,7 @@ test.describe("FilePanel", () => {
                 "flex-end",
             );
             // Assert that all of the file tiles are visible before taking a snapshot
-            await expect(filePanelMessageList.locator(".mx_MImageBody")).toBeVisible(); // top
+            await expect(filePanelMessageList.locator(".mx_ImageBody")).toBeVisible(); // top
             await expect(filePanelMessageList.locator(".mx_MAudioBody")).toBeVisible(); // middle
             const senderDetails = filePanelMessageList.locator(".mx_EventTile_last .mx_EventTile_senderDetails");
             await expect(senderDetails.locator(".mx_DisambiguatedProfile")).toBeVisible();
@@ -184,7 +184,7 @@ test.describe("FilePanel", () => {
 
             // Detect the image file on the panel
             const imageBody = page.locator(
-                ".mx_FilePanel .mx_RoomView_MessageList .mx_EventTile_mediaLine.mx_EventTile_image .mx_MImageBody",
+                ".mx_FilePanel .mx_RoomView_MessageList .mx_EventTile_mediaLine.mx_EventTile_image .mx_ImageBody",
             );
 
             const link = imageBody.locator(".mx_MFileBody a");
diff --git a/apps/web/playwright/e2e/right-panel/right-panel.spec.ts b/apps/web/playwright/e2e/right-panel/right-panel.spec.ts
index 6a6aba8fd5..b7d396a538 100644
--- a/apps/web/playwright/e2e/right-panel/right-panel.spec.ts
+++ b/apps/web/playwright/e2e/right-panel/right-panel.spec.ts
@@ -75,7 +75,7 @@ test.describe("RightPanel", () => {
         test("should have padding under leave room", { tag: "@screenshot" }, async ({ page, app }) => {
             await viewRoomSummaryByName(page, app, ROOM_NAME);
 
-            const leaveButton = await page.getByRole("menuitem", { name: "Leave Room" });
+            const leaveButton = page.getByRole("menuitem", { name: "Leave Room" });
             await leaveButton.scrollIntoViewIfNeeded();
 
             await expect(page.locator(".mx_RightPanel")).toMatchScreenshot("with-leave-room.png");
@@ -147,7 +147,7 @@ test.describe("RightPanel", () => {
             async ({ page, homeserver, app }) => {
                 const bobLongName = new Bot(page, homeserver, { displayName: LONG_NAME });
                 await bobLongName.prepareClient();
-                await app.client.inviteUser(testRoomId, bobLongName.credentials.userId);
+                await app.client.inviteUser(testRoomId, bobLongName.credentials!.userId);
                 await bobLongName.joinRoom(testRoomId);
 
                 await viewRoomSummaryByName(page, app, ROOM_NAME);
@@ -177,7 +177,7 @@ test.describe("RightPanel", () => {
                 await viewRoomSummaryByName(page, app, ROOM_NAME);
 
                 await page.getByRole("menuitem", { name: "Report room" }).click();
-                const dialog = await page.getByRole("dialog", { name: "Report Room" });
+                const dialog = page.getByRole("dialog", { name: "Report Room" });
                 await dialog.getByLabel("reason").fill("This room should be reported");
                 await expect(dialog).toMatchScreenshot("room-report-dialog.png");
                 await dialog.getByRole("button", { name: "Send report" }).click();
@@ -189,7 +189,7 @@ test.describe("RightPanel", () => {
                 await viewRoomSummaryByName(page, app, ROOM_NAME);
 
                 await page.getByRole("menuitem", { name: "Report room" }).click();
-                const dialog = await page.getByRole("dialog", { name: "Report room" });
+                const dialog = page.getByRole("dialog", { name: "Report room" });
                 await dialog.getByRole("switch", { name: "Leave room" }).click();
                 await dialog.getByLabel("reason").fill("This room should be reported");
                 await dialog.getByRole("button", { name: "Send report" }).click();
diff --git a/apps/web/playwright/e2e/room-directory/room-directory.spec.ts b/apps/web/playwright/e2e/room-directory/room-directory.spec.ts
index e0cb32c7fb..d9fa7860ae 100644
--- a/apps/web/playwright/e2e/room-directory/room-directory.spec.ts
+++ b/apps/web/playwright/e2e/room-directory/room-directory.spec.ts
@@ -6,6 +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 { rejectToast } from "@element-hq/element-web-playwright-common";
+
 import type { Preset, Visibility } from "matrix-js-sdk/src/matrix";
 import { test, expect } from "../../element-web-test";
 
@@ -49,7 +51,7 @@ test.describe("Room Directory", () => {
 
             const resp = await bot.publicRooms({});
             expect(resp.total_room_count_estimate).toBeGreaterThanOrEqual(1);
-            expect(resp.chunk).toHaveLength(resp.total_room_count_estimate);
+            expect(resp.chunk).toHaveLength(resp.total_room_count_estimate!);
             expect(resp.chunk.find((r) => r.room_id === roomId)).toBeTruthy();
         },
     );
@@ -65,7 +67,7 @@ test.describe("Room Directory", () => {
                 room_alias_name: "test1234",
             });
 
-            await app.closeVerifyToast();
+            await rejectToast(page, "Verify this device");
             await page.getByRole("button", { name: "Explore rooms" }).click();
 
             const dialog = page.locator(".mx_SpotlightDialog");
diff --git a/apps/web/playwright/e2e/room/create-room.spec.ts b/apps/web/playwright/e2e/room/create-room.spec.ts
index 82ae2dddda..182908f77c 100644
--- a/apps/web/playwright/e2e/room/create-room.spec.ts
+++ b/apps/web/playwright/e2e/room/create-room.spec.ts
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type Page } from "@playwright/test";
+import { rejectToast } from "@element-hq/element-web-playwright-common";
 
 import { SettingLevel } from "../../../src/settings/SettingLevel";
 import { UIFeature } from "../../../src/settings/UIFeature";
@@ -22,7 +23,7 @@ test.describe("Create Room", () => {
         "should create a public room with name, topic & address set",
         { tag: "@screenshot" },
         async ({ page, user, app, axe }) => {
-            await app.closeVerifyToast();
+            await rejectToast(page, "Verify this device");
             const dialog = await app.openCreateRoomDialog();
             // Fill name & topic
             await dialog.getByRole("textbox", { name: "Name" }).fill(name);
@@ -51,7 +52,7 @@ test.describe("Create Room", () => {
     );
 
     test("should allow us to start a chat and show encryption state", async ({ page, user, app }) => {
-        await app.closeVerifyToast();
+        await rejectToast(page, "Verify this device");
 
         await page.getByRole("button", { name: "New conversation", exact: true }).click();
         await page.getByRole("menuitem", { name: "Start chat" }).click();
@@ -72,7 +73,7 @@ test.describe("Create Room", () => {
 
     test("should create a video room", { tag: "@screenshot" }, async ({ page, user, app }) => {
         await app.settings.setValue("feature_video_rooms", null, SettingLevel.DEVICE, true);
-        await app.closeVerifyToast();
+        await rejectToast(page, "Verify this device");
 
         const dialog = await app.openCreateRoomDialog("New video room");
         // Fill name & topic
@@ -107,7 +108,7 @@ test.describe("Create Room", () => {
         });
 
         test("should disallow creating public rooms", { tag: "@screenshot" }, async ({ page, user, app, axe }) => {
-            await app.closeVerifyToast();
+            await rejectToast(page, "Verify this device");
             const dialog = await app.openCreateRoomDialog();
             // Fill name & topic
             await dialog.getByRole("textbox", { name: "Name" }).fill(name);
@@ -134,7 +135,7 @@ test.describe("Create Room", () => {
         test.use({ labsFlags: [] });
 
         test("creates a room without encrypted state", { tag: "@screenshot" }, async ({ page, user: _user, app }) => {
-            await app.closeVerifyToast();
+            await rejectToast(page, "Verify this device");
 
             // When we start to create a room
             await page.getByRole("button", { name: "New conversation", exact: true }).click();
@@ -165,7 +166,7 @@ test.describe("Create Room", () => {
             "creates a room with encrypted state if we check the box",
             { tag: "@screenshot" },
             async ({ page, user: _user, app }) => {
-                await app.closeVerifyToast();
+                await rejectToast(page, "Verify this device");
 
                 // Given we check the Encrypted State checkbox
                 await page.getByRole("button", { name: "New conversation", exact: true }).click();
@@ -194,7 +195,7 @@ test.describe("Create Room", () => {
             "creates a room without encrypted state if we don't check the box",
             { tag: "@screenshot" },
             async ({ page, user: _user, app }) => {
-                await app.closeVerifyToast();
+                await rejectToast(page, "Verify this device");
 
                 // Given we did not check the Encrypted State checkbox
                 await page.getByRole("button", { name: "New conversation", exact: true }).click();
diff --git a/apps/web/playwright/e2e/room/invites.spec.ts b/apps/web/playwright/e2e/room/invites.spec.ts
index 9312b24445..a1cc70874e 100644
--- a/apps/web/playwright/e2e/room/invites.spec.ts
+++ b/apps/web/playwright/e2e/room/invites.spec.ts
@@ -68,7 +68,7 @@ test.describe("Invites", () => {
             await app.settings.openUserSettings("Security & Privacy");
             const ignoredUsersList = page.getByRole("list", { name: "Ignored users" });
             await ignoredUsersList.scrollIntoViewIfNeeded();
-            await expect(ignoredUsersList.getByRole("listitem", { name: bot.credentials.userId })).toBeVisible();
+            await expect(ignoredUsersList.getByRole("listitem", { name: bot.credentials!.userId })).toBeVisible();
         },
     );
 });
diff --git a/apps/web/playwright/e2e/room/room-header.spec.ts b/apps/web/playwright/e2e/room/room-header.spec.ts
index 2f681fe3d3..d23ef5e770 100644
--- a/apps/web/playwright/e2e/room/room-header.spec.ts
+++ b/apps/web/playwright/e2e/room/room-header.spec.ts
@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { type Page } from "@playwright/test";
 import { type Visibility } from "matrix-js-sdk/src/matrix";
+import { closeReleaseAnnouncement, rejectToast } from "@element-hq/element-web-playwright-common";
 
 import { test, expect } from "../../element-web-test";
 import { type ElementAppPage } from "../../pages/ElementAppPage";
@@ -15,11 +16,15 @@ import { type ElementAppPage } from "../../pages/ElementAppPage";
 test.describe("Room Header", () => {
     test.use({
         displayName: "Sakura",
-        config: {
-            features: {
-                feature_new_room_list: false,
-            },
-        },
+    });
+
+    test.beforeEach(async ({ page, app, user }) => {
+        // The toasts are displayed above the search section
+        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");
+
+        // Close the release announcement about the new room list sections
+        await closeReleaseAnnouncement(page, "Introducing Sections");
     });
 
     test.describe("with feature_notifications enabled", () => {
@@ -28,7 +33,7 @@ test.describe("Room Header", () => {
         });
         test("should render default buttons properly", { tag: "@screenshot" }, async ({ page, app, user }) => {
             await app.client.createRoom({ name: "Test Room" });
-            await app.viewRoomByNameOnOldRoomList("Test Room");
+            await app.viewRoomByName("Test Room");
 
             const header = page.locator(".mx_RoomHeader");
 
@@ -66,7 +71,7 @@ test.describe("Room Header", () => {
                     "officia deserunt mollit anim id est laborum.";
 
                 await app.client.createRoom({ name: LONG_ROOM_NAME });
-                await app.viewRoomByNameOnOldRoomList(LONG_ROOM_NAME);
+                await app.viewRoomByName(LONG_ROOM_NAME);
 
                 const header = page.locator(".mx_RoomHeader");
                 // Wait until the room name is set
@@ -91,7 +96,7 @@ test.describe("Room Header", () => {
 
         test("should render room header icon correctly", { tag: "@screenshot" }, async ({ page, app, user }) => {
             await app.client.createRoom({ name: "Test Room", visibility: "public" as Visibility });
-            await app.viewRoomByNameOnOldRoomList("Test Room");
+            await app.viewRoomByName("Test Room");
 
             const header = page.locator(".mx_RoomHeader");
 
@@ -103,15 +108,15 @@ test.describe("Room Header", () => {
         test.use({ labsFlags: ["feature_video_rooms"] });
 
         const createVideoRoom = async (page: Page, app: ElementAppPage) => {
-            await page.locator(".mx_LeftPanel_roomListContainer").getByRole("button", { name: "Add room" }).click();
-
+            const roomListHeader = page.getByTestId("room-list-header");
+            await roomListHeader.getByRole("button", { name: "New conversation" }).click();
             await page.getByRole("menuitem", { name: "New video room" }).click();
 
             await page.getByRole("textbox", { name: "Name" }).type("Test video room");
 
             await page.getByRole("button", { name: "Create video room" }).click();
 
-            await app.viewRoomByNameOnOldRoomList("Test video room");
+            await app.viewRoomByName("Test video room");
         };
 
         test.describe("and with feature_notifications enabled", () => {
@@ -122,11 +127,6 @@ test.describe("Room Header", () => {
                 { tag: "@screenshot" },
                 async ({ page, app, user }) => {
                     await createVideoRoom(page, app);
-
-                    // Dismiss a toast that is otherwise in the way (it's the other
-                    // side but there's no need to have it in the screenshot)
-                    await page.getByRole("button", { name: "Later" }).click();
-
                     const header = page.locator(".mx_RoomHeader");
 
                     // There's two room info button - the header itself and the i button
diff --git a/apps/web/playwright/e2e/room/room-status-bar.spec.ts b/apps/web/playwright/e2e/room/room-status-bar.spec.ts
index 52cd4cabd3..55cfd8471b 100644
--- a/apps/web/playwright/e2e/room/room-status-bar.spec.ts
+++ b/apps/web/playwright/e2e/room/room-status-bar.spec.ts
@@ -4,6 +4,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 { getToast, rejectToast } from "@element-hq/element-web-playwright-common";
+
 import { test, expect } from "../../element-web-test";
 
 test.describe("Room Status Bar", () => {
@@ -15,12 +17,12 @@ test.describe("Room Status Bar", () => {
             await page.setViewportSize({ width: 1400, height: 768 });
             await use(page);
         },
-        room: async ({ app, user }, use) => {
+        room: async ({ app, user, page }, use) => {
             const roomId = await app.client.createRoom({
                 name: "A room",
             });
-            await app.closeVerifyToast();
-            await app.closeNotificationToast();
+            await rejectToast(page, "Verify this device");
+            await rejectToast(page, "Notifications");
             await app.viewRoomById(roomId);
             await use({ roomId });
         },
@@ -39,7 +41,7 @@ test.describe("Room Status Bar", () => {
         await expect(banner).toBeVisible({ timeout: 15000 });
         await expect(banner).toMatchScreenshot("connectivity_lost.png");
     });
-    test("should NOT an error when a resource limit is hit", async ({ page, user, app, room, axe, toasts }) => {
+    test("should NOT an error when a resource limit is hit", async ({ page, user, app, room, axe }) => {
         await app.viewRoomById(room.roomId);
         await page.route("**/_matrix/client/*/sync*", async (route, req) => {
             await route.fulfill({
@@ -55,7 +57,7 @@ test.describe("Room Status Bar", () => {
         });
         await app.client.sendMessage(room.roomId, "forcing sync to run");
         // Wait for the MAU warning toast to appear so we know this status bar would have appeared.
-        await toasts.getToast("Warning", 15000);
+        await getToast(page, "Warning", 15000);
         await expect(page.getByRole("region", { name: "Room status bar" })).not.toBeVisible();
     });
     test(
@@ -140,7 +142,7 @@ test.describe("Room Status Bar", () => {
             "should show an error when creating a local room fails",
             { tag: "@screenshot" },
             async ({ page, app, user, bot }) => {
-                await app.closeVerifyToast();
+                await rejectToast(page, "Verify this device");
                 await page
                     .getByRole("navigation", { name: "Room list" })
                     .getByRole("button", { name: "New conversation" })
@@ -159,9 +161,9 @@ test.describe("Room Status Bar", () => {
                 });
 
                 const other = page.locator(".mx_InviteDialog_other");
-                await other.getByTestId("invite-dialog-input").fill(bot.credentials.userId);
+                await other.getByTestId("invite-dialog-input").fill(bot.credentials!.userId);
                 await expect(
-                    other.getByRole("option", { name: "Alice" }).getByText(bot.credentials.userId),
+                    other.getByRole("option", { name: "Alice" }).getByText(bot.credentials!.userId),
                 ).toBeVisible();
                 await other.getByRole("option", { name: "Alice" }).click();
                 await other.getByRole("button", { name: "Go" }).click();
diff --git a/apps/web/playwright/e2e/room/room.spec.ts b/apps/web/playwright/e2e/room/room.spec.ts
index 6181333e87..ba1ddadff8 100644
--- a/apps/web/playwright/e2e/room/room.spec.ts
+++ b/apps/web/playwright/e2e/room/room.spec.ts
@@ -34,8 +34,8 @@ test.describe("Room Directory", () => {
                 });
             },
             {
-                bob: bob.credentials.userId,
-                charlie: charlie.credentials.userId,
+                bob: bob.credentials!.userId,
+                charlie: charlie.credentials!.userId,
             },
         );
 
diff --git a/apps/web/playwright/e2e/room_options/marked_unread.spec.ts b/apps/web/playwright/e2e/room_options/marked_unread.spec.ts
index ce3e170072..dffdfe3412 100644
--- a/apps/web/playwright/e2e/room_options/marked_unread.spec.ts
+++ b/apps/web/playwright/e2e/room_options/marked_unread.spec.ts
@@ -6,6 +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 { rejectToastIfExists } from "@element-hq/element-web-playwright-common";
+
 import { test, expect } from "../../element-web-test";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
 
@@ -29,7 +31,7 @@ test.describe("Mark as Unread", () => {
         const dummyRoomId = await app.client.createRoom({
             name: "Room of no consequence",
         });
-        await app.client.inviteUser(roomId, bot.credentials.userId);
+        await app.client.inviteUser(roomId, bot.credentials!.userId);
         await bot.joinRoom(roomId);
         await bot.sendMessage(roomId, "I am a robot. Beep.");
 
@@ -46,6 +48,8 @@ test.describe("Mark as Unread", () => {
         // navigate away from the room again
         await page.goto("/#/room/" + dummyRoomId);
 
+        await rejectToastIfExists(page, "Verify this device");
+
         const roomTile = page.getByLabel(TEST_ROOM_NAME);
         await roomTile.click({ button: "right" });
         await page.getByRole("menuitem", { name: "Mark as unread" }).click();
diff --git a/apps/web/playwright/e2e/settings/account-user-settings-tab.spec.ts b/apps/web/playwright/e2e/settings/account-user-settings-tab.spec.ts
index dbb83c6a18..78384197d8 100644
--- a/apps/web/playwright/e2e/settings/account-user-settings-tab.spec.ts
+++ b/apps/web/playwright/e2e/settings/account-user-settings-tab.spec.ts
@@ -92,8 +92,10 @@ test.describe("Account user settings tab", () => {
                             authorization_endpoint: `${EXTERNAL_ACCOUNT_MANAGEMENT_URL}authorize`,
                             token_endpoint: `${EXTERNAL_ACCOUNT_MANAGEMENT_URL}token`,
                             revocation_endpoint: `${EXTERNAL_ACCOUNT_MANAGEMENT_URL}revoke`,
+                            registration_endpoint: `${EXTERNAL_ACCOUNT_MANAGEMENT_URL}register`,
                             response_types_supported: ["code"],
-                            grant_types_supported: ["authorization_code"],
+                            grant_types_supported: ["authorization_code", "refresh_token"],
+                            response_modes_supported: ["query", "fragment"],
                             code_challenge_methods_supported: ["S256"],
                             account_management_uri: EXTERNAL_ACCOUNT_MANAGEMENT_URL,
                         },
diff --git a/apps/web/playwright/e2e/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts b/apps/web/playwright/e2e/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts
index 8bb89c9c9c..4012db089e 100644
--- a/apps/web/playwright/e2e/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts
+++ b/apps/web/playwright/e2e/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts
@@ -6,6 +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 { rejectToast } from "@element-hq/element-web-playwright-common";
+
 import { expect, test } from ".";
 
 test.describe("Appearance user settings tab", () => {
@@ -14,7 +16,7 @@ test.describe("Appearance user settings tab", () => {
     });
 
     test("should be rendered properly", { tag: "@screenshot" }, async ({ page, user, app, axe }) => {
-        await app.closeVerifyToast();
+        await rejectToast(page, "Verify this device");
         const tab = await app.settings.openUserSettings("Appearance");
 
         // Click "Show advanced" link button
@@ -32,7 +34,7 @@ test.describe("Appearance user settings tab", () => {
         "should support changing font size by using the font size dropdown",
         { tag: "@screenshot" },
         async ({ page, app, user }) => {
-            await app.closeVerifyToast();
+            await rejectToast(page, "Verify this device");
             await app.settings.openUserSettings("Appearance");
 
             const tab = page.getByTestId("mx_AppearanceUserSettingsTab");
@@ -48,7 +50,7 @@ test.describe("Appearance user settings tab", () => {
     );
 
     test("should support enabling system font", async ({ page, app, user }) => {
-        await app.closeVerifyToast();
+        await rejectToast(page, "Verify this device");
         await app.settings.openUserSettings("Appearance");
         const tab = page.getByTestId("mx_AppearanceUserSettingsTab");
 
@@ -66,7 +68,8 @@ test.describe("Appearance user settings tab", () => {
         "should keep same font and emoji when switching theme",
         { tag: "@screenshot" },
         async ({ page, app, user, util }) => {
-            await app.closeVerifyToast();
+            await rejectToast(page, "Verify this device");
+            await rejectToast(page, "Notifications");
 
             const roomId = await util.createAndDisplayRoom();
 
diff --git a/apps/web/playwright/e2e/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts b/apps/web/playwright/e2e/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts
index f24fb084af..191534c864 100644
--- a/apps/web/playwright/e2e/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts
+++ b/apps/web/playwright/e2e/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts
@@ -6,6 +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 { rejectToast } from "@element-hq/element-web-playwright-common";
+
 import { expect, test } from ".";
 
 test.describe("Appearance user settings tab", () => {
@@ -14,10 +16,10 @@ test.describe("Appearance user settings tab", () => {
     });
 
     test.describe("Theme Choice Panel", () => {
-        test.beforeEach(async ({ app, user, util }) => {
+        test.beforeEach(async ({ app, page, user, util }) => {
             // Disable the default theme for consistency in case ThemeWatcher automatically chooses it
             await util.disableSystemTheme();
-            await app.closeVerifyToast();
+            await rejectToast(page, "Verify this device");
 
             await util.openAppearanceTab();
         });
@@ -104,7 +106,7 @@ test.describe("Appearance user settings tab", () => {
                     await expect(page).toMatchScreenshot("window-custom-theme.png");
 
                     await page.reload();
-                    await app.closeVerifyToast();
+                    await rejectToast(page, "Verify this device");
 
                     await util.openAppearanceTab();
                     // Assert that the custom theme is still selected after reloading the page
diff --git a/apps/web/playwright/e2e/settings/device-management.spec.ts b/apps/web/playwright/e2e/settings/device-management.spec.ts
index 265ec9c877..fa6752ea24 100644
--- a/apps/web/playwright/e2e/settings/device-management.spec.ts
+++ b/apps/web/playwright/e2e/settings/device-management.spec.ts
@@ -19,7 +19,7 @@ test.describe("Device manager", () => {
     test.beforeEach(async ({ homeserver, user }) => {
         // create 3 extra sessions to manage
         for (let i = 0; i < 3; i++) {
-            await homeserver.loginUser(user.userId, user.password);
+            await homeserver.loginUser(user.userId, user.password!);
         }
     });
 
@@ -59,7 +59,7 @@ test.describe("Device manager", () => {
         await filteredDeviceListItems.last().click({ force: true });
 
         // sign out from list selection action buttons
-        await tab.getByRole("button", { name: "Remove this device", exact: true }).click();
+        await tab.getByRole("button", { name: "Remove 2 sessions", exact: true }).click();
         await page.getByRole("dialog").getByTestId("dialog-primary-button").click();
 
         // list updated after sign out
diff --git a/apps/web/playwright/e2e/settings/encryption-user-tab/advanced.spec.ts b/apps/web/playwright/e2e/settings/encryption-user-tab/advanced.spec.ts
index 0167a321b7..ba0f1e6c1d 100644
--- a/apps/web/playwright/e2e/settings/encryption-user-tab/advanced.spec.ts
+++ b/apps/web/playwright/e2e/settings/encryption-user-tab/advanced.spec.ts
@@ -21,7 +21,7 @@ test.describe("Advanced section in Encryption tab", () => {
         const section = util.getEncryptionDetailsSection();
 
         const deviceId = await page.evaluate(() => window.mxMatrixClientPeg.get().getDeviceId());
-        await expect(section.getByText(deviceId)).toBeVisible();
+        await expect(section.getByText(deviceId!)).toBeVisible();
 
         await expect(section).toMatchScreenshot("encryption-details.png", {
             mask: [section.getByTestId("deviceId"), section.getByTestId("sessionKey")],
@@ -59,7 +59,7 @@ test.describe("Advanced section in Encryption tab", () => {
 
             // Fill password dialog and validate
             const dialog = page.locator(".mx_InteractiveAuthDialog");
-            await dialog.getByRole("textbox", { name: "Password" }).fill(credentials.password);
+            await dialog.getByRole("textbox", { name: "Password" }).fill(credentials.password!);
             await dialog.getByRole("button", { name: "Continue" }).click();
 
             await expect(section.getByRole("button", { name: "Reset cryptographic identity" })).toBeVisible();
diff --git a/apps/web/playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts b/apps/web/playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts
index 3f5383ae30..5257ca0e0d 100644
--- a/apps/web/playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts
+++ b/apps/web/playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts
@@ -26,6 +26,7 @@ test.describe("Encryption tab", () => {
         test.beforeEach(async ({ page, homeserver, credentials }) => {
             // The bot bootstraps cross-signing, creates a key backup and sets up a recovery key
             const botCredentials = { ...credentials };
+            // @ts-expect-error
             delete botCredentials.accessToken; // use a new login for the bot
             const res = await createBot(page, homeserver, botCredentials);
             recoveryKey = res.recoveryKey;
@@ -71,7 +72,7 @@ test.describe("Encryption tab", () => {
             "should prompt to enter the recovery key when the secrets are not cached locally",
             { tag: "@screenshot" },
             async ({ page, app, util }) => {
-                await verifySession(app, recoveryKey.encodedPrivateKey);
+                await verifySession(app, recoveryKey.encodedPrivateKey!);
                 // We need to delete the cached secrets
                 await deleteCachedSecrets(page);
 
@@ -104,7 +105,7 @@ test.describe("Encryption tab", () => {
             app,
             util,
         }) => {
-            await verifySession(app, recoveryKey.encodedPrivateKey);
+            await verifySession(app, recoveryKey.encodedPrivateKey!);
             // We need to delete the cached secrets
             await deleteCachedSecrets(page);
 
@@ -120,7 +121,7 @@ test.describe("Encryption tab", () => {
         });
 
         test("should warn before turning off key storage", { tag: "@screenshot" }, async ({ page, app, util }) => {
-            await verifySession(app, recoveryKey.encodedPrivateKey);
+            await verifySession(app, recoveryKey.encodedPrivateKey!);
             await util.openEncryptionTab();
 
             await page.getByRole("switch", { name: "Allow key storage" }).click();
diff --git a/apps/web/playwright/e2e/settings/encryption-user-tab/index.ts b/apps/web/playwright/e2e/settings/encryption-user-tab/index.ts
index 3d180047a1..a2b6f8eee7 100644
--- a/apps/web/playwright/e2e/settings/encryption-user-tab/index.ts
+++ b/apps/web/playwright/e2e/settings/encryption-user-tab/index.ts
@@ -55,7 +55,7 @@ class Helpers {
     async enterRecoveryKey(recoveryKey: GeneratedSecretStorageKey) {
         // Fill the recovery key
         const dialog = this.page.locator(".mx_Dialog");
-        await dialog.getByRole("textbox").fill(recoveryKey.encodedPrivateKey);
+        await dialog.getByRole("textbox").fill(recoveryKey.encodedPrivateKey!);
         await dialog.getByRole("button", { name: "Continue" }).click();
     }
 
diff --git a/apps/web/playwright/e2e/settings/encryption-user-tab/other-devices.spec.ts b/apps/web/playwright/e2e/settings/encryption-user-tab/other-devices.spec.ts
index 790d99aba7..6c0415dbf4 100644
--- a/apps/web/playwright/e2e/settings/encryption-user-tab/other-devices.spec.ts
+++ b/apps/web/playwright/e2e/settings/encryption-user-tab/other-devices.spec.ts
@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { createNewInstance } from "@element-hq/element-web-playwright-common";
+import { createNewInstance, rejectToast } from "@element-hq/element-web-playwright-common";
 import { type StartedHomeserverContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers";
 import { type Page, type Browser, type TestInfo } from "@playwright/test";
 
@@ -99,7 +99,7 @@ test.describe("Other people's devices section in Encryption tab", () => {
 
         // Create the room and invite bob
         await inviteBobToNewRoom(alicePage, aliceElementApp, bobCredentials, bobPage);
-        await bobElementApp.closeNotificationToast();
+        await rejectToast(alicePage, "Notifications");
 
         // Perform verification.
         await verifyApp("alice", aliceElementApp, "bob", bobElementApp);
diff --git a/apps/web/playwright/e2e/settings/encryption-user-tab/recovery.spec.ts b/apps/web/playwright/e2e/settings/encryption-user-tab/recovery.spec.ts
index 84dedecb53..3f5a4b5f05 100644
--- a/apps/web/playwright/e2e/settings/encryption-user-tab/recovery.spec.ts
+++ b/apps/web/playwright/e2e/settings/encryption-user-tab/recovery.spec.ts
@@ -18,6 +18,7 @@ test.describe("Recovery section in Encryption tab", () => {
     test.beforeEach(async ({ page, homeserver, credentials }) => {
         // The bot bootstraps cross-signing, creates a key backup and sets up a recovery key
         const botCredentials = { ...credentials };
+        // @ts-expect-error
         delete botCredentials.accessToken; // use a new login for the bot
         const res = await createBot(page, homeserver, botCredentials);
         recoveryKey = res.recoveryKey;
@@ -27,7 +28,7 @@ test.describe("Recovery section in Encryption tab", () => {
         "should change the recovery key",
         { tag: ["@screenshot", "@no-webkit"] },
         async ({ page, app, homeserver, credentials, util, context }) => {
-            await verifySession(app, recoveryKey.encodedPrivateKey);
+            await verifySession(app, recoveryKey.encodedPrivateKey!);
             const dialog = await util.openEncryptionTab();
 
             // The user can only change the recovery key
@@ -54,7 +55,7 @@ test.describe("Recovery section in Encryption tab", () => {
     );
 
     test("should setup the recovery key", { tag: ["@screenshot", "@no-webkit"] }, async ({ page, app, util }) => {
-        await verifySession(app, recoveryKey.encodedPrivateKey);
+        await verifySession(app, recoveryKey.encodedPrivateKey!);
         await util.removeSecretStorageDefaultKeyId();
 
         // The key backup is deleted and the user needs to set it up
diff --git a/apps/web/playwright/e2e/settings/general-room-settings-tab.spec.ts b/apps/web/playwright/e2e/settings/general-room-settings-tab.spec.ts
index e3f0963b59..a8d0fe6f98 100644
--- a/apps/web/playwright/e2e/settings/general-room-settings-tab.spec.ts
+++ b/apps/web/playwright/e2e/settings/general-room-settings-tab.spec.ts
@@ -54,6 +54,6 @@ test.describe("General room settings tab", () => {
         const dialogBoundingBox = await page.locator(".mx_Dialog").boundingBox();
         const inputBoundingBox = await settings.locator("#canonicalAlias").boundingBox();
         // Assert that the width of the select element is less than that of .mx_Dialog div.
-        expect(inputBoundingBox.width).toBeLessThan(dialogBoundingBox.width);
+        expect(inputBoundingBox!.width).toBeLessThan(dialogBoundingBox!.width);
     });
 });
diff --git a/apps/web/playwright/e2e/settings/preferences-user-settings-tab.spec.ts b/apps/web/playwright/e2e/settings/preferences-user-settings-tab.spec.ts
index 5414055534..ebfb600daf 100644
--- a/apps/web/playwright/e2e/settings/preferences-user-settings-tab.spec.ts
+++ b/apps/web/playwright/e2e/settings/preferences-user-settings-tab.spec.ts
@@ -21,8 +21,6 @@ test.describe("Preferences user settings tab", () => {
             const locator = await app.settings.openUserSettings("Preferences");
             await use(locator);
         },
-        // display message preview settings
-        labsFlags: ["feature_new_room_list"],
     });
 
     test("should be rendered properly", { tag: "@screenshot" }, async ({ app, page, user, axe }) => {
diff --git a/apps/web/playwright/e2e/settings/room-settings/roles-permissions-room-settings-tab.spec.ts b/apps/web/playwright/e2e/settings/room-settings/roles-permissions-room-settings-tab.spec.ts
index c646e613c4..89709c5207 100644
--- a/apps/web/playwright/e2e/settings/room-settings/roles-permissions-room-settings-tab.spec.ts
+++ b/apps/web/playwright/e2e/settings/room-settings/roles-permissions-room-settings-tab.spec.ts
@@ -38,7 +38,7 @@ test.describe("Roles & Permissions room settings tab", () => {
         await combobox.selectOption("Moderator");
 
         // Should display a modal to warn that we are demoting the only admin user
-        const modal = await page.locator(".mx_Dialog", {
+        const modal = page.locator(".mx_Dialog", {
             hasText: "Warning",
         });
         await expect(modal).toBeVisible();
diff --git a/apps/web/playwright/e2e/settings/room-settings/room-security-tab.spec.ts b/apps/web/playwright/e2e/settings/room-settings/room-security-tab.spec.ts
index 6c68831558..82a6d5df0c 100644
--- a/apps/web/playwright/e2e/settings/room-settings/room-security-tab.spec.ts
+++ b/apps/web/playwright/e2e/settings/room-settings/room-security-tab.spec.ts
@@ -6,6 +6,7 @@
  */
 
 import { type Locator } from "@playwright/test";
+import { closeReleaseAnnouncement, rejectToast } from "@element-hq/element-web-playwright-common";
 
 import { test, expect } from "../../../element-web-test";
 
@@ -18,13 +19,18 @@ test.describe("Roles & Permissions room settings tab", () => {
 
     let settings: Locator;
 
-    test.beforeEach(async ({ user, app }) => {
+    test.beforeEach(async ({ user, app, page }) => {
+        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");
+        // Close the release announcement about the new room list sections
+        await closeReleaseAnnouncement(page, "Introducing Sections");
+
         await app.client.createRoom({
             name: roomName,
             power_level_content_override: {
                 events: {
                     // Set the join rules as lower than the history vis to test an edge case.
-                    ["m.room.join_rules"]: 80,
+                    ["m.room.join_rules"]: 50,
                     ["m.room.history_visibility"]: 100,
                 },
             },
@@ -99,20 +105,28 @@ test.describe("Roles & Permissions room settings tab", () => {
             const ourComboBox = settings.getByRole("combobox", { name: user.userId });
             await ourComboBox.selectOption("Custom level");
             const ourPl = settings.getByRole("spinbutton", { name: user.userId });
-            await ourPl.fill("80");
-            await ourPl.blur(); // Shows a warning on
+            await ourPl.fill("50");
+            await page.keyboard.press("Tab"); // Shows a warning on
 
             // Accept the de-op
             await page.getByRole("button", { name: "Continue" }).click();
             await settings.getByRole("button", { name: "Apply", disabled: false }).click();
 
-            await app.settings.switchTab("Security & Privacy");
+            // Close and await power level
+            await app.settings.closeDialog();
+            const timeline = page.getByTestId("timeline");
+            await timeline.getByRole("button", { name: "expand" }).click();
+            await expect(
+                timeline.getByText("Alice changed the power level of Alice from Admin to Moderator."),
+            ).toBeInViewport();
+
+            settings = await app.settings.openRoomSettings("Security & Privacy");
 
             await settingsGroupAccess.getByText("Invite only").click();
             // Element should have automatically set the room to "sharing" history visibility
             const errorDialog = page.getByRole("heading", { name: "Cannot make room private" });
             await expect(errorDialog).toBeVisible();
-            await errorDialog.getByLabel("OK");
+            errorDialog.getByLabel("OK");
             await expect(settingsGroupHistory.getByText("Anyone")).toBeChecked();
         },
     );
diff --git a/apps/web/playwright/e2e/settings/room-settings/room-video-tab.spec.ts b/apps/web/playwright/e2e/settings/room-settings/room-video-tab.spec.ts
index feff22a04e..48f8addc62 100644
--- a/apps/web/playwright/e2e/settings/room-settings/room-video-tab.spec.ts
+++ b/apps/web/playwright/e2e/settings/room-settings/room-video-tab.spec.ts
@@ -8,8 +8,6 @@
 import { type Locator } from "@playwright/test";
 
 import { test, expect } from "../../../element-web-test";
-import { SettingLevel } from "../../../../src/settings/SettingLevel";
-
 test.describe("Voice & Video room settings tab", () => {
     const roomName = "Test room";
 
@@ -22,7 +20,6 @@ test.describe("Voice & Video room settings tab", () => {
     test.beforeEach(async ({ user, app, page }) => {
         // Execute client actions before setting, as the setting will force a reload.
         await app.client.createRoom({ name: roomName });
-        await app.settings.setValue("feature_group_calls", null, SettingLevel.DEVICE, true);
         await app.viewRoomByName(roomName);
         settings = await app.settings.openRoomSettings("Voice & Video");
     });
diff --git a/apps/web/playwright/e2e/settings/security-user-settings-tab.spec.ts b/apps/web/playwright/e2e/settings/security-user-settings-tab.spec.ts
index 6abc7d3491..5f230a72f6 100644
--- a/apps/web/playwright/e2e/settings/security-user-settings-tab.spec.ts
+++ b/apps/web/playwright/e2e/settings/security-user-settings-tab.spec.ts
@@ -7,6 +7,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 { rejectToast } from "@element-hq/element-web-playwright-common";
+
 import { test, expect } from "../../element-web-test";
 
 const IntegrationManager = "scalar.vector.im";
@@ -27,8 +29,8 @@ test.describe("Security user settings tab", () => {
 
         test.beforeEach(async ({ page, app, user }) => {
             // Dismiss toasts
-            await app.closeVerifyToast();
-            await app.closeNotificationToast();
+            await rejectToast(page, "Verify this device");
+            await rejectToast(page, "Notifications");
             await page.locator(".mx_Toast_buttons").getByRole("button", { name: "Yes" }).click(); // Allow analytics
         });
 
diff --git a/apps/web/playwright/e2e/share-dialog/share-by-url.spec.ts b/apps/web/playwright/e2e/share-dialog/share-by-url.spec.ts
index 49024d79d9..909b4c9c72 100644
--- a/apps/web/playwright/e2e/share-dialog/share-by-url.spec.ts
+++ b/apps/web/playwright/e2e/share-dialog/share-by-url.spec.ts
@@ -30,6 +30,6 @@ test.describe("share from URL", () => {
         const lastMessage = page.locator(".mx_RoomView_MessageList .mx_EventTile_last");
         await expect(lastMessage).toBeVisible();
         const lastMessageText = await lastMessage.locator(".mx_EventTile_body").innerText();
-        await expect(lastMessageText).toBe("Hello world");
+        expect(lastMessageText).toBe("Hello world");
     });
 });
diff --git a/apps/web/playwright/e2e/sliding-sync/sliding-sync.spec.ts b/apps/web/playwright/e2e/sliding-sync/sliding-sync.spec.ts
index 108f0520b3..952d2f22ea 100644
--- a/apps/web/playwright/e2e/sliding-sync/sliding-sync.spec.ts
+++ b/apps/web/playwright/e2e/sliding-sync/sliding-sync.spec.ts
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type Locator, type Page, type Request } from "@playwright/test";
+import { rejectToast } from "@element-hq/element-web-playwright-common";
 
 import { test as base, expect } from "../../element-web-test";
 import type { ElementAppPage } from "../../pages/ElementAppPage";
@@ -24,7 +25,7 @@ const test = base.extend<{
     joinedBot: async ({ app, bot, testRoom }, use) => {
         const roomId = testRoom.roomId;
         await bot.prepareClient();
-        const bobUserId = await bot.evaluate((client) => client.getUserId());
+        const bobUserId = await bot.evaluate((client) => client.getSafeUserId());
         await app.client.evaluate(
             async (client, { bobUserId, roomId }) => {
                 await client.invite(roomId, bobUserId);
@@ -71,9 +72,9 @@ test.describe("Sliding Sync", () => {
     });
 
     // Load the user fixture for all tests
-    test.beforeEach(async ({ app, user }) => {
-        await app.closeVerifyToast();
-        await app.closeNotificationToast();
+    test.beforeEach(async ({ app, page, user }) => {
+        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");
     });
 
     test("should render the Rooms list in reverse chronological order by default and allowing sorting A-Z", async ({
@@ -229,7 +230,7 @@ test.describe("Sliding Sync", () => {
         joinedBot: bot,
         testRoom,
     }) => {
-        const clientUserId = await app.client.evaluate((client) => client.getUserId());
+        const clientUserId = await app.client.evaluate((client) => client.getSafeUserId());
 
         // invite bot into 3 rooms:
         // - roomJoin: will join this room
@@ -277,19 +278,20 @@ test.describe("Sliding Sync", () => {
             { roomRescind, clientUserId },
         );
 
+        // toggle the invites filter off again so we see all the rooms again
+        await primaryFilters.getByRole("option", { name: "Invites" }).click();
+
         await page.getByRole("option", { name: "Open room Room to Rescind" }).click();
 
         await page.locator(".mx_RoomView").getByRole("button", { name: "Forget this room", exact: true }).click();
 
-        await primaryFilters.getByRole("option", { name: "Invites" }).click();
-
         // Wait for the rescind to take effect and check the joined list once more
         await expect(page.getByTestId("room-list").getByRole("option")).toHaveCount(2);
 
         await checkOrder(["Room to Join", "Test Room"], page);
     });
 
-    test("should show a favourite DM only in the favourite sublist", async ({ page, app }) => {
+    test("should show a favourite DM only in the favourite section", async ({ page, app }) => {
         const roomId = await app.client.createRoom({
             name: "Favourite DM",
             is_direct: true,
@@ -298,12 +300,9 @@ test.describe("Sliding Sync", () => {
             await client.setRoomTag(roomId, "m.favourite", { order: 0.5 });
         }, roomId);
 
-        await getFilterExpandButton(page).click();
+        await expect(page.getByRole("button", { name: "Favourite DM" })).toBeVisible();
+
         const primaryFilters = getPrimaryFilters(page);
-        await primaryFilters.getByRole("option", { name: "Favourites" }).click();
-
-        await expect(page.getByRole("option", { name: "Favourite DM" })).toBeVisible();
-
         await primaryFilters.getByRole("option", { name: "People" }).click();
 
         await expect(page.getByRole("option", { name: "Favourite DM" })).not.toBeAttached();
diff --git a/apps/web/playwright/e2e/spaces/spaces.spec.ts b/apps/web/playwright/e2e/spaces/spaces.spec.ts
index 48bb513800..3aba640a65 100644
--- a/apps/web/playwright/e2e/spaces/spaces.spec.ts
+++ b/apps/web/playwright/e2e/spaces/spaces.spec.ts
@@ -6,6 +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 { assertNoToasts, rejectToast } from "@element-hq/element-web-playwright-common";
+
 import type { Locator, Page } from "@playwright/test";
 import { test, expect } from "../../element-web-test";
 import type { Preset, ICreateRoomOpts } from "matrix-js-sdk/src/matrix";
@@ -46,7 +48,7 @@ function spaceChildInitialState(
     serverName: string,
     roomId: string,
     order?: string,
-): ICreateRoomOpts["initial_state"]["0"] {
+): NonNullable<ICreateRoomOpts["initial_state"]>[number] {
     return {
         type: "m.space.child",
         state_key: roomId,
@@ -68,7 +70,7 @@ test.describe("Spaces", () => {
         "should allow user to create public space",
         { tag: ["@screenshot", "@no-webkit"] },
         async ({ page, app, user }) => {
-            await app.closeVerifyToast();
+            await rejectToast(page, "Verify this device");
             const contextMenu = await openSpaceCreateMenu(page);
             await expect(contextMenu).toMatchScreenshot("space-create-menu.png");
 
@@ -105,7 +107,7 @@ test.describe("Spaces", () => {
     );
 
     test("should allow user to create private space", { tag: "@screenshot" }, async ({ page, app, user }) => {
-        await app.closeVerifyToast();
+        await rejectToast(page, "Verify this device");
         const menu = await openSpaceCreateMenu(page);
         await menu.getByRole("button", { name: "Private" }).click();
 
@@ -152,7 +154,7 @@ test.describe("Spaces", () => {
             name: "Sample Room",
         });
 
-        await app.closeVerifyToast();
+        await rejectToast(page, "Verify this device");
         const menu = await openSpaceCreateMenu(page);
         await menu.getByRole("button", { name: "Private" }).click();
 
@@ -187,7 +189,7 @@ test.describe("Spaces", () => {
                 name: "A Room that will not be selected",
             });
 
-            await app.closeVerifyToast();
+            await rejectToast(page, "Verify this device");
             const menu = await openSpaceCreateMenu(page);
             await menu.getByRole("button", { name: "Private" }).click();
 
@@ -238,7 +240,7 @@ test.describe("Spaces", () => {
         await shareDialog.getByRole("button", { name: "Invite people" }).click();
 
         const otherSection = page.locator(".mx_InviteDialog_other");
-        await otherSection.getByRole("textbox").fill(bot.credentials.userId);
+        await otherSection.getByRole("textbox").fill(bot.credentials!.userId);
         await otherSection.getByRole("button", { name: "Invite" }).click();
 
         await expect(page.locator(".mx_InviteDialog_other")).not.toBeVisible();
@@ -259,6 +261,66 @@ test.describe("Spaces", () => {
         await expect(buttons.nth(2)).toHaveAttribute("aria-label", "My Space");
     });
 
+    test(
+        "should render readable notification badges in the space panel",
+        { tag: "@screenshot" },
+        async ({ app, user, bot }) => {
+            const roomId = await app.client.createRoom({
+                name: "Unread Room",
+            });
+            await app.client.createSpace({
+                name: "Unread Space",
+                initial_state: [spaceChildInitialState(user.homeServer, roomId)],
+            });
+            const spaceButton = await app.getSpacePanelButton("Unread Space");
+            await expect(spaceButton).toBeVisible();
+
+            await bot.prepareClient();
+            const botUserId = await bot.evaluate((client) => client.getSafeUserId());
+            await app.client.evaluate(
+                async (client, { botUserId, roomId }) => {
+                    await client.invite(roomId, botUserId);
+                },
+                { botUserId, roomId },
+            );
+            await bot.joinRoom(roomId);
+
+            for (let i = 0; i < 10; i++) {
+                await bot.sendMessage(roomId, `${user.displayName} unread message ${i}`);
+            }
+
+            const badge = spaceButton.locator(".mx_SpacePanel_notificationBadge");
+            await expect(badge).toHaveText("10");
+
+            await expect(spaceButton).toMatchScreenshot("space-panel-notification-badge.png", {
+                css: `
+                    /* Mask the unstable anti-aliased badge edge at the screenshot crop boundary. */
+                    .mx_SpacePanel .mx_SpaceButton {
+                        position: relative !important;
+                    }
+
+                    .mx_SpacePanel .mx_SpaceButton::before {
+                        content: "";
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        right: 0;
+                        height: 3px;
+                        background: var(--cpd-color-bg-canvas-default);
+                        z-index: 1;
+                        pointer-events: none;
+                    }
+
+                    /* Avatar initials can render differently in CI; keep this snapshot focused on the badge. */
+                    .mx_SpacePanel [role="img"][data-color],
+                    .mx_SpacePanel .mx_BaseAvatar {
+                        color: transparent !important;
+                    }
+                `,
+            });
+        },
+    );
+
     test("should include rooms in space home", async ({ page, app, user }) => {
         const roomId1 = await app.client.createRoom({
             name: "Music",
@@ -287,7 +349,7 @@ test.describe("Spaces", () => {
         "should render subspaces in the space panel only when expanded",
         { tag: "@screenshot" },
         async ({ page, app, user, axe }) => {
-            await app.closeVerifyToast();
+            await rejectToast(page, "Verify this device");
 
             axe.disableRules([
                 // Disable this check as it triggers on nested roving tab index elements which are in practice fine
@@ -403,6 +465,26 @@ test.describe("Spaces", () => {
         );
     });
 
+    test("should render render tooltip on focus of metaspace", { tag: "@screenshot" }, async ({ page, user }) => {
+        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");
+        // Wait for toasts to clear otherwise they will mess with our screenshot
+        await assertNoToasts(page);
+
+        await page.getByRole("tree", { name: "Spaces" }).getByRole("button", { name: "Home" }).hover();
+        await expect(page.getByRole("tooltip", { name: "Home" })).toBeVisible();
+
+        await expect(page).toMatchScreenshot("space-panel-home-tooltip.png", {
+            showTooltips: true,
+            clip: {
+                x: 0,
+                y: 60,
+                width: 140,
+                height: 60,
+            },
+        });
+    });
+
     test.describe("Should hide public spaces option if not allowed", () => {
         test.use({
             config: {
@@ -413,7 +495,7 @@ test.describe("Spaces", () => {
         });
 
         test("should disallow creating public rooms", { tag: "@screenshot" }, async ({ page, user, app }) => {
-            await app.closeVerifyToast();
+            await rejectToast(page, "Verify this device");
             const menu = await openSpaceCreateMenu(page);
             await menu
                 .locator('.mx_SpaceBasicSettings_avatarContainer input[type="file"]')
diff --git a/apps/web/playwright/e2e/spaces/threads-activity-centre/index.ts b/apps/web/playwright/e2e/spaces/threads-activity-centre/index.ts
index c4781c1c27..5e49b95723 100644
--- a/apps/web/playwright/e2e/spaces/threads-activity-centre/index.ts
+++ b/apps/web/playwright/e2e/spaces/threads-activity-centre/index.ts
@@ -25,9 +25,9 @@ type RoomRef = { name: string; roomId: string };
  * - Invite the bot to both rooms and ensure that it has joined
  */
 export const test = base.extend<{
-    room1Name?: string;
+    room1Name: string;
     room1: { name: string; roomId: string };
-    room2Name?: string;
+    room2Name: string;
     room2: { name: string; roomId: string };
     msg: MessageBuilder;
     util: Helpers;
@@ -39,7 +39,7 @@ export const test = base.extend<{
     room1: async ({ room1Name: name, app, user, bot }, use) => {
         const roomId = await app.client.createRoom({
             name,
-            invite: [bot.credentials.userId],
+            invite: [bot.credentials!.userId],
             preset: "public_chat" as Preset,
         });
         await bot.awaitRoomMembership(roomId);
@@ -47,12 +47,12 @@ export const test = base.extend<{
     },
     room2Name: "Room 2",
     room2: async ({ room2Name: name, app, user, bot }, use) => {
-        const roomId = await app.client.createRoom({ name, invite: [bot.credentials.userId] });
+        const roomId = await app.client.createRoom({ name, invite: [bot.credentials!.userId] });
         await bot.awaitRoomMembership(roomId);
         await use({ name, roomId });
     },
     msg: async ({ page, app, util }, use) => {
-        await use(new MessageBuilder(page, app, util));
+        await use(new MessageBuilder());
     },
     util: async ({ room1, room2, page, app, bot }, use) => {
         await use(new Helpers(page, app, bot));
@@ -70,12 +70,6 @@ export const test = base.extend<{
  * which finds a message and then constructs a reply to it.
  */
 export class MessageBuilder {
-    constructor(
-        private page: Page,
-        private app: ElementAppPage,
-        private helpers: Helpers,
-    ) {}
-
     /**
      * Map of message content -> event.
      */
@@ -164,11 +158,7 @@ export class MessageBuilder {
  * MessageBuilder.replyTo} which creates a reply based on a previous message.
  */
 export abstract class MessageContentSpec {
-    messageFinder: MessageBuilder | null;
-
-    constructor(messageFinder: MessageBuilder = null) {
-        this.messageFinder = messageFinder;
-    }
+    constructor(public readonly messageFinder: MessageBuilder) {}
 
     public abstract getContent(room: JSHandle<Room>): Promise<Record<string, unknown>>;
 }
@@ -230,9 +220,9 @@ export class Helpers {
         await expect(this.page.locator(".mx_ThreadView_timelinePanelWrapper")).toBeVisible();
     }
 
-    async findRoomById(roomId: string): Promise<JSHandle<Room | undefined>> {
+    async findRoomById(roomId: string): Promise<JSHandle<Room>> {
         return this.app.client.evaluateHandle((cli, roomId) => {
-            return cli.getRooms().find((r) => r.roomId === roomId);
+            return cli.getRooms().find((r) => r.roomId === roomId)!;
         }, roomId);
     }
 
@@ -312,11 +302,6 @@ export class Helpers {
      * @param content - the expected rooms and their notification levels
      */
     async assertRoomsInTac(content: Array<{ room: string; notificationLevel: "highlight" | "notification" }>) {
-        const getBadgeClass = (notificationLevel: "highlight" | "notification") =>
-            notificationLevel === "highlight"
-                ? "mx_NotificationBadge_level_highlight"
-                : "mx_NotificationBadge_level_notification";
-
         // Ensure that we have the right number of rooms
         await expect(this.getTacPanel().getByRole("menuitem")).toHaveCount(content.length);
 
@@ -327,7 +312,7 @@ export class Helpers {
             // Ensure that the room name are correct
             await expect(roomLocator).toHaveText(new RegExp(room));
             // There is no accessibility marker for the StatelessNotificationBadge
-            await expect(roomLocator.locator(`.${getBadgeClass(notificationLevel)}`)).toBeVisible();
+            await expect(roomLocator.locator(`[data-notification-level="${notificationLevel}"]`)).toBeVisible();
         }
     }
 
diff --git a/apps/web/playwright/e2e/spaces/threads-activity-centre/threadsActivityCentre.spec.ts b/apps/web/playwright/e2e/spaces/threads-activity-centre/threadsActivityCentre.spec.ts
index a22ce1ec2b..f9e7243969 100644
--- a/apps/web/playwright/e2e/spaces/threads-activity-centre/threadsActivityCentre.spec.ts
+++ b/apps/web/playwright/e2e/spaces/threads-activity-centre/threadsActivityCentre.spec.ts
@@ -6,9 +6,12 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
+import { rejectToast } from "@element-hq/element-web-playwright-common";
+
 import { expect, test } from ".";
 import { CommandOrControl } from "../../utils";
 import { isDendrite } from "../../../plugins/homeserver/dendrite";
+import { getRoomList, getRoomOptionsMenu } from "../../left-panel/room-list-panel/utils";
 
 test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
     test.skip(
@@ -21,12 +24,15 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
         botCreateOpts: { displayName: "Other User" },
     });
 
+    test.beforeEach(async ({ page, app, user }) => {
+        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");
+    });
+
     test(
         "should have the button correctly aligned and displayed in the space panel when expanded",
         { tag: "@screenshot" },
-        async ({ util, app }) => {
-            await app.closeVerifyToast();
-
+        async ({ util, page }) => {
             // Open the space panel
             await util.expandSpacePanel();
             // The buttons in the space panel should be aligned when expanded
@@ -34,27 +40,28 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
         },
     );
 
-    test("should not show indicator when there is no thread", { tag: "@screenshot" }, async ({ room1, util, app }) => {
-        await app.closeVerifyToast();
+    test(
+        "should not show indicator when there is no thread",
+        { tag: "@screenshot" },
+        async ({ room1, util, app, page }) => {
+            // No indicator should be shown
+            await util.assertNoTacIndicator();
 
-        // No indicator should be shown
-        await util.assertNoTacIndicator();
+            await util.goTo(room1);
+            await util.receiveMessages(room1, ["Msg1"]);
 
-        await util.goTo(room1);
-        await util.receiveMessages(room1, ["Msg1"]);
-
-        // A message in the main timeline should not affect the indicator
-        await util.assertNoTacIndicator();
-    });
+            // A message in the main timeline should not affect the indicator
+            await util.assertNoTacIndicator();
+        },
+    );
 
     test("should show a notification indicator when there is a message in a thread", async ({
         room1,
         util,
         msg,
         app,
+        page,
     }) => {
-        await app.closeVerifyToast();
-
         await util.goTo(room1);
         await util.receiveMessages(room1, ["Msg1", msg.threadedOff("Msg1", "Resp1")]);
 
@@ -68,9 +75,8 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
         msg,
         user,
         app,
+        page,
     }) => {
-        await app.closeVerifyToast();
-
         await util.goTo(room1);
         await util.receiveMessages(room1, [
             "Msg1",
@@ -91,9 +97,7 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
     test(
         "should show the rooms with unread threads",
         { tag: "@screenshot" },
-        async ({ room1, room2, util, msg, user, app }) => {
-            await app.closeVerifyToast();
-
+        async ({ room1, room2, util, msg, user, app, page }) => {
             await util.goTo(room2);
             await util.populateThreads(room1, room2, msg, user);
             // The indicator should be shown
@@ -114,9 +118,7 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
     test(
         "should update with a thread is read",
         { tag: "@screenshot" },
-        async ({ room1, room2, util, msg, user, app }) => {
-            await app.closeVerifyToast();
-
+        async ({ room1, room2, util, msg, user, app, page }) => {
             await util.goTo(room2);
             await util.populateThreads(room1, room2, msg, user);
 
@@ -140,9 +142,7 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
         },
     );
 
-    test("should order by recency after notification level", async ({ room1, room2, util, msg, user, app }) => {
-        await app.closeVerifyToast();
-
+    test("should order by recency after notification level", async ({ room1, room2, util, msg, user, app, page }) => {
         await util.goTo(room2);
         await util.populateThreads(room1, room2, msg, user, false);
 
@@ -154,8 +154,6 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
     });
 
     test("should block the Spotlight to open when the TAC is opened", async ({ util, page, app }) => {
-        await app.closeVerifyToast();
-
         const toggleSpotlight = () => page.keyboard.press(`${CommandOrControl}+k`);
 
         // Sanity check
@@ -171,8 +169,6 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
     });
 
     test("should have the correct hover state", { tag: "@screenshot" }, async ({ util, page, app }) => {
-        await app.closeVerifyToast();
-
         await util.hoverTacButton();
         await expect(util.getSpacePanel()).toMatchScreenshot("tac-hovered.png");
 
@@ -183,8 +179,6 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
     });
 
     test("should mark all threads as read", { tag: "@screenshot" }, async ({ room1, room2, util, msg, page, app }) => {
-        await app.closeVerifyToast();
-
         await util.receiveMessages(room1, ["Msg1", msg.threadedOff("Msg1", "Resp1")]);
 
         await util.assertNotificationTac();
@@ -197,9 +191,14 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
         await util.assertNoTacIndicator();
     });
 
-    test("should focus the thread tab when clicking an item in the TAC", async ({ room1, room2, util, msg, app }) => {
-        await app.closeVerifyToast();
-
+    test("should focus the thread tab when clicking an item in the TAC", async ({
+        room1,
+        room2,
+        util,
+        msg,
+        app,
+        page,
+    }) => {
         await util.receiveMessages(room1, ["Msg1", msg.threadedOff("Msg1", "Resp1")]);
 
         await util.openTac();
@@ -207,4 +206,43 @@ test.describe("Threads Activity Centre", { tag: "@no-firefox" }, () => {
 
         await util.assertThreadPanelIsOpened();
     });
+
+    // The target room is named so that A-Z sorting places it at the very bottom of the room list.
+    test.describe("scrolling the room list when a room is selected", () => {
+        test.use({ room1Name: "zzz thread room" });
+
+        test("should scroll the room list to reveal the room clicked in the TAC", async ({
+            room1,
+            util,
+            msg,
+            app,
+            page,
+        }) => {
+            // Give the target room an unread thread so it shows up in the TAC.
+            await util.receiveMessages(room1, ["Msg1", msg.threadedOff("Msg1", "Resp1")]);
+            await util.assertNotificationTac();
+
+            // Create filler rooms that sort before "zzz …" so A-Z sorting pushes the target below the fold.
+            for (let i = 0; i < 20; i++) {
+                await app.client.createRoom({ name: `room ${String(i).padStart(2, "0")}` });
+            }
+
+            // Sort A-Z so room positions are deterministic and the target sits at the bottom.
+            await getRoomOptionsMenu(page).click();
+            await page.getByRole("menuitemradio", { name: "A-Z" }).click();
+
+            const roomList = getRoomList(page);
+            const targetRow = roomList.getByRole("option", { name: `Open room ${room1.name}` });
+
+            await expect(roomList.getByRole("option", { name: "Open room room 00" })).toBeVisible();
+            await expect(targetRow).not.toBeInViewport();
+
+            // Clicking the room in the TAC dispatches view_room with show_room_tile…
+            await util.openTac();
+            await util.clickRoomInTac(room1.name);
+
+            // …which scrolls the room list to bring the room's tile into view.
+            await expect(targetRow).toBeInViewport();
+        });
+    });
 });
diff --git a/apps/web/playwright/e2e/spotlight/spotlight.spec.ts b/apps/web/playwright/e2e/spotlight/spotlight.spec.ts
index d2caf93d9f..df865bc067 100644
--- a/apps/web/playwright/e2e/spotlight/spotlight.spec.ts
+++ b/apps/web/playwright/e2e/spotlight/spotlight.spec.ts
@@ -97,8 +97,8 @@ test.describe("Spotlight", () => {
 
     test.beforeEach(async ({ page, user, bot1, bot2, room1, room2, room3 }) => {
         await bot1.joinRoom(room1.roomId);
-        await bot2.inviteUser(room2.roomId, bot1.credentials.userId);
-        await bot2.inviteUser(room3.roomId, bot1.credentials.userId);
+        await bot2.inviteUser(room2.roomId, bot1.credentials!.userId);
+        await bot2.inviteUser(room3.roomId, bot1.credentials!.userId);
 
         await page.goto(`/#/room/${room1.roomId}`);
         await expect(page.locator(".mx_RoomSublist_skeletonUI")).not.toBeAttached();
@@ -215,12 +215,12 @@ test.describe("Spotlight", () => {
         const spotlight = await app.openSpotlight();
         await page.waitForTimeout(500); // wait for the dialog to settle
         await spotlight.filter(Filter.People);
-        await spotlight.search(bot1.credentials.displayName);
+        await spotlight.search(bot1.credentials!.displayName!);
         const resultLocator = spotlight.results;
         await expect(resultLocator).toHaveCount(1);
-        await expect(resultLocator.first()).toContainText(bot1.credentials.displayName);
+        await expect(resultLocator.first()).toContainText(bot1.credentials!.displayName!);
         await resultLocator.first().click();
-        await expect(roomHeaderName(page)).toHaveText(bot1.credentials.displayName);
+        await expect(roomHeaderName(page)).toHaveText(bot1.credentials!.displayName!);
     });
 
     /**
@@ -234,30 +234,30 @@ test.describe("Spotlight", () => {
         const spotlight = await app.openSpotlight();
         await page.waitForTimeout(500); // wait for the dialog to settle
         await spotlight.filter(Filter.People);
-        await spotlight.search(bot2.credentials.displayName);
+        await spotlight.search(bot2.credentials!.displayName!);
         const resultLocator = spotlight.results;
         await expect(resultLocator).toHaveCount(1);
-        await expect(resultLocator.first()).toContainText(bot2.credentials.displayName);
+        await expect(resultLocator.first()).toContainText(bot2.credentials!.displayName!);
         await resultLocator.first().click();
-        await expect(roomHeaderName(page)).toHaveText(bot2.credentials.displayName);
+        await expect(roomHeaderName(page)).toHaveText(bot2.credentials!.displayName!);
     });
 
     test("should find group DMs by usernames or user ids", async ({ page, app, bot1, bot2, room1 }) => {
         // First we want to share a room with both bots to ensure we’ve got their usernames cached
-        await app.client.inviteUser(room1.roomId, bot2.credentials.userId);
+        await app.client.inviteUser(room1.roomId, bot2.credentials!.userId);
 
         // Starting a DM with ByteBot (will be turned into a group dm later)
         let spotlight = await app.openSpotlight();
         await page.waitForTimeout(500); // wait for the dialog to settle
         await spotlight.filter(Filter.People);
-        await spotlight.search(bot2.credentials.displayName);
+        await spotlight.search(bot2.credentials!.displayName!);
         let resultLocator = spotlight.results;
         await expect(resultLocator).toHaveCount(1);
-        await expect(resultLocator.first()).toContainText(bot2.credentials.displayName);
+        await expect(resultLocator.first()).toContainText(bot2.credentials!.displayName!);
         await resultLocator.first().click();
 
         // Send first message to actually start DM
-        await expect(roomHeaderName(page)).toHaveText(bot2.credentials.displayName);
+        await expect(roomHeaderName(page)).toHaveText(bot2.credentials!.displayName!);
         const locator = page.getByRole("textbox", { name: "Send a message…" });
         await locator.fill("Hey!");
         await locator.press("Enter");
@@ -265,7 +265,7 @@ test.describe("Spotlight", () => {
         // Assert DM exists by checking for the first message and the room being in the room list
         await expect(page.locator(".mx_EventTile_body").filter({ hasText: "Hey!" })).toBeAttached({ timeout: 3000 });
         await expect(
-            page.getByTestId("room-list").getByRole("option", { name: `Open room ${bot2.credentials.displayName}` }),
+            page.getByTestId("room-list").getByRole("option", { name: `Open room ${bot2.credentials!.displayName}` }),
         ).toBeVisible();
 
         // Invite BotBob into existing DM with ByteBot
@@ -273,11 +273,11 @@ test.describe("Spotlight", () => {
             const map = client
                 .getAccountData("m.direct" as keyof AccountDataEvents)
                 ?.getContent<Record<string, string[]>>();
-            return map[userId] ?? [];
-        }, bot2.credentials.userId);
+            return map?.[userId] ?? [];
+        }, bot2.credentials!.userId);
         expect(dmRooms).toHaveLength(1);
-        const groupDmName = await app.client.evaluate((client, id) => client.getRoom(id).name, dmRooms[0]);
-        await app.client.inviteUser(dmRooms[0], bot1.credentials.userId);
+        const groupDmName = await app.client.evaluate((client, id) => client.getRoom(id)!.name, dmRooms[0]);
+        await app.client.inviteUser(dmRooms[0], bot1.credentials!.userId);
         await expect(roomHeaderName(page).first()).toContainText(groupDmName);
         await expect(
             page.getByTestId("room-list").getByRole("option", { name: `Open room ${groupDmName}` }),
@@ -286,7 +286,7 @@ test.describe("Spotlight", () => {
         // Search for BotBob by id, should return group DM and user
         spotlight = await app.openSpotlight();
         await spotlight.filter(Filter.People);
-        await spotlight.search(bot1.credentials.userId);
+        await spotlight.search(bot1.credentials!.userId);
         await page.waitForTimeout(1000); // wait for the dialog to settle
         resultLocator = spotlight.results;
         await expect(resultLocator).toHaveCount(2);
@@ -299,7 +299,7 @@ test.describe("Spotlight", () => {
         // Search for ByteBot by id, should return group DM and user
         spotlight = await app.openSpotlight();
         await spotlight.filter(Filter.People);
-        await spotlight.search(bot2.credentials.userId);
+        await spotlight.search(bot2.credentials!.userId);
         await page.waitForTimeout(1000); // wait for the dialog to settle
         resultLocator = spotlight.results;
         await expect(resultLocator).toHaveCount(2);
@@ -324,11 +324,11 @@ test.describe("Spotlight", () => {
         // We search for user ID to trigger the profile lookup within the dialog.
         for (let i = 0; i < 2; i++) {
             console.log("Iteration: " + i);
-            await spotlight.search(bot1.credentials.userId);
+            await spotlight.search(bot1.credentials!.userId);
             await page.waitForTimeout(1000); // wait for the dialog to settle
             const resultLocator = spotlight.results;
             await expect(resultLocator).toHaveCount(1);
-            await expect(resultLocator.first()).toContainText(bot1.credentials.userId);
+            await expect(resultLocator.first()).toContainText(bot1.credentials!.userId);
         }
     });
 
@@ -336,12 +336,12 @@ test.describe("Spotlight", () => {
         const spotlight = await app.openSpotlight();
         await page.waitForTimeout(500); // wait for the dialog to settle
         await spotlight.filter(Filter.People);
-        await spotlight.search(bot2.credentials.displayName);
+        await spotlight.search(bot2.credentials!.displayName!);
         await page.waitForTimeout(3000); // wait for the dialog to settle
 
         const resultLocator = spotlight.results;
         await expect(resultLocator).toHaveCount(1);
-        await expect(resultLocator.first()).toContainText(bot2.credentials.displayName);
+        await expect(resultLocator.first()).toContainText(bot2.credentials!.displayName!);
 
         await expect(spotlight.dialog.locator("#mx_SpotlightDialog_button_startGroupChat")).toContainText(
             "Start a group chat",
@@ -351,17 +351,17 @@ test.describe("Spotlight", () => {
     });
 
     test("should close spotlight after starting a DM", async ({ page, app, bot1 }) => {
-        await startDM(app, page, bot1.credentials.displayName);
+        await startDM(app, page, bot1.credentials!.displayName!);
         await expect(page.locator(".mx_SpotlightDialog")).toHaveCount(0);
     });
 
     test("should show the same user only once", async ({ page, app, bot1 }) => {
-        await startDM(app, page, bot1.credentials.displayName);
+        await startDM(app, page, bot1.credentials!.displayName!);
         await page.goto("/#/home");
         const spotlight = await app.openSpotlight();
         await page.waitForTimeout(500); // wait for the dialog to settle
         await spotlight.filter(Filter.People);
-        await spotlight.search(bot1.credentials.displayName);
+        await spotlight.search(bot1.credentials!.displayName!);
         await page.waitForTimeout(3000); // wait for the dialog to settle
         await expect(spotlight.dialog.locator(".mx_Spinner")).not.toBeAttached();
         const resultLocator = spotlight.results;
diff --git a/apps/web/playwright/e2e/threads/threads.spec.ts b/apps/web/playwright/e2e/threads/threads.spec.ts
index c74ca570ea..520d22bf90 100644
--- a/apps/web/playwright/e2e/threads/threads.spec.ts
+++ b/apps/web/playwright/e2e/threads/threads.spec.ts
@@ -29,7 +29,7 @@ test.describe("Threads", () => {
 
     test("should be usable for a conversation", { tag: "@screenshot" }, async ({ page, app, bot }) => {
         const roomId = await app.client.createRoom({});
-        await app.client.inviteUser(roomId, bot.credentials.userId);
+        await app.client.inviteUser(roomId, bot.credentials!.userId);
         await bot.joinRoom(roomId);
         await page.goto("/#/room/" + roomId);
 
@@ -64,8 +64,8 @@ test.describe("Threads", () => {
 
         // User asserts timeline thread summary visible & clicks it
         let locator = page.locator(".mx_RoomView_body .mx_ThreadSummary");
-        await expect(locator.locator(".mx_ThreadSummary_sender").getByText("BotBob")).toBeAttached();
-        await expect(locator.locator(".mx_ThreadSummary_content").getByText(MessageLong)).toBeAttached();
+        await expect(locator.getByText("BotBob")).toBeAttached();
+        await expect(locator.getByText(MessageLong)).toBeAttached();
         await locator.click();
 
         // Wait until the both messages are read
@@ -122,8 +122,8 @@ test.describe("Threads", () => {
 
         // User asserts summary was updated correctly
         locator = page.locator(".mx_RoomView_body .mx_ThreadSummary");
-        await expect(locator.locator(".mx_ThreadSummary_sender").getByText("Tom")).toBeAttached();
-        await expect(locator.locator(".mx_ThreadSummary_content").getByText("Test")).toBeAttached();
+        await expect(locator.getByText("Tom")).toBeAttached();
+        await expect(locator.getByText("Test")).toBeAttached();
 
         ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
         // Check reactions and hidden events
@@ -140,7 +140,7 @@ test.describe("Threads", () => {
         await locator.hover();
         await locator.getByRole("toolbar", { name: "Message Actions" }).getByRole("button", { name: "React" }).click();
 
-        locator = page.locator(".mx_EmojiPicker");
+        locator = page.getByLabel("Emoji picker");
         await locator.getByRole("textbox").fill("wave");
         await page.getByRole("gridcell", { name: "👋" }).click();
 
@@ -243,8 +243,8 @@ test.describe("Threads", () => {
 
         // User asserts summary was updated correctly
         locator = page.locator(".mx_RoomView_body .mx_ThreadSummary");
-        await expect(locator.locator(".mx_ThreadSummary_sender").getByText("BotBob")).toBeAttached();
-        await expect(locator.locator(".mx_ThreadSummary_content").getByText(MessageLong)).toBeAttached();
+        await expect(locator.getByText("BotBob")).toBeAttached();
+        await expect(locator.getByText(MessageLong)).toBeAttached();
 
         // User closes right panel after clicking back to thread list
         locator = page.locator(".mx_ThreadPanel");
@@ -255,8 +255,8 @@ test.describe("Threads", () => {
         await bot.sendMessage(roomId, "How are things?", threadId);
 
         locator = page.locator(".mx_RoomView_body .mx_ThreadSummary");
-        await expect(locator.locator(".mx_ThreadSummary_sender").getByText("BotBob")).toBeAttached();
-        await expect(locator.locator(".mx_ThreadSummary_content").getByText("How are things?")).toBeAttached();
+        await expect(locator.getByText("BotBob")).toBeAttached();
+        await expect(locator.getByText("How are things?")).toBeAttached();
 
         locator = page.getByRole("banner").getByRole("button", { name: "Threads" });
         await expect(locator).toHaveAttribute("data-indicator", "success"); // User asserts thread list unread indicator
@@ -265,11 +265,13 @@ test.describe("Threads", () => {
         // User asserts thread with correct root & latest events & unread dot
         locator = page.locator(".mx_ThreadPanel .mx_EventTile_last");
         await expect(locator.locator(".mx_EventTile_body").getByText("Hello Mr. Bot")).toBeAttached();
-        await expect(locator.locator(".mx_ThreadSummary_content").getByText("How are things?")).toBeAttached();
+        await expect(locator.getByText("How are things?")).toBeAttached();
         // Check the number of the replies
         await expect(locator.locator(".mx_ThreadPanel_replies_amount").getByText("2")).toBeAttached();
         // Make sure the notification dot is visible
-        await expect(locator.locator(".mx_NotificationBadge_visible")).toBeVisible();
+        const notificationBadge = locator.getByTestId("notification-badge");
+        await expect(notificationBadge).toBeVisible();
+        await expect(notificationBadge).toHaveAttribute("data-badge-type", "dot");
         // User opens thread via threads list
         await locator.locator(".mx_EventTile_line").click();
 
@@ -279,8 +281,8 @@ test.describe("Threads", () => {
         await locator.press("Enter");
 
         locator = page.locator(".mx_RoomView_body .mx_ThreadSummary");
-        await expect(locator.locator(".mx_ThreadSummary_sender").getByText("Tom")).toBeAttached();
-        await expect(locator.locator(".mx_ThreadSummary_content").getByText("Great!")).toBeAttached();
+        await expect(locator.getByText("Tom")).toBeAttached();
+        await expect(locator.getByText("Great!")).toBeAttached();
 
         // User edits & asserts
         locator = page.locator(".mx_ThreadView .mx_EventTile_last");
@@ -291,8 +293,8 @@ test.describe("Threads", () => {
         await locator.getByRole("textbox").press("Enter");
 
         locator = page.locator(".mx_RoomView_body .mx_ThreadSummary");
-        await expect(locator.locator(".mx_ThreadSummary_sender").getByText("Tom")).toBeAttached();
-        await expect(locator.locator(".mx_ThreadSummary_content")).toHaveText("Great! How about yourself?");
+        await expect(locator.getByText("Tom")).toBeAttached();
+        await expect(locator).toContainText("Great! How about yourself?");
 
         // User closes right panel
         await page.locator(".mx_ThreadPanel").getByRole("button", { name: "Close" }).click();
@@ -302,8 +304,8 @@ test.describe("Threads", () => {
 
         // User asserts
         locator = page.locator(".mx_RoomView_body .mx_ThreadSummary");
-        await expect(locator.locator(".mx_ThreadSummary_sender").getByText("BotBob")).toBeAttached();
-        await expect(locator.locator(".mx_ThreadSummary_content").getByText("I'm very good thanks")).toBeAttached();
+        await expect(locator.getByText("BotBob")).toBeAttached();
+        await expect(locator.getByText("I'm very good thanks")).toBeAttached();
 
         // Bot edits their latest event
         await bot.sendMessage(roomId, {
@@ -321,25 +323,25 @@ test.describe("Threads", () => {
 
         // User asserts
         locator = page.locator(".mx_RoomView_body .mx_ThreadSummary");
-        await expect(locator.locator(".mx_ThreadSummary_sender").getByText("BotBob")).toBeAttached();
-        await expect(locator.locator(".mx_ThreadSummary_content").getByText("I'm very good thanks :)")).toBeAttached();
+        await expect(locator.getByText("BotBob")).toBeAttached();
+        await expect(locator.getByText("I'm very good thanks :)")).toBeAttached();
     });
 
     test.describe("with larger viewport", async () => {
         // Increase viewport size so that voice messages fit
-        test.use({ viewport: { width: 1280, height: 720 } });
+        test.use({ viewport: { width: 1440, height: 720 } });
 
         test.beforeEach(async ({ page }) => {
             // Increase right-panel size, so that voice messages fit
             await page.addInitScript(() => {
-                window.localStorage.setItem("mx_rhs_size", "600");
+                window.localStorage.setItem("mx_rhs_size", "700");
             });
         });
 
         test("can send voice messages", { tag: ["@no-firefox", "@no-webkit"] }, async ({ page, app, user }) => {
             // Increase right-panel size, so that voice messages fit
             await page.evaluate(() => {
-                window.localStorage.setItem("mx_rhs_size", "600");
+                window.localStorage.setItem("mx_rhs_size", "700");
             });
 
             const roomId = await app.client.createRoom({});
@@ -434,7 +436,7 @@ test.describe("Threads", () => {
         { tag: ["@screenshot", "@no-firefox"] },
         async ({ page, app, bot }) => {
             const roomId = await app.client.createRoom({});
-            await app.client.inviteUser(roomId, bot.credentials.userId);
+            await app.client.inviteUser(roomId, bot.credentials!.userId);
             await bot.joinRoom(roomId);
             await page.goto("/#/room/" + roomId);
 
@@ -593,4 +595,49 @@ test.describe("Threads", () => {
             rightPanel.locator(".mx_EventTile").getByText("Hello again Mr. User in a thread"),
         ).not.toBeVisible();
     });
+
+    test("should have a header the same height as the pinned message banner", async ({ page, app, user }) => {
+        // Create room
+        const roomId = await app.client.createRoom({});
+        await page.goto("/#/room/" + roomId);
+
+        // Send a message and pin it, so the pinned message banner is shown
+        const roomViewBody = page.locator(".mx_RoomView_body");
+        const textbox = roomViewBody.getByRole("textbox", { name: "Send an unencrypted message…" });
+        await textbox.fill("Hello Mr. Bot");
+        await textbox.press("Enter");
+
+        const message = roomViewBody.locator(".mx_MTextBody").filter({ hasText: "Hello Mr. Bot" });
+        await message.click({ button: "right" });
+        await page.getByRole("menuitem", { name: "Pin", exact: true }).click();
+
+        const pinnedMessageBanner = page.getByTestId("pinned-message-banner");
+        await expect(pinnedMessageBanner).toBeVisible();
+
+        // Reply in a thread, so the Threads panel header (Mark all as read + Show filter) is shown
+        const messageTile = roomViewBody
+            .locator(".mx_EventTile[data-scroll-tokens]")
+            .filter({ hasText: "Hello Mr. Bot" });
+        await messageTile.hover();
+        await messageTile.getByRole("button", { name: "Reply in thread" }).click();
+        await expect(page.locator(".mx_ThreadView_timelinePanelWrapper")).toHaveCount(1);
+
+        const threadPanel = page.locator(".mx_ThreadPanel");
+        const threadTextbox = threadPanel.getByRole("textbox", { name: "Send an unencrypted message…" });
+        await threadTextbox.fill("Hello Mr. User in a thread");
+        await threadTextbox.press("Enter");
+        await expect(threadPanel.locator(".mx_EventTile_last").getByText("Hello Mr. User in a thread")).toBeVisible();
+        await threadPanel.getByTestId("base-card-close-button").click();
+
+        await page.locator(".mx_RoomHeader").getByRole("button", { name: "Threads" }).click();
+        const threadPanelHeader = page.locator(".mx_ThreadPanelHeader");
+        await expect(threadPanelHeader).toBeVisible();
+
+        // The two containers must be the same height so their bottom borders line up
+        // See https://github.com/element-hq/element-web/issues/34463
+        const pinnedBannerBox = await pinnedMessageBanner.boundingBox();
+        const threadHeaderBox = await threadPanelHeader.boundingBox();
+        expect(threadHeaderBox?.height).toBe(pinnedBannerBox?.height);
+        await expect(threadPanelHeader).toHaveCSS("height", "64px");
+    });
 });
diff --git a/apps/web/playwright/e2e/timeline/event-list-summary.spec.ts b/apps/web/playwright/e2e/timeline/event-list-summary.spec.ts
index 3a14753d58..c628df6d06 100644
--- a/apps/web/playwright/e2e/timeline/event-list-summary.spec.ts
+++ b/apps/web/playwright/e2e/timeline/event-list-summary.spec.ts
@@ -35,7 +35,10 @@ test.describe("Event List Summary", () => {
             ).toBeVisible();
 
             await replaceBotIds(page, bot);
-            await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("bot_joined_the_room.png", ignoreTimestamps);
+            await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
+                "bot_joined_the_room.png",
+                ignoreTimestamps,
+            );
         },
     );
 
@@ -57,7 +60,7 @@ test.describe("Event List Summary", () => {
             await app.client.sendMessage(roomId, "Saying something");
 
             // When we ban the bot
-            await app.client.ban(roomId, bot.credentials.userId);
+            await app.client.ban(roomId, bot.credentials!.userId);
 
             // Then we say that, but the name is hidden
             await expect(
@@ -67,7 +70,10 @@ test.describe("Event List Summary", () => {
             ).toBeVisible();
 
             await replaceBotIds(page, bot);
-            await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("bot_was_banned.png", ignoreTimestamps);
+            await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
+                "bot_was_banned.png",
+                ignoreTimestamps,
+            );
         },
     );
 
@@ -86,8 +92,8 @@ test.describe("Event List Summary", () => {
             ).toBeVisible();
 
             // When we perform multiple actions on it
-            await app.client.kick(roomId, bot.credentials.userId);
-            await app.client.inviteUser(roomId, bot.credentials.userId);
+            await app.client.kick(roomId, bot.credentials!.userId);
+            await app.client.inviteUser(roomId, bot.credentials!.userId);
             await bot.joinRoom(roomId);
 
             // Then those actions are gathered into a single summary
@@ -98,7 +104,7 @@ test.describe("Event List Summary", () => {
             ).toBeVisible();
 
             await replaceBotIds(page, bot);
-            await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+            await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                 "multiple_join_leave_messages.png",
                 ignoreTimestamps,
             );
@@ -120,9 +126,9 @@ test.describe("Event List Summary", () => {
             ).toBeVisible();
 
             // When we perform multiple actions on it, including a ban
-            await app.client.ban(roomId, bot.credentials.userId);
-            await app.client.unban(roomId, bot.credentials.userId);
-            await app.client.inviteUser(roomId, bot.credentials.userId);
+            await app.client.ban(roomId, bot.credentials!.userId);
+            await app.client.unban(roomId, bot.credentials!.userId);
+            await app.client.inviteUser(roomId, bot.credentials!.userId);
             await bot.joinRoom(roomId);
 
             // Then those actions are gathered into a single summary, with the name hidden
@@ -133,7 +139,7 @@ test.describe("Event List Summary", () => {
             ).toBeVisible();
 
             await replaceBotIds(page, bot);
-            await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+            await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                 "multiple_join_ban_messages.png",
                 ignoreTimestamps,
             );
@@ -152,7 +158,7 @@ test.describe("Event List Summary", () => {
                 autoAcceptInvites: false,
             });
             await bot2.prepareClient();
-            await app.client.inviteUser(roomId, bot2.credentials.userId);
+            await app.client.inviteUser(roomId, bot2.credentials!.userId);
             await app.client.sendMessage(roomId, "I invited MyBot2...");
             await bot.joinRoom(roomId);
             await bot2.joinRoom(roomId);
@@ -163,10 +169,10 @@ test.describe("Event List Summary", () => {
             ).toBeVisible();
 
             // When we perform multiple actions on both bots
-            await app.client.kick(roomId, bot.credentials.userId);
-            await app.client.kick(roomId, bot2.credentials.userId);
-            await app.client.inviteUser(roomId, bot.credentials.userId);
-            await app.client.inviteUser(roomId, bot2.credentials.userId);
+            await app.client.kick(roomId, bot.credentials!.userId);
+            await app.client.kick(roomId, bot2.credentials!.userId);
+            await app.client.inviteUser(roomId, bot.credentials!.userId);
+            await app.client.inviteUser(roomId, bot2.credentials!.userId);
             await bot.joinRoom(roomId);
             await bot2.joinRoom(roomId);
 
@@ -180,7 +186,7 @@ test.describe("Event List Summary", () => {
             await expect(page.locator('div[aria-label="3 members"]')).toBeVisible();
 
             await replaceBotIds(page, bot, bot2);
-            await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+            await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                 "multiple_people_join_leave_messages.png",
                 ignoreTimestampsRightColumnAndHeader,
             );
@@ -202,7 +208,7 @@ test.describe("Event List Summary", () => {
             ).toBeVisible();
 
             await replaceBotIds(page, bot, bot2);
-            await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+            await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                 "multiple_people_join_leave_messages_expanded.png",
                 ignoreTimestampsRightColumnAndHeader,
             );
@@ -221,7 +227,7 @@ test.describe("Event List Summary", () => {
                 autoAcceptInvites: false,
             });
             await bot2.prepareClient();
-            await app.client.inviteUser(roomId, bot2.credentials.userId);
+            await app.client.inviteUser(roomId, bot2.credentials!.userId);
             await app.client.sendMessage(roomId, "I invited MyBot2...");
             await bot.joinRoom(roomId);
             await bot2.joinRoom(roomId);
@@ -232,11 +238,11 @@ test.describe("Event List Summary", () => {
             ).toBeVisible();
 
             // When we ban bot1 but not bot2
-            await app.client.ban(roomId, bot.credentials.userId);
-            await app.client.unban(roomId, bot.credentials.userId);
-            await app.client.kick(roomId, bot2.credentials.userId);
-            await app.client.inviteUser(roomId, bot.credentials.userId);
-            await app.client.inviteUser(roomId, bot2.credentials.userId);
+            await app.client.ban(roomId, bot.credentials!.userId);
+            await app.client.unban(roomId, bot.credentials!.userId);
+            await app.client.kick(roomId, bot2.credentials!.userId);
+            await app.client.inviteUser(roomId, bot.credentials!.userId);
+            await app.client.inviteUser(roomId, bot2.credentials!.userId);
             await bot.joinRoom(roomId);
             await bot2.joinRoom(roomId);
 
@@ -250,7 +256,7 @@ test.describe("Event List Summary", () => {
             await expect(page.locator('div[aria-label="3 members"]')).toBeVisible();
 
             await replaceBotIds(page, bot, bot2);
-            await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+            await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                 "multiple_people_ban_messages.png",
                 ignoreTimestampsRightColumnAndHeader,
             );
@@ -272,7 +278,7 @@ test.describe("Event List Summary", () => {
             ).toBeVisible();
 
             await replaceBotIds(page, bot, bot2);
-            await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+            await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                 "multiple_people_ban_messages_expanded.png",
                 ignoreTimestampsRightColumnAndHeader,
             );
@@ -312,7 +318,7 @@ async function setupRoom(app: ElementAppPage, homeserver: StartedHomeserverConta
         autoAcceptInvites: false,
     });
     await bot.prepareClient();
-    await app.client.inviteUser(roomId, bot.credentials.userId);
+    await app.client.inviteUser(roomId, bot.credentials!.userId);
     await app.client.sendMessage(roomId, "I invited MyBot...");
 
     return { bot, roomId };
@@ -330,11 +336,11 @@ async function replaceBotIds(page: Page, bot: Bot, bot2?: Bot) {
                 const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
                 while (walker.nextNode()) {
                     const node = walker.currentNode;
-                    node.textContent = node.textContent.replaceAll(bot1UserId, "<<replaced_bot1_id>>");
+                    node.textContent = node.textContent!.replaceAll(bot1UserId, "<<replaced_bot1_id>>");
                     node.textContent = node.textContent.replaceAll(bot2UserId, "<<replaced_bot2_id>>");
                 }
             }
         },
-        [bot.credentials.userId, bot2?.credentials?.userId ?? "no_bot_2_to_replace"],
+        [bot.credentials!.userId, bot2?.credentials?.userId ?? "no_bot_2_to_replace"],
     );
 }
diff --git a/apps/web/playwright/e2e/timeline/media-preview-settings.spec.ts b/apps/web/playwright/e2e/timeline/media-preview-settings.spec.ts
index 026c74d926..ebaecc1c45 100644
--- a/apps/web/playwright/e2e/timeline/media-preview-settings.spec.ts
+++ b/apps/web/playwright/e2e/timeline/media-preview-settings.spec.ts
@@ -6,6 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type EventType, type MsgType, type RoomJoinRulesEventContent } from "matrix-js-sdk/src/types";
+import { rejectToast } from "@element-hq/element-web-playwright-common";
 
 import { test, expect } from "../../element-web-test";
 import { readSampleFileSync } from "../../sample-files";
@@ -36,7 +37,7 @@ test.describe("Media preview settings", () => {
     });
 
     test("should be able to hide avatars of inviters", { tag: "@screenshot" }, async ({ page, app, room, user }) => {
-        await app.closeVerifyToast();
+        await rejectToast(page, "Verify this device");
 
         let settings = await app.settings.openUserSettings("Preferences");
         await settings.getByLabel("Hide avatars of room and inviter").click();
diff --git a/apps/web/playwright/e2e/timeline/timeline.spec.ts b/apps/web/playwright/e2e/timeline/timeline.spec.ts
index 994cd4a101..9ea0532a44 100644
--- a/apps/web/playwright/e2e/timeline/timeline.spec.ts
+++ b/apps/web/playwright/e2e/timeline/timeline.spec.ts
@@ -6,6 +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 { rejectToast } from "@element-hq/element-web-playwright-common";
+
 import type { Locator, Page } from "@playwright/test";
 import type { ISendEventResponse, EventType, MsgType, IContent } from "matrix-js-sdk/src/matrix";
 import { test, expect } from "../../element-web-test";
@@ -46,7 +48,7 @@ const expectAvatar = async (cli: Client, e: Locator, avatarUrl: string): Promise
         },
         { avatarUrl, size, resizeMethod: AVATAR_RESIZE_METHOD },
     );
-    await expect(e.locator(".mx_BaseAvatar img")).toHaveAttribute("src", url);
+    await expect(e.locator(".mx_BaseAvatar img")).toHaveAttribute("src", url!);
 };
 
 const sendEvent = async (client: Client, roomId: string, html = false): Promise<ISendEventResponse> => {
@@ -69,7 +71,7 @@ const sendImage = async (
 ): Promise<ISendEventResponse> => {
     const upload = await client.uploadContent(pngBytes, { name: "image.png", type: "image/png" });
     return client.sendEvent(roomId, null, "m.room.message" as EventType, {
-        ...(additionalContent ?? {}),
+        ...additionalContent,
 
         msgtype: "m.image" as MsgType,
         body: "image.png",
@@ -152,7 +154,7 @@ test.describe("Timeline", () => {
                 // wait for the date separator to appear to have a stable screenshot
                 await expect(page.locator(".mx_TimelineSeparator")).toHaveText("today");
 
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("configured-room-irc-layout.png");
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot("configured-room-irc-layout.png");
             },
         );
 
@@ -177,7 +179,7 @@ test.describe("Timeline", () => {
                 // Assert that the "expand" link button worked
                 await expect(gels.getByRole("button", { name: "Collapse" })).toBeVisible();
 
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-irc-layout.png", {
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot("expanded-gels-irc-layout.png", {
                     css: `
                     .mx_MessageTimestamp,.mx_TopUnreadMessagesBar {
                         visibility: hidden;
@@ -213,8 +215,10 @@ test.describe("Timeline", () => {
                 // Assert that the "expand" link button worked
                 await expect(gels.getByRole("button", { name: "Collapse" })).toBeVisible();
 
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-modern-layout.png", {
-                    css: `
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
+                    "expanded-gels-modern-layout.png",
+                    {
+                        css: `
                     .mx_MessageTimestamp,.mx_TopUnreadMessagesBar {
                         visibility: hidden;
                     }
@@ -222,7 +226,8 @@ test.describe("Timeline", () => {
                         display: none !important;
                     }
                 `,
-                });
+                    },
+                );
             },
         );
 
@@ -254,14 +259,17 @@ test.describe("Timeline", () => {
                 ).not.toBeVisible(); // See: _GenericEventListSummary.pcss
 
                 // Save snapshot of expanded generic event list summary on bubble layout
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-bubble-layout.png", {
-                    // Exclude timestamp from snapshot
-                    css: `
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
+                    "expanded-gels-bubble-layout.png",
+                    {
+                        // Exclude timestamp from snapshot
+                        css: `
                         .mx_MessageTimestamp,.mx_TopUnreadMessagesBar {
                             visibility: hidden;
                         }
                     `,
-                });
+                    },
+                );
 
                 // Click "collapse" link button on the first hovered info event line
                 const firstTile = gels.locator(
@@ -275,13 +283,16 @@ test.describe("Timeline", () => {
                 await expect(gels.getByRole("button", { name: "Expand" })).toBeVisible();
 
                 // Save snapshot of collapsed generic event list summary on bubble layout
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("collapsed-gels-bubble-layout.png", {
-                    css: `
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
+                    "collapsed-gels-bubble-layout.png",
+                    {
+                        css: `
                         .mx_MessageTimestamp,.mx_TopUnreadMessagesBar {
                             visibility: hidden;
                         }
                     `,
-                });
+                    },
+                );
             },
         );
 
@@ -317,7 +328,7 @@ test.describe("Timeline", () => {
                 await expect(firstEventLineIrc).toHaveCSS("margin-inline-start", "99px");
                 await expect(firstEventLineIrc).toHaveCSS("inset-inline-start", "0px");
 
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                     "event-line-inline-start-margin-irc-layout.png",
                     {
                         // Exclude timestamp and read marker from snapshot
@@ -416,10 +427,10 @@ test.describe("Timeline", () => {
                     await expect(locator).toHaveCSS("min-width", "46px");
                 }
                 // Record alignment of collapsed GELS and messages on messagePanel
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                     "collapsed-gels-and-messages-irc-layout.png",
                     {
-                        // Exclude timestamp from snapshot of mx_MainSplit
+                        // Exclude timestamp from snapshot of mx_RoomView_timeline
                         css: `
                             .mx_MessageTimestamp {
                                 visibility: hidden;
@@ -439,10 +450,10 @@ test.describe("Timeline", () => {
                     page.locator(".mx_EventTile[data-layout=irc].mx_EventTile_info:first-of-type .mx_EventTile_line"),
                 ).toHaveCSS("margin-inline-start", "99px");
                 // Record alignment of expanded GELS and messages on messagePanel
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                     "expanded-gels-and-messages-irc-layout.png",
                     {
-                        // Exclude timestamp from snapshot of mx_MainSplit
+                        // Exclude timestamp from snapshot of mx_RoomView_timeline
                         css: `
                             .mx_MessageTimestamp,.mx_TopUnreadMessagesBar {
                                 visibility: hidden;
@@ -468,10 +479,10 @@ test.describe("Timeline", () => {
                     page.locator(".mx_GenericEventListSummary .mx_EventTile_last").getByRole("status"),
                 ).toHaveAccessibleName("Your message was sent");
                 // Record alignment of expanded GELS and placeholder of deleted message on messagePanel
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                     "expanded-gels-redaction-placeholder.png",
                     {
-                        // Exclude timestamp from snapshot of mx_MainSplit
+                        // Exclude timestamp from snapshot of mx_RoomView_timeline
                         css: `
                             .mx_MessageTimestamp {
                                 visibility: hidden;
@@ -502,14 +513,17 @@ test.describe("Timeline", () => {
                     page.locator(".mx_EventTile_last.mx_EventTile_emote").getByRole("status"),
                 ).toHaveAccessibleName("Your message was sent");
                 // Record alignment of expanded GELS, placeholder of deleted message, and emote
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-emote-irc-layout.png", {
-                    // Exclude timestamp from snapshot of mx_MainSplit
-                    css: `
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
+                    "expanded-gels-emote-irc-layout.png",
+                    {
+                        // Exclude timestamp from snapshot of mx_RoomView_timeline
+                        css: `
                         .mx_MessageTimestamp {
                             visibility: hidden;
                         }
                     `,
-                });
+                    },
+                );
             },
         );
 
@@ -566,7 +580,7 @@ test.describe("Timeline", () => {
                 await expect(
                     page.locator(".mx_RoomView").getByText("This message has an inline emoji 👒"),
                 ).toBeInViewport();
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                     "event-tiles-irc-layout.png",
                     screenshotOptions,
                 );
@@ -582,7 +596,7 @@ test.describe("Timeline", () => {
                 await expect(
                     page.locator(".mx_RoomView").getByText("This message has an inline emoji 👒"),
                 ).toBeInViewport();
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                     "event-tiles-modern-layout.png",
                     screenshotOptions,
                 );
@@ -595,7 +609,7 @@ test.describe("Timeline", () => {
                 await expect(
                     page.locator(".mx_RoomView").getByText("This message has an inline emoji 👒"),
                 ).toBeInViewport();
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                     "event-tiles-compact-modern-layout.png",
                     screenshotOptions,
                 );
@@ -610,7 +624,7 @@ test.describe("Timeline", () => {
                 await expect(
                     page.locator(".mx_RoomView").getByText("This message has an inline emoji 👒"),
                 ).toBeInViewport();
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                     "event-tiles-bubble-layout.png",
                     screenshotOptions,
                 );
@@ -657,7 +671,7 @@ test.describe("Timeline", () => {
                     `,
                 };
 
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                     "hidden-event-line-zero-padding-irc-layout.png",
                     screenshotOptions,
                 );
@@ -669,7 +683,7 @@ test.describe("Timeline", () => {
                     page.locator(".mx_EventTile[data-layout=group].mx_EventTile_info .mx_EventTile_line").first(),
                 ).toHaveCSS("padding-inline-start", "84px");
 
-                await expect(page.locator(".mx_MainSplit")).toMatchScreenshot(
+                await expect(page.locator(".mx_RoomView_timeline")).toMatchScreenshot(
                     "hidden-event-line-padding-modern-layout.png",
                     screenshotOptions,
                 );
@@ -718,7 +732,7 @@ test.describe("Timeline", () => {
             await viewSourceEventExpanded.hover();
             const toggleEventButton = viewSourceEventExpanded.getByRole("button", { name: "toggle event" });
             // Check size and position of toggle on expanded view source event
-            // See: _ViewSourceEvent.pcss
+            // See: ViewSourceEventView.module.css
             await expect(toggleEventButton).toHaveCSS("height", "16px"); // --ViewSourceEvent_toggle-size
             await expect(toggleEventButton).toHaveCSS("align-self", "flex-end");
             // Click again to collapse the source
@@ -751,7 +765,7 @@ test.describe("Timeline", () => {
             await expect(page.locator(".mx_EventTile[data-layout=irc] .mx_ViewSourceEvent_expanded")).toBeVisible();
         });
 
-        test("should render file size in kibibytes on a file tile", async ({ page, room }) => {
+        test("should render file size in kibibytes on a file tile", async ({ page, app, room }) => {
             await page.goto(`/#/room/${room.roomId}`);
             await expect(
                 page
@@ -760,12 +774,7 @@ test.describe("Timeline", () => {
             ).toBeVisible();
 
             // Upload a file from the message composer
-            await page
-                .locator(".mx_MessageComposer_actions input[type='file']")
-                .setInputFiles(getSampleFilePath("matrix-org-client-versions.json"));
-
-            // Click "Upload" button
-            await page.locator(".mx_Dialog").getByRole("button", { name: "Upload" }).click();
+            await app.composerUploadFiles("room", getSampleFilePath("matrix-org-client-versions.json"));
 
             // Wait until the file is sent
             await expect(page.locator(".mx_RoomView_statusArea_expanded")).not.toBeVisible();
@@ -788,7 +797,7 @@ test.describe("Timeline", () => {
                     await sendEvent(app.client, room.roomId);
                     await sendEvent(app.client, room.roomId, true);
                     await page.goto(`/#/room/${room.roomId}`);
-                    await app.closeVerifyToast();
+                    await rejectToast(page, "Verify this device");
 
                     await app.toggleRoomInfoPanel();
 
@@ -814,7 +823,7 @@ test.describe("Timeline", () => {
                 await sendEvent(app.client, room.roomId);
 
                 await page.goto(`/#/room/${room.roomId}`);
-                await app.closeVerifyToast();
+                await rejectToast(page, "Verify this device");
 
                 // Open a room setting dialog
                 await app.toggleRoomInfoPanel();
@@ -900,6 +909,30 @@ test.describe("Timeline", () => {
             });
         });
 
+        test("should not enlarge emoji inside a code block", async ({ page, app, room }) => {
+            await page.goto(`/#/room/${room.roomId}`);
+
+            const composer = app.getComposerField();
+            await composer.fill("```\nconst waving = '👋';\n```");
+            await composer.press("Enter");
+            await composer.fill("👋 hello");
+            await composer.press("Enter");
+
+            const codeBlock = page.locator(".mx_EventTile_pre_container").first();
+            await expect(codeBlock).toBeVisible();
+
+            const fontSize = (locator: Locator): Promise<string> =>
+                locator.evaluate((node) => window.getComputedStyle(node).fontSize);
+
+            // Inside a code block the emoji must not be any larger than the code around it,
+            // otherwise the line it sits on grows and the line numbers stop lining up
+            expect(await fontSize(codeBlock.locator(".mx_Emoji"))).toEqual(await fontSize(codeBlock.locator("code")));
+
+            // ...but emoji in an ordinary message are still enlarged
+            const message = page.locator(".mx_EventTile_last .mx_EventTile_body");
+            expect(await fontSize(message.locator(".mx_Emoji"))).not.toEqual(await fontSize(message));
+        });
+
         test(
             "should be able to hide an image",
             { tag: "@screenshot" },
@@ -908,11 +941,11 @@ test.describe("Timeline", () => {
 
                 const bot = new Bot(page, homeserver, {});
                 await bot.prepareClient();
-                await app.client.inviteUser(room.roomId, bot.credentials.userId);
+                await app.client.inviteUser(room.roomId, bot.credentials!.userId);
 
                 await sendImage(bot, room.roomId, NEW_AVATAR);
                 await app.timeline.scrollToBottom();
-                const imgTile = page.locator(".mx_MImageBody").first();
+                const imgTile = page.locator(".mx_ImageBody").first();
                 await expect(imgTile).toBeVisible();
                 await imgTile.hover();
                 await page.getByRole("button", { name: "Hide" }).click();
@@ -927,7 +960,7 @@ test.describe("Timeline", () => {
 
             const bot = new Bot(page, homeserver, {});
             await bot.prepareClient();
-            await app.client.inviteUser(room.roomId, bot.credentials.userId);
+            await app.client.inviteUser(room.roomId, bot.credentials!.userId);
 
             const upload = await bot.uploadContent(VIDEO_FILE, { name: "bbb.webm", type: "video/webm" });
             await bot.sendEvent(room.roomId, null, "m.room.message" as EventType, {
@@ -961,7 +994,7 @@ test.describe("Timeline", () => {
                 autoAcceptInvites: false,
             });
             await bot.prepareClient();
-            await app.client.inviteUser(room.roomId, bot.credentials.userId);
+            await app.client.inviteUser(room.roomId, bot.credentials!.userId);
             await bot.joinRoom(room.roomId);
             await bot.sendMessage(room.roomId, messageFromSender);
 
@@ -1091,7 +1124,7 @@ test.describe("Timeline", () => {
                 autoAcceptInvites: false,
             });
             await bot.prepareClient();
-            await app.client.inviteUser(room.roomId, bot.credentials.userId);
+            await app.client.inviteUser(room.roomId, bot.credentials!.userId);
             await bot.joinRoom(room.roomId);
 
             // Make sure the bot joined the room
@@ -1219,7 +1252,7 @@ test.describe("Timeline", () => {
 
                 // Create another room with a long name, invite the bot, and open the room
                 const testRoomId = await app.client.createRoom({ name: LONG_STRING });
-                await app.client.inviteUser(testRoomId, bot.credentials.userId);
+                await app.client.inviteUser(testRoomId, bot.credentials!.userId);
                 await bot.joinRoom(testRoomId);
                 await page.goto(`/#/room/${testRoomId}`);
 
@@ -1319,7 +1352,7 @@ test.describe("Timeline", () => {
 
             await sendImage(app.client, room.roomId, NEW_AVATAR);
             await app.timeline.scrollToBottom();
-            await expect(page.locator(".mx_MImageBody").first()).toBeVisible();
+            await expect(page.locator(".mx_ImageBody").first()).toBeVisible();
 
             // Exclude timestamp and read marker from snapshot
             const screenshotOptions = {
diff --git a/apps/web/playwright/e2e/toasts/analytics-toast.spec.ts b/apps/web/playwright/e2e/toasts/analytics-toast.spec.ts
index d70f2a7575..7af42ff6e2 100644
--- a/apps/web/playwright/e2e/toasts/analytics-toast.spec.ts
+++ b/apps/web/playwright/e2e/toasts/analytics-toast.spec.ts
@@ -6,6 +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 { acceptToast, assertNoToasts, rejectToast } from "@element-hq/element-web-playwright-common";
+
 import { test } from "../../element-web-test";
 
 test.describe("Analytics Toast", () => {
@@ -13,10 +15,10 @@ test.describe("Analytics Toast", () => {
         displayName: "Tod",
     });
 
-    test("should not show an analytics toast if config has nothing about posthog", async ({ user, toasts }) => {
-        await toasts.rejectToast("Verify this device");
-        await toasts.rejectToast("Notifications");
-        await toasts.assertNoToasts();
+    test("should not show an analytics toast if config has nothing about posthog", async ({ user, page }) => {
+        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");
+        await assertNoToasts(page);
     });
 
     test.describe("with posthog enabled", () => {
@@ -29,19 +31,19 @@ test.describe("Analytics Toast", () => {
             },
         });
 
-        test.beforeEach(async ({ user, toasts }) => {
-            await toasts.rejectToast("Verify this device");
-            await toasts.rejectToast("Notifications");
+        test.beforeEach(async ({ user, page }) => {
+            await rejectToast(page, "Verify this device");
+            await rejectToast(page, "Notifications");
         });
 
-        test("should show an analytics toast which can be accepted", async ({ user, toasts }) => {
-            await toasts.acceptToast("Help improve Element");
-            await toasts.assertNoToasts();
+        test("should show an analytics toast which can be accepted", async ({ user, page }) => {
+            await acceptToast(page, "Help improve Element");
+            await assertNoToasts(page);
         });
 
-        test("should show an analytics toast which can be rejected", async ({ user, toasts }) => {
-            await toasts.rejectToast("Help improve Element");
-            await toasts.assertNoToasts();
+        test("should show an analytics toast which can be rejected", async ({ user, page }) => {
+            await rejectToast(page, "Help improve Element");
+            await assertNoToasts(page);
         });
     });
 });
diff --git a/apps/web/playwright/e2e/user-menu/user-menu.spec.ts b/apps/web/playwright/e2e/user-menu/user-menu.spec.ts
index cfc4757c15..7a0c661e2d 100644
--- a/apps/web/playwright/e2e/user-menu/user-menu.spec.ts
+++ b/apps/web/playwright/e2e/user-menu/user-menu.spec.ts
@@ -25,7 +25,7 @@ test.describe("User Menu", () => {
         await page.getByRole("button", { name: "User menu", exact: true }).click();
         const menu = page.getByRole("menu");
 
-        await expect(menu.getByText(user.displayName)).toBeVisible();
+        await expect(menu.getByText(user.displayName!)).toBeVisible();
         await expect(menu.getByText(user.userId)).toBeVisible();
         await expect(menu).toMatchScreenshot("user-menu.png", screenshotOptions(page));
     });
diff --git a/apps/web/playwright/e2e/user-view/user-view.spec.ts b/apps/web/playwright/e2e/user-view/user-view.spec.ts
index e09d8a1593..28799b6796 100644
--- a/apps/web/playwright/e2e/user-view/user-view.spec.ts
+++ b/apps/web/playwright/e2e/user-view/user-view.spec.ts
@@ -15,10 +15,12 @@ test.describe("UserView", () => {
     });
 
     test("should render the user view as expected", { tag: "@screenshot" }, async ({ page, homeserver, user, bot }) => {
-        await page.goto(`/#/user/${bot.credentials.userId}`);
+        await page.goto(`/#/user/${bot.credentials!.userId}`);
 
         const rightPanel = page.locator("#mx_RightPanel");
-        await expect(rightPanel.getByRole("heading", { name: bot.credentials.displayName, exact: true })).toBeVisible();
+        await expect(
+            rightPanel.getByRole("heading", { name: bot.credentials!.displayName, exact: true }),
+        ).toBeVisible();
         await expect(rightPanel).toMatchScreenshot("user-info.png", {
             mask: [page.locator(".mx_UserInfo_profile_mxid")],
             css: `
diff --git a/apps/web/playwright/e2e/utils.ts b/apps/web/playwright/e2e/utils.ts
index 6c30bf1856..3024f56f06 100644
--- a/apps/web/playwright/e2e/utils.ts
+++ b/apps/web/playwright/e2e/utils.ts
@@ -40,7 +40,7 @@ export async function waitForRoom(
     await client.evaluateHandle(
         (matrixClient, { roomId, predicateId }) => {
             return new Promise<Room>((resolve) => {
-                const room = matrixClient.getRoom(roomId);
+                const room = matrixClient.getRoom(roomId)!;
 
                 if ((<any>window)[predicateId](room)) {
                     resolve(room);
diff --git a/apps/web/playwright/e2e/voip/element-call.spec.ts b/apps/web/playwright/e2e/voip/element-call.spec.ts
index 7c69a8a896..9a798773f7 100644
--- a/apps/web/playwright/e2e/voip/element-call.spec.ts
+++ b/apps/web/playwright/e2e/voip/element-call.spec.ts
@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 import { readFile } from "node:fs/promises";
 import { fileURLToPath } from "node:url";
 import { type Page } from "@playwright/test";
+import { closeReleaseAnnouncement, rejectToast } from "@element-hq/element-web-playwright-common";
 
 import type { EventType, Preset } from "matrix-js-sdk/src/matrix";
 import { SettingLevel } from "../../../src/settings/SettingLevel";
@@ -62,7 +63,7 @@ async function sendRTCState(bot: Bot, roomId: string, notification?: "ring" | "n
             },
             "scope": "m.room",
         },
-        `_@${bot.credentials.userId}_OiDFxsZrjz_m.call`,
+        `_@${bot.credentials!.userId}_OiDFxsZrjz_m.call`,
     );
     if (!notification) {
         return;
@@ -101,14 +102,6 @@ test.use({
 
 test.describe("Element Call", () => {
     test.use({
-        config: {
-            element_call: {
-                use_exclusively: false,
-            },
-            features: {
-                feature_group_calls: true,
-            },
-        },
         displayName: "Alice",
         botCreateOpts: {
             autoAcceptInvites: true,
@@ -132,6 +125,11 @@ test.describe("Element Call", () => {
             SettingLevel.DEVICE,
             new URL("/widget.html#", page.url()).toString(),
         );
+
+        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");
+        // Close the release announcement about the new room list sections
+        await closeReleaseAnnouncement(page, "Introducing Sections");
     });
 
     test.describe("Group Chat", () => {
@@ -142,7 +140,7 @@ test.describe("Element Call", () => {
                 await charlie.prepareClient();
                 const roomId = await app.client.createRoom({
                     name: "TestRoom",
-                    invite: [bot.credentials.userId, charlie.credentials.userId],
+                    invite: [bot.credentials!.userId, charlie.credentials!.userId],
                 });
                 await use({ roomId });
             },
@@ -155,9 +153,9 @@ test.describe("Element Call", () => {
             await page.getByRole("menuitem", { name: "Element Call" }).click();
 
             const frameUrlStr = await page.locator("iframe").getAttribute("src");
-            await expect(frameUrlStr).toBeDefined();
+            expect(frameUrlStr).toBeDefined();
             // Ensure we set the correct parameters for ECall.
-            const url = new URL(frameUrlStr);
+            const url = new URL(frameUrlStr!);
             const hash = new URLSearchParams(url.hash.slice(1));
             assertCommonCallParameters(url.searchParams, hash, user, room);
             expect(hash.get("intent")).toEqual("start_call");
@@ -181,8 +179,8 @@ test.describe("Element Call", () => {
             await page.keyboard.up("Shift");
 
             const frameUrlStr = await page.locator("iframe").getAttribute("src");
-            await expect(frameUrlStr).toBeDefined();
-            const url = new URL(frameUrlStr);
+            expect(frameUrlStr).toBeDefined();
+            const url = new URL(frameUrlStr!);
             const hash = new URLSearchParams(url.hash.slice(1));
             assertCommonCallParameters(url.searchParams, hash, user, room);
             expect(hash.get("intent")).toEqual("start_call");
@@ -194,7 +192,7 @@ test.describe("Element Call", () => {
                 await app.viewRoomById(room.roomId);
                 // Allow bob to create a call
                 await expect(page.getByText("Bob and one other were invited and joined")).toBeVisible();
-                await app.client.setPowerLevel(room.roomId, bot.credentials.userId, 50);
+                await app.client.setPowerLevel(room.roomId, bot.credentials!.userId, 50);
                 // Fake a start of a call
                 await sendRTCState(bot, room.roomId, undefined, callType === "voice" ? "audio" : "video");
                 const button = page.getByTestId("join-call-button");
@@ -206,13 +204,28 @@ test.describe("Element Call", () => {
                 // And test joining
                 await button.click();
                 const frameUrlStr = await page.locator("iframe").getAttribute("src");
-                await expect(frameUrlStr).toBeDefined();
-                const url = new URL(frameUrlStr);
+                expect(frameUrlStr).toBeDefined();
+                const url = new URL(frameUrlStr!);
                 const hash = new URLSearchParams(url.hash.slice(1));
                 assertCommonCallParameters(url.searchParams, hash, user, room);
 
-                expect(hash.get("intent")).toEqual("join_existing");
+                const expectedIntent = callType === "voice" ? "join_existing_voice" : "join_existing";
+                expect(hash.get("intent")).toEqual(expectedIntent);
                 expect(hash.get("skipLobby")).toEqual(null);
+
+                // pip layout check
+                switch (callType) {
+                    case "voice": {
+                        const pipContainer = page.getByTestId("widget-pip-container");
+                        await expect(pipContainer).toBeVisible();
+                        break;
+                    }
+                    case "video": {
+                        const pipContainer = page.getByTestId("widget-pip-container");
+                        await expect(pipContainer).not.toBeVisible();
+                        break;
+                    }
+                }
             });
         });
 
@@ -224,7 +237,7 @@ test.describe("Element Call", () => {
                     await app.viewRoomById(room.roomId);
                     // Allow bob to create a call
                     await expect(page.getByText("Bob and one other were invited and joined")).toBeVisible();
-                    await app.client.setPowerLevel(room.roomId, bot.credentials.userId, 50);
+                    await app.client.setPowerLevel(room.roomId, bot.credentials!.userId, 50);
                     // Fake a start of a call
                     await sendRTCState(bot, room.roomId, "notification", "video");
                     const toast = page.locator(".mx_Toast_toast");
@@ -241,8 +254,8 @@ test.describe("Element Call", () => {
                     // And test joining
                     await button.click();
                     const frameUrlStr = await page.locator("iframe").getAttribute("src");
-                    await expect(frameUrlStr).toBeDefined();
-                    const url = new URL(frameUrlStr);
+                    expect(frameUrlStr).toBeDefined();
+                    const url = new URL(frameUrlStr!);
                     const hash = new URLSearchParams(url.hash.slice(1));
                     assertCommonCallParameters(url.searchParams, hash, user, room);
 
@@ -259,7 +272,7 @@ test.describe("Element Call", () => {
                 await app.viewRoomById(room.roomId);
                 // Allow bob to create a call
                 await expect(page.getByText("Bob and one other were invited and joined")).toBeVisible();
-                await app.client.setPowerLevel(room.roomId, bot.credentials.userId, 50);
+                await app.client.setPowerLevel(room.roomId, bot.credentials!.userId, 50);
                 // Fake a start of a call
                 await sendRTCState(bot, room.roomId, "notification", "audio");
                 const toast = page.locator(".mx_Toast_toast");
@@ -270,8 +283,8 @@ test.describe("Element Call", () => {
                 // And test joining
                 await button.click();
                 const frameUrlStr = await page.locator("iframe").getAttribute("src");
-                await expect(frameUrlStr).toBeDefined();
-                const url = new URL(frameUrlStr);
+                expect(frameUrlStr).toBeDefined();
+                const url = new URL(frameUrlStr!);
                 const hash = new URLSearchParams(url.hash.slice(1));
                 assertCommonCallParameters(url.searchParams, hash, user, room);
 
@@ -286,11 +299,11 @@ test.describe("Element Call", () => {
             room: async ({ page, app, user, bot }, use) => {
                 const roomId = await app.client.createRoom({
                     preset: "trusted_private_chat" as Preset.TrustedPrivateChat,
-                    invite: [bot.credentials.userId],
+                    invite: [bot.credentials!.userId],
                 });
                 await bot.awaitRoomMembership(roomId);
                 await app.client.setAccountData("m.direct" as EventType.Direct, {
-                    [bot.credentials.userId]: [roomId],
+                    [bot.credentials!.userId]: [roomId],
                 });
                 await use({ roomId });
             },
@@ -304,8 +317,8 @@ test.describe("Element Call", () => {
             await page.getByRole("menuitem", { name: "Element Call" }).click();
             const frameUrlStr = await page.locator("iframe").getAttribute("src");
 
-            await expect(frameUrlStr).toBeDefined();
-            const url = new URL(frameUrlStr);
+            expect(frameUrlStr).toBeDefined();
+            const url = new URL(frameUrlStr!);
             const hash = new URLSearchParams(url.hash.slice(1));
             assertCommonCallParameters(url.searchParams, hash, user, room);
             expect(hash.get("intent")).toEqual("start_call_dm");
@@ -322,14 +335,30 @@ test.describe("Element Call", () => {
             await page.keyboard.up("Shift");
             const frameUrlStr = await page.locator("iframe").getAttribute("src");
 
-            await expect(frameUrlStr).toBeDefined();
-            const url = new URL(frameUrlStr);
+            expect(frameUrlStr).toBeDefined();
+            const url = new URL(frameUrlStr!);
             const hash = new URLSearchParams(url.hash.slice(1));
             assertCommonCallParameters(url.searchParams, hash, user, room);
             expect(hash.get("intent")).toEqual("start_call_dm");
             expect(hash.get("skipLobby")).toEqual("true");
         });
 
+        test("should start a voice call in PiP", async ({ page, user, room, app }) => {
+            await app.viewRoomById(room.roomId);
+            await expect(page.getByText("Bob joined the room")).toBeVisible();
+
+            await page.getByRole("button", { name: "Voice call" }).click();
+            await page.getByRole("menuitem", { name: "Element Call" }).click();
+
+            const frameUrlStr = await page.locator("iframe").getAttribute("src");
+            expect(frameUrlStr).toBeDefined();
+
+            // The call should be presented in the picture-in-picture container, right in the room we started it
+            // from, rather than taking over the room view.
+            const pipContainer = page.getByTestId("widget-pip-container");
+            await expect(pipContainer).toBeVisible();
+        });
+
         test("should be able to join a call in progress", async ({ page, user, bot, room, app }) => {
             await app.viewRoomById(room.roomId);
             await expect(page.getByText("Bob joined the room")).toBeVisible();
@@ -340,8 +369,8 @@ test.describe("Element Call", () => {
             // And test joining
             await button.click();
             const frameUrlStr = await page.locator("iframe").getAttribute("src");
-            await expect(frameUrlStr).toBeDefined();
-            const url = new URL(frameUrlStr);
+            expect(frameUrlStr).toBeDefined();
+            const url = new URL(frameUrlStr!);
             const hash = new URLSearchParams(url.hash.slice(1));
             assertCommonCallParameters(url.searchParams, hash, user, room);
 
@@ -380,8 +409,8 @@ test.describe("Element Call", () => {
                     // And test joining
                     await button.click();
                     const frameUrlStr = await page.locator("iframe").getAttribute("src");
-                    await expect(frameUrlStr).toBeDefined();
-                    const url = new URL(frameUrlStr);
+                    expect(frameUrlStr).toBeDefined();
+                    const url = new URL(frameUrlStr!);
                     const hash = new URLSearchParams(url.hash.slice(1));
                     assertCommonCallParameters(url.searchParams, hash, user, room);
 
@@ -414,8 +443,8 @@ test.describe("Element Call", () => {
                 // And test joining
                 await button.click();
                 const frameUrlStr = await page.locator("iframe").getAttribute("src");
-                await expect(frameUrlStr).toBeDefined();
-                const url = new URL(frameUrlStr);
+                expect(frameUrlStr).toBeDefined();
+                const url = new URL(frameUrlStr!);
                 const hash = new URLSearchParams(url.hash.slice(1));
                 assertCommonCallParameters(url.searchParams, hash, user, room);
 
@@ -446,9 +475,9 @@ test.describe("Element Call", () => {
             const roomId = new URL(page.url()).hash.slice("#/room/".length);
 
             const frameUrlStr = await page.locator("iframe").getAttribute("src");
-            await expect(frameUrlStr).toBeDefined();
+            expect(frameUrlStr).toBeDefined();
             // Ensure we set the correct parameters for ECall.
-            const url = new URL(frameUrlStr);
+            const url = new URL(frameUrlStr!);
             const hash = new URLSearchParams(url.hash.slice(1));
             assertCommonCallParameters(url.searchParams, hash, user, { roomId });
             expect(hash.get("intent")).toEqual("join_existing");
@@ -465,13 +494,14 @@ test.describe("Element Call", () => {
                 await charlie.prepareClient();
                 const roomId = await app.client.createRoom({
                     name: "TestRoom",
-                    invite: [bot.credentials.userId, charlie.credentials.userId],
+                    invite: [bot.credentials!.userId, charlie.credentials!.userId],
                 });
                 await app.client.createRoom({
                     name: "OtherRoom",
                 });
                 await use({ roomId });
             },
+            lockLeftPanelWidth: false,
         });
 
         async function openAndJoinCall(page: Page, existing = false) {
@@ -484,12 +514,12 @@ test.describe("Element Call", () => {
             const iframe = page.locator("iframe");
             await expect(iframe).toBeVisible();
             const frameUrlStr = await page.locator("iframe").getAttribute("src");
-            const callFrame = page.frame({ url: frameUrlStr });
+            const callFrame = page.frame({ url: frameUrlStr! })!;
             await callFrame.getByRole("button", { name: "Join Call" }).click();
             await expect(callFrame.getByText("In call", { exact: true })).toBeVisible();
 
             // Wait for Element Web to pickup the RTC session and update the room list entry.
-            await expect(await page.getByTestId("notification-decoration")).toBeVisible();
+            await expect(page.getByTestId("notification-decoration")).toBeVisible();
         }
 
         test("should be able to switch rooms and have the call persist", async ({ page, user, room, app }) => {
@@ -529,9 +559,9 @@ test.describe("Element Call", () => {
             await expect(pipContainer).not.toBeVisible();
 
             // Wait for call to stop.
-            await expect(await page.getByTestId("notification-decoration")).not.toBeVisible();
+            await expect(page.getByTestId("notification-decoration")).not.toBeVisible();
             await app.viewRoomById(room.roomId);
-            await expect(await page.getByTestId("join-call-button")).not.toBeVisible();
+            await expect(page.getByTestId("join-call-button")).not.toBeVisible();
 
             // Join the call again.
             await openAndJoinCall(page);
@@ -561,8 +591,8 @@ test.describe("Element Call", () => {
             await expect(pipContainer).not.toBeVisible();
 
             // Wait for call to stop.
-            await expect(await page.getByTestId("notification-decoration")).not.toBeVisible();
-            await expect(await page.getByTestId("join-call-button")).not.toBeVisible();
+            await expect(page.getByTestId("notification-decoration")).not.toBeVisible();
+            await expect(page.getByTestId("join-call-button")).not.toBeVisible();
 
             // Join the call again, but from the other room.
             await openAndJoinCall(page);
@@ -578,7 +608,7 @@ test.describe("Element Call", () => {
         }) => {
             await app.viewRoomById(room.roomId);
             await expect(page.getByText("Bob and one other were invited and joined")).toBeVisible();
-            await app.client.setPowerLevel(room.roomId, bot.credentials.userId, 50);
+            await app.client.setPowerLevel(room.roomId, bot.credentials!.userId, 50);
 
             await sendRTCState(bot, room.roomId);
             await openAndJoinCall(page, true);
@@ -624,7 +654,7 @@ test.describe("Element Call", () => {
                 await charlie.prepareClient();
                 const roomId = await app.client.createRoom({
                     name: "VideoRoom",
-                    invite: [bot.credentials.userId, charlie.credentials.userId],
+                    invite: [bot.credentials!.userId, charlie.credentials!.userId],
                     creation_content: {
                         type: "org.matrix.msc3417.call",
                     },
diff --git a/apps/web/playwright/e2e/voip/pstn.spec.ts b/apps/web/playwright/e2e/voip/pstn.spec.ts
index e4c08b1f42..8ed53d497f 100644
--- a/apps/web/playwright/e2e/voip/pstn.spec.ts
+++ b/apps/web/playwright/e2e/voip/pstn.spec.ts
@@ -5,6 +5,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 { assertNoToasts, rejectToast } from "@element-hq/element-web-playwright-common";
+
 import { test, expect } from "../../element-web-test";
 
 test.describe("PSTN", () => {
@@ -20,10 +22,10 @@ test.describe("PSTN", () => {
         });
     });
 
-    test("should render dialpad as expected", { tag: "@screenshot" }, async ({ page, user, toasts }) => {
-        await toasts.rejectToast("Verify this device");
-        await toasts.rejectToast("Notifications");
-        await toasts.assertNoToasts();
+    test("should render dialpad as expected", { tag: "@screenshot" }, async ({ page, user }) => {
+        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");
+        await assertNoToasts(page);
 
         await expect(page.getByTestId("room-list-search")).toMatchScreenshot("dialpad-trigger.png");
         await page.getByLabel("Open dial pad").click();
diff --git a/apps/web/playwright/e2e/widgets/events.spec.ts b/apps/web/playwright/e2e/widgets/events.spec.ts
index 7553ec4b46..cbb942cfd0 100644
--- a/apps/web/playwright/e2e/widgets/events.spec.ts
+++ b/apps/web/playwright/e2e/widgets/events.spec.ts
@@ -75,7 +75,7 @@ test.describe("Widget Events", () => {
     }) => {
         const roomId = await app.client.createRoom({
             name: ROOM_NAME,
-            invite: [bot.credentials.userId],
+            invite: [bot.credentials!.userId],
         });
 
         // setup widget via state event
diff --git a/apps/web/playwright/e2e/widgets/jitsi.spec.ts b/apps/web/playwright/e2e/widgets/jitsi.spec.ts
index fc269c506b..406d7eac33 100644
--- a/apps/web/playwright/e2e/widgets/jitsi.spec.ts
+++ b/apps/web/playwright/e2e/widgets/jitsi.spec.ts
@@ -30,7 +30,7 @@ test.describe("Jitsi Calls", () => {
     test("should be able to pop out a jitsi widget", async ({ page, app, bot, bot2, context }) => {
         const roomId = await app.client.createRoom({
             name: ROOM_NAME,
-            invite: [bot.credentials.userId, bot2.credentials.userId],
+            invite: [bot.credentials!.userId, bot2.credentials!.userId],
         });
 
         await bot.joinRoom(roomId);
diff --git a/apps/web/playwright/e2e/widgets/layout.spec.ts b/apps/web/playwright/e2e/widgets/layout.spec.ts
index 61332aecb4..d58beb9390 100644
--- a/apps/web/playwright/e2e/widgets/layout.spec.ts
+++ b/apps/web/playwright/e2e/widgets/layout.spec.ts
@@ -76,19 +76,19 @@ test.describe("Widget Layout", () => {
 
     test("manually resize the height of the top container layout", async ({ page }) => {
         const iframe = page.locator('iframe[title="widget"]');
-        expect((await iframe.boundingBox()).height).toBeLessThan(250);
+        expect((await iframe.boundingBox())!.height).toBeLessThan(250);
 
         await page.locator(".mx_AppsDrawer_resizer_container_handle").hover();
         await page.mouse.down();
         await page.mouse.move(0, 550);
         await page.mouse.up();
 
-        expect((await iframe.boundingBox()).height).toBeGreaterThan(400);
+        expect((await iframe.boundingBox())!.height).toBeGreaterThan(400);
     });
 
     test("programmatically resize the height of the top container layout", async ({ page, app }) => {
         const iframe = page.locator('iframe[title="widget"]');
-        expect((await iframe.boundingBox()).height).toBeLessThan(250);
+        expect((await iframe.boundingBox())!.height).toBeLessThan(250);
 
         await app.client.sendStateEvent(
             roomId,
@@ -106,6 +106,6 @@ test.describe("Widget Layout", () => {
             "",
         );
 
-        await expect.poll(async () => (await iframe.boundingBox()).height).toBeGreaterThan(400);
+        await expect.poll(async () => (await iframe.boundingBox())!.height).toBeGreaterThan(400);
     });
 });
diff --git a/apps/web/playwright/e2e/widgets/widget-pip-close.spec.ts b/apps/web/playwright/e2e/widgets/widget-pip-close.spec.ts
index f2b01f5263..17780b81c2 100644
--- a/apps/web/playwright/e2e/widgets/widget-pip-close.spec.ts
+++ b/apps/web/playwright/e2e/widgets/widget-pip-close.spec.ts
@@ -56,7 +56,7 @@ async function waitForRoomWidget(client: Client, widgetId: string, roomId: strin
                     }
                 }
 
-                const room = matrixClient.getRoom(roomId);
+                const room = matrixClient.getRoom(roomId)!;
 
                 const startingWidgetEvents = room.currentState.getStateEvents("im.vector.modular.widgets");
                 if (eventsInIntendedState(startingWidgetEvents)) {
@@ -97,14 +97,14 @@ test.describe("Widget PIP", () => {
         test(`should be closed on ${userRemove}`, async ({ page, app, bot, user }) => {
             const roomId = await app.client.createRoom({
                 name: ROOM_NAME,
-                invite: [bot.credentials.userId],
+                invite: [bot.credentials!.userId],
             });
 
             // sets bot to Admin and user to Moderator
             await app.client.sendStateEvent(roomId, "m.room.power_levels", {
                 users: {
                     [user.userId]: 50,
-                    [bot.credentials.userId]: 100,
+                    [bot.credentials!.userId]: 100,
                 },
             });
 
diff --git a/apps/web/playwright/element-web-test.ts b/apps/web/playwright/element-web-test.ts
index 62e6515f62..d2c4755139 100644
--- a/apps/web/playwright/element-web-test.ts
+++ b/apps/web/playwright/element-web-test.ts
@@ -20,7 +20,6 @@ import {
     type ToMatchScreenshotOptions,
 } from "@element-hq/element-web-playwright-common";
 
-import type { IConfigOptions } from "../src/IConfigOptions";
 import { type Credentials } from "./plugins/homeserver";
 import { ElementAppPage } from "./pages/ElementAppPage";
 import { Crypto } from "./pages/crypto";
@@ -32,11 +31,6 @@ import { type WorkerOptions, type Services, test as base } from "./services";
 // See https://playwright.dev/docs/service-workers-experimental#how-to-enable
 process.env["PW_EXPERIMENTAL_SERVICE_WORKER_NETWORK_EVENTS"] = "1";
 
-declare module "@element-hq/element-web-playwright-common" {
-    // Improve the type for the config fixture based on the real type
-    export interface Config extends Omit<IConfigOptions, "default_server_config"> {}
-}
-
 export interface CredentialsWithDisplayName extends Credentials {
     displayName: string;
 }
@@ -50,8 +44,8 @@ export interface TestFixtures extends BaseTestFixtures {
     app: ElementAppPage;
 
     crypto: Crypto;
-    room?: { roomId: string };
-    uut?: Locator; // Unit Under Test, useful place to refer a prepared locator
+    room: { roomId: string };
+    uut: Locator; // Unit Under Test, useful place to refer a prepared locator
     botCreateOpts: CreateBotOpts;
     bot: Bot;
     webserver: Webserver;
@@ -99,7 +93,6 @@ export const test = base.extend<TestFixtures>({
         await bot.onTestFinished(testInfo);
     },
 
-    // eslint-disable-next-line no-empty-pattern
     webserver: async ({}, use) => {
         const webserver = new Webserver();
         await use(webserver);
@@ -187,7 +180,7 @@ export const expect = baseExpect.extend<Expectations>({
             css += options.css;
         }
 
-        await baseExpect(receiver).toMatchScreenshot(name, {
+        await baseExpect(receiver).toMatchScreenshotDontOverride(name, {
             ...options,
             css,
         });
diff --git a/apps/web/playwright/pages/ElementAppPage.ts b/apps/web/playwright/pages/ElementAppPage.ts
index 41abc8f980..3618f0ffc3 100644
--- a/apps/web/playwright/pages/ElementAppPage.ts
+++ b/apps/web/playwright/pages/ElementAppPage.ts
@@ -8,7 +8,8 @@ Please see LICENSE files in the repository root for full details.
 
 import { type Locator, type Page, expect } from "@playwright/test";
 import { readFile } from "node:fs/promises";
-import { basename } from "node:path";
+import path from "node:path";
+import { rejectToast, rejectToastIfExists } from "@element-hq/element-web-playwright-common";
 
 import { Settings } from "./settings";
 import { Client } from "./client";
@@ -95,36 +96,42 @@ export class ElementAppPage {
      * @param name The exact room name to find and click on/open.
      */
     public async viewRoomByName(name: string): Promise<void> {
-        // We get the room list by test-id which is a listbox and matching title=name
-        return this.page.getByTestId("room-list").locator(`[title="${name}"]`).first().click();
-    }
+        // Expand the left panel if necessary
+        const separator = this.page.getByRole("separator", { name: "Click or drag to expand" });
+        const type = await separator.getAttribute("data-separator-type");
+        if (type === "bar") {
+            await separator.click();
+        }
 
-    /**
-     * Opens the given room on the old room list by name. The room must be visible in the
-     * room list, but the room list may be folded horizontally, and the
-     * room may contain unread messages.
-     *
-     * @param name The exact room name to find and click on/open.
-     */
-    public async viewRoomByNameOnOldRoomList(name: string): Promise<void> {
-        // We look for the room inside the room list, which is a tree called Rooms.
-        //
-        // There are 3 cases:
-        // - the room list is folded:
-        //     then the aria-label on the room tile is the name (with nothing extra)
-        // - the room list is unfolder and the room has messages:
-        //     then the aria-label contains the unread count, but the title of the
-        //     div inside the titleContainer equals the room name
-        // - the room list is unfolded and the room has no messages:
-        //     then the aria-label is the name and so is the title of a div
-        //
-        // So by matching EITHER title=name OR aria-label=name we find this exact
-        // room in all three cases.
-        return this.page
-            .getByRole("tree", { name: "Rooms" })
-            .locator(`[title="${name}"],[aria-label="${name}"]`)
-            .first()
-            .click();
+        // Make sure the room list is actually present before we try closing toasts,
+        // otherwise we may race with page loading
+        await this.page.getByTestId("room-list").waitFor();
+
+        const dismissToasts = async (): Promise<void> => {
+            await rejectToastIfExists(this.page, "Verify this device", { timeout: 50 });
+            const keyStorageToastRejected = await rejectToastIfExists(this.page, "Turn on key storage", {
+                timeout: 50,
+            });
+            if (keyStorageToastRejected) {
+                await this.page.getByRole("button", { name: "Yes, dismiss" }).click();
+            }
+            await rejectToastIfExists(this.page, "Notifications", { timeout: 50 });
+        };
+
+        await dismissToasts();
+
+        // We get the room list by test-id which is a listbox and matching title=name.
+        // Retry, closing toasts each time, as otherwise it can race and the toast can appear after we try to close them
+        const roomTile = this.page.getByTestId("room-list").locator(`[title="${name}"]`).first();
+        for (let attemptsLeft = 10; attemptsLeft > 0; attemptsLeft--) {
+            try {
+                await roomTile.click({ timeout: 500 });
+                return;
+            } catch (e) {
+                if (attemptsLeft === 1) throw e;
+                await dismissToasts();
+            }
+        }
     }
 
     public async viewRoomById(roomId: string): Promise<void> {
@@ -169,8 +176,7 @@ export class ElementAppPage {
     ): ReturnType<Locator["setInputFiles"]> {
         const input = this.page
             .locator(location === "room" ? ".mx_RoomView_body" : ".mx_RightPanel")
-            .getByRole("region", { name: "Message composer" })
-            .locator("input[type='file']");
+            .getByTestId("room-upload-context-input");
         return input.setInputFiles(...params);
     }
 
@@ -191,20 +197,24 @@ export class ElementAppPage {
     /**
      * Drags a "file" into the specified composer and automatically uploads it.
      * @param location Should the drop target the main room or the thread.
-     * @param path The path to the sample file so it can be read.
+     * @param samplePath The path to the sample file so it can be read.
      * @param type The mimetype of the file.
      */
-    public async composerDragAndUploadFiles(location: "room" | "thread", path: string, type: string): Promise<void> {
+    public async composerDragAndUploadFiles(
+        location: "room" | "thread",
+        samplePath: string,
+        type: string,
+    ): Promise<void> {
         // Based on https://github.com/microsoft/playwright/issues/10667#issuecomment-2742123424
         // This read a file, encodes it into base64 and then sends it along to the page to be treated
         // as a DataTransfer (the mechanism for drag and dropped files).
-        const buffer = await readFile(path);
-        const name = basename(path);
+        const buffer = await readFile(samplePath);
+        const name = path.basename(samplePath);
 
         const dataTransfer = await this.page.evaluateHandle(
             async ([buffer, name, type]) => {
                 const dt = new DataTransfer();
-                const file = new File([Uint8Array.fromBase64(buffer)], name, {
+                const file = new File([Uint8Array.fromBase64!(buffer)], name, {
                     type,
                 });
                 dt.items.add(file);
@@ -221,21 +231,25 @@ export class ElementAppPage {
     /**
      * Paste a "file" into the specified locator and automatically uploads it.
      * @param location Should the drop target the main room or the thread.
-     * @param path The path to the sample file so it can be read.
+     * @param samplePath The path to the sample file so it can be read.
      * @param type The mimetype of the file.
      */
-    public async composerDragAndPasteFile(location: "room" | "thread", path: string, type: string): Promise<void> {
+    public async composerDragAndPasteFile(
+        location: "room" | "thread",
+        samplePath: string,
+        type: string,
+    ): Promise<void> {
         // Based on https://github.com/microsoft/playwright/issues/10667#issuecomment-2742123424
         // This read a file, encodes it into base64 and then sends it along to the page to be treated
         // as a DataTransfer (the mechanism for drag and dropped files).
-        const buffer = await readFile(path);
-        const name = basename(path);
+        const buffer = await readFile(samplePath);
+        const name = path.basename(samplePath);
         const composer = this.getComposerField(location === "thread");
 
         await composer.evaluate(
             async (element, [buffer, name, type]) => {
                 const clipboardData = new DataTransfer();
-                const file = new File([Uint8Array.fromBase64(buffer)], name, {
+                const file = new File([Uint8Array.fromBase64!(buffer)], name, {
                     type,
                 });
                 clipboardData.items.add(file);
@@ -355,32 +369,18 @@ export class ElementAppPage {
         }
     }
 
-    async closeToast(title: string, button: string): Promise<void> {
-        await this.page.locator(".mx_Toast_toast", { hasText: title }).getByRole("button", { name: button }).click();
-    }
-
     /**
-     * Dismiss the "Notifications" toast.
-     */
-    public async closeNotificationToast(): Promise<void> {
-        await this.closeToast("Notifications", "Dismiss");
-    }
-
-    /**
-     * Dismiss the "Turn on key storage" toast.
+     * Dismiss the "Turn on key storage" toast and dismiss the confirmation
+     * dialog.
+     *
+     * Note: to dismiss normal toasts, use the {@link rejectToast} function
+     * directly.
      */
     public async closeKeyStorageToast() {
-        await this.closeToast("Turn on key storage", "Dismiss");
+        await rejectToast(this.page, "Turn on key storage");
         await this.page.getByRole("button", { name: "Yes, dismiss" }).click();
     }
 
-    /**
-     * Dismiss the "Verify this device" toast by clicking "Later".
-     */
-    public async closeVerifyToast() {
-        await this.closeToast("Verify this device", "Later");
-    }
-
     /**
      * Scroll an infinite list to the bottom.
      * @param list The element to scroll
@@ -402,4 +402,22 @@ export class ElementAppPage {
             await this.page.mouse.wheel(0, 1000);
         } while (await needsScroll());
     }
+
+    /**
+     * Resize the left panel by a given number of pixels.
+     * @param delta The number of pixels to resize by. Negative value makes the panel smaller.
+     */
+    public async resizeLeftPanel(delta: number): Promise<void> {
+        const separator = this.page.getByRole("separator", { name: "Click or drag to expand" });
+        const boundingRectangle = await separator.boundingBox();
+
+        // Place the cursor in the center of the separator
+        const centerX = boundingRectangle!.x + boundingRectangle!.width / 2;
+        await this.page.mouse.move(centerX, boundingRectangle!.y);
+
+        // Drag the cursor by delta pixels
+        await this.page.mouse.down();
+        await this.page.mouse.move(centerX + delta, boundingRectangle!.y);
+        await this.page.mouse.up();
+    }
 }
diff --git a/apps/web/playwright/pages/Spotlight.ts b/apps/web/playwright/pages/Spotlight.ts
index 5f3c8ef6b9..4b08d6e3bb 100644
--- a/apps/web/playwright/pages/Spotlight.ts
+++ b/apps/web/playwright/pages/Spotlight.ts
@@ -15,7 +15,7 @@ export enum Filter {
 }
 
 export class Spotlight {
-    private root: Locator;
+    private root!: Locator;
 
     constructor(private page: Page) {}
 
diff --git a/apps/web/playwright/pages/bot.ts b/apps/web/playwright/pages/bot.ts
index 0df531020c..1e5a9bb3c9 100644
--- a/apps/web/playwright/pages/bot.ts
+++ b/apps/web/playwright/pages/bot.ts
@@ -63,7 +63,7 @@ type ExtendedMatrixClient = MatrixClient & { __playwright_recovery_key: Generate
 
 export class Bot extends Client {
     public credentials?: CredentialsOptionalAccessToken;
-    private handlePromise: Promise<JSHandle<ExtendedMatrixClient>>;
+    private handlePromise?: Promise<JSHandle<ExtendedMatrixClient>>;
 
     constructor(
         page: Page,
@@ -192,7 +192,7 @@ export class Bot extends Client {
                             type: "m.id.user",
                             user: credentials.userId,
                         },
-                        password: credentials.password,
+                        password: credentials.password ?? undefined,
                     });
 
                     credentials.accessToken = loginResponse.access_token;
@@ -252,7 +252,7 @@ export class Bot extends Client {
         if (this.opts.bootstrapSecretStorage) {
             await clientHandle.evaluate(async (cli, usePassphrase) => {
                 const passphrase = usePassphrase ? "new passphrase" : undefined;
-                const recoveryKey = await cli.getCrypto().createRecoveryKeyFromPassphrase(passphrase);
+                const recoveryKey = await cli.getCrypto()!.createRecoveryKeyFromPassphrase(passphrase);
                 Object.assign(cli, { __playwright_recovery_key: recoveryKey });
 
                 await cli.getCrypto()!.bootstrapSecretStorage({
diff --git a/apps/web/playwright/pages/client.ts b/apps/web/playwright/pages/client.ts
index 39275085f7..d95577c5fd 100644
--- a/apps/web/playwright/pages/client.ts
+++ b/apps/web/playwright/pages/client.ts
@@ -60,7 +60,7 @@ export type PageFunctionOn<On, Arg2, R> = string | ((on: On, arg2: Unboxed<Arg2>
 
 export class Client {
     public network: Network;
-    protected client: JSHandle<MatrixClient>;
+    protected client: JSHandle<MatrixClient> | null = null;
 
     protected getClientHandle(): Promise<JSHandle<MatrixClient>> {
         return this.page.evaluateHandle(() => window.mxMatrixClientPeg.get());
@@ -93,8 +93,8 @@ export class Client {
         arg?: any,
     ): Promise<R>;
     public async evaluate<T>(fn: (client: MatrixClient) => T, arg?: any): Promise<T> {
-        await this.prepareClient();
-        return this.client.evaluate(fn, arg);
+        const client = await this.prepareClient();
+        return client.evaluate(fn, arg);
     }
 
     public evaluateHandle<R, Arg, O extends MatrixClient = MatrixClient>(
@@ -106,8 +106,8 @@ export class Client {
         arg?: any,
     ): Promise<JSHandle<R>>;
     public async evaluateHandle<T>(fn: (client: MatrixClient) => T, arg?: any): Promise<JSHandle<T>> {
-        await this.prepareClient();
-        return this.client.evaluateHandle(fn, arg);
+        const client = await this.prepareClient();
+        return client.evaluateHandle(fn, arg);
     }
 
     /**
@@ -202,7 +202,7 @@ export class Client {
     /**
      * Create a room with given options.
      * @param options the options to apply when creating the room
-     * @return the ID of the newly created room
+     * @returns the ID of the newly created room
      */
     public async createRoom(options: ICreateRoomOpts): Promise<string> {
         const client = await this.prepareClient();
@@ -217,7 +217,7 @@ export class Client {
     /**
      * Create a space with given options.
      * @param options the options to apply when creating the space
-     * @return the ID of the newly created space (room)
+     * @returns the ID of the newly created space (room)
      */
     public async createSpace(options: ICreateRoomOpts): Promise<string> {
         return this.createRoom({
@@ -248,7 +248,7 @@ export class Client {
         const client = await this.prepareClient();
         return client.evaluate(
             async (client, { roomName }) => {
-                const room = client.getRooms().find((r) => r.getDefaultRoomName(client.getUserId()) === roomName);
+                const room = client.getRooms().find((r) => r.getDefaultRoomName(client.getSafeUserId()) === roomName);
                 if (room) {
                     await client.joinRoom(room.roomId);
                     return room.roomId;
@@ -268,7 +268,7 @@ export class Client {
         await this.page.waitForResponse(async (response) => {
             const accessToken = await this.evaluate((client) => client.getAccessToken());
             const authHeader = await response.request().headerValue("authorization");
-            return response.url().includes("/sync") && authHeader.includes(accessToken);
+            return response.url().includes("/sync") && !!accessToken && !!authHeader?.includes(accessToken);
         });
     }
 
@@ -392,11 +392,11 @@ export class Client {
         event: JSHandle<MatrixEvent>,
         receiptType?: ReceiptType,
         unthreaded?: boolean,
-    ): Promise<EmptyObject> {
+    ): Promise<void> {
         const client = await this.prepareClient();
         return client.evaluate(
-            (client, { event, receiptType, unthreaded }) => {
-                return client.sendReadReceipt(event, receiptType, unthreaded);
+            async (client, { event, receiptType, unthreaded }) => {
+                await client.sendReadReceipt(event, receiptType, unthreaded);
             },
             { event, receiptType, unthreaded },
         );
@@ -412,8 +412,8 @@ export class Client {
     /**
      * @param {string} name
      * @param {module:client.callback} callback Optional.
-     * @return {Promise} Resolves: {} an empty object.
-     * @return {module:http-api.MatrixError} Rejects: with an error response.
+     * @returns {Promise} Resolves: {} an empty object.
+     * @returns {module:http-api.MatrixError} Rejects: with an error response.
      */
     public async setDisplayName(name: string): Promise<EmptyObject> {
         const client = await this.prepareClient();
@@ -423,8 +423,8 @@ export class Client {
     /**
      * @param {string} url
      * @param {module:client.callback} callback Optional.
-     * @return {Promise} Resolves: {} an empty object.
-     * @return {module:http-api.MatrixError} Rejects: with an error response.
+     * @returns {Promise} Resolves: {} an empty object.
+     * @returns {module:http-api.MatrixError} Rejects: with an error response.
      */
     public async setAvatarUrl(url: string): Promise<EmptyObject> {
         const client = await this.prepareClient();
@@ -555,7 +555,7 @@ export function bootstrapCrossSigningForClient(
 ) {
     return client.evaluate(
         async (client, { credentials, resetKeys }) => {
-            await client.getCrypto().bootstrapCrossSigning({
+            await client.getCrypto()!.bootstrapCrossSigning({
                 authUploadDeviceSigningKeys: async (func) => {
                     await func({
                         type: "m.login.password",
diff --git a/apps/web/playwright/pages/crypto.ts b/apps/web/playwright/pages/crypto.ts
index c882040987..b0737541eb 100644
--- a/apps/web/playwright/pages/crypto.ts
+++ b/apps/web/playwright/pages/crypto.ts
@@ -22,8 +22,8 @@ export class Crypto {
      */
     public async assertDeviceIsCrossSigned(): Promise<void> {
         const { userId, deviceId, accessToken } = await this.page.evaluate(() => ({
-            userId: window.mxMatrixClientPeg.get().getUserId(),
-            deviceId: window.mxMatrixClientPeg.get().getDeviceId(),
+            userId: window.mxMatrixClientPeg.get().getSafeUserId(),
+            deviceId: window.mxMatrixClientPeg.get().getDeviceId()!,
             accessToken: window.mxMatrixClientPeg.get().getAccessToken(),
         }));
 
diff --git a/apps/web/playwright/pages/settings.ts b/apps/web/playwright/pages/settings.ts
index c871bbeeaf..5b836efa47 100644
--- a/apps/web/playwright/pages/settings.ts
+++ b/apps/web/playwright/pages/settings.ts
@@ -41,7 +41,7 @@ export class Settings {
      * null.
      * @param {SettingLevel} level The level to change the value at.
      * @param {*} value The new value of the setting, may be null.
-     * @return {Promise} Resolves when the setting has been changed.
+     * @returns {Promise} Resolves when the setting has been changed.
      */
     public async setValue(settingName: string, roomId: string | null, level: SettingLevel, value: any): Promise<void> {
         return this.page.evaluate<
diff --git a/apps/web/playwright/pages/timeline.ts b/apps/web/playwright/pages/timeline.ts
index ca9965a63e..0aa52bc66a 100644
--- a/apps/web/playwright/pages/timeline.ts
+++ b/apps/web/playwright/pages/timeline.ts
@@ -28,9 +28,9 @@ export class Timeline {
     }
 
     // Find the event tile matching the given sender & body
-    async findEventTile(sender: string, body: string): Promise<Locator> {
+    async findEventTile(sender: string, body: string): Promise<Locator | undefined> {
         const locators = await this.page.locator(".mx_RoomView_MessageList .mx_EventTile").all();
-        let latestSender: string;
+        let latestSender: string | undefined;
         for (const locator of locators) {
             const displayName = locator.locator(".mx_DisambiguatedProfile_displayName");
             if (await displayName.count()) {
diff --git a/apps/web/playwright/plugins/homeserver/synapse/consentHomeserver.ts b/apps/web/playwright/plugins/homeserver/synapse/consentHomeserver.ts
index 97bfd60d4e..8ef2681bfe 100644
--- a/apps/web/playwright/plugins/homeserver/synapse/consentHomeserver.ts
+++ b/apps/web/playwright/plugins/homeserver/synapse/consentHomeserver.ts
@@ -7,18 +7,18 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type SynapseContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers/index.js";
-import { dirname, join } from "node:path";
+import path from "node:path";
 import { fileURLToPath } from "node:url";
 
 import { type Fixtures } from "../../../element-web-test.ts";
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 export const consentHomeserver: Fixtures = {
     _homeserver: [
         async ({ _homeserver: container, mailpit }, use) => {
             (container as SynapseContainer)
-                .withCopyDirectoriesToContainer([{ source: join(__dirname, "res"), target: "/data/res" }])
+                .withCopyDirectoriesToContainer([{ source: path.join(__dirname, "res"), target: "/data/res" }])
                 .withSmtpServer(mailpit)
                 .withConfig({
                     user_consent: {
diff --git a/apps/web/playwright/plugins/homeserver/synapse/legacyOAuthHomeserver.ts b/apps/web/playwright/plugins/homeserver/synapse/legacyOAuthHomeserver.ts
index b6ef7243fd..f792d6d8f5 100644
--- a/apps/web/playwright/plugins/homeserver/synapse/legacyOAuthHomeserver.ts
+++ b/apps/web/playwright/plugins/homeserver/synapse/legacyOAuthHomeserver.ts
@@ -13,7 +13,6 @@ import { type Fixtures } from "../../../element-web-test.ts";
 
 export const legacyOAuthHomeserver: Fixtures = {
     oAuthServer: [
-        // eslint-disable-next-line no-empty-pattern
         async ({}, use) => {
             const server = new OAuthServer();
             await use(server);
@@ -23,12 +22,12 @@ export const legacyOAuthHomeserver: Fixtures = {
     ],
     context: async ({ homeserverType, context, oAuthServer }, use, testInfo) => {
         testInfo.skip(homeserverType !== "synapse", "does not yet support OIDC");
-        oAuthServer.onTestStarted(testInfo);
+        oAuthServer!.onTestStarted(testInfo);
         await use(context);
     },
     _homeserver: [
         async ({ oAuthServer, _homeserver: homeserver }, use) => {
-            const port = oAuthServer.start();
+            const port = oAuthServer!.start();
             await TestContainers.exposeHostPorts(port);
             homeserver.withConfig({
                 oidc_providers: [
diff --git a/apps/web/playwright/plugins/oauth_server/index.ts b/apps/web/playwright/plugins/oauth_server/index.ts
index 16aad2f027..02f3cdfc9a 100644
--- a/apps/web/playwright/plugins/oauth_server/index.ts
+++ b/apps/web/playwright/plugins/oauth_server/index.ts
@@ -6,15 +6,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import http from "http";
+import http from "node:http";
 import express from "express";
-import { type AddressInfo } from "net";
+import { type AddressInfo } from "node:net";
 import { type TestInfo } from "@playwright/test";
 import { randB64Bytes } from "@element-hq/element-web-playwright-common/lib/utils/rand.js";
-import { dirname } from "node:path";
+import path from "node:path";
 import { fileURLToPath } from "node:url";
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 export class OAuthServer {
     private server?: http.Server;
@@ -69,8 +69,8 @@ export class OAuthServer {
 
     public stop(): void {
         console.log("Stopping OAuth server");
-        const address = this.server.address() as AddressInfo;
-        this.server.close();
+        const address = this.server!.address() as AddressInfo;
+        this.server!.close();
         console.log(`Stopped OAuth server at ${address.address}:${address.port}`);
     }
 }
diff --git a/apps/web/playwright/sample-files/example-module.js b/apps/web/playwright/sample-files/example-module.js
index 561dea5fd3..57f3c64ad2 100644
--- a/apps/web/playwright/sample-files/example-module.js
+++ b/apps/web/playwright/sample-files/example-module.js
@@ -19,6 +19,7 @@ export default class ExampleModule {
     }
     async load() {
         const brand = this.api.config.get("brand");
+        // oxlint-disable-next-line no-alert
         alert(this.api.i18n.translate("key", { brand }));
     }
 }
diff --git a/apps/web/playwright/sample-files/index.ts b/apps/web/playwright/sample-files/index.ts
index 786e5be6a4..5d3475da8a 100644
--- a/apps/web/playwright/sample-files/index.ts
+++ b/apps/web/playwright/sample-files/index.ts
@@ -5,28 +5,25 @@ 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 { dirname, join } from "node:path";
+import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { readFile } from "node:fs/promises";
 import { readFileSync } from "node:fs";
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 export function getSampleFilePath(file: string): string {
-    return join(__dirname, file);
+    return path.join(__dirname, file);
 }
 
-export function readSampleFile(file: string, encoding: null): Promise<NonSharedBuffer>;
+export function readSampleFile(file: string, encoding: null): Promise<Buffer>;
 export function readSampleFile(file: string, encoding?: BufferEncoding): Promise<string>;
-export function readSampleFile(
-    file: string,
-    encoding: BufferEncoding | null = "utf-8",
-): Promise<NonSharedBuffer | string> {
+export function readSampleFile(file: string, encoding: BufferEncoding | null = "utf-8"): Promise<Buffer | string> {
     return readFile(getSampleFilePath(file), encoding);
 }
 
-export function readSampleFileSync(file: string, encoding: null): NonSharedBuffer;
+export function readSampleFileSync(file: string, encoding: null): Buffer;
 export function readSampleFileSync(file: string, encoding?: BufferEncoding): string;
-export function readSampleFileSync(file: string, encoding: BufferEncoding | null = "utf-8"): NonSharedBuffer | string {
+export function readSampleFileSync(file: string, encoding: BufferEncoding | null = "utf-8"): Buffer | string {
     return readFileSync(getSampleFilePath(file), encoding);
 }
diff --git a/apps/web/playwright/sample-files/settings-module.js b/apps/web/playwright/sample-files/settings-module.js
new file mode 100644
index 0000000000..950be72a8f
--- /dev/null
+++ b/apps/web/playwright/sample-files/settings-module.js
@@ -0,0 +1,17 @@
+/*
+Copyright 2026 Element Creations 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.
+*/
+
+export default class SettingsModule {
+    static moduleApiVersion = "^*";
+    constructor(api) {
+        this.api = api;
+    }
+    async load() {
+        // oxlint-disable-next-line no-alert
+        alert(this.api.settings.getValue("language"));
+    }
+}
diff --git a/apps/web/playwright/sample-files/upload-module.js b/apps/web/playwright/sample-files/upload-module.js
new file mode 100644
index 0000000000..11edfbca95
--- /dev/null
+++ b/apps/web/playwright/sample-files/upload-module.js
@@ -0,0 +1,35 @@
+/*
+Copyright 2026 Element Creations 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 = "^*";
+    /**
+     * Basic module for testing.
+     * @param {Api} api API object
+     */
+    constructor(api) {
+        this.api = api;
+    }
+    async load() {
+        this.api.composer.addFileUploadOption({
+            type: "org.example.uploader",
+            label: "Example uploader",
+            onSelected: (_roomId, view) => {
+                this.api.composer.openFileUploadConfirmation(
+                    [new File(["test"], "testfile.txt", { type: "text/plain" })],
+                    view,
+                );
+            },
+        });
+    }
+}
diff --git a/apps/web/playwright/snapshots/app-loading/guest-registration.spec.ts/guest-menu-linux.png b/apps/web/playwright/snapshots/app-loading/guest-registration.spec.ts/guest-menu-linux.png
index 441dfefba3..7226cb064f 100644
Binary files a/apps/web/playwright/snapshots/app-loading/guest-registration.spec.ts/guest-menu-linux.png and b/apps/web/playwright/snapshots/app-loading/guest-registration.spec.ts/guest-menu-linux.png differ
diff --git a/apps/web/playwright/snapshots/app-loading/stored-credentials.spec.ts/home-thin-viewport-linux.png b/apps/web/playwright/snapshots/app-loading/stored-credentials.spec.ts/home-thin-viewport-linux.png
index 737a6dbb5b..5681da209e 100644
Binary files a/apps/web/playwright/snapshots/app-loading/stored-credentials.spec.ts/home-thin-viewport-linux.png and b/apps/web/playwright/snapshots/app-loading/stored-credentials.spec.ts/home-thin-viewport-linux.png differ
diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--bubble-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--bubble-layout-linux.png
index bd5fb364cd..2cfaa6aed6 100644
Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--bubble-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--bubble-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png
index f4b1409866..f5b3a6bf32 100644
Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png
index 2643ccee95..b59b94fb0b 100644
Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png
index b0dc89eae1..a58c7e1e51 100644
Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--group-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--group-layout-linux.png
index c8cf82cf97..583f552050 100644
Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--group-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--group-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--irc-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--irc-layout-linux.png
index 623e2adc3a..157a630063 100644
Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--irc-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--irc-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--bubble-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--bubble-layout-linux.png
index 5f9eb946bd..80c4e760c5 100644
Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--bubble-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--bubble-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--group-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--group-layout-linux.png
index e61bc8fa07..c89aa8590f 100644
Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--group-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--group-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--irc-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--irc-layout-linux.png
index 074a125b5d..5b409af725 100644
Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--irc-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--irc-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--bubble-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--bubble-layout-linux.png
index 6ec8408d93..d86162048e 100644
Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--bubble-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--bubble-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png
index 6ac9b12de2..ba07d72ea6 100644
Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png
index bc75317841..a5ec39f7a7 100644
Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png
index 99aa065e9d..52e93c2604 100644
Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png
index 5e844ede99..2c8f30ca5b 100644
Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png
index ada0ca1f08..1acbafd77b 100644
Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png
index db942937ee..6233260baa 100644
Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png
index 1a2fafea2c..93ff7541cf 100644
Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png
index bcf1e37566..3481cc3934 100644
Binary files a/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png and b/apps/web/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/chat-export/html-export.spec.ts/html-export-linux.png b/apps/web/playwright/snapshots/chat-export/html-export.spec.ts/html-export-linux.png
index 738c7db132..b63a4fa634 100644
Binary files a/apps/web/playwright/snapshots/chat-export/html-export.spec.ts/html-export-linux.png and b/apps/web/playwright/snapshots/chat-export/html-export.spec.ts/html-export-linux.png differ
diff --git a/apps/web/playwright/snapshots/composer/CIDER.spec.ts/emoji-autocomplete-linux.png b/apps/web/playwright/snapshots/composer/CIDER.spec.ts/emoji-autocomplete-linux.png
index 4ab37fc895..e4b06f18fa 100644
Binary files a/apps/web/playwright/snapshots/composer/CIDER.spec.ts/emoji-autocomplete-linux.png and b/apps/web/playwright/snapshots/composer/CIDER.spec.ts/emoji-autocomplete-linux.png differ
diff --git a/apps/web/playwright/snapshots/composer/CIDER.spec.ts/emoji-picker-linux.png b/apps/web/playwright/snapshots/composer/CIDER.spec.ts/emoji-picker-linux.png
index 4adb4ad665..e3370132a2 100644
Binary files a/apps/web/playwright/snapshots/composer/CIDER.spec.ts/emoji-picker-linux.png and b/apps/web/playwright/snapshots/composer/CIDER.spec.ts/emoji-picker-linux.png differ
diff --git a/apps/web/playwright/snapshots/composer/CIDER.spec.ts/emoji-picker-small-linux.png b/apps/web/playwright/snapshots/composer/CIDER.spec.ts/emoji-picker-small-linux.png
index 56824baa75..f7d56595a6 100644
Binary files a/apps/web/playwright/snapshots/composer/CIDER.spec.ts/emoji-picker-small-linux.png and b/apps/web/playwright/snapshots/composer/CIDER.spec.ts/emoji-picker-small-linux.png differ
diff --git a/apps/web/playwright/snapshots/composer/CIDER.spec.ts/mention-linux.png b/apps/web/playwright/snapshots/composer/CIDER.spec.ts/mention-linux.png
index b3dff463b3..de157ac749 100644
Binary files a/apps/web/playwright/snapshots/composer/CIDER.spec.ts/mention-linux.png and b/apps/web/playwright/snapshots/composer/CIDER.spec.ts/mention-linux.png differ
diff --git a/apps/web/playwright/snapshots/composer/CIDER.spec.ts/narrow-linux.png b/apps/web/playwright/snapshots/composer/CIDER.spec.ts/narrow-linux.png
new file mode 100644
index 0000000000..7fece3ebe2
Binary files /dev/null and b/apps/web/playwright/snapshots/composer/CIDER.spec.ts/narrow-linux.png differ
diff --git a/apps/web/playwright/snapshots/composer/RTE.spec.ts/narrow-linux.png b/apps/web/playwright/snapshots/composer/RTE.spec.ts/narrow-linux.png
new file mode 100644
index 0000000000..5beeb1f861
Binary files /dev/null and b/apps/web/playwright/snapshots/composer/RTE.spec.ts/narrow-linux.png differ
diff --git a/apps/web/playwright/snapshots/crypto/decryption-failure-messages.spec.ts/history-not-available-linux.png b/apps/web/playwright/snapshots/crypto/decryption-failure-messages.spec.ts/history-not-available-linux.png
index 9fc790e4c4..a133157d0e 100644
Binary files a/apps/web/playwright/snapshots/crypto/decryption-failure-messages.spec.ts/history-not-available-linux.png and b/apps/web/playwright/snapshots/crypto/decryption-failure-messages.spec.ts/history-not-available-linux.png differ
diff --git a/apps/web/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png b/apps/web/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png
index adea2eac4e..6e85cdbe37 100644
Binary files a/apps/web/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png and b/apps/web/playwright/snapshots/crypto/history-sharing.spec.ts/shared-history-invite-accepted-linux.png differ
diff --git a/apps/web/playwright/snapshots/crypto/toasts.spec.ts/key-storage-out-of-sync-toast-linux.png b/apps/web/playwright/snapshots/crypto/toasts.spec.ts/key-storage-out-of-sync-toast-linux.png
index 559de9ab32..f2b0d4c12f 100644
Binary files a/apps/web/playwright/snapshots/crypto/toasts.spec.ts/key-storage-out-of-sync-toast-linux.png and b/apps/web/playwright/snapshots/crypto/toasts.spec.ts/key-storage-out-of-sync-toast-linux.png differ
diff --git a/apps/web/playwright/snapshots/crypto/toasts.spec.ts/verify-this-device-linux.png b/apps/web/playwright/snapshots/crypto/toasts.spec.ts/verify-this-device-linux.png
index 8838386ac3..476df6add3 100644
Binary files a/apps/web/playwright/snapshots/crypto/toasts.spec.ts/verify-this-device-linux.png and b/apps/web/playwright/snapshots/crypto/toasts.spec.ts/verify-this-device-linux.png differ
diff --git a/apps/web/playwright/snapshots/devtools/devtools.spec.ts/devtools-dialog-linux.png b/apps/web/playwright/snapshots/devtools/devtools.spec.ts/devtools-dialog-linux.png
index ba0d783961..c63dda06ce 100644
Binary files a/apps/web/playwright/snapshots/devtools/devtools.spec.ts/devtools-dialog-linux.png and b/apps/web/playwright/snapshots/devtools/devtools.spec.ts/devtools-dialog-linux.png differ
diff --git a/apps/web/playwright/snapshots/devtools/upgraderoom.spec.ts/upgrade-room-linux.png b/apps/web/playwright/snapshots/devtools/upgraderoom.spec.ts/upgrade-room-linux.png
index e4f9bf4b13..2ef33d986d 100644
Binary files a/apps/web/playwright/snapshots/devtools/upgraderoom.spec.ts/upgrade-room-linux.png and b/apps/web/playwright/snapshots/devtools/upgraderoom.spec.ts/upgrade-room-linux.png differ
diff --git a/apps/web/playwright/snapshots/feedback/rageshakes.spec.ts/rageshake-locally-linux.png b/apps/web/playwright/snapshots/feedback/rageshakes.spec.ts/rageshake-locally-linux.png
index c6a06a5035..cfb00e09d2 100644
Binary files a/apps/web/playwright/snapshots/feedback/rageshakes.spec.ts/rageshake-locally-linux.png and b/apps/web/playwright/snapshots/feedback/rageshakes.spec.ts/rageshake-locally-linux.png differ
diff --git a/apps/web/playwright/snapshots/feedback/rageshakes.spec.ts/rageshake-via-url-linux.png b/apps/web/playwright/snapshots/feedback/rageshakes.spec.ts/rageshake-via-url-linux.png
index 01a70ee5c4..8fc89b95e7 100644
Binary files a/apps/web/playwright/snapshots/feedback/rageshakes.spec.ts/rageshake-via-url-linux.png and b/apps/web/playwright/snapshots/feedback/rageshakes.spec.ts/rageshake-via-url-linux.png differ
diff --git a/apps/web/playwright/snapshots/invite/decline-and-block-invite-dialog.spec.ts/decline-and-block-invite-empty-linux.png b/apps/web/playwright/snapshots/invite/decline-and-block-invite-dialog.spec.ts/decline-and-block-invite-empty-linux.png
index cb3f9f8618..26695de1fc 100644
Binary files a/apps/web/playwright/snapshots/invite/decline-and-block-invite-dialog.spec.ts/decline-and-block-invite-empty-linux.png and b/apps/web/playwright/snapshots/invite/decline-and-block-invite-dialog.spec.ts/decline-and-block-invite-empty-linux.png differ
diff --git a/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png b/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png
index 86154ad35d..33815f6fe0 100644
Binary files a/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png and b/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png differ
diff --git a/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png b/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png
index e63333c1e9..3d9a23d2db 100644
Binary files a/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png and b/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png differ
diff --git a/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/send-your-first-message-view-linux.png b/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/send-your-first-message-view-linux.png
index 7e795251a8..f03224ab84 100644
Binary files a/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/send-your-first-message-view-linux.png and b/apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/send-your-first-message-view-linux.png differ
diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-collapse.spec.ts/room-list-collapse-default-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-collapse.spec.ts/room-list-collapse-default-linux.png
index 0c96750a50..9dcab305da 100644
Binary files a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-collapse.spec.ts/room-list-collapse-default-linux.png and b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-collapse.spec.ts/room-list-collapse-default-linux.png differ
diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-collapse.spec.ts/room-list-collapse-fully-collapsed-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-collapse.spec.ts/room-list-collapse-fully-collapsed-linux.png
index 288db67450..ed983e2061 100644
Binary files a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-collapse.spec.ts/room-list-collapse-fully-collapsed-linux.png and b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-collapse.spec.ts/room-list-collapse-fully-collapsed-linux.png differ
diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-custom-sections.spec.ts/room-list-sections-chat-moved-toast-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-custom-sections.spec.ts/room-list-sections-chat-moved-toast-linux.png
index 4da4571cbc..816bb51d1a 100644
Binary files a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-custom-sections.spec.ts/room-list-sections-chat-moved-toast-linux.png and b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-custom-sections.spec.ts/room-list-sections-chat-moved-toast-linux.png differ
diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Favourite-empty-room-list-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Favourite-empty-room-list-linux.png
deleted file mode 100644
index e46fd5339b..0000000000
Binary files a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Favourite-empty-room-list-linux.png and /dev/null differ
diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/collapsed-primary-filters-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/collapsed-primary-filters-linux.png
index 43c984a6ad..bcf5879eb1 100644
Binary files a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/collapsed-primary-filters-linux.png and b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/collapsed-primary-filters-linux.png differ
diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/expanded-primary-filters-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/expanded-primary-filters-linux.png
index e9dd085d4f..c6b620a13c 100644
Binary files a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/expanded-primary-filters-linux.png and b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/expanded-primary-filters-linux.png differ
diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/room-panel-empty-room-list-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/room-panel-empty-room-list-linux.png
index 124cdc674d..0720900e7d 100644
Binary files a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/room-panel-empty-room-list-linux.png and b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/room-panel-empty-room-list-linux.png differ
diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-primary-filters-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-primary-filters-linux.png
index af908ec7d1..505e45eee9 100644
Binary files a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-primary-filters-linux.png and b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unread-primary-filters-linux.png differ
diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unselected-primary-filters-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unselected-primary-filters-linux.png
index 43c984a6ad..7a1468c7ee 100644
Binary files a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unselected-primary-filters-linux.png and b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/unselected-primary-filters-linux.png differ
diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-header-compose-menu-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-header-compose-menu-linux.png
index 202a83c23a..971d923b91 100644
Binary files a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-header-compose-menu-linux.png and b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-header-compose-menu-linux.png differ
diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-header-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-header-linux.png
index 6dc877db96..f279817765 100644
Binary files a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-header-linux.png and b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-header-linux.png differ
diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-space-header-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-space-header-linux.png
index 294ba408dd..038ca65a1e 100644
Binary files a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-space-header-linux.png and b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-header.spec.ts/room-list-space-header-linux.png differ
diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-linux.png
index f19a6cb0c4..7f75b8e18c 100644
Binary files a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-linux.png and b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-linux.png differ
diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-smallscreen-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-smallscreen-linux.png
index ef53f1d6fb..ca488e79d2 100644
Binary files a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-smallscreen-linux.png and b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-panel.spec.ts/room-list-panel-smallscreen-linux.png differ
diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-sections.spec.ts/room-list-section-header-notification-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-sections.spec.ts/room-list-section-header-notification-linux.png
new file mode 100644
index 0000000000..dda3fd97bc
Binary files /dev/null and b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-sections.spec.ts/room-list-section-header-notification-linux.png differ
diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-sections.spec.ts/room-list-sections-collapsed-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-sections.spec.ts/room-list-sections-collapsed-linux.png
index 1f5246ceaf..5896c11bee 100644
Binary files a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-sections.spec.ts/room-list-sections-collapsed-linux.png and b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-sections.spec.ts/room-list-sections-collapsed-linux.png differ
diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-sections.spec.ts/room-list-sections-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-sections.spec.ts/room-list-sections-linux.png
index 28f00a9614..d4b1cbb7c6 100644
Binary files a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-sections.spec.ts/room-list-sections-linux.png and b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-sections.spec.ts/room-list-sections-linux.png differ
diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-low-priority-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-low-priority-linux.png
index 881eac278b..0335aab089 100644
Binary files a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-low-priority-linux.png and b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-low-priority-linux.png differ
diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png
index 89cf0d7f64..a483b2d665 100644
Binary files a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png and b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-more-options-linux.png differ
diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png
index d0025d1fed..72295a8357 100644
Binary files a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png and b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-linux.png differ
diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png
index 74b18c088b..826d1fc0c7 100644
Binary files a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png and b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-open-notification-options-selection-linux.png differ
diff --git a/apps/web/playwright/snapshots/links/permalinks.spec.ts/permalink-rendering-linux.png b/apps/web/playwright/snapshots/links/permalinks.spec.ts/permalink-rendering-linux.png
index eccc4610d3..d8f93f412e 100644
Binary files a/apps/web/playwright/snapshots/links/permalinks.spec.ts/permalink-rendering-linux.png and b/apps/web/playwright/snapshots/links/permalinks.spec.ts/permalink-rendering-linux.png differ
diff --git a/apps/web/playwright/snapshots/location/location.spec.ts/location-live-share-dialog-linux.png b/apps/web/playwright/snapshots/location/location.spec.ts/location-live-share-dialog-linux.png
index 13ba504919..3cac48d7b5 100644
Binary files a/apps/web/playwright/snapshots/location/location.spec.ts/location-live-share-dialog-linux.png and b/apps/web/playwright/snapshots/location/location.spec.ts/location-live-share-dialog-linux.png differ
diff --git a/apps/web/playwright/snapshots/messages/messages.spec.ts/basic-message-ltr-ltrdisplayname-linux.png b/apps/web/playwright/snapshots/messages/messages.spec.ts/basic-message-ltr-ltrdisplayname-linux.png
index e2f70cd530..2410358e9e 100644
Binary files a/apps/web/playwright/snapshots/messages/messages.spec.ts/basic-message-ltr-ltrdisplayname-linux.png and b/apps/web/playwright/snapshots/messages/messages.spec.ts/basic-message-ltr-ltrdisplayname-linux.png differ
diff --git a/apps/web/playwright/snapshots/messages/messages.spec.ts/basic-message-ltr-rtldisplayname-linux.png b/apps/web/playwright/snapshots/messages/messages.spec.ts/basic-message-ltr-rtldisplayname-linux.png
index beee99852b..8b2feca8c5 100644
Binary files a/apps/web/playwright/snapshots/messages/messages.spec.ts/basic-message-ltr-rtldisplayname-linux.png and b/apps/web/playwright/snapshots/messages/messages.spec.ts/basic-message-ltr-rtldisplayname-linux.png differ
diff --git a/apps/web/playwright/snapshots/messages/messages.spec.ts/basic-message-rtl-ltrdisplayname-linux.png b/apps/web/playwright/snapshots/messages/messages.spec.ts/basic-message-rtl-ltrdisplayname-linux.png
index 73c821f513..65c73f19d9 100644
Binary files a/apps/web/playwright/snapshots/messages/messages.spec.ts/basic-message-rtl-ltrdisplayname-linux.png and b/apps/web/playwright/snapshots/messages/messages.spec.ts/basic-message-rtl-ltrdisplayname-linux.png differ
diff --git a/apps/web/playwright/snapshots/messages/messages.spec.ts/basic-message-rtl-rtldisplayname-linux.png b/apps/web/playwright/snapshots/messages/messages.spec.ts/basic-message-rtl-rtldisplayname-linux.png
index 934afa3429..a26108ac62 100644
Binary files a/apps/web/playwright/snapshots/messages/messages.spec.ts/basic-message-rtl-rtldisplayname-linux.png and b/apps/web/playwright/snapshots/messages/messages.spec.ts/basic-message-rtl-rtldisplayname-linux.png differ
diff --git a/apps/web/playwright/snapshots/messages/messages.spec.ts/edited-message-ltr-ltrdisplayname-linux.png b/apps/web/playwright/snapshots/messages/messages.spec.ts/edited-message-ltr-ltrdisplayname-linux.png
index cf42921ba6..358b4c3612 100644
Binary files a/apps/web/playwright/snapshots/messages/messages.spec.ts/edited-message-ltr-ltrdisplayname-linux.png and b/apps/web/playwright/snapshots/messages/messages.spec.ts/edited-message-ltr-ltrdisplayname-linux.png differ
diff --git a/apps/web/playwright/snapshots/messages/messages.spec.ts/edited-message-ltr-rtldisplayname-linux.png b/apps/web/playwright/snapshots/messages/messages.spec.ts/edited-message-ltr-rtldisplayname-linux.png
index 179e65ac77..b295eb0c64 100644
Binary files a/apps/web/playwright/snapshots/messages/messages.spec.ts/edited-message-ltr-rtldisplayname-linux.png and b/apps/web/playwright/snapshots/messages/messages.spec.ts/edited-message-ltr-rtldisplayname-linux.png differ
diff --git a/apps/web/playwright/snapshots/messages/messages.spec.ts/edited-message-rtl-ltrdisplayname-linux.png b/apps/web/playwright/snapshots/messages/messages.spec.ts/edited-message-rtl-ltrdisplayname-linux.png
index 34b0d5f4ea..fd9c3ab6e3 100644
Binary files a/apps/web/playwright/snapshots/messages/messages.spec.ts/edited-message-rtl-ltrdisplayname-linux.png and b/apps/web/playwright/snapshots/messages/messages.spec.ts/edited-message-rtl-ltrdisplayname-linux.png differ
diff --git a/apps/web/playwright/snapshots/messages/messages.spec.ts/edited-message-rtl-rtldisplayname-linux.png b/apps/web/playwright/snapshots/messages/messages.spec.ts/edited-message-rtl-rtldisplayname-linux.png
index e6ba28a064..7a88f0d0c8 100644
Binary files a/apps/web/playwright/snapshots/messages/messages.spec.ts/edited-message-rtl-rtldisplayname-linux.png and b/apps/web/playwright/snapshots/messages/messages.spec.ts/edited-message-rtl-rtldisplayname-linux.png differ
diff --git a/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-ltr-ltrdisplayname-linux.png b/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-ltr-ltrdisplayname-linux.png
index e87d2c0819..6f0b043997 100644
Binary files a/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-ltr-ltrdisplayname-linux.png and b/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-ltr-ltrdisplayname-linux.png differ
diff --git a/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-ltr-rtldisplayname-linux.png b/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-ltr-rtldisplayname-linux.png
index feec9daa94..c72275bdd7 100644
Binary files a/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-ltr-rtldisplayname-linux.png and b/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-ltr-rtldisplayname-linux.png differ
diff --git a/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-rich-ltr-ltrdisplayname-linux.png b/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-rich-ltr-ltrdisplayname-linux.png
index f9c75004e5..8ca91be628 100644
Binary files a/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-rich-ltr-ltrdisplayname-linux.png and b/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-rich-ltr-ltrdisplayname-linux.png differ
diff --git a/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-rich-ltr-rtldisplayname-linux.png b/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-rich-ltr-rtldisplayname-linux.png
index 739fe83bff..6cfebac2e6 100644
Binary files a/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-rich-ltr-rtldisplayname-linux.png and b/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-rich-ltr-rtldisplayname-linux.png differ
diff --git a/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-rich-rtl-ltrdisplayname-linux.png b/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-rich-rtl-ltrdisplayname-linux.png
index b0ad809230..f1917caa06 100644
Binary files a/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-rich-rtl-ltrdisplayname-linux.png and b/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-rich-rtl-ltrdisplayname-linux.png differ
diff --git a/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-rich-rtl-rtldisplayname-linux.png b/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-rich-rtl-rtldisplayname-linux.png
index a5a29ddad5..5bb928c2c6 100644
Binary files a/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-rich-rtl-rtldisplayname-linux.png and b/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-rich-rtl-rtldisplayname-linux.png differ
diff --git a/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-rtl-ltrdisplayname-linux.png b/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-rtl-ltrdisplayname-linux.png
index 2fc60fd96a..fc338f870b 100644
Binary files a/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-rtl-ltrdisplayname-linux.png and b/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-rtl-ltrdisplayname-linux.png differ
diff --git a/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-rtl-rtldisplayname-linux.png b/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-rtl-rtldisplayname-linux.png
index dc5fb3d1bb..6d2a13e84c 100644
Binary files a/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-rtl-rtldisplayname-linux.png and b/apps/web/playwright/snapshots/messages/messages.spec.ts/emote-rtl-rtldisplayname-linux.png differ
diff --git a/apps/web/playwright/snapshots/messages/messages.spec.ts/preview-basic-linux.png b/apps/web/playwright/snapshots/messages/messages.spec.ts/preview-basic-linux.png
index a77c782394..37df57eff5 100644
Binary files a/apps/web/playwright/snapshots/messages/messages.spec.ts/preview-basic-linux.png and b/apps/web/playwright/snapshots/messages/messages.spec.ts/preview-basic-linux.png differ
diff --git a/apps/web/playwright/snapshots/messages/messages.spec.ts/preview-with-thumb-linux.png b/apps/web/playwright/snapshots/messages/messages.spec.ts/preview-with-thumb-linux.png
index f04e8d4050..107da1c041 100644
Binary files a/apps/web/playwright/snapshots/messages/messages.spec.ts/preview-with-thumb-linux.png and b/apps/web/playwright/snapshots/messages/messages.spec.ts/preview-with-thumb-linux.png differ
diff --git a/apps/web/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-ltrdisplayname-linux.png b/apps/web/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-ltrdisplayname-linux.png
index 4a829f8d8c..453fc90da9 100644
Binary files a/apps/web/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-ltrdisplayname-linux.png and b/apps/web/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-ltrdisplayname-linux.png differ
diff --git a/apps/web/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-rtldisplayname-linux.png b/apps/web/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-rtldisplayname-linux.png
index ed2c1e465b..d753643a3a 100644
Binary files a/apps/web/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-rtldisplayname-linux.png and b/apps/web/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-rtldisplayname-linux.png differ
diff --git a/apps/web/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-ltrdisplayname-linux.png b/apps/web/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-ltrdisplayname-linux.png
index 6d0e372ebc..7576c27800 100644
Binary files a/apps/web/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-ltrdisplayname-linux.png and b/apps/web/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-ltrdisplayname-linux.png differ
diff --git a/apps/web/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-rtldisplayname-linux.png b/apps/web/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-rtldisplayname-linux.png
index a221290718..211f50ca12 100644
Binary files a/apps/web/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-rtldisplayname-linux.png and b/apps/web/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-rtldisplayname-linux.png differ
diff --git a/apps/web/playwright/snapshots/modules/custom-component.spec.ts/custom-component-crash-handle-filter-linux.png b/apps/web/playwright/snapshots/modules/custom-component.spec.ts/custom-component-crash-handle-filter-linux.png
index d91b914a19..1676e7ac7e 100644
Binary files a/apps/web/playwright/snapshots/modules/custom-component.spec.ts/custom-component-crash-handle-filter-linux.png and b/apps/web/playwright/snapshots/modules/custom-component.spec.ts/custom-component-crash-handle-filter-linux.png differ
diff --git a/apps/web/playwright/snapshots/modules/custom-component.spec.ts/custom-component-crash-handle-renderer-linux.png b/apps/web/playwright/snapshots/modules/custom-component.spec.ts/custom-component-crash-handle-renderer-linux.png
index c298db811d..10240409b0 100644
Binary files a/apps/web/playwright/snapshots/modules/custom-component.spec.ts/custom-component-crash-handle-renderer-linux.png and b/apps/web/playwright/snapshots/modules/custom-component.spec.ts/custom-component-crash-handle-renderer-linux.png differ
diff --git a/apps/web/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-fall-through-linux.png b/apps/web/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-fall-through-linux.png
index 908d4ea5bb..9f176805f8 100644
Binary files a/apps/web/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-fall-through-linux.png and b/apps/web/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-fall-through-linux.png differ
diff --git a/apps/web/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-linux.png b/apps/web/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-linux.png
index 762d0f53f9..48ec2bf63c 100644
Binary files a/apps/web/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-linux.png and b/apps/web/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-linux.png differ
diff --git a/apps/web/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-original-linux.png b/apps/web/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-original-linux.png
index 3ccba0347a..a12ca13738 100644
Binary files a/apps/web/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-original-linux.png and b/apps/web/playwright/snapshots/modules/custom-component.spec.ts/custom-component-tile-original-linux.png differ
diff --git a/apps/web/playwright/snapshots/oidc/oidc-native.spec.ts/token-expired-linux.png b/apps/web/playwright/snapshots/oidc/oidc-native.spec.ts/token-expired-linux.png
new file mode 100644
index 0000000000..7a6583e380
Binary files /dev/null and b/apps/web/playwright/snapshots/oidc/oidc-native.spec.ts/token-expired-linux.png differ
diff --git a/apps/web/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-Msg1-linux.png b/apps/web/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-Msg1-linux.png
index a7ff75f1cd..57e962ea2f 100644
Binary files a/apps/web/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-Msg1-linux.png and b/apps/web/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-Msg1-linux.png differ
diff --git a/apps/web/playwright/snapshots/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png b/apps/web/playwright/snapshots/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png
index 8b3a17361a..2e51a91c5f 100644
Binary files a/apps/web/playwright/snapshots/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png and b/apps/web/playwright/snapshots/polls/polls.spec.ts/Polls-Timeline-tile-no-votes-linux.png differ
diff --git a/apps/web/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png b/apps/web/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png
index b974688d7b..c9d871ac2f 100644
Binary files a/apps/web/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png and b/apps/web/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png b/apps/web/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png
index 3af5214e43..91d3bb15dc 100644
Binary files a/apps/web/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png and b/apps/web/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-Introducing-Sections-linux.png b/apps/web/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-Introducing-Sections-linux.png
new file mode 100644
index 0000000000..7bbb0ea17e
Binary files /dev/null and b/apps/web/playwright/snapshots/release-announcement/releaseAnnouncement.spec.ts/release-announcement-Introducing-Sections-linux.png differ
diff --git a/apps/web/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png b/apps/web/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png
index 34a415dc21..8b3df20102 100644
Binary files a/apps/web/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png and b/apps/web/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png differ
diff --git a/apps/web/playwright/snapshots/right-panel/memberlist.spec.ts/with-four-members-linux.png b/apps/web/playwright/snapshots/right-panel/memberlist.spec.ts/with-four-members-linux.png
index 314b65274a..978bd1efef 100644
Binary files a/apps/web/playwright/snapshots/right-panel/memberlist.spec.ts/with-four-members-linux.png and b/apps/web/playwright/snapshots/right-panel/memberlist.spec.ts/with-four-members-linux.png differ
diff --git a/apps/web/playwright/snapshots/right-panel/right-panel.spec.ts/room-report-dialog-linux.png b/apps/web/playwright/snapshots/right-panel/right-panel.spec.ts/room-report-dialog-linux.png
index 573d63416d..fcee8f2434 100644
Binary files a/apps/web/playwright/snapshots/right-panel/right-panel.spec.ts/room-report-dialog-linux.png and b/apps/web/playwright/snapshots/right-panel/right-panel.spec.ts/room-report-dialog-linux.png differ
diff --git a/apps/web/playwright/snapshots/right-panel/right-panel.spec.ts/with-long-name-linux.png b/apps/web/playwright/snapshots/right-panel/right-panel.spec.ts/with-long-name-linux.png
index b1f73126c8..2d28874cf9 100644
Binary files a/apps/web/playwright/snapshots/right-panel/right-panel.spec.ts/with-long-name-linux.png and b/apps/web/playwright/snapshots/right-panel/right-panel.spec.ts/with-long-name-linux.png differ
diff --git a/apps/web/playwright/snapshots/room/create-room.spec.ts/create-room-linux.png b/apps/web/playwright/snapshots/room/create-room.spec.ts/create-room-linux.png
index 10fe7a381f..173c2ca55e 100644
Binary files a/apps/web/playwright/snapshots/room/create-room.spec.ts/create-room-linux.png and b/apps/web/playwright/snapshots/room/create-room.spec.ts/create-room-linux.png differ
diff --git a/apps/web/playwright/snapshots/room/create-room.spec.ts/create-room-no-public-linux.png b/apps/web/playwright/snapshots/room/create-room.spec.ts/create-room-no-public-linux.png
index 7cd35b0050..d0b53f2528 100644
Binary files a/apps/web/playwright/snapshots/room/create-room.spec.ts/create-room-no-public-linux.png and b/apps/web/playwright/snapshots/room/create-room.spec.ts/create-room-no-public-linux.png differ
diff --git a/apps/web/playwright/snapshots/room/create-room.spec.ts/create-video-room-linux.png b/apps/web/playwright/snapshots/room/create-room.spec.ts/create-video-room-linux.png
index a8fe2e9e64..1a7943077d 100644
Binary files a/apps/web/playwright/snapshots/room/create-room.spec.ts/create-video-room-linux.png and b/apps/web/playwright/snapshots/room/create-room.spec.ts/create-video-room-linux.png differ
diff --git a/apps/web/playwright/snapshots/room/invites.spec.ts/Invites-reject-dialog-linux.png b/apps/web/playwright/snapshots/room/invites.spec.ts/Invites-reject-dialog-linux.png
index ce50be25a2..35bd9b5e3d 100644
Binary files a/apps/web/playwright/snapshots/room/invites.spec.ts/Invites-reject-dialog-linux.png and b/apps/web/playwright/snapshots/room/invites.spec.ts/Invites-reject-dialog-linux.png differ
diff --git a/apps/web/playwright/snapshots/room/room-header.spec.ts/room-header-linux.png b/apps/web/playwright/snapshots/room/room-header.spec.ts/room-header-linux.png
index d30c0fe32d..1f331e9395 100644
Binary files a/apps/web/playwright/snapshots/room/room-header.spec.ts/room-header-linux.png and b/apps/web/playwright/snapshots/room/room-header.spec.ts/room-header-linux.png differ
diff --git a/apps/web/playwright/snapshots/room/room-header.spec.ts/room-header-long-name-linux.png b/apps/web/playwright/snapshots/room/room-header.spec.ts/room-header-long-name-linux.png
index 8f33116981..81b3c0aa38 100644
Binary files a/apps/web/playwright/snapshots/room/room-header.spec.ts/room-header-long-name-linux.png and b/apps/web/playwright/snapshots/room/room-header.spec.ts/room-header-long-name-linux.png differ
diff --git a/apps/web/playwright/snapshots/room/room-header.spec.ts/room-header-video-room-linux.png b/apps/web/playwright/snapshots/room/room-header.spec.ts/room-header-video-room-linux.png
index ed8c75104f..115b6d9f09 100644
Binary files a/apps/web/playwright/snapshots/room/room-header.spec.ts/room-header-video-room-linux.png and b/apps/web/playwright/snapshots/room/room-header.spec.ts/room-header-video-room-linux.png differ
diff --git a/apps/web/playwright/snapshots/room/room-header.spec.ts/room-header-with-icon-linux.png b/apps/web/playwright/snapshots/room/room-header.spec.ts/room-header-with-icon-linux.png
index f7c2e3c950..9ef3eb221d 100644
Binary files a/apps/web/playwright/snapshots/room/room-header.spec.ts/room-header-with-icon-linux.png and b/apps/web/playwright/snapshots/room/room-header.spec.ts/room-header-with-icon-linux.png differ
diff --git a/apps/web/playwright/snapshots/room/room-status-bar.spec.ts/local-room-create-failed-linux.png b/apps/web/playwright/snapshots/room/room-status-bar.spec.ts/local-room-create-failed-linux.png
index e604e01a1e..8e24d1a4da 100644
Binary files a/apps/web/playwright/snapshots/room/room-status-bar.spec.ts/local-room-create-failed-linux.png and b/apps/web/playwright/snapshots/room/room-status-bar.spec.ts/local-room-create-failed-linux.png differ
diff --git a/apps/web/playwright/snapshots/room/room-status-bar.spec.ts/message-failed-linux.png b/apps/web/playwright/snapshots/room/room-status-bar.spec.ts/message-failed-linux.png
index 673ab956d6..0060d327fc 100644
Binary files a/apps/web/playwright/snapshots/room/room-status-bar.spec.ts/message-failed-linux.png and b/apps/web/playwright/snapshots/room/room-status-bar.spec.ts/message-failed-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png b/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png
index 8cd0cbf863..87216d424c 100644
Binary files a/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png and b/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-manage-account-button-linux.png b/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-manage-account-button-linux.png
index 40f79c05b3..a971213bc6 100644
Binary files a/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-manage-account-button-linux.png and b/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-manage-account-button-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png b/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png
index 14fd316f79..0256588810 100644
Binary files a/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png and b/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png
index afce0e5b04..1f728f8e0a 100644
Binary files a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png and b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png
index 47048b97b1..42bf92f8b8 100644
Binary files a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png and b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-after-switch-linux.png b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-after-switch-linux.png
index f5c34f1c8a..a677b966b0 100644
Binary files a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-after-switch-linux.png and b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-after-switch-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-before-switch-linux.png b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-before-switch-linux.png
index 5d36c31906..62221aedc6 100644
Binary files a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-before-switch-linux.png and b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-before-switch-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/message-layout-panel.spec.ts/message-layout-panel-bubble-linux.png b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/message-layout-panel.spec.ts/message-layout-panel-bubble-linux.png
index a913d4ab19..bbb73259b7 100644
Binary files a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/message-layout-panel.spec.ts/message-layout-panel-bubble-linux.png and b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/message-layout-panel.spec.ts/message-layout-panel-bubble-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/message-layout-panel.spec.ts/message-layout-panel-modern-linux.png b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/message-layout-panel.spec.ts/message-layout-panel-modern-linux.png
index b2167e0a12..1c705faab8 100644
Binary files a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/message-layout-panel.spec.ts/message-layout-panel-modern-linux.png and b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/message-layout-panel.spec.ts/message-layout-panel-modern-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-added-linux.png b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-added-linux.png
index 60678f3bb4..e33c1dec97 100644
Binary files a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-added-linux.png and b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-added-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-linux.png b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-linux.png
index cc2dc4a0a7..238fd2d560 100644
Binary files a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-linux.png and b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-removed-linux.png b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-removed-linux.png
index 068aa2901f..21001e22c2 100644
Binary files a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-removed-linux.png and b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-removed-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-dark-linux.png b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-dark-linux.png
index 1acda5968e..843ff02c18 100644
Binary files a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-dark-linux.png and b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-dark-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-light-linux.png b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-light-linux.png
index 3b221183fb..59943fdb20 100644
Binary files a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-light-linux.png and b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-light-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-match-system-enabled-linux.png b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-match-system-enabled-linux.png
index 73f7f02d65..9747f1a1fe 100644
Binary files a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-match-system-enabled-linux.png and b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-match-system-enabled-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/window-custom-theme-linux.png b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/window-custom-theme-linux.png
index 19e7689a64..b16d48b4ab 100644
Binary files a/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/window-custom-theme-linux.png and b/apps/web/playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/window-custom-theme-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/encryption-user-tab/encryption-tab.spec.ts/default-tab-linux.png b/apps/web/playwright/snapshots/settings/encryption-user-tab/encryption-tab.spec.ts/default-tab-linux.png
index efdd7e3cba..8c3a6c8260 100644
Binary files a/apps/web/playwright/snapshots/settings/encryption-user-tab/encryption-tab.spec.ts/default-tab-linux.png and b/apps/web/playwright/snapshots/settings/encryption-user-tab/encryption-tab.spec.ts/default-tab-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png b/apps/web/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png
index e5b81c1973..9335e8cdb1 100644
Binary files a/apps/web/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png and b/apps/web/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/notifications/notifications-settings-2-tab.spec.ts/standard-notifications-2-settings-linux.png b/apps/web/playwright/snapshots/settings/notifications/notifications-settings-2-tab.spec.ts/standard-notifications-2-settings-linux.png
index 79a9efe5cf..ea0bed423b 100644
Binary files a/apps/web/playwright/snapshots/settings/notifications/notifications-settings-2-tab.spec.ts/standard-notifications-2-settings-linux.png and b/apps/web/playwright/snapshots/settings/notifications/notifications-settings-2-tab.spec.ts/standard-notifications-2-settings-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/notifications/notifications-settings-tab.spec.ts/standard-notification-settings-linux.png b/apps/web/playwright/snapshots/settings/notifications/notifications-settings-tab.spec.ts/standard-notification-settings-linux.png
index efec129b55..28c92d246b 100644
Binary files a/apps/web/playwright/snapshots/settings/notifications/notifications-settings-tab.spec.ts/standard-notification-settings-linux.png and b/apps/web/playwright/snapshots/settings/notifications/notifications-settings-tab.spec.ts/standard-notification-settings-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png b/apps/web/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png
index 2519cee3ef..55d93f397f 100644
Binary files a/apps/web/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png and b/apps/web/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-linux.png b/apps/web/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-linux.png
index 95657048ac..bcfe1113ee 100644
Binary files a/apps/web/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-linux.png and b/apps/web/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-world-readable-linux.png b/apps/web/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-world-readable-linux.png
index f5f3fa0382..29354e204b 100644
Binary files a/apps/web/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-world-readable-linux.png and b/apps/web/playwright/snapshots/settings/room-settings/room-security-tab.spec.ts/room-security-settings-world-readable-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png b/apps/web/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png
index 7a64332f1b..b357260cac 100644
Binary files a/apps/web/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png and b/apps/web/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png differ
diff --git a/apps/web/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png b/apps/web/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png
index c12d1a8808..6fdbcd3404 100644
Binary files a/apps/web/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png and b/apps/web/playwright/snapshots/settings/security-user-settings-tab.spec.ts/security-settings-tab-linux.png differ
diff --git a/apps/web/playwright/snapshots/spaces/spaces.spec.ts/add-existing-rooms-dialog-linux.png b/apps/web/playwright/snapshots/spaces/spaces.spec.ts/add-existing-rooms-dialog-linux.png
index 52fe99b90a..996aa42073 100644
Binary files a/apps/web/playwright/snapshots/spaces/spaces.spec.ts/add-existing-rooms-dialog-linux.png and b/apps/web/playwright/snapshots/spaces/spaces.spec.ts/add-existing-rooms-dialog-linux.png differ
diff --git a/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-panel-collapsed-linux.png b/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-panel-collapsed-linux.png
index 7b3063a2df..8b1375480b 100644
Binary files a/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-panel-collapsed-linux.png and b/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-panel-collapsed-linux.png differ
diff --git a/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png b/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png
index f187b3cab3..a55f268719 100644
Binary files a/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png and b/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png differ
diff --git a/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-panel-home-tooltip-linux.png b/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-panel-home-tooltip-linux.png
new file mode 100644
index 0000000000..c98f840f29
Binary files /dev/null and b/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-panel-home-tooltip-linux.png differ
diff --git a/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-panel-notification-badge-linux.png b/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-panel-notification-badge-linux.png
new file mode 100644
index 0000000000..16f16c53d7
Binary files /dev/null and b/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-panel-notification-badge-linux.png differ
diff --git a/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-room-view-linux.png b/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-room-view-linux.png
index 4bd9805665..3cc32f05fd 100644
Binary files a/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-room-view-linux.png and b/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-room-view-linux.png differ
diff --git a/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-visibility-settings-linux.png b/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-visibility-settings-linux.png
index 1551195fd5..6a8c2967f9 100644
Binary files a/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-visibility-settings-linux.png and b/apps/web/playwright/snapshots/spaces/spaces.spec.ts/space-visibility-settings-linux.png differ
diff --git a/apps/web/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png b/apps/web/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png
index f3e182ae4d..fc087b9482 100644
Binary files a/apps/web/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png and b/apps/web/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-button-expanded-linux.png differ
diff --git a/apps/web/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-expanded-linux.png b/apps/web/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-expanded-linux.png
index 596a9c30b1..f97de99cd9 100644
Binary files a/apps/web/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-expanded-linux.png and b/apps/web/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-expanded-linux.png differ
diff --git a/apps/web/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-linux.png b/apps/web/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-linux.png
index 4952185cd1..7d24702725 100644
Binary files a/apps/web/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-linux.png and b/apps/web/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-linux.png differ
diff --git a/apps/web/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-bubble-layout-linux.png b/apps/web/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-bubble-layout-linux.png
index 3c030baa04..de0ba2d3dd 100644
Binary files a/apps/web/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-bubble-layout-linux.png and b/apps/web/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-bubble-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-group-layout-linux.png b/apps/web/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-group-layout-linux.png
index 77c96f7312..8c0272dc12 100644
Binary files a/apps/web/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-group-layout-linux.png and b/apps/web/playwright/snapshots/threads/threads.spec.ts/Initial-ThreadView-on-group-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png b/apps/web/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png
index fd902e5075..0bb39e8701 100644
Binary files a/apps/web/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png and b/apps/web/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png differ
diff --git a/apps/web/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-bubble-layout-linux.png b/apps/web/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-bubble-layout-linux.png
index 85ef504581..1a11e02973 100644
Binary files a/apps/web/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-bubble-layout-linux.png and b/apps/web/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-bubble-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-group-layout-linux.png b/apps/web/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-group-layout-linux.png
index 669ef94f3c..625495ed6c 100644
Binary files a/apps/web/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-group-layout-linux.png and b/apps/web/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-reaction-and-a-hidden-event-on-group-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-bubble-layout-linux.png b/apps/web/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-bubble-layout-linux.png
index d17cf99326..d3dcf27986 100644
Binary files a/apps/web/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-bubble-layout-linux.png and b/apps/web/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-bubble-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-group-layout-linux.png b/apps/web/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-group-layout-linux.png
index 5e8d75aeb5..cc3bf002de 100644
Binary files a/apps/web/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-group-layout-linux.png and b/apps/web/playwright/snapshots/threads/threads.spec.ts/ThreadView-with-redacted-messages-on-group-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/threads/threads.spec.ts/thread-panel-linux.png b/apps/web/playwright/snapshots/threads/threads.spec.ts/thread-panel-linux.png
index c42007680d..ecc634cc5c 100644
Binary files a/apps/web/playwright/snapshots/threads/threads.spec.ts/thread-panel-linux.png and b/apps/web/playwright/snapshots/threads/threads.spec.ts/thread-panel-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/bot-joined-the-room-linux.png b/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/bot-joined-the-room-linux.png
index 8f3f0998ed..984370c57a 100644
Binary files a/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/bot-joined-the-room-linux.png and b/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/bot-joined-the-room-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/bot-was-banned-linux.png b/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/bot-was-banned-linux.png
index d6aa806afa..0b146bb463 100644
Binary files a/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/bot-was-banned-linux.png and b/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/bot-was-banned-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/multiple-join-ban-messages-linux.png b/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/multiple-join-ban-messages-linux.png
index e854c65166..6a3a4fd242 100644
Binary files a/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/multiple-join-ban-messages-linux.png and b/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/multiple-join-ban-messages-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/multiple-join-leave-messages-linux.png b/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/multiple-join-leave-messages-linux.png
index 7b06c2cdb3..9d5df54506 100644
Binary files a/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/multiple-join-leave-messages-linux.png and b/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/multiple-join-leave-messages-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/multiple-people-ban-messages-expanded-linux.png b/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/multiple-people-ban-messages-expanded-linux.png
index cd6ae7bec1..407c7d4c17 100644
Binary files a/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/multiple-people-ban-messages-expanded-linux.png and b/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/multiple-people-ban-messages-expanded-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/multiple-people-ban-messages-linux.png b/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/multiple-people-ban-messages-linux.png
index 3e00f1f1f3..098511f23b 100644
Binary files a/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/multiple-people-ban-messages-linux.png and b/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/multiple-people-ban-messages-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/multiple-people-join-leave-messages-expanded-linux.png b/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/multiple-people-join-leave-messages-expanded-linux.png
index ad3a446fb1..c0cbd13f04 100644
Binary files a/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/multiple-people-join-leave-messages-expanded-linux.png and b/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/multiple-people-join-leave-messages-expanded-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/multiple-people-join-leave-messages-linux.png b/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/multiple-people-join-leave-messages-linux.png
index b8c2499868..416d8dccb3 100644
Binary files a/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/multiple-people-join-leave-messages-linux.png and b/apps/web/playwright/snapshots/timeline/event-list-summary.spec.ts/multiple-people-join-leave-messages-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/code-block-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/code-block-linux.png
index 5bd106b17f..493a90fff5 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/code-block-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/code-block-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png
index 4184b312b3..157d2e0556 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png
index 2bb0c86268..4e8166937b 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png
index 7bb4da1f76..5e6f0a71a3 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png
index 08b47c44f7..75b10a4afd 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png
index af2e2dc1f6..4274322c7f 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png
index 8e4f752586..f50e505885 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png
index 4fed5a2688..43cb685d9e 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png
index 77a760c073..a01f2a9d36 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png
index 7907870775..a51818f59d 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png
index 669c1bc2f2..d13c99e456 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png
index 31af6f9c6f..2e173ee763 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png
index 90e669dd8d..e0ba973ed8 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png
index 3fe3760f94..6ac3144de0 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png
index 65e6bc082b..11aa4fbf93 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png
index 461e0b94b4..b3764652d1 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png
index af2e2dc1f6..4274322c7f 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png
index 2db0d572c2..70ba240801 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png
index 2436e205c6..481a4685fb 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png
index c439f47c80..444932e960 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-padding-modern-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png
index 8383107083..6d0ce53171 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/hidden-event-line-zero-padding-irc-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/hovered-hidden-event-line-irc-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/hovered-hidden-event-line-irc-layout-linux.png
index 247c8313ff..884d95fc9c 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/hovered-hidden-event-line-irc-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/hovered-hidden-event-line-irc-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/image-in-timeline-default-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/image-in-timeline-default-layout-linux.png
index 54f27f78ee..ea4a550661 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/image-in-timeline-default-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/image-in-timeline-default-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png
index 9fe134e7f6..5f0bfd67f9 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png
index 04e0a88ffa..0c081e00f1 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png
index 311df4e505..a44be9dfca 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/spoiler-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/spoiler-linux.png
index 14f9e6815b..eb1eea12d9 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/spoiler-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/spoiler-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/spoiler-uncovered-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/spoiler-uncovered-linux.png
index 9c3c94a127..2bee83918f 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/spoiler-uncovered-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/spoiler-uncovered-linux.png differ
diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/voice-message-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/voice-message-linux.png
index bb121bfdb2..b79ff42e3e 100644
Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/voice-message-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/voice-message-linux.png differ
diff --git a/apps/web/playwright/snapshots/user-menu/user-menu.spec.ts/user-menu-linux.png b/apps/web/playwright/snapshots/user-menu/user-menu.spec.ts/user-menu-linux.png
index 64fc5585ec..ed236f42e5 100644
Binary files a/apps/web/playwright/snapshots/user-menu/user-menu.spec.ts/user-menu-linux.png and b/apps/web/playwright/snapshots/user-menu/user-menu.spec.ts/user-menu-linux.png differ
diff --git a/apps/web/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png b/apps/web/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png
index 9926b5801a..4dc23aee42 100644
Binary files a/apps/web/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png and b/apps/web/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png differ
diff --git a/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-dm-video-toast-checked-linux.png b/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-dm-video-toast-checked-linux.png
index 1faf65f023..37aea0cc53 100644
Binary files a/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-dm-video-toast-checked-linux.png and b/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-dm-video-toast-checked-linux.png differ
diff --git a/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-dm-video-toast-unchecked-linux.png b/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-dm-video-toast-unchecked-linux.png
index fda6c35a6a..a6ad88ffd3 100644
Binary files a/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-dm-video-toast-unchecked-linux.png and b/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-dm-video-toast-unchecked-linux.png differ
diff --git a/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-dm-voice-toast-linux.png b/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-dm-voice-toast-linux.png
index 96b096905d..afc58fd22e 100644
Binary files a/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-dm-voice-toast-linux.png and b/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-dm-voice-toast-linux.png differ
diff --git a/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-checked-linux.png b/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-checked-linux.png
index 711d748767..5f2630c187 100644
Binary files a/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-checked-linux.png and b/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-checked-linux.png differ
diff --git a/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-unchecked-linux.png b/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-unchecked-linux.png
index 431b137108..627e24e647 100644
Binary files a/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-unchecked-linux.png and b/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-unchecked-linux.png differ
diff --git a/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-voice-toast-linux.png b/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-voice-toast-linux.png
index 974b14344a..ab5bbed950 100644
Binary files a/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-voice-toast-linux.png and b/apps/web/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-voice-toast-linux.png differ
diff --git a/apps/web/playwright/snapshots/widgets/permissions-dialog.spec.ts/widget-capabilites-prompt-linux.png b/apps/web/playwright/snapshots/widgets/permissions-dialog.spec.ts/widget-capabilites-prompt-linux.png
index 747ffb15ff..193a7a8b46 100644
Binary files a/apps/web/playwright/snapshots/widgets/permissions-dialog.spec.ts/widget-capabilites-prompt-linux.png and b/apps/web/playwright/snapshots/widgets/permissions-dialog.spec.ts/widget-capabilites-prompt-linux.png differ
diff --git a/apps/web/playwright/testcontainers/mas.ts b/apps/web/playwright/testcontainers/mas.ts
index ef9449bc51..562cfcd8de 100644
--- a/apps/web/playwright/testcontainers/mas.ts
+++ b/apps/web/playwright/testcontainers/mas.ts
@@ -11,7 +11,7 @@ import {
 } from "@element-hq/element-web-playwright-common/lib/testcontainers/index.js";
 
 const DOCKER_IMAGE =
-    "ghcr.io/element-hq/matrix-authentication-service:main@sha256:4b32f35c0c3367d0884abf039f3741fd55ff2dca683c04ee92bee351fd9a9403";
+    "ghcr.io/element-hq/matrix-authentication-service:main@sha256:e65d05606a78dbc995b2415d66ea68092661f6ff3b096c9972ae11e5b41f7cdc";
 
 /**
  * MatrixAuthenticationServiceContainer which freezes the docker digest to
diff --git a/apps/web/playwright/testcontainers/synapse.ts b/apps/web/playwright/testcontainers/synapse.ts
index 6cc4bdbe0f..bc9eeda3a9 100644
--- a/apps/web/playwright/testcontainers/synapse.ts
+++ b/apps/web/playwright/testcontainers/synapse.ts
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 import { SynapseContainer as BaseSynapseContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers/index.js";
 
 const DOCKER_IMAGE =
-    "ghcr.io/element-hq/synapse:develop@sha256:db0edf9064ca0e6da942eff82e328ac5aecbe64dff301ffb9f4fa6e03bd28e4d";
+    "ghcr.io/element-hq/synapse:develop@sha256:4423f52402cb0d6068cedafc88479834feed84f1104d41b3fbdebea0fa89311b";
 
 /**
  * SynapseContainer which freezes the docker digest to stabilise tests,
diff --git a/apps/web/playwright/tsconfig.json b/apps/web/playwright/tsconfig.json
index 4f3f437a9a..a1a5e25ffe 100644
--- a/apps/web/playwright/tsconfig.json
+++ b/apps/web/playwright/tsconfig.json
@@ -8,14 +8,15 @@
         "moduleResolution": "bundler",
         "module": "ESNext",
         "allowImportingTsExtensions": true,
-        "strictNullChecks": false,
-        "noImplicitAny": false,
-        "types": ["node"]
+        "strict": true,
+        "noUnusedLocals": true,
+        "types": ["node"],
+        "noEmit": true
     },
     "include": [
         "**/*.ts",
         "../src/@types/matrix-js-sdk.d.ts",
-        "../../../node_modules/matrix-js-sdk/src/@types/*.d.ts",
-        "../../../node_modules/matrix-js-sdk/node_modules/@matrix-org/olm/index.d.ts"
+        "../node_modules/matrix-js-sdk/src/@types/*.d.ts",
+        "../node_modules/matrix-js-sdk/node_modules/@matrix-org/olm/index.d.ts"
     ]
 }
diff --git a/apps/web/project.json b/apps/web/project.json
index abb5fc4757..6c69f26dfc 100644
--- a/apps/web/project.json
+++ b/apps/web/project.json
@@ -46,11 +46,24 @@
             },
             "dependsOn": ["^build", "^build:playwright"]
         },
+        "lint:prepare": {
+            "executor": "nx:noop",
+            "dependsOn": ["^build"]
+        },
+        "test:unit:prepare": {
+            "executor": "nx:noop",
+            "dependsOn": ["^build"]
+        },
         "test:unit": {
             // We avoid the jest executor because it doesn't seem to give any benefit, and it mangles the summary of failing tests.
             "command": "jest",
             "options": { "cwd": "apps/web" },
-            "dependsOn": ["^build"]
+            "dependsOn": ["test:unit:prepare"]
+        },
+        "test:vitest": {
+            "command": "vitest run",
+            "options": { "cwd": "apps/web" },
+            "dependsOn": ["test:unit:prepare"]
         },
         "test:playwright": {
             "command": "playwright test",
diff --git a/apps/web/res/css/_common.pcss b/apps/web/res/css/_common.pcss
index 58bebb609b..1b0e3e2f30 100644
--- a/apps/web/res/css/_common.pcss
+++ b/apps/web/res/css/_common.pcss
@@ -11,16 +11,14 @@ Please see LICENSE files in the repository root for full details.
 
 @import "./_font-sizes.pcss";
 @import "./_animations.pcss";
-@import "./_spacing.pcss";
-@import url("maplibre-gl/dist/maplibre-gl.css");
 
 :root {
     --container-border-width: 8px;
     --container-gap-width: 8px; /* only even numbers should be used because otherwise we get 0.5px margin values. */
     --transition-short: 0.1s;
     --transition-standard: 0.3s;
-    --buttons-dialog-gap-row: $spacing-8;
-    --buttons-dialog-gap-column: $spacing-8;
+    --buttons-dialog-gap-row: var(--cpd-space-2x);
+    --buttons-dialog-gap-column: var(--cpd-space-2x);
     --MBody-border-radius: 8px;
     --EventTileBubble_margin-block: 10px;
     --MessageTimestamp-width: 46px; /* 8 + 30 (avatar) + 8 */
@@ -163,10 +161,10 @@ b {
     font-weight: bold;
 }
 
-/* Keep the legacy link colour without overriding Compound anchors. */
-a:where(:not([data-kind])):hover,
-a:where(:not([data-kind])):link,
-a:where(:not([data-kind])):visited {
+/* Keep the legacy link colour without overriding Compound anchors or shared timestamp styling. */
+a:where(:not([data-kind]):not(.mx_MessageTimestamp)):hover,
+a:where(:not([data-kind]):not(.mx_MessageTimestamp)):link,
+a:where(:not([data-kind]):not(.mx_MessageTimestamp)):visited {
     color: $accent-alt;
 }
 
@@ -533,7 +531,7 @@ legend {
 }
 
 .mx_Dialog_buttons {
-    margin-top: $spacing-20;
+    margin-top: var(--cpd-space-5x);
     margin-inline-start: auto;
     text-align: right;
 
@@ -600,9 +598,12 @@ legend {
         .mx_InviteDialog_section button,
         .mx_InviteDialog_editor button,
         .mx_UnknownIdentityUsersWarningDialog button,
+        .mx_ThreadActionBar button,
+        .mx_HistoryActionBar button,
+        [data-kind],
         [class|="maplibregl"]
     ),
-.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton),
+.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton, [data-kind]),
 .mx_Dialog input[type="submit"],
 .mx_Dialog_buttons input[type="submit"] {
     @mixin mx_DialogButton;
@@ -628,7 +629,8 @@ legend {
         .mx_UnpinAllDialog button,
         .mx_ShareDialog button,
         .mx_EncryptionUserSettingsTab button,
-        .mx_UnknownIdentityUsersWarningDialog button
+        .mx_UnknownIdentityUsersWarningDialog button,
+        [data-kind]
     ):last-child {
     margin-right: 0px;
 }
@@ -645,26 +647,29 @@ legend {
         .mx_EncryptionUserSettingsTab button,
         .mx_InviteDialog_section button,
         .mx_InviteDialog_editor button,
-        .mx_UnknownIdentityUsersWarningDialog button
+        .mx_UnknownIdentityUsersWarningDialog button,
+        [data-kind]
     ):focus,
 .mx_Dialog input[type="submit"]:focus,
-.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton):focus,
+.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton, [data-kind]):focus,
 .mx_Dialog_buttons input[type="submit"]:focus {
     filter: brightness($focus-brightness);
 }
 
-.mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton, [class|="maplibregl"]),
+.mx_Dialog button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton, [class|="maplibregl"], [data-kind]),
 .mx_Dialog input[type="submit"].mx_Dialog_primary,
 .mx_Dialog_buttons
     button:not(
         .mx_Dialog_nonDialogButton,
         .mx_AccessibleButton,
+        .cancel,
         .mx_UserProfileSettings button,
         .mx_ThemeChoicePanel_CustomTheme button,
         .mx_UnpinAllDialog button,
         .mx_ShareDialog button,
         .mx_EncryptionUserSettingsTab button,
-        .mx_UnknownIdentityUsersWarningDialog button
+        .mx_UnknownIdentityUsersWarningDialog button,
+        [data-kind]
     ),
 .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
     color: var(--cpd-color-text-on-solid-primary);
@@ -708,7 +713,8 @@ legend {
         .mx_UnpinAllDialog button,
         .mx_ShareDialog button,
         .mx_EncryptionUserSettingsTab button,
-        .mx_UnknownIdentityUsersWarningDialog button
+        .mx_UnknownIdentityUsersWarningDialog button,
+        [data-kind]
     ):disabled,
 .mx_Dialog input[type="submit"]:disabled,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton):disabled,
@@ -718,6 +724,13 @@ legend {
     opacity: 0.7;
 }
 
+.mx_Dialog_buttons button.cancel {
+    color: var(--cpd-color-text-primary);
+    background-color: var(--cpd-color-bg-action-secondary-rest);
+    border-color: var(--cpd-color-border-interactive-secondary);
+    min-width: 156px;
+}
+
 /* Spinner Dialog overide */
 .mx_Dialog_wrapper.mx_Dialog_spinner {
     /* This is not a real dialog, so we shouldn't show a glass border */
@@ -866,7 +879,7 @@ legend {
     font-weight: var(--cpd-font-weight-semibold);
     white-space: nowrap;
     position: relative;
-    padding: 0 $spacing-12 0 $spacing-8;
+    padding: 0 var(--cpd-space-3x) 0 var(--cpd-space-2x);
 }
 
 @define-mixin ThreadSummaryIcon {
@@ -907,16 +920,8 @@ legend {
     overflow: hidden;
 }
 
-/* This class is used extensively in element-web and are included here for compatibility with the existing timeline and layout.
-/* TODO: Review mx_MessageTimestamp usage after finishing migration of timeline tiles to shared components. */
-/* https://github.com/element-hq/element-web/issues/31651 */
+/* Layout compatibility hook for timestamp placement in existing app/web timeline surfaces. */
 .mx_MessageTimestamp {
-    color: var(--cpd-color-text-secondary) !important; /* override anchor color */
-    font-size: $font-10px;
-    font-variant-numeric: tabular-nums;
     display: block; /* enable the width setting below */
     width: var(--MessageTimestamp-width);
-    white-space: nowrap;
-    user-select: none;
-    text-decoration: none;
 }
diff --git a/apps/web/res/css/_components.pcss b/apps/web/res/css/_components.pcss
index 0c902fee3c..e8311a7fe0 100644
--- a/apps/web/res/css/_components.pcss
+++ b/apps/web/res/css/_components.pcss
@@ -2,7 +2,6 @@
 @import "./_animations.pcss";
 @import "./_common.pcss";
 @import "./_font-sizes.pcss";
-@import "./_spacing.pcss";
 @import "./components/views/beacon/_BeaconListItem.pcss";
 @import "./components/views/beacon/_BeaconStatus.pcss";
 @import "./components/views/beacon/_BeaconStatusTooltip.pcss";
@@ -56,7 +55,6 @@
 @import "./compound/_SuccessDialog.pcss";
 @import "./structures/_AutoHideScrollbar.pcss";
 @import "./structures/_AutocompleteInput.pcss";
-@import "./structures/_BackdropPanel.pcss";
 @import "./structures/_CompatibilityPage.pcss";
 @import "./structures/_ContextualMenu.pcss";
 @import "./structures/_ErrorMessage.pcss";
@@ -72,7 +70,6 @@
 @import "./structures/_PictureInPictureDragger.pcss";
 @import "./structures/_QuickSettingsButton.pcss";
 @import "./structures/_RightPanel.pcss";
-@import "./structures/_RoomSearch.pcss";
 @import "./structures/_RoomView.pcss";
 @import "./structures/_SearchBox.pcss";
 @import "./structures/_SpaceHierarchy.pcss";
@@ -93,7 +90,6 @@
 @import "./structures/auth/_Registration.pcss";
 @import "./structures/auth/_SessionLockStolenView.pcss";
 @import "./structures/auth/_SetupEncryptionBody.pcss";
-@import "./views/audio_messages/_PlayPauseButton.pcss";
 @import "./views/audio_messages/_PlaybackContainer.pcss";
 @import "./views/audio_messages/_SeekBar.pcss";
 @import "./views/audio_messages/_Waveform.pcss";
@@ -166,7 +162,6 @@
 @import "./views/dialogs/_SpotlightDialog.pcss";
 @import "./views/dialogs/_TermsDialog.pcss";
 @import "./views/dialogs/_UnpinAllDialog.pcss";
-@import "./views/dialogs/_UntrustedDeviceDialog.pcss";
 @import "./views/dialogs/_UploadConfirmDialog.pcss";
 @import "./views/dialogs/_UserSettingsDialog.pcss";
 @import "./views/dialogs/_VerifyEMailDialog.pcss";
@@ -217,26 +212,18 @@
 @import "./views/elements/_TextWithTooltip.pcss";
 @import "./views/elements/_ToggleSwitch.pcss";
 @import "./views/elements/_Validation.pcss";
-@import "./views/emojipicker/_EmojiPicker.pcss";
 @import "./views/location/_LocationPicker.pcss";
 @import "./views/messages/_CallEvent.pcss";
 @import "./views/messages/_CreateEvent.pcss";
 @import "./views/messages/_DisambiguatedProfile.pcss";
 @import "./views/messages/_LegacyCallEvent.pcss";
-@import "./views/messages/_MFileBody.pcss";
-@import "./views/messages/_MImageBody.pcss";
 @import "./views/messages/_MImageReplyBody.pcss";
-@import "./views/messages/_MJitsiWidgetEvent.pcss";
 @import "./views/messages/_MLocationBody.pcss";
 @import "./views/messages/_MPollBody.pcss";
 @import "./views/messages/_MStickerBody.pcss";
-@import "./views/messages/_MediaBody.pcss";
 @import "./views/messages/_MessageActionBar.pcss";
-@import "./views/messages/_ReactionsRow.pcss";
-@import "./views/messages/_RoomAvatarEvent.pcss";
 @import "./views/messages/_TextualEvent.pcss";
 @import "./views/messages/_ThreadActionBar.pcss";
-@import "./views/messages/_ViewSourceEvent.pcss";
 @import "./views/messages/_common_CryptoEvent.pcss";
 @import "./views/polls/pollHistory/_PollHistory.pcss";
 @import "./views/polls/pollHistory/_PollHistoryList.pcss";
@@ -263,14 +250,11 @@
 @import "./views/rooms/_EditMessageComposer.pcss";
 @import "./views/rooms/_EmojiButton.pcss";
 @import "./views/rooms/_EventBubbleTile.pcss";
-@import "./views/rooms/_EventPreview.pcss";
 @import "./views/rooms/_EventTile.pcss";
 @import "./views/rooms/_HistoryTile.pcss";
 @import "./views/rooms/_IRCLayout.pcss";
 @import "./views/rooms/_InvitedIconView.pcss";
 @import "./views/rooms/_JumpToBottomButton.pcss";
-@import "./views/rooms/_LegacyRoomList.pcss";
-@import "./views/rooms/_LegacyRoomListHeader.pcss";
 @import "./views/rooms/_LiveContentSummary.pcss";
 @import "./views/rooms/_MemberListHeaderView.pcss";
 @import "./views/rooms/_MemberListView.pcss";
@@ -278,7 +262,6 @@
 @import "./views/rooms/_MessageComposer.pcss";
 @import "./views/rooms/_MessageComposerFormatBar.pcss";
 @import "./views/rooms/_NewRoomIntro.pcss";
-@import "./views/rooms/_NotificationBadge.pcss";
 @import "./views/rooms/_OverflowTile.pcss";
 @import "./views/rooms/_PinnedEventTile.pcss";
 @import "./views/rooms/_PinnedMessageBanner.pcss";
@@ -287,21 +270,16 @@
 @import "./views/rooms/_ReadReceiptGroup.pcss";
 @import "./views/rooms/_ReplyPreview.pcss";
 @import "./views/rooms/_ReplyTile.pcss";
-@import "./views/rooms/_RoomBreadcrumbs.pcss";
-@import "./views/rooms/_RoomCallBanner.pcss";
 @import "./views/rooms/_RoomHeader.pcss";
 @import "./views/rooms/_RoomInfoLine.pcss";
 @import "./views/rooms/_RoomKnocksBar.pcss";
 @import "./views/rooms/_RoomPreviewBar.pcss";
 @import "./views/rooms/_RoomPreviewCard.pcss";
 @import "./views/rooms/_RoomSearchAuxPanel.pcss";
-@import "./views/rooms/_RoomSublist.pcss";
-@import "./views/rooms/_RoomTile.pcss";
 @import "./views/rooms/_RoomUpgradeWarningBar.pcss";
 @import "./views/rooms/_SendMessageComposer.pcss";
 @import "./views/rooms/_Stickers.pcss";
 @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";
diff --git a/apps/web/res/css/_compound.pcss b/apps/web/res/css/_compound.pcss
deleted file mode 100644
index 823cf1ef7b..0000000000
--- a/apps/web/res/css/_compound.pcss
+++ /dev/null
@@ -1,6 +0,0 @@
-/* Shared cascade order: Compound tokens, Compound Web, shared components, then app overrides. */
-@layer compound-tokens, compound-web, shared-components, app-web;
-
-/* Modules bundled with compound apply compound lastly. In order to catch issue due to css class ordering, we put compound at the end */
-@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound-tokens);
-@import url("@vector-im/compound-web/dist/style.css") layer(compound-web);
diff --git a/apps/web/res/css/_font-sizes.pcss b/apps/web/res/css/_font-sizes.pcss
index 98ebf28af0..d7fdbce92d 100644
--- a/apps/web/res/css/_font-sizes.pcss
+++ b/apps/web/res/css/_font-sizes.pcss
@@ -24,7 +24,6 @@ Please see LICENSE files in the repository root for full details.
  */
 $font-1px: 0.0625rem;
 $font-8px: 0.5rem;
-$font-9px: 0.5625rem;
 $font-10px: 0.625rem;
 $font-10-4px: 0.6275rem;
 $font-11px: 0.6875rem; /* Compound equivalent: --cpd-font-size-body-xs */
@@ -37,17 +36,14 @@ $font-17px: 1.0625rem; /* Compound equivalent: --cpd-font-size-body-lg */
 $font-18px: 1.125rem;
 $font-20px: 1.25rem; /* Compound equivalent: --cpd-font-size-heading-sm */
 $font-22px: 1.375rem;
-$font-23px: 1.4375rem;
 $font-24px: 1.5rem; /* Compound equivalent: --cpd-font-size-heading-md */
 $font-25px: 1.5625rem;
 $font-26px: 1.625rem;
 $font-28px: 1.75rem; /* Compound equivalent: --cpd-font-size-heading-lg */
-$font-29px: 1.8125rem;
 $font-30px: 1.875rem;
 $font-32px: 2rem; /* Compound equivalent: --cpd-font-size-heading-xl */
 $font-34px: 2.125rem;
 $font-35px: 2.1875rem;
-$font-39px: 2.4375rem;
 $font-42px: 2.625rem;
 $font-44px: 2.75rem;
 $font-48px: 3rem;
diff --git a/apps/web/res/css/_index.pcss b/apps/web/res/css/_index.pcss
new file mode 100644
index 0000000000..716430b3fc
--- /dev/null
+++ b/apps/web/res/css/_index.pcss
@@ -0,0 +1,14 @@
+/*
+Copyright 2026 Element Creations 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.
+*/
+
+@layer compound-tokens, compound-web, shared-components, app-web;
+
+@import url("maplibre-gl/dist/maplibre-gl.css") layer(app-web);
+@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css") layer(compound-tokens);
+@import url("@vector-im/compound-web/dist/style.css") layer(compound-web);
+/** Shared components is layer-aware and will fit itself into the correct layer */
+@import url("@element-hq/web-shared-components/dist/element-web-shared-components.css");
diff --git a/apps/web/res/css/_spacing.pcss b/apps/web/res/css/_spacing.pcss
deleted file mode 100644
index 5887204c31..0000000000
--- a/apps/web/res/css/_spacing.pcss
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-/* SCSS variables representing a range of standard lengths.
- *
- * Avoid using these in new code: we cannot adjust their values without causing massive confusion, so they are
- * effectively equivalent to using hardcoded values.
- *
- * In future, we plan to introduce variables named according to their purpose rather than their size. Additionally,
- * we want switch to custom CSS properties (https://github.com/vector-im/element-web/issues/21656), so we might have
- * `--spacing-standard` or something. For now, you might as well use hardcoded px values for lengths (except for font
- * sizes, for which see the `$font-<N>px` variables).
- */
-$spacing-2: 2px;
-$spacing-4: 4px;
-$spacing-8: 8px;
-$spacing-12: 12px;
-$spacing-16: 16px;
-$spacing-20: 20px;
-$spacing-24: 24px;
-$spacing-28: 28px;
-$spacing-32: 32px;
-$spacing-40: 40px;
-$spacing-48: 48px;
-$spacing-64: 64px;
diff --git a/apps/web/res/css/components/views/beacon/_BeaconListItem.pcss b/apps/web/res/css/components/views/beacon/_BeaconListItem.pcss
index 9b3d0dd88f..018cfe9f07 100644
--- a/apps/web/res/css/components/views/beacon/_BeaconListItem.pcss
+++ b/apps/web/res/css/components/views/beacon/_BeaconListItem.pcss
@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
     display: flex;
     flex-direction: row;
     align-items: flex-start;
-    padding: $spacing-12 0;
+    padding: var(--cpd-space-3x) 0;
 
     border-bottom: 1px solid $system;
 
@@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
     flex: 0 0;
     box-sizing: border-box;
 
-    margin-right: $spacing-8;
+    margin-right: var(--cpd-space-2x);
     border: 2px solid $location-live-color;
     border-radius: 50%;
 }
@@ -44,7 +44,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_BeaconListItem_status {
     /* override beacon status padding */
     padding: 0 !important;
-    margin-bottom: $spacing-8;
+    margin-bottom: var(--cpd-space-2x);
 
     .mx_BeaconStatus_label {
         font-weight: var(--cpd-font-weight-semibold);
diff --git a/apps/web/res/css/components/views/beacon/_BeaconStatus.pcss b/apps/web/res/css/components/views/beacon/_BeaconStatus.pcss
index 52d27bea61..ecdccf7a1b 100644
--- a/apps/web/res/css/components/views/beacon/_BeaconStatus.pcss
+++ b/apps/web/res/css/components/views/beacon/_BeaconStatus.pcss
@@ -13,7 +13,7 @@ Please see LICENSE files in the repository root for full details.
     justify-content: flex-start;
 
     box-sizing: border-box;
-    padding: $spacing-8;
+    padding: var(--cpd-space-2x);
 
     color: var(--color);
     font-size: $font-12px;
@@ -34,7 +34,7 @@ Please see LICENSE files in the repository root for full details.
     width: 32px;
 
     flex: 0 0 32px;
-    margin-right: $spacing-8;
+    margin-right: var(--cpd-space-2x);
 }
 
 .mx_BeaconStatus_description {
@@ -43,7 +43,7 @@ Please see LICENSE files in the repository root for full details.
     flex-direction: column;
     line-height: $font-14px;
 
-    padding-right: $spacing-8;
+    padding-right: var(--cpd-space-2x);
 
     white-space: nowrap;
     overflow: hidden;
diff --git a/apps/web/res/css/components/views/beacon/_BeaconStatusTooltip.pcss b/apps/web/res/css/components/views/beacon/_BeaconStatusTooltip.pcss
index 8b5ef93eb1..be788be4b9 100644
--- a/apps/web/res/css/components/views/beacon/_BeaconStatusTooltip.pcss
+++ b/apps/web/res/css/components/views/beacon/_BeaconStatusTooltip.pcss
@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
     max-width: 150px;
     height: 38px;
     box-sizing: content-box;
-    padding-top: $spacing-8;
+    padding-top: var(--cpd-space-2x);
 }
 
 .mx_BeaconStatusTooltip_inner {
diff --git a/apps/web/res/css/components/views/beacon/_BeaconViewDialog.pcss b/apps/web/res/css/components/views/beacon/_BeaconViewDialog.pcss
index 8883aa4f09..2766642b5c 100644
--- a/apps/web/res/css/components/views/beacon/_BeaconViewDialog.pcss
+++ b/apps/web/res/css/components/views/beacon/_BeaconViewDialog.pcss
@@ -53,11 +53,11 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_BeaconViewDialog_mapFallbackMessage {
     color: $secondary-content;
-    margin-bottom: $spacing-16;
+    margin-bottom: var(--cpd-space-4x);
 }
 
 .mx_BeaconViewDialog_viewListButton {
     position: absolute;
-    top: $spacing-24;
-    left: $spacing-24;
+    top: var(--cpd-space-6x);
+    left: var(--cpd-space-6x);
 }
diff --git a/apps/web/res/css/components/views/beacon/_DialogOwnBeaconStatus.pcss b/apps/web/res/css/components/views/beacon/_DialogOwnBeaconStatus.pcss
index b9b02c284e..aca0a2b3f4 100644
--- a/apps/web/res/css/components/views/beacon/_DialogOwnBeaconStatus.pcss
+++ b/apps/web/res/css/components/views/beacon/_DialogOwnBeaconStatus.pcss
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_DialogOwnBeaconStatus {
     position: absolute;
-    bottom: $spacing-32;
+    bottom: var(--cpd-space-8x);
     width: 300px;
     margin-left: -150px;
     left: 50%;
@@ -23,14 +23,14 @@ Please see LICENSE files in the repository root for full details.
     border-radius: 8px;
     box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
 
-    padding: 0 $spacing-12;
+    padding: 0 var(--cpd-space-3x);
 }
 
 .mx_DialogOwnBeaconStatus_avatarIcon {
     flex: 0 0;
     height: 32px;
     width: 32px;
-    margin: $spacing-8 0 $spacing-8 0;
+    margin: var(--cpd-space-2x) 0 var(--cpd-space-2x) 0;
 }
 
 .mx_DialogOwnBeaconStatus_avatar {
@@ -39,7 +39,7 @@ Please see LICENSE files in the repository root for full details.
 
     border: 2px solid $location-live-color;
     border-radius: 50%;
-    margin: $spacing-8 0 $spacing-8 0;
+    margin: var(--cpd-space-2x) 0 var(--cpd-space-2x) 0;
 }
 
 .mx_DialogOwnBeaconStatus_status {
diff --git a/apps/web/res/css/components/views/beacon/_DialogSidebar.pcss b/apps/web/res/css/components/views/beacon/_DialogSidebar.pcss
index 7c882c2da8..a7d46dcf64 100644
--- a/apps/web/res/css/components/views/beacon/_DialogSidebar.pcss
+++ b/apps/web/res/css/components/views/beacon/_DialogSidebar.pcss
@@ -17,7 +17,7 @@ Please see LICENSE files in the repository root for full details.
     flex-direction: column;
 
     box-sizing: border-box;
-    padding: $spacing-16;
+    padding: var(--cpd-space-4x);
 
     background-color: $background;
     box-shadow: 0px 4px 4px $menu-box-shadow-color;
@@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
         justify-content: space-between;
 
         flex: 0 0;
-        margin-bottom: $spacing-16;
+        margin-bottom: var(--cpd-space-4x);
 
         color: $primary-content;
 
diff --git a/apps/web/res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss b/apps/web/res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss
index 4a8fce98f6..f9ce30203a 100644
--- a/apps/web/res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss
+++ b/apps/web/res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss
@@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.
     width: 100%;
     box-sizing: border-box;
 
-    padding: $spacing-4;
+    padding: var(--cpd-space-1x);
     text-align: center;
 
     background-color: $accent;
diff --git a/apps/web/res/css/components/views/beacon/_OwnBeaconStatus.pcss b/apps/web/res/css/components/views/beacon/_OwnBeaconStatus.pcss
index 331c404d1d..b06148feba 100644
--- a/apps/web/res/css/components/views/beacon/_OwnBeaconStatus.pcss
+++ b/apps/web/res/css/components/views/beacon/_OwnBeaconStatus.pcss
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_OwnBeaconStatus_button {
-    margin-left: $spacing-8;
+    margin-left: var(--cpd-space-2x);
 }
 
 .mx_EventTile[data-layout="bubble"] .mx_OwnBeaconStatus_button {
diff --git a/apps/web/res/css/components/views/beacon/_ShareLatestLocation.pcss b/apps/web/res/css/components/views/beacon/_ShareLatestLocation.pcss
index ada69fddc1..4ae7794d3e 100644
--- a/apps/web/res/css/components/views/beacon/_ShareLatestLocation.pcss
+++ b/apps/web/res/css/components/views/beacon/_ShareLatestLocation.pcss
@@ -17,7 +17,7 @@ Please see LICENSE files in the repository root for full details.
     /* override copyable text style to make compact */
     .mx_CopyableText_copyButton {
         height: 13px;
-        margin-left: $spacing-8 !important;
+        margin-left: var(--cpd-space-2x) !important;
         position: relative;
         top: -1px;
         width: 13px;
diff --git a/apps/web/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss b/apps/web/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss
index 56c11740ef..ed19d8de78 100644
--- a/apps/web/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss
+++ b/apps/web/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss
@@ -14,6 +14,6 @@ Please see LICENSE files in the repository root for full details.
 .mx_PollDetailHeader_icon {
     height: 16px;
     width: 16px;
-    margin-right: $spacing-8;
+    margin-right: var(--cpd-space-2x);
     vertical-align: middle;
 }
diff --git a/apps/web/res/css/components/views/dialogs/polls/_PollListItem.pcss b/apps/web/res/css/components/views/dialogs/polls/_PollListItem.pcss
index cd24c75937..8417b0ca20 100644
--- a/apps/web/res/css/components/views/dialogs/polls/_PollListItem.pcss
+++ b/apps/web/res/css/components/views/dialogs/polls/_PollListItem.pcss
@@ -15,7 +15,7 @@ Please see LICENSE files in the repository root for full details.
     display: grid;
     justify-content: left;
     align-items: center;
-    gap: $spacing-8;
+    gap: var(--cpd-space-2x);
     grid-template-columns: auto auto auto;
     grid-template-rows: auto;
     cursor: pointer;
@@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details.
     height: 14px;
     width: 14px;
     color: $quaternary-content;
-    padding-left: $spacing-8;
+    padding-left: var(--cpd-space-2x);
 }
 
 .mx_PollListItem_question {
diff --git a/apps/web/res/css/components/views/dialogs/polls/_PollListItemEnded.pcss b/apps/web/res/css/components/views/dialogs/polls/_PollListItemEnded.pcss
index 2eb7a185ac..b46102fe1b 100644
--- a/apps/web/res/css/components/views/dialogs/polls/_PollListItemEnded.pcss
+++ b/apps/web/res/css/components/views/dialogs/polls/_PollListItemEnded.pcss
@@ -22,7 +22,7 @@ Please see LICENSE files in the repository root for full details.
     display: grid;
     justify-content: left;
     align-items: center;
-    gap: $spacing-8;
+    gap: var(--cpd-space-2x);
     grid-template-columns: min-content 1fr min-content;
     grid-template-rows: auto;
 }
@@ -31,7 +31,7 @@ Please see LICENSE files in the repository root for full details.
     height: 14px;
     width: 14px;
     color: $quaternary-content;
-    padding-left: $spacing-8;
+    padding-left: var(--cpd-space-2x);
 }
 
 .mx_PollListItemEnded_date {
@@ -47,11 +47,11 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_PollListItemEnded_answers {
     display: grid;
-    gap: $spacing-8;
-    margin-top: $spacing-12;
+    gap: var(--cpd-space-2x);
+    margin-top: var(--cpd-space-3x);
 }
 
 .mx_PollListItemEnded_voteCount {
     /* 6px to match PollOption padding */
-    margin: $spacing-8 0 0 6px;
+    margin: var(--cpd-space-2x) 0 0 6px;
 }
diff --git a/apps/web/res/css/components/views/elements/_FilterDropdown.pcss b/apps/web/res/css/components/views/elements/_FilterDropdown.pcss
index 5385a614cc..98af15e151 100644
--- a/apps/web/res/css/components/views/elements/_FilterDropdown.pcss
+++ b/apps/web/res/css/components/views/elements/_FilterDropdown.pcss
@@ -8,11 +8,11 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_FilterDropdown {
     .mx_Dropdown_menu {
-        margin-top: $spacing-4;
+        margin-top: var(--cpd-space-1x);
         left: unset;
-        right: -$spacing-12;
+        right: calc(-1 * var(--cpd-space-3x));
         width: 232px;
-        padding: $spacing-12;
+        padding: var(--cpd-space-3x);
 
         border: 1px solid $quinary-content;
         border-radius: 8px;
@@ -48,7 +48,7 @@ Please see LICENSE files in the repository root for full details.
     position: relative;
     width: 100%;
     box-sizing: border-box;
-    padding: $spacing-8 0 $spacing-8 $spacing-20;
+    padding: var(--cpd-space-2x) 0 var(--cpd-space-2x) var(--cpd-space-5x);
 
     font-size: $font-12px;
     line-height: $font-15px;
@@ -59,7 +59,7 @@ Please see LICENSE files in the repository root for full details.
     height: 14px;
     width: 14px;
     position: absolute;
-    top: $spacing-8;
+    top: var(--cpd-space-2x);
     left: 0;
 }
 
@@ -70,5 +70,5 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_FilterDropdown_optionDescription {
     color: $secondary-content;
-    margin-top: $spacing-4;
+    margin-top: var(--cpd-space-1x);
 }
diff --git a/apps/web/res/css/components/views/elements/_FilterTabGroup.pcss b/apps/web/res/css/components/views/elements/_FilterTabGroup.pcss
index e2b2aba265..cf801d737d 100644
--- a/apps/web/res/css/components/views/elements/_FilterTabGroup.pcss
+++ b/apps/web/res/css/components/views/elements/_FilterTabGroup.pcss
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_FilterTabGroup {
     color: $primary-content;
     label {
-        margin-right: $spacing-12;
+        margin-right: var(--cpd-space-3x);
         cursor: pointer;
         span {
             display: inline-block;
diff --git a/apps/web/res/css/components/views/elements/_LearnMore.pcss b/apps/web/res/css/components/views/elements/_LearnMore.pcss
index e6fb16ec65..aa3e4a78fc 100644
--- a/apps/web/res/css/components/views/elements/_LearnMore.pcss
+++ b/apps/web/res/css/components/views/elements/_LearnMore.pcss
@@ -7,5 +7,5 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_LearnMore_button {
-    margin-left: $spacing-4;
+    margin-left: var(--cpd-space-1x);
 }
diff --git a/apps/web/res/css/components/views/location/_EnableLiveShare.pcss b/apps/web/res/css/components/views/location/_EnableLiveShare.pcss
index 9e56fa8dc5..d9273e6623 100644
--- a/apps/web/res/css/components/views/location/_EnableLiveShare.pcss
+++ b/apps/web/res/css/components/views/location/_EnableLiveShare.pcss
@@ -13,13 +13,13 @@ Please see LICENSE files in the repository root for full details.
     justify-content: flex-end;
     align-items: center;
 
-    padding: $spacing-32 $spacing-16;
+    padding: var(--cpd-space-8x) var(--cpd-space-4x);
     text-align: center;
     box-sizing: border-box;
 }
 
 .mx_EnableLiveShare_heading {
-    padding-top: $spacing-24;
+    padding-top: var(--cpd-space-6x);
 }
 
 .mx_EnableLiveShare_icon {
@@ -28,13 +28,13 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_EnableLiveShare_description {
-    padding: 0 $spacing-24;
-    margin-bottom: $spacing-32;
+    padding: 0 var(--cpd-space-6x);
+    margin-bottom: var(--cpd-space-8x);
     line-height: $font-20px;
 }
 
 .mx_EnableLiveShare_button {
-    margin-top: $spacing-32;
+    margin-top: var(--cpd-space-8x);
     height: 48px;
     width: 100%;
 }
diff --git a/apps/web/res/css/components/views/location/_LiveDurationDropdown.pcss b/apps/web/res/css/components/views/location/_LiveDurationDropdown.pcss
index fa29291877..163d035cca 100644
--- a/apps/web/res/css/components/views/location/_LiveDurationDropdown.pcss
+++ b/apps/web/res/css/components/views/location/_LiveDurationDropdown.pcss
@@ -7,5 +7,5 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_LiveDurationDropdown {
-    margin-bottom: $spacing-16;
+    margin-bottom: var(--cpd-space-4x);
 }
diff --git a/apps/web/res/css/components/views/location/_MapError.pcss b/apps/web/res/css/components/views/location/_MapError.pcss
index 61227f75a3..1dca427a46 100644
--- a/apps/web/res/css/components/views/location/_MapError.pcss
+++ b/apps/web/res/css/components/views/location/_MapError.pcss
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_MapError {
-    padding: 100px $spacing-32 0;
+    padding: 100px var(--cpd-space-8x) 0;
     text-align: center;
 
     --mx-map-error-icon-color: $secondary-content;
@@ -22,7 +22,7 @@ Please see LICENSE files in the repository root for full details.
     justify-content: center;
     align-items: center;
 
-    padding: $spacing-24;
+    padding: var(--cpd-space-6x);
     background-color: $panels;
     font-size: $font-12px;
     line-height: $font-16px;
@@ -36,7 +36,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MapError_heading {
-        padding-top: $spacing-8;
+        padding-top: var(--cpd-space-2x);
         /* override h3 heading size */
         font-size: inherit !important;
         font-weight: normal !important;
@@ -44,11 +44,11 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_MapError_message {
-    margin: $spacing-16 0 $spacing-32;
+    margin: var(--cpd-space-4x) 0 var(--cpd-space-8x);
 }
 
 .mx_MapError_heading {
-    padding-top: $spacing-24;
+    padding-top: var(--cpd-space-6x);
 }
 
 .mx_MapError_icon {
diff --git a/apps/web/res/css/components/views/location/_MapFallback.pcss b/apps/web/res/css/components/views/location/_MapFallback.pcss
index 160480ff25..adb4a32983 100644
--- a/apps/web/res/css/components/views/location/_MapFallback.pcss
+++ b/apps/web/res/css/components/views/location/_MapFallback.pcss
@@ -32,6 +32,6 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_MapFallback_icon {
     width: 65px;
-    margin-bottom: $spacing-16;
+    margin-bottom: var(--cpd-space-4x);
     color: $quaternary-content;
 }
diff --git a/apps/web/res/css/components/views/location/_ShareDialogButtons.pcss b/apps/web/res/css/components/views/location/_ShareDialogButtons.pcss
index 1c1d379f89..4ee0b8372c 100644
--- a/apps/web/res/css/components/views/location/_ShareDialogButtons.pcss
+++ b/apps/web/res/css/components/views/location/_ShareDialogButtons.pcss
@@ -22,7 +22,7 @@ button.mx_ShareDialogButtons_button {
     text-align: center;
     color: $secondary-content;
     position: absolute;
-    top: $spacing-16;
+    top: var(--cpd-space-4x);
 
     &:hover,
     &:focus {
@@ -30,11 +30,11 @@ button.mx_ShareDialogButtons_button {
     }
 
     &.left {
-        left: $spacing-16;
+        left: var(--cpd-space-4x);
     }
 
     &.right {
-        right: $spacing-16;
+        right: var(--cpd-space-4x);
     }
 }
 
diff --git a/apps/web/res/css/components/views/location/_ShareType.pcss b/apps/web/res/css/components/views/location/_ShareType.pcss
index fd99be3317..c4fae70b01 100644
--- a/apps/web/res/css/components/views/location/_ShareType.pcss
+++ b/apps/web/res/css/components/views/location/_ShareType.pcss
@@ -13,22 +13,22 @@ Please see LICENSE files in the repository root for full details.
     justify-content: flex-start;
     align-items: center;
 
-    padding: 60px $spacing-12 $spacing-32;
+    padding: 60px var(--cpd-space-3x) var(--cpd-space-8x);
 
     color: $primary-content;
 
     .mx_ShareType_wrapper_options {
         display: flex;
         flex-direction: column;
-        row-gap: $spacing-12;
+        row-gap: var(--cpd-space-3x);
         width: 100%;
-        margin-top: $spacing-12;
+        margin-top: var(--cpd-space-3x);
 
         .mx_ShareType_option {
             display: flex;
             align-items: center;
             justify-content: flex-start;
-            padding: $spacing-8 $spacing-20;
+            padding: var(--cpd-space-2x) var(--cpd-space-5x);
             background: none;
 
             border: 1px solid $quinary-content;
@@ -50,7 +50,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_ShareType_badge {
     height: 60px;
     width: 60px;
-    margin-bottom: $spacing-20;
+    margin-bottom: var(--cpd-space-5x);
     background-color: $accent;
     border-radius: 50%;
     border: 14px solid $accent;
@@ -60,7 +60,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_ShareType_heading {
-    padding-bottom: $spacing-32;
+    padding-bottom: var(--cpd-space-8x);
     text-align: center;
 }
 
@@ -68,7 +68,7 @@ Please see LICENSE files in the repository root for full details.
     height: 40px;
     width: 40px;
     box-sizing: border-box;
-    margin-right: $spacing-12;
+    margin-right: var(--cpd-space-3x);
     flex: 0 0 40px;
     border-width: 2px;
     border-style: solid;
diff --git a/apps/web/res/css/components/views/location/_ZoomButtons.pcss b/apps/web/res/css/components/views/location/_ZoomButtons.pcss
index bb7d72e4e8..5de7e9271c 100644
--- a/apps/web/res/css/components/views/location/_ZoomButtons.pcss
+++ b/apps/web/res/css/components/views/location/_ZoomButtons.pcss
@@ -8,11 +8,11 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_ZoomButtons {
     position: absolute;
-    bottom: $spacing-32;
-    right: $spacing-24;
+    bottom: var(--cpd-space-8x);
+    right: var(--cpd-space-6x);
     display: flex;
     flex-direction: column;
-    row-gap: $spacing-8;
+    row-gap: var(--cpd-space-2x);
 
     .mx_ZoomButtons_button {
         $ZoomButtons_button-size: 24px;
diff --git a/apps/web/res/css/components/views/messages/_MBeaconBody.pcss b/apps/web/res/css/components/views/messages/_MBeaconBody.pcss
index 054db68fea..50edf92ce0 100644
--- a/apps/web/res/css/components/views/messages/_MBeaconBody.pcss
+++ b/apps/web/res/css/components/views/messages/_MBeaconBody.pcss
@@ -32,8 +32,8 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_MBeaconBody_withoutMapInfoLastUpdated {
     /* 48px lines up with icon in BeaconStatus */
-    margin-top: -$spacing-8;
-    padding: 0 $spacing-8 $spacing-8 48px;
+    margin-top: calc(-1 * var(--cpd-space-2x));
+    padding: 0 var(--cpd-space-2x) var(--cpd-space-2x) 48px;
 
     color: $tertiary-content;
     font-size: $font-10px;
diff --git a/apps/web/res/css/components/views/messages/shared/_MediaProcessingError.pcss b/apps/web/res/css/components/views/messages/shared/_MediaProcessingError.pcss
index 39bbbde389..0342157415 100644
--- a/apps/web/res/css/components/views/messages/shared/_MediaProcessingError.pcss
+++ b/apps/web/res/css/components/views/messages/shared/_MediaProcessingError.pcss
@@ -7,6 +7,6 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_MediaProcessingError_Icon {
-    margin-right: $spacing-4;
+    margin-right: var(--cpd-space-1x);
     vertical-align: text-top;
 }
diff --git a/apps/web/res/css/components/views/polls/_PollOption.pcss b/apps/web/res/css/components/views/polls/_PollOption.pcss
index 2691cd90cb..df64e4d96a 100644
--- a/apps/web/res/css/components/views/polls/_PollOption.pcss
+++ b/apps/web/res/css/components/views/polls/_PollOption.pcss
@@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details.
     height: 12px;
     width: 12px;
     color: var(--cpd-color-icon-accent-tertiary);
-    margin-right: $spacing-4;
+    margin-right: var(--cpd-space-1x);
     vertical-align: middle;
 }
 
@@ -105,7 +105,7 @@ Please see LICENSE files in the repository root for full details.
     margin-right: 12px;
     border-radius: 8px;
     background-color: $system;
-    margin-top: $spacing-8;
+    margin-top: var(--cpd-space-2x);
 
     .mx_PollOption_popularityAmount {
         width: 0%;
diff --git a/apps/web/res/css/components/views/settings/devices/_DeviceDetailHeading.pcss b/apps/web/res/css/components/views/settings/devices/_DeviceDetailHeading.pcss
index 82b19b9ff1..93fc1cd8b2 100644
--- a/apps/web/res/css/components/views/settings/devices/_DeviceDetailHeading.pcss
+++ b/apps/web/res/css/components/views/settings/devices/_DeviceDetailHeading.pcss
@@ -19,7 +19,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_DeviceDetailHeading_renameForm {
     display: grid;
-    gap: $spacing-16;
+    gap: var(--cpd-space-4x);
     justify-content: left;
     grid-template-columns: 100%;
 }
@@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_DeviceDetailHeading_renameFormButtons {
     display: flex;
     flex-direction: row;
-    gap: $spacing-8;
+    gap: var(--cpd-space-2x);
 
     .mx_Spinner {
         width: auto;
@@ -37,7 +37,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_DeviceDetailHeading_renameFormInput {
     /* override field styles */
-    margin: 0 0 $spacing-4 0 !important;
+    margin: 0 0 var(--cpd-space-1x) 0 !important;
 }
 
 .mx_DeviceDetailHeading_renameFormHeading {
@@ -46,6 +46,6 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_DeviceDetailHeading_renameFormError {
     color: $alert;
-    padding-right: $spacing-4;
+    padding-right: var(--cpd-space-1x);
     display: block;
 }
diff --git a/apps/web/res/css/components/views/settings/devices/_DeviceDetails.pcss b/apps/web/res/css/components/views/settings/devices/_DeviceDetails.pcss
index 4b311d1c7c..1550c6a2cd 100644
--- a/apps/web/res/css/components/views/settings/devices/_DeviceDetails.pcss
+++ b/apps/web/res/css/components/views/settings/devices/_DeviceDetails.pcss
@@ -11,19 +11,19 @@ Please see LICENSE files in the repository root for full details.
     flex-direction: column;
     box-sizing: border-box;
 
-    margin-top: $spacing-16;
-    padding: $spacing-24;
+    margin-top: var(--cpd-space-4x);
+    padding: var(--cpd-space-6x);
     border-radius: 8px;
     border: 1px solid $quinary-content;
 }
 
 .mx_DeviceDetails_section {
-    padding-bottom: $spacing-20;
-    margin-bottom: $spacing-20;
+    padding-bottom: var(--cpd-space-5x);
+    margin-bottom: var(--cpd-space-5x);
     border-bottom: 1px solid $quinary-content;
 
     display: grid;
-    gap: $spacing-24;
+    gap: var(--cpd-space-6x);
     justify-content: left;
     grid-template-columns: 100%;
 
@@ -42,7 +42,7 @@ Please see LICENSE files in the repository root for full details.
         font-size: $font-12px;
         color: $secondary-content;
         line-height: $font-14px;
-        margin-top: $spacing-4;
+        margin-top: var(--cpd-space-1x);
     }
 }
 
@@ -61,7 +61,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     td {
-        padding-top: $spacing-8;
+        padding-top: var(--cpd-space-2x);
     }
 
     .mxDeviceDetails_metadataLabel {
@@ -77,7 +77,7 @@ Please see LICENSE files in the repository root for full details.
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: $spacing-4;
+    gap: var(--cpd-space-1x);
 }
 
 .mx_DeviceDetails_pushNotifications {
diff --git a/apps/web/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss b/apps/web/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss
index 7ac20c076f..1451841429 100644
--- a/apps/web/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss
+++ b/apps/web/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss
@@ -13,7 +13,7 @@ Please see LICENSE files in the repository root for full details.
     align-items: flex-start;
     box-sizing: border-box;
 
-    padding: $spacing-16;
+    padding: var(--cpd-space-4x);
 
     border: 1px solid $quinary-content;
     border-radius: 8px;
@@ -24,7 +24,7 @@ Please see LICENSE files in the repository root for full details.
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-right: $spacing-16;
+    margin-right: var(--cpd-space-4x);
     border-radius: 8px;
 
     height: 40px;
@@ -53,7 +53,7 @@ Please see LICENSE files in the repository root for full details.
     flex: 1 1;
 }
 .mx_DeviceSecurityCard_heading {
-    margin: 0 0 $spacing-4 0;
+    margin: 0 0 var(--cpd-space-1x) 0;
 }
 .mx_DeviceSecurityCard_description {
     margin: 0;
@@ -62,5 +62,5 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_DeviceSecurityCard_actions {
-    margin-top: $spacing-16;
+    margin-top: var(--cpd-space-4x);
 }
diff --git a/apps/web/res/css/components/views/settings/devices/_DeviceTile.pcss b/apps/web/res/css/components/views/settings/devices/_DeviceTile.pcss
index 07ee70792d..0fbe7f549b 100644
--- a/apps/web/res/css/components/views/settings/devices/_DeviceTile.pcss
+++ b/apps/web/res/css/components/views/settings/devices/_DeviceTile.pcss
@@ -22,20 +22,20 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_DeviceTile_metadata {
-    margin-top: $spacing-4;
+    margin-top: var(--cpd-space-1x);
     font: var(--cpd-font-body-sm-regular);
     color: $secondary-content;
 }
 
 .mx_DeviceTile_inactiveIcon {
     height: 14px;
-    margin-right: $spacing-8;
+    margin-right: var(--cpd-space-2x);
     vertical-align: middle;
 }
 
 .mx_DeviceTile_actions {
     display: grid;
-    gap: $spacing-8;
+    gap: var(--cpd-space-2x);
     grid-auto-flow: column;
-    margin-left: $spacing-8;
+    margin-left: var(--cpd-space-2x);
 }
diff --git a/apps/web/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss b/apps/web/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss
index 0d459b3473..8f0e8841ad 100644
--- a/apps/web/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss
+++ b/apps/web/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss
@@ -9,9 +9,9 @@ Please see LICENSE files in the repository root for full details.
 .mx_DeviceTypeIcon {
     flex: 0 0 auto;
     position: relative;
-    margin-right: $spacing-8;
+    margin-right: var(--cpd-space-2x);
     /* creates space for verification icon to overlap */
-    padding: 0 $spacing-8 $spacing-8 0;
+    padding: 0 var(--cpd-space-2x) var(--cpd-space-2x) 0;
 }
 
 .mx_DeviceTypeIcon_deviceIconWrapper {
@@ -22,7 +22,7 @@ Please see LICENSE files in the repository root for full details.
     width: 40px;
     box-sizing: border-box;
 
-    border: $spacing-8 solid var(--background-color);
+    border: var(--cpd-space-2x) solid var(--background-color);
     border-radius: 50%;
     color: var(--icon-color);
     background-color: var(--background-color);
@@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details.
     height: 24px;
     width: 24px;
     box-sizing: border-box;
-    padding: $spacing-4;
+    padding: var(--cpd-space-1x);
 
     border: 1px solid $quinary-content;
     border-radius: 50%;
diff --git a/apps/web/res/css/components/views/settings/devices/_FilteredDeviceList.pcss b/apps/web/res/css/components/views/settings/devices/_FilteredDeviceList.pcss
index 06f5a80b65..572c4baaf6 100644
--- a/apps/web/res/css/components/views/settings/devices/_FilteredDeviceList.pcss
+++ b/apps/web/res/css/components/views/settings/devices/_FilteredDeviceList.pcss
@@ -15,9 +15,9 @@ Please see LICENSE files in the repository root for full details.
 .mx_FilteredDeviceList_list {
     list-style-type: none;
     display: grid;
-    gap: $spacing-16;
+    gap: var(--cpd-space-4x);
     margin: 0;
-    padding: 0 $spacing-16;
+    padding: 0 var(--cpd-space-4x);
 }
 
 .mx_FilteredDeviceList_listItem {
@@ -26,13 +26,13 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_FilteredDeviceList_securityCard {
-    margin-bottom: $spacing-32;
+    margin-bottom: var(--cpd-space-8x);
 }
 
 .mx_FilteredDeviceList_noResults {
     width: 100%;
     text-align: center;
-    margin-bottom: $spacing-32;
+    margin-bottom: var(--cpd-space-8x);
 }
 
 .mx_FilteredDeviceList_headerButton {
@@ -40,7 +40,7 @@ Please see LICENSE files in the repository root for full details.
     /* override inline button styling */
     display: flex !important;
     flex-direction: row;
-    gap: $spacing-8;
+    gap: var(--cpd-space-2x);
 }
 
 .mx_FilteredDeviceList_deviceDetails {
diff --git a/apps/web/res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss b/apps/web/res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss
index eb50e097c1..c23ef7dba1 100644
--- a/apps/web/res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss
+++ b/apps/web/res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss
@@ -11,12 +11,12 @@ Please see LICENSE files in the repository root for full details.
     flex-direction: row;
     align-items: center;
     box-sizing: border-box;
-    gap: $spacing-16;
+    gap: var(--cpd-space-4x);
 
     width: 100%;
     height: 48px;
-    padding: 0 $spacing-16;
-    margin-bottom: $spacing-32;
+    padding: 0 var(--cpd-space-4x);
+    margin-bottom: var(--cpd-space-8x);
 
     background-color: $panels;
     border-radius: 8px;
diff --git a/apps/web/res/css/components/views/settings/devices/_SecurityRecommendations.pcss b/apps/web/res/css/components/views/settings/devices/_SecurityRecommendations.pcss
index 20c9343cda..19acc7dd64 100644
--- a/apps/web/res/css/components/views/settings/devices/_SecurityRecommendations.pcss
+++ b/apps/web/res/css/components/views/settings/devices/_SecurityRecommendations.pcss
@@ -7,5 +7,5 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_SecurityRecommendations_spacing {
-    height: $spacing-16;
+    height: var(--cpd-space-4x);
 }
diff --git a/apps/web/res/css/components/views/settings/shared/_SettingsSubsection.pcss b/apps/web/res/css/components/views/settings/shared/_SettingsSubsection.pcss
index 77ed0f9f82..6e7a5f7afd 100644
--- a/apps/web/res/css/components/views/settings/shared/_SettingsSubsection.pcss
+++ b/apps/web/res/css/components/views/settings/shared/_SettingsSubsection.pcss
@@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_SettingsSubsection_description {
-    margin-top: $spacing-8;
+    margin-top: var(--cpd-space-2x);
 }
 
 .mx_SettingsSubsection_text {
@@ -44,14 +44,14 @@ Please see LICENSE files in the repository root for full details.
     /* setting minwidth 0 makes columns definitely sized fixing horizontal overflow */
     grid-template-columns: minmax(0, 1fr);
     justify-items: flex-start;
-    margin-top: $spacing-24;
+    margin-top: var(--cpd-space-6x);
 
     summary {
         color: $accent;
     }
     details[open] {
         summary {
-            margin-bottom: $spacing-8;
+            margin-bottom: var(--cpd-space-2x);
         }
     }
 
diff --git a/apps/web/res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss b/apps/web/res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss
index eab923faa2..a156aa3b80 100644
--- a/apps/web/res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss
+++ b/apps/web/res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss
@@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.
     display: flex;
     flex-direction: row;
 
-    gap: $spacing-8;
+    gap: var(--cpd-space-2x);
 }
 
 .mx_SettingsSubsectionHeading_heading {
diff --git a/apps/web/res/css/compound/_SuccessDialog.pcss b/apps/web/res/css/compound/_SuccessDialog.pcss
index 951eceda99..54f7e4789f 100644
--- a/apps/web/res/css/compound/_SuccessDialog.pcss
+++ b/apps/web/res/css/compound/_SuccessDialog.pcss
@@ -10,11 +10,11 @@ Please see LICENSE files in the repository root for full details.
     text-align: center;
 
     .mx_Icon {
-        margin-bottom: $spacing-16;
+        margin-bottom: var(--cpd-space-4x);
     }
 
     .mx_Dialog_header {
-        margin: 0 0 $spacing-16;
+        margin: 0 0 var(--cpd-space-4x);
         padding: 0;
     }
 
@@ -24,7 +24,7 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_Dialog_content {
         color: $secondary-content;
-        margin: 0 0 $spacing-40;
+        margin: 0 0 var(--cpd-space-10x);
     }
 
     .mx_Dialog_buttons {
diff --git a/apps/web/res/css/rethemendex.sh b/apps/web/res/css/rethemendex.sh
index 3f0ed28e3f..593a4202cf 100755
--- a/apps/web/res/css/rethemendex.sh
+++ b/apps/web/res/css/rethemendex.sh
@@ -8,7 +8,7 @@ cd `dirname $0`
     # we used to have exclude /themes from the find at this point.
     # as themes are no longer a spurious subdirectory of css/, we don't
     # need it any more.
-    find . -iname _\*.pcss | fgrep -v _components.pcss | fgrep -v _compound.pcss | LC_ALL=C sort |
+    find . -iname _\*.pcss | fgrep -v _components.pcss | fgrep -v _index.pcss | LC_ALL=C sort |
         while read i; do
             echo "@import \"$i\";"
         done
diff --git a/apps/web/res/css/structures/_AutocompleteInput.pcss b/apps/web/res/css/structures/_AutocompleteInput.pcss
index 1505026424..2e69622c5a 100644
--- a/apps/web/res/css/structures/_AutocompleteInput.pcss
+++ b/apps/web/res/css/structures/_AutocompleteInput.pcss
@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_AutocompleteInput_search_icon {
-    margin-left: $spacing-8;
+    margin-left: var(--cpd-space-2x);
     fill: $secondary-content;
 }
 
@@ -32,7 +32,7 @@ Please see LICENSE files in the repository root for full details.
         resize: none;
         /* `!important` is required to bypass global input styles. */
         margin: 0 !important;
-        padding: $spacing-8 9px;
+        padding: var(--cpd-space-2x) 9px;
         border: none !important;
         color: $primary-content !important;
         font-weight: normal !important;
@@ -55,15 +55,15 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_AutocompleteInput_editor_selection {
     display: flex;
-    margin-left: $spacing-8;
+    margin-left: var(--cpd-space-2x);
 }
 
 .mx_AutocompleteInput_editor_selection_pill {
     display: flex;
     align-items: center;
     border-radius: 12px;
-    padding-left: $spacing-8;
-    padding-right: $spacing-8;
+    padding-left: var(--cpd-space-2x);
+    padding-right: var(--cpd-space-2x);
     background-color: $username-variant1-color;
     color: #ffffff;
     font-size: $font-12px;
@@ -88,7 +88,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_AutocompleteInput_suggestion {
     display: flex;
     align-items: center;
-    padding: $spacing-8;
+    padding: var(--cpd-space-2x);
     cursor: pointer;
 
     > * {
@@ -112,7 +112,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_AutocompleteInput_suggestion_title {
-    margin-right: $spacing-8;
+    margin-right: var(--cpd-space-2x);
 }
 
 .mx_AutocompleteInput_suggestion_description {
diff --git a/apps/web/res/css/structures/_BackdropPanel.pcss b/apps/web/res/css/structures/_BackdropPanel.pcss
deleted file mode 100644
index ee12886880..0000000000
--- a/apps/web/res/css/structures/_BackdropPanel.pcss
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
-Copyright 2021-2024 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_BackdropPanel {
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100vh;
-    width: 100%;
-    overflow: hidden;
-    filter: blur(var(--lp-background-blur));
-    /* Force a new layer for the backdropPanel so it's better hardware supported */
-    transform: translateZ(0);
-}
-
-.mx_BackdropPanel--image {
-    position: absolute;
-    top: 0;
-    left: 0;
-    min-height: 100%;
-    z-index: 0;
-    pointer-events: none;
-    overflow: hidden;
-    user-select: none;
-}
diff --git a/apps/web/res/css/structures/_ErrorMessage.pcss b/apps/web/res/css/structures/_ErrorMessage.pcss
index aaf2dc3b51..75516b2407 100644
--- a/apps/web/res/css/structures/_ErrorMessage.pcss
+++ b/apps/web/res/css/structures/_ErrorMessage.pcss
@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
     color: $alert;
     display: flex;
     font-size: $font-12px;
-    gap: $spacing-8;
+    gap: var(--cpd-space-2x);
     line-height: 1.2em;
     min-height: 2.4em;
 }
diff --git a/apps/web/res/css/structures/_FilePanel.pcss b/apps/web/res/css/structures/_FilePanel.pcss
index 615e2a32ae..f9396bf048 100644
--- a/apps/web/res/css/structures/_FilePanel.pcss
+++ b/apps/web/res/css/structures/_FilePanel.pcss
@@ -45,6 +45,10 @@ Please see LICENSE files in the repository root for full details.
             margin-top: var(--cpd-space-4x);
         }
 
+        .mx_ImageBody {
+            gap: 0;
+        }
+
         /* anchor link as wrapper */
         .mx_EventTile_senderDetailsLink {
             text-decoration: none;
@@ -63,8 +67,6 @@ Please see LICENSE files in the repository root for full details.
 
                 .mx_MessageTimestamp {
                     margin-left: auto;
-                    font: var(--cpd-font-body-xs-regular);
-                    color: var(--cpd-color-text-secondary);
                 }
             }
         }
diff --git a/apps/web/res/css/structures/_LeftPanel.pcss b/apps/web/res/css/structures/_LeftPanel.pcss
index e72579064a..aa6f67b196 100644
--- a/apps/web/res/css/structures/_LeftPanel.pcss
+++ b/apps/web/res/css/structures/_LeftPanel.pcss
@@ -43,7 +43,6 @@ Please see LICENSE files in the repository root for full details.
     height: 100%; /* ensure space panel is still scrollable with an outer wrapper */
 
     .mx_LeftPanel_wrapper--user {
-        background-color: $roomlist-bg-color;
         display: flex;
         overflow: hidden;
         position: relative;
@@ -57,7 +56,10 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_LeftPanel {
-    background-color: $roomlist-bg-color;
+    background-color: var(--cpd-color-bg-canvas-default);
+    /* The room list is not designed to be collapsed to just icons. */
+    /* 224 + 68(spaces bar) was deemed by design to be a good minimum for the left panel. */
+    --collapsedWidth: 224px;
 
     /* Create a row-based flexbox for the space panel and the room list */
     display: flex;
@@ -66,119 +68,12 @@ Please see LICENSE files in the repository root for full details.
     flex-grow: 1;
     overflow: hidden;
 
-    /* Note: The 'room list' in this context is actually everything that isn't the tag */
-    /* panel, such as the menu options, breadcrumbs, filtering, etc */
     .mx_LeftPanel_roomListContainer {
-        background-color: $roomlist-bg-color;
         flex: 1 0 0;
         min-width: 0;
         /* Create another flexbox (this time a column) for the room list components */
         display: flex;
         flex-direction: column;
-
-        .mx_LeftPanel_userHeader {
-            /* 12px top, 12px sides, 20px bottom (using 13px bottom to account
-             * for internal whitespace in the breadcrumbs)
-             */
-            padding: 12px;
-            flex-shrink: 0; /* to convince safari's layout engine the flexbox is fine */
-
-            /* Create another flexbox column for the rows to stack within */
-            display: flex;
-            flex-direction: column;
-        }
-
-        .mx_LeftPanel_breadcrumbsContainer {
-            overflow-y: hidden;
-            overflow-x: scroll;
-            margin: 12px 12px 0 12px;
-            flex: 0 0 auto;
-            /* Create yet another flexbox, this time within the row, to ensure items stay */
-            /* aligned correctly. This is also a row-based flexbox. */
-            display: flex;
-            align-items: center;
-            contain: content;
-
-            &.mx_IndicatorScrollbar_leftOverflow {
-                mask-image: linear-gradient(90deg, transparent, black 5%);
-            }
-
-            &.mx_IndicatorScrollbar_rightOverflow {
-                mask-image: linear-gradient(90deg, black, black 95%, transparent);
-            }
-
-            &.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
-                mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
-            }
-        }
-
-        .mx_LeftPanel_filterContainer {
-            margin: 0 12px;
-            padding: 12px 0 8px;
-            border-bottom: 1px solid $quinary-content;
-
-            flex-shrink: 0; /* to convince safari's layout engine the flexbox is fine */
-
-            /* Create a flexbox to organize the inputs */
-            display: flex;
-            align-items: center;
-
-            & + .mx_LegacyRoomListHeader {
-                margin-top: 12px;
-            }
-
-            .mx_LeftPanel_dialPadButton,
-            .mx_LeftPanel_exploreButton {
-                width: 20px;
-                height: 20px;
-                padding: var(--cpd-space-1-5x);
-                border-radius: 8px;
-                background-color: $panel-actions;
-                margin-left: 8px;
-                /* For enhanced visibility under contrast control */
-                outline: 1px solid transparent;
-
-                svg {
-                    width: inherit;
-                    height: inherit;
-                    display: block;
-                    color: $secondary-content;
-                }
-
-                &:hover {
-                    background-color: $tertiary-content;
-
-                    svg {
-                        color: $background;
-                    }
-                }
-            }
-        }
-
-        .mx_LegacyRoomListHeader:first-child {
-            margin-top: 12px;
-        }
-
-        .mx_LeftPanel_roomListWrapper {
-            /* Make the y-scrollbar more responsive */
-            padding-right: 2px;
-            overflow: hidden;
-            margin-top: 10px; /* so we're not up against the search/filter */
-            flex: 1 0 0; /* needed in Safari to properly set flex-basis */
-
-            &.mx_LeftPanel_roomListWrapper_stickyBottom {
-                padding-bottom: 32px;
-            }
-
-            &.mx_LeftPanel_roomListWrapper_stickyTop {
-                padding-top: 32px;
-            }
-        }
-
-        .mx_LeftPanel_actualRoomListContainer {
-            position: relative; /* for sticky headers */
-            height: 100%; /* ensure scrolling still works */
-        }
     }
 
     /* These styles override the defaults for the minimized (66px) layout */
@@ -189,40 +84,10 @@ Please see LICENSE files in the repository root for full details.
 
         .mx_LeftPanel_roomListContainer {
             width: var(--collapsedWidth);
-
-            .mx_LeftPanel_userHeader {
-                flex-direction: row;
-                justify-content: center;
-            }
-
-            .mx_LeftPanel_filterContainer {
-                /* Organize the flexbox into a centered column layout */
-                flex-direction: column;
-                justify-content: center;
-
-                .mx_LeftPanel_dialPadButton {
-                    margin-left: 0;
-                    margin-top: 8px;
-                    background-color: transparent;
-                }
-
-                .mx_LeftPanel_exploreButton {
-                    margin-left: 0;
-                    margin-top: 8px;
-                }
-            }
         }
     }
 }
 
-.mx_LeftPanel_newRoomList {
-    /* Thew new rooms list is not designed to be collapsed to just icons. */
-    /* 224 + 68(spaces bar) was deemed by design to be a good minimum for the left panel. */
-    --collapsedWidth: 224px;
-    /* Important to force the color on ED titlebar until we remove the old room list */
-    background-color: var(--cpd-color-bg-canvas-default) !important;
-}
-
 #left-panel .mx_LeftPanel_wrapper--user {
     /*
      * Disable background when using the new room list.
diff --git a/apps/web/res/css/structures/_QuickSettingsButton.pcss b/apps/web/res/css/structures/_QuickSettingsButton.pcss
index b681cecb30..8df560c9ef 100644
--- a/apps/web/res/css/structures/_QuickSettingsButton.pcss
+++ b/apps/web/res/css/structures/_QuickSettingsButton.pcss
@@ -110,9 +110,7 @@ Please see LICENSE files in the repository root for full details.
             display: flex;
         }
     }
-}
 
-.mx_QuickSettingsButton_ContextMenuWrapper_new_room_list {
     .mx_QuickThemeSwitcher {
         margin-top: var(--cpd-space-2x);
     }
diff --git a/apps/web/res/css/structures/_RoomSearch.pcss b/apps/web/res/css/structures/_RoomSearch.pcss
deleted file mode 100644
index beb60e7ef9..0000000000
--- a/apps/web/res/css/structures/_RoomSearch.pcss
+++ /dev/null
@@ -1,93 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-/* Note: this component expects to be contained within a flexbox */
-.mx_RoomSearch {
-    flex: 1;
-    min-width: 0;
-    border-radius: 8px;
-    background-color: $panel-actions;
-    /* keep border thickness consistent to prevent movement */
-    border: 1px solid transparent;
-    height: 28px;
-    padding: 1px;
-
-    /* Create a flexbox for the icons (easier to manage) */
-    display: flex;
-    align-items: center;
-
-    cursor: pointer;
-
-    .mx_RoomSearch_icon {
-        width: 20px;
-        height: 20px;
-        color: $secondary-content;
-        margin-left: var(--cpd-space-2x);
-        flex-shrink: 0;
-    }
-
-    .mx_RoomSearch_spotlightTriggerText {
-        color: var(--cpd-color-text-secondary);
-        flex: 1;
-        min-width: 0;
-        /* the following rules are to match that of a real input field */
-        overflow: hidden;
-        margin: 9px;
-        font: var(--cpd-font-body-sm-semibold);
-    }
-
-    .mx_RoomSearch_shortcutPrompt {
-        border-radius: 6px;
-        background-color: $panel-actions;
-        padding: 2px 4px;
-        user-select: none;
-        font-size: $font-12px;
-        line-height: $font-15px;
-        font-family: inherit;
-        font-weight: var(--cpd-font-weight-semibold);
-        color: $light-fg-color;
-        margin-right: 6px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    &.mx_RoomSearch_minimized {
-        height: 32px;
-        min-height: 32px;
-        width: 32px;
-        box-sizing: border-box;
-
-        .mx_RoomSearch_icon {
-            margin: 0 auto;
-            padding: 1px;
-            align-self: center;
-        }
-
-        .mx_RoomSearch_shortcutPrompt {
-            display: none;
-        }
-    }
-
-    &:hover {
-        background-color: $tertiary-content;
-
-        .mx_RoomSearch_spotlightTriggerText {
-            color: $background;
-        }
-
-        .mx_RoomSearch_shortcutPrompt {
-            background-color: $background;
-            color: $secondary-content;
-        }
-
-        .mx_RoomSearch_icon {
-            color: $background;
-        }
-    }
-}
diff --git a/apps/web/res/css/structures/_RoomView.pcss b/apps/web/res/css/structures/_RoomView.pcss
index e3342f69bf..267d7c138d 100644
--- a/apps/web/res/css/structures/_RoomView.pcss
+++ b/apps/web/res/css/structures/_RoomView.pcss
@@ -97,10 +97,16 @@ Please see LICENSE files in the repository root for full details.
         flex: 1;
         display: flex;
         flex-direction: column;
-        margin-right: calc(var(--container-gap-width) / 2);
     }
 }
 
+/* Restore the gap between the timeline and the right panel only when the panel is open.
+   Without this, the scrollbar on mx_RoomView_messagePanel would sit 4 px away from the
+   viewport edge in Firefox (which does not support overflow:overlay). */
+.mx_MainSplit:has(.mx_RightPanel_ResizeWrapper) .mx_RoomView_timeline {
+    margin-right: calc(var(--container-gap-width) / 2);
+}
+
 .mx_RoomView_statusArea {
     width: 100%;
     flex: 0 0 auto;
diff --git a/apps/web/res/css/structures/_SpacePanel.pcss b/apps/web/res/css/structures/_SpacePanel.pcss
index a3c8b82701..95cc09eb34 100644
--- a/apps/web/res/css/structures/_SpacePanel.pcss
+++ b/apps/web/res/css/structures/_SpacePanel.pcss
@@ -14,7 +14,8 @@ Please see LICENSE files in the repository root for full details.
     --height-nested: 24px;
     --height-topLevel: 32px;
 
-    background-color: $spacePanel-bg-color;
+    background-color: var(--cpd-color-bg-canvas-default);
+    border-right: 1px solid var(--cpd-color-bg-subtle-primary);
     flex: 0 0 auto;
     padding: 0;
     margin: 0;
@@ -33,11 +34,6 @@ Please see LICENSE files in the repository root for full details.
         width: 68px;
     }
 
-    &.newUi {
-        background-color: var(--cpd-color-bg-canvas-default);
-        border-right: 1px solid var(--cpd-color-bg-subtle-primary);
-    }
-
     .mx_SpacePanel_toggleCollapse {
         position: absolute;
         width: 18px;
@@ -257,19 +253,19 @@ Please see LICENSE files in the repository root for full details.
         right: -3px;
         top: -3px;
 
-        .mx_NotificationBadge {
+        .mx_SpacePanel_notificationBadge {
             margin: 0 2px; /* centering */
             background-clip: padding-box;
         }
 
-        .mx_NotificationBadge_dot {
+        [data-badge-type="dot"] {
             /* make the smaller dot occupy the same width for centering */
             margin: 0 -1px 0 0;
             border: 3px solid $spacePanel-bg-color;
         }
 
-        .mx_NotificationBadge_2char,
-        .mx_NotificationBadge_3char {
+        [data-badge-type="badge_2char"],
+        [data-badge-type="badge_3char"] {
             margin: -5px -5px 0 0;
             border: 2px solid $spacePanel-bg-color;
         }
diff --git a/apps/web/res/css/structures/_SplashPage.pcss b/apps/web/res/css/structures/_SplashPage.pcss
index 6eb01478c9..539fe1c76d 100644
--- a/apps/web/res/css/structures/_SplashPage.pcss
+++ b/apps/web/res/css/structures/_SplashPage.pcss
@@ -33,9 +33,9 @@ Please see LICENSE files in the repository root for full details.
             url("/res/img/noise.png"),
             /* gradient to apply different amounts of dithering to different parts of the gradient */
             linear-gradient(
-                    to bottom,
-                    /* 10% dithering at the top */ rgb(0, 0, 0, 0.9) 20%,
-                    /* 80% dithering at the bottom */ rgb(0, 0, 0, 0.2) 100%
-                );
+                to bottom,
+                /* 10% dithering at the top */ rgb(0, 0, 0, 0.9) 20%,
+                /* 80% dithering at the bottom */ rgb(0, 0, 0, 0.2) 100%
+            );
     }
 }
diff --git a/apps/web/res/css/structures/_ThreadsActivityCentre.pcss b/apps/web/res/css/structures/_ThreadsActivityCentre.pcss
index ecd5207df7..e9681be1d3 100644
--- a/apps/web/res/css/structures/_ThreadsActivityCentre.pcss
+++ b/apps/web/res/css/structures/_ThreadsActivityCentre.pcss
@@ -89,7 +89,7 @@
 
         /* Hide the notification badge on hover — compound's `nav-hint ~ *` rule would normally
          * do this, but the app-web CSS layer overrides compound-web regardless of specificity. */
-        &:hover .mx_NotificationBadge {
+        &:hover .mx_ThreadsActivityCentre_notificationBadge {
             display: none;
         }
     }
diff --git a/apps/web/res/css/structures/_ToastContainer.pcss b/apps/web/res/css/structures/_ToastContainer.pcss
index 5d73403be2..6f5b8158ec 100644
--- a/apps/web/res/css/structures/_ToastContainer.pcss
+++ b/apps/web/res/css/structures/_ToastContainer.pcss
@@ -9,10 +9,9 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_ToastContainer {
     position: absolute;
-    top: 0;
-    left: 70px;
+    top: 12px;
+    left: 62px;
     z-index: 101;
-    padding: 4px;
     display: grid;
     grid-template-rows: 1fr 28px 8px;
 
@@ -33,7 +32,7 @@ Please see LICENSE files in the repository root for full details.
         color: $primary-content;
         box-shadow: 0px 4px 24px rgb(0, 0, 0, 0.1);
         border: var(--cpd-border-width-1) solid var(--cpd-color-border-interactive-secondary);
-        border-radius: calc(var(--cpd-space-6x) - var(--cpd-border-width-1));
+        border-radius: var(--cpd-space-3x);
         overflow: hidden;
         display: grid;
         grid-template-columns: 20px 1fr auto;
diff --git a/apps/web/res/css/structures/_ViewSource.pcss b/apps/web/res/css/structures/_ViewSource.pcss
index b01f8de8bd..952aa6be14 100644
--- a/apps/web/res/css/structures/_ViewSource.pcss
+++ b/apps/web/res/css/structures/_ViewSource.pcss
@@ -17,8 +17,8 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_ViewSource_header {
         border-bottom: 1px solid $quinary-content;
-        padding-bottom: $spacing-12;
-        margin-bottom: $spacing-12;
+        padding-bottom: var(--cpd-space-3x);
+        margin-bottom: var(--cpd-space-3x);
         font-family: monospace;
 
         .mx_CopyableText {
@@ -30,11 +30,11 @@ Please see LICENSE files in the repository root for full details.
         font-size: $font-17px;
         font-weight: 400;
         color: $primary-content;
-        margin-top: $spacing-12;
+        margin-top: var(--cpd-space-3x);
     }
 
     .mx_ViewSource_details {
-        margin-top: $spacing-12;
+        margin-top: var(--cpd-space-3x);
     }
 
     .mx_CopyableText_border {
diff --git a/apps/web/res/css/structures/auth/_Registration.pcss b/apps/web/res/css/structures/auth/_Registration.pcss
index a1833df1d0..4527e262d8 100644
--- a/apps/web/res/css/structures/auth/_Registration.pcss
+++ b/apps/web/res/css/structures/auth/_Registration.pcss
@@ -31,6 +31,12 @@ Please see LICENSE files in the repository root for full details.
     }
 }
 
+/* Medium rather than the bold every other auth error uses: this one sits directly above the button it
+   is disabling, and does not need to shout over it. Scoped so the login errors keep their weight. */
+.mx_Login_error.mx_Registration_rateLimitError {
+    font-weight: var(--cpd-font-weight-medium);
+}
+
 .mx_Register_footerActions {
     display: flex;
     flex-direction: row;
diff --git a/apps/web/res/css/views/audio_messages/_PlayPauseButton.pcss b/apps/web/res/css/views/audio_messages/_PlayPauseButton.pcss
deleted file mode 100644
index 47df79c5d3..0000000000
--- a/apps/web/res/css/views/audio_messages/_PlayPauseButton.pcss
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2021 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_PlayPauseButton {
-    position: relative;
-    width: 32px;
-    height: 32px;
-    min-width: 32px; /* for when the button is used in a flexbox */
-    min-height: 32px; /* for when the button is used in a flexbox */
-    border-radius: 32px;
-    background-color: $system;
-    /* !important override compound icon button */
-    padding: var(--cpd-space-1-5x) !important;
-    box-sizing: border-box;
-
-    svg {
-        width: 20px;
-        height: 20px;
-    }
-
-    &[disabled] svg {
-        opacity: 0.5;
-    }
-}
diff --git a/apps/web/res/css/views/audio_messages/_PlaybackContainer.pcss b/apps/web/res/css/views/audio_messages/_PlaybackContainer.pcss
index 087726a1f7..6aba6a150e 100644
--- a/apps/web/res/css/views/audio_messages/_PlaybackContainer.pcss
+++ b/apps/web/res/css/views/audio_messages/_PlaybackContainer.pcss
@@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.
 /* are shared amongst multiple voice message components. */
 
 /* Container for live recording and playback controls */
-.mx_MediaBody.mx_VoiceMessagePrimaryContainer {
+.mx_VoiceMessagePrimaryContainer {
     /* Match mx_MediaBody spacing, offsetting the waveform's 1px internal right padding. */
     padding: 6px 11px 6px 12px;
 
diff --git a/apps/web/res/css/views/auth/_AuthBody.pcss b/apps/web/res/css/views/auth/_AuthBody.pcss
index dcff439107..43dd151012 100644
--- a/apps/web/res/css/views/auth/_AuthBody.pcss
+++ b/apps/web/res/css/views/auth/_AuthBody.pcss
@@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
     h1 {
         font-size: $font-24px;
         font-weight: var(--cpd-font-weight-semibold);
-        margin-top: $spacing-8;
+        margin-top: var(--cpd-space-2x);
         color: $authpage-primary-color;
     }
 
@@ -64,7 +64,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_AuthBody_text {
-        margin-bottom: $spacing-48;
+        margin-bottom: var(--cpd-space-12x);
         margin-top: 0;
     }
 
@@ -98,7 +98,7 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_Login_submit {
         height: 32px;
-        margin-top: $spacing-16;
+        margin-top: var(--cpd-space-4x);
     }
 
     .mx_ErrorMessage {
@@ -139,7 +139,7 @@ Please see LICENSE files in the repository root for full details.
     min-height: 600px;
 
     h1 {
-        margin: $spacing-24 0;
+        margin: var(--cpd-space-6x) 0;
     }
 
     .mx_AuthBody_button-container {
@@ -148,24 +148,24 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_Login_submit {
-        margin: 0 0 $spacing-16;
+        margin: 0 0 var(--cpd-space-4x);
     }
 
     .mx_AuthBody_text {
-        margin-bottom: $spacing-32;
+        margin-bottom: var(--cpd-space-8x);
 
         p {
-            margin: 0 0 $spacing-8;
+            margin: 0 0 var(--cpd-space-2x);
         }
     }
 
     .mx_AuthBody_sign-in-instead-button {
         font-weight: var(--cpd-font-weight-semibold);
-        padding: $spacing-4;
+        padding: var(--cpd-space-1x);
     }
 
     .mx_AuthBody_fieldRow {
-        margin-bottom: $spacing-24;
+        margin-bottom: var(--cpd-space-6x);
     }
 
     .mx_AccessibleButton.mx_AccessibleButton_hasKind {
@@ -182,7 +182,7 @@ Please see LICENSE files in the repository root for full details.
     align-items: center;
     color: $secondary-content;
     display: flex;
-    gap: $spacing-8;
+    gap: var(--cpd-space-2x);
 }
 
 .mx_AuthBody_resend-button {
@@ -190,8 +190,8 @@ Please see LICENSE files in the repository root for full details.
     border-radius: 8px;
     color: $accent;
     display: flex;
-    gap: $spacing-4;
-    padding: $spacing-4;
+    gap: var(--cpd-space-1x);
+    padding: var(--cpd-space-1x);
 
     &:hover {
         background-color: $system;
@@ -232,7 +232,7 @@ Please see LICENSE files in the repository root for full details.
     text-align: center;
 
     .mx_AuthBody_paddedFooter_title {
-        margin-top: $spacing-16;
+        margin-top: var(--cpd-space-4x);
         font-size: $font-15px;
         line-height: $font-24px;
 
@@ -243,7 +243,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_AuthBody_paddedFooter_subtitle {
-        margin-top: $spacing-8;
+        margin-top: var(--cpd-space-2x);
         font-size: $font-10px;
         line-height: $font-14px;
     }
@@ -259,7 +259,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_SSOButtons + .mx_AuthBody_changeFlow {
-    margin-top: $spacing-24;
+    margin-top: var(--cpd-space-6x);
 }
 
 .mx_AuthBody_spinner {
diff --git a/apps/web/res/css/views/auth/_LoginWithQR.pcss b/apps/web/res/css/views/auth/_LoginWithQR.pcss
index 82703e08e2..9649f51d24 100644
--- a/apps/web/res/css/views/auth/_LoginWithQR.pcss
+++ b/apps/web/res/css/views/auth/_LoginWithQR.pcss
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_LoginWithQRSection p {
     margin-top: 0;
-    margin-bottom: $spacing-16;
+    margin-bottom: var(--cpd-space-4x);
 }
 
 .mx_LoginWithQRSection {
@@ -19,54 +19,35 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_LoginWithQRSection .mx_AccessibleButton svg {
-    margin-right: $spacing-12;
+    margin-right: var(--cpd-space-3x);
 }
 
-.mx_AuthPage .mx_LoginWithQR {
-    .mx_AccessibleButton {
-        display: block !important;
-    }
+.mx_LoginWithQR_dialog .mx_Dialog {
+    padding: var(--cpd-space-12x) var(--cpd-space-12x) var(--cpd-space-10x);
 
-    .mx_AccessibleButton + .mx_AccessibleButton {
-        margin-top: $spacing-8;
+    .mx_LoginWithQR {
+        width: 500px;
     }
-
-    font-size: $font-15px;
 }
 
 .mx_LoginWithQR {
-    min-height: 350px;
     display: flex;
     flex-direction: column;
+    min-height: 500px;
     font: var(--cpd-font-body-md-regular);
 
     h1 {
         font-size: $font-24px;
         margin-bottom: 0;
-
-        svg {
-            &.normal {
-                color: $secondary-content;
-            }
-            &.error {
-                color: $alert;
-            }
-            &.success {
-                color: $accent;
-            }
-            height: 1.3em;
-            margin-right: $spacing-8;
-            vertical-align: middle;
-        }
     }
 
     h2 {
-        margin-top: $spacing-24;
+        margin-top: var(--cpd-space-6x);
     }
 
     .mx_LoginWithQR_qrWrapper {
         display: flex;
-        padding: $spacing-28 0;
+        padding: var(--cpd-space-7x) 0;
 
         .mx_Spinner {
             /* Match the size of the QR code to prevent jumps */
@@ -77,7 +58,7 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_LoginWithQR_confirmationDigits {
         text-align: center;
-        margin: $spacing-48 auto;
+        margin: var(--cpd-space-12x) auto;
         font-weight: var(--cpd-font-weight-semibold);
         font-size: $font-24px;
         color: $primary-content;
@@ -85,8 +66,8 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_LoginWithQR_confirmationAlert {
         border: 1px solid $quaternary-content;
-        border-radius: $spacing-8;
-        padding: $spacing-8;
+        border-radius: var(--cpd-space-2x);
+        padding: var(--cpd-space-2x);
         line-height: 1.5em;
         display: flex;
 
@@ -134,34 +115,6 @@ Please see LICENSE files in the repository root for full details.
         margin-bottom: var(--cpd-space-1x);
     }
 
-    .mx_LoginWithQR_icon {
-        width: 56px;
-        height: 56px;
-        border-radius: 8px;
-        box-sizing: border-box;
-        padding: var(--cpd-space-3x);
-        gap: 10px;
-
-        background-color: var(--cpd-color-bg-subtle-secondary);
-        svg {
-            color: var(--cpd-color-icon-secondary);
-        }
-
-        &.mx_LoginWithQR_icon--success {
-            background-color: var(--cpd-color-bg-success-subtle);
-            svg {
-                color: var(--cpd-color-icon-success-primary);
-            }
-        }
-
-        &.mx_LoginWithQR_icon--critical {
-            background-color: var(--cpd-color-bg-critical-subtle);
-            svg {
-                color: var(--cpd-color-icon-critical-primary);
-            }
-        }
-    }
-
     .mx_LoginWithQR_checkCode_input {
         margin-bottom: var(--cpd-space-1x);
         text-align: initial;
@@ -175,14 +128,14 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_LoginWithQR_heading {
         display: flex;
-        gap: $spacing-12;
+        gap: var(--cpd-space-3x);
         align-items: center;
     }
 
     .mx_LoginWithQR_BackButton {
-        height: $spacing-28;
-        border-radius: $spacing-28;
-        padding: $spacing-4;
+        height: var(--cpd-space-7x);
+        border-radius: var(--cpd-space-7x);
+        padding: var(--cpd-space-1x);
         box-sizing: border-box;
         background-color: var(--cpd-color-bg-subtle-secondary);
         svg {
@@ -205,19 +158,15 @@ Please see LICENSE files in the repository root for full details.
 
         p {
             color: $secondary-content;
+            margin-bottom: var(--cpd-space-8x);
         }
     }
 
-    &.mx_LoginWithQR_error .mx_LoginWithQR_main {
-        max-width: 400px;
-        margin: 0 auto;
-    }
-
     .mx_LoginWithQR_buttons {
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: $spacing-16;
+        gap: var(--cpd-space-4x);
         margin-top: var(--cpd-space-6x);
 
         .mx_AccessibleButton {
@@ -228,7 +177,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_QRCode {
-        border-radius: $spacing-8;
+        border-radius: var(--cpd-space-2x);
         display: flex;
         justify-content: center;
     }
diff --git a/apps/web/res/css/views/avatars/_DecoratedRoomAvatar.pcss b/apps/web/res/css/views/avatars/_DecoratedRoomAvatar.pcss
index 2ad1b174af..2e124d56d2 100644
--- a/apps/web/res/css/views/avatars/_DecoratedRoomAvatar.pcss
+++ b/apps/web/res/css/views/avatars/_DecoratedRoomAvatar.pcss
@@ -66,7 +66,7 @@ Please see LICENSE files in the repository root for full details.
         background-color: $presence-busy;
     }
 
-    .mx_NotificationBadge,
+    .mx_DecoratedRoomAvatar_notificationBadge,
     .mx_RoomTile_badgeContainer {
         position: absolute;
         top: 0;
diff --git a/apps/web/res/css/views/avatars/_WithPresenceIndicator.pcss b/apps/web/res/css/views/avatars/_WithPresenceIndicator.pcss
index 7fe328dc60..68a0f0dbca 100644
--- a/apps/web/res/css/views/avatars/_WithPresenceIndicator.pcss
+++ b/apps/web/res/css/views/avatars/_WithPresenceIndicator.pcss
@@ -13,34 +13,7 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_WithPresenceIndicator_icon {
         position: absolute;
-        right: -2px;
-        bottom: -2px;
-    }
-
-    .mx_WithPresenceIndicator_icon::before {
-        content: "";
-        width: 100%;
-        height: 100%;
-        right: 0;
-        bottom: 0;
-        position: absolute;
-        border: 2px solid var(--cpd-color-bg-canvas-default);
-        border-radius: 50%;
-    }
-
-    .mx_WithPresenceIndicator_icon_offline::before {
-        background-color: $presence-offline;
-    }
-
-    .mx_WithPresenceIndicator_icon_online::before {
-        background-color: $accent;
-    }
-
-    .mx_WithPresenceIndicator_icon_away::before {
-        background-color: $presence-away;
-    }
-
-    .mx_WithPresenceIndicator_icon_busy::before {
-        background-color: $presence-busy;
+        right: 0px;
+        bottom: 2px;
     }
 }
diff --git a/apps/web/res/css/views/beta/_BetaCard.pcss b/apps/web/res/css/views/beta/_BetaCard.pcss
index c5d0253861..5197e035e4 100644
--- a/apps/web/res/css/views/beta/_BetaCard.pcss
+++ b/apps/web/res/css/views/beta/_BetaCard.pcss
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_BetaCard {
-    padding: $spacing-24;
+    padding: var(--cpd-space-6x);
     background-color: $panels;
     border-radius: 8px;
     box-sizing: border-box;
@@ -16,7 +16,7 @@ Please see LICENSE files in the repository root for full details.
     .mx_BetaCard_columns {
         display: flex;
         flex-flow: wrap;
-        gap: $spacing-20;
+        gap: var(--cpd-space-5x);
         justify-content: center;
 
         .mx_BetaCard_columns_description {
@@ -27,11 +27,11 @@ Please see LICENSE files in the repository root for full details.
                 font-size: $font-18px;
                 line-height: $font-22px;
                 color: $primary-content;
-                margin: $spacing-4 0 14px;
+                margin: var(--cpd-space-1x) 0 14px;
 
                 display: flex;
                 align-items: center;
-                column-gap: $spacing-12;
+                column-gap: var(--cpd-space-3x);
             }
 
             .mx_BetaCard_caption {
@@ -42,8 +42,8 @@ Please see LICENSE files in the repository root for full details.
             .mx_BetaCard_buttons {
                 display: flex;
                 flex-wrap: wrap-reverse;
-                gap: $spacing-12;
-                margin: $spacing-20 auto 0;
+                gap: var(--cpd-space-3x);
+                margin: var(--cpd-space-5x) auto 0;
 
                 .mx_AccessibleButton {
                     padding: 7px 40px;
@@ -58,17 +58,17 @@ Please see LICENSE files in the repository root for full details.
             }
 
             .mx_BetaCard_refreshWarning {
-                margin-top: $spacing-8;
+                margin-top: var(--cpd-space-2x);
                 font-size: $font-10px;
                 text-align: center;
             }
 
             .mx_BetaCard_faq {
-                margin-top: $spacing-20;
+                margin-top: var(--cpd-space-5x);
                 font: var(--cpd-font-body-xs-regular);
 
                 > h4 {
-                    margin: $spacing-12 0 0;
+                    margin: var(--cpd-space-3x) 0 0;
                 }
 
                 > p {
@@ -92,13 +92,13 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_BetaCard_relatedSettings {
         .mx_SettingsFlag {
-            margin: $spacing-16 0 0;
+            margin: var(--cpd-space-4x) 0 0;
             font-size: $font-15px;
             line-height: $font-24px;
             color: $primary-content;
 
             .mx_SettingsFlag_microcopy {
-                margin-top: $spacing-4;
+                margin-top: var(--cpd-space-1x);
                 font: var(--cpd-font-body-sm-regular);
             }
         }
@@ -107,7 +107,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_BetaCard_betaPill {
     background-color: $accent-alt;
-    padding: $spacing-4 10px;
+    padding: var(--cpd-space-1x) 10px;
     border-radius: 8px;
     text-transform: uppercase;
     font-size: $font-12px;
diff --git a/apps/web/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss b/apps/web/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss
index 72c0ef9cff..7433ac1a40 100644
--- a/apps/web/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss
+++ b/apps/web/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss
@@ -37,8 +37,7 @@ Please see LICENSE files in the repository root for full details.
             padding-left: 0;
         }
 
-        // provides space for scrollbar so that checkbox and scrollbar do not collide
-
+        /* provides space for scrollbar so that checkbox and scrollbar do not collide */
         &:not(:first-child) {
             margin-top: 24px;
         }
diff --git a/apps/web/res/css/views/dialogs/_CreateSectionDialog.pcss b/apps/web/res/css/views/dialogs/_CreateSectionDialog.pcss
index 7c941be39f..3198db4303 100644
--- a/apps/web/res/css/views/dialogs/_CreateSectionDialog.pcss
+++ b/apps/web/res/css/views/dialogs/_CreateSectionDialog.pcss
@@ -21,3 +21,7 @@
         width: 100%;
     }
 }
+
+.mx_CreateSectionDialog_edition > .mx_Dialog_header {
+    margin-bottom: var(--cpd-space-6x);
+}
diff --git a/apps/web/res/css/views/dialogs/_DevtoolsDialog.pcss b/apps/web/res/css/views/dialogs/_DevtoolsDialog.pcss
index f4c4dbcdcb..3ee2c9be53 100644
--- a/apps/web/res/css/views/dialogs/_DevtoolsDialog.pcss
+++ b/apps/web/res/css/views/dialogs/_DevtoolsDialog.pcss
@@ -35,6 +35,9 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_DevTools_content {
     overflow-y: auto;
+    /* Give room for focus outlines */
+    padding-inline-start: var(--cpd-space-0-5x);
+    padding-block-end: var(--cpd-space-0-5x);
 }
 
 .mx_DevTools_RoomStateExplorer_query {
diff --git a/apps/web/res/css/views/dialogs/_ExportDialog.pcss b/apps/web/res/css/views/dialogs/_ExportDialog.pcss
index cda2fab55f..3accbc0590 100644
--- a/apps/web/res/css/views/dialogs/_ExportDialog.pcss
+++ b/apps/web/res/css/views/dialogs/_ExportDialog.pcss
@@ -79,5 +79,5 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_ExportDialog_attachments-checkbox {
-    margin-top: $spacing-16;
+    margin-top: var(--cpd-space-4x);
 }
diff --git a/apps/web/res/css/views/dialogs/_ForwardDialog.pcss b/apps/web/res/css/views/dialogs/_ForwardDialog.pcss
index 150ad4cbc9..df6777f8ac 100644
--- a/apps/web/res/css/views/dialogs/_ForwardDialog.pcss
+++ b/apps/web/res/css/views/dialogs/_ForwardDialog.pcss
@@ -141,7 +141,7 @@ Please see LICENSE files in the repository root for full details.
                         color: $accent;
                     }
 
-                    .mx_NotificationBadge {
+                    .mx_ForwardDialog_notificationBadge {
                         /* Match the failed to send indicator's color with the disabled button */
                         background-color: $button-danger-disabled-fg-color;
                     }
diff --git a/apps/web/res/css/views/dialogs/_InviteDialog.pcss b/apps/web/res/css/views/dialogs/_InviteDialog.pcss
index cc737c9611..be31bbce96 100644
--- a/apps/web/res/css/views/dialogs/_InviteDialog.pcss
+++ b/apps/web/res/css/views/dialogs/_InviteDialog.pcss
@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_InviteDialog_transferWrapper .mx_Dialog {
-    padding-bottom: $spacing-16;
+    padding-bottom: var(--cpd-space-4x);
 }
 
 .mx_InviteDialog_addressBar {
@@ -20,7 +20,7 @@ Please see LICENSE files in the repository root for full details.
     flex-direction: row;
     /* Right margin for the design. We could apply this to the whole dialog, but then the scrollbar */
     /* for the user section gets weird. */
-    margin: $spacing-8 45px 0 0;
+    margin: var(--cpd-space-2x) 45px 0 0;
 
     .mx_InviteDialog_editor {
         flex: 1;
@@ -36,7 +36,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_InviteDialog_section {
-    padding-bottom: $spacing-4;
+    padding-bottom: var(--cpd-space-1x);
 
     .mx_InviteDialog_section_showMore {
         margin: 7px 18px;
@@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_InviteDialog_section_hidden_suggestions_disclaimer {
-    padding: $spacing-8 0 $spacing-16 0;
+    padding: var(--cpd-space-2x) 0 var(--cpd-space-4x) 0;
     font: var(--cpd-font-body-md-regular);
 
     > span {
@@ -62,7 +62,7 @@ Please see LICENSE files in the repository root for full details.
     border-top: 1px solid $input-border-color;
 
     > h3 {
-        margin: $spacing-12 0;
+        margin: var(--cpd-space-3x) 0;
         font-size: $font-12px;
         color: $muted-fg-color;
         font-weight: bold;
@@ -153,17 +153,17 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_InviteDialog_addressBar {
-        margin-top: $spacing-8;
+        margin-top: var(--cpd-space-2x);
     }
 
     input[type="checkbox"] {
-        margin-inline-end: $spacing-8;
+        margin-inline-end: var(--cpd-space-2x);
     }
 }
 
 .mx_InviteDialog_userSections {
     overflow-y: auto;
-    padding: 0 45px $spacing-4 0;
+    padding: 0 45px var(--cpd-space-1x) 0;
 }
 
 .mx_InviteDialog_helpText {
@@ -172,7 +172,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_InviteDialog_dialPad {
     width: 224px;
-    margin-top: $spacing-16;
+    margin-top: var(--cpd-space-4x);
     margin-inline: auto;
 
     .mx_InviteDialog_dialPadField {
@@ -199,19 +199,19 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_DialPad {
-        row-gap: $spacing-16;
+        row-gap: var(--cpd-space-4x);
         column-gap: 48px;
         margin-inline: auto;
     }
 }
 
 .mx_InviteDialog_transferConsultConnect {
-    padding-top: $spacing-16;
+    padding-top: var(--cpd-space-4x);
     /* This wants a drop shadow the full width of the dialog, so use negative margin to make it full width,
      * then compensate with padding
      */
-    padding-inline: $spacing-24;
-    margin-inline: calc(-1 * $spacing-24);
+    padding-inline: var(--cpd-space-6x);
+    margin-inline: calc(-1 * var(--cpd-space-6x));
     border-top: 1px solid $quinary-content;
 
     display: flex;
@@ -226,12 +226,12 @@ Please see LICENSE files in the repository root for full details.
 .mx_InviteDialog_tile {
     cursor: pointer;
     display: grid;
-    gap: $spacing-8 $spacing-12;
+    gap: var(--cpd-space-2x) var(--cpd-space-3x);
     align-items: center;
 
     &.mx_InviteDialog_tile--inviterError {
         grid-template-columns: max-content auto; /* max-content = avatar width */
-        margin-bottom: $spacing-24;
+        margin-bottom: var(--cpd-space-6x);
 
         &:last-child {
             margin-bottom: 0;
@@ -312,5 +312,5 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_InviteDialog_oneThreepid {
     font-size: $font-12px;
-    margin: $spacing-8 0;
+    margin: var(--cpd-space-2x) 0;
 }
diff --git a/apps/web/res/css/views/dialogs/_LogoutDialog.pcss b/apps/web/res/css/views/dialogs/_LogoutDialog.pcss
index 8f11f8c7c2..5ecd53b240 100644
--- a/apps/web/res/css/views/dialogs/_LogoutDialog.pcss
+++ b/apps/web/res/css/views/dialogs/_LogoutDialog.pcss
@@ -6,6 +6,22 @@ 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.
 */
 
-.mx_LogoutDialog_ExportKeyAdvanced {
-    width: fit-content;
+.mx_LogoutDialog {
+    width: 26rem;
+
+    .mx_EncryptionCard {
+        gap: 0;
+        h2 {
+            text-align: center;
+            color: var(--cpd-color-text-primary);
+        }
+        .mx_EncryptionCard_emphasisedContent {
+            text-align: center;
+            margin-top: var(--cpd-space-2x);
+            margin-bottom: var(--cpd-space-12x);
+            p {
+                margin: 0;
+            }
+        }
+    }
 }
diff --git a/apps/web/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss b/apps/web/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss
index 5633130b64..be05b16384 100644
--- a/apps/web/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss
+++ b/apps/web/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss
@@ -15,9 +15,9 @@ Please see LICENSE files in the repository root for full details.
         &.mx_RoomSettingsDialog_BridgeList_listItem {
             display: flex;
             flex-wrap: wrap;
-            gap: $spacing-8;
+            gap: var(--cpd-space-2x);
             padding: 5px;
-            margin-bottom: $spacing-8;
+            margin-bottom: var(--cpd-space-2x);
 
             /* border-style around each bridge list item */
             border-width: 1px 1px;
@@ -71,11 +71,11 @@ Please see LICENSE files in the repository root for full details.
 
                 .mx_RoomSettingsDialog_column_data_details,
                 .mx_RoomSettingsDialog_column_data_metadata {
-                    margin-top: $spacing-4;
+                    margin-top: var(--cpd-space-1x);
                 }
 
                 .mx_RoomSettingsDialog_column_data_metadata li {
-                    margin-top: $spacing-8;
+                    margin-top: var(--cpd-space-2x);
                 }
 
                 .mx_RoomSettingsDialog_column_data_protocolName {
diff --git a/apps/web/res/css/views/dialogs/_SpotlightDialog.pcss b/apps/web/res/css/views/dialogs/_SpotlightDialog.pcss
index dcb2247688..2a64e84a29 100644
--- a/apps/web/res/css/views/dialogs/_SpotlightDialog.pcss
+++ b/apps/web/res/css/views/dialogs/_SpotlightDialog.pcss
@@ -24,7 +24,7 @@ Please see LICENSE files in the repository root for full details.
 
         #mx_SpotlightDialog_keyboardPrompt {
             position: absolute;
-            padding: $spacing-8;
+            padding: var(--cpd-space-2x);
             border-radius: 8px;
             background-color: $background;
             top: -60px; /* relative to the top of the modal */
@@ -36,8 +36,8 @@ Please see LICENSE files in the repository root for full details.
 
             kbd {
                 display: inline-block;
-                padding: 2px $spacing-4;
-                margin: 0 $spacing-4;
+                padding: 2px var(--cpd-space-1x);
+                margin: 0 var(--cpd-space-1x);
                 border-radius: 6px;
                 background-color: $quinary-content;
                 vertical-align: middle;
@@ -64,7 +64,7 @@ Please see LICENSE files in the repository root for full details.
         margin: 0;
         border: none;
         border-radius: 8px 8px 0 0;
-        padding: $spacing-12 $spacing-16;
+        padding: var(--cpd-space-3x) var(--cpd-space-4x);
         border-bottom: 1px solid $system;
 
         > .mx_SpotlightDialog_filter {
@@ -72,19 +72,19 @@ Please see LICENSE files in the repository root for full details.
             align-content: center;
             align-items: center;
             border-radius: 8px;
-            margin-right: $spacing-8;
+            margin-right: var(--cpd-space-2x);
             background-color: $quinary-content;
             vertical-align: middle;
             color: $primary-content;
             position: relative;
-            padding: $spacing-4 $spacing-8 $spacing-4 37px;
+            padding: var(--cpd-space-1x) var(--cpd-space-2x) var(--cpd-space-1x) 37px;
 
             > svg {
                 color: $secondary-content;
                 width: 18px;
                 height: 18px;
                 position: absolute;
-                left: $spacing-8;
+                left: var(--cpd-space-2x);
                 top: 50%;
                 transform: translateY(-50%);
             }
@@ -96,7 +96,7 @@ Please see LICENSE files in the repository root for full details.
                 padding: 1px;
                 background: $system;
                 border-radius: 8px;
-                margin-left: $spacing-8;
+                margin-left: var(--cpd-space-2x);
                 text-align: center;
                 line-height: 16px;
                 color: $secondary-content;
@@ -126,7 +126,7 @@ Please see LICENSE files in the repository root for full details.
             flex-grow: 0;
             width: unset;
             height: unset;
-            margin-left: $spacing-16;
+            margin-left: var(--cpd-space-4x);
         }
 
         &:not(:focus-within) + #mx_SpotlightDialog_content {
@@ -143,7 +143,7 @@ Please see LICENSE files in the repository root for full details.
     #mx_SpotlightDialog_content {
         height: 100%;
         overflow-y: auto;
-        padding: $spacing-16;
+        padding: var(--cpd-space-4x);
 
         ul {
             padding: 0;
@@ -161,23 +161,23 @@ Please see LICENSE files in the repository root for full details.
             }
 
             > h4 {
-                margin-bottom: $spacing-8;
+                margin-bottom: var(--cpd-space-2x);
             }
 
             .mx_SpotlightDialog_sectionHeader {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
-                margin-bottom: $spacing-8;
+                margin-bottom: var(--cpd-space-2x);
 
                 .mx_SpotlightDialog_options {
                     display: flex;
-                    gap: $spacing-4;
+                    gap: var(--cpd-space-1x);
                 }
             }
 
             & + .mx_SpotlightDialog_section {
-                margin-top: $spacing-24;
+                margin-top: var(--cpd-space-6x);
             }
         }
 
@@ -201,7 +201,7 @@ Please see LICENSE files in the repository root for full details.
             }
 
             .mx_SpotlightDialog_option {
-                padding: $spacing-4;
+                padding: var(--cpd-space-1x);
                 color: $primary-content;
                 font-size: $font-12px;
                 line-height: $font-15px;
@@ -213,11 +213,11 @@ Please see LICENSE files in the repository root for full details.
                 text-align: center;
 
                 .mx_DecoratedRoomAvatar {
-                    margin: 0 9px $spacing-4; /* maintain centering */
+                    margin: 0 9px var(--cpd-space-1x); /* maintain centering */
                 }
 
                 & + .mx_SpotlightDialog_option {
-                    margin-left: $spacing-16;
+                    margin-left: var(--cpd-space-4x);
                 }
             }
         }
@@ -229,7 +229,7 @@ Please see LICENSE files in the repository root for full details.
             .mx_SpotlightDialog_option {
                 --mx_SpotlightDialog_option_selectedBgColor: $system;
 
-                padding: 6px $spacing-4;
+                padding: 6px var(--cpd-space-1x);
                 font-size: $font-15px;
                 line-height: $font-24px;
                 color: $primary-content;
@@ -249,20 +249,26 @@ Please see LICENSE files in the repository root for full details.
                     align-items: flex-start;
 
                     .mx_AccessibleButton {
-                        padding: $spacing-4 $spacing-20;
-                        margin: 2px $spacing-4;
+                        padding: var(--cpd-space-1x) var(--cpd-space-5x);
+                        margin: 2px var(--cpd-space-1x);
                     }
 
                     .mx_SpotlightDialog_enterPrompt {
                         margin-top: 9px;
-                        margin-right: $spacing-8;
+                        margin-right: var(--cpd-space-2x);
                     }
                 }
 
+                .mx_SpotlightDialog_result_name {
+                    min-width: 0;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+
                 > .mx_SpotlightDialog_metaspaceResult,
                 > .mx_DecoratedRoomAvatar,
                 > .mx_BaseAvatar {
-                    margin-right: $spacing-8;
+                    margin-right: var(--cpd-space-2x);
                     width: 24px;
                     height: 24px;
                     flex-shrink: 0;
@@ -283,7 +289,7 @@ Please see LICENSE files in the repository root for full details.
                         display: flex;
                         flex-direction: row;
                         line-height: $font-24px;
-                        margin-right: $spacing-8;
+                        margin-right: var(--cpd-space-2x);
 
                         .mx_SpotlightDialog_result_publicRoomName {
                             color: $primary-content;
@@ -294,7 +300,7 @@ Please see LICENSE files in the repository root for full details.
                         .mx_SpotlightDialog_result_publicRoomAlias {
                             color: $tertiary-content;
                             font-size: $font-12px;
-                            margin-left: $spacing-8;
+                            margin-left: var(--cpd-space-2x);
                             overflow: hidden;
                             text-overflow: ellipsis;
                         }
@@ -312,8 +318,8 @@ Please see LICENSE files in the repository root for full details.
                     }
                 }
 
-                .mx_NotificationBadge {
-                    margin-left: $spacing-8;
+                .mx_SpotlightDialog_notificationBadge {
+                    margin-left: var(--cpd-space-2x);
                 }
 
                 .mx_SpotlightDialog_option--menu,
@@ -356,17 +362,17 @@ Please see LICENSE files in the repository root for full details.
 
         .mx_SpotlightDialog_inviteLink,
         .mx_SpotlightDialog_createRoom {
-            margin-top: $spacing-8;
+            margin-top: var(--cpd-space-2x);
 
             .mx_AccessibleButton {
                 position: relative;
                 margin: 0;
-                padding: 3px $spacing-8 3px $spacing-28;
+                padding: 3px var(--cpd-space-2x) 3px var(--cpd-space-7x);
 
                 svg {
                     display: block;
                     position: absolute;
-                    left: $spacing-8;
+                    left: var(--cpd-space-2x);
                     width: 16px;
                     height: 16px;
                     color: var(--cpd-color-icon-primary);
@@ -376,7 +382,7 @@ Please see LICENSE files in the repository root for full details.
 
         .mx_SpotlightDialog_otherSearches {
             .mx_SpotlightDialog_option {
-                padding-left: $spacing-32;
+                padding-left: var(--cpd-space-8x);
                 position: relative;
 
                 svg {
@@ -384,7 +390,7 @@ Please see LICENSE files in the repository root for full details.
                     width: 24px;
                     height: 24px;
                     position: absolute;
-                    left: $spacing-4;
+                    left: var(--cpd-space-1x);
                     top: 50%;
                     transform: translateY(-50%);
                 }
@@ -397,8 +403,8 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_SpotlightDialog_result_details {
-            margin-left: $spacing-8;
-            margin-right: $spacing-8;
+            margin-left: var(--cpd-space-2x);
+            margin-right: var(--cpd-space-2x);
             color: $tertiary-content;
             font-size: $font-12px;
             line-height: $font-15px;
@@ -415,7 +421,7 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_SpotlightDialog_enterPrompt {
-            padding: 2px $spacing-4;
+            padding: 2px var(--cpd-space-1x);
             /* To avoid any styling inherent with <kbd> elements */
             font-family: inherit;
             font-weight: inherit;
@@ -424,7 +430,7 @@ Please see LICENSE files in the repository root for full details.
             color: $tertiary-content;
             border-radius: 6px;
             background-color: $quinary-content;
-            margin-right: $spacing-4;
+            margin-right: var(--cpd-space-1x);
             display: none;
         }
 
diff --git a/apps/web/res/css/views/dialogs/_UntrustedDeviceDialog.pcss b/apps/web/res/css/views/dialogs/_UntrustedDeviceDialog.pcss
deleted file mode 100644
index 8fb7431900..0000000000
--- a/apps/web/res/css/views/dialogs/_UntrustedDeviceDialog.pcss
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2021 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_UntrustedDeviceDialog {
-    .mx_Dialog_title {
-        display: flex;
-        align-items: center;
-
-        .mx_E2EIcon {
-            margin-left: 0;
-        }
-    }
-
-    .mx_Dialog_buttons {
-        display: flex;
-        justify-content: flex-end;
-        gap: 8px;
-    }
-}
diff --git a/apps/web/res/css/views/dialogs/_VerifyEMailDialog.pcss b/apps/web/res/css/views/dialogs/_VerifyEMailDialog.pcss
index 876962bfd9..36ec6ea7e6 100644
--- a/apps/web/res/css/views/dialogs/_VerifyEMailDialog.pcss
+++ b/apps/web/res/css/views/dialogs/_VerifyEMailDialog.pcss
@@ -13,7 +13,7 @@ Please see LICENSE files in the repository root for full details.
     .mx_Dialog {
         color: $primary-content;
         font: var(--cpd-font-body-md-regular);
-        padding: $spacing-24 $spacing-24 $spacing-16;
+        padding: var(--cpd-space-6x) var(--cpd-space-6x) var(--cpd-space-4x);
         text-align: center;
         /* !important override compound  */
         width: 485px !important;
@@ -30,7 +30,7 @@ Please see LICENSE files in the repository root for full details.
 
         .mx_AuthBody_did-not-receive {
             justify-content: center;
-            margin-bottom: $spacing-8;
+            margin-bottom: var(--cpd-space-2x);
         }
 
         .mx_Dialog_cancelButton {
diff --git a/apps/web/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss b/apps/web/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss
index b056e959b8..dc592c20f3 100644
--- a/apps/web/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss
+++ b/apps/web/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss
@@ -19,7 +19,7 @@ Please see LICENSE files in the repository root for full details.
         padding: 56px; /* 80px from design - 24px wrapper padding */
 
         .mx_Dialog_title {
-            margin-bottom: $spacing-16;
+            margin-bottom: var(--cpd-space-4x);
         }
     }
 
diff --git a/apps/web/res/css/views/directory/_NetworkDropdown.pcss b/apps/web/res/css/views/directory/_NetworkDropdown.pcss
index f728c05091..bf2c6ed323 100644
--- a/apps/web/res/css/views/directory/_NetworkDropdown.pcss
+++ b/apps/web/res/css/views/directory/_NetworkDropdown.pcss
@@ -9,14 +9,14 @@ Please see LICENSE files in the repository root for full details.
 .mx_NetworkDropdown_wrapper .mx_ContextualMenu {
     .mx_GenericDropdownMenu_Option {
         &.mx_GenericDropdownMenu_Option--header {
-            padding-top: $spacing-12;
-            padding-bottom: $spacing-4;
+            padding-top: var(--cpd-space-3x);
+            padding-bottom: var(--cpd-space-1x);
             min-width: 160px;
         }
 
         &.mx_GenericDropdownMenu_Option--item {
-            padding-top: $spacing-4;
-            padding-bottom: $spacing-4;
+            padding-top: var(--cpd-space-1x);
+            padding-bottom: var(--cpd-space-1x);
 
             > .mx_GenericDropdownMenu_Option--label span:first-child {
                 font-weight: normal;
@@ -30,15 +30,15 @@ Please see LICENSE files in the repository root for full details.
             color: $primary-content;
 
             span:not(:first-child) {
-                margin-left: $spacing-4;
+                margin-left: var(--cpd-space-1x);
                 color: $secondary-content;
             }
         }
     }
 
     .mx_GenericDropdownMenu_divider {
-        margin-top: $spacing-4;
-        margin-bottom: $spacing-4;
+        margin-top: var(--cpd-space-1x);
+        margin-bottom: var(--cpd-space-1x);
 
         & + .mx_GenericDropdownMenu_Option .mx_GenericDropdownMenu_Option--label {
             font-size: $font-15px;
diff --git a/apps/web/res/css/views/elements/_CopyableText.pcss b/apps/web/res/css/views/elements/_CopyableText.pcss
index e5cf1c51da..94964758ea 100644
--- a/apps/web/res/css/views/elements/_CopyableText.pcss
+++ b/apps/web/res/css/views/elements/_CopyableText.pcss
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_CopyableText {
-    align-items: flex-start;
+    align-items: center;
     display: flex;
     justify-content: space-between;
     width: max-content;
@@ -20,27 +20,17 @@ Please see LICENSE files in the repository root for full details.
         border: solid 1px $light-fg-color;
         margin-bottom: 10px;
         margin-top: 10px;
-        padding: 10px 0 10px 10px;
+        padding: 10px;
     }
 
     .mx_CopyableText_copyButton {
         flex-shrink: 0;
-        /* using em here to adapt to the local font size */
-        width: 1em;
-        height: 1em;
-        padding-left: 12px;
-        padding-right: 10px;
         display: block;
         /* If the copy button is used within a scrollable div, make it stick to the right while scrolling */
         position: sticky;
-        right: 0;
-        /* center to first line */
-        top: 0.15em;
-        background-color: $background;
+        margin-left: var(--cpd-space-1x);
 
         svg {
-            width: 1em;
-            height: 1em;
             color: $message-action-bar-fg-color;
             display: block;
         }
diff --git a/apps/web/res/css/views/elements/_GenericEventListSummary.pcss b/apps/web/res/css/views/elements/_GenericEventListSummary.pcss
index 68cc250a71..fe681e5363 100644
--- a/apps/web/res/css/views/elements/_GenericEventListSummary.pcss
+++ b/apps/web/res/css/views/elements/_GenericEventListSummary.pcss
@@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.
     position: relative;
 
     .mx_GenericEventListSummary_avatars {
-        margin-right: $spacing-8;
+        margin-right: var(--cpd-space-2x);
     }
 
     .mx_GenericEventListSummary_spacer {
@@ -37,7 +37,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     &[data-layout="group"] {
-        margin-top: $spacing-8;
+        margin-top: var(--cpd-space-2x);
     }
 
     &[data-layout="bubble"] {
@@ -89,7 +89,7 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_MatrixChat_useCompactLayout & {
         font-size: $font-13px;
-        margin-top: $spacing-4;
+        margin-top: var(--cpd-space-1x);
 
         .mx_EventTile_line {
             line-height: 1.25;
diff --git a/apps/web/res/css/views/elements/_ServerPicker.pcss b/apps/web/res/css/views/elements/_ServerPicker.pcss
index 0244673a35..9603418715 100644
--- a/apps/web/res/css/views/elements/_ServerPicker.pcss
+++ b/apps/web/res/css/views/elements/_ServerPicker.pcss
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_ServerPicker {
     margin-bottom: 14px;
-    padding-bottom: $spacing-16;
+    padding-bottom: var(--cpd-space-4x);
     border-bottom: 1px solid rgb(141, 151, 165, 0.2);
     display: grid;
     grid-template-columns: auto min-content;
diff --git a/apps/web/res/css/views/emojipicker/_EmojiPicker.pcss b/apps/web/res/css/views/emojipicker/_EmojiPicker.pcss
deleted file mode 100644
index b24fe806d9..0000000000
--- a/apps/web/res/css/views/emojipicker/_EmojiPicker.pcss
+++ /dev/null
@@ -1,217 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2019 Tulir Asokan <tulir@maunium.net>
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_EmojiPicker {
-    width: 340px;
-    height: min(450px, 80vh);
-    max-height: 80vh;
-
-    border-radius: 4px;
-
-    display: flex;
-    flex-direction: column;
-}
-
-.mx_EmojiPicker_body {
-    flex: 1;
-    overflow-y: scroll;
-    scrollbar-width: thin;
-    scrollbar-color: rgb(0, 0, 0, 0.2) transparent;
-}
-
-.mx_EmojiPicker_header {
-    padding: 4px 8px 0;
-    border-bottom: 1px solid $message-action-bar-border-color;
-}
-
-.mx_EmojiPicker_anchor {
-    border: none;
-    padding: var(--cpd-space-1x) 0;
-    /* We have to explicitly inherit the font as button browser styles are implicitly ignorant */
-    font: inherit;
-    font-size: $font-20px;
-    line-height: 1;
-    border-bottom: 2px solid transparent;
-    background-color: transparent;
-    border-radius: 4px 4px 0 0;
-
-    width: 36px;
-    height: 36px;
-
-    color: $primary-content;
-    display: inline-block;
-
-    &:not(:disabled) {
-        cursor: pointer;
-    }
-    &:disabled {
-        filter: opacity(0.3);
-    }
-
-    &:not(:disabled):hover {
-        background-color: $focus-bg-color;
-        border-bottom: 2px solid $accent;
-    }
-}
-
-.mx_EmojiPicker_anchor_visible {
-    border-bottom: 2px solid $accent;
-}
-
-.mx_EmojiPicker_search {
-    margin: 8px;
-    border-radius: 4px;
-    border: 1px solid $input-border-color;
-    background-color: $background;
-    display: flex;
-
-    input {
-        flex: 1;
-        border: none;
-        padding: 8px 12px;
-        border-radius: 4px 0;
-
-        &::placeholder {
-            color: var(--cpd-color-text-secondary);
-        }
-    }
-
-    button {
-        border: none;
-        background-color: inherit;
-        margin: 0;
-        padding: 8px;
-        align-self: center;
-        width: 32px;
-        height: 32px;
-        cursor: pointer;
-
-        svg {
-            width: 100%;
-            height: 100%;
-        }
-    }
-}
-
-.mx_EmojiPicker_search_icon {
-    width: 18px;
-    margin: 8px;
-
-    svg {
-        width: 100%;
-        height: 100%;
-        color: $primary-content;
-    }
-}
-
-.mx_EmojiPicker_category {
-    padding: 0 12px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.mx_EmojiPicker_category_label {
-    width: 304px;
-    font: var(--cpd-font-heading-sm-semibold);
-}
-
-.mx_EmojiPicker_list {
-    width: 304px;
-    padding: 0;
-    margin: 0;
-}
-
-.mx_EmojiPicker_item_wrapper {
-    display: inline-block;
-    list-style: none;
-    width: 38px;
-    cursor: pointer;
-
-    &:focus-within {
-        background-color: $focus-bg-color;
-    }
-}
-
-.mx_EmojiPicker_body_showHighlight .mx_EmojiPicker_item_wrapper [tabindex="0"] .mx_EmojiPicker_item {
-    background-color: $focus-bg-color;
-}
-
-.mx_EmojiPicker_item {
-    display: inline-block;
-    font-size: $font-20px;
-    padding: 5px;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    text-align: center;
-    border-radius: 4px;
-
-    &:hover {
-        background-color: $focus-bg-color;
-    }
-}
-
-.mx_EmojiPicker_item_selected {
-    color: rgb(0, 0, 0, 0.5);
-    border: 1px solid $accent;
-    padding: 4px;
-}
-
-.mx_EmojiPicker_category_label,
-.mx_EmojiPicker_preview_name {
-    font-size: $font-16px;
-    font-weight: var(--cpd-font-weight-semibold);
-    margin: 0;
-}
-
-.mx_EmojiPicker_footer {
-    border-top: 1px solid $message-action-bar-border-color;
-    min-height: 72px;
-
-    display: flex;
-    align-items: center;
-}
-
-.mx_EmojiPicker_preview_emoji {
-    font-size: $font-32px;
-    padding: 8px 16px;
-}
-
-.mx_EmojiPicker_preview_text {
-    display: flex;
-    flex: 1;
-    overflow: hidden;
-    padding-top: 1rem;
-    padding-bottom: 1rem;
-    flex-direction: column;
-}
-
-.mx_EmojiPicker_name {
-    text-transform: capitalize;
-}
-
-.mx_EmojiPicker_shortcode {
-    color: $light-fg-color;
-    overflow-wrap: break-word;
-    font: var(--cpd-font-body-md-regular);
-
-    &::before,
-    &::after {
-        content: ":";
-    }
-}
-
-.mx_EmojiPicker_quick {
-    flex-direction: column;
-    justify-content: space-around;
-}
-
-.mx_EmojiPicker_quick_header .mx_EmojiPicker_name {
-    margin-right: 4px;
-}
diff --git a/apps/web/res/css/views/location/_LocationPicker.pcss b/apps/web/res/css/views/location/_LocationPicker.pcss
index c103f7d68a..6abceb2208 100644
--- a/apps/web/res/css/views/location/_LocationPicker.pcss
+++ b/apps/web/res/css/views/location/_LocationPicker.pcss
@@ -32,7 +32,7 @@ Please see LICENSE files in the repository root for full details.
 
         .maplibregl-ctrl.maplibregl-ctrl-group,
         .maplibregl-ctrl.maplibregl-ctrl-attrib {
-            margin-right: $spacing-16;
+            margin-right: var(--cpd-space-4x);
         }
 
         .maplibregl-ctrl.maplibregl-ctrl-group {
@@ -54,7 +54,7 @@ Please see LICENSE files in the repository root for full details.
         flex: 0;
         width: 100%;
         box-sizing: border-box;
-        padding: $spacing-16;
+        padding: var(--cpd-space-4x);
         display: flex;
         flex-direction: column;
         justify-content: stretch;
@@ -68,7 +68,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_LocationPicker_pinText {
     position: absolute;
-    top: $spacing-16;
+    top: var(--cpd-space-4x);
     width: 100%;
     box-sizing: border-box;
     text-align: center;
@@ -78,7 +78,7 @@ Please see LICENSE files in the repository root for full details.
     span {
         box-shadow: 0px 4px 15px rgb(0, 0, 0, 0.15);
         border-radius: 8px;
-        padding: $spacing-8;
+        padding: var(--cpd-space-2x);
         background-color: $background;
         color: $primary-content;
 
diff --git a/apps/web/res/css/views/messages/_CallEvent.pcss b/apps/web/res/css/views/messages/_CallEvent.pcss
index 1733fd8638..0f837c660c 100644
--- a/apps/web/res/css/views/messages/_CallEvent.pcss
+++ b/apps/web/res/css/views/messages/_CallEvent.pcss
@@ -21,7 +21,7 @@ Please see LICENSE files in the repository root for full details.
     border-radius: 8px;
 
     display: flex;
-    gap: $spacing-8;
+    gap: var(--cpd-space-2x);
 
     > .mx_BaseAvatar,
     > .mx_Icon {
@@ -30,7 +30,7 @@ Please see LICENSE files in the repository root for full details.
 
     > .mx_Icon {
         padding: 0;
-        margin: $spacing-4 0;
+        margin: var(--cpd-space-1x) 0;
         color: $secondary-content;
     }
 
@@ -52,7 +52,7 @@ Please see LICENSE files in the repository root for full details.
     color: $secondary-content;
     width: 16px;
     height: 16px;
-    margin-right: $spacing-8;
+    margin-right: var(--cpd-space-2x);
 }
 
 .mx_CallEvent_active .mx_CallEvent_title {
@@ -62,7 +62,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_CallEvent_columns {
     flex-grow: 1;
     display: flex;
-    gap: $spacing-12;
+    gap: var(--cpd-space-3x);
     align-items: center;
     justify-content: space-between;
 }
@@ -70,7 +70,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_TimelineCard .mx_CallEvent_columns {
     flex-direction: column;
     align-items: flex-start;
-    gap: $spacing-8;
+    gap: var(--cpd-space-2x);
 }
 
 .mx_CallEvent_details {
diff --git a/apps/web/res/css/views/messages/_DisambiguatedProfile.pcss b/apps/web/res/css/views/messages/_DisambiguatedProfile.pcss
index 4758bb5407..8a7e342bfa 100644
--- a/apps/web/res/css/views/messages/_DisambiguatedProfile.pcss
+++ b/apps/web/res/css/views/messages/_DisambiguatedProfile.pcss
@@ -7,32 +7,19 @@ 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.
 */
 
-.mx_DisambiguatedProfile {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    cursor: pointer;
-
-    .mx_DisambiguatedProfile_displayName {
-        font: var(--cpd-font-body-md-semibold);
-        margin-inline-end: 0;
-        /* keeps the height in check, important for the bubble apperance */
-        line-height: 1;
-    }
-
-    .mx_DisambiguatedProfile_mxid {
-        color: $secondary-content;
-        font-size: var(--cpd-font-size-body-sm);
-        margin-inline-start: 5px;
-    }
-}
-
 /** Disambiguated profile needs to have a different layout in the member tile */
 .mx_MemberTileView .mx_DisambiguatedProfile {
-    display: flex;
-    flex-direction: column;
+    /* Name and the user status emoji share the first row (with the name truncating and the emoji always visible)
+       Disambiguated MXID gets a full row below. */
+    display: grid;
+    grid-template-columns: min-content 1fr;
+
+    .mx_DisambiguatedProfile_userStatus {
+        margin-inline-start: var(--cpd-space-0-5x);
+    }
 
     .mx_DisambiguatedProfile_mxid {
+        grid-column: 1 / -1;
         margin-inline-start: 0;
         font: var(--cpd-font-body-sm-regular);
         text-overflow: ellipsis;
@@ -41,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
 
     span:not(.mx_DisambiguatedProfile_mxid) {
         /**
-        In a member tile, this span element is a flex child and so
+        In a member tile, this span element is a grid child and so
         we need the following for text overflow to work.
         **/
         overflow: hidden;
diff --git a/apps/web/res/css/views/messages/_LegacyCallEvent.pcss b/apps/web/res/css/views/messages/_LegacyCallEvent.pcss
index 16905485b6..a2d8558766 100644
--- a/apps/web/res/css/views/messages/_LegacyCallEvent.pcss
+++ b/apps/web/res/css/views/messages/_LegacyCallEvent.pcss
@@ -16,11 +16,11 @@ Please see LICENSE files in the repository root for full details.
         flex-wrap: wrap;
         align-items: center;
         justify-content: space-between;
-        gap: $spacing-4 0;
+        gap: var(--cpd-space-1x) 0;
 
         position: relative;
-        margin: $spacing-4 0;
-        padding: $spacing-12 $spacing-24;
+        margin: var(--cpd-space-1x) 0;
+        padding: var(--cpd-space-3x) var(--cpd-space-6x);
         box-sizing: border-box;
         background-color: $dark-panel-bg-color;
         border-radius: 8px;
@@ -47,14 +47,14 @@ Please see LICENSE files in the repository root for full details.
             .mx_LegacyCallEvent_info_basic {
                 display: flex;
                 flex-direction: column;
-                gap: $spacing-4;
+                gap: var(--cpd-space-1x);
                 margin-left: 10px; /* To match mx_LegacyCallEvent */
                 margin-right: 10px;
                 min-width: 0;
 
                 .mx_LegacyCallEvent_sender {
                     font-weight: var(--cpd-font-weight-semibold);
-                    margin-bottom: $spacing-4;
+                    margin-bottom: var(--cpd-space-1x);
 
                     overflow: hidden;
                     white-space: nowrap;
@@ -74,14 +74,14 @@ Please see LICENSE files in the repository root for full details.
             align-items: center;
             color: $secondary-content;
             font-size: $font-12px;
-            gap: $spacing-12; /* See mx_IncomingLegacyCallToast_buttons */
+            gap: var(--cpd-space-3x); /* See mx_IncomingLegacyCallToast_buttons */
             margin-inline-start: 42px; /* avatar (32px) + mx_LegacyCallEvent_info_basic margin (10px) */
             word-break: break-word;
             max-width: fit-content;
 
             .mx_LegacyCallEvent_content_button {
                 @mixin LegacyCallButton;
-                padding: 0 $spacing-12;
+                padding: 0 var(--cpd-space-3x);
                 font-size: inherit;
             }
 
@@ -93,7 +93,7 @@ Please see LICENSE files in the repository root for full details.
         &.mx_LegacyCallEvent_narrow {
             flex-direction: column;
             align-items: unset;
-            gap: $spacing-4 $spacing-16;
+            gap: var(--cpd-space-1x) var(--cpd-space-4x);
             height: unset;
             min-width: 290px;
 
@@ -144,7 +144,7 @@ Please see LICENSE files in the repository root for full details.
     .mx_LegacyCallEvent_wrapper {
         .mx_LegacyCallEvent {
             &.mx_LegacyCallEvent_narrow {
-                gap: $spacing-8 $spacing-4;
+                gap: var(--cpd-space-2x) var(--cpd-space-1x);
             }
         }
     }
@@ -153,7 +153,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_IRCLayout {
     .mx_LegacyCallEvent_wrapper {
         .mx_LegacyCallEvent {
-            margin-inline-start: $spacing-4; /* display green line */
+            margin-inline-start: var(--cpd-space-1x); /* display green line */
         }
     }
 }
diff --git a/apps/web/res/css/views/messages/_MFileBody.pcss b/apps/web/res/css/views/messages/_MFileBody.pcss
deleted file mode 100644
index 783a58c63d..0000000000
--- a/apps/web/res/css/views/messages/_MFileBody.pcss
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2015-2021 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_MFileBody [data-type="download"] {
-    height: var(--cpd-space-9x);
-
-    & object {
-        margin-left: -16px;
-        padding-right: 4px;
-        margin-top: -4px;
-        vertical-align: middle;
-        pointer-events: none;
-    }
-}
-
-.mx_MFileBody [data-type="info"] {
-    svg {
-        color: $secondary-content !important;
-        background-color: $system !important;
-        border-radius: 20px !important;
-    }
-}
diff --git a/apps/web/res/css/views/messages/_MImageBody.pcss b/apps/web/res/css/views/messages/_MImageBody.pcss
deleted file mode 100644
index 0e73c1d55c..0000000000
--- a/apps/web/res/css/views/messages/_MImageBody.pcss
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2021 The Matrix.org Foundation C.I.C.
-Copyright 2015, 2016 OpenMarket Ltd
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_MImageBody_banner {
-    position: absolute;
-    bottom: $spacing-4;
-    left: $spacing-4;
-    padding: $spacing-4;
-    border-radius: var(--MBody-border-radius);
-    font-size: $font-15px;
-    user-select: none; /* prevent banner text from being selected */
-    pointer-events: none; /* let the cursor go through to the media underneath */
-
-    /* Trying to match the width of the image is surprisingly difficult, so arbitrarily break it off early. */
-    max-width: min(100%, 350px);
-
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-
-    /* Hardcoded colours because it's the same on all themes */
-    background-color: rgb(0, 0, 0, 0.6);
-    color: #ffffff;
-}
-
-.mx_MImageBody_placeholder {
-    /* Position the placeholder on top of the thumbnail, so that the reveal animation can work */
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 100%;
-
-    background-color: $background;
-
-    .mx_Blurhash > canvas {
-        animation: mx--anim-pulse 1.75s infinite cubic-bezier(0.4, 0, 0.6, 1);
-    }
-}
-
-.mx_MImageBody_thumbnail_container {
-    border-radius: var(--MBody-border-radius);
-
-    /* Necessary for the border radius to apply correctly to the placeholder */
-    overflow: hidden;
-    contain: paint;
-}
-
-.mx_MImageBody_thumbnail {
-    display: block;
-
-    /* Force the image to be the full size of the container, even if the */
-    /* pixel size is smaller. The problem here is that we don't know what */
-    /* thumbnail size the HS is going to give us, but we have to commit to */
-    /* a container size immediately and not change it when the image loads */
-    /* or we'll get a scroll jump (or have to leave blank space). */
-    /* This will obviously result in an upscaled image which will be a bit */
-    /* blurry. The best fix would be for the HS to advertise what size thumbnails */
-    /* it guarantees to produce. */
-    height: 100%;
-    width: 100%;
-}
-
-.mx_MImageBody_gifLabel {
-    position: absolute;
-    display: block;
-    top: 0px;
-    left: 14px;
-    padding: 5px;
-    border-radius: 5px;
-    background: $imagebody-giflabel;
-    border: 2px solid $imagebody-giflabel-border;
-    color: $imagebody-giflabel-color;
-    pointer-events: none;
-}
diff --git a/apps/web/res/css/views/messages/_MImageReplyBody.pcss b/apps/web/res/css/views/messages/_MImageReplyBody.pcss
index 9576e75fd8..af058b6437 100644
--- a/apps/web/res/css/views/messages/_MImageReplyBody.pcss
+++ b/apps/web/res/css/views/messages/_MImageReplyBody.pcss
@@ -6,9 +6,67 @@ 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.
 */
 
+.mx_MImageReplyBody,
+.mx_MStickerBody_wrapper {
+    .mx_MImageBody_banner {
+        position: absolute;
+        bottom: var(--cpd-space-1x);
+        left: var(--cpd-space-1x);
+        padding: var(--cpd-space-1x);
+        border-radius: var(--MBody-border-radius);
+        font-size: $font-15px;
+        user-select: none;
+        pointer-events: none;
+        max-width: min(100%, 350px);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        background-color: rgb(0, 0, 0, 0.6);
+        color: #ffffff;
+    }
+
+    .mx_MImageBody_placeholder {
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100%;
+        width: 100%;
+        background-color: $background;
+
+        .mx_Blurhash > canvas {
+            animation: mx--anim-pulse 1.75s infinite cubic-bezier(0.4, 0, 0.6, 1);
+        }
+    }
+
+    .mx_MImageBody_thumbnail_container {
+        border-radius: var(--MBody-border-radius);
+        overflow: hidden;
+        contain: paint;
+    }
+
+    .mx_MImageBody_thumbnail {
+        display: block;
+        height: 100%;
+        width: 100%;
+    }
+
+    .mx_MImageBody_gifLabel {
+        position: absolute;
+        display: block;
+        top: 0px;
+        left: 14px;
+        padding: 5px;
+        border-radius: 5px;
+        background: $imagebody-giflabel;
+        border: 2px solid $imagebody-giflabel-border;
+        color: $imagebody-giflabel-color;
+        pointer-events: none;
+    }
+}
+
 .mx_MImageReplyBody {
     display: flex;
-    column-gap: $spacing-4;
+    column-gap: var(--cpd-space-1x);
 
     .mx_MImageBody_thumbnail_container {
         flex: 1;
diff --git a/apps/web/res/css/views/messages/_MJitsiWidgetEvent.pcss b/apps/web/res/css/views/messages/_MJitsiWidgetEvent.pcss
deleted file mode 100644
index 7813354366..0000000000
--- a/apps/web/res/css/views/messages/_MJitsiWidgetEvent.pcss
+++ /dev/null
@@ -1,13 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_EventTileBubble.mx_MJitsiWidgetEvent {
-    svg {
-        color: $header-panel-text-primary-color; /* XXX: Variable abuse */
-    }
-}
diff --git a/apps/web/res/css/views/messages/_MPollBody.pcss b/apps/web/res/css/views/messages/_MPollBody.pcss
index b30807dd59..a507307c76 100644
--- a/apps/web/res/css/views/messages/_MPollBody.pcss
+++ b/apps/web/res/css/views/messages/_MPollBody.pcss
@@ -47,7 +47,7 @@ $poll-max-width: 550px;
 
         .mx_Spinner {
             flex: 0;
-            margin-left: $spacing-8;
+            margin-left: var(--cpd-space-2x);
         }
     }
 }
@@ -59,7 +59,7 @@ $poll-max-width: 550px;
 
 .mx_MPollBody_allOptions {
     display: grid;
-    gap: $spacing-16;
-    margin-bottom: $spacing-8;
+    gap: var(--cpd-space-4x);
+    margin-bottom: var(--cpd-space-2x);
     max-width: $poll-max-width;
 }
diff --git a/apps/web/res/css/views/messages/_MediaBody.pcss b/apps/web/res/css/views/messages/_MediaBody.pcss
deleted file mode 100644
index aadf220885..0000000000
--- a/apps/web/res/css/views/messages/_MediaBody.pcss
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2021 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-/* A "media body" is any file upload looking thing, apart from images and videos (they */
-/* have unique styles). */
-
-.mx_MediaBody {
-    background-color: $panels;
-    border-radius: 12px;
-    max-width: 243px; /* use max-width instead of width so it fits within right panels */
-
-    color: $secondary-content;
-    font: var(--cpd-font-body-md-regular);
-    line-height: $font-24px;
-}
-
-.mx_MAudioBody > .mx_MediaBody {
-    border-radius: var(--MBody-border-radius);
-}
diff --git a/apps/web/res/css/views/messages/_MessageActionBar.pcss b/apps/web/res/css/views/messages/_MessageActionBar.pcss
index d078632ce2..433721c8bc 100644
--- a/apps/web/res/css/views/messages/_MessageActionBar.pcss
+++ b/apps/web/res/css/views/messages/_MessageActionBar.pcss
@@ -13,10 +13,7 @@ Please see LICENSE files in the repository root for full details.
     position: absolute;
     top: calc(
         -1 *
-            (
-                var(--MessageActionBar-size-button) + 2 *
-                    (var(--MessageActionBar-size-margin) + var(--cpd-border-width-1))
-            )
+            (var(--MessageActionBar-size-button) + 2 * (var(--MessageActionBar-size-margin) + var(--cpd-border-width-1)))
     );
     right: 8px;
     user-select: none;
diff --git a/apps/web/res/css/views/messages/_ReactionsRow.pcss b/apps/web/res/css/views/messages/_ReactionsRow.pcss
deleted file mode 100644
index 0c16480bd5..0000000000
--- a/apps/web/res/css/views/messages/_ReactionsRow.pcss
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
-Copyright 2019-2024 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_ReactionsRow {
-    color: var(--cpd-color-text-primary);
-
-    .mx_ReactionsRow_addReactionButton {
-        display: inline-block;
-        visibility: hidden; /* show on hover of the .mx_EventTile */
-        width: 16px;
-        height: 16px;
-        padding: var(--cpd-space-1x);
-        vertical-align: middle;
-        margin-left: 4px;
-        margin-right: 4px;
-
-        svg {
-            height: inherit;
-            width: inherit;
-            color: $tertiary-content;
-        }
-
-        &.mx_ReactionsRow_addReactionButton_active {
-            visibility: visible; /* keep showing whilst the context menu is shown */
-        }
-
-        &:hover,
-        &.mx_ReactionsRow_addReactionButton_active {
-            svg {
-                color: $primary-content;
-            }
-        }
-    }
-}
-
-.mx_EventTile:hover .mx_ReactionsRow_addReactionButton {
-    visibility: visible;
-}
-
-.mx_ReactionsRow_showAll {
-    color: $tertiary-content;
-
-    &.mx_AccessibleButton_kind_link_inline {
-        font-size: $font-12px;
-        line-height: $font-20px;
-        margin-inline-start: $spacing-4;
-        vertical-align: middle;
-
-        &:hover {
-            color: $primary-content;
-        }
-    }
-}
diff --git a/apps/web/res/css/views/messages/_TextualEvent.pcss b/apps/web/res/css/views/messages/_TextualEvent.pcss
index 3dbde24791..a1db28027f 100644
--- a/apps/web/res/css/views/messages/_TextualEvent.pcss
+++ b/apps/web/res/css/views/messages/_TextualEvent.pcss
@@ -7,12 +7,8 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_TextualEvent {
-    overflow-y: hidden;
-    line-height: normal;
-
     a {
         color: $accent;
-        cursor: pointer;
     }
 
     .mx_RoomView_searchResultsPanel & {
diff --git a/apps/web/res/css/views/messages/_ViewSourceEvent.pcss b/apps/web/res/css/views/messages/_ViewSourceEvent.pcss
deleted file mode 100644
index 02dce05bbb..0000000000
--- a/apps/web/res/css/views/messages/_ViewSourceEvent.pcss
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_EventTile_content.mx_ViewSourceEvent {
-    display: flex;
-    opacity: 0.6;
-    font-size: $font-12px;
-    width: 100%;
-    overflow-x: auto; /* Cancel overflow setting of .mx_EventTile_content */
-    line-height: normal; /* Align with avatar and E2E icon */
-
-    pre,
-    code {
-        flex: 1;
-    }
-
-    pre {
-        line-height: 1.2;
-        margin: 3.5px 0;
-    }
-
-    .mx_ViewSourceEvent_toggle {
-        --ViewSourceEvent_toggle-size: 16px;
-
-        visibility: hidden;
-        /* icon */
-        width: var(--ViewSourceEvent_toggle-size);
-        min-width: var(--ViewSourceEvent_toggle-size);
-
-        svg {
-            color: $accent;
-            width: var(--ViewSourceEvent_toggle-size);
-            height: var(--ViewSourceEvent_toggle-size);
-        }
-
-        .mx_EventTile:hover & {
-            visibility: visible;
-        }
-    }
-
-    &.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle {
-        align-self: flex-end;
-        height: var(--ViewSourceEvent_toggle-size);
-    }
-}
diff --git a/apps/web/res/css/views/messages/_common_CryptoEvent.pcss b/apps/web/res/css/views/messages/_common_CryptoEvent.pcss
index 06b7ccc1c7..6f8ed066cc 100644
--- a/apps/web/res/css/views/messages/_common_CryptoEvent.pcss
+++ b/apps/web/res/css/views/messages/_common_CryptoEvent.pcss
@@ -8,8 +8,4 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_EventTileBubble.mx_cryptoEvent {
     margin: var(--EventTileBubble_margin-block) auto;
-
-    svg[data-state="supported"] {
-        color: $header-panel-text-primary-color;
-    }
 }
diff --git a/apps/web/res/css/views/polls/pollHistory/_PollHistory.pcss b/apps/web/res/css/views/polls/pollHistory/_PollHistory.pcss
index ee28f01b65..8dd626347c 100644
--- a/apps/web/res/css/views/polls/pollHistory/_PollHistory.pcss
+++ b/apps/web/res/css/views/polls/pollHistory/_PollHistory.pcss
@@ -15,5 +15,5 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_PollHistory_header.mx_Heading_h2 {
-    margin-bottom: $spacing-16;
+    margin-bottom: var(--cpd-space-4x);
 }
diff --git a/apps/web/res/css/views/polls/pollHistory/_PollHistoryList.pcss b/apps/web/res/css/views/polls/pollHistory/_PollHistoryList.pcss
index b732545178..7134d882b9 100644
--- a/apps/web/res/css/views/polls/pollHistory/_PollHistoryList.pcss
+++ b/apps/web/res/css/views/polls/pollHistory/_PollHistoryList.pcss
@@ -21,12 +21,12 @@ Please see LICENSE files in the repository root for full details.
     flex: 1 1 0;
     align-content: flex-start;
     display: grid;
-    gap: $spacing-20;
-    padding-right: $spacing-64;
-    margin: $spacing-32 0;
+    gap: var(--cpd-space-5x);
+    padding-right: var(--cpd-space-16x);
+    margin: var(--cpd-space-8x) 0;
 
     &.mx_PollHistoryList_list_ENDED {
-        gap: $spacing-32;
+        gap: var(--cpd-space-8x);
     }
 }
 
@@ -34,7 +34,7 @@ Please see LICENSE files in the repository root for full details.
     height: 100%;
     width: 100%;
     box-sizing: border-box;
-    padding: 0 $spacing-64;
+    padding: 0 var(--cpd-space-16x);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details.
     color: $secondary-content;
 
     .mx_PollHistoryList_loadMorePolls {
-        margin-top: $spacing-16;
+        margin-top: var(--cpd-space-4x);
     }
 }
 
@@ -53,8 +53,8 @@ Please see LICENSE files in the repository root for full details.
     color: $secondary-content;
     text-align: center;
 
-    // center in all free space
-    // when there are no results
+    /* center in all free space
+    when there are no results */
     &.mx_PollHistoryList_noResultsYet {
         margin: auto auto;
     }
diff --git a/apps/web/res/css/views/right_panel/_BaseCard.pcss b/apps/web/res/css/views/right_panel/_BaseCard.pcss
index a5864c4e2a..2a229406c0 100644
--- a/apps/web/res/css/views/right_panel/_BaseCard.pcss
+++ b/apps/web/res/css/views/right_panel/_BaseCard.pcss
@@ -87,7 +87,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_BaseCard_footer {
-        padding-top: $spacing-4;
+        padding-top: var(--cpd-space-1x);
         text-align: center;
         display: flex;
         justify-content: space-around;
diff --git a/apps/web/res/css/views/right_panel/_ExtensionsCard.pcss b/apps/web/res/css/views/right_panel/_ExtensionsCard.pcss
index cda7541bf4..0ccbc91e19 100644
--- a/apps/web/res/css/views/right_panel/_ExtensionsCard.pcss
+++ b/apps/web/res/css/views/right_panel/_ExtensionsCard.pcss
@@ -22,7 +22,7 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_ExtensionsCard_container {
         text-align: center;
-        margin: $spacing-20 var(--cpd-space-4x) 0;
+        margin: var(--cpd-space-5x) var(--cpd-space-4x) 0;
     }
 
     .mx_ExtensionsCard_Button {
diff --git a/apps/web/res/css/views/right_panel/_RoomSummaryCard.pcss b/apps/web/res/css/views/right_panel/_RoomSummaryCard.pcss
index 96d1b0867e..319bd7e6aa 100644
--- a/apps/web/res/css/views/right_panel/_RoomSummaryCard.pcss
+++ b/apps/web/res/css/views/right_panel/_RoomSummaryCard.pcss
@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_RoomSummaryCard_container {
         text-align: center;
-        margin: $spacing-20 var(--cpd-space-4x) 0;
+        margin: var(--cpd-space-5x) var(--cpd-space-4x) 0;
     }
 
     .mx_RoomSummaryCard_roomName,
@@ -98,7 +98,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_RoomSummaryCard_roomName {
-    margin: $spacing-12 0 $spacing-4;
+    margin: var(--cpd-space-3x) 0 var(--cpd-space-1x);
 }
 
 .mx_RoomSummaryCard_bottomOptions {
diff --git a/apps/web/res/css/views/right_panel/_ThreadPanel.pcss b/apps/web/res/css/views/right_panel/_ThreadPanel.pcss
index 66536a7372..85e3217c2e 100644
--- a/apps/web/res/css/views/right_panel/_ThreadPanel.pcss
+++ b/apps/web/res/css/views/right_panel/_ThreadPanel.pcss
@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
     overflow: visible;
 
     .mx_ThreadPanelHeader {
-        height: 60px;
+        height: 64px;
         display: flex;
         box-sizing: border-box;
         padding: 16px;
@@ -32,7 +32,7 @@ Please see LICENSE files in the repository root for full details.
 
         .mx_ThreadPanel_dropdown {
             font: var(--cpd-font-body-sm-regular);
-            padding: 3px $spacing-4 3px $spacing-8;
+            padding: 3px var(--cpd-space-1x) 3px var(--cpd-space-2x);
             border-radius: 4px;
             line-height: 1.5;
             user-select: none;
@@ -87,7 +87,7 @@ Please see LICENSE files in the repository root for full details.
             margin-right: 0;
         }
 
-        // Make use of the space above the composer buttons too
+        /* Make use of the space above the composer buttons too */
         .mx_Autocomplete {
             width: calc(100% + 140px);
         }
@@ -111,8 +111,8 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_RoomView_MessageList {
-        padding-inline-start: $spacing-8;
-        padding-inline-end: $spacing-8;
+        padding-inline-start: var(--cpd-space-2x);
+        padding-inline-end: var(--cpd-space-2x);
         content-visibility: visible;
     }
 
@@ -138,10 +138,6 @@ Please see LICENSE files in the repository root for full details.
         box-sizing: border-box;
     }
 
-    .mx_MessageTimestamp {
-        color: $secondary-content;
-    }
-
     .mx_BaseCard_footer {
         text-align: left;
         font-size: $font-12px;
diff --git a/apps/web/res/css/views/right_panel/_TimelineCard.pcss b/apps/web/res/css/views/right_panel/_TimelineCard.pcss
index 14d33d4f99..27cc26e397 100644
--- a/apps/web/res/css/views/right_panel/_TimelineCard.pcss
+++ b/apps/web/res/css/views/right_panel/_TimelineCard.pcss
@@ -51,7 +51,7 @@ Please see LICENSE files in the repository root for full details.
                 padding-inline-end: var(--MessageTimestamp-width); /* ensure timestamp is not hidden */
 
                 .mx_EventTile_e2eIcon {
-                    inset-inline-start: $spacing-8;
+                    inset-inline-start: var(--cpd-space-2x);
                 }
             }
 
@@ -98,7 +98,7 @@ Please see LICENSE files in the repository root for full details.
 
             .mx_ReactionsRow {
                 /* See: var(--ThreadView_group_spacing-end) for ReactionsRow on _EventTile.pcss */
-                margin-inline-end: $spacing-8;
+                margin-inline-end: var(--cpd-space-2x);
             }
 
             .mx_ThreadSummary {
diff --git a/apps/web/res/css/views/right_panel/_UserInfo.pcss b/apps/web/res/css/views/right_panel/_UserInfo.pcss
index 70cc4ba064..a8a4ef7d2c 100644
--- a/apps/web/res/css/views/right_panel/_UserInfo.pcss
+++ b/apps/web/res/css/views/right_panel/_UserInfo.pcss
@@ -25,7 +25,7 @@ Please see LICENSE files in the repository root for full details.
     .mx_UserInfo_memberDetailsContainer {
         padding-top: 0;
         padding-bottom: 0;
-        margin-bottom: $spacing-8;
+        margin-bottom: var(--cpd-space-2x);
     }
 
     .mx_RoomTile_titleContainer {
@@ -67,7 +67,7 @@ Please see LICENSE files in the repository root for full details.
         color: $tertiary-content;
         font: var(--cpd-font-body-md-semibold);
         font-weight: var(--cpd-font-weight-semibold);
-        margin: $spacing-4 0;
+        margin: var(--cpd-space-1x) 0;
     }
 
     p {
@@ -126,19 +126,10 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_CopyableText_copyButton {
-            width: 28px;
-            height: 28px;
             display: flex;
             justify-content: center;
             align-items: center;
             position: unset;
-            padding-left: var(--cpd-space-2x);
-        }
-
-        .mx_CopyableText_copyButton::before {
-            width: 20px;
-            height: 20px;
-            background-color: var(--cpd-color-icon-secondary-alpha);
         }
     }
 
diff --git a/apps/web/res/css/views/rooms/RoomListPanel/_RoomListPanel.pcss b/apps/web/res/css/views/rooms/RoomListPanel/_RoomListPanel.pcss
index eb1f6e5fe5..91b7bc8720 100644
--- a/apps/web/res/css/views/rooms/RoomListPanel/_RoomListPanel.pcss
+++ b/apps/web/res/css/views/rooms/RoomListPanel/_RoomListPanel.pcss
@@ -8,5 +8,4 @@
 .mx_RoomListPanel {
     background-color: var(--cpd-color-bg-canvas-default);
     height: 100%;
-    border-right: 1px solid var(--cpd-color-bg-subtle-primary);
 }
diff --git a/apps/web/res/css/views/rooms/_EventBubbleTile.pcss b/apps/web/res/css/views/rooms/_EventBubbleTile.pcss
index 6c4febd10f..25a8cbcfdd 100644
--- a/apps/web/res/css/views/rooms/_EventBubbleTile.pcss
+++ b/apps/web/res/css/views/rooms/_EventBubbleTile.pcss
@@ -156,8 +156,8 @@ Please see LICENSE files in the repository root for full details.
         padding-right: 48px !important;
     }
 
-    .mx_MImageBody {
-        .mx_MImageBody_thumbnail_container {
+    .mx_ImageBody {
+        .mx_ImageBody_container {
             justify-content: center;
             min-height: calc(1.8rem + var(--gutterSize) + var(--gutterSize));
             min-width: calc(1.8rem + var(--gutterSize) + var(--gutterSize));
@@ -181,8 +181,8 @@ Please see LICENSE files in the repository root for full details.
         .mx_EventTile_line {
             border-bottom-right-radius: var(--cornerRadius);
 
-            .mx_MImageBody .mx_MImageBody_thumbnail_container,
-            .mx_MImageBody::before,
+            .mx_ImageBody .mx_ImageBody_container,
+            .mx_ImageBody::before,
             .mx_MVideoBody .mx_MVideoBody_container,
             .mx_MediaBody,
             .mx_MLocationBody_map,
@@ -220,8 +220,8 @@ Please see LICENSE files in the repository root for full details.
             margin-inline-start: auto;
             border-bottom-left-radius: var(--cornerRadius);
 
-            .mx_MImageBody .mx_MImageBody_thumbnail_container,
-            .mx_MImageBody::before,
+            .mx_ImageBody .mx_ImageBody_container,
+            .mx_ImageBody::before,
             .mx_MVideoBody .mx_MVideoBody_container,
             .mx_MediaBody,
             .mx_MLocationBody_map,
@@ -288,7 +288,7 @@ Please see LICENSE files in the repository root for full details.
 
         /* the selector here is quite weird because timestamps can appear linked & unlinked and in different places */
         /* in the DOM depending on the specific rendering context */
-        > a, /* timestamp wrapper anchor */
+        > a, /* linked timestamp element */
         .mx_MessageActionBar + .mx_MessageTimestamp {
             position: absolute;
             padding: 4px 8px;
@@ -322,7 +322,7 @@ Please see LICENSE files in the repository root for full details.
         }
 
         &.mx_EventTile_sticker {
-            > a, /* timestamp wrapper anchor */
+            > a, /* linked timestamp element */
             .mx_MessageActionBar + .mx_MessageTimestamp {
                 /* position timestamps for stickers to the right of the un-bubbled sticker */
                 right: unset;
@@ -334,16 +334,12 @@ Please see LICENSE files in the repository root for full details.
             }
         }
 
-        .mx_MImageBody {
+        .mx_ImageBody {
             width: 100%;
-
-            .mx_MImageBody_thumbnail.mx_MImageBody_thumbnail--blurhash {
-                position: unset;
-            }
         }
 
         /* noinspection CssReplaceWithShorthandSafely */
-        .mx_MImageBody .mx_MImageBody_thumbnail_container,
+        .mx_ImageBody .mx_ImageBody_container,
         .mx_MVideoBody .mx_MVideoBody_container,
         .mx_MediaBody {
             border-radius: unset;
@@ -359,7 +355,8 @@ Please see LICENSE files in the repository root for full details.
         }
     }
 
-    &:not(.mx_EventTile_noBubble) .mx_EventTile_line:not(.mx_EventTile_mediaLine) {
+    &:not(.mx_EventTile_noBubble):not(.mx_EventTile_alignedBetweenBubbles)
+        .mx_EventTile_line:not(.mx_EventTile_mediaLine) {
         /* make the top and bottom padding 1px smaller so that we can pad
             .mx_EventTile_content by 1px */
         /* to avoid anti-zalgo cutting off our larger than text emojis. */
@@ -375,9 +372,9 @@ Please see LICENSE files in the repository root for full details.
     &.mx_EventTile_continuation[data-self="false"] .mx_EventTile_line {
         border-top-left-radius: 0;
 
-        .mx_MImageBody .mx_MImageBody_thumbnail_container,
+        .mx_ImageBody .mx_ImageBody_container,
         .mx_MVideoBody .mx_MVideoBody_container,
-        .mx_MImageBody::before,
+        .mx_ImageBody::before,
         .mx_MediaBody,
         .mx_MLocationBody_map,
         .mx_MBeaconBody {
@@ -387,9 +384,9 @@ Please see LICENSE files in the repository root for full details.
     &.mx_EventTile_lastInSection[data-self="false"] .mx_EventTile_line {
         border-bottom-left-radius: var(--cornerRadius);
 
-        .mx_MImageBody .mx_MImageBody_thumbnail_container,
+        .mx_ImageBody .mx_ImageBody_container,
         .mx_MVideoBody .mx_MVideoBody_container,
-        .mx_MImageBody::before,
+        .mx_ImageBody::before,
         .mx_MediaBody,
         .mx_MLocationBody_map,
         .mx_MBeaconBody {
@@ -400,9 +397,9 @@ Please see LICENSE files in the repository root for full details.
     &.mx_EventTile_continuation[data-self="true"] .mx_EventTile_line {
         border-top-right-radius: 0;
 
-        .mx_MImageBody .mx_MImageBody_thumbnail_container,
+        .mx_ImageBody .mx_ImageBody_container,
         .mx_MVideoBody .mx_MVideoBody_container,
-        .mx_MImageBody::before,
+        .mx_ImageBody::before,
         .mx_MediaBody,
         .mx_MLocationBody_map,
         .mx_MBeaconBody {
@@ -412,9 +409,9 @@ Please see LICENSE files in the repository root for full details.
     &.mx_EventTile_lastInSection[data-self="true"] .mx_EventTile_line {
         border-bottom-right-radius: var(--cornerRadius);
 
-        .mx_MImageBody .mx_MImageBody_thumbnail_container,
+        .mx_ImageBody .mx_ImageBody_container,
         .mx_MVideoBody .mx_MVideoBody_container,
-        .mx_MImageBody::before,
+        .mx_ImageBody::before,
         .mx_MediaBody,
         .mx_MLocationBody_map,
         .mx_MBeaconBody {
@@ -437,7 +434,7 @@ Please see LICENSE files in the repository root for full details.
             .mx_EventTile_reply {
                 max-width: 90%;
                 padding: 0;
-                > a, /* timestamp wrapper anchor */
+                > a, /* linked timestamp element */
                 .mx_MessageActionBar + .mx_MessageTimestamp {
                     display: none !important;
                 }
@@ -527,6 +524,21 @@ Please see LICENSE files in the repository root for full details.
     .mx_CallEvent_wrapper {
         justify-content: center;
     }
+
+    &.mx_EventTile_alignedBetweenBubbles {
+        margin-inline-start: calc(
+            var(--EventTile_bubble-margin-inline-start) + var(--EventTile_bubble_line-margin-inline-start)
+        );
+        margin-inline-end: calc(
+            var(--EventTile_bubble-margin-inline-end) + var(--EventTile_bubble_line-margin-inline-end)
+        );
+
+        .mx_EventTile_line {
+            max-width: 100%;
+            width: 100%;
+            margin: 0;
+        }
+    }
 }
 
 .mx_EventTile.mx_EventTile_noBubble[data-layout="bubble"] {
@@ -537,7 +549,7 @@ Please see LICENSE files in the repository root for full details.
         font-style: italic;
 
         > a {
-            /* timestamp anchor wrapper */
+            /* linked timestamp element */
             align-self: center;
             bottom: unset;
             top: unset;
@@ -594,7 +606,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_EventTile_line {
-        > a, /* timestamp wrapper anchor */
+        > a, /* linked timestamp element */
         .mx_MessageActionBar + .mx_MessageTimestamp {
             right: auto;
             left: -77px;
diff --git a/apps/web/res/css/views/rooms/_EventTile.pcss b/apps/web/res/css/views/rooms/_EventTile.pcss
index ffe0fcc13d..fe274ec2f5 100644
--- a/apps/web/res/css/views/rooms/_EventTile.pcss
+++ b/apps/web/res/css/views/rooms/_EventTile.pcss
@@ -78,8 +78,8 @@ $left-gutter: 64px;
         min-width: 100px;
     }
 
-    .mx_MImageBody {
-        .mx_MImageBody_thumbnail_container {
+    .mx_ImageBody {
+        .mx_ImageBody_container {
             display: flex;
             align-items: center; /* on every layout */
         }
@@ -97,7 +97,7 @@ $left-gutter: 64px;
         display: flex;
         flex-flow: wrap;
         align-items: center;
-        gap: $spacing-4;
+        gap: var(--cpd-space-1x);
     }
 
     .mx_ReplyChain--expanded {
@@ -156,8 +156,8 @@ $left-gutter: 64px;
             position: absolute;
         }
 
-        .mx_MImageBody {
-            .mx_MImageBody_thumbnail_container {
+        .mx_ImageBody {
+            .mx_ImageBody_container {
                 justify-content: flex-start;
                 min-height: $font-44px;
                 min-width: $font-44px;
@@ -236,7 +236,7 @@ $left-gutter: 64px;
         }
 
         .mx_ReplyChain {
-            margin-bottom: $spacing-8;
+            margin-bottom: var(--cpd-space-2x);
         }
     }
 
@@ -315,7 +315,7 @@ $left-gutter: 64px;
                     display: inline;
                     background-color: $event-selected-color;
                     border-radius: 8px 0 0 8px;
-                    padding-right: $spacing-8;
+                    padding-right: var(--cpd-space-2x);
                 }
 
                 > .mx_DisambiguatedProfile_mxid {
@@ -440,7 +440,7 @@ $left-gutter: 64px;
     &[data-layout="group"] {
         .mx_EventTile_avatar {
             top: 14px;
-            left: $spacing-8;
+            left: var(--cpd-space-2x);
         }
 
         .mx_EventTile_line,
@@ -657,11 +657,11 @@ $left-gutter: 64px;
             border: 1px solid $inlinecode-border-color;
             border-radius: 4px;
             /* The horizontal padding is added by github-markdown-css .markdown-body */
-            padding: $spacing-2 0;
+            padding: var(--cpd-space-0-5x) 0;
             /* Avoid inline code blocks to be sticked when on multiple lines */
             line-height: $font-22px;
             /* Avoid the border to be glued to the other words */
-            margin-right: $spacing-2;
+            margin-right: var(--cpd-space-0-5x);
         }
 
         code {
@@ -851,6 +851,12 @@ $left-gutter: 64px;
         /* For correct positioning of _copyButton (See TextualBody) */
         position: relative;
 
+        /* Emoji are enlarged in prose, but a code block's line numbers are one fixed-height block
+           per line and cannot follow a line that an enlarged emoji has made taller. */
+        .mx_Emoji {
+            font-size: inherit;
+        }
+
         &:focus-within,
         &:hover {
             .mx_EventTile_button {
@@ -860,17 +866,15 @@ $left-gutter: 64px;
 
         .mx_EventTile_collapsedCodeBlock {
             max-height: 30vh;
-            padding-top: $spacing-12;
-            padding-bottom: $spacing-12;
+            padding-top: var(--cpd-space-3x);
+            padding-bottom: var(--cpd-space-3x);
         }
 
         /* Inserted adjacent to <pre> blocks, (See TextualBody) */
         .mx_EventTile_button {
             position: absolute;
-            top: $spacing-8;
-            right: $spacing-8;
-            width: 16px;
-            height: 16px;
+            top: var(--cpd-space-2x);
+            right: var(--cpd-space-2x);
             visibility: hidden;
 
             &.mx_EventTile_buttonBottom {
@@ -916,7 +920,7 @@ $left-gutter: 64px;
         margin-right: 0;
 
         span {
-            padding: $spacing-4 $spacing-8;
+            padding: var(--cpd-space-1x) var(--cpd-space-2x);
         }
     }
 
@@ -934,10 +938,10 @@ $left-gutter: 64px;
 
 .mx_EventTile[data-shape="ThreadsList"],
 .mx_EventTile[data-shape="Notification"] {
-    --topOffset: $spacing-12;
+    --topOffset: var(--cpd-space-3x);
     --leftOffset: 48px;
     $borderRadius: 8px;
-    $padding: $spacing-8;
+    $padding: var(--cpd-space-2x);
     $hrHeight: 1px;
     $notification-dot-size: 8px; /* notification dot next to the timestamp */
 
@@ -1053,7 +1057,7 @@ $left-gutter: 64px;
 
 .mx_EventTile[data-shape="ThreadsList"] {
     .mx_ThreadPanel_replies {
-        margin-top: $spacing-8;
+        margin-top: var(--cpd-space-2x);
         display: flex;
         align-items: center;
         position: relative;
@@ -1066,12 +1070,23 @@ $left-gutter: 64px;
         .mx_ThreadPanel_replies_amount {
             @mixin ThreadRepliesAmount;
         }
+    }
+}
 
-        .mx_ThreadSummary_content {
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-        }
+.mx_ThreadSummary_icon {
+    display: inline-block;
+    margin-top: var(--cpd-space-2x);
+    margin-bottom: var(--cpd-space-2x);
+
+    > svg {
+        @mixin ThreadSummaryIcon;
+        vertical-align: middle;
+        margin-inline-end: var(--cpd-space-2x);
+        margin-top: -2px;
+    }
+
+    a& {
+        color: $secondary-content;
     }
 }
 
@@ -1154,7 +1169,7 @@ $left-gutter: 64px;
 
         &[data-layout="irc"],
         &[data-layout="group"] {
-            padding-block-start: $spacing-16;
+            padding-block-start: var(--cpd-space-4x);
 
             .mx_EventTile_line,
             .mx_EventTile_footer {
@@ -1191,8 +1206,8 @@ $left-gutter: 64px;
             .mx_EventTile_senderDetails {
                 display: flex;
                 align-items: center;
-                gap: $spacing-16; /* gap between the avatar and the sender ID */
-                padding-inline-start: $spacing-8;
+                gap: var(--cpd-space-4x); /* gap between the avatar and the sender ID */
+                padding-inline-start: var(--cpd-space-2x);
 
                 a {
                     flex: 1;
@@ -1256,7 +1271,7 @@ $left-gutter: 64px;
 /* Cascading - compact modern layout on the main timeline and the right panel */
 .mx_MatrixChat_useCompactLayout {
     .mx_EventTile[data-layout="group"] {
-        --MatrixChat_useCompactLayout_group-padding-top: $spacing-4;
+        --MatrixChat_useCompactLayout_group-padding-top: var(--cpd-space-1x);
         --MatrixChat_useCompactLayout-top-avatar: 2px;
         --MatrixChat_useCompactLayout_line-spacing-block: 0px;
 
@@ -1268,7 +1283,7 @@ $left-gutter: 64px;
         }
 
         .mx_ReplyChain {
-            margin-bottom: $spacing-4;
+            margin-bottom: var(--cpd-space-1x);
         }
 
         &.mx_EventTile_info {
@@ -1288,7 +1303,7 @@ $left-gutter: 64px;
         }
 
         &.mx_EventTile_emote {
-            padding-top: $spacing-8; /* add a bit more space for emotes so that avatars don't collide */
+            padding-top: var(--cpd-space-2x); /* add a bit more space for emotes so that avatars don't collide */
 
             .mx_EventTile_avatar {
                 top: var(--MatrixChat_useCompactLayout-top-avatar);
@@ -1340,7 +1355,7 @@ $left-gutter: 64px;
             blockquote,
             pre,
             table {
-                margin-bottom: $spacing-4; /* 1/4 of the non-compact margin-bottom */
+                margin-bottom: var(--cpd-space-1x); /* 1/4 of the non-compact margin-bottom */
             }
         }
     }
@@ -1351,7 +1366,7 @@ $left-gutter: 64px;
     width: stretch;
     align-items: center;
     justify-content: space-between;
-    gap: $spacing-8;
+    gap: var(--cpd-space-2x);
     margin-left: var(--leftOffset);
     .mx_EventTile_truncated {
         flex: 1;
diff --git a/apps/web/res/css/views/rooms/_LegacyRoomList.pcss b/apps/web/res/css/views/rooms/_LegacyRoomList.pcss
deleted file mode 100644
index d890b561ec..0000000000
--- a/apps/web/res/css/views/rooms/_LegacyRoomList.pcss
+++ /dev/null
@@ -1,11 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_LegacyRoomList {
-    padding-right: 7px; /* width of the scrollbar, to line things up */
-}
diff --git a/apps/web/res/css/views/rooms/_LegacyRoomListHeader.pcss b/apps/web/res/css/views/rooms/_LegacyRoomListHeader.pcss
deleted file mode 100644
index ec93c4e746..0000000000
--- a/apps/web/res/css/views/rooms/_LegacyRoomListHeader.pcss
+++ /dev/null
@@ -1,75 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2021 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_LegacyRoomListHeader {
-    display: flex;
-    align-items: center;
-
-    .mx_LegacyRoomListHeader_contextLessTitle,
-    .mx_LegacyRoomListHeader_contextMenuButton {
-        font: var(--cpd-font-heading-sm-semibold);
-        font-weight: var(--cpd-font-weight-semibold);
-        padding: 1px 24px 1px 4px;
-        position: relative;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        margin-left: 8px;
-        margin-right: auto;
-        user-select: none;
-    }
-
-    .mx_LegacyRoomListHeader_contextMenuButton {
-        border-radius: 6px;
-
-        &:hover {
-            background-color: $quinary-content;
-        }
-
-        svg {
-            width: 20px;
-            height: 20px;
-            top: 3px;
-            right: 0;
-            position: absolute;
-            color: $tertiary-content;
-        }
-
-        &[aria-expanded="true"] {
-            background-color: $quinary-content;
-        }
-    }
-
-    .mx_LegacyRoomListHeader_plusButton {
-        width: 32px;
-        height: 32px;
-        border-radius: 8px;
-        position: relative;
-        padding: 8px;
-        margin-left: 8px;
-        margin-right: 12px;
-        background-color: $panel-actions;
-        box-sizing: border-box;
-        flex-shrink: 0;
-
-        svg {
-            width: 16px;
-            height: 16px;
-            position: absolute;
-            color: $secondary-content;
-        }
-
-        &:hover {
-            background-color: $tertiary-content;
-
-            svg {
-                color: $background;
-            }
-        }
-    }
-}
diff --git a/apps/web/res/css/views/rooms/_MemberTileView.pcss b/apps/web/res/css/views/rooms/_MemberTileView.pcss
index 307625d042..ce28cbdfb8 100644
--- a/apps/web/res/css/views/rooms/_MemberTileView.pcss
+++ b/apps/web/res/css/views/rooms/_MemberTileView.pcss
@@ -41,4 +41,10 @@ Please see LICENSE files in the repository root for full details.
         height: 32px;
         width: 32px;
     }
+
+    .mx_MemberTileView_presence {
+        position: absolute;
+        right: -2px;
+        bottom: 2px;
+    }
 }
diff --git a/apps/web/res/css/views/rooms/_NotificationBadge.pcss b/apps/web/res/css/views/rooms/_NotificationBadge.pcss
deleted file mode 100644
index d867f6f501..0000000000
--- a/apps/web/res/css/views/rooms/_NotificationBadge.pcss
+++ /dev/null
@@ -1,86 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_NotificationBadge {
-    &:not(.mx_NotificationBadge_visible) {
-        display: none;
-    }
-
-    /* Badges are structured a bit weirdly to work around issues with non-monospace */
-    /* font styles. The badge pill is actually a background div and the count floats */
-    /* within that. For example: */
-    /*  ( 99+ ) <-- Rounded pill is a _bg class. */
-    /*     ^- The count is an element floating within that. */
-
-    &.mx_NotificationBadge_visible {
-        background-color: $roomtile-default-badge-bg-color;
-        /* For enhanced visibility under contrast control */
-        outline: 1px solid transparent;
-
-        /* Create a flexbox to order the count a bit easier */
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        /* These are the 3 background types */
-
-        &.mx_NotificationBadge_dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 8px;
-            background-color: var(--cpd-color-icon-primary);
-
-            .mx_NotificationBadge_count {
-                display: none;
-            }
-
-            /* Redundant sounding name, but a notification badge that indicates there is a regular,
-             * non-highlight notification
-             * The green colour only applies for notification dot: badges indicating the same notification
-             * level are the standard grey.
-             */
-            &.mx_NotificationBadge_level_notification {
-                background-color: var(--cpd-color-icon-success-primary);
-            }
-        }
-
-        /* Badges for highlight notifications. Style for notification level
-         * badges is in _EventTile.scss because it applies only to notification
-         * dots, not badges.
-         */
-        &.mx_NotificationBadge_level_highlight {
-            background-color: var(--cpd-color-icon-critical-primary);
-        }
-
-        & > svg {
-            width: 16px;
-            height: 16px;
-        }
-
-        &.mx_NotificationBadge_2char {
-            width: $font-16px;
-            height: $font-16px;
-            border-radius: $font-16px;
-        }
-
-        &.mx_NotificationBadge_3char {
-            width: $font-26px;
-            height: $font-16px;
-            border-radius: $font-16px;
-        }
-
-        /* The following is the floating badge */
-
-        .mx_NotificationBadge_count {
-            font-size: $font-10px;
-            line-height: $font-14px;
-            font-weight: var(--cpd-font-weight-semibold);
-            color: var(--cpd-color-text-on-solid-primary);
-        }
-    }
-}
diff --git a/apps/web/res/css/views/rooms/_PresenceIconView.pcss b/apps/web/res/css/views/rooms/_PresenceIconView.pcss
index e09fbdf2fa..585baf1928 100644
--- a/apps/web/res/css/views/rooms/_PresenceIconView.pcss
+++ b/apps/web/res/css/views/rooms/_PresenceIconView.pcss
@@ -6,11 +6,6 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_PresenceIconView {
-    position: absolute;
-    top: 24px;
-    left: 24px;
-    width: 12px;
-    height: 12px;
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/apps/web/res/css/views/rooms/_ReplyPreview.pcss b/apps/web/res/css/views/rooms/_ReplyPreview.pcss
index b80de710f6..468d5faf96 100644
--- a/apps/web/res/css/views/rooms/_ReplyPreview.pcss
+++ b/apps/web/res/css/views/rooms/_ReplyPreview.pcss
@@ -17,8 +17,8 @@ Please see LICENSE files in the repository root for full details.
         border-bottom: 1px solid $primary-hairline-color;
         display: flex;
         flex-flow: column;
-        row-gap: $spacing-8;
-        padding: $spacing-8 $spacing-8 0 0;
+        row-gap: var(--cpd-space-2x);
+        padding: var(--cpd-space-2x) var(--cpd-space-2x) 0 0;
 
         .mx_ReplyPreview_header {
             display: flex;
diff --git a/apps/web/res/css/views/rooms/_ReplyTile.pcss b/apps/web/res/css/views/rooms/_ReplyTile.pcss
index aea4bae626..8c27853b7c 100644
--- a/apps/web/res/css/views/rooms/_ReplyTile.pcss
+++ b/apps/web/res/css/views/rooms/_ReplyTile.pcss
@@ -21,9 +21,7 @@ Please see LICENSE files in the repository root for full details.
         color: $secondary-content;
         transition: color ease 0.15s;
         gap: 2px;
-        max-width: 100%;
-
-        // avoid overflow with wide content
+        max-width: 100%; /* avoid overflow with wide content */
 
         &:hover {
             color: $primary-content;
@@ -61,12 +59,18 @@ Please see LICENSE files in the repository root for full details.
             font-size: $font-14px !important; /* Override the big emoji override */
         }
 
-        // in order to keep the message on two lines, we need to make the body inline
+        /* in order to keep the message on two lines, we need to make the body inline */
         .mx_EventTile_body {
             display: inline;
         }
 
-        // Hide line numbers and edited indicator
+        /* The annotation wrapper is flex in normal timeline messages, but that stops
+        -webkit-line-clamp from trimming long edited quotes down to two lines. */
+        [data-textual-body-annotation-wrapper] {
+            display: contents;
+        }
+
+        /* Hide line numbers and edited indicator */
         .mx_EventTile_lineNumbers,
         [data-textual-body-edited-marker] {
             display: none;
diff --git a/apps/web/res/css/views/rooms/_RoomBreadcrumbs.pcss b/apps/web/res/css/views/rooms/_RoomBreadcrumbs.pcss
deleted file mode 100644
index 7dd150cd27..0000000000
--- a/apps/web/res/css/views/rooms/_RoomBreadcrumbs.pcss
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_RoomBreadcrumbs {
-    width: 100%;
-
-    /* Create a flexbox for the crumbs */
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    margin-bottom: 12px;
-
-    .mx_RoomBreadcrumbs_crumb {
-        margin-right: 8px;
-        width: 32px;
-    }
-
-    /* These classes come from the CSSTransition component. There's many more classes we */
-    /* could care about, but this is all we worried about for now. The animation works by */
-    /* first triggering the enter state with the newest breadcrumb off screen (-40px) then */
-    /* sliding it into view. */
-    &.mx_RoomBreadcrumbs-enter {
-        transform: translateX(-40px); /* 32px for the avatar, 8px for the margin */
-    }
-    &.mx_RoomBreadcrumbs-enter-active {
-        transform: translateX(0);
-
-        /* Timing function is as-requested by design. */
-        /* NOTE: The transition time MUST match the value passed to CSSTransition! */
-        transition: transform 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
-    }
-
-    .mx_RoomBreadcrumbs_placeholder {
-        font: var(--cpd-font-body-md-semibold);
-        line-height: 32px; /* specifically to match the height this is not scaled */
-        height: 32px;
-    }
-}
diff --git a/apps/web/res/css/views/rooms/_RoomCallBanner.pcss b/apps/web/res/css/views/rooms/_RoomCallBanner.pcss
deleted file mode 100644
index 8e49f6c126..0000000000
--- a/apps/web/res/css/views/rooms/_RoomCallBanner.pcss
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_RoomCallBanner {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    box-sizing: border-box;
-    padding: $spacing-12 $spacing-16;
-
-    color: $primary-content;
-    background-color: $system;
-    cursor: pointer;
-}
-
-.mx_RoomCallBanner_text {
-    display: flex;
-    flex: 1;
-    align-items: center;
-}
-
-.mx_RoomCallBanner_label {
-    color: $primary-content;
-    font-weight: var(--cpd-font-weight-semibold);
-    padding-right: $spacing-8;
-
-    svg {
-        display: inline-block;
-        vertical-align: middle;
-        color: $secondary-content;
-        width: 16px;
-        height: 16px;
-        margin-right: 8px;
-    }
-}
diff --git a/apps/web/res/css/views/rooms/_RoomHeader.pcss b/apps/web/res/css/views/rooms/_RoomHeader.pcss
index a42811fae2..353120fd36 100644
--- a/apps/web/res/css/views/rooms/_RoomHeader.pcss
+++ b/apps/web/res/css/views/rooms/_RoomHeader.pcss
@@ -59,13 +59,12 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_RoomHeader_heading {
     display: flex;
-    gap: var(--cpd-space-1x);
+    gap: var(--cpd-space-1-5x);
     align-items: center;
 }
 
 .mx_RoomHeader_icon {
     flex-shrink: 0;
-    padding: var(--cpd-space-1x);
 }
 
 .mx_RoomHeader .mx_FacePile {
diff --git a/apps/web/res/css/views/rooms/_RoomPreviewBar.pcss b/apps/web/res/css/views/rooms/_RoomPreviewBar.pcss
index 39df898c1a..99c1b8a7b5 100644
--- a/apps/web/res/css/views/rooms/_RoomPreviewBar.pcss
+++ b/apps/web/res/css/views/rooms/_RoomPreviewBar.pcss
@@ -103,7 +103,8 @@ Please see LICENSE files in the repository root for full details.
     margin: auto;
     box-sizing: content;
     width: 400px;
-    border-radius: 4px;
+    /* Matches the room preview card this stands in place of, and the panel form of this same bar */
+    border-radius: 8px;
     flex-direction: column;
     padding: 20px;
     text-align: center;
diff --git a/apps/web/res/css/views/rooms/_RoomPreviewCard.pcss b/apps/web/res/css/views/rooms/_RoomPreviewCard.pcss
index 9fbcd835f7..4115277baf 100644
--- a/apps/web/res/css/views/rooms/_RoomPreviewCard.pcss
+++ b/apps/web/res/css/views/rooms/_RoomPreviewCard.pcss
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_RoomPreviewCard {
-    padding: $spacing-32 $spacing-24 !important; /* Override SpaceRoomView's default padding */
+    padding: var(--cpd-space-8x) var(--cpd-space-6x) !important; /* Override SpaceRoomView's default padding */
     margin: auto;
     flex-grow: 1;
     max-width: 480px;
@@ -21,12 +21,12 @@ Please see LICENSE files in the repository root for full details.
         font-weight: var(--cpd-font-weight-semibold);
         line-height: $font-24px;
         color: $primary-content;
-        margin-top: $spacing-24;
+        margin-top: var(--cpd-space-6x);
 
         svg {
             height: 1em;
             width: 1em;
-            margin-right: $spacing-8;
+            margin-right: var(--cpd-space-2x);
             color: $secondary-content;
             vertical-align: -2px;
         }
@@ -35,11 +35,11 @@ Please see LICENSE files in the repository root for full details.
     .mx_RoomPreviewCard_inviter {
         display: flex;
         align-items: center;
-        margin-bottom: $spacing-20;
+        margin-bottom: var(--cpd-space-5x);
         font-size: $font-15px;
 
         > div {
-            margin-left: $spacing-8;
+            margin-left: var(--cpd-space-2x);
 
             .mx_RoomPreviewCard_inviter_name {
                 line-height: $font-18px;
@@ -75,18 +75,18 @@ Please see LICENSE files in the repository root for full details.
         /* XXX Remove this when video rooms leave beta */
         .mx_BetaCard_betaPill {
             position: absolute;
-            inset-block-start: $spacing-32;
-            inset-inline-end: $spacing-24;
+            inset-block-start: var(--cpd-space-8x);
+            inset-inline-end: var(--cpd-space-6x);
         }
     }
 
     h1.mx_RoomPreviewCard_name {
-        margin: $spacing-16 0 !important; /* Override SpaceRoomView's default margins */
+        margin: var(--cpd-space-4x) 0 !important; /* Override SpaceRoomView's default margins */
     }
 
     .mx_RoomPreviewCard_topic {
         line-height: $font-22px;
-        margin-top: $spacing-16;
+        margin-top: var(--cpd-space-4x);
         max-height: 160px;
         overflow-y: auto;
     }
@@ -94,7 +94,7 @@ Please see LICENSE files in the repository root for full details.
     .mx_FacePile {
         display: flex;
         align-items: center;
-        margin-top: $spacing-16;
+        margin-top: var(--cpd-space-4x);
         /* For enhanced visibility under contrast control */
         outline: 1px solid transparent;
 
@@ -104,9 +104,9 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_RoomPreviewCard_joinButtons {
-        margin-top: $spacing-20;
+        margin-top: var(--cpd-space-5x);
         display: flex;
-        gap: $spacing-20;
+        gap: var(--cpd-space-5x);
 
         .mx_AccessibleButton {
             max-width: 200px;
diff --git a/apps/web/res/css/views/rooms/_RoomSublist.pcss b/apps/web/res/css/views/rooms/_RoomSublist.pcss
deleted file mode 100644
index f1118ebed6..0000000000
--- a/apps/web/res/css/views/rooms/_RoomSublist.pcss
+++ /dev/null
@@ -1,389 +0,0 @@
-/*
-Copyright 2024,2025 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_RoomSublist {
-    margin-left: 8px;
-    margin-bottom: 4px;
-
-    &.mx_RoomSublist_hidden {
-        display: none;
-    }
-
-    &:not(.mx_RoomSublist_minimized) {
-        .mx_RoomSublist_headerContainer {
-            height: auto;
-        }
-    }
-
-    .mx_RoomSublist_headerContainer {
-        /* Create a flexbox to make alignment easy */
-        display: flex;
-        align-items: center;
-
-        /* *************************** */
-        /* Sticky Headers Start */
-
-        /* Ideally we'd be able to use `position: sticky; top: 0; bottom: 0;` on the */
-        /* headerContainer, however due to our layout concerns we actually have to */
-        /* calculate it manually so we can sticky things in the right places. We also */
-        /* target the headerText instead of the container to reduce jumps when scrolling, */
-        /* and to help hide the badges/other buttons that could appear on hover. This */
-        /* all works by ensuring the header text has a fixed height when sticky so the */
-        /* fixed height of the container can maintain the scroll position. */
-
-        /* The combined height must be set in the LeftPanel component for sticky headers */
-        /* to work correctly. */
-        padding-bottom: 8px;
-        height: 24px;
-        color: $secondary-content;
-
-        .mx_RoomSublist_stickableContainer {
-            width: 100%;
-        }
-
-        .mx_RoomSublist_stickable {
-            flex: 1;
-            max-width: 100%;
-
-            /* Create a flexbox to make ordering easy */
-            display: flex;
-            align-items: center;
-
-            /* We use a generic sticky class for 2 reasons: to reduce style duplication and */
-            /* to identify when a header is sticky. If we didn't have a consistent sticky class, */
-            /* we'd have to do the "is sticky" checks again on click, as clicking the header */
-            /* when sticky scrolls instead of collapses the list. */
-            &.mx_RoomSublist_headerContainer_sticky {
-                position: fixed;
-                height: 32px; /* to match the header container */
-                /* width set by JS because of a compat issue between Firefox and Chrome */
-                width: calc(100% - 15px);
-            }
-
-            /* We don't have a top style because the top is dependent on the room list header's */
-            /* height, and is therefore calculated in JS. */
-            /* The class, mx_RoomSublist_headerContainer_stickyTop, is applied though. */
-        }
-
-        /* Sticky Headers End */
-        /* *************************** */
-
-        .mx_RoomSublist_badgeContainer {
-            /* Create another flexbox row because it's super easy to position the badge this way. */
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            /* Apply the width and margin to the badge so the container doesn't occupy dead space */
-            .mx_NotificationBadge {
-                /* Do not set a width so the badges get properly sized */
-                margin-left: 8px; /* same as menu+aux buttons */
-            }
-        }
-
-        &:not(.mx_RoomSublist_headerContainer_withAux) {
-            .mx_NotificationBadge {
-                margin-right: 4px; /* just to push it over a bit, aligning it with the other elements */
-            }
-        }
-
-        .mx_RoomSublist_auxButton,
-        .mx_RoomSublist_menuButton {
-            margin-left: 8px; /* should be the same as the notification badge */
-            position: relative;
-            width: 24px;
-            height: 24px;
-            border-radius: 8px;
-
-            svg {
-                width: 16px;
-                height: 16px;
-                position: absolute;
-                top: 4px;
-                left: 4px;
-                color: var(--cpd-color-icon-secondary);
-            }
-        }
-
-        .mx_RoomSublist_auxButton:hover svg,
-        .mx_RoomSublist_menuButton:hover svg {
-            color: $panel-actions;
-        }
-
-        /* Hide the menu button by default */
-        .mx_RoomSublist_menuButton {
-            visibility: hidden;
-            width: 0;
-            margin: 0;
-        }
-
-        .mx_RoomSublist_headerText {
-            flex: 1;
-            max-width: calc(100% - 16px); /* 16px is the badge width */
-            font: var(--cpd-font-body-sm-semibold);
-
-            /* Ellipsize any text overflow */
-            text-overflow: ellipsis;
-            overflow: hidden;
-            white-space: nowrap;
-
-            .mx_RoomSublist_collapseBtn {
-                display: inline-block;
-                position: relative;
-                width: 14px;
-                height: 14px;
-                margin-right: 6px;
-
-                svg {
-                    width: 18px;
-                    height: 18px;
-                    position: absolute;
-                    color: var(--cpd-color-icon-secondary);
-                }
-            }
-        }
-    }
-
-    /* In the general case, we reserve space for each sublist header to prevent */
-    /* scroll jumps when they become sticky. However, that leaves a gap when */
-    /* scrolled to the top above the first sublist (whose header can only ever */
-    /* stick to top), so we make sure to exclude the first visible sublist. */
-    &:not(.mx_RoomSublist_hidden) ~ .mx_RoomSublist .mx_RoomSublist_stickableContainer {
-        height: 24px;
-    }
-
-    .mx_RoomSublist_resizeBox {
-        position: relative;
-
-        /* Create another flexbox column for the tiles */
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-
-        .mx_RoomSublist_tiles {
-            flex: 1 0 0;
-            overflow: hidden;
-            overflow: clip;
-            /* need this to be flex otherwise the overflow hidden from above */
-            /* sometimes vertically centers the clipped list ... no idea why it would do this */
-            /* as the box model should be top aligned. Happens in both FF and Chromium */
-            display: flex;
-            flex-direction: column;
-            align-self: stretch;
-            /* without this Firefox will prefer pushing the resizer & show more/less button into the overflow */
-            min-height: 0;
-
-            mask-image: linear-gradient(0deg, transparent, black 4px);
-        }
-
-        &.mx_RoomSublist_resizeBox_forceExpanded .mx_RoomSublist_tiles {
-            /* in this state the div can collapse its height entirely in Chromium, */
-            /* so prevent that by allowing overflow */
-            overflow: visible;
-            /* clear the min-height to make it not collapse entirely in a state with no active resizer */
-            min-height: unset;
-        }
-
-        .mx_RoomSublist_resizerHandles_showNButton {
-            flex: 0 0 32px;
-        }
-
-        .mx_RoomSublist_resizerHandles {
-            flex: 0 0 4px;
-            display: flex;
-            justify-content: center;
-            width: 100%;
-        }
-
-        /* Class name comes from the ResizableBox component */
-        /* The hover state needs to use the whole sublist, not just the resizable box, */
-        /* so that selector is below and one level higher. */
-        .mx_RoomSublist_resizerHandle {
-            cursor: ns-resize;
-            border-radius: 3px;
-
-            /* Override styles from library */
-            max-width: 64px;
-            height: 4px !important; /* Update RESIZE_HANDLE_HEIGHT if this changes */
-
-            /* This is positioned directly below the 'show more' button. */
-            position: relative !important;
-            bottom: 0 !important; /* override from library */
-        }
-
-        &:hover,
-        &.mx_RoomSublist_hasMenuOpen {
-            .mx_RoomSublist_resizerHandle {
-                opacity: 0.8;
-                background-color: $primary-content;
-            }
-        }
-    }
-
-    .mx_RoomSublist_showNButton {
-        cursor: pointer;
-        font-size: $font-13px;
-        line-height: $font-18px;
-        color: $secondary-content;
-
-        /* Update the render() function for RoomSublist if these change */
-        /* Update the ListLayout class for minVisibleTiles if these change. */
-        height: 24px;
-        padding-bottom: 4px;
-
-        /* We create a flexbox to cheat at alignment */
-        display: flex;
-        align-items: center;
-
-        .mx_RoomSublist_showNButtonChevron {
-            position: relative;
-            width: 18px;
-            height: 18px;
-            margin-left: 12px;
-            margin-right: 16px;
-            color: $tertiary-content;
-            left: -1px; /* adjust for image position */
-        }
-    }
-
-    &.mx_RoomSublist_hasMenuOpen,
-    &:not(.mx_RoomSublist_minimized) > .mx_RoomSublist_headerContainer:focus-within,
-    &:not(.mx_RoomSublist_minimized) > .mx_RoomSublist_headerContainer:hover {
-        .mx_RoomSublist_menuButton {
-            visibility: visible;
-            width: 24px;
-            margin-left: 8px;
-        }
-    }
-
-    &.mx_RoomSublist_minimized {
-        .mx_RoomSublist_headerContainer {
-            height: auto;
-            flex-direction: column;
-            position: relative;
-
-            .mx_RoomSublist_badgeContainer {
-                order: 0;
-                align-self: flex-end;
-                margin-right: 0;
-            }
-
-            .mx_RoomSublist_stickable {
-                order: 1;
-                max-width: 100%;
-            }
-
-            .mx_RoomSublist_auxButton {
-                order: 2;
-                visibility: visible;
-                width: 32px !important; /* !important to override hover styles */
-                height: 32px !important; /* !important to override hover styles */
-                margin-left: 0 !important; /* !important to override hover styles */
-                background-color: $panel-actions;
-                margin-top: 8px;
-
-                svg {
-                    top: 8px;
-                    left: 8px;
-                }
-            }
-        }
-
-        .mx_RoomSublist_resizeBox {
-            align-items: center;
-        }
-
-        .mx_RoomSublist_showNButton {
-            flex-direction: column;
-
-            .mx_RoomSublist_showNButtonChevron {
-                margin-right: 12px; /* to center */
-            }
-        }
-
-        .mx_RoomSublist_menuButton {
-            height: 16px;
-        }
-
-        &.mx_RoomSublist_hasMenuOpen,
-        & > .mx_RoomSublist_headerContainer:hover {
-            .mx_RoomSublist_menuButton {
-                visibility: visible;
-                position: absolute;
-                bottom: 48px; /* align to middle of name, 40px for aux button (with padding) and 8px for alignment */
-                right: 0;
-                width: 16px;
-                height: 16px;
-                border-radius: 0;
-                z-index: 1; /* occlude the list name */
-
-                /* This is the same color as the left panel background because it needs */
-                /* to occlude the sublist title */
-                background-color: $roomlist-bg-color;
-
-                svg {
-                    top: 0;
-                    left: 0;
-                }
-            }
-
-            &.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) {
-                .mx_RoomSublist_menuButton {
-                    bottom: 8px; /* align to the middle of name, 40px less than the `bottom` above. */
-                }
-            }
-        }
-    }
-}
-
-.mx_RoomSublist_contextMenu {
-    padding: 20px 16px;
-    width: 250px;
-
-    hr {
-        margin-top: 16px;
-        margin-bottom: 16px;
-        margin-right: 16px; /* additional 16px */
-        border: 1px solid $primary-content;
-        opacity: 0.1;
-    }
-
-    .mx_RoomSublist_contextMenu_title {
-        font-size: $font-15px;
-        line-height: $font-20px;
-        font-weight: var(--cpd-font-weight-semibold);
-        margin-bottom: 4px;
-    }
-
-    .mx_StyledRadioButton {
-        margin-top: 8px;
-    }
-}
-
-.mx_RoomSublist_skeletonUI {
-    position: relative;
-    margin-left: 4px;
-    height: 240px;
-
-    &::before {
-        background-color: var(--cpd-color-bg-subtle-secondary);
-        width: 100%;
-        height: 100%;
-
-        content: "";
-        position: absolute;
-        mask-repeat: repeat-y;
-        mask-size: auto 48px;
-        mask-image: url("/res/img/element-icons/roomlist/skeleton-ui.svg");
-    }
-}
-
-.mx_RoomSublist_minimized .mx_RoomSublist_skeletonUI {
-    width: 32px; /* cut off the horizontal lines in the svg */
-    margin-left: 10px; /* align with sublist + buttons */
-}
diff --git a/apps/web/res/css/views/rooms/_RoomTile.pcss b/apps/web/res/css/views/rooms/_RoomTile.pcss
deleted file mode 100644
index babb70aec2..0000000000
--- a/apps/web/res/css/views/rooms/_RoomTile.pcss
+++ /dev/null
@@ -1,158 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020-2023 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-/* Note: the room tile expects to be in a flexbox column container */
-.mx_RoomTile {
-    margin-bottom: 4px;
-    padding: 4px;
-
-    /* The tile is also a flexbox row itself */
-    display: flex;
-    contain: content; /* Not strict as it will break when resizing a sublist vertically */
-    box-sizing: border-box;
-
-    font-size: var(--cpd-font-size-body-sm);
-
-    &.mx_RoomTile_selected,
-    &:hover,
-    &:focus-within,
-    &.mx_RoomTile_hasMenuOpen {
-        background-color: $panel-actions;
-        border-radius: 8px;
-    }
-
-    .mx_DecoratedRoomAvatar,
-    .mx_RoomTile_avatarContainer {
-        margin-right: 10px;
-    }
-
-    .mx_RoomTile_details {
-        min-width: 0;
-    }
-
-    .mx_RoomTile_titleContainer {
-        height: 32px;
-        min-width: 0;
-        flex-basis: 0;
-        flex-grow: 1;
-        margin-right: 8px; /* spacing to buttons/badges */
-
-        /* Create a new column layout flexbox for the title parts */
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-
-        .mx_RoomTile_subtitle {
-            align-items: center;
-            color: $secondary-content;
-            display: flex;
-            gap: $spacing-4;
-            line-height: 1.25;
-            position: relative;
-            top: -1px;
-        }
-
-        .mx_RoomTile_title,
-        .mx_RoomTile_subtitle_text {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        .mx_RoomTile_title {
-            font: var(--cpd-font-body-md-regular);
-            line-height: 1.25;
-
-            &.mx_RoomTile_titleHasUnreadEvents {
-                font-weight: var(--cpd-font-weight-semibold);
-            }
-        }
-
-        .mx_RoomTile_titleWithSubtitle {
-            margin-top: -2px; /* shift the title up a bit more */
-        }
-    }
-
-    .mx_RoomTile_notificationsButton {
-        margin-left: 4px; /* spacing between buttons */
-    }
-
-    .mx_RoomTile_badgeContainer {
-        height: 16px;
-        /* don't set width so that it takes no space when there is no badge to show */
-        margin: auto 0; /* vertically align */
-
-        /* Create a flexbox to make aligning dot badges easier */
-        display: flex;
-        align-items: center;
-
-        .mx_NotificationBadge {
-            margin-right: 2px; /* centering */
-        }
-
-        .mx_NotificationBadge_dot {
-            /* make the smaller dot occupy the same width for centering */
-            margin-left: 5px;
-            margin-right: 7px;
-        }
-    }
-
-    /* The context menu buttons are hidden by default */
-    .mx_RoomTile_menuButton,
-    .mx_RoomTile_notificationsButton {
-        width: 16px;
-        height: 16px;
-        padding: var(--cpd-space-0-5x);
-        flex-shrink: 0;
-        margin-top: auto;
-        margin-bottom: auto;
-        position: relative;
-        display: none;
-
-        svg {
-            width: inherit;
-            height: inherit;
-            display: block;
-            color: var(--cpd-color-icon-primary);
-        }
-    }
-
-    /* If the room has an overriden notification setting then we always show the notifications menu button */
-    .mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
-        display: block;
-    }
-
-    &:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky) {
-        &:hover,
-        &:focus-within,
-        &.mx_RoomTile_hasMenuOpen {
-            /* Hide the badge container on hover because it'll be a menu button */
-            .mx_RoomTile_badgeContainer {
-                width: 0;
-                height: 0;
-                display: none;
-            }
-
-            .mx_RoomTile_notificationsButton,
-            .mx_RoomTile_menuButton {
-                display: block;
-            }
-        }
-    }
-
-    &.mx_RoomTile_minimized {
-        flex-direction: column;
-        align-items: center;
-        position: relative;
-
-        .mx_DecoratedRoomAvatar,
-        .mx_RoomTile_avatarContainer {
-            margin-right: 0;
-        }
-    }
-}
diff --git a/apps/web/res/css/views/rooms/_ThreadSummary.pcss b/apps/web/res/css/views/rooms/_ThreadSummary.pcss
deleted file mode 100644
index a030918f24..0000000000
--- a/apps/web/res/css/views/rooms/_ThreadSummary.pcss
+++ /dev/null
@@ -1,125 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-.mx_ThreadSummary,
-.mx_ThreadSummary_content {
-    color: $secondary-content;
-}
-
-.mx_ThreadSummary,
-.mx_ThreadSummary_icon {
-    margin-top: $spacing-8;
-}
-
-.mx_ThreadSummary {
-    min-width: 267px;
-    /* leave space on both left & right gutters */
-    max-width: min(calc(100% - var(--EventTile_group_line-spacing-inline-start)), 600px);
-    width: fit-content;
-    height: 40px;
-    position: relative;
-    background-color: $panels;
-    padding-inline: $spacing-12 $spacing-16;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    border-radius: 8px;
-    box-sizing: border-box;
-    clear: both;
-    overflow: hidden;
-    border: 1px solid $panels; /* always render a border so the hover effect doesn't require a re-layout */
-    font: var(--cpd-font-body-sm-regular);
-
-    .mx_ThreadSummary_chevron {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        width: 60px;
-        box-sizing: border-box;
-        /* XXX: We use an HEXA `transparent` to work around a Safari <15.4 bug */
-        background: linear-gradient(270deg, $system 50%, $system-transparent 100%);
-
-        opacity: 0;
-        transform: translateX(60px);
-        transition: all 0.1s ease-in-out;
-
-        svg {
-            position: absolute;
-            top: 50%;
-            right: var(--cpd-space-1x);
-            transform: translateY(-50%);
-            width: 24px;
-            height: 24px;
-            color: $secondary-content;
-        }
-    }
-
-    &:hover,
-    &:focus {
-        border-color: $quinary-content;
-
-        .mx_ThreadSummary_chevron {
-            opacity: 1;
-            transform: translateX(0);
-        }
-    }
-
-    .mx_ThreadSummary_sender,
-    .mx_ThreadSummary_content,
-    .mx_ThreadSummary_replies_amount {
-        line-height: var(--EventTile_ThreadSummary-line-height);
-    }
-
-    .mx_ThreadSummary_sender,
-    .mx_ThreadSummary_content {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-    }
-
-    .mx_ThreadSummary_sender {
-        font-weight: var(--cpd-font-weight-semibold);
-    }
-
-    .mx_ThreadSummary_content {
-        margin-left: $spacing-4;
-        flex: 1;
-    }
-
-    .mx_ThreadSummary_replies_amount {
-        @mixin ThreadRepliesAmount;
-    }
-
-    .mx_MessagePanel_narrow & {
-        min-width: initial;
-        max-width: 100%; /* prevent overflow */
-        width: initial;
-    }
-}
-
-.mx_ThreadSummary_avatar {
-    margin-inline-end: $spacing-8;
-    flex-shrink: 0;
-}
-
-.mx_ThreadSummary_icon {
-    display: inline-block;
-    margin-bottom: $spacing-8;
-
-    > svg {
-        @mixin ThreadSummaryIcon;
-        vertical-align: middle;
-        margin-inline-end: $spacing-8;
-        margin-top: -2px;
-    }
-
-    a& {
-        color: $secondary-content;
-    }
-}
diff --git a/apps/web/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss b/apps/web/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
index 4de58b123b..3314a38e67 100644
--- a/apps/web/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+++ b/apps/web/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
@@ -34,8 +34,8 @@ Please see LICENSE files in the repository root for full details.
             user-select: all;
         }
 
-        // we always have a <br/> tag at the end of the html, we need it to be present at first then hide it as soon as
-        // we have any other elements
+        /* we always have a <br/> tag at the end of the html, we need it to be present at first then hide it as soon as
+        we have any other elements */
         br:not(:only-child) {
             display: none;
         }
@@ -52,7 +52,7 @@ Please see LICENSE files in the repository root for full details.
         ol {
             margin-top: 0;
             margin-bottom: 0;
-            padding-inline-start: $spacing-28;
+            padding-inline-start: var(--cpd-space-7x);
         }
 
         /* Make list type disc to match rich text editor */
@@ -78,7 +78,7 @@ Please see LICENSE files in the repository root for full details.
 
             margin-top: 0;
             margin-bottom: 0;
-            padding: $spacing-8 $spacing-12;
+            padding: var(--cpd-space-2x) var(--cpd-space-3x);
 
             background-color: $inlinecode-background-color;
             border: 1px solid $inlinecode-border-color;
@@ -90,7 +90,7 @@ Please see LICENSE files in the repository root for full details.
             background-color: $inlinecode-background-color;
             border: 1px solid $inlinecode-border-color;
             border-radius: 4px;
-            padding: $spacing-2;
+            padding: var(--cpd-space-0-5x);
 
             &:empty {
                 border: unset;
diff --git a/apps/web/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss b/apps/web/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
index 346e05efc3..254d8625b8 100644
--- a/apps/web/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
+++ b/apps/web/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_LinkModal {
-    padding: $spacing-32;
+    padding: var(--cpd-space-8x);
     max-width: 600px;
     height: 341px;
     box-sizing: border-box;
@@ -18,7 +18,7 @@ Please see LICENSE files in the repository root for full details.
         display: flex;
         flex-direction: column;
         flex: 1;
-        gap: $spacing-8;
+        gap: var(--cpd-space-2x);
         margin-top: 7px;
 
         .mx_LinkModal_Field {
diff --git a/apps/web/res/css/views/settings/_AvatarSetting.pcss b/apps/web/res/css/views/settings/_AvatarSetting.pcss
index b928522820..fc87bf422a 100644
--- a/apps/web/res/css/views/settings/_AvatarSetting.pcss
+++ b/apps/web/res/css/views/settings/_AvatarSetting.pcss
@@ -7,9 +7,9 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_AvatarSetting_avatar {
-    width: 90px;
-    min-width: 90px; /* so it doesn't get crushed by the flexbox in languages with longer words */
-    height: 90px;
+    width: 120px;
+    min-width: 120px; /* so it doesn't get crushed by the flexbox in languages with longer words */
+    height: 120px;
     margin-top: 8px;
     position: relative;
 
@@ -31,9 +31,9 @@ Please see LICENSE files in the repository root for full details.
 
     & > img {
         display: block;
-        height: 90px;
+        height: 120px;
         width: inherit;
-        border-radius: 90px;
+        border-radius: 120px;
         cursor: pointer;
         object-fit: cover;
     }
diff --git a/apps/web/res/css/views/settings/_FontScalingPanel.pcss b/apps/web/res/css/views/settings/_FontScalingPanel.pcss
index 56e90bd9b8..bfb8de9da7 100644
--- a/apps/web/res/css/views/settings/_FontScalingPanel.pcss
+++ b/apps/web/res/css/views/settings/_FontScalingPanel.pcss
@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
 
     border: 1px solid $quinary-content;
     border-radius: 10px;
-    padding: 0 $spacing-16 var(--FontScalingPanel_preview-padding-block) $spacing-16;
+    padding: 0 var(--cpd-space-4x) var(--FontScalingPanel_preview-padding-block) var(--cpd-space-4x);
     pointer-events: none;
     display: flow-root;
 
diff --git a/apps/web/res/css/views/settings/_ImageSizePanel.pcss b/apps/web/res/css/views/settings/_ImageSizePanel.pcss
index 9112c5cdfe..8d6e879966 100644
--- a/apps/web/res/css/views/settings/_ImageSizePanel.pcss
+++ b/apps/web/res/css/views/settings/_ImageSizePanel.pcss
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_ImageSizePanel_radios {
     display: flex;
     flex-direction: row;
-    gap: $spacing-16;
+    gap: var(--cpd-space-4x);
 
     > label {
         margin-right: 68px; /* keep the boxes separate */
diff --git a/apps/web/res/css/views/settings/_IntegrationManager.pcss b/apps/web/res/css/views/settings/_IntegrationManager.pcss
index 15b7ef4b0d..617185a876 100644
--- a/apps/web/res/css/views/settings/_IntegrationManager.pcss
+++ b/apps/web/res/css/views/settings/_IntegrationManager.pcss
@@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     h3 {
-        margin-block: $spacing-20;
+        margin-block: var(--cpd-space-5x);
     }
 
     .mx_IntegrationManager_loading,
diff --git a/apps/web/res/css/views/settings/_NotificationSettings2.pcss b/apps/web/res/css/views/settings/_NotificationSettings2.pcss
index 8a41322615..6d215aa645 100644
--- a/apps/web/res/css/views/settings/_NotificationSettings2.pcss
+++ b/apps/web/res/css/views/settings/_NotificationSettings2.pcss
@@ -18,7 +18,7 @@ Please see LICENSE files in the repository root for full details.
         margin-bottom: 20px;
 
         .mx_SettingsSubsection_text {
-            .mx_NotificationBadge {
+            .mx_NotificationSettings2_notificationBadge {
                 vertical-align: baseline;
                 display: inline-flex;
                 margin: 0 2px;
diff --git a/apps/web/res/css/views/settings/_Notifications.pcss b/apps/web/res/css/views/settings/_Notifications.pcss
index a97d7529d5..f47b71c70f 100644
--- a/apps/web/res/css/views/settings/_Notifications.pcss
+++ b/apps/web/res/css/views/settings/_Notifications.pcss
@@ -26,7 +26,7 @@ Please see LICENSE files in the repository root for full details.
         }
     }
 
-    // left align section heading
+    /* left align section heading */
     .mx_SettingsSubsectionHeading {
         justify-self: start;
     }
@@ -58,7 +58,7 @@ Please see LICENSE files in the repository root for full details.
     justify-self: start;
     padding-right: 30%;
     /* collapse half of the grid-gap */
-    margin-top: -$spacing-4;
+    margin-top: calc(-1 * var(--cpd-space-1x));
 }
 
 .mx_UserNotifSettings_floatingSection {
diff --git a/apps/web/res/css/views/settings/_RoomProfileSettings.pcss b/apps/web/res/css/views/settings/_RoomProfileSettings.pcss
index 5b196a44b4..88b8e02642 100644
--- a/apps/web/res/css/views/settings/_RoomProfileSettings.pcss
+++ b/apps/web/res/css/views/settings/_RoomProfileSettings.pcss
@@ -17,11 +17,11 @@ Please see LICENSE files in the repository root for full details.
             margin-inline-end: 54px;
 
             .mx_Field {
-                margin-top: $spacing-8;
+                margin-top: var(--cpd-space-2x);
             }
 
             .mx_RoomProfileSettings_profile_controls_topic {
-                margin-top: $spacing-8;
+                margin-top: var(--cpd-space-2x);
 
                 & > textarea {
                     font-family: inherit;
@@ -34,7 +34,7 @@ Please see LICENSE files in the repository root for full details.
             }
 
             .mx_RoomProfileSettings_profile_controls_userId {
-                margin-inline-end: $spacing-20;
+                margin-inline-end: var(--cpd-space-5x);
             }
         }
     }
@@ -43,6 +43,6 @@ Please see LICENSE files in the repository root for full details.
         display: flex;
         gap: var(--cpd-space-4x);
         margin-top: 10px; /* 18px is already accounted for by the <p> above the buttons */
-        margin-bottom: $spacing-28;
+        margin-bottom: var(--cpd-space-7x);
     }
 }
diff --git a/apps/web/res/css/views/settings/_SetIntegrationManager.pcss b/apps/web/res/css/views/settings/_SetIntegrationManager.pcss
index f370d06e5e..4832622c52 100644
--- a/apps/web/res/css/views/settings/_SetIntegrationManager.pcss
+++ b/apps/web/res/css/views/settings/_SetIntegrationManager.pcss
@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
         display: flex;
         align-items: center;
         flex-wrap: wrap;
-        column-gap: $spacing-4;
+        column-gap: var(--cpd-space-1x);
     }
     form {
         margin-top: var(--cpd-space-3x);
diff --git a/apps/web/res/css/views/settings/_SettingsFieldset.pcss b/apps/web/res/css/views/settings/_SettingsFieldset.pcss
index 2b013da4b1..72db10f254 100644
--- a/apps/web/res/css/views/settings/_SettingsFieldset.pcss
+++ b/apps/web/res/css/views/settings/_SettingsFieldset.pcss
@@ -37,5 +37,5 @@ Please see LICENSE files in the repository root for full details.
 .mx_SettingsFieldset_content {
     display: flex;
     flex-direction: column;
-    gap: $spacing-8;
+    gap: var(--cpd-space-2x);
 }
diff --git a/apps/web/res/css/views/settings/_SpellCheckLanguages.pcss b/apps/web/res/css/views/settings/_SpellCheckLanguages.pcss
index 42b247b747..46ebae475b 100644
--- a/apps/web/res/css/views/settings/_SpellCheckLanguages.pcss
+++ b/apps/web/res/css/views/settings/_SpellCheckLanguages.pcss
@@ -17,5 +17,5 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_GeneralUserSettingsTab_spellCheckLanguageInput {
-    margin-bottom: $spacing-8;
+    margin-bottom: var(--cpd-space-2x);
 }
diff --git a/apps/web/res/css/views/settings/_UserProfileSettings.pcss b/apps/web/res/css/views/settings/_UserProfileSettings.pcss
index 845aa52c1c..67750b943f 100644
--- a/apps/web/res/css/views/settings/_UserProfileSettings.pcss
+++ b/apps/web/res/css/views/settings/_UserProfileSettings.pcss
@@ -19,10 +19,14 @@ Please see LICENSE files in the repository root for full details.
         gap: 16px;
 
         .mx_UserProfileSettings_profile_displayName {
-            flex-grow: 1;
+            flex-grow: 0;
             width: 100%;
             gap: 0;
         }
+        .mx_UserProfileSettings_profile_nameAndStatus {
+            width: 100%;
+            gap: 16px;
+        }
     }
 
     .mx_UserProfileSettings_profile_controls {
diff --git a/apps/web/res/css/views/settings/encryption/_ResetIdentityPanel.pcss b/apps/web/res/css/views/settings/encryption/_ResetIdentityPanel.pcss
index 8318d6d91c..40b75b1350 100644
--- a/apps/web/res/css/views/settings/encryption/_ResetIdentityPanel.pcss
+++ b/apps/web/res/css/views/settings/encryption/_ResetIdentityPanel.pcss
@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-// Red text for the "Do not close this window" warning
+/* Red text for the "Do not close this window" warning */
 .mx_ResetIdentityPanel_warning {
     color: var(--cpd-color-text-critical-primary);
 }
diff --git a/apps/web/res/css/views/settings/tabs/_SettingsSection.pcss b/apps/web/res/css/views/settings/tabs/_SettingsSection.pcss
index 0a70169248..4c8009a144 100644
--- a/apps/web/res/css/views/settings/tabs/_SettingsSection.pcss
+++ b/apps/web/res/css/views/settings/tabs/_SettingsSection.pcss
@@ -35,7 +35,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_SettingsSection_subSections {
     display: grid;
     grid-template-columns: minmax(0, 1fr);
-    gap: $spacing-32;
+    gap: var(--cpd-space-8x);
 
-    margin: $spacing-16 0;
+    margin: var(--cpd-space-4x) 0;
 }
diff --git a/apps/web/res/css/views/settings/tabs/_SettingsTab.pcss b/apps/web/res/css/views/settings/tabs/_SettingsTab.pcss
index 9e43079364..526217f4e9 100644
--- a/apps/web/res/css/views/settings/tabs/_SettingsTab.pcss
+++ b/apps/web/res/css/views/settings/tabs/_SettingsTab.pcss
@@ -22,8 +22,8 @@ Please see LICENSE files in the repository root for full details.
         flex-grow: 1;
     }
 
-    // never want full width buttons
-    // event when other content is 100% width
+    /* never want full width buttons
+    event when other content is 100% width */
     .mx_AccessibleButton {
         align-self: flex-start;
         justify-self: flex-start;
@@ -52,7 +52,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_SettingsTab_section {
     $end-gutter: 80px;
 
-    margin-bottom: $spacing-24;
+    margin-bottom: var(--cpd-space-6x);
 
     .mx_SettingsFlag {
         margin-inline-end: $end-gutter;
@@ -82,7 +82,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_SettingsTab_sections {
     display: grid;
     grid-template-columns: 1fr;
-    gap: $spacing-32;
+    gap: var(--cpd-space-8x);
 
-    padding-bottom: $spacing-16;
+    padding-bottom: var(--cpd-space-4x);
 }
diff --git a/apps/web/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss b/apps/web/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss
index f21b83b0fe..1168b81105 100644
--- a/apps/web/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss
+++ b/apps/web/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss
@@ -6,13 +6,13 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_SecurityRoomSettingsTab_advancedSection {
-    margin-top: $spacing-16;
+    margin-top: var(--cpd-space-4x);
 }
 
 .mx_SecurityRoomSettingsTab_warning {
     display: flex;
     align-items: center;
-    column-gap: $spacing-4;
+    column-gap: var(--cpd-space-1x);
 
     svg {
         color: #ff0064; /* Match legacy icon colour until redesign */
diff --git a/apps/web/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss b/apps/web/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss
index 44452be744..1459f71fe7 100644
--- a/apps/web/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss
+++ b/apps/web/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss
@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
     padding: 0;
     width: 100%;
     display: grid;
-    gap: $spacing-4;
+    gap: var(--cpd-space-1x);
 }
 
 .mx_KeyboardShortcut_shortcutRow,
@@ -23,10 +23,10 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_KeyboardShortcut_shortcutRow {
-    column-gap: $spacing-8;
+    column-gap: var(--cpd-space-2x);
 }
 
 .mx_KeyboardShortcut {
     flex-wrap: nowrap;
-    column-gap: $spacing-4;
+    column-gap: var(--cpd-space-1x);
 }
diff --git a/apps/web/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss b/apps/web/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss
index 90a4fdd5b1..00a19d1606 100644
--- a/apps/web/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss
+++ b/apps/web/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_SecurityUserSettingsTab_bulkOptions {
     display: flex;
     flex-direction: row;
-    column-gap: $spacing-8;
+    column-gap: var(--cpd-space-2x);
 }
 
 .mx_SecurityUserSettingsTab_ignoredUsers {
@@ -18,11 +18,11 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_SecurityUserSettingsTab_ignoredUser {
-    margin-bottom: $spacing-4;
+    margin-bottom: var(--cpd-space-1x);
 }
 
 .mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton {
-    margin-right: $spacing-8;
+    margin-right: var(--cpd-space-2x);
 }
 
 .mx_SecurityUserSettingsTab_warning {
diff --git a/apps/web/res/decoder-ring/datatypes.js b/apps/web/res/decoder-ring/datatypes.js
index 35d251a8de..1913d0d8e2 100644
--- a/apps/web/res/decoder-ring/datatypes.js
+++ b/apps/web/res/decoder-ring/datatypes.js
@@ -1,3 +1,10 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
 /*
  * Quick-n-dirty algebraic datatypes.
  *
@@ -51,56 +58,3 @@ class Some extends Optional {
     }
 }
 const None = new Optional();
-
-class FetchStatus {
-    constructor(opt = {}) {
-        this.opt = { at: Date.now(), ...opt };
-    }
-    map(f) {
-        return this;
-    }
-    flatMap(f) {
-        return this;
-    }
-}
-class Success extends FetchStatus {
-    static of(value) {
-        return new Success(value);
-    }
-    constructor(value, opt) {
-        super(opt);
-        this.value = value;
-    }
-    map(f) {
-        return new Success(f(this.value), this.opt);
-    }
-    flatMap(f) {
-        return f(this.value, this.opt);
-    }
-    fold({ success }) {
-        return success instanceof Function ? success(this.value, this.opt) : undefined;
-    }
-}
-class Pending extends FetchStatus {
-    static of(opt) {
-        return new Pending(opt);
-    }
-    constructor(opt) {
-        super(opt);
-    }
-    fold({ pending }) {
-        return pending instanceof Function ? pending(this.opt) : undefined;
-    }
-}
-class FetchError extends FetchStatus {
-    static of(reason, opt) {
-        return new FetchError(reason, opt);
-    }
-    constructor(reason, opt) {
-        super(opt);
-        this.reason = reason;
-    }
-    fold({ error }) {
-        return error instanceof Function ? error(this.reason, this.opt) : undefined;
-    }
-}
diff --git a/apps/web/res/decoder-ring/decoder.js b/apps/web/res/decoder-ring/decoder.js
index 8a62ed2c8b..866ff8be85 100644
--- a/apps/web/res/decoder-ring/decoder.js
+++ b/apps/web/res/decoder-ring/decoder.js
@@ -1,3 +1,10 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
 class StartupError extends Error {}
 
 /*
@@ -165,7 +172,7 @@ function BundlePicker() {
                 setBundle(name);
             }
         }, console.log.bind(console));
-    }, [baseUrl]);
+    }, [baseUrl, bundle]);
 
     /* ------------------------- */
     /* Follow user state changes */
diff --git a/apps/web/res/themes/dark-custom/css/dark-custom.pcss b/apps/web/res/themes/dark-custom/css/dark-custom.pcss
index 1b1b30f33d..69f02779bb 100644
--- a/apps/web/res/themes/dark-custom/css/dark-custom.pcss
+++ b/apps/web/res/themes/dark-custom/css/dark-custom.pcss
@@ -6,6 +6,5 @@
 @import "../../legacy-dark/css/_legacy-dark.pcss" layer(app-web);
 @import "../../light-custom/css/_custom.pcss" layer(app-web);
 @import "../../../../res/css/_components.pcss" layer(app-web);
-@import "../../../../res/css/_compound.pcss";
-@import url("highlight.js/styles/atom-one-light.min.css") layer(app-web);
+@import url("highlight.js/styles/atom-one-dark.min.css") layer(app-web);
 @import url("github-markdown-css/github-markdown-dark.css") layer(app-web);
diff --git a/apps/web/res/themes/dark/css/_dark.pcss b/apps/web/res/themes/dark/css/_dark.pcss
index 99fd31f371..62772896fb 100644
--- a/apps/web/res/themes/dark/css/_dark.pcss
+++ b/apps/web/res/themes/dark/css/_dark.pcss
@@ -15,16 +15,10 @@ $panels: var(--cpd-color-bg-subtle-secondary);
 $panel-actions: var(--cpd-color-alpha-gray-300);
 
 $separator: var(--cpd-color-gray-400);
+$system: var(--cpd-color-bg-subtle-secondary);
 
 /* ******************** */
 
-/* RoomList */
-/* ******************** */
-$roomlist-bg-color: rgba(38, 40, 45, 0.9);
-$roomsublist-skeleton-ui-bg: linear-gradient(180deg, $background 0%, #ffffff00 100%);
-$roomtile-default-badge-bg-color: var(--cpd-color-icon-secondary);
-/* ******************** */
-
 /**
  * Creating a `semantic` color scale. This will not be needed with the new
  * visual language, but necessary during the transition period
@@ -147,13 +141,6 @@ $dialog-close-fg-color: $icon-button-color;
 $dialog-close-external-color: $primary-content;
 /* ******************** */
 
-/* RoomList */
-/* ******************** */
-$system: var(--cpd-color-bg-subtle-secondary);
-$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
-$roomtile-default-badge-bg-color: var(--cpd-color-icon-secondary);
-/* ******************** */
-
 /* Tabbed views */
 /* ******************** */
 $tab-label-fg-color: $secondary-content;
diff --git a/apps/web/res/themes/dark/css/dark.pcss b/apps/web/res/themes/dark/css/dark.pcss
index abb4fc04ee..5c99972843 100644
--- a/apps/web/res/themes/dark/css/dark.pcss
+++ b/apps/web/res/themes/dark/css/dark.pcss
@@ -6,6 +6,5 @@
 @import "_dark.pcss" layer(app-web);
 @import "../../light/css/_mods.pcss" layer(app-web);
 @import "../../../../res/css/_components.pcss" layer(app-web);
-@import "../../../../res/css/_compound.pcss";
 @import url("highlight.js/styles/atom-one-dark.min.css") layer(app-web);
 @import url("github-markdown-css/github-markdown-dark.css") layer(app-web);
diff --git a/apps/web/res/themes/legacy-dark/css/_legacy-dark.pcss b/apps/web/res/themes/legacy-dark/css/_legacy-dark.pcss
index ea5228b6c7..ec537dc937 100644
--- a/apps/web/res/themes/legacy-dark/css/_legacy-dark.pcss
+++ b/apps/web/res/themes/legacy-dark/css/_legacy-dark.pcss
@@ -103,7 +103,7 @@ $background: $primary-bg-color;
 $overlay-background: rgba($background, 0.85);
 
 $panels: rgba($system, 0.9);
-$panel-actions: $roomtile-selected-bg-color;
+$panel-actions: #1a1d23;
 
 $separator: var(--cpd-color-gray-400);
 
@@ -148,16 +148,10 @@ $call-background: $background;
 $call-primary-content: $primary-content;
 $call-light-quaternary-content: #c1c6cd;
 
-$roomlist-filter-active-bg-color: $panel-actions;
-$roomlist-bg-color: rgba(38, 40, 45, 0.9);
-
 $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
 
 $spacePanel-divider-color: $tertiary-content;
 
-$roomtile-default-badge-bg-color: #61708b;
-$roomtile-selected-bg-color: #1a1d23;
-
 /* ******************** */
 
 $widget-menu-bar-bg-color: $header-panel-bg-color;
diff --git a/apps/web/res/themes/legacy-dark/css/legacy-dark.pcss b/apps/web/res/themes/legacy-dark/css/legacy-dark.pcss
index 99dadd6eab..e9033a8d53 100644
--- a/apps/web/res/themes/legacy-dark/css/legacy-dark.pcss
+++ b/apps/web/res/themes/legacy-dark/css/legacy-dark.pcss
@@ -5,6 +5,5 @@
 @import "../../legacy-light/css/_legacy-light.pcss" layer(app-web);
 @import "_legacy-dark.pcss" layer(app-web);
 @import "../../../../res/css/_components.pcss" layer(app-web);
-@import "../../../../res/css/_compound.pcss";
 @import url("highlight.js/styles/atom-one-dark.min.css") layer(app-web);
 @import url("github-markdown-css/github-markdown-dark.css") layer(app-web);
diff --git a/apps/web/res/themes/legacy-light/css/_legacy-light.pcss b/apps/web/res/themes/legacy-light/css/_legacy-light.pcss
index c2b0bd5995..678b375e84 100644
--- a/apps/web/res/themes/legacy-light/css/_legacy-light.pcss
+++ b/apps/web/res/themes/legacy-light/css/_legacy-light.pcss
@@ -138,9 +138,6 @@ $room-icon-unread-color: var(--cpd-color-icon-tertiary);
 
 /* ******************** */
 
-$roomtile-default-badge-bg-color: #61708b;
-$roomtile-selected-bg-color: #fff;
-
 $presence-away: #d9b072;
 $presence-offline: #e3e8f0;
 $presence-busy: #ff5b55;
@@ -161,19 +158,13 @@ $background: $primary-bg-color;
 $overlay-background: rgba($background, 0.85);
 
 $panels: rgba($system, 0.9);
-$panel-actions: $roomtile-selected-bg-color;
+$panel-actions: #fff;
 
 $separator: var(--cpd-color-gray-400);
 
 /* Legacy theme backports */
 
 /* ******************** */
-
-$roomlist-filter-active-bg-color: $panel-actions;
-$roomlist-bg-color: rgba(245, 245, 245, 0.9);
-$roomlist-header-color: $primary-fg-color;
-$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%);
-
 $voipcall-plinth-color: $system;
 
 $call-view-button-on-foreground: $secondary-content;
diff --git a/apps/web/res/themes/legacy-light/css/legacy-light.pcss b/apps/web/res/themes/legacy-light/css/legacy-light.pcss
index dcc7b1a82a..4ba72f3e93 100644
--- a/apps/web/res/themes/legacy-light/css/legacy-light.pcss
+++ b/apps/web/res/themes/legacy-light/css/legacy-light.pcss
@@ -4,6 +4,5 @@
 @import "_fonts.pcss" layer(app-web);
 @import "_legacy-light.pcss" layer(app-web);
 @import "../../../../res/css/_components.pcss" layer(app-web);
-@import "../../../../res/css/_compound.pcss";
 @import url("highlight.js/styles/atom-one-light.min.css") layer(app-web);
 @import url("github-markdown-css/github-markdown-light.css") layer(app-web);
diff --git a/apps/web/res/themes/light-custom/css/_custom.pcss b/apps/web/res/themes/light-custom/css/_custom.pcss
index 1bf761a7e7..f03bbe8d62 100644
--- a/apps/web/res/themes/light-custom/css/_custom.pcss
+++ b/apps/web/res/themes/light-custom/css/_custom.pcss
@@ -69,8 +69,6 @@ $dialog-title-fg-color: var(--timeline-text-color);
 $authpage-lang-color: var(--timeline-text-color);
 /* was #232f32 */
 $authpage-primary-color: var(--timeline-text-color);
-/* --roomlist-text-secondary-color */
-$roomtile-default-badge-bg-color: var(--roomlist-text-secondary-color);
 
 /* --roomlist-separator-color */
 $input-darker-bg-color: var(--roomlist-separator-color);
diff --git a/apps/web/res/themes/light-custom/css/light-custom.pcss b/apps/web/res/themes/light-custom/css/light-custom.pcss
index ce575e0518..28386e3609 100644
--- a/apps/web/res/themes/light-custom/css/light-custom.pcss
+++ b/apps/web/res/themes/light-custom/css/light-custom.pcss
@@ -5,6 +5,5 @@
 @import "../../legacy-light/css/_legacy-light.pcss" layer(app-web);
 @import "_custom.pcss" layer(app-web);
 @import "../../../../res/css/_components.pcss" layer(app-web);
-@import "../../../../res/css/_compound.pcss";
 @import url("highlight.js/styles/atom-one-light.min.css") layer(app-web);
 @import url("github-markdown-css/github-markdown-light.css") layer(app-web);
diff --git a/apps/web/res/themes/light-high-contrast/css/_light-high-contrast.pcss b/apps/web/res/themes/light-high-contrast/css/_light-high-contrast.pcss
index ce760ddcf0..df91482923 100644
--- a/apps/web/res/themes/light-high-contrast/css/_light-high-contrast.pcss
+++ b/apps/web/res/themes/light-high-contrast/css/_light-high-contrast.pcss
@@ -177,7 +177,7 @@ $accent-1400: var(--cpd-color-green-1400);
                         }
                     }
 
-                    .mx_NotificationBadge {
+                    .mx_SpotlightDialog_notificationBadge {
                         background-color: $background !important;
                     }
 
diff --git a/apps/web/res/themes/light-high-contrast/css/light-high-contrast.pcss b/apps/web/res/themes/light-high-contrast/css/light-high-contrast.pcss
index b1c35e414e..c71b1c4324 100644
--- a/apps/web/res/themes/light-high-contrast/css/light-high-contrast.pcss
+++ b/apps/web/res/themes/light-high-contrast/css/light-high-contrast.pcss
@@ -6,6 +6,5 @@
 @import "_light-high-contrast.pcss" layer(app-web);
 @import "../../light/css/_mods.pcss" layer(app-web);
 @import "../../../../res/css/_components.pcss" layer(app-web);
-@import "../../../../res/css/_compound.pcss";
 @import url("highlight.js/styles/atom-one-light.min.css") layer(app-web);
 @import url("github-markdown-css/github-markdown-light.css") layer(app-web);
diff --git a/apps/web/res/themes/light/css/_light.pcss b/apps/web/res/themes/light/css/_light.pcss
index 3bd803c53e..08b24f69b7 100644
--- a/apps/web/res/themes/light/css/_light.pcss
+++ b/apps/web/res/themes/light/css/_light.pcss
@@ -204,13 +204,6 @@ $imagebody-giflabel-border: rgba(0, 0, 0, 0.2);
 $imagebody-giflabel-color: $accent-fg-color;
 /* ******************** */
 
-/* RoomList */
-/* ******************** */
-$roomlist-bg-color: rgba(245, 245, 245, 0.9);
-$roomsublist-skeleton-ui-bg: linear-gradient(180deg, $background 0%, #ffffff00 100%);
-$roomtile-default-badge-bg-color: var(--cpd-color-icon-secondary);
-/* ******************** */
-
 /* e2e */
 /* ******************** */
 $e2e-verified-color: var(--cpd-color-icon-success-primary);
@@ -244,7 +237,7 @@ $togglesw-ball-color: var(--cpd-color-bg-action-primary-rest);
 /* ******************** */
 $authpage-primary-color: #232f32;
 $authpage-bg-color: #2e3649;
-$authpage-modal-bg-color: $roomlist-bg-color;
+$authpage-modal-bg-color: rgb(245, 245, 245, 0.9);
 /* background colour of the modal, when the background is blurred */
 $authpage-modal-content-with-blur-bg-color: rgb(255, 255, 255, 0.59);
 $authpage-focus-bg-color: $focus-bg-color;
diff --git a/apps/web/res/themes/light/css/light.pcss b/apps/web/res/themes/light/css/light.pcss
index 10e5e05d78..7151f71539 100644
--- a/apps/web/res/themes/light/css/light.pcss
+++ b/apps/web/res/themes/light/css/light.pcss
@@ -5,6 +5,5 @@
 @import "_light.pcss" layer(app-web);
 @import "_mods.pcss" layer(app-web);
 @import "../../../../res/css/_components.pcss" layer(app-web);
-@import "../../../../res/css/_compound.pcss";
 @import url("highlight.js/styles/atom-one-light.min.css") layer(app-web);
 @import url("github-markdown-css/github-markdown-light.css") layer(app-web);
diff --git a/apps/web/src/@types/common.ts b/apps/web/src/@types/common.ts
index bfb4f64c16..024e9cef86 100644
--- a/apps/web/src/@types/common.ts
+++ b/apps/web/src/@types/common.ts
@@ -10,55 +10,8 @@ import { type JSX, type JSXElementConstructor } from "react";
 
 export type { NonEmptyArray, XOR, Writeable } from "matrix-js-sdk/src/matrix";
 
+export type * from "shared-types/lib/utils";
+
 export type ComponentClass = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
 
 export type { Leaves } from "matrix-web-i18n";
-
-export type KeysStartingWith<Input extends object, Str extends string> = {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    [P in keyof Input]: P extends `${Str}${infer _X}` ? P : never; // we don't use _X
-}[keyof Input];
-
-export type Defaultize<P, D> = P extends any
-    ? string extends keyof P
-        ? P
-        : Pick<P, Exclude<keyof P, keyof D>> &
-              Partial<Pick<P, Extract<keyof P, keyof D>>> &
-              Partial<Pick<D, Exclude<keyof D, keyof P>>>
-    : never;
-
-/* eslint-disable @typescript-eslint/no-unsafe-function-type */
-export type DeepReadonly<T> = T extends (infer R)[]
-    ? DeepReadonlyArray<R>
-    : T extends Function
-      ? T
-      : T extends object
-        ? DeepReadonlyObject<T>
-        : T;
-/* eslint-enable @typescript-eslint/no-unsafe-function-type */
-
-interface DeepReadonlyArray<T> extends ReadonlyArray<DeepReadonly<T>> {}
-
-type DeepReadonlyObject<T> = {
-    readonly [P in keyof T]: DeepReadonly<T[P]>;
-};
-
-export type AtLeastOne<T, U = { [K in keyof T]: Pick<T, K> }> = Partial<T> & U[keyof U];
-
-/**
- * Returns a union type of the keys of the input Object type whose values are assignable to the given Item type.
- * Based on https://stackoverflow.com/a/57862073
- */
-export type Assignable<Object, Item> = {
-    [Key in keyof Object]: Object[Key] extends Item ? Key : never;
-}[keyof Object];
-
-/**
- * Like `Partial` but for applied to all nested objects.
- * Based on https://dev.to/perennialautodidact/adventures-in-typescript-deeppartial-2f2a
- */
-export type DeepPartial<T> = T extends object
-    ? {
-          [P in keyof T]?: DeepPartial<T[P]>;
-      }
-    : T;
diff --git a/apps/web/src/@types/commonmark.ts b/apps/web/src/@types/commonmark.ts
index 110e85f187..296f952392 100644
--- a/apps/web/src/@types/commonmark.ts
+++ b/apps/web/src/@types/commonmark.ts
@@ -11,8 +11,7 @@ import type * as commonmark from "commonmark";
 declare module "commonmark" {
     export type Attr = [key: string, value: string];
 
-    /* eslint-disable @typescript-eslint/naming-convention */
-    interface HtmlRenderer {
+    export interface HtmlRenderer {
         // As far as @types/commonmark is concerned, these are not public, so add them
         // https://github.com/commonmark/commonmark.js/blob/master/lib/render/html.js#L272-L296
         text: (this: commonmark.HtmlRenderer, node: commonmark.Node) => void;
@@ -42,5 +41,4 @@ declare module "commonmark" {
         lit: (this: commonmark.HtmlRenderer, text: string) => void;
         cr: (this: commonmark.HtmlRenderer) => void;
     }
-    /* eslint-enable @typescript-eslint/naming-convention */
 }
diff --git a/apps/web/src/@types/global.d.ts b/apps/web/src/@types/global.d.ts
index 99cd6d4ba4..2fe47901df 100644
--- a/apps/web/src/@types/global.d.ts
+++ b/apps/web/src/@types/global.d.ts
@@ -15,21 +15,12 @@ import type ContentMessages from "../ContentMessages";
 import { type IMatrixClientPeg } from "../MatrixClientPeg";
 import type ToastStore from "../stores/ToastStore";
 import { type DeviceListener } from "../device-listener";
-import { type RoomListStore } from "../stores/room-list/Interface";
 import { type PlatformPeg } from "../PlatformPeg";
-import type RoomListLayoutStore from "../stores/room-list/RoomListLayoutStore";
 import { type IntegrationManagers } from "../integrations/IntegrationManagers";
 import { type ModalManager } from "../Modal";
 import type SettingsStore from "../settings/SettingsStore";
-import { type Notifier } from "../Notifier";
-import type RightPanelStore from "../stores/right-panel/RightPanelStore";
-import type WidgetStore from "../stores/WidgetStore";
-import type LegacyCallHandler from "../LegacyCallHandler";
 import type UserActivity from "../UserActivity";
 import { type ModalWidgetStore } from "../stores/ModalWidgetStore";
-import { type WidgetLayoutStore } from "../stores/widgets/WidgetLayoutStore";
-import { type SpaceStoreClass } from "../stores/spaces/SpaceStore";
-import type TypingStore from "../stores/TypingStore";
 import { type EventIndexPeg } from "../indexing/EventIndexPeg";
 import { type VoiceRecordingStore } from "../stores/VoiceRecordingStore";
 import type PerformanceMonitor from "../performance";
@@ -38,6 +29,7 @@ import { type SetupEncryptionStore } from "../stores/SetupEncryptionStore";
 import { type RoomScrollStateStore } from "../stores/RoomScrollStateStore";
 import { type ConsoleLogger, type IndexedDBLogStore } from "../rageshake/rageshake";
 import type ActiveWidgetStore from "../stores/ActiveWidgetStore";
+import type { CallStatusListener } from "../CallStatusListener";
 import { type IConfigOptions } from "../IConfigOptions";
 import { type MatrixDispatcher } from "../dispatcher/dispatcher";
 import { type DeepReadonly } from "./common";
@@ -45,8 +37,7 @@ import type MatrixChat from "../components/structures/MatrixChat";
 import { type InitialCryptoSetupStore } from "../stores/InitialCryptoSetupStore";
 import { type ModuleApiType } from "../modules/Api.ts";
 import type { RoomListStoreV3Class } from "../stores/room-list-v3/RoomListStoreV3.ts";
-
-/* eslint-disable @typescript-eslint/naming-convention */
+import { type SDKContextClass } from "../contexts/SDKContextClass.ts";
 
 type ElectronChannel =
     | "app_onAction"
@@ -74,8 +65,8 @@ declare global {
     // so we don't accidentally use the methods on NodeJS.Timeout - they only exist in a subset of environments.
     // The overload for clear{Interval,Timeout} is resolved as expected.
     // We use `ReturnType<typeof setTimeout>` in the code to be agnostic of if this definition gets loaded.
-    function setInterval(handler: TimerHandler, timeout: number, ...arguments: any[]): number;
-    function setTimeout(handler: TimerHandler, timeout: number, ...arguments: any[]): number;
+    function setInterval(handler: TimerHandler, timeout: number, ...args: any[]): number;
+    function setTimeout(handler: TimerHandler, timeout: number, ...args: any[]): number;
 
     interface Window {
         mxSendRageshake: (text: string, withLogs?: boolean) => Promise<void>;
@@ -94,23 +85,15 @@ declare global {
         mxContentMessages: ContentMessages;
         mxToastStore: ToastStore;
         mxDeviceListener: DeviceListener;
-        mxRoomListStore: RoomListStore;
+        mxCallStatusListener: CallStatusListener;
         getRoomListStoreV3: () => RoomListStoreV3Class;
-        mxRoomListLayoutStore: RoomListLayoutStore;
         mxPlatformPeg: PlatformPeg;
         mxIntegrationManagers: typeof IntegrationManagers;
         singletonModalManager: ModalManager;
         mxSettingsStore: SettingsStore;
-        mxNotifier: typeof Notifier;
-        mxRightPanelStore: RightPanelStore;
-        mxWidgetStore: WidgetStore;
-        mxWidgetLayoutStore: WidgetLayoutStore;
-        mxLegacyCallHandler: LegacyCallHandler;
         mxUserActivity: UserActivity;
         mxModalWidgetStore: ModalWidgetStore;
-        mxSpaceStore: SpaceStoreClass;
         mxVoiceRecordingStore: VoiceRecordingStore;
-        mxTypingStore: TypingStore;
         mxEventIndexPeg: EventIndexPeg;
         mxPerformanceMonitor: PerformanceMonitor;
         mxPerformanceEntryNames: any;
@@ -122,6 +105,7 @@ declare global {
         mxOnRecaptchaLoaded?: () => void;
         mxModuleLoader: ModuleLoader;
         mxModuleApi: ModuleApiType;
+        mxSdkContext: SDKContextClass;
 
         // electron-only
         electron?: Electron;
@@ -193,7 +177,6 @@ declare global {
         },
     ): void;
 
-    // eslint-disable-next-line no-var
     var grecaptcha:
         | undefined
         | {
@@ -208,14 +191,8 @@ declare global {
               isReady: () => boolean;
           };
 
-    // eslint-disable-next-line no-var, camelcase
     var mx_rage_logger: ConsoleLogger;
-    // eslint-disable-next-line no-var, camelcase
     var mx_rage_initPromise: Promise<void>;
-    // eslint-disable-next-line no-var, camelcase
     var mx_rage_initStoragePromise: Promise<void>;
-    // eslint-disable-next-line no-var, camelcase
     var mx_rage_store: IndexedDBLogStore;
 }
-
-/* eslint-enable @typescript-eslint/naming-convention */
diff --git a/apps/web/src/@types/matrix-js-sdk.d.ts b/apps/web/src/@types/matrix-js-sdk.d.ts
index 3f36190e4e..09be4eb31e 100644
--- a/apps/web/src/@types/matrix-js-sdk.d.ts
+++ b/apps/web/src/@types/matrix-js-sdk.d.ts
@@ -11,7 +11,7 @@ import type { BLURHASH_FIELD } from "../utils/image-media";
 import type { JitsiCallMemberEventType, JitsiCallMemberContent } from "../call-types";
 import type { ILayoutStateEvent, WIDGET_LAYOUT_EVENT_TYPE } from "../stores/widgets/types";
 import type { EncryptedFile } from "matrix-js-sdk/src/types";
-import type { EmptyObject } from "matrix-js-sdk/src/matrix";
+import type { EmptyObject, IContent } from "matrix-js-sdk/src/matrix";
 import type { DeviceClientInformation } from "../utils/device/types.ts";
 import type { UserWidget } from "../utils/WidgetUtils-types.ts";
 import { type MediaPreviewConfig } from "./media_preview.ts";
@@ -49,7 +49,7 @@ declare module "matrix-js-sdk/src/types" {
         "m.room.plumbing": {
             status: string;
         };
-        "m.room.bot.options": unknown;
+        "m.room.bot.options": IContent;
     }
 
     export interface TimelineEvents {
@@ -71,9 +71,8 @@ declare module "matrix-js-sdk/src/types" {
         [key: `io.element.matrix_client_information.${string}`]: DeviceClientInformation;
         // Element settings account data events
         "im.vector.setting.breadcrumbs": { recent_rooms: string[] };
-        "io.element.recent_emoji": { recent_emoji: string[] };
         "im.vector.setting.integration_provisioning": { enabled: boolean };
-        "im.vector.riot.breadcrumb_rooms": { recent_rooms: string[] };
+        "im.vector.riot.breadcrumb_rooms": { rooms: string[] };
         "im.vector.web.settings": Record<string, any>;
 
         // URL preview account data event
diff --git a/apps/web/src/@types/png.d.ts b/apps/web/src/@types/png.d.ts
new file mode 100644
index 0000000000..97218abe19
--- /dev/null
+++ b/apps/web/src/@types/png.d.ts
@@ -0,0 +1,11 @@
+/*
+Copyright 2026 Element Creations 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 "*.png" {
+    const path: string;
+    export default path;
+}
diff --git a/apps/web/src/@types/raw-loader.d.ts b/apps/web/src/@types/raw.d.ts
similarity index 89%
rename from apps/web/src/@types/raw-loader.d.ts
rename to apps/web/src/@types/raw.d.ts
index b9ab4445a4..526b34e639 100644
--- a/apps/web/src/@types/raw-loader.d.ts
+++ b/apps/web/src/@types/raw.d.ts
@@ -6,7 +6,7 @@ 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.
 */
 
-declare module "!!raw-loader!*" {
+declare module "*?raw" {
     const contents: string;
     export default contents;
 }
diff --git a/apps/web/src/@types/svg.d.ts b/apps/web/src/@types/svg.d.ts
index 8a8990645b..9cc4de6c19 100644
--- a/apps/web/src/@types/svg.d.ts
+++ b/apps/web/src/@types/svg.d.ts
@@ -9,6 +9,10 @@ Please see LICENSE files in the repository root for full details.
 
 declare module "*.svg" {
     const path: string;
-    export const Icon: React.FC<React.SVGProps<SVGSVGElement>>;
     export default path;
 }
+
+declare module "*.svg?react" {
+    const Icon: React.FC<React.SVGProps<SVGSVGElement>>;
+    export default Icon;
+}
diff --git a/apps/web/src/AddThreepid.ts b/apps/web/src/AddThreepid.ts
index 877a0c5c4a..c2bf87a6c8 100644
--- a/apps/web/src/AddThreepid.ts
+++ b/apps/web/src/AddThreepid.ts
@@ -69,7 +69,7 @@ export default class AddThreepid {
      * Attempt to add an email threepid to the homeserver.
      * This will trigger a side-effect of sending an email to the provided email address.
      * @param {string} emailAddress The email address to add
-     * @return {Promise} Resolves when the email has been sent. Then call checkEmailLinkClicked().
+     * @returns {Promise} Resolves when the email has been sent. Then call checkEmailLinkClicked().
      */
     public async addEmailAddress(emailAddress: string): Promise<IRequestTokenResponse> {
         try {
@@ -91,7 +91,7 @@ export default class AddThreepid {
      * Attempt to bind an email threepid on the identity server via the homeserver.
      * This will trigger a side-effect of sending an email to the provided email address.
      * @param {string} emailAddress The email address to add
-     * @return {Promise} Resolves when the email has been sent. Then call checkEmailLinkClicked().
+     * @returns {Promise} Resolves when the email has been sent. Then call checkEmailLinkClicked().
      */
     public async bindEmailAddress(emailAddress: string): Promise<IRequestTokenResponse> {
         this.bind = true;
@@ -122,7 +122,7 @@ export default class AddThreepid {
      * This will trigger a side-effect of sending an SMS to the provided phone number.
      * @param {string} phoneCountry The ISO 2 letter code of the country to resolve phoneNumber in
      * @param {string} phoneNumber The national or international formatted phone number to add
-     * @return {Promise} Resolves when the text message has been sent. Then call haveMsisdnToken().
+     * @returns {Promise} Resolves when the text message has been sent. Then call haveMsisdnToken().
      *
      * @throws {UserFriendlyError} An appropriate user-friendly error if the verification code could not be sent.
      */
@@ -155,7 +155,7 @@ export default class AddThreepid {
      * This will trigger a side-effect of sending an SMS to the provided phone number.
      * @param {string} phoneCountry The ISO 2 letter code of the country to resolve phoneNumber in
      * @param {string} phoneNumber The national or international formatted phone number to add
-     * @return {Promise} Resolves when the text message has been sent. Then call haveMsisdnToken().
+     * @returns {Promise} Resolves when the text message has been sent. Then call haveMsisdnToken().
      */
     public async bindMsisdn(phoneCountry: string, phoneNumber: string): Promise<IRequestMsisdnTokenResponse> {
         this.bind = true;
@@ -184,7 +184,7 @@ export default class AddThreepid {
 
     /**
      * Checks if the email link has been clicked by attempting to add the threepid
-     * @return {Promise} Resolves if the email address was added. Rejects with an object
+     * @returns {Promise} Resolves if the email address was added. Rejects with an object
      * with a "message" property which contains a human-readable message detailing why
      * the request failed.
      */
@@ -254,7 +254,7 @@ export default class AddThreepid {
 
     /**
      * @param {{type: string, session?: string}} auth UI auth object
-     * @return {Promise<Object>} Response from /3pid/add call (in current spec, an empty object)
+     * @returns {Promise<Object>} Response from /3pid/add call (in current spec, an empty object)
      */
     // eslint-disable-next-line @typescript-eslint/no-empty-object-type
     private makeAddThreepidOnlyRequest = (auth?: IAddThreePidOnlyBody["auth"] | null): Promise<{}> => {
@@ -269,7 +269,7 @@ export default class AddThreepid {
      * Takes a phone number verification code as entered by the user and validates
      * it with the identity server, then if successful, adds the phone number.
      * @param {string} msisdnToken phone number verification code as entered by the user
-     * @return {Promise} Resolves if the phone number was added. Rejects with an object
+     * @returns {Promise} Resolves if the phone number was added. Rejects with an object
      * with a "message" property which contains a human-readable message detailing why
      * the request failed.
      */
diff --git a/apps/web/test/unit-tests/Avatar-test.ts b/apps/web/src/Avatar.test.ts
similarity index 60%
rename from apps/web/test/unit-tests/Avatar-test.ts
rename to apps/web/src/Avatar.test.ts
index 72e313db28..4ee7d894c8 100644
--- a/apps/web/test/unit-tests/Avatar-test.ts
+++ b/apps/web/src/Avatar.test.ts
@@ -6,15 +6,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { mocked } from "jest-mock";
+import { vi, describe, it, expect, beforeEach, type Mock } from "vitest";
 import { type Room, type RoomMember, RoomType } from "matrix-js-sdk/src/matrix";
 
-import { avatarUrlForRoom } from "../../src/Avatar";
-import { type Media, mediaFromMxc } from "../../src/customisations/Media";
-import DMRoomMap from "../../src/utils/DMRoomMap";
+import { avatarUrlForRoom } from "./Avatar";
+import { type Media, mediaFromMxc } from "./customisations/Media";
+import DMRoomMap from "./utils/DMRoomMap";
 
-jest.mock("../../src/customisations/Media", () => ({
-    mediaFromMxc: jest.fn(),
+vi.mock("./customisations/Media", () => ({
+    mediaFromMxc: vi.fn(),
 }));
 
 const roomId = "!room:example.com";
@@ -22,31 +22,31 @@ const avatarUrl1 = "https://example.com/avatar1";
 const avatarUrl2 = "https://example.com/avatar2";
 
 describe("avatarUrlForRoom", () => {
-    let getThumbnailOfSourceHttp: jest.Mock;
+    let getThumbnailOfSourceHttp: Mock;
     let room: Room;
     let roomMember: RoomMember;
     let dmRoomMap: DMRoomMap;
 
     beforeEach(() => {
-        getThumbnailOfSourceHttp = jest.fn();
-        mocked(mediaFromMxc).mockImplementation((): Media => {
+        getThumbnailOfSourceHttp = vi.fn();
+        vi.mocked(mediaFromMxc).mockImplementation((): Media => {
             return {
                 getThumbnailOfSourceHttp,
             } as unknown as Media;
         });
         room = {
             roomId,
-            getMxcAvatarUrl: jest.fn(),
-            isSpaceRoom: jest.fn(),
-            getType: jest.fn(),
-            getAvatarFallbackMember: jest.fn(),
+            getMxcAvatarUrl: vi.fn(),
+            isSpaceRoom: vi.fn(),
+            getType: vi.fn(),
+            getAvatarFallbackMember: vi.fn(),
         } as unknown as Room;
         dmRoomMap = {
-            getUserIdForRoomId: jest.fn(),
+            getUserIdForRoomId: vi.fn(),
         } as unknown as DMRoomMap;
         DMRoomMap.setShared(dmRoomMap);
         roomMember = {
-            getMxcAvatarUrl: jest.fn(),
+            getMxcAvatarUrl: vi.fn(),
         } as unknown as RoomMember;
     });
 
@@ -55,40 +55,40 @@ describe("avatarUrlForRoom", () => {
     });
 
     it("should return the HTTP source if the room provides a MXC url", () => {
-        mocked(room.getMxcAvatarUrl).mockReturnValue(avatarUrl1);
+        vi.mocked(room.getMxcAvatarUrl).mockReturnValue(avatarUrl1);
         getThumbnailOfSourceHttp.mockReturnValue(avatarUrl2);
         expect(avatarUrlForRoom(room, 128, 256, "crop")).toEqual(avatarUrl2);
         expect(getThumbnailOfSourceHttp).toHaveBeenCalledWith(128, 256, "crop");
     });
 
     it("should return null for a space room", () => {
-        mocked(room.isSpaceRoom).mockReturnValue(true);
-        mocked(room.getType).mockReturnValue(RoomType.Space);
+        vi.mocked(room.isSpaceRoom).mockReturnValue(true);
+        vi.mocked(room.getType).mockReturnValue(RoomType.Space);
         expect(avatarUrlForRoom(room, 128, 128)).toBeNull();
     });
 
     it("should return null if the room is not a DM", () => {
-        mocked(dmRoomMap).getUserIdForRoomId.mockReturnValue(undefined);
+        vi.mocked(dmRoomMap).getUserIdForRoomId.mockReturnValue(undefined);
         expect(avatarUrlForRoom(room, 128, 128)).toBeNull();
         expect(dmRoomMap.getUserIdForRoomId).toHaveBeenCalledWith(roomId);
     });
 
     it("should return null if there is no other member in the room", () => {
-        mocked(dmRoomMap).getUserIdForRoomId.mockReturnValue("@user:example.com");
-        mocked(room.getAvatarFallbackMember).mockReturnValue(undefined);
+        vi.mocked(dmRoomMap).getUserIdForRoomId.mockReturnValue("@user:example.com");
+        vi.mocked(room.getAvatarFallbackMember).mockReturnValue(undefined);
         expect(avatarUrlForRoom(room, 128, 128)).toBeNull();
     });
 
     it("should return null if the other member has no avatar URL", () => {
-        mocked(dmRoomMap).getUserIdForRoomId.mockReturnValue("@user:example.com");
-        mocked(room.getAvatarFallbackMember).mockReturnValue(roomMember);
+        vi.mocked(dmRoomMap).getUserIdForRoomId.mockReturnValue("@user:example.com");
+        vi.mocked(room.getAvatarFallbackMember).mockReturnValue(roomMember);
         expect(avatarUrlForRoom(room, 128, 128)).toBeNull();
     });
 
     it("should return the other member's avatar URL", () => {
-        mocked(dmRoomMap).getUserIdForRoomId.mockReturnValue("@user:example.com");
-        mocked(room.getAvatarFallbackMember).mockReturnValue(roomMember);
-        mocked(roomMember.getMxcAvatarUrl).mockReturnValue(avatarUrl2);
+        vi.mocked(dmRoomMap).getUserIdForRoomId.mockReturnValue("@user:example.com");
+        vi.mocked(room.getAvatarFallbackMember).mockReturnValue(roomMember);
+        vi.mocked(roomMember.getMxcAvatarUrl).mockReturnValue(avatarUrl2);
         getThumbnailOfSourceHttp.mockReturnValue(avatarUrl2);
         expect(avatarUrlForRoom(room, 128, 256, "crop")).toEqual(avatarUrl2);
         expect(getThumbnailOfSourceHttp).toHaveBeenCalledWith(128, 256, "crop");
diff --git a/apps/web/src/Avatar.ts b/apps/web/src/Avatar.ts
index 8852578f28..f2995b3325 100644
--- a/apps/web/src/Avatar.ts
+++ b/apps/web/src/Avatar.ts
@@ -137,7 +137,7 @@ export function defaultAvatarUrlForString(s: string): string {
  * returns the first (non-sigil) character of 'name',
  * converted to uppercase
  * @param {string} name
- * @return {string} the first letter
+ * @returns {string} the first letter
  */
 export function getInitialLetter(name: string): string | undefined {
     if (!name) {
diff --git a/apps/web/src/BasePlatform.ts b/apps/web/src/BasePlatform.ts
index 8f2ee41444..290c4f311d 100644
--- a/apps/web/src/BasePlatform.ts
+++ b/apps/web/src/BasePlatform.ts
@@ -15,7 +15,7 @@ import {
     type Room,
     type SSOAction,
     encodeUnpaddedBase64,
-    type OidcRegistrationClientMetadata,
+    type OAuthRegistrationRequest,
     MatrixEventEvent,
 } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
@@ -279,7 +279,7 @@ export default abstract class BasePlatform {
     /**
      * Get our platform specific EventIndexManager.
      *
-     * @return {BaseEventIndexManager} The EventIndex manager for our platform,
+     * @returns {BaseEventIndexManager} The EventIndex manager for our platform,
      * can be null if the platform doesn't support event indexing.
      */
     public getEventIndexingManager(): BaseEventIndexManager | null {
@@ -431,42 +431,41 @@ export default abstract class BasePlatform {
     }
 
     /**
-     * Fallback Client URI to use for OIDC client registration for if one is not specified in config.json
+     * Fallback Client URI to use for OAuth2 client registration for if one is not specified in config.json
      */
-    public get defaultOidcClientUri(): string {
+    public get defaultOAuthClientUri(): string {
         return window.location.origin;
     }
 
     /**
-     * Metadata to use for dynamic OIDC client registrations
+     * Metadata to use for dynamic OAuth2 client registrations
      */
-    public async getOidcClientMetadata(): Promise<OidcRegistrationClientMetadata> {
+    public async getOAuthClientMetadata(): Promise<OAuthRegistrationRequest> {
         const config = SdkConfig.get();
         return {
-            clientName: config.brand,
-            clientUri: config.oidc_metadata?.client_uri ?? this.defaultOidcClientUri,
-            redirectUris: [this.getOidcCallbackUrl().href],
-            logoUri: config.oidc_metadata?.logo_uri ?? new URL("vector-icons/1024.png", this.baseUrl).href,
-            applicationType: "web",
-            contacts: config.oidc_metadata?.contacts,
-            tosUri: config.oidc_metadata?.tos_uri ?? config.terms_and_conditions_links?.[0]?.url,
-            policyUri: config.oidc_metadata?.policy_uri ?? config.privacy_policy_url,
+            client_name: config.brand,
+            client_uri: config.oidc_metadata?.client_uri ?? this.defaultOAuthClientUri,
+            redirect_uris: [this.getOAuthCallbackUrl().href],
+            logo_uri: config.oidc_metadata?.logo_uri ?? new URL("vector-icons/1024.png", this.baseUrl).href,
+            application_type: "web",
+            tos_uri: config.oidc_metadata?.tos_uri ?? config.terms_and_conditions_links?.[0]?.url,
+            policy_uri: config.oidc_metadata?.policy_uri ?? config.privacy_policy_url,
         };
     }
 
     /**
-     * Suffix to append to the `state` parameter of OIDC /auth calls. Will be round-tripped to the callback URI.
+     * Suffix to append to the `state` parameter of OAuth2 /auth calls. Will be round-tripped to the callback URI.
      * Currently only required for ElectronPlatform for passing element-desktop-ssoid.
      */
-    public getOidcClientState(): string {
+    public getOAuthClientState(): string {
         return "";
     }
 
     /**
-     * The URL to return to after a successful OIDC authentication
+     * The URL to return to after a successful OAuth2 authentication
      */
-    public getOidcCallbackUrl(): URL {
-        // The redirect URL has to exactly match that registered at the OIDC server, so
+    public getOAuthCallbackUrl(): URL {
+        // The redirect URL has to exactly match that registered at the OAuth2 server, so
         // build it from scratch to avoid leaking ephemeral query params (e.g. `updated`).
         const url = new URL(window.location.origin + window.location.pathname);
         // Set no_universal_links=true to prevent the callback being handled by Element X installed on macOS Apple Silicon
diff --git a/apps/web/src/CallStatusListener.test.ts b/apps/web/src/CallStatusListener.test.ts
new file mode 100644
index 0000000000..abe320229f
--- /dev/null
+++ b/apps/web/src/CallStatusListener.test.ts
@@ -0,0 +1,76 @@
+/*
+Copyright 2026 Element Creations 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.
+*/
+
+// @vitest-environment happy-dom
+
+import { EventEmitter } from "node:events";
+import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
+import type { MatrixClient } from "matrix-js-sdk/src/matrix";
+
+import { CallStatusListener } from "./CallStatusListener";
+import { type Call } from "./models/Call";
+import SettingsStore from "./settings/SettingsStore";
+import { CallStoreEvent, type CallStore } from "./stores/CallStore";
+import * as userStatus from "./utils/userStatus";
+
+describe("CallStatusListener", () => {
+    let listener: CallStatusListener;
+    let callStore: CallStore & EventEmitter;
+    let matrixClient: MatrixClient;
+    let setUserOnCallSpy: ReturnType<typeof vi.spyOn>;
+
+    const emitConnectedCalls = (newValue: Set<Call>, oldValue: Set<Call>): void => {
+        callStore.emit(CallStoreEvent.ConnectedCalls, newValue, oldValue);
+    };
+
+    beforeEach(() => {
+        listener = new CallStatusListener();
+        callStore = new EventEmitter() as unknown as CallStore & EventEmitter;
+        matrixClient = {} as MatrixClient;
+
+        setUserOnCallSpy = vi.spyOn(userStatus, "setUserOnCall").mockResolvedValue(undefined);
+        vi.spyOn(SettingsStore, "getValue").mockReturnValue(true);
+    });
+
+    afterEach(() => {
+        listener.stop();
+        vi.restoreAllMocks();
+    });
+
+    it("sets the user on-a-call status when the user joins a call", () => {
+        listener.start(callStore, matrixClient);
+
+        emitConnectedCalls(new Set([{} as Call]), new Set());
+
+        expect(setUserOnCallSpy).toHaveBeenCalledExactlyOnceWith(matrixClient, true);
+    });
+
+    it("clears the user on-a-call status when the user leaves their last call", () => {
+        listener.start(callStore, matrixClient);
+
+        emitConnectedCalls(new Set(), new Set([{} as Call]));
+
+        expect(setUserOnCallSpy).toHaveBeenCalledExactlyOnceWith(matrixClient, false);
+    });
+
+    it("does nothing when the number of connected calls changes but stays non-zero", () => {
+        listener.start(callStore, matrixClient);
+
+        emitConnectedCalls(new Set([{} as Call, {} as Call]), new Set([{} as Call]));
+
+        expect(setUserOnCallSpy).not.toHaveBeenCalled();
+    });
+
+    it("does nothing when the feature flag is disabled", () => {
+        vi.spyOn(SettingsStore, "getValue").mockReturnValue(false);
+        listener.start(callStore, matrixClient);
+
+        emitConnectedCalls(new Set([{} as Call]), new Set());
+
+        expect(setUserOnCallSpy).not.toHaveBeenCalled();
+    });
+});
diff --git a/apps/web/src/CallStatusListener.ts b/apps/web/src/CallStatusListener.ts
new file mode 100644
index 0000000000..ca61093bf8
--- /dev/null
+++ b/apps/web/src/CallStatusListener.ts
@@ -0,0 +1,53 @@
+/*
+Copyright 2026 Element Creations 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 Call } from "./models/Call";
+import SettingsStore from "./settings/SettingsStore";
+import { type CallStore, CallStoreEvent } from "./stores/CallStore";
+import { setUserOnCall } from "./utils/userStatus";
+import { logger } from "matrix-js-sdk/src/logger";
+import type { MatrixClient } from "matrix-js-sdk/src/matrix";
+
+/**
+ * Listener that updates the user's on-a-call (m.call) user profile status according to
+ * whether the user is on a call. Nothing should be calling any methods on it apart
+ * from start / stop.
+ */
+export class CallStatusListener {
+    private callStore: CallStore | undefined;
+    private matrixClient: MatrixClient | undefined;
+
+    public static sharedInstance(): CallStatusListener {
+        if (!window.mxCallStatusListener) window.mxCallStatusListener = new CallStatusListener();
+        return window.mxCallStatusListener;
+    }
+
+    public start(callStore: CallStore, matrixClient: MatrixClient): void {
+        this.callStore = callStore;
+        this.matrixClient = matrixClient;
+
+        this.callStore.on(CallStoreEvent.ConnectedCalls, this.onConnectedCallsChanged);
+    }
+
+    public stop(): void {
+        this.callStore?.off(CallStoreEvent.ConnectedCalls, this.onConnectedCallsChanged);
+
+        this.callStore = undefined;
+        this.matrixClient = undefined;
+    }
+
+    private onConnectedCallsChanged = (newValue: Set<Call>, oldValue: Set<Call>): void => {
+        const wasInCall = oldValue.size > 0;
+        const nowInCall = newValue.size > 0;
+
+        if (wasInCall !== nowInCall && SettingsStore.getValue("feature_user_status") && this.matrixClient) {
+            setUserOnCall(this.matrixClient, nowInCall).catch((err) =>
+                logger.warn("Failed to update m.call profile field", err),
+            );
+        }
+    };
+}
diff --git a/apps/web/src/ContentMessages.ts b/apps/web/src/ContentMessages.ts
index a9f2ba1123..491168329c 100644
--- a/apps/web/src/ContentMessages.ts
+++ b/apps/web/src/ContentMessages.ts
@@ -78,7 +78,7 @@ interface IMediaConfig {
  * Load a file into a newly created image element.
  *
  * @param {File} imageFile The file to load in an image element.
- * @return {Promise} A promise that resolves with the html image element.
+ * @returns {Promise} A promise that resolves with the html image element.
  */
 async function loadImageElement(imageFile: File): Promise<{
     width: number;
@@ -149,7 +149,7 @@ const ALWAYS_INCLUDE_THUMBNAIL = ["image/avif", "image/webp", "image/svg+xml"];
  * @param {MatrixClient} matrixClient A matrixClient to upload the thumbnail with.
  * @param {String} roomId The ID of the room the image will be uploaded in.
  * @param {File} imageFile The image to read and thumbnail.
- * @return {Promise} A promise that resolves with the attachment info.
+ * @returns {Promise} A promise that resolves with the attachment info.
  */
 async function infoForImageFile(matrixClient: MatrixClient, roomId: string, imageFile: File): Promise<ImageInfo> {
     let thumbnailType = "image/png";
@@ -197,7 +197,7 @@ async function infoForImageFile(matrixClient: MatrixClient, roomId: string, imag
  * Load a file into a newly created audio element and load the metadata
  *
  * @param {File} audioFile The file to load in an audio element.
- * @return {Promise} A promise that resolves with the audio element.
+ * @returns {Promise} A promise that resolves with the audio element.
  */
 function loadAudioElement(audioFile: File): Promise<HTMLAudioElement> {
     return new Promise((resolve, reject) => {
@@ -229,7 +229,7 @@ function loadAudioElement(audioFile: File): Promise<HTMLAudioElement> {
  * Read the metadata for an audio file.
  *
  * @param {File} audioFile The audio to read.
- * @return {Promise} A promise that resolves with the attachment info.
+ * @returns {Promise} A promise that resolves with the attachment info.
  */
 async function infoForAudioFile(audioFile: File): Promise<AudioInfo> {
     const audio = await loadAudioElement(audioFile);
@@ -241,7 +241,7 @@ async function infoForAudioFile(audioFile: File): Promise<AudioInfo> {
  * in an attempt to guarantee the first frame will be showing.
  *
  * @param {File} videoFile The file to load in a video element.
- * @return {Promise} A promise that resolves with the video element.
+ * @returns {Promise} A promise that resolves with the video element.
  */
 function loadVideoElement(videoFile: File): Promise<HTMLVideoElement> {
     return new Promise((resolve, reject) => {
@@ -287,7 +287,7 @@ function loadVideoElement(videoFile: File): Promise<HTMLVideoElement> {
  * @param {MatrixClient} matrixClient A matrixClient to upload the thumbnail with.
  * @param {String} roomId The ID of the room the video will be uploaded to.
  * @param {File} videoFile The video to read and thumbnail.
- * @return {Promise} A promise that resolves with the attachment info.
+ * @returns {Promise} A promise that resolves with the attachment info.
  */
 function infoForVideoFile(matrixClient: MatrixClient, roomId: string, videoFile: File): Promise<VideoInfo> {
     const thumbnailType = "image/jpeg";
@@ -312,7 +312,7 @@ function infoForVideoFile(matrixClient: MatrixClient, roomId: string, videoFile:
 /**
  * Read the file as an ArrayBuffer.
  * @param {File} file The file to read
- * @return {Promise} A promise that resolves with an ArrayBuffer when the file
+ * @returns {Promise} A promise that resolves with an ArrayBuffer when the file
  *   is read.
  */
 function readFileAsArrayBuffer(file: File | Blob): Promise<ArrayBuffer> {
@@ -338,7 +338,7 @@ function readFileAsArrayBuffer(file: File | Blob): Promise<ArrayBuffer> {
  * @param {Function?} progressHandler optional callback to be called when a chunk of
  *    data is uploaded.
  * @param {AbortController?} controller optional abortController to use for this upload.
- * @return {Promise} A promise that resolves with an object.
+ * @returns {Promise} A promise that resolves with an object.
  *  If the file is unencrypted then the object will have a "url" key.
  *  If the file is encrypted then the object will have a "file" key.
  */
@@ -622,7 +622,7 @@ export default class ContentMessages {
                         throw e;
                     }
                     // Otherwise we failed to thumbnail, fall back to uploading an m.file
-                    logger.error(e);
+                    logger.error(`Expected file of type "${file.type}" to be an image, but got`, e);
                     content.msgtype = MsgType.File;
                 }
             } else if (file.type.startsWith("audio/")) {
diff --git a/apps/web/test/CreateCrossSigning-test.ts b/apps/web/src/CreateCrossSigning.test.ts
similarity index 69%
rename from apps/web/test/CreateCrossSigning-test.ts
rename to apps/web/src/CreateCrossSigning.test.ts
index 09bb3b5a63..111bad0800 100644
--- a/apps/web/test/CreateCrossSigning-test.ts
+++ b/apps/web/src/CreateCrossSigning.test.ts
@@ -6,12 +6,16 @@ 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 { HTTPError, type MatrixClient, MatrixError } from "matrix-js-sdk/src/matrix";
-import { mocked } from "jest-mock";
+// @vitest-environment happy-dom
 
-import { createCrossSigning } from "../src/CreateCrossSigning";
-import { createTestClient } from "./test-utils";
-import Modal from "../src/Modal";
+import { vi, describe, it, expect, beforeEach } from "vitest";
+import { HTTPError, type MatrixClient, MatrixError } from "matrix-js-sdk/src/matrix";
+import { createTestClient } from "test-utils";
+
+import { createCrossSigning } from "./CreateCrossSigning";
+import Modal from "./Modal";
+
+vi.mock("./Modal");
 
 describe("CreateCrossSigning", () => {
     let client: MatrixClient;
@@ -29,7 +33,7 @@ describe("CreateCrossSigning", () => {
     });
 
     it("should upload", async () => {
-        client.uploadDeviceSigningKeys = jest.fn().mockRejectedValueOnce(
+        client.uploadDeviceSigningKeys = vi.fn().mockRejectedValueOnce(
             new MatrixError({
                 flows: [
                     {
@@ -41,20 +45,20 @@ describe("CreateCrossSigning", () => {
 
         await createCrossSigning(client);
 
-        const { authUploadDeviceSigningKeys } = mocked(client.getCrypto()!).bootstrapCrossSigning.mock.calls[0][0];
+        const { authUploadDeviceSigningKeys } = vi.mocked(client.getCrypto()!).bootstrapCrossSigning.mock.calls[0][0];
 
-        const makeRequest = jest.fn();
+        const makeRequest = vi.fn();
         await authUploadDeviceSigningKeys!(makeRequest);
         expect(makeRequest).toHaveBeenCalledWith(null);
     });
 
     it("should prompt user if upload failed with UIA", async () => {
-        const createDialog = jest.spyOn(Modal, "createDialog").mockReturnValue({
+        const createDialog = vi.spyOn(Modal, "createDialog").mockReturnValue({
             finished: Promise.resolve([true]),
-            close: jest.fn(),
+            close: vi.fn(),
         });
 
-        client.uploadDeviceSigningKeys = jest.fn().mockRejectedValueOnce(
+        client.uploadDeviceSigningKeys = vi.fn().mockRejectedValueOnce(
             new MatrixError({
                 flows: [
                     {
@@ -66,9 +70,9 @@ describe("CreateCrossSigning", () => {
 
         await createCrossSigning(client);
 
-        const { authUploadDeviceSigningKeys } = mocked(client.getCrypto()!).bootstrapCrossSigning.mock.calls[0][0];
+        const { authUploadDeviceSigningKeys } = vi.mocked(client.getCrypto()!).bootstrapCrossSigning.mock.calls[0][0];
 
-        const makeRequest = jest.fn().mockRejectedValue(
+        const makeRequest = vi.fn().mockRejectedValue(
             new MatrixError({
                 flows: [
                     {
@@ -85,10 +89,10 @@ describe("CreateCrossSigning", () => {
     it("should throw error if server fails with something other than UIA", async () => {
         await createCrossSigning(client);
 
-        const { authUploadDeviceSigningKeys } = mocked(client.getCrypto()!).bootstrapCrossSigning.mock.calls[0][0];
+        const { authUploadDeviceSigningKeys } = vi.mocked(client.getCrypto()!).bootstrapCrossSigning.mock.calls[0][0];
 
         const error = new HTTPError("Internal Server Error", 500);
-        const makeRequest = jest.fn().mockRejectedValue(error);
+        const makeRequest = vi.fn().mockRejectedValue(error);
         await expect(authUploadDeviceSigningKeys!(makeRequest)).rejects.toThrow(error);
         expect(makeRequest).not.toHaveBeenCalledWith();
     });
diff --git a/apps/web/test/unit-tests/utils/DateUtils-test.ts b/apps/web/src/DateUtils.test.ts
similarity index 94%
rename from apps/web/test/unit-tests/utils/DateUtils-test.ts
rename to apps/web/src/DateUtils.test.ts
index e61f79fde7..8cdeaf2857 100644
--- a/apps/web/test/unit-tests/utils/DateUtils-test.ts
+++ b/apps/web/src/DateUtils.test.ts
@@ -6,6 +6,10 @@ 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.
 */
 
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeAll, afterAll } from "vitest";
+
 import {
     formatSeconds,
     formatRelativeTime,
@@ -25,9 +29,11 @@ import {
     HOUR_MS,
     MINUTE_MS,
     DAY_MS,
-} from "../../../src/DateUtils";
-import { REPEATABLE_DATE, mockIntlDateTimeFormat, unmockIntlDateTimeFormat } from "../../test-utils";
-import * as languageHandler from "../../../src/languageHandler";
+} from "./DateUtils";
+import { REPEATABLE_DATE, mockIntlDateTimeFormat, unmockIntlDateTimeFormat } from "../test/test-utils";
+import * as languageSettings from "./i18n/settings";
+
+vi.mock("./TimezoneHandler", () => ({ getUserTimezone: () => "UTC" }));
 
 describe("getDaysArray", () => {
     it("should return Sunday-Saturday in long mode", () => {
@@ -166,13 +172,13 @@ describe("getMonthsArray", () => {
 
 describe("formatDate", () => {
     beforeAll(() => {
-        jest.useFakeTimers();
-        jest.setSystemTime(REPEATABLE_DATE);
+        vi.useFakeTimers();
+        vi.setSystemTime(REPEATABLE_DATE);
     });
 
     afterAll(() => {
-        jest.setSystemTime(jest.getRealSystemTime());
-        jest.useRealTimers();
+        vi.setSystemTime(vi.getRealSystemTime());
+        vi.useRealTimers();
     });
 
     it("should return time string if date is within same day", () => {
@@ -255,14 +261,14 @@ describe("formatSeconds", () => {
 
 describe("formatRelativeTime", () => {
     beforeAll(() => {
-        jest.useFakeTimers();
+        vi.useFakeTimers();
         // Tuesday, 2 November 2021 11:18:03 UTC
-        jest.setSystemTime(1635851883000);
+        vi.setSystemTime(1635851883000);
     });
 
     afterAll(() => {
-        jest.setSystemTime(jest.getRealSystemTime());
-        jest.useRealTimers();
+        vi.setSystemTime(vi.getRealSystemTime());
+        vi.useRealTimers();
     });
 
     it("returns hour format for events created in the same day", () => {
@@ -369,7 +375,7 @@ describe("formatLocalDateShort()", () => {
     });
     const timestamp = new Date("Fri Dec 17 2021 09:09:00 GMT+0100 (Central European Standard Time)").getTime();
     it("formats date correctly by locale", () => {
-        const locale = jest.spyOn(languageHandler, "getUserLanguage");
+        const locale = vi.spyOn(languageSettings, "getUserLanguage");
         mockIntlDateTimeFormat();
 
         // format is DD/MM/YY
diff --git a/apps/web/src/DateUtils.ts b/apps/web/src/DateUtils.ts
index e975fe834f..b9788ef1f1 100644
--- a/apps/web/src/DateUtils.ts
+++ b/apps/web/src/DateUtils.ts
@@ -8,7 +8,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { _t, getUserLanguage } from "./languageHandler";
+import { _t } from "./languageHandler";
+import { getUserLanguage } from "./i18n/settings";
 import { getUserTimezone } from "./TimezoneHandler";
 
 export { formatSeconds } from "@element-hq/web-shared-components";
diff --git a/apps/web/test/unit-tests/DecryptionFailureTracker-test.ts b/apps/web/src/DecryptionFailureTracker.test.ts
similarity index 97%
rename from apps/web/test/unit-tests/DecryptionFailureTracker-test.ts
rename to apps/web/src/DecryptionFailureTracker.test.ts
index bad06a59c0..c38fd8e614 100644
--- a/apps/web/test/unit-tests/DecryptionFailureTracker-test.ts
+++ b/apps/web/src/DecryptionFailureTracker.test.ts
@@ -5,7 +5,9 @@ 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 { mocked, type Mocked, type MockedObject } from "jest-mock";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, afterEach, type Mocked, type MockedObject } from "vitest";
 import { HttpApiEvent, type MatrixClient, type MatrixEvent, MatrixEventEvent } from "matrix-js-sdk/src/matrix";
 import { decryptExistingEvent, mkDecryptionFailureMatrixEvent } from "matrix-js-sdk/src/testing";
 import {
@@ -15,10 +17,10 @@ import {
     CryptoEvent,
 } from "matrix-js-sdk/src/crypto-api";
 import { sleep } from "matrix-js-sdk/src/utils";
+import { stubClient } from "test-utils";
 
-import { DecryptionFailureTracker, type ErrorProperties } from "../../src/DecryptionFailureTracker";
-import { stubClient } from "../test-utils";
-import * as Lifecycle from "../../src/Lifecycle";
+import { DecryptionFailureTracker, type ErrorProperties } from "./DecryptionFailureTracker";
+import * as Lifecycle from "./Lifecycle";
 
 async function createFailedDecryptionEvent(opts: { sender?: string; code?: DecryptionFailureCode } = {}) {
     return await mkDecryptionFailureMatrixEvent({
@@ -592,7 +594,7 @@ describe("DecryptionFailureTracker", function () {
         // Calling .start will start some intervals.  This test shouldn't run
         // long enough for the timers to fire, but we'll use fake timers just
         // to be safe.
-        jest.useFakeTimers();
+        vi.useFakeTimers();
         await tracker.start(client);
 
         // If the client fails to decrypt, it should get tracked
@@ -616,7 +618,7 @@ describe("DecryptionFailureTracker", function () {
 
         expect(errorCount).toEqual(1);
 
-        jest.useRealTimers();
+        vi.useRealTimers();
     });
 
     it("tracks client information", async () => {
@@ -657,7 +659,7 @@ describe("DecryptionFailureTracker", function () {
         const now = Date.now();
         eventDecrypted(tracker, federatedDecryption, now);
 
-        mocked(client.getCrypto()!.getUserVerificationStatus).mockResolvedValue(
+        vi.mocked(client.getCrypto()!.getUserVerificationStatus).mockResolvedValue(
             new UserVerificationStatus(true, true, false),
         );
         client.emit(CryptoEvent.KeysChanged, {});
@@ -677,7 +679,7 @@ describe("DecryptionFailureTracker", function () {
 
         // change client params, and make sure the reports the right values
         client.getDomain.mockReturnValue("example.com");
-        mocked(client.getCrypto()!.getVersion).mockReturnValue("Olm 0.0.0");
+        vi.mocked(client.getCrypto()!.getVersion).mockReturnValue("Olm 0.0.0");
         // @ts-ignore access to private method
         await tracker.calculateClientProperties(client);
 
@@ -725,19 +727,19 @@ describe("DecryptionFailureTracker", function () {
 });
 
 function mockClient(): MockedObject<MatrixClient> {
-    const client = mocked(stubClient());
+    const client = vi.mocked(stubClient());
     const mockCrypto = {
-        getVersion: jest.fn().mockReturnValue("Rust SDK 0.7.0 (61b175b), Vodozemac 0.5.1"),
-        getUserVerificationStatus: jest.fn().mockResolvedValue(new UserVerificationStatus(false, false, false)),
+        getVersion: vi.fn().mockReturnValue("Rust SDK 0.7.0 (61b175b), Vodozemac 0.5.1"),
+        getUserVerificationStatus: vi.fn().mockResolvedValue(new UserVerificationStatus(false, false, false)),
     } as unknown as Mocked<CryptoApi>;
     client.getCrypto.mockReturnValue(mockCrypto);
 
     // @ts-ignore
-    client.stopClient = jest.fn(() => {});
+    client.stopClient = vi.fn(() => {});
     // @ts-ignore
-    client.removeAllListeners = jest.fn(() => {});
+    client.removeAllListeners = vi.fn(() => {});
 
-    client.store = { destroy: jest.fn(() => {}) } as any;
+    client.store = { destroy: vi.fn(() => {}) } as any;
 
     return client;
 }
diff --git a/apps/web/src/DecryptionFailureTracker.ts b/apps/web/src/DecryptionFailureTracker.ts
index 8725a0db0d..279622fe86 100644
--- a/apps/web/src/DecryptionFailureTracker.ts
+++ b/apps/web/src/DecryptionFailureTracker.ts
@@ -365,7 +365,7 @@ export class DecryptionFailureTracker {
     /**
      * Clear state and stop checking for and tracking failures.
      */
-    private stop(): void {
+    public stop(): void {
         if (this.checkInterval) clearInterval(this.checkInterval);
         if (this.trackInterval) clearInterval(this.trackInterval);
 
diff --git a/apps/web/test/unit-tests/DeviceListener-test.ts b/apps/web/src/DeviceListener.test.ts
similarity index 79%
rename from apps/web/test/unit-tests/DeviceListener-test.ts
rename to apps/web/src/DeviceListener.test.ts
index f8777182cf..325d3cd8d6 100644
--- a/apps/web/test/unit-tests/DeviceListener-test.ts
+++ b/apps/web/src/DeviceListener.test.ts
@@ -6,7 +6,9 @@ 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 Mocked, mocked } from "jest-mock";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach, type Mocked } from "vitest";
 import {
     MatrixEvent,
     type Room,
@@ -24,33 +26,40 @@ import {
     type SecretStorageStatus,
 } from "matrix-js-sdk/src/crypto-api";
 import { type CryptoSessionStateChange } from "@matrix-org/analytics-events/types/typescript/CryptoSessionStateChange";
+import { getMockClientWithEventEmitter, mockPlatformPeg } from "test-utils";
 
-import { DeviceListener, BACKUP_DISABLED_ACCOUNT_DATA_KEY } from "../../src/device-listener";
-import { MatrixClientPeg } from "../../src/MatrixClientPeg";
-import * as SetupEncryptionToast from "../../src/toasts/SetupEncryptionToast";
-import * as UnverifiedSessionToast from "../../src/toasts/UnverifiedSessionToast";
-import * as BulkUnverifiedSessionsToast from "../../src/toasts/BulkUnverifiedSessionsToast";
-import { isSecretStorageBeingAccessed } from "../../src/SecurityManager";
-import { Action } from "../../src/dispatcher/actions";
-import SettingsStore from "../../src/settings/SettingsStore";
-import { SettingLevel } from "../../src/settings/SettingLevel";
-import { getMockClientWithEventEmitter, mockPlatformPeg } from "../test-utils";
-import { isBulkUnverifiedDeviceReminderSnoozed } from "../../src/utils/device/snoozeBulkUnverifiedDeviceReminder";
-import { PosthogAnalytics } from "../../src/PosthogAnalytics";
+import {
+    DeviceListener,
+    ACCOUNT_DATA_KEY_M_KEY_BACKUP,
+    ACCOUNT_DATA_KEY_M_KEY_BACKUP_DISABLED_UNSTABLE,
+    RECOVERY_ACCOUNT_DATA_KEY,
+} from "./device-listener";
+import { MatrixClientPeg } from "./MatrixClientPeg";
+import * as SetupEncryptionToast from "./toasts/SetupEncryptionToast";
+import * as UnverifiedSessionToast from "./toasts/UnverifiedSessionToast";
+import * as BulkUnverifiedSessionsToast from "./toasts/BulkUnverifiedSessionsToast";
+import { isSecretStorageBeingAccessed } from "./SecurityManager";
+import { Action } from "./dispatcher/actions";
+import SettingsStore from "./settings/SettingsStore";
+import { SettingLevel } from "./settings/SettingLevel";
+import { isBulkUnverifiedDeviceReminderSnoozed } from "./utils/device/snoozeBulkUnverifiedDeviceReminder";
+import { PosthogAnalytics } from "./PosthogAnalytics";
 
-jest.mock("../../src/dispatcher/dispatcher", () => ({
-    dispatch: jest.fn(),
-    register: jest.fn(),
-    unregister: jest.fn(),
+vi.mock("./dispatcher/dispatcher", () => ({
+    default: {
+        dispatch: vi.fn(),
+        register: vi.fn(),
+        unregister: vi.fn(),
+    },
 }));
 
-jest.mock("../../src/SecurityManager", () => ({
-    isSecretStorageBeingAccessed: jest.fn(),
-    accessSecretStorage: jest.fn(),
+vi.mock("./SecurityManager", () => ({
+    isSecretStorageBeingAccessed: vi.fn(),
+    accessSecretStorage: vi.fn(),
 }));
 
-jest.mock("../../src/utils/device/snoozeBulkUnverifiedDeviceReminder", () => ({
-    isBulkUnverifiedDeviceReminderSnoozed: jest.fn(),
+vi.mock("./utils/device/snoozeBulkUnverifiedDeviceReminder", () => ({
+    isBulkUnverifiedDeviceReminderSnoozed: vi.fn(),
 }));
 
 const userId = "@user:server";
@@ -74,36 +83,36 @@ describe("DeviceListener", () => {
     let mockCrypto: Mocked<CryptoApi>;
 
     beforeEach(() => {
-        jest.resetAllMocks();
+        vi.resetAllMocks();
 
         // don't litter the console with logs
-        jest.spyOn(console, "debug").mockImplementation(() => {});
-        jest.spyOn(console, "info").mockImplementation(() => {});
-        jest.spyOn(console, "warn").mockImplementation(() => {});
-        jest.spyOn(console, "error").mockImplementation(() => {});
+        vi.spyOn(console, "debug").mockImplementation(() => {});
+        vi.spyOn(console, "info").mockImplementation(() => {});
+        vi.spyOn(console, "warn").mockImplementation(() => {});
+        vi.spyOn(console, "error").mockImplementation(() => {});
 
         // spy on various toasts' hide and show functions
         // easier than mocking
-        jest.spyOn(SetupEncryptionToast, "showToast").mockReturnValue(undefined);
-        jest.spyOn(SetupEncryptionToast, "hideToast").mockReturnValue(undefined);
-        jest.spyOn(BulkUnverifiedSessionsToast, "showToast").mockReturnValue(undefined);
-        jest.spyOn(BulkUnverifiedSessionsToast, "hideToast").mockReturnValue(undefined);
-        jest.spyOn(UnverifiedSessionToast, "showToast").mockResolvedValue(undefined);
-        jest.spyOn(UnverifiedSessionToast, "hideToast").mockReturnValue(undefined);
+        vi.spyOn(SetupEncryptionToast, "showToast").mockReturnValue(undefined);
+        vi.spyOn(SetupEncryptionToast, "hideToast").mockReturnValue(undefined);
+        vi.spyOn(BulkUnverifiedSessionsToast, "showToast").mockReturnValue(undefined);
+        vi.spyOn(BulkUnverifiedSessionsToast, "hideToast").mockReturnValue(undefined);
+        vi.spyOn(UnverifiedSessionToast, "showToast").mockResolvedValue(undefined);
+        vi.spyOn(UnverifiedSessionToast, "hideToast").mockReturnValue(undefined);
 
         mockPlatformPeg({
-            getAppVersion: jest.fn().mockResolvedValue("1.2.3"),
+            getAppVersion: vi.fn().mockResolvedValue("1.2.3"),
         });
         mockCrypto = {
-            getDeviceVerificationStatus: jest.fn().mockResolvedValue({
+            getDeviceVerificationStatus: vi.fn().mockResolvedValue({
                 crossSigningVerified: false,
             }),
-            getUserDeviceInfo: jest.fn().mockResolvedValue(new Map()),
-            isCrossSigningReady: jest.fn().mockResolvedValue(true),
-            getSecretStorageStatus: jest.fn().mockResolvedValue(readySecretStorageStatus),
-            userHasCrossSigningKeys: jest.fn(),
-            getActiveSessionBackupVersion: jest.fn(),
-            getCrossSigningStatus: jest.fn().mockReturnValue({
+            getUserDeviceInfo: vi.fn().mockResolvedValue(new Map()),
+            isCrossSigningReady: vi.fn().mockResolvedValue(true),
+            getSecretStorageStatus: vi.fn().mockResolvedValue(readySecretStorageStatus),
+            userHasCrossSigningKeys: vi.fn(),
+            getActiveSessionBackupVersion: vi.fn(),
+            getCrossSigningStatus: vi.fn().mockReturnValue({
                 publicKeysOnDevice: true,
                 privateKeysInSecretStorage: true,
                 privateKeysCachedLocally: {
@@ -112,33 +121,33 @@ describe("DeviceListener", () => {
                     userSigningKey: true,
                 },
             }),
-            getSessionBackupPrivateKey: jest.fn(),
-            isEncryptionEnabledInRoom: jest.fn(),
-            getKeyBackupInfo: jest.fn().mockResolvedValue(null),
+            getSessionBackupPrivateKey: vi.fn(),
+            isEncryptionEnabledInRoom: vi.fn(),
+            getKeyBackupInfo: vi.fn().mockResolvedValue(null),
         } as unknown as Mocked<CryptoApi>;
         mockClient = getMockClientWithEventEmitter({
-            isGuest: jest.fn(),
-            getUserId: jest.fn().mockReturnValue(userId),
-            getSafeUserId: jest.fn().mockReturnValue(userId),
-            getRooms: jest.fn().mockReturnValue([]),
-            isVersionSupported: jest.fn().mockResolvedValue(true),
-            isInitialSyncComplete: jest.fn().mockReturnValue(true),
-            isKeyBackupKeyStored: jest.fn(),
-            waitForClientWellKnown: jest.fn(),
-            getClientWellKnown: jest.fn(),
-            getDeviceId: jest.fn().mockReturnValue(deviceId),
-            setAccountData: jest.fn(),
-            getAccountData: jest.fn(),
-            getAccountDataFromServer: jest.fn(),
-            deleteAccountData: jest.fn(),
-            getCrypto: jest.fn().mockReturnValue(mockCrypto),
+            isGuest: vi.fn(),
+            getUserId: vi.fn().mockReturnValue(userId),
+            getSafeUserId: vi.fn().mockReturnValue(userId),
+            getRooms: vi.fn().mockReturnValue([]),
+            isVersionSupported: vi.fn().mockResolvedValue(true),
+            isInitialSyncComplete: vi.fn().mockReturnValue(true),
+            isKeyBackupKeyStored: vi.fn(),
+            waitForClientWellKnown: vi.fn(),
+            getClientWellKnown: vi.fn(),
+            getDeviceId: vi.fn().mockReturnValue(deviceId),
+            setAccountData: vi.fn(),
+            getAccountData: vi.fn(),
+            getAccountDataFromServer: vi.fn(),
+            deleteAccountData: vi.fn(),
+            getCrypto: vi.fn().mockReturnValue(mockCrypto),
             secretStorage: {
-                isStored: jest.fn().mockReturnValue(null),
+                isStored: vi.fn().mockReturnValue(null),
             },
         });
-        jest.spyOn(MatrixClientPeg, "get").mockReturnValue(mockClient);
-        jest.spyOn(SettingsStore, "getValue").mockReturnValue(false);
-        mocked(isBulkUnverifiedDeviceReminderSnoozed).mockClear().mockReturnValue(false);
+        vi.spyOn(MatrixClientPeg, "get").mockReturnValue(mockClient);
+        vi.spyOn(SettingsStore, "getValue").mockReturnValue(false);
+        vi.mocked(isBulkUnverifiedDeviceReminderSnoozed).mockClear().mockReturnValue(false);
     });
 
     const createAndStart = async (): Promise<DeviceListener> => {
@@ -150,8 +159,8 @@ describe("DeviceListener", () => {
 
     describe("client information", () => {
         it("watches device client information setting", async () => {
-            const watchSettingSpy = jest.spyOn(SettingsStore, "watchSetting");
-            const unwatchSettingSpy = jest.spyOn(SettingsStore, "unwatchSetting");
+            const watchSettingSpy = vi.spyOn(SettingsStore, "watchSetting");
+            const unwatchSettingSpy = vi.spyOn(SettingsStore, "unwatchSetting");
             const deviceListener = await createAndStart();
 
             expect(watchSettingSpy).toHaveBeenCalledWith("deviceClientInformationOptIn", null, expect.any(Function));
@@ -163,7 +172,7 @@ describe("DeviceListener", () => {
 
         it("responds to KeyBackupDecryptionKeyCached events", async () => {
             // Given a Device Listener
-            const recheck = jest.fn();
+            const recheck = vi.fn();
             const deviceListener = await createAndStart();
             deviceListener.recheck = recheck;
 
@@ -174,7 +183,7 @@ describe("DeviceListener", () => {
             expect(recheck).toHaveBeenCalled();
 
             // And when we stop our device listener
-            const removeListener = jest.fn(() => {});
+            const removeListener = vi.fn(() => {});
             // @ts-ignore overwriting with a mock
             mockClient.removeListener = removeListener;
             deviceListener.stop();
@@ -185,7 +194,7 @@ describe("DeviceListener", () => {
 
         describe("when device client information feature is enabled", () => {
             beforeEach(() => {
-                jest.spyOn(SettingsStore, "getValue").mockImplementation(
+                vi.spyOn(SettingsStore, "getValue").mockImplementation(
                     (settingName) => settingName === "deviceClientInformationOptIn",
                 );
             });
@@ -236,7 +245,7 @@ describe("DeviceListener", () => {
             });
             const emptyClientInfoEvent = new MatrixEvent({ type: `io.element.matrix_client_information.${deviceId}` });
             beforeEach(() => {
-                jest.spyOn(SettingsStore, "getValue").mockReturnValue(false);
+                vi.spyOn(SettingsStore, "getValue").mockReturnValue(false);
 
                 mockClient!.getAccountData.mockReturnValue(undefined);
             });
@@ -275,7 +284,7 @@ describe("DeviceListener", () => {
             });
 
             it("saves client information after setting is enabled", async () => {
-                const watchSettingSpy = jest.spyOn(SettingsStore, "watchSetting");
+                const watchSettingSpy = vi.spyOn(SettingsStore, "watchSetting");
                 await createAndStart();
 
                 const [settingName, roomId, callback] = watchSettingSpy.mock.calls[0];
@@ -301,12 +310,14 @@ describe("DeviceListener", () => {
 
             expect(mockCrypto!.isCrossSigningReady).not.toHaveBeenCalled();
         });
+
         it("does nothing when initial sync is not complete", async () => {
             mockClient!.isInitialSyncComplete.mockReturnValue(false);
             await createAndStart();
 
             expect(mockCrypto!.isCrossSigningReady).not.toHaveBeenCalled();
         });
+
         it("correctly handles the client being stopped", async () => {
             mockCrypto!.isCrossSigningReady.mockImplementation(() => {
                 throw new ClientStoppedError();
@@ -314,6 +325,46 @@ describe("DeviceListener", () => {
             await createAndStart();
             expect(console.error).not.toHaveBeenCalled();
         });
+
+        it("shows no error if key backup is disabled", async () => {
+            // Given backup is disabled but recovery is not disabled
+
+            // @ts-ignore implementing a function with complex return type
+            mockClient!.getAccountDataFromServer.mockImplementation(async (key) => {
+                if (key === ACCOUNT_DATA_KEY_M_KEY_BACKUP_DISABLED_UNSTABLE) {
+                    return { disabled: true };
+                } else if (key == ACCOUNT_DATA_KEY_M_KEY_BACKUP) {
+                    return { enabled: false };
+                } else if (key === RECOVERY_ACCOUNT_DATA_KEY) {
+                    return null;
+                } else {
+                    throw new Error(`Unexpected account data query: ${key}`);
+                }
+            });
+
+            // And backup uploads are not active
+            mockCrypto!.getActiveSessionBackupVersion.mockResolvedValue(null);
+
+            // And the current device is trusted
+            mockCrypto!.getDeviceVerificationStatus.mockResolvedValue(
+                new DeviceVerificationStatus({
+                    trustCrossSignedDevices: true,
+                    crossSigningVerified: true,
+                }),
+            );
+
+            // And recovery is not OK (i.e. it is enabled but not ready)
+            mockCrypto!.getSecretStorageStatus.mockResolvedValue(unreadySecretStorageStatus);
+
+            // When we check whether we are in a good state
+            await createAndStart();
+
+            // Then we are fine: no toasts displayed, because recovery being in
+            // a bad state is not important if backups are disabled.
+            expect(SetupEncryptionToast.showToast).not.toHaveBeenCalled();
+            expect(SetupEncryptionToast.hideToast).toHaveBeenCalled();
+        });
+
         it("correctly handles other errors", async () => {
             mockCrypto!.isCrossSigningReady.mockImplementation(() => {
                 throw new Error("blah");
@@ -329,7 +380,7 @@ describe("DeviceListener", () => {
                 mockCrypto!.isCrossSigningReady.mockResolvedValue(false);
                 mockCrypto!.getSecretStorageStatus.mockResolvedValue(unreadySecretStorageStatus);
                 mockClient!.getRooms.mockReturnValue(rooms);
-                jest.spyOn(mockClient.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true);
+                vi.spyOn(mockClient.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true);
             });
 
             it("hides setup encryption toast when it is dismissed", async () => {
@@ -341,15 +392,59 @@ describe("DeviceListener", () => {
                 expect(SetupEncryptionToast.hideToast).toHaveBeenCalled();
             });
 
+            it("re-shows toast after two days", async () => {
+                const instance = await createAndStart();
+                expect(SetupEncryptionToast.showToast).toHaveBeenCalledTimes(1);
+
+                vi.useFakeTimers();
+                instance.dismissEncryptionSetup();
+                await flushPromises();
+                expect(SetupEncryptionToast.hideToast).toHaveBeenCalled();
+
+                // 1.5 days after the toast was dismissed, we don't re-show the
+                // toast yet.
+                vi.advanceTimersByTime(1.5 * 24 * 60 * 60 * 1000);
+                expect(SetupEncryptionToast.showToast).toHaveBeenCalledTimes(1);
+
+                // 2 days after the toast was dismissed, we re-show the toast.
+                vi.advanceTimersByTime(0.5 * 24 * 60 * 60 * 1000);
+                expect(SetupEncryptionToast.showToast).toHaveBeenCalledTimes(2);
+                vi.useRealTimers();
+            });
+
+            it("doesn't re-show toast if the device is now verified", async () => {
+                const instance = await createAndStart();
+                expect(SetupEncryptionToast.showToast).toHaveBeenCalledTimes(1);
+
+                vi.useFakeTimers();
+                instance.dismissEncryptionSetup();
+                await flushPromises();
+                expect(SetupEncryptionToast.hideToast).toHaveBeenCalled();
+
+                // If the device becomes verified before the end of two days, we
+                // don't re-show the toast.
+                mockCrypto!.getDeviceVerificationStatus.mockResolvedValue(
+                    new DeviceVerificationStatus({
+                        trustCrossSignedDevices: true,
+                        crossSigningVerified: true,
+                    }),
+                );
+                instance.recheck();
+                await flushPromises();
+                vi.advanceTimersByTime(2 * 24 * 60 * 60 * 1000);
+                expect(SetupEncryptionToast.showToast).toHaveBeenCalledTimes(1);
+                vi.useRealTimers();
+            });
+
             it("does not show any toasts when secret storage is being accessed", async () => {
-                mocked(isSecretStorageBeingAccessed).mockReturnValue(true);
+                vi.mocked(isSecretStorageBeingAccessed).mockReturnValue(true);
                 await createAndStart();
 
                 expect(SetupEncryptionToast.showToast).not.toHaveBeenCalled();
             });
 
             it("shows toasts even when no rooms are encrypted", async () => {
-                jest.spyOn(mockClient.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(false);
+                vi.spyOn(mockClient.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(false);
                 await createAndStart();
 
                 expect(SetupEncryptionToast.showToast).toHaveBeenCalled();
@@ -429,9 +524,7 @@ describe("DeviceListener", () => {
                 it("does not show an out-of-sync toast when the backup key is missing locally but backup is purposely disabled", async () => {
                     mockCrypto!.getSecretStorageStatus.mockResolvedValue(readySecretStorageStatus);
                     mockCrypto!.getSessionBackupPrivateKey.mockResolvedValue(null);
-                    mockClient.getAccountDataFromServer.mockImplementation((eventType) =>
-                        eventType === BACKUP_DISABLED_ACCOUNT_DATA_KEY ? ({ disabled: true } as any) : null,
-                    );
+                    mockKeyBackupFromServer(mockClient, false);
 
                     await createAndStart();
 
@@ -502,31 +595,58 @@ describe("DeviceListener", () => {
 
         describe("key backup status", () => {
             it("checks keybackup status when cross signing and secret storage are ready", async () => {
-                // default mocks set cross signing and secret storage to ready
+                // Given our device is verified
+                mockCrypto.getDeviceVerificationStatus.mockResolvedValue({
+                    crossSigningVerified: true,
+                } as any as DeviceVerificationStatus);
+
+                // When we check the current device
                 await createAndStart();
+
+                // Then we get to the code that checks the active session backup
                 expect(mockCrypto.getActiveSessionBackupVersion).toHaveBeenCalled();
             });
 
-            it("checks keybackup status when setup encryption toast has been dismissed", async () => {
-                mockCrypto!.isCrossSigningReady.mockResolvedValue(false);
-                const instance = await createAndStart();
+            it("does not check keybackup status when setup encryption toast has been dismissed", async () => {
+                // Given our device is not verified (this is the default in the mock)
 
+                // And we have run the checks once (and we were told to verify)
+                const instance = await createAndStart();
+                expect(SetupEncryptionToast.showToast).toHaveBeenCalledWith("verify_this_session");
+                vi.mocked(SetupEncryptionToast.showToast).mockClear();
+                mockCrypto.getDeviceVerificationStatus.mockClear();
+
+                // When we dismiss the dialog telling us to set up encryption
                 instance.dismissEncryptionSetup();
                 await flushPromises();
 
-                expect(mockCrypto.getActiveSessionBackupVersion).toHaveBeenCalled();
+                // Then we have rechecked, but stopped when we found the device was not verified
+                expect(mockCrypto.getDeviceVerificationStatus).toHaveBeenCalled();
+                expect(SetupEncryptionToast.showToast).not.toHaveBeenCalled();
             });
 
             it("does not check key backup status again after check is complete", async () => {
-                mockCrypto.getActiveSessionBackupVersion.mockResolvedValue("1");
-                const instance = await createAndStart();
-                expect(mockCrypto.getActiveSessionBackupVersion).toHaveBeenCalled();
+                // Given our device is verified
+                mockCrypto.getDeviceVerificationStatus.mockResolvedValue({
+                    crossSigningVerified: true,
+                } as any as DeviceVerificationStatus);
 
-                // trigger a recheck
-                instance.dismissEncryptionSetup();
+                // And our active backup version is 1
+                mockCrypto.getActiveSessionBackupVersion.mockResolvedValue("1");
+
+                // And we have run the checks once: no toast was shown and we
+                // checked the backup version
+                const instance = await createAndStart();
+                expect(SetupEncryptionToast.showToast).not.toHaveBeenCalled();
+                expect(mockCrypto.getActiveSessionBackupVersion).toHaveBeenCalled();
+                mockCrypto.getActiveSessionBackupVersion.mockClear();
+
+                // When we check again
+                instance.recheck();
                 await flushPromises();
-                // not called again, check was complete last time
-                expect(mockCrypto.getActiveSessionBackupVersion).toHaveBeenCalledTimes(1);
+
+                // Then we didn't re-call getActiveSessionBackupVersion
+                expect(mockCrypto.getActiveSessionBackupVersion).not.toHaveBeenCalled();
             });
         });
 
@@ -537,6 +657,10 @@ describe("DeviceListener", () => {
             expect(mockClient.setAccountData).toHaveBeenCalledWith("m.org.matrix.custom.backup_disabled", {
                 disabled: true,
             });
+
+            expect(mockClient.setAccountData).toHaveBeenCalledWith("m.key_backup", {
+                enabled: false,
+            });
         });
 
         it("sets the recovery account data when we call recordRecoveryDisabled", async () => {
@@ -552,7 +676,7 @@ describe("DeviceListener", () => {
             beforeEach(() => {
                 // Encryption is in use
                 mockClient.getRooms.mockReturnValue([{ roomId: "!room1" }, { roomId: "!room2" }] as unknown as Room[]);
-                jest.spyOn(mockClient.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true);
+                vi.spyOn(mockClient.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true);
 
                 // The device is verified
                 mockCrypto.getDeviceVerificationStatus.mockResolvedValue(
@@ -568,7 +692,7 @@ describe("DeviceListener", () => {
 
                 it("shows the 'Turn on key storage' toast if we never explicitly turned off key storage", async () => {
                     // Given key backup is off but the account data saying we turned it off is not set
-                    // (m.org.matrix.custom.backup_disabled)
+                    // (m.key_backup or m.org.matrix.custom.backup_disabled)
                     mockClient.getAccountData.mockReturnValue(undefined);
 
                     // When we launch the DeviceListener
@@ -581,11 +705,16 @@ describe("DeviceListener", () => {
                 it("shows the 'Turn on key storage' toast if we turned on key storage", async () => {
                     // Given key backup is off but the account data says we turned it on (this should not happen - the
                     // account data should only be updated if we turn on key storage)
-                    mockClient.getAccountData.mockImplementation((eventType) =>
-                        eventType === BACKUP_DISABLED_ACCOUNT_DATA_KEY
-                            ? new MatrixEvent({ content: { disabled: false } })
-                            : undefined,
-                    );
+                    mockClient.getAccountData.mockImplementation((eventType) => {
+                        switch (eventType) {
+                            case ACCOUNT_DATA_KEY_M_KEY_BACKUP:
+                                return new MatrixEvent({ content: { enabled: true } });
+                            case ACCOUNT_DATA_KEY_M_KEY_BACKUP_DISABLED_UNSTABLE:
+                                return new MatrixEvent({ content: { disabled: false } });
+                            default:
+                                return undefined;
+                        }
+                    });
 
                     // When we launch the DeviceListener
                     await createAndStart();
@@ -596,9 +725,7 @@ describe("DeviceListener", () => {
 
                 it("does not show the 'Turn on key storage' toast if we turned off key storage", async () => {
                     // Given key backup is off but the account data saying we turned it off is set
-                    mockClient.getAccountDataFromServer.mockImplementation((eventType) =>
-                        eventType === BACKUP_DISABLED_ACCOUNT_DATA_KEY ? ({ disabled: true } as any) : null,
-                    );
+                    mockKeyBackupFromServer(mockClient, false);
 
                     // When we launch the DeviceListener
                     await createAndStart();
@@ -627,11 +754,16 @@ describe("DeviceListener", () => {
 
                 it("does not show the 'Turn on key storage' toast if we turned on key storage", async () => {
                     // Given key backup is on and the account data says we turned it on
-                    mockClient.getAccountData.mockImplementation((eventType) =>
-                        eventType === BACKUP_DISABLED_ACCOUNT_DATA_KEY
-                            ? new MatrixEvent({ content: { disabled: false } })
-                            : undefined,
-                    );
+                    mockClient.getAccountData.mockImplementation((eventType) => {
+                        switch (eventType) {
+                            case ACCOUNT_DATA_KEY_M_KEY_BACKUP:
+                                return new MatrixEvent({ content: { enabled: true } });
+                            case ACCOUNT_DATA_KEY_M_KEY_BACKUP_DISABLED_UNSTABLE:
+                                return new MatrixEvent({ content: { disabled: false } });
+                            default:
+                                return undefined;
+                        }
+                    });
 
                     // When we launch the DeviceListener
                     await createAndStart();
@@ -643,11 +775,16 @@ describe("DeviceListener", () => {
                 it("does not show the 'Turn on key storage' toast if we turned off key storage", async () => {
                     // Given key backup is on but the account data saying we turned it off is set (this should never
                     // happen - it should only be set when we turn off key storage or dismiss the toast)
-                    mockClient.getAccountData.mockImplementation((eventType) =>
-                        eventType === BACKUP_DISABLED_ACCOUNT_DATA_KEY
-                            ? new MatrixEvent({ content: { disabled: true } })
-                            : undefined,
-                    );
+                    mockClient.getAccountData.mockImplementation((eventType) => {
+                        switch (eventType) {
+                            case ACCOUNT_DATA_KEY_M_KEY_BACKUP:
+                                return new MatrixEvent({ content: { enabled: false } });
+                            case ACCOUNT_DATA_KEY_M_KEY_BACKUP_DISABLED_UNSTABLE:
+                                return new MatrixEvent({ content: { disabled: true } });
+                            default:
+                                return undefined;
+                        }
+                    });
 
                     // When we launch the DeviceListener
                     await createAndStart();
@@ -706,7 +843,7 @@ describe("DeviceListener", () => {
                 });
 
                 it("hides toast when reminder is snoozed", async () => {
-                    mocked(isBulkUnverifiedDeviceReminderSnoozed).mockReturnValue(true);
+                    vi.mocked(isBulkUnverifiedDeviceReminderSnoozed).mockReturnValue(true);
                     // currentDevice, device2 are verified, device3 is unverified
                     mockCrypto!.getDeviceVerificationStatus.mockImplementation(async (_userId, deviceId) => {
                         switch (deviceId) {
@@ -798,12 +935,12 @@ describe("DeviceListener", () => {
         });
 
         describe("Report verification and recovery state to Analytics", () => {
-            let setPropertySpy: jest.SpyInstance;
-            let trackEventSpy: jest.SpyInstance;
+            let setPropertySpy: Mocked<PosthogAnalytics["setProperty"]>;
+            let trackEventSpy: Mocked<PosthogAnalytics["trackEvent"]>;
 
             beforeEach(() => {
-                setPropertySpy = jest.spyOn(PosthogAnalytics.instance, "setProperty");
-                trackEventSpy = jest.spyOn(PosthogAnalytics.instance, "trackEvent");
+                setPropertySpy = vi.spyOn(PosthogAnalytics.instance, "setProperty");
+                trackEventSpy = vi.spyOn(PosthogAnalytics.instance, "trackEvent");
             });
 
             describe("Report crypto verification state to analytics", () => {
@@ -1168,7 +1305,7 @@ describe("DeviceListener", () => {
                 mockCrypto!.isCrossSigningReady.mockResolvedValue(true);
                 mockCrypto!.getSecretStorageStatus.mockResolvedValue(unreadySecretStorageStatus);
                 mockClient!.getRooms.mockReturnValue(rooms);
-                jest.spyOn(mockClient.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true);
+                vi.spyOn(mockClient.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true);
             });
 
             it("shows the 'set up recovery' toast if user has not set up 4S", async () => {
@@ -1187,7 +1324,7 @@ describe("DeviceListener", () => {
             });
 
             it("does not show the 'set up recovery' toast if user has no encrypted rooms", async () => {
-                jest.spyOn(mockClient.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(false);
+                vi.spyOn(mockClient.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(false);
                 await createAndStart();
 
                 expect(SetupEncryptionToast.showToast).not.toHaveBeenCalledWith("set_up_recovery");
@@ -1195,10 +1332,16 @@ describe("DeviceListener", () => {
 
             it("does not show the 'set up recovery' toast if the user has chosen to disable key storage", async () => {
                 mockClient!.getAccountData.mockImplementation((k: string) => {
-                    if (k === "m.org.matrix.custom.backup_disabled") {
-                        return new MatrixEvent({ content: { disabled: true } });
+                    switch (k) {
+                        case "m.org.matrix.custom.backup_disabled":
+                            return new MatrixEvent({ content: { disabled: true } });
+
+                        case "m.key_backup":
+                            return new MatrixEvent({ content: { enabled: false } });
+
+                        default:
+                            return undefined;
                     }
-                    return undefined;
                 });
                 await createAndStart();
 
@@ -1211,18 +1354,15 @@ describe("DeviceListener", () => {
         describe("needs backup reset", () => {
             it("should not need resetting if backup disabled", async () => {
                 const deviceListener = await createAndStart();
-                mockClient.getAccountDataFromServer.mockResolvedValue({
-                    disabled: true,
-                });
+                mockKeyBackupFromServer(mockClient, false);
+
                 expect(await deviceListener.keyStorageOutOfSyncNeedsBackupReset(false)).toBe(false);
                 expect(await deviceListener.keyStorageOutOfSyncNeedsBackupReset(true)).toBe(false);
             });
 
             it("should not need resetting if backup key is present locally or in 4S, and user has 4S key", async () => {
                 const deviceListener = await createAndStart();
-                mockClient.getAccountDataFromServer.mockResolvedValue({
-                    disabled: false,
-                });
+                mockKeyBackupFromServer(mockClient, true);
 
                 mockCrypto.getSessionBackupPrivateKey.mockResolvedValue(null);
                 mockClient.isKeyBackupKeyStored.mockResolvedValue({});
@@ -1235,9 +1375,7 @@ describe("DeviceListener", () => {
 
             it("should not need resetting if backup key is present locally and user forgot 4S key", async () => {
                 const deviceListener = await createAndStart();
-                mockClient.getAccountDataFromServer.mockResolvedValue({
-                    disabled: false,
-                });
+                mockKeyBackupFromServer(mockClient, true);
 
                 mockCrypto.getSessionBackupPrivateKey.mockResolvedValue(new Uint8Array());
                 mockClient.isKeyBackupKeyStored.mockResolvedValue(null);
@@ -1246,9 +1384,7 @@ describe("DeviceListener", () => {
 
             it("should need resetting if backup key is missing locally and user forgot 4S key", async () => {
                 const deviceListener = await createAndStart();
-                mockClient.getAccountDataFromServer.mockResolvedValue({
-                    disabled: false,
-                });
+                mockKeyBackupFromServer(mockClient, true);
 
                 mockCrypto.getSessionBackupPrivateKey.mockResolvedValue(null);
                 mockClient.isKeyBackupKeyStored.mockResolvedValue({});
@@ -1257,9 +1393,7 @@ describe("DeviceListener", () => {
 
             it("should need resetting if backup key is missing locally and in 4s", async () => {
                 const deviceListener = await createAndStart();
-                mockClient.getAccountDataFromServer.mockResolvedValue({
-                    disabled: false,
-                });
+                mockKeyBackupFromServer(mockClient, true);
 
                 mockCrypto.getSessionBackupPrivateKey.mockResolvedValue(null);
                 mockClient.isKeyBackupKeyStored.mockResolvedValue(null);
@@ -1337,3 +1471,16 @@ describe("DeviceListener", () => {
         });
     });
 });
+
+function mockKeyBackupFromServer(client: Mocked<MatrixClient>, enabled: boolean) {
+    client.getAccountDataFromServer.mockImplementation(async (eventType: string) => {
+        switch (eventType) {
+            case ACCOUNT_DATA_KEY_M_KEY_BACKUP:
+                return { enabled } as any;
+            case ACCOUNT_DATA_KEY_M_KEY_BACKUP_DISABLED_UNSTABLE:
+                return { disabled: !enabled } as any;
+            default:
+                return null;
+        }
+    });
+}
diff --git a/apps/web/src/HtmlUtils.tsx b/apps/web/src/HtmlUtils.tsx
index 3fefbba418..7630d8550f 100644
--- a/apps/web/src/HtmlUtils.tsx
+++ b/apps/web/src/HtmlUtils.tsx
@@ -79,7 +79,7 @@ function mightContainEmoji(str?: string): boolean {
  * Returns the shortcode for an emoji character.
  *
  * @param {String} char The emoji character
- * @return {String} The shortcode (such as :thumbup:)
+ * @returns {String} The shortcode (such as :thumbup:)
  */
 export function unicodeToShortcode(char: string): string {
     const shortcodes = getEmojiFromUnicode(char)?.shortcodes;
@@ -89,11 +89,18 @@ export function unicodeToShortcode(char: string): string {
 /*
  * Given an untrusted HTML string, return a React node with an sanitized version
  * of that HTML.
+ * @param insaneHtml - the input to sanitize
+ * @param className - an optional class name to apply to the element
+ * @param sanitizeParams - the params to use for sanitization
  */
-export function sanitizedHtmlNode(insaneHtml: string): ReactNode {
-    const saneHtml = sanitizeHtml(insaneHtml, sanitizeHtmlParams);
+export function sanitizedHtmlNode(
+    insaneHtml: string,
+    className?: string,
+    sanitizeParams = sanitizeHtmlParams,
+): ReactNode {
+    const saneHtml = sanitizeHtml(insaneHtml, sanitizeParams);
 
-    return <div dangerouslySetInnerHTML={{ __html: saneHtml }} dir="auto" />;
+    return <div dangerouslySetInnerHTML={{ __html: saneHtml }} dir="auto" className={className} />;
 }
 
 export function getHtmlText(insaneHtml: string): string {
@@ -112,7 +119,7 @@ export function getHtmlText(insaneHtml: string): string {
  * Note that the HTML sanitiser library has its own internal logic for
  * doing this, to which we pass the same list of schemes. This is used in
  * other places we need to sanitise URLs.
- * @return true if permitted, otherwise false
+ * @returns true if permitted, otherwise false
  */
 export function isUrlPermitted(inputUrl: string): boolean {
     try {
@@ -452,7 +459,7 @@ export function bodyToNode(content: IContent, highlights?: string[], opts: Event
             // This has to be done after the emojiBody check as to not break big emoji on replies
             formattedBody = formatEmojis(eventInfo.safeBody, true).join("");
         } else {
-            emojiBodyElements = formatEmojis(eventInfo.strippedBody, false) as JSX.Element[];
+            emojiBodyElements = formatEmojis(eventInfo.strippedBody, false);
         }
     }
 
@@ -490,7 +497,7 @@ export function bodyToHtml(content: IContent, highlights?: string[], opts: Event
  * @param htmlTopic optional html topic
  * @param ref React ref to attach to any React components returned
  * @param allowExtendedHtml whether to allow extended HTML tags such as headings and lists
- * @return The HTML-ified node.
+ * @returns The HTML-ified node.
  */
 export function topicToHtml(
     topic?: string,
diff --git a/apps/web/src/IConfigOptions.ts b/apps/web/src/IConfigOptions.ts
index a3a6a32c91..16f28075ff 100644
--- a/apps/web/src/IConfigOptions.ts
+++ b/apps/web/src/IConfigOptions.ts
@@ -7,15 +7,10 @@ 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 IClientWellKnown } from "matrix-js-sdk/src/matrix";
+import { type ResolveDefaults, type WebConfigJson } from "shared-types";
 
 import { type ValidatedServerConfig } from "./utils/ValidatedServerConfig";
-
-// Convention decision: All config options are lower_snake_case
-// We use an isolated file for the interface so we can mess around with the eslint options.
-
-/* eslint-disable camelcase */
-/* eslint @typescript-eslint/naming-convention: ["error", { "selector": "property", "format": ["snake_case"] } ] */
+import { type DEFAULTS } from "./SdkConfig.ts";
 
 /**
  * Bug reports are enabled but must only be locally
@@ -23,202 +18,14 @@ import { type ValidatedServerConfig } from "./utils/ValidatedServerConfig";
  */
 export const BugReportEndpointURLLocal = "local";
 
-// see element-web config.md for non-developer docs
-export interface IConfigOptions {
-    // dev note: while true that this is arbitrary JSON, it's valuable to enforce that all
-    // config options are documented for "find all usages" sort of searching.
-    // [key: string]: any;
-
-    // Properties of this interface are roughly grouped by their subject matter, such as
-    // "instance customisation", "login stuff", "branding", etc. Use blank lines to denote
-    // a logical separation of properties, but keep similar ones near each other.
-
-    // Exactly one of the following must be supplied
-    default_server_config?: IClientWellKnown; // copy/paste of client well-known
-    default_server_name?: string; // domain to do well-known lookup on
-    default_hs_url?: string; // http url
-
-    default_is_url?: string; // used in combination with default_hs_url, but for the identity server
-
-    // This is intended to be overridden by app startup and not specified by the user
-    // This is also why it's allowed to have an interface that isn't snake_case
+export interface ConfigOptions extends WebConfigJson {
+    /**
+     * This is not a real config field, we're just abusing the config structure to pass around a validated server config
+     */
     validated_server_config?: ValidatedServerConfig;
-
-    fallback_hs_url?: string;
-
-    disable_custom_urls?: boolean;
-    disable_guests?: boolean;
-    disable_login_language_selector?: boolean;
-    disable_3pid_login?: boolean;
-
-    brand: string;
-    branding: {
-        welcome_background_url: string | string[]; // chosen at random if array
-        logo_link_url: string;
-        auth_header_logo_url?: string;
-        auth_footer_links?: { text: string; url: string }[];
-    };
-
-    force_verification?: boolean; // if true, users must verify new logins
-
-    map_style_url?: string; // for location-shared maps
-
-    embedded_pages?: {
-        welcome_url?: string;
-        home_url?: string;
-        login_for_welcome?: boolean;
-    };
-
-    permalink_prefix?: string;
-
-    update_base_url?: string;
-    desktop_builds: {
-        available: boolean;
-        logo: string; // url
-        url: string; // download url
-        url_macos?: string;
-        url_win64?: string;
-        url_win64arm?: string;
-        url_linux?: string;
-    };
-    mobile_builds: {
-        ios: string | null; // download url
-        android: string | null; // download url
-        fdroid: string | null; // download url
-    };
-
-    mobile_guide_toast?: boolean;
-    mobile_guide_app_variant?: "element" | "element-classic" | "element-pro";
-
-    default_theme?: "light" | "dark" | string; // custom themes are strings
-    default_country_code?: string; // ISO 3166 alpha2 country code
-    default_federate?: boolean;
-    default_device_display_name?: string; // for device naming on login+registration
-
-    setting_defaults?: Record<string, any>; // <SettingName, Value>
-
-    integrations_ui_url?: string;
-    integrations_rest_url?: string;
-    integrations_widgets_urls?: string[];
-    default_widget_container_height?: number; // height in pixels
-
-    show_labs_settings: boolean;
-    features?: Record<string, boolean>; // <FeatureName, EnabledBool>
-
-    /**
-     * Bug report endpoint URL. "local" means the logs should not be uploaded.
-     */
-    bug_report_endpoint_url?: typeof BugReportEndpointURLLocal | string; // omission disables bug reporting
-    sentry?: {
-        dsn: string;
-        environment?: string; // "production", etc
-    };
-
-    widget_build_url?: string; // url called to replace jitsi/call widget creation
-    widget_build_url_ignore_dm?: boolean;
-    audio_stream_url?: string;
-    jitsi?: {
-        preferred_domain: string;
-    };
-    jitsi_widget?: {
-        skip_built_in_welcome_screen?: boolean;
-    };
-    voip?: {
-        obey_asserted_identity?: boolean; // MSC3086
-    };
-    element_call: {
-        guest_spa_url?: string;
-        use_exclusively?: boolean;
-        brand?: string;
-    };
-
-    logout_redirect_url?: string;
-
-    sso_redirect_options?: ISsoRedirectOptions;
-
-    custom_translations_url?: string;
-
-    report_event?: {
-        admin_message_md: string; // message for how to contact the server owner when reporting an event
-    };
-
-    room_directory?: {
-        servers: string[];
-    };
-
-    posthog?: {
-        project_api_key: string;
-        api_host: string; // hostname
-    };
-    analytics_owner?: string; // defaults to `brand`
-    privacy_policy_url?: string; // location for cookie policy
-
-    enable_presence_by_hs_url?: Record<string, boolean>; // <HomeserverName, Enabled>
-
-    terms_and_conditions_links?: { url: string; text: string }[];
-    help_url: string;
-    help_encryption_url: string;
-    help_key_storage_url: string;
-
-    latex_maths_delims?: {
-        inline?: {
-            left?: string;
-            right?: string;
-            pattern?: {
-                tex?: string;
-                latex?: string;
-            };
-        };
-        display?: {
-            left?: string;
-            right?: string;
-            pattern?: {
-                tex?: string;
-                latex?: string;
-            };
-        };
-    };
-
-    sync_timeline_limit?: number;
-    dangerously_allow_unsafe_and_insecure_passwords?: boolean; // developer option
-
-    user_notice?: {
-        title: string;
-        description: string;
-        show_once?: boolean;
-    };
-
-    feedback: {
-        existing_issues_url: string;
-        new_issue_url: string;
-    };
-
-    /**
-     * Configuration for OIDC issuers where a static client_id has been issued for the app.
-     * Otherwise dynamic client registration is attempted.
-     * The issuer URL must have a trailing `/`.
-     * OPTIONAL
-     */
-    oidc_static_clients?: {
-        [issuer: string]: { client_id: string };
-    };
-
-    /**
-     * Configuration for OIDC dynamic registration where a static OIDC client is not configured.
-     */
-    oidc_metadata?: {
-        client_uri?: string;
-        logo_uri?: string;
-        tos_uri?: string;
-        policy_uri?: string;
-        contacts?: string[];
-    };
-
-    modules?: string[];
 }
 
-export interface ISsoRedirectOptions {
-    immediate?: boolean;
-    on_welcome_page?: boolean;
-    on_login_page?: boolean;
-}
+/**
+ * Type representing the effective config.json structure after DEFAULTS has been merged in
+ */
+export type IConfigOptions = ResolveDefaults<ConfigOptions, typeof DEFAULTS>;
diff --git a/apps/web/test/unit-tests/KeyBindingsManager-test.ts b/apps/web/src/KeyBindingsManager.test.ts
similarity index 98%
rename from apps/web/test/unit-tests/KeyBindingsManager-test.ts
rename to apps/web/src/KeyBindingsManager.test.ts
index ed0be01fe2..02c93d430e 100644
--- a/apps/web/test/unit-tests/KeyBindingsManager-test.ts
+++ b/apps/web/src/KeyBindingsManager.test.ts
@@ -6,7 +6,9 @@ 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 { isKeyComboMatch, type KeyCombo } from "../../src/KeyBindingsManager";
+import { describe, it, expect } from "vitest";
+
+import { isKeyComboMatch, type KeyCombo } from "./KeyBindingsManager";
 
 function mockKeyEvent(
     key: string,
diff --git a/apps/web/src/Keyboard.ts b/apps/web/src/Keyboard.ts
index 5a7e7b59f1..de7ab059c6 100644
--- a/apps/web/src/Keyboard.ts
+++ b/apps/web/src/Keyboard.ts
@@ -79,12 +79,3 @@ export function isOnlyCtrlOrCmdKeyEvent(ev: React.KeyboardEvent | KeyboardEvent)
         return ev.ctrlKey && !ev.altKey && !ev.metaKey && !ev.shiftKey;
     }
 }
-
-/**
- * Checks if the given keyboard event is a modified key event (i.e., if any modifier keys are active).
- * @param ev The keyboard event to check
- * @returns True if the event is a modified key event, false otherwise
- */
-export function isModifiedKeyEvent(ev: React.KeyboardEvent | KeyboardEvent): boolean {
-    return ev.metaKey || ev.altKey || ev.ctrlKey || ev.shiftKey;
-}
diff --git a/apps/web/src/LegacyCallHandler.tsx b/apps/web/src/LegacyCallHandler.tsx
index 3ccf500b26..48627d59ad 100644
--- a/apps/web/src/LegacyCallHandler.tsx
+++ b/apps/web/src/LegacyCallHandler.tsx
@@ -34,7 +34,6 @@ import { WidgetType } from "./widgets/WidgetType";
 import { SettingLevel } from "./settings/SettingLevel";
 import QuestionDialog from "./components/views/dialogs/QuestionDialog";
 import ErrorDialog from "./components/views/dialogs/ErrorDialog";
-import WidgetStore from "./stores/WidgetStore";
 import { WidgetMessagingStore } from "./stores/widgets/WidgetMessagingStore";
 import { ElementWidgetActions } from "./stores/widgets/ElementWidgetActions";
 import { UIFeature } from "./settings/UIFeature";
@@ -42,7 +41,6 @@ import { Action } from "./dispatcher/actions";
 import { addManagedHybridWidget, isManagedHybridWidgetEnabled } from "./widgets/ManagedHybrid";
 import SdkConfig from "./SdkConfig";
 import { ensureDMExists } from "./createRoom";
-import { WidgetLayoutStore } from "./stores/widgets/WidgetLayoutStore";
 import IncomingLegacyCallToast, { getIncomingLegacyCallToastKey } from "./toasts/IncomingLegacyCallToast";
 import ToastStore from "./stores/ToastStore";
 import { type ViewRoomPayload } from "./dispatcher/payloads/ViewRoomPayload";
@@ -54,41 +52,13 @@ import { localNotificationsAreSilenced } from "./utils/notifications";
 import { isNotNull } from "./Typeguards";
 import { BackgroundAudio } from "./audio/BackgroundAudio";
 import { Jitsi } from "./widgets/Jitsi.ts";
+import { type SDKContextClass } from "./contexts/SDKContextClass.ts";
 
 export const PROTOCOL_PSTN = "m.protocol.pstn";
 export const PROTOCOL_PSTN_PREFIXED = "im.vector.protocol.pstn";
 
 const CHECK_PROTOCOLS_ATTEMPTS = 3;
 
-type MediaEventType = keyof HTMLMediaElementEventMap;
-const MEDIA_ERROR_EVENT_TYPES: MediaEventType[] = [
-    "error",
-    // The media has become empty; for example, this event is sent if the media has
-    // already been loaded (or partially loaded), and the HTMLMediaElement.load method
-    // is called to reload it.
-    "emptied",
-    // The user agent is trying to fetch media data, but data is unexpectedly not
-    // forthcoming.
-    "stalled",
-    // Media data loading has been suspended.
-    "suspend",
-    // Playback has stopped because of a temporary lack of data
-    "waiting",
-];
-const MEDIA_DEBUG_EVENT_TYPES: MediaEventType[] = [
-    "play",
-    "pause",
-    "playing",
-    "ended",
-    "loadeddata",
-    "loadedmetadata",
-    "canplay",
-    "canplaythrough",
-    "volumechange",
-];
-
-const MEDIA_EVENT_TYPES = [...MEDIA_ERROR_EVENT_TYPES, ...MEDIA_DEBUG_EVENT_TYPES];
-
 export enum AudioID {
     Ring = "ringAudio",
     Ringback = "ringbackAudio",
@@ -96,13 +66,6 @@ export enum AudioID {
     Busy = "busyAudio",
 }
 
-/* istanbul ignore next */
-const debuglog = (...args: any[]): void => {
-    if (SettingsStore.getValue("debug_legacy_call_handler")) {
-        logger.log.call(console, "LegacyCallHandler debuglog:", ...args);
-    }
-};
-
 interface ThirdpartyLookupResponse {
     userid: string;
     protocol: string;
@@ -151,12 +114,8 @@ export default class LegacyCallHandler extends TypedEventEmitter<LegacyCallHandl
     private backgroundAudio = new BackgroundAudio();
     private playingSources: Record<string, AudioBufferSourceNode> = {}; // Record them for stopping
 
-    public static get instance(): LegacyCallHandler {
-        if (!window.mxLegacyCallHandler) {
-            window.mxLegacyCallHandler = new LegacyCallHandler();
-        }
-
-        return window.mxLegacyCallHandler;
+    public constructor(private readonly sdkContext: SDKContextClass) {
+        super();
     }
 
     /*
@@ -193,18 +152,6 @@ export default class LegacyCallHandler extends TypedEventEmitter<LegacyCallHandl
         }
     }
 
-    /* istanbul ignore next (remove if we start using this function for things other than debug logging) */
-    public handleEvent(e: Event): void {
-        const target = e.target as HTMLElement;
-        const audioId = target?.id;
-
-        if (MEDIA_ERROR_EVENT_TYPES.includes(e.type as MediaEventType)) {
-            logger.error(`LegacyCallHandler: encountered "${e.type}" event with <audio id="${audioId}">`, e);
-        } else if (MEDIA_EVENT_TYPES.includes(e.type as MediaEventType)) {
-            debuglog(`encountered "${e.type}" event with <audio id="${audioId}">`, e);
-        }
-    }
-
     public isForcedSilent(): boolean {
         const cli = MatrixClientPeg.safeGet();
         return localNotificationsAreSilenced(cli);
@@ -308,7 +255,7 @@ export default class LegacyCallHandler extends TypedEventEmitter<LegacyCallHandl
             return;
         }
 
-        const mappedRoomId = LegacyCallHandler.instance.roomIdForCall(call);
+        const mappedRoomId = this.roomIdForCall(call);
         if (!mappedRoomId) return;
         if (this.getCallForRoom(mappedRoomId)) {
             logger.log(
@@ -365,7 +312,7 @@ export default class LegacyCallHandler extends TypedEventEmitter<LegacyCallHandl
 
     public getAllActiveCallsForPip(roomId: string): MatrixCall[] {
         const room = MatrixClientPeg.safeGet().getRoom(roomId);
-        if (room && WidgetLayoutStore.instance.hasMaximisedWidget(room)) {
+        if (room && this.sdkContext.widgetLayoutStore.hasMaximisedWidget(room)) {
             // This checks if there is space for the call view in the aux panel
             // If there is no space any call should be displayed in PiP
             return this.getAllActiveCalls();
@@ -667,7 +614,7 @@ export default class LegacyCallHandler extends TypedEventEmitter<LegacyCallHandl
     }
 
     private setCallState(call: MatrixCall, status: CallState): void {
-        const mappedRoomId = LegacyCallHandler.instance.roomIdForCall(call);
+        const mappedRoomId = this.roomIdForCall(call);
 
         logger.log(`Call state in ${mappedRoomId} changed to ${status}`);
 
@@ -1022,12 +969,12 @@ export default class LegacyCallHandler extends TypedEventEmitter<LegacyCallHandl
         dis.dispatch({ action: "appsDrawer", show: true });
 
         // Prevent double clicking the call button
-        const widget = WidgetStore.instance.getApps(roomId).find((app) => WidgetType.JITSI.matches(app.type));
+        const widget = this.sdkContext.widgetStore.getApps(roomId).find((app) => WidgetType.JITSI.matches(app.type));
         if (widget) {
             // If there already is a Jitsi widget, pin it
             const room = client.getRoom(roomId);
             if (isNotNull(room)) {
-                WidgetLayoutStore.instance.moveToContainer(room, widget, "top");
+                this.sdkContext.widgetLayoutStore.moveToContainer(room, widget, "top");
             }
             return;
         }
@@ -1049,7 +996,7 @@ export default class LegacyCallHandler extends TypedEventEmitter<LegacyCallHandl
     public hangupCallApp(roomId: string): void {
         logger.info("Leaving conference call in " + roomId);
 
-        const roomInfo = WidgetStore.instance.getRoom(roomId);
+        const roomInfo = this.sdkContext.widgetStore.getRoom(roomId);
         if (!roomInfo) return; // "should never happen" clauses go here
 
         const jitsiWidgets = roomInfo.widgets.filter((w) => WidgetType.JITSI.matches(w.type));
diff --git a/apps/web/test/unit-tests/Lifecycle-test.ts b/apps/web/src/Lifecycle.test.ts
similarity index 77%
rename from apps/web/test/unit-tests/Lifecycle-test.ts
rename to apps/web/src/Lifecycle.test.ts
index adac08989d..c5c03592a3 100644
--- a/apps/web/test/unit-tests/Lifecycle-test.ts
+++ b/apps/web/src/Lifecycle.test.ts
@@ -6,36 +6,39 @@ 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 { Crypto } from "@peculiar/webcrypto";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach, afterEach, type MockedObject } from "vitest";
 import { logger } from "matrix-js-sdk/src/logger";
 import * as MatrixJs from "matrix-js-sdk/src/matrix";
-import { decodeBase64, encodeUnpaddedBase64 } from "matrix-js-sdk/src/matrix";
+import { decodeBase64, encodeUnpaddedBase64, MatrixClient, OAuth2 } from "matrix-js-sdk/src/matrix";
 import * as encryptAESSecretStorageItemModule from "matrix-js-sdk/src/utils/encryptAESSecretStorageItem";
-import { mocked, type MockedObject } from "jest-mock";
-import fetchMock from "@fetch-mock/jest";
+import fetchMock from "@fetch-mock/vitest";
+import {
+    flushPromises,
+    getMockClientWithEventEmitter,
+    mockClientMethodsUser,
+    mockClientMethodsServer,
+    mockPlatformPeg,
+} from "test-utils";
+import { makeDelegatedAuthMetadata } from "test-utils/auth";
 
-import StorageEvictedDialog from "../../src/components/views/dialogs/StorageEvictedDialog";
-import * as Lifecycle from "../../src/Lifecycle";
-import { MatrixClientPeg } from "../../src/MatrixClientPeg";
-import Modal from "../../src/Modal";
-import * as StorageAccess from "../../src/utils/StorageAccess";
-import { idbSave } from "../../src/utils/StorageAccess";
-import { flushPromises, getMockClientWithEventEmitter, mockClientMethodsUser, mockPlatformPeg } from "../test-utils";
-import { OidcClientStore } from "../../src/stores/oidc/OidcClientStore";
-import { makeDelegatedAuthConfig } from "../test-utils/oidc";
-import { Action } from "../../src/dispatcher/actions";
-import PlatformPeg from "../../src/PlatformPeg";
-import { persistAccessTokenInStorage, persistRefreshTokenInStorage } from "../../src/utils/tokens/tokens";
-import { encryptPickleKey } from "../../src/utils/tokens/pickling";
-import * as StorageManager from "../../src/utils/StorageManager.ts";
-import type BasePlatform from "../../src/BasePlatform.ts";
+import StorageEvictedDialog from "./components/views/dialogs/StorageEvictedDialog";
+import * as Lifecycle from "./Lifecycle";
+import { MatrixClientPeg } from "./MatrixClientPeg";
+import Modal from "./Modal";
+import * as StorageAccess from "./utils/StorageAccess";
+import { idbSave } from "./utils/StorageAccess";
+import { Action } from "./dispatcher/actions";
+import PlatformPeg from "./PlatformPeg";
+import { persistTokens } from "./utils/tokens/tokens";
+import { encryptPickleKey } from "./utils/tokens/pickling";
+import * as StorageManager from "./utils/StorageManager.ts";
+import type BasePlatform from "./BasePlatform.ts";
+import * as createMatrixClientModule from "./utils/createMatrixClient";
 
 const { logout, restoreSessionFromStorage, setLoggedIn } = Lifecycle;
 
-const webCrypto = new Crypto();
-
-const windowCrypto = window.crypto;
-
 describe("Lifecycle", () => {
     const homeserverUrl = "https://domain";
     const identityServerUrl = "https://is.org";
@@ -45,63 +48,55 @@ describe("Lifecycle", () => {
 
     let mockPlatform: MockedObject<BasePlatform>;
 
-    const realLocalStorage = global.localStorage;
-
     let mockClient!: MockedObject<MatrixJs.MatrixClient>;
 
     beforeEach(() => {
-        jest.restoreAllMocks();
         mockPlatform = mockPlatformPeg();
         mockClient = getMockClientWithEventEmitter({
             ...mockClientMethodsUser(),
-            stopClient: jest.fn(),
-            removeAllListeners: jest.fn(),
-            clearStores: jest.fn(),
-            getAccountData: jest.fn(),
-            getDeviceId: jest.fn().mockReturnValue(deviceId),
-            isVersionSupported: jest.fn().mockResolvedValue(true),
-            getCrypto: jest.fn(),
-            getClientWellKnown: jest.fn(),
-            waitForClientWellKnown: jest.fn(),
-            getThirdpartyProtocols: jest.fn(),
+            ...mockClientMethodsServer(),
+            stopClient: vi.fn(),
+            removeAllListeners: vi.fn(),
+            clearStores: vi.fn(),
+            getDeviceId: vi.fn().mockReturnValue(deviceId),
+            isVersionSupported: vi.fn().mockResolvedValue(true),
+            getCrypto: vi.fn(),
+            getThirdpartyProtocols: vi.fn(),
             store: {
-                destroy: jest.fn(),
+                destroy: vi.fn(),
             },
-            getVersions: jest.fn().mockResolvedValue({ versions: ["v1.1"] }),
-            logout: jest.fn().mockResolvedValue(undefined),
-            getAccessToken: jest.fn(),
-            getRefreshToken: jest.fn(),
+            getVersions: vi.fn().mockResolvedValue({ versions: ["v1.1"] }),
+            logout: vi.fn().mockResolvedValue(undefined),
+            getRefreshToken: vi.fn(),
+            isInitialSyncComplete: vi.fn(),
+            setGuest: vi.fn(),
+            setNotifTimelineSet: vi.fn(),
+            getRooms: vi.fn().mockReturnValue([]),
+            matrixRTC: { on: vi.fn(), off: vi.fn() },
         });
         // stub this
-        jest.spyOn(MatrixClientPeg, "replaceUsingCreds").mockImplementation(() => {});
-        jest.spyOn(MatrixClientPeg, "start").mockResolvedValue(undefined);
+        vi.spyOn(MatrixClientPeg, "set").mockImplementation(() => {});
+        vi.spyOn(MatrixClientPeg, "start").mockResolvedValue(undefined);
 
-        // reset any mocking
-        // @ts-ignore mocking
-        delete global.localStorage;
-        global.localStorage = realLocalStorage;
+        vi.spyOn(encryptAESSecretStorageItemModule, "default").mockRestore();
 
-        // @ts-ignore mocking
-        delete window.crypto;
-        window.crypto = webCrypto;
-
-        jest.spyOn(encryptAESSecretStorageItemModule, "default").mockRestore();
+        localStorage.clear();
+        sessionStorage.clear();
+        vi.spyOn(MatrixClient.prototype, "getAuthMetadata").mockResolvedValue(makeDelegatedAuthMetadata());
     });
 
-    afterAll(() => {
-        // @ts-ignore unmocking
-        delete window.crypto;
-        window.crypto = windowCrypto;
+    afterEach(() => {
+        vi.resetAllMocks();
     });
 
     const initIdbMock = (mockStore: Record<string, Record<string, unknown>> = {}): void => {
-        jest.spyOn(StorageAccess, "idbLoad")
+        vi.spyOn(StorageAccess, "idbLoad")
             .mockClear()
             .mockImplementation(
                 // @ts-ignore mock type
                 async (table: string, key: string) => mockStore[table]?.[key] ?? null,
             );
-        jest.spyOn(StorageAccess, "idbSave")
+        vi.spyOn(StorageAccess, "idbSave")
             .mockClear()
             .mockImplementation(
                 // @ts-ignore mock type
@@ -111,13 +106,13 @@ describe("Lifecycle", () => {
                     mockStore[tableKey] = table;
                 },
             );
-        jest.spyOn(StorageAccess, "idbDelete")
+        vi.spyOn(StorageAccess, "idbDelete")
             .mockClear()
             .mockImplementation(async (tableKey: string, key: string | string[]) => {
                 const table = mockStore[tableKey];
                 delete table?.[key as string];
             });
-        jest.spyOn(StorageAccess, "idbClear")
+        vi.spyOn(StorageAccess, "idbClear")
             .mockClear()
             .mockImplementation(async (tableKey: string) => {
                 mockStore[tableKey] = {};
@@ -129,8 +124,6 @@ describe("Lifecycle", () => {
         mx_is_url: identityServerUrl,
         mx_user_id: userId,
         mx_device_id: deviceId,
-        mx_oidc_token_issuer: "test-issuer.dummy",
-        mx_oidc_client_id: "test-client-id",
     };
     const idbStorageSession = {
         account: {
@@ -156,14 +149,14 @@ describe("Lifecycle", () => {
     describe("loadSession", () => {
         beforeEach(() => {
             // stub this out
-            jest.spyOn(Modal, "createDialog").mockReturnValue(
+            vi.spyOn(Modal, "createDialog").mockReturnValue(
                 // @ts-ignore allow bad mock
                 { finished: Promise.resolve([true]) },
             );
         });
 
         it("should not show any error dialog when checkConsistency throws but abortSignal has triggered", async () => {
-            jest.spyOn(StorageManager, "checkConsistency").mockRejectedValue(new Error("test error"));
+            vi.spyOn(StorageManager, "checkConsistency").mockRejectedValue(new Error("test error"));
 
             const abortController = new AbortController();
             const prom = Lifecycle.loadSession({
@@ -180,26 +173,29 @@ describe("Lifecycle", () => {
     });
 
     describe("restoreSessionFromStorage()", () => {
+        const realLocalStorage = localStorage;
+
         beforeEach(() => {
             initIdbMock();
 
-            jest.clearAllMocks();
-            jest.spyOn(logger, "log").mockClear();
+            vi.spyOn(logger, "log").mockClear();
 
-            jest.spyOn(MatrixJs, "createClient").mockReturnValue(mockClient);
+            vi.spyOn(MatrixJs, "createClient").mockReturnValue(mockClient);
+            vi.spyOn(createMatrixClientModule, "createClientWithCreds").mockReturnValue(mockClient);
 
             // stub this out
-            jest.spyOn(Modal, "createDialog").mockReturnValue(
+            vi.spyOn(Modal, "createDialog").mockReturnValue(
                 // @ts-ignore allow bad mock
                 { finished: Promise.resolve([true]) },
             );
         });
 
+        afterEach(() => {
+            vi.stubGlobal("localStorage", realLocalStorage);
+        });
+
         it("should return false when localStorage is not available", async () => {
-            // @ts-ignore dirty mocking
-            delete global.localStorage;
-            // @ts-ignore dirty mocking
-            global.localStorage = undefined;
+            vi.stubGlobal("localStorage", undefined);
 
             expect(await restoreSessionFromStorage()).toEqual(false);
         });
@@ -235,7 +231,7 @@ describe("Lifecycle", () => {
                 it("should restore guest accounts when ignoreGuest is false", async () => {
                     expect(await restoreSessionFromStorage({ ignoreGuest: false })).toEqual(true);
 
-                    expect(MatrixClientPeg.replaceUsingCreds).toHaveBeenCalledWith(
+                    expect(createMatrixClientModule.createClientWithCreds).toHaveBeenCalledWith(
                         expect.objectContaining({
                             userId,
                             guest: true,
@@ -268,7 +264,7 @@ describe("Lifecycle", () => {
                 });
 
                 it("should persist access token when idb is not available", async () => {
-                    jest.spyOn(StorageAccess, "idbSave").mockRejectedValue("oups");
+                    vi.spyOn(StorageAccess, "idbSave").mockRejectedValue("oups");
                     expect(await restoreSessionFromStorage()).toEqual(true);
 
                     expect(StorageAccess.idbSave).toHaveBeenCalledWith("account", "mx_access_token", accessToken);
@@ -279,7 +275,7 @@ describe("Lifecycle", () => {
                 it("should create and start new matrix client with credentials", async () => {
                     expect(await restoreSessionFromStorage()).toEqual(true);
 
-                    expect(MatrixClientPeg.replaceUsingCreds).toHaveBeenCalledWith(
+                    expect(createMatrixClientModule.createClientWithCreds).toHaveBeenCalledWith(
                         {
                             userId,
                             accessToken,
@@ -311,6 +307,7 @@ describe("Lifecycle", () => {
                 describe("with a refresh token", () => {
                     beforeEach(() => {
                         localStorage.setItem("mx_refresh_token", refreshToken);
+                        localStorage.setItem("mx_oidc_client_id", "test-client-id");
                         for (const key in localStorageSession) {
                             localStorage.setItem(key, localStorageSession[key]);
                         }
@@ -328,7 +325,7 @@ describe("Lifecycle", () => {
                     it("should create new matrix client with credentials", async () => {
                         expect(await restoreSessionFromStorage()).toEqual(true);
 
-                        expect(MatrixClientPeg.replaceUsingCreds).toHaveBeenCalledWith(
+                        expect(createMatrixClientModule.createClientWithCreds).toHaveBeenCalledWith(
                             {
                                 userId,
                                 accessToken,
@@ -341,7 +338,7 @@ describe("Lifecycle", () => {
                                 guest: false,
                                 pickleKey: undefined,
                             },
-                            expect.any(Function),
+                            expect.any(OAuth2),
                         );
                     });
                 });
@@ -351,6 +348,7 @@ describe("Lifecycle", () => {
                 let pickleKey: string;
 
                 beforeEach(async () => {
+                    localStorage.setItem("mx_oidc_client_id", "test-client-id");
                     for (const key in localStorageSession) {
                         localStorage.setItem(key, localStorageSession[key]);
                     }
@@ -362,7 +360,7 @@ describe("Lifecycle", () => {
                     // Indicate that we should have a pickle key
                     localStorage.setItem("mx_has_pickle_key", "true");
 
-                    await persistAccessTokenInStorage(credentials.accessToken, pickleKey);
+                    await persistTokens(pickleKey, credentials);
                 });
 
                 it("should persist credentials", async () => {
@@ -380,7 +378,7 @@ describe("Lifecycle", () => {
 
                 it("should persist access token when idb is not available", async () => {
                     // dont fail for pickle key persist
-                    jest.spyOn(StorageAccess, "idbSave").mockImplementation(
+                    vi.spyOn(StorageAccess, "idbSave").mockImplementation(
                         async (table: string, key: string | string[]) => {
                             if (table === "account" && key === "mx_access_token") {
                                 throw new Error("oups");
@@ -402,7 +400,7 @@ describe("Lifecycle", () => {
                 it("should create and start new matrix client with credentials", async () => {
                     // Check that the rust crypto key is as expected. We have to do this during the call, as
                     // the buffer is cleared afterwards.
-                    mocked(MatrixClientPeg.start).mockImplementation(async (opts) => {
+                    vi.mocked(MatrixClientPeg.start).mockImplementation(async (opts) => {
                         expect(opts?.rustCryptoStoreKey).toEqual(decodeBase64(pickleKey));
                     });
 
@@ -410,7 +408,7 @@ describe("Lifecycle", () => {
                     expect(await restoreSessionFromStorage()).toEqual(true);
 
                     // Ensure that the expected calls were made
-                    expect(MatrixClientPeg.replaceUsingCreds).toHaveBeenCalledWith(
+                    expect(createMatrixClientModule.createClientWithCreds).toHaveBeenCalledWith(
                         {
                             userId,
                             // decrypted accessToken
@@ -422,7 +420,7 @@ describe("Lifecycle", () => {
                             guest: false,
                             pickleKey,
                         },
-                        undefined,
+                        expect.any(OAuth2),
                     );
 
                     expect(MatrixClientPeg.start).toHaveBeenCalledWith({ rustCryptoStoreKey: expect.any(Uint8Array) });
@@ -430,7 +428,7 @@ describe("Lifecycle", () => {
 
                 describe("with a refresh token", () => {
                     beforeEach(async () => {
-                        await persistRefreshTokenInStorage(refreshToken, pickleKey);
+                        await persistTokens(pickleKey, { ...credentials, refreshToken });
                     });
 
                     it("should persist credentials", async () => {
@@ -448,7 +446,7 @@ describe("Lifecycle", () => {
                     it("should create new matrix client with credentials", async () => {
                         expect(await restoreSessionFromStorage()).toEqual(true);
 
-                        expect(MatrixClientPeg.replaceUsingCreds).toHaveBeenCalledWith(
+                        expect(createMatrixClientModule.createClientWithCreds).toHaveBeenCalledWith(
                             {
                                 userId,
                                 accessToken,
@@ -461,7 +459,7 @@ describe("Lifecycle", () => {
                                 guest: false,
                                 pickleKey: pickleKey,
                             },
-                            expect.any(Function),
+                            expect.any(OAuth2),
                         );
                     });
                 });
@@ -493,7 +491,7 @@ describe("Lifecycle", () => {
                     // Indicate that we should have a pickle key
                     localStorage.setItem("mx_has_pickle_key", "true");
 
-                    await persistAccessTokenInStorage(credentials.accessToken, pickleKey);
+                    await persistTokens(pickleKey, credentials);
                 });
 
                 it("should create and start new matrix client with credentials", async () => {
@@ -501,7 +499,7 @@ describe("Lifecycle", () => {
                     expect(await restoreSessionFromStorage()).toEqual(true);
 
                     // Ensure that the expected calls were made
-                    expect(MatrixClientPeg.replaceUsingCreds).toHaveBeenCalledWith(
+                    expect(createMatrixClientModule.createClientWithCreds).toHaveBeenCalledWith(
                         {
                             userId,
                             // decrypted accessToken
@@ -539,7 +537,7 @@ describe("Lifecycle", () => {
                 // Create a pickle key, and store it, encrypted, in IDB.
                 const pickleKey = (await PlatformPeg.get()!.createPickleKey(credentials.userId, credentials.deviceId))!;
                 localStorage.setItem("mx_has_pickle_key", "true");
-                await persistAccessTokenInStorage(credentials.accessToken, pickleKey);
+                await persistTokens(pickleKey, credentials);
 
                 // Now destroy the pickle key
                 await PlatformPeg.get()!.destroyPickleKey(credentials.userId, credentials.deviceId);
@@ -555,14 +553,14 @@ describe("Lifecycle", () => {
         beforeEach(() => {
             initIdbMock();
 
-            jest.clearAllMocks();
-            jest.spyOn(logger, "log").mockClear();
+            vi.clearAllMocks();
+            vi.spyOn(logger, "log").mockClear();
 
-            jest.spyOn(MatrixJs, "createClient").mockReturnValue(mockClient);
+            vi.spyOn(MatrixJs, "createClient").mockReturnValue(mockClient);
             // remove any mock implementations
-            jest.spyOn(mockPlatform, "createPickleKey").mockRestore();
+            vi.spyOn(mockPlatform, "createPickleKey").mockRestore();
             // but still spy and call through
-            jest.spyOn(mockPlatform, "createPickleKey");
+            vi.spyOn(mockPlatform, "createPickleKey");
         });
 
         const refreshToken = "test-refresh-token";
@@ -613,7 +611,8 @@ describe("Lifecycle", () => {
 
         describe("without a pickle key", () => {
             beforeEach(() => {
-                jest.spyOn(mockPlatform, "createPickleKey").mockResolvedValue(null);
+                vi.spyOn(mockPlatform, "createPickleKey").mockResolvedValue(null);
+                vi.spyOn(createMatrixClientModule, "createClientWithCreds").mockReturnValue(mockClient);
             });
 
             it("should persist credentials", async () => {
@@ -630,7 +629,6 @@ describe("Lifecycle", () => {
             });
 
             it("should persist a refreshToken when present", async () => {
-                localStorage.setItem("mx_oidc_token_issuer", "test-issuer.dummy");
                 localStorage.setItem("mx_oidc_client_id", "test-client-id");
 
                 await setLoggedIn({
@@ -645,7 +643,7 @@ describe("Lifecycle", () => {
             });
 
             it("should remove any access token from storage when there is none in credentials and idb save fails", async () => {
-                jest.spyOn(StorageAccess, "idbSave").mockRejectedValue("oups");
+                vi.spyOn(StorageAccess, "idbSave").mockRejectedValue("oups");
                 await setLoggedIn({
                     ...credentials,
                     // @ts-ignore
@@ -667,7 +665,7 @@ describe("Lifecycle", () => {
             it("should create new matrix client with credentials", async () => {
                 expect(await setLoggedIn(credentials)).toEqual(mockClient);
 
-                expect(MatrixClientPeg.replaceUsingCreds).toHaveBeenCalledWith(
+                expect(createMatrixClientModule.createClientWithCreds).toHaveBeenCalledWith(
                     {
                         userId,
                         accessToken,
@@ -721,7 +719,7 @@ describe("Lifecycle", () => {
             });
 
             it("should persist token when encrypting the token fails", async () => {
-                jest.spyOn(encryptAESSecretStorageItemModule, "default").mockRejectedValue("MOCK REJECT ENCRYPTAES");
+                vi.spyOn(encryptAESSecretStorageItemModule, "default").mockRejectedValue("MOCK REJECT ENCRYPTAES");
                 await setLoggedIn(credentials);
 
                 // persist the unencrypted token
@@ -730,13 +728,11 @@ describe("Lifecycle", () => {
 
             it("should persist token in localStorage when idb fails to save token", async () => {
                 // dont fail for pickle key persist
-                jest.spyOn(StorageAccess, "idbSave").mockImplementation(
-                    async (table: string, key: string | string[]) => {
-                        if (table === "account" && key === "mx_access_token") {
-                            throw new Error("oups");
-                        }
-                    },
-                );
+                vi.spyOn(StorageAccess, "idbSave").mockImplementation(async (table: string, key: string | string[]) => {
+                    if (table === "account" && key === "mx_access_token") {
+                        throw new Error("oups");
+                    }
+                });
                 await setLoggedIn(credentials);
 
                 // put plain accessToken in localstorage when we dont have idb
@@ -745,13 +741,11 @@ describe("Lifecycle", () => {
 
             it("should remove any access token from storage when there is none in credentials and idb save fails", async () => {
                 // dont fail for pickle key persist
-                jest.spyOn(StorageAccess, "idbSave").mockImplementation(
-                    async (table: string, key: string | string[]) => {
-                        if (table === "account" && key === "mx_access_token") {
-                            throw new Error("oups");
-                        }
-                    },
-                );
+                vi.spyOn(StorageAccess, "idbSave").mockImplementation(async (table: string, key: string | string[]) => {
+                    if (table === "account" && key === "mx_access_token") {
+                        throw new Error("oups");
+                    }
+                });
                 await setLoggedIn({
                     ...credentials,
                     // @ts-ignore
@@ -763,9 +757,10 @@ describe("Lifecycle", () => {
             });
 
             it("should create new matrix client with credentials", async () => {
+                vi.spyOn(createMatrixClientModule, "createClientWithCreds").mockReturnValue(mockClient);
                 expect(await setLoggedIn(credentials)).toEqual(mockClient);
 
-                expect(MatrixClientPeg.replaceUsingCreds).toHaveBeenCalledWith(
+                expect(createMatrixClientModule.createClientWithCreds).toHaveBeenCalledWith(
                     {
                         userId,
                         accessToken,
@@ -786,34 +781,18 @@ describe("Lifecycle", () => {
             const clientId = "test-client-id";
             const issuer = "https://auth.com/";
 
-            const delegatedAuthConfig = makeDelegatedAuthConfig(issuer);
-            const idToken =
-                "eyJhbGciOiJSUzI1NiIsImtpZCI6Imh4ZEhXb0Y5bW4ifQ.eyJzdWIiOiIwMUhQUDJGU0JZREU5UDlFTU04REQ3V1pIUiIsImlzcyI6Imh0dHBzOi8vYXV0aC1vaWRjLmxhYi5lbGVtZW50LmRldi8iLCJpYXQiOjE3MTUwNzE5ODUsImF1dGhfdGltZSI6MTcwNzk5MDMxMiwiY19oYXNoIjoidGt5R1RhUjU5aTk3YXoyTU4yMGdidyIsImV4cCI6MTcxNTA3NTU4NSwibm9uY2UiOiJxaXhwM0hFMmVaIiwiYXVkIjoiMDFIWDk0Mlg3QTg3REgxRUs2UDRaNjI4WEciLCJhdF9oYXNoIjoiNFlFUjdPRlVKTmRTeEVHV2hJUDlnZyJ9.HxODneXvSTfWB5Vc4cf7b8GiN2gdwUuTiyVqZuupWske2HkZiJZUt5Lsxg9BW3gz28POkE0Ln17snlkmy02B_AD3DQxKOOxQCzIIARHdfFvZxgGWsMdFcVQZDW7rtXcqgj-SpVaUQ_8acsgxSrz_DF2o0O4tto0PT6wVUiw8KlBmgWTscWPeAWe-39T-8EiQ8Wi16h6oSPcz2NzOQ7eOM_S9fDkOorgcBkRGLl1nrahrPSdWJSGAeruk5mX4YxN714YThFDyEA2t9YmKpjaiSQ2tT-Xkd7tgsZqeirNs2ni9mIiFX3bRX6t2AhUNzA7MaX9ZyizKGa6go3BESO_oDg";
+            const delegatedAuthConfig = makeDelegatedAuthMetadata(issuer);
 
             beforeEach(() => {
-                fetchMock.get(`${delegatedAuthConfig.issuer}.well-known/openid-configuration`, delegatedAuthConfig);
-                fetchMock.get(`${delegatedAuthConfig.issuer}jwks`, {
-                    status: 200,
-                    headers: {
-                        "Content-Type": "application/json",
-                    },
-                    keys: [],
-                });
-
                 // set values in local storage as they would be after a successful oidc authentication
                 localStorage.setItem("mx_oidc_client_id", clientId);
-                localStorage.setItem("mx_oidc_token_issuer", issuer);
-                localStorage.setItem("mx_oidc_id_token", idToken);
             });
 
             it("should not try to create a token refresher without a refresh token", async () => {
-                await setLoggedIn(credentials);
+                const cli = await setLoggedIn(credentials);
 
                 // didn't try to initialise token refresher
-                expect(fetchMock).toHaveFetchedTimes(
-                    0,
-                    `${delegatedAuthConfig.issuer}.well-known/openid-configuration`,
-                );
+                expect(cli.http.opts.tokenRefreshFunction).toBeUndefined();
             });
 
             it("should not try to create a token refresher without a deviceId", async () => {
@@ -833,7 +812,6 @@ describe("Lifecycle", () => {
             });
 
             it("should not try to create a token refresher without an issuer in session storage", async () => {
-                localStorage.removeItem("mx_oidc_token_issuer");
                 await expect(
                     setLoggedIn({
                         ...credentials,
@@ -856,7 +834,7 @@ describe("Lifecycle", () => {
                     }),
                 ).toEqual(mockClient);
 
-                expect(MatrixClientPeg.replaceUsingCreds).toHaveBeenCalledWith(
+                expect(createMatrixClientModule.createClientWithCreds).toHaveBeenCalledWith(
                     expect.objectContaining({
                         accessToken,
                         refreshToken,
@@ -877,7 +855,7 @@ describe("Lifecycle", () => {
                     }),
                 ).toEqual(mockClient);
 
-                expect(MatrixClientPeg.replaceUsingCreds).toHaveBeenCalledWith(
+                expect(createMatrixClientModule.createClientWithCreds).toHaveBeenCalledWith(
                     expect.objectContaining({
                         accessToken,
                         refreshToken,
@@ -890,20 +868,16 @@ describe("Lifecycle", () => {
     });
 
     describe("logout()", () => {
-        let oidcClientStore!: OidcClientStore;
         const accessToken = "test-access-token";
         const refreshToken = "test-refresh-token";
 
         beforeEach(() => {
-            oidcClientStore = new OidcClientStore(mockClient);
-            // stub
-            jest.spyOn(oidcClientStore, "revokeTokens").mockResolvedValue(undefined);
-
             mockClient.getAccessToken.mockReturnValue(accessToken);
             mockClient.getRefreshToken.mockReturnValue(refreshToken);
+            vi.spyOn(OAuth2.prototype, "revokeToken").mockResolvedValue(undefined);
         });
 
-        it("should call logout on the client when oidcClientStore is falsy", async () => {
+        it("should call logout on the client when oauth is not used", async () => {
             logout();
 
             await flushPromises();
@@ -911,34 +885,26 @@ describe("Lifecycle", () => {
             expect(mockClient.logout).toHaveBeenCalledWith(true);
         });
 
-        it("should call logout on the client when oidcClientStore.isUserAuthenticatedWithOidc is falsy", async () => {
-            jest.spyOn(oidcClientStore, "isUserAuthenticatedWithOidc", "get").mockReturnValue(false);
-            logout(oidcClientStore);
-
-            await flushPromises();
-
-            expect(mockClient.logout).toHaveBeenCalledWith(true);
-            expect(oidcClientStore.revokeTokens).not.toHaveBeenCalled();
-        });
-
-        it("should revoke tokens when user is authenticated with oidc", async () => {
-            jest.spyOn(oidcClientStore, "isUserAuthenticatedWithOidc", "get").mockReturnValue(true);
-            logout(oidcClientStore);
+        it("should revoke tokens when user is authenticated with oauth2", async () => {
+            localStorage.setItem("mx_oidc_client_id", "test-client-id");
+            logout();
 
             await flushPromises();
 
             expect(mockClient.logout).not.toHaveBeenCalled();
-            expect(oidcClientStore.revokeTokens).toHaveBeenCalledWith(accessToken, refreshToken);
+            expect(OAuth2.prototype.revokeToken).toHaveBeenCalledWith(accessToken, "access_token");
+            expect(OAuth2.prototype.revokeToken).toHaveBeenCalledWith(refreshToken, "refresh_token");
         });
     });
 
     describe("overwritelogin", () => {
         beforeEach(async () => {
-            jest.spyOn(MatrixJs, "createClient").mockReturnValue(mockClient);
+            vi.spyOn(MatrixJs, "createClient").mockReturnValue(mockClient);
         });
 
         it("should replace the current login with a new one", async () => {
-            const stopSpy = jest.spyOn(mockClient, "stopClient").mockReturnValue(undefined);
+            const stopSpy = vi.spyOn(mockClient, "stopClient").mockReturnValue(undefined);
+            vi.spyOn(createMatrixClientModule, "createClientWithCreds").mockReturnValue(mockClient);
             const dis = window.mxDispatcher;
 
             const firstLoginEvent: Promise<void> = new Promise((resolve) => {
@@ -956,9 +922,9 @@ describe("Lifecycle", () => {
             expect(stopSpy).toHaveBeenCalledTimes(1);
             // important the overwrite action should not call unset before replacing.
             // So spy on it and make sure it's not called.
-            jest.spyOn(MatrixClientPeg, "unset").mockReturnValue(undefined);
+            vi.spyOn(MatrixClientPeg, "unset").mockReturnValue(undefined);
 
-            expect(MatrixClientPeg.replaceUsingCreds).toHaveBeenCalledWith(
+            expect(createMatrixClientModule.createClientWithCreds).toHaveBeenCalledWith(
                 expect.objectContaining({
                     userId,
                 }),
@@ -992,7 +958,7 @@ describe("Lifecycle", () => {
             // the client should have been stopped
             expect(stopSpy).toHaveBeenCalledTimes(2);
 
-            expect(MatrixClientPeg.replaceUsingCreds).toHaveBeenCalledWith(
+            expect(createMatrixClientModule.createClientWithCreds).toHaveBeenCalledWith(
                 expect.objectContaining({
                     userId: otherCredentials.userId,
                 }),
diff --git a/apps/web/src/Lifecycle.ts b/apps/web/src/Lifecycle.ts
index 7ae860bf2a..e282483e5f 100644
--- a/apps/web/src/Lifecycle.ts
+++ b/apps/web/src/Lifecycle.ts
@@ -10,21 +10,14 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type ReactNode } from "react";
-import {
-    createClient,
-    type MatrixClient,
-    SSOAction,
-    type OidcTokenRefresher,
-    decodeBase64,
-} from "matrix-js-sdk/src/matrix";
+import { MatrixClient, OAuth2, createClient, SSOAction, decodeBase64 } from "matrix-js-sdk/src/matrix";
 import { type AESEncryptedSecretStoragePayload } from "matrix-js-sdk/src/types";
 import { logger } from "matrix-js-sdk/src/logger";
 
-import { type IMatrixClientCreds, MatrixClientPeg, type MatrixClientPegAssignOpts } from "./MatrixClientPeg";
+import { MatrixClientPeg, type MatrixClientPegAssignOpts } from "./MatrixClientPeg";
 import { ModuleRunner } from "./modules/ModuleRunner";
 import EventIndexPeg from "./indexing/EventIndexPeg";
-import createMatrixClient from "./utils/createMatrixClient";
-import Notifier from "./Notifier";
+import { createMatrixClient, createClientWithCreds, type IMatrixClientCreds } from "./utils/createMatrixClient";
 import UserActivity from "./UserActivity";
 import Presence from "./Presence";
 import dis from "./dispatcher/dispatcher";
@@ -45,7 +38,6 @@ import { Jitsi } from "./widgets/Jitsi";
 import { SSO_HOMESERVER_URL_KEY, SSO_ID_SERVER_URL_KEY, SSO_IDP_ID_KEY } from "./BasePlatform";
 import ThreepidInviteStore from "./stores/ThreepidInviteStore";
 import { PosthogAnalytics } from "./PosthogAnalytics";
-import LegacyCallHandler from "./LegacyCallHandler";
 import LifecycleCustomisations from "./customisations/Lifecycle";
 import ErrorDialog from "./components/views/dialogs/ErrorDialog";
 import { _t } from "./languageHandler";
@@ -56,31 +48,27 @@ import SdkConfig from "./SdkConfig";
 import { DialogOpener } from "./utils/DialogOpener";
 import { Action } from "./dispatcher/actions";
 import { type OverwriteLoginPayload } from "./dispatcher/payloads/OverwriteLoginPayload";
-import { SdkContextClass } from "./contexts/SDKContext";
+import { SDKContextClass } from "./contexts/SDKContextClass";
 import { messageForLoginError } from "./utils/ErrorUtils";
-import { completeOidcLogin } from "./utils/oidc/authorize";
-import { getOidcErrorMessage } from "./utils/oidc/error";
-import { type OidcClientStore } from "./stores/oidc/OidcClientStore";
-import {
-    getStoredOidcClientId,
-    getStoredOidcIdTokenClaims,
-    getStoredOidcTokenIssuer,
-    persistOidcAuthenticatedSettings,
-} from "./utils/oidc/persistOidcSettings";
+import { completeOAuthLogin, type CompleteOAuthLoginResponse } from "./utils/oauth/authorize";
+import { getOAuthErrorMessage } from "./utils/oauth/error";
+import { getOAuthParams, getStoredOAuthClientId, persistOAuthClientId } from "./utils/oauth/persistOAuthSettings";
 import {
     ACCESS_TOKEN_IV,
     ACCESS_TOKEN_STORAGE_KEY,
     HAS_ACCESS_TOKEN_STORAGE_KEY,
     HAS_REFRESH_TOKEN_STORAGE_KEY,
-    persistAccessTokenInStorage,
-    persistRefreshTokenInStorage,
+    persistTokens,
     REFRESH_TOKEN_IV,
     REFRESH_TOKEN_STORAGE_KEY,
     tryDecryptToken,
 } from "./utils/tokens/tokens";
-import { TokenRefresher } from "./utils/oidc/TokenRefresher";
 import { checkBrowserSupport } from "./SupportedBrowser";
 import { type URLParams } from "./vector/url_utils.ts";
+import { type OnLoggedInPayload } from "./dispatcher/payloads/OnLoggedInPayload.ts";
+import { filterBoolean } from "./utils/arrays.ts";
+import { CallStatusListener } from "./CallStatusListener.ts";
+import { CallStore } from "./stores/CallStore.ts";
 
 const HOMESERVER_URL_KEY = "mx_hs_url";
 const ID_SERVER_URL_KEY = "mx_is_url";
@@ -115,7 +103,10 @@ dis.register((payload) => {
  */
 let sessionLockStolen = false;
 
-// this is exposed solely for unit tests.
+/**
+ * this is exposed solely for unit tests.
+ * @knipignore
+ */
 export function setSessionLockNotStolen(): void {
     sessionLockStolen = false;
 }
@@ -261,7 +252,7 @@ export async function getStoredSessionOwner(): Promise<[string, boolean] | [null
 }
 
 /**
- * If query string includes OIDC authorization code flow parameters attempt to login using oidc flow
+ * If query string includes OAuth2 authorization code flow parameters attempt to login using oauth flow
  * Else, we may be returning from SSO - attempt token login
  *
  * @param urlParams the parameters read in at app load time from the url
@@ -277,60 +268,76 @@ export async function attemptDelegatedAuthLogin(
     defaultDeviceDisplayName?: string,
     fragmentAfterLogin?: string,
 ): Promise<boolean> {
-    if (urlParams.oidc_fragment) {
-        return attemptOidcNativeLogin(urlParams.oidc_fragment, "fragment");
-    } else if (urlParams.oidc_query) {
-        return attemptOidcNativeLogin(urlParams.oidc_query, "query");
+    if (urlParams.oauth2) {
+        return attemptOAuthLogin(urlParams.oauth2);
     }
 
     return attemptTokenLogin(urlParams["legacy_sso"], defaultDeviceDisplayName, fragmentAfterLogin);
 }
 
 /**
- * Attempt to login by completing OIDC authorization code flow
- * @param urlParams subset of app-load url parameters relating to oidc auth
- * @param responseMode - the response_mode used in the auth request
+ * Attempt to login by completing OAuth2 authorization code flow
+ * @param urlParams subset of app-load url parameters relating to oauth auth
  * @returns Promise that resolves to true when login succeeded, else false
  */
-async function attemptOidcNativeLogin(
-    urlParams: NonNullable<URLParams["oidc_fragment"]>,
-    responseMode: "fragment" | "query",
-): Promise<boolean> {
-    console.log("We have OIDC params - attempting OIDC login");
+async function attemptOAuthLogin(urlParams: NonNullable<URLParams["oauth2"]>): Promise<boolean> {
+    console.log("We have OAuth2 params - attempting login");
 
     try {
-        const { accessToken, refreshToken, homeserverUrl, identityServerUrl, idToken, clientId, issuer } =
-            await completeOidcLogin(urlParams, responseMode);
+        const { accessToken, refreshToken, homeserverUrl, identityServerUrl, clientId } =
+            await completeOAuthLogin(urlParams);
 
-        const {
-            user_id: userId,
-            device_id: deviceId,
-            is_guest: isGuest,
-        } = await getUserIdFromAccessToken(accessToken, homeserverUrl, identityServerUrl);
-
-        const credentials = {
+        await configureFromCompletedOAuthLogin({
             accessToken,
             refreshToken,
             homeserverUrl,
             identityServerUrl,
-            deviceId,
-            userId,
-            isGuest,
-        };
+            clientId,
+        });
 
-        logger.debug("Logged in via OIDC native flow");
-        await onSuccessfulDelegatedAuthLogin(credentials);
-        // this needs to happen after success handler which clears storages
-        persistOidcAuthenticatedSettings(clientId, issuer, idToken);
         return true;
     } catch (error) {
-        logger.error("Failed to login via OIDC", error);
+        logger.error("Failed to login via OAuth", error);
 
-        onFailedDelegatedAuthLogin(getOidcErrorMessage(error as Error));
+        onFailedDelegatedAuthLogin(getOAuthErrorMessage(error as Error));
         return false;
     }
 }
 
+/**
+ * Exchange the given OAuth2 credentials for {@link IMatrixClientCreds}, additionally persisting them to storage.
+ * @param creds the credentials from the OAuth2 flow
+ */
+export async function configureFromCompletedOAuthLogin({
+    accessToken,
+    refreshToken,
+    homeserverUrl,
+    identityServerUrl,
+    clientId,
+}: CompleteOAuthLoginResponse): Promise<IMatrixClientCreds> {
+    const {
+        user_id: userId,
+        device_id: deviceId,
+        is_guest: isGuest,
+    } = await getUserIdFromAccessToken(accessToken, homeserverUrl, identityServerUrl);
+
+    const credentials = {
+        accessToken,
+        refreshToken,
+        homeserverUrl,
+        identityServerUrl,
+        deviceId,
+        userId,
+        isGuest,
+    };
+
+    logger.debug("Logged in via OAuth2 native flow");
+    await onSuccessfulDelegatedAuthLogin(credentials);
+    // this needs to happen after success handler which clears storages
+    persistOAuthClientId(clientId);
+    return credentials;
+}
+
 /**
  * Gets information about the owner of a given access token.
  * @param accessToken
@@ -450,7 +457,7 @@ async function loadOrCreatePickleKey(credentials: IMatrixClientCreds): Promise<s
 }
 
 /**
- * Called after a successful token login or OIDC authorization.
+ * Called after a successful token login or OAuth2 authorization.
  * Clear storage then save new credentials in storage
  * @param credentials as returned from login
  */
@@ -467,7 +474,7 @@ async function onSuccessfulDelegatedAuthLogin(credentials: IMatrixClientCreds):
 type TryAgainFunction = () => void;
 
 /**
- * Display a friendly error to the user when token login or OIDC authorization fails
+ * Display a friendly error to the user when token login or OAuth2 authorization fails
  * @param description error description
  * @param tryAgain OPTIONAL function to call on try again button from error dialog
  */
@@ -702,9 +709,9 @@ async function handleLoadSessionFailure(e: unknown, loadSessionOpts?: ILoadSessi
  * Also stops the old MatrixClient and clears old credentials/etc out of
  * storage before starting the new client.
  *
- * This function does not work for OIDC login.
+ * This function does not work for OAuth2 login.
  * Storage is cleared early in the process so the required data is lost.
- * You must use {@link attemptDelegatedAuthLogin} followed by {@link restoreSessionFromStorage} for OIDC login.
+ * You must use {@link attemptDelegatedAuthLogin} followed by {@link restoreSessionFromStorage} for OAuth2 login.
  *
  * @param {IMatrixClientCreds} credentials The credentials to use
  *
@@ -754,44 +761,6 @@ export async function hydrateSession(credentials: IMatrixClientCreds): Promise<M
     return doSetLoggedIn(credentials, overwrite, false);
 }
 
-/**
- * When we have a authenticated via OIDC-native flow and have a refresh token
- * try to create a token refresher.
- * @param credentials from current session
- * @param clientId OIDC client ID
- * @throws If credentials.refreshToken or credentials.deviceId is falsy, or if no token issuer is stored
- * @returns Promise that resolves to a TokenRefresher
- */
-async function createOidcTokenRefresher(
-    credentials: IMatrixClientCreds,
-    clientId: string,
-): Promise<OidcTokenRefresher> {
-    if (!credentials.refreshToken) {
-        throw new Error("A refresh token must be supplied in order to create an OIDC token refresher.");
-    }
-    // stored token issuer indicates we authenticated via OIDC-native flow
-    const tokenIssuer = getStoredOidcTokenIssuer();
-    if (!tokenIssuer) {
-        throw new Error("Cannot create an OIDC token refresher as no stored OIDC token issuer was found.");
-    }
-
-    const idTokenClaims = getStoredOidcIdTokenClaims();
-    const redirectUri = PlatformPeg.get()!.getOidcCallbackUrl().href;
-    const deviceId = credentials.deviceId;
-    if (!deviceId) {
-        throw new Error("Expected deviceId in user credentials.");
-    }
-    const tokenRefresher = new TokenRefresher(
-        tokenIssuer,
-        clientId,
-        redirectUri,
-        deviceId,
-        idTokenClaims!,
-        credentials.userId,
-    );
-    return tokenRefresher;
-}
-
 /**
  * optionally clears localstorage, persists new credentials
  * to localstorage, starts the new client.
@@ -841,21 +810,14 @@ async function doSetLoggedIn(
         await abortLogin();
     }
 
-    let storedClientid;
+    let auth: OAuth2 | undefined;
     try {
-        storedClientid = getStoredOidcClientId();
+        auth = await hydrateAuth(credentials);
     } catch {}
 
-    let tokenRefresher;
-    if (credentials.refreshToken && storedClientid) {
-        tokenRefresher = await createOidcTokenRefresher(credentials, storedClientid);
-    } else {
-        logger.debug("No refresh token was supplied: access token will not be refreshed");
-    }
-
     // check the session lock just before creating the new client
     checkSessionLock();
-    MatrixClientPeg.replaceUsingCreds(credentials, tokenRefresher?.doRefreshAccessToken.bind(tokenRefresher));
+    MatrixClientPeg.set(createClientWithCreds(credentials, auth));
     const client = MatrixClientPeg.safeGet();
 
     setSentryUser(credentials.userId);
@@ -877,9 +839,9 @@ async function doSetLoggedIn(
     }
     checkSessionLock();
 
-    // We are now logged in, so fire this. We have yet to start the client but the
-    // client_started dispatch is for that.
-    dis.fire(Action.OnLoggedIn);
+    // We are now logged in, so fire this. We have yet to start the client but the client_started dispatch is for that.
+    // Dispatch this synchronously so SDKContextClass can set the client for other modules to consume.
+    dis.dispatch<OnLoggedInPayload>({ action: Action.OnLoggedIn, client }, true);
 
     const clientPegOpts: MatrixClientPegAssignOpts = {};
     if (credentials.pickleKey) {
@@ -928,8 +890,7 @@ async function persistCredentials(credentials: IMatrixClientCreds): Promise<void
     localStorage.setItem("mx_user_id", credentials.userId);
     localStorage.setItem("mx_is_guest", JSON.stringify(credentials.guest));
 
-    await persistAccessTokenInStorage(credentials.accessToken, credentials.pickleKey);
-    await persistRefreshTokenInStorage(credentials.refreshToken, credentials.pickleKey);
+    await persistTokens(credentials.pickleKey, credentials);
 
     if (credentials.pickleKey) {
         localStorage.setItem("mx_has_pickle_key", String(true));
@@ -957,17 +918,25 @@ let _isLoggingOut = false;
 
 /**
  * Logs out the current session.
- * When user has authenticated using OIDC native flow revoke tokens with OIDC provider.
+ * When user has authenticated using OAuth2 native flow revoke tokens with OAuth2 provider.
  * Otherwise, call /logout on the homeserver.
  * @param client
- * @param oidcClientStore
+ * @param oauth
  */
-async function doLogout(client: MatrixClient, oidcClientStore?: OidcClientStore): Promise<void> {
-    if (oidcClientStore?.isUserAuthenticatedWithOidc) {
-        const accessToken = client.getAccessToken() ?? undefined;
-        const refreshToken = client.getRefreshToken() ?? undefined;
+async function doLogout(client: MatrixClient, oauth: OAuth2 | null): Promise<void> {
+    if (oauth) {
+        const accessToken = client.getAccessToken();
+        const refreshToken = client.getRefreshToken();
 
-        await oidcClientStore.revokeTokens(accessToken, refreshToken);
+        await Promise.all(
+            filterBoolean([
+                accessToken ? oauth.revokeToken(accessToken, "access_token") : null,
+                refreshToken ? oauth.revokeToken(refreshToken, "refresh_token") : null,
+            ]),
+        );
+
+        client.stopClient();
+        client.http.abort();
     } else {
         await client.logout(true);
     }
@@ -975,12 +944,21 @@ async function doLogout(client: MatrixClient, oidcClientStore?: OidcClientStore)
 
 /**
  * Logs the current session out and transitions to the logged-out state
- * @param oidcClientStore store instance from SDKContext
  */
-export function logout(oidcClientStore?: OidcClientStore): void {
+export async function logout(): Promise<void> {
     const client = MatrixClientPeg.get();
     if (!client) return;
 
+    let oauth: OAuth2 | undefined;
+    try {
+        oauth = await hydrateAuth({
+            homeserverUrl: client.getHomeserverUrl(),
+            deviceId: client.getDeviceId()!,
+        });
+    } catch {
+        // This is fine
+    }
+
     PosthogAnalytics.instance.logout();
 
     if (client.isGuest()) {
@@ -994,7 +972,7 @@ export function logout(oidcClientStore?: OidcClientStore): void {
     _isLoggingOut = true;
     PlatformPeg.get()?.destroyPickleKey(client.getSafeUserId(), client.getDeviceId() ?? "");
 
-    doLogout(client, oidcClientStore).then(onLoggedOut, (err) => {
+    doLogout(client, oauth ?? null).then(onLoggedOut, (err) => {
         // Just throwing an error here is going to be very unhelpful
         // if you're trying to log out because your server's down and
         // you want to log into a different server, so just forget the
@@ -1064,16 +1042,16 @@ async function startMatrixClient(
     dis.dispatch({ action: Action.WillStartClient }, true);
 
     // reset things first just in case
-    SdkContextClass.instance.typingStore.reset();
+    SDKContextClass.instance.typingStore.reset();
     ToastStore.sharedInstance().reset();
 
     DialogOpener.instance.prepare(client);
-    Notifier.start();
+    SDKContextClass.instance.notifier.start();
     UserActivity.sharedInstance().start();
     DMRoomMap.makeShared(client).start();
     IntegrationManagers.sharedInstance().startWatching();
     ActiveWidgetStore.instance.start();
-    LegacyCallHandler.instance.start();
+    SDKContextClass.instance.legacyCallHandler.start();
     checkBrowserSupport();
 
     // Start Mjolnir even though we haven't checked the feature flag yet. Starting
@@ -1096,6 +1074,9 @@ async function startMatrixClient(
 
     // This needs to be started after crypto is set up
     DeviceListener.sharedInstance().start(client);
+
+    CallStatusListener.sharedInstance().start(CallStore.instance, client);
+
     // Similarly, don't start sending presence updates until we've started
     // the client
     if (!SettingsStore.getValue("lowBandwidth")) {
@@ -1199,15 +1180,16 @@ export async function clearStorage(opts?: { deleteEverything?: boolean }): Promi
  * on MatrixClientPeg after stopping.
  */
 export function stopMatrixClient(unsetClient = true): void {
-    Notifier.stop();
-    LegacyCallHandler.instance.stop();
+    SDKContextClass.instance.legacyCallHandler.stop();
+    SDKContextClass.instance.notifier.stop();
     UserActivity.sharedInstance().stop();
-    SdkContextClass.instance.typingStore.reset();
+    SDKContextClass.instance.typingStore.reset();
     Presence.stop();
     ActiveWidgetStore.instance.stop();
     IntegrationManagers.sharedInstance().stopWatching();
     Mjolnir.sharedInstance().stop();
     DeviceListener.sharedInstance().stop();
+    CallStatusListener.sharedInstance().stop();
     DMRoomMap.shared()?.stop();
     EventIndexPeg.stop();
     const cli = MatrixClientPeg.get();
@@ -1241,3 +1223,18 @@ window.mxLoginWithAccessToken = async (hsUrl: string, accessToken: string): Prom
         false,
     );
 };
+
+/**
+ * Instantiate an OAuth2 instance from storage
+ * Returned promise will reject if the session or the server are not OAuth2-native.
+ */
+export async function hydrateAuth(
+    credentials: Pick<IMatrixClientCreds, "homeserverUrl" | "deviceId">,
+): Promise<OAuth2> {
+    const storedClientId = getStoredOAuthClientId();
+
+    const tempClient = new MatrixClient({ baseUrl: credentials.homeserverUrl });
+    const authMetadata = await tempClient.getAuthMetadata();
+
+    return new OAuth2(authMetadata, { ...getOAuthParams(storedClientId), deviceId: credentials.deviceId });
+}
diff --git a/apps/web/src/Linkify.ts b/apps/web/src/Linkify.ts
index fdb51a86d6..939c561e56 100644
--- a/apps/web/src/Linkify.ts
+++ b/apps/web/src/Linkify.ts
@@ -102,7 +102,6 @@ export const transformTags: NonNullable<IOptions["transformTags"]> = {
         }
         return { tagName, attribs };
     },
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     "*": function (tagName: string, attribs: sanitizeHtml.Attributes) {
         // Delete any style previously assigned, style is an allowedTag for font, span & img,
         // because attributes are stripped after transforming.
@@ -369,6 +368,8 @@ export const LinkedTextConfiguration = {
     urlTargetTransformer: urlTargetTransformFunction,
 };
 
+type LinkifyOpts = Parameters<typeof _linkifyString>[1];
+
 /**
  * Linkifies the given string. This is a wrapper around 'linkifyjs/string'.
  *
@@ -376,7 +377,10 @@ export const LinkedTextConfiguration = {
  * @param [options] Options for linkifyString.
  * @returns Linkified string
  */
-export function linkifyString(value: string, options = generateLinkedTextOptions(LinkedTextConfiguration)): string {
+export function linkifyString(
+    value: string,
+    options: LinkifyOpts = generateLinkedTextOptions(LinkedTextConfiguration),
+): string {
     return _linkifyString(value, options);
 }
 
@@ -387,7 +391,10 @@ export function linkifyString(value: string, options = generateLinkedTextOptions
  * @param [options] Options for linkifyHtml.
  * @returns Linkified string
  */
-export function linkifyHtml(value: string, options = generateLinkedTextOptions(LinkedTextConfiguration)): string {
+export function linkifyHtml(
+    value: string,
+    options: LinkifyOpts = generateLinkedTextOptions(LinkedTextConfiguration),
+): string {
     return _linkifyHtml(value, options);
 }
 
@@ -400,7 +407,7 @@ export function linkifyHtml(value: string, options = generateLinkedTextOptions(L
  */
 export function linkifyAndSanitizeHtml(
     dirtyHtml: string,
-    options = generateLinkedTextOptions(LinkedTextConfiguration),
+    options: LinkifyOpts = generateLinkedTextOptions(LinkedTextConfiguration),
 ): string {
     return sanitizeHtml(linkifyString(dirtyHtml, options), sanitizeHtmlParams);
 }
diff --git a/apps/web/src/Login.ts b/apps/web/src/Login.ts
index 34b6513ad1..388eb3e95a 100644
--- a/apps/web/src/Login.ts
+++ b/apps/web/src/Login.ts
@@ -11,43 +11,43 @@ import {
     createClient,
     type MatrixClient,
     type LoginFlow,
-    DELEGATED_OIDC_COMPATIBILITY,
+    OAUTH_AWARE_PREFERRED_FLOW_FIELD,
     type ILoginFlow,
     type LoginRequest,
-    type OidcClientConfig,
+    type ValidatedAuthMetadata,
     type ISSOFlow,
 } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 
-import { type IMatrixClientCreds } from "./MatrixClientPeg";
+import { type IMatrixClientCreds } from "./utils/createMatrixClient";
 import { ModuleRunner } from "./modules/ModuleRunner";
-import { getOidcClientId } from "./utils/oidc/registerClient";
+import { getOAuthClientId } from "./utils/oauth/registerClient";
 import { type IConfigOptions } from "./IConfigOptions";
 import SdkConfig from "./SdkConfig";
-import { isUserRegistrationSupported } from "./utils/oidc/isUserRegistrationSupported";
+import { isUserRegistrationSupported } from "./utils/oauth/isUserRegistrationSupported";
 
 /**
  * Login flows supported by this client
  * LoginFlow type use the client API /login endpoint
- * OidcNativeFlow is specific to this client
+ * OAuthNativeFlow is specific to this client
  */
-export type ClientLoginFlow = LoginFlow | OidcNativeFlow;
+export type ClientLoginFlow = LoginFlow | OAuthNativeFlow;
 
 interface ILoginOptions {
     defaultDeviceDisplayName?: string;
     /**
      * Delegated auth config from server's .well-known.
      *
-     * If this property is set, we will attempt an OIDC login using the delegated auth settings.
-     * The caller is responsible for checking that OIDC is enabled in the labs settings.
+     * If this property is set, we will attempt an OAuth2 login using the delegated auth settings.
+     * The caller is responsible for checking that OAuth2 is enabled in the labs settings.
      */
-    delegatedAuthentication?: OidcClientConfig;
+    delegatedAuthentication?: ValidatedAuthMetadata;
 }
 
 export default class Login {
     private flows: Array<ClientLoginFlow> = [];
     private readonly defaultDeviceDisplayName?: string;
-    private delegatedAuthentication?: OidcClientConfig;
+    private delegatedAuthentication?: ValidatedAuthMetadata;
     private tempClient: MatrixClient | null = null; // memoize
 
     public constructor(
@@ -82,7 +82,7 @@ export default class Login {
      * Set delegated authentication config, clears tempClient.
      * @param delegatedAuthentication delegated auth config, from ValidatedServerConfig
      */
-    public setDelegatedAuthentication(delegatedAuthentication?: OidcClientConfig): void {
+    public setDelegatedAuthentication(delegatedAuthentication?: ValidatedAuthMetadata): void {
         this.tempClient = null; // clear memoization
         this.delegatedAuthentication = delegatedAuthentication;
     }
@@ -108,29 +108,29 @@ export default class Login {
      * @returns Promise that resolves to supported login flows
      */
     public async getFlows(isRegistration?: boolean): Promise<Array<ClientLoginFlow>> {
-        // try to use oidc native flow if we have delegated auth config
+        // try to use oauth2 native flow if we have delegated auth config
         if (this.delegatedAuthentication) {
             try {
-                const oidcFlow = await tryInitOidcNativeFlow(
+                const oauthFlow = await tryInitOAuthNativeFlow(
                     this.delegatedAuthentication,
                     SdkConfig.get().oidc_static_clients,
                     isRegistration,
                 );
-                return [oidcFlow];
+                return [oauthFlow];
             } catch (error) {
-                logger.error("Failed to get oidc native flow", error);
+                logger.error("Failed to get OAuth2 native flow", error);
             }
         }
 
-        // oidc native flow not supported, continue with matrix login
+        // OAuth2 native flow not supported, continue with matrix login
         const client = this.createTemporaryClient();
         const { flows }: { flows: LoginFlow[] } = await client.loginFlows();
-        // If an m.login.sso flow is present which is also flagged as being for MSC3824 OIDC compatibility then we only
+        // If an m.login.sso flow is present which is also flagged as being for MSC3824 OAuth compatibility then we only
         // return that flow as (per MSC3824) it is the only one that the user should be offered to give the best experience
-        const oidcCompatibilityFlow = flows.find(
-            (f) => f.type === "m.login.sso" && DELEGATED_OIDC_COMPATIBILITY.findIn(f as ISSOFlow),
+        const oauthCompatibilityFlow = flows.find(
+            (f) => f.type === "m.login.sso" && OAUTH_AWARE_PREFERRED_FLOW_FIELD.findIn(f as ISSOFlow),
         );
-        this.flows = oidcCompatibilityFlow ? [oidcCompatibilityFlow] : flows;
+        this.flows = oauthCompatibilityFlow ? [oauthCompatibilityFlow] : flows;
         return this.flows;
     }
 
@@ -199,42 +199,42 @@ export default class Login {
 }
 
 /**
- * Describes the OIDC native login flow
+ * Describes the OAuth2 native login flow
  * Separate from js-sdk's `LoginFlow` as this does not use the same /login flow
  * to which that type belongs.
  */
-export interface OidcNativeFlow extends ILoginFlow {
-    type: "oidcNativeFlow";
-    // this client's id as registered with the configured OIDC OP
+export interface OAuthNativeFlow extends ILoginFlow {
+    type: "oauthNativeFlow";
+    // this client's id as registered with the configured OAuth2 OP
     clientId: string;
 }
 /**
- * Prepares an OidcNativeFlow for logging into the server.
+ * Prepares an OAuthNativeFlow for logging into the server.
  *
  * Finds a static clientId for configured issuer, or attempts dynamic registration with the OP, and wraps the
  * results.
  *
  * @param delegatedAuthConfig  Auth config from ValidatedServerConfig
- * @param staticOidcClientIds static client config from config.json, used during client registration with OP
+ * @param staticOAuthClientIds static client config from config.json, used during client registration with OP
  * @param isRegistration true when we are attempting registration
- * @returns Promise<OidcNativeFlow> when oidc native authentication flow is supported and correctly configured
+ * @returns Promise<OAuthNativeFlow> when oauth native authentication flow is supported and correctly configured
  * @throws when client can't register with OP, or any unexpected error
  */
-const tryInitOidcNativeFlow = async (
-    delegatedAuthConfig: OidcClientConfig,
-    staticOidcClientIds?: IConfigOptions["oidc_static_clients"],
+const tryInitOAuthNativeFlow = async (
+    delegatedAuthConfig: ValidatedAuthMetadata,
+    staticOAuthClientIds?: IConfigOptions["oidc_static_clients"],
     isRegistration?: boolean,
-): Promise<OidcNativeFlow> => {
+): Promise<OAuthNativeFlow> => {
     // if registration is not supported, bail before attempting to get the clientId
     if (isRegistration && !isUserRegistrationSupported(delegatedAuthConfig)) {
         throw new Error("Registration is not supported by OP");
     }
-    const clientId = await getOidcClientId(delegatedAuthConfig, staticOidcClientIds);
+    const clientId = await getOAuthClientId(delegatedAuthConfig, staticOAuthClientIds);
 
     const flow = {
-        type: "oidcNativeFlow",
+        type: "oauthNativeFlow",
         clientId,
-    } as OidcNativeFlow;
+    } as OAuthNativeFlow;
 
     return flow;
 };
diff --git a/apps/web/test/unit-tests/Markdown-test.ts b/apps/web/src/Markdown.test.ts
similarity index 95%
rename from apps/web/test/unit-tests/Markdown-test.ts
rename to apps/web/src/Markdown.test.ts
index 4cfb165ea9..507ef943d6 100644
--- a/apps/web/test/unit-tests/Markdown-test.ts
+++ b/apps/web/src/Markdown.test.ts
@@ -6,7 +6,9 @@ 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 Markdown from "../../src/Markdown";
+import { describe, it, expect } from "vitest";
+
+import Markdown from "./Markdown";
 
 describe("Markdown parser test", () => {
     describe("fixing HTML links", () => {
@@ -33,7 +35,6 @@ describe("Markdown parser test", () => {
         ].join("\n");
 
         it("tests that links with markdown empasis in them are getting properly HTML formatted", () => {
-            /* eslint-disable max-len */
             const expectedResult = [
                 "<p>Test1:<br />#_foonetic_xkcd:matrix.org<br />http://google.com/_thing_<br />https://matrix.org/_matrix/client/foo/123_<br />#_foonetic_xkcd:matrix.org</p>",
                 "<p>Test1A:<br />#_foonetic_xkcd:matrix.org<br />http://google.com/_thing_<br />https://matrix.org/_matrix/client/foo/123_<br />#_foonetic_xkcd:matrix.org</p>",
@@ -41,7 +42,6 @@ describe("Markdown parser test", () => {
                 "<p>Test3:<br />https://riot.im/app/#/room/#_foonetic_xkcd:matrix.org<br />https://riot.im/app/#/room/#_foonetic_xkcd:matrix.org</p>",
                 "",
             ].join("\n");
-            /* eslint-enable max-len */
             const md = new Markdown(testString);
             expect(md.toHTML()).toEqual(expectedResult);
         });
@@ -67,7 +67,6 @@ describe("Markdown parser test", () => {
                 "<https://riot.im/app/#/room/#_foonetic_xkcd:matrix.org>",
                 "<https://riot.im/app/#/room/#_foonetic_xkcd:matrix.org>",
             ].join("\n");
-            /* eslint-disable max-len */
             /**
              * NOTE: I'm not entirely sure if those "<"" and ">" should be visible in here for #_foonetic_xkcd:matrix.org
              * but it seems to be actually working properly
@@ -79,7 +78,6 @@ describe("Markdown parser test", () => {
                 '<p>Test3:<br /><a href="https://riot.im/app/#/room/#_foonetic_xkcd:matrix.org">https://riot.im/app/#/room/#_foonetic_xkcd:matrix.org</a><br /><a href="https://riot.im/app/#/room/#_foonetic_xkcd:matrix.org">https://riot.im/app/#/room/#_foonetic_xkcd:matrix.org</a></p>',
                 "",
             ].join("\n");
-            /* eslint-enable max-len */
             const md = new Markdown(test);
             expect(md.toHTML()).toEqual(expectedResult);
         });
@@ -112,7 +110,6 @@ describe("Markdown parser test", () => {
         });
 
         it('expects that links with emphasis are "escaped" correctly', () => {
-            /* eslint-disable max-len */
             const testString = [
                 "http://domain.xyz/foo/bar-_stuff-like-this_-in-it.jpg" +
                     " " +
@@ -137,22 +134,18 @@ describe("Markdown parser test", () => {
                 "https://example.com/_test__test2_test3__",
                 "https://example.com/_test__test2",
             ].join("<br />");
-            /* eslint-enable max-len */
             const md = new Markdown(testString);
             expect(md.toHTML()).toEqual(expectedResult);
         });
 
         it("expects that the link part will not be accidentally added to <strong>", () => {
-            /* eslint-disable max-len */
             const testString = `https://github.com/matrix-org/synapse/blob/develop/synapse/module_api/__init__.py`;
             const expectedResult = "https://github.com/matrix-org/synapse/blob/develop/synapse/module_api/__init__.py";
-            /* eslint-enable max-len */
             const md = new Markdown(testString);
             expect(md.toHTML()).toEqual(expectedResult);
         });
 
         it("expects that the link part will not be accidentally added to <strong> for multiline links", () => {
-            /* eslint-disable max-len */
             const testString = [
                 "https://github.com/matrix-org/synapse/blob/develop/synapse/module_api/__init__.py" +
                     " " +
@@ -169,7 +162,6 @@ describe("Markdown parser test", () => {
                     " " +
                     "https://github.com/matrix-org/synapse/blob/develop/synapse/module_api/__init__.py",
             ].join("<br />");
-            /* eslint-enable max-len */
             const md = new Markdown(testString);
             expect(md.toHTML()).toEqual(expectedResult);
         });
diff --git a/apps/web/test/unit-tests/MatrixClientPeg-test.ts b/apps/web/src/MatrixClientPeg.test.ts
similarity index 60%
rename from apps/web/test/unit-tests/MatrixClientPeg-test.ts
rename to apps/web/src/MatrixClientPeg.test.ts
index aaee99fd61..4697a8aef8 100644
--- a/apps/web/test/unit-tests/MatrixClientPeg-test.ts
+++ b/apps/web/src/MatrixClientPeg.test.ts
@@ -6,25 +6,30 @@ 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.
 */
 
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
 import { logger } from "matrix-js-sdk/src/logger";
-import fetchMock from "@fetch-mock/jest";
+import { type MatrixClient } from "matrix-js-sdk/src/matrix";
+import fetchMock from "@fetch-mock/vitest";
+import { advanceDateAndTime, stubClient, createTestClient } from "test-utils";
 
-import { advanceDateAndTime, stubClient } from "../test-utils";
-import { type IMatrixClientPeg, MatrixClientPeg as peg } from "../../src/MatrixClientPeg";
+import { type IMatrixClientPeg, MatrixClientPeg as peg } from "./MatrixClientPeg";
+import SdkConfig from "./SdkConfig";
 
-jest.useFakeTimers();
+vi.useFakeTimers();
 
 const PegClass = Object.getPrototypeOf(peg).constructor;
 
 describe("MatrixClientPeg", () => {
     beforeEach(() => {
         // stub out Logger.log which gets called a lot and clutters up the test output
-        jest.spyOn(logger, "log").mockImplementation(() => {});
+        vi.spyOn(logger, "log").mockImplementation(() => {});
     });
 
     afterEach(() => {
         localStorage.clear();
-        jest.restoreAllMocks();
+        vi.restoreAllMocks();
 
         // some of the tests assign `MatrixClientPeg.matrixClient`: clear it, to prevent leakage between tests
         peg.unset();
@@ -70,16 +75,15 @@ describe("MatrixClientPeg", () => {
             // instantiate a MatrixClientPegClass instance, with a new MatrixClient
             testPeg = new PegClass();
             fetchMock.get("http://example.com/_matrix/client/versions", {});
-            testPeg.replaceUsingCreds({
-                accessToken: "SEKRET",
-                homeserverUrl: "http://example.com",
-                userId: "@user:example.com",
-                deviceId: "TEST_DEVICE_ID",
-            });
+
+            const mockClient = createTestClient();
+            mockClient.initRustCrypto = vi.fn();
+            mockClient.startClient = vi.fn();
+            testPeg.set(mockClient as unknown as MatrixClient);
         });
 
         it("should initialise the rust crypto library by default", async () => {
-            const mockInitRustCrypto = jest.spyOn(testPeg.safeGet(), "initRustCrypto").mockResolvedValue(undefined);
+            const mockInitRustCrypto = vi.spyOn(testPeg.safeGet(), "initRustCrypto").mockResolvedValue(undefined);
 
             const cryptoStoreKey = new Uint8Array([1, 2, 3, 4]);
             await testPeg.start({ rustCryptoStoreKey: cryptoStoreKey });
@@ -87,14 +91,14 @@ describe("MatrixClientPeg", () => {
         });
 
         it("should try to start dehydration if dehydration is enabled", async () => {
-            const mockInitRustCrypto = jest.spyOn(testPeg.safeGet(), "initRustCrypto").mockResolvedValue(undefined);
-            const mockStartDehydration = jest.fn();
-            jest.spyOn(testPeg.safeGet(), "getCrypto").mockReturnValue({
-                isDehydrationSupported: jest.fn().mockResolvedValue(true),
+            const mockInitRustCrypto = vi.spyOn(testPeg.safeGet(), "initRustCrypto").mockResolvedValue(undefined);
+            const mockStartDehydration = vi.fn();
+            vi.spyOn(testPeg.safeGet(), "getCrypto").mockReturnValue({
+                isDehydrationSupported: vi.fn().mockResolvedValue(true),
                 startDehydration: mockStartDehydration,
-                setDeviceIsolationMode: jest.fn(),
+                setDeviceIsolationMode: vi.fn(),
             } as any);
-            jest.spyOn(testPeg.safeGet(), "waitForClientWellKnown").mockResolvedValue({
+            vi.spyOn(testPeg.safeGet(), "waitForClientWellKnown").mockResolvedValue({
                 "m.homeserver": {
                     base_url: "http://example.com",
                 },
@@ -108,10 +112,35 @@ describe("MatrixClientPeg", () => {
         });
 
         it("Should migrate existing login", async () => {
-            const mockInitRustCrypto = jest.spyOn(testPeg.safeGet(), "initRustCrypto").mockResolvedValue(undefined);
+            const mockInitRustCrypto = vi.spyOn(testPeg.safeGet(), "initRustCrypto").mockResolvedValue(undefined);
 
             await testPeg.start();
             expect(mockInitRustCrypto).toHaveBeenCalledTimes(1);
         });
+
+        it("should poll the client well-known by default", async () => {
+            vi.spyOn(testPeg.safeGet(), "initRustCrypto").mockResolvedValue(undefined);
+            const startClient = vi.spyOn(testPeg.safeGet(), "startClient").mockResolvedValue(undefined);
+
+            await testPeg.start();
+
+            const opts = startClient.mock.calls[0][0];
+            expect(opts?.clientWellKnownPollPeriod).toBe(2 * 60 * 60);
+        });
+
+        it("should not poll the client well-known when enable_client_well_known_lookups is false", async () => {
+            const sdkConfigGet = SdkConfig.get;
+            vi.spyOn(SdkConfig, "get").mockImplementation((key?: any, altCaseName?: string): any => {
+                if (key === "enable_client_well_known_lookups") return false;
+                return sdkConfigGet(key, altCaseName);
+            });
+            vi.spyOn(testPeg.safeGet(), "initRustCrypto").mockResolvedValue(undefined);
+            const startClient = vi.spyOn(testPeg.safeGet(), "startClient").mockResolvedValue(undefined);
+
+            await testPeg.start();
+
+            const opts = startClient.mock.calls[0][0];
+            expect(opts?.clientWellKnownPollPeriod).toBeUndefined();
+        });
     });
 });
diff --git a/apps/web/src/MatrixClientPeg.ts b/apps/web/src/MatrixClientPeg.ts
index 5f8125be67..aaf78fe791 100644
--- a/apps/web/src/MatrixClientPeg.ts
+++ b/apps/web/src/MatrixClientPeg.ts
@@ -9,52 +9,24 @@ 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 {
-    EventTimeline,
-    EventTimelineSet,
-    type ICreateClientOpts,
-    type IStartClientOpts,
-    type MatrixClient,
-    MemoryStore,
-    PendingEventOrdering,
-    type RoomNameState,
-    RoomNameType,
-    type TokenRefreshFunction,
-} from "matrix-js-sdk/src/matrix";
-import { VerificationMethod } from "matrix-js-sdk/src/types";
+import { type IStartClientOpts, type MatrixClient, MemoryStore, PendingEventOrdering } from "matrix-js-sdk/src/matrix";
 import * as utils from "matrix-js-sdk/src/utils";
 import { logger } from "matrix-js-sdk/src/logger";
 
-import createMatrixClient from "./utils/createMatrixClient";
 import SettingsStore from "./settings/SettingsStore";
 import MatrixActionCreators from "./actions/MatrixActionCreators";
 import Modal from "./Modal";
 import MatrixClientBackedSettingsHandler from "./settings/handlers/MatrixClientBackedSettingsHandler";
 import * as StorageManager from "./utils/StorageManager";
-import IdentityAuthClient from "./IdentityAuthClient";
-import { crossSigningCallbacks } from "./SecurityManager";
 import { SlidingSyncManager } from "./SlidingSyncManager";
 import { _t, UserFriendlyError } from "./languageHandler";
 import MatrixClientBackedController from "./settings/controllers/MatrixClientBackedController";
 import ErrorDialog from "./components/views/dialogs/ErrorDialog";
 import PlatformPeg from "./PlatformPeg";
-import { formatList } from "./utils/FormattingUtils";
 import SdkConfig from "./SdkConfig";
 import { setDeviceIsolationMode } from "./settings/controllers/DeviceIsolationModeController.ts";
 import { initialiseDehydrationIfEnabled } from "./utils/device/dehydration";
 
-export interface IMatrixClientCreds {
-    homeserverUrl: string;
-    identityServerUrl?: string;
-    userId: string;
-    deviceId?: string;
-    accessToken: string;
-    refreshToken?: string;
-    guest?: boolean;
-    pickleKey?: string;
-    freshLogin?: boolean;
-}
-
 export interface MatrixClientPegAssignOpts {
     /**
      * If we are using Rust crypto, a key with which to encrypt the indexeddb.
@@ -98,6 +70,12 @@ export interface IMatrixClientPeg {
      */
     safeGet(): MatrixClient;
 
+    /**
+     * Sets the current MatrixClient.
+     * @param client The MatrixClient instance to set
+     */
+    set(client: MatrixClient): void;
+
     /**
      * Unset the current MatrixClient
      */
@@ -142,16 +120,6 @@ export interface IMatrixClientPeg {
      * returns a boolean of whether it was after a given timestamp.
      */
     userRegisteredAfter(date: Date): boolean;
-
-    /**
-     * Replace this MatrixClientPeg's client with a client instance that has
-     * homeserver / identity server URLs and active credentials
-     *
-     * @param {IMatrixClientCreds} creds The new credentials to use.
-     * @param {TokenRefreshFunction} tokenRefreshFunction OPTIONAL function used by MatrixClient to attempt token refresh
-     *          see {@link ICreateClientOpts.tokenRefreshFunction}
-     */
-    replaceUsingCreds(creds: IMatrixClientCreds, tokenRefreshFunction?: TokenRefreshFunction): void;
 }
 
 /**
@@ -183,6 +151,10 @@ class MatrixClientPegClass implements IMatrixClientPeg {
         return this.matrixClient;
     }
 
+    public set(client: MatrixClient): void {
+        this.matrixClient = client;
+    }
+
     public unset(): void {
         this.matrixClient = null;
 
@@ -224,10 +196,6 @@ class MatrixClientPegClass implements IMatrixClientPeg {
         }
     }
 
-    public replaceUsingCreds(creds: IMatrixClientCreds, tokenRefreshFunction?: TokenRefreshFunction): void {
-        this.createClient(creds, tokenRefreshFunction);
-    }
-
     private onUnexpectedStoreClose = async (): Promise<void> => {
         if (!this.matrixClient) return;
         this.matrixClient.stopClient(); // stop the client as the database has failed
@@ -295,10 +263,14 @@ class MatrixClientPegClass implements IMatrixClientPeg {
         // the react sdk doesn't work without this, so don't allow
         opts.pendingEventOrdering = PendingEventOrdering.Detached;
         opts.lazyLoadMembers = true;
-        opts.clientWellKnownPollPeriod = 2 * 60 * 60; // 2 hours
+        // Poll the user's `<server_name>/.well-known/matrix/client` for client config unless disabled by config.
+        // Leaving `clientWellKnownPollPeriod` unset stops the SDK fetching it.
+        if (SdkConfig.get("enable_client_well_known_lookups")) {
+            opts.clientWellKnownPollPeriod = 2 * 60 * 60; // 2 hours
+        }
         opts.threadSupport = true;
         if (SettingsStore.getValue("feature_user_status")) {
-            opts.unstableMSC4429SyncUserProfileFields = ["org.matrix.msc4426.status"];
+            opts.unstableMSC4429SyncUserProfileFields = ["org.matrix.msc4426.status", "org.matrix.msc4426.call"];
         }
 
         if (SettingsStore.getValue("feature_sliding_sync")) {
@@ -377,104 +349,6 @@ class MatrixClientPegClass implements IMatrixClientPeg {
         await this.matrixClient!.startClient(opts);
         logger.log(`MatrixClientPeg: MatrixClient started`);
     }
-
-    private namesToRoomName(names: string[], count: number): string | undefined {
-        const countWithoutMe = count - 1;
-        if (!names.length) {
-            return _t("empty_room");
-        }
-        if (names.length === 1 && countWithoutMe <= 1) {
-            return names[0];
-        }
-    }
-
-    private memberNamesToRoomName(names: string[], count: number): string {
-        const name = this.namesToRoomName(names, count);
-        if (name) return name;
-
-        if (names.length === 2 && count === 2) {
-            return formatList(names);
-        }
-        return formatList(names, 1);
-    }
-
-    private inviteeNamesToRoomName(names: string[], count: number): string {
-        const name = this.namesToRoomName(names, count);
-        if (name) return name;
-
-        if (names.length === 2 && count === 2) {
-            return _t("inviting_user1_and_user2", {
-                user1: names[0],
-                user2: names[1],
-            });
-        }
-        return _t("inviting_user_and_n_others", {
-            user: names[0],
-            count: count - 1,
-        });
-    }
-
-    private createClient(creds: IMatrixClientCreds, tokenRefreshFunction?: TokenRefreshFunction): void {
-        const opts: ICreateClientOpts = {
-            baseUrl: creds.homeserverUrl,
-            idBaseUrl: creds.identityServerUrl,
-            accessToken: creds.accessToken,
-            refreshToken: creds.refreshToken,
-            tokenRefreshFunction,
-            userId: creds.userId,
-            deviceId: creds.deviceId,
-            pickleKey: creds.pickleKey,
-            timelineSupport: true,
-            forceTURN: !SettingsStore.getValue("webRtcAllowPeerToPeer"),
-            fallbackICEServerAllowed: !!SettingsStore.getValue("fallbackICEServerAllowed"),
-            // Gather up to 20 ICE candidates when a call arrives: this should be more than we'd
-            // ever normally need, so effectively this should make all the gathering happen when
-            // the call arrives.
-            iceCandidatePoolSize: 20,
-            verificationMethods: [
-                VerificationMethod.Sas,
-                VerificationMethod.ShowQrCode,
-                VerificationMethod.Reciprocate,
-            ],
-            identityServer: new IdentityAuthClient(),
-            // These are always installed regardless of the labs flag so that cross-signing features
-            // can toggle on without reloading and also be accessed immediately after login.
-            cryptoCallbacks: { ...crossSigningCallbacks },
-            enableEncryptedStateEvents: SettingsStore.getValue("feature_msc4362_encrypted_state_events"),
-            roomNameGenerator: (_: string, state: RoomNameState) => {
-                switch (state.type) {
-                    case RoomNameType.Generated:
-                        switch (state.subtype) {
-                            case "Inviting":
-                                return this.inviteeNamesToRoomName(state.names, state.count);
-                            default:
-                                return this.memberNamesToRoomName(state.names, state.count);
-                        }
-                    case RoomNameType.EmptyRoom:
-                        if (state.oldName) {
-                            return _t("empty_room_was_name", {
-                                oldName: state.oldName,
-                            });
-                        } else {
-                            return _t("empty_room");
-                        }
-                    default:
-                        return null;
-                }
-            },
-        };
-
-        this.matrixClient = createMatrixClient(opts);
-        this.matrixClient.setGuest(Boolean(creds.guest));
-
-        const notifTimelineSet = new EventTimelineSet(undefined, {
-            timelineSupport: true,
-            pendingEvents: false,
-        });
-        // XXX: what is our initial pagination token?! it somehow needs to be synchronised with /sync.
-        notifTimelineSet.getLiveTimeline().setPaginationToken("", EventTimeline.BACKWARDS);
-        this.matrixClient.setNotifTimelineSet(notifTimelineSet);
-    }
 }
 
 /**
diff --git a/apps/web/test/unit-tests/MediaDeviceHandler-test.ts b/apps/web/src/MediaDeviceHandler.test.ts
similarity index 74%
rename from apps/web/test/unit-tests/MediaDeviceHandler-test.ts
rename to apps/web/src/MediaDeviceHandler.test.ts
index 975a3853db..5913fcf9a9 100644
--- a/apps/web/test/unit-tests/MediaDeviceHandler-test.ts
+++ b/apps/web/src/MediaDeviceHandler.test.ts
@@ -6,17 +6,19 @@ 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 { mocked } from "jest-mock";
+// @vitest-environment happy-dom
 
-import { SettingLevel } from "../../src/settings/SettingLevel";
-import { MatrixClientPeg } from "../../src/MatrixClientPeg";
-import { stubClient } from "../test-utils";
-import MediaDeviceHandler from "../../src/MediaDeviceHandler";
-import SettingsStore from "../../src/settings/SettingsStore";
+import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
+import { stubClient } from "test-utils";
 
-jest.mock("../../src/settings/SettingsStore");
+import { SettingLevel } from "./settings/SettingLevel";
+import { MatrixClientPeg } from "./MatrixClientPeg";
+import MediaDeviceHandler from "./MediaDeviceHandler";
+import SettingsStore from "./settings/SettingsStore";
 
-const SettingsStoreMock = mocked(SettingsStore);
+vi.mock("./settings/SettingsStore");
+
+const SettingsStoreMock = vi.mocked(SettingsStore);
 
 describe("MediaDeviceHandler", () => {
     beforeEach(() => {
@@ -24,7 +26,7 @@ describe("MediaDeviceHandler", () => {
     });
 
     afterEach(() => {
-        jest.clearAllMocks();
+        vi.clearAllMocks();
     });
 
     it("sets audio settings", async () => {
diff --git a/apps/web/src/MediaDeviceHandler.ts b/apps/web/src/MediaDeviceHandler.ts
index 7a50024d1a..461813c0b6 100644
--- a/apps/web/src/MediaDeviceHandler.ts
+++ b/apps/web/src/MediaDeviceHandler.ts
@@ -7,6 +7,7 @@ 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.
 */
 
+// oxlint-disable-next-line no-restricted-imports
 import EventEmitter from "events";
 import { logger } from "matrix-js-sdk/src/logger";
 
@@ -54,7 +55,7 @@ export default class MediaDeviceHandler extends EventEmitter {
      * (https://developer.mozilla.org/en-US/docs/Web/API/Permissions_API)
      * is ready for primetime, it might help make this simpler.
      *
-     * @return Promise<IMediaDevices> The available media devices
+     * @returns Promise<IMediaDevices> The available media devices
      */
     public static async getDevices(): Promise<IMediaDevices | undefined> {
         try {
diff --git a/apps/web/src/Modal.test.tsx b/apps/web/src/Modal.test.tsx
new file mode 100644
index 0000000000..ccc414276e
--- /dev/null
+++ b/apps/web/src/Modal.test.tsx
@@ -0,0 +1,44 @@
+/*
+Copyright 2026 Element Creations 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.
+*/
+
+// @vitest-environment happy-dom
+
+import React from "react";
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import { LinkedText } from "@element-hq/web-shared-components";
+import { screen } from "test-utils-rtl";
+import { flushPromises, stubClient } from "test-utils";
+import type { I18nApi } from "@element-hq/web-shared-components";
+
+import Modal from "./Modal";
+import { type ModuleApi } from "./modules/Api";
+
+function LinkedTextDialog({ onFinished }: { onFinished(): void }): React.JSX.Element {
+    return <LinkedText>Check out https://matrix.org for more info</LinkedText>;
+}
+
+describe("Modal", () => {
+    let originalMxModuleApi: ModuleApi;
+
+    beforeEach(() => {
+        stubClient();
+        // Required for the i18n context around the dialog to work.
+        originalMxModuleApi = window.mxModuleApi;
+        window.mxModuleApi = { i18n: {} as I18nApi } as ModuleApi;
+    });
+
+    afterEach(() => {
+        Modal.forceCloseAllModals();
+        window.mxModuleApi = originalMxModuleApi;
+    });
+
+    it("provides LinkedTextContext to dialogs rendered in the separate dialog root", async () => {
+        Modal.createDialog(LinkedTextDialog);
+        await flushPromises();
+        expect(screen.getByRole("link")).toBeInTheDocument();
+    });
+});
diff --git a/apps/web/src/Modal.tsx b/apps/web/src/Modal.tsx
index d92f83d7f1..79cf22859d 100644
--- a/apps/web/src/Modal.tsx
+++ b/apps/web/src/Modal.tsx
@@ -12,13 +12,15 @@ import { createRoot, type Root } from "react-dom/client";
 import classNames from "classnames";
 import { TypedEventEmitter } from "matrix-js-sdk/src/matrix";
 import { Glass, TooltipProvider } from "@vector-im/compound-web";
-import { I18nContext } from "@element-hq/web-shared-components";
+import { I18nContext, LinkedTextContext } from "@element-hq/web-shared-components";
 
 import defaultDispatcher from "./dispatcher/dispatcher";
 import AsyncWrapper from "./AsyncWrapper";
 import { type Defaultize } from "./@types/common";
 import { type ActionPayload } from "./dispatcher/payloads";
 import { filterBoolean } from "./utils/arrays.ts";
+import { SDKContext } from "./contexts/SDKContext.ts";
+import { LinkedTextConfiguration } from "./Linkify";
 
 const DIALOG_CONTAINER_ID = "mx_Dialog_Container";
 const STATIC_DIALOG_CONTAINER_ID = "mx_Dialog_StaticContainer";
@@ -185,7 +187,7 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
      * caused a chunk of tests to fail, so for now they continue to use this.
      *
      * @param reason either "backgroundClick" or undefined
-     * @return whether a modal was closed
+     * @returns whether a modal was closed
      */
     public closeCurrentModal(reason?: ModalCloseReason): boolean {
         const modal = this.getCurrentModal();
@@ -297,7 +299,7 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
     /**
      * @callback onBeforeClose
      * @param {string?} reason either "backgroundClick" or null
-     * @return {Promise<bool>} whether the dialog should close
+     * @returns {Promise<bool>} whether the dialog should close
      */
 
     /**
@@ -437,21 +439,27 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
 
             const staticDialog = (
                 <StrictMode>
-                    {/* Provide I18nContext for shared-components used inside dialogs rendered in a separate root. */}
-                    <I18nContext.Provider value={window.mxModuleApi.i18n}>
-                        <TooltipProvider>
-                            <div className={classes}>
-                                <Glass className="mx_Dialog_border">
-                                    <div className="mx_Dialog">{this.staticModal.elem}</div>
-                                </Glass>
-                                <div
-                                    data-testid="dialog-background"
-                                    className="mx_Dialog_background mx_Dialog_staticBackground"
-                                    onClick={this.onBackgroundClick}
-                                />
-                            </div>
-                        </TooltipProvider>
-                    </I18nContext.Provider>
+                    <SDKContext.Provider value={window.mxSdkContext}>
+                        {/* Provide I18nContext and LinkedTextContext for shared-components used inside dialogs rendered in a separate root. */}
+                        <I18nContext.Provider value={window.mxModuleApi.i18n}>
+                            <LinkedTextContext.Provider value={LinkedTextConfiguration}>
+                                <TooltipProvider>
+                                    <div className={classes}>
+                                        <Glass className="mx_Dialog_border">
+                                            <div className="mx_Dialog">{this.staticModal.elem}</div>
+                                        </Glass>
+                                        {/* We break the rule here as this is a mouse-only interaction */}
+                                        {/* oxlint-disable-next-line jsx-a11y/click-events-have-key-events */}
+                                        <div
+                                            data-testid="dialog-background"
+                                            className="mx_Dialog_background mx_Dialog_staticBackground"
+                                            onClick={this.onBackgroundClick}
+                                        />
+                                    </div>
+                                </TooltipProvider>
+                            </LinkedTextContext.Provider>
+                        </I18nContext.Provider>
+                    </SDKContext.Provider>
                 </StrictMode>
             );
 
@@ -469,21 +477,27 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
 
             const dialog = (
                 <StrictMode>
-                    {/* Provide I18nContext for shared-components used inside dialogs rendered in a separate root. */}
-                    <I18nContext.Provider value={window.mxModuleApi.i18n}>
-                        <TooltipProvider>
-                            <div className={classes}>
-                                <Glass className="mx_Dialog_border">
-                                    <div className="mx_Dialog">{modal.elem}</div>
-                                </Glass>
-                                <div
-                                    data-testid="dialog-background"
-                                    className="mx_Dialog_background"
-                                    onClick={this.onBackgroundClick}
-                                />
-                            </div>
-                        </TooltipProvider>
-                    </I18nContext.Provider>
+                    <SDKContext.Provider value={window.mxSdkContext}>
+                        {/* Provide I18nContext and LinkedTextContext for shared-components used inside dialogs rendered in a separate root. */}
+                        <I18nContext.Provider value={window.mxModuleApi.i18n}>
+                            <LinkedTextContext.Provider value={LinkedTextConfiguration}>
+                                <TooltipProvider>
+                                    <div className={classes}>
+                                        <Glass className="mx_Dialog_border">
+                                            <div className="mx_Dialog">{modal.elem}</div>
+                                        </Glass>
+                                        {/* We break the rule here as this is a mouse-only interaction */}
+                                        {/* oxlint-disable-next-line jsx-a11y/click-events-have-key-events */}
+                                        <div
+                                            data-testid="dialog-background"
+                                            className="mx_Dialog_background"
+                                            onClick={this.onBackgroundClick}
+                                        />
+                                    </div>
+                                </TooltipProvider>
+                            </LinkedTextContext.Provider>
+                        </I18nContext.Provider>
+                    </SDKContext.Provider>
                 </StrictMode>
             );
 
diff --git a/apps/web/src/Notifier.ts b/apps/web/src/Notifier.ts
index b7e2144132..14ad1a03a7 100644
--- a/apps/web/src/Notifier.ts
+++ b/apps/web/src/Notifier.ts
@@ -27,13 +27,10 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { type PermissionChanged as PermissionChangedEvent } from "@matrix-org/analytics-events/types/typescript/PermissionChanged";
 import { type SessionMembershipData, type IRTCNotificationContent } from "matrix-js-sdk/src/matrixrtc";
 
-import { MatrixClientPeg } from "./MatrixClientPeg";
-import { PosthogAnalytics } from "./PosthogAnalytics";
 import SdkConfig from "./SdkConfig";
 import PlatformPeg from "./PlatformPeg";
 import * as TextForEvent from "./TextForEvent";
 import * as Avatar from "./Avatar";
-import dis from "./dispatcher/dispatcher";
 import { _t } from "./languageHandler";
 import Modal from "./Modal";
 import SettingsStore from "./settings/SettingsStore";
@@ -43,12 +40,13 @@ import { isPushNotifyDisabled } from "./settings/controllers/NotificationControl
 import UserActivity from "./UserActivity";
 import { mediaFromMxc } from "./customisations/Media";
 import ErrorDialog from "./components/views/dialogs/ErrorDialog";
-import { SdkContextClass } from "./contexts/SDKContext";
+import { type SDKContextClass } from "./contexts/SDKContextClass.ts";
 import { localNotificationsAreSilenced, createLocalNotificationSettingsIfNeeded } from "./utils/notifications";
 import { getIncomingCallToastKey, getNotificationEventSendTs, IncomingCallToast } from "./toasts/IncomingCallToast";
 import ToastStore from "./stores/ToastStore";
 import { stripPlainReply } from "./utils/Reply";
 import { BackgroundAudio } from "./audio/BackgroundAudio";
+import { type MatrixDispatcher } from "./dispatcher/dispatcher.ts";
 
 /*
  * Dispatches:
@@ -60,26 +58,28 @@ import { BackgroundAudio } from "./audio/BackgroundAudio";
 
 const MAX_PENDING_ENCRYPTED = 20;
 
-/*
-Override both the content body and the TextForEvent handler for specific msgtypes, in notifications.
-This is useful when the content body contains fallback text that would explain that the client can't handle a particular
-type of tile.
-*/
-const msgTypeHandlers: Record<string, (event: MatrixEvent) => string | null> = {
-    [MsgType.KeyVerificationRequest]: (event: MatrixEvent) => {
-        const name = event.sender?.name;
-        return _t("notifier|m.key.verification.request", { name });
-    },
-    [M_LOCATION.name]: (event: MatrixEvent) => {
-        return TextForEvent.textForLocationEvent(event)();
-    },
-    [M_LOCATION.altName]: (event: MatrixEvent) => {
-        return TextForEvent.textForLocationEvent(event)();
-    },
-    [MsgType.Audio]: (event: MatrixEvent): string | null => {
-        return TextForEvent.textForEvent(event, MatrixClientPeg.safeGet());
-    },
-};
+/**
+ * Minimum interval (in milliseconds) between two *audible* notification plays.
+ *
+ * Coalesces bursts of backlogged notifications into a single sound. This is the
+ * in-repo remedy for https://github.com/element-hq/element-web/issues/31996: on
+ * macOS Sequoia, waking from sleep delivers the entire sync backlog in one
+ * batch, so every backlogged notifying event fires {@link
+ * NotifierClass.playAudioNotification} near-simultaneously and the identical
+ * audio buffers superimpose into one loud "stacked" sound.
+ *
+ * The throttle is keyed on the resolved sound, so a backlog of identical sounds
+ * coalesces to one play while two genuinely *different* sounds (e.g. a custom
+ * per-room sound) arriving within the window each still play. A conservative
+ * window is intentional: merging a burst of the same sound is preferable to a
+ * wall of overlapping audio.
+ *
+ * NOTE: This only cures the sounds-enabled renderer Web-Audio path (the default
+ * config). It does NOT fix the variant where macOS Sequoia ignores the OS
+ * banner's `silent: true` and plays its own coalesced banner sound on wake;
+ * that is purely OS/Electron behaviour with no in-repo lever.
+ */
+export const NOTIFICATION_SOUND_THROTTLE_MS = 1000;
 
 /**
  * Extracts plain text from a message body, replacing any spoilered content
@@ -152,7 +152,7 @@ export type NotificationSound = {
     size?: number;
 };
 
-class NotifierClass extends TypedEventEmitter<keyof EmittedEvents, EmittedEvents> {
+export default class Notifier extends TypedEventEmitter<keyof EmittedEvents, EmittedEvents> {
     private notifsByRoom: Record<string, Notification[]> = {};
 
     // A list of event IDs that we've received but need to wait until
@@ -165,19 +165,58 @@ class NotifierClass extends TypedEventEmitter<keyof EmittedEvents, EmittedEvents
 
     private backgroundAudio = new BackgroundAudio();
 
+    /**
+     * Per-sound timestamp (ms, from {@link Date.now}) of the last *audible* notification, keyed by the
+     * resolved sound (custom sound url, or `"default"`). Used to throttle a burst of backlogged
+     * notifications of the *same* sound into a single play while letting distinct sounds through -
+     * see {@link NOTIFICATION_SOUND_THROTTLE_MS}.
+     */
+    private readonly lastAudioNotificationMs = new Map<string, number>();
+
+    private msgTypeHandlers: Record<string, (event: MatrixEvent) => string | null>;
+
+    public constructor(
+        private readonly dispatcher: MatrixDispatcher,
+        private readonly sdkContext: SDKContextClass,
+    ) {
+        super();
+
+        /*
+        Override both the content body and the TextForEvent handler for specific msgtypes, in notifications.
+        This is useful when the content body contains fallback text that would explain that the client can't handle a particular
+        type of tile.
+        */
+        this.msgTypeHandlers = {
+            [MsgType.KeyVerificationRequest]: (event: MatrixEvent) => {
+                const name = event.sender?.name;
+                return _t("notifier|m.key.verification.request", { name });
+            },
+            [M_LOCATION.name]: (event: MatrixEvent) => {
+                return TextForEvent.textForLocationEvent(event)();
+            },
+            [M_LOCATION.altName]: (event: MatrixEvent) => {
+                return TextForEvent.textForLocationEvent(event)();
+            },
+            [MsgType.Audio]: (event: MatrixEvent): string | null => {
+                return TextForEvent.textForEvent(event, this.sdkContext.client!);
+            },
+        };
+    }
+
     public notificationMessageForEvent(ev: MatrixEvent): string | null {
+        if (!this.sdkContext.client) return null;
         const msgType = ev.getContent().msgtype;
-        if (msgType && msgTypeHandlers.hasOwnProperty(msgType)) {
-            return msgTypeHandlers[msgType](ev);
+        if (msgType && this.msgTypeHandlers.hasOwnProperty(msgType)) {
+            return this.msgTypeHandlers[msgType](ev);
         }
-        return TextForEvent.textForEvent(ev, MatrixClientPeg.safeGet());
+        return TextForEvent.textForEvent(ev, this.sdkContext.client);
     }
 
     // XXX: exported for tests
     public displayPopupNotification(ev: MatrixEvent, room: Room): void {
         const plaf = PlatformPeg.get();
-        const cli = MatrixClientPeg.safeGet();
-        if (!plaf) {
+        const cli = this.sdkContext.client;
+        if (!plaf || !cli) {
             return;
         }
         if (!plaf.supportsNotifications() || !plaf.maySendNotifications()) {
@@ -196,7 +235,7 @@ class NotifierClass extends TypedEventEmitter<keyof EmittedEvents, EmittedEvents
             title = room.name;
             // notificationMessageForEvent includes sender, but we already have the sender here
             const msgType = ev.getContent().msgtype;
-            if (ev.getContent().body && (!msgType || !msgTypeHandlers.hasOwnProperty(msgType))) {
+            if (ev.getContent().body && (!msgType || !this.msgTypeHandlers.hasOwnProperty(msgType))) {
                 msg = stripPlainReply(getNotificationBodyWithoutSpoilers(ev));
             }
         } else if (ev.getType() === "m.room.member") {
@@ -207,7 +246,7 @@ class NotifierClass extends TypedEventEmitter<keyof EmittedEvents, EmittedEvents
             title = ev.sender.name + " (" + room.name + ")";
             // notificationMessageForEvent includes sender, but we've just out sender in the title
             const msgType = ev.getContent().msgtype;
-            if (ev.getContent().body && (!msgType || !msgTypeHandlers.hasOwnProperty(msgType))) {
+            if (ev.getContent().body && (!msgType || !this.msgTypeHandlers.hasOwnProperty(msgType))) {
                 msg = stripPlainReply(getNotificationBodyWithoutSpoilers(ev));
             }
         }
@@ -223,7 +262,7 @@ class NotifierClass extends TypedEventEmitter<keyof EmittedEvents, EmittedEvents
             avatarUrl = Avatar.avatarUrlForMember(ev.sender, 40, 40, "crop");
         }
 
-        const notif = plaf.displayNotification(title, msg!, avatarUrl, room, ev);
+        const notif = plaf.displayNotification(title, msg, avatarUrl, room, ev);
 
         // if displayNotification returns non-null,  the platform supports
         // clearing notifications later, so keep track of this.
@@ -269,8 +308,8 @@ class NotifierClass extends TypedEventEmitter<keyof EmittedEvents, EmittedEvents
 
     // XXX: Exported for tests
     public async playAudioNotification(ev: MatrixEvent, room: Room): Promise<void> {
-        const cli = MatrixClientPeg.safeGet();
-        if (localNotificationsAreSilenced(cli)) {
+        const cli = this.sdkContext.client;
+        if (!cli || localNotificationsAreSilenced(cli)) {
             return;
         }
 
@@ -278,6 +317,20 @@ class NotifierClass extends TypedEventEmitter<keyof EmittedEvents, EmittedEvents
         const sound = this.getSoundForRoom(room.roomId);
         logger.log(`Got sound ${sound?.name || "default"} for ${room.roomId}`);
 
+        // Throttle audible plays so a burst of backlogged notifications - e.g. the whole sync backlog
+        // delivered at once when macOS wakes from sleep - produces at most one sound per distinct sound
+        // within NOTIFICATION_SOUND_THROTTLE_MS, instead of many identical buffers superimposing into one
+        // loud "stacked" sound (#31996). Keyed on the resolved sound so two *different* sounds within the
+        // window both still play. Runs only after the silencing gate above, so it suppresses redundant
+        // *audible* plays, never the gating logic. We bail cleanly (no throw).
+        const soundKey = sound?.url ?? "default";
+        const now = Date.now();
+        const lastPlayed = this.lastAudioNotificationMs.get(soundKey);
+        if (lastPlayed !== undefined && now - lastPlayed < NOTIFICATION_SOUND_THROTTLE_MS) {
+            return;
+        }
+        this.lastAudioNotificationMs.set(soundKey, now);
+
         if (sound) {
             await this.backgroundAudio.play(sound.url);
         } else {
@@ -286,22 +339,19 @@ class NotifierClass extends TypedEventEmitter<keyof EmittedEvents, EmittedEvents
     }
 
     public start(): void {
-        const cli = MatrixClientPeg.safeGet();
-        cli.on(RoomEvent.Timeline, this.onEvent);
-        cli.on(RoomEvent.Receipt, this.onRoomReceipt);
-        cli.on(MatrixEventEvent.Decrypted, this.onEventDecrypted);
-        cli.on(ClientEvent.Sync, this.onSyncStateChange);
+        this.sdkContext.client!.on(RoomEvent.Timeline, this.onEvent);
+        this.sdkContext.client!.on(RoomEvent.Receipt, this.onRoomReceipt);
+        this.sdkContext.client!.on(MatrixEventEvent.Decrypted, this.onEventDecrypted);
+        this.sdkContext.client!.on(ClientEvent.Sync, this.onSyncStateChange);
         this.toolbarHidden = false;
         this.isSyncing = false;
     }
 
     public stop(): void {
-        if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get()!.removeListener(RoomEvent.Timeline, this.onEvent);
-            MatrixClientPeg.get()!.removeListener(RoomEvent.Receipt, this.onRoomReceipt);
-            MatrixClientPeg.get()!.removeListener(MatrixEventEvent.Decrypted, this.onEventDecrypted);
-            MatrixClientPeg.get()!.removeListener(ClientEvent.Sync, this.onSyncStateChange);
-        }
+        this.sdkContext.client?.removeListener(RoomEvent.Timeline, this.onEvent);
+        this.sdkContext.client?.removeListener(RoomEvent.Receipt, this.onRoomReceipt);
+        this.sdkContext.client?.removeListener(MatrixEventEvent.Decrypted, this.onEventDecrypted);
+        this.sdkContext.client?.removeListener(ClientEvent.Sync, this.onSyncStateChange);
         this.isSyncing = false;
     }
 
@@ -343,25 +393,26 @@ class NotifierClass extends TypedEventEmitter<keyof EmittedEvents, EmittedEvents
                     return;
                 }
 
+                // oxlint-disable-next-line promise/no-callback-in-promise
                 if (callback) callback();
 
-                PosthogAnalytics.instance.trackEvent<PermissionChangedEvent>({
+                this.sdkContext.posthogAnalytics.trackEvent<PermissionChangedEvent>({
                     eventName: "PermissionChanged",
                     permission: "Notification",
                     granted: true,
                 });
-                dis.dispatch({
+                this.dispatcher.dispatch({
                     action: "notifier_enabled",
                     value: true,
                 });
             });
         } else {
-            PosthogAnalytics.instance.trackEvent<PermissionChangedEvent>({
+            this.sdkContext.posthogAnalytics.trackEvent<PermissionChangedEvent>({
                 eventName: "PermissionChanged",
                 permission: "Notification",
                 granted: false,
             });
-            dis.dispatch({
+            this.dispatcher.dispatch({
                 action: "notifier_enabled",
                 value: false,
             });
@@ -405,7 +456,7 @@ class NotifierClass extends TypedEventEmitter<keyof EmittedEvents, EmittedEvents
     }
 
     public shouldShowPrompt(): boolean {
-        const client = MatrixClientPeg.get();
+        const client = this.sdkContext.client;
         if (!client) {
             return false;
         }
@@ -430,6 +481,7 @@ class NotifierClass extends TypedEventEmitter<keyof EmittedEvents, EmittedEvents
 
     // XXX: Exported for tests
     public onSyncStateChange = (state: SyncState, prevState: SyncState | null, data?: SyncStateData): void => {
+        if (!this.sdkContext.client) return;
         if (state === SyncState.Syncing) {
             this.isSyncing = true;
         } else if (state === SyncState.Stopped || state === SyncState.Error) {
@@ -438,7 +490,7 @@ class NotifierClass extends TypedEventEmitter<keyof EmittedEvents, EmittedEvents
 
         // wait for first non-cached sync to complete
         if (![SyncState.Stopped, SyncState.Error].includes(state) && !data?.fromCache) {
-            createLocalNotificationSettingsIfNeeded(MatrixClientPeg.safeGet());
+            createLocalNotificationSettingsIfNeeded(this.sdkContext.client);
         }
     };
 
@@ -449,13 +501,14 @@ class NotifierClass extends TypedEventEmitter<keyof EmittedEvents, EmittedEvents
         removed: boolean,
         data: IRoomTimelineData,
     ): void => {
+        if (!this.sdkContext.client) return;
         if (removed) return; // only notify for new events, not removed ones
         if (!data.liveEvent || !!toStartOfTimeline) return; // only notify for new things, not old.
         if (!this.isSyncing) return; // don't alert for any messages initially
-        if (ev.getSender() === MatrixClientPeg.safeGet().getUserId()) return;
+        if (ev.getSender() === this.sdkContext.client.getUserId()) return;
         if (data.timeline.getTimelineSet().threadListType !== null) return; // Ignore events on the thread list generated timelines
 
-        MatrixClientPeg.safeGet().decryptEventIfNeeded(ev);
+        this.sdkContext.client.decryptEventIfNeeded(ev);
 
         // If it's an encrypted event and the type is still 'm.room.encrypted',
         // it hasn't yet been decrypted, so wait until it is.
@@ -501,20 +554,21 @@ class NotifierClass extends TypedEventEmitter<keyof EmittedEvents, EmittedEvents
 
     // XXX: exported for tests
     public evaluateEvent(ev: MatrixEvent): void {
+        if (!this.sdkContext.client) return;
         const roomId = ev.getRoomId()!;
-        const room = MatrixClientPeg.safeGet().getRoom(roomId);
+        const room = this.sdkContext.client.getRoom(roomId);
         if (!room) {
             // e.g we are in the process of joining a room.
             // Seen in the Playwright lazy-loading test.
             return;
         }
 
-        const actions = MatrixClientPeg.safeGet().getPushActionsForEvent(ev);
+        const actions = this.sdkContext.client.getPushActionsForEvent(ev);
 
         if (actions?.notify) {
             this.performCustomEventHandling(ev);
 
-            const store = SdkContextClass.instance.roomViewStore;
+            const store = this.sdkContext.roomViewStore;
             const isViewingRoom = store.getRoomId() === room.roomId;
             const threadId: string | undefined = ev.getId() !== ev.threadRootId ? ev.threadRootId : undefined;
             const isViewingThread = store.getThreadId() === threadId;
@@ -625,8 +679,7 @@ class NotifierClass extends TypedEventEmitter<keyof EmittedEvents, EmittedEvents
      */
     private performCustomEventHandling(ev: MatrixEvent): void {
         const toaster = ToastStore.sharedInstance();
-        const cli = MatrixClientPeg.safeGet();
-        const room = cli.getRoom(ev.getRoomId());
+        const room = this.sdkContext.client?.getRoom(ev.getRoomId());
 
         if (room && EventType.RTCNotification === ev.getType()) {
             // We don't need to await this.
@@ -634,10 +687,3 @@ class NotifierClass extends TypedEventEmitter<keyof EmittedEvents, EmittedEvents
         }
     }
 }
-
-if (!window.mxNotifier) {
-    window.mxNotifier = new NotifierClass();
-}
-
-export default window.mxNotifier;
-export const Notifier: NotifierClass = window.mxNotifier;
diff --git a/apps/web/src/PasswordReset.ts b/apps/web/src/PasswordReset.ts
index 9fb841ed4b..00927e173c 100644
--- a/apps/web/src/PasswordReset.ts
+++ b/apps/web/src/PasswordReset.ts
@@ -73,7 +73,7 @@ export default class PasswordReset {
     /**
      * Checks if the email link has been clicked by attempting to change the password
      * for the mxid linked to the email.
-     * @return {Promise} Resolves if the password was reset. Rejects with an object
+     * @returns {Promise} Resolves if the password was reset. Rejects with an object
      * with a "message" property which contains a human-readable message detailing why
      * the reset failed, e.g. "There is no mapped matrix user ID for the given email address".
      */
diff --git a/apps/web/test/unit-tests/PosthogAnalytics-test.ts b/apps/web/src/PosthogAnalytics.test.ts
similarity index 79%
rename from apps/web/test/unit-tests/PosthogAnalytics-test.ts
rename to apps/web/src/PosthogAnalytics.test.ts
index 08d62e1373..561d3735c9 100644
--- a/apps/web/test/unit-tests/PosthogAnalytics-test.ts
+++ b/apps/web/src/PosthogAnalytics.test.ts
@@ -7,41 +7,38 @@ 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 { mocked } from "jest-mock";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
 import { type PostHog } from "posthog-js";
 import { type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { type CryptoApi } from "matrix-js-sdk/src/crypto-api";
+import { getMockClientWithEventEmitter } from "test-utils";
 
-import {
-    Anonymity,
-    getRedactedCurrentLocation,
-    type IPosthogEvent,
-    PosthogAnalytics,
-} from "../../src/PosthogAnalytics";
-import SdkConfig from "../../src/SdkConfig";
-import { getMockClientWithEventEmitter } from "../test-utils";
-import SettingsStore from "../../src/settings/SettingsStore";
-import { Layout } from "../../src/settings/enums/Layout";
-import defaultDispatcher from "../../src/dispatcher/dispatcher";
-import { Action } from "../../src/dispatcher/actions";
-import { SettingLevel } from "../../src/settings/SettingLevel";
+import { Anonymity, getRedactedCurrentLocation, type IPosthogEvent, PosthogAnalytics } from "./PosthogAnalytics";
+import SdkConfig from "./SdkConfig";
+import SettingsStore from "./settings/SettingsStore";
+import { Layout } from "./settings/enums/Layout";
+import defaultDispatcher from "./dispatcher/dispatcher";
+import { Action } from "./dispatcher/actions";
+import { SettingLevel } from "./settings/SettingLevel";
 
 const getFakePosthog = (): PostHog =>
     ({
-        capture: jest.fn(),
-        init: jest.fn(),
-        identify: jest.fn(),
-        reset: jest.fn(),
-        register: jest.fn(),
-        get_distinct_id: jest.fn(),
+        capture: vi.fn(),
+        init: vi.fn(),
+        identify: vi.fn(),
+        reset: vi.fn(),
+        register: vi.fn(),
+        get_distinct_id: vi.fn(),
         persistence: {
-            get_property: jest.fn(),
+            get_property: vi.fn(),
         },
-        identifyUser: jest.fn(),
+        identifyUser: vi.fn(),
     }) as unknown as PostHog;
 
 interface ITestEvent extends IPosthogEvent {
-    eventName: "JestTestEvents";
+    eventName: "TestEvents";
     foo?: string;
 }
 
@@ -121,17 +118,17 @@ describe("PosthogAnalytics", () => {
         it("Should pass event to posthog", () => {
             analytics.setAnonymity(Anonymity.Pseudonymous);
             analytics.trackEvent<ITestEvent>({
-                eventName: "JestTestEvents",
+                eventName: "TestEvents",
                 foo: "bar",
             });
-            expect(mocked(fakePosthog).capture.mock.calls[0][0]).toBe("JestTestEvents");
-            expect(mocked(fakePosthog).capture.mock.calls[0][1]!["foo"]).toEqual("bar");
+            expect(vi.mocked(fakePosthog).capture.mock.calls[0][0]).toBe("TestEvents");
+            expect(vi.mocked(fakePosthog).capture.mock.calls[0][1]!["foo"]).toEqual("bar");
         });
 
         it("Should not track events if anonymous", async () => {
             analytics.setAnonymity(Anonymity.Anonymous);
-            await analytics.trackEvent<ITestEvent>({
-                eventName: "JestTestEvents",
+            analytics.trackEvent<ITestEvent>({
+                eventName: "TestEvents",
                 foo: "bar",
             });
             expect(fakePosthog.capture).not.toHaveBeenCalled();
@@ -140,7 +137,7 @@ describe("PosthogAnalytics", () => {
         it("Should not track any events if disabled", async () => {
             analytics.setAnonymity(Anonymity.Disabled);
             analytics.trackEvent<ITestEvent>({
-                eventName: "JestTestEvents",
+                eventName: "TestEvents",
                 foo: "bar",
             });
             expect(fakePosthog.capture).not.toHaveBeenCalled();
@@ -164,29 +161,29 @@ describe("PosthogAnalytics", () => {
         it("Should identify the user to posthog if pseudonymous", async () => {
             analytics.setAnonymity(Anonymity.Pseudonymous);
             const client = getMockClientWithEventEmitter({
-                getAccountDataFromServer: jest.fn().mockResolvedValue(null),
-                setAccountData: jest.fn().mockResolvedValue({}),
+                getAccountDataFromServer: vi.fn().mockResolvedValue(null),
+                setAccountData: vi.fn().mockResolvedValue({}),
             });
             await analytics.identifyUser(client, () => "analytics_id");
-            expect(mocked(fakePosthog).identify.mock.calls[0][0]).toBe("analytics_id");
+            expect(vi.mocked(fakePosthog).identify.mock.calls[0][0]).toBe("analytics_id");
         });
 
         it("Should not identify the user to posthog if anonymous", async () => {
             analytics.setAnonymity(Anonymity.Anonymous);
             const client = getMockClientWithEventEmitter({});
             await analytics.identifyUser(client, () => "analytics_id");
-            expect(mocked(fakePosthog).identify.mock.calls.length).toBe(0);
+            expect(vi.mocked(fakePosthog).identify.mock.calls.length).toBe(0);
         });
 
         it("Should identify using the server's analytics id if present", async () => {
             analytics.setAnonymity(Anonymity.Pseudonymous);
 
             const client = getMockClientWithEventEmitter({
-                getAccountDataFromServer: jest.fn().mockResolvedValue({ id: "existing_analytics_id" }),
-                setAccountData: jest.fn().mockResolvedValue({}),
+                getAccountDataFromServer: vi.fn().mockResolvedValue({ id: "existing_analytics_id" }),
+                setAccountData: vi.fn().mockResolvedValue({}),
             });
             await analytics.identifyUser(client, () => "new_analytics_id");
-            expect(mocked(fakePosthog).identify.mock.calls[0][0]).toBe("existing_analytics_id");
+            expect(vi.mocked(fakePosthog).identify.mock.calls[0][0]).toBe("existing_analytics_id");
         });
     });
 
@@ -220,9 +217,9 @@ describe("PosthogAnalytics", () => {
                 true,
             );
             analytics.trackEvent<ITestEvent>({
-                eventName: "JestTestEvents",
+                eventName: "TestEvents",
             });
-            expect(mocked(fakePosthog).capture.mock.calls[0][1]!["$set"]).toMatchObject({
+            expect(vi.mocked(fakePosthog).capture.mock.calls[0][1]!["$set"]).toMatchObject({
                 WebLayout: "IRC",
             });
         });
@@ -237,9 +234,9 @@ describe("PosthogAnalytics", () => {
                 true,
             );
             analytics.trackEvent<ITestEvent>({
-                eventName: "JestTestEvents",
+                eventName: "TestEvents",
             });
-            expect(mocked(fakePosthog).capture.mock.calls[0][1]!["$set"]).toMatchObject({
+            expect(vi.mocked(fakePosthog).capture.mock.calls[0][1]!["$set"]).toMatchObject({
                 WebLayout: "Bubble",
             });
         });
@@ -254,9 +251,9 @@ describe("PosthogAnalytics", () => {
                 true,
             );
             analytics.trackEvent<ITestEvent>({
-                eventName: "JestTestEvents",
+                eventName: "TestEvents",
             });
-            expect(mocked(fakePosthog).capture.mock.calls[0][1]!["$set"]).toMatchObject({
+            expect(vi.mocked(fakePosthog).capture.mock.calls[0][1]!["$set"]).toMatchObject({
                 WebLayout: "Group",
             });
         });
@@ -272,10 +269,10 @@ describe("PosthogAnalytics", () => {
                 true,
             );
             analytics.trackEvent<ITestEvent>({
-                eventName: "JestTestEvents",
+                eventName: "TestEvents",
             });
-            console.log(mocked(fakePosthog).capture.mock.calls[0]);
-            expect(mocked(fakePosthog).capture.mock.calls[0][1]!["$set"]).toMatchObject({
+            console.log(vi.mocked(fakePosthog).capture.mock.calls[0]);
+            expect(vi.mocked(fakePosthog).capture.mock.calls[0][1]!["$set"]).toMatchObject({
                 WebLayout: "Compact",
             });
         });
@@ -311,9 +308,9 @@ describe("PosthogAnalytics", () => {
                 true,
             );
             analytics.trackEvent<ITestEvent>({
-                eventName: "JestTestEvents",
+                eventName: "TestEvents",
             });
-            expect(mocked(fakePosthog).capture.mock.calls[0][1]!["$set"]).toMatchObject({
+            expect(vi.mocked(fakePosthog).capture.mock.calls[0][1]!["$set"]).toMatchObject({
                 URLPreviewsEnabled: true,
             });
         });
@@ -323,10 +320,10 @@ describe("PosthogAnalytics", () => {
         let analytics: PosthogAnalytics;
         const getFakeClient = (): MatrixClient =>
             ({
-                getCrypto: jest.fn(),
-                setAccountData: jest.fn(),
+                getCrypto: vi.fn(),
+                setAccountData: vi.fn(),
                 // just fake return an `im.vector.analytics` content
-                getAccountDataFromServer: jest.fn().mockReturnValue({
+                getAccountDataFromServer: vi.fn().mockReturnValue({
                     id: "0000000",
                     pseudonymousAnalyticsOptIn: true,
                 }),
@@ -350,7 +347,7 @@ describe("PosthogAnalytics", () => {
             // To simulate a switch we call updateAnonymityFromSettings.
             // As per documentation this function is called On login.
             const mockClient = getFakeClient();
-            mocked(mockClient.getCrypto).mockReturnValue({
+            vi.mocked(mockClient.getCrypto).mockReturnValue({
                 getVersion: () => {
                     return rustBackend ? "Rust SDK 0.6.0 (9c6b550), Vodozemac 0.5.0" : "Olm 3.2.0";
                 },
@@ -363,7 +360,7 @@ describe("PosthogAnalytics", () => {
 
             await simulateLogin(false);
 
-            expect(mocked(fakePosthog).register.mock.lastCall![0]["cryptoSDK"]).toStrictEqual("Legacy");
+            expect(vi.mocked(fakePosthog).register.mock.lastCall![0]["cryptoSDK"]).toStrictEqual("Legacy");
         });
 
         it("should send Legacy cryptoSDK superProperty correctly", async () => {
@@ -373,7 +370,7 @@ describe("PosthogAnalytics", () => {
 
             // Super Properties are properties associated with events that are set once and then sent with every capture call.
             // They are set using posthog.register
-            expect(mocked(fakePosthog).register.mock.lastCall![0]["cryptoSDK"]).toStrictEqual("Legacy");
+            expect(vi.mocked(fakePosthog).register.mock.lastCall![0]["cryptoSDK"]).toStrictEqual("Legacy");
         });
 
         it("should send cryptoSDK superProperty when enabling analytics", async () => {
@@ -383,13 +380,13 @@ describe("PosthogAnalytics", () => {
 
             // This initial call is due to the call to register platformSuperProperties
             // The important thing is that the cryptoSDK superProperty is not set.
-            expect(mocked(fakePosthog).register.mock.lastCall![0]).toStrictEqual({});
+            expect(vi.mocked(fakePosthog).register.mock.lastCall![0]).toStrictEqual({});
 
             // switching to pseudonymous should ensure that the cryptoSDK superProperty is set correctly
             analytics.setAnonymity(Anonymity.Pseudonymous);
             // Super Properties are properties associated with events that are set once and then sent with every capture call.
             // They are set using posthog.register
-            expect(mocked(fakePosthog).register.mock.lastCall![0]["cryptoSDK"]).toStrictEqual("Rust");
+            expect(vi.mocked(fakePosthog).register.mock.lastCall![0]["cryptoSDK"]).toStrictEqual("Rust");
         });
     });
 });
diff --git a/apps/web/src/PosthogAnalytics.ts b/apps/web/src/PosthogAnalytics.ts
index 814d840f19..54e14ce028 100644
--- a/apps/web/src/PosthogAnalytics.ts
+++ b/apps/web/src/PosthogAnalytics.ts
@@ -139,10 +139,10 @@ export class PosthogAnalytics {
     }
 
     public constructor(private readonly posthog: PostHog) {
-        const posthogConfig = SdkConfig.getObject("posthog");
-        if (posthogConfig) {
-            this.posthog.init(posthogConfig.get("project_api_key"), {
-                api_host: posthogConfig.get("api_host"),
+        const posthogConfig = SdkConfig.get("posthog");
+        if (posthogConfig?.project_api_key && posthogConfig?.api_host) {
+            this.posthog.init(posthogConfig.project_api_key, {
+                api_host: posthogConfig.api_host,
                 autocapture: false,
                 mask_all_text: true,
                 mask_all_element_attributes: true,
diff --git a/apps/web/test/unit-tests/PosthogTrackers-test.ts b/apps/web/src/PosthogTrackers.test.ts
similarity index 76%
rename from apps/web/test/unit-tests/PosthogTrackers-test.ts
rename to apps/web/src/PosthogTrackers.test.ts
index a8904e4080..846fc57084 100644
--- a/apps/web/test/unit-tests/PosthogTrackers-test.ts
+++ b/apps/web/src/PosthogTrackers.test.ts
@@ -5,16 +5,20 @@ 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 { PosthogAnalytics } from "../../src/PosthogAnalytics";
-import PosthogTrackers from "../../src/PosthogTrackers";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, afterEach } from "vitest";
+
+import { PosthogAnalytics } from "./PosthogAnalytics";
+import PosthogTrackers from "./PosthogTrackers";
 
 describe("PosthogTrackers", () => {
     afterEach(() => {
-        jest.resetAllMocks();
+        vi.resetAllMocks();
     });
 
     it("tracks URL Previews", () => {
-        jest.spyOn(PosthogAnalytics.instance, "trackEvent");
+        vi.spyOn(PosthogAnalytics.instance, "trackEvent");
         const tracker = new PosthogTrackers();
         tracker.trackUrlPreview("$123456", false, [
             {
diff --git a/apps/web/src/PosthogTrackers.ts b/apps/web/src/PosthogTrackers.ts
index 19bb900b7c..18afd97d89 100644
--- a/apps/web/src/PosthogTrackers.ts
+++ b/apps/web/src/PosthogTrackers.ts
@@ -13,6 +13,8 @@ import { type Interaction as InteractionEvent } from "@matrix-org/analytics-even
 import { type PinUnpinAction } from "@matrix-org/analytics-events/types/typescript/PinUnpinAction";
 import { type RoomListSortingAlgorithmChanged } from "@matrix-org/analytics-events/types/typescript/RoomListSortingAlgorithmChanged";
 import { type UrlPreviewRendered } from "@matrix-org/analytics-events/types/typescript/UrlPreviewRendered";
+import { type SectionCreation } from "@matrix-org/analytics-events/types/typescript/SectionCreation";
+import { type ExpandCollapseSection } from "@matrix-org/analytics-events/types/typescript/ExpandCollapseSection";
 
 import PageType from "./PageTypes";
 import Views from "./Views";
@@ -164,6 +166,33 @@ export default class PosthogTrackers {
         });
         this.previewedEventIds.set(eventId, true);
     }
+
+    /**
+     * Track when the user creates a section in the room list.
+     * @param from The source from which the section creation was triggered.
+     */
+    public static trackSectionCreation(from: SectionCreation["from"]): void {
+        PosthogAnalytics.instance.trackEvent<SectionCreation>({
+            eventName: "SectionCreation",
+            from,
+        });
+    }
+
+    /**
+     * Track when the user collapses or expands a section in the room list.
+     * @param kind Is expand or collapse.
+     * @param from From where the action is triggered.
+     */
+    public static trackCollapseOrExpandSection(
+        kind: ExpandCollapseSection["kind"],
+        from: ExpandCollapseSection["from"],
+    ): void {
+        PosthogAnalytics.instance.trackEvent<ExpandCollapseSection>({
+            eventName: "ExpandCollapseSection",
+            kind,
+            from,
+        });
+    }
 }
 
 export class PosthogScreenTracker extends PureComponent<{ screenName: ScreenName }> {
diff --git a/apps/web/src/Registration.tsx b/apps/web/src/Registration.tsx
index 22eb6e15ff..e580047acc 100644
--- a/apps/web/src/Registration.tsx
+++ b/apps/web/src/Registration.tsx
@@ -38,7 +38,6 @@ export const SAFE_LOCALPART_REGEX = /^[a-z0-9=_\-./]+$/;
  *     If present the screen to redirect to after a successful login or register.
  */
 export async function startAnyRegistrationFlow(
-    // eslint-disable-next-line camelcase
     options: { go_home_on_cancel?: boolean; go_welcome_on_cancel?: boolean; screen_after?: boolean } = {},
 ): Promise<void> {
     const modal = Modal.createDialog(QuestionDialog, {
@@ -57,6 +56,7 @@ export async function startAnyRegistrationFlow(
                           modal.close();
                           dis.dispatch({ action: "start_registration", screenAfterLogin: options.screen_after });
                       }}
+                      type="button"
                   >
                       {_t("auth|register_action")}
                   </button>,
diff --git a/apps/web/src/Resend.ts b/apps/web/src/Resend.ts
index e93082f397..927c930d54 100644
--- a/apps/web/src/Resend.ts
+++ b/apps/web/src/Resend.ts
@@ -11,6 +11,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 
 import dis from "./dispatcher/dispatcher";
 
+// oxlint-disable-next-line typescript/no-extraneous-class
 export default class Resend {
     public static resendUnsentEvents(room: Room): Promise<void[]> {
         return Promise.all(
diff --git a/apps/web/src/RoomInvite.tsx b/apps/web/src/RoomInvite.tsx
index 0b789a5766..2c3632c8c3 100644
--- a/apps/web/src/RoomInvite.tsx
+++ b/apps/web/src/RoomInvite.tsx
@@ -117,7 +117,7 @@ export function showAnyInviteErrors(
                                                 (avatarUrl && mediaFromMxc(avatarUrl).getSquareThumbnailHttp(24)) ??
                                                 undefined
                                             }
-                                            name={name!}
+                                            name={name}
                                             idName={user?.userId}
                                             size="36px"
                                         />
diff --git a/apps/web/test/unit-tests/RoomNotifs-test.ts b/apps/web/src/RoomNotifs.test.ts
similarity index 94%
rename from apps/web/test/unit-tests/RoomNotifs-test.ts
rename to apps/web/src/RoomNotifs.test.ts
index e514288a6c..a94f8435d4 100644
--- a/apps/web/test/unit-tests/RoomNotifs-test.ts
+++ b/apps/web/src/RoomNotifs.test.ts
@@ -6,7 +6,9 @@ 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 { mocked } from "jest-mock";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach, type Mocked } from "vitest";
 import {
     PushRuleActionName,
     TweakName,
@@ -19,19 +21,19 @@ import {
     type MatrixClient,
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
+import { mkEvent, mkRoom, mkRoomMember, muteRoom, stubClient, upsertRoomStateEvents } from "test-utils";
+import { mkThread } from "test-utils/threads";
 
-import { mkEvent, mkRoom, mkRoomMember, muteRoom, stubClient, upsertRoomStateEvents } from "../test-utils";
 import {
     getRoomNotifsState,
     RoomNotifState,
     getUnreadNotificationCount,
     determineUnreadState,
     getUnsentMessages,
-} from "../../src/RoomNotifs";
-import { NotificationLevel } from "../../src/stores/notifications/NotificationLevel";
-import SettingsStore from "../../src/settings/SettingsStore";
-import { MatrixClientPeg } from "../../src/MatrixClientPeg";
-import { mkThread } from "../test-utils/threads";
+} from "./RoomNotifs";
+import { NotificationLevel } from "./stores/notifications/NotificationLevel";
+import SettingsStore from "./settings/SettingsStore";
+import { MatrixClientPeg } from "./MatrixClientPeg";
 
 describe("getUnsentMessages", () => {
     const ROOM_ID = "!roomId";
@@ -95,14 +97,14 @@ describe("getUnsentMessages", () => {
 });
 
 describe("RoomNotifs test", () => {
-    let client: jest.Mocked<MatrixClient>;
+    let client: Mocked<MatrixClient>;
 
     beforeEach(() => {
-        client = stubClient() as jest.Mocked<MatrixClient>;
+        client = stubClient() as Mocked<MatrixClient>;
     });
 
     it("getRoomNotifsState handles rules with no conditions", () => {
-        mocked(client).pushRules = {
+        vi.mocked(client).pushRules = {
             global: {
                 override: [
                     {
@@ -118,7 +120,7 @@ describe("RoomNotifs test", () => {
     });
 
     it("getRoomNotifsState handles guest users", () => {
-        mocked(client).isGuest.mockReturnValue(true);
+        vi.mocked(client).isGuest.mockReturnValue(true);
         expect(getRoomNotifsState(client, "!roomId:server")).toBe(RoomNotifState.AllMessages);
     });
 
@@ -258,7 +260,7 @@ describe("RoomNotifs test", () => {
 
             describe("and dynamic room predecessors are enabled", () => {
                 beforeEach(() => {
-                    jest.spyOn(SettingsStore, "getValue").mockImplementation(
+                    vi.spyOn(SettingsStore, "getValue").mockImplementation(
                         (settingName) => settingName === "feature_dynamic_room_predecessors",
                     );
                 });
@@ -343,7 +345,7 @@ describe("RoomNotifs test", () => {
         });
 
         it("indicates the user knock has been denied", async () => {
-            jest.spyOn(SettingsStore, "getValue").mockImplementation((name) => {
+            vi.spyOn(SettingsStore, "getValue").mockImplementation((name) => {
                 return name === "feature_ask_to_join";
             });
             const roomMember = mkRoomMember(
@@ -355,7 +357,7 @@ describe("RoomNotifs test", () => {
                     membership: KnownMembership.Knock,
                 },
             );
-            jest.spyOn(room, "getMember").mockReturnValue(roomMember);
+            vi.spyOn(room, "getMember").mockReturnValue(roomMember);
             const { level, symbol, count } = determineUnreadState(room);
 
             expect(symbol).toBe("!");
diff --git a/apps/web/src/RoomNotifs.ts b/apps/web/src/RoomNotifs.ts
index 2db2cf2158..4489dbf6c3 100644
--- a/apps/web/src/RoomNotifs.ts
+++ b/apps/web/src/RoomNotifs.ts
@@ -237,7 +237,7 @@ function isRuleRoomMuteRuleForRoomId(roomId: string, rule: IPushRule): boolean {
         return false;
     }
     // isRuleMaybeRoomMuteRule checks this condition exists
-    const cond = rule.conditions![0]!;
+    const cond = rule.conditions![0];
     return cond.pattern === roomId;
 }
 
diff --git a/apps/web/test/unit-tests/Rooms-test.ts b/apps/web/src/Rooms.test.ts
similarity index 86%
rename from apps/web/test/unit-tests/Rooms-test.ts
rename to apps/web/src/Rooms.test.ts
index 841b6f3722..54984858d7 100644
--- a/apps/web/test/unit-tests/Rooms-test.ts
+++ b/apps/web/src/Rooms.test.ts
@@ -6,11 +6,13 @@ 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 { mocked } from "jest-mock";
-import { EventType, type MatrixClient, type MatrixEvent } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import { setDMRoom } from "../../src/Rooms";
-import { mkEvent, stubClient } from "../test-utils";
+import { vi, describe, it, expect, beforeEach } from "vitest";
+import { EventType, type MatrixClient, type MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { mkEvent, stubClient } from "test-utils";
+
+import { setDMRoom } from "./Rooms";
 
 describe("setDMRoom", () => {
     const userId1 = "@user1:example.com";
@@ -23,8 +25,8 @@ describe("setDMRoom", () => {
     let client: MatrixClient;
 
     beforeEach(() => {
-        client = mocked(stubClient());
-        client.getAccountData = jest.fn().mockImplementation((eventType: string): MatrixEvent | undefined => {
+        client = vi.mocked(stubClient());
+        client.getAccountData = vi.fn().mockImplementation((eventType: string): MatrixEvent | undefined => {
             if (eventType === EventType.Direct) {
                 return mkEvent({
                     event: true,
@@ -43,7 +45,7 @@ describe("setDMRoom", () => {
 
     describe("when logged in as a guest and marking a room as DM", () => {
         beforeEach(() => {
-            mocked(client.isGuest).mockReturnValue(true);
+            vi.mocked(client.isGuest).mockReturnValue(true);
             setDMRoom(client, roomId1, userId1);
         });
 
@@ -94,7 +96,7 @@ describe("setDMRoom", () => {
 
     describe("when the direct event is undefined", () => {
         beforeEach(() => {
-            mocked(client.getAccountData).mockReturnValue(undefined);
+            vi.mocked(client.getAccountData).mockReturnValue(undefined);
             setDMRoom(client, roomId1, userId1);
         });
 
@@ -108,8 +110,8 @@ describe("setDMRoom", () => {
     describe("when the current content is undefined", () => {
         beforeEach(() => {
             // @ts-ignore
-            mocked(client.getAccountData).mockReturnValue({
-                getContent: jest.fn(),
+            vi.mocked(client.getAccountData).mockReturnValue({
+                getContent: vi.fn(),
             });
             setDMRoom(client, roomId1, userId1);
         });
diff --git a/apps/web/test/unit-tests/ScalarAuthClient-test.ts b/apps/web/src/ScalarAuthClient.test.ts
similarity index 89%
rename from apps/web/test/unit-tests/ScalarAuthClient-test.ts
rename to apps/web/src/ScalarAuthClient.test.ts
index 0ed4184b55..9d7bb0b7fe 100644
--- a/apps/web/test/unit-tests/ScalarAuthClient-test.ts
+++ b/apps/web/src/ScalarAuthClient.test.ts
@@ -6,14 +6,16 @@ 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 { mocked } from "jest-mock";
-import fetchMock from "@fetch-mock/jest";
-import { type MatrixClient } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import ScalarAuthClient from "../../src/ScalarAuthClient";
-import { stubClient } from "../test-utils";
-import SdkConfig from "../../src/SdkConfig";
-import { WidgetType } from "../../src/widgets/WidgetType";
+import { vi, describe, it, expect, beforeEach } from "vitest";
+import fetchMock from "@fetch-mock/vitest";
+import { type MatrixClient } from "matrix-js-sdk/src/matrix";
+import { stubClient } from "test-utils";
+
+import ScalarAuthClient from "./ScalarAuthClient";
+import SdkConfig from "./SdkConfig";
+import { WidgetType } from "./widgets/WidgetType";
 
 describe("ScalarAuthClient", function () {
     const apiUrl = "https://test.com/api";
@@ -27,7 +29,7 @@ describe("ScalarAuthClient", function () {
 
     let client: MatrixClient;
     beforeEach(function () {
-        jest.clearAllMocks();
+        vi.clearAllMocks();
         client = stubClient();
     });
 
@@ -42,9 +44,9 @@ describe("ScalarAuthClient", function () {
             body: { user_id: client.getUserId() },
         });
 
-        client.getOpenIdToken = jest.fn().mockResolvedValue(tokenObject);
+        client.getOpenIdToken = vi.fn().mockResolvedValue(tokenObject);
 
-        sac.exchangeForScalarToken = jest.fn((arg) => {
+        sac.exchangeForScalarToken = vi.fn((arg) => {
             return Promise.resolve(arg === tokenObject ? "wokentoken" : "othertoken");
         });
 
@@ -91,13 +93,13 @@ describe("ScalarAuthClient", function () {
     describe("registerForToken", () => {
         it("should call `termsInteractionCallback` upon M_TERMS_NOT_SIGNED error", async () => {
             const sac = new ScalarAuthClient(apiUrl + 4, uiUrl);
-            const termsInteractionCallback = jest.fn();
+            const termsInteractionCallback = vi.fn();
             sac.setTermsInteractionCallback(termsInteractionCallback);
             fetchMock.get("https://test.com/api4/account?scalar_token=testtoken1&v=1.1", {
                 body: { errcode: "M_TERMS_NOT_SIGNED" },
             });
-            sac.exchangeForScalarToken = jest.fn(() => Promise.resolve("testtoken1"));
-            mocked(client.getTerms).mockResolvedValue({ policies: {} });
+            sac.exchangeForScalarToken = vi.fn(() => Promise.resolve("testtoken1"));
+            vi.mocked(client.getTerms).mockResolvedValue({ policies: {} });
 
             await expect(sac.registerForToken()).resolves.toBe("testtoken1");
         });
@@ -108,7 +110,7 @@ describe("ScalarAuthClient", function () {
                 body: { errcode: "SERVER_IS_SAD" },
                 status: 500,
             });
-            sac.exchangeForScalarToken = jest.fn(() => Promise.resolve("testtoken2"));
+            sac.exchangeForScalarToken = vi.fn(() => Promise.resolve("testtoken2"));
 
             await expect(sac.registerForToken()).rejects.toBeTruthy();
         });
@@ -118,7 +120,7 @@ describe("ScalarAuthClient", function () {
             fetchMock.get("https://test.com/api6/account?scalar_token=testtoken3&v=1.1", {
                 body: {},
             });
-            sac.exchangeForScalarToken = jest.fn(() => Promise.resolve("testtoken3"));
+            sac.exchangeForScalarToken = vi.fn(() => Promise.resolve("testtoken3"));
 
             await expect(sac.registerForToken()).rejects.toThrow("Missing user_id in response");
         });
diff --git a/apps/web/src/ScalarAuthClient.ts b/apps/web/src/ScalarAuthClient.ts
index 26ee94de40..37a0861b46 100644
--- a/apps/web/src/ScalarAuthClient.ts
+++ b/apps/web/src/ScalarAuthClient.ts
@@ -227,7 +227,7 @@ export default class ScalarAuthClient {
      * This can be useful to temporarily prevent purchased assets from being displayed.
      * @param  {WidgetType} widgetType The Widget Type to disable assets for
      * @param  {string} widgetId   The widget ID to disable assets for
-     * @return {Promise}           Resolves on completion
+     * @returns {Promise}           Resolves on completion
      */
     public async disableWidgetAssets(widgetType: WidgetType, widgetId: string): Promise<void> {
         const url = new URL(this.getStarterLink(this.apiUrl + "/widgets/set_assets_state"));
diff --git a/apps/web/src/ScalarMessaging.ts b/apps/web/src/ScalarMessaging.ts
index 840717dead..4971a80671 100644
--- a/apps/web/src/ScalarMessaging.ts
+++ b/apps/web/src/ScalarMessaging.ts
@@ -294,7 +294,7 @@ import { IntegrationManagers } from "./integrations/IntegrationManagers";
 import { WidgetType } from "./widgets/WidgetType";
 import { objectClone } from "./utils/objects";
 import { EffectiveMembership, getEffectiveMembership } from "./utils/membership";
-import { SdkContextClass } from "./contexts/SDKContext";
+import { SDKContextClass } from "./contexts/SDKContextClass";
 
 enum Action {
     CloseScalar = "close_scalar",
@@ -316,14 +316,14 @@ enum Action {
     ReadEvents = "read_events",
 }
 
-function sendResponse(event: MessageEvent<any>, res: any): void {
+function sendResponse(event: MessageEvent, res: any): void {
     const data = objectClone(event.data);
     data.response = res;
     // @ts-ignore
     event.source.postMessage(data, event.origin);
 }
 
-function sendError(event: MessageEvent<any>, msg: string, nestedError?: Error): void {
+function sendError(event: MessageEvent, msg: string, nestedError?: Error): void {
     logger.error("Action:" + event.data.action + " failed with message: " + msg);
     const data = objectClone(event.data);
     data.response = {
@@ -338,7 +338,7 @@ function sendError(event: MessageEvent<any>, msg: string, nestedError?: Error):
     event.source.postMessage(data, event.origin);
 }
 
-function inviteUser(event: MessageEvent<any>, roomId: string, userId: string): void {
+function inviteUser(event: MessageEvent, roomId: string, userId: string): void {
     logger.log(`Received request to invite ${userId} into room ${roomId}`);
     const client = MatrixClientPeg.get();
     if (!client) {
@@ -372,7 +372,7 @@ function inviteUser(event: MessageEvent<any>, roomId: string, userId: string): v
     );
 }
 
-function kickUser(event: MessageEvent<any>, roomId: string, userId: string): void {
+function kickUser(event: MessageEvent, roomId: string, userId: string): void {
     logger.log(`Received request to kick ${userId} from room ${roomId}`);
     const client = MatrixClientPeg.get();
     if (!client) {
@@ -404,7 +404,7 @@ function kickUser(event: MessageEvent<any>, roomId: string, userId: string): voi
         });
 }
 
-function setWidget(event: MessageEvent<any>, roomId: string | null): void {
+function setWidget(event: MessageEvent, roomId: string | null): void {
     const client = MatrixClientPeg.safeGet();
     const widgetId = event.data.widget_id;
     let widgetType = event.data.type;
@@ -488,7 +488,7 @@ function setWidget(event: MessageEvent<any>, roomId: string | null): void {
     }
 }
 
-function getWidgets(event: MessageEvent<any>, roomId: string | null): void {
+function getWidgets(event: MessageEvent, roomId: string | null): void {
     const client = MatrixClientPeg.get();
     if (!client) {
         sendError(event, _t("widget|error_need_to_be_logged_in"));
@@ -514,7 +514,7 @@ function getWidgets(event: MessageEvent<any>, roomId: string | null): void {
     sendResponse(event, widgetStateEvents);
 }
 
-async function getRoomEncState(event: MessageEvent<any>, roomId: string): Promise<void> {
+async function getRoomEncState(event: MessageEvent, roomId: string): Promise<void> {
     const client = MatrixClientPeg.get();
     if (!client) {
         sendError(event, _t("widget|error_need_to_be_logged_in"));
@@ -530,7 +530,7 @@ async function getRoomEncState(event: MessageEvent<any>, roomId: string): Promis
     sendResponse(event, roomIsEncrypted);
 }
 
-function setPlumbingState(event: MessageEvent<any>, roomId: string, status: string): void {
+function setPlumbingState(event: MessageEvent, roomId: string, status: string): void {
     if (typeof status !== "string") {
         throw new Error("Plumbing state status should be a string");
     }
@@ -552,7 +552,7 @@ function setPlumbingState(event: MessageEvent<any>, roomId: string, status: stri
     );
 }
 
-function setBotOptions(event: MessageEvent<any>, roomId: string, userId: string): void {
+function setBotOptions(event: MessageEvent, roomId: string, userId: string): void {
     logger.log(`Received request to set options for bot ${userId} in room ${roomId}`);
     const client = MatrixClientPeg.get();
     if (!client) {
@@ -572,7 +572,7 @@ function setBotOptions(event: MessageEvent<any>, roomId: string, userId: string)
 }
 
 async function setBotPower(
-    event: MessageEvent<any>,
+    event: MessageEvent,
     roomId: string,
     userId: string,
     level: number,
@@ -613,22 +613,22 @@ async function setBotPower(
     }
 }
 
-function getMembershipState(event: MessageEvent<any>, roomId: string, userId: string): void {
+function getMembershipState(event: MessageEvent, roomId: string, userId: string): void {
     logger.log(`membership_state of ${userId} in room ${roomId} requested.`);
     returnStateEvent(event, roomId, "m.room.member", userId);
 }
 
-function getJoinRules(event: MessageEvent<any>, roomId: string): void {
+function getJoinRules(event: MessageEvent, roomId: string): void {
     logger.log(`join_rules of ${roomId} requested.`);
     returnStateEvent(event, roomId, "m.room.join_rules", "");
 }
 
-function botOptions(event: MessageEvent<any>, roomId: string, userId: string): void {
+function botOptions(event: MessageEvent, roomId: string, userId: string): void {
     logger.log(`bot_options of ${userId} in room ${roomId} requested.`);
     returnStateEvent(event, roomId, "m.room.bot.options", "_" + userId);
 }
 
-function getMembershipCount(event: MessageEvent<any>, roomId: string): void {
+function getMembershipCount(event: MessageEvent, roomId: string): void {
     const client = MatrixClientPeg.get();
     if (!client) {
         sendError(event, _t("widget|error_need_to_be_logged_in"));
@@ -643,7 +643,7 @@ function getMembershipCount(event: MessageEvent<any>, roomId: string): void {
     sendResponse(event, count);
 }
 
-function canSendEvent(event: MessageEvent<any>, roomId: string): void {
+function canSendEvent(event: MessageEvent, roomId: string): void {
     const evType = "" + event.data.event_type; // force stringify
     const isState = Boolean(event.data.is_state);
     const client = MatrixClientPeg.get();
@@ -677,7 +677,7 @@ function canSendEvent(event: MessageEvent<any>, roomId: string): void {
     sendResponse(event, true);
 }
 
-function returnStateEvent(event: MessageEvent<any>, roomId: string, eventType: string, stateKey: string): void {
+function returnStateEvent(event: MessageEvent, roomId: string, eventType: string, stateKey: string): void {
     const client = MatrixClientPeg.get();
     if (!client) {
         sendError(event, _t("widget|error_need_to_be_logged_in"));
@@ -696,7 +696,7 @@ function returnStateEvent(event: MessageEvent<any>, roomId: string, eventType: s
     sendResponse(event, stateEvent.getContent());
 }
 
-async function getOpenIdToken(event: MessageEvent<any>): Promise<void> {
+async function getOpenIdToken(event: MessageEvent): Promise<void> {
     try {
         const tokenObject = await MatrixClientPeg.safeGet().getOpenIdToken();
         sendResponse(event, tokenObject);
@@ -827,7 +827,7 @@ async function readEvents(
         const effectiveStateKey = stateKey === true ? undefined : stateKey;
 
         let events: MatrixEvent[] = [];
-        events = events.concat(room.currentState.getStateEvents(eventType, effectiveStateKey as string) || []);
+        events = events.concat(room.currentState.getStateEvents(eventType, effectiveStateKey!) || []);
         events = events.slice(0, effectiveLimit);
 
         sendResponse(event, {
@@ -841,7 +841,7 @@ async function readEvents(
     }
 }
 
-const onMessage = function (event: MessageEvent<any>): void {
+const onMessage = function (event: MessageEvent): void {
     if (!event.origin) {
         // @ts-ignore - stupid chrome
         event.origin = event.originalEvent.origin;
@@ -903,7 +903,7 @@ const onMessage = function (event: MessageEvent<any>): void {
         }
     }
 
-    if (roomId !== SdkContextClass.instance.roomViewStore.getRoomId()) {
+    if (roomId !== SDKContextClass.instance.roomViewStore.getRoomId()) {
         sendError(event, _t("scalar|error_room_not_visible", { roomId: roomId }));
         return;
     }
@@ -987,7 +987,7 @@ export function stopListening(): void {
     }
     if (listenerCount < 0) {
         // Make an error so we get a stack trace
-        const e = new Error("ScalarMessaging: mismatched startListening / stopListening detected." + " Negative count");
+        const e = new Error("ScalarMessaging: mismatched startListening / stopListening detected. Negative count");
         logger.error(e);
     }
 }
diff --git a/apps/web/test/unit-tests/SdkConfig-test.ts b/apps/web/src/SdkConfig.test.ts
similarity index 92%
rename from apps/web/test/unit-tests/SdkConfig-test.ts
rename to apps/web/src/SdkConfig.test.ts
index 5595a7d584..91a7168b78 100644
--- a/apps/web/test/unit-tests/SdkConfig-test.ts
+++ b/apps/web/src/SdkConfig.test.ts
@@ -6,7 +6,9 @@ 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 SdkConfig, { DEFAULTS } from "../../src/SdkConfig";
+import { describe, it, expect, beforeEach } from "vitest";
+
+import SdkConfig, { DEFAULTS } from "./SdkConfig";
 
 describe("SdkConfig", () => {
     describe("with default values", () => {
diff --git a/apps/web/src/SdkConfig.ts b/apps/web/src/SdkConfig.ts
index 1ad897adb2..9fd10e9fb7 100644
--- a/apps/web/src/SdkConfig.ts
+++ b/apps/web/src/SdkConfig.ts
@@ -8,14 +8,15 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { mergeWith } from "lodash";
+import { type DeepReadonly } from "shared-types";
 
 import { SnakedObject } from "./utils/SnakedObject";
-import { type IConfigOptions } from "./IConfigOptions";
+import { type IConfigOptions, type ConfigOptions } from "./IConfigOptions";
 import { isObject, objectClone } from "./utils/objects";
-import { type DeepPartial, type DeepReadonly, type Defaultize } from "./@types/common";
+import ElementDesktopLogoSvg from "../res/img/element-desktop-logo.svg";
 
 // see element-web config.md for docs, or the IConfigOptions interface for dev docs
-export const DEFAULTS: DeepReadonly<IConfigOptions> = {
+export const DEFAULTS = {
     brand: "Element",
     branding: {
         logo_link_url: "https://element.io",
@@ -33,12 +34,12 @@ export const DEFAULTS: DeepReadonly<IConfigOptions> = {
     integrations_rest_url: "https://scalar.vector.im/api",
     show_labs_settings: false,
     force_verification: false,
+    enable_client_well_known_lookups: true,
 
     jitsi: {
         preferred_domain: "meet.element.io",
     },
     element_call: {
-        use_exclusively: false,
         brand: "Element Call",
     },
 
@@ -74,13 +75,13 @@ export const DEFAULTS: DeepReadonly<IConfigOptions> = {
         android: "https://play.google.com/store/apps/details?id=im.vector.app",
         fdroid: "https://f-droid.org/repository/browse/?fdid=im.vector.app",
     },
-};
+} satisfies ConfigOptions;
 
-export type ConfigOptions = Defaultize<IConfigOptions, typeof DEFAULTS>;
+export type { ConfigOptions };
 
 function mergeConfig(
     config: DeepReadonly<IConfigOptions>,
-    changes: DeepReadonly<DeepPartial<IConfigOptions>>,
+    changes: DeepReadonly<ConfigOptions>,
 ): DeepReadonly<IConfigOptions> {
     // return { ...config, ...changes };
     return mergeWith(objectClone(config), changes, (objValue, srcValue) => {
@@ -100,6 +101,7 @@ type ObjectType<K extends keyof IConfigOptions> = IConfigOptions[K] extends obje
     ? SnakedObject<NonNullable<IConfigOptions[K]>>
     : SnakedObject<NonNullable<IConfigOptions[K]>> | null | undefined;
 
+// oxlint-disable-next-line typescript/no-extraneous-class
 export default class SdkConfig {
     private static instance: DeepReadonly<IConfigOptions>;
     private static fallback: SnakedObject<DeepReadonly<IConfigOptions>>;
@@ -146,7 +148,7 @@ export default class SdkConfig {
         SdkConfig.setInstance(mergeConfig(DEFAULTS, {})); // safe to cast - defaults will be applied
     }
 
-    public static add(cfg: DeepPartial<ConfigOptions>): void {
+    public static add(cfg: DeepReadonly<ConfigOptions>): void {
         SdkConfig.put(mergeConfig(SdkConfig.get(), cfg));
     }
 }
diff --git a/apps/web/test/unit-tests/Searching-test.ts b/apps/web/src/Searching.test.ts
similarity index 90%
rename from apps/web/test/unit-tests/Searching-test.ts
rename to apps/web/src/Searching.test.ts
index 60b34fb345..82a8e4c128 100644
--- a/apps/web/test/unit-tests/Searching-test.ts
+++ b/apps/web/src/Searching.test.ts
@@ -5,21 +5,24 @@ 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 IResultRoomEvents } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import eventSearch from "../../src/Searching";
-import EventIndexPeg from "../../src/indexing/EventIndexPeg";
-import { createTestClient } from "../test-utils";
+import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
+import { type IResultRoomEvents } from "matrix-js-sdk/src/matrix";
+import { createTestClient } from "test-utils";
+
+import eventSearch from "./Searching";
+import EventIndexPeg from "./indexing/EventIndexPeg";
 
 describe("Searching", () => {
     const mockClient = createTestClient();
 
     beforeEach(() => {
-        jest.clearAllMocks();
+        vi.clearAllMocks();
     });
 
     afterEach(() => {
-        jest.restoreAllMocks();
+        vi.restoreAllMocks();
     });
 
     describe("localSearch", () => {
@@ -89,13 +92,13 @@ describe("Searching", () => {
 
             // Mock EventIndex.search to return results with state_key: null
             const mockEventIndex = {
-                search: jest.fn().mockResolvedValue(mockSearchResults),
+                search: vi.fn().mockResolvedValue(mockSearchResults),
             };
-            jest.spyOn(EventIndexPeg, "get").mockReturnValue(mockEventIndex as any);
+            vi.spyOn(EventIndexPeg, "get").mockReturnValue(mockEventIndex as any);
 
             // Mock crypto to indicate room is encrypted
-            jest.spyOn(mockClient, "getCrypto").mockReturnValue({
-                isEncryptionEnabledInRoom: jest.fn().mockResolvedValue(true),
+            vi.spyOn(mockClient, "getCrypto").mockReturnValue({
+                isEncryptionEnabledInRoom: vi.fn().mockResolvedValue(true),
             } as any);
 
             // Perform search in an encrypted room
@@ -152,12 +155,12 @@ describe("Searching", () => {
             };
 
             const mockEventIndex = {
-                search: jest.fn().mockResolvedValue(mockSearchResults),
+                search: vi.fn().mockResolvedValue(mockSearchResults),
             };
-            jest.spyOn(EventIndexPeg, "get").mockReturnValue(mockEventIndex as any);
+            vi.spyOn(EventIndexPeg, "get").mockReturnValue(mockEventIndex as any);
 
-            jest.spyOn(mockClient, "getCrypto").mockReturnValue({
-                isEncryptionEnabledInRoom: jest.fn().mockResolvedValue(true),
+            vi.spyOn(mockClient, "getCrypto").mockReturnValue({
+                isEncryptionEnabledInRoom: vi.fn().mockResolvedValue(true),
             } as any);
 
             const roomId = "!room:example.org";
@@ -222,15 +225,15 @@ describe("Searching", () => {
             };
 
             const mockEventIndex = {
-                search: jest
+                search: vi
                     .fn()
                     .mockResolvedValueOnce(mockSearchResults)
                     .mockResolvedValueOnce({ count: 0, highlights: ["test"] } as IResultRoomEvents),
             };
-            jest.spyOn(EventIndexPeg, "get").mockReturnValue(mockEventIndex as any);
+            vi.spyOn(EventIndexPeg, "get").mockReturnValue(mockEventIndex as any);
 
-            jest.spyOn(mockClient, "getCrypto").mockReturnValue({
-                isEncryptionEnabledInRoom: jest.fn().mockResolvedValue(true),
+            vi.spyOn(mockClient, "getCrypto").mockReturnValue({
+                isEncryptionEnabledInRoom: vi.fn().mockResolvedValue(true),
             } as any);
 
             const roomId = "!room:example.org";
diff --git a/apps/web/src/Searching.ts b/apps/web/src/Searching.ts
index 28f67522ad..47b5456354 100644
--- a/apps/web/src/Searching.ts
+++ b/apps/web/src/Searching.ts
@@ -412,7 +412,7 @@ function combineEventSources(
  * index.
  * @param {object} serverEvents An unprocessed search result from the server.
  *
- * @return {object} A response object that combines the events from the
+ * @returns {object} A response object that combines the events from the
  * different event sources.
  *
  */
@@ -476,7 +476,7 @@ function combineEvents(
  * index.
  * @param {object} serverEvents An unprocessed search result from the server.
  *
- * @return {object} A response object that combines the events from the
+ * @returns {object} A response object that combines the events from the
  * different event sources.
  */
 function combineResponses(
diff --git a/apps/web/test/unit-tests/SlidingSyncManager-test.ts b/apps/web/src/SlidingSyncManager.test.ts
similarity index 81%
rename from apps/web/test/unit-tests/SlidingSyncManager-test.ts
rename to apps/web/src/SlidingSyncManager.test.ts
index 88c3f5e720..5e7b278389 100644
--- a/apps/web/test/unit-tests/SlidingSyncManager-test.ts
+++ b/apps/web/src/SlidingSyncManager.test.ts
@@ -6,30 +6,32 @@ 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 SlidingSync, SlidingSyncEvent, SlidingSyncState } from "matrix-js-sdk/src/sliding-sync";
-import { mocked } from "jest-mock";
-import { ClientEvent, type MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
-import fetchMock from "@fetch-mock/jest";
-import EventEmitter from "events";
-import { waitFor } from "jest-matrix-react";
+// @vitest-environment happy-dom
 
-import { SlidingSyncManager } from "../../src/SlidingSyncManager";
-import { mkStubRoom, stubClient } from "../test-utils";
+import { vi, describe, it, expect, beforeEach } from "vitest";
+import { type SlidingSync, SlidingSyncEvent, SlidingSyncState } from "matrix-js-sdk/src/sliding-sync";
+import { ClientEvent, type MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+import fetchMock from "@fetch-mock/vitest";
+import EventEmitter from "node:events";
+import { waitFor } from "test-utils-rtl";
+import { mkStubRoom, stubClient } from "test-utils";
+
+import { SlidingSyncManager } from "./SlidingSyncManager";
 
 class MockSlidingSync extends EventEmitter {
     lists = {};
     listModifiedCount = 0;
     terminated = false;
     needsResend = false;
-    modifyRoomSubscriptions = jest.fn();
-    getRoomSubscriptions = jest.fn();
-    useCustomSubscription = jest.fn();
-    getListParams = jest.fn();
-    setList = jest.fn();
-    setListRanges = jest.fn();
-    getListData = jest.fn();
-    extensions = jest.fn();
-    desiredRoomSubscriptions = jest.fn();
+    modifyRoomSubscriptions = vi.fn();
+    getRoomSubscriptions = vi.fn();
+    useCustomSubscription = vi.fn();
+    getListParams = vi.fn();
+    setList = vi.fn();
+    setListRanges = vi.fn();
+    getListData = vi.fn();
+    extensions = vi.fn();
+    desiredRoomSubscriptions = vi.fn();
 }
 
 describe("SlidingSyncManager", () => {
@@ -42,7 +44,7 @@ describe("SlidingSyncManager", () => {
         manager = new SlidingSyncManager();
         client = stubClient();
         // by default the client has no rooms: stubClient magically makes rooms annoyingly.
-        mocked(client.getRoom).mockReturnValue(null);
+        vi.mocked(client.getRoom).mockReturnValue(null);
         (manager as any).configure(client, "invalid");
         manager.slidingSync = slidingSync;
         fetchMock.get("https://proxy/client/server.json", {});
@@ -51,9 +53,9 @@ describe("SlidingSyncManager", () => {
     describe("setRoomVisible", () => {
         it("adds a subscription for the room", async () => {
             const roomId = "!room:id";
-            mocked(client.getRoom).mockReturnValue(mkStubRoom(roomId, "foo", client));
+            vi.mocked(client.getRoom).mockReturnValue(mkStubRoom(roomId, "foo", client));
             const subs = new Set<string>();
-            mocked(slidingSync.getRoomSubscriptions).mockReturnValue(subs);
+            vi.mocked(slidingSync.getRoomSubscriptions).mockReturnValue(subs);
             await manager.setRoomVisible(roomId);
             expect(slidingSync.modifyRoomSubscriptions).toHaveBeenCalledWith(new Set<string>([roomId]));
         });
@@ -72,14 +74,14 @@ describe("SlidingSyncManager", () => {
                     },
                 }),
             ]);
-            mocked(client.getRoom).mockImplementation((r: string): Room | null => {
+            vi.mocked(client.getRoom).mockImplementation((r?: string): Room | null => {
                 if (roomId === r) {
                     return room;
                 }
                 return null;
             });
             const subs = new Set<string>();
-            mocked(slidingSync.getRoomSubscriptions).mockReturnValue(subs);
+            vi.mocked(slidingSync.getRoomSubscriptions).mockReturnValue(subs);
             await manager.setRoomVisible(roomId);
             expect(slidingSync.modifyRoomSubscriptions).toHaveBeenCalledWith(new Set<string>([roomId]));
             // we aren't prescriptive about what the sub name is.
@@ -88,11 +90,11 @@ describe("SlidingSyncManager", () => {
 
         it("waits if the room is not yet known", async () => {
             const roomId = "!room:id";
-            mocked(client.getRoom).mockReturnValue(null);
+            vi.mocked(client.getRoom).mockReturnValue(null);
             const subs = new Set<string>();
-            mocked(slidingSync.getRoomSubscriptions).mockReturnValue(subs);
+            vi.mocked(slidingSync.getRoomSubscriptions).mockReturnValue(subs);
 
-            const setVisibleDone = jest.fn();
+            const setVisibleDone = vi.fn();
             manager.setRoomVisible(roomId).then(setVisibleDone);
 
             await waitFor(() => expect(client.getRoom).toHaveBeenCalledWith(roomId));
@@ -100,7 +102,7 @@ describe("SlidingSyncManager", () => {
             expect(setVisibleDone).not.toHaveBeenCalled();
 
             const stubRoom = mkStubRoom(roomId, "foo", client);
-            mocked(client.getRoom).mockReturnValue(stubRoom);
+            vi.mocked(client.getRoom).mockReturnValue(stubRoom);
             client.emit(ClientEvent.Room, stubRoom);
 
             await waitFor(() => expect(setVisibleDone).toHaveBeenCalled());
@@ -110,7 +112,7 @@ describe("SlidingSyncManager", () => {
     describe("ensureListRegistered", () => {
         it("creates a new list based on the key", async () => {
             const listKey = "key";
-            mocked(slidingSync.getListParams).mockReturnValue(null);
+            vi.mocked(slidingSync.getListParams).mockReturnValue(null);
             await manager.ensureListRegistered(listKey, {
                 sort: ["by_recency"],
             });
@@ -124,7 +126,7 @@ describe("SlidingSyncManager", () => {
 
         it("updates an existing list based on the key", async () => {
             const listKey = "key";
-            mocked(slidingSync.getListParams).mockReturnValue({
+            vi.mocked(slidingSync.getListParams).mockReturnValue({
                 ranges: [[0, 42]],
             });
             await manager.ensureListRegistered(listKey, {
@@ -141,7 +143,7 @@ describe("SlidingSyncManager", () => {
 
         it("updates ranges on an existing list based on the key if there's no other changes", async () => {
             const listKey = "key";
-            mocked(slidingSync.getListParams).mockReturnValue({
+            vi.mocked(slidingSync.getListParams).mockReturnValue({
                 ranges: [[0, 42]],
             });
             await manager.ensureListRegistered(listKey, {
@@ -153,7 +155,7 @@ describe("SlidingSyncManager", () => {
 
         it("no-ops for idential changes", async () => {
             const listKey = "key";
-            mocked(slidingSync.getListParams).mockReturnValue({
+            vi.mocked(slidingSync.getListParams).mockReturnValue({
                 ranges: [[0, 42]],
                 sort: ["by_recency"],
             });
@@ -170,7 +172,7 @@ describe("SlidingSyncManager", () => {
         it("requests in expanding batchSizes", async () => {
             const gapMs = 1;
             const batchSize = 10;
-            mocked(slidingSync.getListData).mockImplementation((key) => {
+            vi.mocked(slidingSync.getListData).mockImplementation((key) => {
                 return {
                     joinedCount: 64,
                     roomIndexToRoomId: {},
@@ -201,7 +203,7 @@ describe("SlidingSyncManager", () => {
         it("handles accounts with zero rooms", async () => {
             const gapMs = 1;
             const batchSize = 10;
-            mocked(slidingSync.getListData).mockImplementation((key) => {
+            vi.mocked(slidingSync.getListData).mockImplementation((key) => {
                 return {
                     joinedCount: 0,
                     roomIndexToRoomId: {},
@@ -219,7 +221,7 @@ describe("SlidingSyncManager", () => {
             SlidingSyncManager.serverSupportsSlidingSync = false;
         });
         it("shorts out if the server has 'native' sliding sync support", async () => {
-            jest.spyOn(manager, "nativeSlidingSyncSupport").mockResolvedValue(true);
+            vi.spyOn(manager, "nativeSlidingSyncSupport").mockResolvedValue(true);
             expect(SlidingSyncManager.serverSupportsSlidingSync).toBeFalsy();
             await manager.checkSupport(client);
             expect(SlidingSyncManager.serverSupportsSlidingSync).toBeTruthy();
@@ -230,8 +232,8 @@ describe("SlidingSyncManager", () => {
 
         beforeEach(() => {
             untypedManager = manager;
-            jest.spyOn(untypedManager, "configure");
-            jest.spyOn(untypedManager, "startSpidering");
+            vi.spyOn(untypedManager, "configure");
+            vi.spyOn(untypedManager, "startSpidering");
         });
         it("uses the baseUrl", async () => {
             await manager.setup(client);
diff --git a/apps/web/src/SlidingSyncManager.ts b/apps/web/src/SlidingSyncManager.ts
index 815e438da7..e92bf83fa0 100644
--- a/apps/web/src/SlidingSyncManager.ts
+++ b/apps/web/src/SlidingSyncManager.ts
@@ -253,9 +253,9 @@ export class SlidingSyncManager {
         try {
             // if we only have range changes then call a different function so we don't nuke the list from before
             if (updateArgs.ranges && Object.keys(updateArgs).length === 1) {
-                await this.slidingSync!.setListRanges(listKey, updateArgs.ranges);
+                this.slidingSync!.setListRanges(listKey, updateArgs.ranges);
             } else {
-                await this.slidingSync!.setList(listKey, list);
+                this.slidingSync!.setList(listKey, list);
             }
         } catch (err) {
             logger.debug("ensureListRegistered: update failed txn_id=", err);
@@ -391,7 +391,7 @@ export class SlidingSyncManager {
     /**
      * Check if the server "natively" supports sliding sync (with an unstable endpoint).
      * @param client The MatrixClient to use
-     * @return Whether the "native" (unstable) endpoint is supported
+     * @returns Whether the "native" (unstable) endpoint is supported
      */
     public async nativeSlidingSyncSupport(client: MatrixClient): Promise<boolean> {
         // Per https://github.com/matrix-org/matrix-spec-proposals/pull/3575/files#r1589542561
diff --git a/apps/web/test/unit-tests/SupportedBrowser-test.ts b/apps/web/src/SupportedBrowser.test.ts
similarity index 82%
rename from apps/web/test/unit-tests/SupportedBrowser-test.ts
rename to apps/web/src/SupportedBrowser.test.ts
index 1f63dfdf07..f60a9523fa 100644
--- a/apps/web/test/unit-tests/SupportedBrowser-test.ts
+++ b/apps/web/src/SupportedBrowser.test.ts
@@ -6,17 +6,20 @@ 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.
 */
 
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach } from "vitest";
 import { logger } from "matrix-js-sdk/src/logger";
 
-import { getBrowserSupport, checkBrowserSupport, LOCAL_STORAGE_KEY } from "../../src/SupportedBrowser";
-import ToastStore from "../../src/stores/ToastStore";
-import GenericToast from "../../src/components/views/toasts/GenericToast";
+import { getBrowserSupport, checkBrowserSupport, LOCAL_STORAGE_KEY } from "./SupportedBrowser";
+import ToastStore from "./stores/ToastStore";
+import GenericToast from "./components/views/toasts/GenericToast";
 
-jest.mock("matrix-js-sdk/src/logger");
+vi.mock("matrix-js-sdk/src/logger");
 
 describe("SupportedBrowser", () => {
     beforeEach(() => {
-        jest.resetAllMocks();
+        vi.resetAllMocks();
         localStorage.clear();
         getBrowserSupport.clear();
     });
@@ -24,8 +27,8 @@ describe("SupportedBrowser", () => {
     const testUserAgentFactory =
         (expectedWarning?: string) =>
         async (userAgent: string): Promise<void> => {
-            const toastSpy = jest.spyOn(ToastStore.sharedInstance(), "addOrReplaceToast");
-            const warnLogSpy = jest.spyOn(logger, "warn");
+            const toastSpy = vi.spyOn(ToastStore.sharedInstance(), "addOrReplaceToast");
+            const warnLogSpy = vi.spyOn(logger, "warn");
             Object.defineProperty(window, "navigator", { value: { userAgent: userAgent }, writable: true });
             checkBrowserSupport();
             if (expectedWarning) {
@@ -67,17 +70,17 @@ describe("SupportedBrowser", () => {
         // Safari 26.0 on macOS
         "Mozilla/5.0 (Macintosh; Intel Mac OS X 15_7_2) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 Safari/605.1.15",
         // Latest Firefox on macOS Sonoma
-        "Mozilla/5.0 (Macintosh; Intel Mac OS X 15.7; rv:150.0) Gecko/20100101 Firefox/150.0",
+        "Mozilla/5.0 (Macintosh; Intel Mac OS X 15.7; rv:152.0) Gecko/20100101 Firefox/152.0",
         // Latest Edge on Windows
-        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36 Edg/146.0.3856.84",
+        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/150.0.0.0 Safari/537.36 Edg/150.0.4078.65",
         // Latest Edge on macOS
-        "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36 Edg/146.0.3856.84",
+        "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/150.0.0.0 Safari/537.36 Edg/150.0.4078.65",
         // Latest Firefox on Windows
-        "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:150.0) Gecko/20100101 Firefox/150.0",
+        "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:152.0) Gecko/20100101 Firefox/152.0",
         // Latest Firefox on Linux
-        "Mozilla/5.0 (X11; Linux i686; rv:150.0) Gecko/20100101 Firefox/150.0",
+        "Mozilla/5.0 (X11; Linux i686; rv:152.0) Gecko/20100101 Firefox/152.0",
         // Latest Chrome on Windows
-        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36",
+        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/150.0.0.0 Safari/537.36",
     ])("should not warn for supported browsers", testUserAgentFactory());
 
     it.each([
@@ -91,8 +94,8 @@ describe("SupportedBrowser", () => {
     );
 
     it("should not warn for unsupported browser if user accepted already", async () => {
-        const toastSpy = jest.spyOn(ToastStore.sharedInstance(), "addOrReplaceToast");
-        const warnLogSpy = jest.spyOn(logger, "warn");
+        const toastSpy = vi.spyOn(ToastStore.sharedInstance(), "addOrReplaceToast");
+        const warnLogSpy = vi.spyOn(logger, "warn");
         const userAgent =
             "Mozilla/5.0 (X11; CrOS x86_64 15633.69.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.6045.212 Safari/537.36";
         Object.defineProperty(window, "navigator", { value: { userAgent: userAgent }, writable: true });
diff --git a/apps/web/src/Terms.ts b/apps/web/src/Terms.ts
index 002ad0464f..21db4b738c 100644
--- a/apps/web/src/Terms.ts
+++ b/apps/web/src/Terms.ts
@@ -18,7 +18,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 
 import Modal from "./Modal";
 import TermsDialog from "./components/views/dialogs/TermsDialog";
-import { pickBestLanguage } from "./languageHandler.tsx";
+import { pickBestLanguage } from "./i18n/utils";
 
 export class TermsNotSignedError extends Error {}
 
diff --git a/apps/web/src/TextForEvent.tsx b/apps/web/src/TextForEvent.tsx
index b9ea96dcd8..41d0abf8f1 100644
--- a/apps/web/src/TextForEvent.tsx
+++ b/apps/web/src/TextForEvent.tsx
@@ -23,6 +23,7 @@ import { KnownMembership } from "matrix-js-sdk/src/types";
 import { logger } from "matrix-js-sdk/src/logger";
 import { removeDirectionOverrideChars } from "matrix-js-sdk/src/utils";
 import { type PollStartEvent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
+import { type IRTCNotificationContent } from "matrix-js-sdk/src/matrixrtc";
 
 import { _t } from "./languageHandler";
 import * as Roles from "./Roles";
@@ -32,7 +33,7 @@ import { ALL_RULE_TYPES, ROOM_RULE_TYPES, SERVER_RULE_TYPES, USER_RULE_TYPES } f
 import { WIDGET_LAYOUT_EVENT_TYPE } from "./stores/widgets/WidgetLayoutStore";
 import { RightPanelPhases } from "./stores/right-panel/RightPanelStorePhases";
 import defaultDispatcher from "./dispatcher/dispatcher";
-import { RoomSettingsTab } from "./components/views/dialogs/RoomSettingsDialog";
+import { RoomSettingsTab } from "./components/views/dialogs/RoomSettingsDialog-tab";
 import AccessibleButton from "./components/views/elements/AccessibleButton";
 import RightPanelStore from "./stores/right-panel/RightPanelStore";
 import { highlightEvent, isLocationEvent } from "./utils/EventUtils";
@@ -48,7 +49,7 @@ function getRoomMemberDisplayname(client: MatrixClient, event: MatrixEvent, user
 }
 
 function textForCallEvent(event: MatrixEvent, client: MatrixClient): () => string {
-    const roomName = client.getRoom(event.getRoomId()!)?.name;
+    const roomName = client.getRoom(event.getRoomId())?.name;
     const isSupported = client.supportsVoip();
 
     return isSupported
@@ -60,26 +61,47 @@ function textForCallEvent(event: MatrixEvent, client: MatrixClient): () => strin
 // any text to display at all. For this reason they return deferred values
 // to avoid the expense of looking up translations when they're not needed.
 
-function textForCallInviteEvent(event: MatrixEvent, client: MatrixClient): (() => string) | null {
-    const senderName = getSenderName(event);
-    // FIXME: Find a better way to determine this from the event?
-    const isVoice = !event.getContent().offer?.sdp?.includes("m=video");
-    const isSupported = client.supportsVoip();
-
-    // This ladder could be reduced down to a couple string variables, however other languages
+function getCallInviteText(isVoice: boolean, isSupported: boolean, senderName: string): () => string {
+    // This logic could be reduced down to dynamic string keys, however other languages
     // can have a hard time translating those strings. In an effort to make translations easier
-    // and more accurate, we break out the string-based variables to a couple booleans.
-    if (isVoice && isSupported) {
-        return () => _t("timeline|m.call.invite|voice_call", { senderName });
-    } else if (isVoice && !isSupported) {
-        return () => _t("timeline|m.call.invite|voice_call_unsupported", { senderName });
-    } else if (!isVoice && isSupported) {
-        return () => _t("timeline|m.call.invite|video_call", { senderName });
-    } else if (!isVoice && !isSupported) {
-        return () => _t("timeline|m.call.invite|video_call_unsupported", { senderName });
+    // and more accurate, we use explicit strings for each combination.
+    if (isVoice) {
+        return isSupported
+            ? () => _t("timeline|m.call.invite|voice_call", { senderName })
+            : () => _t("timeline|m.call.invite|voice_call_unsupported", { senderName });
     }
 
-    return null;
+    return isSupported
+        ? () => _t("timeline|m.call.invite|video_call", { senderName })
+        : () => _t("timeline|m.call.invite|video_call_unsupported", { senderName });
+}
+
+/**
+ * Resolves the textual content for incoming legacy WebRTC call events.
+ */
+function textForCallInviteEvent(event: MatrixEvent, client: MatrixClient): (() => string) | null {
+    const senderName = getSenderName(event);
+    const content = event.getContent();
+
+    // Fallback for legacy WebRTC signaling
+    // FIXME: Find a better way to determine this from the event?
+    const isVoice = !content.offer?.sdp?.includes("m=video");
+    const isSupported = client.supportsVoip();
+
+    return getCallInviteText(isVoice, isSupported, senderName);
+}
+
+/**
+ * Resolves the textual content for incoming MatrixRTC notifications (MSC4075).
+ */
+function textForRTCNotificationEvent(event: MatrixEvent, client: MatrixClient): (() => string) | null {
+    const senderName = getSenderName(event);
+    const content = event.getContent<IRTCNotificationContent>();
+
+    const isVoice = content["m.call.intent"] === "audio";
+    const isSupported = client.supportsVoip();
+
+    return getCallInviteText(isVoice, isSupported, senderName);
 }
 
 enum Modification {
@@ -881,6 +903,7 @@ const handlers: IHandlers = {
     [EventType.RoomMessage]: textForMessageEvent,
     [EventType.Sticker]: textForMessageEvent,
     [EventType.CallInvite]: textForCallInviteEvent,
+    [EventType.RTCNotification]: textForRTCNotificationEvent,
     [M_POLL_START.name]: textForPollStartEvent,
     [M_POLL_END.name]: textForPollEndEvent,
     [M_POLL_START.altName]: textForPollStartEvent,
diff --git a/apps/web/test/unit-tests/TimezoneHandler-test.ts b/apps/web/src/TimezoneHandler.test.ts
similarity index 85%
rename from apps/web/test/unit-tests/TimezoneHandler-test.ts
rename to apps/web/src/TimezoneHandler.test.ts
index be7628712a..dcce6ff11b 100644
--- a/apps/web/test/unit-tests/TimezoneHandler-test.ts
+++ b/apps/web/src/TimezoneHandler.test.ts
@@ -8,7 +8,11 @@ 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 * as tzh from "../../src/TimezoneHandler";
+// @vitest-environment happy-dom
+
+import { describe, it, expect } from "vitest";
+
+import * as tzh from "./TimezoneHandler";
 
 describe("TimezoneHandler", () => {
     it("should support setting a user timezone", async () => {
diff --git a/apps/web/src/TimezoneHandler.ts b/apps/web/src/TimezoneHandler.ts
index eb1bacef5f..cef4b15e4f 100644
--- a/apps/web/src/TimezoneHandler.ts
+++ b/apps/web/src/TimezoneHandler.ts
@@ -22,7 +22,6 @@ export function getUserTimezone(): string | undefined {
 
 /**
  * Set in the settings the given timezone
- * @timezone
  */
 export function setUserTimezone(timezone: string): Promise<void> {
     return SettingsStore.setValue(USER_TIMEZONE_KEY, null, SettingLevel.DEVICE, timezone);
diff --git a/apps/web/test/unit-tests/UserActivity-test.ts b/apps/web/src/UserActivity.test.ts
similarity index 75%
rename from apps/web/test/unit-tests/UserActivity-test.ts
rename to apps/web/src/UserActivity.test.ts
index 0c3fd1ca49..d4cd566bec 100644
--- a/apps/web/test/unit-tests/UserActivity-test.ts
+++ b/apps/web/src/UserActivity.test.ts
@@ -5,9 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import EventEmitter from "events";
+// @vitest-environment happy-dom
 
-import UserActivity from "../../src/UserActivity";
+import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
+import EventEmitter from "node:events";
+
+import UserActivity from "./UserActivity";
 
 class FakeDomEventEmitter extends EventEmitter {
     addEventListener(what: string, l: (...args: any[]) => void) {
@@ -29,7 +32,7 @@ describe("UserActivity", function () {
         fakeDocument = new FakeDomEventEmitter();
         userActivity = new UserActivity(fakeWindow as unknown as Window, fakeDocument as unknown as Document);
         userActivity.start();
-        jest.useFakeTimers();
+        vi.useFakeTimers();
     });
 
     afterEach(function () {
@@ -49,7 +52,7 @@ describe("UserActivity", function () {
     });
 
     it("should not consider user active after activity if no window focus", function () {
-        fakeDocument.hasFocus = jest.fn().mockReturnValue(false);
+        fakeDocument.hasFocus = vi.fn().mockReturnValue(false);
 
         userActivity.onUserActivity({ type: "event" } as Event);
         expect(userActivity.userActiveNow()).toBe(false);
@@ -57,62 +60,62 @@ describe("UserActivity", function () {
     });
 
     it("should consider user active shortly after activity", function () {
-        fakeDocument.hasFocus = jest.fn().mockReturnValue(true);
+        fakeDocument.hasFocus = vi.fn().mockReturnValue(true);
 
         userActivity.onUserActivity({ type: "event" } as Event);
         expect(userActivity.userActiveNow()).toBe(true);
         expect(userActivity.userActiveRecently()).toBe(true);
-        jest.advanceTimersByTime(200);
+        vi.advanceTimersByTime(200);
         expect(userActivity.userActiveNow()).toBe(true);
         expect(userActivity.userActiveRecently()).toBe(true);
     });
 
     it("should consider user not active after 10s of no activity", function () {
-        fakeDocument.hasFocus = jest.fn().mockReturnValue(true);
+        fakeDocument.hasFocus = vi.fn().mockReturnValue(true);
 
         userActivity.onUserActivity({ type: "event" } as Event);
-        jest.advanceTimersByTime(10000);
+        vi.advanceTimersByTime(10000);
         expect(userActivity.userActiveNow()).toBe(false);
     });
 
     it("should consider user passive after 10s of no activity", function () {
-        fakeDocument.hasFocus = jest.fn().mockReturnValue(true);
+        fakeDocument.hasFocus = vi.fn().mockReturnValue(true);
 
         userActivity.onUserActivity({ type: "event" } as Event);
-        jest.advanceTimersByTime(10000);
+        vi.advanceTimersByTime(10000);
         expect(userActivity.userActiveRecently()).toBe(true);
     });
 
     it("should not consider user passive after 10s if window un-focused", function () {
-        fakeDocument.hasFocus = jest.fn().mockReturnValue(true);
+        fakeDocument.hasFocus = vi.fn().mockReturnValue(true);
 
         userActivity.onUserActivity({ type: "event" } as Event);
-        jest.advanceTimersByTime(10000);
+        vi.advanceTimersByTime(10000);
 
-        fakeDocument.hasFocus = jest.fn().mockReturnValue(false);
+        fakeDocument.hasFocus = vi.fn().mockReturnValue(false);
         fakeWindow.emit("blur", {});
 
         expect(userActivity.userActiveRecently()).toBe(false);
     });
 
     it("should not consider user passive after 3 mins", function () {
-        fakeDocument.hasFocus = jest.fn().mockReturnValue(true);
+        fakeDocument.hasFocus = vi.fn().mockReturnValue(true);
 
         userActivity.onUserActivity({ type: "event" } as Event);
-        jest.advanceTimersByTime(3 * 60 * 1000);
+        vi.advanceTimersByTime(3 * 60 * 1000);
 
         expect(userActivity.userActiveRecently()).toBe(false);
     });
 
     it("should extend timer on activity", function () {
-        fakeDocument.hasFocus = jest.fn().mockReturnValue(true);
+        fakeDocument.hasFocus = vi.fn().mockReturnValue(true);
 
         userActivity.onUserActivity({ type: "event" } as Event);
-        jest.advanceTimersByTime(1 * 60 * 1000);
+        vi.advanceTimersByTime(1 * 60 * 1000);
         userActivity.onUserActivity({ type: "event" } as Event);
-        jest.advanceTimersByTime(1 * 60 * 1000);
+        vi.advanceTimersByTime(1 * 60 * 1000);
         userActivity.onUserActivity({ type: "event" } as Event);
-        jest.advanceTimersByTime(1 * 60 * 1000);
+        vi.advanceTimersByTime(1 * 60 * 1000);
 
         expect(userActivity.userActiveRecently()).toBe(true);
     });
diff --git a/apps/web/src/UserActivity.ts b/apps/web/src/UserActivity.ts
index 61f786e861..faf231ecdc 100644
--- a/apps/web/src/UserActivity.ts
+++ b/apps/web/src/UserActivity.ts
@@ -101,7 +101,9 @@ export default class UserActivity {
                     // as we fork the promise here,
                     // avoid unhandled rejection warnings
                 })
-                .catch((err) => {});
+                .catch(() => {
+                    // Do nothing
+                });
         }
     }
 
diff --git a/apps/web/test/unit-tests/WorkerManager-test.ts b/apps/web/src/WorkerManager.test.ts
similarity index 92%
rename from apps/web/test/unit-tests/WorkerManager-test.ts
rename to apps/web/src/WorkerManager.test.ts
index f8d85fcda4..5fe9d9c0f7 100644
--- a/apps/web/test/unit-tests/WorkerManager-test.ts
+++ b/apps/web/src/WorkerManager.test.ts
@@ -6,11 +6,13 @@ 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 { WorkerManager } from "../../src/WorkerManager";
+import { vi, describe, it, expect } from "vitest";
+
+import { WorkerManager } from "./WorkerManager";
 
 describe("WorkerManager", () => {
     it("should generate consecutive sequence numbers for each call", () => {
-        const postMessage = jest.fn();
+        const postMessage = vi.fn();
         const manager = new WorkerManager({ postMessage } as unknown as Worker);
 
         manager.call({ data: "One" });
@@ -27,7 +29,7 @@ describe("WorkerManager", () => {
     });
 
     it("should support resolving out of order", async () => {
-        const postMessage = jest.fn();
+        const postMessage = vi.fn();
         const worker = { postMessage } as unknown as Worker;
         const manager = new WorkerManager(worker);
 
diff --git a/apps/web/test/unit-tests/__snapshots__/favicon-test.ts.snap b/apps/web/src/__snapshots__/favicon.test.ts.snap
similarity index 96%
rename from apps/web/test/unit-tests/__snapshots__/favicon-test.ts.snap
rename to apps/web/src/__snapshots__/favicon.test.ts.snap
index f4c22fe3e9..827a17cbfa 100644
--- a/apps/web/test/unit-tests/__snapshots__/favicon-test.ts.snap
+++ b/apps/web/src/__snapshots__/favicon.test.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Favicon should clear a badge if called with a zero value 1`] = `
+exports[`Favicon > should clear a badge if called with a zero value 1`] = `
 [
   {
     "props": {
@@ -236,7 +236,7 @@ exports[`Favicon should clear a badge if called with a zero value 1`] = `
 ]
 `;
 
-exports[`Favicon should draw a badge if called with a non-zero value 1`] = `
+exports[`Favicon > should draw a badge if called with a non-zero value 1`] = `
 [
   {
     "props": {
diff --git a/apps/web/src/accessibility/KeyboardShortcutUtils.ts b/apps/web/src/accessibility/KeyboardShortcutUtils.ts
index a261bf361b..16c7a5a77a 100644
--- a/apps/web/src/accessibility/KeyboardShortcutUtils.ts
+++ b/apps/web/src/accessibility/KeyboardShortcutUtils.ts
@@ -96,13 +96,14 @@ export const getKeyboardShortcuts = (): IKeyboardShortcuts => {
             return true;
         })
         .reduce((o, key) => {
-            o[key as KeyBindingAction] = KEYBOARD_SHORTCUTS[key as KeyBindingAction];
+            o[key] = KEYBOARD_SHORTCUTS[key];
             return o;
         }, {} as IKeyboardShortcuts);
 };
 
 /**
  * Gets keyboard shortcuts that should be presented to the user in the UI.
+ * @knipignore - exported for tests
  */
 export const getKeyboardShortcutsForUI = (): IKeyboardShortcuts => {
     const entries = [...Object.entries(getUIOnlyShortcuts()), ...Object.entries(getKeyboardShortcuts())] as [
diff --git a/apps/web/src/accessibility/LandmarkNavigation.ts b/apps/web/src/accessibility/LandmarkNavigation.ts
index 632c7ec613..9ad30020a6 100644
--- a/apps/web/src/accessibility/LandmarkNavigation.ts
+++ b/apps/web/src/accessibility/LandmarkNavigation.ts
@@ -9,7 +9,6 @@
 import { TimelineRenderingType } from "../contexts/RoomContext";
 import { Action } from "../dispatcher/actions";
 import defaultDispatcher from "../dispatcher/dispatcher";
-import SettingsStore from "../settings/SettingsStore";
 
 export const enum Landmark {
     // This is the space/home button in the left panel.
@@ -33,6 +32,7 @@ const ORDERED_LANDMARKS = [
  * The landmarks are cycled through in the following order:
  * ACTIVE_SPACE_BUTTON <-> ROOM_SEARCH <-> ROOM_LIST <-> MESSAGE_COMPOSER/HOME <-> ACTIVE_SPACE_BUTTON
  */
+// oxlint-disable-next-line typescript/no-extraneous-class
 export class LandmarkNavigation {
     /**
      * Get the next/previous landmark that must be focused from a given landmark
@@ -73,16 +73,10 @@ export class LandmarkNavigation {
 const landmarkToDomElementMap: Record<Landmark, () => HTMLElement | null | undefined> = {
     [Landmark.ACTIVE_SPACE_BUTTON]: () => document.querySelector<HTMLElement>(".mx_SpaceButton_active"),
 
-    [Landmark.ROOM_SEARCH]: () =>
-        SettingsStore.getValue("feature_new_room_list")
-            ? document.querySelector<HTMLElement>("#room-list-search-button")
-            : document.querySelector<HTMLElement>(".mx_RoomSearch"),
+    [Landmark.ROOM_SEARCH]: () => document.querySelector<HTMLElement>("#room-list-search-button"),
     [Landmark.ROOM_LIST]: () =>
-        SettingsStore.getValue("feature_new_room_list")
-            ? document.querySelector<HTMLElement>(".mx_RoomListItemView_selected") ||
-              document.querySelector<HTMLElement>(".mx_RoomListItemView")
-            : document.querySelector<HTMLElement>(".mx_RoomTile_selected") ||
-              document.querySelector<HTMLElement>(".mx_RoomTile"),
+        document.querySelector<HTMLElement>(".mx_RoomListItemView_selected") ||
+        document.querySelector<HTMLElement>(".mx_RoomListItemView"),
 
     [Landmark.MESSAGE_COMPOSER_OR_HOME]: () => {
         const isComposerOpen = !!document.querySelector(".mx_MessageComposer");
diff --git a/apps/web/src/accessibility/RovingTabIndex.tsx b/apps/web/src/accessibility/RovingTabIndex.tsx
index 040b6d27be..b44c5ed377 100644
--- a/apps/web/src/accessibility/RovingTabIndex.tsx
+++ b/apps/web/src/accessibility/RovingTabIndex.tsx
@@ -20,7 +20,7 @@ export { findNextSiblingElement, RovingTabIndexContext } from "@element-hq/web-s
 export { checkInputableElement } from "@element-hq/web-shared-components";
 export { RovingStateActionType } from "@element-hq/web-shared-components";
 export { useRovingTabIndex } from "@element-hq/web-shared-components";
-export type { IAction, IState } from "@element-hq/web-shared-components";
+export type { IState } from "@element-hq/web-shared-components";
 
 /**
  * Module to simplify implementing the Roving TabIndex accessibility technique
@@ -35,7 +35,7 @@ export type { IAction, IState } from "@element-hq/web-shared-components";
  * https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets#Technique_1_Roving_tabindex
  */
 
-const getWebRovingAction = (ev: React.KeyboardEvent): RovingAction | undefined => {
+export const getWebRovingAction = (ev: React.KeyboardEvent): RovingAction | undefined => {
     switch (getKeyBindingsManager().getAccessibilityAction(ev)) {
         case KeyBindingAction.Home:
             return RovingAction.Home;
@@ -56,12 +56,11 @@ const getWebRovingAction = (ev: React.KeyboardEvent): RovingAction | undefined =
     }
 };
 
-type IProps = Omit<RovingTabIndexProviderProps, "getAction">;
+type IRovingTabIndexProps = Omit<RovingTabIndexProviderProps, "getAction">;
 
-export const RovingTabIndexProvider: React.FC<IProps> = (props) => {
+export const RovingTabIndexProvider: React.FC<IRovingTabIndexProps> = (props) => {
     return <SharedRovingTabIndexProvider {...props} getAction={getWebRovingAction} />;
 };
 
 // re-export the semantic helper components for simplicity
-export { RovingTabIndexWrapper } from "./roving/RovingTabIndexWrapper";
 export { RovingAccessibleButton } from "./roving/RovingAccessibleButton";
diff --git a/apps/web/src/accessibility/Toolbar.tsx b/apps/web/src/accessibility/Toolbar.tsx
index 5583292e48..2d7ab70f39 100644
--- a/apps/web/src/accessibility/Toolbar.tsx
+++ b/apps/web/src/accessibility/Toolbar.tsx
@@ -51,6 +51,8 @@ const Toolbar = ({ children, ref, ...props }: IProps): JSX.Element => {
     return (
         <RovingTabIndexProvider handleHomeEnd handleLeftRight handleUpDown onKeyDown={onKeyDown}>
             {({ onKeyDownHandler }) => (
+                // This may be wrong but seems to work, this is a roving-toolbar, so the focus follows one of the children
+                // oxlint-disable-next-line jsx-a11y/interactive-supports-focus
                 <div {...props} onKeyDown={onKeyDownHandler} role="toolbar" ref={ref}>
                     {children}
                 </div>
diff --git a/apps/web/src/accessibility/context_menu/ContextMenuButton.tsx b/apps/web/src/accessibility/context_menu/ContextMenuButton.tsx
index df16d15821..16b1606dca 100644
--- a/apps/web/src/accessibility/context_menu/ContextMenuButton.tsx
+++ b/apps/web/src/accessibility/context_menu/ContextMenuButton.tsx
@@ -12,15 +12,15 @@ import React, { type Ref, type JSX } from "react";
 
 import AccessibleButton, { type ButtonProps } from "../../components/views/elements/AccessibleButton";
 
-type Props<T extends keyof HTMLElementTagNameMap> = ButtonProps<T> & {
+type Props = Omit<ButtonProps<"div">, "element" | "ref"> & {
     label?: string;
     // whether the context menu is currently open
     isExpanded: boolean;
-    ref?: Ref<HTMLElementTagNameMap[T]>;
+    ref?: Ref<HTMLElement>;
 };
 
 // Semantic component for representing the AccessibleButton which launches a <ContextMenu />
-export const ContextMenuButton = function <T extends keyof HTMLElementTagNameMap>({
+export const ContextMenuButton = function ({
     label,
     isExpanded,
     children,
@@ -28,7 +28,7 @@ export const ContextMenuButton = function <T extends keyof HTMLElementTagNameMap
     onContextMenu,
     ref,
     ...props
-}: Props<T>): JSX.Element {
+}: Props): JSX.Element {
     return (
         <AccessibleButton
             {...props}
diff --git a/apps/web/src/accessibility/context_menu/ContextMenuTooltipButton.tsx b/apps/web/src/accessibility/context_menu/ContextMenuTooltipButton.tsx
index b0d0156c0f..e5cb394b2e 100644
--- a/apps/web/src/accessibility/context_menu/ContextMenuTooltipButton.tsx
+++ b/apps/web/src/accessibility/context_menu/ContextMenuTooltipButton.tsx
@@ -8,24 +8,25 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX } from "react";
+import React, { type JSX, type Ref } from "react";
 
 import AccessibleButton, { type ButtonProps } from "../../components/views/elements/AccessibleButton";
 
-type Props<T extends keyof HTMLElementTagNameMap> = ButtonProps<T> & {
+type Props = Omit<ButtonProps<"div">, "element" | "ref"> & {
     // whether the context menu is currently open
     isExpanded: boolean;
+    ref?: Ref<HTMLElement>;
 };
 
 // Semantic component for representing the AccessibleButton which launches a <ContextMenu />
-export const ContextMenuTooltipButton = function <T extends keyof HTMLElementTagNameMap>({
+export const ContextMenuTooltipButton = function ({
     isExpanded,
     children,
     onClick,
     onContextMenu,
     ref,
     ...props
-}: Props<T>): JSX.Element {
+}: Props): JSX.Element {
     return (
         <AccessibleButton
             {...props}
diff --git a/apps/web/src/accessibility/context_menu/StyledMenuItemCheckbox.tsx b/apps/web/src/accessibility/context_menu/StyledMenuItemCheckbox.tsx
deleted file mode 100644
index 82175199ae..0000000000
--- a/apps/web/src/accessibility/context_menu/StyledMenuItemCheckbox.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-/*
-Copyright 2024,2025 New Vector Ltd.
-Copyright 2019 The Matrix.org Foundation C.I.C.
-Copyright 2018 New Vector Ltd
-Copyright 2015, 2016 OpenMarket 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 { useRovingTabIndex } from "../RovingTabIndex";
-import StyledCheckbox from "../../components/views/elements/StyledCheckbox";
-import { KeyBindingAction } from "../KeyboardShortcuts";
-import { getKeyBindingsManager } from "../../KeyBindingsManager";
-
-interface IProps extends React.ComponentProps<typeof StyledCheckbox> {
-    onChange(this: void): void; // we handle keyup/down ourselves so lose the ChangeEvent
-    onClose(this: void): void; // gets called after onChange on KeyBindingAction.ActivateSelectedButton
-}
-
-// Semantic component for representing a styled role=menuitemcheckbox
-export const StyledMenuItemCheckbox: React.FC<IProps> = ({ children, onChange, onClose, ...props }) => {
-    const [onFocus, isActive, ref] = useRovingTabIndex<HTMLInputElement>();
-
-    const onKeyDown = (e: React.KeyboardEvent): void => {
-        let handled = true;
-        const action = getKeyBindingsManager().getAccessibilityAction(e);
-
-        switch (action) {
-            case KeyBindingAction.Space:
-                onChange();
-                break;
-            case KeyBindingAction.Enter:
-                onChange();
-                // Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
-                onClose();
-                break;
-            default:
-                handled = false;
-        }
-
-        if (handled) {
-            e.stopPropagation();
-            e.preventDefault();
-        }
-    };
-    const onKeyUp = (e: React.KeyboardEvent): void => {
-        const action = getKeyBindingsManager().getAccessibilityAction(e);
-        switch (action) {
-            case KeyBindingAction.Space:
-            case KeyBindingAction.Enter:
-                // prevent the input default handler as we handle it on keydown to match
-                // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-2/menubar-2.html
-                e.stopPropagation();
-                e.preventDefault();
-                break;
-        }
-    };
-    return (
-        <StyledCheckbox
-            {...props}
-            role="menuitemcheckbox"
-            onChange={onChange}
-            onKeyDown={onKeyDown}
-            onKeyUp={onKeyUp}
-            onFocus={onFocus}
-            inputRef={ref}
-            tabIndex={isActive ? 0 : -1}
-        >
-            {children}
-        </StyledCheckbox>
-    );
-};
diff --git a/apps/web/src/accessibility/context_menu/StyledMenuItemRadio.tsx b/apps/web/src/accessibility/context_menu/StyledMenuItemRadio.tsx
deleted file mode 100644
index 62213b33c6..0000000000
--- a/apps/web/src/accessibility/context_menu/StyledMenuItemRadio.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2019 The Matrix.org Foundation C.I.C.
-Copyright 2018 New Vector Ltd
-Copyright 2015, 2016 OpenMarket 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 { useRovingTabIndex } from "../RovingTabIndex";
-import StyledRadioButton from "../../components/views/elements/StyledRadioButton";
-import { KeyBindingAction } from "../KeyboardShortcuts";
-import { getKeyBindingsManager } from "../../KeyBindingsManager";
-
-interface IProps extends React.ComponentProps<typeof StyledRadioButton> {
-    label?: string;
-    onChange(this: void): void; // we handle keyup/down ourselves so lose the ChangeEvent
-    onClose(this: void): void; // gets called after onChange on KeyBindingAction.Enter
-}
-
-// Semantic component for representing a styled role=menuitemradio
-export const StyledMenuItemRadio: React.FC<IProps> = ({ children, label, onChange, onClose, ...props }) => {
-    const [onFocus, isActive, ref] = useRovingTabIndex<HTMLInputElement>();
-
-    const onKeyDown = (e: React.KeyboardEvent): void => {
-        let handled = true;
-        const action = getKeyBindingsManager().getAccessibilityAction(e);
-
-        switch (action) {
-            case KeyBindingAction.Space:
-                onChange();
-                break;
-            case KeyBindingAction.Enter:
-                onChange();
-                // Implements https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-12
-                onClose();
-                break;
-            default:
-                handled = false;
-        }
-
-        if (handled) {
-            e.stopPropagation();
-            e.preventDefault();
-        }
-    };
-    const onKeyUp = (e: React.KeyboardEvent): void => {
-        const action = getKeyBindingsManager().getAccessibilityAction(e);
-        switch (action) {
-            case KeyBindingAction.Enter:
-            case KeyBindingAction.Space:
-                // prevent the input default handler as we handle it on keydown to match
-                // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-2/menubar-2.html
-                e.stopPropagation();
-                e.preventDefault();
-                break;
-        }
-    };
-    return (
-        <StyledRadioButton
-            {...props}
-            role="menuitemradio"
-            aria-label={label}
-            onChange={onChange}
-            onKeyDown={onKeyDown}
-            onKeyUp={onKeyUp}
-            onFocus={onFocus}
-            inputRef={ref}
-            tabIndex={isActive ? 0 : -1}
-        >
-            {children}
-        </StyledRadioButton>
-    );
-};
diff --git a/apps/web/test/unit-tests/actions/RoomListActions-test.ts b/apps/web/src/actions/RoomListActions.test.ts
similarity index 89%
rename from apps/web/test/unit-tests/actions/RoomListActions-test.ts
rename to apps/web/src/actions/RoomListActions.test.ts
index ecdf6f676d..6d47737b8e 100644
--- a/apps/web/test/unit-tests/actions/RoomListActions-test.ts
+++ b/apps/web/src/actions/RoomListActions.test.ts
@@ -5,33 +5,35 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
 import { type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
-import { mocked } from "jest-mock";
+import { createTestClient, flushPromises, mkRoom } from "test-utils";
 
-import RoomListActions from "../../../src/actions/RoomListActions";
-import { DefaultTagID } from "../../../src/stores/room-list-v3/skip-list/tag";
-import Modal from "../../../src/Modal";
-import * as Rooms from "../../../src/Rooms";
-import { createTestClient, flushPromises, mkRoom } from "../../test-utils";
+import RoomListActions from "./RoomListActions";
+import { DefaultTagID } from "../stores/room-list-v3/skip-list/tag";
+import Modal from "../Modal";
+import * as Rooms from "../Rooms";
 
-jest.mock("../../../src/Modal");
-jest.mock("../../../src/Rooms");
+vi.mock("../Modal");
+vi.mock("../Rooms");
 
 describe("RoomListActions", () => {
     const ROOM_ID = "!room:example.org";
 
     let client: MatrixClient;
     let room: Room;
-    const dispatch = jest.fn();
+    const dispatch = vi.fn();
 
     beforeEach(() => {
         client = createTestClient();
         room = mkRoom(client, ROOM_ID);
-        mocked(Rooms.guessAndSetDMRoom).mockResolvedValue(undefined);
+        vi.mocked(Rooms.guessAndSetDMRoom).mockResolvedValue(undefined);
     });
 
     afterEach(() => {
-        jest.clearAllMocks();
+        vi.clearAllMocks();
     });
 
     describe("tagRoom", () => {
@@ -81,7 +83,7 @@ describe("RoomListActions", () => {
 
             it("opens an ErrorDialog and swallows the error if guessAndSetDMRoom rejects", async () => {
                 const error = new Error("DM tag error");
-                mocked(Rooms.guessAndSetDMRoom).mockRejectedValue(error);
+                vi.mocked(Rooms.guessAndSetDMRoom).mockRejectedValue(error);
 
                 await invokeTagRoom(undefined, DefaultTagID.DM);
 
@@ -140,7 +142,7 @@ describe("RoomListActions", () => {
 
             it("shows an ErrorDialog but still dispatches success when deleteRoomTag fails", async () => {
                 const error = new Error("delete failed");
-                jest.spyOn(client, "deleteRoomTag").mockRejectedValue(error);
+                vi.spyOn(client, "deleteRoomTag").mockRejectedValue(error);
 
                 await invokeTagRoom(DefaultTagID.Favourite, DefaultTagID.LowPriority);
 
@@ -156,7 +158,7 @@ describe("RoomListActions", () => {
 
             it("shows an ErrorDialog and dispatches failure when setRoomTag fails", async () => {
                 const error = new Error("set failed");
-                jest.spyOn(client, "setRoomTag").mockRejectedValue(error);
+                vi.spyOn(client, "setRoomTag").mockRejectedValue(error);
 
                 await invokeTagRoom(DefaultTagID.Favourite, DefaultTagID.LowPriority);
 
diff --git a/apps/web/src/actions/RoomListActions.ts b/apps/web/src/actions/RoomListActions.ts
index b91be93042..a63b71a6c5 100644
--- a/apps/web/src/actions/RoomListActions.ts
+++ b/apps/web/src/actions/RoomListActions.ts
@@ -18,6 +18,7 @@ import { type AsyncActionPayload } from "../dispatcher/payloads";
 import { DefaultTagID, type TagID } from "../stores/room-list-v3/skip-list/tag";
 import ErrorDialog from "../components/views/dialogs/ErrorDialog";
 
+// oxlint-disable-next-line typescript/no-extraneous-class
 export default class RoomListActions {
     /**
      * Creates an action thunk that will do an asynchronous request to
diff --git a/apps/web/test/unit-tests/actions/handlers/viewUserDeviceSettings-test.ts b/apps/web/src/actions/handlers/viewUserDeviceSettings.test.ts
similarity index 62%
rename from apps/web/test/unit-tests/actions/handlers/viewUserDeviceSettings-test.ts
rename to apps/web/src/actions/handlers/viewUserDeviceSettings.test.ts
index f76c5cee20..88c96cbac6 100644
--- a/apps/web/test/unit-tests/actions/handlers/viewUserDeviceSettings-test.ts
+++ b/apps/web/src/actions/handlers/viewUserDeviceSettings.test.ts
@@ -6,13 +6,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { viewUserDeviceSettings } from "../../../../src/actions/handlers/viewUserDeviceSettings";
-import { UserTab } from "../../../../src/components/views/dialogs/UserTab";
-import { Action } from "../../../../src/dispatcher/actions";
-import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
+import { vi, describe, it, expect, beforeEach } from "vitest";
+
+import { viewUserDeviceSettings } from "./viewUserDeviceSettings";
+import { UserTab } from "../../components/views/dialogs/UserTab";
+import { Action } from "../../dispatcher/actions";
+import defaultDispatcher from "../../dispatcher/dispatcher";
 
 describe("viewUserDeviceSettings()", () => {
-    const dispatchSpy = jest.spyOn(defaultDispatcher, "dispatch");
+    const dispatchSpy = vi.spyOn(defaultDispatcher, "dispatch");
 
     beforeEach(() => {
         dispatchSpy.mockClear();
diff --git a/apps/web/src/async-components/views/dialogs/QrLoginDialog.tsx b/apps/web/src/async-components/views/dialogs/QrLoginDialog.tsx
new file mode 100644
index 0000000000..53ef793710
--- /dev/null
+++ b/apps/web/src/async-components/views/dialogs/QrLoginDialog.tsx
@@ -0,0 +1,65 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { type FC, useMemo, useState } from "react";
+import { RendezvousIntent } from "matrix-js-sdk/src/rendezvous";
+import { createClient } from "matrix-js-sdk/src/matrix";
+
+import { type ValidatedServerConfig } from "../../../utils/ValidatedServerConfig";
+import LoginWithQR, { type QrLoginCredentials } from "../../../components/views/auth/LoginWithQR.tsx";
+import { Mode, Phase } from "../../../components/views/auth/LoginWithQR-types.ts";
+import BaseDialog from "../../../components/views/dialogs/BaseDialog.tsx";
+import { _t } from "../../../languageHandler";
+
+interface Props {
+    /**
+     * The server config to use for QR code login
+     */
+    serverConfig: ValidatedServerConfig;
+
+    /**
+     * Handler for when the dialog is to be closed
+     */
+    onFinished(this: void): void;
+
+    /**
+     * Handler for successful completion of QR Login
+     * @param credentials - the credentials to log in with
+     */
+    onLoggedIn(this: void, credentials: QrLoginCredentials): Promise<void>;
+}
+
+/**
+ * Dialog for facilitating the Login with QR flow, shown from DefaultWelcome.
+ */
+const QrLoginDialog: FC<Props> = ({ serverConfig, onLoggedIn, onFinished }) => {
+    const tempClient = useMemo(() => createClient({ baseUrl: serverConfig.hsUrl }), [serverConfig]);
+
+    const [phase, setPhase] = useState<Phase>();
+
+    const hasCancel = phase === Phase.ShowingQR;
+
+    return (
+        <BaseDialog
+            onFinished={onFinished}
+            hasCancel={hasCancel}
+            aria-label={_t("auth|sign_in_with_qr")}
+            fixedWidth={false}
+        >
+            <LoginWithQR
+                intent={RendezvousIntent.LOGIN_ON_NEW_DEVICE}
+                client={tempClient}
+                onFinished={onFinished}
+                onLoggedIn={onLoggedIn}
+                mode={Mode.Show}
+                onPhaseChange={setPhase}
+            />
+        </BaseDialog>
+    );
+};
+
+export default QrLoginDialog;
diff --git a/apps/web/src/async-components/views/dialogs/security/ExportE2eKeysDialog.tsx b/apps/web/src/async-components/views/dialogs/security/ExportE2eKeysDialog.tsx
index 31c7c7ca8d..15c9bd918a 100644
--- a/apps/web/src/async-components/views/dialogs/security/ExportE2eKeysDialog.tsx
+++ b/apps/web/src/async-components/views/dialogs/security/ExportE2eKeysDialog.tsx
@@ -211,7 +211,7 @@ export default class ExportE2eKeysDialog extends React.Component<IProps, IState>
                             value={_t("action|export")}
                             disabled={disableForm}
                         />
-                        <button onClick={this.onCancelClick} disabled={disableForm}>
+                        <button onClick={this.onCancelClick} disabled={disableForm} type="button">
                             {_t("action|cancel")}
                         </button>
                     </div>
diff --git a/apps/web/src/async-components/views/dialogs/security/ImportE2eKeysDialog.tsx b/apps/web/src/async-components/views/dialogs/security/ImportE2eKeysDialog.tsx
index fff841d8a6..26ef2eec4d 100644
--- a/apps/web/src/async-components/views/dialogs/security/ImportE2eKeysDialog.tsx
+++ b/apps/web/src/async-components/views/dialogs/security/ImportE2eKeysDialog.tsx
@@ -180,7 +180,7 @@ export default class ImportE2eKeysDialog extends React.Component<IProps, IState>
                             value={_t("action|import")}
                             disabled={!this.state.enableSubmit || disableForm}
                         />
-                        <button onClick={this.onCancelClick} disabled={disableForm}>
+                        <button onClick={this.onCancelClick} disabled={disableForm} type="button">
                             {_t("action|cancel")}
                         </button>
                     </div>
diff --git a/apps/web/src/audio/Playback.ts b/apps/web/src/audio/Playback.ts
index fa0bceffdf..93dad591fe 100644
--- a/apps/web/src/audio/Playback.ts
+++ b/apps/web/src/audio/Playback.ts
@@ -6,6 +6,7 @@ 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.
 */
 
+// oxlint-disable-next-line no-restricted-imports
 import EventEmitter from "events";
 import { SimpleObservable } from "matrix-widget-api";
 import { logger } from "matrix-js-sdk/src/logger";
@@ -134,6 +135,7 @@ export class Playback extends EventEmitter implements IDestroyable, PlaybackInte
         this.clock.destroy();
         this.waveformObservable.close();
         if (this.element) {
+            this.element.removeEventListener("ended", this.onPlaybackEnd);
             URL.revokeObjectURL(this.element.src);
             this.element.remove();
         }
@@ -166,6 +168,9 @@ export class Playback extends EventEmitter implements IDestroyable, PlaybackInte
             this.element.src = URL.createObjectURL(new Blob([this.buf]));
             await deferred.promise; // make sure the audio element is ready for us
         } else {
+            // decodeAudioData detaches the buffer it is given, so the copy the fallback needs has
+            // to be taken before we call it rather than inside the error handler.
+            const fallbackBuf = this.buf.slice(0);
             try {
                 this.audioBuf = await this.context.decodeAudioData(this.buf);
             } catch (e) {
@@ -174,7 +179,7 @@ export class Playback extends EventEmitter implements IDestroyable, PlaybackInte
 
                 try {
                     // This error handler is largely for Safari, which doesn't support Opus/Ogg very well.
-                    const wav = await decodeOgg(this.buf);
+                    const wav = await decodeOgg(fallbackBuf);
                     this.audioBuf = await this.context.decodeAudioData(wav);
                 } catch (e) {
                     logger.error("Error decoding recording:", e);
@@ -235,12 +240,16 @@ export class Playback extends EventEmitter implements IDestroyable, PlaybackInte
 
         if (this.element) {
             this.source = this.context.createMediaElementSource(this.element);
+            // A MediaElementAudioSourceNode is not a scheduled source node and never emits "ended",
+            // so the media element has to be listened to instead. Without this, playback of a large
+            // file never returns to Stopped and the clock keeps running past the end of the clip.
+            this.element.addEventListener("ended", this.onPlaybackEnd);
         } else {
             this.source = this.context.createBufferSource();
             this.source.buffer = this.audioBuf ?? null;
+            this.source.addEventListener("ended", this.onPlaybackEnd);
         }
 
-        this.source.addEventListener("ended", this.onPlaybackEnd);
         this.source.connect(this.context.destination);
     }
 
diff --git a/apps/web/src/audio/RecorderWorklet.ts b/apps/web/src/audio/RecorderWorklet.ts
index 5d6ce32630..8f47be28a7 100644
--- a/apps/web/src/audio/RecorderWorklet.ts
+++ b/apps/web/src/audio/RecorderWorklet.ts
@@ -6,7 +6,7 @@ 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 { percentageOf } from "@element-hq/web-shared-components";
+import { percentageOf } from "@element-hq/web-shared-components/numbers";
 
 import { type IAmplitudePayload, type ITimingPayload, PayloadEvent, WORKLET_NAME } from "./consts";
 
@@ -62,16 +62,16 @@ class MxVoiceWorklet extends AudioWorkletProcessor {
             const maxVal = Math.max(...monoChan);
             const amplitude = percentageOf(maxVal, -1, 1) - percentageOf(minVal, -1, 1);
 
-            this.port.postMessage(<IAmplitudePayload>{
+            this.port.postMessage({
                 ev: PayloadEvent.AmplitudeMark,
                 amplitude: amplitude,
                 forIndex: this.amplitudeIndex++,
-            });
+            } satisfies IAmplitudePayload);
             this.nextAmplitudeSecond = nextTimeForTargetFreq(currentSecond);
         }
 
         // We mostly use this worklet to fire regular clock updates through to components
-        this.port.postMessage(<ITimingPayload>{ ev: PayloadEvent.Timekeep, timeSeconds: currentTime });
+        this.port.postMessage({ ev: PayloadEvent.Timekeep, timeSeconds: currentTime } satisfies ITimingPayload);
 
         // We're supposed to return false when we're "done" with the audio clip, but seeing as
         // we are acting as a passive processor we are never truly "done". The browser will clean
diff --git a/apps/web/src/audio/VoiceRecording.ts b/apps/web/src/audio/VoiceRecording.ts
index 44a016b995..48a624d49b 100644
--- a/apps/web/src/audio/VoiceRecording.ts
+++ b/apps/web/src/audio/VoiceRecording.ts
@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import Recorder from "opus-recorder/dist/recorder.min.js";
 import encoderPath from "opus-recorder/dist/encoderWorker.min.js";
 import { SimpleObservable } from "matrix-widget-api";
+// oxlint-disable-next-line no-restricted-imports
 import EventEmitter from "events";
 import { logger } from "matrix-js-sdk/src/logger";
 import { clamp } from "@element-hq/web-shared-components";
@@ -299,7 +300,7 @@ export class VoiceRecording extends EventEmitter implements IDestroyable {
 
             // Finally do our post-processing and clean up
             this.recording = false;
-            await this.recorder!.close();
+            this.recorder!.close();
             this.emit(RecordingState.Ended);
         });
     }
diff --git a/apps/web/src/autocomplete/AutocompleteProvider.tsx b/apps/web/src/autocomplete/AutocompleteProvider.ts
similarity index 97%
rename from apps/web/src/autocomplete/AutocompleteProvider.tsx
rename to apps/web/src/autocomplete/AutocompleteProvider.ts
index 94614f0ae7..b9679d6646 100644
--- a/apps/web/src/autocomplete/AutocompleteProvider.tsx
+++ b/apps/web/src/autocomplete/AutocompleteProvider.ts
@@ -58,7 +58,7 @@ export default abstract class AutocompleteProvider {
      * @param {string} query The query string
      * @param {ISelectionRange} selection Selection to search
      * @param {boolean} force True if the user is forcing completion
-     * @return {object} { command, range } where both objects fields are null if no match
+     * @returns {object} { command, range } where both objects fields are null if no match
      */
     public getCurrentCommand(query: string, selection: ISelectionRange, force = false): Partial<ICommand> {
         let commandRegex = this.commandRegex;
diff --git a/apps/web/test/unit-tests/autocomplete/CommandProvider-test.ts b/apps/web/src/autocomplete/CommandProvider.test.ts
similarity index 82%
rename from apps/web/test/unit-tests/autocomplete/CommandProvider-test.ts
rename to apps/web/src/autocomplete/CommandProvider.test.ts
index ed02dd1adf..268487f8c6 100644
--- a/apps/web/test/unit-tests/autocomplete/CommandProvider-test.ts
+++ b/apps/web/src/autocomplete/CommandProvider.test.ts
@@ -5,14 +5,17 @@ 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 Room } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import CommandProvider from "../../../src/autocomplete/CommandProvider";
-import { stubClient } from "../../test-utils";
-import { Command } from "../../../src/slash-commands/command";
-import { CommandCategories } from "../../../src/slash-commands/interface";
-import { _td } from "../../../src/languageHandler";
-import * as SlashCommands from "../../../src/slash-commands/SlashCommands";
+import { vi, describe, it, expect, beforeEach } from "vitest";
+import { type Room } from "matrix-js-sdk/src/matrix";
+import { stubClient } from "test-utils";
+
+import CommandProvider from "./CommandProvider";
+import { Command } from "../slash-commands/command";
+import { CommandCategories } from "../slash-commands/interface";
+import { _td } from "../languageHandler";
+import * as SlashCommands from "../slash-commands/SlashCommands";
 
 describe("CommandProvider", () => {
     let room: Room;
@@ -30,7 +33,7 @@ describe("CommandProvider", () => {
             command: "disabled",
             args: "<arg>",
             description: _td("slash_command|spoiler"),
-            runFn: jest.fn(),
+            runFn: vi.fn(),
             category: CommandCategories.messages,
             isEnabled: () => false,
         });
@@ -40,7 +43,7 @@ describe("CommandProvider", () => {
             command: "enabled",
             args: "<arg>",
             description: _td("slash_command|shrug"),
-            runFn: jest.fn(),
+            runFn: vi.fn(),
             category: CommandCategories.messages,
             isEnabled: () => true,
         });
@@ -81,7 +84,7 @@ describe("CommandProvider", () => {
 
         // Then we should get the completion because the command is enabled
         // The completion preserves the arguments when the command matches
-        expect(enabledCompletions.length).toBe(1);
+        expect(enabledCompletions).toHaveLength(1);
         expect(enabledCompletions[0].completion).toBe("/enabled test");
     });
 });
diff --git a/apps/web/src/autocomplete/CommandProvider.tsx b/apps/web/src/autocomplete/CommandProvider.tsx
index f93ea6c8ce..065fa9cca0 100644
--- a/apps/web/src/autocomplete/CommandProvider.tsx
+++ b/apps/web/src/autocomplete/CommandProvider.tsx
@@ -104,7 +104,6 @@ export default class CommandProvider extends AutocompleteProvider {
         return (
             <div
                 className="mx_Autocomplete_Completion_container_pill"
-                role="presentation"
                 aria-label={_t("composer|autocomplete|command_a11y")}
             >
                 {completions}
diff --git a/apps/web/src/autocomplete/Components.test.tsx b/apps/web/src/autocomplete/Components.test.tsx
new file mode 100644
index 0000000000..d858b8cba9
--- /dev/null
+++ b/apps/web/src/autocomplete/Components.test.tsx
@@ -0,0 +1,24 @@
+/*
+Copyright 2026 Element Creations 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.
+*/
+
+// @vitest-environment happy-dom
+
+import React from "react";
+import { render, screen } from "test-utils-rtl";
+import { describe, it, expect } from "vitest";
+
+import { PillCompletion } from "./Components";
+
+describe("PillCompletion", () => {
+    it("renders the titleIcon immediately after the title", () => {
+        render(<PillCompletion title="Alice" titleIcon={<span>💡</span>} description="@alice:example.org" />);
+
+        const title = screen.getByText("Alice");
+        const icon = screen.getByText("💡");
+        expect(title.nextElementSibling).toBe(icon);
+    });
+});
diff --git a/apps/web/src/autocomplete/Components.tsx b/apps/web/src/autocomplete/Components.tsx
index f1493d0c23..0b59c911ea 100644
--- a/apps/web/src/autocomplete/Components.tsx
+++ b/apps/web/src/autocomplete/Components.tsx
@@ -50,6 +50,8 @@ export const TextualCompletion = (props: ITextualCompletionProps): JSX.Element =
 };
 
 interface IPillCompletionProps extends ITextualCompletionProps {
+    /** An icon displayed after the title */
+    titleIcon?: React.ReactNode;
     children?: React.ReactNode;
 }
 
@@ -60,6 +62,7 @@ export const PillCompletion = (props: IPillCompletionProps): JSX.Element => {
         description,
         className,
         children,
+        titleIcon,
         "aria-selected": ariaSelectedAttribute,
         ref,
         ...restProps
@@ -74,6 +77,7 @@ export const PillCompletion = (props: IPillCompletionProps): JSX.Element => {
         >
             {children}
             <span className="mx_Autocomplete_Completion_title">{title}</span>
+            {titleIcon}
             <span className="mx_Autocomplete_Completion_subtitle">{subtitle}</span>
             <span className="mx_Autocomplete_Completion_description">{description}</span>
         </div>
diff --git a/apps/web/test/unit-tests/autocomplete/EmojiProvider-test.ts b/apps/web/src/autocomplete/EmojiProvider.test.ts
similarity index 92%
rename from apps/web/test/unit-tests/autocomplete/EmojiProvider-test.ts
rename to apps/web/src/autocomplete/EmojiProvider.test.ts
index c2c42691b7..6d8ee5f611 100644
--- a/apps/web/test/unit-tests/autocomplete/EmojiProvider-test.ts
+++ b/apps/web/src/autocomplete/EmojiProvider.test.ts
@@ -6,11 +6,14 @@ 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 EmojiProvider from "../../../src/autocomplete/EmojiProvider";
-import { mkStubRoom } from "../../test-utils/test-utils";
-import { add } from "../../../src/emojipicker/recent";
-import { stubClient } from "../../test-utils";
-import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
+// @vitest-environment happy-dom
+
+import { describe, it, expect } from "vitest";
+import { stubClient, mkStubRoom } from "test-utils";
+
+import EmojiProvider from "./EmojiProvider";
+import { add } from "../emojipicker/recent";
+import { MatrixClientPeg } from "../MatrixClientPeg";
 
 const EMOJI_SHORTCODES = [
     ":+1",
diff --git a/apps/web/src/autocomplete/EmojiProvider.tsx b/apps/web/src/autocomplete/EmojiProvider.tsx
index 2d31095acd..82851e4c14 100644
--- a/apps/web/src/autocomplete/EmojiProvider.tsx
+++ b/apps/web/src/autocomplete/EmojiProvider.tsx
@@ -175,7 +175,6 @@ export default class EmojiProvider extends AutocompleteProvider {
         return (
             <div
                 className="mx_Autocomplete_Completion_container_pill"
-                role="presentation"
                 aria-label={_t("composer|autocomplete|emoji_a11y")}
             >
                 {completions}
diff --git a/apps/web/src/autocomplete/NotifProvider.tsx b/apps/web/src/autocomplete/NotifProvider.tsx
index 2a6e070efa..ca76a46839 100644
--- a/apps/web/src/autocomplete/NotifProvider.tsx
+++ b/apps/web/src/autocomplete/NotifProvider.tsx
@@ -40,7 +40,7 @@ export default class NotifProvider extends AutocompleteProvider {
         if (
             command?.[0] &&
             command[0].length > 1 &&
-            ["@room", "@channel", "@everyone", "@here"].some((c) => c.startsWith(command![0]))
+            ["@room", "@channel", "@everyone", "@here"].some((c) => c.startsWith(command[0]))
         ) {
             return [
                 {
@@ -68,7 +68,6 @@ export default class NotifProvider extends AutocompleteProvider {
         return (
             <div
                 className="mx_Autocomplete_Completion_container_pill mx_Autocomplete_Completion_container_truncate"
-                role="presentation"
                 aria-label={_t("composer|autocomplete|notification_a11y")}
             >
                 {completions}
diff --git a/apps/web/test/unit-tests/autocomplete/QueryMatcher-test.ts b/apps/web/src/autocomplete/QueryMatcher.test.ts
similarity index 95%
rename from apps/web/test/unit-tests/autocomplete/QueryMatcher-test.ts
rename to apps/web/src/autocomplete/QueryMatcher.test.ts
index 22ae71004c..94ac52be1d 100644
--- a/apps/web/test/unit-tests/autocomplete/QueryMatcher-test.ts
+++ b/apps/web/src/autocomplete/QueryMatcher.test.ts
@@ -5,7 +5,9 @@ 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 QueryMatcher from "../../../src/autocomplete/QueryMatcher";
+import { describe, it, expect } from "vitest";
+
+import QueryMatcher from "./QueryMatcher";
 
 const OBJECTS = [
     { name: "Mel B", nick: "Scary" },
@@ -22,7 +24,7 @@ describe("QueryMatcher", function () {
         const qm = new QueryMatcher(OBJECTS, { keys: ["name"] });
         const results = qm.match("Geri");
 
-        expect(results.length).toBe(1);
+        expect(results).toHaveLength(1);
         expect(results[0].name).toBe("Geri");
     });
 
@@ -30,7 +32,7 @@ describe("QueryMatcher", function () {
         const qm = new QueryMatcher(OBJECTS, { keys: ["name"] });
         const results = qm.match("Ge");
 
-        expect(results.length).toBe(1);
+        expect(results).toHaveLength(1);
         expect(results[0].name).toBe("Geri");
     });
 
@@ -38,7 +40,7 @@ describe("QueryMatcher", function () {
         const qm = new QueryMatcher(OBJECTS, { keys: ["name"] });
         const results = qm.match("geri");
 
-        expect(results.length).toBe(1);
+        expect(results).toHaveLength(1);
         expect(results[0].name).toBe("Geri");
     });
 
@@ -46,7 +48,7 @@ describe("QueryMatcher", function () {
         const qm = new QueryMatcher([{ name: "Gëri", foo: 46 }], { keys: ["name"] });
         const results = qm.match("geri");
 
-        expect(results.length).toBe(1);
+        expect(results).toHaveLength(1);
         expect(results[0].foo).toBe(46);
     });
 
@@ -159,7 +161,7 @@ describe("QueryMatcher", function () {
         });
 
         const results = qm.match("bob");
-        expect(results.length).toBe(1);
+        expect(results).toHaveLength(1);
         expect(results[0].name).toBe("bob");
     });
 });
diff --git a/apps/web/test/unit-tests/autocomplete/RoomProvider-test.ts b/apps/web/src/autocomplete/RoomProvider.test.ts
similarity index 83%
rename from apps/web/test/unit-tests/autocomplete/RoomProvider-test.ts
rename to apps/web/src/autocomplete/RoomProvider.test.ts
index 3da37528ed..8353ed020d 100644
--- a/apps/web/test/unit-tests/autocomplete/RoomProvider-test.ts
+++ b/apps/web/src/autocomplete/RoomProvider.test.ts
@@ -6,19 +6,21 @@ 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 { mocked } from "jest-mock";
-import { type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import RoomProvider from "../../../src/autocomplete/RoomProvider";
-import SettingsStore from "../../../src/settings/SettingsStore";
-import { mkRoom, mkSpace, stubClient } from "../../test-utils";
+import { vi, describe, it, expect, beforeEach } from "vitest";
+import { type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
+import { mkRoom, mkSpace, stubClient } from "test-utils";
+
+import RoomProvider from "./RoomProvider";
+import SettingsStore from "../settings/SettingsStore";
 
 describe("RoomProvider", () => {
     it("suggests a room whose alias matches a prefix", async () => {
         // Given a room
         const client = stubClient();
         const room = makeRoom(client, "room:e.com");
-        mocked(client.getVisibleRooms).mockReturnValue([room]);
+        vi.mocked(client.getVisibleRooms).mockReturnValue([room]);
 
         // When we search for rooms starting with its prefix
         const roomProvider = new RoomProvider(room);
@@ -45,7 +47,7 @@ describe("RoomProvider", () => {
         const room2 = makeRoom(client, "room2:e.com");
         const other = makeRoom(client, "other:e.com");
         const space = makeSpace(client, "room3:e.com");
-        mocked(client.getVisibleRooms).mockReturnValue([room1, room2, other, space]);
+        vi.mocked(client.getVisibleRooms).mockReturnValue([room1, room2, other, space]);
 
         // When we search for rooms starting with a prefix
         const roomProvider = new RoomProvider(room1);
@@ -76,14 +78,14 @@ describe("RoomProvider", () => {
 
     describe("If the feature_dynamic_room_predecessors is not enabled", () => {
         beforeEach(() => {
-            jest.spyOn(SettingsStore, "getValue").mockReturnValue(false);
+            vi.spyOn(SettingsStore, "getValue").mockReturnValue(false);
         });
 
         it("Passes through the dynamic predecessor setting", async () => {
             const client = stubClient();
             const room = makeRoom(client, "room:e.com");
-            mocked(client.getVisibleRooms).mockReturnValue([room]);
-            mocked(client.getVisibleRooms).mockClear();
+            vi.mocked(client.getVisibleRooms).mockReturnValue([room]);
+            vi.mocked(client.getVisibleRooms).mockClear();
 
             const roomProvider = new RoomProvider(room);
             await roomProvider.getCompletions("#ro", { beginning: true, start: 0, end: 3 });
@@ -95,7 +97,7 @@ describe("RoomProvider", () => {
     describe("If the feature_dynamic_room_predecessors is enabled", () => {
         beforeEach(() => {
             // Turn on feature_dynamic_room_predecessors setting
-            jest.spyOn(SettingsStore, "getValue").mockImplementation(
+            vi.spyOn(SettingsStore, "getValue").mockImplementation(
                 (settingName) => settingName === "feature_dynamic_room_predecessors",
             );
         });
@@ -103,8 +105,8 @@ describe("RoomProvider", () => {
         it("Passes through the dynamic predecessor setting", async () => {
             const client = stubClient();
             const room = makeRoom(client, "room:e.com");
-            mocked(client.getVisibleRooms).mockReturnValue([room]);
-            mocked(client.getVisibleRooms).mockClear();
+            vi.mocked(client.getVisibleRooms).mockReturnValue([room]);
+            vi.mocked(client.getVisibleRooms).mockClear();
 
             const roomProvider = new RoomProvider(room);
             await roomProvider.getCompletions("#ro", { beginning: true, start: 0, end: 3 });
diff --git a/apps/web/src/autocomplete/RoomProvider.tsx b/apps/web/src/autocomplete/RoomProvider.tsx
index 5c06856b08..88f11c83ac 100644
--- a/apps/web/src/autocomplete/RoomProvider.tsx
+++ b/apps/web/src/autocomplete/RoomProvider.tsx
@@ -136,7 +136,6 @@ export default class RoomProvider extends AutocompleteProvider {
         return (
             <div
                 className="mx_Autocomplete_Completion_container_pill mx_Autocomplete_Completion_container_truncate"
-                role="presentation"
                 aria-label={_t("composer|autocomplete|room_a11y")}
             >
                 {completions}
diff --git a/apps/web/test/unit-tests/autocomplete/SpaceProvider-test.ts b/apps/web/src/autocomplete/SpaceProvider.test.ts
similarity index 83%
rename from apps/web/test/unit-tests/autocomplete/SpaceProvider-test.ts
rename to apps/web/src/autocomplete/SpaceProvider.test.ts
index 9769d55660..68cc517e34 100644
--- a/apps/web/test/unit-tests/autocomplete/SpaceProvider-test.ts
+++ b/apps/web/src/autocomplete/SpaceProvider.test.ts
@@ -6,19 +6,21 @@ 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 { mocked } from "jest-mock";
-import { type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import SpaceProvider from "../../../src/autocomplete/SpaceProvider";
-import SettingsStore from "../../../src/settings/SettingsStore";
-import { mkRoom, mkSpace, stubClient } from "../../test-utils";
+import { vi, describe, it, expect, beforeEach } from "vitest";
+import { type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
+import { mkRoom, mkSpace, stubClient } from "test-utils";
+
+import SpaceProvider from "./SpaceProvider";
+import SettingsStore from "../settings/SettingsStore";
 
 describe("SpaceProvider", () => {
     it("suggests a space whose alias matches a prefix", async () => {
         // Given a space
         const client = stubClient();
         const space = makeSpace(client, "space:e.com");
-        mocked(client.getVisibleRooms).mockReturnValue([space]);
+        vi.mocked(client.getVisibleRooms).mockReturnValue([space]);
 
         // When we search for spaces starting with its prefix
         const spaceProvider = new SpaceProvider(space);
@@ -45,7 +47,7 @@ describe("SpaceProvider", () => {
         const space2 = makeSpace(client, "space2:e.com");
         const other = makeSpace(client, "other:e.com");
         const room = makeRoom(client, "space3:e.com");
-        mocked(client.getVisibleRooms).mockReturnValue([space1, space2, other, room]);
+        vi.mocked(client.getVisibleRooms).mockReturnValue([space1, space2, other, room]);
 
         // When we search for spaces starting with a prefix
         const spaceProvider = new SpaceProvider(space1);
@@ -76,14 +78,14 @@ describe("SpaceProvider", () => {
 
     describe("If the feature_dynamic_room_predecessors is not enabled", () => {
         beforeEach(() => {
-            jest.spyOn(SettingsStore, "getValue").mockReturnValue(false);
+            vi.spyOn(SettingsStore, "getValue").mockReturnValue(false);
         });
 
         it("Passes through the dynamic predecessor setting", async () => {
             const client = stubClient();
             const space = makeSpace(client, "space:e.com");
-            mocked(client.getVisibleRooms).mockReturnValue([space]);
-            mocked(client.getVisibleRooms).mockClear();
+            vi.mocked(client.getVisibleRooms).mockReturnValue([space]);
+            vi.mocked(client.getVisibleRooms).mockClear();
 
             const spaceProvider = new SpaceProvider(space);
             await spaceProvider.getCompletions("#ro", { beginning: true, start: 0, end: 3 });
@@ -95,7 +97,7 @@ describe("SpaceProvider", () => {
     describe("If the feature_dynamic_room_predecessors is enabled", () => {
         beforeEach(() => {
             // Turn on feature_dynamic_space_predecessors setting
-            jest.spyOn(SettingsStore, "getValue").mockImplementation(
+            vi.spyOn(SettingsStore, "getValue").mockImplementation(
                 (settingName) => settingName === "feature_dynamic_room_predecessors",
             );
         });
@@ -103,8 +105,8 @@ describe("SpaceProvider", () => {
         it("Passes through the dynamic predecessor setting", async () => {
             const client = stubClient();
             const space = makeSpace(client, "space:e.com");
-            mocked(client.getVisibleRooms).mockReturnValue([space]);
-            mocked(client.getVisibleRooms).mockClear();
+            vi.mocked(client.getVisibleRooms).mockReturnValue([space]);
+            vi.mocked(client.getVisibleRooms).mockClear();
 
             const spaceProvider = new SpaceProvider(space);
             await spaceProvider.getCompletions("#ro", { beginning: true, start: 0, end: 3 });
diff --git a/apps/web/src/autocomplete/UserProvider.test.ts b/apps/web/src/autocomplete/UserProvider.test.ts
new file mode 100644
index 0000000000..b1a102811b
--- /dev/null
+++ b/apps/web/src/autocomplete/UserProvider.test.ts
@@ -0,0 +1,38 @@
+/*
+Copyright 2026 Element Creations 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.
+*/
+
+// @vitest-environment happy-dom
+
+import { describe, it, expect } from "vitest";
+
+import UserProvider from "./UserProvider";
+import { makeUserPermalink } from "../utils/permalinks/Permalinks";
+import { mkRoom, mkRoomMember, stubClient } from "../../test/test-utils";
+
+describe("UserProvider", () => {
+    it("suggests a room member whose id matches the query", async () => {
+        const client = stubClient();
+        const room = mkRoom(client, "!room:e.com");
+        const alice = mkRoomMember(room.roomId, "@alice:e.com");
+        room.getJoinedMembers.mockReturnValue([alice]);
+
+        const userProvider = new UserProvider(room);
+        const completions = await userProvider.getCompletions("@ali", { beginning: true, start: 0, end: 4 });
+
+        expect(completions).toStrictEqual([
+            {
+                completion: alice.rawDisplayName,
+                completionId: alice.userId,
+                type: "user",
+                suffix: ": ",
+                href: makeUserPermalink(alice.userId),
+                component: expect.anything(),
+                range: { start: 0, end: 4 },
+            },
+        ]);
+    });
+});
diff --git a/apps/web/src/autocomplete/UserProvider.tsx b/apps/web/src/autocomplete/UserProvider.tsx
index 39accdc8da..973339357b 100644
--- a/apps/web/src/autocomplete/UserProvider.tsx
+++ b/apps/web/src/autocomplete/UserProvider.tsx
@@ -21,10 +21,12 @@ import {
     type IRoomTimelineData,
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
+import { UserStatusIconView } from "@element-hq/web-shared-components";
 
 import { MatrixClientPeg } from "../MatrixClientPeg";
 import QueryMatcher from "./QueryMatcher";
 import { PillCompletion } from "./Components";
+import { UserStatusIconViewModel } from "../viewmodels/status/UserStatusIconViewModel";
 import AutocompleteProvider from "./AutocompleteProvider";
 import { _t } from "../languageHandler";
 import { makeUserPermalink } from "../utils/permalinks/Permalinks";
@@ -43,6 +45,7 @@ export default class UserProvider extends AutocompleteProvider {
     public matcher: QueryMatcher<RoomMember>;
     public users?: RoomMember[];
     public room: Room;
+    private statusViewModels = new Map<string, UserStatusIconViewModel>();
 
     public constructor(room: Room, renderingType?: TimelineRenderingType) {
         super({
@@ -64,6 +67,17 @@ export default class UserProvider extends AutocompleteProvider {
     public destroy(): void {
         MatrixClientPeg.get()?.removeListener(RoomEvent.Timeline, this.onRoomTimeline);
         MatrixClientPeg.get()?.removeListener(RoomStateEvent.Update, this.onRoomStateUpdate);
+        for (const vm of this.statusViewModels.values()) vm.dispose();
+        this.statusViewModels.clear();
+    }
+
+    private getStatusViewModel(userId: string): UserStatusIconViewModel {
+        let vm = this.statusViewModels.get(userId);
+        if (!vm) {
+            vm = new UserStatusIconViewModel({ userId, matrixClient: MatrixClientPeg.safeGet() });
+            this.statusViewModels.set(userId, vm);
+        }
+        return vm;
     }
 
     private onRoomTimeline = (
@@ -127,7 +141,11 @@ export default class UserProvider extends AutocompleteProvider {
                     suffix: selection.beginning && range!.start === 0 ? ": " : " ",
                     href: makeUserPermalink(user.userId),
                     component: (
-                        <PillCompletion title={displayName} description={description ?? undefined}>
+                        <PillCompletion
+                            title={displayName}
+                            titleIcon={<UserStatusIconView vm={this.getStatusViewModel(user.userId)} />}
+                            description={description ?? undefined}
+                        >
                             <MemberAvatar member={user} size="24px" />
                         </PillCompletion>
                     ),
@@ -178,7 +196,6 @@ export default class UserProvider extends AutocompleteProvider {
         return (
             <div
                 className="mx_Autocomplete_Completion_container_pill"
-                role="presentation"
                 aria-label={_t("composer|autocomplete|user_a11y")}
             >
                 {completions}
diff --git a/apps/web/src/components/structures/AutoHideScrollbar.tsx b/apps/web/src/components/structures/AutoHideScrollbar.tsx
deleted file mode 100644
index 9cd68b5c58..0000000000
--- a/apps/web/src/components/structures/AutoHideScrollbar.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-Copyright 2018 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 classNames from "classnames";
-import React, { type HTMLAttributes, type JSX, type ReactNode, type WheelEvent } from "react";
-
-type DynamicHtmlElementProps<T extends keyof JSX.IntrinsicElements> =
-    JSX.IntrinsicElements[T] extends HTMLAttributes<object> ? DynamicElementProps<T> : DynamicElementProps<"div">;
-type DynamicElementProps<T extends keyof JSX.IntrinsicElements> = Partial<Omit<JSX.IntrinsicElements[T], "ref">>;
-
-export type IProps<T extends keyof JSX.IntrinsicElements> = Omit<DynamicHtmlElementProps<T>, "onScroll"> & {
-    element: T;
-    className?: string;
-    onScroll?: (event: Event) => void;
-    onWheel?: (event: WheelEvent) => void;
-    style?: React.CSSProperties;
-    tabIndex?: number;
-    wrappedRef?: (ref: HTMLDivElement | null) => void;
-    children: ReactNode;
-};
-
-export default class AutoHideScrollbar<T extends keyof JSX.IntrinsicElements> extends React.Component<IProps<T>> {
-    public static defaultProps = {
-        element: "div" as keyof HTMLElementTagNameMap,
-    };
-
-    public readonly containerRef = React.createRef<HTMLDivElement>();
-
-    public componentDidMount(): void {
-        if (this.containerRef.current && this.props.onScroll) {
-            // Using the passive option to not block the main thread
-            // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners
-            this.containerRef.current.addEventListener("scroll", this.props.onScroll, { passive: true });
-        }
-
-        this.props.wrappedRef?.(this.containerRef.current);
-    }
-
-    public componentWillUnmount(): void {
-        if (this.containerRef.current && this.props.onScroll) {
-            this.containerRef.current.removeEventListener("scroll", this.props.onScroll);
-        }
-
-        this.props.wrappedRef?.(null);
-    }
-
-    public render(): React.ReactNode {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { element, className, onScroll, tabIndex, wrappedRef, children, ...otherProps } = this.props;
-
-        return React.createElement(
-            element,
-            {
-                ...otherProps,
-                ref: this.containerRef,
-                className: classNames("mx_AutoHideScrollbar", className),
-                // Firefox sometimes makes this element focusable due to
-                // overflow:scroll;, so force it out of tab order by default.
-                tabIndex: tabIndex ?? -1,
-            },
-            children,
-        );
-    }
-}
diff --git a/apps/web/src/components/structures/AutocompleteInput.tsx b/apps/web/src/components/structures/AutocompleteInput.tsx
index 9767bd5761..c57ca0be91 100644
--- a/apps/web/src/components/structures/AutocompleteInput.tsx
+++ b/apps/web/src/components/structures/AutocompleteInput.tsx
@@ -115,6 +115,8 @@ export const AutocompleteInput: React.FC<AutocompleteInputProps> = ({
 
     return (
         <div className="mx_AutocompleteInput">
+            {/* We break the rule here as this is a mouse-only interaction */}
+            {/* oxlint-disable-next-line jsx-a11y/click-events-have-key-events */}
             <div
                 ref={editorContainerRef}
                 className={classNames({
@@ -149,7 +151,6 @@ export const AutocompleteInput: React.FC<AutocompleteInputProps> = ({
             {isFocused && suggestions.length ? (
                 <div
                     className="mx_AutocompleteInput_matches"
-                    // eslint-disable-next-line react-compiler/react-compiler
                     style={{ top: editorContainerRef.current?.clientHeight }}
                     data-testid="autocomplete-matches"
                 >
diff --git a/apps/web/src/components/structures/BackdropPanel.tsx b/apps/web/src/components/structures/BackdropPanel.tsx
deleted file mode 100644
index f3a44521fa..0000000000
--- a/apps/web/src/components/structures/BackdropPanel.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
-Copyright 2021-2024 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { type CSSProperties } from "react";
-
-interface IProps {
-    backgroundImage?: string;
-    blurMultiplier?: number;
-}
-
-export const BackdropPanel: React.FC<IProps> = ({ backgroundImage, blurMultiplier }) => {
-    if (!backgroundImage) return null;
-
-    const styles: CSSProperties = {};
-    if (blurMultiplier) {
-        const rootStyle = getComputedStyle(document.documentElement);
-        const blurValue = rootStyle.getPropertyValue("--lp-background-blur");
-        const pixelsValue = blurValue.replace("px", "");
-        const parsed = parseInt(pixelsValue, 10);
-        if (!isNaN(parsed)) {
-            styles.filter = `blur(${parsed * blurMultiplier}px)`;
-        }
-    }
-    return (
-        <div className="mx_BackdropPanel">
-            <img role="presentation" alt="" style={styles} className="mx_BackdropPanel--image" src={backgroundImage} />
-        </div>
-    );
-};
diff --git a/apps/web/src/components/structures/ContextMenu.tsx b/apps/web/src/components/structures/ContextMenu.tsx
index 3cd43b5d91..2dcbf4d6b9 100644
--- a/apps/web/src/components/structures/ContextMenu.tsx
+++ b/apps/web/src/components/structures/ContextMenu.tsx
@@ -100,9 +100,9 @@ export interface IProps extends MenuProps {
     "closeOnInteraction"?: boolean;
 
     // Function to be called on menu close
-    onFinished(this: void): void;
+    "onFinished"(this: void): void;
     // on resize callback
-    windowResize?(this: void): void;
+    "windowResize"?(this: void): void;
 
     // Role & label for accessibility
     "role"?: AriaRole;
@@ -228,7 +228,7 @@ export default class ContextMenu extends React.PureComponent<React.PropsWithChil
         }
 
         // When an <input> is focused, only handle the Escape key
-        if (checkInputableElement(ev.target as HTMLElement) && action !== KeyBindingAction.Escape) {
+        if (checkInputableElement(ev.target) && action !== KeyBindingAction.Escape) {
             return;
         }
 
@@ -269,8 +269,8 @@ export default class ContextMenu extends React.PureComponent<React.PropsWithChil
             focusLock,
             managed,
             wrapperClassName,
-            "chevronFace": propsChevronFace,
-            "chevronOffset": propsChevronOffset,
+            chevronFace: propsChevronFace,
+            chevronOffset: propsChevronOffset,
             mountAsChild,
             role,
             "aria-label": ariaLabel,
@@ -402,6 +402,8 @@ export default class ContextMenu extends React.PureComponent<React.PropsWithChil
         let background: JSX.Element;
         if (hasBackground) {
             background = (
+                // We break the rule here as this is a mouse-only interaction
+                // oxlint-disable-next-line jsx-a11y/click-events-have-key-events
                 <div
                     className="mx_ContextualMenu_background"
                     style={wrapperStyle}
@@ -423,11 +425,7 @@ export default class ContextMenu extends React.PureComponent<React.PropsWithChil
         }
 
         // filter props that are invalid for DOM elements
-        const {
-            hasBackground: _hasBackground, // eslint-disable-line @typescript-eslint/no-unused-vars
-            onFinished: _onFinished, // eslint-disable-line @typescript-eslint/no-unused-vars
-            ...divProps
-        } = props;
+        const { hasBackground: _hasBackground, onFinished: _onFinished, ...divProps } = props;
 
         return (
             <RovingTabIndexProvider handleHomeEnd handleUpDown onKeyDown={this.onKeyDown}>
@@ -484,35 +482,6 @@ export const toRightOf = (elementRect: Pick<DOMRect, "right" | "top" | "height">
     return { left, top, chevronOffset };
 };
 
-export type ToLeftOf = {
-    chevronOffset: number;
-    right: number;
-    top: number;
-};
-
-// Placement method for <ContextMenu /> to position context menu to left of elementRect with chevronOffset
-export const toLeftOf = (elementRect: DOMRect, chevronOffset = 12): ToLeftOf => {
-    const right = UIStore.instance.windowWidth - elementRect.left + window.scrollX - 3;
-    let top = elementRect.top + elementRect.height / 2 + window.scrollY;
-    top -= chevronOffset + 8; // where 8 is half the height of the chevron
-    return { right, top, chevronOffset };
-};
-
-/**
- * Placement method for <ContextMenu /> to position context menu of or right of elementRect
- * depending on which side has more space.
- */
-export const toLeftOrRightOf = (elementRect: DOMRect, chevronOffset = 12): ToRightOf | ToLeftOf => {
-    const spaceToTheLeft = elementRect.left;
-    const spaceToTheRight = UIStore.instance.windowWidth - elementRect.right;
-
-    if (spaceToTheLeft > spaceToTheRight) {
-        return toLeftOf(elementRect, chevronOffset);
-    }
-
-    return toRightOf(elementRect, chevronOffset);
-};
-
 // Placement method for <ContextMenu /> to position context menu right-aligned and flowing to the left of elementRect,
 // and either above or below: wherever there is more space (maybe this should be aboveOrBelowLeftOf?)
 export const aboveLeftOf = (
@@ -606,7 +575,6 @@ type ContextMenuTuple<T> = [
     (ev?: SyntheticEvent) => void,
     (val: boolean) => void,
 ];
-// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
 export const useContextMenu = <T extends HTMLElement = HTMLElement>(
     inputRef?: RefObject<T | null>,
 ): ContextMenuTuple<T> => {
@@ -628,7 +596,6 @@ export const useContextMenu = <T extends HTMLElement = HTMLElement>(
         setIsOpen(false);
     };
 
-    // eslint-disable-next-line react-compiler/react-compiler
     return [button.current ? isOpen : false, button, open, close, setIsOpen];
 };
 
@@ -638,5 +605,3 @@ export { ContextMenuTooltipButton } from "../../accessibility/context_menu/Conte
 export { MenuItem } from "../../accessibility/context_menu/MenuItem";
 export { MenuItemCheckbox } from "../../accessibility/context_menu/MenuItemCheckbox";
 export { MenuItemRadio } from "../../accessibility/context_menu/MenuItemRadio";
-export { StyledMenuItemCheckbox } from "../../accessibility/context_menu/StyledMenuItemCheckbox";
-export { StyledMenuItemRadio } from "../../accessibility/context_menu/StyledMenuItemRadio";
diff --git a/apps/web/src/components/structures/EmbeddedPage.tsx b/apps/web/src/components/structures/EmbeddedPage.tsx
index 8ea20d3cb3..4f2bd2f6a6 100644
--- a/apps/web/src/components/structures/EmbeddedPage.tsx
+++ b/apps/web/src/components/structures/EmbeddedPage.tsx
@@ -11,14 +11,17 @@ import React from "react";
 import sanitizeHtml from "sanitize-html";
 import classnames from "classnames";
 import { logger } from "matrix-js-sdk/src/logger";
+import { AutoHideScrollbar } from "@element-hq/web-shared-components";
 
 import { _t } from "../../languageHandler";
 import dis from "../../dispatcher/dispatcher";
 import { MatrixClientPeg } from "../../MatrixClientPeg";
 import MatrixClientContext from "../../contexts/MatrixClientContext";
-import AutoHideScrollbar from "./AutoHideScrollbar";
 import { type ActionPayload } from "../../dispatcher/payloads";
 import { Action } from "../../dispatcher/actions.ts";
+import { sanitizedHtmlNode } from "../../HtmlUtils.tsx";
+import { sanitizeHtmlParams, transformTags } from "../../Linkify.ts";
+import { objectExcluding } from "../../utils/objects.ts";
 
 interface IProps {
     // URL to request embedded page content from
@@ -121,11 +124,20 @@ export default class EmbeddedPage extends React.PureComponent<IProps, IState> {
         const isGuest = client ? client.isGuest() : true;
         const className = this.props.className;
         const classes = classnames(className, {
+            mx_AutoHideScrollbar: this.props.scrollbar,
             [`${className}_guest`]: isGuest,
             [`${className}_loggedIn`]: !!client,
         });
 
-        const content = <div className={`${className}_body`} dangerouslySetInnerHTML={{ __html: this.state.page }} />;
+        const content = sanitizedHtmlNode(this.state.page, `${className}_body`, {
+            ...sanitizeHtmlParams,
+            transformTags: objectExcluding(transformTags, [
+                // Disable the transformer for `img` as it only allows mxc resources
+                "img",
+                // Disable the default transformer as it forbids inline styles
+                "*",
+            ]),
+        });
 
         if (this.props.scrollbar) {
             return <AutoHideScrollbar className={classes}>{content}</AutoHideScrollbar>;
diff --git a/apps/web/src/components/structures/ErrorMessage.tsx b/apps/web/src/components/structures/ErrorMessage.tsx
index c721e67fc5..cd30d19361 100644
--- a/apps/web/src/components/structures/ErrorMessage.tsx
+++ b/apps/web/src/components/structures/ErrorMessage.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type ReactNode } from "react";
-import { WarningIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 interface ErrorMessageProps {
     message: string | ReactNode | null;
@@ -18,7 +18,7 @@ interface ErrorMessageProps {
  * Reserves two lines to display errors to prevent layout shifts when the error pops up.
  */
 export const ErrorMessage: React.FC<ErrorMessageProps> = ({ message }) => {
-    const icon = message ? <WarningIcon className="mx_Icon mx_Icon_16" /> : null;
+    const icon = message ? <ErrorSolidIcon width="20px" height="20px" /> : null;
 
     return (
         <div className="mx_ErrorMessage">
diff --git a/apps/web/src/components/structures/FileDropTarget.tsx b/apps/web/src/components/structures/FileDropTarget.tsx
index 564383d9f4..8dd748cecf 100644
--- a/apps/web/src/components/structures/FileDropTarget.tsx
+++ b/apps/web/src/components/structures/FileDropTarget.tsx
@@ -1,4 +1,5 @@
 /*
+Copyright 2026 Element Creations Ltd.
 Copyright 2024 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
 
@@ -7,16 +8,14 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { useEffect, useState } from "react";
-import { type Room } from "matrix-js-sdk/src/matrix";
+import { useViewModel } from "@element-hq/web-shared-components";
 
 import { _t } from "../../languageHandler";
 import UploadBigSvg from "../../../res/img/upload-big.svg";
-import { useRoomState } from "../../hooks/useRoomState.ts";
+import { useRoomUploadViewModel } from "../../viewmodels/room/RoomUploadViewModel";
 
 interface IProps {
-    room: Room;
     parent: HTMLElement | null;
-    onFileDrop(this: void, dataTransfer: DataTransfer): void;
 }
 
 interface IState {
@@ -24,15 +23,16 @@ interface IState {
     counter: number;
 }
 
-const FileDropTarget: React.FC<IProps> = ({ parent, onFileDrop, room }) => {
+const FileDropTarget: React.FC<IProps> = ({ parent }) => {
     const [state, setState] = useState<IState>({
         dragging: false,
         counter: 0,
     });
-    const hasPermission = useRoomState(room, (state) => state.maySendMessage(room.client.getUserId()!));
+    const vm = useRoomUploadViewModel();
+    const { mayDragAndDropFile } = useViewModel(vm);
 
     useEffect(() => {
-        if (!hasPermission || !parent || parent.ondrop) return;
+        if (!mayDragAndDropFile || !parent || parent.ondrop) return;
 
         const onDragEnter = (ev: DragEvent): void => {
             ev.stopPropagation();
@@ -83,7 +83,7 @@ const FileDropTarget: React.FC<IProps> = ({ parent, onFileDrop, room }) => {
             ev.stopPropagation();
             ev.preventDefault();
             if (!ev.dataTransfer) return;
-            onFileDrop(ev.dataTransfer);
+            void vm.initiateViaDataTransfer(ev.dataTransfer);
 
             setState((state) => ({
                 dragging: false,
@@ -106,9 +106,9 @@ const FileDropTarget: React.FC<IProps> = ({ parent, onFileDrop, room }) => {
             parent?.removeEventListener("dragenter", onDragEnter);
             parent?.removeEventListener("dragleave", onDragLeave);
         };
-    }, [parent, onFileDrop, hasPermission]);
+    }, [parent, mayDragAndDropFile, vm]);
 
-    if (hasPermission && state.dragging) {
+    if (mayDragAndDropFile && state.dragging) {
         return (
             <div className="mx_FileDropTarget">
                 <img src={UploadBigSvg} className="mx_FileDropTarget_image" alt="" />
diff --git a/apps/web/src/components/structures/GenericDropdownMenu.tsx b/apps/web/src/components/structures/GenericDropdownMenu.tsx
index f76e43c108..2a9f2f0055 100644
--- a/apps/web/src/components/structures/GenericDropdownMenu.tsx
+++ b/apps/web/src/components/structures/GenericDropdownMenu.tsx
@@ -123,7 +123,7 @@ export function GenericDropdownMenu<T>({
     className,
     AdditionalOptions,
 }: IProps<T>): JSX.Element {
-    const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu<HTMLElement>();
+    const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
 
     const valueKey = calculateKey(value, toKey);
     const selected: GenericDropdownMenuItem<T> | undefined = options
diff --git a/apps/web/src/components/structures/HomePage.tsx b/apps/web/src/components/structures/HomePage.tsx
index 56444789c1..0f74280e77 100644
--- a/apps/web/src/components/structures/HomePage.tsx
+++ b/apps/web/src/components/structures/HomePage.tsx
@@ -6,11 +6,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX } from "react";
-import { useContext, useState } from "react";
+import React, { type JSX, useContext, useState } from "react";
 import { ChatSolidIcon, ExploreIcon, GroupIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { AutoHideScrollbar } from "@element-hq/web-shared-components";
 
-import AutoHideScrollbar from "./AutoHideScrollbar";
 import { getHomePageUrl } from "../../utils/pages";
 import { _t, _tDom } from "../../languageHandler";
 import SdkConfig from "../../SdkConfig";
@@ -113,7 +112,7 @@ const HomePage: React.FC<IProps> = ({ justRegistered = false }) => {
     }
 
     return (
-        <AutoHideScrollbar className="mx_HomePage mx_HomePage_default" element="main">
+        <AutoHideScrollbar className="mx_AutoHideScrollbar mx_HomePage mx_HomePage_default" as="main">
             <div className="mx_HomePage_default_wrapper">
                 {introSection}
                 <div className="mx_HomePage_default_buttons">
diff --git a/apps/web/src/components/structures/IndicatorScrollbar.tsx b/apps/web/src/components/structures/IndicatorScrollbar.tsx
index f566e2d256..46d7ba537e 100644
--- a/apps/web/src/components/structures/IndicatorScrollbar.tsx
+++ b/apps/web/src/components/structures/IndicatorScrollbar.tsx
@@ -5,9 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef, type JSX } from "react";
+import React, { type JSX } from "react";
+import { AutoHideScrollbar, type AutoHideScrollbarProps } from "@element-hq/web-shared-components";
+import classNames from "classnames";
 
-import AutoHideScrollbar, { type IProps as AutoHideScrollbarProps } from "./AutoHideScrollbar";
 import UIStore, { UI_EVENTS } from "../../stores/UIStore";
 
 export type IProps<T extends keyof JSX.IntrinsicElements> = Omit<AutoHideScrollbarProps<T>, "onWheel" | "element"> & {
@@ -32,7 +33,6 @@ export default class IndicatorScrollbar<T extends keyof JSX.IntrinsicElements> e
     IProps<T>,
     IState
 > {
-    private autoHideScrollbar = createRef<AutoHideScrollbar<any>>();
     private scrollElement?: HTMLDivElement;
     private likelyTrackpadUser: boolean | null = null;
     private checkAgainForTrackpad = 0; // ts in milliseconds to recheck this._likelyTrackpadUser
@@ -169,8 +169,7 @@ export default class IndicatorScrollbar<T extends keyof JSX.IntrinsicElements> e
     };
 
     public render(): React.ReactNode {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { children, trackHorizontalOverflow, verticalScrollsHorizontally, ...otherProps } = this.props;
+        const { children, trackHorizontalOverflow, verticalScrollsHorizontally, className, ...otherProps } = this.props;
 
         const leftIndicatorStyle = { left: this.state.leftIndicatorOffset };
         const rightIndicatorStyle = { right: this.state.rightIndicatorOffset };
@@ -184,7 +183,7 @@ export default class IndicatorScrollbar<T extends keyof JSX.IntrinsicElements> e
         return (
             <AutoHideScrollbar
                 {...otherProps}
-                ref={this.autoHideScrollbar}
+                className={classNames("mx_AutoHideScrollbar", className)}
                 wrappedRef={this.collectScroller}
                 onWheel={this.onMouseWheel}
             >
diff --git a/apps/web/src/components/structures/LeftPanel.tsx b/apps/web/src/components/structures/LeftPanel.tsx
index 52e5a87231..5c14f0f027 100644
--- a/apps/web/src/components/structures/LeftPanel.tsx
+++ b/apps/web/src/components/structures/LeftPanel.tsx
@@ -6,433 +6,57 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX } from "react";
-import { createRef } from "react";
+import React from "react";
 import classNames from "classnames";
-import { ExploreIcon, DialPadIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
-import dis from "../../dispatcher/dispatcher";
-import { _t } from "../../languageHandler";
-import LegacyRoomList from "../views/rooms/LegacyRoomList";
-import LegacyCallHandler, { LegacyCallHandlerEvent } from "../../LegacyCallHandler";
-import { HEADER_HEIGHT } from "../views/rooms/RoomSublist";
-import { Action } from "../../dispatcher/actions";
-import RoomSearch from "./RoomSearch";
 import type ResizeNotifier from "../../utils/ResizeNotifier";
-import SpaceStore from "../../stores/spaces/SpaceStore";
-import { MetaSpace, type SpaceKey, UPDATE_SELECTED_SPACE } from "../../stores/spaces";
-import { getKeyBindingsManager } from "../../KeyBindingsManager";
-import UIStore from "../../stores/UIStore";
-import { type IState as IRovingTabIndexState } from "../../accessibility/RovingTabIndex";
-import LegacyRoomListHeader from "../views/rooms/LegacyRoomListHeader";
-import { BreadcrumbsStore } from "../../stores/BreadcrumbsStore";
-import RoomListStore, { LISTS_UPDATE_EVENT } from "../../stores/room-list/RoomListStore";
-import { UPDATE_EVENT } from "../../stores/AsyncStore";
-import IndicatorScrollbar from "./IndicatorScrollbar";
-import RoomBreadcrumbs from "../views/rooms/RoomBreadcrumbs";
-import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
-import { shouldShowComponent } from "../../customisations/helpers/UIComponents";
-import { UIComponent } from "../../settings/UIFeature";
-import AccessibleButton, { type ButtonEvent } from "../views/elements/AccessibleButton";
-import PosthogTrackers from "../../PosthogTrackers";
-import type PageType from "../../PageTypes";
-import { Landmark, LandmarkNavigation } from "../../accessibility/LandmarkNavigation";
-import SettingsStore from "../../settings/SettingsStore";
+import { type SpaceKey, UPDATE_SELECTED_SPACE } from "../../stores/spaces";
 import { RoomListPanel } from "../views/rooms/RoomListPanel";
+import { SDKContext } from "../../contexts/SDKContext.ts";
 
 interface IProps {
     isMinimized: boolean;
-    pageType: PageType;
     resizeNotifier: ResizeNotifier;
 }
 
-enum BreadcrumbsMode {
-    Disabled,
-    Legacy,
-}
-
 interface IState {
-    showBreadcrumbs: BreadcrumbsMode;
     activeSpace: SpaceKey;
-    supportsPstnProtocol: boolean;
 }
 
 export default class LeftPanel extends React.Component<IProps, IState> {
-    private listContainerRef = createRef<HTMLDivElement>();
-    private roomListRef = createRef<LegacyRoomList>();
-    private focusedElement: Element | null = null;
-    private isDoingStickyHeaders = false;
+    public static contextType = SDKContext;
+    declare public context: React.ContextType<typeof SDKContext>;
 
-    public constructor(props: IProps) {
-        super(props);
+    public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
+        super(props, context);
 
         this.state = {
-            activeSpace: SpaceStore.instance.activeSpace,
-            showBreadcrumbs: LeftPanel.breadcrumbsMode,
-            supportsPstnProtocol: LegacyCallHandler.instance.getSupportsPstnProtocol(),
+            activeSpace: context.spaceStore.activeSpace,
         };
     }
 
-    private static get breadcrumbsMode(): BreadcrumbsMode {
-        return !BreadcrumbsStore.instance.visible ? BreadcrumbsMode.Disabled : BreadcrumbsMode.Legacy;
-    }
-
     public componentDidMount(): void {
-        BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate);
-        RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
-        SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
-        LegacyCallHandler.instance.on(LegacyCallHandlerEvent.ProtocolSupport, this.updateProtocolSupport);
-
-        if (this.listContainerRef.current) {
-            UIStore.instance.trackElementDimensions("ListContainer", this.listContainerRef.current);
-            // Using the passive option to not block the main thread
-            // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners
-            this.listContainerRef.current.addEventListener("scroll", this.onScroll, { passive: true });
-        }
-        UIStore.instance.on("ListContainer", this.refreshStickyHeaders);
+        this.context.spaceStore.on(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
     }
 
     public componentWillUnmount(): void {
-        BreadcrumbsStore.instance.off(UPDATE_EVENT, this.onBreadcrumbsUpdate);
-        RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onBreadcrumbsUpdate);
-        SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
-        LegacyCallHandler.instance.off(LegacyCallHandlerEvent.ProtocolSupport, this.updateProtocolSupport);
-        UIStore.instance.stopTrackingElementDimensions("ListContainer");
-        UIStore.instance.removeListener("ListContainer", this.refreshStickyHeaders);
-        this.listContainerRef.current?.removeEventListener("scroll", this.onScroll);
+        this.context.spaceStore.off(UPDATE_SELECTED_SPACE, this.updateActiveSpace);
     }
 
-    public componentDidUpdate(prevProps: IProps, prevState: IState): void {
-        if (prevState.activeSpace !== this.state.activeSpace) {
-            this.refreshStickyHeaders();
-        }
-    }
-
-    private updateProtocolSupport = (): void => {
-        this.setState({ supportsPstnProtocol: LegacyCallHandler.instance.getSupportsPstnProtocol() });
-    };
-
     private updateActiveSpace = (activeSpace: SpaceKey): void => {
         this.setState({ activeSpace });
     };
 
-    private onDialPad = (): void => {
-        dis.fire(Action.OpenDialPad);
-    };
-
-    private onExplore = (ev: ButtonEvent): void => {
-        dis.fire(Action.ViewRoomDirectory);
-        PosthogTrackers.trackInteraction("WebLeftPanelExploreRoomsButton", ev);
-    };
-
-    private refreshStickyHeaders = (): void => {
-        if (!this.listContainerRef.current) return; // ignore: no headers to sticky
-        this.handleStickyHeaders(this.listContainerRef.current);
-    };
-
-    private onBreadcrumbsUpdate = (): void => {
-        const newVal = LeftPanel.breadcrumbsMode;
-        if (newVal !== this.state.showBreadcrumbs) {
-            this.setState({ showBreadcrumbs: newVal });
-
-            // Update the sticky headers too as the breadcrumbs will be popping in or out.
-            if (!this.listContainerRef.current) return; // ignore: no headers to sticky
-            this.handleStickyHeaders(this.listContainerRef.current);
-        }
-    };
-
-    private handleStickyHeaders(list: HTMLDivElement): void {
-        if (this.isDoingStickyHeaders) return;
-        this.isDoingStickyHeaders = true;
-        window.requestAnimationFrame(() => {
-            this.doStickyHeaders(list);
-            this.isDoingStickyHeaders = false;
-        });
-    }
-
-    private doStickyHeaders(list: HTMLDivElement): void {
-        if (!list.parentElement) return;
-        const topEdge = list.scrollTop;
-        const bottomEdge = list.offsetHeight + list.scrollTop;
-        const sublists = list.querySelectorAll<HTMLDivElement>(".mx_RoomSublist:not(.mx_RoomSublist_hidden)");
-
-        // We track which styles we want on a target before making the changes to avoid
-        // excessive layout updates.
-        const targetStyles = new Map<
-            HTMLDivElement,
-            {
-                stickyTop?: boolean;
-                stickyBottom?: boolean;
-                makeInvisible?: boolean;
-            }
-        >();
-
-        let lastTopHeader: HTMLDivElement | undefined;
-        let firstBottomHeader: HTMLDivElement | undefined;
-        for (const sublist of sublists) {
-            const header = sublist.querySelector<HTMLDivElement>(".mx_RoomSublist_stickable");
-            if (!header) continue; // this should never occur
-            header.style.removeProperty("display"); // always clear display:none first
-
-            // When an element is <=40% off screen, make it take over
-            const offScreenFactor = 0.4;
-            const isOffTop = sublist.offsetTop + offScreenFactor * HEADER_HEIGHT <= topEdge;
-            const isOffBottom = sublist.offsetTop + offScreenFactor * HEADER_HEIGHT >= bottomEdge;
-
-            if (isOffTop || sublist === sublists[0]) {
-                targetStyles.set(header, { stickyTop: true });
-                if (lastTopHeader) {
-                    lastTopHeader.style.display = "none";
-                    targetStyles.set(lastTopHeader, { makeInvisible: true });
-                }
-                lastTopHeader = header;
-            } else if (isOffBottom && !firstBottomHeader) {
-                targetStyles.set(header, { stickyBottom: true });
-                firstBottomHeader = header;
-            } else {
-                targetStyles.set(header, {}); // nothing == clear
-            }
-        }
-
-        // Run over the style changes and make them reality. We check to see if we're about to
-        // cause a no-op update, as adding/removing properties that are/aren't there cause
-        // layout updates.
-        for (const header of targetStyles.keys()) {
-            const style = targetStyles.get(header)!;
-
-            if (style.makeInvisible) {
-                // we will have already removed the 'display: none', so add it back.
-                header.style.display = "none";
-                continue; // nothing else to do, even if sticky somehow
-            }
-
-            if (style.stickyTop) {
-                if (!header.classList.contains("mx_RoomSublist_headerContainer_stickyTop")) {
-                    header.classList.add("mx_RoomSublist_headerContainer_stickyTop");
-                }
-
-                const newTop = `${list.parentElement.offsetTop}px`;
-                if (header.style.top !== newTop) {
-                    header.style.top = newTop;
-                }
-            } else {
-                if (header.classList.contains("mx_RoomSublist_headerContainer_stickyTop")) {
-                    header.classList.remove("mx_RoomSublist_headerContainer_stickyTop");
-                }
-                if (header.style.top) {
-                    header.style.removeProperty("top");
-                }
-            }
-
-            if (style.stickyBottom) {
-                if (!header.classList.contains("mx_RoomSublist_headerContainer_stickyBottom")) {
-                    header.classList.add("mx_RoomSublist_headerContainer_stickyBottom");
-                }
-
-                const offset =
-                    UIStore.instance.windowHeight - (list.parentElement.offsetTop + list.parentElement.offsetHeight);
-                const newBottom = `${offset}px`;
-                if (header.style.bottom !== newBottom) {
-                    header.style.bottom = newBottom;
-                }
-            } else {
-                if (header.classList.contains("mx_RoomSublist_headerContainer_stickyBottom")) {
-                    header.classList.remove("mx_RoomSublist_headerContainer_stickyBottom");
-                }
-                if (header.style.bottom) {
-                    header.style.removeProperty("bottom");
-                }
-            }
-
-            if (style.stickyTop || style.stickyBottom) {
-                if (!header.classList.contains("mx_RoomSublist_headerContainer_sticky")) {
-                    header.classList.add("mx_RoomSublist_headerContainer_sticky");
-                }
-
-                const listDimensions = UIStore.instance.getElementDimensions("ListContainer");
-                if (listDimensions) {
-                    const headerRightMargin = 15; // calculated from margins and widths to align with non-sticky tiles
-                    const headerStickyWidth = listDimensions.width - headerRightMargin;
-                    const newWidth = `${headerStickyWidth}px`;
-                    if (header.style.width !== newWidth) {
-                        header.style.width = newWidth;
-                    }
-                }
-            } else if (!style.stickyTop && !style.stickyBottom) {
-                if (header.classList.contains("mx_RoomSublist_headerContainer_sticky")) {
-                    header.classList.remove("mx_RoomSublist_headerContainer_sticky");
-                }
-
-                if (header.style.width) {
-                    header.style.removeProperty("width");
-                }
-            }
-        }
-
-        // add appropriate sticky classes to wrapper so it has
-        // the necessary top/bottom padding to put the sticky header in
-        const listWrapper = list.parentElement; // .mx_LeftPanel_roomListWrapper
-        if (!listWrapper) return;
-        if (lastTopHeader) {
-            listWrapper.classList.add("mx_LeftPanel_roomListWrapper_stickyTop");
-        } else {
-            listWrapper.classList.remove("mx_LeftPanel_roomListWrapper_stickyTop");
-        }
-        if (firstBottomHeader) {
-            listWrapper.classList.add("mx_LeftPanel_roomListWrapper_stickyBottom");
-        } else {
-            listWrapper.classList.remove("mx_LeftPanel_roomListWrapper_stickyBottom");
-        }
-    }
-
-    private onScroll = (ev: Event): void => {
-        const list = ev.target as HTMLDivElement;
-        this.handleStickyHeaders(list);
-    };
-
-    private onFocus = (ev: React.FocusEvent): void => {
-        this.focusedElement = ev.target;
-    };
-
-    private onBlur = (): void => {
-        this.focusedElement = null;
-    };
-
-    private onKeyDown = (ev: React.KeyboardEvent, state?: IRovingTabIndexState): void => {
-        if (!this.focusedElement) return;
-
-        const action = getKeyBindingsManager().getRoomListAction(ev);
-        switch (action) {
-            case KeyBindingAction.NextRoom:
-                if (!state) {
-                    ev.stopPropagation();
-                    ev.preventDefault();
-                    this.roomListRef.current?.focus();
-                }
-                break;
-        }
-
-        const navAction = getKeyBindingsManager().getNavigationAction(ev);
-        if (navAction === KeyBindingAction.PreviousLandmark || navAction === KeyBindingAction.NextLandmark) {
-            ev.stopPropagation();
-            ev.preventDefault();
-            LandmarkNavigation.findAndFocusNextLandmark(
-                Landmark.ROOM_SEARCH,
-                navAction === KeyBindingAction.PreviousLandmark,
-            );
-        }
-    };
-
-    private renderBreadcrumbs(): React.ReactNode {
-        if (this.state.showBreadcrumbs === BreadcrumbsMode.Legacy && !this.props.isMinimized) {
-            return (
-                <IndicatorScrollbar
-                    role="navigation"
-                    aria-label={_t("a11y|recent_rooms")}
-                    className="mx_LeftPanel_breadcrumbsContainer mx_AutoHideScrollbar"
-                    verticalScrollsHorizontally={true}
-                >
-                    <RoomBreadcrumbs />
-                </IndicatorScrollbar>
-            );
-        }
-    }
-
-    private renderSearchDialExplore(): React.ReactNode {
-        let dialPadButton: JSX.Element | undefined;
-
-        // If we have dialer support, show a button to bring up the dial pad to start a new call
-        if (this.state.supportsPstnProtocol) {
-            dialPadButton = (
-                <AccessibleButton
-                    className="mx_LeftPanel_dialPadButton"
-                    onClick={this.onDialPad}
-                    title={_t("left_panel|open_dial_pad")}
-                >
-                    <DialPadIcon />
-                </AccessibleButton>
-            );
-        }
-
-        let rightButton: JSX.Element | undefined;
-        if (this.state.activeSpace === MetaSpace.Home && shouldShowComponent(UIComponent.ExploreRooms)) {
-            rightButton = (
-                <AccessibleButton
-                    className="mx_LeftPanel_exploreButton"
-                    onClick={this.onExplore}
-                    title={_t("action|explore_rooms")}
-                >
-                    <ExploreIcon />
-                </AccessibleButton>
-            );
-        }
-
-        return (
-            <div
-                className="mx_LeftPanel_filterContainer"
-                onFocus={this.onFocus}
-                onBlur={this.onBlur}
-                onKeyDown={this.onKeyDown}
-                role="search"
-            >
-                <RoomSearch isMinimized={this.props.isMinimized} />
-
-                {dialPadButton}
-                {rightButton}
-            </div>
-        );
-    }
-
     public render(): React.ReactNode {
-        const useNewRoomList = SettingsStore.getValue("feature_new_room_list");
         const containerClasses = classNames({
             mx_LeftPanel: true,
-            mx_LeftPanel_newRoomList: useNewRoomList,
             mx_LeftPanel_minimized: this.props.isMinimized,
         });
 
-        const roomListClasses = classNames("mx_LeftPanel_actualRoomListContainer", "mx_AutoHideScrollbar");
-        if (useNewRoomList) {
-            return (
-                <div className={containerClasses}>
-                    <div className="mx_LeftPanel_roomListContainer">
-                        <RoomListPanel activeSpace={this.state.activeSpace} />
-                    </div>
-                </div>
-            );
-        }
-
-        const roomList = (
-            <LegacyRoomList
-                onKeyDown={this.onKeyDown}
-                resizeNotifier={this.props.resizeNotifier}
-                onFocus={this.onFocus}
-                onBlur={this.onBlur}
-                isMinimized={this.props.isMinimized}
-                activeSpace={this.state.activeSpace}
-                onResize={this.refreshStickyHeaders}
-                onListCollapse={this.refreshStickyHeaders}
-                ref={this.roomListRef}
-            />
-        );
-
         return (
             <div className={containerClasses}>
                 <div className="mx_LeftPanel_roomListContainer">
-                    {shouldShowComponent(UIComponent.FilterContainer) && this.renderSearchDialExplore()}
-                    {this.renderBreadcrumbs()}
-                    {!this.props.isMinimized && <LegacyRoomListHeader onVisibilityChange={this.refreshStickyHeaders} />}
-                    <nav className="mx_LeftPanel_roomListWrapper" aria-label={_t("common|rooms")}>
-                        <div
-                            className={roomListClasses}
-                            ref={this.listContainerRef}
-                            // Firefox sometimes makes this element focusable due to
-                            // overflow:scroll;, so force it out of tab order.
-                            tabIndex={-1}
-                        >
-                            {roomList}
-                        </div>
-                    </nav>
+                    <RoomListPanel activeSpace={this.state.activeSpace} />
                 </div>
             </div>
         );
diff --git a/apps/web/src/components/structures/LegacyCallEventGrouper.ts b/apps/web/src/components/structures/LegacyCallEventGrouper.ts
index 76caea692e..9390fd6400 100644
--- a/apps/web/src/components/structures/LegacyCallEventGrouper.ts
+++ b/apps/web/src/components/structures/LegacyCallEventGrouper.ts
@@ -8,10 +8,12 @@ Please see LICENSE files in the repository root for full details.
 
 import { EventType, type MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { CallEvent, CallState, CallType, type MatrixCall } from "matrix-js-sdk/src/webrtc/call";
+// oxlint-disable-next-line no-restricted-imports
 import { EventEmitter } from "events";
 
-import LegacyCallHandler, { LegacyCallHandlerEvent } from "../../LegacyCallHandler";
+import { LegacyCallHandlerEvent } from "../../LegacyCallHandler";
 import { MatrixClientPeg } from "../../MatrixClientPeg";
+import { SDKContextClass } from "../../contexts/SDKContextClass.ts";
 
 export enum LegacyCallEventGrouperEvent {
     StateChanged = "state_changed",
@@ -65,8 +67,8 @@ export default class LegacyCallEventGrouper extends EventEmitter {
     public constructor() {
         super();
 
-        LegacyCallHandler.instance.addListener(LegacyCallHandlerEvent.CallsChanged, this.setCall);
-        LegacyCallHandler.instance.addListener(
+        SDKContextClass.instance.legacyCallHandler.addListener(LegacyCallHandlerEvent.CallsChanged, this.setCall);
+        SDKContextClass.instance.legacyCallHandler.addListener(
             LegacyCallHandlerEvent.SilencedCallsChanged,
             this.onSilencedCallsChanged,
         );
@@ -133,7 +135,7 @@ export default class LegacyCallEventGrouper extends EventEmitter {
     }
 
     private onSilencedCallsChanged = (): void => {
-        const newState = LegacyCallHandler.instance.isCallSilenced(this.callId);
+        const newState = SDKContextClass.instance.legacyCallHandler.isCallSilenced(this.callId);
         this.emit(LegacyCallEventGrouperEvent.SilencedChanged, newState);
     };
 
@@ -144,27 +146,27 @@ export default class LegacyCallEventGrouper extends EventEmitter {
     public answerCall = (): void => {
         const roomId = this.roomId;
         if (!roomId) return;
-        LegacyCallHandler.instance.answerCall(roomId);
+        SDKContextClass.instance.legacyCallHandler.answerCall(roomId);
     };
 
     public rejectCall = (): void => {
         const roomId = this.roomId;
         if (!roomId) return;
-        LegacyCallHandler.instance.hangupOrReject(roomId, true);
+        SDKContextClass.instance.legacyCallHandler.hangupOrReject(roomId, true);
     };
 
     public callBack = (): void => {
         const roomId = this.roomId;
         if (!roomId) return;
-        LegacyCallHandler.instance.placeCall(roomId, this.isVoice ? CallType.Voice : CallType.Video);
+        SDKContextClass.instance.legacyCallHandler.placeCall(roomId, this.isVoice ? CallType.Voice : CallType.Video);
     };
 
     public toggleSilenced = (): void => {
-        const silenced = LegacyCallHandler.instance.isCallSilenced(this.callId);
+        const silenced = SDKContextClass.instance.legacyCallHandler.isCallSilenced(this.callId);
         if (silenced) {
-            LegacyCallHandler.instance.unSilenceCall(this.callId);
+            SDKContextClass.instance.legacyCallHandler.unSilenceCall(this.callId);
         } else {
-            LegacyCallHandler.instance.silenceCall(this.callId);
+            SDKContextClass.instance.legacyCallHandler.silenceCall(this.callId);
         }
     };
 
@@ -195,7 +197,7 @@ export default class LegacyCallEventGrouper extends EventEmitter {
         const callId = this.callId;
         if (!callId || this.call) return;
 
-        this.call = LegacyCallHandler.instance.getCallById(callId);
+        this.call = SDKContextClass.instance.legacyCallHandler.getCallById(callId);
         this.setCallListeners();
         this.setState();
     };
diff --git a/apps/web/src/components/structures/LoggedInView.tsx b/apps/web/src/components/structures/LoggedInView.tsx
index ad364a6527..51f23ecc55 100644
--- a/apps/web/src/components/structures/LoggedInView.tsx
+++ b/apps/web/src/components/structures/LoggedInView.tsx
@@ -28,37 +28,31 @@ import { isOnlyCtrlOrCmdKeyEvent, Key } from "../../Keyboard";
 import PageTypes from "../../PageTypes";
 import MediaDeviceHandler from "../../MediaDeviceHandler";
 import dis from "../../dispatcher/dispatcher";
-import { type IMatrixClientCreds } from "../../MatrixClientPeg";
+import { type IMatrixClientCreds } from "../../utils/createMatrixClient";
 import SettingsStore from "../../settings/SettingsStore";
 import { SettingLevel } from "../../settings/SettingLevel";
-import ResizeHandle from "../views/elements/ResizeHandle";
-import { CollapseDistributor, Resizer } from "../../resizer";
 import PlatformPeg from "../../PlatformPeg";
-import { DefaultTagID } from "../../stores/room-list-v3/skip-list/tag";
 import { hideToast as hideServerLimitToast, showToast as showServerLimitToast } from "../../toasts/ServerLimitToast";
 import { Action } from "../../dispatcher/actions";
 import LeftPanel from "./LeftPanel";
 import { type ViewRoomDeltaPayload } from "../../dispatcher/payloads/ViewRoomDeltaPayload";
-import RoomListStore from "../../stores/room-list/RoomListStore";
+import RoomListStoreV3 from "../../stores/room-list-v3/RoomListStoreV3";
 import NonUrgentToastContainer from "./NonUrgentToastContainer";
 import { type IOOBData, type IThreepidInvite } from "../../stores/ThreepidInviteStore";
 import Modal from "../../Modal";
-import { type CollapseItem, type ICollapseConfig } from "../../resizer/distributors/collapse";
 import { getKeyBindingsManager } from "../../KeyBindingsManager";
 import { type IOpts } from "../../createRoom";
 import SpacePanel from "../views/spaces/SpacePanel";
-import LegacyCallHandler, { LegacyCallHandlerEvent } from "../../LegacyCallHandler";
+import { LegacyCallHandlerEvent } from "../../LegacyCallHandler";
 import AudioFeedArrayForLegacyCall from "../views/voip/AudioFeedArrayForLegacyCall";
 import { OwnProfileStore } from "../../stores/OwnProfileStore";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import { RoomView } from "./RoomView";
 import ToastContainer from "./ToastContainer";
 import UserView from "./UserView";
-import { BackdropPanel } from "./BackdropPanel";
 import { mediaFromMxc } from "../../customisations/Media";
 import { UserTab } from "../views/dialogs/UserTab";
 import { type OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload";
-import RightPanelStore from "../../stores/right-panel/RightPanelStore";
 import { TimelineRenderingType } from "../../contexts/RoomContext";
 import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
 import { type SwitchSpacePayload } from "../../dispatcher/payloads/SwitchSpacePayload";
@@ -66,7 +60,6 @@ import LeftPanelLiveShareWarning from "../views/beacon/LeftPanelLiveShareWarning
 import HomePage from "./HomePage";
 import { PipContainer } from "./PipContainer";
 import { monitorSyncedPushRules } from "../../utils/pushRules/monitorSyncedPushRules";
-import { type ConfigOptions } from "../../SdkConfig";
 import { MatrixClientContextProvider } from "./MatrixClientContextProvider";
 import { Landmark, LandmarkNavigation } from "../../accessibility/LandmarkNavigation";
 import { ModuleApi } from "../../modules/Api.ts";
@@ -91,14 +84,11 @@ interface IProps {
     // transitioned to PWLU)
     onRegistered: (this: void, credentials: IMatrixClientCreds) => Promise<MatrixClient>;
     hideToSRUsers: boolean;
-    // eslint-disable-next-line camelcase
+
     page_type?: string;
-    autoJoin?: boolean;
     threepidInvite?: IThreepidInvite;
     roomOobData?: IOOBData;
     currentRoomId: string | null;
-    collapseLhs: boolean;
-    config: ConfigOptions;
     currentUserId: string | null;
     justRegistered?: boolean;
     roomJustCreatedOpts?: IOpts;
@@ -115,7 +105,6 @@ interface IState {
     backgroundImage?: string;
 }
 
-const NEW_ROOM_LIST_MIN_WIDTH = 224;
 /**
  * This is what our MatrixChat shows when we are logged in. The precise view is
  * determined by the page_type property.
@@ -130,13 +119,10 @@ class LoggedInView extends React.Component<IProps, IState> {
 
     protected readonly _matrixClient: MatrixClient;
     protected readonly _roomView: React.RefObject<RoomView | null>;
-    protected readonly _resizeContainer: React.RefObject<HTMLDivElement | null>;
-    protected readonly resizeHandler: React.RefObject<HTMLDivElement | null>;
     protected layoutWatcherRef?: string;
     protected compactLayoutWatcherRef?: string;
     protected backgroundImageWatcherRef?: string;
     protected timezoneProfileUpdateRef?: string[];
-    protected resizer?: Resizer<ICollapseConfig, CollapseItem>;
 
     private resizerViewModel?: ResizerViewModel;
 
@@ -151,7 +137,7 @@ class LoggedInView extends React.Component<IProps, IState> {
             // use compact timeline view
             useCompactLayout: SettingsStore.getValue("useCompactLayout"),
             usageLimitDismissed: false,
-            activeCalls: LegacyCallHandler.instance.getAllActiveCalls(),
+            activeCalls: context.legacyCallHandler.getAllActiveCalls(),
         };
 
         // stash the MatrixClient in case we log out before we are unmounted
@@ -160,13 +146,11 @@ class LoggedInView extends React.Component<IProps, IState> {
         MediaDeviceHandler.loadDevices();
 
         this._roomView = React.createRef();
-        this._resizeContainer = React.createRef();
-        this.resizeHandler = React.createRef();
     }
 
     public componentDidMount(): void {
         document.addEventListener("keydown", this.onNativeKeyDown, false);
-        LegacyCallHandler.instance.addListener(LegacyCallHandlerEvent.CallState, this.onCallState);
+        this.context.legacyCallHandler.addListener(LegacyCallHandlerEvent.CallState, this.onCallState);
 
         this.updateServerNoticeEvents();
 
@@ -198,30 +182,20 @@ class LoggedInView extends React.Component<IProps, IState> {
         // system time has changed between sessions.
         void this.onTimezoneUpdate();
 
-        this.loadResizer();
-
         OwnProfileStore.instance.on(UPDATE_EVENT, this.refreshBackgroundImage);
         this.refreshBackgroundImage();
-
-        this.resizerViewModel = new ResizerViewModel();
     }
 
-    /**
-     * Load or reload the resizer for the left panel
-     */
-    private loadResizer(): void {
-        // If the resizer already exists, detach it first
-        this.resizer?.detach();
-
-        this.resizer = this.createResizer();
-        this.resizer.attach();
-        this.loadResizerPreferences();
-    }
-
-    public componentDidUpdate(nextProps: Readonly<IProps>, nextState: Readonly<IState>, nextContext: any): void {
-        if (nextProps.page_type !== this.props.page_type) {
-            this.loadResizer();
+    private getResizerViewModel(): ResizerViewModel {
+        if (!this.resizerViewModel) {
+            this.resizerViewModel = new ResizerViewModel(this.context.callStore);
         }
+        return this.resizerViewModel;
+    }
+
+    private disposeResizerViewModel(): void {
+        this.resizerViewModel?.dispose();
+        this.resizerViewModel = undefined;
     }
 
     private onTimezoneUpdate = async (): Promise<void> => {
@@ -254,7 +228,7 @@ class LoggedInView extends React.Component<IProps, IState> {
 
     public componentWillUnmount(): void {
         document.removeEventListener("keydown", this.onNativeKeyDown, false);
-        LegacyCallHandler.instance.removeListener(LegacyCallHandlerEvent.CallState, this.onCallState);
+        this.context.legacyCallHandler.removeListener(LegacyCallHandlerEvent.CallState, this.onCallState);
         this._matrixClient.removeListener(ClientEvent.AccountData, this.onAccountData);
         this._matrixClient.removeListener(ClientEvent.Sync, this.onSync);
         this._matrixClient.removeListener(RoomStateEvent.Events, this.onRoomStateEvents);
@@ -263,12 +237,11 @@ class LoggedInView extends React.Component<IProps, IState> {
         SettingsStore.unwatchSetting(this.compactLayoutWatcherRef);
         SettingsStore.unwatchSetting(this.backgroundImageWatcherRef);
         this.timezoneProfileUpdateRef?.forEach((s) => SettingsStore.unwatchSetting(s));
-        this.resizer?.detach();
-        this.resizerViewModel?.dispose();
+        this.disposeResizerViewModel();
     }
 
     private onCallState = (): void => {
-        const activeCalls = LegacyCallHandler.instance.getAllActiveCalls();
+        const activeCalls = this.context.legacyCallHandler.getAllActiveCalls();
         if (activeCalls === this.state.activeCalls) return;
         this.setState({ activeCalls });
     };
@@ -291,66 +264,6 @@ class LoggedInView extends React.Component<IProps, IState> {
         return this._roomView.current.canResetTimeline();
     };
 
-    private createResizer(): Resizer<ICollapseConfig, CollapseItem> {
-        let panelSize: number | null;
-        let panelCollapsed: boolean;
-        const useNewRoomList = SettingsStore.getValue("feature_new_room_list");
-        // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel
-        const toggleSize = useNewRoomList ? NEW_ROOM_LIST_MIN_WIDTH : 206 - 50;
-
-        const collapseConfig: ICollapseConfig = {
-            toggleSize,
-            onCollapsed: (collapsed) => {
-                if (useNewRoomList) {
-                    // The new room list does not support collapsing.
-                    return;
-                }
-                panelCollapsed = collapsed;
-                if (collapsed) {
-                    dis.dispatch({ action: "hide_left_panel" });
-                    window.localStorage.setItem("mx_lhs_size", "0");
-                } else {
-                    dis.dispatch({ action: "show_left_panel" });
-                }
-            },
-            onResized: (size) => {
-                panelSize = size;
-                this.context.resizeNotifier.notifyLeftHandleResized();
-            },
-            onResizeStart: () => {
-                this.context.resizeNotifier.startResizing();
-            },
-            onResizeStop: () => {
-                // Always save the lhs size for the new room list.
-                if (useNewRoomList || !panelCollapsed) window.localStorage.setItem("mx_lhs_size", "" + panelSize);
-                this.context.resizeNotifier.stopResizing();
-            },
-            isItemCollapsed: (domNode) => {
-                // New rooms list does not support collapsing.
-                return !useNewRoomList && domNode.classList.contains("mx_LeftPanel_minimized");
-            },
-            handler: this.resizeHandler.current ?? undefined,
-        };
-        const resizer = new Resizer(this._resizeContainer.current, CollapseDistributor, collapseConfig);
-        resizer.setClassNames({
-            handle: "mx_ResizeHandle",
-            vertical: "mx_ResizeHandle--vertical",
-            reverse: "mx_ResizeHandle_reverse",
-        });
-        return resizer;
-    }
-
-    private loadResizerPreferences(): void {
-        const useNewRoomList = SettingsStore.getValue("feature_new_room_list");
-        let lhsSize = parseInt(window.localStorage.getItem("mx_lhs_size")!, 10);
-        // If the user has not set a size, or for the new room list if the size is less than the minimum width,
-        // set a default size.
-        if (isNaN(lhsSize) || (useNewRoomList && lhsSize < NEW_ROOM_LIST_MIN_WIDTH)) {
-            lhsSize = 350;
-        }
-        this.resizer?.forHandleWithId("lp-resizer")?.resize(lhsSize);
-    }
-
     private onAccountData = (event: MatrixEvent): void => {
         if (event.getType() === "m.ignored_user_list") {
             dis.dispatch({ action: "ignore_state_changed" });
@@ -382,8 +295,8 @@ class LoggedInView extends React.Component<IProps, IState> {
     };
 
     private onRoomStateEvents = (ev: MatrixEvent): void => {
-        const serverNoticeList = RoomListStore.instance.orderedLists[DefaultTagID.ServerNotice];
-        if (serverNoticeList?.some((r) => r.roomId === ev.getRoomId())) {
+        const serverNoticeList = RoomListStoreV3.instance.getServerNoticeRooms();
+        if (serverNoticeList.some((r) => r.roomId === ev.getRoomId())) {
             this.updateServerNoticeEvents();
         }
     };
@@ -397,7 +310,7 @@ class LoggedInView extends React.Component<IProps, IState> {
     private calculateServerLimitToast(syncError: IState["syncErrorData"], usageLimitEventContent?: IUsageLimit): void {
         const error = (syncError?.error as MatrixError)?.errcode === "M_RESOURCE_LIMIT_EXCEEDED";
         if (error) {
-            usageLimitEventContent = (syncError?.error as MatrixError).data as IUsageLimit;
+            usageLimitEventContent = (syncError?.error as MatrixError)?.data as IUsageLimit;
         }
 
         // usageLimitDismissed is true when the user has explicitly hidden the toast
@@ -415,8 +328,8 @@ class LoggedInView extends React.Component<IProps, IState> {
     }
 
     private updateServerNoticeEvents = async (): Promise<void> => {
-        const serverNoticeList = RoomListStore.instance.orderedLists[DefaultTagID.ServerNotice];
-        if (!serverNoticeList) return;
+        const serverNoticeList = RoomListStoreV3.instance.getServerNoticeRooms();
+        if (!serverNoticeList.length) return;
 
         const events: MatrixEvent[] = [];
         let pinnedEventTs = 0;
@@ -580,7 +493,7 @@ class LoggedInView extends React.Component<IProps, IState> {
                 break;
             case KeyBindingAction.ToggleRoomSidePanel:
                 if (this.props.page_type === "room_view") {
-                    RightPanelStore.instance.togglePanel(null);
+                    this.context.rightPanelStore.togglePanel(null);
                     handled = true;
                 }
                 break;
@@ -739,6 +652,8 @@ class LoggedInView extends React.Component<IProps, IState> {
                 break;
             default: {
                 if (moduleRenderer) {
+                    // Since the view will be removed, remove the vm as well
+                    this.disposeResizerViewModel();
                     pageElement = moduleRenderer();
                 } else {
                     console.warn(`Couldn't render page type "${this.props.page_type}"`);
@@ -755,39 +670,19 @@ class LoggedInView extends React.Component<IProps, IState> {
             "mx_MatrixChat--with-avatar": this.state.backgroundImage,
         });
 
-        const useNewRoomList = SettingsStore.getValue("feature_new_room_list");
-
-        const leftPanelWrapperClasses = classNames({
-            mx_LeftPanel_wrapper: true,
-            mx_LeftPanel_newRoomList: useNewRoomList,
-        });
+        const leftPanelWrapperClasses = classNames("mx_LeftPanel_wrapper");
 
         const audioFeedArraysForCalls = this.state.activeCalls.map((call) => {
             return <AudioFeedArrayForLegacyCall call={call} key={call.callId} />;
         });
 
-        const shouldUseMinimizedUI = !useNewRoomList && this.props.collapseLhs;
-
         const leftPanel = (
             <div className="mx_LeftPanel_outerWrapper">
-                <LeftPanelLiveShareWarning isMinimized={shouldUseMinimizedUI || false} />
+                <LeftPanelLiveShareWarning isMinimized={false} />
                 <div className={leftPanelWrapperClasses}>
-                    {!useNewRoomList && (
-                        <BackdropPanel blurMultiplier={0.5} backgroundImage={this.state.backgroundImage} />
-                    )}
-                    {!useNewRoomList && <SpacePanel />}
-                    {!useNewRoomList && <BackdropPanel backgroundImage={this.state.backgroundImage} />}
                     {!moduleRenderer && (
-                        <div
-                            className="mx_LeftPanel_wrapper--user"
-                            ref={this._resizeContainer}
-                            data-collapsed={shouldUseMinimizedUI ? true : undefined}
-                        >
-                            <LeftPanel
-                                pageType={this.props.page_type as PageTypes}
-                                isMinimized={shouldUseMinimizedUI || false}
-                                resizeNotifier={this.context.resizeNotifier}
-                            />
+                        <div className="mx_LeftPanel_wrapper--user">
+                            <LeftPanel isMinimized={false} resizeNotifier={this.context.resizeNotifier} />
                         </div>
                     )}
                 </div>
@@ -795,12 +690,17 @@ class LoggedInView extends React.Component<IProps, IState> {
         );
 
         const roomView = <div className="mx_RoomView_wrapper">{pageElement}</div>;
-        const content =
-            useNewRoomList && this.resizerViewModel ? (
-                <GroupView vm={this.resizerViewModel}>
+
+        let content: React.ReactNode;
+        const resizerViewModel = !moduleRenderer ? this.getResizerViewModel() : undefined;
+        if (resizerViewModel && !moduleRenderer) {
+            // Resizable layout with a draggable separator. The SpacePanel lives inside GroupView
+            // (leftPanel omits it).
+            content = (
+                <GroupView vm={resizerViewModel}>
                     <SpacePanel />
                     <LeftResizablePanelView
-                        vm={this.resizerViewModel}
+                        vm={resizerViewModel}
                         className="mx_LeftPanel_panel"
                         minSize="200px"
                         maxSize="370px"
@@ -808,16 +708,22 @@ class LoggedInView extends React.Component<IProps, IState> {
                     >
                         {leftPanel}
                     </LeftResizablePanelView>
-                    <SeparatorView className="mx_Separator" vm={this.resizerViewModel} />
+                    <SeparatorView className="mx_Separator" vm={resizerViewModel} />
                     <Panel className="mx_LeftPanel_panel">{roomView}</Panel>
                 </GroupView>
-            ) : (
+            );
+        } else {
+            // Fallback layout for a module's full-screen view (e.g. multiroom) which must not use the
+            // resizable layout above. The ResizeHandle is dropped for module views, which manage their
+            // own layout.
+            content = (
                 <>
+                    <SpacePanel />
                     {leftPanel}
-                    {!moduleRenderer && <ResizeHandle passRef={this.resizeHandler} id="lp-resizer" />}
                     {roomView}
                 </>
             );
+        }
 
         return (
             <MatrixClientContextProvider client={this._matrixClient}>
diff --git a/apps/web/test/unit-tests/components/structures/MatrixChat-test.tsx b/apps/web/src/components/structures/MatrixChat.test.tsx
similarity index 72%
rename from apps/web/test/unit-tests/components/structures/MatrixChat-test.tsx
rename to apps/web/src/components/structures/MatrixChat.test.tsx
index bf53fe8910..8b3e7ef3aa 100644
--- a/apps/web/test/unit-tests/components/structures/MatrixChat-test.tsx
+++ b/apps/web/src/components/structures/MatrixChat.test.tsx
@@ -6,17 +6,24 @@ 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 "fake-indexeddb/auto";
-import React, { type ComponentProps } from "react";
-import { fireEvent, render, type RenderResult, screen, waitFor, within, act } from "jest-matrix-react";
-import { type Mocked, mocked } from "jest-mock";
-import { ClientEvent, type MatrixClient, MatrixEvent, Room, SyncState } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach, afterEach, type Mocked } from "vitest";
+import React, { type ComponentProps, createRef, type RefObject } from "react";
+import { cleanup, fireEvent, render, type RenderResult, screen, waitFor, within, act } from "test-utils-rtl";
+import {
+    ClientEvent,
+    type MatrixClient,
+    MatrixEvent,
+    Room,
+    SyncState,
+    OAuth2,
+    type BearerTokenResponse,
+    OAuth2Error,
+} from "matrix-js-sdk/src/matrix";
 import { type MediaHandler } from "matrix-js-sdk/src/webrtc/mediaHandler";
 import * as MatrixJs from "matrix-js-sdk/src/matrix";
-import { completeAuthorizationCodeGrant } from "matrix-js-sdk/src/oidc/authorize";
 import { logger } from "matrix-js-sdk/src/logger";
-import { OidcError } from "matrix-js-sdk/src/oidc/error";
-import { type BearerTokenResponse } from "matrix-js-sdk/src/oidc/validate";
 import { sleep } from "matrix-js-sdk/src/utils";
 import {
     CryptoEvent,
@@ -24,12 +31,8 @@ import {
     UserVerificationStatus,
     type CryptoApi,
 } from "matrix-js-sdk/src/crypto-api";
-
-import MatrixChat from "../../../../src/components/structures/MatrixChat";
-import * as StorageAccess from "../../../../src/utils/StorageAccess";
-import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
-import { Action } from "../../../../src/dispatcher/actions";
-import { UserTab } from "../../../../src/components/views/dialogs/UserTab";
+import fetchMock from "@fetch-mock/vitest";
+import * as qrLogin from "matrix-js-sdk/src/rendezvous";
 import {
     clearAllModals,
     createStubMatrixRTC,
@@ -42,57 +45,99 @@ import {
     mockPlatformPeg,
     resetJsDomAfterEach,
     unmockClientPeg,
-} from "../../../test-utils";
-import * as leaveRoomUtils from "../../../../src/utils/leave-behaviour";
-import { OidcClientError } from "../../../../src/utils/oidc/error";
-import LegacyCallHandler from "../../../../src/LegacyCallHandler";
-import { CallStore } from "../../../../src/stores/CallStore";
-import { type Call } from "../../../../src/models/Call";
-import { PosthogAnalytics } from "../../../../src/PosthogAnalytics";
-import PlatformPeg from "../../../../src/PlatformPeg";
-import EventIndexPeg from "../../../../src/indexing/EventIndexPeg";
-import * as Lifecycle from "../../../../src/Lifecycle";
-import { SSO_HOMESERVER_URL_KEY, SSO_ID_SERVER_URL_KEY } from "../../../../src/BasePlatform";
-import SettingsStore from "../../../../src/settings/SettingsStore";
-import { SettingLevel } from "../../../../src/settings/SettingLevel";
-import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
-import DMRoomMap from "../../../../src/utils/DMRoomMap";
-import { ReleaseAnnouncementStore } from "../../../../src/stores/ReleaseAnnouncementStore";
-import { DRAFT_LAST_CLEANUP_KEY } from "../../../../src/DraftCleaner";
-import { UIFeature } from "../../../../src/settings/UIFeature";
-import AutoDiscoveryUtils from "../../../../src/utils/AutoDiscoveryUtils";
-import { type ValidatedServerConfig } from "../../../../src/utils/ValidatedServerConfig";
-import Modal from "../../../../src/Modal.tsx";
-import { SetupEncryptionStore } from "../../../../src/stores/SetupEncryptionStore.ts";
-import { ShareFormat } from "../../../../src/dispatcher/payloads/SharePayload.ts";
-import { clearStorage } from "../../../../src/Lifecycle";
-import RoomListStore from "../../../../src/stores/room-list/RoomListStore.ts";
-import UserSettingsDialog from "../../../../src/components/views/dialogs/UserSettingsDialog.tsx";
-import { SdkContextClass } from "../../../../src/contexts/SDKContext.ts";
+} from "test-utils";
+import { makeDelegatedAuthMetadata } from "test-utils/auth.ts";
 
-jest.mock("matrix-js-sdk/src/oidc/authorize", () => ({
-    completeAuthorizationCodeGrant: jest.fn(),
-}));
+import MatrixChat from "../../components/structures/MatrixChat";
+import * as StorageAccess from "../../utils/StorageAccess";
+import defaultDispatcher from "../../dispatcher/dispatcher";
+import { Action } from "../../dispatcher/actions";
+import { UserTab } from "../../components/views/dialogs/UserTab";
+import * as leaveRoomUtils from "../../utils/leave-behaviour";
+import { OAuthClientError } from "../../utils/oauth/error";
+import { CallStore } from "../../stores/CallStore";
+import { type Call } from "../../models/Call";
+import { PosthogAnalytics } from "../../PosthogAnalytics";
+import PlatformPeg from "../../PlatformPeg";
+import EventIndexPeg from "../../indexing/EventIndexPeg";
+import MediaDeviceHandler from "../../MediaDeviceHandler";
+import * as Lifecycle from "../../Lifecycle";
+import { SSO_HOMESERVER_URL_KEY, SSO_ID_SERVER_URL_KEY } from "../../BasePlatform";
+import SettingsStore from "../../settings/SettingsStore";
+import { SettingLevel } from "../../settings/SettingLevel";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import DMRoomMap from "../../utils/DMRoomMap";
+import { ReleaseAnnouncementStore } from "../../stores/ReleaseAnnouncementStore";
+import { DRAFT_LAST_CLEANUP_KEY } from "../../DraftCleaner";
+import { UIFeature } from "../../settings/UIFeature";
+import AutoDiscoveryUtils from "../../utils/AutoDiscoveryUtils";
+import { type ValidatedServerConfig } from "../../utils/ValidatedServerConfig";
+import Modal from "../../Modal.tsx";
+import { SetupEncryptionStore } from "../../stores/SetupEncryptionStore.ts";
+import { ShareFormat } from "../../dispatcher/payloads/SharePayload.ts";
+import { clearStorage } from "../../Lifecycle";
+import UserSettingsDialog from "../../components/views/dialogs/UserSettingsDialog.tsx";
+import { SDKContextClass } from "../../contexts/SDKContextClass";
+import { type QrLoginCredentials } from "../../components/views/auth/LoginWithQR.tsx";
+import { storeAuthContext } from "../../utils/oauth/persistOAuthSettings.ts";
 
 // Stub out ThemeWatcher as the necessary bits for themes are done in element-web's index.html and thus are lacking here,
 // plus JSDOM's implementation of CSSStyleDeclaration has a bunch of differences to real browsers which cause issues.
-jest.mock("../../../../src/settings/watchers/ThemeWatcher");
-jest.mock("../../../../src/theme");
+vi.mock("../../settings/watchers/ThemeWatcher");
+vi.mock("../../theme");
+
+vi.mock("../../async-components/views/dialogs/security/NewRecoveryMethodDialog", () => ({
+    __test: true,
+    __esModule: true,
+    default: () => <span>mocked dialog</span>,
+}));
+vi.mock("../../async-components/views/dialogs/security/RecoveryMethodRemovedDialog", () => ({
+    __test: true,
+    __esModule: true,
+    default: () => <span>mocked dialog</span>,
+}));
 
 /** The matrix versions our mock server claims to support */
 const SERVER_SUPPORTED_MATRIX_VERSIONS = ["v1.1", "v1.5", "v1.6", "v1.8", "v1.9"];
 
+function createMockCrypto(): CryptoApi {
+    return {
+        getVersion: vi.fn().mockReturnValue("Version 0"),
+        getVerificationRequestsToDeviceInProgress: vi.fn().mockReturnValue([]),
+        getUserDeviceInfo: vi.fn().mockReturnValue({
+            get: vi
+                .fn()
+                .mockReturnValue(
+                    new Map([
+                        [
+                            "devid",
+                            { deviceId: "devid", dehydrated: false, getIdentityKey: vi.fn().mockReturnValue("k") },
+                        ],
+                    ]),
+                ),
+        }),
+        getUserVerificationStatus: vi.fn().mockResolvedValue(new UserVerificationStatus(true, true, false)),
+        setDeviceIsolationMode: vi.fn(),
+        isDehydrationSupported: vi.fn().mockReturnValue(false),
+        getDeviceVerificationStatus: vi.fn().mockResolvedValue({ signedByOwner: true } as DeviceVerificationStatus),
+        isCrossSigningReady: vi.fn().mockReturnValue(false),
+        requestOwnUserVerification: vi.fn().mockResolvedValue({ cancel: vi.fn(), on: vi.fn() }),
+    } as any;
+}
+
 describe("<MatrixChat />", () => {
     const userId = "@alice:server.org";
     const deviceId = "qwertyui";
     const accessToken = "abc123";
     const refreshToken = "def456";
     let bootstrapDeferred: PromiseWithResolvers<void>;
+    let oauthLoginDeferred: PromiseWithResolvers<BearerTokenResponse>;
+    let qrSignInDeferred: PromiseWithResolvers<Awaited<ReturnType<typeof qrLogin.signInByGeneratingQR>>> | undefined;
     // reused in createClient mock below
     const getMockClientMethods = () => ({
         ...mockClientMethodsUser(userId),
         ...mockClientMethodsServer(),
-        getVersions: jest.fn().mockResolvedValue({ versions: SERVER_SUPPORTED_MATRIX_VERSIONS }),
+        getVersions: vi.fn().mockResolvedValue({ versions: SERVER_SUPPORTED_MATRIX_VERSIONS }),
         startClient: async function () {
             // This `sleep` is a horrible hack, for which I am sorry.
             //
@@ -104,69 +149,75 @@ describe("<MatrixChat />", () => {
             // indexedDB, so in some ways this is just a more realistic simulation of the real world 😇
             await sleep(1);
 
+            // @ts-ignore
+            this.getSyncState.mockReturnValue(SyncState.Prepared);
             // @ts-ignore
             this.emit(ClientEvent.Sync, SyncState.Prepared, null);
         },
-        stopClient: jest.fn(),
-        setCanResetTimelineCallback: jest.fn(),
-        isInitialSyncComplete: jest.fn(),
-        getSyncState: jest.fn(),
-        getSsoLoginUrl: jest.fn(),
-        getSyncStateData: jest.fn().mockReturnValue(null),
-        getThirdpartyProtocols: jest.fn().mockResolvedValue({}),
-        getClientWellKnown: jest.fn().mockReturnValue({}),
-        isVersionSupported: jest.fn().mockResolvedValue(false),
-        initRustCrypto: jest.fn(),
-        getRoom: jest.fn(),
-        getMediaHandler: jest.fn().mockReturnValue({
-            setVideoInput: jest.fn(),
-            setAudioInput: jest.fn(),
-            setAudioSettings: jest.fn(),
-            stopAllStreams: jest.fn(),
+        stopClient: vi.fn(),
+        setCanResetTimelineCallback: vi.fn(),
+        isInitialSyncComplete: vi.fn(),
+        getSyncState: vi.fn(),
+        getSsoLoginUrl: vi.fn(),
+        getSyncStateData: vi.fn().mockReturnValue(null),
+        getThirdpartyProtocols: vi.fn().mockResolvedValue({}),
+        getClientWellKnown: vi.fn().mockReturnValue({}),
+        _unstable_getRTCTransports: vi.fn().mockResolvedValue([]),
+        waitForClientWellKnown: vi.fn().mockResolvedValue({}),
+        isVersionSupported: vi.fn().mockResolvedValue(false),
+        initRustCrypto: vi.fn(),
+        getRoom: vi.fn(),
+        getMediaHandler: vi.fn().mockReturnValue({
+            setVideoInput: vi.fn(),
+            setAudioInput: vi.fn(),
+            setAudioSettings: vi.fn(),
+            stopAllStreams: vi.fn(),
         } as unknown as MediaHandler),
-        setAccountData: jest.fn(),
+        setAccountData: vi.fn(),
         store: {
-            destroy: jest.fn(),
-            startup: jest.fn(),
+            destroy: vi.fn(),
+            startup: vi.fn(),
         },
-        login: jest.fn(),
-        loginFlows: jest.fn().mockResolvedValue({ flows: [] }),
-        isGuest: jest.fn().mockReturnValue(false),
-        clearStores: jest.fn(),
-        setGuest: jest.fn(),
-        setNotifTimelineSet: jest.fn(),
-        getAccountData: jest.fn(),
-        doesServerSupportUnstableFeature: jest.fn().mockResolvedValue(false),
-        getDevices: jest.fn().mockResolvedValue({ devices: [] }),
-        getProfileInfo: jest.fn().mockResolvedValue({
+        login: vi.fn(),
+        loginFlows: vi.fn().mockResolvedValue({ flows: [] }),
+        isGuest: vi.fn().mockReturnValue(false),
+        clearStores: vi.fn(),
+        setGuest: vi.fn(),
+        setNotifTimelineSet: vi.fn(),
+        getAccountData: vi.fn(),
+        doesServerSupportUnstableFeature: vi.fn().mockResolvedValue(false),
+        getDevices: vi.fn().mockResolvedValue({ devices: [] }),
+        getProfileInfo: vi.fn().mockResolvedValue({
             displayname: "Ernie",
         }),
-        getVisibleRooms: jest.fn().mockReturnValue([]),
-        getRooms: jest.fn().mockReturnValue([]),
-        getCrypto: jest.fn().mockReturnValue({
-            getVerificationRequestsToDeviceInProgress: jest.fn().mockReturnValue([]),
-            isCrossSigningReady: jest.fn().mockReturnValue(false),
-            isDehydrationSupported: jest.fn().mockReturnValue(false),
-            getUserDeviceInfo: jest.fn().mockReturnValue(new Map()),
-            getUserVerificationStatus: jest.fn().mockResolvedValue(new UserVerificationStatus(false, false, false)),
-            getVersion: jest.fn().mockReturnValue("1"),
-            setDeviceIsolationMode: jest.fn(),
-            userHasCrossSigningKeys: jest.fn(),
-            getActiveSessionBackupVersion: jest.fn().mockResolvedValue(null),
+        getVisibleRooms: vi.fn().mockReturnValue([]),
+        getRooms: vi.fn().mockReturnValue([]),
+        getCrypto: vi.fn().mockReturnValue({
+            getVerificationRequestsToDeviceInProgress: vi.fn().mockReturnValue([]),
+            isCrossSigningReady: vi.fn().mockReturnValue(false),
+            isDehydrationSupported: vi.fn().mockReturnValue(false),
+            getUserDeviceInfo: vi.fn().mockReturnValue(new Map()),
+            getUserVerificationStatus: vi.fn().mockResolvedValue(new UserVerificationStatus(false, false, false)),
+            getVersion: vi.fn().mockReturnValue("1"),
+            setDeviceIsolationMode: vi.fn(),
+            userHasCrossSigningKeys: vi.fn(),
+            getActiveSessionBackupVersion: vi.fn().mockResolvedValue(null),
             globalBlacklistUnverifiedDevices: false,
             // This needs to not finish immediately because we need to test the screen appears
-            bootstrapCrossSigning: jest.fn().mockImplementation(() => bootstrapDeferred.promise),
-            getKeyBackupInfo: jest.fn().mockResolvedValue(null),
+            bootstrapCrossSigning: vi.fn().mockImplementation(() => bootstrapDeferred.promise),
+            getKeyBackupInfo: vi.fn().mockResolvedValue(null),
         }),
         secretStorage: {
-            isStored: jest.fn().mockReturnValue(null),
+            isStored: vi.fn().mockReturnValue(null),
         },
         matrixRTC: createStubMatrixRTC(),
-        getDehydratedDevice: jest.fn(),
-        whoami: jest.fn(),
-        logout: jest.fn(),
-        getDeviceId: jest.fn(),
+        getDehydratedDevice: vi.fn(),
+        whoami: vi.fn(),
+        logout: vi.fn(),
+        getDeviceId: vi.fn(),
         forget: () => Promise.resolve(),
+        getAuthMetadata: vi.fn().mockRejectedValue(new Error("Legacy auth")),
+        deleteExtendedProfileProperty: vi.fn(),
     });
     let mockClient: Mocked<MatrixClient>;
     const serverConfig = {
@@ -179,8 +230,11 @@ describe("<MatrixChat />", () => {
         warning: "",
     };
     let defaultProps: ComponentProps<typeof MatrixChat>;
-    const getComponent = (props: Partial<ComponentProps<typeof MatrixChat>> = {}) => {
-        return render(<MatrixChat {...defaultProps} {...props} />);
+    const getComponent = (
+        props: Partial<ComponentProps<typeof MatrixChat>> = {},
+        ref?: RefObject<MatrixChat | null>,
+    ) => {
+        return render(<MatrixChat {...defaultProps} {...props} ref={ref} />);
     };
 
     // make test results readable
@@ -203,46 +257,68 @@ describe("<MatrixChat />", () => {
     }
 
     beforeEach(async () => {
+        vi.restoreAllMocks();
+        vi.spyOn(MediaDeviceHandler, "loadDevices").mockResolvedValue(undefined);
+        vi.doMock("../../utils/SessionLock.ts", () => ({
+            getSessionLock: vi.fn().mockResolvedValue(true),
+            checkSessionLockFree: vi.fn().mockReturnValue(true),
+        }));
+
         await clearStorage();
         Lifecycle.setSessionLockNotStolen();
 
-        localStorage.clear();
-        jest.restoreAllMocks();
         defaultProps = {
             config: {
                 brand: "Test",
                 help_url: "help_url",
                 help_encryption_url: "help_encryption_url",
-                element_call: {},
                 feedback: {
                     existing_issues_url: "https://feedback.org/existing",
                     new_issue_url: "https://feedback.org/new",
                 },
                 validated_server_config: serverConfig,
             },
-            onNewScreen: jest.fn(),
-            onTokenLoginCompleted: jest.fn(),
+            onNewScreen: vi.fn(),
+            onTokenLoginCompleted: vi.fn(),
             urlParams: {},
         };
 
         mockClient = getMockClientWithEventEmitter(getMockClientMethods());
-        jest.spyOn(MatrixJs, "createClient").mockReturnValue(mockClient);
+        vi.spyOn(MatrixJs, "createClient").mockReturnValue(mockClient);
 
-        jest.spyOn(defaultDispatcher, "dispatch").mockClear();
-        jest.spyOn(defaultDispatcher, "fire").mockClear();
+        vi.spyOn(defaultDispatcher, "dispatch").mockClear();
+        vi.spyOn(defaultDispatcher, "fire").mockClear();
 
         DMRoomMap.makeShared(mockClient);
 
-        jest.spyOn(AutoDiscoveryUtils, "validateServerConfigWithStaticUrls").mockResolvedValue(
+        vi.spyOn(AutoDiscoveryUtils, "validateServerConfigWithStaticUrls").mockResolvedValue(
             {} as ValidatedServerConfig,
         );
 
         bootstrapDeferred = Promise.withResolvers();
 
         await clearAllModals();
+
+        oauthLoginDeferred = Promise.withResolvers<BearerTokenResponse>();
+        // Guard against an unhandled rejection if we settle this in `afterEach` without a consumer having awaited it.
+        oauthLoginDeferred.promise.catch(() => {});
+        vi.spyOn(OAuth2.prototype, "completeAuthorizationCodeGrant").mockImplementation(
+            () => oauthLoginDeferred.promise,
+        );
     });
 
     afterEach(async () => {
+        try {
+            cleanup();
+        } catch {
+            // Allow it to fail without throwing this hook
+        }
+
+        bootstrapDeferred.resolve();
+        oauthLoginDeferred.reject(new Error("Test teardown"));
+        qrSignInDeferred?.reject(new Error("Test teardown"));
+        qrSignInDeferred = undefined;
+
         // @ts-ignore
         DMRoomMap.setShared(null);
 
@@ -251,16 +327,19 @@ describe("<MatrixChat />", () => {
         act(() => defaultDispatcher.dispatch({ action: Action.OnLoggedOut }, true));
 
         localStorage.clear();
+        vi.clearAllTimers();
 
-        // This is a massive hack, but ...
-        //
-        // A lot of these tests end up completing while the login flow is still proceeding. So then, we start the next
-        // test while stuff is still ongoing from the previous test, which messes up the current test (by changing
-        // localStorage or opening modals, or whatever).
-        //
-        // There is no obvious event we could wait for which indicates that everything has completed, since each test
-        // does something different. Instead...
+        // RTL cleanup won't touch roots we render ourselves so clean those up manually
+        await clearAllModals();
+
+        // This is a massive hack, but a lot of these tests end up completing while the login flow is still proceeding.
+        // So then, we start the next test while stuff is still ongoing from the previous test, which messes up the current test.
+        // There is no obvious event we could wait for which indicates that everything has completed,
+        // since each test does something different. Instead, we just let real timers and microtasks drain.
         await act(() => sleep(200));
+
+        // Anything the drain kicked off may have opened a dialog again
+        await clearAllModals();
     });
 
     resetJsDomAfterEach();
@@ -290,29 +369,141 @@ describe("<MatrixChat />", () => {
     it("should notify resizenotifier when left panel hidden", async () => {
         getComponent();
 
-        jest.spyOn(SdkContextClass.instance.resizeNotifier, "notifyLeftHandleResized");
+        vi.spyOn(SDKContextClass.instance.resizeNotifier, "notifyLeftHandleResized");
 
         defaultDispatcher.dispatch({ action: "hide_left_panel" });
 
         await waitFor(() =>
-            expect(mocked(SdkContextClass.instance.resizeNotifier.notifyLeftHandleResized)).toHaveBeenCalled(),
+            expect(vi.mocked(SDKContextClass.instance.resizeNotifier.notifyLeftHandleResized)).toHaveBeenCalled(),
         );
     });
 
     it("should notify resizenotifier when left panel shown", async () => {
         getComponent();
 
-        jest.spyOn(SdkContextClass.instance.resizeNotifier, "notifyLeftHandleResized");
+        vi.spyOn(SDKContextClass.instance.resizeNotifier, "notifyLeftHandleResized");
 
         defaultDispatcher.dispatch({ action: "show_left_panel" });
 
         await waitFor(() =>
-            expect(mocked(SdkContextClass.instance.resizeNotifier.notifyLeftHandleResized)).toHaveBeenCalled(),
+            expect(vi.mocked(SDKContextClass.instance.resizeNotifier.notifyLeftHandleResized)).toHaveBeenCalled(),
         );
     });
 
+    describe("qr login", () => {
+        beforeEach(() => {
+            const authConfig = makeDelegatedAuthMetadata();
+            defaultProps.config.validated_server_config!.delegatedAuthentication = authConfig;
+            fetchMock.post(authConfig.registration_endpoint!, { client_id: "abc123" });
+            mockPlatformPeg({
+                getOAuthClientMetadata: vi.fn().mockReturnValue({
+                    client_name: "App name",
+                    client_uri: "https://company",
+                    redirect_uris: ["https://app"],
+                    logo_uri: "https://company/logo.png",
+                    application_type: "web",
+                }),
+            });
+            qrSignInDeferred = Promise.withResolvers();
+            // Guard against an unhandled rejection if we settle this in `afterEach` without a consumer having awaited it.
+            qrSignInDeferred.promise.catch(() => {});
+            vi.spyOn(qrLogin, "signInByGeneratingQR").mockReturnValue(qrSignInDeferred.promise);
+        });
+
+        it("should open QrLoginDialog on ViewQrLogin action", async () => {
+            getComponent();
+            defaultDispatcher.fire(Action.ViewQrLogin);
+            await expect(screen.findByRole("dialog", { name: "Sign in with QR code" })).resolves.toMatchSnapshot();
+        });
+
+        it("should ignore ViewQrLogin action when logged in", async () => {
+            await populateStorageForSession();
+            getComponent();
+            // wait for logged in view to load
+            await screen.findByLabelText("User menu");
+
+            defaultDispatcher.fire(Action.ViewQrLogin);
+            expect(screen.queryByRole("dialog", { name: "Sign in with QR code" })).not.toBeInTheDocument();
+        });
+
+        it("should fire ViewQrLogin action on 'qr_login' route", async () => {
+            const ref = createRef<MatrixChat>();
+            getComponent({}, ref);
+            ref.current!.showScreen("qr_login");
+            await expect(screen.findByRole("dialog", { name: "Sign in with QR code" })).resolves.toMatchSnapshot();
+        });
+
+        it("should handle qr login completed", async () => {
+            const qrCreds: QrLoginCredentials = {
+                accessToken: "at",
+                homeserverUrl: "https://homeserver",
+                clientId: "ci",
+                deviceId: "di",
+                secrets: {
+                    cross_signing: {
+                        master_key: "mk",
+                        self_signing_key: "ssk",
+                        user_signing_key: "usk",
+                    },
+                },
+            };
+
+            mockClient.whoami.mockResolvedValue({ user_id: "@user:homeserver", device_id: qrCreds.deviceId });
+            mockClient.getCrypto.mockReturnValue({
+                ...createMockCrypto(),
+                crossSignDevice: vi.fn().mockResolvedValue(undefined),
+                importSecretsBundle: vi.fn().mockResolvedValue(undefined),
+            });
+            getComponent();
+
+            const createDialogSpy = vi.spyOn(Modal, "createDialog").mockReturnValue({} as any);
+
+            // Assert welcome screen
+            await screen.findByText("Welcome to Test");
+
+            // Open QR dialog so we can grab the onLoggedIn method
+            defaultDispatcher.fire(Action.ViewQrLogin, true);
+            expect(createDialogSpy).toHaveBeenCalledWith(
+                expect.anything(),
+                {
+                    onLoggedIn: expect.any(Function),
+                    serverConfig: defaultProps.config.validated_server_config,
+                },
+                "mx_LoginWithQR_dialog",
+                false,
+                true,
+            );
+            const { onLoggedIn } = createDialogSpy.mock.calls[0][1] as {
+                onLoggedIn(creds: QrLoginCredentials): Promise<void>;
+            };
+
+            const configureFromCompletedSpy = vi.spyOn(Lifecycle, "configureFromCompletedOAuthLogin");
+            const restoreSessionSpy = vi.spyOn(Lifecycle, "restoreSessionFromStorage");
+            const prom = onLoggedIn(qrCreds);
+
+            await waitFor(() =>
+                expect(configureFromCompletedSpy).toHaveBeenCalledWith(
+                    expect.objectContaining({
+                        accessToken: qrCreds.accessToken,
+                        homeserverUrl: qrCreds.homeserverUrl,
+                    }),
+                ),
+            );
+            await waitFor(() => expect(restoreSessionSpy).toHaveBeenCalled());
+            await waitFor(() =>
+                expect(mockClient.getCrypto()!.importSecretsBundle).toHaveBeenCalledWith(qrCreds.secrets),
+            );
+
+            await prom;
+
+            // initial sync
+            mockClient.emit(ClientEvent.Sync, SyncState.Prepared, null);
+            // wait for logged in view to load
+            await screen.findByLabelText("User menu");
+        });
+    });
+
     describe("when query params have a OIDC params", () => {
-        const issuer = "https://auth.com/";
         const homeserverUrl = "https://matrix.org";
         const identityServerUrl = "https://is.org";
         const clientId = "xyz789";
@@ -320,7 +511,7 @@ describe("<MatrixChat />", () => {
         const code = "test-oidc-auth-code";
         const state = "test-oidc-state";
         const urlParams = {
-            oidc_fragment: {
+            oauth2: {
                 code,
                 state: state,
             },
@@ -331,16 +522,15 @@ describe("<MatrixChat />", () => {
 
         const tokenResponse: BearerTokenResponse = {
             access_token: accessToken,
-            refresh_token: "def456",
-            id_token: "ghi789",
+            refresh_token: undefined,
             scope: "test",
             token_type: "Bearer",
-            expires_at: 12345,
+            expires_in: 12345,
         };
 
         let loginClient!: ReturnType<typeof getMockClientWithEventEmitter>;
 
-        const expectOIDCError = async (
+        const expectOAuthError = async (
             errorMessage = "Something went wrong during authentication. Go to the sign in page and try again.",
         ): Promise<void> => {
             await flushPromises();
@@ -350,42 +540,37 @@ describe("<MatrixChat />", () => {
         };
 
         beforeEach(() => {
-            mocked(completeAuthorizationCodeGrant)
-                .mockClear()
-                .mockResolvedValue({
-                    oidcClientSettings: {
-                        clientId,
-                        issuer,
-                    },
-                    tokenResponse,
-                    homeserverUrl,
-                    identityServerUrl,
-                    idTokenClaims: {
-                        aud: "123",
-                        iss: issuer,
-                        sub: "123",
-                        exp: 123,
-                        iat: 456,
-                    },
-                });
+            vi.mocked(OAuth2.prototype.completeAuthorizationCodeGrant).mockResolvedValue(tokenResponse);
 
             loginClient = getMockClientWithEventEmitter(getMockClientMethods());
             // this is used to create a temporary client during login
-            jest.spyOn(MatrixJs, "createClient").mockReturnValue(loginClient);
+            vi.spyOn(MatrixJs, "createClient").mockReturnValue(loginClient);
 
-            jest.spyOn(logger, "error").mockClear();
-            jest.spyOn(logger, "log").mockClear();
+            vi.spyOn(logger, "error").mockClear();
+            vi.spyOn(logger, "log").mockClear();
 
             loginClient.whoami.mockResolvedValue({
                 user_id: userId,
                 device_id: deviceId,
                 is_guest: false,
             });
+            storeAuthContext({
+                homeserverUrl,
+                identityServerUrl,
+                metadata: makeDelegatedAuthMetadata(),
+                state,
+                authContext: {
+                    clientId,
+                    codeVerifier: "123456",
+                    deviceId,
+                    redirectUri: "https://cb",
+                },
+            });
         });
 
-        it("should fail when query params do not include valid code and state", async () => {
+        it("should fail when fragment params do not include valid code and state", async () => {
             const urlParams = {
-                oidc_query: {
+                oauth2: {
                     code: "",
                     state: "abc",
                 },
@@ -395,11 +580,11 @@ describe("<MatrixChat />", () => {
             await flushPromises();
 
             expect(logger.error).toHaveBeenCalledWith(
-                "Failed to login via OIDC",
-                new Error(OidcClientError.InvalidQueryParameters),
+                "Failed to login via OAuth",
+                new Error(OAuthClientError.InvalidFragmentParameters),
             );
 
-            await expectOIDCError();
+            await expectOAuthError();
         });
 
         it("should make correct request to complete authorization", async () => {
@@ -407,7 +592,7 @@ describe("<MatrixChat />", () => {
 
             await flushPromises();
 
-            expect(completeAuthorizationCodeGrant).toHaveBeenCalledWith(code, state, "fragment");
+            expect(OAuth2.prototype.completeAuthorizationCodeGrant).toHaveBeenCalledWith(code);
         });
 
         it("should look up userId using access token", async () => {
@@ -431,14 +616,14 @@ describe("<MatrixChat />", () => {
             await flushPromises();
 
             expect(logger.error).toHaveBeenCalledWith(
-                "Failed to login via OIDC",
+                "Failed to login via OAuth",
                 new Error("Failed to retrieve userId using accessToken"),
             );
-            await expectOIDCError();
+            await expectOAuthError();
         });
 
         it("should call onTokenLoginCompleted", async () => {
-            const onTokenLoginCompleted = jest.fn();
+            const onTokenLoginCompleted = vi.fn();
             getComponent({ urlParams, onTokenLoginCompleted });
 
             await waitFor(() => expect(onTokenLoginCompleted).toHaveBeenCalled());
@@ -446,23 +631,26 @@ describe("<MatrixChat />", () => {
 
         describe("when login fails", () => {
             beforeEach(() => {
-                mocked(completeAuthorizationCodeGrant).mockRejectedValue(new Error(OidcError.CodeExchangeFailed));
+                vi.mocked(OAuth2.prototype.completeAuthorizationCodeGrant).mockRejectedValue(
+                    new Error(OAuth2Error.CodeExchangeFailed),
+                );
             });
 
             it("should log and return to welcome page with correct error when login state is not found", async () => {
-                mocked(completeAuthorizationCodeGrant).mockRejectedValue(
-                    new Error(OidcError.MissingOrInvalidStoredState),
+                sessionStorage.clear();
+                vi.mocked(OAuth2.prototype.completeAuthorizationCodeGrant).mockRejectedValue(
+                    new Error(OAuth2Error.MissingOrInvalidStoredState),
                 );
                 getComponent({ urlParams });
 
                 await flushPromises();
 
                 expect(logger.error).toHaveBeenCalledWith(
-                    "Failed to login via OIDC",
-                    new Error(OidcError.MissingOrInvalidStoredState),
+                    "Failed to login via OAuth",
+                    new Error(OAuth2Error.MissingOrInvalidStoredState),
                 );
 
-                await expectOIDCError(
+                await expectOAuthError(
                     "We asked the browser to remember which homeserver you use to let you sign in, but unfortunately your browser has forgotten it. Go to the sign in page and try again.",
                 );
             });
@@ -473,12 +661,12 @@ describe("<MatrixChat />", () => {
                 await flushPromises();
 
                 expect(logger.error).toHaveBeenCalledWith(
-                    "Failed to login via OIDC",
-                    new Error(OidcError.CodeExchangeFailed),
+                    "Failed to login via OAuth",
+                    new Error(OAuth2Error.CodeExchangeFailed),
                 );
 
                 // warning dialog
-                await expectOIDCError();
+                await expectOAuthError();
             });
 
             it("should not clear storage", async () => {
@@ -490,23 +678,16 @@ describe("<MatrixChat />", () => {
             });
 
             it("should not store clientId or issuer", async () => {
-                const sessionStorageSetSpy = jest.spyOn(sessionStorage.__proto__, "setItem");
+                const sessionStorageSetSpy = vi.spyOn(sessionStorage, "setItem");
                 getComponent({ urlParams });
 
                 await flushPromises();
 
                 expect(sessionStorageSetSpy).not.toHaveBeenCalledWith("mx_oidc_client_id", clientId);
-                expect(sessionStorageSetSpy).not.toHaveBeenCalledWith("mx_oidc_token_issuer", issuer);
             });
         });
 
         describe("when login succeeds", () => {
-            beforeEach(() => {
-                jest.spyOn(StorageAccess, "idbLoad").mockImplementation(
-                    async (_table: string, key: string | string[]) => (key === "mx_access_token" ? accessToken : null),
-                );
-            });
-
             afterEach(() => {
                 SettingsStore.reset();
             });
@@ -524,7 +705,6 @@ describe("<MatrixChat />", () => {
                 getComponent({ urlParams });
 
                 await waitFor(() => expect(localStorage.getItem("mx_oidc_client_id")).toEqual(clientId));
-                await waitFor(() => expect(localStorage.getItem("mx_oidc_token_issuer")).toEqual(issuer));
             });
 
             it("should set logged in and start MatrixClient", async () => {
@@ -534,19 +714,22 @@ describe("<MatrixChat />", () => {
                     action: Action.WillStartClient,
                 });
                 // client successfully started
-                await waitFor(() =>
-                    expect(defaultDispatcher.dispatch).toHaveBeenCalledWith({ action: Action.ClientStarted }),
+                // Waiting for login -> startMatrixClient, which can be slow.
+                // Allow more time than the 1s default.
+                await waitFor(
+                    () => expect(defaultDispatcher.dispatch).toHaveBeenCalledWith({ action: Action.ClientStarted }),
+                    { timeout: 5000 },
                 );
 
                 // set up keys screen is rendered
-                expect(screen.getByText("Setting up keys")).toBeInTheDocument();
-            });
+                await expect(screen.findByText("Setting up keys")).resolves.toBeInTheDocument();
+            }, 15000);
 
             it("should persist device language when available", async () => {
                 await SettingsStore.setValue("language", null, SettingLevel.DEVICE, "en");
                 const languageBefore = SettingsStore.getValueAt(SettingLevel.DEVICE, "language", null, true, true);
 
-                jest.spyOn(Lifecycle, "attemptDelegatedAuthLogin");
+                vi.spyOn(Lifecycle, "attemptDelegatedAuthLogin");
 
                 getComponent({ urlParams });
                 await flushPromises();
@@ -560,7 +743,7 @@ describe("<MatrixChat />", () => {
                 await SettingsStore.setValue("language", null, SettingLevel.DEVICE, null);
                 const languageBefore = SettingsStore.getValueAt(SettingLevel.DEVICE, "language", null, true, true);
 
-                jest.spyOn(Lifecycle, "attemptDelegatedAuthLogin");
+                vi.spyOn(Lifecycle, "attemptDelegatedAuthLogin");
 
                 getComponent({ urlParams });
                 await flushPromises();
@@ -582,7 +765,7 @@ describe("<MatrixChat />", () => {
 
         beforeEach(async () => {
             await populateStorageForSession();
-            jest.spyOn(StorageAccess, "idbLoad").mockImplementation(async (table, key) => {
+            vi.spyOn(StorageAccess, "idbLoad").mockImplementation(async (table, key) => {
                 const safeKey = Array.isArray(key) ? key[0] : key;
                 return mockidb[table]?.[safeKey];
             });
@@ -612,9 +795,9 @@ describe("<MatrixChat />", () => {
             getComponent();
 
             // wait for logged in view to load
-            await screen.findByLabelText("User menu");
+            await expect(screen.findByLabelText("User menu")).resolves.toBeVisible();
 
-            await screen.findByRole("heading", { level: 1, name: "Welcome Ernie" });
+            await expect(screen.findByRole("heading", { level: 1, name: "Welcome Ernie" })).resolves.toBeVisible();
         });
 
         describe("clean up drafts", () => {
@@ -628,7 +811,7 @@ describe("<MatrixChat />", () => {
                 mockClient.getRoom.mockImplementation((id) => [room].find((room) => room.roomId === id) || null);
             });
             it("should clean up drafts", async () => {
-                Date.now = jest.fn(() => timestamp);
+                Date.now = vi.fn(() => timestamp);
                 localStorage.setItem(`mx_cider_state_${roomId}`, "fake_content");
                 localStorage.setItem(`mx_cider_state_${unknownRoomId}`, "fake_content");
                 await getComponentAndWaitForReady();
@@ -640,7 +823,7 @@ describe("<MatrixChat />", () => {
             });
 
             it("should clean up wysiwyg drafts", async () => {
-                Date.now = jest.fn(() => timestamp);
+                Date.now = vi.fn(() => timestamp);
                 localStorage.setItem(`mx_wysiwyg_state_${roomId}`, "fake_content");
                 localStorage.setItem(`mx_wysiwyg_state_${unknownRoomId}`, "fake_content");
                 await getComponentAndWaitForReady();
@@ -663,13 +846,13 @@ describe("<MatrixChat />", () => {
 
         describe("onAction()", () => {
             afterEach(() => {
-                jest.restoreAllMocks();
+                vi.restoreAllMocks();
             });
 
             it("ViewUserDeviceSettings should open user device settings", async () => {
                 await getComponentAndWaitForReady();
 
-                const createDialog = jest.spyOn(Modal, "createDialog").mockReturnValue({} as any);
+                const createDialog = vi.spyOn(Modal, "createDialog").mockReturnValue({} as any);
 
                 await act(async () => {
                     defaultDispatcher.dispatch({
@@ -679,7 +862,7 @@ describe("<MatrixChat />", () => {
                     await waitFor(() =>
                         expect(createDialog).toHaveBeenCalledWith(
                             UserSettingsDialog,
-                            { initialTabId: UserTab.SessionManager, sdkContext: expect.any(SdkContextClass) },
+                            { initialTabId: UserTab.SessionManager, sdkContext: expect.any(SDKContextClass) },
                             /*className=*/ undefined,
                             /*isPriority=*/ false,
                             /*isStatic=*/ true,
@@ -698,9 +881,9 @@ describe("<MatrixChat />", () => {
                     mockClient.getRoom.mockImplementation(
                         (id) => [room, spaceRoom].find((room) => room.roomId === id) || null,
                     );
-                    jest.spyOn(spaceRoom, "isSpaceRoom").mockReturnValue(true);
+                    vi.spyOn(spaceRoom, "isSpaceRoom").mockReturnValue(true);
 
-                    jest.spyOn(ReleaseAnnouncementStore.instance, "getReleaseAnnouncement").mockReturnValue(null);
+                    vi.spyOn(ReleaseAnnouncementStore.instance, "getReleaseAnnouncement").mockReturnValue(null);
                     (room as any).client = mockClient;
                     (spaceRoom as any).client = mockClient;
                 });
@@ -710,11 +893,8 @@ describe("<MatrixChat />", () => {
                         await clearAllModals();
                         await getComponentAndWaitForReady();
 
-                        // Mock out the old room list store
-                        jest.spyOn(RoomListStore.instance, "manualRoomUpdate").mockImplementation(async () => {});
-
                         // Register a mock function to the dispatcher
-                        const fn = jest.fn();
+                        const fn = vi.fn();
                         defaultDispatcher.register(fn);
 
                         // Forge the room
@@ -738,7 +918,7 @@ describe("<MatrixChat />", () => {
                         await clearAllModals();
                         await getComponentAndWaitForReady();
                         // this is thoroughly unit tested elsewhere
-                        jest.spyOn(leaveRoomUtils, "leaveRoomBehaviour").mockClear().mockResolvedValue(undefined);
+                        vi.spyOn(leaveRoomUtils, "leaveRoomBehaviour").mockClear().mockResolvedValue(undefined);
                     });
                     const dispatchAction = () =>
                         defaultDispatcher.dispatch({
@@ -759,8 +939,8 @@ describe("<MatrixChat />", () => {
                     });
                     describe("for a room", () => {
                         beforeEach(() => {
-                            jest.spyOn(room.currentState, "getJoinedMemberCount").mockReturnValue(2);
-                            jest.spyOn(room.currentState, "getStateEvents").mockReturnValue(publicJoinRule);
+                            vi.spyOn(room.currentState, "getJoinedMemberCount").mockReturnValue(2);
+                            vi.spyOn(room.currentState, "getStateEvents").mockReturnValue(publicJoinRule);
                         });
                         it("should launch a confirmation modal", async () => {
                             dispatchAction();
@@ -768,7 +948,7 @@ describe("<MatrixChat />", () => {
                             expect(dialog).toMatchSnapshot();
                         });
                         it("should warn when room has only one joined member", async () => {
-                            jest.spyOn(room.currentState, "getJoinedMemberCount").mockReturnValue(1);
+                            vi.spyOn(room.currentState, "getJoinedMemberCount").mockReturnValue(1);
                             dispatchAction();
                             await screen.findByRole("dialog");
                             expect(
@@ -778,7 +958,7 @@ describe("<MatrixChat />", () => {
                             ).toBeInTheDocument();
                         });
                         it("should warn when room is not public", async () => {
-                            jest.spyOn(room.currentState, "getStateEvents").mockReturnValue(inviteJoinRule);
+                            vi.spyOn(room.currentState, "getStateEvents").mockReturnValue(inviteJoinRule);
                             dispatchAction();
                             await screen.findByRole("dialog");
                             expect(
@@ -788,11 +968,11 @@ describe("<MatrixChat />", () => {
                             ).toBeInTheDocument();
                         });
                         it("should warn when user is the last admin", async () => {
-                            jest.spyOn(room, "getJoinedMembers").mockReturnValue([
+                            vi.spyOn(room, "getJoinedMembers").mockReturnValue([
                                 { powerLevel: 100 } as unknown as MatrixJs.RoomMember,
                                 { powerLevel: 0 } as unknown as MatrixJs.RoomMember,
                             ]);
-                            jest.spyOn(room, "getMember").mockReturnValue({
+                            vi.spyOn(room, "getMember").mockReturnValue({
                                 powerLevel: 100,
                             } as unknown as MatrixJs.RoomMember);
                             dispatchAction();
@@ -838,7 +1018,7 @@ describe("<MatrixChat />", () => {
                                 room_id: spaceId,
                             });
                         beforeEach(() => {
-                            jest.spyOn(spaceRoom.currentState, "getStateEvents").mockReturnValue(publicJoinRule);
+                            vi.spyOn(spaceRoom.currentState, "getStateEvents").mockReturnValue(publicJoinRule);
                         });
                         it("should launch a confirmation modal", async () => {
                             dispatchAction();
@@ -846,7 +1026,7 @@ describe("<MatrixChat />", () => {
                             expect(dialog).toMatchSnapshot();
                         });
                         it("should warn when space is not public", async () => {
-                            jest.spyOn(spaceRoom.currentState, "getStateEvents").mockReturnValue(inviteJoinRule);
+                            vi.spyOn(spaceRoom.currentState, "getStateEvents").mockReturnValue(inviteJoinRule);
                             dispatchAction();
                             await screen.findByRole("dialog");
                             expect(
@@ -868,9 +1048,9 @@ describe("<MatrixChat />", () => {
                             permalinkCreator: null,
                         });
                     });
-                    const forwardCall = mocked(defaultDispatcher.dispatch).mock.calls.find(
-                        ([call]) => call.action === Action.OpenForwardDialog,
-                    );
+                    const forwardCall = vi
+                        .mocked(defaultDispatcher.dispatch)
+                        .mock.calls.find(([call]) => call.action === Action.OpenForwardDialog);
 
                     const payload = forwardCall?.[0];
 
@@ -890,9 +1070,9 @@ describe("<MatrixChat />", () => {
                             permalinkCreator: null,
                         });
                     });
-                    const forwardCall = mocked(defaultDispatcher.dispatch).mock.calls.find(
-                        ([call]) => call.action === Action.OpenForwardDialog,
-                    );
+                    const forwardCall = vi
+                        .mocked(defaultDispatcher.dispatch)
+                        .mock.calls.find(([call]) => call.action === Action.OpenForwardDialog);
 
                     const payload = forwardCall?.[0];
 
@@ -918,9 +1098,9 @@ describe("<MatrixChat />", () => {
                             permalinkCreator: null,
                         });
                     });
-                    const forwardCall = mocked(defaultDispatcher.dispatch).mock.calls.find(
-                        ([call]) => call.action === Action.OpenForwardDialog,
-                    );
+                    const forwardCall = vi
+                        .mocked(defaultDispatcher.dispatch)
+                        .mock.calls.find(([call]) => call.action === Action.OpenForwardDialog);
 
                     const payload = forwardCall?.[0];
 
@@ -946,9 +1126,9 @@ describe("<MatrixChat />", () => {
                             permalinkCreator: null,
                         });
                     });
-                    const forwardCall = mocked(defaultDispatcher.dispatch).mock.calls.find(
-                        ([call]) => call.action === Action.OpenForwardDialog,
-                    );
+                    const forwardCall = vi
+                        .mocked(defaultDispatcher.dispatch)
+                        .mock.calls.find(([call]) => call.action === Action.OpenForwardDialog);
 
                     const payload = forwardCall?.[0];
 
@@ -963,8 +1143,8 @@ describe("<MatrixChat />", () => {
 
             describe("logout", () => {
                 let logoutClient!: ReturnType<typeof getMockClientWithEventEmitter>;
-                const call1 = { disconnect: jest.fn() } as unknown as Call;
-                const call2 = { disconnect: jest.fn() } as unknown as Call;
+                const call1 = { disconnect: vi.fn() } as unknown as Call;
+                const call2 = { disconnect: vi.fn() } as unknown as Call;
 
                 const dispatchLogoutAndWait = async (): Promise<void> => {
                     defaultDispatcher.dispatch({
@@ -976,16 +1156,16 @@ describe("<MatrixChat />", () => {
 
                 beforeEach(() => {
                     // stub out various cleanup functions
-                    jest.spyOn(LegacyCallHandler.instance, "hangupAllCalls")
+                    vi.spyOn(SDKContextClass.instance.legacyCallHandler, "hangupAllCalls")
                         .mockClear()
                         .mockImplementation(() => {});
-                    jest.spyOn(PosthogAnalytics.instance, "logout").mockImplementation(() => {});
-                    jest.spyOn(EventIndexPeg, "deleteEventIndex").mockImplementation(async () => {});
+                    vi.spyOn(PosthogAnalytics.instance, "logout").mockImplementation(() => {});
+                    vi.spyOn(EventIndexPeg, "deleteEventIndex").mockImplementation(async () => {});
 
-                    jest.spyOn(CallStore.instance, "connectedCalls", "get").mockReturnValue(new Set([call1, call2]));
+                    vi.spyOn(CallStore.instance, "connectedCalls", "get").mockReturnValue(new Set([call1, call2]));
 
                     mockPlatformPeg({
-                        destroyPickleKey: jest.fn(),
+                        destroyPickleKey: vi.fn(),
                     });
 
                     logoutClient = getMockClientWithEventEmitter(getMockClientMethods());
@@ -993,15 +1173,15 @@ describe("<MatrixChat />", () => {
                     mockClient.logout.mockResolvedValue({});
                     mockClient.getDeviceId.mockReturnValue(deviceId);
                     // this is used to create a temporary client to cleanup after logout
-                    jest.spyOn(MatrixJs, "createClient").mockClear().mockReturnValue(logoutClient);
+                    vi.spyOn(MatrixJs, "createClient").mockClear().mockReturnValue(logoutClient);
 
-                    jest.spyOn(logger, "warn").mockClear();
+                    vi.spyOn(logger, "warn").mockClear();
                 });
 
                 it("should hangup all legacy calls", async () => {
                     await getComponentAndWaitForReady();
                     await dispatchLogoutAndWait();
-                    expect(LegacyCallHandler.instance.hangupAllCalls).toHaveBeenCalled();
+                    expect(SDKContextClass.instance.legacyCallHandler.hangupAllCalls).toHaveBeenCalled();
                 });
 
                 it("should disconnect all calls", async () => {
@@ -1089,11 +1269,11 @@ describe("<MatrixChat />", () => {
 
                 // lostKeys returns false, meaning there are other devices to verify against
                 const realStore = SetupEncryptionStore.sharedInstance();
-                jest.spyOn(realStore, "lostKeys").mockReturnValue(false);
+                vi.spyOn(realStore, "lostKeys").mockReturnValue(false);
             });
 
             afterEach(() => {
-                jest.restoreAllMocks();
+                vi.restoreAllMocks();
                 // Reset things back to how they were before we started
                 defaultProps.config.force_verification = false;
                 localStorage.removeItem("must_verify_device");
@@ -1107,11 +1287,16 @@ describe("<MatrixChat />", () => {
                 getComponent();
 
                 // Then we are asked to verify our device
-                await screen.findByRole("heading", { name: "Confirm your digital identity", level: 2 });
+                await expect(
+                    screen.findByRole("heading", { name: "Confirm your digital identity", level: 2 }),
+                ).resolves.toBeVisible();
 
                 // Sanity: we are not racing with another screen update, so this heading stays visible
-                await screen.findByRole("heading", { name: "Confirm your digital identity", level: 2 });
+                await expect(
+                    screen.findByRole("heading", { name: "Confirm your digital identity", level: 2 }),
+                ).resolves.toBeVisible();
             });
+
             it("should not open app after cancelling device verify if unskippable verification is on", async () => {
                 // See https://github.com/element-hq/element-web/issues/29230
                 // We used to allow bypassing force verification by choosing "Verify with
@@ -1136,7 +1321,9 @@ describe("<MatrixChat />", () => {
                 act(() => closeButton.click());
 
                 // Then we are not allowed in - we are still being asked to verify
-                await screen.findByRole("heading", { name: "Confirm your digital identity", level: 2 });
+                await expect(
+                    screen.findByRole("heading", { name: "Confirm your digital identity", level: 2 }),
+                ).resolves.toBeVisible();
             });
 
             describe("when query params have a loginToken", () => {
@@ -1161,7 +1348,7 @@ describe("<MatrixChat />", () => {
                     localStorage.setItem("mx_sso_is_url", serverConfig.isUrl);
                     loginClient = getMockClientWithEventEmitter(getMockClientMethods());
                     // this is used to create a temporary client during login
-                    jest.spyOn(MatrixJs, "createClient").mockReturnValue(loginClient);
+                    vi.spyOn(MatrixJs, "createClient").mockReturnValue(loginClient);
 
                     loginClient.login.mockClear().mockResolvedValue(clientLoginResponse);
                 });
@@ -1170,7 +1357,7 @@ describe("<MatrixChat />", () => {
                     // Given force_verification is on (outer describe)
                     // And we just logged in via OIDC (inner describe)
 
-                    mocked(loginClient.getCrypto()!.userHasCrossSigningKeys).mockResolvedValue(true);
+                    vi.mocked(loginClient.getCrypto()!.userHasCrossSigningKeys).mockResolvedValue(true);
 
                     // When we load the page
                     getComponent({ urlParams });
@@ -1178,40 +1365,17 @@ describe("<MatrixChat />", () => {
                     defaultDispatcher.dispatch({
                         action: Action.WillStartClient,
                     });
-                    await waitFor(() =>
-                        expect(defaultDispatcher.dispatch).toHaveBeenCalledWith({ action: Action.ClientStarted }),
+                    // Waiting for login -> startMatrixClient, which can be slow.
+                    // Allow more time than the 1s default.
+                    await waitFor(
+                        () => expect(defaultDispatcher.dispatch).toHaveBeenCalledWith({ action: Action.ClientStarted }),
+                        { timeout: 5000 },
                     );
 
                     // Then we are not allowed in - we are being asked to verify
                     await screen.findByRole("heading", { name: "Confirm your digital identity", level: 2 });
-                });
+                }, 15000);
             });
-
-            function createMockCrypto(): CryptoApi {
-                return {
-                    getVersion: jest.fn().mockReturnValue("Version 0"),
-                    getVerificationRequestsToDeviceInProgress: jest.fn().mockReturnValue([]),
-                    getUserDeviceInfo: jest.fn().mockReturnValue({
-                        get: jest
-                            .fn()
-                            .mockReturnValue(
-                                new Map([
-                                    ["devid", { dehydrated: false, getIdentityKey: jest.fn().mockReturnValue("k") }],
-                                ]),
-                            ),
-                    }),
-                    getUserVerificationStatus: jest
-                        .fn()
-                        .mockResolvedValue(new UserVerificationStatus(true, true, false)),
-                    setDeviceIsolationMode: jest.fn(),
-                    isDehydrationSupported: jest.fn().mockReturnValue(false),
-                    getDeviceVerificationStatus: jest
-                        .fn()
-                        .mockResolvedValue({ signedByOwner: true } as DeviceVerificationStatus),
-                    isCrossSigningReady: jest.fn().mockReturnValue(false),
-                    requestOwnUserVerification: jest.fn().mockResolvedValue({ cancel: jest.fn(), on: jest.fn() }),
-                } as any;
-            }
         });
 
         describe("showScreen", () => {
@@ -1240,7 +1404,7 @@ describe("<MatrixChat />", () => {
 
             mockClient.loginFlows.mockResolvedValue({ flows: [{ type: "m.login.password" }] });
 
-            jest.spyOn(StorageAccess, "idbLoad").mockImplementation(async (table, key) => {
+            vi.spyOn(StorageAccess, "idbLoad").mockImplementation(async (table, key) => {
                 const safeKey = Array.isArray(key) ? key[0] : key;
                 return mockidb[table]?.[safeKey];
             });
@@ -1252,12 +1416,13 @@ describe("<MatrixChat />", () => {
             // but as the exception was swallowed, the test was passing (see in `initClientCrypto`).
             // There are several uses of the peg in the app, so during all these tests you might end-up
             // with a real client instead of the mocked one. Not sure how reliable all these tests are.
-            jest.spyOn(MatrixClientPeg, "replaceUsingCreds");
-            jest.spyOn(MatrixClientPeg, "get").mockReturnValue(mockClient);
+            vi.spyOn(MatrixClientPeg, "set");
+            vi.spyOn(MatrixClientPeg, "get").mockReturnValue(mockClient);
 
             const result = getComponent();
 
             await result.findByText("You're signed out");
+            await result.findByLabelText("Language Dropdown");
             expect(result.container).toMatchSnapshot();
         });
     });
@@ -1280,7 +1445,7 @@ describe("<MatrixChat />", () => {
                 }),
             );
 
-            await flushPromises();
+            await screen.findByLabelText("Username");
 
             return renderResult;
         };
@@ -1299,7 +1464,7 @@ describe("<MatrixChat />", () => {
             loginClient = getMockClientWithEventEmitter(getMockClientMethods());
             // this is used to create a temporary client during login
             // FIXME: except it is *also* used as the permanent client for the rest of the test.
-            jest.spyOn(MatrixJs, "createClient").mockClear().mockReturnValue(loginClient);
+            vi.spyOn(MatrixJs, "createClient").mockClear().mockReturnValue(loginClient);
 
             loginClient.login.mockClear().mockResolvedValue({
                 access_token: "TOKEN",
@@ -1318,20 +1483,20 @@ describe("<MatrixChat />", () => {
         describe("post login setup", () => {
             beforeEach(() => {
                 const mockCrypto = {
-                    getVersion: jest.fn().mockReturnValue("Version 0"),
-                    getVerificationRequestsToDeviceInProgress: jest.fn().mockReturnValue([]),
-                    getUserDeviceInfo: jest.fn().mockResolvedValue(new Map()),
-                    getUserVerificationStatus: jest
+                    getVersion: vi.fn().mockReturnValue("Version 0"),
+                    getVerificationRequestsToDeviceInProgress: vi.fn().mockReturnValue([]),
+                    getUserDeviceInfo: vi.fn().mockResolvedValue(new Map()),
+                    getUserVerificationStatus: vi
                         .fn()
                         .mockResolvedValue(new UserVerificationStatus(false, false, false)),
-                    setDeviceIsolationMode: jest.fn(),
-                    userHasCrossSigningKeys: jest.fn().mockResolvedValue(false),
+                    setDeviceIsolationMode: vi.fn(),
+                    userHasCrossSigningKeys: vi.fn().mockResolvedValue(false),
                     // This needs to not finish immediately because we need to test the screen appears
-                    bootstrapCrossSigning: jest.fn().mockImplementation(() => bootstrapDeferred.promise),
-                    resetKeyBackup: jest.fn(),
-                    isEncryptionEnabledInRoom: jest.fn().mockResolvedValue(false),
-                    checkKeyBackupAndEnable: jest.fn().mockResolvedValue(null),
-                    isDehydrationSupported: jest.fn().mockReturnValue(false),
+                    bootstrapCrossSigning: vi.fn().mockImplementation(() => bootstrapDeferred.promise),
+                    resetKeyBackup: vi.fn(),
+                    isEncryptionEnabledInRoom: vi.fn().mockResolvedValue(false),
+                    checkKeyBackupAndEnable: vi.fn().mockResolvedValue(null),
+                    isDehydrationSupported: vi.fn().mockReturnValue(false),
                 };
                 loginClient.getCrypto.mockReturnValue(mockCrypto as any);
             });
@@ -1349,7 +1514,7 @@ describe("<MatrixChat />", () => {
 
             describe("when user does not have cross signing set up", () => {
                 beforeEach(() => {
-                    jest.spyOn(loginClient.getCrypto()!, "userHasCrossSigningKeys").mockResolvedValue(false);
+                    vi.spyOn(loginClient.getCrypto()!, "userHasCrossSigningKeys").mockResolvedValue(false);
                 });
 
                 describe("when encryption is force disabled", () => {
@@ -1366,8 +1531,8 @@ describe("<MatrixChat />", () => {
                             },
                         });
 
-                        jest.spyOn(loginClient.getCrypto()!, "isEncryptionEnabledInRoom").mockImplementation(
-                            async (roomId) => {
+                        vi.spyOn(loginClient.getCrypto()!, "isEncryptionEnabledInRoom").mockImplementation(
+                            async (roomId: string) => {
                                 return roomId === encryptedRoom.roomId;
                             },
                         );
@@ -1378,14 +1543,14 @@ describe("<MatrixChat />", () => {
                         await getComponentAndLogin();
 
                         // logged in, did not set up keys
-                        await screen.findByLabelText("User menu");
+                        await expect(screen.findByLabelText("User menu")).resolves.toBeVisible();
                     });
 
                     it("should go to set up e2e screen when user is in encrypted rooms", async () => {
                         loginClient.getRooms.mockReturnValue([unencryptedRoom, encryptedRoom]);
                         await getComponentAndLogin();
                         // set up keys screen is rendered
-                        await screen.findByText("Setting up keys");
+                        await expect(screen.findByText("Setting up keys")).resolves.toBeVisible();
                     });
                 });
 
@@ -1400,7 +1565,7 @@ describe("<MatrixChat />", () => {
             });
 
             it("should show complete security screen when user has cross signing set up", async () => {
-                jest.spyOn(loginClient.getCrypto()!, "userHasCrossSigningKeys").mockResolvedValue(true);
+                vi.spyOn(loginClient.getCrypto()!, "userHasCrossSigningKeys").mockResolvedValue(true);
 
                 await getComponentAndLogin();
 
@@ -1443,14 +1608,14 @@ describe("<MatrixChat />", () => {
             localStorage.setItem("mx_sso_is_url", serverConfig.isUrl);
             loginClient = getMockClientWithEventEmitter(getMockClientMethods());
             // this is used to create a temporary client during login
-            jest.spyOn(MatrixJs, "createClient").mockReturnValue(loginClient);
+            vi.spyOn(MatrixJs, "createClient").mockReturnValue(loginClient);
 
             loginClient.login.mockClear().mockResolvedValue(clientLoginResponse);
         });
 
         it("should show an error dialog when no homeserver is found in local storage", async () => {
             localStorage.removeItem("mx_sso_hs_url");
-            const localStorageGetSpy = jest.spyOn(localStorage.__proto__, "getItem");
+            const localStorageGetSpy = vi.spyOn(localStorage, "getItem");
             getComponent({ urlParams });
             await flushPromises();
 
@@ -1479,7 +1644,7 @@ describe("<MatrixChat />", () => {
         });
 
         it("should call onTokenLoginCompleted", async () => {
-            const onTokenLoginCompleted = jest.fn();
+            const onTokenLoginCompleted = vi.fn();
             getComponent({ urlParams, onTokenLoginCompleted });
 
             await waitFor(() => expect(onTokenLoginCompleted).toHaveBeenCalled());
@@ -1515,7 +1680,7 @@ describe("<MatrixChat />", () => {
 
         describe("when login succeeds", () => {
             beforeEach(() => {
-                jest.spyOn(StorageAccess, "idbLoad").mockImplementation(
+                vi.spyOn(StorageAccess, "idbLoad").mockImplementation(
                     async (_table: string, key: string | string[]) => {
                         if (key === "mx_access_token") {
                             return accessToken as any;
@@ -1525,7 +1690,7 @@ describe("<MatrixChat />", () => {
             });
 
             it("should clear storage", async () => {
-                const localStorageClearSpy = jest.spyOn(localStorage.__proto__, "clear");
+                const localStorageClearSpy = vi.spyOn(localStorage, "clear");
 
                 getComponent({ urlParams });
 
@@ -1545,7 +1710,7 @@ describe("<MatrixChat />", () => {
             });
 
             it("should set fresh login flag in session storage", async () => {
-                const sessionStorageSetSpy = jest.spyOn(sessionStorage.__proto__, "setItem");
+                const sessionStorageSetSpy = vi.spyOn(sessionStorage, "setItem");
                 getComponent({ urlParams });
 
                 await waitFor(() => expect(sessionStorageSetSpy).toHaveBeenCalledWith("mx_fresh_login", "true"));
@@ -1581,21 +1746,21 @@ describe("<MatrixChat />", () => {
 
     describe("automatic SSO selection", () => {
         let ssoClient: ReturnType<typeof getMockClientWithEventEmitter>;
-        let hrefSetter: jest.Mock<void, [string]>;
+        let hrefSetter: Mocked<(href: string) => void>;
         beforeEach(() => {
             ssoClient = getMockClientWithEventEmitter({
                 ...getMockClientMethods(),
-                getHomeserverUrl: jest.fn().mockReturnValue("matrix.example.com"),
-                getIdentityServerUrl: jest.fn().mockReturnValue("ident.example.com"),
-                getSsoLoginUrl: jest.fn().mockReturnValue("http://my-sso-url"),
+                getHomeserverUrl: vi.fn().mockReturnValue("matrix.example.com"),
+                getIdentityServerUrl: vi.fn().mockReturnValue("ident.example.com"),
+                getSsoLoginUrl: vi.fn().mockReturnValue("http://my-sso-url"),
             });
             // this is used to create a temporary client to cleanup after logout
-            jest.spyOn(MatrixJs, "createClient").mockClear().mockReturnValue(ssoClient);
+            vi.spyOn(MatrixJs, "createClient").mockClear().mockReturnValue(ssoClient);
             mockPlatformPeg();
             // Ensure we don't have a client peg as we aren't logged in.
             unmockClientPeg();
 
-            hrefSetter = jest.fn();
+            hrefSetter = vi.fn();
             const originalHref = window.location.href.toString();
             Object.defineProperty(window, "location", {
                 value: {
@@ -1646,6 +1811,7 @@ describe("<MatrixChat />", () => {
     describe("Multi-tab lockout", () => {
         beforeEach(() => {
             mockPlatformPeg();
+            vi.doUnmock("../../utils/SessionLock.ts");
         });
 
         afterEach(() => {
@@ -1654,7 +1820,7 @@ describe("<MatrixChat />", () => {
 
         // Flaky test, see https://github.com/element-hq/element-web/issues/30337
         it("waits for other tab to stop during startup", async () => {
-            jest.spyOn(Lifecycle, "attemptDelegatedAuthLogin");
+            vi.spyOn(Lifecycle, "attemptDelegatedAuthLogin");
 
             // simulate an active window
             localStorage.setItem("react_sdk_session_lock_ping", String(Date.now()));
@@ -1685,6 +1851,7 @@ describe("<MatrixChat />", () => {
 
             // should just show the welcome screen
             await rendered.findByText("Welcome to Test");
+            await rendered.findByLabelText("Language Dropdown");
             expect(rendered.container).toMatchSnapshot();
         });
 
@@ -1707,7 +1874,7 @@ describe("<MatrixChat />", () => {
                 await populateStorageForSession();
 
                 const client = getMockClientWithEventEmitter(getMockClientMethods());
-                jest.spyOn(MatrixJs, "createClient").mockReturnValue(client);
+                vi.spyOn(MatrixJs, "createClient").mockReturnValue(client);
 
                 const rendered = getComponent({});
                 await rendered.findByText("Welcome Ernie");
@@ -1752,7 +1919,7 @@ describe("<MatrixChat />", () => {
                 const client = new MockClientWithEventEmitter({
                     ...getMockClientMethods(),
                 }) as unknown as Mocked<MatrixClient>;
-                jest.spyOn(MatrixJs, "createClient").mockReturnValue(client);
+                vi.spyOn(MatrixJs, "createClient").mockReturnValue(client);
 
                 // intercept initCrypto and have it block until we complete the deferred
                 const initCryptoCompleteDefer = Promise.withResolvers<void>();
@@ -1796,7 +1963,7 @@ describe("<MatrixChat />", () => {
         };
 
         const enabledMobileRegistration = (): void => {
-            jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName): any => {
+            vi.spyOn(SettingsStore, "getValue").mockImplementation((settingName): any => {
                 if (settingName === "Registration.mobileRegistrationHelper") return true;
                 if (settingName === UIFeature.Registration) return true;
             });
@@ -1805,7 +1972,7 @@ describe("<MatrixChat />", () => {
         it("should render welcome screen if mobile registration is not enabled in settings", async () => {
             await getComponentAndWaitForReady();
 
-            await screen.findByText("Powered by Matrix");
+            await expect(screen.findByText("Powered by Matrix")).resolves.toBeVisible();
         });
 
         it("should render mobile registration", async () => {
@@ -1820,13 +1987,8 @@ describe("<MatrixChat />", () => {
 
     describe("when key backup failed", () => {
         it("should show the new recovery method dialog", async () => {
-            const spy = jest.spyOn(Modal, "createDialog");
-            jest.mock("../../../../src/async-components/views/dialogs/security/NewRecoveryMethodDialog", () => ({
-                __test: true,
-                __esModule: true,
-                default: () => <span>mocked dialog</span>,
-            }));
-            jest.spyOn(mockClient.getCrypto()!, "getActiveSessionBackupVersion").mockResolvedValue("version");
+            const spy = vi.spyOn(Modal, "createDialog");
+            vi.spyOn(mockClient.getCrypto()!, "getActiveSessionBackupVersion").mockResolvedValue("version");
 
             getComponent({});
             defaultDispatcher.dispatch({
@@ -1844,13 +2006,7 @@ describe("<MatrixChat />", () => {
         });
 
         it("should show the recovery method removed dialog", async () => {
-            const spy = jest.spyOn(Modal, "createDialog");
-            jest.mock("../../../../src/async-components/views/dialogs/security/RecoveryMethodRemovedDialog", () => ({
-                __test: true,
-                __esModule: true,
-                default: () => <span>mocked dialog</span>,
-            }));
-
+            const spy = vi.spyOn(Modal, "createDialog");
             getComponent({});
             defaultDispatcher.dispatch({
                 action: Action.WillStartClient,
diff --git a/apps/web/src/components/structures/MatrixChat.tsx b/apps/web/src/components/structures/MatrixChat.tsx
index 0dbc2af2e4..1d58cf35cd 100644
--- a/apps/web/src/components/structures/MatrixChat.tsx
+++ b/apps/web/src/components/structures/MatrixChat.tsx
@@ -32,11 +32,11 @@ import { LockSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icon
 
 import PosthogTrackers from "../../PosthogTrackers";
 import { DecryptionFailureTracker } from "../../DecryptionFailureTracker";
-import { type IMatrixClientCreds, MatrixClientPeg } from "../../MatrixClientPeg";
+import { type IMatrixClientCreds } from "../../utils/createMatrixClient";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
 import PlatformPeg from "../../PlatformPeg";
 import SdkConfig, { type ConfigOptions } from "../../SdkConfig";
 import dis from "../../dispatcher/dispatcher";
-import Notifier from "../../Notifier";
 import Modal from "../../Modal";
 import { showRoomInviteDialog, showStartChatInviteDialog } from "../../RoomInvite";
 import * as Rooms from "../../Rooms";
@@ -75,8 +75,6 @@ import { UIFeature } from "../../settings/UIFeature";
 import DialPadModal from "../views/voip/DialPadModal";
 import { showToast as showMobileGuideToast } from "../../toasts/MobileGuideToast";
 import { shouldUseLoginForWelcome } from "../../utils/pages";
-import RoomListStore from "../../stores/room-list/RoomListStore";
-import { RoomUpdateCause } from "../../stores/room-list/models";
 import { ModuleRunner } from "../../modules/ModuleRunner";
 import Spinner from "../views/elements/Spinner";
 import QuestionDialog from "../views/dialogs/QuestionDialog";
@@ -95,9 +93,7 @@ import PerformanceMonitor, { PerformanceEntryNames } from "../../performance";
 import UIStore, { UI_EVENTS } from "../../stores/UIStore";
 import SoftLogout from "./auth/SoftLogout";
 import { copyPlaintext } from "../../utils/strings";
-import { PosthogAnalytics } from "../../PosthogAnalytics";
 import { initSentry } from "../../sentry";
-import LegacyCallHandler from "../../LegacyCallHandler";
 import { showSpaceInvite } from "../../utils/space";
 import { type ButtonEvent } from "../views/elements/AccessibleButton";
 import { type ActionPayload } from "../../dispatcher/payloads";
@@ -118,7 +114,8 @@ import RightPanelStore from "../../stores/right-panel/RightPanelStore";
 import { TimelineRenderingType } from "../../contexts/RoomContext";
 import { type ValidatedServerConfig } from "../../utils/ValidatedServerConfig";
 import { isLocalRoom } from "../../utils/localRoom/isLocalRoom";
-import { SDKContext, SdkContextClass } from "../../contexts/SDKContext";
+import { SDKContext } from "../../contexts/SDKContext";
+import { SDKContextClass } from "../../contexts/SDKContextClass.ts";
 import { viewUserDeviceSettings } from "../../actions/handlers/viewUserDeviceSettings";
 import GenericToast from "../views/toasts/GenericToast";
 import RovingSpotlightDialog from "../views/dialogs/spotlight/SpotlightDialog";
@@ -142,9 +139,8 @@ import { isOnlyAdmin } from "../../utils/membership";
 import { ModuleApi } from "../../modules/Api.ts";
 import { type IScreen } from "../../vector/routing.ts";
 import { type URLParams } from "../../vector/url_utils.ts";
-
-// legacy export
-export { default as Views } from "../../Views";
+import { type QrLoginCredentials } from "../views/auth/LoginWithQR.tsx";
+import { configureFromCompletedOAuthLogin } from "../../Lifecycle";
 
 const AUTH_SCREENS = ["register", "mobile_register", "login", "forgot_password", "start_sso", "start_cas", "welcome"];
 
@@ -183,7 +179,6 @@ interface IState {
     // What the LoggedInView would be showing if visible.
     // A member of the enum for standard pages or a string for those provided by
     // a module.
-    // eslint-disable-next-line camelcase
     page_type?: PageType | string;
     // The ID of the room we're viewing. This is either populated directly
     // in the case where we view a room by ID or by RoomView when it resolves
@@ -191,14 +186,9 @@ interface IState {
     currentRoomId: string | null;
     // If we're trying to just view a user ID (i.e. /user URL), this is it
     currentUserId: string | null;
-    // this is persisted as mx_lhs_size, loaded in LoggedInView
-    collapseLhs: boolean;
     // Parameters used in the registration dance with the IS
-    // eslint-disable-next-line camelcase
     register_client_secret?: string;
-    // eslint-disable-next-line camelcase
     register_session_id?: string;
-    // eslint-disable-next-line camelcase
     register_id_sid?: string;
     isMobileRegistration?: boolean;
     // When showing Modal dialogs we need to set aria-hidden on the root app element
@@ -221,10 +211,6 @@ interface IState {
 export default class MatrixChat extends React.PureComponent<IProps, IState> {
     public static displayName = "MatrixChat";
 
-    public static defaultProps: Partial<IProps> = {
-        config: {},
-    };
-
     private firstSyncComplete = false;
     private firstSyncPromise: PromiseWithResolvers<void>;
 
@@ -245,19 +231,19 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
     private dispatcherRef?: string;
     private themeWatcher?: ThemeWatcher;
     private fontWatcher?: FontWatcher;
-    private readonly stores: SdkContextClass;
+    private readonly stores: SDKContextClass;
     private loadSessionAbortController = new AbortController();
 
     private sessionLoadStarted = false;
 
     public constructor(props: IProps) {
         super(props);
-        this.stores = SdkContextClass.instance;
+        this.stores = SDKContextClass.instance;
         this.stores.constructEagerStores();
+        window.mxSdkContext = this.stores;
 
         this.state = {
             view: Views.LOADING,
-            collapseLhs: false,
             currentRoomId: null,
             currentUserId: null,
 
@@ -350,11 +336,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         );
 
         // remove the loginToken or auth code from the URL regardless
-        if (
-            !!this.props.urlParams.legacy_sso ||
-            !!this.props.urlParams.oidc_fragment ||
-            !!this.props.urlParams.oidc_query
-        ) {
+        if (!!this.props.urlParams.legacy_sso || !!this.props.urlParams.oauth2) {
             this.props.onTokenLoginCompleted(this.props.urlParams, this.getFragmentAfterLogin());
         }
 
@@ -402,7 +384,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
      * Called when:
      *
      *  - We successfully completed an OIDC or token login, via {@link initSession}.
-     *  - The {@link Login} or {@link Register} components notify us that we successfully completed a non-OIDC login or
+     *  - The {@link Login} or {@link Registration} components notify us that we successfully completed a non-OIDC login or
      *    registration.
      *
      * In both cases, {@link Action.OnLoggedIn} will already have been emitted, but the call to {@link onShowPostLoginScreen} will
@@ -542,6 +524,8 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         UIStore.destroy();
         this.stores.resizeNotifier.removeListener("middlePanelResized", this.dispatchTimelineResize);
         window.removeEventListener("resize", this.onWindowResized);
+
+        DecryptionFailureTracker.instance.stop();
     }
 
     private onWindowResized = (): void => {
@@ -657,11 +641,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             return;
         }
 
-        // Exclude some rather spammy actions from being logged.
-        if (payload.action != Action.UserActivity) {
-            logger.debug(`MatrixChat: handling action ${payload.action}`);
-        }
-
         // Start the onboarding process for certain actions
         if (
             MatrixClientPeg.get()?.isGuest() &&
@@ -704,9 +683,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 }
                 break;
             case "logout":
-                LegacyCallHandler.instance.hangupAllCalls();
-                Promise.all([...[...CallStore.instance.connectedCalls].map((call) => call.disconnect())]).finally(() =>
-                    Lifecycle.logout(this.stores.oidcClientStore),
+                this.stores.legacyCallHandler.hangupAllCalls();
+                Promise.all([...CallStore.instance.connectedCalls].map((call) => call.disconnect())).finally(() =>
+                    Lifecycle.logout(),
                 );
                 break;
             case "require_registration":
@@ -737,10 +716,12 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 this.viewLogin();
                 break;
             case "start_password_recovery":
-                this.setStateForNewView({
-                    view: Views.FORGOT_PASSWORD,
-                });
-                this.notifyNewScreen("forgot_password");
+                if (SettingsStore.getValue(UIFeature.PasswordReset)) {
+                    this.setStateForNewView({
+                        view: Views.FORGOT_PASSWORD,
+                    });
+                    this.notifyNewScreen("forgot_password");
+                }
                 break;
             case "start_chat":
                 createRoom(MatrixClientPeg.safeGet(), {
@@ -827,6 +808,26 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 this.viewSomethingBehindModal();
                 break;
             }
+            case Action.ViewQrLogin: {
+                if (this.isLoggedInViewPageDisplayed()) {
+                    logger.warn("Ignoring payload due to unexpected call outside auth flows", payload);
+                } else {
+                    Modal.createDialog(
+                        lazy(() => import("../../async-components/views/dialogs/QrLoginDialog")),
+                        {
+                            serverConfig: this.getServerProperties().serverConfig,
+                            onLoggedIn: this.onUserCompletedQrLoginFlow,
+                        },
+                        "mx_LoginWithQR_dialog",
+                        false,
+                        true,
+                    );
+
+                    // View the welcome or home page if we need something to look at
+                    this.viewSomethingBehindModal();
+                }
+                break;
+            }
             case "view_welcome_page":
                 this.viewWelcome();
                 break;
@@ -855,24 +856,8 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 break;
             }
             case "hide_left_panel":
-                this.setState(
-                    {
-                        collapseLhs: true,
-                    },
-                    () => {
-                        this.stores.resizeNotifier.notifyLeftHandleResized();
-                    },
-                );
-                break;
             case "show_left_panel":
-                this.setState(
-                    {
-                        collapseLhs: false,
-                    },
-                    () => {
-                        this.stores.resizeNotifier.notifyLeftHandleResized();
-                    },
-                );
+                this.stores.resizeNotifier.notifyLeftHandleResized();
                 break;
             case Action.OpenDialPad:
                 Modal.createDialog(DialPadModal, {}, "mx_Dialog_dialPadWrapper");
@@ -1281,7 +1266,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             if (isOnlyAdmin(roomToLeave)) {
                 const userLevelValues = roomToLeave.getJoinedMembers().map((m) => m.powerLevel);
 
-                const maxUserLevel = Math.max(...(userLevelValues as number[]));
+                const maxUserLevel = Math.max(...userLevelValues);
 
                 const warning =
                     maxUserLevel >= 100
@@ -1346,9 +1331,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 }
 
                 if (room) {
-                    // Legacy room list store needs to be told to manually remove this room
-                    RoomListStore.instance.manualRoomUpdate(room, RoomUpdateCause.RoomRemoved);
-                    // New room list store will remove the room on the following dispatch
+                    // The room list store will remove the room on the following dispatch
                     dis.dispatch<AfterForgetRoomPayload>({ action: Action.AfterForgetRoom, room });
                 }
             })
@@ -1525,7 +1508,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
      * Handle an {@link Action.OnLoggedIn} action (i.e, we now have a client with working credentials).
      */
     private onLoggedIn(): void {
-        this.stores.client = MatrixClientPeg.safeGet();
         StorageManager.tryPersistStorage();
 
         // If we're loading the app for the first time, we can now transition to a splash screen while we wait for the
@@ -1558,7 +1540,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
     private onLoggedOut(): void {
         this.viewWelcome({
             ready: false,
-            collapseLhs: false,
             currentRoomId: null,
         });
         this.subTitleStatus = "";
@@ -1574,7 +1555,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         this.setStateForNewView({
             view: Views.SOFT_LOGOUT,
             ready: false,
-            collapseLhs: false,
             currentRoomId: null,
         });
         this.subTitleStatus = "";
@@ -1599,6 +1579,15 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         this.firstSyncComplete = false;
         const cli = MatrixClientPeg.safeGet();
 
+        // If the client has already completed its initial sync — e.g. this is a repeat WillStartClient for a client
+        // that is already running — it won't emit another `Prepared`, so resolve firstSyncPromise straight away
+        // rather than waiting for an event that will never come.
+        // This is mostly an issue under test.
+        if (cli.getSyncState() === SyncState.Prepared) {
+            this.firstSyncComplete = true;
+            this.firstSyncPromise.resolve();
+        }
+
         // Allow the JS SDK to reap timeline events. This reduces the amount of
         // memory consumed as the JS SDK stores multiple distinct copies of room
         // state (each of which can be 10s of MBs) for each DISJOINT timeline. This is
@@ -1645,8 +1634,8 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             this.firstSyncComplete = true;
             this.firstSyncPromise.resolve();
 
-            if (Notifier.shouldShowPrompt() && !MatrixClientPeg.userRegisteredWithinLastHours(24)) {
-                showNotificationsToast(false);
+            if (this.stores.notifier.shouldShowPrompt() && !MatrixClientPeg.userRegisteredWithinLastHours(24)) {
+                showNotificationsToast(this.stores.notifier, false);
             }
 
             dis.fire(Action.FocusSendMessageComposer);
@@ -1805,7 +1794,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
 
         // Cannot be done in OnLoggedIn as at that point the AccountSettingsHandler doesn't yet have a client
         // Will be moved to a pre-login flow as well
-        if (PosthogAnalytics.instance.isEnabled() && SettingsStore.isLevelSupported(SettingLevel.ACCOUNT)) {
+        if (this.stores.posthogAnalytics.isEnabled() && SettingsStore.isLevelSupported(SettingLevel.ACCOUNT)) {
             this.initPosthogAnalyticsToast();
         }
 
@@ -1858,6 +1847,8 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
                 params: params,
             });
             PerformanceMonitor.instance.start(PerformanceEntryNames.LOGIN);
+        } else if (screen === "qr_login") {
+            dis.fire(Action.ViewQrLogin);
         } else if (screen === "forgot_password") {
             dis.dispatch({
                 action: "start_password_recovery",
@@ -2004,6 +1995,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
             });
         } else if (ModuleApi.instance.navigation.locationRenderers.get(screen)) {
             this.setState({ page_type: screen });
+        } else {
+            // Unknown screen requested
+            return this.showScreen(isLoggedOutOrGuest ? "welcome" : "home");
         }
     }
 
@@ -2131,6 +2125,36 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         PerformanceMonitor.instance.stop(PerformanceEntryNames.REGISTER);
     };
 
+    /**
+     * After successful qr login, load & persist the credentials, as well as the secrets bundle.
+     */
+    private onUserCompletedQrLoginFlow = async ({
+        secrets,
+        deviceId,
+        ...tokenResponse
+    }: QrLoginCredentials): Promise<void> => {
+        // Persist credentials + OIDC settings, then hydrate the client from storage.
+        // setLoggedIn would clear storage and drop the OIDC settings; see its docstring.
+        await configureFromCompletedOAuthLogin(tokenResponse);
+        await Lifecycle.restoreSessionFromStorage();
+
+        if (secrets) {
+            const crypto = MatrixClientPeg.safeGet().getCrypto();
+            if (crypto?.importSecretsBundle) {
+                // This imports the secrets and cross-signs the device in one go
+                await crypto.importSecretsBundle(secrets);
+            } else {
+                logger.warn(
+                    "Crypto not initialised or no importSecretsBundle() method, cannot import secrets from QR login",
+                );
+            }
+        } else {
+            logger.warn("No secrets received from QR login");
+        }
+
+        this.onShowPostLoginScreen();
+    };
+
     /** Called when {@link Views.E2E_SETUP} or {@link Views.COMPLETE_SECURITY} have completed. */
     private onCompleteSecurityE2eSetupFinished = async (): Promise<void> => {
         const forceVerify = await this.shouldForceVerification();
@@ -2158,125 +2182,126 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
         return fragmentAfterLogin;
     }
 
-    public render(): React.ReactNode {
+    private getView(): JSX.Element {
         const fragmentAfterLogin = this.getFragmentAfterLogin();
-        let view: JSX.Element;
 
-        if (this.state.view === Views.LOADING) {
-            view = (
-                <div className="mx_MatrixChat_splash">
-                    <Spinner />
-                </div>
-            );
-        } else if (this.state.view === Views.CONFIRM_LOCK_THEFT) {
-            view = (
-                <ConfirmSessionLockTheftView
-                    onConfirm={() => {
-                        this.setState({ view: Views.LOADING });
-                        this.startInitSession();
-                    }}
-                />
-            );
-        } else if (this.state.view === Views.COMPLETE_SECURITY) {
-            view = <CompleteSecurity onFinished={this.onCompleteSecurityE2eSetupFinished} />;
-        } else if (this.state.view === Views.E2E_SETUP) {
-            view = <E2eSetup onCancelled={this.onCompleteSecurityE2eSetupFinished} />;
-        } else if (this.state.view === Views.PENDING_CLIENT_START) {
-            // we think we are logged in, but are still waiting for the /sync to complete
-            view = (
-                <LoginSplashView
-                    matrixClient={MatrixClientPeg.safeGet()}
-                    onLogoutClick={this.onLogoutClick}
-                    syncError={this.state.syncError}
-                />
-            );
-        } else if (this.state.view === Views.LOGGED_IN) {
-            // `ready` and `view==LOGGED_IN` may be set before `page_type` (because the
-            // latter is set via the dispatcher). If we don't yet have a `page_type`,
-            // keep showing the spinner for now.
-            if (this.state.ready && this.state.page_type) {
-                /* for now, we stuff the entirety of our props and state into the LoggedInView.
-                 * we should go through and figure out what we actually need to pass down, as well
-                 * as using something like redux to avoid having a billion bits of state kicking around.
-                 */
-                view = (
-                    <LoggedInView
-                        {...this.props}
-                        {...this.state}
-                        ref={this.loggedInView}
-                        matrixClient={MatrixClientPeg.safeGet()}
-                        onRegistered={this.onRegistered}
-                        currentRoomId={this.state.currentRoomId}
+        switch (this.state.view) {
+            case Views.LOADING:
+                return (
+                    <div className="mx_MatrixChat_splash">
+                        <Spinner />
+                    </div>
+                );
+            case Views.CONFIRM_LOCK_THEFT:
+                return (
+                    <ConfirmSessionLockTheftView
+                        onConfirm={() => {
+                            this.setState({ view: Views.LOADING });
+                            this.startInitSession();
+                        }}
                     />
                 );
-            } else {
+            case Views.COMPLETE_SECURITY:
+                return <CompleteSecurity onFinished={this.onCompleteSecurityE2eSetupFinished} />;
+            case Views.E2E_SETUP:
+                return <E2eSetup onCancelled={this.onCompleteSecurityE2eSetupFinished} />;
+            case Views.PENDING_CLIENT_START:
                 // we think we are logged in, but are still waiting for the /sync to complete
-                view = (
+                return (
                     <LoginSplashView
                         matrixClient={MatrixClientPeg.safeGet()}
                         onLogoutClick={this.onLogoutClick}
                         syncError={this.state.syncError}
                     />
                 );
-            }
-        } else if (this.state.view === Views.WELCOME) {
-            view = <Welcome />;
-        } else if (this.state.view === Views.REGISTER && SettingsStore.getValue(UIFeature.Registration)) {
-            const email = ThreepidInviteStore.instance.pickBestInvite()?.toEmail;
-            view = (
-                <Registration
-                    clientSecret={this.state.register_client_secret}
-                    sessionId={this.state.register_session_id}
-                    idSid={this.state.register_id_sid}
-                    email={email}
-                    brand={this.props.config.brand}
-                    onLoggedIn={this.onRegisterFlowComplete}
-                    onLoginClick={this.onLoginClick}
-                    onServerConfigChange={this.onServerConfigChange}
-                    defaultDeviceDisplayName={this.props.defaultDeviceDisplayName}
-                    fragmentAfterLogin={fragmentAfterLogin}
-                    mobileRegister={this.state.isMobileRegistration}
-                    {...this.getServerProperties()}
-                />
-            );
-        } else if (this.state.view === Views.FORGOT_PASSWORD && SettingsStore.getValue(UIFeature.PasswordReset)) {
-            view = (
-                <ForgotPassword
-                    onComplete={this.onLoginClick}
-                    onLoginClick={this.onLoginClick}
-                    {...this.getServerProperties()}
-                />
-            );
-        } else if (this.state.view === Views.LOGIN) {
-            const showPasswordReset = SettingsStore.getValue(UIFeature.PasswordReset);
-            view = (
-                <Login
-                    isSyncing={this.state.pendingInitialSync}
-                    onLoggedIn={this.onUserCompletedLoginFlow}
-                    onRegisterClick={this.onRegisterClick}
-                    fallbackHsUrl={this.getFallbackHsUrl()}
-                    defaultDeviceDisplayName={this.props.defaultDeviceDisplayName}
-                    onForgotPasswordClick={showPasswordReset ? this.onForgotPasswordClick : undefined}
-                    onServerConfigChange={this.onServerConfigChange}
-                    fragmentAfterLogin={fragmentAfterLogin}
-                    defaultUsername={this.props.urlParams?.defaults?.defaultUsername}
-                    {...this.getServerProperties()}
-                />
-            );
-        } else if (this.state.view === Views.SOFT_LOGOUT) {
-            view = (
-                <SoftLogout
-                    urlParams={this.props.urlParams}
-                    onTokenLoginCompleted={this.props.onTokenLoginCompleted}
-                    fragmentAfterLogin={fragmentAfterLogin}
-                />
-            );
-        } else if (this.state.view === Views.LOCK_STOLEN) {
-            view = <SessionLockStolenView />;
-        } else {
-            logger.error(`Unknown view ${this.state.view}`);
-            return null;
+            case Views.LOGGED_IN:
+                // `ready` and `view==LOGGED_IN` may be set before `page_type` (because the
+                // latter is set via the dispatcher). If we don't yet have a `page_type`,
+                // keep showing the spinner for now.
+                if (this.state.ready && this.state.page_type) {
+                    /* for now, we stuff the entirety of our props and state into the LoggedInView.
+                     * we should go through and figure out what we actually need to pass down, as well
+                     * as using something like redux to avoid having a billion bits of state kicking around.
+                     */
+                    return (
+                        <LoggedInView
+                            {...this.props}
+                            {...this.state}
+                            ref={this.loggedInView}
+                            matrixClient={MatrixClientPeg.safeGet()}
+                            onRegistered={this.onRegistered}
+                            currentRoomId={this.state.currentRoomId}
+                        />
+                    );
+                } else {
+                    // we think we are logged in, but are still waiting for the /sync to complete
+                    return (
+                        <LoginSplashView
+                            matrixClient={MatrixClientPeg.safeGet()}
+                            onLogoutClick={this.onLogoutClick}
+                            syncError={this.state.syncError}
+                        />
+                    );
+                }
+            case Views.WELCOME:
+                return <Welcome {...this.getServerProperties()} />;
+            case Views.REGISTER:
+                return (
+                    <Registration
+                        clientSecret={this.state.register_client_secret}
+                        sessionId={this.state.register_session_id}
+                        idSid={this.state.register_id_sid}
+                        email={ThreepidInviteStore.instance.pickBestInvite()?.toEmail}
+                        brand={this.props.config.brand}
+                        onLoggedIn={this.onRegisterFlowComplete}
+                        onLoginClick={this.onLoginClick}
+                        onServerConfigChange={this.onServerConfigChange}
+                        defaultDeviceDisplayName={this.props.defaultDeviceDisplayName}
+                        fragmentAfterLogin={fragmentAfterLogin}
+                        mobileRegister={this.state.isMobileRegistration}
+                        {...this.getServerProperties()}
+                    />
+                );
+            case Views.FORGOT_PASSWORD:
+                return (
+                    <ForgotPassword
+                        onComplete={this.onLoginClick}
+                        onLoginClick={this.onLoginClick}
+                        {...this.getServerProperties()}
+                    />
+                );
+            case Views.LOGIN:
+                return (
+                    <Login
+                        isSyncing={this.state.pendingInitialSync}
+                        onLoggedIn={this.onUserCompletedLoginFlow}
+                        onRegisterClick={this.onRegisterClick}
+                        fallbackHsUrl={this.getFallbackHsUrl()}
+                        defaultDeviceDisplayName={this.props.defaultDeviceDisplayName}
+                        onForgotPasswordClick={
+                            SettingsStore.getValue(UIFeature.PasswordReset) ? this.onForgotPasswordClick : undefined
+                        }
+                        onServerConfigChange={this.onServerConfigChange}
+                        fragmentAfterLogin={fragmentAfterLogin}
+                        defaultUsername={this.props.urlParams?.defaults?.defaultUsername}
+                        {...this.getServerProperties()}
+                    />
+                );
+            case Views.SOFT_LOGOUT:
+                return (
+                    <SoftLogout
+                        urlParams={this.props.urlParams}
+                        onTokenLoginCompleted={this.props.onTokenLoginCompleted}
+                        fragmentAfterLogin={fragmentAfterLogin}
+                    />
+                );
+            case Views.LOCK_STOLEN:
+                return <SessionLockStolenView />;
         }
+    }
+
+    public render(): React.ReactNode {
+        const view = this.getView();
 
         return (
             <ErrorBoundary>
diff --git a/apps/web/src/components/structures/MessagePanel.tsx b/apps/web/src/components/structures/MessagePanel.tsx
index a38f264aab..a22d829de7 100644
--- a/apps/web/src/components/structures/MessagePanel.tsx
+++ b/apps/web/src/components/structures/MessagePanel.tsx
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX, createRef, type ReactNode, type TransitionEventHandler } from "react";
+import React, { type JSX, createRef, type ReactNode, type TransitionEventHandler, useContext } from "react";
 import classNames from "classnames";
 import {
     type Room,
@@ -34,7 +34,6 @@ import { Layout } from "../../settings/enums/Layout";
 import EventTile, {
     type GetRelationsForEvent,
     type IReadReceiptProps,
-    isEligibleForSpecialReceipt,
     type UnwrappedEventTile,
 } from "../views/rooms/EventTile";
 import IRCTimelineProfileResizer from "../views/elements/IRCTimelineProfileResizer";
@@ -58,6 +57,8 @@ import { CreationGrouper } from "./grouper/CreationGrouper";
 import { _t } from "../../languageHandler";
 import { getLateEventInfo } from "./grouper/LateEventGrouper";
 import { DateSeparatorViewModel } from "../../viewmodels/room/timeline/DateSeparatorViewModel";
+import { isEligibleForSpecialReceipt } from "../../viewmodels/room/timeline/event-tile/EventTileReceiptState";
+import { SDKContext } from "../../contexts/SDKContext.ts";
 
 const CONTINUATION_MAX_INTERVAL = 5 * 60 * 1000; // 5 minutes
 const continuedTypes = [EventType.Sticker, EventType.RoomMessage];
@@ -66,7 +67,10 @@ const continuedTypes = [EventType.Sticker, EventType.RoomMessage];
  * Creates and auto-disposes the DateSeparatorViewModel for message panel rendering.
  */
 function DateSeparatorWrapper({ roomId, ts }: { roomId: string; ts: number }): JSX.Element {
-    const vm = useCreateAutoDisposedViewModel(() => new DateSeparatorViewModel({ roomId, ts }));
+    const sdkContext = useContext(SDKContext);
+    const vm = useCreateAutoDisposedViewModel(
+        () => new DateSeparatorViewModel({ roomId, ts, roomViewStore: sdkContext.roomViewStore }),
+    );
     return <DateSeparatorView vm={vm} className="mx_TimelineSeparator" />;
 }
 
diff --git a/apps/web/src/components/structures/NonUrgentToastContainer.tsx b/apps/web/src/components/structures/NonUrgentToastContainer.tsx
index 481c9f0bf9..b7103b378a 100644
--- a/apps/web/src/components/structures/NonUrgentToastContainer.tsx
+++ b/apps/web/src/components/structures/NonUrgentToastContainer.tsx
@@ -41,6 +41,7 @@ export default class NonUrgentToastContainer extends React.PureComponent<EmptyOb
     public render(): React.ReactNode {
         const toasts = this.state.toasts.map((t, i) => {
             return (
+                // oxlint-disable-next-line react/no-array-index-key
                 <div className="mx_NonUrgentToastContainer_toast" key={`toast-${i}`}>
                     {React.createElement(t, {})}
                 </div>
diff --git a/apps/web/src/components/structures/PictureInPictureDragger.tsx b/apps/web/src/components/structures/PictureInPictureDragger.tsx
index d9f472c311..914a53f0bb 100644
--- a/apps/web/src/components/structures/PictureInPictureDragger.tsx
+++ b/apps/web/src/components/structures/PictureInPictureDragger.tsx
@@ -31,7 +31,7 @@ export type CreatePipChildren = (options: IChildrenOptions) => JSX.Element;
 
 interface IChildrenOptions {
     // a callback which is called when a mouse event (most likely mouse down) occurs at start of moving the pip around
-    onStartMoving: (event: React.MouseEvent<Element, MouseEvent>) => void;
+    onStartMoving: (event: React.MouseEvent) => void;
     // a callback which is called when the content fo the pip changes in a way that is likely to cause a resize
     onResize: (event: Event) => void;
 }
diff --git a/apps/web/src/components/structures/PipContainer.tsx b/apps/web/src/components/structures/PipContainer.tsx
index 12920fb8a7..fc3d80268b 100644
--- a/apps/web/src/components/structures/PipContainer.tsx
+++ b/apps/web/src/components/structures/PipContainer.tsx
@@ -12,8 +12,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { useCreateAutoDisposedViewModel, WidgetPipView } from "@element-hq/web-shared-components";
 
 import LegacyCallView from "../views/voip/LegacyCallView";
-import LegacyCallHandler, { LegacyCallHandlerEvent } from "../../LegacyCallHandler";
-import { MatrixClientPeg } from "../../MatrixClientPeg";
+import { LegacyCallHandlerEvent } from "../../LegacyCallHandler";
 import PictureInPictureDragger, { type CreatePipChildren } from "./PictureInPictureDragger";
 import dis from "../../dispatcher/dispatcher";
 import { Action } from "../../dispatcher/actions";
@@ -21,9 +20,9 @@ import { WidgetLayoutStore } from "../../stores/widgets/WidgetLayoutStore";
 import ActiveWidgetStore, { ActiveWidgetStoreEvent } from "../../stores/ActiveWidgetStore";
 import { type ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
-import { SdkContextClass } from "../../contexts/SDKContext";
 import RoomAvatar from "../views/avatars/RoomAvatar";
 import { WidgetPipViewModel, type Props as WidgetPipViewModelProps } from "../../viewmodels/room/WidgetPipViewModel";
+import { SDKContext } from "../../contexts/SDKContext.ts";
 
 const SHOW_CALL_IN_STATES = [
     CallState.Connected,
@@ -54,41 +53,6 @@ interface IState {
     showWidgetInPip: boolean;
 }
 
-// Splits a list of calls into one 'primary' one and a list
-// (which should be a single element) of other calls.
-// The primary will be the one not on hold, or an arbitrary one
-// if they're all on hold)
-function getPrimarySecondaryCallsForPip(roomId: string | null): [MatrixCall | null, MatrixCall[]] {
-    if (!roomId) return [null, []];
-
-    const calls = LegacyCallHandler.instance.getAllActiveCallsForPip(roomId);
-
-    let primary: MatrixCall | null = null;
-    let secondaries: MatrixCall[] = [];
-
-    for (const call of calls) {
-        if (!SHOW_CALL_IN_STATES.includes(call.state)) continue;
-
-        if (!call.isRemoteOnHold() && primary === null) {
-            primary = call;
-        } else {
-            secondaries.push(call);
-        }
-    }
-
-    if (primary === null && secondaries.length > 0) {
-        primary = secondaries[0];
-        secondaries = secondaries.slice(1);
-    }
-
-    if (secondaries.length > 1) {
-        // We should never be in more than two calls so this shouldn't happen
-        logger.log("Found more than 1 secondary call! Other calls will not be shown.");
-    }
-
-    return [primary, secondaries];
-}
-
 /**
  * PipContainer shows a small version of the LegacyCallView or a sticky widget hovering over the UI in
  * 'picture-in-picture' (PiP mode). It displays the call(s) which is *not* in the room the user is currently viewing
@@ -96,12 +60,15 @@ function getPrimarySecondaryCallsForPip(roomId: string | null): [MatrixCall | nu
  */
 
 class PipContainerInner extends React.Component<IProps, IState> {
-    public constructor(props: IProps) {
-        super(props);
+    public static contextType = SDKContext;
+    declare public context: React.ContextType<typeof SDKContext>;
 
-        const roomId = SdkContextClass.instance.roomViewStore.getRoomId();
+    public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
+        super(props, context);
 
-        const [primaryCall, secondaryCalls] = getPrimarySecondaryCallsForPip(roomId);
+        const roomId = this.context.roomViewStore.getRoomId();
+
+        const [primaryCall, secondaryCalls] = this.getPrimarySecondaryCallsForPip(roomId);
 
         this.state = {
             viewedRoomId: roomId || undefined,
@@ -114,13 +81,13 @@ class PipContainerInner extends React.Component<IProps, IState> {
     }
 
     public componentDidMount(): void {
-        LegacyCallHandler.instance.addListener(LegacyCallHandlerEvent.CallChangeRoom, this.updateCalls);
-        LegacyCallHandler.instance.addListener(LegacyCallHandlerEvent.CallState, this.updateCalls);
-        SdkContextClass.instance.roomViewStore.addListener(UPDATE_EVENT, this.onRoomViewStoreUpdate);
-        MatrixClientPeg.safeGet().on(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
-        const room = MatrixClientPeg.safeGet().getRoom(this.state.viewedRoomId);
+        this.context.legacyCallHandler.addListener(LegacyCallHandlerEvent.CallChangeRoom, this.updateCalls);
+        this.context.legacyCallHandler.addListener(LegacyCallHandlerEvent.CallState, this.updateCalls);
+        this.context.roomViewStore.addListener(UPDATE_EVENT, this.onRoomViewStoreUpdate);
+        this.context.client?.on(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
+        const room = this.context.client?.getRoom(this.state.viewedRoomId);
         if (room) {
-            WidgetLayoutStore.instance.on(WidgetLayoutStore.emissionForRoom(room), this.updateCalls);
+            this.context.widgetLayoutStore.on(WidgetLayoutStore.emissionForRoom(room), this.updateCalls);
         }
         ActiveWidgetStore.instance.on(ActiveWidgetStoreEvent.Persistence, this.onWidgetPersistence);
         ActiveWidgetStore.instance.on(ActiveWidgetStoreEvent.Dock, this.onWidgetDockChanges);
@@ -128,39 +95,75 @@ class PipContainerInner extends React.Component<IProps, IState> {
     }
 
     public componentWillUnmount(): void {
-        LegacyCallHandler.instance.removeListener(LegacyCallHandlerEvent.CallChangeRoom, this.updateCalls);
-        LegacyCallHandler.instance.removeListener(LegacyCallHandlerEvent.CallState, this.updateCalls);
-        const cli = MatrixClientPeg.get();
-        cli?.removeListener(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
-        SdkContextClass.instance.roomViewStore.removeListener(UPDATE_EVENT, this.onRoomViewStoreUpdate);
-        const room = cli?.getRoom(this.state.viewedRoomId);
+        this.context.legacyCallHandler.removeListener(LegacyCallHandlerEvent.CallChangeRoom, this.updateCalls);
+        this.context.legacyCallHandler.removeListener(LegacyCallHandlerEvent.CallState, this.updateCalls);
+        this.context.client?.removeListener(CallEvent.RemoteHoldUnhold, this.onCallRemoteHold);
+        this.context.roomViewStore.removeListener(UPDATE_EVENT, this.onRoomViewStoreUpdate);
+        const room = this.context.client?.getRoom(this.state.viewedRoomId);
         if (room) {
-            WidgetLayoutStore.instance.off(WidgetLayoutStore.emissionForRoom(room), this.updateCalls);
+            this.context.widgetLayoutStore.off(WidgetLayoutStore.emissionForRoom(room), this.updateCalls);
         }
         ActiveWidgetStore.instance.off(ActiveWidgetStoreEvent.Persistence, this.onWidgetPersistence);
         ActiveWidgetStore.instance.off(ActiveWidgetStoreEvent.Dock, this.onWidgetDockChanges);
         ActiveWidgetStore.instance.off(ActiveWidgetStoreEvent.Undock, this.onWidgetDockChanges);
     }
 
+    /**
+     * Splits a list of calls into one 'primary' one and a list
+     * (which should be a single element) of other calls.
+     * The primary will be the one not on hold, or an arbitrary one
+     * if they're all on hold)
+     */
+    private getPrimarySecondaryCallsForPip(roomId: string | null): [MatrixCall | null, MatrixCall[]] {
+        if (!roomId) return [null, []];
+
+        const calls = this.context.legacyCallHandler.getAllActiveCallsForPip(roomId);
+
+        let primary: MatrixCall | null = null;
+        let secondaries: MatrixCall[] = [];
+
+        for (const call of calls) {
+            if (!SHOW_CALL_IN_STATES.includes(call.state)) continue;
+
+            if (!call.isRemoteOnHold() && primary === null) {
+                primary = call;
+            } else {
+                secondaries.push(call);
+            }
+        }
+
+        if (primary === null && secondaries.length > 0) {
+            primary = secondaries[0];
+            secondaries = secondaries.slice(1);
+        }
+
+        if (secondaries.length > 1) {
+            // We should never be in more than two calls so this shouldn't happen
+            logger.log("Found more than 1 secondary call! Other calls will not be shown.");
+        }
+
+        return [primary, secondaries];
+    }
+
     private onMove = (): void => this.props.movePersistedElement.current?.();
 
     private onRoomViewStoreUpdate = (): void => {
-        const newRoomId = SdkContextClass.instance.roomViewStore.getRoomId();
+        const newRoomId = this.context.roomViewStore.getRoomId();
         const oldRoomId = this.state.viewedRoomId;
         if (newRoomId === oldRoomId) return;
         // The WidgetLayoutStore observer always tracks the currently viewed Room,
         // so we don't end up with multiple observers and know what observer to remove on unmount
-        const oldRoom = MatrixClientPeg.get()?.getRoom(oldRoomId);
+        const oldRoom = this.context.client?.getRoom(oldRoomId);
         if (oldRoom) {
-            WidgetLayoutStore.instance.off(WidgetLayoutStore.emissionForRoom(oldRoom), this.updateCalls);
+            this.context.widgetLayoutStore.off(WidgetLayoutStore.emissionForRoom(oldRoom), this.updateCalls);
         }
-        const newRoom = MatrixClientPeg.get()?.getRoom(newRoomId || undefined);
+        const newRoom = this.context.client?.getRoom(newRoomId || undefined);
         if (newRoom) {
-            WidgetLayoutStore.instance.on(WidgetLayoutStore.emissionForRoom(newRoom), this.updateCalls);
+            this.context.widgetLayoutStore.on(WidgetLayoutStore.emissionForRoom(newRoom), this.updateCalls);
         }
         if (!newRoomId) return;
 
-        const [primaryCall, secondaryCalls] = getPrimarySecondaryCallsForPip(newRoomId);
+        const [primaryCall, secondaryCalls] = this.getPrimarySecondaryCallsForPip(newRoomId);
         this.setState({
             viewedRoomId: newRoomId,
             primaryCall: primaryCall,
@@ -179,7 +182,7 @@ class PipContainerInner extends React.Component<IProps, IState> {
 
     private updateCalls = (): void => {
         if (!this.state.viewedRoomId) return;
-        const [primaryCall, secondaryCalls] = getPrimarySecondaryCallsForPip(this.state.viewedRoomId);
+        const [primaryCall, secondaryCalls] = this.getPrimarySecondaryCallsForPip(this.state.viewedRoomId);
 
         this.setState({
             primaryCall: primaryCall,
@@ -190,7 +193,7 @@ class PipContainerInner extends React.Component<IProps, IState> {
 
     private onCallRemoteHold = (): void => {
         if (!this.state.viewedRoomId) return;
-        const [primaryCall, secondaryCalls] = getPrimarySecondaryCallsForPip(this.state.viewedRoomId);
+        const [primaryCall, secondaryCalls] = this.getPrimarySecondaryCallsForPip(this.state.viewedRoomId);
 
         this.setState({
             primaryCall: primaryCall,
@@ -217,7 +220,7 @@ class PipContainerInner extends React.Component<IProps, IState> {
         let notDocked = false;
         // Sanity check the room - the widget may have been destroyed between render cycles, and
         // thus no room is associated anymore.
-        if (persistentWidgetId && persistentRoomId && MatrixClientPeg.safeGet().getRoom(persistentRoomId)) {
+        if (persistentWidgetId && persistentRoomId && this.context.client?.getRoom(persistentRoomId)) {
             notDocked = !ActiveWidgetStore.instance.isDocked(persistentWidgetId, persistentRoomId);
             fromAnotherRoom = this.state.viewedRoomId !== persistentRoomId;
         }
@@ -256,7 +259,7 @@ class PipContainerInner extends React.Component<IProps, IState> {
                 <WidgetPipWrappedView
                     key="widget-pip"
                     widgetId={this.state.persistentWidgetId!}
-                    room={MatrixClientPeg.safeGet().getRoom(this.state.persistentRoomId ?? undefined)!}
+                    room={this.context.client!.getRoom(this.state.persistentRoomId ?? undefined)!}
                     viewingRoom={this.state.viewedRoomId === this.state.persistentRoomId}
                     onStartMoving={onStartMoving}
                     movePersistedElement={this.props.movePersistedElement}
diff --git a/apps/web/src/components/structures/ReleaseAnnouncement.tsx b/apps/web/src/components/structures/ReleaseAnnouncement.tsx
index 5a9eea2d68..bdeef4280c 100644
--- a/apps/web/src/components/structures/ReleaseAnnouncement.tsx
+++ b/apps/web/src/components/structures/ReleaseAnnouncement.tsx
@@ -25,7 +25,6 @@ interface ReleaseAnnouncementProps extends Omit<
  * @param feature - the feature to announce, should be listed in {@link Feature}
  * @param children
  * @param props
- * @constructor
  */
 export function ReleaseAnnouncement({
     feature,
diff --git a/apps/web/src/components/structures/RightPanel.tsx b/apps/web/src/components/structures/RightPanel.tsx
index 24c1655455..00cdebe5b5 100644
--- a/apps/web/src/components/structures/RightPanel.tsx
+++ b/apps/web/src/components/structures/RightPanel.tsx
@@ -256,7 +256,7 @@ export default class RightPanel extends React.Component<Props, IState> {
                         <RoomSummaryCardView
                             room={this.props.room}
                             // whenever RightPanel is passed a room it is passed a permalinkcreator
-                            permalinkCreator={this.props.permalinkCreator!}
+                            permalinkCreator={this.props.permalinkCreator}
                             onSearchChange={this.props.onSearchChange}
                             onSearchCancel={this.props.onSearchCancel}
                             searchTerm={this.props.searchTerm}
diff --git a/apps/web/src/components/structures/RoomSearch.tsx b/apps/web/src/components/structures/RoomSearch.tsx
deleted file mode 100644
index f099032a63..0000000000
--- a/apps/web/src/components/structures/RoomSearch.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import classNames from "classnames";
-import React from "react";
-import { SearchIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-
-import { ALTERNATE_KEY_NAME } from "../../accessibility/KeyboardShortcuts";
-import defaultDispatcher from "../../dispatcher/dispatcher";
-import { IS_MAC, Key } from "../../Keyboard";
-import { _t } from "../../languageHandler";
-import AccessibleButton from "../views/elements/AccessibleButton";
-import { Action } from "../../dispatcher/actions";
-
-interface IProps {
-    isMinimized: boolean;
-}
-
-export default class RoomSearch extends React.PureComponent<IProps> {
-    private openSpotlight(this: void): void {
-        defaultDispatcher.fire(Action.OpenSpotlight);
-    }
-
-    public render(): React.ReactNode {
-        const classes = classNames(
-            {
-                mx_RoomSearch: true,
-                mx_RoomSearch_minimized: this.props.isMinimized,
-            },
-            "mx_RoomSearch_spotlightTrigger",
-        );
-
-        const shortcutPrompt = (
-            <kbd className="mx_RoomSearch_shortcutPrompt">
-                {IS_MAC ? "⌘ K" : _t(ALTERNATE_KEY_NAME[Key.CONTROL]) + " K"}
-            </kbd>
-        );
-
-        return (
-            <AccessibleButton onClick={this.openSpotlight} className={classes} aria-label={_t("action|search")}>
-                <SearchIcon className="mx_RoomSearch_icon" />
-                {!this.props.isMinimized && (
-                    <div className="mx_RoomSearch_spotlightTriggerText">{_t("action|search")}</div>
-                )}
-                {shortcutPrompt}
-            </AccessibleButton>
-        );
-    }
-}
diff --git a/apps/web/src/components/structures/RoomView.tsx b/apps/web/src/components/structures/RoomView.tsx
index b5c03938bc..42f2d87808 100644
--- a/apps/web/src/components/structures/RoomView.tsx
+++ b/apps/web/src/components/structures/RoomView.tsx
@@ -72,7 +72,7 @@ import AccessibleButton, { type ButtonEvent } from "../views/elements/Accessible
 import { TimelineRenderingType, MainSplitContentType } from "../../contexts/RoomContext";
 import { E2EStatus, shieldStatusForRoom } from "../../utils/ShieldUtils";
 import { Action } from "../../dispatcher/actions";
-import { type IMatrixClientCreds } from "../../MatrixClientPeg";
+import { type IMatrixClientCreds } from "../../utils/createMatrixClient";
 import { useMatrixClientContext } from "../../contexts/MatrixClientContext";
 import ScrollPanel from "./ScrollPanel";
 import TimelinePanel from "./TimelinePanel";
@@ -88,7 +88,6 @@ import { containsEmoji } from "../../effects/utils";
 import { CHAT_EFFECTS } from "../../effects";
 import { CallView } from "../views/voip/CallView";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
-import Notifier from "../../Notifier";
 import { showToast as showNotificationsToast } from "../../toasts/DesktopNotificationsToast";
 import { WidgetLayoutStore } from "../../stores/widgets/WidgetLayoutStore";
 import { getKeyBindingsManager } from "../../KeyBindingsManager";
@@ -130,7 +129,6 @@ import { WaitingForThirdPartyRoomView } from "./WaitingForThirdPartyRoomView";
 import { isNotUndefined } from "../../Typeguards";
 import { type CancelAskToJoinPayload } from "../../dispatcher/payloads/CancelAskToJoinPayload";
 import { type SubmitAskToJoinPayload } from "../../dispatcher/payloads/SubmitAskToJoinPayload";
-import RightPanelStore from "../../stores/right-panel/RightPanelStore";
 import { onView3pidInvite } from "../../stores/right-panel/action-handlers";
 import RoomSearchAuxPanel from "../views/rooms/RoomSearchAuxPanel";
 import { PinnedMessageBanner } from "../views/rooms/PinnedMessageBanner";
@@ -142,6 +140,7 @@ import { type RoomViewStore } from "../../stores/RoomViewStore.tsx";
 import { RoomStatusBarViewModel } from "../../viewmodels/room/RoomStatusBar.ts";
 import { EncryptionEventViewModel } from "../../viewmodels/room/timeline/event-tile/EncryptionEventViewModel.ts";
 import { ModuleApi } from "../../modules/Api.ts";
+import { RoomUploadContextProvider } from "../../viewmodels/room/RoomUploadViewModel.tsx";
 import { EventPresentationContextProvider } from "../../utils/EventPresentationContextProvider";
 
 const DEBUG = false;
@@ -206,8 +205,6 @@ interface IRoomProps extends RoomViewProps {
     enableReadReceiptsAndMarkersOnActivity?: boolean;
 }
 
-export { MainSplitContentType };
-
 export interface IRoomState {
     room?: Room;
     roomId?: string;
@@ -302,8 +299,6 @@ interface LocalRoomViewProps {
     resizeNotifier: ResizeNotifier;
     permalinkCreator: RoomPermalinkCreator;
     roomView: RefObject<HTMLElement | null>;
-    onFileDrop: (dataTransfer: DataTransfer) => Promise<void>;
-    mainSplitContentType: MainSplitContentType;
     e2eStatus?: E2EStatus;
 }
 
@@ -343,17 +338,19 @@ function LocalRoomView(props: LocalRoomViewProps): ReactElement {
         <div className="mx_RoomView mx_RoomView--local">
             <ErrorBoundary>
                 <RoomHeader room={room} />
-                <main className="mx_RoomView_body" ref={props.roomView} aria-label={_t("room|room_content")}>
-                    <FileDropTarget parent={props.roomView.current} onFileDrop={props.onFileDrop} room={room} />
-                    <div className="mx_RoomView_timeline">
-                        <ScrollPanel className="mx_RoomView_messagePanel">
-                            {encryptionTile}
-                            <NewRoomIntro />
-                        </ScrollPanel>
-                    </div>
-                    {statusBar}
-                    {composer}
-                </main>
+                <RoomUploadContextProvider>
+                    <main className="mx_RoomView_body" ref={props.roomView} aria-label={_t("room|room_content")}>
+                        <FileDropTarget parent={props.roomView.current} />
+                        <div className="mx_RoomView_timeline">
+                            <ScrollPanel className="mx_RoomView_messagePanel">
+                                {encryptionTile}
+                                <NewRoomIntro />
+                            </ScrollPanel>
+                        </div>
+                        {statusBar}
+                        {composer}
+                    </main>
+                </RoomUploadContextProvider>
             </ErrorBoundary>
         </div>
     );
@@ -362,14 +359,13 @@ function LocalRoomView(props: LocalRoomViewProps): ReactElement {
 interface ILocalRoomCreateLoaderProps {
     localRoom: LocalRoom;
     names: string;
-    mainSplitContentType: MainSplitContentType;
 }
 
 /**
  * Room create loader view displaying a message and a spinner.
  *
  * @param {ILocalRoomCreateLoaderProps} props Room view props
- * @return {ReactElement}
+ * @returns {ReactElement}
  */
 function LocalRoomCreateLoader(props: ILocalRoomCreateLoaderProps): ReactElement {
     const text = _t("room|creating_room_text", { names: props.names });
@@ -716,19 +712,19 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         // Add watchers for each of the settings we just looked up
         this.settingWatchers = this.settingWatchers.concat([
             SettingsStore.watchSetting("showReadReceipts", roomId, (...[, , , value]) =>
-                this.setState({ showReadReceipts: value as boolean }),
+                this.setState({ showReadReceipts: value! }),
             ),
             SettingsStore.watchSetting("showRedactions", roomId, (...[, , , value]) =>
-                this.setState({ showRedactions: value as boolean }),
+                this.setState({ showRedactions: value! }),
             ),
             SettingsStore.watchSetting("showJoinLeaves", roomId, (...[, , , value]) =>
-                this.setState({ showJoinLeaves: value as boolean }),
+                this.setState({ showJoinLeaves: value! }),
             ),
             SettingsStore.watchSetting("showAvatarChanges", roomId, (...[, , , value]) =>
-                this.setState({ showAvatarChanges: value as boolean }),
+                this.setState({ showAvatarChanges: value! }),
             ),
             SettingsStore.watchSetting("showDisplaynameChanges", roomId, (...[, , , value]) =>
-                this.setState({ showDisplaynameChanges: value as boolean }),
+                this.setState({ showDisplaynameChanges: value! }),
             ),
         ]);
 
@@ -989,34 +985,32 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         this.context.resizeNotifier.on("isResizing", this.onIsResizing);
 
         this.settingWatchers = [
-            SettingsStore.watchSetting("layout", null, (...[, , , value]) =>
-                this.setState({ layout: value as Layout }),
-            ),
+            SettingsStore.watchSetting("layout", null, (...[, , , value]) => this.setState({ layout: value! })),
             SettingsStore.watchSetting("lowBandwidth", null, (...[, , , value]) =>
-                this.setState({ lowBandwidth: value as boolean }),
+                this.setState({ lowBandwidth: value! }),
             ),
             SettingsStore.watchSetting("alwaysShowTimestamps", null, (...[, , , value]) =>
-                this.setState({ alwaysShowTimestamps: value as boolean }),
+                this.setState({ alwaysShowTimestamps: value! }),
             ),
             SettingsStore.watchSetting("showTwelveHourTimestamps", null, (...[, , , value]) =>
-                this.setState({ showTwelveHourTimestamps: value as boolean }),
+                this.setState({ showTwelveHourTimestamps: value! }),
             ),
             SettingsStore.watchSetting(TimezoneHandler.USER_TIMEZONE_KEY, null, (...[, , , value]) =>
-                this.setState({ userTimezone: value as string }),
+                this.setState({ userTimezone: value! }),
             ),
             SettingsStore.watchSetting("readMarkerInViewThresholdMs", null, (...[, , , value]) =>
-                this.setState({ readMarkerInViewThresholdMs: value as number }),
+                this.setState({ readMarkerInViewThresholdMs: value! }),
             ),
             SettingsStore.watchSetting("readMarkerOutOfViewThresholdMs", null, (...[, , , value]) =>
-                this.setState({ readMarkerOutOfViewThresholdMs: value as number }),
+                this.setState({ readMarkerOutOfViewThresholdMs: value! }),
             ),
             SettingsStore.watchSetting("showHiddenEventsInTimeline", null, (...[, , , value]) =>
-                this.setState({ showHiddenEvents: value as boolean }),
+                this.setState({ showHiddenEvents: value! }),
             ),
             SettingsStore.watchSetting("urlPreviewsEnabled", null, this.onUrlPreviewsEnabledChange),
             SettingsStore.watchSetting("urlPreviewsEnabled_e2ee", null, this.onUrlPreviewsEnabledChange),
             SettingsStore.watchSetting("feature_dynamic_room_predecessors", null, (...[, , , value]) =>
-                this.setState({ msc3946ProcessDynamicPredecessor: value as boolean }),
+                this.setState({ msc3946ProcessDynamicPredecessor: value! }),
             ),
         ];
 
@@ -1297,7 +1291,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                 const composerInsertPayload = payload as ComposerInsertPayload;
                 if (composerInsertPayload.composerType) break;
 
-                let timelineRenderingType: TimelineRenderingType | undefined;
+                let timelineRenderingType = composerInsertPayload.timelineRenderingType;
                 // ThreadView handles Action.ComposerInsert itself due to it having its own editState
                 if (composerInsertPayload.timelineRenderingType === TimelineRenderingType.Thread) break;
                 if (
@@ -1309,12 +1303,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                     timelineRenderingType = TimelineRenderingType.Room;
                 }
 
-                // If the dispatchee didn't request a timeline rendering type, use the current one.
-                timelineRenderingType =
-                    timelineRenderingType ??
-                    composerInsertPayload.timelineRenderingType ??
-                    this.state.timelineRenderingType;
-
                 // re-dispatch to the correct composer
                 defaultDispatcher.dispatch<ComposerInsertPayload>({
                     ...composerInsertPayload,
@@ -1341,23 +1329,23 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             case Action.ViewUser:
                 if (payload.member) {
                     if (payload.push) {
-                        RightPanelStore.instance.pushCard({
+                        this.context.rightPanelStore.pushCard({
                             phase: RightPanelPhases.MemberInfo,
                             state: { member: payload.member },
                         });
                     } else {
-                        RightPanelStore.instance.setCards([
+                        this.context.rightPanelStore.setCards([
                             { phase: RightPanelPhases.RoomSummary },
                             { phase: RightPanelPhases.MemberList },
                             { phase: RightPanelPhases.MemberInfo, state: { member: payload.member } },
                         ]);
                     }
                 } else {
-                    RightPanelStore.instance.showOrHidePhase(RightPanelPhases.MemberList);
+                    this.context.rightPanelStore.showOrHidePhase(RightPanelPhases.MemberList);
                 }
                 break;
             case Action.View3pidInvite:
-                onView3pidInvite(payload, RightPanelStore.instance);
+                onView3pidInvite(payload, this.context.rightPanelStore);
                 break;
             case Action.FocusMessageSearch:
                 if ((payload as FocusMessageSearchPayload).initialText) {
@@ -1533,8 +1521,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                         this.setState({ membersLoaded: true });
                     }
                 } catch (err) {
-                    const errorMessage =
-                        `Fetching room members for ${room.roomId} failed.` + " Room members will appear incomplete.";
+                    const errorMessage = `Fetching room members for ${room.roomId} failed. Room members will appear incomplete.`;
                     logger.error(errorMessage);
                     logger.error(err);
                 }
@@ -1697,8 +1684,8 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         if (!this.state.room) return;
         const memberCount = this.state.room.getJoinedMemberCount() + this.state.room.getInvitedMemberCount();
         // if they are not alone prompt the user about notifications so they don't miss replies
-        if (memberCount > 1 && Notifier.shouldShowPrompt()) {
-            showNotificationsToast(true);
+        if (memberCount > 1 && this.context.notifier.shouldShowPrompt()) {
+            showNotificationsToast(this.context.notifier, true);
         }
     }
 
@@ -2121,19 +2108,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         });
     }
 
-    private onFileDrop = async (dataTransfer: DataTransfer): Promise<void> => {
-        const roomId = this.getRoomId();
-        if (!roomId || !this.context.client) return;
-        await ContentMessages.sharedInstance().sendContentListToRoom(
-            Array.from(dataTransfer.files),
-            roomId,
-            undefined,
-            this.state.replyToEvent,
-            this.context.client,
-            TimelineRenderingType.Room,
-        );
-    };
-
     private onMeasurement = (narrow: boolean): void => {
         this.setState({ narrow });
     };
@@ -2151,11 +2125,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         const names = this.state.room.getDefaultRoomName(this.context.client.getSafeUserId());
         return (
             <ScopedRoomContextProvider {...this.state} roomViewStore={this.roomViewStore}>
-                <LocalRoomCreateLoader
-                    localRoom={localRoom}
-                    names={names}
-                    mainSplitContentType={this.state.mainSplitContentType}
-                />
+                <LocalRoomCreateLoader localRoom={localRoom} names={names} />
             </ScopedRoomContextProvider>
         );
     }
@@ -2169,8 +2139,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                     resizeNotifier={this.context.resizeNotifier}
                     permalinkCreator={this.permalinkCreator}
                     roomView={this.roomView}
-                    onFileDrop={this.onFileDrop}
-                    mainSplitContentType={this.state.mainSplitContentType}
                 />
             </ScopedRoomContextProvider>
         );
@@ -2364,7 +2332,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                                 onForgetClick={this.onForgetClick}
                                 onDeclineClick={this.onDeclineButtonClicked}
                                 onDeclineAndBlockClick={this.onDeclineAndBlockButtonClicked}
-                                promptRejectionOptions={true}
                                 inviterName={inviterName}
                                 canPreview={false}
                                 joining={this.state.joining}
@@ -2478,7 +2445,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                     onJoinClick={this.onJoinButtonClicked}
                     onForgetClick={this.onForgetClick}
                     onDeclineClick={this.onRejectThreepidInviteButtonClicked}
-                    promptRejectionOptions={true}
                     joining={this.state.joining}
                     inviterName={inviterName}
                     invitedEmail={invitedEmail}
@@ -2673,16 +2639,12 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             case MainSplitContentType.Timeline:
                 mainSplitContentClassName = "mx_MainSplit_timeline";
                 mainSplitBody = (
-                    <>
+                    <RoomUploadContextProvider>
                         <Measured sensor={this.roomViewBody} onMeasurement={this.onMeasurement} />
                         {auxPanel}
                         {pinnedMessageBanner}
                         <main className={timelineClasses} data-testid="timeline">
-                            <FileDropTarget
-                                parent={this.roomView.current}
-                                onFileDrop={this.onFileDrop}
-                                room={this.state.room}
-                            />
+                            <FileDropTarget parent={this.roomView.current} />
                             {topUnreadMessagesBar}
                             {jumpToBottom}
                             {messagePanel}
@@ -2691,7 +2653,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                         {statusBarArea}
                         {previewBar}
                         {messageComposer}
-                    </>
+                    </RoomUploadContextProvider>
                 );
                 break;
             case MainSplitContentType.MaximisedWidget:
diff --git a/apps/web/src/components/structures/ScrollPanel.tsx b/apps/web/src/components/structures/ScrollPanel.tsx
index e206fc3c70..3be253a8e5 100644
--- a/apps/web/src/components/structures/ScrollPanel.tsx
+++ b/apps/web/src/components/structures/ScrollPanel.tsx
@@ -8,10 +8,10 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { createRef, type CSSProperties, type ReactNode } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
+import { AutoHideScrollbar } from "@element-hq/web-shared-components";
 
 import SettingsStore from "../../settings/SettingsStore";
 import Timer from "../../utils/Timer";
-import AutoHideScrollbar from "./AutoHideScrollbar";
 import { getKeyBindingsManager } from "../../KeyBindingsManager";
 import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
 import { SDKContext } from "../../contexts/SDKContext";
@@ -158,7 +158,7 @@ export default class ScrollPanel extends React.Component<IProps> {
             return Promise.resolve(false);
         },
         onUnfillRequest: function (backwards: boolean, scrollToken: string) {},
-        onScroll: function () {},
+        onScroll: function (): void {},
     };
 
     private readonly pendingFillRequests: Record<"b" | "f", boolean | null> = {
@@ -457,7 +457,7 @@ export default class ScrollPanel extends React.Component<IProps> {
             this.unfillDebouncer = window.setTimeout(() => {
                 this.unfillDebouncer = null;
                 debuglog("unfilling now", { backwards, origExcessHeight });
-                this.props.onUnfillRequest?.(backwards, markerScrollToken!);
+                this.props.onUnfillRequest?.(backwards, markerScrollToken);
             }, UNFILL_REQUEST_DEBOUNCE_MS);
         }
     }
@@ -666,7 +666,7 @@ export default class ScrollPanel extends React.Component<IProps> {
             debuglog("unable to save scroll state: found no children in the viewport");
             return;
         }
-        const scrollToken = node!.dataset.scrollTokens?.split(",")[0];
+        const scrollToken = node.dataset.scrollTokens?.split(",")[0];
         debuglog("saving anchored scroll state to message", scrollToken);
         const bottomOffset = this.topFromBottom(node);
         this.scrollState = {
@@ -788,7 +788,7 @@ export default class ScrollPanel extends React.Component<IProps> {
                 const m = messages[i] as HTMLElement;
                 // 'data-scroll-tokens' is a DOMString of comma-separated scroll tokens
                 // There might only be one scroll token
-                if (scrollToken && m.dataset.scrollTokens?.split(",").includes(scrollToken!)) {
+                if (scrollToken && m.dataset.scrollTokens?.split(",").includes(scrollToken)) {
                     node = m;
                     break;
                 }
@@ -940,7 +940,7 @@ export default class ScrollPanel extends React.Component<IProps> {
             <AutoHideScrollbar
                 wrappedRef={this.collectScroll}
                 onScroll={this.onScroll}
-                className={`mx_ScrollPanel ${this.props.className}`}
+                className={`mx_AutoHideScrollbar mx_ScrollPanel ${this.props.className}`}
                 style={this.props.style}
             >
                 {this.props.fixedChildren}
diff --git a/apps/web/src/components/structures/SpaceHierarchy.tsx b/apps/web/src/components/structures/SpaceHierarchy.tsx
index c1d5976869..fc9d81988f 100644
--- a/apps/web/src/components/structures/SpaceHierarchy.tsx
+++ b/apps/web/src/components/structures/SpaceHierarchy.tsx
@@ -62,7 +62,6 @@ import { Action } from "../../dispatcher/actions";
 import { type IState, RovingTabIndexProvider, useRovingTabIndex } from "../../accessibility/RovingTabIndex";
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import { useTypedEventEmitterState } from "../../hooks/useEventEmitter";
-import { type IOOBData } from "../../stores/ThreepidInviteStore";
 import { awaitRoomDownSync } from "../../utils/RoomUpgrade";
 import { type ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
 import { type JoinRoomReadyPayload } from "../../dispatcher/payloads/JoinRoomReadyPayload";
@@ -180,7 +179,6 @@ const Tile: React.FC<ITileProps> = ({
         if (hasPermissions) {
             checkbox = (
                 <StyledCheckbox
-                    role="presentation"
                     aria-labelledby={checkboxLabelId}
                     checked={!!selected}
                     tabIndex={-1}
@@ -198,12 +196,7 @@ const Tile: React.FC<ITileProps> = ({
                         ev.stopPropagation();
                     }}
                 >
-                    <StyledCheckbox
-                        role="presentation"
-                        aria-labelledby={checkboxLabelId}
-                        disabled={true}
-                        tabIndex={-1}
-                    />
+                    <StyledCheckbox aria-labelledby={checkboxLabelId} disabled={true} tabIndex={-1} />
                 </TextWithTooltip>
             );
         }
@@ -287,8 +280,9 @@ const Tile: React.FC<ITileProps> = ({
     let childSection: JSX.Element | undefined;
     let onKeyDown: KeyboardEventHandler | undefined;
     if (children) {
-        // the chevron is purposefully a div rather than a button as it should be ignored for a11y
         childToggle = (
+            // the chevron is purposefully a div rather than a button as it should be ignored for a11y
+            // oxlint-disable-next-line jsx-a11y/click-events-have-key-events
             <div
                 className={classNames("mx_SpaceHierarchy_subspace_toggle", {
                     mx_SpaceHierarchy_subspace_toggle_shown: showChildren,
@@ -405,7 +399,7 @@ export const showRoom = (cli: MatrixClient, hierarchy: RoomHierarchy, roomId: st
             // XXX: This logic is duplicated from the JS SDK which would normally decide what the name is.
             name: room?.name || roomAlias || _t("common|unnamed_room"),
             roomType,
-        } as IOOBData,
+        },
         metricsTrigger: "RoomDirectory",
     });
 };
@@ -798,7 +792,7 @@ const SpaceHierarchy: React.FC<IProps> = ({ space, initialText = "", showRoom, a
 
         // Walk back up the tree to find all parents of the direct matches to show their place in the hierarchy
         const visited = new Set<string>();
-        const queue = [...directMatches.map((r) => r.room_id)];
+        const queue = directMatches.map((r) => r.room_id);
         while (queue.length) {
             const roomId = queue.pop()!;
             visited.add(roomId);
@@ -863,25 +857,23 @@ const SpaceHierarchy: React.FC<IProps> = ({ space, initialText = "", showRoom, a
                     let results: JSX.Element | undefined;
                     if (filteredRoomSet.size && root) {
                         results = (
-                            <>
-                                <HierarchyLevel
-                                    root={root}
-                                    roomSet={filteredRoomSet}
-                                    hierarchy={hierarchy}
-                                    parents={new Set()}
-                                    selectedMap={selected}
-                                    onToggleClick={hasPermissions ? onToggleClick : undefined}
-                                    onViewRoomClick={(roomId, roomType) => showRoom(cli, hierarchy, roomId, roomType)}
-                                    onJoinRoomClick={async (roomId, parents) => {
-                                        for (const parent of parents) {
-                                            if (cli.getRoom(parent)?.getMyMembership() !== KnownMembership.Join) {
-                                                await joinRoom(cli, roomContext.roomViewStore, hierarchy, parent);
-                                            }
+                            <HierarchyLevel
+                                root={root}
+                                roomSet={filteredRoomSet}
+                                hierarchy={hierarchy}
+                                parents={new Set()}
+                                selectedMap={selected}
+                                onToggleClick={hasPermissions ? onToggleClick : undefined}
+                                onViewRoomClick={(roomId, roomType) => showRoom(cli, hierarchy, roomId, roomType)}
+                                onJoinRoomClick={async (roomId, parents) => {
+                                    for (const parent of parents) {
+                                        if (cli.getRoom(parent)?.getMyMembership() !== KnownMembership.Join) {
+                                            await joinRoom(cli, roomContext.roomViewStore, hierarchy, parent);
                                         }
-                                        await joinRoom(cli, roomContext.roomViewStore, hierarchy, roomId);
-                                    }}
-                                />
-                            </>
+                                    }
+                                    await joinRoom(cli, roomContext.roomViewStore, hierarchy, roomId);
+                                }}
+                            />
                         );
                     } else if (!hierarchy.canLoadMore) {
                         results = (
diff --git a/apps/web/src/components/structures/SpaceRoomView.tsx b/apps/web/src/components/structures/SpaceRoomView.tsx
index 9bb04ce552..569c15090a 100644
--- a/apps/web/src/components/structures/SpaceRoomView.tsx
+++ b/apps/web/src/components/structures/SpaceRoomView.tsx
@@ -20,7 +20,6 @@ import {
     VideoCallSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 
-import MatrixClientContext from "../../contexts/MatrixClientContext";
 import createRoom, { type IOpts } from "../../createRoom";
 import { shouldShowComponent } from "../../customisations/helpers/UIComponents";
 import { Action } from "../../dispatcher/actions";
@@ -37,7 +36,6 @@ import PosthogTrackers from "../../PosthogTrackers";
 import { showRoomInviteDialog } from "../../RoomInvite";
 import { UIComponent } from "../../settings/UIFeature";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
-import RightPanelStore from "../../stores/right-panel/RightPanelStore";
 import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases";
 import type ResizeNotifier from "../../utils/ResizeNotifier";
 import {
@@ -77,6 +75,7 @@ import { type RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
 import SpacePillButton from "./SpacePillButton.tsx";
 import { useRoomName } from "../../hooks/useRoomName.ts";
 import MultiInviter from "../../utils/MultiInviter.ts";
+import { SDKContext } from "../../contexts/SDKContext.ts";
 
 interface IProps {
     space: Room;
@@ -212,18 +211,18 @@ const SpaceLandingAddButton: React.FC<{ space: Room }> = ({ space }) => {
 };
 
 const SpaceLanding: React.FC<{ space: Room }> = ({ space }) => {
-    const cli = useContext(MatrixClientContext);
+    const sdkContext = useContext(SDKContext);
     const myMembership = useMyRoomMembership(space);
-    const userId = cli.getSafeUserId();
+    const userId = sdkContext.client!.getSafeUserId();
     const name = useRoomName(space);
 
     const storeIsShowingSpaceMembers = useCallback(
         () =>
-            RightPanelStore.instance.isOpenForRoom(space.roomId) &&
-            RightPanelStore.instance.currentCardForRoom(space.roomId)?.phase === RightPanelPhases.MemberList,
-        [space.roomId],
+            sdkContext.rightPanelStore.isOpenForRoom(space.roomId) &&
+            sdkContext.rightPanelStore.currentCardForRoom(space.roomId)?.phase === RightPanelPhases.MemberList,
+        [space.roomId, sdkContext.rightPanelStore],
     );
-    const isShowingMembers = useEventEmitterState(RightPanelStore.instance, UPDATE_EVENT, storeIsShowingSpaceMembers);
+    const isShowingMembers = useEventEmitterState(sdkContext.rightPanelStore, UPDATE_EVENT, storeIsShowingSpaceMembers);
 
     let inviteButton;
     if (shouldShowSpaceInvite(space) && shouldShowComponent(UIComponent.InviteUsers)) {
@@ -266,7 +265,7 @@ const SpaceLanding: React.FC<{ space: Room }> = ({ space }) => {
     }
 
     const onMembersClick = (): void => {
-        RightPanelStore.instance.setCard({ phase: RightPanelPhases.MemberList });
+        sdkContext.rightPanelStore.setCard({ phase: RightPanelPhases.MemberList });
     };
 
     return (
@@ -603,43 +602,43 @@ const SpaceSetupPrivateInvite: React.FC<{
 };
 
 export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
-    public static contextType = MatrixClientContext;
-    declare public context: React.ContextType<typeof MatrixClientContext>;
+    public static contextType = SDKContext;
+    declare public context: React.ContextType<typeof SDKContext>;
 
     private dispatcherRef?: string;
 
-    public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
+    public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
         super(props, context);
 
         let phase = Phase.Landing;
 
         const creator = this.props.space.currentState.getStateEvents(EventType.RoomCreate, "")?.getSender();
-        const showSetup = this.props.justCreatedOpts && context.getSafeUserId() === creator;
+        const showSetup = this.props.justCreatedOpts && this.context.client?.getSafeUserId() === creator;
 
         if (showSetup) {
             phase =
-                this.props.justCreatedOpts!.createOpts?.preset === Preset.PublicChat
+                this.props.justCreatedOpts.createOpts?.preset === Preset.PublicChat
                     ? Phase.PublicCreateRooms
                     : Phase.PrivateScope;
         }
 
         this.state = {
             phase,
-            showRightPanel: RightPanelStore.instance.isOpenForRoom(this.props.space.roomId),
+            showRightPanel: this.context.rightPanelStore.isOpenForRoom(this.props.space.roomId),
             myMembership: this.props.space.getMyMembership(),
         };
     }
 
     public componentDidMount(): void {
         this.dispatcherRef = defaultDispatcher.register(this.onAction);
-        RightPanelStore.instance.on(UPDATE_EVENT, this.onRightPanelStoreUpdate);
-        this.context.on(RoomEvent.MyMembership, this.onMyMembership);
+        this.context.rightPanelStore.on(UPDATE_EVENT, this.onRightPanelStoreUpdate);
+        this.context.client?.on(RoomEvent.MyMembership, this.onMyMembership);
     }
 
     public componentWillUnmount(): void {
         defaultDispatcher.unregister(this.dispatcherRef);
-        RightPanelStore.instance.off(UPDATE_EVENT, this.onRightPanelStoreUpdate);
-        this.context.off(RoomEvent.MyMembership, this.onMyMembership);
+        this.context.rightPanelStore.off(UPDATE_EVENT, this.onRightPanelStoreUpdate);
+        this.context.client?.off(RoomEvent.MyMembership, this.onMyMembership);
     }
 
     private onMyMembership = (room: Room, myMembership: string): void => {
@@ -650,7 +649,7 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
 
     private onRightPanelStoreUpdate = (): void => {
         this.setState({
-            showRightPanel: RightPanelStore.instance.isOpenForRoom(this.props.space.roomId),
+            showRightPanel: this.context.rightPanelStore.isOpenForRoom(this.props.space.roomId),
         });
     };
 
diff --git a/apps/web/src/components/structures/TabbedView.tsx b/apps/web/src/components/structures/TabbedView.tsx
index efffd49025..a48538e871 100644
--- a/apps/web/src/components/structures/TabbedView.tsx
+++ b/apps/web/src/components/structures/TabbedView.tsx
@@ -10,9 +10,9 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type JSX } from "react";
 import classNames from "classnames";
+import { AutoHideScrollbar } from "@element-hq/web-shared-components";
 
 import { _t } from "../../languageHandler";
-import AutoHideScrollbar from "./AutoHideScrollbar";
 import { PosthogScreenTracker, type ScreenName } from "../../PosthogTrackers";
 import { type NonEmptyArray } from "../../@types/common";
 import { RovingAccessibleButton, RovingTabIndexProvider } from "../../accessibility/RovingTabIndex";
@@ -74,7 +74,9 @@ function TabPanel<T extends string>({ tab }: ITabPanelProps<T>): JSX.Element {
             id={domIDForTabID(tab.id)}
             aria-labelledby={`${domIDForTabID(tab.id)}_label`}
         >
-            <AutoHideScrollbar className="mx_TabbedView_tabPanelContent">{tab.body}</AutoHideScrollbar>
+            <AutoHideScrollbar className="mx_AutoHideScrollbar mx_TabbedView_tabPanelContent">
+                {tab.body}
+            </AutoHideScrollbar>
         </div>
     );
 }
@@ -109,6 +111,7 @@ function TabLabel<T extends string>({ tab, isActive, showToolip, onClick }: ITab
             aria-controls={id}
             element="li"
             title={showToolip ? label : undefined}
+            aria-labelledby={`${id}_label`}
         >
             {tabIcon}
             <span className="mx_TabbedView_tabLabel_text" id={`${id}_label`}>
diff --git a/apps/web/src/components/structures/ThreadPanel.tsx b/apps/web/src/components/structures/ThreadPanel.tsx
index 61386574ea..c61d428b32 100644
--- a/apps/web/src/components/structures/ThreadPanel.tsx
+++ b/apps/web/src/components/structures/ThreadPanel.tsx
@@ -12,7 +12,7 @@ import { IconButton, Tooltip } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
 import { ThreadsIcon, CheckIcon, ChevronDownIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
-import { Icon as MarkAllThreadsReadIcon } from "../../../res/img/element-icons/check-all.svg";
+import MarkAllThreadsReadIcon from "../../../res/img/element-icons/check-all.svg?react";
 import BaseCard from "../views/right_panel/BaseCard";
 import type ResizeNotifier from "../../utils/ResizeNotifier";
 import MatrixClientContext, { useMatrixClientContext } from "../../contexts/MatrixClientContext";
@@ -39,8 +39,8 @@ interface IProps {
 }
 
 export enum ThreadFilterType {
-    "My",
-    "All",
+    My,
+    All,
 }
 
 type ThreadPanelHeaderOption = {
@@ -70,7 +70,7 @@ export const ThreadPanelHeader: React.FC<{
 }> = ({ filterOption, setFilterOption }) => {
     const mxClient = useMatrixClientContext();
     const roomContext = useScopedRoomContext("room");
-    const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu<HTMLElement>();
+    const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
     const options: readonly ThreadPanelHeaderOption[] = [
         {
             label: _t("threads|all_threads"),
diff --git a/apps/web/src/components/structures/ThreadView.tsx b/apps/web/src/components/structures/ThreadView.tsx
index 54727b95e2..65602518b8 100644
--- a/apps/web/src/components/structures/ThreadView.tsx
+++ b/apps/web/src/components/structures/ThreadView.tsx
@@ -29,7 +29,6 @@ import TimelinePanel from "./TimelinePanel";
 import dis from "../../dispatcher/dispatcher";
 import { type ActionPayload } from "../../dispatcher/payloads";
 import { Action } from "../../dispatcher/actions";
-import { MatrixClientPeg } from "../../MatrixClientPeg";
 import { type E2EStatus } from "../../utils/ShieldUtils";
 import EditorStateTransfer from "../../utils/EditorStateTransfer";
 import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext";
@@ -51,6 +50,7 @@ import { type ComposerInsertPayload, ComposerType } from "../../dispatcher/paylo
 import Heading from "../views/typography/Heading";
 import { type ThreadPayload } from "../../dispatcher/payloads/ThreadPayload";
 import { ScopedRoomContextProvider } from "../../contexts/ScopedRoomContext.tsx";
+import { RoomUploadContextProvider } from "../../viewmodels/room/RoomUploadViewModel.tsx";
 import { EventPresentationContextProvider } from "../../utils/EventPresentationContextProvider";
 
 interface IProps {
@@ -106,7 +106,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
         this.setupThreadListeners(this.state.thread);
 
         this.layoutWatcherRef = SettingsStore.watchSetting("layout", null, (...[, , , value]) =>
-            this.setState({ layout: value as Layout }),
+            this.setState({ layout: value! }),
         );
 
         if (this.state.thread) {
@@ -272,7 +272,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
         this.timelinePanel.current?.refreshTimeline(this.props.initialEvent?.getId());
     }
 
-    private setupThreadListeners(thread?: Thread | undefined, oldThread?: Thread | undefined): void {
+    private setupThreadListeners(thread?: Thread, oldThread?: Thread): void {
         if (oldThread) {
             this.state.thread?.off(ThreadEvent.NewReply, this.updateThreadRelation);
             this.props.room.off(RoomEvent.LocalEchoUpdated, this.updateThreadRelation);
@@ -329,22 +329,6 @@ export default class ThreadView extends React.Component<IProps, IState> {
         }
     };
 
-    private onFileDrop = (dataTransfer: DataTransfer): void => {
-        const roomId = this.props.mxEvent.getRoomId();
-        if (roomId) {
-            ContentMessages.sharedInstance().sendContentListToRoom(
-                Array.from(dataTransfer.files),
-                roomId,
-                this.threadRelation,
-                this.context.replyToEvent,
-                MatrixClientPeg.safeGet(),
-                TimelineRenderingType.Thread,
-            );
-        } else {
-            console.warn("Unknwon roomId for event", this.props.mxEvent);
-        }
-    };
-
     private get threadRelation(): IEventRelation {
         const relation: IEventRelation = {
             rel_type: THREAD_RELATION_TYPE.name,
@@ -393,7 +377,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
 
             timeline = (
                 <>
-                    <FileDropTarget parent={this.card.current} onFileDrop={this.onFileDrop} room={this.props.room} />
+                    <FileDropTarget parent={this.card.current} />
                     <EventPresentationContextProvider layout={layout}>
                         <TimelinePanel
                             key={this.state.thread.id}
@@ -437,38 +421,40 @@ export default class ThreadView extends React.Component<IProps, IState> {
                 liveTimeline={this.state?.thread?.timelineSet?.getLiveTimeline()}
                 narrow={this.state.narrow}
             >
-                <BaseCard
-                    className={classNames("mx_ThreadView mx_ThreadPanel", {
-                        mx_ThreadView_narrow: this.state.narrow,
-                    })}
-                    onClose={this.props.onClose}
-                    withoutScrollContainer={true}
-                    header={this.renderThreadViewHeader()}
-                    ref={this.card}
-                    onKeyDown={this.onKeyDown}
-                    onBack={(ev: ButtonEvent) => {
-                        PosthogTrackers.trackInteraction("WebThreadViewBackButton", ev);
-                    }}
-                >
-                    <Measured sensor={this.card} onMeasurement={this.onMeasurement} />
-                    <div className="mx_ThreadView_timelinePanelWrapper">{timeline}</div>
+                <RoomUploadContextProvider threadRelation={this.threadRelation}>
+                    <BaseCard
+                        className={classNames("mx_ThreadView mx_ThreadPanel", {
+                            mx_ThreadView_narrow: this.state.narrow,
+                        })}
+                        onClose={this.props.onClose}
+                        withoutScrollContainer={true}
+                        header={this.renderThreadViewHeader()}
+                        ref={this.card}
+                        onKeyDown={this.onKeyDown}
+                        onBack={(ev: ButtonEvent) => {
+                            PosthogTrackers.trackInteraction("WebThreadViewBackButton", ev);
+                        }}
+                    >
+                        <Measured breakpoint={400} sensor={this.card} onMeasurement={this.onMeasurement} />
+                        <div className="mx_ThreadView_timelinePanelWrapper">{timeline}</div>
 
-                    {ContentMessages.sharedInstance().getCurrentUploads(threadRelation).length > 0 && (
-                        <UploadBar room={this.props.room} relation={threadRelation} />
-                    )}
+                        {ContentMessages.sharedInstance().getCurrentUploads(threadRelation).length > 0 && (
+                            <UploadBar room={this.props.room} relation={threadRelation} />
+                        )}
 
-                    {this.state.thread?.timelineSet && (
-                        <MessageComposer
-                            room={this.props.room}
-                            resizeNotifier={this.props.resizeNotifier}
-                            relation={threadRelation}
-                            replyToEvent={this.state.replyToEvent}
-                            permalinkCreator={this.props.permalinkCreator}
-                            e2eStatus={this.props.e2eStatus}
-                            compact={true}
-                        />
-                    )}
-                </BaseCard>
+                        {this.state.thread?.timelineSet && (
+                            <MessageComposer
+                                room={this.props.room}
+                                resizeNotifier={this.props.resizeNotifier}
+                                relation={threadRelation}
+                                replyToEvent={this.state.replyToEvent}
+                                permalinkCreator={this.props.permalinkCreator}
+                                e2eStatus={this.props.e2eStatus}
+                                compact={true}
+                            />
+                        )}
+                    </BaseCard>
+                </RoomUploadContextProvider>
             </ScopedRoomContextProvider>
         );
     }
diff --git a/apps/web/src/components/structures/TimelinePanel.tsx b/apps/web/src/components/structures/TimelinePanel.tsx
index 939c16d96e..f05107d1ac 100644
--- a/apps/web/src/components/structures/TimelinePanel.tsx
+++ b/apps/web/src/components/structures/TimelinePanel.tsx
@@ -341,8 +341,12 @@ class TimelinePanel extends React.Component<IProps, IState> {
 
         const differentEventId = prevProps.eventId != this.props.eventId;
         const differentHighlightedEventId = prevProps.highlightedEventId != this.props.highlightedEventId;
-        const differentAvoidJump = prevProps.eventScrollIntoView && !this.props.eventScrollIntoView;
-        if (differentEventId || differentHighlightedEventId || differentAvoidJump) {
+        // Both directions matter. The flag is cleared once a jump has landed, so clicking the same
+        // permalink again flips it back to true and has to jump afresh. An unset prop means true,
+        // matching the default in loadTimeline.
+        const differentScrollIntoView =
+            (prevProps.eventScrollIntoView ?? true) !== (this.props.eventScrollIntoView ?? true);
+        if (differentEventId || differentHighlightedEventId || differentScrollIntoView) {
             logger.log(
                 `TimelinePanel switching to eventId ${this.props.eventId} (was ${prevProps.eventId}), ` +
                     `scrollIntoView: ${this.props.eventScrollIntoView} (was ${prevProps.eventScrollIntoView})`,
@@ -1532,6 +1536,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
                 description,
             });
             if (onFinished) {
+                // oxlint-disable-next-line promise/no-promise-in-callback
                 finished.then(onFinished);
             }
         };
@@ -1728,7 +1733,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
      *                                    have been sent by the server, not
      *                                    implicit ones generated by the JS
      *                                    SDK.
-     * @return {String} the event ID
+     * @returns {String} the event ID
      */
     private getCurrentReadReceipt(ignoreSynthesized = false): string | null {
         const client = MatrixClientPeg.get();
@@ -1886,7 +1891,7 @@ class TimelinePanel extends React.Component<IProps, IState> {
  * Iterate across all of the timelineSets and timelines inside to expose all of
  * the event IDs contained inside.
  *
- * @return An event ID list for every timeline in every timelineSet
+ * @returns An event ID list for every timeline in every timelineSet
  */
 function serializeEventIdsFromTimelineSets(timelineSets: EventTimelineSet[]): { [key: string]: string[] }[] {
     const serializedEventIdsInTimelineSet = timelineSets.map((timelineSet) => {
diff --git a/apps/web/src/components/structures/UploadBar.tsx b/apps/web/src/components/structures/UploadBar.tsx
index 4fbe35f3fd..b118e197a5 100644
--- a/apps/web/src/components/structures/UploadBar.tsx
+++ b/apps/web/src/components/structures/UploadBar.tsx
@@ -63,7 +63,7 @@ export default class UploadBar extends React.PureComponent<IProps, IState> {
 
     public componentWillUnmount(): void {
         this.unmounted = true;
-        dis.unregister(this.dispatcherRef!);
+        dis.unregister(this.dispatcherRef);
     }
 
     private getUploadsInRoom(): RoomUpload[] {
diff --git a/apps/web/src/components/structures/ViewSource.tsx b/apps/web/src/components/structures/ViewSource.tsx
index b2e003284b..cbb6ed4f4e 100644
--- a/apps/web/src/components/structures/ViewSource.tsx
+++ b/apps/web/src/components/structures/ViewSource.tsx
@@ -116,6 +116,7 @@ export default class ViewSource extends React.Component<IProps, IState> {
             return (
                 <MatrixClientContext.Consumer>
                     {(cli) => (
+                        // oxlint-disable-next-line react/jsx-no-constructed-context-values
                         <DevtoolsContext.Provider value={{ room: cli.getRoom(roomId)! }}>
                             <StateEventEditor onBack={this.onBack} mxEvent={mxEvent} />
                         </DevtoolsContext.Provider>
@@ -127,6 +128,7 @@ export default class ViewSource extends React.Component<IProps, IState> {
         return (
             <MatrixClientContext.Consumer>
                 {(cli) => (
+                    // oxlint-disable-next-line react/jsx-no-constructed-context-values
                     <DevtoolsContext.Provider value={{ room: cli.getRoom(roomId)! }}>
                         <TimelineEventEditor onBack={this.onBack} mxEvent={mxEvent} />
                     </DevtoolsContext.Provider>
@@ -170,7 +172,9 @@ export default class ViewSource extends React.Component<IProps, IState> {
                 {isEditing ? this.editSourceContent() : this.viewSourceContent()}
                 {!isEditing && canEdit && (
                     <div className="mx_Dialog_buttons">
-                        <button onClick={() => this.onEdit()}>{_t("action|edit")}</button>
+                        <button onClick={() => this.onEdit()} type="button">
+                            {_t("action|edit")}
+                        </button>
                     </div>
                 )}
             </BaseDialog>
diff --git a/apps/web/test/unit-tests/components/structures/__snapshots__/MatrixChat-test.tsx.snap b/apps/web/src/components/structures/__snapshots__/MatrixChat.test.tsx.snap
similarity index 76%
rename from apps/web/test/unit-tests/components/structures/__snapshots__/MatrixChat-test.tsx.snap
rename to apps/web/src/components/structures/__snapshots__/MatrixChat.test.tsx.snap
index 0cdb605a9c..80b2123a18 100644
--- a/apps/web/test/unit-tests/components/structures/__snapshots__/MatrixChat-test.tsx.snap
+++ b/apps/web/src/components/structures/__snapshots__/MatrixChat.test.tsx.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`<MatrixChat /> Multi-tab lockout shows the lockout page when a second tab opens after a session is restored 1`] = `
+exports[`<MatrixChat /> > Multi-tab lockout > shows the lockout page when a second tab opens > after a session is restored 1`] = `
 <div>
   <main
     class="mx_SessionLockStolenView mx_SplashPage"
@@ -15,7 +15,7 @@ exports[`<MatrixChat /> Multi-tab lockout shows the lockout page when a second t
 </div>
 `;
 
-exports[`<MatrixChat /> Multi-tab lockout shows the lockout page when a second tab opens during crypto init 1`] = `
+exports[`<MatrixChat /> > Multi-tab lockout > shows the lockout page when a second tab opens > during crypto init 1`] = `
 <body
   style="--emoji-font-family: Twemoji;"
 >
@@ -34,7 +34,7 @@ exports[`<MatrixChat /> Multi-tab lockout shows the lockout page when a second t
 </body>
 `;
 
-exports[`<MatrixChat /> Multi-tab lockout shows the lockout page when a second tab opens while we are checking the sync store 1`] = `
+exports[`<MatrixChat /> > Multi-tab lockout > shows the lockout page when a second tab opens > while we are checking the sync store 1`] = `
 <div>
   <main
     class="mx_SessionLockStolenView mx_SplashPage"
@@ -49,7 +49,7 @@ exports[`<MatrixChat /> Multi-tab lockout shows the lockout page when a second t
 </div>
 `;
 
-exports[`<MatrixChat /> Multi-tab lockout shows the lockout page when a second tab opens while we were waiting for the lock ourselves 1`] = `
+exports[`<MatrixChat /> > Multi-tab lockout > shows the lockout page when a second tab opens > while we were waiting for the lock ourselves 1`] = `
 <div>
   <main
     class="mx_SessionLockStolenView mx_SplashPage"
@@ -64,7 +64,7 @@ exports[`<MatrixChat /> Multi-tab lockout shows the lockout page when a second t
 </div>
 `;
 
-exports[`<MatrixChat /> Multi-tab lockout waits for other tab to stop during startup 1`] = `
+exports[`<MatrixChat /> > Multi-tab lockout > waits for other tab to stop during startup 1`] = `
 <div>
   <div
     class="mx_ConfirmSessionLockTheftView"
@@ -87,7 +87,7 @@ exports[`<MatrixChat /> Multi-tab lockout waits for other tab to stop during sta
 </div>
 `;
 
-exports[`<MatrixChat /> Multi-tab lockout waits for other tab to stop during startup 2`] = `
+exports[`<MatrixChat /> > Multi-tab lockout > waits for other tab to stop during startup 2`] = `
 <div>
   <div
     class="mx_MatrixChat_splash"
@@ -118,14 +118,15 @@ exports[`<MatrixChat /> Multi-tab lockout waits for other tab to stop during sta
 </div>
 `;
 
-exports[`<MatrixChat /> Multi-tab lockout waits for other tab to stop during startup 3`] = `
+exports[`<MatrixChat /> > Multi-tab lockout > waits for other tab to stop during startup 3`] = `
 <div>
   <div
     class="mx_AuthPage"
+    style="background: url("themes/element/img/backgrounds/lake.jpg") center center / cover fixed;"
   >
     <div
       class="mx_AuthPage_modal"
-      style="position: relative;"
+      style="position: relative; background: ;"
     >
       <main
         aria-live="polite"
@@ -269,7 +270,115 @@ exports[`<MatrixChat /> Multi-tab lockout waits for other tab to stop during sta
 </div>
 `;
 
-exports[`<MatrixChat /> should render spinner while app is loading 1`] = `
+exports[`<MatrixChat /> > qr login > should fire ViewQrLogin action on 'qr_login' route 1`] = `
+<div
+  aria-label="Sign in with QR code"
+  class=""
+  data-focus-lock-disabled="false"
+  role="dialog"
+  tabindex="-1"
+>
+  <div
+    class="mx_Dialog_header"
+  />
+  <div
+    class="mx_LoginWithQR"
+    data-testid="login-with-qr"
+  >
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="mx_LoginWithQR_spinner"
+      >
+        <div>
+          <div
+            class="mx_Spinner"
+          >
+            <svg
+              aria-label="Loading…"
+              class="_icon_1855a_18"
+              data-testid="spinner"
+              fill="currentColor"
+              height="1em"
+              role="progressbar"
+              style="width: 32px; height: 32px;"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    />
+  </div>
+</div>
+`;
+
+exports[`<MatrixChat /> > qr login > should open QrLoginDialog on ViewQrLogin action 1`] = `
+<div
+  aria-label="Sign in with QR code"
+  class=""
+  data-focus-lock-disabled="false"
+  role="dialog"
+  tabindex="-1"
+>
+  <div
+    class="mx_Dialog_header"
+  />
+  <div
+    class="mx_LoginWithQR"
+    data-testid="login-with-qr"
+  >
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="mx_LoginWithQR_spinner"
+      >
+        <div>
+          <div
+            class="mx_Spinner"
+          >
+            <svg
+              aria-label="Loading…"
+              class="_icon_1855a_18"
+              data-testid="spinner"
+              fill="currentColor"
+              height="1em"
+              role="progressbar"
+              style="width: 32px; height: 32px;"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    />
+  </div>
+</div>
+`;
+
+exports[`<MatrixChat /> > should render spinner while app is loading 1`] = `
 <div>
   <div
     class="mx_MatrixChat_splash"
@@ -300,18 +409,19 @@ exports[`<MatrixChat /> should render spinner while app is loading 1`] = `
 </div>
 `;
 
-exports[`<MatrixChat /> with a soft-logged-out session should show the soft-logout page 1`] = `
+exports[`<MatrixChat /> > with a soft-logged-out session > should show the soft-logout page 1`] = `
 <div>
   <div
     class="mx_AuthPage"
+    style="background: url("themes/element/img/backgrounds/lake.jpg") center center / cover fixed;"
   >
     <div
       class="mx_AuthPage_modal mx_AuthPage_modal_withBlur"
-      style="position: relative;"
+      style="position: relative; background: ;"
     >
       <div
         class="mx_AuthPage_modalBlur"
-        style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; filter: blur(40px);"
+        style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; filter: blur(40px); background: url("themes/element/img/backgrounds/lake.jpg") center center / cover fixed;"
       />
       <main
         aria-live="polite"
@@ -467,7 +577,7 @@ exports[`<MatrixChat /> with a soft-logged-out session should show the soft-logo
 </div>
 `;
 
-exports[`<MatrixChat /> with an existing session onAction() room actions leave_room for a room should launch a confirmation modal 1`] = `
+exports[`<MatrixChat /> > with an existing session > onAction() > room actions > leave_room > for a room > should launch a confirmation modal 1`] = `
 <div
   aria-describedby="mx_Dialog_content"
   aria-labelledby="mx_BaseDialog_title"
@@ -501,6 +611,7 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
       class="mx_Dialog_buttons_row"
     >
       <button
+        class="cancel"
         data-testid="dialog-cancel-button"
         type="button"
       >
@@ -516,6 +627,7 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
     </span>
   </div>
   <div
+    aria-describedby="react-use-id-1"
     aria-label="Close dialog"
     class="mx_AccessibleButton mx_Dialog_cancelButton"
     role="button"
@@ -536,7 +648,7 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
 </div>
 `;
 
-exports[`<MatrixChat /> with an existing session onAction() room actions leave_room for a space should launch a confirmation modal 1`] = `
+exports[`<MatrixChat /> > with an existing session > onAction() > room actions > leave_room > for a space > should launch a confirmation modal 1`] = `
 <div
   aria-describedby="mx_Dialog_content"
   aria-labelledby="mx_BaseDialog_title"
@@ -570,6 +682,7 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
       class="mx_Dialog_buttons_row"
     >
       <button
+        class="cancel"
         data-testid="dialog-cancel-button"
         type="button"
       >
@@ -585,6 +698,7 @@ exports[`<MatrixChat /> with an existing session onAction() room actions leave_r
     </span>
   </div>
   <div
+    aria-describedby="react-use-id-1"
     aria-label="Close dialog"
     class="mx_AccessibleButton mx_Dialog_cancelButton"
     role="button"
diff --git a/apps/web/test/unit-tests/components/structures/auth/CompleteSecurity-test.tsx b/apps/web/src/components/structures/auth/CompleteSecurity.test.tsx
similarity index 79%
rename from apps/web/test/unit-tests/components/structures/auth/CompleteSecurity-test.tsx
rename to apps/web/src/components/structures/auth/CompleteSecurity.test.tsx
index ac54b20644..156c4015bd 100644
--- a/apps/web/test/unit-tests/components/structures/auth/CompleteSecurity-test.tsx
+++ b/apps/web/src/components/structures/auth/CompleteSecurity.test.tsx
@@ -5,15 +5,17 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
-import { act, render, screen } from "jest-matrix-react";
-import { mocked } from "jest-mock";
-import EventEmitter from "events";
+// @vitest-environment happy-dom
 
-import CompleteSecurity from "../../../../../src/components/structures/auth/CompleteSecurity";
-import { stubClient } from "../../../../test-utils";
-import { Phase, SetupEncryptionStore } from "../../../../../src/stores/SetupEncryptionStore";
-import SdkConfig from "../../../../../src/SdkConfig";
+import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
+import React from "react";
+import { act, render, screen } from "test-utils-rtl";
+import EventEmitter from "node:events";
+import { stubClient } from "test-utils";
+
+import CompleteSecurity from "./CompleteSecurity";
+import { Phase, SetupEncryptionStore } from "../../../stores/SetupEncryptionStore";
+import SdkConfig from "../../../SdkConfig";
 
 class MockSetupEncryptionStore extends EventEmitter {
     public phase: Phase = Phase.Intro;
@@ -21,8 +23,8 @@ class MockSetupEncryptionStore extends EventEmitter {
         return false;
     }
 
-    public start: () => void = jest.fn();
-    public stop: () => void = jest.fn();
+    public start: () => void = vi.fn();
+    public stop: () => void = vi.fn();
 }
 
 describe("CompleteSecurity", () => {
@@ -35,16 +37,16 @@ describe("CompleteSecurity", () => {
         });
         const userIdToDevices = new Map();
         userIdToDevices.set("USER_ID", deviceIdToDevice);
-        mocked(client.getCrypto()!.getUserDeviceInfo).mockResolvedValue(userIdToDevices);
+        vi.mocked(client.getCrypto()!.getUserDeviceInfo).mockResolvedValue(userIdToDevices);
 
         const mockSetupEncryptionStore = new MockSetupEncryptionStore();
-        jest.spyOn(SetupEncryptionStore, "sharedInstance").mockReturnValue(
+        vi.spyOn(SetupEncryptionStore, "sharedInstance").mockReturnValue(
             mockSetupEncryptionStore as SetupEncryptionStore,
         );
     });
 
     afterEach(() => {
-        jest.restoreAllMocks();
+        vi.restoreAllMocks();
     });
 
     it("Renders with a cancel button by default", () => {
@@ -54,7 +56,7 @@ describe("CompleteSecurity", () => {
     });
 
     it("Renders with a cancel button if forceVerification false", () => {
-        jest.spyOn(SdkConfig, "get").mockImplementation((key: string) => {
+        vi.spyOn(SdkConfig, "get").mockImplementation((key: string) => {
             if (key === "forceVerification") {
                 return false;
             }
@@ -66,7 +68,7 @@ describe("CompleteSecurity", () => {
     });
 
     it("Renders without a cancel button if forceVerification true", () => {
-        jest.spyOn(SdkConfig, "get").mockImplementation((key: string) => {
+        vi.spyOn(SdkConfig, "get").mockImplementation((key: string) => {
             if (key === "force_verification") {
                 return true;
             }
@@ -80,7 +82,7 @@ describe("CompleteSecurity", () => {
     it("Renders a warning if user hits Reset", async () => {
         // Given a store and a dialog based on it
         const store = new SetupEncryptionStore();
-        jest.spyOn(SetupEncryptionStore, "sharedInstance").mockReturnValue(store);
+        vi.spyOn(SetupEncryptionStore, "sharedInstance").mockReturnValue(store);
         const panel = await act(() => render(<CompleteSecurity onFinished={() => {}} />));
 
         // No recovery methods are available, so only the "Can't confirm?" button should be visible
@@ -99,12 +101,12 @@ describe("CompleteSecurity", () => {
     it("Allows verifying with another device if one is available", async () => {
         // Given a store and a dialog based on it
         const store = new SetupEncryptionStore();
-        jest.spyOn(store, "fetchKeyInfo").mockImplementation(async () => {
+        vi.spyOn(store, "fetchKeyInfo").mockImplementation(async () => {
             store.hasDevicesToVerifyAgainst = true;
             store.phase = Phase.Intro;
             store.emit("update");
         });
-        jest.spyOn(SetupEncryptionStore, "sharedInstance").mockReturnValue(store);
+        vi.spyOn(SetupEncryptionStore, "sharedInstance").mockReturnValue(store);
         const panel = await act(() => render(<CompleteSecurity onFinished={() => {}} />));
 
         // The snapshot should have "Use another device" and "Can't confirm?"
@@ -124,12 +126,12 @@ describe("CompleteSecurity", () => {
     it("Allows verifying with recovery key if one is available", async () => {
         // Given a store and a dialog based on it
         const store = new SetupEncryptionStore();
-        jest.spyOn(store, "fetchKeyInfo").mockImplementation(async () => {
+        vi.spyOn(store, "fetchKeyInfo").mockImplementation(async () => {
             store.keyInfo = {} as any;
             store.phase = Phase.Intro;
             store.emit("update");
         });
-        jest.spyOn(SetupEncryptionStore, "sharedInstance").mockReturnValue(store);
+        vi.spyOn(SetupEncryptionStore, "sharedInstance").mockReturnValue(store);
         const panel = await act(() => render(<CompleteSecurity onFinished={() => {}} />));
 
         // The snapshot should have "Use recovery key" and "Can't confirm?"
diff --git a/apps/web/test/unit-tests/components/structures/auth/E2eSetup-test.tsx b/apps/web/src/components/structures/auth/E2eSetup.test.tsx
similarity index 52%
rename from apps/web/test/unit-tests/components/structures/auth/E2eSetup-test.tsx
rename to apps/web/src/components/structures/auth/E2eSetup.test.tsx
index 4e52a7f7ac..5d98fc3254 100644
--- a/apps/web/test/unit-tests/components/structures/auth/E2eSetup-test.tsx
+++ b/apps/web/src/components/structures/auth/E2eSetup.test.tsx
@@ -5,28 +5,30 @@ 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.
 */
 
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, afterEach } from "vitest";
 import React from "react";
-import { render } from "jest-matrix-react";
-import { mocked } from "jest-mock";
+import { render } from "test-utils-rtl";
 
-import E2eSetup from "../../../../../src/components/structures/auth/E2eSetup.tsx";
-import { InitialCryptoSetupStore } from "../../../../../src/stores/InitialCryptoSetupStore.ts";
+import E2eSetup from "./E2eSetup.tsx";
+import { InitialCryptoSetupStore } from "../../../stores/InitialCryptoSetupStore.ts";
 
-afterEach(() => jest.restoreAllMocks());
+afterEach(() => vi.restoreAllMocks());
 
 describe("LeftPanel", () => {
     it("should call `onCancelled` when the user clicks the cancel button", () => {
         const mockInitialCryptoSetupStore = {
-            getStatus: jest.fn(),
-            on: jest.fn(),
-            off: jest.fn(),
+            getStatus: vi.fn(),
+            on: vi.fn(),
+            off: vi.fn(),
         };
-        jest.spyOn(InitialCryptoSetupStore, "sharedInstance").mockReturnValue(mockInitialCryptoSetupStore as any);
+        vi.spyOn(InitialCryptoSetupStore, "sharedInstance").mockReturnValue(mockInitialCryptoSetupStore as any);
 
         // We need the setup process to have failed, for the dialog to present a cancel button.
-        mocked(mockInitialCryptoSetupStore.getStatus).mockReturnValue("error");
+        vi.mocked(mockInitialCryptoSetupStore.getStatus).mockReturnValue("error");
 
-        const onCancelled = jest.fn();
+        const onCancelled = vi.fn();
         const { getByRole } = render(<E2eSetup onCancelled={onCancelled} />);
 
         getByRole("button", { name: "Cancel" }).click();
diff --git a/apps/web/test/unit-tests/components/structures/auth/ForgotPassword-test.tsx b/apps/web/src/components/structures/auth/ForgotPassword.test.tsx
similarity index 88%
rename from apps/web/test/unit-tests/components/structures/auth/ForgotPassword-test.tsx
rename to apps/web/src/components/structures/auth/ForgotPassword.test.tsx
index 9e08a644da..cd03e4e910 100644
--- a/apps/web/test/unit-tests/components/structures/auth/ForgotPassword-test.tsx
+++ b/apps/web/src/components/structures/auth/ForgotPassword.test.tsx
@@ -6,20 +6,22 @@ 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.
 */
 
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
 import React from "react";
-import { mocked } from "jest-mock";
-import { render, type RenderResult, screen, waitFor, cleanup } from "jest-matrix-react";
+import { render, type RenderResult, screen, waitFor, cleanup } from "test-utils-rtl";
 import userEvent from "@testing-library/user-event";
 import { type MatrixClient, createClient } from "matrix-js-sdk/src/matrix";
+import { clearAllModals, filterConsole, stubClient, waitEnoughCyclesForModal } from "test-utils";
 
-import ForgotPassword from "../../../../../src/components/structures/auth/ForgotPassword";
-import { type ValidatedServerConfig } from "../../../../../src/utils/ValidatedServerConfig";
-import { clearAllModals, filterConsole, stubClient, waitEnoughCyclesForModal } from "../../../../test-utils";
-import AutoDiscoveryUtils from "../../../../../src/utils/AutoDiscoveryUtils";
+import ForgotPassword from "./ForgotPassword";
+import { type ValidatedServerConfig } from "../../../utils/ValidatedServerConfig";
+import AutoDiscoveryUtils from "../../../utils/AutoDiscoveryUtils";
 
-jest.mock("matrix-js-sdk/src/matrix", () => ({
-    ...jest.requireActual("matrix-js-sdk/src/matrix"),
-    createClient: jest.fn(),
+vi.mock("matrix-js-sdk/src/matrix", async () => ({
+    ...(await vi.importActual("matrix-js-sdk/src/matrix")),
+    createClient: vi.fn(),
 }));
 
 describe("<ForgotPassword>", () => {
@@ -54,15 +56,15 @@ describe("<ForgotPassword>", () => {
 
     beforeEach(() => {
         client = stubClient();
-        mocked(createClient).mockReturnValue(client);
+        vi.mocked(createClient).mockReturnValue(client);
 
         serverConfig = { hsName: "example.com" } as ValidatedServerConfig;
 
-        onComplete = jest.fn();
-        onLoginClick = jest.fn();
+        onComplete = vi.fn();
+        onLoginClick = vi.fn();
 
-        jest.spyOn(AutoDiscoveryUtils, "validateServerConfigWithStaticUrls").mockResolvedValue(serverConfig);
-        jest.spyOn(AutoDiscoveryUtils, "authComponentStateForError");
+        vi.spyOn(AutoDiscoveryUtils, "validateServerConfigWithStaticUrls").mockResolvedValue(serverConfig);
+        vi.spyOn(AutoDiscoveryUtils, "authComponentStateForError");
     });
 
     afterEach(async () => {
@@ -120,9 +122,9 @@ describe("<ForgotPassword>", () => {
 
         describe("and submitting an unknown email", () => {
             beforeEach(async () => {
-                mocked(AutoDiscoveryUtils.validateServerConfigWithStaticUrls).mockResolvedValue(serverConfig);
+                vi.mocked(AutoDiscoveryUtils.validateServerConfigWithStaticUrls).mockResolvedValue(serverConfig);
                 await typeIntoField("Email address", testEmail);
-                mocked(client).requestPasswordEmailToken.mockRejectedValue({
+                vi.mocked(client).requestPasswordEmailToken.mockRejectedValue({
                     errcode: "M_THREEPID_NOT_FOUND",
                 });
                 await click(screen.getByText("Send email"));
@@ -136,7 +138,7 @@ describe("<ForgotPassword>", () => {
         describe("and a connection error occurs", () => {
             beforeEach(async () => {
                 await typeIntoField("Email address", testEmail);
-                mocked(client).requestPasswordEmailToken.mockRejectedValue({
+                vi.mocked(client).requestPasswordEmailToken.mockRejectedValue({
                     name: "ConnectionError",
                 });
                 await click(screen.getByText("Send email"));
@@ -154,8 +156,8 @@ describe("<ForgotPassword>", () => {
         describe("and the server liveness check fails", () => {
             beforeEach(async () => {
                 await typeIntoField("Email address", testEmail);
-                mocked(AutoDiscoveryUtils.validateServerConfigWithStaticUrls).mockRejectedValue({});
-                mocked(AutoDiscoveryUtils.authComponentStateForError).mockReturnValue({
+                vi.mocked(AutoDiscoveryUtils.validateServerConfigWithStaticUrls).mockRejectedValue({});
+                vi.mocked(AutoDiscoveryUtils.authComponentStateForError).mockReturnValue({
                     serverErrorIsFatal: true,
                     serverIsAlive: false,
                     serverDeadError: "server down",
@@ -171,7 +173,7 @@ describe("<ForgotPassword>", () => {
         describe("and submitting an known email", () => {
             beforeEach(async () => {
                 await typeIntoField("Email address", testEmail);
-                mocked(client).requestPasswordEmailToken.mockResolvedValue({
+                vi.mocked(client).requestPasswordEmailToken.mockResolvedValue({
                     sid: testSid,
                 });
                 await click(screen.getByText("Send email"));
@@ -238,14 +240,14 @@ describe("<ForgotPassword>", () => {
 
                 describe("and entering a new password", () => {
                     beforeEach(async () => {
-                        mocked(client.setPassword).mockRejectedValue({ httpStatus: 401 });
+                        vi.mocked(client.setPassword).mockRejectedValue({ httpStatus: 401 });
                         await typeIntoField("New Password", testPassword);
                         await typeIntoField("Confirm new password", testPassword);
                     });
 
                     describe("and submitting it running into rate limiting", () => {
                         beforeEach(async () => {
-                            mocked(client.setPassword).mockRejectedValue({
+                            vi.mocked(client.setPassword).mockRejectedValue({
                                 message: "rate limit reached",
                                 httpStatus: 429,
                                 data: {
@@ -265,7 +267,7 @@ describe("<ForgotPassword>", () => {
                     describe("and confirm the email link and submitting the new password", () => {
                         beforeEach(async () => {
                             // fake link confirmed by resolving client.setPassword instead of raising an error
-                            mocked(client.setPassword).mockResolvedValue({});
+                            vi.mocked(client.setPassword).mockResolvedValue({});
                             await click(screen.getByText("Reset password"));
                         });
 
@@ -314,9 +316,7 @@ describe("<ForgotPassword>", () => {
                         describe("and dismissing the dialog by clicking the background", () => {
                             beforeEach(async () => {
                                 await userEvent.click(await screen.findByTestId("dialog-background"), { delay: null });
-                                await waitEnoughCyclesForModal({
-                                    useFakeTimers: true,
-                                });
+                                await waitEnoughCyclesForModal();
                             });
 
                             itShouldCloseTheDialogAndShowThePasswordInput();
@@ -325,9 +325,7 @@ describe("<ForgotPassword>", () => {
                         describe("and dismissing the dialog", () => {
                             beforeEach(async () => {
                                 await click(await screen.findByLabelText("Close dialog"));
-                                await waitEnoughCyclesForModal({
-                                    useFakeTimers: true,
-                                });
+                                await waitEnoughCyclesForModal();
                             });
 
                             itShouldCloseTheDialogAndShowThePasswordInput();
@@ -336,9 +334,7 @@ describe("<ForgotPassword>", () => {
                         describe("and clicking »Re-enter email address«", () => {
                             beforeEach(async () => {
                                 await click(await screen.findByText("Re-enter email address"));
-                                await waitEnoughCyclesForModal({
-                                    useFakeTimers: true,
-                                });
+                                await waitEnoughCyclesForModal();
                             });
 
                             it("should close the dialog and go back to the email input", async () => {
@@ -352,7 +348,7 @@ describe("<ForgotPassword>", () => {
 
                     describe("and validating the link from the mail", () => {
                         beforeEach(async () => {
-                            mocked(client.setPassword).mockResolvedValue({});
+                            vi.mocked(client.setPassword).mockResolvedValue({});
                             await click(screen.getByText("Reset password"));
                             // flush promises for the modal to disappear
                             await waitEnoughCyclesForModal();
diff --git a/apps/web/src/components/structures/auth/ForgotPassword.tsx b/apps/web/src/components/structures/auth/ForgotPassword.tsx
index b8a1ead479..e6de8edb8b 100644
--- a/apps/web/src/components/structures/auth/ForgotPassword.tsx
+++ b/apps/web/src/components/structures/auth/ForgotPassword.tsx
@@ -339,7 +339,7 @@ export default class ForgotPassword extends React.Component<Props, State> {
                 homeserver={this.props.serverConfig.hsName}
                 loading={this.state.phase === Phase.SendingEmail}
                 onInputChanged={this.onInputChanged}
-                onLoginClick={this.props.onLoginClick!} // set by default props
+                onLoginClick={this.props.onLoginClick} // set by default props
                 onSubmitForm={this.onSubmitForm}
             />
         );
diff --git a/apps/web/test/unit-tests/components/structures/auth/Login-test.tsx b/apps/web/src/components/structures/auth/Login.test.tsx
similarity index 88%
rename from apps/web/test/unit-tests/components/structures/auth/Login-test.tsx
rename to apps/web/src/components/structures/auth/Login.test.tsx
index 9c822e61a2..3826c9ffe7 100644
--- a/apps/web/test/unit-tests/components/structures/auth/Login-test.tsx
+++ b/apps/web/src/components/structures/auth/Login.test.tsx
@@ -5,26 +5,32 @@ 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.
 */
 
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach, afterEach, type MockedObject } from "vitest";
 import React from "react";
-import { fireEvent, render, screen, waitForElementToBeRemoved } from "jest-matrix-react";
-import { mocked, type MockedObject } from "jest-mock";
-import fetchMock from "@fetch-mock/jest";
-import { DELEGATED_OIDC_COMPATIBILITY, IdentityProviderBrand, type OidcClientConfig } from "matrix-js-sdk/src/matrix";
+import { fireEvent, render, screen, waitForElementToBeRemoved } from "test-utils-rtl";
+import fetchMock from "@fetch-mock/vitest";
+import {
+    OAUTH_AWARE_PREFERRED_FLOW_FIELD,
+    IdentityProviderBrand,
+    type ValidatedAuthMetadata,
+    OAuth2Error,
+} from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 import * as Matrix from "matrix-js-sdk/src/matrix";
-import { OidcError } from "matrix-js-sdk/src/oidc/error";
+import { mkServerConfig, mockPlatformPeg, unmockPlatformPeg } from "test-utils";
+import { makeDelegatedAuthMetadata } from "test-utils/auth";
 
-import SdkConfig from "../../../../../src/SdkConfig";
-import { mkServerConfig, mockPlatformPeg, unmockPlatformPeg } from "../../../../test-utils";
-import Login from "../../../../../src/components/structures/auth/Login";
-import type BasePlatform from "../../../../../src/BasePlatform";
-import * as registerClientUtils from "../../../../../src/utils/oidc/registerClient";
-import { makeDelegatedAuthConfig } from "../../../../test-utils/oidc";
-import { ModuleApi } from "../../../../../src/modules/Api.ts";
+import SdkConfig from "../../../SdkConfig";
+import Login from "./Login";
+import type BasePlatform from "../../../BasePlatform";
+import * as registerClientUtils from "../../../utils/oauth/registerClient";
+import { ModuleApi } from "../../../modules/Api.ts";
 
-jest.useRealTimers();
+vi.useRealTimers();
 
-const oidcStaticClientsConfig = {
+const oauthStaticClientsConfig = {
     "https://staticallyregisteredissuer.org/": {
         client_id: "static-clientId-123",
     },
@@ -33,16 +39,16 @@ const oidcStaticClientsConfig = {
 describe("Login", function () {
     let platform: MockedObject<BasePlatform>;
 
-    const mockClient = mocked({
-        login: jest.fn().mockResolvedValue({}),
-        loginFlows: jest.fn(),
+    const mockClient = vi.mocked({
+        login: vi.fn().mockResolvedValue({}),
+        loginFlows: vi.fn(),
     } as unknown as Matrix.MatrixClient);
 
     beforeEach(function () {
         SdkConfig.put({
             brand: "test-brand",
             disable_custom_urls: true,
-            oidc_static_clients: oidcStaticClientsConfig,
+            oidc_static_clients: oauthStaticClientsConfig,
         });
         mockClient.login.mockClear().mockResolvedValue({
             access_token: "TOKEN",
@@ -50,7 +56,7 @@ describe("Login", function () {
             user_id: "@user:server",
         });
         mockClient.loginFlows.mockClear().mockResolvedValue({ flows: [{ type: "m.login.password" }] });
-        jest.spyOn(Matrix, "createClient").mockImplementation((opts) => {
+        vi.spyOn(Matrix, "createClient").mockImplementation((opts) => {
             mockClient.idBaseUrl = opts.idBaseUrl;
             mockClient.baseUrl = opts.baseUrl;
             return mockClient;
@@ -60,7 +66,7 @@ describe("Login", function () {
             versions: ["v1.1"],
         });
         platform = mockPlatformPeg({
-            startSingleSignOn: jest.fn(),
+            startSingleSignOn: vi.fn(),
         });
     });
 
@@ -72,7 +78,7 @@ describe("Login", function () {
     function getRawComponent(
         hsUrl = "https://matrix.org",
         isUrl = "https://vector.im",
-        delegatedAuthentication?: OidcClientConfig,
+        delegatedAuthentication?: ValidatedAuthMetadata,
     ) {
         return (
             <Login
@@ -84,7 +90,7 @@ describe("Login", function () {
         );
     }
 
-    function getComponent(hsUrl?: string, isUrl?: string, delegatedAuthentication?: OidcClientConfig) {
+    function getComponent(hsUrl?: string, isUrl?: string, delegatedAuthentication?: ValidatedAuthMetadata) {
         return render(getRawComponent(hsUrl, isUrl, delegatedAuthentication));
     }
 
@@ -102,7 +108,7 @@ describe("Login", function () {
     });
 
     it("should show register button", async () => {
-        const onRegisterClick = jest.fn();
+        const onRegisterClick = vi.fn();
         const { getByText } = render(
             <Login
                 serverConfig={mkServerConfig("https://matrix.org", "https://vector.im")}
@@ -269,7 +275,7 @@ describe("Login", function () {
             flows: [
                 {
                     type: "m.login.sso",
-                    [DELEGATED_OIDC_COMPATIBILITY.name]: true,
+                    [OAUTH_AWARE_PREFERRED_FLOW_FIELD.name]: true,
                 },
                 {
                     type: "m.login.password",
@@ -316,8 +322,7 @@ describe("Login", function () {
 
         for (const idp of idpsWithIcons) {
             const ssoButton = getByTestId(`idp-${idp.id}`);
-            expect(ssoButton).toBeTruthy();
-            expect(ssoButton.childNodes[0]).toHaveAccessibleName(idp.brand);
+            expect(ssoButton).toHaveAccessibleName(`Continue with Provider ${idp.brand}`);
         }
 
         const ssoButtons = container.querySelectorAll(".mx_SSOButton");
@@ -393,18 +398,18 @@ describe("Login", function () {
         const hsUrl = "https://matrix.org";
         const isUrl = "https://vector.im";
         const issuer = "https://test.com/";
-        const delegatedAuth = makeDelegatedAuthConfig(issuer);
+        const delegatedAuth = makeDelegatedAuthMetadata(issuer);
         beforeEach(() => {
-            jest.spyOn(logger, "error");
+            vi.spyOn(logger, "error");
         });
 
         afterEach(() => {
-            jest.spyOn(logger, "error").mockRestore();
+            vi.spyOn(logger, "error").mockRestore();
         });
 
-        it("should attempt to register oidc client", async () => {
+        it("should attempt to register oauth client", async () => {
             // dont mock, spy so we can check config values were correctly passed
-            jest.spyOn(registerClientUtils, "getOidcClientId");
+            vi.spyOn(registerClientUtils, "getOAuthClientId");
             fetchMock.post(delegatedAuth.registration_endpoint!, { status: 500 });
             getComponent(hsUrl, isUrl, delegatedAuth);
 
@@ -413,7 +418,7 @@ describe("Login", function () {
             // tried to register
             expect(fetchMock).toHaveFetched(delegatedAuth.registration_endpoint);
             // called with values from config
-            expect(registerClientUtils.getOidcClientId).toHaveBeenCalledWith(delegatedAuth, oidcStaticClientsConfig);
+            expect(registerClientUtils.getOAuthClientId).toHaveBeenCalledWith(delegatedAuth, oauthStaticClientsConfig);
         });
 
         it("should fallback to normal login when client registration fails", async () => {
@@ -425,8 +430,8 @@ describe("Login", function () {
             // tried to register
             expect(fetchMock).toHaveFetched(delegatedAuth.registration_endpoint);
             expect(logger.error).toHaveBeenCalledWith(
-                "Failed to get oidc native flow",
-                new Error(OidcError.DynamicRegistrationFailed),
+                "Failed to get OAuth2 native flow",
+                new Error(OAuth2Error.DynamicRegistrationFailed),
             );
 
             // continued with normal setup
@@ -436,7 +441,7 @@ describe("Login", function () {
         });
 
         // short term during active development, UI will be added in next PRs
-        it("should show continue button when oidc native flow is correctly configured", async () => {
+        it("should show continue button when oauth native flow is correctly configured", async () => {
             fetchMock.post(delegatedAuth.registration_endpoint!, { client_id: "abc123" });
             getComponent(hsUrl, isUrl, delegatedAuth);
 
diff --git a/apps/web/src/components/structures/auth/Login.tsx b/apps/web/src/components/structures/auth/Login.tsx
index dca3b30ee0..36634dea90 100644
--- a/apps/web/src/components/structures/auth/Login.tsx
+++ b/apps/web/src/components/structures/auth/Login.tsx
@@ -13,14 +13,14 @@ import { type SSOFlow, SSOAction } from "matrix-js-sdk/src/matrix";
 import { Button } from "@vector-im/compound-web";
 
 import { _t, UserFriendlyError } from "../../../languageHandler";
-import Login, { type ClientLoginFlow, type OidcNativeFlow } from "../../../Login";
+import Login, { type ClientLoginFlow, type OAuthNativeFlow } from "../../../Login";
 import { messageForConnectionError, messageForLoginError } from "../../../utils/ErrorUtils";
 import AutoDiscoveryUtils from "../../../utils/AutoDiscoveryUtils";
 import AuthPage from "../../views/auth/AuthPage";
 import PlatformPeg from "../../../PlatformPeg";
 import SettingsStore from "../../../settings/SettingsStore";
 import { UIFeature } from "../../../settings/UIFeature";
-import { type IMatrixClientCreds } from "../../../MatrixClientPeg";
+import { type IMatrixClientCreds } from "../../../utils/createMatrixClient";
 import PasswordLogin from "../../views/auth/PasswordLogin";
 import InlineSpinner from "../../views/elements/InlineSpinner";
 import Spinner from "../../views/elements/Spinner";
@@ -31,7 +31,7 @@ import AuthHeader from "../../views/auth/AuthHeader";
 import AccessibleButton, { type ButtonEvent } from "../../views/elements/AccessibleButton";
 import { type ValidatedServerConfig } from "../../../utils/ValidatedServerConfig";
 import { filterBoolean } from "../../../utils/arrays";
-import { startOidcLogin } from "../../../utils/oidc/authorize";
+import { startOAuthLogin } from "../../../utils/oauth/authorize";
 import { ModuleApi } from "../../../modules/Api.ts";
 
 interface IProps {
@@ -118,11 +118,9 @@ class LoginComponent extends React.PureComponent<IProps, IState> {
             "m.login.password": this.renderPasswordStep,
 
             // CAS and SSO are the same thing, modulo the url we link to
-            // eslint-disable-next-line @typescript-eslint/naming-convention
             "m.login.cas": () => this.renderSsoStep("cas"),
-            // eslint-disable-next-line @typescript-eslint/naming-convention
             "m.login.sso": () => this.renderSsoStep("sso"),
-            "oidcNativeFlow": () => this.renderOidcNativeStep(),
+            "oauthNativeFlow": () => this.renderOAuth2Step(),
         };
     }
 
@@ -402,7 +400,7 @@ class LoginComponent extends React.PureComponent<IProps, IState> {
         if (!this.state.flows) return null;
 
         // this is the ideal order we want to show the flows in
-        const order = ["oidcNativeFlow", "m.login.password", "m.login.sso"];
+        const order = ["oauthNativeFlow", "m.login.password", "m.login.sso"];
 
         const flows = filterBoolean(order.map((type) => this.state.flows?.find((flow) => flow.type === type)));
         return (
@@ -428,22 +426,21 @@ class LoginComponent extends React.PureComponent<IProps, IState> {
                 onPhoneNumberChanged={this.onPhoneNumberChanged}
                 onForgotPasswordClick={this.props.onForgotPasswordClick}
                 loginIncorrect={this.state.loginIncorrect}
-                serverConfig={this.props.serverConfig}
                 disableSubmit={this.isBusy()}
                 busy={this.props.isSyncing || this.state.busyLoggingIn}
             />
         );
     };
 
-    private renderOidcNativeStep = (): React.ReactNode => {
-        const flow = this.state.flows!.find((flow) => flow.type === "oidcNativeFlow")! as OidcNativeFlow;
+    private renderOAuth2Step = (): React.ReactNode => {
+        const flow = this.state.flows!.find((flow) => flow.type === "oauthNativeFlow")! as OAuthNativeFlow;
         return (
             <Button
                 className="mx_Login_fullWidthButton"
                 kind="primary"
                 size="md"
                 onClick={async () => {
-                    await startOidcLogin(
+                    await startOAuthLogin(
                         this.props.serverConfig.delegatedAuthentication!,
                         flow.clientId,
                         this.props.serverConfig.hsUrl,
@@ -502,7 +499,7 @@ class LoginComponent extends React.PureComponent<IProps, IState> {
             footer = (
                 <div className="mx_AuthBody_paddedFooter">
                     <div className="mx_AuthBody_paddedFooter_title">
-                        <InlineSpinner w={20} h={20} />
+                        <InlineSpinner size={20} />
                         {this.props.isSyncing ? _t("auth|syncing") : _t("auth|signing_in")}
                     </div>
                     {this.props.isSyncing && (
diff --git a/apps/web/test/unit-tests/components/structures/auth/LoginSplashView-test.tsx b/apps/web/src/components/structures/auth/LoginSplashView.test.tsx
similarity index 88%
rename from apps/web/test/unit-tests/components/structures/auth/LoginSplashView-test.tsx
rename to apps/web/src/components/structures/auth/LoginSplashView.test.tsx
index c2eed442c5..870233371a 100644
--- a/apps/web/test/unit-tests/components/structures/auth/LoginSplashView-test.tsx
+++ b/apps/web/src/components/structures/auth/LoginSplashView.test.tsx
@@ -6,13 +6,16 @@ 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 { act, render, type RenderResult } from "jest-matrix-react";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach } from "vitest";
+import { act, render, type RenderResult } from "test-utils-rtl";
 import React, { type ComponentProps } from "react";
-import EventEmitter from "events";
+import EventEmitter from "node:events";
 import { CryptoEvent } from "matrix-js-sdk/src/crypto-api";
 import { sleep } from "matrix-js-sdk/src/utils";
 
-import { LoginSplashView } from "../../../../../src/components/structures/auth/LoginSplashView";
+import { LoginSplashView } from "./LoginSplashView";
 import type { MatrixClient } from "matrix-js-sdk/src/matrix";
 
 describe("<LoginSplashView />", () => {
@@ -42,7 +45,7 @@ describe("<LoginSplashView />", () => {
     });
 
     it("Calls onLogoutClick", () => {
-        const onLogoutClick = jest.fn();
+        const onLogoutClick = vi.fn();
         const rendered = getComponent({ onLogoutClick });
         expect(onLogoutClick).not.toHaveBeenCalled();
         rendered.getByRole("button", { name: "Logout" }).click();
diff --git a/apps/web/test/unit-tests/components/structures/auth/Registration-test.tsx b/apps/web/src/components/structures/auth/Registration.test.tsx
similarity index 64%
rename from apps/web/test/unit-tests/components/structures/auth/Registration-test.tsx
rename to apps/web/src/components/structures/auth/Registration.test.tsx
index 20c6de1619..9a3ddbae98 100644
--- a/apps/web/test/unit-tests/components/structures/auth/Registration-test.tsx
+++ b/apps/web/src/components/structures/auth/Registration.test.tsx
@@ -7,30 +7,27 @@ 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.
 */
 
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach, afterEach, type MockedObject } from "vitest";
 import React from "react";
-import { fireEvent, render, screen, waitFor, waitForElementToBeRemoved } from "jest-matrix-react";
-import { createClient, type MatrixClient, MatrixError, type OidcClientConfig } from "matrix-js-sdk/src/matrix";
-import { mocked, type MockedObject } from "jest-mock";
-import fetchMock from "@fetch-mock/jest";
+import { fireEvent, render, screen, waitFor, waitForElementToBeRemoved } from "test-utils-rtl";
+import { createClient, type MatrixClient, MatrixError, type ValidatedAuthMetadata } from "matrix-js-sdk/src/matrix";
+import fetchMock from "@fetch-mock/vitest";
+import { getMockClientWithEventEmitter, mkServerConfig, mockPlatformPeg, unmockPlatformPeg } from "test-utils";
+import { makeDelegatedAuthMetadata } from "test-utils/auth";
 
-import SdkConfig, { DEFAULTS } from "../../../../../src/SdkConfig";
-import {
-    getMockClientWithEventEmitter,
-    mkServerConfig,
-    mockPlatformPeg,
-    unmockPlatformPeg,
-} from "../../../../test-utils";
-import Registration from "../../../../../src/components/structures/auth/Registration";
-import { makeDelegatedAuthConfig } from "../../../../test-utils/oidc";
-import { startOidcLogin } from "../../../../../src/utils/oidc/authorize";
+import SdkConfig, { DEFAULTS } from "../../../SdkConfig";
+import Registration from "./Registration";
+import { startOAuthLogin } from "../../../utils/oauth/authorize";
 
-jest.mock("../../../../../src/utils/oidc/authorize", () => ({
-    startOidcLogin: jest.fn(),
+vi.mock("../../../utils/oauth/authorize", () => ({
+    startOAuthLogin: vi.fn(),
 }));
 
-jest.mock("matrix-js-sdk/src/matrix", () => ({
-    ...jest.requireActual("matrix-js-sdk/src/matrix"),
-    createClient: jest.fn(),
+vi.mock("matrix-js-sdk/src/matrix", async () => ({
+    ...(await vi.importActual("matrix-js-sdk/src/matrix")),
+    createClient: vi.fn(),
 }));
 
 /** The matrix versions our mock server claims to support */
@@ -45,9 +42,9 @@ describe("Registration", function () {
             disable_custom_urls: true,
         });
         mockClient = getMockClientWithEventEmitter({
-            registerRequest: jest.fn(),
-            loginFlows: jest.fn(),
-            getVersions: jest.fn().mockResolvedValue({ versions: SERVER_SUPPORTED_MATRIX_VERSIONS }),
+            registerRequest: vi.fn(),
+            loginFlows: vi.fn(),
+            getVersions: vi.fn().mockResolvedValue({ versions: SERVER_SUPPORTED_MATRIX_VERSIONS }),
         });
         mockClient.registerRequest.mockRejectedValueOnce(
             new MatrixError(
@@ -58,7 +55,7 @@ describe("Registration", function () {
             ),
         );
         mockClient.loginFlows.mockResolvedValue({ flows: [{ type: "m.login.password" }] });
-        mocked(createClient).mockImplementation((opts) => {
+        vi.mocked(createClient).mockImplementation((opts) => {
             mockClient.idBaseUrl = opts.idBaseUrl;
             mockClient.baseUrl = opts.baseUrl;
             return mockClient;
@@ -69,21 +66,21 @@ describe("Registration", function () {
             versions: SERVER_SUPPORTED_MATRIX_VERSIONS,
         });
         mockPlatformPeg({
-            startSingleSignOn: jest.fn(),
+            startSingleSignOn: vi.fn(),
         });
     });
 
     afterEach(function () {
-        jest.restoreAllMocks();
+        vi.restoreAllMocks();
         SdkConfig.reset(); // we touch the config, so clean up
         unmockPlatformPeg();
     });
 
     const defaultProps = {
         defaultDeviceDisplayName: "test-device-display-name",
-        onLoggedIn: jest.fn(),
-        onLoginClick: jest.fn(),
-        onServerConfigChange: jest.fn(),
+        onLoggedIn: vi.fn(),
+        onLoginClick: vi.fn(),
+        onServerConfigChange: vi.fn(),
     };
 
     const defaultHsUrl = "https://matrix.org";
@@ -92,7 +89,7 @@ describe("Registration", function () {
     function getRawComponent(
         hsUrl = defaultHsUrl,
         isUrl = defaultIsUrl,
-        authConfig?: OidcClientConfig,
+        authConfig?: ValidatedAuthMetadata,
         mobileRegister?: boolean,
     ) {
         return (
@@ -104,7 +101,12 @@ describe("Registration", function () {
         );
     }
 
-    function getComponent(hsUrl?: string, isUrl?: string, authConfig?: OidcClientConfig, mobileRegister?: boolean) {
+    function getComponent(
+        hsUrl?: string,
+        isUrl?: string,
+        authConfig?: ValidatedAuthMetadata,
+        mobileRegister?: boolean,
+    ) {
         return render(getRawComponent(hsUrl, isUrl, authConfig, mobileRegister));
     }
 
@@ -128,6 +130,57 @@ describe("Registration", function () {
         expect(ssoButton).toBeTruthy();
     });
 
+    it("should show a rate limit message when the server is rate limiting registration", async () => {
+        mockClient.registerRequest
+            .mockReset()
+            .mockRejectedValue(new MatrixError({ errcode: "M_LIMIT_EXCEEDED", retry_after_ms: 90_000 }, 429));
+
+        getComponent();
+
+        await expect(
+            screen.findAllByText("Too many attempts in a short time. Retry after 01:30."),
+        ).resolves.not.toHaveLength(0);
+        expect(await screen.findByRole("button", { name: "Continue" })).toHaveAttribute("aria-disabled", "true");
+    });
+
+    it("should show a rate limit message without a time when the server does not give one", async () => {
+        mockClient.registerRequest.mockReset().mockRejectedValue(new MatrixError({ errcode: "M_LIMIT_EXCEEDED" }, 429));
+
+        getComponent();
+
+        await expect(
+            screen.findAllByText("Too many attempts in a short time. Wait some time before trying again."),
+        ).resolves.not.toHaveLength(0);
+        expect(await screen.findByRole("button", { name: "Continue" })).toHaveAttribute("aria-disabled", "true");
+    });
+
+    it("should re-enable registration once the rate limit has expired", async () => {
+        vi.useFakeTimers({ shouldAdvanceTime: true });
+        try {
+            mockClient.registerRequest
+                .mockReset()
+                .mockRejectedValueOnce(new MatrixError({ errcode: "M_LIMIT_EXCEEDED", retry_after_ms: 90_000 }, 429))
+                .mockRejectedValue(new MatrixError({ flows: [{ stages: [] }] }, 401));
+
+            getComponent();
+
+            expect(await screen.findByRole("button", { name: "Continue" })).toHaveAttribute("aria-disabled", "true");
+
+            await vi.advanceTimersByTimeAsync(90_000);
+
+            // The retry succeeds, so the warning and the disabled button give way to the real form.
+            await waitFor(() =>
+                expect(screen.queryByText("Too many attempts in a short time. Retry after 01:30.")).toBeNull(),
+            );
+            expect(await screen.findByRole("button", { name: "Register" })).not.toHaveAttribute(
+                "aria-disabled",
+                "true",
+            );
+        } finally {
+            vi.useRealTimers();
+        }
+    });
+
     it("should handle serverConfig updates correctly", async () => {
         mockClient.loginFlows.mockResolvedValue({
             flows: [
@@ -155,7 +208,7 @@ describe("Registration", function () {
     });
 
     describe("when delegated authentication is configured and enabled", () => {
-        const authConfig = makeDelegatedAuthConfig();
+        const authConfig = makeDelegatedAuthMetadata();
         const clientId = "test-client-id";
         authConfig.prompt_values_supported = ["create"];
 
@@ -168,15 +221,6 @@ describe("Registration", function () {
                     },
                 },
             });
-
-            fetchMock.get(`${defaultHsUrl}/_matrix/client/unstable/org.matrix.msc2965/auth_issuer`, {
-                issuer: authConfig.issuer,
-            });
-            fetchMock.get("https://auth.org/.well-known/openid-configuration", {
-                ...authConfig,
-                signingKeys: undefined,
-            });
-            fetchMock.get(authConfig.jwks_uri!, { keys: [] });
         });
 
         it("should display oidc-native continue button", async () => {
@@ -194,7 +238,7 @@ describe("Registration", function () {
 
             fireEvent.click(await screen.findByText("Continue"));
 
-            expect(startOidcLogin).toHaveBeenCalledWith(
+            expect(startOAuthLogin).toHaveBeenCalledWith(
                 authConfig,
                 clientId,
                 defaultHsUrl,
diff --git a/apps/web/src/components/structures/auth/Registration.tsx b/apps/web/src/components/structures/auth/Registration.tsx
index 2240ec9381..a7fd8ecdfc 100644
--- a/apps/web/src/components/structures/auth/Registration.tsx
+++ b/apps/web/src/components/structures/auth/Registration.tsx
@@ -26,12 +26,14 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { Button } from "@vector-im/compound-web";
 
 import { _t } from "../../../languageHandler";
+import { formatSeconds } from "../../../DateUtils";
 import { adminContactStrings, messageForResourceLimitError, resourceLimitStrings } from "../../../utils/ErrorUtils";
 import AutoDiscoveryUtils from "../../../utils/AutoDiscoveryUtils";
 import * as Lifecycle from "../../../Lifecycle";
-import { type IMatrixClientCreds, MatrixClientPeg } from "../../../MatrixClientPeg";
+import { type IMatrixClientCreds } from "../../../utils/createMatrixClient";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import AuthPage from "../../views/auth/AuthPage";
-import Login, { type OidcNativeFlow } from "../../../Login";
+import Login, { type OAuthNativeFlow } from "../../../Login";
 import dis from "../../../dispatcher/dispatcher";
 import SSOButtons from "../../views/elements/SSOButtons";
 import ServerPicker from "../../views/elements/ServerPicker";
@@ -45,7 +47,7 @@ import { AuthHeaderDisplay } from "./header/AuthHeaderDisplay";
 import { AuthHeaderProvider } from "./header/AuthHeaderProvider";
 import SettingsStore from "../../../settings/SettingsStore";
 import { type ValidatedServerConfig } from "../../../utils/ValidatedServerConfig";
-import { startOidcLogin } from "../../../utils/oidc/authorize";
+import { startOAuthLogin } from "../../../utils/oauth/authorize";
 
 const debuglog = (...args: any[]): void => {
     if (SettingsStore.getValue("debug_registration")) {
@@ -123,13 +125,18 @@ interface IState {
     ssoFlow?: SSOFlow;
     // the OIDC native login flow, when supported and enabled
     // if present, must be used for registration
-    oidcNativeFlow?: OidcNativeFlow;
+    oauthNativeFlow?: OAuthNativeFlow;
+    // Set while the server is rate limiting registration. Kept apart from errorText so the warning
+    // can sit next to the disabled submit button rather than above the server picker.
+    rateLimitError?: string;
 }
 
 export default class Registration extends React.Component<IProps, IState> {
     private readonly loginLogic: Login;
     // `replaceClient` tracks latest serverConfig to spot when it changes under the async method which fetches flows
     private latestServerConfig?: ValidatedServerConfig;
+    // Pending re-query for after a rate limit expires, so the form comes back on its own
+    private rateLimitTimer?: ReturnType<typeof setTimeout>;
 
     public constructor(props: IProps) {
         super(props);
@@ -163,6 +170,7 @@ export default class Registration extends React.Component<IProps, IState> {
 
     public componentWillUnmount(): void {
         window.removeEventListener("beforeunload", this.unloadCallback);
+        clearTimeout(this.rateLimitTimer);
     }
 
     private unloadCallback = (event: BeforeUnloadEvent): string | undefined => {
@@ -186,8 +194,12 @@ export default class Registration extends React.Component<IProps, IState> {
         this.latestServerConfig = serverConfig;
         const { hsUrl, isUrl } = serverConfig;
 
+        clearTimeout(this.rateLimitTimer);
+        this.rateLimitTimer = undefined;
+
         this.setState({
             errorText: null,
+            rateLimitError: undefined,
             serverDeadError: null,
             serverErrorIsFatal: false,
             // busy while we do live-ness check (we need to avoid trying to render
@@ -224,12 +236,12 @@ export default class Registration extends React.Component<IProps, IState> {
         this.loginLogic.setDelegatedAuthentication(serverConfig.delegatedAuthentication);
 
         let ssoFlow: SSOFlow | undefined;
-        let oidcNativeFlow: OidcNativeFlow | undefined;
+        let oauthNativeFlow: OAuthNativeFlow | undefined;
         try {
             const loginFlows = await this.loginLogic.getFlows(true);
             if (serverConfig !== this.latestServerConfig) return; // discard, serverConfig changed from under us
             ssoFlow = loginFlows.find((f) => f.type === "m.login.sso" || f.type === "m.login.cas") as SSOFlow;
-            oidcNativeFlow = loginFlows.find((f) => f.type === "oidcNativeFlow") as OidcNativeFlow;
+            oauthNativeFlow = loginFlows.find((f) => f.type === "oauthNativeFlow") as OAuthNativeFlow;
         } catch (e) {
             if (serverConfig !== this.latestServerConfig) return; // discard, serverConfig changed from under us
             logger.error("Failed to get login flows to check for SSO support", e);
@@ -240,10 +252,10 @@ export default class Registration extends React.Component<IProps, IState> {
                 ({ flows }) => ({
                     matrixClient: cli,
                     ssoFlow,
-                    oidcNativeFlow,
+                    oauthNativeFlow,
                     // if we are using oidc native we won't continue with flow discovery on HS
                     // so set an empty array to indicate flows are no longer loading
-                    flows: oidcNativeFlow ? [] : flows,
+                    flows: oauthNativeFlow ? [] : flows,
                     busy: false,
                 }),
                 resolve,
@@ -252,7 +264,7 @@ export default class Registration extends React.Component<IProps, IState> {
 
         // don't need to check with homeserver for login flows
         // since we are going to use OIDC native flow
-        if (oidcNativeFlow) {
+        if (oauthNativeFlow) {
             return;
         }
 
@@ -288,6 +300,27 @@ export default class Registration extends React.Component<IProps, IState> {
                         flows: [],
                     });
                 }
+            } else if (e instanceof MatrixError && e.httpStatus === 429) {
+                // The server is rate limiting us, which the generic error below does not convey.
+                const retryAfterMs = parseInt(e.data?.retry_after_ms, 10);
+                this.setState({
+                    rateLimitError: isNaN(retryAfterMs)
+                        ? _t("auth|registration_rate_limited")
+                        : _t("auth|registration_rate_limited_with_time", {
+                              timeout: formatSeconds(retryAfterMs / 1000),
+                          }),
+                    // add empty flows array to get rid of spinner
+                    flows: [],
+                });
+                // Ask again once the wait is over so the form comes back by itself, rather than
+                // leaving the user to guess when it is worth reloading.
+                if (!isNaN(retryAfterMs)) {
+                    clearTimeout(this.rateLimitTimer);
+                    this.rateLimitTimer = setTimeout(() => {
+                        this.rateLimitTimer = undefined;
+                        this.replaceClient(this.props.serverConfig);
+                    }, retryAfterMs);
+                }
             } else {
                 logger.log("Unable to query for supported registration methods.", e);
                 this.setState({
@@ -537,6 +570,18 @@ export default class Registration extends React.Component<IProps, IState> {
                     poll={true}
                 />
             );
+        } else if (this.state.rateLimitError) {
+            // Keep the warning with the submit button it is disabling, below the server picker, so it
+            // reads as "this is why you cannot continue". Both are replaced by the real form once
+            // replaceClient runs again after the wait.
+            return (
+                <Fragment>
+                    <div className="mx_Login_error mx_Registration_rateLimitError">{this.state.rateLimitError}</div>
+                    <Button className="mx_Login_fullWidthButton" kind="primary" size="md" disabled={true}>
+                        {_t("action|continue")}
+                    </Button>
+                </Fragment>
+            );
         } else if (!this.state.matrixClient && !this.state.busy) {
             return null;
         } else if (this.state.busy || !this.state.flows) {
@@ -545,16 +590,16 @@ export default class Registration extends React.Component<IProps, IState> {
                     <Spinner />
                 </div>
             );
-        } else if (this.state.matrixClient && this.state.oidcNativeFlow) {
+        } else if (this.state.matrixClient && this.state.oauthNativeFlow) {
             return (
                 <Button
                     className="mx_Login_fullWidthButton"
                     kind="primary"
                     size="md"
                     onClick={async () => {
-                        await startOidcLogin(
+                        await startOAuthLogin(
                             this.props.serverConfig.delegatedAuthentication!,
-                            this.state.oidcNativeFlow!.clientId,
+                            this.state.oauthNativeFlow!.clientId,
                             this.props.serverConfig.hsUrl,
                             this.props.serverConfig.isUrl,
                             true /* isRegistration */,
@@ -610,7 +655,6 @@ export default class Registration extends React.Component<IProps, IState> {
                         defaultPassword={this.state.formVals.password}
                         onRegisterClick={this.onFormSubmit}
                         flows={this.state.flows}
-                        serverConfig={this.props.serverConfig}
                         canSubmit={!this.state.serverErrorIsFatal}
                         matrixClient={this.state.matrixClient}
                         mobileRegister={this.props.mobileRegister}
diff --git a/apps/web/src/components/structures/auth/SoftLogout.tsx b/apps/web/src/components/structures/auth/SoftLogout.tsx
index 95d83e9d2b..171dde37ad 100644
--- a/apps/web/src/components/structures/auth/SoftLogout.tsx
+++ b/apps/web/src/components/structures/auth/SoftLogout.tsx
@@ -14,7 +14,8 @@ import { _t } from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
 import * as Lifecycle from "../../../Lifecycle";
 import Modal from "../../../Modal";
-import { type IMatrixClientCreds, MatrixClientPeg } from "../../../MatrixClientPeg";
+import { type IMatrixClientCreds } from "../../../utils/createMatrixClient";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { sendLoginRequest } from "../../../Login";
 import AuthPage from "../../views/auth/AuthPage";
 import { SSO_HOMESERVER_URL_KEY, SSO_ID_SERVER_URL_KEY } from "../../../BasePlatform";
@@ -25,7 +26,6 @@ import AccessibleButton from "../../views/elements/AccessibleButton";
 import Spinner from "../../views/elements/Spinner";
 import AuthHeader from "../../views/auth/AuthHeader";
 import AuthBody from "../../views/auth/AuthBody";
-import { SDKContext } from "../../../contexts/SDKContext";
 import { type URLParams } from "../../../vector/url_utils.ts";
 
 enum LoginView {
@@ -60,9 +60,6 @@ interface IState {
 }
 
 export default class SoftLogout extends React.Component<IProps, IState> {
-    public static contextType = SDKContext;
-    declare public context: React.ContextType<typeof SDKContext>;
-
     public constructor(props: IProps) {
         super(props);
 
@@ -91,7 +88,7 @@ export default class SoftLogout extends React.Component<IProps, IState> {
             if (!wipeData) return;
 
             logger.log("Clearing data from soft-logged-out session");
-            Lifecycle.logout(this.context.oidcClientStore);
+            Lifecycle.logout();
         });
     };
 
@@ -111,7 +108,7 @@ export default class SoftLogout extends React.Component<IProps, IState> {
         const loginViews = flows.map((f) => STATIC_FLOWS_TO_VIEWS[f.type]);
 
         const isSocialSignOn = loginViews.includes(LoginView.Password) && loginViews.includes(LoginView.SSO);
-        const firstView = loginViews.filter((f) => !!f)[0] || LoginView.Unsupported;
+        const firstView = loginViews.find((f) => !!f) || LoginView.Unsupported;
         const chosenView = isSocialSignOn ? LoginView.PasswordWithSocialSignOn : firstView;
         this.setState({ flows, loginView: chosenView });
     }
diff --git a/apps/web/test/unit-tests/components/structures/auth/__snapshots__/CompleteSecurity-test.tsx.snap b/apps/web/src/components/structures/auth/__snapshots__/CompleteSecurity.test.tsx.snap
similarity index 96%
rename from apps/web/test/unit-tests/components/structures/auth/__snapshots__/CompleteSecurity-test.tsx.snap
rename to apps/web/src/components/structures/auth/__snapshots__/CompleteSecurity.test.tsx.snap
index 636c0c6b9b..8e3d1c7bd4 100644
--- a/apps/web/test/unit-tests/components/structures/auth/__snapshots__/CompleteSecurity-test.tsx.snap
+++ b/apps/web/src/components/structures/auth/__snapshots__/CompleteSecurity.test.tsx.snap
@@ -1,13 +1,14 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`CompleteSecurity Allows verifying with another device if one is available 1`] = `
+exports[`CompleteSecurity > Allows verifying with another device if one is available 1`] = `
 <DocumentFragment>
   <div
     class="mx_AuthPage"
+    style="background: url("themes/element/img/backgrounds/lake.jpg") center center / cover fixed;"
   >
     <div
       class="mx_AuthPage_modal"
-      style="position: relative;"
+      style="position: relative; background: ;"
     >
       <main
         aria-live="polite"
@@ -193,14 +194,15 @@ exports[`CompleteSecurity Allows verifying with another device if one is availab
 </DocumentFragment>
 `;
 
-exports[`CompleteSecurity Allows verifying with recovery key if one is available 1`] = `
+exports[`CompleteSecurity > Allows verifying with recovery key if one is available 1`] = `
 <DocumentFragment>
   <div
     class="mx_AuthPage"
+    style="background: url("themes/element/img/backgrounds/lake.jpg") center center / cover fixed;"
   >
     <div
       class="mx_AuthPage_modal"
-      style="position: relative;"
+      style="position: relative; background: ;"
     >
       <main
         aria-live="polite"
diff --git a/apps/web/test/unit-tests/components/structures/auth/__snapshots__/LoginSplashView-test.tsx.snap b/apps/web/src/components/structures/auth/__snapshots__/LoginSplashView.test.tsx.snap
similarity index 91%
rename from apps/web/test/unit-tests/components/structures/auth/__snapshots__/LoginSplashView-test.tsx.snap
rename to apps/web/src/components/structures/auth/__snapshots__/LoginSplashView.test.tsx.snap
index 8ea10c3f6b..db6e84edaa 100644
--- a/apps/web/test/unit-tests/components/structures/auth/__snapshots__/LoginSplashView-test.tsx.snap
+++ b/apps/web/src/components/structures/auth/__snapshots__/LoginSplashView.test.tsx.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`<LoginSplashView /> Renders a spinner 1`] = `
+exports[`<LoginSplashView /> > Renders a spinner 1`] = `
 <DocumentFragment>
   <div
     class="mx_MatrixChat_splash"
@@ -42,7 +42,7 @@ exports[`<LoginSplashView /> Renders a spinner 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<LoginSplashView /> Renders an error message 1`] = `
+exports[`<LoginSplashView /> > Renders an error message 1`] = `
 <DocumentFragment>
   <div
     class="mx_MatrixChat_splash"
diff --git a/apps/web/src/components/structures/auth/forgot-password/CheckEmail.tsx b/apps/web/src/components/structures/auth/forgot-password/CheckEmail.tsx
index 8fb135b3c6..6f3b696ab8 100644
--- a/apps/web/src/components/structures/auth/forgot-password/CheckEmail.tsx
+++ b/apps/web/src/components/structures/auth/forgot-password/CheckEmail.tsx
@@ -11,7 +11,7 @@ import { Button, Tooltip } from "@vector-im/compound-web";
 import { RestartIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import AccessibleButton from "../../../views/elements/AccessibleButton";
-import { Icon as EMailPromptIcon } from "../../../../../res/img/element-icons/email-prompt.svg";
+import EMailPromptIcon from "../../../../../res/img/element-icons/email-prompt.svg?react";
 import { _t } from "../../../../languageHandler";
 import { useTimeoutToggle } from "../../../../hooks/useTimeoutToggle";
 import { ErrorMessage } from "../../ErrorMessage";
diff --git a/apps/web/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx b/apps/web/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx
index 460495e317..7e216e8381 100644
--- a/apps/web/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx
+++ b/apps/web/src/components/structures/auth/forgot-password/VerifyEmailModal.tsx
@@ -12,7 +12,7 @@ import { CloseIcon, RestartIcon } from "@vector-im/compound-design-tokens/assets
 
 import { _t } from "../../../../languageHandler";
 import AccessibleButton from "../../../views/elements/AccessibleButton";
-import { Icon as EmailPromptIcon } from "../../../../../res/img/element-icons/email-prompt.svg";
+import EmailPromptIcon from "../../../../../res/img/element-icons/email-prompt.svg?react";
 import { useTimeoutToggle } from "../../../../hooks/useTimeoutToggle";
 import { ErrorMessage } from "../../ErrorMessage";
 
diff --git a/apps/web/src/components/structures/auth/header/AuthHeaderContext.tsx b/apps/web/src/components/structures/auth/header/AuthHeaderContext.ts
similarity index 100%
rename from apps/web/src/components/structures/auth/header/AuthHeaderContext.tsx
rename to apps/web/src/components/structures/auth/header/AuthHeaderContext.ts
diff --git a/apps/web/src/components/structures/auth/header/AuthHeaderModifier.tsx b/apps/web/src/components/structures/auth/header/AuthHeaderModifier.ts
similarity index 100%
rename from apps/web/src/components/structures/auth/header/AuthHeaderModifier.tsx
rename to apps/web/src/components/structures/auth/header/AuthHeaderModifier.ts
diff --git a/apps/web/src/components/structures/auth/header/AuthHeaderProvider.tsx b/apps/web/src/components/structures/auth/header/AuthHeaderProvider.tsx
index 50a53b95c3..75f792f4a2 100644
--- a/apps/web/src/components/structures/auth/header/AuthHeaderProvider.tsx
+++ b/apps/web/src/components/structures/auth/header/AuthHeaderProvider.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { isEqual } from "lodash";
-import React, { type JSX, type ComponentProps, type PropsWithChildren, type Reducer, useReducer } from "react";
+import React, { type JSX, type ComponentProps, type PropsWithChildren, type Reducer, useReducer, useMemo } from "react";
 
 import { AuthHeaderContext } from "./AuthHeaderContext";
 import { type AuthHeaderModifier } from "./AuthHeaderModifier";
@@ -36,5 +36,6 @@ export function AuthHeaderProvider({ children }: PropsWithChildren): JSX.Element
         },
         [] as ComponentProps<typeof AuthHeaderModifier>[],
     );
-    return <AuthHeaderContext.Provider value={{ state, dispatch }}>{children}</AuthHeaderContext.Provider>;
+    const context = useMemo(() => ({ state, dispatch }), [state, dispatch]);
+    return <AuthHeaderContext.Provider value={context}>{children}</AuthHeaderContext.Provider>;
 }
diff --git a/apps/web/src/components/structures/grouper/CreationGrouper.tsx b/apps/web/src/components/structures/grouper/CreationGrouper.tsx
index 04dc689b8b..15eba7e8c8 100644
--- a/apps/web/src/components/structures/grouper/CreationGrouper.tsx
+++ b/apps/web/src/components/structures/grouper/CreationGrouper.tsx
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type ReactNode } from "react";
+import React, { type ReactNode, useContext } from "react";
 import { EventType, M_BEACON_INFO, type MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { DateSeparatorView, useCreateAutoDisposedViewModel } from "@element-hq/web-shared-components";
@@ -19,6 +19,7 @@ import { _t } from "../../../languageHandler";
 import NewRoomIntro from "../../views/rooms/NewRoomIntro";
 import GenericEventListSummary from "../../views/elements/GenericEventListSummary";
 import { DateSeparatorViewModel } from "../../../viewmodels/room/timeline/DateSeparatorViewModel";
+import { SDKContext } from "../../../contexts/SDKContext.ts";
 
 // Wrap initial room creation events into a GenericEventListSummary
 // Grouping only events sent by the same user that sent the `m.room.create` and only until
@@ -28,7 +29,10 @@ import { DateSeparatorViewModel } from "../../../viewmodels/room/timeline/DateSe
  * Creates and auto-disposes the DateSeparatorViewModel for creation-group rendering.
  */
 function DateSeparatorWrapper({ roomId, ts }: { roomId: string; ts: number }): ReactNode {
-    const vm = useCreateAutoDisposedViewModel(() => new DateSeparatorViewModel({ roomId, ts }));
+    const sdkContext = useContext(SDKContext);
+    const vm = useCreateAutoDisposedViewModel(
+        () => new DateSeparatorViewModel({ roomId, ts, roomViewStore: sdkContext.roomViewStore }),
+    );
     return <DateSeparatorView vm={vm} className="mx_TimelineSeparator" />;
 }
 
diff --git a/apps/web/src/components/structures/grouper/MainGrouper.tsx b/apps/web/src/components/structures/grouper/MainGrouper.tsx
index 8245a9e323..3c6398927d 100644
--- a/apps/web/src/components/structures/grouper/MainGrouper.tsx
+++ b/apps/web/src/components/structures/grouper/MainGrouper.tsx
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type ReactNode } from "react";
+import React, { type ReactNode, useContext } from "react";
 import { EventType, type MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { DateSeparatorView, useCreateAutoDisposedViewModel } from "@element-hq/web-shared-components";
 
@@ -18,6 +18,7 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import HistoryTile from "../../views/rooms/HistoryTile";
 import EventListSummary from "../../views/elements/EventListSummary";
 import { DateSeparatorViewModel } from "../../../viewmodels/room/timeline/DateSeparatorViewModel";
+import { SDKContext } from "../../../contexts/SDKContext.ts";
 
 const groupedStateEvents = [
     EventType.RoomMember,
@@ -30,7 +31,10 @@ const groupedStateEvents = [
  * Creates and auto-disposes the DateSeparatorViewModel for grouped timeline rendering.
  */
 function DateSeparatorWrapper({ roomId, ts }: { roomId: string; ts: number }): ReactNode {
-    const vm = useCreateAutoDisposedViewModel(() => new DateSeparatorViewModel({ roomId, ts }));
+    const sdkContext = useContext(SDKContext);
+    const vm = useCreateAutoDisposedViewModel(
+        () => new DateSeparatorViewModel({ roomId, ts, roomViewStore: sdkContext.roomViewStore }),
+    );
     return <DateSeparatorView vm={vm} className="mx_TimelineSeparator" />;
 }
 
diff --git a/apps/web/src/components/structures/static-page-vars.ts b/apps/web/src/components/structures/static-page-vars.ts
index b5f21ea195..f055cd9e9f 100644
--- a/apps/web/src/components/structures/static-page-vars.ts
+++ b/apps/web/src/components/structures/static-page-vars.ts
@@ -6,13 +6,11 @@ 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.
 */
 
-// We're importing via require specifically so the svg becomes a URI rather than a DOM element.
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-const matrixSvg = require("../../../res/img/matrix.svg").default;
+import MatrixSvg from "../../../res/img/matrix.svg";
 
 /**
  * Intended to replace $matrixLogo in the welcome page.
  */
 export const MATRIX_LOGO_HTML = `<a href="https://matrix.org" target="_blank" rel="noreferrer noopener">
-    <img class="mx_WelcomePage_logo" width="79" height="34" alt="Matrix" style="padding-left: 1px;vertical-align: middle" src="${matrixSvg}"/>
+    <img class="mx_WelcomePage_logo" width="79" height="34" alt="Matrix" style="padding-left: 1px;vertical-align: middle" src="${MatrixSvg}"/>
 </a>`;
diff --git a/apps/web/src/components/viewmodels/avatars/FacePileViewModel.test.ts b/apps/web/src/components/viewmodels/avatars/FacePileViewModel.test.ts
new file mode 100644
index 0000000000..865f3c64af
--- /dev/null
+++ b/apps/web/src/components/viewmodels/avatars/FacePileViewModel.test.ts
@@ -0,0 +1,49 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+// @vitest-environment happy-dom
+
+import { it, describe, expect } from "vitest";
+
+import { mkRoomMember, stubClient } from "../../../../test/test-utils";
+import { FacePileViewModel } from "./FacePileViewModel";
+
+describe("FacePileViewModel", () => {
+    it("should compute the correct initial state", () => {
+        const cli = stubClient();
+        const members = [
+            mkRoomMember("!my-room:m.org", "@alice:m.org"),
+            mkRoomMember("!my-room:m.org", "@bob:m.org"),
+            mkRoomMember("!my-room:m.org", "@jack:m.org"),
+        ];
+        const vm = new FacePileViewModel({
+            cli,
+            members,
+            size: 20,
+        });
+        expect(vm.getSnapshot().memberAvatarViewModels).toHaveLength(3);
+    });
+
+    it("should update on updateMembers()", () => {
+        const cli = stubClient();
+        const members = [mkRoomMember("!my-room:m.org", "@alice:m.org"), mkRoomMember("!my-room:m.org", "@bob:m.org")];
+        const vm = new FacePileViewModel({
+            cli,
+            members,
+            size: 20,
+        });
+        expect(vm.getSnapshot().memberAvatarViewModels).toHaveLength(2);
+
+        vm.updateMembers([
+            mkRoomMember("!my-room:m.org", "@alice:m.org"),
+            mkRoomMember("!my-room:m.org", "@bob:m.org"),
+            mkRoomMember("!my-room:m.org", "@jack:m.org"),
+        ]);
+
+        expect(vm.getSnapshot().memberAvatarViewModels).toHaveLength(3);
+    });
+});
diff --git a/apps/web/src/components/viewmodels/avatars/FacePileViewModel.ts b/apps/web/src/components/viewmodels/avatars/FacePileViewModel.ts
new file mode 100644
index 0000000000..16e0a1fa0d
--- /dev/null
+++ b/apps/web/src/components/viewmodels/avatars/FacePileViewModel.ts
@@ -0,0 +1,63 @@
+/*
+ * Copyright 2026 Element Creations 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 { BaseViewModel, type FacePileViewSnapshot } from "@element-hq/web-shared-components";
+import { type MatrixClient, type RoomMember } from "matrix-js-sdk/src/matrix";
+
+import { MemberAvatarViewModel } from "./MemberAvatarViewModel";
+
+interface Props {
+    /**
+     * The size of each avatar in the face-pile in pixels, eg: 20.
+     */
+    size: number;
+    /**
+     * List of room-members from which to render the face-pile..
+     */
+    members: RoomMember[];
+
+    /**
+     * MatrixClient object to access js-sdk.
+     */
+    cli: MatrixClient;
+}
+
+/**
+ * View model for rendering face-piles.
+ */
+export class FacePileViewModel extends BaseViewModel<FacePileViewSnapshot, Props> {
+    private viewModelMap: Set<MemberAvatarViewModel> = new Set();
+
+    public constructor(props: Props) {
+        super(props, { memberAvatarViewModels: [] });
+        this.computeSnapshot();
+    }
+
+    private computeSnapshot(): void {
+        for (const vm of this.viewModelMap.values()) {
+            vm.dispose();
+        }
+        this.viewModelMap = new Set();
+        const members = this.props.members.slice(0, 3);
+        for (const member of members) {
+            const vm = this.disposables.track(
+                new MemberAvatarViewModel({ size: this.props.size, member, cli: this.props.cli }),
+            );
+            this.viewModelMap.add(vm);
+        }
+        this.snapshot.set({ memberAvatarViewModels: Array.from(this.viewModelMap.values()) });
+    }
+
+    /**
+     * Update the room-members from which the face-pile is rendered.
+     * @param newMembers The list of new room members
+     */
+    public updateMembers(newMembers: RoomMember[]): void {
+        this.props.members = newMembers;
+        this.computeSnapshot();
+    }
+}
diff --git a/apps/web/src/components/viewmodels/avatars/MemberAvatarViewModel.test.ts b/apps/web/src/components/viewmodels/avatars/MemberAvatarViewModel.test.ts
new file mode 100644
index 0000000000..ebf9a8d490
--- /dev/null
+++ b/apps/web/src/components/viewmodels/avatars/MemberAvatarViewModel.test.ts
@@ -0,0 +1,78 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+// @vitest-environment happy-dom
+
+import { it, describe, expect, vi } from "vitest";
+import { EventTimeline, type RoomState, RoomStateEvent } from "matrix-js-sdk/src/matrix";
+
+import { mkEvent, mkRoom, mkRoomMember, stubClient } from "../../../../test/test-utils";
+import { MemberAvatarViewModel } from "./MemberAvatarViewModel";
+
+vi.mock(import("../../../customisations/Media"), () => {
+    return {
+        mediaFromMxc: vi.fn().mockReturnValue({
+            getThumbnailOfSourceHttp: () => "avatar-url",
+        }),
+    };
+});
+
+describe("MemberAvatarViewModel", () => {
+    it("should compute the correct initial snapshot", () => {
+        const cli = stubClient();
+        const member = mkRoomMember("!my-room:m.org", "@alice:m.org");
+        member.getMxcAvatarUrl = () => "avatar-mxc-url";
+        member.name = "Alice";
+        const vm = new MemberAvatarViewModel({ cli, member, size: 20 });
+        const snapshot = vm.getSnapshot();
+        expect(snapshot.id).toStrictEqual("@alice:m.org");
+        expect(snapshot.title).toStrictEqual("@alice:m.org");
+        expect(snapshot.name).toStrictEqual("Alice");
+        expect(snapshot.size).toStrictEqual("20px");
+        expect(snapshot.url).toStrictEqual("avatar-url");
+    });
+
+    it("should update state", () => {
+        const cli = stubClient();
+        const room = mkRoom(cli, "!my-room:m.org");
+        cli.getRoom = () => room;
+        const member = mkRoomMember("!my-room:m.org", "@alice:m.org");
+        member.name = "Alice";
+
+        // The name is initially Alice
+        const vm = new MemberAvatarViewModel({ cli, member, size: 20 });
+        expect(vm.getSnapshot().name).toStrictEqual("Alice");
+
+        // On room event, name should update to Bob
+        member.name = "Bob";
+
+        const event = mkEvent({
+            type: "m.room.member",
+            user: "@alice.m.org",
+            content: {
+                displayname: "Bob",
+            },
+        });
+        vi.spyOn(room, "getLiveTimeline").mockImplementation(() => {
+            return {
+                getState: (): RoomState => {
+                    return {
+                        mayClientSendStateEvent: () => true,
+                    } as unknown as RoomState;
+                },
+            } as unknown as EventTimeline;
+        });
+        vi.mocked(room).emit(
+            RoomStateEvent.Members,
+            event,
+            room.getLiveTimeline().getState(EventTimeline.FORWARDS)!,
+            member,
+        );
+
+        expect(vm.getSnapshot().name).toStrictEqual("Bob");
+    });
+});
diff --git a/apps/web/src/components/viewmodels/avatars/MemberAvatarViewModel.ts b/apps/web/src/components/viewmodels/avatars/MemberAvatarViewModel.ts
new file mode 100644
index 0000000000..d7a2975629
--- /dev/null
+++ b/apps/web/src/components/viewmodels/avatars/MemberAvatarViewModel.ts
@@ -0,0 +1,73 @@
+/*
+ * Copyright 2026 Element Creations 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 { BaseViewModel, type MemberAvatarViewSnapshot } from "@element-hq/web-shared-components";
+import { type MatrixClient, RoomStateEvent, type RoomMember } from "matrix-js-sdk/src/matrix";
+
+import UserIdentifierCustomisations from "../../../customisations/UserIdentifier";
+import { mediaFromMxc } from "../../../customisations/Media";
+
+interface Props {
+    /**
+     * The size of the avatar in pixels, eg: 20.
+     */
+    size: number;
+    /**
+     * The room member for this avatar.
+     */
+    member: RoomMember;
+
+    /**
+     * MatrixClient object to access js-sdk.
+     */
+    cli: MatrixClient;
+}
+
+function computeSnapshot(props: Props): MemberAvatarViewSnapshot {
+    const size = props.size;
+    const member = props.member;
+    const id = member.userId;
+    const name = member.name ?? member.userId;
+    const title =
+        UserIdentifierCustomisations.getDisplayUserIdentifier(member.userId ?? "", {
+            roomId: member.roomId ?? "",
+        }) ?? member.userId;
+    let url: string | undefined;
+    if (member.getMxcAvatarUrl()) {
+        url =
+            mediaFromMxc(member.getMxcAvatarUrl() ?? "", props.cli).getThumbnailOfSourceHttp(size, size, "crop") ??
+            undefined;
+    }
+    return {
+        name,
+        id,
+        url,
+        size: `${size}px`,
+        title,
+    };
+}
+
+/**
+ * A view-model for rendering the avatar for a given room member.
+ */
+export class MemberAvatarViewModel extends BaseViewModel<MemberAvatarViewSnapshot, Props> {
+    public constructor(props: Props) {
+        super(props, computeSnapshot(props));
+        const roomId = props.member.roomId;
+        const room = props.cli.getRoom(roomId);
+        if (room) {
+            this.disposables.trackListener(room, RoomStateEvent.Members, this.onUpdate as (...args: unknown[]) => void);
+        }
+    }
+
+    private onUpdate = (event: unknown, state: unknown, member: RoomMember): void => {
+        if (member.userId === this.props.member.userId) {
+            const newSnapshot = computeSnapshot(this.props);
+            this.snapshot.set(newSnapshot);
+        }
+    };
+}
diff --git a/apps/web/src/components/viewmodels/avatars/RoomAvatarViewModel.tsx b/apps/web/src/components/viewmodels/avatars/RoomAvatarViewModel.ts
similarity index 100%
rename from apps/web/src/components/viewmodels/avatars/RoomAvatarViewModel.tsx
rename to apps/web/src/components/viewmodels/avatars/RoomAvatarViewModel.ts
diff --git a/apps/web/src/components/viewmodels/memberlist/MemberListViewModel.tsx b/apps/web/src/components/viewmodels/memberlist/MemberListViewModel.ts
similarity index 96%
rename from apps/web/src/components/viewmodels/memberlist/MemberListViewModel.tsx
rename to apps/web/src/components/viewmodels/memberlist/MemberListViewModel.ts
index 41233a4d6f..f285a59366 100644
--- a/apps/web/src/components/viewmodels/memberlist/MemberListViewModel.tsx
+++ b/apps/web/src/components/viewmodels/memberlist/MemberListViewModel.ts
@@ -167,7 +167,7 @@ export function useMemberListViewModel(roomId: string): MemberListViewState {
 
                     // Finally add the third party invites
                     for (const invited of threePidInvited) {
-                        const key = invited.threePidInvite!.event.getContent().display_name;
+                        const key = `threePidInvite-${invited.threePidInvite!.event.getStateKey()}`;
                         newMemberMap.set(key, invited);
                     }
 
@@ -218,7 +218,12 @@ export function useMemberListViewModel(roomId: string): MemberListViewState {
     });
 
     useTypedEventEmitter(cli, RoomStateEvent.Update, (state: RoomState) => {
-        if (state.roomId === roomId) loadMembers();
+        if (state.roomId === roomId) {
+            loadMembers();
+            // Power level and join rule changes both surface here, and both can change whether we may
+            // invite. Mirrors RoomSummaryCardViewModel, which recomputes canInviteTo on the same event.
+            setCanInvite(getCanUserInviteToThisRoom());
+        }
     });
 
     useTypedEventEmitter(cli, RoomMemberEvent.Name, (_: MatrixEvent, member: SdkRoomMember) => {
diff --git a/apps/web/src/components/viewmodels/memberlist/tiles/MemberTileViewModel.tsx b/apps/web/src/components/viewmodels/memberlist/tiles/MemberTileViewModel.ts
similarity index 100%
rename from apps/web/src/components/viewmodels/memberlist/tiles/MemberTileViewModel.tsx
rename to apps/web/src/components/viewmodels/memberlist/tiles/MemberTileViewModel.ts
diff --git a/apps/web/src/components/viewmodels/memberlist/tiles/ThreePidTileViewModel.tsx b/apps/web/src/components/viewmodels/memberlist/tiles/ThreePidTileViewModel.ts
similarity index 100%
rename from apps/web/src/components/viewmodels/memberlist/tiles/ThreePidTileViewModel.tsx
rename to apps/web/src/components/viewmodels/memberlist/tiles/ThreePidTileViewModel.ts
diff --git a/apps/web/src/components/viewmodels/right_panel/RoomSummaryCardTopicViewModel.tsx b/apps/web/src/components/viewmodels/right_panel/RoomSummaryCardTopicViewModel.ts
similarity index 100%
rename from apps/web/src/components/viewmodels/right_panel/RoomSummaryCardTopicViewModel.tsx
rename to apps/web/src/components/viewmodels/right_panel/RoomSummaryCardTopicViewModel.ts
diff --git a/apps/web/src/components/viewmodels/right_panel/RoomSummaryCardViewModel.tsx b/apps/web/src/components/viewmodels/right_panel/RoomSummaryCardViewModel.ts
similarity index 95%
rename from apps/web/src/components/viewmodels/right_panel/RoomSummaryCardViewModel.tsx
rename to apps/web/src/components/viewmodels/right_panel/RoomSummaryCardViewModel.ts
index d336dc42e5..903066f65b 100644
--- a/apps/web/src/components/viewmodels/right_panel/RoomSummaryCardViewModel.tsx
+++ b/apps/web/src/components/viewmodels/right_panel/RoomSummaryCardViewModel.ts
@@ -13,6 +13,7 @@ import {
     RoomEvent,
     RoomStateEvent,
 } from "matrix-js-sdk/src/matrix";
+import { type UserStatus } from "@element-hq/web-shared-components";
 
 import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
 import { useIsEncrypted } from "../../../hooks/useIsEncrypted";
@@ -41,9 +42,16 @@ import { usePinnedEvents } from "../../../hooks/usePinnedEvents";
 import { tagRoom } from "../../../utils/room/tagRoom";
 import { inviteToRoom } from "../../../utils/room/inviteToRoom";
 import { getTagsForRoom } from "../../../utils/room/getTagsForRoom";
+import { useDmMember } from "../../views/avatars/WithPresenceIndicator";
+import { useUserStatus } from "../../../hooks/useUserStatus";
 
 export interface RoomSummaryCardState {
     isDirectMessage: boolean;
+    /**
+     * The MSC4426 status of the other user if this room is a DM.
+     * Should be undefined for non-DM rooms.
+     */
+    userStatus: UserStatus | undefined;
     /**
      * Whether the room is encrypted, used to display the correct badge and icon
      */
@@ -182,6 +190,8 @@ export function useRoomSummaryCardViewModel(
     const isFavorite = roomTags.includes(DefaultTagID.Favourite);
 
     const isDirectMessage = useIsDirectMessage(room);
+    const dmMember = useDmMember(room);
+    const userStatus = useUserStatus(dmMember?.userId);
 
     const onRoomMembersClick = (): void => {
         RightPanelStore.instance.pushCard({ phase: RightPanelPhases.MemberList }, true);
@@ -261,6 +271,7 @@ export function useRoomSummaryCardViewModel(
 
     return {
         isDirectMessage,
+        userStatus,
         isRoomEncrypted,
         roomJoinRule,
         e2eStatus,
diff --git a/apps/web/src/components/viewmodels/right_panel/user_info/UserInfoBasicOptionsViewModel.tsx b/apps/web/src/components/viewmodels/right_panel/user_info/UserInfoBasicOptionsViewModel.ts
similarity index 100%
rename from apps/web/src/components/viewmodels/right_panel/user_info/UserInfoBasicOptionsViewModel.tsx
rename to apps/web/src/components/viewmodels/right_panel/user_info/UserInfoBasicOptionsViewModel.ts
diff --git a/apps/web/src/components/viewmodels/right_panel/user_info/UserInfoHeaderVerificationViewModel.tsx b/apps/web/src/components/viewmodels/right_panel/user_info/UserInfoHeaderVerificationViewModel.ts
similarity index 79%
rename from apps/web/src/components/viewmodels/right_panel/user_info/UserInfoHeaderVerificationViewModel.tsx
rename to apps/web/src/components/viewmodels/right_panel/user_info/UserInfoHeaderVerificationViewModel.ts
index 4b39d50353..4e15b3eaa6 100644
--- a/apps/web/src/components/viewmodels/right_panel/user_info/UserInfoHeaderVerificationViewModel.tsx
+++ b/apps/web/src/components/viewmodels/right_panel/user_info/UserInfoHeaderVerificationViewModel.ts
@@ -8,10 +8,10 @@ import { type MatrixClient, type RoomMember, type User } from "matrix-js-sdk/src
 import { useContext } from "react";
 import { type UserVerificationStatus } from "matrix-js-sdk/src/crypto-api";
 
-import MatrixClientContext from "../../../../contexts/MatrixClientContext";
 import { type IDevice } from "../../../views/right_panel/UserInfo";
 import { useAsyncMemo } from "../../../../hooks/useAsyncMemo";
 import { verifyUser } from "../../../../verification";
+import { SDKContext } from "../../../../contexts/SDKContext.ts";
 
 export interface UserInfoVerificationSectionState {
     /**
@@ -26,7 +26,7 @@ export interface UserInfoVerificationSectionState {
     /**
      * callback function when verifyUser button is clicked
      */
-    verifySelectedUser: () => Promise<void>;
+    verifySelectedUser: () => void;
 }
 
 const useHasCrossSigningKeys = (cli: MatrixClient, member: User, canVerify: boolean): boolean | undefined => {
@@ -44,21 +44,21 @@ export const useUserInfoVerificationViewModel = (
     member: User | RoomMember,
     devices: IDevice[],
 ): UserInfoVerificationSectionState => {
-    const cli = useContext(MatrixClientContext);
+    const sdkContext = useContext(SDKContext);
 
     const userTrust = useAsyncMemo<UserVerificationStatus | undefined>(
-        async () => cli.getCrypto()?.getUserVerificationStatus(member.userId),
+        async () => sdkContext.client?.getCrypto()?.getUserVerificationStatus(member.userId),
         [member.userId],
         // the user verification status is not initialized
         undefined,
     );
     const hasUserVerificationStatus = Boolean(userTrust);
     const isUserVerified = Boolean(userTrust?.isVerified());
-    const isMe = member.userId === cli.getUserId();
+    const isMe = member.userId === sdkContext.client!.getUserId();
     const canVerify = hasUserVerificationStatus && !isUserVerified && !isMe && devices && devices.length > 0;
 
-    const hasCrossSigningKeys = useHasCrossSigningKeys(cli, member as User, canVerify);
-    const verifySelectedUser = (): Promise<void> => verifyUser(cli, member as User);
+    const hasCrossSigningKeys = useHasCrossSigningKeys(sdkContext.client!, member as User, canVerify);
+    const verifySelectedUser = (): void => verifyUser(sdkContext.rightPanelStore, sdkContext.client!, member as User);
 
     return {
         canVerify,
diff --git a/apps/web/src/components/viewmodels/right_panel/user_info/UserInfoHeaderViewModel.tsx b/apps/web/src/components/viewmodels/right_panel/user_info/UserInfoHeaderViewModel.ts
similarity index 100%
rename from apps/web/src/components/viewmodels/right_panel/user_info/UserInfoHeaderViewModel.tsx
rename to apps/web/src/components/viewmodels/right_panel/user_info/UserInfoHeaderViewModel.ts
diff --git a/apps/web/src/components/viewmodels/right_panel/user_info/admin/UserInfoAdminToolsContainerViewModel.tsx b/apps/web/src/components/viewmodels/right_panel/user_info/admin/UserInfoAdminToolsContainerViewModel.ts
similarity index 100%
rename from apps/web/src/components/viewmodels/right_panel/user_info/admin/UserInfoAdminToolsContainerViewModel.tsx
rename to apps/web/src/components/viewmodels/right_panel/user_info/admin/UserInfoAdminToolsContainerViewModel.ts
diff --git a/apps/web/src/components/viewmodels/right_panel/user_info/admin/UserInfoBanButtonViewModel.tsx b/apps/web/src/components/viewmodels/right_panel/user_info/admin/UserInfoBanButtonViewModel.ts
similarity index 100%
rename from apps/web/src/components/viewmodels/right_panel/user_info/admin/UserInfoBanButtonViewModel.tsx
rename to apps/web/src/components/viewmodels/right_panel/user_info/admin/UserInfoBanButtonViewModel.ts
diff --git a/apps/web/src/components/viewmodels/right_panel/user_info/admin/UserInfoKickButtonViewModel.tsx b/apps/web/src/components/viewmodels/right_panel/user_info/admin/UserInfoKickButtonViewModel.ts
similarity index 100%
rename from apps/web/src/components/viewmodels/right_panel/user_info/admin/UserInfoKickButtonViewModel.tsx
rename to apps/web/src/components/viewmodels/right_panel/user_info/admin/UserInfoKickButtonViewModel.ts
diff --git a/apps/web/src/components/viewmodels/right_panel/user_info/admin/UserInfoMuteButtonViewModel.tsx b/apps/web/src/components/viewmodels/right_panel/user_info/admin/UserInfoMuteButtonViewModel.ts
similarity index 100%
rename from apps/web/src/components/viewmodels/right_panel/user_info/admin/UserInfoMuteButtonViewModel.tsx
rename to apps/web/src/components/viewmodels/right_panel/user_info/admin/UserInfoMuteButtonViewModel.ts
diff --git a/apps/web/src/components/viewmodels/right_panel/user_info/admin/UserInfoRedactButtonViewModel.tsx b/apps/web/src/components/viewmodels/right_panel/user_info/admin/UserInfoRedactButtonViewModel.ts
similarity index 100%
rename from apps/web/src/components/viewmodels/right_panel/user_info/admin/UserInfoRedactButtonViewModel.tsx
rename to apps/web/src/components/viewmodels/right_panel/user_info/admin/UserInfoRedactButtonViewModel.ts
diff --git a/apps/web/src/components/viewmodels/rooms/UserIdentityWarningViewModel.tsx b/apps/web/src/components/viewmodels/rooms/UserIdentityWarningViewModel.ts
similarity index 100%
rename from apps/web/src/components/viewmodels/rooms/UserIdentityWarningViewModel.tsx
rename to apps/web/src/components/viewmodels/rooms/UserIdentityWarningViewModel.ts
diff --git a/apps/web/src/components/viewmodels/settings/encryption/KeyStoragePanelViewModel.ts b/apps/web/src/components/viewmodels/settings/encryption/KeyStoragePanelViewModel.ts
index d968b91a7c..8de2411288 100644
--- a/apps/web/src/components/viewmodels/settings/encryption/KeyStoragePanelViewModel.ts
+++ b/apps/web/src/components/viewmodels/settings/encryption/KeyStoragePanelViewModel.ts
@@ -10,7 +10,11 @@ import { CryptoEvent } from "matrix-js-sdk/src/crypto-api";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
-import { DeviceListener, BACKUP_DISABLED_ACCOUNT_DATA_KEY } from "../../../../device-listener";
+import {
+    DeviceListener,
+    ACCOUNT_DATA_KEY_M_KEY_BACKUP,
+    ACCOUNT_DATA_KEY_M_KEY_BACKUP_DISABLED_UNSTABLE,
+} from "../../../../device-listener";
 import { useEventEmitterAsyncState } from "../../../../hooks/useEventEmitter";
 import { resetKeyBackupAndWait } from "../../../../utils/crypto/resetKeyBackup";
 
@@ -25,7 +29,7 @@ interface KeyStoragePanelState {
      * A function that can be called to enable or disable key storage.
      * @param enable True to turn key storage on or false to turn it off
      */
-    setEnabled: (enable: boolean) => void;
+    setEnabled: (enable: boolean) => Promise<void>;
 
     /**
      * True if the state is still loading for the first time
@@ -112,18 +116,22 @@ export function useKeyStoragePanelViewModel(): KeyStoragePanelState {
                             await resetKeyBackupAndWait(crypto);
                         }
 
-                        // Set the flag so that EX no longer thinks the user wants backup disabled
-                        await matrixClient.setAccountData(BACKUP_DISABLED_ACCOUNT_DATA_KEY, { disabled: false });
+                        // Set the flag to say that the user wants backup enabled
+                        await matrixClient.setAccountData(ACCOUNT_DATA_KEY_M_KEY_BACKUP, { enabled: true });
+                        await matrixClient.setAccountData(ACCOUNT_DATA_KEY_M_KEY_BACKUP_DISABLED_UNSTABLE, {
+                            disabled: false,
+                        });
                     } else {
                         logger.info("User requested disabling key backup");
                         // This method will delete the key backup as well as server side recovery keys and other
                         // server-side crypto data.
                         await crypto.disableKeyStorage();
 
-                        // Set a flag to say that the user doesn't want key backup.
-                        // Element X uses this to determine whether to set up automatically,
-                        // so this will stop EX turning it back on spontaneously.
-                        await matrixClient.setAccountData(BACKUP_DISABLED_ACCOUNT_DATA_KEY, { disabled: true });
+                        // Set the flag to say that the user wants backup disabled
+                        await matrixClient.setAccountData(ACCOUNT_DATA_KEY_M_KEY_BACKUP, { enabled: false });
+                        await matrixClient.setAccountData(ACCOUNT_DATA_KEY_M_KEY_BACKUP_DISABLED_UNSTABLE, {
+                            disabled: true,
+                        });
                     }
                 });
             } finally {
diff --git a/apps/web/src/components/views/audio_messages/LegacySeekBar.tsx b/apps/web/src/components/views/audio_messages/LegacySeekBar.tsx
index fe9e1dacd8..92d5415fef 100644
--- a/apps/web/src/components/views/audio_messages/LegacySeekBar.tsx
+++ b/apps/web/src/components/views/audio_messages/LegacySeekBar.tsx
@@ -89,7 +89,7 @@ export default class LegacySeekBar extends React.PureComponent<IProps, IState> {
         this.props.playback.skipTo(Number(ev.target.value) * this.props.playback.durationSeconds);
     };
 
-    private onMouseDown = (event: React.MouseEvent<Element, MouseEvent>): void => {
+    private onMouseDown = (event: React.MouseEvent): void => {
         // do not propagate mouse down events, because these should be handled by the seekbar
         event.stopPropagation();
     };
diff --git a/apps/web/src/components/views/audio_messages/LiveRecordingWaveform.tsx b/apps/web/src/components/views/audio_messages/LiveRecordingWaveform.tsx
index 2c388fe867..6630c66f97 100644
--- a/apps/web/src/components/views/audio_messages/LiveRecordingWaveform.tsx
+++ b/apps/web/src/components/views/audio_messages/LiveRecordingWaveform.tsx
@@ -26,10 +26,6 @@ interface IState {
  * A waveform which shows the waveform of a live recording
  */
 export default class LiveRecordingWaveform extends React.PureComponent<IProps, IState> {
-    public static defaultProps = {
-        progress: 1,
-    };
-
     private waveform: number[] = [];
     private scheduledUpdate: MarkedExecution = new MarkedExecution(
         () => this.updateWaveform(),
diff --git a/apps/web/src/components/views/audio_messages/RecordingPlayback.tsx b/apps/web/src/components/views/audio_messages/RecordingPlayback.tsx
index 4f5c392d41..769e762263 100644
--- a/apps/web/src/components/views/audio_messages/RecordingPlayback.tsx
+++ b/apps/web/src/components/views/audio_messages/RecordingPlayback.tsx
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type ReactNode } from "react";
+import { MediaBody } from "@element-hq/web-shared-components";
 
 import PlayPauseButton from "./PlayPauseButton";
 import PlaybackClock from "./PlaybackClock";
@@ -74,8 +75,8 @@ export default class RecordingPlayback extends AudioPlayerBase<IProps> {
         }
 
         return (
-            <div
-                className="mx_MediaBody mx_VoiceMessagePrimaryContainer"
+            <MediaBody
+                className="mx_VoiceMessagePrimaryContainer"
                 onKeyDown={this.onKeyDown}
                 data-testid="recording-playback"
             >
@@ -85,7 +86,7 @@ export default class RecordingPlayback extends AudioPlayerBase<IProps> {
                     ref={this.playPauseRef}
                 />
                 {body}
-            </div>
+            </MediaBody>
         );
     }
 }
diff --git a/apps/web/src/components/views/audio_messages/Waveform.tsx b/apps/web/src/components/views/audio_messages/Waveform.tsx
index 115b310f4c..03ae0d5617 100644
--- a/apps/web/src/components/views/audio_messages/Waveform.tsx
+++ b/apps/web/src/components/views/audio_messages/Waveform.tsx
@@ -43,6 +43,7 @@ export default class Waveform extends React.PureComponent<IProps> {
                     });
                     return (
                         <span
+                            // oxlint-disable-next-line react/no-array-index-key
                             key={i}
                             style={
                                 {
diff --git a/apps/web/src/components/views/auth/CaptchaForm.tsx b/apps/web/src/components/views/auth/CaptchaForm.tsx
index ca25ae180d..3e96a86e7e 100644
--- a/apps/web/src/components/views/auth/CaptchaForm.tsx
+++ b/apps/web/src/components/views/auth/CaptchaForm.tsx
@@ -26,10 +26,6 @@ interface ICaptchaFormState {
  * A pure UI component which displays a captcha form.
  */
 export default class CaptchaForm extends React.Component<ICaptchaFormProps, ICaptchaFormState> {
-    public static defaultProps = {
-        onCaptchaResponse: () => {},
-    };
-
     private captchaWidgetId?: string;
     private recaptchaContainer = createRef<HTMLDivElement>();
 
diff --git a/apps/web/src/components/views/auth/CountryDropdown.tsx b/apps/web/src/components/views/auth/CountryDropdown.tsx
index f25ed95e96..869f592e8e 100644
--- a/apps/web/src/components/views/auth/CountryDropdown.tsx
+++ b/apps/web/src/components/views/auth/CountryDropdown.tsx
@@ -10,7 +10,8 @@ import React, { type ReactElement } from "react";
 
 import { COUNTRIES, getEmojiFlag, type PhoneNumberCountryDefinition } from "../../../phonenumber";
 import SdkConfig from "../../../SdkConfig";
-import { _t, getUserLanguage } from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
+import { getUserLanguage } from "../../../i18n/settings";
 import Dropdown from "../elements/Dropdown";
 import { type NonEmptyArray } from "../../../@types/common";
 
diff --git a/apps/web/src/components/views/auth/DefaultWelcome.tsx b/apps/web/src/components/views/auth/DefaultWelcome.tsx
index 348b9c0a4f..b832a2f957 100644
--- a/apps/web/src/components/views/auth/DefaultWelcome.tsx
+++ b/apps/web/src/components/views/auth/DefaultWelcome.tsx
@@ -5,15 +5,32 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type JSX } from "react";
 import { Button, Heading, Text } from "@vector-im/compound-web";
+import { createClient } from "matrix-js-sdk/src/matrix";
+import { QrCodeIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig.ts";
 import { MatrixClientPeg } from "../../../MatrixClientPeg.ts";
 import { isElementBranded } from "../../../branding.ts";
+import { useFeatureEnabled } from "../../../hooks/useSettings.ts";
+import { type ValidatedServerConfig } from "../../../utils/ValidatedServerConfig.ts";
+import { useAsyncMemo } from "../../../hooks/useAsyncMemo.ts";
+import Spinner from "../elements/Spinner.tsx";
 
-const DefaultWelcome: React.FC = () => {
+interface Props {
+    /**
+     * The server config to use for QR code login
+     */
+    serverConfig: ValidatedServerConfig;
+}
+
+/**
+ * Default welcome (/#/welcome) screen to render if not overridden by config.json
+ * Links out to Login, Registration, QR Login & Directory (if guest access is supported)
+ */
+const DefaultWelcome: React.FC<Props> = ({ serverConfig }) => {
     const brand = SdkConfig.get("brand");
     const branding = SdkConfig.getObject("branding");
     const logoUrl = branding.get("auth_header_logo_url");
@@ -21,6 +38,45 @@ const DefaultWelcome: React.FC = () => {
     const showGuestFunctions = !!MatrixClientPeg.get();
     const isElement = isElementBranded();
 
+    const isQrLoginEnabled = useFeatureEnabled("feature_login_with_qr");
+    const showQrButton = useAsyncMemo(async () => {
+        if (!isQrLoginEnabled) return false;
+        const tempClient = createClient({
+            baseUrl: serverConfig.hsUrl,
+        });
+        // We do not use isSignInWithQRAvailable as we only need rendezvous at this point and are likely to be logging
+        // into a different server than this one, so whether this one supports DAG is irrelevant.
+        return tempClient.doesServerSupportUnstableFeature("org.matrix.msc4108");
+    }, [serverConfig, isQrLoginEnabled]);
+
+    const loading = isQrLoginEnabled && showQrButton === undefined;
+
+    let body: JSX.Element;
+    if (loading) {
+        body = <Spinner />;
+    } else {
+        body = (
+            <div className="mx_DefaultWelcome_buttons">
+                {showQrButton && (
+                    <Button as="a" href="#/qr_login" kind="primary" size="md" Icon={QrCodeIcon}>
+                        {_t("auth|sign_in_with_qr")}
+                    </Button>
+                )}
+                <Button as="a" href="#/login" kind="primary" size="md">
+                    {showQrButton ? _t("auth|sign_in_manually") : _t("action|sign_in")}
+                </Button>
+                <Button as="a" href="#/register" kind="secondary" size="md">
+                    {_t("action|create_account")}
+                </Button>
+                {showGuestFunctions && (
+                    <Button as="a" href="#/directory" kind="tertiary" size="md">
+                        {_t("action|explore_rooms")}
+                    </Button>
+                )}
+            </div>
+        );
+    }
+
     return (
         <div className="mx_DefaultWelcome">
             <a href={branding.get("logo_link_url")} target="_blank" rel="noopener" className="mx_DefaultWelcome_logo">
@@ -31,19 +87,7 @@ const DefaultWelcome: React.FC = () => {
             </Heading>
             {isElement && <Text size="md">{_t("welcome|tagline_element")}</Text>}
 
-            <div className="mx_DefaultWelcome_buttons">
-                <Button as="a" href="#/login" kind="primary" size="md">
-                    {_t("action|sign_in")}
-                </Button>
-                <Button as="a" href="#/register" kind="secondary" size="md">
-                    {_t("action|create_account")}
-                </Button>
-                {showGuestFunctions && (
-                    <Button as="a" href="#/directory" kind="tertiary" size="md">
-                        {_t("action|explore_rooms")}
-                    </Button>
-                )}
-            </div>
+            {body}
         </div>
     );
 };
diff --git a/apps/web/src/components/views/auth/InteractiveAuthEntryComponents.tsx b/apps/web/src/components/views/auth/InteractiveAuthEntryComponents.tsx
index 5e5b163b7a..89fe5799e6 100644
--- a/apps/web/src/components/views/auth/InteractiveAuthEntryComponents.tsx
+++ b/apps/web/src/components/views/auth/InteractiveAuthEntryComponents.tsx
@@ -178,13 +178,11 @@ export class PasswordAuthEntry extends React.Component<IAuthEntryProps, IPasswor
     }
 }
 
-/* eslint-disable camelcase */
 interface IRecaptchaAuthEntryProps extends IAuthEntryProps {
     stageParams?: {
         public_key?: string;
     };
 }
-/* eslint-enable camelcase */
 
 export class RecaptchaAuthEntry extends React.Component<IRecaptchaAuthEntryProps> {
     public static LOGIN_TYPE = AuthType.Recaptcha;
diff --git a/apps/web/src/components/views/auth/LoginWithQR-types.ts b/apps/web/src/components/views/auth/LoginWithQR-types.ts
index 8e1d58515d..cb6ef911cf 100644
--- a/apps/web/src/components/views/auth/LoginWithQR-types.ts
+++ b/apps/web/src/components/views/auth/LoginWithQR-types.ts
@@ -26,10 +26,24 @@ export enum Phase {
     Error,
 }
 
+/**
+ * Enum representing the click actions (transitions) a user can take during the login with QR flow
+ */
 export enum Click {
+    /**
+     * Cancel the flow
+     */
     Cancel,
+    /**
+     * A specific case of cancellation when the existing device declines the login
+     */
     Decline,
+    /**
+     * Approve the login from the existing device
+     */
     Approve,
-    Back,
+    /**
+     * Initialise the flow & show QR code
+     */
     ShowQr,
 }
diff --git a/apps/web/src/components/views/auth/LoginWithQR.tsx b/apps/web/src/components/views/auth/LoginWithQR.tsx
index 808e42e66b..a8d9a1e1d3 100644
--- a/apps/web/src/components/views/auth/LoginWithQR.tsx
+++ b/apps/web/src/components/views/auth/LoginWithQR.tsx
@@ -15,27 +15,103 @@ import {
     RendezvousError,
     type RendezvousFailureReason,
     RendezvousIntent,
+    signInByGeneratingQR,
 } from "matrix-js-sdk/src/rendezvous";
 import { logger } from "matrix-js-sdk/src/logger";
-import { type MatrixClient } from "matrix-js-sdk/src/matrix";
+import {
+    AutoDiscovery,
+    MatrixClient,
+    OAuthGrantType,
+    type ValidatedAuthMetadata,
+    type XOR,
+} from "matrix-js-sdk/src/matrix";
 import { sleep } from "matrix-js-sdk/src/utils";
+import { secureRandomString } from "matrix-js-sdk/src/randomstring";
 
 import { Click, Mode, Phase } from "./LoginWithQR-types";
 import LoginWithQRFlow from "./LoginWithQRFlow";
+import { type CompleteOAuthLoginResponse } from "../../../utils/oauth/authorize";
+import { getOAuthClientId } from "../../../utils/oauth/registerClient.ts";
+import SdkConfig from "../../../SdkConfig.ts";
+import { type Context } from "../../../utils/oauth/persistOAuthSettings.ts";
 
-interface IProps {
+export type QrLoginCredentials = CompleteOAuthLoginResponse &
+    Awaited<ReturnType<MSC4108SignInWithQR["shareSecrets"]>> & {
+        deviceId: string;
+    };
+
+type BaseProps = {
+    /**
+     * The MatrixClient to use for the rendezvous communication with the other device.
+     */
     client: MatrixClient;
+    /**
+     * Whether to show a QR code or facilitate scanning one. Only Mode.Show is currently supported.
+     */
     mode: Mode;
-    onFinished(...args: any): void;
-}
+    /**
+     * Callback when the internal phase state has changed
+     * @param phase - the new phase which is being entered
+     */
+    onPhaseChange?(phase: Phase): void;
+    /**
+     * Callback when the flow is concluded
+     * @param success - whether it was successful
+     */
+    onFinished(this: void, success?: boolean): void;
+};
+
+type Props = XOR<
+    {
+        /**
+         * Intent to facilitate logging into this device from an existing device
+         */
+        intent: RendezvousIntent.LOGIN_ON_NEW_DEVICE;
+        /**
+         * Callback for successful login
+         * @param credentials - the credentials to authenticate with
+         */
+        onLoggedIn(credentials: QrLoginCredentials): Promise<void>;
+    },
+    {
+        /**
+         * Intent to facilitate logging into another device from this existing device
+         */
+        intent: RendezvousIntent.RECIPROCATE_LOGIN_ON_EXISTING_DEVICE;
+    }
+> &
+    BaseProps;
 
 interface IState {
+    /**
+     * The current phase of the flow
+     */
     phase: Phase;
+    /**
+     * The rendezvous channel in use
+     */
     rendezvous?: MSC4108SignInWithQR;
+    /**
+     * TODO
+     */
     verificationUri?: string;
+    /**
+     * TODO
+     */
     userCode?: string;
+    /**
+     * TODO
+     */
     checkCode?: string;
+    /**
+     * TODO
+     */
     failureReason?: FailureReason;
+    /**
+     * Details of the server we are logging into, set after initial protocol negotiation.
+     */
+    loginServerDetails?: Pick<Context, "homeserverUrl" | "identityServerUrl" | "metadata"> &
+        Pick<Context["authContext"], "clientId">;
 }
 
 export enum LoginWithQRFailureReason {
@@ -45,34 +121,67 @@ export enum LoginWithQRFailureReason {
 
 export type FailureReason = RendezvousFailureReason | LoginWithQRFailureReason;
 
+/**
+ * Resolve a server name or baseURL to the homeserver & identity server URLs.
+ * @param serverNameOrBaseUrl the name or URL to resolve
+ * Whilst the 2024 version of MSC4108 says that we always get a server name, in practise the
+ * rust-sdk is currently misbehaving and we may receive a base URL instead. Additionally, the 2025
+ * version of MSC4108  will always give the base URL.
+ * As such, we should be resilient and support both formats until the spec and implementations have
+ * stabilised.
+ */
+async function resolveServerURLs(
+    serverNameOrBaseUrl: string,
+): Promise<Pick<Partial<Context>, "homeserverUrl" | "identityServerUrl">> {
+    if (serverNameOrBaseUrl.startsWith("http://") || serverNameOrBaseUrl.startsWith("https://")) {
+        // treat as base URL and skip discovery
+        return {
+            homeserverUrl: serverNameOrBaseUrl,
+        };
+    }
+
+    // treat as server name and do discovery
+    const clientConfig = await AutoDiscovery.findClientConfig(serverNameOrBaseUrl);
+    const homeserverUrl = clientConfig?.["m.homeserver"]?.base_url ?? undefined;
+
+    const identityServerUrl = clientConfig?.["m.identity_server"]?.base_url ?? undefined;
+
+    return {
+        homeserverUrl,
+        identityServerUrl,
+    };
+}
+
 /**
  * A component that allows sign in and E2EE set up with a QR code.
  *
- * It implements `login.reciprocate` capabilities and showing QR codes.
+ * It implements `login.reciprocate` & `login.start` capabilities and showing QR codes.
+ * It does not implement any flows requiring the scanning of QR codes.
  *
- * This uses the unstable feature of MSC4108: https://github.com/matrix-org/matrix-spec-proposals/pull/4108
+ * Implements the v2024 version of MSC4108: https://github.com/matrix-org/matrix-spec-proposals/pull/4108
  */
-export default class LoginWithQR extends React.Component<IProps, IState> {
+export default class LoginWithQR extends React.Component<Props, IState> {
     private finished = false;
     private abortController?: AbortController;
 
-    public constructor(props: IProps) {
+    public constructor(props: Props) {
         super(props);
 
         this.state = {
             phase: Phase.Loading,
         };
-    }
-
-    private get ourIntent(): RendezvousIntent {
-        return RendezvousIntent.RECIPROCATE_LOGIN_ON_EXISTING_DEVICE;
+        this.props.onPhaseChange?.(this.state.phase);
     }
 
     public componentDidMount(): void {
         void this.updateMode(this.props.mode);
     }
 
-    public componentDidUpdate(prevProps: Readonly<IProps>): void {
+    public componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<IState>): void {
+        if (prevState.phase !== this.state.phase) {
+            this.props.onPhaseChange?.(this.state.phase);
+        }
+
         if (prevProps.mode !== this.props.mode) {
             void this.updateMode(this.props.mode);
         }
@@ -99,13 +208,19 @@ export default class LoginWithQR extends React.Component<IProps, IState> {
 
     private onFinished(success: boolean): void {
         this.finished = true;
+        if (!success) {
+            this.abortController?.abort();
+        }
         this.props.onFinished(success);
     }
 
     private generateAndShowCode = async (abortController: AbortController): Promise<void> => {
         let rendezvous: MSC4108SignInWithQR;
         try {
-            rendezvous = await linkNewDeviceByGeneratingQR(this.props.client, this.onFailure, abortController.signal);
+            rendezvous =
+                this.props.intent === RendezvousIntent.LOGIN_ON_NEW_DEVICE
+                    ? await signInByGeneratingQR(this.props.client, this.onFailure, abortController.signal)
+                    : await linkNewDeviceByGeneratingQR(this.props.client, this.onFailure, abortController.signal);
             if (abortController.signal.aborted) return;
             this.setState({
                 phase: Phase.ShowingQR,
@@ -120,7 +235,7 @@ export default class LoginWithQR extends React.Component<IProps, IState> {
         }
 
         try {
-            if (this.ourIntent === RendezvousIntent.RECIPROCATE_LOGIN_ON_EXISTING_DEVICE) {
+            if (this.props.intent === RendezvousIntent.RECIPROCATE_LOGIN_ON_EXISTING_DEVICE) {
                 // MSC4108-Flow: NewScanned
                 await rendezvous.negotiateProtocols();
                 const { verificationUri } = await rendezvous.deviceAuthorizationGrant();
@@ -128,15 +243,50 @@ export default class LoginWithQR extends React.Component<IProps, IState> {
                     phase: Phase.OutOfBandConfirmation,
                     verificationUri,
                 });
+            } else {
+                const { serverName } = await rendezvous.negotiateProtocols();
+                const { homeserverUrl, identityServerUrl } = await resolveServerURLs(serverName!);
+
+                if (!homeserverUrl) {
+                    this.setState({ phase: Phase.Error, failureReason: ClientRendezvousFailureReason.Unknown });
+                    logger.error("Failed to discover homeserver URL");
+                    throw new Error("Failed to discover homeserver URL");
+                }
+
+                let metadata: ValidatedAuthMetadata;
+                let clientId: string;
+                try {
+                    // Create a new client as the homeserver URL may not be the same as we used for the secure channel
+                    metadata = await new MatrixClient({ baseUrl: homeserverUrl }).getAuthMetadata();
+                    if (!metadata.grant_types_supported.includes(OAuthGrantType.DeviceAuthorization)) {
+                        throw new Error("Server does not support Device Authorization Grant");
+                    }
+                    clientId = await getOAuthClientId(metadata, SdkConfig.get().oidc_static_clients);
+                } catch (e) {
+                    this.setState({
+                        phase: Phase.Error,
+                        failureReason: ClientRendezvousFailureReason.HomeserverLacksSupport,
+                    });
+                    logger.error("Failed to register OIDC Client ID", e);
+                    throw new Error("Failed to register OIDC Client ID", { cause: e });
+                }
+
+                this.setState({
+                    phase: Phase.OutOfBandConfirmation,
+                    loginServerDetails: {
+                        homeserverUrl,
+                        identityServerUrl,
+                        metadata,
+                        clientId,
+                    },
+                });
             }
 
             // we ask the user to confirm that the channel is secure
         } catch (e: RendezvousError | unknown) {
             if (abortController.signal.aborted) return;
             logger.error("Error whilst approving login", e);
-            await rendezvous.cancel(
-                e instanceof RendezvousError ? (e.code as MSC4108FailureReason) : ClientRendezvousFailureReason.Unknown,
-            );
+            await rendezvous.cancel(e instanceof RendezvousError ? e.code : ClientRendezvousFailureReason.Unknown);
         }
     };
 
@@ -152,7 +302,7 @@ export default class LoginWithQR extends React.Component<IProps, IState> {
         }
 
         try {
-            if (this.ourIntent === RendezvousIntent.RECIPROCATE_LOGIN_ON_EXISTING_DEVICE) {
+            if (this.props.intent === RendezvousIntent.RECIPROCATE_LOGIN_ON_EXISTING_DEVICE) {
                 // MSC4108-Flow: NewScanned
                 this.setState({ phase: Phase.Loading });
 
@@ -168,8 +318,39 @@ export default class LoginWithQR extends React.Component<IProps, IState> {
                 // done
                 this.onFinished(true);
             } else {
-                this.setState({ phase: Phase.Error, failureReason: ClientRendezvousFailureReason.Unknown });
-                throw new Error("New device flows around OIDC are not yet implemented");
+                if (!this.state.loginServerDetails) {
+                    this.setState({ phase: Phase.Error, failureReason: ClientRendezvousFailureReason.Unknown });
+                    throw new Error("Server details not found in state");
+                }
+
+                const { homeserverUrl, identityServerUrl, clientId, metadata } = this.state.loginServerDetails;
+
+                // Generate our new device ID
+                const deviceId = secureRandomString(10);
+                const { userCode } = await this.state.rendezvous.deviceAuthorizationGrant({
+                    metadata,
+                    clientId,
+                    deviceId,
+                });
+                this.setState({ phase: Phase.WaitingForDevice, userCode });
+
+                const tokenResponse = await this.state.rendezvous.completeLoginOnNewDevice({ clientId });
+
+                if (tokenResponse) {
+                    const { secrets } = await this.state.rendezvous.shareSecrets();
+
+                    await this.props.onLoggedIn({
+                        accessToken: tokenResponse.access_token,
+                        refreshToken: tokenResponse.refresh_token,
+                        homeserverUrl,
+                        clientId,
+                        identityServerUrl,
+                        secrets,
+                        deviceId,
+                    });
+
+                    this.onFinished(true);
+                }
             }
         } catch (e: RendezvousError | unknown) {
             logger.error("Error whilst approving sign in", e);
@@ -182,7 +363,7 @@ export default class LoginWithQR extends React.Component<IProps, IState> {
 
     private onFailure = async (reason: RendezvousFailureReason): Promise<void> => {
         if (this.state.phase === Phase.Error) return; // Already in failed state
-        logger.info(`Rendezvous failed: ${reason}`);
+        logger.warn(`Rendezvous failed: ${reason}`);
 
         // Generate a new rendezvous channel & qr code if we hit expiry whilst still showing the QR code
         if (reason === ClientRendezvousFailureReason.Expired && this.state.phase === Phase.ShowingQR) {
@@ -196,7 +377,6 @@ export default class LoginWithQR extends React.Component<IProps, IState> {
                 logger.warn("Failed to re-roll qr code on expiry", e);
             }
         }
-
         this.setState({ phase: Phase.Error, failureReason: reason });
     };
 
@@ -207,7 +387,6 @@ export default class LoginWithQR extends React.Component<IProps, IState> {
             verificationUri: undefined,
             failureReason: undefined,
             userCode: undefined,
-            checkCode: undefined,
         });
     }
 
@@ -215,19 +394,17 @@ export default class LoginWithQR extends React.Component<IProps, IState> {
         switch (type) {
             case Click.Cancel:
                 await this.state.rendezvous?.cancel(MSC4108FailureReason.UserCancelled);
-                this.reset();
                 this.onFinished(false);
                 break;
             case Click.Approve:
                 await this.approveLogin(checkCode);
                 break;
             case Click.Decline:
-                await this.state.rendezvous?.declineLoginOnExistingDevice();
-                this.reset();
-                this.onFinished(false);
-                break;
-            case Click.Back:
-                await this.state.rendezvous?.cancel(MSC4108FailureReason.UserCancelled);
+                if (this.props.intent === RendezvousIntent.LOGIN_ON_NEW_DEVICE) {
+                    await this.state.rendezvous?.cancel(MSC4108FailureReason.UserCancelled);
+                } else {
+                    await this.state.rendezvous?.declineLoginOnExistingDevice();
+                }
                 this.onFinished(false);
                 break;
             case Click.ShowQr:
@@ -244,7 +421,7 @@ export default class LoginWithQR extends React.Component<IProps, IState> {
                 code={this.state.phase === Phase.ShowingQR ? this.state.rendezvous?.code : undefined}
                 failureReason={this.state.failureReason}
                 userCode={this.state.userCode}
-                checkCode={this.state.checkCode}
+                intent={this.props.intent}
             />
         );
     }
diff --git a/apps/web/src/components/views/auth/LoginWithQRFlow.tsx b/apps/web/src/components/views/auth/LoginWithQRFlow.tsx
index 34a3b22db4..399aa2df6e 100644
--- a/apps/web/src/components/views/auth/LoginWithQRFlow.tsx
+++ b/apps/web/src/components/views/auth/LoginWithQRFlow.tsx
@@ -6,14 +6,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX, createRef, type ReactNode } from "react";
-import { ClientRendezvousFailureReason, MSC4108FailureReason } from "matrix-js-sdk/src/rendezvous";
+import React, { type ComponentProps, createRef, type JSX, type ReactNode } from "react";
+import { ClientRendezvousFailureReason, MSC4108FailureReason, RendezvousIntent } from "matrix-js-sdk/src/rendezvous";
 import ChevronLeftIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-left";
 import CheckCircleSolidIcon from "@vector-im/compound-design-tokens/assets/web/icons/check-circle-solid";
 import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
-import { Heading, MFAInput, Text } from "@vector-im/compound-web";
+import { BigIcon, Button, Heading, MFAInput, Text } from "@vector-im/compound-web";
 import classNames from "classnames";
-import { QrCodeIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { LockSolidIcon, MobileIcon, QrCodeIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
@@ -25,18 +25,38 @@ import { type FailureReason, LoginWithQRFailureReason } from "./LoginWithQR";
 import { ErrorMessage } from "../../structures/ErrorMessage";
 
 interface Props {
+    /**
+     * The phase the flow is to be rendered in
+     */
     phase: Phase;
+    /**
+     * The QR code data to render in Phase.ShowingQR
+     */
     code?: Uint8Array;
+    /**
+     * The intent mode of the flow (login or reciprocate).
+     */
+    intent: RendezvousIntent;
+    /**
+     * State transition handler
+     * @param type the type of transition to take
+     * @param checkCodeEntered the check code entered, only present for Click.Approve
+     */
     onClick(type: Click, checkCodeEntered?: string): Promise<void>;
+    /**
+     * The failure reason to render in Phase.Error
+     */
     failureReason?: FailureReason;
+    /**
+     * The 6 digit user code to render in Phase.WaitingForDevice
+     */
     userCode?: string;
-    checkCode?: string;
 }
 
 /**
- * A component that implements the UI for sign in and E2EE set up with a QR code.
+ * A component that implements the UI for sign in and E2EE set up by rendering a QR code in both login & reciprocate directions.
  *
- * This supports the unstable features of MSC4108
+ * Implements the v2024 version of MSC4108: https://github.com/matrix-org/matrix-spec-proposals/pull/4108
  */
 export default class LoginWithQRFlow extends React.Component<Props> {
     private checkCodeInput = createRef<HTMLInputElement>();
@@ -49,9 +69,9 @@ export default class LoginWithQRFlow extends React.Component<Props> {
     };
 
     private cancelButton = (): JSX.Element => (
-        <AccessibleButton data-testid="cancel-button" kind="primary_outline" onClick={this.handleClick(Click.Cancel)}>
+        <Button data-testid="cancel-button" kind="primary" size="lg" onClick={this.handleClick(Click.Cancel)}>
             {_t("action|cancel")}
-        </AccessibleButton>
+        </Button>
     );
 
     private simpleSpinner = (description?: string): JSX.Element => {
@@ -74,9 +94,16 @@ export default class LoginWithQRFlow extends React.Component<Props> {
         switch (this.props.phase) {
             case Phase.Error: {
                 backButton = false;
+                buttons = (
+                    <Button kind="primary" size="lg" onClick={this.handleClick(Click.ShowQr)}>
+                        {this.props.intent === RendezvousIntent.LOGIN_ON_NEW_DEVICE
+                            ? _t("auth|qr_code_login|start_over")
+                            : _t("action|try_again")}
+                    </Button>
+                );
 
                 let Icon = ErrorIcon;
-                let success: boolean | null = false;
+                let iconKind: ComponentProps<typeof BigIcon>["kind"] = "critical";
                 let title: string | undefined;
                 let message: ReactNode | undefined;
 
@@ -89,6 +116,9 @@ export default class LoginWithQRFlow extends React.Component<Props> {
                     case MSC4108FailureReason.UserCancelled:
                         title = _t("auth|qr_code_login|error_user_cancelled_title");
                         message = _t("auth|qr_code_login|error_user_cancelled");
+                        if (this.props.intent === RendezvousIntent.LOGIN_ON_NEW_DEVICE) {
+                            buttons = this.cancelButton();
+                        }
                         break;
 
                     case MSC4108FailureReason.AuthorizationExpired:
@@ -116,7 +146,7 @@ export default class LoginWithQRFlow extends React.Component<Props> {
                         break;
 
                     case ClientRendezvousFailureReason.OtherDeviceAlreadySignedIn:
-                        success = true;
+                        iconKind = "success";
                         Icon = CheckCircleSolidIcon;
                         title = _t("auth|qr_code_login|error_other_device_already_signed_in_title");
                         message = _t("auth|qr_code_login|error_other_device_already_signed_in");
@@ -125,6 +155,9 @@ export default class LoginWithQRFlow extends React.Component<Props> {
                     case ClientRendezvousFailureReason.UserDeclined:
                         title = _t("auth|qr_code_login|error_user_declined_title");
                         message = _t("auth|qr_code_login|error_user_declined");
+                        if (this.props.intent === RendezvousIntent.LOGIN_ON_NEW_DEVICE) {
+                            buttons = this.cancelButton();
+                        }
                         break;
 
                     case LoginWithQRFailureReason.RateLimited:
@@ -138,11 +171,13 @@ export default class LoginWithQRFlow extends React.Component<Props> {
                         break;
 
                     case ClientRendezvousFailureReason.HomeserverLacksSupport:
-                        success = null;
                         Icon = QrCodeIcon;
                         backButton = true;
                         title = _t("auth|qr_code_login|unsupported_heading");
                         message = _t("auth|qr_code_login|unsupported_explainer");
+                        if (this.props.intent === RendezvousIntent.LOGIN_ON_NEW_DEVICE) {
+                            buttons = this.cancelButton();
+                        }
                         break;
 
                     case MSC4108FailureReason.DeviceAlreadyExists:
@@ -158,14 +193,9 @@ export default class LoginWithQRFlow extends React.Component<Props> {
                 className = "mx_LoginWithQR_error";
                 main = (
                     <>
-                        <div
-                            className={classNames("mx_LoginWithQR_icon", {
-                                "mx_LoginWithQR_icon--critical": success === false,
-                                "mx_LoginWithQR_icon--success": success === true,
-                            })}
-                        >
-                            <Icon width="32px" height="32px" />
-                        </div>
+                        <BigIcon kind={iconKind}>
+                            <Icon />
+                        </BigIcon>
                         <Heading as="h1" size="sm" weight="semibold">
                             {title}
                         </Heading>
@@ -178,6 +208,11 @@ export default class LoginWithQRFlow extends React.Component<Props> {
                 backButton = false;
                 main = (
                     <>
+                        {this.props.intent === RendezvousIntent.LOGIN_ON_NEW_DEVICE && (
+                            <BigIcon>
+                                <MobileIcon />
+                            </BigIcon>
+                        )}
                         <Heading as="h1" size="sm" weight="semibold">
                             {_t("auth|qr_code_login|check_code_heading")}
                         </Heading>
@@ -209,39 +244,78 @@ export default class LoginWithQRFlow extends React.Component<Props> {
 
                 buttons = (
                     <>
-                        <AccessibleButton
+                        <Button
                             data-testid="approve-login-button"
                             kind="primary"
+                            size="lg"
                             onClick={this.handleClick(Click.Approve)}
                         >
                             {_t("action|continue")}
-                        </AccessibleButton>
-                        <AccessibleButton
+                        </Button>
+                        <Button
                             data-testid="decline-login-button"
-                            kind="primary_outline"
+                            kind="tertiary"
+                            size="lg"
                             onClick={this.handleClick(Click.Decline)}
                         >
                             {_t("action|cancel")}
-                        </AccessibleButton>
+                        </Button>
                     </>
                 );
                 break;
             case Phase.ShowingQR: {
-                const steps = [
-                    _t("auth|qr_code_login|open_element_other_device", {
-                        brand: SdkConfig.get().brand,
-                    }),
-                    _t("auth|qr_code_login|select_qr_code", {
-                        scanQRCode: <strong>{_t("auth|qr_code_login|scan_qr_code")}</strong>,
-                    }),
-                    _t("auth|qr_code_login|point_the_camera"),
-                    _t("auth|qr_code_login|follow_remaining_instructions"),
-                ];
+                let steps: ReactNode;
+                if (this.props.intent === RendezvousIntent.LOGIN_ON_NEW_DEVICE) {
+                    steps = (
+                        <>
+                            <li>
+                                {_t("auth|qr_code_login|open_element_mobile_device", {
+                                    brand: SdkConfig.get().brand,
+                                })}
+                            </li>
+                            <li>
+                                {_t("auth|qr_code_login|tap_avatar_link_new_device", {
+                                    linkNewDevice: <strong>{_t("settings|sessions|sign_in_with_qr")}</strong>,
+                                })}
+                            </li>
+                            <li>
+                                {_t("auth|qr_code_login|choose_desktop_computer", {
+                                    desktopComputer: <strong>{_t("auth|qr_code_login|desktop_computer")}</strong>,
+                                })}
+                            </li>
+                            <li>
+                                {_t("auth|qr_code_login|select_ready_to_scan", {
+                                    readyToScan: <strong>{_t("auth|qr_code_login|ready_to_scan")}</strong>,
+                                })}
+                            </li>
+                            <li>{_t("auth|qr_code_login|follow_remaining_instructions")}</li>
+                        </>
+                    );
+                } else {
+                    steps = (
+                        <>
+                            <li>
+                                {_t("auth|qr_code_login|open_element_other_device", {
+                                    brand: SdkConfig.get().brand,
+                                })}
+                            </li>
+                            <li>
+                                {_t("auth|qr_code_login|select_qr_code", {
+                                    scanQRCode: <strong>{_t("auth|qr_code_login|scan_qr_code")}</strong>,
+                                })}
+                            </li>
+                            <li>{_t("auth|qr_code_login|point_the_camera")}</li>
+                            <li>{_t("auth|qr_code_login|follow_remaining_instructions")}</li>
+                        </>
+                    );
+                }
 
                 main = (
                     <>
                         <Heading as="h1" size="sm" weight="semibold">
-                            {_t("auth|qr_code_login|scan_code_instruction")}
+                            {this.props.intent === RendezvousIntent.LOGIN_ON_NEW_DEVICE
+                                ? _t("auth|qr_code_login|scan_code_instruction")
+                                : _t("auth|qr_code_login|scan_code_instruction_reciprocate")}
                         </Heading>
                         <div className="mx_LoginWithQR_qrWrapper">
                             {this.props.code ? (
@@ -250,11 +324,7 @@ export default class LoginWithQRFlow extends React.Component<Props> {
                                 <Spinner />
                             )}
                         </div>
-                        <ol>
-                            {steps.map((step, i) => (
-                                <li key={i}>{step}</li>
-                            ))}
-                        </ol>
+                        <ol>{steps}</ol>
                     </>
                 );
                 break;
@@ -263,18 +333,27 @@ export default class LoginWithQRFlow extends React.Component<Props> {
                 main = this.simpleSpinner();
                 break;
             case Phase.WaitingForDevice:
-                main = (
-                    <>
-                        {this.simpleSpinner(_t("auth|qr_code_login|waiting_for_device"))}
-                        {this.props.userCode ? (
-                            <div>
-                                <p>{_t("auth|qr_code_login|security_code")}</p>
-                                <p>{_t("auth|qr_code_login|security_code_prompt")}</p>
-                                <p>{this.props.userCode}</p>
-                            </div>
-                        ) : null}
-                    </>
-                );
+                main =
+                    this.props.intent === RendezvousIntent.LOGIN_ON_NEW_DEVICE ? (
+                        <>
+                            <BigIcon>
+                                <LockSolidIcon />
+                            </BigIcon>
+                            <Heading as="h1" size="sm" weight="semibold">
+                                {_t("auth|qr_code_login|security_code_title")}
+                            </Heading>
+                            <Text size="md">{_t("auth|qr_code_login|security_code_prompt")}</Text>
+                            <MFAInput
+                                className="mx_LoginWithQR_checkCode_input mx_no_textinput"
+                                length={6}
+                                value={this.props.userCode}
+                                disabled
+                            />
+                            {this.simpleSpinner(_t("auth|qr_code_login|waiting_for_device"))}
+                        </>
+                    ) : (
+                        this.simpleSpinner(_t("auth|qr_code_login|waiting_for_device"))
+                    );
                 buttons = this.cancelButton();
                 break;
             case Phase.Verifying:
@@ -284,12 +363,12 @@ export default class LoginWithQRFlow extends React.Component<Props> {
 
         return (
             <div data-testid="login-with-qr" className={classNames("mx_LoginWithQR", className)}>
-                {backButton ? (
+                {this.props.intent === RendezvousIntent.RECIPROCATE_LOGIN_ON_EXISTING_DEVICE && backButton ? (
                     <div className="mx_LoginWithQR_heading">
                         <AccessibleButton
                             data-testid="back-button"
                             className="mx_LoginWithQR_BackButton"
-                            onClick={this.handleClick(Click.Back)}
+                            onClick={this.handleClick(Click.Cancel)}
                             title={_t("action|back")}
                         >
                             <ChevronLeftIcon />
diff --git a/apps/web/src/components/views/auth/PasswordLogin.tsx b/apps/web/src/components/views/auth/PasswordLogin.tsx
index 1fa0c4fa38..6898846a64 100644
--- a/apps/web/src/components/views/auth/PasswordLogin.tsx
+++ b/apps/web/src/components/views/auth/PasswordLogin.tsx
@@ -12,7 +12,6 @@ import { Button } from "@vector-im/compound-web";
 
 import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
-import { type ValidatedServerConfig } from "../../../utils/ValidatedServerConfig";
 import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
 import withValidation, { type IFieldState, type IValidationResult } from "../elements/Validation";
 import Field from "../elements/Field";
@@ -28,7 +27,6 @@ interface IProps {
     phoneCountry: string;
     phoneNumber: string;
 
-    serverConfig: ValidatedServerConfig;
     loginIncorrect: boolean;
     disableSubmit?: boolean;
     busy?: boolean;
@@ -66,10 +64,10 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
     private [LoginField.Password]: Field | null = null;
 
     public static defaultProps = {
-        onUsernameChanged: function () {},
-        onUsernameBlur: function () {},
-        onPhoneCountryChanged: function () {},
-        onPhoneNumberChanged: function () {},
+        onUsernameChanged: function (): void {},
+        onUsernameBlur: function (): void {},
+        onPhoneCountryChanged: function (): void {},
+        onPhoneNumberChanged: function (): void {},
         loginIncorrect: false,
         disableSubmit: false,
     };
diff --git a/apps/web/src/components/views/auth/RegistrationForm.tsx b/apps/web/src/components/views/auth/RegistrationForm.tsx
index 10b01087e8..0577de31f5 100644
--- a/apps/web/src/components/views/auth/RegistrationForm.tsx
+++ b/apps/web/src/components/views/auth/RegistrationForm.tsx
@@ -9,7 +9,6 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type JSX, type BaseSyntheticEvent, type ComponentProps, type ReactNode } from "react";
 import { type MatrixClient, MatrixError } from "matrix-js-sdk/src/matrix";
-import { logger } from "matrix-js-sdk/src/logger";
 import { Button } from "@vector-im/compound-web";
 
 import * as Email from "../../../email";
@@ -19,7 +18,6 @@ import { _t, _td } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
 import { SAFE_LOCALPART_REGEX } from "../../../Registration";
 import withValidation, { type IFieldState, type IValidationResult } from "../elements/Validation";
-import { type ValidatedServerConfig } from "../../../utils/ValidatedServerConfig";
 import EmailField from "./EmailField";
 import PassphraseField from "./PassphraseField";
 import Field from "../elements/Field";
@@ -56,7 +54,6 @@ interface IProps {
     flows: {
         stages: string[];
     }[];
-    serverConfig: ValidatedServerConfig;
     canSubmit?: boolean;
     matrixClient: MatrixClient;
     mobileRegister?: boolean;
@@ -68,7 +65,6 @@ interface IProps {
         phoneCountry?: string;
         phoneNumber?: string;
     }): Promise<void>;
-    onEditServerDetailsClick?(): void;
 }
 
 interface IState {
@@ -95,7 +91,6 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
     private [RegistrationField.PhoneNumber]: Field | null = null;
 
     public static defaultProps = {
-        onValidationChange: logger.error,
         canSubmit: true,
     };
 
diff --git a/apps/web/src/components/views/auth/Welcome.tsx b/apps/web/src/components/views/auth/Welcome.tsx
index f8c00b2127..fc2c63c436 100644
--- a/apps/web/src/components/views/auth/Welcome.tsx
+++ b/apps/web/src/components/views/auth/Welcome.tsx
@@ -7,7 +7,6 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type ReactNode } from "react";
 import classNames from "classnames";
-import { type EmptyObject } from "matrix-js-sdk/src/matrix";
 import { Glass } from "@vector-im/compound-web";
 
 import SdkConfig from "../../../SdkConfig";
@@ -18,8 +17,13 @@ import LanguageSelector from "./LanguageSelector";
 import EmbeddedPage from "../../structures/EmbeddedPage";
 import { MATRIX_LOGO_HTML } from "../../structures/static-page-vars";
 import DefaultWelcome from "./DefaultWelcome.tsx";
+import { type ValidatedServerConfig } from "../../../utils/ValidatedServerConfig.ts";
 
-export default class Welcome extends React.PureComponent<EmptyObject> {
+interface Props {
+    serverConfig: ValidatedServerConfig;
+}
+
+export default class Welcome extends React.PureComponent<Props> {
     public render(): React.ReactNode {
         const pagesConfig = SdkConfig.getObject("embedded_pages");
         const pageUrl = pagesConfig?.get("welcome_url");
@@ -36,7 +40,7 @@ export default class Welcome extends React.PureComponent<EmptyObject> {
         if (pageUrl) {
             body = <EmbeddedPage className="mx_WelcomePage" url={pageUrl} replaceMap={replaceMap} />;
         } else {
-            body = <DefaultWelcome />;
+            body = <DefaultWelcome serverConfig={this.props.serverConfig} />;
         }
 
         return (
diff --git a/apps/web/src/components/views/avatars/DecoratedRoomAvatar.tsx b/apps/web/src/components/views/avatars/DecoratedRoomAvatar.tsx
index ac7206ae59..e1e689384d 100644
--- a/apps/web/src/components/views/avatars/DecoratedRoomAvatar.tsx
+++ b/apps/web/src/components/views/avatars/DecoratedRoomAvatar.tsx
@@ -22,7 +22,7 @@ import { Tooltip } from "@vector-im/compound-web";
 import { PublicIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import RoomAvatar from "./RoomAvatar";
-import NotificationBadge from "../rooms/NotificationBadge";
+import { NotificationBadge } from "../rooms/NotificationBadge/NotificationBadge";
 import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
 import { type NotificationState } from "../../../stores/notifications/NotificationState";
 import { isPresenceEnabled } from "../../../utils/presence";
@@ -196,7 +196,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
                 <NotificationBadge
                     notification={this.state.notificationState}
                     hideIfDot={this.props.hideIfDot}
-                    roomId={this.props.room.roomId}
+                    className="mx_DecoratedRoomAvatar_notificationBadge"
                 />
             );
         }
diff --git a/apps/web/src/components/views/avatars/WidgetAvatar.tsx b/apps/web/src/components/views/avatars/WidgetAvatar.tsx
index 5baba7ca01..68f4221e5c 100644
--- a/apps/web/src/components/views/avatars/WidgetAvatar.tsx
+++ b/apps/web/src/components/views/avatars/WidgetAvatar.tsx
@@ -13,6 +13,11 @@ import classNames from "classnames";
 import { type IApp, isAppWidget } from "../../../stores/WidgetStore";
 import BaseAvatar, { type BaseAvatarType } from "./BaseAvatar";
 import { mediaFromMxc } from "../../../customisations/Media";
+import DefaultAppSvg from "../../../../res/img/element-icons/room/default_app.svg";
+import DefaultVideoSvg from "../../../../res/img/element-icons/room/default_video.svg";
+import DefaultCalSvg from "../../../../res/img/element-icons/room/default_cal.svg";
+import DefaultDocSvg from "../../../../res/img/element-icons/room/default_doc.svg";
+import DefaultClockSvg from "../../../../res/img/element-icons/room/default_clock.svg";
 
 interface IProps extends Omit<ComponentProps<BaseAvatarType>, "name" | "url" | "urls"> {
     app: IApp | IWidget;
@@ -20,19 +25,17 @@ interface IProps extends Omit<ComponentProps<BaseAvatarType>, "name" | "url" | "
 }
 
 const WidgetAvatar: React.FC<IProps> = ({ app, className, size = "20px", ...props }) => {
-    /* eslint-disable @typescript-eslint/no-require-imports */
-    let iconUrls = [require("../../../../res/img/element-icons/room/default_app.svg").default];
+    let iconUrl = DefaultAppSvg;
     // heuristics for some better icons until Widgets support their own icons
     if (app.type.includes("jitsi")) {
-        iconUrls = [require("../../../../res/img/element-icons/room/default_video.svg").default];
+        iconUrl = DefaultVideoSvg;
     } else if (app.type.includes("meeting") || app.type.includes("calendar")) {
-        iconUrls = [require("../../../../res/img/element-icons/room/default_cal.svg").default];
+        iconUrl = DefaultCalSvg;
     } else if (app.type.includes("pad") || app.type.includes("doc") || app.type.includes("calc")) {
-        iconUrls = [require("../../../../res/img/element-icons/room/default_doc.svg").default];
+        iconUrl = DefaultDocSvg;
     } else if (app.type.includes("clock")) {
-        iconUrls = [require("../../../../res/img/element-icons/room/default_clock.svg").default];
+        iconUrl = DefaultClockSvg;
     }
-    /* eslint-enable @typescript-eslint/no-require-imports */
 
     return (
         <BaseAvatar
@@ -43,7 +46,7 @@ const WidgetAvatar: React.FC<IProps> = ({ app, className, size = "20px", ...prop
             className={classNames("mx_WidgetAvatar", className)}
             // MSC2765
             url={isAppWidget(app) && app.avatar_url ? mediaFromMxc(app.avatar_url).getSquareThumbnailHttp(20) : null}
-            urls={iconUrls}
+            urls={[iconUrl]}
             size={size}
         />
     );
diff --git a/apps/web/src/components/views/avatars/WithPresenceIndicator.tsx b/apps/web/src/components/views/avatars/WithPresenceIndicator.tsx
index b7997901ac..92b93adb4e 100644
--- a/apps/web/src/components/views/avatars/WithPresenceIndicator.tsx
+++ b/apps/web/src/components/views/avatars/WithPresenceIndicator.tsx
@@ -15,43 +15,28 @@ import {
     type User,
     UserEvent,
 } from "matrix-js-sdk/src/matrix";
-import { Tooltip } from "@vector-im/compound-web";
 
 import { isPresenceEnabled } from "../../../utils/presence";
-import { _t } from "../../../languageHandler";
 import DMRoomMap from "../../../utils/DMRoomMap";
 import { getJoinedNonFunctionalMembers } from "../../../utils/room/getJoinedNonFunctionalMembers";
 import { useEventEmitter } from "../../../hooks/useEventEmitter";
 import { BUSY_PRESENCE_NAME } from "../rooms/PresenceLabel";
+import AvatarPresenceIconView from "../rooms/MemberList/tiles/common/PresenceIconView";
 
 interface Props {
     room: Room;
-    size: string; // CSS size
-    tooltipProps?: {
-        tabIndex?: number;
-    };
     children: ReactNode;
 }
 
 export enum Presence {
-    // Note: the names here are used in CSS class names
-    Online = "ONLINE",
-    Away = "AWAY",
-    Offline = "OFFLINE",
-    Busy = "BUSY",
-}
-
-function tooltipText(variant: Presence): string {
-    switch (variant) {
-        case Presence.Online:
-            return _t("presence|online");
-        case Presence.Away:
-            return _t("presence|away");
-        case Presence.Offline:
-            return _t("presence|offline");
-        case Presence.Busy:
-            return _t("presence|busy");
-    }
+    // This class used to have its own presence indicator and has been
+    // updated to use the new one so presence colours / icons match across the app.
+    // These values are the ones from the wire that PresenceIconView expects,
+    // but really some of the logic here could be deduplicated.
+    Online = "online",
+    Away = "unavailable",
+    Offline = "offline",
+    Busy = "busy",
 }
 
 function getDmMember(room: Room): RoomMember | null {
@@ -117,22 +102,13 @@ export const usePresence = (room: Room, member: RoomMember | null): Presence | n
     return presence;
 };
 
-const WithPresenceIndicator: React.FC<Props> = ({ room, size, tooltipProps, children }) => {
+const WithPresenceIndicator: React.FC<Props> = ({ room, children }) => {
     const dmMember = useDmMember(room);
     const presence = usePresence(room, dmMember);
 
     let icon: JSX.Element | undefined;
     if (presence) {
-        icon = (
-            <div
-                tabIndex={tooltipProps?.tabIndex ?? 0}
-                className={`mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_${presence.toLowerCase()}`}
-                style={{
-                    width: size,
-                    height: size,
-                }}
-            />
-        );
+        icon = <AvatarPresenceIconView presenceState={presence} />;
     }
 
     if (!presence) return <>{children}</>;
@@ -140,9 +116,7 @@ const WithPresenceIndicator: React.FC<Props> = ({ room, size, tooltipProps, chil
     return (
         <div className="mx_WithPresenceIndicator">
             {children}
-            <Tooltip label={tooltipText(presence)} placement="bottom">
-                {icon}
-            </Tooltip>
+            <div className="mx_WithPresenceIndicator_icon">{icon}</div>
         </div>
     );
 };
diff --git a/apps/web/src/components/views/beacon/BeaconListItem.tsx b/apps/web/src/components/views/beacon/BeaconListItem.tsx
index fb2dc2e17d..f86256d449 100644
--- a/apps/web/src/components/views/beacon/BeaconListItem.tsx
+++ b/apps/web/src/components/views/beacon/BeaconListItem.tsx
@@ -58,6 +58,7 @@ const BeaconListItem: React.FC<Props & HTMLProps<HTMLLIElement>> = ({ beacon, ..
                 >
                     {/* eat events from interactive share buttons
                 so parent click handlers are not triggered */}
+                    {/* oxlint-disable-next-line jsx-a11y/click-events-have-key-events */}
                     <div className="mx_BeaconListItem_interactions" onClick={preventDefaultWrapper(() => {})}>
                         <ShareLatestLocation latestLocationState={latestLocationState} />
                     </div>
diff --git a/apps/web/src/components/views/beacon/BeaconStatus.tsx b/apps/web/src/components/views/beacon/BeaconStatus.tsx
index 0ed7ceb4b0..0b328b0836 100644
--- a/apps/web/src/components/views/beacon/BeaconStatus.tsx
+++ b/apps/web/src/components/views/beacon/BeaconStatus.tsx
@@ -69,14 +69,12 @@ const BeaconStatus: React.FC<Props & HTMLProps<HTMLDivElement>> = ({
                 )}
                 {displayStatus === BeaconDisplayStatus.Active && beacon && (
                     <>
-                        <>
-                            <span className="mx_BeaconStatus_label">{label}</span>
-                            {displayLiveTimeRemaining ? (
-                                <LiveTimeRemaining beacon={beacon} />
-                            ) : (
-                                <BeaconExpiryTime beacon={beacon} />
-                            )}
-                        </>
+                        <span className="mx_BeaconStatus_label">{label}</span>
+                        {displayLiveTimeRemaining ? (
+                            <LiveTimeRemaining beacon={beacon} />
+                        ) : (
+                            <BeaconExpiryTime beacon={beacon} />
+                        )}
                     </>
                 )}
             </div>
diff --git a/apps/web/src/components/views/beacon/BeaconViewDialog.tsx b/apps/web/src/components/views/beacon/BeaconViewDialog.tsx
index ab6c6cf3c0..0dac669489 100644
--- a/apps/web/src/components/views/beacon/BeaconViewDialog.tsx
+++ b/apps/web/src/components/views/beacon/BeaconViewDialog.tsx
@@ -10,7 +10,7 @@ import React, { useState, useEffect } from "react";
 import { type MatrixClient, type Beacon, type Room } from "matrix-js-sdk/src/matrix";
 
 import type * as maplibregl from "maplibre-gl";
-import { Icon as LiveLocationIcon } from "../../../../res/img/location/live-location.svg";
+import LiveLocationIcon from "../../../../res/img/location/live-location.svg?react";
 import { useLiveBeacons } from "../../../utils/beacon/useLiveBeacons";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import BaseDialog from "../dialogs/BaseDialog";
diff --git a/apps/web/src/components/views/beacon/LeftPanelLiveShareWarning.tsx b/apps/web/src/components/views/beacon/LeftPanelLiveShareWarning.tsx
index d5338cf28f..f7cd133541 100644
--- a/apps/web/src/components/views/beacon/LeftPanelLiveShareWarning.tsx
+++ b/apps/web/src/components/views/beacon/LeftPanelLiveShareWarning.tsx
@@ -13,7 +13,7 @@ import { type Beacon, type BeaconIdentifier } from "matrix-js-sdk/src/matrix";
 import { useEventEmitterState } from "../../../hooks/useEventEmitter";
 import { _t } from "../../../languageHandler";
 import { OwnBeaconStore, OwnBeaconStoreEvent } from "../../../stores/OwnBeaconStore";
-import { Icon as LiveLocationIcon } from "../../../../res/img/location/live-location.svg";
+import LiveLocationIcon from "../../../../res/img/location/live-location.svg?react";
 import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { Action } from "../../../dispatcher/actions";
 import dispatcher from "../../../dispatcher/dispatcher";
diff --git a/apps/web/src/components/views/beacon/RoomCallBanner.tsx b/apps/web/src/components/views/beacon/RoomCallBanner.tsx
deleted file mode 100644
index e8b6895720..0000000000
--- a/apps/web/src/components/views/beacon/RoomCallBanner.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { useCallback } from "react";
-import { type Room } from "matrix-js-sdk/src/matrix";
-import { logger } from "matrix-js-sdk/src/logger";
-import { VideoCallSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-
-import { _t } from "../../../languageHandler";
-import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
-import defaultDispatcher from "../../../dispatcher/dispatcher";
-import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
-import { Action } from "../../../dispatcher/actions";
-import { ConnectionState, type ElementCall } from "../../../models/Call";
-import { useCall } from "../../../hooks/useCall";
-import { useEventEmitterState } from "../../../hooks/useEventEmitter";
-import { OwnBeaconStore, OwnBeaconStoreEvent } from "../../../stores/OwnBeaconStore";
-import { SessionDuration } from "../voip/CallDuration";
-import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext";
-
-interface RoomCallBannerProps {
-    roomId: Room["roomId"];
-    call: ElementCall;
-}
-
-const RoomCallBannerInner: React.FC<RoomCallBannerProps> = ({ roomId, call }) => {
-    const connect = useCallback(
-        (ev: ButtonEvent) => {
-            ev.preventDefault();
-            defaultDispatcher.dispatch<ViewRoomPayload>({
-                action: Action.ViewRoom,
-                room_id: roomId,
-                view_call: true,
-                skipLobby: ("shiftKey" in ev && ev.shiftKey) || undefined,
-                metricsTrigger: undefined,
-            });
-        },
-        [roomId],
-    );
-
-    // TODO matrix rtc
-    const onClick = useCallback(() => {
-        logger.log("clicking on the call banner is not supported anymore - there are no timeline events anymore.");
-        let messageLikeEventId: string | undefined;
-        if (!messageLikeEventId) {
-            // Until we have a timeline event for calls this will always be true.
-            // We will never jump to the non existing timeline event.
-            logger.error("Couldn't find a group call event to jump to");
-            return;
-        }
-
-        defaultDispatcher.dispatch<ViewRoomPayload>({
-            action: Action.ViewRoom,
-            room_id: roomId,
-            metricsTrigger: undefined,
-            event_id: messageLikeEventId,
-            scroll_into_view: true,
-            highlighted: true,
-        });
-    }, [roomId]);
-
-    return (
-        <div className="mx_RoomCallBanner" onClick={onClick}>
-            <div className="mx_RoomCallBanner_text">
-                <span className="mx_RoomCallBanner_label">
-                    <VideoCallSolidIcon />
-                    {_t("voip|video_call")}
-                </span>
-                <SessionDuration session={call.session} />
-            </div>
-
-            <AccessibleButton onClick={connect} kind="primary" element="button" disabled={false}>
-                {_t("action|join")}
-            </AccessibleButton>
-        </div>
-    );
-};
-
-interface Props {
-    roomId: Room["roomId"];
-}
-
-const RoomCallBanner: React.FC<Props> = ({ roomId }) => {
-    const call = useCall(roomId);
-    const { roomViewStore } = useScopedRoomContext("roomViewStore");
-    // this section is to check if we have a live location share. If so, we dont show the call banner
-    const isMonitoringLiveLocation = useEventEmitterState(
-        OwnBeaconStore.instance,
-        OwnBeaconStoreEvent.MonitoringLivePosition,
-        () => OwnBeaconStore.instance.isMonitoringLiveLocation,
-    );
-
-    const liveBeaconIds = useEventEmitterState(OwnBeaconStore.instance, OwnBeaconStoreEvent.LivenessChange, () =>
-        OwnBeaconStore.instance.getLiveBeaconIds(roomId),
-    );
-
-    if (isMonitoringLiveLocation && liveBeaconIds.length) {
-        return null;
-    }
-
-    // Check if the call is already showing. No banner is needed in this case.
-    if (roomViewStore.isViewingCall()) {
-        return null;
-    }
-
-    // Split into outer/inner to avoid watching various parts if there is no call
-    // No banner if the call is connected (or connecting/disconnecting)
-    if (call !== null && call.connectionState === ConnectionState.Disconnected) {
-        return <RoomCallBannerInner call={call as ElementCall} roomId={roomId} />;
-    }
-
-    return null;
-};
-
-export default RoomCallBanner;
diff --git a/apps/web/src/components/views/beacon/StyledLiveBeaconIcon.tsx b/apps/web/src/components/views/beacon/StyledLiveBeaconIcon.tsx
index c73931918f..caec87b794 100644
--- a/apps/web/src/components/views/beacon/StyledLiveBeaconIcon.tsx
+++ b/apps/web/src/components/views/beacon/StyledLiveBeaconIcon.tsx
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React from "react";
 import classNames from "classnames";
 
-import { Icon as LiveLocationIcon } from "../../../../res/img/location/live-location.svg";
+import LiveLocationIcon from "../../../../res/img/location/live-location.svg?react";
 
 interface Props extends React.SVGProps<SVGSVGElement> {
     // use error styling when true
diff --git a/apps/web/src/components/views/context_menus/LegacyCallContextMenu.tsx b/apps/web/src/components/views/context_menus/LegacyCallContextMenu.tsx
index 3427ed183b..e5a23aac8e 100644
--- a/apps/web/src/components/views/context_menus/LegacyCallContextMenu.tsx
+++ b/apps/web/src/components/views/context_menus/LegacyCallContextMenu.tsx
@@ -10,26 +10,29 @@ import { type MatrixCall } from "matrix-js-sdk/src/webrtc/call";
 
 import { _t } from "../../../languageHandler";
 import ContextMenu, { type IProps as IContextMenuProps, MenuItem } from "../../structures/ContextMenu";
-import LegacyCallHandler from "../../../LegacyCallHandler";
+import { SDKContext } from "../../../contexts/SDKContext.ts";
 
 interface IProps extends IContextMenuProps {
     call: MatrixCall;
 }
 
 export default class LegacyCallContextMenu extends React.Component<IProps> {
+    public static contextType = SDKContext;
+    declare public context: React.ContextType<typeof SDKContext>;
+
     public onHoldClick = (): void => {
         this.props.call.setRemoteOnHold(true);
         this.props.onFinished();
     };
 
     public onUnholdClick = (): void => {
-        LegacyCallHandler.instance.setActiveCallRoomId(this.props.call.roomId);
+        this.context.legacyCallHandler.setActiveCallRoomId(this.props.call.roomId);
 
         this.props.onFinished();
     };
 
     public onTransferClick = (): void => {
-        LegacyCallHandler.instance.showTransferDialog(this.props.call);
+        this.context.legacyCallHandler.showTransferDialog(this.props.call);
         this.props.onFinished();
     };
 
diff --git a/apps/web/src/components/views/context_menus/MessageContextMenu.tsx b/apps/web/src/components/views/context_menus/MessageContextMenu.tsx
index b6f9821dd4..086301ee57 100644
--- a/apps/web/src/components/views/context_menus/MessageContextMenu.tsx
+++ b/apps/web/src/components/views/context_menus/MessageContextMenu.tsx
@@ -372,7 +372,6 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             {
                 matrixClient,
                 event: this.props.mxEvent,
-                getRelationsForEvent: this.props.getRelationsForEvent,
             },
             "mx_Dialog_endPoll",
         );
diff --git a/apps/web/src/components/views/context_menus/RoomGeneralContextMenu.tsx b/apps/web/src/components/views/context_menus/RoomGeneralContextMenu.tsx
index d60221d8e8..5da2978f83 100644
--- a/apps/web/src/components/views/context_menus/RoomGeneralContextMenu.tsx
+++ b/apps/web/src/components/views/context_menus/RoomGeneralContextMenu.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { logger } from "matrix-js-sdk/src/logger";
-import { type Room } from "matrix-js-sdk/src/matrix";
+import { type Room, RoomEvent } from "matrix-js-sdk/src/matrix";
 import React, { type JSX, useContext } from "react";
 import {
     FavouriteSolidIcon,
@@ -30,7 +30,6 @@ import { getKeyBindingsManager } from "../../../KeyBindingsManager";
 import { _t } from "../../../languageHandler";
 import { NotificationLevel } from "../../../stores/notifications/NotificationLevel";
 import { DefaultTagID, type TagID } from "../../../stores/room-list-v3/skip-list/tag";
-import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore";
 import DMRoomMap from "../../../utils/DMRoomMap";
 import { clearRoomNotification, setMarkedUnreadState } from "../../../utils/notifications";
 import { type IProps as IContextMenuProps } from "../../structures/ContextMenu";
@@ -122,7 +121,7 @@ export const RoomGeneralContextMenu: React.FC<RoomGeneralContextMenuProps> = ({
     ...props
 }) => {
     const cli = useContext(MatrixClientContext);
-    const roomTags = useEventEmitterState(RoomListStore.instance, LISTS_UPDATE_EVENT, () => getTagsForRoom(room));
+    const roomTags = useEventEmitterState(room, RoomEvent.Tags, () => getTagsForRoom(room));
     const isDm = DMRoomMap.shared().getUserIdForRoomId(room.roomId);
     const wrapHandler = (
         handler: (ev: ButtonEvent) => void,
diff --git a/apps/web/src/components/views/context_menus/ThreadListContextMenu.tsx b/apps/web/src/components/views/context_menus/ThreadListContextMenu.tsx
index 2b3ee57653..8d0feefff4 100644
--- a/apps/web/src/components/views/context_menus/ThreadListContextMenu.tsx
+++ b/apps/web/src/components/views/context_menus/ThreadListContextMenu.tsx
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useContext, useEffect } from "react";
 import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { LinkIcon, OverflowHorizontalIcon, VisibilityOnIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
@@ -18,9 +18,8 @@ import { copyPlaintext } from "../../../utils/strings";
 import { ChevronFace, ContextMenuTooltipButton, type MenuProps, useContextMenu } from "../../structures/ContextMenu";
 import { _t } from "../../../languageHandler";
 import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList } from "./IconizedContextMenu";
-import { WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
+import { SDKContext } from "../../../contexts/SDKContext.ts";
 
 export interface ThreadListContextMenuProps {
     mxEvent: MatrixEvent;
@@ -42,6 +41,7 @@ const ThreadListContextMenu: React.FC<ThreadListContextMenuProps> = ({
     onMenuToggle,
     ...props
 }) => {
+    const sdkContext = useContext(SDKContext);
     const [menuDisplayed, button, openMenu, closeThreadOptions] = useContextMenu();
 
     const viewInRoom = useCallback(
@@ -77,8 +77,8 @@ const ThreadListContextMenu: React.FC<ThreadListContextMenuProps> = ({
         onMenuToggle?.(menuDisplayed);
     }, [menuDisplayed, onMenuToggle]);
 
-    const room = MatrixClientPeg.safeGet().getRoom(mxEvent.getRoomId());
-    const isMainSplitTimelineShown = !!room && !WidgetLayoutStore.instance.hasMaximisedWidget(room);
+    const room = sdkContext.client?.getRoom(mxEvent.getRoomId());
+    const isMainSplitTimelineShown = !!room && !sdkContext.widgetLayoutStore.hasMaximisedWidget(room);
     return (
         <React.Fragment>
             <ContextMenuTooltipButton
diff --git a/apps/web/src/components/views/context_menus/WidgetContextMenu.tsx b/apps/web/src/components/views/context_menus/WidgetContextMenu.tsx
deleted file mode 100644
index d0a168f691..0000000000
--- a/apps/web/src/components/views/context_menus/WidgetContextMenu.tsx
+++ /dev/null
@@ -1,255 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { type JSX, type ComponentProps, useContext } from "react";
-import { type IWidget, MatrixCapabilities } from "matrix-widget-api";
-import { logger } from "matrix-js-sdk/src/logger";
-import { type ApprovalOpts, WidgetLifecycle } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle";
-import { type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
-
-import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList } from "./IconizedContextMenu";
-import { ChevronFace } from "../../structures/ContextMenu";
-import { _t } from "../../../languageHandler";
-import { isAppWidget } from "../../../stores/WidgetStore";
-import WidgetUtils from "../../../utils/WidgetUtils";
-import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingStore";
-import dis from "../../../dispatcher/dispatcher";
-import SettingsStore from "../../../settings/SettingsStore";
-import Modal from "../../../Modal";
-import QuestionDialog from "../dialogs/QuestionDialog";
-import ErrorDialog from "../dialogs/ErrorDialog";
-import { WidgetType } from "../../../widgets/WidgetType";
-import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import { WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
-import { getConfigLivestreamUrl, startJitsiAudioLivestream } from "../../../Livestream";
-import { ModuleRunner } from "../../../modules/ModuleRunner";
-import { ElementWidget, type WidgetMessaging } from "../../../stores/widgets/WidgetMessaging";
-import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";
-
-interface IProps extends Omit<ComponentProps<typeof IconizedContextMenu>, "children"> {
-    app: IWidget;
-    userWidget?: boolean;
-    showUnpin?: boolean;
-    // override delete handler
-    onDeleteClick?(this: void): void;
-    // override edit handler
-    onEditClick?(this: void): void;
-}
-
-const showStreamAudioStreamButton = (app: IWidget): boolean => {
-    return !!getConfigLivestreamUrl() && WidgetType.JITSI.matches(app.type);
-};
-
-const showEditButton = (app: IWidget, canModify: boolean): boolean => {
-    return canModify && WidgetUtils.isManagedByManager(app);
-};
-
-const showRevokeButton = (
-    cli: MatrixClient,
-    roomId: string | undefined,
-    app: IWidget,
-    userWidget: boolean | undefined,
-): boolean => {
-    const isAllowedWidget =
-        (isAppWidget(app) &&
-            app.eventId !== undefined &&
-            (SettingsStore.getValue("allowedWidgets", roomId)[app.eventId] ?? false)) ||
-        app.creatorUserId === cli?.getUserId();
-
-    const isLocalWidget = WidgetType.JITSI.matches(app.type);
-    return !userWidget && !isLocalWidget && isAllowedWidget;
-};
-
-const showDeleteButton = (canModify: boolean, onDeleteClick: undefined | (() => void)): boolean => {
-    return !!onDeleteClick || canModify;
-};
-
-const showSnapshotButton = (widgetMessaging: WidgetMessaging | undefined): boolean => {
-    return (
-        SettingsStore.getValue("enableWidgetScreenshots") &&
-        !!widgetMessaging?.widgetApi?.hasCapability(MatrixCapabilities.Screenshots)
-    );
-};
-
-const showMoveButtons = (app: IWidget, room: Room | undefined, showUnpin: boolean | undefined): [boolean, boolean] => {
-    if (!showUnpin) return [false, false];
-
-    const pinnedWidgets = room ? WidgetLayoutStore.instance.getContainerWidgets(room, "top") : [];
-    const widgetIndex = pinnedWidgets.findIndex((widget) => widget.id === app.id);
-    return [widgetIndex > 0, widgetIndex < pinnedWidgets.length - 1];
-};
-
-export const WidgetContextMenu: React.FC<IProps> = ({
-    onFinished,
-    app,
-    userWidget,
-    onDeleteClick,
-    onEditClick,
-    showUnpin,
-    ...props
-}) => {
-    const cli = useContext(MatrixClientContext);
-    const { room, roomId } = useScopedRoomContext("room", "roomId");
-
-    const widgetMessaging = WidgetMessagingStore.instance.getMessagingForUid(WidgetUtils.getWidgetUid(app));
-    const canModify = userWidget || WidgetUtils.canUserModifyWidgets(cli, roomId);
-
-    let streamAudioStreamButton: JSX.Element | undefined;
-    if (roomId && showStreamAudioStreamButton(app)) {
-        const onStreamAudioClick = async (): Promise<void> => {
-            try {
-                await startJitsiAudioLivestream(cli, widgetMessaging!.widgetApi!, roomId);
-            } catch (err) {
-                logger.error("Failed to start livestream", err);
-                // XXX: won't i18n well, but looks like widget api only support 'message'?
-                const message =
-                    err instanceof Error ? err.message : _t("widget|error_unable_start_audio_stream_description");
-                Modal.createDialog(ErrorDialog, {
-                    title: _t("widget|error_unable_start_audio_stream_title"),
-                    description: message,
-                });
-            }
-            onFinished();
-        };
-        streamAudioStreamButton = (
-            <IconizedContextMenuOption
-                onClick={onStreamAudioClick}
-                label={_t("widget|context_menu|start_audio_stream")}
-            />
-        );
-    }
-
-    let editButton: JSX.Element | undefined;
-    if (showEditButton(app, canModify)) {
-        const _onEditClick = (): void => {
-            if (onEditClick) {
-                onEditClick();
-            } else if (room) {
-                WidgetUtils.editWidget(room, app);
-            }
-            onFinished();
-        };
-
-        editButton = <IconizedContextMenuOption onClick={_onEditClick} label={_t("action|edit")} />;
-    }
-
-    let snapshotButton: JSX.Element | undefined;
-    if (showSnapshotButton(widgetMessaging)) {
-        const onSnapshotClick = (): void => {
-            widgetMessaging?.widgetApi
-                ?.takeScreenshot()
-                .then((data) => {
-                    dis.dispatch({
-                        action: "picture_snapshot",
-                        file: data.screenshot,
-                    });
-                })
-                .catch((err) => {
-                    logger.error("Failed to take screenshot: ", err);
-                });
-            onFinished();
-        };
-
-        snapshotButton = (
-            <IconizedContextMenuOption onClick={onSnapshotClick} label={_t("widget|context_menu|screenshot")} />
-        );
-    }
-
-    let deleteButton: JSX.Element | undefined;
-    if (showDeleteButton(canModify, onDeleteClick)) {
-        const _onDeleteClick = (): void => {
-            if (onDeleteClick) {
-                onDeleteClick();
-            } else if (roomId) {
-                // Show delete confirmation dialog
-                const { finished } = Modal.createDialog(QuestionDialog, {
-                    title: _t("widget|context_menu|delete"),
-                    description: _t("widget|context_menu|delete_warning"),
-                    button: _t("widget|context_menu|delete"),
-                });
-
-                finished.then(([confirmed]) => {
-                    if (!confirmed) return;
-                    WidgetUtils.setRoomWidget(cli, roomId, app.id);
-                });
-            }
-
-            onFinished();
-        };
-
-        deleteButton = (
-            <IconizedContextMenuOption
-                onClick={_onDeleteClick}
-                label={userWidget ? _t("action|remove") : _t("widget|context_menu|remove")}
-            />
-        );
-    }
-
-    let revokeButton: JSX.Element | undefined;
-    if (showRevokeButton(cli, roomId, app, userWidget)) {
-        const opts: ApprovalOpts = { approved: undefined };
-        ModuleRunner.instance.invoke(WidgetLifecycle.PreLoadRequest, opts, new ElementWidget(app));
-
-        if (!opts.approved) {
-            const onRevokeClick = (): void => {
-                const eventId = isAppWidget(app) ? app.eventId : undefined;
-                logger.info("Revoking permission for widget to load: " + eventId);
-                const current = SettingsStore.getValue("allowedWidgets", roomId);
-                if (eventId !== undefined) current[eventId] = false;
-                const level = SettingsStore.firstSupportedLevel("allowedWidgets");
-                if (!level) throw new Error("level must be defined");
-                SettingsStore.setValue("allowedWidgets", roomId ?? null, level, current).catch((err) => {
-                    logger.error(err);
-                    // We don't really need to do anything about this - the user will just hit the button again.
-                });
-                onFinished();
-            };
-
-            revokeButton = (
-                <IconizedContextMenuOption onClick={onRevokeClick} label={_t("widget|context_menu|revoke")} />
-            );
-        }
-    }
-
-    const [showMoveLeftButton, showMoveRightButton] = showMoveButtons(app, room, showUnpin);
-    let moveLeftButton: JSX.Element | undefined;
-    if (showMoveLeftButton) {
-        const onClick = (): void => {
-            if (!room) throw new Error("room must be defined");
-            WidgetLayoutStore.instance.moveWithinContainer(room, "top", app, -1);
-            onFinished();
-        };
-
-        moveLeftButton = <IconizedContextMenuOption onClick={onClick} label={_t("widget|context_menu|move_left")} />;
-    }
-
-    let moveRightButton: JSX.Element | undefined;
-    if (showMoveRightButton) {
-        const onClick = (): void => {
-            if (!room) throw new Error("room must be defined");
-            WidgetLayoutStore.instance.moveWithinContainer(room, "top", app, 1);
-            onFinished();
-        };
-
-        moveRightButton = <IconizedContextMenuOption onClick={onClick} label={_t("widget|context_menu|move_right")} />;
-    }
-
-    return (
-        <IconizedContextMenu {...props} chevronFace={ChevronFace.None} onFinished={onFinished}>
-            <IconizedContextMenuOptionList>
-                {streamAudioStreamButton}
-                {editButton}
-                {revokeButton}
-                {deleteButton}
-                {snapshotButton}
-                {moveLeftButton}
-                {moveRightButton}
-            </IconizedContextMenuOptionList>
-        </IconizedContextMenu>
-    );
-};
diff --git a/apps/web/src/components/views/dialogs/AddExistingToSpaceDialog.tsx b/apps/web/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
index fd1d4117bf..a0368bade6 100644
--- a/apps/web/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
+++ b/apps/web/src/components/views/dialogs/AddExistingToSpaceDialog.tsx
@@ -13,21 +13,20 @@ import { KnownMembership } from "matrix-js-sdk/src/types";
 import { sleep } from "matrix-js-sdk/src/utils";
 import { logger } from "matrix-js-sdk/src/logger";
 import { CheckIcon, ErrorIcon, RestartIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { AutoHideScrollbar } from "@element-hq/web-shared-components";
 
 import { _t, _td } from "../../../languageHandler";
 import BaseDialog from "./BaseDialog";
 import Dropdown from "../elements/Dropdown";
 import SearchBox from "../../structures/SearchBox";
-import SpaceStore from "../../../stores/spaces/SpaceStore";
 import RoomAvatar from "../avatars/RoomAvatar";
 import { getDisplayAliasForRoom } from "../../../Rooms";
 import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
-import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import DMRoomMap from "../../../utils/DMRoomMap";
 import { calculateRoomVia } from "../../../utils/permalinks/Permalinks";
 import StyledCheckbox from "../elements/StyledCheckbox";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import { sortRooms } from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
+import { sortRoomsByRecency } from "../../../utils/room/sortRoomsByRecency";
 import ProgressBar from "../elements/ProgressBar";
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
 import QueryMatcher from "../../../autocomplete/QueryMatcher";
@@ -35,6 +34,7 @@ import LazyRenderList from "../elements/LazyRenderList";
 import { useSettingValue } from "../../../hooks/useSettings";
 import { filterBoolean } from "../../../utils/arrays";
 import { type NonEmptyArray } from "../../../@types/common";
+import { SDKContextClass } from "../../../contexts/SDKContextClass.ts";
 
 // These values match CSS
 const ROW_HEIGHT = 32 + 12;
@@ -142,7 +142,7 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
         [cli, msc3946ProcessDynamicPredecessor],
     );
 
-    const scrollRef = useRef<AutoHideScrollbar<"div">>(null);
+    const scrollRef = useRef<HTMLDivElement | null>(null);
     const [scrollState, setScrollState] = useState<IScrollState>({
         // these are estimates which update as soon as it mounts
         scrollTop: 0,
@@ -155,8 +155,14 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
     const [query, setQuery] = useState("");
     const lcQuery = query.toLowerCase().trim();
 
-    const existingSubspacesSet = useMemo(() => new Set(SpaceStore.instance.getChildSpaces(space.roomId)), [space]);
-    const existingRoomsSet = useMemo(() => new Set(SpaceStore.instance.getChildRooms(space.roomId)), [space]);
+    const existingSubspacesSet = useMemo(
+        () => new Set(SDKContextClass.instance.spaceStore.getChildSpaces(space.roomId)),
+        [space],
+    );
+    const existingRoomsSet = useMemo(
+        () => new Set(SDKContextClass.instance.spaceStore.getChildRooms(space.roomId)),
+        [space],
+    );
 
     const [spaces, rooms, dms] = useMemo(() => {
         let rooms = visibleRooms;
@@ -172,7 +178,7 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
         }
 
         const joinRule = space.getJoinRule();
-        return sortRooms(rooms).reduce<[spaces: Room[], rooms: Room[], dms: Room[]]>(
+        return sortRoomsByRecency(rooms, cli.getSafeUserId()).reduce<[spaces: Room[], rooms: Room[], dms: Room[]]>(
             (arr, room) => {
                 if (room.isSpaceRoom()) {
                     if (room !== space && !existingSubspacesSet.has(room)) {
@@ -190,7 +196,7 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
             },
             [[], [], []],
         );
-    }, [visibleRooms, space, lcQuery, existingRoomsSet, existingSubspacesSet]);
+    }, [visibleRooms, space, lcQuery, existingRoomsSet, existingSubspacesSet, cli]);
 
     const addRooms = async (): Promise<void> => {
         setError(false);
@@ -201,15 +207,17 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
         for (const room of selectedToAdd) {
             const via = calculateRoomVia(room);
             try {
-                await SpaceStore.instance.addRoomToSpace(space, room.roomId, via).catch(async (e): Promise<void> => {
-                    if (e.errcode === "M_LIMIT_EXCEEDED") {
-                        await sleep(e.data.retry_after_ms);
-                        await SpaceStore.instance.addRoomToSpace(space, room.roomId, via); // retry
-                        return;
-                    }
+                await SDKContextClass.instance.spaceStore
+                    .addRoomToSpace(space, room.roomId, via)
+                    .catch(async (e): Promise<void> => {
+                        if (e.errcode === "M_LIMIT_EXCEEDED") {
+                            await sleep(e.data.retry_after_ms);
+                            await SDKContextClass.instance.spaceStore.addRoomToSpace(space, room.roomId, via); // retry
+                            return;
+                        }
 
-                    throw e;
-                });
+                        throw e;
+                    });
                 setProgress((i) => (i ?? 0) + 1);
             } catch (e) {
                 logger.error("Failed to add rooms to space", e);
@@ -300,7 +308,7 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
     }
 
     const onScroll = (): void => {
-        const body = scrollRef.current?.containerRef.current;
+        const body = scrollRef.current;
         if (!body) return;
         setScrollState({
             scrollTop: body.scrollTop,
@@ -309,6 +317,7 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
     };
 
     const wrappedRef = (body: HTMLDivElement | null): void => {
+        scrollRef.current = body;
         if (!body) return;
         setScrollState({
             scrollTop: body.scrollTop,
@@ -329,10 +338,9 @@ export const AddExistingToSpace: React.FC<IAddExistingToSpaceProps> = ({
                 autoFocus={true}
             />
             <AutoHideScrollbar
-                className="mx_AddExistingToSpace_content"
+                className="mx_AutoHideScrollbar mx_AddExistingToSpace_content"
                 onScroll={onScroll}
                 wrappedRef={wrappedRef}
-                ref={scrollRef}
             >
                 {rooms.length > 0 && roomsRenderer
                     ? roomsRenderer(rooms, selectedToAdd, roomsScrollState, onChange)
@@ -398,7 +406,7 @@ export const SubspaceSelector: React.FC<ISubspaceSelectorProps> = ({ title, spac
     const options = useMemo(() => {
         return [
             space,
-            ...SpaceStore.instance.getChildSpaces(space.roomId).filter((space) => {
+            ...SDKContextClass.instance.spaceStore.getChildSpaces(space.roomId).filter((space) => {
                 return space.currentState.maySendStateEvent(EventType.SpaceChild, space.client.getSafeUserId());
             }),
         ];
diff --git a/apps/web/src/components/views/dialogs/AnalyticsLearnMoreDialog.tsx b/apps/web/src/components/views/dialogs/AnalyticsLearnMoreDialog.tsx
index f5481c09ce..0e9ada6f2f 100644
--- a/apps/web/src/components/views/dialogs/AnalyticsLearnMoreDialog.tsx
+++ b/apps/web/src/components/views/dialogs/AnalyticsLearnMoreDialog.tsx
@@ -14,9 +14,12 @@ import { _t } from "../../../languageHandler";
 import DialogButtons from "../elements/DialogButtons";
 import Modal, { type ComponentProps, type IHandle } from "../../../Modal";
 import SdkConfig from "../../../SdkConfig";
-import { getPolicyUrl } from "../../../toasts/AnalyticsToast";
 import ExternalLink from "../elements/ExternalLink";
 
+function getPolicyUrl(): string | undefined {
+    return SdkConfig.get("privacy_policy_url");
+}
+
 export enum ButtonClicked {
     Primary,
     Cancel,
diff --git a/apps/web/src/components/views/dialogs/AskInviteAnywayDialog.tsx b/apps/web/src/components/views/dialogs/AskInviteAnywayDialog.tsx
index ddc4c04d4a..fb6161f72c 100644
--- a/apps/web/src/components/views/dialogs/AskInviteAnywayDialog.tsx
+++ b/apps/web/src/components/views/dialogs/AskInviteAnywayDialog.tsx
@@ -77,11 +77,13 @@ export default function AskInviteAnywayDialog({
             </div>
 
             <div className="mx_Dialog_buttons">
-                <button onClick={onGiveUpClicked}>{_t("action|close")}</button>
-                <button onClick={onInviteNeverWarnClicked}>
+                <button onClick={onGiveUpClicked} type="button">
+                    {_t("action|close")}
+                </button>
+                <button onClick={onInviteNeverWarnClicked} type="button">
                     {inviteNeverWarnLabel ?? _t("invite|unable_find_profiles_invite_never_warn_label_default")}
                 </button>
-                <button onClick={onInviteClicked} autoFocus={true}>
+                <button onClick={onInviteClicked} autoFocus={true} type="button">
                     {inviteLabel ?? _t("invite|unable_find_profiles_invite_label_default")}
                 </button>
             </div>
diff --git a/apps/web/src/components/views/dialogs/BaseDialog.tsx b/apps/web/src/components/views/dialogs/BaseDialog.tsx
index 22cbbedfaa..075de1e3b0 100644
--- a/apps/web/src/components/views/dialogs/BaseDialog.tsx
+++ b/apps/web/src/components/views/dialogs/BaseDialog.tsx
@@ -12,7 +12,6 @@ import React, { type JSX } from "react";
 import FocusLock from "react-focus-lock";
 import classNames from "classnames";
 import { type MatrixClient } from "matrix-js-sdk/src/matrix";
-import { I18nContext } from "@element-hq/web-shared-components";
 import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import AccessibleButton from "../elements/AccessibleButton";
@@ -172,42 +171,38 @@ export default class BaseDialog extends React.Component<IProps> {
         }
 
         return (
-            // XXX: We can't import ModuleAPI here because it causes a dependency cycle - hack and
-            // use the copy on the window object :(
-            <I18nContext.Provider value={window.mxModuleApi.i18n}>
-                <MatrixClientContext.Provider value={this.matrixClient}>
-                    {this.props.screenName && <PosthogScreenTracker screenName={this.props.screenName} />}
-                    <FocusLock
-                        returnFocus={true}
-                        lockProps={lockProps}
-                        className={classNames(this.props.className, {
-                            mx_Dialog_fixedWidth: this.props.fixedWidth,
+            <MatrixClientContext.Provider value={this.matrixClient}>
+                {this.props.screenName && <PosthogScreenTracker screenName={this.props.screenName} />}
+                <FocusLock
+                    returnFocus={true}
+                    lockProps={lockProps}
+                    className={classNames(this.props.className, {
+                        mx_Dialog_fixedWidth: this.props.fixedWidth,
+                    })}
+                >
+                    {this.props.top}
+                    <div
+                        className={classNames("mx_Dialog_header", {
+                            mx_Dialog_headerWithButton: !!this.props.headerButton,
                         })}
                     >
-                        {this.props.top}
-                        <div
-                            className={classNames("mx_Dialog_header", {
-                                mx_Dialog_headerWithButton: !!this.props.headerButton,
-                            })}
-                        >
-                            {!!(this.props.title || headerImage) && (
-                                <Heading
-                                    size="3"
-                                    as="h1"
-                                    className={classNames("mx_Dialog_title", this.props.titleClass)}
-                                    id="mx_BaseDialog_title"
-                                >
-                                    {headerImage}
-                                    {this.props.title}
-                                </Heading>
-                            )}
-                            {this.props.headerButton}
-                        </div>
-                        {this.props.children}
-                        {cancelButton}
-                    </FocusLock>
-                </MatrixClientContext.Provider>
-            </I18nContext.Provider>
+                        {!!(this.props.title || headerImage) && (
+                            <Heading
+                                size="3"
+                                as="h1"
+                                className={classNames("mx_Dialog_title", this.props.titleClass)}
+                                id="mx_BaseDialog_title"
+                            >
+                                {headerImage}
+                                {this.props.title}
+                            </Heading>
+                        )}
+                        {this.props.headerButton}
+                    </div>
+                    {this.props.children}
+                    {cancelButton}
+                </FocusLock>
+            </MatrixClientContext.Provider>
         );
     }
 }
diff --git a/apps/web/src/components/views/dialogs/BugReportDialog.tsx b/apps/web/src/components/views/dialogs/BugReportDialog.tsx
index 1b108bcb52..f4bfc2f2c0 100644
--- a/apps/web/src/components/views/dialogs/BugReportDialog.tsx
+++ b/apps/web/src/components/views/dialogs/BugReportDialog.tsx
@@ -205,7 +205,7 @@ export default class BugReportDialog extends React.Component<BugReportDialogProp
                 this.setState({
                     downloadBusy: false,
                     downloadProgress:
-                        _t("bug_reporting|failed_download_logs") + `${err instanceof Error ? err.message : ""}`,
+                        _t("bug_reporting|failed_download_logs") + (err instanceof Error ? err.message : ""),
                 });
             }
         }
diff --git a/apps/web/src/components/views/dialogs/ChangelogDialog.tsx b/apps/web/src/components/views/dialogs/ChangelogDialog.tsx
index e9ff59a720..b2eb151943 100644
--- a/apps/web/src/components/views/dialogs/ChangelogDialog.tsx
+++ b/apps/web/src/components/views/dialogs/ChangelogDialog.tsx
@@ -108,7 +108,7 @@ export default class ChangelogDialog extends React.Component<IProps, State> {
                     msg: this.state[repo],
                 });
             } else {
-                content = (this.state[repo] as Commit[]).map(this.elementsForCommit);
+                content = this.state[repo].map(this.elementsForCommit);
             }
             return (
                 <div key={repo}>
diff --git a/apps/web/src/components/views/dialogs/ConfirmSpaceUserActionDialog.tsx b/apps/web/src/components/views/dialogs/ConfirmSpaceUserActionDialog.tsx
index b686b4cc4a..a23311faae 100644
--- a/apps/web/src/components/views/dialogs/ConfirmSpaceUserActionDialog.tsx
+++ b/apps/web/src/components/views/dialogs/ConfirmSpaceUserActionDialog.tsx
@@ -11,8 +11,8 @@ import { type Room } from "matrix-js-sdk/src/matrix";
 import { InfoSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import ConfirmUserActionDialog from "./ConfirmUserActionDialog";
-import SpaceStore from "../../../stores/spaces/SpaceStore";
 import SpaceChildrenPicker from "../spaces/SpaceChildrenPicker";
+import { SDKContextClass } from "../../../contexts/SDKContextClass.ts";
 
 type BaseProps = ComponentProps<typeof ConfirmUserActionDialog>;
 interface IProps extends Omit<BaseProps, "matrixClient" | "children" | "onFinished"> {
@@ -36,7 +36,7 @@ const ConfirmSpaceUserActionDialog: React.FC<IProps> = ({
     ...props
 }) => {
     const spaceChildren = useMemo(() => {
-        const children = SpaceStore.instance.getChildren(space.roomId);
+        const children = SDKContextClass.instance.spaceStore.getChildren(space.roomId);
         if (spaceChildFilter) {
             return children.filter(spaceChildFilter);
         }
diff --git a/apps/web/src/components/views/dialogs/CreateSectionDialog.tsx b/apps/web/src/components/views/dialogs/CreateSectionDialog.tsx
index d8aaed3326..c45c0980bb 100644
--- a/apps/web/src/components/views/dialogs/CreateSectionDialog.tsx
+++ b/apps/web/src/components/views/dialogs/CreateSectionDialog.tsx
@@ -8,6 +8,7 @@
 import React, { useState, type JSX } from "react";
 import { Flex } from "@element-hq/web-shared-components";
 import { Form, Text } from "@vector-im/compound-web";
+import classNames from "classnames";
 
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
@@ -37,15 +38,19 @@ export function CreateSectionDialog({ onFinished, sectionToEdit }: CreateSection
 
     return (
         <BaseDialog
-            className="mx_CreateSectionDialog"
+            className={classNames("mx_CreateSectionDialog", {
+                mx_CreateSectionDialog_edition: isEdition,
+            })}
             onFinished={() => onFinished(false, value)}
             title={isEdition ? _t("create_section_dialog|title_edition") : _t("create_section_dialog|title")}
             hasCancel={true}
         >
             <Flex gap="var(--cpd-space-6x)" direction="column" className="mx_CreateSectionDialog_content">
-                <Text as="span" weight="medium">
-                    {_t("create_section_dialog|description")}
-                </Text>
+                {!isEdition && (
+                    <Text as="span" weight="medium">
+                        {_t("create_section_dialog|description")}
+                    </Text>
+                )}
                 <Form.Root
                     className="mx_CreateSectionDialog_form"
                     onSubmit={(e) => {
@@ -64,9 +69,7 @@ export function CreateSectionDialog({ onFinished, sectionToEdit }: CreateSection
                 </Form.Root>
             </Flex>
             <DialogButtons
-                primaryButton={
-                    isEdition ? _t("create_section_dialog|edit_section") : _t("create_section_dialog|create_section")
-                }
+                primaryButton={isEdition ? _t("common|save") : _t("create_section_dialog|create_section")}
                 primaryDisabled={isInvalid}
                 hasCancel={true}
                 onCancel={() => onFinished(false, "")}
diff --git a/apps/web/src/components/views/dialogs/DevtoolsDialog.tsx b/apps/web/src/components/views/dialogs/DevtoolsDialog.tsx
index 4c5d5cc431..24aea999bf 100644
--- a/apps/web/src/components/views/dialogs/DevtoolsDialog.tsx
+++ b/apps/web/src/components/views/dialogs/DevtoolsDialog.tsx
@@ -97,7 +97,7 @@ const DevtoolsDialog: React.FC<IProps> = ({ roomId, threadRootId, onFinished })
                                 setTool([label, tool]);
                             };
                             return (
-                                <button className="mx_DevTools_button" key={label} onClick={onClick}>
+                                <button className="mx_DevTools_button" key={label} onClick={onClick} type="button">
                                     {_t(label)}
                                 </button>
                             );
@@ -151,6 +151,7 @@ const DevtoolsDialog: React.FC<IProps> = ({ roomId, threadRootId, onFinished })
                         )}
                         <div className="mx_DevTools_label_bottom" />
                         {cli.getRoom(roomId) && (
+                            // oxlint-disable-next-line react/jsx-no-constructed-context-values
                             <DevtoolsContext.Provider value={{ room: cli.getRoom(roomId)!, threadRootId }}>
                                 {body}
                             </DevtoolsContext.Provider>
diff --git a/apps/web/src/components/views/dialogs/EndPollDialog.tsx b/apps/web/src/components/views/dialogs/EndPollDialog.tsx
index bb654fe607..ee27947ce9 100644
--- a/apps/web/src/components/views/dialogs/EndPollDialog.tsx
+++ b/apps/web/src/components/views/dialogs/EndPollDialog.tsx
@@ -15,13 +15,11 @@ import QuestionDialog from "./QuestionDialog";
 import { findTopAnswer } from "../messages/MPollBody";
 import Modal from "../../../Modal";
 import ErrorDialog from "./ErrorDialog";
-import { type GetRelationsForEvent } from "../rooms/EventTile";
 
 interface IProps {
     matrixClient: MatrixClient;
     event: MatrixEvent;
     onFinished: (success?: boolean) => void;
-    getRelationsForEvent?: GetRelationsForEvent;
 }
 
 export default class EndPollDialog extends React.Component<IProps> {
diff --git a/apps/web/src/components/views/dialogs/ErrorDialog.tsx b/apps/web/src/components/views/dialogs/ErrorDialog.tsx
index 5f800e53df..8ac9484eef 100644
--- a/apps/web/src/components/views/dialogs/ErrorDialog.tsx
+++ b/apps/web/src/components/views/dialogs/ErrorDialog.tsx
@@ -74,7 +74,12 @@ export default class ErrorDialog extends React.Component<IProps, IState> {
                     {this.props.description || _t("error|dialog_description_default")}
                 </div>
                 <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={this.onClick} autoFocus={this.props.focus}>
+                    <button
+                        className="mx_Dialog_primary"
+                        onClick={this.onClick}
+                        autoFocus={this.props.focus}
+                        type="button"
+                    >
                         {this.props.button || _t("action|ok")}
                     </button>
                 </div>
diff --git a/apps/web/src/components/views/dialogs/ExportDialog.tsx b/apps/web/src/components/views/dialogs/ExportDialog.tsx
index 5767b1202b..e6242fbbdf 100644
--- a/apps/web/src/components/views/dialogs/ExportDialog.tsx
+++ b/apps/web/src/components/views/dialogs/ExportDialog.tsx
@@ -377,16 +377,14 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
                     )}
 
                     {setAttachments && (
-                        <>
-                            <StyledCheckbox
-                                className="mx_ExportDialog_attachments-checkbox"
-                                id="include-attachments"
-                                checked={includeAttachments}
-                                onChange={(e) => setAttachments((e.target as HTMLInputElement).checked)}
-                            >
-                                {_t("export_chat|include_attachments")}
-                            </StyledCheckbox>
-                        </>
+                        <StyledCheckbox
+                            className="mx_ExportDialog_attachments-checkbox"
+                            id="include-attachments"
+                            checked={includeAttachments}
+                            onChange={(e) => setAttachments(e.target.checked)}
+                        >
+                            {_t("export_chat|include_attachments")}
+                        </StyledCheckbox>
                     )}
                 </div>
                 {isExporting ? (
diff --git a/apps/web/src/components/views/dialogs/ForwardDialog.tsx b/apps/web/src/components/views/dialogs/ForwardDialog.tsx
index 6417fd985c..be88bf79e7 100644
--- a/apps/web/src/components/views/dialogs/ForwardDialog.tsx
+++ b/apps/web/src/components/views/dialogs/ForwardDialog.tsx
@@ -24,6 +24,7 @@ import {
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { CheckCircleIcon, CircleIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { AutoHideScrollbar } from "@element-hq/web-shared-components";
 
 import { _t } from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
@@ -34,11 +35,10 @@ import { avatarUrlForUser } from "../../../Avatar";
 import EventTile from "../rooms/EventTile";
 import SearchBox from "../../structures/SearchBox";
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
-import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
-import NotificationBadge from "../rooms/NotificationBadge";
+import { NotificationBadge } from "../rooms/NotificationBadge/NotificationBadge";
 import { type RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
-import { sortRooms } from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
+import { sortRoomsByRecency } from "../../../utils/room/sortRoomsByRecency";
 import QueryMatcher from "../../../autocomplete/QueryMatcher";
 import TruncatedList from "../elements/TruncatedList";
 import { Action } from "../../../dispatcher/actions";
@@ -138,7 +138,12 @@ const Entry: React.FC<IEntryProps<any>> = ({ room, type, content, matrixClient:
         className = "mx_ForwardList_sendFailed";
         disabled = true;
         title = _t("timeline|send_state_failed");
-        icon = <NotificationBadge notification={StaticNotificationState.RED_EXCLAMATION} />;
+        icon = (
+            <NotificationBadge
+                notification={StaticNotificationState.RED_EXCLAMATION}
+                className="mx_ForwardDialog_notificationBadge"
+            />
+        );
     }
 
     const id = `mx_ForwardDialog_entry_${room.roomId}`;
@@ -197,7 +202,6 @@ const Entry: React.FC<IEntryProps<any>> = ({ room, type, content, matrixClient:
  */
 const transformEvent = (event: MatrixEvent, cli: MatrixClient): { type: string; content: IContent } => {
     const {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         "m.relates_to": _, // strip relations - in future we will attach a relation pointing at the original event
         // We're taking a shallow copy here to avoid https://github.com/vector-im/element-web/issues/10924
         ...content
@@ -284,10 +288,11 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
 
     let rooms = useMemo(
         () =>
-            sortRooms(
+            sortRoomsByRecency(
                 cli
                     .getVisibleRooms(msc3946DynamicRoomPredecessors)
                     .filter((room) => room.getMyMembership() === KnownMembership.Join && !room.isSpaceRoom()),
+                cli.getSafeUserId(),
             ),
         [cli, msc3946DynamicRoomPredecessors],
     );
@@ -384,7 +389,7 @@ const ForwardDialog: React.FC<IProps> = ({ matrixClient: cli, event, permalinkCr
                                 />
                             )}
                         </RovingTabIndexContext.Consumer>
-                        <AutoHideScrollbar className="mx_ForwardList_content">
+                        <AutoHideScrollbar className="mx_AutoHideScrollbar mx_ForwardList_content">
                             {rooms.length > 0 ? (
                                 <div className="mx_ForwardList_results">
                                     <TruncatedList
diff --git a/apps/web/src/components/views/dialogs/GenericFeatureFeedbackDialog.tsx b/apps/web/src/components/views/dialogs/GenericFeatureFeedbackDialog.tsx
index 29fee059dc..1a42aa3163 100644
--- a/apps/web/src/components/views/dialogs/GenericFeatureFeedbackDialog.tsx
+++ b/apps/web/src/components/views/dialogs/GenericFeatureFeedbackDialog.tsx
@@ -30,7 +30,7 @@ const GenericFeatureFeedbackDialog: React.FC<IProps> = ({
     subheading,
     children,
     rageshakeLabel,
-    rageshakeData = {},
+    rageshakeData,
     onFinished,
 }) => {
     const [comment, setComment] = useState("");
@@ -78,10 +78,7 @@ const GenericFeatureFeedbackDialog: React.FC<IProps> = ({
                         }}
                         autoFocus={true}
                     />
-                    <StyledCheckbox
-                        checked={canContact}
-                        onChange={(e) => setCanContact((e.target as HTMLInputElement).checked)}
-                    >
+                    <StyledCheckbox checked={canContact} onChange={(e) => setCanContact(e.target.checked)}>
                         {_t("feedback|can_contact_label")}
                     </StyledCheckbox>
                 </React.Fragment>
diff --git a/apps/web/src/components/views/dialogs/IncomingSasDialog.tsx b/apps/web/src/components/views/dialogs/IncomingSasDialog.tsx
index bb210d0d23..18b5ae4b28 100644
--- a/apps/web/src/components/views/dialogs/IncomingSasDialog.tsx
+++ b/apps/web/src/components/views/dialogs/IncomingSasDialog.tsx
@@ -35,7 +35,6 @@ interface IState {
     phase: number;
     sasVerified: boolean;
     opponentProfile: {
-        // eslint-disable-next-line camelcase
         avatar_url?: string;
         displayname?: string;
     } | null;
@@ -207,7 +206,6 @@ export default class IncomingSasDialog extends React.Component<IProps, IState> {
                 onCancel={this.onCancelClick}
                 onDone={this.onSasMatchesClick}
                 isSelf={this.props.verifier.userId === MatrixClientPeg.safeGet().getUserId()}
-                inDialog={true}
             />
         );
     }
diff --git a/apps/web/test/unit-tests/components/views/dialogs/InviteDialog-test.tsx b/apps/web/src/components/views/dialogs/InviteDialog.test.tsx
similarity index 73%
rename from apps/web/test/unit-tests/components/views/dialogs/InviteDialog-test.tsx
rename to apps/web/src/components/views/dialogs/InviteDialog.test.tsx
index 4f3a80736c..867e78158d 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/InviteDialog-test.tsx
+++ b/apps/web/src/components/views/dialogs/InviteDialog.test.tsx
@@ -6,17 +6,17 @@ 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.
 */
 
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, afterAll, beforeEach, afterEach, type Mocked } from "vitest";
+
 import React from "react";
-import { findByText, fireEvent, render, screen } from "jest-matrix-react";
+import { findByText, fireEvent, render, screen } from "test-utils-rtl";
 import userEvent from "@testing-library/user-event";
 import { type MatrixClient, MatrixError, Room, RoomType } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { sleep } from "matrix-js-sdk/src/utils";
-import { mocked, type Mocked } from "jest-mock";
 import { UserVerificationStatus } from "matrix-js-sdk/src/crypto-api";
-
-import InviteDialog from "../../../../../src/components/views/dialogs/InviteDialog";
-import { InviteKind } from "../../../../../src/components/views/dialogs/InviteDialogTypes";
 import {
     clearAllModals,
     filterConsole,
@@ -25,26 +25,43 @@ import {
     mkMembership,
     mkMessage,
     mkRoomCreateEvent,
-} from "../../../../test-utils";
-import DMRoomMap from "../../../../../src/utils/DMRoomMap";
-import SdkConfig from "../../../../../src/SdkConfig";
-import { type ValidatedServerConfig } from "../../../../../src/utils/ValidatedServerConfig";
-import { type IConfigOptions } from "../../../../../src/IConfigOptions";
-import { SdkContextClass } from "../../../../../src/contexts/SDKContext";
-import { type IProfileInfo } from "../../../../../src/hooks/useProfileInfo";
-import { DirectoryMember, startDmOnFirstMessage } from "../../../../../src/utils/direct-messages";
+    TestSDKContext,
+} from "test-utils";
 
-const mockGetAccessToken = jest.fn().mockResolvedValue("getAccessToken");
-jest.mock("../../../../../src/IdentityAuthClient", () =>
-    jest.fn().mockImplementation(() => ({
-        getAccessToken: mockGetAccessToken,
-    })),
-);
+import InviteDialog from "./InviteDialog";
+import { InviteKind } from "./InviteDialogTypes";
+import DMRoomMap from "../../../utils/DMRoomMap";
+import SdkConfig from "../../../SdkConfig";
+import { type ValidatedServerConfig } from "../../../utils/ValidatedServerConfig";
+import { type IConfigOptions } from "../../../IConfigOptions";
+import { SDKContextClass } from "../../../contexts/SDKContextClass";
+import { type IProfileInfo } from "../../../hooks/useProfileInfo";
+import { DirectoryMember, startDmOnFirstMessage } from "../../../utils/direct-messages";
+import { MatrixClientPeg } from "../../../MatrixClientPeg.ts";
 
-jest.mock("../../../../../src/utils/direct-messages", () => ({
-    ...jest.requireActual("../../../../../src/utils/direct-messages"),
-    __esModule: true,
-    startDmOnFirstMessage: jest.fn(),
+const mockGetAccessToken = vi.fn().mockResolvedValue("getAccessToken");
+vi.mock("../../../IdentityAuthClient", () => ({
+    default: vi.fn().mockImplementation(function () {
+        return {
+            getAccessToken: mockGetAccessToken,
+        };
+    }),
+}));
+
+vi.mock("../../../utils/direct-messages", async () => ({
+    ...(await vi.importActual("../../../utils/direct-messages")),
+    startDmOnFirstMessage: vi.fn(),
+}));
+
+vi.mock("../../../dispatcher/dispatcher");
+
+vi.mock("lodash", async () => ({
+    ...(await vi.importActual("lodash")),
+    // Stub out the debounce to prevent async leaks
+    debounce: vi.fn((fn) => {
+        fn.cancel = vi.fn();
+        return fn;
+    }),
 }));
 
 const getSearchField = () => screen.getByTestId("invite-dialog-input");
@@ -94,6 +111,7 @@ const bobProfileInfo: IProfileInfo = {
 describe("InviteDialog", () => {
     let mockClient: Mocked<MatrixClient>;
     let room: Room;
+    let sdkContext: TestSDKContext;
 
     filterConsole(
         "Error retrieving profile for userId @carol:example.com",
@@ -104,23 +122,23 @@ describe("InviteDialog", () => {
 
     beforeEach(() => {
         mockClient = getMockClientWithEventEmitter({
-            getCrypto: jest.fn().mockReturnValue({
-                getUserVerificationStatus: jest
+            getCrypto: vi.fn().mockReturnValue({
+                getUserVerificationStatus: vi
                     .fn()
                     .mockResolvedValue(new UserVerificationStatus(false, false, true, false)),
             }),
-            getDomain: jest.fn().mockReturnValue(serverDomain),
-            getUserId: jest.fn().mockReturnValue(bobId),
-            getSafeUserId: jest.fn().mockReturnValue(bobId),
-            isGuest: jest.fn().mockReturnValue(false),
-            getVisibleRooms: jest.fn().mockReturnValue([]),
-            getRoom: jest.fn(),
-            getRooms: jest.fn(),
-            getAccountData: jest.fn(),
-            getPushActionsForEvent: jest.fn(),
-            mxcUrlToHttp: jest.fn().mockReturnValue(""),
-            isRoomEncrypted: jest.fn().mockReturnValue(false),
-            getProfileInfo: jest.fn().mockImplementation(async (userId: string) => {
+            getDomain: vi.fn().mockReturnValue(serverDomain),
+            getUserId: vi.fn().mockReturnValue(bobId),
+            getSafeUserId: vi.fn().mockReturnValue(bobId),
+            isGuest: vi.fn().mockReturnValue(false),
+            getVisibleRooms: vi.fn().mockReturnValue([]),
+            getRoom: vi.fn(),
+            getRooms: vi.fn(),
+            getAccountData: vi.fn(),
+            getPushActionsForEvent: vi.fn(),
+            mxcUrlToHttp: vi.fn().mockReturnValue(""),
+            isRoomEncrypted: vi.fn().mockReturnValue(false),
+            getProfileInfo: vi.fn().mockImplementation(async (userId: string) => {
                 if (userId === aliceId) return aliceProfileInfo;
                 if (userId === bobId) return bobProfileInfo;
 
@@ -129,24 +147,25 @@ describe("InviteDialog", () => {
                     error: "Profile not found",
                 });
             }),
-            getIdentityServerUrl: jest.fn(),
-            searchUserDirectory: jest.fn().mockResolvedValue({}),
-            lookupThreePid: jest.fn(),
-            registerWithIdentityServer: jest.fn().mockResolvedValue({
+            getIdentityServerUrl: vi.fn(),
+            searchUserDirectory: vi.fn().mockResolvedValue({}),
+            lookupThreePid: vi.fn(),
+            registerWithIdentityServer: vi.fn().mockResolvedValue({
                 access_token: "access_token",
                 token: "token",
             }),
-            getOpenIdToken: jest.fn().mockResolvedValue({}),
-            getIdentityAccount: jest.fn().mockResolvedValue({}),
-            getTerms: jest.fn().mockResolvedValue({ policies: [] }),
-            supportsThreads: jest.fn().mockReturnValue(false),
-            isInitialSyncComplete: jest.fn().mockReturnValue(true),
-            getClientWellKnown: jest.fn().mockResolvedValue({}),
-            invite: jest.fn(),
+            getOpenIdToken: vi.fn().mockResolvedValue({}),
+            getIdentityAccount: vi.fn().mockResolvedValue({}),
+            getTerms: vi.fn().mockResolvedValue({ policies: [] }),
+            supportsThreads: vi.fn().mockReturnValue(false),
+            isInitialSyncComplete: vi.fn().mockReturnValue(true),
+            getClientWellKnown: vi.fn().mockResolvedValue({}),
+            invite: vi.fn(),
         });
         SdkConfig.put({ validated_server_config: {} as ValidatedServerConfig } as IConfigOptions);
         DMRoomMap.makeShared(mockClient);
-        jest.clearAllMocks();
+        vi.clearAllMocks();
+        vi.spyOn(MatrixClientPeg, "safeGet").mockReturnValue(mockClient);
 
         room = new Room(roomId, mockClient, mockClient.getSafeUserId());
         room.addLiveEvents(
@@ -172,36 +191,38 @@ describe("InviteDialog", () => {
                 skey: aliceId,
             }),
         ]);
-        jest.spyOn(DMRoomMap.shared(), "getUniqueRoomsWithIndividuals").mockReturnValue({
+        vi.spyOn(DMRoomMap.shared(), "getUniqueRoomsWithIndividuals").mockReturnValue({
             [aliceId]: room,
         });
         mockClient.getRooms.mockReturnValue([room]);
         mockClient.getRoom.mockReturnValue(room);
 
-        SdkContextClass.instance.client = mockClient;
+        sdkContext = new TestSDKContext();
+        // @ts-ignore UserMenuViewModel uses SDKContext in the constructor
+        SDKContextClass.instance = sdkContext;
+        sdkContext._client = mockClient;
     });
 
     afterEach(async () => {
         await clearAllModals();
-        SdkContextClass.instance.onLoggedOut();
-        SdkContextClass.instance.client = undefined;
+        SDKContextClass.instance.onLoggedOut();
     });
 
     afterAll(() => {
-        jest.restoreAllMocks();
+        vi.restoreAllMocks();
     });
 
     it("should label with space name", () => {
-        room.isSpaceRoom = jest.fn().mockReturnValue(true);
-        room.getType = jest.fn().mockReturnValue(RoomType.Space);
+        room.isSpaceRoom = vi.fn().mockReturnValue(true);
+        room.getType = vi.fn().mockReturnValue(RoomType.Space);
         room.name = "Space";
-        render(<InviteDialog kind={InviteKind.Invite} roomId={roomId} onFinished={jest.fn()} />);
+        render(<InviteDialog kind={InviteKind.Invite} roomId={roomId} onFinished={vi.fn()} />);
 
         expect(screen.queryByText("Invite to Space")).toBeTruthy();
     });
 
     it("should label with room name", () => {
-        render(<InviteDialog kind={InviteKind.Invite} roomId={roomId} onFinished={jest.fn()} />);
+        render(<InviteDialog kind={InviteKind.Invite} roomId={roomId} onFinished={vi.fn()} />);
         expect(screen.getByText(`Invite to ${roomId}`)).toBeInTheDocument();
     });
 
@@ -210,7 +231,7 @@ describe("InviteDialog", () => {
             <InviteDialog
                 kind={InviteKind.Invite}
                 roomId={roomId}
-                onFinished={jest.fn()}
+                onFinished={vi.fn()}
                 initialText="@localpart:server.tld"
             />,
         );
@@ -223,7 +244,7 @@ describe("InviteDialog", () => {
             <InviteDialog
                 kind={InviteKind.Invite}
                 roomId={roomId}
-                onFinished={jest.fn()}
+                onFinished={vi.fn()}
                 initialText="@localpart:server:tld"
             />,
         );
@@ -249,7 +270,7 @@ describe("InviteDialog", () => {
                 <InviteDialog
                     kind={kind}
                     roomId={kind === InviteKind.Invite ? roomId : ""}
-                    onFinished={jest.fn()}
+                    onFinished={vi.fn()}
                     initialText={aliceEmail}
                 />,
             );
@@ -271,20 +292,20 @@ describe("InviteDialog", () => {
             <InviteDialog
                 kind={InviteKind.Invite}
                 roomId={roomId}
-                onFinished={jest.fn()}
+                onFinished={vi.fn()}
                 initialText="foobar@email.com"
             />,
         );
 
-        await screen.findByText("foobar@email.com");
-        await screen.findByText("Invite by email");
+        await expect(screen.findByText("foobar@email.com")).resolves.toBeVisible();
+        await expect(screen.findByText("Invite by email")).resolves.toBeVisible();
     });
 
     it("should add pasted values", async () => {
         mockClient.getIdentityServerUrl.mockReturnValue("https://identity-server");
         mockClient.lookupThreePid.mockResolvedValue({});
 
-        render(<InviteDialog kind={InviteKind.Invite} roomId={roomId} onFinished={jest.fn()} />);
+        render(<InviteDialog kind={InviteKind.Invite} roomId={roomId} onFinished={vi.fn()} />);
 
         const input = screen.getByTestId("invite-dialog-input");
         input.focus();
@@ -298,18 +319,18 @@ describe("InviteDialog", () => {
         mockClient.getIdentityServerUrl.mockReturnValue("https://identity-server");
         mockClient.lookupThreePid.mockResolvedValue({});
 
-        render(<InviteDialog kind={InviteKind.Invite} roomId={roomId} onFinished={jest.fn()} />);
+        render(<InviteDialog kind={InviteKind.Invite} roomId={roomId} onFinished={vi.fn()} />);
 
         const input = screen.getByTestId("invite-dialog-input");
         input.focus();
-        await userEvent.paste(`${bobbob}`);
+        await userEvent.paste(bobbob);
 
         await screen.findAllByText(bobId);
-        expect(input).toHaveValue(`${bobbob}`);
+        expect(input).toHaveValue(bobbob);
     });
 
     it("should allow to invite multiple emails to a room", async () => {
-        render(<InviteDialog kind={InviteKind.Invite} roomId={roomId} onFinished={jest.fn()} />);
+        render(<InviteDialog kind={InviteKind.Invite} roomId={roomId} onFinished={vi.fn()} />);
 
         await enterIntoSearchField(aliceEmail);
         expectPill(aliceEmail);
@@ -328,7 +349,7 @@ describe("InviteDialog", () => {
         });
 
         it("should allow to invite more than one email to a DM", async () => {
-            render(<InviteDialog kind={InviteKind.Dm} onFinished={jest.fn()} />);
+            render(<InviteDialog kind={InviteKind.Dm} onFinished={vi.fn()} />);
 
             await enterIntoSearchField(aliceEmail);
             expectPill(aliceEmail);
@@ -339,7 +360,7 @@ describe("InviteDialog", () => {
     });
 
     it("should not allow to invite more than one email to a DM", async () => {
-        render(<InviteDialog kind={InviteKind.Dm} onFinished={jest.fn()} />);
+        render(<InviteDialog kind={InviteKind.Dm} onFinished={vi.fn()} />);
 
         // Start with an email → should convert to a pill
         await enterIntoSearchField(aliceEmail);
@@ -359,7 +380,7 @@ describe("InviteDialog", () => {
     });
 
     it("should not allow to invite a MXID and an email to a DM", async () => {
-        render(<InviteDialog kind={InviteKind.Dm} onFinished={jest.fn()} />);
+        render(<InviteDialog kind={InviteKind.Dm} onFinished={vi.fn()} />);
 
         // Start with a MXID → should convert to a pill
         await enterIntoSearchField(carolId);
@@ -373,7 +394,7 @@ describe("InviteDialog", () => {
     });
 
     it("should start a DM if the profile is available", async () => {
-        render(<InviteDialog kind={InviteKind.Dm} onFinished={jest.fn()} />);
+        render(<InviteDialog kind={InviteKind.Dm} onFinished={vi.fn()} />);
         await enterIntoSearchField(aliceId);
         await userEvent.click(screen.getByRole("button", { name: "Go" }));
         expect(startDmOnFirstMessage).toHaveBeenCalledWith(mockClient, [
@@ -384,24 +405,24 @@ describe("InviteDialog", () => {
     });
 
     it("should not allow pasting the same user multiple times", async () => {
-        render(<InviteDialog kind={InviteKind.Invite} roomId={roomId} onFinished={jest.fn()} />);
+        render(<InviteDialog kind={InviteKind.Invite} roomId={roomId} onFinished={vi.fn()} />);
 
         const input = screen.getByTestId("invite-dialog-input");
         input.focus();
-        await userEvent.paste(`${bobId}`);
-        await userEvent.paste(`${bobId}`);
-        await userEvent.paste(`${bobId}`);
+        await userEvent.paste(bobId);
+        await userEvent.paste(bobId);
+        await userEvent.paste(bobId);
 
         expect(input).toHaveValue("");
         await expect(screen.findAllByText(bobId, { selector: "a" })).resolves.toHaveLength(1);
     });
 
     it("should add to selection on click of user tile", async () => {
-        render(<InviteDialog kind={InviteKind.Invite} roomId={roomId} onFinished={jest.fn()} />);
+        render(<InviteDialog kind={InviteKind.Invite} roomId={roomId} onFinished={vi.fn()} />);
 
         const input = screen.getByTestId("invite-dialog-input");
         input.focus();
-        await userEvent.keyboard(`${aliceId}`);
+        await userEvent.keyboard(aliceId);
 
         const btn = await screen.findByRole("option", { name: aliceId });
         fireEvent.click(btn);
@@ -414,18 +435,18 @@ describe("InviteDialog", () => {
         it("should show a spinner", async () => {
             mockClient.invite.mockReturnValue(new Promise(() => {}));
 
-            render(<InviteDialog kind={InviteKind.Invite} roomId={roomId} onFinished={jest.fn()} />);
+            render(<InviteDialog kind={InviteKind.Invite} roomId={roomId} onFinished={vi.fn()} />);
             await enterIntoSearchField(bobId);
             await userEvent.click(screen.getByRole("button", { name: "Invite" }));
 
-            await screen.findByText("Preparing invitations...");
+            await expect(screen.findByText("Preparing invitations...")).resolves.toBeVisible();
         });
     });
 
     describe("when inviting a user with an unknown profile", () => {
         beforeEach(async () => {
-            mocked(startDmOnFirstMessage).mockClear();
-            render(<InviteDialog kind={InviteKind.Dm} onFinished={jest.fn()} />);
+            vi.mocked(startDmOnFirstMessage).mockClear();
+            render(<InviteDialog kind={InviteKind.Dm} onFinished={vi.fn()} />);
             await enterIntoSearchField(carolId);
             await userEvent.click(screen.getByRole("button", { name: "Go" }));
             // modal rendering has some weird sleeps - fake timers will mess up the entire test
@@ -448,7 +469,7 @@ describe("InviteDialog", () => {
             <InviteDialog
                 kind={InviteKind.Invite}
                 roomId={roomId}
-                onFinished={jest.fn()}
+                onFinished={vi.fn()}
                 initialText="@localpart:server.tld"
             />,
         );
@@ -458,7 +479,7 @@ describe("InviteDialog", () => {
 
     describe("when inviting a user whose cryptographic identity we do not know", () => {
         beforeEach(() => {
-            mocked(mockClient.getCrypto()!.getUserVerificationStatus).mockImplementation(async (u) => {
+            vi.mocked(mockClient.getCrypto()!.getUserVerificationStatus).mockImplementation(async (u) => {
                 return new UserVerificationStatus(false, false, false, false);
             });
         });
@@ -471,7 +492,7 @@ describe("InviteDialog", () => {
                     <InviteDialog
                         kind={kind as InviteKind.Invite | InviteKind.Dm}
                         roomId={roomId}
-                        onFinished={jest.fn()}
+                        onFinished={vi.fn()}
                     />,
                 );
             });
@@ -481,8 +502,8 @@ describe("InviteDialog", () => {
                 await userEvent.click(screen.getByRole("button", { name: goButtonName }));
                 await screen.findByText("Confirm inviting them", { exact: false });
 
-                expect(mocked(mockClient.getCrypto()!.getUserVerificationStatus)).toHaveBeenCalledTimes(1);
-                expect(mocked(mockClient.getCrypto()!.getUserVerificationStatus)).toHaveBeenCalledWith(aliceId);
+                expect(vi.mocked(mockClient.getCrypto()!.getUserVerificationStatus)).toHaveBeenCalledTimes(1);
+                expect(vi.mocked(mockClient.getCrypto()!.getUserVerificationStatus)).toHaveBeenCalledWith(aliceId);
             });
 
             it("should show a warning when inviting by email address", async () => {
@@ -491,7 +512,7 @@ describe("InviteDialog", () => {
                 await screen.findByText("Confirm inviting them", { exact: false });
 
                 // We shouldn't call getUserVerificationStatus on an email address
-                expect(mocked(mockClient.getCrypto()!.getUserVerificationStatus)).not.toHaveBeenCalled();
+                expect(vi.mocked(mockClient.getCrypto()!.getUserVerificationStatus)).not.toHaveBeenCalled();
             });
         });
     });
diff --git a/apps/web/src/components/views/dialogs/InviteDialog.tsx b/apps/web/src/components/views/dialogs/InviteDialog.tsx
index a927129241..71eab828b4 100644
--- a/apps/web/src/components/views/dialogs/InviteDialog.tsx
+++ b/apps/web/src/components/views/dialogs/InviteDialog.tsx
@@ -11,7 +11,7 @@ import { EventType, type Room, RoomMember } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { type MatrixCall } from "matrix-js-sdk/src/webrtc/call";
 import { logger } from "matrix-js-sdk/src/logger";
-import { uniqBy } from "lodash";
+import { debounce, uniqBy } from "lodash";
 import { Pill, PillInput, RichList } from "@element-hq/web-shared-components";
 import { DialPadIcon, UserProfileSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
@@ -26,8 +26,7 @@ import { abbreviateUrl } from "../../../utils/UrlUtils";
 import IdentityAuthClient from "../../../IdentityAuthClient";
 import { showAnyInviteErrors } from "../../../RoomInvite";
 import { Action } from "../../../dispatcher/actions";
-import { DefaultTagID } from "../../../stores/room-list-v3/skip-list/tag";
-import RoomListStore from "../../../stores/room-list/RoomListStore";
+import RoomListStoreV3 from "../../../stores/room-list-v3/RoomListStoreV3";
 import SettingsStore from "../../../settings/SettingsStore";
 import { UIFeature } from "../../../settings/UIFeature";
 import { SearchResultAvatar } from "../avatars/SearchResultAvatar";
@@ -39,7 +38,6 @@ import Dialpad from "../voip/DialPad";
 import QuestionDialog from "./QuestionDialog";
 import BaseDialog from "./BaseDialog";
 import DialPadBackspaceButton from "../elements/DialPadBackspaceButton";
-import LegacyCallHandler from "../../../LegacyCallHandler";
 import CopyableText from "../elements/CopyableText";
 import { type ScreenName } from "../../../PosthogTrackers";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
@@ -56,7 +54,7 @@ import Modal from "../../../Modal";
 import dis from "../../../dispatcher/dispatcher";
 import { privateShouldBeEncrypted } from "../../../utils/rooms";
 import { type NonEmptyArray } from "../../../@types/common";
-import { SdkContextClass } from "../../../contexts/SDKContext";
+import { SDKContextClass } from "../../../contexts/SDKContextClass";
 import { type UserProfilesStore } from "../../../stores/UserProfilesStore";
 import InviteProgressBody from "./InviteProgressBody.tsx";
 import MultiInviter, { type CompletionStates as MultiInviterCompletionStates } from "../../../utils/MultiInviter.ts";
@@ -189,7 +187,6 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         initialText: "",
     };
 
-    private debounceTimer: number | null = null; // actually number because we're in the browser
     private editorRef = createRef<HTMLInputElement>();
     private numberEntryFieldRef = createRef<Field>();
     private unmounted = false;
@@ -205,7 +202,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
             throw new Error("When using InviteKind.CallTransfer a call is required for an InviteDialog");
         }
 
-        this.profilesStore = SdkContextClass.instance.userProfilesStore;
+        this.profilesStore = SDKContextClass.instance.userProfilesStore;
         const cli = MatrixClientPeg.safeGet();
 
         const excludedIds = new Set([cli.getSafeUserId()]);
@@ -258,6 +255,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
 
     public componentWillUnmount(): void {
         this.unmounted = true;
+        this.updateSuggestions.cancel();
     }
 
     private onConsultFirstChange = (ev: React.ChangeEvent<HTMLInputElement>): void => {
@@ -279,9 +277,9 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
     public static buildRecents(excludedTargetIds: Set<string>): Result[] {
         const rooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals(); // map of userId => js-sdk Room
 
-        // Also pull in all the rooms tagged as DefaultTagID.DM so we don't miss anything. Sometimes the
-        // room list doesn't tag the room for the DMRoomMap, but does for the room list.
-        const dmTaggedRooms = RoomListStore.instance.orderedLists[DefaultTagID.DM] || [];
+        // Also pull in all the rooms that the room list tags as DMs so we don't miss anything: sometimes
+        // a room is absent from getUniqueRoomsWithIndividuals() above but is still tagged as a DM.
+        const dmTaggedRooms = RoomListStoreV3.instance.getDmRooms();
         const myUserId = MatrixClientPeg.safeGet().getUserId();
         for (const dmRoom of dmTaggedRooms) {
             const otherMembers = dmRoom.getJoinedMembers().filter((u) => u.userId !== myUserId);
@@ -484,9 +482,13 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
                 return;
             }
 
-            LegacyCallHandler.instance.startTransferToMatrixID(this.props.call, targetIds[0], this.state.consultFirst);
+            SDKContextClass.instance.legacyCallHandler.startTransferToMatrixID(
+                this.props.call,
+                targetIds[0],
+                this.state.consultFirst,
+            );
         } else {
-            LegacyCallHandler.instance.startTransferToPhoneNumber(
+            SDKContextClass.instance.legacyCallHandler.startTransferToPhoneNumber(
                 this.props.call,
                 this.state.dialPadValue,
                 this.state.consultFirst,
@@ -528,125 +530,127 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         this.props.onFinished(false);
     };
 
-    private updateSuggestions = async (term: string): Promise<void> => {
-        MatrixClientPeg.safeGet()
-            .searchUserDirectory({ term })
-            .then(async (r): Promise<void> => {
-                if (term !== this.state.filterText) {
-                    // Discard the results - we were probably too slow on the server-side to make
-                    // these results useful. This is a race we want to avoid because we could overwrite
-                    // more accurate results.
-                    return;
-                }
-
-                if (!r.results) r.results = [];
-
-                // While we're here, try and autocomplete a search result for the mxid itself
-                // if there's no matches (and the input looks like a mxid).
-                if (term[0] === "@" && term.indexOf(":") > 1) {
-                    try {
-                        const profile = await this.profilesStore.getOrFetchProfile(term, { shouldThrow: true });
-
-                        if (profile) {
-                            // If we have a profile, we have enough information to assume that
-                            // the mxid can be invited - add it to the list. We stick it at the
-                            // top so it is most obviously presented to the user.
-                            r.results.splice(0, 0, {
-                                user_id: term,
-                                display_name: profile["displayname"],
-                                avatar_url: profile["avatar_url"],
-                            });
-                        }
-                    } catch (e) {
-                        logger.warn("Non-fatal error trying to make an invite for a user ID", e);
+    private updateSuggestions = debounce(
+        async (term: string): Promise<void> => {
+            MatrixClientPeg.safeGet()
+                .searchUserDirectory({ term })
+                .then(async (r): Promise<void> => {
+                    if (term !== this.state.filterText) {
+                        // Discard the results - we were probably too slow on the server-side to make
+                        // these results useful. This is a race we want to avoid because we could overwrite
+                        // more accurate results.
+                        return;
                     }
-                }
 
-                this.setState({
-                    serverResultsMixin: r.results.map((u) => ({
-                        userId: u.user_id,
-                        user: new DirectoryMember(u),
-                    })),
+                    if (!r.results) r.results = [];
+
+                    // While we're here, try and autocomplete a search result for the mxid itself
+                    // if there's no matches (and the input looks like a mxid).
+                    if (term[0] === "@" && term.indexOf(":") > 1) {
+                        try {
+                            const profile = await this.profilesStore.getOrFetchProfile(term, { shouldThrow: true });
+
+                            if (profile) {
+                                // If we have a profile, we have enough information to assume that
+                                // the mxid can be invited - add it to the list. We stick it at the
+                                // top so it is most obviously presented to the user.
+                                r.results.splice(0, 0, {
+                                    user_id: term,
+                                    display_name: profile["displayname"],
+                                    avatar_url: profile["avatar_url"],
+                                });
+                            }
+                        } catch (e) {
+                            logger.warn("Non-fatal error trying to make an invite for a user ID", e);
+                        }
+                    }
+
+                    if (this.unmounted) return;
+                    this.setState({
+                        serverResultsMixin: r.results.map((u) => ({
+                            userId: u.user_id,
+                            user: new DirectoryMember(u),
+                        })),
+                    });
+                })
+                .catch((e) => {
+                    logger.error("Error searching user directory:");
+                    logger.error(e);
+                    if (this.unmounted) return;
+                    this.setState({ serverResultsMixin: [] }); // clear results because it's moderately fatal
                 });
-            })
-            .catch((e) => {
-                logger.error("Error searching user directory:");
-                logger.error(e);
-                this.setState({ serverResultsMixin: [] }); // clear results because it's moderately fatal
-            });
 
-        // Whenever we search the directory, also try to search the identity server. It's
-        // all debounced the same anyways.
-        if (!this.state.canUseIdentityServer) {
-            // The user doesn't have an identity server set - warn them of that.
-            this.setState({ tryingIdentityServer: true });
-            return;
-        }
-        if (Email.looksValid(term) && this.canInviteThirdParty() && SettingsStore.getValue(UIFeature.IdentityServer)) {
-            // Start off by suggesting the plain email while we try and resolve it
-            // to a real account.
-            this.setState({
-                // per above: the userId is a lie here - it's just a regular identifier
-                threepidResultsMixin: [{ user: new ThreepidMember(term), userId: term }],
-            });
-            try {
-                const authClient = new IdentityAuthClient();
-                const token = await authClient.getAccessToken();
-                // No token → unable to try a lookup
-                if (!token) return;
-
-                if (term !== this.state.filterText) return; // abandon hope
-
-                const lookup = await MatrixClientPeg.safeGet().lookupThreePid("email", term, token);
-                if (term !== this.state.filterText) return; // abandon hope
-
-                if (!lookup || !("mxid" in lookup)) {
-                    // We weren't able to find anyone - we're already suggesting the plain email
-                    // as an alternative, so do nothing.
-                    return;
-                }
-
-                // We append the user suggestion to give the user an option to click
-                // the email anyways, and so we don't cause things to jump around. In
-                // theory, the user would see the user pop up and think "ah yes, that
-                // person!"
-                const profile = await this.profilesStore.getOrFetchProfile(lookup.mxid);
-                if (term !== this.state.filterText || !profile) return; // abandon hope
-                this.setState({
-                    threepidResultsMixin: [
-                        ...this.state.threepidResultsMixin,
-                        {
-                            user: new DirectoryMember({
-                                user_id: lookup.mxid,
-                                display_name: profile.displayname,
-                                avatar_url: profile.avatar_url,
-                            }),
-                            // Use the search term as identifier, so that it shows up in suggestions.
-                            userId: term,
-                        },
-                    ],
-                });
-            } catch (e) {
-                logger.error("Error searching identity server:");
-                logger.error(e);
-                this.setState({ threepidResultsMixin: [] }); // clear results because it's moderately fatal
+            // Whenever we search the directory, also try to search the identity server. It's
+            // all debounced the same anyways.
+            if (!this.state.canUseIdentityServer) {
+                // The user doesn't have an identity server set - warn them of that.
+                this.setState({ tryingIdentityServer: true });
+                return;
             }
-        }
-    };
+            if (
+                Email.looksValid(term) &&
+                this.canInviteThirdParty() &&
+                SettingsStore.getValue(UIFeature.IdentityServer)
+            ) {
+                // Start off by suggesting the plain email while we try and resolve it
+                // to a real account.
+                this.setState({
+                    // per above: the userId is a lie here - it's just a regular identifier
+                    threepidResultsMixin: [{ user: new ThreepidMember(term), userId: term }],
+                });
+                try {
+                    const authClient = new IdentityAuthClient();
+                    const token = await authClient.getAccessToken();
+                    // No token → unable to try a lookup
+                    if (!token) return;
+
+                    if (term !== this.state.filterText) return; // abandon hope
+
+                    const lookup = await MatrixClientPeg.safeGet().lookupThreePid("email", term, token);
+                    if (term !== this.state.filterText) return; // abandon hope
+
+                    if (!lookup || !("mxid" in lookup)) {
+                        // We weren't able to find anyone - we're already suggesting the plain email
+                        // as an alternative, so do nothing.
+                        return;
+                    }
+
+                    // We append the user suggestion to give the user an option to click
+                    // the email anyways, and so we don't cause things to jump around. In
+                    // theory, the user would see the user pop up and think "ah yes, that
+                    // person!"
+                    const profile = await this.profilesStore.getOrFetchProfile(lookup.mxid);
+                    if (term !== this.state.filterText || !profile) return; // abandon hope
+                    if (this.unmounted) return;
+                    this.setState({
+                        threepidResultsMixin: [
+                            ...this.state.threepidResultsMixin,
+                            {
+                                user: new DirectoryMember({
+                                    user_id: lookup.mxid,
+                                    display_name: profile.displayname,
+                                    avatar_url: profile.avatar_url,
+                                }),
+                                // Use the search term as identifier, so that it shows up in suggestions.
+                                userId: term,
+                            },
+                        ],
+                    });
+                } catch (e) {
+                    logger.error("Error searching identity server:");
+                    logger.error(e);
+                    if (this.unmounted) return;
+                    this.setState({ threepidResultsMixin: [] }); // clear results because it's moderately fatal
+                }
+            }
+        },
+        150, // 150ms debounce (human reaction time + some)
+    );
 
     private updateFilter = (e: React.ChangeEvent<HTMLInputElement>): void => {
         const term = e.target.value;
         this.setState({ filterText: term });
-
-        // Debounce server lookups to reduce spam. We don't clear the existing server
-        // results because they might still be vaguely accurate, likewise for races which
-        // could happen here.
-        if (this.debounceTimer) {
-            clearTimeout(this.debounceTimer);
-        }
-        this.debounceTimer = window.setTimeout(() => {
-            this.updateSuggestions(term);
-        }, 150); // 150ms debounce (human reaction time + some)
+        this.updateSuggestions(term);
     };
 
     private showMoreRecents = (): void => {
@@ -799,7 +803,6 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
         e.preventDefault();
 
         // Update the IS in account data. Actually using it may trigger terms.
-        // eslint-disable-next-line react-hooks/rules-of-hooks
         setToDefaultIdentityServer(MatrixClientPeg.safeGet());
         this.setState({ canUseIdentityServer: true, tryingIdentityServer: false });
     };
@@ -897,20 +900,18 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
             );
         }
 
-        const tiles = toRender.map((r) => (
-            <DMRoomTile
-                member={r.user}
-                lastActiveTs={lastActive(r)}
-                key={r.user.userId}
-                onToggle={this.toggleMember}
-                isSelected={this.state.targets.some((t) => t.userId === r.userId)}
-            />
-        ));
-
         return (
             <div className="mx_InviteDialog_section">
                 <RichList title={sectionName} titleAttributes={{ "role": "heading", "aria-level": 3 }}>
-                    {tiles}
+                    {toRender.map((r) => (
+                        <DMRoomTile
+                            member={r.user}
+                            lastActiveTs={lastActive(r)}
+                            key={r.user.userId}
+                            onToggle={this.toggleMember}
+                            isSelected={this.state.targets.some((t) => t.userId === r.userId)}
+                        />
+                    ))}
                 </RichList>
                 {showMore}
             </div>
@@ -918,10 +919,6 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
     }
 
     private renderEditor(): JSX.Element {
-        const targets = this.state.targets.map((t) => (
-            <DMUserTile member={t} onRemove={this.state.busy ? undefined : this.removeMember} key={t.userId} />
-        ));
-
         return (
             <PillInput
                 data-testid="invite-dialog-input-wrapper"
@@ -943,7 +940,9 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
                     !this.state.busy && this.removeMember(this.state.targets[this.state.targets.length - 1])
                 }
             >
-                {targets}
+                {this.state.targets.map((t) => (
+                    <DMUserTile member={t} onRemove={this.state.busy ? undefined : this.removeMember} key={t.userId} />
+                ))}
             </PillInput>
         );
     }
@@ -1388,7 +1387,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
             new Tab(
                 TabId.UserDirectory,
                 _td("invite|transfer_user_directory_tab"),
-                <UserProfileSolidIcon />,
+                <UserProfileSolidIcon key={TabId.UserDirectory} />,
                 usersSection,
             ),
         ];
diff --git a/apps/web/src/components/views/dialogs/InviteProgressBody.tsx b/apps/web/src/components/views/dialogs/InviteProgressBody.tsx
index a61c0d5922..628869affe 100644
--- a/apps/web/src/components/views/dialogs/InviteProgressBody.tsx
+++ b/apps/web/src/components/views/dialogs/InviteProgressBody.tsx
@@ -14,7 +14,7 @@ import { _t } from "../../../languageHandler";
 const InviteProgressBody: React.FC = () => {
     return (
         <div className="mx_InviteProgressBody">
-            <InlineSpinner w={32} h={32} />
+            <InlineSpinner size={32} />
             <h1>{_t("invite|progress|preparing")}</h1>
             {_t("invite|progress|dont_close")}
         </div>
diff --git a/apps/web/src/components/views/dialogs/LeaveSpaceDialog.tsx b/apps/web/src/components/views/dialogs/LeaveSpaceDialog.tsx
index ffa780ccc9..3a8645bc70 100644
--- a/apps/web/src/components/views/dialogs/LeaveSpaceDialog.tsx
+++ b/apps/web/src/components/views/dialogs/LeaveSpaceDialog.tsx
@@ -13,10 +13,10 @@ import { InfoSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icon
 import { _t } from "../../../languageHandler";
 import DialogButtons from "../elements/DialogButtons";
 import BaseDialog from "../dialogs/BaseDialog";
-import SpaceStore from "../../../stores/spaces/SpaceStore";
 import SpaceChildrenPicker from "../spaces/SpaceChildrenPicker";
 import { filterBoolean } from "../../../utils/arrays";
 import { isOnlyAdmin } from "../../../utils/membership";
+import { SDKContextClass } from "../../../contexts/SDKContextClass.ts";
 
 interface IProps {
     space: Room;
@@ -25,8 +25,8 @@ interface IProps {
 
 const LeaveSpaceDialog: React.FC<IProps> = ({ space, onFinished }) => {
     const spaceChildren = useMemo(() => {
-        const roomSet = new Set(SpaceStore.instance.getSpaceFilteredRoomIds(space.roomId));
-        SpaceStore.instance.traverseSpace(
+        const roomSet = new Set(SDKContextClass.instance.spaceStore.getSpaceFilteredRoomIds(space.roomId));
+        SDKContextClass.instance.spaceStore.traverseSpace(
             space.roomId,
             (spaceId) => {
                 if (space.roomId === spaceId) return; // skip the root node
diff --git a/apps/web/src/components/views/dialogs/LogoutDialog.tsx b/apps/web/src/components/views/dialogs/LogoutDialog.tsx
index 830e5fb589..f1cc21883e 100644
--- a/apps/web/src/components/views/dialogs/LogoutDialog.tsx
+++ b/apps/web/src/components/views/dialogs/LogoutDialog.tsx
@@ -7,11 +7,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { lazy } from "react";
-import { logger } from "matrix-js-sdk/src/logger";
+import React, { type JSX } from "react";
 import { type MatrixClient } from "matrix-js-sdk/src/matrix";
+import { Button, Text } from "@vector-im/compound-web";
+import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
+import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key";
+import PopOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/pop-out";
+import SignOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/sign-out";
 
-import Modal from "../../../Modal";
 import dis from "../../../dispatcher/dispatcher";
 import { type OpenToTabPayload } from "../../../dispatcher/payloads/OpenToTabPayload";
 import { Action } from "../../../dispatcher/actions";
@@ -21,39 +24,16 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import QuestionDialog from "./QuestionDialog";
 import BaseDialog from "./BaseDialog";
 import Spinner from "../elements/Spinner";
-import DialogButtons from "../elements/DialogButtons";
+import { BackupStatus, useKeyBackupStatus } from "../../../hooks/useKeyBackupStatus";
+import { useHasOtherVerifiedDevices } from "../../../hooks/useHasOtherVerifiedDevices";
+import { EncryptionCard } from "../settings/encryption/EncryptionCard";
+import { EncryptionCardButtons } from "../settings/encryption/EncryptionCardButtons";
+import { EncryptionCardEmphasisedContent } from "../settings/encryption/EncryptionCardEmphasisedContent";
 
 interface IProps {
     onFinished: (success: boolean) => void;
 }
 
-enum BackupStatus {
-    /** we're trying to figure out if there is an active backup */
-    LOADING,
-
-    /** crypto is disabled in this client (so no need to back up) */
-    NO_CRYPTO,
-
-    /** Key backup is active and working */
-    BACKUP_ACTIVE,
-
-    /** there is a backup on the server but we are not backing up to it */
-    SERVER_BACKUP_BUT_DISABLED,
-
-    /** Key backup is set up but recovery (4s) is not */
-    BACKUP_NO_RECOVERY,
-
-    /** backup is not set up locally and there is no backup on the server */
-    NO_BACKUP,
-
-    /** there was an error fetching the state */
-    ERROR,
-}
-
-interface IState {
-    backupStatus: BackupStatus;
-}
-
 /**
  * Checks if the `LogoutDialog` should be shown instead of the simple logout flow.
  * The `LogoutDialog` will check the crypto recovery status of the account and
@@ -61,191 +41,122 @@ interface IState {
  */
 export async function shouldShowLogoutDialog(cli: MatrixClient): Promise<boolean> {
     const crypto = cli?.getCrypto();
-    if (!crypto) return false;
-
-    // If any room is encrypted, we need to show the advanced logout flow
-    const allRooms = cli!.getRooms();
-    for (const room of allRooms) {
-        const isE2e = await crypto.isEncryptionEnabledInRoom(room.roomId);
-        if (isE2e) return true;
-    }
-
-    return false;
+    return !!crypto;
 }
 
-export default class LogoutDialog extends React.Component<IProps, IState> {
-    public static defaultProps = {
-        onFinished: function () {},
-    };
+export default function LogoutDialog(props: IProps): JSX.Element {
+    const client = MatrixClientPeg.safeGet();
+    const backupStatus = useKeyBackupStatus(client);
+    const hasOtherVerifiedDevices = useHasOtherVerifiedDevices(client);
 
-    public constructor(props: IProps) {
-        super(props);
-
-        this.state = {
-            backupStatus: BackupStatus.LOADING,
-        };
-    }
-
-    public componentDidMount(): void {
-        this.startLoadBackupStatus();
-    }
-
-    /** kick off the asynchronous calls to populate `state.backupStatus` in the background */
-    private startLoadBackupStatus(): void {
-        this.loadBackupStatus().catch((e) => {
-            logger.log("Unable to fetch key backup status", e);
-            this.setState({
-                backupStatus: BackupStatus.ERROR,
-            });
-        });
-    }
-
-    private async loadBackupStatus(): Promise<void> {
-        const client = MatrixClientPeg.safeGet();
-        const crypto = client.getCrypto();
-        if (!crypto) {
-            this.setState({ backupStatus: BackupStatus.NO_CRYPTO });
-            return;
-        }
-
-        if ((await crypto.getActiveSessionBackupVersion()) !== null) {
-            if (await crypto.isSecretStorageReady()) {
-                this.setState({ backupStatus: BackupStatus.BACKUP_ACTIVE });
-            } else {
-                this.setState({ backupStatus: BackupStatus.BACKUP_NO_RECOVERY });
-            }
-            return;
-        }
-
-        // backup is not active. see if there is a backup version on the server we ought to back up to.
-        const backupInfo = await crypto.getKeyBackupInfo();
-        this.setState({ backupStatus: backupInfo ? BackupStatus.SERVER_BACKUP_BUT_DISABLED : BackupStatus.NO_BACKUP });
-    }
-
-    private onExportE2eKeysClicked = (): void => {
-        Modal.createDialog(
-            lazy(() => import("../../../async-components/views/dialogs/security/ExportE2eKeysDialog")),
-            {
-                matrixClient: MatrixClientPeg.safeGet(),
-            },
-        );
-    };
-
-    private onFinished = (confirmed?: boolean): void => {
+    const onFinished = (confirmed?: boolean): void => {
         if (confirmed) {
             dis.dispatch({ action: "logout" });
         }
-        // close dialog
-        this.props.onFinished(!!confirmed);
+        props.onFinished(!!confirmed);
     };
 
-    private onSetRecoveryMethodClick = (): void => {
-        // Open the user settings dialog to the encryption tab and start the flow to reset encryption
-        const payload: OpenToTabPayload = {
-            action: Action.ViewUserSettings,
-            initialTabId: UserTab.Encryption,
-        };
-        dis.dispatch(payload);
-
-        // close dialog
-        this.props.onFinished(true);
-    };
-
-    private onLogoutConfirm = (): void => {
+    const onLogoutConfirm = (): void => {
         dis.dispatch({ action: "logout" });
 
         // close dialog
-        this.props.onFinished(true);
+        props.onFinished(true);
     };
 
-    /**
-     * Show a dialog prompting the user to set up their recovery method.
-     *
-     * Either:
-     *  * There is no backup at all ({@link BackupStatus.NO_BACKUP})
-     *  * There is a backup set up but recovery (4s) is not ({@link BackupStatus.BACKUP_NO_RECOVERY})
-     *  * There is a backup on the server but we are not connected to it ({@link BackupStatus.SERVER_BACKUP_BUT_DISABLED})
-     *  * We were unable to pull the backup data ({@link BackupStatus.ERROR}).
-     *
-     * In all four cases, we should prompt the user to set up a method of recovery.
-     */
-    private renderSetupRecoveryMethod(): React.ReactNode {
-        const description = (
-            <div>
-                <p>{_t("auth|logout_dialog|setup_secure_backup_description_1")}</p>
-                <p>{_t("auth|logout_dialog|setup_secure_backup_description_2")}</p>
-                <p>{_t("encryption|setup_secure_backup|explainer")}</p>
-            </div>
-        );
+    const onGoToSettings = (): void => {
+        // Open the user settings dialog to the encryption tab and start the flow to get recovery key
+        const payload: OpenToTabPayload = {
+            action: Action.ViewUserSettings,
+            initialTabId: UserTab.Encryption,
+            props: {
+                initialEncryptionState: "set_recovery_key",
+            },
+        };
+        dis.dispatch(payload);
 
-        const dialogContent = (
-            <div>
-                <div className="mx_Dialog_content" id="mx_Dialog_content">
-                    {description}
-                </div>
-                <DialogButtons
-                    primaryButton={_t("common|go_to_settings")}
-                    hasCancel={false}
-                    onPrimaryButtonClick={this.onSetRecoveryMethodClick}
-                    focus={true}
-                >
-                    <button onClick={this.onLogoutConfirm}>{_t("auth|logout_dialog|skip_key_backup")}</button>
-                </DialogButtons>
-                <details>
-                    <summary className="mx_LogoutDialog_ExportKeyAdvanced">{_t("common|advanced")}</summary>
-                    <p>
-                        <button onClick={this.onExportE2eKeysClicked}>{_t("auth|logout_dialog|megolm_export")}</button>
-                    </p>
-                </details>
-            </div>
-        );
-        // Not quite a standard question dialog as the primary button cancels
-        // the action and does something else instead, whilst non-default button
-        // confirms the action.
-        return (
-            <BaseDialog
-                title={_t("auth|logout_dialog|setup_key_backup_title")}
-                contentId="mx_Dialog_content"
-                hasCancel={true}
-                onFinished={this.onFinished}
-            >
-                {dialogContent}
-            </BaseDialog>
-        );
+        props.onFinished(false);
+    };
+
+    if (hasOtherVerifiedDevices === undefined) {
+        return <Loading onFinished={onFinished} />;
+    } else if (hasOtherVerifiedDevices) {
+        return <ConfirmLogout onFinished={onFinished} />;
     }
+    switch (backupStatus) {
+        case BackupStatus.LOADING:
+            return <Loading onFinished={onFinished} />;
 
-    public render(): React.ReactNode {
-        switch (this.state.backupStatus) {
-            case BackupStatus.LOADING:
-                // while we're deciding if we have backups, show a spinner
-                return (
-                    <BaseDialog
-                        title={_t("action|sign_out")}
-                        contentId="mx_Dialog_content"
-                        hasCancel={true}
-                        onFinished={this.onFinished}
+        case BackupStatus.NO_CRYPTO:
+        case BackupStatus.BACKUP_ACTIVE:
+            return <ConfirmLogout onFinished={onFinished} />;
+
+        case BackupStatus.NO_BACKUP:
+        case BackupStatus.SERVER_BACKUP_BUT_DISABLED:
+        case BackupStatus.ERROR:
+        case BackupStatus.BACKUP_NO_RECOVERY: {
+            return (
+                <BaseDialog
+                    contentId="mx_Dialog_content"
+                    hasCancel={true}
+                    onFinished={onFinished}
+                    className="mx_LogoutDialog"
+                >
+                    <EncryptionCard
+                        Icon={ErrorIcon}
+                        destructive={true}
+                        title={_t("auth|logout_dialog|setup_key_backup_title")}
+                        className="mx_EncryptionCard_noBorder"
                     >
-                        <Spinner />
-                    </BaseDialog>
-                );
-
-            case BackupStatus.NO_CRYPTO:
-            case BackupStatus.BACKUP_ACTIVE:
-                return (
-                    <QuestionDialog
-                        hasCancelButton={true}
-                        title={_t("action|sign_out")}
-                        description={_t("auth|logout_dialog|description")}
-                        button={_t("action|sign_out")}
-                        onFinished={this.onFinished}
-                    />
-                );
-
-            case BackupStatus.NO_BACKUP:
-            case BackupStatus.SERVER_BACKUP_BUT_DISABLED:
-            case BackupStatus.ERROR:
-            case BackupStatus.BACKUP_NO_RECOVERY:
-                return this.renderSetupRecoveryMethod();
+                        <EncryptionCardEmphasisedContent>
+                            <Text>{_t("auth|logout_dialog|setup_secure_backup_description")}</Text>
+                            <Text as="a" target="_blank" href="https://element.io/en/help#encryption16">
+                                {_t("action|learn_more")} <PopOutIcon />
+                            </Text>
+                        </EncryptionCardEmphasisedContent>
+                        <EncryptionCardButtons>
+                            <Button onClick={onGoToSettings} Icon={KeyIcon}>
+                                {_t("settings|encryption|recovery|set_up_recovery")}
+                            </Button>
+                            <Button kind="tertiary" destructive={true} onClick={onLogoutConfirm} Icon={SignOutIcon}>
+                                {_t("auth|logout_dialog|skip_key_backup")}
+                            </Button>
+                        </EncryptionCardButtons>
+                    </EncryptionCard>
+                </BaseDialog>
+            );
         }
     }
 }
+
+interface SubComponentProps {
+    onFinished: (confirmed?: boolean) => void;
+}
+
+// Dialog contents to show a spinner while deciding whether to prompt the
+// user to set up recovery
+function Loading(props: SubComponentProps): JSX.Element {
+    return (
+        <BaseDialog
+            title={_t("action|sign_out")}
+            contentId="mx_Dialog_content"
+            hasCancel={true}
+            onFinished={props.onFinished}
+        >
+            <Spinner />
+        </BaseDialog>
+    );
+}
+
+// Dialog contents to confirm whether the user is sure if they want to log
+// out.
+function ConfirmLogout(props: SubComponentProps): JSX.Element {
+    return (
+        <QuestionDialog
+            hasCancelButton={true}
+            title={_t("action|sign_out")}
+            description={_t("auth|logout_dialog|description")}
+            button={_t("action|sign_out")}
+            onFinished={props.onFinished}
+        />
+    );
+}
diff --git a/apps/web/src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx b/apps/web/src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx
index 811fb1a10c..7e13ab1759 100644
--- a/apps/web/src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx
+++ b/apps/web/src/components/views/dialogs/ManageRestrictedJoinRuleDialog.tsx
@@ -10,17 +10,17 @@ import React, { useMemo, useState } from "react";
 import { Room } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { InfoSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { AutoHideScrollbar } from "@element-hq/web-shared-components";
 
 import { _t } from "../../../languageHandler";
 import BaseDialog from "./BaseDialog";
 import SearchBox from "../../structures/SearchBox";
-import SpaceStore from "../../../stores/spaces/SpaceStore";
 import RoomAvatar from "../avatars/RoomAvatar";
 import AccessibleButton from "../elements/AccessibleButton";
-import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import StyledCheckbox from "../elements/StyledCheckbox";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { filterBoolean } from "../../../utils/arrays";
+import { SDKContextClass } from "../../../contexts/SDKContextClass.ts";
 
 interface IProps {
     room: Room;
@@ -38,7 +38,7 @@ const Entry: React.FC<{
     let description;
     if (localRoom) {
         description = _t("common|n_members", { count: room.getJoinedMemberCount() });
-        const numChildRooms = SpaceStore.instance.getChildRooms(room.roomId).length;
+        const numChildRooms = SDKContextClass.instance.spaceStore.getChildRooms(room.roomId).length;
         if (numChildRooms > 0) {
             description += " · " + _t("common|n_rooms", { count: numChildRooms });
         }
@@ -67,7 +67,7 @@ const Entry: React.FC<{
 
 const addAllParents = (set: Set<Room>, room: Room): void => {
     const cli = room.client;
-    const parents = Array.from(SpaceStore.instance.getKnownParents(room.roomId)).map((parentId) =>
+    const parents = Array.from(SDKContextClass.instance.spaceStore.getKnownParents(room.roomId)).map((parentId) =>
         cli.getRoom(parentId),
     );
 
@@ -78,7 +78,7 @@ const addAllParents = (set: Set<Room>, room: Room): void => {
     });
 };
 
-const ManageRestrictedJoinRuleDialog: React.FC<IProps> = ({ room, selected = [], onFinished }) => {
+const ManageRestrictedJoinRuleDialog: React.FC<IProps> = ({ room, selected, onFinished }) => {
     const cli = room.client;
     const [newSelected, setNewSelected] = useState(new Set<string>(selected));
     const [query, setQuery] = useState("");
@@ -90,9 +90,9 @@ const ManageRestrictedJoinRuleDialog: React.FC<IProps> = ({ room, selected = [],
 
         return [
             Array.from(parents),
-            SpaceStore.instance.spacePanelSpaces.filter((s) => !parents.has(s)),
+            SDKContextClass.instance.spaceStore.spacePanelSpaces.filter((s) => !parents.has(s)),
             filterBoolean(
-                selected.map((roomId) => {
+                selected?.map((roomId) => {
                     const room = cli.getRoom(roomId);
                     if (!room) {
                         return { roomId, name: roomId } as Room;
@@ -100,7 +100,7 @@ const ManageRestrictedJoinRuleDialog: React.FC<IProps> = ({ room, selected = [],
                     if (room.getMyMembership() !== KnownMembership.Join || !room.isSpaceRoom()) {
                         return room;
                     }
-                }),
+                }) ?? [],
             ),
         ];
     }, [cli, selected, room]);
@@ -158,7 +158,7 @@ const ManageRestrictedJoinRuleDialog: React.FC<IProps> = ({ room, selected = [],
                     onSearch={setQuery}
                     autoFocus={true}
                 />
-                <AutoHideScrollbar className="mx_ManageRestrictedJoinRuleDialog_content">
+                <AutoHideScrollbar className="mx_AutoHideScrollbar mx_ManageRestrictedJoinRuleDialog_content">
                     {filteredSpacesContainingRoom.length > 0 ? (
                         <div className="mx_ManageRestrictedJoinRuleDialog_section">
                             <h3>
diff --git a/apps/web/src/components/views/dialogs/MessageEditHistoryDialog.tsx b/apps/web/src/components/views/dialogs/MessageEditHistoryDialog.tsx
index d54bc548aa..c6bf0e4e77 100644
--- a/apps/web/src/components/views/dialogs/MessageEditHistoryDialog.tsx
+++ b/apps/web/src/components/views/dialogs/MessageEditHistoryDialog.tsx
@@ -20,6 +20,7 @@ import ScrollPanel from "../../structures/ScrollPanel";
 import Spinner from "../elements/Spinner";
 import EditHistoryMessage from "../messages/EditHistoryMessage";
 import { DateSeparatorViewModel } from "../../../viewmodels/room/timeline/DateSeparatorViewModel";
+import { SDKContextClass } from "../../../contexts/SDKContextClass.ts";
 
 interface IProps {
     mxEvent: MatrixEvent;
@@ -54,7 +55,7 @@ export default class MessageEditHistoryDialog extends React.PureComponent<IProps
         const key = `${roomId}-${ts}`;
         let vm = this.dateSeparatorVms.get(key);
         if (!vm) {
-            vm = new DateSeparatorViewModel({ roomId, ts });
+            vm = new DateSeparatorViewModel({ roomId, ts, roomViewStore: SDKContextClass.instance.roomViewStore });
             this.dateSeparatorVms.set(key, vm);
         }
         return vm;
diff --git a/apps/web/src/components/views/dialogs/ModalWidgetDialog.tsx b/apps/web/src/components/views/dialogs/ModalWidgetDialog.tsx
index c0af2b632b..1fe5e3328b 100644
--- a/apps/web/src/components/views/dialogs/ModalWidgetDialog.tsx
+++ b/apps/web/src/components/views/dialogs/ModalWidgetDialog.tsx
@@ -25,7 +25,8 @@ import {
 import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import BaseDialog from "./BaseDialog";
-import { _t, getUserLanguage } from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
+import { getUserLanguage } from "../../../i18n/settings";
 import AccessibleButton, { type AccessibleButtonKind } from "../elements/AccessibleButton";
 import { ElementWidgetDriver } from "../../../stores/widgets/ElementWidgetDriver";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
@@ -115,7 +116,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
         if (isClose || !this.possibleButtons.includes(ev.detail.data.button)) {
             return this.state.messaging?.transport.reply(ev.detail, {
                 error: { message: "Invalid button" },
-            } as IWidgetApiErrorResponseData);
+            } satisfies IWidgetApiErrorResponseData);
         }
 
         let buttonIds: ModalButtonID[];
@@ -128,7 +129,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
             buttonIds = Array.from(tempSet);
         }
         this.setState({ disabledButtonIds: buttonIds });
-        this.state.messaging?.transport.reply(ev.detail, {} as IWidgetApiAcknowledgeResponseData);
+        this.state.messaging?.transport.reply(ev.detail, {} satisfies IWidgetApiAcknowledgeResponseData);
     };
 
     public render(): React.ReactNode {
@@ -206,6 +207,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
                     <iframe
                         title={this.widget.name ?? undefined}
                         ref={this.appFrame}
+                        // oxlint-disable-next-line react/iframe-missing-sandbox
                         sandbox="allow-forms allow-scripts allow-same-origin"
                         src={widgetUrl}
                         onLoad={this.onLoad}
diff --git a/apps/web/src/components/views/dialogs/ModuleUiDialog.tsx b/apps/web/src/components/views/dialogs/ModuleUiDialog.tsx
index 533b24306f..8367d98e7f 100644
--- a/apps/web/src/components/views/dialogs/ModuleUiDialog.tsx
+++ b/apps/web/src/components/views/dialogs/ModuleUiDialog.tsx
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef, type RefObject } from "react";
+import React, { createRef } from "react";
 import { type DialogContent, type DialogProps } from "@matrix-org/react-sdk-module-api/lib/components/DialogContent";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type ModuleApi } from "@matrix-org/react-sdk-module-api/lib/ModuleApi";
@@ -75,10 +75,6 @@ export class ModuleUiDialog<
         } as unknown as P;
 
         // XXX: we have to fudge the types here a little as the react-sdk-module-api lacks React 19 support
-        return (
-            <div className="mx_ModuleUiDialog">
-                {this.props.contentFactory(contentProps, this.contentRef as RefObject<C>)}
-            </div>
-        );
+        return <div className="mx_ModuleUiDialog">{this.props.contentFactory(contentProps, this.contentRef)}</div>;
     }
 }
diff --git a/apps/web/src/components/views/dialogs/ReportEventDialog.tsx b/apps/web/src/components/views/dialogs/ReportEventDialog.tsx
index 7c840c56ea..789a7779ce 100644
--- a/apps/web/src/components/views/dialogs/ReportEventDialog.tsx
+++ b/apps/web/src/components/views/dialogs/ReportEventDialog.tsx
@@ -1,4 +1,5 @@
 /*
+Copyright 2026 Element Creations Ltd.
 Copyright 2024 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
@@ -11,25 +12,16 @@ import React, { type JSX, type ChangeEvent } from "react";
 import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 
-import { _t, UserFriendlyError } from "../../../languageHandler";
-import { ensureDMExists } from "../../../createRoom";
+import { _t } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import SdkConfig from "../../../SdkConfig";
 import Markdown from "../../../Markdown";
-import SettingsStore from "../../../settings/SettingsStore";
-import StyledRadioButton from "../elements/StyledRadioButton";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
 import Field from "../elements/Field";
 import Spinner from "../elements/Spinner";
 import LabelledCheckbox from "../elements/LabelledCheckbox";
 
-declare module "matrix-js-sdk/src/types" {
-    interface TimelineEvents {
-        [ABUSE_EVENT_TYPE]: AbuseEventContent;
-    }
-}
-
 interface IProps {
     mxEvent: MatrixEvent;
     onFinished(report?: boolean): void;
@@ -40,172 +32,25 @@ interface IState {
     reason: string;
     busy: boolean;
     err?: string;
-    // If we know it, the nature of the abuse, as specified by MSC3215.
-    nature?: ExtendedNature;
     ignoreUserToo: boolean; // if true, user will be ignored/blocked on submit
-    /*
-     * Whether the room is encrypted.
-     */
-    isRoomEncrypted: boolean;
 }
 
-const MODERATED_BY_STATE_EVENT_TYPE = [
-    "org.matrix.msc3215.room.moderation.moderated_by",
-    /**
-     * Unprefixed state event. Not ready for prime time.
-     *
-     * "m.room.moderation.moderated_by"
-     */
-];
-
-export const ABUSE_EVENT_TYPE = "org.matrix.msc3215.abuse.report";
-
-interface AbuseEventContent {
-    event_id: string;
-    room_id: string;
-    moderated_by_id: string;
-    nature?: ExtendedNature;
-    reporter: string;
-    comment: string;
-}
-
-// Standard abuse natures.
-enum Nature {
-    Disagreement = "org.matrix.msc3215.abuse.nature.disagreement",
-    Toxic = "org.matrix.msc3215.abuse.nature.toxic",
-    Illegal = "org.matrix.msc3215.abuse.nature.illegal",
-    Spam = "org.matrix.msc3215.abuse.nature.spam",
-    Other = "org.matrix.msc3215.abuse.nature.other",
-}
-
-enum NonStandardValue {
-    // Non-standard abuse nature.
-    // It should never leave the client - we use it to fallback to
-    // server-wide abuse reporting.
-    Admin = "non-standard.abuse.nature.admin",
-}
-
-type ExtendedNature = Nature | NonStandardValue;
-
-type Moderation = {
-    // The id of the moderation room.
-    moderationRoomId: string;
-    // The id of the bot in charge of forwarding abuse reports to the moderation room.
-    moderationBotUserId: string;
-};
 /*
  * A dialog for reporting an event.
- *
- * The actual content of the dialog will depend on two things:
- *
- * 1. Is `feature_report_to_moderators` enabled?
- * 2. Does the room support moderation as per MSC3215, i.e. is there
- *    a well-formed state event `m.room.moderation.moderated_by`
- *    /`org.matrix.msc3215.room.moderation.moderated_by`?
  */
 export default class ReportEventDialog extends React.Component<IProps, IState> {
-    // If the room supports moderation, the moderation information.
-    private moderation?: Moderation;
-
     public constructor(props: IProps) {
         super(props);
 
-        let moderatedByRoomId: string | null = null;
-        let moderatedByUserId: string | null = null;
-
-        if (SettingsStore.getValue("feature_report_to_moderators")) {
-            // The client supports reporting to moderators.
-            // Does the room support it, too?
-
-            // Extract state events to determine whether we should display
-            const client = MatrixClientPeg.safeGet();
-            const room = client.getRoom(props.mxEvent.getRoomId());
-
-            for (const stateEventType of MODERATED_BY_STATE_EVENT_TYPE) {
-                const stateEvent = room?.currentState.getStateEvents(stateEventType, stateEventType);
-                if (!stateEvent) {
-                    continue;
-                }
-                if (Array.isArray(stateEvent)) {
-                    // Internal error.
-                    throw new TypeError(
-                        `getStateEvents(${stateEventType}, ${stateEventType}) ` +
-                            "should return at most one state event",
-                    );
-                }
-                const event = stateEvent.event;
-                if (!("content" in event) || typeof event["content"] != "object") {
-                    // The room is improperly configured.
-                    // Display this debug message for the sake of moderators.
-                    console.debug(
-                        "Moderation error",
-                        "state event",
-                        stateEventType,
-                        "should have an object field `content`, got",
-                        event,
-                    );
-                    continue;
-                }
-                const content = event["content"];
-                if (!("room_id" in content) || typeof content["room_id"] != "string") {
-                    // The room is improperly configured.
-                    // Display this debug message for the sake of moderators.
-                    console.debug(
-                        "Moderation error",
-                        "state event",
-                        stateEventType,
-                        "should have a string field `content.room_id`, got",
-                        event,
-                    );
-                    continue;
-                }
-                if (!("user_id" in content) || typeof content["user_id"] != "string") {
-                    // The room is improperly configured.
-                    // Display this debug message for the sake of moderators.
-                    console.debug(
-                        "Moderation error",
-                        "state event",
-                        stateEventType,
-                        "should have a string field `content.user_id`, got",
-                        event,
-                    );
-                    continue;
-                }
-                moderatedByRoomId = content["room_id"];
-                moderatedByUserId = content["user_id"];
-            }
-
-            if (moderatedByRoomId && moderatedByUserId) {
-                // The room supports moderation.
-                this.moderation = {
-                    moderationRoomId: moderatedByRoomId,
-                    moderationBotUserId: moderatedByUserId,
-                };
-            }
-        }
-
         this.state = {
             // A free-form text describing the abuse.
             reason: "",
             busy: false,
             err: undefined,
-            // If specified, the nature of the abuse, as specified by MSC3215.
-            nature: undefined,
             ignoreUserToo: false, // default false, for now. Could easily be argued as default true
-            isRoomEncrypted: false, // async, will be set later
         };
     }
 
-    public componentDidMount = async (): Promise<void> => {
-        const crypto = MatrixClientPeg.safeGet().getCrypto();
-        const roomId = this.props.mxEvent.getRoomId();
-        if (!crypto || !roomId) return;
-
-        this.setState({
-            isRoomEncrypted: await crypto.isEncryptionEnabledInRoom(roomId),
-        });
-    };
-
     private onIgnoreUserTooChanged = (newVal: boolean): void => {
         this.setState({ ignoreUserToo: newVal });
     };
@@ -215,11 +60,6 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
         this.setState({ reason });
     };
 
-    // The user has clicked on a nature.
-    private onNatureChosen = (e: React.FormEvent<HTMLInputElement>): void => {
-        this.setState({ nature: e.currentTarget.value as ExtendedNature });
-    };
-
     // The user has clicked "cancel".
     private onCancel = (): void => {
         this.props.onFinished(false);
@@ -229,28 +69,13 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
     private onSubmit = async (): Promise<void> => {
         let reason = this.state.reason || "";
         reason = reason.trim();
-        if (this.moderation) {
-            // This room supports moderation.
-            // We need a nature.
-            // If the nature is `NATURE.OTHER` or `NON_STANDARD_NATURE.ADMIN`, we also need a `reason`.
-            if (
-                !this.state.nature ||
-                ((this.state.nature == Nature.Other || this.state.nature == NonStandardValue.Admin) && !reason)
-            ) {
-                this.setState({
-                    err: _t("report_content|missing_reason"),
-                });
-                return;
-            }
-        } else {
-            // This room does not support moderation.
-            // We need a `reason`.
-            if (!reason) {
-                this.setState({
-                    err: _t("report_content|missing_reason"),
-                });
-                return;
-            }
+
+        // Reasons are required on the API, even if unhelpful like "."
+        if (!reason) {
+            this.setState({
+                err: _t("report_content|missing_reason"),
+            });
+            return;
         }
 
         this.setState({
@@ -261,28 +86,10 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
         try {
             const client = MatrixClientPeg.safeGet();
             const ev = this.props.mxEvent;
-            if (this.moderation && this.state.nature !== NonStandardValue.Admin) {
-                const nature = this.state.nature;
 
-                // Report to moderators through to the dedicated bot,
-                // as configured in the room's state events.
-                const dmRoomId = await ensureDMExists(client, this.moderation.moderationBotUserId);
-                if (!dmRoomId) {
-                    throw new UserFriendlyError("report_content|error_create_room_moderation_bot");
-                }
-
-                await client.sendEvent(dmRoomId, ABUSE_EVENT_TYPE, {
-                    event_id: ev.getId()!,
-                    room_id: ev.getRoomId()!,
-                    moderated_by_id: this.moderation.moderationRoomId,
-                    nature,
-                    reporter: client.getUserId()!,
-                    comment: this.state.reason.trim(),
-                } satisfies AbuseEventContent);
-            } else {
-                // Report to homeserver admin through the dedicated Matrix API.
-                await client.reportEvent(ev.getRoomId()!, ev.getId()!, -100, this.state.reason.trim());
-            }
+            // Report to homeserver admin through the dedicated Matrix API. We hardcode the "score" because it's
+            // not actually used by anything.
+            await client.reportEvent(ev.getRoomId()!, ev.getId()!, -100, this.state.reason.trim());
 
             // if the user should also be ignored, do that
             if (this.state.ignoreUserToo) {
@@ -331,123 +138,6 @@ export default class ReportEventDialog extends React.Component<IProps, IState> {
             adminMessage = <p dangerouslySetInnerHTML={{ __html: html }} />;
         }
 
-        if (this.moderation) {
-            // Display report-to-moderator dialog.
-            // We let the user pick a nature.
-            const homeServerName = SdkConfig.get("validated_server_config")!.hsName;
-            let subtitle: string;
-            switch (this.state.nature) {
-                case Nature.Disagreement:
-                    subtitle = _t("report_content|nature_disagreement");
-                    break;
-                case Nature.Toxic:
-                    subtitle = _t("report_content|nature_toxic");
-                    break;
-                case Nature.Illegal:
-                    subtitle = _t("report_content|nature_illegal");
-                    break;
-                case Nature.Spam:
-                    subtitle = _t("report_content|nature_spam");
-                    break;
-                case NonStandardValue.Admin:
-                    if (this.state.isRoomEncrypted) {
-                        subtitle = _t("report_content|nature_nonstandard_admin_encrypted", {
-                            homeserver: homeServerName,
-                        });
-                    } else {
-                        subtitle = _t("report_content|nature_nonstandard_admin", { homeserver: homeServerName });
-                    }
-                    break;
-                case Nature.Other:
-                    subtitle = _t("report_content|nature_other");
-                    break;
-                default:
-                    subtitle = _t("report_content|nature");
-                    break;
-            }
-
-            return (
-                <BaseDialog
-                    className="mx_ReportEventDialog"
-                    onFinished={this.props.onFinished}
-                    title={_t("action|report_content")}
-                    contentId="mx_ReportEventDialog"
-                >
-                    <div>
-                        <StyledRadioButton
-                            name="nature"
-                            value={Nature.Disagreement}
-                            checked={this.state.nature == Nature.Disagreement}
-                            onChange={this.onNatureChosen}
-                        >
-                            {_t("report_content|disagree")}
-                        </StyledRadioButton>
-                        <StyledRadioButton
-                            name="nature"
-                            value={Nature.Toxic}
-                            checked={this.state.nature == Nature.Toxic}
-                            onChange={this.onNatureChosen}
-                        >
-                            {_t("report_content|toxic_behaviour")}
-                        </StyledRadioButton>
-                        <StyledRadioButton
-                            name="nature"
-                            value={Nature.Illegal}
-                            checked={this.state.nature == Nature.Illegal}
-                            onChange={this.onNatureChosen}
-                        >
-                            {_t("report_content|illegal_content")}
-                        </StyledRadioButton>
-                        <StyledRadioButton
-                            name="nature"
-                            value={Nature.Spam}
-                            checked={this.state.nature == Nature.Spam}
-                            onChange={this.onNatureChosen}
-                        >
-                            {_t("report_content|spam_or_propaganda")}
-                        </StyledRadioButton>
-                        <StyledRadioButton
-                            name="nature"
-                            value={NonStandardValue.Admin}
-                            checked={this.state.nature == NonStandardValue.Admin}
-                            onChange={this.onNatureChosen}
-                        >
-                            {_t("report_content|report_entire_room")}
-                        </StyledRadioButton>
-                        <StyledRadioButton
-                            name="nature"
-                            value={Nature.Other}
-                            checked={this.state.nature == Nature.Other}
-                            onChange={this.onNatureChosen}
-                        >
-                            {_t("report_content|other_label")}
-                        </StyledRadioButton>
-                        <p>{subtitle}</p>
-                        <Field
-                            className="mx_ReportEventDialog_reason"
-                            element="textarea"
-                            label={_t("room_settings|permissions|ban_reason")}
-                            rows={5}
-                            onChange={this.onReasonChange}
-                            value={this.state.reason}
-                            disabled={this.state.busy}
-                        />
-                        {progress}
-                        {error}
-                        {ignoreUserCheckbox}
-                    </div>
-                    <DialogButtons
-                        primaryButton={_t("action|send_report")}
-                        onPrimaryButtonClick={this.onSubmit}
-                        focus={true}
-                        onCancel={this.onCancel}
-                        disabled={this.state.busy}
-                    />
-                </BaseDialog>
-            );
-        }
-        // Report to homeserver admin.
-        // Currently, the API does not support natures.
         return (
             <BaseDialog
                 className="mx_ReportEventDialog"
diff --git a/apps/web/src/components/views/dialogs/RoomSettingsDialog-tab.ts b/apps/web/src/components/views/dialogs/RoomSettingsDialog-tab.ts
new file mode 100644
index 0000000000..a32b56bfba
--- /dev/null
+++ b/apps/web/src/components/views/dialogs/RoomSettingsDialog-tab.ts
@@ -0,0 +1,21 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+Copyright 2019 New Vector Ltd
+Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+
+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.
+*/
+
+export const enum RoomSettingsTab {
+    General = "ROOM_GENERAL_TAB",
+    People = "ROOM_PEOPLE_TAB",
+    Voip = "ROOM_VOIP_TAB",
+    Security = "ROOM_SECURITY_TAB",
+    Roles = "ROOM_ROLES_TAB",
+    Notifications = "ROOM_NOTIFICATIONS_TAB",
+    Bridges = "ROOM_BRIDGES_TAB",
+    Advanced = "ROOM_ADVANCED_TAB",
+    PollHistory = "ROOM_POLL_HISTORY_TAB",
+}
diff --git a/apps/web/src/components/views/dialogs/RoomSettingsDialog.tsx b/apps/web/src/components/views/dialogs/RoomSettingsDialog.tsx
index 4488c6bf93..add6e82783 100644
--- a/apps/web/src/components/views/dialogs/RoomSettingsDialog.tsx
+++ b/apps/web/src/components/views/dialogs/RoomSettingsDialog.tsx
@@ -42,25 +42,16 @@ import { type NonEmptyArray } from "../../../@types/common";
 import { PollHistoryTab } from "../settings/tabs/room/PollHistoryTab";
 import ErrorBoundary from "../elements/ErrorBoundary";
 import { PeopleRoomSettingsTab } from "../settings/tabs/room/PeopleRoomSettingsTab";
-import { SDKContext, type SdkContextClass } from "../../../contexts/SDKContext";
-
-export const enum RoomSettingsTab {
-    General = "ROOM_GENERAL_TAB",
-    People = "ROOM_PEOPLE_TAB",
-    Voip = "ROOM_VOIP_TAB",
-    Security = "ROOM_SECURITY_TAB",
-    Roles = "ROOM_ROLES_TAB",
-    Notifications = "ROOM_NOTIFICATIONS_TAB",
-    Bridges = "ROOM_BRIDGES_TAB",
-    Advanced = "ROOM_ADVANCED_TAB",
-    PollHistory = "ROOM_POLL_HISTORY_TAB",
-}
+import { SDKContext } from "../../../contexts/SDKContext";
+import { type SDKContextClass } from "../../../contexts/SDKContextClass";
+import { RoomSettingsTab } from "./RoomSettingsDialog-tab.ts";
+import SdkConfig from "../../../SdkConfig";
 
 interface IProps {
     roomId: string;
     onFinished: (success?: boolean) => void;
     initialTabId?: RoomSettingsTab;
-    sdkContext: SdkContextClass;
+    sdkContext: SDKContextClass;
 }
 
 interface IState {
@@ -157,7 +148,7 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
                 ),
             );
         }
-        if (SettingsStore.getValue("feature_group_calls")) {
+        if (!SdkConfig.get("element_call").disable) {
             tabs.push(
                 new Tab(
                     RoomSettingsTab.Voip,
diff --git a/apps/web/src/components/views/dialogs/ScrollableBaseModal.tsx b/apps/web/src/components/views/dialogs/ScrollableBaseModal.tsx
index 9f4ad52dd3..075bd35fa5 100644
--- a/apps/web/src/components/views/dialogs/ScrollableBaseModal.tsx
+++ b/apps/web/src/components/views/dialogs/ScrollableBaseModal.tsx
@@ -76,8 +76,8 @@ export default abstract class ScrollableBaseModal<
                 <FocusLock
                     returnFocus={true}
                     lockProps={{
-                        onKeyDown: this.onKeyDown,
-                        role: "dialog",
+                        "onKeyDown": this.onKeyDown,
+                        "role": "dialog",
                         ["aria-labelledby"]: "mx_CompoundDialog_title",
 
                         // Like BaseDialog, we'll just point this at the whole content
diff --git a/apps/web/src/components/views/dialogs/ServerOfflineDialog.tsx b/apps/web/src/components/views/dialogs/ServerOfflineDialog.tsx
index f403ecb790..9576728f95 100644
--- a/apps/web/src/components/views/dialogs/ServerOfflineDialog.tsx
+++ b/apps/web/src/components/views/dialogs/ServerOfflineDialog.tsx
@@ -39,7 +39,7 @@ export default class ServerOfflineDialog extends React.PureComponent<IProps> {
     };
 
     private renderTimeline(): ReactNode[] {
-        return EchoStore.instance.contexts.map((c, i) => {
+        return EchoStore.instance.contexts.map((c) => {
             if (!c.firstFailedTime) return null; // not useful
             if (!(c instanceof RoomEchoContext))
                 throw new Error("Cannot render unknown context: " + c.constructor.name);
@@ -51,7 +51,7 @@ export default class ServerOfflineDialog extends React.PureComponent<IProps> {
             );
             const entries = c.transactions
                 .filter((t) => t.status === TransactionStatus.Error || t.didPreviouslyFail)
-                .map((t, j) => {
+                .map((t) => {
                     let button = <Spinner size={19} />;
                     if (t.status === TransactionStatus.Error) {
                         button = (
@@ -61,14 +61,14 @@ export default class ServerOfflineDialog extends React.PureComponent<IProps> {
                         );
                     }
                     return (
-                        <div className="mx_ServerOfflineDialog_content_context_txn" key={`txn-${j}`}>
+                        <div className="mx_ServerOfflineDialog_content_context_txn" key={t.auditName}>
                             <span className="mx_ServerOfflineDialog_content_context_txn_desc">{t.auditName}</span>
                             {button}
                         </div>
                     );
                 });
             return (
-                <div className="mx_ServerOfflineDialog_content_context" key={`context-${i}`}>
+                <div className="mx_ServerOfflineDialog_content_context" key={c.room.roomId}>
                     <div className="mx_ServerOfflineDialog_content_context_timestamp">
                         {formatTime(c.firstFailedTime, SettingsStore.getValue("showTwelveHourTimestamps"))}
                     </div>
diff --git a/apps/web/src/components/views/dialogs/SessionRestoreErrorDialog.tsx b/apps/web/src/components/views/dialogs/SessionRestoreErrorDialog.tsx
index edf93558ff..1bb6ed7f6d 100644
--- a/apps/web/src/components/views/dialogs/SessionRestoreErrorDialog.tsx
+++ b/apps/web/src/components/views/dialogs/SessionRestoreErrorDialog.tsx
@@ -50,7 +50,7 @@ export default class SessionRestoreErrorDialog extends React.Component<IProps> {
         const brand = SdkConfig.get().brand;
 
         const clearStorageButton = (
-            <button onClick={this.onClearStorageClick} className="danger">
+            <button onClick={this.onClearStorageClick} className="danger" type="button">
                 {_t("error|session_restore|clear_storage_button")}
             </button>
         );
diff --git a/apps/web/src/components/views/dialogs/ShareDialog.tsx b/apps/web/src/components/views/dialogs/ShareDialog.tsx
index 993c411562..02c85c1a0c 100644
--- a/apps/web/src/components/views/dialogs/ShareDialog.tsx
+++ b/apps/web/src/components/views/dialogs/ShareDialog.tsx
@@ -21,36 +21,39 @@ import { UIFeature } from "../../../settings/UIFeature";
 import BaseDialog from "./BaseDialog";
 import { type XOR } from "../../../@types/common";
 import { useSettingValue } from "../../../hooks/useSettings.ts";
+import FacebookIcon from "../../../../res/img/social/facebook.png";
+import TwitterIcon from "../../../../res/img/social/twitter-2.png";
+import LinkedInIcon from "../../../../res/img/social/linkedin.png";
+import RedditIcon from "../../../../res/img/social/reddit.png";
+import EmailIcon from "../../../../res/img/social/email-1.png";
 
-/* eslint-disable @typescript-eslint/no-require-imports */
 const SOCIALS = [
     {
         name: "Facebook",
-        img: require("../../../../res/img/social/facebook.png"),
+        img: FacebookIcon,
         url: (url: string) => `https://www.facebook.com/sharer/sharer.php?u=${url}`,
     },
     {
         name: "Twitter",
-        img: require("../../../../res/img/social/twitter-2.png"),
+        img: TwitterIcon,
         url: (url: string) => `https://twitter.com/home?status=${url}`,
     },
     {
         name: "LinkedIn",
-        img: require("../../../../res/img/social/linkedin.png"),
+        img: LinkedInIcon,
         url: (url: string) => `https://www.linkedin.com/shareArticle?mini=true&url=${url}`,
     },
     {
         name: "Reddit",
-        img: require("../../../../res/img/social/reddit.png"),
+        img: RedditIcon,
         url: (url: string) => `https://www.reddit.com/submit?url=${url}`,
     },
     {
         name: "email",
-        img: require("../../../../res/img/social/email-1.png"),
+        img: EmailIcon,
         url: (url: string) => `mailto:?body=${url}`,
     },
 ];
-/* eslint-enable @typescript-eslint/no-require-imports */
 
 interface BaseProps {
     /**
diff --git a/apps/web/src/components/views/dialogs/SpacePreferencesDialog.tsx b/apps/web/src/components/views/dialogs/SpacePreferencesDialog.tsx
index 6925cadcf1..a2ca0034f5 100644
--- a/apps/web/src/components/views/dialogs/SpacePreferencesDialog.tsx
+++ b/apps/web/src/components/views/dialogs/SpacePreferencesDialog.tsx
@@ -65,8 +65,8 @@ const SpacePreferencesDialog: React.FC<IProps> = ({ space, onFinished }) => {
         new Tab(
             SpacePreferenceTab.Appearance,
             _td("common|appearance"),
-            <VisibilityOnIcon />,
-            <SpacePreferencesAppearanceTab space={space} />,
+            <VisibilityOnIcon key={SpacePreferenceTab.Appearance} />,
+            <SpacePreferencesAppearanceTab key={SpacePreferenceTab.Appearance} space={space} />,
         ),
     ];
 
diff --git a/apps/web/src/components/views/dialogs/SpaceSettingsDialog.tsx b/apps/web/src/components/views/dialogs/SpaceSettingsDialog.tsx
index 11cc82cadb..7f41ed7a96 100644
--- a/apps/web/src/components/views/dialogs/SpaceSettingsDialog.tsx
+++ b/apps/web/src/components/views/dialogs/SpaceSettingsDialog.tsx
@@ -54,27 +54,36 @@ const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFin
             new Tab(
                 SpaceSettingsTab.General,
                 _td("common|general"),
-                <SettingsSolidIcon />,
-                <SpaceSettingsGeneralTab matrixClient={cli} space={space} />,
+                <SettingsSolidIcon key={SpaceSettingsTab.General} />,
+                <SpaceSettingsGeneralTab key={SpaceSettingsTab.General} matrixClient={cli} space={space} />,
             ),
             new Tab(
                 SpaceSettingsTab.Visibility,
                 _td("room_settings|visibility|title"),
-                <VisibilityOnIcon />,
-                <SpaceSettingsVisibilityTab matrixClient={cli} space={space} closeSettingsFn={onFinished} />,
+                <VisibilityOnIcon key={SpaceSettingsTab.Visibility} />,
+                <SpaceSettingsVisibilityTab
+                    key={SpaceSettingsTab.Visibility}
+                    matrixClient={cli}
+                    space={space}
+                    closeSettingsFn={onFinished}
+                />,
             ),
             new Tab(
                 SpaceSettingsTab.Roles,
                 _td("room_settings|permissions|title"),
-                <AdminIcon />,
-                <RolesRoomSettingsTab room={space} />,
+                <AdminIcon key={SpaceSettingsTab.Roles} />,
+                <RolesRoomSettingsTab key={SpaceSettingsTab.Roles} room={space} />,
             ),
             SettingsStore.getValue(UIFeature.AdvancedSettings)
                 ? new Tab(
                       SpaceSettingsTab.Advanced,
                       _td("common|advanced"),
-                      <AdvancedSettingsIcon />,
-                      <AdvancedRoomSettingsTab room={space} closeSettingsFn={onFinished} />,
+                      <AdvancedSettingsIcon key={SpaceSettingsTab.Advanced} />,
+                      <AdvancedRoomSettingsTab
+                          key={SpaceSettingsTab.Advanced}
+                          room={space}
+                          closeSettingsFn={onFinished}
+                      />,
                   )
                 : null,
         ].filter(Boolean) as NonEmptyArray<Tab<SpaceSettingsTab>>;
diff --git a/apps/web/src/components/views/dialogs/UntrustedDeviceDialog.tsx b/apps/web/src/components/views/dialogs/UntrustedDeviceDialog.tsx
deleted file mode 100644
index 703dbec85f..0000000000
--- a/apps/web/src/components/views/dialogs/UntrustedDeviceDialog.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2019, 2020 , 2021 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React from "react";
-import { type User } from "matrix-js-sdk/src/matrix";
-
-import { _t } from "../../../languageHandler";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import E2EIcon from "../rooms/E2EIcon";
-import AccessibleButton from "../elements/AccessibleButton";
-import BaseDialog from "./BaseDialog";
-import { type IDevice } from "../right_panel/UserInfo";
-import { E2EStatus } from "../../../utils/ShieldUtils";
-
-interface IProps {
-    /**
-     * The user whose device is untrusted.
-     */
-    user: User;
-    /**
-     * The device that is untrusted.
-     */
-    device: IDevice;
-    /**
-     * Callback for when the dialog is dismissed.
-     * If mode is "sas", the user wants to verify the device with SAS. Otherwise, the dialog was dismissed normally.
-     * @param mode The mode of dismissal.
-     */
-    onFinished(this: void, mode?: "sas"): void;
-}
-
-const UntrustedDeviceDialog: React.FC<IProps> = ({ device, user, onFinished }) => {
-    let askToVerifyText: string;
-    let newSessionText: string;
-
-    if (MatrixClientPeg.safeGet().getUserId() === user.userId) {
-        newSessionText = _t("encryption|udd|own_new_session_text");
-        askToVerifyText = _t("encryption|udd|own_ask_verify_text");
-    } else {
-        newSessionText = _t("encryption|udd|other_new_session_text", {
-            name: user.displayName,
-            userId: user.userId,
-        });
-        askToVerifyText = _t("encryption|udd|other_ask_verify_text");
-    }
-
-    return (
-        <BaseDialog
-            onFinished={onFinished}
-            className="mx_UntrustedDeviceDialog"
-            title={
-                <>
-                    <E2EIcon status={E2EStatus.Warning} isUser size={24} hideTooltip={true} />
-                    {_t("encryption|udd|title")}
-                </>
-            }
-        >
-            <div className="mx_Dialog_content" id="mx_Dialog_content">
-                <p>{newSessionText}</p>
-                <p>
-                    {device.displayName} ({device.deviceId})
-                </p>
-                <p>{askToVerifyText}</p>
-            </div>
-            <div className="mx_Dialog_buttons">
-                <AccessibleButton kind="primary_outline" onClick={() => onFinished("sas")}>
-                    {_t("encryption|udd|interactive_verification_button")}
-                </AccessibleButton>
-                <AccessibleButton kind="primary" onClick={() => onFinished()}>
-                    {_t("action|done")}
-                </AccessibleButton>
-            </div>
-        </BaseDialog>
-    );
-};
-
-export default UntrustedDeviceDialog;
diff --git a/apps/web/src/components/views/dialogs/UploadConfirmDialog.tsx b/apps/web/src/components/views/dialogs/UploadConfirmDialog.tsx
index 820b047c38..9f7ac23f1f 100644
--- a/apps/web/src/components/views/dialogs/UploadConfirmDialog.tsx
+++ b/apps/web/src/components/views/dialogs/UploadConfirmDialog.tsx
@@ -104,7 +104,11 @@ export default class UploadConfirmDialog extends React.Component<IProps, IState>
 
         let uploadAllButton: JSX.Element | undefined;
         if (this.props.currentIndex + 1 < this.props.totalFiles) {
-            uploadAllButton = <button onClick={this.onUploadAllClick}>{_t("upload_file|upload_all_button")}</button>;
+            uploadAllButton = (
+                <button onClick={this.onUploadAllClick} type="button">
+                    {_t("upload_file|upload_all_button")}
+                </button>
+            );
         }
 
         return (
diff --git a/apps/web/src/components/views/dialogs/UploadFailureDialog.tsx b/apps/web/src/components/views/dialogs/UploadFailureDialog.tsx
index 75ee17fda6..e3715d032e 100644
--- a/apps/web/src/components/views/dialogs/UploadFailureDialog.tsx
+++ b/apps/web/src/components/views/dialogs/UploadFailureDialog.tsx
@@ -36,7 +36,6 @@ export default class UploadFailureDialog extends React.Component<IProps> {
 
     public render(): React.ReactNode {
         let message;
-        let preview;
         let buttons;
         if (this.props.totalFiles === 1 && this.props.badFiles.length === 1) {
             message = _t(
@@ -105,10 +104,7 @@ export default class UploadFailureDialog extends React.Component<IProps> {
                 title={_t("upload_file|error_title")}
                 contentId="mx_Dialog_content"
             >
-                <div id="mx_Dialog_content">
-                    {message}
-                    {preview}
-                </div>
+                <div id="mx_Dialog_content">{message}</div>
 
                 {buttons}
             </BaseDialog>
diff --git a/apps/web/src/components/views/dialogs/UserSettingsDialog.tsx b/apps/web/src/components/views/dialogs/UserSettingsDialog.tsx
index a0802f8a57..830f1e4f10 100644
--- a/apps/web/src/components/views/dialogs/UserSettingsDialog.tsx
+++ b/apps/web/src/components/views/dialogs/UserSettingsDialog.tsx
@@ -23,6 +23,7 @@ import LockIcon from "@vector-im/compound-design-tokens/assets/web/icons/lock";
 import LabsIcon from "@vector-im/compound-design-tokens/assets/web/icons/labs";
 import BlockIcon from "@vector-im/compound-design-tokens/assets/web/icons/block";
 import HelpIcon from "@vector-im/compound-design-tokens/assets/web/icons/help";
+import { ToastContext, useActiveToast } from "@element-hq/web-shared-components";
 
 import TabbedView, { Tab, useActiveTabWithDefault } from "../../structures/TabbedView";
 import { _t, _td } from "../../../languageHandler";
@@ -43,10 +44,10 @@ import KeyboardUserSettingsTab from "../settings/tabs/user/KeyboardUserSettingsT
 import SessionManagerTab from "../settings/tabs/user/SessionManagerTab";
 import { UserTab } from "./UserTab";
 import { type NonEmptyArray } from "../../../@types/common";
-import { SDKContext, type SdkContextClass } from "../../../contexts/SDKContext";
+import { SDKContext } from "../../../contexts/SDKContext";
+import { type SDKContextClass } from "../../../contexts/SDKContextClass";
 import { useSettingValue } from "../../../hooks/useSettings";
 import { NoChange, useEventEmitterAsyncState, type AsyncStateCallbackResult } from "../../../hooks/useEventEmitter";
-import { ToastContext, useActiveToast } from "../../../contexts/ToastContext";
 import { EncryptionUserSettingsTab, type State } from "../settings/tabs/user/EncryptionUserSettingsTab";
 
 interface IProps {
@@ -57,7 +58,7 @@ interface IProps {
      * If undefined, the default state is used ("loading").
      */
     initialEncryptionState?: State;
-    sdkContext: SdkContextClass;
+    sdkContext: SDKContextClass;
     onFinished(this: void): void;
 }
 
@@ -166,7 +167,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
                 UserTab.Preferences,
                 _td("common|preferences"),
                 <PreferencesIcon />,
-                <PreferencesUserSettingsTab closeSettingsFn={props.onFinished} />,
+                <PreferencesUserSettingsTab />,
                 "UserSettingsPreferences",
             ),
         );
@@ -206,7 +207,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
                 UserTab.Security,
                 _td("room_settings|security|title"),
                 <LockIcon />,
-                <SecurityUserSettingsTab closeSettingsFn={props.onFinished} />,
+                <SecurityUserSettingsTab />,
                 "UserSettingsSecurityPrivacy",
             ),
         );
diff --git a/apps/web/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx b/apps/web/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx
index 6f71f0762c..c5bfe7bedf 100644
--- a/apps/web/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx
+++ b/apps/web/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx
@@ -7,13 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type ChangeEventHandler } from "react";
-import {
-    type Capability,
-    isTimelineCapability,
-    type Widget,
-    WidgetEventCapability,
-    type WidgetKind,
-} from "matrix-widget-api";
+import { type Capability, isTimelineCapability, WidgetEventCapability, type WidgetKind } from "matrix-widget-api";
 import { lexicographicCompare } from "matrix-js-sdk/src/utils";
 import { Form, SettingsToggleInput } from "@vector-im/compound-web";
 
@@ -26,7 +20,6 @@ import { CapabilityText } from "../../../widgets/CapabilityText";
 
 interface IProps {
     requestedCapabilities: Set<Capability>;
-    widget: Widget;
     widgetKind: WidgetKind; // TODO: Refactor into the Widget class
     onFinished(result?: { approved: Capability[]; remember: boolean }): void;
 }
@@ -99,11 +92,11 @@ export default class WidgetCapabilitiesPromptDialog extends React.PureComponent<
             // Both are the same type (both timeline or both non-timeline), sort lexicographically
             return lexicographicCompare(capA, capB);
         });
-        const checkboxRows = orderedCapabilities.map(([cap, isChecked], i) => {
+        const checkboxRows = orderedCapabilities.map(([cap, isChecked]) => {
             const text = CapabilityText.for(cap, this.props.widgetKind);
 
             return (
-                <div className="mx_WidgetCapabilitiesPromptDialog_cap" key={cap + i}>
+                <div className="mx_WidgetCapabilitiesPromptDialog_cap" key={cap}>
                     <StyledCheckbox
                         checked={isChecked}
                         onChange={() => this.onToggle(cap)}
diff --git a/apps/web/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.tsx b/apps/web/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.tsx
index d0d06d12d5..cf1142a9b2 100644
--- a/apps/web/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.tsx
+++ b/apps/web/src/components/views/dialogs/WidgetOpenIDPermissionsDialog.tsx
@@ -16,7 +16,7 @@ import { _t } from "../../../languageHandler";
 import { OIDCState } from "../../../stores/widgets/WidgetPermissionStore";
 import BaseDialog from "./BaseDialog";
 import DialogButtons from "../elements/DialogButtons";
-import { SdkContextClass } from "../../../contexts/SDKContext";
+import { SDKContextClass } from "../../../contexts/SDKContextClass";
 
 interface IProps {
     widget: Widget;
@@ -50,7 +50,7 @@ export default class WidgetOpenIDPermissionsDialog extends React.PureComponent<I
         if (this.state.rememberSelection) {
             logger.log(`Remembering ${this.props.widget.id} as allowed=${allowed} for OpenID`);
 
-            SdkContextClass.instance.widgetPermissionStore.setOIDCState(
+            SDKContextClass.instance.widgetPermissionStore.setOIDCState(
                 this.props.widget,
                 this.props.widgetKind,
                 this.props.inRoomId,
diff --git a/apps/web/src/components/views/dialogs/devtools/AccountData.tsx b/apps/web/src/components/views/dialogs/devtools/AccountData.tsx
index e4e1ffe769..6631675d4f 100644
--- a/apps/web/src/components/views/dialogs/devtools/AccountData.tsx
+++ b/apps/web/src/components/views/dialogs/devtools/AccountData.tsx
@@ -78,7 +78,7 @@ const BaseAccountDataExplorer: React.FC<IProps> = ({ events, Editor, actionLabel
                     };
 
                     return (
-                        <button className="mx_DevTools_button" key={eventType} onClick={onClick}>
+                        <button className="mx_DevTools_button" key={eventType} onClick={onClick} type="button">
                             {eventType}
                         </button>
                     );
diff --git a/apps/web/src/components/views/dialogs/devtools/BaseTool.tsx b/apps/web/src/components/views/dialogs/devtools/BaseTool.tsx
index 09120ecde2..6a2ce75d5c 100644
--- a/apps/web/src/components/views/dialogs/devtools/BaseTool.tsx
+++ b/apps/web/src/components/views/dialogs/devtools/BaseTool.tsx
@@ -61,7 +61,11 @@ const BaseTool: React.FC<XOR<IMinProps, IProps>> = ({
             });
         };
 
-        actionButton = <button onClick={onActionClick}>{_t(actionLabel)}</button>;
+        actionButton = (
+            <button onClick={onActionClick} type="button">
+                {_t(actionLabel)}
+            </button>
+        );
     }
 
     return (
@@ -69,7 +73,9 @@ const BaseTool: React.FC<XOR<IMinProps, IProps>> = ({
             <div className={classNames("mx_DevTools_content", className)}>{children}</div>
             <div className="mx_Dialog_buttons">
                 {extraButton}
-                <button onClick={onBackClick}>{_t("action|back")}</button>
+                <button onClick={onBackClick} type="button">
+                    {_t("action|back")}
+                </button>
                 {actionButton}
             </div>
         </>
diff --git a/apps/web/src/components/views/dialogs/devtools/Event.tsx b/apps/web/src/components/views/dialogs/devtools/Event.tsx
index d8aeee932c..c13fe181c6 100644
--- a/apps/web/src/components/views/dialogs/devtools/Event.tsx
+++ b/apps/web/src/components/views/dialogs/devtools/Event.tsx
@@ -199,6 +199,9 @@ export const TimelineEventEditor: React.FC<IEditorProps> = ({ mxEvent, onBack })
                 rel_type: "m.replace",
                 event_id: getBaseEventId(mxEvent),
             },
+            ...("com.beeper.linkpreviews" in originalContent
+                ? { "com.beeper.linkpreviews": originalContent["com.beeper.linkpreviews"] }
+                : {}),
         };
 
         defaultContent = stringify(newContent);
diff --git a/apps/web/src/components/views/dialogs/devtools/FilteredList.tsx b/apps/web/src/components/views/dialogs/devtools/FilteredList.tsx
index e59059722a..14419b79e4 100644
--- a/apps/web/src/components/views/dialogs/devtools/FilteredList.tsx
+++ b/apps/web/src/components/views/dialogs/devtools/FilteredList.tsx
@@ -50,7 +50,7 @@ const FilteredList: React.FC<IProps> = ({ children, query, onChange }) => {
         };
 
         return (
-            <button className="mx_DevTools_button" onClick={showMore}>
+            <button className="mx_DevTools_button" onClick={showMore} type="button">
                 {_t("common|and_n_others", { count: overflowCount })}
             </button>
         );
diff --git a/apps/web/src/components/views/dialogs/devtools/RoomState.tsx b/apps/web/src/components/views/dialogs/devtools/RoomState.tsx
index 0d7041355a..01b666c9c5 100644
--- a/apps/web/src/components/views/dialogs/devtools/RoomState.tsx
+++ b/apps/web/src/components/views/dialogs/devtools/RoomState.tsx
@@ -100,6 +100,7 @@ const StateEventButton: React.FC<StateEventButtonProps> = ({ label, onClick }) =
                 mx_DevTools_RoomStateExplorer_button_emptyString: !trimmed,
             })}
             onClick={onClick}
+            type="button"
         >
             {content}
         </button>
@@ -148,7 +149,11 @@ const RoomStateExplorerEventType: React.FC<IEventTypeProps> = ({ eventType, onBa
         const onHistoryClick = (): void => {
             setHistory(true);
         };
-        const extraButton = <button onClick={onHistoryClick}>{_t("devtools|see_history")}</button>;
+        const extraButton = (
+            <button onClick={onHistoryClick} type="button">
+                {_t("devtools|see_history")}
+            </button>
+        );
         return <EventViewer mxEvent={event} onBack={_onBack} Editor={StateEventEditor} extraButton={extraButton} />;
     }
 
diff --git a/apps/web/src/components/views/dialogs/devtools/StickyEventState.tsx b/apps/web/src/components/views/dialogs/devtools/StickyEventState.tsx
index 96bebd5953..8f36788441 100644
--- a/apps/web/src/components/views/dialogs/devtools/StickyEventState.tsx
+++ b/apps/web/src/components/views/dialogs/devtools/StickyEventState.tsx
@@ -11,7 +11,7 @@ import { MatrixEvent, type IContent, RoomStickyEventsEvent } from "matrix-js-sdk
 import { Alert, Form, SettingsToggleInput } from "@vector-im/compound-web";
 
 import BaseTool, { DevtoolsContext, type IDevtoolsProps } from "./BaseTool.tsx";
-import { _t, _td, UserFriendlyError } from "../../../../languageHandler.tsx";
+import { _t, _td, UserFriendlyError } from "../../../../languageHandler";
 import {
     EventEditor,
     eventTypeField,
@@ -56,7 +56,11 @@ export const StickyStateExplorer: React.FC<IDevtoolsProps> = ({ onBack, setTool
                 <Alert
                     type="critical"
                     title={_t("common|error")}
-                    actions={<button onClick={onBack}>{_t("action|back")}</button>}
+                    actions={
+                        <button onClick={onBack} type="button">
+                            {_t("action|back")}
+                        </button>
+                    }
                 >
                     {_t("devtools|sticky_events_not_supported")}
                 </Alert>
@@ -107,7 +111,12 @@ export const StickyStateExplorer: React.FC<IDevtoolsProps> = ({ onBack, setTool
         <BaseTool onBack={onBack} actionLabel={_td("devtools|send_custom_sticky_event")} onAction={onAction}>
             <p>
                 {uniqueEventTypes.map((eventType) => (
-                    <button key={eventType} className="mx_DevTools_button" onClick={() => setEventType(eventType)}>
+                    <button
+                        key={eventType}
+                        className="mx_DevTools_button"
+                        onClick={() => setEventType(eventType)}
+                        type="button"
+                    >
                         {eventType.length > 0 ? eventType : _t("devtools|empty_string")}
                     </button>
                 ))}
diff --git a/apps/web/src/components/views/dialogs/devtools/Users.tsx b/apps/web/src/components/views/dialogs/devtools/Users.tsx
index aab47e672b..a0ba101dd8 100644
--- a/apps/web/src/components/views/dialogs/devtools/Users.tsx
+++ b/apps/web/src/components/views/dialogs/devtools/Users.tsx
@@ -21,6 +21,8 @@ import { useAsyncMemo } from "../../../../hooks/useAsyncMemo";
 import CopyableText from "../../elements/CopyableText";
 import E2EIcon from "../../rooms/E2EIcon";
 import { E2EStatus } from "../../../../utils/ShieldUtils";
+import SyntaxHighlight from "../../elements/SyntaxHighlight.tsx";
+import { stringify } from "./Event.tsx";
 
 /**
  * Replacement function for `<i>` tags in translation strings.
@@ -86,7 +88,7 @@ interface UserButtonProps {
  */
 const UserButton: React.FC<UserButtonProps> = ({ member, onClick }) => {
     return (
-        <button className="mx_DevTools_button" onClick={onClick}>
+        <button className="mx_DevTools_button" onClick={onClick} type="button">
             {member.userId}
         </button>
     );
@@ -164,6 +166,17 @@ const UserView: React.FC<UserProps> = ({ member, onBack }) => {
         [context, member],
         new Map(),
     );
+
+    const userIdentity = useAsyncMemo(
+        async () => {
+            const identity = await crypto?.getUserCrossSigningKeys(member.userId);
+            if (!identity) return null;
+            return <SyntaxHighlight language="json">{stringify(identity)}</SyntaxHighlight>;
+        },
+        [context, member],
+        null,
+    );
+
     // The device to show, if any.
     const [device, setDevice] = useState<Device | null>(null);
 
@@ -209,6 +222,10 @@ const UserView: React.FC<UserProps> = ({ member, onBack }) => {
                     ))}
                 </ul>
             </section>
+            <section>
+                <h2>{_t("devtools|user_identity")}</h2>
+                {userIdentity ?? <i>{_t("devtools|user_identity_unknown")}</i>}
+            </section>
         </BaseTool>
     );
 };
@@ -256,7 +273,7 @@ const DeviceButton: React.FC<DeviceButtonProps> = ({ crypto, device, onClick })
         null,
     );
     return (
-        <button className="mx_DevTools_button" onClick={onClick}>
+        <button className="mx_DevTools_button" onClick={onClick} type="button">
             {verificationIcon}
             {device.deviceId}
         </button>
diff --git a/apps/web/src/components/views/dialogs/devtools/WidgetExplorer.tsx b/apps/web/src/components/views/dialogs/devtools/WidgetExplorer.tsx
index d899c46c7c..284a80de1d 100644
--- a/apps/web/src/components/views/dialogs/devtools/WidgetExplorer.tsx
+++ b/apps/web/src/components/views/dialogs/devtools/WidgetExplorer.tsx
@@ -53,7 +53,12 @@ const WidgetExplorer: React.FC<IDevtoolsProps> = ({ onBack }) => {
         <BaseTool onBack={onBack}>
             <FilteredList query={query} onChange={setQuery}>
                 {widgets.map((w) => (
-                    <button className="mx_DevTools_button" key={w.url + w.eventId} onClick={() => setWidget(w)}>
+                    <button
+                        className="mx_DevTools_button"
+                        key={w.url + w.eventId}
+                        onClick={() => setWidget(w)}
+                        type="button"
+                    >
                         {w.url}
                     </button>
                 ))}
diff --git a/apps/web/src/components/views/dialogs/invite/DMRoomTile.tsx b/apps/web/src/components/views/dialogs/invite/DMRoomTile.tsx
index 8998977cf2..28a6e6e5bc 100644
--- a/apps/web/src/components/views/dialogs/invite/DMRoomTile.tsx
+++ b/apps/web/src/components/views/dialogs/invite/DMRoomTile.tsx
@@ -13,8 +13,8 @@ import type { ButtonEvent } from "../../elements/AccessibleButton.tsx";
 import BaseAvatar from "../../avatars/BaseAvatar.tsx";
 import { mediaFromMxc } from "../../../../customisations/Media.ts";
 import UserIdentifierCustomisations from "../../../../customisations/UserIdentifier.ts";
-import { _t } from "../../../../languageHandler.tsx";
-import { Icon as EmailPillAvatarIcon } from "../../../../../res/img/icon-email-pill-avatar.svg";
+import { _t } from "../../../../languageHandler";
+import EmailPillAvatarIcon from "../../../../../res/img/icon-email-pill-avatar.svg?react";
 
 interface IDMRoomTileProps {
     member: Member;
@@ -41,7 +41,7 @@ export class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
             <BaseAvatar
                 url={
                     this.props.member.getMxcAvatarUrl()
-                        ? mediaFromMxc(this.props.member.getMxcAvatarUrl()!).getSquareThumbnailHttp(
+                        ? mediaFromMxc(this.props.member.getMxcAvatarUrl()).getSquareThumbnailHttp(
                               parseInt(avatarSize, 10),
                           )
                         : null
diff --git a/apps/web/src/components/views/dialogs/invite/UnknownIdentityUsersWarningDialog.tsx b/apps/web/src/components/views/dialogs/invite/UnknownIdentityUsersWarningDialog.tsx
index a2c4b4a01a..00d32bdb6e 100644
--- a/apps/web/src/components/views/dialogs/invite/UnknownIdentityUsersWarningDialog.tsx
+++ b/apps/web/src/components/views/dialogs/invite/UnknownIdentityUsersWarningDialog.tsx
@@ -14,7 +14,7 @@ import { type Member } from "../../../../utils/direct-messages.ts";
 import BaseDialog from "../BaseDialog.tsx";
 import { type ScreenName } from "../../../../PosthogTrackers.ts";
 import { DMRoomTile } from "./DMRoomTile.tsx";
-import { _t } from "../../../../languageHandler.tsx";
+import { _t } from "../../../../languageHandler";
 
 interface Props {
     /** Callback that will be called when the 'Continue' or 'Invite' button is clicked. */
diff --git a/apps/web/src/components/views/dialogs/spotlight/RoomResultContextMenus.tsx b/apps/web/src/components/views/dialogs/spotlight/RoomResultContextMenus.tsx
index c11bd777e2..838fbcc45d 100644
--- a/apps/web/src/components/views/dialogs/spotlight/RoomResultContextMenus.tsx
+++ b/apps/web/src/components/views/dialogs/spotlight/RoomResultContextMenus.tsx
@@ -22,7 +22,7 @@ import { RoomGeneralContextMenu } from "../../context_menus/RoomGeneralContextMe
 import { RoomNotificationContextMenu } from "../../context_menus/RoomNotificationContextMenu";
 import SpaceContextMenu from "../../context_menus/SpaceContextMenu";
 import { type ButtonEvent } from "../../elements/AccessibleButton";
-import { contextMenuBelow } from "../../rooms/RoomTile";
+import { ChevronFace, type MenuProps } from "../../../structures/ContextMenu";
 import { shouldShowComponent } from "../../../../customisations/helpers/UIComponents";
 import { UIComponent } from "../../../../settings/UIFeature";
 
@@ -30,6 +30,14 @@ interface Props {
     room: Room;
 }
 
+const contextMenuBelow = (elementRect: DOMRect): MenuProps => {
+    // align the context menu's icons with the icon which opened the context menu
+    const left = elementRect.left + window.scrollX - 9;
+    const top = elementRect.bottom + window.scrollY + 17;
+    const chevronFace = ChevronFace.None;
+    return { left, top, chevronFace };
+};
+
 export function getNotificationIcon(state: RoomNotifState): ReactNode {
     switch (state) {
         case RoomNotifState.Mute:
diff --git a/apps/web/src/components/views/dialogs/spotlight/SpotlightDialog.tsx b/apps/web/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
index d8874a4d95..20a8b60d3d 100644
--- a/apps/web/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
+++ b/apps/web/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
@@ -35,7 +35,6 @@ import {
     RoomIcon,
     SpaceIcon,
     UserProfileIcon,
-    FavouriteIcon,
     HomeIcon,
     GroupIcon,
     CloseIcon,
@@ -70,10 +69,9 @@ import SettingsStore from "../../../../settings/SettingsStore";
 import { BreadcrumbsStore } from "../../../../stores/BreadcrumbsStore";
 import { type RoomNotificationState } from "../../../../stores/notifications/RoomNotificationState";
 import { RoomNotificationStateStore } from "../../../../stores/notifications/RoomNotificationStateStore";
-import { RecentAlgorithm } from "../../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
-import { SdkContextClass } from "../../../../contexts/SDKContext";
+import { compareRoomsByRecency } from "../../../../utils/room/sortRoomsByRecency";
+import { SDKContextClass } from "../../../../contexts/SDKContextClass";
 import { getMetaSpaceName, MetaSpace } from "../../../../stores/spaces";
-import SpaceStore from "../../../../stores/spaces/SpaceStore";
 import { DirectoryMember, type Member, startDmOnFirstMessage } from "../../../../utils/direct-messages";
 import DMRoomMap from "../../../../utils/DMRoomMap";
 import { makeUserPermalink } from "../../../../utils/permalinks/Permalinks";
@@ -85,7 +83,7 @@ import { SearchResultAvatar } from "../../avatars/SearchResultAvatar";
 import { NetworkDropdown } from "../../directory/NetworkDropdown";
 import AccessibleButton, { type ButtonEvent } from "../../elements/AccessibleButton";
 import Spinner from "../../elements/Spinner";
-import NotificationBadge from "../../rooms/NotificationBadge";
+import { NotificationBadge } from "../../rooms/NotificationBadge/NotificationBadge";
 import BaseDialog from "../BaseDialog";
 import { Option } from "./Option";
 import { PublicRoomResultDetails } from "./PublicRoomResultDetails";
@@ -156,10 +154,6 @@ function metaspaceToIcon(key: MetaSpace): JSX.Element | undefined {
     switch (key) {
         case MetaSpace.Home:
             return <HomeIcon />;
-        case MetaSpace.Favourites:
-            return <FavouriteIcon />;
-        case MetaSpace.People:
-            return <UserProfileIcon />;
         case MetaSpace.Orphans:
             return <RoomIcon />;
     }
@@ -252,8 +246,6 @@ const toMemberResult = (member: Member | RoomMember, alreadyFiltered: boolean):
     query: [member.userId.toLowerCase(), member.name.toLowerCase()].filter(Boolean),
 });
 
-const recentAlgorithm = new RecentAlgorithm();
-
 export const useWebSearchMetrics = (numResults: number, queryLength: number, viaSpotlight: boolean): void => {
     useEffect(() => {
         if (!queryLength) return;
@@ -427,13 +419,13 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
         }
 
         return [
-            ...SpaceStore.instance.enabledMetaSpaces.map((spaceKey) => ({
+            ...SDKContextClass.instance.spaceStore.enabledMetaSpaces.map((spaceKey) => ({
                 section: Section.Spaces,
                 filter: [] as Filter[],
                 avatar: <div className="mx_SpotlightDialog_metaspaceResult">{metaspaceToIcon(spaceKey)}</div>,
-                name: getMetaSpaceName(spaceKey, SpaceStore.instance.allRoomsInHome),
+                name: getMetaSpaceName(spaceKey, SDKContextClass.instance.spaceStore.allRoomsInHome),
                 onClick() {
-                    SpaceStore.instance.setActiveSpace(spaceKey);
+                    SDKContextClass.instance.spaceStore.setActiveSpace(spaceKey);
                 },
             })),
             ...roomResults,
@@ -498,7 +490,6 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
         }
 
         // Sort results by most recent activity
-
         const myUserId = cli.getSafeUserId();
         for (const resultArray of Object.values(results)) {
             resultArray.sort((a: Result, b: Result) => {
@@ -507,7 +498,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                     if (!isRoomResult(b)) return -1;
                     if (!isRoomResult(a)) return -1;
 
-                    return recentAlgorithm.getLastTs(b.room, myUserId) - recentAlgorithm.getLastTs(a.room, myUserId);
+                    return compareRoomsByRecency(a.room, b.room, myUserId);
                 } else if (isMemberResult(a) || isMemberResult(b)) {
                     // Member results should appear just after room results
                     if (!isMemberResult(b)) return -1;
@@ -520,12 +511,12 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
         }
 
         return results;
-    }, [trimmedQuery, filter, cli, possibleResults, userDirectorySearchResults, memberComparator]);
+    }, [cli, trimmedQuery, filter, possibleResults, userDirectorySearchResults, memberComparator]);
 
     const numResults = sum(Object.values(results).map((it) => it.length));
     useWebSearchMetrics(numResults, query.length, true);
 
-    const activeSpace = SpaceStore.instance.activeSpaceRoom;
+    const activeSpace = SDKContextClass.instance.spaceStore.activeSpaceRoom;
     const [spaceResults, spaceResultsLoading] = useSpaceResults(activeSpace ?? undefined, query);
 
     const setQuery = (e: ChangeEvent<HTMLInputElement>): void => {
@@ -547,7 +538,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
         });
         // we intentionally ignore changes to the rovingContext for the purpose of this hook
         // we only want to reset the focus whenever the results or filters change
-        // eslint-disable-next-line
+        // oxlint-disable-next-line react-hooks/exhaustive-deps
     }, [results, filter]);
 
     const viewRoom = (
@@ -673,8 +664,13 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                         {...ariaProperties}
                     >
                         <DecoratedRoomAvatar room={result.room} size={AVATAR_SIZE} tooltipProps={{ tabIndex: -1 }} />
-                        {result.room.name}
-                        <NotificationBadge notification={notification} />
+                        <span className="mx_SpotlightDialog_result_name" title={result.room.name}>
+                            {result.room.name}
+                        </span>
+                        <NotificationBadge
+                            notification={notification}
+                            className="mx_SpotlightDialog_notificationBadge"
+                        />
                         <RoomContextDetails
                             id={`mx_SpotlightDialog_button_result_${result.room.roomId}_details`}
                             className="mx_SpotlightDialog_result_details"
@@ -698,7 +694,14 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                         aria-describedby={`mx_SpotlightDialog_button_result_${result.member.userId}_details`}
                     >
                         <SearchResultAvatar user={result.member} size={AVATAR_SIZE} />
-                        {result.member instanceof RoomMember ? result.member.rawDisplayName : result.member.name}
+                        <span
+                            className="mx_SpotlightDialog_result_name"
+                            title={
+                                result.member instanceof RoomMember ? result.member.rawDisplayName : result.member.name
+                            }
+                        >
+                            {result.member instanceof RoomMember ? result.member.rawDisplayName : result.member.name}
+                        </span>
                         <div
                             id={`mx_SpotlightDialog_button_result_${result.member.userId}_details`}
                             className="mx_SpotlightDialog_result_details"
@@ -1096,7 +1099,10 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                                         tooltipProps={{ tabIndex: -1 }}
                                     />
                                     {room.name}
-                                    <NotificationBadge notification={notification} />
+                                    <NotificationBadge
+                                        notification={notification}
+                                        className="mx_SpotlightDialog_notificationBadge"
+                                    />
                                     <RoomContextDetails
                                         id={`mx_SpotlightDialog_button_recentSearch_${room.roomId}_details`}
                                         className="mx_SpotlightDialog_result_details"
@@ -1122,7 +1128,7 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                     </h4>
                     <div>
                         {BreadcrumbsStore.instance.rooms
-                            .filter((r) => r.roomId !== SdkContextClass.instance.roomViewStore.getRoomId())
+                            .filter((r) => r.roomId !== SDKContextClass.instance.roomViewStore.getRoomId())
                             .map((room) => (
                                 <TooltipOption
                                     id={`mx_SpotlightDialog_button_recentlyViewed_${room.roomId}`}
diff --git a/apps/web/src/components/views/elements/AccessibleButton.tsx b/apps/web/src/components/views/elements/AccessibleButton.tsx
index 3032312b32..2c3e715685 100644
--- a/apps/web/src/components/views/elements/AccessibleButton.tsx
+++ b/apps/web/src/components/views/elements/AccessibleButton.tsx
@@ -20,7 +20,7 @@ import { Tooltip } from "@vector-im/compound-web";
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 
-export type ButtonEvent = React.MouseEvent<Element> | React.KeyboardEvent<Element> | React.FormEvent<Element>;
+export type ButtonEvent = React.MouseEvent | React.KeyboardEvent | React.FormEvent;
 
 /**
  * The kind of button, similar to how Bootstrap works.
diff --git a/apps/web/src/components/views/elements/AppTile.tsx b/apps/web/src/components/views/elements/AppTile.tsx
index 9f3a203666..3db1782118 100644
--- a/apps/web/src/components/views/elements/AppTile.tsx
+++ b/apps/web/src/components/views/elements/AppTile.tsx
@@ -45,25 +45,21 @@ import PersistedElement, { getPersistKey } from "./PersistedElement";
 import { WidgetType } from "../../../widgets/WidgetType";
 import { ElementWidget, WidgetMessaging, WidgetMessagingEvent } from "../../../stores/widgets/WidgetMessaging";
 import WidgetAvatar from "../avatars/WidgetAvatar";
-import LegacyCallHandler from "../../../LegacyCallHandler";
 import { type IApp, isAppWidget } from "../../../stores/WidgetStore";
-import { WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
 import { OwnProfileStore } from "../../../stores/OwnProfileStore";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 import WidgetUtils from "../../../utils/WidgetUtils";
-import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { type ActionPayload } from "../../../dispatcher/payloads";
 import { Action } from "../../../dispatcher/actions";
 import { ElementWidgetCapabilities } from "../../../stores/widgets/ElementWidgetCapabilities";
 import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingStore";
-import { SdkContextClass } from "../../../contexts/SDKContext";
 import { ModuleRunner } from "../../../modules/ModuleRunner";
 import { ModuleApi } from "../../../modules/Api";
 import { toWidgetDescriptor } from "../../../modules/WidgetLifecycleApi";
 import { parseUrl } from "../../../utils/UrlUtils";
-import RightPanelStore from "../../../stores/right-panel/RightPanelStore.ts";
 import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases.ts";
 import { WidgetContextMenu } from "../../../viewmodels/room/right-panel/WidgetContextMenuViewModel.tsx";
+import { SDKContext } from "../../../contexts/SDKContext.ts";
 
 // Note that there is advice saying allow-scripts shouldn't be used with allow-same-origin
 // because that would allow the iframe to programmatically remove the sandbox attribute, but
@@ -138,8 +134,8 @@ interface IState {
 }
 
 export default class AppTile extends React.Component<IProps, IState> {
-    public static contextType = MatrixClientContext;
-    declare public context: ContextType<typeof MatrixClientContext>;
+    public static contextType = SDKContext;
+    declare public context: React.ContextType<typeof SDKContext>;
 
     public static defaultProps: Partial<IProps> = {
         waitForIframeLoad: true,
@@ -162,7 +158,7 @@ export default class AppTile extends React.Component<IProps, IState> {
     private dispatcherRef?: string;
     private unmounted = false;
 
-    public constructor(props: IProps, context: ContextType<typeof MatrixClientContext>) {
+    public constructor(props: IProps, context: ContextType<typeof SDKContext>) {
         super(props, context);
 
         // The key used for PersistedElement
@@ -257,7 +253,7 @@ export default class AppTile extends React.Component<IProps, IState> {
         );
         if (isActiveWidget) {
             // We just left the room that the active widget was from.
-            if (this.props.room && SdkContextClass.instance.roomViewStore.getRoomId() !== this.props.room.roomId) {
+            if (this.props.room && this.context.roomViewStore.getRoomId() !== this.props.room.roomId) {
                 // If we are not actively looking at the room then destroy this widget entirely.
                 this.endWidgetActions();
             } else if (WidgetType.JITSI.matches(this.props.app.type)) {
@@ -304,7 +300,7 @@ export default class AppTile extends React.Component<IProps, IState> {
      * Set initial component state when the App wUrl (widget URL) is being updated.
      * Component props *must* be passed (rather than relying on this.props).
      * @param  {Object} newProps The new properties of the component
-     * @return {Object} Updated component state to be set with setState
+     * @returns {Object} Updated component state to be set with setState
      */
     private getNewState(newProps: IProps): IState {
         return {
@@ -393,7 +389,7 @@ export default class AppTile extends React.Component<IProps, IState> {
         this.watchUserReady();
 
         if (this.props.room) {
-            this.context.on(RoomEvent.MyMembership, this.onMyMembership);
+            this.context.client?.on(RoomEvent.MyMembership, this.onMyMembership);
         }
         this.allowedWidgetsWatchRef = SettingsStore.watchSetting("allowedWidgets", null, this.onAllowedWidgetsChange);
         // Widget action listeners
@@ -426,7 +422,7 @@ export default class AppTile extends React.Component<IProps, IState> {
         dis.unregister(this.dispatcherRef);
 
         if (this.props.room) {
-            this.context.off(RoomEvent.MyMembership, this.onMyMembership);
+            this.context.client?.off(RoomEvent.MyMembership, this.onMyMembership);
         }
 
         SettingsStore.unwatchSetting(this.allowedWidgetsWatchRef);
@@ -545,7 +541,7 @@ export default class AppTile extends React.Component<IProps, IState> {
      */
     private endWidgetActions(): void {
         if (WidgetType.JITSI.matches(this.props.app.type) && this.props.room) {
-            LegacyCallHandler.instance.hangupCallApp(this.props.room.roomId);
+            this.context.legacyCallHandler.hangupCallApp(this.props.room.roomId);
         }
 
         // Delete the widget from the persisted store for good measure.
@@ -682,25 +678,27 @@ export default class AppTile extends React.Component<IProps, IState> {
 
     private onToggleMaximisedClick = (): void => {
         if (!this.props.room) return; // ignore action - it shouldn't even be visible
-        const targetContainer = WidgetLayoutStore.instance.isInContainer(this.props.room, this.props.app, "center")
+        const targetContainer = this.context.widgetLayoutStore.isInContainer(this.props.room, this.props.app, "center")
             ? "top"
             : "center";
-        WidgetLayoutStore.instance.moveToContainer(this.props.room, this.props.app, targetContainer);
+        this.context.widgetLayoutStore.moveToContainer(this.props.room, this.props.app, targetContainer);
 
         if (targetContainer === "top") this.closeChatCardIfNeeded();
     };
 
     private onMinimiseClicked = (): void => {
         if (!this.props.room) return; // ignore action - it shouldn't even be visible
-        WidgetLayoutStore.instance.moveToContainer(this.props.room, this.props.app, "right");
+        this.context.widgetLayoutStore.moveToContainer(this.props.room, this.props.app, "right");
         this.closeChatCardIfNeeded();
     };
 
     private closeChatCardIfNeeded = (): void => {
         if (!this.props.room) return; // ignore action - it shouldn't even be visible
         // If the right panel has a timeline, but we're about to show the timeline in the main view, pop the right panel
-        if (RightPanelStore.instance.currentCardForRoom(this.props.room.roomId).phase === RightPanelPhases.Timeline) {
-            RightPanelStore.instance.popCard(this.props.room.roomId);
+        if (
+            this.context.rightPanelStore.currentCardForRoom(this.props.room.roomId).phase === RightPanelPhases.Timeline
+        ) {
+            this.context.rightPanelStore.popCard(this.props.room.roomId);
         }
     };
 
@@ -742,7 +740,7 @@ export default class AppTile extends React.Component<IProps, IState> {
             );
         } else if (!this.state.hasPermissionToLoad && this.props.room && this.messaging) {
             // only possible for room widgets, can assert this.props.room here
-            const isEncrypted = this.context.isRoomEncrypted(this.props.room.roomId);
+            const isEncrypted = this.context.client?.isRoomEncrypted(this.props.room.roomId);
             appTileBody = (
                 <div className={appTileBodyClass} style={appTileBodyStyles}>
                     <AppPermission
@@ -818,7 +816,8 @@ export default class AppTile extends React.Component<IProps, IState> {
         const layoutButtons: ReactNode[] = [];
         if (this.props.showLayoutButtons) {
             const isMaximised =
-                this.props.room && WidgetLayoutStore.instance.isInContainer(this.props.room, this.props.app, "center");
+                this.props.room &&
+                this.context.widgetLayoutStore.isInContainer(this.props.room, this.props.app, "center");
 
             layoutButtons.push(
                 <AccessibleButton
@@ -848,55 +847,53 @@ export default class AppTile extends React.Component<IProps, IState> {
         }
 
         return (
-            <React.Fragment>
-                <div className={appTileClasses} id={this.props.app.id}>
-                    {this.props.showMenubar && (
-                        <div className="mx_AppTileMenuBar">
-                            <span
-                                className="mx_AppTileMenuBar_title"
-                                style={{ pointerEvents: this.props.handleMinimisePointerEvents ? "all" : "none" }}
-                            >
-                                {this.props.showTitle && this.getTileTitle()}
-                            </span>
-                            <span className="mx_AppTileMenuBar_widgets">
-                                {layoutButtons}
-                                {this.props.showPopout && !this.state.requiresClient && (
-                                    <AccessibleButton
-                                        className="mx_AppTileMenuBar_widgets_button"
-                                        title={_t("widget|popout")}
-                                        onClick={this.onPopoutWidgetClick}
-                                    >
-                                        <PopOutIcon className="mx_Icon mx_Icon_12" />
-                                    </AccessibleButton>
-                                )}
-                                <I18nContext.Provider value={window.mxModuleApi.i18n}>
-                                    <WidgetContextMenu
-                                        trigger={
-                                            <ContextMenuButton
-                                                className="mx_AppTileMenuBar_widgets_button"
-                                                label={_t("common|options")}
-                                                isExpanded={this.state.menuDisplayed}
-                                                ref={this.contextMenuButton}
-                                                onClick={this.onContextMenuClick}
-                                            >
-                                                <OverflowHorizontalIcon className="mx_Icon mx_Icon_12" />
-                                            </ContextMenuButton>
-                                        }
-                                        app={this.props.app}
-                                        onFinished={this.closeContextMenu}
-                                        showUnpin={!this.props.userWidget}
-                                        userWidget={this.props.userWidget}
-                                        onEditClick={this.props.onEditClick}
-                                        onDeleteClick={this.props.onDeleteClick}
-                                        menuDisplayed={this.state.menuDisplayed}
-                                    />
-                                </I18nContext.Provider>
-                            </span>
-                        </div>
-                    )}
-                    {appTileBody}
-                </div>
-            </React.Fragment>
+            <div className={appTileClasses} id={this.props.app.id}>
+                {this.props.showMenubar && (
+                    <div className="mx_AppTileMenuBar">
+                        <span
+                            className="mx_AppTileMenuBar_title"
+                            style={{ pointerEvents: this.props.handleMinimisePointerEvents ? "all" : "none" }}
+                        >
+                            {this.props.showTitle && this.getTileTitle()}
+                        </span>
+                        <span className="mx_AppTileMenuBar_widgets">
+                            {layoutButtons}
+                            {this.props.showPopout && !this.state.requiresClient && (
+                                <AccessibleButton
+                                    className="mx_AppTileMenuBar_widgets_button"
+                                    title={_t("widget|popout")}
+                                    onClick={this.onPopoutWidgetClick}
+                                >
+                                    <PopOutIcon className="mx_Icon mx_Icon_12" />
+                                </AccessibleButton>
+                            )}
+                            <I18nContext.Provider value={window.mxModuleApi.i18n}>
+                                <WidgetContextMenu
+                                    trigger={
+                                        <ContextMenuButton
+                                            className="mx_AppTileMenuBar_widgets_button"
+                                            label={_t("common|options")}
+                                            isExpanded={this.state.menuDisplayed}
+                                            ref={this.contextMenuButton}
+                                            onClick={this.onContextMenuClick}
+                                        >
+                                            <OverflowHorizontalIcon className="mx_Icon mx_Icon_12" />
+                                        </ContextMenuButton>
+                                    }
+                                    app={this.props.app}
+                                    onFinished={this.closeContextMenu}
+                                    showUnpin={!this.props.userWidget}
+                                    userWidget={this.props.userWidget}
+                                    onEditClick={this.props.onEditClick}
+                                    onDeleteClick={this.props.onDeleteClick}
+                                    menuDisplayed={this.state.menuDisplayed}
+                                />
+                            </I18nContext.Provider>
+                        </span>
+                    </div>
+                )}
+                {appTileBody}
+            </div>
         );
     }
 }
diff --git a/apps/web/src/components/views/elements/CopyableText.tsx b/apps/web/src/components/views/elements/CopyableText.tsx
index 834386e450..51812e7cec 100644
--- a/apps/web/src/components/views/elements/CopyableText.tsx
+++ b/apps/web/src/components/views/elements/CopyableText.tsx
@@ -10,10 +10,10 @@ Please see LICENSE files in the repository root for full details.
 import React, { useState } from "react";
 import classNames from "classnames";
 import { CopyIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { IconButton } from "@vector-im/compound-web";
 
 import { _t } from "../../../languageHandler";
 import { copyPlaintext } from "../../../utils/strings";
-import AccessibleButton, { type ButtonEvent } from "./AccessibleButton";
 
 interface IProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
@@ -29,7 +29,7 @@ export const CopyTextButton: React.FC<Pick<IProps, "getTextToCopy" | "className"
 }) => {
     const [tooltip, setTooltip] = useState<string | undefined>(undefined);
 
-    const onCopyClickInternal = async (e: ButtonEvent): Promise<void> => {
+    const onCopyClickInternal = async (e: React.MouseEvent<HTMLButtonElement>): Promise<void> => {
         e.preventDefault();
         const text = getTextToCopy();
         const successful = !!text && (await copyPlaintext(text));
@@ -43,17 +43,18 @@ export const CopyTextButton: React.FC<Pick<IProps, "getTextToCopy" | "className"
     };
 
     return (
-        <AccessibleButton
-            element="button"
-            title={tooltip ?? _t("action|copy")}
+        <IconButton
+            tooltip={tooltip ?? _t("action|copy")}
             onClick={onCopyClickInternal}
             className={className}
-            onTooltipOpenChange={(open) => {
+            size="28px"
+            style={{ padding: "4px" }} // Work around miscalculated padding on 28px button: https://github.com/element-hq/compound/issues/409
+            onTooltipOpenChange={(open: boolean) => {
                 if (!open) onHideTooltip();
             }}
         >
             {children}
-        </AccessibleButton>
+        </IconButton>
     );
 };
 
diff --git a/apps/web/src/components/views/elements/DialogButtons.tsx b/apps/web/src/components/views/elements/DialogButtons.tsx
index 9712639638..b81c06e643 100644
--- a/apps/web/src/components/views/elements/DialogButtons.tsx
+++ b/apps/web/src/components/views/elements/DialogButtons.tsx
@@ -29,8 +29,10 @@ interface IProps {
     // should there be a cancel button? default: true
     hasCancel?: boolean;
 
-    // The class of the cancel button, only used if a cancel button is
-    // enabled
+    /**
+     * The class of the cancel button, only used if a cancel button is enabled
+     * @default "cancel"
+     */
     cancelButtonClass?: string;
 
     // onClick handler for the cancel button.
@@ -58,6 +60,7 @@ export default class DialogButtons extends React.Component<IProps> {
     public static defaultProps: Partial<IProps> = {
         hasCancel: true,
         disabled: false,
+        cancelButtonClass: "cancel",
     };
 
     private onCancelClick = (event: React.MouseEvent): void => {
diff --git a/apps/web/src/components/views/elements/Dropdown.tsx b/apps/web/src/components/views/elements/Dropdown.tsx
index 6a4af20e94..00c9970533 100644
--- a/apps/web/src/components/views/elements/Dropdown.tsx
+++ b/apps/web/src/components/views/elements/Dropdown.tsx
@@ -37,10 +37,6 @@ interface IMenuOptionProps {
 }
 
 class MenuOption extends React.Component<IMenuOptionProps> {
-    public static defaultProps = {
-        disabled: false,
-    };
-
     private onMouseEnter = (): void => {
         this.props.onMouseEnter(this.props.dropdownKey);
     };
@@ -58,6 +54,9 @@ class MenuOption extends React.Component<IMenuOptionProps> {
         });
 
         return (
+            // We break the rule here as this is a mouse-only interaction,
+            // the keyboard interaction is handled by the Dropdown parent component
+            // oxlint-disable-next-line jsx-a11y/click-events-have-key-events
             <li
                 id={this.props.id}
                 className={optClasses}
@@ -239,9 +238,7 @@ export default class Dropdown extends React.Component<DropdownProps, IState> {
                         highlightedOption: nextKey,
                     });
 
-                    (
-                        this.dropdownRootElement?.querySelector(`#${this.props.id}__${nextKey}`) as HTMLLIElement
-                    )?.focus();
+                    this.dropdownRootElement?.querySelector<HTMLLIElement>(`#${this.props.id}__${nextKey}`)?.focus();
                 } else {
                     this.setState({ expanded: true });
                 }
@@ -252,9 +249,7 @@ export default class Dropdown extends React.Component<DropdownProps, IState> {
                     this.setState({
                         highlightedOption: prevKey,
                     });
-                    (
-                        this.dropdownRootElement?.querySelector(`#${this.props.id}__${prevKey}`) as HTMLLIElement
-                    )?.focus();
+                    this.dropdownRootElement?.querySelector<HTMLLIElement>(`#${this.props.id}__${prevKey}`)?.focus();
                 } else {
                     this.setState({ expanded: true });
                 }
@@ -320,7 +315,7 @@ export default class Dropdown extends React.Component<DropdownProps, IState> {
                 <MenuOption
                     id={`${this.props.id}__${child.key}`}
                     key={child.key}
-                    dropdownKey={child.key as string}
+                    dropdownKey={child.key!}
                     highlighted={highlighted}
                     onMouseEnter={this.setHighlightedOption}
                     onClick={this.onMenuOptionClick}
diff --git a/apps/web/src/components/views/elements/EditableItemList.tsx b/apps/web/src/components/views/elements/EditableItemList.tsx
index 28d4b9dc1c..2e0981313c 100644
--- a/apps/web/src/components/views/elements/EditableItemList.tsx
+++ b/apps/web/src/components/views/elements/EditableItemList.tsx
@@ -79,7 +79,6 @@ export class EditableItem extends React.Component<IItemProps, IItemState> {
                     onClick={this.onRemove}
                     className="mx_EditableItem_delete"
                     title={_t("action|remove")}
-                    role="button"
                 >
                     <CloseIcon />
                 </AccessibleButton>
diff --git a/apps/web/src/components/views/elements/EditableText.tsx b/apps/web/src/components/views/elements/EditableText.tsx
index 1e1d00d14c..1538dca015 100644
--- a/apps/web/src/components/views/elements/EditableText.tsx
+++ b/apps/web/src/components/views/elements/EditableText.tsx
@@ -201,6 +201,8 @@ export default class EditableText extends React.Component<IProps, IState> {
         if (!editable || (this.state.phase === Phases.Display && (label || labelClassName) && !this.value)) {
             // show the label
             editableEl = (
+                // We break the rule here as this is a mouse-only shortcut
+                // oxlint-disable-next-line jsx-a11y/click-events-have-key-events
                 <div className={className + " " + labelClassName} onClick={this.onClickDiv}>
                     {label || initialValue}
                 </div>
diff --git a/apps/web/src/components/views/elements/EventListSummary.tsx b/apps/web/src/components/views/elements/EventListSummary.tsx
index 3ed8764dd9..ed0acb2b38 100644
--- a/apps/web/src/components/views/elements/EventListSummary.tsx
+++ b/apps/web/src/components/views/elements/EventListSummary.tsx
@@ -33,6 +33,18 @@ const onPinnedMessagesClick = (): void => {
 
 const TARGET_AS_DISPLAY_NAME_EVENTS = [EventType.RoomMember];
 
+/**
+ * Whether a profile field on a membership event actually changed.
+ *
+ * An absent field, an explicit `null` and an empty string all mean "unset", so none of them is a
+ * change from any of the others. This mirrors `getModification` in `TextForEvent`, which labels the
+ * same event when it is rendered on its own — without it a collapsed summary can contradict the
+ * events it summarises.
+ */
+function profileFieldChanged(prev?: string | null, value?: string | null): boolean {
+    return (prev || undefined) !== (value || undefined);
+}
+
 interface IProps extends Omit<ComponentProps<typeof GenericEventListSummary>, "summaryText" | "summaryMembers"> {
     // The maximum number of names to show in either each summary e.g. 2 would result "A, B and 234 others left"
     summaryLength?: number;
@@ -306,8 +318,8 @@ export default class EventListSummary extends React.Component<Props, State> {
 
             let transition = t;
 
-            if (i < transitions.length - 1 && modMap[t] && modMap[t]!.after === t2) {
-                transition = modMap[t]!.newTransition;
+            if (i < transitions.length - 1 && modMap[t] && modMap[t].after === t2) {
+                transition = modMap[t].newTransition;
                 i++;
             }
 
@@ -532,9 +544,11 @@ export default class EventListSummary extends React.Component<Props, State> {
                         return TransitionType.Banned;
                     case KnownMembership.Join:
                         if (e.mxEvent.getPrevContent().membership === KnownMembership.Join) {
-                            if (e.mxEvent.getContent().displayname !== e.mxEvent.getPrevContent().displayname) {
+                            const content = e.mxEvent.getContent();
+                            const prevContent = e.mxEvent.getPrevContent();
+                            if (profileFieldChanged(prevContent.displayname, content.displayname)) {
                                 return TransitionType.ChangedName;
-                            } else if (e.mxEvent.getContent().avatar_url !== e.mxEvent.getPrevContent().avatar_url) {
+                            } else if (profileFieldChanged(prevContent.avatar_url, content.avatar_url)) {
                                 return TransitionType.ChangedAvatar;
                             }
                             return TransitionType.NoChange;
diff --git a/apps/web/src/components/views/elements/EventTilePreview.tsx b/apps/web/src/components/views/elements/EventTilePreview.tsx
index 02f28fd9dc..f21cdfc53a 100644
--- a/apps/web/src/components/views/elements/EventTilePreview.tsx
+++ b/apps/web/src/components/views/elements/EventTilePreview.tsx
@@ -63,7 +63,6 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
 
     private fakeEvent({ message }: IState): MatrixEvent {
         // Fake it till we make it
-        /* eslint-disable quote-props */
         const rawEvent = {
             type: "m.room.message",
             sender: this.props.userId,
@@ -86,7 +85,6 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
             room_id: "!999999999999999999:example.org",
         };
         const event = new MatrixEvent(rawEvent);
-        /* eslint-enable quote-props */
 
         // Fake it more
         event.sender = {
@@ -119,7 +117,14 @@ export default class EventTilePreview extends React.Component<IProps, IState> {
 
         return (
             <div className={className} role="presentation">
-                <EventTile mxEvent={event} layout={this.props.layout} as="div" hideTimestamp inhibitInteraction />
+                <EventTile
+                    mxEvent={event}
+                    layout={this.props.layout}
+                    as="div"
+                    hideTimestamp
+                    inhibitInteraction
+                    useEventSenderSnapshot
+                />
             </div>
         );
     }
diff --git a/apps/web/src/components/views/elements/GenericEventListSummary.tsx b/apps/web/src/components/views/elements/GenericEventListSummary.tsx
index 5b938d54a0..c369e44dbc 100644
--- a/apps/web/src/components/views/elements/GenericEventListSummary.tsx
+++ b/apps/web/src/components/views/elements/GenericEventListSummary.tsx
@@ -31,7 +31,7 @@ interface IProps {
     // An array of EventTiles to render when expanded
     "children": ReactNode[] | null;
     // Called when the event list expansion is toggled
-    onToggle?(this: void): void;
+    "onToggle"?(this: void): void;
     // The layout currently used
     "layout"?: Layout;
     "data-testid"?: string;
@@ -43,7 +43,7 @@ const GenericEventListSummary: React.FC<IProps> = ({
     threshold = 3,
     onToggle,
     startExpanded = false,
-    summaryMembers = [],
+    summaryMembers,
     summaryText,
     layout = Layout.Group,
     "data-testid": testId,
@@ -83,7 +83,7 @@ const GenericEventListSummary: React.FC<IProps> = ({
         );
     } else {
         const uniqueMembers = uniqBy(
-            summaryMembers.filter((member) => {
+            summaryMembers?.filter((member) => {
                 if (!member?.getMxcAvatarUrl) {
                     logger.error(
                         "EventListSummary given null summaryMember, termites may be afoot eating event senders",
@@ -99,6 +99,9 @@ const GenericEventListSummary: React.FC<IProps> = ({
         body = (
             <div className="mx_EventTile_line">
                 <div className="mx_EventTile_info">
+                    {/* We break the rule here as this is a mouse-only interaction */}
+                    {/* mx_GenericEventListSummary_toggle is the keyboard friendly outer one */}
+                    {/* oxlint-disable-next-line jsx-a11y/click-events-have-key-events */}
                     <span className="mx_GenericEventListSummary_avatars" onClick={toggleExpanded}>
                         {avatars}
                     </span>
diff --git a/apps/web/src/components/views/elements/ImageView.tsx b/apps/web/src/components/views/elements/ImageView.tsx
index ee24a87eb1..71578a0946 100644
--- a/apps/web/src/components/views/elements/ImageView.tsx
+++ b/apps/web/src/components/views/elements/ImageView.tsx
@@ -459,7 +459,7 @@ export default class ImageView extends React.Component<IProps, IState> {
 
         let info: JSX.Element | undefined;
         if (showEventMeta) {
-            const mxEvent = this.props.mxEvent!;
+            const mxEvent = this.props.mxEvent;
             const showTwelveHour = SettingsStore.getValue("showTwelveHourTimestamps");
             let permalink = "#";
             if (this.props.permalinkCreator) {
@@ -647,15 +647,7 @@ export const DownloadButton: React.FC<DownloadButtonProps> = ({ url, fileName, m
 function MessageTimestampWrapper(props: MessageTimestampViewModelProps): JSX.Element {
     const vm = useCreateAutoDisposedViewModel(() => new MessageTimestampViewModel(props));
     useEffect(() => {
-        vm.setTimestamp(props.ts);
-        vm.setDisplayOptions({
-            showTwelveHour: props.showTwelveHour,
-            showFullDate: props.showFullDate,
-            showSeconds: props.showSeconds,
-        });
-        vm.setTooltipInhibited(props.inhibitTooltip);
-        vm.setHref(props.href);
-        vm.setHandlers({ onClick: props.onClick });
+        vm.setProps(props);
     }, [vm, props]);
     return <MessageTimestampView vm={vm} className="mx_MessageTimestamp" />;
 }
diff --git a/apps/web/src/components/views/elements/InlineSpinner.tsx b/apps/web/src/components/views/elements/InlineSpinner.tsx
index cc76e7ff0c..54eca63133 100644
--- a/apps/web/src/components/views/elements/InlineSpinner.tsx
+++ b/apps/web/src/components/views/elements/InlineSpinner.tsx
@@ -16,8 +16,7 @@ interface IProps {
 
 export default class InlineSpinner extends React.PureComponent<IProps> {
     public static defaultProps = {
-        w: 16,
-        h: 16,
+        size: 16,
     };
 
     public render(): React.ReactNode {
diff --git a/apps/web/src/components/views/elements/LanguageDropdown.tsx b/apps/web/src/components/views/elements/LanguageDropdown.tsx
index 7bf50f7806..5948a49148 100644
--- a/apps/web/src/components/views/elements/LanguageDropdown.tsx
+++ b/apps/web/src/components/views/elements/LanguageDropdown.tsx
@@ -10,13 +10,14 @@ Please see LICENSE files in the repository root for full details.
 import React, { type ReactElement } from "react";
 import classNames from "classnames";
 
-import * as languageHandler from "../../../languageHandler";
 import { _t } from "../../../languageHandler";
+import { getAllLanguagesWithLabels } from "../../../i18n/utils";
+import { getUserLanguage } from "../../../i18n/settings";
 import Spinner from "./Spinner";
 import Dropdown from "./Dropdown";
 import { type NonEmptyArray } from "../../../@types/common";
 
-type Languages = Awaited<ReturnType<typeof languageHandler.getAllLanguagesWithLabels>>;
+type Languages = Awaited<ReturnType<typeof getAllLanguagesWithLabels>>;
 
 function languageMatchesSearchQuery(query: string, language: Languages[0]): boolean {
     if (language.labelInTargetLanguage.toUpperCase().includes(query.toUpperCase())) return true;
@@ -38,6 +39,8 @@ interface IState {
 }
 
 export default class LanguageDropdown extends React.Component<IProps, IState> {
+    private unmounted = false;
+
     public constructor(props: IProps) {
         super(props);
 
@@ -48,9 +51,11 @@ export default class LanguageDropdown extends React.Component<IProps, IState> {
     }
 
     public componentDidMount(): void {
-        languageHandler
-            .getAllLanguagesWithLabels()
+        this.unmounted = false;
+
+        getAllLanguagesWithLabels()
             .then((langs) => {
+                if (this.unmounted) return;
                 langs.sort(function (a, b) {
                     if (a.labelInTargetLanguage < b.labelInTargetLanguage) return -1;
                     if (a.labelInTargetLanguage > b.labelInTargetLanguage) return 1;
@@ -59,6 +64,7 @@ export default class LanguageDropdown extends React.Component<IProps, IState> {
                 this.setState({ langs });
             })
             .catch(() => {
+                if (this.unmounted) return;
                 this.setState({
                     langs: [
                         {
@@ -73,11 +79,15 @@ export default class LanguageDropdown extends React.Component<IProps, IState> {
         if (!this.props.value) {
             // If no value is given, we start with the first country selected,
             // but our parent component doesn't know this, therefore we do this.
-            const language = languageHandler.getUserLanguage();
+            const language = getUserLanguage();
             this.props.onOptionChange(language);
         }
     }
 
+    public componentWillUnmount(): void {
+        this.unmounted = true;
+    }
+
     private onSearchChange = (search: string): void => {
         this.setState({
             searchQuery: search,
@@ -89,7 +99,7 @@ export default class LanguageDropdown extends React.Component<IProps, IState> {
             return <Spinner />;
         }
 
-        let displayedLanguages: Awaited<ReturnType<typeof languageHandler.getAllLanguagesWithLabels>>;
+        let displayedLanguages: Awaited<ReturnType<typeof getAllLanguagesWithLabels>>;
         if (this.state.searchQuery) {
             displayedLanguages = this.state.langs.filter((lang) => {
                 return languageMatchesSearchQuery(this.state.searchQuery, lang);
diff --git a/apps/web/src/components/views/elements/LazyRenderList.tsx b/apps/web/src/components/views/elements/LazyRenderList.ts
similarity index 100%
rename from apps/web/src/components/views/elements/LazyRenderList.tsx
rename to apps/web/src/components/views/elements/LazyRenderList.ts
diff --git a/apps/web/src/components/views/elements/Measured.ts b/apps/web/src/components/views/elements/Measured.ts
new file mode 100644
index 0000000000..fb1465cfb9
--- /dev/null
+++ b/apps/web/src/components/views/elements/Measured.ts
@@ -0,0 +1,71 @@
+/*
+Copyright (C) 2026 Element Creations Ltd
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { useEffect, useRef, type RefObject } from "react";
+
+import UIStore from "../../../stores/UIStore";
+import { useEventEmitterState } from "../../../hooks/useEventEmitter";
+
+interface IProps {
+    /**
+     * Element to watch for resize changes on.
+     */
+    sensor: RefObject<Element | null>;
+    /**
+     * Minimum width of element to be considered full-size.
+     * Defaults to `500px`
+     */
+    breakpoint?: number;
+    /**
+     * Callback for when the narrowness property changes.
+     * @param narrow
+     * @returns
+     */
+    onMeasurement: (narrow: boolean) => void;
+}
+
+let instanceCount = 0;
+
+/**
+ * This component can watch a single element for width changes, and will fire
+ * a callback if the width changes to be lower or higher than the `breakpoint`.
+ */
+export default function Measured({ sensor, breakpoint = 500, onMeasurement }: IProps): null {
+    const instanceIdRef = useRef(instanceCount++);
+    const instanceId = instanceIdRef.current;
+
+    useEffect(() => {
+        if (sensor.current) {
+            UIStore.instance.trackElementDimensions(`Measured${instanceId}`, sensor.current);
+        }
+
+        return () => {
+            UIStore.instance.stopTrackingElementDimensions(`Measured${instanceId}`);
+        };
+    }, [sensor, instanceId]);
+
+    const narrow = useEventEmitterState<boolean>(
+        UIStore.instance,
+        `Measured${instanceId}`,
+        (_type: unknown, entry: ResizeObserverEntry) => {
+            if (!entry) {
+                return false;
+            }
+            // N.B there is only one `_type` of resize event.
+            return entry.contentRect.width <= breakpoint;
+        },
+    );
+
+    // Only fire when the state changes.
+    useEffect(() => {
+        onMeasurement(narrow);
+    }, [onMeasurement, narrow]);
+
+    return null;
+}
diff --git a/apps/web/src/components/views/elements/Measured.tsx b/apps/web/src/components/views/elements/Measured.tsx
deleted file mode 100644
index b0f084c0ed..0000000000
--- a/apps/web/src/components/views/elements/Measured.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { type RefObject } from "react";
-
-import UIStore, { UI_EVENTS } from "../../../stores/UIStore";
-
-interface IProps {
-    sensor: RefObject<Element | null>;
-    breakpoint: number;
-    onMeasurement(narrow: boolean): void;
-}
-
-export default class Measured extends React.PureComponent<IProps> {
-    private static instanceCount = 0;
-    private readonly instanceId: number;
-
-    public static defaultProps = {
-        breakpoint: 500,
-    };
-
-    public constructor(props: IProps) {
-        super(props);
-
-        this.instanceId = Measured.instanceCount++;
-    }
-
-    public componentDidMount(): void {
-        UIStore.instance.on(`Measured${this.instanceId}`, this.onResize);
-    }
-
-    public componentDidUpdate(prevProps: Readonly<IProps>): void {
-        const previous = prevProps.sensor.current;
-        const current = this.props.sensor.current;
-        if (previous === current) return;
-        if (previous) {
-            UIStore.instance.stopTrackingElementDimensions(`Measured${this.instanceId}`);
-        }
-        if (current) {
-            UIStore.instance.trackElementDimensions(`Measured${this.instanceId}`, current);
-        }
-    }
-
-    public componentWillUnmount(): void {
-        UIStore.instance.off(`Measured${this.instanceId}`, this.onResize);
-        UIStore.instance.stopTrackingElementDimensions(`Measured${this.instanceId}`);
-    }
-
-    private onResize = (type: UI_EVENTS, entry: ResizeObserverEntry): void => {
-        if (type !== UI_EVENTS.Resize) return;
-        this.props.onMeasurement(entry.contentRect.width <= this.props.breakpoint);
-    };
-
-    public render(): React.ReactNode {
-        return null;
-    }
-}
diff --git a/apps/web/src/components/views/elements/PersistedElement.tsx b/apps/web/src/components/views/elements/PersistedElement.tsx
index bd496ef9b8..ee0f363215 100644
--- a/apps/web/src/components/views/elements/PersistedElement.tsx
+++ b/apps/web/src/components/views/elements/PersistedElement.tsx
@@ -12,8 +12,8 @@ import { TooltipProvider } from "@vector-im/compound-web";
 
 import dis from "../../../dispatcher/dispatcher";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { type ActionPayload } from "../../../dispatcher/payloads";
+import { SDKContext } from "../../../contexts/SDKContext.ts";
 
 export const getPersistKey = (appId: string): string => "widget_" + appId;
 
@@ -70,6 +70,9 @@ interface IProps {
  * bounding rect as the parent of PE.
  */
 export default class PersistedElement extends React.Component<IProps> {
+    public static contextType = SDKContext;
+    declare public context: React.ContextType<typeof SDKContext>;
+
     private resizeObserver: ResizeObserver;
     private dispatcherRef?: string;
     private childContainer?: HTMLDivElement;
@@ -165,13 +168,15 @@ export default class PersistedElement extends React.Component<IProps> {
     private renderApp(): void {
         const content = (
             <StrictMode>
-                <MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>
-                    <TooltipProvider>
-                        <div ref={this.collectChild} style={this.props.style}>
-                            {this.props.children}
-                        </div>
-                    </TooltipProvider>
-                </MatrixClientContext.Provider>
+                <SDKContext.Provider value={this.context}>
+                    <MatrixClientContext.Provider value={this.context.client!}>
+                        <TooltipProvider>
+                            <div ref={this.collectChild} style={this.props.style}>
+                                {this.props.children}
+                            </div>
+                        </TooltipProvider>
+                    </MatrixClientContext.Provider>
+                </SDKContext.Provider>
             </StrictMode>
         );
 
diff --git a/apps/web/src/components/views/elements/Pill.tsx b/apps/web/src/components/views/elements/Pill.tsx
index 32e78fc32e..0365dd3ddd 100644
--- a/apps/web/src/components/views/elements/Pill.tsx
+++ b/apps/web/src/components/views/elements/Pill.tsx
@@ -17,15 +17,7 @@ import { usePermalink } from "../../../hooks/usePermalink";
 import RoomAvatar from "../avatars/RoomAvatar";
 import MemberAvatar from "../avatars/MemberAvatar";
 import { _t } from "../../../languageHandler";
-
-export enum PillType {
-    UserMention = "TYPE_USER_MENTION",
-    RoomMention = "TYPE_ROOM_MENTION",
-    AtRoomMention = "TYPE_AT_ROOM_MENTION", // '@room' mention
-    EventInSameRoom = "TYPE_EVENT_IN_SAME_ROOM",
-    EventInOtherRoom = "TYPE_EVENT_IN_OTHER_ROOM",
-    Keyword = "TYPE_KEYWORD", // Used to highlight keywords that triggered a notification rule
-}
+import { PillType } from "./PillType";
 
 const linkIcon = <LinkIcon className="mx_Pill_LinkIcon mx_BaseAvatar" />;
 
diff --git a/apps/web/src/components/views/elements/PillType.ts b/apps/web/src/components/views/elements/PillType.ts
new file mode 100644
index 0000000000..8450364ef8
--- /dev/null
+++ b/apps/web/src/components/views/elements/PillType.ts
@@ -0,0 +1,16 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2017-2019 , 2021 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+export enum PillType {
+    UserMention = "TYPE_USER_MENTION",
+    RoomMention = "TYPE_ROOM_MENTION",
+    AtRoomMention = "TYPE_AT_ROOM_MENTION", // '@room' mention
+    EventInSameRoom = "TYPE_EVENT_IN_SAME_ROOM",
+    EventInOtherRoom = "TYPE_EVENT_IN_OTHER_ROOM",
+    Keyword = "TYPE_KEYWORD", // Used to highlight keywords that triggered a notification rule
+}
diff --git a/apps/web/src/components/views/elements/PollCreateDialog.tsx b/apps/web/src/components/views/elements/PollCreateDialog.tsx
index f72c28f26e..a97230c57f 100644
--- a/apps/web/src/components/views/elements/PollCreateDialog.tsx
+++ b/apps/web/src/components/views/elements/PollCreateDialog.tsx
@@ -215,6 +215,7 @@ export default class PollCreateDialog extends ScrollableBaseModal<IProps, IState
                 />
                 <h2>{_t("poll|options_heading")}</h2>
                 {this.state.options.map((op, i) => (
+                    // oxlint-disable-next-line react/no-array-index-key
                     <div key={`option_${i}`} className="mx_PollCreateDialog_option">
                         <Field
                             id={`pollcreate_option_${i}`}
diff --git a/apps/web/src/components/views/elements/ReplyChain.tsx b/apps/web/src/components/views/elements/ReplyChain.tsx
index f082947162..ead388832c 100644
--- a/apps/web/src/components/views/elements/ReplyChain.tsx
+++ b/apps/web/src/components/views/elements/ReplyChain.tsx
@@ -15,12 +15,12 @@ import { _t } from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
 import { makeUserPermalink, type RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import SettingsStore from "../../../settings/SettingsStore";
-import { type Layout } from "../../../settings/enums/Layout";
 import { getUserNameColorClass } from "../../../utils/FormattingUtils";
 import { Action } from "../../../dispatcher/actions";
 import Spinner from "./Spinner";
 import ReplyTile from "../rooms/ReplyTile";
-import { Pill, PillType } from "./Pill";
+import { Pill } from "./Pill";
+import { PillType } from "./PillType";
 import AccessibleButton from "./AccessibleButton";
 import { getParentEventId, shouldDisplayReply } from "../../../utils/Reply";
 import RoomContext from "../../../contexts/RoomContext";
@@ -37,8 +37,6 @@ interface IProps {
     // the latest event in this chain of replies
     parentEv: MatrixEvent;
     permalinkCreator?: RoomPermalinkCreator;
-    // Specifies which layout to use.
-    layout?: Layout;
     // Whether to always show a timestamp
     alwaysShowTimestamps?: boolean;
     forExport?: boolean;
diff --git a/apps/web/src/components/views/elements/ResizeHandle.tsx b/apps/web/src/components/views/elements/ResizeHandle.tsx
index 5e2ad0e5cf..a6aaa35710 100644
--- a/apps/web/src/components/views/elements/ResizeHandle.tsx
+++ b/apps/web/src/components/views/elements/ResizeHandle.tsx
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react"; // eslint-disable-line no-unused-vars
+import React from "react";
 
 //see src/resizer for the actual resizing code, this is just the DOM for the resize handle
 interface IResizeHandleProps {
diff --git a/apps/web/src/components/views/elements/RoomTopic.tsx b/apps/web/src/components/views/elements/RoomTopic.tsx
index e539c9c7d3..543037dad5 100644
--- a/apps/web/src/components/views/elements/RoomTopic.tsx
+++ b/apps/web/src/components/views/elements/RoomTopic.tsx
@@ -9,7 +9,6 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX, useCallback, useContext, useState } from "react";
 import { type Room, EventType } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
-import { Tooltip } from "@vector-im/compound-web";
 import { LinkedText } from "@element-hq/web-shared-components";
 
 import { useTopic } from "../../../hooks/room/useTopic";
@@ -20,15 +19,17 @@ import Modal from "../../../Modal";
 import InfoDialog from "../dialogs/InfoDialog";
 import { useDispatcher } from "../../../hooks/useDispatcher";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import AccessibleButton from "./AccessibleButton";
+import AccessibleButton, { type ButtonEvent } from "./AccessibleButton";
 import { topicToHtml } from "../../../HtmlUtils";
 import { tryTransformPermalinkToLocalHref } from "../../../utils/permalinks/Permalinks";
+import { showSpaceSettings } from "../../../utils/space";
 
-interface IProps extends React.HTMLProps<HTMLDivElement> {
+interface IProps {
     room: Room;
+    className?: string;
 }
 
-export function onRoomTopicLinkClick(e: React.MouseEvent): void {
+export function onRoomTopicLinkClick(e: ButtonEvent): void {
     const anchor = e.target as HTMLLinkElement;
     const localHref = tryTransformPermalinkToLocalHref(anchor.href);
 
@@ -39,28 +40,23 @@ export function onRoomTopicLinkClick(e: React.MouseEvent): void {
     }
 }
 
-export default function RoomTopic({ room, className, ...props }: IProps): JSX.Element {
+export default function RoomTopic({ room, className }: IProps): JSX.Element {
     const client = useContext(MatrixClientContext);
     const [disableTooltip, setDisableTooltip] = useState(false);
 
     const topic = useTopic(room);
     const body = topicToHtml(topic?.text, topic?.html);
 
-    const onClick = useCallback(
-        (e: React.MouseEvent<HTMLDivElement>) => {
-            props.onClick?.(e);
+    const onClick = useCallback((e: ButtonEvent) => {
+        const target = e.target as HTMLElement;
 
-            const target = e.target as HTMLElement;
+        if (target.tagName.toUpperCase() !== "A") {
+            dis.fire(Action.ShowRoomTopic);
+            return;
+        }
 
-            if (target.tagName.toUpperCase() !== "A") {
-                dis.fire(Action.ShowRoomTopic);
-                return;
-            }
-
-            onRoomTopicLinkClick(e);
-        },
-        [props],
-    );
+        onRoomTopicLinkClick(e);
+    }, []);
 
     const onHover = (ev: React.MouseEvent | React.FocusEvent): void => {
         setDisableTooltip((ev.target as HTMLElement).tagName.toUpperCase() === "A");
@@ -81,7 +77,13 @@ export default function RoomTopic({ room, className, ...props }: IProps): JSX.El
                                 kind="primary_outline"
                                 onClick={() => {
                                     modal.close();
-                                    dis.dispatch({ action: "open_room_settings" });
+                                    // SpaceRoomView renders this component for spaces too, and a space
+                                    // has its own settings dialog.
+                                    if (room.isSpaceRoom()) {
+                                        showSpaceSettings(room);
+                                    } else {
+                                        dis.dispatch({ action: "open_room_settings" });
+                                    }
                                 }}
                             >
                                 {_t("room|edit_topic")}
@@ -100,19 +102,15 @@ export default function RoomTopic({ room, className, ...props }: IProps): JSX.El
     if (!body) return <div className={classNames(className, "mx_RoomTopic")} />;
 
     return (
-        <Tooltip description={_t("room|read_topic")} disabled={disableTooltip}>
-            <div
-                {...props}
-                tabIndex={0}
-                role="button"
-                onClick={onClick}
-                className={classNames(className, "mx_RoomTopic")}
-                onMouseOver={onHover}
-                onFocus={onHover}
-                aria-label={_t("room|read_topic")}
-            >
-                <LinkedText>{body}</LinkedText>
-            </div>
-        </Tooltip>
+        <AccessibleButton
+            onClick={onClick}
+            className={classNames(className, "mx_RoomTopic")}
+            onMouseOver={onHover}
+            onFocus={onHover}
+            title={_t("room|read_topic")}
+            disableTooltip={disableTooltip}
+        >
+            <LinkedText>{body}</LinkedText>
+        </AccessibleButton>
     );
 }
diff --git a/apps/web/src/components/views/elements/SSOButtons.tsx b/apps/web/src/components/views/elements/SSOButtons.tsx
index 5652fe0f5e..774b0a3837 100644
--- a/apps/web/src/components/views/elements/SSOButtons.tsx
+++ b/apps/web/src/components/views/elements/SSOButtons.tsx
@@ -15,7 +15,7 @@ import {
     type SSOFlow,
     type SSOAction,
     type IIdentityProvider,
-    DELEGATED_OIDC_COMPATIBILITY,
+    OAUTH_AWARE_PREFERRED_FLOW_FIELD,
 } from "matrix-js-sdk/src/matrix";
 import { type Signup } from "@matrix-org/analytics-events/types/typescript/Signup";
 import { Button, Tooltip } from "@vector-im/compound-web";
@@ -25,11 +25,11 @@ import PlatformPeg from "../../../PlatformPeg";
 import { _t } from "../../../languageHandler";
 import { mediaFromMxc } from "../../../customisations/Media";
 import { PosthogAnalytics } from "../../../PosthogAnalytics";
-import { Icon as FacebookIcon } from "../../../../res/img/element-icons/brands/facebook.svg";
-import { Icon as GithubIcon } from "../../../../res/img/element-icons/brands/github.svg";
-import { Icon as GitlabIcon } from "../../../../res/img/element-icons/brands/gitlab.svg";
-import { Icon as GoogleIcon } from "../../../../res/img/element-icons/brands/google.svg";
-import { Icon as TwitterIcon } from "../../../../res/img/element-icons/brands/twitter.svg";
+import FacebookIcon from "../../../../res/img/element-icons/brands/facebook.svg?react";
+import GithubIcon from "../../../../res/img/element-icons/brands/github.svg?react";
+import GitlabIcon from "../../../../res/img/element-icons/brands/gitlab.svg?react";
+import GoogleIcon from "../../../../res/img/element-icons/brands/google.svg?react";
+import TwitterIcon from "../../../../res/img/element-icons/brands/twitter.svg?react";
 
 interface ISSOButtonProps extends IProps {
     idp?: IIdentityProvider;
@@ -90,7 +90,7 @@ const SSOButton: React.FC<ISSOButtonProps> = ({
     let label: string;
     if (idp) {
         label = _t("auth|continue_with_idp", { provider: idp.name });
-    } else if (DELEGATED_OIDC_COMPATIBILITY.findIn<boolean>(flow)) {
+    } else if (OAUTH_AWARE_PREFERRED_FLOW_FIELD.findIn<boolean>(flow)) {
         label = _t("action|continue");
     } else {
         label = _t("auth|sign_in_with_sso");
diff --git a/apps/web/src/components/views/elements/SearchWarning.tsx b/apps/web/src/components/views/elements/SearchWarning.tsx
index c8c0ec0bff..091a32ec23 100644
--- a/apps/web/src/components/views/elements/SearchWarning.tsx
+++ b/apps/web/src/components/views/elements/SearchWarning.tsx
@@ -6,10 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX, type ReactNode } from "react";
+import React, { type JSX, type ReactNode, useCallback, useEffect, useState } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import EventIndexPeg from "../../../indexing/EventIndexPeg";
+import type EventIndex from "../../../indexing/EventIndex";
+import { SearchScope } from "../../../Searching";
 import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
 import dis from "../../../dispatcher/dispatcher";
@@ -26,11 +28,131 @@ interface IProps {
     isRoomEncrypted?: boolean;
     kind: WarningKind;
     showLogo?: boolean;
+    /** The scope of the search being warned about; only meaningful for {@link WarningKind.Search}. */
+    scope?: SearchScope;
+    /** The room being searched. Mirrors `SearchInfo.roomId`: `undefined` when searching all rooms. */
+    roomId?: string;
 }
 
-export default function SearchWarning({ isRoomEncrypted, kind, showLogo = true }: IProps): JSX.Element {
+/**
+ * Track whether the index is still missing history that is relevant to the given search.
+ *
+ * A room-scoped search is incomplete if the crawler still holds a checkpoint for the room
+ * ({@link EventIndex.crawlingRooms}, which covers both the checkpoint being crawled right now and
+ * those still queued behind it), or if the index holds no events for it at all
+ * ({@link EventIndex.isRoomIndexed}) — which is how a room looks before its checkpoint has been
+ * seeded, and is the case the checkpoint set alone cannot see.
+ *
+ * The second question is only asked while the crawler still has work outstanding, for two reasons.
+ * It is what the warning claims ("your search index is still being built"), and the index has no
+ * event for its contents changing — `changedCheckpoint` fires only on checkpoint transitions, and
+ * an idle crawler is silent — so a warning raised once the crawler has drained would never be
+ * re-evaluated and would stick.
+ *
+ * Neither signal proves completeness: `isRoomIndexed` reports only that the index holds *some*
+ * events for a room, not all of them, and a room has no checkpoint if it never had a
+ * back-pagination token to crawl from or if its checkpoint was dropped because the server rejected
+ * the request. So this under-warns rather than over-warns.
+ *
+ * An all-rooms search cannot ask the per-room question, so it uses the checkpoint set alone.
+ *
+ * The `changedCheckpoint` payload carries only the globally-current room and so cannot answer a
+ * per-room question: we re-read the index on each event rather than trust it.
+ *
+ * @param index The event index to observe, or `null` if there is no index.
+ * @param scope The scope of the search, if this warning is being rendered for one.
+ * @param roomId The room being searched, or `undefined` when searching all rooms.
+ * @returns `true` while the index is known to be missing history for the search, `false` otherwise.
+ */
+function useIsIndexIncomplete(index: EventIndex | null, scope?: SearchScope, roomId?: string): boolean {
+    const readCheckpoints = useCallback((): { relevant: boolean; anyOutstanding: boolean } => {
+        if (!index) return { relevant: false, anyOutstanding: false };
+        const { crawlingRooms } = index.crawlingRooms();
+        // Fall back to the global check when we don't know which room is being searched: the room
+        // id may still be undefined while a room alias is being resolved.
+        const roomScoped = scope === SearchScope.Room && roomId !== undefined;
+        return {
+            relevant: roomScoped ? crawlingRooms.has(roomId) : crawlingRooms.size > 0,
+            anyOutstanding: crawlingRooms.size > 0,
+        };
+    }, [index, scope, roomId]);
+
+    // The checkpoint half of the answer is known synchronously, so seed from it rather than
+    // rendering an unwarned search for a room we already know is being crawled.
+    const [incomplete, setIncomplete] = useState<boolean>(() => readCheckpoints().relevant);
+
+    useEffect(() => {
+        if (!index) {
+            setIncomplete(false);
+            return;
+        }
+
+        // Guards against a slow isRoomIndexed() response overwriting a newer one, or landing after
+        // the scope changed or the component unmounted.
+        let generation = 0;
+
+        // Answer this scope and room from the checkpoint set up front, so that the previous
+        // search's result is not left on screen while the first lookup below is in flight. Doing
+        // this per effect run rather than per event matters: a checkpoint change is not a new
+        // question, and resetting on one would blink an already-earned warning off and on again.
+        setIncomplete(readCheckpoints().relevant);
+
+        const update = async (): Promise<void> => {
+            const current = ++generation;
+            const { relevant, anyOutstanding } = readCheckpoints();
+
+            if (relevant) {
+                setIncomplete(true);
+                return;
+            }
+            if (!anyOutstanding || scope !== SearchScope.Room || roomId === undefined) {
+                setIncomplete(false);
+                return;
+            }
+
+            // Nothing is queued for this room yet, but the index may hold nothing for it at all.
+            // `undefined` means there is no index manager to ask, which is not evidence either way.
+            const indexed = await index.isRoomIndexed(roomId);
+            if (current === generation) setIncomplete(indexed === false);
+        };
+
+        const onChangedCheckpoint = (): void => {
+            void update();
+        };
+
+        // Re-sync in case the crawl state changed between the initial render and the subscription.
+        onChangedCheckpoint();
+        index.on("changedCheckpoint", onChangedCheckpoint);
+
+        return () => {
+            generation++;
+            index.removeListener("changedCheckpoint", onChangedCheckpoint);
+        };
+    }, [index, scope, roomId, readCheckpoints]);
+
+    return incomplete;
+}
+
+export default function SearchWarning({ isRoomEncrypted, kind, showLogo = true, scope, roomId }: IProps): JSX.Element {
+    const eventIndex = EventIndexPeg.get();
+    const indexIncomplete = useIsIndexIncomplete(eventIndex, scope, roomId);
+
     if (!isRoomEncrypted) return <></>;
-    if (EventIndexPeg.get()) return <></>;
+
+    if (eventIndex) {
+        // The index is still missing history for this search, so it may silently return partial
+        // results (#32253). Warn the user.
+        if (indexIncomplete && kind === WarningKind.Search) {
+            // This warning appears dynamically while a search panel is already open (the crawler
+            // finishes draining mid-session), so mark it as a polite live region for screen readers.
+            return (
+                <div className="mx_SearchWarning" role="status">
+                    <span>{_t("seshat|warning_kind_search_partial")}</span>
+                </div>
+            );
+        }
+        return <></>;
+    }
 
     if (EventIndexPeg.error) {
         return (
diff --git a/apps/web/src/components/views/elements/SettingsFlag.tsx b/apps/web/src/components/views/elements/SettingsFlag.tsx
index 3e09b298ce..6871850d4e 100644
--- a/apps/web/src/components/views/elements/SettingsFlag.tsx
+++ b/apps/web/src/components/views/elements/SettingsFlag.tsx
@@ -15,17 +15,17 @@ import { logger } from "matrix-js-sdk/src/logger";
 import SettingsStore from "../../../settings/SettingsStore";
 import { _t } from "../../../languageHandler";
 import { type SettingLevel } from "../../../settings/SettingLevel";
-import { type BooleanSettingKey, defaultWatchManager } from "../../../settings/Settings";
+import { type NullableBooleanSettingKey, defaultWatchManager } from "../../../settings/Settings";
 
 interface IProps {
     // The setting must be a boolean
-    name: BooleanSettingKey;
+    name: NullableBooleanSettingKey;
     level: SettingLevel;
     roomId?: string; // for per-room settings
     label?: string;
     isExplicit?: boolean;
     hideIfCannotSet?: boolean;
-    requires?: BooleanSettingKey[];
+    requires?: NullableBooleanSettingKey[];
     onChange?(checked: boolean): void;
 }
 
@@ -59,9 +59,10 @@ export default class SettingsFlag extends React.Component<IProps, IState> {
     }
 
     private getSettingValue(): boolean {
-        // If a level defined in props is overridden by a level at a high presedence, it gets disabled
-        // and we should show the overridding value.
+        // If a level defined in props is overridden by a level at a high precedence,
+        // or the setting lacks support for the desired level, it gets disabled and we should show the overriding value.
         if (
+            !SettingsStore.doesSettingSupportLevel(this.props.name, this.props.level) ||
             SettingsStore.settingIsOveriddenAtConfigLevel(this.props.name, this.props.roomId ?? null, this.props.level)
         ) {
             return !!SettingsStore.getValue(this.props.name);
diff --git a/apps/web/src/components/views/elements/SpellCheckLanguagesDropdown.tsx b/apps/web/src/components/views/elements/SpellCheckLanguagesDropdown.tsx
index 763fe4b5f8..6a4d98b925 100644
--- a/apps/web/src/components/views/elements/SpellCheckLanguagesDropdown.tsx
+++ b/apps/web/src/components/views/elements/SpellCheckLanguagesDropdown.tsx
@@ -10,7 +10,8 @@ import React, { type ReactElement } from "react";
 
 import Dropdown from "../../views/elements/Dropdown";
 import PlatformPeg from "../../../PlatformPeg";
-import { _t, getUserLanguage } from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
+import { getUserLanguage } from "../../../i18n/settings";
 import Spinner from "./Spinner";
 import { type NonEmptyArray } from "../../../@types/common";
 
diff --git a/apps/web/src/components/views/elements/Spoiler.tsx b/apps/web/src/components/views/elements/Spoiler.tsx
index 8d3d0a55fd..4f88bf599b 100644
--- a/apps/web/src/components/views/elements/Spoiler.tsx
+++ b/apps/web/src/components/views/elements/Spoiler.tsx
@@ -42,6 +42,7 @@ export default class Spoiler extends React.Component<IProps, IState> {
             <button
                 className={"mx_EventTile_spoiler" + (this.state.visible ? " visible" : "")}
                 onClick={this.toggleVisible}
+                type="button"
             >
                 {reason}
                 &nbsp;
diff --git a/apps/web/src/components/views/elements/ToggleSwitch.tsx b/apps/web/src/components/views/elements/ToggleSwitch.tsx
index 6139b32669..106b3fb839 100644
--- a/apps/web/src/components/views/elements/ToggleSwitch.tsx
+++ b/apps/web/src/components/views/elements/ToggleSwitch.tsx
@@ -50,6 +50,7 @@ export default ({ checked, disabled = false, onChange, title, tooltip, ...props
             className={classes}
             onClick={_onClick}
             role="switch"
+            tabIndex={0}
             aria-label={title}
             aria-checked={checked}
             aria-disabled={disabled}
diff --git a/apps/web/test/unit-tests/components/views/Validation-test.ts b/apps/web/src/components/views/elements/Validation.test.ts
similarity index 87%
rename from apps/web/test/unit-tests/components/views/Validation-test.ts
rename to apps/web/src/components/views/elements/Validation.test.ts
index 7682213d66..54c4608896 100644
--- a/apps/web/test/unit-tests/components/views/Validation-test.ts
+++ b/apps/web/src/components/views/elements/Validation.test.ts
@@ -6,7 +6,9 @@ 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 withValidation from "../../../../src/components/views/elements/Validation";
+import { describe, it, expect } from "vitest";
+
+import withValidation from "./Validation";
 
 describe("Validation", () => {
     it("should handle 0 rules", () => {
diff --git a/apps/web/src/components/views/emojipicker/Category.tsx b/apps/web/src/components/views/emojipicker/Category.tsx
deleted file mode 100644
index 17f33d9346..0000000000
--- a/apps/web/src/components/views/emojipicker/Category.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-Copyright 2019 Tulir Asokan <tulir@maunium.net>
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { type JSX, type RefObject } from "react";
-import { type DATA_BY_CATEGORY, type Emoji as IEmoji } from "@matrix-org/emojibase-bindings";
-
-import { CATEGORY_HEADER_HEIGHT, EMOJI_HEIGHT, EMOJIS_PER_ROW } from "./EmojiPicker";
-import LazyRenderList from "../elements/LazyRenderList";
-import Emoji from "./Emoji";
-import { type ButtonEvent } from "../elements/AccessibleButton";
-
-const OVERFLOW_ROWS = 3;
-
-export type CategoryKey = keyof typeof DATA_BY_CATEGORY | "recent";
-
-export interface ICategory {
-    id: CategoryKey;
-    name: string;
-    // Emoji to show in the header for this category
-    emoji: string;
-    enabled: boolean;
-    // Whether the category is currently visible
-    visible: boolean;
-    // Whether the category is the first visible category
-    firstVisible: boolean;
-    ref: RefObject<HTMLButtonElement | null>;
-}
-
-interface IProps {
-    id: string;
-    name: string;
-    emojis: IEmoji[];
-    selectedEmojis?: Set<string>;
-    heightBefore: number;
-    viewportHeight: number;
-    scrollTop: number;
-    onClick(ev: ButtonEvent, emoji: IEmoji): void;
-    onMouseEnter(emoji: IEmoji): void;
-    onMouseLeave(emoji: IEmoji): void;
-    isEmojiDisabled?: (unicode: string) => boolean;
-}
-
-function hexEncode(str: string): string {
-    let hex: string;
-    let i: number;
-
-    let result = "";
-    for (i = 0; i < str.length; i++) {
-        hex = str.charCodeAt(i).toString(16);
-        result += ("000" + hex).slice(-4);
-    }
-
-    return result;
-}
-
-class Category extends React.PureComponent<IProps> {
-    private renderEmojiRow = (rowIndex: number): JSX.Element => {
-        const { onClick, onMouseEnter, onMouseLeave, selectedEmojis, emojis } = this.props;
-        const emojisForRow = emojis.slice(rowIndex * 8, (rowIndex + 1) * 8);
-        return (
-            <div key={rowIndex} role="row">
-                {emojisForRow.map((emoji) => (
-                    <div role="gridcell" className="mx_EmojiPicker_item_wrapper" key={emoji.hexcode}>
-                        <Emoji
-                            emoji={emoji}
-                            selectedEmojis={selectedEmojis}
-                            onClick={onClick}
-                            onMouseEnter={onMouseEnter}
-                            onMouseLeave={onMouseLeave}
-                            disabled={this.props.isEmojiDisabled?.(emoji.unicode)}
-                            id={`mx_EmojiPicker_item_${this.props.id}_${hexEncode(emoji.unicode)}`}
-                        />
-                    </div>
-                ))}
-            </div>
-        );
-    };
-
-    public render(): React.ReactNode {
-        const { emojis, name, heightBefore, viewportHeight, scrollTop } = this.props;
-        if (!emojis || emojis.length === 0) {
-            return null;
-        }
-        const rows = new Array(Math.ceil(emojis.length / EMOJIS_PER_ROW));
-        for (let counter = 0; counter < rows.length; ++counter) {
-            rows[counter] = counter;
-        }
-
-        const viewportTop = scrollTop;
-        const viewportBottom = viewportTop + viewportHeight;
-        const listTop = heightBefore + CATEGORY_HEADER_HEIGHT;
-        const listBottom = listTop + rows.length * EMOJI_HEIGHT;
-        const top = Math.max(viewportTop, listTop);
-        const bottom = Math.min(viewportBottom, listBottom);
-        // the viewport height and scrollTop passed to the LazyRenderList
-        // is capped at the intersection with the real viewport, so lists
-        // out of view are passed height 0, so they won't render any items.
-        const localHeight = Math.max(0, bottom - top);
-        const localScrollTop = Math.max(0, scrollTop - listTop);
-
-        return (
-            <section
-                id={`mx_EmojiPicker_category_${this.props.id}`}
-                className="mx_EmojiPicker_category"
-                data-category-id={this.props.id}
-                role="tabpanel"
-                aria-label={name}
-            >
-                <h2 className="mx_EmojiPicker_category_label">{name}</h2>
-                <LazyRenderList
-                    className="mx_EmojiPicker_list"
-                    itemHeight={EMOJI_HEIGHT}
-                    items={rows}
-                    scrollTop={localScrollTop}
-                    height={localHeight}
-                    overflowItems={OVERFLOW_ROWS}
-                    overflowMargin={0}
-                    renderItem={this.renderEmojiRow}
-                    role="grid"
-                    aria-multiselectable
-                />
-            </section>
-        );
-    }
-}
-
-export default Category;
diff --git a/apps/web/src/components/views/emojipicker/Emoji.tsx b/apps/web/src/components/views/emojipicker/Emoji.tsx
deleted file mode 100644
index 8cc104f9a5..0000000000
--- a/apps/web/src/components/views/emojipicker/Emoji.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-Copyright 2019 Tulir Asokan <tulir@maunium.net>
-
-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 { type Emoji as IEmoji } from "@matrix-org/emojibase-bindings";
-
-import { type ButtonEvent } from "../elements/AccessibleButton";
-import { RovingAccessibleButton } from "../../../accessibility/RovingTabIndex";
-
-interface IProps {
-    emoji: IEmoji;
-    /**
-     * Set of which emojis are already selected and should be decorated as such.
-     * If specified, emoji will use a checkbox role with aria-checked set appropriately.
-     */
-    selectedEmojis?: Set<string>;
-    onClick(ev: ButtonEvent, emoji: IEmoji): void;
-    onMouseEnter(emoji: IEmoji): void;
-    onMouseLeave(emoji: IEmoji): void;
-    disabled?: boolean;
-    id?: string;
-    className?: string;
-}
-
-class Emoji extends React.PureComponent<IProps> {
-    public render(): React.ReactNode {
-        const { onClick, onMouseEnter, onMouseLeave, emoji, selectedEmojis } = this.props;
-        const isSelected = selectedEmojis?.has(emoji.unicode);
-        return (
-            <RovingAccessibleButton
-                id={this.props.id}
-                onClick={(ev: ButtonEvent) => onClick(ev, emoji)}
-                onMouseEnter={() => onMouseEnter(emoji)}
-                onMouseLeave={() => onMouseLeave(emoji)}
-                className={this.props.className}
-                disabled={this.props.disabled || undefined}
-                role={selectedEmojis ? "checkbox" : undefined}
-                aria-checked={this.props.disabled ? undefined : isSelected}
-                focusOnMouseOver
-            >
-                <div className={`mx_EmojiPicker_item ${isSelected ? "mx_EmojiPicker_item_selected" : ""}`}>
-                    {emoji.unicode}
-                </div>
-            </RovingAccessibleButton>
-        );
-    }
-}
-
-export default Emoji;
diff --git a/apps/web/src/components/views/emojipicker/EmojiPicker.tsx b/apps/web/src/components/views/emojipicker/EmojiPicker.tsx
deleted file mode 100644
index c3ad43fd77..0000000000
--- a/apps/web/src/components/views/emojipicker/EmojiPicker.tsx
+++ /dev/null
@@ -1,448 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-Copyright 2019 Tulir Asokan <tulir@maunium.net>
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { type Dispatch } from "react";
-import { DATA_BY_CATEGORY, getEmojiFromUnicode, type Emoji as IEmoji } from "@matrix-org/emojibase-bindings";
-import { clamp } from "@element-hq/web-shared-components";
-import classNames from "classnames";
-
-import { _t } from "../../../languageHandler";
-import * as recent from "../../../emojipicker/recent";
-import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
-import Header from "./Header";
-import Search from "./Search";
-import Preview from "./Preview";
-import QuickReactions from "./QuickReactions";
-import Category, { type CategoryKey, type ICategory } from "./Category";
-import { filterBoolean } from "../../../utils/arrays";
-import {
-    type IAction as RovingAction,
-    type IState as RovingState,
-    RovingTabIndexProvider,
-    RovingStateActionType,
-} from "../../../accessibility/RovingTabIndex";
-import { Key } from "../../../Keyboard";
-import { type ButtonEvent } from "../elements/AccessibleButton";
-
-export const CATEGORY_HEADER_HEIGHT = 20;
-export const EMOJI_HEIGHT = 35;
-export const EMOJIS_PER_ROW = 8;
-
-const ZERO_WIDTH_JOINER = "\u200D";
-
-interface IProps {
-    selectedEmojis?: Set<string>;
-    onChoose(unicode: string): boolean;
-    onFinished(): void;
-    isEmojiDisabled?: (unicode: string) => boolean;
-}
-
-interface IState {
-    filter: string;
-    previewEmoji?: IEmoji;
-    scrollTop: number;
-    // initial estimation of height, dialog is hardcoded to 450px height.
-    // should be enough to never have blank rows of emojis as
-    // 3 rows of overflow are also rendered. The actual value is updated on scroll.
-    viewportHeight: number;
-    // Track if user has interacted with arrow keys or search
-    showHighlight: boolean;
-}
-
-class EmojiPicker extends React.Component<IProps, IState> {
-    private readonly recentlyUsed: IEmoji[];
-    private readonly memoizedDataByCategory: Record<CategoryKey, IEmoji[]>;
-    private readonly categories: ICategory[];
-
-    private scrollRef = React.createRef<AutoHideScrollbar<"div">>();
-
-    public constructor(props: IProps) {
-        super(props);
-
-        this.state = {
-            filter: "",
-            scrollTop: 0,
-            viewportHeight: 280,
-            showHighlight: false,
-        };
-
-        // Convert recent emoji characters to emoji data, removing unknowns and duplicates
-        this.recentlyUsed = Array.from(new Set(filterBoolean(recent.get().map(getEmojiFromUnicode))));
-        this.memoizedDataByCategory = {
-            recent: this.recentlyUsed,
-            ...DATA_BY_CATEGORY,
-        };
-
-        const hasRecentlyUsed = this.recentlyUsed.length > 0;
-
-        const categoryConfig: Pick<ICategory, "id" | "name" | "emoji">[] = [
-            { id: "recent", name: _t("emoji|category_frequently_used"), emoji: "🕒" },
-            { id: "people", name: _t("emoji|category_smileys_people"), emoji: "😀" },
-            { id: "nature", name: _t("emoji|category_animals_nature"), emoji: "🐕" },
-            { id: "foods", name: _t("emoji|category_food_drink"), emoji: "🍎" },
-            { id: "activity", name: _t("emoji|category_activities"), emoji: "⚽️" },
-            { id: "places", name: _t("emoji|category_travel_places"), emoji: "🚗" },
-            { id: "objects", name: _t("emoji|category_objects"), emoji: "💡" },
-            { id: "symbols", name: _t("emoji|category_symbols"), emoji: "⁉️" },
-            { id: "flags", name: _t("emoji|category_flags"), emoji: "🏁" },
-        ];
-
-        this.categories = categoryConfig.map((config) => {
-            let isEnabled = true;
-            let isVisible = false;
-            let firstVisible = false;
-            if (config.id === "recent") {
-                isEnabled = hasRecentlyUsed;
-                isVisible = hasRecentlyUsed;
-                firstVisible = hasRecentlyUsed;
-            } else if (config.id === "people") {
-                isVisible = true;
-                firstVisible = !hasRecentlyUsed;
-            }
-            return {
-                ...config,
-                enabled: isEnabled,
-                visible: isVisible,
-                firstVisible: firstVisible,
-                ref: React.createRef(),
-            };
-        });
-    }
-
-    private onScroll = (): void => {
-        const body = this.scrollRef.current?.containerRef.current;
-        if (!body) return;
-        this.setState({
-            scrollTop: body.scrollTop,
-            viewportHeight: body.clientHeight,
-        });
-        this.updateVisibility();
-    };
-
-    // Given a roving emoji button returns the role=row element containing it
-    private getRow(rovingNode?: Element): Element | undefined {
-        return this.getGridcell(rovingNode)?.parentElement ?? undefined;
-    }
-
-    // Given a roving emoji button returns the role=gridcell element containing it
-    private getGridcell(rovingNode?: Element): Element | undefined {
-        return rovingNode?.parentElement ?? undefined;
-    }
-
-    // Given a role=gridcell node returns the roving emoji button contained within
-    private getRovingNode(gridcellNode?: Element): Element | undefined {
-        return gridcellNode?.children[0];
-    }
-
-    private keyboardNavigation(ev: React.KeyboardEvent, state: RovingState, dispatch: Dispatch<RovingAction>): void {
-        const rowElement = this.getRow(state.activeNode);
-        const gridcellNode = this.getGridcell(state.activeNode);
-        if (!rowElement || !gridcellNode || !state.activeNode) return;
-
-        // Index of element within row container
-        const columnIndex = Array.from(rowElement.children).indexOf(gridcellNode);
-        // Index of element within the list of roving nodes
-        const refIndex = state.nodes.indexOf(state.activeNode);
-
-        let focusNode: HTMLElement | undefined;
-        let newRowElement: Element | undefined;
-        switch (ev.key) {
-            case Key.ARROW_LEFT:
-                focusNode = state.nodes[refIndex - 1];
-                newRowElement = this.getRow(focusNode);
-                break;
-
-            case Key.ARROW_RIGHT:
-                focusNode = state.nodes[refIndex + 1];
-                newRowElement = this.getRow(focusNode);
-                break;
-
-            case Key.ARROW_UP:
-            case Key.ARROW_DOWN: {
-                // For up/down we find the prev/next parent by inspecting the refs either side of our row
-                const node =
-                    ev.key === Key.ARROW_UP
-                        ? state.nodes[refIndex - columnIndex - 1]
-                        : state.nodes[refIndex - columnIndex + EMOJIS_PER_ROW];
-                newRowElement = this.getRow(node);
-                if (newRowElement) {
-                    const newColumnIndex = clamp(columnIndex, 0, newRowElement.children.length - 1);
-                    const newTarget = this.getRovingNode(newRowElement?.children[newColumnIndex]);
-                    focusNode = state.nodes.find((r) => r === newTarget);
-                }
-                break;
-            }
-        }
-
-        if (focusNode) {
-            // Only move actual DOM focus if an emoji already has focus
-            // If the input has focus, keep using aria-activedescendant for virtual focus
-            if (document.activeElement !== document.querySelector(".mx_EmojiPicker_search input")) {
-                focusNode?.focus();
-            }
-            dispatch({
-                type: RovingStateActionType.SetFocus,
-                payload: { node: focusNode },
-            });
-
-            if (rowElement !== newRowElement) {
-                focusNode?.scrollIntoView({
-                    behavior: "auto",
-                    block: "center",
-                    inline: "center",
-                });
-            }
-        }
-
-        ev.preventDefault();
-        ev.stopPropagation();
-    }
-
-    private onKeyDown = (ev: React.KeyboardEvent, state: RovingState, dispatch: Dispatch<RovingAction>): void => {
-        if (state.activeNode && [Key.ARROW_DOWN, Key.ARROW_RIGHT, Key.ARROW_LEFT, Key.ARROW_UP].includes(ev.key)) {
-            // If highlight is not shown yet, show it and reset to first emoji
-            if (!this.state.showHighlight) {
-                this.setState({ showHighlight: true });
-                // Reset to first emoji when showing highlight for the first time (or after it was hidden)
-                if (state.nodes.length > 0) {
-                    dispatch({
-                        type: RovingStateActionType.SetFocus,
-                        payload: { node: state.nodes[0] },
-                    });
-                }
-                ev.preventDefault();
-                ev.stopPropagation();
-                return;
-            }
-            this.keyboardNavigation(ev, state, dispatch);
-        }
-    };
-
-    private updateVisibility = (): void => {
-        const body = this.scrollRef.current?.containerRef.current;
-        if (!body) return;
-        const rect = body.getBoundingClientRect();
-        let firstVisibleFound = false;
-        for (const cat of this.categories) {
-            const elem = body.querySelector(`[data-category-id="${cat.id}"]`);
-            if (!elem) {
-                cat.visible = false;
-                cat.ref.current?.classList.remove("mx_EmojiPicker_anchor_visible");
-                continue;
-            }
-            const elemRect = elem.getBoundingClientRect();
-            const y = elemRect.y - rect.y;
-            const yEnd = elemRect.y + elemRect.height - rect.y;
-            cat.visible = y < rect.height && yEnd > 0;
-            if (cat.visible && !firstVisibleFound) {
-                firstVisibleFound = true;
-                cat.firstVisible = true;
-            } else {
-                cat.firstVisible = false;
-            }
-            // We update this here instead of through React to avoid re-render on scroll.
-            if (!cat.ref.current) continue;
-            if (cat.visible) {
-                cat.ref.current.classList.add("mx_EmojiPicker_anchor_visible");
-                cat.ref.current.setAttribute("aria-selected", "true");
-            } else {
-                cat.ref.current.classList.remove("mx_EmojiPicker_anchor_visible");
-                cat.ref.current.setAttribute("aria-selected", "false");
-            }
-            if (cat.firstVisible) {
-                cat.ref.current.setAttribute("tabindex", "0");
-            } else {
-                cat.ref.current.setAttribute("tabindex", "-1");
-            }
-        }
-    };
-
-    private scrollToCategory = (category: string): void => {
-        this.scrollRef.current?.containerRef.current
-            ?.querySelector(`[data-category-id="${category}"]`)
-            ?.scrollIntoView();
-    };
-
-    private onChangeFilter = (filter: string): void => {
-        const lcFilter = filter.toLowerCase().trim(); // filter is case insensitive
-
-        // User has typed a query, show highlight
-        // If filter is cleared, hide highlight again
-        if (lcFilter && !this.state.showHighlight) {
-            this.setState({ showHighlight: true });
-        } else if (!lcFilter && this.state.showHighlight) {
-            this.setState({ showHighlight: false });
-        }
-
-        for (const cat of this.categories) {
-            let emojis: IEmoji[];
-            // If the new filter string includes the old filter string, we don't have to re-filter the whole dataset.
-            if (lcFilter.includes(this.state.filter)) {
-                emojis = this.memoizedDataByCategory[cat.id];
-            } else {
-                emojis = cat.id === "recent" ? this.recentlyUsed : DATA_BY_CATEGORY[cat.id];
-            }
-
-            if (lcFilter !== "") {
-                emojis = emojis.filter((emoji) => this.emojiMatchesFilter(emoji, lcFilter));
-                // Copy the array to not clobber the original unfiltered sorting
-                emojis = [...emojis].sort((a, b) => {
-                    const indexA = a.shortcodes[0].indexOf(lcFilter);
-                    const indexB = b.shortcodes[0].indexOf(lcFilter);
-
-                    // Prioritize emojis containing the filter in its shortcode
-                    if (indexA == -1 || indexB == -1) {
-                        return indexB - indexA;
-                    }
-
-                    // If both emojis start with the filter
-                    // put the shorter emoji first
-                    if (indexA == 0 && indexB == 0) {
-                        return a.shortcodes[0].length - b.shortcodes[0].length;
-                    }
-
-                    // Prioritize emojis starting with the filter
-                    return indexA - indexB;
-                });
-            }
-
-            this.memoizedDataByCategory[cat.id] = emojis;
-            cat.enabled = emojis.length > 0;
-            // The setState below doesn't re-render the header and we already have the refs for updateVisibility, so...
-            if (cat.ref.current) {
-                cat.ref.current.disabled = !cat.enabled;
-            }
-        }
-        this.setState({ filter });
-        // Header underlines need to be updated, but updating requires knowing
-        // where the categories are, so we wait for a tick.
-        window.setTimeout(this.updateVisibility, 0);
-    };
-
-    private emojiMatchesFilter = (emoji: IEmoji, filter: string): boolean => {
-        // If the query is an emoji containing a variation then strip it to provide more useful matches
-        if (filter.includes(ZERO_WIDTH_JOINER)) {
-            filter = filter.split(ZERO_WIDTH_JOINER, 2)[0];
-        }
-        return (
-            emoji.label.toLowerCase().includes(filter) ||
-            (Array.isArray(emoji.emoticon)
-                ? emoji.emoticon.some((x) => x.includes(filter))
-                : emoji.emoticon?.includes(filter)) ||
-            emoji.shortcodes.some((x) => x.toLowerCase().includes(filter)) ||
-            emoji.unicode.split(ZERO_WIDTH_JOINER).includes(filter)
-        );
-    };
-
-    private onEnterFilter = (): void => {
-        // Only select emoji if highlight is shown
-        if (!this.state.showHighlight) return;
-
-        const btn = this.scrollRef.current?.containerRef.current?.querySelector<HTMLButtonElement>(
-            '.mx_EmojiPicker_item_wrapper [tabindex="0"]',
-        );
-        btn?.click();
-        this.props.onFinished();
-    };
-
-    private onHoverEmoji = (emoji: IEmoji): void => {
-        this.setState({
-            previewEmoji: emoji,
-        });
-    };
-
-    private onHoverEmojiEnd = (): void => {
-        this.setState({
-            previewEmoji: undefined,
-        });
-    };
-
-    private onClickEmoji = (ev: ButtonEvent, emoji: IEmoji): void => {
-        if (this.props.onChoose(emoji.unicode) !== false) {
-            recent.add(emoji.unicode);
-        }
-        if ((ev as React.KeyboardEvent).key === Key.ENTER) {
-            this.props.onFinished();
-        }
-    };
-
-    private static categoryHeightForEmojiCount(count: number): number {
-        if (count === 0) {
-            return 0;
-        }
-        return CATEGORY_HEADER_HEIGHT + Math.ceil(count / EMOJIS_PER_ROW) * EMOJI_HEIGHT;
-    }
-
-    public render(): React.ReactNode {
-        return (
-            <RovingTabIndexProvider onKeyDown={this.onKeyDown}>
-                {({ onKeyDownHandler }) => {
-                    let heightBefore = 0;
-                    return (
-                        <section
-                            className="mx_EmojiPicker"
-                            data-testid="mx_EmojiPicker"
-                            onKeyDown={onKeyDownHandler}
-                            aria-label={_t("a11y|emoji_picker")}
-                        >
-                            <Header categories={this.categories} onAnchorClick={this.scrollToCategory} />
-                            <Search
-                                query={this.state.filter}
-                                onChange={this.onChangeFilter}
-                                onEnter={this.onEnterFilter}
-                                onKeyDown={onKeyDownHandler}
-                            />
-                            <AutoHideScrollbar
-                                id="mx_EmojiPicker_body"
-                                className={classNames("mx_EmojiPicker_body", {
-                                    mx_EmojiPicker_body_showHighlight: this.state.showHighlight,
-                                })}
-                                ref={this.scrollRef}
-                                onScroll={this.onScroll}
-                            >
-                                {this.categories.map((category) => {
-                                    const emojis = this.memoizedDataByCategory[category.id];
-                                    const categoryElement = (
-                                        <Category
-                                            key={category.id}
-                                            id={category.id}
-                                            name={category.name}
-                                            heightBefore={heightBefore}
-                                            viewportHeight={this.state.viewportHeight}
-                                            scrollTop={this.state.scrollTop}
-                                            emojis={emojis}
-                                            onClick={this.onClickEmoji}
-                                            onMouseEnter={this.onHoverEmoji}
-                                            onMouseLeave={this.onHoverEmojiEnd}
-                                            isEmojiDisabled={this.props.isEmojiDisabled}
-                                            selectedEmojis={this.props.selectedEmojis}
-                                        />
-                                    );
-                                    const height = EmojiPicker.categoryHeightForEmojiCount(emojis.length);
-                                    heightBefore += height;
-                                    return categoryElement;
-                                })}
-                            </AutoHideScrollbar>
-                            {this.state.previewEmoji ? (
-                                <Preview emoji={this.state.previewEmoji} />
-                            ) : (
-                                <QuickReactions
-                                    onClick={this.onClickEmoji}
-                                    selectedEmojis={this.props.selectedEmojis}
-                                />
-                            )}
-                        </section>
-                    );
-                }}
-            </RovingTabIndexProvider>
-        );
-    }
-}
-
-export default EmojiPicker;
diff --git a/apps/web/src/components/views/emojipicker/Header.tsx b/apps/web/src/components/views/emojipicker/Header.tsx
deleted file mode 100644
index 5b57c065b5..0000000000
--- a/apps/web/src/components/views/emojipicker/Header.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-Copyright 2019 Tulir Asokan <tulir@maunium.net>
-
-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 classNames from "classnames";
-
-import { _t } from "../../../languageHandler";
-import { type CategoryKey, type ICategory } from "./Category";
-import { getKeyBindingsManager } from "../../../KeyBindingsManager";
-import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
-
-interface IProps {
-    categories: ICategory[];
-    onAnchorClick(id: CategoryKey): void;
-}
-
-class Header extends React.PureComponent<IProps> {
-    private findNearestEnabled(index: number, delta: number): number | undefined {
-        index += this.props.categories.length;
-        const cats = [...this.props.categories, ...this.props.categories, ...this.props.categories];
-
-        while (index < cats.length && index >= 0) {
-            if (cats[index].enabled) return index % this.props.categories.length;
-            index += delta > 0 ? 1 : -1;
-        }
-    }
-
-    private changeCategoryRelative(delta: number): void {
-        // Move to the next/previous category using the first visible as the current.
-        const current = this.props.categories.findIndex((c) => c.visible);
-        this.changeCategoryAbsolute(current + delta, delta);
-    }
-
-    private changeCategoryAbsolute(index: number, delta = 1): void {
-        const category = this.props.categories[this.findNearestEnabled(index, delta)!];
-        if (category) {
-            this.props.onAnchorClick(category.id);
-            category.ref.current?.focus();
-        }
-    }
-
-    // Implements ARIA Tabs with Automatic Activation pattern
-    // https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html
-    private onKeyDown = (ev: React.KeyboardEvent): void => {
-        let handled = true;
-
-        const action = getKeyBindingsManager().getAccessibilityAction(ev);
-        switch (action) {
-            case KeyBindingAction.ArrowLeft:
-                this.changeCategoryRelative(-1);
-                break;
-            case KeyBindingAction.ArrowRight:
-                this.changeCategoryRelative(1);
-                break;
-
-            case KeyBindingAction.Home:
-                this.changeCategoryAbsolute(0);
-                break;
-            case KeyBindingAction.End:
-                this.changeCategoryAbsolute(this.props.categories.length - 1, -1);
-                break;
-            default:
-                handled = false;
-        }
-
-        if (handled) {
-            ev.preventDefault();
-            ev.stopPropagation();
-        }
-    };
-
-    public render(): React.ReactNode {
-        return (
-            <nav
-                className="mx_EmojiPicker_header"
-                role="tablist"
-                aria-label={_t("emoji|categories")}
-                onKeyDown={this.onKeyDown}
-            >
-                {this.props.categories.map((category) => {
-                    const classes = classNames("mx_EmojiPicker_anchor", {
-                        mx_EmojiPicker_anchor_visible: category.visible,
-                    });
-                    // Properties of this button are also modified by EmojiPicker's updateVisibility in DOM.
-                    return (
-                        <button
-                            disabled={!category.enabled}
-                            key={category.id}
-                            ref={category.ref}
-                            className={classes}
-                            onClick={() => this.props.onAnchorClick(category.id)}
-                            title={category.name}
-                            role="tab"
-                            tabIndex={category.firstVisible ? 0 : -1} // roving
-                            aria-selected={category.visible}
-                            aria-controls={`mx_EmojiPicker_category_${category.id}`}
-                        >
-                            {category.emoji}
-                        </button>
-                    );
-                })}
-            </nav>
-        );
-    }
-}
-
-export default Header;
diff --git a/apps/web/src/components/views/emojipicker/Preview.tsx b/apps/web/src/components/views/emojipicker/Preview.tsx
deleted file mode 100644
index d8d2fe9942..0000000000
--- a/apps/web/src/components/views/emojipicker/Preview.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-Copyright 2019 Tulir Asokan <tulir@maunium.net>
-
-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 { type Emoji } from "@matrix-org/emojibase-bindings";
-
-interface IProps {
-    emoji: Emoji;
-}
-
-class Preview extends React.PureComponent<IProps> {
-    public render(): React.ReactNode {
-        const {
-            unicode,
-            label,
-            shortcodes: [shortcode],
-        } = this.props.emoji;
-
-        return (
-            <div className="mx_EmojiPicker_footer mx_EmojiPicker_preview">
-                <div className="mx_EmojiPicker_preview_emoji">{unicode}</div>
-                <div className="mx_EmojiPicker_preview_text">
-                    <div className="mx_EmojiPicker_name mx_EmojiPicker_preview_name">{label}</div>
-                    <div className="mx_EmojiPicker_shortcode">{shortcode}</div>
-                </div>
-            </div>
-        );
-    }
-}
-
-export default Preview;
diff --git a/apps/web/src/components/views/emojipicker/QuickReactions.tsx b/apps/web/src/components/views/emojipicker/QuickReactions.tsx
deleted file mode 100644
index 4b337cd5f5..0000000000
--- a/apps/web/src/components/views/emojipicker/QuickReactions.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-Copyright 2019 Tulir Asokan <tulir@maunium.net>
-
-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 { getEmojiFromUnicode, type Emoji as IEmoji } from "@matrix-org/emojibase-bindings";
-
-import { _t } from "../../../languageHandler";
-import Emoji from "./Emoji";
-import { type ButtonEvent } from "../elements/AccessibleButton";
-import Toolbar from "../../../accessibility/Toolbar";
-
-// We use the variation-selector Heart in Quick Reactions for some reason
-const QUICK_REACTIONS = ["👍", "👎", "😄", "🎉", "😕", "❤️", "🚀", "👀"].map((emoji) => {
-    const data = getEmojiFromUnicode(emoji);
-    if (!data) {
-        throw new Error(`Emoji ${emoji} doesn't exist in emojibase`);
-    }
-    return data;
-});
-
-interface IProps {
-    selectedEmojis?: Set<string>;
-    onClick(ev: ButtonEvent, emoji: IEmoji): void;
-}
-
-interface IState {
-    hover?: IEmoji;
-}
-
-class QuickReactions extends React.Component<IProps, IState> {
-    public constructor(props: IProps) {
-        super(props);
-        this.state = {};
-    }
-
-    private onMouseEnter = (emoji: IEmoji): void => {
-        this.setState({
-            hover: emoji,
-        });
-    };
-
-    private onMouseLeave = (): void => {
-        this.setState({
-            hover: undefined,
-        });
-    };
-
-    public render(): React.ReactNode {
-        return (
-            <section className="mx_EmojiPicker_footer mx_EmojiPicker_quick mx_EmojiPicker_category">
-                <h2 className="mx_EmojiPicker_quick_header mx_EmojiPicker_category_label">
-                    {!this.state.hover ? (
-                        _t("emoji|quick_reactions")
-                    ) : (
-                        <React.Fragment>
-                            <span className="mx_EmojiPicker_name">{this.state.hover.label}</span>
-                            <span className="mx_EmojiPicker_shortcode">{this.state.hover.shortcodes[0]}</span>
-                        </React.Fragment>
-                    )}
-                </h2>
-                <Toolbar className="mx_EmojiPicker_list" aria-label={_t("emoji|quick_reactions")}>
-                    {QUICK_REACTIONS.map((emoji) => (
-                        <Emoji
-                            key={emoji.hexcode}
-                            emoji={emoji}
-                            onClick={this.props.onClick}
-                            onMouseEnter={this.onMouseEnter}
-                            onMouseLeave={this.onMouseLeave}
-                            selectedEmojis={this.props.selectedEmojis}
-                            className="mx_EmojiPicker_item_wrapper"
-                        />
-                    ))}
-                </Toolbar>
-            </section>
-        );
-    }
-}
-
-export default QuickReactions;
diff --git a/apps/web/src/components/views/emojipicker/ReactionPicker.tsx b/apps/web/src/components/views/emojipicker/ReactionPicker.tsx
index 11b3d9468a..19ed2a5385 100644
--- a/apps/web/src/components/views/emojipicker/ReactionPicker.tsx
+++ b/apps/web/src/components/views/emojipicker/ReactionPicker.tsx
@@ -10,12 +10,12 @@ Please see LICENSE files in the repository root for full details.
 import React from "react";
 import { type MatrixEvent, EventType, RelationType, type Relations, RelationsEvent } from "matrix-js-sdk/src/matrix";
 
-import EmojiPicker from "./EmojiPicker";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import dis from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
 import RoomContext from "../../../contexts/RoomContext";
 import { type FocusComposerPayload } from "../../../dispatcher/payloads/FocusComposerPayload";
+import { EmojiPickerWithRecents } from "../../../emojipicker/EmojiPickerWithRecents";
 
 interface IProps {
     mxEvent: MatrixEvent;
@@ -125,7 +125,7 @@ class ReactionPicker extends React.Component<IProps, IState> {
 
     public render(): React.ReactNode {
         return (
-            <EmojiPicker
+            <EmojiPickerWithRecents
                 onChoose={this.onChoose}
                 isEmojiDisabled={this.isEmojiDisabled}
                 onFinished={this.props.onFinished}
diff --git a/apps/web/src/components/views/emojipicker/Search.tsx b/apps/web/src/components/views/emojipicker/Search.tsx
deleted file mode 100644
index 4f6ede9c06..0000000000
--- a/apps/web/src/components/views/emojipicker/Search.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-Copyright 2019 Tulir Asokan <tulir@maunium.net>
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { type JSX } from "react";
-import { CloseIcon, SearchIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-
-import { _t } from "../../../languageHandler";
-import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
-import { getKeyBindingsManager } from "../../../KeyBindingsManager";
-import { RovingTabIndexContext } from "../../../accessibility/RovingTabIndex";
-
-interface IProps {
-    query: string;
-    onChange(value: string): void;
-    onEnter(): void;
-    onKeyDown(event: React.KeyboardEvent): void;
-}
-
-class Search extends React.PureComponent<IProps> {
-    public static contextType = RovingTabIndexContext;
-    declare public context: React.ContextType<typeof RovingTabIndexContext>;
-
-    private inputRef = React.createRef<HTMLInputElement>();
-
-    public componentDidMount(): void {
-        // For some reason, neither the autoFocus nor just calling focus() here worked, so here's a window.setTimeout
-        window.setTimeout(() => this.inputRef.current?.focus(), 0);
-    }
-
-    private onKeyDown = (ev: React.KeyboardEvent): void => {
-        const action = getKeyBindingsManager().getAccessibilityAction(ev);
-        switch (action) {
-            case KeyBindingAction.Enter:
-                this.props.onEnter();
-                ev.stopPropagation();
-                ev.preventDefault();
-                break;
-
-            default:
-                this.props.onKeyDown(ev);
-        }
-    };
-
-    public render(): React.ReactNode {
-        let rightButton: JSX.Element;
-        if (this.props.query) {
-            rightButton = (
-                <button
-                    onClick={() => this.props.onChange("")}
-                    className="mx_EmojiPicker_search_clear"
-                    title={_t("emoji_picker|cancel_search_label")}
-                >
-                    <CloseIcon />
-                </button>
-            );
-        } else {
-            rightButton = (
-                <span className="mx_EmojiPicker_search_icon">
-                    <SearchIcon />
-                </span>
-            );
-        }
-
-        return (
-            <div className="mx_EmojiPicker_search">
-                <input
-                    autoFocus
-                    type="text"
-                    placeholder={_t("action|search")}
-                    aria-label={_t("action|search")}
-                    value={this.props.query}
-                    onChange={(ev) => this.props.onChange(ev.target.value)}
-                    onKeyDown={this.onKeyDown}
-                    ref={this.inputRef}
-                    // Setting aria-activedescendant on the input allows screen readers to identify the active emoji.
-                    // Setting it when there is not a query causes screen readers to read out the first emoji when focusing the input, and it continually tells you you are in the table vs the input.
-                    aria-activedescendant={this.props.query ? this.context.state.activeNode?.id : undefined}
-                    aria-controls="mx_EmojiPicker_body"
-                    aria-haspopup="grid"
-                    aria-autocomplete="list"
-                />
-                {rightButton}
-            </div>
-        );
-    }
-}
-
-export default Search;
diff --git a/apps/web/src/components/views/location/LocationButton.tsx b/apps/web/src/components/views/location/LocationButton.tsx
index 79385a35b8..0f02689b7d 100644
--- a/apps/web/src/components/views/location/LocationButton.tsx
+++ b/apps/web/src/components/views/location/LocationButton.tsx
@@ -12,9 +12,8 @@ import { type RoomMember, type IEventRelation } from "matrix-js-sdk/src/matrix";
 import { LocationPinIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
-import { CollapsibleButton } from "../rooms/CollapsibleButton";
+import { CollapsibleButton, OverflowMenuContext } from "../rooms/CollapsibleButton";
 import { aboveLeftOf, useContextMenu, type MenuProps } from "../../structures/ContextMenu";
-import { OverflowMenuContext } from "../rooms/MessageComposerButtons";
 import LocationShareMenu from "./LocationShareMenu";
 
 export interface IProps {
diff --git a/apps/web/src/components/views/location/LocationViewDialog.tsx b/apps/web/src/components/views/location/LocationViewDialog.tsx
index ad975a0100..11366d0230 100644
--- a/apps/web/src/components/views/location/LocationViewDialog.tsx
+++ b/apps/web/src/components/views/location/LocationViewDialog.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { type MatrixEvent, type MatrixClient } from "matrix-js-sdk/src/matrix";
+import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
 
 import BaseDialog from "../dialogs/BaseDialog";
 import { locationEventGeoUri, isSelfLocation } from "../../../utils/location";
@@ -16,7 +16,6 @@ import SmartMarker from "./SmartMarker";
 import ZoomButtons from "./ZoomButtons";
 
 interface IProps {
-    matrixClient: MatrixClient;
     mxEvent: MatrixEvent;
     onFinished(): void;
 }
diff --git a/apps/web/src/components/views/location/Map.tsx b/apps/web/src/components/views/location/Map.tsx
index cb6f64ad83..23d8911b85 100644
--- a/apps/web/src/components/views/location/Map.tsx
+++ b/apps/web/src/components/views/location/Map.tsx
@@ -163,7 +163,7 @@ const MapComponent: React.FC<MapProps> = ({
 }) => {
     const { map, bodyId } = useMapWithStyle({ centerGeoUri, onError, id, interactive, bounds, allowGeolocate });
 
-    const onMapClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>): void => {
+    const onMapClick = (event: React.MouseEvent<HTMLDivElement>): void => {
         // Eat click events when clicking the attribution button
         const target = event.target as Element;
         if (target.classList.contains("maplibregl-ctrl-attrib-button")) {
@@ -174,6 +174,8 @@ const MapComponent: React.FC<MapProps> = ({
     };
 
     return (
+        // We break the rule here as this is a mouse-only interaction
+        // oxlint-disable-next-line jsx-a11y/click-events-have-key-events
         <div className={classNames("mx_Map", className)} id={bodyId} onClick={onMapClick}>
             {!!children && !!map && children({ map })}
         </div>
diff --git a/apps/web/src/components/views/location/MapError.tsx b/apps/web/src/components/views/location/MapError.tsx
index e2059f9cd1..8716d7a1ba 100644
--- a/apps/web/src/components/views/location/MapError.tsx
+++ b/apps/web/src/components/views/location/MapError.tsx
@@ -24,6 +24,8 @@ export interface MapErrorProps {
 }
 
 export const MapError: React.FC<MapErrorProps> = ({ error, isMinimised, className, onFinished, onClick }) => (
+    // We break the rule here as this is a mouse-only interaction
+    // oxlint-disable-next-line jsx-a11y/click-events-have-key-events
     <div
         data-testid="map-rendering-error"
         className={classNames("mx_MapError", className, { mx_MapError_isMinimised: isMinimised })}
diff --git a/apps/web/src/components/views/location/MapFallback.tsx b/apps/web/src/components/views/location/MapFallback.tsx
index d6b5f8e18e..25082a5532 100644
--- a/apps/web/src/components/views/location/MapFallback.tsx
+++ b/apps/web/src/components/views/location/MapFallback.tsx
@@ -10,7 +10,7 @@ import React from "react";
 import classNames from "classnames";
 import LocationMarkerIcon from "@vector-im/compound-design-tokens/assets/web/icons/location-pin-solid";
 
-import { Icon as MapFallbackImage } from "../../../../res/img/location/map.svg";
+import MapFallbackImage from "../../../../res/img/location/map.svg?react";
 import Spinner from "../elements/Spinner";
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
diff --git a/apps/web/src/components/views/location/Marker.tsx b/apps/web/src/components/views/location/Marker.tsx
index 8502580c2e..ca845d1415 100644
--- a/apps/web/src/components/views/location/Marker.tsx
+++ b/apps/web/src/components/views/location/Marker.tsx
@@ -39,13 +39,15 @@ const OptionalTooltip: React.FC<{
 
     const show = (): void => setIsVisible(true);
     const hide = (): void => setIsVisible(false);
-    const toggleVisibility = (e: React.MouseEvent<HTMLDivElement, MouseEvent>): void => {
+    const toggleVisibility = (e: React.MouseEvent<HTMLDivElement>): void => {
         // stop map from zooming in on click
         e.stopPropagation();
         setIsVisible(!isVisible);
     };
 
     return (
+        // We break the rule here as this is a mouse-only interaction
+        // oxlint-disable-next-line jsx-a11y/click-events-have-key-events
         <div onMouseEnter={show} onClick={toggleVisibility} onMouseLeave={hide}>
             {children}
             {isVisible && tooltip}
diff --git a/apps/web/src/components/views/messages/CallEvent.tsx b/apps/web/src/components/views/messages/CallEvent.tsx
index b7eb0be699..85677bda8d 100644
--- a/apps/web/src/components/views/messages/CallEvent.tsx
+++ b/apps/web/src/components/views/messages/CallEvent.tsx
@@ -18,7 +18,7 @@ import type { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPaylo
 import { Action } from "../../../dispatcher/actions";
 import AccessibleButton, { type AccessibleButtonKind, type ButtonEvent } from "../elements/AccessibleButton";
 import MemberAvatar from "../avatars/MemberAvatar";
-import { LiveContentSummary, LiveContentType } from "../rooms/LiveContentSummary";
+import { LiveContentSummary } from "../rooms/LiveContentSummary";
 import FacePile from "../elements/FacePile";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { CallDuration, SessionDuration } from "../voip/CallDuration";
@@ -66,7 +66,6 @@ const ActiveCallEvent = ({
                             {_t("timeline|m.call|video_call_started_text", { name: senderName })}
                         </span>
                         <LiveContentSummary
-                            type={LiveContentType.Video}
                             text={_t("voip|video_call")}
                             active={false}
                             participantCount={participatingMembers.length}
diff --git a/apps/web/src/components/views/messages/CodeBlock.tsx b/apps/web/src/components/views/messages/CodeBlock.tsx
index 04916a9140..172ea82984 100644
--- a/apps/web/src/components/views/messages/CodeBlock.tsx
+++ b/apps/web/src/components/views/messages/CodeBlock.tsx
@@ -13,6 +13,8 @@ import { CollapseIcon, CopyIcon, ExpandIcon } from "@vector-im/compound-design-t
 
 import { useSettingValue } from "../../../hooks/useSettings.ts";
 import { CopyTextButton } from "../elements/CopyableText.tsx";
+import AccessibleButton from "../elements/AccessibleButton.tsx";
+import { _t } from "../../../i18n";
 
 const MAX_HIGHLIGHT_LENGTH = 4096;
 const MAX_LINES_BEFORE_COLLAPSE = 5;
@@ -26,9 +28,14 @@ const ExpandCollapseButton: React.FC<{
     onClick(this: void): void;
 }> = ({ expanded, onClick }) => {
     return (
-        <span className="mx_EventTile_button" onClick={onClick}>
+        <AccessibleButton
+            element="button"
+            title={expanded ? _t("action|collapse") : _t("action|expand")}
+            onClick={onClick}
+            className="mx_EventTile_button"
+        >
             {expanded ? <CollapseIcon /> : <ExpandIcon />}
-        </span>
+        </AccessibleButton>
     );
 };
 
diff --git a/apps/web/src/components/views/messages/EditHistoryMessage.tsx b/apps/web/src/components/views/messages/EditHistoryMessage.tsx
index ced10ce290..f12e7759a2 100644
--- a/apps/web/src/components/views/messages/EditHistoryMessage.tsx
+++ b/apps/web/src/components/views/messages/EditHistoryMessage.tsx
@@ -9,12 +9,12 @@ Please see LICENSE files in the repository root for full details.
 import React, { createRef } from "react";
 import { type EventStatus, type IContent, type MatrixEvent, MatrixEventEvent, MsgType } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
-import { ActionBarView, EventContentBodyView } from "@element-hq/web-shared-components";
+import { ActionBarView, EventContentBodyView, MessageTimestampView } from "@element-hq/web-shared-components";
 
 import { EditHistoryActionBarViewModel } from "../../../viewmodels/message-body/EditHistoryActionBarViewModel";
 import { EventContentBodyViewModel } from "../../../viewmodels/message-body/EventContentBodyViewModel";
+import { MessageTimestampViewModel } from "../../../viewmodels/room/timeline/event-tile/timestamp/MessageTimestampViewModel";
 import { editBodyDiffToHtml } from "../../../utils/MessageDiffUtils";
-import { formatTime } from "../../../DateUtils";
 import Modal from "../../../Modal";
 import ConfirmAndWaitRedactDialog from "../dialogs/ConfirmAndWaitRedactDialog";
 import ViewSource from "../../structures/ViewSource";
@@ -45,8 +45,9 @@ export default class EditHistoryMessage extends React.PureComponent<IProps, ISta
     declare public context: React.ContextType<typeof MatrixClientContext>;
 
     private content = createRef<HTMLDivElement>();
-    private EventContentBodyViewModel: EventContentBodyViewModel;
-    private editHistoryActionBarViewModel: EditHistoryActionBarViewModel;
+    private readonly eventContentBodyViewModel: EventContentBodyViewModel;
+    private readonly editHistoryActionBarViewModel: EditHistoryActionBarViewModel;
+    private readonly messageTimestampViewModel: MessageTimestampViewModel;
 
     public constructor(props: IProps, context: React.ContextType<typeof MatrixClientContext>) {
         super(props, context);
@@ -60,7 +61,7 @@ export default class EditHistoryMessage extends React.PureComponent<IProps, ISta
         this.state = { canRedact, sendStatus: event.getAssociatedStatus() };
 
         const mxEventContent = getReplacedContent(event);
-        this.EventContentBodyViewModel = new EventContentBodyViewModel({
+        this.eventContentBodyViewModel = new EventContentBodyViewModel({
             mxEvent: event,
             content: mxEventContent,
             highlights: [],
@@ -72,6 +73,11 @@ export default class EditHistoryMessage extends React.PureComponent<IProps, ISta
             linkify: true,
             client: cli,
         });
+        this.messageTimestampViewModel = new MessageTimestampViewModel({
+            ts: event.getTs(),
+            showTwelveHour: props.isTwelveHour,
+            inhibitTooltip: true,
+        });
 
         this.editHistoryActionBarViewModel = new EditHistoryActionBarViewModel({
             canRemove: !props.mxEvent.isRedacted() && !props.isBaseEvent && canRedact,
@@ -84,7 +90,15 @@ export default class EditHistoryMessage extends React.PureComponent<IProps, ISta
     public componentDidUpdate(prevProps: IProps): void {
         if (prevProps.mxEvent !== this.props.mxEvent) {
             const mxEventContent = getReplacedContent(this.props.mxEvent);
-            this.EventContentBodyViewModel.setEventContent(this.props.mxEvent, mxEventContent);
+            this.eventContentBodyViewModel.setEventContent(this.props.mxEvent, mxEventContent);
+        }
+
+        if (prevProps.mxEvent !== this.props.mxEvent || prevProps.isTwelveHour !== this.props.isTwelveHour) {
+            this.messageTimestampViewModel.setProps({
+                ts: this.props.mxEvent.getTs(),
+                showTwelveHour: this.props.isTwelveHour,
+                inhibitTooltip: true,
+            });
         }
 
         this.editHistoryActionBarViewModel.setProps({
@@ -129,18 +143,12 @@ export default class EditHistoryMessage extends React.PureComponent<IProps, ISta
     public componentWillUnmount(): void {
         const event = this.props.mxEvent;
         event.localRedactionEvent()?.off(MatrixEventEvent.Status, this.onAssociatedStatusChanged);
-        this.EventContentBodyViewModel.dispose();
+        this.eventContentBodyViewModel.dispose();
         this.editHistoryActionBarViewModel.dispose();
+        this.messageTimestampViewModel.dispose();
     }
 
     private renderActionBar(): React.ReactNode {
-        this.editHistoryActionBarViewModel.setProps({
-            canRemove: !this.props.mxEvent.isRedacted() && !this.props.isBaseEvent && this.state.canRedact,
-            showViewSource: SettingsStore.getValue("developerMode"),
-            onRemoveClick: this.onRedactClick,
-            onViewSourceClick: this.onViewSourceClick,
-        });
-
         return (
             <ActionBarView vm={this.editHistoryActionBarViewModel} className="mx_ThreadActionBar mx_HistoryActionBar" />
         );
@@ -157,7 +165,7 @@ export default class EditHistoryMessage extends React.PureComponent<IProps, ISta
             if (this.props.previousEdit) {
                 contentElements = editBodyDiffToHtml(getReplacedContent(this.props.previousEdit), content);
             } else {
-                contentElements = <EventContentBodyView vm={this.EventContentBodyViewModel} as="span" />;
+                contentElements = <EventContentBodyView vm={this.eventContentBodyViewModel} as="span" />;
             }
             if (mxEvent.getContent().msgtype === MsgType.Emote) {
                 const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
@@ -177,7 +185,6 @@ export default class EditHistoryMessage extends React.PureComponent<IProps, ISta
             }
         }
 
-        const timestamp = formatTime(new Date(mxEvent.getTs()), this.props.isTwelveHour);
         const isSending = ["sending", "queued", "encrypting"].includes(this.state.sendStatus!);
         const classes = classNames("mx_EventTile", {
             // Note: we keep the `sending` state class for tests, not for our styles
@@ -187,7 +194,7 @@ export default class EditHistoryMessage extends React.PureComponent<IProps, ISta
             <li>
                 <div className={classes}>
                     <div className="mx_EventTile_line">
-                        <span className="mx_MessageTimestamp">{timestamp}</span>
+                        <MessageTimestampView vm={this.messageTimestampViewModel} className="mx_MessageTimestamp" />
                         {contentContainer}
                         {this.renderActionBar()}
                     </div>
diff --git a/apps/web/src/components/views/messages/MAudioBody.tsx b/apps/web/src/components/views/messages/MAudioBody.tsx
index 3ffcf7abe9..9172b63147 100644
--- a/apps/web/src/components/views/messages/MAudioBody.tsx
+++ b/apps/web/src/components/views/messages/MAudioBody.tsx
@@ -22,6 +22,7 @@ import MediaProcessingError from "./shared/MediaProcessingError";
 import { AudioPlayerViewModel } from "../../../viewmodels/room/timeline/event-tile/body/AudioPlayerViewModel";
 import { FileBodyFactory, renderMBody } from "./MBodyFactory";
 import { ContentScanRejectedError } from "../../../utils/ContentScanner";
+import { presentableTextForFile } from "../../../utils/FileUtils";
 
 interface IState {
     error?: unknown;
@@ -111,7 +112,14 @@ export default class MAudioBody extends React.PureComponent<IBodyProps, IState>
         // At this point we should have a playable state
         return (
             <span className="mx_MAudioBody">
-                <AudioPlayer playback={this.state.playback} mediaName={this.props.mxEvent.getContent().body} />
+                <AudioPlayer
+                    playback={this.state.playback}
+                    mediaName={presentableTextForFile(
+                        this.props.mxEvent.getContent<MediaEventContent>(),
+                        undefined,
+                        false,
+                    )}
+                />
                 {this.showFileBody && renderMBody({ ...this.props, showFileInfo: false }, FileBodyFactory)}
             </span>
         );
diff --git a/apps/web/src/components/views/messages/MBodyFactory.tsx b/apps/web/src/components/views/messages/MBodyFactory.tsx
index deb10cd822..2dc73bf86e 100644
--- a/apps/web/src/components/views/messages/MBodyFactory.tsx
+++ b/apps/web/src/components/views/messages/MBodyFactory.tsx
@@ -7,9 +7,11 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type JSX, type RefObject, useContext, useEffect, useRef } from "react";
 import { MsgType } from "matrix-js-sdk/src/matrix";
+import { type ImageContent } from "matrix-js-sdk/src/types";
 import {
     DecryptionFailureBodyView,
     FileBodyView,
+    ImageBodyView,
     RedactedBodyView,
     VideoBodyView,
     useCreateAutoDisposedViewModel,
@@ -19,10 +21,14 @@ import { type IBodyProps } from "./IBodyProps";
 import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
 import { LocalDeviceVerificationStateContext } from "../../../contexts/LocalDeviceVerificationStateContext";
 import { useMediaVisible } from "../../../hooks/useMediaVisible";
+import { useSettingValue } from "../../../hooks/useSettings";
 import { DecryptionFailureBodyViewModel } from "../../../viewmodels/room/timeline/event-tile/body/DecryptionFailureBodyViewModel";
 import { FileBodyViewModel } from "../../../viewmodels/message-body/FileBodyViewModel";
+import { ImageBodyViewModel } from "../../../viewmodels/message-body/ImageBodyViewModel";
 import { RedactedBodyViewModel } from "../../../viewmodels/message-body/RedactedBodyViewModel";
+import { getRedactedBodyViewModelProps } from "../../../viewmodels/room/timeline/event-tile/EventTileRedactedBodyState";
 import { VideoBodyViewModel } from "../../../viewmodels/message-body/VideoBodyViewModel";
+import { isMimeTypeAllowed } from "../../../utils/blobs";
 
 type MBodyComponent = React.ComponentType<IBodyProps>;
 
@@ -134,12 +140,130 @@ export function VideoBodyFactory({
     );
 }
 
-export function RedactedBodyFactory({ mxEvent, ref }: Pick<IBodyProps, "mxEvent" | "ref">): JSX.Element {
-    const vm = useCreateAutoDisposedViewModel(() => new RedactedBodyViewModel({ mxEvent }));
+export function ImageBodyFactory({
+    mxEvent,
+    mediaEventHelper,
+    forExport,
+    maxImageHeight,
+    permalinkCreator,
+    showFileInfo,
+}: Readonly<
+    Pick<
+        IBodyProps,
+        "mxEvent" | "mediaEventHelper" | "forExport" | "maxImageHeight" | "permalinkCreator" | "showFileInfo"
+    >
+>): JSX.Element {
+    const { timelineRenderingType } = useContext(RoomContext);
+    const [mediaVisible, setMediaVisible] = useMediaVisible(mxEvent);
+    const imageRef = useRef<HTMLImageElement>(null);
+    const content = mxEvent.getContent<ImageContent>();
+    const shouldFallbackToFileBody =
+        mediaEventHelper?.media.isEncrypted === true &&
+        !isMimeTypeAllowed(content.info?.mimetype ?? "") &&
+        !content.info?.thumbnail_info;
+
+    const vm = useCreateAutoDisposedViewModel(
+        () =>
+            new ImageBodyViewModel({
+                mxEvent,
+                mediaEventHelper,
+                forExport,
+                maxImageHeight,
+                mediaVisible,
+                permalinkCreator,
+                timelineRenderingType,
+                imageRef,
+                setMediaVisible,
+            }),
+    );
 
     useEffect(() => {
-        vm.setEvent(mxEvent);
-    }, [mxEvent, vm]);
+        if (shouldFallbackToFileBody) return;
+        vm.loadInitialMediaIfVisible();
+    }, [shouldFallbackToFileBody, vm]);
+
+    useEffect(() => {
+        if (shouldFallbackToFileBody) return;
+        vm.setEvent(mxEvent, mediaEventHelper);
+    }, [mediaEventHelper, mxEvent, shouldFallbackToFileBody, vm]);
+
+    useEffect(() => {
+        if (shouldFallbackToFileBody) return;
+        vm.setForExport(forExport);
+    }, [forExport, shouldFallbackToFileBody, vm]);
+
+    useEffect(() => {
+        if (shouldFallbackToFileBody) return;
+        vm.setMaxImageHeight(maxImageHeight);
+    }, [maxImageHeight, shouldFallbackToFileBody, vm]);
+
+    useEffect(() => {
+        if (shouldFallbackToFileBody) return;
+        vm.setMediaVisible(mediaVisible);
+    }, [mediaVisible, shouldFallbackToFileBody, vm]);
+
+    useEffect(() => {
+        if (shouldFallbackToFileBody) return;
+        vm.setPermalinkCreator(permalinkCreator);
+    }, [permalinkCreator, shouldFallbackToFileBody, vm]);
+
+    useEffect(() => {
+        if (shouldFallbackToFileBody) return;
+        vm.setTimelineRenderingType(timelineRenderingType);
+    }, [shouldFallbackToFileBody, timelineRenderingType, vm]);
+
+    useEffect(() => {
+        if (shouldFallbackToFileBody) return;
+        vm.setSetMediaVisible(setMediaVisible);
+    }, [setMediaVisible, shouldFallbackToFileBody, vm]);
+
+    const showFileBody =
+        !forExport &&
+        timelineRenderingType !== TimelineRenderingType.Room &&
+        timelineRenderingType !== TimelineRenderingType.Pinned &&
+        timelineRenderingType !== TimelineRenderingType.Search &&
+        timelineRenderingType !== TimelineRenderingType.Thread &&
+        timelineRenderingType !== TimelineRenderingType.ThreadsList;
+
+    if (shouldFallbackToFileBody) {
+        return (
+            <FileBodyFactory
+                mxEvent={mxEvent}
+                mediaEventHelper={mediaEventHelper}
+                forExport={forExport}
+                showFileInfo={showFileInfo}
+            />
+        );
+    }
+
+    return (
+        <ImageBodyView
+            vm={vm}
+            className="mx_ImageBody"
+            containerClassName="mx_ImageBody_container"
+            imageClassName="mx_ImageBody_image"
+            imageRef={imageRef}
+        >
+            {showFileBody ? (
+                <FileBodyFactory
+                    mxEvent={mxEvent}
+                    mediaEventHelper={mediaEventHelper}
+                    forExport={forExport}
+                    showFileInfo={false}
+                />
+            ) : null}
+        </ImageBodyView>
+    );
+}
+
+export function RedactedBodyFactory({ mxEvent, ref }: Pick<IBodyProps, "mxEvent" | "ref">): JSX.Element {
+    const showTwelveHour = useSettingValue("showTwelveHourTimestamps");
+    const props = getRedactedBodyViewModelProps(mxEvent, showTwelveHour);
+    const vm = useCreateAutoDisposedViewModel(() => new RedactedBodyViewModel(props));
+
+    useEffect(() => {
+        vm.setProps(getRedactedBodyViewModelProps(mxEvent, showTwelveHour));
+    }, [mxEvent, showTwelveHour, vm]);
 
     return <RedactedBodyView vm={vm} ref={ref} className="mx_RedactedBody" />;
 }
@@ -164,6 +288,7 @@ export function DecryptionFailureBodyFactory({ mxEvent, ref }: Pick<IBodyProps,
 
 // Message body factory registry for bodies that already route through view-model-backed wrappers.
 const MESSAGE_BODY_TYPES = new Map<string, MBodyComponent>([
+    [MsgType.Image, ImageBodyFactory],
     [MsgType.File, FileBodyFactory],
     [MsgType.Video, VideoBodyFactory],
 ]);
@@ -171,7 +296,7 @@ const MESSAGE_BODY_TYPES = new Map<string, MBodyComponent>([
 // Render a body using the picked factory.
 // Falls back to the provided factory when msgtype has no specific handler.
 export function renderMBody(props: IBodyProps, fallbackFactory?: MBodyComponent): JSX.Element | null {
-    const BodyType = MESSAGE_BODY_TYPES.get(props.mxEvent.getContent().msgtype as string) ?? fallbackFactory;
+    const BodyType = MESSAGE_BODY_TYPES.get(props.mxEvent.getContent().msgtype!) ?? fallbackFactory;
     if (!BodyType) {
         return null;
     }
diff --git a/apps/web/src/components/views/messages/MImageBody.tsx b/apps/web/src/components/views/messages/MImageBody.tsx
deleted file mode 100644
index 90af0e078a..0000000000
--- a/apps/web/src/components/views/messages/MImageBody.tsx
+++ /dev/null
@@ -1,717 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2015-2021 The Matrix.org Foundation C.I.C.
-Copyright 2018, 2019 Michael Telatynski <7t3chguy@gmail.com>
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { type JSX, type ComponentProps, createRef, type ReactNode } from "react";
-import { Blurhash } from "react-blurhash";
-import classNames from "classnames";
-import { CSSTransition, SwitchTransition } from "react-transition-group";
-import { logger } from "matrix-js-sdk/src/logger";
-import { ClientEvent } from "matrix-js-sdk/src/matrix";
-import { type ImageContent } from "matrix-js-sdk/src/types";
-import { Tooltip } from "@vector-im/compound-web";
-import { ImageErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-import { HiddenMediaPlaceholder } from "@element-hq/web-shared-components";
-
-import Modal from "../../../Modal";
-import { _t } from "../../../languageHandler";
-import SettingsStore from "../../../settings/SettingsStore";
-import Spinner from "../elements/Spinner";
-import { type Media, mediaFromContent } from "../../../customisations/Media";
-import { BLURHASH_FIELD, createThumbnail } from "../../../utils/image-media";
-import ImageView from "../elements/ImageView";
-import { type IBodyProps } from "./IBodyProps";
-import { type ImageSize, suggestedSize as suggestedImageSize } from "../../../settings/enums/ImageSize";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
-import { blobIsAnimated, mayBeAnimated } from "../../../utils/Image";
-import { presentableTextForFile } from "../../../utils/FileUtils";
-import { createReconnectedListener } from "../../../utils/connection";
-import MediaProcessingError from "./shared/MediaProcessingError";
-import { DecryptError, DownloadError } from "../../../utils/DecryptFile";
-import { ContentScanRejectedError } from "../../../utils/ContentScanner";
-import { useMediaVisible } from "../../../hooks/useMediaVisible";
-import { isMimeTypeAllowed } from "../../../utils/blobs.ts";
-import { FileBodyFactory, renderMBody } from "./MBodyFactory";
-
-enum Placeholder {
-    NoImage,
-    Blurhash,
-}
-
-interface IState {
-    contentUrl: string | null;
-    thumbUrl: string | null;
-    isAnimated?: boolean;
-    error?: unknown;
-    imgError: boolean;
-    imgLoaded: boolean;
-    loadedImageDimensions?: {
-        naturalWidth: number;
-        naturalHeight: number;
-    };
-    hover: boolean;
-    focus: boolean;
-    placeholder: Placeholder;
-}
-
-interface IProps extends IBodyProps {
-    /**
-     * Should the media be behind a preview.
-     */
-    mediaVisible: boolean;
-    /**
-     * Set the visibility of the media event.
-     * @param visible Should the event be visible.
-     */
-    setMediaVisible: (visible: boolean) => void;
-}
-
-/**
- * @private Only use for inheritance. Use the default export for presentation.
- */
-export class MImageBodyInner extends React.Component<IProps, IState> {
-    public static contextType = RoomContext;
-    declare public context: React.ContextType<typeof RoomContext>;
-
-    private unmounted = false;
-    private image = createRef<HTMLImageElement>();
-    private placeholder = createRef<HTMLDivElement>();
-    private timeout?: number;
-    private sizeWatcher?: string;
-
-    public state: IState = {
-        contentUrl: null,
-        thumbUrl: null,
-        imgError: false,
-        imgLoaded: false,
-        hover: false,
-        focus: false,
-        placeholder: Placeholder.NoImage,
-    };
-
-    protected onClick = (ev: React.MouseEvent): void => {
-        if (ev.button === 0 && !ev.metaKey) {
-            ev.preventDefault();
-            if (!this.props.mediaVisible) {
-                this.props.setMediaVisible(true);
-                return;
-            }
-
-            const content = this.props.mxEvent.getContent<ImageContent>();
-
-            let httpUrl = this.state.contentUrl;
-            if (
-                this.props.mediaEventHelper?.media.isEncrypted &&
-                !isMimeTypeAllowed(this.props.mediaEventHelper.sourceBlob.cachedValue?.type ?? "")
-            ) {
-                // contentUrl will be a blob URI mime-type=application/octet-stream so fall back to the thumbUrl instead
-                httpUrl = this.state.thumbUrl;
-            }
-
-            if (!httpUrl) return;
-            const params: Omit<ComponentProps<typeof ImageView>, "onFinished"> = {
-                src: httpUrl,
-                name: content.body && content.body.length > 0 ? content.body : _t("common|attachment"),
-                mxEvent: this.props.mxEvent,
-                permalinkCreator: this.props.permalinkCreator,
-            };
-
-            if (content.info) {
-                params.width = content.info.w;
-                params.height = content.info.h;
-                params.fileSize = content.info.size;
-            }
-
-            if (this.image.current) {
-                const clientRect = this.image.current.getBoundingClientRect();
-
-                params.thumbnailInfo = {
-                    width: clientRect.width,
-                    height: clientRect.height,
-                    positionX: clientRect.x,
-                    positionY: clientRect.y,
-                };
-            }
-
-            Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", undefined, true);
-        }
-    };
-
-    private get shouldAutoplay(): boolean {
-        return !(
-            !this.state.contentUrl ||
-            !this.props.mediaVisible ||
-            !this.state.isAnimated ||
-            SettingsStore.getValue("autoplayGifs")
-        );
-    }
-
-    protected onImageEnter = (): void => {
-        this.setState({ hover: true });
-    };
-
-    protected onImageLeave = (): void => {
-        this.setState({ hover: false });
-    };
-
-    private onFocus = (): void => {
-        this.setState({ focus: true });
-    };
-
-    private onBlur = (): void => {
-        this.setState({ focus: false });
-    };
-
-    private reconnectedListener = createReconnectedListener((): void => {
-        MatrixClientPeg.get()?.off(ClientEvent.Sync, this.reconnectedListener);
-        this.setState({ imgError: false });
-    });
-
-    private onImageError = (): void => {
-        // If the thumbnail failed to load then try again using the contentUrl
-        if (this.state.thumbUrl) {
-            this.setState({
-                thumbUrl: null,
-            });
-            return;
-        }
-
-        this.clearBlurhashTimeout();
-        this.setState({
-            imgError: true,
-        });
-        MatrixClientPeg.safeGet().on(ClientEvent.Sync, this.reconnectedListener);
-    };
-
-    private onImageLoad = (): void => {
-        this.clearBlurhashTimeout();
-
-        let loadedImageDimensions: IState["loadedImageDimensions"];
-
-        if (this.image.current) {
-            const { naturalWidth, naturalHeight } = this.image.current;
-            // this is only used as a fallback in case content.info.w/h is missing
-            loadedImageDimensions = { naturalWidth, naturalHeight };
-        }
-        this.setState({ imgLoaded: true, loadedImageDimensions });
-    };
-
-    private getContentUrl(): string | null {
-        // During export, the content url will point to the MSC, which will later point to a local url
-        if (this.props.forExport) return this.media.srcMxc;
-        return this.media.srcHttp;
-    }
-
-    private get media(): Media {
-        return mediaFromContent(this.props.mxEvent.getContent());
-    }
-
-    private getThumbUrl(): string | null {
-        // FIXME: we let images grow as wide as you like, rather than capped to 800x600.
-        // So either we need to support custom timeline widths here, or reimpose the cap, otherwise the
-        // thumbnail resolution will be unnecessarily reduced.
-        // custom timeline widths seems preferable.
-        const thumbWidth = 800;
-        const thumbHeight = 600;
-
-        const content = this.props.mxEvent.getContent<ImageContent>();
-        const media = mediaFromContent(content);
-        const info = content.info;
-
-        if (info?.mimetype === "image/svg+xml" && media.hasThumbnail) {
-            // Special-case to return clientside sender-generated thumbnails for SVGs, if any,
-            // given we deliberately don't thumbnail them serverside to prevent billion lol attacks and similar.
-            return media.getThumbnailHttp(thumbWidth, thumbHeight, "scale");
-        }
-
-        // we try to download the correct resolution for hi-res images (like retina screenshots).
-        // Synapse only supports 800x600 thumbnails for now though,
-        // so we'll need to download the original image for this to work  well for now.
-        // First, let's try a few cases that let us avoid downloading the original, including:
-        //   - When displaying a GIF, we always want to thumbnail so that we can
-        //     properly respect the user's GIF autoplay setting (which relies on
-        //     thumbnailing to produce the static preview image)
-        //   - On a low DPI device, always thumbnail to save bandwidth
-        //   - If there's no sizing info in the event, default to thumbnail
-        if (this.state.isAnimated || window.devicePixelRatio === 1.0 || !info || !info.w || !info.h || !info.size) {
-            return media.getThumbnailOfSourceHttp(thumbWidth, thumbHeight);
-        }
-
-        // We should only request thumbnails if the image is bigger than 800x600 (or 1600x1200 on retina) otherwise
-        // the image in the timeline will just end up resampled and de-retina'd for no good reason.
-        // Ideally the server would pre-gen 1600x1200 thumbnails in order to provide retina thumbnails,
-        // but we don't do this currently in synapse for fear of disk space.
-        // As a compromise, let's switch to non-retina thumbnails only if the original image is both
-        // physically too large and going to be massive to load in the timeline (e.g. >1MB).
-
-        const isLargerThanThumbnail = info.w > thumbWidth || info.h > thumbHeight;
-        const isLargeFileSize = info.size > 1 * 1024 * 1024; // 1mb
-
-        if (isLargeFileSize && isLargerThanThumbnail) {
-            // image is too large physically and byte-wise to clutter our timeline so,
-            // we ask for a thumbnail, despite knowing that it will be max 800x600
-            // despite us being retina (as synapse doesn't do 1600x1200 thumbs yet).
-            return media.getThumbnailOfSourceHttp(thumbWidth, thumbHeight);
-        }
-
-        // download the original image otherwise, so we can scale it client side to take pixelRatio into account.
-        return media.srcHttp;
-    }
-
-    private async downloadImage(): Promise<void> {
-        if (this.state.contentUrl) return; // already downloaded
-
-        let thumbUrl: string | null;
-        let contentUrl: string | null;
-        if (this.props.mediaEventHelper?.media.isEncrypted) {
-            try {
-                [contentUrl, thumbUrl] = await Promise.all([
-                    this.props.mediaEventHelper.sourceUrl.value,
-                    this.props.mediaEventHelper.thumbnailUrl.value,
-                ]);
-            } catch (error) {
-                if (this.unmounted) return;
-
-                if (error instanceof DecryptError) {
-                    logger.error("Unable to decrypt attachment: ", error);
-                } else if (error instanceof DownloadError) {
-                    logger.error("Unable to download attachment to decrypt it: ", error);
-                } else {
-                    logger.error("Error encountered when downloading encrypted attachment: ", error);
-                }
-
-                // Set a placeholder image when we can't decrypt the image.
-                this.setState({ error });
-                return;
-            }
-        } else {
-            thumbUrl = this.getThumbUrl();
-            contentUrl = this.getContentUrl();
-        }
-
-        const content = this.props.mxEvent.getContent<ImageContent>();
-        let isAnimated = content.info?.["org.matrix.msc4230.is_animated"] ?? mayBeAnimated(content.info?.mimetype);
-
-        // If there is no included non-animated thumbnail then we will generate our own, we can't depend on the server
-        // because 1. encryption and 2. we can't ask the server specifically for a non-animated thumbnail.
-        if (isAnimated && !SettingsStore.getValue("autoplayGifs")) {
-            if (!thumbUrl || !content?.info?.thumbnail_info || mayBeAnimated(content.info.thumbnail_info.mimetype)) {
-                const img = document.createElement("img");
-                const loadPromise = new Promise((resolve, reject) => {
-                    img.onload = resolve;
-                    img.onerror = reject;
-                });
-                img.crossOrigin = "Anonymous"; // CORS allow canvas access
-                img.src = contentUrl ?? "";
-
-                try {
-                    await loadPromise;
-                } catch (error) {
-                    logger.error("Unable to download attachment: ", error);
-                    this.setState({ error: error as Error });
-                    return;
-                }
-
-                try {
-                    // If we didn't receive the MSC4230 is_animated flag
-                    // then we need to check if the image is animated by downloading it.
-                    if (
-                        content.info?.["org.matrix.msc4230.is_animated"] === false ||
-                        (await blobIsAnimated(await this.props.mediaEventHelper!.sourceBlob.value)) === false
-                    ) {
-                        isAnimated = false;
-                    }
-
-                    if (isAnimated) {
-                        const thumb = await createThumbnail(
-                            img,
-                            img.width,
-                            img.height,
-                            content.info?.mimetype ?? "image/jpeg",
-                            false,
-                        );
-                        thumbUrl = URL.createObjectURL(thumb.thumbnail);
-                    }
-                } catch (error) {
-                    // This is a non-critical failure, do not surface the error or bail the method here
-                    logger.warn("Unable to generate thumbnail for animated image: ", error);
-                }
-            }
-        }
-
-        if (this.unmounted) return;
-        this.setState({
-            contentUrl,
-            thumbUrl,
-            isAnimated,
-        });
-    }
-
-    private clearBlurhashTimeout(): void {
-        if (this.timeout) {
-            clearTimeout(this.timeout);
-            this.timeout = undefined;
-        }
-    }
-
-    public componentDidMount(): void {
-        this.unmounted = false;
-
-        if (this.props.mediaVisible) {
-            // noinspection JSIgnoredPromiseFromCall
-            this.downloadImage();
-        }
-
-        // Add a 150ms timer for blurhash to first appear.
-        if (this.props.mxEvent.getContent().info?.[BLURHASH_FIELD]) {
-            this.clearBlurhashTimeout();
-            this.timeout = window.setTimeout(() => {
-                if (!this.state.imgLoaded || !this.state.imgError) {
-                    this.setState({
-                        placeholder: Placeholder.Blurhash,
-                    });
-                }
-            }, 150);
-        }
-
-        this.sizeWatcher = SettingsStore.watchSetting("Images.size", null, () => {
-            this.forceUpdate(); // we don't really have a reliable thing to update, so just update the whole thing
-        });
-    }
-
-    public componentDidUpdate(prevProps: Readonly<IProps>): void {
-        if (!prevProps.mediaVisible && this.props.mediaVisible) {
-            // noinspection JSIgnoredPromiseFromCall
-            this.downloadImage();
-        }
-    }
-
-    public componentWillUnmount(): void {
-        this.unmounted = true;
-        MatrixClientPeg.get()?.off(ClientEvent.Sync, this.reconnectedListener);
-        this.clearBlurhashTimeout();
-        SettingsStore.unwatchSetting(this.sizeWatcher);
-        if (this.state.isAnimated && this.state.thumbUrl) {
-            URL.revokeObjectURL(this.state.thumbUrl);
-        }
-    }
-
-    protected getBanner(content: ImageContent): ReactNode {
-        // Hide it for the threads list & the file panel where we show it as text anyway.
-        if (
-            [TimelineRenderingType.ThreadsList, TimelineRenderingType.File].includes(this.context.timelineRenderingType)
-        ) {
-            return null;
-        }
-
-        return (
-            <span className="mx_MImageBody_banner">
-                {presentableTextForFile(content, _t("common|image"), true, true)}
-            </span>
-        );
-    }
-
-    protected messageContent(
-        contentUrl: string | null,
-        thumbUrl: string | null,
-        content: ImageContent,
-        forcedHeight?: number,
-    ): ReactNode {
-        if (!thumbUrl) thumbUrl = contentUrl; // fallback
-
-        // magic number
-        // edge case for this not to be set by conditions below
-        let infoWidth = 500;
-        let infoHeight = 500;
-        let infoSvg = false;
-
-        if (content.info?.w && content.info?.h) {
-            infoWidth = content.info.w;
-            infoHeight = content.info.h;
-            infoSvg = content.info.mimetype === "image/svg+xml";
-        } else if (thumbUrl && contentUrl) {
-            // Whilst the image loads, display nothing. We also don't display a blurhash image
-            // because we don't really know what size of image we'll end up with.
-            //
-            // Once loaded, use the loaded image dimensions stored in `loadedImageDimensions`.
-            //
-            // By doing this, the image "pops" into the timeline, but is still restricted
-            // by the same width and height logic below.
-            if (!this.state.loadedImageDimensions) {
-                let imageElement: JSX.Element;
-                if (!this.props.mediaVisible) {
-                    imageElement = (
-                        <HiddenMediaPlaceholder onClick={this.onClick}>
-                            {_t("timeline|m.image|show_image")}
-                        </HiddenMediaPlaceholder>
-                    );
-                } else {
-                    imageElement = (
-                        <img
-                            style={{ display: "none" }}
-                            src={thumbUrl}
-                            ref={this.image}
-                            alt={content.body}
-                            onError={this.onImageError}
-                            onLoad={this.onImageLoad}
-                        />
-                    );
-                }
-                return this.wrapImage(contentUrl, imageElement);
-            }
-            infoWidth = this.state.loadedImageDimensions.naturalWidth;
-            infoHeight = this.state.loadedImageDimensions.naturalHeight;
-        }
-
-        // The maximum size of the thumbnail as it is rendered as an <img>,
-        // accounting for any height constraints
-        const { w: maxWidth, h: maxHeight } = suggestedImageSize(
-            SettingsStore.getValue("Images.size") as ImageSize,
-            { w: infoWidth, h: infoHeight },
-            forcedHeight ?? this.props.maxImageHeight,
-        );
-
-        let img: JSX.Element | undefined;
-        let placeholder: JSX.Element | undefined;
-        let gifLabel: JSX.Element | undefined;
-
-        if (!this.props.forExport && !this.state.imgLoaded) {
-            const classes = classNames("mx_MImageBody_placeholder", {
-                "mx_MImageBody_placeholder--blurhash": this.props.mxEvent.getContent().info?.[BLURHASH_FIELD],
-            });
-
-            placeholder = (
-                <div className={classes} ref={this.placeholder}>
-                    {this.getPlaceholder(maxWidth, maxHeight)}
-                </div>
-            );
-        }
-
-        let showPlaceholder = Boolean(placeholder);
-
-        const hoverOrFocus = this.state.hover || this.state.focus;
-        if (thumbUrl && !this.state.imgError) {
-            let url = thumbUrl;
-            if (hoverOrFocus && this.shouldAutoplay) {
-                url = this.state.contentUrl!;
-            }
-
-            // Restrict the width of the thumbnail here, otherwise it will fill the container
-            // which has the same width as the timeline
-            // mx_MImageBody_thumbnail resizes img to exactly container size
-            img = (
-                <img
-                    className="mx_MImageBody_thumbnail"
-                    src={url}
-                    ref={this.image}
-                    alt={content.body}
-                    onError={this.onImageError}
-                    onLoad={this.onImageLoad}
-                    onMouseEnter={this.onImageEnter}
-                    onMouseLeave={this.onImageLeave}
-                />
-            );
-        }
-
-        if (!this.props.mediaVisible) {
-            img = (
-                <div style={{ width: maxWidth, height: maxHeight }}>
-                    <HiddenMediaPlaceholder onClick={this.onClick}>
-                        {_t("timeline|m.image|show_image")}
-                    </HiddenMediaPlaceholder>
-                </div>
-            );
-            showPlaceholder = false; // because we're hiding the image, so don't show the placeholder.
-        }
-
-        if (this.state.isAnimated && !SettingsStore.getValue("autoplayGifs") && !hoverOrFocus) {
-            // XXX: Arguably we may want a different label when the animated image is WEBP and not GIF
-            gifLabel = <p className="mx_MImageBody_gifLabel">GIF</p>;
-        }
-
-        let banner: ReactNode | undefined;
-        if (this.props.mediaVisible && hoverOrFocus) {
-            banner = this.getBanner(content);
-        }
-
-        // many SVGs don't have an intrinsic size if used in <img> elements.
-        // due to this we have to set our desired width directly.
-        // this way if the image is forced to shrink, the height adapts appropriately.
-        const sizing = infoSvg ? { maxHeight, maxWidth, width: maxWidth } : { maxHeight, maxWidth };
-
-        if (!this.props.forExport) {
-            placeholder = (
-                <SwitchTransition mode="out-in">
-                    <CSSTransition
-                        classNames="mx_rtg--fade"
-                        key={`img-${showPlaceholder}`}
-                        timeout={300}
-                        nodeRef={this.placeholder}
-                    >
-                        {
-                            showPlaceholder ? (
-                                placeholder
-                            ) : (
-                                <div ref={this.placeholder} />
-                            ) /* Transition always expects a child */
-                        }
-                    </CSSTransition>
-                </SwitchTransition>
-            );
-        }
-
-        const tooltipProps = this.getTooltipProps();
-        let thumbnail = (
-            <div
-                className="mx_MImageBody_thumbnail_container"
-                style={{ maxHeight, maxWidth, aspectRatio: `${infoWidth}/${infoHeight}` }}
-                tabIndex={tooltipProps ? 0 : undefined}
-            >
-                {placeholder}
-
-                <div style={sizing}>
-                    {img}
-                    {gifLabel}
-                    {banner}
-                </div>
-
-                {/* HACK: This div fills out space while the image loads, to prevent scroll jumps */}
-                {!this.props.forExport && !this.state.imgLoaded && !placeholder && (
-                    <div style={{ height: maxHeight, width: maxWidth }} />
-                )}
-            </div>
-        );
-
-        if (tooltipProps) {
-            // We specify isTriggerInteractive=true and make the div interactive manually as a workaround for
-            // https://github.com/element-hq/compound/issues/294
-            thumbnail = (
-                <Tooltip {...tooltipProps} isTriggerInteractive={true}>
-                    {thumbnail}
-                </Tooltip>
-            );
-        }
-
-        return this.wrapImage(contentUrl, thumbnail);
-    }
-
-    // Overridden by MStickerBody
-    protected wrapImage(contentUrl: string | null | undefined, children: JSX.Element): ReactNode {
-        if (contentUrl) {
-            return (
-                <a
-                    href={contentUrl}
-                    target={this.props.forExport ? "_blank" : undefined}
-                    onClick={this.onClick}
-                    onFocus={this.onFocus}
-                    onBlur={this.onBlur}
-                >
-                    {children}
-                </a>
-            );
-        }
-        return children;
-    }
-
-    // Overridden by MStickerBody
-    protected getPlaceholder(width: number, height: number): ReactNode {
-        const blurhash = this.props.mxEvent.getContent().info?.[BLURHASH_FIELD];
-
-        if (blurhash) {
-            if (this.state.placeholder === Placeholder.NoImage) {
-                return null;
-            } else if (this.state.placeholder === Placeholder.Blurhash) {
-                return <Blurhash className="mx_Blurhash" hash={blurhash} width={width} height={height} />;
-            }
-        }
-        return <Spinner size={32} />;
-    }
-
-    // Overridden by MStickerBody
-    protected getTooltipProps(): ComponentProps<typeof Tooltip> | null {
-        return null;
-    }
-
-    // Overridden by MStickerBody
-    protected getFileBody(): ReactNode {
-        if (this.props.forExport) return null;
-        /*
-         * In the room timeline or the thread context we don't need the download
-         * link as the message action bar will fulfill that
-         */
-        const hasMessageActionBar =
-            this.context.timelineRenderingType === TimelineRenderingType.Room ||
-            this.context.timelineRenderingType === TimelineRenderingType.Pinned ||
-            this.context.timelineRenderingType === TimelineRenderingType.Search ||
-            this.context.timelineRenderingType === TimelineRenderingType.Thread ||
-            this.context.timelineRenderingType === TimelineRenderingType.ThreadsList;
-        if (!hasMessageActionBar) {
-            return renderMBody({ ...this.props, showFileInfo: false }, FileBodyFactory);
-        }
-    }
-
-    public render(): React.ReactNode {
-        const content = this.props.mxEvent.getContent<ImageContent>();
-
-        // Fall back to file-body view if we are unable to render this image e.g. in the case of a blob svg
-        if (
-            this.props.mediaEventHelper?.media.isEncrypted &&
-            !isMimeTypeAllowed(content.info?.mimetype ?? "") &&
-            !content.info?.thumbnail_info
-        ) {
-            return renderMBody(this.props, FileBodyFactory);
-        }
-
-        if (this.state.error) {
-            let errorText = _t("timeline|m.image|error");
-            if (this.state.error instanceof DecryptError) {
-                errorText = _t("timeline|m.image|error_decrypting");
-            } else if (this.state.error instanceof DownloadError) {
-                errorText = _t("timeline|m.image|error_downloading");
-            } else if (this.state.error instanceof ContentScanRejectedError) {
-                errorText = _t("timeline|m.image|error_scan_rejected");
-            }
-
-            return (
-                <MediaProcessingError className="mx_MImageBody" Icon={ImageErrorIcon}>
-                    {errorText}
-                </MediaProcessingError>
-            );
-        }
-
-        let contentUrl = this.state.contentUrl;
-        let thumbUrl: string | null;
-        if (this.props.forExport) {
-            contentUrl = this.props.mxEvent.getContent().url ?? this.props.mxEvent.getContent().file?.url;
-            thumbUrl = contentUrl;
-        } else if (this.state.isAnimated && SettingsStore.getValue("autoplayGifs")) {
-            thumbUrl = contentUrl;
-        } else {
-            thumbUrl = this.state.thumbUrl ?? this.state.contentUrl;
-        }
-
-        const thumbnail = this.messageContent(contentUrl, thumbUrl, content);
-        const fileBody = this.getFileBody();
-
-        return (
-            <div className="mx_MImageBody">
-                {thumbnail}
-                {fileBody}
-            </div>
-        );
-    }
-}
-
-// Wrap MImageBody component so we can use a hook here.
-const MImageBody: React.FC<IBodyProps> = (props) => {
-    const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent);
-    return <MImageBodyInner mediaVisible={mediaVisible} setMediaVisible={setVisible} {...props} />;
-};
-
-export default MImageBody;
diff --git a/apps/web/src/components/views/messages/MImageReplyBody.tsx b/apps/web/src/components/views/messages/MImageReplyBody.tsx
index 5f04df724d..7b8389f7be 100644
--- a/apps/web/src/components/views/messages/MImageReplyBody.tsx
+++ b/apps/web/src/components/views/messages/MImageReplyBody.tsx
@@ -6,16 +6,622 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX } from "react";
+import React, { type JSX, type ComponentProps, createRef, type ReactNode } from "react";
+import { Blurhash } from "react-blurhash";
+import classNames from "classnames";
+import { CSSTransition, SwitchTransition } from "react-transition-group";
+import { logger } from "matrix-js-sdk/src/logger";
+import { ClientEvent } from "matrix-js-sdk/src/matrix";
 import { type ImageContent } from "matrix-js-sdk/src/types";
+import { Tooltip } from "@vector-im/compound-web";
+import { ImageErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { HiddenMediaPlaceholder } from "@element-hq/web-shared-components";
 
-import { MImageBodyInner } from "./MImageBody";
+import Modal from "../../../Modal";
+import { _t } from "../../../languageHandler";
+import SettingsStore from "../../../settings/SettingsStore";
+import Spinner from "../elements/Spinner";
+import { type Media, mediaFromContent } from "../../../customisations/Media";
+import { BLURHASH_FIELD, createThumbnail } from "../../../utils/image-media";
+import ImageView from "../elements/ImageView";
 import { type IBodyProps } from "./IBodyProps";
+import { suggestedSize as suggestedImageSize } from "../../../settings/enums/ImageSize";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
+import { blobIsAnimated, mayBeAnimated } from "../../../utils/Image";
+import { presentableTextForFile } from "../../../utils/FileUtils";
+import { createReconnectedListener } from "../../../utils/connection";
+import MediaProcessingError from "./shared/MediaProcessingError";
+import { DecryptError, DownloadError } from "../../../utils/DecryptFile";
 import { useMediaVisible } from "../../../hooks/useMediaVisible";
+import { isMimeTypeAllowed } from "../../../utils/blobs.ts";
+import { FileBodyFactory, renderMBody } from "./MBodyFactory";
+
+enum Placeholder {
+    NoImage,
+    Blurhash,
+}
+
+interface IState {
+    contentUrl: string | null;
+    thumbUrl: string | null;
+    isAnimated?: boolean;
+    error?: unknown;
+    imgError: boolean;
+    imgLoaded: boolean;
+    loadedImageDimensions?: {
+        naturalWidth: number;
+        naturalHeight: number;
+    };
+    hover: boolean;
+    focus: boolean;
+    placeholder: Placeholder;
+}
+
+export interface ImageBodyBaseProps extends IBodyProps {
+    mediaVisible: boolean;
+    setMediaVisible: (visible: boolean) => void;
+}
+
+export class ImageBodyBaseInner extends React.Component<ImageBodyBaseProps, IState> {
+    public static contextType = RoomContext;
+    declare public context: React.ContextType<typeof RoomContext>;
+
+    private unmounted = false;
+    private image = createRef<HTMLImageElement>();
+    private placeholder = createRef<HTMLDivElement>();
+    private timeout?: number;
+    private sizeWatcher?: string;
+
+    public state: IState = {
+        contentUrl: null,
+        thumbUrl: null,
+        imgError: false,
+        imgLoaded: false,
+        hover: false,
+        focus: false,
+        placeholder: Placeholder.NoImage,
+    };
+
+    protected onClick = (ev: React.MouseEvent): void => {
+        if (ev.button === 0 && !ev.metaKey) {
+            ev.preventDefault();
+            if (!this.props.mediaVisible) {
+                this.props.setMediaVisible(true);
+                return;
+            }
+
+            const content = this.props.mxEvent.getContent<ImageContent>();
+
+            let httpUrl = this.state.contentUrl;
+            if (
+                this.props.mediaEventHelper?.media.isEncrypted &&
+                !isMimeTypeAllowed(this.props.mediaEventHelper.sourceBlob.cachedValue?.type ?? "")
+            ) {
+                httpUrl = this.state.thumbUrl;
+            }
+
+            if (!httpUrl) return;
+            const params: Omit<ComponentProps<typeof ImageView>, "onFinished"> = {
+                src: httpUrl,
+                name: content.body && content.body.length > 0 ? content.body : _t("common|attachment"),
+                mxEvent: this.props.mxEvent,
+                permalinkCreator: this.props.permalinkCreator,
+            };
+
+            if (content.info) {
+                params.width = content.info.w;
+                params.height = content.info.h;
+                params.fileSize = content.info.size;
+            }
+
+            if (this.image.current) {
+                const clientRect = this.image.current.getBoundingClientRect();
+
+                params.thumbnailInfo = {
+                    width: clientRect.width,
+                    height: clientRect.height,
+                    positionX: clientRect.x,
+                    positionY: clientRect.y,
+                };
+            }
+
+            Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", undefined, true);
+        }
+    };
+
+    private get shouldAutoplay(): boolean {
+        return !(
+            !this.state.contentUrl ||
+            !this.props.mediaVisible ||
+            !this.state.isAnimated ||
+            SettingsStore.getValue("autoplayGifs")
+        );
+    }
+
+    protected onImageEnter = (): void => {
+        this.setState({ hover: true });
+    };
+
+    protected onImageLeave = (): void => {
+        this.setState({ hover: false });
+    };
+
+    private onFocus = (): void => {
+        this.setState({ focus: true });
+    };
+
+    private onBlur = (): void => {
+        this.setState({ focus: false });
+    };
+
+    private reconnectedListener = createReconnectedListener((): void => {
+        MatrixClientPeg.get()?.off(ClientEvent.Sync, this.reconnectedListener);
+        this.setState({ imgError: false });
+    });
+
+    private onImageError = (): void => {
+        if (this.state.thumbUrl) {
+            this.setState({
+                thumbUrl: null,
+            });
+            return;
+        }
+
+        this.clearBlurhashTimeout();
+        this.setState({
+            imgError: true,
+        });
+        MatrixClientPeg.safeGet().on(ClientEvent.Sync, this.reconnectedListener);
+    };
+
+    private onImageLoad = (): void => {
+        this.clearBlurhashTimeout();
+
+        let loadedImageDimensions: IState["loadedImageDimensions"];
+
+        if (this.image.current) {
+            const { naturalWidth, naturalHeight } = this.image.current;
+            loadedImageDimensions = { naturalWidth, naturalHeight };
+        }
+        this.setState({ imgLoaded: true, loadedImageDimensions });
+    };
+
+    private getContentUrl(): string | null {
+        if (this.props.forExport) return this.media.srcMxc;
+        return this.media.srcHttp;
+    }
+
+    private get media(): Media {
+        return mediaFromContent(this.props.mxEvent.getContent());
+    }
+
+    private getThumbUrl(): string | null {
+        const thumbWidth = 800;
+        const thumbHeight = 600;
+
+        const content = this.props.mxEvent.getContent<ImageContent>();
+        const media = mediaFromContent(content);
+        const info = content.info;
+
+        if (info?.mimetype === "image/svg+xml" && media.hasThumbnail) {
+            return media.getThumbnailHttp(thumbWidth, thumbHeight, "scale");
+        }
+
+        if (this.state.isAnimated || window.devicePixelRatio === 1.0 || !info || !info.w || !info.h || !info.size) {
+            return media.getThumbnailOfSourceHttp(thumbWidth, thumbHeight);
+        }
+
+        const isLargerThanThumbnail = info.w > thumbWidth || info.h > thumbHeight;
+        const isLargeFileSize = info.size > 1 * 1024 * 1024;
+
+        if (isLargeFileSize && isLargerThanThumbnail) {
+            return media.getThumbnailOfSourceHttp(thumbWidth, thumbHeight);
+        }
+
+        return media.srcHttp;
+    }
+
+    private async downloadImage(): Promise<void> {
+        if (this.state.contentUrl) return;
+
+        let thumbUrl: string | null;
+        let contentUrl: string | null;
+        if (this.props.mediaEventHelper?.media.isEncrypted) {
+            try {
+                [contentUrl, thumbUrl] = await Promise.all([
+                    this.props.mediaEventHelper.sourceUrl.value,
+                    this.props.mediaEventHelper.thumbnailUrl.value,
+                ]);
+            } catch (error) {
+                if (this.unmounted) return;
+
+                if (error instanceof DecryptError) {
+                    logger.error("Unable to decrypt attachment: ", error);
+                } else if (error instanceof DownloadError) {
+                    logger.error("Unable to download attachment to decrypt it: ", error);
+                } else {
+                    logger.error("Error encountered when downloading encrypted attachment: ", error);
+                }
+
+                this.setState({ error });
+                return;
+            }
+        } else {
+            thumbUrl = this.getThumbUrl();
+            contentUrl = this.getContentUrl();
+        }
+
+        const content = this.props.mxEvent.getContent<ImageContent>();
+        let isAnimated = content.info?.["org.matrix.msc4230.is_animated"] ?? mayBeAnimated(content.info?.mimetype);
+
+        if (isAnimated && !SettingsStore.getValue("autoplayGifs")) {
+            if (!thumbUrl || !content?.info?.thumbnail_info || mayBeAnimated(content.info.thumbnail_info.mimetype)) {
+                const img = document.createElement("img");
+                const loadPromise = new Promise((resolve, reject) => {
+                    img.onload = resolve;
+                    img.onerror = reject;
+                });
+                img.crossOrigin = "Anonymous";
+                img.src = contentUrl ?? "";
+
+                try {
+                    await loadPromise;
+                } catch (error) {
+                    logger.error("Unable to download attachment: ", error);
+                    this.setState({ error: error as Error });
+                    return;
+                }
+
+                try {
+                    if (
+                        content.info?.["org.matrix.msc4230.is_animated"] === false ||
+                        (await blobIsAnimated(await this.props.mediaEventHelper!.sourceBlob.value)) === false
+                    ) {
+                        isAnimated = false;
+                    }
+
+                    if (isAnimated) {
+                        const thumb = await createThumbnail(
+                            img,
+                            img.width,
+                            img.height,
+                            content.info?.mimetype ?? "image/jpeg",
+                            false,
+                        );
+                        thumbUrl = URL.createObjectURL(thumb.thumbnail);
+                    }
+                } catch (error) {
+                    logger.warn("Unable to generate thumbnail for animated image: ", error);
+                }
+            }
+        }
+
+        if (this.unmounted) return;
+        this.setState({
+            contentUrl,
+            thumbUrl,
+            isAnimated,
+        });
+    }
+
+    private clearBlurhashTimeout(): void {
+        if (this.timeout) {
+            clearTimeout(this.timeout);
+            this.timeout = undefined;
+        }
+    }
+
+    public componentDidMount(): void {
+        this.unmounted = false;
+
+        if (this.props.mediaVisible) {
+            void this.downloadImage();
+        }
+
+        if (this.props.mxEvent.getContent().info?.[BLURHASH_FIELD]) {
+            this.clearBlurhashTimeout();
+            this.timeout = window.setTimeout(() => {
+                if (!this.state.imgLoaded || !this.state.imgError) {
+                    this.setState({
+                        placeholder: Placeholder.Blurhash,
+                    });
+                }
+            }, 150);
+        }
+
+        this.sizeWatcher = SettingsStore.watchSetting("Images.size", null, () => {
+            this.forceUpdate();
+        });
+    }
+
+    public componentDidUpdate(prevProps: Readonly<ImageBodyBaseProps>): void {
+        if (!prevProps.mediaVisible && this.props.mediaVisible) {
+            void this.downloadImage();
+        }
+    }
+
+    public componentWillUnmount(): void {
+        this.unmounted = true;
+        MatrixClientPeg.get()?.off(ClientEvent.Sync, this.reconnectedListener);
+        this.clearBlurhashTimeout();
+        SettingsStore.unwatchSetting(this.sizeWatcher);
+        if (this.state.isAnimated && this.state.thumbUrl) {
+            URL.revokeObjectURL(this.state.thumbUrl);
+        }
+    }
+
+    protected getBanner(content: ImageContent): ReactNode {
+        if (
+            [TimelineRenderingType.ThreadsList, TimelineRenderingType.File].includes(this.context.timelineRenderingType)
+        ) {
+            return null;
+        }
+
+        return (
+            <span className="mx_MImageBody_banner">
+                {presentableTextForFile(content, _t("common|image"), true, true)}
+            </span>
+        );
+    }
+
+    protected messageContent(
+        contentUrl: string | null,
+        thumbUrl: string | null,
+        content: ImageContent,
+        forcedHeight?: number,
+    ): ReactNode {
+        if (!thumbUrl) thumbUrl = contentUrl;
+
+        let infoWidth = 500;
+        let infoHeight = 500;
+        let infoSvg = false;
+
+        if (content.info?.w && content.info?.h) {
+            infoWidth = content.info.w;
+            infoHeight = content.info.h;
+            infoSvg = content.info.mimetype === "image/svg+xml";
+        } else if (thumbUrl && contentUrl) {
+            if (!this.state.loadedImageDimensions) {
+                let imageElement: JSX.Element;
+                if (!this.props.mediaVisible) {
+                    imageElement = (
+                        <HiddenMediaPlaceholder onClick={this.onClick}>
+                            {_t("timeline|m.image|show_image")}
+                        </HiddenMediaPlaceholder>
+                    );
+                } else {
+                    imageElement = (
+                        <img
+                            style={{ display: "none" }}
+                            src={thumbUrl}
+                            ref={this.image}
+                            alt={content.body}
+                            onError={this.onImageError}
+                            onLoad={this.onImageLoad}
+                        />
+                    );
+                }
+                return this.wrapImage(contentUrl, imageElement);
+            }
+            infoWidth = this.state.loadedImageDimensions.naturalWidth;
+            infoHeight = this.state.loadedImageDimensions.naturalHeight;
+        }
+
+        const { w: maxWidth, h: maxHeight } = suggestedImageSize(
+            SettingsStore.getValue("Images.size"),
+            { w: infoWidth, h: infoHeight },
+            forcedHeight ?? this.props.maxImageHeight,
+        );
+
+        let img: JSX.Element | undefined;
+        let placeholder: JSX.Element | undefined;
+        let gifLabel: JSX.Element | undefined;
+
+        if (!this.props.forExport && !this.state.imgLoaded) {
+            const classes = classNames("mx_MImageBody_placeholder", {
+                "mx_MImageBody_placeholder--blurhash": this.props.mxEvent.getContent().info?.[BLURHASH_FIELD],
+            });
+
+            placeholder = (
+                <div className={classes} ref={this.placeholder}>
+                    {this.getPlaceholder(maxWidth, maxHeight)}
+                </div>
+            );
+        }
+
+        let showPlaceholder = Boolean(placeholder);
+
+        const hoverOrFocus = this.state.hover || this.state.focus;
+        if (thumbUrl && !this.state.imgError) {
+            let url = thumbUrl;
+            if (hoverOrFocus && this.shouldAutoplay) {
+                url = this.state.contentUrl!;
+            }
+
+            img = (
+                <img
+                    className="mx_MImageBody_thumbnail"
+                    src={url}
+                    ref={this.image}
+                    alt={content.body}
+                    onError={this.onImageError}
+                    onLoad={this.onImageLoad}
+                    onMouseEnter={this.onImageEnter}
+                    onMouseLeave={this.onImageLeave}
+                />
+            );
+        }
+
+        if (!this.props.mediaVisible) {
+            img = (
+                <div style={{ width: maxWidth, height: maxHeight }}>
+                    <HiddenMediaPlaceholder onClick={this.onClick}>
+                        {_t("timeline|m.image|show_image")}
+                    </HiddenMediaPlaceholder>
+                </div>
+            );
+            showPlaceholder = false;
+        }
+
+        if (this.state.isAnimated && !SettingsStore.getValue("autoplayGifs") && !hoverOrFocus) {
+            gifLabel = <p className="mx_MImageBody_gifLabel">GIF</p>;
+        }
+
+        let banner: ReactNode | undefined;
+        if (this.props.mediaVisible && hoverOrFocus) {
+            banner = this.getBanner(content);
+        }
+
+        const sizing = infoSvg ? { maxHeight, maxWidth, width: maxWidth } : { maxHeight, maxWidth };
+
+        if (!this.props.forExport) {
+            placeholder = (
+                <SwitchTransition mode="out-in">
+                    <CSSTransition
+                        classNames="mx_rtg--fade"
+                        key={`img-${showPlaceholder}`}
+                        timeout={300}
+                        nodeRef={this.placeholder}
+                    >
+                        {showPlaceholder ? placeholder : <div ref={this.placeholder} />}
+                    </CSSTransition>
+                </SwitchTransition>
+            );
+        }
+
+        const tooltipProps = this.getTooltipProps();
+        let thumbnail = (
+            <div
+                className="mx_MImageBody_thumbnail_container"
+                style={{ maxHeight, maxWidth, aspectRatio: `${infoWidth}/${infoHeight}` }}
+                // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                tabIndex={tooltipProps ? 0 : undefined}
+            >
+                {placeholder}
+
+                <div style={sizing}>
+                    {img}
+                    {gifLabel}
+                    {banner}
+                </div>
+
+                {!this.props.forExport && !this.state.imgLoaded && !placeholder && (
+                    <div style={{ height: maxHeight, width: maxWidth }} />
+                )}
+            </div>
+        );
+
+        if (tooltipProps) {
+            thumbnail = (
+                <Tooltip {...tooltipProps} isTriggerInteractive={true}>
+                    {thumbnail}
+                </Tooltip>
+            );
+        }
+
+        return this.wrapImage(contentUrl, thumbnail);
+    }
+
+    protected wrapImage(contentUrl: string | null | undefined, children: JSX.Element): ReactNode {
+        if (contentUrl) {
+            return (
+                <a
+                    href={contentUrl}
+                    target={this.props.forExport ? "_blank" : undefined}
+                    onClick={this.onClick}
+                    onFocus={this.onFocus}
+                    onBlur={this.onBlur}
+                >
+                    {children}
+                </a>
+            );
+        }
+        return children;
+    }
+
+    protected getPlaceholder(width: number, height: number): ReactNode {
+        const blurhash = this.props.mxEvent.getContent().info?.[BLURHASH_FIELD];
+
+        if (blurhash) {
+            if (this.state.placeholder === Placeholder.NoImage) {
+                return null;
+            } else if (this.state.placeholder === Placeholder.Blurhash) {
+                return <Blurhash className="mx_Blurhash" hash={blurhash} width={width} height={height} />;
+            }
+        }
+        return <Spinner size={32} />;
+    }
+
+    protected getTooltipProps(): ComponentProps<typeof Tooltip> | null {
+        return null;
+    }
+
+    protected getFileBody(): ReactNode {
+        if (this.props.forExport) return null;
+        const hasMessageActionBar =
+            this.context.timelineRenderingType === TimelineRenderingType.Room ||
+            this.context.timelineRenderingType === TimelineRenderingType.Pinned ||
+            this.context.timelineRenderingType === TimelineRenderingType.Search ||
+            this.context.timelineRenderingType === TimelineRenderingType.Thread ||
+            this.context.timelineRenderingType === TimelineRenderingType.ThreadsList;
+        if (!hasMessageActionBar) {
+            return renderMBody({ ...this.props, showFileInfo: false }, FileBodyFactory);
+        }
+    }
+
+    public render(): React.ReactNode {
+        const content = this.props.mxEvent.getContent<ImageContent>();
+
+        if (
+            this.props.mediaEventHelper?.media.isEncrypted &&
+            !isMimeTypeAllowed(content.info?.mimetype ?? "") &&
+            !content.info?.thumbnail_info
+        ) {
+            return renderMBody(this.props, FileBodyFactory);
+        }
+
+        if (this.state.error) {
+            let errorText = _t("timeline|m.image|error");
+            if (this.state.error instanceof DecryptError) {
+                errorText = _t("timeline|m.image|error_decrypting");
+            } else if (this.state.error instanceof DownloadError) {
+                errorText = _t("timeline|m.image|error_downloading");
+            }
+
+            return (
+                <MediaProcessingError className="mx_MImageBody" Icon={ImageErrorIcon}>
+                    {errorText}
+                </MediaProcessingError>
+            );
+        }
+
+        let contentUrl = this.state.contentUrl;
+        let thumbUrl: string | null;
+        if (this.props.forExport) {
+            contentUrl = this.props.mxEvent.getContent().url ?? this.props.mxEvent.getContent().file?.url;
+            thumbUrl = contentUrl;
+        } else if (this.state.isAnimated && SettingsStore.getValue("autoplayGifs")) {
+            thumbUrl = contentUrl;
+        } else {
+            thumbUrl = this.state.thumbUrl ?? this.state.contentUrl;
+        }
+
+        const thumbnail = this.messageContent(contentUrl, thumbUrl, content);
+        const fileBody = this.getFileBody();
+
+        return (
+            <div className="mx_MImageBody">
+                {thumbnail}
+                {fileBody}
+            </div>
+        );
+    }
+}
 
 const FORCED_IMAGE_HEIGHT = 44;
 
-class MImageReplyBodyInner extends MImageBodyInner {
+class MImageReplyBodyInner extends ImageBodyBaseInner {
     public onClick = (ev: React.MouseEvent): void => {
         ev.preventDefault();
     };
@@ -37,6 +643,7 @@ class MImageReplyBodyInner extends MImageBodyInner {
         return <div className="mx_MImageReplyBody">{thumbnail}</div>;
     }
 }
+
 const MImageReplyBody: React.FC<IBodyProps> = (props) => {
     const [mediaVisible, setVisible] = useMediaVisible(props.mxEvent);
     return <MImageReplyBodyInner mediaVisible={mediaVisible} setMediaVisible={setVisible} {...props} />;
diff --git a/apps/web/src/components/views/messages/MJitsiWidgetEvent.tsx b/apps/web/src/components/views/messages/MJitsiWidgetEvent.tsx
deleted file mode 100644
index dfed9d4378..0000000000
--- a/apps/web/src/components/views/messages/MJitsiWidgetEvent.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { type JSX } from "react";
-import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
-import { VideoCallSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-import { EventTileBubble } from "@element-hq/web-shared-components";
-
-import { _t } from "../../../languageHandler";
-import WidgetStore from "../../../stores/WidgetStore";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import { WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
-
-interface IProps {
-    mxEvent: MatrixEvent;
-    timestamp?: JSX.Element;
-}
-
-export default class MJitsiWidgetEvent extends React.PureComponent<IProps> {
-    public render(): React.ReactNode {
-        const url = this.props.mxEvent.getContent()["url"];
-        const prevUrl = this.props.mxEvent.getPrevContent()["url"];
-        const senderName = this.props.mxEvent.sender?.name || this.props.mxEvent.getSender();
-        const room = MatrixClientPeg.safeGet().getRoom(this.props.mxEvent.getRoomId());
-        if (!room) return null;
-        const widgetId = this.props.mxEvent.getStateKey();
-        const widget = WidgetStore.instance.getRoom(room.roomId, true).widgets.find((w) => w.id === widgetId);
-
-        let joinCopy: string | null = _t("timeline|m.widget|jitsi_join_top_prompt");
-        if (widget && WidgetLayoutStore.instance.isInContainer(room, widget, "right")) {
-            joinCopy = _t("timeline|m.widget|jitsi_join_right_prompt");
-        } else if (!widget) {
-            joinCopy = null;
-        }
-
-        if (!url) {
-            // removed
-            return (
-                <EventTileBubble
-                    icon={<VideoCallSolidIcon />}
-                    className="mx_EventTileBubble mx_MJitsiWidgetEvent"
-                    title={_t("timeline|m.widget|jitsi_ended", { senderName })}
-                >
-                    {this.props.timestamp}
-                </EventTileBubble>
-            );
-        } else if (prevUrl) {
-            // modified
-            return (
-                <EventTileBubble
-                    icon={<VideoCallSolidIcon />}
-                    className="mx_EventTileBubble mx_MJitsiWidgetEvent"
-                    title={_t("timeline|m.widget|jitsi_updated", { senderName })}
-                    subtitle={joinCopy}
-                >
-                    {this.props.timestamp}
-                </EventTileBubble>
-            );
-        } else {
-            // assume added
-            return (
-                <EventTileBubble
-                    icon={<VideoCallSolidIcon />}
-                    className="mx_EventTileBubble mx_MJitsiWidgetEvent"
-                    title={_t("timeline|m.widget|jitsi_started", { senderName })}
-                    subtitle={joinCopy}
-                >
-                    {this.props.timestamp}
-                </EventTileBubble>
-            );
-        }
-    }
-}
diff --git a/apps/web/src/components/views/messages/MKeyVerificationRequest.tsx b/apps/web/src/components/views/messages/MKeyVerificationRequest.tsx
deleted file mode 100644
index 6765f330da..0000000000
--- a/apps/web/src/components/views/messages/MKeyVerificationRequest.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2019, 2020 , 2023 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { type JSX } from "react";
-import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
-import { LockSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-import { EventTileBubble } from "@element-hq/web-shared-components";
-
-import { _t } from "../../../languageHandler";
-import { getNameForEventRoom, userLabelForEventRoom } from "../../../utils/KeyVerificationStateObserver";
-import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
-
-interface Props {
-    mxEvent: MatrixEvent;
-    timestamp?: JSX.Element;
-}
-
-interface MKeyVerificationRequestContent {
-    body?: string;
-    format?: string;
-    formatted_body?: string;
-    from_device: string;
-    methods: Array<string>;
-    msgtype: "m.key.verification.request";
-    to: string;
-}
-
-/**
- * Event tile created when we receive an m.key.verification.request event.
- *
- * Displays a simple message saying that a verification was requested, either by
- * this user or someone else.
- *
- * EventTileFactory has logic meaning we only display this tile if the request
- * was sent to/from this user.
- */
-const MKeyVerificationRequest: React.FC<Props> = ({ mxEvent, timestamp }) => {
-    const client = useMatrixClientContext();
-
-    if (!client) {
-        throw new Error("Attempting to render verification request without a client context!");
-    }
-
-    const myUserId = client.getSafeUserId();
-    const content: MKeyVerificationRequestContent = mxEvent.getContent();
-    const sender = mxEvent.getSender();
-    const receiver = content.to;
-    const roomId = mxEvent.getRoomId();
-
-    if (!sender) {
-        throw new Error("Verification request did not include a sender!");
-    }
-    if (!roomId) {
-        throw new Error("Verification request did not include a room ID!");
-    }
-
-    let title: string;
-    let subtitle: string;
-
-    const sentByMe = sender === myUserId;
-    if (sentByMe) {
-        title = _t("timeline|m.key.verification.request|you_started");
-        subtitle = userLabelForEventRoom(client, receiver, roomId);
-    } else {
-        const name = getNameForEventRoom(client, sender, roomId);
-        title = _t("timeline|m.key.verification.request|user_wants_to_verify", { name });
-        subtitle = userLabelForEventRoom(client, sender, roomId);
-    }
-
-    return (
-        <EventTileBubble
-            icon={<LockSolidIcon />}
-            className="mx_EventTileBubble mx_cryptoEvent"
-            title={title}
-            subtitle={subtitle}
-        >
-            {timestamp}
-        </EventTileBubble>
-    );
-};
-
-export default MKeyVerificationRequest;
diff --git a/apps/web/src/components/views/messages/MLocationBody.tsx b/apps/web/src/components/views/messages/MLocationBody.tsx
index abf7e0f507..5dbc4afca4 100644
--- a/apps/web/src/components/views/messages/MLocationBody.tsx
+++ b/apps/web/src/components/views/messages/MLocationBody.tsx
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { useMemo } from "react";
 import { type MatrixEvent, ClientEvent, type ClientEventHandlerMap } from "matrix-js-sdk/src/matrix";
 import { secureRandomString } from "matrix-js-sdk/src/randomstring";
 import { Tooltip } from "@vector-im/compound-web";
@@ -53,7 +53,6 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
         Modal.createDialog(
             LocationViewDialog,
             {
-                matrixClient: this.context,
                 mxEvent: this.props.mxEvent,
             },
             "mx_LocationViewDialog_wrapper",
@@ -132,6 +131,9 @@ export const LocationBodyContent: React.FC<LocationBodyContentProps> = ({
     onError,
     onClick,
 }) => {
+    // Find the message panel boundary so the tooltip hides when it would overlap the composer
+    const boundaryEl = useMemo(() => document.querySelector<HTMLElement>(".mx_RoomView_messagePanel") ?? undefined, []);
+
     // only pass member to marker when should render avatar marker
     const markerRoomMember = isSelfLocation(mxEvent.getContent()) ? mxEvent.sender : undefined;
     const geoUri = locationEventGeoUri(mxEvent);
@@ -151,7 +153,7 @@ export const LocationBodyContent: React.FC<LocationBodyContentProps> = ({
 
     return (
         <div className="mx_MLocationBody">
-            <Tooltip label={tooltip}>
+            <Tooltip label={tooltip} boundary={boundaryEl}>
                 <div className="mx_MLocationBody_map">{mapElement}</div>
             </Tooltip>
         </div>
diff --git a/apps/web/src/components/views/messages/MPollBody.tsx b/apps/web/src/components/views/messages/MPollBody.tsx
index 83b7f5c415..e925726a2a 100644
--- a/apps/web/src/components/views/messages/MPollBody.tsx
+++ b/apps/web/src/components/views/messages/MPollBody.tsx
@@ -409,8 +409,8 @@ export function allVotes(voteRelations: Relations): Array<UserVote> {
  */
 export function collectUserVotes(
     userResponses: Array<UserVote>,
-    userId?: string | null | undefined,
-    selected?: string | null | undefined,
+    userId?: string | null,
+    selected?: string | null,
 ): Map<string, UserVote> {
     const userVotes: Map<string, UserVote> = new Map();
 
diff --git a/apps/web/src/components/views/messages/MStickerBody.tsx b/apps/web/src/components/views/messages/MStickerBody.tsx
index f0beea72aa..fe6dd4ef55 100644
--- a/apps/web/src/components/views/messages/MStickerBody.tsx
+++ b/apps/web/src/components/views/messages/MStickerBody.tsx
@@ -9,15 +9,16 @@ import React, { type JSX, type ComponentProps, type ReactNode } from "react";
 import { type Tooltip } from "@vector-im/compound-web";
 import { type MediaEventContent } from "matrix-js-sdk/src/types";
 
-import { MImageBodyInner } from "./MImageBody";
+import { ImageBodyBaseInner } from "./MImageReplyBody";
 import { BLURHASH_FIELD } from "../../../utils/image-media";
 import IconsShowStickersSvg from "../../../../res/img/icons-show-stickers.svg";
 import { type IBodyProps } from "./IBodyProps";
 import { useMediaVisible } from "../../../hooks/useMediaVisible";
+import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton.tsx";
 
-class MStickerBodyInner extends MImageBodyInner {
+class MStickerBodyInner extends ImageBodyBaseInner {
     // Mostly empty to prevent default behaviour of MImageBody
-    protected onClick = (ev: React.MouseEvent): void => {
+    protected onClick = (ev: ButtonEvent): void => {
         ev.preventDefault();
         if (!this.props.mediaVisible) {
             this.props.setMediaVisible(true);
@@ -27,16 +28,15 @@ class MStickerBodyInner extends MImageBodyInner {
     // MStickerBody doesn't need a wrapping `<a href=...>`, but it does need extra padding
     // which is added by mx_MStickerBody_wrapper
     protected wrapImage(contentUrl: string, children: React.ReactNode): JSX.Element {
-        let onClick: React.MouseEventHandler | undefined;
-        if (!this.props.mediaVisible) {
-            onClick = this.onClick;
+        const content = <> {children} </>;
+        if (this.props.mediaVisible) {
+            return (
+                <AccessibleButton className="mx_MStickerBody_wrapper" onClick={this.onClick}>
+                    {content}
+                </AccessibleButton>
+            );
         }
-        return (
-            <div className="mx_MStickerBody_wrapper" onClick={onClick}>
-                {" "}
-                {children}{" "}
-            </div>
-        );
+        return <div className="mx_MStickerBody_wrapper">{content}</div>;
     }
 
     // Placeholder to show in place of the sticker image if img onLoad hasn't fired yet.
diff --git a/apps/web/src/components/views/messages/MessageEvent.tsx b/apps/web/src/components/views/messages/MessageEvent.tsx
index 409a9e0f97..2705a483a9 100644
--- a/apps/web/src/components/views/messages/MessageEvent.tsx
+++ b/apps/web/src/components/views/messages/MessageEvent.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import mime from "mime";
-import React, { createRef, type JSX, useEffect } from "react";
+import React, { createRef, type JSX, useCallback, useEffect } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import {
     EventType,
@@ -25,7 +25,6 @@ import { Mjolnir } from "../../../mjolnir/Mjolnir";
 import { type IMediaBody } from "./IMediaBody";
 import { MediaEventHelper } from "../../../utils/MediaEventHelper";
 import { type IBodyProps } from "./IBodyProps";
-import MImageBody from "./MImageBody";
 import MVoiceOrAudioBody from "./MVoiceOrAudioBody";
 import MStickerBody from "./MStickerBody";
 import MPollBody from "./MPollBody";
@@ -33,9 +32,14 @@ import MLocationBody from "./MLocationBody";
 import MBeaconBody from "./MBeaconBody";
 import { type GetRelationsForEvent, type IEventTileOps } from "../rooms/EventTile";
 import { MjolnirBodyViewModel } from "../../../viewmodels/room/timeline/event-tile/body/MjolnirBodyViewModel";
+import {
+    allowMjolnirBody,
+    isMjolnirBodyAllowed,
+} from "../../../viewmodels/room/timeline/event-tile/EventTileMjolnirBodyState";
 import {
     DecryptionFailureBodyFactory,
     FileBodyFactory,
+    ImageBodyFactory,
     RedactedBodyFactory,
     VideoBodyFactory,
     renderMBody,
@@ -67,7 +71,7 @@ const baseBodyTypes = new Map<string, React.ComponentType<IBodyProps>>([
     [MsgType.Text, TextualBodyFactory],
     [MsgType.Notice, TextualBodyFactory],
     [MsgType.Emote, TextualBodyFactory],
-    [MsgType.Image, MImageBody],
+    [MsgType.Image, ImageBodyFactory],
     [MsgType.File, (props: IBodyProps) => renderMBody(props, FileBodyFactory)!],
     [MsgType.Audio, MVoiceOrAudioBody],
     [MsgType.Video, VideoBodyFactory],
@@ -81,15 +85,14 @@ const baseEvTypes = new Map<string, React.ComponentType<IBodyProps>>([
 ]);
 
 function MjolnirBodyWrappedView({ mxEvent, onMessageAllowed, ref }: IBodyProps): JSX.Element {
-    const vm = useCreateAutoDisposedViewModel(() => new MjolnirBodyViewModel({ mxEvent, onMessageAllowed }));
+    const onAllow = useCallback(() => {
+        allowMjolnirBody(mxEvent, onMessageAllowed);
+    }, [mxEvent, onMessageAllowed]);
+    const vm = useCreateAutoDisposedViewModel(() => new MjolnirBodyViewModel({ onAllow }));
 
     useEffect(() => {
-        vm.setEvent(mxEvent);
-    }, [mxEvent, vm]);
-
-    useEffect(() => {
-        vm.setOnMessageAllowed(onMessageAllowed);
-    }, [onMessageAllowed, vm]);
+        vm.setProps({ onAllow });
+    }, [onAllow, vm]);
 
     return <MjolnirBodyView vm={vm} ref={ref} />;
 }
@@ -283,7 +286,7 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
             }
 
             if (
-                ((BodyType === MImageBody || BodyType === VideoBodyFactory) &&
+                ((BodyType === ImageBodyFactory || BodyType === VideoBodyFactory) &&
                     !this.validateImageOrVideoMimetype(content)) ||
                 (BodyType === MStickerBody && !this.validateStickerMimetype(content))
             ) {
@@ -297,10 +300,7 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
         }
 
         if (SettingsStore.getValue("feature_mjolnir")) {
-            const key = `mx_mjolnir_render_${this.props.mxEvent.getRoomId()}__${this.props.mxEvent.getId()}`;
-            const allowRender = localStorage.getItem(key) === "true";
-
-            if (!allowRender) {
+            if (!isMjolnirBodyAllowed(this.props.mxEvent)) {
                 const userDomain = this.props.mxEvent.getSender()?.split(":").slice(1).join(":");
                 const userBanned = Mjolnir.sharedInstance().isUserBanned(this.props.mxEvent.getSender()!);
                 const serverBanned = userDomain && Mjolnir.sharedInstance().isServerBanned(userDomain);
diff --git a/apps/web/src/components/views/messages/RoomAvatarEvent.tsx b/apps/web/src/components/views/messages/RoomAvatarEvent.tsx
deleted file mode 100644
index c80c80c836..0000000000
--- a/apps/web/src/components/views/messages/RoomAvatarEvent.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2019 The Matrix.org Foundation C.I.C.
-Copyright 2017 Vector Creations 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 { type MatrixEvent } from "matrix-js-sdk/src/matrix";
-
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import { _t } from "../../../languageHandler";
-import Modal from "../../../Modal";
-import AccessibleButton from "../elements/AccessibleButton";
-import { mediaFromMxc } from "../../../customisations/Media";
-import RoomAvatar from "../avatars/RoomAvatar";
-import ImageView from "../elements/ImageView";
-interface IProps {
-    /* the MatrixEvent to show */
-    mxEvent: MatrixEvent;
-}
-
-export default class RoomAvatarEvent extends React.Component<IProps> {
-    private onAvatarClick = (): void => {
-        const cli = MatrixClientPeg.safeGet();
-        const ev = this.props.mxEvent;
-        const httpUrl = mediaFromMxc(ev.getContent().url).srcHttp;
-        if (!httpUrl) return;
-
-        const room = cli.getRoom(this.props.mxEvent.getRoomId());
-        const text = _t("timeline|m.room.avatar|lightbox_title", {
-            senderDisplayName: ev.sender && ev.sender.name ? ev.sender.name : ev.getSender(),
-            roomName: room ? room.name : "",
-        });
-
-        const params = {
-            src: httpUrl,
-            name: text,
-        };
-        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", undefined, true);
-    };
-
-    public render(): React.ReactNode {
-        const ev = this.props.mxEvent;
-        const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
-
-        if (!ev.getContent().url || ev.getContent().url.trim().length === 0) {
-            return <div className="mx_TextualEvent">{_t("timeline|m.room.avatar|removed", { senderDisplayName })}</div>;
-        }
-
-        const room = MatrixClientPeg.safeGet().getRoom(ev.getRoomId());
-        // Provide all arguments to RoomAvatar via oobData because the avatar is historic
-        const oobData = {
-            avatarUrl: ev.getContent().url,
-            name: room ? room.name : "",
-        };
-
-        return (
-            <>
-                {_t(
-                    "timeline|m.room.avatar|changed_img",
-                    { senderDisplayName: senderDisplayName },
-                    {
-                        img: () => (
-                            <AccessibleButton
-                                key="avatar"
-                                className="mx_RoomAvatarEvent_avatar"
-                                onClick={this.onAvatarClick}
-                            >
-                                <RoomAvatar room={room ?? undefined} size="14px" oobData={oobData} />
-                            </AccessibleButton>
-                        ),
-                    },
-                )}
-            </>
-        );
-    }
-}
diff --git a/apps/web/src/components/views/messages/SenderProfile.tsx b/apps/web/src/components/views/messages/SenderProfile.tsx
index 70ab205cc1..8bea932891 100644
--- a/apps/web/src/components/views/messages/SenderProfile.tsx
+++ b/apps/web/src/components/views/messages/SenderProfile.tsx
@@ -8,32 +8,42 @@ Please see LICENSE files in the repository root for full details.
  */
 
 import React, { type JSX, useEffect } from "react";
-import { type MatrixEvent, MsgType } from "matrix-js-sdk/src/matrix";
 import { useCreateAutoDisposedViewModel, DisambiguatedProfileView } from "@element-hq/web-shared-components";
 
-import { DisambiguatedProfileViewModel } from "../../../viewmodels/room/timeline/event-tile/DisambiguatedProfileViewModel";
-import { useRoomMemberProfile } from "../../../hooks/room/useRoomMemberProfile";
+import {
+    DisambiguatedProfileViewModel,
+    type MemberInfo,
+} from "../../../viewmodels/room/timeline/event-tile/DisambiguatedProfileViewModel";
 import { useUserStatus } from "../../../hooks/useUserStatus";
 
 interface IProps {
-    mxEvent: MatrixEvent;
+    /** Stable sender ID for the profile. */
+    senderId?: string;
+    /** Plain member data used to resolve display name, identifier, and tooltip state. */
+    member?: MemberInfo | null;
+    /** Whether the message body renders as an emote. */
+    isEmote: boolean;
+    /** Invoked when the profile is clicked. */
     onClick?(this: void): void;
+    /** Whether to show the disambiguation tooltip. */
     withTooltip?: boolean;
 }
 
-export default function SenderProfile({ mxEvent, onClick, withTooltip }: IProps): JSX.Element {
-    const sender = mxEvent.getSender();
-
-    const member = useRoomMemberProfile({
-        userId: sender,
-        member: mxEvent.sender,
-    });
-    const userStatus = useUserStatus(sender);
+/**
+ * Renders the sender identity for message and timeline views from pure render data.
+ */
+export default function SenderProfile(props: IProps): JSX.Element {
+    const senderId = props.senderId ?? props.member?.userId;
+    const member = props.member;
+    const userStatus = useUserStatus(senderId);
+    const isEmote = props.isEmote;
+    const onClick = props.onClick;
+    const withTooltip = props.withTooltip;
 
     const disambiguatedProfileVM = useCreateAutoDisposedViewModel(
         () =>
             new DisambiguatedProfileViewModel({
-                fallbackName: sender ?? "",
+                fallbackName: senderId ?? "",
                 onClick,
                 member,
                 colored: true,
@@ -47,11 +57,12 @@ export default function SenderProfile({ mxEvent, onClick, withTooltip }: IProps)
         disambiguatedProfileVM.setUserStatus(userStatus);
     }, [disambiguatedProfileVM, userStatus]);
     useEffect(() => {
-        disambiguatedProfileVM.setMember(sender ?? "", member);
-    }, [disambiguatedProfileVM, member, sender]);
-    return mxEvent.getContent().msgtype !== MsgType.Emote ? (
-        <DisambiguatedProfileView vm={disambiguatedProfileVM} className="mx_DisambiguatedProfile" />
-    ) : (
+        disambiguatedProfileVM.setMember(senderId ?? "", member);
+    }, [disambiguatedProfileVM, member, senderId]);
+
+    return isEmote ? (
         <></>
+    ) : (
+        <DisambiguatedProfileView vm={disambiguatedProfileVM} className="mx_DisambiguatedProfile" />
     );
 }
diff --git a/apps/web/src/components/views/messages/TextualBodyFactory.tsx b/apps/web/src/components/views/messages/TextualBodyFactory.tsx
index b51eebe78b..56fb20fc49 100644
--- a/apps/web/src/components/views/messages/TextualBodyFactory.tsx
+++ b/apps/web/src/components/views/messages/TextualBodyFactory.tsx
@@ -24,7 +24,6 @@ import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
 import { useMediaVisible } from "../../../hooks/useMediaVisible";
 import { TextualBodyViewModel } from "../../../viewmodels/room/timeline/event-tile/body/TextualBodyViewModel";
 import { EventContentBodyViewModel } from "../../../viewmodels/message-body/EventContentBodyViewModel";
-import { UrlPreviewGroupViewModel } from "../../../viewmodels/message-body/UrlPreviewGroupViewModel";
 import { getParentEventId } from "../../../utils/Reply";
 import Modal from "../../../Modal";
 import SettingsStore from "../../../settings/SettingsStore";
@@ -32,6 +31,9 @@ import PosthogTrackers from "../../../PosthogTrackers";
 import ImageView from "../elements/ImageView";
 import EditMessageComposer from "../rooms/EditMessageComposer";
 import { EditWysiwygComposer } from "../rooms/wysiwyg_composer";
+import { UrlPreviewGroupViewModel } from "../../../viewmodels/message-body/UrlPreviewGroupViewModel";
+import PlatformPeg from "../../../PlatformPeg";
+import { useSettingValue } from "../../../hooks/useSettings";
 
 const logger = rootLogger.getChild("TextualBodyFactory");
 
@@ -60,6 +62,7 @@ export function TextualBodyFactory(props: Readonly<IBodyProps>): JSX.Element {
     const willHaveWrapper = !!props.replacingEventId || !!props.isSeeingThroughMessageHiddenForModeration || isEmote;
     const stripReply = !props.mxEvent.replacingEvent() && !!getParentEventId(props.mxEvent);
     const contentRef = useRef<TextualBodyContentElement>(null);
+    const urlPreviewBundleEnabled = useSettingValue("feature_msc4095_url_preview_bundle");
 
     const textualBodyVm = useCreateAutoDisposedViewModel(
         () =>
@@ -119,6 +122,8 @@ export function TextualBodyFactory(props: Readonly<IBodyProps>): JSX.Element {
                     );
                 },
                 visible: props.showUrlPreview ?? false,
+                showTooltips: PlatformPeg.get()?.needsUrlTooltips() ?? true,
+                urlPreviewBundleEnabled,
             }),
     );
 
@@ -182,10 +187,16 @@ export function TextualBodyFactory(props: Readonly<IBodyProps>): JSX.Element {
     ]);
 
     useEffect(() => {
-        void urlPreviewVm.updateHidden(props.showUrlPreview ?? false, mediaVisible).catch((error) => {
-            logger.warn("UrlPreviewViewModel failed to updateHidden", error);
+        void urlPreviewVm.updateUrlPreviewVisible(props.showUrlPreview ?? false).catch((error) => {
+            logger.warn("UrlPreviewViewModel failed to updateUrlPreviewVisible", error);
         });
-    }, [props.showUrlPreview, mediaVisible, urlPreviewVm]);
+    }, [props.showUrlPreview, urlPreviewVm]);
+
+    useEffect(() => {
+        void urlPreviewVm.updateMediaVisible(mediaVisible).catch((error) => {
+            logger.warn("UrlPreviewViewModel failed to updateMediaVisible", error);
+        });
+    }, [mediaVisible, urlPreviewVm]);
 
     useEffect(() => {
         if (previews.length === 0) {
diff --git a/apps/web/src/components/views/messages/ViewSourceEvent.tsx b/apps/web/src/components/views/messages/ViewSourceEvent.tsx
deleted file mode 100644
index e7ed1f8332..0000000000
--- a/apps/web/src/components/views/messages/ViewSourceEvent.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React from "react";
-import { type MatrixEvent, MatrixEventEvent } from "matrix-js-sdk/src/matrix";
-import classNames from "classnames";
-import { CollapseIcon, ExpandIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import { _t } from "../../../languageHandler";
-import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
-
-interface IProps {
-    mxEvent: MatrixEvent;
-}
-
-interface IState {
-    expanded: boolean;
-}
-
-export default class ViewSourceEvent extends React.PureComponent<IProps, IState> {
-    public constructor(props: IProps) {
-        super(props);
-
-        this.state = {
-            expanded: false,
-        };
-    }
-
-    public componentDidMount(): void {
-        const { mxEvent } = this.props;
-
-        const client = MatrixClientPeg.safeGet();
-        client.decryptEventIfNeeded(mxEvent);
-
-        if (mxEvent.isBeingDecrypted()) {
-            mxEvent.once(MatrixEventEvent.Decrypted, () => this.forceUpdate());
-        }
-    }
-
-    private onToggle = (ev: ButtonEvent): void => {
-        ev.preventDefault();
-        const { expanded } = this.state;
-        this.setState({
-            expanded: !expanded,
-        });
-    };
-
-    public render(): React.ReactNode {
-        const { mxEvent } = this.props;
-        const { expanded } = this.state;
-
-        let content;
-        if (expanded) {
-            content = <pre>{JSON.stringify(mxEvent, null, 4)}</pre>;
-        } else {
-            content = <code>{`{ "type": ${mxEvent.getType()} }`}</code>;
-        }
-
-        const classes = classNames("mx_ViewSourceEvent mx_EventTile_content", {
-            mx_ViewSourceEvent_expanded: expanded,
-        });
-
-        return (
-            <span className={classes}>
-                {content}
-                <AccessibleButton
-                    kind="link"
-                    title={_t("devtools|toggle_event")}
-                    className="mx_ViewSourceEvent_toggle"
-                    onClick={this.onToggle}
-                >
-                    {expanded ? <CollapseIcon /> : <ExpandIcon />}
-                </AccessibleButton>
-            </span>
-        );
-    }
-}
diff --git a/apps/web/src/components/views/polls/PollOption.tsx b/apps/web/src/components/views/polls/PollOption.tsx
index 96c21ce60c..80b3cd5210 100644
--- a/apps/web/src/components/views/polls/PollOption.tsx
+++ b/apps/web/src/components/views/polls/PollOption.tsx
@@ -12,7 +12,7 @@ import { type PollAnswerSubevent } from "matrix-js-sdk/src/extensible_events_v1/
 import { CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
-import { Icon as TrophyIcon } from "../../../../res/img/element-icons/trophy.svg";
+import TrophyIcon from "../../../../res/img/element-icons/trophy.svg?react";
 import StyledRadioButton from "../elements/StyledRadioButton";
 
 type PollOptionContentProps = {
@@ -44,7 +44,7 @@ interface PollOptionProps extends PollOptionContentProps {
     children?: ReactNode;
 }
 
-const ActivePollOption: React.FC<Omit<PollOptionProps, "totalVoteCount"> & { children: ReactNode }> = ({
+const ActivePollOption: React.FC<Omit<PollOptionProps, "totalVoteCount">> = ({
     pollId,
     isChecked,
     isEnded,
@@ -112,6 +112,8 @@ export const PollOption: React.FC<PollOptionProps> = ({
     const isWinner = isEnded && isChecked;
     const answerPercent = totalVoteCount === 0 ? 0 : Math.round((100.0 * voteCount) / totalVoteCount);
     return (
+        // We break the rule here as ActivePollOption is keyboard accessible, we are just making the click target larger
+        // oxlint-disable-next-line jsx-a11y/click-events-have-key-events
         <div data-testid={`pollOption-${answer.id}`} className={cls} onClick={() => onOptionSelected?.(answer.id)}>
             <ActivePollOption
                 pollId={pollId}
diff --git a/apps/web/src/components/views/polls/pollHistory/PollHistoryList.tsx b/apps/web/src/components/views/polls/pollHistory/PollHistoryList.tsx
index 2370c80ba6..d75204bef5 100644
--- a/apps/web/src/components/views/polls/pollHistory/PollHistoryList.tsx
+++ b/apps/web/src/components/views/polls/pollHistory/PollHistoryList.tsx
@@ -129,13 +129,13 @@ export const PollHistoryList: React.FC<PollHistoryListProps> = ({
                     {pollStartEvents.map((pollStartEvent) =>
                         filter === "ACTIVE" ? (
                             <PollListItem
-                                key={pollStartEvent.getId()!}
+                                key={pollStartEvent.getId()}
                                 event={pollStartEvent}
                                 onClick={() => onItemClick(pollStartEvent.getId()!)}
                             />
                         ) : (
                             <PollListItemEnded
-                                key={pollStartEvent.getId()!}
+                                key={pollStartEvent.getId()}
                                 event={pollStartEvent}
                                 poll={polls.get(pollStartEvent.getId()!)!}
                                 onClick={() => onItemClick(pollStartEvent.getId()!)}
diff --git a/apps/web/src/components/views/polls/pollHistory/PollListItem.tsx b/apps/web/src/components/views/polls/pollHistory/PollListItem.tsx
index d0706c176a..55bf5867e9 100644
--- a/apps/web/src/components/views/polls/pollHistory/PollListItem.tsx
+++ b/apps/web/src/components/views/polls/pollHistory/PollListItem.tsx
@@ -9,11 +9,11 @@ Please see LICENSE files in the repository root for full details.
 import React from "react";
 import { type PollStartEvent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
 import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
-import { Tooltip } from "@vector-im/compound-web";
 import { PollsIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { formatLocalDateShort } from "../../../../DateUtils";
 import { _t } from "../../../../languageHandler";
+import AccessibleButton from "../../elements/AccessibleButton.tsx";
 
 interface Props {
     event: MatrixEvent;
@@ -27,14 +27,19 @@ export const PollListItem: React.FC<Props> = ({ event, onClick }) => {
     }
     const formattedDate = formatLocalDateShort(event.getTs());
     return (
-        <li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItem" onClick={onClick}>
-            <Tooltip label={_t("right_panel|poll|view_poll")} placement="top" isTriggerInteractive={false}>
+        <li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItem">
+            <AccessibleButton
+                className="mx_PollListItemEnded_content"
+                title={_t("right_panel|poll|view_poll")}
+                placement="top"
+                onClick={onClick}
+            >
                 <div className="mx_PollListItem_content">
                     <span>{formattedDate}</span>
                     <PollsIcon className="mx_PollListItem_icon" />
                     <span className="mx_PollListItem_question">{pollEvent.question.text}</span>
                 </div>
-            </Tooltip>
+            </AccessibleButton>
         </li>
     );
 };
diff --git a/apps/web/src/components/views/polls/pollHistory/PollListItemEnded.tsx b/apps/web/src/components/views/polls/pollHistory/PollListItemEnded.tsx
index 39d2d0e07d..d7913f08fa 100644
--- a/apps/web/src/components/views/polls/pollHistory/PollListItemEnded.tsx
+++ b/apps/web/src/components/views/polls/pollHistory/PollListItemEnded.tsx
@@ -9,7 +9,6 @@ Please see LICENSE files in the repository root for full details.
 import React, { useEffect, useState } from "react";
 import { type PollAnswerSubevent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
 import { type MatrixEvent, type Poll, PollEvent, type Relations } from "matrix-js-sdk/src/matrix";
-import { Tooltip } from "@vector-im/compound-web";
 import { PollsEndIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../../languageHandler";
@@ -17,6 +16,7 @@ import { formatLocalDateShort } from "../../../../DateUtils";
 import { allVotes, collectUserVotes, countVotes } from "../../messages/MPollBody";
 import { PollOption } from "../../polls/PollOption";
 import { Caption } from "../../typography/Caption";
+import AccessibleButton from "../../elements/AccessibleButton.tsx";
 
 interface Props {
     event: MatrixEvent;
@@ -93,36 +93,39 @@ export const PollListItemEnded: React.FC<Props> = ({ event, poll, onClick }) =>
     const formattedDate = formatLocalDateShort(event.getTs());
 
     return (
-        <li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItemEnded" onClick={onClick}>
-            <Tooltip label={_t("right_panel|poll|view_poll")} placement="top" isTriggerInteractive={false}>
-                <div className="mx_PollListItemEnded_content">
-                    <div className="mx_PollListItemEnded_title">
-                        <PollsEndIcon className="mx_PollListItemEnded_icon" />
-                        <span className="mx_PollListItemEnded_question">{pollEvent.question.text}</span>
-                        <Caption>{formattedDate}</Caption>
-                    </div>
-                    {!!winningAnswers?.length && (
-                        <div className="mx_PollListItemEnded_answers">
-                            {winningAnswers?.map(({ answer, voteCount, optionNumber }) => (
-                                <PollOption
-                                    key={answer.id}
-                                    answer={answer}
-                                    voteCount={voteCount}
-                                    totalVoteCount={totalVoteCount!}
-                                    pollId={poll.pollId}
-                                    optionNumber={optionNumber}
-                                    displayVoteCount
-                                    isChecked
-                                    isEnded
-                                />
-                            ))}
-                        </div>
-                    )}
-                    <div className="mx_PollListItemEnded_voteCount">
-                        <Caption>{_t("right_panel|poll|final_result", { count: totalVoteCount })}</Caption>
-                    </div>
+        <li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItemEnded">
+            <AccessibleButton
+                className="mx_PollListItemEnded_content"
+                title={_t("right_panel|poll|view_poll")}
+                placement="top"
+                onClick={onClick}
+            >
+                <div className="mx_PollListItemEnded_title">
+                    <PollsEndIcon className="mx_PollListItemEnded_icon" />
+                    <span className="mx_PollListItemEnded_question">{pollEvent.question.text}</span>
+                    <Caption>{formattedDate}</Caption>
                 </div>
-            </Tooltip>
+                {!!winningAnswers?.length && (
+                    <div className="mx_PollListItemEnded_answers">
+                        {winningAnswers?.map(({ answer, voteCount, optionNumber }) => (
+                            <PollOption
+                                key={answer.id}
+                                answer={answer}
+                                voteCount={voteCount}
+                                totalVoteCount={totalVoteCount!}
+                                pollId={poll.pollId}
+                                optionNumber={optionNumber}
+                                displayVoteCount
+                                isChecked
+                                isEnded
+                            />
+                        ))}
+                    </div>
+                )}
+                <div className="mx_PollListItemEnded_voteCount">
+                    <Caption>{_t("right_panel|poll|final_result", { count: totalVoteCount })}</Caption>
+                </div>
+            </AccessibleButton>
         </li>
     );
 };
diff --git a/apps/web/src/components/views/right_panel/BaseCard.tsx b/apps/web/src/components/views/right_panel/BaseCard.tsx
index e8b466ff44..754c63b35e 100644
--- a/apps/web/src/components/views/right_panel/BaseCard.tsx
+++ b/apps/web/src/components/views/right_panel/BaseCard.tsx
@@ -6,17 +6,17 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type ReactNode, type KeyboardEvent, type Ref, type MouseEvent } from "react";
+import React, { type ReactNode, type KeyboardEvent, type Ref, type MouseEvent, useMemo, useContext } from "react";
 import classNames from "classnames";
 import { IconButton, Text } from "@vector-im/compound-web";
 import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
 import ChevronLeftIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-left";
+import { AutoHideScrollbar } from "@element-hq/web-shared-components";
 
-import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import { _t } from "../../../languageHandler";
-import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
 import { backLabelForPhase } from "../../../stores/right-panel/RightPanelStorePhases";
 import { CardContext } from "./context";
+import { SDKContext } from "../../../contexts/SDKContext.ts";
 
 interface IProps {
     header?: ReactNode | null;
@@ -31,19 +31,12 @@ interface IProps {
     onClose?(this: void, ev: MouseEvent<HTMLButtonElement>): void;
     onBack?(this: void, ev: MouseEvent<HTMLButtonElement>): void;
     onKeyDown?(this: void, ev: KeyboardEvent): void;
-    cardState?: any;
     ref?: Ref<HTMLDivElement>;
     // Ref for the 'close' button the card
     closeButtonRef?: Ref<HTMLButtonElement>;
     children: ReactNode;
 }
 
-function closeRightPanel(ev: MouseEvent<HTMLButtonElement>): void {
-    ev.preventDefault();
-    ev.stopPropagation();
-    RightPanelStore.instance.popCard();
-}
-
 const BaseCard: React.FC<IProps> = ({
     closeLabel,
     onClose,
@@ -61,13 +54,15 @@ const BaseCard: React.FC<IProps> = ({
     closeButtonRef,
     ref,
 }: IProps) => {
+    const sdkContext = useContext(SDKContext);
+
     let backButton;
-    const cardHistory = RightPanelStore.instance.roomPhaseHistory;
+    const cardHistory = sdkContext.rightPanelStore.roomPhaseHistory;
     if (cardHistory.length > 1 && !hideHeaderButtons) {
         const prevCard = cardHistory[cardHistory.length - 2];
         const onBackClick = (ev: MouseEvent<HTMLButtonElement>): void => {
             onBack?.(ev);
-            RightPanelStore.instance.popCard();
+            sdkContext.rightPanelStore.popCard();
         };
         const label = backLabelForPhase(prevCard.phase) ?? _t("action|back");
         backButton = (
@@ -85,6 +80,13 @@ const BaseCard: React.FC<IProps> = ({
 
     let closeButton;
     if (!hideHeaderButtons) {
+        // eslint-disable-next-line no-inner-declarations
+        function closeRightPanel(ev: MouseEvent<HTMLButtonElement>): void {
+            ev.preventDefault();
+            ev.stopPropagation();
+            sdkContext.rightPanelStore.popCard();
+        }
+
         closeButton = (
             <IconButton
                 size="28px"
@@ -100,13 +102,14 @@ const BaseCard: React.FC<IProps> = ({
     }
 
     if (!withoutScrollContainer) {
-        children = <AutoHideScrollbar>{children}</AutoHideScrollbar>;
+        children = <AutoHideScrollbar className="mx_AutoHideScrollbar">{children}</AutoHideScrollbar>;
     }
 
     const shouldRenderHeader = header || !hideHeaderButtons;
+    const context = useMemo(() => ({ isCard: true }), []);
 
     return (
-        <CardContext.Provider value={{ isCard: true }}>
+        <CardContext.Provider value={context}>
             <div
                 id={id}
                 aria-labelledby={ariaLabelledBy}
@@ -125,6 +128,7 @@ const BaseCard: React.FC<IProps> = ({
                                     weight="medium"
                                     className="mx_BaseCard_header_title_heading"
                                     role="heading"
+                                    aria-level={1}
                                 >
                                     {header}
                                 </Text>
diff --git a/apps/web/src/components/views/right_panel/EncryptionPanel.tsx b/apps/web/src/components/views/right_panel/EncryptionPanel.tsx
index 53cea715e5..3a317a69e9 100644
--- a/apps/web/src/components/views/right_panel/EncryptionPanel.tsx
+++ b/apps/web/src/components/views/right_panel/EncryptionPanel.tsx
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { VerificationPhase, type VerificationRequest, VerificationRequestEvent } from "matrix-js-sdk/src/crypto-api";
 import { type RoomMember, type User } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
@@ -21,9 +21,8 @@ import { useTypedEventEmitter } from "../../../hooks/useEventEmitter";
 import Modal from "../../../Modal";
 import { _t } from "../../../languageHandler";
 import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
-import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
 import ErrorDialog from "../dialogs/ErrorDialog";
-import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
+import { SDKContext } from "../../../contexts/SDKContext.ts";
 
 // cancellation codes which constitute a key mismatch
 const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"];
@@ -38,7 +37,7 @@ interface IProps {
 }
 
 const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
-    const cli = useMatrixClientContext();
+    const sdkContext = useContext(SDKContext);
     const { verificationRequest, verificationRequestPromise, member, onClose, layout, isRoomEncrypted } = props;
     const [request, setRequest] = useState(verificationRequest);
     // state to show a spinner immediately after clicking "start verification",
@@ -111,11 +110,11 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
         setRequesting(true);
         let verificationRequest_: VerificationRequest;
         try {
-            const roomId = await ensureDMExists(cli, member.userId);
+            const roomId = await ensureDMExists(sdkContext.client!, member.userId);
             if (!roomId) {
                 throw new Error("Unable to create Room for verification");
             }
-            verificationRequest_ = await cli.getCrypto()!.requestVerificationDM(member.userId, roomId);
+            verificationRequest_ = await sdkContext.client!.getCrypto()!.requestVerificationDM(member.userId, roomId);
         } catch (e) {
             console.error("Error starting verification", e);
             setRequesting(false);
@@ -130,20 +129,20 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
         setRequest(verificationRequest_);
         setPhase(verificationRequest_.phase);
         // Notify the RightPanelStore about this
-        if (RightPanelStore.instance.currentCard.phase != RightPanelPhases.EncryptionPanel) {
-            RightPanelStore.instance.pushCard({
+        if (sdkContext.rightPanelStore.currentCard.phase != RightPanelPhases.EncryptionPanel) {
+            sdkContext.rightPanelStore.pushCard({
                 phase: RightPanelPhases.EncryptionPanel,
                 state: { member, verificationRequest: verificationRequest_ },
             });
         }
-        if (!RightPanelStore.instance.isOpen) RightPanelStore.instance.togglePanel(null);
-    }, [cli, member]);
+        if (!sdkContext.rightPanelStore.isOpen) sdkContext.rightPanelStore.togglePanel(null);
+    }, [sdkContext.client, sdkContext.rightPanelStore, member]);
 
     const requested: boolean =
         (!request && isRequesting) ||
         (!!request &&
             (phase === VerificationPhase.Requested || phase === VerificationPhase.Unsent || phase === undefined));
-    const isSelfVerification = request ? request.isSelfVerification : member.userId === cli.getUserId();
+    const isSelfVerification = request ? request.isSelfVerification : member.userId === sdkContext.client?.getUserId();
 
     if (!request || requested) {
         const initiatedByMe = (!request && isRequesting) || (!!request && request.initiatedByMe);
@@ -167,7 +166,6 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
                 member={member}
                 request={request}
                 key={request.transactionId}
-                inDialog={layout === "dialog"}
                 phase={phase}
             />
         );
diff --git a/apps/web/src/components/views/right_panel/ExtensionsCard.tsx b/apps/web/src/components/views/right_panel/ExtensionsCard.tsx
index c3db44e501..290776fa01 100644
--- a/apps/web/src/components/views/right_panel/ExtensionsCard.tsx
+++ b/apps/web/src/components/views/right_panel/ExtensionsCard.tsx
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX, useEffect, useMemo, useState } from "react";
+import React, { type JSX, useContext, useEffect, useMemo, useState } from "react";
 import { type Room } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
 import { Button, Link, Separator, Text } from "@vector-im/compound-web";
@@ -21,10 +21,9 @@ import BaseCard from "./BaseCard";
 import WidgetUtils, { useWidgets } from "../../../utils/WidgetUtils";
 import { _t } from "../../../languageHandler";
 import { useContextMenu } from "../../structures/ContextMenu";
-import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
 import { type IApp } from "../../../stores/WidgetStore";
 import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
-import { MAX_PINNED, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
+import { MAX_PINNED } from "../../../stores/widgets/WidgetLayoutStore";
 import AccessibleButton from "../elements/AccessibleButton";
 import WidgetAvatar from "../avatars/WidgetAvatar";
 import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
@@ -32,6 +31,7 @@ import EmptyState from "./EmptyState";
 import { shouldShowComponent } from "../../../customisations/helpers/UIComponents.ts";
 import { UIComponent } from "../../../settings/UIFeature.ts";
 import { WidgetContextMenu } from "../../../viewmodels/room/right-panel/WidgetContextMenuViewModel.tsx";
+import { SDKContext } from "../../../contexts/SDKContext.ts";
 
 interface Props {
     room: Room;
@@ -44,6 +44,7 @@ interface IAppRowProps {
 }
 
 const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
+    const sdkContext = useContext(SDKContext);
     const name = WidgetUtils.getWidgetName(app);
     const [canModifyWidget, setCanModifyWidget] = useState<boolean>();
 
@@ -52,24 +53,24 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
     }, [room.client, room.roomId]);
 
     const onOpenWidgetClick = (): void => {
-        RightPanelStore.instance.pushCard({
+        sdkContext.rightPanelStore.pushCard({
             phase: RightPanelPhases.Widget,
             state: { widgetId: app.id },
         });
     };
 
-    const isPinned = WidgetLayoutStore.instance.isInContainer(room, app, "top");
+    const isPinned = sdkContext.widgetLayoutStore.isInContainer(room, app, "top");
     const togglePin = isPinned
         ? () => {
-              WidgetLayoutStore.instance.moveToContainer(room, app, "right");
+              sdkContext.widgetLayoutStore.moveToContainer(room, app, "right");
           }
         : () => {
-              WidgetLayoutStore.instance.moveToContainer(room, app, "top");
+              sdkContext.widgetLayoutStore.moveToContainer(room, app, "top");
           };
 
     const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu<HTMLDivElement>();
 
-    const cannotPin = !isPinned && !WidgetLayoutStore.instance.canAddToContainer(room, "top");
+    const cannotPin = !isPinned && !sdkContext.widgetLayoutStore.canAddToContainer(room, "top");
 
     let pinTitle: string;
     if (cannotPin) {
@@ -78,7 +79,7 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
         pinTitle = isPinned ? _t("action|unpin") : _t("action|pin");
     }
 
-    const isMaximised = WidgetLayoutStore.instance.isInContainer(room, app, "center");
+    const isMaximised = sdkContext.widgetLayoutStore.isInContainer(room, app, "center");
 
     let openTitle = "";
     if (isPinned) {
@@ -142,6 +143,7 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
  * @param onClose callback when the card is closed
  */
 const ExtensionsCard: React.FC<Props> = ({ room, onClose }) => {
+    const sdkContext = useContext(SDKContext);
     const apps = useWidgets(room);
     // Filter out virtual widgets
     const realApps = useMemo(() => apps.filter((app) => app.eventId !== undefined), [apps]);
@@ -169,9 +171,9 @@ const ExtensionsCard: React.FC<Props> = ({ room, onClose }) => {
         );
     } else {
         let copyLayoutBtn: JSX.Element | null = null;
-        if (WidgetLayoutStore.instance.canCopyLayoutToRoom(room)) {
+        if (sdkContext.widgetLayoutStore.canCopyLayoutToRoom(room)) {
             copyLayoutBtn = (
-                <Link onClick={() => WidgetLayoutStore.instance.copyLayoutToRoom(room)}>
+                <Link onClick={() => sdkContext.widgetLayoutStore.copyLayoutToRoom(room)}>
                     {_t("widget|set_room_layout")}
                 </Link>
             );
diff --git a/apps/web/src/components/views/right_panel/PinnedMessagesCard.tsx b/apps/web/src/components/views/right_panel/PinnedMessagesCard.tsx
index 611b485b78..b2b4aa72cd 100644
--- a/apps/web/src/components/views/right_panel/PinnedMessagesCard.tsx
+++ b/apps/web/src/components/views/right_panel/PinnedMessagesCard.tsx
@@ -21,7 +21,6 @@ import { useRoomState } from "../../../hooks/useRoomState";
 import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
 import { ReadPinsEventId } from "./types";
 import { type RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
-import { filterBoolean } from "../../../utils/arrays";
 import Modal from "../../../Modal";
 import { UnpinAllDialog } from "../dialogs/UnpinAllDialog";
 import EmptyState from "./EmptyState";
@@ -77,9 +76,7 @@ export function PinnedMessagesCard({ room, onClose, permalinkCreator }: PinnedMe
             />
         );
     } else if (pinnedEvents?.length) {
-        content = (
-            <PinnedMessages events={filterBoolean(pinnedEvents)} room={room} permalinkCreator={permalinkCreator} />
-        );
+        content = <PinnedMessages events={pinnedEvents} room={room} permalinkCreator={permalinkCreator} />;
     } else {
         content = <Spinner />;
     }
diff --git a/apps/web/src/components/views/right_panel/RoomSummaryCardView.tsx b/apps/web/src/components/views/right_panel/RoomSummaryCardView.tsx
index 23d858e414..9a3d53303f 100644
--- a/apps/web/src/components/views/right_panel/RoomSummaryCardView.tsx
+++ b/apps/web/src/components/views/right_panel/RoomSummaryCardView.tsx
@@ -39,16 +39,16 @@ import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error"
 import ErrorSolidIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
 import ChevronDownIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-down";
 import { JoinRule, type Room } from "matrix-js-sdk/src/matrix";
-import { Box, Flex, HistoryVisibilityBadge, LinkedText } from "@element-hq/web-shared-components";
+import { Box, Flex, HistoryVisibilityBadge, LinkedText, StatusTextView } from "@element-hq/web-shared-components";
 
 import BaseCard from "./BaseCard.tsx";
-import { _t } from "../../../languageHandler.tsx";
+import { _t } from "../../../languageHandler";
 import RoomAvatar from "../avatars/RoomAvatar.tsx";
 import { E2EStatus } from "../../../utils/ShieldUtils.ts";
 import { type RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks.ts";
 import { topicToHtml } from "../../../HtmlUtils.tsx";
-import { useRoomSummaryCardViewModel } from "../../viewmodels/right_panel/RoomSummaryCardViewModel.tsx";
-import { useRoomTopicViewModel } from "../../viewmodels/right_panel/RoomSummaryCardTopicViewModel.tsx";
+import { useRoomSummaryCardViewModel } from "../../viewmodels/right_panel/RoomSummaryCardViewModel";
+import { useRoomTopicViewModel } from "../../viewmodels/right_panel/RoomSummaryCardTopicViewModel";
 import { useRoomName } from "../../../hooks/useRoomName.ts";
 
 interface IProps {
@@ -153,6 +153,7 @@ const RoomSummaryCardView: React.FC<IProps> = ({
             >
                 {name}
             </Heading>
+            {vm.userStatus && <StatusTextView status={vm.userStatus} />}
             <Text
                 as="div"
                 size="sm"
diff --git a/apps/web/src/components/views/right_panel/TimelineCard.tsx b/apps/web/src/components/views/right_panel/TimelineCard.tsx
index 0ec7b8bedd..521219c0a7 100644
--- a/apps/web/src/components/views/right_panel/TimelineCard.tsx
+++ b/apps/web/src/components/views/right_panel/TimelineCard.tsx
@@ -38,6 +38,7 @@ import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPaylo
 import Measured from "../elements/Measured";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
 import { ScopedRoomContextProvider } from "../../../contexts/ScopedRoomContext.tsx";
+import { RoomUploadContextProvider } from "../../../viewmodels/room/RoomUploadViewModel.tsx";
 import { EventPresentationContextProvider } from "../../../utils/EventPresentationContextProvider";
 
 interface IProps {
@@ -91,10 +92,10 @@ export default class TimelineCard extends React.Component<IProps, IState> {
         this.context.roomViewStore.addListener(UPDATE_EVENT, this.onRoomViewStoreUpdate);
         this.dispatcherRef = dis.register(this.onAction);
         this.readReceiptsSettingWatcher = SettingsStore.watchSetting("showReadReceipts", null, (...[, , , value]) =>
-            this.setState({ showReadReceipts: value as boolean }),
+            this.setState({ showReadReceipts: value! }),
         );
         this.layoutWatcherRef = SettingsStore.watchSetting("layout", null, (...[, , , value]) =>
-            this.setState({ layout: value as Layout }),
+            this.setState({ layout: value! }),
         );
     }
 
@@ -214,47 +215,49 @@ export default class TimelineCard extends React.Component<IProps, IState> {
                     header={_t("right_panel|video_room_chat|title")}
                     ref={this.card}
                 >
-                    <Measured sensor={this.card} onMeasurement={this.onMeasurement} />
-                    <div className="mx_TimelineCard_timeline">
-                        {jumpToBottom}
-                        <EventPresentationContextProvider layout={layout}>
-                            <TimelinePanel
-                                ref={this.timelinePanel}
-                                showReadReceipts={this.state.showReadReceipts}
-                                manageReadReceipts={true}
-                                manageReadMarkers={false} // No RM support in the TimelineCard
-                                sendReadReceiptOnLoad={true}
-                                timelineSet={this.props.timelineSet}
-                                showUrlPreview={this.context.showUrlPreview}
-                                // The right panel timeline (and therefore threads) don't support IRC layout at this time
-                                layout={layout}
-                                hideThreadedMessages={false}
-                                hidden={false}
-                                showReactions={true}
-                                className="mx_RoomView_messagePanel"
+                    <RoomUploadContextProvider>
+                        <Measured sensor={this.card} onMeasurement={this.onMeasurement} />
+                        <div className="mx_TimelineCard_timeline">
+                            {jumpToBottom}
+                            <EventPresentationContextProvider layout={layout}>
+                                <TimelinePanel
+                                    ref={this.timelinePanel}
+                                    showReadReceipts={this.state.showReadReceipts}
+                                    manageReadReceipts={true}
+                                    manageReadMarkers={false} // No RM support in the TimelineCard
+                                    sendReadReceiptOnLoad={true}
+                                    timelineSet={this.props.timelineSet}
+                                    showUrlPreview={this.context.showUrlPreview}
+                                    // The right panel timeline (and therefore threads) don't support IRC layout at this time
+                                    layout={layout}
+                                    hideThreadedMessages={false}
+                                    hidden={false}
+                                    showReactions={true}
+                                    className="mx_RoomView_messagePanel"
+                                    permalinkCreator={this.props.permalinkCreator}
+                                    membersLoaded={true}
+                                    editState={this.state.editState}
+                                    eventId={this.state.initialEventId}
+                                    highlightedEventId={highlightedEventId}
+                                    onScroll={this.onScroll}
+                                />
+                            </EventPresentationContextProvider>
+                        </div>
+
+                        {isUploading && <UploadBar room={this.props.room} relation={this.props.composerRelation} />}
+
+                        {showComposer && (
+                            <MessageComposer
+                                room={this.props.room}
+                                relation={this.props.composerRelation}
+                                resizeNotifier={this.props.resizeNotifier}
+                                replyToEvent={this.state.replyToEvent}
                                 permalinkCreator={this.props.permalinkCreator}
-                                membersLoaded={true}
-                                editState={this.state.editState}
-                                eventId={this.state.initialEventId}
-                                highlightedEventId={highlightedEventId}
-                                onScroll={this.onScroll}
+                                e2eStatus={this.props.e2eStatus}
+                                compact={true}
                             />
-                        </EventPresentationContextProvider>
-                    </div>
-
-                    {isUploading && <UploadBar room={this.props.room} relation={this.props.composerRelation} />}
-
-                    {showComposer && (
-                        <MessageComposer
-                            room={this.props.room}
-                            relation={this.props.composerRelation}
-                            resizeNotifier={this.props.resizeNotifier}
-                            replyToEvent={this.state.replyToEvent}
-                            permalinkCreator={this.props.permalinkCreator}
-                            e2eStatus={this.props.e2eStatus}
-                            compact={true}
-                        />
-                    )}
+                        )}
+                    </RoomUploadContextProvider>
                 </BaseCard>
             </ScopedRoomContextProvider>
         );
diff --git a/apps/web/src/components/views/right_panel/UserInfo.tsx b/apps/web/src/components/views/right_panel/UserInfo.tsx
index 7de3f9be88..aced0b6b2f 100644
--- a/apps/web/src/components/views/right_panel/UserInfo.tsx
+++ b/apps/web/src/components/views/right_panel/UserInfo.tsx
@@ -23,11 +23,10 @@ import EncryptionPanel from "./EncryptionPanel";
 import { useIsEncrypted } from "../../../hooks/useIsEncrypted";
 import BaseCard from "./BaseCard";
 import QuestionDialog from "../dialogs/QuestionDialog";
-import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
-import { type IRightPanelCardState } from "../../../stores/right-panel/RightPanelStoreIPanelState";
 import PosthogTrackers from "../../../PosthogTrackers";
 import { UserInfoHeaderView } from "./user_info/UserInfoHeaderView";
 import { UserInfoBasicView } from "./user_info/UserInfoBasicView";
+import { SDKContext } from "../../../contexts/SDKContext.ts";
 
 export interface IDevice extends Device {
     ambiguous?: boolean;
@@ -77,33 +76,14 @@ export const Container: React.FC<{
 
 export interface IPowerLevelsContent {
     events?: Record<string, number>;
-    // eslint-disable-next-line camelcase
     users_default?: number;
-    // eslint-disable-next-line camelcase
     events_default?: number;
-    // eslint-disable-next-line camelcase
     state_default?: number;
     ban?: number;
     kick?: number;
     redact?: number;
 }
 
-export const isMuted = (member: RoomMember, powerLevelContent: IPowerLevelsContent): boolean => {
-    if (!powerLevelContent || !member) return false;
-
-    const levelToSend =
-        (powerLevelContent.events ? powerLevelContent.events["m.room.message"] : null) ||
-        powerLevelContent.events_default;
-
-    // levelToSend could be undefined as .events_default is optional. Coercing in this case using
-    // Number() would always return false, so this preserves behaviour
-    // FIXME: per the spec, if `events_default` is unset, it defaults to zero. If
-    //   the member has a negative powerlevel, this will give an incorrect result.
-    if (levelToSend === undefined) return false;
-
-    return member.powerLevel < levelToSend;
-};
-
 export interface IRoomPermissions {
     modifyLevelMax: number;
     canEdit: boolean;
@@ -198,37 +178,31 @@ interface IProps {
 }
 
 const UserInfo: React.FC<IProps> = ({ user, room, onClose, phase = RightPanelPhases.MemberInfo, ...props }) => {
-    const cli = useContext(MatrixClientContext);
+    const sdkContext = useContext(SDKContext);
 
     // fetch latest room member if we have a room, so we don't show historical information, falling back to user
     const member = useMemo(() => (room ? room.getMember(user.userId) || user : user), [room, user]);
 
-    const isRoomEncrypted = useIsEncrypted(cli, room);
+    const isRoomEncrypted = useIsEncrypted(sdkContext.client!, room);
     const devices = useDevices(user.userId) ?? [];
 
     const classes = ["mx_UserInfo"];
 
-    let cardState: IRightPanelCardState = {};
-    // We have no previousPhase for when viewing a UserInfo without a Room at this time
-    if (room && phase === RightPanelPhases.EncryptionPanel) {
-        cardState = { member };
-    }
-
     const onEncryptionPanelClose = (): void => {
-        RightPanelStore.instance.popCard();
+        sdkContext.rightPanelStore.popCard();
     };
 
     let content: JSX.Element | undefined;
     switch (phase) {
         case RightPanelPhases.MemberInfo:
-            content = <UserInfoBasicView room={room as Room} member={member as User} />;
+            content = <UserInfoBasicView room={room!} member={member} />;
             break;
         case RightPanelPhases.EncryptionPanel:
             classes.push("mx_UserInfo_smallAvatar");
             content = (
                 <EncryptionPanel
                     {...(props as React.ComponentProps<typeof EncryptionPanel>)}
-                    member={member as User | RoomMember}
+                    member={member}
                     onClose={onEncryptionPanelClose}
                     isRoomEncrypted={Boolean(isRoomEncrypted)}
                 />
@@ -245,14 +219,12 @@ const UserInfo: React.FC<IProps> = ({ user, room, onClose, phase = RightPanelPha
     }
 
     const header = (
-        <>
-            <UserInfoHeaderView
-                hideVerificationSection={phase === RightPanelPhases.EncryptionPanel}
-                member={member}
-                devices={devices}
-                roomId={room?.roomId}
-            />
-        </>
+        <UserInfoHeaderView
+            hideVerificationSection={phase === RightPanelPhases.EncryptionPanel}
+            member={member}
+            devices={devices}
+            roomId={room?.roomId}
+        />
     );
 
     return (
@@ -261,9 +233,8 @@ const UserInfo: React.FC<IProps> = ({ user, room, onClose, phase = RightPanelPha
             header={_t("common|profile")}
             onClose={onClose}
             closeLabel={closeLabel}
-            cardState={cardState}
             onBack={(ev: ButtonEvent) => {
-                if (RightPanelStore.instance.previousCard.phase === RightPanelPhases.MemberList) {
+                if (sdkContext.rightPanelStore.previousCard.phase === RightPanelPhases.MemberList) {
                     PosthogTrackers.trackInteraction("WebRightPanelRoomUserInfoBackButton", ev);
                 }
             }}
diff --git a/apps/web/src/components/views/right_panel/VerificationPanel.tsx b/apps/web/src/components/views/right_panel/VerificationPanel.tsx
index d369f98d3a..73a23e4d4e 100644
--- a/apps/web/src/components/views/right_panel/VerificationPanel.tsx
+++ b/apps/web/src/components/views/right_panel/VerificationPanel.tsx
@@ -37,7 +37,6 @@ interface IProps {
     phase?: Phase;
     onClose: () => void;
     isRoomEncrypted: boolean;
-    inDialog: boolean;
 }
 
 interface IState {
@@ -327,7 +326,6 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
                                 sas={this.state.sasEvent.sas}
                                 onCancel={this.onSasMismatchesClick}
                                 onDone={this.onSasMatchesClick}
-                                inDialog={this.props.inDialog}
                                 isSelf={request.isSelfVerification}
                             />
                         ) : (
diff --git a/apps/web/src/components/views/right_panel/WidgetCard.tsx b/apps/web/src/components/views/right_panel/WidgetCard.tsx
index 12b65e0702..54b16c134e 100644
--- a/apps/web/src/components/views/right_panel/WidgetCard.tsx
+++ b/apps/web/src/components/views/right_panel/WidgetCard.tsx
@@ -9,16 +9,14 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX, useContext, useEffect } from "react";
 import { type Room } from "matrix-js-sdk/src/matrix";
 
-import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import BaseCard from "./BaseCard";
 import WidgetUtils, { useWidgets } from "../../../utils/WidgetUtils";
 import AppTile from "../elements/AppTile";
 import { _t } from "../../../languageHandler";
 import { ContextMenuButton, useContextMenu } from "../../structures/ContextMenu";
-import { WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
-import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
 import Heading from "../typography/Heading";
 import { WidgetContextMenu } from "../../../viewmodels/room/right-panel/WidgetContextMenuViewModel";
+import { SDKContext } from "../../../contexts/SDKContext.ts";
 
 interface IProps {
     room: Room;
@@ -27,20 +25,20 @@ interface IProps {
 }
 
 const WidgetCard: React.FC<IProps> = ({ room, widgetId, onClose }) => {
-    const cli = useContext(MatrixClientContext);
+    const sdkContext = useContext(SDKContext);
 
     const apps = useWidgets(room);
     const app = apps.find((a) => a.id === widgetId);
-    const isRight = app && WidgetLayoutStore.instance.isInContainer(room, app, "right");
+    const isRight = app && sdkContext.widgetLayoutStore.isInContainer(room, app, "right");
 
     const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu();
 
     useEffect(() => {
         if (!app || !isRight) {
             // stop showing this card
-            RightPanelStore.instance.popCard();
+            sdkContext.rightPanelStore.popCard();
         }
-    }, [app, isRight]);
+    }, [app, isRight, sdkContext.rightPanelStore]);
 
     // Don't render anything as we are about to transition
     if (!app || !isRight) return null;
@@ -78,7 +76,7 @@ const WidgetCard: React.FC<IProps> = ({ room, widgetId, onClose }) => {
                 fullWidth
                 showMenubar={false}
                 room={room}
-                userId={cli.getSafeUserId()}
+                userId={sdkContext.client?.getUserId() ?? undefined}
                 creatorUserId={app.creatorUserId}
                 widgetPageTitle={WidgetUtils.getWidgetDataTitle(app)}
                 waitForIframeLoad={app.waitForIframeLoad}
diff --git a/apps/web/src/components/views/right_panel/user_info/UserInfoHeaderView.tsx b/apps/web/src/components/views/right_panel/user_info/UserInfoHeaderView.tsx
index 275175198c..1e214223c2 100644
--- a/apps/web/src/components/views/right_panel/user_info/UserInfoHeaderView.tsx
+++ b/apps/web/src/components/views/right_panel/user_info/UserInfoHeaderView.tsx
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX } from "react";
 import { type User, type RoomMember } from "matrix-js-sdk/src/matrix";
 import { Heading, Tooltip, Text } from "@vector-im/compound-web";
-import { Flex } from "@element-hq/web-shared-components";
+import { Flex, StatusTextView } from "@element-hq/web-shared-components";
 
 import { useUserfoHeaderViewModel } from "../../../viewmodels/right_panel/user_info/UserInfoHeaderViewModel";
 import MemberAvatar from "../../avatars/MemberAvatar";
@@ -16,6 +16,7 @@ import { Container, type Member, type IDevice } from "../UserInfo";
 import PresenceLabel from "../../rooms/PresenceLabel";
 import CopyableText from "../../elements/CopyableText";
 import { UserInfoHeaderVerificationView } from "./UserInfoHeaderVerificationView";
+import { useUserStatus } from "../../../../hooks/useUserStatus";
 
 export interface UserInfoHeaderViewProps {
     member: Member;
@@ -33,6 +34,7 @@ export const UserInfoHeaderView: React.FC<UserInfoHeaderViewProps> = ({
     const vm = useUserfoHeaderViewModel({ member, roomId });
     const avatarUrl = (member as User).avatarUrl;
     const displayName = (member as RoomMember).rawDisplayName;
+    const userStatus = useUserStatus(member.userId);
 
     let presenceLabel: JSX.Element | undefined;
 
@@ -73,6 +75,7 @@ export const UserInfoHeaderView: React.FC<UserInfoHeaderViewProps> = ({
                             {displayName}
                         </Flex>
                     </Heading>
+                    {userStatus && <StatusTextView status={userStatus} />}
                     {presenceLabel}
                     {vm.timezoneInfo && (
                         <Tooltip label={vm.timezoneInfo?.timezone ?? ""}>
diff --git a/apps/web/src/components/views/room_settings/AliasSettings.tsx b/apps/web/src/components/views/room_settings/AliasSettings.tsx
index aa662bbdd8..0ce0d500b3 100644
--- a/apps/web/src/components/views/room_settings/AliasSettings.tsx
+++ b/apps/web/src/components/views/room_settings/AliasSettings.tsx
@@ -240,11 +240,11 @@ export default class AliasSettings extends React.Component<IProps, IState> {
             .createAlias(alias, this.props.roomId)
             .then(() => {
                 this.setState({
-                    localAliases: this.state.localAliases.concat(alias!),
+                    localAliases: this.state.localAliases.concat(alias),
                     newAlias: undefined,
                 });
                 if (!this.state.canonicalAlias) {
-                    this.changeCanonicalAlias(alias!);
+                    this.changeCanonicalAlias(alias);
                 }
             })
             .catch((err) => {
@@ -347,10 +347,10 @@ export default class AliasSettings extends React.Component<IProps, IState> {
                 <option value="" key="unset">
                     {_t("room_settings|alias_not_specified")}
                 </option>
-                {this.getAliases().map((alias, i) => {
+                {this.getAliases().map((alias) => {
                     if (alias === this.state.canonicalAlias) found = true;
                     return (
-                        <option value={alias} key={i}>
+                        <option value={alias} key={alias}>
                             {alias}
                         </option>
                     );
@@ -414,7 +414,7 @@ export default class AliasSettings extends React.Component<IProps, IState> {
                     )}
                     <datalist id="mx_AliasSettings_altRecommendations">
                         {this.getLocalNonAltAliases().map((alias) => {
-                            return <option value={alias} key={alias} />;
+                            return <option value={alias} key={alias} aria-label={alias} />;
                         })}
                     </datalist>
                     <EditableAliasesList
diff --git a/apps/web/src/components/views/room_settings/RoomPublishSetting.tsx b/apps/web/src/components/views/room_settings/RoomPublishSetting.tsx
index b23ecfc49c..06afae6d77 100644
--- a/apps/web/src/components/views/room_settings/RoomPublishSetting.tsx
+++ b/apps/web/src/components/views/room_settings/RoomPublishSetting.tsx
@@ -20,7 +20,6 @@ import { onSubmitPreventDefault } from "../../../utils/form.ts";
 
 interface IProps {
     roomId: string;
-    label?: string;
     canSetCanonicalAlias?: boolean;
 }
 
diff --git a/apps/web/src/components/views/rooms/AppsDrawer.tsx b/apps/web/src/components/views/rooms/AppsDrawer.tsx
index 051eb20047..492268b100 100644
--- a/apps/web/src/components/views/rooms/AppsDrawer.tsx
+++ b/apps/web/src/components/views/rooms/AppsDrawer.tsx
@@ -6,9 +6,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type AriaRole } from "react";
+import React, { type AriaRole, useContext } from "react";
 import classNames from "classnames";
-import { Resizable, type Size } from "re-resizable";
+import { Resizable } from "re-resizable";
 import { type Room } from "matrix-js-sdk/src/matrix";
 import { type IWidget } from "matrix-widget-api";
 import { clamp, percentageOf, percentageWithin } from "@element-hq/web-shared-components";
@@ -79,14 +79,14 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
         this.context.resizeNotifier.on("isResizing", this.onIsResizing);
 
         ScalarMessaging.startListening();
-        WidgetLayoutStore.instance.on(WidgetLayoutStore.emissionForRoom(this.props.room), this.updateApps);
+        this.context.widgetLayoutStore.on(WidgetLayoutStore.emissionForRoom(this.props.room), this.updateApps);
         this.dispatcherRef = dis.register(this.onAction);
     }
 
     public componentWillUnmount(): void {
         this.unmounted = true;
         ScalarMessaging.stopListening();
-        WidgetLayoutStore.instance.off(WidgetLayoutStore.emissionForRoom(this.props.room), this.updateApps);
+        this.context.widgetLayoutStore.off(WidgetLayoutStore.emissionForRoom(this.props.room), this.updateApps);
         dis.unregister(this.dispatcherRef);
         if (this.resizeContainer) {
             this.resizer.detach();
@@ -117,7 +117,7 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
             },
             onResizeStop: () => {
                 this.resizeContainer?.classList.remove("mx_AppsDrawer--resizing");
-                WidgetLayoutStore.instance.setResizerDistributions(
+                this.context.widgetLayoutStore.setResizerDistributions(
                     this.props.room,
                     "top",
                     this.topApps()
@@ -166,7 +166,7 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
     };
 
     private loadResizerPreferences = (): void => {
-        const distributions = WidgetLayoutStore.instance.getResizerDistributions(this.props.room, "top");
+        const distributions = this.context.widgetLayoutStore.getResizerDistributions(this.props.room, "top");
         if (this.state.apps && this.topApps().length - 1 === distributions.length) {
             distributions.forEach((size, i) => {
                 const distributor = this.resizer.forHandleAt(i);
@@ -206,8 +206,8 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
     };
 
     private getApps = (): IState["apps"] => ({
-        ["top"]: WidgetLayoutStore.instance.getContainerWidgets(this.props.room, "top"),
-        ["center"]: WidgetLayoutStore.instance.getContainerWidgets(this.props.room, "center"),
+        ["top"]: this.context.widgetLayoutStore.getContainerWidgets(this.props.room, "top"),
+        ["center"]: this.context.widgetLayoutStore.getContainerWidgets(this.props.room, "center"),
     });
     private topApps = (): IWidget[] => this.state.apps["top"];
     private centerApps = (): IWidget[] => this.state.apps["center"];
@@ -321,7 +321,8 @@ const PersistentVResizer: React.FC<IPersistentResizerProps> = ({
     resizeNotifier,
     children,
 }) => {
-    let defaultHeight = WidgetLayoutStore.instance.getContainerHeight(room, "top");
+    const sdkContext = useContext(SDKContext);
+    let defaultHeight = sdkContext.widgetLayoutStore.getContainerHeight(room, "top");
 
     // Arbitrary defaults to avoid NaN problems. 100 px or 3/4 of the visible window.
     if (!minHeight) minHeight = 100;
@@ -339,7 +340,7 @@ const PersistentVResizer: React.FC<IPersistentResizerProps> = ({
         <Resizable
             // types do not support undefined height/width
             // but resizable code checks specifically for undefined on Size prop
-            size={{ height: Math.min(defaultHeight, maxHeight), width: undefined } as unknown as Size}
+            size={{ height: Math.min(defaultHeight, maxHeight), width: undefined }}
             minHeight={minHeight}
             maxHeight={maxHeight}
             onResizeStart={() => {
@@ -349,10 +350,10 @@ const PersistentVResizer: React.FC<IPersistentResizerProps> = ({
                 resizeNotifier.notifyTimelineHeightChanged();
             }}
             onResizeStop={(e, dir, ref, d) => {
-                let newHeight = defaultHeight! + d.height;
+                let newHeight = defaultHeight + d.height;
                 newHeight = percentageOf(newHeight, minHeight, maxHeight) * 100;
 
-                WidgetLayoutStore.instance.setContainerHeight(room, "top", newHeight);
+                sdkContext.widgetLayoutStore.setContainerHeight(room, "top", newHeight);
 
                 resizeNotifier.stopResizing();
             }}
diff --git a/apps/web/src/components/views/rooms/Autocomplete.tsx b/apps/web/src/components/views/rooms/Autocomplete.tsx
index a7a211e828..3db8c540e0 100644
--- a/apps/web/src/components/views/rooms/Autocomplete.tsx
+++ b/apps/web/src/components/views/rooms/Autocomplete.tsx
@@ -314,7 +314,11 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
                 });
 
                 return completions.length > 0 ? (
-                    <div key={i} className="mx_Autocomplete_ProviderSection" role="presentation">
+                    <div
+                        key={completionResult.provider.getName()}
+                        className="mx_Autocomplete_ProviderSection"
+                        role="presentation"
+                    >
                         <div className="mx_Autocomplete_provider_name">{completionResult.provider.getName()}</div>
                         {completionResult.provider.renderCompletions(completions)}
                     </div>
diff --git a/apps/web/src/components/views/rooms/AuxPanel.tsx b/apps/web/src/components/views/rooms/AuxPanel.tsx
index f547c29d2e..c8d0afebbe 100644
--- a/apps/web/src/components/views/rooms/AuxPanel.tsx
+++ b/apps/web/src/components/views/rooms/AuxPanel.tsx
@@ -8,10 +8,10 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type ReactNode } from "react";
 import { type Room } from "matrix-js-sdk/src/matrix";
+import { AutoHideScrollbar } from "@element-hq/web-shared-components";
 
 import AppsDrawer from "./AppsDrawer";
 import SettingsStore from "../../../settings/SettingsStore";
-import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import { UIFeature } from "../../../settings/UIFeature";
 import LegacyCallViewForRoom from "../voip/LegacyCallViewForRoom";
 import { objectHasDiff } from "../../../utils/objects";
@@ -44,7 +44,7 @@ export default class AuxPanel extends React.Component<IProps> {
         }
 
         return (
-            <AutoHideScrollbar role="region" className="mx_AuxPanel">
+            <AutoHideScrollbar role="region" className="mx_AutoHideScrollbar mx_AuxPanel">
                 {this.props.children}
                 {appsDrawer}
                 {callView}
diff --git a/apps/web/src/components/views/rooms/BasicMessageComposer.tsx b/apps/web/src/components/views/rooms/BasicMessageComposer.tsx
index b44889fe24..05d446cc92 100644
--- a/apps/web/src/components/views/rooms/BasicMessageComposer.tsx
+++ b/apps/web/src/components/views/rooms/BasicMessageComposer.tsx
@@ -41,9 +41,8 @@ import { type ICompletion } from "../../../autocomplete/Autocompleter";
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
 import { ALTERNATE_KEY_NAME, KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
 import { _t } from "../../../languageHandler";
-import { SdkContextClass } from "../../../contexts/SDKContext";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { Landmark, LandmarkNavigation } from "../../../accessibility/LandmarkNavigation";
+import { SDKContext } from "../../../contexts/SDKContext.ts";
 
 // matches emoticons which follow the start of a line or whitespace
 const REGEX_EMOTICON_WHITESPACE = new RegExp("(?:^|\\s)(" + EMOTICON_REGEX.source + ")\\s|:^$");
@@ -115,6 +114,9 @@ interface IState {
 }
 
 export default class BasicMessageEditor extends React.Component<IProps, IState> {
+    public static contextType = SDKContext;
+    declare public context: React.ContextType<typeof SDKContext>;
+
     public readonly editorRef = createRef<HTMLDivElement>();
     private autocompleteRef = createRef<Autocomplete>();
     private formatBarRef = createRef<MessageComposerFormatBar>();
@@ -245,17 +247,13 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
             const { cmd } = parseCommandString(this.props.model.parts[0].text);
             const command = CommandMap.get(cmd!);
             if (
-                !command?.isEnabled(MatrixClientPeg.get(), this.props.room.roomId) ||
+                !command?.isEnabled(this.context.client!, this.props.room.roomId) ||
                 command.category !== CommandCategories.messages
             ) {
                 isTyping = false;
             }
         }
-        SdkContextClass.instance.typingStore.setSelfTyping(
-            this.props.room.roomId,
-            this.props.threadId ?? null,
-            isTyping,
-        );
+        this.context.typingStore.setSelfTyping(this.props.room.roomId, this.props.threadId ?? null, isTyping);
 
         this.props.onChange?.(selection, inputType, diff);
     };
@@ -859,6 +857,8 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
                     aria-multiline="true"
                     aria-autocomplete="list"
                     aria-haspopup="listbox"
+                    // This is not strictly speaking a supported role, we should investigate the impact of this in the future
+                    // oxlint-disable-next-line jsx-a11y/role-supports-aria-props
                     aria-expanded={hasAutocomplete ? !this.autocompleteRef.current?.state.hide : undefined}
                     aria-owns={hasAutocomplete ? "mx_Autocomplete" : undefined}
                     aria-activedescendant={activeDescendant}
diff --git a/apps/web/src/components/views/rooms/CollapsibleButton.tsx b/apps/web/src/components/views/rooms/CollapsibleButton.tsx
index 158a4e426b..080b199c8b 100644
--- a/apps/web/src/components/views/rooms/CollapsibleButton.tsx
+++ b/apps/web/src/components/views/rooms/CollapsibleButton.tsx
@@ -6,12 +6,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type RefObject, useContext } from "react";
+import React, { type RefObject, useContext, createContext } from "react";
 
 import AccessibleButton, { type ButtonProps } from "../elements/AccessibleButton";
-import { OverflowMenuContext } from "./MessageComposerButtons";
 import { IconizedContextMenuOption } from "../context_menus/IconizedContextMenu";
 
+type OverflowMenuCloser = () => void;
+export const OverflowMenuContext = createContext<OverflowMenuCloser | null>(null);
+
 interface Props extends Omit<ButtonProps<"div">, "element"> {
     inputRef?: RefObject<HTMLElement | null>;
     title: string;
diff --git a/apps/web/src/components/views/rooms/EmojiButton.tsx b/apps/web/src/components/views/rooms/EmojiButton.tsx
index bc973d7b57..2bd6ed2fad 100644
--- a/apps/web/src/components/views/rooms/EmojiButton.tsx
+++ b/apps/web/src/components/views/rooms/EmojiButton.tsx
@@ -12,9 +12,8 @@ import { ReactionIcon } from "@vector-im/compound-design-tokens/assets/web/icons
 
 import { _t } from "../../../languageHandler";
 import ContextMenu, { aboveLeftOf, type MenuProps, useContextMenu } from "../../structures/ContextMenu";
-import EmojiPicker from "../emojipicker/EmojiPicker";
-import { CollapsibleButton } from "./CollapsibleButton";
-import { OverflowMenuContext } from "./MessageComposerButtons";
+import { CollapsibleButton, OverflowMenuContext } from "./CollapsibleButton";
+import { EmojiPickerWithRecents } from "../../../emojipicker/EmojiPickerWithRecents";
 
 interface IEmojiButtonProps {
     addEmoji: (unicode: string) => boolean;
@@ -36,7 +35,7 @@ export function EmojiButton({ addEmoji, menuPosition, className }: IEmojiButtonP
 
         contextMenu = (
             <ContextMenu {...position} onFinished={onFinished} managed={false} focusLock>
-                <EmojiPicker onChoose={addEmoji} onFinished={onFinished} />
+                <EmojiPickerWithRecents onChoose={addEmoji} onFinished={onFinished} />
             </ContextMenu>
         );
     }
diff --git a/apps/web/src/components/views/rooms/EventPreview.tsx b/apps/web/src/components/views/rooms/EventPreview.tsx
deleted file mode 100644
index 144f1d5aa0..0000000000
--- a/apps/web/src/components/views/rooms/EventPreview.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-/*
- * Copyright 2024 New Vector Ltd.
- * Copyright 2024 The Matrix.org Foundation C.I.C.
- *
- * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
- * Please see LICENSE files in the repository root for full details.
- */
-
-import React, { type HTMLProps, type JSX, useContext, useState } from "react";
-import { type IContent, M_POLL_START, type MatrixEvent, MatrixEventEvent, MsgType } from "matrix-js-sdk/src/matrix";
-import classNames from "classnames";
-
-import { _t } from "../../../languageHandler";
-import { MessagePreviewStore } from "../../../stores/message-preview";
-import { useAsyncMemo } from "../../../hooks/useAsyncMemo";
-import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import { useTypedEventEmitter } from "../../../hooks/useEventEmitter.ts";
-
-/**
- * The props for the {@link EventPreview} component.
- */
-interface Props extends HTMLProps<HTMLSpanElement> {
-    /**
-     * The event to display the preview for
-     */
-    mxEvent: MatrixEvent;
-}
-
-/**
- * A component that displays a preview for the given event.
- * Wraps both `useEventPreview` & `EventPreviewTile`.
- */
-export function EventPreview({ mxEvent, className, ...props }: Props): JSX.Element | null {
-    const preview = useEventPreview(mxEvent);
-    if (!preview) return null;
-
-    return <EventPreviewTile {...props} preview={preview} className={className} />;
-}
-
-/**
- * The props for the {@link EventPreviewTile} component.
- */
-interface EventPreviewTileProps extends HTMLProps<HTMLSpanElement> {
-    /**
-     * The preview to display
-     */
-    preview: Preview;
-}
-
-/**
- * A component that displays a preview given the output from `useEventPreview`.
- */
-export function EventPreviewTile({
-    preview: [preview, prefix],
-    className,
-    ...props
-}: EventPreviewTileProps): JSX.Element | null {
-    const classes = classNames("mx_EventPreview", className);
-    if (!prefix)
-        return (
-            <span {...props} className={classes} title={preview}>
-                {preview}
-            </span>
-        );
-
-    return (
-        <span {...props} className={classes}>
-            {_t(
-                "event_preview|preview",
-                {
-                    prefix,
-                    preview,
-                },
-                {
-                    bold: (sub) => <span className="mx_EventPreview_prefix">{sub}</span>,
-                },
-            )}
-        </span>
-    );
-}
-
-type Preview = [preview: string, prefix: string | null];
-
-/**
- * Hooks to generate a preview for the event.
- * @param mxEvent
- */
-export function useEventPreview(mxEvent: MatrixEvent | undefined): Preview | null {
-    const cli = useContext(MatrixClientContext);
-    // track the content as a means to regenerate the preview upon edits & decryption
-    const [content, setContent] = useState<IContent | undefined>(mxEvent?.getContent());
-    useTypedEventEmitter(mxEvent ?? undefined, MatrixEventEvent.Replaced, () => {
-        setContent(mxEvent!.getContent());
-    });
-    const awaitDecryption = mxEvent?.shouldAttemptDecryption() || mxEvent?.isBeingDecrypted();
-    useTypedEventEmitter(awaitDecryption ? (mxEvent ?? undefined) : undefined, MatrixEventEvent.Decrypted, () => {
-        setContent(mxEvent!.getContent());
-    });
-
-    return useAsyncMemo(
-        async () => {
-            if (!mxEvent || mxEvent.isRedacted() || mxEvent.isDecryptionFailure()) return null;
-            await cli.decryptEventIfNeeded(mxEvent);
-            return [
-                MessagePreviewStore.instance.generatePreviewForEvent(mxEvent),
-                getPreviewPrefix(mxEvent.getType(), content?.msgtype as MsgType),
-            ];
-        },
-        [mxEvent, content],
-        null,
-    );
-}
-
-/**
- * Get the prefix for the preview based on the type and the message type.
- * @param type
- * @param msgType
- */
-function getPreviewPrefix(type: string, msgType: MsgType): string | null {
-    switch (type) {
-        case M_POLL_START.name:
-            return _t("event_preview|prefix|poll");
-        default:
-    }
-
-    switch (msgType) {
-        case MsgType.Audio:
-            return _t("event_preview|prefix|audio");
-        case MsgType.Image:
-            return _t("event_preview|prefix|image");
-        case MsgType.Video:
-            return _t("event_preview|prefix|video");
-        case MsgType.File:
-            return _t("event_preview|prefix|file");
-        default:
-            return null;
-    }
-}
diff --git a/apps/web/src/components/views/rooms/EventTile.tsx b/apps/web/src/components/views/rooms/EventTile.tsx
index 0590c06887..756b8e33ea 100644
--- a/apps/web/src/components/views/rooms/EventTile.tsx
+++ b/apps/web/src/components/views/rooms/EventTile.tsx
@@ -9,123 +9,109 @@ Please see LICENSE files in the repository root for full details.
 
 import React, {
     createRef,
-    useCallback,
-    useContext,
     useEffect,
-    useMemo,
-    useState,
     type JSX,
     type Ref,
     type FocusEvent,
     type MouseEvent,
     type ReactNode,
 } from "react";
-import classNames from "classnames";
 import {
     EventStatus,
-    EventType,
     type MatrixEvent,
     MatrixEventEvent,
-    MsgType,
-    type NotificationCountType,
     type Relations,
-    type RelationType,
     type Room,
-    RelationsEvent,
     RoomEvent,
     type RoomMember,
     type Thread,
     ThreadEvent,
 } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
-import { CallErrorCode } from "matrix-js-sdk/src/webrtc/call";
-import {
-    CryptoEvent,
-    DecryptionFailureCode,
-    EventShieldColour,
-    EventShieldReason,
-    type UserVerificationStatus,
-} from "matrix-js-sdk/src/crypto-api";
-import { Tooltip } from "@vector-im/compound-web";
-import { uniqueId, uniqBy } from "lodash";
-import { CircleIcon, CheckCircleIcon, ThreadsIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-import {
-    useCreateAutoDisposedViewModel,
-    ActionBarView,
-    MessageTimestampView,
-    PinnedMessageBadge,
-    ReactionsRowButtonView,
-    ReactionsRowView,
-    TileErrorView,
-    useViewModel,
-} from "@element-hq/web-shared-components";
+import { uniqueId } from "lodash";
+import { useCreateAutoDisposedViewModel, TileErrorView } from "@element-hq/web-shared-components";
 
 import ReplyChain from "../elements/ReplyChain";
 import { _t } from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
 import { Layout } from "../../../settings/enums/Layout";
+import SettingsStore from "../../../settings/SettingsStore";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import RoomAvatar from "../avatars/RoomAvatar";
 import MessageContextMenu from "../context_menus/MessageContextMenu";
-import ContextMenu, { aboveLeftOf, aboveRightOf } from "../../structures/ContextMenu";
+import { aboveRightOf } from "../../structures/ContextMenu";
 import { objectHasDiff } from "../../../utils/objects";
 import type EditorStateTransfer from "../../../utils/EditorStateTransfer";
 import { type RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
-import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
-import NotificationBadge from "./NotificationBadge";
 import type LegacyCallEventGrouper from "../../structures/LegacyCallEventGrouper";
 import { type ComposerInsertPayload } from "../../../dispatcher/payloads/ComposerInsertPayload";
 import { Action } from "../../../dispatcher/actions";
 import PlatformPeg from "../../../PlatformPeg";
-import MemberAvatar from "../avatars/MemberAvatar";
-import SenderProfile from "../messages/SenderProfile";
 import { type IReadReceiptPosition } from "./ReadReceiptMarker";
-import ReactionPicker from "../emojipicker/ReactionPicker";
-import { getEventDisplayInfo } from "../../../utils/EventRenderingUtils";
-import { isContentActionable } from "../../../utils/EventUtils";
 import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
 import { MediaEventHelper } from "../../../utils/MediaEventHelper";
 import { copyPlaintext } from "../../../utils/strings";
 import { DecryptionFailureTracker } from "../../../DecryptionFailureTracker";
 import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
-import { shouldDisplayReply } from "../../../utils/Reply";
 import PosthogTrackers from "../../../PosthogTrackers";
-import { haveRendererForEvent, isMessageEvent, renderTile } from "../../../events/EventTileFactory";
-import ThreadSummary, { ThreadMessagePreview } from "./ThreadSummary";
-import { ReadReceiptGroup } from "./ReadReceiptGroup";
+import { isMessageEvent, renderTile, type EventTileTypeProps } from "../../../events/EventTileFactory";
 import { type ShowThreadPayload } from "../../../dispatcher/payloads/ShowThreadPayload";
-import { isLocalRoom } from "../../../utils/localRoom/isLocalRoom";
 import { UnreadNotificationBadge } from "./NotificationBadge/UnreadNotificationBadge";
 import { getLateEventInfo } from "../../structures/grouper/LateEventGrouper";
-import { Icon as LateIcon } from "../../../../res/img/sensor.svg";
 import PinningUtils from "../../../utils/PinningUtils";
-import { EventPreview } from "./EventPreview";
-import { ElementCallEventType } from "../../../call-types";
-import { E2eMessageSharedIcon } from "./EventTile/E2eMessageSharedIcon.tsx";
-import { E2ePadlock, E2ePadlockIcon } from "./EventTile/E2ePadlock.tsx";
-import SettingsStore from "../../../settings/SettingsStore";
-import { CardContext } from "../right_panel/context";
+import { ActionBarAdapter } from "./EventTile/ActionBarAdapter";
+import { E2eStandardPadlockIcon } from "./EventTile/E2eStandardPadlockIcon";
+import { E2eMessageSharedIconAdapter } from "./EventTile/E2eMessageSharedIconAdapter";
+import { EventTileAvatarAdapter } from "./EventTile/EventTileAvatarAdapter";
+import { ReceiptAdapter } from "./EventTile/ReceiptAdapter";
+import { EventTileSenderAdapter } from "./EventTile/EventTileSenderAdapter";
+import { ThreadListActionBarAdapter } from "./EventTile/ThreadListActionBarAdapter";
+import { EventTileFooter } from "./EventTile/EventTileFooter";
+import { EventTilePreviewBody } from "./EventTile/EventTilePreviewBody";
+import { EventTileThreadInfo, EventTileThreadPanelSummary } from "./EventTile/EventTileThreadInfo";
+import { EventTileTimestampSlot } from "./EventTile/EventTileTimestampSlot";
 import {
-    MessageTimestampViewModel,
-    type MessageTimestampViewModelProps,
-} from "../../../viewmodels/room/timeline/event-tile/timestamp/MessageTimestampViewModel.ts";
-import { ReactionsRowButtonViewModel } from "../../../viewmodels/room/timeline/event-tile/reactions/ReactionsRowButtonViewModel";
+    EventTileViewModel,
+    type EventTileRenderState,
+    type EventTileViewModelProps,
+    type EventTileViewModelDependencies,
+} from "../../../viewmodels/room/timeline/event-tile/EventTileViewModel";
 import {
-    MAX_ITEMS_WHEN_LIMITED,
-    ReactionsRowViewModel,
-} from "../../../viewmodels/room/timeline/event-tile/reactions/ReactionsRowViewModel";
+    getEventTileReceiptState,
+    type EventTileReceiptState,
+} from "../../../viewmodels/room/timeline/event-tile/EventTileReceiptState";
+import {
+    getEventTileThread,
+    getEventTileThreadState,
+    type EventTileThreadState,
+} from "../../../viewmodels/room/timeline/event-tile/EventTileThreadState";
+import {
+    eventTileActionBarFocusChange,
+    eventTileBlurWithin,
+    eventTileClearHover,
+    eventTileCloseContextMenu,
+    eventTileFocusWithin,
+    eventTileMouseEnter,
+    eventTileMouseLeave,
+    eventTileOpenContextMenu,
+    initialEventTileInteractionState,
+    type EventTileInteractionState,
+} from "../../../viewmodels/room/timeline/event-tile/EventTileInteractionState";
+import { type MessageTimestampViewModelProps } from "../../../viewmodels/room/timeline/event-tile/timestamp/MessageTimestampViewModel.ts";
+import {
+    getEventTileReactionRelations,
+    isEventTileReactionRelation,
+    type GetRelationsForEvent,
+} from "../../../viewmodels/room/timeline/event-tile/reactions/EventTileReactionState";
 import { TileErrorViewModel } from "../../../viewmodels/message-body/TileErrorViewModel";
-import { EventTileActionBarViewModel } from "../../../viewmodels/room/EventTileActionBarViewModel";
-import { ThreadListActionBarViewModel } from "../../../viewmodels/room/ThreadListActionBarViewModel";
-import { useMatrixClientContext } from "../../../contexts/MatrixClientContext";
 import { useSettingValue } from "../../../hooks/useSettings";
-import { DecryptionFailureBodyFactory, RedactedBodyFactory } from "../messages/MBodyFactory";
+import { resolveRoomMemberProfile, roomMemberToMemberInfo } from "../../../hooks/room/useRoomMemberProfile";
+import { EventTileE2eViewModel } from "../../../viewmodels/room/timeline/event-tile/EventTileE2eViewModel";
+import { shouldHighlightEventTile } from "../../../viewmodels/room/timeline/event-tile/EventTileHighlightState";
+import { shouldHideEventTile } from "../../../viewmodels/room/timeline/event-tile/EventTileVisibilityState";
 
-export type GetRelationsForEvent = (
-    eventId: string,
-    relationType: RelationType | string,
-    eventType: EventType | string,
-) => Relations | null | undefined;
+/** Relation lookup type retained for EventTile consumers. */
+export type { GetRelationsForEvent } from "../../../viewmodels/room/timeline/event-tile/reactions/EventTileReactionState";
 
 // Our component structure for EventTiles on the timeline is:
 //
@@ -138,193 +124,169 @@ export type GetRelationsForEvent = (
 // |    '--------------------------------------'              |
 // '----------------------------------------------------------'
 
+/** Read receipt entry rendered beside an EventTile. */
 export interface IReadReceiptProps {
+    /** User ID that owns the receipt. */
     userId: string;
+    /** Room member profile for the receipt user, if available. */
     roomMember: RoomMember | null;
+    /** Receipt timestamp in milliseconds. */
     ts: number;
 }
 
+/** Operations exposed by specialized event tile body renderers. */
 export interface IEventTileOps {
+    /** Whether the body renderer is currently hiding a widget. */
     isWidgetHidden(): boolean;
+    /** Reveal a hidden widget in the body renderer. */
     unhideWidget(): void;
 }
 
+/** Ref surface exposed by concrete event tile body components. */
 export interface IEventTileType extends React.Component<HTMLDivElement> {
+    /** Optional body-specific operations for context menu actions. */
     getEventTileOps?(): IEventTileOps;
+    /** Media helper owned by the body renderer, when the event has media. */
     getMediaHelper(): MediaEventHelper | undefined;
 }
 
+/** Props used to render an event in a room timeline surface. */
 export interface EventTileProps {
-    // the MatrixEvent to show
+    /** Matrix event to render. */
     mxEvent: MatrixEvent;
 
-    // true if mxEvent is redacted. This is a prop because using mxEvent.isRedacted()
-    // might not be enough when deciding shouldComponentUpdate - prevProps.mxEvent
-    // references the same this.props.mxEvent.
+    /**
+     * Whether the event is redacted.
+     * This mirrors `mxEvent.isRedacted()` because `mxEvent` may retain object identity across updates.
+     */
     isRedacted?: boolean;
 
-    // true if this is a continuation of the previous event (which has the
-    // effect of not showing another avatar/displayname
+    /** Whether this event continues the previous sender block. */
     continuation?: boolean;
 
-    // true if this is the last event in the timeline (which has the effect
-    // of always showing the timestamp)
+    /** Whether this is the last event in the timeline. */
     last?: boolean;
 
-    // true if the event is the last event in a section (adds a css class for
-    // targeting)
+    /** Whether this is the last event in a timeline section. */
     lastInSection?: boolean;
 
-    // True if the event is the last successful (sent) event.
+    /** Whether this is the most recent successfully sent event. */
     lastSuccessful?: boolean;
 
-    // true if this is search context (which has the effect of greying out
-    // the text
+    /** Whether this tile is rendered with search-context styling. */
     contextual?: boolean;
 
-    // a list of words to highlight, ordered by longest first
+    /** Words to highlight in the event body, ordered longest first. */
     highlights?: string[];
 
-    // link URL for the highlights
+    /** Link URL used for highlighted terms. */
     highlightLink?: string;
 
-    // should show URL previews for this event
+    /** Whether URL previews should be shown for this event. */
     showUrlPreview?: boolean;
 
-    // is this the focused event
+    /** Whether this is the currently selected event. */
     isSelectedEvent?: boolean;
 
+    /** Resize observer used by the parent timeline, if any. */
     resizeObserver?: ResizeObserver;
 
-    // a list of read-receipts we should show. Each object has a 'roomMember' and 'ts'.
+    /** Read receipts to show for this event. */
     readReceipts?: IReadReceiptProps[];
 
-    // opaque readreceipt info for each userId; used by ReadReceiptMarker
-    // to manage its animations. Should be an empty object when the room
-    // first loads
+    /** Opaque read receipt animation state keyed by user ID. */
     readReceiptMap?: { [userId: string]: IReadReceiptPosition };
 
-    // A function which is used to check if the parent panel is being
-    // unmounted, to avoid unnecessary work. Should return true if we
-    // are being unmounted.
+    /** Returns whether the parent panel is unmounting and tile work should be skipped. */
     checkUnmounting?: () => boolean;
 
-    // the status of this event - ie, mxEvent.status. Denormalised to here so
-    // that we can tell when it changes.
+    /** Denormalized `mxEvent.status` so status changes can trigger tile updates. */
     eventSendStatus?: EventStatus;
 
+    /** Whether this tile is being rendered for export. */
     forExport?: boolean;
 
-    // show twelve hour timestamps
+    /** Whether timestamps should use twelve-hour formatting. */
     isTwelveHour?: boolean;
 
-    // helper function to access relations for this event
+    /** Helper used to access relations for this event. */
     getRelationsForEvent?: GetRelationsForEvent;
 
-    // whether to show reactions for this event
+    /** Whether reactions should be shown for this event. */
     showReactions?: boolean;
 
-    // which layout to use
+    /** Timeline layout used by this tile. */
     layout?: Layout;
 
-    // whether or not to show read receipts
+    /** Whether read receipts should be shown for this event. */
     showReadReceipts?: boolean;
 
-    // Used while editing, to pass the event, and to preserve editor state
-    // from one editor instance to another when remounting the editor
-    // upon receiving the remote echo for an unsent event.
+    /** Editor state used while editing and across remote echo remounts. */
     editState?: EditorStateTransfer;
 
-    // Event ID of the event replacing the content of this event, if any
+    /** Event ID replacing this event's content, if any. */
     replacingEventId?: string;
 
-    // Helper to build permalinks for the room
+    /** Helper used to build room and event permalinks. */
     permalinkCreator?: RoomPermalinkCreator;
 
-    // LegacyCallEventGrouper for this event
+    /** Legacy call event grouping state for this event. */
     callEventGrouper?: LegacyCallEventGrouper;
 
-    // Symbol of the root node
+    /** Element type used for the root node. */
     as?: string;
 
-    // whether or not to always show timestamps
+    /** Whether timestamps should always be visible. */
     alwaysShowTimestamps?: boolean;
 
-    // whether or not to display the sender
+    /** Whether sender identity should be hidden. */
     hideSender?: boolean;
 
-    // whether or not to display thread info
+    /** Whether thread information should be shown. */
     showThreadInfo?: boolean;
 
-    // if specified and `true`, the message is being
-    // hidden for moderation from other users but is
-    // displayed to the current user either because they're
-    // the author or they are a moderator
+    /** Whether the current user can see a message hidden from other users for moderation. */
     isSeeingThroughMessageHiddenForModeration?: boolean;
 
-    // The following properties are used by EventTilePreview to disable tab indexes within the event tile
+    /** Whether sender profile rendering should use the event-time member snapshot. */
+    useEventSenderSnapshot?: boolean;
+
+    /** Whether the timestamp should be hidden for preview rendering. */
     hideTimestamp?: boolean;
+    /** Whether interactive controls inside the tile should be inhibited. */
     inhibitInteraction?: boolean;
 
+    /** Ref for imperative access to the unwrapped tile instance. */
     ref?: Ref<UnwrappedEventTile>;
 }
 
 interface IState {
-    // Whether the action bar is focused.
-    actionBarFocused: boolean;
-    showActionBarFromFocus: boolean;
-
-    /**
-     * E2EE shield we should show for decryption problems.
-     *
-     * Note this will be `EventShieldColour.NONE` for all unencrypted events, **including those in encrypted rooms**.
-     */
-    shieldColour: EventShieldColour;
-
-    /**
-     * Reason code for the E2EE shield. `null` if `shieldColour` is `EventShieldColour.NONE`
-     */
-    shieldReason: EventShieldReason | null;
+    interaction: EventTileInteractionState;
 
     // The Relations model from the JS SDK for reactions to `mxEvent`
     reactions?: Relations | null | undefined;
 
-    hover: boolean;
-    focusWithin: boolean;
-
-    // Position of the context menu
-    contextMenu?: {
-        position: Pick<DOMRect, "top" | "left" | "bottom">;
-        link?: string;
-    };
-
     isQuoteExpanded?: boolean;
 
     thread: Thread | null;
-    threadNotification?: NotificationCountType;
 }
 
-/**
- * When true, the tile qualifies for some sort of special read receipt.
- * This could be a 'sending' or 'sent' receipt, for example.
- * @returns {boolean}
- */
-export function isEligibleForSpecialReceipt(event: MatrixEvent): boolean {
-    // Determine if the type is relevant to the user.
-    // This notably excludes state events and pretty much anything that can't be sent by the composer as a message.
-    // For those we rely on local echo giving the impression of things changing, and expect them to be quick.
-    if (!isMessageEvent(event) && event.getType() !== EventType.RoomMessageEncrypted) return false;
-
-    // Default case
-    return true;
+interface EventTileRenderInputs {
+    hasPinnedMessageBadge: boolean;
+    hasReactionsRow: boolean;
+    threadState: EventTileThreadState;
+    isOwnEvent: boolean;
 }
 
-// MUST be rendered within a RoomContext with a set timelineRenderingType
+/** EventTile implementation rendered inside a RoomContext with `timelineRenderingType` set. */
 export class UnwrappedEventTile extends React.Component<EventTileProps, IState> {
     private suppressReadReceiptAnimation: boolean;
     private isListeningForReceipts: boolean;
     private tile = createRef<IEventTileType>();
     private replyChain = createRef<ReplyChain>();
+    private readonly viewModel: EventTileViewModel;
+    private readonly e2eViewModel: EventTileE2eViewModel;
+    private e2eViewModelSubscription?: () => void;
 
     public readonly ref = createRef<HTMLElement>();
 
@@ -336,31 +298,36 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
     public static contextType = RoomContext;
     declare public context: React.ContextType<typeof RoomContext>;
 
-    private unmounted = false;
     private readonly id = uniqueId();
+    private staleHoverCheckActive = false;
 
     public constructor(props: EventTileProps, context: React.ContextType<typeof RoomContext>) {
         super(props, context);
 
-        const thread = this.thread;
+        const thread = getEventTileThread(
+            this.props.mxEvent,
+            MatrixClientPeg.safeGet().getRoom(this.props.mxEvent.getRoomId()),
+        );
 
         this.state = {
-            // Whether the action bar is focused.
-            actionBarFocused: false,
-            showActionBarFromFocus: false,
-
-            shieldColour: EventShieldColour.NONE,
-            shieldReason: null,
+            interaction: initialEventTileInteractionState,
 
             // The Relations model from the JS SDK for reactions to `mxEvent`
             reactions: this.getReactions(),
 
-            hover: false,
-            focusWithin: false,
-
             thread,
         };
 
+        this.viewModel = new EventTileViewModel(this.createViewModelDependencies(), this.createViewModelProps());
+
+        this.e2eViewModel = new EventTileE2eViewModel({
+            cli: MatrixClientPeg.safeGet(),
+            mxEvent: this.props.mxEvent,
+            isRoomEncrypted: this.context.isRoomEncrypted,
+            eventSendStatus: this.props.eventSendStatus,
+            enableListeners: !this.props.forExport,
+        });
+
         // don't do RR animations until we are mounted
         this.suppressReadReceiptAnimation = true;
 
@@ -372,70 +339,29 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
         this.isListeningForReceipts = false;
     }
 
-    /**
-     * When true, the tile qualifies for some sort of special read receipt. This could be a 'sending'
-     * or 'sent' receipt, for example.
-     * @returns {boolean}
-     */
-    private get isEligibleForSpecialReceipt(): boolean {
-        // First, if there are other read receipts then just short-circuit this.
-        if (this.props.readReceipts && this.props.readReceipts.length > 0) return false;
-        if (!this.props.mxEvent) return false;
+    private get receiptState(): EventTileReceiptState {
+        const client = MatrixClientPeg.safeGet();
 
-        // Sanity check (should never happen, but we shouldn't explode if it does)
-        const room = MatrixClientPeg.safeGet().getRoom(this.props.mxEvent.getRoomId());
-        if (!room) return false;
-
-        // Quickly check to see if the event was sent by us. If it wasn't, it won't qualify for
-        // special read receipts.
-        const myUserId = MatrixClientPeg.safeGet().getSafeUserId();
-        // Check to see if the event was sent by us. If it wasn't, it won't qualify for special read receipts.
-        if (this.props.mxEvent.getSender() !== myUserId) return false;
-        return isEligibleForSpecialReceipt(this.props.mxEvent);
-    }
-
-    private get shouldShowSentReceipt(): boolean {
-        // If we're not even eligible, don't show the receipt.
-        if (!this.isEligibleForSpecialReceipt) return false;
-
-        // We only show the 'sent' receipt on the last successful event.
-        if (!this.props.lastSuccessful) return false;
-
-        // Don't show this in the thread view as it conflicts with the thread counter.
-        if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList) return false;
-
-        // Check to make sure the sending state is appropriate. A null/undefined send status means
-        // that the message is 'sent', so we're just double checking that it's explicitly not sent.
-        if (this.props.eventSendStatus && this.props.eventSendStatus !== EventStatus.SENT) return false;
-
-        // If anyone has read the event besides us, we don't want to show a sent receipt.
-        const receipts = this.props.readReceipts || [];
-        const myUserId = MatrixClientPeg.safeGet().getUserId();
-        if (receipts.some((r) => r.userId !== myUserId)) return false;
-
-        // Finally, we should show a receipt.
-        return true;
-    }
-
-    private get shouldShowSendingReceipt(): boolean {
-        // If we're not even eligible, don't show the receipt.
-        if (!this.isEligibleForSpecialReceipt) return false;
-
-        // Check the event send status to see if we are pending. Null/undefined status means the
-        // message was sent, so check for that and 'sent' explicitly.
-        if (!this.props.eventSendStatus || this.props.eventSendStatus === EventStatus.SENT) return false;
-
-        // Default to showing - there's no other event properties/behaviours we care about at
-        // this point.
-        return true;
+        return getEventTileReceiptState({
+            mxEvent: this.props.mxEvent,
+            readReceipts: this.props.readReceipts,
+            hasRoom: !!client.getRoom(this.props.mxEvent.getRoomId()),
+            ownUserId: client.getSafeUserId(),
+            lastSuccessful: this.props.lastSuccessful,
+            eventSendStatus: this.props.eventSendStatus,
+            timelineRenderingType: this.context.timelineRenderingType,
+        });
     }
 
     public componentDidMount(): void {
-        this.unmounted = false;
         this.suppressReadReceiptAnimation = false;
+        this.e2eViewModelSubscription = this.e2eViewModel.subscribe(() => {
+            this.forceUpdate();
+        });
+        this.e2eViewModel.start();
+
         const client = MatrixClientPeg.safeGet();
         if (!this.props.forExport) {
-            client.on(CryptoEvent.UserTrustStatusChanged, this.onUserVerificationChanged);
             this.props.mxEvent.on(MatrixEventEvent.Decrypted, this.onDecrypted);
             this.props.mxEvent.on(MatrixEventEvent.Replaced, this.onReplaced);
             DecryptionFailureTracker.instance.addVisibleEvent(this.props.mxEvent);
@@ -443,7 +369,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                 this.props.mxEvent.on(MatrixEventEvent.RelationsCreated, this.onReactionsCreated);
             }
 
-            if (this.shouldShowSentReceipt || this.shouldShowSendingReceipt) {
+            if (this.receiptState.shouldListenForReceipts) {
                 client.on(RoomEvent.Receipt, this.onRoomReceipt);
                 this.isListeningForReceipts = true;
             }
@@ -455,8 +381,6 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
 
         const room = client.getRoom(this.props.mxEvent.getRoomId());
         room?.on(ThreadEvent.New, this.onNewThread);
-
-        this.verifyEvent();
     }
 
     private readonly updateThread = (thread: Thread): void => {
@@ -472,9 +396,9 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
     }
 
     public componentWillUnmount(): void {
+        this.stopStaleHoverCheck();
         const client = MatrixClientPeg.get();
         if (client) {
-            client.removeListener(CryptoEvent.UserTrustStatusChanged, this.onUserVerificationChanged);
             client.removeListener(RoomEvent.Receipt, this.onRoomReceipt);
             const room = client.getRoom(this.props.mxEvent.getRoomId());
             room?.off(ThreadEvent.New, this.onNewThread);
@@ -486,22 +410,48 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
             this.props.mxEvent.removeListener(MatrixEventEvent.RelationsCreated, this.onReactionsCreated);
         }
         this.props.mxEvent.off(ThreadEvent.Update, this.updateThread);
-        this.unmounted = false;
+        this.e2eViewModelSubscription?.();
+        this.e2eViewModelSubscription = undefined;
+        this.e2eViewModel.dispose();
+        this.viewModel.dispose();
         if (this.props.resizeObserver && this.ref.current) this.props.resizeObserver.unobserve(this.ref.current);
     }
 
-    public componentDidUpdate(prevProps: Readonly<EventTileProps>, prevState: Readonly<IState>): void {
+    public componentDidUpdate(_prevProps: Readonly<EventTileProps>, prevState: Readonly<IState>): void {
+        // Some overlays, such as portalled tooltips, can interrupt the normal mouseleave path.
+        // While hover is active, verify it against the browser's real :hover state on mouse movement.
+        if (!prevState.interaction.hover && this.state.interaction.hover) {
+            this.startStaleHoverCheck();
+        } else if (prevState.interaction.hover && !this.state.interaction.hover) {
+            this.stopStaleHoverCheck();
+        }
+
         // If we're not listening for receipts and expect to be, register a listener.
-        if (!this.isListeningForReceipts && (this.shouldShowSentReceipt || this.shouldShowSendingReceipt)) {
+        if (!this.isListeningForReceipts && this.receiptState.shouldListenForReceipts) {
             MatrixClientPeg.safeGet().on(RoomEvent.Receipt, this.onRoomReceipt);
             this.isListeningForReceipts = true;
         }
-        // re-check the sender verification as outgoing events progress through the send process.
-        if (prevProps.eventSendStatus !== this.props.eventSendStatus) {
-            this.verifyEvent();
-        }
+        this.e2eViewModel.setProps({
+            mxEvent: this.props.mxEvent,
+            isRoomEncrypted: this.context.isRoomEncrypted,
+            eventSendStatus: this.props.eventSendStatus,
+            enableListeners: !this.props.forExport,
+        });
 
         if (this.props.resizeObserver && this.ref.current) this.props.resizeObserver.observe(this.ref.current);
+
+        // Moving between edited messages can remount the editor without a reliable blur event.
+        // Clear stale focus-derived action bar state when focus has actually left this tile.
+        if (
+            this.state.interaction.focusWithin &&
+            this.ref.current &&
+            document.activeElement instanceof HTMLElement &&
+            !this.ref.current.contains(document.activeElement)
+        ) {
+            this.setState((prevState) => ({
+                interaction: eventTileBlurWithin(prevState.interaction),
+            }));
+        }
     }
 
     private readonly onNewThread = (thread: Thread): void => {
@@ -512,59 +462,13 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
         }
     };
 
-    private get thread(): Thread | null {
-        let thread: Thread | undefined = this.props.mxEvent.getThread();
-        /**
-         * Accessing the threads value through the room due to a race condition
-         * that will be solved when there are proper backend support for threads
-         * We currently have no reliable way to discover than an event is a thread
-         * when we are at the sync stage
-         */
-        if (!thread) {
-            const room = MatrixClientPeg.safeGet().getRoom(this.props.mxEvent.getRoomId());
-            thread = room?.findThreadForEvent(this.props.mxEvent) ?? undefined;
-        }
-        return thread ?? null;
-    }
-
-    private renderThreadPanelSummary(): JSX.Element | null {
-        if (!this.state.thread) {
-            return null;
-        }
-
-        return (
-            <div className="mx_ThreadPanel_replies">
-                <ThreadsIcon />
-                <span className="mx_ThreadPanel_replies_amount">{this.state.thread.length}</span>
-                <ThreadMessagePreview thread={this.state.thread} />
-            </div>
-        );
-    }
-
-    private renderThreadInfo(): React.ReactNode {
-        if (this.state.thread && this.state.thread.id === this.props.mxEvent.getId()) {
-            return (
-                <ThreadSummary mxEvent={this.props.mxEvent} thread={this.state.thread} data-testid="thread-summary" />
-            );
-        }
-
-        if (this.context.timelineRenderingType === TimelineRenderingType.Search && this.props.mxEvent.threadRootId) {
-            if (this.props.highlightLink) {
-                return (
-                    <a className="mx_ThreadSummary_icon" href={this.props.highlightLink}>
-                        <ThreadsIcon />
-                        {_t("timeline|thread_info_basic")}
-                    </a>
-                );
-            }
-
-            return (
-                <p className="mx_ThreadSummary_icon">
-                    <ThreadsIcon />
-                    {_t("timeline|thread_info_basic")}
-                </p>
-            );
-        }
+    private get threadState(): EventTileThreadState {
+        return getEventTileThreadState({
+            mxEvent: this.props.mxEvent,
+            thread: this.state.thread,
+            timelineRenderingType: this.context.timelineRenderingType,
+            highlightLink: this.props.highlightLink,
+        });
     }
 
     private readonly onViewInRoomClick = (_anchor: HTMLElement | null): void => {
@@ -589,7 +493,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
         const tileRoom = MatrixClientPeg.safeGet().getRoom(this.props.mxEvent.getRoomId());
         if (room !== tileRoom) return;
 
-        if (!this.shouldShowSentReceipt && !this.shouldShowSendingReceipt && !this.isListeningForReceipts) {
+        if (!this.receiptState.shouldListenForReceipts && !this.isListeningForReceipts) {
             return;
         }
 
@@ -597,7 +501,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
         // the getters we use here to determine what needs rendering.
         this.forceUpdate(() => {
             // Per elsewhere in this file, we can remove the listener once we will have no further purpose for it.
-            if (!this.shouldShowSentReceipt && !this.shouldShowSendingReceipt) {
+            if (!this.receiptState.shouldListenForReceipts) {
                 MatrixClientPeg.safeGet().removeListener(RoomEvent.Receipt, this.onRoomReceipt);
                 this.isListeningForReceipts = false;
             }
@@ -607,53 +511,16 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
     /** called when the event is decrypted after we show it.
      */
     private readonly onDecrypted = (): void => {
-        // we need to re-verify the sending device.
-        this.verifyEvent();
+        // E2E padlock verification is handled by EventTileE2eViewModel; this refreshes the rest of the tile body.
         this.forceUpdate();
     };
 
-    private readonly onUserVerificationChanged = (userId: string, _trustStatus: UserVerificationStatus): void => {
-        if (userId === this.props.mxEvent.getSender()) {
-            this.verifyEvent();
-        }
-    };
-
     /** called when the event is edited after we show it. */
     private readonly onReplaced = (): void => {
+        // E2E padlock verification is handled by EventTileE2eViewModel; this refreshes the rest of the tile body.
         this.forceUpdate();
-        // re-verify the event if it is replaced (the edit may not be verified)
-        this.verifyEvent();
     };
 
-    private verifyEvent(): void {
-        this.doVerifyEvent().catch((e) => {
-            const event = this.props.mxEvent;
-            logger.error(`Error getting encryption info on event ${event.getId()} in room ${event.getRoomId()}`, e);
-        });
-    }
-
-    private async doVerifyEvent(): Promise<void> {
-        // if the event was edited, show the verification info for the edit, not
-        // the original
-        const mxEvent = this.props.mxEvent.replacingEvent() ?? this.props.mxEvent;
-
-        if (!mxEvent.isEncrypted() || mxEvent.isRedacted()) {
-            this.setState({ shieldColour: EventShieldColour.NONE, shieldReason: null });
-            return;
-        }
-
-        const encryptionInfo =
-            (await MatrixClientPeg.safeGet().getCrypto()?.getEncryptionInfoForEvent(mxEvent)) ?? null;
-        if (this.unmounted) return;
-        if (encryptionInfo === null) {
-            // likely a decryption error
-            this.setState({ shieldColour: EventShieldColour.NONE, shieldReason: null });
-            return;
-        }
-
-        this.setState({ shieldColour: encryptionInfo.shieldColour, shieldReason: encryptionInfo.shieldReason });
-    }
-
     private propsEqual(objA: EventTileProps, objB: EventTileProps): boolean {
         const keysA = Object.keys(objA) as Array<keyof EventTileProps>;
         const keysB = Object.keys(objB) as Array<keyof EventTileProps>;
@@ -702,39 +569,6 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
         return true;
     }
 
-    /**
-     * Determine whether an event should be highlighted
-     * For edited events, if a previous version of the event was highlighted
-     * the event should remain highlighted as the user may have been notified
-     * (Clearer explanation of why an event is highlighted is planned -
-     * https://github.com/vector-im/element-web/issues/24927)
-     * @returns boolean
-     */
-    private shouldHighlight(): boolean {
-        if (this.props.forExport) return false;
-        if (this.context.timelineRenderingType === TimelineRenderingType.Notification) return false;
-        if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList) return false;
-
-        if (this.props.isRedacted) return false;
-
-        const cli = MatrixClientPeg.safeGet();
-        const actions = cli.getPushActionsForEvent(this.props.mxEvent.replacingEvent() || this.props.mxEvent);
-        // get the actions for the previous version of the event too if it is an edit
-        const previousActions = this.props.mxEvent.replacingEvent()
-            ? cli.getPushActionsForEvent(this.props.mxEvent)
-            : undefined;
-        if (!actions?.tweaks && !previousActions?.tweaks) {
-            return false;
-        }
-
-        // don't show self-highlights from another of our clients
-        if (this.props.mxEvent.getSender() === cli.credentials.userId) {
-            return false;
-        }
-
-        return !!(actions?.tweaks.highlight || previousActions?.tweaks.highlight);
-    }
-
     private readonly onSenderProfileClick = (): void => {
         dis.dispatch<ComposerInsertPayload>({
             action: Action.ComposerInsert,
@@ -758,119 +592,74 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
     };
 
     private renderE2EPadlock(): ReactNode {
-        // if the event was edited, show the verification info for the edit, not
-        // the original
-        const ev = this.props.mxEvent.replacingEvent() ?? this.props.mxEvent;
+        const e2ePadlockViewState = this.e2eViewModel.getSnapshot();
 
-        // no icon for local rooms
-        if (isLocalRoom(ev.getRoomId()!)) return null;
-
-        // event could not be decrypted
-        if (ev.isDecryptionFailure()) {
-            switch (ev.decryptionFailureReason) {
-                // These two errors get icons from DecryptionFailureBody, so we hide the padlock icon
-                case DecryptionFailureCode.SENDER_IDENTITY_PREVIOUSLY_VERIFIED:
-                case DecryptionFailureCode.UNSIGNED_SENDER_DEVICE:
-                    return null;
-                default:
-                    return <E2ePadlockDecryptionFailure />;
-            }
-        }
-
-        if (this.state.shieldReason === EventShieldReason.AUTHENTICITY_NOT_GUARANTEED) {
-            // This may happen if the message was forwarded to us by another user, in which case we can show a better message
-            const forwarder = this.props.mxEvent.getKeyForwardingUser();
-            if (forwarder) {
-                return <E2eMessageSharedIcon keyForwardingUserId={forwarder} roomId={ev.getRoomId()!} />;
-            }
-        }
-
-        if (this.state.shieldColour !== EventShieldColour.NONE) {
-            let shieldReasonMessage: string;
-            switch (this.state.shieldReason) {
-                case EventShieldReason.UNVERIFIED_IDENTITY:
-                    shieldReasonMessage = _t("encryption|event_shield_reason_unverified_identity");
-                    break;
-
-                case EventShieldReason.UNSIGNED_DEVICE:
-                    shieldReasonMessage = _t("encryption|event_shield_reason_unsigned_device");
-                    break;
-
-                case EventShieldReason.UNKNOWN_DEVICE:
-                    shieldReasonMessage = _t("encryption|event_shield_reason_unknown_device");
-                    break;
-
-                case EventShieldReason.AUTHENTICITY_NOT_GUARANTEED:
-                    shieldReasonMessage = _t("encryption|event_shield_reason_authenticity_not_guaranteed");
-                    break;
-
-                case EventShieldReason.MISMATCHED_SENDER_KEY:
-                    shieldReasonMessage = _t("encryption|event_shield_reason_mismatched_sender_key");
-                    break;
-
-                case EventShieldReason.SENT_IN_CLEAR:
-                    shieldReasonMessage = _t("common|unencrypted");
-                    break;
-
-                case EventShieldReason.VERIFICATION_VIOLATION:
-                    shieldReasonMessage = _t("timeline|decryption_failure|sender_identity_previously_verified");
-                    break;
-
-                case EventShieldReason.MISMATCHED_SENDER:
-                    shieldReasonMessage = _t("encryption|event_shield_reason_mismatched_sender");
-                    break;
-
-                default:
-                    shieldReasonMessage = _t("error|unknown");
-                    break;
-            }
-
-            if (this.state.shieldColour === EventShieldColour.GREY) {
-                return <E2ePadlock icon={E2ePadlockIcon.Normal} title={shieldReasonMessage} />;
-            } else {
-                // red, by elimination
-                return <E2ePadlock icon={E2ePadlockIcon.Warning} title={shieldReasonMessage} />;
-            }
-        }
-
-        if (this.context.isRoomEncrypted) {
-            // else if room is encrypted
-            // and event is being encrypted or is not_sent (Unknown Devices/Network Error)
-            if (ev.status === EventStatus.ENCRYPTING) {
+        switch (e2ePadlockViewState.kind) {
+            case "none":
                 return null;
-            }
-            if (ev.status === EventStatus.NOT_SENT) {
-                return null;
-            }
-            if (ev.isState()) {
-                return null; // we expect this to be unencrypted
-            }
-            if (ev.isRedacted()) {
-                return null; // we expect this to be unencrypted
-            }
-            if (!ev.isEncrypted()) {
-                // if the event is not encrypted, but it's an e2e room, show a warning
-                return <E2ePadlockUnencrypted />;
-            }
+            case "messageShared":
+                return (
+                    <E2eMessageSharedIconAdapter
+                        eventTileViewModel={this.viewModel}
+                        keyForwardingUserId={e2ePadlockViewState.keyForwardingUserId}
+                        roomId={e2ePadlockViewState.roomId}
+                    />
+                );
+            case "icon":
+                return <E2eStandardPadlockIcon icon={e2ePadlockViewState.icon} title={e2ePadlockViewState.title} />;
         }
-
-        // no padlock needed
-        return null;
     }
 
     private readonly onActionBarFocusChange = (actionBarFocused: boolean): void => {
         this.setState((prevState) => ({
-            actionBarFocused,
-            hover: actionBarFocused ? prevState.hover : (this.ref.current?.matches(":hover") ?? false),
+            interaction: eventTileActionBarFocusChange(
+                prevState.interaction,
+                actionBarFocused,
+                this.ref.current?.matches(":hover") ?? false,
+            ),
+        }));
+    };
+
+    private startStaleHoverCheck(): void {
+        if (this.staleHoverCheckActive) return;
+        document.addEventListener("mousemove", this.onDocumentMouseMove, true);
+        this.staleHoverCheckActive = true;
+    }
+
+    private stopStaleHoverCheck(): void {
+        if (!this.staleHoverCheckActive) return;
+        document.removeEventListener("mousemove", this.onDocumentMouseMove, true);
+        this.staleHoverCheckActive = false;
+    }
+
+    private readonly onDocumentMouseMove = (): void => {
+        if (this.state.interaction.hover && !(this.ref.current?.matches(":hover") ?? false)) {
+            this.setState((prevState) => ({
+                interaction: eventTileClearHover(prevState.interaction),
+            }));
+        }
+    };
+
+    private readonly onMouseEnter = (): void => {
+        this.setState((prevState) => ({
+            interaction: eventTileMouseEnter(prevState.interaction),
+        }));
+    };
+
+    private readonly onMouseLeave = (): void => {
+        this.setState((prevState) => ({
+            interaction: eventTileMouseLeave(prevState.interaction),
         }));
     };
 
     private readonly onFocusWithin = (event: FocusEvent<HTMLElement>): void => {
         // Show the action toolbar for keyboard-visible focus, with what-input as a fallback signal.
-        const target = event.target as HTMLElement;
+        const target = event.target;
         const showActionBarFromFocus =
             target.matches(":focus-visible") || document.body.dataset["data-whatinput"] === "keyboard";
-        this.setState({ focusWithin: true, showActionBarFromFocus });
+        this.setState((prevState) => ({
+            interaction: eventTileFocusWithin(prevState.interaction, showActionBarFromFocus),
+        }));
     };
 
     private readonly onBlurWithin = (event: FocusEvent<HTMLElement>): void => {
@@ -878,7 +667,9 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
             return;
         }
 
-        this.setState({ focusWithin: false, showActionBarFromFocus: false });
+        this.setState((prevState) => ({
+            interaction: eventTileBlurWithin(prevState.interaction),
+        }));
     };
 
     private readonly getTile: () => IEventTileType | null = () => this.tile.current;
@@ -886,15 +677,23 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
     private readonly getReplyChain = (): ReplyChain | null => this.replyChain.current;
 
     private readonly getReactions = (): Relations | null => {
-        if (!this.props.showReactions || !this.props.getRelationsForEvent) {
-            return null;
+        return getEventTileReactionRelations({
+            mxEvent: this.props.mxEvent,
+            showReactions: this.props.showReactions,
+            getRelationsForEvent: this.props.getRelationsForEvent,
+        });
+    };
+
+    private readonly getAvatarMember = (): RoomMember | null => {
+        if (this.props.mxEvent.getContent().third_party_invite) {
+            return this.props.mxEvent.target;
         }
-        const eventId = this.props.mxEvent.getId()!;
-        return this.props.getRelationsForEvent(eventId, "m.annotation", "m.reaction") ?? null;
+
+        return this.props.mxEvent.sender;
     };
 
     private readonly onReactionsCreated = (relationType: string, eventType: string): void => {
-        if (relationType !== "m.annotation" || eventType !== "m.reaction") {
+        if (!isEventTileReactionRelation(relationType, eventType)) {
             return;
         }
         this.setState({
@@ -929,26 +728,22 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
 
         ev.preventDefault();
         ev.stopPropagation();
-        this.setState({
-            contextMenu: {
+        this.setState((prevState) => ({
+            interaction: eventTileOpenContextMenu(prevState.interaction, {
                 position: {
                     left: ev.clientX,
                     top: ev.clientY,
                     bottom: ev.clientY,
                 },
                 link: anchorElement?.href || permalink,
-            },
-            actionBarFocused: true,
-            hover: false,
-        });
+            }),
+        }));
     }
 
     private readonly onCloseMenu = (): void => {
-        this.setState({
-            contextMenu: undefined,
-            actionBarFocused: false,
-            hover: false,
-        });
+        this.setState((prevState) => ({
+            interaction: eventTileCloseContextMenu(prevState.interaction),
+        }));
     };
 
     private readonly setQuoteExpanded = (expanded: boolean): void => {
@@ -957,20 +752,176 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
         });
     };
 
-    /**
-     * In some cases we can't use shouldHideEvent() since whether or not we hide
-     * an event depends on other things that the event itself
-     * @returns {boolean} true if event should be hidden
-     */
-    private shouldHideEvent(): boolean {
-        // If the call was replaced we don't render anything since we render the other call
-        if (this.props.callEventGrouper?.hangupReason === CallErrorCode.Replaced) return true;
+    private createMessageTimestampProps(ts: number): MessageTimestampViewModelProps {
+        return {
+            showRelative: this.context.timelineRenderingType === TimelineRenderingType.ThreadsList,
+            showTwelveHour: this.props.isTwelveHour,
+            ts,
+            receivedTs: getLateEventInfo(this.props.mxEvent)?.received_ts,
+        };
+    }
 
-        return false;
+    private createLinkedMessageTimestampProps(
+        messageTimestampProps: MessageTimestampViewModelProps,
+    ): MessageTimestampViewModelProps {
+        return {
+            ...messageTimestampProps,
+            href: this.getPermalink(),
+            onClick: this.onPermalinkClicked,
+            onContextMenu: this.onTimestampContextMenu,
+        };
+    }
+
+    private getPermalink(): string {
+        if (this.props.permalinkCreator) {
+            return this.props.permalinkCreator.forEvent(this.props.mxEvent.getId()!);
+        }
+
+        return "#";
+    }
+
+    private createRootAttributes({
+        className,
+        ariaLive,
+        scrollToken,
+    }: EventTileRenderState["root"]): Record<string, unknown> {
+        return {
+            "className": className,
+            "aria-live": ariaLive,
+            "aria-atomic": true,
+            "data-scroll-tokens": scrollToken,
+        };
+    }
+
+    private createInteractiveRootAttributes(rootRenderState: EventTileRenderState["root"]): Record<string, unknown> {
+        return {
+            ...this.createRootAttributes(rootRenderState),
+            ref: this.ref,
+            onMouseEnter: this.onMouseEnter,
+            onMouseLeave: this.onMouseLeave,
+            onFocus: this.onFocusWithin,
+            onBlur: this.onBlurWithin,
+        };
+    }
+
+    private createRenderTileProps({
+        replacingEventId,
+        isSeeingThroughMessageHiddenForModeration,
+        permalinkCreator = this.props.permalinkCreator,
+    }: {
+        replacingEventId?: string;
+        isSeeingThroughMessageHiddenForModeration?: boolean;
+        permalinkCreator?: RoomPermalinkCreator;
+    }): EventTileTypeProps {
+        return {
+            ...this.props,
+            ref: this.tile,
+            ...(replacingEventId === undefined ? {} : { replacingEventId }),
+            isSeeingThroughMessageHiddenForModeration,
+            highlights: this.props.highlights,
+            highlightLink: this.props.highlightLink,
+            permalinkCreator,
+            showHiddenEvents: this.context.showHiddenEvents,
+        };
+    }
+
+    private createViewModelDependencies(): EventTileViewModelDependencies {
+        return {
+            mxEvent: this.props.mxEvent,
+            matrixClient: MatrixClientPeg.safeGet(),
+            showHiddenEvents: this.context.showHiddenEvents,
+            hideEvent: shouldHideEventTile({ callEventGrouper: this.props.callEventGrouper }),
+        };
+    }
+
+    private createRenderInputs(): EventTileRenderInputs {
+        const isRedacted = isMessageEvent(this.props.mxEvent) && this.props.isRedacted;
+        const hasPinnedMessageBadge = PinningUtils.isPinned(MatrixClientPeg.safeGet(), this.props.mxEvent);
+        const hasReactionsRow = !isRedacted;
+        const threadState = this.threadState;
+        // Use `getSender()` because searched events might not have a proper `sender`.
+        const isOwnEvent = this.props.mxEvent?.getSender() === MatrixClientPeg.safeGet().getUserId();
+
+        return {
+            hasPinnedMessageBadge,
+            hasReactionsRow,
+            threadState,
+            isOwnEvent,
+        };
+    }
+
+    private createViewModelProps(inputs: EventTileRenderInputs = this.createRenderInputs()): EventTileViewModelProps {
+        const { hasPinnedMessageBadge, hasReactionsRow, threadState, isOwnEvent } = inputs;
+        const isProbablyMedia = MediaEventHelper.isEligible(this.props.mxEvent);
+        const isEditing = !!this.props.editState;
+        const isSending =
+            this.props.eventSendStatus === EventStatus.SENDING ||
+            this.props.eventSendStatus === EventStatus.QUEUED ||
+            this.props.eventSendStatus === EventStatus.ENCRYPTING;
+
+        return {
+            event: {
+                isSending,
+                ariaLive: this.props.eventSendStatus === null ? undefined : "off",
+                isEditing,
+                forExport: this.props.forExport,
+            },
+            display: {
+                timelineRenderingType: this.context.timelineRenderingType,
+                layout: this.props.layout,
+                continuation: this.props.continuation,
+                isProbablyMedia,
+                isTwelveHour: this.props.isTwelveHour,
+                isHighlighted: shouldHighlightEventTile({
+                    cli: MatrixClientPeg.safeGet(),
+                    mxEvent: this.props.mxEvent,
+                    timelineRenderingType: this.context.timelineRenderingType,
+                    forExport: this.props.forExport,
+                    isRedacted: this.props.isRedacted,
+                }),
+                isSelected: this.props.isSelectedEvent || !!this.state.interaction.contextMenu,
+                isLast: this.props.last,
+                isLastInSection: this.props.lastInSection,
+                isContextual: this.props.contextual,
+            },
+            interaction: {
+                hover: this.state.interaction.hover,
+                showActionBarFromFocus: this.state.interaction.showActionBarFromFocus,
+                focusWithin: this.state.interaction.focusWithin,
+                isActionBarFocused: this.state.interaction.actionBarFocused,
+                hasContextMenu: !!this.state.interaction.contextMenu,
+                inhibitInteraction: this.props.inhibitInteraction,
+            },
+            sender: {
+                member: roomMemberToMemberInfo(
+                    this.props.useEventSenderSnapshot
+                        ? this.getAvatarMember()
+                        : resolveRoomMemberProfile({
+                              room: MatrixClientPeg.safeGet().getRoom(this.props.mxEvent.getRoomId() ?? ""),
+                              userId: this.props.mxEvent.getSender() ?? undefined,
+                              member: this.getAvatarMember(),
+                              useOnlyCurrentProfiles: SettingsStore.getValue("useOnlyCurrentProfiles"),
+                              timelineRenderingType: this.context.timelineRenderingType,
+                          }),
+                ),
+                hideSender: this.props.hideSender,
+            },
+            timestamp: {
+                alwaysShowTimestamps: this.props.alwaysShowTimestamps,
+                hideTimestamp: this.props.hideTimestamp,
+                threadReplyEventTs: threadState.threadReplyEventTs,
+            },
+            footer: {
+                isOwnEvent,
+                hasReactionsRow,
+                hasReactions: !!this.state.reactions,
+                hasPinnedMessageBadge,
+            },
+        };
     }
 
     private renderContextMenu(): ReactNode {
-        if (!this.state.contextMenu) return null;
+        if (!this.state.interaction.contextMenu) return null;
 
         const tile = this.getTile();
         const replyChain = this.getReplyChain();
@@ -979,7 +930,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
 
         return (
             <MessageContextMenu
-                {...aboveRightOf(this.state.contextMenu.position)}
+                {...aboveRightOf(this.state.interaction.contextMenu.position)}
                 mxEvent={this.props.mxEvent}
                 permalinkCreator={this.props.permalinkCreator}
                 eventTileOps={eventTileOps}
@@ -987,36 +938,27 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                 onFinished={this.onCloseMenu}
                 rightClick={true}
                 reactions={this.state.reactions}
-                link={this.state.contextMenu.link}
+                link={this.state.interaction.contextMenu.link}
                 getRelationsForEvent={this.props.getRelationsForEvent}
             />
         );
     }
 
     public render(): ReactNode {
-        const msgtype = this.props.mxEvent.getContent().msgtype;
-        const eventType = this.props.mxEvent.getType();
-        const replacingEventId = this.props.mxEvent.replacingEventId();
-
-        const {
-            hasRenderer,
-            isBubbleMessage,
-            isInfoMessage,
-            isLeftAlignedBubbleMessage,
-            noBubbleEvent,
-            isSeeingThroughMessageHiddenForModeration,
-        } = getEventDisplayInfo(
-            MatrixClientPeg.safeGet(),
-            this.props.mxEvent,
-            this.context.showHiddenEvents,
-            this.shouldHideEvent(),
-        );
         const { isQuoteExpanded } = this.state;
+        const renderInputs = this.createRenderInputs();
+        const { hasPinnedMessageBadge, hasReactionsRow, threadState } = renderInputs;
+
+        this.viewModel.setInputs(this.createViewModelDependencies(), this.createViewModelProps(renderInputs));
+        const eventTileRenderState = this.viewModel.getSnapshot();
+        const eventTileSnapshot = eventTileRenderState.snapshot;
+
         // This shouldn't happen: the caller should check we support this type
         // before trying to instantiate us
-        if (!hasRenderer) {
-            const { mxEvent } = this.props;
-            logger.warn(`Event type not supported: type:${eventType} isState:${mxEvent.isState()}`);
+        if (!eventTileSnapshot.event.hasRenderer) {
+            logger.warn(
+                `Event type not supported: type:${eventTileSnapshot.event.eventType} isState:${eventTileSnapshot.event.isState}`,
+            );
             return (
                 <div className="mx_EventTile mx_EventTile_info mx_MNoticeBody">
                     <div className="mx_EventTile_line">{_t("timeline|error_no_renderer")}</div>
@@ -1024,165 +966,26 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
             );
         }
 
-        const isProbablyMedia = MediaEventHelper.isEligible(this.props.mxEvent);
+        const lineClasses = eventTileRenderState.line.className;
+        const isRenderingNotification = eventTileSnapshot.event.isRenderingNotification;
+        const isSeeingThroughMessageHiddenForModeration =
+            eventTileSnapshot.event.isSeeingThroughMessageHiddenForModeration;
 
-        const lineClasses = classNames("mx_EventTile_line", {
-            mx_EventTile_mediaLine: isProbablyMedia,
-            mx_EventTile_image:
-                this.props.mxEvent.getType() === EventType.RoomMessage &&
-                this.props.mxEvent.getContent().msgtype === MsgType.Image,
-            mx_EventTile_sticker: this.props.mxEvent.getType() === EventType.Sticker,
-            mx_EventTile_emote:
-                this.props.mxEvent.getType() === EventType.RoomMessage &&
-                this.props.mxEvent.getContent().msgtype === MsgType.Emote,
-        });
+        const permalink = this.getPermalink();
+        const rootRenderState = eventTileRenderState.root;
 
-        const isSending = ["sending", "queued", "encrypting"].includes(this.props.eventSendStatus!);
-        const isRedacted = isMessageEvent(this.props.mxEvent) && this.props.isRedacted;
-        const isEncryptionFailure = this.props.mxEvent.isDecryptionFailure();
+        const avatarMember = this.getAvatarMember();
+        const avatar = <EventTileAvatarAdapter avatarMember={avatarMember} senderSnapshot={eventTileSnapshot.sender} />;
+        const sender = (
+            <EventTileSenderAdapter
+                sender={eventTileSnapshot.sender}
+                onSenderProfileClick={this.onSenderProfileClick}
+            />
+        );
 
-        let isContinuation = this.props.continuation;
-        if (
-            this.context.timelineRenderingType !== TimelineRenderingType.Room &&
-            this.context.timelineRenderingType !== TimelineRenderingType.Search &&
-            this.context.timelineRenderingType !== TimelineRenderingType.Thread &&
-            this.props.layout !== Layout.Bubble
-        ) {
-            isContinuation = false;
-        }
-
-        const isRenderingNotification = this.context.timelineRenderingType === TimelineRenderingType.Notification;
-
-        const isEditing = !!this.props.editState;
-        const classes = classNames({
-            mx_EventTile_bubbleContainer: isBubbleMessage,
-            mx_EventTile_leftAlignedBubble: isLeftAlignedBubbleMessage,
-            mx_EventTile: true,
-            mx_EventTile_isEditing: isEditing,
-            mx_EventTile_info: isInfoMessage,
-            mx_EventTile_12hr: this.props.isTwelveHour,
-            // Note: we keep the `sending` state class for tests, not for our styles
-            mx_EventTile_sending: !isEditing && isSending,
-            mx_EventTile_highlight: this.shouldHighlight(),
-            mx_EventTile_selected: this.props.isSelectedEvent || this.state.contextMenu,
-            mx_EventTile_continuation:
-                isContinuation || eventType === EventType.CallInvite || ElementCallEventType.matches(eventType),
-            mx_EventTile_last: this.props.last,
-            mx_EventTile_lastInSection: this.props.lastInSection,
-            mx_EventTile_contextual: this.props.contextual,
-            mx_EventTile_actionBarFocused: this.state.actionBarFocused,
-            mx_EventTile_bad: isEncryptionFailure,
-            mx_EventTile_emote: msgtype === MsgType.Emote,
-            mx_EventTile_noSender: this.props.hideSender,
-            mx_EventTile_clamp:
-                this.context.timelineRenderingType === TimelineRenderingType.ThreadsList || isRenderingNotification,
-            mx_EventTile_noBubble: noBubbleEvent,
-        });
-
-        // If the tile is in the Sending state, don't speak the message.
-        const ariaLive = this.props.eventSendStatus !== null ? "off" : undefined;
-
-        let permalink = "#";
-        if (this.props.permalinkCreator) {
-            permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId()!);
-        }
-
-        // we can't use local echoes as scroll tokens, because their event IDs change.
-        // Local echos have a send "status".
-        const scrollToken = this.props.mxEvent.status ? undefined : this.props.mxEvent.getId();
-
-        let avatar: JSX.Element | null = null;
-        let sender: JSX.Element | null = null;
-        let avatarSize: string | null;
-        let needsSenderProfile: boolean;
-
-        if (isRenderingNotification) {
-            avatarSize = "24px";
-            needsSenderProfile = true;
-        } else if (isInfoMessage) {
-            // a small avatar, with no sender profile, for
-            // joins/parts/etc
-            avatarSize = "14px";
-            needsSenderProfile = false;
-        } else if (
-            this.context.timelineRenderingType === TimelineRenderingType.ThreadsList ||
-            (this.context.timelineRenderingType === TimelineRenderingType.Thread && !this.props.continuation)
-        ) {
-            avatarSize = "32px";
-            needsSenderProfile = true;
-        } else if (eventType === EventType.RoomCreate || isBubbleMessage) {
-            avatarSize = null;
-            needsSenderProfile = false;
-        } else if (this.props.layout == Layout.IRC) {
-            avatarSize = "14px";
-            needsSenderProfile = true;
-        } else if (
-            (this.props.continuation && this.context.timelineRenderingType !== TimelineRenderingType.File) ||
-            eventType === EventType.CallInvite ||
-            ElementCallEventType.matches(eventType)
-        ) {
-            // no avatar or sender profile for continuation messages and call tiles
-            avatarSize = null;
-            needsSenderProfile = false;
-        } else if (this.context.timelineRenderingType === TimelineRenderingType.File) {
-            avatarSize = "20px";
-            needsSenderProfile = true;
-        } else {
-            avatarSize = "30px";
-            needsSenderProfile = true;
-        }
-
-        if (this.props.mxEvent.sender && avatarSize !== null) {
-            let member: RoomMember | null = null;
-            // set member to receiver (target) if it is a 3PID invite
-            // so that the correct avatar is shown as the text is
-            // `$target accepted the invitation for $email`
-            if (this.props.mxEvent.getContent().third_party_invite) {
-                member = this.props.mxEvent.target;
-            } else {
-                member = this.props.mxEvent.sender;
-            }
-            // In the ThreadsList view we use the entire EventTile as a click target to open the thread instead
-            const viewUserOnClick =
-                !this.props.inhibitInteraction &&
-                ![TimelineRenderingType.ThreadsList, TimelineRenderingType.Notification].includes(
-                    this.context.timelineRenderingType,
-                );
-            avatar = (
-                <div className="mx_EventTile_avatar">
-                    <MemberAvatar
-                        member={member}
-                        size={avatarSize}
-                        viewUserOnClick={viewUserOnClick}
-                        forceHistorical={this.props.mxEvent.getType() === EventType.RoomMember}
-                    />
-                </div>
-            );
-        }
-
-        if (needsSenderProfile && this.props.hideSender !== true) {
-            if (
-                this.context.timelineRenderingType === TimelineRenderingType.Room ||
-                this.context.timelineRenderingType === TimelineRenderingType.Search ||
-                this.context.timelineRenderingType === TimelineRenderingType.Pinned ||
-                this.context.timelineRenderingType === TimelineRenderingType.Thread
-            ) {
-                sender = <SenderProfile onClick={this.onSenderProfileClick} mxEvent={this.props.mxEvent} />;
-            } else if (this.context.timelineRenderingType === TimelineRenderingType.ThreadsList) {
-                sender = <SenderProfile mxEvent={this.props.mxEvent} withTooltip />;
-            } else {
-                sender = <SenderProfile mxEvent={this.props.mxEvent} />;
-            }
-        }
-
-        const showMessageActionBar =
-            !isEditing &&
-            !this.props.forExport &&
-            (this.state.hover ||
-                this.state.showActionBarFromFocus ||
-                (this.state.actionBarFocused && !this.state.contextMenu));
-        const actionBar = showMessageActionBar ? (
-            <ActionBarWrapper
+        const actionBar = eventTileSnapshot.actionBar.show ? (
+            <ActionBarAdapter
+                eventTileViewModel={this.viewModel}
                 mxEvent={this.props.mxEvent}
                 reactions={this.state.reactions}
                 permalinkCreator={this.props.permalinkCreator}
@@ -1195,101 +998,57 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
             />
         ) : undefined;
 
-        const showTimestamp =
-            this.props.mxEvent.getTs() &&
-            !this.props.hideTimestamp &&
-            (this.props.alwaysShowTimestamps ||
-                this.props.last ||
-                this.state.hover ||
-                this.state.focusWithin ||
-                this.state.actionBarFocused ||
-                Boolean(this.state.contextMenu));
+        const ts = eventTileRenderState.timestamp.value;
 
-        // Thread panel shows the timestamp of the last reply in that thread
-        let ts =
-            this.context.timelineRenderingType !== TimelineRenderingType.ThreadsList
-                ? this.props.mxEvent.getTs()
-                : this.state.thread?.replyToEvent?.getTs();
-        if (typeof ts !== "number") {
-            // Fall back to something we can use
-            ts = this.props.mxEvent.getTs();
-        }
+        const messageTimestampProps = this.createMessageTimestampProps(ts);
+        const linkedMessageTimestampProps = this.createLinkedMessageTimestampProps(messageTimestampProps);
 
-        const messageTimestampProps: MessageTimestampViewModelProps = {
-            showRelative: this.context.timelineRenderingType === TimelineRenderingType.ThreadsList,
-            showTwelveHour: this.props.isTwelveHour,
-            ts,
-            receivedTs: getLateEventInfo(this.props.mxEvent)?.received_ts,
-        };
-        const messageTimestamp = <MessageTimestampWrapper {...messageTimestampProps} />;
-        const linkedMessageTimestamp = (
-            <MessageTimestampWrapper
-                {...messageTimestampProps}
-                href={permalink}
-                onClick={this.onPermalinkClicked}
-                onContextMenu={this.onTimestampContextMenu}
+        const timestamp = (
+            <EventTileTimestampSlot
+                eventTileViewModel={this.viewModel}
+                kind="plain"
+                timestampProps={messageTimestampProps}
+                showTimestamp={eventTileRenderState.timestamp.displayState.showRealTimestamp}
+                showDummy={eventTileRenderState.timestamp.showDummy}
+            />
+        );
+        const linkedTimestamp = (
+            <EventTileTimestampSlot
+                eventTileViewModel={this.viewModel}
+                kind="linked"
+                timestampProps={linkedMessageTimestampProps}
+                showTimestamp={eventTileRenderState.timestamp.displayState.showLinkedTimestamp}
+                showDummy={eventTileRenderState.timestamp.showDummy}
             />
         );
 
-        const useIRCLayout = this.props.layout === Layout.IRC;
-        // Used to simplify the UI layout where necessary by not conditionally rendering an element at the start
-        const dummyTimestamp = useIRCLayout ? <span className="mx_MessageTimestamp" /> : null;
-        const timestamp = showTimestamp && ts ? messageTimestamp : dummyTimestamp;
-        const linkedTimestamp =
-            timestamp !== dummyTimestamp && !this.props.hideTimestamp ? linkedMessageTimestamp : dummyTimestamp;
+        const groupTimestamp = eventTileRenderState.timestamp.showInGroupLine ? linkedTimestamp : null;
+        const ircTimestamp = eventTileRenderState.timestamp.showInIrcLine ? linkedTimestamp : null;
+        const groupPadlock = eventTileRenderState.e2ePadlock.showInGroupLine && this.renderE2EPadlock();
+        const ircPadlock = eventTileRenderState.e2ePadlock.showInIrcLine && this.renderE2EPadlock();
 
-        let pinnedMessageBadge: JSX.Element | undefined;
-        if (PinningUtils.isPinned(MatrixClientPeg.safeGet(), this.props.mxEvent)) {
-            pinnedMessageBadge = <PinnedMessageBadge aria-describedby={this.id} tabIndex={0} />;
-        }
-
-        let reactionsRow: JSX.Element | undefined;
-        if (!isRedacted) {
-            reactionsRow = (
-                <ReactionsRowWrapper
-                    mxEvent={this.props.mxEvent}
-                    reactions={this.state.reactions}
-                    key="mx_EventTile_reactionsRow"
-                />
-            );
-        }
-
-        // If we have reactions or a pinned message badge, we need a footer
-        const hasFooter = Boolean((reactionsRow && this.state.reactions) || pinnedMessageBadge);
-
-        const groupTimestamp = !useIRCLayout ? linkedTimestamp : null;
-        const ircTimestamp = useIRCLayout ? linkedTimestamp : null;
-        const groupPadlock = !useIRCLayout && !isBubbleMessage && this.renderE2EPadlock();
-        const ircPadlock = useIRCLayout && !isBubbleMessage && this.renderE2EPadlock();
-
-        let msgOption: JSX.Element | undefined;
-        if (this.shouldShowSentReceipt || this.shouldShowSendingReceipt) {
-            msgOption = <SentReceipt messageState={this.props.eventSendStatus} />;
-        } else if (this.props.showReadReceipts) {
-            msgOption = (
-                <ReadReceiptGroup
-                    readReceipts={this.props.readReceipts ?? []}
-                    readReceiptMap={this.props.readReceiptMap ?? {}}
-                    checkUnmounting={this.props.checkUnmounting}
-                    suppressAnimation={this.suppressReadReceiptAnimation}
-                    isTwelveHour={this.props.isTwelveHour}
-                />
-            );
-        }
+        const msgOption = (
+            <ReceiptAdapter
+                receiptState={this.receiptState}
+                eventSendStatus={this.props.eventSendStatus}
+                showReadReceipts={this.props.showReadReceipts}
+                readReceipts={this.props.readReceipts}
+                readReceiptMap={this.props.readReceiptMap}
+                checkUnmounting={this.props.checkUnmounting}
+                suppressAnimation={this.suppressReadReceiptAnimation}
+                isTwelveHour={this.props.isTwelveHour}
+            />
+        );
 
         let replyChain: JSX.Element | undefined;
-        if (
-            haveRendererForEvent(this.props.mxEvent, MatrixClientPeg.safeGet(), this.context.showHiddenEvents) &&
-            shouldDisplayReply(this.props.mxEvent)
-        ) {
+        if (eventTileSnapshot.root.data.hasReply) {
             replyChain = (
                 <ReplyChain
                     parentEv={this.props.mxEvent}
                     ref={this.replyChain}
                     forExport={this.props.forExport}
                     permalinkCreator={this.props.permalinkCreator}
-                    layout={this.props.layout}
-                    alwaysShowTimestamps={this.props.alwaysShowTimestamps || this.state.hover || this.state.focusWithin}
+                    alwaysShowTimestamps={eventTileSnapshot.replyChain.alwaysShowTimestamps}
                     isQuoteExpanded={isQuoteExpanded}
                     setQuoteExpanded={this.setQuoteExpanded}
                     getRelationsForEvent={this.props.getRelationsForEvent}
@@ -1297,27 +1056,18 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
             );
         }
 
-        // Use `getSender()` because searched events might not have a proper `sender`.
-        const isOwnEvent = this.props.mxEvent?.getSender() === MatrixClientPeg.safeGet().getUserId();
+        const { hasFooter, showMainPinnedMessageBadge, showBubblePinnedMessageBadge } = eventTileRenderState.footer;
 
         switch (this.context.timelineRenderingType) {
             case TimelineRenderingType.Thread: {
                 return React.createElement(
                     this.props.as || "li",
                     {
-                        "ref": this.ref,
-                        "className": classes,
-                        "aria-live": ariaLive,
-                        "aria-atomic": true,
-                        "data-scroll-tokens": scrollToken,
-                        "data-has-reply": !!replyChain,
-                        "data-layout": this.props.layout,
-                        "data-self": isOwnEvent,
-                        "data-event-id": this.props.mxEvent.getId(),
-                        "onMouseEnter": () => this.setState({ hover: true }),
-                        "onMouseLeave": () => this.setState({ hover: false }),
-                        "onFocus": this.onFocusWithin,
-                        "onBlur": this.onBlurWithin,
+                        ...this.createInteractiveRootAttributes(rootRenderState),
+                        "data-has-reply": eventTileSnapshot.root.data.hasReply,
+                        "data-layout": eventTileSnapshot.root.data.layout,
+                        "data-self": eventTileSnapshot.root.data.isOwnEvent,
+                        "data-event-id": eventTileSnapshot.root.data.eventId,
                     },
                     [
                         <div className="mx_EventTile_senderDetails" key="mx_EventTile_senderDetails">
@@ -1332,55 +1082,46 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                         >
                             {this.renderContextMenu()}
                             {replyChain}
-                            {renderTile(TimelineRenderingType.Thread, {
-                                ...this.props,
-
-                                // overrides
-                                ref: this.tile,
-                                replacingEventId,
-                                isSeeingThroughMessageHiddenForModeration,
-
-                                // appease TS
-                                highlights: this.props.highlights,
-                                highlightLink: this.props.highlightLink,
-                                permalinkCreator: this.props.permalinkCreator!,
-                                showHiddenEvents: this.context.showHiddenEvents,
-                            })}
+                            {renderTile(
+                                TimelineRenderingType.Thread,
+                                this.createRenderTileProps({
+                                    replacingEventId: eventTileSnapshot.event.replacingEventId,
+                                    isSeeingThroughMessageHiddenForModeration,
+                                    permalinkCreator: this.props.permalinkCreator!,
+                                }),
+                            )}
                             {actionBar}
                             {linkedTimestamp}
                             {msgOption}
                         </div>,
-                        hasFooter && (
-                            <div className="mx_EventTile_footer" key="mx_EventTile_footer">
-                                {(this.props.layout === Layout.Group || !isOwnEvent) && pinnedMessageBadge}
-                                {reactionsRow}
-                                {this.props.layout === Layout.Bubble && isOwnEvent && pinnedMessageBadge}
-                            </div>
-                        ),
+                        <EventTileFooter
+                            key="mx_EventTile_footer"
+                            eventTileViewModel={this.viewModel}
+                            mxEvent={this.props.mxEvent}
+                            reactions={this.state.reactions}
+                            hasFooter={hasFooter}
+                            hasPinnedMessageBadge={hasPinnedMessageBadge}
+                            hasReactionsRow={hasReactionsRow}
+                            pinnedMessageBadgeAriaDescribedBy={this.id}
+                            placement="default"
+                            showMainPinnedMessageBadge={showMainPinnedMessageBadge}
+                            showBubblePinnedMessageBadge={showBubblePinnedMessageBadge}
+                        />,
                     ],
                 );
             }
             case TimelineRenderingType.Notification:
             case TimelineRenderingType.ThreadsList: {
                 const room = MatrixClientPeg.safeGet().getRoom(this.props.mxEvent.getRoomId());
-                // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
                 return React.createElement(
                     this.props.as || "li",
                     {
-                        "ref": this.ref,
-                        "className": classes,
+                        ...this.createInteractiveRootAttributes(rootRenderState),
                         "tabIndex": -1,
-                        "aria-live": ariaLive,
-                        "aria-atomic": "true",
-                        "data-scroll-tokens": scrollToken,
-                        "data-layout": this.props.layout,
-                        "data-shape": this.context.timelineRenderingType,
-                        "data-self": isOwnEvent,
-                        "data-has-reply": !!replyChain,
-                        "onMouseEnter": () => this.setState({ hover: true }),
-                        "onMouseLeave": () => this.setState({ hover: false }),
-                        "onFocus": this.onFocusWithin,
-                        "onBlur": this.onBlurWithin,
+                        "data-layout": eventTileSnapshot.root.data.layout,
+                        "data-shape": eventTileSnapshot.root.data.shape,
+                        "data-self": eventTileSnapshot.root.data.isOwnEvent,
+                        "data-has-reply": eventTileSnapshot.root.data.hasReply,
                         "onClick": (ev: MouseEvent) => {
                             const target = ev.currentTarget as HTMLElement;
                             let index = -1;
@@ -1418,7 +1159,7 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                             {timestamp}
                             <UnreadNotificationBadge
                                 room={room || undefined}
-                                threadId={this.props.mxEvent.getId()}
+                                threadId={eventTileSnapshot.root.data.eventId}
                                 forceDot={true}
                             />
                         </div>
@@ -1430,21 +1171,18 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                             avatar
                         )}
                         <div className={lineClasses} key="mx_EventTile_line">
-                            <div className="mx_EventTile_body">
-                                {this.props.mxEvent.isRedacted() ? (
-                                    <RedactedBodyFactory mxEvent={this.props.mxEvent} />
-                                ) : this.props.mxEvent.isDecryptionFailure() ? (
-                                    <DecryptionFailureBodyFactory mxEvent={this.props.mxEvent} />
-                                ) : (
-                                    <EventPreview mxEvent={this.props.mxEvent} />
-                                )}
-                            </div>
-                            {this.renderThreadPanelSummary()}
+                            <EventTilePreviewBody eventTileViewModel={this.viewModel} mxEvent={this.props.mxEvent} />
+                            <EventTileThreadPanelSummary
+                                eventTileViewModel={this.viewModel}
+                                threadState={threadState}
+                            />
                         </div>
                         {this.context.timelineRenderingType === TimelineRenderingType.ThreadsList && (
-                            <ThreadListActionBarWrapper
+                            <ThreadListActionBarAdapter
+                                eventTileViewModel={this.viewModel}
                                 onViewInRoomClick={this.onViewInRoomClick}
                                 onCopyLinkClick={this.onCopyLinkToThreadClick}
+                                className="mx_ThreadActionBar"
                             />
                         )}
 
@@ -1453,67 +1191,42 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                 );
             }
             case TimelineRenderingType.File: {
-                return React.createElement(
-                    this.props.as || "li",
-                    {
-                        "className": classes,
-                        "aria-live": ariaLive,
-                        "aria-atomic": true,
-                        "data-scroll-tokens": scrollToken,
-                    },
-                    [
-                        <a
-                            className="mx_EventTile_senderDetailsLink"
-                            key="mx_EventTile_senderDetailsLink"
-                            href={permalink}
-                            onClick={this.onPermalinkClicked}
-                        >
-                            <div className="mx_EventTile_senderDetails" onContextMenu={this.onTimestampContextMenu}>
-                                {avatar}
-                                {sender}
-                                {timestamp}
-                            </div>
-                        </a>,
-                        <div className={lineClasses} key="mx_EventTile_line" onContextMenu={this.onContextMenu}>
-                            {this.renderContextMenu()}
-                            {renderTile(TimelineRenderingType.File, {
-                                ...this.props,
-
-                                // overrides
-                                ref: this.tile,
+                return React.createElement(this.props.as || "li", this.createRootAttributes(rootRenderState), [
+                    <a
+                        className="mx_EventTile_senderDetailsLink"
+                        key="mx_EventTile_senderDetailsLink"
+                        href={permalink}
+                        onClick={this.onPermalinkClicked}
+                    >
+                        <div className="mx_EventTile_senderDetails" onContextMenu={this.onTimestampContextMenu}>
+                            {avatar}
+                            {sender}
+                            {timestamp}
+                        </div>
+                    </a>,
+                    <div className={lineClasses} key="mx_EventTile_line" onContextMenu={this.onContextMenu}>
+                        {this.renderContextMenu()}
+                        {renderTile(
+                            TimelineRenderingType.File,
+                            this.createRenderTileProps({
                                 isSeeingThroughMessageHiddenForModeration,
-
-                                // appease TS
-                                highlights: this.props.highlights,
-                                highlightLink: this.props.highlightLink,
-                                permalinkCreator: this.props.permalinkCreator,
-                                showHiddenEvents: this.context.showHiddenEvents,
-                            })}
-                        </div>,
-                    ],
-                );
+                            }),
+                        )}
+                    </div>,
+                ]);
             }
 
             default: {
                 // Pinned, Room, Search
-                // tab-index=-1 to allow it to be focusable but do not add tab stop for it, primarily for screen readers
                 return React.createElement(
                     this.props.as || "li",
                     {
-                        "ref": this.ref,
-                        "className": classes,
+                        ...this.createInteractiveRootAttributes(rootRenderState),
                         "tabIndex": -1,
-                        "aria-live": ariaLive,
-                        "aria-atomic": "true",
-                        "data-scroll-tokens": scrollToken,
-                        "data-layout": this.props.layout,
-                        "data-self": isOwnEvent,
-                        "data-event-id": this.props.mxEvent.getId(),
-                        "data-has-reply": !!replyChain,
-                        "onMouseEnter": () => this.setState({ hover: true }),
-                        "onMouseLeave": () => this.setState({ hover: false }),
-                        "onFocus": this.onFocusWithin,
-                        "onBlur": this.onBlurWithin,
+                        "data-layout": eventTileSnapshot.root.data.layout,
+                        "data-self": eventTileSnapshot.root.data.isOwnEvent,
+                        "data-event-id": eventTileSnapshot.root.data.eventId,
+                        "data-has-reply": eventTileSnapshot.root.data.hasReply,
                     },
                     <>
                         {ircTimestamp}
@@ -1530,42 +1243,52 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                             {groupTimestamp}
                             {groupPadlock}
                             {replyChain}
-                            {renderTile(this.context.timelineRenderingType, {
-                                ...this.props,
-
-                                // overrides
-                                ref: this.tile,
-                                isSeeingThroughMessageHiddenForModeration,
-
-                                // appease TS
-                                highlights: this.props.highlights,
-                                highlightLink: this.props.highlightLink,
-                                permalinkCreator: this.props.permalinkCreator,
-                                showHiddenEvents: this.context.showHiddenEvents,
-                            })}
+                            {renderTile(
+                                eventTileSnapshot.root.data.shape,
+                                this.createRenderTileProps({
+                                    isSeeingThroughMessageHiddenForModeration,
+                                }),
+                            )}
                             {actionBar}
-                            {this.props.layout === Layout.IRC && (
+                            {eventTileRenderState.footer.showInIrcLayout && (
                                 <>
-                                    {hasFooter && (
-                                        <div className="mx_EventTile_footer">
-                                            {pinnedMessageBadge}
-                                            {reactionsRow}
-                                        </div>
-                                    )}
-                                    {this.renderThreadInfo()}
+                                    <EventTileFooter
+                                        eventTileViewModel={this.viewModel}
+                                        mxEvent={this.props.mxEvent}
+                                        reactions={this.state.reactions}
+                                        hasFooter={hasFooter}
+                                        hasPinnedMessageBadge={hasPinnedMessageBadge}
+                                        hasReactionsRow={hasReactionsRow}
+                                        pinnedMessageBadgeAriaDescribedBy={this.id}
+                                        placement="irc"
+                                    />
+                                    <EventTileThreadInfo
+                                        eventTileViewModel={this.viewModel}
+                                        mxEvent={this.props.mxEvent}
+                                        threadState={threadState}
+                                    />
                                 </>
                             )}
                         </div>
-                        {this.props.layout !== Layout.IRC && (
+                        {eventTileRenderState.footer.showInDefaultLayout && (
                             <>
-                                {hasFooter && (
-                                    <div className="mx_EventTile_footer">
-                                        {(this.props.layout === Layout.Group || !isOwnEvent) && pinnedMessageBadge}
-                                        {reactionsRow}
-                                        {this.props.layout === Layout.Bubble && isOwnEvent && pinnedMessageBadge}
-                                    </div>
-                                )}
-                                {this.renderThreadInfo()}
+                                <EventTileFooter
+                                    eventTileViewModel={this.viewModel}
+                                    mxEvent={this.props.mxEvent}
+                                    reactions={this.state.reactions}
+                                    hasFooter={hasFooter}
+                                    hasPinnedMessageBadge={hasPinnedMessageBadge}
+                                    hasReactionsRow={hasReactionsRow}
+                                    pinnedMessageBadgeAriaDescribedBy={this.id}
+                                    placement="default"
+                                    showMainPinnedMessageBadge={showMainPinnedMessageBadge}
+                                    showBubblePinnedMessageBadge={showBubblePinnedMessageBadge}
+                                />
+                                <EventTileThreadInfo
+                                    eventTileViewModel={this.viewModel}
+                                    mxEvent={this.props.mxEvent}
+                                    threadState={threadState}
+                                />
                             </>
                         )}
                         {msgOption}
@@ -1627,7 +1350,7 @@ class EventTileErrorBoundary extends React.Component<EventTileErrorBoundaryProps
     }
 }
 
-// Wrap all event tiles with the tile error boundary so that any throws even during construction are captured
+/** EventTile wrapped in an error boundary so render and construction failures show a tile fallback. */
 const SafeEventTile = (props: EventTileProps): JSX.Element => {
     return (
         <EventTileErrorBoundary mxEvent={props.mxEvent}>
@@ -1636,467 +1359,3 @@ const SafeEventTile = (props: EventTileProps): JSX.Element => {
     );
 };
 export default SafeEventTile;
-
-function E2ePadlockUnencrypted(): JSX.Element {
-    return <E2ePadlock title={_t("common|unencrypted")} icon={E2ePadlockIcon.Warning} />;
-}
-
-function E2ePadlockDecryptionFailure(): JSX.Element {
-    return <E2ePadlock title={_t("timeline|undecryptable_tooltip")} icon={E2ePadlockIcon.DecryptionFailure} />;
-}
-
-interface ISentReceiptProps {
-    messageState: EventStatus | undefined;
-}
-
-function SentReceipt({ messageState }: ISentReceiptProps): JSX.Element {
-    const isSent = !messageState || messageState === "sent";
-    const isFailed = messageState === "not_sent";
-
-    let icon: JSX.Element | undefined;
-    let label: string | undefined;
-    if (messageState === "encrypting") {
-        icon = <CircleIcon />;
-        label = _t("timeline|send_state_encrypting");
-    } else if (isSent) {
-        icon = <CheckCircleIcon />;
-        label = _t("timeline|send_state_sent");
-    } else if (isFailed) {
-        icon = <NotificationBadge notification={StaticNotificationState.RED_EXCLAMATION} />;
-        label = _t("timeline|send_state_failed");
-    } else {
-        icon = <CircleIcon />;
-        label = _t("timeline|send_state_sending");
-    }
-
-    return (
-        <div className="mx_EventTile_msgOption">
-            <div className="mx_ReadReceiptGroup">
-                <Tooltip label={label} placement="top-end">
-                    <div className="mx_ReadReceiptGroup_button" role="status">
-                        <span className="mx_ReadReceiptGroup_container">{icon}</span>
-                    </div>
-                </Tooltip>
-            </div>
-        </div>
-    );
-}
-
-/**
- * Wraps MessageTimestampView with a view model synced to the provided props.
- * This wrapper can be removed after EventTile has been changed to a function component.
- */
-function MessageTimestampWrapper(props: MessageTimestampViewModelProps): JSX.Element {
-    const vm = useCreateAutoDisposedViewModel(() => new MessageTimestampViewModel(props));
-    useEffect(() => {
-        vm.setTimestamp(props.ts);
-        vm.setReceivedTimestamp(props.receivedTs);
-        vm.setDisplayOptions({
-            showTwelveHour: props.showTwelveHour,
-            showRelative: props.showRelative,
-        });
-        vm.setHref(props.href);
-        vm.setHandlers({ onClick: props.onClick, onContextMenu: props.onContextMenu });
-    }, [vm, props]);
-
-    return (
-        <>
-            {/* Render icon as described in, https://github.com/matrix-org/matrix-react-sdk/pull/11760 */}
-            {props.receivedTs ? (
-                <LateIcon className="mx_MessageTimestamp_lateIcon" width="16" height="16" />
-            ) : undefined}
-            <MessageTimestampView vm={vm} className="mx_MessageTimestamp" />
-        </>
-    );
-}
-
-interface ReactionsRowButtonItemProps {
-    mxEvent: MatrixEvent;
-    content: string;
-    count: number;
-    reactionEvents: MatrixEvent[];
-    myReactionEvent?: MatrixEvent;
-    disabled?: boolean;
-    customReactionImagesEnabled?: boolean;
-}
-
-function ReactionsRowButtonItem(props: Readonly<ReactionsRowButtonItemProps>): JSX.Element {
-    const client = useMatrixClientContext();
-
-    const vm = useCreateAutoDisposedViewModel(
-        () =>
-            new ReactionsRowButtonViewModel({
-                client,
-                mxEvent: props.mxEvent,
-                content: props.content,
-                count: props.count,
-                reactionEvents: props.reactionEvents,
-                myReactionEvent: props.myReactionEvent,
-                disabled: props.disabled,
-                customReactionImagesEnabled: props.customReactionImagesEnabled,
-            }),
-    );
-
-    useEffect(() => {
-        vm.setReactionData(props.content, props.reactionEvents, props.customReactionImagesEnabled);
-    }, [props.content, props.reactionEvents, props.customReactionImagesEnabled, vm]);
-
-    useEffect(() => {
-        vm.setCount(props.count);
-    }, [props.count, vm]);
-
-    useEffect(() => {
-        vm.setMyReactionEvent(props.myReactionEvent);
-    }, [props.myReactionEvent, vm]);
-
-    useEffect(() => {
-        vm.setDisabled(props.disabled);
-    }, [props.disabled, vm]);
-
-    return <ReactionsRowButtonView vm={vm} />;
-}
-
-interface ReactionGroup {
-    content: string;
-    events: MatrixEvent[];
-}
-
-const getReactionGroups = (reactions?: Relations | null): ReactionGroup[] =>
-    reactions
-        ?.getSortedAnnotationsByKey()
-        ?.map(([content, events]) => ({
-            content,
-            events: [...events],
-        }))
-        .filter(({ events }) => events.length > 0) ?? [];
-
-const getMyReactions = (reactions: Relations | null | undefined, userId?: string): MatrixEvent[] | null => {
-    if (!reactions || !userId) {
-        return null;
-    }
-
-    const myReactions = reactions.getAnnotationsBySender()?.[userId];
-    if (!myReactions) {
-        return null;
-    }
-
-    return [...myReactions.values()];
-};
-
-interface ReactionsRowWrapperProps {
-    mxEvent: MatrixEvent;
-    reactions?: Relations | null;
-}
-
-function ReactionsRowWrapper({ mxEvent, reactions }: Readonly<ReactionsRowWrapperProps>): JSX.Element | null {
-    const roomContext = useContext(RoomContext);
-    const userId = roomContext.room?.client.getUserId() ?? undefined;
-    const [reactionGroups, setReactionGroups] = useState<ReactionGroup[]>(() => getReactionGroups(reactions));
-    const [myReactions, setMyReactions] = useState<MatrixEvent[] | null>(() => getMyReactions(reactions, userId));
-    const [menuDisplayed, setMenuDisplayed] = useState(false);
-    const [menuAnchorRect, setMenuAnchorRect] = useState<DOMRect | null>(null);
-
-    const vm = useCreateAutoDisposedViewModel(
-        () =>
-            new ReactionsRowViewModel({
-                isActionable: isContentActionable(mxEvent),
-                reactionGroupCount: reactionGroups.length,
-                canReact: roomContext.canReact,
-                addReactionButtonActive: false,
-            }),
-    );
-
-    const openReactionMenu = useCallback((event: React.MouseEvent<HTMLButtonElement>): void => {
-        setMenuAnchorRect(event.currentTarget.getBoundingClientRect());
-        setMenuDisplayed(true);
-    }, []);
-
-    const closeReactionMenu = useCallback((): void => {
-        setMenuDisplayed(false);
-    }, []);
-
-    const updateReactionsState = useCallback((): void => {
-        const nextReactionGroups = getReactionGroups(reactions);
-        setReactionGroups(nextReactionGroups);
-        setMyReactions(getMyReactions(reactions, userId));
-        vm.setReactionGroupCount(nextReactionGroups.length);
-    }, [reactions, userId, vm]);
-
-    useEffect(() => {
-        vm.setActionable(isContentActionable(mxEvent));
-    }, [mxEvent, vm]);
-
-    useEffect(() => {
-        vm.setCanReact(roomContext.canReact);
-        if (!roomContext.canReact && menuDisplayed) {
-            setMenuDisplayed(false);
-        }
-    }, [roomContext.canReact, menuDisplayed, vm]);
-
-    useEffect(() => {
-        vm.setAddReactionHandlers({
-            onAddReactionClick: openReactionMenu,
-            onAddReactionContextMenu: openReactionMenu,
-        });
-    }, [openReactionMenu, vm]);
-
-    useEffect(() => {
-        vm.setAddReactionButtonActive(menuDisplayed);
-    }, [menuDisplayed, vm]);
-
-    useEffect(() => {
-        updateReactionsState();
-    }, [updateReactionsState]);
-
-    useEffect(() => {
-        if (!reactions) return;
-
-        reactions.on(RelationsEvent.Add, updateReactionsState);
-        reactions.on(RelationsEvent.Remove, updateReactionsState);
-        reactions.on(RelationsEvent.Redaction, updateReactionsState);
-
-        return () => {
-            reactions.off(RelationsEvent.Add, updateReactionsState);
-            reactions.off(RelationsEvent.Remove, updateReactionsState);
-            reactions.off(RelationsEvent.Redaction, updateReactionsState);
-        };
-    }, [reactions, updateReactionsState]);
-
-    useEffect(() => {
-        const onDecrypted = (): void => {
-            vm.setActionable(isContentActionable(mxEvent));
-        };
-
-        if (mxEvent.isBeingDecrypted() || mxEvent.shouldAttemptDecryption()) {
-            mxEvent.once(MatrixEventEvent.Decrypted, onDecrypted);
-        }
-
-        return () => {
-            mxEvent.off(MatrixEventEvent.Decrypted, onDecrypted);
-        };
-    }, [mxEvent, vm]);
-
-    const snapshot = useViewModel(vm);
-    const customReactionImagesEnabled = SettingsStore.getValue("feature_render_reaction_images");
-    const items = useMemo((): JSX.Element[] | undefined => {
-        const mappedItems = reactionGroups.map(({ content, events }) => {
-            // Deduplicate reaction events by sender per Matrix spec.
-            const deduplicatedEvents = uniqBy(events, (event: MatrixEvent) => event.getSender());
-            const myReactionEvent = myReactions?.find((reactionEvent) => {
-                if (reactionEvent.isRedacted()) {
-                    return false;
-                }
-                return reactionEvent.getRelation()?.key === content;
-            });
-
-            return (
-                <ReactionsRowButtonItem
-                    key={content}
-                    content={content}
-                    count={deduplicatedEvents.length}
-                    mxEvent={mxEvent}
-                    reactionEvents={deduplicatedEvents}
-                    myReactionEvent={myReactionEvent}
-                    customReactionImagesEnabled={customReactionImagesEnabled}
-                    disabled={
-                        !roomContext.canReact ||
-                        (myReactionEvent && !myReactionEvent.isRedacted() && !roomContext.canSelfRedact)
-                    }
-                />
-            );
-        });
-
-        if (!mappedItems.length) {
-            return undefined;
-        }
-
-        return snapshot.showAllButtonVisible ? mappedItems.slice(0, MAX_ITEMS_WHEN_LIMITED) : mappedItems;
-    }, [
-        reactionGroups,
-        myReactions,
-        mxEvent,
-        customReactionImagesEnabled,
-        roomContext.canReact,
-        roomContext.canSelfRedact,
-        snapshot.showAllButtonVisible,
-    ]);
-
-    if (!snapshot.isVisible || !items?.length) {
-        return null;
-    }
-
-    let contextMenu: JSX.Element | undefined;
-    if (menuDisplayed && menuAnchorRect && reactions && roomContext.canReact) {
-        contextMenu = (
-            <ContextMenu {...aboveLeftOf(menuAnchorRect)} onFinished={closeReactionMenu} managed={false} focusLock>
-                <ReactionPicker mxEvent={mxEvent} reactions={reactions} onFinished={closeReactionMenu} />
-            </ContextMenu>
-        );
-    }
-
-    return (
-        <>
-            <ReactionsRowView vm={vm} className="mx_ReactionsRow">
-                {items}
-            </ReactionsRowView>
-            {contextMenu}
-        </>
-    );
-}
-
-interface ActionBarWrapperProps {
-    mxEvent: MatrixEvent;
-    reactions?: Relations | null;
-    permalinkCreator?: RoomPermalinkCreator;
-    getTile: () => IEventTileType | null;
-    getReplyChain: () => ReplyChain | null;
-    onFocusChange?: (focused: boolean) => void;
-    isQuoteExpanded?: boolean;
-    toggleThreadExpanded: () => void;
-    getRelationsForEvent?: GetRelationsForEvent;
-}
-
-interface ThreadListActionBarWrapperProps {
-    onViewInRoomClick: (anchor: HTMLElement | null) => void;
-    onCopyLinkClick: (anchor: HTMLElement | null) => void | Promise<void>;
-}
-
-function ThreadListActionBarWrapper({
-    onViewInRoomClick,
-    onCopyLinkClick,
-}: Readonly<ThreadListActionBarWrapperProps>): JSX.Element {
-    const vm = useCreateAutoDisposedViewModel(
-        () =>
-            new ThreadListActionBarViewModel({
-                onViewInRoomClick,
-                onCopyLinkClick,
-            }),
-    );
-
-    useEffect(() => {
-        vm.setProps({
-            onViewInRoomClick,
-            onCopyLinkClick,
-        });
-    }, [vm, onViewInRoomClick, onCopyLinkClick]);
-
-    return <ActionBarView vm={vm} className="mx_ThreadActionBar" />;
-}
-
-function ActionBarWrapper({
-    mxEvent,
-    reactions,
-    permalinkCreator,
-    getTile,
-    getReplyChain,
-    onFocusChange,
-    isQuoteExpanded,
-    toggleThreadExpanded,
-    getRelationsForEvent,
-}: Readonly<ActionBarWrapperProps>): JSX.Element {
-    const roomContext = useContext(RoomContext);
-    const { isCard } = useContext(CardContext);
-    const [optionsMenuAnchorRect, setOptionsMenuAnchorRect] = useState<DOMRect | null>(null);
-    const [reactionsMenuAnchorRect, setReactionsMenuAnchorRect] = useState<DOMRect | null>(null);
-    const isSearch = Boolean(roomContext.search);
-    const handleOptionsClick = useCallback((anchor: HTMLElement | null): void => {
-        setOptionsMenuAnchorRect(anchor?.getBoundingClientRect() ?? null);
-    }, []);
-    const handleReactionsClick = useCallback((anchor: HTMLElement | null): void => {
-        setReactionsMenuAnchorRect(anchor?.getBoundingClientRect() ?? null);
-    }, []);
-    const vm = useCreateAutoDisposedViewModel(
-        () =>
-            new EventTileActionBarViewModel({
-                mxEvent,
-                timelineRenderingType: roomContext.timelineRenderingType,
-                canSendMessages: roomContext.canSendMessages,
-                canReact: roomContext.canReact,
-                isSearch,
-                isCard,
-                isQuoteExpanded,
-                onToggleThreadExpanded: toggleThreadExpanded,
-                onOptionsClick: handleOptionsClick,
-                onReactionsClick: handleReactionsClick,
-                getRelationsForEvent,
-            }),
-    );
-
-    useEffect(() => {
-        vm.setProps({
-            mxEvent,
-            timelineRenderingType: roomContext.timelineRenderingType,
-            canSendMessages: roomContext.canSendMessages,
-            canReact: roomContext.canReact,
-            isSearch,
-            isCard,
-            isQuoteExpanded,
-            getRelationsForEvent,
-            onToggleThreadExpanded: toggleThreadExpanded,
-            onOptionsClick: handleOptionsClick,
-            onReactionsClick: handleReactionsClick,
-        });
-    }, [
-        vm,
-        mxEvent,
-        roomContext.timelineRenderingType,
-        roomContext.canSendMessages,
-        roomContext.canReact,
-        isSearch,
-        isCard,
-        isQuoteExpanded,
-        getRelationsForEvent,
-        handleOptionsClick,
-        handleReactionsClick,
-        toggleThreadExpanded,
-    ]);
-
-    useEffect(() => {
-        onFocusChange?.(Boolean(optionsMenuAnchorRect || reactionsMenuAnchorRect));
-    }, [onFocusChange, optionsMenuAnchorRect, reactionsMenuAnchorRect]);
-
-    useEffect(() => {
-        setOptionsMenuAnchorRect(null);
-        setReactionsMenuAnchorRect(null);
-    }, [mxEvent]);
-
-    const closeOptionsMenu = useCallback((): void => {
-        setOptionsMenuAnchorRect(null);
-    }, []);
-
-    const closeReactionsMenu = useCallback((): void => {
-        setReactionsMenuAnchorRect(null);
-    }, []);
-
-    const tile = getTile();
-    const replyChain = getReplyChain();
-    const eventTileOps = tile?.getEventTileOps ? tile.getEventTileOps() : undefined;
-    const collapseReplyChain = replyChain?.canCollapse() ? replyChain.collapse : undefined;
-
-    return (
-        <>
-            <ActionBarView vm={vm} className="mx_MessageActionBar" />
-            {optionsMenuAnchorRect ? (
-                <MessageContextMenu
-                    {...aboveLeftOf(optionsMenuAnchorRect)}
-                    mxEvent={mxEvent}
-                    permalinkCreator={permalinkCreator}
-                    eventTileOps={eventTileOps}
-                    collapseReplyChain={collapseReplyChain}
-                    onFinished={closeOptionsMenu}
-                    getRelationsForEvent={getRelationsForEvent}
-                />
-            ) : null}
-            {reactionsMenuAnchorRect ? (
-                <ContextMenu
-                    {...aboveLeftOf(reactionsMenuAnchorRect)}
-                    onFinished={closeReactionsMenu}
-                    managed={false}
-                    focusLock
-                >
-                    <ReactionPicker mxEvent={mxEvent} reactions={reactions} onFinished={closeReactionsMenu} />
-                </ContextMenu>
-            ) : null}
-        </>
-    );
-}
diff --git a/apps/web/src/components/views/rooms/EventTile/ActionBarAdapter.tsx b/apps/web/src/components/views/rooms/EventTile/ActionBarAdapter.tsx
new file mode 100644
index 0000000000..ef4ca843b9
--- /dev/null
+++ b/apps/web/src/components/views/rooms/EventTile/ActionBarAdapter.tsx
@@ -0,0 +1,188 @@
+/*
+Copyright 2026 Element Creations 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, { useCallback, useContext, useEffect, useState, type JSX } from "react";
+import { type MatrixEvent, type Relations } from "matrix-js-sdk/src/matrix";
+import { ActionBarView } from "@element-hq/web-shared-components";
+
+import type ReplyChain from "../../elements/ReplyChain";
+import ReactionPicker from "../../emojipicker/ReactionPicker";
+import MessageContextMenu from "../../context_menus/MessageContextMenu";
+import ContextMenu, { aboveLeftOf } from "../../../structures/ContextMenu";
+import RoomContext from "../../../../contexts/RoomContext";
+import { CardContext } from "../../right_panel/context";
+import { type RoomPermalinkCreator } from "../../../../utils/permalinks/Permalinks";
+import { type EventTileViewModel } from "../../../../viewmodels/room/timeline/event-tile/EventTileViewModel";
+import { type GetRelationsForEvent } from "../../../../viewmodels/room/timeline/event-tile/reactions/EventTileReactionState";
+
+/**
+ * Operations exposed by the event tile for action bar interactions.
+ */
+interface ActionBarEventTileOps {
+    /** Returns whether the widget is currently hidden. */
+    isWidgetHidden(): boolean;
+    /** Unhides the widget if it was previously hidden. */
+    unhideWidget(): void;
+}
+
+/**
+ * Event tile handle used by the action bar to query tile-level operations.
+ */
+interface ActionBarEventTile {
+    /** Returns the available tile operations, if any. */
+    getEventTileOps?(): ActionBarEventTileOps;
+}
+
+/**
+ * Props for the {@link ActionBarAdapter} component.
+ */
+interface ActionBarAdapterProps {
+    /** View model backing the event tile action bar. */
+    eventTileViewModel: EventTileViewModel;
+    /** Matrix event rendered by this tile. */
+    mxEvent: MatrixEvent;
+    /** Reaction relation state for the event, if available. */
+    reactions?: Relations | null;
+    /** Creates permalinks for the room, when link actions are shown. */
+    permalinkCreator?: RoomPermalinkCreator;
+    /** Returns the current tile instance for event tile operations. */
+    getTile: () => ActionBarEventTile | null;
+    /** Returns the current reply chain for the tile, if any. */
+    getReplyChain: () => ReplyChain | null;
+    /** Notifies the parent when the action bar gains or loses focus. */
+    onFocusChange?: (focused: boolean) => void;
+    /** Indicates whether the event quote is currently expanded. */
+    isQuoteExpanded?: boolean;
+    /** Toggles the thread expansion state for this tile. */
+    toggleThreadExpanded: () => void;
+    /** Looks up relation data for the current event. */
+    getRelationsForEvent?: GetRelationsForEvent;
+}
+
+/**
+ * Renders the event tile action bar and its context menus.
+ */
+export function ActionBarAdapter({
+    eventTileViewModel,
+    mxEvent,
+    reactions,
+    permalinkCreator,
+    getTile,
+    getReplyChain,
+    onFocusChange,
+    isQuoteExpanded,
+    toggleThreadExpanded,
+    getRelationsForEvent,
+}: Readonly<ActionBarAdapterProps>): JSX.Element {
+    const roomContext = useContext(RoomContext);
+    const { isCard } = useContext(CardContext);
+    const [optionsMenuAnchorRect, setOptionsMenuAnchorRect] = useState<DOMRect | null>(null);
+    const [reactionsMenuAnchorRect, setReactionsMenuAnchorRect] = useState<DOMRect | null>(null);
+    const isSearch = Boolean(roomContext.search);
+    const handleOptionsClick = useCallback((anchor: HTMLElement | null): void => {
+        setOptionsMenuAnchorRect(anchor?.getBoundingClientRect() ?? null);
+    }, []);
+    const handleReactionsClick = useCallback((anchor: HTMLElement | null): void => {
+        setReactionsMenuAnchorRect(anchor?.getBoundingClientRect() ?? null);
+    }, []);
+    const vm = eventTileViewModel.getActionBarViewModel({
+        mxEvent,
+        timelineRenderingType: roomContext.timelineRenderingType,
+        canSendMessages: roomContext.canSendMessages,
+        canReact: roomContext.canReact,
+        isSearch,
+        isCard,
+        isQuoteExpanded,
+        onToggleThreadExpanded: toggleThreadExpanded,
+        onOptionsClick: handleOptionsClick,
+        onReactionsClick: handleReactionsClick,
+        getRelationsForEvent,
+    });
+
+    useEffect(() => {
+        // This child VM owns Matrix and settings listeners, so release it when the view using it leaves the tree.
+        return () => eventTileViewModel.releaseActionBarViewModel();
+    }, [eventTileViewModel]);
+
+    useEffect(() => {
+        vm.setProps({
+            mxEvent,
+            timelineRenderingType: roomContext.timelineRenderingType,
+            canSendMessages: roomContext.canSendMessages,
+            canReact: roomContext.canReact,
+            isSearch,
+            isCard,
+            isQuoteExpanded,
+            getRelationsForEvent,
+            onToggleThreadExpanded: toggleThreadExpanded,
+            onOptionsClick: handleOptionsClick,
+            onReactionsClick: handleReactionsClick,
+        });
+    }, [
+        vm,
+        mxEvent,
+        roomContext.timelineRenderingType,
+        roomContext.canSendMessages,
+        roomContext.canReact,
+        isSearch,
+        isCard,
+        isQuoteExpanded,
+        getRelationsForEvent,
+        handleOptionsClick,
+        handleReactionsClick,
+        toggleThreadExpanded,
+    ]);
+
+    useEffect(() => {
+        onFocusChange?.(Boolean(optionsMenuAnchorRect || reactionsMenuAnchorRect));
+    }, [onFocusChange, optionsMenuAnchorRect, reactionsMenuAnchorRect]);
+
+    useEffect(() => {
+        setOptionsMenuAnchorRect(null);
+        setReactionsMenuAnchorRect(null);
+    }, [mxEvent]);
+
+    const closeOptionsMenu = useCallback((): void => {
+        setOptionsMenuAnchorRect(null);
+    }, []);
+
+    const closeReactionsMenu = useCallback((): void => {
+        setReactionsMenuAnchorRect(null);
+    }, []);
+
+    const tile = getTile();
+    const replyChain = getReplyChain();
+    const eventTileOps = tile?.getEventTileOps ? tile.getEventTileOps() : undefined;
+    const collapseReplyChain = replyChain?.canCollapse() ? replyChain.collapse : undefined;
+
+    return (
+        <>
+            <ActionBarView vm={vm} className="mx_MessageActionBar" />
+            {optionsMenuAnchorRect ? (
+                <MessageContextMenu
+                    {...aboveLeftOf(optionsMenuAnchorRect)}
+                    mxEvent={mxEvent}
+                    permalinkCreator={permalinkCreator}
+                    eventTileOps={eventTileOps}
+                    collapseReplyChain={collapseReplyChain}
+                    onFinished={closeOptionsMenu}
+                    getRelationsForEvent={getRelationsForEvent}
+                />
+            ) : null}
+            {reactionsMenuAnchorRect ? (
+                <ContextMenu
+                    {...aboveLeftOf(reactionsMenuAnchorRect)}
+                    onFinished={closeReactionsMenu}
+                    managed={false}
+                    focusLock
+                >
+                    <ReactionPicker mxEvent={mxEvent} reactions={reactions} onFinished={closeReactionsMenu} />
+                </ContextMenu>
+            ) : null}
+        </>
+    );
+}
diff --git a/apps/web/src/components/views/rooms/EventTile/E2eMessageSharedIcon.tsx b/apps/web/src/components/views/rooms/EventTile/E2eMessageSharedIcon.tsx
deleted file mode 100644
index d6dd6868eb..0000000000
--- a/apps/web/src/components/views/rooms/EventTile/E2eMessageSharedIcon.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { type JSX } from "react";
-import { EventTimeline } from "matrix-js-sdk/src/matrix";
-
-import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext.tsx";
-import { _t } from "../../../../languageHandler.tsx";
-import { E2ePadlock, E2ePadlockIcon } from "./E2ePadlock.tsx";
-
-/** The React properties of an {@link E2eMessageSharedIcon}. */
-interface E2eMessageSharedIconParams {
-    /** The ID of the user who shared the keys. */
-    keyForwardingUserId: string;
-
-    /** The ID of the room that contains the event whose keys were shared. Used to find the displayname of the user who shared the keys. */
-    roomId: string;
-}
-
-/**
- * A small icon with tooltip, used as part of an {@link EventTile}, which indicates that the key to this event
- * was shared with us by another user.
- *
- * An alternative to the {@link E2ePadlock} component, which is used for UTD events and other error cases.
- */
-export function E2eMessageSharedIcon(props: E2eMessageSharedIconParams): JSX.Element {
-    const { roomId, keyForwardingUserId } = props;
-    const client = useMatrixClientContext();
-
-    const roomState = client.getRoom(roomId)?.getLiveTimeline()?.getState(EventTimeline.FORWARDS);
-    const forwardingMember = roomState?.getMember(keyForwardingUserId);
-
-    // We always disambiguate the user, since we need to prevent users from forging a disambiguation, and
-    // the ToolTip component doesn't support putting styling inside a label.
-    const tooltip = _t("encryption|message_shared_by", {
-        displayName: forwardingMember?.rawDisplayName ?? keyForwardingUserId,
-        userId: keyForwardingUserId,
-    });
-
-    return <E2ePadlock icon={E2ePadlockIcon.Normal} title={tooltip} />;
-}
diff --git a/apps/web/src/components/views/rooms/EventTile/E2eMessageSharedIconAdapter.tsx b/apps/web/src/components/views/rooms/EventTile/E2eMessageSharedIconAdapter.tsx
new file mode 100644
index 0000000000..b470cf9ce3
--- /dev/null
+++ b/apps/web/src/components/views/rooms/EventTile/E2eMessageSharedIconAdapter.tsx
@@ -0,0 +1,67 @@
+/*
+Copyright 2026 Element Creations 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, { useEffect, type JSX } from "react";
+import { E2eMessageSharedIconView } from "@element-hq/web-shared-components";
+
+import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
+import { type EventTileViewModel } from "../../../../viewmodels/room/timeline/event-tile/EventTileViewModel";
+
+/**
+ * Props for the {@link E2eMessageSharedIconAdapter} component.
+ */
+interface E2eMessageSharedIconAdapterProps {
+    /** View model backing the shared-key indicator. */
+    eventTileViewModel: EventTileViewModel;
+    /** The ID of the room containing the event whose keys were shared. */
+    roomId: string;
+    /** The ID of the user who shared the keys. */
+    keyForwardingUserId: string;
+}
+
+/**
+ * Renders the end-to-end encryption key-sharing indicator.
+ */
+export function E2eMessageSharedIconAdapter({
+    eventTileViewModel,
+    roomId,
+    keyForwardingUserId,
+}: Readonly<E2eMessageSharedIconAdapterProps>): JSX.Element {
+    const client = useMatrixClientContext();
+    const vm = eventTileViewModel.getE2eMessageSharedIconViewModel({
+        client,
+        roomId,
+        keyForwardingUserId,
+    });
+
+    useEffect(() => {
+        // This child VM owns Matrix listeners, so release it when the view using it leaves the tree.
+        return () => eventTileViewModel.releaseE2eMessageSharedIconViewModel();
+    }, [eventTileViewModel]);
+
+    useEffect(() => {
+        vm.setClient(client);
+    }, [client, vm]);
+
+    useEffect(() => {
+        vm.setRoomId(roomId);
+    }, [roomId, vm]);
+
+    useEffect(() => {
+        vm.setKeyForwardingUserId(keyForwardingUserId);
+    }, [keyForwardingUserId, vm]);
+
+    return (
+        <E2eMessageSharedIconView
+            vm={vm}
+            className={
+                // Timeline PCSS uses this app class as a layout hook for positioning and layout variants.
+                "mx_EventTile_e2eIcon"
+            }
+        />
+    );
+}
diff --git a/apps/web/src/components/views/rooms/EventTile/E2ePadlock.tsx b/apps/web/src/components/views/rooms/EventTile/E2ePadlock.tsx
deleted file mode 100644
index a7fc925331..0000000000
--- a/apps/web/src/components/views/rooms/EventTile/E2ePadlock.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-/*
-Copyright 2025 Vector Creations Ltd.
-Copyright 2024 New Vector Ltd.
-Copyright 2015-2023 The Matrix.org Foundation C.I.C.
-Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { type ReactNode } from "react";
-import { ErrorSolidIcon, InfoIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-import { Tooltip } from "@vector-im/compound-web";
-
-import { _t } from "../../../../languageHandler.tsx";
-
-/**
- * The icon to display in an {@link E2ePadlock}.
- */
-export enum E2ePadlockIcon {
-    /** Compound Info icon in grey */
-    Normal = "normal",
-
-    /** Compound ErrorSolid icon in red */
-    Warning = "warning",
-
-    /** Compound ErrorSolid icon in grey */
-    DecryptionFailure = "decryption_failure",
-}
-
-interface IE2ePadlockProps {
-    /** The icon to display. */
-    icon: E2ePadlockIcon;
-
-    /** The tooltip for the icon, displayed on hover. */
-    title: string;
-}
-
-const icons = {
-    [E2ePadlockIcon.Normal]: <InfoIcon color="var(--cpd-color-icon-tertiary)" />,
-    [E2ePadlockIcon.Warning]: <ErrorSolidIcon color="var(--cpd-color-icon-critical-primary)" />,
-    [E2ePadlockIcon.DecryptionFailure]: <ErrorSolidIcon color="var(--cpd-color-icon-tertiary)" />,
-};
-
-/**
- * A small icon with tooltip, used in the left margin of an {@link EventTile}, which indicates a problem
- * with an encrypted event.
- *
- * The icon is rendered with `data-testid="e2e-padlock"`.
- */
-export function E2ePadlock(props: IE2ePadlockProps): ReactNode {
-    // We specify isTriggerInteractive=true and make the div interactive manually as a workaround for
-    // https://github.com/element-hq/compound/issues/294
-    return (
-        <Tooltip label={props.title} isTriggerInteractive={true}>
-            <div
-                data-testid="e2e-padlock"
-                className="mx_EventTile_e2eIcon"
-                tabIndex={0}
-                aria-label={_t("timeline|e2e_state")}
-            >
-                {icons[props.icon]}
-            </div>
-        </Tooltip>
-    );
-}
diff --git a/apps/web/src/components/views/rooms/EventTile/E2eStandardPadlockIcon.tsx b/apps/web/src/components/views/rooms/EventTile/E2eStandardPadlockIcon.tsx
new file mode 100644
index 0000000000..131c88d6c5
--- /dev/null
+++ b/apps/web/src/components/views/rooms/EventTile/E2eStandardPadlockIcon.tsx
@@ -0,0 +1,35 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { type JSX } from "react";
+import { E2ePadlock, type E2ePadlockIcon } from "@element-hq/web-shared-components";
+
+/**
+ * Props for the {@link E2eStandardPadlockIcon} component.
+ */
+interface E2eStandardPadlockIconProps {
+    /** Icon variant to render. */
+    icon: E2ePadlockIcon;
+    /** Accessible title for the icon. */
+    title: string;
+}
+
+/**
+ * Renders the standard end-to-end encryption padlock icon.
+ */
+export function E2eStandardPadlockIcon({ icon, title }: Readonly<E2eStandardPadlockIconProps>): JSX.Element {
+    return (
+        <E2ePadlock
+            className={
+                // Timeline PCSS uses this app class as a layout hook for positioning and layout variants.
+                "mx_EventTile_e2eIcon"
+            }
+            title={title}
+            icon={icon}
+        />
+    );
+}
diff --git a/apps/web/src/components/views/rooms/EventTile/EventPreviewAdapter.tsx b/apps/web/src/components/views/rooms/EventTile/EventPreviewAdapter.tsx
new file mode 100644
index 0000000000..9214bfe738
--- /dev/null
+++ b/apps/web/src/components/views/rooms/EventTile/EventPreviewAdapter.tsx
@@ -0,0 +1,50 @@
+/*
+Copyright 2026 Element Creations 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, { useEffect, type JSX } from "react";
+import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { EventPreviewView } from "@element-hq/web-shared-components";
+
+import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
+import { type EventTileViewModel } from "../../../../viewmodels/room/timeline/event-tile/EventTileViewModel";
+
+/**
+ * Props for the {@link EventPreviewAdapter} component.
+ */
+interface EventPreviewAdapterProps extends Omit<React.ComponentPropsWithoutRef<"span">, "children" | "title"> {
+    /** View model backing the event tile. */
+    eventTileViewModel: EventTileViewModel;
+    /** Matrix event whose preview is rendered. */
+    mxEvent: MatrixEvent;
+}
+
+/**
+ * Renders an event preview inside notification timeline tiles.
+ */
+export function EventPreviewAdapter({
+    eventTileViewModel,
+    mxEvent,
+    ...props
+}: Readonly<EventPreviewAdapterProps>): JSX.Element {
+    const cli = useMatrixClientContext();
+    const vm = eventTileViewModel.getEventPreviewViewModel({ cli, mxEvent });
+
+    useEffect(() => {
+        // This child VM owns Matrix listeners, so release it when the view using it leaves the tree.
+        return () => eventTileViewModel.releaseEventPreviewViewModel();
+    }, [eventTileViewModel]);
+
+    useEffect(() => {
+        vm.setClient(cli);
+    }, [cli, vm]);
+
+    useEffect(() => {
+        vm.setEvent(mxEvent);
+    }, [mxEvent, vm]);
+
+    return <EventPreviewView {...props} vm={vm} />;
+}
diff --git a/apps/web/src/components/views/rooms/EventTile/EventTileAvatarAdapter.tsx b/apps/web/src/components/views/rooms/EventTile/EventTileAvatarAdapter.tsx
new file mode 100644
index 0000000000..1805da4365
--- /dev/null
+++ b/apps/web/src/components/views/rooms/EventTile/EventTileAvatarAdapter.tsx
@@ -0,0 +1,47 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { type JSX } from "react";
+import { type RoomMember } from "matrix-js-sdk/src/matrix";
+
+import MemberAvatar from "../../avatars/MemberAvatar";
+import { type EventTileSenderSnapshot } from "../../../../viewmodels/room/timeline/event-tile/EventTileViewModel";
+
+/**
+ * Props for the {@link EventTileAvatarAdapter} component.
+ */
+interface EventTileAvatarAdapterProps {
+    /** Room member whose avatar is being rendered. */
+    avatarMember: RoomMember | null;
+    /** Snapshot of the sender identity state for this tile. */
+    senderSnapshot: EventTileSenderSnapshot;
+}
+
+/**
+ * Renders the sender avatar for an event tile.
+ */
+export function EventTileAvatarAdapter({
+    avatarMember,
+    senderSnapshot,
+}: Readonly<EventTileAvatarAdapterProps>): JSX.Element | null {
+    const { avatarSize } = senderSnapshot.profileState;
+
+    if (!avatarMember || avatarSize === null) {
+        return null;
+    }
+
+    return (
+        <div className="mx_EventTile_avatar">
+            <MemberAvatar
+                member={avatarMember}
+                size={avatarSize}
+                viewUserOnClick={senderSnapshot.viewUserOnClick}
+                forceHistorical={senderSnapshot.forceHistoricalAvatar}
+            />
+        </div>
+    );
+}
diff --git a/apps/web/src/components/views/rooms/EventTile/EventTileFooter.tsx b/apps/web/src/components/views/rooms/EventTile/EventTileFooter.tsx
new file mode 100644
index 0000000000..28b74086cf
--- /dev/null
+++ b/apps/web/src/components/views/rooms/EventTile/EventTileFooter.tsx
@@ -0,0 +1,73 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { type JSX } from "react";
+import { type MatrixEvent, type Relations } from "matrix-js-sdk/src/matrix";
+import { PinnedMessageBadge } from "@element-hq/web-shared-components";
+
+import { type EventTileViewModel } from "../../../../viewmodels/room/timeline/event-tile/EventTileViewModel";
+import { ReactionsRowAdapter } from "./ReactionsRowAdapter";
+
+interface EventTileFooterProps {
+    eventTileViewModel: EventTileViewModel;
+    mxEvent: MatrixEvent;
+    reactions?: Relations | null;
+    hasFooter: boolean;
+    hasPinnedMessageBadge: boolean;
+    hasReactionsRow: boolean;
+    pinnedMessageBadgeAriaDescribedBy: string;
+    placement: "default" | "irc";
+    showMainPinnedMessageBadge?: boolean;
+    showBubblePinnedMessageBadge?: boolean;
+}
+
+/** Renders the pinned-message badge and reactions row for an EventTile. */
+export function EventTileFooter({
+    eventTileViewModel,
+    mxEvent,
+    reactions,
+    hasFooter,
+    hasPinnedMessageBadge,
+    hasReactionsRow,
+    pinnedMessageBadgeAriaDescribedBy,
+    placement,
+    showMainPinnedMessageBadge,
+    showBubblePinnedMessageBadge,
+}: Readonly<EventTileFooterProps>): JSX.Element | null {
+    if (!hasFooter) {
+        return null;
+    }
+
+    const pinnedMessageBadge = hasPinnedMessageBadge ? (
+        <PinnedMessageBadge aria-describedby={pinnedMessageBadgeAriaDescribedBy} tabIndex={0} />
+    ) : undefined;
+    const reactionsRow = hasReactionsRow ? (
+        <ReactionsRowAdapter
+            eventTileViewModel={eventTileViewModel}
+            mxEvent={mxEvent}
+            reactions={reactions}
+            key="mx_EventTile_reactionsRow"
+        />
+    ) : undefined;
+
+    if (placement === "irc") {
+        return (
+            <div className="mx_EventTile_footer">
+                {pinnedMessageBadge}
+                {reactionsRow}
+            </div>
+        );
+    }
+
+    return (
+        <div className="mx_EventTile_footer">
+            {showMainPinnedMessageBadge && pinnedMessageBadge}
+            {reactionsRow}
+            {showBubblePinnedMessageBadge && pinnedMessageBadge}
+        </div>
+    );
+}
diff --git a/apps/web/src/components/views/rooms/EventTile/EventTilePreviewBody.tsx b/apps/web/src/components/views/rooms/EventTile/EventTilePreviewBody.tsx
new file mode 100644
index 0000000000..7ef4ba1862
--- /dev/null
+++ b/apps/web/src/components/views/rooms/EventTile/EventTilePreviewBody.tsx
@@ -0,0 +1,36 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { type JSX } from "react";
+import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import { DecryptionFailureBodyFactory, RedactedBodyFactory } from "../../messages/MBodyFactory";
+import { EventPreviewAdapter } from "./EventPreviewAdapter";
+import { type EventTileViewModel } from "../../../../viewmodels/room/timeline/event-tile/EventTileViewModel";
+
+interface EventTilePreviewBodyProps {
+    eventTileViewModel: EventTileViewModel;
+    mxEvent: MatrixEvent;
+}
+
+/** Renders the compact body preview used by notification and thread-list tiles. */
+export function EventTilePreviewBody({
+    eventTileViewModel,
+    mxEvent,
+}: Readonly<EventTilePreviewBodyProps>): JSX.Element {
+    let body: JSX.Element;
+
+    if (mxEvent.isRedacted()) {
+        body = <RedactedBodyFactory mxEvent={mxEvent} />;
+    } else if (mxEvent.isDecryptionFailure()) {
+        body = <DecryptionFailureBodyFactory mxEvent={mxEvent} />;
+    } else {
+        body = <EventPreviewAdapter eventTileViewModel={eventTileViewModel} mxEvent={mxEvent} />;
+    }
+
+    return <div className="mx_EventTile_body">{body}</div>;
+}
diff --git a/apps/web/src/components/views/rooms/EventTile/EventTileSenderAdapter.tsx b/apps/web/src/components/views/rooms/EventTile/EventTileSenderAdapter.tsx
new file mode 100644
index 0000000000..9a4ecf1b9a
--- /dev/null
+++ b/apps/web/src/components/views/rooms/EventTile/EventTileSenderAdapter.tsx
@@ -0,0 +1,49 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { type JSX } from "react";
+
+import SenderProfile from "../../messages/SenderProfile";
+import { type EventTileSenderSnapshot } from "../../../../viewmodels/room/timeline/event-tile/EventTileViewModel";
+
+/**
+ * Props for the {@link EventTileSenderAdapter} component.
+ */
+interface EventTileSenderAdapterProps {
+    /** The sender identity state for this tile. */
+    sender: EventTileSenderSnapshot;
+    /** Invoked when the sender profile is clicked. */
+    onSenderProfileClick: () => void;
+}
+
+/**
+ * Renders the sender identity display for an event tile.
+ */
+export function EventTileSenderAdapter({
+    sender,
+    onSenderProfileClick,
+}: Readonly<EventTileSenderAdapterProps>): JSX.Element | null {
+    switch (sender.profileMode) {
+        case "clickable":
+            return (
+                <SenderProfile
+                    onClick={onSenderProfileClick}
+                    senderId={sender.senderId}
+                    member={sender.member}
+                    isEmote={sender.isEmote}
+                />
+            );
+        case "tooltip":
+            return (
+                <SenderProfile senderId={sender.senderId} member={sender.member} isEmote={sender.isEmote} withTooltip />
+            );
+        case "default":
+            return <SenderProfile senderId={sender.senderId} member={sender.member} isEmote={sender.isEmote} />;
+        default:
+            return null;
+    }
+}
diff --git a/apps/web/src/components/views/rooms/EventTile/EventTileThreadInfo.tsx b/apps/web/src/components/views/rooms/EventTile/EventTileThreadInfo.tsx
new file mode 100644
index 0000000000..b873c7f551
--- /dev/null
+++ b/apps/web/src/components/views/rooms/EventTile/EventTileThreadInfo.tsx
@@ -0,0 +1,78 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { type JSX, type ReactNode } from "react";
+import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { ThreadsIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import { _t } from "../../../../languageHandler";
+import { type EventTileViewModel } from "../../../../viewmodels/room/timeline/event-tile/EventTileViewModel";
+import { type EventTileThreadState } from "../../../../viewmodels/room/timeline/event-tile/EventTileThreadState";
+import { ThreadMessagePreviewAdapter } from "./ThreadMessagePreviewAdapter";
+import { ThreadSummaryAdapter } from "./ThreadSummaryAdapter";
+
+interface EventTileThreadInfoProps {
+    eventTileViewModel: EventTileViewModel;
+    mxEvent: MatrixEvent;
+    threadState: EventTileThreadState;
+}
+
+/** Renders the thread-panel reply summary shown under a preview tile. */
+export function EventTileThreadPanelSummary({
+    eventTileViewModel,
+    threadState,
+}: Readonly<Omit<EventTileThreadInfoProps, "mxEvent">>): JSX.Element | null {
+    if (!threadState.shouldShowThreadPanelSummary || !threadState.thread) {
+        return null;
+    }
+
+    return (
+        <div className="mx_ThreadPanel_replies">
+            <ThreadsIcon />
+            <span className="mx_ThreadPanel_replies_amount">{threadState.thread.length}</span>
+            <ThreadMessagePreviewAdapter eventTileViewModel={eventTileViewModel} thread={threadState.thread} />
+        </div>
+    );
+}
+
+/** Renders thread summary or search thread affordances for an EventTile. */
+export function EventTileThreadInfo({
+    eventTileViewModel,
+    mxEvent,
+    threadState,
+}: Readonly<EventTileThreadInfoProps>): ReactNode {
+    if (threadState.shouldShowThreadSummary && threadState.thread) {
+        return (
+            <ThreadSummaryAdapter
+                eventTileViewModel={eventTileViewModel}
+                mxEvent={mxEvent}
+                thread={threadState.thread}
+                data-testid="thread-summary"
+            />
+        );
+    }
+
+    if (threadState.searchThreadInfo.kind === "link") {
+        return (
+            <a className="mx_ThreadSummary_icon" href={threadState.searchThreadInfo.href}>
+                <ThreadsIcon />
+                {_t("timeline|thread_info_basic")}
+            </a>
+        );
+    }
+
+    if (threadState.searchThreadInfo.kind === "text") {
+        return (
+            <p className="mx_ThreadSummary_icon">
+                <ThreadsIcon />
+                {_t("timeline|thread_info_basic")}
+            </p>
+        );
+    }
+
+    return null;
+}
diff --git a/apps/web/src/components/views/rooms/EventTile/EventTileTimestampSlot.tsx b/apps/web/src/components/views/rooms/EventTile/EventTileTimestampSlot.tsx
new file mode 100644
index 0000000000..f48eafea19
--- /dev/null
+++ b/apps/web/src/components/views/rooms/EventTile/EventTileTimestampSlot.tsx
@@ -0,0 +1,45 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { type JSX } from "react";
+
+import { type EventTileViewModel } from "../../../../viewmodels/room/timeline/event-tile/EventTileViewModel";
+import { type MessageTimestampViewModelProps } from "../../../../viewmodels/room/timeline/event-tile/timestamp/MessageTimestampViewModel";
+import { MessageTimestampAdapter } from "./MessageTimestampAdapter";
+
+interface EventTileTimestampSlotProps {
+    eventTileViewModel: EventTileViewModel;
+    kind: "plain" | "linked";
+    timestampProps: MessageTimestampViewModelProps;
+    showTimestamp: boolean;
+    showDummy: boolean;
+}
+
+/** Renders a real or placeholder timestamp slot for an EventTile. */
+export function EventTileTimestampSlot({
+    eventTileViewModel,
+    kind,
+    timestampProps,
+    showTimestamp,
+    showDummy,
+}: Readonly<EventTileTimestampSlotProps>): JSX.Element | null {
+    if (showTimestamp) {
+        return (
+            <MessageTimestampAdapter
+                eventTileViewModel={eventTileViewModel}
+                kind={kind}
+                timestampProps={timestampProps}
+            />
+        );
+    }
+
+    if (showDummy) {
+        return <span className="mx_MessageTimestamp" />;
+    }
+
+    return null;
+}
diff --git a/apps/web/src/components/views/rooms/EventTile/MessageTimestampAdapter.tsx b/apps/web/src/components/views/rooms/EventTile/MessageTimestampAdapter.tsx
new file mode 100644
index 0000000000..dbdae82278
--- /dev/null
+++ b/apps/web/src/components/views/rooms/EventTile/MessageTimestampAdapter.tsx
@@ -0,0 +1,52 @@
+/*
+Copyright 2026 Element Creations 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, { useEffect, type JSX } from "react";
+import { MessageTimestampView } from "@element-hq/web-shared-components";
+
+import { type EventTileViewModel } from "../../../../viewmodels/room/timeline/event-tile/EventTileViewModel";
+import { type MessageTimestampViewModelProps } from "../../../../viewmodels/room/timeline/event-tile/timestamp/MessageTimestampViewModel.ts";
+import LateIcon from "../../../../../res/img/sensor.svg?react";
+
+/**
+ * Props for the {@link MessageTimestampAdapter} component.
+ */
+interface MessageTimestampAdapterProps {
+    /** View model backing the event tile timestamp. */
+    eventTileViewModel: EventTileViewModel;
+    /** Chooses the plain or linked timestamp view model. */
+    kind: "plain" | "linked";
+    /** Props forwarded into the timestamp view model. */
+    timestampProps: MessageTimestampViewModelProps;
+}
+
+/**
+ * Renders the timestamp badge for an event tile.
+ */
+export function MessageTimestampAdapter({
+    eventTileViewModel,
+    kind,
+    timestampProps,
+}: Readonly<MessageTimestampAdapterProps>): JSX.Element {
+    const vm =
+        kind === "linked"
+            ? eventTileViewModel.getLinkedMessageTimestampViewModel(timestampProps)
+            : eventTileViewModel.getMessageTimestampViewModel(timestampProps);
+
+    useEffect(() => {
+        vm.setProps(timestampProps);
+    }, [vm, timestampProps]);
+
+    return (
+        <>
+            {timestampProps.receivedTs ? (
+                <LateIcon className="mx_MessageTimestamp_lateIcon" width="16" height="16" />
+            ) : undefined}
+            <MessageTimestampView vm={vm} className="mx_MessageTimestamp" />
+        </>
+    );
+}
diff --git a/apps/web/src/components/views/rooms/EventTile/ReactionsRowAdapter.tsx b/apps/web/src/components/views/rooms/EventTile/ReactionsRowAdapter.tsx
new file mode 100644
index 0000000000..f832a5604a
--- /dev/null
+++ b/apps/web/src/components/views/rooms/EventTile/ReactionsRowAdapter.tsx
@@ -0,0 +1,289 @@
+/*
+Copyright 2026 Element Creations 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, { useCallback, useContext, useEffect, useMemo, useState, type JSX } from "react";
+import { MatrixEventEvent, type MatrixEvent, type Relations, RelationsEvent } from "matrix-js-sdk/src/matrix";
+import { uniqBy } from "lodash";
+import {
+    ReactionsRowButtonView,
+    ReactionsRowView,
+    useCreateAutoDisposedViewModel,
+    useViewModel,
+} from "@element-hq/web-shared-components";
+
+import ContextMenu, { aboveLeftOf } from "../../../structures/ContextMenu";
+import ReactionPicker from "../../emojipicker/ReactionPicker";
+import RoomContext from "../../../../contexts/RoomContext";
+import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
+import SettingsStore from "../../../../settings/SettingsStore";
+import { isContentActionable } from "../../../../utils/EventUtils";
+import { type EventTileViewModel } from "../../../../viewmodels/room/timeline/event-tile/EventTileViewModel";
+import { ReactionsRowButtonViewModel } from "../../../../viewmodels/room/timeline/event-tile/reactions/ReactionsRowButtonViewModel";
+import { MAX_ITEMS_WHEN_LIMITED } from "../../../../viewmodels/room/timeline/event-tile/reactions/ReactionsRowViewModel";
+
+/**
+ * Props for the {@link ReactionsRowButtonAdapter} component.
+ */
+interface ReactionsRowButtonAdapterProps {
+    /** Matrix event whose reaction button is being rendered. */
+    mxEvent: MatrixEvent;
+    /** Reaction emoji or custom content key for this button. */
+    content: string;
+    /** Total number of reactions in this group. */
+    count: number;
+    /** Reaction events belonging to this group. */
+    reactionEvents: MatrixEvent[];
+    /** The current user's reaction event, if present. */
+    myReactionEvent?: MatrixEvent;
+    /** Disables interaction when true. */
+    disabled?: boolean;
+    /** Enables rendering custom reaction images. */
+    customReactionImagesEnabled?: boolean;
+}
+
+/**
+ * Renders a single reaction button within the event tile reaction row.
+ */
+function ReactionsRowButtonAdapter(props: Readonly<ReactionsRowButtonAdapterProps>): JSX.Element {
+    const client = useMatrixClientContext();
+
+    const vm = useCreateAutoDisposedViewModel(
+        () =>
+            new ReactionsRowButtonViewModel({
+                client,
+                mxEvent: props.mxEvent,
+                content: props.content,
+                count: props.count,
+                reactionEvents: props.reactionEvents,
+                myReactionEvent: props.myReactionEvent,
+                disabled: props.disabled,
+                customReactionImagesEnabled: props.customReactionImagesEnabled,
+            }),
+    );
+
+    useEffect(() => {
+        vm.setReactionData(props.content, props.reactionEvents, props.customReactionImagesEnabled);
+    }, [props.content, props.reactionEvents, props.customReactionImagesEnabled, vm]);
+
+    useEffect(() => {
+        vm.setCount(props.count);
+    }, [props.count, vm]);
+
+    useEffect(() => {
+        vm.setMyReactionEvent(props.myReactionEvent);
+    }, [props.myReactionEvent, vm]);
+
+    useEffect(() => {
+        vm.setDisabled(props.disabled);
+    }, [props.disabled, vm]);
+
+    return <ReactionsRowButtonView vm={vm} />;
+}
+
+interface ReactionGroup {
+    content: string;
+    events: MatrixEvent[];
+}
+
+const getReactionGroups = (reactions?: Relations | null): ReactionGroup[] =>
+    reactions
+        ?.getSortedAnnotationsByKey()
+        ?.map(([content, events]) => ({
+            content,
+            events: [...events],
+        }))
+        .filter(({ events }) => events.length > 0) ?? [];
+
+const getMyReactions = (reactions: Relations | null | undefined, userId?: string): MatrixEvent[] | null => {
+    if (!reactions || !userId) {
+        return null;
+    }
+
+    const myReactions = reactions.getAnnotationsBySender()?.[userId];
+    if (!myReactions) {
+        return null;
+    }
+
+    return [...myReactions.values()];
+};
+
+/**
+ * Props for the {@link ReactionsRowAdapter} component.
+ */
+interface ReactionsRowAdapterProps {
+    /** View model backing the event tile reaction row. */
+    eventTileViewModel: EventTileViewModel;
+    /** Matrix event whose reactions are being rendered. */
+    mxEvent: MatrixEvent;
+    /** Current reaction relations for the event, if available. */
+    reactions?: Relations | null;
+}
+
+/**
+ * Renders the reaction row and reaction picker for an event tile.
+ */
+export function ReactionsRowAdapter({
+    eventTileViewModel,
+    mxEvent,
+    reactions,
+}: Readonly<ReactionsRowAdapterProps>): JSX.Element | null {
+    const roomContext = useContext(RoomContext);
+    const userId = roomContext.room?.client.getUserId() ?? undefined;
+    const [reactionGroups, setReactionGroups] = useState<ReactionGroup[]>(() => getReactionGroups(reactions));
+    const [myReactions, setMyReactions] = useState<MatrixEvent[] | null>(() => getMyReactions(reactions, userId));
+    const [menuDisplayed, setMenuDisplayed] = useState(false);
+    const [menuAnchorRect, setMenuAnchorRect] = useState<DOMRect | null>(null);
+
+    const vm = eventTileViewModel.getReactionsRowViewModel({
+        isActionable: isContentActionable(mxEvent),
+        reactionGroupCount: reactionGroups.length,
+        canReact: roomContext.canReact,
+        addReactionButtonActive: false,
+    });
+
+    useEffect(() => {
+        // This child VM is owned by EventTileViewModel, but scoped to this rendered adapter surface.
+        return () => eventTileViewModel.releaseReactionsRowViewModel();
+    }, [eventTileViewModel]);
+
+    const openReactionMenu = useCallback((event: React.MouseEvent<HTMLButtonElement>): void => {
+        setMenuAnchorRect(event.currentTarget.getBoundingClientRect());
+        setMenuDisplayed(true);
+    }, []);
+
+    const closeReactionMenu = useCallback((): void => {
+        setMenuDisplayed(false);
+    }, []);
+
+    const updateReactionsState = useCallback((): void => {
+        const nextReactionGroups = getReactionGroups(reactions);
+        setReactionGroups(nextReactionGroups);
+        setMyReactions(getMyReactions(reactions, userId));
+        vm.setReactionGroupCount(nextReactionGroups.length);
+    }, [reactions, userId, vm]);
+
+    useEffect(() => {
+        vm.setActionable(isContentActionable(mxEvent));
+    }, [mxEvent, vm]);
+
+    useEffect(() => {
+        vm.setCanReact(roomContext.canReact);
+        if (!roomContext.canReact && menuDisplayed) {
+            setMenuDisplayed(false);
+        }
+    }, [roomContext.canReact, menuDisplayed, vm]);
+
+    useEffect(() => {
+        vm.setAddReactionHandlers({
+            onAddReactionClick: openReactionMenu,
+            onAddReactionContextMenu: openReactionMenu,
+        });
+    }, [openReactionMenu, vm]);
+
+    useEffect(() => {
+        vm.setAddReactionButtonActive(menuDisplayed);
+    }, [menuDisplayed, vm]);
+
+    useEffect(() => {
+        updateReactionsState();
+    }, [updateReactionsState]);
+
+    useEffect(() => {
+        if (!reactions) return;
+
+        reactions.on(RelationsEvent.Add, updateReactionsState);
+        reactions.on(RelationsEvent.Remove, updateReactionsState);
+        reactions.on(RelationsEvent.Redaction, updateReactionsState);
+
+        return () => {
+            reactions.off(RelationsEvent.Add, updateReactionsState);
+            reactions.off(RelationsEvent.Remove, updateReactionsState);
+            reactions.off(RelationsEvent.Redaction, updateReactionsState);
+        };
+    }, [reactions, updateReactionsState]);
+
+    useEffect(() => {
+        const onDecrypted = (): void => {
+            vm.setActionable(isContentActionable(mxEvent));
+        };
+
+        if (mxEvent.isBeingDecrypted() || mxEvent.shouldAttemptDecryption()) {
+            mxEvent.once(MatrixEventEvent.Decrypted, onDecrypted);
+        }
+
+        return () => {
+            mxEvent.off(MatrixEventEvent.Decrypted, onDecrypted);
+        };
+    }, [mxEvent, vm]);
+
+    const snapshot = useViewModel(vm);
+    const customReactionImagesEnabled = SettingsStore.getValue("feature_render_reaction_images");
+    const items = useMemo((): JSX.Element[] | undefined => {
+        const mappedItems = reactionGroups.map(({ content, events }) => {
+            // Deduplicate reaction events by sender per Matrix spec.
+            const deduplicatedEvents = uniqBy(events, (event: MatrixEvent) => event.getSender());
+            const myReactionEvent = myReactions?.find((reactionEvent) => {
+                if (reactionEvent.isRedacted()) {
+                    return false;
+                }
+                return reactionEvent.getRelation()?.key === content;
+            });
+
+            return (
+                <ReactionsRowButtonAdapter
+                    key={content}
+                    content={content}
+                    count={deduplicatedEvents.length}
+                    mxEvent={mxEvent}
+                    reactionEvents={deduplicatedEvents}
+                    myReactionEvent={myReactionEvent}
+                    customReactionImagesEnabled={customReactionImagesEnabled}
+                    disabled={
+                        !roomContext.canReact ||
+                        (myReactionEvent && !myReactionEvent.isRedacted() && !roomContext.canSelfRedact)
+                    }
+                />
+            );
+        });
+
+        if (!mappedItems.length) {
+            return undefined;
+        }
+
+        return snapshot.showAllButtonVisible ? mappedItems.slice(0, MAX_ITEMS_WHEN_LIMITED) : mappedItems;
+    }, [
+        reactionGroups,
+        myReactions,
+        mxEvent,
+        customReactionImagesEnabled,
+        roomContext.canReact,
+        roomContext.canSelfRedact,
+        snapshot.showAllButtonVisible,
+    ]);
+
+    if (!snapshot.isVisible || !items?.length) {
+        return null;
+    }
+
+    let contextMenu: JSX.Element | undefined;
+    if (menuDisplayed && menuAnchorRect && reactions && roomContext.canReact) {
+        contextMenu = (
+            <ContextMenu {...aboveLeftOf(menuAnchorRect)} onFinished={closeReactionMenu} managed={false} focusLock>
+                <ReactionPicker mxEvent={mxEvent} reactions={reactions} onFinished={closeReactionMenu} />
+            </ContextMenu>
+        );
+    }
+
+    return (
+        <>
+            <ReactionsRowView vm={vm} className="mx_ReactionsRow">
+                {items}
+            </ReactionsRowView>
+            {contextMenu}
+        </>
+    );
+}
diff --git a/apps/web/src/components/views/rooms/EventTile/ReceiptAdapter.tsx b/apps/web/src/components/views/rooms/EventTile/ReceiptAdapter.tsx
new file mode 100644
index 0000000000..81fa694993
--- /dev/null
+++ b/apps/web/src/components/views/rooms/EventTile/ReceiptAdapter.tsx
@@ -0,0 +1,121 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { type JSX } from "react";
+import { type EventStatus, type RoomMember } from "matrix-js-sdk/src/matrix";
+import { Tooltip } from "@vector-im/compound-web";
+import { CheckCircleIcon, CircleIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import { _t } from "../../../../languageHandler";
+import { StaticNotificationState } from "../../../../stores/notifications/StaticNotificationState";
+import { NotificationBadge } from "../NotificationBadge/NotificationBadge";
+import { ReadReceiptGroup } from "../ReadReceiptGroup";
+import { type IReadReceiptPosition } from "../ReadReceiptMarker";
+import { type EventTileReceiptState } from "../../../../viewmodels/room/timeline/event-tile/EventTileReceiptState";
+
+/**
+ * A single read receipt entry displayed in the event tile receipt row.
+ */
+interface ReadReceiptProps {
+    /** The user ID associated with the receipt. */
+    userId: string;
+    /** The room member metadata for the user, if available. */
+    roomMember: RoomMember | null;
+    /** Timestamp of the receipt in milliseconds since the Unix epoch. */
+    ts: number;
+}
+
+/**
+ * Props for the {@link ReceiptAdapter} component.
+ */
+interface ReceiptAdapterProps {
+    /** Current receipt state for the event tile. */
+    receiptState: EventTileReceiptState;
+    /** Send status used when rendering the sent-state badge. */
+    eventSendStatus?: EventStatus;
+    /** Whether read receipts should be shown. */
+    showReadReceipts?: boolean;
+    /** Read receipts to render when the group is visible. */
+    readReceipts?: ReadReceiptProps[];
+    /** Read receipt positions keyed by user ID. */
+    readReceiptMap?: { [userId: string]: IReadReceiptPosition };
+    /** Checks whether the receipt row is unmounting. */
+    checkUnmounting?: () => boolean;
+    /** Suppresses receipt animation when true. */
+    suppressAnimation: boolean;
+    /** Whether timestamps should use a 12-hour clock. */
+    isTwelveHour?: boolean;
+}
+
+/**
+ * Renders the send-state or read-receipt indicator for an event tile.
+ */
+export function ReceiptAdapter({
+    receiptState,
+    eventSendStatus,
+    showReadReceipts,
+    readReceipts,
+    readReceiptMap,
+    checkUnmounting,
+    suppressAnimation,
+    isTwelveHour,
+}: Readonly<ReceiptAdapterProps>): JSX.Element | null {
+    if (receiptState.shouldShowSentReceipt || receiptState.shouldShowSendingReceipt) {
+        return <SentReceipt messageState={eventSendStatus} />;
+    }
+
+    if (!showReadReceipts) {
+        return null;
+    }
+
+    return (
+        <ReadReceiptGroup
+            readReceipts={readReceipts ?? []}
+            readReceiptMap={readReceiptMap ?? {}}
+            checkUnmounting={checkUnmounting}
+            suppressAnimation={suppressAnimation}
+            isTwelveHour={isTwelveHour}
+        />
+    );
+}
+
+interface SentReceiptProps {
+    messageState: EventStatus | undefined;
+}
+
+function SentReceipt({ messageState }: Readonly<SentReceiptProps>): JSX.Element {
+    const isSent = !messageState || messageState === "sent";
+    const isFailed = messageState === "not_sent";
+
+    let icon: JSX.Element | undefined;
+    let label: string | undefined;
+    if (messageState === "encrypting") {
+        icon = <CircleIcon />;
+        label = _t("timeline|send_state_encrypting");
+    } else if (isSent) {
+        icon = <CheckCircleIcon />;
+        label = _t("timeline|send_state_sent");
+    } else if (isFailed) {
+        icon = <NotificationBadge notification={StaticNotificationState.RED_EXCLAMATION} />;
+        label = _t("timeline|send_state_failed");
+    } else {
+        icon = <CircleIcon />;
+        label = _t("timeline|send_state_sending");
+    }
+
+    return (
+        <div className="mx_EventTile_msgOption">
+            <div className="mx_ReadReceiptGroup">
+                <Tooltip label={label} placement="top-end">
+                    <div className="mx_ReadReceiptGroup_button" role="status">
+                        <span className="mx_ReadReceiptGroup_container">{icon}</span>
+                    </div>
+                </Tooltip>
+            </div>
+        </div>
+    );
+}
diff --git a/apps/web/src/components/views/rooms/EventTile/ThreadListActionBarAdapter.tsx b/apps/web/src/components/views/rooms/EventTile/ThreadListActionBarAdapter.tsx
new file mode 100644
index 0000000000..9d7c23225e
--- /dev/null
+++ b/apps/web/src/components/views/rooms/EventTile/ThreadListActionBarAdapter.tsx
@@ -0,0 +1,49 @@
+/*
+Copyright 2026 Element Creations 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, { useEffect, type JSX } from "react";
+import { ActionBarView } from "@element-hq/web-shared-components";
+
+import { type EventTileViewModel } from "../../../../viewmodels/room/timeline/event-tile/EventTileViewModel";
+
+/**
+ * Props for the {@link ThreadListActionBarAdapter} component.
+ */
+interface ThreadListActionBarAdapterProps {
+    /** View model backing the thread list action bar. */
+    eventTileViewModel: EventTileViewModel;
+    /** Opens the event in the room timeline. */
+    onViewInRoomClick: (anchor: HTMLElement | null) => void;
+    /** Copies the event permalink to the clipboard. */
+    onCopyLinkClick: (anchor: HTMLElement | null) => void | Promise<void>;
+    /** Optional class name applied to the action bar. */
+    className?: string;
+}
+
+/**
+ * Renders the action bar used by the thread list view.
+ */
+export function ThreadListActionBarAdapter({
+    eventTileViewModel,
+    onViewInRoomClick,
+    onCopyLinkClick,
+    className,
+}: Readonly<ThreadListActionBarAdapterProps>): JSX.Element {
+    const vm = eventTileViewModel.getThreadListActionBarViewModel({
+        onViewInRoomClick,
+        onCopyLinkClick,
+    });
+
+    useEffect(() => {
+        vm.setProps({
+            onViewInRoomClick,
+            onCopyLinkClick,
+        });
+    }, [vm, onViewInRoomClick, onCopyLinkClick]);
+
+    return <ActionBarView vm={vm} className={className} />;
+}
diff --git a/apps/web/src/components/views/rooms/EventTile/ThreadMessagePreviewAdapter.tsx b/apps/web/src/components/views/rooms/EventTile/ThreadMessagePreviewAdapter.tsx
new file mode 100644
index 0000000000..33de886832
--- /dev/null
+++ b/apps/web/src/components/views/rooms/EventTile/ThreadMessagePreviewAdapter.tsx
@@ -0,0 +1,71 @@
+/*
+Copyright 2026 Element Creations 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, { useEffect, type JSX } from "react";
+import { type Thread } from "matrix-js-sdk/src/matrix";
+import { ThreadMessagePreviewView } from "@element-hq/web-shared-components";
+
+import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
+import { useScopedRoomContext } from "../../../../contexts/ScopedRoomContext.tsx";
+import { useSettingValue } from "../../../../hooks/useSettings";
+import { type EventTileViewModel } from "../../../../viewmodels/room/timeline/event-tile/EventTileViewModel";
+
+/**
+ * Props for the {@link ThreadMessagePreviewAdapter} component.
+ */
+interface ThreadMessagePreviewAdapterProps {
+    /** View model backing the thread preview. */
+    eventTileViewModel: EventTileViewModel;
+    /** Thread whose message preview is rendered. */
+    thread: Thread;
+    /** Whether the sender display name should be shown. */
+    showDisplayName?: boolean;
+}
+
+/**
+ * Renders the preview shown for a thread message.
+ */
+export function ThreadMessagePreviewAdapter({
+    eventTileViewModel,
+    thread,
+    showDisplayName = false,
+}: Readonly<ThreadMessagePreviewAdapterProps>): JSX.Element {
+    const cli = useMatrixClientContext();
+    const { room, timelineRenderingType, lowBandwidth } = useScopedRoomContext(
+        "room",
+        "timelineRenderingType",
+        "lowBandwidth",
+    );
+    const useOnlyCurrentProfiles = useSettingValue("useOnlyCurrentProfiles");
+    const vm = eventTileViewModel.getThreadMessagePreviewViewModel({
+        cli,
+        thread,
+        room,
+        timelineRenderingType,
+        lowBandwidth,
+        useOnlyCurrentProfiles,
+        showDisplayName,
+        avatarClassName: "mx_BaseAvatar",
+    });
+
+    useEffect(() => {
+        // This child VM owns Matrix listeners, so release it when the view using it leaves the tree.
+        return () => eventTileViewModel.releaseThreadMessagePreviewViewModel();
+    }, [eventTileViewModel]);
+
+    useEffect(() => {
+        vm.setClient(cli);
+        vm.setThread(thread);
+        vm.setRoom(room);
+        vm.setTimelineRenderingType(timelineRenderingType);
+        vm.setLowBandwidth(lowBandwidth);
+        vm.setUseOnlyCurrentProfiles(useOnlyCurrentProfiles);
+        vm.setShowDisplayName(showDisplayName);
+    }, [vm, cli, thread, room, timelineRenderingType, lowBandwidth, useOnlyCurrentProfiles, showDisplayName]);
+
+    return <ThreadMessagePreviewView vm={vm} />;
+}
diff --git a/apps/web/src/components/views/rooms/EventTile/ThreadSummaryAdapter.tsx b/apps/web/src/components/views/rooms/EventTile/ThreadSummaryAdapter.tsx
new file mode 100644
index 0000000000..4f12d4c44f
--- /dev/null
+++ b/apps/web/src/components/views/rooms/EventTile/ThreadSummaryAdapter.tsx
@@ -0,0 +1,81 @@
+/*
+Copyright 2026 Element Creations 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, { useContext, useEffect, type JSX } from "react";
+import classNames from "classnames";
+import { type MatrixEvent, type Thread } from "matrix-js-sdk/src/matrix";
+import { ThreadSummaryView } from "@element-hq/web-shared-components";
+
+import { CardContext } from "../../right_panel/context";
+import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
+import { useScopedRoomContext } from "../../../../contexts/ScopedRoomContext.tsx";
+import { useSettingValue } from "../../../../hooks/useSettings";
+import { type EventTileViewModel } from "../../../../viewmodels/room/timeline/event-tile/EventTileViewModel";
+
+/**
+ * Props for the {@link ThreadSummaryAdapter} component.
+ */
+interface ThreadSummaryAdapterProps extends Omit<React.ComponentPropsWithoutRef<"button">, "aria-label" | "onClick"> {
+    /** View model backing the thread summary tile. */
+    eventTileViewModel: EventTileViewModel;
+    /** Root event for the thread summary. */
+    mxEvent: MatrixEvent;
+    /** Thread represented by the summary tile. */
+    thread: Thread;
+}
+
+/**
+ * Renders the thread summary tile for an event.
+ */
+export function ThreadSummaryAdapter({
+    eventTileViewModel,
+    mxEvent,
+    thread,
+    className,
+    ...props
+}: Readonly<ThreadSummaryAdapterProps>): JSX.Element {
+    const cli = useMatrixClientContext();
+    const { isCard } = useContext(CardContext);
+    const { narrow, room, timelineRenderingType, lowBandwidth } = useScopedRoomContext(
+        "narrow",
+        "room",
+        "timelineRenderingType",
+        "lowBandwidth",
+    );
+    const useOnlyCurrentProfiles = useSettingValue("useOnlyCurrentProfiles");
+    const vm = eventTileViewModel.getThreadSummaryViewModel({
+        cli,
+        mxEvent,
+        thread,
+        narrow,
+        isCard,
+        room,
+        timelineRenderingType,
+        lowBandwidth,
+        useOnlyCurrentProfiles,
+        avatarClassName: "mx_BaseAvatar",
+    });
+
+    useEffect(() => {
+        // This child VM owns Matrix listeners, so release it when the view using it leaves the tree.
+        return () => eventTileViewModel.releaseThreadSummaryViewModel();
+    }, [eventTileViewModel]);
+
+    useEffect(() => {
+        vm.setClient(cli);
+        vm.setRootEvent(mxEvent);
+        vm.setThread(thread);
+        vm.setNarrow(narrow);
+        vm.setIsCard(isCard);
+        vm.setRoom(room);
+        vm.setTimelineRenderingType(timelineRenderingType);
+        vm.setLowBandwidth(lowBandwidth);
+        vm.setUseOnlyCurrentProfiles(useOnlyCurrentProfiles);
+    }, [vm, cli, mxEvent, thread, narrow, isCard, room, timelineRenderingType, lowBandwidth, useOnlyCurrentProfiles]);
+
+    return <ThreadSummaryView {...props} vm={vm} className={classNames("mx_ThreadSummary", className)} />;
+}
diff --git a/apps/web/src/components/views/rooms/ExtraTile.tsx b/apps/web/src/components/views/rooms/ExtraTile.tsx
deleted file mode 100644
index 05bbb31223..0000000000
--- a/apps/web/src/components/views/rooms/ExtraTile.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020-2023 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { type JSX } from "react";
-import classNames from "classnames";
-
-import { RovingAccessibleButton } from "../../../accessibility/RovingTabIndex";
-import NotificationBadge from "./NotificationBadge";
-import { type NotificationState } from "../../../stores/notifications/NotificationState";
-import { type ButtonEvent } from "../elements/AccessibleButton";
-import useHover from "../../../hooks/useHover";
-
-interface ExtraTileProps {
-    isMinimized: boolean;
-    isSelected: boolean;
-    displayName: string;
-    avatar: React.ReactElement;
-    notificationState?: NotificationState;
-    onClick: (ev: ButtonEvent) => void;
-}
-
-export default function ExtraTile({
-    isSelected,
-    isMinimized,
-    notificationState,
-    displayName,
-    onClick,
-    avatar,
-}: ExtraTileProps): JSX.Element {
-    const [, { onMouseOver, onMouseLeave }] = useHover(() => false);
-
-    // XXX: We copy classes because it's easier
-    const classes = classNames({
-        mx_ExtraTile: true,
-        mx_RoomTile: true,
-        mx_RoomTile_selected: isSelected,
-        mx_RoomTile_minimized: isMinimized,
-    });
-
-    let badge: JSX.Element | null = null;
-    if (notificationState) {
-        badge = <NotificationBadge notification={notificationState} />;
-    }
-
-    let name = displayName;
-    if (typeof name !== "string") name = "";
-    name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
-
-    const nameClasses = classNames({
-        mx_RoomTile_title: true,
-        mx_RoomTile_titleHasUnreadEvents: notificationState?.isUnread,
-    });
-
-    let nameContainer: JSX.Element | null = (
-        <div className="mx_RoomTile_titleContainer">
-            <div title={name} className={nameClasses} tabIndex={-1} dir="auto">
-                {name}
-            </div>
-        </div>
-    );
-    if (isMinimized) nameContainer = null;
-
-    return (
-        <RovingAccessibleButton
-            className={classes}
-            onMouseEnter={onMouseOver}
-            onMouseLeave={onMouseLeave}
-            onClick={onClick}
-            role="treeitem"
-            title={name}
-            disableTooltip={!isMinimized}
-        >
-            <div className="mx_RoomTile_avatarContainer">{avatar}</div>
-            <div className="mx_RoomTile_details">
-                <div className="mx_RoomTile_primaryDetails">
-                    {nameContainer}
-                    <div className="mx_RoomTile_badgeContainer">{badge}</div>
-                </div>
-            </div>
-        </RovingAccessibleButton>
-    );
-}
diff --git a/apps/web/src/components/views/rooms/LegacyRoomList.tsx b/apps/web/src/components/views/rooms/LegacyRoomList.tsx
deleted file mode 100644
index 9b156f8cb9..0000000000
--- a/apps/web/src/components/views/rooms/LegacyRoomList.tsx
+++ /dev/null
@@ -1,706 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2015-2018 , 2020, 2021 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { EventType, type Room, RoomType } from "matrix-js-sdk/src/matrix";
-import React, { type JSX, type ComponentType, createRef, type ReactComponentElement, type SyntheticEvent } from "react";
-import {
-    PlusIcon,
-    UserAddSolidIcon,
-    RoomIcon,
-    SearchIcon,
-    ShareIcon,
-    VideoCallSolidIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
-
-import { type IState as IRovingTabIndexState, RovingTabIndexProvider } from "../../../accessibility/RovingTabIndex.tsx";
-import MatrixClientContext from "../../../contexts/MatrixClientContext.tsx";
-import { shouldShowComponent } from "../../../customisations/helpers/UIComponents.ts";
-import { Action } from "../../../dispatcher/actions.ts";
-import defaultDispatcher from "../../../dispatcher/dispatcher.ts";
-import { type ActionPayload } from "../../../dispatcher/payloads.ts";
-import { type ViewRoomDeltaPayload } from "../../../dispatcher/payloads/ViewRoomDeltaPayload.ts";
-import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload.ts";
-import { useEventEmitterState } from "../../../hooks/useEventEmitter.ts";
-import { _t, _td } from "../../../languageHandler.tsx";
-import { MatrixClientPeg } from "../../../MatrixClientPeg.ts";
-import PosthogTrackers from "../../../PosthogTrackers.ts";
-import SettingsStore from "../../../settings/SettingsStore.ts";
-import { useFeatureEnabled } from "../../../hooks/useSettings.ts";
-import { UIComponent } from "../../../settings/UIFeature.ts";
-import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore.ts";
-import { type ITagMap } from "../../../stores/room-list/algorithms/models.ts";
-import { DefaultTagID, type TagID } from "../../../stores/room-list-v3/skip-list/tag";
-import { UPDATE_EVENT } from "../../../stores/AsyncStore.ts";
-import RoomListStore, { LISTS_UPDATE_EVENT } from "../../../stores/room-list/RoomListStore.ts";
-import {
-    isMetaSpace,
-    type ISuggestedRoom,
-    MetaSpace,
-    type SpaceKey,
-    UPDATE_SELECTED_SPACE,
-    UPDATE_SUGGESTED_ROOMS,
-} from "../../../stores/spaces/index.ts";
-import SpaceStore from "../../../stores/spaces/SpaceStore.ts";
-import { arrayFastClone, arrayHasDiff } from "../../../utils/arrays.ts";
-import { objectShallowClone, objectWithOnly } from "../../../utils/objects.ts";
-import type ResizeNotifier from "../../../utils/ResizeNotifier.ts";
-import {
-    shouldShowSpaceInvite,
-    showAddExistingRooms,
-    showCreateNewRoom,
-    showSpaceInvite,
-} from "../../../utils/space.tsx";
-import {
-    ChevronFace,
-    ContextMenuTooltipButton,
-    type MenuProps,
-    useContextMenu,
-} from "../../structures/ContextMenu.tsx";
-import RoomAvatar from "../avatars/RoomAvatar.tsx";
-import { BetaPill } from "../beta/BetaCard.tsx";
-import IconizedContextMenu, {
-    IconizedContextMenuOption,
-    IconizedContextMenuOptionList,
-} from "../context_menus/IconizedContextMenu.tsx";
-import ExtraTile from "./ExtraTile.tsx";
-import RoomSublist, { type IAuxButtonProps } from "./RoomSublist.tsx";
-import { SdkContextClass } from "../../../contexts/SDKContext.ts";
-import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts.ts";
-import { getKeyBindingsManager } from "../../../KeyBindingsManager.ts";
-import AccessibleButton from "../elements/AccessibleButton.tsx";
-import { Landmark, LandmarkNavigation } from "../../../accessibility/LandmarkNavigation.ts";
-import LegacyCallHandler, { LegacyCallHandlerEvent } from "../../../LegacyCallHandler.tsx";
-
-interface IProps {
-    onKeyDown: (ev: React.KeyboardEvent, state: IRovingTabIndexState) => void;
-    onFocus: (ev: React.FocusEvent) => void;
-    onBlur: (ev: React.FocusEvent) => void;
-    onResize: () => void;
-    onListCollapse?: (isExpanded: boolean) => void;
-    resizeNotifier: ResizeNotifier;
-    isMinimized: boolean;
-    activeSpace: SpaceKey;
-}
-
-interface IState {
-    sublists: ITagMap;
-    currentRoomId?: string;
-    suggestedRooms: ISuggestedRoom[];
-}
-
-export const TAG_ORDER: TagID[] = [
-    DefaultTagID.Invite,
-    DefaultTagID.Favourite,
-    DefaultTagID.DM,
-    DefaultTagID.Untagged,
-    DefaultTagID.Conference,
-    DefaultTagID.LowPriority,
-    DefaultTagID.ServerNotice,
-    DefaultTagID.Suggested,
-    // DefaultTagID.Archived isn't here any more: we don't show it at all.
-    // The section still exists in the code as a place for rooms that we know
-    // about but aren't joined. At some point it could be removed entirely
-    // but we'd have to make sure that rooms you weren't in were hidden.
-];
-const ALWAYS_VISIBLE_TAGS: TagID[] = [DefaultTagID.DM, DefaultTagID.Untagged];
-
-interface ITagAesthetics {
-    sectionLabel: TranslationKey;
-    sectionLabelRaw?: string;
-    AuxButtonComponent?: ComponentType<IAuxButtonProps>;
-    isInvite: boolean;
-    defaultHidden: boolean;
-}
-
-type TagAestheticsMap = Partial<{
-    [tagId in TagID]: ITagAesthetics;
-}>;
-
-const auxButtonContextMenuPosition = (handle: HTMLDivElement): MenuProps => {
-    const rect = handle.getBoundingClientRect();
-    return {
-        chevronFace: ChevronFace.None,
-        left: rect.left - 7,
-        top: rect.top + rect.height,
-    };
-};
-
-const DmAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex, dispatcher = defaultDispatcher }) => {
-    const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu<HTMLDivElement>();
-    const activeSpace = useEventEmitterState(SpaceStore.instance, UPDATE_SELECTED_SPACE, () => {
-        return SpaceStore.instance.activeSpaceRoom;
-    });
-
-    const showCreateRooms = shouldShowComponent(UIComponent.CreateRooms);
-    const showInviteUsers = shouldShowComponent(UIComponent.InviteUsers);
-
-    if (activeSpace && (showCreateRooms || showInviteUsers)) {
-        let contextMenu: JSX.Element | undefined;
-        if (menuDisplayed && handle.current) {
-            const canInvite = shouldShowSpaceInvite(activeSpace);
-
-            contextMenu = (
-                <IconizedContextMenu {...auxButtonContextMenuPosition(handle.current)} onFinished={closeMenu} compact>
-                    <IconizedContextMenuOptionList first>
-                        {showCreateRooms && (
-                            <IconizedContextMenuOption
-                                label={_t("action|start_new_chat")}
-                                icon={<UserAddSolidIcon />}
-                                onClick={(e) => {
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                    closeMenu();
-                                    defaultDispatcher.dispatch({ action: Action.CreateChat });
-                                    PosthogTrackers.trackInteraction(
-                                        "WebRoomListRoomsSublistPlusMenuCreateChatItem",
-                                        e,
-                                    );
-                                }}
-                            />
-                        )}
-                        {showInviteUsers && (
-                            <IconizedContextMenuOption
-                                label={_t("action|invite_to_space")}
-                                icon={<ShareIcon />}
-                                onClick={(e) => {
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                    closeMenu();
-                                    showSpaceInvite(activeSpace);
-                                }}
-                                disabled={!canInvite}
-                                title={canInvite ? undefined : _t("spaces|error_no_permission_invite")}
-                            />
-                        )}
-                    </IconizedContextMenuOptionList>
-                </IconizedContextMenu>
-            );
-        }
-
-        return (
-            <>
-                <ContextMenuTooltipButton
-                    tabIndex={tabIndex}
-                    onClick={openMenu}
-                    className="mx_RoomSublist_auxButton"
-                    aria-label={_t("action|add_people")}
-                    title={_t("action|add_people")}
-                    isExpanded={menuDisplayed}
-                    ref={handle}
-                >
-                    <PlusIcon />
-                </ContextMenuTooltipButton>
-
-                {contextMenu}
-            </>
-        );
-    } else if (!activeSpace && showCreateRooms) {
-        return (
-            <AccessibleButton
-                tabIndex={tabIndex}
-                onClick={(e) => {
-                    dispatcher.dispatch({ action: Action.CreateChat });
-                    PosthogTrackers.trackInteraction("WebRoomListRoomsSublistPlusMenuCreateChatItem", e);
-                }}
-                className="mx_RoomSublist_auxButton"
-                aria-label={_t("action|start_chat")}
-                title={_t("action|start_chat")}
-            >
-                <PlusIcon />
-            </AccessibleButton>
-        );
-    }
-
-    return null;
-};
-
-const UntaggedAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex }) => {
-    const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu<HTMLDivElement>();
-    const activeSpace = useEventEmitterState<Room | null>(SpaceStore.instance, UPDATE_SELECTED_SPACE, () => {
-        return SpaceStore.instance.activeSpaceRoom;
-    });
-
-    const showCreateRoom = shouldShowComponent(UIComponent.CreateRooms);
-    const showExploreRooms = shouldShowComponent(UIComponent.ExploreRooms);
-
-    const videoRoomsEnabled = useFeatureEnabled("feature_video_rooms");
-    const elementCallVideoRoomsEnabled = useFeatureEnabled("feature_element_call_video_rooms");
-
-    let contextMenuContent: JSX.Element | undefined;
-    if (menuDisplayed && activeSpace) {
-        const canAddRooms = activeSpace.currentState.maySendStateEvent(
-            EventType.SpaceChild,
-            MatrixClientPeg.safeGet().getSafeUserId(),
-        );
-
-        contextMenuContent = (
-            <IconizedContextMenuOptionList first>
-                <IconizedContextMenuOption
-                    label={_t("action|explore_rooms")}
-                    icon={<SearchIcon />}
-                    onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        closeMenu();
-                        defaultDispatcher.dispatch<ViewRoomPayload>({
-                            action: Action.ViewRoom,
-                            room_id: activeSpace.roomId,
-                            metricsTrigger: undefined, // other
-                        });
-                        PosthogTrackers.trackInteraction("WebRoomListRoomsSublistPlusMenuExploreRoomsItem", e);
-                    }}
-                />
-                {showCreateRoom ? (
-                    <>
-                        <IconizedContextMenuOption
-                            label={_t("action|new_room")}
-                            icon={<PlusIcon />}
-                            onClick={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                closeMenu();
-                                showCreateNewRoom(activeSpace);
-                                PosthogTrackers.trackInteraction("WebRoomListRoomsSublistPlusMenuCreateRoomItem", e);
-                            }}
-                            disabled={!canAddRooms}
-                            title={canAddRooms ? undefined : _t("spaces|error_no_permission_create_room")}
-                        />
-                        {videoRoomsEnabled && (
-                            <IconizedContextMenuOption
-                                label={_t("action|new_video_room")}
-                                icon={<VideoCallSolidIcon />}
-                                onClick={(e) => {
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                    closeMenu();
-                                    showCreateNewRoom(
-                                        activeSpace,
-                                        elementCallVideoRoomsEnabled ? RoomType.UnstableCall : RoomType.ElementVideo,
-                                    );
-                                }}
-                                disabled={!canAddRooms}
-                                title={canAddRooms ? undefined : _t("spaces|error_no_permission_create_room")}
-                            >
-                                <BetaPill />
-                            </IconizedContextMenuOption>
-                        )}
-                        <IconizedContextMenuOption
-                            label={_t("action|add_existing_room")}
-                            icon={<RoomIcon />}
-                            onClick={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                closeMenu();
-                                showAddExistingRooms(activeSpace);
-                            }}
-                            disabled={!canAddRooms}
-                            title={canAddRooms ? undefined : _t("spaces|error_no_permission_add_room")}
-                        />
-                    </>
-                ) : null}
-            </IconizedContextMenuOptionList>
-        );
-    } else if (menuDisplayed) {
-        contextMenuContent = (
-            <IconizedContextMenuOptionList first>
-                {showCreateRoom && (
-                    <>
-                        <IconizedContextMenuOption
-                            label={_t("action|new_room")}
-                            icon={<PlusIcon />}
-                            onClick={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                closeMenu();
-                                defaultDispatcher.dispatch({ action: Action.CreateRoom });
-                                PosthogTrackers.trackInteraction("WebRoomListRoomsSublistPlusMenuCreateRoomItem", e);
-                            }}
-                        />
-                        {videoRoomsEnabled && (
-                            <IconizedContextMenuOption
-                                label={_t("action|new_video_room")}
-                                icon={<VideoCallSolidIcon />}
-                                onClick={(e) => {
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                    closeMenu();
-                                    defaultDispatcher.dispatch({
-                                        action: Action.CreateRoom,
-                                        type: elementCallVideoRoomsEnabled
-                                            ? RoomType.UnstableCall
-                                            : RoomType.ElementVideo,
-                                    });
-                                }}
-                            >
-                                <BetaPill />
-                            </IconizedContextMenuOption>
-                        )}
-                    </>
-                )}
-                {showExploreRooms ? (
-                    <IconizedContextMenuOption
-                        label={_t("action|explore_public_rooms")}
-                        icon={<SearchIcon />}
-                        onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            closeMenu();
-                            PosthogTrackers.trackInteraction("WebRoomListRoomsSublistPlusMenuExploreRoomsItem", e);
-                            defaultDispatcher.fire(Action.ViewRoomDirectory);
-                        }}
-                    />
-                ) : null}
-            </IconizedContextMenuOptionList>
-        );
-    }
-
-    let contextMenu: JSX.Element | null = null;
-    if (menuDisplayed && handle.current) {
-        contextMenu = (
-            <IconizedContextMenu {...auxButtonContextMenuPosition(handle.current)} onFinished={closeMenu} compact>
-                {contextMenuContent}
-            </IconizedContextMenu>
-        );
-    }
-
-    if (showCreateRoom || showExploreRooms) {
-        return (
-            <>
-                <ContextMenuTooltipButton
-                    tabIndex={tabIndex}
-                    onClick={openMenu}
-                    className="mx_RoomSublist_auxButton"
-                    aria-label={_t("room_list|add_room_label")}
-                    title={_t("room_list|add_room_label")}
-                    isExpanded={menuDisplayed}
-                    ref={handle}
-                >
-                    <PlusIcon />
-                </ContextMenuTooltipButton>
-
-                {contextMenu}
-            </>
-        );
-    }
-
-    return null;
-};
-
-const TAG_AESTHETICS: TagAestheticsMap = {
-    [DefaultTagID.Invite]: {
-        sectionLabel: _td("action|invites_list"),
-        isInvite: true,
-        defaultHidden: false,
-    },
-    [DefaultTagID.Favourite]: {
-        sectionLabel: _td("common|favourites"),
-        isInvite: false,
-        defaultHidden: false,
-    },
-    [DefaultTagID.DM]: {
-        sectionLabel: _td("common|people"),
-        isInvite: false,
-        defaultHidden: false,
-        AuxButtonComponent: DmAuxButton,
-    },
-    [DefaultTagID.Conference]: {
-        sectionLabel: _td("voip|metaspace_video_rooms|conference_room_section"),
-        isInvite: false,
-        defaultHidden: false,
-    },
-    [DefaultTagID.Untagged]: {
-        sectionLabel: _td("common|rooms"),
-        isInvite: false,
-        defaultHidden: false,
-        AuxButtonComponent: UntaggedAuxButton,
-    },
-    [DefaultTagID.LowPriority]: {
-        sectionLabel: _td("common|low_priority"),
-        isInvite: false,
-        defaultHidden: false,
-    },
-    [DefaultTagID.ServerNotice]: {
-        sectionLabel: _td("common|system_alerts"),
-        isInvite: false,
-        defaultHidden: false,
-    },
-
-    // TODO: Replace with archived view: https://github.com/vector-im/element-web/issues/14038
-    [DefaultTagID.Archived]: {
-        sectionLabel: _td("common|historical"),
-        isInvite: false,
-        defaultHidden: true,
-    },
-
-    [DefaultTagID.Suggested]: {
-        sectionLabel: _td("room_list|suggested_rooms_heading"),
-        isInvite: false,
-        defaultHidden: false,
-    },
-};
-
-export default class LegacyRoomList extends React.PureComponent<IProps, IState> {
-    private dispatcherRef?: string;
-    private treeRef = createRef<HTMLDivElement>();
-
-    public static contextType = MatrixClientContext;
-    declare public context: React.ContextType<typeof MatrixClientContext>;
-
-    public constructor(props: IProps) {
-        super(props);
-
-        this.state = {
-            sublists: {},
-            suggestedRooms: SpaceStore.instance.suggestedRooms,
-        };
-    }
-
-    public componentDidMount(): void {
-        this.dispatcherRef = defaultDispatcher.register(this.onAction);
-        SdkContextClass.instance.roomViewStore.on(UPDATE_EVENT, this.onRoomViewStoreUpdate);
-        SpaceStore.instance.on(UPDATE_SUGGESTED_ROOMS, this.updateSuggestedRooms);
-        RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.updateLists);
-        LegacyCallHandler.instance.on(LegacyCallHandlerEvent.ProtocolSupport, this.updateProtocolSupport);
-        this.updateLists(); // trigger the first update
-    }
-
-    public componentWillUnmount(): void {
-        SpaceStore.instance.off(UPDATE_SUGGESTED_ROOMS, this.updateSuggestedRooms);
-        RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.updateLists);
-        defaultDispatcher.unregister(this.dispatcherRef);
-        SdkContextClass.instance.roomViewStore.off(UPDATE_EVENT, this.onRoomViewStoreUpdate);
-        LegacyCallHandler.instance.off(LegacyCallHandlerEvent.ProtocolSupport, this.updateProtocolSupport);
-    }
-
-    private updateProtocolSupport = (): void => {
-        this.updateLists();
-    };
-
-    private onRoomViewStoreUpdate = (): void => {
-        this.setState({
-            currentRoomId: SdkContextClass.instance.roomViewStore.getRoomId() ?? undefined,
-        });
-    };
-
-    private onAction = (payload: ActionPayload): void => {
-        if (payload.action === Action.ViewRoomDelta) {
-            const viewRoomDeltaPayload = payload as ViewRoomDeltaPayload;
-            const currentRoomId = SdkContextClass.instance.roomViewStore.getRoomId();
-            if (!currentRoomId) return;
-            const room = this.getRoomDelta(currentRoomId, viewRoomDeltaPayload.delta, viewRoomDeltaPayload.unread);
-            if (room) {
-                defaultDispatcher.dispatch<ViewRoomPayload>({
-                    action: Action.ViewRoom,
-                    room_id: room.roomId,
-                    show_room_tile: true, // to make sure the room gets scrolled into view
-                    metricsTrigger: "WebKeyboardShortcut",
-                    metricsViaKeyboard: true,
-                });
-            }
-        }
-    };
-
-    private getRoomDelta = (roomId: string, delta: number, unread = false): Room => {
-        const lists = RoomListStore.instance.orderedLists;
-        const rooms: Room[] = [];
-        TAG_ORDER.forEach((t) => {
-            let listRooms = lists[t];
-
-            if (unread) {
-                // filter to only notification rooms (and our current active room so we can index properly)
-                listRooms = listRooms.filter((r) => {
-                    const state = RoomNotificationStateStore.instance.getRoomState(r);
-                    return state.room.roomId === roomId || state.isUnread;
-                });
-            }
-
-            rooms.push(...listRooms);
-        });
-
-        const currentIndex = rooms.findIndex((r) => r.roomId === roomId);
-        // use slice to account for looping around the start
-        const [room] = rooms.slice((currentIndex + delta) % rooms.length);
-        return room;
-    };
-
-    private updateSuggestedRooms = (suggestedRooms: ISuggestedRoom[]): void => {
-        this.setState({ suggestedRooms });
-    };
-
-    private updateLists = (): void => {
-        const newLists = RoomListStore.instance.orderedLists;
-        const previousListIds = Object.keys(this.state.sublists);
-        const newListIds = Object.keys(newLists);
-
-        let doUpdate = arrayHasDiff(previousListIds, newListIds);
-        if (!doUpdate) {
-            // so we didn't have the visible sublists change, but did the contents of those
-            // sublists change significantly enough to break the sticky headers? Probably, so
-            // let's check the length of each.
-            for (const tagId of newListIds) {
-                const oldRooms = this.state.sublists[tagId];
-                const newRooms = newLists[tagId];
-                if (oldRooms.length !== newRooms.length) {
-                    doUpdate = true;
-                    break;
-                }
-            }
-        }
-
-        if (doUpdate) {
-            // We have to break our reference to the room list store if we want to be able to
-            // diff the object for changes, so do that.
-            // @ts-ignore - ITagMap is ts-ignored so this will have to be too
-            const newSublists = objectWithOnly(newLists, newListIds);
-            const sublists = objectShallowClone(newSublists, (k, v) => arrayFastClone(v));
-
-            this.setState({ sublists }, () => {
-                this.props.onResize();
-            });
-        }
-    };
-
-    private renderSuggestedRooms(): ReactComponentElement<typeof ExtraTile>[] {
-        return this.state.suggestedRooms.map((room) => {
-            const name = room.name || room.canonical_alias || room.aliases?.[0] || _t("empty_room");
-            const avatar = (
-                <RoomAvatar
-                    oobData={{
-                        name,
-                        avatarUrl: room.avatar_url,
-                    }}
-                    size="32px"
-                />
-            );
-            const viewRoom = (ev: SyntheticEvent): void => {
-                defaultDispatcher.dispatch<ViewRoomPayload>({
-                    action: Action.ViewRoom,
-                    room_alias: room.canonical_alias || room.aliases?.[0],
-                    room_id: room.room_id,
-                    via_servers: room.viaServers,
-                    oob_data: {
-                        avatarUrl: room.avatar_url,
-                        name,
-                    },
-                    metricsTrigger: "RoomList",
-                    metricsViaKeyboard: ev.type !== "click",
-                });
-            };
-            return (
-                <ExtraTile
-                    isMinimized={this.props.isMinimized}
-                    isSelected={this.state.currentRoomId === room.room_id}
-                    displayName={name}
-                    avatar={avatar}
-                    onClick={viewRoom}
-                    key={`suggestedRoomTile_${room.room_id}`}
-                />
-            );
-        });
-    }
-
-    private renderSublists(): React.ReactElement[] {
-        // show a skeleton UI if the user is in no rooms and they are not filtering and have no suggested rooms
-        const showSkeleton =
-            !this.state.suggestedRooms?.length &&
-            Object.values(RoomListStore.instance.orderedLists).every((list) => !list?.length);
-
-        return TAG_ORDER.map((orderedTagId) => {
-            let extraTiles: ReactComponentElement<typeof ExtraTile>[] | undefined;
-            if (orderedTagId === DefaultTagID.Suggested) {
-                extraTiles = this.renderSuggestedRooms();
-            }
-
-            const aesthetics = TAG_AESTHETICS[orderedTagId];
-            if (!aesthetics) throw new Error(`Tag ${orderedTagId} does not have aesthetics`);
-
-            let alwaysVisible = ALWAYS_VISIBLE_TAGS.includes(orderedTagId);
-            if (
-                (this.props.activeSpace === MetaSpace.Favourites && orderedTagId !== DefaultTagID.Favourite) ||
-                (this.props.activeSpace === MetaSpace.People && orderedTagId !== DefaultTagID.DM) ||
-                (this.props.activeSpace === MetaSpace.Orphans && orderedTagId === DefaultTagID.DM) ||
-                (this.props.activeSpace === MetaSpace.VideoRooms && orderedTagId === DefaultTagID.DM) ||
-                (!isMetaSpace(this.props.activeSpace) &&
-                    orderedTagId === DefaultTagID.DM &&
-                    !SettingsStore.getValue("Spaces.showPeopleInSpace", this.props.activeSpace))
-            ) {
-                alwaysVisible = false;
-            }
-
-            let forceExpanded = false;
-            if (
-                (this.props.activeSpace === MetaSpace.Favourites && orderedTagId === DefaultTagID.Favourite) ||
-                (this.props.activeSpace === MetaSpace.People && orderedTagId === DefaultTagID.DM)
-            ) {
-                forceExpanded = true;
-            }
-            // The cost of mounting/unmounting this component offsets the cost
-            // of keeping it in the DOM and hiding it when it is not required
-            return (
-                <RoomSublist
-                    key={`sublist-${orderedTagId}`}
-                    tagId={orderedTagId}
-                    forRooms={true}
-                    startAsHidden={aesthetics.defaultHidden}
-                    label={aesthetics.sectionLabelRaw ? aesthetics.sectionLabelRaw : _t(aesthetics.sectionLabel)}
-                    AuxButtonComponent={aesthetics.AuxButtonComponent}
-                    isMinimized={this.props.isMinimized}
-                    showSkeleton={showSkeleton}
-                    extraTiles={extraTiles}
-                    resizeNotifier={this.props.resizeNotifier}
-                    alwaysVisible={alwaysVisible}
-                    onListCollapse={this.props.onListCollapse}
-                    forceExpanded={forceExpanded}
-                />
-            );
-        });
-    }
-
-    public focus(): void {
-        // focus the first focusable element in this aria treeview widget
-        const treeItems = this.treeRef.current?.querySelectorAll<HTMLElement>('[role="treeitem"]');
-        if (!treeItems) return;
-        [...treeItems].find((e) => e.offsetParent !== null)?.focus();
-    }
-
-    public render(): React.ReactNode {
-        const sublists = this.renderSublists();
-        return (
-            <RovingTabIndexProvider handleHomeEnd handleUpDown onKeyDown={this.props.onKeyDown}>
-                {({ onKeyDownHandler }) => (
-                    <div
-                        onFocus={this.props.onFocus}
-                        onBlur={this.props.onBlur}
-                        onKeyDown={(ev) => {
-                            const navAction = getKeyBindingsManager().getNavigationAction(ev);
-                            if (
-                                navAction === KeyBindingAction.NextLandmark ||
-                                navAction === KeyBindingAction.PreviousLandmark
-                            ) {
-                                LandmarkNavigation.findAndFocusNextLandmark(
-                                    Landmark.ROOM_LIST,
-                                    navAction === KeyBindingAction.PreviousLandmark,
-                                );
-                                ev.stopPropagation();
-                                ev.preventDefault();
-                                return;
-                            }
-                            onKeyDownHandler(ev);
-                        }}
-                        className="mx_LegacyRoomList"
-                        role="tree"
-                        aria-label={_t("common|rooms")}
-                        ref={this.treeRef}
-                    >
-                        {sublists}
-                    </div>
-                )}
-            </RovingTabIndexProvider>
-        );
-    }
-}
diff --git a/apps/web/src/components/views/rooms/LegacyRoomListHeader.tsx b/apps/web/src/components/views/rooms/LegacyRoomListHeader.tsx
deleted file mode 100644
index 6c9c15a778..0000000000
--- a/apps/web/src/components/views/rooms/LegacyRoomListHeader.tsx
+++ /dev/null
@@ -1,441 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2021, 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { ClientEvent, EventType, type Room, RoomEvent, RoomType } from "matrix-js-sdk/src/matrix";
-import React, { type JSX, useContext, useEffect, useState } from "react";
-import { Tooltip } from "@vector-im/compound-web";
-import {
-    PlusIcon,
-    UserAddSolidIcon,
-    SearchIcon,
-    UserAddIcon,
-    VideoCallSolidIcon,
-    ChevronDownIcon,
-    ChevronUpIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
-
-import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
-import { Action } from "../../../dispatcher/actions";
-import defaultDispatcher from "../../../dispatcher/dispatcher";
-import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
-import { useDispatcher } from "../../../hooks/useDispatcher";
-import { useEventEmitterState, useTypedEventEmitter, useTypedEventEmitterState } from "../../../hooks/useEventEmitter";
-import { useFeatureEnabled } from "../../../hooks/useSettings";
-import { _t } from "../../../languageHandler";
-import PosthogTrackers from "../../../PosthogTrackers";
-import { UIComponent } from "../../../settings/UIFeature";
-import {
-    getMetaSpaceName,
-    MetaSpace,
-    type SpaceKey,
-    UPDATE_HOME_BEHAVIOUR,
-    UPDATE_SELECTED_SPACE,
-} from "../../../stores/spaces";
-import SpaceStore from "../../../stores/spaces/SpaceStore";
-import {
-    shouldShowSpaceInvite,
-    showAddExistingRooms,
-    showCreateNewRoom,
-    showCreateNewSubspace,
-    showSpaceInvite,
-} from "../../../utils/space";
-import {
-    ChevronFace,
-    ContextMenuButton,
-    ContextMenuTooltipButton,
-    type MenuProps,
-    useContextMenu,
-} from "../../structures/ContextMenu";
-import { BetaPill } from "../beta/BetaCard";
-import IconizedContextMenu, {
-    IconizedContextMenuOption,
-    IconizedContextMenuOptionList,
-} from "../context_menus/IconizedContextMenu";
-import SpaceContextMenu from "../context_menus/SpaceContextMenu";
-import InlineSpinner from "../elements/InlineSpinner";
-import { HomeButtonContextMenu } from "../spaces/SpacePanel";
-
-const contextMenuBelow = (elementRect: DOMRect): MenuProps => {
-    // align the context menu's icons with the icon which opened the context menu
-    const left = elementRect.left + window.scrollX;
-    const top = elementRect.bottom + window.scrollY + 12;
-    const chevronFace = ChevronFace.None;
-    return { left, top, chevronFace };
-};
-
-// Long-running actions that should trigger a spinner
-enum PendingActionType {
-    JoinRoom,
-    BulkRedact,
-}
-
-const usePendingActions = (): Map<PendingActionType, Set<string>> => {
-    const cli = useContext(MatrixClientContext);
-    const [actions, setActions] = useState(new Map<PendingActionType, Set<string>>());
-
-    const addAction = (type: PendingActionType, key: string): void => {
-        const keys = new Set(actions.get(type));
-        keys.add(key);
-        setActions(new Map(actions).set(type, keys));
-    };
-    const removeAction = (type: PendingActionType, key: string): void => {
-        const keys = new Set(actions.get(type));
-        if (keys.delete(key)) {
-            setActions(new Map(actions).set(type, keys));
-        }
-    };
-
-    useDispatcher(defaultDispatcher, (payload) => {
-        switch (payload.action) {
-            case Action.JoinRoom:
-                addAction(PendingActionType.JoinRoom, payload.roomId);
-                break;
-            case Action.JoinRoomReady:
-            case Action.JoinRoomError:
-                removeAction(PendingActionType.JoinRoom, payload.roomId);
-                break;
-            case Action.BulkRedactStart:
-                addAction(PendingActionType.BulkRedact, payload.roomId);
-                break;
-            case Action.BulkRedactEnd:
-                removeAction(PendingActionType.BulkRedact, payload.roomId);
-                break;
-        }
-    });
-    useTypedEventEmitter(cli, ClientEvent.Room, (room: Room) => removeAction(PendingActionType.JoinRoom, room.roomId));
-
-    return actions;
-};
-
-interface IProps {
-    onVisibilityChange?(this: void): void;
-}
-
-const LegacyRoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
-    const cli = useContext(MatrixClientContext);
-    const [mainMenuDisplayed, mainMenuHandle, openMainMenu, closeMainMenu] = useContextMenu<HTMLDivElement>();
-    const [plusMenuDisplayed, plusMenuHandle, openPlusMenu, closePlusMenu] = useContextMenu<HTMLDivElement>();
-    const [spaceKey, activeSpace] = useEventEmitterState<[SpaceKey, Room | null]>(
-        SpaceStore.instance,
-        UPDATE_SELECTED_SPACE,
-        () => [SpaceStore.instance.activeSpace, SpaceStore.instance.activeSpaceRoom],
-    );
-    const allRoomsInHome = useEventEmitterState(SpaceStore.instance, UPDATE_HOME_BEHAVIOUR, () => {
-        return SpaceStore.instance.allRoomsInHome;
-    });
-    const videoRoomsEnabled = useFeatureEnabled("feature_video_rooms");
-    const elementCallVideoRoomsEnabled = useFeatureEnabled("feature_element_call_video_rooms");
-    const pendingActions = usePendingActions();
-
-    const canShowMainMenu = !!activeSpace || spaceKey === MetaSpace.Home;
-
-    useEffect(() => {
-        if (mainMenuDisplayed && !canShowMainMenu) {
-            // Space changed under us and we no longer has a main menu to draw
-            closeMainMenu();
-        }
-    }, [closeMainMenu, canShowMainMenu, mainMenuDisplayed]);
-
-    const spaceName = useTypedEventEmitterState(activeSpace ?? undefined, RoomEvent.Name, () => activeSpace?.name);
-
-    useEffect(() => {
-        onVisibilityChange?.();
-    }, [onVisibilityChange]);
-
-    const canExploreRooms = shouldShowComponent(UIComponent.ExploreRooms);
-    const canCreateRooms = shouldShowComponent(UIComponent.CreateRooms);
-    const canCreateSpaces = shouldShowComponent(UIComponent.CreateSpaces);
-
-    const hasPermissionToAddSpaceChild = activeSpace?.currentState?.maySendStateEvent(
-        EventType.SpaceChild,
-        cli.getUserId()!,
-    );
-    const canAddSubRooms = hasPermissionToAddSpaceChild && canCreateRooms;
-    const canAddSubSpaces = hasPermissionToAddSpaceChild && canCreateSpaces;
-
-    // If the user can't do anything on the plus menu, don't show it. This aims to target the
-    // plus menu shown on the Home tab primarily: the user has options to use the menu for
-    // communities and spaces, but is at risk of no options on the Home tab.
-    const canShowPlusMenu = canCreateRooms || canExploreRooms || canCreateSpaces || activeSpace;
-
-    let contextMenu: JSX.Element | undefined;
-    if (mainMenuDisplayed && mainMenuHandle.current) {
-        let ContextMenuComponent;
-        if (activeSpace) {
-            ContextMenuComponent = SpaceContextMenu;
-        } else {
-            ContextMenuComponent = HomeButtonContextMenu;
-        }
-
-        contextMenu = (
-            <ContextMenuComponent
-                {...contextMenuBelow(mainMenuHandle.current.getBoundingClientRect())}
-                space={activeSpace!}
-                onFinished={closeMainMenu}
-                hideHeader={true}
-            />
-        );
-    } else if (plusMenuDisplayed && activeSpace) {
-        let inviteOption: JSX.Element | undefined;
-        if (shouldShowSpaceInvite(activeSpace)) {
-            inviteOption = (
-                <IconizedContextMenuOption
-                    label={_t("action|invite")}
-                    icon={<UserAddIcon />}
-                    onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        showSpaceInvite(activeSpace);
-                        closePlusMenu();
-                    }}
-                />
-            );
-        }
-
-        let newRoomOptions: JSX.Element | undefined;
-        if (activeSpace?.currentState.maySendStateEvent(EventType.RoomAvatar, cli.getUserId()!)) {
-            newRoomOptions = (
-                <>
-                    <IconizedContextMenuOption
-                        icon={<PlusIcon />}
-                        label={_t("action|new_room")}
-                        onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            showCreateNewRoom(activeSpace);
-                            PosthogTrackers.trackInteraction("WebRoomListHeaderPlusMenuCreateRoomItem", e);
-                            closePlusMenu();
-                        }}
-                    />
-                    {videoRoomsEnabled && (
-                        <IconizedContextMenuOption
-                            icon={<VideoCallSolidIcon />}
-                            label={_t("action|new_video_room")}
-                            onClick={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                showCreateNewRoom(
-                                    activeSpace,
-                                    elementCallVideoRoomsEnabled ? RoomType.UnstableCall : RoomType.ElementVideo,
-                                );
-                                closePlusMenu();
-                            }}
-                        >
-                            <BetaPill />
-                        </IconizedContextMenuOption>
-                    )}
-                </>
-            );
-        }
-
-        contextMenu = (
-            <IconizedContextMenu
-                {...contextMenuBelow(plusMenuHandle.current!.getBoundingClientRect())}
-                onFinished={closePlusMenu}
-                compact
-            >
-                <IconizedContextMenuOptionList first>
-                    {inviteOption}
-                    {newRoomOptions}
-                    <IconizedContextMenuOption
-                        label={_t("action|explore_rooms")}
-                        icon={<SearchIcon />}
-                        onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            defaultDispatcher.dispatch<ViewRoomPayload>({
-                                action: Action.ViewRoom,
-                                room_id: activeSpace.roomId,
-                                metricsTrigger: undefined, // other
-                            });
-                            closePlusMenu();
-                            PosthogTrackers.trackInteraction("WebRoomListHeaderPlusMenuExploreRoomsItem", e);
-                        }}
-                    />
-                    <IconizedContextMenuOption
-                        label={_t("action|add_existing_room")}
-                        icon={<PlusIcon />}
-                        onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            showAddExistingRooms(activeSpace);
-                            closePlusMenu();
-                        }}
-                        disabled={!canAddSubRooms}
-                        title={!canAddSubRooms ? _t("spaces|error_no_permission_add_room") : undefined}
-                    />
-                    {canCreateSpaces && (
-                        <IconizedContextMenuOption
-                            label={_t("room_list|add_space_label")}
-                            icon={<PlusIcon />}
-                            onClick={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                showCreateNewSubspace(activeSpace);
-                                closePlusMenu();
-                            }}
-                            disabled={!canAddSubSpaces}
-                            title={!canAddSubSpaces ? _t("spaces|error_no_permission_add_space") : undefined}
-                        >
-                            <BetaPill />
-                        </IconizedContextMenuOption>
-                    )}
-                </IconizedContextMenuOptionList>
-            </IconizedContextMenu>
-        );
-    } else if (plusMenuDisplayed) {
-        let newRoomOpts: JSX.Element | undefined;
-        let joinRoomOpt: JSX.Element | undefined;
-
-        if (canCreateRooms) {
-            newRoomOpts = (
-                <>
-                    <IconizedContextMenuOption
-                        label={_t("action|start_new_chat")}
-                        icon={<UserAddSolidIcon />}
-                        onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            defaultDispatcher.dispatch({ action: Action.CreateChat });
-                            PosthogTrackers.trackInteraction("WebRoomListHeaderPlusMenuCreateChatItem", e);
-                            closePlusMenu();
-                        }}
-                    />
-                    <IconizedContextMenuOption
-                        label={_t("action|new_room")}
-                        icon={<PlusIcon />}
-                        onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            defaultDispatcher.dispatch({ action: Action.CreateRoom });
-                            PosthogTrackers.trackInteraction("WebRoomListHeaderPlusMenuCreateRoomItem", e);
-                            closePlusMenu();
-                        }}
-                    />
-                    {videoRoomsEnabled && (
-                        <IconizedContextMenuOption
-                            label={_t("action|new_video_room")}
-                            icon={<VideoCallSolidIcon />}
-                            onClick={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                                defaultDispatcher.dispatch({
-                                    action: Action.CreateRoom,
-                                    type: elementCallVideoRoomsEnabled ? RoomType.UnstableCall : RoomType.ElementVideo,
-                                });
-                                closePlusMenu();
-                            }}
-                        >
-                            <BetaPill />
-                        </IconizedContextMenuOption>
-                    )}
-                </>
-            );
-        }
-        if (canExploreRooms) {
-            joinRoomOpt = (
-                <IconizedContextMenuOption
-                    label={_t("room_list|join_public_room_label")}
-                    icon={<SearchIcon />}
-                    onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        defaultDispatcher.dispatch({ action: Action.ViewRoomDirectory });
-                        PosthogTrackers.trackInteraction("WebRoomListHeaderPlusMenuExploreRoomsItem", e);
-                        closePlusMenu();
-                    }}
-                />
-            );
-        }
-
-        contextMenu = (
-            <IconizedContextMenu
-                {...contextMenuBelow(plusMenuHandle.current!.getBoundingClientRect())}
-                onFinished={closePlusMenu}
-                compact
-            >
-                <IconizedContextMenuOptionList first>
-                    {newRoomOpts}
-                    {joinRoomOpt}
-                </IconizedContextMenuOptionList>
-            </IconizedContextMenu>
-        );
-    }
-
-    let title: string;
-    if (activeSpace && spaceName) {
-        title = spaceName;
-    } else {
-        title = getMetaSpaceName(spaceKey as MetaSpace, allRoomsInHome);
-    }
-
-    const pendingActionSummary = [...pendingActions.entries()]
-        .filter(([type, keys]) => keys.size > 0)
-        .map(([type, keys]) => {
-            switch (type) {
-                case PendingActionType.JoinRoom:
-                    return _t("room_list|joining_rooms_status", { count: keys.size });
-                case PendingActionType.BulkRedact:
-                    return _t("room_list|redacting_messages_status", { count: keys.size });
-            }
-        })
-        .join("\n");
-
-    let contextMenuButton: JSX.Element = <div className="mx_LegacyRoomListHeader_contextLessTitle">{title}</div>;
-    if (canShowMainMenu) {
-        const commonProps = {
-            ref: mainMenuHandle,
-            onClick: openMainMenu,
-            isExpanded: mainMenuDisplayed,
-            className: "mx_LegacyRoomListHeader_contextMenuButton",
-            children: (
-                <>
-                    {title} {mainMenuDisplayed ? <ChevronUpIcon /> : <ChevronDownIcon />}
-                </>
-            ),
-        };
-
-        if (!!activeSpace) {
-            contextMenuButton = (
-                <ContextMenuButton
-                    {...commonProps}
-                    label={_t("room_list|space_menu_label", { spaceName: spaceName ?? activeSpace.name })}
-                />
-            );
-        } else {
-            contextMenuButton = <ContextMenuTooltipButton {...commonProps} title={_t("room_list|home_menu_label")} />;
-        }
-    }
-
-    return (
-        <aside className="mx_LegacyRoomListHeader" aria-label={_t("room|context_menu|title")}>
-            {contextMenuButton}
-            {pendingActionSummary ? (
-                <Tooltip label={pendingActionSummary} isTriggerInteractive={false}>
-                    <InlineSpinner />
-                </Tooltip>
-            ) : null}
-            {canShowPlusMenu && (
-                <ContextMenuTooltipButton
-                    ref={plusMenuHandle}
-                    onClick={openPlusMenu}
-                    isExpanded={plusMenuDisplayed}
-                    className="mx_LegacyRoomListHeader_plusButton"
-                    title={_t("action|add")}
-                >
-                    <PlusIcon />
-                </ContextMenuTooltipButton>
-            )}
-
-            {contextMenu}
-        </aside>
-    );
-};
-
-export default LegacyRoomListHeader;
diff --git a/apps/web/src/components/views/rooms/LiveContentSummary.tsx b/apps/web/src/components/views/rooms/LiveContentSummary.tsx
index 725830222d..2e5f7d1358 100644
--- a/apps/web/src/components/views/rooms/LiveContentSummary.tsx
+++ b/apps/web/src/components/views/rooms/LiveContentSummary.tsx
@@ -12,12 +12,7 @@ import { GroupIcon, VideoCallSolidIcon } from "@vector-im/compound-design-tokens
 
 import { _t } from "../../../languageHandler";
 
-export enum LiveContentType {
-    Video,
-}
-
 interface Props {
-    type: LiveContentType;
     text: string;
     active: boolean;
     participantCount: number;
diff --git a/apps/web/src/components/views/rooms/MemberList/MemberListView.tsx b/apps/web/src/components/views/rooms/MemberList/MemberListView.tsx
index 46a9cd1397..ae7c40d655 100644
--- a/apps/web/src/components/views/rooms/MemberList/MemberListView.tsx
+++ b/apps/web/src/components/views/rooms/MemberList/MemberListView.tsx
@@ -45,7 +45,7 @@ const MemberListView: React.FC<IProps> = (props: IProps) => {
         } else if (item.member) {
             return `member-${item.member.userId}`;
         } else {
-            return `threePidInvite-${item.threePidInvite.event.getContent().public_key}`;
+            return `threePidInvite-${item.threePidInvite.event.getStateKey()}`;
         }
     }, []);
 
diff --git a/apps/web/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx b/apps/web/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx
index a381305088..aab430a3ea 100644
--- a/apps/web/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx
+++ b/apps/web/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx
@@ -18,6 +18,7 @@ import { MemberTileView } from "./common/MemberTileView";
 import { InvitedIconView } from "./common/InvitedIconView";
 import { type MemberWithSeparator } from "../../../../viewmodels/memberlist/MemberListViewModel";
 import { DisambiguatedProfileViewModel } from "../../../../../viewmodels/room/timeline/event-tile/DisambiguatedProfileViewModel";
+import { useUserStatus } from "../../../../../hooks/useUserStatus";
 
 interface IProps {
     /**
@@ -47,17 +48,22 @@ export function RoomMemberTileView(props: IProps): JSX.Element {
         />
     );
     const name = vm.name;
+    const userStatus = useUserStatus(member.userId);
     const disambiguatedProfileVM = useCreateAutoDisposedViewModel(
         () =>
             new DisambiguatedProfileViewModel({
                 fallbackName: name,
                 member,
                 withTooltip: true,
+                userStatus,
             }),
     );
     useEffect(() => {
         disambiguatedProfileVM.setMember(name, member);
     }, [disambiguatedProfileVM, member, name]);
+    useEffect(() => {
+        disambiguatedProfileVM.setUserStatus(userStatus);
+    }, [disambiguatedProfileVM, userStatus]);
     const nameJSX = <DisambiguatedProfileView vm={disambiguatedProfileVM} className="mx_DisambiguatedProfile" />;
 
     const presenceState = member.presenceState;
diff --git a/apps/web/src/components/views/rooms/MemberList/tiles/common/MemberTileView.tsx b/apps/web/src/components/views/rooms/MemberList/tiles/common/MemberTileView.tsx
index cb0cec74d9..92aca2e220 100644
--- a/apps/web/src/components/views/rooms/MemberList/tiles/common/MemberTileView.tsx
+++ b/apps/web/src/components/views/rooms/MemberList/tiles/common/MemberTileView.tsx
@@ -46,12 +46,14 @@ export function MemberTileView(props: Props): JSX.Element {
                 aria-label={props?.ariaLabel}
                 tabIndex={props.tabIndex}
                 role="option"
+                aria-selected={props.tabIndex === 0}
                 aria-posinset={props.memberIndex + 1}
                 aria-setsize={props.memberCount}
             >
                 <div aria-hidden className="mx_MemberTileView_left">
                     <div className="mx_MemberTileView_avatar">
-                        {props.avatarJsx} {props.presenceJsx}
+                        {props.avatarJsx}
+                        <div className="mx_MemberTileView_presence">{props.presenceJsx}</div>
                     </div>
                     <div className="mx_MemberTileView_name">{props.nameJsx}</div>
                 </div>
diff --git a/apps/web/src/components/views/rooms/MemberList/tiles/common/PresenceIconView.tsx b/apps/web/src/components/views/rooms/MemberList/tiles/common/PresenceIconView.tsx
index ac31084adf..8b67418536 100644
--- a/apps/web/src/components/views/rooms/MemberList/tiles/common/PresenceIconView.tsx
+++ b/apps/web/src/components/views/rooms/MemberList/tiles/common/PresenceIconView.tsx
@@ -6,12 +6,15 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type JSX } from "react";
+import classNames from "classnames";
 import OnlineOrUnavailableIcon from "@vector-im/compound-design-tokens/assets/web/icons/presence-solid-8x8";
 import OfflineIcon from "@vector-im/compound-design-tokens/assets/web/icons/presence-outline-8x8";
 import DNDIcon from "@vector-im/compound-design-tokens/assets/web/icons/presence-strikethrough-8x8";
-import classNames from "classnames";
+import { Tooltip } from "@vector-im/compound-web";
 import { UnstableValue } from "matrix-js-sdk/src/NamespacedValue";
 
+import { _t } from "../../../../../../languageHandler";
+
 interface Props {
     className?: string;
     presenceState: string;
@@ -36,9 +39,30 @@ function getIconForPresenceState(state: string): JSX.Element {
     }
 }
 
+function getTooltipText(state: string): string {
+    switch (state) {
+        case "online":
+            return _t("presence|online");
+        case "offline":
+            return _t("presence|offline");
+        case "unavailable":
+        case "io.element.unreachable":
+            return _t("presence|away");
+        case BUSY_PRESENCE_NAME.name:
+        case BUSY_PRESENCE_NAME.altName:
+            return _t("presence|busy");
+        default:
+            throw new Error(`Presence state "${state}" is unknown.`);
+    }
+}
+
 const AvatarPresenceIconView: React.FC<Props> = ({ className, presenceState }) => {
     const names = classNames("mx_PresenceIconView", className);
-    return <div className={names}>{getIconForPresenceState(presenceState)}</div>;
+    return (
+        <Tooltip label={getTooltipText(presenceState)} placement="bottom" isTriggerInteractive={false}>
+            <div className={names}>{getIconForPresenceState(presenceState)}</div>
+        </Tooltip>
+    );
 };
 
 export default AvatarPresenceIconView;
diff --git a/apps/web/src/components/views/rooms/MessageComposer.tsx b/apps/web/src/components/views/rooms/MessageComposer.tsx
index 06c843f190..e9debaf223 100644
--- a/apps/web/src/components/views/rooms/MessageComposer.tsx
+++ b/apps/web/src/components/views/rooms/MessageComposer.tsx
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX, createRef, type ReactNode } from "react";
+import React, { type JSX, createRef, type ReactNode, useEffect } from "react";
 import classNames from "classnames";
 import {
     type IEventRelation,
@@ -19,6 +19,7 @@ import {
 import { Tooltip } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
 import { LockOffIcon, SendSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { useCreateAutoDisposedViewModel } from "@element-hq/web-shared-components";
 
 import { _t } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
@@ -50,10 +51,19 @@ import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPaylo
 import { isLocalRoom } from "../../../utils/localRoom/isLocalRoom";
 import { type VoiceMessageRecording } from "../../../audio/VoiceMessageRecording";
 import { SendWysiwygComposer, sendMessage, getConversionFunctions } from "./wysiwyg_composer/";
-import { type MatrixClientProps, withMatrixClientHOC } from "../../../contexts/MatrixClientContext";
+import {
+    type MatrixClientProps,
+    withMatrixClientHOC,
+    useMatrixClientContext,
+} from "../../../contexts/MatrixClientContext";
 import { UIFeature } from "../../../settings/UIFeature";
 import { formatTimeLeft } from "../../../DateUtils";
 import RoomReplacedSvg from "../../../../res/img/room_replaced.svg";
+import { MessageComposerUrlPreviewWrapper } from "./MessageComposerUrlPreview";
+import { MessageComposerUrlPreviewViewModel } from "../../../viewmodels/composer/MessageComposerUrlPreviewViewModel";
+import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext";
+import PlatformPeg from "../../../PlatformPeg";
+import { useSettingValue } from "../../../hooks/useSettings";
 
 // The prefix used when persisting editor drafts to localstorage.
 export const WYSIWYG_EDITOR_STATE_STORAGE_PREFIX = "mx_wysiwyg_state_";
@@ -86,6 +96,7 @@ interface IProps extends MatrixClientProps {
     relation?: IEventRelation;
     e2eStatus?: E2EStatus;
     compact?: boolean;
+    urlPreviewVm: MessageComposerUrlPreviewViewModel;
 }
 
 interface IState {
@@ -123,7 +134,6 @@ export class MessageComposer extends React.Component<IProps, IState> {
 
     public static defaultProps = {
         compact: false,
-        isRichTextEnabled: true,
     };
 
     public constructor(props: IProps) {
@@ -391,6 +401,11 @@ export class MessageComposer extends React.Component<IProps, IState> {
     };
 
     private sendMessage = async (): Promise<void> => {
+        // snapshot need to be captured before the composer is cleared
+        // otherwise the send message function will think there are no URLs in
+        // message and will not attach URL bundles
+        const urlPreviewSnapshot = this.props.urlPreviewVm.getSnapshot();
+        this.props.urlPreviewVm.updateWithText({ content: "", debounced: false });
         if (this.state.haveRecording && this.voiceRecordingButton.current) {
             // There shouldn't be any text message to send when a voice recording is active, so
             // just send out the voice recording.
@@ -398,7 +413,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
             return;
         }
 
-        this.messageComposerInput.current?.sendMessage();
+        this.messageComposerInput.current?.sendMessage({ urlPreviewSnapshot });
 
         if (this.state.isWysiwygLabEnabled) {
             const { relation, replyToEvent } = this.props;
@@ -413,17 +428,23 @@ export class MessageComposer extends React.Component<IProps, IState> {
                 roomContext: this.context,
                 relation,
                 replyToEvent,
+                urlPreviewSnapshot,
             });
         }
     };
 
     private onChange = (model: EditorModel): void => {
+        this.props.urlPreviewVm.updateWithText({
+            content: model.contentPlainText,
+            debounced: true,
+        });
         this.setState({
             isComposerEmpty: model.isEmpty,
         });
     };
 
     private onWysiwygChange = (content: string): void => {
+        this.props.urlPreviewVm.updateWithText({ content, debounced: true });
         this.setState({
             composerContent: content,
             isComposerEmpty: content?.length === 0,
@@ -590,6 +611,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
                         onChange={this.onChange}
                         disabled={this.state.haveRecording}
                         toggleStickerPickerOpen={this.toggleStickerPickerOpen}
+                        urlPreviewVm={this.props.urlPreviewVm}
                     />
                 );
             }
@@ -675,6 +697,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
         return (
             <div className={classes} ref={this.ref} role="region" aria-label={_t("a11y|message_composer")}>
                 <div className="mx_MessageComposer_wrapper">
+                    <MessageComposerUrlPreviewWrapper urlPreviewVm={this.props.urlPreviewVm} />
                     <UserIdentityWarning room={this.props.room} key={this.props.room.roomId} />
                     <ReplyPreview
                         replyToEvent={this.props.replyToEvent}
@@ -723,4 +746,24 @@ export class MessageComposer extends React.Component<IProps, IState> {
 }
 
 const MessageComposerWithMatrixClient = withMatrixClientHOC(MessageComposer);
-export default MessageComposerWithMatrixClient;
+
+export default function MessageComposerWrapper(props: Omit<IProps, "mxClient" | "urlPreviewVm">): JSX.Element {
+    const { showUrlPreview } = useScopedRoomContext("showUrlPreview");
+    const client = useMatrixClientContext();
+    const urlPreviewBundle = useSettingValue("feature_msc4095_url_preview_bundle");
+    const urlPreviewVm = useCreateAutoDisposedViewModel(
+        () =>
+            new MessageComposerUrlPreviewViewModel({
+                client,
+                visible: showUrlPreview,
+                showTooltips: PlatformPeg.get()?.needsUrlTooltips() ?? true,
+                urlPreviewBundle,
+            }),
+    );
+
+    useEffect(() => {
+        void urlPreviewVm.updateUrlPreviewVisible(showUrlPreview);
+    }, [urlPreviewVm, showUrlPreview]);
+
+    return <MessageComposerWithMatrixClient {...props} urlPreviewVm={urlPreviewVm} />;
+}
diff --git a/apps/web/src/components/views/rooms/MessageComposerButtons.tsx b/apps/web/src/components/views/rooms/MessageComposerButtons.tsx
index 2221bf7592..919e33d039 100644
--- a/apps/web/src/components/views/rooms/MessageComposerButtons.tsx
+++ b/apps/web/src/components/views/rooms/MessageComposerButtons.tsx
@@ -1,4 +1,5 @@
 /*
+Copyright 2026 Element Creations Ltd.
 Copyright 2024 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
 
@@ -14,35 +15,35 @@ import {
     THREAD_RELATION_TYPE,
     M_POLL_START,
 } from "matrix-js-sdk/src/matrix";
-import React, { type JSX, createContext, type ReactElement, type ReactNode, useContext, useRef } from "react";
+import React, { type JSX, type ReactElement, type ReactNode, useContext } from "react";
 import {
-    AttachmentIcon,
     MicOnIcon,
     OverflowHorizontalIcon,
     PollsIcon,
     StickerIcon,
     TextFormattingIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { UploadButton, useViewModel } from "@element-hq/web-shared-components";
 
 import { _t } from "../../../languageHandler";
-import { CollapsibleButton } from "./CollapsibleButton";
+import { CollapsibleButton, OverflowMenuContext } from "./CollapsibleButton";
 import { type MenuProps } from "../../structures/ContextMenu";
-import dis from "../../../dispatcher/dispatcher";
 import ErrorDialog from "../dialogs/ErrorDialog";
 import { LocationButton } from "../location";
 import Modal from "../../../Modal";
 import PollCreateDialog from "../elements/PollCreateDialog";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import ContentMessages from "../../../ContentMessages";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
-import { useDispatcher } from "../../../hooks/useDispatcher";
-import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
-import IconizedContextMenu, { IconizedContextMenuOptionList } from "../context_menus/IconizedContextMenu";
+import IconizedContextMenu, {
+    IconizedContextMenuOption,
+    IconizedContextMenuOptionList,
+} from "../context_menus/IconizedContextMenu";
 import { EmojiButton } from "./EmojiButton";
 import { filterBoolean } from "../../../utils/arrays";
 import { useSettingValue } from "../../../hooks/useSettings";
 import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
 import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";
+import { useRoomUploadViewModel } from "../../../viewmodels/room/RoomUploadViewModel.tsx";
 
 interface IProps {
     addEmoji: (emoji: string) => boolean;
@@ -61,11 +62,10 @@ interface IProps {
     onComposerModeClick: () => void;
 }
 
-type OverflowMenuCloser = () => void;
-export const OverflowMenuContext = createContext<OverflowMenuCloser | null>(null);
-
 const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
     const matrixClient = useContext(MatrixClientContext);
+    const roomUploadVM = useRoomUploadViewModel();
+    const roomUploadSnapshot = useViewModel(roomUploadVM);
     const { room, narrow } = useScopedRoomContext("room", "narrow");
 
     const isWysiwygLabEnabled = useSettingValue("feature_wysiwyg_composer");
@@ -89,7 +89,15 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
             ),
         ];
         moreButtons = [
-            uploadButton(), // props passed via UploadButtonContext
+            // This a textual list of buttons, so we can't use the UploadButton here.
+            roomUploadSnapshot.options.map(({ type, icon: Icon, label }) => (
+                <IconizedContextMenuOption
+                    onClick={() => roomUploadVM.onUploadOptionSelected(type)}
+                    icon={Icon && <Icon />}
+                    label={label}
+                    key={type}
+                />
+            )),
             showStickersButton(props),
             voiceRecordingButton(props, narrow),
             props.showPollsButton ? pollButton(room, props.relation) : null,
@@ -106,7 +114,7 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
             ) : (
                 emojiButton(props)
             ),
-            uploadButton(), // props passed via UploadButtonContext
+            <UploadButton key="upload" vm={roomUploadVM} />,
         ];
         moreButtons = [
             showStickersButton(props),
@@ -126,7 +134,7 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
     });
 
     return (
-        <UploadButtonContextProvider roomId={room.roomId} relation={props.relation}>
+        <>
             {mainButtons}
             {moreButtons.length > 0 && (
                 <AccessibleButton
@@ -149,7 +157,7 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
                     </OverflowMenuContext.Provider>
                 </IconizedContextMenu>
             )}
-        </UploadButtonContextProvider>
+        </>
     );
 };
 
@@ -164,93 +172,6 @@ function emojiButton(props: IProps): ReactElement {
     );
 }
 
-function uploadButton(): ReactElement {
-    return <UploadButton key="controls_upload" />;
-}
-
-type UploadButtonFn = () => void;
-export const UploadButtonContext = createContext<UploadButtonFn | null>(null);
-
-interface IUploadButtonProps {
-    roomId: string;
-    relation?: IEventRelation;
-    children: ReactNode;
-}
-
-// We put the file input outside the UploadButton component so that it doesn't get killed when the context menu closes.
-const UploadButtonContextProvider: React.FC<IUploadButtonProps> = ({ roomId, relation, children }) => {
-    const cli = useContext(MatrixClientContext);
-    const roomContext = useScopedRoomContext("timelineRenderingType", "replyToEvent");
-    const uploadInput = useRef<HTMLInputElement>(null);
-
-    const onUploadClick = (): void => {
-        if (cli?.isGuest()) {
-            dis.dispatch({ action: "require_registration" });
-            return;
-        }
-        uploadInput.current?.click();
-    };
-
-    useDispatcher(dis, (payload) => {
-        if (roomContext.timelineRenderingType === payload.context && payload.action === "upload_file") {
-            onUploadClick();
-        }
-    });
-
-    const onUploadFileInputChange = (ev: React.ChangeEvent<HTMLInputElement>): void => {
-        if (ev.target.files?.length === 0) return;
-
-        // Take a copy, so we can safely reset the value of the form control
-        ContentMessages.sharedInstance().sendContentListToRoom(
-            Array.from(ev.target.files!),
-            roomId,
-            relation,
-            roomContext.replyToEvent,
-            cli,
-            roomContext.timelineRenderingType,
-        );
-
-        // This is the onChange handler for a file form control, but we're
-        // not keeping any state, so reset the value of the form control
-        // to empty.
-        // NB. we need to set 'value': the 'files' property is immutable.
-        ev.target.value = "";
-    };
-
-    const uploadInputStyle = { display: "none" };
-    return (
-        <UploadButtonContext.Provider value={onUploadClick}>
-            {children}
-
-            <input
-                ref={uploadInput}
-                type="file"
-                style={uploadInputStyle}
-                multiple
-                onClick={chromeFileInputFix}
-                onChange={onUploadFileInputChange}
-            />
-        </UploadButtonContext.Provider>
-    );
-};
-
-// Must be rendered within an UploadButtonContextProvider
-const UploadButton: React.FC = () => {
-    const overflowMenuCloser = useContext(OverflowMenuContext);
-    const uploadButtonFn = useContext(UploadButtonContext);
-
-    const onClick = (): void => {
-        uploadButtonFn?.();
-        overflowMenuCloser?.(); // close overflow menu
-    };
-
-    return (
-        <CollapsibleButton className="mx_MessageComposer_button" onClick={onClick} title={_t("common|attachment")}>
-            <AttachmentIcon />
-        </CollapsibleButton>
-    );
-};
-
 function showStickersButton(props: IProps): ReactElement | null {
     return props.showStickersButton ? (
         <CollapsibleButton
@@ -364,5 +285,4 @@ function ComposerModeButton({ isRichTextEnabled, onClick }: WysiwygToggleButtonP
         </CollapsibleButton>
     );
 }
-
 export default MessageComposerButtons;
diff --git a/apps/web/src/components/views/rooms/MessageComposerFormatBar.tsx b/apps/web/src/components/views/rooms/MessageComposerFormatBar.tsx
index 0957aa9721..5430daf582 100644
--- a/apps/web/src/components/views/rooms/MessageComposerFormatBar.tsx
+++ b/apps/web/src/components/views/rooms/MessageComposerFormatBar.tsx
@@ -64,41 +64,35 @@ export default class MessageComposerFormatBar extends React.PureComponent<IProps
                     onClick={() => this.props.onAction(Formatting.Bold)}
                     icon={<BoldIcon />}
                     shortcut={this.props.shortcuts.bold}
-                    visible={this.state.visible}
                 />
                 <FormatButton
                     label={_t("composer|format_italics")}
                     onClick={() => this.props.onAction(Formatting.Italics)}
                     icon={<ItalicIcon />}
                     shortcut={this.props.shortcuts.italics}
-                    visible={this.state.visible}
                 />
                 <FormatButton
                     label={_t("composer|format_strikethrough")}
                     onClick={() => this.props.onAction(Formatting.Strikethrough)}
                     icon={<StrikethroughIcon />}
-                    visible={this.state.visible}
                 />
                 <FormatButton
                     label={_t("composer|format_code_block")}
                     onClick={() => this.props.onAction(Formatting.Code)}
                     icon={<InlineCodeIcon />}
                     shortcut={this.props.shortcuts.code}
-                    visible={this.state.visible}
                 />
                 <FormatButton
                     label={_t("action|quote")}
                     onClick={() => this.props.onAction(Formatting.Quote)}
                     icon={<QuoteIcon />}
                     shortcut={this.props.shortcuts.quote}
-                    visible={this.state.visible}
                 />
                 <FormatButton
                     label={_t("composer|format_insert_link")}
                     onClick={() => this.props.onAction(Formatting.InsertLink)}
                     icon={<LinkIcon />}
                     shortcut={this.props.shortcuts.insert_link}
-                    visible={this.state.visible}
                 />
             </Toolbar>
         );
@@ -126,7 +120,6 @@ interface IFormatButtonProps {
     label: string;
     icon: JSX.Element;
     shortcut?: string;
-    visible?: boolean;
     onClick(): void;
 }
 
diff --git a/apps/web/src/components/views/rooms/MessageComposerUrlPreview.test.tsx b/apps/web/src/components/views/rooms/MessageComposerUrlPreview.test.tsx
new file mode 100644
index 0000000000..9cfbf0386f
--- /dev/null
+++ b/apps/web/src/components/views/rooms/MessageComposerUrlPreview.test.tsx
@@ -0,0 +1,159 @@
+/*
+Copyright 2026 Element Creations 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 { render, waitFor } from "test-utils-rtl";
+import { test, describe, beforeEach, expect, vi, afterEach } from "vitest";
+
+import { MessageComposerUrlPreviewWrapper } from "./MessageComposerUrlPreview";
+import {
+    getMockClientWithEventEmitter,
+    getRoomContext,
+    mkRoom,
+    mockClientMethodsUser,
+} from "../../../../test/test-utils";
+import type { I18nApi } from "@element-hq/element-web-module-api";
+import type { ModuleApi } from "../../../modules/Api";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { ScopedRoomContextProvider } from "../../../contexts/ScopedRoomContext";
+import type { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { CustomComponentsApi } from "../../../modules/customComponentApi";
+import {
+    DEBOUNCE_REQUEST_TIMEOUT_MS,
+    MessageComposerUrlPreviewViewModel,
+    type MessageComposerUrlPreviewViewModelProps,
+} from "../../../viewmodels/composer/MessageComposerUrlPreviewViewModel";
+
+// @vitest-environment happy-dom
+
+const BASIC_PREVIEW_OGDATA = {
+    "og:title": "This is an example!",
+    "og:description": "This is a description",
+    "og:type": "document",
+    "og:url": "https://example.org",
+    "og:site_name": "Example.org",
+};
+
+function getUrlPreviewVm(client: MatrixClient, content?: string): MessageComposerUrlPreviewViewModel {
+    const props: MessageComposerUrlPreviewViewModelProps = {
+        client,
+        visible: true,
+        showTooltips: false,
+        urlPreviewBundle: false,
+    };
+
+    if (content !== undefined) {
+        props.content = content;
+    }
+
+    const vm = new MessageComposerUrlPreviewViewModel(props);
+    if (content !== undefined) {
+        // Mirror how MessageComposer drives the view model so previews are actually computed.
+        void vm.updateWithText({ content, debounced: false });
+    }
+    return vm;
+}
+
+describe("MessageComposerUrlPreview", () => {
+    let client: MatrixClient;
+    let originalMxModuleApi: ModuleApi;
+    beforeEach(() => {
+        originalMxModuleApi = window.mxModuleApi;
+        window.mxModuleApi = {
+            i18n: {} as I18nApi,
+        } as ModuleApi;
+        client = getMockClientWithEventEmitter({
+            ...mockClientMethodsUser(),
+            getUrlPreview: vi.fn().mockResolvedValue(BASIC_PREVIEW_OGDATA),
+        });
+    });
+    afterEach(() => {
+        window.mxModuleApi = originalMxModuleApi;
+    });
+
+    function wrapComponent(component: Parameters<typeof render>[0]): ReturnType<typeof render> {
+        return render(component, {
+            wrapper: ({ children }) => (
+                <MatrixClientContext.Provider value={client}>
+                    <ScopedRoomContextProvider
+                        roomId="!foo:bar"
+                        {...getRoomContext(mkRoom(client, "!foo:bar"), { showUrlPreview: true })}
+                    >
+                        {children}
+                    </ScopedRoomContextProvider>
+                </MatrixClientContext.Provider>
+            ),
+        });
+    }
+
+    test("to be empty without a link to preview", () => {
+        const { container } = wrapComponent(
+            <MessageComposerUrlPreviewWrapper urlPreviewVm={getUrlPreviewVm(client, "Test a string")} />,
+        );
+        expect(container).toMatchInlineSnapshot(`<div />`);
+    });
+    test("to contain a link when there is a URL", async () => {
+        const { getByText } = wrapComponent(
+            <MessageComposerUrlPreviewWrapper urlPreviewVm={getUrlPreviewVm(client, "https://example.org")} />,
+        );
+        await waitFor(
+            () => {
+                expect(getByText("Example.org")).toBeDefined();
+            },
+            { timeout: DEBOUNCE_REQUEST_TIMEOUT_MS },
+        );
+    });
+    test("to allow overriding with a module component", async () => {
+        const modApi = {
+            customComponents: new CustomComponentsApi(),
+        } as ModuleApi;
+        modApi.customComponents.registerComposerPreview(
+            () => true,
+            () => <strong>Fake preview</strong>,
+        );
+        const { getByText } = wrapComponent(
+            <MessageComposerUrlPreviewWrapper
+                moduleApi={modApi}
+                urlPreviewVm={getUrlPreviewVm(client, "https://example.org")}
+            />,
+        );
+        await waitFor(
+            () => {
+                expect(getByText("Fake preview")).toBeDefined();
+            },
+            { timeout: DEBOUNCE_REQUEST_TIMEOUT_MS },
+        );
+    });
+    test("to reset module component override when filter function does not match", async () => {
+        const modApi = {
+            customComponents: new CustomComponentsApi(),
+        } as ModuleApi;
+        modApi.customComponents.registerComposerPreview(
+            (text) => text === "show-fake-preview",
+            () => <strong>Fake preview</strong>,
+        );
+        const { container, getByText, queryByText, rerender } = wrapComponent(
+            <MessageComposerUrlPreviewWrapper
+                urlPreviewVm={getUrlPreviewVm(client, "show-fake-preview")}
+                moduleApi={modApi}
+            />,
+        );
+        await waitFor(() => {
+            expect(getByText("Fake preview")).toBeDefined();
+        });
+        rerender(
+            <MessageComposerUrlPreviewWrapper
+                urlPreviewVm={getUrlPreviewVm(client, "no-longer-matching")}
+                moduleApi={modApi}
+            />,
+        );
+        await waitFor(() => {
+            expect(queryByText("Fake preview")).toBeNull();
+        });
+        expect(container).toMatchInlineSnapshot(`<div />`);
+    });
+});
diff --git a/apps/web/src/components/views/rooms/MessageComposerUrlPreview.tsx b/apps/web/src/components/views/rooms/MessageComposerUrlPreview.tsx
new file mode 100644
index 0000000000..e58f5efd56
--- /dev/null
+++ b/apps/web/src/components/views/rooms/MessageComposerUrlPreview.tsx
@@ -0,0 +1,29 @@
+/*
+Copyright 2026 Element Creations Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { type ReactNode } from "react";
+import { MessageComposerUrlPreviewView, useViewModel } from "@element-hq/web-shared-components";
+
+import { type MessageComposerUrlPreviewViewModel } from "../../../viewmodels/composer/MessageComposerUrlPreviewViewModel";
+import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext";
+import { ModuleApi } from "../../../modules/Api";
+
+export function MessageComposerUrlPreviewWrapper({
+    urlPreviewVm: vm,
+    moduleApi = ModuleApi.instance,
+}: {
+    urlPreviewVm: MessageComposerUrlPreviewViewModel;
+    moduleApi?: ModuleApi;
+}): ReactNode | null {
+    const { roomId } = useScopedRoomContext("showUrlPreview", "roomId");
+    const { content } = useViewModel(vm);
+    const customComponent = moduleApi.customComponents.renderComposerPreview({ text: content, roomId: roomId! }, () => (
+        <MessageComposerUrlPreviewView vm={vm} />
+    ));
+
+    return customComponent ?? <MessageComposerUrlPreviewView vm={vm} />;
+}
diff --git a/apps/web/src/components/views/rooms/NewRoomIntro.tsx b/apps/web/src/components/views/rooms/NewRoomIntro.tsx
index 1dec30785d..cc9f3f3403 100644
--- a/apps/web/src/components/views/rooms/NewRoomIntro.tsx
+++ b/apps/web/src/components/views/rooms/NewRoomIntro.tsx
@@ -12,7 +12,6 @@ import { KnownMembership } from "matrix-js-sdk/src/types";
 import { ErrorSolidIcon, UserAddIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { EventTileBubble, LinkedText } from "@element-hq/web-shared-components";
 
-import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import DMRoomMap from "../../../utils/DMRoomMap";
 import { _t, _td } from "../../../languageHandler";
 import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
@@ -21,10 +20,8 @@ import RoomAvatar from "../avatars/RoomAvatar";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import { type ViewUserPayload } from "../../../dispatcher/payloads/ViewUserPayload";
 import { Action } from "../../../dispatcher/actions";
-import SpaceStore from "../../../stores/spaces/SpaceStore";
 import { showSpaceInvite } from "../../../utils/space";
-import { RoomSettingsTab } from "../dialogs/RoomSettingsDialog";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { RoomSettingsTab } from "../dialogs/RoomSettingsDialog-tab";
 import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
 import { UIComponent } from "../../../settings/UIFeature";
 import { privateShouldBeEncrypted } from "../../../utils/rooms";
@@ -33,6 +30,7 @@ import { shouldEncryptRoomWithSingle3rdPartyInvite } from "../../../utils/room/s
 import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";
 import { useTopic } from "../../../hooks/room/useTopic";
 import { topicToHtml } from "../../../HtmlUtils";
+import { SDKContext } from "../../../contexts/SDKContext.ts";
 
 function hasExpectedEncryptionSettings(matrixClient: MatrixClient, room: Room): boolean {
     const isEncrypted: boolean = matrixClient.isRoomEncrypted(room.roomId);
@@ -53,7 +51,8 @@ const determineIntroMessage = (room: Room, encryptedSingle3rdPartyInvite: boolea
 };
 
 const NewRoomIntro: React.FC = () => {
-    const cli = useContext(MatrixClientContext);
+    const sdkContext = useContext(SDKContext);
+    const cli = sdkContext.client!;
     const { room, roomId } = useScopedRoomContext("room", "roomId");
     const topic = useTopic(room);
     const isLocalRoom = room instanceof LocalRoom;
@@ -179,10 +178,10 @@ const NewRoomIntro: React.FC = () => {
 
         let parentSpace: Room | undefined;
         if (
-            SpaceStore.instance.activeSpaceRoom?.canInvite(cli.getSafeUserId()) &&
-            SpaceStore.instance.isRoomInSpace(SpaceStore.instance.activeSpace!, room.roomId)
+            sdkContext.spaceStore.activeSpaceRoom?.canInvite(cli.getSafeUserId()) &&
+            sdkContext.spaceStore.isRoomInSpace(sdkContext.spaceStore.activeSpace, room.roomId)
         ) {
-            parentSpace = SpaceStore.instance.activeSpaceRoom;
+            parentSpace = sdkContext.spaceStore.activeSpaceRoom;
         }
 
         let buttons: JSX.Element | undefined;
@@ -193,7 +192,7 @@ const NewRoomIntro: React.FC = () => {
                         className="mx_NewRoomIntro_inviteButton"
                         kind="primary"
                         onClick={() => {
-                            showSpaceInvite(parentSpace!);
+                            showSpaceInvite(parentSpace);
                         }}
                     >
                         <UserAddIcon />
@@ -278,10 +277,7 @@ const NewRoomIntro: React.FC = () => {
     const subText = _t("room|intro|private_unencrypted_warning");
 
     let subButton: JSX.Element | undefined;
-    if (
-        room.currentState.mayClientSendStateEvent(EventType.RoomEncryption, MatrixClientPeg.safeGet()) &&
-        !isLocalRoom
-    ) {
+    if (room.currentState.mayClientSendStateEvent(EventType.RoomEncryption, cli) && !isLocalRoom) {
         subButton = (
             <AccessibleButton kind="link_inline" onClick={openRoomSettings}>
                 {_t("room|intro|enable_encryption_prompt")}
diff --git a/apps/web/src/components/views/rooms/NotificationBadge.tsx b/apps/web/src/components/views/rooms/NotificationBadge.tsx
deleted file mode 100644
index 323becf33c..0000000000
--- a/apps/web/src/components/views/rooms/NotificationBadge.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { type JSX, type ReactNode } from "react";
-import { Tooltip } from "@vector-im/compound-web";
-
-import SettingsStore from "../../../settings/SettingsStore";
-import { type XOR } from "../../../@types/common";
-import { type NotificationState, NotificationStateEvents } from "../../../stores/notifications/NotificationState";
-import { _t } from "../../../languageHandler";
-import { NotificationLevel } from "../../../stores/notifications/NotificationLevel";
-import { StatelessNotificationBadge } from "./NotificationBadge/StatelessNotificationBadge";
-
-interface IProps {
-    notification: NotificationState;
-
-    /**
-     * If true, show nothing if the notification would only cause a dot to be shown rather than
-     * a badge. That is: only display badges and not dots. Default: false.
-     */
-    hideIfDot?: boolean;
-
-    /**
-     * The room ID, if any, the badge represents.
-     */
-    roomId?: string;
-}
-
-interface IClickableProps extends IProps, React.InputHTMLAttributes<Element> {
-    showUnsentTooltip?: boolean;
-    /**
-     * If specified will return an AccessibleButton instead of a div.
-     */
-    onClick(ev: React.MouseEvent): void;
-}
-
-interface IState {
-    showCounts: boolean; // whether to show counts.
-}
-
-export default class NotificationBadge extends React.PureComponent<XOR<IProps, IClickableProps>, IState> {
-    private countWatcherRef?: string;
-
-    public constructor(props: IProps) {
-        super(props);
-
-        this.state = {
-            showCounts: SettingsStore.getValue("Notifications.alwaysShowBadgeCounts", this.roomId),
-        };
-    }
-
-    private get roomId(): string | null {
-        // We should convert this to null for safety with the SettingsStore
-        return this.props.roomId || null;
-    }
-
-    public componentDidMount(): void {
-        this.props.notification.on(NotificationStateEvents.Update, this.onNotificationUpdate);
-
-        this.countWatcherRef = SettingsStore.watchSetting(
-            "Notifications.alwaysShowBadgeCounts",
-            this.roomId,
-            this.countPreferenceChanged,
-        );
-    }
-
-    public componentWillUnmount(): void {
-        SettingsStore.unwatchSetting(this.countWatcherRef);
-        this.props.notification.off(NotificationStateEvents.Update, this.onNotificationUpdate);
-    }
-
-    public componentDidUpdate(prevProps: Readonly<IProps>): void {
-        if (prevProps.notification) {
-            prevProps.notification.off(NotificationStateEvents.Update, this.onNotificationUpdate);
-        }
-
-        this.props.notification.on(NotificationStateEvents.Update, this.onNotificationUpdate);
-    }
-
-    private countPreferenceChanged = (): void => {
-        this.setState({ showCounts: SettingsStore.getValue("Notifications.alwaysShowBadgeCounts", this.roomId) });
-    };
-
-    private onNotificationUpdate = (): void => {
-        this.forceUpdate(); // notification state changed - update
-    };
-
-    public render(): ReactNode {
-        /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
-        const { notification, showUnsentTooltip, hideIfDot, onClick, tabIndex } = this.props;
-
-        if (notification.isIdle && !notification.knocked) return null;
-        if (hideIfDot && notification.level < NotificationLevel.Notification) {
-            // This would just be a dot and we've been told not to show dots, so don't show it
-            return null;
-        }
-
-        const commonProps: React.ComponentProps<typeof StatelessNotificationBadge> = {
-            symbol: notification.symbol,
-            count: notification.count,
-            level: notification.level,
-            knocked: notification.knocked,
-        };
-
-        let badge: JSX.Element;
-        if (onClick) {
-            badge = <StatelessNotificationBadge {...commonProps} onClick={onClick} tabIndex={tabIndex} />;
-        } else {
-            badge = <StatelessNotificationBadge {...commonProps} />;
-        }
-
-        if (showUnsentTooltip && notification.level === NotificationLevel.Unsent) {
-            return (
-                <Tooltip label={_t("notifications|message_didnt_send")} placement="right">
-                    {badge}
-                </Tooltip>
-            );
-        }
-
-        return badge;
-    }
-}
diff --git a/apps/web/src/components/views/rooms/NotificationBadge/NotificationBadge.tsx b/apps/web/src/components/views/rooms/NotificationBadge/NotificationBadge.tsx
new file mode 100644
index 0000000000..2639f70212
--- /dev/null
+++ b/apps/web/src/components/views/rooms/NotificationBadge/NotificationBadge.tsx
@@ -0,0 +1,93 @@
+/*
+Copyright 2026 Element Creations Ltd.
+Copyright 2024 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { type JSX, useEffect, type MouseEventHandler } from "react";
+import { NotificationBadgeView, useCreateAutoDisposedViewModel } from "@element-hq/web-shared-components";
+
+import { useSettingValue } from "../../../../hooks/useSettings";
+import { type NotificationState, NotificationStateEvents } from "../../../../stores/notifications/NotificationState";
+import {
+    notificationBadgeDataFromNotification,
+    NotificationBadgeViewModel,
+} from "../../../../viewmodels/room/notification-badge/NotificationBadgeViewModel";
+
+interface Props {
+    notification: NotificationState;
+
+    /**
+     * If true, show nothing if the notification would only cause a dot to be shown rather than
+     * a badge. That is: only display badges and not dots. Default: false.
+     */
+    hideIfDot?: boolean;
+
+    showUnsentTooltip?: boolean;
+    tabIndex?: number;
+    ariaLabel?: string;
+    className?: string;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+
+export function NotificationBadge({
+    notification,
+    hideIfDot,
+    showUnsentTooltip,
+    tabIndex,
+    ariaLabel,
+    className,
+    onClick,
+}: Readonly<Props>): JSX.Element {
+    const hideBold = useSettingValue("feature_hidebold");
+    const vm = useCreateAutoDisposedViewModel(
+        () =>
+            new NotificationBadgeViewModel({
+                ...notificationBadgeDataFromNotification(notification),
+                hideIfDot,
+                hideBold,
+                showUnsentTooltip,
+                tabIndex,
+                ariaLabel,
+                onClick,
+            }),
+    );
+
+    useEffect(() => {
+        vm.setNotificationData(notificationBadgeDataFromNotification(notification));
+
+        const onNotificationUpdate = (): void => {
+            vm.setNotificationData(notificationBadgeDataFromNotification(notification));
+        };
+
+        notification.on(NotificationStateEvents.Update, onNotificationUpdate);
+        return () => {
+            notification.off(NotificationStateEvents.Update, onNotificationUpdate);
+        };
+    }, [vm, notification]);
+
+    useEffect(() => {
+        vm.setHideIfDot(!!hideIfDot);
+    }, [vm, hideIfDot]);
+
+    useEffect(() => {
+        vm.setHideBold(!!hideBold);
+    }, [vm, hideBold]);
+
+    useEffect(() => {
+        vm.setShowUnsentTooltip(!!showUnsentTooltip);
+    }, [vm, showUnsentTooltip]);
+
+    useEffect(() => {
+        vm.setClickOptions({
+            onClick,
+            tabIndex,
+            ariaLabel,
+        });
+    }, [vm, onClick, tabIndex, ariaLabel]);
+
+    return <NotificationBadgeView vm={vm} className={className} />;
+}
diff --git a/apps/web/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx b/apps/web/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx
index 8db391f014..5dd8184c4c 100644
--- a/apps/web/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx
+++ b/apps/web/src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx
@@ -1,4 +1,5 @@
 /*
+Copyright 2026 Element Creations Ltd.
 Copyright 2024 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.
 
@@ -6,16 +7,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type Ref, type JSX, type ReactNode } from "react";
-import classNames from "classnames";
-import { AskToJoinIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import React, { type JSX, type MouseEventHandler, useEffect } from "react";
+import { NotificationBadgeView, useCreateAutoDisposedViewModel } from "@element-hq/web-shared-components";
 
-import { formatCount } from "../../../../utils/FormattingUtils";
-import AccessibleButton, { type ButtonEvent } from "../../elements/AccessibleButton";
-import { NotificationLevel } from "../../../../stores/notifications/NotificationLevel";
 import { useSettingValue } from "../../../../hooks/useSettings";
-import { type XOR } from "../../../../@types/common";
-import { _t } from "../../../../languageHandler.tsx";
+import { type NotificationLevel } from "../../../../stores/notifications/NotificationLevel";
+import { NotificationBadgeViewModel } from "../../../../viewmodels/room/notification-badge/NotificationBadgeViewModel";
 
 interface Props {
     symbol: string | null;
@@ -24,98 +21,66 @@ interface Props {
     knocked?: boolean;
     /**
      * If true, where we would normally show a badge, we instead show a dot. No numeric count will
-     * be displayed (but may affect whether the the dot is displayed). See class doc
-     * for the difference between the two.
+     * be displayed (but may affect whether the dot is displayed).
      */
     forceDot?: boolean;
-    children?: ReactNode;
-    ref?: Ref<HTMLDivElement>;
-}
-
-interface ClickableProps extends Props {
-    /**
-     * If specified will return an AccessibleButton instead of a div.
-     */
-    onClick(this: void, ev: ButtonEvent): void;
     tabIndex?: number;
+    ariaLabel?: string;
+    className?: string;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
 }
 
-/**
- * A notification indicator that conveys what activity / notifications the user has in whatever
- * context it is being used.
- *
- * Can either be a 'badge': a small circle with a number in it (the 'count'), or a 'dot': a smaller, empty circle.
- * The two can be used to convey the same meaning but in different contexts, for example: for unread
- * notifications in the room list, it may have a green badge with the number of unread notifications,
- * but somewhere else it may just have a green dot as a more compact representation of the same information.
- */
 export const StatelessNotificationBadge = ({
     symbol,
     count,
     level,
     knocked,
-    forceDot = false,
-    ...props
-}: XOR<Props, ClickableProps>): JSX.Element => {
+    forceDot,
+    tabIndex,
+    ariaLabel,
+    className,
+    onClick,
+}: Readonly<Props>): JSX.Element => {
     const hideBold = useSettingValue("feature_hidebold");
-
-    // Don't show a badge if we don't need to
-    if ((level === NotificationLevel.None || (hideBold && level == NotificationLevel.Activity)) && !knocked) {
-        return <></>;
-    }
-
-    const hasUnreadCount = level >= NotificationLevel.Notification && (!!count || !!symbol);
-
-    const isEmptyBadge = symbol === null && count === 0;
-
-    if (symbol === null && count > 0) {
-        symbol = formatCount(count);
-    }
-
-    let icon: JSX.Element | undefined;
-    if (knocked) {
-        icon = <AskToJoinIcon aria-label={_t("room|knock_sent")} />;
-    }
-
-    // We show a dot if either:
-    // * The props force us to, or
-    // * It's just an activity-level notification or (in theory) lower and the room isn't knocked
-    const badgeType =
-        forceDot || (level <= NotificationLevel.Activity && !icon)
-            ? "dot"
-            : !symbol || symbol.length < 3
-              ? "badge_2char"
-              : "badge_3char";
-
-    const classes = classNames({
-        "mx_NotificationBadge": true,
-        "mx_NotificationBadge_visible": isEmptyBadge || knocked ? true : hasUnreadCount,
-        "mx_NotificationBadge_level_notification": level == NotificationLevel.Notification,
-        "mx_NotificationBadge_level_highlight": level >= NotificationLevel.Highlight,
-        "mx_NotificationBadge_knocked": knocked,
-
-        // Exactly one of mx_NotificationBadge_dot, mx_NotificationBadge_2char, mx_NotificationBadge_3char
-        "mx_NotificationBadge_dot": badgeType === "dot",
-        "mx_NotificationBadge_2char": badgeType === "badge_2char",
-        "mx_NotificationBadge_3char": badgeType === "badge_3char",
-        // Badges with text should always use light colors
-        "cpd-theme-light": badgeType !== "dot",
-    });
-
-    const content = icon || <span className="mx_NotificationBadge_count">{symbol}</span>;
-
-    if (props.onClick) {
-        return (
-            <AccessibleButton {...props} className={classes} onClick={props.onClick} ref={props.ref}>
-                {content}
-                {props.children}
-            </AccessibleButton>
-        );
-    }
-
-    return (
-        <div className={classes} ref={props.ref}>
-            {content}
-        </div>
+    const vm = useCreateAutoDisposedViewModel(
+        () =>
+            new NotificationBadgeViewModel({
+                symbol,
+                count,
+                level,
+                knocked,
+                forceDot,
+                hideBold,
+                tabIndex,
+                ariaLabel,
+                onClick,
+            }),
     );
+
+    useEffect(() => {
+        vm.setNotificationData({
+            symbol,
+            count,
+            level,
+            knocked,
+        });
+    }, [vm, symbol, count, level, knocked]);
+
+    useEffect(() => {
+        vm.setForceDot(!!forceDot);
+    }, [vm, forceDot]);
+
+    useEffect(() => {
+        vm.setHideBold(!!hideBold);
+    }, [vm, hideBold]);
+
+    useEffect(() => {
+        vm.setClickOptions({
+            onClick,
+            tabIndex,
+            ariaLabel,
+        });
+    }, [vm, onClick, tabIndex, ariaLabel]);
+
+    return <NotificationBadgeView vm={vm} className={className} />;
 };
diff --git a/apps/web/src/components/views/rooms/NotificationBadge/UnreadNotificationBadge.tsx b/apps/web/src/components/views/rooms/NotificationBadge/UnreadNotificationBadge.tsx
index 0677278054..8bc575a683 100644
--- a/apps/web/src/components/views/rooms/NotificationBadge/UnreadNotificationBadge.tsx
+++ b/apps/web/src/components/views/rooms/NotificationBadge/UnreadNotificationBadge.tsx
@@ -7,10 +7,10 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type Room } from "matrix-js-sdk/src/matrix";
-import React, { type JSX } from "react";
+import React, { type JSX, useEffect } from "react";
+import { NotificationBadgeView, useCreateAutoDisposedViewModel } from "@element-hq/web-shared-components";
 
-import { useUnreadNotifications } from "../../../../hooks/useUnreadNotifications";
-import { StatelessNotificationBadge } from "./StatelessNotificationBadge";
+import { UnreadNotificationBadgeViewModel } from "../../../../viewmodels/room/notification-badge/UnreadNotificationBadgeViewModel";
 
 interface Props {
     room?: Room;
@@ -20,10 +20,30 @@ interface Props {
      * be displayed.
      */
     forceDot?: boolean;
+    className?: string;
 }
 
-export function UnreadNotificationBadge({ room, threadId, forceDot }: Props): JSX.Element {
-    const { symbol, count, level } = useUnreadNotifications(room, threadId);
+export function UnreadNotificationBadge({ room, threadId, forceDot, className }: Props): JSX.Element {
+    const vm = useCreateAutoDisposedViewModel(
+        () =>
+            new UnreadNotificationBadgeViewModel({
+                room,
+                threadId,
+                forceDot,
+            }),
+    );
 
-    return <StatelessNotificationBadge symbol={symbol} count={count} level={level} forceDot={forceDot} />;
+    useEffect(() => {
+        vm.setRoom(room);
+    }, [room, vm]);
+
+    useEffect(() => {
+        vm.setThreadId(threadId);
+    }, [threadId, vm]);
+
+    useEffect(() => {
+        vm.setForceDot(forceDot);
+    }, [forceDot, vm]);
+
+    return <NotificationBadgeView vm={vm} className={className} />;
 }
diff --git a/apps/web/src/components/views/rooms/PinnedMessageBanner.tsx b/apps/web/src/components/views/rooms/PinnedMessageBanner.tsx
index 552aa2a4b2..7be7be08d8 100644
--- a/apps/web/src/components/views/rooms/PinnedMessageBanner.tsx
+++ b/apps/web/src/components/views/rooms/PinnedMessageBanner.tsx
@@ -6,15 +6,15 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { type JSX, useContext, useEffect, useId, useRef, useState } from "react";
+import React, { type JSX, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
 import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin-solid";
 import { Button } from "@vector-im/compound-web";
 import { type MatrixEvent, type Room } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
+import { EventPreviewView, useCreateAutoDisposedViewModel } from "@element-hq/web-shared-components";
 
 import { usePinnedEvents, useSortedFetchedPinnedEvents } from "../../../hooks/usePinnedEvents";
 import { _t } from "../../../languageHandler";
-import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
 import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
 import { useEventEmitter } from "../../../hooks/useEventEmitter";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
@@ -24,8 +24,9 @@ import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPaylo
 import { Action } from "../../../dispatcher/actions";
 import MessageEvent from "../messages/MessageEvent";
 import PosthogTrackers from "../../../PosthogTrackers.ts";
-import { EventPreview } from "./EventPreview.tsx";
 import { SDKContext } from "../../../contexts/SDKContext.ts";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { EventPreviewViewModel } from "../../../viewmodels/room/timeline/event-tile/EventPreviewViewModel";
 
 /**
  * The props for the {@link PinnedMessageBanner} component.
@@ -118,7 +119,7 @@ export function PinnedMessageBanner({ room, permalinkCreator }: PinnedMessageBan
                             )}
                         </div>
                     )}
-                    <EventPreview
+                    <EventPreviewWrapper
                         mxEvent={pinnedEvent}
                         className="mx_PinnedMessageBanner_message"
                         data-testid="banner-message"
@@ -141,6 +142,25 @@ export function PinnedMessageBanner({ room, permalinkCreator }: PinnedMessageBan
     );
 }
 
+type EventPreviewWrapperProps = Omit<React.ComponentPropsWithoutRef<"span">, "children" | "title"> & {
+    mxEvent: MatrixEvent;
+};
+
+function EventPreviewWrapper({ mxEvent, ...props }: Readonly<EventPreviewWrapperProps>): JSX.Element {
+    const cli = useContext(MatrixClientContext);
+    const vm = useCreateAutoDisposedViewModel(() => new EventPreviewViewModel({ cli, mxEvent }));
+
+    useEffect(() => {
+        vm.setEvent(mxEvent);
+    }, [mxEvent, vm]);
+
+    useEffect(() => {
+        vm.setClient(cli);
+    }, [cli, vm]);
+
+    return <EventPreviewView {...props} vm={vm} />;
+}
+
 /**
  * When the banner is displayed or hidden, we want to notify the timeline to resize itself.
  * @param pinnedEvent
@@ -198,6 +218,7 @@ function Indicators({ count, currentIndex }: IndicatorsProps): JSX.Element {
     return (
         <div className="mx_PinnedMessageBanner_Indicators">
             {Array.from({ length: numberOfIndicators }).map((_, i) => (
+                // oxlint-disable-next-line react/no-array-index-key
                 <Indicator key={i} active={i === index} hidden={isLastCycle && lastCycleIndex <= i} />
             ))}
         </div>
@@ -233,11 +254,6 @@ function Indicator({ active, hidden }: IndicatorProps): JSX.Element {
     );
 }
 
-function getRightPanelPhase(roomId: string): RightPanelPhases | null {
-    if (!RightPanelStore.instance.isOpenForRoom(roomId)) return null;
-    return RightPanelStore.instance.currentCard.phase;
-}
-
 /**
  * The props for the {@link BannerButton} component.
  */
@@ -252,8 +268,18 @@ interface BannerButtonProps {
  * A button that allows the user to view or close the list of pinned messages.
  */
 function BannerButton({ room }: BannerButtonProps): JSX.Element {
+    const sdkContext = useContext(SDKContext);
+
+    const getRightPanelPhase = useCallback(
+        (roomId: string): RightPanelPhases | null => {
+            if (!sdkContext.rightPanelStore.isOpenForRoom(roomId)) return null;
+            return sdkContext.rightPanelStore.currentCard.phase;
+        },
+        [sdkContext.rightPanelStore],
+    );
+
     const [currentPhase, setCurrentPhase] = useState<RightPanelPhases | null>(getRightPanelPhase(room.roomId));
-    useEventEmitter(RightPanelStore.instance, UPDATE_EVENT, () => setCurrentPhase(getRightPanelPhase(room.roomId)));
+    useEventEmitter(sdkContext.rightPanelStore, UPDATE_EVENT, () => setCurrentPhase(getRightPanelPhase(room.roomId)));
     const isPinnedMessagesPhase = currentPhase === RightPanelPhases.PinnedMessages;
 
     return (
@@ -264,7 +290,7 @@ function BannerButton({ room }: BannerButtonProps): JSX.Element {
                 if (isPinnedMessagesPhase) PosthogTrackers.trackInteraction("PinnedMessageBannerCloseListButton");
                 else PosthogTrackers.trackInteraction("PinnedMessageBannerViewAllButton");
 
-                RightPanelStore.instance.showOrHidePhase(RightPanelPhases.PinnedMessages);
+                sdkContext.rightPanelStore.showOrHidePhase(RightPanelPhases.PinnedMessages);
             }}
         >
             {isPinnedMessagesPhase
diff --git a/apps/web/src/components/views/rooms/ReadReceiptGroup.tsx b/apps/web/src/components/views/rooms/ReadReceiptGroup.tsx
index 910e0cfb52..ee1538723b 100644
--- a/apps/web/src/components/views/rooms/ReadReceiptGroup.tsx
+++ b/apps/web/src/components/views/rooms/ReadReceiptGroup.tsx
@@ -9,12 +9,12 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX, type PropsWithChildren } from "react";
 import { type User } from "matrix-js-sdk/src/matrix";
 import { Tooltip } from "@vector-im/compound-web";
+import { AutoHideScrollbar } from "@element-hq/web-shared-components";
 
-import ReadReceiptMarker, { type IReadReceiptPosition } from "./ReadReceiptMarker";
+import ReadReceiptMarker, { type IReadReceiptPosition, READ_AVATAR_SIZE } from "./ReadReceiptMarker";
 import { type IReadReceiptProps } from "./EventTile";
 import AccessibleButton from "../elements/AccessibleButton";
 import MemberAvatar from "../avatars/MemberAvatar";
-import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import { formatDate } from "../../../DateUtils";
 import { Action } from "../../../dispatcher/actions";
 import dis from "../../../dispatcher/dispatcher";
@@ -29,7 +29,6 @@ const MAX_READ_AVATARS_PLUS_N = 3;
 const MAX_READ_AVATARS = MAX_READ_AVATARS_PLUS_N + 1;
 
 const READ_AVATAR_OFFSET = 10;
-export const READ_AVATAR_SIZE = 16;
 
 interface Props {
     readReceipts: IReadReceiptProps[];
@@ -109,7 +108,6 @@ export function ReadReceiptGroup({
                 readReceiptPosition = readReceiptMap[userId];
                 if (!readReceiptPosition) {
                     readReceiptPosition = {};
-                    // eslint-disable-next-line react-compiler/react-compiler
                     readReceiptMap[userId] = readReceiptPosition;
                 }
             }
@@ -124,8 +122,6 @@ export function ReadReceiptGroup({
                     readReceiptPosition={readReceiptPosition}
                     checkUnmounting={checkUnmounting}
                     suppressAnimation={suppressAnimation}
-                    timestamp={receipt.ts}
-                    showTwelveHour={isTwelveHour}
                 />
             );
         })
@@ -146,7 +142,7 @@ export function ReadReceiptGroup({
         const buttonRect = button.current.getBoundingClientRect();
         contextMenu = (
             <ContextMenu menuClassName="mx_ReadReceiptGroup_popup" onFinished={closeMenu} {...aboveLeftOf(buttonRect)}>
-                <AutoHideScrollbar>
+                <AutoHideScrollbar className="mx_AutoHideScrollbar">
                     <SectionHeader className="mx_ReadReceiptGroup_title">
                         {_t("timeline|read_receipt_title", { count: readReceipts.length })}
                     </SectionHeader>
diff --git a/apps/web/src/components/views/rooms/ReadReceiptMarker.tsx b/apps/web/src/components/views/rooms/ReadReceiptMarker.tsx
index 6b096d8917..3bcd301bff 100644
--- a/apps/web/src/components/views/rooms/ReadReceiptMarker.tsx
+++ b/apps/web/src/components/views/rooms/ReadReceiptMarker.tsx
@@ -14,7 +14,8 @@ import { logger } from "matrix-js-sdk/src/logger";
 import NodeAnimator from "../../../NodeAnimator";
 import { toPx } from "../../../utils/units";
 import MemberAvatar from "../avatars/MemberAvatar";
-import { READ_AVATAR_SIZE } from "./ReadReceiptGroup";
+
+export const READ_AVATAR_SIZE = 16;
 
 // The top & right from the bounding client rect of each read receipt
 export interface IReadReceiptPosition {
@@ -46,12 +47,6 @@ interface IProps {
     // unmounted, to avoid unnecessary work. Should return true if we
     // are being unmounted.
     checkUnmounting?: () => boolean;
-
-    // Timestamp when the receipt was read
-    timestamp?: number;
-
-    // True to show twelve hour format, false otherwise
-    showTwelveHour?: boolean;
 }
 
 interface IState {
diff --git a/apps/web/src/components/views/rooms/ReplyTile.tsx b/apps/web/src/components/views/rooms/ReplyTile.tsx
index 69bd2a4104..2a129a02eb 100644
--- a/apps/web/src/components/views/rooms/ReplyTile.tsx
+++ b/apps/web/src/components/views/rooms/ReplyTile.tsx
@@ -27,6 +27,7 @@ import { type GetRelationsForEvent } from "../rooms/EventTile";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { type IBodyProps } from "../messages/IBodyProps";
 import { FileBodyFactory, VideoBodyFactory, renderMBody } from "../messages/MBodyFactory";
+import { roomMemberToMemberInfo } from "../../../hooks/room/useRoomMemberProfile";
 
 interface IProps {
     mxEvent: MatrixEvent;
@@ -125,7 +126,11 @@ export default class ReplyTile extends React.PureComponent<IProps> {
             sender = (
                 <div className="mx_ReplyTile_sender">
                     <MemberAvatar member={mxEvent.sender} fallbackUserId={mxEvent.getSender()} size="16px" />
-                    <SenderProfile mxEvent={mxEvent} />
+                    <SenderProfile
+                        senderId={mxEvent.getSender() ?? undefined}
+                        member={roomMemberToMemberInfo(mxEvent.sender)}
+                        isEmote={msgType === MsgType.Emote}
+                    />
                 </div>
             );
         }
diff --git a/apps/web/src/components/views/rooms/RoomBreadcrumbs.tsx b/apps/web/src/components/views/rooms/RoomBreadcrumbs.tsx
deleted file mode 100644
index c677b32edc..0000000000
--- a/apps/web/src/components/views/rooms/RoomBreadcrumbs.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { createRef } from "react";
-import { type EmptyObject, type Room } from "matrix-js-sdk/src/matrix";
-import { CSSTransition } from "react-transition-group";
-
-import { BreadcrumbsStore } from "../../../stores/BreadcrumbsStore";
-import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
-import { _t } from "../../../languageHandler";
-import defaultDispatcher from "../../../dispatcher/dispatcher";
-import { UPDATE_EVENT } from "../../../stores/AsyncStore";
-import { useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
-import Toolbar from "../../../accessibility/Toolbar";
-import { Action } from "../../../dispatcher/actions";
-import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
-import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
-
-interface IState {
-    // Both of these control the animation for the breadcrumbs. For details on the
-    // actual animation, see the CSS.
-    //
-    // doAnimation is to lie to the CSSTransition component (see onBreadcrumbsUpdate
-    // for info). skipFirst is used to try and reduce jerky animation - also see the
-    // breadcrumb update function for info on that.
-    doAnimation: boolean;
-    skipFirst: boolean;
-}
-
-const RoomBreadcrumbTile: React.FC<{ room: Room; onClick: (ev: ButtonEvent) => void }> = ({ room, onClick }) => {
-    const [onFocus, isActive, ref] = useRovingTabIndex();
-
-    return (
-        <AccessibleButton
-            className="mx_RoomBreadcrumbs_crumb"
-            onClick={onClick}
-            aria-label={_t("a11y|room_name", { name: room.name })}
-            title={room.name}
-            onFocus={onFocus}
-            ref={ref}
-            tabIndex={isActive ? 0 : -1}
-            placement="right"
-        >
-            <DecoratedRoomAvatar
-                room={room}
-                size="32px"
-                displayBadge={true}
-                hideIfDot={true}
-                tooltipProps={{ tabIndex: isActive ? 0 : -1 }}
-            />
-        </AccessibleButton>
-    );
-};
-
-export default class RoomBreadcrumbs extends React.PureComponent<EmptyObject, IState> {
-    private unmounted = false;
-    private toolbar = createRef<HTMLDivElement>();
-
-    public constructor(props: EmptyObject) {
-        super(props);
-
-        this.state = {
-            doAnimation: true, // technically we want animation on mount, but it won't be perfect
-            skipFirst: false, // render the thing, as boring as it is
-        };
-    }
-
-    public componentDidMount(): void {
-        this.unmounted = false;
-        BreadcrumbsStore.instance.on(UPDATE_EVENT, this.onBreadcrumbsUpdate);
-    }
-
-    public componentWillUnmount(): void {
-        this.unmounted = true;
-        BreadcrumbsStore.instance.off(UPDATE_EVENT, this.onBreadcrumbsUpdate);
-    }
-
-    private onBreadcrumbsUpdate = (): void => {
-        if (this.unmounted) return;
-
-        // We need to trick the CSSTransition component into updating, which means we need to
-        // tell it to not animate, then to animate a moment later. This causes two updates
-        // which means two renders. The skipFirst change is so that our don't-animate state
-        // doesn't show the breadcrumb we're about to reveal as it causes a visual jump/jerk.
-        // The second update, on the next available tick, causes the "enter" animation to start
-        // again and this time we want to show the newest breadcrumb because it'll be hidden
-        // off screen for the animation.
-        this.setState({ doAnimation: false, skipFirst: true });
-        window.setTimeout(() => this.setState({ doAnimation: true, skipFirst: false }), 0);
-    };
-
-    private viewRoom = (room: Room, index: number, viaKeyboard = false): void => {
-        defaultDispatcher.dispatch<ViewRoomPayload>({
-            action: Action.ViewRoom,
-            room_id: room.roomId,
-            metricsTrigger: "WebHorizontalBreadcrumbs",
-            metricsViaKeyboard: viaKeyboard,
-        });
-    };
-
-    public render(): React.ReactElement {
-        const tiles = BreadcrumbsStore.instance.rooms.map((r, i) => (
-            <RoomBreadcrumbTile
-                key={r.roomId}
-                room={r}
-                onClick={(ev: ButtonEvent) => this.viewRoom(r, i, ev.type !== "click")}
-            />
-        ));
-
-        if (tiles.length > 0) {
-            // NOTE: The CSSTransition timeout MUST match the timeout in our CSS!
-            return (
-                <CSSTransition
-                    appear={true}
-                    in={this.state.doAnimation}
-                    timeout={640}
-                    classNames="mx_RoomBreadcrumbs"
-                    nodeRef={this.toolbar}
-                >
-                    <Toolbar
-                        className="mx_RoomBreadcrumbs"
-                        aria-label={_t("room_list|breadcrumbs_label")}
-                        ref={this.toolbar}
-                    >
-                        {tiles.slice(this.state.skipFirst ? 1 : 0)}
-                    </Toolbar>
-                </CSSTransition>
-            );
-        } else {
-            return (
-                <div className="mx_RoomBreadcrumbs">
-                    <div className="mx_RoomBreadcrumbs_placeholder">{_t("room_list|breadcrumbs_empty")}</div>
-                </div>
-            );
-        }
-    }
-}
diff --git a/apps/web/test/unit-tests/components/views/rooms/RoomHeader/CallGuestLinkButton-test.tsx b/apps/web/src/components/views/rooms/RoomHeader/CallGuestLinkButton.test.tsx
similarity index 73%
rename from apps/web/test/unit-tests/components/views/rooms/RoomHeader/CallGuestLinkButton-test.tsx
rename to apps/web/src/components/views/rooms/RoomHeader/CallGuestLinkButton.test.tsx
index f4c1eee74f..dfb0f434cd 100644
--- a/apps/web/test/unit-tests/components/views/rooms/RoomHeader/CallGuestLinkButton-test.tsx
+++ b/apps/web/src/components/views/rooms/RoomHeader/CallGuestLinkButton.test.tsx
@@ -6,27 +6,27 @@ 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.
 */
 
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach, afterEach, type Mocked } from "vitest";
 import React from "react";
-import { fireEvent, getByLabelText, getByText, render, screen, waitFor } from "jest-matrix-react";
+import { fireEvent, getByLabelText, getByText, render, screen, waitFor } from "test-utils-rtl";
 import { type EventTimeline, JoinRule, Room } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
+import { getMockClientWithEventEmitter, mockClientMethodsUser, TestSDKContext } from "test-utils";
 
-import { SDKContext, SdkContextClass } from "../../../../../../src/contexts/SDKContext";
-import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../../../test-utils";
-import {
-    CallGuestLinkButton,
-    JoinRuleDialog,
-} from "../../../../../../src/components/views/rooms/RoomHeader/CallGuestLinkButton";
-import Modal from "../../../../../../src/Modal";
-import SdkConfig from "../../../../../../src/SdkConfig";
-import { ShareDialog } from "../../../../../../src/components/views/dialogs/ShareDialog";
-import { _t } from "../../../../../../src/languageHandler";
-import SettingsStore from "../../../../../../src/settings/SettingsStore";
+import { SDKContext } from "../../../../contexts/SDKContext";
+import { CallGuestLinkButton, JoinRuleDialog } from "./CallGuestLinkButton";
+import Modal from "../../../../Modal";
+import SdkConfig from "../../../../SdkConfig";
+import { ShareDialog } from "../../dialogs/ShareDialog";
+import { _t } from "../../../../languageHandler";
+import SettingsStore from "../../../../settings/SettingsStore";
 
 describe("<CallGuestLinkButton />", () => {
     const roomId = "!room:server.org";
-    let sdkContext!: SdkContextClass;
-    let modalSpy: jest.SpyInstance;
+    let sdkContext!: TestSDKContext;
+    let modalSpy: Mocked<any>;
     let modalResolve: (value: unknown[] | PromiseLike<unknown[]>) => void;
     let room: Room;
 
@@ -46,11 +46,11 @@ describe("<CallGuestLinkButton />", () => {
      */
     const makeRoom = (isVideoRoom = true): Room => {
         const room = new Room(roomId, sdkContext.client!, sdkContext.client!.getSafeUserId());
-        sdkContext.client!.getRoomDirectoryVisibility = jest.fn().mockResolvedValue("public");
-        jest.spyOn(room, "isElementVideoRoom").mockReturnValue(isVideoRoom);
+        sdkContext.client!.getRoomDirectoryVisibility = vi.fn().mockResolvedValue("public");
+        vi.spyOn(room, "isElementVideoRoom").mockReturnValue(isVideoRoom);
         // stub
-        jest.spyOn(room, "getPendingEvents").mockReturnValue([]);
-        jest.spyOn(room, "getVersion").mockReturnValue("9");
+        vi.spyOn(room, "getPendingEvents").mockReturnValue([]);
+        vi.spyOn(room, "getVersion").mockReturnValue("9");
         return room;
     };
     function mockRoomMembers(room: Room, count: number) {
@@ -63,7 +63,7 @@ describe("<CallGuestLinkButton />", () => {
             }));
 
         room.currentState.setJoinedMemberCount(members.length);
-        room.getJoinedMembers = jest.fn().mockReturnValue(members);
+        room.getJoinedMembers = vi.fn().mockReturnValue(members);
     }
 
     const getComponent = (room: Room) =>
@@ -75,28 +75,29 @@ describe("<CallGuestLinkButton />", () => {
     beforeEach(() => {
         const client = getMockClientWithEventEmitter({
             ...mockClientMethodsUser(),
-            sendStateEvent: jest.fn(),
+            sendStateEvent: vi.fn(),
+            getVisibleRooms: vi.fn().mockReturnValue([]),
         });
-        sdkContext = new SdkContextClass();
-        sdkContext.client = client;
+        sdkContext = new TestSDKContext();
+        sdkContext._client = client;
         const modalPromise = new Promise<unknown[]>((resolve) => {
             modalResolve = resolve;
         });
-        modalSpy = jest.spyOn(Modal, "createDialog").mockReturnValue({ finished: modalPromise, close: jest.fn() });
+        modalSpy = vi.spyOn(Modal, "createDialog").mockReturnValue({ finished: modalPromise, close: vi.fn() });
         room = makeRoom();
         mockRoomMembers(room, 3);
 
-        jest.spyOn(SdkConfig, "get").mockImplementation((key) => {
+        vi.spyOn(SdkConfig, "get").mockImplementation((key) => {
             if (key === "element_call") {
                 return { guest_spa_url: "https://guest_spa_url.com", url: "https://spa_url.com" };
             }
             return oldGet(key);
         });
-        jest.spyOn(room, "hasEncryptionStateEvent").mockReturnValue(true);
-        jest.spyOn(SdkContextClass.instance.roomViewStore, "isViewingCall").mockReturnValue(true);
+        vi.spyOn(room, "hasEncryptionStateEvent").mockReturnValue(true);
+        vi.spyOn(sdkContext.roomViewStore, "isViewingCall").mockReturnValue(true);
     });
     afterEach(() => {
-        jest.restoreAllMocks();
+        vi.restoreAllMocks();
     });
 
     it("shows the JoinRuleDialog on click with private join rules", async () => {
@@ -104,7 +105,7 @@ describe("<CallGuestLinkButton />", () => {
         fireEvent.click(screen.getByRole("button", { name: "Share call link" }));
         expect(modalSpy).toHaveBeenCalledWith(JoinRuleDialog, { room, canInvite: false });
         // pretend public was selected
-        jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Public);
+        vi.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Public);
         modalResolve([]);
         await new Promise(process.nextTick);
         const callParams = modalSpy.mock.calls[1];
@@ -115,7 +116,7 @@ describe("<CallGuestLinkButton />", () => {
     });
 
     it("shows the ShareDialog on click with public join rules", () => {
-        jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Public);
+        vi.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Public);
         getComponent(room);
         fireEvent.click(screen.getByRole("button", { name: "Share call link" }));
         const callParams = modalSpy.mock.calls[0];
@@ -126,8 +127,8 @@ describe("<CallGuestLinkButton />", () => {
     });
 
     it("shows the ShareDialog on click with knock join rules", () => {
-        jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Knock);
-        jest.spyOn(room, "canInvite").mockReturnValue(true);
+        vi.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Knock);
+        vi.spyOn(room, "canInvite").mockReturnValue(true);
         getComponent(room);
         fireEvent.click(screen.getByRole("button", { name: "Share call link" }));
         const callParams = modalSpy.mock.calls[0];
@@ -139,21 +140,21 @@ describe("<CallGuestLinkButton />", () => {
 
     it("don't show external conference button if room not public nor knock and the user cannot change join rules", () => {
         // preparation for if we refactor the related code to not use currentState.
-        jest.spyOn(room, "getLiveTimeline").mockReturnValue({
-            getState: jest.fn().mockReturnValue({
-                maySendStateEvent: jest.fn().mockReturnValue(false),
+        vi.spyOn(room, "getLiveTimeline").mockReturnValue({
+            getState: vi.fn().mockReturnValue({
+                maySendStateEvent: vi.fn().mockReturnValue(false),
             }),
         } as unknown as EventTimeline);
-        jest.spyOn(room.currentState, "maySendStateEvent").mockReturnValue(false);
+        vi.spyOn(room.currentState, "maySendStateEvent").mockReturnValue(false);
         getComponent(room);
         expect(screen.queryByLabelText("Share call link")).not.toBeInTheDocument();
     });
 
     it("don't show external conference button if now guest spa link is configured", () => {
-        jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Public);
-        jest.spyOn(SdkContextClass.instance.roomViewStore, "isViewingCall").mockReturnValue(true);
+        vi.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Public);
+        vi.spyOn(sdkContext.roomViewStore, "isViewingCall").mockReturnValue(true);
 
-        jest.spyOn(SdkConfig, "get").mockImplementation((key) => {
+        vi.spyOn(SdkConfig, "get").mockImplementation((key) => {
             if (key === "element_call") {
                 return { url: "https://example2.com" };
             }
@@ -165,7 +166,7 @@ describe("<CallGuestLinkButton />", () => {
         // configured so that the call link button is shown.
         expect(screen.queryByLabelText("Share call link")).not.toBeInTheDocument();
 
-        jest.spyOn(SdkConfig, "get").mockImplementation((key) => {
+        vi.spyOn(SdkConfig, "get").mockImplementation((key) => {
             if (key === "element_call") {
                 return { guest_spa_url: "https://guest_spa_url.com", url: "https://example2.com" };
             }
@@ -177,11 +178,11 @@ describe("<CallGuestLinkButton />", () => {
     });
 
     it("opens the share dialog with the correct share link in an encrypted room", () => {
-        jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Public);
-        jest.spyOn(SdkContextClass.instance.roomViewStore, "isViewingCall").mockReturnValue(true);
+        vi.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Public);
+        vi.spyOn(sdkContext.roomViewStore, "isViewingCall").mockReturnValue(true);
 
         getComponent(room);
-        const modalSpy = jest.spyOn(Modal, "createDialog");
+        const modalSpy = vi.spyOn(Modal, "createDialog");
         fireEvent.click(getByLabelText(document.body, _t("voip|get_call_link")));
         // const target =
         //     "https://guest_spa_url.com/room/#/!room:server.org?roomId=%21room%3Aserver.org&perParticipantE2EE=true&viaServers=example.org";
@@ -198,19 +199,19 @@ describe("<CallGuestLinkButton />", () => {
     });
 
     it("share dialog has correct link in an unencrypted room", () => {
-        jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Public);
-        jest.spyOn(room, "hasEncryptionStateEvent").mockReturnValue(false);
-        jest.spyOn(SdkContextClass.instance.roomViewStore, "isViewingCall").mockReturnValue(true);
+        vi.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Public);
+        vi.spyOn(room, "hasEncryptionStateEvent").mockReturnValue(false);
+        vi.spyOn(sdkContext.roomViewStore, "isViewingCall").mockReturnValue(true);
 
         getComponent(room);
-        const modalSpy = jest.spyOn(Modal, "createDialog");
+        const modalSpy = vi.spyOn(Modal, "createDialog");
         fireEvent.click(getByLabelText(document.body, _t("voip|get_call_link")));
         const arg1 = modalSpy.mock.calls[0][1] as any;
         expect(arg1.target.toString()).toEqual(targetUnencrypted);
     });
 
     describe("<JoinRuleDialog />", () => {
-        const onFinished = jest.fn();
+        const onFinished = vi.fn();
 
         const getComponent = (room: Room, canInvite: boolean = true) =>
             render(<JoinRuleDialog room={room} canInvite={canInvite} onFinished={onFinished} />, {
@@ -219,7 +220,7 @@ describe("<CallGuestLinkButton />", () => {
 
         beforeEach(() => {
             // feature_ask_to_join enabled
-            jest.spyOn(SettingsStore, "getValue").mockReturnValue(true);
+            vi.spyOn(SettingsStore, "getValue").mockReturnValue(true);
         });
 
         it("shows ask to join if feature is enabled", () => {
@@ -231,16 +232,15 @@ describe("<CallGuestLinkButton />", () => {
             expect(screen.queryByRole("radio", { name: "Ask to join ( Recommended )" })).not.toBeInTheDocument();
         });
         it("doesn't show ask to join if feature is disabled", () => {
-            jest.spyOn(SettingsStore, "getValue").mockReturnValue(false);
+            vi.spyOn(SettingsStore, "getValue").mockReturnValue(false);
             getComponent(room);
             expect(screen.queryByRole("radio", { name: "Ask to join ( Recommended )" })).not.toBeInTheDocument();
         });
 
         it("sends correct state event on click", async () => {
-            const sendStateSpy = jest.spyOn(sdkContext.client!, "sendStateEvent");
+            const sendStateSpy = vi.spyOn(sdkContext.client!, "sendStateEvent");
 
-            let container;
-            container = getComponent(room).container;
+            getComponent(room);
             fireEvent.click(screen.getByRole("radio", { name: "Ask to join ( Recommended )" }));
             expect(sendStateSpy).toHaveBeenCalledWith(
                 "!room:server.org",
@@ -253,7 +253,7 @@ describe("<CallGuestLinkButton />", () => {
             onFinished.mockClear();
             sendStateSpy.mockClear();
 
-            container = getComponent(room).container;
+            let container = getComponent(room).container;
             fireEvent.click(getByText(container, "Anyone"));
             expect(sendStateSpy).toHaveBeenLastCalledWith(
                 "!room:server.org",
diff --git a/apps/web/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx b/apps/web/src/components/views/rooms/RoomHeader/RoomHeader.test.tsx
similarity index 72%
rename from apps/web/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
rename to apps/web/src/components/views/rooms/RoomHeader/RoomHeader.test.tsx
index c997a65ae7..643fc0eea2 100644
--- a/apps/web/test/unit-tests/components/views/rooms/RoomHeader/RoomHeader-test.tsx
+++ b/apps/web/src/components/views/rooms/RoomHeader/RoomHeader.test.tsx
@@ -7,6 +7,10 @@ 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.
 */
 
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach, afterEach, type Mocked } from "vitest";
+
 import React from "react";
 import { CallType, type MatrixCall } from "matrix-js-sdk/src/webrtc/call";
 import {
@@ -18,6 +22,7 @@ import {
     RoomStateEvent,
     RoomMember,
     type MatrixClient,
+    ClientEvent,
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { CryptoEvent, UserVerificationStatus } from "matrix-js-sdk/src/crypto-api";
@@ -33,40 +38,41 @@ import {
     type RenderOptions,
     screen,
     waitFor,
-} from "jest-matrix-react";
+} from "test-utils-rtl";
 import { type ViewRoomOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/RoomViewLifecycle";
-import { mocked } from "jest-mock";
 import userEvent from "@testing-library/user-event";
+import { filterConsole, setupAsyncStoreWithClient, stubClient } from "test-utils";
 
-import { filterConsole, setupAsyncStoreWithClient, stubClient } from "../../../../../test-utils";
-import RoomHeader from "../../../../../../src/components/views/rooms/RoomHeader/RoomHeader";
-import DMRoomMap from "../../../../../../src/utils/DMRoomMap";
-import { MatrixClientPeg } from "../../../../../../src/MatrixClientPeg";
-import { ScopedRoomContextProvider } from "../../../../../../src/contexts/ScopedRoomContext";
-import RoomContext, { type RoomContextType } from "../../../../../../src/contexts/RoomContext";
-import RightPanelStore from "../../../../../../src/stores/right-panel/RightPanelStore";
-import { RightPanelPhases } from "../../../../../../src/stores/right-panel/RightPanelStorePhases";
-import LegacyCallHandler from "../../../../../../src/LegacyCallHandler";
-import SettingsStore from "../../../../../../src/settings/SettingsStore";
-import SdkConfig from "../../../../../../src/SdkConfig";
-import dispatcher from "../../../../../../src/dispatcher/dispatcher";
-import { CallStore } from "../../../../../../src/stores/CallStore";
-import { type Call } from "../../../../../../src/models/Call";
-import * as ShieldUtils from "../../../../../../src/utils/ShieldUtils";
-import { WidgetLayoutStore } from "../../../../../../src/stores/widgets/WidgetLayoutStore";
-import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
-import { _t } from "../../../../../../src/languageHandler";
-import WidgetStore, { type IApp } from "../../../../../../src/stores/WidgetStore";
-import { UIFeature } from "../../../../../../src/settings/UIFeature";
-import { SettingLevel } from "../../../../../../src/settings/SettingLevel";
-import { ElementCallMemberEventType } from "../../../../../../src/call-types";
+import RoomHeader from "./RoomHeader";
+import DMRoomMap from "../../../../utils/DMRoomMap";
+import { MatrixClientPeg } from "../../../../MatrixClientPeg";
+import { ScopedRoomContextProvider } from "../../../../contexts/ScopedRoomContext";
+import RoomContext, { type RoomContextType } from "../../../../contexts/RoomContext";
+import RightPanelStore from "../../../../stores/right-panel/RightPanelStore";
+import { RightPanelPhases } from "../../../../stores/right-panel/RightPanelStorePhases";
+import SettingsStore from "../../../../settings/SettingsStore";
+import SdkConfig from "../../../../SdkConfig";
+import dispatcher from "../../../../dispatcher/dispatcher";
+import { CallStore } from "../../../../stores/CallStore";
+import { type Call } from "../../../../models/Call";
+import * as ShieldUtils from "../../../../utils/ShieldUtils";
+import { WidgetLayoutStore } from "../../../../stores/widgets/WidgetLayoutStore";
+import MatrixClientContext from "../../../../contexts/MatrixClientContext";
+import { _t } from "../../../../languageHandler";
+import WidgetStore, { type IApp } from "../../../../stores/WidgetStore";
+import { UIFeature } from "../../../../settings/UIFeature";
+import { SettingLevel } from "../../../../settings/SettingLevel";
+import { ElementCallMemberEventType } from "../../../../call-types";
+import { SDKContext } from "../../../../contexts/SDKContext";
+import { SDKContextClass } from "../../../../contexts/SDKContextClass.ts";
 
-jest.mock("../../../../../../src/utils/ShieldUtils");
-jest.mock("../../../../../../src/hooks/right-panel/useCurrentPhase", () => ({
+vi.mock("../../../../utils/ShieldUtils");
+vi.mock("../../../../hooks/right-panel/useCurrentPhase", () => ({
     useCurrentPhase: () => {
         return { currentPhase: "foo", isOpen: false };
     },
 }));
+vi.mock("../../../../Modal");
 
 describe("RoomHeader", () => {
     filterConsole(
@@ -77,13 +83,13 @@ describe("RoomHeader", () => {
     let room: Room;
     const ROOM_ID = "!1:example.org";
 
-    let setCardSpy: jest.SpyInstance | undefined;
+    let setCardSpy: Mocked<RightPanelStore["setCard"]> | undefined;
 
     const mockRoomViewStore = {
-        isViewingCall: jest.fn().mockReturnValue(false),
-        on: jest.fn(),
-        off: jest.fn(),
-        emit: jest.fn(),
+        isViewingCall: vi.fn().mockReturnValue(false),
+        on: vi.fn(),
+        off: vi.fn(),
+        emit: vi.fn(),
     };
 
     let client: MatrixClient;
@@ -93,9 +99,11 @@ describe("RoomHeader", () => {
     function getWrapper(): RenderOptions {
         return {
             wrapper: ({ children }) => (
-                <MatrixClientContext.Provider value={client}>
-                    <ScopedRoomContextProvider {...roomContext}>{children}</ScopedRoomContextProvider>
-                </MatrixClientContext.Provider>
+                <SDKContext.Provider value={SDKContextClass.instance}>
+                    <MatrixClientContext.Provider value={client}>
+                        <ScopedRoomContextProvider {...roomContext}>{children}</ScopedRoomContextProvider>
+                    </MatrixClientContext.Provider>
+                </SDKContext.Provider>
             ),
         };
     }
@@ -106,15 +114,15 @@ describe("RoomHeader", () => {
             pendingEventOrdering: PendingEventOrdering.Detached,
         });
         DMRoomMap.setShared({
-            getUserIdForRoomId: jest.fn(),
+            getUserIdForRoomId: vi.fn(),
         } as unknown as DMRoomMap);
 
-        setCardSpy = jest.spyOn(RightPanelStore.instance, "setCard");
-        jest.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(ShieldUtils.E2EStatus.Normal);
+        setCardSpy = vi.spyOn(RightPanelStore.instance, "setCard");
+        vi.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(ShieldUtils.E2EStatus.Normal);
 
         // Mock CallStore.instance.getCall to return null by default
         // Individual tests can override this when they need a specific Call object
-        jest.spyOn(CallStore.instance, "getCall").mockReturnValue(null);
+        vi.spyOn(CallStore.instance, "getCall").mockReturnValue(null);
 
         // Reset the mock RoomViewStore
         mockRoomViewStore.isViewingCall.mockReturnValue(false);
@@ -128,7 +136,7 @@ describe("RoomHeader", () => {
     });
 
     afterEach(() => {
-        jest.restoreAllMocks();
+        vi.resetAllMocks();
         SettingsStore.reset();
     });
 
@@ -186,7 +194,7 @@ describe("RoomHeader", () => {
             },
         ];
         room.currentState.setJoinedMemberCount(members.length);
-        room.getJoinedMembers = jest.fn().mockReturnValue(members);
+        room.getJoinedMembers = vi.fn().mockReturnValue(members);
 
         const { container } = render(<RoomHeader room={room} />, getWrapper());
 
@@ -218,7 +226,7 @@ describe("RoomHeader", () => {
 
     it("opens the notifications panel", async () => {
         const user = userEvent.setup();
-        SettingsStore.setValue("feature_notifications", null, SettingLevel.DEVICE, true);
+        await SettingsStore.setValue("feature_notifications", null, SettingLevel.DEVICE, true);
 
         render(<RoomHeader room={room} />, getWrapper());
 
@@ -238,7 +246,7 @@ describe("RoomHeader", () => {
 
     it("should not show voice call button in managed hybrid environments", async () => {
         mockRoomMembers(room, 2);
-        jest.spyOn(SdkConfig, "get").mockReturnValue({ widget_build_url: "https://widget.build.url" });
+        vi.spyOn(SdkConfig, "get").mockReturnValue({ widget_build_url: "https://widget.build.url" });
         render(<RoomHeader room={room} />, getWrapper());
 
         const videoButton = screen.getByRole("button", { name: "Video call" });
@@ -266,7 +274,7 @@ describe("RoomHeader", () => {
 
         afterEach(() => {
             SdkConfig.reset();
-            jest.restoreAllMocks();
+            vi.restoreAllMocks();
         });
 
         it("should not show call buttons in rooms smaller than 3 members", async () => {
@@ -365,7 +373,7 @@ describe("RoomHeader", () => {
             expect(voiceButton).not.toHaveAttribute("aria-disabled", "true");
             expect(videoButton).not.toHaveAttribute("aria-disabled", "true");
 
-            const placeCallSpy = jest.spyOn(LegacyCallHandler.instance, "placeCall");
+            const placeCallSpy = vi.spyOn(SDKContextClass.instance.legacyCallHandler, "placeCall");
 
             await user.click(voiceButton);
             expect(placeCallSpy).toHaveBeenLastCalledWith(room.roomId, CallType.Voice);
@@ -376,7 +384,7 @@ describe("RoomHeader", () => {
 
         it("you can't call if there's already a call", () => {
             mockRoomMembers(room, 2);
-            jest.spyOn(LegacyCallHandler.instance, "getCallForRoom").mockReturnValue(
+            vi.spyOn(SDKContextClass.instance.legacyCallHandler, "getCallForRoom").mockReturnValue(
                 // The JS-SDK does not export the class `MatrixCall` only the type
                 {} as MatrixCall,
             );
@@ -388,7 +396,7 @@ describe("RoomHeader", () => {
 
         it("can call in large rooms if able to edit widgets", () => {
             mockRoomMembers(room, 10);
-            jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
+            vi.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
             render(<RoomHeader room={room} />, getWrapper());
 
             const videoCallButton = screen.getByRole("button", { name: "Video call" });
@@ -397,7 +405,7 @@ describe("RoomHeader", () => {
 
         it("disable calls in large rooms by default", () => {
             mockRoomMembers(room, 10);
-            jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(false);
+            vi.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(false);
             render(<RoomHeader room={room} />, getWrapper());
             expect(
                 getByLabelText(document.body, "You do not have permission to start video calls", {
@@ -409,13 +417,9 @@ describe("RoomHeader", () => {
 
     describe("group call enabled", () => {
         beforeEach(async () => {
-            SdkConfig.put({
-                features: {
-                    feature_group_calls: true,
-                },
-            });
+            SdkConfig.put({});
             // Enable Element Call
-            client._unstable_getRTCTransports = jest
+            client._unstable_getRTCTransports = vi
                 .fn()
                 .mockResolvedValue([{ type: "livekit", livekit_service_url: "https://example.org" }]);
             // And ensure the CallStore has the transports configured.
@@ -424,7 +428,7 @@ describe("RoomHeader", () => {
 
         afterEach(() => {
             SdkConfig.reset();
-            jest.restoreAllMocks();
+            vi.restoreAllMocks();
         });
 
         it("renders only the video call element", async () => {
@@ -436,7 +440,7 @@ describe("RoomHeader", () => {
                 },
             });
             // allow element calls
-            jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
+            vi.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
 
             render(<RoomHeader room={room} />, getWrapper());
 
@@ -445,7 +449,7 @@ describe("RoomHeader", () => {
             const videoCallButton = screen.getByRole("button", { name: "Video call" });
             expect(videoCallButton).not.toHaveAttribute("aria-disabled", "true");
 
-            const dispatcherSpy = jest.spyOn(dispatcher, "dispatch").mockImplementation();
+            const dispatcherSpy = vi.spyOn(dispatcher, "dispatch").mockImplementation(() => {});
 
             await user.click(videoCallButton);
             expect(dispatcherSpy).toHaveBeenCalledWith(expect.objectContaining({ view_call: true }));
@@ -458,15 +462,15 @@ describe("RoomHeader", () => {
                 },
             });
             // allow element calls
-            jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
-            jest.spyOn(WidgetLayoutStore.instance, "isInContainer").mockReturnValue(true);
+            vi.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
+            vi.spyOn(WidgetLayoutStore.instance, "isInContainer").mockReturnValue(true);
             const widget = { type: "m.jitsi" } as IApp;
-            jest.spyOn(CallStore.instance, "getCall").mockReturnValue({
+            vi.spyOn(CallStore.instance, "getCall").mockReturnValue({
                 widget,
                 on: () => {},
                 off: () => {},
             } as unknown as Call);
-            jest.spyOn(WidgetStore.instance, "getApps").mockReturnValue([widget]);
+            vi.spyOn(WidgetStore.instance, "getApps").mockReturnValue([widget]);
             render(<RoomHeader room={room} />, getWrapper());
             // Voice and video
             for (const button of screen.getAllByRole("button", { name: "Ongoing call" })) {
@@ -478,25 +482,23 @@ describe("RoomHeader", () => {
             const user = userEvent.setup();
             mockRoomMembers(room, 3);
             SdkConfig.add({
+                element_call: { disable: true }, // This test is about Jitsi widget re-pinning, not Element Call
                 setting_defaults: {
                     [UIFeature.Widgets]: true,
                 },
-                features: {
-                    feature_group_calls: false,
-                },
             });
             // allow calls
-            jest.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
-            jest.spyOn(WidgetLayoutStore.instance, "isInContainer").mockReturnValue(false);
-            const spy = jest.spyOn(WidgetLayoutStore.instance, "moveToContainer");
+            vi.spyOn(room.currentState, "mayClientSendStateEvent").mockReturnValue(true);
+            vi.spyOn(WidgetLayoutStore.instance, "isInContainer").mockReturnValue(false);
+            const spy = vi.spyOn(WidgetLayoutStore.instance, "moveToContainer");
 
             const widget = { type: "m.jitsi" } as IApp;
-            jest.spyOn(CallStore.instance, "getCall").mockReturnValue({
+            vi.spyOn(CallStore.instance, "getCall").mockReturnValue({
                 widget,
                 on: () => {},
                 off: () => {},
             } as unknown as Call);
-            jest.spyOn(WidgetStore.instance, "getApps").mockReturnValue([widget]);
+            vi.spyOn(WidgetStore.instance, "getApps").mockReturnValue([widget]);
 
             render(<RoomHeader room={room} />, getWrapper());
 
@@ -508,7 +510,7 @@ describe("RoomHeader", () => {
 
         it("disables calling if there's a jitsi call", () => {
             mockRoomMembers(room, 2);
-            jest.spyOn(LegacyCallHandler.instance, "getCallForRoom").mockReturnValue(
+            vi.spyOn(SDKContextClass.instance.legacyCallHandler, "getCallForRoom").mockReturnValue(
                 // The JS-SDK does not export the class `MatrixCall` only the type
                 {} as MatrixCall,
             );
@@ -521,7 +523,7 @@ describe("RoomHeader", () => {
         it("calls using legacy or jitsi", async () => {
             const user = userEvent.setup();
             mockRoomMembers(room, 2);
-            jest.spyOn(room.currentState, "mayClientSendStateEvent").mockImplementation((key) => {
+            vi.spyOn(room.currentState, "mayClientSendStateEvent").mockImplementation((key) => {
                 if (key === "im.vector.modular.widgets") return true;
                 return false;
             });
@@ -532,7 +534,7 @@ describe("RoomHeader", () => {
             expect(voiceButton).not.toHaveAttribute("aria-disabled", "true");
             expect(videoButton).not.toHaveAttribute("aria-disabled", "true");
 
-            const placeCallSpy = jest.spyOn(LegacyCallHandler.instance, "placeCall");
+            const placeCallSpy = vi.spyOn(SDKContextClass.instance.legacyCallHandler, "placeCall");
             await user.click(voiceButton);
             expect(placeCallSpy).toHaveBeenLastCalledWith(room.roomId, CallType.Voice);
 
@@ -544,7 +546,7 @@ describe("RoomHeader", () => {
             const user = userEvent.setup();
             mockRoomMembers(room, 3);
 
-            jest.spyOn(room.currentState, "mayClientSendStateEvent").mockImplementation((key) => {
+            vi.spyOn(room.currentState, "mayClientSendStateEvent").mockImplementation((key) => {
                 if (key === "im.vector.modular.widgets") return true;
                 return false;
             });
@@ -554,7 +556,7 @@ describe("RoomHeader", () => {
             const videoButton = screen.getByRole("button", { name: "Video call" });
             expect(videoButton).not.toHaveAttribute("aria-disabled", "true");
 
-            const placeCallSpy = jest.spyOn(LegacyCallHandler.instance, "placeCall");
+            const placeCallSpy = vi.spyOn(SDKContextClass.instance.legacyCallHandler, "placeCall");
             await user.click(videoButton);
             expect(placeCallSpy).toHaveBeenLastCalledWith(room.roomId, CallType.Video);
         });
@@ -563,7 +565,7 @@ describe("RoomHeader", () => {
             const user = userEvent.setup();
             mockRoomMembers(room, 3);
 
-            jest.spyOn(room.currentState, "mayClientSendStateEvent").mockImplementation((key) => {
+            vi.spyOn(room.currentState, "mayClientSendStateEvent").mockImplementation((key) => {
                 if (key === ElementCallMemberEventType.name) return true;
                 return false;
             });
@@ -573,7 +575,7 @@ describe("RoomHeader", () => {
             const videoButton = screen.getByRole("button", { name: "Video call" });
             expect(videoButton).not.toHaveAttribute("aria-disabled", "true");
 
-            const dispatcherSpy = jest.spyOn(dispatcher, "dispatch").mockImplementation();
+            const dispatcherSpy = vi.spyOn(dispatcher, "dispatch").mockImplementation(() => {});
             await user.click(videoButton);
             expect(dispatcherSpy).toHaveBeenCalledWith(expect.objectContaining({ view_call: true }));
         });
@@ -581,7 +583,7 @@ describe("RoomHeader", () => {
         it("buttons are disabled if there is an ongoing call", async () => {
             mockRoomMembers(room, 3);
 
-            jest.spyOn(CallStore.prototype, "connectedCalls", "get").mockReturnValue(
+            vi.spyOn(CallStore.prototype, "connectedCalls", "get").mockReturnValue(
                 new Set([{ roomId: "some_other_room" } as Call]),
             );
             const { container } = render(<RoomHeader room={room} />, getWrapper());
@@ -594,7 +596,7 @@ describe("RoomHeader", () => {
         it("join video call button is shown if there is an ongoing call", async () => {
             mockRoomMembers(room, 3);
             // Mock CallStore to return a call with 3 participants
-            jest.spyOn(CallStore.instance, "getCall").mockReturnValue(createMockCall(ROOM_ID, 3));
+            vi.spyOn(CallStore.instance, "getCall").mockReturnValue(createMockCall(ROOM_ID, 3));
             render(<RoomHeader room={room} />, getWrapper());
             const joinButton = getByLabelText(document.body, "Join video call");
             expect(joinButton).not.toHaveAttribute("aria-disabled", "true");
@@ -603,17 +605,41 @@ describe("RoomHeader", () => {
         it("join voice call button is shown if there is an ongoing call", async () => {
             mockRoomMembers(room, 3);
             // Mock CallStore to return a call with 3 participants
-            jest.spyOn(CallStore.instance, "getCall").mockReturnValue(createMockCall(ROOM_ID, 3, CallType.Voice));
+            vi.spyOn(CallStore.instance, "getCall").mockReturnValue(createMockCall(ROOM_ID, 3, CallType.Voice));
             render(<RoomHeader room={room} />, getWrapper());
             const joinButton = getByLabelText(document.body, "Join voice call");
             expect(joinButton).not.toHaveAttribute("aria-disabled", "true");
         });
 
+        it("clicking the join button of an ongoing video call joins as a video call", async () => {
+            const user = userEvent.setup();
+            mockRoomMembers(room, 3);
+            vi.spyOn(CallStore.instance, "getCall").mockReturnValue(createMockCall(ROOM_ID, 3, CallType.Video, true));
+            render(<RoomHeader room={room} />, getWrapper());
+
+            const dispatcherSpy = vi.spyOn(dispatcher, "dispatch").mockImplementation(() => {});
+            await user.click(getByLabelText(document.body, "Join video call"));
+
+            expect(dispatcherSpy).toHaveBeenCalledWith(expect.objectContaining({ view_call: true, voiceOnly: false }));
+        });
+
+        it("clicking the join button of an ongoing voice call joins as a voice call", async () => {
+            const user = userEvent.setup();
+            mockRoomMembers(room, 3);
+            vi.spyOn(CallStore.instance, "getCall").mockReturnValue(createMockCall(ROOM_ID, 3, CallType.Voice, true));
+            render(<RoomHeader room={room} />, getWrapper());
+
+            const dispatcherSpy = vi.spyOn(dispatcher, "dispatch").mockImplementation(() => {});
+            await user.click(getByLabelText(document.body, "Join voice call"));
+
+            expect(dispatcherSpy).toHaveBeenCalledWith(expect.objectContaining({ view_call: true, voiceOnly: true }));
+        });
+
         it("join button is disabled if there is an other ongoing call", async () => {
             mockRoomMembers(room, 3);
             // Mock CallStore to return a call with 3 participants
-            jest.spyOn(CallStore.instance, "getCall").mockReturnValue(createMockCall(ROOM_ID, 3));
-            jest.spyOn(CallStore.prototype, "connectedCalls", "get").mockReturnValue(
+            vi.spyOn(CallStore.instance, "getCall").mockReturnValue(createMockCall(ROOM_ID, 3));
+            vi.spyOn(CallStore.prototype, "connectedCalls", "get").mockReturnValue(
                 new Set([{ roomId: "some_other_room" } as Call]),
             );
             render(<RoomHeader room={room} />, getWrapper());
@@ -627,22 +653,22 @@ describe("RoomHeader", () => {
 
             mockRoomViewStore.isViewingCall.mockReturnValue(true);
             render(<RoomHeader room={room} />, getWrapper());
-            getByLabelText(document.body, "Close lobby");
+            expect(getByLabelText(document.body, "Close lobby")).toBeVisible();
         });
 
         it("close lobby button is shown if there is an ongoing call but we are viewing the lobby", async () => {
             mockRoomMembers(room, 3);
             // Mock CallStore to return a call with 3 participants
-            jest.spyOn(CallStore.instance, "getCall").mockReturnValue(createMockCall(ROOM_ID, 3));
+            vi.spyOn(CallStore.instance, "getCall").mockReturnValue(createMockCall(ROOM_ID, 3));
             mockRoomViewStore.isViewingCall.mockReturnValue(true);
 
             render(<RoomHeader room={room} />, getWrapper());
-            getByLabelText(document.body, "Close lobby");
+            expect(getByLabelText(document.body, "Close lobby")).toBeVisible();
         });
 
         it("don't show external conference button if the call is not shown", () => {
             mockRoomViewStore.isViewingCall.mockReturnValue(false);
-            jest.spyOn(SdkConfig, "get").mockImplementation((key) => {
+            vi.spyOn(SdkConfig, "get").mockImplementation((key) => {
                 return { guest_spa_url: "https://guest_spa_url.com", url: "https://spa_url.com" };
             });
             render(<RoomHeader room={room} />, getWrapper());
@@ -658,7 +684,7 @@ describe("RoomHeader", () => {
         it("gives the option of element call or legacy calling for video", async () => {
             const user = userEvent.setup();
             mockRoomMembers(room, 2);
-            jest.spyOn(room.currentState, "mayClientSendStateEvent").mockImplementation((key) => {
+            vi.spyOn(room.currentState, "mayClientSendStateEvent").mockImplementation((key) => {
                 if (key === ElementCallMemberEventType.name) return true;
                 return false;
             });
@@ -675,7 +701,7 @@ describe("RoomHeader", () => {
         it("gives the option of element call or legacy calling for voice in DM rooms", async () => {
             const user = userEvent.setup();
             mockRoomMembers(room, 2);
-            jest.spyOn(room.currentState, "mayClientSendStateEvent").mockImplementation((key) => {
+            vi.spyOn(room.currentState, "mayClientSendStateEvent").mockImplementation((key) => {
                 if (key === ElementCallMemberEventType.name) return true;
                 return false;
             });
@@ -708,8 +734,19 @@ describe("RoomHeader", () => {
         });
     });
 
+    it("does not show a user status for non-DM rooms", async () => {
+        await SettingsStore.setValue("feature_user_status", null, SettingLevel.DEVICE, true);
+        vi.mocked(client.doesServerSupportExtendedProfiles).mockResolvedValue(true);
+        vi.mocked(client.getExtendedProfileProperty).mockResolvedValue({ emoji: "🐎", text: "on a horse" });
+
+        render(<RoomHeader room={room} />, getWrapper());
+
+        expect(screen.queryByText("on a horse")).not.toBeInTheDocument();
+        expect(client.doesServerSupportExtendedProfiles).not.toHaveBeenCalled();
+    });
+
     it("shows a history icon if the room is encrypted and has shared history", async () => {
-        mocked(client.getCrypto()!).isEncryptionEnabledInRoom.mockResolvedValue(true);
+        vi.mocked(client.getCrypto()!).isEncryptionEnabledInRoom.mockResolvedValue(true);
         await room.addLiveEvents(
             [
                 new MatrixEvent({
@@ -724,11 +761,11 @@ describe("RoomHeader", () => {
         );
 
         render(<RoomHeader room={room} />, getWrapper());
-        await waitFor(() => getByLabelText(document.body, "New members see history"));
+        await waitFor(() => expect(getByLabelText(document.body, "New members see history")).toBeVisible());
     });
 
     it("shows a user icon if the room is encrypted and has world readable history", async () => {
-        mocked(client.getCrypto()!).isEncryptionEnabledInRoom.mockResolvedValue(true);
+        vi.mocked(client.getCrypto()!).isEncryptionEnabledInRoom.mockResolvedValue(true);
         await room.addLiveEvents(
             [
                 new MatrixEvent({
@@ -743,17 +780,17 @@ describe("RoomHeader", () => {
         );
 
         render(<RoomHeader room={room} />, getWrapper());
-        await waitFor(() => getByLabelText(document.body, "Anyone can see history"));
+        await waitFor(() => expect(getByLabelText(document.body, "Anyone can see history")).toBeVisible());
     });
 
     describe("dm", () => {
         beforeEach(() => {
             // Make the mocked room a DM
-            mocked(DMRoomMap.shared().getUserIdForRoomId).mockImplementation((roomId) => {
+            vi.mocked(DMRoomMap.shared().getUserIdForRoomId).mockImplementation((roomId) => {
                 if (roomId === room.roomId) return "@user:example.com";
             });
-            room.getMember = jest.fn((userId) => new RoomMember(room.roomId, userId));
-            room.getJoinedMembers = jest.fn().mockReturnValue([
+            room.getMember = vi.fn((userId) => new RoomMember(room.roomId, userId));
+            room.getJoinedMembers = vi.fn().mockReturnValue([
                 {
                     userId: "@me:example.org",
                     name: "Member",
@@ -783,13 +820,49 @@ describe("RoomHeader", () => {
             [ShieldUtils.E2EStatus.Verified, "Verified"],
             [ShieldUtils.E2EStatus.Warning, "Untrusted"],
         ])("shows the %s icon", async (value: ShieldUtils.E2EStatus, expectedLabel: string) => {
-            jest.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(value);
+            vi.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(value);
 
             render(<RoomHeader room={room} />, getWrapper());
 
             await waitFor(() => expect(getByLabelText(document.body, expectedLabel)).toBeInTheDocument());
         });
 
+        it("shows the user status", async () => {
+            await SettingsStore.setValue("feature_user_status", null, SettingLevel.DEVICE, true);
+            vi.mocked(client.doesServerSupportExtendedProfiles).mockResolvedValue(true);
+            vi.mocked(client.getExtendedProfileProperty).mockResolvedValue({ emoji: "🐎", text: "on a horse" });
+
+            render(<RoomHeader room={room} />, getWrapper());
+
+            await waitFor(() => expect(screen.getByText("on a horse")).toBeInTheDocument());
+            expect(screen.getByText("🐎")).toBeInTheDocument();
+        });
+
+        it("updates user status when it changes", async () => {
+            await SettingsStore.setValue("feature_user_status", null, SettingLevel.DEVICE, true);
+            vi.mocked(client.doesServerSupportExtendedProfiles).mockResolvedValue(true);
+            vi.mocked(client.getExtendedProfileProperty).mockResolvedValue({ emoji: "🐎", text: "on a horse" });
+
+            render(<RoomHeader room={room} />, getWrapper());
+
+            vi.mocked(client.getExtendedProfileProperty).mockResolvedValue({ emoji: "🐴", text: "is a horse" });
+            client.emit(ClientEvent.UserProfileUpdate, "@bob:example.org", { emoji: "🐴", text: "is a horse" });
+
+            await waitFor(() => expect(screen.getByText("is a horse")).toBeInTheDocument());
+            expect(screen.getByText("🐴")).toBeInTheDocument();
+        });
+
+        it("does not show the user status when the feature is disabled", async () => {
+            await SettingsStore.setValue("feature_user_status", null, SettingLevel.DEVICE, false);
+            vi.mocked(client.doesServerSupportExtendedProfiles).mockResolvedValue(true);
+            vi.mocked(client.getExtendedProfileProperty).mockResolvedValue({ emoji: "🐎", text: "on a horse" });
+
+            render(<RoomHeader room={room} />, getWrapper());
+
+            expect(screen.queryByText("on a horse")).not.toBeInTheDocument();
+            expect(client.doesServerSupportExtendedProfiles).not.toHaveBeenCalled();
+        });
+
         it("does not show the face pile for DMs", () => {
             SdkConfig.put({
                 features: {
@@ -803,12 +876,12 @@ describe("RoomHeader", () => {
 
         it("updates the icon when the encryption status changes", async () => {
             // The room starts verified
-            jest.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(ShieldUtils.E2EStatus.Verified);
+            vi.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(ShieldUtils.E2EStatus.Verified);
             render(<RoomHeader room={room} />, getWrapper());
             await waitFor(() => expect(getByLabelText(document.body, "Verified")).toBeInTheDocument());
 
             // A new member joins, and the room becomes unverified
-            jest.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(ShieldUtils.E2EStatus.Warning);
+            vi.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(ShieldUtils.E2EStatus.Warning);
             act(() => {
                 room.emit(
                     RoomStateEvent.Members,
@@ -829,7 +902,7 @@ describe("RoomHeader", () => {
             await waitFor(() => expect(getByLabelText(document.body, "Untrusted")).toBeInTheDocument());
 
             // The user becomes verified
-            jest.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(ShieldUtils.E2EStatus.Verified);
+            vi.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(ShieldUtils.E2EStatus.Verified);
             act(() => {
                 MatrixClientPeg.get()!.emit(
                     CryptoEvent.UserTrustStatusChanged,
@@ -840,7 +913,7 @@ describe("RoomHeader", () => {
             await waitFor(() => expect(getByLabelText(document.body, "Verified")).toBeInTheDocument());
 
             // An unverified device is added
-            jest.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(ShieldUtils.E2EStatus.Warning);
+            vi.spyOn(ShieldUtils, "shieldStatusForRoom").mockResolvedValue(ShieldUtils.E2EStatus.Warning);
             act(() => {
                 MatrixClientPeg.get()!.emit(CryptoEvent.DevicesUpdated, ["@alice:example.org"], false);
             });
@@ -862,7 +935,7 @@ describe("RoomHeader", () => {
     });
 
     it("calls onClick-callback on legacyAdditionalButtons", () => {
-        const callback = jest.fn();
+        const callback = vi.fn();
         const additionalButtons: ViewRoomOpts["buttons"] = [
             {
                 icon: () => <>test-icon</>,
@@ -876,7 +949,7 @@ describe("RoomHeader", () => {
 
         const button = screen.getByRole("button", { name: "test-label" });
         const event = createEvent.click(button);
-        event.stopPropagation = jest.fn();
+        event.stopPropagation = vi.fn();
         fireEvent(button, event);
 
         expect(callback).toHaveBeenCalled();
@@ -891,11 +964,11 @@ describe("RoomHeader", () => {
     });
 
     describe("ask to join enabled", () => {
-        it("does render the RoomKnocksBar", () => {
-            SettingsStore.setValue("feature_ask_to_join", null, SettingLevel.DEVICE, true);
-            jest.spyOn(room, "canInvite").mockReturnValue(true);
-            jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Knock);
-            jest.spyOn(room, "getMembersWithMembership").mockReturnValue([new RoomMember(room.roomId, "@foo")]);
+        it("does render the RoomKnocksBar", async () => {
+            await SettingsStore.setValue("feature_ask_to_join", null, SettingLevel.DEVICE, true);
+            vi.spyOn(room, "canInvite").mockReturnValue(true);
+            vi.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Knock);
+            vi.spyOn(room, "getMembersWithMembership").mockReturnValue([new RoomMember(room.roomId, "@foo")]);
 
             render(<RoomHeader room={room} />, getWrapper());
             expect(screen.getByRole("heading", { name: "Asking to join" })).toBeInTheDocument();
@@ -906,7 +979,7 @@ describe("RoomHeader", () => {
         const user = userEvent.setup();
         render(<RoomHeader room={room} />, getWrapper());
 
-        const dispatcherSpy = jest.spyOn(dispatcher, "dispatch");
+        const dispatcherSpy = vi.spyOn(dispatcher, "dispatch");
         await user.click(getByLabelText(document.body, "Open room settings"));
         expect(dispatcherSpy).toHaveBeenCalledWith(expect.objectContaining({ action: "open_room_settings" }));
     });
@@ -919,6 +992,7 @@ function createMockCall(
     roomId: string = "!1:example.org",
     participantCount: number = 0,
     callType: CallType = CallType.Video,
+    isElementCall: boolean = false,
 ): Call {
     const participants = new Map();
 
@@ -936,12 +1010,12 @@ function createMockCall(
     return {
         roomId,
         participants,
-        widget: { id: "test-widget" },
+        widget: { id: "test-widget", type: isElementCall ? "m.call" : undefined },
         connectionState: "disconnected",
         callType,
-        on: jest.fn(),
-        off: jest.fn(),
-        emit: jest.fn(),
+        on: vi.fn(),
+        off: vi.fn(),
+        emit: vi.fn(),
     } as unknown as Call;
 }
 
@@ -963,5 +1037,5 @@ function mockRoomMembers(room: Room, count: number) {
         }));
 
     room.currentState.setJoinedMemberCount(members.length);
-    room.getJoinedMembers = jest.fn().mockReturnValue(members);
+    room.getJoinedMembers = vi.fn().mockReturnValue(members);
 }
diff --git a/apps/web/src/components/views/rooms/RoomHeader/RoomHeader.tsx b/apps/web/src/components/views/rooms/RoomHeader/RoomHeader.tsx
index d16ed4b8e3..8353d3aa0d 100644
--- a/apps/web/src/components/views/rooms/RoomHeader/RoomHeader.tsx
+++ b/apps/web/src/components/views/rooms/RoomHeader/RoomHeader.tsx
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX, useCallback, useState } from "react";
+import React, { type JSX, useCallback, useContext, useState } from "react";
 import { Text, Button, IconButton, Menu, MenuItem, Tooltip } from "@vector-im/compound-web";
 import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid";
 import VoiceCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/voice-call-solid";
@@ -20,16 +20,15 @@ import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-
 import PublicIcon from "@vector-im/compound-design-tokens/assets/web/icons/public";
 import { HistoryVisibility, JoinRule, type Room } from "matrix-js-sdk/src/matrix";
 import { type ViewRoomOpts } from "@matrix-org/react-sdk-module-api/lib/lifecycles/RoomViewLifecycle";
-import { Flex, Box } from "@element-hq/web-shared-components";
+import { Flex, Box, StatusTextView } from "@element-hq/web-shared-components";
 import { CallType } from "matrix-js-sdk/src/webrtc/call";
 import { HistoryIcon, UserProfileSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { useRoomName } from "../../../../hooks/useRoomName.ts";
 import { RightPanelPhases } from "../../../../stores/right-panel/RightPanelStorePhases.ts";
-import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext.tsx";
 import { useRoomMemberCount, useRoomMembers } from "../../../../hooks/useRoomMembers.ts";
-import { _t } from "../../../../languageHandler.tsx";
-import { getPlatformCallTypeProps, useRoomCall } from "../../../../hooks/room/useRoomCall.tsx";
+import { _t } from "../../../../languageHandler";
+import { getPlatformCallTypeProps, useRoomCall } from "../../../../hooks/room/useRoomCall";
 import { useRoomThreadNotifications } from "../../../../hooks/room/useRoomThreadNotifications.ts";
 import { useGlobalNotificationState } from "../../../../hooks/useGlobalNotificationState.ts";
 import { useFeatureEnabled } from "../../../../hooks/useSettings.ts";
@@ -39,7 +38,6 @@ import FacePile from "../../elements/FacePile.tsx";
 import { useRoomState } from "../../../../hooks/useRoomState.ts";
 import RoomAvatar from "../../avatars/RoomAvatar.tsx";
 import { formatCount } from "../../../../utils/FormattingUtils.ts";
-import RightPanelStore from "../../../../stores/right-panel/RightPanelStore.ts";
 import PosthogTrackers from "../../../../PosthogTrackers.ts";
 import { VideoRoomChatButton } from "./VideoRoomChatButton.tsx";
 import { RoomKnocksBar } from "../RoomKnocksBar.tsx";
@@ -49,14 +47,16 @@ import { CallGuestLinkButton } from "./CallGuestLinkButton.tsx";
 import { type ButtonEvent } from "../../elements/AccessibleButton.tsx";
 import WithPresenceIndicator, { useDmMember } from "../../avatars/WithPresenceIndicator.tsx";
 import { type IOOBData } from "../../../../stores/ThreepidInviteStore.ts";
-import { MainSplitContentType } from "../../../structures/RoomView.tsx";
+import { MainSplitContentType } from "../../../../contexts/RoomContext.ts";
 import defaultDispatcher from "../../../../dispatcher/dispatcher.ts";
-import { RoomSettingsTab } from "../../dialogs/RoomSettingsDialog.tsx";
+import { RoomSettingsTab } from "../../dialogs/RoomSettingsDialog-tab";
 import { useScopedRoomContext } from "../../../../contexts/ScopedRoomContext.tsx";
 import { ToggleableIcon } from "./toggle/ToggleableIcon.tsx";
 import { CurrentRightPanelPhaseContextProvider } from "../../../../contexts/CurrentRightPanelPhaseContext.tsx";
 import { LocalRoom } from "../../../../models/LocalRoom.ts";
 import { useIsEncrypted } from "../../../../hooks/useIsEncrypted.ts";
+import { useUserStatus } from "../../../../hooks/useUserStatus.ts";
+import { SDKContext } from "../../../../contexts/SDKContext.ts";
 
 function RoomHeaderButtons({
     room,
@@ -67,6 +67,7 @@ function RoomHeaderButtons({
     legacyAdditionalButtons?: ViewRoomOpts["buttons"];
     extraButtons?: JSX.Element;
 }): JSX.Element {
+    const sdkContext = useContext(SDKContext);
     const members = useRoomMembers(room, 2500);
     const memberCount = useRoomMemberCount(room, { throttleWait: 2500, includeInvited: true });
 
@@ -111,14 +112,14 @@ function RoomHeaderButtons({
 
     const joinCallButton = (
         <Tooltip
-            label={
+            description={
                 videoCallDisabledReason ??
                 (activeCallSessionType === CallType.Voice ? _t("voip|voice_call") : _t("voip|video_call"))
             }
         >
             <Button
                 size="md"
-                onClick={videoClick}
+                onClick={activeCallSessionType === CallType.Video ? videoClick : voiceClick}
                 // If we know this is a voice session, show the voice call. All other kinds of call are video calls.
                 Icon={activeCallSessionType === CallType.Voice ? VoiceCallIcon : VideoCallIcon}
                 className="mx_RoomHeader_join_button"
@@ -337,7 +338,7 @@ function RoomHeaderButtons({
                     indicator={notificationLevelToIndicator(threadNotifications)}
                     onClick={(evt) => {
                         evt.stopPropagation();
-                        RightPanelStore.instance.showOrHidePhase(RightPanelPhases.ThreadPanel);
+                        sdkContext.rightPanelStore.showOrHidePhase(RightPanelPhases.ThreadPanel);
                         PosthogTrackers.trackInteraction("WebRoomHeaderButtonsThreadsButton", evt);
                     }}
                     aria-label={_t("common|threads")}
@@ -351,7 +352,7 @@ function RoomHeaderButtons({
                         indicator={notificationLevelToIndicator(globalNotificationState.level)}
                         onClick={(evt) => {
                             evt.stopPropagation();
-                            RightPanelStore.instance.showOrHidePhase(RightPanelPhases.NotificationPanel);
+                            sdkContext.rightPanelStore.showOrHidePhase(RightPanelPhases.NotificationPanel);
                         }}
                         aria-label={_t("notifications|enable_prompt_toast_title")}
                     >
@@ -364,7 +365,7 @@ function RoomHeaderButtons({
                 <IconButton
                     onClick={(evt) => {
                         evt.stopPropagation();
-                        RightPanelStore.instance.showOrHidePhase(RightPanelPhases.RoomSummary);
+                        sdkContext.rightPanelStore.showOrHidePhase(RightPanelPhases.RoomSummary);
                     }}
                     aria-label={_t("right_panel|room_summary_card|title")}
                 >
@@ -382,7 +383,7 @@ function RoomHeaderButtons({
                         viewUserOnClick={false}
                         tooltipLabel={_t("room|header_face_pile_tooltip")}
                         onClick={(e: ButtonEvent) => {
-                            RightPanelStore.instance.showOrHidePhase(RightPanelPhases.MemberList);
+                            sdkContext.rightPanelStore.showOrHidePhase(RightPanelPhases.MemberList);
                             e.stopPropagation();
                         }}
                         aria-label={_t("common|n_members", { count: memberCount })}
@@ -442,14 +443,15 @@ export default function RoomHeader({
     legacyAdditionalButtons?: ViewRoomOpts["buttons"];
     oobData?: IOOBData;
 }): JSX.Element {
-    const client = useMatrixClientContext();
+    const sdkContext = useContext(SDKContext);
     const roomName = useRoomName(room);
     const joinRule = useRoomState(room, (state) => state.getJoinRule());
     const historyVisibility = useRoomState(room, (state) => state.getHistoryVisibility());
     const dmMember = useDmMember(room);
     const isDirectMessage = !!dmMember;
-    const isRoomEncrypted = useIsEncrypted(client, room);
-    const e2eStatus = useEncryptionStatus(client, room);
+    const dmUserStatus = useUserStatus(dmMember?.userId);
+    const isRoomEncrypted = useIsEncrypted(sdkContext.client!, room);
+    const e2eStatus = useEncryptionStatus(sdkContext.client!, room);
     const askToJoinEnabled = useFeatureEnabled("feature_ask_to_join");
     const onAvatarClick = (): void => {
         defaultDispatcher.dispatch({
@@ -459,93 +461,96 @@ export default function RoomHeader({
     };
 
     return (
-        <>
-            <CurrentRightPanelPhaseContextProvider roomId={room.roomId}>
-                <Flex as="header" align="center" gap="var(--cpd-space-3x)" className="mx_RoomHeader light-panel">
-                    <WithPresenceIndicator room={room} size="8px">
-                        {/* We hide this from the tabIndex list as it is a pointer shortcut and superfluous for a11y */}
-                        {/* Disable on-click actions until the room is created */}
-                        <RoomAvatar
-                            room={room}
-                            size="40px"
-                            oobData={oobData}
-                            onClick={room instanceof LocalRoom ? undefined : onAvatarClick}
-                            tabIndex={-1}
-                            aria-label={_t("room|header_avatar_open_settings_label")}
-                        />
-                    </WithPresenceIndicator>
+        <CurrentRightPanelPhaseContextProvider roomId={room.roomId}>
+            <Flex as="header" align="center" gap="var(--cpd-space-3x)" className="mx_RoomHeader light-panel">
+                <WithPresenceIndicator room={room}>
+                    {/* We hide this from the tabIndex list as it is a pointer shortcut and superfluous for a11y */}
                     {/* Disable on-click actions until the room is created */}
-                    <button
-                        aria-label={_t("right_panel|room_summary_card|title")}
-                        tabIndex={0}
-                        onClick={
-                            room instanceof LocalRoom
-                                ? undefined
-                                : () => RightPanelStore.instance.showOrHidePhase(RightPanelPhases.RoomSummary)
-                        }
-                        className="mx_RoomHeader_infoWrapper"
-                    >
-                        <Box flex="1" className="mx_RoomHeader_info">
-                            <Text
-                                as="div"
-                                size="lg"
-                                weight="semibold"
-                                dir="auto"
-                                role="heading"
-                                aria-level={1}
-                                className="mx_RoomHeader_heading"
-                            >
-                                <span className="mx_RoomHeader_truncated mx_lineClamp">{roomName}</span>
+                    <RoomAvatar
+                        room={room}
+                        size="40px"
+                        oobData={oobData}
+                        onClick={room instanceof LocalRoom ? undefined : onAvatarClick}
+                        tabIndex={-1}
+                        aria-label={_t("room|header_avatar_open_settings_label")}
+                    />
+                </WithPresenceIndicator>
+                {/* Disable on-click actions until the room is created */}
+                <button
+                    aria-label={_t("right_panel|room_summary_card|title")}
+                    tabIndex={0}
+                    onClick={
+                        room instanceof LocalRoom
+                            ? undefined
+                            : () => sdkContext.rightPanelStore.showOrHidePhase(RightPanelPhases.RoomSummary)
+                    }
+                    className="mx_RoomHeader_infoWrapper"
+                    type="button"
+                >
+                    <Box flex="1" className="mx_RoomHeader_info">
+                        <Text
+                            as="div"
+                            size="lg"
+                            weight="semibold"
+                            dir="auto"
+                            role="heading"
+                            aria-level={1}
+                            className="mx_RoomHeader_heading"
+                        >
+                            <span className="mx_RoomHeader_truncated mx_lineClamp">{roomName}</span>
 
-                                {!isDirectMessage && joinRule === JoinRule.Public && (
-                                    <Tooltip label={_t("common|public_room")} placement="right">
-                                        <PublicIcon
-                                            width="16px"
-                                            height="16px"
-                                            className="mx_RoomHeader_icon"
-                                            color="var(--cpd-color-icon-info-primary)"
-                                            aria-label={_t("common|public_room")}
-                                        />
-                                    </Tooltip>
-                                )}
+                            {isDirectMessage && dmUserStatus && (
+                                <StatusTextView status={dmUserStatus} className="mx_RoomHeader_userStatus" />
+                            )}
 
-                                {isDirectMessage && e2eStatus === E2EStatus.Verified && (
-                                    <Tooltip label={_t("common|verified")} placement="right">
-                                        <VerifiedIcon
-                                            width="16px"
-                                            height="16px"
-                                            className="mx_RoomHeader_icon mx_Verified"
-                                            aria-label={_t("common|verified")}
-                                        />
-                                    </Tooltip>
-                                )}
+                            {!isDirectMessage && joinRule === JoinRule.Public && (
+                                <Tooltip label={_t("common|public_room")} placement="right">
+                                    <PublicIcon
+                                        width="16px"
+                                        height="16px"
+                                        className="mx_RoomHeader_icon"
+                                        color="var(--cpd-color-icon-info-primary)"
+                                        aria-label={_t("common|public_room")}
+                                    />
+                                </Tooltip>
+                            )}
 
-                                {isDirectMessage && e2eStatus === E2EStatus.Warning && (
-                                    <Tooltip label={_t("room|header_untrusted_label")} placement="right">
-                                        <ErrorIcon
-                                            width="16px"
-                                            height="16px"
-                                            className="mx_RoomHeader_icon mx_Untrusted"
-                                            aria-label={_t("room|header_untrusted_label")}
-                                        />
-                                    </Tooltip>
-                                )}
+                            {isDirectMessage && e2eStatus === E2EStatus.Verified && (
+                                <Tooltip label={_t("common|verified")} placement="right">
+                                    <VerifiedIcon
+                                        width="16px"
+                                        height="16px"
+                                        className="mx_RoomHeader_icon mx_Verified"
+                                        aria-label={_t("common|verified")}
+                                    />
+                                </Tooltip>
+                            )}
 
-                                {isRoomEncrypted && historyVisibilityIcon(historyVisibility)}
-                            </Text>
-                        </Box>
-                    </button>
-                    {/* If the room is local-only then we don't want to show any additional buttons, as it won't work */}
-                    {room instanceof LocalRoom === false && (
-                        <RoomHeaderButtons
-                            room={room}
-                            legacyAdditionalButtons={legacyAdditionalButtons}
-                            extraButtons={extraButtons}
-                        />
-                    )}
-                </Flex>
-                {askToJoinEnabled && <RoomKnocksBar room={room} />}
-            </CurrentRightPanelPhaseContextProvider>
-        </>
+                            {isDirectMessage && e2eStatus === E2EStatus.Warning && (
+                                <Tooltip label={_t("room|header_untrusted_label")} placement="right">
+                                    <ErrorIcon
+                                        width="16px"
+                                        height="16px"
+                                        className="mx_RoomHeader_icon mx_Untrusted"
+                                        aria-label={_t("room|header_untrusted_label")}
+                                    />
+                                </Tooltip>
+                            )}
+
+                            {isRoomEncrypted && historyVisibilityIcon(historyVisibility)}
+                        </Text>
+                    </Box>
+                </button>
+                {/* If the room is local-only then we don't want to show any additional buttons, as it won't work */}
+                {room instanceof LocalRoom === false && (
+                    <RoomHeaderButtons
+                        room={room}
+                        legacyAdditionalButtons={legacyAdditionalButtons}
+                        extraButtons={extraButtons}
+                    />
+                )}
+            </Flex>
+            {askToJoinEnabled && <RoomKnocksBar room={room} />}
+        </CurrentRightPanelPhaseContextProvider>
     );
 }
diff --git a/apps/web/test/unit-tests/components/views/rooms/RoomHeader/VideoRoomChatButton-test.tsx b/apps/web/src/components/views/rooms/RoomHeader/VideoRoomChatButton.test.tsx
similarity index 72%
rename from apps/web/test/unit-tests/components/views/rooms/RoomHeader/VideoRoomChatButton-test.tsx
rename to apps/web/src/components/views/rooms/RoomHeader/VideoRoomChatButton.test.tsx
index 5ae6560779..7aed269991 100644
--- a/apps/web/test/unit-tests/components/views/rooms/RoomHeader/VideoRoomChatButton-test.tsx
+++ b/apps/web/src/components/views/rooms/RoomHeader/VideoRoomChatButton.test.tsx
@@ -6,23 +6,25 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
-import { type MockedObject } from "jest-mock";
-import { Room } from "matrix-js-sdk/src/matrix";
-import { fireEvent, render, screen, waitFor } from "jest-matrix-react";
+// @vitest-environment happy-dom
 
-import { VideoRoomChatButton } from "../../../../../../src/components/views/rooms/RoomHeader/VideoRoomChatButton";
-import { SDKContext, SdkContextClass } from "../../../../../../src/contexts/SDKContext";
-import type RightPanelStore from "../../../../../../src/stores/right-panel/RightPanelStore";
-import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../../../test-utils";
-import { RoomNotificationState } from "../../../../../../src/stores/notifications/RoomNotificationState";
-import { NotificationLevel } from "../../../../../../src/stores/notifications/NotificationLevel";
-import { NotificationStateEvents } from "../../../../../../src/stores/notifications/NotificationState";
-import { RightPanelPhases } from "../../../../../../src/stores/right-panel/RightPanelStorePhases";
+import { vi, describe, it, expect, beforeEach, afterEach, type MockedObject } from "vitest";
+import React from "react";
+import { Room } from "matrix-js-sdk/src/matrix";
+import { fireEvent, render, screen, waitFor } from "test-utils-rtl";
+import { getMockClientWithEventEmitter, mockClientMethodsUser, TestSDKContext } from "test-utils";
+
+import { VideoRoomChatButton } from "./VideoRoomChatButton";
+import { SDKContext } from "../../../../contexts/SDKContext";
+import type RightPanelStore from "../../../../stores/right-panel/RightPanelStore";
+import { RoomNotificationState } from "../../../../stores/notifications/RoomNotificationState";
+import { NotificationLevel } from "../../../../stores/notifications/NotificationLevel";
+import { NotificationStateEvents } from "../../../../stores/notifications/NotificationState";
+import { RightPanelPhases } from "../../../../stores/right-panel/RightPanelStorePhases";
 
 describe("<VideoRoomChatButton />", () => {
     const roomId = "!room:server.org";
-    let sdkContext!: SdkContextClass;
+    let sdkContext!: TestSDKContext;
     let rightPanelStore!: MockedObject<RightPanelStore>;
 
     /**
@@ -31,9 +33,9 @@ describe("<VideoRoomChatButton />", () => {
      */
     const makeRoom = (isVideoRoom = true): Room => {
         const room = new Room(roomId, sdkContext.client!, sdkContext.client!.getSafeUserId());
-        jest.spyOn(room, "isElementVideoRoom").mockReturnValue(isVideoRoom);
+        vi.spyOn(room, "isElementVideoRoom").mockReturnValue(isVideoRoom);
         // stub
-        jest.spyOn(room, "getPendingEvents").mockReturnValue([]);
+        vi.spyOn(room, "getPendingEvents").mockReturnValue([]);
         return room;
     };
 
@@ -42,7 +44,7 @@ describe("<VideoRoomChatButton />", () => {
 
         // @ts-ignore ugly mocking
         roomNotificationState._level = level;
-        jest.spyOn(sdkContext.roomNotificationStateStore, "getRoomState").mockReturnValue(roomNotificationState);
+        vi.spyOn(sdkContext.roomNotificationStateStore, "getRoomState").mockReturnValue(roomNotificationState);
         return roomNotificationState;
     };
 
@@ -56,15 +58,15 @@ describe("<VideoRoomChatButton />", () => {
             ...mockClientMethodsUser(),
         });
         rightPanelStore = {
-            showOrHidePhase: jest.fn(),
+            showOrHidePhase: vi.fn(),
         } as unknown as MockedObject<RightPanelStore>;
-        sdkContext = new SdkContextClass();
-        sdkContext.client = client;
-        jest.spyOn(sdkContext, "rightPanelStore", "get").mockReturnValue(rightPanelStore);
+        sdkContext = new TestSDKContext();
+        sdkContext._client = client;
+        vi.spyOn(sdkContext, "rightPanelStore", "get").mockReturnValue(rightPanelStore);
     });
 
     afterEach(() => {
-        jest.restoreAllMocks();
+        vi.restoreAllMocks();
     });
 
     it("toggles timeline in right panel on click", () => {
diff --git a/apps/web/test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/RoomHeader-test.tsx.snap b/apps/web/src/components/views/rooms/RoomHeader/__snapshots__/RoomHeader.test.tsx.snap
similarity index 89%
rename from apps/web/test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/RoomHeader-test.tsx.snap
rename to apps/web/src/components/views/rooms/RoomHeader/__snapshots__/RoomHeader.test.tsx.snap
index 90f3fe474f..f8c86405fd 100644
--- a/apps/web/test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/RoomHeader-test.tsx.snap
+++ b/apps/web/src/components/views/rooms/RoomHeader/__snapshots__/RoomHeader.test.tsx.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
+exports[`RoomHeader > dm > does not show the face pile for DMs 1`] = `
 <DocumentFragment>
   <header
     class="_flex_4dswl_9 mx_RoomHeader light-panel"
@@ -23,6 +23,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
       aria-label="Room info"
       class="mx_RoomHeader_infoWrapper"
       tabindex="0"
+      type="button"
     >
       <div
         class="mx_RoomHeader_info _box-flex_1odfs_9"
@@ -44,19 +45,24 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
     </button>
     <button
       aria-disabled="false"
+      aria-expanded="false"
+      aria-haspopup="menu"
       aria-label="Video call"
       class="_icon-button_1215g_8"
       data-kind="primary"
+      data-state="closed"
+      id="radix-react-use-id-1"
       role="button"
       style="--cpd-icon-button-size: 32px;"
       tabindex="0"
+      type="button"
     >
       <div
         class="_indicator-icon_147l5_17"
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
-          aria-labelledby="_r_14k_"
+          aria-labelledby="react-use-id-2"
           fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"
@@ -71,19 +77,24 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
     </button>
     <button
       aria-disabled="false"
+      aria-expanded="false"
+      aria-haspopup="menu"
       aria-label="Voice call"
       class="_icon-button_1215g_8"
       data-kind="primary"
+      data-state="closed"
+      id="radix-react-use-id-3"
       role="button"
       style="--cpd-icon-button-size: 32px;"
       tabindex="0"
+      type="button"
     >
       <div
         class="_indicator-icon_147l5_17"
         style="--cpd-icon-button-size: 100%;"
       >
         <svg
-          aria-labelledby="_r_14p_"
+          aria-labelledby="react-use-id-4"
           fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"
@@ -98,7 +109,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
     </button>
     <button
       aria-label="Threads"
-      aria-labelledby="_r_14u_"
+      aria-labelledby="react-use-id-5"
       class="_icon-button_1215g_8"
       data-kind="primary"
       role="button"
@@ -125,7 +136,7 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
     </button>
     <button
       aria-label="Room info"
-      aria-labelledby="_r_153_"
+      aria-labelledby="react-use-id-6"
       class="_icon-button_1215g_8"
       data-kind="primary"
       role="button"
diff --git a/apps/web/test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/VideoRoomChatButton-test.tsx.snap b/apps/web/src/components/views/rooms/RoomHeader/__snapshots__/VideoRoomChatButton.test.tsx.snap
similarity index 82%
rename from apps/web/test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/VideoRoomChatButton-test.tsx.snap
rename to apps/web/src/components/views/rooms/RoomHeader/__snapshots__/VideoRoomChatButton.test.tsx.snap
index c174aa9a9b..1d293ffbc6 100644
--- a/apps/web/test/unit-tests/components/views/rooms/RoomHeader/__snapshots__/VideoRoomChatButton-test.tsx.snap
+++ b/apps/web/src/components/views/rooms/RoomHeader/__snapshots__/VideoRoomChatButton.test.tsx.snap
@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`<VideoRoomChatButton /> renders button with an unread marker when room is unread 1`] = `
+exports[`<VideoRoomChatButton /> > renders button with an unread marker when room is unread 1`] = `
 <button
   aria-label="Chat"
-  aria-labelledby="_r_6_"
+  aria-labelledby="react-use-id-1"
   class="_icon-button_1215g_8"
   data-indicator="default"
   data-kind="primary"
diff --git a/apps/web/src/components/views/rooms/RoomHeader/toggle/useToggled.tsx b/apps/web/src/components/views/rooms/RoomHeader/toggle/useToggled.ts
similarity index 100%
rename from apps/web/src/components/views/rooms/RoomHeader/toggle/useToggled.tsx
rename to apps/web/src/components/views/rooms/RoomHeader/toggle/useToggled.ts
diff --git a/apps/web/src/components/views/rooms/RoomInfoLine.tsx b/apps/web/src/components/views/rooms/RoomInfoLine.tsx
index 687c41da34..c020076b94 100644
--- a/apps/web/src/components/views/rooms/RoomInfoLine.tsx
+++ b/apps/web/src/components/views/rooms/RoomInfoLine.tsx
@@ -6,25 +6,27 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX, type FC } from "react";
+import React, { type JSX, type FC, useContext } from "react";
 import { type Room, JoinRule, type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { LockSolidIcon, VideoCallSolidIcon, PublicIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../languageHandler";
-import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
 import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
 import { useAsyncMemo } from "../../../hooks/useAsyncMemo";
 import { useRoomState } from "../../../hooks/useRoomState";
 import { useRoomMemberCount, useMyRoomMembership } from "../../../hooks/useRoomMembers";
 import AccessibleButton from "../elements/AccessibleButton";
 import { isVideoRoom as calcIsVideoRoom } from "../../../utils/video-rooms";
+import { SDKContext } from "../../../contexts/SDKContext.ts";
 
 interface IProps {
     room: Room;
 }
 
 const RoomInfoLine: FC<IProps> = ({ room }) => {
+    const sdkContext = useContext(SDKContext);
+
     // summary will begin as undefined whilst loading and go null if it fails to load or we are not invited.
     const summary = useAsyncMemo(async (): Promise<Awaited<ReturnType<MatrixClient["getRoomSummary"]>> | null> => {
         if (room.getMyMembership() !== KnownMembership.Invite) return null;
@@ -64,7 +66,7 @@ const RoomInfoLine: FC<IProps> = ({ room }) => {
     } else if (memberCount && summary !== undefined) {
         // summary is not still loading
         const viewMembers = (): void =>
-            RightPanelStore.instance.setCard({
+            sdkContext.rightPanelStore.setCard({
                 phase: RightPanelPhases.MemberList,
             });
 
diff --git a/apps/web/src/components/views/rooms/RoomKnocksBar.tsx b/apps/web/src/components/views/rooms/RoomKnocksBar.tsx
index 9b762f0b96..bada3f33a3 100644
--- a/apps/web/src/components/views/rooms/RoomKnocksBar.tsx
+++ b/apps/web/src/components/views/rooms/RoomKnocksBar.tsx
@@ -17,7 +17,7 @@ import { _t } from "../../../languageHandler";
 import Modal from "../../../Modal";
 import MemberAvatar from "../avatars/MemberAvatar";
 import ErrorDialog from "../dialogs/ErrorDialog";
-import { RoomSettingsTab } from "../dialogs/RoomSettingsDialog";
+import { RoomSettingsTab } from "../dialogs/RoomSettingsDialog-tab";
 import AccessibleButton from "../elements/AccessibleButton";
 import Heading from "../typography/Heading";
 import { formatList } from "../../../utils/FormattingUtils";
diff --git a/apps/web/src/components/views/rooms/RoomListPanel/RoomListPanel.tsx b/apps/web/src/components/views/rooms/RoomListPanel/RoomListPanel.tsx
index aa7c0cf76b..06d4f3bfa1 100644
--- a/apps/web/src/components/views/rooms/RoomListPanel/RoomListPanel.tsx
+++ b/apps/web/src/components/views/rooms/RoomListPanel/RoomListPanel.tsx
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useContext } from "react";
 import { Flex, RoomListHeaderView, useCreateAutoDisposedViewModel } from "@element-hq/web-shared-components";
 
 import { shouldShowComponent } from "../../../../customisations/helpers/UIComponents";
@@ -19,7 +19,7 @@ import { Landmark, LandmarkNavigation } from "../../../../accessibility/Landmark
 import { type IState as IRovingTabIndexState } from "../../../../accessibility/RovingTabIndex";
 import { RoomListHeaderViewModel } from "../../../../viewmodels/room-list/RoomListHeaderViewModel";
 import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
-import SpaceStore from "../../../../stores/spaces/SpaceStore";
+import { SDKContext } from "../../../../contexts/SDKContext.ts";
 
 type RoomListPanelProps = {
     /**
@@ -33,11 +33,12 @@ type RoomListPanelProps = {
  * The panel of the room list
  */
 export const RoomListPanel: React.FC<RoomListPanelProps> = ({ activeSpace }) => {
+    const sdkContext = useContext(SDKContext);
     const displayRoomSearch = shouldShowComponent(UIComponent.FilterContainer);
     const [focusedElement, setFocusedElement] = useState<Element | null>(null);
 
     const onFocus = useCallback((ev: React.FocusEvent): void => {
-        setFocusedElement(ev.target as Element);
+        setFocusedElement(ev.target);
     }, []);
 
     const onBlur = useCallback((): void => {
@@ -62,7 +63,7 @@ export const RoomListPanel: React.FC<RoomListPanelProps> = ({ activeSpace }) =>
 
     const matrixClient = useMatrixClientContext();
     const vm = useCreateAutoDisposedViewModel(
-        () => new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance }),
+        () => new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore }),
     );
 
     return (
diff --git a/apps/web/src/components/views/rooms/RoomListPanel/RoomListSearch.tsx b/apps/web/src/components/views/rooms/RoomListPanel/RoomListSearch.tsx
index 0354831a9e..7d88afe2d9 100644
--- a/apps/web/src/components/views/rooms/RoomListPanel/RoomListSearch.tsx
+++ b/apps/web/src/components/views/rooms/RoomListPanel/RoomListSearch.tsx
@@ -5,10 +5,11 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { useEffect, type JSX } from "react";
+import React, { useEffect, type JSX, useContext } from "react";
 import { RoomListSearchView, useCreateAutoDisposedViewModel } from "@element-hq/web-shared-components";
 
 import { RoomListSearchViewModel } from "../../../../viewmodels/room-list/RoomListSearchViewModel";
+import { SDKContext } from "../../../../contexts/SDKContext.ts";
 
 type RoomListSearchProps = {
     /**
@@ -23,7 +24,10 @@ type RoomListSearchProps = {
  * The `Explore` button is displayed only in the Home meta space and when UIComponent.ExploreRooms is enabled.
  */
 export function RoomListSearch({ activeSpace }: RoomListSearchProps): JSX.Element {
-    const vm = useCreateAutoDisposedViewModel(() => new RoomListSearchViewModel({ activeSpace }));
+    const sdkContext = useContext(SDKContext);
+    const vm = useCreateAutoDisposedViewModel(
+        () => new RoomListSearchViewModel({ activeSpace, legacyCallHandler: sdkContext.legacyCallHandler }),
+    );
     useEffect(() => {
         vm.setActiveSpace(activeSpace);
     }, [activeSpace, vm]);
diff --git a/apps/web/src/components/views/rooms/RoomListPanel/RoomListView.tsx b/apps/web/src/components/views/rooms/RoomListPanel/RoomListView.tsx
index 6c4cad44ec..00aa0ef9cc 100644
--- a/apps/web/src/components/views/rooms/RoomListPanel/RoomListView.tsx
+++ b/apps/web/src/components/views/rooms/RoomListPanel/RoomListView.tsx
@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { useCallback, type JSX, type ReactNode } from "react";
+import React, { useCallback, type JSX, type ReactNode, useContext } from "react";
 import {
     RoomListView as SharedRoomListView,
     useCreateAutoDisposedViewModel,
@@ -13,21 +13,28 @@ import {
 } from "@element-hq/web-shared-components";
 import { type Room } from "matrix-js-sdk/src/matrix";
 
-import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
 import { RoomAvatarView } from "../../avatars/RoomAvatarView";
 import { getKeyBindingsManager } from "../../../../KeyBindingsManager";
 import { KeyBindingAction } from "../../../../accessibility/KeyboardShortcuts";
 import { Landmark, LandmarkNavigation } from "../../../../accessibility/LandmarkNavigation";
 import { RoomListViewModel } from "../../../../viewmodels/room-list/RoomListViewModel";
+import { SDKContext } from "../../../../contexts/SDKContext.ts";
 
 /**
  * RoomListView component using shared components with proper MVVM pattern.
  */
 export function RoomListView(): JSX.Element {
-    const matrixClient = useMatrixClientContext();
+    const sdkContext = useContext(SDKContext);
 
     // Create and auto-dispose ViewModel instance
-    const vm = useCreateAutoDisposedViewModel(() => new RoomListViewModel({ client: matrixClient }));
+    const vm = useCreateAutoDisposedViewModel(
+        () =>
+            new RoomListViewModel({
+                client: sdkContext.client!,
+                roomViewStore: sdkContext.roomViewStore,
+                spaceStore: sdkContext.spaceStore,
+            }),
+    );
 
     // Render avatar for each room - memoized to prevent re-renders
     const renderAvatar = useCallback((room: SharedRoom): ReactNode => {
diff --git a/apps/web/src/components/views/rooms/RoomPreviewBar.tsx b/apps/web/src/components/views/rooms/RoomPreviewBar.tsx
index 2c13861d9b..f3de47ca94 100644
--- a/apps/web/src/components/views/rooms/RoomPreviewBar.tsx
+++ b/apps/web/src/components/views/rooms/RoomPreviewBar.tsx
@@ -99,11 +99,6 @@ interface IProps {
     canAskToJoinAndMembershipIsLeave?: boolean;
     promptAskToJoin?: boolean;
 
-    /**
-     * If true, this will prompt for additional safety options
-     * like reporting an invite or ignoring the user.
-     */
-    promptRejectionOptions?: boolean;
     knocked?: boolean;
     onSubmitAskToJoin?(reason?: string): void;
     onCancelAskToJoin?(): void;
@@ -223,7 +218,7 @@ class RoomPreviewBar extends React.Component<IProps, IState> {
             }
             return MessageCase.Invite;
         } else if (this.props.error) {
-            if ((this.props.error as MatrixError).errcode == "M_NOT_FOUND") {
+            if (this.props.error.errcode === "M_NOT_FOUND") {
                 return MessageCase.RoomNotFound;
             } else {
                 return MessageCase.OtherError;
@@ -322,7 +317,6 @@ class RoomPreviewBar extends React.Component<IProps, IState> {
         let dangerActionHandler: (() => void) | undefined;
         let dangerActionLabel: string | undefined;
         let footer: JSX.Element | undefined;
-        const extraComponents: JSX.Element[] = [];
 
         const messageCase = this.getMessageCase();
         switch (messageCase) {
@@ -661,6 +655,7 @@ class RoomPreviewBar extends React.Component<IProps, IState> {
             if (!Array.isArray(subTitle)) {
                 subTitle = [subTitle];
             }
+            // oxlint-disable-next-line react/no-array-index-key
             subTitleElements = subTitle.map((t, i) => <p key={`subTitle${i}`}>{t}</p>);
         }
 
@@ -715,13 +710,11 @@ class RoomPreviewBar extends React.Component<IProps, IState> {
             <>
                 {dangerActionButton}
                 {secondaryButton}
-                {extraComponents}
                 {primaryButton}
             </>
         ) : (
             <>
                 {primaryButton}
-                {extraComponents}
                 {secondaryButton}
                 {dangerActionButton}
             </>
diff --git a/apps/web/src/components/views/rooms/RoomSearchAuxPanel.tsx b/apps/web/src/components/views/rooms/RoomSearchAuxPanel.tsx
index 14c7ad511e..b2a7119d3a 100644
--- a/apps/web/src/components/views/rooms/RoomSearchAuxPanel.tsx
+++ b/apps/web/src/components/views/rooms/RoomSearchAuxPanel.tsx
@@ -45,7 +45,13 @@ const RoomSearchAuxPanel: React.FC<Props> = ({ searchInfo, isRoomEncrypted, onSe
                         ) : (
                             <InlineSpinner />
                         )}
-                        <SearchWarning kind={WarningKind.Search} isRoomEncrypted={isRoomEncrypted} showLogo={false} />
+                        <SearchWarning
+                            kind={WarningKind.Search}
+                            isRoomEncrypted={isRoomEncrypted}
+                            showLogo={false}
+                            scope={scope}
+                            roomId={searchInfo?.roomId}
+                        />
                     </div>
                 </div>
                 <div className="mx_RoomSearchAuxPanel_buttons">
diff --git a/apps/web/src/components/views/rooms/RoomSublist.tsx b/apps/web/src/components/views/rooms/RoomSublist.tsx
deleted file mode 100644
index 602793a559..0000000000
--- a/apps/web/src/components/views/rooms/RoomSublist.tsx
+++ /dev/null
@@ -1,859 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-Copyright 2017, 2018 Vector Creations Ltd
-Copyright 2015, 2016 OpenMarket 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 Room } from "matrix-js-sdk/src/matrix";
-import classNames from "classnames";
-import { type Enable, Resizable } from "re-resizable";
-import { type Direction } from "re-resizable/lib/resizer";
-import React, { type JSX, type ComponentType, createRef, type ReactComponentElement, type ReactNode } from "react";
-import {
-    ChevronDownIcon,
-    ChevronRightIcon,
-    ChevronUpIcon,
-    OverflowHorizontalIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
-
-import { polyfillTouchEvent } from "../../../@types/polyfill";
-import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
-import { RovingAccessibleButton, RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
-import { Action } from "../../../dispatcher/actions";
-import defaultDispatcher, { type MatrixDispatcher } from "../../../dispatcher/dispatcher";
-import { type ActionPayload } from "../../../dispatcher/payloads";
-import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
-import { getKeyBindingsManager } from "../../../KeyBindingsManager";
-import { _t } from "../../../languageHandler";
-import { type ListNotificationState } from "../../../stores/notifications/ListNotificationState";
-import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
-import { ListAlgorithm, SortAlgorithm } from "../../../stores/room-list/algorithms/models";
-import { type ListLayout } from "../../../stores/room-list/ListLayout";
-import { DefaultTagID, type TagID } from "../../../stores/room-list-v3/skip-list/tag";
-import RoomListLayoutStore from "../../../stores/room-list/RoomListLayoutStore";
-import RoomListStore, { LISTS_UPDATE_EVENT, LISTS_LOADING_EVENT } from "../../../stores/room-list/RoomListStore";
-import { arrayFastClone, arrayHasOrderChange } from "../../../utils/arrays";
-import { objectExcluding, objectHasDiff } from "../../../utils/objects";
-import type ResizeNotifier from "../../../utils/ResizeNotifier";
-import ContextMenu, {
-    ChevronFace,
-    ContextMenuTooltipButton,
-    StyledMenuItemCheckbox,
-    StyledMenuItemRadio,
-} from "../../structures/ContextMenu";
-import AccessibleButton, { type ButtonEvent } from "../../views/elements/AccessibleButton";
-import type ExtraTile from "./ExtraTile";
-import NotificationBadge from "./NotificationBadge";
-import RoomTile from "./RoomTile";
-
-const SHOW_N_BUTTON_HEIGHT = 28; // As defined by CSS
-const RESIZE_HANDLE_HEIGHT = 4; // As defined by CSS
-export const HEADER_HEIGHT = 32; // As defined by CSS
-
-const MAX_PADDING_HEIGHT = SHOW_N_BUTTON_HEIGHT + RESIZE_HANDLE_HEIGHT;
-
-// HACK: We really shouldn't have to do this.
-polyfillTouchEvent();
-
-export interface IAuxButtonProps {
-    tabIndex: number;
-    dispatcher?: MatrixDispatcher;
-}
-
-interface IProps {
-    forRooms: boolean;
-    startAsHidden: boolean;
-    label: string;
-    AuxButtonComponent?: ComponentType<IAuxButtonProps>;
-    isMinimized: boolean;
-    tagId: TagID;
-    showSkeleton?: boolean;
-    alwaysVisible?: boolean;
-    forceExpanded?: boolean;
-    resizeNotifier: ResizeNotifier;
-    extraTiles?: ReactComponentElement<typeof ExtraTile>[] | null;
-    onListCollapse?: (isExpanded: boolean) => void;
-}
-
-function getLabelId(tagId: TagID): string {
-    return `mx_RoomSublist_label_${tagId}`;
-}
-
-// TODO: Use re-resizer's NumberSize when it is exposed as the type
-interface ResizeDelta {
-    width: number;
-    height: number;
-}
-
-type PartialDOMRect = Pick<DOMRect, "left" | "top" | "height">;
-
-interface IState {
-    contextMenuPosition?: PartialDOMRect;
-    isResizing: boolean;
-    isExpanded: boolean; // used for the for expand of the sublist when the room list is being filtered
-    height: number;
-    rooms: Room[];
-    roomsLoading: boolean;
-}
-
-export default class RoomSublist extends React.Component<IProps, IState> {
-    private headerButton = createRef<HTMLDivElement>();
-    private sublistRef = createRef<HTMLDivElement>();
-    private tilesRef = createRef<HTMLDivElement>();
-    private dispatcherRef?: string;
-    private layout: ListLayout;
-    private heightAtStart: number;
-    private notificationState: ListNotificationState;
-
-    public constructor(props: IProps) {
-        super(props);
-
-        this.layout = RoomListLayoutStore.instance.getLayoutFor(this.props.tagId);
-        this.heightAtStart = 0;
-        this.notificationState = RoomNotificationStateStore.instance.getListState(this.props.tagId);
-        this.state = {
-            isResizing: false,
-            isExpanded: !this.layout.isCollapsed,
-            height: 0, // to be fixed in a moment, we need `rooms` to calculate this.
-            rooms: arrayFastClone(RoomListStore.instance.orderedLists[this.props.tagId] || []),
-            roomsLoading: false,
-        };
-        // Why Object.assign() and not this.state.height? Because TypeScript says no.
-        this.state = Object.assign(this.state, { height: this.calculateInitialHeight() });
-    }
-
-    private calculateInitialHeight(): number {
-        const requestedVisibleTiles = Math.max(Math.floor(this.layout.visibleTiles), this.layout.minVisibleTiles);
-        const tileCount = Math.min(this.numTiles, requestedVisibleTiles);
-        return this.layout.tilesToPixelsWithPadding(tileCount, this.padding);
-    }
-
-    private get padding(): number {
-        let padding = RESIZE_HANDLE_HEIGHT;
-        // this is used for calculating the max height of the whole container,
-        // and takes into account whether there should be room reserved for the show more/less button
-        // when fully expanded. We can't rely purely on the layout's defaultVisible tile count
-        // because there are conditions in which we need to know that the 'show more' button
-        // is present while well under the default tile limit.
-        const needsShowMore = this.numTiles > this.numVisibleTiles;
-
-        // ...but also check this or we'll miss if the section is expanded and we need a
-        // 'show less'
-        const needsShowLess = this.numTiles > this.layout.defaultVisibleTiles;
-
-        if (needsShowMore || needsShowLess) {
-            padding += SHOW_N_BUTTON_HEIGHT;
-        }
-        return padding;
-    }
-
-    private get extraTiles(): ReactComponentElement<typeof ExtraTile>[] | null {
-        return this.props.extraTiles ?? null;
-    }
-
-    private get numTiles(): number {
-        return RoomSublist.calcNumTiles(this.state.rooms, this.extraTiles);
-    }
-
-    private static calcNumTiles(rooms: Room[], extraTiles?: any[] | null): number {
-        return (rooms || []).length + (extraTiles || []).length;
-    }
-
-    private get numVisibleTiles(): number {
-        const nVisible = Math.ceil(this.layout.visibleTiles);
-        return Math.min(nVisible, this.numTiles);
-    }
-
-    public componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<IState>): void {
-        const prevExtraTiles = prevProps.extraTiles;
-        // as the rooms can come in one by one we need to reevaluate
-        // the amount of available rooms to cap the amount of requested visible rooms by the layout
-        if (RoomSublist.calcNumTiles(prevState.rooms, prevExtraTiles) !== this.numTiles) {
-            this.setState({ height: this.calculateInitialHeight() });
-        }
-    }
-
-    public shouldComponentUpdate(nextProps: Readonly<IProps>, nextState: Readonly<IState>): boolean {
-        if (objectHasDiff(this.props, nextProps)) {
-            // Something we don't care to optimize has updated, so update.
-            return true;
-        }
-
-        // Do the same check used on props for state, without the rooms we're going to no-op
-        const prevStateNoRooms = objectExcluding(this.state, ["rooms"]);
-        const nextStateNoRooms = objectExcluding(nextState, ["rooms"]);
-        if (objectHasDiff(prevStateNoRooms, nextStateNoRooms)) {
-            return true;
-        }
-
-        // If we're supposed to handle extra tiles, take the performance hit and re-render all the
-        // time so we don't have to consider them as part of the visible room optimization.
-        const prevExtraTiles = this.props.extraTiles || [];
-        const nextExtraTiles = nextProps.extraTiles || [];
-        if (prevExtraTiles.length > 0 || nextExtraTiles.length > 0) {
-            return true;
-        }
-
-        // If we're about to update the height of the list, we don't really care about which rooms
-        // are visible or not for no-op purposes, so ensure that the height calculation runs through.
-        if (RoomSublist.calcNumTiles(nextState.rooms, nextExtraTiles) !== this.numTiles) {
-            return true;
-        }
-
-        // Before we go analyzing the rooms, we can see if we're collapsed. If we're collapsed, we don't need
-        // to render anything. We do this after the height check though to ensure that the height gets appropriately
-        // calculated for when/if we become uncollapsed.
-        if (!nextState.isExpanded) {
-            return false;
-        }
-
-        // Quickly double check we're not about to break something due to the number of rooms changing.
-        if (this.state.rooms.length !== nextState.rooms.length) {
-            return true;
-        }
-
-        // Finally, determine if the room update (as presumably that's all that's left) is within
-        // our visible range. If it is, then do a render. If the update is outside our visible range
-        // then we can skip the update.
-        //
-        // We also optimize for order changing here: if the update did happen in our visible range
-        // but doesn't result in the list re-sorting itself then there's no reason for us to update
-        // on our own.
-        const prevSlicedRooms = this.state.rooms.slice(0, this.numVisibleTiles);
-        const nextSlicedRooms = nextState.rooms.slice(0, this.numVisibleTiles);
-        if (arrayHasOrderChange(prevSlicedRooms, nextSlicedRooms)) {
-            return true;
-        }
-
-        // Finally, nothing happened so no-op the update
-        return false;
-    }
-
-    public componentDidMount(): void {
-        this.dispatcherRef = defaultDispatcher.register(this.onAction);
-        RoomListStore.instance.on(LISTS_UPDATE_EVENT, this.onListsUpdated);
-        RoomListStore.instance.on(LISTS_LOADING_EVENT, this.onListsLoading);
-
-        // Using the passive option to not block the main thread
-        // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners
-        this.tilesRef.current?.addEventListener("scroll", this.onScrollPrevent, { passive: true });
-    }
-
-    public componentWillUnmount(): void {
-        defaultDispatcher.unregister(this.dispatcherRef);
-        RoomListStore.instance.off(LISTS_UPDATE_EVENT, this.onListsUpdated);
-        RoomListStore.instance.off(LISTS_LOADING_EVENT, this.onListsLoading);
-        this.tilesRef.current?.removeEventListener("scroll", this.onScrollPrevent);
-    }
-
-    private onListsLoading = (tagId: TagID, isLoading: boolean): void => {
-        if (this.props.tagId !== tagId) {
-            return;
-        }
-        this.setState({
-            roomsLoading: isLoading,
-        });
-    };
-
-    private onListsUpdated = (): void => {
-        const stateUpdates = {} as IState;
-
-        const currentRooms = this.state.rooms;
-        const newRooms = arrayFastClone(RoomListStore.instance.orderedLists[this.props.tagId] || []);
-        if (arrayHasOrderChange(currentRooms, newRooms)) {
-            stateUpdates.rooms = newRooms;
-        }
-
-        if (Object.keys(stateUpdates).length > 0) {
-            this.setState(stateUpdates);
-        }
-    };
-
-    private onAction = (payload: ActionPayload): void => {
-        if (payload.action === Action.ViewRoom && payload.show_room_tile && this.state.rooms) {
-            // XXX: we have to do this a tick later because we have incorrect intermediate props during a room change
-            // where we lose the room we are changing from temporarily and then it comes back in an update right after.
-            setTimeout(() => {
-                const roomIndex = this.state.rooms.findIndex((r) => r.roomId === payload.room_id);
-
-                if (!this.state.isExpanded && roomIndex > -1) {
-                    this.toggleCollapsed();
-                }
-                // extend the visible section to include the room if it is entirely invisible
-                if (roomIndex >= this.numVisibleTiles) {
-                    this.layout.visibleTiles = this.layout.tilesWithPadding(roomIndex + 1, MAX_PADDING_HEIGHT);
-                    this.forceUpdate(); // because the layout doesn't trigger a re-render
-                }
-            }, 0);
-        }
-    };
-
-    private applyHeightChange(newHeight: number): void {
-        const heightInTiles = Math.ceil(this.layout.pixelsToTiles(newHeight - this.padding));
-        this.layout.visibleTiles = Math.min(this.numTiles, heightInTiles);
-    }
-
-    private onResize = (
-        e: MouseEvent | TouchEvent,
-        travelDirection: Direction,
-        refToElement: HTMLElement,
-        delta: ResizeDelta,
-    ): void => {
-        const newHeight = this.heightAtStart + delta.height;
-        this.applyHeightChange(newHeight);
-        this.setState({ height: newHeight });
-    };
-
-    private onResizeStart = (): void => {
-        this.heightAtStart = this.state.height;
-        this.setState({ isResizing: true });
-    };
-
-    private onResizeStop = (
-        e: MouseEvent | TouchEvent,
-        travelDirection: Direction,
-        refToElement: HTMLElement,
-        delta: ResizeDelta,
-    ): void => {
-        const newHeight = this.heightAtStart + delta.height;
-        this.applyHeightChange(newHeight);
-        this.setState({ isResizing: false, height: newHeight });
-    };
-
-    private onShowAllClick = async (): Promise<void> => {
-        // read number of visible tiles before we mutate it
-        const numVisibleTiles = this.numVisibleTiles;
-        const newHeight = this.layout.tilesToPixelsWithPadding(this.numTiles, this.padding);
-        this.applyHeightChange(newHeight);
-        this.setState({ height: newHeight }, () => {
-            // focus the top-most new room
-            this.focusRoomTile(numVisibleTiles);
-        });
-    };
-
-    private onShowLessClick = (): void => {
-        const newHeight = this.layout.tilesToPixelsWithPadding(this.layout.defaultVisibleTiles, this.padding);
-        this.applyHeightChange(newHeight);
-        this.setState({ height: newHeight });
-    };
-
-    private focusRoomTile = (index: number): void => {
-        if (!this.sublistRef.current) return;
-        const elements = this.sublistRef.current.querySelectorAll<HTMLDivElement>(".mx_RoomTile");
-        const element = elements && elements[index];
-        if (element) {
-            element.focus();
-        }
-    };
-
-    private onOpenMenuClick = (ev: ButtonEvent): void => {
-        ev.preventDefault();
-        ev.stopPropagation();
-        const target = ev.target as HTMLButtonElement;
-        this.setState({ contextMenuPosition: target.getBoundingClientRect() });
-    };
-
-    private onContextMenu = (ev: React.MouseEvent): void => {
-        ev.preventDefault();
-        ev.stopPropagation();
-        this.setState({
-            contextMenuPosition: {
-                left: ev.clientX,
-                top: ev.clientY,
-                height: 0,
-            },
-        });
-    };
-
-    private onCloseMenu = (): void => {
-        this.setState({ contextMenuPosition: undefined });
-    };
-
-    private onUnreadFirstChanged = (): void => {
-        const isUnreadFirst = RoomListStore.instance.getListOrder(this.props.tagId) === ListAlgorithm.Importance;
-        const newAlgorithm = isUnreadFirst ? ListAlgorithm.Natural : ListAlgorithm.Importance;
-        RoomListStore.instance.setListOrder(this.props.tagId, newAlgorithm);
-        this.forceUpdate(); // because if the sublist doesn't have any changes then we will miss the list order change
-    };
-
-    private onTagSortChanged = async (sort: SortAlgorithm): Promise<void> => {
-        RoomListStore.instance.setTagSorting(this.props.tagId, sort);
-        this.forceUpdate();
-    };
-
-    private onMessagePreviewChanged = (): void => {
-        this.layout.showPreviews = !this.layout.showPreviews;
-        this.forceUpdate(); // because the layout doesn't trigger a re-render
-    };
-
-    private onBadgeClick = (ev: React.MouseEvent): void => {
-        ev.preventDefault();
-        ev.stopPropagation();
-
-        let room;
-        if (this.props.tagId === DefaultTagID.Invite) {
-            // switch to first room as that'll be the top of the list for the user
-            room = this.state.rooms && this.state.rooms[0];
-        } else {
-            // find the first room with a count of the same colour as the badge count
-            room = RoomListStore.instance.orderedLists[this.props.tagId].find((r: Room) => {
-                const notifState = this.notificationState.getForRoom(r);
-                return notifState.count > 0 && notifState.level === this.notificationState.level;
-            });
-        }
-
-        if (room) {
-            defaultDispatcher.dispatch<ViewRoomPayload>({
-                action: Action.ViewRoom,
-                room_id: room.roomId,
-                show_room_tile: true, // to make sure the room gets scrolled into view
-                metricsTrigger: "WebRoomListNotificationBadge",
-                metricsViaKeyboard: ev.type !== "click",
-            });
-        }
-    };
-
-    private onHeaderClick = (): void => {
-        const possibleSticky = this.headerButton.current?.parentElement;
-        const sublist = possibleSticky?.parentElement?.parentElement;
-        const list = sublist?.parentElement?.parentElement;
-        if (!possibleSticky || !list) return;
-
-        // the scrollTop is capped at the height of the header in LeftPanel, the top header is always sticky
-        const listScrollTop = Math.round(list.scrollTop);
-        const isAtTop = listScrollTop <= Math.round(HEADER_HEIGHT);
-        const isAtBottom = listScrollTop >= Math.round(list.scrollHeight - list.offsetHeight);
-        const isStickyTop = possibleSticky.classList.contains("mx_RoomSublist_headerContainer_stickyTop");
-        const isStickyBottom = possibleSticky.classList.contains("mx_RoomSublist_headerContainer_stickyBottom");
-
-        if ((isStickyBottom && !isAtBottom) || (isStickyTop && !isAtTop)) {
-            // is sticky - jump to list
-            sublist.scrollIntoView({ behavior: "smooth" });
-        } else {
-            // on screen - toggle collapse
-            const isExpanded = this.state.isExpanded;
-            this.toggleCollapsed();
-            // if the bottom list is collapsed then scroll it in so it doesn't expand off screen
-            if (!isExpanded && isStickyBottom) {
-                setTimeout(() => {
-                    sublist.scrollIntoView({ behavior: "smooth" });
-                }, 0);
-            }
-        }
-    };
-
-    private toggleCollapsed = (): void => {
-        if (this.props.forceExpanded) return;
-        this.layout.isCollapsed = this.state.isExpanded;
-        this.setState({ isExpanded: !this.layout.isCollapsed });
-        if (this.props.onListCollapse) {
-            this.props.onListCollapse(!this.layout.isCollapsed);
-        }
-    };
-
-    private onHeaderKeyDown = (ev: React.KeyboardEvent): void => {
-        const action = getKeyBindingsManager().getRoomListAction(ev);
-        switch (action) {
-            case KeyBindingAction.CollapseRoomListSection:
-                ev.stopPropagation();
-                if (this.state.isExpanded) {
-                    // Collapse the room sublist if it isn't already
-                    this.toggleCollapsed();
-                }
-                break;
-            case KeyBindingAction.ExpandRoomListSection: {
-                ev.stopPropagation();
-                if (!this.state.isExpanded) {
-                    // Expand the room sublist if it isn't already
-                    this.toggleCollapsed();
-                } else if (this.sublistRef.current) {
-                    // otherwise focus the first room
-                    const element = this.sublistRef.current.querySelector(".mx_RoomTile") as HTMLDivElement;
-                    if (element) {
-                        element.focus();
-                    }
-                }
-                break;
-            }
-        }
-    };
-
-    private onKeyDown = (ev: React.KeyboardEvent): void => {
-        const action = getKeyBindingsManager().getAccessibilityAction(ev);
-        switch (action) {
-            // On ArrowLeft go to the sublist header
-            case KeyBindingAction.ArrowLeft:
-                ev.stopPropagation();
-                this.headerButton.current?.focus();
-                break;
-            // Consume ArrowRight so it doesn't cause focus to get sent to composer
-            case KeyBindingAction.ArrowRight:
-                ev.stopPropagation();
-        }
-    };
-
-    private renderVisibleTiles(): React.ReactElement[] {
-        if (!this.state.isExpanded && !this.props.forceExpanded) {
-            // don't waste time on rendering
-            return [];
-        }
-
-        const tiles: React.ReactElement[] = [];
-
-        if (this.state.rooms) {
-            let visibleRooms = this.state.rooms;
-            if (!this.props.forceExpanded) {
-                visibleRooms = visibleRooms.slice(0, this.numVisibleTiles);
-            }
-
-            for (const room of visibleRooms) {
-                tiles.push(
-                    <RoomTile
-                        room={room}
-                        key={`room-${room.roomId}`}
-                        showMessagePreview={this.layout.showPreviews}
-                        isMinimized={this.props.isMinimized}
-                        tag={this.props.tagId}
-                    />,
-                );
-            }
-        }
-
-        if (this.extraTiles) {
-            // HACK: We break typing here, but this 'extra tiles' property shouldn't exist.
-            (tiles as any[]).push(...this.extraTiles);
-        }
-
-        // We only have to do this because of the extra tiles. We do it conditionally
-        // to avoid spending cycles on slicing. It's generally fine to do this though
-        // as users are unlikely to have more than a handful of tiles when the extra
-        // tiles are used.
-        if (tiles.length > this.numVisibleTiles && !this.props.forceExpanded) {
-            return tiles.slice(0, this.numVisibleTiles);
-        }
-
-        return tiles;
-    }
-
-    private renderMenu(): ReactNode {
-        if (this.props.tagId === DefaultTagID.Suggested) return null; // not sortable
-
-        let contextMenu: JSX.Element | undefined;
-        if (this.state.contextMenuPosition) {
-            const isAlphabetical = RoomListStore.instance.getTagSorting(this.props.tagId) === SortAlgorithm.Alphabetic;
-            const isUnreadFirst = RoomListStore.instance.getListOrder(this.props.tagId) === ListAlgorithm.Importance;
-
-            // Invites don't get some nonsense options, so only add them if we have to.
-            let otherSections: JSX.Element | undefined;
-            if (this.props.tagId !== DefaultTagID.Invite) {
-                otherSections = (
-                    <React.Fragment>
-                        <hr />
-                        <fieldset>
-                            <legend className="mx_RoomSublist_contextMenu_title">{_t("common|appearance")}</legend>
-                            <StyledMenuItemCheckbox
-                                onClose={this.onCloseMenu}
-                                onChange={this.onUnreadFirstChanged}
-                                checked={isUnreadFirst}
-                            >
-                                {_t("room_list|sort_unread_first")}
-                            </StyledMenuItemCheckbox>
-                            <StyledMenuItemCheckbox
-                                onClose={this.onCloseMenu}
-                                onChange={this.onMessagePreviewChanged}
-                                checked={this.layout.showPreviews}
-                            >
-                                {_t("room_list|show_previews")}
-                            </StyledMenuItemCheckbox>
-                        </fieldset>
-                    </React.Fragment>
-                );
-            }
-
-            contextMenu = (
-                <ContextMenu
-                    chevronFace={ChevronFace.None}
-                    left={this.state.contextMenuPosition.left}
-                    top={this.state.contextMenuPosition.top + this.state.contextMenuPosition.height}
-                    onFinished={this.onCloseMenu}
-                >
-                    <div className="mx_RoomSublist_contextMenu">
-                        <fieldset>
-                            <legend className="mx_RoomSublist_contextMenu_title">{_t("room_list|sort_by")}</legend>
-                            <StyledMenuItemRadio
-                                onClose={this.onCloseMenu}
-                                onChange={() => this.onTagSortChanged(SortAlgorithm.Recent)}
-                                checked={!isAlphabetical}
-                                name={`mx_${this.props.tagId}_sortBy`}
-                            >
-                                {_t("room_list|sort_by_activity")}
-                            </StyledMenuItemRadio>
-                            <StyledMenuItemRadio
-                                onClose={this.onCloseMenu}
-                                onChange={() => this.onTagSortChanged(SortAlgorithm.Alphabetic)}
-                                checked={isAlphabetical}
-                                name={`mx_${this.props.tagId}_sortBy`}
-                            >
-                                {_t("room_list|sort_by_alphabet")}
-                            </StyledMenuItemRadio>
-                        </fieldset>
-                        {otherSections}
-                    </div>
-                </ContextMenu>
-            );
-        }
-
-        return (
-            <React.Fragment>
-                <ContextMenuTooltipButton
-                    className="mx_RoomSublist_menuButton"
-                    onClick={this.onOpenMenuClick}
-                    title={_t("room_list|sublist_options")}
-                    isExpanded={!!this.state.contextMenuPosition}
-                >
-                    <OverflowHorizontalIcon />
-                </ContextMenuTooltipButton>
-                {contextMenu}
-            </React.Fragment>
-        );
-    }
-
-    private renderHeader(): React.ReactElement {
-        return (
-            <RovingTabIndexWrapper inputRef={this.headerButton}>
-                {({ onFocus, isActive, ref }) => {
-                    const tabIndex = isActive ? 0 : -1;
-
-                    let ariaLabel = _t("a11y_jump_first_unread_room");
-                    if (this.props.tagId === DefaultTagID.Invite) {
-                        ariaLabel = _t("a11y|jump_first_invite");
-                    }
-
-                    const badge = (
-                        <NotificationBadge
-                            hideIfDot={true}
-                            notification={this.notificationState}
-                            onClick={this.onBadgeClick}
-                            tabIndex={tabIndex}
-                            aria-label={ariaLabel}
-                            showUnsentTooltip={true}
-                        />
-                    );
-
-                    let addRoomButton: JSX.Element | undefined;
-                    if (this.props.AuxButtonComponent) {
-                        const AuxButtonComponent = this.props.AuxButtonComponent;
-                        addRoomButton = <AuxButtonComponent tabIndex={tabIndex} />;
-                    }
-
-                    const collapsed = !this.state.isExpanded && !this.props.forceExpanded;
-                    const classes = classNames({
-                        mx_RoomSublist_headerContainer: true,
-                        mx_RoomSublist_headerContainer_withAux: !!addRoomButton,
-                    });
-
-                    const badgeContainer = <div className="mx_RoomSublist_badgeContainer">{badge}</div>;
-
-                    // Note: the addRoomButton conditionally gets moved around
-                    // the DOM depending on whether or not the list is minimized.
-                    // If we're minimized, we want it below the header so it
-                    // doesn't become sticky.
-                    // The same applies to the notification badge.
-                    return (
-                        <div
-                            className={classes}
-                            onKeyDown={this.onHeaderKeyDown}
-                            onFocus={onFocus}
-                            aria-label={this.props.label}
-                            role="treeitem"
-                            aria-expanded={this.state.isExpanded}
-                            aria-level={1}
-                            aria-selected="false"
-                        >
-                            <div className="mx_RoomSublist_stickableContainer">
-                                <div className="mx_RoomSublist_stickable">
-                                    <AccessibleButton
-                                        onFocus={onFocus}
-                                        ref={ref}
-                                        tabIndex={tabIndex}
-                                        className="mx_RoomSublist_headerText"
-                                        aria-expanded={this.state.isExpanded}
-                                        onClick={this.onHeaderClick}
-                                        onContextMenu={this.onContextMenu}
-                                        title={this.props.isMinimized ? this.props.label : undefined}
-                                    >
-                                        <span className="mx_RoomSublist_collapseBtn">
-                                            {collapsed ? <ChevronRightIcon /> : <ChevronDownIcon />}
-                                        </span>
-                                        <span id={getLabelId(this.props.tagId)}>{this.props.label}</span>
-                                    </AccessibleButton>
-                                    {this.renderMenu()}
-                                    {this.props.isMinimized ? null : badgeContainer}
-                                    {this.props.isMinimized ? null : addRoomButton}
-                                </div>
-                            </div>
-                            {this.props.isMinimized ? badgeContainer : null}
-                            {this.props.isMinimized ? addRoomButton : null}
-                        </div>
-                    );
-                }}
-            </RovingTabIndexWrapper>
-        );
-    }
-
-    private onScrollPrevent(this: void, e: Event): void {
-        // the RoomTile calls scrollIntoView and the browser may scroll a div we do not wish to be scrollable
-        // this fixes https://github.com/vector-im/element-web/issues/14413
-        (e.target as HTMLDivElement).scrollTop = 0;
-    }
-
-    public render(): React.ReactElement {
-        const visibleTiles = this.renderVisibleTiles();
-        const hidden = !this.state.rooms.length && !this.props.extraTiles?.length && this.props.alwaysVisible !== true;
-        const classes = classNames({
-            mx_RoomSublist: true,
-            mx_RoomSublist_hasMenuOpen: !!this.state.contextMenuPosition,
-            mx_RoomSublist_minimized: this.props.isMinimized,
-            mx_RoomSublist_hidden: hidden,
-        });
-
-        let content: JSX.Element | undefined;
-        if (this.state.roomsLoading) {
-            content = <div className="mx_RoomSublist_skeletonUI" />;
-        } else if (visibleTiles.length > 0 && this.props.forceExpanded) {
-            content = (
-                <div className="mx_RoomSublist_resizeBox mx_RoomSublist_resizeBox_forceExpanded">
-                    <div className="mx_RoomSublist_tiles" ref={this.tilesRef}>
-                        {visibleTiles}
-                    </div>
-                </div>
-            );
-        } else if (visibleTiles.length > 0) {
-            const layout = this.layout; // to shorten calls
-
-            const minTiles = Math.min(layout.minVisibleTiles, this.numTiles);
-            const showMoreAtMinHeight = minTiles < this.numTiles;
-            const minHeightPadding = RESIZE_HANDLE_HEIGHT + (showMoreAtMinHeight ? SHOW_N_BUTTON_HEIGHT : 0);
-            const minTilesPx = layout.tilesToPixelsWithPadding(minTiles, minHeightPadding);
-            const maxTilesPx = layout.tilesToPixelsWithPadding(this.numTiles, this.padding);
-            const showMoreBtnClasses = classNames({
-                mx_RoomSublist_showNButton: true,
-            });
-
-            // If we're hiding rooms, show a 'show more' button to the user. This button
-            // floats above the resize handle, if we have one present. If the user has all
-            // tiles visible, it becomes 'show less'.
-            let showNButton: JSX.Element | undefined;
-
-            if (maxTilesPx > this.state.height) {
-                // the height of all the tiles is greater than the section height: we need a 'show more' button
-                const nonPaddedHeight = this.state.height - RESIZE_HANDLE_HEIGHT - SHOW_N_BUTTON_HEIGHT;
-                const amountFullyShown = Math.floor(nonPaddedHeight / this.layout.tileHeight);
-                const numMissing = this.numTiles - amountFullyShown;
-                const label = _t("room_list|show_n_more", { count: numMissing });
-                let showMoreText: ReactNode = <span className="mx_RoomSublist_showNButtonText">{label}</span>;
-                if (this.props.isMinimized) showMoreText = null;
-                showNButton = (
-                    <RovingAccessibleButton
-                        role="treeitem"
-                        onClick={this.onShowAllClick}
-                        className={showMoreBtnClasses}
-                        aria-label={label}
-                    >
-                        <ChevronDownIcon className="mx_RoomSublist_showNButtonChevron" />
-                        {showMoreText}
-                    </RovingAccessibleButton>
-                );
-            } else if (this.numTiles > this.layout.defaultVisibleTiles) {
-                // we have all tiles visible - add a button to show less
-                const label = _t("room_list|show_less");
-                let showLessText: ReactNode = <span className="mx_RoomSublist_showNButtonText">{label}</span>;
-                if (this.props.isMinimized) showLessText = null;
-                showNButton = (
-                    <RovingAccessibleButton
-                        role="treeitem"
-                        onClick={this.onShowLessClick}
-                        className={showMoreBtnClasses}
-                        aria-label={label}
-                    >
-                        <ChevronUpIcon className="mx_RoomSublist_showNButtonChevron" />
-                        {showLessText}
-                    </RovingAccessibleButton>
-                );
-            }
-
-            // Figure out if we need a handle
-            const handles: Enable = {
-                bottom: true, // the only one we need, but the others must be explicitly false
-                bottomLeft: false,
-                bottomRight: false,
-                left: false,
-                right: false,
-                top: false,
-                topLeft: false,
-                topRight: false,
-            };
-            if (layout.visibleTiles >= this.numTiles && this.numTiles <= layout.minVisibleTiles) {
-                // we're at a minimum, don't have a bottom handle
-                handles.bottom = false;
-            }
-
-            // We have to account for padding so we can accommodate a 'show more' button and
-            // the resize handle, which are pinned to the bottom of the container. This is the
-            // easiest way to have a resize handle below the button as otherwise we're writing
-            // our own resize handling and that doesn't sound fun.
-            //
-            // The layout class has some helpers for dealing with padding, as we don't want to
-            // apply it in all cases. If we apply it in all cases, the resizing feels like it
-            // goes backwards and can become wildly incorrect (visibleTiles says 18 when there's
-            // only mathematically 7 possible).
-
-            const handleWrapperClasses = classNames({
-                mx_RoomSublist_resizerHandles: true,
-                mx_RoomSublist_resizerHandles_showNButton: !!showNButton,
-            });
-
-            content = (
-                <React.Fragment>
-                    <Resizable
-                        size={{ height: this.state.height } as any}
-                        minHeight={minTilesPx}
-                        maxHeight={maxTilesPx}
-                        onResizeStart={this.onResizeStart}
-                        onResizeStop={this.onResizeStop}
-                        onResize={this.onResize}
-                        handleWrapperClass={handleWrapperClasses}
-                        handleClasses={{ bottom: "mx_RoomSublist_resizerHandle" }}
-                        className="mx_RoomSublist_resizeBox"
-                        enable={handles}
-                    >
-                        <div className="mx_RoomSublist_tiles" ref={this.tilesRef}>
-                            {visibleTiles}
-                        </div>
-                        {showNButton}
-                    </Resizable>
-                </React.Fragment>
-            );
-        } else if (this.props.showSkeleton && this.state.isExpanded) {
-            content = <div className="mx_RoomSublist_skeletonUI" />;
-        }
-
-        return (
-            <div
-                ref={this.sublistRef}
-                className={classes}
-                role="group"
-                aria-hidden={hidden}
-                aria-labelledby={getLabelId(this.props.tagId)}
-                onKeyDown={this.onKeyDown}
-            >
-                {this.renderHeader()}
-                {content}
-            </div>
-        );
-    }
-}
diff --git a/apps/web/src/components/views/rooms/RoomTile.tsx b/apps/web/src/components/views/rooms/RoomTile.tsx
deleted file mode 100644
index 74bfc63221..0000000000
--- a/apps/web/src/components/views/rooms/RoomTile.tsx
+++ /dev/null
@@ -1,483 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2015-2017 , 2019-2021 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { createRef } from "react";
-import { type Room, RoomEvent } from "matrix-js-sdk/src/matrix";
-import { KnownMembership } from "matrix-js-sdk/src/types";
-import classNames from "classnames";
-import { OverflowHorizontalIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-
-import type { Call } from "../../../models/Call";
-import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
-import AccessibleButton, { type ButtonEvent } from "../../views/elements/AccessibleButton";
-import defaultDispatcher from "../../../dispatcher/dispatcher";
-import { Action } from "../../../dispatcher/actions";
-import { _t } from "../../../languageHandler";
-import { ChevronFace, ContextMenuTooltipButton, type MenuProps } from "../../structures/ContextMenu";
-import { DefaultTagID, type TagID } from "../../../stores/room-list-v3/skip-list/tag";
-import { type MessagePreview, MessagePreviewStore } from "../../../stores/message-preview";
-import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
-import { RoomNotifState } from "../../../RoomNotifs";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import { RoomNotificationContextMenu } from "../context_menus/RoomNotificationContextMenu";
-import NotificationBadge from "./NotificationBadge";
-import { type ActionPayload } from "../../../dispatcher/payloads";
-import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
-import { type NotificationState, NotificationStateEvents } from "../../../stores/notifications/NotificationState";
-import { EchoChamber } from "../../../stores/local-echo/EchoChamber";
-import { CachedRoomKey, type RoomEchoChamber } from "../../../stores/local-echo/RoomEchoChamber";
-import { PROPERTY_UPDATED } from "../../../stores/local-echo/GenericEchoChamber";
-import PosthogTrackers from "../../../PosthogTrackers";
-import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
-import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
-import { getKeyBindingsManager } from "../../../KeyBindingsManager";
-import { RoomGeneralContextMenu } from "../context_menus/RoomGeneralContextMenu";
-import { CallStore, CallStoreEvent } from "../../../stores/CallStore";
-import { SdkContextClass } from "../../../contexts/SDKContext";
-import { RoomTileSubtitle } from "./RoomTileSubtitle";
-import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
-import { UIComponent } from "../../../settings/UIFeature";
-import { isKnockDenied } from "../../../utils/membership";
-import SettingsStore from "../../../settings/SettingsStore";
-import { getNotificationIcon } from "../dialogs/spotlight/RoomResultContextMenus.tsx";
-
-interface Props {
-    room: Room;
-    showMessagePreview: boolean;
-    isMinimized: boolean;
-    tag: TagID;
-}
-
-type PartialDOMRect = Pick<DOMRect, "left" | "bottom">;
-
-interface State {
-    selected: boolean;
-    notificationsMenuPosition: PartialDOMRect | null;
-    generalMenuPosition: PartialDOMRect | null;
-    call: Call | null;
-    messagePreview: MessagePreview | null;
-}
-
-const messagePreviewId = (roomId: string): string => `mx_RoomTile_messagePreview_${roomId}`;
-
-export const contextMenuBelow = (elementRect: PartialDOMRect): MenuProps => {
-    // align the context menu's icons with the icon which opened the context menu
-    const left = elementRect.left + window.scrollX - 9;
-    const top = elementRect.bottom + window.scrollY + 17;
-    const chevronFace = ChevronFace.None;
-    return { left, top, chevronFace };
-};
-
-class RoomTile extends React.PureComponent<Props, State> {
-    private dispatcherRef?: string;
-    private roomTileRef = createRef<HTMLDivElement>();
-    private notificationState: NotificationState;
-    private roomProps: RoomEchoChamber;
-
-    public constructor(props: Props) {
-        super(props);
-
-        this.state = {
-            selected: SdkContextClass.instance.roomViewStore.getRoomId() === this.props.room.roomId,
-            notificationsMenuPosition: null,
-            generalMenuPosition: null,
-            call: CallStore.instance.getCall(this.props.room.roomId),
-            // generatePreview() will return nothing if the user has previews disabled
-            messagePreview: null,
-        };
-
-        this.notificationState = RoomNotificationStateStore.instance.getRoomState(this.props.room);
-        this.roomProps = EchoChamber.forRoom(this.props.room);
-    }
-
-    private onRoomNameUpdate = (room: Room): void => {
-        this.forceUpdate();
-    };
-
-    private onNotificationUpdate = (): void => {
-        this.forceUpdate(); // notification state changed - update
-    };
-
-    private onRoomPropertyUpdate = (property: CachedRoomKey): void => {
-        if (property === CachedRoomKey.NotificationVolume) this.onNotificationUpdate();
-        // else ignore - not important for this tile
-    };
-
-    private get showContextMenu(): boolean {
-        return (
-            this.props.tag !== DefaultTagID.Invite &&
-            this.props.room.getMyMembership() !== KnownMembership.Knock &&
-            !isKnockDenied(this.props.room) &&
-            shouldShowComponent(UIComponent.RoomOptionsMenu)
-        );
-    }
-
-    private get showMessagePreview(): boolean {
-        return !this.props.isMinimized && this.props.showMessagePreview;
-    }
-
-    public componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>): void {
-        const showMessageChanged = prevProps.showMessagePreview !== this.props.showMessagePreview;
-        const minimizedChanged = prevProps.isMinimized !== this.props.isMinimized;
-        if (showMessageChanged || minimizedChanged) {
-            this.generatePreview();
-        }
-        if (prevProps.room?.roomId !== this.props.room?.roomId) {
-            MessagePreviewStore.instance.off(
-                MessagePreviewStore.getPreviewChangedEventName(prevProps.room),
-                this.onRoomPreviewChanged,
-            );
-            MessagePreviewStore.instance.on(
-                MessagePreviewStore.getPreviewChangedEventName(this.props.room),
-                this.onRoomPreviewChanged,
-            );
-            prevProps.room?.off(RoomEvent.Name, this.onRoomNameUpdate);
-            this.props.room?.on(RoomEvent.Name, this.onRoomNameUpdate);
-        }
-    }
-
-    public componentDidMount(): void {
-        this.generatePreview();
-
-        // when we're first rendered (or our sublist is expanded) make sure we are visible if we're active
-        if (this.state.selected) {
-            this.scrollIntoView();
-        }
-
-        SdkContextClass.instance.roomViewStore.addRoomListener(this.props.room.roomId, this.onActiveRoomUpdate);
-        this.dispatcherRef = defaultDispatcher.register(this.onAction);
-        MessagePreviewStore.instance.on(
-            MessagePreviewStore.getPreviewChangedEventName(this.props.room),
-            this.onRoomPreviewChanged,
-        );
-        this.notificationState.on(NotificationStateEvents.Update, this.onNotificationUpdate);
-        this.roomProps.on(PROPERTY_UPDATED, this.onRoomPropertyUpdate);
-        this.props.room.on(RoomEvent.Name, this.onRoomNameUpdate);
-        CallStore.instance.on(CallStoreEvent.Call, this.onCallChanged);
-
-        // Recalculate the call for this room, since it could've changed between
-        // construction and mounting
-        this.setState({ call: CallStore.instance.getCall(this.props.room.roomId) });
-    }
-
-    public componentWillUnmount(): void {
-        SdkContextClass.instance.roomViewStore.removeRoomListener(this.props.room.roomId, this.onActiveRoomUpdate);
-        MessagePreviewStore.instance.off(
-            MessagePreviewStore.getPreviewChangedEventName(this.props.room),
-            this.onRoomPreviewChanged,
-        );
-        this.props.room.off(RoomEvent.Name, this.onRoomNameUpdate);
-        defaultDispatcher.unregister(this.dispatcherRef);
-        this.notificationState.off(NotificationStateEvents.Update, this.onNotificationUpdate);
-        this.roomProps.off(PROPERTY_UPDATED, this.onRoomPropertyUpdate);
-        CallStore.instance.off(CallStoreEvent.Call, this.onCallChanged);
-    }
-
-    private onAction = (payload: ActionPayload): void => {
-        if (
-            payload.action === Action.ViewRoom &&
-            payload.room_id === this.props.room.roomId &&
-            payload.show_room_tile
-        ) {
-            setTimeout(() => {
-                this.scrollIntoView();
-            });
-        }
-    };
-
-    private onRoomPreviewChanged = (room: Room): void => {
-        if (this.props.room && room.roomId === this.props.room.roomId) {
-            this.generatePreview();
-        }
-    };
-
-    private onCallChanged = (call: Call, roomId: string): void => {
-        if (roomId === this.props.room?.roomId) this.setState({ call });
-    };
-
-    private async generatePreview(): Promise<void> {
-        if (!this.showMessagePreview) {
-            return;
-        }
-
-        const messagePreview =
-            (await MessagePreviewStore.instance.getPreviewForRoom(this.props.room, this.props.tag)) ?? null;
-        this.setState({ messagePreview });
-    }
-
-    private scrollIntoView = (): void => {
-        if (!this.roomTileRef.current) return;
-        this.roomTileRef.current.scrollIntoView({
-            block: "nearest",
-            behavior: "auto",
-        });
-    };
-
-    private onTileClick = async (ev: ButtonEvent): Promise<void> => {
-        ev.preventDefault();
-        ev.stopPropagation();
-
-        const action = getKeyBindingsManager().getAccessibilityAction(ev as React.KeyboardEvent);
-        const clearSearch = ([KeyBindingAction.Enter, KeyBindingAction.Space] as Array<string | undefined>).includes(
-            action,
-        );
-
-        defaultDispatcher.dispatch<ViewRoomPayload>({
-            action: Action.ViewRoom,
-            show_room_tile: true, // make sure the room is visible in the list
-            room_id: this.props.room.roomId,
-            clear_search: clearSearch,
-            metricsTrigger: "RoomList",
-            metricsViaKeyboard: ev.type !== "click",
-        });
-    };
-
-    private onActiveRoomUpdate = (isActive: boolean): void => {
-        this.setState({ selected: isActive });
-    };
-
-    private onNotificationsMenuOpenClick = (ev: ButtonEvent): void => {
-        ev.preventDefault();
-        ev.stopPropagation();
-        const target = ev.target as HTMLButtonElement;
-        this.setState({ notificationsMenuPosition: target.getBoundingClientRect() });
-
-        PosthogTrackers.trackInteraction("WebRoomListRoomTileNotificationsMenu", ev);
-    };
-
-    private onCloseNotificationsMenu = (): void => {
-        this.setState({ notificationsMenuPosition: null });
-    };
-
-    private onGeneralMenuOpenClick = (ev: ButtonEvent): void => {
-        ev.preventDefault();
-        ev.stopPropagation();
-        const target = ev.target as HTMLButtonElement;
-        this.setState({ generalMenuPosition: target.getBoundingClientRect() });
-    };
-
-    private onContextMenu = (ev: React.MouseEvent): void => {
-        // If we don't have a context menu to show, ignore the action.
-        if (!this.showContextMenu) return;
-
-        ev.preventDefault();
-        ev.stopPropagation();
-        this.setState({
-            generalMenuPosition: {
-                left: ev.clientX,
-                bottom: ev.clientY,
-            },
-        });
-    };
-
-    private onCloseGeneralMenu = (): void => {
-        this.setState({ generalMenuPosition: null });
-    };
-
-    private renderNotificationsMenu(isActive: boolean): React.ReactElement | null {
-        if (
-            MatrixClientPeg.safeGet().isGuest() ||
-            this.props.tag === DefaultTagID.Archived ||
-            !this.showContextMenu ||
-            this.props.isMinimized
-        ) {
-            // the menu makes no sense in these cases so do not show one
-            return null;
-        }
-
-        const state = this.roomProps.notificationVolume;
-
-        const classes = classNames("mx_RoomTile_notificationsButton", {
-            // Only show the icon by default if the room is overridden to muted.
-            // TODO: [FTUE Notifications] Probably need to detect global mute state
-            mx_RoomTile_notificationsButton_show: state === RoomNotifState.Mute,
-        });
-
-        return (
-            <React.Fragment>
-                <ContextMenuTooltipButton
-                    className={classes}
-                    onClick={this.onNotificationsMenuOpenClick}
-                    title={_t("room_list|notification_options")}
-                    isExpanded={!!this.state.notificationsMenuPosition}
-                    tabIndex={isActive ? 0 : -1}
-                >
-                    {getNotificationIcon(state!)}
-                </ContextMenuTooltipButton>
-                {this.state.notificationsMenuPosition && (
-                    <RoomNotificationContextMenu
-                        {...contextMenuBelow(this.state.notificationsMenuPosition)}
-                        onFinished={this.onCloseNotificationsMenu}
-                        room={this.props.room}
-                    />
-                )}
-            </React.Fragment>
-        );
-    }
-
-    private renderGeneralMenu(): React.ReactElement | null {
-        if (!this.showContextMenu) return null; // no menu to show
-        return (
-            <React.Fragment>
-                <ContextMenuTooltipButton
-                    className="mx_RoomTile_menuButton"
-                    onClick={this.onGeneralMenuOpenClick}
-                    title={_t("room|context_menu|title")}
-                    isExpanded={!!this.state.generalMenuPosition}
-                >
-                    <OverflowHorizontalIcon />
-                </ContextMenuTooltipButton>
-                {this.state.generalMenuPosition && (
-                    <RoomGeneralContextMenu
-                        {...contextMenuBelow(this.state.generalMenuPosition)}
-                        onFinished={this.onCloseGeneralMenu}
-                        room={this.props.room}
-                        onPostFavoriteClick={(ev: ButtonEvent) =>
-                            PosthogTrackers.trackInteraction("WebRoomListRoomTileContextMenuFavouriteToggle", ev)
-                        }
-                        onPostInviteClick={(ev: ButtonEvent) =>
-                            PosthogTrackers.trackInteraction("WebRoomListRoomTileContextMenuInviteItem", ev)
-                        }
-                        onPostSettingsClick={(ev: ButtonEvent) =>
-                            PosthogTrackers.trackInteraction("WebRoomListRoomTileContextMenuSettingsItem", ev)
-                        }
-                        onPostLeaveClick={(ev: ButtonEvent) =>
-                            PosthogTrackers.trackInteraction("WebRoomListRoomTileContextMenuLeaveItem", ev)
-                        }
-                        onPostMarkAsReadClick={(ev: ButtonEvent) =>
-                            PosthogTrackers.trackInteraction("WebRoomListRoomTileContextMenuMarkRead", ev)
-                        }
-                        onPostMarkAsUnreadClick={(ev: ButtonEvent) =>
-                            PosthogTrackers.trackInteraction("WebRoomListRoomTileContextMenuMarkUnread", ev)
-                        }
-                    />
-                )}
-            </React.Fragment>
-        );
-    }
-
-    /**
-     * RoomTile has a subtile if one of the following applies:
-     * - there is a call
-     * - message previews are enabled and there is a previewable message
-     */
-    private get shouldRenderSubtitle(): boolean {
-        return !!this.state.call || (this.props.showMessagePreview && !!this.state.messagePreview);
-    }
-
-    public render(): React.ReactElement {
-        const classes = classNames({
-            mx_RoomTile: true,
-            mx_RoomTile_sticky:
-                SettingsStore.getValue("feature_ask_to_join") &&
-                (this.props.room.getMyMembership() === KnownMembership.Knock || isKnockDenied(this.props.room)),
-            mx_RoomTile_selected: this.state.selected,
-            mx_RoomTile_hasMenuOpen: !!(this.state.generalMenuPosition || this.state.notificationsMenuPosition),
-            mx_RoomTile_minimized: this.props.isMinimized,
-        });
-
-        let name = this.props.room.name;
-        if (typeof name !== "string") name = "";
-        name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
-
-        let badge: React.ReactNode;
-        if (!this.props.isMinimized && this.notificationState) {
-            // aria-hidden because we summarise the unread count/highlight status in a manual aria-label below
-            badge = (
-                <div className="mx_RoomTile_badgeContainer" aria-hidden="true">
-                    <NotificationBadge notification={this.notificationState} roomId={this.props.room.roomId} />
-                </div>
-            );
-        }
-
-        const subtitle = this.shouldRenderSubtitle ? (
-            <RoomTileSubtitle
-                call={this.state.call}
-                messagePreview={this.state.messagePreview}
-                roomId={this.props.room.roomId}
-                showMessagePreview={this.props.showMessagePreview}
-            />
-        ) : null;
-
-        const titleClasses = classNames({
-            mx_RoomTile_title: true,
-            mx_RoomTile_titleWithSubtitle: !!subtitle,
-            mx_RoomTile_titleHasUnreadEvents: this.notificationState.isUnread,
-        });
-
-        const titleContainer = this.props.isMinimized ? null : (
-            <div className="mx_RoomTile_titleContainer">
-                <div title={name} className={titleClasses} tabIndex={-1}>
-                    <span dir="auto">{name}</span>
-                </div>
-                {subtitle}
-            </div>
-        );
-
-        let ariaLabel = name;
-        // The following labels are written in such a fashion to increase screen reader efficiency (speed).
-        if (this.props.tag === DefaultTagID.Invite) {
-            // append nothing
-        } else if (this.notificationState.hasMentions) {
-            ariaLabel +=
-                " " +
-                _t("a11y|n_unread_messages_mentions", {
-                    count: this.notificationState.count,
-                });
-        } else if (this.notificationState.hasUnreadCount) {
-            ariaLabel +=
-                " " +
-                _t("a11y|n_unread_messages", {
-                    count: this.notificationState.count,
-                });
-        } else if (this.notificationState.isUnread) {
-            ariaLabel += " " + _t("a11y|unread_messages");
-        }
-
-        let ariaDescribedBy: string;
-        if (this.showMessagePreview) {
-            ariaDescribedBy = messagePreviewId(this.props.room.roomId);
-        }
-
-        return (
-            <React.Fragment>
-                <RovingTabIndexWrapper inputRef={this.roomTileRef}>
-                    {({ onFocus, isActive, ref }) => (
-                        <AccessibleButton
-                            onFocus={onFocus}
-                            tabIndex={isActive ? 0 : -1}
-                            ref={ref}
-                            className={classes}
-                            onClick={this.onTileClick}
-                            onContextMenu={this.onContextMenu}
-                            role="treeitem"
-                            aria-label={ariaLabel}
-                            aria-selected={this.state.selected}
-                            aria-describedby={ariaDescribedBy}
-                            title={this.props.isMinimized && !this.state.generalMenuPosition ? name : undefined}
-                        >
-                            <DecoratedRoomAvatar
-                                room={this.props.room}
-                                size="32px"
-                                displayBadge={this.props.isMinimized}
-                                tooltipProps={{ tabIndex: isActive ? 0 : -1 }}
-                            />
-                            {titleContainer}
-                            {badge}
-                            {this.renderGeneralMenu()}
-                            {this.renderNotificationsMenu(isActive)}
-                        </AccessibleButton>
-                    )}
-                </RovingTabIndexWrapper>
-            </React.Fragment>
-        );
-    }
-}
-
-export default RoomTile;
diff --git a/apps/web/src/components/views/rooms/RoomTileCallSummary.tsx b/apps/web/src/components/views/rooms/RoomTileCallSummary.tsx
deleted file mode 100644
index eed7d012e2..0000000000
--- a/apps/web/src/components/views/rooms/RoomTileCallSummary.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { type FC } from "react";
-
-import type { Call } from "../../../models/Call";
-import { _t } from "../../../languageHandler";
-import { useConnectionState, useParticipantCount } from "../../../hooks/useCall";
-import { ConnectionState } from "../../../models/Call";
-import { LiveContentSummary, LiveContentType } from "./LiveContentSummary";
-
-interface Props {
-    call: Call;
-}
-
-export const RoomTileCallSummary: FC<Props> = ({ call }) => {
-    let text: string;
-    let active: boolean;
-
-    switch (useConnectionState(call)) {
-        case ConnectionState.Disconnected:
-            text = _t("common|video");
-            active = false;
-            break;
-        case ConnectionState.Connected:
-        case ConnectionState.Disconnecting:
-            text = _t("common|joined");
-            active = true;
-            break;
-    }
-
-    return (
-        <LiveContentSummary
-            type={LiveContentType.Video}
-            text={text}
-            active={active}
-            participantCount={useParticipantCount(call)}
-        />
-    );
-};
diff --git a/apps/web/src/components/views/rooms/RoomTileSubtitle.tsx b/apps/web/src/components/views/rooms/RoomTileSubtitle.tsx
deleted file mode 100644
index 6e11c91e0e..0000000000
--- a/apps/web/src/components/views/rooms/RoomTileSubtitle.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2023 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React from "react";
-import classNames from "classnames";
-import { ThreadsIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-
-import { type MessagePreview } from "../../../stores/message-preview";
-import { type Call } from "../../../models/Call";
-import { RoomTileCallSummary } from "./RoomTileCallSummary";
-
-interface Props {
-    call: Call | null;
-    messagePreview: MessagePreview | null;
-    roomId: string;
-    showMessagePreview: boolean;
-}
-
-const messagePreviewId = (roomId: string): string => `mx_RoomTile_messagePreview_${roomId}`;
-
-export const RoomTileSubtitle: React.FC<Props> = ({ call, messagePreview, roomId, showMessagePreview }) => {
-    if (call) {
-        return (
-            <div className="mx_RoomTile_subtitle">
-                <RoomTileCallSummary call={call} />
-            </div>
-        );
-    }
-
-    if (showMessagePreview && messagePreview) {
-        const className = classNames("mx_RoomTile_subtitle", {
-            "mx_RoomTile_subtitle--thread-reply": messagePreview.isThreadReply,
-        });
-
-        const icon = messagePreview.isThreadReply ? <ThreadsIcon className="mx_Icon mx_Icon_12" /> : null;
-
-        return (
-            <div className={className} id={messagePreviewId(roomId)} title={messagePreview.text}>
-                {icon}
-                <span className="mx_RoomTile_subtitle_text">{messagePreview.text}</span>
-            </div>
-        );
-    }
-
-    return null;
-};
diff --git a/apps/web/src/components/views/rooms/SearchResultTile.tsx b/apps/web/src/components/views/rooms/SearchResultTile.tsx
index 59cc1f7fb7..8b37f47b59 100644
--- a/apps/web/src/components/views/rooms/SearchResultTile.tsx
+++ b/apps/web/src/components/views/rooms/SearchResultTile.tsx
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX } from "react";
+import React, { type JSX, useContext } from "react";
 import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { DateSeparatorView, useCreateAutoDisposedViewModel } from "@element-hq/web-shared-components";
 
@@ -22,6 +22,7 @@ import { buildLegacyCallEventGroupers } from "../../structures/LegacyCallEventGr
 import { haveRendererForEvent } from "../../../events/EventTileFactory";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { DateSeparatorViewModel } from "../../../viewmodels/room/timeline/DateSeparatorViewModel";
+import { SDKContext } from "../../../contexts/SDKContext.ts";
 
 interface IProps {
     // a list of strings to be highlighted in the results
@@ -39,7 +40,10 @@ interface IProps {
  * Creates and auto-disposes the DateSeparatorViewModel for search result rendering.
  */
 function DateSeparatorWrapper({ roomId, ts }: { roomId: string; ts: number }): JSX.Element {
-    const vm = useCreateAutoDisposedViewModel(() => new DateSeparatorViewModel({ roomId, ts }));
+    const sdkContext = useContext(SDKContext);
+    const vm = useCreateAutoDisposedViewModel(
+        () => new DateSeparatorViewModel({ roomId, ts, roomViewStore: sdkContext.roomViewStore }),
+    );
     return <DateSeparatorView vm={vm} className="mx_TimelineSeparator" />;
 }
 
diff --git a/apps/web/src/components/views/rooms/SendMessageComposer.tsx b/apps/web/src/components/views/rooms/SendMessageComposer.tsx
index 0d9a68c45d..13cdefaa69 100644
--- a/apps/web/src/components/views/rooms/SendMessageComposer.tsx
+++ b/apps/web/src/components/views/rooms/SendMessageComposer.tsx
@@ -6,7 +6,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createRef, type KeyboardEvent, type SyntheticEvent } from "react";
+import React, {
+    createRef,
+    type KeyboardEvent,
+    type SyntheticEvent,
+    type RefAttributes,
+    type ReactElement,
+} from "react";
 import {
     type MatrixEvent,
     type IEventRelation,
@@ -19,8 +25,8 @@ import {
 import { type DebouncedFunc, throttle } from "lodash";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type Composer as ComposerEvent } from "@matrix-org/analytics-events/types/typescript/Composer";
-import { type RoomMessageEventContent } from "matrix-js-sdk/src/types";
 
+import { type RoomMessageEventContent } from "../../../../@types/url-preview";
 import dis from "../../../dispatcher/dispatcher";
 import EditorModel from "../../../editor/model";
 import {
@@ -37,8 +43,7 @@ import { CommandPartCreator, type Part, type PartCreator, type SerializedPart }
 import { findEditableEvent } from "../../../utils/EventUtils";
 import SendHistoryManager from "../../../SendHistoryManager";
 import { CommandCategories } from "../../../slash-commands/SlashCommands";
-import ContentMessages from "../../../ContentMessages";
-import { withMatrixClientHOC, type MatrixClientProps } from "../../../contexts/MatrixClientContext";
+import { useMatrixClientContext, type MatrixClientProps } from "../../../contexts/MatrixClientContext";
 import { Action } from "../../../dispatcher/actions";
 import { containsEmoji } from "../../../effects/utils";
 import { CHAT_EFFECTS } from "../../../effects";
@@ -59,7 +64,10 @@ import { type Caret } from "../../../editor/caret";
 import { type IDiff } from "../../../editor/diff";
 import { getBlobSafeMimeType } from "../../../utils/blobs";
 import { EMOJI_REGEX } from "../../../HtmlUtils";
-import { attachMentions, attachRelation } from "../../../utils/messages";
+import { attachMentions, attachRelation, attachUrlPreviews } from "../../../utils/messages";
+import { type RoomUploadViewModel, useRoomUploadViewModel } from "../../../viewmodels/room/RoomUploadViewModel";
+import { type MessageComposerUrlPreviewViewModel } from "../../../viewmodels/composer/MessageComposerUrlPreviewViewModel";
+import { type MessageComposerUrlPreviewSnapshot } from "@element-hq/web-shared-components";
 
 // The prefix used when persisting editor drafts to localstorage.
 export const EDITOR_STATE_STORAGE_PREFIX = "mx_cider_state_";
@@ -124,12 +132,18 @@ export function isQuickReaction(model: EditorModel): boolean {
 
 interface ISendMessageComposerProps extends MatrixClientProps {
     room: Room;
+    uploadVm: RoomUploadViewModel;
     placeholder?: string;
     relation?: IEventRelation;
     replyToEvent?: MatrixEvent;
     disabled?: boolean;
     onChange?(model: EditorModel): void;
     toggleStickerPickerOpen: () => void;
+    urlPreviewVm: MessageComposerUrlPreviewViewModel;
+}
+
+interface ISendMessageActionProps {
+    urlPreviewSnapshot: MessageComposerUrlPreviewSnapshot;
 }
 
 export class SendMessageComposer extends React.Component<ISendMessageComposerProps> {
@@ -188,10 +202,12 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
         const replyingToThread = this.props.relation?.key === THREAD_RELATION_TYPE.name;
         const action = getKeyBindingsManager().getMessageComposerAction(event);
         switch (action) {
-            case KeyBindingAction.SendMessage:
-                this.sendMessage();
+            case KeyBindingAction.SendMessage: {
+                const urlPreviewSnapshot = this.props.urlPreviewVm.getSnapshot();
+                this.sendMessage({ urlPreviewSnapshot });
                 event.preventDefault();
                 break;
+            }
             case KeyBindingAction.SelectPrevSendHistory:
             case KeyBindingAction.SelectNextSendHistory: {
                 // Try select composer history
@@ -321,7 +337,10 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
         }
     }
 
-    public async sendMessage(): Promise<void> {
+    /*
+     * The URL preview VM snapshot before the composer is cleared
+     */
+    public async sendMessage({ urlPreviewSnapshot }: ISendMessageActionProps): Promise<void> {
         const model = this.model;
 
         if (model.isEmpty) {
@@ -403,6 +422,21 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
             this.sendQuickReaction();
         }
 
+        const clearComposerAndPushHistory = (): void => {
+            this.sendHistoryManager.save(model, replyToEvent);
+            // clear composer
+            model.reset([]);
+            this.editorRef.current?.clearUndoHistory();
+            this.editorRef.current?.focus();
+            this.clearStoredEditorState();
+            if (shouldSend && SettingsStore.getValue("scrollToBottomOnMessageSent")) {
+                dis.dispatch({
+                    action: "scroll_to_bottom",
+                    timelineRenderingType: this.context.timelineRenderingType,
+                });
+            }
+        };
+
         if (shouldSend) {
             const { roomId } = this.props.room;
             if (!content) {
@@ -413,9 +447,14 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
                     this.props.relation,
                 );
             }
+
             // don't bother sending an empty message
             if (!content.body.trim()) return;
 
+            // clear composer first so the user doesn't actually see the delay of attach URL preview image files
+            clearComposerAndPushHistory();
+            attachUrlPreviews(urlPreviewSnapshot, content);
+
             if (SettingsStore.getValue("Performance.addSendMessageTimingMetadata")) {
                 decorateStartSendingTime(content);
             }
@@ -453,19 +492,8 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
                     sendRoundTripMetric(this.props.mxClient, roomId, resp.event_id);
                 });
             }
-        }
-
-        this.sendHistoryManager.save(model, replyToEvent);
-        // clear composer
-        model.reset([]);
-        this.editorRef.current?.clearUndoHistory();
-        this.editorRef.current?.focus();
-        this.clearStoredEditorState();
-        if (shouldSend && SettingsStore.getValue("scrollToBottomOnMessageSent")) {
-            dis.dispatch({
-                action: "scroll_to_bottom",
-                timelineRenderingType: this.context.timelineRenderingType,
-            });
+        } else {
+            clearComposerAndPushHistory();
         }
     }
 
@@ -561,14 +589,7 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
         // We check text/rtf instead of text/plain as when copy+pasting a file from Finder or Gnome Image Viewer
         // it puts the filename in as text/plain which we want to ignore.
         if (data.files.length && !data.types.includes("text/rtf")) {
-            ContentMessages.sharedInstance().sendContentListToRoom(
-                Array.from(data.files),
-                this.props.room.roomId,
-                this.props.relation,
-                this.context.replyToEvent,
-                this.props.mxClient,
-                this.context.timelineRenderingType,
-            );
+            this.props.uploadVm.initiateViaDataTransfer(data);
             return true; // to skip internal onPaste handler
         }
 
@@ -589,7 +610,7 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
                 // Fallback to internal onPaste handler
                 return false;
             }
-            const imgSrc = imgDoc!.querySelector("img")!.src;
+            const imgSrc = imgDoc.querySelector("img")!.src;
 
             fetch(imgSrc).then(
                 (response) => {
@@ -601,13 +622,7 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
                             const parts = response.url.split("/");
                             const filename = parts[parts.length - 1];
                             const file = new File([imgBlob], filename + "." + ext, { type: safetype });
-                            ContentMessages.sharedInstance().sendContentToRoom(
-                                file,
-                                this.props.room.roomId,
-                                this.props.relation,
-                                this.props.mxClient,
-                                this.context.replyToEvent,
-                            );
+                            this.props.uploadVm.initiateViaInputFiles([file]);
                         },
                         (error) => {
                             console.log(error);
@@ -660,5 +675,13 @@ export class SendMessageComposer extends React.Component<ISendMessageComposerPro
     }
 }
 
-const SendMessageComposerWithMatrixClient = withMatrixClientHOC(SendMessageComposer);
-export default SendMessageComposerWithMatrixClient;
+function SendMessageComposerWrapped(
+    props: Omit<ISendMessageComposerProps, "mxClient" | "uploadVm"> &
+        RefAttributes<InstanceType<typeof SendMessageComposer>>,
+): ReactElement {
+    const client = useMatrixClientContext();
+    const uploadVm = useRoomUploadViewModel();
+    return <SendMessageComposer {...props} mxClient={client} uploadVm={uploadVm} />;
+}
+
+export default SendMessageComposerWrapped;
diff --git a/apps/web/src/components/views/rooms/Stickerpicker.tsx b/apps/web/src/components/views/rooms/Stickerpicker.tsx
index 80d9422335..c20e7e0fca 100644
--- a/apps/web/src/components/views/rooms/Stickerpicker.tsx
+++ b/apps/web/src/components/views/rooms/Stickerpicker.tsx
@@ -12,7 +12,6 @@ import { type IWidget } from "matrix-widget-api";
 
 import { _t, _td } from "../../../languageHandler";
 import AppTile from "../elements/AppTile";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import dis from "../../../dispatcher/dispatcher";
 import AccessibleButton from "../elements/AccessibleButton";
 import WidgetUtils, { type UserWidget } from "../../../utils/WidgetUtils";
@@ -24,8 +23,9 @@ import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingSto
 import { type ActionPayload } from "../../../dispatcher/payloads";
 import type ScalarAuthClient from "../../../ScalarAuthClient";
 import GenericElementContextMenu from "../context_menus/GenericElementContextMenu";
-import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
 import { UPDATE_EVENT } from "../../../stores/AsyncStore";
+import StickerpackPlaceholder from "../../../../res/img/stickerpack-placeholder.png";
+import { SDKContext } from "../../../contexts/SDKContext.ts";
 
 // This should be below the dialog level (4000), but above the rest of the UI (1000-2000).
 // We sit in a context menu, so this should be given to the context menu.
@@ -49,6 +49,9 @@ interface IState {
 }
 
 export default class Stickerpicker extends React.PureComponent<IProps, IState> {
+    public static contextType = SDKContext;
+    declare public context: React.ContextType<typeof SDKContext>;
+
     public static defaultProps: Partial<IProps> = {
         threadId: null,
     };
@@ -129,17 +132,16 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
         this.dispatcherRef = dis.register(this.onAction);
 
         // Track updates to widget state in account data
-        MatrixClientPeg.safeGet().on(ClientEvent.AccountData, this.updateWidget);
+        this.context.client?.on(ClientEvent.AccountData, this.updateWidget);
 
-        RightPanelStore.instance.on(UPDATE_EVENT, this.onRightPanelStoreUpdate);
+        this.context.rightPanelStore.on(UPDATE_EVENT, this.onRightPanelStoreUpdate);
         // Initialise widget state from current account data
         this.updateWidget();
     }
 
     public componentWillUnmount(): void {
-        const client = MatrixClientPeg.get();
-        if (client) client.removeListener(ClientEvent.AccountData, this.updateWidget);
-        RightPanelStore.instance.off(UPDATE_EVENT, this.onRightPanelStoreUpdate);
+        this.context.client?.removeListener(ClientEvent.AccountData, this.updateWidget);
+        this.context.rightPanelStore.off(UPDATE_EVENT, this.onRightPanelStoreUpdate);
         window.removeEventListener("resize", this.onResize);
         dis.unregister(this.dispatcherRef);
     }
@@ -200,13 +202,11 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
     };
 
     private defaultStickerpickerContent(): JSX.Element {
-        // eslint-disable-next-line @typescript-eslint/no-require-imports
-        const imgSrc = require("../../../../res/img/stickerpack-placeholder.png");
         return (
             <AccessibleButton onClick={this.launchManageIntegrations} className="mx_Stickers_contentPlaceholder">
                 <p>{_t("stickers|empty")}</p>
                 <p className="mx_Stickers_addLink">{_t("stickers|empty_add_prompt")}</p>
-                <img src={imgSrc} alt="" />
+                <img src={StickerpackPlaceholder} alt="" />
             </AccessibleButton>
         );
     }
@@ -281,9 +281,9 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
                                 room={this.props.room}
                                 threadId={this.props.threadId}
                                 fullWidth={true}
-                                userId={MatrixClientPeg.safeGet().credentials.userId!}
+                                userId={this.context.client?.credentials.userId ?? undefined}
                                 creatorUserId={
-                                    stickerpickerWidget.sender || MatrixClientPeg.safeGet().credentials.userId!
+                                    stickerpickerWidget.sender || this.context.client?.credentials.userId || undefined
                                 }
                                 waitForIframeLoad={true}
                                 showMenubar={true}
diff --git a/apps/web/src/components/views/rooms/ThirdPartyMemberInfo.tsx b/apps/web/src/components/views/rooms/ThirdPartyMemberInfo.tsx
index fb440d98bd..ef5e248bd4 100644
--- a/apps/web/src/components/views/rooms/ThirdPartyMemberInfo.tsx
+++ b/apps/web/src/components/views/rooms/ThirdPartyMemberInfo.tsx
@@ -114,7 +114,7 @@ export default class ThirdPartyMemberInfo extends React.Component<IProps, IState
         if (this.state.canKick && this.state.invited) {
             adminTools = (
                 <Flex direction="column" as="section" justify="start" gap="var(--cpd-space-2x)">
-                    <Text as="span" role="heading" size="lg" weight="semibold">
+                    <Text as="span" role="heading" size="lg" weight="semibold" aria-level={3}>
                         {_t("user_info|admin_tools_section")}
                     </Text>
                     <Button size="md" kind="destructive" className="mx_MemberInfo_field" onClick={this.onKickClick}>
@@ -129,7 +129,7 @@ export default class ThirdPartyMemberInfo extends React.Component<IProps, IState
                 <Flex className="mx_ThirdPartyMemberInfo" direction="column" gap="var(--cpd-space-4x)">
                     <Flex direction="column" as="section" justify="start" gap="var(--cpd-space-2x)">
                         {/* same as userinfo name style */}
-                        <Text as="span" role="heading" size="lg" weight="semibold">
+                        <Text as="span" role="heading" size="lg" weight="semibold" aria-level={2}>
                             {this.state.displayName}
                         </Text>
                         <Text as="span">{_t("user_info|invited_by", { sender: this.state.senderName })}</Text>
diff --git a/apps/web/src/components/views/rooms/ThreadSummary.tsx b/apps/web/src/components/views/rooms/ThreadSummary.tsx
deleted file mode 100644
index 6ad91d7022..0000000000
--- a/apps/web/src/components/views/rooms/ThreadSummary.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { useContext } from "react";
-import { type Thread, ThreadEvent, type MatrixEvent } from "matrix-js-sdk/src/matrix";
-import { IndicatorIcon } from "@vector-im/compound-web";
-import { ThreadsSolidIcon, ChevronRightIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-
-import { _t } from "../../../languageHandler";
-import { CardContext } from "../right_panel/context";
-import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
-import PosthogTrackers from "../../../PosthogTrackers";
-import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter";
-import MemberAvatar from "../avatars/MemberAvatar";
-import { Action } from "../../../dispatcher/actions";
-import { type ShowThreadPayload } from "../../../dispatcher/payloads/ShowThreadPayload";
-import defaultDispatcher from "../../../dispatcher/dispatcher";
-import { useUnreadNotifications } from "../../../hooks/useUnreadNotifications";
-import { notificationLevelToIndicator } from "../../../utils/notifications";
-import { EventPreviewTile, useEventPreview } from "./EventPreview.tsx";
-import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";
-
-interface IProps {
-    mxEvent: MatrixEvent;
-    thread: Thread;
-}
-
-const ThreadSummary: React.FC<IProps> = ({ mxEvent, thread, ...props }) => {
-    const roomContext = useScopedRoomContext("narrow");
-    const cardContext = useContext(CardContext);
-    const count = useTypedEventEmitterState(thread, ThreadEvent.Update, () => thread.length);
-    const { level } = useUnreadNotifications(thread.room, thread.id);
-
-    if (!count) return null; // We don't want to show a thread summary if the thread doesn't have replies yet
-
-    let countSection: string | number = count;
-    if (!roomContext.narrow) {
-        countSection = _t("threads|count_of_reply", { count });
-    }
-
-    return (
-        <AccessibleButton
-            {...props}
-            className="mx_ThreadSummary"
-            onClick={(ev: ButtonEvent) => {
-                defaultDispatcher.dispatch<ShowThreadPayload>({
-                    action: Action.ShowThread,
-                    rootEvent: mxEvent,
-                    push: cardContext.isCard,
-                });
-                PosthogTrackers.trackInteraction("WebRoomTimelineThreadSummaryButton", ev);
-            }}
-            aria-label={_t("threads|open_thread")}
-        >
-            <IndicatorIcon size="24px" indicator={notificationLevelToIndicator(level)}>
-                <ThreadsSolidIcon />
-            </IndicatorIcon>
-            <span className="mx_ThreadSummary_replies_amount">{countSection}</span>
-            <ThreadMessagePreview thread={thread} showDisplayname={!roomContext.narrow} />
-            <div className="mx_ThreadSummary_chevron">
-                <ChevronRightIcon />
-            </div>
-        </AccessibleButton>
-    );
-};
-
-interface IPreviewProps {
-    thread: Thread;
-    showDisplayname?: boolean;
-}
-
-export const ThreadMessagePreview: React.FC<IPreviewProps> = ({ thread, showDisplayname = false }) => {
-    const lastReply = useTypedEventEmitterState(thread, ThreadEvent.Update, () => thread.replyToEvent) ?? undefined;
-    const preview = useEventPreview(lastReply);
-
-    if (!preview || !lastReply) {
-        return null;
-    }
-
-    return (
-        <>
-            <MemberAvatar
-                member={lastReply.sender}
-                fallbackUserId={lastReply.getSender()}
-                size="24px"
-                className="mx_ThreadSummary_avatar"
-            />
-            {showDisplayname && (
-                <div className="mx_ThreadSummary_sender">{lastReply.sender?.name ?? lastReply.getSender()}</div>
-            )}
-
-            {lastReply.isDecryptionFailure() ? (
-                <div
-                    className="mx_ThreadSummary_content mx_DecryptionFailureBody"
-                    title={_t("timeline|decryption_failure|unable_to_decrypt")}
-                >
-                    {_t("timeline|decryption_failure|unable_to_decrypt")}
-                </div>
-            ) : (
-                <EventPreviewTile preview={preview} className="mx_ThreadSummary_content" />
-            )}
-        </>
-    );
-};
-
-export default ThreadSummary;
diff --git a/apps/web/src/components/views/rooms/UserIdentityWarning.tsx b/apps/web/src/components/views/rooms/UserIdentityWarning.tsx
index d5ffdc512f..3b42c545ef 100644
--- a/apps/web/src/components/views/rooms/UserIdentityWarning.tsx
+++ b/apps/web/src/components/views/rooms/UserIdentityWarning.tsx
@@ -15,7 +15,7 @@ import MemberAvatar from "../avatars/MemberAvatar";
 import {
     useUserIdentityWarningViewModel,
     type ViolationPrompt,
-} from "../../viewmodels/rooms/UserIdentityWarningViewModel.tsx";
+} from "../../viewmodels/rooms/UserIdentityWarningViewModel";
 import { type ButtonEvent } from "../elements/AccessibleButton.tsx";
 
 interface UserIdentityWarningProps {
diff --git a/apps/web/src/components/views/rooms/VoiceRecordComposerTile.tsx b/apps/web/src/components/views/rooms/VoiceRecordComposerTile.tsx
index 17b5664e81..fdd171b210 100644
--- a/apps/web/src/components/views/rooms/VoiceRecordComposerTile.tsx
+++ b/apps/web/src/components/views/rooms/VoiceRecordComposerTile.tsx
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type ReactNode } from "react";
+import { MediaBody } from "@element-hq/web-shared-components";
 import { type Room, type IEventRelation, type MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 import { DeleteIcon, StopSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
@@ -22,7 +23,7 @@ import RecordingPlayback, { PlaybackLayout } from "../audio_messages/RecordingPl
 import Modal from "../../../Modal";
 import ErrorDialog from "../dialogs/ErrorDialog";
 import MediaDeviceHandler, { MediaDeviceKindEnum } from "../../../MediaDeviceHandler";
-import NotificationBadge from "./NotificationBadge";
+import { NotificationBadge } from "./NotificationBadge/NotificationBadge";
 import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
 import { NotificationLevel } from "../../../stores/notifications/NotificationLevel";
 import InlineSpinner from "../elements/InlineSpinner";
@@ -168,11 +169,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
         const accessError = (): void => {
             Modal.createDialog(ErrorDialog, {
                 title: _t("voip|unable_to_access_audio_input_title"),
-                description: (
-                    <>
-                        <p>{_t("voip|unable_to_access_audio_input_description")}</p>
-                    </>
-                ),
+                description: <p>{_t("voip|unable_to_access_audio_input_description")}</p>,
             });
         };
 
@@ -183,11 +180,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
             if (!devices?.[MediaDeviceKindEnum.AudioInput]?.length) {
                 Modal.createDialog(ErrorDialog, {
                     title: _t("voip|no_audio_input_title"),
-                    description: (
-                        <>
-                            <p>{_t("voip|no_audio_input_description")}</p>
-                        </>
-                    ),
+                    description: <p>{_t("voip|no_audio_input_description")}</p>,
                 });
                 return;
             }
@@ -239,10 +232,10 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
 
         // only other UI is the recording-in-progress UI
         return (
-            <div className="mx_MediaBody mx_VoiceMessagePrimaryContainer mx_VoiceRecordComposerTile_recording">
+            <MediaBody className="mx_VoiceMessagePrimaryContainer mx_VoiceRecordComposerTile_recording">
                 <LiveRecordingClock recorder={this.state.recorder} />
                 <LiveRecordingWaveform recorder={this.state.recorder} />
-            </div>
+            </MediaBody>
         );
     }
 
@@ -287,7 +280,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
         if (this.state.recordingPhase === RecordingState.Uploading) {
             uploadIndicator = (
                 <span className="mx_VoiceRecordComposerTile_uploadingState">
-                    <InlineSpinner w={16} h={16} />
+                    <InlineSpinner size={16} />
                 </span>
             );
         } else if (this.state.didUploadFail && this.state.recordingPhase === RecordingState.Ended) {
diff --git a/apps/web/src/components/views/rooms/WhoIsTypingTile.tsx b/apps/web/src/components/views/rooms/WhoIsTypingTile.tsx
index 64a7ccaebf..7fd197f162 100644
--- a/apps/web/src/components/views/rooms/WhoIsTypingTile.tsx
+++ b/apps/web/src/components/views/rooms/WhoIsTypingTile.tsx
@@ -66,7 +66,7 @@ export default class WhoIsTypingTile extends React.Component<IProps, IState> {
             client.removeListener(RoomMemberEvent.Typing, this.onRoomMemberTyping);
             client.removeListener(RoomEvent.Timeline, this.onRoomTimeline);
         }
-        Object.values(this.state.delayedStopTypingTimers).forEach((t) => (t as Timer).abort());
+        Object.values(this.state.delayedStopTypingTimers).forEach((t) => t.abort());
     }
 
     private static isVisible(state: IState): boolean {
diff --git a/apps/web/src/components/views/rooms/wysiwyg_composer/components/Editor.tsx b/apps/web/src/components/views/rooms/wysiwyg_composer/components/Editor.tsx
index d418a0df19..9a6847c636 100644
--- a/apps/web/src/components/views/rooms/wysiwyg_composer/components/Editor.tsx
+++ b/apps/web/src/components/views/rooms/wysiwyg_composer/components/Editor.tsx
@@ -11,6 +11,7 @@ import React, { type CSSProperties, memo, type RefObject, type ReactNode } from
 
 import { useIsExpanded } from "../hooks/useIsExpanded";
 import { useSelection } from "../hooks/useSelection";
+import { _t } from "../../../../../i18n";
 
 const HEIGHT_BREAKING_POINT = 24;
 
@@ -38,6 +39,7 @@ export const Editor = memo(function Editor({ disabled, placeholder, leftComponen
                     ref={ref}
                     contentEditable={!disabled}
                     role="textbox"
+                    aria-label={_t("a11y|message_composer")}
                     aria-multiline="true"
                     aria-autocomplete="list"
                     aria-haspopup="listbox"
diff --git a/apps/web/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx b/apps/web/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx
index f45cc5d74f..8caf4c5eab 100644
--- a/apps/web/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx
+++ b/apps/web/src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import classNames from "classnames";
 import { type IEventRelation } from "matrix-js-sdk/src/matrix";
-import React, { type JSX, type RefObject, type ReactNode } from "react";
+import React, { type JSX, type RefObject, type ReactNode, useContext } from "react";
 
 import { useComposerFunctions } from "../hooks/useComposerFunctions";
 import { useIsFocused } from "../hooks/useIsFocused";
@@ -19,6 +19,7 @@ import { type ComposerFunctions } from "../types";
 import { Editor } from "./Editor";
 import { WysiwygAutocomplete } from "./WysiwygAutocomplete";
 import { useSettingValue } from "../../../../../hooks/useSettings";
+import { RoomUploadContext } from "../../../../../viewmodels/room/RoomUploadViewModel";
 
 interface PlainTextComposerProps {
     disabled?: boolean;
@@ -46,6 +47,7 @@ export function PlainTextComposer({
     eventRelation,
 }: PlainTextComposerProps): JSX.Element {
     const isAutoReplaceEmojiEnabled = useSettingValue("MessageComposerInput.autoReplaceEmoji");
+    const uploadContext = useContext(RoomUploadContext);
     const {
         ref: editorRef,
         autocompleteRef,
@@ -61,7 +63,7 @@ export function PlainTextComposer({
         handleMention,
         handleAtRoomMention,
         handleEmoji,
-    } = usePlainTextListeners(initialContent, onChange, onSend, eventRelation, isAutoReplaceEmojiEnabled);
+    } = usePlainTextListeners(initialContent, onChange, onSend, isAutoReplaceEmojiEnabled, uploadContext || undefined);
     const composerFunctions = useComposerFunctions(editorRef, setContent);
     usePlainTextInitialization(initialContent, editorRef);
     useSetCursorPosition(disabled, editorRef);
diff --git a/apps/web/src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete.tsx b/apps/web/src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete.tsx
index 6b5dfff955..363e4e9785 100644
--- a/apps/web/src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete.tsx
+++ b/apps/web/src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete.tsx
@@ -8,7 +8,6 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type JSX, type Ref, type FunctionComponent } from "react";
 import { type FormattingFunctions, type MappedSuggestion } from "@vector-im/matrix-wysiwyg";
-import { logger } from "matrix-js-sdk/src/logger";
 
 import Autocomplete from "../../Autocomplete";
 import { type ICompletion } from "../../../../../autocomplete/Autocompleter";
@@ -111,8 +110,6 @@ const WysiwygAutocomplete = ({
     if (!room) return null;
 
     const autoCompleteQuery = buildQuery(suggestion);
-    // debug for https://github.com/vector-im/element-web/issues/26037
-    logger.log(`## 26037 ## Rendering Autocomplete for WysiwygAutocomplete with query: "${autoCompleteQuery}"`);
 
     // TODO - determine if we show all of the /command suggestions, there are some options in the
     // list which don't seem to make sense in this context, specifically /html and /plain
diff --git a/apps/web/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx b/apps/web/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx
index b0696143aa..ab720e0283 100644
--- a/apps/web/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx
+++ b/apps/web/src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.tsx
@@ -60,7 +60,7 @@ export const WysiwygComposer = memo(function WysiwygComposer({
     const { room } = useScopedRoomContext("room");
     const autocompleteRef = useRef<Autocomplete | null>(null);
 
-    const inputEventProcessor = useInputEventProcessor(onSend, autocompleteRef, initialContent, eventRelation);
+    const inputEventProcessor = useInputEventProcessor(onSend, autocompleteRef, initialContent);
 
     const isAutoReplaceEmojiEnabled = useSettingValue("MessageComposerInput.autoReplaceEmoji");
     const emojiSuggestions = useMemo(() => getEmojiSuggestions(isAutoReplaceEmojiEnabled), [isAutoReplaceEmojiEnabled]);
diff --git a/apps/web/src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions.ts b/apps/web/src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions.ts
index e9f6365d02..8c2ec26476 100644
--- a/apps/web/src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions.ts
+++ b/apps/web/src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions.ts
@@ -21,7 +21,6 @@ export function useComposerFunctions(
         () => ({
             clear: () => {
                 if (ref.current) {
-                    // eslint-disable-next-line react-compiler/react-compiler
                     ref.current.innerHTML = "";
                 }
             },
diff --git a/apps/web/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts b/apps/web/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts
index 30e5649013..d72f777218 100644
--- a/apps/web/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts
+++ b/apps/web/src/components/views/rooms/wysiwyg_composer/hooks/useInputEventProcessor.ts
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { type Wysiwyg, type WysiwygEvent } from "@vector-im/matrix-wysiwyg";
 import { useCallback } from "react";
-import { type IEventRelation, type MatrixClient } from "matrix-js-sdk/src/matrix";
+import { type MatrixClient } from "matrix-js-sdk/src/matrix";
 
 import { useSettingValue } from "../../../../../hooks/useSettings";
 import { getKeyBindingsManager } from "../../../../../KeyBindingsManager";
@@ -26,13 +26,14 @@ import { endEditing } from "../utils/editing";
 import type Autocomplete from "../../Autocomplete";
 import { handleClipboardEvent, handleEventWithAutocomplete, isEventToHandleAsClipboardEvent } from "./utils";
 import { useScopedRoomContext } from "../../../../../contexts/ScopedRoomContext.tsx";
+import { useRoomUploadViewModel } from "../../../../../viewmodels/room/RoomUploadViewModel.tsx";
 
 export function useInputEventProcessor(
     onSend: () => void,
     autocompleteRef: React.RefObject<Autocomplete | null>,
     initialContent?: string,
-    eventRelation?: IEventRelation,
 ): (event: WysiwygEvent, composer: Wysiwyg, editor: HTMLElement) => WysiwygEvent | null {
+    const roomUploadVm = useRoomUploadViewModel();
     const roomContext = useScopedRoomContext("liveTimeline", "room", "replyToEvent", "timelineRenderingType");
     const composerContext = useComposerContext();
     const mxClient = useMatrixClientContext();
@@ -52,7 +53,7 @@ export function useInputEventProcessor(
 
             if (isEventToHandleAsClipboardEvent(event)) {
                 const data = event instanceof ClipboardEvent ? event.clipboardData : event.dataTransfer;
-                const handled = handleClipboardEvent(event, data, roomContext, mxClient, eventRelation);
+                const handled = handleClipboardEvent(event, data, roomUploadVm);
                 return handled ? null : event;
             }
 
@@ -77,11 +78,11 @@ export function useInputEventProcessor(
             isCtrlEnterToSend,
             onSend,
             initialContent,
+            roomUploadVm,
             roomContext,
             composerContext,
             mxClient,
             autocompleteRef,
-            eventRelation,
         ],
     );
 }
diff --git a/apps/web/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextInitialization.ts b/apps/web/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextInitialization.ts
index b547afffbe..04caed66c7 100644
--- a/apps/web/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextInitialization.ts
+++ b/apps/web/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextInitialization.ts
@@ -12,7 +12,6 @@ export function usePlainTextInitialization(initialContent = "", ref: RefObject<H
     useEffect(() => {
         // always read and write the ref.current using .innerHTML for consistency in linebreak and HTML entity handling
         if (ref.current) {
-            // eslint-disable-next-line react-compiler/react-compiler
             ref.current.innerHTML = initialContent;
         }
     }, [ref, initialContent]);
diff --git a/apps/web/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.ts b/apps/web/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.ts
index 81272f8b4b..1a4713503e 100644
--- a/apps/web/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.ts
+++ b/apps/web/src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.ts
@@ -8,7 +8,6 @@ Please see LICENSE files in the repository root for full details.
 
 import { type KeyboardEvent, type RefObject, type SyntheticEvent, useCallback, useRef, useState } from "react";
 import { type AllowedMentionAttributes, type MappedSuggestion } from "@vector-im/matrix-wysiwyg";
-import { type IEventRelation } from "matrix-js-sdk/src/matrix";
 
 import { useSettingValue } from "../../../../../hooks/useSettings";
 import { IS_MAC, Key } from "../../../../../Keyboard";
@@ -16,8 +15,7 @@ import type Autocomplete from "../../Autocomplete";
 import { handleClipboardEvent, handleEventWithAutocomplete, isEventToHandleAsClipboardEvent } from "./utils";
 import { useSuggestion } from "./useSuggestion";
 import { isNotNull, isNotUndefined } from "../../../../../Typeguards";
-import { useMatrixClientContext } from "../../../../../contexts/MatrixClientContext";
-import { useScopedRoomContext } from "../../../../../contexts/ScopedRoomContext.tsx";
+import type { RoomUploadViewModel } from "../../../../../viewmodels/room/RoomUploadViewModel.tsx";
 
 function isDivElement(target: EventTarget): target is HTMLDivElement {
     return target instanceof HTMLDivElement;
@@ -46,8 +44,8 @@ export function usePlainTextListeners(
     initialContent?: string,
     onChange?: (content: string) => void,
     onSend?: () => void,
-    eventRelation?: IEventRelation,
     isAutoReplaceEmojiEnabled?: boolean,
+    roomUploadVM?: RoomUploadViewModel,
 ): {
     ref: RefObject<HTMLDivElement | null>;
     autocompleteRef: RefObject<Autocomplete | null>;
@@ -64,9 +62,6 @@ export function usePlainTextListeners(
     onSelect: (this: void, event: SyntheticEvent<HTMLDivElement>) => void;
     suggestion: MappedSuggestion | null;
 } {
-    const roomContext = useScopedRoomContext("room", "timelineRenderingType", "replyToEvent");
-    const mxClient = useMatrixClientContext();
-
     const ref = useRef<HTMLDivElement>(null);
     const autocompleteRef = useRef<Autocomplete>(null);
     const [content, setContent] = useState<string | undefined>(initialContent);
@@ -120,10 +115,10 @@ export function usePlainTextListeners(
             const { nativeEvent } = event;
             let imagePasteWasHandled = false;
 
-            if (isEventToHandleAsClipboardEvent(nativeEvent)) {
+            if (roomUploadVM && isEventToHandleAsClipboardEvent(nativeEvent)) {
                 const data =
                     nativeEvent instanceof ClipboardEvent ? nativeEvent.clipboardData : nativeEvent.dataTransfer;
-                imagePasteWasHandled = handleClipboardEvent(nativeEvent, data, roomContext, mxClient, eventRelation);
+                imagePasteWasHandled = handleClipboardEvent(nativeEvent, data, roomUploadVM);
             }
 
             // prevent default behaviour and skip call to onInput if the image paste event was handled
@@ -133,7 +128,7 @@ export function usePlainTextListeners(
                 onInput(event);
             }
         },
-        [eventRelation, mxClient, onInput, roomContext],
+        [onInput, roomUploadVM],
     );
 
     const enterShouldSend = !useSettingValue("MessageComposerInput.ctrlEnterToSend");
diff --git a/apps/web/src/components/views/rooms/wysiwyg_composer/hooks/useSuggestion.ts b/apps/web/src/components/views/rooms/wysiwyg_composer/hooks/useSuggestion.ts
index 2aae412eb7..d8f43a3390 100644
--- a/apps/web/src/components/views/rooms/wysiwyg_composer/hooks/useSuggestion.ts
+++ b/apps/web/src/components/views/rooms/wysiwyg_composer/hooks/useSuggestion.ts
@@ -8,8 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { EMOTICON_TO_EMOJI } from "@matrix-org/emojibase-bindings";
 import { type AllowedMentionAttributes, type MappedSuggestion } from "@vector-im/matrix-wysiwyg";
-import { type SyntheticEvent, useState, type SetStateAction } from "react";
-import { logger } from "matrix-js-sdk/src/logger";
+import { type SyntheticEvent, useState } from "react";
 
 import { isNotNull } from "../../../../../Typeguards";
 
@@ -57,20 +56,7 @@ export function useSuggestion(
     onSelect: (event: SyntheticEvent<HTMLDivElement>) => void;
     suggestion: MappedSuggestion | null;
 } {
-    const [suggestionData, setSuggestionData0] = useState<SuggestionState>(null);
-
-    // debug for https://github.com/vector-im/element-web/issues/26037
-    const setSuggestionData = (suggestionData: SetStateAction<SuggestionState>): void => {
-        // setState allows either the data itself or a callback which returns the data
-        logger.log(
-            `## 26037 ## wysiwyg useSuggestion hook setting suggestion data to ${
-                suggestionData === null || suggestionData instanceof Function
-                    ? suggestionData
-                    : suggestionData.mappedSuggestion.keyChar + suggestionData.mappedSuggestion.text
-            }`,
-        );
-        setSuggestionData0(suggestionData);
-    };
+    const [suggestionData, setSuggestionData] = useState<SuggestionState>(null);
 
     // We create a `selectionchange` handler here because we need to know when the user has moved the cursor,
     // we can not depend on input events only
diff --git a/apps/web/src/components/views/rooms/wysiwyg_composer/hooks/utils.ts b/apps/web/src/components/views/rooms/wysiwyg_composer/hooks/utils.ts
index 0a34cf0940..6475109ab5 100644
--- a/apps/web/src/components/views/rooms/wysiwyg_composer/hooks/utils.ts
+++ b/apps/web/src/components/views/rooms/wysiwyg_composer/hooks/utils.ts
@@ -7,7 +7,6 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type RefObject } from "react";
-import { type IEventRelation, type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { type WysiwygEvent } from "@vector-im/matrix-wysiwyg";
 
 import { type TimelineRenderingType } from "../../../../../contexts/RoomContext";
@@ -16,8 +15,8 @@ import type Autocomplete from "../../Autocomplete";
 import { getKeyBindingsManager } from "../../../../../KeyBindingsManager";
 import { KeyBindingAction } from "../../../../../accessibility/KeyboardShortcuts";
 import { getBlobSafeMimeType } from "../../../../../utils/blobs";
-import ContentMessages from "../../../../../ContentMessages";
 import { isNotNull } from "../../../../../Typeguards";
+import type { RoomUploadViewModel } from "../../../../../viewmodels/room/RoomUploadViewModel";
 
 export function focusComposer(
     composerElement: RefObject<HTMLElement | null>,
@@ -123,13 +122,8 @@ export function handleEventWithAutocomplete(
 export function handleClipboardEvent(
     event: ClipboardEvent | InputEvent,
     data: DataTransfer | null,
-    roomContext: Pick<IRoomState, "room" | "timelineRenderingType" | "replyToEvent">,
-    mxClient: MatrixClient,
-    eventRelation?: IEventRelation,
+    vm: RoomUploadViewModel,
 ): boolean {
-    // Logic in this function follows that of `SendMessageComposer.onPaste`
-    const { room, timelineRenderingType, replyToEvent } = roomContext;
-
     function handleError(error: unknown): void {
         if (error instanceof Error) {
             console.log(error.message);
@@ -138,7 +132,7 @@ export function handleClipboardEvent(
         }
     }
 
-    if (event.type !== "paste" || data === null || room === undefined) {
+    if (event.type !== "paste" || data === null) {
         return false;
     }
 
@@ -147,16 +141,7 @@ export function handleClipboardEvent(
     // We check text/rtf instead of text/plain as when copy+pasting a file from Finder or Gnome Image Viewer
     // it puts the filename in as text/plain which we want to ignore.
     if (data.files.length && !data.types.includes("text/rtf")) {
-        ContentMessages.sharedInstance()
-            .sendContentListToRoom(
-                Array.from(data.files),
-                room.roomId,
-                eventRelation,
-                roomContext.replyToEvent,
-                mxClient,
-                timelineRenderingType,
-            )
-            .catch(handleError);
+        vm.initiateViaDataTransfer(data).catch(handleError);
         return true;
     }
 
@@ -188,9 +173,7 @@ export function handleClipboardEvent(
                         const parts = response.url.split("/");
                         const filename = parts[parts.length - 1];
                         const file = new File([imgBlob], filename + "." + ext, { type: safetype });
-                        ContentMessages.sharedInstance()
-                            .sendContentToRoom(file, room.roomId, eventRelation, mxClient, replyToEvent)
-                            .catch(handleError);
+                        return vm.initiateViaInputFiles([file]);
                     })
                     .catch(handleError);
             })
diff --git a/apps/web/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts b/apps/web/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
index 63fe8ca361..ebdb0bd06b 100644
--- a/apps/web/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
+++ b/apps/web/src/components/views/rooms/wysiwyg_composer/utils/createMessageContent.ts
@@ -25,7 +25,7 @@ export const EMOTE_PREFIX = "/me ";
 function attachRelation(content: IContent, relation?: IEventRelation): void {
     if (relation) {
         content["m.relates_to"] = {
-            ...(content["m.relates_to"] || {}),
+            ...content["m.relates_to"],
             ...relation,
         };
     }
diff --git a/apps/web/src/components/views/rooms/wysiwyg_composer/utils/message.ts b/apps/web/src/components/views/rooms/wysiwyg_composer/utils/message.ts
index 2594ac4841..1ff011c64a 100644
--- a/apps/web/src/components/views/rooms/wysiwyg_composer/utils/message.ts
+++ b/apps/web/src/components/views/rooms/wysiwyg_composer/utils/message.ts
@@ -15,6 +15,7 @@ import {
     THREAD_RELATION_TYPE,
 } from "matrix-js-sdk/src/matrix";
 import { type RoomMessageEventContent } from "matrix-js-sdk/src/types";
+import { type MessageComposerUrlPreviewSnapshot } from "@element-hq/web-shared-components";
 
 import { PosthogAnalytics } from "../../../../../PosthogAnalytics";
 import SettingsStore from "../../../../../settings/SettingsStore";
@@ -33,19 +34,20 @@ import { CommandCategories, getCommand } from "../../../../../slash-commands/Sla
 import { runSlashCommand, shouldSendAnyway } from "../../../../../editor/commands";
 import { Action } from "../../../../../dispatcher/actions";
 import { addReplyToMessageContent } from "../../../../../utils/Reply";
-import { attachRelation } from "../../../../../utils/messages";
+import { attachRelation, attachUrlPreviews } from "../../../../../utils/messages";
 
 export interface SendMessageParams {
     mxClient: MatrixClient;
     relation?: IEventRelation;
     replyToEvent?: MatrixEvent;
     roomContext: Pick<IRoomState, "timelineRenderingType" | "room">;
+    urlPreviewSnapshot: MessageComposerUrlPreviewSnapshot;
 }
 
 export async function sendMessage(
     message: string,
     isHTML: boolean,
-    { roomContext, mxClient, ...params }: SendMessageParams,
+    { roomContext, mxClient, urlPreviewSnapshot, ...params }: SendMessageParams,
 ): Promise<ISendEventResponse | undefined> {
     const { relation, replyToEvent } = params;
     const { room } = roomContext;
@@ -112,6 +114,7 @@ export async function sendMessage(
 
     // if content is null, we haven't done any slash command processing, so generate some content
     content ??= await createMessageContent(message, isHTML, params);
+    attachUrlPreviews(urlPreviewSnapshot, content);
 
     // TODO replace emotion end of message ?
 
@@ -130,7 +133,7 @@ export async function sendMessage(
 
     const prom = doMaybeLocalRoomAction(
         roomId,
-        (actualRoomId: string) => mxClient.sendMessage(actualRoomId, threadId, content!),
+        (actualRoomId: string) => mxClient.sendMessage(actualRoomId, threadId, content),
         mxClient,
     );
 
diff --git a/apps/web/src/components/views/settings/AddRemoveThreepids.tsx b/apps/web/src/components/views/settings/AddRemoveThreepids.tsx
index 91df12f45f..301afd4d41 100644
--- a/apps/web/src/components/views/settings/AddRemoveThreepids.tsx
+++ b/apps/web/src/components/views/settings/AddRemoveThreepids.tsx
@@ -127,7 +127,7 @@ const ExistingThreepid: React.FC<ExistingThreepidProps> = ({ mode, threepid, onC
                     threepid.medium === "email"
                         ? _t("settings|general|error_revoke_email_discovery")
                         : _t("settings|general|error_revoke_msisdn_discovery"),
-            }).then();
+            });
         },
         [changeBinding, threepid.medium],
     );
@@ -143,7 +143,7 @@ const ExistingThreepid: React.FC<ExistingThreepidProps> = ({ mode, threepid, onC
                     threepid.medium === "email"
                         ? _t("settings|general|error_share_email_discovery")
                         : _t("settings|general|error_share_msisdn_discovery"),
-            }).then();
+            });
         },
         [changeBinding, threepid.medium],
     );
diff --git a/apps/web/src/components/views/settings/AvatarSetting.tsx b/apps/web/src/components/views/settings/AvatarSetting.tsx
index 1c27efa75c..7407f64b56 100644
--- a/apps/web/src/components/views/settings/AvatarSetting.tsx
+++ b/apps/web/src/components/views/settings/AvatarSetting.tsx
@@ -181,7 +181,7 @@ const AvatarSetting: React.FC<IProps> = ({
             <BaseAvatar
                 idName={placeholderId}
                 name={placeholderName}
-                size="90px"
+                size="120px"
                 url={avatarURL}
                 altText={avatarAccessibleName}
             />
diff --git a/apps/web/src/components/views/settings/BridgeTile.tsx b/apps/web/src/components/views/settings/BridgeTile.tsx
index 5cec9314d7..9be5a6c030 100644
--- a/apps/web/src/components/views/settings/BridgeTile.tsx
+++ b/apps/web/src/components/views/settings/BridgeTile.tsx
@@ -11,7 +11,8 @@ import { type MatrixEvent, type Room } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { _t } from "../../../languageHandler";
-import { Pill, PillType } from "../elements/Pill";
+import { Pill } from "../elements/Pill";
+import { PillType } from "../elements/PillType";
 import { makeUserPermalink } from "../../../utils/permalinks/Permalinks";
 import BaseAvatar from "../avatars/BaseAvatar";
 import SettingsStore from "../../../settings/SettingsStore";
@@ -32,25 +33,19 @@ interface IBridgeStateEvent {
     protocol: {
         id: string;
         displayname?: string;
-        // eslint-disable-next-line camelcase
         avatar_url?: string;
-        // eslint-disable-next-line camelcase
         external_url?: string;
     };
     network?: {
         id: string;
         displayname?: string;
-        // eslint-disable-next-line camelcase
         avatar_url?: string;
-        // eslint-disable-next-line camelcase
         external_url?: string;
     };
     channel: {
         id: string;
         displayname?: string;
-        // eslint-disable-next-line camelcase
         avatar_url?: string;
-        // eslint-disable-next-line camelcase
         external_url?: string;
     };
 }
diff --git a/apps/web/src/components/views/settings/ChangePassword.tsx b/apps/web/src/components/views/settings/ChangePassword.tsx
index 548bfb01f5..50e3387877 100644
--- a/apps/web/src/components/views/settings/ChangePassword.tsx
+++ b/apps/web/src/components/views/settings/ChangePassword.tsx
@@ -38,7 +38,6 @@ interface IProps {
     buttonClassName?: string;
     buttonKind?: AccessibleButtonKind;
     buttonLabel?: string;
-    confirm?: boolean;
     // Whether to autoFocus the new password input
     autoFocusNewPasswordInput?: boolean;
     className?: string;
@@ -61,8 +60,6 @@ export default class ChangePassword extends React.Component<IProps, IState> {
     public static defaultProps: Partial<IProps> = {
         onFinished() {},
         onError() {},
-
-        confirm: true,
     };
 
     public constructor(props: IProps) {
@@ -303,7 +300,7 @@ export default class ChangePassword extends React.Component<IProps, IState> {
         // Focus the first invalid field and show feedback in the stricter mode
         // that no longer allows empty values for required fields.
         invalidField.focus();
-        invalidField.validate({ allowEmpty: false, focused: true });
+        await invalidField.validate({ allowEmpty: false, focused: true });
         return false;
     }
 
diff --git a/apps/web/src/components/views/settings/EventIndexPanel.tsx b/apps/web/src/components/views/settings/EventIndexPanel.tsx
index 4cd7a7d015..121860d5ee 100644
--- a/apps/web/src/components/views/settings/EventIndexPanel.tsx
+++ b/apps/web/src/components/views/settings/EventIndexPanel.tsx
@@ -165,7 +165,7 @@ export default class EventIndexPanel extends React.Component<EmptyObject, IState
             );
         } else if (EventIndexPeg.platformHasSupport() && !EventIndexPeg.supportIsInstalled()) {
             const nativeLink =
-                "https://github.com/element-hq/element-web/blob/develop/apps/desktop/" +
+                "https://github.com/element-hq/element-web/blob/develop/" +
                 "docs/native-node-modules.md#" +
                 "adding-seshat-for-search-in-e2e-encrypted-rooms";
 
diff --git a/apps/web/src/components/views/settings/ImageSizePanel.tsx b/apps/web/src/components/views/settings/ImageSizePanel.tsx
index 1b4e5e711f..bb5d63faf2 100644
--- a/apps/web/src/components/views/settings/ImageSizePanel.tsx
+++ b/apps/web/src/components/views/settings/ImageSizePanel.tsx
@@ -15,8 +15,8 @@ import { _t } from "../../../languageHandler";
 import { SettingLevel } from "../../../settings/SettingLevel";
 import { ImageSize } from "../../../settings/enums/ImageSize";
 import { SettingsSubsection } from "./shared/SettingsSubsection";
-import { Icon as ImgSizeNormalIcon } from "../../../../res/img/element-icons/settings/img-size-normal.svg";
-import { Icon as ImgSizeLargeIcon } from "../../../../res/img/element-icons/settings/img-size-large.svg";
+import ImgSizeNormalIcon from "../../../../res/img/element-icons/settings/img-size-normal.svg?react";
+import ImgSizeLargeIcon from "../../../../res/img/element-icons/settings/img-size-large.svg?react";
 
 interface IState {
     size: ImageSize;
diff --git a/apps/web/src/components/views/settings/IntegrationManager.tsx b/apps/web/src/components/views/settings/IntegrationManager.tsx
index bb6893551a..175146e6f2 100644
--- a/apps/web/src/components/views/settings/IntegrationManager.tsx
+++ b/apps/web/src/components/views/settings/IntegrationManager.tsx
@@ -96,6 +96,7 @@ export default class IntegrationManager extends React.Component<IProps, IState>
             );
         }
 
+        // oxlint-disable-next-line react/iframe-missing-sandbox
         return <iframe title={_t("common|integration_manager")} src={this.props.url} onError={this.onError} />;
     }
 }
diff --git a/apps/web/src/components/views/settings/JoinRuleSettings.tsx b/apps/web/src/components/views/settings/JoinRuleSettings.tsx
index 1fd43657be..2c7bdf7530 100644
--- a/apps/web/src/components/views/settings/JoinRuleSettings.tsx
+++ b/apps/web/src/components/views/settings/JoinRuleSettings.tsx
@@ -14,7 +14,6 @@ import StyledRadioGroup, { type IDefinition } from "../elements/StyledRadioGroup
 import { _t } from "../../../languageHandler";
 import AccessibleButton from "../elements/AccessibleButton";
 import RoomAvatar from "../avatars/RoomAvatar";
-import SpaceStore from "../../../stores/spaces/SpaceStore";
 import Modal from "../../../Modal";
 import ManageRestrictedJoinRuleDialog from "../dialogs/ManageRestrictedJoinRuleDialog";
 import RoomUpgradeWarningDialog, { type IFinishedOpts } from "../dialogs/RoomUpgradeWarningDialog";
@@ -22,12 +21,13 @@ import { type RoomUpgradeProgress, upgradeRoom } from "../../../utils/RoomUpgrad
 import { arrayHasDiff } from "../../../utils/arrays";
 import { useLocalEcho } from "../../../hooks/useLocalEcho";
 import dis from "../../../dispatcher/dispatcher";
-import { RoomSettingsTab } from "../dialogs/RoomSettingsDialog";
+import { RoomSettingsTab } from "../dialogs/RoomSettingsDialog-tab";
 import { Action } from "../../../dispatcher/actions";
 import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { doesRoomVersionSupport, PreferredRoomVersions } from "../../../utils/PreferredRoomVersions";
 import SettingsStore from "../../../settings/SettingsStore";
 import LabelledCheckbox from "../elements/LabelledCheckbox";
+import { SDKContextClass } from "../../../contexts/SDKContextClass.ts";
 
 export interface JoinRuleSettingsProps {
     room: Room;
@@ -92,8 +92,8 @@ const JoinRuleSettings: React.FC<JoinRuleSettingsProps> = ({
 
     const editRestrictedRoomIds = async (): Promise<string[] | undefined> => {
         let selected = restrictedAllowRoomIds;
-        if (!selected?.length && SpaceStore.instance.activeSpaceRoom) {
-            selected = [SpaceStore.instance.activeSpaceRoom.roomId];
+        if (!selected?.length && SDKContextClass.instance.spaceStore.activeSpaceRoom) {
+            selected = [SDKContextClass.instance.spaceStore.activeSpaceRoom.roomId];
         }
 
         const { finished } = Modal.createDialog(
@@ -296,12 +296,12 @@ const JoinRuleSettings: React.FC<JoinRuleSettingsProps> = ({
                     </div>
                 </div>
             );
-        } else if (SpaceStore.instance.activeSpaceRoom) {
+        } else if (SDKContextClass.instance.spaceStore.activeSpaceRoom) {
             description = _t(
                 "room_settings|security|join_rule_restricted_description_active_space",
                 {},
                 {
-                    spaceName: () => <strong>{SpaceStore.instance.activeSpaceRoom!.name}</strong>,
+                    spaceName: () => <strong>{SDKContextClass.instance.spaceStore.activeSpaceRoom!.name}</strong>,
                 },
             );
         } else {
@@ -365,9 +365,9 @@ const JoinRuleSettings: React.FC<JoinRuleSettingsProps> = ({
 
                 let warning: JSX.Element | undefined;
                 const userId = cli.getUserId()!;
-                const unableToUpdateSomeParents = Array.from(SpaceStore.instance.getKnownParents(room.roomId)).some(
-                    (roomId) => !cli.getRoom(roomId)?.currentState.maySendStateEvent(EventType.SpaceChild, userId),
-                );
+                const unableToUpdateSomeParents = Array.from(
+                    SDKContextClass.instance.spaceStore.getKnownParents(room.roomId),
+                ).some((roomId) => !cli.getRoom(roomId)?.currentState.maySendStateEvent(EventType.SpaceChild, userId));
                 if (unableToUpdateSomeParents) {
                     warning = <strong>{_t("room_settings|security|join_rule_restricted_upgrade_warning")}</strong>;
                 }
diff --git a/apps/web/src/components/views/settings/Notifications.tsx b/apps/web/src/components/views/settings/Notifications.tsx
index c52753907d..ff2a2945e3 100644
--- a/apps/web/src/components/views/settings/Notifications.tsx
+++ b/apps/web/src/components/views/settings/Notifications.tsx
@@ -53,6 +53,7 @@ import { SettingsSubsection } from "./shared/SettingsSubsection";
 import { doesRoomHaveUnreadMessages } from "../../../Unread";
 import SettingsFlag from "../elements/SettingsFlag";
 import { onSubmitPreventDefault } from "../../../utils/form.ts";
+import { keywordRuleId } from "../../../models/notificationsettings/keywordRuleId.ts";
 
 // TODO: this "view" component still has far too much application logic in it,
 // which should be factored out to other files.
@@ -89,9 +90,9 @@ const RULE_DISPLAY_ORDER: string[] = [
     RuleId.EncryptedMessage,
 
     // Mentions
-    RuleId.ContainsDisplayName,
     RuleId.ContainsUserName,
     RuleId.AtRoomNotification,
+    RuleId.ContainsDisplayName,
 
     // Other
     RuleId.InviteToSelf,
@@ -232,7 +233,7 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
     public componentDidMount(): void {
         this.settingWatchers = [
             SettingsStore.watchSetting("deviceNotificationsEnabled", null, (...[, , , , value]) => {
-                this.setState({ deviceNotificationsEnabled: value as boolean });
+                this.setState({ deviceNotificationsEnabled: value! });
             }),
         ];
 
@@ -289,7 +290,7 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
     }
 
     private async refreshRules(): Promise<Partial<IState>> {
-        const ruleSets = await MatrixClientPeg.safeGet().getPushRules()!;
+        const ruleSets = await MatrixClientPeg.safeGet().getPushRules();
         const categories: Record<string, RuleClass> = {
             [RuleId.Master]: RuleClass.Master,
 
@@ -353,7 +354,7 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
             for (const rule of defaultRules[category]) {
                 const definition: VectorPushRuleDefinition = VectorPushRulesDefinitions[rule.rule_id];
                 const vectorState = definition.ruleToVectorState(rule)!;
-                preparedNewState.vectorPushRules[category]!.push({
+                preparedNewState.vectorPushRules[category].push({
                     ruleId: rule.rule_id,
                     rule,
                     vectorState,
@@ -363,7 +364,7 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
             }
 
             // Quickly sort the rules for display purposes
-            preparedNewState.vectorPushRules[category]!.sort((a, b) => {
+            preparedNewState.vectorPushRules[category].sort((a, b) => {
                 let idxA = RULE_DISPLAY_ORDER.indexOf(a.ruleId);
                 let idxB = RULE_DISPLAY_ORDER.indexOf(b.ruleId);
 
@@ -375,7 +376,7 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
             });
 
             if (category === KEYWORD_RULE_CATEGORY) {
-                preparedNewState.vectorPushRules[category]!.push({
+                preparedNewState.vectorPushRules[category].push({
                     ruleId: KEYWORD_RULE_ID,
                     description: _t("settings|notifications|messages_containing_keywords"),
                     vectorState: preparedNewState.vectorKeywordRuleInfo.vectorState,
@@ -565,13 +566,16 @@ export default class Notifications extends React.PureComponent<EmptyObject, ISta
                 ruleVectorState = existingRuleVectorState ?? VectorState.On; //default
             }
             const kind = PushRuleKind.ContentSpecific;
+            const ruleIds = new Set(originalRules.map((r) => r.rule_id));
             for (const word of diff.added) {
-                await MatrixClientPeg.safeGet().addPushRule("global", kind, word, {
+                const ruleId = keywordRuleId(word, ruleIds);
+                ruleIds.add(ruleId);
+                await MatrixClientPeg.safeGet().addPushRule("global", kind, ruleId, {
                     actions: PushRuleVectorState.actionsFor(ruleVectorState),
                     pattern: word,
                 });
                 if (ruleVectorState === VectorState.Off) {
-                    await MatrixClientPeg.safeGet().setPushRuleEnabled("global", kind, word, false);
+                    await MatrixClientPeg.safeGet().setPushRuleEnabled("global", kind, ruleId, false);
                 }
             }
 
diff --git a/apps/web/src/components/views/settings/SpellCheckSettings.tsx b/apps/web/src/components/views/settings/SpellCheckSettings.tsx
index d1c759418d..bbb3579767 100644
--- a/apps/web/src/components/views/settings/SpellCheckSettings.tsx
+++ b/apps/web/src/components/views/settings/SpellCheckSettings.tsx
@@ -10,7 +10,8 @@ import React from "react";
 
 import SpellCheckLanguagesDropdown from "../../../components/views/elements/SpellCheckLanguagesDropdown";
 import AccessibleButton, { type ButtonEvent } from "../../../components/views/elements/AccessibleButton";
-import { _t, getUserLanguage } from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
+import { getUserLanguage } from "../../../i18n/settings";
 
 interface ExistingSpellCheckLanguageIProps {
     language: string;
diff --git a/apps/web/src/components/views/settings/UserPersonalInfoSettings.tsx b/apps/web/src/components/views/settings/UserPersonalInfoSettings.tsx
index 1ef10fe1b0..ce4e4cb681 100644
--- a/apps/web/src/components/views/settings/UserPersonalInfoSettings.tsx
+++ b/apps/web/src/components/views/settings/UserPersonalInfoSettings.tsx
@@ -68,15 +68,7 @@ export const UserPersonalInfoSettings: React.FC<UserPersonalInfoSettingsProps> =
     }, [client]);
 
     useEffect(() => {
-        updateThreepids().then();
-    }, [updateThreepids]);
-
-    const onEmailsChange = useCallback(() => {
-        updateThreepids().then();
-    }, [updateThreepids]);
-
-    const onMsisdnsChange = useCallback(() => {
-        updateThreepids().then();
+        updateThreepids();
     }, [updateThreepids]);
 
     if (!SettingsStore.getValue(UIFeature.ThirdPartyID)) return null;
@@ -96,7 +88,7 @@ export const UserPersonalInfoSettings: React.FC<UserPersonalInfoSettingsProps> =
                         mode="hs"
                         medium={ThreepidMedium.Email}
                         threepids={emails!}
-                        onChange={onEmailsChange}
+                        onChange={updateThreepids}
                         disabled={!canMake3pidChanges}
                         isLoading={loadingState === "loading"}
                     />
@@ -116,7 +108,7 @@ export const UserPersonalInfoSettings: React.FC<UserPersonalInfoSettingsProps> =
                         mode="hs"
                         medium={ThreepidMedium.Phone}
                         threepids={phoneNumbers!}
-                        onChange={onMsisdnsChange}
+                        onChange={updateThreepids}
                         disabled={!canMake3pidChanges}
                         isLoading={loadingState === "loading"}
                     />
diff --git a/apps/web/src/components/views/settings/UserProfileSettings.tsx b/apps/web/src/components/views/settings/UserProfileSettings.tsx
index 0ecd5d3dfa..d2280c3a33 100644
--- a/apps/web/src/components/views/settings/UserProfileSettings.tsx
+++ b/apps/web/src/components/views/settings/UserProfileSettings.tsx
@@ -11,14 +11,18 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { EditInPlace, Alert, ErrorMessage } from "@vector-im/compound-web";
 import PopOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/pop-out";
 import SignOutIcon from "@vector-im/compound-design-tokens/assets/web/icons/sign-out";
-import { Flex } from "@element-hq/web-shared-components";
+import {
+    Flex,
+    SetStatusView,
+    useCreateAutoDisposedViewModel,
+    useToastContext,
+} from "@element-hq/web-shared-components";
 
 import { _t } from "../../../languageHandler";
 import { OwnProfileStore } from "../../../stores/OwnProfileStore";
 import AvatarSetting from "./AvatarSetting";
 import PosthogTrackers from "../../../PosthogTrackers";
 import { formatBytes } from "../../../utils/FormattingUtils";
-import { useToastContext } from "../../../contexts/ToastContext";
 import InlineSpinner from "../elements/InlineSpinner";
 import UserIdentifierCustomisations from "../../../customisations/UserIdentifier";
 import CopyableText from "../elements/CopyableText";
@@ -28,6 +32,8 @@ import LogoutDialog, { shouldShowLogoutDialog } from "../dialogs/LogoutDialog";
 import Modal from "../../../Modal";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import { SettingsSection } from "./shared/SettingsSection.tsx";
+import { SetStatusViewModel } from "../../../viewmodels/status/SetStatusViewModel.ts";
+import SettingsStore from "../../../settings/SettingsStore.ts";
 
 const SpinnerToast: React.FC<{ children?: ReactNode }> = ({ children }) => (
     <>
@@ -132,6 +138,11 @@ const UserProfileSettings: React.FC<UserProfileSettingsProps> = ({
         })();
     }, [client]);
 
+    const userStatusEnabled = SettingsStore.getValue("feature_user_status");
+    const setStatusVM = useCreateAutoDisposedViewModel(
+        () => new SetStatusViewModel({ client, ownProfileStore: OwnProfileStore.instance }),
+    );
+
     const onAvatarRemove = useCallback(async () => {
         const removeToast = toastRack.displayToast(
             <SpinnerToast>{_t("settings|general|avatar_remove_progress")}</SpinnerToast>,
@@ -213,21 +224,27 @@ const UserProfileSettings: React.FC<UserProfileSettingsProps> = ({
                         placeholderId={client.getUserId() ?? ""}
                         disabled={!canSetAvatar}
                     />
-                    <EditInPlace
-                        className="mx_UserProfileSettings_profile_displayName"
-                        label={_t("settings|general|display_name")}
-                        value={displayName}
-                        saveButtonLabel={_t("common|save")}
-                        cancelButtonLabel={_t("common|cancel")}
-                        savedLabel={_t("common|saved")}
-                        savingLabel={_t("common|updating")}
-                        onChange={onDisplayNameChanged}
-                        onCancel={onDisplayNameCancel}
-                        onSave={onDisplayNameSave}
-                        disabled={!canSetDisplayName}
-                    >
-                        {displayNameError && <ErrorMessage>{_t("settings|general|display_name_error")}</ErrorMessage>}
-                    </EditInPlace>
+
+                    <Flex direction="column" className="mx_UserProfileSettings_profile_nameAndStatus">
+                        <EditInPlace
+                            className="mx_UserProfileSettings_profile_displayName"
+                            label={_t("settings|general|display_name")}
+                            value={displayName}
+                            saveButtonLabel={_t("common|save")}
+                            cancelButtonLabel={_t("common|cancel")}
+                            savedLabel={_t("common|saved")}
+                            savingLabel={_t("common|updating")}
+                            onChange={onDisplayNameChanged}
+                            onCancel={onDisplayNameCancel}
+                            onSave={onDisplayNameSave}
+                            disabled={!canSetDisplayName}
+                        >
+                            {displayNameError && (
+                                <ErrorMessage>{_t("settings|general|display_name_error")}</ErrorMessage>
+                            )}
+                        </EditInPlace>
+                        {userStatusEnabled && <SetStatusView vm={setStatusVM} />}
+                    </Flex>
                 </div>
                 {avatarError && (
                     <Alert title={_t("settings|general|avatar_upload_error_title")} type="critical">
diff --git a/apps/web/src/components/views/settings/devices/DeviceDetailHeading.tsx b/apps/web/src/components/views/settings/devices/DeviceDetailHeading.tsx
index 7d3019ab6f..a58917da68 100644
--- a/apps/web/src/components/views/settings/devices/DeviceDetailHeading.tsx
+++ b/apps/web/src/components/views/settings/devices/DeviceDetailHeading.tsx
@@ -50,7 +50,7 @@ const DeviceNameEditor: React.FC<Props & { stopEditing: () => void }> = ({ devic
     const descriptionId = `device-rename-description-${device.device_id}`;
 
     return (
-        <form aria-disabled={isLoading} className="mx_DeviceDetailHeading_renameForm" onSubmit={onSubmit} method="post">
+        <form className="mx_DeviceDetailHeading_renameForm" onSubmit={onSubmit} method="post">
             <p id={headingId} className="mx_DeviceDetailHeading_renameFormHeading">
                 {_t("settings|sessions|rename_form_heading")}
             </p>
diff --git a/apps/web/src/components/views/settings/devices/DeviceDetails.tsx b/apps/web/src/components/views/settings/devices/DeviceDetails.tsx
index eb0a82910f..adc8d9270d 100644
--- a/apps/web/src/components/views/settings/devices/DeviceDetails.tsx
+++ b/apps/web/src/components/views/settings/devices/DeviceDetails.tsx
@@ -18,7 +18,7 @@ import ToggleSwitch from "../../elements/ToggleSwitch";
 import { DeviceDetailHeading } from "./DeviceDetailHeading";
 import { DeviceVerificationStatusCard } from "./DeviceVerificationStatusCard";
 import { type ExtendedDevice } from "./types";
-import { getManageDeviceUrl } from "../../../../utils/oidc/urls.ts";
+import { getManageDeviceUrl } from "../../../../utils/oauth/urls.ts";
 
 interface Props {
     device: ExtendedDevice;
@@ -96,12 +96,7 @@ const DeviceDetails: React.FC<Props> = ({
         {
             id: "device",
             heading: _t("common|device"),
-            values: [
-                { label: _t("common|model"), value: device.deviceModel },
-                { label: _t("settings|sessions|os"), value: device.deviceOperatingSystem },
-                { label: _t("settings|sessions|browser"), value: device.client },
-                { label: _t("settings|sessions|ip"), value: device.last_seen_ip },
-            ],
+            values: [{ label: _t("settings|sessions|ip"), value: device.last_seen_ip }],
         },
     ]
         .map((section) =>
@@ -129,10 +124,10 @@ const DeviceDetails: React.FC<Props> = ({
             {!accountManagementEndpoint && (
                 <section className="mx_DeviceDetails_section">
                     <p className="mx_DeviceDetails_sectionHeading">{_t("settings|sessions|details_heading")}</p>
-                    {metadata.map(({ heading, values, id }, index) => (
+                    {metadata.map(({ heading, values, id }) => (
                         <table
                             className="mx_DeviceDetails_metadataTable"
-                            key={index}
+                            key={id}
                             data-testid={`device-detail-metadata-${id}`}
                         >
                             {heading && (
diff --git a/apps/web/src/components/views/settings/devices/DeviceMetaData.tsx b/apps/web/src/components/views/settings/devices/DeviceMetaData.tsx
index 299cef69cf..c49669046e 100644
--- a/apps/web/src/components/views/settings/devices/DeviceMetaData.tsx
+++ b/apps/web/src/components/views/settings/devices/DeviceMetaData.tsx
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { Fragment } from "react";
 
-import { Icon as InactiveIcon } from "../../../../../res/img/element-icons/settings/inactive.svg";
+import InactiveIcon from "../../../../../res/img/element-icons/settings/inactive.svg?react";
 import { INACTIVE_DEVICE_AGE_DAYS, isDeviceInactive } from "../../../../components/views/settings/devices/filter";
 import { type ExtendedDevice } from "../../../../components/views/settings/devices/types";
 import { formatDate, formatRelativeTime } from "../../../../DateUtils";
diff --git a/apps/web/src/components/views/settings/devices/DeviceSecurityCard.tsx b/apps/web/src/components/views/settings/devices/DeviceSecurityCard.tsx
index 61d527e60f..af468c8ec8 100644
--- a/apps/web/src/components/views/settings/devices/DeviceSecurityCard.tsx
+++ b/apps/web/src/components/views/settings/devices/DeviceSecurityCard.tsx
@@ -10,7 +10,7 @@ import classNames from "classnames";
 import React from "react";
 import { ShieldIcon, ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
-import { Icon as InactiveIcon } from "../../../../../res/img/element-icons/settings/inactive.svg";
+import InactiveIcon from "../../../../../res/img/element-icons/settings/inactive.svg?react";
 import { DeviceSecurityVariation } from "./types";
 
 interface Props {
diff --git a/apps/web/src/components/views/settings/devices/DeviceTile.tsx b/apps/web/src/components/views/settings/devices/DeviceTile.tsx
index c2490a06d9..5c3f8ed260 100644
--- a/apps/web/src/components/views/settings/devices/DeviceTile.tsx
+++ b/apps/web/src/components/views/settings/devices/DeviceTile.tsx
@@ -14,6 +14,7 @@ import { type ExtendedDevice } from "./types";
 import { DeviceTypeIcon } from "./DeviceTypeIcon";
 import { preventDefaultWrapper } from "../../../../utils/NativeEventUtils";
 import { DeviceMetaData } from "./DeviceMetaData";
+import { DeviceType } from "../../../../utils/device/parseUserAgent.ts";
 export interface DeviceTileProps {
     device: ExtendedDevice;
     isSelected?: boolean;
@@ -31,18 +32,22 @@ const DeviceTileName: React.FC<{ device: ExtendedDevice }> = ({ device }) => {
 
 const DeviceTile: React.FC<DeviceTileProps> = ({ device, children, isSelected, onClick }) => {
     return (
+        // We break the rule here as this is a mouse-only shortcut
+        // oxlint-disable-next-line jsx-a11y/click-events-have-key-events
         <div
             className={classNames("mx_DeviceTile", { mx_DeviceTile_interactive: !!onClick })}
             data-testid={`device-tile-${device.device_id}`}
             onClick={onClick}
         >
-            <DeviceTypeIcon isVerified={device.isVerified} isSelected={isSelected} deviceType={device.deviceType} />
+            <DeviceTypeIcon isVerified={device.isVerified} isSelected={isSelected} deviceType={DeviceType.Unknown} />
             <div className="mx_DeviceTile_info">
                 <DeviceTileName device={device} />
                 <div className="mx_DeviceTile_metadata">
                     <DeviceMetaData device={device} />
                 </div>
             </div>
+            {/* We break the rule here as this is a mouse-only interaction */}
+            {/* oxlint-disable-next-line jsx-a11y/click-events-have-key-events */}
             <div className="mx_DeviceTile_actions" onClick={preventDefaultWrapper(() => {})}>
                 {children}
             </div>
diff --git a/apps/web/src/components/views/settings/devices/FilteredDeviceList.tsx b/apps/web/src/components/views/settings/devices/FilteredDeviceList.tsx
index dc4f010782..9c78130bde 100644
--- a/apps/web/src/components/views/settings/devices/FilteredDeviceList.tsx
+++ b/apps/web/src/components/views/settings/devices/FilteredDeviceList.tsx
@@ -299,7 +299,7 @@ export const FilteredDeviceList = ({
     ];
 
     const onFilterOptionChange = (filterId: DeviceFilterKey): void => {
-        onFilterChange(filterId === ALL_FILTER_ID ? undefined : (filterId as FilterVariation));
+        onFilterChange(filterId === ALL_FILTER_ID ? undefined : filterId);
     };
 
     const isAllSelected = selectedDeviceIds.length >= sortedDevices.length;
@@ -323,16 +323,6 @@ export const FilteredDeviceList = ({
             >
                 {selectedDeviceIds.length ? (
                     <>
-                        <AccessibleButton
-                            data-testid="sign-out-selection-cta"
-                            kind="danger_inline"
-                            disabled={isSigningOut}
-                            onClick={() => onSignOutDevices(selectedDeviceIds)}
-                            className="mx_FilteredDeviceList_headerButton"
-                        >
-                            {isSigningOut && <Spinner size={16} />}
-                            {_t("action|sign_out")}
-                        </AccessibleButton>
                         <AccessibleButton
                             data-testid="cancel-selection-cta"
                             kind="content_inline"
@@ -342,6 +332,16 @@ export const FilteredDeviceList = ({
                         >
                             {_t("action|cancel")}
                         </AccessibleButton>
+                        <AccessibleButton
+                            data-testid="sign-out-selection-cta"
+                            kind="danger_inline"
+                            disabled={isSigningOut}
+                            onClick={() => onSignOutDevices(selectedDeviceIds)}
+                            className="mx_FilteredDeviceList_headerButton"
+                        >
+                            {isSigningOut && <Spinner size={16} />}
+                            {_t("settings|sessions|sign_out_n_sessions", { count: selectedDeviceIds.length })}
+                        </AccessibleButton>
                     </>
                 ) : (
                     <FilterDropdown<DeviceFilterKey>
diff --git a/apps/web/src/components/views/settings/devices/deleteDevices.tsx b/apps/web/src/components/views/settings/devices/deleteDevices.ts
similarity index 100%
rename from apps/web/src/components/views/settings/devices/deleteDevices.tsx
rename to apps/web/src/components/views/settings/devices/deleteDevices.ts
diff --git a/apps/web/src/components/views/settings/devices/types.ts b/apps/web/src/components/views/settings/devices/types.ts
index a7f9dfa952..04d1ad1bd5 100644
--- a/apps/web/src/components/views/settings/devices/types.ts
+++ b/apps/web/src/components/views/settings/devices/types.ts
@@ -8,8 +8,6 @@ Please see LICENSE files in the repository root for full details.
 
 import { type IMyDevice } from "matrix-js-sdk/src/matrix";
 
-import { type ExtendedDeviceInformation } from "../../../../utils/device/parseUserAgent";
-
 export type DeviceWithVerification = IMyDevice & {
     /**
      * `null` if the device is unknown or has not published encryption keys; otherwise a boolean
@@ -23,7 +21,7 @@ export type ExtendedDeviceAppInfo = {
     appVersion?: string;
     url?: string;
 };
-export type ExtendedDevice = DeviceWithVerification & ExtendedDeviceAppInfo & ExtendedDeviceInformation;
+export type ExtendedDevice = DeviceWithVerification & ExtendedDeviceAppInfo;
 export type DevicesDictionary = Record<ExtendedDevice["device_id"], ExtendedDevice>;
 
 export enum DeviceSecurityVariation {
diff --git a/apps/web/src/components/views/settings/devices/useOwnDevices.ts b/apps/web/src/components/views/settings/devices/useOwnDevices.ts
index 34aec1c012..b30fb9da65 100644
--- a/apps/web/src/components/views/settings/devices/useOwnDevices.ts
+++ b/apps/web/src/components/views/settings/devices/useOwnDevices.ts
@@ -16,7 +16,6 @@ import {
     type MatrixEvent,
     PUSHER_DEVICE_ID,
     PUSHER_ENABLED,
-    UNSTABLE_MSC3852_LAST_SEEN_UA,
     type MatrixError,
     type LocalNotificationSettings,
 } from "matrix-js-sdk/src/matrix";
@@ -27,7 +26,6 @@ import { _t } from "../../../../languageHandler";
 import { getDeviceClientInformation, pruneClientInformation } from "../../../../utils/device/clientInformation";
 import { type DevicesDictionary, type ExtendedDevice, type ExtendedDeviceAppInfo } from "./types";
 import { useEventEmitter } from "../../../../hooks/useEventEmitter";
-import { parseUserAgent } from "../../../../utils/device/parseUserAgent";
 import { isDeviceVerified } from "../../../../utils/device/isDeviceVerified";
 import { SDKContext } from "../../../../contexts/SDKContext";
 
@@ -56,7 +54,6 @@ export async function fetchExtendedDeviceInformation(matrixClient: MatrixClient)
             ...device,
             isVerified: await isDeviceVerified(matrixClient, device.device_id),
             ...parseDeviceExtendedInformation(matrixClient, device),
-            ...parseUserAgent(device[UNSTABLE_MSC3852_LAST_SEEN_UA.name]),
         };
     }
     return devicesDict;
diff --git a/apps/web/src/components/views/settings/discovery/DiscoverySettings.tsx b/apps/web/src/components/views/settings/discovery/DiscoverySettings.tsx
index c6535188f3..db66c93888 100644
--- a/apps/web/src/components/views/settings/discovery/DiscoverySettings.tsx
+++ b/apps/web/src/components/views/settings/discovery/DiscoverySettings.tsx
@@ -73,7 +73,7 @@ export const DiscoverySettings: React.FC = () => {
                 if (payload.action === "id_server_changed") {
                     setIdServerName(abbreviateUrl(client.getIdentityServerUrl()));
 
-                    getThreepidState().then();
+                    getThreepidState();
                 }
             },
             [client, getThreepidState],
@@ -113,9 +113,7 @@ export const DiscoverySettings: React.FC = () => {
                     // User accepted all terms
                     setMustAgreeToTerms(false);
                 } catch (e) {
-                    logger.warn(
-                        `Unable to reach identity server at ${idServerUrl} to check ` + `for terms in Settings`,
-                    );
+                    logger.warn(`Unable to reach identity server at ${idServerUrl} to check for terms in Settings`);
                     logger.warn(e);
                 }
             } catch {}
@@ -132,7 +130,6 @@ export const DiscoverySettings: React.FC = () => {
             <>
                 <InlineTermsAgreement
                     policiesAndServicePairs={requiredPolicyInfo.policiesAndServices}
-                    agreedUrls={requiredPolicyInfo.agreedUrls}
                     onFinished={requiredPolicyInfo.resolve}
                     introElement={intro}
                 />
diff --git a/apps/web/src/components/views/settings/notifications/NotificationSettings2.tsx b/apps/web/src/components/views/settings/notifications/NotificationSettings2.tsx
index 7619e5acea..9214f81f2d 100644
--- a/apps/web/src/components/views/settings/notifications/NotificationSettings2.tsx
+++ b/apps/web/src/components/views/settings/notifications/NotificationSettings2.tsx
@@ -99,7 +99,7 @@ export default function NotificationSettings2(): JSX.Element {
                 <SettingsBanner
                     icon={<img src={NewAndImprovedIcon} alt="" width={12} />}
                     action={_t("action|proceed")}
-                    onAction={() => reconcile(model!)}
+                    onAction={() => reconcile(model)}
                 >
                     {_t(
                         "settings|notifications|labs_notice_prompt",
@@ -276,6 +276,7 @@ export default function NotificationSettings2(): JSX.Element {
                                     symbol="1"
                                     count={1}
                                     level={NotificationLevel.Notification}
+                                    className="mx_NotificationSettings2_notificationBadge"
                                 />
                             ),
                         },
diff --git a/apps/web/src/components/views/settings/tabs/room/BridgeSettingsTab.tsx b/apps/web/src/components/views/settings/tabs/room/BridgeSettingsTab.tsx
index 42fa45e016..ae82800aa3 100644
--- a/apps/web/src/components/views/settings/tabs/room/BridgeSettingsTab.tsx
+++ b/apps/web/src/components/views/settings/tabs/room/BridgeSettingsTab.tsx
@@ -40,7 +40,7 @@ export default class BridgeSettingsTab extends React.Component<IProps> {
         const roomState = client.getRoom(roomId)?.currentState;
         if (!roomState) return [];
 
-        return BRIDGE_EVENT_TYPES.map((typeName) => roomState.getStateEvents(typeName)).flat(1);
+        return BRIDGE_EVENT_TYPES.flatMap((typeName) => roomState.getStateEvents(typeName));
     }
 
     public render(): React.ReactNode {
diff --git a/apps/web/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx b/apps/web/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx
index a66c75d65c..68528852c0 100644
--- a/apps/web/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx
+++ b/apps/web/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx
@@ -11,7 +11,6 @@ import { logger } from "matrix-js-sdk/src/logger";
 
 import { _t } from "../../../../../languageHandler";
 import AccessibleButton, { type ButtonEvent } from "../../../elements/AccessibleButton";
-import Notifier from "../../../../../Notifier";
 import SettingsStore from "../../../../../settings/SettingsStore";
 import { SettingLevel } from "../../../../../settings/SettingLevel";
 import { type RoomEchoChamber } from "../../../../../stores/local-echo/RoomEchoChamber";
@@ -26,6 +25,7 @@ import { chromeFileInputFix } from "../../../../../utils/BrowserWorkarounds";
 import SettingsTab from "../SettingsTab";
 import { SettingsSection } from "../../shared/SettingsSection";
 import { SettingsSubsection } from "../../shared/SettingsSubsection";
+import { SDKContextClass } from "../../../../../contexts/SDKContextClass.ts";
 
 interface IProps {
     roomId: string;
@@ -50,7 +50,7 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
         this.roomProps = EchoChamber.forRoom(context.getRoom(this.props.roomId)!);
 
         let currentSound = "default";
-        const soundData = Notifier.getSoundForRoom(this.props.roomId);
+        const soundData = SDKContextClass.instance.notifier.getSoundForRoom(this.props.roomId);
         if (soundData) {
             currentSound = soundData.name || soundData.url;
         }
@@ -231,7 +231,7 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
                                     value: RoomNotifState.Mute,
                                     label: (
                                         <>
-                                            {_t("common|off")}
+                                            {_t("common|mute")}
                                             <div className="mx_NotificationSettingsTab_microCopy">
                                                 {_t("notifications|mute_description")}
                                             </div>
diff --git a/apps/web/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx b/apps/web/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx
index c9078d86e3..993dfead69 100644
--- a/apps/web/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx
+++ b/apps/web/src/components/views/settings/tabs/room/RolesRoomSettingsTab.tsx
@@ -18,7 +18,6 @@ import Modal from "../../../../../Modal";
 import ErrorDialog from "../../../dialogs/ErrorDialog";
 import PowerSelector from "../../../elements/PowerSelector";
 import SettingsFieldset from "../../SettingsFieldset";
-import SettingsStore from "../../../../../settings/SettingsStore";
 import SdkConfig, { DEFAULTS } from "../../../../../SdkConfig";
 import { AddPrivilegedUsers } from "../../AddPrivilegedUsers";
 import SettingsTab from "../SettingsTab";
@@ -270,17 +269,14 @@ export default class RolesRoomSettingsTab extends React.Component<IProps, RolesR
             [EventType.Reaction]: _td("room_settings|permissions|m.reaction"),
             [EventType.RoomRedaction]: _td("room_settings|permissions|m.room.redaction"),
             [EventType.RoomPinnedEvents]: _td("room_settings|permissions|m.room.pinned_events"),
-
             // TODO: Enable support for m.widget event type (https://github.com/vector-im/element-web/issues/13111)
             "im.vector.modular.widgets": isSpaceRoom ? null : _td("room_settings|permissions|m.widget"),
         };
-
         // MSC3401: Native Group VoIP signaling
-        if (SettingsStore.getValue("feature_group_calls")) {
+        if (!SdkConfig.get("element_call").disable) {
             plEventsToLabels[ElementCallEventType.name] = _td("room_settings|permissions|m.call");
             plEventsToLabels[ElementCallMemberEventType.name] = _td("room_settings|permissions|m.call.member");
         }
-
         const powerLevelDescriptors: Record<string, IPowerLevelDescriptor> = {
             "users_default": {
                 desc: _t("room_settings|permissions|users_default"),
@@ -391,7 +387,7 @@ export default class RolesRoomSettingsTab extends React.Component<IProps, RolesR
         }
 
         const powerSelectors = Object.keys(powerLevelDescriptors)
-            .map((key, index) => {
+            .map((key) => {
                 const descriptor = powerLevelDescriptors[key];
                 if (isSpaceRoom && descriptor.hideForSpace) {
                     return null;
@@ -399,7 +395,7 @@ export default class RolesRoomSettingsTab extends React.Component<IProps, RolesR
 
                 const value = parseIntWithDefault(get(plContent, key), descriptor.defaultValue);
                 return (
-                    <div key={index} className="">
+                    <div key={key}>
                         <PowerSelector
                             label={descriptor.desc}
                             value={value}
diff --git a/apps/web/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx b/apps/web/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
index 5bb8780b3c..65de4092fe 100644
--- a/apps/web/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
+++ b/apps/web/src/components/views/settings/tabs/room/SecurityRoomSettingsTab.tsx
@@ -249,8 +249,13 @@ export default class SecurityRoomSettingsTab extends React.Component<IProps, ISt
     };
 
     private async hasAliases(): Promise<boolean> {
+        // The published addresses can live on any server, so a room can be linkable without this
+        // server holding a local alias for it.
+        const room = this.props.room;
+        if (room.getCanonicalAlias() || room.getAltAliases().length > 0) return true;
+
         const cli = this.context;
-        const response = await cli.getLocalAliases(this.props.room.roomId);
+        const response = await cli.getLocalAliases(room.roomId);
         const localAliases = response.aliases;
         return Array.isArray(localAliases) && localAliases.length !== 0;
     }
diff --git a/apps/web/src/components/views/settings/tabs/user/AccountUserSettingsTab.tsx b/apps/web/src/components/views/settings/tabs/user/AccountUserSettingsTab.tsx
index 9bd33fd394..ccfb8160ab 100644
--- a/apps/web/src/components/views/settings/tabs/user/AccountUserSettingsTab.tsx
+++ b/apps/web/src/components/views/settings/tabs/user/AccountUserSettingsTab.tsx
@@ -23,9 +23,8 @@ import ChangePassword from "../../ChangePassword";
 import SettingsTab from "../SettingsTab";
 import { SettingsSection } from "../../shared/SettingsSection";
 import { SettingsSubsection, SettingsSubsectionText } from "../../shared/SettingsSubsection";
-import { SDKContext } from "../../../../../contexts/SDKContext";
 import { UserPersonalInfoSettings } from "../../UserPersonalInfoSettings";
-import { useMatrixClientContext } from "../../../../../contexts/MatrixClientContext";
+import { SDKContext } from "../../../../../contexts/SDKContext.ts";
 
 interface IProps {
     closeSettingsFn: () => void;
@@ -90,8 +89,8 @@ const AccountUserSettingsTab: React.FC<IProps> = ({ closeSettingsFn }) => {
     const [canSetAvatar, setCanSetAvatar] = React.useState<boolean>(false);
     const [canChangePassword, setCanChangePassword] = React.useState<boolean>(false);
 
-    const cli = useMatrixClientContext();
     const sdkContext = useContext(SDKContext);
+    const cli = sdkContext.client!;
 
     useEffect(() => {
         (async () => {
@@ -103,8 +102,8 @@ const AccountUserSettingsTab: React.FC<IProps> = ({ closeSettingsFn }) => {
             // the enabled flag value.
             const canChangePassword = !changePasswordCap || changePasswordCap["enabled"] !== false;
 
-            await sdkContext.oidcClientStore.readyPromise; // wait for the store to be ready
-            const externalAccountManagementUrl = sdkContext.oidcClientStore.accountManagementEndpoint;
+            const authMetadata = await cli.getAuthMetadata().catch(() => {});
+            const externalAccountManagementUrl = authMetadata?.account_management_uri;
             // https://spec.matrix.org/v1.7/client-server-api/#m3pid_changes-capability
             // We support as far back as v1.1 which doesn't have m.3pid_changes
             // so the behaviour for when it is missing has to be assume true
@@ -121,7 +120,7 @@ const AccountUserSettingsTab: React.FC<IProps> = ({ closeSettingsFn }) => {
             setExternalAccountManagementUrl(externalAccountManagementUrl);
             setCanChangePassword(canChangePassword);
         })();
-    }, [cli, sdkContext.oidcClientStore]);
+    }, [cli]);
 
     const onPasswordChangeError = useCallback((err: Error): void => {
         logger.error("Failed to change password: " + err);
diff --git a/apps/web/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx b/apps/web/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
index 701736381a..debe5a23e1 100644
--- a/apps/web/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
+++ b/apps/web/src/components/views/settings/tabs/user/HelpUserSettingsTab.tsx
@@ -176,10 +176,12 @@ export default class HelpUserSettingsTab extends React.Component<EmptyObject, IS
                                 {},
                                 {
                                     twemoji: (sub) => (
-                                        <ExternalLink href="https://twemoji.twitter.com/">{sub}</ExternalLink>
+                                        <ExternalLink href="https://github.com/jdecked/twemoji">{sub}</ExternalLink>
                                     ),
                                     author: (sub) => (
-                                        <ExternalLink href="https://twemoji.twitter.com/">{sub}</ExternalLink>
+                                        <ExternalLink href="https://github.com/jdecked/twemoji/graphs/contributors">
+                                            {sub}
+                                        </ExternalLink>
                                     ),
                                     terms: (sub) => (
                                         <ExternalLink
diff --git a/apps/web/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx b/apps/web/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
index 84febf8e5d..2cf3dfb9ee 100644
--- a/apps/web/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
+++ b/apps/web/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx
@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type ChangeEvent, type JSX, type ReactElement, useCallback, useEffect, useState } from "react";
 import { SettingsToggleInput } from "@vector-im/compound-web";
+import { type EmptyObject } from "matrix-js-sdk/src/matrix";
 
 import { type NonEmptyArray } from "../../../../../@types/common";
 import { _t, getCurrentLanguage } from "../../../../../languageHandler";
@@ -36,14 +37,9 @@ import { MediaPreviewAccountSettings } from "./MediaPreviewAccountSettings.tsx";
 import { InviteRulesAccountSetting } from "./InviteRulesAccountSettings.tsx";
 import SettingsDropdown from "../../../elements/SettingsDropdown.tsx";
 
-interface IProps {
-    closeSettingsFn(success: boolean): void;
-}
-
 interface IState {
     timezone: string | undefined;
     timezones: string[];
-    timezoneSearch: string | undefined;
     autocompleteDelay: string;
     readMarkerInViewThresholdMs: string;
     readMarkerOutOfViewThresholdMs: string;
@@ -120,9 +116,7 @@ const SpellCheckSection: React.FC = () => {
     );
 };
 
-export default class PreferencesUserSettingsTab extends React.Component<IProps, IState> {
-    private static ROOM_LIST_SETTINGS: BooleanSettingKey[] = ["breadcrumbs"];
-
+export default class PreferencesUserSettingsTab extends React.Component<EmptyObject, IState> {
     private static SPACES_SETTINGS: BooleanSettingKey[] = ["Spaces.allRoomsInHome"];
 
     private static KEYBINDINGS_SETTINGS: BooleanSettingKey[] = ["ctrlFForSearch"];
@@ -171,13 +165,12 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
         // Autocomplete delay (niche text box)
     ];
 
-    public constructor(props: IProps) {
+    public constructor(props: EmptyObject) {
         super(props);
 
         this.state = {
             timezone: TimezoneHandler.getUserTimezone(),
             timezones: TimezoneHandler.getAllTimezones(),
-            timezoneSearch: undefined,
             autocompleteDelay: SettingsStore.getValueAt(SettingLevel.DEVICE, "autocompleteDelay").toString(10),
             readMarkerInViewThresholdMs: SettingsStore.getValueAt(
                 SettingLevel.DEVICE,
@@ -206,7 +199,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
               })
             : TimezoneHandler.getAllTimezones();
 
-        this.setState({ timezones, timezoneSearch });
+        this.setState({ timezones });
     };
 
     private onAutocompleteDelayChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
@@ -246,7 +239,6 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
             timezone: TimezoneHandler.shortBrowserTimezone(),
         });
 
-        const newRoomListEnabled = SettingsStore.getValue("feature_new_room_list");
         const brand = SdkConfig.get().brand;
 
         const timezones = this.state.timezones.map((tz) => {
@@ -279,11 +271,8 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
                     )}
 
                     <SettingsSubsection heading={_t("settings|preferences|room_list_heading")} formWrap>
-                        {!newRoomListEnabled && this.renderGroup(PreferencesUserSettingsTab.ROOM_LIST_SETTINGS)}
-                        {/* The settings is on device level where the other room list settings are on account level  */}
-                        {newRoomListEnabled && (
-                            <SettingsFlag name="RoomList.showMessagePreview" level={SettingLevel.DEVICE} />
-                        )}
+                        <SettingsFlag name="RoomList.showMessagePreview" level={SettingLevel.DEVICE} />
+                        <SettingsFlag name="RoomList.showSections" level={SettingLevel.ACCOUNT} />
                     </SettingsSubsection>
 
                     <SettingsSubsection heading={_t("common|spaces")} formWrap>
diff --git a/apps/web/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx b/apps/web/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx
index f94b2842f8..f10f10e9ce 100644
--- a/apps/web/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx
+++ b/apps/web/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type JSX, type ReactNode } from "react";
 import { sleep } from "matrix-js-sdk/src/utils";
-import { type Room, RoomEvent, type IServerVersions } from "matrix-js-sdk/src/matrix";
+import { type Room, RoomEvent, type EmptyObject } from "matrix-js-sdk/src/matrix";
 import { KnownMembership, type Membership } from "matrix-js-sdk/src/types";
 import { logger } from "matrix-js-sdk/src/logger";
 import { WarningIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
@@ -80,22 +80,17 @@ export class IgnoredUser extends React.Component<IIgnoredUserProps> {
     }
 }
 
-interface IProps {
-    closeSettingsFn: () => void;
-}
-
 interface IState {
     ignoredUserIds: string[];
     waitingUnignored: string[];
     managingInvites: boolean;
     invitedRoomIds: Set<string>;
-    versions?: IServerVersions;
 }
 
-export default class SecurityUserSettingsTab extends React.Component<IProps, IState> {
+export default class SecurityUserSettingsTab extends React.Component<EmptyObject, IState> {
     private dispatcherRef?: string;
 
-    public constructor(props: IProps) {
+    public constructor(props: EmptyObject) {
         super(props);
 
         // Get rooms we're invited to
@@ -120,9 +115,6 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
     public componentDidMount(): void {
         this.dispatcherRef = dis.register(this.onAction);
         MatrixClientPeg.safeGet().on(RoomEvent.MyMembership, this.onMyMembership);
-        MatrixClientPeg.safeGet()
-            .getVersions()
-            .then((versions) => this.setState({ versions }));
     }
 
     public componentWillUnmount(): void {
diff --git a/apps/web/src/components/views/settings/tabs/user/SessionManagerTab.tsx b/apps/web/src/components/views/settings/tabs/user/SessionManagerTab.tsx
index 01aba5ccdb..2e14aed20a 100644
--- a/apps/web/src/components/views/settings/tabs/user/SessionManagerTab.tsx
+++ b/apps/web/src/components/views/settings/tabs/user/SessionManagerTab.tsx
@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { lazy, Suspense, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
+import { RendezvousIntent } from "matrix-js-sdk/src/rendezvous";
 
 import { _t } from "../../../../../languageHandler";
 import Modal from "../../../../../Modal";
@@ -30,7 +31,7 @@ import QuestionDialog from "../../../dialogs/QuestionDialog";
 import { type FilterVariation } from "../../devices/filter";
 import { OtherSessionsSectionHeading } from "../../devices/OtherSessionsSectionHeading";
 import { SettingsSection } from "../../shared/SettingsSection";
-import { getManageDeviceUrl } from "../../../../../utils/oidc/urls.ts";
+import { getManageDeviceUrl } from "../../../../../utils/oauth/urls.ts";
 import { SDKContext } from "../../../../../contexts/SDKContext";
 import Spinner from "../../../elements/Spinner";
 
@@ -39,7 +40,7 @@ const LoginWithQR = lazy(() => import("../../../auth/LoginWithQR"));
 
 const confirmSignOut = async (sessionsToSignOutCount: number): Promise<boolean> => {
     const { finished } = Modal.createDialog(QuestionDialog, {
-        title: _t("action|sign_out"),
+        title: _t("settings|sessions|sign_out_n_sessions", { count: sessionsToSignOutCount }),
         description: (
             <div>
                 <p>
@@ -50,7 +51,7 @@ const confirmSignOut = async (sessionsToSignOutCount: number): Promise<boolean>
             </div>
         ),
         cancelButton: _t("action|cancel"),
-        button: _t("action|sign_out"),
+        button: _t("settings|sessions|sign_out_n_sessions", { count: sessionsToSignOutCount }),
     });
     const [confirmed] = await finished;
 
@@ -153,12 +154,12 @@ const SessionManagerTab: React.FC<{
      * See https://github.com/matrix-org/matrix-spec-proposals/pull/3824
      */
     const accountManagement = useAsyncMemo(async () => {
-        await sdkContext.oidcClientStore.readyPromise; // wait for the store to be ready
+        const authMetadata = await matrixClient.getAuthMetadata().catch(() => {});
         return {
-            endpoint: sdkContext.oidcClientStore.accountManagementEndpoint,
-            actionsSupported: sdkContext.oidcClientStore.accountManagementActionsSupported,
+            endpoint: authMetadata?.account_management_uri,
+            actionsSupported: authMetadata?.account_management_actions_supported,
         };
-    }, [sdkContext.oidcClientStore]);
+    }, [matrixClient]);
     const disableMultipleSignout = !!accountManagement?.endpoint;
     const userId = matrixClient?.getUserId();
     const currentUserMember = (userId && matrixClient?.getUser(userId)) || undefined;
@@ -263,7 +264,12 @@ const SessionManagerTab: React.FC<{
     if (signInWithQrMode) {
         return (
             <Suspense fallback={<Spinner />}>
-                <LoginWithQR mode={signInWithQrMode} onFinished={onQrFinish} client={matrixClient} />
+                <LoginWithQR
+                    mode={signInWithQrMode}
+                    onFinished={onQrFinish}
+                    client={matrixClient}
+                    intent={RendezvousIntent.RECIPROCATE_LOGIN_ON_EXISTING_DEVICE}
+                />
             </Suspense>
         );
     }
diff --git a/apps/web/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx b/apps/web/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx
index 041e437661..31df91ba5e 100644
--- a/apps/web/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx
+++ b/apps/web/src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx
@@ -7,12 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type ChangeEvent, useMemo } from "react";
-import {
-    VideoCallSolidIcon,
-    HomeSolidIcon,
-    UserProfileSolidIcon,
-    FavouriteSolidIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
+import { VideoCallSolidIcon, HomeSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../../../languageHandler";
 import SettingsStore from "../../../../../settings/SettingsStore";
@@ -39,22 +34,13 @@ export const onMetaSpaceChangeFactory =
         PosthogTrackers.trackInteraction(
             interactionName,
             e,
-            [
-                MetaSpace.Home,
-                null,
-                MetaSpace.Favourites,
-                MetaSpace.People,
-                MetaSpace.Orphans,
-                MetaSpace.VideoRooms,
-            ].indexOf(metaSpace),
+            [MetaSpace.Home, null, MetaSpace.Orphans, MetaSpace.VideoRooms].indexOf(metaSpace),
         );
     };
 
 const SidebarUserSettingsTab: React.FC = () => {
     const {
         [MetaSpace.Home]: homeEnabled,
-        [MetaSpace.Favourites]: favouritesEnabled,
-        [MetaSpace.People]: peopleEnabled,
         [MetaSpace.Orphans]: orphansEnabled,
         [MetaSpace.VideoRooms]: videoRoomsEnabled,
     } = useSettingValue("Spaces.enabledMetaSpaces");
@@ -71,9 +57,6 @@ const SidebarUserSettingsTab: React.FC = () => {
         PosthogTrackers.trackInteraction("WebSettingsSidebarTabSpacesCheckbox", event, 1);
     };
 
-    // "Favourites" and "People" meta spaces are not available in the new room list
-    const newRoomListEnabled = useSettingValue("feature_new_room_list");
-
     return (
         <SettingsTab>
             <SettingsSection>
@@ -103,36 +86,6 @@ const SidebarUserSettingsTab: React.FC = () => {
                         {_t("settings|sidebar|metaspaces_home_all_rooms")}
                     </StyledCheckbox>
 
-                    {!newRoomListEnabled && (
-                        <>
-                            <StyledCheckbox
-                                checked={!!favouritesEnabled}
-                                onChange={onMetaSpaceChangeFactory(
-                                    MetaSpace.Favourites,
-                                    "WebSettingsSidebarTabSpacesCheckbox",
-                                )}
-                                className="mx_SidebarUserSettingsTab_checkbox"
-                                description={_t("settings|sidebar|metaspaces_favourites_description")}
-                            >
-                                <FavouriteSolidIcon className="mx_SidebarUserSettingsTab_icon" />
-                                {_t("common|favourites")}
-                            </StyledCheckbox>
-
-                            <StyledCheckbox
-                                checked={!!peopleEnabled}
-                                onChange={onMetaSpaceChangeFactory(
-                                    MetaSpace.People,
-                                    "WebSettingsSidebarTabSpacesCheckbox",
-                                )}
-                                className="mx_SidebarUserSettingsTab_checkbox"
-                                description={_t("settings|sidebar|metaspaces_people_description")}
-                            >
-                                <UserProfileSolidIcon className="mx_SidebarUserSettingsTab_icon" />
-                                {_t("common|people")}
-                            </StyledCheckbox>
-                        </>
-                    )}
-
                     <StyledCheckbox
                         checked={!!orphansEnabled}
                         onChange={onMetaSpaceChangeFactory(MetaSpace.Orphans, "WebSettingsSidebarTabSpacesCheckbox")}
diff --git a/apps/web/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx b/apps/web/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx
index db08c2947e..3675921ea1 100644
--- a/apps/web/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx
+++ b/apps/web/src/components/views/settings/tabs/user/VoiceUserSettingsTab.tsx
@@ -11,7 +11,7 @@ import React, { type ChangeEventHandler, type JSX, type ReactNode } from "react"
 import { logger } from "matrix-js-sdk/src/logger";
 import { FALLBACK_ICE_SERVER } from "matrix-js-sdk/src/webrtc/call";
 import { type EmptyObject } from "matrix-js-sdk/src/matrix";
-import { Form, SettingsToggleInput } from "@vector-im/compound-web";
+import { Alert, Form, SettingsToggleInput } from "@vector-im/compound-web";
 
 import { _t } from "../../../../../languageHandler";
 import MediaDeviceHandler, { type IMediaDevices, MediaDeviceKindEnum } from "../../../../../MediaDeviceHandler";
@@ -19,11 +19,13 @@ import Field from "../../../elements/Field";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import { SettingLevel } from "../../../../../settings/SettingLevel";
 import SettingsFlag from "../../../elements/SettingsFlag";
+import SettingsStore from "../../../../../settings/SettingsStore";
 import { requestMediaPermissions } from "../../../../../utils/media/requestMediaPermissions";
 import SettingsTab from "../SettingsTab";
 import { SettingsSection } from "../../shared/SettingsSection";
 import { SettingsSubsection } from "../../shared/SettingsSubsection";
 import MatrixClientContext from "../../../../../contexts/MatrixClientContext";
+import SdkConfig from "../../../../../SdkConfig";
 
 interface IState {
     mediaDevices: IMediaDevices | null;
@@ -33,6 +35,7 @@ interface IState {
     audioAutoGainControl: boolean;
     audioEchoCancellation: boolean;
     audioNoiseSuppression: boolean;
+    enableLegacyCallsVoip: boolean;
 }
 
 /**
@@ -65,16 +68,29 @@ export default class VoiceUserSettingsTab extends React.Component<EmptyObject, I
             audioAutoGainControl: MediaDeviceHandler.getAudioAutoGainControl(),
             audioEchoCancellation: MediaDeviceHandler.getAudioEchoCancellation(),
             audioNoiseSuppression: MediaDeviceHandler.getAudioNoiseSuppression(),
+            enableLegacyCallsVoip: SettingsStore.getValue("enableLegacyCallsVoip"),
         };
     }
 
+    private legacyCallsEnabledWatcherRef: string | undefined;
+
     public async componentDidMount(): Promise<void> {
+        this.legacyCallsEnabledWatcherRef = SettingsStore.watchSetting(
+            "enableLegacyCallsVoip",
+            null,
+            (...[, , , , value]) => this.setState({ enableLegacyCallsVoip: value! }),
+        );
+
         const canSeeDeviceLabels = await MediaDeviceHandler.hasAnyLabeledDevices();
         if (canSeeDeviceLabels) {
             await this.refreshMediaDevices();
         }
     }
 
+    public componentWillUnmount(): void {
+        SettingsStore.unwatchSetting(this.legacyCallsEnabledWatcherRef);
+    }
+
     private refreshMediaDevices = async (stream?: MediaStream): Promise<void> => {
         this.setState({
             mediaDevices: (await MediaDeviceHandler.getDevices()) ?? null,
@@ -143,34 +159,46 @@ export default class VoiceUserSettingsTab extends React.Component<EmptyObject, I
     private onAutoGainChanged: ChangeEventHandler<HTMLInputElement> = async (event) => {
         const enable = event.target.checked;
         await MediaDeviceHandler.setAudioAutoGainControl(enable);
-        this.setState({ audioAutoGainControl: MediaDeviceHandler.getAudioAutoGainControl() });
+        this.setState({
+            audioAutoGainControl: MediaDeviceHandler.getAudioAutoGainControl(),
+        });
     };
 
     private onNoiseSuppressionChanged: ChangeEventHandler<HTMLInputElement> = async (event) => {
         const enable = event.target.checked;
         await MediaDeviceHandler.setAudioNoiseSuppression(enable);
-        this.setState({ audioNoiseSuppression: MediaDeviceHandler.getAudioNoiseSuppression() });
+        this.setState({
+            audioNoiseSuppression: MediaDeviceHandler.getAudioNoiseSuppression(),
+        });
     };
 
     private onEchoCancellationChanged: ChangeEventHandler<HTMLInputElement> = async (event) => {
         const enable = event.target.checked;
         await MediaDeviceHandler.setAudioEchoCancellation(enable);
-        this.setState({ audioEchoCancellation: MediaDeviceHandler.getAudioEchoCancellation() });
+        this.setState({
+            audioEchoCancellation: MediaDeviceHandler.getAudioEchoCancellation(),
+        });
     };
 
-    public render(): ReactNode {
+    public render(): JSX.Element {
         let requestButton: ReactNode | undefined;
         let speakerDropdown: ReactNode | undefined;
         let microphoneDropdown: ReactNode | undefined;
+
         let webcamDropdown: ReactNode | undefined;
         if (!this.state.mediaDevices) {
             requestButton = (
-                <div>
-                    <p>{_t("settings|voip|missing_permissions_prompt")}</p>
-                    <AccessibleButton onClick={this.requestMediaPermissions} kind="primary">
-                        {_t("settings|voip|request_permissions")}
-                    </AccessibleButton>
-                </div>
+                <Alert
+                    type="info"
+                    title={_t("settings|voip|permissions")}
+                    actions={
+                        <AccessibleButton onClick={this.requestMediaPermissions} kind="primary">
+                            {_t("settings|voip|request_permissions")}
+                        </AccessibleButton>
+                    }
+                >
+                    {_t("settings|voip|missing_permissions_prompt", { brand: SdkConfig.get("brand") })}
+                </Alert>
             );
         } else if (this.state.mediaDevices) {
             speakerDropdown = this.renderDropdown(
@@ -185,6 +213,44 @@ export default class VoiceUserSettingsTab extends React.Component<EmptyObject, I
             );
         }
 
+        const elementCallEnabled = !SdkConfig.get("element_call").disable;
+        // We also allow/use legacy if element call is not enabled.
+        const allowLegacyCalls = !SdkConfig.get("element_call").use_exclusively || !elementCallEnabled;
+        const showLegacySettings = this.state.enableLegacyCallsVoip;
+
+        const legacySettingsComponent = (
+            <>
+                <SettingsSubsection heading={_t("settings|voip|voice_section")} stretchContent>
+                    {speakerDropdown}
+                    <SettingsToggleInput
+                        name="voice-auto-gain"
+                        label={_t("settings|voip|voice_agc")}
+                        checked={this.state.audioAutoGainControl}
+                        onChange={this.onAutoGainChanged}
+                    />
+                </SettingsSubsection>
+                <SettingsSubsection heading={_t("settings|voip|video_section")} stretchContent>
+                    {webcamDropdown}
+                    <SettingsFlag name="VideoView.flipVideoHorizontally" level={SettingLevel.ACCOUNT} />
+                </SettingsSubsection>
+                <SettingsSection heading={_t("common|advanced")}>
+                    <SettingsFlag
+                        name="webRtcAllowPeerToPeer"
+                        level={SettingLevel.DEVICE}
+                        onChange={this.changeWebRtcMethod}
+                    />
+                    <SettingsFlag
+                        name="fallbackICEServerAllowed"
+                        label={_t("settings|voip|enable_fallback_ice_server", {
+                            server: new URL(FALLBACK_ICE_SERVER).pathname,
+                        })}
+                        level={SettingLevel.DEVICE}
+                        hideIfCannotSet
+                    />
+                </SettingsSection>
+            </>
+        );
+
         return (
             <SettingsTab>
                 <Form.Root
@@ -193,26 +259,22 @@ export default class VoiceUserSettingsTab extends React.Component<EmptyObject, I
                         evt.stopPropagation();
                     }}
                 >
-                    <SettingsSection>
+                    <SettingsSection heading={_t("settings|voip|voice_input_section")}>
+                        {_t("settings|voip|voice_input_description")}
                         {requestButton}
-                        <SettingsSubsection heading={_t("settings|voip|voice_section")} stretchContent>
-                            {speakerDropdown}
-                            {microphoneDropdown}
-                            <SettingsToggleInput
-                                name="voice-auto-gain"
-                                label={_t("settings|voip|voice_agc")}
-                                checked={this.state.audioAutoGainControl}
-                                onChange={this.onAutoGainChanged}
-                            />
-                        </SettingsSubsection>
-                        <SettingsSubsection heading={_t("settings|voip|video_section")} stretchContent>
-                            {webcamDropdown}
-                            <SettingsFlag name="VideoView.flipVideoHorizontally" level={SettingLevel.ACCOUNT} />
-                        </SettingsSubsection>
+                        {microphoneDropdown}
                     </SettingsSection>
-
-                    <SettingsSection heading={_t("common|advanced")}>
-                        <SettingsSubsection heading={_t("settings|voip|voice_processing")}>
+                    {allowLegacyCalls && (
+                        <SettingsSection heading={_t("common|legacy_voice_and_video_settings")}>
+                            {elementCallEnabled && (
+                                // allow configuring Legacy calls if EC is also avalibale (otherwise we always show the legacySettingsComponent)
+                                <SettingsFlag name="enableLegacyCallsVoip" level={SettingLevel.DEVICE} />
+                            )}
+                            {(!elementCallEnabled || showLegacySettings) && legacySettingsComponent}
+                        </SettingsSection>
+                    )}
+                    {(allowLegacyCalls || elementCallEnabled) && (
+                        <SettingsSection heading={_t("settings|voip|voice_processing")}>
                             <SettingsToggleInput
                                 name="voice-noise-suppression"
                                 label={_t("settings|voip|noise_suppression")}
@@ -227,23 +289,8 @@ export default class VoiceUserSettingsTab extends React.Component<EmptyObject, I
                                 checked={this.state.audioEchoCancellation}
                                 onChange={this.onEchoCancellationChanged}
                             />
-                        </SettingsSubsection>
-                        <SettingsSubsection heading={_t("settings|voip|connection_section")}>
-                            <SettingsFlag
-                                name="webRtcAllowPeerToPeer"
-                                level={SettingLevel.DEVICE}
-                                onChange={this.changeWebRtcMethod}
-                            />
-                            <SettingsFlag
-                                name="fallbackICEServerAllowed"
-                                label={_t("settings|voip|enable_fallback_ice_server", {
-                                    server: new URL(FALLBACK_ICE_SERVER).pathname,
-                                })}
-                                level={SettingLevel.DEVICE}
-                                hideIfCannotSet
-                            />
-                        </SettingsSubsection>
-                    </SettingsSection>
+                        </SettingsSection>
+                    )}
                 </Form.Root>
             </SettingsTab>
         );
diff --git a/apps/web/src/components/views/spaces/QuickSettingsButton.tsx b/apps/web/src/components/views/spaces/QuickSettingsButton.tsx
index 3fff4f7a98..7d50f908fe 100644
--- a/apps/web/src/components/views/spaces/QuickSettingsButton.tsx
+++ b/apps/web/src/components/views/spaces/QuickSettingsButton.tsx
@@ -6,53 +6,37 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX } from "react";
+import React, { type JSX, useContext } from "react";
 import classNames from "classnames";
-import {
-    OverflowHorizontalIcon,
-    UserProfileSolidIcon,
-    FavouriteSolidIcon,
-    PinSolidIcon,
-    SettingsSolidIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
+import { SettingsSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { IconButton, Text, Tooltip } from "@vector-im/compound-web";
 
 import { _t } from "../../../languageHandler";
 import ContextMenu, { alwaysAboveRightOf, ChevronFace, useContextMenu } from "../../structures/ContextMenu";
 import AccessibleButton from "../elements/AccessibleButton";
-import StyledCheckbox from "../elements/StyledCheckbox";
-import { MetaSpace } from "../../../stores/spaces";
 import { useSettingValue } from "../../../hooks/useSettings";
-import { onMetaSpaceChangeFactory } from "../settings/tabs/user/SidebarUserSettingsTab";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
-import { UserTab } from "../dialogs/UserTab";
 import QuickThemeSwitcher from "./QuickThemeSwitcher";
 import Modal from "../../../Modal";
 import DevtoolsDialog from "../dialogs/DevtoolsDialog";
-import { SdkContextClass } from "../../../contexts/SDKContext";
+import { SDKContext } from "../../../contexts/SDKContext.ts";
 
 const QuickSettingsButton: React.FC<{
     isPanelCollapsed: boolean;
 }> = ({ isPanelCollapsed = false }) => {
+    const sdkContext = useContext(SDKContext);
     const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu<HTMLButtonElement>();
 
-    const { [MetaSpace.Favourites]: favouritesEnabled, [MetaSpace.People]: peopleEnabled } =
-        useSettingValue("Spaces.enabledMetaSpaces");
-
-    const currentRoomId = SdkContextClass.instance.roomViewStore.getRoomId();
+    const currentRoomId = sdkContext.roomViewStore.getRoomId();
     const developerModeEnabled = useSettingValue("developerMode");
-    // "Favourites" and "People" meta spaces are not available in the new room list
-    const newRoomListEnabled = useSettingValue("feature_new_room_list");
 
     let contextMenu: JSX.Element | undefined;
     if (menuDisplayed && handle.current) {
         contextMenu = (
             <ContextMenu
                 {...alwaysAboveRightOf(handle.current.getBoundingClientRect(), ChevronFace.None, 16)}
-                wrapperClassName={classNames("mx_QuickSettingsButton_ContextMenuWrapper", {
-                    mx_QuickSettingsButton_ContextMenuWrapper_new_room_list: newRoomListEnabled,
-                })}
+                wrapperClassName="mx_QuickSettingsButton_ContextMenuWrapper"
                 // Eventually replace with a properly aria-labelled menu
                 data-testid="quick-settings-menu"
                 onFinished={closeMenu}
@@ -91,49 +75,6 @@ const QuickSettingsButton: React.FC<{
                     </AccessibleButton>
                 )}
 
-                {!newRoomListEnabled && (
-                    <>
-                        <h4>
-                            <PinSolidIcon className="mx_QuickSettingsButton_icon" />
-                            {_t("quick_settings|metaspace_section")}
-                        </h4>
-                        <StyledCheckbox
-                            className="mx_QuickSettingsButton_option"
-                            checked={!!favouritesEnabled}
-                            onChange={onMetaSpaceChangeFactory(
-                                MetaSpace.Favourites,
-                                "WebQuickSettingsPinToSidebarCheckbox",
-                            )}
-                        >
-                            <FavouriteSolidIcon className="mx_QuickSettingsButton_icon" />
-                            {_t("common|favourites")}
-                        </StyledCheckbox>
-                        <StyledCheckbox
-                            className="mx_QuickSettingsButton_option"
-                            checked={!!peopleEnabled}
-                            onChange={onMetaSpaceChangeFactory(
-                                MetaSpace.People,
-                                "WebQuickSettingsPinToSidebarCheckbox",
-                            )}
-                        >
-                            <UserProfileSolidIcon className="mx_QuickSettingsButton_icon" />
-                            {_t("common|people")}
-                        </StyledCheckbox>
-                        <AccessibleButton
-                            className="mx_QuickSettingsButton_moreOptionsButton mx_QuickSettingsButton_option"
-                            onClick={() => {
-                                closeMenu();
-                                defaultDispatcher.dispatch({
-                                    action: Action.ViewUserSettings,
-                                    initialTabId: UserTab.Sidebar,
-                                });
-                            }}
-                        >
-                            <OverflowHorizontalIcon className="mx_QuickSettingsButton_icon" />
-                            {_t("quick_settings|sidebar_settings")}
-                        </AccessibleButton>
-                    </>
-                )}
                 <QuickThemeSwitcher requestClose={closeMenu} />
             </ContextMenu>
         );
@@ -144,7 +85,6 @@ const QuickSettingsButton: React.FC<{
             aria-label={_t("quick_settings|title")}
             className={classNames("mx_QuickSettingsButton", { expanded: !isPanelCollapsed })}
             onClick={openMenu}
-            title={isPanelCollapsed ? _t("quick_settings|title") : undefined}
             ref={handle}
             aria-expanded={!isPanelCollapsed}
         >
diff --git a/apps/web/src/components/views/spaces/SpaceBasicSettings.tsx b/apps/web/src/components/views/spaces/SpaceBasicSettings.tsx
index ac363de115..05edcb59ad 100644
--- a/apps/web/src/components/views/spaces/SpaceBasicSettings.tsx
+++ b/apps/web/src/components/views/spaces/SpaceBasicSettings.tsx
@@ -45,6 +45,7 @@ export const SpaceAvatar: React.FC<Pick<IProps, "avatarUrl" | "avatarDisabled" |
         if (avatar) {
             avatarSection = (
                 <React.Fragment>
+                    {/* oxlint-disable-next-line jsx-a11y/control-has-associated-label */}
                     <AccessibleButton
                         className="mx_SpaceBasicSettings_avatar"
                         onClick={() => avatarUploadRef.current?.click()}
diff --git a/apps/web/src/components/views/spaces/SpaceChildrenPicker.tsx b/apps/web/src/components/views/spaces/SpaceChildrenPicker.tsx
index 870108ff35..1173e93b95 100644
--- a/apps/web/src/components/views/spaces/SpaceChildrenPicker.tsx
+++ b/apps/web/src/components/views/spaces/SpaceChildrenPicker.tsx
@@ -8,12 +8,12 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { useEffect, useMemo, useState } from "react";
 import { type Room } from "matrix-js-sdk/src/matrix";
+import { AutoHideScrollbar } from "@element-hq/web-shared-components";
 
 import { _t } from "../../../languageHandler";
 import StyledRadioGroup from "../elements/StyledRadioGroup";
 import QueryMatcher from "../../../autocomplete/QueryMatcher";
 import SearchBox from "../../structures/SearchBox";
-import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import { Entry } from "../dialogs/AddExistingToSpaceDialog";
 import { filterBoolean } from "../../../utils/arrays";
 
@@ -61,7 +61,7 @@ const SpecificChildrenPicker: React.FC<ISpecificChildrenPickerProps> = ({
                 onSearch={setQuery}
                 autoFocus={true}
             />
-            <AutoHideScrollbar>
+            <AutoHideScrollbar className="mx_AutoHideScrollbar">
                 {filteredRooms.map((room) => {
                     return (
                         <Entry
diff --git a/apps/web/src/components/views/spaces/SpacePanel.tsx b/apps/web/src/components/views/spaces/SpacePanel.tsx
index 5e9713f63f..cf21d26404 100644
--- a/apps/web/src/components/views/spaces/SpacePanel.tsx
+++ b/apps/web/src/components/views/spaces/SpacePanel.tsx
@@ -25,11 +25,9 @@ import { DragDropContext, Draggable, Droppable, type DroppableProvidedProps } fr
 import classNames from "classnames";
 import { type Room } from "matrix-js-sdk/src/matrix";
 import {
-    FavouriteSolidIcon,
     HomeSolidIcon,
     RoomIcon,
     VideoCallSolidIcon,
-    UserProfileSolidIcon,
     PlusIcon,
     ChevronRightIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
@@ -40,7 +38,6 @@ import { useContextMenu } from "../../structures/ContextMenu";
 import SpaceCreateMenu from "./SpaceCreateMenu";
 import { SpaceButton, SpaceItem } from "./SpaceTreeLevel";
 import { useEventEmitter, useEventEmitterState } from "../../../hooks/useEventEmitter";
-import SpaceStore from "../../../stores/spaces/SpaceStore";
 import {
     getMetaSpaceName,
     MetaSpace,
@@ -51,10 +48,7 @@ import {
     UPDATE_TOP_LEVEL_SPACES,
 } from "../../../stores/spaces";
 import { RovingTabIndexProvider } from "../../../accessibility/RovingTabIndex";
-import {
-    RoomNotificationStateStore,
-    UPDATE_STATUS_INDICATOR,
-} from "../../../stores/notifications/RoomNotificationStateStore";
+import { UPDATE_STATUS_INDICATOR } from "../../../stores/notifications/RoomNotificationStateStore";
 import type SpaceContextMenu from "../context_menus/SpaceContextMenu";
 import IconizedContextMenu, {
     IconizedContextMenuCheckbox,
@@ -82,20 +76,22 @@ import { KeyboardShortcut } from "../settings/KeyboardShortcut";
 import { ModuleApi } from "../../../modules/Api.ts";
 import { useModuleSpacePanelItems } from "../../../modules/ExtrasApi.ts";
 import { UserMenuViewModel } from "../../../viewmodels/menus/UserMenuViewModel.ts";
-import { useMatrixClientContext } from "../../../contexts/MatrixClientContext.tsx";
 import { SDKContext } from "../../../contexts/SDKContext.ts";
+import { OwnProfileStore } from "../../../stores/OwnProfileStore.ts";
+import { type SDKContextClass } from "../../../contexts/SDKContextClass.ts";
 
 const useSpaces = (): [Room[], MetaSpace[], Room[], SpaceKey] => {
-    const invites = useEventEmitterState<Room[]>(SpaceStore.instance, UPDATE_INVITED_SPACES, () => {
-        return SpaceStore.instance.invitedSpaces;
+    const sdkContext = useContext(SDKContext);
+    const invites = useEventEmitterState<Room[]>(sdkContext.spaceStore, UPDATE_INVITED_SPACES, () => {
+        return sdkContext.spaceStore.invitedSpaces;
     });
     const [metaSpaces, actualSpaces] = useEventEmitterState<[MetaSpace[], Room[]]>(
-        SpaceStore.instance,
+        sdkContext.spaceStore,
         UPDATE_TOP_LEVEL_SPACES,
-        () => [SpaceStore.instance.enabledMetaSpaces, SpaceStore.instance.spacePanelSpaces],
+        () => [sdkContext.spaceStore.enabledMetaSpaces, sdkContext.spaceStore.spacePanelSpaces],
     );
-    const activeSpace = useEventEmitterState<SpaceKey>(SpaceStore.instance, UPDATE_SELECTED_SPACE, () => {
-        return SpaceStore.instance.activeSpace;
+    const activeSpace = useEventEmitterState<SpaceKey>(sdkContext.spaceStore, UPDATE_SELECTED_SPACE, () => {
+        return sdkContext.spaceStore.activeSpace;
     });
     return [invites, metaSpaces, actualSpaces, activeSpace];
 };
@@ -146,22 +142,23 @@ const MetaSpaceButton: React.FC<IMetaSpaceButtonProps> = ({ selected, isPanelCol
     );
 };
 
-const getHomeNotificationState = (): NotificationState => {
-    return SpaceStore.instance.allRoomsInHome
-        ? RoomNotificationStateStore.instance.globalState
-        : SpaceStore.instance.getNotificationState(MetaSpace.Home);
+const getHomeNotificationState = (sdkContext: SDKContextClass): NotificationState => {
+    return sdkContext.spaceStore.allRoomsInHome
+        ? sdkContext.roomNotificationStateStore.globalState
+        : sdkContext.spaceStore.getNotificationState(MetaSpace.Home);
 };
 
 const HomeButton: React.FC<MetaSpaceButtonProps> = ({ selected, isPanelCollapsed }) => {
-    const allRoomsInHome = useEventEmitterState(SpaceStore.instance, UPDATE_HOME_BEHAVIOUR, () => {
-        return SpaceStore.instance.allRoomsInHome;
+    const sdkContext = useContext(SDKContext);
+    const allRoomsInHome = useEventEmitterState(sdkContext.spaceStore, UPDATE_HOME_BEHAVIOUR, () => {
+        return sdkContext.spaceStore.allRoomsInHome;
     });
-    const [notificationState, setNotificationState] = useState(getHomeNotificationState());
+    const [notificationState, setNotificationState] = useState(getHomeNotificationState(sdkContext));
     const updateNotificationState = useCallback(() => {
-        setNotificationState(getHomeNotificationState());
-    }, []);
+        setNotificationState(getHomeNotificationState(sdkContext));
+    }, [sdkContext]);
     useEffect(updateNotificationState, [updateNotificationState, allRoomsInHome]);
-    useEventEmitter(RoomNotificationStateStore.instance, UPDATE_STATUS_INDICATOR, updateNotificationState);
+    useEventEmitter(sdkContext.roomNotificationStateStore, UPDATE_STATUS_INDICATOR, updateNotificationState);
 
     return (
         <MetaSpaceButton
@@ -178,42 +175,15 @@ const HomeButton: React.FC<MetaSpaceButtonProps> = ({ selected, isPanelCollapsed
     );
 };
 
-const FavouritesButton: React.FC<MetaSpaceButtonProps> = ({ selected, isPanelCollapsed }) => {
-    return (
-        <MetaSpaceButton
-            spaceKey={MetaSpace.Favourites}
-            selected={selected}
-            isPanelCollapsed={isPanelCollapsed}
-            label={getMetaSpaceName(MetaSpace.Favourites)}
-            notificationState={SpaceStore.instance.getNotificationState(MetaSpace.Favourites)}
-            size="32px"
-            icon={<FavouriteSolidIcon />}
-        />
-    );
-};
-
-const PeopleButton: React.FC<MetaSpaceButtonProps> = ({ selected, isPanelCollapsed }) => {
-    return (
-        <MetaSpaceButton
-            spaceKey={MetaSpace.People}
-            selected={selected}
-            isPanelCollapsed={isPanelCollapsed}
-            label={getMetaSpaceName(MetaSpace.People)}
-            notificationState={SpaceStore.instance.getNotificationState(MetaSpace.People)}
-            size="32px"
-            icon={<UserProfileSolidIcon />}
-        />
-    );
-};
-
 const OrphansButton: React.FC<MetaSpaceButtonProps> = ({ selected, isPanelCollapsed }) => {
+    const sdkContext = useContext(SDKContext);
     return (
         <MetaSpaceButton
             spaceKey={MetaSpace.Orphans}
             selected={selected}
             isPanelCollapsed={isPanelCollapsed}
             label={getMetaSpaceName(MetaSpace.Orphans)}
-            notificationState={SpaceStore.instance.getNotificationState(MetaSpace.Orphans)}
+            notificationState={sdkContext.spaceStore.getNotificationState(MetaSpace.Orphans)}
             size="32px"
             icon={<RoomIcon />}
         />
@@ -221,13 +191,14 @@ const OrphansButton: React.FC<MetaSpaceButtonProps> = ({ selected, isPanelCollap
 };
 
 const VideoRoomsButton: React.FC<MetaSpaceButtonProps> = ({ selected, isPanelCollapsed }) => {
+    const sdkContext = useContext(SDKContext);
     return (
         <MetaSpaceButton
             spaceKey={MetaSpace.VideoRooms}
             selected={selected}
             isPanelCollapsed={isPanelCollapsed}
             label={getMetaSpaceName(MetaSpace.VideoRooms)}
-            notificationState={SpaceStore.instance.getNotificationState(MetaSpace.VideoRooms)}
+            notificationState={sdkContext.spaceStore.getNotificationState(MetaSpace.VideoRooms)}
             size="32px"
             icon={<VideoCallSolidIcon />}
         />
@@ -286,8 +257,6 @@ const CreateSpaceButton: React.FC<Pick<IInnerSpacePanelProps, "isPanelCollapsed"
 
 const metaSpaceComponentMap: Record<MetaSpace, typeof HomeButton> = {
     [MetaSpace.Home]: HomeButton,
-    [MetaSpace.Favourites]: FavouritesButton,
-    [MetaSpace.People]: PeopleButton,
     [MetaSpace.Orphans]: OrphansButton,
     [MetaSpace.VideoRooms]: VideoRoomsButton,
 };
@@ -303,6 +272,7 @@ interface IInnerSpacePanelProps extends DroppableProvidedProps {
 // Optimisation based on https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/droppable.md#recommended-droppable--performance-optimisation
 const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(
     ({ children, isPanelCollapsed, setPanelCollapsed, isDraggingOver, innerRef, ...props }) => {
+        const sdkContext = useContext(SDKContext);
         const [invites, metaSpaces, actualSpaces, activeSpace] = useSpaces();
         const activeSpaces = activeSpace ? [activeSpace] : [];
 
@@ -327,7 +297,7 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(
                           }
                         : undefined
                 }
-                element="ul"
+                as="ul"
                 role="tree"
                 aria-label={_t("common|spaces")}
             >
@@ -374,7 +344,7 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(
                             size="32px"
                             selected={activeSpace === item.spaceKey}
                             onClick={() => {
-                                SpaceStore.instance.setActiveSpace(item.spaceKey);
+                                sdkContext.spaceStore.setActiveSpace(item.spaceKey);
                                 item.onSelected?.();
                             }}
                         />
@@ -389,7 +359,8 @@ const InnerSpacePanel = React.memo<IInnerSpacePanelProps>(
 );
 
 const SpacePanel: React.FC = () => {
-    const client = useMatrixClientContext();
+    const sdkContext = useContext(SDKContext);
+    const client = sdkContext.client!;
     const [dragging, setDragging] = useState(false);
     const [isPanelCollapsed, setPanelCollapsed] = useState(true);
     const ref = useRef<HTMLDivElement>(null);
@@ -397,7 +368,6 @@ const SpacePanel: React.FC = () => {
         if (ref.current) UIStore.instance.trackElementDimensions("SpacePanel", ref.current);
         return () => UIStore.instance.stopTrackingElementDimensions("SpacePanel");
     }, []);
-    const sdkContext = useContext(SDKContext);
 
     useDispatcher(defaultDispatcher, (payload: ActionPayload) => {
         if (payload.action === Action.ToggleSpacePanel) {
@@ -405,15 +375,13 @@ const SpacePanel: React.FC = () => {
         }
     });
 
-    const newRoomListEnabled = useSettingValue("feature_new_room_list");
-
     const userMenuVm = useCreateAutoDisposedViewModel(
         () =>
             new UserMenuViewModel(
+                { ownProfileStore: OwnProfileStore.instance },
                 defaultDispatcher,
                 client,
                 isPanelCollapsed,
-                sdkContext.oidcClientStore.accountManagementEndpoint,
             ),
     );
 
@@ -437,14 +405,13 @@ const SpacePanel: React.FC = () => {
                     onDragEnd={(result) => {
                         setDragging(false);
                         if (!result.destination) return; // dropped outside the list
-                        SpaceStore.instance.moveRootSpace(result.source.index, result.destination.index);
+                        sdkContext.spaceStore.moveRootSpace(result.source.index, result.destination.index);
                         onDragEndHandler();
                     }}
                 >
                     <nav
                         className={classNames("mx_SpacePanel", {
                             collapsed: isPanelCollapsed,
-                            newUi: newRoomListEnabled,
                         })}
                         onKeyDown={(ev) => {
                             const navAction = getKeyBindingsManager().getNavigationAction(ev);
diff --git a/apps/web/src/components/views/spaces/SpaceTreeLevel.tsx b/apps/web/src/components/views/spaces/SpaceTreeLevel.tsx
index 94ba7cff3e..06dd93aab1 100644
--- a/apps/web/src/components/views/spaces/SpaceTreeLevel.tsx
+++ b/apps/web/src/components/views/spaces/SpaceTreeLevel.tsx
@@ -15,6 +15,7 @@ import React, {
     type InputHTMLAttributes,
     type LegacyRef,
     type RefObject,
+    useContext,
 } from "react";
 import classNames from "classnames";
 import { type Room, RoomEvent } from "matrix-js-sdk/src/matrix";
@@ -27,10 +28,9 @@ import {
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import RoomAvatar from "../avatars/RoomAvatar";
-import SpaceStore from "../../../stores/spaces/SpaceStore";
 import { type SpaceKey } from "../../../stores/spaces";
 import SpaceTreeLevelLayoutStore from "../../../stores/spaces/SpaceTreeLevelLayoutStore";
-import NotificationBadge from "../rooms/NotificationBadge";
+import { NotificationBadge } from "../rooms/NotificationBadge/NotificationBadge";
 import { _t } from "../../../languageHandler";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
@@ -47,6 +47,7 @@ import { type NotificationState } from "../../../stores/notifications/Notificati
 import SpaceContextMenu from "../context_menus/SpaceContextMenu";
 import { useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
+import { SDKContext } from "../../../contexts/SDKContext.ts";
 
 type ButtonProps<T extends keyof HTMLElementTagNameMap> = Omit<
     AccessibleButtonProps<T>,
@@ -83,6 +84,7 @@ export const SpaceButton = <T extends keyof HTMLElementTagNameMap>({
     ContextMenuComponent,
     ...props
 }: ButtonProps<T>): JSX.Element => {
+    const sdkContext = useContext(SDKContext);
     const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu<HTMLDivElement>(innerRef);
     const [onFocus, isActive, ref] = useRovingTabIndex<HTMLDivElement>(handle);
     const tabIndex = isActive ? 0 : -1;
@@ -108,7 +110,7 @@ export const SpaceButton = <T extends keyof HTMLElementTagNameMap>({
         const jumpToNotification = (ev: MouseEvent): void => {
             ev.stopPropagation();
             ev.preventDefault();
-            SpaceStore.instance.setActiveRoomInSpace(spaceKey);
+            sdkContext.spaceStore.setActiveRoomInSpace(spaceKey);
         };
 
         notifBadge = (
@@ -116,7 +118,8 @@ export const SpaceButton = <T extends keyof HTMLElementTagNameMap>({
                 <NotificationBadge
                     onClick={jumpToNotification}
                     notification={notificationState}
-                    aria-label={ariaLabel}
+                    className="mx_SpacePanel_notificationBadge"
+                    ariaLabel={ariaLabel}
                     tabIndex={tabIndex}
                     showUnsentTooltip={true}
                 />
@@ -139,7 +142,7 @@ export const SpaceButton = <T extends keyof HTMLElementTagNameMap>({
         // space is set here because of the assignment condition of onClick
         defaultDispatcher.dispatch({ action: Action.ViewRoom, room_id: space!.roomId });
     const activateSpace = (): void => {
-        if (spaceKey) SpaceStore.instance.setActiveSpace(spaceKey);
+        if (spaceKey) sdkContext.spaceStore.setActiveSpace(spaceKey);
     };
     const onClick = props.onClick ?? (selected && space ? viewSpaceHome : activateSpace);
 
@@ -203,10 +206,13 @@ interface IItemState {
 }
 
 export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
+    public static contextType = SDKContext;
+    declare public context: React.ContextType<typeof SDKContext>;
+
     private buttonRef = createRef<HTMLDivElement>();
 
-    public constructor(props: IItemProps) {
-        super(props);
+    public constructor(props: IItemProps, context: React.ContextType<typeof SDKContext>) {
+        super(props, context);
 
         const collapsed = SpaceTreeLevelLayoutStore.instance.getSpaceCollapsedState(
             props.space.roomId,
@@ -222,12 +228,12 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
     }
 
     public componentDidMount(): void {
-        SpaceStore.instance.on(this.props.space.roomId, this.onSpaceUpdate);
+        this.context.spaceStore.on(this.props.space.roomId, this.onSpaceUpdate);
         this.props.space.on(RoomEvent.Name, this.onRoomNameChange);
     }
 
     public componentWillUnmount(): void {
-        SpaceStore.instance.off(this.props.space.roomId, this.onSpaceUpdate);
+        this.context.spaceStore.off(this.props.space.roomId, this.onSpaceUpdate);
         this.props.space.off(RoomEvent.Name, this.onRoomNameChange);
     }
 
@@ -244,7 +250,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
     };
 
     private get childSpaces(): Room[] {
-        return SpaceStore.instance
+        return this.context.spaceStore
             .getChildSpaces(this.props.space.roomId)
             .filter((s) => !this.props.parents?.has(s.roomId));
     }
@@ -308,7 +314,6 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
     };
 
     public render(): React.ReactNode {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const {
             space,
             activeSpaces,
@@ -334,7 +339,7 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
 
         const notificationState = isInvite
             ? StaticNotificationState.forSymbol("!", NotificationLevel.Highlight)
-            : SpaceStore.instance.getNotificationState(space.roomId);
+            : this.context.spaceStore.getNotificationState(space.roomId);
 
         const hasChildren = this.state.childSpaces?.length;
 
@@ -361,7 +366,6 @@ export class SpaceItem extends React.PureComponent<IItemProps, IItemState> {
             </AccessibleButton>
         ) : null;
 
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { tabIndex, ...restDragHandleProps } = dragHandleProps || {};
         const selected = activeSpaces.includes(space.roomId);
 
diff --git a/apps/web/src/components/views/spaces/threads-activity-centre/ThreadsActivityCentre.tsx b/apps/web/src/components/views/spaces/threads-activity-centre/ThreadsActivityCentre.tsx
index be7fa2bd0e..ec84ccfa47 100644
--- a/apps/web/src/components/views/spaces/threads-activity-centre/ThreadsActivityCentre.tsx
+++ b/apps/web/src/components/views/spaces/threads-activity-centre/ThreadsActivityCentre.tsx
@@ -6,7 +6,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { type JSX, useState } from "react";
+import React, { type JSX, useContext, useState } from "react";
 import { Menu, MenuItem } from "@vector-im/compound-web";
 import { type Room } from "matrix-js-sdk/src/matrix";
 
@@ -16,7 +16,6 @@ import DecoratedRoomAvatar from "../../avatars/DecoratedRoomAvatar";
 import { Action } from "../../../../dispatcher/actions";
 import defaultDispatcher from "../../../../dispatcher/dispatcher";
 import { type ViewRoomPayload } from "../../../../dispatcher/payloads/ViewRoomPayload";
-import RightPanelStore from "../../../../stores/right-panel/RightPanelStore";
 import { RightPanelPhases } from "../../../../stores/right-panel/RightPanelStorePhases";
 import { useUnreadThreadRooms } from "./useUnreadThreadRooms";
 import { StatelessNotificationBadge } from "../../rooms/NotificationBadge/StatelessNotificationBadge";
@@ -25,6 +24,7 @@ import PosthogTrackers from "../../../../PosthogTrackers";
 import { getKeyBindingsManager } from "../../../../KeyBindingsManager";
 import { KeyBindingAction } from "../../../../accessibility/KeyboardShortcuts";
 import { useSettingValue } from "../../../../hooks/useSettings";
+import { SDKContext } from "../../../../contexts/SDKContext.ts";
 
 interface ThreadsActivityCentreProps {
     /**
@@ -117,6 +117,8 @@ interface ThreadsActivityRow {
  * Display a room with unread threads.
  */
 function ThreadsActivityCentreRow({ room, onClick, notificationLevel }: ThreadsActivityRow): JSX.Element {
+    const sdkContext = useContext(SDKContext);
+
     return (
         <MenuItem
             className="mx_ThreadsActivityCentreRow"
@@ -125,7 +127,7 @@ function ThreadsActivityCentreRow({ room, onClick, notificationLevel }: ThreadsA
 
                 // Set the right panel card for that room so the threads panel is open before we dispatch,
                 // so it will open once the room appears.
-                RightPanelStore.instance.setCard({ phase: RightPanelPhases.ThreadPanel }, true, room.roomId);
+                sdkContext.rightPanelStore.setCard({ phase: RightPanelPhases.ThreadPanel }, true, room.roomId);
 
                 // Track the click on the room
                 PosthogTrackers.trackInteraction("WebThreadsActivityCentreRoomItem", event);
@@ -142,7 +144,13 @@ function ThreadsActivityCentreRow({ room, onClick, notificationLevel }: ThreadsA
             label={room.name}
             Icon={<DecoratedRoomAvatar room={room} size="32px" />}
         >
-            <StatelessNotificationBadge level={notificationLevel} count={0} symbol={null} forceDot={true} />
+            <StatelessNotificationBadge
+                level={notificationLevel}
+                count={0}
+                symbol={null}
+                forceDot={true}
+                className="mx_ThreadsActivityCentre_notificationBadge"
+            />
         </MenuItem>
     );
 }
diff --git a/apps/web/src/components/views/terms/InlineTermsAgreement.tsx b/apps/web/src/components/views/terms/InlineTermsAgreement.tsx
index 1269e4049a..7bc3e6a7cf 100644
--- a/apps/web/src/components/views/terms/InlineTermsAgreement.tsx
+++ b/apps/web/src/components/views/terms/InlineTermsAgreement.tsx
@@ -18,7 +18,6 @@ import ExternalLink from "../elements/ExternalLink.tsx";
 interface IProps {
     policiesAndServicePairs: ServicePolicyPair[];
     onFinished: (accepted: string[]) => void;
-    agreedUrls: string[]; // array of URLs the user has accepted
     introElement: React.ReactNode;
 }
 
diff --git a/apps/web/src/components/views/toasts/VerificationRequestToast.tsx b/apps/web/src/components/views/toasts/VerificationRequestToast.tsx
index 74db50d632..0abcf53063 100644
--- a/apps/web/src/components/views/toasts/VerificationRequestToast.tsx
+++ b/apps/web/src/components/views/toasts/VerificationRequestToast.tsx
@@ -16,7 +16,6 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { type Device } from "matrix-js-sdk/src/matrix";
 
 import { _t } from "../../../languageHandler";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
 import { userLabelForEventRoom } from "../../../utils/KeyVerificationStateObserver";
 import dis from "../../../dispatcher/dispatcher";
@@ -25,9 +24,9 @@ import Modal from "../../../Modal";
 import GenericToast from "./GenericToast";
 import { Action } from "../../../dispatcher/actions";
 import VerificationRequestDialog from "../dialogs/VerificationRequestDialog";
-import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
 import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import { getDeviceCryptoInfo } from "../../../utils/crypto/deviceInfo";
+import { SDKContext } from "../../../contexts/SDKContext.ts";
 
 interface IProps {
     toastKey: string;
@@ -42,6 +41,9 @@ interface IState {
 }
 
 export default class VerificationRequestToast extends React.PureComponent<IProps, IState> {
+    public static contextType = SDKContext;
+    declare public context: React.ContextType<typeof SDKContext>;
+
     private intervalHandle?: number;
 
     public constructor(props: IProps) {
@@ -69,7 +71,7 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
 
         const otherDeviceId = request.otherDeviceId;
         if (request.isSelfVerification && !!otherDeviceId) {
-            const cli = MatrixClientPeg.safeGet();
+            const cli = this.context.client!;
             const device = await cli.getDevice(otherDeviceId);
             this.setState({
                 ip: device.last_seen_ip,
@@ -104,7 +106,6 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
         ToastStore.sharedInstance().dismissToast(this.props.toastKey);
         const { request } = this.props;
         // no room id for to_device requests
-        const cli = MatrixClientPeg.safeGet();
         try {
             if (request.roomId) {
                 dis.dispatch<ViewRoomPayload>({
@@ -113,8 +114,8 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
                     should_peek: false,
                     metricsTrigger: "VerificationRequest",
                 });
-                const member = cli.getUser(request.otherUserId) ?? undefined;
-                RightPanelStore.instance.setCards(
+                const member = this.context.client?.getUser(request.otherUserId) ?? undefined;
+                this.context.rightPanelStore.setCards(
                     [
                         { phase: RightPanelPhases.RoomSummary },
                         { phase: RightPanelPhases.MemberInfo, state: { member } },
@@ -154,7 +155,7 @@ export default class VerificationRequestToast extends React.PureComponent<IProps
                 });
             }
         } else {
-            const client = MatrixClientPeg.safeGet();
+            const client = this.context.client!;
             const userId = request.otherUserId;
             const roomId = request.roomId;
             description = roomId ? userLabelForEventRoom(client, userId, roomId) : userId;
diff --git a/apps/web/src/components/views/typography/Heading.tsx b/apps/web/src/components/views/typography/Heading.ts
similarity index 100%
rename from apps/web/src/components/views/typography/Heading.tsx
rename to apps/web/src/components/views/typography/Heading.ts
diff --git a/apps/web/src/components/views/verification/VerificationShowSas.tsx b/apps/web/src/components/views/verification/VerificationShowSas.tsx
index 84490e556b..cc890f72b0 100644
--- a/apps/web/src/components/views/verification/VerificationShowSas.tsx
+++ b/apps/web/src/components/views/verification/VerificationShowSas.tsx
@@ -16,7 +16,6 @@ import { PendingActionSpinner } from "../right_panel/EncryptionInfo";
 import AccessibleButton from "../elements/AccessibleButton";
 
 interface IProps {
-    pending?: boolean;
     displayName?: string; // required if pending is true
 
     /** Details of the other device involved in the verification, if known */
@@ -26,7 +25,6 @@ interface IProps {
     onCancel: () => void;
     sas: GeneratedSas;
     isSelf?: boolean;
-    inDialog?: boolean; // whether this component is being shown in a dialog and to use DialogButtons
 }
 
 interface IState {
@@ -67,8 +65,13 @@ export default class VerificationShowSas extends React.Component<IProps, IState>
                 ? _t("encryption|verification|confirm_the_emojis")
                 : _t("encryption|verification|sas_emoji_caption_user");
         } else if (this.props.sas.decimal) {
-            const numberBlocks = this.props.sas.decimal.map((num, i) => <span key={i}>{num}</span>);
-            sasDisplay = <div className="mx_VerificationShowSas_decimalSas">{numberBlocks}</div>;
+            sasDisplay = (
+                <div className="mx_VerificationShowSas_decimalSas">
+                    <span>{this.props.sas.decimal[0]}</span>
+                    <span>{this.props.sas.decimal[1]}</span>
+                    <span>{this.props.sas.decimal[2]}</span>
+                </div>
+            );
             sasCaption = this.props.isSelf
                 ? _t("encryption|verification|sas_caption_self")
                 : _t("encryption|verification|sas_caption_user");
diff --git a/apps/web/src/components/views/voip/AudioFeed.tsx b/apps/web/src/components/views/voip/AudioFeed.tsx
index 834318f41a..f8d28c5449 100644
--- a/apps/web/src/components/views/voip/AudioFeed.tsx
+++ b/apps/web/src/components/views/voip/AudioFeed.tsx
@@ -80,7 +80,7 @@ export default class AudioFeed extends React.Component<IProps, IState> {
             // should serialise the ones that need to be serialised but then be able to interrupt
             // them with another load() which will cancel the pending one, but since we don't call
             // load() explicitly, it shouldn't be a problem. - Dave
-            await element.load();
+            element.load();
         } catch (e) {
             logger.info(
                 `Failed to play media element with feed for userId ` +
diff --git a/apps/web/src/components/views/voip/AudioFeedArrayForLegacyCall.tsx b/apps/web/src/components/views/voip/AudioFeedArrayForLegacyCall.tsx
index 062ea8693e..c11cd29e7d 100644
--- a/apps/web/src/components/views/voip/AudioFeedArrayForLegacyCall.tsx
+++ b/apps/web/src/components/views/voip/AudioFeedArrayForLegacyCall.tsx
@@ -44,8 +44,8 @@ export default class AudioFeedArrayForLegacyCall extends React.Component<IProps,
     };
 
     public render(): JSX.Element[] {
-        return this.state.feeds.map((feed, i) => {
-            return <AudioFeed feed={feed} key={i} />;
+        return this.state.feeds.map((feed) => {
+            return <AudioFeed feed={feed} key={feed.deviceId + feed.userId} />;
         });
     }
 }
diff --git a/apps/web/src/components/views/voip/CallView.tsx b/apps/web/src/components/views/voip/CallView.tsx
index 8067cc065c..4863e61b71 100644
--- a/apps/web/src/components/views/voip/CallView.tsx
+++ b/apps/web/src/components/views/voip/CallView.tsx
@@ -10,12 +10,11 @@ import React, { type FC, useContext, useEffect, type AriaRole, useCallback } fro
 
 import type { Room } from "matrix-js-sdk/src/matrix";
 import { type Call, CallEvent } from "../../../models/Call";
-import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import AppTile from "../elements/AppTile";
 import { CallStore } from "../../../stores/CallStore";
-import { SdkContextClass } from "../../../contexts/SDKContext";
 import { useTypedEventEmitter } from "../../../hooks/useEventEmitter";
 import { useCall } from "../../../hooks/useCall";
+import { SDKContext } from "../../../contexts/SDKContext.ts";
 
 interface JoinCallViewProps {
     room: Room;
@@ -26,7 +25,7 @@ interface JoinCallViewProps {
 }
 
 const JoinCallView: FC<JoinCallViewProps> = ({ room, resizing, call, role, onClose }) => {
-    const cli = useContext(MatrixClientContext);
+    const sdkContext = useContext(SDKContext);
     useTypedEventEmitter(call, CallEvent.Close, onClose);
 
     useEffect(() => {
@@ -38,17 +37,17 @@ const JoinCallView: FC<JoinCallViewProps> = ({ room, resizing, call, role, onClo
         // The stickyPromise has to resolve before the widget actually becomes sticky.
         // We only let the widget become sticky after disconnecting all other active calls.
         const calls = [...CallStore.instance.connectedCalls].filter(
-            (call) => SdkContextClass.instance.roomViewStore.getRoomId() !== call.roomId,
+            (call) => sdkContext.roomViewStore.getRoomId() !== call.roomId,
         );
         await Promise.all(calls.map(async (call) => await call.disconnect()));
-    }, []);
+    }, [sdkContext.roomViewStore]);
 
     return (
         <div className="mx_CallView" role={role}>
             <AppTile
                 app={call.widget}
                 room={room}
-                userId={cli.credentials.userId!}
+                userId={sdkContext.client?.credentials.userId ?? undefined}
                 creatorUserId={call.widget.creatorUserId}
                 waitForIframeLoad={call.widget.waitForIframeLoad}
                 showMenubar={false}
diff --git a/apps/web/src/components/views/voip/DialPadModal.tsx b/apps/web/src/components/views/voip/DialPadModal.tsx
index dbc707dac9..9b7cb1949f 100644
--- a/apps/web/src/components/views/voip/DialPadModal.tsx
+++ b/apps/web/src/components/views/voip/DialPadModal.tsx
@@ -13,7 +13,7 @@ import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton
 import Field from "../elements/Field";
 import DialPad from "./DialPad";
 import DialPadBackspaceButton from "../elements/DialPadBackspaceButton";
-import LegacyCallHandler from "../../../LegacyCallHandler";
+import { SDKContextClass } from "../../../contexts/SDKContextClass.ts";
 
 interface IProps {
     onFinished: (dialled: boolean) => void;
@@ -70,7 +70,7 @@ export default class DialpadModal extends React.PureComponent<IProps, IState> {
     };
 
     public onDialPress = async (): Promise<void> => {
-        LegacyCallHandler.instance.dialNumber(this.state.value);
+        SDKContextClass.instance.legacyCallHandler.dialNumber(this.state.value);
         this.props.onFinished(true);
     };
 
diff --git a/apps/web/src/components/views/voip/LegacyCallView.tsx b/apps/web/src/components/views/voip/LegacyCallView.tsx
index e6da10e520..0dc6955ffb 100644
--- a/apps/web/src/components/views/voip/LegacyCallView.tsx
+++ b/apps/web/src/components/views/voip/LegacyCallView.tsx
@@ -15,8 +15,6 @@ import { type CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
 import { SDPStreamMetadataPurpose } from "matrix-js-sdk/src/webrtc/callEventTypes";
 
 import dis from "../../../dispatcher/dispatcher";
-import LegacyCallHandler from "../../../LegacyCallHandler";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { _t, _td } from "../../../languageHandler";
 import VideoFeed from "./VideoFeed";
 import RoomAvatar from "../avatars/RoomAvatar";
@@ -28,6 +26,7 @@ import LegacyCallViewButtons from "./LegacyCallView/LegacyCallViewButtons";
 import { type ActionPayload } from "../../../dispatcher/payloads";
 import { getKeyBindingsManager } from "../../../KeyBindingsManager";
 import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
+import { SDKContext } from "../../../contexts/SDKContext.ts";
 
 interface IProps {
     // The call for us to display
@@ -47,7 +46,7 @@ interface IProps {
     pipMode?: boolean;
 
     // Used for dragging the PiP LegacyCallView
-    onMouseDownOnHeader?: (event: React.MouseEvent<Element, MouseEvent>) => void;
+    onMouseDownOnHeader?: (event: React.MouseEvent) => void;
 
     showApps?: boolean;
 
@@ -81,6 +80,9 @@ function exitFullscreen(): void {
 }
 
 export default class LegacyCallView extends React.Component<IProps, IState> {
+    public static contextType = SDKContext;
+    declare public context: React.ContextType<typeof SDKContext>;
+
     private dispatcherRef?: string;
     private contentWrapperRef = createRef<HTMLDivElement>();
     private buttonsRef = createRef<LegacyCallViewButtons>();
@@ -308,18 +310,18 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
     };
 
     private onCallResumeClick = (): void => {
-        const userFacingRoomId = LegacyCallHandler.instance.roomIdForCall(this.props.call);
-        if (userFacingRoomId) LegacyCallHandler.instance.setActiveCallRoomId(userFacingRoomId);
+        const userFacingRoomId = this.context.legacyCallHandler.roomIdForCall(this.props.call);
+        if (userFacingRoomId) this.context.legacyCallHandler.setActiveCallRoomId(userFacingRoomId);
     };
 
     private onTransferClick = (): void => {
-        const transfereeCall = LegacyCallHandler.instance.getTransfereeForCallId(this.props.call.callId);
+        const transfereeCall = this.context.legacyCallHandler.getTransfereeForCallId(this.props.call.callId);
         if (transfereeCall) this.props.call.transferToCall(transfereeCall);
     };
 
     private onHangupClick = (): void => {
-        const roomId = LegacyCallHandler.instance.roomIdForCall(this.props.call);
-        if (roomId) LegacyCallHandler.instance.hangupOrReject(roomId);
+        const roomId = this.context.legacyCallHandler.roomIdForCall(this.props.call);
+        if (roomId) this.context.legacyCallHandler.hangupOrReject(roomId);
     };
 
     private onToggleSidebar = (): void => {
@@ -400,10 +402,10 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
         const { pipMode, call, onResize, sidebarShown } = this.props;
         const { isLocalOnHold, isRemoteOnHold, primaryFeed, secondaryFeed, sidebarFeeds } = this.state;
 
-        const callRoomId = LegacyCallHandler.instance.roomIdForCall(call);
-        const callRoom = (callRoomId ? MatrixClientPeg.safeGet().getRoom(callRoomId) : undefined) ?? undefined;
+        const callRoomId = this.context.legacyCallHandler.roomIdForCall(call);
+        const callRoom = (callRoomId ? this.context.client?.getRoom(callRoomId) : undefined) ?? undefined;
         const avatarSize = pipMode ? "76px" : "160px";
-        const transfereeCall = LegacyCallHandler.instance.getTransfereeForCallId(call.callId);
+        const transfereeCall = this.context.legacyCallHandler.getTransfereeForCallId(call.callId);
         const isOnHold = isLocalOnHold || isRemoteOnHold;
 
         let secondaryFeedElement: React.ReactNode;
@@ -421,12 +423,11 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
 
             let holdTransferContent: React.ReactNode;
             if (transfereeCall) {
-                const cli = MatrixClientPeg.safeGet();
-                const callRoomId = LegacyCallHandler.instance.roomIdForCall(call);
-                const transferTargetRoom = callRoomId ? cli.getRoom(callRoomId) : null;
+                const callRoomId = this.context.legacyCallHandler.roomIdForCall(call);
+                const transferTargetRoom = callRoomId ? this.context.client?.getRoom(callRoomId) : null;
                 const transferTargetName = transferTargetRoom ? transferTargetRoom.name : _t("voip|unknown_person");
-                const transfereeCallRoomId = LegacyCallHandler.instance.roomIdForCall(transfereeCall);
-                const transfereeRoom = transfereeCallRoomId ? cli.getRoom(transfereeCallRoomId) : null;
+                const transfereeCallRoomId = this.context.legacyCallHandler.roomIdForCall(transfereeCall);
+                const transfereeRoom = transfereeCallRoomId ? this.context.client?.getRoom(transfereeCallRoomId) : null;
                 const transfereeName = transfereeRoom ? transfereeRoom.name : _t("voip|unknown_person");
 
                 holdTransferContent = (
@@ -451,7 +452,7 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
                 let onHoldText: React.ReactNode;
                 if (isRemoteOnHold) {
                     onHoldText = _t(
-                        LegacyCallHandler.instance.hasAnyUnheldCall()
+                        this.context.legacyCallHandler.hasAnyUnheldCall()
                             ? _td("voip|call_held_switch")
                             : _td("voip|call_held_resume"),
                         {},
@@ -500,38 +501,20 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
             // We've already checked that we have feeds so we cast away the optional when passing the feed
             return (
                 <div className="mx_LegacyCallView_content" onMouseMove={this.onMouseMove}>
-                    <VideoFeed
-                        feed={primaryFeed as CallFeed}
-                        call={call}
-                        pipMode={pipMode}
-                        onResize={onResize}
-                        primary={true}
-                    />
+                    <VideoFeed feed={primaryFeed!} call={call} pipMode={pipMode} onResize={onResize} primary={true} />
                 </div>
             );
         } else if (secondaryFeed) {
             return (
                 <div className="mx_LegacyCallView_content" onMouseMove={this.onMouseMove}>
-                    <VideoFeed
-                        feed={primaryFeed as CallFeed}
-                        call={call}
-                        pipMode={pipMode}
-                        onResize={onResize}
-                        primary={true}
-                    />
+                    <VideoFeed feed={primaryFeed!} call={call} pipMode={pipMode} onResize={onResize} primary={true} />
                     {secondaryFeedElement}
                 </div>
             );
         } else {
             return (
                 <div className="mx_LegacyCallView_content" onMouseMove={this.onMouseMove}>
-                    <VideoFeed
-                        feed={primaryFeed as CallFeed}
-                        call={call}
-                        pipMode={pipMode}
-                        onResize={onResize}
-                        primary={true}
-                    />
+                    <VideoFeed feed={primaryFeed!} call={call} pipMode={pipMode} onResize={onResize} primary={true} />
                     {sidebarShown && (
                         <LegacyCallViewSidebar feeds={sidebarFeeds} call={call} pipMode={Boolean(pipMode)} />
                     )}
@@ -544,13 +527,12 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
         const { call, secondaryCall, pipMode, showApps, onMouseDownOnHeader, sidebarShown } = this.props;
         const { sidebarFeeds } = this.state;
 
-        const client = MatrixClientPeg.safeGet();
-        const callRoomId = LegacyCallHandler.instance.roomIdForCall(call);
-        const secondaryCallRoomId = LegacyCallHandler.instance.roomIdForCall(secondaryCall);
-        const callRoom = callRoomId ? client.getRoom(callRoomId) : null;
+        const callRoomId = this.context.legacyCallHandler.roomIdForCall(call);
+        const secondaryCallRoomId = this.context.legacyCallHandler.roomIdForCall(secondaryCall);
+        const callRoom = callRoomId ? this.context.client?.getRoom(callRoomId) : null;
         if (!callRoom) return null;
 
-        const secCallRoom = secondaryCallRoomId ? client.getRoom(secondaryCallRoomId) : null;
+        const secCallRoom = secondaryCallRoomId ? this.context.client?.getRoom(secondaryCallRoomId) : null;
 
         const callViewClasses = classNames({
             mx_LegacyCallView: true,
@@ -565,7 +547,7 @@ export default class LegacyCallView extends React.Component<IProps, IState> {
                 <LegacyCallViewHeader
                     onPipMouseDown={onMouseDownOnHeader}
                     pipMode={pipMode}
-                    callRooms={[callRoom, secCallRoom]}
+                    callRooms={[callRoom, secCallRoom ?? null]}
                     onMaximize={this.onMaximizeClick}
                 />
                 <div className="mx_LegacyCallView_content_wrapper" ref={this.contentWrapperRef}>
diff --git a/apps/web/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx b/apps/web/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx
index 6659a9bee8..0b24909256 100644
--- a/apps/web/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx
+++ b/apps/web/src/components/views/voip/LegacyCallView/LegacyCallViewHeader.tsx
@@ -72,7 +72,7 @@ const SecondaryCallInfo: React.FC<ISecondaryCallInfoProps> = ({ callRoom }) => {
 interface LegacyCallViewHeaderProps {
     pipMode?: boolean;
     callRooms: [Room, Room | null];
-    onPipMouseDown?: (event: React.MouseEvent<Element, MouseEvent>) => void;
+    onPipMouseDown?: (event: React.MouseEvent) => void;
     onExpand?: () => void;
     onPin?: () => void;
     onMaximize?: () => void;
diff --git a/apps/web/src/components/views/voip/LegacyCallViewForRoom.tsx b/apps/web/src/components/views/voip/LegacyCallViewForRoom.tsx
index d996fe98d6..31d2671e04 100644
--- a/apps/web/src/components/views/voip/LegacyCallViewForRoom.tsx
+++ b/apps/web/src/components/views/voip/LegacyCallViewForRoom.tsx
@@ -10,7 +10,7 @@ import { CallState, type MatrixCall } from "matrix-js-sdk/src/webrtc/call";
 import React from "react";
 import { Resizable } from "re-resizable";
 
-import LegacyCallHandler, { LegacyCallHandlerEvent } from "../../../LegacyCallHandler";
+import { LegacyCallHandlerEvent } from "../../../LegacyCallHandler";
 import LegacyCallView from "./LegacyCallView";
 import { SDKContext } from "../../../contexts/SDKContext";
 
@@ -39,20 +39,20 @@ export default class LegacyCallViewForRoom extends React.Component<IProps, IStat
         const call = this.getCall();
         this.state = {
             call,
-            sidebarShown: !!call && LegacyCallHandler.instance.isCallSidebarShown(call.callId),
+            sidebarShown: !!call && context.legacyCallHandler.isCallSidebarShown(call.callId),
         };
     }
 
     public componentDidMount(): void {
-        LegacyCallHandler.instance.addListener(LegacyCallHandlerEvent.CallState, this.updateCall);
-        LegacyCallHandler.instance.addListener(LegacyCallHandlerEvent.CallChangeRoom, this.updateCall);
-        LegacyCallHandler.instance.addListener(LegacyCallHandlerEvent.ShownSidebarsChanged, this.updateCall);
+        this.context.legacyCallHandler.addListener(LegacyCallHandlerEvent.CallState, this.updateCall);
+        this.context.legacyCallHandler.addListener(LegacyCallHandlerEvent.CallChangeRoom, this.updateCall);
+        this.context.legacyCallHandler.addListener(LegacyCallHandlerEvent.ShownSidebarsChanged, this.updateCall);
     }
 
     public componentWillUnmount(): void {
-        LegacyCallHandler.instance.removeListener(LegacyCallHandlerEvent.CallState, this.updateCall);
-        LegacyCallHandler.instance.removeListener(LegacyCallHandlerEvent.CallChangeRoom, this.updateCall);
-        LegacyCallHandler.instance.removeListener(LegacyCallHandlerEvent.ShownSidebarsChanged, this.updateCall);
+        this.context.legacyCallHandler.removeListener(LegacyCallHandlerEvent.CallState, this.updateCall);
+        this.context.legacyCallHandler.removeListener(LegacyCallHandlerEvent.CallChangeRoom, this.updateCall);
+        this.context.legacyCallHandler.removeListener(LegacyCallHandlerEvent.ShownSidebarsChanged, this.updateCall);
     }
 
     private updateCall = (): void => {
@@ -60,14 +60,14 @@ export default class LegacyCallViewForRoom extends React.Component<IProps, IStat
         if (newCall !== this.state.call) {
             this.setState({ call: newCall });
         }
-        const newSidebarShown = !!newCall && LegacyCallHandler.instance.isCallSidebarShown(newCall.callId);
+        const newSidebarShown = !!newCall && this.context.legacyCallHandler.isCallSidebarShown(newCall.callId);
         if (newSidebarShown !== this.state.sidebarShown) {
             this.setState({ sidebarShown: newSidebarShown });
         }
     };
 
     private getCall(): MatrixCall | null {
-        const call = LegacyCallHandler.instance.getCallForRoom(this.props.roomId);
+        const call = this.context.legacyCallHandler.getCallForRoom(this.props.roomId);
 
         if (call && [CallState.Ended, CallState.Ringing].includes(call.state)) return null;
         return call;
@@ -87,7 +87,7 @@ export default class LegacyCallViewForRoom extends React.Component<IProps, IStat
 
     private setSidebarShown = (sidebarShown: boolean): void => {
         if (!this.state.call) return;
-        LegacyCallHandler.instance.setCallSidebarShown(this.state.call.callId, sidebarShown);
+        this.context.legacyCallHandler.setCallSidebarShown(this.state.call.callId, sidebarShown);
     };
 
     public render(): React.ReactNode {
diff --git a/apps/web/src/components/views/voip/VideoFeed.tsx b/apps/web/src/components/views/voip/VideoFeed.tsx
index 87bee5c4ad..9023491901 100644
--- a/apps/web/src/components/views/voip/VideoFeed.tsx
+++ b/apps/web/src/components/views/voip/VideoFeed.tsx
@@ -16,9 +16,8 @@ import { SDPStreamMetadataPurpose } from "matrix-js-sdk/src/webrtc/callEventType
 import { MicOffSolidIcon, MicOnSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import SettingsStore from "../../../settings/SettingsStore";
-import LegacyCallHandler from "../../../LegacyCallHandler";
-import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import RoomAvatar from "../avatars/RoomAvatar";
+import { SDKContext } from "../../../contexts/SDKContext.ts";
 
 interface IProps {
     call: MatrixCall;
@@ -45,6 +44,9 @@ interface IState {
 }
 
 export default class VideoFeed extends React.PureComponent<IProps, IState> {
+    public static contextType = SDKContext;
+    declare public context: React.ContextType<typeof SDKContext>;
+
     private element?: HTMLVideoElement;
 
     public constructor(props: IProps) {
@@ -192,8 +194,8 @@ export default class VideoFeed extends React.PureComponent<IProps, IState> {
 
         let content;
         if (this.state.videoMuted) {
-            const callRoomId = LegacyCallHandler.instance.roomIdForCall(this.props.call);
-            const callRoom = (callRoomId ? MatrixClientPeg.safeGet().getRoom(callRoomId) : undefined) ?? undefined;
+            const callRoomId = this.context.legacyCallHandler.roomIdForCall(this.props.call);
+            const callRoom = (callRoomId ? this.context.client?.getRoom(callRoomId) : undefined) ?? undefined;
 
             let avatarSize;
             if (pipMode && primary) avatarSize = "76px";
diff --git a/apps/web/src/contexts/CurrentRightPanelPhaseContext.tsx b/apps/web/src/contexts/CurrentRightPanelPhaseContext.tsx
index 8bc3080fc3..e05bc53bd8 100644
--- a/apps/web/src/contexts/CurrentRightPanelPhaseContext.tsx
+++ b/apps/web/src/contexts/CurrentRightPanelPhaseContext.tsx
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { createContext } from "react";
+import React, { createContext, useMemo } from "react";
 
 import { useCurrentPhase } from "../hooks/right-panel/useCurrentPhase";
 import { type RightPanelPhases } from "../stores/right-panel/RightPanelStorePhases";
@@ -26,9 +26,6 @@ export const CurrentRightPanelPhaseContextProvider: React.FC<React.PropsWithChil
     children,
 }) => {
     const { currentPhase, isOpen } = useCurrentPhase(roomId);
-    return (
-        <CurrentRightPanelPhaseContext.Provider value={{ currentPhase, isPanelOpen: isOpen }}>
-            {children}
-        </CurrentRightPanelPhaseContext.Provider>
-    );
+    const context = useMemo(() => ({ currentPhase, isPanelOpen: isOpen }), [currentPhase, isOpen]);
+    return <CurrentRightPanelPhaseContext.Provider value={context}>{children}</CurrentRightPanelPhaseContext.Provider>;
 };
diff --git a/apps/web/src/contexts/SDKContext.ts b/apps/web/src/contexts/SDKContext.ts
index 39230a31e3..a424035ecc 100644
--- a/apps/web/src/contexts/SDKContext.ts
+++ b/apps/web/src/contexts/SDKContext.ts
@@ -7,194 +7,14 @@ 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 MatrixClient } from "matrix-js-sdk/src/matrix";
 import { createContext } from "react";
 
-import defaultDispatcher from "../dispatcher/dispatcher";
-import LegacyCallHandler from "../LegacyCallHandler";
-import { PosthogAnalytics } from "../PosthogAnalytics";
-import { SlidingSyncManager } from "../SlidingSyncManager";
-import { MemberListStore } from "../stores/MemberListStore";
-import { RoomNotificationStateStore } from "../stores/notifications/RoomNotificationStateStore";
-import RightPanelStore from "../stores/right-panel/RightPanelStore";
-import { RoomViewStore } from "../stores/RoomViewStore";
-import SpaceStore, { type SpaceStoreClass } from "../stores/spaces/SpaceStore";
-import TypingStore from "../stores/TypingStore";
-import { UserProfilesStore } from "../stores/UserProfilesStore";
-import { WidgetLayoutStore } from "../stores/widgets/WidgetLayoutStore";
-import { WidgetPermissionStore } from "../stores/widgets/WidgetPermissionStore";
-import { OidcClientStore } from "../stores/oidc/OidcClientStore";
-import WidgetStore from "../stores/WidgetStore";
-import ResizeNotifier from "../utils/ResizeNotifier";
-import { MultiRoomViewStore } from "../stores/MultiRoomViewStore";
+import { type SDKContextClass } from "./SDKContextClass";
 
 // This context is available to components under MatrixChat,
-// the context must not be used by components outside a SdkContextClass tree.
+// the context must not be used by components outside a SDKContextClass tree.
 // This assertion allows us to make the type not nullable.
-export const SDKContext = createContext<SdkContextClass>(null as any);
+// This file is deliberately kept separate from the actual instantiation of the
+// stores to keep just a type import to the SDKContextClass itself.
+export const SDKContext = createContext<SDKContextClass>(null as any);
 SDKContext.displayName = "SDKContext";
-
-/**
- * A class which lazily initialises stores as and when they are requested, ensuring they remain
- * as singletons scoped to this object.
- */
-export class SdkContextClass {
-    /**
-     * The global SdkContextClass instance. This is a temporary measure whilst so many stores remain global
-     * as well. Over time, these stores should accept a `SdkContextClass` instance in their constructor.
-     * When all stores do this, this static variable can be deleted.
-     */
-    public static readonly instance = new SdkContextClass();
-
-    // Optional as we don't have a client on initial load if unregistered. This should be set
-    // when the MatrixClient is first acquired in the dispatcher event Action.OnLoggedIn.
-    // It is only safe to set this once, as updating this value will NOT notify components using
-    // this Context.
-    public client?: MatrixClient;
-
-    // All protected fields to make it easier to derive test stores
-    protected _WidgetPermissionStore?: WidgetPermissionStore;
-    protected _MemberListStore?: MemberListStore;
-    protected _RightPanelStore?: RightPanelStore;
-    protected _RoomNotificationStateStore?: RoomNotificationStateStore;
-    protected _RoomViewStore?: RoomViewStore;
-    protected _WidgetLayoutStore?: WidgetLayoutStore;
-    protected _WidgetStore?: WidgetStore;
-    protected _PosthogAnalytics?: PosthogAnalytics;
-    protected _SlidingSyncManager?: SlidingSyncManager;
-    protected _SpaceStore?: SpaceStoreClass;
-    protected _LegacyCallHandler?: LegacyCallHandler;
-    protected _TypingStore?: TypingStore;
-    protected _UserProfilesStore?: UserProfilesStore;
-    protected _OidcClientStore?: OidcClientStore;
-    protected _ResizeNotifier?: ResizeNotifier;
-    protected _MultiRoomViewStore?: MultiRoomViewStore;
-
-    /**
-     * Automatically construct stores which need to be created eagerly so they can register with
-     * the dispatcher.
-     */
-    public constructEagerStores(): void {
-        this._RoomViewStore = this.roomViewStore;
-    }
-
-    public get legacyCallHandler(): LegacyCallHandler {
-        if (!this._LegacyCallHandler) {
-            this._LegacyCallHandler = LegacyCallHandler.instance;
-        }
-        return this._LegacyCallHandler;
-    }
-    public get rightPanelStore(): RightPanelStore {
-        if (!this._RightPanelStore) {
-            this._RightPanelStore = RightPanelStore.instance;
-        }
-        return this._RightPanelStore;
-    }
-    public get roomNotificationStateStore(): RoomNotificationStateStore {
-        if (!this._RoomNotificationStateStore) {
-            this._RoomNotificationStateStore = RoomNotificationStateStore.instance;
-        }
-        return this._RoomNotificationStateStore;
-    }
-    public get roomViewStore(): RoomViewStore {
-        if (!this._RoomViewStore) {
-            this._RoomViewStore = new RoomViewStore(defaultDispatcher, this);
-        }
-        return this._RoomViewStore;
-    }
-    public get widgetLayoutStore(): WidgetLayoutStore {
-        if (!this._WidgetLayoutStore) {
-            this._WidgetLayoutStore = WidgetLayoutStore.instance;
-        }
-        return this._WidgetLayoutStore;
-    }
-    public get widgetPermissionStore(): WidgetPermissionStore {
-        if (!this._WidgetPermissionStore) {
-            this._WidgetPermissionStore = new WidgetPermissionStore(this);
-        }
-        return this._WidgetPermissionStore;
-    }
-    public get widgetStore(): WidgetStore {
-        if (!this._WidgetStore) {
-            this._WidgetStore = WidgetStore.instance;
-        }
-        return this._WidgetStore;
-    }
-    public get posthogAnalytics(): PosthogAnalytics {
-        if (!this._PosthogAnalytics) {
-            this._PosthogAnalytics = PosthogAnalytics.instance;
-        }
-        return this._PosthogAnalytics;
-    }
-    public get memberListStore(): MemberListStore {
-        if (!this._MemberListStore) {
-            this._MemberListStore = new MemberListStore(this);
-        }
-        return this._MemberListStore;
-    }
-    public get slidingSyncManager(): SlidingSyncManager {
-        if (!this._SlidingSyncManager) {
-            this._SlidingSyncManager = SlidingSyncManager.instance;
-        }
-        return this._SlidingSyncManager;
-    }
-    public get spaceStore(): SpaceStoreClass {
-        if (!this._SpaceStore) {
-            this._SpaceStore = SpaceStore.instance;
-        }
-        return this._SpaceStore;
-    }
-    public get typingStore(): TypingStore {
-        if (!this._TypingStore) {
-            this._TypingStore = new TypingStore(this);
-            window.mxTypingStore = this._TypingStore;
-        }
-        return this._TypingStore;
-    }
-
-    public get userProfilesStore(): UserProfilesStore {
-        if (!this.client) {
-            throw new Error("Unable to create UserProfilesStore without a client");
-        }
-
-        if (!this._UserProfilesStore) {
-            this._UserProfilesStore = new UserProfilesStore(this.client);
-        }
-
-        return this._UserProfilesStore;
-    }
-
-    public get oidcClientStore(): OidcClientStore {
-        if (!this.client) {
-            throw new Error("Unable to create OidcClientStore without a client");
-        }
-
-        if (!this._OidcClientStore) {
-            this._OidcClientStore = new OidcClientStore(this.client);
-        }
-
-        return this._OidcClientStore;
-    }
-
-    // This is getting increasingly tenuous to have here but we still have class components so it's
-    // awkward to consume multiple contexts in them. This should be replaced with ResizeObservers
-    // anyway really.
-    public get resizeNotifier(): ResizeNotifier {
-        if (!this._ResizeNotifier) {
-            this._ResizeNotifier = new ResizeNotifier();
-        }
-        return this._ResizeNotifier;
-    }
-
-    public get multiRoomViewStore(): MultiRoomViewStore {
-        if (!this._MultiRoomViewStore) {
-            this._MultiRoomViewStore = new MultiRoomViewStore(defaultDispatcher, this);
-        }
-        return this._MultiRoomViewStore;
-    }
-
-    public onLoggedOut(): void {
-        this._UserProfilesStore = undefined;
-        this._OidcClientStore = undefined;
-    }
-}
diff --git a/apps/web/test/unit-tests/contexts/SdkContext-test.ts b/apps/web/src/contexts/SDKContextClass.test.ts
similarity index 56%
rename from apps/web/test/unit-tests/contexts/SdkContext-test.ts
rename to apps/web/src/contexts/SDKContextClass.test.ts
index edb7f92592..60cdb10295 100644
--- a/apps/web/test/unit-tests/contexts/SdkContext-test.ts
+++ b/apps/web/src/contexts/SDKContextClass.test.ts
@@ -6,15 +6,17 @@ 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.
 */
 
+// @vitest-environment happy-dom
+
+import { describe, it, expect, beforeAll, beforeEach } from "vitest";
 import { type MatrixClient } from "matrix-js-sdk/src/matrix";
+import { createTestClient, TestSDKContext } from "test-utils";
 
-import { SdkContextClass } from "../../../src/contexts/SDKContext";
-import { OidcClientStore } from "../../../src/stores/oidc/OidcClientStore";
-import { UserProfilesStore } from "../../../src/stores/UserProfilesStore";
-import { createTestClient } from "../../test-utils";
+import { SDKContextClass } from "./SDKContextClass";
+import { UserProfilesStore } from "../stores/UserProfilesStore";
 
-describe("SdkContextClass", () => {
-    let sdkContext = SdkContextClass.instance;
+describe("SDKContextClass", () => {
+    let sdkContext: TestSDKContext;
     let client: MatrixClient;
 
     beforeAll(() => {
@@ -22,25 +24,21 @@ describe("SdkContextClass", () => {
     });
 
     beforeEach(() => {
-        sdkContext = new SdkContextClass();
+        sdkContext = new TestSDKContext();
     });
 
     it("instance should always return the same instance", () => {
-        const globalInstance = SdkContextClass.instance;
-        expect(SdkContextClass.instance).toBe(globalInstance);
+        const globalInstance = SDKContextClass.instance;
+        expect(SDKContextClass.instance).toBe(globalInstance);
     });
 
     it("userProfilesStore should raise an error without a client", () => {
         expect(() => sdkContext.userProfilesStore).toThrow("Unable to create UserProfilesStore without a client");
     });
 
-    it("oidcClientStore should raise an error without a client", () => {
-        expect(() => sdkContext.oidcClientStore).toThrow("Unable to create OidcClientStore without a client");
-    });
-
     describe("when SDKContext has a client", () => {
         beforeEach(() => {
-            sdkContext.client = client;
+            sdkContext._client = client;
         });
 
         it("userProfilesStore should return a UserProfilesStore", () => {
@@ -53,14 +51,8 @@ describe("SdkContextClass", () => {
         it("onLoggedOut should clear the UserProfilesStore", () => {
             const store = sdkContext.userProfilesStore;
             sdkContext.onLoggedOut();
+            sdkContext._client = client;
             expect(sdkContext.userProfilesStore).not.toBe(store);
         });
-
-        it("oidcClientstore should return a OidcClientStore", () => {
-            const store = sdkContext.oidcClientStore;
-            expect(store).toBeInstanceOf(OidcClientStore);
-            // it should return the same instance
-            expect(sdkContext.oidcClientStore).toBe(store);
-        });
     });
 });
diff --git a/apps/web/src/contexts/SDKContextClass.ts b/apps/web/src/contexts/SDKContextClass.ts
new file mode 100644
index 0000000000..70d7f817d9
--- /dev/null
+++ b/apps/web/src/contexts/SDKContextClass.ts
@@ -0,0 +1,227 @@
+/*
+Copyright 2026 Element Creations Ltd.
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type MatrixClient } from "matrix-js-sdk/src/matrix";
+
+import defaultDispatcher from "../dispatcher/dispatcher";
+import LegacyCallHandler from "../LegacyCallHandler";
+import { PosthogAnalytics } from "../PosthogAnalytics";
+import { SlidingSyncManager } from "../SlidingSyncManager";
+import { MemberListStore } from "../stores/MemberListStore";
+import { RoomNotificationStateStore } from "../stores/notifications/RoomNotificationStateStore";
+import RightPanelStore from "../stores/right-panel/RightPanelStore";
+import { RoomViewStore } from "../stores/RoomViewStore";
+import SpaceStore from "../stores/spaces/SpaceStore";
+import TypingStore from "../stores/TypingStore";
+import { UserProfilesStore } from "../stores/UserProfilesStore";
+import { WidgetLayoutStore } from "../stores/widgets/WidgetLayoutStore";
+import { WidgetPermissionStore } from "../stores/widgets/WidgetPermissionStore";
+import WidgetStore from "../stores/WidgetStore";
+import ResizeNotifier from "../utils/ResizeNotifier";
+import { MultiRoomViewStore } from "../stores/MultiRoomViewStore";
+import { type ActionPayload, isAction } from "../dispatcher/payloads.ts";
+import { Action } from "../dispatcher/actions.ts";
+import { type OnLoggedInPayload } from "../dispatcher/payloads/OnLoggedInPayload.ts";
+import Notifier from "../Notifier.ts";
+import SettingController from "../settings/controllers/SettingController.ts";
+import { CallStore } from "../stores/CallStore";
+import { LatestRtcNotificationEventStore } from "../stores/LatestRtcNotificationEventStore";
+
+/**
+ * A class which (mostly) lazily initialises stores as and when they are requested, ensuring they remain
+ * as singletons scoped to this object.
+ *
+ * Since this does the actual construction of all stores, it is *very* heavy on imports and lives right near
+ * the top of the import tree. If anything other than code to set up the app (or tests) are importing this file,
+ * it's doing it wrong and should be accessing whatever it needs via the react context.
+ */
+export class SDKContextClass {
+    /**
+     * The global SDKContextClass instance. This is a temporary measure whilst so many stores remain global
+     * as well. Over time, these stores should accept a `SDKContextClass` instance in their constructor.
+     * When all stores do this, this static variable can be deleted.
+     */
+    public static readonly instance = new SDKContextClass();
+
+    // Optional as we don't have a client on initial load if unregistered.
+    // It is only safe to set this once, as updating this value will NOT notify components using
+    // this Context.
+    protected _client?: MatrixClient;
+    public get client(): MatrixClient | undefined {
+        return this._client;
+    }
+
+    // All protected fields to make it easier to derive test stores
+    protected _WidgetPermissionStore?: WidgetPermissionStore;
+    protected _MemberListStore?: MemberListStore;
+    protected _RightPanelStore?: RightPanelStore;
+    protected _RoomNotificationStateStore?: RoomNotificationStateStore;
+    protected _RoomViewStore?: RoomViewStore;
+    protected _WidgetLayoutStore?: WidgetLayoutStore;
+    protected _WidgetStore?: WidgetStore;
+    protected _PosthogAnalytics?: PosthogAnalytics;
+    protected _SlidingSyncManager?: SlidingSyncManager;
+    protected _SpaceStore?: SpaceStore;
+    protected _LegacyCallHandler?: LegacyCallHandler;
+    protected _TypingStore?: TypingStore;
+    protected _UserProfilesStore?: UserProfilesStore;
+    protected _ResizeNotifier?: ResizeNotifier;
+    protected _MultiRoomViewStore?: MultiRoomViewStore;
+    protected _Notifier?: Notifier;
+    protected _CallStore?: CallStore;
+    protected _LatestRtcNotificationEventStore?: LatestRtcNotificationEventStore;
+
+    public constructor() {
+        SettingController.sdkContext = this;
+
+        defaultDispatcher.register(this.onDispatch);
+    }
+
+    private onDispatch = (payload: ActionPayload): void => {
+        if (isAction<OnLoggedInPayload>(payload, Action.OnLoggedIn)) {
+            this._client = payload.client;
+        }
+    };
+
+    /**
+     * Automatically construct stores which need to be created eagerly so they can register with
+     * the dispatcher.
+     */
+    public constructEagerStores(): void {
+        this._RoomViewStore = this.roomViewStore;
+    }
+
+    public get legacyCallHandler(): LegacyCallHandler {
+        if (!this._LegacyCallHandler) {
+            this._LegacyCallHandler = new LegacyCallHandler(this);
+        }
+        return this._LegacyCallHandler;
+    }
+    public get rightPanelStore(): RightPanelStore {
+        if (!this._RightPanelStore) {
+            this._RightPanelStore = RightPanelStore.instance;
+        }
+        return this._RightPanelStore;
+    }
+    public get roomNotificationStateStore(): RoomNotificationStateStore {
+        if (!this._RoomNotificationStateStore) {
+            this._RoomNotificationStateStore = RoomNotificationStateStore.instance;
+        }
+        return this._RoomNotificationStateStore;
+    }
+    public get roomViewStore(): RoomViewStore {
+        if (!this._RoomViewStore) {
+            this._RoomViewStore = new RoomViewStore(defaultDispatcher, this);
+        }
+        return this._RoomViewStore;
+    }
+    public get widgetLayoutStore(): WidgetLayoutStore {
+        if (!this._WidgetLayoutStore) {
+            this._WidgetLayoutStore = WidgetLayoutStore.instance;
+        }
+        return this._WidgetLayoutStore;
+    }
+    public get widgetPermissionStore(): WidgetPermissionStore {
+        if (!this._WidgetPermissionStore) {
+            this._WidgetPermissionStore = new WidgetPermissionStore(this);
+        }
+        return this._WidgetPermissionStore;
+    }
+    public get widgetStore(): WidgetStore {
+        if (!this._WidgetStore) {
+            this._WidgetStore = WidgetStore.instance;
+        }
+        return this._WidgetStore;
+    }
+    public get posthogAnalytics(): PosthogAnalytics {
+        if (!this._PosthogAnalytics) {
+            this._PosthogAnalytics = PosthogAnalytics.instance;
+        }
+        return this._PosthogAnalytics;
+    }
+    public get memberListStore(): MemberListStore {
+        if (!this._MemberListStore) {
+            this._MemberListStore = new MemberListStore(this);
+        }
+        return this._MemberListStore;
+    }
+    public get slidingSyncManager(): SlidingSyncManager {
+        if (!this._SlidingSyncManager) {
+            this._SlidingSyncManager = SlidingSyncManager.instance;
+        }
+        return this._SlidingSyncManager;
+    }
+    public get spaceStore(): SpaceStore {
+        if (!this._SpaceStore) {
+            this._SpaceStore = new SpaceStore(defaultDispatcher, this);
+            this._SpaceStore.start();
+        }
+        return this._SpaceStore;
+    }
+    public get typingStore(): TypingStore {
+        if (!this._TypingStore) {
+            this._TypingStore = new TypingStore(this);
+        }
+        return this._TypingStore;
+    }
+
+    public get userProfilesStore(): UserProfilesStore {
+        if (!this.client) {
+            throw new Error("Unable to create UserProfilesStore without a client");
+        }
+
+        if (!this._UserProfilesStore) {
+            this._UserProfilesStore = new UserProfilesStore(this.client);
+        }
+
+        return this._UserProfilesStore;
+    }
+
+    // This is getting increasingly tenuous to have here but we still have class components so it's
+    // awkward to consume multiple contexts in them. This should be replaced with ResizeObservers
+    // anyway really.
+    public get resizeNotifier(): ResizeNotifier {
+        if (!this._ResizeNotifier) {
+            this._ResizeNotifier = new ResizeNotifier();
+        }
+        return this._ResizeNotifier;
+    }
+
+    public get multiRoomViewStore(): MultiRoomViewStore {
+        if (!this._MultiRoomViewStore) {
+            this._MultiRoomViewStore = new MultiRoomViewStore(defaultDispatcher, this);
+        }
+        return this._MultiRoomViewStore;
+    }
+
+    public get notifier(): Notifier {
+        if (!this._Notifier) {
+            this._Notifier = new Notifier(defaultDispatcher, this);
+        }
+        return this._Notifier;
+    }
+
+    public get callStore(): CallStore {
+        this._CallStore ??= CallStore.instance;
+        return this._CallStore;
+    }
+
+    public get latestRtcNotificationEventStore(): LatestRtcNotificationEventStore {
+        if (!this._LatestRtcNotificationEventStore) {
+            this._LatestRtcNotificationEventStore = new LatestRtcNotificationEventStore(this.callStore);
+            this._LatestRtcNotificationEventStore.start();
+        }
+        return this._LatestRtcNotificationEventStore;
+    }
+
+    public onLoggedOut(): void {
+        this._UserProfilesStore = undefined;
+        this._client = undefined;
+    }
+}
diff --git a/apps/web/src/contexts/ScopedRoomContext.tsx b/apps/web/src/contexts/ScopedRoomContext.tsx
index 1d5840d871..7bbd27b40c 100644
--- a/apps/web/src/contexts/ScopedRoomContext.tsx
+++ b/apps/web/src/contexts/ScopedRoomContext.tsx
@@ -58,7 +58,7 @@ const ScopedRoomContext = createContext<EfficientContext<ContextValue> | undefin
 // Uses react memo and leverages splatting the value to ensure that the context is only updated when the state changes (shallow compare)
 export const ScopedRoomContextProvider = memo(
     ({ children, ...state }: { children: ReactNode } & ContextValue): JSX.Element => {
-        // eslint-disable-next-line react-compiler/react-compiler,react-hooks/exhaustive-deps
+        // eslint-disable-next-line react-hooks/exhaustive-deps
         const context = useMemo(() => new EfficientContext<ContextValue>(state), []);
         useEffect(() => {
             context.setState(state);
diff --git a/apps/web/src/createRoom.ts b/apps/web/src/createRoom.ts
index 193e9dd2cc..d83db68304 100644
--- a/apps/web/src/createRoom.ts
+++ b/apps/web/src/createRoom.ts
@@ -33,7 +33,6 @@ import { _t, UserFriendlyError } from "./languageHandler";
 import dis from "./dispatcher/dispatcher";
 import * as Rooms from "./Rooms";
 import { getAddressType } from "./UserAddress";
-import SpaceStore from "./stores/spaces/SpaceStore";
 import { makeSpaceParentEvent } from "./utils/space";
 import { JitsiCall, ElementCall } from "./models/Call";
 import { Action } from "./dispatcher/actions";
@@ -45,14 +44,13 @@ import { privateShouldBeEncrypted } from "./utils/rooms";
 import { shouldForceDisableEncryption } from "./utils/crypto/shouldForceDisableEncryption";
 import { waitForMember } from "./utils/membership";
 import { doesRoomVersionSupport, PreferredRoomVersions } from "./utils/PreferredRoomVersions";
-import SettingsStore from "./settings/SettingsStore";
 import { MEGOLM_ENCRYPTION_ALGORITHM } from "./utils/crypto";
 import { ElementCallMemberEventType } from "./call-types";
 import { htmlSerializeFromMdIfNeeded } from "./editor/serialize";
+import { SDKContextClass } from "./contexts/SDKContextClass.ts";
+import SdkConfig from "./SdkConfig";
 
 // we define a number of interfaces which take their names from the js-sdk
-/* eslint-disable camelcase */
-
 export interface IOpts {
     dmUserId?: string;
     /**
@@ -86,15 +84,26 @@ export interface IOpts {
     joinRule?: JoinRule;
 }
 
-const DEFAULT_EVENT_POWER_LEVELS = {
-    [EventType.RoomName]: 50,
+/**
+ * The power levels set by synapse as of 30.06.2026.
+ * If power_level_content_override is used, these values should be used
+ * as a starting point to ensure the expected room power levels.
+ *
+ * NOTE: power_level_content_override does do a merge but NOT a deep merge.
+ * e.g. "ban": 50, will still be set by the server when `power_level_content_override = {events: {"custom": 0}}`
+ * BUT `events` will lose all the other default props listed below.
+ * So we have to do: `power_level_content_override = {events: {...POWER_LEVEL_EVENTS_DEFAULT, "custom": 0}}`
+ * This is very unfortunate if defaults change in synapse we have to keep the sdk in sync... (todo)
+ */
+export const DEFAULT_EVENTS_POWER_LEVEL = {
     [EventType.RoomAvatar]: 50,
-    [EventType.RoomPowerLevels]: 100,
-    [EventType.RoomHistoryVisibility]: 100,
     [EventType.RoomCanonicalAlias]: 50,
-    [EventType.RoomTombstone]: 100,
-    [EventType.RoomServerAcl]: 100,
     [EventType.RoomEncryption]: 100,
+    [EventType.RoomHistoryVisibility]: 100,
+    [EventType.RoomName]: 50,
+    [EventType.RoomPowerLevels]: 100,
+    [EventType.RoomServerAcl]: 100,
+    [EventType.RoomTombstone]: 100,
 };
 
 /**
@@ -173,7 +182,7 @@ export default async function createRoom(client: MatrixClient, opts: IOpts): Pro
         if (opts.roomType === RoomType.ElementVideo || opts.roomType === RoomType.UnstableCall) {
             createOpts.power_level_content_override = {
                 events: {
-                    ...DEFAULT_EVENT_POWER_LEVELS,
+                    ...DEFAULT_EVENTS_POWER_LEVEL,
                     // Allow all users to send call membership updates
                     [opts.roomType === RoomType.ElementVideo
                         ? JitsiCall.MEMBER_EVENT_TYPE
@@ -186,10 +195,10 @@ export default async function createRoom(client: MatrixClient, opts: IOpts): Pro
                 },
             };
         }
-    } else if (SettingsStore.getValue("feature_group_calls")) {
+    } else if (!SdkConfig.get("element_call").disable) {
         createOpts.power_level_content_override = {
             events: {
-                ...DEFAULT_EVENT_POWER_LEVELS,
+                ...DEFAULT_EVENTS_POWER_LEVEL,
                 // It should always (including non video rooms) be possible to join a group call.
                 [ElementCallMemberEventType.name]: 0,
             },
@@ -373,7 +382,7 @@ export default async function createRoom(client: MatrixClient, opts: IOpts): Pro
         })
         .then(() => {
             if (opts.parentSpace) {
-                return SpaceStore.instance.addRoomToSpace(
+                return SDKContextClass.instance.spaceStore.addRoomToSpace(
                     opts.parentSpace,
                     roomId,
                     [client.getDomain()!],
diff --git a/apps/web/src/customisations/UserIdentifier.ts b/apps/web/src/customisations/UserIdentifier.ts
index 9c96a80fad..c2a9614191 100644
--- a/apps/web/src/customisations/UserIdentifier.ts
+++ b/apps/web/src/customisations/UserIdentifier.ts
@@ -25,4 +25,4 @@ function getDisplayUserIdentifier(
 // customisation points that make up `IUserIdentifierCustomisations`.
 export default {
     getDisplayUserIdentifier,
-} as UserIdentifierCustomisations;
+} satisfies UserIdentifierCustomisations;
diff --git a/apps/web/src/device-listener/DeviceListener.ts b/apps/web/src/device-listener/DeviceListener.ts
index fea00c0380..f4e3fa3e82 100644
--- a/apps/web/src/device-listener/DeviceListener.ts
+++ b/apps/web/src/device-listener/DeviceListener.ts
@@ -149,7 +149,8 @@ export class DeviceListener {
     }
 
     /**
-     * Set the account data "m.org.matrix.custom.backup_disabled" to { "disabled": true }.
+     * Set the account data indicate that the user has chosen to disable key
+     * backup.
      */
     public async recordKeyBackupDisabled(): Promise<void> {
         await this.currentDevice?.recordKeyBackupDisabled();
diff --git a/apps/web/src/device-listener/DeviceListenerCurrentDevice.ts b/apps/web/src/device-listener/DeviceListenerCurrentDevice.ts
index cc9bef3d32..548b07c9d9 100644
--- a/apps/web/src/device-listener/DeviceListenerCurrentDevice.ts
+++ b/apps/web/src/device-listener/DeviceListenerCurrentDevice.ts
@@ -7,8 +7,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 { CryptoEvent, type KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
-import { type LogSpan, type BaseLogger, type Logger } from "matrix-js-sdk/src/logger";
+import { type CryptoApi, CryptoEvent, type KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
+import { LogSpan, type BaseLogger, type Logger } from "matrix-js-sdk/src/logger";
 import {
     type MatrixEvent,
     type MatrixClient,
@@ -17,6 +17,7 @@ import {
     RoomStateEvent,
     ClientEvent,
 } from "matrix-js-sdk/src/matrix";
+import { secureRandomString } from "matrix-js-sdk/src/randomstring";
 
 import { type DeviceListener, type DeviceState } from ".";
 import {
@@ -28,18 +29,22 @@ import { isSecretStorageBeingAccessed } from "../SecurityManager";
 const KEY_BACKUP_POLL_INTERVAL = 5 * 60 * 1000;
 
 /**
- * Unfortunately-named account data key used by Element X to indicate that the user
- * has chosen to disable server side key backups.
- *
- * We need to set and honour this to prevent Element X from automatically turning key backup back on.
+ * Account data key used to indicate that the user has chosen to enable or
+ * disable server side key backups.
  */
-export const BACKUP_DISABLED_ACCOUNT_DATA_KEY = "m.org.matrix.custom.backup_disabled";
+export const ACCOUNT_DATA_KEY_M_KEY_BACKUP = "m.key_backup";
+export const ACCOUNT_DATA_KEY_M_KEY_BACKUP_DISABLED_UNSTABLE = "m.org.matrix.custom.backup_disabled";
 
 /**
  * Account data key to indicate whether the user has chosen to enable or disable recovery.
  */
 export const RECOVERY_ACCOUNT_DATA_KEY = "io.element.recovery";
 
+/**
+ * We remind the user to verify their device 2 days after they dismiss the toast.
+ */
+const DEVICE_VERIFICATION_NAG_INTERVAL = 2 * 24 * 60 * 60 * 1000;
+
 /**
  * Handles all of DeviceListener's work that relates to the current device.
  */
@@ -124,15 +129,30 @@ export class DeviceListenerCurrentDevice {
      * them again until they refresh or restart the app.
      */
     public dismissEncryptionSetup(): void {
+        // If the user dismissed the "verify this session" toast, then we will
+        // re-show it later if the device still isn't verified.
+        if (this.deviceState === "verify_this_session") {
+            setTimeout(() => {
+                if (this.deviceState === "verify_this_session") {
+                    const logSpan = new LogSpan(this.logger, "nag_" + secureRandomString(4));
+                    logSpan.info("Re-showing device verification toast");
+                    this.dismissedThisDeviceToast = false;
+                    this.setDeviceState("verify_this_session", logSpan);
+                }
+            }, DEVICE_VERIFICATION_NAG_INTERVAL);
+        }
+
         this.dismissedThisDeviceToast = true;
         this.deviceListener.recheck();
     }
 
     /**
-     * Set the account data "m.org.matrix.custom.backup_disabled" to `{ "disabled": true }`.
+     * Set the account data indicate that the user has chosen to disable key
+     * backup.
      */
     public async recordKeyBackupDisabled(): Promise<void> {
-        await this.client.setAccountData(BACKUP_DISABLED_ACCOUNT_DATA_KEY, { disabled: true });
+        await this.client.setAccountData(ACCOUNT_DATA_KEY_M_KEY_BACKUP, { enabled: false });
+        await this.client.setAccountData(ACCOUNT_DATA_KEY_M_KEY_BACKUP_DISABLED_UNSTABLE, { disabled: true });
     }
 
     /**
@@ -152,102 +172,34 @@ export class DeviceListenerCurrentDevice {
             return;
         }
 
-        const secretStorageStatus = await crypto.getSecretStorageStatus();
-        const crossSigningStatus = await crypto.getCrossSigningStatus();
-        const allCrossSigningSecretsCached =
-            crossSigningStatus.privateKeysCachedLocally.masterKey &&
-            crossSigningStatus.privateKeysCachedLocally.selfSigningKey &&
-            crossSigningStatus.privateKeysCachedLocally.userSigningKey;
-
-        const recoveryDisabled = await this.recheckRecoveryDisabled(this.client);
-
-        const recoveryIsOk = secretStorageStatus.ready || recoveryDisabled;
-
-        const isCurrentDeviceTrusted = Boolean(
-            (await crypto.getDeviceVerificationStatus(this.client.getSafeUserId(), this.client.deviceId!))
-                ?.crossSigningVerified,
-        );
-
-        const keyBackupUploadActive = await this.isKeyBackupUploadActive(logSpan);
-        const backupDisabled = await this.recheckBackupDisabled();
-
-        // We warn if key backup upload is turned off and we have not explicitly
-        // said we are OK with that.
-        const keyBackupUploadIsOk = keyBackupUploadActive || backupDisabled;
-
-        // We warn if key backup is set up, but we don't have the decryption
-        // key, so can't fetch keys from backup.
-        const keyBackupDownloadIsOk =
-            !keyBackupUploadActive || backupDisabled || (await crypto.getSessionBackupPrivateKey()) !== null;
-
-        const allSystemsReady =
-            isCurrentDeviceTrusted &&
-            allCrossSigningSecretsCached &&
-            keyBackupUploadIsOk &&
-            recoveryIsOk &&
-            keyBackupDownloadIsOk;
-
-        if (allSystemsReady) {
-            logSpan.info("No toast needed");
-            await this.setDeviceState("ok", logSpan);
-        } else {
-            // make sure our keys are finished downloading
-            await crypto.getUserDeviceInfo([this.client.getSafeUserId()]);
-
-            if (!isCurrentDeviceTrusted) {
-                // the current device is not trusted: prompt the user to verify
-                logSpan.info("Current device not verified: setting state to VERIFY_THIS_SESSION");
-                await this.setDeviceState("verify_this_session", logSpan);
-            } else if (!allCrossSigningSecretsCached) {
-                // cross signing ready & device trusted, but we are missing secrets from our local cache.
-                // prompt the user to enter their recovery key.
-                logSpan.info(
-                    "Some secrets not cached: setting state to KEY_STORAGE_OUT_OF_SYNC",
-                    crossSigningStatus.privateKeysCachedLocally,
-                    crossSigningStatus.privateKeysInSecretStorage,
-                );
-                await this.setDeviceState(
-                    crossSigningStatus.privateKeysInSecretStorage ? "key_storage_out_of_sync" : "identity_needs_reset",
-                    logSpan,
-                );
-            } else if (!keyBackupUploadIsOk) {
-                logSpan.info("Key backup upload is unexpectedly turned off: setting state to TURN_ON_KEY_STORAGE");
-                await this.setDeviceState("turn_on_key_storage", logSpan);
-            } else if (secretStorageStatus.defaultKeyId === null) {
-                // The user just hasn't set up 4S yet: if they have key
-                // backup, prompt them to turn on recovery too. (If not, they
-                // have explicitly opted out, so don't hassle them.)
-                if (recoveryDisabled) {
-                    logSpan.info("Recovery disabled: no toast needed");
-                    await this.setDeviceState("ok", logSpan);
-                } else if (keyBackupUploadActive) {
-                    logSpan.info("No default 4S key: setting state to SET_UP_RECOVERY");
-                    await this.setDeviceState("set_up_recovery", logSpan);
-                } else {
-                    logSpan.info("No default 4S key but backup disabled: no toast needed");
-                    await this.setDeviceState("ok", logSpan);
-                }
-            } else if (!recoveryIsOk) {
-                logSpan.warn("4S is missing secrets: setting state to KEY_STORAGE_OUT_OF_SYNC", {
-                    secretStorageStatus,
-                    allCrossSigningSecretsCached,
-                    isCurrentDeviceTrusted,
-                    keyBackupDownloadIsOk,
-                });
-                await this.setDeviceState("key_storage_out_of_sync", logSpan);
-            } else if (!keyBackupDownloadIsOk) {
-                logSpan.warn("Backup key is not cached locally: setting state to KEY_STORAGE_OUT_OF_SYNC", {
-                    secretStorageStatus,
-                    allCrossSigningSecretsCached,
-                    isCurrentDeviceTrusted,
-                    keyBackupDownloadIsOk,
-                });
-                await this.setDeviceState("key_storage_out_of_sync", logSpan);
-            } else {
-                // We should not get here
-                logSpan.error("DeviceListenerCurrentDevice: allSystemsReady was false, but no case matched.");
-            }
+        let failed = await this.failIfCurrentDeviceNotTrusted(crypto, logSpan);
+        if (failed) {
+            return;
         }
+
+        failed = await this.failIfCrossSigningSecretsNotCached(crypto, logSpan);
+        if (failed) {
+            return;
+        }
+
+        const keyBackupStatus = await this.failIfKeyBackupUploadIsFailing(logSpan);
+        if (keyBackupStatus.failed) {
+            return;
+        }
+
+        failed = await this.failIfRecoveryIsFailing(crypto, logSpan, keyBackupStatus);
+        if (failed) {
+            return;
+        }
+
+        failed = await this.failIfKeyBackupDownloadIsFailing(crypto, logSpan, keyBackupStatus);
+        if (failed) {
+            return;
+        }
+
+        // Everything is OK - no need to show a toast
+        logSpan.info("No toast needed");
+        this.setDeviceState("ok", logSpan);
     }
 
     /**
@@ -259,11 +211,163 @@ export class DeviceListenerCurrentDevice {
         return this.deviceState;
     }
 
+    /**
+     * If the current device is not trusted (verified via cross-signing), show a
+     * toast and return true. Otherwise, return false.
+     */
+    private async failIfCurrentDeviceNotTrusted(crypto: CryptoApi, logSpan: LogSpan): Promise<boolean> {
+        const status = await crypto.getDeviceVerificationStatus(this.client.getSafeUserId(), this.client.deviceId!);
+
+        if (status?.crossSigningVerified) {
+            return false;
+        } else {
+            // The current device is not trusted: prompt the user to verify
+            await this.failedCheck("verify_this_session", logSpan, "info", "Current device not verified");
+            return true;
+        }
+    }
+
+    /**
+     * If the master, device-signing and user-signing keys are not all cached
+     * locally, show a toast and return true. Otherwise, return false.
+     */
+    private async failIfCrossSigningSecretsNotCached(crypto: CryptoApi, logSpan: LogSpan): Promise<boolean> {
+        const crossSigningStatus = await crypto.getCrossSigningStatus();
+
+        const secretsCached =
+            crossSigningStatus.privateKeysCachedLocally.masterKey &&
+            crossSigningStatus.privateKeysCachedLocally.selfSigningKey &&
+            crossSigningStatus.privateKeysCachedLocally.userSigningKey;
+
+        if (secretsCached) {
+            return false;
+        } else {
+            // cross signing ready & device trusted, but we are missing secrets from our local cache.
+            // prompt the user to enter their recovery key.
+            const newState = crossSigningStatus.privateKeysInSecretStorage
+                ? "key_storage_out_of_sync"
+                : "identity_needs_reset";
+
+            await this.failedCheck(
+                newState,
+                logSpan,
+                "info",
+                "Some secrets not cached",
+                crossSigningStatus.privateKeysCachedLocally,
+                crossSigningStatus.privateKeysInSecretStorage,
+            );
+            return true;
+        }
+    }
+
+    /**
+     * If the upload of the key backup is not working when it should, show a
+     * toast and return true. Otherwise, return false.
+     */
+    private async failIfKeyBackupUploadIsFailing(logSpan: LogSpan): Promise<KeyBackupStatus> {
+        const uploadActive = await this.isKeyBackupUploadActive(logSpan);
+        const disabled = await this.recheckBackupDisabled();
+        let failed;
+
+        // We warn if key backup upload is turned off and we have not explicitly
+        // said we are OK with that.
+        const keyBackupUploadIsOk = uploadActive || disabled;
+
+        if (!keyBackupUploadIsOk) {
+            await this.failedCheck(
+                "turn_on_key_storage",
+                logSpan,
+                "info",
+                "Key backup upload is unexpectedly turned off",
+            );
+            failed = true;
+        } else {
+            failed = false;
+        }
+
+        return { uploadActive, disabled, failed };
+    }
+
+    /**
+     * If the Recovery is enable but not working, show a toast and return true.
+     * Otherwise, return false.
+     */
+    private async failIfRecoveryIsFailing(
+        crypto: CryptoApi,
+        logSpan: LogSpan,
+        keyBackupStatus: KeyBackupStatus,
+    ): Promise<boolean> {
+        const secretStorageStatus = await crypto.getSecretStorageStatus();
+        const recoveryDisabled = await this.recheckRecoveryDisabled(this.client);
+        const recoveryIsOk = secretStorageStatus.ready || recoveryDisabled || keyBackupStatus.disabled;
+
+        if (recoveryIsOk) {
+            return false;
+        } else {
+            if (secretStorageStatus.defaultKeyId === null) {
+                await this.failedCheck("set_up_recovery", logSpan, "info", "No default 4S key");
+            } else {
+                await this.failedCheck("key_storage_out_of_sync", logSpan, "warn", "4S is missing secrets", {
+                    secretStorageStatus,
+                });
+            }
+            return true;
+        }
+    }
+
+    /**
+     * If the download of the key backup is not working when it should, show a
+     * toast and return true. Otherwise, return false.
+     */
+    private async failIfKeyBackupDownloadIsFailing(
+        crypto: CryptoApi,
+        logSpan: LogSpan,
+        keyBackupStatus: KeyBackupStatus,
+    ): Promise<boolean> {
+        // We warn if key backup is set up, but we don't have the decryption
+        // key, so can't fetch keys from backup.
+        const keyBackupDownloadIsOk =
+            !keyBackupStatus.uploadActive ||
+            keyBackupStatus.disabled ||
+            (await crypto.getSessionBackupPrivateKey()) !== null;
+
+        if (keyBackupDownloadIsOk) {
+            return false;
+        } else {
+            await this.failedCheck("key_storage_out_of_sync", logSpan, "warn", "Backup key is not cached locally");
+            return true;
+        }
+    }
+
+    /**
+     * recheck failed - update our local device keys, log a message and set the
+     * state to display to the user.
+     */
+    private async failedCheck(
+        newState: DeviceState,
+        logSpan: LogSpan,
+        level: "info" | "warn",
+        message: string,
+        ...logItems: Array<any>
+    ): Promise<void> {
+        // Make sure our keys are finished downloading
+        await this.client.getCrypto()?.getUserDeviceInfo([this.client.getSafeUserId()]);
+
+        const fullMessage = `${message}: setting state to ${newState.toLowerCase()}`;
+        if (level === "info") {
+            logSpan.info(fullMessage, ...logItems);
+        } else {
+            logSpan.warn(fullMessage, ...logItems);
+        }
+
+        this.setDeviceState(newState, logSpan);
+    }
+
     /**
      * Set the state of the device, and perform any actions necessary in
      * response to the state changing.
      */
-    private async setDeviceState(newState: DeviceState, logSpan: LogSpan): Promise<void> {
+    private setDeviceState(newState: DeviceState, logSpan: LogSpan): void {
         this.deviceState = newState;
 
         this.deviceListener.currentDeviceChangedEmitter.onStateChanged(newState);
@@ -280,13 +384,22 @@ export class DeviceListenerCurrentDevice {
     }
 
     /**
-     * Fetch the account data for `backup_disabled`. If this is the first time,
+     * Fetch the account data for `m.key_backup`. If this is the first time,
      * fetch it from the server (in case the initial sync has not finished).
      * Otherwise, fetch it from the store as normal.
+     *
+     * Returns true if `m.key_backup` has `enabled: false`.
      */
     public async recheckBackupDisabled(): Promise<boolean> {
-        const backupDisabled = await this.client.getAccountDataFromServer(BACKUP_DISABLED_ACCOUNT_DATA_KEY);
-        return !!backupDisabled?.disabled;
+        const keyBackup = await this.client.getAccountDataFromServer(ACCOUNT_DATA_KEY_M_KEY_BACKUP);
+        if (keyBackup) {
+            return keyBackup.enabled === false;
+        }
+
+        const keyBackupDisabledUnstable = await this.client.getAccountDataFromServer(
+            ACCOUNT_DATA_KEY_M_KEY_BACKUP_DISABLED_UNSTABLE,
+        );
+        return !!keyBackupDisabledUnstable?.disabled;
     }
 
     /**
@@ -335,7 +448,8 @@ export class DeviceListenerCurrentDevice {
             ev.getType().startsWith("m.secret_storage.") ||
             ev.getType().startsWith("m.cross_signing.") ||
             ev.getType() === "m.megolm_backup.v1" ||
-            ev.getType() === BACKUP_DISABLED_ACCOUNT_DATA_KEY ||
+            ev.getType() === ACCOUNT_DATA_KEY_M_KEY_BACKUP ||
+            ev.getType() === ACCOUNT_DATA_KEY_M_KEY_BACKUP_DISABLED_UNSTABLE ||
             ev.getType() === RECOVERY_ACCOUNT_DATA_KEY
         ) {
             this.deviceListener.recheck();
@@ -410,3 +524,12 @@ export class DeviceListenerCurrentDevice {
         return this.cachedKeyBackupUploadActive;
     };
 }
+
+/**
+ * The current state of Key backup.
+ */
+interface KeyBackupStatus {
+    uploadActive: boolean;
+    disabled: boolean;
+    failed: boolean;
+}
diff --git a/apps/web/src/dispatcher/actions.ts b/apps/web/src/dispatcher/actions.ts
index ad19d1c7d8..a1ab565cb3 100644
--- a/apps/web/src/dispatcher/actions.ts
+++ b/apps/web/src/dispatcher/actions.ts
@@ -42,6 +42,11 @@ export enum Action {
      */
     ViewUserDeviceSettings = "view_user_device_settings",
 
+    /**
+     * Opens the QR login flow. Only valid during authentication. No additional payload information required.
+     */
+    ViewQrLogin = "view_qr_login",
+
     /**
      * Opens the room directory. No additional payload information required.
      */
@@ -103,11 +108,6 @@ export enum Action {
      */
     ToggleSpacePanel = "toggle_space_panel",
 
-    /**
-     * Sets the apps root font size. Should be used with UpdateFontSizePayload
-     */
-    MigrateBaseFontSize = "migrate_base_font_size",
-
     /**
      * Sets the apps root font size delta. Should be used with UpdateFontSizeDeltaPayload
      * It will add the delta to the current font size.
@@ -195,6 +195,11 @@ export enum Action {
      */
     ComposerInsert = "composer_insert",
 
+    /**
+     * Inserts a file into a target composer.
+     */
+    ComposerFileInsert = "composer_insert_file",
+
     /**
      * Switches space. Should be used with SwitchSpacePayload.
      */
@@ -325,7 +330,7 @@ export enum Action {
      * access token from local storage). Note that this does not necessarily mean that a login action has happened,
      * just that authentication creds have been set up.
      *
-     * No additional payload information required.
+     * Use with a OnLoggedInPayload.
      */
     OnLoggedIn = "on_logged_in",
 
diff --git a/apps/web/test/unit-tests/dispatcher/dispatcher-test.ts b/apps/web/src/dispatcher/dispatcher.test.ts
similarity index 80%
rename from apps/web/test/unit-tests/dispatcher/dispatcher-test.ts
rename to apps/web/src/dispatcher/dispatcher.test.ts
index 4b8fc31d28..b0a50efbbd 100644
--- a/apps/web/test/unit-tests/dispatcher/dispatcher-test.ts
+++ b/apps/web/src/dispatcher/dispatcher.test.ts
@@ -6,9 +6,13 @@ 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 defaultDispatcher from "../../../src/dispatcher/dispatcher";
-import { Action } from "../../../src/dispatcher/actions";
-import { AsyncActionPayload } from "../../../src/dispatcher/payloads";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect } from "vitest";
+
+import defaultDispatcher from "./dispatcher";
+import { Action } from "./actions";
+import { AsyncActionPayload } from "./payloads";
 
 describe("MatrixDispatcher", () => {
     it("should throw error if unregistering unknown token", () => {
@@ -21,8 +25,8 @@ describe("MatrixDispatcher", () => {
         const deferred1 = Promise.withResolvers<number>();
         const deferred2 = Promise.withResolvers<number>();
 
-        const fn1 = jest.fn(() => deferred1.resolve(1));
-        const fn2 = jest.fn(() => deferred2.resolve(2));
+        const fn1 = vi.fn(() => deferred1.resolve(1));
+        const fn2 = vi.fn(() => deferred2.resolve(2));
 
         defaultDispatcher.register(fn1);
         defaultDispatcher.register(fn2);
@@ -37,8 +41,8 @@ describe("MatrixDispatcher", () => {
         const deferred1 = Promise.withResolvers<number>();
         const deferred2 = Promise.withResolvers<number>();
 
-        const fn1 = jest.fn(() => deferred1.resolve(1));
-        const fn2 = jest.fn(() => deferred2.resolve(2));
+        const fn1 = vi.fn(() => deferred1.resolve(1));
+        const fn2 = vi.fn(() => deferred2.resolve(2));
 
         defaultDispatcher.register(() => {
             defaultDispatcher.waitFor([id2]);
@@ -53,7 +57,7 @@ describe("MatrixDispatcher", () => {
     });
 
     it("should not fire callback which was added during a dispatch", () => {
-        const fn2 = jest.fn();
+        const fn2 = vi.fn();
 
         defaultDispatcher.register(() => {
             defaultDispatcher.register(fn2);
@@ -65,10 +69,10 @@ describe("MatrixDispatcher", () => {
     });
 
     it("should handle AsyncActionPayload", () => {
-        const fn = jest.fn();
+        const fn = vi.fn();
         defaultDispatcher.register(fn);
 
-        const readyFn = jest.fn((dispatch) => {
+        const readyFn = vi.fn((dispatch) => {
             dispatch({ action: "test" });
         });
         defaultDispatcher.dispatch(new AsyncActionPayload(readyFn), true);
diff --git a/apps/web/src/dispatcher/dispatcher.ts b/apps/web/src/dispatcher/dispatcher.ts
index 99c4555f5d..75f11803bb 100644
--- a/apps/web/src/dispatcher/dispatcher.ts
+++ b/apps/web/src/dispatcher/dispatcher.ts
@@ -80,7 +80,7 @@ export class MatrixDispatcher {
     /**
      * Dispatches a payload to all registered callbacks.
      */
-    // eslint-disable-next-line @typescript-eslint/naming-convention
+
     private _dispatch = (payload: ActionPayload): void => {
         invariant(!this.isDispatching(), "Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch.");
         this.startDispatching(payload);
diff --git a/apps/web/src/dispatcher/payloads.ts b/apps/web/src/dispatcher/payloads.ts
index 248a486a07..b632392db5 100644
--- a/apps/web/src/dispatcher/payloads.ts
+++ b/apps/web/src/dispatcher/payloads.ts
@@ -16,6 +16,15 @@ export interface ActionPayload {
     action: DispatcherAction;
 }
 
+/**
+ * Type guard to check if a payload is of a specific action type.
+ * @param payload - the incoming payload to check
+ * @param action - the action to return true for
+ */
+export function isAction<P extends ActionPayload>(payload: ActionPayload, action: P["action"]): payload is P {
+    return payload.action === action;
+}
+
 /**
  * The function the dispatcher calls when ready for an AsyncActionPayload. The
  * single argument is used to start a dispatch. First the dispatcher calls the
diff --git a/apps/web/src/dispatcher/payloads/AfterLeaveRoomPayload.ts b/apps/web/src/dispatcher/payloads/AfterLeaveRoomPayload.ts
index 07e7c54ad2..a16e3bd198 100644
--- a/apps/web/src/dispatcher/payloads/AfterLeaveRoomPayload.ts
+++ b/apps/web/src/dispatcher/payloads/AfterLeaveRoomPayload.ts
@@ -13,6 +13,5 @@ import { type ActionPayload } from "../payloads";
 
 export interface AfterLeaveRoomPayload extends ActionPayload {
     action: Action.AfterLeaveRoom;
-    // eslint-disable-next-line camelcase
     room_id?: Room["roomId"];
 }
diff --git a/apps/web/src/dispatcher/payloads/ComposerInsertFilePayload.ts b/apps/web/src/dispatcher/payloads/ComposerInsertFilePayload.ts
new file mode 100644
index 0000000000..8445b1610f
--- /dev/null
+++ b/apps/web/src/dispatcher/payloads/ComposerInsertFilePayload.ts
@@ -0,0 +1,16 @@
+/*
+Copyright 2026 Element Creations 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 ActionPayload } from "../payloads";
+import { type Action } from "../actions";
+import { type TimelineRenderingType } from "../../contexts/RoomContext";
+
+export interface ComposerInsertFilesPayload extends ActionPayload {
+    action: Action.ComposerFileInsert;
+    files: File[];
+    timelineRenderingType: TimelineRenderingType;
+}
diff --git a/apps/web/src/dispatcher/payloads/ComposerInsertPayload.ts b/apps/web/src/dispatcher/payloads/ComposerInsertPayload.ts
index 597db9712e..9712a8303a 100644
--- a/apps/web/src/dispatcher/payloads/ComposerInsertPayload.ts
+++ b/apps/web/src/dispatcher/payloads/ComposerInsertPayload.ts
@@ -17,7 +17,7 @@ export enum ComposerType {
 
 interface IBaseComposerInsertPayload extends ActionPayload {
     action: Action.ComposerInsert;
-    timelineRenderingType?: TimelineRenderingType; // undefined if this should just use the current in-focus type.
+    timelineRenderingType: TimelineRenderingType;
     composerType?: ComposerType; // falsy if should be re-dispatched to the correct composer
 }
 
diff --git a/apps/web/src/dispatcher/payloads/DoAfterSyncPreparedPayload.ts b/apps/web/src/dispatcher/payloads/DoAfterSyncPreparedPayload.ts
index e73ebcfc01..0bf549618e 100644
--- a/apps/web/src/dispatcher/payloads/DoAfterSyncPreparedPayload.ts
+++ b/apps/web/src/dispatcher/payloads/DoAfterSyncPreparedPayload.ts
@@ -11,6 +11,5 @@ import { type Action } from "../actions";
 
 export interface DoAfterSyncPreparedPayload<T extends ActionPayload> extends Pick<ActionPayload, "action"> {
     action: Action.DoAfterSyncPrepared;
-    // eslint-disable-next-line camelcase
     deferred_action: T;
 }
diff --git a/apps/web/src/dispatcher/payloads/JoinRoomPayload.ts b/apps/web/src/dispatcher/payloads/JoinRoomPayload.ts
index ba5019be6c..e65a2a7303 100644
--- a/apps/web/src/dispatcher/payloads/JoinRoomPayload.ts
+++ b/apps/web/src/dispatcher/payloads/JoinRoomPayload.ts
@@ -12,7 +12,6 @@ import { type IJoinRoomOpts } from "matrix-js-sdk/src/matrix";
 import { type ActionPayload } from "../payloads";
 import { type Action } from "../actions";
 
-/* eslint-disable camelcase */
 export interface JoinRoomPayload extends Pick<ActionPayload, "action"> {
     action: Action.JoinRoom;
 
@@ -24,4 +23,3 @@ export interface JoinRoomPayload extends Pick<ActionPayload, "action"> {
 
     canAskToJoin?: boolean;
 }
-/* eslint-enable camelcase */
diff --git a/apps/web/src/dispatcher/payloads/JoinRoomReadyPayload.ts b/apps/web/src/dispatcher/payloads/JoinRoomReadyPayload.ts
index 516f5b4d5c..ba324f7c48 100644
--- a/apps/web/src/dispatcher/payloads/JoinRoomReadyPayload.ts
+++ b/apps/web/src/dispatcher/payloads/JoinRoomReadyPayload.ts
@@ -11,7 +11,6 @@ import { type JoinedRoom as JoinedRoomEvent } from "@matrix-org/analytics-events
 import { type ActionPayload } from "../payloads";
 import { type Action } from "../actions";
 
-/* eslint-disable camelcase */
 export interface JoinRoomReadyPayload extends Pick<ActionPayload, "action"> {
     action: Action.JoinRoomReady;
     roomId: string;
@@ -19,4 +18,3 @@ export interface JoinRoomReadyPayload extends Pick<ActionPayload, "action"> {
     // additional parameters for the purpose of metrics & instrumentation
     metricsTrigger: JoinedRoomEvent["trigger"];
 }
-/* eslint-enable camelcase */
diff --git a/apps/web/src/dispatcher/payloads/OnLoggedInPayload.ts b/apps/web/src/dispatcher/payloads/OnLoggedInPayload.ts
new file mode 100644
index 0000000000..18eca59ae0
--- /dev/null
+++ b/apps/web/src/dispatcher/payloads/OnLoggedInPayload.ts
@@ -0,0 +1,17 @@
+/*
+Copyright 2026 Element Creations 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 MatrixClient } from "matrix-js-sdk/src/matrix";
+
+import { type ActionPayload } from "../payloads";
+import { type Action } from "../actions";
+
+export interface OnLoggedInPayload extends ActionPayload {
+    action: Action.OnLoggedIn;
+
+    client: MatrixClient;
+}
diff --git a/apps/web/src/dispatcher/payloads/OverwriteLoginPayload.ts b/apps/web/src/dispatcher/payloads/OverwriteLoginPayload.ts
index b617611d2d..8f157bfe59 100644
--- a/apps/web/src/dispatcher/payloads/OverwriteLoginPayload.ts
+++ b/apps/web/src/dispatcher/payloads/OverwriteLoginPayload.ts
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { type ActionPayload } from "../payloads";
 import { type Action } from "../actions";
-import { type IMatrixClientCreds } from "../../MatrixClientPeg";
+import { type IMatrixClientCreds } from "../../utils/createMatrixClient";
 
 export interface OverwriteLoginPayload extends ActionPayload {
     action: Action.OverwriteLogin;
diff --git a/apps/web/src/dispatcher/payloads/ThreadPayload.ts b/apps/web/src/dispatcher/payloads/ThreadPayload.ts
index ac74370afa..161eb78598 100644
--- a/apps/web/src/dispatcher/payloads/ThreadPayload.ts
+++ b/apps/web/src/dispatcher/payloads/ThreadPayload.ts
@@ -9,10 +9,8 @@ Please see LICENSE files in the repository root for full details.
 import { type ActionPayload } from "../payloads";
 import { type Action } from "../actions";
 
-/* eslint-disable camelcase */
 export interface ThreadPayload extends Pick<ActionPayload, "action"> {
     action: Action.ViewThread;
 
     thread_id: string | null;
 }
-/* eslint-enable camelcase */
diff --git a/apps/web/src/dispatcher/payloads/ViewHomePagePayload.ts b/apps/web/src/dispatcher/payloads/ViewHomePagePayload.ts
index c18d896ae4..4dbf7a38e2 100644
--- a/apps/web/src/dispatcher/payloads/ViewHomePagePayload.ts
+++ b/apps/web/src/dispatcher/payloads/ViewHomePagePayload.ts
@@ -11,7 +11,6 @@ import { type ActionPayload } from "../payloads";
 
 export interface ViewHomePagePayload extends ActionPayload {
     action: Action.ViewHomePage;
-    // eslint-disable-next-line camelcase
     context_switch?: boolean;
     justRegistered?: boolean;
 }
diff --git a/apps/web/src/dispatcher/payloads/ViewRoomErrorPayload.ts b/apps/web/src/dispatcher/payloads/ViewRoomErrorPayload.ts
index d14dc5c6da..2108bf4a62 100644
--- a/apps/web/src/dispatcher/payloads/ViewRoomErrorPayload.ts
+++ b/apps/web/src/dispatcher/payloads/ViewRoomErrorPayload.ts
@@ -13,9 +13,7 @@ import { type Action } from "../actions";
 
 export interface ViewRoomErrorPayload extends Pick<ActionPayload, "action"> {
     action: Action.ViewRoomError;
-    // eslint-disable-next-line camelcase
     room_id: Room["roomId"] | null;
-    // eslint-disable-next-line camelcase
     room_alias?: string;
     err?: MatrixError;
 }
diff --git a/apps/web/src/dispatcher/payloads/ViewRoomPayload.ts b/apps/web/src/dispatcher/payloads/ViewRoomPayload.ts
index c1dba33feb..f9d027e969 100644
--- a/apps/web/src/dispatcher/payloads/ViewRoomPayload.ts
+++ b/apps/web/src/dispatcher/payloads/ViewRoomPayload.ts
@@ -18,7 +18,6 @@ import { type AtLeastOne } from "../../@types/common";
 
 export type FocusNextType = "composer" | "threadsPanel" | undefined;
 
-/* eslint-disable camelcase */
 interface BaseViewRoomPayload extends Pick<ActionPayload, "action"> {
     action: Action.ViewRoom;
 
@@ -58,4 +57,3 @@ export type ViewRoomPayload = BaseViewRoomPayload &
         room_alias?: string;
         focusNext: FocusNextType; // wat to focus after room switch. Defaults to 'composer' if undefined.
     }>;
-/* eslint-enable camelcase */
diff --git a/apps/web/src/dispatcher/payloads/ViewStartChatOrReusePayload.ts b/apps/web/src/dispatcher/payloads/ViewStartChatOrReusePayload.ts
index 9a23d39505..1651f6e9f0 100644
--- a/apps/web/src/dispatcher/payloads/ViewStartChatOrReusePayload.ts
+++ b/apps/web/src/dispatcher/payloads/ViewStartChatOrReusePayload.ts
@@ -13,6 +13,5 @@ import { type Action } from "../actions";
 
 export interface ViewStartChatOrReusePayload extends Pick<ActionPayload, "action"> {
     action: Action.ViewStartChatOrReuse;
-    // eslint-disable-next-line camelcase
     user_id: User["userId"];
 }
diff --git a/apps/web/src/editor/__mocks__/index.ts b/apps/web/src/editor/__mocks__/index.ts
new file mode 100644
index 0000000000..d80e78ae42
--- /dev/null
+++ b/apps/web/src/editor/__mocks__/index.ts
@@ -0,0 +1,8 @@
+/*
+Copyright 2026 Element Creations 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.
+*/
+
+export * from "../../../test/unit-tests/editor/mock";
diff --git a/apps/web/test/unit-tests/editor/caret-test.ts b/apps/web/src/editor/caret.test.ts
similarity index 82%
rename from apps/web/test/unit-tests/editor/caret-test.ts
rename to apps/web/src/editor/caret.test.ts
index fd56404731..a32ded7224 100644
--- a/apps/web/test/unit-tests/editor/caret-test.ts
+++ b/apps/web/src/editor/caret.test.ts
@@ -6,16 +6,21 @@ 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 { getLineAndNodePosition } from "../../../src/editor/caret";
-import EditorModel from "../../../src/editor/model";
-import { createPartCreator } from "./mock";
+import { describe, it, expect } from "vitest";
+
+import { getLineAndNodePosition } from "./caret";
+import EditorModel from "./model";
+import { createPartCreator } from "./__mocks__";
 
 describe("editor/caret: DOM position for caret", function () {
     describe("basic text handling", function () {
         it("at end of single line", function () {
             const pc = createPartCreator();
             const model = new EditorModel([pc.plain("hello")], pc);
-            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, { index: 0, offset: 5 });
+            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, {
+                index: 0,
+                offset: 5,
+            });
             expect(lineIndex).toBe(0);
             expect(nodeIndex).toBe(0);
             expect(offset).toBe(5);
@@ -23,7 +28,10 @@ describe("editor/caret: DOM position for caret", function () {
         it("at start of single line", function () {
             const pc = createPartCreator();
             const model = new EditorModel([pc.plain("hello")], pc);
-            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, { index: 0, offset: 0 });
+            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, {
+                index: 0,
+                offset: 0,
+            });
             expect(lineIndex).toBe(0);
             expect(nodeIndex).toBe(0);
             expect(offset).toBe(0);
@@ -31,7 +39,10 @@ describe("editor/caret: DOM position for caret", function () {
         it("at middle of single line", function () {
             const pc = createPartCreator();
             const model = new EditorModel([pc.plain("hello")], pc);
-            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, { index: 0, offset: 2 });
+            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, {
+                index: 0,
+                offset: 2,
+            });
             expect(lineIndex).toBe(0);
             expect(nodeIndex).toBe(0);
             expect(offset).toBe(2);
@@ -41,7 +52,10 @@ describe("editor/caret: DOM position for caret", function () {
         it("at start of first line which is empty", function () {
             const pc = createPartCreator();
             const model = new EditorModel([pc.newline(), pc.plain("hello world")], pc);
-            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, { index: 0, offset: 0 });
+            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, {
+                index: 0,
+                offset: 0,
+            });
             expect(lineIndex).toBe(0);
             expect(nodeIndex).toBe(-1);
             expect(offset).toBe(0);
@@ -49,7 +63,10 @@ describe("editor/caret: DOM position for caret", function () {
         it("at end of last line", function () {
             const pc = createPartCreator();
             const model = new EditorModel([pc.plain("hello"), pc.newline(), pc.plain("world")], pc);
-            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, { index: 2, offset: 5 });
+            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, {
+                index: 2,
+                offset: 5,
+            });
             expect(lineIndex).toBe(1);
             expect(nodeIndex).toBe(0);
             expect(offset).toBe(5);
@@ -57,7 +74,10 @@ describe("editor/caret: DOM position for caret", function () {
         it("at start of last line", function () {
             const pc = createPartCreator();
             const model = new EditorModel([pc.plain("hello"), pc.newline(), pc.plain("world")], pc);
-            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, { index: 2, offset: 0 });
+            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, {
+                index: 2,
+                offset: 0,
+            });
             expect(lineIndex).toBe(1);
             expect(nodeIndex).toBe(0);
             expect(offset).toBe(0);
@@ -65,7 +85,10 @@ describe("editor/caret: DOM position for caret", function () {
         it("before empty line", function () {
             const pc = createPartCreator();
             const model = new EditorModel([pc.plain("hello"), pc.newline(), pc.newline(), pc.plain("world")], pc);
-            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, { index: 0, offset: 5 });
+            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, {
+                index: 0,
+                offset: 5,
+            });
             expect(lineIndex).toBe(0);
             expect(nodeIndex).toBe(0);
             expect(offset).toBe(5);
@@ -73,7 +96,10 @@ describe("editor/caret: DOM position for caret", function () {
         it("in empty line", function () {
             const pc = createPartCreator();
             const model = new EditorModel([pc.plain("hello"), pc.newline(), pc.newline(), pc.plain("world")], pc);
-            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, { index: 1, offset: 1 });
+            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, {
+                index: 1,
+                offset: 1,
+            });
             expect(lineIndex).toBe(1);
             expect(nodeIndex).toBe(-1);
             expect(offset).toBe(0);
@@ -81,7 +107,10 @@ describe("editor/caret: DOM position for caret", function () {
         it("after empty line", function () {
             const pc = createPartCreator();
             const model = new EditorModel([pc.plain("hello"), pc.newline(), pc.newline(), pc.plain("world")], pc);
-            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, { index: 3, offset: 0 });
+            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, {
+                index: 3,
+                offset: 0,
+            });
             expect(lineIndex).toBe(2);
             expect(nodeIndex).toBe(0);
             expect(offset).toBe(0);
@@ -94,7 +123,10 @@ describe("editor/caret: DOM position for caret", function () {
                 [pc.plain("hello"), pc.userPill("Alice", "@alice:hs.tld"), pc.plain("!")],
                 pc,
             );
-            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, { index: 1, offset: 0 });
+            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, {
+                index: 1,
+                offset: 0,
+            });
             expect(lineIndex).toBe(0);
             expect(nodeIndex).toBe(0);
             expect(offset).toBe(5);
@@ -105,7 +137,10 @@ describe("editor/caret: DOM position for caret", function () {
                 [pc.plain("hello"), pc.userPill("Alice", "@alice:hs.tld"), pc.plain("!")],
                 pc,
             );
-            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, { index: 1, offset: 2 });
+            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, {
+                index: 1,
+                offset: 2,
+            });
             expect(lineIndex).toBe(0);
             expect(nodeIndex).toBe(2);
             expect(offset).toBe(0);
@@ -113,7 +148,10 @@ describe("editor/caret: DOM position for caret", function () {
         it("at start of non-editable part (without plain text around)", function () {
             const pc = createPartCreator();
             const model = new EditorModel([pc.userPill("Alice", "@alice:hs.tld")], pc);
-            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, { index: 0, offset: 0 });
+            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, {
+                index: 0,
+                offset: 0,
+            });
             expect(lineIndex).toBe(0);
             //presumed nodes on line are (caret, pill, caret)
             expect(nodeIndex).toBe(0);
@@ -122,7 +160,10 @@ describe("editor/caret: DOM position for caret", function () {
         it("in middle of non-editable part (without plain text around)", function () {
             const pc = createPartCreator();
             const model = new EditorModel([pc.userPill("Alice", "@alice:hs.tld")], pc);
-            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, { index: 0, offset: 1 });
+            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, {
+                index: 0,
+                offset: 1,
+            });
             expect(lineIndex).toBe(0);
             //presumed nodes on line are (caret, pill, caret)
             expect(nodeIndex).toBe(2);
@@ -134,7 +175,10 @@ describe("editor/caret: DOM position for caret", function () {
                 [pc.userPill("Alice", "@alice:hs.tld"), pc.userPill("Bob", "@bob:hs.tld")],
                 pc,
             );
-            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, { index: 0, offset: 1 });
+            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, {
+                index: 0,
+                offset: 1,
+            });
             expect(lineIndex).toBe(0);
             //presumed nodes on line are (caret, pill, caret, pill, caret)
             expect(nodeIndex).toBe(2);
@@ -146,7 +190,10 @@ describe("editor/caret: DOM position for caret", function () {
                 [pc.userPill("Alice", "@alice:hs.tld"), pc.userPill("Bob", "@bob:hs.tld")],
                 pc,
             );
-            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, { index: 1, offset: 0 });
+            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, {
+                index: 1,
+                offset: 0,
+            });
             expect(lineIndex).toBe(0);
             //presumed nodes on line are (caret, pill, caret, pill, caret)
             expect(nodeIndex).toBe(2);
@@ -158,7 +205,10 @@ describe("editor/caret: DOM position for caret", function () {
                 [pc.userPill("Alice", "@alice:hs.tld"), pc.userPill("Bob", "@bob:hs.tld")],
                 pc,
             );
-            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, { index: 1, offset: 1 });
+            const { offset, lineIndex, nodeIndex } = getLineAndNodePosition(model, {
+                index: 1,
+                offset: 1,
+            });
             expect(lineIndex).toBe(0);
             //presumed nodes on line are (caret, pill, caret, pill, caret)
             expect(nodeIndex).toBe(4);
diff --git a/apps/web/test/unit-tests/editor/diff-test.ts b/apps/web/src/editor/diff.test.ts
similarity index 98%
rename from apps/web/test/unit-tests/editor/diff-test.ts
rename to apps/web/src/editor/diff.test.ts
index f5ec0db29e..8e0e2969d0 100644
--- a/apps/web/test/unit-tests/editor/diff-test.ts
+++ b/apps/web/src/editor/diff.test.ts
@@ -6,7 +6,9 @@ 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 { diffDeletion, diffAtCaret } from "../../../src/editor/diff";
+import { describe, it, expect } from "vitest";
+
+import { diffDeletion, diffAtCaret } from "./diff";
 
 describe("editor/diff", function () {
     describe("diffDeletion", function () {
diff --git a/apps/web/src/editor/diff.ts b/apps/web/src/editor/diff.ts
index dfc654996e..508741d329 100644
--- a/apps/web/src/editor/diff.ts
+++ b/apps/web/src/editor/diff.ts
@@ -54,7 +54,7 @@ export function diffDeletion(oldStr: string, newStr: string): IDiff {
  * @param {String} oldValue the previous value
  * @param {String} newValue the new value
  * @param {Number} caretPosition the position of the caret after `newValue` was applied.
- * @return {object} an object with `at` as the offset where characters were removed and/or added,
+ * @returns {object} an object with `at` as the offset where characters were removed and/or added,
  *                  `added` with the added string (if any), and
  *                  `removed` with the removed string (if any)
  */
diff --git a/apps/web/test/unit-tests/editor/history-test.ts b/apps/web/src/editor/history.test.ts
similarity index 97%
rename from apps/web/test/unit-tests/editor/history-test.ts
rename to apps/web/src/editor/history.test.ts
index 7ff8916247..af651b082f 100644
--- a/apps/web/test/unit-tests/editor/history-test.ts
+++ b/apps/web/src/editor/history.test.ts
@@ -6,9 +6,11 @@ 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 HistoryManager, { type IHistory, MAX_STEP_LENGTH } from "../../../src/editor/history";
-import type EditorModel from "../../../src/editor/model";
-import DocumentPosition from "../../../src/editor/position";
+import { describe, it, expect } from "vitest";
+
+import HistoryManager, { type IHistory, MAX_STEP_LENGTH } from "./history";
+import type EditorModel from "./model";
+import DocumentPosition from "./position";
 
 describe("editor/history", function () {
     it("push, then undo", function () {
@@ -107,7 +109,9 @@ describe("editor/history", function () {
         const firstCaret = new DocumentPosition(0, 0);
         history.tryPush(model, firstCaret, "insertText", {});
         parts[0] = "helloo";
-        const result = history.tryPush(model, new DocumentPosition(0, 0), "insertText", { added: "o" });
+        const result = history.tryPush(model, new DocumentPosition(0, 0), "insertText", {
+            added: "o",
+        });
         expect(result).toEqual(false);
         expect(history.canUndo()).toEqual(true);
         const undoState = history.undo(model) as IHistory;
diff --git a/apps/web/test/unit-tests/editor/model-test.ts b/apps/web/src/editor/model.test.ts
similarity index 89%
rename from apps/web/test/unit-tests/editor/model-test.ts
rename to apps/web/src/editor/model.test.ts
index e1bac72884..f391d8d80e 100644
--- a/apps/web/test/unit-tests/editor/model-test.ts
+++ b/apps/web/src/editor/model.test.ts
@@ -6,11 +6,14 @@ 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 EditorModel from "../../../src/editor/model";
-import { createPartCreator, createRenderer, type MockAutoComplete } from "./mock";
-import DocumentOffset from "../../../src/editor/offset";
-import { type PillPart } from "../../../src/editor/parts";
-import type DocumentPosition from "../../../src/editor/position";
+import { describe, it, expect } from "vitest";
+
+import EditorModel from "./model";
+import HistoryManager from "./history";
+import { createPartCreator, createRenderer, type MockAutoComplete } from "./__mocks__";
+import DocumentOffset from "./offset";
+import { type PillPart } from "./parts";
+import type DocumentPosition from "./position";
 
 describe("editor/model", function () {
     describe("plain text manipulation", function () {
@@ -190,6 +193,43 @@ describe("editor/model", function () {
             expect(model.parts[1].text).toBe("Alice");
         });
 
+        it("reverses a confirmed completion with a single undo", function () {
+            const history = new HistoryManager();
+            const pc = createPartCreator([{ resourceId: "@alice", text: "Alice" } as PillPart]);
+            // Stands in for the composer, which pushes every update it is told about onto the
+            // undo stack.
+            const model: EditorModel = new EditorModel([pc.plain("hello ")], pc, (caret) =>
+                history.tryPush(model, caret),
+            );
+
+            model.update("hello @a", "insertText", new DocumentOffset(8, true));
+            history.ensureLastChangesPushed(model);
+            const autoComplete = model.autoComplete as unknown as MockAutoComplete;
+            autoComplete.tryComplete();
+            // Confirming a completion closes the autocomplete a second time, which is what used to
+            // put an identical second state on the undo stack.
+            autoComplete.close();
+
+            const undone = history.undo(model);
+            expect(undone).toBeTruthy();
+            expect(undone!.parts.map((p) => p.text)).toEqual(["hello ", "@a"]);
+        });
+
+        it("does not report the redundant close which follows a completion", function () {
+            const renderer = createRenderer();
+            const pc = createPartCreator([{ resourceId: "@alice", text: "Alice" } as PillPart]);
+            const model = new EditorModel([pc.plain("hello ")], pc, renderer);
+
+            model.update("hello @a", "insertText", new DocumentOffset(8, true));
+            const autoComplete = model.autoComplete as unknown as MockAutoComplete;
+            autoComplete.tryComplete();
+            expect(renderer.count).toBe(2);
+
+            autoComplete.close();
+
+            expect(renderer.count).toBe(2);
+        });
+
         it("insert room pill", function () {
             const renderer = createRenderer();
             const pc = createPartCreator([{ resourceId: "#riot-dev" } as PillPart]);
diff --git a/apps/web/src/editor/model.ts b/apps/web/src/editor/model.ts
index 4328b666d8..b66d58c8c9 100644
--- a/apps/web/src/editor/model.ts
+++ b/apps/web/src/editor/model.ts
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import { diffAtCaret, diffDeletion, type IDiff } from "./diff";
 import DocumentPosition, { type IPosition } from "./position";
 import Range from "./range";
-import { type SerializedPart, type Part, type PartCreator } from "./parts";
+import { type SerializedPart, type Part, type PartCreator, Type } from "./parts";
 import { type ICallback } from "./autocomplete";
 import type AutocompleteWrapperModel from "./autocomplete";
 import type DocumentOffset from "./offset";
@@ -27,13 +27,13 @@ import { type Caret } from "./caret";
  * @param {DocumentPosition?} caretPosition the position where the caret should be position
  * @param {string?} inputType the inputType of the DOM input event
  * @param {object?} diff an object with `removed` and `added` strings
- * @return {Number?} addedLen how many characters were added/removed (-) before the caret during the transformation step.
+ * @returns {Number?} addedLen how many characters were added/removed (-) before the caret during the transformation step.
  *    This is used to adjust the caret position.
  */
 
 /**
  * @callback ManualTransformCallback
- * @return the caret position
+ * @returns the caret position
  */
 
 type TransformCallback = (caretPosition: DocumentPosition, inputType: string | undefined, diff: IDiff) => number | void;
@@ -49,6 +49,16 @@ export default class EditorModel {
     private autoCompletePartCount = 0;
     private transformCallback: TransformCallback | null = null;
 
+    /**
+     * Returns the plain text parts of the editor content only (skipping mentions)
+     */
+    public get contentPlainText(): string {
+        return this.serializeParts()
+            .filter((part) => part.type === Type.Plain)
+            .map((part) => part.text)
+            .join(" ");
+    }
+
     public constructor(
         parts: Part[],
         partCreator: PartCreator,
@@ -179,7 +189,7 @@ export default class EditorModel {
      * Should be run inside a `model.transform()` callback.
      * @param {Part[]} parts the parts to replace the range with
      * @param {DocumentPosition} position the position to start inserting at
-     * @return {Number} the amount of characters added
+     * @returns {Number} the amount of characters added
      */
     public insert(parts: Part[], position: IPosition): number {
         const insertIndex = this.splitAt(position);
@@ -252,6 +262,12 @@ export default class EditorModel {
     }
 
     private onAutoComplete = ({ replaceParts, close, range }: ICallback): void => {
+        // Confirming a completion closes the autocomplete twice: once as part of the completion and
+        // once more by the wrapper afterwards. Reporting the second one would have the history
+        // manager record a second, identical state, costing the user an extra undo to reverse one
+        // completion.
+        if (!replaceParts && close && !this._autoComplete) return;
+
         let pos: DocumentPosition | undefined;
         if (replaceParts) {
             const autoCompletePartIdx = this.autoCompletePartIdx || 0;
@@ -303,7 +319,7 @@ export default class EditorModel {
      * removes `len` amount of characters at `pos`.
      * @param {Object} pos
      * @param {Number} len
-     * @return {Number} how many characters before pos were also removed,
+     * @returns {Number} how many characters before pos were also removed,
      * usually because of non-editable parts that can only be removed in their entirety.
      */
     public removeText(pos: IPosition, len: number): number {
@@ -363,7 +379,7 @@ export default class EditorModel {
      * @param {Object} pos
      * @param {string} str
      * @param {string} inputType the source of the input, see html InputEvent.inputType
-     * @return {Number} how far from position (in characters) the insertion ended.
+     * @returns {Number} how far from position (in characters) the insertion ended.
      * This can be more than the length of `str` when crossing non-editable parts, which are skipped.
      */
     private addText(pos: IPosition, str: string, inputType: string | undefined): number {
@@ -434,7 +450,7 @@ export default class EditorModel {
      * Starts a range, which can span across multiple parts, to find and replace text.
      * @param {DocumentPosition} positionA a boundary of the range
      * @param {DocumentPosition?} positionB the other boundary of the range, optional
-     * @return {Range}
+     * @returns {Range}
      */
     public startRange(positionA: DocumentPosition, positionB = positionA): Range {
         return new Range(this, positionA, positionB);
@@ -463,7 +479,7 @@ export default class EditorModel {
      * Performs a transformation not part of an update cycle.
      * Modifying the model should only happen inside a transform call if not part of an update call.
      * @param {ManualTransformCallback} callback to run the transformations in
-     * @return {Promise} a promise when auto-complete (if applicable) is done updating
+     * @returns {Promise} a promise when auto-complete (if applicable) is done updating
      */
     public transform(callback: ManualTransformCallback): Promise<void> {
         const pos = callback();
diff --git a/apps/web/test/unit-tests/editor/operations-test.ts b/apps/web/src/editor/operations.test.ts
similarity index 98%
rename from apps/web/test/unit-tests/editor/operations-test.ts
rename to apps/web/src/editor/operations.test.ts
index 90e98b161c..b00eec94e8 100644
--- a/apps/web/test/unit-tests/editor/operations-test.ts
+++ b/apps/web/src/editor/operations.test.ts
@@ -6,18 +6,20 @@ 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 EditorModel from "../../../src/editor/model";
-import { createPartCreator, createRenderer } from "./mock";
+import { describe, it, expect } from "vitest";
+
+import EditorModel from "./model";
+import { createPartCreator, createRenderer } from "./__mocks__";
 import {
     formatRange,
     formatRangeAsCode,
     formatRangeAsLink,
     selectRangeOfWordAtCaret,
     toggleInlineFormat,
-} from "../../../src/editor/operations";
-import { Formatting } from "../../../src/components/views/rooms/MessageComposerFormatBar";
-import { longestBacktickSequence } from "../../../src/editor/deserialize";
-import type DocumentPosition from "../../../src/editor/position";
+} from "./operations";
+import { Formatting } from "../components/views/rooms/MessageComposerFormatBar";
+import { longestBacktickSequence } from "./deserialize";
+import type DocumentPosition from "./position";
 
 const SERIALIZED_NEWLINE = { text: "\n", type: "newline" };
 
diff --git a/apps/web/src/editor/operations.ts b/apps/web/src/editor/operations.ts
index 5594ed09c3..cde38ce44e 100644
--- a/apps/web/src/editor/operations.ts
+++ b/apps/web/src/editor/operations.ts
@@ -220,7 +220,7 @@ export function formatRangeAsLink(range: Range, text?: string): void {
         replaceRangeAndMoveCaret(range, newParts, 0);
     } else {
         // We set offset to -1 here so that the caret lands between the brackets
-        replaceRangeAndMoveCaret(range, [partCreator.plain("[" + range.text + "]" + "(" + (text ?? "") + ")")], -1);
+        replaceRangeAndMoveCaret(range, [partCreator.plain(`[${range.text}](${text ?? ""})`)], -1);
     }
 }
 
diff --git a/apps/web/test/unit-tests/editor/parts-test.ts b/apps/web/src/editor/parts.test.ts
similarity index 86%
rename from apps/web/test/unit-tests/editor/parts-test.ts
rename to apps/web/src/editor/parts.test.ts
index 6a8db13641..d5bbc69a81 100644
--- a/apps/web/test/unit-tests/editor/parts-test.ts
+++ b/apps/web/src/editor/parts.test.ts
@@ -6,8 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { EmojiPart, PlainPart } from "../../../src/editor/parts";
-import { createPartCreator } from "./mock";
+// @vitest-environment happy-dom
+
+import { describe, it, expect } from "vitest";
+
+import { EmojiPart, PlainPart } from "./parts";
+import { createPartCreator } from "./__mocks__";
 
 describe("editor/parts", () => {
     describe("appendUntilRejected", () => {
diff --git a/apps/web/test/unit-tests/editor/position-test.ts b/apps/web/src/editor/position.test.ts
similarity index 94%
rename from apps/web/test/unit-tests/editor/position-test.ts
rename to apps/web/src/editor/position.test.ts
index 6f1928e05c..3d614ce020 100644
--- a/apps/web/test/unit-tests/editor/position-test.ts
+++ b/apps/web/src/editor/position.test.ts
@@ -6,8 +6,10 @@ 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 EditorModel from "../../../src/editor/model";
-import { createPartCreator, createRenderer } from "./mock";
+import { describe, it, expect } from "vitest";
+
+import EditorModel from "./model";
+import { createPartCreator, createRenderer } from "./__mocks__";
 
 describe("editor/position", function () {
     it("move first position backward in empty model", function () {
diff --git a/apps/web/test/unit-tests/editor/range-test.ts b/apps/web/src/editor/range.test.ts
similarity index 96%
rename from apps/web/test/unit-tests/editor/range-test.ts
rename to apps/web/src/editor/range.test.ts
index c4e7dc05fb..fd07a8f181 100644
--- a/apps/web/test/unit-tests/editor/range-test.ts
+++ b/apps/web/src/editor/range.test.ts
@@ -6,8 +6,10 @@ 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 EditorModel from "../../../src/editor/model";
-import { createPartCreator, createRenderer } from "./mock";
+import { describe, it, expect } from "vitest";
+
+import EditorModel from "./model";
+import { createPartCreator, createRenderer } from "./__mocks__";
 
 const pillChannel = "#riot-dev:matrix.org";
 
diff --git a/apps/web/src/editor/range.ts b/apps/web/src/editor/range.ts
index eff439ec81..eecbde5c54 100644
--- a/apps/web/src/editor/range.ts
+++ b/apps/web/src/editor/range.ts
@@ -93,7 +93,7 @@ export default class Range {
      * Splits the model at the range boundaries and replaces with the given parts.
      * Should be run inside a `model.transform()` callback.
      * @param {Part[]} parts the parts to replace the range with
-     * @return {Number} the net amount of characters added, can be negative.
+     * @returns {Number} the net amount of characters added, can be negative.
      */
     public replace(parts: Part[]): number {
         const newLength = parts.reduce((sum, part) => sum + part.text.length, 0);
diff --git a/apps/web/src/editor/render.ts b/apps/web/src/editor/render.ts
index fe0059de6e..4700c9b76f 100644
--- a/apps/web/src/editor/render.ts
+++ b/apps/web/src/editor/render.ts
@@ -83,9 +83,9 @@ function reconcileLine(lineContainer: ChildNode, parts: Part[]): void {
         currentNode = isFirst ? lineContainer.firstChild : currentNode!.nextSibling;
 
         if (needsCaretNodeBefore(part, prevPart)) {
-            if (isCaretNode(currentNode as Element)) {
-                updateCaretNode(currentNode!);
-                currentNode = currentNode!.nextSibling;
+            if (isCaretNode(currentNode)) {
+                updateCaretNode(currentNode);
+                currentNode = currentNode.nextSibling;
             } else {
                 lineContainer.insertBefore(createCaretNode(), currentNode);
             }
@@ -106,9 +106,9 @@ function reconcileLine(lineContainer: ChildNode, parts: Part[]): void {
         }
 
         if (needsCaretNodeAfter(part, part === lastPart)) {
-            if (isCaretNode(currentNode?.nextSibling as Element)) {
-                currentNode = currentNode!.nextSibling;
-                updateCaretNode(currentNode as HTMLElement);
+            if (isCaretNode(currentNode?.nextSibling)) {
+                currentNode = currentNode.nextSibling;
+                updateCaretNode(currentNode);
             } else {
                 const caretNode = createCaretNode();
                 insertAfter(currentNode as HTMLElement, caretNode);
diff --git a/apps/web/test/unit-tests/editor/roundtrip-test.ts b/apps/web/src/editor/roundtrip.test.ts
similarity index 95%
rename from apps/web/test/unit-tests/editor/roundtrip-test.ts
rename to apps/web/src/editor/roundtrip.test.ts
index 08c80a849c..615f085258 100644
--- a/apps/web/test/unit-tests/editor/roundtrip-test.ts
+++ b/apps/web/src/editor/roundtrip.test.ts
@@ -6,13 +6,16 @@ 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.
 */
 
+// @vitest-environment happy-dom
+
+import { describe, it, expect } from "vitest";
 import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
 
-import { parseEvent } from "../../../src/editor/deserialize";
-import EditorModel from "../../../src/editor/model";
-import DocumentOffset from "../../../src/editor/offset";
-import { htmlSerializeIfNeeded, textSerialize } from "../../../src/editor/serialize";
-import { createPartCreator } from "./mock";
+import { parseEvent } from "./deserialize";
+import EditorModel from "./model";
+import DocumentOffset from "./offset";
+import { htmlSerializeIfNeeded, textSerialize } from "./serialize";
+import { createPartCreator } from "./__mocks__";
 
 function htmlMessage(formattedBody: string, msgtype = "m.text") {
     return {
@@ -50,7 +53,7 @@ async function roundTripHtml(html: string): Promise<string> {
 
 describe("editor/roundtrip", function () {
     describe("markdown messages should round-trip if they contain", function () {
-        test.each([
+        it.each([
             ["newlines", "hello\nworld"],
             ["pills", "text message for @room"],
             ["pills with interesting characters in mxid", "text message for @alice\\\\\\_\\]#>&:hs.example.com"],
@@ -77,7 +80,7 @@ describe("editor/roundtrip", function () {
             expect(await roundTripMarkdown(markdown)).toEqual(markdown);
         });
 
-        test.skip.each([
+        it.skip.each([
             // Removes trailing spaces
             ["a code block followed by newlines", "```\nfoo(bar).baz();\n\n3\n```\n\n"],
             // Adds a space after the code block
@@ -115,7 +118,7 @@ describe("editor/roundtrip", function () {
     });
 
     describe("HTML messages should round-trip if they contain", function () {
-        test.each([
+        it.each([
             ["backslashes", "C:\\Program Files"],
             [
                 "nested blockquotes",
@@ -140,7 +143,7 @@ describe("editor/roundtrip", function () {
             expect(await roundTripHtml(html)).toEqual(html);
         });
 
-        test.skip.each([
+        it.skip.each([
             // Strips out the pill - maybe needs some user lookup to work?
             ["user pills", '<a href="https://matrix.to/#/@alice:hs.tld">Alice</a>'],
             // Appends a slash to the URL
diff --git a/apps/web/test/unit-tests/editor/serialize-test.ts b/apps/web/src/editor/serialize.test.ts
similarity index 93%
rename from apps/web/test/unit-tests/editor/serialize-test.ts
rename to apps/web/src/editor/serialize.test.ts
index 915b78bdfa..011a1737ea 100644
--- a/apps/web/test/unit-tests/editor/serialize-test.ts
+++ b/apps/web/src/editor/serialize.test.ts
@@ -6,14 +6,16 @@ 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 { mocked } from "jest-mock";
+// @vitest-environment happy-dom
 
-import EditorModel from "../../../src/editor/model";
-import { htmlSerializeFromMdIfNeeded, htmlSerializeIfNeeded } from "../../../src/editor/serialize";
-import { createPartCreator } from "./mock";
-import { type IConfigOptions } from "../../../src/IConfigOptions";
-import SettingsStore from "../../../src/settings/SettingsStore";
-import SdkConfig from "../../../src/SdkConfig";
+import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
+
+import EditorModel from "./model";
+import { htmlSerializeFromMdIfNeeded, htmlSerializeIfNeeded } from "./serialize";
+import { createPartCreator } from "./__mocks__";
+import { type IConfigOptions } from "../IConfigOptions";
+import SettingsStore from "../settings/SettingsStore";
+import SdkConfig from "../SdkConfig";
 
 describe("editor/serialize", function () {
     describe("with markdown", function () {
@@ -109,7 +111,7 @@ describe("editor/serialize", function () {
         describe("with permalink_prefix set", function () {
             const sdkConfigGet = SdkConfig.get;
             beforeEach(() => {
-                jest.spyOn(SdkConfig, "get").mockImplementation((key: keyof IConfigOptions, altCaseName?: string) => {
+                vi.spyOn(SdkConfig, "get").mockImplementation((key: keyof IConfigOptions, altCaseName?: string) => {
                     if (key === "permalink_prefix") {
                         return "https://element.fs.tld";
                     } else return sdkConfigGet(key, altCaseName);
@@ -129,7 +131,7 @@ describe("editor/serialize", function () {
                 expect(html).toBe('<a href="https://matrix.to/#/#room:hs.tld">#room:hs.tld</a>');
             });
             afterEach(() => {
-                mocked(SdkConfig.get).mockRestore();
+                vi.mocked(SdkConfig.get).mockRestore();
             });
         });
     });
@@ -171,7 +173,7 @@ describe("editor/serialize", function () {
 
     describe("feature_latex_maths", () => {
         beforeEach(() => {
-            jest.spyOn(SettingsStore, "getValue").mockImplementation((feature) => feature === "feature_latex_maths");
+            vi.spyOn(SettingsStore, "getValue").mockImplementation((feature) => feature === "feature_latex_maths");
         });
 
         it("should support inline katex", () => {
diff --git a/apps/web/src/editor/serialize.ts b/apps/web/src/editor/serialize.ts
index d2c5ecc693..e292b5a39c 100644
--- a/apps/web/src/editor/serialize.ts
+++ b/apps/web/src/editor/serialize.ts
@@ -177,9 +177,9 @@ export function textSerialize(model: EditorModel): string {
             case Type.RoomPill:
                 // Here we use the resourceId for compatibility with non-rich text clients
                 // See https://github.com/vector-im/element-web/issues/16660
-                return text + `${part.resourceId}`;
+                return text + part.resourceId;
             case Type.UserPill:
-                return text + `${part.text}`;
+                return text + part.text;
         }
     }, "");
 }
diff --git a/apps/web/test/unit-tests/email-test.ts b/apps/web/src/email.test.ts
similarity index 88%
rename from apps/web/test/unit-tests/email-test.ts
rename to apps/web/src/email.test.ts
index f02566d271..e2cc58129e 100644
--- a/apps/web/test/unit-tests/email-test.ts
+++ b/apps/web/src/email.test.ts
@@ -6,7 +6,9 @@ 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 { looksValid } from "../../src/email";
+import { describe, it, expect } from "vitest";
+
+import { looksValid } from "./email";
 
 describe("looksValid", () => {
     it.each([
diff --git a/apps/web/src/emojipicker/EmojiPickerWithRecents.test.tsx b/apps/web/src/emojipicker/EmojiPickerWithRecents.test.tsx
new file mode 100644
index 0000000000..ab3124750f
--- /dev/null
+++ b/apps/web/src/emojipicker/EmojiPickerWithRecents.test.tsx
@@ -0,0 +1,36 @@
+/*
+Copyright 2026 Element Creations 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.
+*/
+
+// @vitest-environment happy-dom
+
+import React from "react";
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "test-utils-rtl";
+import userEvent from "@testing-library/user-event";
+
+import { EmojiPickerWithRecents } from "./EmojiPickerWithRecents";
+import { getKeyBindingsManager } from "../KeyBindingsManager";
+
+describe("EmojiPickerWithRecents", () => {
+    it("passes the selected emoji through to the picker", () => {
+        render(<EmojiPickerWithRecents onChoose={() => true} onFinished={vi.fn()} selectedEmojis={new Set(["🎉"])} />);
+
+        expect(screen.getByRole("checkbox", { name: "🎉" })).toHaveAttribute("aria-checked", "true");
+        expect(screen.getByRole("checkbox", { name: "🚀" })).toHaveAttribute("aria-checked", "false");
+    });
+
+    it("resolves keyboard actions using the app's keybindings", async () => {
+        const getAccessibilityAction = vi.spyOn(getKeyBindingsManager(), "getAccessibilityAction");
+        render(<EmojiPickerWithRecents onChoose={() => true} onFinished={vi.fn()} />);
+
+        screen.getByRole("button", { name: "🎉" }).focus();
+        await userEvent.keyboard("[ArrowRight]");
+
+        expect(getAccessibilityAction).toHaveBeenCalled();
+        expect(screen.getByRole("button", { name: "😕" })).toHaveFocus();
+    });
+});
diff --git a/apps/web/src/emojipicker/EmojiPickerWithRecents.tsx b/apps/web/src/emojipicker/EmojiPickerWithRecents.tsx
new file mode 100644
index 0000000000..e7db148fe0
--- /dev/null
+++ b/apps/web/src/emojipicker/EmojiPickerWithRecents.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright 2026 Element Creations 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, { useMemo } from "react";
+import { EmojiPicker, type EmojiPickerProps } from "@element-hq/web-shared-components";
+import * as recent from "./recent";
+import { getWebRovingAction } from "../accessibility/RovingTabIndex";
+
+/**
+ * Wrapped version of the shared-components emoji picker that passes in
+ * the recent emojis from the web app's local storage (also passes in the
+ * web roving actions).
+ */
+export function EmojiPickerWithRecents({
+    selectedEmojis,
+    onChoose,
+    onFinished,
+    isEmojiDisabled,
+}: Omit<EmojiPickerProps, "recentEmojis" | "onRecordRecent" | "getAction">): React.ReactNode {
+    // There isn't anything for us to key the memoisation off here. This will just
+    // update when the component mounts which is probably good enough.
+    const recentEmojis = useMemo(() => recent.get(), []);
+
+    return (
+        <EmojiPicker
+            selectedEmojis={selectedEmojis}
+            onChoose={onChoose}
+            onFinished={onFinished}
+            isEmojiDisabled={isEmojiDisabled}
+            getAction={getWebRovingAction}
+            recentEmojis={recentEmojis}
+            onRecordRecent={recent.add}
+        />
+    );
+}
diff --git a/apps/web/src/emojipicker/recent.test.ts b/apps/web/src/emojipicker/recent.test.ts
new file mode 100644
index 0000000000..3879ddbd0f
--- /dev/null
+++ b/apps/web/src/emojipicker/recent.test.ts
@@ -0,0 +1,47 @@
+/*
+Copyright 2026 Element Creations 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 { describe, it, expect } from "vitest";
+
+import { translateLegacyEmojiData, mergeEmojiData } from "./recent.ts";
+
+describe("recent", () => {
+    describe("translateLegacyEmojiData", () => {
+        it("should correctly translate to the new format", () => {
+            expect(
+                translateLegacyEmojiData([
+                    ["🤩", 1],
+                    ["😀", 2],
+                ]),
+            ).toEqual([
+                { emoji: "🤩", total: 1 },
+                { emoji: "😀", total: 2 },
+            ]);
+        });
+    });
+
+    describe("mergeEmojiData", () => {
+        it("should merge given data correctly", () => {
+            expect(
+                mergeEmojiData(
+                    [{ emoji: "🤩", total: 1 }],
+                    [
+                        { emoji: "🤩", total: 2 },
+                        { emoji: "😀", total: 1 },
+                    ],
+                ),
+            ).toEqual([
+                { emoji: "🤩", total: 2 },
+                { emoji: "😀", total: 1 },
+            ]);
+        });
+
+        it("should handle data2 being undefined", () => {
+            expect(mergeEmojiData([{ emoji: "🤩", total: 1 }])).toEqual([{ emoji: "🤩", total: 1 }]);
+        });
+    });
+});
diff --git a/apps/web/src/emojipicker/recent.ts b/apps/web/src/emojipicker/recent.ts
index 42b3c4b276..302b5b92af 100644
--- a/apps/web/src/emojipicker/recent.ts
+++ b/apps/web/src/emojipicker/recent.ts
@@ -8,16 +8,20 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { orderBy } from "lodash";
+import { type AccountDataEvents } from "matrix-js-sdk/src/matrix";
 
 import SettingsStore from "../settings/SettingsStore";
 import { SettingLevel } from "../settings/SettingLevel";
 
-interface ILegacyFormat {
-    [emoji: string]: [number, number]; // [count, date]
-}
+export type RecentEmojiData = AccountDataEvents["m.recent_emoji"]["recent_emoji"];
+export type LegacyRecentEmojiData = [emoji: string, count: number][];
 
-// New format tries to be more space efficient for synchronization. Ordered by Date descending.
-export type RecentEmojiData = [emoji: string, count: number][];
+// XXX: We can get rid of the legacy account data handling towards the end of 2026.
+declare module "matrix-js-sdk/src/types" {
+    export interface AccountDataEvents {
+        "io.element.recent_emoji": { recent_emoji: LegacyRecentEmojiData };
+    }
+}
 
 const SETTING_NAME = "recent_emoji";
 
@@ -25,43 +29,57 @@ const SETTING_NAME = "recent_emoji";
 // even if you haven't used your typically favourite emoji for a little while.
 const STORAGE_LIMIT = 100;
 
-// TODO remove this after some time
-function migrate(): void {
-    const data: ILegacyFormat = JSON.parse(window.localStorage.mx_reaction_count || "{}");
-    const sorted = Object.entries(data).sort(([, [count1, date1]], [, [count2, date2]]) => date2 - date1);
-    const newFormat = sorted.map<RecentEmojiData[number]>(([emoji, [count, date]]) => [emoji, count]);
-    SettingsStore.setValue(SETTING_NAME, null, SettingLevel.ACCOUNT, newFormat.slice(0, STORAGE_LIMIT));
-}
-
 function getRecentEmoji(): RecentEmojiData {
     return SettingsStore.getValue(SETTING_NAME) || [];
 }
 
+export function translateLegacyEmojiData(legacyData: LegacyRecentEmojiData): RecentEmojiData {
+    return legacyData.map(([emoji, total]) => ({
+        emoji,
+        total,
+    }));
+}
+
+export function mergeEmojiData(data1: RecentEmojiData, data2?: RecentEmojiData): RecentEmojiData {
+    if (!data2) return data1;
+
+    return Object.values(
+        [...data1, ...data2].reduce(
+            (acc, item) => {
+                const existing = acc[item.emoji];
+
+                // If it doesn't exist or the current total is higher, update it
+                if (!existing || item.total > existing.total) {
+                    acc[item.emoji] = item;
+                }
+
+                return acc;
+            },
+            {} as Record<string, RecentEmojiData[number]>,
+        ),
+    );
+}
+
 export function add(emoji: string): void {
     const recents = getRecentEmoji();
-    const i = recents.findIndex(([e]) => e === emoji);
+    const i = recents.findIndex((entry) => entry.emoji === emoji);
 
     let newEntry: RecentEmojiData[number];
     if (i >= 0) {
         // first remove the existing tuple so that we can increment it and push it to the front
         [newEntry] = recents.splice(i, 1);
-        newEntry[1]++; // increment the usage count
+        newEntry.total++; // increment the usage count
     } else {
-        newEntry = [emoji, 1];
+        newEntry = { emoji, total: 1 };
     }
 
     SettingsStore.setValue(SETTING_NAME, null, SettingLevel.ACCOUNT, [newEntry, ...recents].slice(0, STORAGE_LIMIT));
 }
 
 export function get(limit = 24): string[] {
-    let recents = getRecentEmoji();
-
-    if (recents.length < 1) {
-        migrate();
-        recents = getRecentEmoji();
-    }
+    const recents = getRecentEmoji();
 
     // perform a stable sort on `count` to keep the recent (date) order as a secondary sort factor
-    const sorted = orderBy(recents, "1", "desc");
-    return sorted.slice(0, limit).map(([emoji]) => emoji);
+    const sorted = orderBy(recents, "total", "desc");
+    return sorted.slice(0, limit).map(({ emoji }) => emoji);
 }
diff --git a/apps/web/test/unit-tests/events/EventTileFactory-test.ts b/apps/web/src/events/EventTileFactory.test.ts
similarity index 57%
rename from apps/web/test/unit-tests/events/EventTileFactory-test.ts
rename to apps/web/src/events/EventTileFactory.test.ts
index b1ff4c57bf..cc50bc43b2 100644
--- a/apps/web/test/unit-tests/events/EventTileFactory-test.ts
+++ b/apps/web/src/events/EventTileFactory.test.ts
@@ -6,8 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { mocked } from "jest-mock";
-import { EventType, type MatrixClient, MatrixEvent, MsgType, Room } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeAll, beforeEach, afterEach } from "vitest";
+import { render } from "test-utils-rtl";
+import { EventType, type MatrixClient, MatrixEvent, MsgType, Room, type RoomMember } from "matrix-js-sdk/src/matrix";
+import { createTestClient, mkEvent, withClientContextRenderOptions } from "test-utils";
 
 import {
     JSONEventFactory,
@@ -15,14 +19,42 @@ import {
     pickFactory,
     renderTile,
     RoomCreateEventFactory,
-} from "../../../src/events/EventTileFactory";
-import SettingsStore from "../../../src/settings/SettingsStore";
-import { createTestClient, mkEvent } from "../../test-utils";
-import { TimelineRenderingType } from "../../../src/contexts/RoomContext";
-import { ModuleApi } from "../../../src/modules/Api";
+} from "./EventTileFactory";
+import SettingsStore from "../settings/SettingsStore";
+import { TimelineRenderingType } from "../contexts/RoomContext";
+import { ModuleApi } from "../modules/Api";
+import DMRoomMap from "../utils/DMRoomMap";
+import { MatrixClientPeg } from "../MatrixClientPeg";
 
 const roomId = "!room:example.com";
 
+function makeVerificationRequestEvent({ sender, to }: { sender: string; to: string }): MatrixEvent {
+    return mkEvent({
+        event: true,
+        type: EventType.RoomMessage,
+        user: sender,
+        room: roomId,
+        content: {
+            msgtype: MsgType.KeyVerificationRequest,
+            from_device: "DEVICE",
+            methods: ["m.sas.v1"],
+            to,
+        },
+    });
+}
+
+function makeRoomAvatarEvent(url = "mxc://example.com/avatar"): MatrixEvent {
+    return new MatrixEvent({
+        type: EventType.RoomAvatar,
+        state_key: "",
+        room_id: roomId,
+        sender: "@alice:example.com",
+        content: {
+            url,
+        },
+    });
+}
+
 describe("pickFactory", () => {
     let client: MatrixClient;
     let room: Room;
@@ -38,7 +70,7 @@ describe("pickFactory", () => {
         client = createTestClient();
 
         room = new Room(roomId, client, client.getSafeUserId());
-        mocked(client.getRoom).mockImplementation((getRoomId: string): Room | null => {
+        vi.mocked(client.getRoom).mockImplementation((getRoomId?: string): Room | null => {
             if (getRoomId === room.roomId) return room;
             return null;
         });
@@ -127,7 +159,7 @@ describe("pickFactory", () => {
     describe("when not showing hidden events", () => {
         describe("without dynamic predecessor support", () => {
             beforeEach(() => {
-                jest.spyOn(SettingsStore, "getValue").mockReset();
+                vi.spyOn(SettingsStore, "getValue").mockReset();
             });
 
             it("should return undefined for a room without predecessor", () => {
@@ -163,7 +195,7 @@ describe("pickFactory", () => {
 
         describe("with dynamic predecessor support", () => {
             beforeEach(() => {
-                jest.spyOn(SettingsStore, "getValue")
+                vi.spyOn(SettingsStore, "getValue")
                     .mockReset()
                     .mockImplementation((settingName) => settingName === "feature_dynamic_room_predecessors");
             });
@@ -206,18 +238,34 @@ describe("pickFactory", () => {
         it("should return a MessageEventFactory for a UTD event", () => {
             expect(pickFactory(utdEvent, client, false)).toBe(MessageEventFactory);
         });
+
+        it("should not render key verification requests which do not involve the current user", () => {
+            const event = makeVerificationRequestEvent({
+                sender: "@alice:example.com",
+                to: "@bob:example.com",
+            });
+
+            expect(pickFactory(event, client, false)).toBeUndefined();
+        });
     });
 });
 
 describe("renderTile", () => {
     let client: MatrixClient;
+    let originalRenderMessage: typeof ModuleApi.instance.customComponents.renderMessage;
 
     beforeEach(() => {
         client = createTestClient();
+        originalRenderMessage = ModuleApi.instance.customComponents.renderMessage;
+    });
+
+    afterEach(() => {
+        ModuleApi.instance.customComponents.renderMessage = originalRenderMessage;
+        vi.restoreAllMocks();
     });
 
     it("rendering a tile defers to the module API", () => {
-        ModuleApi.instance.customComponents.renderMessage = jest.fn();
+        ModuleApi.instance.customComponents.renderMessage = vi.fn();
 
         const messageEvent = mkEvent({
             event: true,
@@ -240,7 +288,7 @@ describe("renderTile", () => {
     });
 
     it("rendering a tile for a message of unknown type defers to the module API", () => {
-        ModuleApi.instance.customComponents.renderMessage = jest.fn();
+        ModuleApi.instance.customComponents.renderMessage = vi.fn();
 
         const messageEvent = mkEvent({
             event: true,
@@ -258,4 +306,108 @@ describe("renderTile", () => {
             mxEvent: messageEvent,
         });
     });
+
+    it("renders an incoming key verification request with the wrapped shared-components view", () => {
+        const sender = "@alice:example.com";
+        const room = new Room(roomId, client, client.getSafeUserId());
+        vi.spyOn(room, "getMember").mockImplementation((userId: string) => {
+            if (userId === sender) return { name: "Alice" } as RoomMember;
+            return null;
+        });
+        vi.mocked(client.getRoom).mockReturnValue(room);
+
+        const verificationRequestEvent = makeVerificationRequestEvent({
+            sender,
+            to: client.getUserId()!,
+        });
+
+        const tile = renderTile(
+            TimelineRenderingType.Room,
+            { mxEvent: verificationRequestEvent, showHiddenEvents: false },
+            client,
+        );
+        if (!tile) throw new Error("Expected a key verification request tile");
+        const { getByText } = render(tile, withClientContextRenderOptions(client));
+
+        expect(getByText("Alice wants to verify")).toBeVisible();
+        expect(getByText("Alice (@alice:example.com)")).toBeVisible();
+    });
+
+    it("renders an outgoing key verification request with the wrapped shared-components view", () => {
+        const recipient = "@alice:example.com";
+        const room = new Room(roomId, client, client.getSafeUserId());
+        vi.spyOn(room, "getMember").mockImplementation((userId: string) => {
+            if (userId === recipient) return { name: "Alice" } as RoomMember;
+            return null;
+        });
+        vi.mocked(client.getRoom).mockReturnValue(room);
+
+        const verificationRequestEvent = makeVerificationRequestEvent({
+            sender: client.getUserId()!,
+            to: recipient,
+        });
+
+        const tile = renderTile(
+            TimelineRenderingType.Room,
+            { mxEvent: verificationRequestEvent, showHiddenEvents: false },
+            client,
+        );
+        if (!tile) throw new Error("Expected a key verification request tile");
+        const { getByText } = render(tile, withClientContextRenderOptions(client));
+
+        expect(getByText("You sent a verification request")).toBeInTheDocument();
+        expect(getByText("Alice (@alice:example.com)")).toBeInTheDocument();
+    });
+
+    it("throws when a key verification request tile is rendered without a client context", () => {
+        vi.spyOn(console, "error").mockImplementation(() => {});
+        const verificationRequestEvent = makeVerificationRequestEvent({
+            sender: client.getUserId()!,
+            to: "@alice:example.com",
+        });
+
+        const tile = renderTile(
+            TimelineRenderingType.Room,
+            { mxEvent: verificationRequestEvent, showHiddenEvents: false },
+            client,
+        );
+        if (!tile) throw new Error("Expected a key verification request tile");
+
+        expect(() => render(tile)).toThrow("Attempting to render verification request without a client context!");
+    });
+
+    it("renders room avatar events with the wrapped shared-components view", () => {
+        const room = new Room(roomId, client, client.getSafeUserId());
+        room.name = "General";
+        room.currentState.setStateEvents([
+            new MatrixEvent({
+                type: EventType.RoomCreate,
+                state_key: "",
+                room_id: room.roomId,
+                sender: client.getUserId()!,
+                content: {
+                    creator: client.getUserId()!,
+                    room_version: "9",
+                },
+            }),
+        ]);
+        vi.mocked(client.getRoom).mockReturnValue(room);
+        vi.spyOn(DMRoomMap, "shared").mockReturnValue({
+            getUserIdForRoomId: vi.fn().mockReturnValue(null),
+        } as unknown as DMRoomMap);
+        vi.spyOn(MatrixClientPeg, "safeGet").mockReturnValue(client);
+        const roomAvatarEvent = makeRoomAvatarEvent();
+        roomAvatarEvent.sender = { name: "Alice" } as MatrixEvent["sender"];
+
+        const tile = renderTile(
+            TimelineRenderingType.Room,
+            { mxEvent: roomAvatarEvent, showHiddenEvents: false },
+            client,
+        );
+        if (!tile) throw new Error("Expected a room avatar event tile");
+        const { getByText, getByRole } = render(tile, withClientContextRenderOptions(client));
+
+        expect(getByText("Alice changed the room avatar to")).toBeInTheDocument();
+        expect(getByRole("button", { name: "Alice changed the avatar for General" })).toBeInTheDocument();
+    });
 });
diff --git a/apps/web/src/events/EventTileFactory.tsx b/apps/web/src/events/EventTileFactory.tsx
index 0ba3cf7932..82970ec52d 100644
--- a/apps/web/src/events/EventTileFactory.tsx
+++ b/apps/web/src/events/EventTileFactory.tsx
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX, useEffect } from "react";
+import React, { type JSX, useContext, useEffect } from "react";
 import {
     type MatrixEvent,
     EventType,
@@ -20,7 +20,12 @@ import {
 import {
     EncryptionEventView,
     HiddenBodyView,
+    MJitsiWidgetEventView,
+    MKeyVerificationRequestView,
+    RoomAvatarEventView,
+    RootCallTileView,
     TextualEventView,
+    ViewSourceEventView,
     useCreateAutoDisposedViewModel,
 } from "@element-hq/web-shared-components";
 
@@ -32,24 +37,27 @@ import MessageEvent from "../components/views/messages/MessageEvent";
 import LegacyCallEvent from "../components/views/messages/LegacyCallEvent";
 import { CallEvent } from "../components/views/messages/CallEvent";
 import { RoomPredecessorTile } from "../components/views/messages/RoomPredecessorTile";
-import RoomAvatarEvent from "../components/views/messages/RoomAvatarEvent";
+import RoomAvatar from "../components/views/avatars/RoomAvatar";
 import { WIDGET_LAYOUT_EVENT_TYPE } from "../stores/widgets/WidgetLayoutStore";
 import { ALL_RULE_TYPES } from "../mjolnir/BanList";
 import { MatrixClientPeg } from "../MatrixClientPeg";
 import { useMatrixClientContext } from "../contexts/MatrixClientContext";
-import MKeyVerificationRequest from "../components/views/messages/MKeyVerificationRequest";
 import { WidgetType } from "../widgets/WidgetType";
-import MJitsiWidgetEvent from "../components/views/messages/MJitsiWidgetEvent";
 import { hasText } from "../TextForEvent";
 import { getMessageModerationState, MessageModerationState } from "../utils/EventUtils";
-import ViewSourceEvent from "../components/views/messages/ViewSourceEvent";
 import { shouldDisplayAsBeaconTile } from "../utils/beacon/timeline";
 import { type IBodyProps } from "../components/views/messages/IBodyProps";
 import { ModuleApi } from "../modules/Api";
 import { EncryptionEventViewModel } from "../viewmodels/room/timeline/event-tile/EncryptionEventViewModel";
+import { MJitsiWidgetEventViewModel } from "../viewmodels/room/timeline/event-tile/MJitsiWidgetEventViewModel";
+import { MKeyVerificationRequestViewModel } from "../viewmodels/room/timeline/event-tile/MKeyVerificationRequestViewModel";
+import { RoomAvatarEventViewModel } from "../viewmodels/room/timeline/event-tile/RoomAvatarEventViewModel";
 import { TextualEventViewModel } from "../viewmodels/room/timeline/event-tile/TextualEventViewModel";
 import { HiddenBodyViewModel } from "../viewmodels/room/timeline/event-tile/body/HiddenBodyViewModel";
+import { ViewSourceEventViewModel } from "../viewmodels/room/timeline/event-tile/body/ViewSourceEventViewModel";
 import { ElementCallEventType } from "../call-types";
+import { RootCallTileViewModel } from "../viewmodels/room/timeline/event-tile/call/RootCallTileViewModel";
+import { SDKContext } from "../contexts/SDKContext";
 
 // Subset of EventTile's IProps plus some mixins
 export interface EventTileTypeProps extends Pick<
@@ -84,7 +92,7 @@ const LegacyCallEventFactory: Factory<FactoryProps & { callEventGrouper: LegacyC
 const CallEventFactory: Factory = (ref, props) => <CallEvent ref={ref} {...props} />;
 export const TextualEventFactory: Factory = (ref, props) => {
     const vm = new TextualEventViewModel(props);
-    return <TextualEventView vm={vm} />;
+    return <TextualEventView vm={vm} className="mx_TextualEvent" />;
 };
 function EncryptionEventWrappedView({ mxEvent, ref }: IBodyProps): JSX.Element {
     const cli = useMatrixClientContext();
@@ -95,7 +103,21 @@ function EncryptionEventWrappedView({ mxEvent, ref }: IBodyProps): JSX.Element {
 const EncryptionEventFactory: Factory = (ref, props) => {
     return <EncryptionEventWrappedView ref={ref} {...props} />;
 };
-const VerificationReqFactory: Factory = (_ref, props) => <MKeyVerificationRequest {...props} />;
+function MKeyVerificationRequestWrappedView({ mxEvent, ref }: IBodyProps): JSX.Element {
+    const cli = useMatrixClientContext();
+    if (!cli) {
+        throw new Error("Attempting to render verification request without a client context!");
+    }
+
+    const vm = useCreateAutoDisposedViewModel(() => new MKeyVerificationRequestViewModel({ mxEvent, cli }));
+
+    useEffect(() => {
+        vm.setEvent(mxEvent);
+    }, [mxEvent, vm]);
+
+    return <MKeyVerificationRequestView vm={vm} ref={ref} className="mx_EventTileBubble mx_cryptoEvent" />;
+}
+const VerificationReqFactory: Factory = (ref, props) => <MKeyVerificationRequestWrappedView ref={ref} {...props} />;
 function HiddenBodyWrappedView({ mxEvent, ref }: IBodyProps): JSX.Element {
     const vm = useCreateAutoDisposedViewModel(() => new HiddenBodyViewModel({ mxEvent }));
 
@@ -107,9 +129,89 @@ function HiddenBodyWrappedView({ mxEvent, ref }: IBodyProps): JSX.Element {
 }
 const HiddenEventFactory: Factory = (ref, props) => <HiddenBodyWrappedView ref={ref} {...props} />;
 
+function ViewSourceEventWrappedView({ mxEvent, ref }: IBodyProps): JSX.Element {
+    const cli = useMatrixClientContext();
+    const vm = useCreateAutoDisposedViewModel(() => new ViewSourceEventViewModel({ mxEvent, cli }));
+
+    useEffect(() => {
+        vm.setProps({ cli, mxEvent });
+    }, [cli, mxEvent, vm]);
+
+    return (
+        <ViewSourceEventView
+            vm={vm}
+            ref={ref}
+            className="mx_ViewSourceEvent mx_EventTile_content"
+            expandedClassName="mx_ViewSourceEvent_expanded"
+        />
+    );
+}
+
+function MJitsiWidgetEventWrappedView({ mxEvent, ref }: IBodyProps): JSX.Element {
+    const cli = useMatrixClientContext();
+    const vm = useCreateAutoDisposedViewModel(() => new MJitsiWidgetEventViewModel({ mxEvent, cli }));
+
+    useEffect(() => {
+        vm.setEvent(mxEvent);
+    }, [mxEvent, vm]);
+
+    return <MJitsiWidgetEventView vm={vm} ref={ref} className="mx_EventTileBubble" />;
+}
+
+function RoomAvatarEventWrappedView({ mxEvent, ref }: IBodyProps): JSX.Element {
+    const cli = useMatrixClientContext() ?? MatrixClientPeg.safeGet();
+    const vm = useCreateAutoDisposedViewModel(() => new RoomAvatarEventViewModel({ mxEvent, cli }));
+
+    useEffect(() => {
+        vm.setEvent(mxEvent);
+    }, [mxEvent, vm]);
+
+    const roomId = mxEvent.getRoomId();
+    const room = roomId ? cli.getRoom(roomId) : null;
+
+    return (
+        <RoomAvatarEventView
+            vm={vm}
+            ref={ref}
+            renderAvatar={(snapshot) => (
+                <RoomAvatar
+                    room={room ?? undefined}
+                    size="14px"
+                    oobData={{
+                        avatarUrl: snapshot.avatarUrl,
+                        name: snapshot.roomName,
+                    }}
+                />
+            )}
+        />
+    );
+}
+const RoomAvatarEventFactory: Factory = (ref, props) => <RoomAvatarEventWrappedView ref={ref} {...props} />;
+
+function CallStartedTileViewWrapped({ mxEvent, getRelationsForEvent }: IBodyProps): JSX.Element {
+    const sdkContext = useContext(SDKContext);
+    const cli = useMatrixClientContext();
+    const vm = useCreateAutoDisposedViewModel(
+        () =>
+            new RootCallTileViewModel({
+                mxEvent,
+                getRelationsForEvent,
+                cli,
+                callStore: sdkContext.callStore,
+                latestRtcNotificationEventStore: sdkContext.latestRtcNotificationEventStore,
+                legacyCallHandler: sdkContext.legacyCallHandler,
+            }),
+    );
+    return <RootCallTileView vm={vm} />;
+}
+
+export const CallStartedEventFactory: Factory = (ref, props) => {
+    return <CallStartedTileViewWrapped {...props} />;
+};
+
 // These factories are exported for reference comparison against pickFactory()
-export const JitsiEventFactory: Factory = (ref, props) => <MJitsiWidgetEvent ref={ref} {...props} />;
-export const JSONEventFactory: Factory = (ref, props) => <ViewSourceEvent ref={ref} {...props} />;
+export const JSONEventFactory: Factory = (ref, props) => <ViewSourceEventWrappedView ref={ref} {...props} />;
+export const JitsiEventFactory: Factory = (ref, props) => <MJitsiWidgetEventWrappedView ref={ref} {...props} />;
 export const RoomCreateEventFactory: Factory = (_ref, props) => <RoomPredecessorTile {...props} />;
 
 const EVENT_TILE_TYPES = new Map<string, Factory>([
@@ -120,6 +222,7 @@ const EVENT_TILE_TYPES = new Map<string, Factory>([
     [M_POLL_END.name, MessageEventFactory],
     [M_POLL_END.altName, MessageEventFactory],
     [EventType.CallInvite, LegacyCallEventFactory as Factory], // note that this requires a special factory type
+    [EventType.RTCNotification, CallStartedEventFactory],
 ]);
 
 const STATE_EVENT_TILE_TYPES = new Map<string, Factory>([
@@ -128,7 +231,7 @@ const STATE_EVENT_TILE_TYPES = new Map<string, Factory>([
     [EventType.RoomCreate, RoomCreateEventFactory],
     [EventType.RoomMember, TextualEventFactory],
     [EventType.RoomName, TextualEventFactory],
-    [EventType.RoomAvatar, (ref, props) => <RoomAvatarEvent ref={ref} {...props} />],
+    [EventType.RoomAvatar, RoomAvatarEventFactory],
     [EventType.RoomThirdPartyInvite, TextualEventFactory],
     [EventType.RoomHistoryVisibility, TextualEventFactory],
     [EventType.RoomTopic, TextualEventFactory],
diff --git a/apps/web/src/events/RelationsHelper.ts b/apps/web/src/events/RelationsHelper.ts
deleted file mode 100644
index 83f1eeb264..0000000000
--- a/apps/web/src/events/RelationsHelper.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import {
-    type MatrixClient,
-    type MatrixEvent,
-    MatrixEventEvent,
-    type RelationType,
-    TypedEventEmitter,
-    type Relations,
-    RelationsEvent,
-} from "matrix-js-sdk/src/matrix";
-
-import { type IDestroyable } from "../utils/IDestroyable";
-
-export enum RelationsHelperEvent {
-    Add = "add",
-}
-
-interface EventMap {
-    [RelationsHelperEvent.Add]: (event: MatrixEvent) => void;
-}
-
-/**
- * Helper class that manages a specific event type relation for an event.
- * Just create an instance and listen for new events for that relation.
- * Optionally receive the current events by calling emitCurrent().
- * Clean up everything by calling destroy().
- */
-export class RelationsHelper extends TypedEventEmitter<RelationsHelperEvent, EventMap> implements IDestroyable {
-    private relations?: Relations;
-    private eventId: string;
-    private roomId: string;
-
-    public constructor(
-        private event: MatrixEvent,
-        private relationType: RelationType,
-        private relationEventType: string,
-        private client: MatrixClient,
-    ) {
-        super();
-
-        const eventId = event.getId();
-
-        if (!eventId) {
-            throw new Error("unable to create RelationsHelper: missing event ID");
-        }
-
-        const roomId = event.getRoomId();
-
-        if (!roomId) {
-            throw new Error("unable to create RelationsHelper: missing room ID");
-        }
-
-        this.eventId = eventId;
-        this.roomId = roomId;
-        this.setUpRelations();
-    }
-
-    private setUpRelations = (): void => {
-        this.setRelations();
-
-        if (this.relations) {
-            this.relations.on(RelationsEvent.Add, this.onRelationsAdd);
-        } else {
-            this.event.once(MatrixEventEvent.RelationsCreated, this.onRelationsCreated);
-        }
-    };
-
-    private onRelationsCreated = (): void => {
-        this.setRelations();
-
-        if (this.relations) {
-            this.relations.on(RelationsEvent.Add, this.onRelationsAdd);
-            this.emitCurrent();
-        } else {
-            this.event.once(MatrixEventEvent.RelationsCreated, this.onRelationsCreated);
-        }
-    };
-
-    private setRelations(): void {
-        const room = this.client.getRoom(this.event.getRoomId());
-        this.relations = room
-            ?.getUnfilteredTimelineSet()
-            ?.relations?.getChildEventsForEvent(this.eventId, this.relationType, this.relationEventType);
-    }
-
-    private onRelationsAdd = (event: MatrixEvent): void => {
-        this.emit(RelationsHelperEvent.Add, event);
-    };
-
-    public emitCurrent(): void {
-        this.relations?.getRelations()?.forEach((e) => this.emit(RelationsHelperEvent.Add, e));
-    }
-
-    public getCurrent(): MatrixEvent[] {
-        return this.relations?.getRelations() || [];
-    }
-
-    /**
-     * Fetches all related events from the server and emits them.
-     */
-    public async emitFetchCurrent(): Promise<void> {
-        let nextBatch: string | undefined = undefined;
-
-        do {
-            const response = await this.client.relations(
-                this.roomId,
-                this.eventId,
-                this.relationType,
-                this.relationEventType,
-                {
-                    from: nextBatch,
-                    limit: 50,
-                },
-            );
-            nextBatch = response?.nextBatch ?? undefined;
-            response?.events.forEach((e) => this.emit(RelationsHelperEvent.Add, e));
-        } while (nextBatch);
-    }
-
-    public destroy(): void {
-        this.removeAllListeners();
-        this.event.off(MatrixEventEvent.RelationsCreated, this.onRelationsCreated);
-
-        if (this.relations) {
-            this.relations.off(RelationsEvent.Add, this.onRelationsAdd);
-        }
-    }
-}
diff --git a/apps/web/test/unit-tests/events/forward/getForwardableEvent-test.ts b/apps/web/src/events/forward/getForwardableEvent.test.ts
similarity index 92%
rename from apps/web/test/unit-tests/events/forward/getForwardableEvent-test.ts
rename to apps/web/src/events/forward/getForwardableEvent.test.ts
index 346fb09318..1f40355315 100644
--- a/apps/web/test/unit-tests/events/forward/getForwardableEvent-test.ts
+++ b/apps/web/src/events/forward/getForwardableEvent.test.ts
@@ -6,22 +6,25 @@ 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 { EventType, MatrixEvent, MsgType } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import { getForwardableEvent } from "../../../../src/events";
+import { vi, describe, it, expect } from "vitest";
+import { EventType, MatrixEvent, MsgType } from "matrix-js-sdk/src/matrix";
 import {
     getMockClientWithEventEmitter,
     makeBeaconEvent,
     makeBeaconInfoEvent,
     makePollStartEvent,
     makeRoomWithBeacons,
-} from "../../../test-utils";
+} from "test-utils";
+
+import { getForwardableEvent } from "./getForwardableEvent";
 
 describe("getForwardableEvent()", () => {
     const userId = "@alice:server.org";
     const roomId = "!room:server.org";
     const client = getMockClientWithEventEmitter({
-        getRoom: jest.fn(),
+        getRoom: vi.fn(),
     });
 
     it("returns the event for a room message", () => {
diff --git a/apps/web/src/events/index.ts b/apps/web/src/events/index.ts
index 2fbbc1c600..d085cd9b18 100644
--- a/apps/web/src/events/index.ts
+++ b/apps/web/src/events/index.ts
@@ -7,4 +7,3 @@ Please see LICENSE files in the repository root for full details.
 */
 
 export { getForwardableEvent } from "./forward/getForwardableEvent";
-export { getShareableLocationEvent } from "./location/getShareableLocationEvent";
diff --git a/apps/web/test/unit-tests/events/location/getShareableLocationEvent-test.ts b/apps/web/src/events/location/getShareableLocationEvent.test.ts
similarity index 92%
rename from apps/web/test/unit-tests/events/location/getShareableLocationEvent-test.ts
rename to apps/web/src/events/location/getShareableLocationEvent.test.ts
index ceea748302..1f51d89ca1 100644
--- a/apps/web/test/unit-tests/events/location/getShareableLocationEvent-test.ts
+++ b/apps/web/src/events/location/getShareableLocationEvent.test.ts
@@ -6,22 +6,25 @@ 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 { EventType, MatrixEvent, MsgType } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import { getShareableLocationEvent } from "../../../../src/events";
+import { vi, describe, it, expect } from "vitest";
+import { EventType, MatrixEvent, MsgType } from "matrix-js-sdk/src/matrix";
 import {
     getMockClientWithEventEmitter,
     makeBeaconEvent,
     makeBeaconInfoEvent,
     makeLocationEvent,
     makeRoomWithBeacons,
-} from "../../../test-utils";
+} from "test-utils";
+
+import { getShareableLocationEvent } from "./getShareableLocationEvent";
 
 describe("getShareableLocationEvent()", () => {
     const userId = "@alice:server.org";
     const roomId = "!room:server.org";
     const client = getMockClientWithEventEmitter({
-        getRoom: jest.fn(),
+        getRoom: vi.fn(),
     });
 
     it("returns null for a non-location event", () => {
diff --git a/apps/web/test/unit-tests/favicon-test.ts b/apps/web/src/favicon.test.ts
similarity index 84%
rename from apps/web/test/unit-tests/favicon-test.ts
rename to apps/web/src/favicon.test.ts
index 32c1ea9966..7208e4debb 100644
--- a/apps/web/test/unit-tests/favicon-test.ts
+++ b/apps/web/src/favicon.test.ts
@@ -6,15 +6,18 @@ 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 "jest-canvas-mock";
+// @vitest-environment happy-dom
 
-import Favicon from "../../src/favicon";
+import { vi, describe, it, expect, beforeEach } from "vitest";
+import "vitest-canvas-mock";
 
-jest.useFakeTimers();
+import Favicon from "./favicon";
+
+vi.useFakeTimers();
 
 describe("Favicon", () => {
     beforeEach(() => {
-        jest.restoreAllMocks();
+        vi.restoreAllMocks();
         document.getElementsByTagName("head")[0]?.remove();
         const head = document.createElement("head");
         window.document.documentElement.prepend(head);
@@ -30,14 +33,14 @@ describe("Favicon", () => {
     it("should draw a badge if called with a non-zero value", () => {
         const favicon = new Favicon();
         favicon.badge(123);
-        jest.runAllTimers();
+        vi.runAllTimers();
         expect(favicon["context"].__getDrawCalls()).toMatchSnapshot();
     });
 
     it("should clear a badge if called with a zero value", () => {
         const favicon = new Favicon();
         favicon.badge(123);
-        jest.runAllTimers();
+        vi.runAllTimers();
         favicon.badge(0);
         expect(favicon["context"].__getDrawCalls()).toMatchSnapshot();
     });
@@ -48,7 +51,7 @@ describe("Favicon", () => {
         const favicon = new Favicon();
         const originalLink = window.document.querySelector("link");
         favicon.badge(123);
-        jest.runAllTimers();
+        vi.runAllTimers();
         const newLink = window.document.querySelector("link");
         expect(originalLink).not.toStrictEqual(newLink);
     });
@@ -60,9 +63,9 @@ describe("Favicon", () => {
         link.href = "favicon.png";
         head.appendChild(link);
 
-        const spy = jest.spyOn(document, "createElement");
+        const spy = vi.spyOn(document, "createElement");
         const favicon = new Favicon();
-        jest.runAllTimers();
+        vi.runAllTimers();
 
         const img = spy.mock.results[0].value;
         img.onload();
@@ -78,9 +81,9 @@ describe("Favicon", () => {
         link.href = "favicon.png";
         head.appendChild(link);
 
-        const spy = jest.spyOn(document, "createElement");
+        const spy = vi.spyOn(document, "createElement");
         const favicon = new Favicon();
-        jest.runAllTimers();
+        vi.runAllTimers();
 
         const img = spy.mock.results[0].value;
         img.height = 512;
diff --git a/apps/web/src/favicon.ts b/apps/web/src/favicon.ts
index 8d014157f6..a90f09be92 100644
--- a/apps/web/src/favicon.ts
+++ b/apps/web/src/favicon.ts
@@ -182,6 +182,7 @@ export class BadgeOverlayRenderer extends IconRenderer {
                 (blob) => {
                     if (blob) {
                         resolve(blob.arrayBuffer());
+                        return;
                     }
                     reject(new Error("Could not render badge overlay as blob"));
                 },
diff --git a/apps/web/src/hooks/room/useRoomCall.tsx b/apps/web/src/hooks/room/useRoomCall.ts
similarity index 87%
rename from apps/web/src/hooks/room/useRoomCall.tsx
rename to apps/web/src/hooks/room/useRoomCall.ts
index 6737395cb2..d06eb42dcf 100644
--- a/apps/web/src/hooks/room/useRoomCall.tsx
+++ b/apps/web/src/hooks/room/useRoomCall.ts
@@ -8,12 +8,11 @@ Please see LICENSE files in the repository root for full details.
 
 import { type Room } from "matrix-js-sdk/src/matrix";
 import { CallType } from "matrix-js-sdk/src/webrtc/call";
-import { type ReactNode, useCallback, useEffect, useMemo, useState } from "react";
+import { type ReactNode, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { logger as rootLogger } from "matrix-js-sdk/src/logger";
 
 import type React from "react";
-import { useFeatureEnabled, useSettingValue } from "../useSettings";
-import SdkConfig from "../../SdkConfig";
+import { useSettingValue } from "../useSettings";
 import { useEventEmitter, useEventEmitterState } from "../useEventEmitter";
 import { LegacyCallHandlerEvent } from "../../LegacyCallHandler";
 import { useWidgets } from "../../utils/WidgetUtils";
@@ -38,7 +37,8 @@ import { type InteractionName } from "../../PosthogTrackers";
 import { ElementCallMemberEventType } from "../../call-types";
 import { LocalRoom, LocalRoomState } from "../../models/LocalRoom";
 import { useScopedRoomContext } from "../../contexts/ScopedRoomContext";
-import { SdkContextClass } from "../../contexts/SDKContext";
+import { SDKContext } from "../../contexts/SDKContext.ts";
+import SdkConfig from "../../SdkConfig";
 
 const logger = rootLogger.getChild("useRoomCall");
 
@@ -107,14 +107,16 @@ export const useRoomCall = (
     showVideoCallButton: boolean;
     showVoiceCallButton: boolean;
 } => {
+    const sdkContext = useContext(SDKContext);
     const roomViewStore = useScopedRoomContext("roomViewStore").roomViewStore;
     // settings
-    const groupCallsEnabled = useFeatureEnabled("feature_group_calls");
     const widgetsFeatureEnabled = useSettingValue(UIFeature.Widgets);
     const voipFeatureEnabled = useSettingValue(UIFeature.Voip);
-    const useElementCallExclusively = useMemo(() => {
+    const enableLegacyCallsVoip = useSettingValue("enableLegacyCallsVoip");
+    const sdkConfigEcOnly = useMemo(() => {
         return SdkConfig.get("element_call").use_exclusively;
     }, []);
+    const useElementCallExclusively = !enableLegacyCallsVoip || sdkConfigEcOnly;
 
     const serverIsConfiguredForElementCall = useEventEmitterState(
         CallStore.instance,
@@ -132,9 +134,9 @@ export const useRoomCall = (
     }, [useElementCallExclusively, serverIsConfiguredForElementCall]);
 
     const hasLegacyCall = useEventEmitterState(
-        SdkContextClass.instance.legacyCallHandler,
+        sdkContext.legacyCallHandler,
         LegacyCallHandlerEvent.CallsChanged,
-        () => SdkContextClass.instance.legacyCallHandler.getCallForRoom(room.roomId) !== null,
+        () => sdkContext.legacyCallHandler.getCallForRoom(room.roomId) !== null,
     );
     // settings
     const widgets = useWidgets(room);
@@ -175,13 +177,13 @@ export const useRoomCall = (
     // If there are multiple options, the user will be prompted to choose.
     const callOptions = useMemo((): PlatformCallType[] => {
         const options: PlatformCallType[] = [];
-        if (groupCallsEnabled) {
-            if (hasGroupCall || mayCreateElementCalls) {
-                options.push(PlatformCallType.ElementCall);
-            }
+        if (!SdkConfig.get("element_call").disable) {
             if (useElementCallExclusively && !hasJitsiWidget) {
                 return [PlatformCallType.ElementCall];
             }
+            if (hasGroupCall || mayCreateElementCalls) {
+                options.push(PlatformCallType.ElementCall);
+            }
         }
         if (memberCount <= 2) {
             options.push(PlatformCallType.LegacyCall);
@@ -197,7 +199,6 @@ export const useRoomCall = (
         memberCount,
         mayEditWidgets,
         hasJitsiWidget,
-        groupCallsEnabled,
         hasGroupCall,
         mayCreateElementCalls,
         useElementCallExclusively,
@@ -214,10 +215,10 @@ export const useRoomCall = (
         widget = groupCall?.widget ?? jitsiWidget;
     }
     const updateWidgetState = useCallback((): void => {
-        setCanPinWidget(WidgetLayoutStore.instance.canAddToContainer(room, "top"));
-        setWidgetPinned(!!widget && WidgetLayoutStore.instance.isInContainer(room, widget, "top"));
-    }, [room, widget]);
-    useEventEmitter(WidgetLayoutStore.instance, WidgetLayoutStore.emissionForRoom(room), updateWidgetState);
+        setCanPinWidget(sdkContext.widgetLayoutStore.canAddToContainer(room, "top"));
+        setWidgetPinned(!!widget && sdkContext.widgetLayoutStore.isInContainer(room, widget, "top"));
+    }, [room, widget, sdkContext.widgetLayoutStore]);
+    useEventEmitter(sdkContext.widgetLayoutStore, WidgetLayoutStore.emissionForRoom(room), updateWidgetState);
     useEffect(() => {
         updateWidgetState();
     }, [room, jitsiWidget, groupCall, updateWidgetState]);
@@ -266,25 +267,39 @@ export const useRoomCall = (
         (evt: React.MouseEvent | undefined, callPlatformType: PlatformCallType): void => {
             evt?.stopPropagation();
             if (widget && promptPinWidget) {
-                WidgetLayoutStore.instance.moveToContainer(room, widget, "top");
+                sdkContext.widgetLayoutStore.moveToContainer(room, widget, "top");
             } else {
-                placeCall(room, CallType.Voice, callPlatformType, evt?.shiftKey || undefined, true);
+                placeCall(
+                    sdkContext.legacyCallHandler,
+                    room,
+                    CallType.Voice,
+                    callPlatformType,
+                    evt?.shiftKey || undefined,
+                    true,
+                );
             }
         },
-        [promptPinWidget, room, widget],
+        [promptPinWidget, room, widget, sdkContext.widgetLayoutStore, sdkContext.legacyCallHandler],
     );
     const videoCallClick = useCallback(
         (evt: React.MouseEvent | undefined, callPlatformType: PlatformCallType): void => {
             evt?.stopPropagation();
             if (widget && promptPinWidget) {
-                WidgetLayoutStore.instance.moveToContainer(room, widget, "top");
+                sdkContext.widgetLayoutStore.moveToContainer(room, widget, "top");
             } else {
                 // If we have pressed shift then always skip the lobby, otherwise `undefined` will defer
                 // to the defaults of the call implementation.
-                placeCall(room, CallType.Video, callPlatformType, evt?.shiftKey || undefined, false);
+                placeCall(
+                    sdkContext.legacyCallHandler,
+                    room,
+                    CallType.Video,
+                    callPlatformType,
+                    evt?.shiftKey || undefined,
+                    false,
+                );
             }
         },
-        [widget, promptPinWidget, room],
+        [widget, promptPinWidget, room, sdkContext.widgetLayoutStore, sdkContext.legacyCallHandler],
     );
 
     let voiceCallDisabledReason: string | null;
diff --git a/apps/web/src/hooks/room/useRoomMemberProfile.ts b/apps/web/src/hooks/room/useRoomMemberProfile.ts
index 5b1b4ae125..037ef582d9 100644
--- a/apps/web/src/hooks/room/useRoomMemberProfile.ts
+++ b/apps/web/src/hooks/room/useRoomMemberProfile.ts
@@ -6,12 +6,65 @@ 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 RoomMember } from "matrix-js-sdk/src/matrix";
+import { type Room, type RoomMember } from "matrix-js-sdk/src/matrix";
 import { useMemo } from "react";
 
 import { TimelineRenderingType } from "../../contexts/RoomContext";
 import { useSettingValue } from "../useSettings";
 import { useScopedRoomContext } from "../../contexts/ScopedRoomContext.tsx";
+import { type MemberInfo } from "../../viewmodels/room/timeline/event-tile/DisambiguatedProfileViewModel";
+
+/** Inputs for resolving the room member that should be rendered. */
+export interface RoomMemberProfileResolutionProps {
+    /** Room used to look up the current member, if needed. */
+    room?: Pick<Room, "getMember"> | null;
+    /** Matrix user ID to resolve. */
+    userId?: string;
+    /** Historical member snapshot from the event, if available. */
+    member?: RoomMember | null;
+    /** Whether historical profiles should always be preserved. */
+    forceHistorical?: boolean;
+    /** Whether the current profile should be preferred. */
+    useOnlyCurrentProfiles?: boolean;
+    /** Timeline context used to force current profiles for thread surfaces. */
+    timelineRenderingType?: TimelineRenderingType;
+}
+
+/**
+ * Resolves the room member that should drive profile rendering.
+ */
+export function resolveRoomMemberProfile({
+    room,
+    userId,
+    member: propMember,
+    forceHistorical = false,
+    useOnlyCurrentProfiles = false,
+    timelineRenderingType = TimelineRenderingType.Room,
+}: RoomMemberProfileResolutionProps): RoomMember | undefined | null {
+    const threadContexts = [TimelineRenderingType.ThreadsList, TimelineRenderingType.Thread];
+    if ((!forceHistorical && useOnlyCurrentProfiles) || threadContexts.includes(timelineRenderingType)) {
+        const currentMember = room?.getMember(userId ?? "");
+        if (currentMember) return currentMember;
+    }
+
+    return propMember;
+}
+
+/**
+ * Converts a room member into the plain render data used by shared profile components.
+ */
+export function roomMemberToMemberInfo(member: RoomMember | undefined | null): MemberInfo | null {
+    if (!member) {
+        return null;
+    }
+
+    return {
+        userId: member.userId,
+        roomId: member.roomId,
+        rawDisplayName: member.rawDisplayName,
+        disambiguate: member.disambiguate,
+    };
+}
 
 export function useRoomMemberProfile({
     userId = "",
@@ -26,13 +79,14 @@ export function useRoomMemberProfile({
     const useOnlyCurrentProfiles = useSettingValue("useOnlyCurrentProfiles");
 
     const member = useMemo(() => {
-        const threadContexts = [TimelineRenderingType.ThreadsList, TimelineRenderingType.Thread];
-        if ((!forceHistorical && useOnlyCurrentProfiles) || threadContexts.includes(context.timelineRenderingType)) {
-            const currentMember = context.room?.getMember(userId);
-            if (currentMember) return currentMember;
-        }
-
-        return propMember;
+        return resolveRoomMemberProfile({
+            room: context.room,
+            userId,
+            member: propMember,
+            forceHistorical,
+            useOnlyCurrentProfiles,
+            timelineRenderingType: context.timelineRenderingType,
+        });
     }, [forceHistorical, propMember, context.room, context.timelineRenderingType, useOnlyCurrentProfiles, userId]);
 
     return member;
diff --git a/apps/web/test/unit-tests/hooks/room/useRoomThreadNotifications-test.tsx b/apps/web/src/hooks/room/useRoomThreadNotifications.test.ts
similarity index 82%
rename from apps/web/test/unit-tests/hooks/room/useRoomThreadNotifications-test.tsx
rename to apps/web/src/hooks/room/useRoomThreadNotifications.test.ts
index bf1c5de37a..f450adadef 100644
--- a/apps/web/test/unit-tests/hooks/room/useRoomThreadNotifications-test.tsx
+++ b/apps/web/src/hooks/room/useRoomThreadNotifications.test.ts
@@ -6,14 +6,17 @@ 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 { renderHook } from "jest-matrix-react";
-import { type MatrixClient, NotificationCountType, Room } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import { useRoomThreadNotifications } from "../../../../src/hooks/room/useRoomThreadNotifications";
-import { stubClient } from "../../../test-utils";
-import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
-import { NotificationLevel } from "../../../../src/stores/notifications/NotificationLevel";
-import { populateThread } from "../../../test-utils/threads";
+import { describe, it, expect, beforeEach } from "vitest";
+import { renderHook } from "test-utils-rtl";
+import { type MatrixClient, NotificationCountType, Room } from "matrix-js-sdk/src/matrix";
+import { stubClient } from "test-utils";
+import { populateThread } from "test-utils/threads";
+
+import { useRoomThreadNotifications } from "../../hooks/room/useRoomThreadNotifications";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import { NotificationLevel } from "../../stores/notifications/NotificationLevel";
 
 function render(room: Room) {
     return renderHook(() => useRoomThreadNotifications(room));
diff --git a/apps/web/test/unit-tests/useTopic-test.tsx b/apps/web/src/hooks/room/useTopic.test.tsx
similarity index 84%
rename from apps/web/test/unit-tests/useTopic-test.tsx
rename to apps/web/src/hooks/room/useTopic.test.tsx
index 093bd82658..c509503cca 100644
--- a/apps/web/test/unit-tests/useTopic-test.tsx
+++ b/apps/web/src/hooks/room/useTopic.test.tsx
@@ -6,13 +6,16 @@ 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.
 */
 
+// @vitest-environment happy-dom
+
+import { describe, it, expect } from "vitest";
 import React from "react";
 import { Room } from "matrix-js-sdk/src/matrix";
-import { act, render, screen } from "jest-matrix-react";
+import { act, render, screen } from "test-utils-rtl";
+import { mkEvent, stubClient } from "test-utils";
 
-import { useTopic } from "../../src/hooks/room/useTopic";
-import { mkEvent, stubClient } from "../test-utils";
-import { MatrixClientPeg } from "../../src/MatrixClientPeg";
+import { useTopic } from "./useTopic";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
 
 describe("useTopic", () => {
     it("should display the room topic", () => {
diff --git a/apps/web/test/unit-tests/hooks/useDebouncedCallback-test.tsx b/apps/web/src/hooks/spotlight/useDebouncedCallback.test.ts
similarity index 78%
rename from apps/web/test/unit-tests/hooks/useDebouncedCallback-test.tsx
rename to apps/web/src/hooks/spotlight/useDebouncedCallback.test.ts
index 5d0e03b930..1fa2218354 100644
--- a/apps/web/test/unit-tests/hooks/useDebouncedCallback-test.tsx
+++ b/apps/web/src/hooks/spotlight/useDebouncedCallback.test.ts
@@ -6,13 +6,16 @@ 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 { renderHook } from "jest-matrix-react";
+// @vitest-environment happy-dom
 
-import { useDebouncedCallback } from "../../../src/hooks/spotlight/useDebouncedCallback";
+import { vi, describe, it, expect, beforeAll, afterAll } from "vitest";
+import { renderHook } from "test-utils-rtl";
+
+import { useDebouncedCallback } from "./useDebouncedCallback";
 
 describe("useDebouncedCallback", () => {
-    beforeAll(() => jest.useFakeTimers());
-    afterAll(() => jest.useRealTimers());
+    beforeAll(() => vi.useFakeTimers());
+    afterAll(() => vi.useRealTimers());
 
     function render(enabled: boolean, callback: (...params: any[]) => void, params: any[]) {
         return renderHook(({ enabled, callback, params }) => useDebouncedCallback(enabled, callback, params), {
@@ -27,15 +30,15 @@ describe("useDebouncedCallback", () => {
     it("should be able to handle empty parameters", async () => {
         // When
         const params: any[] = [];
-        const callback = jest.fn();
+        const callback = vi.fn();
         render(true, callback, params);
-        jest.advanceTimersByTime(1);
+        vi.advanceTimersByTime(1);
 
         // Then
         expect(callback).toHaveBeenCalledTimes(0);
 
         // When
-        jest.advanceTimersByTime(500);
+        vi.advanceTimersByTime(500);
 
         // Then
         expect(callback).toHaveBeenCalledTimes(1);
@@ -44,9 +47,9 @@ describe("useDebouncedCallback", () => {
     it("should call the callback with the parameters", async () => {
         // When
         const params = ["USER NAME"];
-        const callback = jest.fn();
+        const callback = vi.fn();
         render(true, callback, params);
-        jest.advanceTimersByTime(500);
+        vi.advanceTimersByTime(500);
 
         // Then
         expect(callback).toHaveBeenCalledTimes(1);
@@ -56,12 +59,12 @@ describe("useDebouncedCallback", () => {
     it("should call the callback with the parameters when parameters change during the timeout", async () => {
         // When
         const params = ["USER NAME"];
-        const callback = jest.fn();
+        const callback = vi.fn();
         const { rerender } = render(true, callback, []);
 
-        jest.advanceTimersByTime(1);
+        vi.advanceTimersByTime(1);
         rerender({ enabled: true, callback, params });
-        jest.advanceTimersByTime(500);
+        vi.advanceTimersByTime(500);
 
         // Then
         expect(callback).toHaveBeenCalledTimes(1);
@@ -71,12 +74,12 @@ describe("useDebouncedCallback", () => {
     it("should handle multiple parameters", async () => {
         // When
         const params = [4, 8, 15, 16, 23, 42];
-        const callback = jest.fn();
+        const callback = vi.fn();
         const { rerender } = render(true, callback, []);
 
-        jest.advanceTimersByTime(1);
+        vi.advanceTimersByTime(1);
         rerender({ enabled: true, callback, params });
-        jest.advanceTimersByTime(500);
+        vi.advanceTimersByTime(500);
 
         // Then
         expect(callback).toHaveBeenCalledTimes(1);
@@ -100,17 +103,17 @@ describe("useDebouncedCallback", () => {
             "USER NAM",
             "USER NAME",
         ];
-        const callback = jest.fn();
+        const callback = vi.fn();
 
         const { rerender } = render(true, callback, []);
-        jest.advanceTimersByTime(1);
+        vi.advanceTimersByTime(1);
 
         for (const query of queries) {
             rerender({ enabled: true, callback, params: [query] });
-            jest.advanceTimersByTime(50);
+            vi.advanceTimersByTime(50);
         }
 
-        jest.advanceTimersByTime(500);
+        vi.advanceTimersByTime(500);
 
         // Then
         const query = queries[queries.length - 1];
@@ -135,16 +138,16 @@ describe("useDebouncedCallback", () => {
             "USER NAM",
             "USER NAME",
         ];
-        const callback = jest.fn();
+        const callback = vi.fn();
 
         const { rerender } = render(true, callback, []);
-        jest.advanceTimersByTime(1);
+        vi.advanceTimersByTime(1);
         for (const query of queries) {
             rerender({ enabled: true, callback, params: [query] });
-            jest.advanceTimersByTime(200);
+            vi.advanceTimersByTime(200);
         }
 
-        jest.advanceTimersByTime(500);
+        vi.advanceTimersByTime(500);
 
         // Then
         const query = queries[queries.length - 1];
@@ -169,16 +172,16 @@ describe("useDebouncedCallback", () => {
             "USER NAM",
             "USER NAME",
         ];
-        const callback = jest.fn();
+        const callback = vi.fn();
 
         const { rerender } = render(false, callback, []);
-        jest.advanceTimersByTime(1);
+        vi.advanceTimersByTime(1);
         for (const query of queries) {
             rerender({ enabled: false, callback, params: [query] });
-            jest.advanceTimersByTime(200);
+            vi.advanceTimersByTime(200);
         }
 
-        jest.advanceTimersByTime(500);
+        vi.advanceTimersByTime(500);
 
         // Then
         expect(callback).toHaveBeenCalledTimes(0);
diff --git a/apps/web/src/hooks/spotlight/useDebouncedCallback.ts b/apps/web/src/hooks/spotlight/useDebouncedCallback.ts
index 26edb3c68c..8972dca1df 100644
--- a/apps/web/src/hooks/spotlight/useDebouncedCallback.ts
+++ b/apps/web/src/hooks/spotlight/useDebouncedCallback.ts
@@ -8,26 +8,27 @@ Please see LICENSE files in the repository root for full details.
 
 import { useEffect } from "react";
 
-const DEBOUNCE_TIMEOUT = 100;
+const DEFAULT_DEBOUNCE_TIMEOUT = 100;
 
 export function useDebouncedCallback<T extends any[]>(
     enabled: boolean,
     callback: (...params: T) => unknown,
     params: T,
+    timeout = DEFAULT_DEBOUNCE_TIMEOUT,
 ): void {
     useEffect(() => {
-        let handle: number | null = null;
+        let handle: ReturnType<typeof globalThis.setTimeout> | null = null;
         const doSearch = (): void => {
             handle = null;
             callback(...params);
         };
         if (enabled !== false) {
-            handle = window.setTimeout(doSearch, DEBOUNCE_TIMEOUT);
+            handle = globalThis.setTimeout(doSearch, timeout);
             return () => {
                 if (handle) {
                     clearTimeout(handle);
                 }
             };
         }
-    }, [enabled, callback, params]);
+    }, [enabled, callback, params, timeout]);
 }
diff --git a/apps/web/src/hooks/useAsyncRefreshMemo.ts b/apps/web/src/hooks/useAsyncRefreshMemo.ts
index a1845ac816..12f4360d04 100644
--- a/apps/web/src/hooks/useAsyncRefreshMemo.ts
+++ b/apps/web/src/hooks/useAsyncRefreshMemo.ts
@@ -16,7 +16,7 @@ type Fn<T> = () => Promise<T>;
  * @param fn function to memoize
  * @param deps React hooks dependencies for the function
  * @param initialValue initial value
- * @return tuple of cached value and refresh callback
+ * @returns tuple of cached value and refresh callback
  */
 export function useAsyncRefreshMemo<T>(fn: Fn<T>, deps: DependencyList, initialValue: T): [T, () => void];
 export function useAsyncRefreshMemo<T>(fn: Fn<T>, deps: DependencyList, initialValue?: T): [T | undefined, () => void];
@@ -34,7 +34,7 @@ export function useAsyncRefreshMemo<T>(fn: Fn<T>, deps: DependencyList, initialV
         return () => {
             discard = true;
         };
-    }, deps); // eslint-disable-line react-hooks/exhaustive-deps,react-compiler/react-compiler
+    }, deps); // eslint-disable-line react-hooks/exhaustive-deps
     useEffect(refresh, [refresh]);
     return [value, refresh];
 }
diff --git a/apps/web/src/hooks/useEventEmitter.ts b/apps/web/src/hooks/useEventEmitter.ts
index 12bb57a1ee..dc71257a78 100644
--- a/apps/web/src/hooks/useEventEmitter.ts
+++ b/apps/web/src/hooks/useEventEmitter.ts
@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import { useRef, useEffect, useState, useCallback, type DependencyList } from "react";
 import { type ListenerMap, type TypedEventEmitter } from "matrix-js-sdk/src/matrix";
 
+// oxlint-disable-next-line no-restricted-imports
 import type { EventEmitter } from "events";
 
 type Handler = (...args: any[]) => void;
@@ -160,7 +161,7 @@ export function useEventEmitterAsyncState<T, Events extends string, Arguments ex
                 rerunArgs.push(args);
                 return;
             }
-            running = true; // eslint-disable-line react-hooks/exhaustive-deps
+            running = true;
             // Note: We need to use .then notation instead of async/await,
             // because async/await would cause this function to return a
             // promise, which `useEffect` doesn't like.
@@ -177,7 +178,7 @@ export function useEventEmitterAsyncState<T, Events extends string, Arguments ex
                     }
                 });
         },
-        [fn, ...deps], // eslint-disable-line react-compiler/react-compiler
+        [fn, ...deps], // eslint-disable-line react-hooks/exhaustive-deps
     );
 
     // re-run when the emitter changes
@@ -189,4 +190,5 @@ export function useEventEmitterAsyncState<T, Events extends string, Arguments ex
 /**
  * Indicates that the callback for `useEventEmitterAsyncState` is not changing the value of the state.
  */
+// oxlint-disable-next-line typescript/no-extraneous-class
 export class NoChange {}
diff --git a/apps/web/src/hooks/useHasOtherVerifiedDevices.ts b/apps/web/src/hooks/useHasOtherVerifiedDevices.ts
new file mode 100644
index 0000000000..58c7a9db82
--- /dev/null
+++ b/apps/web/src/hooks/useHasOtherVerifiedDevices.ts
@@ -0,0 +1,56 @@
+/*
+Copyright 2026 Element Creations 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 Device, type MatrixClient } from "matrix-js-sdk/src/matrix";
+import { type CryptoApi } from "matrix-js-sdk/src/crypto-api";
+
+import { useAsyncMemo } from "./useAsyncMemo.ts";
+import { asyncSome } from "../utils/arrays";
+
+/**
+ * Check whether the user has other verified devices, not counting dehydrated devices.
+ */
+export async function hasOtherVerifiedDevices(
+    ownUserId: string,
+    ownDeviceId: string,
+    crypto: CryptoApi | undefined,
+): Promise<boolean | null> {
+    if (!crypto) return null;
+    const userDevices: Iterable<Device> = (await crypto.getUserDeviceInfo([ownUserId])).get(ownUserId)?.values() ?? [];
+
+    return asyncSome(userDevices, async (device) => {
+        // Ignore our own device.
+        if (device.deviceId === ownDeviceId) return false;
+
+        // Ignore dehydrated devices. MSC3814 proposes that devices
+        // should set a `dehydrated` flag in the device key.
+        if (device.dehydrated) return false;
+
+        // Ignore devices without an identity key.
+        if (!device.getIdentityKey()) return false;
+
+        const verificationStatus = await crypto.getDeviceVerificationStatus(ownUserId, device.deviceId);
+        return !!verificationStatus?.signedByOwner;
+    });
+}
+
+/**
+ * Hook to check whether the user has other verified devices, not counting
+ * dehydrated devices.
+ */
+export function useHasOtherVerifiedDevices(client: MatrixClient): boolean | null | undefined {
+    return useAsyncMemo(
+        async () => {
+            const ownUserId = client.getUserId()!;
+            const ownDeviceId = client.getDeviceId()!;
+            const crypto = client.getCrypto();
+            return await hasOtherVerifiedDevices(ownUserId, ownDeviceId, crypto);
+        },
+        [],
+        undefined,
+    );
+}
diff --git a/apps/web/src/hooks/useHover.ts b/apps/web/src/hooks/useHover.ts
deleted file mode 100644
index 1a8aecd942..0000000000
--- a/apps/web/src/hooks/useHover.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { useState } from "react";
-
-export default function useHover(
-    ignoreHover: (ev: React.MouseEvent) => boolean,
-): [boolean, { onMouseOver: () => void; onMouseLeave: () => void; onMouseMove: (ev: React.MouseEvent) => void }] {
-    const [hovered, setHoverState] = useState(false);
-
-    const props = {
-        onMouseOver: () => setHoverState(true),
-        onMouseLeave: () => setHoverState(false),
-        onMouseMove: (ev: React.MouseEvent): void => {
-            setHoverState(!ignoreHover(ev));
-        },
-    };
-
-    return [hovered, props];
-}
diff --git a/apps/web/src/hooks/useIsEncrypted.ts b/apps/web/src/hooks/useIsEncrypted.ts
index f5209ff065..7d9510a620 100644
--- a/apps/web/src/hooks/useIsEncrypted.ts
+++ b/apps/web/src/hooks/useIsEncrypted.ts
@@ -25,7 +25,7 @@ export async function isRoomEncrypted(room: Room, cryptoApi: CryptoApi): Promise
     if (room instanceof LocalRoom) {
         // For local room check the state.
         // The crypto check fails because the room ID is not valid (it is a local id)
-        return (room as LocalRoom).isEncryptionEnabled();
+        return room.isEncryptionEnabled();
     }
 
     return await cryptoApi.isEncryptionEnabledInRoom(room.roomId);
diff --git a/apps/web/src/hooks/useKeyBackupStatus.ts b/apps/web/src/hooks/useKeyBackupStatus.ts
new file mode 100644
index 0000000000..be90c6cf78
--- /dev/null
+++ b/apps/web/src/hooks/useKeyBackupStatus.ts
@@ -0,0 +1,66 @@
+/*
+Copyright 2026 Element Creations 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 MatrixClient } from "matrix-js-sdk/src/matrix";
+
+import { useAsyncMemo } from "./useAsyncMemo.ts";
+
+/**
+ * The status of the user's key backup.
+ */
+export enum BackupStatus {
+    /** we're trying to figure out if there is an active backup */
+    LOADING,
+
+    /** crypto is disabled in this client (so no need to back up) */
+    NO_CRYPTO,
+
+    /** Key backup is active and working */
+    BACKUP_ACTIVE,
+
+    /** there is a backup on the server but we are not backing up to it */
+    SERVER_BACKUP_BUT_DISABLED,
+
+    /** Key backup is set up but recovery (4s) is not */
+    BACKUP_NO_RECOVERY,
+
+    /** backup is not set up locally and there is no backup on the server */
+    NO_BACKUP,
+
+    /** there was an error fetching the state */
+    ERROR,
+}
+
+/**
+ * Get the status of the user's key backup.
+ */
+export function useKeyBackupStatus(client: MatrixClient): BackupStatus {
+    return useAsyncMemo(
+        async () => {
+            const crypto = client.getCrypto();
+            if (!crypto) return BackupStatus.NO_CRYPTO;
+
+            try {
+                if ((await crypto.getActiveSessionBackupVersion()) !== null) {
+                    if (await crypto.isSecretStorageReady()) {
+                        return BackupStatus.BACKUP_ACTIVE;
+                    } else {
+                        return BackupStatus.BACKUP_NO_RECOVERY;
+                    }
+                }
+
+                // backup is not active. see if there is a backup version on the server we ought to back up to.
+                const backupInfo = await crypto.getKeyBackupInfo();
+                return backupInfo ? BackupStatus.SERVER_BACKUP_BUT_DISABLED : BackupStatus.NO_BACKUP;
+            } catch {
+                return BackupStatus.ERROR;
+            }
+        },
+        [],
+        BackupStatus.LOADING,
+    );
+}
diff --git a/apps/web/test/unit-tests/hooks/useLatestResult-test.tsx b/apps/web/src/hooks/useLatestResult.test.ts
similarity index 87%
rename from apps/web/test/unit-tests/hooks/useLatestResult-test.tsx
rename to apps/web/src/hooks/useLatestResult.test.ts
index 74848b0b9d..db32d3d290 100644
--- a/apps/web/test/unit-tests/hooks/useLatestResult-test.tsx
+++ b/apps/web/src/hooks/useLatestResult.test.ts
@@ -6,14 +6,17 @@ 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 { renderHook, type RenderHookResult } from "jest-matrix-react";
+// @vitest-environment happy-dom
 
-import { useLatestResult } from "../../../src/hooks/useLatestResult";
+import { vi, describe, it, expect, beforeEach } from "vitest";
+import { renderHook, type RenderHookResult } from "test-utils-rtl";
+
+import { useLatestResult } from "./useLatestResult";
 
 // All tests use fake timers throughout, comments will show the elapsed time in ms
-jest.useFakeTimers();
+vi.useFakeTimers();
 
-const mockSetter = jest.fn();
+const mockSetter = vi.fn();
 
 beforeEach(() => {
     mockSetter.mockClear();
@@ -39,7 +42,7 @@ describe("renderhook tests", () => {
         expect(mockSetter).not.toHaveBeenCalled();
 
         // advance timer until the timeout elapses, check we have called the setter
-        jest.advanceTimersToNextTimer();
+        vi.advanceTimersToNextTimer();
         expect(mockSetter).toHaveBeenCalledTimes(1);
         expect(mockSetter).toHaveBeenLastCalledWith(query.result);
     });
@@ -54,13 +57,13 @@ describe("renderhook tests", () => {
         simulateRequest(hookResult, fastQuery);
 
         // advance to fastQuery response, check the setter call
-        jest.advanceTimersToNextTimer();
+        vi.advanceTimersToNextTimer();
         expect(mockSetter).toHaveBeenCalledTimes(1);
         expect(mockSetter).toHaveBeenLastCalledWith(fastQuery.result);
 
         // advance time to slowQuery response, check the setter has _not_ been
         // called again and that the result is still from the fast query
-        jest.advanceTimersToNextTimer();
+        vi.advanceTimersToNextTimer();
         expect(mockSetter).toHaveBeenCalledTimes(1);
         expect(mockSetter).toHaveBeenLastCalledWith(fastQuery.result);
     });
@@ -75,23 +78,23 @@ describe("renderhook tests", () => {
 
         // ELAPSED: 0ms, no queries sent
         simulateRequest(hookResult, query1);
-        jest.advanceTimersByTime(100);
+        vi.advanceTimersByTime(100);
 
         // ELAPSED: 100ms, query1 sent, no responses
         expect(mockSetter).not.toHaveBeenCalled();
         simulateRequest(hookResult, query2);
-        jest.advanceTimersByTime(70);
+        vi.advanceTimersByTime(70);
 
         // ELAPSED: 170ms, query1 and query2 sent, no responses
         expect(mockSetter).not.toHaveBeenCalled();
         simulateRequest(hookResult, query3);
-        jest.advanceTimersByTime(70);
+        vi.advanceTimersByTime(70);
 
         // ELAPSED: 240ms, all queries sent, responses for query1 and query2
         expect(mockSetter).not.toHaveBeenCalled();
 
         // ELAPSED: 360ms, all queries sent, all queries have responses
-        jest.advanceTimersByTime(120);
+        vi.advanceTimersByTime(120);
         expect(mockSetter).toHaveBeenLastCalledWith(query3.result);
     });
 
@@ -104,17 +107,17 @@ describe("renderhook tests", () => {
 
         // ELAPSED: 0ms, no queries sent
         simulateRequest(hookResult, query1);
-        jest.advanceTimersByTime(5);
+        vi.advanceTimersByTime(5);
 
         // ELAPSED: 5ms, query1 sent, response from query1
         expect(mockSetter).toHaveBeenCalledTimes(1);
         expect(mockSetter).toHaveBeenLastCalledWith(query1.result);
         simulateRequest(hookResult, query2);
-        jest.advanceTimersByTime(5);
+        vi.advanceTimersByTime(5);
 
         // ELAPSED: 10ms, query1 and query2 sent, response from query1
         simulateRequest(hookResult, query3);
-        jest.advanceTimersByTime(5);
+        vi.advanceTimersByTime(5);
 
         // ELAPSED: 15ms, all queries sent, responses from query1 and query3
         expect(mockSetter).toHaveBeenCalledTimes(2);
@@ -122,7 +125,7 @@ describe("renderhook tests", () => {
 
         // ELAPSED: 65ms, all queries sent, all queries have responses
         // so check that the result is still from query3, not query2
-        jest.advanceTimersByTime(50);
+        vi.advanceTimersByTime(50);
         expect(mockSetter).toHaveBeenLastCalledWith(query3.result);
     });
 });
diff --git a/apps/web/src/hooks/useLocalStorageState.ts b/apps/web/src/hooks/useLocalStorageState.ts
index be1b79b49f..a99e810f2d 100644
--- a/apps/web/src/hooks/useLocalStorageState.ts
+++ b/apps/web/src/hooks/useLocalStorageState.ts
@@ -17,7 +17,9 @@ const getValue = <T>(key: string, initialValue: T): T => {
     }
 };
 
-// Hook behaving like useState but persisting the value to localStorage. Returns same as useState
+/**
+ * Hook behaving like useState but persisting the value to localStorage. Returns same as useState
+ */
 export const useLocalStorageState = <T>(key: string, initialValue: T): [T, Dispatch<T>] => {
     const lsKey = "mx_" + key;
 
diff --git a/apps/web/test/unit-tests/hooks/useMediaVisible-test.tsx b/apps/web/src/hooks/useMediaVisible.test.ts
similarity index 83%
rename from apps/web/test/unit-tests/hooks/useMediaVisible-test.tsx
rename to apps/web/src/hooks/useMediaVisible.test.ts
index 177573ea9c..0b8d13fcbf 100644
--- a/apps/web/test/unit-tests/hooks/useMediaVisible-test.tsx
+++ b/apps/web/src/hooks/useMediaVisible.test.ts
@@ -5,14 +5,17 @@ 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 { act, renderHook, waitFor } from "jest-matrix-react";
-import { JoinRule, MatrixEvent, type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import { useMediaVisible } from "../../../src/hooks/useMediaVisible";
-import { createTestClient, mkStubRoom, withClientContextRenderOptions } from "../../test-utils";
-import { type MediaPreviewConfig, MediaPreviewValue } from "../../../src/@types/media_preview";
-import MediaPreviewConfigController from "../../../src/settings/controllers/MediaPreviewConfigController";
-import SettingsStore from "../../../src/settings/SettingsStore";
+import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
+import { act, renderHook, waitFor } from "test-utils-rtl";
+import { JoinRule, MatrixEvent, type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
+import { createTestClient, mkStubRoom, withClientContextRenderOptions } from "test-utils";
+
+import { useMediaVisible } from "./useMediaVisible";
+import { type MediaPreviewConfig, MediaPreviewValue } from "../@types/media_preview";
+import MediaPreviewConfigController from "../settings/controllers/MediaPreviewConfigController";
+import SettingsStore from "../settings/SettingsStore";
 
 const EVENT_ID = "$fibble:example.org";
 const ROOM_ID = "!foobar:example.org";
@@ -43,9 +46,9 @@ describe("useMediaVisible", () => {
     beforeEach(() => {
         matrixClient = createTestClient();
         room = mkStubRoom(ROOM_ID, undefined, matrixClient);
-        matrixClient.getRoom = jest.fn().mockReturnValue(room);
+        matrixClient.getRoom = vi.fn().mockReturnValue(room);
         const origFn = SettingsStore.getValue;
-        jest.spyOn(SettingsStore, "getValue").mockImplementation((setting, ...args) => {
+        vi.spyOn(SettingsStore, "getValue").mockImplementation((setting, ...args) => {
             if (setting === "mediaPreviewConfig") {
                 return mediaPreviewConfig;
             }
@@ -54,7 +57,7 @@ describe("useMediaVisible", () => {
     });
 
     afterEach(() => {
-        jest.restoreAllMocks();
+        vi.restoreAllMocks();
     });
 
     it("should display media by default", () => {
@@ -86,7 +89,7 @@ describe("useMediaVisible", () => {
         "should display media when media previews are Private and the join rule is %s",
         (rule) => {
             mediaPreviewConfig.media_previews = MediaPreviewValue.Private;
-            room.currentState.getJoinRule = jest.fn().mockReturnValue(rule);
+            room.currentState.getJoinRule = vi.fn().mockReturnValue(rule);
             const [visible] = render().result.current;
             expect(visible).toEqual(true);
         },
@@ -96,7 +99,7 @@ describe("useMediaVisible", () => {
         "should hide media when media previews are Private and the join rule is %s",
         (rule) => {
             mediaPreviewConfig.media_previews = MediaPreviewValue.Private;
-            room.currentState.getJoinRule = jest.fn().mockReturnValue(rule);
+            room.currentState.getJoinRule = vi.fn().mockReturnValue(rule);
             const [visible] = render().result.current;
             expect(visible).toEqual(false);
         },
diff --git a/apps/web/test/unit-tests/hooks/useNotificationSettings-test.tsx b/apps/web/src/hooks/useNotificationSettings.test.ts
similarity index 83%
rename from apps/web/test/unit-tests/hooks/useNotificationSettings-test.tsx
rename to apps/web/src/hooks/useNotificationSettings.test.ts
index f8d2047e9b..de4f9d0784 100644
--- a/apps/web/test/unit-tests/hooks/useNotificationSettings-test.tsx
+++ b/apps/web/src/hooks/useNotificationSettings.test.ts
@@ -6,18 +6,22 @@ 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 { waitFor, renderHook } from "jest-matrix-react";
-import { type IPushRules, type MatrixClient, PushRuleKind, RuleId } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import { useNotificationSettings } from "../../../src/hooks/useNotificationSettings";
-import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
+import { vi, describe, it, expect, beforeEach } from "vitest";
+import { waitFor, renderHook } from "test-utils-rtl";
+import { type IPushRules, type MatrixClient, PushRuleKind, RuleId } from "matrix-js-sdk/src/matrix";
+import { stubClient } from "test-utils";
+
+import { useNotificationSettings } from "./useNotificationSettings";
+import { MatrixClientPeg } from "../MatrixClientPeg";
 import {
     DefaultNotificationSettings,
     type NotificationSettings,
-} from "../../../src/models/notificationsettings/NotificationSettings";
-import { StandardActions } from "../../../src/notifications/StandardActions";
-import { RoomNotifState } from "../../../src/RoomNotifs";
-import { stubClient } from "../../test-utils";
+} from "../models/notificationsettings/NotificationSettings";
+import { StandardActions } from "../notifications/StandardActions";
+import { RoomNotifState } from "../RoomNotifs";
+import samplePushRules from "../../test/unit-tests/models/notificationsettings/pushrules_sample.json" with { type: "json" };
 
 const expectedModel: NotificationSettings = {
     globalMute: false,
@@ -42,20 +46,16 @@ const expectedModel: NotificationSettings = {
     },
     keywords: ["justjann3", "justj4nn3", "justj4nne", "Janne", "J4nne", "Jann3", "jann3", "j4nne", "janne"],
 };
+const pushRules = samplePushRules as IPushRules;
 
 describe("useNotificationSettings", () => {
     let cli: MatrixClient;
-    let pushRules: IPushRules;
-
-    beforeAll(async () => {
-        pushRules = (await import("../models/notificationsettings/pushrules_sample.json")) as IPushRules;
-    });
 
     beforeEach(() => {
         stubClient();
         cli = MatrixClientPeg.safeGet();
-        cli.getPushRules = jest.fn(cli.getPushRules).mockResolvedValue(pushRules);
-        cli.supportsIntentionalMentions = jest.fn(cli.supportsIntentionalMentions).mockReturnValue(false);
+        cli.getPushRules = vi.fn(cli.getPushRules).mockResolvedValue(pushRules);
+        cli.supportsIntentionalMentions = vi.fn(cli.supportsIntentionalMentions).mockReturnValue(false);
     });
 
     it("correctly parses model", async () => {
@@ -66,13 +66,13 @@ describe("useNotificationSettings", () => {
     });
 
     it("correctly generates change calls", async () => {
-        const addPushRule = jest.fn(cli.addPushRule);
+        const addPushRule = vi.fn(cli.addPushRule);
         cli.addPushRule = addPushRule;
-        const deletePushRule = jest.fn(cli.deletePushRule);
+        const deletePushRule = vi.fn(cli.deletePushRule);
         cli.deletePushRule = deletePushRule;
-        const setPushRuleEnabled = jest.fn(cli.setPushRuleEnabled);
+        const setPushRuleEnabled = vi.fn(cli.setPushRuleEnabled);
         cli.setPushRuleEnabled = setPushRuleEnabled;
-        const setPushRuleActions = jest.fn(cli.setPushRuleActions);
+        const setPushRuleActions = vi.fn(cli.setPushRuleActions);
         cli.setPushRuleActions = setPushRuleActions;
 
         const { result } = renderHook(() => useNotificationSettings(cli));
diff --git a/apps/web/src/hooks/useNotificationSettings.tsx b/apps/web/src/hooks/useNotificationSettings.ts
similarity index 100%
rename from apps/web/src/hooks/useNotificationSettings.tsx
rename to apps/web/src/hooks/useNotificationSettings.ts
diff --git a/apps/web/src/hooks/usePermalink.ts b/apps/web/src/hooks/usePermalink.ts
index 146c44cdfe..00e22b423a 100644
--- a/apps/web/src/hooks/usePermalink.ts
+++ b/apps/web/src/hooks/usePermalink.ts
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import { type MatrixEvent, type Room, type RoomMember } from "matrix-js-sdk/src/matrix";
 
 import { type ButtonEvent } from "../components/views/elements/AccessibleButton";
-import { PillType } from "../components/views/elements/Pill";
+import { PillType } from "../components/views/elements/PillType";
 import { parsePermalink } from "../utils/permalinks/Permalinks";
 import dis from "../dispatcher/dispatcher";
 import { Action } from "../dispatcher/actions";
diff --git a/apps/web/src/hooks/usePermalinkEvent.ts b/apps/web/src/hooks/usePermalinkEvent.ts
index bb95f3b5c0..85adc20dc9 100644
--- a/apps/web/src/hooks/usePermalinkEvent.ts
+++ b/apps/web/src/hooks/usePermalinkEvent.ts
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import { MatrixEvent, type Room } from "matrix-js-sdk/src/matrix";
 import { useEffect, useState } from "react";
 
-import { PillType } from "../components/views/elements/Pill";
+import { PillType } from "../components/views/elements/PillType";
 import { MatrixClientPeg } from "../MatrixClientPeg";
 import { type PermalinkParts } from "../utils/permalinks/PermalinkConstructor";
 
diff --git a/apps/web/src/hooks/usePermalinkMember.ts b/apps/web/src/hooks/usePermalinkMember.ts
index b5e751d28f..f583e418cb 100644
--- a/apps/web/src/hooks/usePermalinkMember.ts
+++ b/apps/web/src/hooks/usePermalinkMember.ts
@@ -9,8 +9,9 @@ Please see LICENSE files in the repository root for full details.
 import { type IMatrixProfile, type MatrixEvent, type Room, RoomMember } from "matrix-js-sdk/src/matrix";
 import { useContext, useEffect, useState } from "react";
 
-import { PillType } from "../components/views/elements/Pill";
-import { SDKContext, type SdkContextClass } from "../contexts/SDKContext";
+import { PillType } from "../components/views/elements/PillType";
+import { SDKContext } from "../contexts/SDKContext";
+import { type SDKContextClass } from "../contexts/SDKContextClass";
 import { type PermalinkParts } from "../utils/permalinks/PermalinkConstructor";
 
 const createMemberFromProfile = (userId: string, profile: IMatrixProfile): RoomMember => {
@@ -22,7 +23,6 @@ const createMemberFromProfile = (userId: string, profile: IMatrixProfile): RoomM
             return { avatar_url: profile.avatar_url };
         },
         getDirectionalContent: function () {
-            // eslint-disable-next-line
             return this.getContent();
         },
     } as MatrixEvent;
@@ -65,7 +65,7 @@ const determineUserId = (
  *          If sharing at least one room with the user, then the result will be the profile fetched via API.
  *          null in all other cases.
  */
-const determineMember = (userId: string, targetRoom: Room, context: SdkContextClass): RoomMember | null => {
+const determineMember = (userId: string, targetRoom: Room, context: SDKContextClass): RoomMember | null => {
     const targetRoomMember = targetRoom.getMember(userId);
 
     if (targetRoomMember) return targetRoomMember;
diff --git a/apps/web/src/hooks/usePermalinkTargetRoom.ts b/apps/web/src/hooks/usePermalinkTargetRoom.ts
index 9de18cc4f8..3df1fa4cb5 100644
--- a/apps/web/src/hooks/usePermalinkTargetRoom.ts
+++ b/apps/web/src/hooks/usePermalinkTargetRoom.ts
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import { type Room } from "matrix-js-sdk/src/matrix";
 import { useEffect, useState } from "react";
 
-import { PillType } from "../components/views/elements/Pill";
+import { PillType } from "../components/views/elements/PillType";
 import { MatrixClientPeg } from "../MatrixClientPeg";
 import { type PermalinkParts } from "../utils/permalinks/PermalinkConstructor";
 
diff --git a/apps/web/src/hooks/usePinnedEvents.ts b/apps/web/src/hooks/usePinnedEvents.ts
index 98f544097b..1d86b7c197 100644
--- a/apps/web/src/hooks/usePinnedEvents.ts
+++ b/apps/web/src/hooks/usePinnedEvents.ts
@@ -16,6 +16,7 @@ import {
     RelationType,
     EventTimeline,
     type MatrixClient,
+    type IRoomTimelineData,
 } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 
@@ -25,6 +26,7 @@ import { useMatrixClientContext } from "../contexts/MatrixClientContext";
 import { useAsyncMemo } from "./useAsyncMemo";
 import PinningUtils from "../utils/PinningUtils";
 import { batch } from "../utils/promise.ts";
+import { filterBoolean } from "../utils/arrays.ts";
 
 /**
  * Get the pinned event IDs from a room.
@@ -176,18 +178,56 @@ async function fetchPinnedEvent(room: Room, pinnedEventId: string, cli: MatrixCl
  * @param room
  * @param pinnedEventIds
  */
-export function useFetchedPinnedEvents(room: Room, pinnedEventIds: string[]): Array<MatrixEvent | null> | null {
+export function useFetchedPinnedEvents(room: Room, pinnedEventIds: string[]): Array<MatrixEvent> {
     const cli = useMatrixClientContext();
 
-    return useAsyncMemo(
+    // Editing a pinned message leaves the pinned ids untouched, and a pinned event fetched from
+    // the server only carries the edits that existed when it was fetched, so a later edit would go
+    // unnoticed. Collect the edits landing on a pinned event, keyed by the event they replace.
+    const [edits, setEdits] = useState(new Map<string, MatrixEvent>());
+    useTypedEventEmitter(
+        room,
+        RoomEvent.Timeline,
+        (
+            event: MatrixEvent,
+            _room: Room | undefined,
+            _toStartOfTimeline: boolean | undefined,
+            removed: boolean,
+            data: IRoomTimelineData,
+        ): void => {
+            // A backfilled edit can be older than the one already applied, so only live ones count.
+            if (removed || !data.liveEvent) return;
+
+            const relation = event.getRelation();
+            if (relation?.rel_type !== RelationType.Replace) return;
+
+            const editedEventId = relation.event_id;
+            if (!editedEventId || !pinnedEventIds.includes(editedEventId)) return;
+            setEdits((edits) => new Map(edits).set(editedEventId, event));
+        },
+    );
+
+    const fetchedEvents = useAsyncMemo(
         () => {
             const fetchPromises = pinnedEventIds.map((eventId) => () => fetchPinnedEvent(room, eventId, cli));
             // Fetch the pinned events in batches of 10
             return batch(fetchPromises, 10);
         },
         [cli, room, pinnedEventIds],
-        null,
+        [],
     );
+    const events = useMemo(() => filterBoolean(fetchedEvents), [fetchedEvents]);
+
+    // Replacing an event notifies whatever is rendering it, which is what refreshes the banner and
+    // the pinned messages card, so it has to happen after the render rather than during it.
+    useEffect(() => {
+        for (const event of events) {
+            const edit = edits.get(event.getId()!);
+            if (edit) event.makeReplaced(edit);
+        }
+    }, [events, edits]);
+
+    return events;
 }
 
 /**
@@ -196,15 +236,7 @@ export function useFetchedPinnedEvents(room: Room, pinnedEventIds: string[]): Ar
  * @param room
  * @param pinnedEventIds
  */
-export function useSortedFetchedPinnedEvents(room: Room, pinnedEventIds: string[]): Array<MatrixEvent | null> {
+export function useSortedFetchedPinnedEvents(room: Room, pinnedEventIds: string[]): Array<MatrixEvent> {
     const pinnedEvents = useFetchedPinnedEvents(room, pinnedEventIds);
-    return useMemo(() => {
-        if (!pinnedEvents) return [];
-
-        return pinnedEvents.sort((a, b) => {
-            if (!a) return -1;
-            if (!b) return 1;
-            return a.getTs() - b.getTs();
-        });
-    }, [pinnedEvents]);
+    return useMemo(() => pinnedEvents.sort((a, b) => a.getTs() - b.getTs()), [pinnedEvents]);
 }
diff --git a/apps/web/test/unit-tests/hooks/useProfileInfo-test.tsx b/apps/web/src/hooks/useProfileInfo.test.ts
similarity index 90%
rename from apps/web/test/unit-tests/hooks/useProfileInfo-test.tsx
rename to apps/web/src/hooks/useProfileInfo.test.ts
index 41e026f169..e0740c053a 100644
--- a/apps/web/test/unit-tests/hooks/useProfileInfo-test.tsx
+++ b/apps/web/src/hooks/useProfileInfo.test.ts
@@ -6,12 +6,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { waitFor, renderHook, act } from "jest-matrix-react";
-import { type EmptyObject, type MatrixClient } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import { useProfileInfo } from "../../../src/hooks/useProfileInfo";
-import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
-import { stubClient } from "../../test-utils/test-utils";
+import { describe, it, expect, beforeEach } from "vitest";
+import { waitFor, renderHook, act } from "test-utils-rtl";
+import { type EmptyObject, type MatrixClient } from "matrix-js-sdk/src/matrix";
+import { stubClient } from "test-utils/test-utils";
+
+import { useProfileInfo } from "./useProfileInfo";
+import { MatrixClientPeg } from "../MatrixClientPeg";
 
 function render() {
     return renderHook(() => useProfileInfo());
diff --git a/apps/web/test/unit-tests/hooks/usePublicRoomDirectory-test.tsx b/apps/web/src/hooks/usePublicRoomDirectory.test.ts
similarity index 89%
rename from apps/web/test/unit-tests/hooks/usePublicRoomDirectory-test.tsx
rename to apps/web/src/hooks/usePublicRoomDirectory.test.ts
index 651e5bf749..51c1936b6e 100644
--- a/apps/web/test/unit-tests/hooks/usePublicRoomDirectory-test.tsx
+++ b/apps/web/src/hooks/usePublicRoomDirectory.test.ts
@@ -6,12 +6,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { waitFor, renderHook, act } from "jest-matrix-react";
-import { type IRoomDirectoryOptions, type MatrixClient } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import { usePublicRoomDirectory } from "../../../src/hooks/usePublicRoomDirectory";
-import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
-import { stubClient } from "../../test-utils/test-utils";
+import { describe, it, expect, beforeEach } from "vitest";
+import { waitFor, renderHook, act } from "test-utils-rtl";
+import { type IRoomDirectoryOptions, type MatrixClient } from "matrix-js-sdk/src/matrix";
+import { stubClient } from "test-utils/test-utils";
+
+import { usePublicRoomDirectory } from "./usePublicRoomDirectory";
+import { MatrixClientPeg } from "../MatrixClientPeg";
 
 function render() {
     return renderHook(() => usePublicRoomDirectory());
diff --git a/apps/web/test/unit-tests/hooks/useRoomCall-test.tsx b/apps/web/src/hooks/useRoomCall.test.ts
similarity index 70%
rename from apps/web/test/unit-tests/hooks/useRoomCall-test.tsx
rename to apps/web/src/hooks/useRoomCall.test.ts
index 53c7e5980f..4c583c72f7 100644
--- a/apps/web/test/unit-tests/hooks/useRoomCall-test.tsx
+++ b/apps/web/src/hooks/useRoomCall.test.ts
@@ -5,10 +5,10 @@ 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 { renderHook, waitFor } from "jest-matrix-react";
-import React from "react";
+// @vitest-environment happy-dom
 
-import { PlatformCallType, useRoomCall } from "../../../src/hooks/room/useRoomCall";
+import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
+import { renderHook, waitFor } from "test-utils-rtl";
 import {
     getMockClientWithEventEmitter,
     mkRoom,
@@ -17,14 +17,14 @@ import {
     mockClientMethodsUser,
     MockEventEmitter,
     setupAsyncStoreWithClient,
-} from "../../test-utils";
-import { ScopedRoomContextProvider } from "../../../src/contexts/ScopedRoomContext";
-import RoomContext, { type RoomContextType } from "../../../src/contexts/RoomContext";
-import { MatrixClientContextProvider } from "../../../src/components/structures/MatrixClientContextProvider";
-import type LegacyCallHandler from "../../../src/LegacyCallHandler";
-import { SdkContextClass } from "../../../src/contexts/SDKContext";
-import SettingsStore from "../../../src/settings/SettingsStore";
-import { CallStore } from "../../../src/stores/CallStore";
+    withContexts,
+} from "test-utils";
+
+import { PlatformCallType, useRoomCall } from "./room/useRoomCall";
+import RoomContext, { type RoomContextType } from "../contexts/RoomContext";
+import type LegacyCallHandler from "../LegacyCallHandler";
+import { CallStore } from "../stores/CallStore";
+import { SDKContextClass } from "../contexts/SDKContextClass";
 
 describe("useRoomCall", () => {
     const client = getMockClientWithEventEmitter({
@@ -32,16 +32,16 @@ describe("useRoomCall", () => {
         ...mockClientMethodsServer(),
         ...mockClientMethodsRooms(),
         matrixRTC: new MockEventEmitter(),
-        _unstable_getRTCTransports: jest.fn().mockResolvedValue([]),
+        _unstable_getRTCTransports: vi.fn().mockResolvedValue([]),
         getCrypto: () => null,
     });
     const room = mkRoom(client, "!test-room");
     // Create a stable room context for this test
     const mockRoomViewStore = {
-        isViewingCall: jest.fn().mockReturnValue(false),
-        on: jest.fn(),
-        off: jest.fn(),
-        emit: jest.fn(),
+        isViewingCall: vi.fn().mockReturnValue(false),
+        on: vi.fn(),
+        off: vi.fn(),
+        emit: vi.fn(),
     };
 
     const roomContext = {
@@ -52,35 +52,27 @@ describe("useRoomCall", () => {
 
     beforeEach(() => {
         const callHandler = {
-            getCallForRoom: jest.fn().mockReturnValue(null),
-            isCallSidebarShown: jest.fn().mockReturnValue(true),
-            addListener: jest.fn(),
-            removeListener: jest.fn(),
-            on: jest.fn(),
-            off: jest.fn(),
+            getCallForRoom: vi.fn().mockReturnValue(null),
+            isCallSidebarShown: vi.fn().mockReturnValue(true),
+            addListener: vi.fn(),
+            removeListener: vi.fn(),
+            on: vi.fn(),
+            off: vi.fn(),
         };
-        jest.spyOn(SdkContextClass.instance, "legacyCallHandler", "get").mockReturnValue(
+        vi.spyOn(SDKContextClass.instance, "legacyCallHandler", "get").mockReturnValue(
             callHandler as unknown as LegacyCallHandler,
         );
-        const origGetValue = SettingsStore.getValue;
-        jest.spyOn(SettingsStore, "getValue").mockImplementation((name, ...params): any => {
-            if (name === "feature_group_calls") return true;
-            return origGetValue(name, ...params);
-        });
     });
 
     afterEach(() => {
-        jest.restoreAllMocks();
+        vi.restoreAllMocks();
     });
 
     function render() {
-        return renderHook(() => useRoomCall(room), {
-            wrapper: ({ children }) => (
-                <MatrixClientContextProvider client={client}>
-                    <ScopedRoomContextProvider {...roomContext}>{children}</ScopedRoomContextProvider>
-                </MatrixClientContextProvider>
-            ),
-        });
+        return renderHook(
+            () => useRoomCall(room),
+            withContexts({ matrixClient: client, roomContext, sdkContext: SDKContextClass.instance }),
+        );
     }
 
     describe("Element Call focus detection", () => {
diff --git a/apps/web/test/unit-tests/hooks/useRoomMembers-test.tsx b/apps/web/src/hooks/useRoomMembers.test.ts
similarity index 92%
rename from apps/web/test/unit-tests/hooks/useRoomMembers-test.tsx
rename to apps/web/src/hooks/useRoomMembers.test.ts
index dc5bf0e318..0d12fdd1fa 100644
--- a/apps/web/test/unit-tests/hooks/useRoomMembers-test.tsx
+++ b/apps/web/src/hooks/useRoomMembers.test.ts
@@ -6,13 +6,16 @@ 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 { waitFor, renderHook, act } from "jest-matrix-react";
+// @vitest-environment happy-dom
+
+import { describe, it, expect, beforeEach } from "vitest";
+import { waitFor, renderHook, act } from "test-utils-rtl";
 import { type MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
+import { stubClient } from "test-utils";
 
-import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
-import { stubClient } from "../../test-utils";
-import { useMyRoomMembership, useRoomMemberCount, useRoomMembers } from "../../../src/hooks/useRoomMembers";
+import { MatrixClientPeg } from "../MatrixClientPeg";
+import { useMyRoomMembership, useRoomMemberCount, useRoomMembers } from "./useRoomMembers";
 
 describe("useRoomMembers", () => {
     function render(room: Room) {
diff --git a/apps/web/src/hooks/useRoomNotificationState.ts b/apps/web/src/hooks/useRoomNotificationState.ts
index b1e1b1b168..7fc72b6ca6 100644
--- a/apps/web/src/hooks/useRoomNotificationState.ts
+++ b/apps/web/src/hooks/useRoomNotificationState.ts
@@ -25,7 +25,6 @@ export const useNotificationState = (room: Room): [RoomNotifState | undefined, (
             setNotificationState(echoChamber.notificationVolume);
         }
     });
-    // eslint-disable-next-line react-compiler/react-compiler
     const setter = useCallback((state: RoomNotifState) => (echoChamber.notificationVolume = state), [echoChamber]);
     return [notificationState, setter];
 };
diff --git a/apps/web/src/hooks/useSpaceResults.ts b/apps/web/src/hooks/useSpaceResults.ts
index d7fb644087..c6844cc86b 100644
--- a/apps/web/src/hooks/useSpaceResults.ts
+++ b/apps/web/src/hooks/useSpaceResults.ts
@@ -29,6 +29,7 @@ export const useSpaceResults = (space: Room | undefined, query: string): [Hierar
         let unmounted = false;
 
         (async (): Promise<void> => {
+            // oxlint-disable-next-line no-unmodified-loop-condition
             while (hierarchy?.canLoadMore && !unmounted && space === hierarchy.root) {
                 await hierarchy.load();
                 if (hierarchy.canLoadMore) hierarchy.load(); // start next load so that the loading attribute is right
diff --git a/apps/web/test/unit-tests/hooks/useUnreadNotifications-test.ts b/apps/web/src/hooks/useUnreadNotifications.test.ts
similarity index 88%
rename from apps/web/test/unit-tests/hooks/useUnreadNotifications-test.ts
rename to apps/web/src/hooks/useUnreadNotifications.test.ts
index 6776efa7c0..89af8e6e8c 100644
--- a/apps/web/test/unit-tests/hooks/useUnreadNotifications-test.ts
+++ b/apps/web/src/hooks/useUnreadNotifications.test.ts
@@ -6,14 +6,17 @@ 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 { renderHook } from "jest-matrix-react";
+// @vitest-environment happy-dom
+
+import { describe, it, expect, beforeEach } from "vitest";
+import { renderHook } from "test-utils-rtl";
 import { EventStatus, NotificationCountType, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
+import { type MatrixClient } from "matrix-js-sdk/src/matrix";
+import { mkEvent, muteRoom, stubClient } from "test-utils";
 
-import type { MatrixClient } from "matrix-js-sdk/src/matrix";
-import { useUnreadNotifications } from "../../../src/hooks/useUnreadNotifications";
-import { NotificationLevel } from "../../../src/stores/notifications/NotificationLevel";
-import { mkEvent, muteRoom, stubClient } from "../../test-utils";
+import { useUnreadNotifications } from "./useUnreadNotifications";
+import { NotificationLevel } from "../stores/notifications/NotificationLevel";
 
 describe("useUnreadNotifications", () => {
     let client: MatrixClient;
diff --git a/apps/web/test/unit-tests/hooks/useUserDirectory-test.tsx b/apps/web/src/hooks/useUserDirectory.test.ts
similarity index 88%
rename from apps/web/test/unit-tests/hooks/useUserDirectory-test.tsx
rename to apps/web/src/hooks/useUserDirectory.test.ts
index 002b9377b4..53ff24a8f6 100644
--- a/apps/web/test/unit-tests/hooks/useUserDirectory-test.tsx
+++ b/apps/web/src/hooks/useUserDirectory.test.ts
@@ -6,12 +6,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { waitFor, renderHook, act } from "jest-matrix-react";
-import { type MatrixClient } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import { useUserDirectory } from "../../../src/hooks/useUserDirectory";
-import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
-import { stubClient } from "../../test-utils";
+import { describe, it, expect, beforeEach } from "vitest";
+import { waitFor, renderHook, act } from "test-utils-rtl";
+import { type MatrixClient } from "matrix-js-sdk/src/matrix";
+import { stubClient } from "test-utils";
+
+import { useUserDirectory } from "./useUserDirectory";
+import { MatrixClientPeg } from "../MatrixClientPeg";
 
 function render() {
     return renderHook(() => useUserDirectory());
diff --git a/apps/web/test/unit-tests/hooks/useUserStatus-test.tsx b/apps/web/src/hooks/useUserStatus.test.ts
similarity index 83%
rename from apps/web/test/unit-tests/hooks/useUserStatus-test.tsx
rename to apps/web/src/hooks/useUserStatus.test.ts
index 5375223909..047977da42 100644
--- a/apps/web/test/unit-tests/hooks/useUserStatus-test.tsx
+++ b/apps/web/src/hooks/useUserStatus.test.ts
@@ -5,31 +5,34 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
-import { renderHook, waitFor } from "jest-matrix-react";
-import { ClientEvent } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import { useUserStatus, userStatusTextWithinMaxLength } from "../../../src/hooks/useUserStatus";
-import { getMockClientWithEventEmitter, mockClientMethodsUser, mockClientMethodsServer } from "../../test-utils";
-import { MatrixClientContextProvider } from "../../../src/components/structures/MatrixClientContextProvider";
-import SettingsStore from "../../../src/settings/SettingsStore";
+import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
+import { renderHook, waitFor } from "test-utils-rtl";
+import { ClientEvent } from "matrix-js-sdk/src/matrix";
+import {
+    getMockClientWithEventEmitter,
+    mockClientMethodsUser,
+    mockClientMethodsServer,
+    withContexts,
+} from "test-utils";
+
+import { useUserStatus } from "./useUserStatus";
+import SettingsStore from "../settings/SettingsStore";
+import { userStatusTextWithinMaxLength } from "../utils/userStatus";
 
 const userId = "@alice:example.com";
 
 const client = getMockClientWithEventEmitter({
     ...mockClientMethodsUser(),
     ...mockClientMethodsServer(),
-    getCrypto: jest.fn().mockReturnValue(null),
-    doesServerSupportExtendedProfiles: jest.fn().mockResolvedValue(true),
-    getExtendedProfileProperty: jest.fn().mockResolvedValue(undefined),
+    getCrypto: vi.fn().mockReturnValue(null),
+    doesServerSupportExtendedProfiles: vi.fn().mockResolvedValue(true),
+    getExtendedProfileProperty: vi.fn().mockResolvedValue(undefined),
 });
 
 function render(uid: string | undefined = userId) {
-    return renderHook(() => useUserStatus(uid), {
-        wrapper: ({ children }) => (
-            <MatrixClientContextProvider client={client}>{children}</MatrixClientContextProvider>
-        ),
-    });
+    return renderHook(() => useUserStatus(uid), withContexts({ matrixClient: client }));
 }
 
 describe("userStatusTextWithinMaxLength", () => {
@@ -48,7 +51,7 @@ describe("userStatusTextWithinMaxLength", () => {
 
 describe("useUserStatus", () => {
     beforeEach(() => {
-        jest.spyOn(SettingsStore, "getValue").mockImplementation((name): any => {
+        vi.spyOn(SettingsStore, "getValue").mockImplementation((name): any => {
             if (name === "feature_user_status") return true;
         });
         client.doesServerSupportExtendedProfiles.mockResolvedValue(true);
@@ -56,11 +59,11 @@ describe("useUserStatus", () => {
     });
 
     afterEach(() => {
-        jest.restoreAllMocks();
+        vi.restoreAllMocks();
     });
 
     it("returns undefined when feature is disabled", async () => {
-        jest.spyOn(SettingsStore, "getValue").mockReturnValue(false);
+        vi.spyOn(SettingsStore, "getValue").mockReturnValue(false);
         const { result } = render();
         expect(result.current).toBeUndefined();
     });
diff --git a/apps/web/src/hooks/useUserStatus.ts b/apps/web/src/hooks/useUserStatus.ts
index e73679c9b4..1e6eeb7957 100644
--- a/apps/web/src/hooks/useUserStatus.ts
+++ b/apps/web/src/hooks/useUserStatus.ts
@@ -6,27 +6,17 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { useEffect, useState } from "react";
-import { ClientEvent, MatrixError } from "matrix-js-sdk/src/matrix";
+import { ClientEvent } from "matrix-js-sdk/src/matrix";
 import { logger as rootLogger } from "matrix-js-sdk/src/logger";
+import { type UserStatus } from "@element-hq/web-shared-components";
 
 import { useMatrixClientContext } from "../contexts/MatrixClientContext";
 import { useTypedEventEmitter } from "./useEventEmitter";
 import { useFeatureEnabled } from "./useSettings";
+import { fetchUserStatus, userStatusFromProfile } from "../utils/userStatus";
 
 const logger = rootLogger.getChild("useUserStatus");
 
-export interface UserStatus {
-    emoji: string;
-    text: string;
-}
-
-const MAX_STATUS_TEXT_BYTES = 256;
-
-export function userStatusTextWithinMaxLength(text: string): boolean {
-    const textEncoder = new TextEncoder();
-    return textEncoder.encode(text).length <= MAX_STATUS_TEXT_BYTES;
-}
-
 /**
  * Hook to get the MSC4426 user status for a given user ID. Returns undefined if the feature is disabled,
  * the user does not have a status, or if there was an error fetching the status.
@@ -37,15 +27,16 @@ export function userStatusTextWithinMaxLength(text: string): boolean {
 export function useUserStatus(userId: string | undefined): UserStatus | undefined {
     const isEnabled = useFeatureEnabled("feature_user_status");
     const matrixClient = useMatrixClientContext();
-    const [rawUserStatus, setRawUserStatus] = useState<unknown>();
+    const [userStatus, setUserStatus] = useState<UserStatus | undefined>();
 
     useTypedEventEmitter(matrixClient, ClientEvent.UserProfileUpdate, (syncedUserId, syncProfile) => {
         if (syncedUserId !== userId) {
             return;
         }
-        if (syncProfile["org.matrix.msc4426.status"]) {
-            setRawUserStatus(syncProfile["org.matrix.msc4426.status"]);
-        }
+
+        setUserStatus(
+            userStatusFromProfile(syncProfile["org.matrix.msc4426.status"], syncProfile["org.matrix.msc4426.call"]),
+        );
     });
     useEffect(() => {
         (async () => {
@@ -53,22 +44,18 @@ export function useUserStatus(userId: string | undefined): UserStatus | undefine
                 return;
             }
             if (!userId) {
-                setRawUserStatus(undefined);
+                setUserStatus(undefined);
                 return;
             }
             if ((await matrixClient.doesServerSupportExtendedProfiles()) === false) {
-                setRawUserStatus(undefined);
+                setUserStatus(undefined);
                 return;
             }
             try {
-                const result = await matrixClient.getExtendedProfileProperty(userId, "org.matrix.msc4426.status");
-                setRawUserStatus(result);
+                const result = await fetchUserStatus(matrixClient, userId);
+                setUserStatus(result);
             } catch (ex) {
-                if (ex instanceof MatrixError && ex.errcode === "M_NOT_FOUND") {
-                    setRawUserStatus(undefined);
-                } else {
-                    logger.warn(`Failed to get userStatus for ${userId}`, ex);
-                }
+                logger.warn(`Failed to get userStatus for ${userId}`, ex);
             }
         })();
     }, [isEnabled, userId, matrixClient]);
@@ -76,23 +63,5 @@ export function useUserStatus(userId: string | undefined): UserStatus | undefine
         return;
     }
 
-    if (typeof rawUserStatus !== "object" || rawUserStatus === null) {
-        logger.warn(`value of "org.matrix.msc4426.status" was not an object for ${userId}`);
-        return;
-    }
-    if ("emoji" in rawUserStatus === false || typeof rawUserStatus.emoji !== "string" || !rawUserStatus.emoji) {
-        logger.warn(`"emoji" property was not a valid string for ${userId}`);
-        return;
-    }
-    if ("text" in rawUserStatus === false || typeof rawUserStatus.text !== "string" || !rawUserStatus.text) {
-        logger.warn(`"text" property was not a valid string for ${userId}`);
-        return;
-    }
-
-    return {
-        emoji: rawUserStatus.emoji,
-        text: userStatusTextWithinMaxLength(rawUserStatus.text)
-            ? rawUserStatus.text
-            : `${rawUserStatus.text.slice(0, MAX_STATUS_TEXT_BYTES)}…`,
-    };
+    return userStatus;
 }
diff --git a/apps/web/test/unit-tests/hooks/useWindowWidth-test.ts b/apps/web/src/hooks/useWindowWidth.test.ts
similarity index 77%
rename from apps/web/test/unit-tests/hooks/useWindowWidth-test.ts
rename to apps/web/src/hooks/useWindowWidth.test.ts
index 9ddc9750e2..010027df24 100644
--- a/apps/web/test/unit-tests/hooks/useWindowWidth-test.ts
+++ b/apps/web/src/hooks/useWindowWidth.test.ts
@@ -6,10 +6,13 @@ 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 { renderHook, act } from "jest-matrix-react";
+// @vitest-environment happy-dom
 
-import UIStore, { UI_EVENTS } from "../../../src/stores/UIStore";
-import { useWindowWidth } from "../../../src/hooks/useWindowWidth";
+import { describe, it, expect, beforeEach } from "vitest";
+import { renderHook, act } from "test-utils-rtl";
+
+import UIStore, { UI_EVENTS } from "../stores/UIStore";
+import { useWindowWidth } from "./useWindowWidth";
 
 describe("useWindowWidth", () => {
     beforeEach(() => {
diff --git a/apps/web/src/i18n/UserFriendlyError.test.ts b/apps/web/src/i18n/UserFriendlyError.test.ts
new file mode 100644
index 0000000000..6e25be09b7
--- /dev/null
+++ b/apps/web/src/i18n/UserFriendlyError.test.ts
@@ -0,0 +1,70 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+// @vitest-environment happy-dom
+
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import fetchMock from "@fetch-mock/vitest";
+
+import SdkConfig from "../../src/SdkConfig";
+import { setLanguage } from "./settings";
+import { UserFriendlyError } from "./UserFriendlyError";
+import { setupTranslationOverridesForTests } from "./__mocks__";
+
+describe("UserFriendlyError", () => {
+    const testErrorMessage = "This email address is already in use (%(email)s)" as TranslationKey;
+    beforeEach(async () => {
+        await setLanguage("en");
+        // Setup some  strings with variable substituations that we can use in the tests.
+        const deOverride = "Diese E-Mail-Adresse wird bereits verwendet (%(email)s)";
+        await setupTranslationOverridesForTests({
+            [testErrorMessage]: {
+                en: testErrorMessage,
+                de: deOverride,
+            },
+        });
+    });
+
+    afterEach(() => {
+        SdkConfig.reset();
+        fetchMock.removeRoute("i18n-override");
+    });
+
+    it("includes English message and localized translated message", async () => {
+        await setLanguage("de");
+
+        const friendlyError = new UserFriendlyError(testErrorMessage, {
+            email: "test@example.com",
+            cause: undefined,
+        });
+
+        // Ensure message is in English so it's readable in the logs
+        expect(friendlyError.message).toStrictEqual("This email address is already in use (test@example.com)");
+        // Ensure the translated message is localized appropriately
+        expect(friendlyError.translatedMessage).toStrictEqual(
+            "Diese E-Mail-Adresse wird bereits verwendet (test@example.com)",
+        );
+    });
+
+    it("includes underlying cause error", async () => {
+        await setLanguage("de");
+
+        const underlyingError = new Error("Fake underlying error");
+        const friendlyError = new UserFriendlyError(testErrorMessage, {
+            email: "test@example.com",
+            cause: underlyingError,
+        });
+
+        expect(friendlyError.cause).toStrictEqual(underlyingError);
+    });
+
+    it("ok to omit the substitution variables and cause object, there just won't be any cause", async () => {
+        const friendlyError = new UserFriendlyError("foo error" as TranslationKey);
+        expect(friendlyError.cause).toBeUndefined();
+    });
+});
diff --git a/apps/web/src/i18n/UserFriendlyError.ts b/apps/web/src/i18n/UserFriendlyError.ts
new file mode 100644
index 0000000000..a247bc7aa1
--- /dev/null
+++ b/apps/web/src/i18n/UserFriendlyError.ts
@@ -0,0 +1,52 @@
+/*
+ * 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 StringVariables } from "@element-hq/web-shared-components";
+import { _t } from "@element-hq/web-shared-components";
+
+export interface ErrorOptions {
+    // Because we're mixing the substitution variables and `cause` into the same object
+    // below, we want them to always explicitly say whether there is an underlying error
+    // or not to avoid typos of "cause" slipping through unnoticed.
+    cause: unknown | undefined;
+}
+
+/**
+ * Used to rethrow an error with a user-friendly translatable message while maintaining
+ * access to that original underlying error. Downstream consumers can display the
+ * `translatedMessage` property in the UI and inspect the underlying error with the
+ * `cause` property.
+ *
+ * The error message will display as English in the console and logs so Element
+ * developers can easily understand the error and find the source in the code. It also
+ * helps tools like Sentry deduplicate the error, or just generally searching in
+ * rageshakes to find all instances regardless of the users locale.
+ *
+ * @param message - The untranslated error message text, e.g "Something went wrong with %(foo)s".
+ * @param substitutionVariablesAndCause - Variable substitutions for the translation and
+ * original cause of the error. If there is no cause, just pass `undefined`, e.g { foo:
+ * 'bar', cause: err || undefined }
+ */
+export class UserFriendlyError extends Error {
+    public readonly translatedMessage: string;
+
+    public constructor(
+        message: TranslationKey,
+        substitutionVariablesAndCause?: Omit<StringVariables, keyof ErrorOptions> | ErrorOptions,
+    ) {
+        // Prevent "Could not find /%\(cause\)s/g in x" logs to the console by removing it from the list
+        const { cause, ...substitutionVariables } = substitutionVariablesAndCause ?? {};
+        const errorOptions = { cause };
+
+        // Create the error with the English version of the message that we want to show up in the logs
+        const englishTranslatedMessage = _t(message, { ...substitutionVariables, locale: "en" });
+        super(englishTranslatedMessage, errorOptions);
+
+        // Also provide a translated version of the error in the users locale to display
+        this.translatedMessage = _t(message, substitutionVariables);
+    }
+}
diff --git a/apps/web/src/i18n/__mocks__/index.ts b/apps/web/src/i18n/__mocks__/index.ts
new file mode 100644
index 0000000000..895aa73c6d
--- /dev/null
+++ b/apps/web/src/i18n/__mocks__/index.ts
@@ -0,0 +1,30 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type TranslationStringsObject } from "@matrix-org/react-sdk-module-api";
+import { vi, beforeAll } from "vitest";
+import fetchMock from "@fetch-mock/vitest";
+
+import SdkConfig from "../../SdkConfig";
+import { registerCustomTranslations } from "../custom";
+
+beforeAll(() => {
+    vi.stubEnv("NODE_ENV", "test");
+});
+
+export async function setupTranslationOverridesForTests(overrides: TranslationStringsObject) {
+    const lookupUrl = "/translations.json";
+
+    SdkConfig.add({
+        custom_translations_url: lookupUrl,
+    });
+    fetchMock.get(lookupUrl, overrides, { name: "i18n-override" });
+    await registerCustomTranslations({
+        testOnlyIgnoreCustomTranslationsCache: true,
+    });
+}
diff --git a/apps/web/src/i18n/browser.test.ts b/apps/web/src/i18n/browser.test.ts
new file mode 100644
index 0000000000..24b8f23e31
--- /dev/null
+++ b/apps/web/src/i18n/browser.test.ts
@@ -0,0 +1,36 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach } from "vitest";
+
+import { getLanguagesFromBrowser } from "./browser";
+
+describe("getLanguagesFromBrowser", () => {
+    beforeEach(() => {
+        vi.restoreAllMocks();
+    });
+
+    it("should return navigator.languages if available", () => {
+        vi.spyOn(window.navigator, "languages", "get").mockReturnValue(["en", "de"]);
+        expect(getLanguagesFromBrowser()).toEqual(["en", "de"]);
+    });
+
+    it("should return navigator.language if available", () => {
+        vi.spyOn(window.navigator, "languages", "get").mockReturnValue([]);
+        vi.spyOn(window.navigator, "language", "get").mockReturnValue("de");
+        expect(getLanguagesFromBrowser()).toEqual(["de"]);
+    });
+
+    it("should return 'en' otherwise", () => {
+        vi.spyOn(window.navigator, "languages", "get").mockReturnValue([]);
+        vi.spyOn(window.navigator, "language", "get").mockReturnValue(undefined as any);
+        expect(getLanguagesFromBrowser()).toEqual(["en"]);
+    });
+});
diff --git a/apps/web/src/i18n/browser.ts b/apps/web/src/i18n/browser.ts
new file mode 100644
index 0000000000..5b0a0e111f
--- /dev/null
+++ b/apps/web/src/i18n/browser.ts
@@ -0,0 +1,21 @@
+/*
+ * 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.
+ */
+
+/**
+ * Query the browser for the user's language preferences
+ */
+export function getLanguagesFromBrowser(): readonly string[] {
+    if (navigator.languages && navigator.languages.length) return navigator.languages;
+    return [navigator.language ?? "en"];
+}
+
+/**
+ * Query the browser for the user's primary language preference
+ */
+export function getLanguageFromBrowser(): string {
+    return getLanguagesFromBrowser()[0];
+}
diff --git a/apps/web/src/i18n/custom.test.ts b/apps/web/src/i18n/custom.test.ts
new file mode 100644
index 0000000000..53aa48b2cf
--- /dev/null
+++ b/apps/web/src/i18n/custom.test.ts
@@ -0,0 +1,91 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+// @vitest-environment happy-dom
+
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import fetchMock from "@fetch-mock/vitest";
+import { type Translation } from "matrix-web-i18n";
+
+import SdkConfig from "../../src/SdkConfig";
+import { _t } from ".";
+import { setLanguage } from "./settings";
+import { setupTranslationOverridesForTests } from "./__mocks__";
+
+describe("registerCustomTranslations", () => {
+    beforeEach(async () => {
+        await setLanguage("en");
+    });
+
+    afterEach(() => {
+        SdkConfig.reset();
+        fetchMock.removeRoute("i18n-override");
+    });
+
+    it("should support overriding translations", async () => {
+        const str: TranslationKey = "power_level|default";
+        const enOverride: Translation = "Visitor";
+        const deOverride: Translation = "Besucher";
+
+        // First test that overrides aren't being used
+        await setLanguage("en");
+        expect(_t(str)).toMatchInlineSnapshot(`"Default"`);
+        await setLanguage("de");
+        expect(_t(str)).toMatchInlineSnapshot(`"Standard"`);
+
+        await setupTranslationOverridesForTests({
+            [str]: {
+                en: enOverride,
+                de: deOverride,
+            },
+        });
+
+        // Now test that they *are* being used
+        await setLanguage("en");
+        expect(_t(str)).toEqual(enOverride);
+
+        await setLanguage("de");
+        expect(_t(str)).toEqual(deOverride);
+    });
+
+    it("should support overriding plural translations", async () => {
+        const str: TranslationKey = "voip|n_people_joined";
+        const enOverride: Translation = {
+            other: "%(count)s people in the call",
+            one: "%(count)s person in the call",
+        };
+        const deOverride: Translation = {
+            other: "%(count)s Personen im Anruf",
+            one: "%(count)s Person im Anruf",
+        };
+
+        // First test that overrides aren't being used
+        await setLanguage("en");
+        expect(_t(str, { count: 1 })).toMatchInlineSnapshot(`"1 person joined"`);
+        expect(_t(str, { count: 5 })).toMatchInlineSnapshot(`"5 people joined"`);
+        await setLanguage("de");
+        expect(_t(str, { count: 1 })).toMatchInlineSnapshot(`"1 Person beigetreten"`);
+        expect(_t(str, { count: 5 })).toMatchInlineSnapshot(`"5 Personen beigetreten"`);
+
+        await setupTranslationOverridesForTests({
+            [str]: {
+                en: enOverride,
+                de: deOverride,
+            },
+        });
+
+        // Now test that they *are* being used
+        await setLanguage("en");
+        expect(_t(str, { count: 1 })).toMatchInlineSnapshot(`"1 person in the call"`);
+        expect(_t(str, { count: 5 })).toMatchInlineSnapshot(`"5 people in the call"`);
+
+        await setLanguage("de");
+        expect(_t(str, { count: 1 })).toMatchInlineSnapshot(`"1 Person im Anruf"`);
+        expect(_t(str, { count: 5 })).toMatchInlineSnapshot(`"5 Personen im Anruf"`);
+    });
+});
diff --git a/apps/web/src/i18n/custom.ts b/apps/web/src/i18n/custom.ts
new file mode 100644
index 0000000000..ac3d7fa328
--- /dev/null
+++ b/apps/web/src/i18n/custom.ts
@@ -0,0 +1,82 @@
+/*
+ * 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 { logger } from "matrix-js-sdk/src/logger";
+import { MapWithDefault } from "matrix-js-sdk/src/utils";
+import _ from "lodash";
+import { type TranslationStringsObject } from "@matrix-org/react-sdk-module-api";
+import { KEY_SEPARATOR, registerTranslations } from "@element-hq/web-shared-components";
+
+import SdkConfig from "../SdkConfig";
+import { ModuleRunner } from "../modules/ModuleRunner";
+
+let cachedCustomTranslations: TranslationStringsObject | undefined;
+let cachedCustomTranslationsExpire = 0; // zero to trigger expiration right away
+
+/**
+ * Any custom modules with translations to load are parsed first, followed by an
+ * optionally defined translations file in the config. If no customization is made,
+ * or the file can't be parsed, no action will be taken.
+ *
+ * This function should be called *after* registering other translations data to
+ * ensure it overrides strings properly.
+ */
+export async function registerCustomTranslations({
+    testOnlyIgnoreCustomTranslationsCache = false,
+}: {
+    testOnlyIgnoreCustomTranslationsCache?: boolean;
+} = {}): Promise<void> {
+    const moduleTranslations = ModuleRunner.instance.allTranslations;
+    doRegisterTranslations(moduleTranslations);
+
+    const lookupUrl = SdkConfig.get().custom_translations_url;
+    if (!lookupUrl) return; // easy - nothing to do
+
+    try {
+        let json: TranslationStringsObject | undefined;
+        if (testOnlyIgnoreCustomTranslationsCache || Date.now() >= cachedCustomTranslationsExpire) {
+            json = (await (await fetch(lookupUrl)).json()) as TranslationStringsObject;
+            cachedCustomTranslations = json;
+
+            // Set expiration to the future, but not too far. Just trying to avoid
+            // repeated, successive, calls to the server rather than anything long-term.
+            cachedCustomTranslationsExpire = Date.now() + 5 * 60 * 1000;
+        } else {
+            json = cachedCustomTranslations;
+        }
+
+        // If the (potentially cached) json is invalid, don't use it.
+        if (!json) return;
+
+        // Finally, register it.
+        doRegisterTranslations(json);
+    } catch (e) {
+        // We consume all exceptions because it's considered non-fatal for custom
+        // translations to break. Most failures will be during initial development
+        // of the json file and not (hopefully) at runtime.
+        logger.warn("Ignoring error while registering custom translations: ", e);
+
+        // Like above: trigger a cache of the json to avoid successive calls.
+        cachedCustomTranslationsExpire = Date.now() + 5 * 60 * 1000;
+    }
+}
+
+function doRegisterTranslations(customTranslations: TranslationStringsObject): void {
+    // We convert the operator-friendly version into something counterpart can consume.
+    // Map: lang → Record: string → translation
+    const langs: MapWithDefault<string, Record<string, string>> = new MapWithDefault(() => ({}));
+    for (const [translationKey, translations] of Object.entries(customTranslations)) {
+        for (const [lang, translation] of Object.entries(translations)) {
+            _.set(langs.getOrCreate(lang), translationKey.split(KEY_SEPARATOR), translation);
+        }
+    }
+
+    // Finally, tell counterpart about our translations
+    for (const [lang, translations] of langs) {
+        registerTranslations(lang, translations);
+    }
+}
diff --git a/apps/web/test/unit-tests/languageHandler-test.tsx b/apps/web/src/i18n/index.test.tsx
similarity index 51%
rename from apps/web/test/unit-tests/languageHandler-test.tsx
rename to apps/web/src/i18n/index.test.tsx
index 95cce791d3..25fa33f65b 100644
--- a/apps/web/test/unit-tests/languageHandler-test.tsx
+++ b/apps/web/src/i18n/index.test.tsx
@@ -6,220 +6,23 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
-import fetchMock from "@fetch-mock/jest";
-import { type Translation } from "matrix-web-i18n";
-import { type TranslationStringsObject } from "@matrix-org/react-sdk-module-api";
+// @vitest-environment happy-dom
 
-import SdkConfig from "../../src/SdkConfig";
+import React from "react";
+import { describe, it, expect, beforeEach } from "vitest";
 import {
-    _t,
-    _tDom,
-    CustomTranslationOptions,
-    getAllLanguagesWithLabels,
-    registerCustomTranslations,
-    setLanguage,
     setMissingEntryGenerator,
     substitute,
     type TranslatedString,
-    UserFriendlyError,
     type IVariables,
     type Tags,
-    getLanguagesFromBrowser,
-} from "../../src/languageHandler";
-import { stubClient } from "../test-utils";
+} from "@element-hq/web-shared-components";
 
-async function setupTranslationOverridesForTests(overrides: TranslationStringsObject) {
-    const lookupUrl = "/translations.json";
-    const fn = (url: string): TranslationStringsObject => {
-        expect(url).toEqual(lookupUrl);
-        return overrides;
-    };
+import { _t, _tDom } from ".";
+import { setLanguage } from "./settings";
+import { stubClient } from "../../test/test-utils";
 
-    SdkConfig.add({
-        custom_translations_url: lookupUrl,
-    });
-    CustomTranslationOptions.lookupFn = fn;
-    await registerCustomTranslations({
-        testOnlyIgnoreCustomTranslationsCache: true,
-    });
-}
-
-describe("languageHandler", () => {
-    beforeEach(async () => {
-        await setLanguage("en");
-    });
-
-    afterEach(() => {
-        SdkConfig.reset();
-        CustomTranslationOptions.lookupFn = undefined;
-    });
-
-    it("should support overriding translations", async () => {
-        const str: TranslationKey = "power_level|default";
-        const enOverride: Translation = "Visitor";
-        const deOverride: Translation = "Besucher";
-
-        // First test that overrides aren't being used
-        await setLanguage("en");
-        expect(_t(str)).toMatchInlineSnapshot(`"Default"`);
-        await setLanguage("de");
-        expect(_t(str)).toMatchInlineSnapshot(`"Standard"`);
-
-        await setupTranslationOverridesForTests({
-            [str]: {
-                en: enOverride,
-                de: deOverride,
-            },
-        });
-
-        // Now test that they *are* being used
-        await setLanguage("en");
-        expect(_t(str)).toEqual(enOverride);
-
-        await setLanguage("de");
-        expect(_t(str)).toEqual(deOverride);
-    });
-
-    it("should support overriding plural translations", async () => {
-        const str: TranslationKey = "voip|n_people_joined";
-        const enOverride: Translation = {
-            other: "%(count)s people in the call",
-            one: "%(count)s person in the call",
-        };
-        const deOverride: Translation = {
-            other: "%(count)s Personen im Anruf",
-            one: "%(count)s Person im Anruf",
-        };
-
-        // First test that overrides aren't being used
-        await setLanguage("en");
-        expect(_t(str, { count: 1 })).toMatchInlineSnapshot(`"1 person joined"`);
-        expect(_t(str, { count: 5 })).toMatchInlineSnapshot(`"5 people joined"`);
-        await setLanguage("de");
-        expect(_t(str, { count: 1 })).toMatchInlineSnapshot(`"1 Person beigetreten"`);
-        expect(_t(str, { count: 5 })).toMatchInlineSnapshot(`"5 Personen beigetreten"`);
-
-        await setupTranslationOverridesForTests({
-            [str]: {
-                en: enOverride,
-                de: deOverride,
-            },
-        });
-
-        // Now test that they *are* being used
-        await setLanguage("en");
-        expect(_t(str, { count: 1 })).toMatchInlineSnapshot(`"1 person in the call"`);
-        expect(_t(str, { count: 5 })).toMatchInlineSnapshot(`"5 people in the call"`);
-
-        await setLanguage("de");
-        expect(_t(str, { count: 1 })).toMatchInlineSnapshot(`"1 Person im Anruf"`);
-        expect(_t(str, { count: 5 })).toMatchInlineSnapshot(`"5 Personen im Anruf"`);
-    });
-
-    describe("UserFriendlyError", () => {
-        const testErrorMessage = "This email address is already in use (%(email)s)" as TranslationKey;
-        beforeEach(async () => {
-            // Setup some  strings with variable substituations that we can use in the tests.
-            const deOverride = "Diese E-Mail-Adresse wird bereits verwendet (%(email)s)";
-            await setupTranslationOverridesForTests({
-                [testErrorMessage]: {
-                    en: testErrorMessage,
-                    de: deOverride,
-                },
-            });
-        });
-
-        it("includes English message and localized translated message", async () => {
-            await setLanguage("de");
-
-            const friendlyError = new UserFriendlyError(testErrorMessage, {
-                email: "test@example.com",
-                cause: undefined,
-            });
-
-            // Ensure message is in English so it's readable in the logs
-            expect(friendlyError.message).toStrictEqual("This email address is already in use (test@example.com)");
-            // Ensure the translated message is localized appropriately
-            expect(friendlyError.translatedMessage).toStrictEqual(
-                "Diese E-Mail-Adresse wird bereits verwendet (test@example.com)",
-            );
-        });
-
-        it("includes underlying cause error", async () => {
-            await setLanguage("de");
-
-            const underlyingError = new Error("Fake underlying error");
-            const friendlyError = new UserFriendlyError(testErrorMessage, {
-                email: "test@example.com",
-                cause: underlyingError,
-            });
-
-            expect(friendlyError.cause).toStrictEqual(underlyingError);
-        });
-
-        it("ok to omit the substitution variables and cause object, there just won't be any cause", async () => {
-            const friendlyError = new UserFriendlyError("foo error" as TranslationKey);
-            expect(friendlyError.cause).toBeUndefined();
-        });
-    });
-
-    describe("getAllLanguagesWithLabels", () => {
-        it("should handle unknown language sanely", async () => {
-            fetchMock.modifyRoute("languages", {
-                response: {
-                    en: "en_EN.json",
-                    de: "de_DE.json",
-                    qq: "qq.json",
-                },
-            });
-            await expect(getAllLanguagesWithLabels()).resolves.toMatchInlineSnapshot(`
-                [
-                  {
-                    "label": "English",
-                    "labelInTargetLanguage": "English",
-                    "value": "en",
-                  },
-                  {
-                    "label": "German",
-                    "labelInTargetLanguage": "Deutsch",
-                    "value": "de",
-                  },
-                  {
-                    "label": "qq",
-                    "labelInTargetLanguage": "qq",
-                    "value": "qq",
-                  },
-                ]
-            `);
-        });
-    });
-
-    describe("getLanguagesFromBrowser", () => {
-        beforeEach(() => {
-            jest.restoreAllMocks();
-        });
-
-        it("should return navigator.languages if available", () => {
-            jest.spyOn(window.navigator, "languages", "get").mockReturnValue(["en", "de"]);
-            expect(getLanguagesFromBrowser()).toEqual(["en", "de"]);
-        });
-
-        it("should return navigator.language if available", () => {
-            jest.spyOn(window.navigator, "languages", "get").mockReturnValue([]);
-            jest.spyOn(window.navigator, "language", "get").mockReturnValue("de");
-            expect(getLanguagesFromBrowser()).toEqual(["de"]);
-        });
-
-        it("should return 'en' otherwise", () => {
-            jest.spyOn(window.navigator, "languages", "get").mockReturnValue([]);
-            jest.spyOn(window.navigator, "language", "get").mockReturnValue(undefined as any);
-            expect(getLanguagesFromBrowser()).toEqual(["en"]);
-        });
-    });
-});
-
-describe("languageHandler JSX", function () {
+describe("languageHandler", function () {
     // See setupLanguage.ts for how we are stubbing out translations to provide fixture data for these tests
     const basicString = "common|rooms";
     const selfClosingTagSub = "Accept <policyLink /> to continue:" as TranslationKey;
@@ -275,16 +78,6 @@ describe("languageHandler JSX", function () {
         ],
     ];
 
-    let oldNodeEnv: string | undefined;
-    beforeAll(() => {
-        oldNodeEnv = process.env.NODE_ENV;
-        process.env.NODE_ENV = "test";
-    });
-
-    afterAll(() => {
-        process.env.NODE_ENV = oldNodeEnv;
-    });
-
     describe("when translations exist in language", () => {
         beforeEach(async () => {
             stubClient();
diff --git a/apps/web/src/i18n/index.ts b/apps/web/src/i18n/index.ts
new file mode 100644
index 0000000000..f7f9a27677
--- /dev/null
+++ b/apps/web/src/i18n/index.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+/**
+ * This file is heavily imported and must be careful not to import anything which imports something else popular,
+ * e.g. SettingsStore as this would cause import cycles.
+ */
+
+export {
+    _t,
+    _td,
+    _tDom,
+    type Tags,
+    type TranslatedString,
+    lookupString,
+    sanitizeForTranslation,
+    getLocale as getCurrentLanguage,
+} from "@element-hq/web-shared-components";
+
+export * from "./UserFriendlyError";
diff --git a/apps/web/src/i18n/languages.ts b/apps/web/src/i18n/languages.ts
new file mode 100644
index 0000000000..89e0c0c741
--- /dev/null
+++ b/apps/web/src/i18n/languages.ts
@@ -0,0 +1,47 @@
+/*
+ * 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 { logger } from "matrix-js-sdk/src/logger";
+
+import { retry } from "../utils/promise";
+
+const i18nFolder = "i18n/";
+
+interface ICounterpartTranslation {
+    [key: string]:
+        | string
+        | {
+              [pluralisation: string]: string;
+          };
+}
+
+/**
+ * Fetch a language file with configurable retry behaviour
+ * @param langPath the name of the language file within the i18n dir
+ * @param num the number of times to retry
+ */
+export async function getLanguageRetry(langPath: string, num = 3): Promise<ICounterpartTranslation> {
+    return retry(
+        () => getLanguage(i18nFolder + langPath),
+        num,
+        (e) => {
+            logger.log("Failed to load i18n", langPath);
+            logger.error(e);
+            return true; // always retry
+        },
+    );
+}
+
+async function getLanguage(langPath: string): Promise<ICounterpartTranslation> {
+    const res = await fetch(langPath, { method: "GET" });
+
+    if (!res.ok) {
+        throw new Error(`Failed to load ${langPath}, got ${res.status}`);
+    }
+
+    return res.json();
+}
diff --git a/apps/web/src/i18n/settings.ts b/apps/web/src/i18n/settings.ts
new file mode 100644
index 0000000000..10dead6d3e
--- /dev/null
+++ b/apps/web/src/i18n/settings.ts
@@ -0,0 +1,57 @@
+/*
+ * 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 { logger } from "matrix-js-sdk/src/logger";
+import { normalizeLanguageKey, getLangsJson, registerTranslations, setLocale } from "@element-hq/web-shared-components";
+
+import SettingsStore from "../settings/SettingsStore";
+import PlatformPeg from "../PlatformPeg";
+import { SettingLevel } from "../settings/SettingLevel";
+import { getLanguageRetry } from "./languages";
+import { getLanguageFromBrowser } from "./browser";
+import { registerCustomTranslations } from "./custom";
+
+export function getUserLanguage(): string {
+    const language = SettingsStore.getValue("language", null, /*excludeDefault:*/ true);
+    if (typeof language === "string" && language !== "") {
+        return language;
+    } else {
+        return normalizeLanguageKey(getLanguageFromBrowser());
+    }
+}
+
+export async function setLanguage(...preferredLangs: string[]): Promise<void> {
+    PlatformPeg.get()?.setLanguage(preferredLangs);
+
+    const availableLanguages = await getLangsJson();
+    let chosenLanguage = preferredLangs.find((lang) => availableLanguages.hasOwnProperty(lang));
+    if (!chosenLanguage) {
+        // Fallback to en_EN if none is found
+        chosenLanguage = "en";
+        logger.error("Unable to find an appropriate language, preferred: ", preferredLangs);
+    }
+
+    const languageData = await getLanguageRetry(availableLanguages[chosenLanguage]);
+
+    registerTranslations(chosenLanguage, languageData);
+    setLocale(chosenLanguage);
+
+    await SettingsStore.setValue("language", null, SettingLevel.DEVICE, chosenLanguage);
+    // Adds a lot of noise to test runs, so disable logging there.
+    // oxlint-disable-next-line node/no-process-env
+    if (process.env.NODE_ENV !== "test") {
+        logger.log("set language to " + chosenLanguage);
+    }
+
+    // Set 'en' as fallback language:
+    if (chosenLanguage !== "en") {
+        const fallbackLanguageData = await getLanguageRetry(availableLanguages["en"]);
+        registerTranslations("en", fallbackLanguageData);
+    }
+
+    await registerCustomTranslations();
+}
diff --git a/apps/web/src/i18n/strings/cs.json b/apps/web/src/i18n/strings/cs.json
index 3a28149550..022b809785 100644
--- a/apps/web/src/i18n/strings/cs.json
+++ b/apps/web/src/i18n/strings/cs.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Výběr emodži",
         "jump_first_invite": "Přejít na první pozvánku.",
         "message_composer": "Editor zprávy",
         "n_unread_messages": {
@@ -11,8 +10,6 @@
             "other": "%(count)s nepřečtených zpráv a zmínek.",
             "one": "Nepřečtená zmínka."
         },
-        "recent_rooms": "Nedávné místnosti",
-        "room_name": "Místnost %(name)s",
         "room_status_bar": "Stavový řádek místnosti",
         "seek_bar_label": "Panel posunu zvuku",
         "unread_messages": "Nepřečtené zprávy."
@@ -22,7 +19,6 @@
         "accept": "Přijmout",
         "add": "Přidat",
         "add_existing_room": "Přidat existující místnost",
-        "add_people": "Přidat lidi",
         "apply": "Použít",
         "approve": "Schválit",
         "ask_to_join": "Požádat o vstup",
@@ -57,7 +53,6 @@
         "enter_fullscreen": "Vstup do režimu celé obrazovky",
         "exit_fullscreeen": "Ukončení režimu celé obrazovky",
         "expand": "Rozbalit",
-        "explore_public_rooms": "Prozkoumat veřejné místnosti",
         "explore_rooms": "Procházet místnosti",
         "export": "Exportovat",
         "forward": "Přeposlat",
@@ -69,8 +64,6 @@
         "ignore": "Ignorovat",
         "import": "Importovat",
         "invite": "Pozvat",
-        "invite_to_space": "Pozvat do prostoru",
-        "invites_list": "Pozvánky",
         "join": "Vstoupit",
         "learn_more": "Zjistit více",
         "leave": "Opustit",
@@ -97,7 +90,6 @@
         "rename": "Přejmenovat",
         "reply": "Odpovědět",
         "reply_in_thread": "Odpovědět ve vlákně",
-        "report_content": "Nahlásit obsah",
         "report_room": "Nahlásit místnost",
         "resend": "Poslat znovu",
         "reset": "Resetovat",
@@ -117,8 +109,6 @@
         "sign_out": "Odebrat toto zařízení",
         "skip": "Přeskočit",
         "start": "Začít",
-        "start_chat": "Zahájit konverzaci",
-        "start_new_chat": "Zahájit nový chat",
         "stop": "Zastavit",
         "submit": "Odeslat",
         "subscribe": "Odebírat",
@@ -219,11 +209,9 @@
         "log_in_new_account": "<a>Přihlaste se</a> svým novým účtem.",
         "logout_dialog": {
             "description": "Opravdu chcete toto zařízení odstranit?",
-            "megolm_export": "Export klíčů",
-            "setup_key_backup_title": "Přijdete o přístup k šifrovaným zprávám",
-            "setup_secure_backup_description_1": "Šifrované zprávy jsou zabezpečené koncovým šifrováním. Klíče pro jejich dešifrování máte jen vy a příjemci zpráv.",
-            "setup_secure_backup_description_2": "Po odstranění tohoto zařízení nebudete moci číst šifrované zprávy, pokud k nim nemáte klíče na ostatních zařízeních nebo je nezálohujete na server.",
-            "skip_key_backup": "Už své zašifrované zprávy nechci"
+            "setup_key_backup_title": "Přijdete o přístup k šifrovaným chatům",
+            "setup_secure_backup_description": "Toto je vaše jediné zařízení. Pokud ho odstraníte, budete potřebovat klíč pro obnovení k potvrzení své digitální identity a obnovení šifrovaných chatů.",
+            "skip_key_backup": "Přesto toto zařízení odebrat"
         },
         "misconfigured_body": "Požádejte správce vašeho %(brand)su, aby zkontroloval <a>vaši konfiguraci</a>. Pravděpodobně obsahuje chyby nebo duplicity.",
         "misconfigured_title": "%(brand)s je špatně nakonfigurován",
@@ -249,7 +237,9 @@
             "check_code_heading": "Zadejte číslo zobrazené na druhém zařízení",
             "check_code_input_label": "2místný kód",
             "check_code_mismatch": "Čísla se neshodují",
+            "choose_desktop_computer": "Vyberte \"%(desktopComputer)s\"",
             "completing_setup": "Dokončování nastavení nového zařízení",
+            "desktop_computer": "Stolní počítač",
             "error_etag_missing": "Došlo k neočekávané chybě. Příčinou může být rozšíření prohlížeče, proxy server nebo chybná konfigurace serveru.",
             "error_expired": "Přihlášení vypršelo. Zkuste to prosím znovu.",
             "error_expired_title": "Přihlášení nebylo dokončeno včas",
@@ -270,16 +260,22 @@
             "error_user_declined": "Vy nebo poskytovatel účtu jste odmítli žádost o přihlášení.",
             "error_user_declined_title": "Přihlášení bylo odmítnuto",
             "follow_remaining_instructions": "Postupujte podle zbývajících pokynů",
+            "open_element_mobile_device": "Otevřete %(brand)s na svém mobilním zařízení",
             "open_element_other_device": "Otevřete %(brand)s na druhém zařízení",
             "point_the_camera": "Naskenujte zde zobrazený QR kód",
-            "scan_code_instruction": "Naskenujte QR kód jiným zařízením",
+            "ready_to_scan": "Připraveno ke skenování",
+            "scan_code_instruction": "Naskenujte QR kód",
+            "scan_code_instruction_reciprocate": "Naskenujte QR kód druhým zařízením",
             "scan_qr_code": "Přihlaste se pomocí QR kódu",
-            "security_code": "Bezpečnostní kód",
-            "security_code_prompt": "Pokud budete vyzváni, zadejte na druhém zařízení níže uvedený kód.",
+            "security_code_prompt": "Poskytovatel vašeho účtu může k ověření přihlášení požadovat následující kód.",
+            "security_code_title": "Váš ověřovací kód",
             "select_qr_code": "Vyberte \"%(scanQRCode)s\"",
+            "select_ready_to_scan": "Vyberte \"%(readyToScan)s\" a naskenujte zde zobrazený QR kód",
+            "start_over": "Začít znovu",
+            "tap_avatar_link_new_device": "Klepněte na svůj avatar a vyberte \"%(linkNewDevice)s\"",
             "unsupported_explainer": "Váš poskytovatel účtu nepodporuje přihlášení do nového zařízení pomocí QR kódu.",
             "unsupported_heading": "QR kód není podporován",
-            "waiting_for_device": "Čekání na přihlášení zařízení"
+            "waiting_for_device": "Čekání na vaše další zařízení"
         },
         "register_action": "Vytvořit účet",
         "registration": {
@@ -338,8 +334,10 @@
         "sign_in_description": "Pro pokračování použijte svůj účet.",
         "sign_in_instead": "Namísto toho se přihlásit",
         "sign_in_instead_prompt": "Namísto toho se přihlásit",
+        "sign_in_manually": "Přihlásit se ručně",
         "sign_in_or_register": "Přihlásit nebo vytvořit nový účet",
         "sign_in_or_register_description": "Pro pokračování se přihlaste stávajícím účtem, nebo si vytvořte nový.",
+        "sign_in_with_qr": "Přihlásit se pomocí QR kódu",
         "sign_in_with_sso": "Přihlásit se přes jednotné přihlašování",
         "signing_in": "Přihlašování…",
         "soft_logout": {
@@ -474,13 +472,13 @@
         "description": "Popis",
         "deselect_all": "Zrušit výběr všech",
         "device": "Zařízení",
+        "disabled_by_homeserver": "Zakázáno domovským serverem",
         "edited": "upraveno",
         "email_address": "E-mailová adresa",
         "emoji": "Emoji",
         "encrypted": "Šifrováno",
         "error": "Chyba",
         "faq": "Často kladené dotazy (FAQ)",
-        "favourites": "Oblíbené",
         "feedback": "Zpětná vazba",
         "filter_results": "Filtrovat výsledky",
         "forward_message": "Přeposlat zprávu",
@@ -488,7 +486,6 @@
         "go_to_settings": "Přejít do nastavení",
         "guest": "Host",
         "help": "Nápověda",
-        "historical": "Historické",
         "home": "Domov",
         "homeserver": "Domovský server",
         "identity_server": "Server identit",
@@ -500,13 +497,11 @@
         "light": "Světlý",
         "loading": "Načítání…",
         "location": "Poloha",
-        "low_priority": "Nízká priorita",
         "matrix": "Matrix",
         "message": "Zpráva",
         "message_layout": "Zobrazení zpráv",
         "message_timestamp_invalid": "Neplatné časové razítko",
         "microphone": "Mikrofon",
-        "model": "Model",
         "moderation_and_safety": "Moderování a bezpečnost",
         "modern": "Moderní",
         "mute": "Ztlumit",
@@ -566,7 +561,6 @@
         "success": "Úspěch",
         "suggestions": "Návrhy",
         "support": "Podpora",
-        "system_alerts": "Systémová varování",
         "theme": "Motiv vzhledu",
         "thread": "Vlákno",
         "threads": "Vlákna",
@@ -583,7 +577,6 @@
         "username": "Uživatelské jméno",
         "verified": "Ověřeno",
         "version": "Verze",
-        "video": "Video",
         "video_room": "Video místnost",
         "view_message": "Zobrazit zprávu",
         "warning": "Upozornění"
@@ -682,7 +675,8 @@
         "create_section": "Vytvořit sekci",
         "description": "Sekce určeny pouze pro vás",
         "label": "Název sekce",
-        "title": "Vytvořte sekci"
+        "title": "Vytvořte sekci",
+        "title_edition": "Upravit sekci"
     },
     "create_space": {
         "add_details_prompt": "Přidejte nějaké podrobnosti, aby ho lidé lépe rozpoznali.",
@@ -889,7 +883,6 @@
         "thread_root_id": "ID kořenového vlákna: %(threadRootId)s",
         "threads_timeline": "Časová osa vláken",
         "title": "Nástroje pro vývojáře",
-        "toggle_event": "přepnout událost",
         "toolbox": "Sada nástrojů",
         "use_at_own_risk": "Toto uživatelské rozhraní NEKONTROLUJE typy hodnot. Použití na vlastní nebezpečí.",
         "user_avatar": "Avatar: %(avatar)s",
@@ -924,22 +917,6 @@
     },
     "dialog_close_label": "Zavřít dialog",
     "download_completed": "Stahování dokončeno",
-    "emoji": {
-        "categories": "Kategorie",
-        "category_activities": "Aktivity",
-        "category_animals_nature": "Zvířata a příroda",
-        "category_flags": "Vlajky",
-        "category_food_drink": "Jídlo a nápoje",
-        "category_frequently_used": "Často používané",
-        "category_objects": "Objekty",
-        "category_smileys_people": "Obličeje a lidé",
-        "category_symbols": "Symboly",
-        "category_travel_places": "Cestování a místa",
-        "quick_reactions": "Rychlé reakce"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Zrušit hledání"
-    },
     "empty_room": "Prázdná místnost",
     "empty_room_was_name": "Prázdná místnost (dříve %(oldName)s)",
     "encryption": {
@@ -964,7 +941,7 @@
         "cross_signing_user_verified": "Tohoto uživatele jste ověřili a on ověřil všechny své relace.",
         "cross_signing_user_warning": "Tento uživatel zatím neověřil všechny své relace.",
         "enter_recovery_key": "Zadejte klíč pro obnovení",
-        "event_shield_reason_authenticity_not_guaranteed": "Pravost této šifrované zprávy nelze na tomto zařízení ověřit.",
+        "event_shield_reason_authenticity_not_guaranteed": "Pravost této šifrované zprávy nelze na tomto zařízení zaručit.",
         "event_shield_reason_mismatched_sender": "Odesílatel události se neshoduje s vlastníkem zařízení, které ji odeslalo.",
         "event_shield_reason_mismatched_sender_key": "Šifrované neověřenou relací",
         "event_shield_reason_unknown_device": "Šifrováno neznámým nebo smazaným zařízením.",
@@ -977,7 +954,6 @@
         "import_invalid_passphrase": "Kontrola ověření selhala: špatné heslo?",
         "key_storage_out_of_sync": "Vaše úložiště klíčů není synchronizováno.",
         "key_storage_out_of_sync_description": "Potvrďte klíč pro obnovení, abyste zachovali přístup k úložišti klíčů a historii zpráv.",
-        "message_shared_by": "%(displayName)s (%(userId)s) sdílel(a) tuto zprávu v době, kdy jste nebyli v místnosti.",
         "messages_not_secure": {
             "cause_1": "Váš domovský server",
             "cause_2": "Domovský server, ke kterému je ověřovaný uživatel připojen",
@@ -1003,19 +979,8 @@
         "set_up_recovery": "Zálohujte své chaty",
         "set_up_recovery_toast_description": "Vaše chaty jsou automaticky zálohovány pomocí koncového šifrování. Chcete-li tuto zálohu obnovit a zachovat si svou digitální identitu v případě, že ztratíte přístup ke všem svým zařízením, budete potřebovat svůj klíč pro obnovení.",
         "set_up_toast_title": "Nastavení zabezpečené zálohy",
-        "setup_secure_backup": {
-            "explainer": "Před odebráním tohoto zařízení si zálohujte klíče, abyste o ně nepřišli."
-        },
         "turn_on_key_storage": "Zapnout úložiště klíčů",
         "turn_on_key_storage_description": "Díky tomu budete moci zobrazit historii chatu na jakémkoli novém zařízení a je to nutné pro zálohování chatů a digitální identity.",
-        "udd": {
-            "interactive_verification_button": "Interaktivní ověření pomocí emoji",
-            "other_ask_verify_text": "Požádejte tohoto uživatele, aby ověřil svou relaci, nebo jí níže můžete ověřit manuálně.",
-            "other_new_session_text": "%(name)s (%(userId)s) se přihlásil(a) do nové relace bez ověření:",
-            "own_ask_verify_text": "Ověřte další relaci jedním z následujících způsobů.",
-            "own_new_session_text": "Přihlásili jste se do nové relace, aniž byste ji ověřili:",
-            "title": "Nedůvěryhodné"
-        },
         "unable_to_setup_keys_error": "Nepovedlo se nastavit klíče",
         "verification": {
             "accepting": "Přijímání…",
@@ -1365,6 +1330,14 @@
         "impossible_dialog_title": "Integrace nejsou povolené"
     },
     "invite": {
+        "confirm_unknown_users": {
+            "invite_subtitle": "Momentálně s těmito kontakty nemáte žádné chaty. Před pokračováním potvrďte jejich pozvání do této místnosti.",
+            "invite_title": "Pozvat nové kontakty do této místnosti?",
+            "start_chat_subtitle_multiple_users": "Momentálně s těmito lidmi nemáte žádné chaty. Před pokračováním potvrďte jejich pozvání.",
+            "start_chat_subtitle_one_user": "Momentálně s touto osobou nemáte žádné chaty. Před pokračováním potvrďte pozvání.",
+            "start_chat_title_multiple_users": "Zahájit chat s těmito novými kontakty?",
+            "start_chat_title_one_user": "Zahájit chat s tímto novým kontaktem?"
+        },
         "email_caption": "Pozvat emailem",
         "email_limit_one": "Pozvánky e-mailem lze zasílat pouze po jedné",
         "email_use_default_is": "Odeslat pozvánku pomocí serveru identit. <default>Použít výchozí (%(defaultIdentityServerName)s)</default> nebo přenastavit <settings>Nastavení</settings>.",
@@ -1515,6 +1488,7 @@
         "bridge_state_manager": "Toto propojení spravuje <user />.",
         "bridge_state_workspace": "Pracovní oblast: <networkLink/>",
         "click_for_info": "Klikněte pro více informací",
+        "config_only": "Lze povolit pouze přes config.json.",
         "currently_experimental": "V současnosti experimentální.",
         "custom_themes": "Umožnit přidání vlastního vzhledu",
         "dynamic_room_predecessors": "Předchůdci dynamické místnosti",
@@ -1528,8 +1502,12 @@
         "experimental_section": "Předběžné ukázky",
         "extended_profiles_msc_support": "Vyžaduje, aby váš server podporoval MSC4133",
         "feature_disable_call_per_sender_encryption": "Zakázat šifrování podle odesílatele pro Element Call",
+        "feature_user_status": {
+            "description": "Umožňuje zobrazit a nastavit aktuální stav.",
+            "display_name": "Stav uživatele",
+            "required_msc_support": "Vyžaduje MSC4429 (aktualizace profilu pro starší synchronizaci)"
+        },
         "feature_wysiwyg_composer_description": "V editoru zpráv použít formátovaný text namísto Markdown.",
-        "group_calls": "Nový zážitek ze skupinových hovorů",
         "group_developer": "Pro vývojáře",
         "group_encryption": "Šifrování",
         "group_experimental": "Experimentální",
@@ -1544,7 +1522,6 @@
         "group_voip": "Zvuk a video",
         "group_widgets": "Widgety",
         "hidebold": "Skrýt tečku oznámení (zobrazit pouze odznaky čítačů)",
-        "html_topic": "Zobrazit HTML reprezentaci témat místností",
         "join_beta": "Připojit se k beta verzi",
         "join_beta_reload": "Po připojení k betě se %(brand)s znovu načte.",
         "jump_to_date": "Přejít na datum (přidá /jumptodate a umožní přejít na záhlaví data)",
@@ -1554,23 +1531,19 @@
         "leave_beta_reload": "Po opuštění beta verze se %(brand)s znovu načte.",
         "location_share_live": "Sdílení polohy živě",
         "location_share_live_description": "Dočasná implementace. Polohy zůstanou v historii místností.",
+        "login_with_qr": "Přihlásit se pomocí QR kódu",
         "mjolnir": "Nové způsoby ignorování lidí",
         "msc3531_hide_messages_pending_moderation": "Umožnit moderátorům skrývat zprávy čekající na moderaci.",
-        "new_room_list": "Povolit nový seznam místností",
         "notification_settings": "Nová nastavení oznámení",
         "notification_settings_beta_caption": "Představujeme jednodušší způsob, jak změnit nastavení oznámení. Přizpůsobte svůj %(brand)s přesně tak, jak se vám líbí.",
         "notification_settings_beta_title": "Nastavení oznámení",
         "notifications": "Zapnout panel oznámení v záhlaví místnosti",
         "render_reaction_images": "Vykreslování vlastních obrázků v reakcích",
         "render_reaction_images_description": "Někdy se označují jako \"vlastní emoji\".",
-        "report_to_moderators": "Nahlásit moderátorům",
-        "report_to_moderators_description": "V místnostech, které podporují moderování, můžete pomocí tlačítka \"Nahlásit\" nahlásit zneužití moderátorům místnosti.",
-        "room_list_sections": "Sekce seznamu místností",
         "sliding_sync": "Režim klouzavé synchronizace",
         "sliding_sync_description": "V aktivním vývoji, nelze zakázat.",
         "sliding_sync_disabled_notice": "Pro deaktivaci se znovu přihlaste",
         "sliding_sync_server_no_support": "Váš server nemá podporu",
-        "under_active_development": "V aktivním vývoji.",
         "unrealiable_e2e": "Nespolehlivé v šifrovaných místnostech",
         "video_rooms": "Video místnosti",
         "video_rooms_a_new_way_to_chat": "Nový způsob hlasového a video hovoru v aplikaci %(brand)s.",
@@ -1626,9 +1599,6 @@
         "room_rejoin_warning": "Tato místnost není veřejná. Bez pozvánky nebudete moci znovu vstoupit.",
         "space_rejoin_warning": "Tento prostor není veřejný. Bez pozvánky se nebudete moci znovu připojit."
     },
-    "left_panel": {
-        "open_dial_pad": "Otevřít číselník"
-    },
     "lightbox": {
         "rotate_left": "Otočit doleva",
         "rotate_right": "Otočit doprava",
@@ -1728,7 +1698,6 @@
         "mentions_and_keywords": "@zmínky a klíčová slova",
         "mentions_and_keywords_description": "Dostávat oznámení pouze o zmínkách a klíčových slovech podle <a>nastavení</a>",
         "mentions_keywords": "Zmínky a klíčová slova",
-        "message_didnt_send": "Zpráva se neodeslala. Klikněte pro informace.",
         "mute_description": "Nebudete dostávat žádná oznámení"
     },
     "notifier": {
@@ -1828,7 +1797,6 @@
     },
     "quick_settings": {
         "all_settings": "Všechna nastavení",
-        "metaspace_section": "Připnout na postranní panel",
         "sidebar_settings": "Více možností",
         "title": "Rychlá nastavení"
     },
@@ -1844,27 +1812,18 @@
         "ongoing": "Odstaňování…",
         "reason_label": "Důvod (volitelné)"
     },
+    "remove_section_dialog": {
+        "confirmation": "Opravdu chcete tuto sekci odstranit?",
+        "description": "Chaty v této sekci budou stále dostupné ve vašem seznamu chatů.",
+        "remove_section": "Odstranit sekci",
+        "title": "Odstranit sekci?"
+    },
     "report_content": {
         "description": "Nahlášení této zprávy pošle její jedinečné 'event ID' správci vašeho domovského serveru. Pokud jsou zprávy šifrované, správce nebude mít možnost přečíst text zprávy ani se podívat na soubory nebo obrázky.",
-        "disagree": "Nesouhlasím",
-        "error_create_room_moderation_bot": "Nelze vytvořit místnost s moderačním robotem",
         "hide_messages_from_user": "Zaškrtněte, pokud chcete skrýt všechny aktuální a budoucí zprávy od tohoto uživatele.",
         "ignore_user": "Ignorovat uživatele",
-        "illegal_content": "Nelegální obsah",
         "missing_reason": "Vyplňte prosím co chcete nahlásit.",
-        "nature": "Vyberte prosím charakter zprávy a popište, v čem je tato zpráva zneužitelná.",
-        "nature_disagreement": "To, co tento uživatel píše, je špatné.\nTato skutečnost bude nahlášena moderátorům místnosti.",
-        "nature_illegal": "Tento uživatel se chová nezákonně, například zveřejňuje osobní údaje o cizích lidech nebo vyhrožuje násilím.\nTato skutečnost bude nahlášena moderátorům místnosti, kteří to mohou předat právním orgánům.",
-        "nature_nonstandard_admin": "Tato místnost obsahuje nelegální nebo toxický obsah nebo jeji moderátoři nezvládají moderovat.\nToto bude nahlášeno správcům %(homeserver)s.",
-        "nature_nonstandard_admin_encrypted": "Tato místnost obsahuje nelegální nebo toxický obsah nebo jeji moderátoři nezvládají moderovat.\nToto bude nahlášeno správcům %(homeserver)s. Správci nebudou moci číst šifrovaný obsah této místnosti.",
-        "nature_other": "Jakýkoli jiný důvod. Popište problém.\nTento problém bude nahlášen moderátorům místnosti.",
-        "nature_spam": "Tento uživatel spamuje místnost reklamami, odkazy na reklamy nebo propagandou.\nTato skutečnost bude nahlášena moderátorům místnosti.",
-        "nature_toxic": "Tento uživatel se chová nevhodně, například uráží ostatní uživatele, sdílí obsah určený pouze pro dospělé v místnosti určené pro rodiny s dětmi nebo jinak porušuje pravidla této místnosti.\nTato skutečnost bude nahlášena moderátorům místnosti.",
-        "other_label": "Další možnosti",
-        "report_content_to_homeserver": "Nahlásit obsah správci vašeho domovského serveru",
-        "report_entire_room": "Nahlásit celou místnost",
-        "spam_or_propaganda": "Spam nebo propaganda",
-        "toxic_behaviour": "Nevhodné chování"
+        "report_content_to_homeserver": "Nahlásit obsah správci vašeho domovského serveru"
     },
     "report_room": {
         "description": "Nahlaste tuto místnost svému poskytovateli účtu. Pokud jsou zprávy zašifrované, váš administrátor je nebude moci číst.",
@@ -2143,46 +2102,21 @@
         "waiting_for_join_title": "Čekání na připojení uživatelů k %(brand)s"
     },
     "room_list": {
-        "add_room_label": "Přidat místnost",
         "add_space_label": "Přidat prostor",
-        "breadcrumbs_empty": "Žádné nedávno navštívené místnosti",
-        "breadcrumbs_label": "Nedávno navštívené místnosti",
         "failed_add_tag": "Nepodařilo se přidat štítek %(tagName)s k místnosti",
         "failed_remove_tag": "Nepodařilo se odstranit štítek %(tagName)s z místnosti",
         "failed_set_dm_tag": "Nepodařilo se nastavit značku přímé zprávy",
-        "home_menu_label": "Možnosti domovské obrazovky",
-        "join_public_room_label": "Připojit se k veřejné místnosti",
-        "joining_rooms_status": {
-            "one": "Momentálně se připojuje %(count)s místnost",
-            "other": "Momentálně se připojuje %(count)s místností"
-        },
         "list_title": "Seznam místností",
         "more_options": {
             "leave_room": "Opustit místnost"
         },
         "notification_options": "Možnosti oznámení",
-        "redacting_messages_status": {
-            "one": "Momentálně se odstraňují zprávy v %(count)s místnosti",
-            "other": "Momentálně se odstraňují zprávy v %(count)s místnostech"
-        },
         "section": {
             "chats": "Chaty",
             "favourites": "Oblíbené",
             "low_priority": "Nízká priorita"
         },
-        "show_less": "Zobrazit méně",
-        "show_n_more": {
-            "other": "Zobrazit %(count)s dalších",
-            "one": "Zobrazit %(count)s další"
-        },
-        "show_previews": "Zobrazovat náhledy zpráv",
-        "sort_by": "Řadit dle",
-        "sort_by_activity": "Aktivity",
-        "sort_by_alphabet": "A–Z",
-        "sort_unread_first": "Zobrazovat místnosti s nepřečtenými zprávami jako první",
-        "space_menu_label": "Nabídka pro %(spaceName)s",
-        "sublist_options": "Možnosti seznamu",
-        "suggested_rooms_heading": "Doporučené místnosti"
+        "show_less": "Zobrazit méně"
     },
     "room_settings": {
         "access": {
@@ -2736,7 +2670,7 @@
             "enter_passphrase": "Zadejte přístupovou frázi",
             "export_description_1": "Tento proces vám umožňuje exportovat do souboru klíče ke zprávám, které jste dostali v šifrovaných místnostech. Když pak tento soubor importujete do jiného Matrix klienta, všechny tyto zprávy bude možné opět dešifrovat.",
             "export_description_2": "Exportovaný soubor umožní komukoli, kdo si jej přečte, dešifrovat všechny šifrované zprávy, které vidíte, takže byste měli dbát na jeho zabezpečení. K tomu vám pomůže níže uvedená jedinečná přístupová fráze, která bude použita pouze k zašifrování exportovaných dat. Importovat data bude možné pouze pomocí stejné přístupové fráze.",
-            "export_title": "Exportovat klíče místnosti",
+            "export_title": "Exportovat klíče místností",
             "file_to_import": "Soubor k importu",
             "import_description_1": "Tento proces vás provede importem šifrovacích klíčů, které jste si stáhli z jiného Matrix klienta. Po úspěšném naimportování budete v tomto klientovi moci dešifrovat všechny zprávy, které jste mohli dešifrovat v původním klientovi.",
             "import_description_2": "Stažený soubor je chráněn přístupovou frází. Soubor můžete naimportovat pouze pokud zadáte odpovídající přístupovou frázi.",
@@ -2895,7 +2829,6 @@
         "send_typing_notifications": "Posílat oznámení, když píšete",
         "sessions": {
             "best_security_note": "V zájmu co nejlepšího zabezpečení ověřujte své relace a odstraňte relace, které již nepoznáváte nebo nepoužíváte.",
-            "browser": "Prohlížeč",
             "confirm_sign_out": {
                 "one": "Potvrďte odstranění tohoto zařízení",
                 "few": "",
@@ -2950,7 +2883,6 @@
             "no_sessions": "Nebyly nalezeny žádné relace.",
             "no_unverified_sessions": "Nebyly nalezeny žádné neověřené relace.",
             "no_verified_sessions": "Nebyly nalezeny žádné ověřené relace.",
-            "os": "Operační systém",
             "other_sessions_heading": "Ostatní relace",
             "push_heading": "Push oznámení",
             "push_subheading": "Přijímat push oznámení v této relaci.",
@@ -3013,13 +2945,11 @@
         "showbold": "Zobrazit veškerou aktivitu v seznamu místnosti (body nebo počet nepřečtených zpráv).",
         "sidebar": {
             "dialog_title": "<strong>Nastavení:</strong> Postranní panel",
-            "metaspaces_favourites_description": "Seskupte všechny své oblíbené místnosti a osoby na jednom místě.",
             "metaspaces_home_all_rooms": "Zobrazit všechny místnosti",
             "metaspaces_home_all_rooms_description": "Zobrazit všechny místnosti v Domovu, i když jsou v prostoru.",
             "metaspaces_home_description": "Domov je užitečný pro získání přehledu o všem.",
             "metaspaces_orphans": "Místnosti mimo prostor",
             "metaspaces_orphans_description": "Seskupte všechny místnosti, které nejsou součástí prostoru, na jednom místě.",
-            "metaspaces_people_description": "Seskupte všechny své kontakty na jednom místě.",
             "metaspaces_subsection": "Prostory pro zobrazení",
             "metaspaces_video_rooms": "Video místnosti a konference",
             "metaspaces_video_rooms_description": "Seskupte všechny soukromé videomístnosti a konference.",
@@ -3046,7 +2976,6 @@
             "audio_output": "Zvukový výstup",
             "audio_output_empty": "Nebyly rozpoznány žádné zvukové výstupy",
             "auto_gain_control": "Automatická úprava zesílení",
-            "connection_section": "Připojení",
             "dialog_title": "<strong>Nastavení:</strong> Hlas a video",
             "echo_cancellation": "Potlačení ozvěny",
             "echo_cancellation_description": "Odstraňuje ozvěnu z mikrofonu během hovorů. Toto nastavení se vztahuje také na Element Call.",
@@ -3142,6 +3071,14 @@
         "server_error_detail": "Server je nedostupný, přetížený nebo se něco pokazilo.",
         "shrug": "Vloží ¯\\_(ツ)_/¯ na začátek zprávy",
         "spoiler": "Odešle danou zprávu jako spoiler",
+        "status": {
+            "description": "Nastavte svůj aktuální stav",
+            "no_args": "Nebyly zadány žádné argumenty. Měli byste zadat emoji a volitelný textový prvek.",
+            "no_emoji": "Nezadali jste emoji",
+            "no_text": "Nezadali jste žádný popisný text",
+            "too_long_emoji": "První argument musí být emoji",
+            "too_long_text": "Zadaný text byl příliš dlouhý."
+        },
         "tableflip": "Vloží (╯°□°）╯︵ ┻━┻ na začátek zprávy",
         "topic": "Nastaví nebo zjistí téma místnosti",
         "topic_none": "Tato místnost nemá žádné specifické téma.",
@@ -3231,12 +3168,6 @@
     "space_settings": {
         "title": "Nastavení - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Nemáte oprávnění k přidávání místností do tohoto prostoru",
-        "error_no_permission_add_space": "Nemáte oprávnění přidávat prostory do tohoto prostoru",
-        "error_no_permission_create_room": "Nemáte oprávnění k vytváření nových místností v tomto prostoru",
-        "error_no_permission_invite": "Nemáte oprávnění zvát lidi do tohoto prostoru"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Zadejte jméno serveru, který si chcete prohlédnout.",
@@ -3363,7 +3294,6 @@
         "download_action_downloading": "Stahování",
         "download_failed": "Stažení se nezdařilo",
         "download_failed_description": "Při stahování tohoto souboru došlo k chybě",
-        "e2e_state": "Stav šifrování mezi koncovými body",
         "edits": {
             "tooltip_label": "Upraveno v %(date)s. Klinutím zobrazíte změny.",
             "tooltip_sub": "Klikněte pro zobrazení úprav",
@@ -3445,9 +3375,7 @@
         "m.poll.start": "%(senderName)s zahájil(a) hlasování - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s změnil(a) avatar místnosti.",
-            "changed_img": "%(senderDisplayName)s změnil(a) avatar místnosti na <img/>",
-            "lightbox_title": "%(senderDisplayName)s změnil(a) avatar místnosti %(roomName)s",
-            "removed": "%(senderDisplayName)s odstranil(a) avatar místnosti."
+            "lightbox_title": "%(senderDisplayName)s změnil(a) avatar místnosti %(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3890,6 +3818,18 @@
         "call_held": "%(peerName)s podržel hovor",
         "call_held_resume": "Podrželi jste hovor <a>Pokračovat</a>",
         "call_held_switch": "Podrželi jste hovor <a>Přepnout</a>",
+        "call_members": {
+            "exhaustive": {
+                "one": "<avatars/> je v hovoru",
+                "few": "",
+                "other": "<avatars/> jsou v hovoru"
+            },
+            "overflow": {
+                "one": "<avatars/> +%(overflowCount)s v hovoru",
+                "few": "",
+                "other": "<avatars/> +%(overflowCount)s v hovoru"
+            }
+        },
         "call_toast_unknown_room": "Neznámá místnost",
         "camera_disabled": "Vaše kamera je vypnutá",
         "camera_enabled": "Vaše kamera je stále zapnutá",
@@ -3912,10 +3852,12 @@
         "enable_microphone": "Zrušit ztlumení mikrofonu",
         "expand": "Návrat do hovoru",
         "get_call_link": "Sdílet odkaz na hovor",
+        "group_call_started": "Skupinový hovor byl zahájen",
         "hangup": "Zavěsit",
         "hide_sidebar_button": "Skrýt postranní panel",
         "input_devices": "Vstupní zařízení",
         "jitsi_call": "Jitsi konference",
+        "join_with_video": "Připojte se pomocí videa",
         "legacy_call": "Zastaralý způsob hovoru",
         "maximise": "Vyplnit obrazovku",
         "maximise_call": "Maximalizovat hovor",
@@ -3977,6 +3919,11 @@
         "you_are_presenting": "Prezentujete"
     },
     "web_default_device_name": "%(appName)s: %(browserName)s na %(osName)s",
+    "welcome": {
+        "tagline_element": "Navrženo pro rychlost a jednoduchost.",
+        "title_element": "Buďte ve svém živlu",
+        "title_generic": "Vítejte v %(brand)s"
+    },
     "widget": {
         "added_by": "Widget přidal",
         "capabilities_dialog": {
@@ -4054,13 +4001,7 @@
         "close_to_view_right_panel": "Zavřít tento widget a zobrazit ho na tomto panelu",
         "context_menu": {
             "delete": "Vymazat widget",
-            "delete_warning": "Smazáním widgetu ho odstraníte všem uživatelům v této místnosti. Opravdu chcete tento widget smazat?",
-            "move_left": "Posunout doleva",
-            "move_right": "Posunout doprava",
-            "remove": "Odstranit pro všechny",
-            "revoke": "Odvolat oprávnění",
-            "screenshot": "Vyfotit",
-            "start_audio_stream": "Zahájit audio přenos"
+            "delete_warning": "Smazáním widgetu ho odstraníte všem uživatelům v této místnosti. Opravdu chcete tento widget smazat?"
         },
         "cookie_warning": "Widget může používat cookies.",
         "error_hangup_description": "Hovor byl přerušen. (Chyba: %(message)s)",
diff --git a/apps/web/src/i18n/strings/cy.json b/apps/web/src/i18n/strings/cy.json
index 2da072749c..0180bb632a 100644
--- a/apps/web/src/i18n/strings/cy.json
+++ b/apps/web/src/i18n/strings/cy.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Dewisydd Emoji",
         "jump_first_invite": "Symud i'r gwahoddiad cyntaf.",
         "message_composer": "Neges cyfansoddwr",
         "n_unread_messages": {
@@ -13,8 +12,6 @@
             "%(count)s grybwylliad heb eu darllen": "two",
             "%(count)s crybwylliad heb eu darllen": "other"
         },
-        "recent_rooms": "Ystafelloedd diweddar",
-        "room_name": "Ystafell %(matere)s",
         "room_status_bar": "Bar statws ystafell",
         "seek_bar_label": "Bar chwilio sain",
         "unread_messages": "Negeseuon heb eu darllen."
@@ -24,7 +21,6 @@
         "accept": "Derbyn",
         "add": "Ychwanegu",
         "add_existing_room": "Ychwanegu ystafell bresennol",
-        "add_people": "Ychwanegu pobl",
         "apply": "Gweithredu",
         "approve": "Cymeradwyo",
         "ask_to_join": "Gofyn i gael ymuno",
@@ -59,7 +55,6 @@
         "enter_fullscreen": "Mynd i'r sgrin lawn",
         "exit_fullscreeen": "Gadael y sgrin lawn",
         "expand": "Dangos",
-        "explore_public_rooms": "Archwiliwch ystafelloedd cyhoeddus",
         "explore_rooms": "Archwilio Ystafelloedd",
         "export": "Allforio",
         "forward": "Ymlaen",
@@ -71,8 +66,6 @@
         "ignore": "Anwybyddu",
         "import": "Mewnforio",
         "invite": "Gwahodd",
-        "invite_to_space": "Gwahoddiad i'r gofod",
-        "invites_list": "Gwahoddiadau",
         "join": "Ymuno",
         "learn_more": "Dysgu rhagor",
         "leave": "Gadael",
@@ -99,7 +92,6 @@
         "rename": "Ailenwi",
         "reply": "Ateb",
         "reply_in_thread": "Ateb i edefyn",
-        "report_content": "Cynnwys yr Adroddiad",
         "report_room": "Ystafell adrodd",
         "resend": "Ailanfon",
         "reset": "Ailosod",
@@ -116,11 +108,9 @@
         "show_advanced": "Dangos uwch",
         "show_all": "Dangos y cyfan",
         "sign_in": "Mewngofnodi",
-        "sign_out": "Allgofnodi",
+        "sign_out": "Tynnwch y ddyfais",
         "skip": "Hepgor",
         "start": "Dechrau",
-        "start_chat": "Dechrau sgwrs",
-        "start_new_chat": "Dechrau sgwrs newydd",
         "stop": "Atal",
         "submit": "Cyflwyno",
         "subscribe": "Tanysgrifio",
@@ -220,12 +210,9 @@
         "incorrect_password": "Cyfrinair anghywir",
         "log_in_new_account": "<a>Mewngofnodwch</a> i'ch cyfrif newydd.",
         "logout_dialog": {
-            "description": "Ydych chi'n siŵr eich bod am allgofnodi?",
-            "megolm_export": "Allforio allweddi â llaw",
+            "description": "Ydych chi&#39;n siŵr eich bod chi eisiau tynnu&#39;r ddyfais hon?",
             "setup_key_backup_title": "Byddwch yn colli mynediad i'ch negeseuon wedi'u hamgryptio",
-            "setup_secure_backup_description_1": "Mae negeseuon wedi'u hamgryptio yn cael eu diogelu gydag amgryptio o'r dechrau i'r diwedd. Dim ond chi a'r derbynwyr sydd â'r allweddi i ddarllen y negeseuon hyn.",
-            "setup_secure_backup_description_2": "Pan fyddwch yn allgofnodi, bydd yr allweddi hyn yn cael eu dileu o'r ddyfais hon, sy'n golygu na fyddwch yn gallu darllen negeseuon wedi'u hamgryptio oni bai bod gennych yr allweddi ar eu cyfer ar eich dyfeisiau eraill, neu eu bod wedi'u gwneud wrth gefn i'r gweinydd.",
-            "skip_key_backup": "Dydw i ddim eisiau fy negeseuon wedi'u hamgryptio"
+            "skip_key_backup": "Tynnwch y ddyfais hon beth bynnag"
         },
         "misconfigured_body": "Gofynnwch i'ch gweinyddwr %(brand)s wirio'ch <a>ffurfweddiad</a> am gofnodion anghywir neu ddyblyg.",
         "misconfigured_title": "Mae eich %(brand)s wedi'i gam ffurfweddu",
@@ -274,14 +261,13 @@
             "follow_remaining_instructions": "Dilynwch y cyfarwyddiadau sy'n weddill",
             "open_element_other_device": "Agorwch %(brand)s ar eich dyfais arall",
             "point_the_camera": "Sganiwch y cod QR sy'n cael ei ddangos yma",
-            "scan_code_instruction": "Sganiwch y cod QR gyda dyfais arall",
+            "scan_code_instruction": "Sganiwch y cod QR",
             "scan_qr_code": "Mewngofnodwch gyda chod QR",
-            "security_code": "Cod diogelwch",
             "security_code_prompt": "Os gofynnir i chi, nodwch y cod isod ar eich dyfais arall.",
             "select_qr_code": "Dewiswch \"%(scanQRCode)s\"",
             "unsupported_explainer": "Nid yw darparwr eich cyfrif yn cefnogi mewngofnodi i ddyfais newydd gyda chod QR.",
             "unsupported_heading": "Nid yw'r cod QR yn cael ei gefnogi",
-            "waiting_for_device": "Yn aros i'r ddyfais fewngofnodi"
+            "waiting_for_device": "Yn aros am eich dyfais arall"
         },
         "register_action": "Creu Cyfrif",
         "registration": {
@@ -297,7 +283,7 @@
         "registration_username_validation": "Defnyddiwch lythrennau bach, rhifau, llinellau toriad a thanlinellau yn unig",
         "reset_password": {
             "confirm_new_password": "Cadarnhau cyfrinair newydd",
-            "devices_logout_success": "Rydych wedi cael eich allgofnodi o bob dyfais ac ni fyddwch yn derbyn hysbysiadau gwthio mwyach. I ail-alluogi hysbysiadau, mewngofnodwch eto ar bob dyfais.",
+            "devices_logout_success": "Mae eich holl ddyfeisiau wedi cael eu tynnu ac ni fyddant yn derbyn hysbysiadau gwthio mwyach. I ail-alluogi hysbysiadau, mewngofnodwch eto ar bob dyfais.",
             "other_devices_logout_warning_1": "Bydd allgofnodi eich dyfeisiau yn dileu'r bysellau amgryptio neges sydd wedi'u storio arnynt, gan wneud hanes sgwrsio wedi'i amgryptio yn annarllenadwy.",
             "other_devices_logout_warning_2": "Os ydych chi am gadw mynediad i'ch hanes sgwrsio mewn ystafelloedd wedi'u hamgryptio, gosodwch Key Backup neu allforiwch allweddi eich neges o un o'ch dyfeisiau eraill cyn symud ymlaen.",
             "password_not_entered": "Rhaid rhoi cyfrinair newydd.",
@@ -306,7 +292,7 @@
             "rate_limit_error_with_time": "Gormod o ymdrechion mewn amser byr. Rhowch gynnig arall arni ar ôl %(timeout)s.",
             "reset_successful": "Cafodd eich cyfrinair ei ailosod.",
             "return_to_login": "Dychwelyd i'r sgrin mewngofnodi",
-            "sign_out_other_devices": "Allgofnodi o bob dyfais"
+            "sign_out_other_devices": "Tynnu dyfeisiau eraill"
         },
         "reset_password_action": "Ailosod cyfrinair",
         "reset_password_button": "Wedi anghofio'ch cyfrinair?",
@@ -483,7 +469,6 @@
         "encrypted": "Wedi'i amgryptio",
         "error": "Gwall",
         "faq": "Cwestiynau Cyffredin",
-        "favourites": "Ffefrynnau",
         "feedback": "Adborth",
         "filter_results": "Hidlo canlyniadau",
         "forward_message": "Anfonwyd neges ymlaen",
@@ -491,7 +476,6 @@
         "go_to_settings": "Mynd i'r Gosodiadau",
         "guest": "Gwestai",
         "help": "Cymorth",
-        "historical": "Hanesyddol",
         "home": "Cartref",
         "homeserver": "Gweinydd cartref",
         "identity_server": "Gweinydd hunaniaeth",
@@ -503,13 +487,11 @@
         "light": "Golau",
         "loading": "Yn Llwytho…",
         "location": "Lleoliad",
-        "low_priority": "Blaenoriaeth isel",
         "matrix": "Matrics",
         "message": "Neges",
         "message_layout": "Cynllun y neges",
         "message_timestamp_invalid": "Stamp amser annilys",
         "microphone": "Meicroffôn",
-        "model": "Model",
         "moderation_and_safety": "Cymedroli a diogelwch",
         "modern": "Modern",
         "mute": "Tewi",
@@ -569,7 +551,6 @@
         "success": "Llwyddiant",
         "suggestions": "Awgrymiadau",
         "support": "Cymorth",
-        "system_alerts": "Rhybuddion System",
         "theme": "Thema",
         "thread": "Edefyn",
         "threads": "Edafedd",
@@ -586,7 +567,6 @@
         "username": "Enw defnyddiwr",
         "verified": "Wedi ei wirio",
         "version": "Fersiwn",
-        "video": "Fideo",
         "video_room": "Ystafell fideo",
         "view_message": "Gweld neges",
         "warning": "Rhybudd"
@@ -666,8 +646,8 @@
         "join_rule_knock_label": "Gall unrhyw un wneud cais i ymuno, ond mae angen i weinyddwyr neu gymedrolwyr ganiatáu mynediad. Gallwch newid hyn yn nes ymlaen.",
         "join_rule_public_label": "Bydd unrhyw un yn gallu dod o hyd i'r ystafell hon ac ymuno â hi.",
         "join_rule_public_parent_space_label": "Bydd unrhyw un yn gallu dod o hyd i'r ystafell hon ac ymuno â hi, nid dim ond aelodau o<SpaceName/>.",
-        "join_rule_restricted": "Yn weladwy i aelodau'r gofod",
-        "join_rule_restricted_label": "Bydd pawb yn <SpaceName/> yn gallu dod o hyd i'r ystafell hon ac ymuno â hi.",
+        "join_rule_restricted": "Safonol",
+        "join_rule_restricted_label": "Gall unrhyw un yn <SpaceName/> ymuno.",
         "name_validation_required": "Rhowch enw ar gyfer yr ystafell",
         "room_visibility_label": "Gwelededd ystafell",
         "state_encrypted_warning": "Yn galluogi cefnogaeth arbrofol ar gyfer amgryptio digwyddiadau cyflwr, sy'n cuddio metadata fel enwau ystafelloedd a phynciau o'r gweinydd. Bydd y metadata hwn hefyd yn cael ei guddio rhag pobl sy'n ymuno ag ystafelloedd yn ddiweddarach, a phobl nad yw eu cleientiaid yn cefnogi MSC4362.",
@@ -877,7 +857,6 @@
         "thread_root_id": "ID Gwraidd Edefyn: %(threadRootId)s",
         "threads_timeline": "Llinell amser edafedd",
         "title": "Offer datblygwr",
-        "toggle_event": "toglo digwyddiad",
         "toolbox": "Blwch offer",
         "use_at_own_risk": "NID yw'r UI hwn yn gwirio'r mathau o werthoedd. Defnyddiwch ar eich menter eich hun.",
         "user_avatar": "Afatar: %(avatar)s",
@@ -912,22 +891,6 @@
     },
     "dialog_close_label": "Cau'r ddeialog",
     "download_completed": "Llwytho i Lawr Wedi'i Gwblhau",
-    "emoji": {
-        "categories": "Categorïau",
-        "category_activities": "Gweithgareddau",
-        "category_animals_nature": "Anifeiliaid a Natur",
-        "category_flags": "Baneri",
-        "category_food_drink": "Bwyd a Diod",
-        "category_frequently_used": "Defnydd Cyffredin",
-        "category_objects": "Gwrthrychau",
-        "category_smileys_people": "Wynebau hapus a Phobl",
-        "category_symbols": "Symbolau",
-        "category_travel_places": "Teithio a Llefydd",
-        "quick_reactions": "Ymatebion Cyflym"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Cau'r chwilio"
-    },
     "empty_room": "Ystafell wag",
     "empty_room_was_name": "Ystafell wag (roedd yn %(oldName)s)",
     "encryption": {
@@ -965,7 +928,6 @@
         "import_invalid_passphrase": "Methodd y gwiriad dilysu: cyfrinair anghywir?",
         "key_storage_out_of_sync": "Nid yw eich storfa allweddi wedi'i gydweddu.",
         "key_storage_out_of_sync_description": "Cadarnhewch eich allwedd adfer i gynnal mynediad i'ch storfa allweddi a'ch hanes negeseuon.",
-        "message_shared_by": "Rhannodd %(displayName)s (%(userId)s) y neges hon gan nad oeddech chi yn yr ystafell pan gafodd ei hanfon.",
         "messages_not_secure": {
             "cause_1": "Eich gweinydd cartref",
             "cause_2": "Y gweinydd cartref y mae'r defnyddiwr rydych chi'n ei wirio wedi'i gysylltu ag ef",
@@ -991,19 +953,8 @@
         "set_up_recovery": "Gosod  adfer",
         "set_up_recovery_toast_description": "Cynhyrchwch allwedd adfer y mae modd ei defnyddio i adfer hanes eich neges wedi'i hamgryptio rhag ofn i chi golli mynediad i'ch dyfeisiau.",
         "set_up_toast_title": "Gosod Copi Wrth Gefn Diogel",
-        "setup_secure_backup": {
-            "explainer": "Gwnewch gopi wrth gefn o'ch allweddi cyn allgofnodi er mwyn osgoi eu colli."
-        },
         "turn_on_key_storage": "Troi storfa allweddi ymlaen",
         "turn_on_key_storage_description": "Cadwch eich hunaniaeth cryptograffig a'ch allweddi neges yn ddiogel ar y gweinydd. Bydd hyn yn caniatáu ichi weld hanes eich neges ar unrhyw ddyfeisiau newydd. %1$s.",
-        "udd": {
-            "interactive_verification_button": "Dilyswch yn rhyngweithiol trwy emoji",
-            "other_ask_verify_text": "Gofynnwch i'r defnyddiwr hwn wirio ei sesiwn, neu ei wirio â llaw isod.",
-            "other_new_session_text": "Mae %(matere)s (%(userId)s) wedi mewngofnodi i sesiwn newydd heb ei wirio:",
-            "own_ask_verify_text": "Dilyswch eich sesiwn arall gan ddefnyddio un o'r dewisiadau isod.",
-            "own_new_session_text": "Fe wnaethoch chi fewngofnodi i sesiwn newydd heb ei wirio:",
-            "title": "Heb Ymddiried"
-        },
         "unable_to_setup_keys_error": "Methu gosod allweddi",
         "verification": {
             "accepting": "Yn derbyn…",
@@ -1105,8 +1056,8 @@
         "verification_requested_toast_title": "Gofynnwyd am ddilysiad",
         "verified_identity_changed": "Cafodd hunaniaeth (<b>%(userId)s</b>) %(displayName)s ei ailosod. <a>Dysgu rhagor</a>",
         "verified_identity_changed_no_displayname": "Cafodd hunaniaeth <b>%(userId)s</b> ei ailosod. <a>Dysgu rhagor</a>",
-        "verify_toast_description": "Efallai na fydd defnyddwyr eraill yn ymddiried ynddo",
-        "verify_toast_title": "Gwiriwch y sesiwn hon",
+        "verify_toast_description": "O ddiwedd mis Hydref 2026 ymlaen, ni fydd dyfeisiau heb eu gwirio yn gallu anfon a derbyn negeseuon. <a> Dysgu mwy</a>",
+        "verify_toast_title": "Gwiriwch y ddyfais hon",
         "withdraw_verification_action": "Tynnu'r dilysiad yn ôl"
     },
     "error": {
@@ -1131,9 +1082,9 @@
         "non_urgent_echo_failure_toast": "Nid yw eich gweinydd yn ymateb i rai <a>ceisiadau</a>.",
         "resource_limits": "Mae'r gweinydd cartref hwn wedi mynd y tu hwnt i un o'i derfynau adnoddau.",
         "session_restore": {
-            "clear_storage_button": "Clirio Storio ac Arwyddo Allan",
-            "clear_storage_description": "Allgofnodi a dileu allweddi amgryptio?",
-            "description_1": "Wedi canfod gwall wrth geisio adfer eich sesiwn flaenorol.",
+            "clear_storage_button": "Tynnu'r ddyfais",
+            "clear_storage_description": "Tynnu&#39;r ddyfais hon ynghyd â&#39;i allweddi amgryptio?",
+            "description_1": "Wedi canfod gwall wrth geisio adfer eich sesiwn.",
             "description_2": "Os ydych wedi defnyddio fersiwn mwy diweddar o %(brand)s o'r blaen, mae'n bosibl y bydd eich sesiwn yn anghydnaws â'r fersiwn hon. Caewch y ffenestr hon a dychwelyd i'r fersiwn mwy diweddar.",
             "description_3": "Efallai y bydd clirio storfa eich porwr yn datrys y broblem, ond bydd yn eich allgofnodi ac yn achosi i unrhyw hanes sgwrsio sydd wedi'i amgryptio ddod yn annarllenadwy.",
             "title": "Methu adfer y sesiwn"
@@ -1524,7 +1475,6 @@
         "extended_profiles_msc_support": "Mae angen i'ch gweinydd gefnogi MSC4133",
         "feature_disable_call_per_sender_encryption": "Analluogi amgryptio fesul anfonwr ar gyfer Element Call",
         "feature_wysiwyg_composer_description": "Defnyddiwch destun cyfoethog yn lle Markdown yng nghyfansoddwr y neges.",
-        "group_calls": "Profiad galwad grŵp newydd",
         "group_developer": "Datblygwr",
         "group_encryption": "Amgryptio",
         "group_experimental": "Arbrofol",
@@ -1539,7 +1489,6 @@
         "group_voip": "Llais a Fideo",
         "group_widgets": "Teclynnau",
         "hidebold": "Cuddio dot hysbysu (dangos bathodynnau cownteri yn unig)",
-        "html_topic": "Dangos cynrychiolaeth HTML o bynciau ystafell",
         "join_beta": "Ymunwch â'r beta",
         "join_beta_reload": "Bydd ymuno â'r beta yn ail-lwytho %(brand)s.",
         "jump_to_date": "Symud i ddyddiad (ychwanegu / jumtodate a symud i benynnau dyddiad)",
@@ -1551,20 +1500,16 @@
         "location_share_live_description": "Gweithredu dros dro. Mae lleoliadau'n parhau yn hanes ystafelloedd.",
         "mjolnir": "Ffyrdd newydd o anwybyddu pobl",
         "msc3531_hide_messages_pending_moderation": "Gadael i cymedrolwyr guddio negeseuon tra'n aros i'w gymedroli.",
-        "new_room_list": "Galluogi rhestr ystafelloedd newydd",
         "notification_settings": "Gosodiadau Hysbysu Newydd",
         "notification_settings_beta_caption": "Cyflwyno ffordd symlach o newid eich gosodiadau hysbysu. Addaswch eich %(brand)s, yn union fel y dymunwch.",
         "notification_settings_beta_title": "Gosodiadau Hysbysiadau",
         "notifications": "Galluogi'r panel hysbysiadau ym mhennyn yr ystafell",
         "render_reaction_images": "Rendro delweddau personol mewn adweithiau",
         "render_reaction_images_description": "Weithiau'n cael eu hadnabod fel \"emojis cyfaddas\".",
-        "report_to_moderators": "Adrodd i cymedrolwyr",
-        "report_to_moderators_description": "Mewn ystafelloedd sy'n cefnogi cymedroli, bydd y botwm “Adrodd” yn gadael i chi adrodd ar gam-drin i gymedrolwyr ystafelloedd.",
         "sliding_sync": "Modd Cydweddu Llithro",
         "sliding_sync_description": "Wrthi'n datblygu, nid oes modd ei analluogi.",
         "sliding_sync_disabled_notice": "Allgofnodwch a mewngofnodi i analluogi",
         "sliding_sync_server_no_support": "Nid oes gan eich gweinydd gefnogaeth",
-        "under_active_development": "Yn cael ei ddatblygu.",
         "unrealiable_e2e": "Annibynadwy mewn ystafelloedd wedi'u hamgryptio",
         "video_rooms": "Ystafelloedd fideo",
         "video_rooms_a_new_way_to_chat": "Ffordd newydd o sgwrsio dros lais a fideo yn %(brand)s.",
@@ -1620,9 +1565,6 @@
         "room_rejoin_warning": "Nid yw'r ystafell hon yn gyhoeddus. Fyddwch chi ddim yn gallu ailymuno heb wahoddiad.",
         "space_rejoin_warning": "Nid yw'r gofod hwn yn gyhoeddus. Fyddwch chi ddim yn gallu ailymuno heb wahoddiad."
     },
-    "left_panel": {
-        "open_dial_pad": "Agor y pad deialu"
-    },
     "lightbox": {
         "rotate_left": "Cylchdroi i'r chwith",
         "rotate_right": "Cylchdroi i'r Dde",
@@ -1721,7 +1663,6 @@
         "mentions_and_keywords": "@crybwylliadau ac allweddeiriau",
         "mentions_and_keywords_description": "Dim ond gyda chyfeiriadau ac allweddeiriau fel y'u gosodwyd yn eich <a>gosodiadau</a> y cewch eich hysbysu",
         "mentions_keywords": "Crybwylliadau ac allweddeiriau",
-        "message_didnt_send": "Heb anfon y neges. Cliciwch am wybodaeth.",
         "mute_description": "Fyddwch chi ddim yn cael unrhyw hysbysiadau"
     },
     "notifier": {
@@ -1810,7 +1751,6 @@
     },
     "quick_settings": {
         "all_settings": "Pob gosodiad",
-        "metaspace_section": "Pinio i'r bar ochr",
         "sidebar_settings": "Rhagor o ddewisiadau",
         "title": "Gosodiadau cyflym"
     },
@@ -1828,25 +1768,10 @@
     },
     "report_content": {
         "description": "Bydd adrodd y neges hon yn anfon ei 'ID digwyddiad' unigryw at weinyddwr eich gweinyddwr cartref. Os yw negeseuon yn yr ystafell hon wedi'u hamgryptio, ni fydd gweinyddwr eich gweinydd cartref yn gallu darllen testun y neges na gweld unrhyw ffeiliau neu ddelweddau.",
-        "disagree": "Anghytuno",
-        "error_create_room_moderation_bot": "Methu creu ystafell gyda bot cymedroli",
         "hide_messages_from_user": "Gwiriwch a ydych am guddio'r holl negeseuon presennol ac yn y dyfodol gan y defnyddiwr hwn.",
         "ignore_user": "Anwybyddu defnyddiwr",
-        "illegal_content": "Cynnwys Anghyfreithlon",
         "missing_reason": "Dywedwch pam eich bod yn adrodd.",
-        "nature": "Dewiswch natur a disgrifiwch beth sy'n gwneud y neges hon yn ddifrïol.",
-        "nature_disagreement": "Mae'r hyn y mae'r defnyddiwr hwn yn ei ysgrifennu yn anghywir.\nBydd hyn yn cael ei adrodd i gymedrolwyr yr ystafell.",
-        "nature_illegal": "Mae'r defnyddiwr hwn yn dangos ymddygiad anghyfreithlon, er enghraifft trwy fygwth pobl neu fygwth trais.\nBydd hyn yn cael ei adrodd i'r cymedrolwyr ystafell a all uwchgyfeirio hyn i awdurdodau cyfreithiol.",
-        "nature_nonstandard_admin": "Mae'r ystafell hon wedi'i neilltuo ar gyfer cynnwys anghyfreithlon neu wenwynig neu mae'r cymedrolwyr yn methu â chymedroli cynnwys anghyfreithlon neu wenwynig.\nBydd hyn yn cael ei adrodd i weinyddwyr %(homeserver)s.",
-        "nature_nonstandard_admin_encrypted": "Mae'r ystafell hon wedi'i neilltuo ar gyfer cynnwys anghyfreithlon neu wenwynig neu mae'r cymedrolwyr yn methu â chymedroli cynnwys anghyfreithlon neu wenwynig.\nBydd hyn yn cael ei adrodd i weinyddwyr %(homeserver)s. NI fydd y gweinyddwyr yn gallu darllen cynnwys yr ystafell hon wedi'i amgryptio.",
-        "nature_other": "Unrhyw reswm arall. Disgrifiwch y broblem.\nBydd hyn yn cael ei adrodd i'r cymedrolwyr ystafell.",
-        "nature_spam": "Mae'r defnyddiwr hwn yn sbamio'r ystafell gyda hysbysebion, dolenni i hysbysebion neu i bropaganda.\nBydd hyn yn cael ei adrodd i'r cymedrolwyr ystafell.",
-        "nature_toxic": "Mae'r defnyddiwr hwn yn arddangos ymddygiad gwenwynig, er enghraifft trwy sarhau defnyddwyr eraill neu rannu cynnwys oedolion yn unig mewn ystafell sy'n gyfeillgar i deuluoedd neu dorri rheolau'r ystafell hon fel arall.\nBydd hyn yn cael ei adrodd i'r cymedrolwyr ystafell.",
-        "other_label": "Arall",
-        "report_content_to_homeserver": "Adrodd Cynnwys i'ch Gweinyddwr Homeserver",
-        "report_entire_room": "Rhoi gwybod am yr ystafell gyfan",
-        "spam_or_propaganda": "Sbam neu bropaganda",
-        "toxic_behaviour": "Ymddygiad Gwenwynig"
+        "report_content_to_homeserver": "Adrodd Cynnwys i'ch Gweinyddwr Homeserver"
     },
     "report_room": {
         "description": "Rhowch wybod am yr ystafell hon i ddarparwr eich cyfrif. Os yw'r neges wedi'i amgryptio, ni fydd eich gweinyddwr yn gallu eu darllen.",
@@ -2128,38 +2053,16 @@
         "waiting_for_join_title": "Yn aros i ddefnyddwyr ymuno â %(brand)s"
     },
     "room_list": {
-        "add_room_label": "Ychwanegu ystafell",
         "add_space_label": "Ychwanegu gofod",
-        "breadcrumbs_empty": "Dim ystafelloedd yr ymwelwyd â nhw yn ddiweddar",
-        "breadcrumbs_label": "Ymwelwyd ag ystafelloedd yn ddiweddar",
         "failed_add_tag": "Wedi methu ag ychwanegu tag %(tagName)s i'r ystafell",
         "failed_remove_tag": "Wedi methu â thynnu'r tag %(tagName)s o'r ystafell",
         "failed_set_dm_tag": "Wedi methu gosod tag neges uniongyrchol",
-        "home_menu_label": "Dewisiadau cartref",
-        "join_public_room_label": "Ymuno â'r ystafell gyhoeddus",
-        "joining_rooms_status": {
-            "Yn ymuno â %(count)s ystafell ar hyn o bryd": "other"
-        },
         "list_title": "Rhestr ystafelloedd",
         "more_options": {
             "leave_room": "Gadael yr ystafell"
         },
         "notification_options": "Dewisiadau hysbysu",
-        "redacting_messages_status": {
-            "Yn tynnu negeseuon mewn %(count)s ystafell": "other"
-        },
-        "show_less": "Dangos llai",
-        "show_n_more": {
-            "Dangos %(count)s yn rhagor": "other"
-        },
-        "show_previews": "Dangos rhagolwg o negeseuon",
-        "sort_by": "Trefnu yn ôl",
-        "sort_by_activity": "Gweithgaredd",
-        "sort_by_alphabet": "A-Z",
-        "sort_unread_first": "Dangos ystafelloedd gyda negeseuon heb eu darllen yn gyntaf",
-        "space_menu_label": "Dewislen %(spaceName)s",
-        "sublist_options": "Dewisiadau rhestr",
-        "suggested_rooms_heading": "Awgrym o Ystafelloedd"
+        "show_less": "Dangos llai"
     },
     "room_settings": {
         "access": {
@@ -2781,13 +2684,13 @@
             "room_activity": "Mae gweithgarwch ystafell newydd, uwchraddiadau a negeseuon statws yn digwydd",
             "rule_call": "Galwad gwahoddiad",
             "rule_contains_display_name": "Negeseuon yn cynnwys fy enw dangos",
-            "rule_contains_user_name": "Negeseuon yn cynnwys fy enw defnyddiwr",
+            "rule_contains_user_name": "@crybwylliadau ac atebion",
             "rule_encrypted": "Negeseuon wedi'u hamgryptio mewn sgyrsiau grŵp",
             "rule_encrypted_room_one_to_one": "Negeseuon wedi'u hamgryptio mewn sgyrsiau un-i-un",
             "rule_invite_for_me": "Pan yn cael fy ngwahodd i ystafell",
             "rule_message": "Negeseuon mewn sgyrsiau grŵp",
             "rule_room_one_to_one": "Negeseuon mewn sgyrsiau un-i-un",
-            "rule_roomnotif": "Negeseuon yn cynnwys @room",
+            "rule_roomnotif": "crybwylliadau @ystafell",
             "rule_suppress_notices": "Negeseuon a anfonwyd gan bot",
             "rule_tombstone": "Pan fydd ystafelloedd yn cael eu huwchraddio",
             "show_message_desktop_notification": "Dangos neges mewn hysbysiad bwrdd gwaith",
@@ -2865,22 +2768,37 @@
         "send_typing_notifications": "Anfon hysbysiadau teipio",
         "sessions": {
             "best_security_note": "Er mwyn sicrhau'r diogelwch gorau, gwiriwch eich sesiynau ac allgofnodwch o unrhyw sesiwn nad ydych yn ei hadnabod nac yn ei defnyddio mwyach.",
-            "browser": "Porwr",
             "confirm_sign_out": {
-                "Cadarnhau allgofnodi o'r ddyfeisiau hyn": "other",
-                "Cadarnhau allgofnodi o'r ddyfais hon": "one"
+                "zero": "Cadarnhau tynnu&#39;r dyfeisiau hyn",
+                "one": "Cadarnhau tynnu&#39;r ddyfais hon",
+                "two": "Cadarnhau tynnu&#39;r dyfeisiau hyn",
+                "few": "Cadarnhau tynnu&#39;r dyfeisiau hyn",
+                "many": "Cadarnhau tynnu&#39;r dyfeisiau hyn",
+                "other": "Cadarnhau tynnu&#39;r dyfeisiau hyn"
             },
             "confirm_sign_out_body": {
-                "Cliciwch y botwm isod i gadarnhau allgofnodi o'r dyfeisiau hyn.": "other",
-                "Cliciwch y botwm isod i gadarnhau allgofnodi o'r ddyfais hon.": "one"
+                "zero": "Cliciwch y botwm isod i gadarnhau tynnu&#39;r dyfeisiau hyn.",
+                "one": "Cliciwch y botwm isod i gadarnhau tynnu&#39;r ddyfais hon.",
+                "two": "Cliciwch y botwm isod i gadarnhau tynnu&#39;r dyfeisiau hyn.",
+                "few": "Cliciwch y botwm isod i gadarnhau tynnu&#39;r dyfeisiau hyn.",
+                "many": "Cliciwch y botwm isod i gadarnhau tynnu&#39;r dyfeisiau hyn.",
+                "other": "Cliciwch y botwm isod i gadarnhau tynnu&#39;r dyfeisiau hyn."
             },
             "confirm_sign_out_continue": {
-                "Allgofnodi o ddyfeisiau": "other",
-                "Allgofnodi o ddyfais": "one"
+                "zero": "Tynnu dyfeisiau",
+                "one": "Tynnu dyfais",
+                "two": "Tynnu dyfeisiau",
+                "few": "Tynnu dyfeisiau",
+                "many": "Tynnu dyfeisiau",
+                "other": "Tynnu dyfeisiau"
             },
             "confirm_sign_out_sso": {
-                "Cadarnhau allgofnodi o'r ddyfeisiau hyn trwy ddefnyddio Mewngofnodi Sengl i brofi pwy ydych chi.": "other",
-                "Cadarnhau allgofnodi o'r ddyfais hon trwy ddefnyddio Mewngofnodi Sengl i brofi pwy ydych chi.": "one"
+                "zero": "Cadarnhewch eich bod wedi tynnu&#39;r ddyfais hon drwy ddefnyddio Mewngofnodi Sengl i brofi pwy ydych chi.",
+                "one": "Cadarnhewch eich bod wedi tynnu&#39;r ddyfais hon drwy ddefnyddio Mewngofnodi Sengl i brofi pwy ydych chi.",
+                "two": "Cadarnhewch eich bod wedi tynnu&#39;r dyfeisiau hyn drwy ddefnyddio Mewngofnodi Sengl i brofi pwy ydych chi.",
+                "few": "Cadarnhewch eich bod wedi tynnu&#39;r dyfeisiau hyn drwy ddefnyddio Mewngofnodi Sengl i brofi pwy ydych chi.",
+                "many": "Cadarnhewch eich bod wedi tynnu&#39;r dyfeisiau hyn drwy ddefnyddio Mewngofnodi Sengl i brofi pwy ydych chi.",
+                "other": "Cadarnhewch eich bod wedi tynnu&#39;r dyfeisiau hyn drwy ddefnyddio Mewngofnodi Sengl i brofi pwy ydych chi."
             },
             "current_session": "Y sesiwn gyfredol",
             "desktop_session": "Sesiwn bwrdd gwaith",
@@ -2903,7 +2821,7 @@
             "inactive_sessions": "Sesiynau anweithredol",
             "inactive_sessions_explainer_1": "Mae sesiynau anweithredol yn sesiynau nad ydych wedi'u defnyddio ers peth amser, ond maent yn parhau i dderbyn allweddi amgryptio.",
             "inactive_sessions_explainer_2": "Mae cael gwared ar sesiynau anweithredol yn gwella diogelwch a pherfformiad, ac yn ei gwneud yn haws i chi nodi a yw sesiwn newydd yn amheus.",
-            "inactive_sessions_list_description": "Ystyriwch allgofnodi o hen sesiynau (%(inactiveAgeDays)s diwrnod neu hŷn) nad ydych yn eu defnyddio mwyach.",
+            "inactive_sessions_list_description": "Ystyriwch gael gwared ar hen sesiynau (%(inactiveAgeDays)s diwrnodau neu hŷn) nad ydych chi&#39;n eu defnyddio mwyach.",
             "ip": "Cyfeiriad IP",
             "last_activity": "Gweithgaredd ddiwethaf",
             "manage": "Rheoli'r sesiwn hon",
@@ -2916,7 +2834,6 @@
             "no_sessions": "Heb ganfod sesiynau.",
             "no_unverified_sessions": "Heb ganfod unrhyw sesiynau heb eu gwirio.",
             "no_verified_sessions": "Heb ganfod unrhyw sesiynau wedi'u dilysu.",
-            "os": "System weithredu",
             "other_sessions_heading": "Sesiynau eraill",
             "push_heading": "Hysbysiadau gwthiadwy",
             "push_subheading": "Derbyn hysbysiadau gwthio ar y sesiwn hon.",
@@ -2934,13 +2851,23 @@
             "sign_in_with_qr_button": "Dangos cod QR",
             "sign_in_with_qr_description": "Defnyddio cod QR i fewngofnodi i ddyfais arall a gosod negeseuon diogel.",
             "sign_in_with_qr_unsupported": "Nid yw'n cael ei gefnogi gan ddarparwr eich cyfrif",
-            "sign_out": "Allgofnodwch o'r sesiwn hon",
+            "sign_out": "Dileu'r sesiwn hon",
             "sign_out_all_other_sessions": "Allgofnodi o bob sesiwn arall (%(otherSessionsCount)s)",
             "sign_out_confirm_description": {
-                "Ydych chi'n siŵr eich bod chi eisiau allgofnodi o %(count)s sesiwn?": "other"
+                "zero": "Ydych chi&#39;n siŵr eich bod chi eisiau dileu&#39;r %(count)s sesiwn?",
+                "one": "Ydych chi&#39;n siŵr eich bod chi eisiau dileu&#39;r %(count)s sesiwn?",
+                "two": "Ydych chi&#39;n siŵr eich bod chi eisiau dileu&#39;r %(count)s sesiwn?",
+                "few": "Ydych chi&#39;n siŵr eich bod chi eisiau dileu&#39;r %(count)s sesiwn?",
+                "many": "Ydych chi&#39;n siŵr eich bod chi eisiau dileu&#39;r %(count)s sesiwn?",
+                "other": "Ydych chi&#39;n siŵr eich bod chi eisiau dileu&#39;r %(count)s sesiwn?"
             },
             "sign_out_n_sessions": {
-                "Allgofnodi o %(count)s sesiwn": "other"
+                "zero": "Dileu %(count)s sesiynnau",
+                "one": "Dileu %(count)s sesiwn",
+                "two": "Dileu %(count)s sesiwn",
+                "few": "Dileu %(count)s sesiwn",
+                "many": "Dileu %(count)s sesiwn",
+                "other": "Dileu %(count)s sesiwn"
             },
             "title": "Sesiynau",
             "unknown_session": "Math o sesiwn anhysbys",
@@ -2951,11 +2878,11 @@
             "unverified_sessions": "Sesiynau heb eu gwirio",
             "unverified_sessions_explainer_1": "Mae sesiynau heb eu gwirio yn sesiynau sydd wedi mewngofnodi gyda'ch tystlythyrau ond nad ydynt wedi'u traws-wirio.",
             "unverified_sessions_explainer_2": "Dylech wneud yn arbennig o sicr eich bod yn adnabod y sesiynau hyn gan y gallent gynrychioli defnydd anawdurdodedig o'ch cyfrif.",
-            "unverified_sessions_list_description": "Dilyswch eich sesiynau ar gyfer negeseuon diogel gwell neu allgofnodwch gan y rhai nad ydych yn eu hadnabod nac yn eu defnyddio mwyach.",
+            "unverified_sessions_list_description": "Gwiriwch eich sesiynau ar gyfer negeseuon diogel gwell neu tynnwch nhw o&#39;r rhai nad ydych chi&#39;n eu hadnabod na&#39;n eu defnyddio mwyach.",
             "url": "URL",
             "verified_session": "Sesiwn wedi'i dilysu",
             "verified_sessions": "Sesiynau wedi'u dilysu",
-            "verified_sessions_explainer_1": "Mae sesiynau wedi'u dilysu yn unrhyw le rydych chi'n defnyddio'r cyfrif hwn ar ôl nodi'ch cyfrinair neu gadarnhau pwy ydych chi gyda sesiwn arall sydd wedi'i dilysu.",
+            "verified_sessions_explainer_1": "Mae sesiynau wedi&#39;u gwirio wedi cael eu cadarnhau fel eich hunaniaeth ddigidol.",
             "verified_sessions_explainer_2": "Mae hyn yn golygu bod gennych yr holl allweddi sydd eu hangen i ddatgloi eich negeseuon wedi'u hamgryptio a chadarnhau i ddefnyddwyr eraill eich bod yn ymddiried yn y sesiwn hon.",
             "verified_sessions_list_description": "Er mwyn sicrhau'r diogelwch gorau, allgofnodwch o unrhyw sesiwn nad ydych yn ei hadnabod nac yn ei defnyddio mwyach.",
             "verify_session": "Dilysu sesiwn",
@@ -2975,13 +2902,11 @@
         "showbold": "Dangos pob gweithgaredd yn y rhestr ystafelloedd (smotiau neu nifer o negeseuon heb eu darllen)",
         "sidebar": {
             "dialog_title": "<strong>Gosodiadau:</strong> Bar Ochr",
-            "metaspaces_favourites_description": "Casglwch eich holl hoff ystafelloedd a phobl mewn un lle.",
             "metaspaces_home_all_rooms": "Dangos bob ystafell",
             "metaspaces_home_all_rooms_description": "Dangos eich holl ystafelloedd yn y Cartref, hyd yn oed os ydyn nhw mewn gofod.",
             "metaspaces_home_description": "Mae Cartref yn ddefnyddiol ar gyfer cael trosolwg o bopeth.",
             "metaspaces_orphans": "Ystafelloedd y tu allan i ofod",
             "metaspaces_orphans_description": "Casglwch eich holl ystafelloedd nad ydyn nhw'n rhan o ofod mewn un lle.",
-            "metaspaces_people_description": "Casglwch eich holl bobl mewn un lle.",
             "metaspaces_subsection": "Gofodau i'w dangos",
             "metaspaces_video_rooms": "Ystafelloedd fideo a chynadleddau",
             "metaspaces_video_rooms_description": "Casglwch yr holl ystafelloedd fideo preifat a chynadleddau.",
@@ -3008,17 +2933,16 @@
             "audio_output": "Allbwn Sain",
             "audio_output_empty": "Dim Allbynnau Sain wedi'u canfod",
             "auto_gain_control": "Rheolaeth ennill awtomatig",
-            "connection_section": "Cysylltiad",
             "dialog_title": "<strong>Gosodiadau:</strong> Llais a Fideo",
             "echo_cancellation": "Diddymu adlais",
             "echo_cancellation_description": "Yn tynnu atseinio o fewnbwn eich meicroffon yn ystod galwadau. Mae'r gosodiad hwn hefyd yn berthnasol i Element Call.",
             "enable_fallback_ice_server": "Caniatáu gweinydd cymorth galwadau wrth gefn (%(server)s)",
             "enable_fallback_ice_server_description": "Dim ond os nad yw eich gweinydd cartref yn cynnig un y mae'n berthnasol. Byddai eich cyfeiriad IP yn cael ei rannu yn ystod galwad.",
             "mirror_local_feed": "Drychu'r ffrwd fideo lleol",
-            "missing_permissions_prompt": "Caniatâd cyfryngau ar goll, cliciwch y botwm isod i ofyn.",
+            "missing_permissions_prompt": "I gymryd rhan mewn galwadau, rhowch ganiatâd i %(brand)s gael mynediad at eich dyfais sain a fideo.",
             "noise_suppression": "Lleihau sain",
             "noise_suppression_description": "Yn lleihau sŵn cefndir yn eich mewnbwn meicroffon yn ystod galwadau. Mae'r gosodiad hwn hefyd yn berthnasol i Element Call.",
-            "request_permissions": "Gofyn am ganiatâd cyfryngau",
+            "request_permissions": "Cais",
             "title": "Llais a Fideo",
             "video_input_empty": "Dim camerau gwe wedi'u canfod",
             "video_section": "Gosodiadau fideo",
@@ -3193,12 +3117,6 @@
     "space_settings": {
         "title": "Gosodiadau - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Nid oes gennych ganiatâd i ychwanegu ystafelloedd at y gofod hwn",
-        "error_no_permission_add_space": "Nid oes gennych ganiatâd i ychwanegu gofodau i'r gofod hwn",
-        "error_no_permission_create_room": "Nid oes gennych ganiatâd i greu ystafelloedd newydd yn y gofod hwn",
-        "error_no_permission_invite": "Nid oes gennych ganiatâd i wahodd pobl i'r gofod hwn"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Rhowch enw gweinydd newydd rydych chi am ei archwilio.",
@@ -3323,7 +3241,6 @@
         "download_action_downloading": "Yn llwytho i lawr",
         "download_failed": "Methodd y llwytho i lawr",
         "download_failed_description": "Bu gwall wrth lawrlwytho'r ffeil hon",
-        "e2e_state": "Cyflwr yr amgryptio o'r dechrau i'r diwedd",
         "edits": {
             "tooltip_label": "Wedi'i olygu am %(date)s. Cliciwch i weld golygiadau.",
             "tooltip_sub": "Cliciwch i weld golygiadau",
@@ -3404,9 +3321,7 @@
         "m.poll.start": "Mae %(senderName)s wedi dechrau arolwg - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "Mae %(senderDisplayName)s wedi newid afatar yr ystafell.",
-            "changed_img": "Mae %(senderDisplayName)s wedi newid yr afatar ystafell i<img/>",
-            "lightbox_title": "Newidiodd %(senderDisplayName)s yr afatar ar gyfer %(roomName)s",
-            "removed": "Mae %(senderDisplayName)s wedi tynnu afatar yr ystafell."
+            "lightbox_title": "Newidiodd %(senderDisplayName)s yr afatar ar gyfer %(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3453,7 +3368,7 @@
             "accepted_3pid_invite": "Derbyniodd %(targetName)s y gwahoddiad ar gyfer %(displayName)s",
             "accepted_invite": "Derbyniodd %(targetName)s wahoddiad",
             "ban": "Mae %(senderName)s wedi gwahardd %(targetName)s",
-            "ban_reason": "Mae %(senderName)s wedi gwahardd %(targetName)s: %(reason)s",
+            "ban_reason": "Gwaharddodd %(senderName)s ddefnyddiwr: %(reason)s",
             "change_avatar": "Mae %(senderName)s wedi newid eu llun proffil",
             "change_name": "Mae %(oldDisplayName)s wedi newid ei enw dangos i %(displayName)s",
             "change_name_avatar": "Mae %(oldDisplayName)s wedi newid ei enw dangos a llun proffil",
@@ -3557,7 +3472,7 @@
         },
         "redaction": "Neges wedi'i dileu gan %(matere)s",
         "reply": {
-            "error_loading": "Methu llwytho digwyddiad yr atebwyd iddo, naill ai nid yw'n bodoli neu nid oes gennych ganiatâd i'w weld.",
+            "error_loading": "Methu llwytho&#39;r digwyddiad yr atebwyd iddo; naill ai nid yw&#39;n bodoli neu nid oes gennych ganiatâd i&#39;w weld.",
             "in_reply_to": "<a>Yn ymateb i</a><pill>",
             "in_reply_to_for_export": "Yn ymateb i'r <a>neges hon</a>"
         },
@@ -4016,13 +3931,7 @@
         "close_to_view_right_panel": "Caewch y teclyn hwn i'w weld yn y panel hwn",
         "context_menu": {
             "delete": "Dileu teclyn",
-            "delete_warning": "Mae dileu teclyn yn ei ddileu ar gyfer pob defnyddiwr yn yr ystafell hon. Ydych chi'n siŵr eich bod am ddileu'r teclyn hwn?",
-            "move_left": "Symud i'r chwith",
-            "move_right": "Symud i'r dde",
-            "remove": "Tynnwch i bawb",
-            "revoke": "Diddymu caniatâd",
-            "screenshot": "Cymryd llun",
-            "start_audio_stream": "Dechrau ffrwd sain"
+            "delete_warning": "Mae dileu teclyn yn ei ddileu ar gyfer pob defnyddiwr yn yr ystafell hon. Ydych chi'n siŵr eich bod am ddileu'r teclyn hwn?"
         },
         "cookie_warning": "Gall y teclyn hwn ddefnyddio cwcis.",
         "error_hangup_description": "Rydych wedi'ch datgysylltu o'r alwad. (Gwall: %(message)s)",
diff --git a/apps/web/src/i18n/strings/da.json b/apps/web/src/i18n/strings/da.json
index f02372c052..1c004bca53 100644
--- a/apps/web/src/i18n/strings/da.json
+++ b/apps/web/src/i18n/strings/da.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Emoji-vælger",
         "jump_first_invite": "Gå til første invitation.",
         "message_composer": "Skriv besked",
         "n_unread_messages": {
@@ -11,8 +10,6 @@
             "one": "1 ulæst omtale.",
             "other": "%(count)s ulæste beskeder, herunder omtaler."
         },
-        "recent_rooms": "Nylige rum",
-        "room_name": "Rum %(name)s",
         "room_status_bar": "Statusbjælke for rum",
         "seek_bar_label": "Progressionsmarkør for lydafspiller",
         "unread_messages": "Ulæste beskeder."
@@ -22,7 +19,6 @@
         "accept": "Accepter",
         "add": "Tilføj",
         "add_existing_room": "Tilføj eksisterende rum",
-        "add_people": "Tilføj personer",
         "apply": "Anvend",
         "approve": "Godkend",
         "ask_to_join": "Bed om at blive medlem",
@@ -57,7 +53,6 @@
         "enter_fullscreen": "Fuldskærmsvisning",
         "exit_fullscreeen": "Afslut fuldskærmsvisning",
         "expand": "Udvid",
-        "explore_public_rooms": "Udforsk offentlige rum",
         "explore_rooms": "Udforsk rum",
         "export": "Eksporter",
         "forward": "Videresend",
@@ -69,8 +64,6 @@
         "ignore": "Ignorere",
         "import": "Importér",
         "invite": "Invitere",
-        "invite_to_space": "Invitér til klynge",
-        "invites_list": "Invitationer",
         "join": "Deltag",
         "learn_more": "Få mere at vide",
         "leave": "Forlad",
@@ -97,7 +90,6 @@
         "rename": "Omdøb",
         "reply": "Besvar",
         "reply_in_thread": "Svar i tråd",
-        "report_content": "Anmeld indhold",
         "resend": "Send igen",
         "reset": "Nulstil",
         "resume": "Genoptag",
@@ -116,8 +108,6 @@
         "sign_out": "Fjern denne enhed",
         "skip": "Spring over",
         "start": "Start",
-        "start_chat": "Start samtale",
-        "start_new_chat": "Start ny samtale",
         "stop": "Stop",
         "submit": "Indsend",
         "subscribe": "Abonnér",
@@ -218,10 +208,7 @@
         "log_in_new_account": "<a>Log ind</a> på din nye konto.",
         "logout_dialog": {
             "description": "Er du sikker på, at du vil logge ud?",
-            "megolm_export": "Eksporter nøgler manuelt",
             "setup_key_backup_title": "Du vil miste adgang til dine krypterede beskeder",
-            "setup_secure_backup_description_1": "Krypterede beskeder er sikret med end-to-end encryption. Kun du og din(e) modpart(er) har nøglerne til at læse disse beskeder.",
-            "setup_secure_backup_description_2": "Når du logger ud, slettes disse nøgler fra denne enhed, hvilket betyder, at du ikke kan læse krypterede beskeder, medmindre du har nøglerne til dem på dine andre enheder eller har sikkerhedskopieret dem til serveren.",
             "skip_key_backup": "Jeg vil ikke have mine krypterede beskeder"
         },
         "misconfigured_body": "Bed din %(brand)s administrator om at kontrollere <a>din konfiguration</a> for forkerte eller dobbelte poster.",
@@ -453,7 +440,6 @@
         "encrypted": "Krypteret",
         "error": "Fejl",
         "faq": "Ofte stillede spørgsmål",
-        "favourites": "Favoritter",
         "feedback": "Feedback",
         "filter_results": "Filtrér resultater",
         "forward_message": "Videresend besked",
@@ -461,7 +447,6 @@
         "go_to_settings": "Gå til Indstillinger",
         "guest": "Gæst",
         "help": "Hjælp",
-        "historical": "Historisk",
         "home": "Hjem",
         "homeserver": "Hjemmeserver",
         "identity_server": "Identitetsserver",
@@ -473,12 +458,10 @@
         "light": "Lyst tema",
         "loading": "Indlæser...",
         "location": "Lokation",
-        "low_priority": "Lav prioritet",
         "matrix": "Matrix",
         "message": "Besked",
         "message_layout": "Besked-layout",
         "microphone": "Mikrofon",
-        "model": "Model",
         "modern": "Moderne",
         "mute": "Sæt på lydløs",
         "n_members": {
@@ -535,7 +518,6 @@
         "success": "Succes",
         "suggestions": "Forslag",
         "support": "Support",
-        "system_alerts": "Systemadvarsler",
         "theme": "Tema",
         "thread": "Tråd",
         "threads": "Tråde",
@@ -552,7 +534,6 @@
         "username": "Brugernavn",
         "verified": "Bekræftet",
         "version": "Version",
-        "video": "Video",
         "video_room": "Videorum",
         "view_message": "Se besked",
         "warning": "Advarsel"
@@ -782,7 +763,6 @@
         "thread_root_id": "Trådens root-ID: %(threadRootId)s",
         "threads_timeline": "Tidslinje for tråde",
         "title": "Udviklerværktøjer",
-        "toggle_event": "slå begivenhed til/fra",
         "toolbox": "Værktøjer",
         "use_at_own_risk": "Denne brugergrænseflade kontrollerer IKKE værdityperne. Brug på eget ansvar.",
         "user_read_up_to": "Bruger læser op til: ",
@@ -803,22 +783,6 @@
         "widget_screenshots": "Aktivér widget-skærmbilleder på understøttede widgets"
     },
     "dialog_close_label": "Luk dialogboksen",
-    "emoji": {
-        "categories": "Kategorier",
-        "category_activities": "Aktiviteter",
-        "category_animals_nature": "Dyr og natur",
-        "category_flags": "Flag",
-        "category_food_drink": "Mad og drikke",
-        "category_frequently_used": "Ofte brugt",
-        "category_objects": "Objekter",
-        "category_smileys_people": "Smileys og mennesker",
-        "category_symbols": "Symboler",
-        "category_travel_places": "Rejser og steder",
-        "quick_reactions": "Hurtige reaktioner"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Annullér søgning"
-    },
     "empty_room": "Tom klynge",
     "empty_room_was_name": "Tomt rum (var %(oldName)s)",
     "encryption": {
@@ -868,17 +832,6 @@
             "warning": "Hvis du ikke har fjernet gendannelsesmetoden, kan det være en hacker forsøger at få adgang til din konto. Skift din kontos adgangskode og indstil straks en ny gendannelsesmetode under Indstillinger."
         },
         "set_up_toast_title": "Opsæt sikkerhedskopiering",
-        "setup_secure_backup": {
-            "explainer": "Sikkerhedskopier dine nøgler før du logger ud, for at undgå at miste dem."
-        },
-        "udd": {
-            "interactive_verification_button": "Bekræft interaktivt med emoji",
-            "other_ask_verify_text": "Bed denne bruger om at bekræfte sin session, eller bekræft den manuelt nedenfor.",
-            "other_new_session_text": "%(name)s (%(userId)s) loggede ind på en ny session uden at verificere den:",
-            "own_ask_verify_text": "Bekræft din anden session ved hjælp af en af ​​mulighederne herunder.",
-            "own_new_session_text": "Du loggede på en ny session uden at bekræfte den:",
-            "title": "Ikke betroet"
-        },
         "unable_to_setup_keys_error": "Nøgler kunne ikke konfigureres",
         "verification": {
             "accepting": "Accepterer…",
@@ -1318,7 +1271,6 @@
         "experimental_description": "Er du i humør til at eksperimentere? Afprøv vores nyeste ideer, som stadig er under udvikling. Disse funktioner er ikke færdigukviklende; de kan være ustabile, kan ændres eller kan blive droppet helt. <a>Få mere at vide</a>.",
         "experimental_section": "Tidlige forhåndsvisninger",
         "feature_wysiwyg_composer_description": "Brug RTF-tekst i stedet for Markdown i meddelelseskomponisten.",
-        "group_calls": "Ny fællesopkaldsoplevelse",
         "group_developer": "Udvikler",
         "group_encryption": "Kryptering",
         "group_experimental": "Eksperimentel",
@@ -1333,7 +1285,6 @@
         "group_voip": "Stemme & Video",
         "group_widgets": "Widgets",
         "hidebold": "Skjul notifikationsprik (vis kun tællerbadges)",
-        "html_topic": "Vis HTML-repræsentation af rumemner",
         "join_beta": "Deltag i beta-versionen",
         "join_beta_reload": "Tilmelding til betaversionen vil genindlæse %(brand)s.",
         "jump_to_date": "Gå til dato (tilføjer /jumptodate og springer til datooverskrifter)",
@@ -1351,13 +1302,10 @@
         "notifications": "Aktivér meddelelsespanelet i rumoverskriften",
         "render_reaction_images": "Gengiv brugerdefinerede billeder i reaktioner",
         "render_reaction_images_description": "Somme tider kaldet \"brugerdefinerede emojis\".",
-        "report_to_moderators": "Rapporter til moderatorer",
-        "report_to_moderators_description": "I rum, der understøtter moderering, kan du bruge knappen \"Rapporter\" til at rapportere misbrug til rummoderatorerne.",
         "sliding_sync": "Sliding Sync-tilstand",
         "sliding_sync_description": "Under aktiv udvikling, kan ikke deaktiveres.",
         "sliding_sync_disabled_notice": "Log ud og ind igen for at deaktivere",
         "sliding_sync_server_no_support": "Din server er ikke understøttet",
-        "under_active_development": "Under aktiv udvikling.",
         "unrealiable_e2e": "Ustabil i krypterede rum",
         "video_rooms": "Videorum",
         "video_rooms_a_new_way_to_chat": "En ny måde at chatte over stemme og video på%(brand)s.",
@@ -1413,9 +1361,6 @@
         "room_rejoin_warning": "Dette rum er ikke offentligt. Du kan ikke deltage igen uden en invitation.",
         "space_rejoin_warning": "Denne klynge er ikke offentlig. Du har ikke mulighed for at tilslutte dig uden en invitation."
     },
-    "left_panel": {
-        "open_dial_pad": "Åbn opkaldstastaturet"
-    },
     "lightbox": {
         "rotate_left": "Roter mod venstre",
         "rotate_right": "Roter mod højre",
@@ -1499,7 +1444,6 @@
         "mentions_and_keywords": "@omtaler og søgeord",
         "mentions_and_keywords_description": "Få kun notifikationer for omtaler og søgeord som konfigureret under <a>indstillinger</a>",
         "mentions_keywords": "Omtaler og nøgleord",
-        "message_didnt_send": "Beskeden blev ikke sendt. Klik for mere information.",
         "mute_description": "Du vil ikke modtage nogen notifikationer"
     },
     "notifier": {
@@ -1583,7 +1527,6 @@
     },
     "quick_settings": {
         "all_settings": "Alle indstillinger",
-        "metaspace_section": "Fastgør til sidebar",
         "sidebar_settings": "Flere muligheder",
         "title": "Hurtige indstillinger"
     },
@@ -1597,25 +1540,10 @@
     },
     "report_content": {
         "description": "Indrapportering af denne besked vil sende dens unikke 'hændelses-ID' til administratoren af din hjemmeserver. Hvis beskeder i dette rum er krypteret, vil administratoren ikke være i stand til at læse beskedens indhold eller se filer eller billeder.",
-        "disagree": "Uenig",
-        "error_create_room_moderation_bot": "Kunne ikke oprette rum med moderationsbot",
         "hide_messages_from_user": "Marker, hvis du vil skjule alle nuværende og fremtidige beskeder fra denne bruger",
         "ignore_user": "Ignorér bruger",
-        "illegal_content": "Ulovligt indhold",
         "missing_reason": "Udfyld venligst årsagen til din indrapportering.",
-        "nature": "Vælg en kategori og beskriv hvad der gør denne besked krænkende.",
-        "nature_disagreement": "Det, denne bruger skriver, er forkert.\nDette vil blive rapporteret til rummets moderatorer.",
-        "nature_illegal": "Denne bruger udviser ulovlig adfærd, for eksempel ved at doxe andre eller true med vold.\nDette vil blive rapporteret til rum-moderatorerne, der kan tage det til de relevante myndigheder.",
-        "nature_nonstandard_admin": "Dette rum er dedikeret til ulovligt eller skadeligt indhold, eller moderatorerne undlader at moderere ulovligt eller skadeligt indhold.\nDette vil blive rapporteret til administratorerne af %(homeserver)s.",
-        "nature_nonstandard_admin_encrypted": "Dette rum er dedikeret til ulovligt eller skadeligt indhold, eller moderatorerne undlader at moderere ulovligt eller skadeligt indhold.\nDette vil blive rapporteret til administratorerne af %(homeserver)s. Administratorerne vil IKKE være i stand til at læse det krypterede indhold i dette rum.",
-        "nature_other": "Enhver anden årsag. Beskriv venligst problemet. \nDette vil blive rapporteret til rummets moderatorer.",
-        "nature_spam": "Denne bruger spammer rummet med reklamer, links til reklamer eller propaganda.\nDette vil blive rapporteret til rummets moderatorer.",
-        "nature_toxic": "Denne bruger udviser skadelig adfærd, for eksempel ved at fornærme andre brugere eller dele indhold kun for voksne i et familievenligt rum eller på anden måde overtræde reglerne for dette rum.\nDette vil blive rapporteret til rummoderatorerne.",
-        "other_label": "Andre",
-        "report_content_to_homeserver": "Rapportér indhold til din hjemmeservers administrator",
-        "report_entire_room": "Rapportér hele rummet",
-        "spam_or_propaganda": "Spam eller propaganda",
-        "toxic_behaviour": "Skadelig adfærd"
+        "report_content_to_homeserver": "Rapportér indhold til din hjemmeservers administrator"
     },
     "restore_key_backup_dialog": {
         "count_of_decryption_failures": "Kunne ikke dekryptere %(failedCount)s sessioner!",
@@ -1849,37 +1777,12 @@
         "waiting_for_join_title": "Venter på, at brugere deltager via %(brand)s"
     },
     "room_list": {
-        "add_room_label": "Tilføj rum",
         "add_space_label": "Tilføj klynge",
-        "breadcrumbs_empty": "Ingen nyligt besøgte rum",
-        "breadcrumbs_label": "Nyligt besøgte rum",
         "failed_add_tag": "Kunne ikke tilføje tag(s): %(tagName)s til rummet",
         "failed_remove_tag": "Kunne ikke fjerne tag(s): %(tagName)s fra rummet",
         "failed_set_dm_tag": "Kunne ikke indstille tagget til direkte beskeder",
-        "home_menu_label": "Hjemmeindstillinger",
-        "join_public_room_label": "Deltag i offentligt rum",
-        "joining_rooms_status": {
-            "one": "Tilslutter sig i øjeblikket %(count)s rum",
-            "other": "Tilslutter sig i øjeblikket %(count)s rum"
-        },
         "notification_options": "Notifikationsindstillinger",
-        "redacting_messages_status": {
-            "one": "Fjerner i øjeblikket beskeder i %(count)s rum",
-            "other": "Fjerner i øjeblikket beskeder i %(count)s rum"
-        },
-        "show_less": "Vis mindre",
-        "show_n_more": {
-            "one": "Vis %(count)s mere",
-            "other": "Vis %(count)s mere"
-        },
-        "show_previews": "Vis forhåndsvisninger af beskeder",
-        "sort_by": "Sortér efter",
-        "sort_by_activity": "Aktivitet",
-        "sort_by_alphabet": "A-Å",
-        "sort_unread_first": "Vis rum med ulæste beskeder først",
-        "space_menu_label": "%(spaceName)s menu",
-        "sublist_options": "Liste over muligheder",
-        "suggested_rooms_heading": "Foreslåede rum"
+        "show_less": "Vis mindre"
     },
     "room_settings": {
         "access": {
@@ -2453,7 +2356,6 @@
         "send_typing_notifications": "Send indtastningsmeddelelser",
         "sessions": {
             "best_security_note": "For at opnå den bedste sikkerhed skal du bekræfte dine sessioner og logge ud fra enhver session, som du ikke genkender eller bruger længere.",
-            "browser": "Browser",
             "confirm_sign_out": {
                 "one": "Bekræft fjernelse af denne enhed",
                 "other": "Bekræft fjernelse af disse enheder"
@@ -2502,7 +2404,6 @@
             "no_sessions": "Der blev ikke fundet nogen sessioner",
             "no_unverified_sessions": "Ingen ikke-verificerede sessioner fundet.",
             "no_verified_sessions": "Ingen verificerede sessioner fundet.",
-            "os": "Operativsystem",
             "other_sessions_heading": "Andre sessioner",
             "push_heading": "Push-meddelelser",
             "push_subheading": "Modtag push-meddelelser for denne session.",
@@ -2559,13 +2460,11 @@
         "show_stickers_button": "Vis klistermærkeknappen",
         "show_typing_notifications": "Vis indtastningsmeddelelser",
         "sidebar": {
-            "metaspaces_favourites_description": "Saml alle dine yndlingsrum og -personer på ét sted.",
             "metaspaces_home_all_rooms": "Vis alle rum",
             "metaspaces_home_all_rooms_description": "Vi alle dine rum i Hjem, selv hvis de er i en klynge",
             "metaspaces_home_description": "Hjem er godt til at få et overblik over det hele.",
             "metaspaces_orphans": "Rum udenfor en klynge",
             "metaspaces_orphans_description": "Saml alle dine rum, der ikke er en del af en klynge, på ét sted.",
-            "metaspaces_people_description": "Saml alle dine forbindelser på ét sted.",
             "metaspaces_subsection": "Klynger at vise",
             "metaspaces_video_rooms": "Video-rum og konferencer",
             "metaspaces_video_rooms_description": "Saml alle private video-rum og konferencer.",
@@ -2591,7 +2490,6 @@
             "audio_output": "Lydudgang",
             "audio_output_empty": "Ingen lydudgange registreret",
             "auto_gain_control": "Automatisk gain-kontrol",
-            "connection_section": "Forbindelse",
             "echo_cancellation": "Fjernelse af ekko",
             "enable_fallback_ice_server": "Tillad hjælpeserver som fallback til opkald (%(server)s)",
             "enable_fallback_ice_server_description": "Gælder kun, hvis din hjemmeserver ikke tilbyder en. Din IP-adresse vil blive delt under et opkald.",
@@ -2767,12 +2665,6 @@
     "space_settings": {
         "title": "Indstillinger - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Du har ikke tilladelse til at tilføje rum til denne klynge",
-        "error_no_permission_add_space": "Du har ikke tilladelse til at tilføje andre klynger til denne klynge",
-        "error_no_permission_create_room": "Du har ikke tilladelse til at oprette nye rum i denne klynge",
-        "error_no_permission_invite": "Du har ikke tilladelse til at invitere brugere til denne klynge"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Indtast navnet på en ny server, du ønsker at udforske.",
@@ -2890,7 +2782,6 @@
         "creation_summary_room": "%(creator)s oprettede og konfigurerede rummet.",
         "disambiguated_profile": "%(displayName)s (%(matrixId)s)",
         "download_action_downloading": "Downloader",
-        "e2e_state": "Tilstand på end-to-end krypteringen",
         "edits": {
             "tooltip_label": "Redigeret %(date)s. Klik for at se redigeringer.",
             "tooltip_sub": "Klik for at se redigeringer",
@@ -2971,9 +2862,7 @@
         "m.poll.start": "%(senderName)s har startet en afstemning - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s ændrede rummets avatar.",
-            "changed_img": "%(senderDisplayName)s ændrede rumavataren til <img/>",
-            "lightbox_title": "%(senderDisplayName)s ændrede avataren for %(roomName)s",
-            "removed": "%(senderDisplayName)s fjernede rummets avatar."
+            "lightbox_title": "%(senderDisplayName)s ændrede avataren for %(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3553,13 +3442,7 @@
         "close_to_view_right_panel": "Luk denne widget for at se den i dette panel",
         "context_menu": {
             "delete": "Slet widget",
-            "delete_warning": "Hvis du sletter en widget, fjernes den for alle brugere i dette rum. Er du sikker på, at du vil slette denne widget?",
-            "move_left": "Flyt til venstre",
-            "move_right": "Flyt til højre",
-            "remove": "Fjern for alle",
-            "revoke": "Tilbagekald tilladelser",
-            "screenshot": "Tag et billede",
-            "start_audio_stream": "Start lydstream"
+            "delete_warning": "Hvis du sletter en widget, fjernes den for alle brugere i dette rum. Er du sikker på, at du vil slette denne widget?"
         },
         "cookie_warning": "Denne widget kan bruge cookies.",
         "error_hangup_description": "Du blev afbrudt fra opkaldet. (Fejl:%(message)s )",
diff --git a/apps/web/src/i18n/strings/de_DE.json b/apps/web/src/i18n/strings/de_DE.json
index 0b5237af4f..1eab972c07 100644
--- a/apps/web/src/i18n/strings/de_DE.json
+++ b/apps/web/src/i18n/strings/de_DE.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Emoji-Auswahl",
         "jump_first_invite": "Zur ersten Einladung springen.",
         "message_composer": "Texteingabefeld",
         "n_unread_messages": {
@@ -11,8 +10,6 @@
             "other": "%(count)s ungelesene Nachrichten einschließlich Erwähnungen.",
             "one": "1 ungelesene Erwähnung."
         },
-        "recent_rooms": "Zuletzt besuchte Chats",
-        "room_name": "Chat %(name)s",
         "room_status_bar": "Chat-Statusleiste",
         "seek_bar_label": "Audio-Suchleiste",
         "unread_messages": "Ungelesene Nachrichten."
@@ -22,7 +19,6 @@
         "accept": "Akzeptieren",
         "add": "Hinzufügen",
         "add_existing_room": "Vorhandenen Chat hinzufügen",
-        "add_people": "Personen hinzufügen",
         "apply": "Anwenden",
         "approve": "Genehmigen",
         "ask_to_join": "Um Beitritt bitten",
@@ -57,7 +53,6 @@
         "enter_fullscreen": "Vollbild",
         "exit_fullscreeen": "Vollbild verlassen",
         "expand": "Ausklappen",
-        "explore_public_rooms": "Öffentliche Chats erkunden",
         "explore_rooms": "Chats erkunden",
         "export": "Exportieren",
         "forward": "Weiterleiten",
@@ -69,8 +64,6 @@
         "ignore": "Ignorieren",
         "import": "Importieren",
         "invite": "Einladen",
-        "invite_to_space": "In Space einladen",
-        "invites_list": "Einladungen",
         "join": "Betreten",
         "learn_more": "Mehr erfahren",
         "leave": "Verlassen",
@@ -97,7 +90,6 @@
         "rename": "Umbenennen",
         "reply": "Antworten",
         "reply_in_thread": "In Thread antworten",
-        "report_content": "Inhalt melden",
         "report_room": "Chat melden",
         "resend": "Erneut senden",
         "reset": "Zurücksetzen",
@@ -117,8 +109,6 @@
         "sign_out": "Abmelden",
         "skip": "Überspringen",
         "start": "Starte",
-        "start_chat": "Neuer Chat",
-        "start_new_chat": "Neue Direktnachricht",
         "stop": "Beenden",
         "submit": "Absenden",
         "subscribe": "Abonnieren",
@@ -219,10 +209,7 @@
         "log_in_new_account": "Mit deinem neuen Konto <a>anmelden</a>.",
         "logout_dialog": {
             "description": "Bist du sicher, dass du dich abmelden möchtest?",
-            "megolm_export": "Schlüssel manuell exportieren",
             "setup_key_backup_title": "Du wirst den Zugang zu deinen verschlüsselten Nachrichten verlieren",
-            "setup_secure_backup_description_1": "Verschlüsselte Nachrichten sind mit Ende-zu-Ende-Verschlüsselung gesichert. Nur du und der/die Empfänger haben die Schlüssel um diese Nachrichten zu lesen.",
-            "setup_secure_backup_description_2": "Wenn du dich abmeldest, werden die Schlüssel auf diesem Gerät gelöscht. Das bedeutet, dass du keine verschlüsselten Nachrichten mehr lesen kannst, wenn du die Schlüssel nicht auf einem anderen Gerät oder eine Sicherung auf dem Server hast.",
             "skip_key_backup": "Ich möchte meine verschlüsselten Nachrichten nicht"
         },
         "misconfigured_body": "Wende dich an deinen %(brand)s-Admin um <a>deine Konfiguration</a> auf ungültige oder doppelte Einträge zu überprüfen.",
@@ -274,7 +261,6 @@
             "point_the_camera": "Scanne den hier angezeigten QR-Code",
             "scan_code_instruction": "Scanne den QR-Code mit einem weiteren Gerät.",
             "scan_qr_code": "Anmeldung mit QR-Code",
-            "security_code": "Sicherheitscode",
             "security_code_prompt": "Wenn du dazu aufgefordert wirst, gib den folgenden Code auf deinem anderen Gerät ein.",
             "select_qr_code": "Wähle \"%(scanQRCode)s\"",
             "unsupported_explainer": "Dein Kontoanbieter unterstützt keine Anmeldung bei einem neuen Gerät per QR-Code.",
@@ -480,7 +466,6 @@
         "encrypted": "Verschlüsselt",
         "error": "Fehler",
         "faq": "Häufige Fragen",
-        "favourites": "Favoriten",
         "feedback": "Rückmeldung",
         "filter_results": "Ergebnisse filtern",
         "forward_message": "Nachricht weiterleiten",
@@ -488,7 +473,6 @@
         "go_to_settings": "Gehe zu Einstellungen",
         "guest": "Gast",
         "help": "Hilfe",
-        "historical": "Archiv",
         "home": "Startseite",
         "homeserver": "Heim-Server",
         "identity_server": "Identitäts-Server",
@@ -500,13 +484,11 @@
         "light": "Hell",
         "loading": "Lade …",
         "location": "Standort",
-        "low_priority": "Niedrige Priorität",
         "matrix": "Matrix",
         "message": "Nachricht",
         "message_layout": "Nachrichtenlayout",
         "message_timestamp_invalid": "Ungültiger Zeitstempel",
         "microphone": "Mikrofon",
-        "model": "Modell",
         "moderation_and_safety": "Moderation und Sicherheit",
         "modern": "Modern",
         "mute": "Stummschalten",
@@ -566,7 +548,6 @@
         "success": "Erfolg",
         "suggestions": "Vorschläge",
         "support": "Unterstützung",
-        "system_alerts": "Systembenachrichtigung",
         "theme": "Design",
         "thread": "Thema",
         "threads": "Threads",
@@ -583,7 +564,6 @@
         "username": "Benutzername",
         "verified": "Verifiziert",
         "version": "Version",
-        "video": "Video",
         "video_room": "Videochat",
         "view_message": "Nachricht anzeigen",
         "warning": "Warnung"
@@ -872,7 +852,6 @@
         "thread_root_id": "Thread-Ursprungs-ID: %(threadRootId)s",
         "threads_timeline": "Thread-Verlauf",
         "title": "Entwicklungswerkzeuge",
-        "toggle_event": "Event umschalten",
         "toolbox": "Werkzeugkasten",
         "use_at_own_risk": "Diese Benutzeroberfläche prüft nicht auf richtige Datentypen. Benutzung auf eigene Gefahr.",
         "user_avatar": "Avatar: %(avatar)s",
@@ -907,22 +886,6 @@
     },
     "dialog_close_label": "Dialog schließen",
     "download_completed": "Herunterladen fertiggestellt",
-    "emoji": {
-        "categories": "Kategorien",
-        "category_activities": "Aktivitäten",
-        "category_animals_nature": "Tiere und Natur",
-        "category_flags": "Flaggen",
-        "category_food_drink": "Essen und Trinken",
-        "category_frequently_used": "Oft verwendet",
-        "category_objects": "Objekte",
-        "category_smileys_people": "Smileys und Leute",
-        "category_symbols": "Symbole",
-        "category_travel_places": "Reisen und Orte",
-        "quick_reactions": "Schnelle Reaktionen"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Suche abbrechen"
-    },
     "empty_room": "Leerer Chat",
     "empty_room_was_name": "Leerer Chat (war %(oldName)s)",
     "encryption": {
@@ -960,7 +923,6 @@
         "import_invalid_passphrase": "Authentifizierung fehlgeschlagen: Falsches Passwort?",
         "key_storage_out_of_sync": "Ihr Schlüsselspeicher ist nicht synchronisiert.",
         "key_storage_out_of_sync_description": "Bestätige deinen Wiederherstellungsschlüssel, um weiterhin Zugriff auf den Schlüsselspeicher und den Nachrichtenverlauf zu haben.",
-        "message_shared_by": "Diese Nachricht wurde von %(displayName)s(%(userId)s ) weitergeleitet, da du zum Zeitpunkt des Versands kein Mitglied der Gruppe warst.",
         "messages_not_secure": {
             "cause_1": "Dein Heim-Server",
             "cause_2": "Der Heim-Server der Person, die du verifizierst",
@@ -986,19 +948,8 @@
         "set_up_recovery": "Wiederherstellung einrichten",
         "set_up_recovery_toast_description": "Erzeuge einen Wiederherstellungsschlüssel. Er wird verwendet, um den verschlüsselten Nachrichtenverlauf wiederherzustellen, falls du den Zugriff auf deine Geräte verlierst.",
         "set_up_toast_title": "Schlüsselsicherung einrichten",
-        "setup_secure_backup": {
-            "explainer": "Um deine Schlüssel nicht zu verlieren, musst du sie vor der Abmeldung sichern."
-        },
         "turn_on_key_storage": "Schlüsselspeicher einschalten",
         "turn_on_key_storage_description": "Die kryptografische Identität und die Schlüssel deiner Nachrichten sicher auf dem Server speichern. So kann der Nachrichtenverlauf auf allen neuen Geräten angezeigt werden.",
-        "udd": {
-            "interactive_verification_button": "Interaktiv per Emoji verifizieren",
-            "other_ask_verify_text": "Bitte diesen Nutzer, seine Sitzung zu verifizieren, oder verifiziere diese unten manuell.",
-            "other_new_session_text": "%(name)s (%(userId)s) hat sich zu einer neuen Sitzung angemeldet, ohne sie zu verifizieren:",
-            "own_ask_verify_text": "Verifiziere deine andere Sitzung mit einer der folgenden Optionen.",
-            "own_new_session_text": "Du hast dich in einer neuen Sitzung angemeldet ohne sie zu verifizieren:",
-            "title": "Nicht vertraut"
-        },
         "unable_to_setup_keys_error": "Schlüssel können nicht eingerichtet werden",
         "verification": {
             "accepting": "Annehmen…",
@@ -1512,7 +1463,6 @@
         "extended_profiles_msc_support": "Erfordert die Unterstützung von MSC4133 durch den Server",
         "feature_disable_call_per_sender_encryption": "Verschlüsselung per-sender für Element Anruf abschalten",
         "feature_wysiwyg_composer_description": "Verwende Textverarbeitung (Rich-Text) statt Markdown im Eingabefeld.",
-        "group_calls": "Neue Gruppenanruf-Erfahrung",
         "group_developer": "Entwickler",
         "group_encryption": "Verschlüsselung",
         "group_experimental": "Experimentell",
@@ -1527,7 +1477,6 @@
         "group_voip": "Anrufe",
         "group_widgets": "Widgets",
         "hidebold": "Benachrichtigungspunkt ausblenden (nur Zähler zeigen)",
-        "html_topic": "Zeige die HTML-Darstellung von Chat Themen",
         "join_beta": "Beta beitreten",
         "join_beta_reload": "Die Teilnahme an der Beta wird %(brand)s neustarten.",
         "jump_to_date": "Zu Datum springen ( /jumptodate bzw. Zu Datum springen im Header)",
@@ -1539,20 +1488,16 @@
         "location_share_live_description": "Vorläufige Implementierung: Standorte verbleiben im Nachrichtenverlauf.",
         "mjolnir": "Neue Methoden, Personen zu ignorieren",
         "msc3531_hide_messages_pending_moderation": "Erlaube Moderatoren, noch nicht moderierte Nachrichten auszublenden.",
-        "new_room_list": "Neue Chatroomliste aktivieren",
         "notification_settings": "Neue Benachrichtigungseinstellungen",
         "notification_settings_beta_caption": "Einen einfacheren Weg um die Einstellungen für Benachrichtigungen zu ändern vorstellen. Passe Deine %(brand)s so an wie Du willst.",
         "notification_settings_beta_title": "Benachrichtigungseinstellungen",
         "notifications": "Benachrichtigungen in der Chat-Kopfzeile einschalten",
         "render_reaction_images": "Benutzerdefinierte Bilder in Reaktionen anzeigen",
         "render_reaction_images_description": "Werden manchmal auch als „benutzerdefinierte Emojis“ bezeichnet.",
-        "report_to_moderators": "An Moderatoren melden",
-        "report_to_moderators_description": "In Chats, die Moderation unterstützen, kannst du mit der Schaltfläche „Melden“ missbräuchliche Verwendung an die Moderatoren melden.",
         "sliding_sync": "Sliding-Sync-Modus",
         "sliding_sync_description": "In aktiver Entwicklung, kann nicht deaktiviert werden. Derzeit nicht mit Element Call kompatibel.",
         "sliding_sync_disabled_notice": "Zum Deaktivieren, melde dich ab und erneut an",
         "sliding_sync_server_no_support": "Dein Server wird hier nicht unterstützt.",
-        "under_active_development": "In aktiver Entwicklung.",
         "unrealiable_e2e": "Nicht zuverlässig in verschlüsselten Chats",
         "video_rooms": "Videochats",
         "video_rooms_a_new_way_to_chat": "Eine neue Möglichkeit in %(brand)s über Audio und Video zu kommunizieren.",
@@ -1608,9 +1553,6 @@
         "room_rejoin_warning": "Dieser Chat ist nicht öffentlich und du kannst ihm ohne Einladung nicht erneut beitreten.",
         "space_rejoin_warning": "Du wirst diesen privaten Space nur mit einer Einladung wieder betreten können."
     },
-    "left_panel": {
-        "open_dial_pad": "Wähltastatur öffnen"
-    },
     "lightbox": {
         "rotate_left": "Nach links drehen",
         "rotate_right": "Nach rechts drehen",
@@ -1709,7 +1651,6 @@
         "mentions_and_keywords": "@Erwähnungen und Schlüsselwörter",
         "mentions_and_keywords_description": "Nur bei Erwähnungen und Schlüsselwörtern benachrichtigen, die du in den <a>Einstellungen</a> konfigurieren kannst",
         "mentions_keywords": "Erwähnungen und Schlüsselwörter",
-        "message_didnt_send": "Nachricht nicht gesendet. Klicke für Details.",
         "mute_description": "Du wirst keine Benachrichtigungen erhalten"
     },
     "notifier": {
@@ -1807,7 +1748,6 @@
     },
     "quick_settings": {
         "all_settings": "Alle Einstellungen",
-        "metaspace_section": "An Seitenleiste heften",
         "sidebar_settings": "Weitere Optionen",
         "title": "Schnelleinstellungen"
     },
@@ -1825,25 +1765,10 @@
     },
     "report_content": {
         "description": "Wenn du diese Nachricht meldest, wird die eindeutige Ereignis-ID an den Administrator deines Homeserver übermittelt. Wenn die Nachrichten verschlüsselt sind, kann dein Administrator sie nicht lesen und auch keine Dateien oder Bilder einsehen.",
-        "disagree": "Ablehnen",
-        "error_create_room_moderation_bot": "Erstellen des Chats mit Moderations-Bot nicht möglich",
         "hide_messages_from_user": "Prüfe, ob du alle aktuellen und zukünftigen Nachrichten dieses Nutzers verstecken willst.",
         "ignore_user": "Nutzer ignorieren",
-        "illegal_content": "Illegale Inhalte",
         "missing_reason": "Bitte gib an, weshalb du einen Fehler meldest.",
-        "nature": "Bitte wähle eine Kategorie aus und beschreibe, was die Nachricht missbräuchlich macht.",
-        "nature_disagreement": "Dieser Nutzer verbreitet Falschinformation.\nDies wird an die Moderatoren des Chats gemeldet.",
-        "nature_illegal": "Dieser Nutzer verhält sich illegal, beispielsweise durch das Veröffentlichen persönlicher Daten oder Gewaltdrohungen.\nDies wird an die Moderatoren des Chats gemeldet, welche dies an die Behörden weitergeben können.",
-        "nature_nonstandard_admin": "Dieser Chat wurde wegen illegalem oder toxischem Inhalt oder fehlender Moderation an den Administrator von %(homeserver)s gemeldet.",
-        "nature_nonstandard_admin_encrypted": "Dieser Chat wurde wegen illegalem oder toxischem Inhalt oder fehlender Moderation an den Administrator von %(homeserver)s gemeldet. Der Administrator wird KEINE verschlüsselten Inhalte in diesem Chat lesen können.",
-        "nature_other": "Anderer Grund. Bitte beschreibe das Problem.\nDies wird an die Moderatoren des Chats gemeldet.",
-        "nature_spam": "Dieser Nutzer spammt den Chat mit Werbung, Links zu Werbung oder Propaganda.\nDies wird an die Moderatoren des Chats gemeldet.",
-        "nature_toxic": "Dieser Benutzer zeigt toxisches Verhalten, etwa durch Beleidigen anderer Personen, Teilen von Erwachseneninhalten in familienfreundlichen Chat oder anderweitiges Missachten von Regeln.\nDies wird an die Moderatoren des Chats gemeldet.",
-        "other_label": "Sonstiges",
-        "report_content_to_homeserver": "Inhalte an die Administration deines Heim-Servers melden",
-        "report_entire_room": "Den ganzen Chat melden",
-        "spam_or_propaganda": "Spam oder Propaganda",
-        "toxic_behaviour": "Toxisches Verhalten"
+        "report_content_to_homeserver": "Inhalte an die Administration deines Heim-Servers melden"
     },
     "report_room": {
         "description": "Melde diesen Chat deinem Konto-Anbieter. Wenn die Nachrichten verschlüsselt sind, kann dein Administrator sie nicht lesen.",
@@ -2117,41 +2042,16 @@
         "waiting_for_join_title": "Warte darauf, dass Benutzer %(brand)s beitreten"
     },
     "room_list": {
-        "add_room_label": "Chat hinzufügen",
         "add_space_label": "Space hinzufügen",
-        "breadcrumbs_empty": "Keine kürzlich besuchten Chats",
-        "breadcrumbs_label": "Kürzlich besuchte Chats",
         "failed_add_tag": "Fehler beim Hinzufügen des \"%(tagName)s\"-Tags an den Chat",
         "failed_remove_tag": "Entfernen des Chat-Tags %(tagName)s fehlgeschlagen",
         "failed_set_dm_tag": "Fehler beim Setzen der Nachrichtenmarkierung",
-        "home_menu_label": "Startseiteneinstellungen",
-        "join_public_room_label": "Öffentlichem Chat beitreten",
-        "joining_rooms_status": {
-            "one": "Trete %(count)s Chat bei",
-            "other": "Trete %(count)s Chats bei"
-        },
         "list_title": "Chatliste",
         "more_options": {
             "leave_room": "Chat verlassen"
         },
         "notification_options": "Benachrichtigungsoptionen",
-        "redacting_messages_status": {
-            "one": "Entferne Nachrichten in %(count)s Chat",
-            "other": "Entferne Nachrichten in %(count)s Chats"
-        },
-        "show_less": "Weniger anzeigen",
-        "show_n_more": {
-            "other": "%(count)s weitere anzeigen",
-            "one": "%(count)s weitere anzeigen"
-        },
-        "show_previews": "Nachrichtenvorschau anzeigen",
-        "sort_by": "Sortieren nach",
-        "sort_by_activity": "Aktivität",
-        "sort_by_alphabet": "A–Z",
-        "sort_unread_first": "Zeige Chats mit ungelesenen Nachrichten zuerst",
-        "space_menu_label": "%(spaceName)s-Menü",
-        "sublist_options": "Optionen anzeigen",
-        "suggested_rooms_heading": "Vorgeschlagene Chats"
+        "show_less": "Weniger anzeigen"
     },
     "room_settings": {
         "access": {
@@ -2859,7 +2759,6 @@
         "send_typing_notifications": "Tippbenachrichtigungen senden",
         "sessions": {
             "best_security_note": "Für beste Sicherheit verifiziere deine Sitzungen und melde dich von allen Sitzungen ab, die du nicht erkennst oder nicht mehr verwendest.",
-            "browser": "Internet Browser",
             "confirm_sign_out": {
                 "one": "Abmelden des Geräts bestätigen",
                 "other": "Abmelden dieser Geräte bestätigen"
@@ -2910,7 +2809,6 @@
             "no_sessions": "Keine Sitzungen gefunden.",
             "no_unverified_sessions": "Keine unverifizierten Sitzungen gefunden.",
             "no_verified_sessions": "Keine verifizierten Sitzungen gefunden.",
-            "os": "Betriebssystem",
             "other_sessions_heading": "Andere Sitzungen",
             "push_heading": "Push-Benachrichtigungen",
             "push_subheading": "Erhalte Push-Benachrichtigungen in dieser Sitzung.",
@@ -2971,13 +2869,11 @@
         "showbold": "Alle Aktivitäten in der Chatroommliste anzeigen (Ausführungspunkte oder Anzahl ungelesener Nachrichten)",
         "sidebar": {
             "dialog_title": "<strong>Einstellungen:</strong> Seitenleiste",
-            "metaspaces_favourites_description": "Sammle alle deinen favorisierten Chats an einem Ort.",
             "metaspaces_home_all_rooms": "Alle Chats anzeigen",
             "metaspaces_home_all_rooms_description": "Alle Chats auf der Startseite anzeigen, auch wenn sie Teil eines Space sind.",
             "metaspaces_home_description": "Die Startseite bietet dir einen Überblick über deine Unterhaltungen.",
             "metaspaces_orphans": "Chats außerhalb von Spaces",
             "metaspaces_orphans_description": "Gruppiere all deine Chats, die nicht Teil eines Spaces sind, an einem Ort.",
-            "metaspaces_people_description": "Gruppiere all deine Direktnachrichten an einem Ort.",
             "metaspaces_subsection": "Anzuzeigende Spaces",
             "metaspaces_video_rooms": "Videochats und -konferenzen",
             "metaspaces_video_rooms_description": "Gruppiere alle privaten Videochats und -konferenzen.",
@@ -3004,7 +2900,6 @@
             "audio_output": "Audioausgabe",
             "audio_output_empty": "Keine Audioausgabe erkannt",
             "auto_gain_control": "Automatische Lautstärkeregelung",
-            "connection_section": "Verbindung",
             "dialog_title": "<strong>Einstellungen:</strong> Sprache und Video",
             "echo_cancellation": "Echounterdrückung",
             "echo_cancellation_description": "Entfernt das Echo aus deinem Mikrofon während Anrufen. Diese Einstellung gilt auch für Element Call.",
@@ -3189,12 +3084,6 @@
     "space_settings": {
         "title": "Einstellungen - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Du hast keine Berechtigung, Chats zu diesem Space hinzuzufügen",
-        "error_no_permission_add_space": "Du hast keine Berechtigung, Spaces zu diesem Space hinzuzufügen",
-        "error_no_permission_create_room": "Du hast keine Berechtigung, neue Chats in diesem Space zu erstellen",
-        "error_no_permission_invite": "Du hast keine Berechtigung, Personen in diesen Space einzuladen"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Gib den Namen des Servers an, den du erkunden möchtest.",
@@ -3321,7 +3210,6 @@
         "download_action_downloading": "Herunterladen",
         "download_failed": "Herunterladen fehlgeschlagen",
         "download_failed_description": "Beim Herunterladen dieser Datei ist ein Fehler aufgetreten",
-        "e2e_state": "Status der Ende zu Ende Verschlüssellung",
         "edits": {
             "tooltip_label": "Am %(date)s geändert. Klicke, um Änderungen anzuzeigen.",
             "tooltip_sub": "Klicke, um Änderungen anzuzeigen",
@@ -3403,9 +3291,7 @@
         "m.poll.start": "%(senderName)s hat eine Umfrage begonnen – %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s hat den Avatar des Chats geändert.",
-            "changed_img": "%(senderDisplayName)s hat den Avatar des Chats zu <img/> geändert",
-            "lightbox_title": "%(senderDisplayName)s hat den Avatar des Chats %(roomName)s geändert",
-            "removed": "%(senderDisplayName)s hat den Avatar des Chats entfernt."
+            "lightbox_title": "%(senderDisplayName)s hat den Avatar des Chats %(roomName)s geändert"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -4009,13 +3895,7 @@
         "close_to_view_right_panel": "Widget schließen und in diesem Panel anzeigen",
         "context_menu": {
             "delete": "Widget entfernen",
-            "delete_warning": "Das Löschen des Widgets entfernt es für alle in diesem Chat. Wirklich löschen?",
-            "move_left": "Nach links schieben",
-            "move_right": "Nach rechts schieben",
-            "remove": "Für alle entfernen",
-            "revoke": "Berechtigungen widerrufen",
-            "screenshot": "Bildschirmfoto",
-            "start_audio_stream": "Audiostream starten"
+            "delete_warning": "Das Löschen des Widgets entfernt es für alle in diesem Chat. Wirklich löschen?"
         },
         "cookie_warning": "Dieses Widget kann Cookies verwenden.",
         "error_hangup_description": "Du wurdest vom Anruf getrennt. (Error: %(message)s)",
diff --git a/apps/web/src/i18n/strings/el.json b/apps/web/src/i18n/strings/el.json
index 86d7ea72bf..5997088c70 100644
--- a/apps/web/src/i18n/strings/el.json
+++ b/apps/web/src/i18n/strings/el.json
@@ -9,8 +9,6 @@
             "one": "1 μη αναγνωσμένη αναφορά.",
             "other": "%(count)s μη αναγνωσμένα μηνύματα συμπεριλαμβανομένων των αναφορών."
         },
-        "recent_rooms": "Πρόσφατες αίθουσες",
-        "room_name": "Αίθουσα %(name)s",
         "unread_messages": "Μη αναγνωσμένα μηνύματα."
     },
     "a11y_jump_first_unread_room": "Μετάβαση στην πρώτη μη αναγνωσμένη αίθουσα.",
@@ -18,7 +16,6 @@
         "accept": "Αποδοχή",
         "add": "Προσθήκη",
         "add_existing_room": "Προσθήκη υπάρχουσας αίθουσας",
-        "add_people": "Προσθήκη ατόμων",
         "apply": "Εφαρμογή",
         "approve": "Έγκριση",
         "ask_to_join": "Αίτημα συμμετοχής",
@@ -51,7 +48,6 @@
         "enter_fullscreen": "Είσοδος σε πλήρη οθόνη",
         "exit_fullscreeen": "Έξοδος από την πλήρη οθόνη",
         "expand": "Επέκταση",
-        "explore_public_rooms": "Εξερευνήστε δημόσιες αίθουσες",
         "explore_rooms": "Εξερευνήστε αίθουσες",
         "export": "Εξαγωγή",
         "forward": "Προώθηση",
@@ -63,8 +59,6 @@
         "ignore": "Αγνοήστε",
         "import": "Εισαγωγή",
         "invite": "Πρόσκληση",
-        "invite_to_space": "Πρόσκληση στον χώρο",
-        "invites_list": "Προσκλήσεις",
         "join": "Συμμετοχή",
         "learn_more": "Μάθετε περισσότερα",
         "leave": "Αποχώρηση",
@@ -91,7 +85,6 @@
         "rename": "Μετονομασία",
         "reply": "Απάντηση",
         "reply_in_thread": "Απάντηση στο νήμα",
-        "report_content": "Αναφορά Περιεχομένου",
         "resend": "Αποστολή ξανά",
         "reset": "Επαναφορά",
         "resume": "Συνέχιση",
@@ -109,8 +102,6 @@
         "sign_out": "Κατάργηση αυτής της συσκευής",
         "skip": "Παράβλεψη",
         "start": "Έναρξη",
-        "start_chat": "Έναρξη συνομιλίας",
-        "start_new_chat": "Έναρξη νέας συνομιλίας",
         "stop": "Παύση",
         "submit": "Υποβολή",
         "subscribe": "Εγγραφείτε",
@@ -209,10 +200,7 @@
         "log_in_new_account": "<a>Συνδεθείτε</a> στον νέο σας λογαριασμό.",
         "logout_dialog": {
             "description": "Είσαστε σίγουροι ότι θέλετε να αποσυνδεθείτε;",
-            "megolm_export": "Μη αυτόματη εξαγωγή κλειδιών",
             "setup_key_backup_title": "Θα χάσετε την πρόσβαση στα κρυπτογραφημένα μηνύματά σας",
-            "setup_secure_backup_description_1": "Τα κρυπτογραφημένα μηνύματα προστατεύονται με κρυπτογράφηση από άκρο σε άκρο. Μόνο εσείς και οι παραλήπτες έχετε τα κλειδιά για να διαβάσετε αυτά τα μηνύματα.",
-            "setup_secure_backup_description_2": "Όταν αποσυνδεθείτε, αυτά τα κλειδιά θα διαγραφούν από αυτήν τη συσκευή, πράγμα που σημαίνει ότι δεν θα μπορείτε να διαβάσετε κρυπτογραφημένα μηνύματα, εκτός εάν έχετε τα κλειδιά για αυτά στις άλλες συσκευές σας ή έχετε δημιουργήσει αντίγραφα ασφαλείας τους στον διακομιστή.",
             "skip_key_backup": "Δε θέλω τα κρυπτογραφημένα μηνύματά μου"
         },
         "misconfigured_body": "Ζητήστε από τον %(brand)s διαχειριστή σας να ελέγξει <a>τις ρυθμίσεις σας</a> για λανθασμένες ή διπλότυπες καταχωρίσεις.",
@@ -423,7 +411,6 @@
         "encrypted": "Κρυπτογραφημένο",
         "error": "Σφάλμα",
         "faq": "Συχνές ερωτήσεις",
-        "favourites": "Αγαπημένα",
         "feedback": "Ανατροφοδότηση",
         "filter_results": "Φιλτράρισμα αποτελεσμάτων",
         "forward_message": "Προώθηση μηνύματος",
@@ -431,7 +418,6 @@
         "go_to_settings": "Μετάβαση στις Ρυθμίσεις",
         "guest": "Επισκέπτης",
         "help": "Βοήθεια",
-        "historical": "Ιστορικό",
         "home": "Αρχική",
         "homeserver": "Κεντρικός διακομιστής",
         "identity_server": "Διακομιστής ταυτότητας",
@@ -443,12 +429,10 @@
         "light": "Ανοιχτό",
         "loading": "Φόρτωση...",
         "location": "Τοποθεσία",
-        "low_priority": "Χαμηλής προτεραιότητας",
         "matrix": "Matrix",
         "message": "Μήνυμα",
         "message_layout": "Διάταξη μηνύματος",
         "microphone": "Μικρόφωνο",
-        "model": "Μοντέλο",
         "modern": "Μοντέρνο",
         "mute": "Σίγαση",
         "n_members": {
@@ -503,7 +487,6 @@
         "success": "Επιτυχία",
         "suggestions": "Προτάσεις",
         "support": "Υποστήριξη",
-        "system_alerts": "Ειδοποιήσεις συστήματος",
         "theme": "Θέμα",
         "thread": "Νήμα",
         "threads": "Νήμα εκτέλεσης",
@@ -519,7 +502,6 @@
         "username": "Όνομα χρήστη",
         "verified": "Επαληθευμένη",
         "version": "Έκδοση",
-        "video": "Βίντεο",
         "video_room": "Αίθουσα βίντεο",
         "view_message": "Προβολή μηνύματος",
         "warning": "Προειδοποίηση"
@@ -720,7 +702,6 @@
         "thread_root_id": "Thread Root ID: %(threadRootId)s",
         "threads_timeline": "Χρονολόγιο νημάτων",
         "title": "Εργαλεία προγραμματιστή",
-        "toggle_event": "μεταβολή συμβάντος",
         "toolbox": "Εργαλειοθήκη",
         "use_at_own_risk": "Αυτό το UI ΔΕΝ ελέγχει τους τύπους των τιμών. Χρησιμοποιήστε το με δική σας ευθύνη.",
         "user_read_up_to": "Ο χρήστης διάβασε μέχρι: ",
@@ -741,22 +722,6 @@
     },
     "dialog_close_label": "Κλείσιμο διαλόγου",
     "download_completed": "Η λήψη ολοκληρώθηκε",
-    "emoji": {
-        "categories": "Κατηγορίες",
-        "category_activities": "Δραστηριότητες",
-        "category_animals_nature": "Ζώα & Φύση",
-        "category_flags": "Σημαίες",
-        "category_food_drink": "Φαγητό & Ποτό",
-        "category_frequently_used": "Συχνά χρησιμοποιούμενα",
-        "category_objects": "Αντικείμενα",
-        "category_smileys_people": "Smileys & Άνθρωποι",
-        "category_symbols": "Σύμβολα",
-        "category_travel_places": "Ταξίδια & Μέρη",
-        "quick_reactions": "Γρήγορες Αντιδράσεις"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Ακύρωση αναζήτησης"
-    },
     "empty_room": "Άδειο δωμάτιο",
     "empty_room_was_name": "Άδεια αίθουσα (ήταν %(oldName)s)",
     "encryption": {
@@ -805,17 +770,6 @@
             "warning": "Εάν δεν καταργήσατε τη μέθοδο ανάκτησης, ένας εισβολέας μπορεί να προσπαθεί να αποκτήσει πρόσβαση στον λογαριασμό σας. Αλλάξτε τον κωδικό πρόσβασης του λογαριασμού σας και ορίστε μια νέα μέθοδο ανάκτησης αμέσως στις Ρυθμίσεις."
         },
         "set_up_toast_title": "Ρυθμίστε το αντίγραφο ασφαλείας",
-        "setup_secure_backup": {
-            "explainer": "Δημιουργήστε αντίγραφα ασφαλείας των κλειδιών σας πριν αποσυνδεθείτε για να μην τα χάσετε."
-        },
-        "udd": {
-            "interactive_verification_button": "Διαδραστική επαλήθευση με emoji",
-            "other_ask_verify_text": "Ζητήστε από αυτόν τον χρήστη να επιβεβαιώσει την συνεδρία του, ή επιβεβαιώστε την χειροκίνητα παρακάτω.",
-            "other_new_session_text": "Ο %(name)s (%(userId)s) συνδέθηκε σε μία νέα συνεδρία χωρίς να την επιβεβαιώσει:",
-            "own_ask_verify_text": "Επιβεβαιώστε την άλλη σας συνεδρία χρησιμοποιώντας μία από τις παρακάτω επιλογές.",
-            "own_new_session_text": "Συνδεθήκατε σε μια νέα συνεδρία χωρίς να την επιβεβαιώσετε:",
-            "title": "Μη Έμπιστο"
-        },
         "unable_to_setup_keys_error": "Δεν είναι δυνατή η ρύθμιση των κλειδιών",
         "verification": {
             "accepting": "Αποδοχή …",
@@ -1224,7 +1178,6 @@
         "dynamic_room_predecessors": "Δυναμικοί προκάτοχοι δωματίων",
         "element_call_video_rooms": "Δωμάτια βίντεο κλήσεων Element",
         "feature_wysiwyg_composer_description": "Χρήση εμπλουτισμένου κειμένου αντί για Markdown στον συντάκτη μηνυμάτων.",
-        "group_calls": "Νέα εμπειρία ομαδικής κλήσης",
         "group_developer": "Προγραμματιστής",
         "group_encryption": "Κρυπτογράφηση",
         "group_experimental": "Πειραματικό",
@@ -1238,7 +1191,6 @@
         "group_voip": "Φωνή & Βίντεο",
         "group_widgets": "Μικροεφαρμογές",
         "hidebold": "Απόκρυψη κουκκίδας ειδοποίησης (εμφάνιση μόνο σημάτων αριθμών)",
-        "html_topic": "Εμφάνιση HTML αναπαράστασης θεμάτων δωματίου",
         "join_beta": "Συμμετοχή στη beta",
         "jump_to_date": "Μετάβαση στην ημερομηνία (προσθέτει /μετάβαση στην ημερομηνία και μετάβαση στις κεφαλίδες ημερομηνίας)",
         "jump_to_date_msc_support": "Απαιτεί ο διακομιστής σου να υποστηρίζει το MSC3030",
@@ -1249,10 +1201,8 @@
         "mjolnir": "Νέοι τρόποι να αγνοείς τους ανθρώπους",
         "msc3531_hide_messages_pending_moderation": "Επιτρέψτε στους επόπτες να αποκρύψουν μηνύματα που βρίσκονται σε εκκρεμότητα.",
         "notification_settings": "Νέες Ρυθμίσεις Ειδοποιήσεων",
-        "report_to_moderators": "Αναφορά στους συντονιστές",
         "sliding_sync": "Λειτουργία Sliding Sync",
         "sliding_sync_description": "Υπό ενεργή ανάπτυξη, δεν μπορεί να απενεργοποιηθεί.",
-        "under_active_development": "Υπό ενεργή ανάπτυξη.",
         "video_rooms": "Δωμάτια βίντεο",
         "video_rooms_a_new_way_to_chat": "Ένας νέος τρόπος για συνομιλία μέσω φωνής και βίντεο με το %(brand)s.",
         "video_rooms_always_on_voip_channels": "Οι αίθουσες βίντεο είναι πάντα-ενεργά κανάλια VoIP ενσωματωμένα σε ένα δωμάτιο στο %(brand)s",
@@ -1303,9 +1253,6 @@
         "room_rejoin_warning": "Αυτό το δωμάτιο δεν είναι δημόσιο. Δε θα μπορείτε να ξανασυμμετάσχετε χωρίς πρόσκληση.",
         "space_rejoin_warning": "Αυτός ο χώρος δεν είναι δημόσιος. Δε θα μπορείτε να ξανασυμμετάσχετε χωρίς πρόσκληση."
     },
-    "left_panel": {
-        "open_dial_pad": "Άνοιγμα πληκτρολογίου κλήσης"
-    },
     "lightbox": {
         "rotate_left": "Περιστροφή αριστερά",
         "rotate_right": "Περιστροφή δεξιά"
@@ -1368,7 +1315,6 @@
         "mentions_and_keywords": "@αναφορές & λέξεις-κλειδιά",
         "mentions_and_keywords_description": "Λάβετε ειδοποιήσεις μόνο με αναφορές και λέξεις-κλειδιά όπως έχουν ρυθμιστεί στις <a>ρυθμίσεις</a> σας",
         "mentions_keywords": "Αναφορές & λέξεις-κλειδιά",
-        "message_didnt_send": "Το μήνυμα δεν στάλθηκε. Κάντε κλικ για πληροφορίες.",
         "mute_description": "Δεν θα λαμβάνετε ειδοποιήσεις"
     },
     "notifier": {
@@ -1447,7 +1393,6 @@
     },
     "quick_settings": {
         "all_settings": "Όλες οι ρυθμίσεις",
-        "metaspace_section": "Καρφίτσωμα στην πλαϊνή μπάρα",
         "sidebar_settings": "Περισσότερες επιλογές",
         "title": "Γρήγορες ρυθμίσεις"
     },
@@ -1463,19 +1408,8 @@
     },
     "report_content": {
         "description": "Η αναφορά αυτού του μηνύματος θα στείλει το μοναδικό «αναγνωριστικό συμβάντος» στον διαχειριστή του διακομιστή σας. Εάν τα μηνύματα σε αυτό το δωμάτιο είναι κρυπτογραφημένα, ο διαχειριστής του διακομιστή σας δε θα μπορεί να διαβάσει το κείμενο του μηνύματος ή να προβάλει αρχεία και εικόνες.",
-        "disagree": "Διαφωνώ",
-        "illegal_content": "Παράνομο Περιεχόμενο",
         "missing_reason": "Παρακαλώ πείτε μας γιατί κάνετε αναφορά.",
-        "nature": "Παρακαλώ επιλέξτε το είδος και περιγράψτε τι κάνει αυτό το μήνυμα καταχρηστικό.",
-        "nature_disagreement": "Αυτό που γράφει αυτός ο χρήστης είναι λάθος.\nΑυτό θα αναφερθεί στους συντονιστές του δωματίου.",
-        "nature_illegal": "Αυτός ο χρήστης εμφανίζει παράνομη συμπεριφορά, για παράδειγμα, διαρρέει απόρρητες πληροφορίες ατόμων ή απειλεί με βία.\nΑυτό θα αναφερθεί στους συντονιστές του δωματίου, οι οποίοι ενδέχεται να το αναφέρουν στις αρμόδιες αρχές.",
-        "nature_other": "Οποιοσδήποτε άλλος λόγος. Παρακαλώ περιγράψτε το πρόβλημα.\nΑυτό θα αναφερθεί στους συντονιστές του δωματίου.",
-        "nature_spam": "Αυτός ο χρήστης στέλνει ανεπιθύμητα μηνύματα στην αίθουσα με διαφημίσεις, συνδέσμους προς διαφημίσεις ή προπαγάνδα.\nΑυτό θα αναφερθεί στους συντονιστές του δωματίου.",
-        "other_label": "Άλλα",
-        "report_content_to_homeserver": "Αναφορά Περιεχομένου στον Διαχειριστή του Διακομιστή σας",
-        "report_entire_room": "Αναφορά ολόκληρου του δωματίου",
-        "spam_or_propaganda": "Spam ή προπαγάνδα",
-        "toxic_behaviour": "Τοξική Συμπεριφορά"
+        "report_content_to_homeserver": "Αναφορά Περιεχομένου στον Διαχειριστή του Διακομιστή σας"
     },
     "restore_key_backup_dialog": {
         "count_of_decryption_failures": "Αποτυχία αποκρυπτογράφησης %(failedCount)s συνεδριών!",
@@ -1637,36 +1571,11 @@
         }
     },
     "room_list": {
-        "add_room_label": "Προσθήκη δωματίου",
         "add_space_label": "Προσθήκη χώρου",
-        "breadcrumbs_empty": "Δεν υπάρχουν δωμάτια που επισκεφτήκατε πρόσφατα",
-        "breadcrumbs_label": "Δωμάτια που επισκεφτήκατε πρόσφατα",
         "failed_add_tag": "Δεν ήταν δυνατή η προσθήκη της ετικέτας %(tagName)s στο δωμάτιο",
         "failed_remove_tag": "Δεν ήταν δυνατή η διαγραφή της ετικέτας %(tagName)s από το δωμάτιο",
-        "home_menu_label": "Επιλογές αρχικής",
-        "join_public_room_label": "Εγγραφείτε στο δημόσιο δωμάτιο",
-        "joining_rooms_status": {
-            "one": "Αυτήν τη στιγμή συμμετέχετε σε%(count)sδωμάτιο",
-            "other": "Αυτήν τη στιγμή συμμετέχετε σε %(count)s δωμάτια"
-        },
         "notification_options": "Επιλογές ειδοποίησης",
-        "redacting_messages_status": {
-            "one": "Αυτήν τη στιγμή γίνεται κατάργηση μηνυμάτων σε %(count)s δωμάτιο",
-            "other": "Αυτήν τη στιγμή γίνεται κατάργηση μηνυμάτων σε %(count)s δωμάτια"
-        },
-        "show_less": "Εμφάνιση λιγότερων",
-        "show_n_more": {
-            "one": "Εμφάνιση %(count)s περισσότερων",
-            "other": "Εμφάνιση %(count)s περισσότερων"
-        },
-        "show_previews": "Εμφάνιση προεπισκοπήσεων μηνυμάτων",
-        "sort_by": "Ταξινόμηση κατά",
-        "sort_by_activity": "Δραστηριότητα",
-        "sort_by_alphabet": "Α-Ω",
-        "sort_unread_first": "Εμφάνιση δωματίων με μη αναγνωσμένα μηνύματα πρώτα",
-        "space_menu_label": "%(spaceName)s μενού",
-        "sublist_options": "Επιλογές λίστας",
-        "suggested_rooms_heading": "Προτεινόμενα δωμάτια"
+        "show_less": "Εμφάνιση λιγότερων"
     },
     "room_settings": {
         "access": {
@@ -2196,7 +2105,6 @@
         "send_typing_notifications": "Αποστολή ειδοποιήσεων πληκτρολόγησης",
         "sessions": {
             "best_security_note": "Για τη βέλτιστη ασφάλεια, επαληθεύστε τις συνεδρίες σας και αποσυνδεθείτε από οποιαδήποτε συνεδρία που δεν αναγνωρίζετε ή χρησιμοποιείτε πλέον.",
-            "browser": "Πρόγραμμα περιήγησης",
             "confirm_sign_out": {
                 "one": "Επιβεβαιώστε την αποσύνδεση αυτής της συσκευής",
                 "other": "Επιβεβαιώστε την αποσύνδεση αυτών των συσκευών"
@@ -2245,7 +2153,6 @@
             "no_sessions": "Δεν βρέθηκαν συνεδρίες.",
             "no_unverified_sessions": "Δεν βρέθηκαν μη επαληθευμένες συνεδρίες.",
             "no_verified_sessions": "Δεν βρέθηκαν επαληθευμένες συνεδρίες.",
-            "os": "Λειτουργικό σύστημα",
             "other_sessions_heading": "Άλλες συνεδρίες",
             "push_heading": "Ειδοποιήσεις push",
             "push_subheading": "Λάβετε ειδοποιήσεις push σε αυτήν τη συνεδρία.",
@@ -2302,13 +2209,11 @@
         "show_stickers_button": "Εμφάνιση κουμπιού αυτοκόλλητων",
         "show_typing_notifications": "Εμφάνιση ειδοποιήσεων πληκτρολόγησης",
         "sidebar": {
-            "metaspaces_favourites_description": "Ομαδοποιήστε όλα τα αγαπημένα σας δωμάτια και άτομα σε ένα μέρος.",
             "metaspaces_home_all_rooms": "Εμφάνιση όλων των δωματίων",
             "metaspaces_home_all_rooms_description": "Εμφάνιση όλων των δωματίων σας στην Αρχική, ακόμα κι αν βρίσκονται σε ένα χώρο.",
             "metaspaces_home_description": "Ο Αρχικός χώρος είναι χρήσιμος για να έχετε μια επισκόπηση των πάντων.",
             "metaspaces_orphans": "Δωμάτια εκτός χώρου",
             "metaspaces_orphans_description": "Ομαδοποιήστε σε ένα μέρος όλα τα δωμάτιά σας που δεν αποτελούν μέρος ενός χώρου.",
-            "metaspaces_people_description": "Ομαδοποιήστε όλα τα άτομα σας σε ένα μέρος.",
             "metaspaces_subsection": "Χώροι για εμφάνιση",
             "spaces_explainer": "Οι χώροι είναι τρόποι ομαδοποίησης αιθουσών και ανθρώπων. Παράλληλα με τους χώρους στους οποίους βρίσκεστε, μπορείτε να χρησιμοποιήσετε και κάποιους προκατασκευασμένους χώρους.",
             "title": "Πλαϊνή μπάρα"
@@ -2325,7 +2230,6 @@
             "audio_output": "Έξοδος ήχου",
             "audio_output_empty": "Δεν εντοπίστηκαν Έξοδοι Ήχου",
             "auto_gain_control": "Αυτόματος έλεγχος gain",
-            "connection_section": "Σύνδεση",
             "echo_cancellation": "Ακύρωση ηχούς",
             "enable_fallback_ice_server": "Να επιτρέπεται ο εναλλακτικής διακομιστής υποβοήθησης κλήσης (%(server)s )",
             "enable_fallback_ice_server_description": "Ισχύει μόνο εάν ο οικιακός διακομιστής σου δεν προσφέρει ένα. Η διεύθυνση IP σου θα κοινοποιηθεί κατά τη διάρκεια μιας κλήσης.",
@@ -2499,12 +2403,6 @@
     "space_settings": {
         "title": "Ρυθμίσεις - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Δεν έχετε δικαίωμα προσθήκης δωματίων σε αυτόν τον χώρο",
-        "error_no_permission_add_space": "Δεν έχετε δικαίωμα προσθήκης χώρων σε αυτόν τον χώρο",
-        "error_no_permission_create_room": "Δεν έχετε δικαίωμα δημιουργίας νέων δωματίων σε αυτόν τον χώρο",
-        "error_no_permission_invite": "Δεν έχετε δικαίωμα πρόσκλησης ατόμων σε αυτόν τον χώρο"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Εισαγάγετε το όνομα ενός νέου διακομιστή που θέλετε να εξερευνήσετε.",
@@ -2677,9 +2575,7 @@
         "m.poll.start": "%(senderName)s ξεκίνησε μια δημοσκόπηση - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "Ο %(senderDisplayName)s άλλαξε την εικόνα του δωματίου.",
-            "changed_img": "Ο %(senderDisplayName)s άλλαξε την εικόνα του δωματίου σε <img/>",
-            "lightbox_title": "Ο %(senderDisplayName)s άλλαξε την προσωπική εικόνα του %(roomName)s",
-            "removed": "Ο %(senderDisplayName)s διέγραψε την προσωπική εικόνα του δωματίου."
+            "lightbox_title": "Ο %(senderDisplayName)s άλλαξε την προσωπική εικόνα του %(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3235,13 +3131,7 @@
         "close_to_view_right_panel": "Κλείστε αυτήν τη μικροεφαρμογή για να την προβάλετε σε αυτόν τον πίνακα",
         "context_menu": {
             "delete": "Διαγραφή μικροεφαρμογής",
-            "delete_warning": "Η διαγραφή μιας μικροεφαρμογής την καταργεί για όλους τους χρήστες σε αυτό το δωμάτιο. Είστε βέβαιοι ότι θέλετε να τη διαγράψετε;",
-            "move_left": "Μετακίνηση αριστερά",
-            "move_right": "Μετακίνηση δεξιά",
-            "remove": "Κατάργηση για όλους",
-            "revoke": "Ανάκληση αδειών",
-            "screenshot": "Λήψη φωτογραφίας",
-            "start_audio_stream": "Έναρξη ροής ήχου"
+            "delete_warning": "Η διαγραφή μιας μικροεφαρμογής την καταργεί για όλους τους χρήστες σε αυτό το δωμάτιο. Είστε βέβαιοι ότι θέλετε να τη διαγράψετε;"
         },
         "cookie_warning": "Αυτή η μικροεφαρμογή μπορεί να χρησιμοποιεί cookies.",
         "error_hangup_description": "Αποσυνδεθήκατε από την κλήση. (Σφάλμα: %(message)s)",
diff --git a/apps/web/src/i18n/strings/en_EN.json b/apps/web/src/i18n/strings/en_EN.json
index 5d5c4d9b2a..090b808932 100644
--- a/apps/web/src/i18n/strings/en_EN.json
+++ b/apps/web/src/i18n/strings/en_EN.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Emoji picker",
         "jump_first_invite": "Jump to first invite.",
         "message_composer": "Message composer",
         "n_unread_messages": {
@@ -11,8 +10,6 @@
             "one": "1 unread mention.",
             "other": "%(count)s unread messages including mentions."
         },
-        "recent_rooms": "Recent rooms",
-        "room_name": "Room %(name)s",
         "room_status_bar": "Room status bar",
         "seek_bar_label": "Audio seek bar",
         "unread_messages": "Unread messages."
@@ -22,7 +19,6 @@
         "accept": "Accept",
         "add": "Add",
         "add_existing_room": "Add existing room",
-        "add_people": "Add people",
         "apply": "Apply",
         "approve": "Approve",
         "ask_to_join": "Ask to join",
@@ -57,7 +53,6 @@
         "enter_fullscreen": "Enter fullscreen",
         "exit_fullscreeen": "Exit fullscreen",
         "expand": "Expand",
-        "explore_public_rooms": "Explore public rooms",
         "explore_rooms": "Explore rooms",
         "export": "Export",
         "forward": "Forward",
@@ -69,8 +64,6 @@
         "ignore": "Ignore",
         "import": "Import",
         "invite": "Invite",
-        "invite_to_space": "Invite to space",
-        "invites_list": "Invites",
         "join": "Join",
         "learn_more": "Learn more",
         "leave": "Leave",
@@ -97,7 +90,6 @@
         "rename": "Rename",
         "reply": "Reply",
         "reply_in_thread": "Reply in thread",
-        "report_content": "Report Content",
         "report_room": "Report room",
         "resend": "Resend",
         "reset": "Reset",
@@ -117,8 +109,6 @@
         "sign_out": "Remove this device",
         "skip": "Skip",
         "start": "Start",
-        "start_chat": "Start chat",
-        "start_new_chat": "Start new chat",
         "stop": "Stop",
         "submit": "Submit",
         "subscribe": "Subscribe",
@@ -219,11 +209,9 @@
         "log_in_new_account": "<a>Log in</a> to your new account.",
         "logout_dialog": {
             "description": "Are you sure you want to remove this device?",
-            "megolm_export": "Manually export keys",
-            "setup_key_backup_title": "You'll lose access to your encrypted messages",
-            "setup_secure_backup_description_1": "Encrypted messages are secured with end-to-end encryption. Only you and the recipient(s) have the keys to read these messages.",
-            "setup_secure_backup_description_2": "When you remove this device you won't be able to read encrypted messages unless you have the keys for them on your other devices, or backed them up to the server.",
-            "skip_key_backup": "I don't want my encrypted messages"
+            "setup_key_backup_title": "You're about to lose access to your encrypted chats",
+            "setup_secure_backup_description": "This is your only device. If you remove it you'll need a recovery key in order to confirm your digital identity and restore your encrypted chats the next time you sign in.",
+            "skip_key_backup": "Remove this device anyway"
         },
         "misconfigured_body": "Ask your %(brand)s admin to check <a>your config</a> for incorrect or duplicate entries.",
         "misconfigured_title": "Your %(brand)s is misconfigured",
@@ -249,7 +237,9 @@
             "check_code_heading": "Enter the number shown on your other device",
             "check_code_input_label": "2-digit code",
             "check_code_mismatch": "The numbers don't match",
+            "choose_desktop_computer": "Choose \"%(desktopComputer)s\"",
             "completing_setup": "Completing set up of your new device",
+            "desktop_computer": "Desktop computer",
             "error_etag_missing": "An unexpected error occurred. This may be due to a browser extension, proxy server, or server misconfiguration.",
             "error_expired": "Sign in expired. Please try again.",
             "error_expired_title": "The sign in was not completed in time",
@@ -270,16 +260,22 @@
             "error_user_declined": "You or the account provider declined the sign in request.",
             "error_user_declined_title": "Sign in declined",
             "follow_remaining_instructions": "Follow the remaining instructions",
+            "open_element_mobile_device": "Open %(brand)s on your mobile device",
             "open_element_other_device": "Open %(brand)s on your other device",
             "point_the_camera": "Scan the QR code shown here",
-            "scan_code_instruction": "Scan the QR code with another device",
+            "ready_to_scan": "Ready to scan",
+            "scan_code_instruction": "Scan the QR code",
+            "scan_code_instruction_reciprocate": "Scan the QR code with another device",
             "scan_qr_code": "Sign in with QR code",
-            "security_code": "Security code",
-            "security_code_prompt": "If asked, enter the code below on your other device.",
+            "security_code_prompt": "Your account provider may ask for the following code to verify the sign in.",
+            "security_code_title": "Your verification code",
             "select_qr_code": "Select \"%(scanQRCode)s\"",
+            "select_ready_to_scan": "Select \"%(readyToScan)s\" and scan the QR code shown here",
+            "start_over": "Start over",
+            "tap_avatar_link_new_device": "Tap your avatar and select \"%(linkNewDevice)s\"",
             "unsupported_explainer": "Your account provider doesn't support signing into a new device with a QR code.",
             "unsupported_heading": "QR code not supported",
-            "waiting_for_device": "Waiting for device to sign in"
+            "waiting_for_device": "Waiting for your other device"
         },
         "register_action": "Create Account",
         "registration": {
@@ -289,6 +285,8 @@
         },
         "registration_disabled": "Registration has been disabled on this homeserver.",
         "registration_msisdn_field_required_invalid": "Enter phone number (required on this homeserver)",
+        "registration_rate_limited": "Too many attempts in a short time. Wait some time before trying again.",
+        "registration_rate_limited_with_time": "Too many attempts in a short time. Retry after %(timeout)s.",
         "registration_successful": "Registration Successful",
         "registration_username_in_use": "Someone already has that username. Try another or if it is you, sign in below.",
         "registration_username_unable_check": "Unable to check if username has been taken. Try again later.",
@@ -338,8 +336,10 @@
         "sign_in_description": "Use your account to continue.",
         "sign_in_instead": "Sign in instead",
         "sign_in_instead_prompt": "Already have an account? <a>Sign in here</a>",
+        "sign_in_manually": "Sign in manually",
         "sign_in_or_register": "Sign In or Create Account",
         "sign_in_or_register_description": "Use your account or create a new one to continue.",
+        "sign_in_with_qr": "Sign in with QR code",
         "sign_in_with_sso": "Sign in with single sign-on",
         "signing_in": "Signing In…",
         "soft_logout": {
@@ -481,7 +481,6 @@
         "encrypted": "Encrypted",
         "error": "Error",
         "faq": "FAQ",
-        "favourites": "Favourites",
         "feedback": "Feedback",
         "filter_results": "Filter results",
         "forward_message": "Forward message",
@@ -489,7 +488,6 @@
         "go_to_settings": "Go to Settings",
         "guest": "Guest",
         "help": "Help",
-        "historical": "Historical",
         "home": "Home",
         "homeserver": "Homeserver",
         "identity_server": "Identity server",
@@ -497,17 +495,16 @@
         "integration_manager": "Integration manager",
         "joined": "Joined",
         "labs": "Labs",
+        "legacy_voice_and_video_settings": "Matrix 1:1 Calls (Legacy)",
         "legal": "Legal",
         "light": "Light",
         "loading": "Loading…",
         "location": "Location",
-        "low_priority": "Low priority",
         "matrix": "Matrix",
         "message": "Message",
         "message_layout": "Message layout",
         "message_timestamp_invalid": "Invalid timestamp",
         "microphone": "Microphone",
-        "model": "Model",
         "moderation_and_safety": "Moderation and safety",
         "modern": "Modern",
         "mute": "Mute",
@@ -567,7 +564,6 @@
         "success": "Success",
         "suggestions": "Suggestions",
         "support": "Support",
-        "system_alerts": "System Alerts",
         "theme": "Theme",
         "thread": "Thread",
         "threads": "Threads",
@@ -584,7 +580,6 @@
         "username": "Username",
         "verified": "Verified",
         "version": "Version",
-        "video": "Video",
         "video_room": "Video room",
         "view_message": "View message",
         "warning": "Warning"
@@ -682,7 +677,6 @@
     "create_section_dialog": {
         "create_section": "Create section",
         "description": "Sections are only for you",
-        "edit_section": "Edit section",
         "label": "Section name",
         "title": "Create a section",
         "title_edition": "Edit a section"
@@ -892,12 +886,13 @@
         "thread_root_id": "Thread Root ID: %(threadRootId)s",
         "threads_timeline": "Threads timeline",
         "title": "Developer tools",
-        "toggle_event": "toggle event",
         "toolbox": "Toolbox",
         "use_at_own_risk": "This UI does NOT check the types of the values. Use at your own risk.",
         "user_avatar": "Avatar: %(avatar)s",
         "user_displayname": "Displayname: %(displayname)s",
         "user_id": "User ID: %(userId)s",
+        "user_identity": "Cryptographic identity",
+        "user_identity_unknown": "Unknown",
         "user_no_avatar": "Avatar: <i>None</i>",
         "user_no_displayname": "Displayname: <i>None</i>",
         "user_read_up_to": "User read up to: ",
@@ -927,22 +922,6 @@
     },
     "dialog_close_label": "Close dialog",
     "download_completed": "Download Completed",
-    "emoji": {
-        "categories": "Categories",
-        "category_activities": "Activities",
-        "category_animals_nature": "Animals & Nature",
-        "category_flags": "Flags",
-        "category_food_drink": "Food & Drink",
-        "category_frequently_used": "Frequently Used",
-        "category_objects": "Objects",
-        "category_smileys_people": "Smileys & People",
-        "category_symbols": "Symbols",
-        "category_travel_places": "Travel & Places",
-        "quick_reactions": "Quick Reactions"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Cancel search"
-    },
     "empty_room": "Empty room",
     "empty_room_was_name": "Empty room (was %(oldName)s)",
     "encryption": {
@@ -980,7 +959,6 @@
         "import_invalid_passphrase": "Authentication check failed: incorrect password?",
         "key_storage_out_of_sync": "Your key storage is out of sync.",
         "key_storage_out_of_sync_description": "Confirm your recovery key to maintain access to your key storage and message history.",
-        "message_shared_by": "%(displayName)s (%(userId)s) shared this message since you were not in the room when it was sent.",
         "messages_not_secure": {
             "cause_1": "Your homeserver",
             "cause_2": "The homeserver the user you're verifying is connected to",
@@ -1006,19 +984,8 @@
         "set_up_recovery": "Back up your chats",
         "set_up_recovery_toast_description": "Your chats are automatically backed up with end-to-end encryption. To restore this backup and retain your digital identity when you lose access to all your devices, you will need your recovery key.",
         "set_up_toast_title": "Set up Secure Backup",
-        "setup_secure_backup": {
-            "explainer": "Back up your keys before removing this device to avoid losing them."
-        },
         "turn_on_key_storage": "Turn on key storage",
         "turn_on_key_storage_description": "This will allow you to view your chat history on any new devices and is required for backup of chats and digital identity.",
-        "udd": {
-            "interactive_verification_button": "Interactively verify by emoji",
-            "other_ask_verify_text": "Ask this user to verify their session, or manually verify it below.",
-            "other_new_session_text": "%(name)s (%(userId)s) signed in to a new session without verifying it:",
-            "own_ask_verify_text": "Verify your other session using one of the options below.",
-            "own_new_session_text": "You signed in to a new session without verifying it:",
-            "title": "Not Trusted"
-        },
         "unable_to_setup_keys_error": "Unable to set up keys",
         "verification": {
             "accepting": "Accepting…",
@@ -1526,6 +1493,7 @@
         "bridge_state_manager": "This bridge is managed by <user />.",
         "bridge_state_workspace": "Workspace: <networkLink/>",
         "click_for_info": "Click for more info",
+        "config_only": "Can only be enabled via config.json.",
         "currently_experimental": "Currently experimental.",
         "custom_themes": "Support adding custom themes",
         "dynamic_room_predecessors": "Dynamic room predecessors",
@@ -1539,13 +1507,17 @@
         "experimental_section": "Early previews",
         "extended_profiles_msc_support": "Requires your server to support MSC4133",
         "feature_disable_call_per_sender_encryption": "Disable per-sender encryption for Element Call",
+        "feature_retention": {
+            "description": "Automatically remove messages from a room when they reach a configured retention period. Currently only supports reading settings.",
+            "disabled_sliding_sync": "Retention cannot be enabled when Sliding Sync is enabled.",
+            "display_name": "Message retention"
+        },
         "feature_user_status": {
             "description": "Enables being able to see and set a current status.",
             "display_name": "User status",
             "required_msc_support": "Requires MSC4429 (Profile Updates for Legacy Sync)"
         },
         "feature_wysiwyg_composer_description": "Use rich text instead of Markdown in the message composer.",
-        "group_calls": "New group call experience",
         "group_developer": "Developer",
         "group_encryption": "Encryption",
         "group_experimental": "Experimental",
@@ -1560,7 +1532,6 @@
         "group_voip": "Voice & Video",
         "group_widgets": "Widgets",
         "hidebold": "Hide notification dot (only display counters badges)",
-        "html_topic": "Show HTML representation of room topics",
         "join_beta": "Join the beta",
         "join_beta_reload": "Joining the beta will reload %(brand)s.",
         "jump_to_date": "Jump to date (adds /jumptodate and jump to date headers)",
@@ -1570,24 +1541,22 @@
         "leave_beta_reload": "Leaving the beta will reload %(brand)s.",
         "location_share_live": "Live Location Sharing",
         "location_share_live_description": "Temporary implementation. Locations persist in room history.",
+        "login_with_qr": "Log in with QR code",
         "mjolnir": "New ways to ignore people",
         "msc3531_hide_messages_pending_moderation": "Let moderators hide messages pending moderation.",
-        "new_room_list": "Enable new room list",
         "notification_settings": "New Notification Settings",
         "notification_settings_beta_caption": "Introducing a simpler way to change your notification settings. Customize your %(brand)s, just the way you like.",
         "notification_settings_beta_title": "Notification Settings",
         "notifications": "Enable the notifications panel in the room header",
         "render_reaction_images": "Render custom images in reactions",
         "render_reaction_images_description": "Sometimes referred to as \"custom emojis\".",
-        "report_to_moderators": "Report to moderators",
-        "report_to_moderators_description": "In rooms that support moderation, the “Report” button will let you report abuse to room moderators.",
-        "room_list_sections": "Room list sections",
         "sliding_sync": "Sliding Sync mode",
         "sliding_sync_description": "Under active development, cannot be disabled. Currently, not compatible with Element Call.",
         "sliding_sync_disabled_notice": "Sign in again to disable",
         "sliding_sync_server_no_support": "Your server lacks support",
-        "under_active_development": "Under active development.",
         "unrealiable_e2e": "Unreliable in encrypted rooms",
+        "url_preview_bundle": "URL Preview Bundle (MSC4095)",
+        "url_preview_bundle_description": "Send URL previews in message alongside message content",
         "video_rooms": "Video rooms",
         "video_rooms_a_new_way_to_chat": "A new way to chat over voice and video in %(brand)s.",
         "video_rooms_always_on_voip_channels": "Video rooms are always-on VoIP channels embedded within a room in %(brand)s.",
@@ -1642,9 +1611,6 @@
         "room_rejoin_warning": "This room is not public. You will not be able to rejoin without an invite.",
         "space_rejoin_warning": "This space is not public. You will not be able to rejoin without an invite."
     },
-    "left_panel": {
-        "open_dial_pad": "Open dial pad"
-    },
     "lightbox": {
         "rotate_left": "Rotate Left",
         "rotate_right": "Rotate Right",
@@ -1740,10 +1706,9 @@
         "level_notification": "Notification",
         "level_unsent": "Unsent",
         "mark_all_read": "Mark all as read",
-        "mentions_and_keywords": "@mentions & keywords",
-        "mentions_and_keywords_description": "Get notified only with mentions and keywords as set up in your <a>settings</a>",
+        "mentions_and_keywords": "@mentions and replies only",
+        "mentions_and_keywords_description": "Get notified only with mentions, replies and keywords as set up in your <a>settings</a>",
         "mentions_keywords": "Mentions and keywords",
-        "message_didnt_send": "Message didn't send. Click for info.",
         "mute_description": "You won't get any notifications"
     },
     "notifier": {
@@ -1841,7 +1806,6 @@
     },
     "quick_settings": {
         "all_settings": "All settings",
-        "metaspace_section": "Pin to sidebar",
         "sidebar_settings": "More options",
         "title": "Quick settings"
     },
@@ -1865,25 +1829,10 @@
     },
     "report_content": {
         "description": "Reporting this message will send its unique 'event ID' to the administrator of your homeserver. If messages in this room are encrypted, your homeserver administrator will not be able to read the message text or view any files or images.",
-        "disagree": "Disagree",
-        "error_create_room_moderation_bot": "Unable to create room with moderation bot",
         "hide_messages_from_user": "Check if you want to hide all current and future messages from this user.",
         "ignore_user": "Ignore user",
-        "illegal_content": "Illegal Content",
         "missing_reason": "Please fill why you're reporting.",
-        "nature": "Please pick a nature and describe what makes this message abusive.",
-        "nature_disagreement": "What this user is writing is wrong.\nThis will be reported to the room moderators.",
-        "nature_illegal": "This user is displaying illegal behaviour, for instance by doxing people or threatening violence.\nThis will be reported to the room moderators who may escalate this to legal authorities.",
-        "nature_nonstandard_admin": "This room is dedicated to illegal or toxic content or the moderators fail to moderate illegal or toxic content.\nThis will be reported to the administrators of %(homeserver)s.",
-        "nature_nonstandard_admin_encrypted": "This room is dedicated to illegal or toxic content or the moderators fail to moderate illegal or toxic content.\nThis will be reported to the administrators of %(homeserver)s. The administrators will NOT be able to read the encrypted content of this room.",
-        "nature_other": "Any other reason. Please describe the problem.\nThis will be reported to the room moderators.",
-        "nature_spam": "This user is spamming the room with ads, links to ads or to propaganda.\nThis will be reported to the room moderators.",
-        "nature_toxic": "This user is displaying toxic behaviour, for instance by insulting other users or sharing adult-only content in a family-friendly room or otherwise violating the rules of this room.\nThis will be reported to the room moderators.",
-        "other_label": "Other",
-        "report_content_to_homeserver": "Report Content to Your Homeserver Administrator",
-        "report_entire_room": "Report the entire room",
-        "spam_or_propaganda": "Spam or propaganda",
-        "toxic_behaviour": "Toxic Behaviour"
+        "report_content_to_homeserver": "Report Content to Your Homeserver Administrator"
     },
     "report_room": {
         "description": "Report this room to your account provider. If the messages are encrypted, your admin will not be able to read them.",
@@ -2159,46 +2108,21 @@
         "waiting_for_join_title": "Waiting for users to join %(brand)s"
     },
     "room_list": {
-        "add_room_label": "Add room",
         "add_space_label": "Add space",
-        "breadcrumbs_empty": "No recently visited rooms",
-        "breadcrumbs_label": "Recently visited rooms",
         "failed_add_tag": "Failed to add tag %(tagName)s to room",
         "failed_remove_tag": "Failed to remove tag %(tagName)s from room",
         "failed_set_dm_tag": "Failed to set direct message tag",
-        "home_menu_label": "Home options",
-        "join_public_room_label": "Join public room",
-        "joining_rooms_status": {
-            "one": "Currently joining %(count)s room",
-            "other": "Currently joining %(count)s rooms"
-        },
         "list_title": "Room list",
         "more_options": {
             "leave_room": "Leave room"
         },
         "notification_options": "Notification options",
-        "redacting_messages_status": {
-            "one": "Currently removing messages in %(count)s room",
-            "other": "Currently removing messages in %(count)s rooms"
-        },
         "section": {
             "chats": "Chats",
             "favourites": "Favourites",
             "low_priority": "Low Priority"
         },
-        "show_less": "Show less",
-        "show_n_more": {
-            "one": "Show %(count)s more",
-            "other": "Show %(count)s more"
-        },
-        "show_previews": "Show previews of messages",
-        "sort_by": "Sort by",
-        "sort_by_activity": "Activity",
-        "sort_by_alphabet": "A-Z",
-        "sort_unread_first": "Show rooms with unread messages first",
-        "space_menu_label": "%(spaceName)s menu",
-        "sublist_options": "List options",
-        "suggested_rooms_heading": "Suggested Rooms"
+        "show_less": "Show less"
     },
     "room_settings": {
         "access": {
@@ -2492,7 +2416,8 @@
         "warning_kind_files": "This version of %(brand)s does not support viewing some encrypted files",
         "warning_kind_files_app": "Use the <a>Desktop app</a> to see all encrypted files",
         "warning_kind_search": "This version of %(brand)s does not support searching encrypted messages",
-        "warning_kind_search_app": "Use the <a>Desktop app</a> to search encrypted messages"
+        "warning_kind_search_app": "Use the <a>Desktop app</a> to search encrypted messages",
+        "warning_kind_search_partial": "Results may be incomplete because your search index is still being built."
     },
     "setting": {
         "help_about": {
@@ -2823,13 +2748,13 @@
             "room_activity": "New room activity, upgrades and status messages occur",
             "rule_call": "Call invitation",
             "rule_contains_display_name": "Messages containing my display name",
-            "rule_contains_user_name": "Messages containing my username",
+            "rule_contains_user_name": "@mentions and replies",
             "rule_encrypted": "Encrypted messages in group chats",
             "rule_encrypted_room_one_to_one": "Encrypted messages in one-to-one chats",
             "rule_invite_for_me": "When I'm invited to a room",
             "rule_message": "Messages in group chats",
             "rule_room_one_to_one": "Messages in one-to-one chats",
-            "rule_roomnotif": "Messages containing @room",
+            "rule_roomnotif": "@room mentions",
             "rule_suppress_notices": "Messages sent by bot",
             "rule_tombstone": "When rooms are upgraded",
             "show_message_desktop_notification": "Show message in desktop notification",
@@ -2910,7 +2835,6 @@
         "send_typing_notifications": "Send typing notifications",
         "sessions": {
             "best_security_note": "For best security, verify your sessions and remove any session that you don't recognize or use anymore.",
-            "browser": "Browser",
             "confirm_sign_out": {
                 "one": "Confirm removing this device",
                 "other": "Confirm removing these devices"
@@ -2961,7 +2885,6 @@
             "no_sessions": "No sessions found.",
             "no_unverified_sessions": "No unverified sessions found.",
             "no_verified_sessions": "No verified sessions found.",
-            "os": "Operating system",
             "other_sessions_heading": "Other sessions",
             "push_heading": "Push notifications",
             "push_subheading": "Receive push notifications on this session.",
@@ -3017,18 +2940,17 @@
         "show_nsfw_content": "Show NSFW content",
         "show_read_receipts": "Show read receipts sent by other users",
         "show_redaction_placeholder": "Show a placeholder for removed messages",
+        "show_sections": "Show sections",
         "show_stickers_button": "Show stickers button",
         "show_typing_notifications": "Show typing notifications",
         "showbold": "Show all activity in the room list (dots or number of unread messages)",
         "sidebar": {
             "dialog_title": "<strong>Settings:</strong> Sidebar",
-            "metaspaces_favourites_description": "Group all your favourite rooms and people in one place.",
             "metaspaces_home_all_rooms": "Show all rooms",
             "metaspaces_home_all_rooms_description": "Show all your rooms in Home, even if they're in a space.",
             "metaspaces_home_description": "Home is useful for getting an overview of everything.",
             "metaspaces_orphans": "Rooms outside of a space",
             "metaspaces_orphans_description": "Group all your rooms that aren't part of a space in one place.",
-            "metaspaces_people_description": "Group all your people in one place.",
             "metaspaces_subsection": "Spaces to show",
             "metaspaces_video_rooms": "Video rooms and conferences",
             "metaspaces_video_rooms_description": "Group all private video rooms and conferences.",
@@ -3055,21 +2977,25 @@
             "audio_output": "Audio Output",
             "audio_output_empty": "No Audio Outputs detected",
             "auto_gain_control": "Automatic gain control",
-            "connection_section": "Connection",
             "dialog_title": "<strong>Settings:</strong> Voice & Video",
             "echo_cancellation": "Echo cancellation",
             "echo_cancellation_description": "Removes echo from your microphone input during calls. This setting also applies to Element Call.",
             "enable_fallback_ice_server": "Allow fallback call assist server (%(server)s)",
             "enable_fallback_ice_server_description": "Only applies if your homeserver does not offer one. Your IP address would be shared during a call.",
+            "enable_legacy_calls": "Enable Legacy voice/video calls",
+            "enable_legacy_calls_description": "Applies to Jitsi and 1:1 WebRTC calls",
             "mirror_local_feed": "Mirror local video feed",
-            "missing_permissions_prompt": "Missing media permissions, click the button below to request.",
+            "missing_permissions_prompt": "To participate in calls, give %(brand)s permission to access your audio and video device.",
             "noise_suppression": "Noise suppression",
             "noise_suppression_description": "Reduces background noise in your microphone input during calls. This setting also applies to Element Call.",
-            "request_permissions": "Request media permissions",
+            "permissions": "Allow microphone and camera access",
+            "request_permissions": "Request",
             "title": "Voice & Video",
             "video_input_empty": "No Webcams detected",
             "video_section": "Video settings",
             "voice_agc": "Automatically adjust the microphone volume",
+            "voice_input_description": "The audio input configured here is used for voice messages and calls (Legacy/1:1).",
+            "voice_input_section": "Audio Input",
             "voice_processing": "Voice processing",
             "voice_section": "Voice settings"
         },
@@ -3248,12 +3174,6 @@
     "space_settings": {
         "title": "Settings - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "You do not have permissions to add rooms to this space",
-        "error_no_permission_add_space": "You do not have permissions to add spaces to this space",
-        "error_no_permission_create_room": "You do not have permissions to create new rooms in this space",
-        "error_no_permission_invite": "You do not have permissions to invite people to this space"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Enter the name of a new server you want to explore.",
@@ -3380,7 +3300,6 @@
         "download_action_downloading": "Downloading",
         "download_failed": "Download failed",
         "download_failed_description": "An error occurred while downloading this file",
-        "e2e_state": "State of the end-to-end encryption",
         "edits": {
             "tooltip_label": "Edited at %(date)s. Click to view edits.",
             "tooltip_sub": "Click to view edits",
@@ -3465,9 +3384,7 @@
         "m.poll.start": "%(senderName)s has started a poll - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s changed the room avatar.",
-            "changed_img": "%(senderDisplayName)s changed the room avatar to <img/>",
-            "lightbox_title": "%(senderDisplayName)s changed the avatar for %(roomName)s",
-            "removed": "%(senderDisplayName)s removed the room avatar."
+            "lightbox_title": "%(senderDisplayName)s changed the avatar for %(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3622,7 +3539,7 @@
         },
         "redaction": "Message deleted by %(name)s",
         "reply": {
-            "error_loading": "Unable to load event that was replied to, it either does not exist or you do not have permission to view it.",
+            "error_loading": "Unable to load event that was replied to; either it does not exist or you do not have permission to view it.",
             "in_reply_to": "<a>In reply to</a> <pill>",
             "in_reply_to_for_export": "In reply to <a>this message</a>"
         },
@@ -3897,6 +3814,9 @@
         "verify_button": "Verify User",
         "verify_explainer": "For extra security, verify this user by checking a one-time code on both of your devices."
     },
+    "user_status": {
+        "on_a_call": "On a call"
+    },
     "voip": {
         "already_in_call": "Already in call",
         "already_in_call_person": "You're already in a call with this person.",
@@ -4093,13 +4013,7 @@
         "close_to_view_right_panel": "Close this widget to view it in this panel",
         "context_menu": {
             "delete": "Delete widget",
-            "delete_warning": "Deleting a widget removes it for all users in this room. Are you sure you want to delete this widget?",
-            "move_left": "Move left",
-            "move_right": "Move right",
-            "remove": "Remove for everyone",
-            "revoke": "Revoke permissions",
-            "screenshot": "Take a picture",
-            "start_audio_stream": "Start audio stream"
+            "delete_warning": "Deleting a widget removes it for all users in this room. Are you sure you want to delete this widget?"
         },
         "cookie_warning": "This widget may use cookies.",
         "error_hangup_description": "You were disconnected from the call. (Error: %(message)s)",
diff --git a/apps/web/src/i18n/strings/eo.json b/apps/web/src/i18n/strings/eo.json
index a92e8fa80c..2bcdddbb90 100644
--- a/apps/web/src/i18n/strings/eo.json
+++ b/apps/web/src/i18n/strings/eo.json
@@ -9,7 +9,6 @@
             "other": "%(count)s nelegitaj mesaĝoj, inkluzive menciojn.",
             "one": "1 nelegita mencio."
         },
-        "room_name": "Ĉambro %(name)s",
         "unread_messages": "Nelegitaj mesaĝoj."
     },
     "a11y_jump_first_unread_room": "Salti al unua nelegita ĉambro.",
@@ -43,7 +42,6 @@
         "enter_fullscreen": "Plenekrano",
         "exit_fullscreeen": "Eliru plenekrano",
         "expand": "Etendi",
-        "explore_public_rooms": "Esplori publikajn ĉambrojn",
         "explore_rooms": "Esplori ĉambrojn",
         "export": "Elporti",
         "forward": "Plusendi",
@@ -55,7 +53,6 @@
         "ignore": "Malatenti",
         "import": "Enporti",
         "invite": "Inviti",
-        "invites_list": "Invitoj",
         "join": "Aliĝi",
         "learn_more": "Ekscii plion",
         "leave": "Foriri",
@@ -74,7 +71,6 @@
         "register": "Registri",
         "remove": "Forigi",
         "reply": "Respondi",
-        "report_content": "Raporti enhavon",
         "resend": "Resendi",
         "reset": "Restarigi",
         "resume": "Daŭrigi",
@@ -91,7 +87,6 @@
         "sign_out": "Adiaŭi",
         "skip": "Preterpasi",
         "start": "Komenci",
-        "start_chat": "Komenci babilon",
         "stop": "Fini",
         "submit": "Sendi",
         "subscribe": "Aboni",
@@ -178,9 +173,7 @@
         "log_in_new_account": "<a>Saluti</a> per via nova konto.",
         "logout_dialog": {
             "description": "Ĉu vi certe volas adiaŭi?",
-            "megolm_export": "Mane elporti ŝlosilojn",
             "setup_key_backup_title": "Vi perdos aliron al viaj ĉifritaj mesaĝoj",
-            "setup_secure_backup_description_1": "Ĉifritaj mesaĝoj estas sekurigitaj per tutvoja ĉifrado. Nur vi kaj la ricevonto(j) havas la ŝlosilojn necesajn por legado.",
             "skip_key_backup": "Mi ne volas miajn ĉifritajn mesaĝojn"
         },
         "misconfigured_body": "Petu vian %(brand)s-administranton kontroli <a>vian agordaron</a> je malĝustaj aŭ duoblaj eroj.",
@@ -349,7 +342,6 @@
         "encrypted": "Ĉifrata",
         "error": "Eraro",
         "faq": "Oftaj demandoj",
-        "favourites": "Elstarigitaj",
         "feedback": "Prikomenti",
         "filter_results": "Filtri rezultojn",
         "forward_message": "Plusendi mesaĝon",
@@ -357,7 +349,6 @@
         "go_to_settings": "Iri al agordoj",
         "guest": "Gasto",
         "help": "Helpo",
-        "historical": "Estintaj",
         "home": "Hejmo",
         "homeserver": "Hejmservilo",
         "identity_server": "Identiga servilo",
@@ -367,7 +358,6 @@
         "legal": "Jura",
         "light": "Hela",
         "location": "Loko",
-        "low_priority": "Malpli gravaj",
         "message": "Mesaĝo",
         "message_layout": "Aranĝo de mesaĝoj",
         "microphone": "Mikrofono",
@@ -420,7 +410,6 @@
         "success": "Sukceso",
         "suggestions": "Rekomendoj",
         "support": "Subteno",
-        "system_alerts": "Sistemaj avertoj",
         "theme": "Haŭto",
         "thread": "Fadeno",
         "threads": "Fadenoj",
@@ -570,22 +559,6 @@
     },
     "dialog_close_label": "Fermi interagujon",
     "download_completed": "Elŝuto finiĝis",
-    "emoji": {
-        "categories": "Kategorioj",
-        "category_activities": "Agadoj",
-        "category_animals_nature": "Bestoj kaj naturo",
-        "category_flags": "Flagoj",
-        "category_food_drink": "Manĝaĵoj kaj trinkaĵoj",
-        "category_frequently_used": "Ofte uzataj",
-        "category_objects": "Aĵoj",
-        "category_smileys_people": "Mienoj kaj homoj",
-        "category_symbols": "Simboloj",
-        "category_travel_places": "Lokoj kaj vojaĝado",
-        "quick_reactions": "Rapidaj reagoj"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Nuligi serĉon"
-    },
     "empty_room": "Malplena ĉambro",
     "empty_room_was_name": "Malplena ĉambro (estis %(oldName)s)",
     "encryption": {
@@ -628,16 +601,6 @@
             "warning": "Se vi ne forigis la rehavan metodon, eble atakanto provas aliri vian konton. Vi tuj ŝanĝu la pasvorton de via konto, kaj agordu novan rehavan metodon en la agordoj."
         },
         "set_up_toast_title": "Agordi Sekuran savkopiadon",
-        "setup_secure_backup": {
-            "explainer": "Savkopiu viajn ŝlosilojn antaŭ adiaŭo, por ilin ne perdi."
-        },
-        "udd": {
-            "other_ask_verify_text": "Petu, ke ĉi tiu la uzanto kontrolu sian salutaĵon, aŭ kontrolu ĝin permane sube.",
-            "other_new_session_text": "%(name)s (%(userId)s) salutis novan salutaĵon ne kontrolante ĝin:",
-            "own_ask_verify_text": "Kontrolu vian alian salutaĵon per unu el la ĉi-subaj elektebloj.",
-            "own_new_session_text": "Vi salutis novan salutaĵon sen kontrolo:",
-            "title": "Nefidata"
-        },
         "unable_to_setup_keys_error": "Ne povas agordi ŝlosilojn",
         "verification": {
             "accepting": "Akceptante…",
@@ -978,7 +941,6 @@
         "currently_experimental": "Nuntempe eksperimenta.",
         "custom_themes": "Subteni aldonadon de propraj haŭtoj",
         "element_call_video_rooms": "Element Call videoĉambroj",
-        "group_calls": "La nova grupvoka sperto",
         "group_developer": "Programisto",
         "group_encryption": "Ĉifrado",
         "group_profile": "Profilo",
@@ -987,14 +949,12 @@
         "group_threads": "Fadenoj",
         "group_voip": "Voĉo kaj vido",
         "group_widgets": "Fenestraĵoj",
-        "html_topic": "Montru HTML-prezenton de ĉambrotemoj",
         "join_beta": "Aliĝi al provado",
         "jump_to_date": "Salti ĝis nun (aldonas /jumptodate kaj saltu ĝis nun kapliniojn)",
         "latex_maths": "Bildigi matematikon de Lateĥo en mesaĝoj",
         "leave_beta": "Ĉesi provadon",
         "location_share_live": "Viva Loka Kundivido",
         "mjolnir": "Novaj manieroj ignori personojn",
-        "report_to_moderators": "Raportu al moderigaĵoj",
         "video_rooms": "Videoĉambroj",
         "video_rooms_a_new_way_to_chat": "Nova maniero babili per voĉo kaj video en %(brand)s.",
         "video_rooms_always_on_voip_channels": "Videoĉambroj estas ĉiam ŝaltitaj VoIP-kanaloj enkonstruitaj en ĉambro en %(brand)s.",
@@ -1042,9 +1002,6 @@
         "room_rejoin_warning": "Ĉi tiu ĉambro ne estas publika. Vi ne povos re-aliĝi sen invito.",
         "space_rejoin_warning": "Ĉi tiu aro ne estas publika. Vi ne povos re-aliĝi sen invito."
     },
-    "left_panel": {
-        "open_dial_pad": "Malfermi ciferplaton"
-    },
     "lightbox": {
         "rotate_left": "Turni maldekstren",
         "rotate_right": "Turni dekstren"
@@ -1095,8 +1052,7 @@
         "level_activity": "Aktiveco",
         "level_none": "Neniu",
         "mark_all_read": "Marki ĉion legita",
-        "mentions_keywords": "Mencioj kaj ĉefvortoj",
-        "message_didnt_send": "Mesaĝo ne sendiĝis. Klaku por akiri informojn."
+        "mentions_keywords": "Mencioj kaj ĉefvortoj"
     },
     "notifier": {
         "m.key.verification.request": "%(name)s petas kontrolon"
@@ -1153,7 +1109,6 @@
     },
     "quick_settings": {
         "all_settings": "Ĉiuj agordoj",
-        "metaspace_section": "Fiksi al flanka breto",
         "sidebar_settings": "Pliaj elektebloj",
         "title": "Rapidaj agordoj"
     },
@@ -1169,19 +1124,8 @@
     },
     "report_content": {
         "description": "Per raporto de ĉi tiu mesaĝo vi sendos ĝian unikan «identigilon de okazo» al la administranto de via hejmservilo. Se mesaĝoj en ĉi tiu ĉambro estas ĉifrataj, la administranto de via hejmservilo ne povos legi la tekston de la mesaĝo, nek rigardi dosierojn aŭ bildojn.",
-        "disagree": "Malkonsento",
-        "illegal_content": "Kontraŭleĝa enhavo",
         "missing_reason": "Bonvolu skribi, kial vi raportas.",
-        "nature": "Bonvolu elekti karakteron kaj priskribi, kial la mesaĝo estas mistrakta.",
-        "nature_disagreement": "Tio, kion skribas ĉi tiu uzanto, maltaŭgas.\nTio ĉi raportiĝos al reguligistoj de la ĉambro.",
-        "nature_illegal": "Ĉi tiu uzanto kondutas kontraŭleĝe, ekzemple malkaŝante personajn informojn pri aliuloj, aŭ minacante per agreso.\nĈi tio raportiĝos al reguligistoj de la ĉambro, kiuj povos ĝin plusendi al leĝa aŭtoritato.",
-        "nature_other": "Alia kialo. Bonvolu priskribi la problemon.\nĈi tio raportiĝos al reguligistoj de la ĉambro.",
-        "nature_spam": "Ĉi tiu uzanto sendas rubmesaĝojn kun reklamoj, ligiloj al reklamoj, aŭ al propagando.\nĈi tio raportiĝos al reguligistoj de la ĉambro.",
-        "other_label": "Alia",
-        "report_content_to_homeserver": "Raporti enhavon al la administrantode via hejmservilo",
-        "report_entire_room": "Raporti la tutan ĉambron",
-        "spam_or_propaganda": "Rubmesaĝo aŭ propagando",
-        "toxic_behaviour": "Vunda konduto"
+        "report_content_to_homeserver": "Raporti enhavon al la administrantode via hejmservilo"
     },
     "restore_key_backup_dialog": {
         "count_of_decryption_failures": "Malsukcesis malĉifri%(failedCount)s salutaĵojn!",
@@ -1305,29 +1249,11 @@
         }
     },
     "room_list": {
-        "add_room_label": "Aldoni ĉambron",
         "add_space_label": "Aldoni aron",
-        "breadcrumbs_empty": "Neniuj freŝdate vizititaj ĉambroj",
-        "breadcrumbs_label": "Freŝe vizititiaj ĉambroj",
         "failed_add_tag": "Malsukcesis aldoni etikedon %(tagName)s al ĉambro",
         "failed_remove_tag": "Malsukcesis forigi etikedon %(tagName)s el la ĉambro",
-        "joining_rooms_status": {
-            "one": "Nun aliĝante al %(count)s ĉambro",
-            "other": "Nun aliĝante al %(count)s ĉambroj"
-        },
         "notification_options": "Elektebloj pri sciigoj",
-        "show_less": "Montri malpli",
-        "show_n_more": {
-            "other": "Montri %(count)s pliajn",
-            "one": "Montri %(count)s plian"
-        },
-        "show_previews": "Montri antaŭrigardojn al mesaĝoj",
-        "sort_by": "Ordigi laŭ",
-        "sort_by_activity": "Aktiveco",
-        "sort_by_alphabet": "A–Z",
-        "sort_unread_first": "Montri ĉambrojn kun nelegitaj mesaĝoj kiel unuajn",
-        "sublist_options": "Elektebloj pri listo",
-        "suggested_rooms_heading": "Rekomendataj ĉambroj"
+        "show_less": "Montri malpli"
     },
     "room_settings": {
         "access": {
@@ -1764,7 +1690,6 @@
         "send_read_receipts": "Sendi legitajn kvitanojn",
         "send_typing_notifications": "Sendi sciigojn pri tajpado",
         "sessions": {
-            "browser": "Retumilo",
             "hide_details": "Kaŝi detalojn",
             "inactive_sessions": "Neaktivaj salutaĵoj",
             "inactive_sessions_explainer_1": "Neaktivaj salutaĵoj estas salutaĵoj, kiujn vi ne uzis dum kelka tempo, sed ili daŭre ricevas ĉifrajn ŝlosilojn.",
@@ -1963,10 +1888,6 @@
     "space_settings": {
         "title": "Agordoj – %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Vi ne havas permeson aldoni ĉambrojn al ĉi tiu aro",
-        "error_no_permission_create_room": "Vi ne havas permeson krei novajn ĉambrojn en ĉi tiu aro"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Enigu la nomon de nova servilo, kiun vi volas esplori.",
@@ -2095,9 +2016,7 @@
         "m.poll.start": "%(senderName)s komencis balotenketon - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s ŝanĝis la profilbildon de ĉambro.",
-            "changed_img": "%(senderDisplayName)s agordis la ĉambran profilbildon al <img/>",
-            "lightbox_title": "%(senderDisplayName)s ŝanĝis la profilbildon de %(roomName)s",
-            "removed": "%(senderDisplayName)s forigis la ĉambran profilbildon."
+            "lightbox_title": "%(senderDisplayName)s ŝanĝis la profilbildon de %(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -2556,13 +2475,7 @@
         },
         "context_menu": {
             "delete": "Forigi fenestraĵon",
-            "delete_warning": "Forigo de fenestraĵo efektiviĝos por ĉiuj uzantoj en ĉi tiu ĉambro. Ĉu vi certe volas ĝin forigi?",
-            "move_left": "Movi maldekstren",
-            "move_right": "Movi dekstren",
-            "remove": "Forigi por ĉiuj",
-            "revoke": "Nuligi permesojn",
-            "screenshot": "Foti",
-            "start_audio_stream": "Komenci sonelsendon"
+            "delete_warning": "Forigo de fenestraĵo efektiviĝos por ĉiuj uzantoj en ĉi tiu ĉambro. Ĉu vi certe volas ĝin forigi?"
         },
         "cookie_warning": "Ĉi tiu fenestraĵo povas uzi kuketojn.",
         "error_loading": "Eraris enlegado de fenestraĵo",
diff --git a/apps/web/src/i18n/strings/es.json b/apps/web/src/i18n/strings/es.json
index 58f6347004..c4a372b376 100644
--- a/apps/web/src/i18n/strings/es.json
+++ b/apps/web/src/i18n/strings/es.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Selector de emojis",
         "jump_first_invite": "Salte a la primera invitación.",
         "message_composer": "Compositor de mensajes",
         "n_unread_messages": {
@@ -11,8 +10,6 @@
             "other": "%(count)s mensajes sin leer incluyendo menciones.",
             "one": "1 mención sin leer."
         },
-        "recent_rooms": "Salas recientes",
-        "room_name": "Sala %(name)s",
         "room_status_bar": "Barra de estado de la sala",
         "seek_bar_label": "Barra de búsqueda de audio",
         "unread_messages": "Mensajes sin leer."
@@ -22,7 +19,6 @@
         "accept": "Aceptar",
         "add": "Añadir",
         "add_existing_room": "Añadir sala ya existente",
-        "add_people": "Añadir gente",
         "apply": "Aplicar",
         "approve": "Aprobar",
         "ask_to_join": "Pedir acceso",
@@ -57,7 +53,6 @@
         "enter_fullscreen": "Pantalla completa",
         "exit_fullscreeen": "Salir de pantalla completa",
         "expand": "Expandir",
-        "explore_public_rooms": "Buscar salas públicas",
         "explore_rooms": "Explorar salas",
         "export": "Exportar",
         "forward": "Reenviar",
@@ -69,8 +64,6 @@
         "ignore": "Ignorar",
         "import": "Importar",
         "invite": "Invitar",
-        "invite_to_space": "Invitar al espacio",
-        "invites_list": "Invitaciones",
         "join": "Unirse",
         "learn_more": "Más información",
         "leave": "Salir",
@@ -97,7 +90,6 @@
         "rename": "Cambiar nombre",
         "reply": "Responder",
         "reply_in_thread": "Responder en hilo",
-        "report_content": "Denunciar contenido",
         "report_room": "Reportar sala",
         "resend": "Reenviar",
         "reset": "Restablecer",
@@ -117,8 +109,6 @@
         "sign_out": "Cerrar sesión",
         "skip": "Omitir",
         "start": "Empezar",
-        "start_chat": "Empezar una conversación",
-        "start_new_chat": "Crear conversación",
         "stop": "Parar",
         "submit": "Enviar",
         "subscribe": "Suscribir",
@@ -219,10 +209,7 @@
         "log_in_new_account": "<a>Inicie sesión</a> en su nueva cuenta.",
         "logout_dialog": {
             "description": "¿Estás seguro de que quieres salir?",
-            "megolm_export": "Exportar claves manualmente",
             "setup_key_backup_title": "Perderás acceso a tus mensajes cifrados",
-            "setup_secure_backup_description_1": "Los mensajes cifrados son seguros con el cifrado punto a punto. Solo tú y el/los destinatario/s tiene/n las claves para leer estos mensajes.",
-            "setup_secure_backup_description_2": "Al cerrar sesión, estas claves serán eliminadas del dispositivo. Esto significa que no podrás leer mensajes cifrados salvo que tengas sus claves en otros dispositivos, o hayas hecho una copia de seguridad usando el servidor.",
             "skip_key_backup": "No quiero mis mensajes cifrados"
         },
         "misconfigured_body": "Solicita al administrador de %(brand)s que compruebe si hay entradas duplicadas o erróneas en <a>tu configuración</a>.",
@@ -274,7 +261,6 @@
             "point_the_camera": "Escanee el código QR mostrado aquí",
             "scan_code_instruction": "Escanee el código QR con otro dispositivo",
             "scan_qr_code": "Iniciar sesión con código QR",
-            "security_code": "Código de seguridad",
             "security_code_prompt": "Si se le solicita, ingrese el código de abajo en su otro dispositivo.",
             "select_qr_code": "Seleccione \"%(scanQRCode)s\"",
             "unsupported_explainer": "Su proveedor de cuenta no admite iniciar sesión en un nuevo dispositivo con un código QR.",
@@ -480,7 +466,6 @@
         "encrypted": "Cifrado",
         "error": "Error",
         "faq": "Preguntas frecuentes",
-        "favourites": "Favoritos",
         "feedback": "Danos tu opinión",
         "filter_results": "Filtrar resultados",
         "forward_message": "Reenviar mensaje",
@@ -488,7 +473,6 @@
         "go_to_settings": "Ir a la configuración",
         "guest": "Invitado",
         "help": "Ayuda",
-        "historical": "Historial",
         "home": "Inicio",
         "homeserver": "Servidor base",
         "identity_server": "Servidor de identidad",
@@ -500,13 +484,11 @@
         "light": "Claro",
         "loading": "Cargando…",
         "location": "Ubicación",
-        "low_priority": "Prioridad baja",
         "matrix": "Matrix",
         "message": "Mensaje",
         "message_layout": "Diseño del mensaje",
         "message_timestamp_invalid": "Marca de tiempo inválida",
         "microphone": "Micrófono",
-        "model": "Modelo",
         "moderation_and_safety": "Moderación y seguridad",
         "modern": "Moderno",
         "mute": "Silenciar",
@@ -565,7 +547,6 @@
         "success": "Éxito",
         "suggestions": "Sugerencias",
         "support": "Ayuda",
-        "system_alerts": "Alertas del sistema",
         "theme": "Tema",
         "thread": "Hilo",
         "threads": "Hilos",
@@ -582,7 +563,6 @@
         "username": "Nombre de usuario",
         "verified": "Verificada",
         "version": "Versión",
-        "video": "Vídeo",
         "video_room": "Sala de vídeo",
         "view_message": "Ver mensaje",
         "warning": "Advertencia"
@@ -779,7 +759,6 @@
         },
         "state_key": "Clave de estado",
         "title": "Herramientas de desarrollo",
-        "toggle_event": "activar o desactivar el evento",
         "toolbox": "Caja de herramientas",
         "use_at_own_risk": "Esta interfaz NO comprueba los tipos de dato de los valores. Usar bajo tu responsabilidad.",
         "value": "Valor",
@@ -796,22 +775,6 @@
     },
     "dialog_close_label": "Cerrar diálogo",
     "download_completed": "Descarga completada",
-    "emoji": {
-        "categories": "Categorías",
-        "category_activities": "Actividades",
-        "category_animals_nature": "Animales y naturaleza",
-        "category_flags": "Banderas",
-        "category_food_drink": "Comida y bebida",
-        "category_frequently_used": "Frecuente",
-        "category_objects": "Objetos",
-        "category_smileys_people": "Caritas y personas",
-        "category_symbols": "Símbolos",
-        "category_travel_places": "Viajes y lugares",
-        "quick_reactions": "Reacciones rápidas"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Cancelar búsqueda"
-    },
     "empty_room": "Sala vacía",
     "empty_room_was_name": "Sala vacía (antes era %(oldName)s)",
     "encryption": {
@@ -858,17 +821,6 @@
         },
         "set_up_recovery_toast_description": "Genera una clave de recuperación que puede usarse para restaurar el histórico de mensajes encriptados en caso de que pierdas el acceso a tus dispositivos.",
         "set_up_toast_title": "Configurar copia de seguridad segura",
-        "setup_secure_backup": {
-            "explainer": "Haz copia de seguridad de tus claves antes de cerrar sesión para evitar perderlas."
-        },
-        "udd": {
-            "interactive_verification_button": "Verificar interactivamente usando emojis",
-            "other_ask_verify_text": "Pídele al usuario que verifique su sesión, o verifícala manualmente a continuación.",
-            "other_new_session_text": "%(name)s (%(userId)s) inició una nueva sesión sin verificarla:",
-            "own_ask_verify_text": "Verifica la otra sesión utilizando una de las siguientes opciones.",
-            "own_new_session_text": "Iniciaste una nueva sesión sin verificarla:",
-            "title": "No es de confianza"
-        },
         "unable_to_setup_keys_error": "No se han podido configurar las claves",
         "verification": {
             "accepting": "Aceptando…",
@@ -1282,7 +1234,6 @@
         "element_call_video_rooms": "Salas de vídeo Element Call",
         "experimental_description": "¿Te apetece probar cosas experimentales? Aquí encontrarás nuestras ideas en desarrollo. No están terminadas, pueden ser inestables, cambiar o dejar de estar disponibles. <a>Más información</a>.",
         "feature_wysiwyg_composer_description": "Usar texto con formato en lugar de Markdown en el editor de mensajes.",
-        "group_calls": "Nueva experiencia de llamadas grupales",
         "group_developer": "Desarrollo",
         "group_encryption": "Cifrado",
         "group_experimental": "Experimentos",
@@ -1296,7 +1247,6 @@
         "group_voip": "Voz y vídeo",
         "group_widgets": "Accesorios",
         "hidebold": "Ocultar el punto indicador de notificaciones (solo mostrar un indicador con número)",
-        "html_topic": "Ver representación HTML de los asuntos de las salas",
         "join_beta": "Unirme a la beta",
         "join_beta_reload": "Al unirte a la beta, %(brand)s volverá a cargarse.",
         "jump_to_date": "Saltar a una fecha (añade el comando /jumptodate y enlaces para saltar en los encabezados de fecha)",
@@ -1308,13 +1258,10 @@
         "location_share_live_description": "Implementación temporal. Las ubicaciones persisten en el historial de la sala.",
         "mjolnir": "Nuevas maneras de ignorar a otras personas",
         "msc3531_hide_messages_pending_moderation": "Permitir a los moderadores ocultar mensajes a la espera de revisión.",
-        "report_to_moderators": "Denunciar ante los moderadores",
-        "report_to_moderators_description": "En las salas que sean compatible con la moderación, el botón de «Denunciar» avisará a los moderadores de la sala.",
         "sliding_sync": "Modo de sincronización progresiva",
         "sliding_sync_description": "En desarrollo, no se puede desactivar.",
         "sliding_sync_disabled_notice": "Cierra sesión y vuélvela a abrir para desactivar",
         "sliding_sync_server_no_support": "Tu servidor no es compatible",
-        "under_active_development": "Funcionalidad en desarrollo.",
         "video_rooms": "Salas de vídeo",
         "video_rooms_a_new_way_to_chat": "Una nueva forma de hablar por voz y vídeo en %(brand)s.",
         "video_rooms_always_on_voip_channels": "Las salas de vídeo son canales de VoIP siempre abiertos, disponibles dentro de una sala en %(brand)s.",
@@ -1365,9 +1312,6 @@
         "room_rejoin_warning": "Esta sala no es pública. No podrás volver a unirte sin una invitación.",
         "space_rejoin_warning": "Este espacio es privado. No podrás volverte a unir sin una invitación."
     },
-    "left_panel": {
-        "open_dial_pad": "Abrir teclado numérico"
-    },
     "lightbox": {
         "rotate_left": "Girar a la izquierda",
         "rotate_right": "Girar a la derecha"
@@ -1451,7 +1395,6 @@
         "mentions_and_keywords": "@menciones y palabras clave",
         "mentions_and_keywords_description": "Recibir notificaciones solo cuando me mencionen o escriban una palabra vigilada configurada en los <a>ajustes</a>",
         "mentions_keywords": "Menciones y palabras clave",
-        "message_didnt_send": "Mensaje no enviado. Haz clic para más info.",
         "mute_description": "No recibirás ninguna notificación"
     },
     "notifier": {
@@ -1536,7 +1479,6 @@
     },
     "quick_settings": {
         "all_settings": "Ajustes",
-        "metaspace_section": "Fijar a la barra lateral",
         "sidebar_settings": "Mas opciones",
         "title": "Ajustes rápidos"
     },
@@ -1552,21 +1494,10 @@
     },
     "report_content": {
         "description": "Denunciar este mensaje enviará su único «event ID al administrador de tu servidor base. Si los mensajes en esta sala están cifrados, el administrador de tu servidor no podrá leer el texto del mensaje ni ver ningún archivo o imagen.",
-        "disagree": "No estoy de acuerdo",
         "hide_messages_from_user": "Comprueba que realmente quieres ocultar todos los mensajes actuales y futuros de este usuario.",
         "ignore_user": "Ignorar usuario",
-        "illegal_content": "Contenido ilegal",
         "missing_reason": "Por favor, explica por qué estás denunciando.",
-        "nature": "Por favor, escoge una categoría y explica por qué el mensaje es abusivo.",
-        "nature_disagreement": "Lo que esta persona está escribiendo no está bien.\nSe avisará a los moderadores de la sala.",
-        "nature_illegal": "Esta persona está comportándose de manera posiblemente ilegal. Por ejemplo, amenazando con violencia física o con revelar datos personales.\nSe avisará a los moderadores de la sala, que podrían denunciar los hechos.",
-        "nature_other": "Otro motivo. Por favor, describe el problema.\nSe avisará a los moderadores de la sala.",
-        "nature_spam": "Esta persona está mandando publicidad no deseada o propaganda.\nSe avisará a los moderadores de la sala.",
-        "other_label": "Otros",
-        "report_content_to_homeserver": "Denunciar contenido al administrador de tu servidor base",
-        "report_entire_room": "Denunciar la sala entera",
-        "spam_or_propaganda": "Publicidad no deseada o propaganda",
-        "toxic_behaviour": "Comportamiento tóxico"
+        "report_content_to_homeserver": "Denunciar contenido al administrador de tu servidor base"
     },
     "restore_key_backup_dialog": {
         "count_of_decryption_failures": "¡Error al descifrar %(failedCount)s sesiones!",
@@ -1756,36 +1687,12 @@
         }
     },
     "room_list": {
-        "add_room_label": "Añadir una sala",
         "add_space_label": "Añadir un espacio",
-        "breadcrumbs_empty": "No hay salas visitadas recientemente",
-        "breadcrumbs_label": "Salas visitadas recientemente",
         "failed_add_tag": "Error al añadir la etiqueta %(tagName)s a la sala",
         "failed_remove_tag": "Error al eliminar la etiqueta %(tagName)s de la sala",
         "failed_set_dm_tag": "Fallo al poner la etiqueta al mensaje directo",
-        "home_menu_label": "Opciones de la pantalla de inicio",
-        "join_public_room_label": "Unirse a la sala pública",
-        "joining_rooms_status": {
-            "one": "Entrando en %(count)s sala",
-            "other": "Entrando en %(count)s salas"
-        },
         "notification_options": "Ajustes de notificaciones",
-        "redacting_messages_status": {
-            "one": "Borrando mensajes en %(count)s sala",
-            "other": "Borrando mensajes en %(count)s salas"
-        },
-        "show_less": "Ver menos",
-        "show_n_more": {
-            "other": "Ver %(count)s más",
-            "one": "Ver %(count)s más"
-        },
-        "show_previews": "Incluir una vista previa del último mensaje",
-        "sort_by": "Ordenar por",
-        "sort_by_activity": "Actividad",
-        "sort_unread_first": "Colocar al principio las salas con mensajes sin leer",
-        "space_menu_label": "Menú de %(spaceName)s",
-        "sublist_options": "Opciones de la lista",
-        "suggested_rooms_heading": "Salas sugeridas"
+        "show_less": "Ver menos"
     },
     "room_settings": {
         "access": {
@@ -2292,7 +2199,6 @@
         "send_read_receipts_unsupported": "Tu servidor no permite desactivar los acuses de recibo.",
         "send_typing_notifications": "Enviar notificaciones de tecleo",
         "sessions": {
-            "browser": "Navegador",
             "confirm_sign_out": {
                 "other": "Confirma el cierre de sesión en estos dispositivos",
                 "one": "Confirmar cerrar sesión de este dispositivo"
@@ -2336,7 +2242,6 @@
             "no_sessions": "No se ha encontrado ninguna sesión.",
             "no_unverified_sessions": "No se ha encontrado ninguna sesión sin verificar.",
             "no_verified_sessions": "No se ha encontrado ninguna sesión verificada.",
-            "os": "Sistema operativo",
             "other_sessions_heading": "Otras sesiones",
             "push_heading": "Notificaciones push",
             "push_subheading": "Recibir notificaciones push en esta sesión.",
@@ -2384,13 +2289,11 @@
         "show_stickers_button": "Incluir el botón de pegatinas",
         "show_typing_notifications": "Mostrar un indicador cuando alguien más esté escribiendo en la sala",
         "sidebar": {
-            "metaspaces_favourites_description": "Agrupa en un mismo sitio todas tus salas y personas favoritas.",
             "metaspaces_home_all_rooms": "Ver todas las salas",
             "metaspaces_home_all_rooms_description": "Incluir todas tus salas en inicio, aunque estén dentro de un espacio.",
             "metaspaces_home_description": "La pantalla de Inicio es útil para tener una vista general de todas tus conversaciones.",
             "metaspaces_orphans": "Salas fuera de un espacio",
             "metaspaces_orphans_description": "Agrupa en un mismo sitio todas tus salas que no formen parte de un espacio.",
-            "metaspaces_people_description": "Agrupa a toda tu gente en un mismo sitio.",
             "metaspaces_subsection": "Qué espacios mostrar",
             "title": "Barra lateral"
         },
@@ -2406,7 +2309,6 @@
             "audio_output": "Salida de sonido",
             "audio_output_empty": "No se han detectado salidas de sonido",
             "auto_gain_control": "Control automático de volumen",
-            "connection_section": "Conexión",
             "echo_cancellation": "Cancelación de eco",
             "enable_fallback_ice_server_description": "Solo se activará si tu servidor base no ofrece uno. Tu dirección IP se compartirá durante la llamada.",
             "mirror_local_feed": "Invertir el vídeo local horizontalmente (espejo)",
@@ -2573,12 +2475,6 @@
     "space_settings": {
         "title": "Ajustes - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "No tienes permisos para añadir salas a este espacio",
-        "error_no_permission_add_space": "No tienes permisos para añadir espacios a este espacio",
-        "error_no_permission_create_room": "No tienes permisos para crear nuevas salas en este espacio",
-        "error_no_permission_invite": "No tienes permiso para invitar a este espacio"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Escribe el nombre de un nuevo servidor que quieras explorar.",
@@ -2766,9 +2662,7 @@
         "m.poll.start": "%(senderName)s ha empezado una encuesta – %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s cambió la imagen de la sala.",
-            "changed_img": "%(senderDisplayName)s cambió el avatar de la sala a <img/>",
-            "lightbox_title": "%(senderDisplayName)s cambió el avatar para %(roomName)s",
-            "removed": "%(senderDisplayName)s eliminó el avatar de la sala."
+            "lightbox_title": "%(senderDisplayName)s cambió el avatar para %(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3321,13 +3215,7 @@
         "close_to_view_right_panel": "Cierra este accesorio para verlo en este panel",
         "context_menu": {
             "delete": "Eliminar accesorio",
-            "delete_warning": "Al borrar un accesorio, este se elimina para todos usuarios de la sala. ¿Estás seguro?",
-            "move_left": "Mover a la izquierda",
-            "move_right": "Mover a la derecha",
-            "remove": "Eliminar para todos",
-            "revoke": "Quitar permisos",
-            "screenshot": "Toma una foto",
-            "start_audio_stream": "Empezar retransmisión de audio"
+            "delete_warning": "Al borrar un accesorio, este se elimina para todos usuarios de la sala. ¿Estás seguro?"
         },
         "cookie_warning": "Puede que el accesorio use cookies.",
         "error_hangup_description": "Te has desconectado de la llamada. (Error: %(message)s)",
diff --git a/apps/web/src/i18n/strings/et.json b/apps/web/src/i18n/strings/et.json
index 95517c0e31..c6e0f47e7e 100644
--- a/apps/web/src/i18n/strings/et.json
+++ b/apps/web/src/i18n/strings/et.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Emojide valija",
         "jump_first_invite": "Siirdu esimese kutse juurde.",
         "message_composer": "Sõnumikoostaja",
         "n_unread_messages": {
@@ -11,8 +10,6 @@
             "one": "1 lugemata mainimine.",
             "other": "%(count)s lugemata sõnumit kaasa arvatud mainimised."
         },
-        "recent_rooms": "Hiljuti kasutatud jututoad",
-        "room_name": "Jututuba %(name)s",
         "room_status_bar": "Jututoa olekuriba",
         "seek_bar_label": "Heli kerimisriba",
         "unread_messages": "Lugemata sõnumid."
@@ -22,7 +19,6 @@
         "accept": "Võta vastu",
         "add": "Lisa",
         "add_existing_room": "Lisa olemasolev jututuba",
-        "add_people": "Lisa inimesi",
         "apply": "Rakenda",
         "approve": "Nõustu",
         "ask_to_join": "Küsi võimalust liitumiseks",
@@ -57,7 +53,6 @@
         "enter_fullscreen": "Lülita täisekraanivaade sisse",
         "exit_fullscreeen": "Lülita täisekraanivaade välja",
         "expand": "Laienda",
-        "explore_public_rooms": "Sirvi avalikke jututubasid",
         "explore_rooms": "Tutvu jututubadega",
         "export": "Ekspordi",
         "forward": "Edasta",
@@ -69,8 +64,6 @@
         "ignore": "Eira",
         "import": "Impordi",
         "invite": "Kutsu",
-        "invite_to_space": "Kutsu siia kogukonnakeskusesse",
-        "invites_list": "Kutsed",
         "join": "Liitu",
         "learn_more": "Loe lisateavet",
         "leave": "Lahku",
@@ -97,7 +90,6 @@
         "rename": "Muuda nime",
         "reply": "Vasta",
         "reply_in_thread": "Vasta jutulõngas",
-        "report_content": "Teata sisust haldurile",
         "report_room": "Teata jututoast",
         "resend": "Saada uuesti",
         "reset": "Taasta algolek",
@@ -117,8 +109,6 @@
         "sign_out": "Eemalda see seade",
         "skip": "Jäta vahele",
         "start": "Alusta",
-        "start_chat": "Alusta vestlust",
-        "start_new_chat": "Alusta uut vestlust",
         "stop": "Peata",
         "submit": "Saada",
         "subscribe": "Telli",
@@ -219,11 +209,9 @@
         "log_in_new_account": "<a>Logi sisse</a> oma uuele kasutajakontole.",
         "logout_dialog": {
             "description": "Kas sa oled kindel, et soovid selle seadme eemaldada?",
-            "megolm_export": "Ekspordi võtmed käsitsi",
-            "setup_key_backup_title": "Sa kaotad ligipääsu oma krüptitud sõnumitele",
-            "setup_secure_backup_description_1": "Krüptitud sõnumid kasutavad läbivat krüptimist. Ainult sinul ja saaja(te)l on võtmed selliste sõnumite lugemiseks.",
-            "setup_secure_backup_description_2": "Kui sa logid välja, siis krüptovõtmed kustutatakse sellest seadmest. Seega, kui sul pole krüptovõtmeid varundatud teistes seadmetes või kasutusel serveripoolset varundust, siis sa krüptitud sõnumeid hiljem lugeda ei saa.",
-            "skip_key_backup": "Ma ei soovi oma krüptitud sõnumeid"
+            "setup_key_backup_title": "Sa oled kaotamas ligipääsu oma krüptitud sõnumitele",
+            "setup_secure_backup_description": "See on sinu ainus seade. Kui sa selle eemaldad, vajad taastamisvõtit, et kinnitada oma digitaalset identiteeti ja taastada järgmisel sisselogimisel oma krüptitud vestlused.",
+            "skip_key_backup": "Eemalda see seade ikkagi"
         },
         "misconfigured_body": "Palu, et sinu %(brand)s'u haldur kontrolliks <a>sinu seadistusi</a> võimalike vigaste või topeltkirjete osas.",
         "misconfigured_title": "Sinu %(brand)s'i seadistused on paigast ära",
@@ -249,7 +237,9 @@
             "check_code_heading": "Sisesta teises seadmes kuvatav number",
             "check_code_input_label": "2-kohaline kood",
             "check_code_mismatch": "Numbrid ei klapi",
+            "choose_desktop_computer": "Vali „%(desktopComputer)s“",
             "completing_setup": "Lõpetame uue seadme seadistamise",
+            "desktop_computer": "Lauaarvuti",
             "error_etag_missing": "Tekkis ootamatu viga. Selle põhjuseks võivad olla brauseri lisamoodul, proksiserveri seadistused või koduserveri vigased seadistused.",
             "error_expired": "Sisselogimine aegus. Palun proovi uuesti.",
             "error_expired_title": "Sisselogimine ei jõudnud õigeaegselt lõpule",
@@ -270,16 +260,22 @@
             "error_user_declined": "Sa keeldusid teises seadmes sisselogimispäringust.",
             "error_user_declined_title": "Sa keeldusid sisselogimast",
             "follow_remaining_instructions": "Teise seadme verifitseerimiseks järgi ülejäänud juhiseid",
+            "open_element_mobile_device": "Ava oma nutiseadmes %(brand)s",
             "open_element_other_device": "Ava %(brand)s oma teises seadmes",
             "point_the_camera": "Suuna kaamera siin näidatud QR-koodi peale",
-            "scan_code_instruction": "Skaneeri QR-koodi teise seadmega",
+            "ready_to_scan": "Skaneerimiseks valmis",
+            "scan_code_instruction": "Skaneeri seda QR-koodi",
+            "scan_code_instruction_reciprocate": "Skaneeri seda QR-koodi teise seadmega",
             "scan_qr_code": "Logi sisse QR-koodi alusel",
-            "security_code": "Turvakood",
-            "security_code_prompt": "Kui seda küsitakse, sisesta teises seadmes allolev kood.",
+            "security_code_prompt": "Sinu teenusepakkuja võib sisselogimise verifitseerimiseks küsida seda koodi.",
+            "security_code_title": "Sinu verifitseerimiskood",
             "select_qr_code": "Val i „%(scanQRCode)s“",
+            "select_ready_to_scan": "Vali „%(readyToScan)s“ ja skaneeri siinnäidatud QR-koodi",
+            "start_over": "Alusta otsast peale",
+            "tap_avatar_link_new_device": "Klõpsa oma tunnuspilti ja vali „%(linkNewDevice)s“",
             "unsupported_explainer": "Sinu teenusepakkuja ei toeta võimalust logida sisse QR-koodi abil.",
             "unsupported_heading": "QR-koodi kasutamine pole toetatud",
-            "waiting_for_device": "Ootame, et teine seade logiks võrku"
+            "waiting_for_device": "Ootame sinu teise seadme järgi"
         },
         "register_action": "Loo konto",
         "registration": {
@@ -295,9 +291,9 @@
         "registration_username_validation": "Palun kasuta vaid väiketähti, numbreid, sidekriipsu ja alakriipsu",
         "reset_password": {
             "confirm_new_password": "Kinnita oma uus salasõna",
-            "devices_logout_success": "Sa oled kõikidest seadmetest välja logitud ning enam ei saa tõuketeavitusi. Nende taaskuvamiseks logi sisse igas oma soovitud seadmetes.",
+            "devices_logout_success": "Kõik sinu seadmed on eemaldatud ning enam ei saa tõuketeavitusi. Nende taaskuvamiseks logi sisse igas oma soovitud seadmetes.",
             "other_devices_logout_warning_1": "Kõikide sinu seadmete eemaldamine kustutab ka nendes salvestatud krüptovõtmed ja sellega muutuvad ka krüptitud vestlused loetamatuteks.",
-            "other_devices_logout_warning_2": "Kui sa soovid ligipääsu varasematele krüptitud vestlustele, palun seadista võtmete varundus või enne jätkamist ekspordi mõnest seadmest krüptovõtmed.",
+            "other_devices_logout_warning_2": "Kui sa soovid säilitada ligipääsu varasematele krüptitud vestlustele, palun seadista taastevõti või ekspordi mõnest muust seadmest oma sõnumite krüptovõtmed.",
             "password_not_entered": "Palun sisesta uus salasõna.",
             "passwords_mismatch": "Uued salasõnad peavad omavahel klappima.",
             "rate_limit_error": "Liiga palju päringuid napis ajavahemikus. Enne uuesti proovimist palun oota veidi.",
@@ -338,8 +334,10 @@
         "sign_in_description": "Jätkamaks kasuta oma kontot.",
         "sign_in_instead": "Pigem logi sisse",
         "sign_in_instead_prompt": "Sul juba on kasutajakonto olemas? <a>Siis logi siin sisse</a>",
+        "sign_in_manually": "Logi sisse käsitsi",
         "sign_in_or_register": "Logi sisse või loo uus konto",
         "sign_in_or_register_description": "Jätkamaks kasuta oma kontot või loo uus konto.",
+        "sign_in_with_qr": "Logi sisse QR-koodi alusel",
         "sign_in_with_sso": "Logi sisse ühekordse sisselogimise abil",
         "signing_in": "Login sisse…",
         "soft_logout": {
@@ -367,7 +365,7 @@
             "email_resent": "Uuesti saadetud!",
             "fallback_button": "Alusta autentimist",
             "mas_cross_signing_reset_cta": "Mine oma kasutajakonto andmete juurde",
-            "mas_cross_signing_reset_description": "Lähtesta oma võrguidentiteet oma teenusepakkuja abil ning tule siis siia tagasi ja vajuta „Proovi uuesti“.",
+            "mas_cross_signing_reset_description": "Oled lähtestamas oma %(serverName)s kasutajakonto digitaalset identiteeti. Kui oled seda teinud, siis tule siis siia tagasi ja vajuta „Proovi uuesti“.",
             "mas_cross_signing_reset_title": "Oma võrguidentiteedi lähtestamiseks ava oma kasutajakonto vaade",
             "msisdn": "Saatsime tekstisõnumi telefoninumbrile %(msisdn)s",
             "msisdn_token_incorrect": "Vigane tunnusluba",
@@ -481,7 +479,6 @@
         "encrypted": "Krüptitud",
         "error": "Viga",
         "faq": "Korduma kippuvad küsimused",
-        "favourites": "Lemmikud",
         "feedback": "Tagasiside",
         "filter_results": "Filtreeri tulemusi",
         "forward_message": "Edasta sõnum",
@@ -489,7 +486,6 @@
         "go_to_settings": "Ava seadistused",
         "guest": "Külaline",
         "help": "Abiteave",
-        "historical": "Ammune",
         "home": "Avaleht",
         "homeserver": "Koduserver",
         "identity_server": "Isikutuvastusserver",
@@ -497,17 +493,16 @@
         "integration_manager": "Lõiminguhaldur",
         "joined": "Liitunud",
         "labs": "Katsed",
+        "legacy_voice_and_video_settings": "Matrixi 1:1-kõned (vana lahendusena)",
         "legal": "Juriidiline teave",
         "light": "Hele",
         "loading": "Laadime…",
         "location": "Asukoht",
-        "low_priority": "Vähetähtis",
         "matrix": "Matrix",
         "message": "Sõnum",
         "message_layout": "Sõnumite paigutus",
         "message_timestamp_invalid": "Vigane ajatempel",
         "microphone": "Mikrofon",
-        "model": "Mudel",
         "moderation_and_safety": "Modereerimine ja turvalisus",
         "modern": "Moodne",
         "mute": "Summuta",
@@ -540,7 +535,7 @@
         "profile": "Profiil",
         "public": "Avalik",
         "public_room": "Avalik jututuba",
-        "public_space": "Avalik kogukonnakeskus",
+        "public_space": "Avalik kogukond",
         "qr_code": "QR kood",
         "random": "Juhuslik",
         "reactions": "Reageerimised",
@@ -560,14 +555,13 @@
         "show_more": "Näita rohkem",
         "someone": "Keegi",
         "space": "Tühikuklahv",
-        "spaces": "Kogukonnakeskused",
+        "spaces": "Kogukonnad",
         "state_encryption_enabled": "Katseline olekusündmuste krüptimine on kasutusel",
         "sticker": "Kleeps",
         "stickerpack": "Kleepsupakk",
         "success": "Õnnestus",
         "suggestions": "Soovitused",
         "support": "Toeta",
-        "system_alerts": "Süsteemi teated",
         "theme": "Kujundus",
         "thread": "Jutulõng",
         "threads": "Jutulõngad",
@@ -576,7 +570,7 @@
         "unencrypted": "Krüptimata",
         "unmute": "Eemalda summutamine",
         "unnamed_room": "Ilma nimeta jututuba",
-        "unnamed_space": "Nimetu kogukonnakeskus",
+        "unnamed_space": "Nimetu kogukond",
         "unverified": "Verifitseerimata",
         "updating": "Uuendame...",
         "user": "Kasutaja",
@@ -584,7 +578,6 @@
         "username": "Kasutajanimi",
         "verified": "Verifitseeritud",
         "version": "Versioon",
-        "video": "Video",
         "video_room": "Videotuba",
         "view_message": "Vaata sõnumit",
         "warning": "Hoiatus"
@@ -664,7 +657,7 @@
         "join_rule_knock_label": "Kõik võivad liituda, kuid jututoa haldur või moderaator peab eelnevalt ligipääsu kinnitama. Sa saad seda hiljem muuta.",
         "join_rule_public_label": "Kõik saavad seda jututuba leida ja temaga liituda.",
         "join_rule_public_parent_space_label": "Mitte ainult <SpaceName/> kogukonna liikmed, vaid kõik saavad seda jututuba leida ja võivad temaga liituda.",
-        "join_rule_restricted": "Nähtav kogukonnakeskuse liikmetele",
+        "join_rule_restricted": "Standardne",
         "join_rule_restricted_label": "Kõik <SpaceName/> kogukonna liikmed liituda.",
         "name_validation_required": "Palun sisesta jututoa nimi",
         "room_visibility_label": "Jututoa nähtavus",
@@ -679,41 +672,48 @@
         "unfederated_label_default_on": "Sa võid sellise võimaluse jätta kasutusele võtmata, kui seda jututuba kasutatakse erinevate väliste tiimide ühistööks kasutades erinevaid koduservereid. Seda ei saa hiljem muuta.",
         "unsupported_version": "See server ei toeta antud jututoa versiooni."
     },
+    "create_section_dialog": {
+        "create_section": "Lisa jaotis",
+        "description": "Jaotised on vaid sinu jaoks",
+        "label": "Jaotise nimi",
+        "title": "Lisa jaotis",
+        "title_edition": "Muuda jaotist"
+    },
     "create_space": {
         "add_details_prompt": "Tegemaks teiste jaoks äratundmise lihtsamaks, palun lisa natuke teavet.",
         "add_details_prompt_2": "Sa võid neid alati muuta.",
-        "add_existing_rooms_description": "Lisamiseks vali vestlusi ja jututubasid. Hetkel on see kogukonnakeskus vaid sinu jaoks ja esialgu keegi ei saa sellest teada. Teisi saad liituma kutsuda hiljem.",
+        "add_existing_rooms_description": "Vali lisatavaid vestlusi või jututube. Hetkel on see kogukond vaid sinu jaoks ja esialgu keegi ei saa sellest teada. Teisi saad liituma kutsuda hiljem.",
         "add_existing_rooms_heading": "Mida sa soovid ette võtta?",
         "address_label": "Aadress",
         "address_placeholder": "näiteks minu kogukond",
         "creating": "Loome…",
         "creating_rooms": "Loon jututube…",
-        "done_action": "Palun vaata minu kogukonnakeskust",
+        "done_action": "Palun vaata minu kogukonda",
         "done_action_first_room": "Mine minu esimese jututoa juurde",
         "explainer": "Kogukonnad on võimalus jututubade haldamiseks ja leidmiseks. Missugust kogukonda sa tahaksid luua?",
         "failed_create_initial_rooms": "Algsete jututubade loomine ei õnnestunud",
-        "failed_invite_users": "Järgnevate kasutajate kutsumine kogukonnakeskusesse ei õnnestunud: %(csvUsers)s",
+        "failed_invite_users": "Järgnevate kasutajate kutsumine kogukonda ei õnnestunud: %(csvUsers)s",
         "invite_teammates_by_username": "Kutsu kasutajanime alusel",
         "invite_teammates_description": "Kontrolli, et vajalikel inimestel oleks siia ligipääs. Teistele võid kutse saata ka hiljem.",
         "invite_teammates_heading": "Kutsu oma kaasteelisi",
         "inviting_users": "Saadan kutset…",
-        "label": "Loo kogukonnakeskus",
-        "name_required": "Palun sisesta kogukonnakeskuse nimi",
+        "label": "Loo kogukond",
+        "name_required": "Palun sisesta kogukonna nimi",
         "personal_space": "Vaid mina",
-        "personal_space_description": "Privaatne kogukonnakeskus jututubade koondamiseks",
+        "personal_space_description": "Privaatne kogukond jututubade koondamiseks",
         "private_description": "Liitumine vaid kutse alusel, kas sulle või sinu tiimile",
         "private_heading": "Sinu privaatne kogukond",
         "private_only_heading": "Sinu kogukond",
         "private_personal_description": "Palun kontrolli, et vajalikel inimestel oleks ligipääs siia - %(name)s",
         "private_personal_heading": "Kellega sa koos töötad?",
         "private_space": "Mina ja minu kaasteelised",
-        "private_space_description": "Privaatne kogukonnakeskus sinu ja sinu kaasteeliste jaoks",
+        "private_space_description": "Privaatne kogukond sinu ja sinu kaasteeliste jaoks",
         "public_description": "Kõik võivad liituda, sobib kõige paremini kogukondadele",
-        "public_heading": "Sinu avalik kogukonnakeskus",
+        "public_heading": "Sinu avalik kogukond",
         "search_public_button": "Avalike kogukondade otsing",
         "setup_rooms_community_description": "Teeme siis alustuseks mõned jututoad.",
-        "setup_rooms_community_heading": "Mida sa sooviksid arutada %(spaceName)s kogukonnakeskuses?",
-        "setup_rooms_description": "Sa võid ka hiljem siia luua uusi jututubasid või lisada olemasolevaid.",
+        "setup_rooms_community_heading": "Mida sa sooviksid arutada %(spaceName)s kogukonnas?",
+        "setup_rooms_description": "Sa võid ka hiljem siia kogukonda luua uusi jututubasid või lisada olemasolevaid.",
         "setup_rooms_private_description": "Loome siis alustuseks mõned jututoad.",
         "setup_rooms_private_heading": "Missuguste projektidega sinu tiim tegeleb?",
         "share_description": "Hetkel oled siin vaid sina, aga aina paremaks läheb, kui teised liituvad.",
@@ -721,13 +721,13 @@
         "skip_action": "Hetkel jäta vahele",
         "subspace_adding": "Lisan…",
         "subspace_beta_notice": "Lisa kogukond sellesse kogukonda, mida sa juba haldad.",
-        "subspace_dropdown_title": "Loo kogukonnakeskus",
-        "subspace_existing_space_prompt": "Kas sa selle asemel soovid lisada olemasoleva kogukonnakeskuse?",
+        "subspace_dropdown_title": "Loo kogukond",
+        "subspace_existing_space_prompt": "Kas sa selle asemel soovid lisada olemasoleva kogukonna?",
         "subspace_join_rule_invite_description": "See kogukond on leitav vaid kutse olemasolul ning liitumine on võimalik vaid kutse alusel.",
         "subspace_join_rule_invite_only": "Privaatne kogukond (kutse alusel)",
         "subspace_join_rule_label": "Kogukonna nähtavus",
         "subspace_join_rule_public_description": "Mitte ainult <SpaceName/> kogukonna liikmed, vaid kõik saavad seda kogukonda leida ja võivad temaga liituda.",
-        "subspace_join_rule_restricted_description": "Kõik <SpaceName/> kogukonna liikmed saavad seda leida ning võivad temaga liituda."
+        "subspace_join_rule_restricted_description": "Kõik <SpaceName/> kogukonna liikmed saavad liituda."
     },
     "credits": {
         "default_cover_photo": "<photo>Vaikimisi kasutatava kaanepildi</photo> autoriõiguste omanik on <author>Jesús Roncero</author> ja seda fotot kasutame vastavalt <terms>CC-BY-SA 4.0</terms> litsentsi tingimustele.",
@@ -747,6 +747,7 @@
         "category_other": "Muud",
         "category_room": "Jututuba",
         "caution_colon": "Hoiatus:",
+        "checking_sticky_events_support": "Määratud kestusega sündmuste tugi on tuvastamisel...",
         "client_versions": "Klientrakenduste versioonid",
         "crypto": {
             "4s_public_key_in_account_data": "kasutajakonto andmete juures",
@@ -769,7 +770,7 @@
             "cross_signing_public_keys_on_device_status": "Risttunnustamise avalikud võtmed:",
             "cross_signing_ready": "Risttunnustamine on kasutusvalmis.",
             "cross_signing_status": "Risttunnustamise olek:",
-            "cross_signing_untrusted": "Sinu kasutajakonto risttunnustamise identiteet on krüptitud andmehoidlas olemas, aga see sessioon teda veel ei usalda.",
+            "cross_signing_untrusted": "Sinu kasutajakonto digitaalne identiteet on krüptitud andmehoidlas olemas, aga see sessioon teda veel ei usalda.",
             "crypto_not_available": "Krüptomoodul pole saadaval",
             "device_id": "Seadme tunnus",
             "key_backup_active_version": "Varukoopia aktiivne versioon:",
@@ -805,6 +806,8 @@
         "edit_setting": "Muuda seadistust",
         "edit_values": "Muuda väärtusi",
         "empty_string": "<tühi string>",
+        "error_sticky_duration_must_be_a_number": "„stickyDuration“ meetodi väärtus peab olema number",
+        "error_sticky_duration_out_of_range": "„stickyDuration“ meetodi väärtus peab olema vahemikus 0 kuni 36 000 millisekundit (1 tund)",
         "event_content": "Sündmuse sisu",
         "event_id": "Sündmuse tunnus: %(eventId)s",
         "event_sent": "Sündmus on saadetud!",
@@ -814,6 +817,7 @@
         "explore_account_data": "Uuri konto andmeid",
         "explore_room_account_data": "Uuri kasutajakonto olekut",
         "explore_room_state": "Uuri jututoa olekut",
+        "explore_sticky_state": "Tuvasta määratud kestusega sündmuste olek",
         "failed_to_find_widget": "Selle vidina leidmisel tekkis viga.",
         "failed_to_load": "Laadimine ei õnnestunud.",
         "failed_to_save": "Seadistuste salvestamine ei õnnestunud.",
@@ -822,11 +826,12 @@
         "invalid_device_key_id": "Vigane seadme võtme tunnus",
         "invalid_json": "See ei tundu olema korrektse json-andmestikuna.",
         "level": "Tase",
-        "low_bandwidth_mode": "Vähese ribalaiusega režiim",
+        "low_bandwidth_mode": "Lülita välja suurt ribalaiust eeldavad funktsionaalsused",
         "low_bandwidth_mode_description": "Lülitab välja krüpteerimise, olekuteated, tunnuspildid, lugemisteatised ja kirjutamisteatised",
         "main_timeline": "Peamine ajajoon",
         "manual_device_verification": "Seadme käsitsi verifitseerimine",
         "no_receipt_found": "Lugemisteatist ei leidu",
+        "no_sticky_events": "Selles jututoas pole määratud kestusega sõnumeid või muid sündmusi",
         "notification_state": "Teavituste olek: <strong>%(notificationState)s</strong>",
         "notifications_debug": "Teavituste silumine",
         "number_of_users": "Kasutajate arv",
@@ -853,6 +858,7 @@
         "send_custom_account_data_event": "Saada kohandatud kontoandmete päring",
         "send_custom_room_account_data_event": "Saada kohandatud jututoa kontoandmete päring",
         "send_custom_state_event": "Saada kohandatud olekusündmus",
+        "send_custom_sticky_event": "Saada sinuloodud määratud kestusega sõnum/sündmus",
         "send_custom_timeline_event": "Saada kohandatud sündmus ajajoonele",
         "server_info": "Serveri teave",
         "server_versions": "Serveri versioonid",
@@ -872,15 +878,19 @@
             "one": "<kogukond>"
         },
         "state_key": "Oleku võti",
+        "sticky_duration": "Määratud kestusega sõnumi/sündmuse eluiga (ms)",
+        "sticky_events_not_supported": "Sinu koduserver veel ei toeta määratud kestusega sõnumeid/sündmusi",
+        "sticky_key": "Määratud kestusega sündmuse võti",
         "thread_root_id": "Jutulõnga esimese kirje tunnus: %(threadRootId)s",
         "threads_timeline": "Jutulõngade ajajoon",
         "title": "Arendusvahendid",
-        "toggle_event": "lülita sündmus sisse/välja",
         "toolbox": "Töövahendid",
         "use_at_own_risk": "See kasutajaliides ei oska kontrollida väärtuste tüüpi ja vormingut. Muudatusi teed omal vastutusel.",
         "user_avatar": "Tunnuspilt: %(avatar)s",
         "user_displayname": "Kuvatav nimi: %(displayname)s",
         "user_id": "Kasutaja tunnus: %(userId)s",
+        "user_identity": "Krüptograafiline identiteet",
+        "user_identity_unknown": "Teadmata olek",
         "user_no_avatar": "Tunnuspilt: <i>puudub</i>",
         "user_no_displayname": "Kuvatav nimi: <i>puudub</i>",
         "user_read_up_to": "Kasutaja on lugenud kuni: ",
@@ -910,22 +920,6 @@
     },
     "dialog_close_label": "Sulge dialoog",
     "download_completed": "Allalaadimine on lõpetatud",
-    "emoji": {
-        "categories": "Kategooriad",
-        "category_activities": "Tegevused",
-        "category_animals_nature": "Loomad ja loodus",
-        "category_flags": "Lipud",
-        "category_food_drink": "Toit ja jook",
-        "category_frequently_used": "Enamkasutatud",
-        "category_objects": "Esemed",
-        "category_smileys_people": "Vigurnäod ja inimesed",
-        "category_symbols": "Sümbolid",
-        "category_travel_places": "Reisimine ja kohad",
-        "quick_reactions": "Reageeri lennult"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Tühista otsing"
-    },
     "empty_room": "Tühi jututuba",
     "empty_room_was_name": "Tühi jututuba (varasema nimega %(oldName)s)",
     "encryption": {
@@ -963,7 +957,6 @@
         "import_invalid_passphrase": "Autentimine ebaõnnestus: kas salasõna pole õige?",
         "key_storage_out_of_sync": "Sinu krüptovõtmete hoidla pole sünkroonis.",
         "key_storage_out_of_sync_description": "Säilitamaks ligipääsu vestluste ja krüptovõtmete varukoopiale, palun sisesta kinnituseks oma taastevõti.",
-        "message_shared_by": "Kuna sa polnud sõnumi saatmise ajal jututoas, siis %(displayName)s (%(userId)s) jagas seda sõnumit sinuga.",
         "messages_not_secure": {
             "cause_1": "Sinu koduserver",
             "cause_2": "Sinu poolt verifitseeritava kasutaja koduserver",
@@ -987,21 +980,10 @@
             "warning": "Kui sa ei ole ise taastamise meetodeid eemaldanud, siis võib olla tegemist ründega sinu konto vastu. Palun vaheta koheselt oma kasutajakonto salasõna ning määra seadistustes uus taastemeetod."
         },
         "set_up_recovery": "Varunda oma vestlused",
-        "set_up_recovery_toast_description": "Kui peaksid kaotama ligipääsu oma seadmetele, siis siinloodava taastevõtmega saad taastada ligipääsu oma krüptitud sõnumitele.",
+        "set_up_recovery_toast_description": "Sinu vestlused on automaatselt varundatud kasutades läbivat krüptimist. Kui peaksid kaotama ligipääsu kõikidele oma seadmetele, siis selle varukoopia taastamiseks ja oma digitaalse identiteedi säilitamiseks, on vaja taastevõtit.",
         "set_up_toast_title": "Võta kasutusele turvaline varundus",
-        "setup_secure_backup": {
-            "explainer": "Vältimaks nende kaotamist, varunda krüptovõtmed enne seadme eemaldamist."
-        },
         "turn_on_key_storage": "Võta krüptovõtmete hoidla kasutusele",
-        "turn_on_key_storage_description": "Salvesta oma krüptoidentiteet ja sõnumite krüptovõtmed turvaliselt serveris. See tagab, et sinu sõnumite ajalugu on alati loetav, ka kõikides uutes seadmetes.",
-        "udd": {
-            "interactive_verification_button": "Verifitseeri interaktiivselt emoji abil",
-            "other_ask_verify_text": "Palu nimetatud kasutajal verifitseerida see sessioon või tee seda alljärgnevaga käsitsi.",
-            "other_new_session_text": "%(name)s (%(userId)s) logis sisse uude sessiooni ilma seda verifitseerimata:",
-            "own_ask_verify_text": "Verifitseeri oma teine sessioon kasutades üht alljärgnevatest võimalustest.",
-            "own_new_session_text": "Sa logisid sisse uude sessiooni ilma seda verifitseerimata:",
-            "title": "Ei ole usaldusväärne"
-        },
+        "turn_on_key_storage_description": "See tagab, et sinu sõnumite ajalugu on alati loetav, ka kõikides uutes seadmetes ning on nõutav vestluste ja digitaalse identiteedi varundamiseks.",
         "unable_to_setup_keys_error": "Krüptovõtmete kasutuselevõtmine ei õnnestu",
         "verification": {
             "accepting": "Nõustun …",
@@ -1102,7 +1084,7 @@
         },
         "verification_requested_toast_title": "Verifitseerimistaotlus on saadetud",
         "verified_identity_changed": "Kasutaja %(displayName)s (<b>%(userId)s</b>) verifitseeritud võrguidentiteet on muutunud. <a>Lisateave</a>",
-        "verified_identity_changed_no_displayname": "Kasutaja <b>%(userId)s</b> verifitseeritud identiteet on muutunud. <a>Lisateave</a>",
+        "verified_identity_changed_no_displayname": "Kasutaja <b>%(userId)s</b> digitaalne identiteet on muutunud. <a>Lisateave</a>",
         "verify_toast_description": "Alates 2026. aasta oktoobri lõpust ei saa verifitseerimata seadmed enam sõnumeid saata ega vastu võtta. <a>Lisateave</a>",
         "verify_toast_title": "Verifitseeri see seade",
         "withdraw_verification_action": "Eemalda verifitseerimine"
@@ -1130,14 +1112,14 @@
         "resource_limits": "See koduserver ületanud ühe oma ressursipiirangutest.",
         "session_restore": {
             "clear_storage_button": "Eemalda see seade",
-            "clear_storage_description": "Logi välja ja eemalda krüptimisvõtmed?",
-            "description_1": "Meil tekkis eelmise sessiooni taastamisel viga.",
+            "clear_storage_description": "Kas eemaldad selle seadme koos tema krüptimisvõtmetega?",
+            "description_1": "Meil tekkis sinu sessiooni taastamisel viga.",
             "description_2": "Kui sa varem oled kasutanud uuemat %(brand)s'i versiooni, siis sinu pragune sessioon ei pruugi olla sellega ühilduv. Sulge see aken ja jätka selle uuema versiooni kasutamist.",
             "description_3": "Brauseri andmeruumi tühjendamine võib selle vea lahendada, kui samas eemaldad ka selle seadme ning kogu krüptitud vestlusajalugu muutub loetamatuks.",
             "title": "Sessiooni taastamine ei õnnestunud"
         },
         "something_went_wrong": "Midagi läks nüüd valesti!",
-        "storage_evicted_description_1": "Osa sessiooniandmetest, sealhulgas sõnumi krüptovõtmed, on puudu. Vea parandamiseks logi välja ja sisse, vajadusel taasta võtmed varundusest.",
+        "storage_evicted_description_1": "Osa sessiooniandmetest, sealhulgas sõnumi krüptovõtmed, on puudu. Vea parandamiseks eemalda see seade ja taasta võtmed varundusest.",
         "storage_evicted_description_2": "On võimalik et sinu brauser kustutas need andmed, sest kõvakettaruumist jäi puudu.",
         "storage_evicted_title": "Sessiooni andmed on puudu",
         "sync": "Ei saa ühendust koduserveriga. Proovin uuesti…",
@@ -1352,7 +1334,12 @@
     },
     "invite": {
         "confirm_unknown_users": {
-            "start_chat_title_multiple_users": "Kas alustad vestlust nende uute kontaktidega?"
+            "invite_subtitle": "Sul pole hetkel nende kontaktidega ühtegi vestlust. Enne jätkamist kinnita neile siia jututuppa kutse saatmine.",
+            "invite_title": "Kas kutsud uued kontaktid siia jututuppa?",
+            "start_chat_subtitle_multiple_users": "Sul pole hetkel nendega inimestega ühtegi vestlust. Enne jätkamist kinnita neile kutse saatmine.",
+            "start_chat_subtitle_one_user": "Sul pole hetkel selle inimesega ühtegi vestlust. Enne jätkamist kinnita talle kutse saatmine.",
+            "start_chat_title_multiple_users": "Kas alustad vestlust nende uute kontaktidega?",
+            "start_chat_title_one_user": "Kas alustad vestlust selle uue kontaktiga?"
         },
         "email_caption": "Saada kutse e-kirjaga",
         "email_limit_one": "Kutseid saad e-posti teel saata vaid ükshaaval",
@@ -1382,9 +1369,9 @@
         "failed_title": "Kutse saatmine ei õnnestunud",
         "invalid_address": "Tundmatu aadress",
         "name_email_mxid_share_room": "Kutsu teist osapoolt tema nime, e-posti aadressi, kasutajanime (nagu <userId/>) alusel või <a>jaga seda jututuba</a>.",
-        "name_email_mxid_share_space": "Kutsu teist osapoolt tema nime, e-posti aadressi, kasutajanime (nagu <userId/>) alusel või <a>jaga seda kogukonnakeskust</a>.",
+        "name_email_mxid_share_space": "Kutsu teist osapoolt tema nime, e-posti aadressi, kasutajanime (nagu <userId/>) alusel või <a>jaga seda kogukonda</a>.",
         "name_mxid_share_room": "Kutsu kedagi tema nime, kasutajanime (nagu <userId/>) alusel või <a>jaga seda jututuba</a>.",
-        "name_mxid_share_space": "Kutsu kedagi tema nime, kasutajanime (nagu <userId/>) alusel või <a>jaga seda kogukonnakeskust</a>.",
+        "name_mxid_share_space": "Kutsu kedagi tema nime, kasutajanime (nagu <userId/>) alusel või <a>jaga seda kogukonda</a>.",
         "progress": {
             "dont_close": "Palun ära sulge vaadet enne kui tegevus pole lõppenud.",
             "preparing": "Valmistan kutseid ette..."
@@ -1400,7 +1387,7 @@
         "suggestions_disclaimer_prompt": "Kui sa ei leia otsitavaid, siis saada neile kutse.",
         "suggestions_section": "Viimased otsesõnumite saajad",
         "to_room": "Kutsu jututuppa %(roomName)s",
-        "to_space": "Kutsu kogukonnakeskusesse %(spaceName)s",
+        "to_space": "Kutsu kogukonda %(spaceName)s",
         "transfer_dial_pad_tab": "Numbriklahvistik",
         "transfer_user_directory_tab": "Kasutajate kataloog",
         "unable_find_profiles_description_default": "Allpool loetletud Matrix'i kasutajatunnustele ei leidunud profiile. Kas sa ikkagi tahaksid neile kutse saata?",
@@ -1504,6 +1491,7 @@
         "bridge_state_manager": "Seda võrgusilda haldab <user />.",
         "bridge_state_workspace": "Tööruum: <networkLink/>",
         "click_for_info": "Lisateabe jaoks klõpsi",
+        "config_only": "Saab sisselülitada ainult config.json failist.",
         "currently_experimental": "Parasjagu katsejärgus.",
         "custom_themes": "Kohandatud kujunduste lisamise võimalus",
         "dynamic_room_predecessors": "Jututoa dünaamilised eellased",
@@ -1517,11 +1505,17 @@
         "experimental_section": "Varased arendusjärgud",
         "extended_profiles_msc_support": "See eeldab, et koduserver toetab MSC4133 spetsifikatsiooni",
         "feature_disable_call_per_sender_encryption": "Lülita Element Call'i kasutamisel krüptimine kasutajakohaselt välja",
+        "feature_retention": {
+            "description": "Selle seadistusega saad jututoast sõnumeid automaatselt eemaldada etteantud ajavahemiku möödumisel. Hetkel on toetatud vaid lugemise seadistused.",
+            "disabled_sliding_sync": "Kui järkjärgulise sünkroonimine on kasutusel, siis sõnumise säilitamise reegleid ei saa sisse lülitada.",
+            "display_name": "Sõnumite säilitamine"
+        },
         "feature_user_status": {
-            "display_name": "Kasutaja olek"
+            "description": "Võimaldab näha praegust olekut ja muuta seda",
+            "display_name": "Kasutaja olek",
+            "required_msc_support": "Eeldab MSC4429 kasutamist (Profiilide uuendused pärandsünkroonimisel)"
         },
         "feature_wysiwyg_composer_description": "Sõnumite kirjutamisel kasuta Markdown'i asemel täisfunktsionaalset küljendust.",
-        "group_calls": "Uus rühmakõnede lahendus",
         "group_developer": "Arendajad",
         "group_encryption": "Krüptimine",
         "group_experimental": "Katsed",
@@ -1529,14 +1523,13 @@
         "group_moderation": "Modereerimine",
         "group_profile": "Profiil",
         "group_rooms": "Jututoad",
-        "group_spaces": "Kogukonnakeskused",
+        "group_spaces": "Kogukonnad",
         "group_themes": "Kujundused",
         "group_threads": "Jutulõngad",
         "group_ui": "Kasutajaliides",
         "group_voip": "Heli ja video",
         "group_widgets": "Vidinad",
         "hidebold": "Peida teavituse täpp (ja näita loendure)",
-        "html_topic": "Näita jututoa teemade teavet html'ina",
         "join_beta": "Hakka kasutama beetaversiooni",
         "join_beta_reload": "Beeta-funktsionaalsuste kasutusele võtmisel laadime uuesti rakenduse %(brand)s.",
         "jump_to_date": "Võimalda kuupäeva valida (lisab /jumptodate käsu ja kuupäeva valimisega seotud päisekirjed)",
@@ -1546,23 +1539,22 @@
         "leave_beta_reload": "Beeta-funktsionaalsuste kasutamise lõpetamisel laadime uuesti rakenduse %(brand)s.",
         "location_share_live": "Asukoha jagamine reaalajas",
         "location_share_live_description": "Tegemist on ajutise ja esialgse lahendusega: asukohad on jututoa ajaloos näha.",
+        "login_with_qr": "Logi sisse QR-koodiga",
         "mjolnir": "Uued võimalused osalejate eiramiseks",
         "msc3531_hide_messages_pending_moderation": "Luba modereerimist ootavate sõnumite peitmist.",
-        "new_room_list": "Võta kasutusele uus jututubade loend",
         "notification_settings": "Uued teavituste seadistused",
         "notification_settings_beta_caption": "Võtame kasutusele senisest lihtsama viisi teavituste seadistamiseks. Kohanda rakendust %(brand)s nii nagu soovid.",
         "notification_settings_beta_title": "Teavituste seadistused",
         "notifications": "Kasuta jututoa päises teavituste riba",
         "render_reaction_images": "Kujuta reaktsioonides ka kohandatud pilte",
         "render_reaction_images_description": "Mõnikord nimetatakse neid ka „kohandatud emotikonideks“.",
-        "report_to_moderators": "Teata moderaatoritele",
-        "report_to_moderators_description": "Kui jututoas on modereerimine kasutusel, siis nupust „Teata sisust“ avaneva vormi abil saad jututoa reegleid rikkuvast sisust teatada moderaatoritele.",
-        "sliding_sync": "Järkjärgulise sünkroniseerimise režiim",
+        "sliding_sync": "Järkjärgulise sünkroonimise režiim",
         "sliding_sync_description": "Aktiivselt arendamisel ega ole võimalik välja lülitada.",
         "sliding_sync_disabled_notice": "Väljalülitamiseks logi uuesti sisse",
         "sliding_sync_server_no_support": "Selle funktsionaalsuse tugi on sinu koduserveris puudu!",
-        "under_active_development": "Aktiivselt arendamisel.",
         "unrealiable_e2e": "Krüptitud jututubades pole see töökindel",
+        "url_preview_bundle": "Võrguaadresside lõimitud eelvaated (MSC4095)",
+        "url_preview_bundle_description": "Võid saata võrguaadresside eelvaateid osana sõnumist",
         "video_rooms": "Videotoad",
         "video_rooms_a_new_way_to_chat": "Uus võimalus videovestlusteks rakenduses %(brand)s.",
         "video_rooms_always_on_voip_channels": "Videotoad on kogu aeg saadaval VoIP kanalid, mis on lõimitud jututubadega ja kasutatavad rakenduses %(brand)s.",
@@ -1615,10 +1607,7 @@
         "room_leave_admin_warning": "Sa oled ainus selle jututoa haldaja. Kui sa siit lahkud, ei saa keegi teine jututoa seadistusi muuta ega muid olulisi toiminguid teha.",
         "room_leave_mod_warning": "Sa oled ainus moderaator selles jututoas. Kui sa siis lahkud, ei saa keegi teine jututoa seadistusi muuta ega muid olulisi toiminguid teha.",
         "room_rejoin_warning": "See ei ole avalik jututuba. Ilma kutseta sa ei saa uuesti liituda.",
-        "space_rejoin_warning": "See ei ole avalik kogukonnakeskus. Ilma kutseta sa ei saa uuesti liituda."
-    },
-    "left_panel": {
-        "open_dial_pad": "Ava numbriklahvistik"
+        "space_rejoin_warning": "See ei ole avalik kogukond. Ilma kutseta sa ei saa uuesti liituda."
     },
     "lightbox": {
         "rotate_left": "Pööra vasakule",
@@ -1715,10 +1704,9 @@
         "level_notification": "Teavitus",
         "level_unsent": "Saatmata",
         "mark_all_read": "Märgi kõik loetuks",
-        "mentions_and_keywords": "@mainimiste ja võtmesõnade puhul",
-        "mentions_and_keywords_description": "Soovin teavitusi sellisena mainimiste ja võtmesõnade puhul, nagu ma neid olen <a>seadistanud</a>",
+        "mentions_and_keywords": "vaid @mainimiste ja võtmesõnade puhul",
+        "mentions_and_keywords_description": "Saad teavitusi mainimiste, vastuste ja võtmesõnade puhul, nagu sa neid oled <a>seadistanud</a>",
         "mentions_keywords": "Mainimised ja märksõnad",
-        "message_didnt_send": "Sõnum jäi saatmata. Lisateabe saamiseks klõpsi.",
         "mute_description": "Sa ei saa üldse teavitusi"
     },
     "notifier": {
@@ -1816,7 +1804,6 @@
     },
     "quick_settings": {
         "all_settings": "Kõik seadistused",
-        "metaspace_section": "Kinnita külgpaanile",
         "sidebar_settings": "Täiendavad seadistused",
         "title": "Kiirseadistused"
     },
@@ -1832,27 +1819,18 @@
         "ongoing": "Eemaldan…",
         "reason_label": "Põhjus (kui soovid lisada)"
     },
+    "remove_section_dialog": {
+        "confirmation": "Kas oled kindel, et soovid selle jaotise eemaldada?",
+        "description": "Selle jaotise vestlused on sinu vestluste loendis endiselt saadaval.",
+        "remove_section": "Eemalda jaotis",
+        "title": "Kas eemaldad jaotise?"
+    },
     "report_content": {
         "description": "Sellest sõnumist teatamine saadab tema unikaalse sõnumi tunnuse sinu koduserveri haldurile. Kui selle jututoa sõnumid on krüptitud, siis sinu koduserveri haldur ei saa lugeda selle sõnumi teksti ega vaadata seal leiduvaid faile ja pilte.",
-        "disagree": "Ma ei nõustu sisuga",
-        "error_create_room_moderation_bot": "Modereerimisbotiga ei saa jututuba luua",
         "hide_messages_from_user": "Selle valikuga peidad kõik antud kasutaja praegused ja tulevased sõnumid.",
         "ignore_user": "Eira kasutajat",
-        "illegal_content": "Seadustega keelatud sisu",
         "missing_reason": "Palun kirjelda veateate põhjust.",
-        "nature": "Palun vali rikkumise olemus ja kirjelda mis teeb selle sõnumi kuritahtlikuks.",
-        "nature_disagreement": "Selle kasutaja loodud sisu on vale.\nJututoa moderaatorid saavad selle kohta teate.",
-        "nature_illegal": "Selle kasutaja tegevus on seadusevastane, milleks võib olla doksimine ehk teiste eraeluliste andmete avaldamine või vägivallaga ähvardamine.\nJututoa moderaatorid saavad selle kohta teate ning nad võivad sellest teatada ka ametivõimudele.",
-        "nature_nonstandard_admin": "See jututoa on pühendatud illegaalsele või mürgisele sisule või moderaatorid ei suuda sellist sisu ohjeldada.\nSellest teatatakse %(homeserver)s haldajatele.",
-        "nature_nonstandard_admin_encrypted": "See jututoa on pühendatud illegaalsele või mürgisele sisule või moderaatorid ei suuda sellist sisu ohjeldada.\nSellest teatatakse %(homeserver)s haldajatele. Haldajatel EI ole võimalik lugeda selle jututoa krüpteeritud sisu.",
-        "nature_other": "Mõni muu põhjus. Palun kirjelda seda detailsemalt.\nJututoa moderaatorid saavad selle kohta teate.",
-        "nature_spam": "See kasutaja spämmib jututuba reklaamidega, reklaamlinkidega või propagandaga.\nJututoa moderaatorid saavad selle kohta teate.",
-        "nature_toxic": "Selle kasutaja tegevus on äärmiselt ebasobilik, milleks võib olla teiste jututoas osalejate solvamine, peresõbralikku jututuppa täiskasvanutele mõeldud sisu lisamine või muul viisil jututoa reeglite rikkumine.\nJututoa moderaatorid saavad selle kohta teate.",
-        "other_label": "Muud",
-        "report_content_to_homeserver": "Teata sisust Sinu koduserveri haldurile",
-        "report_entire_room": "Teata tervest jututoast",
-        "spam_or_propaganda": "Spämm või propaganda",
-        "toxic_behaviour": "Ebasobilik käitumine"
+        "report_content_to_homeserver": "Teata sisust Sinu koduserveri haldurile"
     },
     "report_room": {
         "description": "Teata sellest jututoast oma koduserveri haldajale. Kui sõnumid on krüptitud, ei saa haldaja neid lugeda ega jagatud faile vaadata.",
@@ -2127,46 +2105,21 @@
         "waiting_for_join_title": "Kasutajate liitumise ootel %(brand)s'ga"
     },
     "room_list": {
-        "add_room_label": "Lisa jututuba",
         "add_space_label": "Lisa kogukond",
-        "breadcrumbs_empty": "Hiljuti külastatud jututubasid ei leidu",
-        "breadcrumbs_label": "Hiljuti külastatud jututoad",
         "failed_add_tag": "Sildi %(tagName)s lisamine jututoale ebaõnnestus",
         "failed_remove_tag": "Sildi %(tagName)s eemaldamine jututoast ebaõnnestus",
         "failed_set_dm_tag": "Otsevestluse sildi seadmine ei õnnestunud",
-        "home_menu_label": "Avalehe valikud",
-        "join_public_room_label": "Liitu avaliku jututoaga",
-        "joining_rooms_status": {
-            "other": "Parasjagu liitun %(count)s jututoaga",
-            "one": "Parasjagu liitun %(count)s jututoaga"
-        },
         "list_title": "Jututubade loend",
         "more_options": {
             "leave_room": "Lahku jututoast"
         },
         "notification_options": "Teavituste eelistused",
-        "redacting_messages_status": {
-            "other": "Kustutame sõnumeid %(count)s jututoas",
-            "one": "Kustutame sõnumeid %(count)s jututoas"
-        },
         "section": {
             "chats": "Vestlused",
             "favourites": "Lemmikud",
             "low_priority": "Vähetähtis"
         },
-        "show_less": "Näita vähem",
-        "show_n_more": {
-            "one": "Näita veel %(count)s vestlust",
-            "other": "Näita veel %(count)s vestlust"
-        },
-        "show_previews": "Näita sõnumite eelvaateid",
-        "sort_by": "Järjestamisviis",
-        "sort_by_activity": "Aktiivsuse alusel",
-        "sort_by_alphabet": "Tähestiku järjekorras",
-        "sort_unread_first": "Näita lugemata sõnumitega jututubasid esimesena",
-        "space_menu_label": "%(spaceName)s menüü",
-        "sublist_options": "Loendi valikud",
-        "suggested_rooms_heading": "Soovitatud jututoad"
+        "show_less": "Näita vähem"
     },
     "room_settings": {
         "access": {
@@ -2227,7 +2180,7 @@
             "aliases_section": "Jututubade aadressid",
             "avatar_field_label": "Jututoa tunnuspilt ehk avatar",
             "canonical_alias_field_label": "Põhiaadress",
-            "description_space": "Muuda oma kogukonnakeskuse seadistusi.",
+            "description_space": "Muuda oma kogukonna seadistusi.",
             "error_creating_alias_description": "Aadressi loomisel tekkis viga. See kas on serveri poolt keelatud või tekkis ajutine tõrge.",
             "error_creating_alias_title": "Viga aadressi loomisel",
             "error_deleting_alias_description": "Selle aadressi kustutamisel tekkis viga. See kas juba on kustutatud või tekkis ajutine tõrge.",
@@ -2235,7 +2188,7 @@
             "error_deleting_alias_title": "Viga aadresi kustutamisel",
             "error_publishing": "Jututoa avaldamine ei õnnestunud",
             "error_publishing_detail": "Jututoa avaldamisel tekkis viga",
-            "error_save_space_settings": "Kogukonnakeskuse seadistuste salvestamine ei õnnestunud.",
+            "error_save_space_settings": "Kogukonna seadistuste salvestamine ei õnnestunud.",
             "error_updating_alias_description": "Jututoa lisaaadressi uuendamisel tekkis viga. See kas pole serveris lubatud või tekkis mingi ajutine viga.",
             "error_updating_canonical_alias_description": "Jututoa põhiaadressi uuendamisel tekkis viga. See kas pole serveris lubatud või tekkis mingi ajutine viga.",
             "error_updating_canonical_alias_title": "Viga põhiaadressi uuendamisel",
@@ -2247,14 +2200,14 @@
             "name_field_label": "Jututoa nimi",
             "new_alias_placeholder": "Uus avaldatud aadess (näiteks #alias:server)",
             "no_aliases_room": "Sellel jututoal puuduvad kohalikud aadressid",
-            "no_aliases_space": "Sellel kogukonnakeskusel puuduvad kohalikud aadressid",
+            "no_aliases_space": "Sellel kogukonnal puuduvad kohalikud aadressid",
             "other_section": "Muud",
             "publish_toggle": "Kas avaldame selle jututoa %(domain)s jututubade loendis?",
             "publish_warn_invite_only": "Kuna ligipääs siia jututuppa eeldab kutse olemasolu, siis sa ei saa siin sisu avaldada.",
             "publish_warn_no_canonical_permission": "Siin jututoas sisu avaldamiseks peab sul olema õigus põhiaadressi muutmiseks.",
             "published_aliases_description": "Aadressi avaldamiseks peab ta esmalt olema määratud kohalikuks aadressiks.",
             "published_aliases_explainer_room": "Avaldatud aadresse saab igaüks igast serverist kasutada liitumiseks sinu jututoaga.",
-            "published_aliases_explainer_space": "Avaldatud aadresse saab igaüks igast serverist kasutada liitumiseks sinu kogukonnakeskusega.",
+            "published_aliases_explainer_space": "Avaldatud aadresse saab igaüks igast serverist kasutada liitumiseks sinu kogukonnaga.",
             "published_aliases_section": "Avaldatud aadressid",
             "save": "Salvesta muutused",
             "topic_field_label": "Jututoa teema"
@@ -2308,7 +2261,7 @@
             "m.room.tombstone": "Uuenda jututuba uue versioonini",
             "m.room.topic": "Muuda teemat",
             "m.room.topic_space": "Muuda kirjeldust",
-            "m.space.child": "Halda selle kogukonnakeskuse jututube",
+            "m.space.child": "Halda selle kogukonna jututube",
             "m.widget": "Muuda vidinaid",
             "muted_users_section": "Summutatud kasutajad",
             "no_privileged_users": "Mitte ühelgi kasutajal pole siin jututoas eelisõigusi",
@@ -2347,23 +2300,24 @@
             "history_visibility_warning": "Muudatused ei mõjuta senise ajaloo nähtavust, vaid uute oma. <a>Lisateave</a>",
             "history_visibility_world_readable": "Kõik (ajalugu on avalik)",
             "join_rule_description": "Vali, kes saavad liituda %(roomName)s jututoaga.",
-            "join_rule_invite": "Privaatne jututuba (eeldab kutset)",
+            "join_rule_invite": "Vaid kutsega",
             "join_rule_invite_description": "Liitumine toimub vaid kutse alusel.",
             "join_rule_knock": "Küsi võimalust liitumiseks",
             "join_rule_knock_description": "Kasutajade ei saa liituda enne, kui selleks vastav luba on antud.",
+            "join_rule_public": "Kõik",
             "join_rule_public_description": "Kõik võivad jututoaga liituda.",
             "join_rule_restricted": "Kogukonna liikmed",
-            "join_rule_restricted_description": "Kõik kogukonnakeskuse liikmed saavad jututuba leida ja sellega liituda. <a>Muuda lubatud kogukonnakeskuste loendit.</a>",
+            "join_rule_restricted_description": "Kõik lubatud kogukondade liikmed saavad liituda ilma kutseta. <a>Halda kogukondi</a>",
             "join_rule_restricted_description_active_space": "Kõik <spaceName/> kogukonna liikmed võivad liituda.",
-            "join_rule_restricted_description_prompt": "Kõik kogukonnakeskuse liikmed saavad leida ja liituda. Sa võid valida ka mitu kogukonnakeskust.",
-            "join_rule_restricted_description_spaces": "Ligipääsuga kogukonnakeskused",
-            "join_rule_restricted_dialog_description": "Vali missugustel kogukonnakeskustel on sellele jututoale ligipääs. Kui kogukonnakeskus on valitud, siis selle liikmed saavad <RoomName/> jututuba leida ja temaga liituda.",
-            "join_rule_restricted_dialog_empty_warning": "Sa oled eemaldamas kõiki kogukonnakeskuseid. Edaspidine ligipääs eeldab kutse olemasolu",
+            "join_rule_restricted_description_prompt": "Kõik kogukonna liikmed võivad liituda.",
+            "join_rule_restricted_description_spaces": "Lubatud kogukonnad",
+            "join_rule_restricted_dialog_description": "Kogukonnad, mille liikmed saavad <RoomName/> jututoaga liituda ilma kutseta.",
+            "join_rule_restricted_dialog_empty_warning": "Sa oled eemaldamas kõiki lubatud kogukondi. Edaspidine ligipääs eeldab vaikimisi kutse olemasolu",
             "join_rule_restricted_dialog_filter_placeholder": "Otsi kogukondi",
-            "join_rule_restricted_dialog_heading_known": "Muud kogukonnad, mida sa tead",
-            "join_rule_restricted_dialog_heading_other": "Sellised muud jututoad ja kogukonnakeskused, mida sa ei pruugi teada",
-            "join_rule_restricted_dialog_heading_room": "Sulle teadaolevad kogukonnakeskused, millesse kuulub see jututuba",
-            "join_rule_restricted_dialog_heading_space": "Sulle teadaolevad kogukonnakeskused, millesse kuulub see kogukond",
+            "join_rule_restricted_dialog_heading_known": "Sinu kogukonnad, kus pole seda jututuba",
+            "join_rule_restricted_dialog_heading_other": "Muud kogukonnad, mille liige sa ei ole",
+            "join_rule_restricted_dialog_heading_room": "Sinu kogukonnad, kus on see jututuba",
+            "join_rule_restricted_dialog_heading_space": "Sulle teadaolevad kogukonnad, millesse kuulub see kogukond",
             "join_rule_restricted_dialog_heading_unknown": "Ilmselt on tegemist nendega, mille liikmed on teiste jututubade haldajad.",
             "join_rule_restricted_dialog_title": "Halda kogukondi",
             "join_rule_restricted_n_more": {
@@ -2374,8 +2328,8 @@
                 "one": "Hetkel on ühel kogukonnal ligipääs",
                 "other": "Hetkel on %(count)s-l kogukonnal ligipääs"
             },
-            "join_rule_restricted_upgrade_description": "Antud uuendusega on valitud kogukonnakeskuste liikmetel võimalik selle jututoaga ilma kutseta liituda.",
-            "join_rule_restricted_upgrade_warning": "See jututuba on mõne sellise kogukonnakeskuse osa, kus sul pole haldaja õigusi. Selliselt juhul vana jututuba jätkuvalt kuvatakse, kuid selle asutajatele pakutakse võimalust uuega liituda.",
+            "join_rule_restricted_upgrade_description": "Antud uuendusega on valitud kogukondade liikmetel võimalik selle jututoaga liituda ilma kutseta.",
+            "join_rule_restricted_upgrade_warning": "See jututuba on mõne sellise kogukonna osa, kus sul pole haldaja õigusi. Selliselt juhul vana jututuba jätkuvalt kuvatakse, kuid selle asutajatele pakutakse võimalust uuega liituda.",
             "join_rule_upgrade_awaiting_room": "Laadin uut jututuba",
             "join_rule_upgrade_required": "Vajalik on uuendus",
             "join_rule_upgrade_sending_invites": {
@@ -2383,8 +2337,8 @@
                 "other": "Saadan kutseid... (%(progress)s / %(count)s)"
             },
             "join_rule_upgrade_updating_spaces": {
-                "one": "Uuendan kogukonnakeskust...",
-                "other": "Uuendan kogukonnakeskuseid... (%(progress)s / %(count)s)"
+                "one": "Uuendan kogukonda...",
+                "other": "Uuendan kogukondi... (%(progress)s / %(count)s)"
             },
             "join_rule_upgrade_upgrading_room": "Uuendan jututoa versiooni",
             "join_rule_world_readable_description": "Kui muudad seda, kes võib jututoaga liituda, siis muutub ka tulevaste sõnumite nähtavus.",
@@ -2395,7 +2349,7 @@
             "title": "Turvalisus ja privaatsus"
         },
         "title": "Jututoa seadistused - %(roomName)s",
-        "upload_avatar_label": "Laadi üles profiilipilt ehk avatar",
+        "upload_avatar_label": "Laadi üles tunnuspilt ehk avatar",
         "visibility": {
             "alias_section": "Aadress",
             "error_failed_save": "Selle kogukonna seadistuste uuendamine ei õnnestunud",
@@ -2405,9 +2359,9 @@
             "guest_access_explainer": "Külalised võivad liituda kogukonnaga ilma kasutajakontota. Sellest võimalusest on kasu avalike kogukondade puhul",
             "guest_access_label": "Luba ligipääs külalistele",
             "history_visibility_anyone_space": "Kogukonna eelvaade",
-            "history_visibility_anyone_space_description": "Luba huvilistel enne liitumist näha kogukonnakeskuse eelvaadet.",
+            "history_visibility_anyone_space_description": "Luba huvilistel enne liitumist näha kogukonna eelvaadet.",
             "history_visibility_anyone_space_disabled": "Sul pole õigust muuta ajaloo nähtavust.",
-            "history_visibility_anyone_space_recommendation": "Soovitame avalike kogukonnakeskuste puhul.",
+            "history_visibility_anyone_space_recommendation": "Soovitame avalike kogukondade puhul.",
             "title": "Turvalisus ja privaatsus"
         },
         "voip": {
@@ -2459,7 +2413,8 @@
         "warning_kind_files": "See %(brand)s versioon ei toeta mõnede krüptitud failide vaatatamist",
         "warning_kind_files_app": "Kõikide krüptitud failide vaatamiseks kasuta <a>Element Desktop</a> rakendust",
         "warning_kind_search": "See %(brand)s versioon ei toeta otsingut krüptitud sõnumite seast",
-        "warning_kind_search_app": "Otsinguks krüptitud sõnumite hulgast kasuta <a>Element Desktop</a> rakendust"
+        "warning_kind_search_app": "Otsinguks krüptitud sõnumite hulgast kasuta <a>Element Desktop</a> rakendust",
+        "warning_kind_search_partial": "Kuna sinu otsinguindeks on alles loomisel, siis tulemused võivad olla veel poolikud."
     },
     "setting": {
         "help_about": {
@@ -2529,7 +2484,7 @@
                 "breadcrumb_title": "Kas sa oled kindel, et soovid oma võrguidentiteeti lähtestada?",
                 "breadcrumb_title_cant_confirm": "Sa pead oma võrguidentiteedi lähtestama",
                 "breadcrumb_title_forgot": "Kas unustasid oma taastevõtme? Pead oma võrguidentiteedi lähtestama.",
-                "breadcrumb_title_sync_failed": "Võtmehoidla sünkroniseerimine ei õnnestunud. Sa pead võrguidentiteedi lähtestama.",
+                "breadcrumb_title_sync_failed": "Võtmehoidla sünkroonimine ei õnnestunud. Sa pead digitaalse identiteedi lähtestama.",
                 "breadcrumb_warning": "Tee seda ainult siis, kui arvad, et sinu kasutajakonto võib olla ohustatud kolmandate osapoolet poolt.",
                 "details_title": "Krüptimise üksikasjad",
                 "do_not_close_warning": "Ära sulge seda akent enne, kui lähtestamine on lõppenud",
@@ -2551,7 +2506,7 @@
                 "confirm": "Kustuta krüptovõtmete hoidla",
                 "description": "Krüptovõtmete hoidla hoidla kustutamisega eemaldad serverist oma krüptoidentiteedi ja sõnumite võtmed ning lülitad välja järgnevad turvalisusega seotud funktsionaalsused:",
                 "list_first": "Sa ei saa uutes seadmetes lugeda varasemaid krüptitud sõnumeid",
-                "list_second": "Kui logid kõikjal %(brand)s rakendusest välja, siis kaotad ligipääsu kõikidele oma krüptitud sõnumitele",
+                "list_second": "Kui sa pole ühtegi seadmesse sisse loginud, siis kaotad ligipääsu kõikidele oma krüptitud sõnumitele",
                 "title": "Kas sa oled kindel, et soovid krüptovõtmete hoidla välja lülitada ning seejärel kustutada?"
             },
             "device_not_verified_button": "Verifitseeri see seade",
@@ -2560,7 +2515,7 @@
             "dialog_title": "<strong>Seadistused:</strong>Krüptimine",
             "key_storage": {
                 "allow_key_storage": "Kasuta krüptovõtmete hoidlat",
-                "description": "Hoia oma krüptoidentiteeti ja sõnumite krüptovõtmeid turvaliselt serveris. See võimaldab sul lugeda oma varasemaid sõnumeid kõikides uutes seadmetes. <a>Lisateave</a>",
+                "description": "See võimaldab sul vaadata oma vestluste ajalugu kõigis uutes seadmetes ning on vajalik vestluste ja digitaalse identiteedi varundamiseks. <a> Lisateave</a>",
                 "title": "Krüptovõtmete hoidla"
             },
             "recovery": {
@@ -2570,7 +2525,7 @@
                 "change_recovery_key": "Muuda taastevõtit",
                 "change_recovery_key_description": "Palun salvesta see taastevõti turvalisel viisil. Muutuse kinnitamiseks klõpsi „Jätka“.",
                 "change_recovery_key_title": "Kas muudame taastevõtit?",
-                "description": "Kui sa oled kaotanud ligipääsu kõikidele oma olemasolevatele seadmetele, siis sa saad taastevõtme abil taastada ligipääsu oma krüptoidentiteedile ja sõnumite ajaloole.",
+                "description": "Sinu vestlused on automaatselt varundatud kasutades läbivat krüptimist. Kui sa oled kaotanud ligipääsu kõikidele oma olemasolevatele seadmetele, siis sa saad taastevõtme abil taastada ligipääsu oma digitaalsele identiteedile ja sõnumite ajaloole.",
                 "enter_key_error": "Sinu sisestatud taastevõti pole korrektne.",
                 "enter_recovery_key": "Sisesta taastevõti",
                 "forgot_recovery_key": "Kas unustasid taastevõtme?",
@@ -2679,6 +2634,7 @@
             "username": "Kasutajanimi"
         },
         "inline_url_previews_default": "Luba eelvaated",
+        "inline_url_previews_encrypted": "Lülita krüptitud jututubade eelvaated sisse",
         "insert_trailing_colon_mentions": "Mainimiste järel näita sõnumi alguses koolonit",
         "invite_controls": {
             "default_label": "Luba kasutajatel sind kutsida jututubadesse"
@@ -2789,13 +2745,13 @@
             "room_activity": "Uued tegevused jututoas, sealhulgas uuendused ja olekusõnumid",
             "rule_call": "Kõnekutse",
             "rule_contains_display_name": "Sõnumid, mis sisaldavad minu kuvatavat nime",
-            "rule_contains_user_name": "Sõnumid, mis sisaldavad minu kasutajatunnust",
+            "rule_contains_user_name": "@mainimised ja vastused",
             "rule_encrypted": "Rühmavestluste krüptitud sõnumid",
             "rule_encrypted_room_one_to_one": "Kahepoolsete vestluste krüptitud sõnumid",
             "rule_invite_for_me": "Kui mind kutsutakse jututuppa",
             "rule_message": "Rühmavestluste sõnumid",
             "rule_room_one_to_one": "Kahepoolsete vestluste sõnumid",
-            "rule_roomnotif": "Sõnumid, mis sisaldavad sõna @room",
+            "rule_roomnotif": "@jututoa mainimised",
             "rule_suppress_notices": "Robotite saadetud sõnumid",
             "rule_tombstone": "Kui jututubasid uuendatakse",
             "show_message_desktop_notification": "Näita sõnumit töölauakeskkonnale omases teavituses",
@@ -2816,6 +2772,7 @@
             "enable_tray_icon": "Näita süsteemisalve ikooni ja Element'i akna sulgemisel minimeeri ta salve",
             "keyboard_heading": "Kiirklahvid",
             "keyboard_view_shortcuts_button": "<a>Vaata siit</a> kõiki kiirklahve.",
+            "link_previews_description": "Näitab teavet sõnumite all olevate linkide kohta",
             "link_previews_heading": "Linkide eelvaated",
             "media_heading": "Pildid, gif'id ja videod",
             "presence_description": "Jaga teistega oma olekut ja tegevusi.",
@@ -2874,8 +2831,7 @@
         "send_read_receipts_unsupported": "Sinu koduserver ei võimalda lugemisteatiste keelamist.",
         "send_typing_notifications": "Anna märku teisele osapoolele, kui mina sõnumit kirjutan",
         "sessions": {
-            "best_security_note": "Parima turvalisuse nimel verifitseeri kõik oma sessioonid ning logi välja neist, mida sa enam ei kasuta või ei tunne ära.",
-            "browser": "Brauser",
+            "best_security_note": "Parima turvalisuse nimel verifitseeri kõik oma sessioonid ning eemalda need, mida sa enam ei kasuta või ei tunne ära.",
             "confirm_sign_out": {
                 "one": "Kinnita selle seadme eemaldamine",
                 "other": "Kinnita nende seadmete eemaldamine"
@@ -2889,8 +2845,8 @@
                 "other": "Eemalda seadmed"
             },
             "confirm_sign_out_sso": {
-                "one": "Kasutades ühekordse sisselogimisega oma isiku tõestamist kinnita selle seadme väljalogimine.",
-                "other": "Kasutades ühekordse sisselogimisega oma isiku tõestamist kinnita nende seadmete väljalogimine."
+                "one": "Kasutades ühekordse sisselogimisega oma isiku tõestamist kinnita selle seadme eemaldamine.",
+                "other": "Kasutades ühekordse sisselogimisega oma isiku tõestamist kinnita nende seadmete eemaldamine."
             },
             "current_session": "Praegune sessioon",
             "desktop_session": "Töölauarakendus",
@@ -2926,7 +2882,6 @@
             "no_sessions": "Sessioone ei leidu.",
             "no_unverified_sessions": "Verifitseerimata sessioone ei leidu.",
             "no_verified_sessions": "Verifitseeritud sessioone ei leidu.",
-            "os": "Operatsioonisüsteem",
             "other_sessions_heading": "Muud sessioonid",
             "push_heading": "Tõuketeavitused",
             "push_subheading": "Võta tõuketeavitused selles sessioonis kasutusele.",
@@ -2961,13 +2916,13 @@
             "unverified_session_explainer_2": "Selle sessiooniga ei saa sa osaleda krüptitud jututubades.",
             "unverified_session_explainer_3": "Parima turvalisuse ja privaatsuse nimel palun kasuta selliseid Matrix'i kliente, mis toetavad krüptimist.",
             "unverified_sessions": "Verifitseerimata sessioonid",
-            "unverified_sessions_explainer_1": "Kontrollimata sessioonid on sessioonid, kuhu on sinu volitustega sisse logitud, kuid mida ei ole risttuvastamisega kontrollitud.",
+            "unverified_sessions_explainer_1": "Verifitseerimata sessioonid on sellised sessioonid, kuhu on sinu kasutajanime ja salasõnaga sisse logitud, kuid mida ei ole kinnitatud sinu digitaalse identiteedi abil.",
             "unverified_sessions_explainer_2": "Kuna nende näol võib olla tegemist võimaliku konto volitamata kasutamisega, siis palun tee kindlaks, et need sessioonid on sulle tuttavad.",
             "unverified_sessions_list_description": "Turvalise sõnumvahetuse nimel verifitseeri kõik oma sessioonid ning eemalda need, mida sa enam ei kasuta või ei tunne enam ära.",
             "url": "URL",
             "verified_session": "Verifitseeritud sessioon",
             "verified_sessions": "Verifitseeritud sessioonid",
-            "verified_sessions_explainer_1": "Verifitseeritud sessioonideks loetakse Element'is või mõnes muus Matrix'i rakenduses selliseid sessioone, kus sa kas oled sisestanud oma salafraasi või tuvastanud end mõne teise oma verifitseeritud sessiooni abil.",
+            "verified_sessions_explainer_1": "Verifitseeritud sessioonid in kinnitanud sinu digitaalse identiteedi.",
             "verified_sessions_explainer_2": "See tähendab, et selles sessioonis on ka kõik vajalikud võtmed krüptitud sõnumite lugemiseks ja teistele kasutajatele kinnitamiseks, et sa usaldad seda sessiooni.",
             "verified_sessions_list_description": "Parima turvalisuse nimel eemalda need sessioonid, mida sa enam ei kasuta või ei tunne ära.",
             "verify_session": "Verifitseeri sessioon",
@@ -2982,19 +2937,18 @@
         "show_nsfw_content": "Näita töökeskkonnas mittesobilikku sisu",
         "show_read_receipts": "Näita teiste kasutajate lugemisteatiseid",
         "show_redaction_placeholder": "Näita kustutatud sõnumite asemel kohatäidet",
+        "show_sections": "Näita jaotisi",
         "show_stickers_button": "Näita kleepsude nuppu",
         "show_typing_notifications": "Anna märku, kui teine osapool sõnumit kirjutab",
         "showbold": "Näita üldist aktiivsust jututubade loendis (punktidena või lugemata sõnumite arvuna)",
         "sidebar": {
             "dialog_title": "<strong>Seadistused:</strong> Külgpaan",
-            "metaspaces_favourites_description": "Koonda oma olulised sõbrad ning lemmikjututoad ühte kohta.",
             "metaspaces_home_all_rooms": "Näita kõiki jututubasid",
             "metaspaces_home_all_rooms_description": "Näita kõiki oma jututubasid avalehel ka siis kui nad on osa mõnest kogukonnast.",
             "metaspaces_home_description": "Avalehelt saad kõigest hea ülevaate.",
             "metaspaces_orphans": "Jututoad väljaspool seda kogukonda",
             "metaspaces_orphans_description": "Koonda ühte kohta kõik oma jututoad, mis ei kuulu mõnda kogukonda.",
-            "metaspaces_people_description": "Koonda oma olulised sõbrad ühte kohta.",
-            "metaspaces_subsection": "Näidatavad kogukonnakeskused",
+            "metaspaces_subsection": "Näidatavad kogukonnad",
             "metaspaces_video_rooms": "Videojututoad ja -konverentsid",
             "metaspaces_video_rooms_description": "Rühmita kõik privaatsed videotoad ja -konverentsid",
             "metaspaces_video_rooms_description_invite_extension": "Konverentsiosalejaid võid kutsuda ka väljastpoolt Matrix'i võrku",
@@ -3020,21 +2974,25 @@
             "audio_output": "Heliväljund",
             "audio_output_empty": "Ei leidnud ühtegi heliväljundit",
             "auto_gain_control": "Automaatne esitusvaljuse tundlikkus",
-            "connection_section": "Ühendus",
             "dialog_title": "<strong>Seadistused:</strong> Heli ja video",
             "echo_cancellation": "Kaja eemaldamine",
             "echo_cancellation_description": "Eemaldab kõnede ajal mikrofonisisendi taustamüra. See seadistus kehtib ka Element Calli puhul.",
             "enable_fallback_ice_server": "Varuvariandina luba kasutada ka teist kõnehõlbustusserverit (%(server)s)",
             "enable_fallback_ice_server_description": "On kasutusel vaid siis, kui sinu koduserver sellist teenust ei võimalda. Seeläbi jagatakse kõne ajal sinu seadme IP-aadressi.",
+            "enable_legacy_calls": "Luba vana lahenduse hääl- ja videokõned",
+            "enable_legacy_calls_description": "Kehtib Jitsi ja 1:1 WebRTC kõnede kohta",
             "mirror_local_feed": "Peegelda kohalikku videovoogu",
-            "missing_permissions_prompt": "Meediaga seotud õigused puuduvad. Nende nõutamiseks klõpsi järgnevat nuppu.",
+            "missing_permissions_prompt": "Kõnedes osalemiseks luba %(brand)s rakendusel kasutada arvuti heli- ja videoseadmeid.",
             "noise_suppression": "Müra vähendamine",
             "noise_suppression_description": "Vähendab kõnede ajal mikrofonisisendi taustamüra. See seadistus kehtib ka Element Calli puhul.",
-            "request_permissions": "Nõuta meediaõigusi",
+            "permissions": "Luba mikrofoni ja kaamera kasutamine",
+            "request_permissions": "Küsi õigusi",
             "title": "Heli ja video",
             "video_input_empty": "Ei leidnud ühtegi veebikaamerat",
             "video_section": "Videovoo seadistused",
             "voice_agc": "Kohanda mikrofoni valjust automaatelt",
+            "voice_input_description": "Siin seadistatud helisisendit kasutatakse häälsõnumite ja kõnede jaoks (vana tüüpi 1:1 kõned).",
+            "voice_input_section": "Helisisend",
             "voice_processing": "Heli töötlemine",
             "voice_section": "Heli seadistused"
         },
@@ -3097,7 +3055,7 @@
         "me": "Näitab tegevusi",
         "msg": "Saadab sõnumi näidatud kasutajale",
         "myavatar": "Sellega muudad sinu tunnuspilti kõikides jututubades",
-        "myroomavatar": "Sellega muudad sinu tunnuspilti vaid selles jututoas",
+        "myroomavatar": "Sellega muudad oma tunnuspilti vaid selles jututoas",
         "myroomnick": "Muudab sinu kuvatavat nime vaid selles jututoas",
         "nick": "Muudab sinu kuvatavat nime",
         "no_active_call": "Jututoas ei ole kõnet pooleli",
@@ -3118,6 +3076,10 @@
         "spoiler": "Saadab selle sõnumi rõõmurikkujana",
         "status": {
             "description": "Määratle oma praegune olek",
+            "no_args": "Sa pole argumente lisanud. Peaksid lisama emoji ja kui tahad, siis ka tekstikomponendi.",
+            "no_emoji": "Sa ei lisanud emojit",
+            "no_text": "Sa ei lisanud mitte mingit olekuteksti",
+            "too_long_emoji": "Esimene argument peab olema emoji",
             "too_long_text": "Sinu sisestatud tekst on liiga pikk."
         },
         "tableflip": "Lisab vormindamata sõnumi ette (╯°□°）╯︵ ┻━┻",
@@ -3142,7 +3104,7 @@
         "view": "Vaata sellise aadressiga jututuba",
         "whois": "Näitab teavet kasutaja kohta"
     },
-    "sliding_sync_legacy_no_longer_supported": "Järkjärgulise sünkroniseerimise (Sliding sync) varasem lahendus pole enam toetatud: uue lahenduse kasutamiseks palun logi rakendusesse uuesti sisse",
+    "sliding_sync_legacy_no_longer_supported": "Järkjärgulise sünkroonimise (Sliding sync) varasem lahendus pole enam toetatud: uue lahenduse kasutamiseks palun logi rakendusesse uuesti sisse",
     "space": {
         "add_existing_room_space": {
             "create": "Kas sa selle asemel soovid lisada jututuba?",
@@ -3158,8 +3120,8 @@
             "subspace_moved_note": "Kogukondade lisamine asub nüüd uues kohas."
         },
         "add_existing_subspace": {
-            "create_button": "Loo uus kogukonnakeskus",
-            "create_prompt": "Kas sa selle asemel soovid lisada uut kogukonnakeskust?",
+            "create_button": "Loo uus kogukond",
+            "create_prompt": "Kas sa selle asemel soovid lisada uut kogukonda?",
             "filter_placeholder": "Otsi kogukondi",
             "space_dropdown_title": "Lisa olemasolev kogukond"
         },
@@ -3172,13 +3134,13 @@
         },
         "failed_load_rooms": "Jututubade loendi laadimine ei õnnestunud.",
         "failed_remove_rooms": "Mõnede jututubade eemaldamine ei õnnestunud. Proovi hiljem uuesti",
-        "incompatible_server_hierarchy": "Sinu koduserver ei võimalda kuvada kogukonnakeskuste hierarhiat.",
+        "incompatible_server_hierarchy": "Sinu koduserver ei võimalda kuvada kogukondade hierarhiat.",
         "invite": "Kutsu teisi kasutajaid",
         "invite_description": "Kutsu e-posti aadressi või kasutajanime alusel",
         "invite_link": "Jaga kutse linki",
         "joining_space": "Liitun",
         "landing_welcome": "Tete tulemast <name/> liikmeks",
-        "leave_dialog_action": "Lahku kogukonnakeskusest",
+        "leave_dialog_action": "Lahku kogukonnast",
         "leave_dialog_description": "Sa oled lahkumas <spaceName/> kogukonnast.",
         "leave_dialog_only_admin_room_warning": "Mõnedes jututubades või kogukondades oled sa ainus haldaja. Kuna sa nüüd soovid neist lahkuda, siis jäävad nad haldajata.",
         "leave_dialog_only_admin_warning": "Sa oled selle kogukonna ainus haldaja. Kui lahkud, siis ei leidu enam kedagi, kellel oleks seal haldusõigusi.",
@@ -3187,7 +3149,7 @@
         "leave_dialog_option_none": "Ära lahku ühestki jututoast",
         "leave_dialog_option_specific": "Lahku mõnedest jututubadest",
         "leave_dialog_public_rejoin_warning": "Ilma uue kutseta sa ei saa uuesti liituda.",
-        "leave_dialog_title": "Lahku %(spaceName)s kogukonnakeskusest",
+        "leave_dialog_title": "Lahku %(spaceName)s kogukonnast",
         "mark_suggested": "Märgi soovituseks",
         "no_search_result_hint": "Aga proovi muuta otsingusõna või kontrolli ega neis trükivigu polnud.",
         "preferences": {
@@ -3198,7 +3160,7 @@
         "search_children": "Otsi %(spaceName)s kogukonnast",
         "search_placeholder": "Otsi nimede ja kirjelduste seast",
         "select_room_below": "Esmalt vali alljärgnevast üks jututuba",
-        "share_public": "Jaga oma avalikku kogukonnakeskust",
+        "share_public": "Jaga oma avalikku kogukonda",
         "suggested": "Soovitatud",
         "suggested_tooltip": "Teised kasutajad soovitavad liitumist selle jututoaga",
         "title_when_query_available": "Tulemused",
@@ -3209,12 +3171,6 @@
     "space_settings": {
         "title": "Seadistused - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Sul pole õigusi siia kogukonnakeskusesse lisada jututubasid",
-        "error_no_permission_add_space": "Sul pole õigusi siia kogukonda teiste kogukondade lisamiseks",
-        "error_no_permission_create_room": "Sul pole õigusi luua siin kogukonnakeskuses uusi jututubasid",
-        "error_no_permission_invite": "Sul pole õigusi siia kogukonda osalejate kutsumiseks"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Sisesta uue serveri nimi mida tahad uurida.",
@@ -3341,7 +3297,6 @@
         "download_action_downloading": "Laadin alla",
         "download_failed": "Allalaadimine ei õnnestunud",
         "download_failed_description": "Selle faili allalaadimisel tekkis viga",
-        "e2e_state": "Läbiva krüptimise olek",
         "edits": {
             "tooltip_label": "Muudetud %(date)s. Klõpsi et näha varasemaid versioone.",
             "tooltip_sub": "Muudatuste nägemiseks klõpsi",
@@ -3423,9 +3378,7 @@
         "m.poll.start": "%(senderName)s algatas küsitluse - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s muutis jututoa tunnuspilti.",
-            "changed_img": "%(senderDisplayName)s vahetas jututoa avatariks <img/>",
-            "lightbox_title": "%(senderDisplayName)s muutis %(roomName)s jututoa avatari",
-            "removed": "%(senderDisplayName)s eemaldas jututoa avatari."
+            "lightbox_title": "%(senderDisplayName)s muutis %(roomName)s jututoa tunnuspilti"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3473,6 +3426,8 @@
             "accepted_invite": "%(targetName)s võttis kutse vastu",
             "ban": "%(senderName)s keelas ligipääsu kasutajale",
             "ban_reason": "%(senderName)s keelas ligipääsu kasutajale: %(reason)s",
+            "ban_reason_spoiler": "%(senderName)s seadis kasutajale <user/> suhtluskeelu ja põhjuseks oli: %(reason)s",
+            "ban_spoiler": "%(senderName)s seadis kasutajale <user/> suhtluskeelu",
             "change_avatar": "%(senderName)s muutis oma profiilipilti",
             "change_name": "%(oldDisplayName)s muutis oma kuvatava nime %(displayName)s-ks",
             "change_name_avatar": "%(oldDisplayName)s muutis oma kuvatavat nime ja tunnuspilti",
@@ -3789,10 +3744,10 @@
         "ban_space_everything": "Määra kasutajale suhtluskeeld kõikjal, kus ma saan",
         "ban_space_specific": "Määra kasutajale suhtluskeeld valitud kohtades, kust ma saan",
         "deactivate_confirm_action": "Deaktiveeri kasutaja",
-        "deactivate_confirm_description": "Kasutaja deaktiveerimisel logitakse ta automaatselt välja ning ei lubata enam sisse logida. Lisaks lahkub ta kõikidest jututubadest, mille liige ta parasjagu on. Seda tegevust ei saa tagasi pöörata. Kas sa oled ikka kindel, et soovid selle kasutaja kõijkalt eemaldada?",
+        "deactivate_confirm_description": "Kasutaja deaktiveerimisel eemaldatakse kõik tema seadmed ning ei lubata enam sisse logida. Lisaks lahkub ta kõikidest jututubadest, mille liige ta parasjagu on. Seda tegevust ei saa tagasi pöörata. Kas sa oled ikka kindel, et soovid selle kasutaja kõijkalt eemaldada?",
         "deactivate_confirm_title": "Kas deaktiveerime kasutajakonto?",
         "demote_button": "Vähenda enda õigusi",
-        "demote_self_confirm_description_space": "Kuna sa vähendad enda õigusi, siis sul ei pruugi hiljem olla võimalik seda muutust tagasi pöörata. Kui sa juhtumisi oled viimane haldusõigustega kasutaja kogukonnakeskuses, siis hiljem on võimatu samu õigusi tagasi saada.",
+        "demote_self_confirm_description_space": "Kuna sa vähendad enda õigusi, siis sul ei pruugi hiljem olla võimalik seda muutust tagasi pöörata. Kui sa juhtumisi oled viimane haldusõigustega kasutaja kogukonnas, siis hiljem on võimatu samu õigusi tagasi saada.",
         "demote_self_confirm_room": "Kuna sa vähendad enda õigusi, siis sul ei pruugi hiljem olla võimalik seda muutust tagasi pöörata. Kui sa juhtumisi oled viimane haldusõigustega kasutaja jututoas, siis hiljem on võimatu samu õigusi tagasi saada.",
         "demote_self_confirm_title": "Kas vähendad enda õigusi?",
         "disinvite_button_room": "Eemalda kutse jututuppa",
@@ -3851,6 +3806,9 @@
         "verify_button": "Verifitseeri kasutaja",
         "verify_explainer": "Lisaturvalisus mõttes verifitseeri see kasutaja võrreldes selleks üheks korraks loodud koodi mõlemas seadmes."
     },
+    "user_status": {
+        "on_a_call": "Kõne on pooleli"
+    },
     "voip": {
         "already_in_call": "Kõne on juba pooleli",
         "already_in_call_person": "Sinul juba kõne käsil selle osapoolega.",
@@ -4047,13 +4005,7 @@
         "close_to_view_right_panel": "Sellel paneelil kuvamiseks sulge see vidin",
         "context_menu": {
             "delete": "Kustuta vidin",
-            "delete_warning": "Vidina kustutamisel eemaldatakse ta kõikide selle jututoa kasutajate jaoks. Kas sa kindlasti soovid seda vidinat eemaldada?",
-            "move_left": "Liigu vasakule",
-            "move_right": "Liigu paremale",
-            "remove": "Eemalda kõigilt",
-            "revoke": "Tühista õigused",
-            "screenshot": "Pildista",
-            "start_audio_stream": "Käivita audiovoog"
+            "delete_warning": "Vidina kustutamisel eemaldatakse ta kõikide selle jututoa kasutajate jaoks. Kas sa kindlasti soovid seda vidinat eemaldada?"
         },
         "cookie_warning": "See vidin võib kasutada küpsiseid.",
         "error_hangup_description": "Kõne on katkenud. (Veateade: %(message)s)",
diff --git a/apps/web/src/i18n/strings/fa.json b/apps/web/src/i18n/strings/fa.json
index 2708bea7c2..5c5ad6b982 100644
--- a/apps/web/src/i18n/strings/fa.json
+++ b/apps/web/src/i18n/strings/fa.json
@@ -9,7 +9,6 @@
             "one": "۱ اشاره خوانده نشده.",
             "other": "%(count)s پیام‌های خوانده نشده از جمله اشاره‌ها."
         },
-        "room_name": "اتاق %(name)s",
         "unread_messages": "پیام های خوانده نشده."
     },
     "a11y_jump_first_unread_room": "به اولین اتاق خوانده نشده بروید.",
@@ -42,7 +41,6 @@
         "enable": "فعال کن",
         "enter_fullscreen": "نمایش تمام صفحه",
         "exit_fullscreeen": "خروج از نمایش تمام صفحه",
-        "explore_public_rooms": "کاوش در اتاق‌های عمومی",
         "explore_rooms": "جستجو در اتاق ها",
         "export": "استخراج (Export)",
         "go": "برو",
@@ -53,7 +51,6 @@
         "ignore": "نادیده‌گرفتن",
         "import": "واردکردن (Import)",
         "invite": "دعوت",
-        "invites_list": "دعوت‌ها",
         "join": "پیوستن",
         "learn_more": "بیشتر بدانید",
         "leave": "خروج",
@@ -74,7 +71,6 @@
         "remove": "حذف کن",
         "rename": "تغییر نام",
         "reply": "پاسخ",
-        "report_content": "گزارش محتوا",
         "resend": "بازفرست",
         "reset": "بازراه‌اندازی",
         "resume": "ادامه",
@@ -91,7 +87,6 @@
         "sign_out": "خروج از حساب کاربری",
         "skip": "بیخیال",
         "start": "شروع",
-        "start_chat": "شروع چت",
         "stop": "توقف",
         "submit": "ارسال",
         "subscribe": "اضافه‌شدن",
@@ -170,10 +165,7 @@
         "log_in_new_account": "به حساب کاربری جدید خود <a>وارد شوید</a>.",
         "logout_dialog": {
             "description": "آیا مطمئن هستید که می خواهید از برنامه خارج شوید؟",
-            "megolm_export": "کلیدها را به صورت دستی استخراج (Export)کن",
             "setup_key_backup_title": "دسترسی به پیام‌های رمزشده‌ی خود را از دست خواهید داد",
-            "setup_secure_backup_description_1": "پیام‌های رمزشده با رمزنگاری سرتاسر ایمن می‌شوند. فقط شما و طرف گیرنده(ها) کلیدهای خواندن این پیام ها را در اختیار دارید.",
-            "setup_secure_backup_description_2": "وقتی از سیستم خارج می‌شوید، این کلیدها از این دستگاه حذف می‌شوند، به این معنی که نمی‌توانید پیام‌های رمزگذاری‌شده را بخوانید مگر اینکه کلیدهای آن‌ها را در دستگاه‌های دیگر خود داشته باشید یا از آنها در سرور نسخه پشتیبان تهیه کنید.",
             "skip_key_backup": "پیام‌های رمزشده‌ی خود را نمی‌خواهم"
         },
         "misconfigured_body": "از مدیر %(brand)s خود بخواهید تا <a>پیکربندی شما</a> را از جهت ورودی‌های نادرست یا تکراری بررسی کند.",
@@ -337,14 +329,12 @@
         "encrypted": "رمزشده",
         "error": "خطا",
         "faq": "سوالات پرتکرار",
-        "favourites": "موردعلاقه‌ها",
         "feedback": "بازخورد",
         "filter_results": "پالایش نتایج",
         "general": "عمومی",
         "go_to_settings": "برو به تنظیمات",
         "guest": "مهمان",
         "help": "راهنما",
-        "historical": "تاریخی",
         "home": "خانه",
         "homeserver": "سرور",
         "identity_server": "کارساز هویت",
@@ -352,7 +342,6 @@
         "labs": "قابلیت‌های بتا",
         "legal": "قانونی",
         "light": "روشن",
-        "low_priority": "اولویت کم",
         "matrix": "ماتریکس",
         "microphone": "میکروفون",
         "mute": "سکوت",
@@ -402,7 +391,6 @@
         "success": "موفقیت",
         "suggestions": "پیشنهادات",
         "support": "پشتیبانی",
-        "system_alerts": "هشدارهای سیستم",
         "theme": "پوسته",
         "threads": "موضوعات",
         "timeline": "سیر زمان گفتگو‌ها",
@@ -413,7 +401,6 @@
         "user": "کاربر",
         "user_avatar": "تصویر پروفایل",
         "username": "نام کاربری",
-        "video": "ویدئو",
         "view_message": "مشاهده پیام",
         "warning": "هشدار"
     },
@@ -530,22 +517,6 @@
     },
     "dialog_close_label": "بستن گفتگو",
     "download_completed": "بارگیری کامل شد",
-    "emoji": {
-        "categories": "دسته بندی ها",
-        "category_activities": "فعالیت ها",
-        "category_animals_nature": "حیوانات و طبیعت",
-        "category_flags": "پرچم ها",
-        "category_food_drink": "غذا و نوشیدنی",
-        "category_frequently_used": "متداول",
-        "category_objects": "اشیاء",
-        "category_smileys_people": "لبخند و افراد",
-        "category_symbols": "نمادها",
-        "category_travel_places": "سفر و اماکن",
-        "quick_reactions": "واکنش سریع"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "لغو جستجو"
-    },
     "empty_room": "اتاق خالی",
     "empty_room_was_name": "اتاق خالی (نام قبلی: %(oldName)s)",
     "encryption": {
@@ -588,16 +559,6 @@
             "warning": "اگر متد بازیابی را حذف نکرده‌اید، ممکن است حمله‌کننده‌ای سعی در دسترسی به حساب‌کاربری شما داشته باشد. گذرواژه حساب کاربری خود را تغییر داده و فورا یک روش بازیابی را از بخش تنظیمات خود تنظیم کنید."
         },
         "set_up_toast_title": "پشتیبان‌گیری امن را انجام دهید",
-        "setup_secure_backup": {
-            "explainer": "پیش از خروج از حساب کاربری، از کلید‌های خود پشتیبان بگیرید تا آن‌ها را از دست ندهید."
-        },
-        "udd": {
-            "other_ask_verify_text": "از این کاربر بخواهید نشست خود را تأیید کرده و یا آن را به صورت دستی تأیید کنید.",
-            "other_new_session_text": "%(name)s (%(userId)s) وارد یک نشست جدید شد بدون اینکه آن را تائید کند:",
-            "own_ask_verify_text": "نست دیگر خود را با استفاده از یکی از راهکارهای زیر تأیید کنید.",
-            "own_new_session_text": "شما وارد یک نشست جدید شده‌اید بدون اینکه آن را تائید کنید:",
-            "title": "قابل اعتماد نیست"
-        },
         "unable_to_setup_keys_error": "تنظیم کلیدها امکان پذیر نیست",
         "verification": {
             "accepting": "پذیرش…",
@@ -965,9 +926,6 @@
         "room_rejoin_warning": "این اتاق عمومی نیست. پیوستن مجدد بدون دعوتنامه امکان‌پذیر نخواهد بود.",
         "space_rejoin_warning": "این فضا عمومی نیست. امکان پیوستن مجدد بدون دعوتنامه امکان‌پذیر نخواهد بود."
     },
-    "left_panel": {
-        "open_dial_pad": "باز کردن صفحه شماره‌گیری"
-    },
     "lightbox": {
         "rotate_left": "چرخش به چپ",
         "rotate_right": "چرخش به راست"
@@ -1068,7 +1026,6 @@
     "report_content": {
         "description": "گزارش این پیام شناسه‌ی منحصر به فرد رخداد آن را برای مدیر سرور ارسال می‌کند. اگر پیام‌های این اتاق رمزشده باشند، مدیر سرور شما امکان خواندن متن آن پیام یا مشاهده‌ی عکس یا فایل‌های دیگر را نخواهد داشت.",
         "missing_reason": "لطفا توضیح دهید که چرا گزارش می‌دهید.",
-        "other_label": "دیگر",
         "report_content_to_homeserver": "گزارش محتوا به مدیر سرور خود"
     },
     "restore_key_backup_dialog": {
@@ -1191,24 +1148,10 @@
         }
     },
     "room_list": {
-        "add_room_label": "افزودن اتاق",
-        "breadcrumbs_empty": "اخیراً از اتاقی بازدید نشده است",
-        "breadcrumbs_label": "اتاق‌هایی که به تازگی بازدید کرده‌اید",
         "failed_add_tag": "در افزودن تگ %(tagName)s موفقیت‌آمیز نبود",
         "failed_remove_tag": "خطا در حذف کلیدواژه‌ی %(tagName)s از گپ",
         "notification_options": "تنظیمات اعلان",
-        "show_less": "نمایش کمتر",
-        "show_n_more": {
-            "other": "نمایش %(count)s مورد بیشتر",
-            "one": "نمایش %(count)s مورد بیشتر"
-        },
-        "show_previews": "مشاهده پیش‌نمایش پیام‌ها",
-        "sort_by": "مرتب سازی بر اساس",
-        "sort_by_activity": "فعالیت",
-        "sort_by_alphabet": "حروف الفبا",
-        "sort_unread_first": "ابتدا اتاق های با پیام خوانده نشده را نمایش بده",
-        "sublist_options": "لیست گزینه‌ها",
-        "suggested_rooms_heading": "اتاق‌های پیشنهادی"
+        "show_less": "نمایش کمتر"
     },
     "room_settings": {
         "advanced": {
@@ -1704,10 +1647,6 @@
         "unmark_suggested": "علامت‌گذاری به عنوان پیشنهاد‌نشده",
         "user_lacks_permission": "شما دسترسی ندارید"
     },
-    "spaces": {
-        "error_no_permission_add_room": "شما اجازه افزودن اتاق به این فضای کاری را ندارید",
-        "error_no_permission_create_room": "شما اجازه ایجاد اتاق جدید در این فضای کاری را ندارید"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "نام سرور جدیدی که می خواهید در آن کاوش کنید را وارد کنید.",
@@ -1811,9 +1750,7 @@
         "m.poll.start": "%(senderName)s یک نظر سنجی را شروع کرد - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s آواتار اتاق تغییر کرد.",
-            "changed_img": "%(senderDisplayName)s آواتار اتاق را به <img/> تغییر داد",
-            "lightbox_title": "%(senderDisplayName)s آواتار خود را در %(roomName)s تغییر داد",
-            "removed": "%(senderDisplayName)s آواتار اتاق را حذف کرد."
+            "lightbox_title": "%(senderDisplayName)s آواتار خود را در %(roomName)s تغییر داد"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -2257,13 +2194,7 @@
         },
         "context_menu": {
             "delete": "حذف ویجت",
-            "delete_warning": "حذف یک ویجت، باعث حذف‌شدن آن برای همه‌ی کاربران این اتاق می‌شود. آیا از حذف این ویجت اطمینان دارید؟",
-            "move_left": "به سمت چپ ببر",
-            "move_right": "به سمت راست ببر",
-            "remove": "حذف برای همه",
-            "revoke": "دسترسی‌ها را لغو کنید",
-            "screenshot": "عکس بگیرید",
-            "start_audio_stream": "آغاز جریان صدا"
+            "delete_warning": "حذف یک ویجت، باعث حذف‌شدن آن برای همه‌ی کاربران این اتاق می‌شود. آیا از حذف این ویجت اطمینان دارید؟"
         },
         "cookie_warning": "این ابزارک ممکن است از کوکی استفاده کند.",
         "error_hangup_description": "شما از تماس قطع شدید.(خطا: %(message)s)",
diff --git a/apps/web/src/i18n/strings/fi.json b/apps/web/src/i18n/strings/fi.json
index 1a9b175aff..497d311244 100644
--- a/apps/web/src/i18n/strings/fi.json
+++ b/apps/web/src/i18n/strings/fi.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Emoji-valitsin",
         "jump_first_invite": "Siirry ensimmäiseen kutsuun.",
         "message_composer": "Viestin kirjoitusikkuna",
         "n_unread_messages": {
@@ -11,8 +10,6 @@
             "other": "%(count)s lukematonta viestiä, sisältäen maininnat.",
             "one": "Yksi lukematon maininta."
         },
-        "recent_rooms": "Viimeisimmät huoneet",
-        "room_name": "Huone %(name)s",
         "room_status_bar": "Huoneen tilapalkki",
         "seek_bar_label": "Äänen siirtymispalkki",
         "unread_messages": "Lukemattomat viestit."
@@ -22,7 +19,6 @@
         "accept": "Hyväksy",
         "add": "Lisää",
         "add_existing_room": "Lisää olemassa oleva huone",
-        "add_people": "Lisää ihmisiä",
         "apply": "Toteuta",
         "approve": "Hyväksy",
         "ask_to_join": "Pyydä liittyä",
@@ -55,7 +51,6 @@
         "enter_fullscreen": "Siirry koko näytön tilaan",
         "exit_fullscreeen": "Poistu koko näytön tilasta",
         "expand": "Laajenna",
-        "explore_public_rooms": "Selaa julkisia huoneita",
         "explore_rooms": "Selaa huoneita",
         "export": "Vie",
         "forward": "Välitä",
@@ -67,8 +62,6 @@
         "ignore": "Sivuuta",
         "import": "Tuo",
         "invite": "Kutsu",
-        "invite_to_space": "Kutsu tilaan",
-        "invites_list": "Kutsut",
         "join": "Liity",
         "learn_more": "Lue lisää",
         "leave": "Poistu",
@@ -95,7 +88,6 @@
         "rename": "Nimeä uudelleen",
         "reply": "Vastaa",
         "reply_in_thread": "Vastaa ketjuun",
-        "report_content": "Ilmoita sisällöstä",
         "report_room": "Ilmoita huoneesta",
         "resend": "Lähetä uudelleen",
         "reset": "Palauta alkutilaan",
@@ -115,8 +107,6 @@
         "sign_out": "Poista tämä laite",
         "skip": "Ohita",
         "start": "Aloita",
-        "start_chat": "Aloita keskustelu",
-        "start_new_chat": "Aloita uusi keskustelu",
         "stop": "Pysäytä",
         "submit": "Lähetä",
         "subscribe": "Tilaa",
@@ -213,10 +203,8 @@
         "log_in_new_account": "<a>Kirjaudu</a> uudelle tilillesi.",
         "logout_dialog": {
             "description": "Haluatko varmasti poistaa tämän laitteen?",
-            "megolm_export": "Vie avaimet käsin",
-            "setup_key_backup_title": "Menetät pääsyn salattuihin viesteihisi",
-            "setup_secure_backup_description_1": "Salatut viestit turvataan päästä päähän -salauksella. Vain sinä ja viestien vastaanottaja(t) omaavat avaimet näiden viestien lukemiseen.",
-            "skip_key_backup": "En halua salattuja viestejäni"
+            "setup_key_backup_title": "Olet menettämässä pääsyn salattuihin keskusteluihisi",
+            "skip_key_backup": "Poista tämä laite silti"
         },
         "misconfigured_body": "Pyydä %(brand)s-ylläpitäjääsi tarkistamaan, onko <a>asetuksissasi</a>virheellisiä tai toistettuja merkintöjä.",
         "misconfigured_title": "%(brand)sin asetukset ovat pielessä",
@@ -242,7 +230,9 @@
             "check_code_heading": "Kirjoita toisessa laitteessa näkyvä numero",
             "check_code_input_label": "2-numeroinen koodi",
             "check_code_mismatch": "Numerot eivät täsmää",
+            "choose_desktop_computer": "Valitse \"%(desktopComputer)s\"",
             "completing_setup": "Viimeistellään uuden laitteesi käyttöönottoa",
+            "desktop_computer": "Pöytätietokone",
             "error_etag_missing": "Tapahtui odottamaton virhe. Tämä voi johtua selaimen laajennuksesta, välityspalvelimesta tai palvelimen virheellisestä konfiguroinnista.",
             "error_expired": "Kirjautuminen vanhentui. Yritä uudelleen.",
             "error_expired_title": "Kirjautumista ei suoritettu ajoissa",
@@ -263,16 +253,22 @@
             "error_user_declined": "Sinä tai palveluntarjoajasi hylkäsi kirjautumispyynnön.",
             "error_user_declined_title": "Kirjautuminen hylätty",
             "follow_remaining_instructions": "Noudata jäljellä olevia ohjeita",
+            "open_element_mobile_device": "Avaa %(brand)s mobiililaitteellasi",
             "open_element_other_device": "Avaa %(brand)s toisella laitteellasi",
             "point_the_camera": "Skannaa tässä näkyvä QR-koodi",
-            "scan_code_instruction": "Skannaa QR-koodi toisella laitteella",
+            "ready_to_scan": "Valmis skannaamaan",
+            "scan_code_instruction": "Skannaa QR-koodi",
+            "scan_code_instruction_reciprocate": "Skannaa QR-koodi toisella laitteella",
             "scan_qr_code": "Kirjaudu sisään QR-koodilla",
-            "security_code": "Turvakoodi",
-            "security_code_prompt": "Anna pyydettäessä alla oleva koodi toisella laitteellasi.",
+            "security_code_prompt": "Palveluntarjoajasi saattaa kysyä seuraavaa koodia kirjautumisen vahvistamiseksi.",
+            "security_code_title": "Vahvistuskoodisi",
             "select_qr_code": "Valitse \"%(scanQRCode)s\"",
+            "select_ready_to_scan": "Valitse \"%(readyToScan)s\" ja skannaa tässä näkyvä QR-koodi",
+            "start_over": "Aloita alusta",
+            "tap_avatar_link_new_device": "Napauta avatariasi ja valitse \"%(linkNewDevice)s\"",
             "unsupported_explainer": "Palveluntarjoajasi ei tue kirjautumista uuteen laitteeseen QR-koodilla.",
             "unsupported_heading": "QR-koodia ei tueta",
-            "waiting_for_device": "Odotetaan laitteen sisäänkirjautumista"
+            "waiting_for_device": "Odotetaan toista laitettasi"
         },
         "register_action": "Luo tili",
         "registration": {
@@ -329,6 +325,7 @@
         "sign_in_instead_prompt": "Onko sinulla jo tili? <a>Kirjaudu tästä</a>",
         "sign_in_or_register": "Kirjaudu sisään tai luo tili",
         "sign_in_or_register_description": "Käytä tiliäsi tai luo uusi jatkaaksesi.",
+        "sign_in_with_qr": "Kirjaudu sisään QR-koodilla",
         "sign_in_with_sso": "Kirjaudu sisään käyttäen kertakirjautumista",
         "signing_in": "Kirjaudutaan…",
         "soft_logout": {
@@ -455,7 +452,6 @@
         "encrypted": "Salattu",
         "error": "Virhe",
         "faq": "Usein kysytyt kysymykset",
-        "favourites": "Suosikit",
         "feedback": "Palaute",
         "filter_results": "Suodata tuloksia",
         "forward_message": "Välitä viesti",
@@ -463,7 +459,6 @@
         "go_to_settings": "Siirry asetuksiin",
         "guest": "Vieras",
         "help": "Ohje",
-        "historical": "Vanhat",
         "home": "Etusivu",
         "homeserver": "Kotipalvelin",
         "identity_server": "Identiteettipalvelin",
@@ -475,13 +470,11 @@
         "light": "Vaalea",
         "loading": "Ladataan…",
         "location": "Sijainti",
-        "low_priority": "Matala prioriteetti",
         "matrix": "Matrix",
         "message": "Viesti",
         "message_layout": "Viestien asettelu",
         "message_timestamp_invalid": "Virheellinen aikaleima",
         "microphone": "Mikrofoni",
-        "model": "Malli",
         "modern": "Moderni",
         "mute": "Mykistä",
         "n_members": {
@@ -539,7 +532,6 @@
         "success": "Onnistui",
         "suggestions": "Ehdotukset",
         "support": "Tuki",
-        "system_alerts": "Järjestelmähälytykset",
         "theme": "Teema",
         "thread": "Ketju",
         "threads": "Ketjut",
@@ -556,7 +548,6 @@
         "username": "Käyttäjätunnus",
         "verified": "Vahvistettu",
         "version": "Versio",
-        "video": "Video",
         "video_room": "Videohuone",
         "view_message": "Näytä viesti",
         "warning": "Varoitus"
@@ -759,22 +750,6 @@
     },
     "dialog_close_label": "Sulje dialogi",
     "download_completed": "Lataus valmis",
-    "emoji": {
-        "categories": "Luokat",
-        "category_activities": "Aktiviteetit",
-        "category_animals_nature": "Eläimet ja luonto",
-        "category_flags": "Liput",
-        "category_food_drink": "Ruoka ja juoma",
-        "category_frequently_used": "Usein käytetyt",
-        "category_objects": "Esineet",
-        "category_smileys_people": "Hymiöt ja ihmiset",
-        "category_symbols": "Symbolit",
-        "category_travel_places": "Matkustaminen ja paikat",
-        "quick_reactions": "Pikareaktiot"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Peruuta haku"
-    },
     "empty_room": "Tyhjä huone",
     "empty_room_was_name": "Tyhjä huone (oli %(oldName)s)",
     "encryption": {
@@ -820,17 +795,6 @@
         "set_up_recovery": "Varmuuskopioi keskustelusi",
         "set_up_recovery_toast_description": "Keskustelusi varmuuskopioidaan automaattisesti päästä päähän -salauksella. Jotta voit palauttaa tämän varmuuskopion ja säilyttää digitaalisen identiteettisi, kun menetät pääsyn kaikkiin laitteisiisi, tarvitset palautusavaimesi.",
         "set_up_toast_title": "Määritä turvallinen varmuuskopio",
-        "setup_secure_backup": {
-            "explainer": "Varmuuskopioi avaimesi ennen kuin poistat tämän laitteen välttääksesi avainten menetyksen."
-        },
-        "udd": {
-            "interactive_verification_button": "Vahvista vuorovaikutteisesti emojilla",
-            "other_ask_verify_text": "Pyydä tätä käyttäjää vahvistamaan istuntonsa, tai vahvista se manuaalisesti alla.",
-            "other_new_session_text": "%(name)s (%(userId)s) kirjautui uudella istunnolla varmentamatta sitä:",
-            "own_ask_verify_text": "Varmenna toinen istuntosi käyttämällä yhtä seuraavista tavoista.",
-            "own_new_session_text": "Olet kirjautunut uuteen istuntoon varmentamatta sitä:",
-            "title": "Ei luotettu"
-        },
         "verification": {
             "accepting": "Hyväksytään…",
             "after_new_login": {
@@ -1248,7 +1212,6 @@
         "element_call_video_rooms": "Element Call -videohuoneet",
         "experimental_section": "Ennakot",
         "extended_profiles_msc_support": "Edellyttää, että palvelimesi tukee MSC4133:a",
-        "group_calls": "Uusi ryhmäpuhelukokemus",
         "group_developer": "Kehittäjä",
         "group_encryption": "Salaus",
         "group_experimental": "Kokeellinen",
@@ -1262,7 +1225,6 @@
         "group_ui": "Käyttöliittymä",
         "group_voip": "Ääni ja video",
         "group_widgets": "Sovelmat",
-        "html_topic": "Näytä huoneiden aiheiden HTML-esitys",
         "join_beta": "Liity beetaan",
         "join_beta_reload": "Beetaan liittyminen lataa %(brand)sin uudelleen.",
         "jump_to_date_msc_support": "Vaatii, että palvelimesi tukee MSC3030:a",
@@ -1270,17 +1232,15 @@
         "leave_beta": "Poistu beetasta",
         "leave_beta_reload": "Beetasta poistuminen lataa %(brand)sin uudelleen.",
         "location_share_live_description": "Tilapäinen toteutus. Sijainnit säilyvät huoneen historiassa.",
+        "login_with_qr": "Kirjaudu sisään QR-koodilla",
         "mjolnir": "Uusia tapoja jättää ihmiset huomiotta",
         "msc3531_hide_messages_pending_moderation": "Anna moderaattorien piilottaa moderointia odottavia viestejä.",
         "notification_settings": "Uudet ilmoitusasetukset",
         "notification_settings_beta_title": "Ilmoitusasetukset",
-        "report_to_moderators": "Ilmoita moderaattoreille",
-        "report_to_moderators_description": "Moderointia tukevissa huoneissa väärinkäytökset voi ilmoittaa Ilmoita-painikkeella huoneen moderaattoreille.",
         "sliding_sync": "Liukuvan synkronoinnin tila",
         "sliding_sync_description": "Työn alla, käytöstä poistaminen ei ole mahdollista.",
         "sliding_sync_disabled_notice": "Kirjaudu uudelleen sisään poistaaksesi käytöstä",
         "sliding_sync_server_no_support": "Palvelimellasi ei ole tukea",
-        "under_active_development": "Aktiivisen kehityksen kohteena.",
         "video_rooms": "Videohuoneet",
         "video_rooms_a_new_way_to_chat": "Uusi tapa keskustella äänen ja videon välityksellä %(brand)sissä.",
         "video_rooms_always_on_voip_channels": "Videohuoneet ovat huoneisiin upotettuja, aina päällä olevia VoIP-kanavia %(brand)sissä.",
@@ -1330,9 +1290,6 @@
         "room_rejoin_warning": "Tämä huone ei ole julkinen. Et voi liittyä uudelleen ilman kutsua.",
         "space_rejoin_warning": "Tämä tila ei ole julkinen. Et voi liittyä uudelleen ilman kutsua."
     },
-    "left_panel": {
-        "open_dial_pad": "Avaa näppäimistö"
-    },
     "lightbox": {
         "rotate_left": "Kierrä vasempaan",
         "rotate_right": "Kierrä oikeaan"
@@ -1403,10 +1360,9 @@
         "level_none": "Ei mitään",
         "level_notification": "Ilmoitus",
         "mark_all_read": "Merkitse kaikki luetuiksi",
-        "mentions_and_keywords": "@maininnat & asiasanat",
-        "mentions_and_keywords_description": "Vastaanota ilmoitukset maininnoista ja asiasanoista <a>asetuksissa</a> määrittämälläsi tavalla",
+        "mentions_and_keywords": "Vain @maininnat ja vastaukset",
+        "mentions_and_keywords_description": "Saat ilmoituksia vain maininnoista, vastauksista ja avainsanoista <a>asetuksissa</a> määrittämälläsi tavalla",
         "mentions_keywords": "Maininnat ja avainsanat",
-        "message_didnt_send": "Viestiä ei lähetetty. Lisätietoa napsauttamalla.",
         "mute_description": "Et saa ilmoituksia"
     },
     "notifier": {
@@ -1490,7 +1446,6 @@
     },
     "quick_settings": {
         "all_settings": "Kaikki asetukset",
-        "metaspace_section": "Kiinnitä sivupalkkiin",
         "sidebar_settings": "Lisää asetuksia",
         "title": "Pika-asetukset"
     },
@@ -1508,13 +1463,8 @@
     "report_content": {
         "description": "Tämän viestin ilmoittaminen lähettää sen yksilöllisen tapahtumatunnuksen (event ID) kotipalvelimesi ylläpitäjälle. Jos tämän huoneen viestit on salattu, kotipalvelimesi ylläpitäjä ei voi lukea viestin tekstiä tai nähdä tiedostoja tai kuvia.",
         "ignore_user": "Sivuuta käyttäjä",
-        "illegal_content": "Laiton sisältö",
         "missing_reason": "Kerro miksi teet ilmoitusta.",
-        "other_label": "Muut",
-        "report_content_to_homeserver": "Ilmoita sisällöstä kotipalvelimesi ylläpitäjälle",
-        "report_entire_room": "Raportoi koko huone",
-        "spam_or_propaganda": "Roskapostitusta tai propagandaa",
-        "toxic_behaviour": "Myrkyllinen käyttäytyminen"
+        "report_content_to_homeserver": "Ilmoita sisällöstä kotipalvelimesi ylläpitäjälle"
     },
     "report_room": {
         "reason_label": "Kuvaile syy"
@@ -1745,40 +1695,15 @@
         "video_room": "Tämä huone on videohuone"
     },
     "room_list": {
-        "add_room_label": "Lisää huone",
         "add_space_label": "Lisää tila",
-        "breadcrumbs_empty": "Ei hiljattain vierailtuja huoneita",
-        "breadcrumbs_label": "Hiljattain vieraillut huoneet",
         "failed_add_tag": "Tagin %(tagName)s lisääminen huoneeseen epäonnistui",
         "failed_remove_tag": "Tagin %(tagName)s poistaminen huoneesta epäonnistui",
-        "home_menu_label": "Etusivun valinnat",
-        "join_public_room_label": "Liity julkiseen huoneeseen",
-        "joining_rooms_status": {
-            "one": "Liitytään parhaillaan %(count)s huoneeseen",
-            "other": "Liitytään parhaillaan %(count)s huoneeseen"
-        },
         "list_title": "Huoneluettelo",
         "more_options": {
             "leave_room": "Poistu huoneesta"
         },
         "notification_options": "Ilmoitusasetukset",
-        "redacting_messages_status": {
-            "one": "Poistetaan parhaillaan viestejä yhdessä huoneessa",
-            "other": "Poistetaan parhaillaan viestejä %(count)s huoneesta"
-        },
-        "show_less": "Näytä vähemmän",
-        "show_n_more": {
-            "one": "Näytä %(count)s lisää",
-            "other": "Näytä %(count)s lisää"
-        },
-        "show_previews": "Näytä viestien esikatselut",
-        "sort_by": "Lajittelutapa",
-        "sort_by_activity": "Aktiivisuus",
-        "sort_by_alphabet": "A-Ö",
-        "sort_unread_first": "Näytä ensimmäisenä huoneet, joissa on lukemattomia viestejä",
-        "space_menu_label": "%(spaceName)s-valikko",
-        "sublist_options": "Lajittele",
-        "suggested_rooms_heading": "Ehdotetut huoneet"
+        "show_less": "Näytä vähemmän"
     },
     "room_settings": {
         "access": {
@@ -2294,13 +2219,13 @@
             "quick_actions_section": "Pikatoiminnot",
             "rule_call": "Puhelukutsu",
             "rule_contains_display_name": "Viestit, jotka sisältävät näyttönimeni",
-            "rule_contains_user_name": "Viestit, jotka sisältävät käyttäjätunnukseni",
+            "rule_contains_user_name": "@maininnat ja vastaukset",
             "rule_encrypted": "Salatut viestit ryhmissä",
             "rule_encrypted_room_one_to_one": "Salatut viestit kahdenkeskisissä keskusteluissa",
             "rule_invite_for_me": "Kun minut kutsutaan huoneeseen",
             "rule_message": "Viestit ryhmissä",
             "rule_room_one_to_one": "Viestit kahdenkeskisissä keskusteluissa",
-            "rule_roomnotif": "Viestit, jotka sisältävät sanan ”@room”",
+            "rule_roomnotif": "@room-maininnat",
             "rule_suppress_notices": "Bottien lähettämät viestit",
             "rule_tombstone": "Kun huoneet päivitetään",
             "show_message_desktop_notification": "Näytä viestit ilmoituskeskuksessa",
@@ -2369,7 +2294,6 @@
         "send_typing_notifications": "Lähetä kirjoitusilmoituksia",
         "sessions": {
             "best_security_note": "Parhaan turvallisuuden takaamiseksi vahvista istuntosi ja poista istunnot, joita et tunnista tai et enää käytä.",
-            "browser": "Selain",
             "confirm_sign_out": {
                 "one": "Vahvista tämän laitteen poistaminen",
                 "other": "Vahvista näiden laitteiden poistaminen"
@@ -2416,7 +2340,6 @@
             "no_sessions": "Istuntoja ei löytynyt.",
             "no_unverified_sessions": "Vahvistamattomia istuntoja ei löytynyt.",
             "no_verified_sessions": "Vahvistettuja istuntoja ei löytynyt.",
-            "os": "Käyttöjärjestelmä",
             "other_sessions_heading": "Muut istunnot",
             "push_heading": "Push-ilmoitukset",
             "push_subheading": "Vastaanota push-ilmoituksia tässä istunnossa.",
@@ -2471,13 +2394,11 @@
         "show_typing_notifications": "Näytä kirjoitusilmoitukset",
         "sidebar": {
             "dialog_title": "<strong>Asetukset:</strong> Sivupalkki",
-            "metaspaces_favourites_description": "Ryhmitä kaikki suosimasi huoneet ja henkilöt yhteen paikkaan.",
             "metaspaces_home_all_rooms": "Näytä kaikki huoneet",
             "metaspaces_home_all_rooms_description": "Näytä kaikki huoneesi etusivulla, vaikka ne olisivat jossain muussa tilassa.",
             "metaspaces_home_description": "Koti on hyödyllinen, sillä sieltä näet yleisnäkymän kaikkeen.",
             "metaspaces_orphans": "Huoneet, jotka eivät kuulu mihinkään tilaan",
             "metaspaces_orphans_description": "Ryhmitä kaikki huoneesi, jotka eivät ole osa tilaa, yhteen paikkaan.",
-            "metaspaces_people_description": "Ryhmitä kaikki ihmiset yhteen paikkaan.",
             "metaspaces_subsection": "Näytettävät tilat",
             "metaspaces_video_rooms": "Videohuoneet ja konferenssit",
             "metaspaces_video_rooms_description": "Ryhmitä kaikki yksityiset videohuoneet ja konferenssit.",
@@ -2496,13 +2417,12 @@
             "audio_output": "Äänen ulostulo",
             "audio_output_empty": "Äänen ulostuloja ei havaittu",
             "auto_gain_control": "Automaattinen vahvistuksen säätö",
-            "connection_section": "Yhteys",
             "dialog_title": "<strong>Asetukset:</strong> Ääni ja video",
             "echo_cancellation": "Kaiunpoisto",
             "mirror_local_feed": "Peilaa paikallinen videosyöte",
-            "missing_permissions_prompt": "Mediaoikeuksia puuttuu. Napsauta painikkeesta pyytääksesi oikeuksia.",
+            "missing_permissions_prompt": "Jotta voit osallistua puheluihin, anna %(brand)s -sovellukselle lupa käyttää ääni- ja videolaitettasi.",
             "noise_suppression": "Kohinanvaimennus",
-            "request_permissions": "Pyydä mediaoikeuksia",
+            "request_permissions": "Pyydä",
             "title": "Ääni ja video",
             "video_input_empty": "Kameroita ei löytynyt",
             "video_section": "Videoasetukset",
@@ -2670,12 +2590,6 @@
     "space_settings": {
         "title": "Asetukset - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Sinulla ei ole oikeuksia lisätä huoneita tähän tilaan",
-        "error_no_permission_add_space": "Sinulla ei ole oikeuksia lisätä tiloja tähän tilaan",
-        "error_no_permission_create_room": "Sinulla ei ole oikeuksia luoda uusia huoneita tässä tilassa",
-        "error_no_permission_invite": "Sinulla ei ole oikeuksia kutsua ihmisiä tähän tilaan"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Syötä sen uuden palvelimen nimi, jota haluat selata.",
@@ -2868,9 +2782,7 @@
         "m.poll.start": "%(senderName)s on aloittanut kyselyn - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s vaihtoi huoneen kuvan.",
-            "changed_img": "%(senderDisplayName)s vaihtoi huoneen kuvaksi <img/>",
-            "lightbox_title": "%(senderDisplayName)s vaihtoi huoneen %(roomName)s kuvan",
-            "removed": "%(senderDisplayName)s poisti huoneen kuvan."
+            "lightbox_title": "%(senderDisplayName)s vaihtoi huoneen %(roomName)s kuvan"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3419,13 +3331,7 @@
         "close_to_view_right_panel": "Sulje sovelma näyttääksesi sen tässä paneelissa",
         "context_menu": {
             "delete": "Poista sovelma",
-            "delete_warning": "Sovelman poistaminen poistaa sen kaikilta huoneen käyttäjiltä. Haluatko varmasti poistaa tämän sovelman?",
-            "move_left": "Siirry vasemmalle",
-            "move_right": "Siirry oikealle",
-            "remove": "Poista kaikilta",
-            "revoke": "Peruuta käyttöoikeudet",
-            "screenshot": "Ota kuva",
-            "start_audio_stream": "Käynnistä äänen suoratoisto"
+            "delete_warning": "Sovelman poistaminen poistaa sen kaikilta huoneen käyttäjiltä. Haluatko varmasti poistaa tämän sovelman?"
         },
         "cookie_warning": "Tämä sovelma saattaa käyttää evästeitä.",
         "error_hangup_description": "Yhteytesi puheluun katkaistiin. (Virhe: %(message)s)",
diff --git a/apps/web/src/i18n/strings/fr.json b/apps/web/src/i18n/strings/fr.json
index 1f83e7b34a..cb8f3f0c6f 100644
--- a/apps/web/src/i18n/strings/fr.json
+++ b/apps/web/src/i18n/strings/fr.json
@@ -1,7 +1,6 @@
 {
     "a11y": {
-        "emoji_picker": "Sélecteur d'emoji",
-        "jump_first_invite": "Sauter à la première invitation.",
+        "jump_first_invite": "Aller à la première invitation.",
         "message_composer": "Rédaction des messages",
         "n_unread_messages": {
             "other": "%(count)s messages non lus.",
@@ -11,21 +10,18 @@
             "other": "%(count)s messages non lus y compris les mentions.",
             "one": "1 mention non lue."
         },
-        "recent_rooms": "Salons récents",
-        "room_name": "Salon %(name)s",
         "room_status_bar": "Barre de statut du salon",
         "seek_bar_label": "Barre de recherche audio",
         "unread_messages": "Messages non lus."
     },
-    "a11y_jump_first_unread_room": "Sauter au premier salon non lu.",
+    "a11y_jump_first_unread_room": "Aller au premier salon non lu.",
     "action": {
         "accept": "Accepter",
         "add": "Ajouter",
         "add_existing_room": "Ajouter un salon existant",
-        "add_people": "Ajouter des personnes",
         "apply": "Appliquer",
         "approve": "Approuver",
-        "ask_to_join": "Demander à venir",
+        "ask_to_join": "Demander à rejoindre",
         "back": "Retour",
         "call": "Appel",
         "cancel": "Annuler",
@@ -57,7 +53,6 @@
         "enter_fullscreen": "Afficher en plein écran",
         "exit_fullscreeen": "Quitter le plein écran",
         "expand": "Développer",
-        "explore_public_rooms": "Parcourir les salons publics",
         "explore_rooms": "Parcourir les salons",
         "export": "Exporter",
         "forward": "Transférer",
@@ -69,8 +64,6 @@
         "ignore": "Ignorer",
         "import": "Importer",
         "invite": "Inviter",
-        "invite_to_space": "Inviter dans l’espace",
-        "invites_list": "Invitations",
         "join": "Rejoindre",
         "learn_more": "En savoir plus",
         "leave": "Quitter",
@@ -97,7 +90,6 @@
         "rename": "Renommer",
         "reply": "Répondre",
         "reply_in_thread": "Répondre dans le fil de discussion",
-        "report_content": "Signaler le contenu",
         "report_room": "Signaler le salon",
         "resend": "Renvoyer",
         "reset": "Réinitialiser",
@@ -117,8 +109,6 @@
         "sign_out": "Supprimer cet appareil",
         "skip": "Passer",
         "start": "Commencer",
-        "start_chat": "Commencer une conversation privée",
-        "start_new_chat": "Commencer une nouvelle conversation privée",
         "stop": "Arrêter",
         "submit": "Soumettre",
         "subscribe": "S’inscrire",
@@ -219,11 +209,9 @@
         "log_in_new_account": "<a>Connectez-vous</a> à votre nouveau compte.",
         "logout_dialog": {
             "description": "Êtes-vous sûr de vouloir supprimer cet appareil ?",
-            "megolm_export": "Exporter manuellement les clés",
-            "setup_key_backup_title": "Vous perdrez l’accès à vos messages chiffrés",
-            "setup_secure_backup_description_1": "Les messages chiffrés sont sécurisés avec un chiffrement de bout en bout. Seuls vous et le(s) destinataire(s) ont les clés pour lire ces messages.",
-            "setup_secure_backup_description_2": "Quand vous supprimez cet appareil, vous ne pourrez plus lire les messages chiffrés à moins d’avoir les clés de ces messages sur vos autres appareils, ou de les avoir sauvegardées sur le serveur.",
-            "skip_key_backup": "Je ne veux pas de mes messages chiffrés"
+            "setup_key_backup_title": "Vous êtes sur le point de perdre l'accès à vos discussions chiffrées.",
+            "setup_secure_backup_description": "Il s'agit de votre seul appareil. Si vous le supprimer, vous aurez besoin d'une clé de récupération pour confirmer votre identité numérique et restaurer vos discussions chiffrées lors de votre prochaine connexion.",
+            "skip_key_backup": "Supprimer cet appareil quand même"
         },
         "misconfigured_body": "Demandez à votre administrateur %(brand)s de vérifier que <a>votre configuration</a> ne contient pas d’entrées incorrectes ou en double.",
         "misconfigured_title": "Votre %(brand)s est mal configuré",
@@ -249,7 +237,9 @@
             "check_code_heading": "Saisir le numéro affiché sur votre autre appareil",
             "check_code_input_label": "code à 2 chiffres",
             "check_code_mismatch": "Les chiffres ne correspondent pas",
+            "choose_desktop_computer": "Selectionné «%(desktopComputer)s »",
             "completing_setup": "Fin de la configuration de votre nouvel appareil",
+            "desktop_computer": "Ordinateur de bureau",
             "error_etag_missing": "Une erreur inattendue s'est produite. Cela peut être dû à une extension de navigateur, à un serveur proxy ou à une mauvaise configuration du serveur.",
             "error_expired": "Connexion expirée. Veuillez réessayer.",
             "error_expired_title": "La connexion a pris trop de temps.",
@@ -270,16 +260,22 @@
             "error_user_declined": "Vous ou le fournisseur de compte avez refusé la demande de connexion.",
             "error_user_declined_title": "Connexion refusée",
             "follow_remaining_instructions": "Suivez les instructions restantes",
+            "open_element_mobile_device": "Ouvrez %(brand)s sur votre smartphone",
             "open_element_other_device": "Ouvrez %(brand)s sur votre autre appareil",
             "point_the_camera": "Scannez le QR code affiché ici",
-            "scan_code_instruction": "Scannez le QR code avec un autre appareil",
+            "ready_to_scan": "Prêt à scanner",
+            "scan_code_instruction": "Scannez le code QR",
+            "scan_code_instruction_reciprocate": "Scannez le code QR avec un autre appareil",
             "scan_qr_code": "Se connecter avec un QR code",
-            "security_code": "Code de sécurité",
-            "security_code_prompt": "Si vous y êtes invité, saisissez le code ci-dessous sur votre autre appareil.",
+            "security_code_prompt": "Votre fournisseur de compte peut vous demander le code suivant pour vérifier la connexion.",
+            "security_code_title": "Votre code de vérification",
             "select_qr_code": "Sélectionnez « %(scanQRCode)s »",
+            "select_ready_to_scan": "Sélectionnez « %(readyToScan)s » et scannez le QR code affiché ici.",
+            "start_over": "Recommencer",
+            "tap_avatar_link_new_device": "Cliquez sur votre avatar et sélectionnez « %(linkNewDevice)s »",
             "unsupported_explainer": "Votre fournisseur de compte ne prend pas en charge la connexion à un nouvel appareil à l’aide d’un code QR.",
             "unsupported_heading": "Le code QR n'est pas pris en charge",
-            "waiting_for_device": "En attente de connexion de l’appareil"
+            "waiting_for_device": "En attente de votre autre appareil"
         },
         "register_action": "Créer un compte",
         "registration": {
@@ -338,8 +334,10 @@
         "sign_in_description": "Utilisez votre compte pour continuer.",
         "sign_in_instead": "Me connecter avec mon compte existant",
         "sign_in_instead_prompt": "Vous avez déjà un compte ? <a>Connectez-vous ici</a>",
+        "sign_in_manually": "Se connecter manuellement",
         "sign_in_or_register": "Se connecter ou créer un compte",
         "sign_in_or_register_description": "Utilisez votre compte ou créez en un pour continuer.",
+        "sign_in_with_qr": "Se connecter avec un QR code",
         "sign_in_with_sso": "Se connecter avec l’authentification unique",
         "signing_in": "Authentification…",
         "soft_logout": {
@@ -481,7 +479,6 @@
         "encrypted": "Chiffré",
         "error": "Erreur",
         "faq": "FAQ",
-        "favourites": "Favoris",
         "feedback": "Commentaire",
         "filter_results": "Filtrer les résultats",
         "forward_message": "Transférer le message",
@@ -489,7 +486,6 @@
         "go_to_settings": "Aller aux paramètres",
         "guest": "Visiteur",
         "help": "Aide",
-        "historical": "Historique",
         "home": "Accueil",
         "homeserver": "Serveur d’accueil",
         "identity_server": "Serveur d’identité",
@@ -497,17 +493,16 @@
         "integration_manager": "Gestionnaire d’intégration",
         "joined": "Rejoint",
         "labs": "Expérimental",
+        "legacy_voice_and_video_settings": "Appels Matrix 1:1 (ancienne génération)",
         "legal": "Légal",
         "light": "Clair",
         "loading": "Chargement…",
         "location": "Position",
-        "low_priority": "Priorité basse",
         "matrix": "Matrix",
         "message": "Message",
         "message_layout": "Mise en page des messages",
         "message_timestamp_invalid": "Horodatage non valide",
         "microphone": "Micro",
-        "model": "Modèle",
         "moderation_and_safety": "Modération et sécurité",
         "modern": "Moderne",
         "mute": "Mettre en sourdine",
@@ -567,7 +562,6 @@
         "success": "Succès",
         "suggestions": "Suggestions",
         "support": "Prise en charge",
-        "system_alerts": "Alertes système",
         "theme": "Thème",
         "thread": "Discussion",
         "threads": "Fils de discussion",
@@ -584,7 +578,6 @@
         "username": "Nom d’utilisateur",
         "verified": "Vérifiée",
         "version": "Version",
-        "video": "Vidéo",
         "video_room": "Salon vidéo",
         "view_message": "Afficher le message",
         "warning": "Attention"
@@ -682,7 +675,6 @@
     "create_section_dialog": {
         "create_section": "Créer une section",
         "description": "Ces sections sont réservées à vous.",
-        "edit_section": "Modifier la section",
         "label": "Nom de la section",
         "title": "Créer une section",
         "title_edition": "Modifier une section"
@@ -892,12 +884,13 @@
         "thread_root_id": "ID du fil de discussion racine : %(threadRootId)s",
         "threads_timeline": "Historique des fils de discussion",
         "title": "Outils de développement",
-        "toggle_event": "Afficher/masquer l’évènement",
         "toolbox": "Boîte à outils",
         "use_at_own_risk": "Cette interface ne vérifie pas les types des valeurs. Utilisez la à vos propres risques.",
         "user_avatar": "Avatar: %(avatar)s",
         "user_displayname": "Nom d'affichage : %(displayname)s",
         "user_id": "Identifiant utilisateur : %(userId)s",
+        "user_identity": "Identité cryptographique",
+        "user_identity_unknown": "Inconnu",
         "user_no_avatar": "Avatar: <i> Aucun</i>",
         "user_no_displayname": "Nom d'affichage : <i>Aucun</i>",
         "user_read_up_to": "L’utilisateur a lu jusqu’à : ",
@@ -927,22 +920,6 @@
     },
     "dialog_close_label": "Fermer la boîte de dialogue",
     "download_completed": "Téléchargement terminé",
-    "emoji": {
-        "categories": "Catégories",
-        "category_activities": "Activités",
-        "category_animals_nature": "Animaux et nature",
-        "category_flags": "Drapeaux",
-        "category_food_drink": "Nourriture et boisson",
-        "category_frequently_used": "Utilisé fréquemment",
-        "category_objects": "Objets",
-        "category_smileys_people": "Visages et personnes",
-        "category_symbols": "Symboles",
-        "category_travel_places": "Voyages et lieux",
-        "quick_reactions": "Réactions rapides"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Annuler la recherche"
-    },
     "empty_room": "Salon vide",
     "empty_room_was_name": "Salon vide (précédemment %(oldName)s)",
     "encryption": {
@@ -980,7 +957,6 @@
         "import_invalid_passphrase": "Erreur d’authentification : mot de passe incorrect ?",
         "key_storage_out_of_sync": "Le stockage de vos clés n'est pas synchronisé.",
         "key_storage_out_of_sync_description": "Confirmez votre clé de récupération pour conserver l’accès à votre stockage de clés et à l’historique des messages.",
-        "message_shared_by": "%(displayName)s(%(userId)s ) a partagé ce message car vous n'étiez pas dans le salon lors de son envoi.",
         "messages_not_secure": {
             "cause_1": "Votre serveur d’accueil",
             "cause_2": "Le serveur d’accueil auquel l’utilisateur que vous vérifiez est connecté",
@@ -995,8 +971,8 @@
             "title": "Nouvelle méthode de récupération",
             "warning": "Si vous n’avez pas activé de nouvelle méthode de récupération, un attaquant essaye peut-être d’accéder à votre compte. Changez immédiatement le mot de passe de votre compte et configurez une nouvelle méthode de récupération dans les paramètres."
         },
-        "pinned_identity_changed": "L'identité numérique de %(displayName)s (<b>%(userId)s</b> a été réinitialisée.<a>En savoir plus</a>",
-        "pinned_identity_changed_no_displayname": "L' identité numérique de <b>%(userId)s</b> a été réinitialisée.<a>En savoir plus</a>",
+        "pinned_identity_changed": "L'identité numérique de %(displayName)s (<b>%(userId)s</b> a été réinitialisée. <a>En savoir plus</a>",
+        "pinned_identity_changed_no_displayname": "L' identité numérique de <b>%(userId)s</b> a été réinitialisée. <a>En savoir plus</a>",
         "recovery_method_removed": {
             "description_1": "Cette session a détecté que votre phrase de sécurité et clé de sécurité pour les messages sécurisés ont été supprimées.",
             "description_2": "Si vous l’avez fait accidentellement, vous pouvez configurer les messages sécurisés sur cette session ce qui re-chiffrera l’historique des messages de cette session avec une nouvelle méthode de récupération.",
@@ -1006,19 +982,8 @@
         "set_up_recovery": "Sauvegardez vos discussions",
         "set_up_recovery_toast_description": "Vos discussions sont automatiquement sauvegardées grâce à un chiffrement de bout en bout. Pour restaurer cette sauvegarde et conserver votre identité numérique en cas de perte d'accès à tous vos appareils, vous aurez besoin de votre clé de récupération.",
         "set_up_toast_title": "Configurer la sauvegarde sécurisée",
-        "setup_secure_backup": {
-            "explainer": "Sauvegardez vos clés avant de supprimer cet appareil pour éviter de les perdre."
-        },
         "turn_on_key_storage": "Activer le stockage des clés",
         "turn_on_key_storage_description": "Cela vous permettra de consulter votre historique de conversations sur tous vos nouveaux appareils et est nécessaire pour la sauvegarde de vos discussions et de votre identité numérique.",
-        "udd": {
-            "interactive_verification_button": "Vérifier de façon interactive avec des émojis",
-            "other_ask_verify_text": "Demandez à cet utilisateur de vérifier sa session, ou vérifiez-la manuellement ci-dessous.",
-            "other_new_session_text": "%(name)s (%(userId)s) s’est connecté à une nouvelle session sans la vérifier :",
-            "own_ask_verify_text": "Vérifiez votre autre session en utilisant une des options ci-dessous.",
-            "own_new_session_text": "Vous vous êtes connecté à une nouvelle session sans la vérifier :",
-            "title": "Non fiable"
-        },
         "unable_to_setup_keys_error": "Impossible de configurer les clés",
         "verification": {
             "accepting": "Acceptation…",
@@ -1119,7 +1084,7 @@
         },
         "verification_requested_toast_title": "Vérification requise",
         "verified_identity_changed": "L'identité numérique de %(displayName)s (<b>%(userId)s</b>) a été réinitialisée. <a>En savoir plus</a>",
-        "verified_identity_changed_no_displayname": "L'identité de <b>%(userId)s</b> a été réinitialisée. <a>En savoir plus </a>",
+        "verified_identity_changed_no_displayname": "L'identité numérique de <b>%(userId)s</b> a été réinitialisée. <a>En savoir plus</a>",
         "verify_toast_description": "À compter de fin octobre 2026, les appareils non vérifiés ne pourront plus envoyer ni recevoir de messages.<a>En savoir plus</a>",
         "verify_toast_title": "Vérifiez cet appareil",
         "withdraw_verification_action": "Révoquer la vérification"
@@ -1526,6 +1491,7 @@
         "bridge_state_manager": "Cette passerelle est gérée par <user />.",
         "bridge_state_workspace": "Espace de travail : <networkLink/>",
         "click_for_info": "Cliquez pour en savoir plus",
+        "config_only": "Ne peut être activé que via le fichier config.json.",
         "currently_experimental": "Actuellement expérimental.",
         "custom_themes": "Autoriser l’ajout de thèmes personnalisés",
         "dynamic_room_predecessors": "Prédécesseurs de salon dynamique",
@@ -1539,13 +1505,17 @@
         "experimental_section": "Avant-premières",
         "extended_profiles_msc_support": "Nécessite que votre serveur prenne en charge MSC4133",
         "feature_disable_call_per_sender_encryption": "Désactiver le chiffrement de chaque expéditeur pour Element Call",
+        "feature_retention": {
+            "description": "Suppression automatique des messages d'un salon lorsq'ils atteignent la période de conservation configurée. Actuellement, seules les options de lecture sont prises en charge.",
+            "disabled_sliding_sync": "La conservation des données ne peut pas être activée lorsque Sliding sync est activé.",
+            "display_name": "Rétention des messages"
+        },
         "feature_user_status": {
             "description": "Permet de visualiser et de définir un statut actuel.",
             "display_name": "Statut de l'utilisateur",
             "required_msc_support": "Nécessite MSC4429 (Mises à jour de profil pour Legacy Sync)"
         },
         "feature_wysiwyg_composer_description": "Utilise le texte formaté au lieu de Markdown dans le compositeur de message.",
-        "group_calls": "Nouvelle expérience d’appel de groupe",
         "group_developer": "Développeur",
         "group_encryption": "Chiffrement",
         "group_experimental": "Expérimental",
@@ -1560,7 +1530,6 @@
         "group_voip": "Audio et vidéo",
         "group_widgets": "Widgets",
         "hidebold": "Masquer le point de notification (affiche seulement les badges des compteurs)",
-        "html_topic": "Afficher la version HTML des sujets des salons",
         "join_beta": "Rejoindre la bêta",
         "join_beta_reload": "Rejoindre la bêta va recharger %(brand)s.",
         "jump_to_date": "Aller à la date (ajoute /jumptodate et va sur les en-têtes de date)",
@@ -1570,24 +1539,22 @@
         "leave_beta_reload": "Quitter la bêta va recharger %(brand)s.",
         "location_share_live": "Partage de la position en direct",
         "location_share_live_description": "Implémentation temporaire. Les positions sont persistantes dans l’historique du salon.",
+        "login_with_qr": "Se connecter avec un code QR",
         "mjolnir": "Nouvelles manières d’ignorer des gens",
         "msc3531_hide_messages_pending_moderation": "Permettre aux modérateurs de cacher des messages en attente de modération.",
-        "new_room_list": "Activer la nouvelle liste de salons",
         "notification_settings": "Nouveaux paramètres de notification",
         "notification_settings_beta_caption": "Introduit une manière plus simple de changer vos préférences de notifications. Customisez %(brand)s, comme ça vous convient.",
         "notification_settings_beta_title": "Paramètres de notification",
         "notifications": "Active le panneau de notifications dans l’en-tête du salon",
         "render_reaction_images": "Afficher les images personnalisées des réactions",
         "render_reaction_images_description": "Parfois appelés « émojis personnalisés ».",
-        "report_to_moderators": "Signaler aux modérateurs",
-        "report_to_moderators_description": "Dans les salons prenant en charge la modération, le bouton « Signaler » vous permet de signaler des abus aux modérateurs du salon.",
-        "room_list_sections": "Sections de la liste de salons",
         "sliding_sync": "Mode synchronisation progressive",
         "sliding_sync_description": "En cours de développement, ne peut être désactivé.",
         "sliding_sync_disabled_notice": "Connectez-vous à nouveau pour désactiver",
         "sliding_sync_server_no_support": "Votre serveur n'est pas pris en charge",
-        "under_active_development": "En cours de développement.",
         "unrealiable_e2e": "Non fiable dans les salons chiffrés",
+        "url_preview_bundle": "Ensemble d'aperçus d'URL (MSC4095)",
+        "url_preview_bundle_description": "Envoyer des aperçus d'URL dans le message, en parallèle du contenu du message",
         "video_rooms": "Salons vidéo",
         "video_rooms_a_new_way_to_chat": "Une nouvelle façons de discuter avec la voix et la vidéo dans %(brand)s.",
         "video_rooms_always_on_voip_channels": "Les salons vidéo sont des canaux VoIP toujours actifs embarqués dans un salon dans %(brand)s.",
@@ -1642,9 +1609,6 @@
         "room_rejoin_warning": "Ce salon n’est pas public. Vous ne pourrez pas y revenir sans invitation.",
         "space_rejoin_warning": "Cet espace n’est pas public. Vous ne pourrez pas le rejoindre sans invitation."
     },
-    "left_panel": {
-        "open_dial_pad": "Ouvrir le pavé de numérotation"
-    },
     "lightbox": {
         "rotate_left": "Tourner à gauche",
         "rotate_right": "Tourner à droite",
@@ -1740,10 +1704,9 @@
         "level_notification": "Notification",
         "level_unsent": "Non envoyé",
         "mark_all_read": "Tout marquer comme lu",
-        "mentions_and_keywords": "@mentions et mots-clés",
-        "mentions_and_keywords_description": "Recevoir des notifications uniquement pour les mentions et mot-clés comme défini dans vos <a>paramètres</a>",
+        "mentions_and_keywords": "@mentions et réponses uniquement",
+        "mentions_and_keywords_description": "Recevoir des notifications uniquement pour les mentions, les réponses et mot-clés comme défini dans vos <a>paramètres</a>",
         "mentions_keywords": "Mentions et mots-clés",
-        "message_didnt_send": "Le message n’a pas été envoyé. Cliquer pour plus d’info.",
         "mute_description": "Vous n’aurez aucune notification"
     },
     "notifier": {
@@ -1841,7 +1804,6 @@
     },
     "quick_settings": {
         "all_settings": "Tous les paramètres",
-        "metaspace_section": "Épingler à la barre latérale",
         "sidebar_settings": "Plus d’options",
         "title": "Paramètres rapides"
     },
@@ -1865,25 +1827,10 @@
     },
     "report_content": {
         "description": "Le signalement de ce message enverra son « event ID » unique à l’administrateur de votre serveur d’accueil. Si les messages dans ce salon sont chiffrés, l’administrateur ne pourra pas lire le texte du message ou voir les fichiers ou les images.",
-        "disagree": "Désaccord",
-        "error_create_room_moderation_bot": "Impossible de créer un salon avec un bot de modération",
         "hide_messages_from_user": "Cocher pour masquer tous les messages présents et futurs de cet utilisateur.",
         "ignore_user": "Ignorer l’utilisateur",
-        "illegal_content": "Contenu illicite",
         "missing_reason": "Dites-nous pourquoi vous envoyez un signalement.",
-        "nature": "Veuillez choisir la nature du rapport et décrire ce qui rend ce message abusif.",
-        "nature_disagreement": "Ce que cet utilisateur écrit est déplacé.\nCeci sera signalé aux modérateurs du salon.",
-        "nature_illegal": "Cet utilisateur fait preuve d’un comportement illicite, par exemple en publiant des informations personnelles d’autres ou en proférant des menaces.\nCeci sera signalé aux modérateurs du salon qui pourront l’escalader aux autorités.",
-        "nature_nonstandard_admin": "Le sujet de ce salon est illégal ou toxique, ou les modérateurs ne modèrent pas le contenu illégal ou toxique.\nCe fait sera signalé aux administrateurs de %(homeserver)s.",
-        "nature_nonstandard_admin_encrypted": "Ce salon est dédié à des contenus illégaux ou toxiques ou les modérateurs ne parviennent pas à modérer les contenus illégaux ou toxiques.\nCela sera signalé aux administrateurs de %(homeserver)s. Les administrateurs ne pourront pas lire le contenu chiffré de ce salon.",
-        "nature_other": "Toute autre raison. Veuillez décrire le problème.\nCeci sera signalé aux modérateurs du salon.",
-        "nature_spam": "Cet utilisateur inonde le salon de publicités ou liens vers des publicités, ou vers de la propagande.\nCeci sera signalé aux modérateurs du salon.",
-        "nature_toxic": "Cet utilisateur fait preuve d’un comportement toxique, par exemple en insultant les autres ou en partageant du contenu pour adultes dans un salon familial, ou en violant les règles de ce salon.\nCeci sera signalé aux modérateurs du salon.",
-        "other_label": "Autre",
-        "report_content_to_homeserver": "Signaler le contenu à l’administrateur de votre serveur d’accueil",
-        "report_entire_room": "Signaler le salon entier",
-        "spam_or_propaganda": "Publicité ou propagande",
-        "toxic_behaviour": "Comportement toxique"
+        "report_content_to_homeserver": "Signaler le contenu à l’administrateur de votre serveur d’accueil"
     },
     "report_room": {
         "description": "Signalez ce salon à votre fournisseur de compte. Si les messages sont chiffrés, votre administrateur ne pourra pas les lire.",
@@ -2158,46 +2105,21 @@
         "waiting_for_join_title": "En attente de connexion des utilisateurs à %(brand)s"
     },
     "room_list": {
-        "add_room_label": "Ajouter un salon",
         "add_space_label": "Ajouter un espace",
-        "breadcrumbs_empty": "Aucun salon visité récemment",
-        "breadcrumbs_label": "Salons visités récemment",
         "failed_add_tag": "Échec de l’ajout de l’étiquette %(tagName)s au salon",
         "failed_remove_tag": "Échec de la suppression de l’étiquette %(tagName)s du salon",
         "failed_set_dm_tag": "Échec de l’ajout de l’étiquette de conversation privée",
-        "home_menu_label": "Options de l’accueil",
-        "join_public_room_label": "Rejoindre le salon public",
-        "joining_rooms_status": {
-            "one": "Vous êtes en train de rejoindre %(count)s salon",
-            "other": "Vous êtes en train de rejoindre %(count)s salons"
-        },
         "list_title": "Liste de salons",
         "more_options": {
             "leave_room": "Quitter le salon"
         },
         "notification_options": "Paramètres de notifications",
-        "redacting_messages_status": {
-            "one": "Actuellement en train de supprimer les messages dans %(count)s salon",
-            "other": "Actuellement en train de supprimer les messages dans %(count)s salons"
-        },
         "section": {
             "chats": "Discussions",
             "favourites": "Favoris",
             "low_priority": "Priorité basse"
         },
-        "show_less": "En voir moins",
-        "show_n_more": {
-            "other": "En afficher %(count)s de plus",
-            "one": "En afficher %(count)s de plus"
-        },
-        "show_previews": "Afficher un aperçu des messages",
-        "sort_by": "Trier par",
-        "sort_by_activity": "Activité",
-        "sort_by_alphabet": "A-Z",
-        "sort_unread_first": "Afficher les salons non lus en premier",
-        "space_menu_label": "Menu %(spaceName)s",
-        "sublist_options": "Options de liste",
-        "suggested_rooms_heading": "Salons recommandés"
+        "show_less": "En voir moins"
     },
     "room_settings": {
         "access": {
@@ -2491,7 +2413,8 @@
         "warning_kind_files": "Cette version de %(brand)s ne prend pas en charge l’affichage de certains fichiers chiffrés",
         "warning_kind_files_app": "Utilisez une <a>Application de bureau</a> pour voir tous les fichiers chiffrés",
         "warning_kind_search": "Cette version de %(brand)s ne prend pas en charge la recherche dans les messages chiffrés",
-        "warning_kind_search_app": "Utilisez une <a>Application de bureau</a> pour rechercher dans tous les messages chiffrés"
+        "warning_kind_search_app": "Utilisez une <a>Application de bureau</a> pour rechercher dans tous les messages chiffrés",
+        "warning_kind_search_partial": "Les résultats peuvent être incomplets car votre index de recherche est encore en cours de construction."
     },
     "setting": {
         "help_about": {
@@ -2822,13 +2745,13 @@
             "room_activity": "Nouvelle activité du salon, mises-à-jour et messages de statut",
             "rule_call": "Appel entrant",
             "rule_contains_display_name": "Messages contenant mon nom d’affichage",
-            "rule_contains_user_name": "Messages contenant mon nom d’utilisateur",
+            "rule_contains_user_name": "@mentions et réponses",
             "rule_encrypted": "Messages chiffrés dans les discussions de groupe",
             "rule_encrypted_room_one_to_one": "Messages chiffrés dans les conversations privées",
             "rule_invite_for_me": "Quand je suis invité dans un salon",
             "rule_message": "Messages dans les discussions de groupe",
             "rule_room_one_to_one": "Messages dans les conversations privées",
-            "rule_roomnotif": "Messages contenant @room",
+            "rule_roomnotif": "Messages contenants @room",
             "rule_suppress_notices": "Messages envoyés par des robots",
             "rule_tombstone": "Quand les salons sont mis à niveau",
             "show_message_desktop_notification": "Afficher le message dans les notifications de bureau",
@@ -2909,7 +2832,6 @@
         "send_typing_notifications": "Envoyer des notifications de saisie",
         "sessions": {
             "best_security_note": "Pour une sécurité optimale, vérifiez vos sessions et supprimez toutes sessions que vous ne reconnaissez pas ou que vous n’utilisez plus.",
-            "browser": "Navigateur",
             "confirm_sign_out": {
                 "one": "Confirmer la suppression de cet appareil",
                 "other": "Confirmer la suppression de ces appareils"
@@ -2960,7 +2882,6 @@
             "no_sessions": "Aucune session n’a été trouvée.",
             "no_unverified_sessions": "Aucune session non vérifiée n’a été trouvée.",
             "no_verified_sessions": "Aucune session vérifiée n’a été trouvée.",
-            "os": "Système d’exploitation",
             "other_sessions_heading": "Autres sessions",
             "push_heading": "Notifications push",
             "push_subheading": "Recevoir les notifications push sur cette session.",
@@ -3016,18 +2937,17 @@
         "show_nsfw_content": "Afficher le contenu sensible (NSFW)",
         "show_read_receipts": "Afficher les accusés de lecture envoyés par les autres utilisateurs",
         "show_redaction_placeholder": "Afficher les messages supprimés",
+        "show_sections": "Afficher les sections",
         "show_stickers_button": "Afficher le bouton des autocollants",
         "show_typing_notifications": "Afficher les notifications de saisie",
         "showbold": "Afficher toute l'activité dans la liste des salons (points ou nombre de messages non lus)",
         "sidebar": {
             "dialog_title": "<strong>Paramètres : </strong> Barre latérale",
-            "metaspaces_favourites_description": "Regroupez tous vos salons et personnes préférés au même endroit.",
             "metaspaces_home_all_rooms": "Afficher tous les salons",
             "metaspaces_home_all_rooms_description": "Affiche tous vos salons dans l’accueil, même s’ils font partis d’un espace.",
             "metaspaces_home_description": "L’accueil permet d’avoir un aperçu global.",
             "metaspaces_orphans": "Salons en dehors d’un espace",
             "metaspaces_orphans_description": "Regroupe tous les salons n’appartenant pas à un espace au même endroit.",
-            "metaspaces_people_description": "Regrouper toutes vos connaissances au même endroit.",
             "metaspaces_subsection": "Espaces à afficher",
             "metaspaces_video_rooms": "Salons vidéo et conférences",
             "metaspaces_video_rooms_description": "Regroupez tous les salons vidéo et conférences.",
@@ -3054,21 +2974,25 @@
             "audio_output": "Sortie audio",
             "audio_output_empty": "Aucune sortie audio détectée",
             "auto_gain_control": "Contrôle automatique du gain",
-            "connection_section": "Connexion",
             "dialog_title": "<strong>Paramètres : </strong> Audio et vidéo",
             "echo_cancellation": "Annulation d’écho",
             "echo_cancellation_description": "Supprime l'écho de votre microphone pendant les appels. Ce paramètre s'applique également à Element Call.",
             "enable_fallback_ice_server": "Autoriser le serveur de secours d’assistance d’appel (%(server)s)",
             "enable_fallback_ice_server_description": "Concerne seulement les serveurs d’accueil qui n’en proposent pas. Votre adresse IP pourrait être diffusée pendant un appel.",
+            "enable_legacy_calls": "Activer les appels voix/vidéo ancienne génération",
+            "enable_legacy_calls_description": "S'applique aux appels Jitsi et WebRTC 1:1",
             "mirror_local_feed": "Inverser horizontalement la vidéo locale (effet miroir)",
-            "missing_permissions_prompt": "Permissions multimédia manquantes, cliquez sur le bouton ci-dessous pour la demander.",
+            "missing_permissions_prompt": "Pour participer aux appels, autorisez %(brand)s à accéder à votre périphérique audio et vidéo.",
             "noise_suppression": "Suppression du bruit",
             "noise_suppression_description": "Réduit le bruit de fond dans votre microphone pendant les appels. Ce paramètre s'applique également à Element Call.",
-            "request_permissions": "Demander les permissions multimédia",
+            "permissions": "Autoriser l'accès au microphone et à la caméra",
+            "request_permissions": "Demande",
             "title": "Audio et vidéo",
             "video_input_empty": "Aucune caméra détectée",
             "video_section": "Paramètres vidéo",
             "voice_agc": "Ajuster le volume du microphone automatiquement",
+            "voice_input_description": "L'entrée audio configurée ici sert pour les messages vocaux et les appels (ancienne génération et 1:1).",
+            "voice_input_section": "Entrée audio",
             "voice_processing": "Traitement vocal",
             "voice_section": "Paramètres audio"
         },
@@ -3247,12 +3171,6 @@
     "space_settings": {
         "title": "Paramètres - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Vous n’avez pas la permission d’ajouter des salons à cet espace",
-        "error_no_permission_add_space": "Vous n'avez pas les permissions nécessaires pour ajouter des espaces à cet espace",
-        "error_no_permission_create_room": "Vous n’avez pas la permission de créer de nouveaux salons dans cet espace",
-        "error_no_permission_invite": "Vous n’avez pas la permission d’inviter des personnes dans cet espace"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Saisissez le nom du nouveau serveur que vous voulez parcourir.",
@@ -3379,7 +3297,6 @@
         "download_action_downloading": "Téléchargement en cours",
         "download_failed": "Échec du téléchargement",
         "download_failed_description": "Une erreur s'est produite lors du téléchargement de ce fichier",
-        "e2e_state": "État du chiffrement de bout en bout",
         "edits": {
             "tooltip_label": "Modifié le %(date)s. Cliquer pour voir les modifications.",
             "tooltip_sub": "Cliquez pour voir les modifications",
@@ -3461,9 +3378,7 @@
         "m.poll.start": "%(senderName)s a démarré un sondage – %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s a changé l’avatar du salon.",
-            "changed_img": "%(senderDisplayName)s a changé l’avatar du salon en <img/>",
-            "lightbox_title": "%(senderDisplayName)s a changé l’avatar de %(roomName)s",
-            "removed": "%(senderDisplayName)s a supprimé l'avatar du salon."
+            "lightbox_title": "%(senderDisplayName)s a changé l’avatar de %(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3891,6 +3806,9 @@
         "verify_button": "Vérifier l’utilisateur",
         "verify_explainer": "Pour une sécurité supplémentaire, vérifiez cet utilisateur en comparant un code à usage unique sur vos deux appareils."
     },
+    "user_status": {
+        "on_a_call": "En appel"
+    },
     "voip": {
         "already_in_call": "Déjà en cours d’appel",
         "already_in_call_person": "Vous êtes déjà en cours d’appel avec cette personne.",
@@ -3943,7 +3861,7 @@
         "hide_sidebar_button": "Masquer la barre latérale",
         "input_devices": "Périphériques d’entrée",
         "jitsi_call": "Conférence Jitsi",
-        "join_with_video": "Rejoigner en vidéo",
+        "join_with_video": "Rejoigner avec la vidéo",
         "legacy_call": "Appel vidéo",
         "maximise": "Remplir l’écran",
         "maximise_call": "Plein écran",
@@ -4087,13 +4005,7 @@
         "close_to_view_right_panel": "Fermer ce widget pour l’afficher dans ce panneau",
         "context_menu": {
             "delete": "Supprimer le widget",
-            "delete_warning": "Supprimer un widget le supprime pour tous les utilisateurs du salon. Voulez-vous vraiment supprimer ce widget ?",
-            "move_left": "Aller à gauche",
-            "move_right": "Aller à droite",
-            "remove": "Supprimer pour tout le monde",
-            "revoke": "Révoquer les permissions",
-            "screenshot": "Prendre une photo",
-            "start_audio_stream": "Démarrer une diffusion audio"
+            "delete_warning": "Supprimer un widget le supprime pour tous les utilisateurs du salon. Voulez-vous vraiment supprimer ce widget ?"
         },
         "cookie_warning": "Ce widget pourrait utiliser des cookies.",
         "error_hangup_description": "Vous avez déconnecté de l’appel. (Erreur : %(message)s)",
diff --git a/apps/web/src/i18n/strings/gl.json b/apps/web/src/i18n/strings/gl.json
index b011a13676..c0c428fecf 100644
--- a/apps/web/src/i18n/strings/gl.json
+++ b/apps/web/src/i18n/strings/gl.json
@@ -9,7 +9,6 @@
             "other": "%(count)s mensaxes non lidas incluíndo mencións.",
             "one": "1 mención non lida."
         },
-        "room_name": "Sala %(name)s",
         "unread_messages": "Mensaxes non lidas."
     },
     "a11y_jump_first_unread_room": "Vaite a primeira sala non lida.",
@@ -17,7 +16,6 @@
         "accept": "Aceptar",
         "add": "Engadir",
         "add_existing_room": "Engadir sala existente",
-        "add_people": "Engadir persoas",
         "approve": "Aprobar",
         "back": "Atrás",
         "call": "Chamar",
@@ -47,7 +45,6 @@
         "enter_fullscreen": "Ir a pantalla completa",
         "exit_fullscreeen": "Saír de pantalla completa",
         "expand": "Despregar",
-        "explore_public_rooms": "Explorar salas públicas",
         "explore_rooms": "Explorar salas",
         "export": "Exportar",
         "forward": "Reenviar",
@@ -59,8 +56,6 @@
         "ignore": "Ignorar",
         "import": "Importar",
         "invite": "Convidar",
-        "invite_to_space": "Convidar ao espazo",
-        "invites_list": "Convites",
         "join": "Únete",
         "learn_more": "Saber máis",
         "leave": "Saír",
@@ -83,7 +78,6 @@
         "rename": "Cambiar nome",
         "reply": "Resposta",
         "reply_in_thread": "Responder nun fío",
-        "report_content": "Denunciar contido",
         "resend": "Volver a enviar",
         "reset": "Restablecer",
         "resume": "Retomar",
@@ -101,8 +95,6 @@
         "sign_out": "Saír",
         "skip": "Saltar",
         "start": "Comezar",
-        "start_chat": "Iniciar conversa",
-        "start_new_chat": "Iniciar un novo chat",
         "stop": "Deter",
         "submit": "Enviar",
         "subscribe": "Subscribir",
@@ -189,10 +181,7 @@
         "log_in_new_account": "<a>Accede</a> usando a conta nova.",
         "logout_dialog": {
             "description": "Tes a certeza de querer saír?",
-            "megolm_export": "Exportar manualmente as chaves",
             "setup_key_backup_title": "Perderás o acceso as túas mensaxes cifradas",
-            "setup_secure_backup_description_1": "As mensaxes cifradas están seguras con cifrado de extremo-a-extremo. Só ti e o correpondente(s) tedes as chaves para ler as mensaxes.",
-            "setup_secure_backup_description_2": "Ao saír, estas chaves serán eliminadas deste dispositivo, o que significa que non poderás ler as mensaxes cifradas a menos que teñas as chaves noutro dos teus dispositivos, ou unha copia de apoio no servidor.",
             "skip_key_backup": "Non quero as miñas mensaxes cifradas"
         },
         "misconfigured_body": "Pídelle a administración do teu %(brand)s que comprobe a <a>configuración</a> para entradas duplicadas ou incorrectas.",
@@ -372,7 +361,6 @@
         "encrypted": "Cifrado",
         "error": "Fallo",
         "faq": "PMF",
-        "favourites": "Favoritas",
         "feedback": "Comenta",
         "filter_results": "Filtrar resultados",
         "forward_message": "Reenviar mensaxe",
@@ -380,7 +368,6 @@
         "go_to_settings": "Ir a Axustes",
         "guest": "Convidada",
         "help": "Axuda",
-        "historical": "Historial",
         "home": "Inicio",
         "homeserver": "Servidor de inicio",
         "identity_server": "Servidor de identidade",
@@ -389,7 +376,6 @@
         "joined": "Unícheste",
         "light": "Claro",
         "location": "Localización",
-        "low_priority": "Baixa prioridade",
         "message": "Mensaxe",
         "message_layout": "Disposición da mensaxe",
         "microphone": "Micrófono",
@@ -444,7 +430,6 @@
         "success": "Parabéns",
         "suggestions": "Suxestións",
         "support": "Axuda",
-        "system_alerts": "Alertas do Sistema",
         "theme": "Decorado",
         "thread": "Tema",
         "threads": "Conversas",
@@ -457,7 +442,6 @@
         "user_avatar": "Imaxe de perfil",
         "username": "Nome de usuaria",
         "verified": "Verificada",
-        "video": "Vídeo",
         "video_room": "Sala de vídeo",
         "view_message": "Ver mensaxe",
         "warning": "Aviso"
@@ -624,7 +608,6 @@
         },
         "state_key": "Chave do estado",
         "title": "Ferramentas desenvolvemento",
-        "toggle_event": "activar evento",
         "toolbox": "Ferramentas",
         "use_at_own_risk": "Esta IU non comproba os tipos dos valores. Usa baixo a túa responsabilidade.",
         "value": "Valor",
@@ -641,22 +624,6 @@
     },
     "dialog_close_label": "Pechar diálogo",
     "download_completed": "Descarga realizada",
-    "emoji": {
-        "categories": "Categorías",
-        "category_activities": "Actividades",
-        "category_animals_nature": "Animais e Natureza",
-        "category_flags": "Bandeiras",
-        "category_food_drink": "Comida e Bebida",
-        "category_frequently_used": "Utilizado con frecuencia",
-        "category_objects": "Obxectos",
-        "category_smileys_people": "Sorrisos e Persoas",
-        "category_symbols": "Símbolos",
-        "category_travel_places": "Viaxes e Lugares",
-        "quick_reactions": "Reaccións rápidas"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Cancelar busca"
-    },
     "empty_room": "Sala baleira",
     "empty_room_was_name": "Sala baleira (era %(oldName)s)",
     "encryption": {
@@ -702,17 +669,6 @@
             "warning": "Se non eliminaches o método de recuperación, un atacante podería estar a intentar acceder á túa conta. Cambia inmediatamente o contrasinal da conta e establece un novo método de recuperación nos Axustes."
         },
         "set_up_toast_title": "Configurar Copia de apoio Segura",
-        "setup_secure_backup": {
-            "explainer": "Fai unha copia de apoio das chaves antes de saír para evitar perdelas."
-        },
-        "udd": {
-            "interactive_verification_button": "Verificar interactivamente usando emoji",
-            "other_ask_verify_text": "Pídelle a usuaria que verifique a súa sesión, ou verificaa manualmente aquí.",
-            "other_new_session_text": "%(name)s (%(userId)s) conectouse a unha nova sesión sen verificala:",
-            "own_ask_verify_text": "Verifica a túa outra sesión usando unha das opcións inferiores.",
-            "own_new_session_text": "Conectácheste nunha nova sesión sen verificala:",
-            "title": "Non confiable"
-        },
         "unable_to_setup_keys_error": "Non se puideron configurar as chaves",
         "verification": {
             "accepting": "Aceptando…",
@@ -1106,7 +1062,6 @@
         "group_themes": "Decorados",
         "group_threads": "Conversas",
         "group_voip": "Voz e Vídeo",
-        "html_topic": "Mostrar representación HTML dos temas da sala",
         "join_beta": "Unirse á beta",
         "join_beta_reload": "Ao unirte á beta recargaremos %(brand)s.",
         "jump_to_date": "Ir á data (engade cabeceiras /vaiadata e vai á data)",
@@ -1164,9 +1119,6 @@
         "room_rejoin_warning": "Esta sala non é pública. Non poderá volver a ela sen un convite.",
         "space_rejoin_warning": "Este espazo non é público. Non poderás volver a unirte sen un convite."
     },
-    "left_panel": {
-        "open_dial_pad": "Abrir marcador"
-    },
     "lightbox": {
         "rotate_left": "Rotar á esquerda",
         "rotate_right": "Rotar á dereita"
@@ -1247,7 +1199,6 @@
         "mentions_and_keywords": "@mencións & palabras chave",
         "mentions_and_keywords_description": "Ter notificacións só cando te mencionan e con palabras chave que indiques nos <a>axustes</a>",
         "mentions_keywords": "Mencións e palabras chave",
-        "message_didnt_send": "Non se enviou a mensaxe. Click para info.",
         "mute_description": "Non recibirás ningunha notificación"
     },
     "notifier": {
@@ -1326,7 +1277,6 @@
     },
     "quick_settings": {
         "all_settings": "Todos os axustes",
-        "metaspace_section": "Fixar no lateral",
         "sidebar_settings": "Máis opcións",
         "title": "Axustes rápidos"
     },
@@ -1342,21 +1292,10 @@
     },
     "report_content": {
         "description": "Ao denunciar esta mensaxe vasnos enviar o seu 'event ID' único á administración do servidor. Se as mensaxes da sala están cifradas, a administración do servidor non poderá ler o texto da mensaxe ou ver imaxes ou ficheiros.",
-        "disagree": "En desacordo",
         "hide_messages_from_user": "Marcar para agochar as mensaxes actuais e futuras desta usuaria.",
         "ignore_user": "Ignorar usuaria",
-        "illegal_content": "Contido ilegal",
         "missing_reason": "Escribe a razón do informe.",
-        "nature": "Escolle unha opción e describe a razón pola que esta é unha mensaxe abusiva.",
-        "nature_disagreement": "O que escribe esta usuaria non é correcto.\nSerá denunciado á moderación da sala.",
-        "nature_illegal": "Esta usuaria está a comportarse dun xeito ilegal, por exemplo ameazando a persoas ou exhibindo violencia.\nEsto vaise denunciar ante a moderación da sala que podería presentar o caso ante as autoridades legais.",
-        "nature_other": "Outra razón. Por favor, describe o problema.\nInformaremos disto á moderación da sala.",
-        "nature_spam": "Esta usuaria está facendo spam na sala con anuncios, ligazóns a anuncios ou propaganda.\nEsto vai ser denunciado ante a moderación da sala.",
-        "other_label": "Outro",
-        "report_content_to_homeserver": "Denuncia sobre contido á Administración do teu servidor",
-        "report_entire_room": "Denunciar a toda a sala",
-        "spam_or_propaganda": "Spam ou propaganda",
-        "toxic_behaviour": "Comportamento tóxico"
+        "report_content_to_homeserver": "Denuncia sobre contido á Administración do teu servidor"
     },
     "restore_key_backup_dialog": {
         "count_of_decryption_failures": "Fallo ao descifrar %(failedCount)s sesións!",
@@ -1517,36 +1456,12 @@
         }
     },
     "room_list": {
-        "add_room_label": "Engadir sala",
         "add_space_label": "Engadir espazo",
-        "breadcrumbs_empty": "Sen salas recentes visitadas",
-        "breadcrumbs_label": "Salas visitadas recentemente",
         "failed_add_tag": "Fallo ao engadir a etiqueta %(tagName)s a sala",
         "failed_remove_tag": "Fallo ao eliminar a etiqueta %(tagName)s da sala",
         "failed_set_dm_tag": "Non se estableceu a etiqueta de mensaxe directa",
-        "home_menu_label": "Opcións de Incio",
-        "join_public_room_label": "Unirse a sala pública",
-        "joining_rooms_status": {
-            "one": "Neste intre estás en %(count)s sala",
-            "other": "Neste intre estás en %(count)s salas"
-        },
         "notification_options": "Opcións de notificación",
-        "redacting_messages_status": {
-            "one": "Eliminando agora mensaxes de %(count)s sala",
-            "other": "Eliminando agora mensaxes de %(count)s salas"
-        },
-        "show_less": "Mostrar menos",
-        "show_n_more": {
-            "other": "Mostrar %(count)s máis",
-            "one": "Mostrar %(count)s máis"
-        },
-        "show_previews": "Mostrar vista previa das mensaxes",
-        "sort_by": "Orde por",
-        "sort_by_activity": "Actividade",
-        "sort_unread_first": "Mostrar primeiro as salas con mensaxes sen ler",
-        "space_menu_label": "Menú de %(spaceName)s",
-        "sublist_options": "Opcións da listaxe",
-        "suggested_rooms_heading": "Salas suxeridas"
+        "show_less": "Mostrar menos"
     },
     "room_settings": {
         "access": {
@@ -2078,13 +1993,11 @@
         "show_stickers_button": "Mostrar botón dos adhesivos",
         "show_typing_notifications": "Mostrar notificacións de escritura",
         "sidebar": {
-            "metaspaces_favourites_description": "Agrupa tódalas túas salas favoritas e persoas nun só lugar.",
             "metaspaces_home_all_rooms": "Mostar tódalas salas",
             "metaspaces_home_all_rooms_description": "Mostra tódalas túas salas en Inicio, incluso se están nun espazo.",
             "metaspaces_home_description": "O Inicio é útil para ter unha visión xeral do que acontece.",
             "metaspaces_orphans": "Salas fóra dun espazo",
             "metaspaces_orphans_description": "Agrupa nun só lugar tódalas túas salas que non forman parte dun espazo.",
-            "metaspaces_people_description": "Agrupa tódalas persoas nun só lugar.",
             "metaspaces_subsection": "Espazos a mostrar",
             "title": "Barra lateral"
         },
@@ -2254,12 +2167,6 @@
     "space_settings": {
         "title": "Axustes - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Non tes permiso para engadir salas a este espazo",
-        "error_no_permission_add_space": "Non tes permiso para engadir espazos a este espazo",
-        "error_no_permission_create_room": "Non tes permiso para crear novas salas neste espazo",
-        "error_no_permission_invite": "Non tes permiso para poder convidar a persoas a este espazo"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Escribe o nome do novo servidor que queres explorar.",
@@ -2434,9 +2341,7 @@
         "m.poll.start": "%(senderName)s publicou unha enquisa - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s cambiou o avatar da sala.",
-            "changed_img": "%(senderDisplayName)s cambiou o avatar da sala a <img/>",
-            "lightbox_title": "%(senderDisplayName)s cambiou o avatar para %(roomName)s",
-            "removed": "%(senderDisplayName)s eliminou o avatar da sala."
+            "lightbox_title": "%(senderDisplayName)s cambiou o avatar para %(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -2975,13 +2880,7 @@
         "close_to_view_right_panel": "Pecha este widget para velo neste panel",
         "context_menu": {
             "delete": "Eliminar widget",
-            "delete_warning": "Quitando un trebello elimínalo para todas as usuarias desta sala. ¿tes certeza de querer eliminar este widget?",
-            "move_left": "Mover á esquerda",
-            "move_right": "Mover á dereita",
-            "remove": "Eliminar para todas",
-            "revoke": "Revogar permisos",
-            "screenshot": "Tomar unha foto",
-            "start_audio_stream": "Iniciar fluxo de audio"
+            "delete_warning": "Quitando un trebello elimínalo para todas as usuarias desta sala. ¿tes certeza de querer eliminar este widget?"
         },
         "cookie_warning": "Este widget podería usar cookies.",
         "error_hangup_description": "Desconectouse a chamada. (Erro: %(message)s)",
diff --git a/apps/web/src/i18n/strings/he.json b/apps/web/src/i18n/strings/he.json
index 4c3aa39527..3a54c26209 100644
--- a/apps/web/src/i18n/strings/he.json
+++ b/apps/web/src/i18n/strings/he.json
@@ -9,7 +9,6 @@
             "one": "1 אזכור שלא נקרא.",
             "other": "%(count)s הודעות שלא נקראו כולל אזכורים."
         },
-        "room_name": "חדר %(name)s",
         "unread_messages": "הודעות שלא נקראו."
     },
     "a11y_jump_first_unread_room": "קפצו לחדר הראשון שלא נקרא.",
@@ -41,7 +40,6 @@
         "enter_fullscreen": "עברו למסך מלא",
         "exit_fullscreeen": "יציאה ממסך מלא",
         "expand": "להרחיב",
-        "explore_public_rooms": "שוטט בחדרים ציבוריים",
         "explore_rooms": "גלה חדרים",
         "export": "ייצוא",
         "forward": "קדימה",
@@ -53,8 +51,6 @@
         "ignore": "התעלם",
         "import": "יבא",
         "invite": "הזמן",
-        "invite_to_space": "הזמינו אל מרחב העבודה",
-        "invites_list": "הזמנות",
         "join": "הצטרפות",
         "learn_more": "לימדו עוד",
         "leave": "לעזוב",
@@ -77,7 +73,6 @@
         "rename": "שנה שם",
         "reply": "תשובה",
         "reply_in_thread": "מענה בשרשור",
-        "report_content": "דווח על תוכן",
         "resend": "שלח מחדש",
         "reset": "אתחל",
         "resume": "תקציר",
@@ -94,7 +89,6 @@
         "sign_out": "יציאה",
         "skip": "דלג",
         "start": "התחל",
-        "start_chat": "התחל שיחה",
         "stop": "עצור",
         "submit": "הגש",
         "subscribe": "הרשמה",
@@ -175,9 +169,7 @@
         "log_in_new_account": "<a> היכנס </a> לחשבונך החדש.",
         "logout_dialog": {
             "description": "האם אתה בטוח שברצונך לצאת?",
-            "megolm_export": "ייצא ידנית מפתחות",
             "setup_key_backup_title": "תאבד את הגישה להודעות המוצפנות שלך",
-            "setup_secure_backup_description_1": "הודעות מוצפנות מאובטחות באמצעות הצפנה מקצה לקצה. רק לך ולמקבל / ים יש / ה מקשים לקריאת הודעות אלה.",
             "skip_key_backup": "אני לא רוצה את ההודעות המוצפנות שלי"
         },
         "misconfigured_body": "בקשו מהאדמין של %(brand)s לבדוק <a>קונפיגורציה</a> לרשומות כפולות שגויות.",
@@ -343,7 +335,6 @@
         "encrypted": "מוצפן",
         "error": "שגיאה",
         "faq": "שאלות נפוצות",
-        "favourites": "מועדפים",
         "feedback": "משוב",
         "filter_results": "סנן התוצאות",
         "forward_message": "העבירו את ההודעה",
@@ -351,7 +342,6 @@
         "go_to_settings": "עבור להגדרות",
         "guest": "אורח",
         "help": "עזרה",
-        "historical": "היסטוריה",
         "home": "הבית",
         "homeserver": "שרת הבית",
         "identity_server": "שרת הזדהות",
@@ -360,7 +350,6 @@
         "legal": "חוקי",
         "light": "בהיר",
         "location": "מיקום",
-        "low_priority": "עדיפות נמוכה",
         "matrix": "מטריקס",
         "message_layout": "תבנית הודעה",
         "microphone": "מיקרופון",
@@ -409,7 +398,6 @@
         "success": "הצלחה",
         "suggestions": "הצעות",
         "support": "תמיכה",
-        "system_alerts": "התרעות מערכת",
         "theme": "ערכת נושא",
         "thread": "שרשורים",
         "threads": "שרשורים",
@@ -419,7 +407,6 @@
         "unnamed_room": "חדר ללא שם",
         "user_avatar": "תמונת פרופיל",
         "username": "שם משתמש",
-        "video": "וידאו",
         "warning": "התראה"
     },
     "composer": {
@@ -543,22 +530,6 @@
     },
     "dialog_close_label": "סגור דיאלוג",
     "download_completed": "ההורדה הושלמה",
-    "emoji": {
-        "categories": "נושאים",
-        "category_activities": "פעילויות",
-        "category_animals_nature": "חיות וטבע",
-        "category_flags": "דגלים",
-        "category_food_drink": "משקאות ומזון",
-        "category_frequently_used": "לעיתים קרובות בשימוש",
-        "category_objects": "עצמים",
-        "category_smileys_people": "סמיילי ואנשים",
-        "category_symbols": "סמלים",
-        "category_travel_places": "טיולים ומקומות",
-        "quick_reactions": "תגובות מהירות"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "בטל חיפוש"
-    },
     "empty_room": "חדר ריק",
     "encryption": {
         "access_secret_storage_dialog": {
@@ -598,16 +569,6 @@
             "warning": "אם לא הסרת את שיטת השחזור, ייתכן שתוקף מנסה לגשת לחשבונך. שנה את סיסמת החשבון שלך והגדר מיד שיטת שחזור חדשה בהגדרות."
         },
         "set_up_toast_title": "צור גיבוי מאובטח",
-        "setup_secure_backup": {
-            "explainer": "גבה את המפתחות שלך לפני היציאה כדי להימנע מלאבד אותם."
-        },
-        "udd": {
-            "other_ask_verify_text": "בקש ממשתמש זה לאמת את ההתחברות שלו, או לאמת אותה באופן ידני למטה.",
-            "other_new_session_text": "%(name)s %(userId)s נכנס דרך התחברות חדשה מבלי לאמת אותה:",
-            "own_ask_verify_text": "אמתו את ההתחברות האחרת שלכם דרך אחת מהאפשרויות למטה.",
-            "own_new_session_text": "נכנסתם דרך התחברות חדשה מבלי לאמת אותה:",
-            "title": "לא אמין"
-        },
         "unable_to_setup_keys_error": "לא ניתן להגדיר מקשים",
         "verification": {
             "accepting": "מקבל…",
@@ -1000,9 +961,6 @@
         "leave_room_question": "האם אתה בטוח שברצונך לעזוב את החדר '%(roomName)s'?",
         "room_rejoin_warning": "חדר זה אינו ציבורי. לא תוכל להצטרף שוב ללא הזמנה."
     },
-    "left_panel": {
-        "open_dial_pad": "פתח לוח חיוג"
-    },
     "lightbox": {
         "rotate_left": "סובב שמאלה",
         "rotate_right": "סובב ימינה"
@@ -1119,7 +1077,6 @@
     },
     "quick_settings": {
         "all_settings": "כל ההגדרות",
-        "metaspace_section": "הצמד לסרגל הצד",
         "sidebar_settings": "אפשרויות נוספות",
         "title": "הגדרות מהירות"
     },
@@ -1136,7 +1093,6 @@
     "report_content": {
         "description": "דיווח על הודעה זו ישלח את 'מזהה האירוע' הייחודי למנהל שרת הבית שלך. אם הודעות בחדר זה מוצפנות, מנהל שרת הבית שלך לא יוכל לקרוא את טקסט ההודעה או להציג קבצים או תמונות.",
         "missing_reason": "אנא מלאו מדוע אתם מדווחים.",
-        "other_label": "אחר",
         "report_content_to_homeserver": "דווח על תוכן למנהל שרת הבית שלך"
     },
     "restore_key_backup_dialog": {
@@ -1257,24 +1213,11 @@
         }
     },
     "room_list": {
-        "add_room_label": "הוסף חדר",
         "add_space_label": "הוסיפו מרחב עבודה",
-        "breadcrumbs_empty": "אין חדרים שבקרתם בהם לאחרונה",
         "failed_add_tag": "נכשל בעת הוספת תג %(tagName)s לחדר",
         "failed_remove_tag": "נכשל בעת נסיון הסרת תג %(tagName)s מהחדר",
         "notification_options": "אפשרויות התרעות",
-        "show_less": "הצג פחות",
-        "show_n_more": {
-            "one": "הצג עוד %(count)s",
-            "other": "הצג עוד %(count)s"
-        },
-        "show_previews": "הצג תצוגה מקדימה של הודעות",
-        "sort_by": "סדר לפי",
-        "sort_by_activity": "פעילות",
-        "sort_by_alphabet": "א-ת",
-        "sort_unread_first": "הצג תחילה חדרים עם הודעות שלא נקראו",
-        "space_menu_label": "תפריט %(spaceName)s",
-        "sublist_options": "רשימת אפשרויות"
+        "show_less": "הצג פחות"
     },
     "room_settings": {
         "access": {
@@ -1713,13 +1656,11 @@
         "show_stickers_button": "הצג את לחצן המדבקות",
         "show_typing_notifications": "הצג התרעות כתיבה",
         "sidebar": {
-            "metaspaces_favourites_description": "קבצו את כל החדרים ואנשי הקשר האהובים עליכם במקום אחד.",
             "metaspaces_home_all_rooms": "הצג את כל החדרים",
             "metaspaces_home_all_rooms_description": "הצג את כל החדרים שלכם במסך הבית, אפילו אם הם משויכים למרחב עבודה.",
             "metaspaces_home_description": "מסך הבית עוזר לסקירה כללית.",
             "metaspaces_orphans": "חדרים שמחוץ למרחב העבודה",
             "metaspaces_orphans_description": "קבצו את כל החדרים שלכם שאינם משויכים למרחב עבודה במקום אחד.",
-            "metaspaces_people_description": "קבצו את כל אנשי הקשר שלכם במקום אחד.",
             "metaspaces_subsection": "מרחבי עבודה להצגה",
             "title": "סרגל צד"
         },
@@ -1858,12 +1799,6 @@
         "title_when_query_available": "תוצאות",
         "title_when_query_unavailable": "חדרים וחללי עבודה"
     },
-    "spaces": {
-        "error_no_permission_add_room": "אין לכם השאה להוסיף חדשרים למרחב העבודה הנוכחי",
-        "error_no_permission_add_space": "אין לכם הרשאה להוסיף מרחב עבודה אל מרחב העבודה הנוכחי",
-        "error_no_permission_create_room": "אין לכם הרשאה ליצור חדרים חדשים במרחב העבודה הנוכחי",
-        "error_no_permission_invite": "אין לכם הרשאה להזמין משתתפים אל מרחב עבודה זה"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "הזן את שם השרת החדש שתרצה לחקור.",
@@ -1977,9 +1912,7 @@
         "m.poll.start": "%(senderName)s התחיל סקר - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s שינה את תמונת החדר.",
-            "changed_img": "%(senderDisplayName)s שינה את האווטאר של החדר ל- <img/>",
-            "lightbox_title": "%(senderDisplayName)s שינה את האווטר עבור חדר %(roomName)s",
-            "removed": "%(senderDisplayName)s הסיר את האווטאר של החדר."
+            "lightbox_title": "%(senderDisplayName)s שינה את האווטר עבור חדר %(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -2434,12 +2367,7 @@
         },
         "context_menu": {
             "delete": "מחק ישומון",
-            "delete_warning": "מחיקת יישומון מסירה אותו לכל המשתמשים בחדר זה. האם אתה בטוח שברצונך למחוק את היישומון הזה?",
-            "move_left": "הזז שמאלה",
-            "move_right": "הזז ימינה",
-            "remove": "הסר לכולם",
-            "revoke": "שלילת הרשאות",
-            "screenshot": "צלם תמונה"
+            "delete_warning": "מחיקת יישומון מסירה אותו לכל המשתמשים בחדר זה. האם אתה בטוח שברצונך למחוק את היישומון הזה?"
         },
         "cookie_warning": "יישומון זה עשוי להשתמש בעוגיות.",
         "error_need_invite_permission": "עליכם להיות מאושרים להזמין משתמשים על מנת לבצע פעולה זו.",
diff --git a/apps/web/src/i18n/strings/hr.json b/apps/web/src/i18n/strings/hr.json
index 3ccf93b8eb..0c60febfd5 100644
--- a/apps/web/src/i18n/strings/hr.json
+++ b/apps/web/src/i18n/strings/hr.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Birač emotikona",
         "jump_first_invite": "Skoči na prvu pozivnicu.",
         "message_composer": "Sastavljač poruka",
         "n_unread_messages": {
@@ -13,8 +12,6 @@
             "few": "%(count)s nepročitane poruke, uključujući spominjanja.",
             "other": "%(count)s nepročitanih poruka, uključujući spominjanja."
         },
-        "recent_rooms": "Nedavne sobe",
-        "room_name": "Soba %(name)s",
         "room_status_bar": "Traka statusa sobe",
         "seek_bar_label": "Traka za traženje zvuka",
         "unread_messages": "Nepročitane poruke."
@@ -24,7 +21,6 @@
         "accept": "Prihvati",
         "add": "Dodaj",
         "add_existing_room": "Dodaj postojeću sobu",
-        "add_people": "Dodaj osobe",
         "apply": "Primijeni",
         "approve": "Odobri",
         "ask_to_join": "Zatraži pridruživanje",
@@ -59,7 +55,6 @@
         "enter_fullscreen": "Otvori prikaz preko cijelog zaslona",
         "exit_fullscreeen": "Iziđi iz prikaza preko cijelog zaslona",
         "expand": "Proširi",
-        "explore_public_rooms": "Pretražuj javne sobe",
         "explore_rooms": "Pretražuj sobe",
         "export": "Izvoz",
         "forward": "Proslijedi",
@@ -71,8 +66,6 @@
         "ignore": "Ignoriraj",
         "import": "Uvezi",
         "invite": "Pozovi",
-        "invite_to_space": "Pozovi u prostor",
-        "invites_list": "Pozivnice",
         "join": "Pridruži se",
         "learn_more": "Saznajte više",
         "leave": "Napusti",
@@ -99,7 +92,6 @@
         "rename": "Preimenuj",
         "reply": "Odgovori",
         "reply_in_thread": "Odgovori u niti",
-        "report_content": "Prijavi sadržaj",
         "report_room": "Prijavi sobu",
         "resend": "Ponovno pošalji",
         "reset": "Poništi",
@@ -116,11 +108,9 @@
         "show_advanced": "Prikaži napredno",
         "show_all": "Pokaži sve",
         "sign_in": "Prijava",
-        "sign_out": "Odjava",
+        "sign_out": "Ukloni ovaj uređaj",
         "skip": "Preskoči",
         "start": "Započni",
-        "start_chat": "Započni razgovor",
-        "start_new_chat": "Započni novi razgovor",
         "stop": "Zaustavi",
         "submit": "Pošalji",
         "subscribe": "Pretplati se",
@@ -220,12 +210,10 @@
         "incorrect_password": "Pogrešna zaporka",
         "log_in_new_account": "<a>Prijavite se</a> na svoj novi račun.",
         "logout_dialog": {
-            "description": "Jeste li sigurni da se želite odjaviti?",
-            "megolm_export": "Ručno izvezi ključeve",
-            "setup_key_backup_title": "Izgubit ćete pristup svojim šifriranim porukama",
-            "setup_secure_backup_description_1": "Šifrirane poruke zaštićene su sveobuhvatnim šifriranjem. Samo vi i primatelji imate ključeve za čitanje tih poruka.",
-            "setup_secure_backup_description_2": "Kada se odjavite, ovi će se ključevi izbrisati s ovog uređaja, što znači da nećete moći čitati šifrirane poruke osim ako nemate ključeve za njih na drugim uređajima ili ih niste sigurnosno kopirali na poslužitelj.",
-            "skip_key_backup": "Ne želim svoje šifrirane poruke"
+            "description": "Jeste li sigurni da želite ukloniti ovaj uređaj?",
+            "setup_key_backup_title": "Izgubit ćete pristup svojim šifriranim razgovorima",
+            "setup_secure_backup_description": "Ovo je vaš jedini uređaj. Ako ga uklonite, trebat će vam ključ za oporavak kako biste potvrdili svoj digitalni identitet i vratili šifrirane razgovore sljedeći put kada se prijavite.",
+            "skip_key_backup": "Svejedno ukloni ovaj uređaj"
         },
         "misconfigured_body": "Upitajte svog administratora za %(brand)s da provjeri ima li u <a>vašoj konfiguraciji</a> netočnih ili dupliciranih unosa.",
         "misconfigured_title": "Tvoj %(brand)s pogrešno je konfiguriran",
@@ -251,7 +239,9 @@
             "check_code_heading": "Unesite broj prikazan na vašem drugom uređaju",
             "check_code_input_label": "Dvoznamenkasti kod",
             "check_code_mismatch": "Brojevi se ne podudaraju",
+            "choose_desktop_computer": "Odaberite „%(desktopComputer)s”",
             "completing_setup": "Dovršavanje postavljanja vašeg novog uređaja",
+            "desktop_computer": "Stolno računalo",
             "error_etag_missing": "Došlo je do neočekivane pogreške. To može biti zbog proširenja preglednika, proxy poslužitelja ili pogrešne konfiguracije poslužitelja.",
             "error_expired": "Prijava je istekla. Pokušajte ponovno.",
             "error_expired_title": "Prijava nije dovršena na vrijeme",
@@ -272,16 +262,22 @@
             "error_user_declined": "Vi ili davatelj usluge računa odbili ste zahtjev za prijavu.",
             "error_user_declined_title": "Prijava je odbijena",
             "follow_remaining_instructions": "Pridržavajte se preostalih uputa",
+            "open_element_mobile_device": "Otvorite %(brand)s na svom mobilnom uređaju",
             "open_element_other_device": "Otvorite %(brand)s na drugom uređaju",
             "point_the_camera": "Skenirajte QR kod koji je ovdje prikazan",
-            "scan_code_instruction": "Skenirajte QR kod drugim uređajem",
+            "ready_to_scan": "Spremno za skeniranje",
+            "scan_code_instruction": "Skeniraj QR kod",
+            "scan_code_instruction_reciprocate": "Skenirajte QR kod drugim uređajem",
             "scan_qr_code": "Prijavi se pomoću QR koda",
-            "security_code": "Sigurnosni kod",
-            "security_code_prompt": "Ako se to od vas zatraži, unesite ispod navedeni kod na drugi uređaj.",
+            "security_code_prompt": "Davatelj usluge računa može zatražiti sljedeći kod za potvrdu prijave.",
+            "security_code_title": "Vaš verifikacijski kod",
             "select_qr_code": "Odaberite „%(scanQRCode)s”",
+            "select_ready_to_scan": "Odaberite „%(readyToScan)s” i skenirajte ovdje prikazani QR kod",
+            "start_over": "Počni ispočetka",
+            "tap_avatar_link_new_device": "Dodirnite svoj avatar i odaberite „%(linkNewDevice)s”",
             "unsupported_explainer": "Vaš davatelj usluga računa ne podržava prijavu na novi uređaj pomoću QR koda.",
             "unsupported_heading": "QR kod nije podržan",
-            "waiting_for_device": "Čekanje na to da se uređaj prijavi"
+            "waiting_for_device": "Čekanje na vaš drugi uređaj"
         },
         "register_action": "Izradi račun",
         "registration": {
@@ -297,16 +293,16 @@
         "registration_username_validation": "Upotrijebite samo mala slova, brojeve, crtice i podcrte",
         "reset_password": {
             "confirm_new_password": "Potvrdi novu zaporku",
-            "devices_logout_success": "Odjavljeni ste sa svih uređaja i više nećete primati push obavijesti. Da biste ponovno omogućili obavijesti, ponovno se prijavite na svakom uređaju.",
-            "other_devices_logout_warning_1": "Odjavom s uređaja izbrisat ćete ključeve za šifriranje poruka pohranjene na njima, što će šifriranu povijest razgovora učiniti nečitljivom.",
-            "other_devices_logout_warning_2": "Ako želite zadržati pristup svojoj povijesti razgovora u šifriranim sobama, postavite sigurnosnu kopiju ključa ili izvezite ključeve poruka s jednog od svojih drugih uređaja prije nego što nastavite.",
+            "devices_logout_success": "Svi su vaši uređaji oklonjeni i više nećete primati push obavijesti. Da biste ponovno omogućili obavijesti, ponovno se prijavite na svakom uređaju.",
+            "other_devices_logout_warning_1": "Uklanjanjem svojih uređaja izbrisat ćete ključeve za šifriranje poruka pohranjene na njima, što će šifriranu povijest razgovora učiniti nečitljivom.",
+            "other_devices_logout_warning_2": "Ako želite zadržati pristup svojoj povijesti razgovora u šifriranim sobama, nabavite ključ za oporavak ili izvezite ključeve poruka s jednog od svojih uređaja prije nego što nastavite.",
             "password_not_entered": "Mora se unijeti nova zaporka.",
             "passwords_mismatch": "Nove zaporke moraju se međusobno podudarati.",
             "rate_limit_error": "Previše pokušaja u kratkom vremenu. Pričekajte neko vrijeme prije ponovnog pokušaja.",
             "rate_limit_error_with_time": "Previše pokušaja u kratkom vremenu. Pokušajte ponovno nakon %(timeout)s.",
             "reset_successful": "Zaporka je poništena.",
             "return_to_login": "Povratak na zaslon za prijavu",
-            "sign_out_other_devices": "Odjava sa svih uređaja"
+            "sign_out_other_devices": "Ukloni druge uređaje"
         },
         "reset_password_action": "Poništi zaporku",
         "reset_password_button": "Zaboravili ste zaporku?",
@@ -329,8 +325,8 @@
         "server_picker_title": "Prijavite se na svoj matični poslužitelj",
         "server_picker_title_default": "Mogućnosti poslužitelja",
         "server_picker_title_registration": "Račun na",
-        "session_logged_out_description": "Ova je sesija odjavljena iz sigurnosnih razloga. Ponovno se prijavite.",
-        "session_logged_out_title": "Odjavljeni ste",
+        "session_logged_out_description": "Ova je sesija uklonjena iz sigurnosnih razloga. Ponovno se prijavite.",
+        "session_logged_out_title": "Sesija je uklonjena",
         "set_email": {
             "description": "To će vam omogućiti da poništite zaporku i primate obavijesti.",
             "verification_pending_description": "Provjerite svoju e-poštu i kliknite na poveznicu koja se u njoj nalazi. Nakon što to učinite, kliknite gumb za nastavak.",
@@ -340,8 +336,10 @@
         "sign_in_description": "Za nastavak upotrijebite svoj račun.",
         "sign_in_instead": "Prijavite se umjesto toga",
         "sign_in_instead_prompt": "Već imate račun? <a>Prijavi se ovdje</a>",
+        "sign_in_manually": "Prijavi se ručno",
         "sign_in_or_register": "Prijavite se ili izradite račun",
         "sign_in_or_register_description": "Za nastavak upotrijebite svoj račun ili izradite novi.",
+        "sign_in_with_qr": "Prijavi se pomoću QR koda",
         "sign_in_with_sso": "Prijavite se pomoću jedinstvene prijave (SSO)",
         "signing_in": "U tijeku je prijava…",
         "soft_logout": {
@@ -369,8 +367,8 @@
             "email_resent": "Ponovno poslano!",
             "fallback_button": "Započni provjeru autentičnosti",
             "mas_cross_signing_reset_cta": "Nastavi na račun",
-            "mas_cross_signing_reset_description": "Spremate se otići na %(serverName)s račun kako biste poništili svoj identitet. Nakon što dovršite poništavanje svog računa, vratite se ovdje i kliknite Pokušaj ponovno.",
-            "mas_cross_signing_reset_title": "Idite na svoj račun kako biste poništili svoj identitet",
+            "mas_cross_signing_reset_description": "Spremate se otići na svoj račun na poslužitelju %(serverName)s kako biste poništili svoj digitalni identitet. Nakon što dovršite poništavanje na svom računu, vratite se ovdje i kliknite Pokušaj ponovno.",
+            "mas_cross_signing_reset_title": "Idite na svoj račun kako biste poništili svoj digitalni identitet",
             "msisdn": "Poslana je tekstna poruka na broj %(msisdn)s",
             "msisdn_token_incorrect": "Token je netočan",
             "msisdn_token_prompt": "Unesite kod koji sadrži:",
@@ -477,13 +475,13 @@
         "description": "Opis",
         "deselect_all": "Poništi sve odabire",
         "device": "Uređaj",
+        "disabled_by_homeserver": "Onemogućio matični poslužitelj",
         "edited": "uređeno",
         "email_address": "E-adresa",
         "emoji": "Emotikon",
         "encrypted": "Šifrirano",
         "error": "Geška",
         "faq": "Česta pitanja",
-        "favourites": "Favoriti",
         "feedback": "Povratne informacije",
         "filter_results": "Filtriraj rezultate",
         "forward_message": "Proslijedi poruku",
@@ -491,7 +489,6 @@
         "go_to_settings": "Idi na postavke",
         "guest": "Gost",
         "help": "Pomoć",
-        "historical": "Povijest",
         "home": "Početna stranica",
         "homeserver": "Matični poslužitelj",
         "identity_server": "Poslužitelj identiteta",
@@ -499,17 +496,16 @@
         "integration_manager": "Upravitelj integracijama",
         "joined": "Pridružio/la se",
         "labs": "Laboratoriji",
+        "legacy_voice_and_video_settings": "Matrixovi pozivi jedan na jedan (naslijeđeni)",
         "legal": "Pravne napomene",
         "light": "Svijetlo",
         "loading": "Učitavanje…",
         "location": "Lokacija",
-        "low_priority": "Niski prioritet",
         "matrix": "Matrix",
         "message": "Poruka",
         "message_layout": "Izgled poruke",
         "message_timestamp_invalid": "Vremenska oznaka nije valjana",
         "microphone": "Mikrofon",
-        "model": "Model",
         "moderation_and_safety": "Moderiranje i sigurnost",
         "modern": "Suvremeni",
         "mute": "Isključi zvuk",
@@ -571,7 +567,6 @@
         "success": "Uspjeh",
         "suggestions": "Prijedlozi",
         "support": "Podrška",
-        "system_alerts": "Upozorenja sustava",
         "theme": "Tema",
         "thread": "Nit",
         "threads": "Niti",
@@ -588,7 +583,6 @@
         "username": "Korisničko ime",
         "verified": "Potvrđeno",
         "version": "Inačica",
-        "video": "Videozapis",
         "video_room": "Videosoba",
         "view_message": "Prikaži poruku",
         "warning": "Upozorenje"
@@ -668,8 +662,8 @@
         "join_rule_knock_label": "Svatko može zatražiti pridruživanje, ali administratori ili moderatori moraju odobriti pristup. To možete poslije promijeniti.",
         "join_rule_public_label": "Svatko će moći pronaći ovu sobu i pridružiti joj se.",
         "join_rule_public_parent_space_label": "Svatko će moći pronaći ovu sobu i pridružiti joj se, ne samo članovi prostora <SpaceName/>.",
-        "join_rule_restricted": "Vidljivo članovima prostora",
-        "join_rule_restricted_label": "Svi u prostoru <SpaceName/> moći će pronaći ovu sobu i pridružiti joj se.",
+        "join_rule_restricted": "Standardno",
+        "join_rule_restricted_label": "Svatko u prostoru <SpaceName/> može se pridružiti.",
         "name_validation_required": "Unesite naziv sobe",
         "room_visibility_label": "Vidljivost sobe",
         "state_encrypted_warning": "Omogućuje eksperimentalnu podršku za šifriranje događaja stanja, čime se od poslužitelja skrivaju metapodatci, poput naziva soba i tema. Ti metapodatci bit će skriveni i od osoba koje se poslije pridruže sobama i od onih čiji klijenti ne podržavaju MSC4362.",
@@ -683,6 +677,13 @@
         "unfederated_label_default_on": "Ovo možete onemogućiti ako će se soba upotrebljavati za suradnju s vanjskim timovima koji imaju vlastiti matični poslužitelj. To se poslije ne može promijeniti.",
         "unsupported_version": "Poslužitelj ne podržava navedenu verziju sobe."
     },
+    "create_section_dialog": {
+        "create_section": "Izradi odjeljak",
+        "description": "Odjeljci su samo za vas",
+        "label": "Naziv odjeljka",
+        "title": "Izradi odjeljak",
+        "title_edition": "Uredi odjeljak"
+    },
     "create_space": {
         "add_details_prompt": "Dodajte neke pojedinosti kako biste ljudima pomogli da ga prepoznaju.",
         "add_details_prompt_2": "Možete ih promijeniti u bilo kojem trenutku.",
@@ -694,7 +695,7 @@
         "creating_rooms": "U tijeku je izrada soba…",
         "done_action": "Idi u moj prostor",
         "done_action_first_room": "Idi u moju prvu sobu",
-        "explainer": "Prostori su nov način grupiranja soba i ljudi. Kakav prostor želite stvoriti? To možete poslije promijeniti.",
+        "explainer": "Prostori služe za organiziranje i otkrivanje soba. Kakav prostor želite izraditi?",
         "failed_create_initial_rooms": "Nije uspjelo stvaranje početnih soba u prostoru",
         "failed_invite_users": "Nije uspjelo pozivanje sljedećih korisnika u vaš prostor: %(csvUsers)s",
         "invite_teammates_by_username": "Pozovi po korisničkom imenu",
@@ -705,20 +706,20 @@
         "name_required": "Unesite naziv prostora",
         "personal_space": "Samo ja",
         "personal_space_description": "Privatni prostor za organizaciju vaših soba",
-        "private_description": "Samo s pozivnicom, najbolje za vas ili timove",
+        "private_description": "Samo s pozivnicom, osobno ili za vaš tim",
         "private_heading": "Vaš privatni prostor",
         "private_only_heading": "Vaš prostor",
         "private_personal_description": "Pobrinite se da prave osobe imaju pristup %(name)s",
         "private_personal_heading": "S kim radite?",
         "private_space": "Ja i članovi mog tima",
         "private_space_description": "Privatni prostor za vas i članove vašeg tima",
-        "public_description": "Otvoreni prostor za svakoga, najbolji za zajednice",
+        "public_description": "Svatko se može pridružiti, najbolje za zajednice",
         "public_heading": "Vaš javni prostor",
         "search_public_button": "Pretražite javne prostore",
-        "setup_rooms_community_description": "Stvorimo sobu za svakog od njih.",
+        "setup_rooms_community_description": "Za početak stvorimo nekoliko soba.",
         "setup_rooms_community_heading": "O čemu želite razgovarati u prostoru %(spaceName)s?",
-        "setup_rooms_description": "Poslije možete dodati još, uključujući i već postojeće.",
-        "setup_rooms_private_description": "Napravit ćemo sobe za svakog od njih.",
+        "setup_rooms_description": "Poslije možete dodati još soba u prostor, uključujući i postojeće.",
+        "setup_rooms_private_description": "Za početak izradimo nekoliko soba.",
         "setup_rooms_private_heading": "Na kojim projektima radi vaš tim?",
         "share_description": "Trenutačno ste samo vi, a s drugima će biti još bolje.",
         "share_heading": "Podijeli %(name)s",
@@ -731,7 +732,7 @@
         "subspace_join_rule_invite_only": "Privatni prostor (samo uz pozivnicu)",
         "subspace_join_rule_label": "Vidljivost prostora",
         "subspace_join_rule_public_description": "Svatko će moći pronaći ovaj prostor i pridružiti mu se, a ne samo članovi prostora <SpaceName/>.",
-        "subspace_join_rule_restricted_description": "Svatko u prostoru <SpaceName/> moći će pronaći i pridružiti se."
+        "subspace_join_rule_restricted_description": "Svatko u prostoru <SpaceName/> može se pridružiti."
     },
     "credits": {
         "default_cover_photo": "Na <photo>zadanu naslovnu fotografiju</photo> autorsko pravo polaže <author>Jesús Roncero</author>, a upotrebljava se u skladu s uvjetima licencije <terms>CC-BY-SA 4.0</terms>.",
@@ -751,6 +752,7 @@
         "category_other": "Ostalo",
         "category_room": "Soba",
         "caution_colon": "Oprez:",
+        "checking_sticky_events_support": "Provjera podrške za sticky događaje...",
         "client_versions": "Inačice klijenta",
         "crypto": {
             "4s_public_key_in_account_data": "u podatcima računa",
@@ -773,7 +775,7 @@
             "cross_signing_public_keys_on_device_status": "Unakrsno potpisivanje javnih ključeva:",
             "cross_signing_ready": "Unakrsno potpisivanje spremno je za upotrebu.",
             "cross_signing_status": "Status unakrsnog potpisivanja:",
-            "cross_signing_untrusted": "Vaš račun ima identitet za unakrsno potpisivanje u tajnoj pohrani, ali mu ova sesija još ne vjeruje.",
+            "cross_signing_untrusted": "Vaš račun ima digitalni identitet u tajnoj pohrani, ali mu ova sesija još ne vjeruje.",
             "crypto_not_available": "Modul za šifriranje nije dostupan",
             "device_id": "ID uređaja",
             "key_backup_active_version": "Aktivna inačica sigurnosne kopije:",
@@ -809,13 +811,18 @@
         "edit_setting": "Uredi postavku",
         "edit_values": "Uredi vrijednosti",
         "empty_string": "<empty string>",
+        "error_sticky_duration_must_be_a_number": "stickyDuration mora biti broj",
+        "error_sticky_duration_out_of_range": "stickyDuration mora biti između 0 i 36 000 milisekunda (1 sat)",
         "event_content": "Sadržaj događaja",
         "event_id": "ID događaja: %(eventId)s",
         "event_sent": "Događaj je poslan!",
         "event_type": "Vrsta događaja",
+        "expired": "Isteklo",
+        "expires_in": "Istječe za",
         "explore_account_data": "Istraži podatke računa",
         "explore_room_account_data": "Istraži podatke računa sobe",
         "explore_room_state": "Istraži stanje sobe",
+        "explore_sticky_state": "Istraži stanje sticky događaja",
         "failed_to_find_widget": "Došlo je do pogreške prilikom pronalaženja ovog widgeta.",
         "failed_to_load": "Učitavanje nije uspjelo.",
         "failed_to_save": "Spremanje postavki nije uspjelo.",
@@ -824,11 +831,12 @@
         "invalid_device_key_id": "Nevažeći ID ključa uređaja",
         "invalid_json": "Ne izgleda kao valjani JSON.",
         "level": "Razina",
-        "low_bandwidth_mode": "Način rada niske propusnosti",
-        "low_bandwidth_mode_description": "Zahtijeva kompatibilan matični poslužitelj.",
+        "low_bandwidth_mode": "Onemogući značajke koje zahtijevaju puno propusnosti",
+        "low_bandwidth_mode_description": "Onemogućuje šifriranje, prisutnost, avatare, potvrde o čitanju i obavijesti o tipkanju",
         "main_timeline": "Glavna vremenska traka",
         "manual_device_verification": "Ručna potvrda uređaja",
         "no_receipt_found": "Nije pronađen račun",
+        "no_sticky_events": "U ovoj sobi nema sticky događaja.",
         "notification_state": "Stanje obavijesti je <strong>%(notificationState)s</strong>",
         "notifications_debug": "Otklanjanje pogrešaka u obavijestima",
         "number_of_users": "Broj korisnika",
@@ -856,6 +864,7 @@
         "send_custom_account_data_event": "Pošalji prilagođeni događaj podataka o računu",
         "send_custom_room_account_data_event": "Pošalji prilagođeni događaj podataka o računu sobe",
         "send_custom_state_event": "Pošalji prilagođeni događaj stanja",
+        "send_custom_sticky_event": "Pošalji prilagođeni sticky događaj",
         "send_custom_timeline_event": "Pošalji prilagođeni događaj vremenske trake",
         "server_info": "Informacije o poslužitelju",
         "server_versions": "Inačice poslužitelja",
@@ -876,15 +885,19 @@
             "other": "<%(count)s mjesta>"
         },
         "state_key": "Ključ stanja",
+        "sticky_duration": "Trajanje sticky događaja (ms)",
+        "sticky_events_not_supported": "Vaš matični poslužitelj još ne podržava sticky događaje.",
+        "sticky_key": "Ključ za sticky događaj",
         "thread_root_id": "ID korijena niti: %(threadRootId)s",
         "threads_timeline": "Vremenska traka niti",
         "title": "Alati za razvojne inženjere",
-        "toggle_event": "uključi/isključi događaj",
         "toolbox": "Alatni okvir",
         "use_at_own_risk": "Ovo korisničko sučelje NE provjerava vrste vrijednosti. Upotrebljavajte na vlastitu odgovornost.",
         "user_avatar": "Avatar: %(avatar)s",
         "user_displayname": "Ime za prikaz: %(displayname)s",
         "user_id": "ID korisnika: %(userId)s",
+        "user_identity": "Kriptografski identitet",
+        "user_identity_unknown": "Nepoznato",
         "user_no_avatar": "Avatar: <i>Nema</i>",
         "user_no_displayname": "Ime za prikaz: <i>Nema</i>",
         "user_read_up_to": "Korisnik je pročitao do: ",
@@ -893,10 +906,10 @@
         "user_read_up_to_private_ignore_synthetic": "Korisnik je pročitao do (m.read.private;ignoreSynthetic): ",
         "user_room_membership": "Članstvo: %(membership)s",
         "user_verification_status": {
-            "identity_changed": "Status provjere: <E2EIcon /> Nepotvrđen, a identitet promijenjen",
+            "identity_changed": "Status provjere: <E2EIcon /> Nepotvrđen, a digitalni identitet je promijenjen",
             "unverified": "Status provjere: <E2EIcon /> Nepotvrđen",
             "verified": "Status provjere: <E2EIcon /> Potvrđen",
-            "was_verified": "Status provjere: <E2EIcon /> Bio je potvrđen, ali je identitet promijenjen"
+            "was_verified": "Status provjere: <E2EIcon /> Bio je potvrđen, ali je digitalni identitet promijenjen"
         },
         "users": "Korisnici",
         "value": "Vrijednost",
@@ -914,22 +927,6 @@
     },
     "dialog_close_label": "Zatvori dijaloški okvir",
     "download_completed": "Preuzimanje je dovršeno",
-    "emoji": {
-        "categories": "Kategorije",
-        "category_activities": "Aktivnosti",
-        "category_animals_nature": "Životinje i priroda",
-        "category_flags": "Zastave",
-        "category_food_drink": "Hrana i piće",
-        "category_frequently_used": "Često korišteno",
-        "category_objects": "Predmeti",
-        "category_smileys_people": "Smješkići i ljudi",
-        "category_symbols": "Simboli",
-        "category_travel_places": "Putovanje i mjesta",
-        "quick_reactions": "Brze reakcije"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Otkaži pretraživanje"
-    },
     "empty_room": "Prazna soba",
     "empty_room_was_name": "Prazna soba (bila je %(oldName)s)",
     "encryption": {
@@ -962,7 +959,7 @@
         "event_shield_reason_unverified_identity": "Šifrirao neprovjereni korisnik.",
         "export_unsupported": "Vaš preglednik ne podržava potrebna proširenja za šifriranje",
         "forgot_recovery_key": "Zaboravili ste ključ za oporavak?",
-        "identity_needs_reset_description": "Morate poništiti svoj identitet šifriranja kako biste osigurali pristup povijesti poruka",
+        "identity_needs_reset_description": "Morate poništiti svoj digitalni identitet kako biste osigurali pristup povijesti poruka",
         "import_invalid_keyfile": "Nevažeća %(brand)s datoteka s ključem za šifriranje",
         "import_invalid_passphrase": "Provjera autentičnosti nije uspjela: netočna zaporka?",
         "key_storage_out_of_sync": "Vaša pohrana ključeva nije sinkronizirana.",
@@ -981,30 +978,19 @@
             "title": "Nov način oporavka",
             "warning": "Ako niste postavili nov način oporavka, napadač možda pokušava pristupiti vašem računu. Odmah u postavkama promijenite zaporku računa i postavite nov način oporavka."
         },
-        "pinned_identity_changed": "Identitet %(displayName)s (<b>%(userId)s</b>) je poništen. <a>Saznajte više</a>",
-        "pinned_identity_changed_no_displayname": "Identitet <b>%(userId)s</b> je poništen. <a>Saznajte više</a>",
+        "pinned_identity_changed": "Poništen je digitalni identitet %(displayName)s (<b>%(userId)s</b>). <a>Saznajte više</a>",
+        "pinned_identity_changed_no_displayname": "Poništen je digitalni identitet korisnika <b>%(userId)s</b>. <a>Saznajte više</a>",
         "recovery_method_removed": {
             "description_1": "Ova je sesija otkrila da su vaš sigurnosni izraz i ključ za zaštićene poruke uklonjeni.",
             "description_2": "Ako ste to učinili slučajno, možete postaviti zaštićene poruke u ovoj sesiji koje će ponovno šifrirati povijest poruka ove sesije novim načinom oporavka.",
             "title": "Način oporavka je uklonjen",
             "warning": "Ako niste uklonili način oporavka, napadač možda pokušava pristupiti vašem računu. Odmah u postavkama promijenite zaporku računa i postavite nov način oporavka."
         },
-        "set_up_recovery": "Postavljanje oporavka",
-        "set_up_recovery_toast_description": "Generirajte ključ za oporavak koji se može upotrijebiti za vraćanje vaše šifrirane povijesti poruka u slučaju da izgubite pristup svojim uređajima.",
+        "set_up_recovery": "Napravite sigurnosnu kopiju svojih razgovora",
+        "set_up_recovery_toast_description": "Vaši se razgovori automatski sigurnosno kopiraju sveobuhvatnim šifriranjem. Kako biste vratili ovu sigurnosnu kopiju i zadržali svoj digitalni identitet kada izgubite pristup svim svojim uređajima, trebat će vam ključ za oporavak.",
         "set_up_toast_title": "Postavljanje zaštićene sigurnosne kopije",
-        "setup_secure_backup": {
-            "explainer": "Prije odjave napravite sigurnosnu kopiju ključeva kako biste izbjegli njihov gubitak."
-        },
         "turn_on_key_storage": "Uključi pohranu ključeva",
-        "turn_on_key_storage_description": "Sigurno pohranite svoj identitet šifriranja i ključeve poruka na poslužitelju. To će vam omogućiti pregled povijesti poruka na svim novim uređajima.",
-        "udd": {
-            "interactive_verification_button": "Interaktivna provjera pomoću emotikona",
-            "other_ask_verify_text": "Zamolite tog korisnika da potvrdi svoju sesiju ili je ručno potvrdite u nastavku.",
-            "other_new_session_text": "%(name)s(%(userId)s ) prijavio/la se u novu sesiju, a da je nije potvrdio/la:",
-            "own_ask_verify_text": "Potvrdite svoju drugu sesiju služeći se jednom od ispod navedenih mogućnosti.",
-            "own_new_session_text": "Prijavili ste se u novu sesiju, a da je niste potvrdili:",
-            "title": "Nije pouzdano"
-        },
+        "turn_on_key_storage_description": "To će vam omogućiti pregled povijesti razgovora na bilo kojem novom uređaju i potrebno je za sigurnosno kopiranje razgovora i digitalnog identiteta.",
         "unable_to_setup_keys_error": "Nije moguće postaviti ključeve",
         "verification": {
             "accepting": "U tijeku je prihvaćanje…",
@@ -1020,7 +1006,7 @@
             "complete_description": "Uspješno ste provjerili ovog korisnika.",
             "complete_title": "Provjereno!",
             "confirm_identity_description": "Potvrdite ovaj uređaj kako biste postavili sigurnu razmjenu poruka",
-            "confirm_identity_title": "Potvrdite svoj identitet",
+            "confirm_identity_title": "Potvrdite svoj digitalni identitet",
             "confirm_the_emojis": "Potvrdite da se emotikoni u nastavku podudaraju s onima prikazanima na vašem drugom uređaju.",
             "error_starting_description": "Nismo uspjeli pokrenuti razgovor s drugim korisnikom.",
             "error_starting_title": "Pogreška pri pokretanju provjere",
@@ -1104,10 +1090,10 @@
             "waiting_other_user": "Čeka se da %(displayName)s provjeri…"
         },
         "verification_requested_toast_title": "Zatražena je provjera",
-        "verified_identity_changed": "Identitet %(displayName)s (<b>%(userId)s</b>) je poništen. <a>Saznajte više</a>",
-        "verified_identity_changed_no_displayname": "Identitet <b>%(userId)s</b> je poništen. <a>Saznajte više</a>",
-        "verify_toast_description": "Drugi korisnici možda vam neće vjerovati",
-        "verify_toast_title": "Potvrdi ovu sesiju",
+        "verified_identity_changed": "Poništen je digitalni identitet %(displayName)s (<b>%(userId)s</b>). <a>Saznajte više</a>",
+        "verified_identity_changed_no_displayname": "Poništen je digitalni identitet korisnika <b>%(userId)s</b>. <a>Saznajte više</a>",
+        "verify_toast_description": "Od kraja listopada 2026. neprovjereni uređaji neće moći slati i primati poruke. <a>Saznajte više</a>",
+        "verify_toast_title": "Potvrdi ovaj uređaj",
         "withdraw_verification_action": "Povuci provjeru"
     },
     "error": {
@@ -1132,15 +1118,15 @@
         "non_urgent_echo_failure_toast": "Vaš poslužitelj ne odgovara na neke <a>zahtjeve</a>.",
         "resource_limits": "Ovaj je matični poslužitelj premašio jedno od svojih ograničenja resursa.",
         "session_restore": {
-            "clear_storage_button": "Ukloni pohranu i odjavi se",
-            "clear_storage_description": "Želite li se odjaviti i ukloniti ključeve za šifriranje?",
-            "description_1": "Došlo je do pogreške prilikom pokušaja vraćanja vaše prethodne sesije.",
+            "clear_storage_button": "Ukloni ovaj uređaj",
+            "clear_storage_description": "Želite li ukloniti ovaj uređaj i njegove ključeve za šifriranje?",
+            "description_1": "Došlo je do pogreške prilikom pokušaja vraćanja vaše sesije.",
             "description_2": "Ako ste prethodno upotrebljavali noviju inačicu %(brand)s, vaša sesija možda nije kompatibilna s ovom inačicom. Zatvorite ovaj prozor i vratite se na noviju inačicu.",
-            "description_3": "Brisanjem memorije preglednika možete riješiti problem, ali time ćete se odjaviti i sva će šifrirana povijest razgovora postati nečitljiva.",
+            "description_3": "Brisanjem pohrane preglednika možete riješiti problem, ali time ćete ukloniti ovaj uređaj i sva će šifrirana povijest razgovora postati nečitljiva.",
             "title": "Nije moguće vratiti sesiju"
         },
         "something_went_wrong": "Nešto je pošlo po zlu!",
-        "storage_evicted_description_1": "Nedostaju neki podatci o sesiji, uključujući šifrirane ključeve poruka. Odjavite se i prijavite kako biste to ispravili vraćanjem ključeva iz sigurnosne kopije.",
+        "storage_evicted_description_1": "Nedostaju neki podatci o sesiji, uključujući ključeve za šifriranje poruka. Uklonite ovaj uređaj i ponovno se prijavite kako biste to ispravili vraćanjem ključeva iz sigurnosne kopije.",
         "storage_evicted_description_2": "Vaš je preglednik vjerojatno uklonio ove podatke kada mu je ponestalo prostora na disku.",
         "storage_evicted_title": "Nedostaju podatci o sesiji",
         "sync": "Nije moguće povezivanje s matičnim poslužiteljem. U tijeku je ponovni pokušaj…",
@@ -1359,6 +1345,14 @@
         "impossible_dialog_title": "Integracije nisu dopuštene"
     },
     "invite": {
+        "confirm_unknown_users": {
+            "invite_subtitle": "Trenutačno nemate razgovora s ovim kontaktima. Potvrdite da ih želite pozvati u ovu sobu prije nego što nastavite.",
+            "invite_title": "Želite li pozvati nove kontakte u ovu sobu?",
+            "start_chat_subtitle_multiple_users": "Trenutačno nemate razgovora s ovim osobama. Potvrdite da ih želite pozvati prije nego što nastavite.",
+            "start_chat_subtitle_one_user": "Trenutačno nemate razgovora s ovom osobom. Potvrdite da je želite pozvati prije nego što nastavite.",
+            "start_chat_title_multiple_users": "Želite li započeti razgovor s ovim novim kontaktima?",
+            "start_chat_title_one_user": "Želite li započeti razgovor s ovim novim kontaktom?"
+        },
         "email_caption": "Pozovi e-poštom",
         "email_limit_one": "Pozivnice koje se šalju e-poštom mogu se slati samo jedna po jedna",
         "email_use_default_is": "Upotrebljavate poslužitelj identiteta za slanje pozivnica e-poštom. <default>Upotrijebite zadani (%(defaultIdentityServerName)s)</default> ili ga promijenite u odjeljku <settings>Postavke</settings>.",
@@ -1511,6 +1505,7 @@
         "bridge_state_manager": "Ovim mostom upravlja <user />.",
         "bridge_state_workspace": "Radni prostor: <networkLink/>",
         "click_for_info": "Kliknite za više informacija",
+        "config_only": "Može se omogućiti samo putem config.json.",
         "currently_experimental": "Trenutačno u eksperimentalnoj fazi.",
         "custom_themes": "Podrška za dodavanje prilagođenih tema",
         "dynamic_room_predecessors": "Dinamički prethodnici soba",
@@ -1524,8 +1519,17 @@
         "experimental_section": "Rani pregledi",
         "extended_profiles_msc_support": "Zahtijeva da vaš poslužitelj podržava MSC4133",
         "feature_disable_call_per_sender_encryption": "Onemogući šifriranje po pošiljatelju za Element Call",
+        "feature_retention": {
+            "description": "Automatski uklonite poruke iz sobe kada istekne konfigurirano razdoblje čuvanja. Trenutačno podržava samo postavke čitanja.",
+            "disabled_sliding_sync": "Čuvanje se ne može omogućiti kada je omogućen Sliding Sync.",
+            "display_name": "Čuvanje poruka"
+        },
+        "feature_user_status": {
+            "description": "Omogućuje pregled i postavljanje trenutačnog statusa.",
+            "display_name": "Status korisnika",
+            "required_msc_support": "Zahtijeva MSC4429 (ažuriranja profila za naslijeđeni Sync)"
+        },
         "feature_wysiwyg_composer_description": "Upotrebljavaj obogaćeni tekst umjesto Markdowna u sastavljaču poruka.",
-        "group_calls": "Novo iskustvo grupnih poziva",
         "group_developer": "Razvojni inženjer",
         "group_encryption": "Šifriranje",
         "group_experimental": "Eksperimentalno",
@@ -1540,7 +1544,6 @@
         "group_voip": "Glas i videozapis",
         "group_widgets": "Widgeti",
         "hidebold": "Sakrij indikator obavijesti (prikaži samo brojčane oznake)",
-        "html_topic": "Prikaži HTML prikaz tema soba",
         "join_beta": "Pridruži se beta inačici",
         "join_beta_reload": "Pridruživanjem beta inačici ponovno će se pokrenuti %(brand)s.",
         "jump_to_date": "Skoči na datum (dodaje zaglavlja /jumptodate i skok na datum)",
@@ -1550,23 +1553,22 @@
         "leave_beta_reload": "Napuštanjem beta inačice ponovno će se pokrenuti %(brand)s.",
         "location_share_live": "Dijeljenje lokacije uživo",
         "location_share_live_description": "Privremena implementacija. Lokacije ostaju u povijesti sobe.",
+        "login_with_qr": "Prijavi se pomoću QR koda",
         "mjolnir": "Novi načini ignoriranja osoba",
         "msc3531_hide_messages_pending_moderation": "Dopusti moderatorima da sakriju poruke koje čekaju moderiranje.",
-        "new_room_list": "Omogući novi popis soba",
         "notification_settings": "Nove postavke obavijesti",
         "notification_settings_beta_caption": "Predstavljamo jednostavniji način promjene postavki obavijesti. Prilagodite svoj %(brand)s tako da bude po vašoj mjeri.",
         "notification_settings_beta_title": "Postavke obavijesti",
         "notifications": "Omogući ploču s obavijestima u zaglavlju sobe",
         "render_reaction_images": "Prikaži prilagođene slike u reakcijama",
         "render_reaction_images_description": "Ponekad se nazivaju „prilagođeni emotikoni”",
-        "report_to_moderators": "Prijavi moderatorima",
-        "report_to_moderators_description": "U sobama koje podržavaju moderiranje gumb „Prijavi” omogućit će vam da moderatorima sobe prijavite svako neprimjereno ponašanje.",
         "sliding_sync": "Način rada Sliding Sync",
         "sliding_sync_description": "Značajka je u razvoju, ne može se onemogućiti. Trenutačno nije kompatibilna s Element Callom.",
-        "sliding_sync_disabled_notice": "Odjavite se i ponovno prijavite da biste onemogućili",
+        "sliding_sync_disabled_notice": "Ponovno se prijavite da biste onemogućili",
         "sliding_sync_server_no_support": "Vaš poslužitelj nema podršku",
-        "under_active_development": "Trenutačno je u razvoju.",
         "unrealiable_e2e": "Nepouzdano u šifriranim sobama",
+        "url_preview_bundle": "Paket za pretpregled URL-ova (MSC4095)",
+        "url_preview_bundle_description": "Pošaljite pretpreglede URL-ova u poruci uz sadržaj poruke",
         "video_rooms": "Videosobe",
         "video_rooms_a_new_way_to_chat": "Nov način razgovora putem glasa i videa u %(brand)s.",
         "video_rooms_always_on_voip_channels": "Videosobe su VoIP kanali koji su uvijek uključeni i ugrađeni u sobu u %(brand)s.",
@@ -1621,9 +1623,6 @@
         "room_rejoin_warning": "Ova soba nije javna. Nećete se moći ponovno pridružiti bez pozivnice.",
         "space_rejoin_warning": "Ovaj prostor nije javan. Nećete se moći ponovno pridružiti bez pozivnice."
     },
-    "left_panel": {
-        "open_dial_pad": "Otvori brojčanik"
-    },
     "lightbox": {
         "rotate_left": "Zakreni ulijevo",
         "rotate_right": "Zakreni udesno",
@@ -1720,10 +1719,9 @@
         "level_notification": "Obavijest",
         "level_unsent": "Nije poslano",
         "mark_all_read": "Označi sve kao pročitano",
-        "mentions_and_keywords": "@spominjanja i ključne riječi",
-        "mentions_and_keywords_description": "Primajte obavijesti samo o spominjanjima i ključnim riječima kako je postavljeno u vašim <a>postavkama</a>",
+        "mentions_and_keywords": "samo @spominjanja i odgovori",
+        "mentions_and_keywords_description": "Primajte obavijesti samo o spominjanjima, odgovorima i ključnim riječima kako je postavljeno u vašim <a>postavkama</a>",
         "mentions_keywords": "Spominjanja i ključne riječi",
-        "message_didnt_send": "Poruka nije poslana. Kliknite za informacije.",
         "mute_description": "Nećete primati nikakve obavijesti"
     },
     "notifier": {
@@ -1825,7 +1823,6 @@
     },
     "quick_settings": {
         "all_settings": "Sve postavke",
-        "metaspace_section": "Prikvači na bočnu traku",
         "sidebar_settings": "Više mogućnosti",
         "title": "Brze postavke"
     },
@@ -1841,27 +1838,18 @@
         "ongoing": "U tijeku je uklanjanje…",
         "reason_label": "Razlog (neobavezno)"
     },
+    "remove_section_dialog": {
+        "confirmation": "Sigurno želite ukloniti ovaj odjeljak?",
+        "description": "Razgovori u ovom odjeljku i dalje će biti dostupni na vašem popisu razgovora.",
+        "remove_section": "Ukloni odjeljak",
+        "title": "Želite li ukloniti odjeljak?"
+    },
     "report_content": {
         "description": "Prijavljivanjem ove poruke administratoru matičnog poslužitelja poslat će se njezin jedinstveni ID događaja. Ako su poruke u ovoj sobi šifrirane, administrator matičnog poslužitelja neće moći pročitati tekst poruke niti pregledati datoteke ili slike.",
-        "disagree": "Ne slažem se",
-        "error_create_room_moderation_bot": "Nije moguće izraditi sobu botom za moderiranje",
         "hide_messages_from_user": "Označite ako želite sakriti sve trenutačne i buduće poruke od ovog korisnika.",
         "ignore_user": "Ignoriraj korisnika",
-        "illegal_content": "Nezakonit sadržaj",
         "missing_reason": "Navedite razlog prijave.",
-        "nature": "Odaberite sadržaj poruke i objasnite zašto je uvredljiva.",
-        "nature_disagreement": "Ono što ovaj korisnik piše nije u redu.\nTo će se prijaviti moderatorima sobe.",
-        "nature_illegal": "Ovaj korisnik se ponaša nezakonito, npr. otkriva osobne podatke drugih korisnika ili prijeti nasiljem.\nTo će se prijaviti moderatorima sobe, koji taj slučaj mogu prijaviti nadležnim organima.",
-        "nature_nonstandard_admin": "Ova je soba namijenjena nezakonitom ili neprimjerenom sadržaju ili moderatori ne moderiraju nezakonit ili neprimjeren sadržaj.\nTo će se prijaviti administratorima poslužitelja %(homeserver)s.",
-        "nature_nonstandard_admin_encrypted": "Ova je soba namijenjena nezakonitom ili neprimjerenom sadržaju ili moderatori ne moderiraju nezakonit ili neprimjeren sadržaj.\nTo će se prijaviti administratorima poslužitelja %(homeserver)s. Administratori NEĆE moći čitati šifrirani sadržaj ove sobe.",
-        "nature_other": "Bilo koji drugi razlog. Opišite problem.\nTo će se prijaviti moderatorima sobe.",
-        "nature_spam": "Ovaj korisnik zasipa sobu oglasima, poveznicama na oglase ili propagandom.\nTo će se prijaviti moderatorima sobe.",
-        "nature_toxic": "Ovaj se korisnik neprimjereno ponaša, na primjer vrijeđa druge korisnike ili dijeli sadržaj za odrasle u sobi prihvatljivoj za obitelji ili na drugi način krši pravila ove sobe.\nTo će se prijaviti moderatorima sobe.",
-        "other_label": "Ostalo",
-        "report_content_to_homeserver": "Prijavite sadržaj administratoru matičnog poslužitelja",
-        "report_entire_room": "Prijavi cijelu sobu",
-        "spam_or_propaganda": "Neželjeni sadržaj ili propaganda",
-        "toxic_behaviour": "Neprimjereno ponašanje"
+        "report_content_to_homeserver": "Prijavite sadržaj administratoru matičnog poslužitelja"
     },
     "report_room": {
         "description": "Prijavite ovu sobu svom davatelju usluga računa. Ako su poruke šifrirane, administrator ih neće moći pročitati.",
@@ -1998,6 +1986,7 @@
         "error_join_incompatible_version_1": "Žao nam je, vaš je matični poslužitelj prestar da bi ovdje sudjelovao.",
         "error_join_incompatible_version_2": "Kontaktirajte s administratorom svog matičnog poslužitelja.",
         "error_join_title": "Pridruživanje nije uspjelo",
+        "error_join_unknown": "Došlo je do nepoznate pogreške.",
         "error_jump_to_date": "Poslužitelj je prikazao %(statusCode)s s kodom pogreške %(errorCode)s",
         "error_jump_to_date_connection": "Došlo je do mrežne pogreške prilikom pokušaja pronalaženja zadanog datuma i prelaska na njega. Vaš matični poslužitelj možda ne radi ili je samo došlo do kratkog prekida internetske veze. Pokušajte ponovno. Ako se ovo ponovi, obratite se administratoru svog matičnog poslužitelja.",
         "error_jump_to_date_details": "Pojedinosti o pogrešci",
@@ -2028,7 +2017,9 @@
                 "few": "%(count)s osobe traže da se pridruže",
                 "other": "%(count)s osoba traži da se pridruži"
             },
-            "room_is_public": "Ova je soba javna"
+            "room_is_public": "Ova je soba javna",
+            "shared_history_tooltip": "Novi članovi vide povijest",
+            "world_readable_history_tooltip": "Svatko može vidjeti povijest"
         },
         "header_avatar_open_settings_label": "Otvori postavke sobe",
         "header_face_pile_tooltip": "Osobe",
@@ -2145,44 +2136,21 @@
         "waiting_for_join_title": "Čeka se da se korisnici pridruže %(brand)s"
     },
     "room_list": {
-        "add_room_label": "Dodaj sobu",
         "add_space_label": "Dodaj prostor",
-        "breadcrumbs_empty": "Nema nedavno posjećenih soba",
-        "breadcrumbs_label": "Nedavno posjećene sobe",
         "failed_add_tag": "Nije uspjelo dodavanje oznake %(tagName)s na sobu",
         "failed_remove_tag": "Nije uspjelo uklanjanje oznake %(tagName)s sa sobe",
         "failed_set_dm_tag": "Nije uspjelo postavljanje oznake za izravnu poruku",
-        "home_menu_label": "Mogućnosti početne stranice",
-        "join_public_room_label": "Pridruži se javnoj sobi",
-        "joining_rooms_status": {
-            "one": "Trenutačno se pridružuje %(count)s sobi",
-            "few": "Trenutačno se pridružuje %(count)s sobe",
-            "other": "Trenutačno se pridružuje %(count)s soba"
-        },
         "list_title": "Popis soba",
         "more_options": {
             "leave_room": "Napusti sobu"
         },
         "notification_options": "Mogućnosti obavijesti",
-        "redacting_messages_status": {
-            "one": "Trenutačno se uklanjaju poruke u %(count)s sobi",
-            "few": "Trenutačno se uklanjaju poruke u %(count)s sobe",
-            "other": "Trenutačno se uklanjaju poruke u %(count)s soba"
+        "section": {
+            "chats": "Razgovori",
+            "favourites": "Favoriti",
+            "low_priority": "Niski prioritet"
         },
-        "show_less": "Prikaži manje",
-        "show_n_more": {
-            "one": "Prikaži još %(count)s",
-            "few": "Prikaži još %(count)s",
-            "other": "Prikaži još %(count)s"
-        },
-        "show_previews": "Prikaži preglede poruka",
-        "sort_by": "Poredaj po",
-        "sort_by_activity": "Aktivnost",
-        "sort_by_alphabet": "A – Z",
-        "sort_unread_first": "Prvo prikaži sobe s nepročitanim porukama",
-        "space_menu_label": "Izbornik za %(spaceName)s",
-        "sublist_options": "Mogućnosti popisa",
-        "suggested_rooms_heading": "Predložene sobe"
+        "show_less": "Prikaži manje"
     },
     "room_settings": {
         "access": {
@@ -2361,36 +2329,37 @@
             "history_visibility_legend": "Tko može čitati povijest?",
             "history_visibility_shared": "Članovi (cjelokupna povijest)",
             "history_visibility_warning": "Promjene neće utjecati na prethodne poruke, samo na nove. <a>Saznajte više</a>",
-            "history_visibility_world_readable": "Svatko (povijest je javna)\n",
+            "history_visibility_world_readable": "Svatko (povijest je javna)",
             "join_rule_description": "Odlučite tko se može pridružiti sobi %(roomName)s.",
-            "join_rule_invite": "Privatno (samo uz pozivnicu)",
+            "join_rule_invite": "Samo s pozivnicom",
             "join_rule_invite_description": "Samo pozvane osobe mogu se pridružiti.",
             "join_rule_knock": "Zatraži pridruživanje",
             "join_rule_knock_description": "Osobe se ne mogu pridružiti osim ako im nije odobren pristup.",
-            "join_rule_public_description": "Svatko može pronaći i pridružiti se.",
+            "join_rule_public": "Bilo tko",
+            "join_rule_public_description": "Svatko se može pridružiti.",
             "join_rule_restricted": "Članovi prostora",
-            "join_rule_restricted_description": "Svatko u prostoru može pronaći i pridružiti se. <a>Uredite kojim je prostorima ovdje omogućen pristup.</a>",
-            "join_rule_restricted_description_active_space": "Svatko u <spaceName/> možete pronaći i pridružiti se. Možete odabrati i druge prostore.",
-            "join_rule_restricted_description_prompt": "Svatko u prostoru može pronaći i pridružiti se. Možete odabrati više prostora.",
-            "join_rule_restricted_description_spaces": "Prostori s pristupom",
-            "join_rule_restricted_dialog_description": "Odlučite koji prostori mogu pristupiti ovoj sobi. Ako se prostor odabere, njegovi članovi mogu ga pronaći i pridružiti se sobi <RoomName/>.",
-            "join_rule_restricted_dialog_empty_warning": "Uklonit ćete sve prostore. Pristup će zadano biti samo uz pozivnicu",
+            "join_rule_restricted_description": "Svatko u ovlaštenim prostorima može se pridružiti bez pozivnice. <a>Upravljanje prostorom</a>",
+            "join_rule_restricted_description_active_space": "Svatko u prostoru <spaceName/> može se pridružiti.",
+            "join_rule_restricted_description_prompt": "Svatko u prostoru može se pridružiti.",
+            "join_rule_restricted_description_spaces": "Ovlašteni prostori",
+            "join_rule_restricted_dialog_description": "Prostori u kojima se članovi mogu pridružiti sobi <RoomName/> bez pozivnice.",
+            "join_rule_restricted_dialog_empty_warning": "Uklonit ćete sve ovlaštene prostore. Pristup će zadano biti samo uz pozivnicu",
             "join_rule_restricted_dialog_filter_placeholder": "Pretraži prostore",
-            "join_rule_restricted_dialog_heading_known": "Drugi prostori koje poznajete",
-            "join_rule_restricted_dialog_heading_other": "Drugi prostori ili sobe koje možda ne poznajete",
-            "join_rule_restricted_dialog_heading_room": "Prostori koje poznajete, a koji sadrže ovu sobu",
+            "join_rule_restricted_dialog_heading_known": "Vaši prostori koji ne sadrže ovu sobu",
+            "join_rule_restricted_dialog_heading_other": "Drugi prostori kojih niste član",
+            "join_rule_restricted_dialog_heading_room": "Vaši prostori koji sadrže ovu sobu",
             "join_rule_restricted_dialog_heading_space": "Prostori koje poznajete, a koji sadrže ovaj prostor",
             "join_rule_restricted_dialog_heading_unknown": "Odnosi se vjerojatno na one u kojima sudjeluju i drugi administratori soba.",
-            "join_rule_restricted_dialog_title": "Odaberi prostore",
+            "join_rule_restricted_dialog_title": "Upravljaj prostorima",
             "join_rule_restricted_n_more": {
                 "one": "i još %(count)s",
                 "few": "i još %(count)s",
                 "other": "i još %(count)s"
             },
             "join_rule_restricted_summary": {
-                "one": "Trenutačno prostor ima pristup",
-                "few": "Trenutačno %(count)s prostora imaju pristup",
-                "other": "Trenutačno %(count)s prostora ima pristup"
+                "one": "Trenutačno je jedan prostor ovlašten",
+                "few": "Trenutačno su %(count)s prostora ovlaštena",
+                "other": "Trenutačno je %(count)s prostora ovlašteno"
             },
             "join_rule_restricted_upgrade_description": "Ova će nadogradnja omogućiti članovima odabranih prostora pristup ovoj sobi bez pozivnice.",
             "join_rule_restricted_upgrade_warning": "Ova se soba nalazi u nekim prostorima čiji niste administrator. U tim će se prostorima i dalje prikazivati ​​stara soba, ali će se od osoba tražiti da se pridruže novoj.",
@@ -2418,17 +2387,17 @@
         "upload_avatar_label": "Prenesi avatar",
         "visibility": {
             "alias_section": "Adresa",
-            "error_failed_save": "Nije uspjelo ažuriranje vidljivosti ovog prostora",
+            "error_failed_save": "Nije uspjelo ažuriranje postavki ovog prostora",
             "error_update_guest_access": "Nije uspjelo ažuriranje pristupa za goste ovog prostora",
             "error_update_history_visibility": "Nije uspjelo ažuriranje povijesti vidljivosti ovog prostora",
             "guest_access_disabled": "Nemate dopuštenje za promjenu pristupa za goste.",
             "guest_access_explainer": "Gosti se mogu pridružiti prostoru bez računa. To može biti korisno za javne prostore.",
             "guest_access_label": "Omogući pristup gostima",
-            "history_visibility_anyone_space": "Pregled prostora",
+            "history_visibility_anyone_space": "Pretpregled prostora",
             "history_visibility_anyone_space_description": "Omogućite osobama da pregledaju vaš prostor prije nego što se pridruže.",
             "history_visibility_anyone_space_disabled": "Nemate dopuštenje za promjenu vidljivosti povijesti.",
             "history_visibility_anyone_space_recommendation": "Preporučuje se za javne prostore.",
-            "title": "Vidljivost"
+            "title": "Sigurnost i privatnost"
         },
         "voip": {
             "call_type_section": "Vrsta poziva",
@@ -2479,7 +2448,8 @@
         "warning_kind_files": "Ova inačica %(brand)s ne podržava pregled nekih šifriranih datoteka",
         "warning_kind_files_app": "Upotrijebite <a>aplikaciju za stolna računala</a> kako biste vidjeli sve šifrirane datoteke",
         "warning_kind_search": "Ova inačica %(brand)s ne podržava pretraživanje šifriranih poruka",
-        "warning_kind_search_app": "Upotrijebite <a>aplikaciju za stolna računala</a> kako biste pretražili šifrirane poruke"
+        "warning_kind_search_app": "Upotrijebite <a>aplikaciju za stolna računala</a> kako biste pretražili šifrirane poruke",
+        "warning_kind_search_partial": "Rezultati mogu biti nepotpuni jer se vaš indeks pretraživanja još uvijek izrađuje."
     },
     "setting": {
         "help_about": {
@@ -2546,10 +2516,10 @@
                 "breadcrumb_page": "Poništi šifriranje",
                 "breadcrumb_second_description": "Izgubit ćete svu povijest poruka koja je pohranjena samo na poslužitelju",
                 "breadcrumb_third_description": "Morat ćete ponovno potvrditi sve svoje postojeće uređaje i kontakte",
-                "breadcrumb_title": "Jeste li sigurni da želite poništiti svoj identitet?",
-                "breadcrumb_title_cant_confirm": "Morate poništiti svoj identitet",
-                "breadcrumb_title_forgot": "Zaboravili ste ključ za oporavak? Morat ćete poništiti svoj identitet.",
-                "breadcrumb_title_sync_failed": "Sinkronizacija pohrane ključeva nije uspjela. Morate poništiti svoj identitet.",
+                "breadcrumb_title": "Sigurno želite poništiti svoj digitalni identitet?",
+                "breadcrumb_title_cant_confirm": "Morate poništiti svoj digitalni identitet",
+                "breadcrumb_title_forgot": "Zaboravili ste ključ za oporavak? Morat ćete poništiti svoj digitalni identitet.",
+                "breadcrumb_title_sync_failed": "Sinkronizacija pohrane ključeva nije uspjela. Trebate poništiti svoj digitalni identitet.",
                 "breadcrumb_warning": "Učinite to samo ako smatrate da je vaš račun kompromitiran.",
                 "details_title": "Pojedinosti o šifriranju",
                 "do_not_close_warning": "Ne zatvarajte ovaj prozor dok se poništavanje promjena ne dovrši",
@@ -2565,13 +2535,13 @@
                 "title": "Napredno"
             },
             "confirm_key_storage_off": "Jeste li sigurni da želite da pohrana ključeva ostane isključena?",
-            "confirm_key_storage_off_description": "Ako se odjavite sa svih svojih uređaja, izgubit ćete povijest poruka i morat ćete ponovno potvrditi sve postojeće kontakte. <a>Saznajte više</a>",
+            "confirm_key_storage_off_description": "Ako uklonite sve svoje uređaje, izgubit ćete povijest poruka i trebat ćete ponovno potvrditi sve svoje postojeće kontakte. <a>Saznajte više</a>",
             "delete_key_storage": {
                 "breadcrumb_page": "Brisanje pohrane ključeva",
                 "confirm": "Brisanje pohrane ključeva",
                 "description": "Brisanjem pohrane ključeva uklonit ćete svoj kriptografski identitet i ključeve poruka s poslužitelja te isključiti sljedeće sigurnosne značajke:",
                 "list_first": "Na novim uređajima nećete imati šifriranu povijest poruka",
-                "list_second": "Ako se svugdje odjavite iz %(brand)s, izgubit ćete pristup svojim šifriranim porukama.",
+                "list_second": "Izgubit ćete pristup svojim šifriranim porukama ako niste prijavljeni ni na jedan uređaj",
                 "title": "Jeste li sigurni da želite isključiti pohranu ključeva i izbrisati je?"
             },
             "device_not_verified_button": "Potvrdi ovaj uređaj",
@@ -2580,7 +2550,7 @@
             "dialog_title": "<strong>Postavke:</strong> Šifriranje",
             "key_storage": {
                 "allow_key_storage": "Dopusti pohranu ključeva",
-                "description": "Sigurno pohranite svoj identitet šifriranja i ključeve poruka na poslužitelju. To će vam omogućiti pregled povijesti poruka na svim novim uređajima. <a>Saznajte više</a>",
+                "description": "To će vam omogućiti pregled povijesti razgovora na svakom novom uređaju i potrebno je za sigurnosno kopiranje razgovora i digitalnog identiteta. <a>Saznajte više</a>",
                 "title": "Pohrana ključeva"
             },
             "recovery": {
@@ -2590,14 +2560,14 @@
                 "change_recovery_key": "Promjena ključa za oporavak",
                 "change_recovery_key_description": "Zapišite ovaj novi ključ za oporavak i čuvajte na sigurnom mjestu. Zatim kliknite gumb za nastavak kako biste potvrdili promjenu.",
                 "change_recovery_key_title": "Želite li promijeniti ključ za oporavak?",
-                "description": "Ako ste izgubili sve postojeće uređaje, oporavite svoj kriptografski identitet i povijest poruka pomoću ključa za oporavak.",
+                "description": "Vaši se razgovori automatski sigurnosno kopiraju sveobuhvatnim šifriranjem. Kako biste vratili ovu sigurnosnu kopiju i zadržali svoj digitalni identitet kada izgubite pristup svim svojim uređajima, trebat će vam ključ za oporavak.",
                 "enter_key_error": "Ključ za oporavak koji ste unijeli nije ispravan.",
                 "enter_recovery_key": "Unesi ključ za oporavak",
                 "forgot_recovery_key": "Zaboravili ste ključ za oporavak?",
                 "key_storage_warning": "Vaša pohrana ključeva nije sinkronizirana. Kliknite jedan od donjih gumba da biste riješili problem.",
                 "save_key_description": "Ne dijelite ovo ni s kim!",
                 "save_key_title": "Ključ za oporavak",
-                "set_up_recovery": "Postavljanje oporavka",
+                "set_up_recovery": "Nabavite ključ za oporavak",
                 "set_up_recovery_confirm_button": "Završi postavljanje",
                 "set_up_recovery_confirm_description": "Unesite ključ za oporavak prikazan na prethodnom zaslonu kako biste dovršili postavljanje oporavka.",
                 "set_up_recovery_confirm_title": "Unesite svoj ključ za oporavak kako biste potvrdili",
@@ -2605,7 +2575,7 @@
                 "set_up_recovery_save_key_description": "Zapišite ovaj ključ za oporavak i čuvajte ga na sigurnom mjestu, poput upravitelja zaporki, šifrirane bilješke ili fizičkog sefa.",
                 "set_up_recovery_save_key_title": "Spremite svoj ključ za oporavak na sigurno mjesto",
                 "set_up_recovery_secondary_description": "Nakon što kliknete gumb za nastavak, generirat ćemo vam ključ za oporavak.",
-                "title": "Oporavak"
+                "title": "Sigurnosna kopija"
             },
             "title": "Šifriranje"
         },
@@ -2698,7 +2668,8 @@
             "unable_to_load_msisdns": "Nije moguće učitati telefonske brojeve",
             "username": "Korisničko ime"
         },
-        "inline_url_previews_default": "Zadano omogući umetnute pretpreglede URL-ova",
+        "inline_url_previews_default": "Omogući pretpreglede",
+        "inline_url_previews_encrypted": "Omogući pretpreglede u šifriranim sobama",
         "insert_trailing_colon_mentions": "Umetni dvotočku nakon što spominjanja korisnika na početku poruke",
         "invite_controls": {
             "default_label": "Dopustite korisnicima da vas pozovu u sobe"
@@ -2809,13 +2780,13 @@
             "room_activity": "Pojavljuju se nove aktivnosti u sobi, nadogradnje i poruke o statusu",
             "rule_call": "Pozivnica za poziv",
             "rule_contains_display_name": "Poruke koje sadrže moje ime za prikaz",
-            "rule_contains_user_name": "Poruke koje sadrže moje korisničko ime",
+            "rule_contains_user_name": "@spominjanja i odgovori",
             "rule_encrypted": "Šifrirane poruke u grupnim razgovorima",
             "rule_encrypted_room_one_to_one": "Šifrirane poruke u razgovorima jedan na jedan",
             "rule_invite_for_me": "Kad me pozovu u sobu",
             "rule_message": "Poruke u grupnim razgovorima",
             "rule_room_one_to_one": "Poruke u razgovorima jedan na jedan",
-            "rule_roomnotif": "Poruke koje sadrže @soba",
+            "rule_roomnotif": "@spominjanja u sobi",
             "rule_suppress_notices": "Poruke koje je poslao bot",
             "rule_tombstone": "Kada se sobe nadograde",
             "show_message_desktop_notification": "Prikaži poruku u obavijestima na radnoj površini",
@@ -2836,6 +2807,8 @@
             "enable_tray_icon": "Prikaži ikonu u traci sustava i minimiziraj prozor na nju prilikom zatvaranja",
             "keyboard_heading": "Prečaci na tipkovnici",
             "keyboard_view_shortcuts_button": "Za pregled svih prečaca na tipkovnici <a>kliknite ovdje</a>.",
+            "link_previews_description": "Prikazuje informacije o poveznicama ispod poruka",
+            "link_previews_heading": "Pretpregledi poveznica",
             "media_heading": "Slike, GIF-ovi i videozapisi",
             "presence_description": "Podijelite svoju aktivnost i status s drugima.",
             "publish_timezone": "Objavi vremensku zonu na javnom profilu",
@@ -2894,32 +2867,31 @@
         "send_read_receipts_unsupported": "Vaš poslužitelj ne podržava onemogućavanje slanja potvrde o čitanju.",
         "send_typing_notifications": "Pošalji obavijesti o tipkanju",
         "sessions": {
-            "best_security_note": "Za najveću sigurnost provjerite svoje sesije i odjavite se iz bilo koje sesije koju više ne prepoznajete ili je ne upotrebljavate.",
-            "browser": "Preglednik",
+            "best_security_note": "Za najveću sigurnost provjerite svoje sesije i uklonite bilo koju sesiju koju više ne prepoznajete ili upotrebljavate.",
             "confirm_sign_out": {
-                "one": "Potvrdite odjavu s ovog uređaja",
-                "few": "Potvrdite odjavu s ovih uređaja",
-                "other": "Potvrdite odjavu s ovih uređaja"
+                "one": "Potvrdite uklanjanje ovog uređaja",
+                "few": "Potvrdite uklanjanje ovih uređaja",
+                "other": "Potvrdite uklanjanje ovih uređaja"
             },
             "confirm_sign_out_body": {
-                "one": "Kliknite ispod navedeni gumb kako biste potvrdili odjavu s ovog uređaja.",
-                "few": "Kliknite ispod navedeni gumb kako biste potvrdili odjavu s ovih uređaja.",
-                "other": "Kliknite ispod navedeni gumb kako biste potvrdili odjavu s ovih uređaja."
+                "one": "Kliknite ispod navedeni gumb kako biste potvrdili uklanjanje ovog uređaja.",
+                "few": "Kliknite ispod navedeni gumb kako biste potvrdili uklanjanje ovih uređaja.",
+                "other": "Kliknite ispod navedeni gumb kako biste potvrdili uklanjanje ovih uređaja."
             },
             "confirm_sign_out_continue": {
-                "one": "Odjava s uređaja",
-                "few": "Odjava s uređaja",
-                "other": "Odjava s uređaja"
+                "one": "Ukloni uređaj",
+                "few": "Ukloni uređaje",
+                "other": "Ukloni uređaje"
             },
             "confirm_sign_out_sso": {
-                "one": "Potvrdite odjavu s ovog uređaja koristeći jedinstvenu prijavu (SSO) kako biste dokazali svoj identitet.",
-                "few": "Potvrdite odjavu s ovih uređaja koristeći jedinstvenu prijavu (SSO) kako biste dokazali svoj identitet.",
-                "other": "Potvrdite odjavu s ovih uređaja koristeći jedinstvenu prijavu (SSO) kako biste dokazali svoj identitet."
+                "one": "Potvrdite uklanjanje ovog uređaja koristeći jedinstvenu prijavu (SSO) kako biste dokazali svoj identitet.",
+                "few": "Potvrdite uklanjanje ovih uređaja koristeći jedinstvenu prijavu (SSO) kako biste dokazali svoj identitet.",
+                "other": "Potvrdite uklanjanje ovih uređaja koristeći jedinstvenu prijavu (SSO) kako biste dokazali svoj identitet."
             },
             "current_session": "Trenutačna sesija",
             "desktop_session": "Sesija na stolnom računalu",
             "details_heading": "Pojedinosti o sesiji",
-            "device_unverified_description": "Kako biste postigli najveću sigurnost i pouzdanost, potvrdite ovu sesiju ili se odjavite iz nje.",
+            "device_unverified_description": "Kako biste postigli najveću sigurnost i pouzdanost, potvrdite ili uklonite ovu sesiju.",
             "device_unverified_description_current": "Potvrdite svoju trenutačnu sesiju kako bi se poboljšala sigurna razmjena poruka.",
             "device_verified_description": "Ova sesija spremna je za sigurnu razmjenu poruka.",
             "device_verified_description_current": "Vaša trenutačna sesija spremna je za sigurnu razmjenu poruka.",
@@ -2937,7 +2909,7 @@
             "inactive_sessions": "Neaktivne sesije",
             "inactive_sessions_explainer_1": "Neaktivne sesije su one koje niste upotrebljavali neko vrijeme, ali i dalje primaju ključeve za šifriranje.",
             "inactive_sessions_explainer_2": "Uklanjanje neaktivnih sesija poboljšava sigurnost i performanse te vam olakšava da prepoznate je li nova sesija sumnjiva.",
-            "inactive_sessions_list_description": "Razmislite o odjavi sa starih sesija (%(inactiveAgeDays)s dana ili starije) koje više ne upotrebljavate.",
+            "inactive_sessions_list_description": "Razmislite o uklanjanju starih sesija (%(inactiveAgeDays)s dana ili starije) koje više ne upotrebljavate.",
             "ip": "IP adresa",
             "last_activity": "Posljednja aktivnost",
             "manage": "Upravljaj ovom sesijom",
@@ -2951,7 +2923,6 @@
             "no_sessions": "Nije pronađena nijedna sesija.",
             "no_unverified_sessions": "Nema nepotvrđenih sesija.",
             "no_verified_sessions": "Nema potvrđenih sesija.",
-            "os": "Operativni sustav",
             "other_sessions_heading": "Ostale sesije",
             "push_heading": "Push obavijesti",
             "push_subheading": "Primajte push obavijesti za ovu sesiju",
@@ -2969,17 +2940,17 @@
             "sign_in_with_qr_button": "Prikaži QR kod",
             "sign_in_with_qr_description": "Upotrijebite QR kod za prijavu na drugi uređaj i postavljanje sigurne razmjene poruka.",
             "sign_in_with_qr_unsupported": "Ne podržava davatelj usluge računa",
-            "sign_out": "Odjavi se iz ove sesije",
-            "sign_out_all_other_sessions": "Odjavi se iz svih ostalih sesija (%(otherSessionsCount)s)",
+            "sign_out": "Ukloni ovu sesiju",
+            "sign_out_all_other_sessions": "Ukloni sve ostale sesije (%(otherSessionsCount)s)",
             "sign_out_confirm_description": {
-                "one": "Jeste li sigurni da se želite odjaviti iz %(count)s sesije?",
-                "few": "Jeste li sigurni da se želite odjaviti iz %(count)s sesije?",
-                "other": "Jeste li sigurni da se želite odjaviti iz %(count)s sesija?"
+                "one": "Sigurno želite ukloniti %(count)s sesiju?",
+                "few": "Sigurno želite ukloniti %(count)s sesije?",
+                "other": "Sigurno želite ukloniti %(count)s sesija?"
             },
             "sign_out_n_sessions": {
-                "one": "Odjava iz %(count)s sesije",
-                "few": "Odjava iz %(count)s sesije",
-                "other": "Odjava iz %(count)s sesija"
+                "one": "Ukloni %(count)s sesiju",
+                "few": "Ukloni %(count)s sesije",
+                "other": "Ukloni %(count)s sesija"
             },
             "title": "Sesije",
             "unknown_session": "Nepoznata vrsta sesije",
@@ -2988,15 +2959,15 @@
             "unverified_session_explainer_2": "Nećete moći sudjelovati u sobama u kojima je omogućeno šifriranje dok upotrebljavate ovu sesiju.",
             "unverified_session_explainer_3": "Za najbolju sigurnost i privatnost preporučuje se korištenje Matrixovih klijenata koji podržavaju šifriranje.",
             "unverified_sessions": "Nepotvrđene sesije",
-            "unverified_sessions_explainer_1": "Nepotvrđene sesije su one u kojima ste prijavljeni s vašim vjerodajnicama, ali nisu provjerene među uređajima.",
+            "unverified_sessions_explainer_1": "Nepotvrđene sesije su one u kojima ste prijavljeni sa svojim vjerodajnicama, ali koje nisu potvrđene vašim digitalnim identitetom.",
             "unverified_sessions_explainer_2": "Posebno biste trebali biti sigurni da prepoznajete ove sesije jer bi mogle predstavljati neovlaštenu upotrebu vašeg računa.",
-            "unverified_sessions_list_description": "Potvrdite svoje sesije kako biste poboljšali sigurnu razmjenu poruka ili se odjavite s onih koje više ne prepoznajete ili ne upotrebljavate.",
+            "unverified_sessions_list_description": "Potvrdite svoje sesije kako biste poboljšali sigurnu razmjenu poruka ili uklonite one koje više ne prepoznajete ili ne upotrebljavate.",
             "url": "URL",
             "verified_session": "Potvrđena sesija",
             "verified_sessions": "Potvrđene sesije",
-            "verified_sessions_explainer_1": "Potvrđene sesije su sva mjesta na kojima upotrebljavate ovaj račun nakon unosa zaporke ili potvrde identiteta drugom potvrđenom sesijom.",
+            "verified_sessions_explainer_1": "Potvrđene sesije potvrdile su vaš digitalni identitet.",
             "verified_sessions_explainer_2": "To znači da imate sve ključeve potrebne za otključavanje šifriranih poruka i potvrđujete drugim korisnicima da vjerujete ovoj sesiji.",
-            "verified_sessions_list_description": "Kako biste postigli najveću sigurnost, odjavite se iz svake sesije koju više ne prepoznajete ili ne upotrebljavate.",
+            "verified_sessions_list_description": "Kako biste postigli najveću sigurnost, uklonite svaku sesiju koju više ne prepoznajete ili ne upotrebljavate.",
             "verify_session": "Potvrdi sesiju",
             "web_session": "Mrežna sesija"
         },
@@ -3009,18 +2980,17 @@
         "show_nsfw_content": "Prikaži neprimjeren sadržaj",
         "show_read_receipts": "Prikaži potvrde o čitanju koje su poslali drugi korisnici",
         "show_redaction_placeholder": "Prikaži zamjenski tekst za uklonjene poruke",
+        "show_sections": "Prikaži odjeljke",
         "show_stickers_button": "Gumb za prikaz naljepnica",
         "show_typing_notifications": "Prikaži obavijesti o tipkanju",
         "showbold": "Prikaži sve aktivnosti na popisu soba (točke ili broj nepročitanih poruka)",
         "sidebar": {
             "dialog_title": "<strong>Postavke:</strong> Bočna traka",
-            "metaspaces_favourites_description": "Grupirajte sve svoje omiljene sobe i osobe na jednom mjestu.",
             "metaspaces_home_all_rooms": "Prikaži sve sobe",
             "metaspaces_home_all_rooms_description": "Prikažite sve svoje sobe na početnoj stranici, čak i ako se nalaze u prostoru.",
             "metaspaces_home_description": "Početna stranica je korisna jer vam omogućuje pregled svih aktivnosti.",
             "metaspaces_orphans": "Sobe izvan prostora",
             "metaspaces_orphans_description": "Grupirajte sve sobe koje nisu dio prostora na jednom mjestu.",
-            "metaspaces_people_description": "Grupirajte sve osobe na jednom mjestu.",
             "metaspaces_subsection": "Prostori za prikaz",
             "metaspaces_video_rooms": "Videosobe i konferencijski pozivi",
             "metaspaces_video_rooms_description": "Grupirajte sve privatne videosobe i konferencijske pozive.",
@@ -3047,19 +3017,25 @@
             "audio_output": "Izlaz zvuka",
             "audio_output_empty": "Nisu otkriveni izlazi zvuka",
             "auto_gain_control": "Automatska kontrola pojačanja",
-            "connection_section": "Veza",
             "dialog_title": "<strong>Postavke:</strong> Glas i videozapis",
             "echo_cancellation": "Poništavanje jeke",
+            "echo_cancellation_description": "Uklanja jeku iz mikrofona tijekom poziva. Ova postavka vrijedi i za Element Call.",
             "enable_fallback_ice_server": "Dopusti pričuvni poslužitelj za pomoć pri pozivu (%(server)s)",
             "enable_fallback_ice_server_description": "Primjenjuje se samo ako vaš matični poslužitelj ne nudi jednu. Vaša IP adresa bi se dijelila tijekom poziva.",
+            "enable_legacy_calls": "Omogući naslijeđene glasovne pozive / videopozive",
+            "enable_legacy_calls_description": "Vrijedi za Jitsi i WebRTC pozive jedan na jedan",
             "mirror_local_feed": "Zrcali lokalni videoprikaz",
-            "missing_permissions_prompt": "Nedostaju dopuštenja za medije; kliknite ispod navedeni gumb kako biste ih zatražili.",
+            "missing_permissions_prompt": "Kako biste mogli sudjelovati u pozivima, dajte %(brand)s dopuštenje za pristup vašem audiouređaju i videouređaju.",
             "noise_suppression": "Prigušivanje buke",
-            "request_permissions": "Zatraži dopuštenja za medije",
+            "noise_suppression_description": "Smanjuje pozadinsku buku u mikrofonu tijekom poziva. Ova postavka vrijedi i za Element Call.",
+            "permissions": "Dopusti pristup mikrofonu i kameri",
+            "request_permissions": "Zahtjev",
             "title": "Glas i videozapis",
             "video_input_empty": "Nije otkrivena nijedna mrežna kamera",
             "video_section": "Postavke videozapisa",
             "voice_agc": "Automatski podesi glasnoću mikrofona",
+            "voice_input_description": "Ovdje konfigurirani audioulaz upotrebljava se za glasovne poruke i pozive (naslijeđene / jedan na jedan).",
+            "voice_input_section": "Audioulaz",
             "voice_processing": "Obrada glasa",
             "voice_section": "Postavke glasa"
         },
@@ -3141,6 +3117,14 @@
         "server_error_detail": "Poslužitelj nije dostupan, preopterećen je ili je nešto drugo pošlo po zlu.",
         "shrug": "Dodaje ¯\\_(ツ)_/¯ na početak poruke s običnim tekstom",
         "spoiler": "Šalje zadanu poruku kao spojler",
+        "status": {
+            "description": "Postavi svoj trenutačni status",
+            "no_args": "Nisu navedeni argumenti. Trebali biste navesti emoji i opcijsku tekstnu komponentu.",
+            "no_emoji": "Niste naveli emoji",
+            "no_text": "Niste naveli nikakav tekst statusa",
+            "too_long_emoji": "Prvi argument mora biti emoji",
+            "too_long_text": "Tekst koji ste naveli bio je predugačak."
+        },
         "tableflip": "Dodaje (╯°□°）╯︵ ┻━┻ na početak poruke s običnim tekstom",
         "topic": "Dohvaća ili postavlja temu sobe",
         "topic_none": "Ova soba nema temu.",
@@ -3163,7 +3147,7 @@
         "view": "Pregledava sobu s navedenom adresom",
         "whois": "Prikazuje informacije o korisniku"
     },
-    "sliding_sync_legacy_no_longer_supported": "Klasični sliding sync više nije podržan: odjavite se i ponovno prijavite kako biste omogućili novu sliding sync oznaku",
+    "sliding_sync_legacy_no_longer_supported": "Naslijeđeni sliding sync više nije podržan: ponovno se prijavite kako biste omogućili novu sliding sync oznaku",
     "space": {
         "add_existing_room_space": {
             "create": "Želite li umjesto toga dodati novu sobu?",
@@ -3231,12 +3215,6 @@
     "space_settings": {
         "title": "Postavke – %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Nemate dopuštenja za dodavanje soba u ovaj prostor",
-        "error_no_permission_add_space": "Nemate dopuštenja za dodavanje prostora u ovaj prostor",
-        "error_no_permission_create_room": "Nemate dopuštenja za izradu novih soba u ovom prostoru",
-        "error_no_permission_invite": "Nemate dopuštenja za pozivanje korisnika u ovaj prostor"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Unesite naziv novog poslužitelja koji želite istražiti.",
@@ -3358,14 +3336,13 @@
         "creation_summary_dm": "%(creator)s izradio/la je ovu izravnu poruku.",
         "creation_summary_room": "%(creator)s izradio/la je i konfigurirao/la sobu.",
         "decryption_failure": {
-            "sender_identity_previously_verified": "Pošiljateljev potvrđeni identitet je poništen",
+            "sender_identity_previously_verified": "Pošiljateljev potvrđeni digitalni identitet je poništen",
             "unable_to_decrypt": "Nije moguće dešifrirati poruku"
         },
         "disambiguated_profile": "%(displayName)s (%(matrixId)s)",
         "download_action_downloading": "Preuzimanje",
         "download_failed": "Preuzimanje nije uspjelo",
         "download_failed_description": "Došlo je do pogreške prilikom preuzimanja ove datoteke",
-        "e2e_state": "Stanje sveobuhvatnog šifriranja",
         "edits": {
             "tooltip_label": "Uređeno dana %(date)s. Kliknite za pregled uređenih stavki.",
             "tooltip_sub": "Kliknite za pregled uređenih stavki",
@@ -3448,9 +3425,7 @@
         "m.poll.start": "%(senderName)s započeo/la je anketu – %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s promijenio/la je avatar sobe.",
-            "changed_img": "%(senderDisplayName)s promijenio/la je avatar sobe u <img/>",
-            "lightbox_title": "%(senderDisplayName)s promijenio/la je avatar za %(roomName)s",
-            "removed": "%(senderDisplayName)s uklonio/la je avatar sobe."
+            "lightbox_title": "%(senderDisplayName)s promijenio/la je avatar za %(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3498,8 +3473,10 @@
         "m.room.member": {
             "accepted_3pid_invite": "%(targetName)s prihvatio/la je poziv za %(displayName)s",
             "accepted_invite": "%(targetName)s prihvatio/la je poziv",
-            "ban": "%(senderName)s zabranio/la je %(targetName)s",
-            "ban_reason": "%(senderName)s zabranjeno/la je %(targetName)s: %(reason)s",
+            "ban": "%(senderName)s zabranio/la je pristup korisniku",
+            "ban_reason": "%(senderName)s zabranio/la je pristup korisniku: %(reason)s",
+            "ban_reason_spoiler": "%(senderName)s je zabranio/la pristup korisniku <user/>: %(reason)s",
+            "ban_spoiler": "%(senderName)s je zabranio/la pristup korisniku <user/>",
             "change_avatar": "%(senderName)s promijenio/la je svoju profilnu sliku",
             "change_name": "%(oldDisplayName)s promijenio/la je svoje ime za prikaz u %(displayName)s",
             "change_name_avatar": "%(oldDisplayName)s promijenio/la je svoje ime za prikaz i profilnu sliku",
@@ -3853,7 +3830,7 @@
         "ban_space_everything": "Zabrani im pristup svemu za što imam ovlasti",
         "ban_space_specific": "Zabrani im pristup određenim stvarima za koje imam ovlasti",
         "deactivate_confirm_action": "Deaktiviraj korisnika",
-        "deactivate_confirm_description": "Deaktiviranjem ovog korisnika odjavit ćete ga i spriječiti da se ponovno prijavi. Osim toga, napustit će sve sobe u kojima se nalazi. Ta se radnja ne može poništiti. Jeste li sigurni da želite deaktivirati tog korisnika?",
+        "deactivate_confirm_description": "Deaktiviranjem ovog korisnika uklonit ćete njegove uređaje i spriječiti da se ponovno prijavi. Osim toga, napustit će sve sobe u kojima se nalazi. Ta se radnja ne može poništiti. Sigurno želite deaktivirati tog korisnika?",
         "deactivate_confirm_title": "Želite li deaktivirati korisnika?",
         "demote_button": "Degradiraj",
         "demote_self_confirm_description_space": "Nećete moći poništiti ovu promjenu jer sami sebe degradirate. Ako ste posljednji privilegirani korisnik u prostoru, nećete moći ponovno dobiti privilegije.",
@@ -3917,6 +3894,9 @@
         "verify_button": "Potvrdi korisnika",
         "verify_explainer": "Radi dodatne sigurnosti potvrdite ovog korisnika provjerom jednokratnog koda na oba uređaja."
     },
+    "user_status": {
+        "on_a_call": "U pozivu"
+    },
     "voip": {
         "already_in_call": "Već u pozivu",
         "already_in_call_person": "Već ste u pozivu sa tom osobom.",
@@ -3932,6 +3912,18 @@
         "call_held": "%(peerName)s je stavio/la poziv na čekanje",
         "call_held_resume": "Stavili ste poziv na <a>Nastavi</a>",
         "call_held_switch": "Stavili ste poziv <a>na čekanje</a>",
+        "call_members": {
+            "exhaustive": {
+                "one": "<avatars/> je u pozivu",
+                "few": "<avatars/> su u pozivu",
+                "other": "<avatars/> su u pozivu"
+            },
+            "overflow": {
+                "one": "<avatars/> + %(overflowCount)s je u pozivu",
+                "few": "<avatars/> + %(overflowCount)s su u pozivu",
+                "other": "<avatars/> + %(overflowCount)s su u pozivu"
+            }
+        },
         "call_toast_unknown_room": "Nepoznata soba",
         "camera_disabled": "Vaša kamera je isključena",
         "camera_enabled": "Vaša kamera nije omogućena",
@@ -3954,10 +3946,12 @@
         "enable_microphone": "Uključi mikrofon",
         "expand": "Vrati se u poziv",
         "get_call_link": "Podijeli poveznicu na poziv",
+        "group_call_started": "Grupni poziv je započeo",
         "hangup": "Prekini poziv",
         "hide_sidebar_button": "Sakrij bočnu traku",
         "input_devices": "Ulazni uređaji",
         "jitsi_call": "Konferencija na Jitsiju",
+        "join_with_video": "Pridruži se putem videoveze",
         "legacy_call": "Klasični poziv",
         "maximise": "Ispuni zaslon",
         "maximise_call": "Maksimiziraj poziv",
@@ -4020,6 +4014,11 @@
         "you_are_presenting": "Dijelite zaslon"
     },
     "web_default_device_name": "%(appName)s: %(browserName)s na %(osName)s",
+    "welcome": {
+        "tagline_element": "Maksimalno unaprijeđen za brzinu i jednostavnost.",
+        "title_element": "Budi u elementu",
+        "title_generic": "Dobro došli u %(brand)s"
+    },
     "widget": {
         "added_by": "Widget je dodao/la",
         "capabilities_dialog": {
@@ -4041,6 +4040,7 @@
             "change_name_this_room": "Promijeni naziv ove sobe",
             "change_topic_active_room": "Promijeni temu svoje aktivne sobe",
             "change_topic_this_room": "Promijeni temu ove sobe",
+            "download_file": "Preuzmi datoteke iz repozitorija medija",
             "receive_membership_active_room": "Vidite kada se osobe pridruže vašoj aktivnoj sobi, napuste je ili budu pozvane u nju",
             "receive_membership_this_room": "Vidite kada se osobe pridruže ovoj sobi, napuste je ili budu pozvane u nju",
             "remove_ban_invite_leave_active_room": "Uklanja osobe iz sobe, zabranjuje im pristup ili ih poziva u aktivnu sobu i omogućuje vam da je napustite",
@@ -4096,13 +4096,7 @@
         "close_to_view_right_panel": "Zatvorite ovaj widget kako biste ga vidjeli na ovoj ploči",
         "context_menu": {
             "delete": "Izbriši widget",
-            "delete_warning": "Brisanjem widgeta uklanjate ga za sve korisnike u ovoj sobi. Jeste li sigurni da želite izbrisati ovaj widget?",
-            "move_left": "Premjesti ulijevo",
-            "move_right": "Premjesti udesno",
-            "remove": "Ukloni za sve",
-            "revoke": "Poništi dopuštenja",
-            "screenshot": "Fotografiraj",
-            "start_audio_stream": "Pokreni strujanje zvučnog sadržaja"
+            "delete_warning": "Brisanjem widgeta uklanjate ga za sve korisnike u ovoj sobi. Jeste li sigurni da želite izbrisati ovaj widget?"
         },
         "cookie_warning": "Ovaj widget može upotrebljavati kolačiće.",
         "error_hangup_description": "Više niste u pozivu. (Pogreška: %(message)s)",
diff --git a/apps/web/src/i18n/strings/hu.json b/apps/web/src/i18n/strings/hu.json
index 9b57f1e6f2..0df091caac 100644
--- a/apps/web/src/i18n/strings/hu.json
+++ b/apps/web/src/i18n/strings/hu.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Emodzsiválasztó",
         "jump_first_invite": "Ugrás az első meghívóhoz.",
         "message_composer": "Üzenetszerkesztő",
         "n_unread_messages": {
@@ -11,8 +10,6 @@
             "%(count)s olvasatlan üzenet megemlítéssel.": "other",
             "1 olvasatlan megemlítés.": "one"
         },
-        "recent_rooms": "Legutóbbi szobák",
-        "room_name": "Szoba: %(name)s",
         "room_status_bar": "Szoba állapotsora",
         "seek_bar_label": "Hang keresősávja",
         "unread_messages": "Olvasatlan üzenetek."
@@ -22,7 +19,6 @@
         "accept": "Elfogadás",
         "add": "Hozzáadás",
         "add_existing_room": "Létező szoba hozzáadása",
-        "add_people": "Felhasználók meghívása",
         "apply": "Alkalmaz",
         "approve": "Engedélyezés",
         "ask_to_join": "Csatlakozási kérés",
@@ -57,7 +53,6 @@
         "enter_fullscreen": "Teljes képernyőre váltás",
         "exit_fullscreeen": "Kilépés a teljes képernyőből",
         "expand": "Kibontás",
-        "explore_public_rooms": "Nyilvános szobák felfedezése",
         "explore_rooms": "Szobák felderítése",
         "export": "Mentés",
         "forward": "Továbbítás",
@@ -69,8 +64,6 @@
         "ignore": "Mellőzés",
         "import": "Betöltés",
         "invite": "Meghívás",
-        "invite_to_space": "Meghívás a térbe",
-        "invites_list": "Meghívók",
         "join": "Csatlakozás",
         "learn_more": "További információk",
         "leave": "Elhagyás",
@@ -97,7 +90,6 @@
         "rename": "Átnevezés",
         "reply": "Válasz",
         "reply_in_thread": "Válasz üzenetszálban",
-        "report_content": "Tartalom jelentése",
         "report_room": "Szoba jelentése",
         "resend": "Újraküldés",
         "reset": "Visszaállítás",
@@ -117,8 +109,6 @@
         "sign_out": "Eszköz eltávolítása",
         "skip": "Kihagyás",
         "start": "Indítás",
-        "start_chat": "Csevegés indítása",
-        "start_new_chat": "Új csevegés indítása",
         "stop": "Leállítás",
         "submit": "Elküldés",
         "subscribe": "Feliratkozás",
@@ -219,11 +209,9 @@
         "log_in_new_account": "<a>Belépés</a> az új fiókjába.",
         "logout_dialog": {
             "description": "Biztosan eltávolítja ezt az eszközt?",
-            "megolm_export": "Kulcsok kézi mentése",
-            "setup_key_backup_title": "Elveszíti a hozzáférést a titkosított üzeneteihez",
-            "setup_secure_backup_description_1": "A titkosított üzenetek végpontok közti titkosítással védettek. Csak Önnek és a címzetteknek lehet meg a kulcsuk az üzenet visszafejtéséhez.",
-            "setup_secure_backup_description_2": "Ha eltávolítja ezt az eszközt, nem fogja tudni elolvasni a titkosított üzeneteket, hacsak nincs meg a kulcsuk a többi eszközén, vagy ha nem készített róluk biztonsági másolatot a kiszolgálóra.",
-            "skip_key_backup": "Nincs szükségem a titkosított üzeneteimre"
+            "setup_key_backup_title": "Hamarosan elveszíti a hozzáférését a titkosított csevegéseihez",
+            "setup_secure_backup_description": "Ez az egyetlen eszköze. Ha eltávolítja, a következő bejelentkezéskor szüksége lesz egy helyreállítási kulcsra a digitális személyazonossága megerősítéséhez és a titkosított csevegések helyreállításához.",
+            "skip_key_backup": "Eszköz eltávolítása mindenképpen"
         },
         "misconfigured_body": "Kérje meg a(z) %(brand)s adminisztrátorát, hogy ellenőrizze a <a>beállításait</a>, hibás vagy duplikált bejegyzéseket keresve.",
         "misconfigured_title": "Az %(brand)s hibásan van beállítva",
@@ -249,7 +237,9 @@
             "check_code_heading": "Adja meg a másik készüléken megjelenő számot",
             "check_code_input_label": "2 számjegyű kód",
             "check_code_mismatch": "A számok nem egyeznek meg",
+            "choose_desktop_computer": "A(z) „%(desktopComputer)s” választása",
             "completing_setup": "Új eszköz beállításának elvégzése",
+            "desktop_computer": "Asztali számítógép",
             "error_etag_missing": "Váratlan hiba történt. Ennek oka lehet egy böngészőbővítmény, proxykiszolgáló vagy kiszolgáló hibás konfigurációja.",
             "error_expired": "A bejelentkezés lejárt. Próbálja újra.",
             "error_expired_title": "A bejelentkezés nem fejeződött be időben",
@@ -270,16 +260,22 @@
             "error_user_declined": "Elutasította a másik eszközéről érkező bejelentkezési kérést.",
             "error_user_declined_title": "A bejelentkezés elutasítva",
             "follow_remaining_instructions": "Kövesse az utasításokat a másik eszköz összekapcsolásához",
+            "open_element_mobile_device": "Nyissa meg az %(brand)set a mobileszközén",
             "open_element_other_device": "Nyissa meg a másik eszközön ezt: %(brand)s",
             "point_the_camera": "Irányítsa a kamerát az itt látható QR-kódra",
-            "scan_code_instruction": "Olvassa be a QR-kódot egy másik eszközzel",
+            "ready_to_scan": "Készen áll a beolvasásra",
+            "scan_code_instruction": "Olvassa be a QR-kódot",
+            "scan_code_instruction_reciprocate": "Olvassa be a QR-kódot egy másik eszközzel",
             "scan_qr_code": "Bejelentkezés QR-kóddal",
-            "security_code": "Biztonsági kód",
-            "security_code_prompt": "Ha a rendszer kéri, írja be az alábbi kódot a másik eszközön.",
+            "security_code_prompt": "A fiókszolgáltatója kérheti a következő kódot a bejelentkezése ellenőrzéséhez.",
+            "security_code_title": "Az Ön ellenőrzőkódja",
             "select_qr_code": "Válassza a „%(scanQRCode)s” lehetőséget",
+            "select_ready_to_scan": "Válassza a „%(readyToScan)s” lehetőséget, majd olvassa be az itt látható QR-kódot",
+            "start_over": "Újrakezdés",
+            "tap_avatar_link_new_device": "Koppints a profilképére, és válassza az „%(linkNewDevice)s” lehetőséget",
             "unsupported_explainer": "Fiókszolgáltatója nem támogatja a bejelentkezést egy új eszközre QR-kóddal.",
             "unsupported_heading": "A QR-kód nem támogatott",
-            "waiting_for_device": "Várakozás a másik eszköz bejelentkezésére"
+            "waiting_for_device": "Várakozás a másik eszközre"
         },
         "register_action": "Fiók létrehozása",
         "registration": {
@@ -338,8 +334,10 @@
         "sign_in_description": "Használja a fiókját a továbblépéshez.",
         "sign_in_instead": "Bejelentkezés inkább",
         "sign_in_instead_prompt": "Már van fiókja? <a>Jelentkezzen be itt</a>",
+        "sign_in_manually": "Kézi bejelentkezés",
         "sign_in_or_register": "Bejelentkezés vagy fiók létrehozása",
         "sign_in_or_register_description": "A folytatáshoz használja a fiókját, vagy hozzon létre egy újat.",
+        "sign_in_with_qr": "Bejelentkezés QR-kóddal",
         "sign_in_with_sso": "Bejelentkezés „egyszeri bejelentkezéssel”",
         "signing_in": "Bejelentkezés…",
         "soft_logout": {
@@ -474,13 +472,13 @@
         "description": "Leírás",
         "deselect_all": "Kijelölés megszüntetése",
         "device": "Eszköz",
+        "disabled_by_homeserver": "A Matrix-kiszolgáló letiltotta",
         "edited": "szerkesztve",
         "email_address": "E-mail-cím",
         "emoji": "Emodzsi",
         "encrypted": "Titkosítva",
         "error": "Hiba",
         "faq": "GYIK",
-        "favourites": "Kedvencek",
         "feedback": "Visszajelzés",
         "filter_results": "Találatok szűrése",
         "forward_message": "Üzenet továbbítása",
@@ -488,7 +486,6 @@
         "go_to_settings": "Ugrás a Beállításokhoz",
         "guest": "Vendég",
         "help": "Súgó",
-        "historical": "Archív",
         "home": "Kezdőlap",
         "homeserver": "Matrix-kiszolgáló",
         "identity_server": "Azonosítási kiszolgáló",
@@ -500,13 +497,11 @@
         "light": "Világos",
         "loading": "Betöltés…",
         "location": "Földrajzi helyzet",
-        "low_priority": "Alacsony prioritás",
         "matrix": "Matrix",
         "message": "Üzenet",
         "message_layout": "Üzenet elrendezése",
         "message_timestamp_invalid": "Érvénytelen időbélyeg",
         "microphone": "Mikrofon",
-        "model": "Modell",
         "moderation_and_safety": "Moderálás és biztonság",
         "modern": "Modern",
         "mute": "Némítás",
@@ -564,7 +559,6 @@
         "success": "Sikeres",
         "suggestions": "Javaslatok",
         "support": "Támogatás",
-        "system_alerts": "Rendszer-figyelmeztetések",
         "theme": "Téma",
         "thread": "Üzenetszál",
         "threads": "Üzenetszálak",
@@ -581,7 +575,6 @@
         "username": "Felhasználói név",
         "verified": "Ellenőrizve",
         "version": "Verzió",
-        "video": "Videó",
         "video_room": "Videószoba",
         "view_message": "Üzenet megjelenítése",
         "warning": "Figyelmeztetés"
@@ -676,6 +669,13 @@
         "unfederated_label_default_on": "Ne engedélyezze ezt, ha a szobát külső csapat is használja másik Matrix-kiszolgálóról. Ezt később nem lehet megváltoztatni.",
         "unsupported_version": "A kiszolgáló nem támogatja a megadott szobaverziót."
     },
+    "create_section_dialog": {
+        "create_section": "Szakasz létrehozása",
+        "description": "A szakaszok csak Önnek szólnak",
+        "label": "Szakasz neve",
+        "title": "Szakasz létrehozása",
+        "title_edition": "Szakasz szerkesztése"
+    },
     "create_space": {
         "add_details_prompt": "Adjon hozzá néhány részletet, hogy könnyebben felismerhető legyen.",
         "add_details_prompt_2": "Ezeket bármikor megváltoztathatja.",
@@ -823,8 +823,8 @@
         "invalid_device_key_id": "Érvénytelen eszközkulcs-azonosító",
         "invalid_json": "Nem tűnik érvényes JSON szövegnek.",
         "level": "Szint",
-        "low_bandwidth_mode": "Alacsony sávszélességű mód",
-        "low_bandwidth_mode_description": "Kompatibilis Matrix-kiszolgálóra van szükség.",
+        "low_bandwidth_mode": "A nagy sávszélességet igénylő funkciók letiltása",
+        "low_bandwidth_mode_description": "Kikapcsolja a titkosítást, a jelenléti jelzéseket, a profilképeket, az olvasási visszajelzéseket és a gépelési értesítéseket.",
         "main_timeline": "Fő idővonal",
         "manual_device_verification": "Kézi eszközellenőrzés",
         "no_receipt_found": "Nincs visszajelzés",
@@ -880,12 +880,13 @@
         "thread_root_id": "Üzenetszál gyökérazonosítója: %(threadRootId)s",
         "threads_timeline": "Üzenetszálak idővonala",
         "title": "Fejlesztői eszközök",
-        "toggle_event": "esemény be/ki",
         "toolbox": "Eszköztár",
         "use_at_own_risk": "Ez a felület nem ellenőrzi az érték típusát. Csak saját felelősségére használja.",
         "user_avatar": "Profilkép: %(avatar)s",
         "user_displayname": "Megjelenített név: %(displayname)s",
         "user_id": "Felhasználói azonosító: %(userId)s",
+        "user_identity": "Kriptográfiai személyazonosság",
+        "user_identity_unknown": "Ismeretlen",
         "user_no_avatar": "Profilkép: <i>Nincs</i>",
         "user_no_displayname": "Megjelenített név: <i>Nincs</i>",
         "user_read_up_to": "A felhasználó eddig olvasta el: ",
@@ -915,22 +916,6 @@
     },
     "dialog_close_label": "Ablak bezárása",
     "download_completed": "A letöltés befejeződött",
-    "emoji": {
-        "categories": "Kategóriák",
-        "category_activities": "Tevékenységek",
-        "category_animals_nature": "Állatok és természet",
-        "category_flags": "Zászlók",
-        "category_food_drink": "Étel és ital",
-        "category_frequently_used": "Gyakran használt",
-        "category_objects": "Tárgyak",
-        "category_smileys_people": "Mosolyok és emberek",
-        "category_symbols": "Szimbólumok",
-        "category_travel_places": "Utazás és helyek",
-        "quick_reactions": "Gyors reakciók"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Keresés megszakítása"
-    },
     "empty_room": "Üres szoba",
     "empty_room_was_name": "Üres szoba (%(oldName)s volt)",
     "encryption": {
@@ -968,7 +953,6 @@
         "import_invalid_passphrase": "Hitelesítési ellenőrzés sikertelen: hibás jelszó?",
         "key_storage_out_of_sync": "A kulcstároló nincs szinkronban.",
         "key_storage_out_of_sync_description": "Erősítse meg a helyreállítási kulcsot, hogy továbbra is hozzáférjen a kulcstárolóhoz és az üzenetelőzményekhez.",
-        "message_shared_by": "%(displayName)s (%(userId)s) megosztotta ezt az üzenetet, mivel nem volt a szobában, amikor elküldték.",
         "messages_not_secure": {
             "cause_1": "Saját Matrix-kiszolgáló",
             "cause_2": "Az ellenőrizendő felhasználó ehhez a Matrix-kiszolgálóhoz kapcsolódik:",
@@ -994,19 +978,8 @@
         "set_up_recovery": "Csevegések biztonsági mentése",
         "set_up_recovery_toast_description": "A csevegései automatikusan mentve vannak, végpontok közti titkosítással Ahhoz, hogy az eszközei elvesztése esetén helyre tudja állítani a biztonsági mentést és megtartsa a digitális személyazonosságát, egy helyreállítási kulcsra van szüksége.",
         "set_up_toast_title": "Biztonsági mentés beállítása",
-        "setup_secure_backup": {
-            "explainer": "Az eszköz eltávolítása előtt készítsen biztonsági másolatot a kulcsairól, hogy elkerülje azok elvesztését."
-        },
         "turn_on_key_storage": "A kulcstárolás bekapcsolása",
         "turn_on_key_storage_description": "Ez lehetővé teszi az üzenetelőzmények megtekintését bármely új eszközön, és szükséges a csevegések és a digitális személyazonossága biztonsági mentéséhez.",
-        "udd": {
-            "interactive_verification_button": "Interaktív ellenőrzés emodzsikkal",
-            "other_ask_verify_text": "Kérje meg a felhasználót, hogy hitelesítse a munkamenetét, vagy ellenőrizze kézzel lentebb.",
-            "other_new_session_text": "%(name)s (%(userId)s) új munkamenetbe lépett be, anélkül, hogy ellenőrizte volna:",
-            "own_ask_verify_text": "Ellenőrizze a másik munkamenetét a lenti lehetőségek egyikével.",
-            "own_new_session_text": "Ellenőrzés nélkül jelentkezett be egy új munkamenetbe:",
-            "title": "Nem megbízható"
-        },
         "unable_to_setup_keys_error": "Nem sikerült a kulcsok beállítása",
         "verification": {
             "accepting": "Elfogadás…",
@@ -1108,7 +1081,7 @@
         "verification_requested_toast_title": "Hitelesítés kérés elküldve",
         "verified_identity_changed": "%(displayName)s (<b>%(userId)s</b> ) digitális személyazonossága alaphelyzetbe lett állítva. <a>További információ</a>",
         "verified_identity_changed_no_displayname": "<b>%(userId)s</b> digitális személyazonossága alaphelyzetbe lett állítva. <a>További információ</a>",
-        "verify_toast_description": "2026 áprilisának végétől a nem ellenőrzött eszközök nem tudnak üzeneteket küldeni és fogadni. <a>További információk</a>",
+        "verify_toast_description": "2026. október végétől a nem ellenőrzött eszközök nem tudnak üzeneteket küldeni és fogadni. <a>További információk</a>",
         "verify_toast_title": "Az eszköz ellenőrzése",
         "withdraw_verification_action": "Ellenőrzés visszavonása"
     },
@@ -1351,6 +1324,14 @@
         "impossible_dialog_title": "Az integrációk nem engedélyezettek"
     },
     "invite": {
+        "confirm_unknown_users": {
+            "invite_subtitle": "Jelenleg nincsenek csevegései ezekkel a személyekkel. Mielőtt továbbmenne, erősítse meg, hogy meghívja őket ebbe a szobába.",
+            "invite_title": "Új személyeket hív meg ebbe a szobába?",
+            "start_chat_subtitle_multiple_users": "Jelenleg nincs folyamatban lévő csevegése ezekkel a felhasználókkal. A folytatáshoz erősítse meg a meghívást.",
+            "start_chat_subtitle_one_user": "Még nem beszélgetett ezzel a személlyel. Folytatás előtt erősítse meg a meghívást.",
+            "start_chat_title_multiple_users": "Szeretne csevegni ezekkel az új személyekkel?",
+            "start_chat_title_one_user": "Csevegést kezdeményez ezzel az új felhasználóval?"
+        },
         "email_caption": "Meghívás e-maillel",
         "email_limit_one": "E-mail meghívóból egyszerre csak egy küldhető el",
         "email_use_default_is": "Használjon azonosítási kiszolgálót az e-mailben történő meghíváshoz. <default> Használja az alapértelmezett kiszolgálót (%(defaultIdentityServerName)s)</default> vagy adjon meg egy másikat a <settings>Beállításokban</settings>.",
@@ -1501,6 +1482,7 @@
         "bridge_state_manager": "Ezt a hidat a következő kezeli: <user />.",
         "bridge_state_workspace": "Munkaterület: <networkLink/>",
         "click_for_info": "Kattintson a további információkhoz",
+        "config_only": "Csak a config.json fájlon keresztül engedélyezhető.",
         "currently_experimental": "Jelenleg kísérleti állapotban van.",
         "custom_themes": "Egyéni témák támogatásának hozzáadása",
         "dynamic_room_predecessors": "A dinamikus szoba előfutárai",
@@ -1514,8 +1496,17 @@
         "experimental_section": "Korai előzetesek",
         "extended_profiles_msc_support": "A kiszolgálónak támogatnia kell az MSC4133-at",
         "feature_disable_call_per_sender_encryption": "Küldőnkénti titkosítás letiltása Element Callhoz",
+        "feature_retention": {
+            "description": "Az üzenetek automatikus eltávolítása egy szobából, ha elérik a beállított megőrzési időszakot. Jelenleg csak a beállítások olvasását támogatja.",
+            "disabled_sliding_sync": "A megőrzés nem kapcsolható be, ha a csúszóablakos szinkronizálás be van kapcsolva.",
+            "display_name": "Üzenetek megőrzése"
+        },
+        "feature_user_status": {
+            "description": "Lehetővé teszi az aktuális állapot megtekintését és beállítását.",
+            "display_name": "Felhasználói állapot",
+            "required_msc_support": "MSC4429 szükséges (profilfrissítések a régi szinkronizáláshoz)"
+        },
         "feature_wysiwyg_composer_description": "Szövegszerkesztő használata a Markdown formázás helyett az üzenet írásakor.",
-        "group_calls": "Új konferenciahívási élmény",
         "group_developer": "Fejlesztői",
         "group_encryption": "Titkosítás",
         "group_experimental": "Kísérleti",
@@ -1530,7 +1521,6 @@
         "group_voip": "Hang és videó",
         "group_widgets": "Kisalkalmazások",
         "hidebold": "Értesítési pötty elrejtése (csak darabszám megjelenítése)",
-        "html_topic": "A szoba témájának HTML reprezentációjának megjelenítése",
         "join_beta": "Csatlakozás béta lehetőségekhez",
         "join_beta_reload": "A béta funkció bekapcsolása újratölti ezt: %(brand)s.",
         "jump_to_date": "Dátumra ugrás (hozzáadja a /jumptodate parancsot és a dátumra ugrási fejléceket)",
@@ -1540,23 +1530,19 @@
         "leave_beta_reload": "A béta kikapcsolása újratölti ezt: %(brand)s.",
         "location_share_live": "Élő földrajzi hely megosztása",
         "location_share_live_description": "Átmeneti megvalósítás. A helyadatok megmaradnak a szoba naplójában.",
+        "login_with_qr": "Bejelentkezés QR-kóddal",
         "mjolnir": "Új lehetőség emberek figyelmen kívül hagyására",
         "msc3531_hide_messages_pending_moderation": "A moderátorok kitakarhatják a még nem moderált üzeneteket.",
-        "new_room_list": "Új szobalista engedélyezése",
         "notification_settings": "Új értesítési beállítások",
         "notification_settings_beta_caption": "Bemutatjuk az értesítési beállítások módosításának egyszerűbb módját. Testreszabhatja a sajátját, ahogy tetszik itt: %(brand)s.",
         "notification_settings_beta_title": "Értesítési beállítások",
         "notifications": "Engedélyezze az értesítési panelt a szoba fejlécében",
         "render_reaction_images": "Egyéni képek megjelenítése reakciókban",
         "render_reaction_images_description": "Néha „egyéni emodzsiknak” nevezik.",
-        "report_to_moderators": "Jelentés a moderátoroknak",
-        "report_to_moderators_description": "A moderálást támogató szobákban a problémás tartalmat a „Jelentés” gombbal lehet a moderátorok felé jelezni.",
-        "room_list_sections": "Szobalista szakaszok",
         "sliding_sync": "Csúszóablakos szinkronizálási mód",
         "sliding_sync_description": "Aktív fejlesztés alatt, nem kapcsolható ki.",
         "sliding_sync_disabled_notice": "Jelentkezzen be újra a letiltáshoz",
         "sliding_sync_server_no_support": "A kiszolgálója nem támogatja",
-        "under_active_development": "Aktív fejlesztés alatt.",
         "unrealiable_e2e": "Megbízhatatlan titkosított szobákban",
         "video_rooms": "Videószobák",
         "video_rooms_a_new_way_to_chat": "Új csevegési lehetőség a(z) %(brand)s alkalmazásban, hanggal és videóval.",
@@ -1612,9 +1598,6 @@
         "room_rejoin_warning": "Ez a szoba nem nyilvános. Kilépés után csak újabb meghívóval lehet újra belépni a szobába.",
         "space_rejoin_warning": "Ez a tér nem nyilvános. Kilépés után csak újabb meghívóval lehet újra belépni."
     },
-    "left_panel": {
-        "open_dial_pad": "Számlap megnyitása"
-    },
     "lightbox": {
         "rotate_left": "Forgatás balra",
         "rotate_right": "Forgatás jobbra",
@@ -1712,7 +1695,6 @@
         "mentions_and_keywords": "@megemlítések és kulcsszavak",
         "mentions_and_keywords_description": "Értesítések fogadása csak megemlítéseknél és kulcsszavaknál, a <a>beállításokban</a> megadottak szerint",
         "mentions_keywords": "Megemlítések és kulcsszavak",
-        "message_didnt_send": "Az üzenet nincs elküldve. Kattintson az információkért.",
         "mute_description": "Nem kap semmilyen értesítést"
     },
     "notifier": {
@@ -1808,7 +1790,6 @@
     },
     "quick_settings": {
         "all_settings": "Minden beállítás",
-        "metaspace_section": "Kitűzés az oldalsávra",
         "sidebar_settings": "További beállítások",
         "title": "Gyors beállítások"
     },
@@ -1824,27 +1805,18 @@
         "ongoing": "Eltávolítás…",
         "reason_label": "Ok (nem kötelező)"
     },
+    "remove_section_dialog": {
+        "confirmation": "Biztos, hogy eltávolítja ezt a szakaszt?",
+        "description": "Az ebben a szakaszban található beszélgetések továbbra is elérhetők lesznek a csevegések listájában.",
+        "remove_section": "Szakasz eltávolítása",
+        "title": "Eltávolítja a szakaszt?"
+    },
     "report_content": {
         "description": "Az üzenet bejelentése egy egyedi „eseményazonosítót” küld el a Matrix-kiszolgáló adminisztrátorának. Ha az üzenetek titkosítottak a szobában, akkor a Matrix-kiszolgáló adminisztrátora nem tudja elolvasni az üzenetet, vagy nem tudja megnézni a fájlokat vagy képeket.",
-        "disagree": "Nem értek egyet",
-        "error_create_room_moderation_bot": "Nem lehet szobát létrehozni a moderációs bot segítségével",
         "hide_messages_from_user": "Jelölje be, ha ennek a felhasználónak a jelenlegi és jövőbeli üzeneteit is el szeretné rejteni.",
         "ignore_user": "Felhasználó mellőzése",
-        "illegal_content": "Törvénytelen tartalom",
         "missing_reason": "Adja meg, hogy miért jelenti.",
-        "nature": "Válassza ki az üzenet természetét, vagy írja le, hogy miért elítélendő.",
-        "nature_disagreement": "Amit ez a felhasználó ír az rossz.\nErről a szoba moderátorának jelentés készül.",
-        "nature_illegal": "A felhasználó illegális viselkedést valósít meg, például kipécézett valakit vagy tettlegességgel fenyeget.\nEz jelezve lesz a moderátorok felé, akik akár hivatalos szervek felé is továbbíthatják ezt.",
-        "nature_nonstandard_admin": "Ezt a szobát illegális vagy mérgező tartalomnak szentelték, vagy a moderátorok nem szűrik az illegális vagy mérgező tartalmakat.\nEzt jelentésre kerül a rendszergazdák felé itt: %(homeserver)s .",
-        "nature_nonstandard_admin_encrypted": "Ezt a szobát illegális vagy mérgező tartalomnak szentelték, vagy a moderátorok nem szűrik az illegális vagy mérgező tartalmakat.\nEzt jelentésre kerül a rendszergazdák felé itt: %(homeserver)s . A rendszergazdák a titkosított tartalmat ebben a szobában nem tudják elolvasni.",
-        "nature_other": "Bármi más ok. Írja le a problémát.\nEz lesz elküldve a szoba moderátorainak.",
-        "nature_spam": "A felhasználó kéretlen reklámokkal, reklámhivatkozásokkal vagy propagandával bombázza a szobát.\nEz jelezve lesz a szoba moderátorai felé.",
-        "nature_toxic": "A felhasználó mérgező viselkedést tanúsít, például más felhasználókat inzultál vagy felnőtt tartalmat oszt meg egy családbarát szobában, vagy más módon sérti a szoba szabályait.\nEz moderátorok felé jelzésre kerül.",
-        "other_label": "Egyéb",
-        "report_content_to_homeserver": "Tartalom bejelentése a Matrix-kiszolgáló adminisztrátorának",
-        "report_entire_room": "Az egész szoba jelentése",
-        "spam_or_propaganda": "Kéretlen tartalom vagy propaganda",
-        "toxic_behaviour": "Mérgező viselkedés"
+        "report_content_to_homeserver": "Tartalom bejelentése a Matrix-kiszolgáló adminisztrátorának"
     },
     "report_room": {
         "description": "A szoba jelentése a Matrix-kiszolgáló rendszergazdájának. Ha az üzenetek titkosítva vannak, a rendszergazda nem fogja tudni elolvasni azokat.",
@@ -2115,43 +2087,21 @@
         "waiting_for_join_title": "Várakozás a felhasználók csatlakozására ide: %(brand)s"
     },
     "room_list": {
-        "add_room_label": "Szoba hozzáadása",
         "add_space_label": "Tér hozzáadása",
-        "breadcrumbs_empty": "Nincsenek nemrégiben meglátogatott szobák",
-        "breadcrumbs_label": "Nemrég meglátogatott szobák",
         "failed_add_tag": "Nem sikerült hozzáadni a szobához ezt: %(tagName)s",
         "failed_remove_tag": "Nem sikerült a szobáról eltávolítani ezt: %(tagName)s",
         "failed_set_dm_tag": "Nem sikerült a közvetlen beszélgetés címkét beállítani",
-        "home_menu_label": "Kezdőlap beállítások",
-        "join_public_room_label": "Belépés nyilvános szobába",
-        "joining_rooms_status": {
-            "%(count)s szobába lép be": "other"
-        },
         "list_title": "Szobalista",
         "more_options": {
             "leave_room": "Szoba elhagyása"
         },
         "notification_options": "Értesítési beállítások",
-        "redacting_messages_status": {
-            "Üzenet törlése %(count)s szobából": "other"
-        },
         "section": {
             "chats": "Csevegések",
             "favourites": "Kedvencek",
             "low_priority": "Alacsony prioritás"
         },
-        "show_less": "Kevesebb megjelenítése",
-        "show_n_more": {
-            "Még %(count)s megjelenítése": "one"
-        },
-        "show_previews": "Üzenet-előnézet megjelenítése",
-        "sort_by": "Rendezés",
-        "sort_by_activity": "Aktivitás",
-        "sort_by_alphabet": "A–Z",
-        "sort_unread_first": "Olvasatlan üzeneteket tartalmazó szobák megjelenítése elöl",
-        "space_menu_label": "%(spaceName)s menű",
-        "sublist_options": "Lista beállításai",
-        "suggested_rooms_heading": "Javasolt szobák"
+        "show_less": "Kevesebb megjelenítése"
     },
     "room_settings": {
         "access": {
@@ -2663,7 +2613,8 @@
             "unable_to_load_msisdns": "Nem sikerült betölteni a telefonszámokat",
             "username": "Felhasználónév"
         },
-        "inline_url_previews_default": "Beágyazott webcím-előnézetek alapértelmezett engedélyezése",
+        "inline_url_previews_default": "Előnézetek engedélyezése",
+        "inline_url_previews_encrypted": "Előnézetek engedélyezése a titkosított szobákban",
         "insert_trailing_colon_mentions": "Záró kettőspont beszúrása egy felhasználó üzenet elején való megemlítésekor",
         "invite_controls": {
             "default_label": "Felhasználók meghívhatják szobákba"
@@ -2801,6 +2752,8 @@
             "enable_tray_icon": "Tálcaikon megjelenítése és az ablak minimalizálása bezáráskor",
             "keyboard_heading": "Gyorsbillentyűk",
             "keyboard_view_shortcuts_button": "Az összes gyorsbillentyű megtekintéséhez <a>kattintson ide</a>.",
+            "link_previews_description": "Információkat jelenít meg a hivatkozásokról az üzenetek alatt",
+            "link_previews_heading": "Hivatkozás-előnézetek",
             "media_heading": "Képek, GIF-ek és videók",
             "presence_description": "Ossza meg a tevékenységét és állapotát másokkal.",
             "publish_timezone": "Időzóna közzététele a nyilvános profilon",
@@ -2858,7 +2811,6 @@
         "send_typing_notifications": "Gépelési visszajelzés küldése",
         "sessions": {
             "best_security_note": "A nagyobb biztonság érdekében ellenőrizze a munkameneteit, és távolítson el minden olyan munkamenetet, amelyet nem ismer fel vagy már nem használ.",
-            "browser": "Böngésző",
             "confirm_sign_out": {
                 "one": "Erősítse meg az eszköz eltávolítását",
                 "other": "Erősítse meg az eszközök eltávolítását"
@@ -2908,7 +2860,6 @@
             "no_sessions": "Nincs munkamenet.",
             "no_unverified_sessions": "Nincs ellenőrizetlen munkamenet.",
             "no_verified_sessions": "Nincs ellenőrzött munkamenet.",
-            "os": "Operációs rendszer",
             "other_sessions_heading": "Más munkamenetek",
             "push_heading": "Leküldéses értesítések",
             "push_subheading": "Leküldéses értesítések fogadása ebben a munkamenetben.",
@@ -2969,13 +2920,11 @@
         "showbold": "Az összes tevékenység megjelenítése a szobalistában (pontok vagy az olvasatlan üzenetek száma)",
         "sidebar": {
             "dialog_title": "<strong>Beállítások:</strong> Oldalsáv",
-            "metaspaces_favourites_description": "Csoportosítsa az összes kedvenc szobáját és ismerősét egy helyre.",
             "metaspaces_home_all_rooms": "Minden szoba megjelenítése",
             "metaspaces_home_all_rooms_description": "Minden szoba megjelenítése a Kezdőlapon, akkor is ha egy tér része.",
             "metaspaces_home_description": "A Kezdőlap áttekintést adhat mindenről.",
             "metaspaces_orphans": "Téren kívüli szobák",
             "metaspaces_orphans_description": "Csoportosítsa egy helyre az összes olyan szobát, amely nem egy tér része.",
-            "metaspaces_people_description": "Csoportosítsa az összes ismerősét egy helyre.",
             "metaspaces_subsection": "Megjelenítendő terek",
             "metaspaces_video_rooms": "Videótermek és konferenciák",
             "metaspaces_video_rooms_description": "Csoportosítsa az összes privát videótermet és konferenciát.",
@@ -3002,7 +2951,6 @@
             "audio_output": "Hangkimenet",
             "audio_output_empty": "Nem található hangkimenet",
             "auto_gain_control": "Automatikus hangerőszabályozás",
-            "connection_section": "Kapcsolat",
             "dialog_title": "<strong>Beállítások:</strong> Hang és videó",
             "echo_cancellation": "Visszhangcsillapítás",
             "echo_cancellation_description": "Eltávolítja a mikrofonbemenet visszhangját hívások közben. Ez a beállítás az Element Call funkcióra is vonatkozik.",
@@ -3098,6 +3046,14 @@
         "server_error_detail": "A kiszolgáló nem érhető el, túlterhelt vagy valami más probléma van.",
         "shrug": "Az egyszerű szöveges üzenet elé teszi ezt: ¯\\_(ツ)_/¯",
         "spoiler": "A megadott üzenet elküldése kitakarva",
+        "status": {
+            "description": "Jelenlegi állapot beállítása",
+            "no_args": "Nincsenek megadva paraméterek. Adjon meg egy emodzsit, és esetlegesen egy szöveget.",
+            "no_emoji": "Nem adott meg emodzsit",
+            "no_text": "Nem adott meg állapotszöveget",
+            "too_long_emoji": "Az első paraméternek egy emodzsinak kell lennie.",
+            "too_long_text": "Az Ön által megadott szöveg túl hosszú volt."
+        },
         "tableflip": "Az egyszerű szöveges üzenet elé teszi ezt: (╯°□°）╯︵ ┻━┻",
         "topic": "Lekérdezi vagy beállítja a szoba témáját",
         "topic_none": "A szobának nincs témája.",
@@ -3187,12 +3143,6 @@
     "space_settings": {
         "title": "Beállítások – %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Nincs jogosultsága szobát hozzáadni ehhez a térhez",
-        "error_no_permission_add_space": "Nincs jogosultsága, hogy tereket adjon hozzá ehhez a térhez",
-        "error_no_permission_create_room": "Nincs jogosultsága szoba létrehozására ebben a térben",
-        "error_no_permission_invite": "Nincs jogosultságod embereket meghívni erre a térre"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Adja meg a felfedezendő új kiszolgáló nevét.",
@@ -3317,7 +3267,6 @@
         "download_action_downloading": "Letöltés",
         "download_failed": "Letöltés sikertelen",
         "download_failed_description": "Hiba történt a fájl letöltése közben",
-        "e2e_state": "A végpontok közti titkosítás állapota",
         "edits": {
             "tooltip_label": "Szerkesztés ideje: %(date)s. Kattintson a szerkesztések megtekintéséhez.",
             "tooltip_sub": "A szerkesztések megtekintéséhez kattints",
@@ -3398,9 +3347,7 @@
         "m.poll.start": "%(senderName)s szavazást indított - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s megváltoztatta a szoba profilképét.",
-            "changed_img": "%(senderDisplayName)s megváltoztatta a szoba profilképét: <img/>",
-            "lightbox_title": "%(senderDisplayName)s megváltoztatta %(roomName)s szoba profilképét",
-            "removed": "%(senderDisplayName)s törölte a szoba profilképét."
+            "lightbox_title": "%(senderDisplayName)s megváltoztatta %(roomName)s szoba profilképét"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3841,6 +3788,16 @@
         "call_held": "%(peerName)s várakoztatja a hívást",
         "call_held_resume": "A hívás várakozik, <a>folytatás</a>",
         "call_held_switch": "A hívás várakozik, <a>átkapcsolás</a>",
+        "call_members": {
+            "exhaustive": {
+                "one": "<avatars/> hívásban",
+                "other": "<avatars/> hívásban"
+            },
+            "overflow": {
+                "one": "<avatars/> +%(overflowCount)s a hívásban",
+                "other": "<avatars/> +%(overflowCount)s a hívásban"
+            }
+        },
         "call_toast_unknown_room": "Ismeretlen szoba",
         "camera_disabled": "A kamerája ki van kapcsolva",
         "camera_enabled": "A kamerája még mindig be van kapcsolva",
@@ -3863,10 +3820,12 @@
         "enable_microphone": "Mikrofon némításának feloldása",
         "expand": "Visszatérés a híváshoz",
         "get_call_link": "Hívási hivatkozás megosztása",
+        "group_call_started": "Csoportos hívás elindítva",
         "hangup": "Bontás",
         "hide_sidebar_button": "Oldalsáv elrejtése",
         "input_devices": "Beviteli eszközök",
         "jitsi_call": "Jitsi konferencia",
+        "join_with_video": "Csatlakozás videóval",
         "legacy_call": "Örökölt hívás",
         "maximise": "Képernyő kitöltése",
         "maximise_call": "Maximalizálja a hívást",
@@ -3927,6 +3886,11 @@
         "you_are_presenting": "Ön tartja a bemutatót"
     },
     "web_default_device_name": "%(appName)s: (%(browserName)s itt: %(osName)s)",
+    "welcome": {
+        "tagline_element": "A sebesség és az egyszerűség jegyében.",
+        "title_element": "Legyen elemében",
+        "title_generic": "Üdvözli az %(brand)s"
+    },
     "widget": {
         "added_by": "A kisalkalmazást hozzáadta",
         "capabilities_dialog": {
@@ -3948,6 +3912,7 @@
             "change_name_this_room": "A szoba nevének megváltoztatása",
             "change_topic_active_room": "Az aktív szobája témájának módosítása",
             "change_topic_this_room": "A szoba témájának megváltoztatása",
+            "download_file": "Fájlok letöltése a médiatárból",
             "receive_membership_active_room": "Emberek belépésének, távozásának vagy meghívásának a megjelenítése az aktív szobájában",
             "receive_membership_this_room": "Emberek belépésének, távozásának vagy meghívásának a megjelenítése ebben a szobában",
             "remove_ban_invite_leave_active_room": "Eltávolítani, kitiltani vagy meghívni embereket az aktív szobába és, hogy ön elhagyja a szobát",
@@ -4003,13 +3968,7 @@
         "close_to_view_right_panel": "Kisalkalmazás bezárása ezen a panelen való megjelenítéshez",
         "context_menu": {
             "delete": "Kisalkalmazás törlése",
-            "delete_warning": "A kisalkalmazás törlése minden felhasználót érint a szobában. Biztos, hogy törli a kisalkalmazást?",
-            "move_left": "Mozgatás balra",
-            "move_right": "Mozgatás jobbra",
-            "remove": "Visszavonás mindenkitől",
-            "revoke": "Jogosultságok visszavonása",
-            "screenshot": "Fénykép készítése",
-            "start_audio_stream": "Hangközvetítés indítása"
+            "delete_warning": "A kisalkalmazás törlése minden felhasználót érint a szobában. Biztos, hogy törli a kisalkalmazást?"
         },
         "cookie_warning": "Ez a kisalkalmazás sütiket használhat.",
         "error_hangup_description": "A híváskapcsolat megszakadt (Hiba: %(message)s)",
diff --git a/apps/web/src/i18n/strings/hy.json b/apps/web/src/i18n/strings/hy.json
index ad0ca7be65..ab3aab52c7 100644
--- a/apps/web/src/i18n/strings/hy.json
+++ b/apps/web/src/i18n/strings/hy.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Էմոջիների ընտրիչ",
         "jump_first_invite": "Անցնել առաջին հրավերին:",
         "message_composer": "Հաղորդագրություն կազմող",
         "n_unread_messages": {
@@ -11,8 +10,6 @@
             "one": "1 չկարդացված հիշատակում:",
             "other": "%(count)s չկարդացված հաղորդագրություններ, ներառյալ հիշատակումները։"
         },
-        "recent_rooms": "Վերջին սենյակները",
-        "room_name": "Սենյակ %(name)s",
         "room_status_bar": "Սենյակի կարգավիճակի գոտի/վահանակ",
         "seek_bar_label": "Աուդիո որոնման գոտի",
         "unread_messages": "Չկարդացված հաղորդագրություններ։"
@@ -22,7 +19,6 @@
         "accept": "Ընդունել",
         "add": "Ավելացնել",
         "add_existing_room": "Ավելացնել գոյություն ունեցող սենյակ",
-        "add_people": "Ավելացնել մարդկանց",
         "apply": "Կիրառել",
         "approve": "Հաստատել",
         "ask_to_join": "Խնդրել միանալ",
@@ -57,7 +53,6 @@
         "enter_fullscreen": "Մուտք գործել լիաէկրան ռեժիմ",
         "exit_fullscreeen": "Ելք լիաէկրան ռեժիմից",
         "expand": "Ընդլայնել",
-        "explore_public_rooms": "Ուսումնասիրել հասարակական սենյակները",
         "explore_rooms": "Փնտրել սենյակներ",
         "export": "Արտահանել",
         "forward": "Առաջ",
@@ -69,8 +64,6 @@
         "ignore": "Անտեսել",
         "import": "Ներմուծել",
         "invite": "Հրավիրել",
-        "invite_to_space": "Հրավիրել տարածք",
-        "invites_list": "Հրավիրում է",
         "join": "Միանալ",
         "learn_more": "Իմանալ ավելին",
         "leave": "Հեռանալ",
@@ -97,7 +90,6 @@
         "rename": "Վերանվանել",
         "reply": "Պատասխանել",
         "reply_in_thread": "Պատասխանել թեմայում",
-        "report_content": "Հաղորդել բովանդակության մասին",
         "report_room": "Տեղեկացնել/բողոքել սենյակի մասին",
         "resend": "Վերաուղարկել",
         "reset": "Վերականգնել",
@@ -117,8 +109,6 @@
         "sign_out": "Դուրս գալ",
         "skip": "Բաց թողնել",
         "start": "Սկսել",
-        "start_chat": "Սկսել զրույցը",
-        "start_new_chat": "Սկսել նոր զրույց",
         "stop": "Դադարեցնել",
         "submit": "Հաստատել",
         "subscribe": "Բաժանորդագրվել",
@@ -219,10 +209,7 @@
         "log_in_new_account": "<a>Մուտք գործել</a> ձեր նոր հաշիվ։",
         "logout_dialog": {
             "description": "Իսկապե՞ս ուզում եք դուրս գալ:",
-            "megolm_export": "Ձեռքով արտահանել բանալիները",
             "setup_key_backup_title": "Դուք կկորցնեք հասանելիությունը ձեր ծածկագրված հաղորդագրություններին ",
-            "setup_secure_backup_description_1": "Գաղտնագրված հաղորդագրությունները պաշտպանված են ծայրից ծայր գաղտնագրմամբ: Միայն դուք և ստացող(ներ)ն ունեք այս հաղորդագրությունները կարդալու բանալիները:",
-            "setup_secure_backup_description_2": "Երբ դուք դուրս գաք, այս բանալիները կջնջվեն այս սարքից, ինչը նշանակում է, որ դուք չեք կարողանա կարդալ գաղտնագրված հաղորդագրությունները, եթե դրանց բանալիները չունեք ձեր մյուս սարքերի վրա կամ դրանք պահուստավորած չեն սերվերում։",
             "skip_key_backup": "Ես չեմ ուզում, որ իմ գաղտնագրված հաղորդագրությունները"
         },
         "misconfigured_body": "Խնդրեք ձեր %(brand)s ադմինիստրատորին ստուգել <a>ձեր կարգավորումը</a> սխալ կամ կրկնվող գրառումների առկայության համար։",
@@ -274,7 +261,6 @@
             "point_the_camera": "Սկանավորեք այստեղ ցուցադրված QR կոդը",
             "scan_code_instruction": "Սկանավորեք QR կոդը մեկ այլ սարքով",
             "scan_qr_code": "Մուտք գործեք QR կոդով",
-            "security_code": "Անվտանգության կոդ",
             "security_code_prompt": "Եթե պահանջվի, մուտքագրեք ստորև նշված կոդը ձեր մյուս սարքում։",
             "select_qr_code": "Ընտրեք “%(scanQRCode)s”",
             "unsupported_explainer": "Ձեր հաշվի մատակարարը չի աջակցում նոր սարքում QR կոդով մուտք գործելուն։",
@@ -480,7 +466,6 @@
         "encrypted": "Ծածկագրված",
         "error": "Սխալ",
         "faq": "Հաճախ տրվող հարցեր",
-        "favourites": "Ընտրյալներ",
         "feedback": "Հետադարձ կապ",
         "filter_results": "Ֆիլտրի արդյունքները",
         "forward_message": "Փոխանցել հաղորդագրությունը",
@@ -488,7 +473,6 @@
         "go_to_settings": "Գնալ դեպի Կարգավորումներ",
         "guest": "Հյուր",
         "help": "Օգնություն",
-        "historical": "Պատմական",
         "home": "Գլխավոր էջ",
         "homeserver": "Գլխավոր սպասարկող",
         "identity_server": "Նույնականացման սերվեր",
@@ -500,13 +484,11 @@
         "light": "Լուսավոր",
         "loading": "Բեռնվում է...",
         "location": "Գտնվելու վայրը",
-        "low_priority": "Ցածր առաջնահերթություն",
         "matrix": "Matrix",
         "message": "Հաղորդագրություն",
         "message_layout": "Հաղորդագրության դասավորություն",
         "message_timestamp_invalid": "Անվավեր ժամանակային դրոշմանիշ",
         "microphone": "Խոսափող",
-        "model": "Մոդել",
         "moderation_and_safety": "Վերահսկողություն և անվտանգություն",
         "modern": "Ժամանակակից",
         "mute": "Անջատել ձայնը",
@@ -565,7 +547,6 @@
         "success": "Հաջող",
         "suggestions": "Առաջարկներ",
         "support": "Աջակցություն",
-        "system_alerts": "Համակարգի ահազանգեր",
         "theme": "Թեմա",
         "thread": "Թեմա",
         "threads": "Թեմաներ",
@@ -582,7 +563,6 @@
         "username": "Օգտանուն",
         "verified": "Ստուգված",
         "version": "Տարբերակ",
-        "video": "Տեսանյութ",
         "video_room": "Վիդեո սենյակ",
         "view_message": "Դիտել հաղորդագրությունը",
         "warning": "Զգուշացում"
@@ -854,7 +834,6 @@
         "thread_root_id": "Թեմայի արմատային ID: %(threadRootId)s",
         "threads_timeline": "Թեմաների ժամանակագրություն",
         "title": "Ծրագրավորողի գործիքներ",
-        "toggle_event": "միացնել իրադարձությունը",
         "toolbox": "Գործիքակազմ",
         "use_at_own_risk": "Այս UI-ը(օգտագործողի ինտերֆեյսը) չի ստուգում արժեքների տեսակները: Օգտագործել ձեր սեփական ռիսկով:",
         "user_read_up_to": "Օգտատերը կարդացել է մինչև՝ ",
@@ -876,22 +855,6 @@
     },
     "dialog_close_label": "Փակել երկխոսությունը",
     "download_completed": "Ներբեռնումն ավարտվեց",
-    "emoji": {
-        "categories": "Բաժիններ",
-        "category_activities": "Գործունեություն",
-        "category_animals_nature": "Կենդանիներ և բնություն",
-        "category_flags": "Դրոշներ",
-        "category_food_drink": "Սնունդ և ըմպելիք",
-        "category_frequently_used": "Հաճախակի օգտագործվող",
-        "category_objects": "Առարկաներ",
-        "category_smileys_people": "Սմայլիկներ և մարդիկ",
-        "category_symbols": "Նշաններ",
-        "category_travel_places": "Ճանապարհորդություն և վայրեր",
-        "quick_reactions": "Արագ արձագանքներ"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Չեղարկել որոնումը"
-    },
     "empty_room": "Դատարկ սենյակ",
     "empty_room_was_name": "Դատարկ սենյակ (նախկինում՝ %(oldName)s)",
     "encryption": {
@@ -952,19 +915,8 @@
         "set_up_recovery": "Կարգավորել վերականգնումը",
         "set_up_recovery_toast_description": "Ստեղծեք վերականգնման բանալի, որը կարող է օգտագործվել ձեր գաղտնագրված հաղորդագրությունների պատմությունը վերականգնելու համար` ձեր սարքերի կորուստի դեպքում։",
         "set_up_toast_title": "Կարգավորել անվտանգ պահուստավորում",
-        "setup_secure_backup": {
-            "explainer": "Պահուստավորեք ձեր բանալիները նախքան դուրս գալը, որպեսզի չկորցնեք դրանք:"
-        },
         "turn_on_key_storage": "Միացնել բանալիների պահեստը",
         "turn_on_key_storage_description": "Ապահով կերպով պահեք ձեր գաղտնագրական ինքնությունը և հաղորդագրությունների բանալիները սերվերի վրա: Սա թույլ կտա ձեզ դիտել ձեր հաղորդագրությունների պատմությունը ցանկացած նոր սարքի վրա:",
-        "udd": {
-            "interactive_verification_button": "Ինտերակտիվորեն ստուգել էմոջիի միջոցով",
-            "other_ask_verify_text": "Խնդրեք այս օգտատիրոջը ստուգել իր սեսիան կամ ձեռքով ստուգեք այն ստորև։",
-            "other_new_session_text": "%(name)s(%(userId)s )֊ը մուտք է գործել նոր սեսիա՝ առանց այն հաստատելու։",
-            "own_ask_verify_text": "Հաստատեք ձեր մյուս սեսիան՝ օգտագործելով ստորև նշված տարբերակներից մեկը։",
-            "own_new_session_text": "Դուք մուտք եք գործել նոր սեսիա՝ առանց այն ստուգելու։",
-            "title": "Անվստահելի է"
-        },
         "unable_to_setup_keys_error": "Հնարավոր չէ կարգավորել բանալիները",
         "verification": {
             "accepting": "Ընդունվում է…",
@@ -1455,7 +1407,6 @@
         "extended_profiles_msc_support": "Պահանջում է, որ ձեր սերվերը աջակցի MSC4133-ը",
         "feature_disable_call_per_sender_encryption": "Անջատել յուրաքանչյուր ուղարկողի գաղտնագրումը Element զանգի համար",
         "feature_wysiwyg_composer_description": "Հաղորդագրության խմբագրիչում օգտագործել \"ձևաչափված տեքստ\" (Rich Text)՝ Markdown-ի փոխարեն",
-        "group_calls": "Խմբային զանգի նոր փորձ",
         "group_developer": "Ծրագրավորող",
         "group_encryption": "Գաղտնագրում",
         "group_experimental": "Փորձարարական",
@@ -1470,7 +1421,6 @@
         "group_voip": "Ձայն և վիդեո",
         "group_widgets": "Վիջեթներ",
         "hidebold": "Թաքցնել ծանուցման կետը (ցուցադրել միայն քանակների նշանները)",
-        "html_topic": "Ցուցադրել սենյակի թեմաների HTML ներկայացումը",
         "join_beta": "Միանալ բետային",
         "join_beta_reload": "Բետային միանալը կվերաբեռնի %(brand)s-ը։",
         "jump_to_date": "Անցնել ամսաթվին (ավելացնում է /jumptodate և անցնում ամսաթվի վերնագրին)",
@@ -1482,20 +1432,16 @@
         "location_share_live_description": "Ժամանակավոր իրականացում: Տեղերը պահպանվում են սենյակների պատմության մեջ:",
         "mjolnir": "Մարդկանց անտեսելու նոր եղանակներ",
         "msc3531_hide_messages_pending_moderation": "Թույլատրել մոդերատորներին թաքցնել մոդերացիայի սպասող հաղորդագրությունները։",
-        "new_room_list": "Ակտիվացնել նոր սենյակների ցուցակը",
         "notification_settings": "Նոր ծանուցումների կարգավորումներ",
         "notification_settings_beta_caption": "Ներկայացնում ենք ձեր ծանուցումների կարգավորումները փոխելու ավելի պարզ միջոց: Անհատականացրեք ձեր %(brand)s-ն այնպես, ինչպես ցանկանում եք:",
         "notification_settings_beta_title": "Ծանուցման կարգավորումներ",
         "notifications": "Միացնել ծանուցումների վահանակը սենյակի վերնագրում",
         "render_reaction_images": "Արձանագրել հատուկ պատկերներ ռեակցիաներում",
         "render_reaction_images_description": "Երբեմն կոչվում է “հատուկ էմոջիներ”:",
-        "report_to_moderators": "Հաղորդել մոդերատորներին",
-        "report_to_moderators_description": "Սենյակներում, որոնք աջակցում են չափավորումը, “Հաշվետվություն” կոճակը թույլ կտա ձեզ հաղորդել չարաշահումների մասին սենյակների մոդերատորներին:",
         "sliding_sync": "Սահող համաժամեցման(Sliding Sync) ռեժիմ",
         "sliding_sync_description": "Ակտիվ մշակման փուլում է, չի կարող անջատվել։",
         "sliding_sync_disabled_notice": "Անջատելու համար դուրս եկեք և նորից մուտք գործեք",
         "sliding_sync_server_no_support": "Ձեր սերվերը չունի աջակցություն",
-        "under_active_development": "Ակտիվ մշակման փուլում։",
         "unrealiable_e2e": "Անհուսալի է գաղտնագրված սենյակներում",
         "video_rooms": "Վիդեո սենյակներ",
         "video_rooms_a_new_way_to_chat": "Ձայնի և տեսանյութի միջոցով զրուցելու նոր եղանակ %(brand)s-ում:",
@@ -1551,9 +1497,6 @@
         "room_rejoin_warning": "Այս սենյակը հանրային չէ։ Դուք չեք կարողանա նորից միանալ առանց հրավերի։",
         "space_rejoin_warning": "Այս տարածքը հանրային չէ։ Դուք չեք կարողանա կրկին միանալ առանց հրավերի։"
     },
-    "left_panel": {
-        "open_dial_pad": "Բացեք թվերի հավաքման վահանակը"
-    },
     "lightbox": {
         "rotate_left": "Պտտել ձախ",
         "rotate_right": "Պտտել աջ",
@@ -1652,7 +1595,6 @@
         "mentions_and_keywords": "@mentions (հիշատակումներ) և բանալի բառեր",
         "mentions_and_keywords_description": "Ստանալ ծանուցում միայն հիշատակումներով և բանալի բառերով, ինչպես սահմանված են ձեր <a> կարգաբերումներում</a>",
         "mentions_keywords": "Նշումներ/հիշատակումներ և բանալի բառեր",
-        "message_didnt_send": "Հաղորդագրությունը չի ուղարկվել: Սեղմեք տեղեկությունների համար:",
         "mute_description": "Դուք չեք ստանա ոչ մի ծանուցում"
     },
     "notifier": {
@@ -1739,7 +1681,6 @@
     },
     "quick_settings": {
         "all_settings": "Բոլոր կարգավորումները",
-        "metaspace_section": "Ամրացնել կողային վահանակում",
         "sidebar_settings": "Լրացուցիչ ընտրանքներ",
         "title": "Արագ կարգավորումներ"
     },
@@ -1757,25 +1698,10 @@
     },
     "report_content": {
         "description": "Այս հաղորդագրության մասին հաղորդելը կուղարկի դրա եզակի «իրադարձության ID-ն» ձեր գլխավոր սերվերի ադմինիստրատորին: Եթե այս սենյակում հաղորդագրությունները գաղտնագրված են, ձեր գլխավոր սերվերի ադմինիստրատորը չի կարողանա կարդալ հաղորդագրության տեքստը կամ դիտել որևէ ֆայլ կամ պատկեր:",
-        "disagree": "Համաձայն չեմ",
-        "error_create_room_moderation_bot": "Հնարավոր չէ ստեղծել սենյակ մոդերատորական բոտի միջոցով",
         "hide_messages_from_user": "Նշեք, եթե ցանկանում եք թաքցնել այս օգտատիրոջից ստացված բոլոր ներկա և ապագա հաղորդագրությունները։",
         "ignore_user": "Անտեսել օգտատիրոջը",
-        "illegal_content": "Անօրինական բովանդակություն",
         "missing_reason": "Խնդրում ենք նշել, թե ինչու եք հայտնում(բողոքում) այդ մասին:",
-        "nature": "Խնդրում ենք ընտրել բնույթ և նկարագրել, թե ինչն է այս հաղորդագրությունը դարձնում վիրավորական։",
-        "nature_disagreement": "Այս օգտատիրոջ գրածը սխալ է։\nՍա կհաղորդվի սենյակի մոդերատորներին։",
-        "nature_illegal": "Այս օգտատերը ցուցաբերում է անօրինական վարքագիծ, օրինակ ՝ վիրավորում է մարդկանց կամ սպառնում է բռնությամբ։\nԱյս մասին կտեղեկացվի սենյակի մոդերատորներին, ովքեր կարող են տեղեկությունը փոխանցել իրավապահ մարմիններին:",
-        "nature_nonstandard_admin": "Այս սենյակը նախատեսված է արգելված կամ թունավոր բովանդակություն տեղադրելու համար, կամ մոդերատորները չեն կարողանում վերահսկել անօրինական կամ թունավոր բովանդակությունը։\nԱյս մասին կտեղեկացվի %(homeserver)s-ի ադմինիստրատորներին:",
-        "nature_nonstandard_admin_encrypted": "Այս սենյակը նախատեսված է արգելված կամ թունավոր բովանդակություն տեղադրելու համար, կամ մոդերատորները չեն կարողանում վերահսկել անօրինական կամ թունավոր բովանդակությունը։\nԱյս մասին կտեղեկացվի %(homeserver)s֊ի ադմինիստրատորներին: Ադմինիստրատորները չեն կարողանա կարդալ այս սենյակի գաղտնագրված բովանդակությունը/հաղորդագրությունները:",
-        "nature_other": "Որևէ այլ պատճառ։ Խնդրում ենք նկարագրել խնդիրը։\nՍա կհաղորդվի սենյակի մոդերատորներին։",
-        "nature_spam": "Այս օգտվողը սենյակում ուղարկում է գովազդներ, հղումներ դեպի գովազդ կամ քարոզչություն:\nԱյս մասին կտեղեկացվի սենյակի մոդերատորներին:",
-        "nature_toxic": "Այս օգտատերը ցուցաբերում է ագրեսիվ(տոքսիկ) վարք, օրինակ՝ վիրավորում է այլ օգտատերերի, ընտանեկան հանգստի սենյակում տեղադրում է միայն մեծահասակների համար նախատեսված նյութեր կամ այլ կերպ խախտում է այդ սենյակի կանոնները:\nԱյս մասին կտեղեկացվի սենյակի մոդերատորներին:",
-        "other_label": "Այլ",
-        "report_content_to_homeserver": "Հաղորդել բովանդակությունը ձեր գլխավոր սերվերի(Homeserver) ադմինիստրատորին",
-        "report_entire_room": "Հաղորդել ամբողջ սենյակի մասին",
-        "spam_or_propaganda": "Սպամ կամ քարոզչություն",
-        "toxic_behaviour": "Թունավոր/տոքսիկ/վիրավորական վարքագիծ"
+        "report_content_to_homeserver": "Հաղորդել բովանդակությունը ձեր գլխավոր սերվերի(Homeserver) ադմինիստրատորին"
     },
     "report_room": {
         "description": "Հաղորդե այս սենյակի մասին ձեր հաշվի մատակարարին(account provider)։ Եթե հաղորդագրությունները գաղտնագրված են, ձեր ադմինիստրատորը չի կարողանա կարդալ դրանք։",
@@ -2042,41 +1968,16 @@
         "waiting_for_join_title": "Սպասում ենք %(brand)s-ին օգտատերերի միանալուն"
     },
     "room_list": {
-        "add_room_label": "Ավելացնել սենյակ",
         "add_space_label": "Ավելացնել տարածք",
-        "breadcrumbs_empty": "Վերջերս այցելած սենյակներ չկան",
-        "breadcrumbs_label": "Վերջերս այցելած սենյակներ",
         "failed_add_tag": "Չհաջողվեց %(tagName)s պիտակը(tag) ավելացնել սենյակին",
         "failed_remove_tag": "Չհաջողվեց հեռացնել %(tagName)s պիտակը(tag) սենյակից",
         "failed_set_dm_tag": "Չհաջողվեց սահմանել ուղիղ հաղորդագրության պիտակը(tag)",
-        "home_menu_label": "Գլխավոր էջի ընտրանքներ",
-        "join_public_room_label": "Միանալ հանրային սենյակին",
-        "joining_rooms_status": {
-            "one": "Ներկայումս միանում է %(count)s սենյակին",
-            "other": "Ներկայումս միանում է %(count)s սենյակներին"
-        },
         "list_title": "Սենյակների ցանկ",
         "more_options": {
             "leave_room": "Լքել սենյակը"
         },
         "notification_options": "Ծանուցման ընտրանքներ",
-        "redacting_messages_status": {
-            "one": "Ներկայումս ջնջվում են %(count)s սենյակում",
-            "other": "Ներկայումս ջնջվում են %(count)s սենյակներում"
-        },
-        "show_less": "Ցուցադրել ավելի քիչ",
-        "show_n_more": {
-            "one": "Ցուցադրել ևս %(count)s",
-            "other": "Ցուցադրել ևս %(count)s"
-        },
-        "show_previews": "Ցուցադրել հաղորդագրությունների նախադիտումները",
-        "sort_by": "Տեսակավորել ըստ",
-        "sort_by_activity": "Գործունեություն",
-        "sort_by_alphabet": "Ա—Ֆ",
-        "sort_unread_first": "Սկզբում ցուցադրել չկարդացված հաղորդագրություններով սենյակները",
-        "space_menu_label": "%(spaceName)s-ի մենյուն",
-        "sublist_options": "Ցուցակի ընտրանքներ",
-        "suggested_rooms_heading": "Խորհուդ տրվող սենյակներ"
+        "show_less": "Ցուցադրել ավելի քիչ"
     },
     "room_settings": {
         "access": {
@@ -2771,7 +2672,6 @@
         "send_typing_notifications": "Ուղարկել տեքստ գրելու ծանուցումներ",
         "sessions": {
             "best_security_note": "Լավագույն անվտանգության համար ստուգեք ձեր սեսիաները և դուրս եկեք ցանկացած սեսիայից, որը այլևս չեք ճանաչում կամ չեք օգտագործում։",
-            "browser": "Զննարկիչ",
             "confirm_sign_out": {
                 "one": "Հաստատեք այս սարքից դուրս գալը",
                 "other": "Հաստատեք այս սարքերից դուրս գալը"
@@ -2822,7 +2722,6 @@
             "no_sessions": "Սեսիաներ չեն գտնվել։",
             "no_unverified_sessions": "Չստուգված սեսիաներ չեն գտնվել:",
             "no_verified_sessions": "Հաստատված սեսիաներ չեն գտնվել։",
-            "os": "Օպերացիոն համակարգ",
             "other_sessions_heading": "Այլ սեսիաներ",
             "push_heading": "Push ծանուցումներ",
             "push_subheading": "Ստանալ push ծանուցումներ այս սեսիայում։",
@@ -2883,13 +2782,11 @@
         "showbold": "Ցուցադրել բոլոր գործողությունները սենյակների ցանկում (կետեր կամ չկարդացված հաղորդագրությունների քանակ)",
         "sidebar": {
             "dialog_title": "<strong>Կարգավորումներ․</strong> Կողային վահանակ",
-            "metaspaces_favourites_description": "Խմբավորել ձեր բոլոր սիրելի սենյակներն ու մարդկանց մեկ տեղում։",
             "metaspaces_home_all_rooms": "Ցուցադրել բոլոր սենյակները",
             "metaspaces_home_all_rooms_description": "Ցուցադրել ձեր բոլոր սենյակները Գլխավոր էջում, նույնիսկ եթե դրանք գտնվում են որևէ տարածքում։",
             "metaspaces_home_description": "Գլխավոր էջը օգտակար է ամեն ինչի մասին ընդհանուր պատկերացում կազմելու համար։",
             "metaspaces_orphans": "Տարածքից դուրս սենյակներ",
             "metaspaces_orphans_description": "Խմբավորել ձեր բոլոր սենյակները, որոնք տարածքի մաս չեն կազմում, մեկ տեղում։",
-            "metaspaces_people_description": "Խմբավորել ձեր բոլոր մարդկանց մեկ տեղում։",
             "metaspaces_subsection": "Ցուցադրվող տարածքներ",
             "metaspaces_video_rooms": "Տեսազանգի սենյակներ և համաժողովներ(կոնֆերանսներ)",
             "metaspaces_video_rooms_description": "Խմբավորել բոլոր մասնավոր տեսազանգի սենյակներն ու համաժողովները(կոնֆերանսները)։",
@@ -2910,7 +2807,6 @@
             "audio_output": "Աուդիո ելք",
             "audio_output_empty": "Աուդիո ելքեր չեն հայտնաբերվել",
             "auto_gain_control": "Ավտոմատ ուժեղացման կառավարում",
-            "connection_section": "Միացում",
             "dialog_title": "<strong>Կարգավորումներ․</strong> Ձայն և վիդեո",
             "echo_cancellation": "Արձագանքի չեղարկում",
             "enable_fallback_ice_server": "Թույլատրել հետադարձ զանգի օժանդակ սերվեր () %(server)s",
@@ -3093,12 +2989,6 @@
     "space_settings": {
         "title": "Կարգավորումներ - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Դուք չունեք այս տարածքում սենյակներ ավելացնելու թույլտվություններ",
-        "error_no_permission_add_space": "Դուք չունեք այս տարածքում տարածքներ ավելացնելու թույլտվություններ",
-        "error_no_permission_create_room": "Դուք այս տարածքում նոր սենյակներ ստեղծելու թույլտվություն չունեք",
-        "error_no_permission_invite": "Դուք չունեք այս տարածք մարդկանց հրավիրելու թույլտվություններ"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Մուտքագրեք այն նոր սերվերի անունը, որը ցանկանում եք ուսումնասիրել։",
@@ -3225,7 +3115,6 @@
         "download_action_downloading": "Ներբեռնում",
         "download_failed": "Չհաջողվեց ներբեռնել",
         "download_failed_description": "Այս ֆայլը ներբեռնելիս սխալ տեղի ունեցավ",
-        "e2e_state": "\"Ծայրից ծայր\" գաղտնագրման կարգավիճակը",
         "edits": {
             "tooltip_label": "Խմբագրվել է %(date)s-ին։ Սեղմեք՝ փոփոխությունները դիտելու համար։",
             "tooltip_sub": "Սեղմեք՝ փոփոխությունները դիտելու համար",
@@ -3307,9 +3196,7 @@
         "m.poll.start": "%(senderName)s-ը սկսել է հարցում՝ %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s-ը փոխել է սենյակի ավատարը:",
-            "changed_img": "%(senderDisplayName)s-ը փոխել է սենյակի ավատարը <img/>-ով",
-            "lightbox_title": "%(senderDisplayName)s-ը փոխել է %(roomName)s֊ի ավատարը",
-            "removed": "%(senderDisplayName)s-ը հեռացրեց սենյակի ավատարը:"
+            "lightbox_title": "%(senderDisplayName)s-ը փոխել է %(roomName)s֊ի ավատարը"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3911,13 +3798,7 @@
         "close_to_view_right_panel": "Փակել այս վիջեթը՝ այն այս վահանակում դիտելու համար",
         "context_menu": {
             "delete": "Ջնջել վիջեթը",
-            "delete_warning": "Վիջեթը ջնջելիս այն կհեռացվի այս սենյակի բոլոր օգտատերերի համար։ Վստա՞հ եք, որ ուզում եք ջնջել այս վիջեթը։",
-            "move_left": "Տեղափոխել ձախ",
-            "move_right": "Տեղափոխել աջ",
-            "remove": "Հեռացնել բոլորի համար",
-            "revoke": "Չեղարկել թույլտվությունները",
-            "screenshot": "Նկարահանել",
-            "start_audio_stream": "Սկսել աուդիո հեռարձակում"
+            "delete_warning": "Վիջեթը ջնջելիս այն կհեռացվի այս սենյակի բոլոր օգտատերերի համար։ Վստա՞հ եք, որ ուզում եք ջնջել այս վիջեթը։"
         },
         "cookie_warning": "Այս վիջեթը կարող է օգտագործել cookie-ներ։",
         "error_hangup_description": "Դուք անջատվել եք զանգից։ (Սխալ՝ %(message)s )",
diff --git a/apps/web/src/i18n/strings/id.json b/apps/web/src/i18n/strings/id.json
index a6d95026ba..006fc8c544 100644
--- a/apps/web/src/i18n/strings/id.json
+++ b/apps/web/src/i18n/strings/id.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Pemilih emoji",
         "jump_first_invite": "Pergi ke undangan pertama.",
         "message_composer": "Komposer pesan",
         "n_unread_messages": {
@@ -11,8 +10,6 @@
             "one": "1 sebutan yang belum dibaca.",
             "other": "%(count)s pesan yang belum dibaca termasuk sebutan."
         },
-        "recent_rooms": "Ruangan terkini",
-        "room_name": "Ruangan %(name)s",
         "room_status_bar": "Bilah status ruangan",
         "seek_bar_label": "Bilah pencarian audio",
         "unread_messages": "Pesan yang belum dibaca."
@@ -22,7 +19,6 @@
         "accept": "Terima",
         "add": "Tambahkan",
         "add_existing_room": "Tambahkan ruangan yang sudah ada",
-        "add_people": "Tambahkan orang",
         "apply": "Terapkan",
         "approve": "Setujui",
         "ask_to_join": "Bertanya untuk bergabung",
@@ -57,7 +53,6 @@
         "enter_fullscreen": "Masuki layar penuh",
         "exit_fullscreeen": "Keluar dari layar penuh",
         "expand": "Buka",
-        "explore_public_rooms": "Jelajahi ruangan publik",
         "explore_rooms": "Jelajahi ruangan",
         "export": "Ekspor",
         "forward": "Teruskan",
@@ -69,8 +64,6 @@
         "ignore": "Abaikan",
         "import": "Impor",
         "invite": "Undang",
-        "invite_to_space": "Undang ke space",
-        "invites_list": "Undangan",
         "join": "Bergabung",
         "learn_more": "Pelajari lebih lanjut",
         "leave": "Tinggalkan",
@@ -97,7 +90,6 @@
         "rename": "Ubah Nama",
         "reply": "Balas",
         "reply_in_thread": "Balas di utasan",
-        "report_content": "Laporkan Konten",
         "report_room": "Laporkan ruangan",
         "resend": "Kirim Ulang",
         "reset": "Atur Ulang",
@@ -117,8 +109,6 @@
         "sign_out": "Hapus perangkat ini",
         "skip": "Lewat",
         "start": "Mulai",
-        "start_chat": "Mulai obrolan",
-        "start_new_chat": "Mulai obrolan baru",
         "stop": "Berhenti",
         "submit": "Kirim",
         "subscribe": "Berlangganan",
@@ -219,10 +209,7 @@
         "log_in_new_account": "<a>Masuk</a> ke akun yang baru.",
         "logout_dialog": {
             "description": "Apakah Anda yakin ingin keluar?",
-            "megolm_export": "Ekspor kunci secara manual",
             "setup_key_backup_title": "Anda akan kehilangan akses ke pesan terenkripsi Anda",
-            "setup_secure_backup_description_1": "Pesan terenkripsi diamankan dengan enkripsi ujung ke ujung. Hanya Anda dan penerima punya kuncinya untuk membaca pesan ini.",
-            "setup_secure_backup_description_2": "Ketika Anda keluar, kunci-kunci ini akan dihapus dari perangkat ini, yang berarti Anda tidak dapat membaca pesan-pesan terenkripsi kecuali jika Anda mempunyai kuncinya di perangkat Anda yang lain, atau telah mencadangkannya ke server.",
             "skip_key_backup": "Saya tidak ingin pesan-pesan terenkripsi saya"
         },
         "misconfigured_body": "Tanyakan admin %(brand)s Anda untuk memeriksa <a>konfigurasi Anda</a> untuk entri yang tidak benar atau entri duplikat.",
@@ -274,7 +261,6 @@
             "point_the_camera": "Arahkan kamera ke kode QR yang ditampilkan di sini",
             "scan_code_instruction": "Pindai kode QR dengan perangkat lain",
             "scan_qr_code": "Masuk dengan kode QR",
-            "security_code": "Kode keamanan",
             "security_code_prompt": "Jika diminta, masukkan kode di bawah ini pada perangkat Anda yang lain.",
             "select_qr_code": "Pilih \"%(scanQRCode)s\"",
             "unsupported_explainer": "Penyedia akun Anda tidak mendukung masuk ke perangkat baru dengan kode QR.",
@@ -480,7 +466,6 @@
         "encrypted": "Terenkripsi",
         "error": "Kesalahan",
         "faq": "Pertanyaan Umum",
-        "favourites": "Favorit",
         "feedback": "Masukan",
         "filter_results": "Saring hasil",
         "forward_message": "Teruskan pesan",
@@ -488,7 +473,6 @@
         "go_to_settings": "Pergi ke Pengaturan",
         "guest": "Tamu",
         "help": "Bantuan",
-        "historical": "Riwayat",
         "home": "Beranda",
         "homeserver": "Homeserver",
         "identity_server": "Server identitas",
@@ -500,13 +484,11 @@
         "light": "Terang",
         "loading": "Memuat…",
         "location": "Lokasi",
-        "low_priority": "Prioritas rendah",
         "matrix": "Matrix",
         "message": "Pesan",
         "message_layout": "Tata letak pesan",
         "message_timestamp_invalid": "Stempel waktu tidak valid",
         "microphone": "Mikrofon",
-        "model": "Model",
         "moderation_and_safety": "Moderasi dan keamanan",
         "modern": "Modern",
         "mute": "Bisukan",
@@ -566,7 +548,6 @@
         "success": "Berhasil",
         "suggestions": "Saran",
         "support": "Dukungan",
-        "system_alerts": "Pemberitahuan Sistem",
         "theme": "Tema",
         "thread": "Utasan",
         "threads": "Utasan",
@@ -583,7 +564,6 @@
         "username": "Nama Pengguna",
         "verified": "Terverifikasi",
         "version": "Versi",
-        "video": "Video",
         "video_room": "Ruangan video",
         "view_message": "Tampilkan pesan",
         "warning": "Peringatan"
@@ -871,7 +851,6 @@
         "thread_root_id": "ID Akar Utas: %(threadRootId)s",
         "threads_timeline": "Lini masa utasan",
         "title": "Alat pengembang",
-        "toggle_event": "alih peristiwa",
         "toolbox": "Kotak Peralatan",
         "use_at_own_risk": "UI ini TIDAK memeriksa tipe nilai. Gunakan dengan hati-hati.",
         "user_avatar": "Avatar: %(avatar)s",
@@ -906,22 +885,6 @@
     },
     "dialog_close_label": "Tutup dialog",
     "download_completed": "Unduhan Selesai",
-    "emoji": {
-        "categories": "Categori",
-        "category_activities": "Aktivitas",
-        "category_animals_nature": "Hewan & Alam",
-        "category_flags": "Bendera",
-        "category_food_drink": "Makanan & Minuman",
-        "category_frequently_used": "Sering Digunakan",
-        "category_objects": "Obyek",
-        "category_smileys_people": "Senyuman & Orang",
-        "category_symbols": "Simbol",
-        "category_travel_places": "Aktivitas & Tempat",
-        "quick_reactions": "Reaksi Cepat"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Batalkan pencarian"
-    },
     "empty_room": "Ruangan kosong",
     "empty_room_was_name": "Ruangan kosong (sebelumnya %(oldName)s)",
     "encryption": {
@@ -959,7 +922,6 @@
         "import_invalid_passphrase": "Pemeriksaan autentikasi gagal: kata sandi salah?",
         "key_storage_out_of_sync": "Penyimpanan kunci Anda tidak tersinkron.",
         "key_storage_out_of_sync_description": "Konfirmasikan kunci pemulihan Anda untuk mempertahankan akses ke penyimpanan kunci dan riwayat pesan Anda.",
-        "message_shared_by": "%(displayName)s (%(userId)s) telah membagikan pesan ini sejak Anda tidak berada di ruangan saat pesan tersebut dikirim.",
         "messages_not_secure": {
             "cause_1": "Homeserver Anda",
             "cause_2": "Homeserver pengguna yang Anda memverifikasi",
@@ -985,19 +947,8 @@
         "set_up_recovery": "Siapkan pemulihan",
         "set_up_recovery_toast_description": "Buat kunci pemulihan yang dapat digunakan untuk memulihkan riwayat pesan terenkripsi jika Anda kehilangan akses ke perangkat Anda.",
         "set_up_toast_title": "Siapkan Cadangan Aman",
-        "setup_secure_backup": {
-            "explainer": "Cadangkan kunci Anda sebelum keluar untuk menghindari kehilangannya."
-        },
         "turn_on_key_storage": "Aktifkan penyimpanan kunci",
         "turn_on_key_storage_description": "Simpan identitas kriptografi dan kunci pesan Anda secara aman di server. Ini akan memungkinkan Anda untuk melihat riwayat pesan Anda di perangkat baru mana pun.",
-        "udd": {
-            "interactive_verification_button": "Verifikasi secara interaktif sengan emoji",
-            "other_ask_verify_text": "Tanyakan pengguna ini untuk memverifikasi sesinya, atau verifikasi secara manual di bawah.",
-            "other_new_session_text": "%(name)s (%(userId)s) masuk ke sesi yang baru tanpa memverifikasinya:",
-            "own_ask_verify_text": "Verifikasi sesi Anda lainnya dengan menggunakan salah satu pilihan di bawah.",
-            "own_new_session_text": "Anda masuk ke sesi baru tanpa memverifikasinya:",
-            "title": "Tidak Dipercayai"
-        },
         "unable_to_setup_keys_error": "Tidak dapat mengatur kunci-kunci",
         "verification": {
             "accepting": "Menerima…",
@@ -1511,7 +1462,6 @@
         "extended_profiles_msc_support": "Memerlukan server Anda untuk mendukung MSC4133",
         "feature_disable_call_per_sender_encryption": "Nonaktifkan enkripsi per pengirim untuk Element Call",
         "feature_wysiwyg_composer_description": "Menggunakan teks kaya daripada Markdown dalam komposer pesan.",
-        "group_calls": "Pengalaman panggilan grup baru",
         "group_developer": "Pengembang",
         "group_encryption": "Enkripsi",
         "group_experimental": "Eksperimental",
@@ -1526,7 +1476,6 @@
         "group_voip": "Suara & Video",
         "group_widgets": "Widget",
         "hidebold": "Sembunyikan titik notifikasi (hanya tampilkan lencana penghitung)",
-        "html_topic": "Tampilkan versi HTML dari topik ruangan",
         "join_beta": "Bergabung dengan beta",
         "join_beta_reload": "Bergabung dengan beta akan memuat ulang %(brand)s.",
         "jump_to_date": "Pergi ke tanggal (menambahkan /jumptodate dan pergi ke tajukan tanggal)",
@@ -1538,20 +1487,16 @@
         "location_share_live_description": "Penerapan sementara. Lokasi tetap berada di riwayat ruangan.",
         "mjolnir": "Cara baru mengabaikan orang",
         "msc3531_hide_messages_pending_moderation": "Memperbolehkan moderator untuk menyembunyikan pesan yang akan dimoderasikan.",
-        "new_room_list": "Aktifkan daftar ruangan baru",
         "notification_settings": "Pengaturan Notifikasi Baru",
         "notification_settings_beta_caption": "Perkenalkan cara yang lebih sederhana untuk mengubah pengaturan notifikasi Anda. Sesuaikan %(brand)s Anda, sesuai keinginan Anda.",
         "notification_settings_beta_title": "Pengaturan Notifikasi",
         "notifications": "Aktifkan panel notifikasi di tajuk ruangan",
         "render_reaction_images": "Render gambar khusus dalam reaksi",
         "render_reaction_images_description": "Terkadang disebut sebagai \"emoji khusus\".",
-        "report_to_moderators": "Laporkan ke moderator",
-        "report_to_moderators_description": "Dalam ruangan yang mendukung moderasi, tombol “Laporkan” memungkinkan Anda untuk melaporkan penyalahgunaan ke moderator ruangan.",
         "sliding_sync": "Mode Sinkronisasi Geser",
         "sliding_sync_description": "Dalam pengembangan aktif, tidak dapat dinonaktifkan.",
         "sliding_sync_disabled_notice": "Keluar dan masuk kembali ke akun untuk menonaktifkan",
         "sliding_sync_server_no_support": "Server Anda tidak memiliki dukungan",
-        "under_active_development": "Dalam pengembangan aktif.",
         "unrealiable_e2e": "Tidak dapat diandalkan di ruangan terenkripsi",
         "video_rooms": "Ruangan video",
         "video_rooms_a_new_way_to_chat": "Sebuah cara baru untuk mengobrol melalui suara dan video di %(brand)s.",
@@ -1607,9 +1552,6 @@
         "room_rejoin_warning": "Ruangan ini tidak publik. Anda tidak dapat bergabung lagi tanpa sebuah undangan.",
         "space_rejoin_warning": "Space ini tidak publik. Anda tidak dapat bergabung lagi tanpa sebuah undangan."
     },
-    "left_panel": {
-        "open_dial_pad": "Buka tombol penyetel"
-    },
     "lightbox": {
         "rotate_left": "Putar ke Kiri",
         "rotate_right": "Putar ke Kanan",
@@ -1707,7 +1649,6 @@
         "mentions_and_keywords": "@sebutan & kata kunci",
         "mentions_and_keywords_description": "Dapatkan notifikasi hanya dengan sebutan dan kata kunci yang diatur di <a>pengaturan</a> Anda",
         "mentions_keywords": "Sebutan dan kata kunci",
-        "message_didnt_send": "Pesan tidak terkirim. Klik untuk informasi.",
         "mute_description": "Anda tidak akan mendapatkan notifikasi apa pun"
     },
     "notifier": {
@@ -1803,7 +1744,6 @@
     },
     "quick_settings": {
         "all_settings": "Semua pengaturan",
-        "metaspace_section": "Pasang pin ke bilah samping",
         "sidebar_settings": "Opsi lebih banyak",
         "title": "Pengaturan cepat"
     },
@@ -1821,25 +1761,10 @@
     },
     "report_content": {
         "description": "Melaporkan pesan ini akan mengirimkan ID peristiwa yang untuk ke administrator homeserver Anda. Jika pesan-pesan di ruangan ini terenkripsi, maka administrator homeserver Anda tidak akan dapat membaca teks pesan atau menampilkan file atau gambar apa saja.",
-        "disagree": "Tidak Setuju",
-        "error_create_room_moderation_bot": "Tidak dapat membuat ruangan dengan bot moderasi",
         "hide_messages_from_user": "Periksa jika Anda ingin menyembunyikan semua pesan saat ini dan pesan baru dari pengguna ini.",
         "ignore_user": "Abaikan pengguna",
-        "illegal_content": "Konten Ilegal",
         "missing_reason": "Mohon isi kenapa Anda melaporkan.",
-        "nature": "Harap pilih sifat dan jelaskan apa yang membuat pesan ini kasar.",
-        "nature_disagreement": "Apa yang ditulis pengguna itu salah.\nIni akan dilaporkan ke moderator ruangan.",
-        "nature_illegal": "Pengguna ini menampilkan kelakuan yang ilegal, misalnya dengan doxing orang lain atau ancaman kekerasan.\nIni akan dilaporkan ke moderator ruangan yang mungkin melaporkannya juga ke otoritas hukum.",
-        "nature_nonstandard_admin": "Ruang ini didedikasikan untuk konten ilegal atau toksik atau moderator gagal memoderasi konten ilegal atau toksik.\nHal ini akan dilaporkan kepada administrator %(homeserver)s.",
-        "nature_nonstandard_admin_encrypted": "Ruang ini didedikasikan untuk konten ilegal atau toksik atau moderator gagal memoderasi konten ilegal atau toksik.\nHal ini akan dilaporkan kepada administrator %(homeserver)s. Administrator TIDAK akan dapat membaca konten terenkripsi di ruangan ini.",
-        "nature_other": "Alasan yang lain. Mohon jelaskan masalahnya.\nIni akan dilaporkan ke moderator ruangan.",
-        "nature_spam": "Pengguna ini spam ruangan dengan iklan, tautan ke iklan atau ke propaganda.\nIni akan dilaporkan ke moderator ruangan.",
-        "nature_toxic": "Pengguna ini menampilkan kelakuan yang toksik, misalnya dengan menghina pengguna lain atau membagikan konten dewasa di ruangan ramah keluarga atau merusak aturan ruangan.\nIni akan dilaporkan ke moderator ruangan.",
-        "other_label": "Lainnya",
-        "report_content_to_homeserver": "Laporkan Konten ke Administrator Homeserver Anda",
-        "report_entire_room": "Laporkan seluruh ruangan",
-        "spam_or_propaganda": "Spam atau propaganda",
-        "toxic_behaviour": "Kelakukan Toxic"
+        "report_content_to_homeserver": "Laporkan Konten ke Administrator Homeserver Anda"
     },
     "report_room": {
         "description": "Laporkan ruangan ini ke admin homeserver Anda. Ini akan mengirimkan ID unik ruangan, tetapi jika pesan dienkripsi, administrator tidak akan dapat membacanya atau melihat file terbagi.",
@@ -2106,41 +2031,16 @@
         "waiting_for_join_title": "Menunggu pengguna untuk bergabung ke %(brand)s"
     },
     "room_list": {
-        "add_room_label": "Tambahkan ruangan",
         "add_space_label": "Tambahkan space",
-        "breadcrumbs_empty": "Tidak ada ruangan yang baru saja dilihat",
-        "breadcrumbs_label": "Ruangan yang baru saja dilihat",
         "failed_add_tag": "Gagal menambahkan tag %(tagName)s ke ruangan",
         "failed_remove_tag": "Gagal menghapus tanda %(tagName)s dari ruangan",
         "failed_set_dm_tag": "Gagal menetapkan tanda pesan langsung",
-        "home_menu_label": "Opsi Beranda",
-        "join_public_room_label": "Bergabung dengan ruangan publik",
-        "joining_rooms_status": {
-            "one": "Saat ini bergabung dengan %(count)s ruangan",
-            "other": "Saat ini bergabung dengan %(count)s ruangan"
-        },
         "list_title": "Daftar ruangan",
         "more_options": {
             "leave_room": "Tinggalkan ruangan"
         },
         "notification_options": "Opsi notifikasi",
-        "redacting_messages_status": {
-            "one": "Saat ini menghapus pesan-pesan di %(count)s ruangan",
-            "other": "Saat ini menghapus pesan-pesan di %(count)s ruangan"
-        },
-        "show_less": "Tampilkan lebih sedikit",
-        "show_n_more": {
-            "one": "Tampilkan %(count)s lagi",
-            "other": "Tampilkan %(count)s lagi"
-        },
-        "show_previews": "Tampilkan tampilan pesan",
-        "sort_by": "Sortir berdasarkan",
-        "sort_by_activity": "Aktivitas",
-        "sort_by_alphabet": "A-Z",
-        "sort_unread_first": "Tampilkan ruangan dengan pesan yang belum dibaca dahulu",
-        "space_menu_label": "Menu %(spaceName)s",
-        "sublist_options": "Tampilkan daftar opsi",
-        "suggested_rooms_heading": "Ruangan yang Disarankan"
+        "show_less": "Tampilkan lebih sedikit"
     },
     "room_settings": {
         "access": {
@@ -2848,7 +2748,6 @@
         "send_typing_notifications": "Kirim notifikasi pengetikan",
         "sessions": {
             "best_security_note": "Untuk keamanan yang terbaik, verifikasi sesi Anda dan keluarkan sesi yang Anda tidak kenal atau tidak digunakan lagi.",
-            "browser": "Peramban",
             "confirm_sign_out": {
                 "one": "Konfirmasi mengeluarkan perangkat ini",
                 "other": "Konfirmasi mengeluarkan perangkat ini"
@@ -2899,7 +2798,6 @@
             "no_sessions": "Tidak ditemukan sesi apa pun.",
             "no_unverified_sessions": "Tidak ditemukan sesi yang belum diverifikasi.",
             "no_verified_sessions": "Tidak ditemukan sesi yang terverifikasi.",
-            "os": "Sistem operasi",
             "other_sessions_heading": "Sesi lainnya",
             "push_heading": "Notifikasi dorongan",
             "push_subheading": "Terima notifikasi dorongan di sesi ini.",
@@ -2960,13 +2858,11 @@
         "showbold": "Tampilkan semua aktivitas dalam daftar ruangan (titik atau jumlah pesan belum dibaca)",
         "sidebar": {
             "dialog_title": "<strong>Pengaturan:</strong> Bilah Samping",
-            "metaspaces_favourites_description": "Kelompokkan semua ruangan dan orang favorit Anda di satu tempat.",
             "metaspaces_home_all_rooms": "Tampilkan semua ruangan",
             "metaspaces_home_all_rooms_description": "Tampilkan semua ruangan di Beranda, walaupun mereka berada di sebuah space.",
             "metaspaces_home_description": "Beranda berguna untuk mendapatkan ikhtisar tentang semuanya.",
             "metaspaces_orphans": "Ruangan yang tidak berada di sebuah space",
             "metaspaces_orphans_description": "Kelompokkan semua ruangan yang tidak ada di sebuah space di satu tempat.",
-            "metaspaces_people_description": "Kelompokkan semua orang di satu tempat.",
             "metaspaces_subsection": "Space yang ditampilkan",
             "metaspaces_video_rooms": "Ruangan dan konferensi video",
             "metaspaces_video_rooms_description": "Kelompokkan semua ruangan dan konferensi video privat.",
@@ -2993,7 +2889,6 @@
             "audio_output": "Output Audio",
             "audio_output_empty": "Tidak ada output audio yang terdeteksi",
             "auto_gain_control": "Kendali suara otomatis",
-            "connection_section": "Koneksi",
             "dialog_title": "<strong>Pengaturan:</strong> Suara & Video",
             "echo_cancellation": "Pembatalan gema",
             "enable_fallback_ice_server": "Perbolehkan server bantuan panggilan cadangan (%(server)s)",
@@ -3176,12 +3071,6 @@
     "space_settings": {
         "title": "Pengaturan — %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Anda tidak memiliki izin untuk menambahkan ruangan di space ini",
-        "error_no_permission_add_space": "Anda tidak memiliki izin untuk menambahkan space ke space ini",
-        "error_no_permission_create_room": "Anda tidak memiliki izin untuk membuat ruangan baru di space ini",
-        "error_no_permission_invite": "Anda tidak diizinkan untuk mengundang orang-orang ke space ini"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Masukkan nama server baru yang Anda ingin jelajahi.",
@@ -3308,7 +3197,6 @@
         "download_action_downloading": "Mengunduh",
         "download_failed": "Pengunduhan gagal",
         "download_failed_description": "Terjadi kesalahan saat mengunduh berkas ini",
-        "e2e_state": "Keadaan enkripsi ujung ke ujung",
         "edits": {
             "tooltip_label": "Diedit di %(date)s. Klik untuk melihat editan.",
             "tooltip_sub": "Klik untuk melihat editan",
@@ -3390,9 +3278,7 @@
         "m.poll.start": "%(senderName)s telah memulai sebuah pungutan suara — %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s mengubah avatar ruangan ini.",
-            "changed_img": "%(senderDisplayName)s mengubah avatar ruangan ke <img/>",
-            "lightbox_title": "%(senderDisplayName)s mengubah avatar untuk %(roomName)s",
-            "removed": "%(senderDisplayName)s menghapus avatar ruangan."
+            "lightbox_title": "%(senderDisplayName)s mengubah avatar untuk %(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3996,13 +3882,7 @@
         "close_to_view_right_panel": "Tutup widget ini untuk menampilkannya di panel ini",
         "context_menu": {
             "delete": "Hapus widget",
-            "delete_warning": "Menghapus sebuah widget menghapusnya untuk semua pengguna di ruangan ini. Apakah Anda yakin untuk menghapus widget ini?",
-            "move_left": "Pindah ke kiri",
-            "move_right": "Pindah ke kanan",
-            "remove": "Hapus untuk semuanya",
-            "revoke": "Cabut izin",
-            "screenshot": "Ambil foto",
-            "start_audio_stream": "Mulai penyiaran audio"
+            "delete_warning": "Menghapus sebuah widget menghapusnya untuk semua pengguna di ruangan ini. Apakah Anda yakin untuk menghapus widget ini?"
         },
         "cookie_warning": "Widget ini mungkin menggunakan kuki.",
         "error_hangup_description": "Anda terputus dari panggilan. (Terjadi kesalahan: %(message)s)",
diff --git a/apps/web/src/i18n/strings/is.json b/apps/web/src/i18n/strings/is.json
index 2096a911b7..623731df8b 100644
--- a/apps/web/src/i18n/strings/is.json
+++ b/apps/web/src/i18n/strings/is.json
@@ -9,7 +9,6 @@
             "one": "1 ólesin tilvísun í þig.",
             "other": "%(count)s ólesin skilaboð að meðtöldum þar sem minnst er á þig."
         },
-        "room_name": "Spjallrás %(name)s",
         "unread_messages": "Ólesin skilaboð."
     },
     "a11y_jump_first_unread_room": "Fara í fyrstu ólesnu spjallrásIna.",
@@ -17,7 +16,6 @@
         "accept": "Samþykkja",
         "add": "Bæta við",
         "add_existing_room": "Bæta við fyrirliggjandi spjallrás",
-        "add_people": "Bæta við fólki",
         "apply": "Virkja",
         "approve": "Samþykkja",
         "back": "Til baka",
@@ -48,7 +46,6 @@
         "enter_fullscreen": "Fara í fullskjásstillingu",
         "exit_fullscreeen": "Fara úr fullskjásstillingu",
         "expand": "Fletta út",
-        "explore_public_rooms": "Kanna almenningsspjallrásir",
         "explore_rooms": "Kanna spjallrásir",
         "export": "Flytja út",
         "forward": "Áfram",
@@ -60,8 +57,6 @@
         "ignore": "Hunsa",
         "import": "Flytja inn",
         "invite": "Bjóða",
-        "invite_to_space": "Bjóða inn á svæði",
-        "invites_list": "Boðsgestir",
         "join": "Taka þátt",
         "learn_more": "Kanna nánar",
         "leave": "Fara út",
@@ -86,7 +81,6 @@
         "rename": "Endurnefna",
         "reply": "Svara",
         "reply_in_thread": "Svara í spjallþræði",
-        "report_content": "Kæra efni",
         "resend": "Endursenda",
         "reset": "Endursetja",
         "resume": "Halda áfram",
@@ -104,8 +98,6 @@
         "sign_out": "Skrá út",
         "skip": "Sleppa",
         "start": "Byrja",
-        "start_chat": "Hefja spjall",
-        "start_new_chat": "Hefja nýtt spjall",
         "stop": "Stöðva",
         "submit": "Senda inn",
         "subscribe": "Skrá",
@@ -190,9 +182,7 @@
         "log_in_new_account": "<a>Skráðu þig inn</a> í nýja notandaaðganginn þinn.",
         "logout_dialog": {
             "description": "Ertu viss um að þú viljir skrá þig út?",
-            "megolm_export": "Flytja út dulritunarlykla handvirkt",
             "setup_key_backup_title": "Þú munt tapa dulrituðu skilaboðunum þínum",
-            "setup_secure_backup_description_1": "Öryggi dulritaðra skilaboða er tryggt með enda-í-enda dulritun. Einungis þú og viðtakendurnir hafa dulritunarlyklana til að lesa slík skilaboð.",
             "skip_key_backup": "Ég vil ekki dulrituðu skilaboðin mín"
         },
         "misconfigured_body": "Biddu kerfisstjórann á %(brand)s að athuga hvort <a>uppsetningin þín</a> innihaldi rangar eða tvíteknar færslur.",
@@ -372,7 +362,6 @@
         "encrypted": "Dulritað",
         "error": "Villa",
         "faq": "Algengar spurningar",
-        "favourites": "Eftirlæti",
         "feedback": "Umsagnir",
         "filter_results": "Sía niðurstöður",
         "forward_message": "Áframsenda skilaboð",
@@ -380,7 +369,6 @@
         "go_to_settings": "Fara í stillingar",
         "guest": "Gestur",
         "help": "Hjálp",
-        "historical": "Ferilskráning",
         "home": "Forsíða",
         "homeserver": "Heimaþjónn",
         "identity_server": "Auðkennisþjónn",
@@ -391,11 +379,9 @@
         "legal": "Lagalegir fyrirvarar",
         "light": "Ljóst",
         "location": "Staðsetning",
-        "low_priority": "Lítill forgangur",
         "message": "Skilaboð",
         "message_layout": "Framsetning skilaboða",
         "microphone": "Hljóðnemi",
-        "model": "Gerð",
         "modern": "Nútímalegt",
         "mute": "Þagga niður",
         "n_members": {
@@ -449,7 +435,6 @@
         "success": "Tókst",
         "suggestions": "Tillögur",
         "support": "Aðstoð",
-        "system_alerts": "Aðvaranir kerfis",
         "theme": "Þema",
         "thread": "Spjallþráður",
         "threads": "Spjallþræðir",
@@ -463,7 +448,6 @@
         "username": "Notandanafn",
         "verified": "Staðfest",
         "version": "Útgáfa",
-        "video": "Myndskeið",
         "video_room": "Myndspjallrás",
         "view_message": "Sjá skilaboð",
         "warning": "Aðvörun"
@@ -628,7 +612,6 @@
         },
         "state_key": "Stöðulykill",
         "title": "Forritunartól",
-        "toggle_event": "víxla atburði af/á",
         "toolbox": "Verkfærakassi",
         "use_at_own_risk": "Þetta viðmót athugar EKKI tegundir gildanna. Notist á eigin ábyrgð.",
         "value": "Gildi",
@@ -644,22 +627,6 @@
     },
     "dialog_close_label": "Loka glugga",
     "download_completed": "Niðurhali lokið",
-    "emoji": {
-        "categories": "Flokkar",
-        "category_activities": "Afþreying",
-        "category_animals_nature": "Dýr og náttúra",
-        "category_flags": "Fánar",
-        "category_food_drink": "Mat og drykkur",
-        "category_frequently_used": "Oft notað",
-        "category_objects": "Hlutir",
-        "category_smileys_people": "Broskarlar og fólk",
-        "category_symbols": "Tákn",
-        "category_travel_places": "Ferðalög og staðir",
-        "quick_reactions": "Flýtiviðbrögð"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Hætta við leitina"
-    },
     "empty_room": "Tóm spjallrás",
     "empty_room_was_name": "Tóm spjallrás (var %(oldName)s)",
     "encryption": {
@@ -695,16 +662,6 @@
             "title": "Endurheimtuaðferð fjarlægð"
         },
         "set_up_toast_title": "Setja upp varið öryggisafrit",
-        "setup_secure_backup": {
-            "explainer": "Taktu öryggisafrit af dulritunarlyklunum áður en þú skráir þig út svo þeir tapist ekki."
-        },
-        "udd": {
-            "interactive_verification_button": "Sannprófa gagnvirkt með táknmyndum",
-            "other_ask_verify_text": "Biddu þennan notanda að sannreyna setuna sína, eða sannreyndu hana handvirkt hér fyrir neðan.",
-            "other_new_session_text": "%(name)s (%(userId)s) skráði sig inn í nýja setu án þess að sannvotta hana:",
-            "own_new_session_text": "Þú skráðir inn í nýja setu án þess að sannvotta hana:",
-            "title": "Ekki treyst"
-        },
         "unable_to_setup_keys_error": "Tókst ekki að setja upp lykla",
         "verification": {
             "accepting": "Samþykki…",
@@ -1059,7 +1016,6 @@
         "click_for_info": "Smelltu til að sjá frekari upplýsingar",
         "currently_experimental": "Í augnablikinu á tilraunastigi.",
         "custom_themes": "Stuðningur við að bæta við sérsniðnum þemum",
-        "group_calls": "Ný upplifun við hópsamtöl",
         "group_developer": "Forritari",
         "group_encryption": "Dulritun",
         "group_experimental": "Á tilraunastigi",
@@ -1072,7 +1028,6 @@
         "group_threads": "Spjallþræðir",
         "group_voip": "Tal og myndmerki",
         "group_widgets": "Viðmótshlutar",
-        "html_topic": "Birta HTML-framsetningu umfjöllunarefnis spjallrása",
         "join_beta": "Taka þátt í Beta-prófunum",
         "join_beta_reload": "Ef tekið er þátt í beta-prófunum verður %(brand)s endurhlaðið.",
         "jump_to_date": "Hoppa á dagsetningu (bætir við /jumptodate og jump to date hausum)",
@@ -1082,9 +1037,6 @@
         "location_share_live_description": "Bráðabirgðaútfærsla. Staðsetningar haldast í ferli spjallrása.",
         "mjolnir": "Nýjar leiðir til að hunsa fólk",
         "msc3531_hide_messages_pending_moderation": "Láta umsjónarmenn fela skilaboð sem bíða yfirferðar.",
-        "report_to_moderators": "Tilkynna til umsjónarmanna",
-        "report_to_moderators_description": "Í spjallrásum sem styðja eftirlit umsjónarmanna, mun 'Kæra'-hnappurinn gefa þér færi á að tilkynna misnotkun til umsjónarmanna spjallrása.",
-        "under_active_development": "Í virkri þróun.",
         "video_rooms": "Myndspjallrásir",
         "video_rooms_a_new_way_to_chat": "Ný leið til að spjalla með tali og myndmerki í %(brand)s.",
         "video_rooms_always_on_voip_channels": "Myndspjallrásir eru sívirkar VoIP-rásir sem ívafðar eru í spjallrásir innan %(brand)s.",
@@ -1131,9 +1083,6 @@
         "room_rejoin_warning": "Þessi spjallrás er ekki opinber. Þú munt ekki geta tekið aftur þátt nema að vera boðið.",
         "space_rejoin_warning": "Þetta svæði er ekki opinbert. Þú munt ekki geta tekið aftur þátt nema að vera boðið."
     },
-    "left_panel": {
-        "open_dial_pad": "Opna talnaborð"
-    },
     "lightbox": {
         "rotate_left": "Snúa til vinstri",
         "rotate_right": "Snúa til hægri"
@@ -1207,7 +1156,6 @@
         "mark_all_read": "Merkja allt sem lesið",
         "mentions_and_keywords": "@minnst á og stikkorð",
         "mentions_keywords": "Tilvísanir og stikkorð",
-        "message_didnt_send": "Mistókst að senda skilaboð. Smelltu til að fá nánari upplýsingar.",
         "mute_description": "Þú munt ekki fá neinar tilkynningar"
     },
     "notifier": {
@@ -1286,7 +1234,6 @@
     },
     "quick_settings": {
         "all_settings": "Allar stillingar",
-        "metaspace_section": "Festa á hliðarspjald",
         "sidebar_settings": "Fleiri valkostir",
         "title": "Flýtistillingar"
     },
@@ -1302,20 +1249,9 @@
     },
     "report_content": {
         "description": "Tilkynning um þessi skilaboð mun senda einstakt 'atviksauðkenni' til stjórnanda heimaþjóns. Ef skilaboð í þessari spjallrás eru dulrituð getur stjórnandi heimaþjóns ekki lesið skilaboðatextann eða skoðað skrár eða myndir.",
-        "disagree": "Ósammála",
         "ignore_user": "Hunsa notanda",
-        "illegal_content": "Ólöglegt efni",
         "missing_reason": "Fylltu út skýringu á því hvers vegna þú ert að kæra.",
-        "nature": "Veldu ástæðu og lýstu því hvað gerir þessi skilaboð ótæk.",
-        "nature_disagreement": "Það sem notandinn er að skrifa sem er rangt.\nÞetta verður tilkynnt til umsjónarmanna spjallrásarinnar.",
-        "nature_illegal": "Þessi notandi er að sýna ólöglega hegðun, til dæmis með því að hrella aðra notendur eða hóta ofbeldi.\nÞetta verður tilkynnt til umsjónarmanna spjallrásarinnar, sem gætu þurft að tilkynna þetta til viðeigandi yfirvalda.",
-        "nature_other": "Einhver önnur ástæða. Lýstu vandamálinu.\nÞetta verður tilkynnt til umsjónarmanna spjallrásarinnar.",
-        "nature_spam": "Þessi notandi er að dreifa auglýsingum inn á spjallrásina, tenglum á auglýsingar eða áróður.\nÞetta verður tilkynnt til umsjónarmanna spjallrásarinnar.",
-        "other_label": "Annað",
-        "report_content_to_homeserver": "Kæra efni til kerfisstjóra heimaþjónsins þíns",
-        "report_entire_room": "Kæra alla spjallrásina",
-        "spam_or_propaganda": "Ruslpóstur eða áróður",
-        "toxic_behaviour": "Eitruð hegðun"
+        "report_content_to_homeserver": "Kæra efni til kerfisstjóra heimaþjónsins þíns"
     },
     "restore_key_backup_dialog": {
         "count_of_decryption_failures": "Mistókst að afkóða %(failedCount)s setur!",
@@ -1461,37 +1397,12 @@
         }
     },
     "room_list": {
-        "add_room_label": "Bæta við spjallrás",
         "add_space_label": "Bæta við svæði",
-        "breadcrumbs_empty": "Engar nýlega skoðaðar spjallrásir",
-        "breadcrumbs_label": "Nýlega skoðaðar spjallrásir",
         "failed_add_tag": "Mistókst að bæta merkinu %(tagName)s á spjallrás",
         "failed_remove_tag": "Mistókst að fjarlægja merkið %(tagName)s af spjallrás",
         "failed_set_dm_tag": "Ekki tókst að stilla merki um bein skilaboð",
-        "home_menu_label": "Valkostir forsíðu",
-        "join_public_room_label": "Taka þátt í almenningsspjallrás",
-        "joining_rooms_status": {
-            "one": "Er núna að ganga til liðs við %(count)s spjallrás",
-            "other": "Er núna að ganga til liðs við %(count)s spjallrásir"
-        },
         "notification_options": "Valkostir tilkynninga",
-        "redacting_messages_status": {
-            "one": "Er núna að fjarlægja skilaboð í %(count)s spjallrás",
-            "other": "Er núna að fjarlægja skilaboð í %(count)s spjallrásum"
-        },
-        "show_less": "Sýna minna",
-        "show_n_more": {
-            "one": "Birta %(count)s til viðbótar",
-            "other": "Birta %(count)s til viðbótar"
-        },
-        "show_previews": "Sýna forskoðun skilaboða",
-        "sort_by": "Raða eftir",
-        "sort_by_activity": "Virkni",
-        "sort_by_alphabet": "A-Ö",
-        "sort_unread_first": "Birta spjallrásir með ólesnum skilaboðum fyrst",
-        "space_menu_label": "Valmynd %(spaceName)s",
-        "sublist_options": "Lista valkosti",
-        "suggested_rooms_heading": "Tillögur að spjallrásum"
+        "show_less": "Sýna minna"
     },
     "room_settings": {
         "access": {
@@ -1923,7 +1834,6 @@
         "send_read_receipts_unsupported": "Netþjónninn þinn styður ekki að sending leskvittana sé gerð óvirk.",
         "send_typing_notifications": "Senda skriftilkynningar",
         "sessions": {
-            "browser": "Vafri",
             "confirm_sign_out": {
                 "one": "Staðfestu útskráningu þessa tækis",
                 "other": "Staðfestu útskráningu þessara tækja"
@@ -1963,7 +1873,6 @@
             "no_sessions": "Engar setur fundust.",
             "no_unverified_sessions": "Engar óstaðfestar setur fundust.",
             "no_verified_sessions": "Engar staðfestar setur fundust.",
-            "os": "Stýrikerfi",
             "other_sessions_heading": "Aðrar setur",
             "push_heading": "Ýti-tilkynningar",
             "push_subheading": "Taka á móti ýti-tilkynningum á þessu tæki.",
@@ -2005,13 +1914,11 @@
         "show_stickers_button": "Birta límmerkjahnapp",
         "show_typing_notifications": "Sýna skriftilkynningar",
         "sidebar": {
-            "metaspaces_favourites_description": "Hópaðu allar eftirlætisspjallrásir og fólk á einum stað.",
             "metaspaces_home_all_rooms": "Sýna allar spjallrásir",
             "metaspaces_home_all_rooms_description": "Birtu allar spjallrásirnar þínar á forsíðunni, jafnvel þótt þær tilheyri svæði.",
             "metaspaces_home_description": "Forsíðan nýtist til að hafa yfirsýn yfir allt.",
             "metaspaces_orphans": "Spjallrásir utan svæðis",
             "metaspaces_orphans_description": "Hópaðu allar spjallrásir sem ekki eru hluti af svæðum á einum stað.",
-            "metaspaces_people_description": "Hópaðu allt fólk á einum stað.",
             "metaspaces_subsection": "Svæði sem á að birta",
             "title": "Hliðarspjald"
         },
@@ -2027,7 +1934,6 @@
             "audio_output": "Hljóðúttak",
             "audio_output_empty": "Engir hljóðútgangar fundust",
             "auto_gain_control": "Sjálfvirk stýring styrkaukningar",
-            "connection_section": "Tenging",
             "echo_cancellation": "Útrýming bergmáls",
             "mirror_local_feed": "Spegla staðværu myndmerki",
             "missing_permissions_prompt": "Vantar heimildir fyrir margmiðlunarefni, smelltu á hnappinn hér fyrir neðan til að biðja um þær.",
@@ -2185,12 +2091,6 @@
     "space_settings": {
         "title": "Stillingar - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Þú hefur ekki heimild til að bæta spjallrásum í þetta svæði",
-        "error_no_permission_add_space": "Þú hefur ekki heimild til að bæta svæðum í þetta svæði",
-        "error_no_permission_create_room": "Þú hefur ekki heimild til að búa til nýjar spjallrásir í þessu svæði",
-        "error_no_permission_invite": "Þú hefur ekki heimild til að bjóða fólk á þetta svæði"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Sláðu inn nafn nýja netþjónsins sem þú vilt skoða.",
@@ -2372,9 +2272,7 @@
         "m.poll.start": "%(senderName)s hefur sett í gang könnun - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s breytti auðkennismynd spjallrásarinnar.",
-            "changed_img": "%(senderDisplayName)s breytti auðkennismynd spjallrásarinnar í <img/>",
-            "lightbox_title": "%(senderDisplayName)s breytti auðkennismyndinni fyrir %(roomName)s",
-            "removed": "%(senderDisplayName)s fjarlægði auðkennismynd spjallrásarinnar."
+            "lightbox_title": "%(senderDisplayName)s breytti auðkennismyndinni fyrir %(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -2896,13 +2794,7 @@
         "close_to_view_right_panel": "Lokaðu þessum viðmótshluta til að sjá hann á þessu spjaldi",
         "context_menu": {
             "delete": "Eyða viðmótshluta",
-            "delete_warning": "Sé viðmótshluta eytt hverfur hann hjá öllum notendum í þessari spjallrás. Ertu viss um að þú viljir eyða þessum viðmótshluta?",
-            "move_left": "Færa til vinstri",
-            "move_right": "Færa til hægri",
-            "remove": "Fjarlægja fyrir alla",
-            "revoke": "Afturkalla heimildir",
-            "screenshot": "Taktu mynd",
-            "start_audio_stream": "Hefja hljóðstreymi"
+            "delete_warning": "Sé viðmótshluta eytt hverfur hann hjá öllum notendum í þessari spjallrás. Ertu viss um að þú viljir eyða þessum viðmótshluta?"
         },
         "cookie_warning": "Þessi viðmótshluti gæti notað vefkökur.",
         "error_hangup_description": "Þú varst aftengd/ur frá samtalinu. (Villa: %(message)s)",
diff --git a/apps/web/src/i18n/strings/it.json b/apps/web/src/i18n/strings/it.json
index f57751a330..54b345933a 100644
--- a/apps/web/src/i18n/strings/it.json
+++ b/apps/web/src/i18n/strings/it.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Selettore di emoji",
         "jump_first_invite": "Salta al primo invito.",
         "message_composer": "Compositore di messaggi",
         "n_unread_messages": {
@@ -11,8 +10,6 @@
             "other": "%(count)s messaggi non letti incluse le citazioni.",
             "one": "1 citazione non letta."
         },
-        "recent_rooms": "Stanze recenti",
-        "room_name": "Stanza %(name)s",
         "room_status_bar": "Barra di stato della stanza",
         "seek_bar_label": "Barra di ricerca audio",
         "unread_messages": "Messaggi non letti."
@@ -22,7 +19,6 @@
         "accept": "Accetta",
         "add": "Aggiungi",
         "add_existing_room": "Aggiungi stanza esistente",
-        "add_people": "Aggiungi persone",
         "apply": "Applica",
         "approve": "Approva",
         "ask_to_join": "Chiedi di entrare",
@@ -55,7 +51,6 @@
         "enter_fullscreen": "Attiva schermo intero",
         "exit_fullscreeen": "Esci da schermo intero",
         "expand": "Espandi",
-        "explore_public_rooms": "Esplora stanze pubbliche",
         "explore_rooms": "Esplora stanze",
         "export": "Esporta",
         "forward": "Inoltra",
@@ -67,8 +62,6 @@
         "ignore": "Ignora",
         "import": "Importa",
         "invite": "Invita",
-        "invite_to_space": "Invita nello spazio",
-        "invites_list": "Inviti",
         "join": "Entra",
         "learn_more": "Maggiori informazioni",
         "leave": "Esci",
@@ -95,7 +88,6 @@
         "rename": "Rinomina",
         "reply": "Rispondi",
         "reply_in_thread": "Rispondi nella conversazione",
-        "report_content": "Segnala contenuto",
         "resend": "Reinvia",
         "reset": "Ripristina",
         "resume": "Riprendi",
@@ -113,8 +105,6 @@
         "sign_out": "Disconnetti",
         "skip": "Salta",
         "start": "Inizia",
-        "start_chat": "Inizia una chat",
-        "start_new_chat": "Inizia nuova chat",
         "stop": "Ferma",
         "submit": "Invia",
         "subscribe": "Iscriviti",
@@ -213,10 +203,7 @@
         "log_in_new_account": "<a>Accedi</a> al tuo nuovo account.",
         "logout_dialog": {
             "description": "Sei sicuro di volerti disconnettere?",
-            "megolm_export": "Esporta le chiavi manualmente",
             "setup_key_backup_title": "Perderai l'accesso ai tuoi messaggi cifrati",
-            "setup_secure_backup_description_1": "I messaggi cifrati sono resi sicuri con una crittografia end-to-end. Solo tu e il/i destinatario/i avete le chiavi per leggere questi messaggi.",
-            "setup_secure_backup_description_2": "Quando ti disconnetti queste chiavi verranno eliminate dal dispositivo, quindi non potrai leggere i messaggi cifrati a meno che tu non abbia le chiavi su altri dispositivi, o salvate in backup sul server.",
             "skip_key_backup": "Non voglio i miei messaggi cifrati"
         },
         "misconfigured_body": "Chiedi al tuo amministratore di %(brand)s di controllare <a>la tua configurazione</a> per voci non valide o doppie.",
@@ -431,7 +418,6 @@
         "encrypted": "Crittografato",
         "error": "Errore",
         "faq": "Domande frequenti",
-        "favourites": "Preferiti",
         "feedback": "Commenti",
         "filter_results": "Filtra risultati",
         "forward_message": "Inoltra messaggio",
@@ -439,7 +425,6 @@
         "go_to_settings": "Vai alle impostazioni",
         "guest": "Ospite",
         "help": "Aiuto",
-        "historical": "Cronologia",
         "home": "Pagina iniziale",
         "homeserver": "Homeserver",
         "identity_server": "Server di identità",
@@ -451,12 +436,10 @@
         "light": "Chiaro",
         "loading": "Caricamento…",
         "location": "Posizione",
-        "low_priority": "Bassa priorità",
         "matrix": "Matrix",
         "message": "Messaggio",
         "message_layout": "Disposizione del messaggio",
         "microphone": "Microfono",
-        "model": "Modello",
         "modern": "Moderno",
         "mute": "Silenzia",
         "n_members": {
@@ -511,7 +494,6 @@
         "success": "Successo",
         "suggestions": "Suggerimenti",
         "support": "Supporto",
-        "system_alerts": "Avvisi di sistema",
         "theme": "Tema",
         "thread": "Conversazione",
         "threads": "Conversazioni",
@@ -527,7 +509,6 @@
         "username": "Nome utente",
         "verified": "Verificato",
         "version": "Versione",
-        "video": "Video",
         "video_room": "Stanza video",
         "view_message": "Vedi messaggio",
         "warning": "Attenzione"
@@ -744,7 +725,6 @@
         "thread_root_id": "ID root del thread: %(threadRootId)s",
         "threads_timeline": "Linea temporale conversazioni",
         "title": "Strumenti per sviluppatori",
-        "toggle_event": "commuta evento",
         "toolbox": "Strumenti",
         "use_at_own_risk": "Questa interfaccia NON controlla i tipi dei valori. Usa a tuo rischio.",
         "user_read_up_to": "L'utente ha letto fino: ",
@@ -766,22 +746,6 @@
     },
     "dialog_close_label": "Chiudi finestra",
     "download_completed": "Scaricamento completato",
-    "emoji": {
-        "categories": "Categorie",
-        "category_activities": "Attività",
-        "category_animals_nature": "Animali e Natura",
-        "category_flags": "Bandiere",
-        "category_food_drink": "Cibo e Bevande",
-        "category_frequently_used": "Usati di frequente",
-        "category_objects": "Oggetti",
-        "category_smileys_people": "Faccine e Persone",
-        "category_symbols": "Simboli",
-        "category_travel_places": "Viaggi e Luoghi",
-        "quick_reactions": "Reazioni rapide"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Annulla ricerca"
-    },
     "empty_room": "Stanza vuota",
     "empty_room_was_name": "Stanza vuota (era %(oldName)s)",
     "encryption": {
@@ -830,17 +794,6 @@
             "warning": "Se non hai rimosso il metodo di ripristino, è possibile che un aggressore stia cercando di accedere al tuo account. Cambia la password del tuo account e imposta immediatamente un nuovo metodo di recupero nelle impostazioni."
         },
         "set_up_toast_title": "Imposta il Backup Sicuro",
-        "setup_secure_backup": {
-            "explainer": "Fai una copia delle tue chiavi prima di disconnetterti per evitare di perderle."
-        },
-        "udd": {
-            "interactive_verification_button": "Verifica interattivamente con emoji",
-            "other_ask_verify_text": "Chiedi a questo utente di verificare la sua sessione o verificala manualmente sotto.",
-            "other_new_session_text": "%(name)s (%(userId)s) ha fatto l'accesso con una nuova sessione senza verificarla:",
-            "own_ask_verify_text": "Verifica la tua altra sessione usando una delle opzioni sotto.",
-            "own_new_session_text": "Hai fatto l'accesso ad una nuova sessione senza verificarla:",
-            "title": "Non fidato"
-        },
         "unable_to_setup_keys_error": "Impossibile impostare le chiavi",
         "verification": {
             "accepting": "Accettazione…",
@@ -1279,7 +1232,6 @@
         "experimental_section": "Anteprime",
         "feature_disable_call_per_sender_encryption": "Disattiva la crittografia per mittente in Element Call",
         "feature_wysiwyg_composer_description": "Usa il rich text invece del Markdown nel compositore di messaggi.",
-        "group_calls": "Nuova esperienza per chiamate di gruppo",
         "group_developer": "Sviluppatore",
         "group_encryption": "Crittografia",
         "group_experimental": "Sperimentale",
@@ -1293,7 +1245,6 @@
         "group_voip": "Voce e video",
         "group_widgets": "Widget",
         "hidebold": "Nascondi il punto di notifica (mostra solo i contatori)",
-        "html_topic": "Mostra la rappresentazione HTML degli argomenti della stanza",
         "join_beta": "Unisciti alla beta",
         "join_beta_reload": "Unirsi alla beta ricaricherà %(brand)s.",
         "jump_to_date": "Salta alla data (aggiunge /jumptodate e le intestazioni di salto data)",
@@ -1311,13 +1262,10 @@
         "notifications": "Attiva il pannello delle notifiche nell'intestazione della stanza",
         "render_reaction_images": "Mostra immagini personalizzate nelle reazioni",
         "render_reaction_images_description": "A volte chiamati \"emoji personalizzati\".",
-        "report_to_moderators": "Segnala ai moderatori",
-        "report_to_moderators_description": "Nelle stanze che supportano la moderazione, il pulsante \"Segnala\" ti permetterà di segnalare abusi ai moderatori della stanza.",
         "sliding_sync": "Modalità di sincr. con slide",
         "sliding_sync_description": "In sviluppo attivo, non può essere disattivato.",
         "sliding_sync_disabled_notice": "Disconnettiti e riconnettiti per disattivare",
         "sliding_sync_server_no_support": "Il tuo server non ha il supporto nativo",
-        "under_active_development": "In sviluppo attivo.",
         "unrealiable_e2e": "Inaffidabile nelle stanze cifrate",
         "video_rooms": "Stanze video",
         "video_rooms_a_new_way_to_chat": "Un nuovo modo di fare chiamate audio e video in %(brand)s.",
@@ -1371,9 +1319,6 @@
         "room_rejoin_warning": "Questa stanza non è pubblica. Non potrai rientrare senza un invito.",
         "space_rejoin_warning": "Questo spazio non è pubblico. Non potrai rientrare senza un invito."
     },
-    "left_panel": {
-        "open_dial_pad": "Apri tastierino"
-    },
     "lightbox": {
         "rotate_left": "Ruota a sinistra",
         "rotate_right": "Ruota a destra",
@@ -1465,7 +1410,6 @@
         "mentions_and_keywords": "@citazioni e parole chiave",
         "mentions_and_keywords_description": "Ricevi notifiche solo per citazioni e parole chiave come configurato nelle tue <a>impostazioni</a>",
         "mentions_keywords": "Citazioni e parole chiave",
-        "message_didnt_send": "Il messaggio non è stato inviato. Clicca per informazioni.",
         "mute_description": "Non riceverai alcuna notifica"
     },
     "notifier": {
@@ -1551,7 +1495,6 @@
     },
     "quick_settings": {
         "all_settings": "Tutte le impostazioni",
-        "metaspace_section": "Fissa nella barra laterale",
         "sidebar_settings": "Altre opzioni",
         "title": "Impostazioni rapide"
     },
@@ -1569,25 +1512,10 @@
     },
     "report_content": {
         "description": "La segnalazione di questo messaggio invierà il suo 'ID evento' univoco all'amministratore del tuo homeserver. Se i messaggi della stanza sono cifrati, l'amministratore non potrà leggere il messaggio o vedere file e immagini.",
-        "disagree": "Rifiuta",
-        "error_create_room_moderation_bot": "Impossibile creare una stanza con il bot di moderazione",
         "hide_messages_from_user": "Seleziona se vuoi nascondere tutti i messaggi attuali e futuri di questo utente.",
         "ignore_user": "Ignora utente",
-        "illegal_content": "Contenuto illegale",
         "missing_reason": "Inserisci il motivo della segnalazione.",
-        "nature": "Scegli la natura del problema e descrivi cosa rende questo messaggio un abuso.",
-        "nature_disagreement": "Questo utente sta scrivendo cose sbagliate.\nVerrà segnalato ai moderatori della stanza.",
-        "nature_illegal": "Questo utente sta mostrando un comportamento illegale, ad esempio facendo doxing o minacciando violenza.\nVerrà segnalato ai moderatori della stanza che potrebbero portarlo in ambito legale.",
-        "nature_nonstandard_admin": "Questa stanza è dedicata a contenuti illegali o dannosi, oppure i moderatori non riescono a fermarli.\nVerrà segnalato agli amministratori di %(homeserver)s.",
-        "nature_nonstandard_admin_encrypted": "Questa stanza è dedicata a contenuti illegali o dannosi, oppure i moderatori non riescono a fermarli.\nVerrà segnalato agli amministratori di %(homeserver)s. Gli amministratori NON potranno leggere il contenuto criptato di questa stanza.",
-        "nature_other": "Altri motivi. Si prega di descrivere il problema.\nVerrà segnalato ai moderatori della stanza.",
-        "nature_spam": "Questo utente sta facendo spam nella stanza con pubblicità, collegamenti ad annunci o a propagande.\nVerrà segnalato ai moderatori della stanza.",
-        "nature_toxic": "Questo utente sta mostrando un cattivo comportamento, ad esempio insultando altri utenti o condividendo contenuti per adulti in una stanza per tutti, oppure violando le regole della stessa.\nVerrà segnalato ai moderatori della stanza.",
-        "other_label": "Altro",
-        "report_content_to_homeserver": "Segnala il contenuto all'amministratore dell'homeserver",
-        "report_entire_room": "Segnala l'intera stanza",
-        "spam_or_propaganda": "Spam o propaganda",
-        "toxic_behaviour": "Cattivo comportamento"
+        "report_content_to_homeserver": "Segnala il contenuto all'amministratore dell'homeserver"
     },
     "restore_key_backup_dialog": {
         "count_of_decryption_failures": "Decifrazione di %(failedCount)s sessioni fallita!",
@@ -1814,37 +1742,12 @@
         "waiting_for_join_title": "In attesa che gli utenti si uniscano a %(brand)s"
     },
     "room_list": {
-        "add_room_label": "Aggiungi stanza",
         "add_space_label": "Aggiungi spazio",
-        "breadcrumbs_empty": "Nessuna stanza visitata di recente",
-        "breadcrumbs_label": "Stanze visitate di recente",
         "failed_add_tag": "Aggiunta etichetta %(tagName)s alla stanza fallita",
         "failed_remove_tag": "Rimozione etichetta %(tagName)s dalla stanza fallita",
         "failed_set_dm_tag": "Impostazione etichetta chat diretta fallita",
-        "home_menu_label": "Opzioni pagina iniziale",
-        "join_public_room_label": "Entra nella stanza pubblica",
-        "joining_rooms_status": {
-            "one": "Stai entrando in %(count)s stanza",
-            "other": "Stai entrando in %(count)s stanze"
-        },
         "notification_options": "Opzioni di notifica",
-        "redacting_messages_status": {
-            "one": "Rimozione di messaggi in corso in %(count)s stanza",
-            "other": "Rimozione di messaggi in corso in %(count)s stanze"
-        },
-        "show_less": "Mostra meno",
-        "show_n_more": {
-            "other": "Mostra altri %(count)s",
-            "one": "Mostra %(count)s altro"
-        },
-        "show_previews": "Mostra anteprime dei messaggi",
-        "sort_by": "Ordina per",
-        "sort_by_activity": "Attività",
-        "sort_by_alphabet": "A-Z",
-        "sort_unread_first": "Mostra prima le stanze con messaggi non letti",
-        "space_menu_label": "Menu di %(spaceName)s",
-        "sublist_options": "Opzioni lista",
-        "suggested_rooms_heading": "Stanze suggerite"
+        "show_less": "Mostra meno"
     },
     "room_settings": {
         "access": {
@@ -2401,7 +2304,6 @@
         "send_typing_notifications": "Invia notifiche di scrittura",
         "sessions": {
             "best_security_note": "Per una maggiore sicurezza, verifica le tue sessioni ed esci da quelle che non riconosci o non usi più.",
-            "browser": "Browser",
             "confirm_sign_out": {
                 "one": "Conferma la disconnessione da questo dispositivo",
                 "other": "Conferma la disconnessione da questi dispositivi"
@@ -2450,7 +2352,6 @@
             "no_sessions": "Nessuna sessione trovata.",
             "no_unverified_sessions": "Nessuna sessione non verificata trovata.",
             "no_verified_sessions": "Nessuna sessione verificata trovata.",
-            "os": "Sistema operativo",
             "other_sessions_heading": "Altre sessioni",
             "push_heading": "Notifiche push",
             "push_subheading": "Ricevi notifiche push in questa sessione.",
@@ -2507,13 +2408,11 @@
         "show_stickers_button": "Mostra pulsante adesivi",
         "show_typing_notifications": "Mostra notifiche di scrittura",
         "sidebar": {
-            "metaspaces_favourites_description": "Raggruppa tutte le tue stanze e persone preferite in un unico posto.",
             "metaspaces_home_all_rooms": "Mostra tutte le stanze",
             "metaspaces_home_all_rooms_description": "Mostra tutte le tue stanze nella pagina principale, anche se sono in uno spazio.",
             "metaspaces_home_description": "La pagina principale è utile per avere una panoramica generale.",
             "metaspaces_orphans": "Stanze fuori da uno spazio",
             "metaspaces_orphans_description": "Raggruppa tutte le tue stanze che non fanno parte di uno spazio in un unico posto.",
-            "metaspaces_people_description": "Raggruppa tutte le tue persone in un unico posto.",
             "metaspaces_subsection": "Spazi da mostrare",
             "spaces_explainer": "Gli spazi sono modi per raggruppare stanze e persone. Oltre agli spazi in cui ti trovi, puoi usarne anche altri già integrati.",
             "title": "Barra laterale"
@@ -2530,7 +2429,6 @@
             "audio_output": "Uscita audio",
             "audio_output_empty": "Nessuna uscita audio rilevata",
             "auto_gain_control": "Controllo automatico del guadagno",
-            "connection_section": "Connessione",
             "echo_cancellation": "Cancellazione dell'eco",
             "enable_fallback_ice_server": "Permetti server di chiamata di ripiego (%(server)s)",
             "enable_fallback_ice_server_description": "Si applica solo se il tuo homeserver non ne offre uno. Il tuo indirizzo IP verrebbe condiviso durante una chiamata.",
@@ -2705,12 +2603,6 @@
     "space_settings": {
         "title": "Impostazioni - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Non hai i permessi per aggiungere stanze a questo spazio",
-        "error_no_permission_add_space": "Non hai i permessi per aggiungere spazi in questo spazio",
-        "error_no_permission_create_room": "Non hai i permessi per creare stanze in questo spazio",
-        "error_no_permission_invite": "Non hai l'autorizzazione di invitare persone in questo spazio"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Inserisci il nome di un nuovo server che vuoi esplorare.",
@@ -2906,9 +2798,7 @@
         "m.poll.start": "%(senderName)s ha iniziato un sondaggio - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s ha cambiato l'avatar della stanza.",
-            "changed_img": "%(senderDisplayName)s ha cambiato l'avatar della stanza a <img/>",
-            "lightbox_title": "%(senderDisplayName)s ha cambiato l'avatar per %(roomName)s",
-            "removed": "%(senderDisplayName)s ha rimosso l'avatar della stanza."
+            "lightbox_title": "%(senderDisplayName)s ha cambiato l'avatar per %(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3485,13 +3375,7 @@
         "close_to_view_right_panel": "Chiudi questo widget per vederlo in questo pannello",
         "context_menu": {
             "delete": "Elimina widget",
-            "delete_warning": "L'eliminazione di un widget lo rimuove per tutti gli utenti della stanza. Sei sicuro di eliminare il widget?",
-            "move_left": "Sposta a sinistra",
-            "move_right": "Sposta a destra",
-            "remove": "Rimuovi per tutti",
-            "revoke": "Revoca autorizzazioni",
-            "screenshot": "Scatta una foto",
-            "start_audio_stream": "Avvia stream audio"
+            "delete_warning": "L'eliminazione di un widget lo rimuove per tutti gli utenti della stanza. Sei sicuro di eliminare il widget?"
         },
         "cookie_warning": "Questo widget può usare cookie.",
         "error_hangup_description": "Sei stato disconnesso dalla chiamata. (Errore: %(message)s)",
diff --git a/apps/web/src/i18n/strings/ja.json b/apps/web/src/i18n/strings/ja.json
index 7154ff4103..7482715a5d 100644
--- a/apps/web/src/i18n/strings/ja.json
+++ b/apps/web/src/i18n/strings/ja.json
@@ -9,7 +9,6 @@
             "one": "未読のメンション1件。",
             "other": "メンションを含む未読メッセージ%(count)s件。"
         },
-        "room_name": "ルーム %(name)s",
         "unread_messages": "未読メッセージ。"
     },
     "a11y_jump_first_unread_room": "未読のある最初のルームにジャンプします。",
@@ -17,7 +16,6 @@
         "accept": "同意",
         "add": "追加",
         "add_existing_room": "既存のルームを追加",
-        "add_people": "連絡先を追加",
         "apply": "適用",
         "approve": "同意",
         "back": "戻る",
@@ -48,7 +46,6 @@
         "enter_fullscreen": "フルスクリーンにする",
         "exit_fullscreeen": "フルスクリーンを解除",
         "expand": "展開",
-        "explore_public_rooms": "公開ルームを探す",
         "explore_rooms": "ルームを探す",
         "export": "エクスポート",
         "forward": "転送",
@@ -60,8 +57,6 @@
         "ignore": "無視",
         "import": "インポート",
         "invite": "招待",
-        "invite_to_space": "スペースに招待",
-        "invites_list": "招待",
         "join": "参加",
         "learn_more": "詳細を表示",
         "leave": "退出",
@@ -85,7 +80,6 @@
         "rename": "表示名を変更",
         "reply": "返信",
         "reply_in_thread": "スレッドで返信",
-        "report_content": "コンテンツを報告",
         "resend": "再送信",
         "reset": "リセット",
         "resume": "再開",
@@ -103,8 +97,6 @@
         "sign_out": "サインアウト",
         "skip": "スキップ",
         "start": "開始",
-        "start_chat": "チャットを開始",
-        "start_new_chat": "チャットを開始",
         "stop": "停止",
         "submit": "送信",
         "subscribe": "購読",
@@ -200,10 +192,7 @@
         "log_in_new_account": "新しいアカウントに<a>ログイン</a>しましょう。",
         "logout_dialog": {
             "description": "サインアウトしてよろしいですか？",
-            "megolm_export": "手動で鍵をエクスポート",
             "setup_key_backup_title": "暗号化されたメッセージにアクセスできなくなります",
-            "setup_secure_backup_description_1": "暗号化されたメッセージは、エンドツーエンドの暗号化によって保護されています。これらの暗号化されたメッセージを読むための鍵を持っているのは、あなたと受信者だけです。",
-            "setup_secure_backup_description_2": "サインアウトすると、これらの鍵はこの端末から削除されます。使用できる鍵が他の端末にあったり、サーバーにバックアップされたりしているのでない限り、暗号化されたメッセージは読むことができなくなります。",
             "skip_key_backup": "暗号化されたメッセージは不要です"
         },
         "misconfigured_body": "<a>設定</a>が間違っているか重複しているか確認するよう、%(brand)sの管理者に問い合わせてください。",
@@ -412,7 +401,6 @@
         "encrypted": "暗号化",
         "error": "エラー",
         "faq": "よくある質問",
-        "favourites": "お気に入り",
         "feedback": "フィードバック",
         "filter_results": "結果を絞り込む",
         "forward_message": "メッセージを転送",
@@ -420,7 +408,6 @@
         "go_to_settings": "設定を開く",
         "guest": "ゲスト",
         "help": "ヘルプ",
-        "historical": "履歴",
         "home": "ホーム",
         "homeserver": "ホームサーバー",
         "identity_server": "IDサーバー",
@@ -432,11 +419,9 @@
         "light": "ライト",
         "loading": "読み込んでいます…",
         "location": "位置情報",
-        "low_priority": "低優先度",
         "message": "メッセージ",
         "message_layout": "メッセージのレイアウト",
         "microphone": "マイク",
-        "model": "形式",
         "modern": "モダン",
         "mute": "ミュート",
         "n_members": {
@@ -491,7 +476,6 @@
         "success": "成功",
         "suggestions": "提案",
         "support": "サポート",
-        "system_alerts": "システムアラート",
         "theme": "テーマ",
         "thread": "スレッド",
         "threads": "スレッド",
@@ -505,7 +489,6 @@
         "username": "ユーザー名",
         "verified": "認証済",
         "version": "バージョン",
-        "video": "動画",
         "video_room": "ビデオ通話ルーム",
         "view_message": "メッセージを表示",
         "warning": "警告"
@@ -706,7 +689,6 @@
         "state_key": "ステートキー",
         "threads_timeline": "スレッドのタイムライン",
         "title": "開発者ツール",
-        "toggle_event": "イベントを切り替える",
         "toolbox": "ツールボックス",
         "use_at_own_risk": "このユーザーインターフェースは、値の種類を確認しません。自己責任で使用してください。",
         "user_read_up_to": "ユーザーの既読状況： ",
@@ -725,22 +707,6 @@
     },
     "dialog_close_label": "ダイアログを閉じる",
     "download_completed": "ダウンロードが完了しました",
-    "emoji": {
-        "categories": "カテゴリー",
-        "category_activities": "アクティビティー",
-        "category_animals_nature": "動物と自然",
-        "category_flags": "旗",
-        "category_food_drink": "食べ物と飲み物",
-        "category_frequently_used": "使用頻度の高いリアクション",
-        "category_objects": "物体",
-        "category_smileys_people": "表情と人々",
-        "category_symbols": "シンボル",
-        "category_travel_places": "旅行と場所",
-        "quick_reactions": "一般的なリアクション"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "検索をキャンセル"
-    },
     "empty_room": "空のルーム",
     "empty_room_was_name": "空のルーム（以前の名前は%(oldName)s）",
     "encryption": {
@@ -786,17 +752,6 @@
             "warning": "復元方法を削除しなかった場合、攻撃者があなたのアカウントにアクセスしようとしている可能性があります。設定画面でアカウントのパスワードを至急変更し、新しい復元方法を設定してください。"
         },
         "set_up_toast_title": "セキュアバックアップを設定",
-        "setup_secure_backup": {
-            "explainer": "鍵を失くさないよう、サインアウトする前にバックアップしてください。"
-        },
-        "udd": {
-            "interactive_verification_button": "絵文字で認証",
-            "other_ask_verify_text": "このユーザーにセッションを認証するよう依頼するか、以下から手動で認証してください。",
-            "other_new_session_text": "%(name)s（%(userId)s）は未認証のセッションにサインインしました：",
-            "own_ask_verify_text": "以下のどれか一つを使って他のセッションを認証します。",
-            "own_new_session_text": "あなたのこのセッションはまだ認証されていません：",
-            "title": "信頼されていません"
-        },
         "unable_to_setup_keys_error": "鍵を設定できません",
         "verification": {
             "accepting": "承認しています…",
@@ -1196,7 +1151,6 @@
         "experimental_description": "実験に参加したいですか？開発中のアイディアを試してください。これらの機能は完成していません。不安定な可能性や変更される可能性、また、開発が中止される可能性もあります。<a>詳細を確認</a>。",
         "experimental_section": "早期プレビュー",
         "feature_wysiwyg_composer_description": "メッセージ入力欄でマークダウンの代わりにリッチテキストを使用。",
-        "group_calls": "グループ通話の新しい経験",
         "group_developer": "開発者",
         "group_encryption": "暗号化",
         "group_experimental": "実験的",
@@ -1210,7 +1164,6 @@
         "group_voip": "音声とビデオ",
         "group_widgets": "ウィジェット",
         "hidebold": "通知のドットを非表示にする（カウンターのバッジのみを表示）",
-        "html_topic": "ルームのトピックをHTML形式で表示",
         "join_beta": "ベータ版に参加",
         "join_beta_reload": "ベータ版に参加すると%(brand)sをリロードします。",
         "jump_to_date": "日付に移動（/jumptodateを追加すると、日付のヘッダーに移動します）",
@@ -1221,12 +1174,9 @@
         "location_share_live_description": "一時的な実装。位置情報がルームの履歴に残ります。",
         "mjolnir": "参加者を無視する新しい方法",
         "msc3531_hide_messages_pending_moderation": "モデレーターに、保留中のモデレーションのメッセージを非表示にすることを許可。",
-        "report_to_moderators": "モデレーターに報告",
-        "report_to_moderators_description": "モデレートをサポートするルームで「報告」ボタンを使用すると、ルームのモデレーターに問題を報告できます。",
         "sliding_sync": "スライド式同期モード",
         "sliding_sync_description": "開発中です。無効にできません。",
         "sliding_sync_server_no_support": "あなたのサーバーはネイティブでサポートしていません",
-        "under_active_development": "開発中。",
         "video_rooms": "ビデオ通話ルーム",
         "video_rooms_a_new_way_to_chat": "%(brand)sで音声と動画により会話する新しい方法です。",
         "video_rooms_always_on_voip_channels": "ビデオ通話ルームは、%(brand)sのルームに埋め込まれている、VoIPが常時有効のチャンネルです。",
@@ -1278,9 +1228,6 @@
         "room_rejoin_warning": "このルームは公開されていません。再度参加するには、招待が必要です。",
         "space_rejoin_warning": "このスペースは公開されていません。再度参加するには、招待が必要です。"
     },
-    "left_panel": {
-        "open_dial_pad": "ダイヤルパッドを開く"
-    },
     "lightbox": {
         "rotate_left": "左に回転",
         "rotate_right": "右に回転"
@@ -1364,7 +1311,6 @@
         "mentions_and_keywords": "メンションとキーワード",
         "mentions_and_keywords_description": "メンションと、<a>設定</a>したキーワードのみを通知",
         "mentions_keywords": "メンションとキーワード",
-        "message_didnt_send": "メッセージが送信されませんでした。クリックすると詳細を表示します。",
         "mute_description": "通知を送信しません"
     },
     "notifier": {
@@ -1443,7 +1389,6 @@
     },
     "quick_settings": {
         "all_settings": "全ての設定",
-        "metaspace_section": "サイドバーに固定",
         "sidebar_settings": "他のオプション",
         "title": "クイック設定"
     },
@@ -1459,20 +1404,10 @@
     },
     "report_content": {
         "description": "このメッセージを報告すると、このメッセージの一意の「イベントID」があなたのホームサーバーの管理者に送信されます。このルーム内のメッセージが暗号化されている場合、ホームサーバーの管理者はメッセージのテキストを読んだり、ファイルや画像を表示したりすることはできません。",
-        "disagree": "同意しない",
         "hide_messages_from_user": "このユーザーのメッセージを非表示にするかどうか確認してください。",
         "ignore_user": "ユーザーを無視",
-        "illegal_content": "不法なコンテンツ",
         "missing_reason": "報告する理由を記入してください。",
-        "nature": "特徴を選び、このメッセージを報告する理由を記入してください。",
-        "nature_disagreement": "ユーザーの投稿内容が正しくない。\nこのユーザーをルームのモデレーターに報告します。",
-        "nature_other": "その他の理由。問題を記入してください。\nルームのモデレーターに報告します。",
-        "nature_spam": "ユーザーが広告や、広告・プロパガンダへのリンクのスパムを行っている。\nこのユーザーをルームのモデレーターに報告します。",
-        "other_label": "その他",
-        "report_content_to_homeserver": "あなたのホームサーバーの管理者にコンテンツを報告",
-        "report_entire_room": "ルーム全体を報告",
-        "spam_or_propaganda": "スパム、プロパガンダ",
-        "toxic_behaviour": "危害を加える振る舞い"
+        "report_content_to_homeserver": "あなたのホームサーバーの管理者にコンテンツを報告"
     },
     "restore_key_backup_dialog": {
         "count_of_decryption_failures": "%(failedCount)s個のセッションの復号化に失敗しました！",
@@ -1646,37 +1581,12 @@
         }
     },
     "room_list": {
-        "add_room_label": "ルームを追加",
         "add_space_label": "スペースを追加",
-        "breadcrumbs_empty": "最近訪れたルームはありません",
-        "breadcrumbs_label": "最近訪れたルーム",
         "failed_add_tag": "ルームにタグ %(tagName)s を追加できませんでした",
         "failed_remove_tag": "ルームからタグ %(tagName)s を削除できませんでした",
         "failed_set_dm_tag": "ダイレクトメッセージのタグの設定に失敗しました",
-        "home_menu_label": "ホームのオプション",
-        "join_public_room_label": "公開ルームに参加",
-        "joining_rooms_status": {
-            "one": "現在%(count)s個のルームに参加しています",
-            "other": "現在%(count)s個のルームに参加しています"
-        },
         "notification_options": "通知設定",
-        "redacting_messages_status": {
-            "one": "現在%(count)s個のルームのメッセージを削除しています",
-            "other": "現在%(count)s個のルームのメッセージを削除しています"
-        },
-        "show_less": "詳細を非表示",
-        "show_n_more": {
-            "other": "さらに%(count)s件を表示",
-            "one": "さらに%(count)s件を表示"
-        },
-        "show_previews": "メッセージのプレビューを表示",
-        "sort_by": "並び替え",
-        "sort_by_activity": "アクティビティー順",
-        "sort_by_alphabet": "アルファベット順",
-        "sort_unread_first": "未読メッセージのあるルームを最初に表示",
-        "space_menu_label": "%(spaceName)sのメニュー",
-        "sublist_options": "オプションの一覧を表示",
-        "suggested_rooms_heading": "おすすめのルーム"
+        "show_less": "詳細を非表示"
     },
     "room_settings": {
         "access": {
@@ -2170,7 +2080,6 @@
         "send_read_receipts_unsupported": "あなたのサーバーは開封確認メッセージの送信防止をサポートしていません。",
         "send_typing_notifications": "入力中通知を送信",
         "sessions": {
-            "browser": "ブラウザー",
             "confirm_sign_out": {
                 "other": "端末からのサインアウトを承認",
                 "one": "端末からのサインアウトを承認"
@@ -2218,7 +2127,6 @@
             "no_sessions": "セッションが見つかりません。",
             "no_unverified_sessions": "未認証のセッションはありません。",
             "no_verified_sessions": "認証済のセッションはありません。",
-            "os": "オペレーティングシステム",
             "other_sessions_heading": "その他のセッション",
             "push_heading": "プッシュ通知",
             "push_subheading": "このセッションでプッシュ通知を受信。",
@@ -2272,13 +2180,11 @@
         "show_stickers_button": "ステッカーボタンを表示",
         "show_typing_notifications": "入力中通知を表示",
         "sidebar": {
-            "metaspaces_favourites_description": "お気に入りのルームと連絡先をまとめる。",
             "metaspaces_home_all_rooms": "全てのルームを表示",
             "metaspaces_home_all_rooms_description": "他のスペースに存在するルームを含めて、全てのルームをホームに表示。",
             "metaspaces_home_description": "ホームは全体を把握するのに便利です。",
             "metaspaces_orphans": "スペース外のルーム",
             "metaspaces_orphans_description": "スペースに含まれない全てのルームを一箇所にまとめる。",
-            "metaspaces_people_description": "全ての連絡先を一箇所にまとめる。",
             "metaspaces_subsection": "表示するスペース",
             "title": "サイドバー"
         },
@@ -2294,7 +2200,6 @@
             "audio_output": "音声出力",
             "audio_output_empty": "音声出力が検出されません",
             "auto_gain_control": "自動音量調整",
-            "connection_section": "接続",
             "echo_cancellation": "エコーキャンセル",
             "enable_fallback_ice_server_description": "あなたのホームサーバーがアシストサーバーを提供していない場合にのみ適用。IPアドレスが通話中に共有されます。",
             "mirror_local_feed": "ビデオ映像のミラー効果（反転）を有効にする",
@@ -2460,12 +2365,6 @@
     "space_settings": {
         "title": "設定 - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "このスペースにルームを追加する権限がありません",
-        "error_no_permission_add_space": "このスペースに別のスペースを追加する権限がありません",
-        "error_no_permission_create_room": "このスペースに新しいルームを作成する権限がありません",
-        "error_no_permission_invite": "このスペースにユーザーを招待する権限がありません"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "探したい新しいサーバーの名前を入力してください。",
@@ -2653,9 +2552,7 @@
         "m.poll.start": "%(senderName)sがアンケートを開始しました - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)sがルームのアバターを変更しました。",
-            "changed_img": "%(senderDisplayName)sはルームのアバターを<img/>に変更しました",
-            "lightbox_title": "%(senderDisplayName)sが%(roomName)sのアバターを変更しました",
-            "removed": "%(senderDisplayName)sがルームのアバターを削除しました。"
+            "lightbox_title": "%(senderDisplayName)sが%(roomName)sのアバターを変更しました"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3208,13 +3105,7 @@
         "close_to_view_right_panel": "ウィジェットを閉じて、このパネルに表示",
         "context_menu": {
             "delete": "ウィジェットを削除",
-            "delete_warning": "ウィジェットを削除すると、このルームの全てのユーザーから削除されます。削除してよろしいですか？",
-            "move_left": "左に移動",
-            "move_right": "右に移動",
-            "remove": "全員から削除",
-            "revoke": "権限を取り消す",
-            "screenshot": "画像を撮影",
-            "start_audio_stream": "音声ストリーミングを開始"
+            "delete_warning": "ウィジェットを削除すると、このルームの全てのユーザーから削除されます。削除してよろしいですか？"
         },
         "cookie_warning": "このウィジェットはクッキーを使用する可能性があります。",
         "error_hangup_description": "通話から切断されました。（エラー：%(message)s）",
diff --git a/apps/web/src/i18n/strings/ka.json b/apps/web/src/i18n/strings/ka.json
index 0e21fd0cfb..a0d4c1ffb5 100644
--- a/apps/web/src/i18n/strings/ka.json
+++ b/apps/web/src/i18n/strings/ka.json
@@ -3,7 +3,6 @@
         "accept": "მიღება",
         "add": "რჩეულებში",
         "add_existing_room": "დაამატეთ არსებული ოთახი",
-        "add_people": "ხალხის დამატება",
         "apply": "მიმართვა",
         "approve": "დადასტურება",
         "ask_to_join": "მოითხოვეთ შეერთება",
@@ -35,7 +34,6 @@
         "enter_fullscreen": "შედით სრულ ეკრანზე",
         "exit_fullscreeen": "სრული ეკრანიდან გამოსვლა",
         "expand": "გაფართოება",
-        "explore_public_rooms": "გამოიკვლიეთ საჯარო ოთახები",
         "explore_rooms": "ოთახების დათავლიერება",
         "export": "ექსპორტი",
         "forward": "გადაგზავნა",
@@ -47,8 +45,6 @@
         "ignore": "უგულებელყოფა",
         "import": "",
         "invite": "მოწვევა",
-        "invite_to_space": "მოიწვიე სივრცეში",
-        "invites_list": "მოწვევები",
         "join": "შეუერთდი",
         "learn_more": "Გაიგე მეტი",
         "leave": "დატოვება",
@@ -74,7 +70,6 @@
         "rename": "გადარქმევა",
         "reply": "პასუხი",
         "reply_in_thread": "პასუხი თემაში",
-        "report_content": "კონტენტის რეპორტი",
         "resend": "გადაგზავნა",
         "reset": "აღდგენა",
         "resume": "Გაგრძელება",
@@ -92,8 +87,6 @@
         "sign_out": "გამოსვლა",
         "skip": "გამოტოვება",
         "start": "დაწყება",
-        "start_chat": "ჩატის დაწყება",
-        "start_new_chat": "დაიწყეთ ახალი ჩატი",
         "stop": "შეწყვეტა",
         "submit": "წარადგინეთ",
         "subscribe": "გამოწერა",
@@ -192,10 +185,7 @@
         "log_in_new_account": "<a>შესვლა</a> თქვენს ახალ ანგარიშზე.",
         "logout_dialog": {
             "description": "დარწმუნებული ხართ, რომ გსურთ გამოსვლა?",
-            "megolm_export": "გასაღებების ხელით ექსპორტი",
             "setup_key_backup_title": "თქვენ დაკარგავთ წვდომას თქვენს დაშიფრულ შეტყობინებებზე",
-            "setup_secure_backup_description_1": "დაშიფრული შეტყობინებები დაცულია ბოლოდან ბოლომდე დაშიფვრით. მხოლოდ თქვენ და მიმღებ(ებ)ს გაქვთ ამ შეტყობინებების წაკითხვის გასაღები.",
-            "setup_secure_backup_description_2": "როდესაც გამოხვალთ, ეს გასაღებები წაიშლება ამ მოწყობილობიდან, რაც ნიშნავს, რომ თქვენ ვერ შეძლებთ დაშიფრული შეტყობინებების წაკითხვას, თუ არ გაქვთ მათი გასაღებები თქვენს სხვა მოწყობილობებზე, ან არ შექმნით მათ სარეზერვო ასლს სერვერზე.",
             "skip_key_backup": "არ მინდა ჩემი დაშიფრული შეტყობინებები"
         },
         "misconfigured_body": "ჰკითხეთ თქვენს%(brand)s ადმინი შესამოწმებლად<a> თქვენი კონფიგურაცია</a> არასწორი ან დუბლიკატი ჩანაწერებისთვის.",
@@ -390,7 +380,6 @@
         "encrypted": "დაშიფრულია",
         "error": "შეცდომა",
         "faq": "ხშირად დასმული კითხვები",
-        "favourites": "რჩეულები",
         "feedback": "კავშირი",
         "filter_results": "შედეგების გაფილტვრა",
         "forward_message": "შეტყობინების გადაგზავნა",
@@ -398,7 +387,6 @@
         "go_to_settings": "გადადით პარამეტრებში",
         "guest": "სტუმარი",
         "help": "დახმარება",
-        "historical": "ისტორიული",
         "home": "მთავარი",
         "homeserver": "სახლის სერვერი",
         "identity_server": "პირადობის სერვერი",
@@ -410,12 +398,10 @@
         "light": "ღია",
         "loading": "იტვირთება…",
         "location": "მდებარეობა",
-        "low_priority": "დაბალი პრიორიტეტი",
         "matrix": "Matrix",
         "message": "შეტყობინება",
         "message_layout": "შეტყობინებების ფორმა",
         "microphone": "მიკროფონი",
-        "model": "მოდელი",
         "modern": "თანამედროვე",
         "mute": "დადუმება",
         "n_members": {
@@ -470,7 +456,6 @@
         "success": "წარმატება",
         "suggestions": "შეთავაზებები",
         "support": "დახმარება",
-        "system_alerts": "სისტემის გაფრთხილებები",
         "theme": "თემა",
         "thread": "თემა",
         "threads": "ძაფები",
@@ -486,7 +471,6 @@
         "username": "მომხმარებლის სახელი",
         "verified": "დამოწმებულია",
         "version": "ვერსია",
-        "video": "ვიდეო",
         "video_room": "ვიდეო ოთახი",
         "view_message": "შეტყობინების ნახვა",
         "warning": "გაფრთხილება"
@@ -611,7 +595,6 @@
         "thread_root_id": "თემის ფესვის ID:%(threadRootId)s",
         "threads_timeline": "თემების ვადები",
         "title": "დეველოპერის ინსტრუმენტები",
-        "toggle_event": "მოვლენის გადართვა",
         "toolbox": "ხელსაწყოს ყუთი",
         "use_at_own_risk": "ეს UI არ ამოწმებს მნიშვნელობების ტიპებს. გამოიყენეთ საკუთარი რისკის ქვეშ.",
         "user_read_up_to": "მომხმარებელმა წაიკითხა: ",
@@ -631,19 +614,6 @@
         "view_source_decrypted_event_source_unavailable": "გაშიფრული წყარო მიუწვდომელია",
         "widget_screenshots": "ჩართეთ ვიჯეტის ეკრანის ანაბეჭდები მხარდაჭერილ ვიჯეტებზე"
     },
-    "emoji": {
-        "categories": "კატეგორიები",
-        "category_activities": "Საქმიანობის",
-        "category_animals_nature": "ცხოველები და ბუნება",
-        "category_flags": "დროშები",
-        "category_food_drink": "Საჭმელ - სასმელი",
-        "category_frequently_used": "ხშირად გამოყენებული",
-        "category_objects": "ობიექტები",
-        "category_smileys_people": "სმაილი და ხალხი",
-        "category_symbols": "სიმბოლოები",
-        "category_travel_places": "მოგზაურობა და ადგილები",
-        "quick_reactions": "სწრაფი რეაქციები"
-    },
     "empty_room": "ცარიელი ოთახი",
     "empty_room_was_name": "ცარიელი ოთახი (იყო%(oldName)s )",
     "encryption": {
@@ -692,17 +662,6 @@
             "warning": "თუ თქვენ არ წაშალეთ აღდგენის მეთოდი, შესაძლოა თავდამსხმელი ცდილობდეს თქვენს ანგარიშზე წვდომას. შეცვალეთ თქვენი ანგარიშის პაროლი და დააყენეთ აღდგენის ახალი მეთოდი დაუყოვნებლივ პარამეტრებში."
         },
         "set_up_toast_title": "დააყენეთ უსაფრთხო სარეზერვო ასლი",
-        "setup_secure_backup": {
-            "explainer": "შექმენით თქვენი გასაღებების სარეზერვო ასლები გასვლამდე, რათა არ დაკარგოთ ისინი."
-        },
-        "udd": {
-            "interactive_verification_button": "ინტერაქტიულად გადაამოწმეთ emoji-ით",
-            "other_ask_verify_text": "სთხოვეთ ამ მომხმარებელს დაადასტუროს თავისი სესია, ან ხელით დაადასტუროს იგი ქვემოთ.",
-            "other_new_session_text": "%(name)s(%(userId)s ) შესული ხართ ახალ სესიაში დადასტურების გარეშე:",
-            "own_ask_verify_text": "დაადასტურეთ თქვენი სხვა სესია ქვემოთ მოცემული ერთ-ერთი ვარიანტის გამოყენებით.",
-            "own_new_session_text": "თქვენ შეხვედით ახალ სესიაში მისი დადასტურების გარეშე:",
-            "title": "არ არის სანდო"
-        },
         "unable_to_setup_keys_error": "გასაღებების დაყენება შეუძლებელია",
         "verification": {
             "accepting": "მიღება…",
@@ -988,7 +947,6 @@
         "experimental_description": "ექსპერიმენტულად გრძნობ თავს? სცადეთ ჩვენი უახლესი იდეები განვითარების პროცესში. ეს მახასიათებლები არ არის დასრულებული; ისინი შეიძლება იყოს არასტაბილური, შეიძლება შეიცვალოს ან საერთოდ ჩამოაგდეს.<a> გაიგე მეტი</a> .",
         "experimental_section": "ადრეული გადახედვები",
         "feature_wysiwyg_composer_description": "გამოიყენეთ მდიდარი ტექსტი Markdown ნაცვლად შეტყობინების კომპოზიტორში.",
-        "group_calls": "ჯგუფური ზარის ახალი გამოცდილება",
         "group_developer": "დეველოპერი",
         "group_encryption": "დაშიფვრა",
         "group_experimental": "ექსპერიმენტული",
@@ -1001,7 +959,6 @@
         "group_voip": "ხმა და ვიდეო",
         "group_widgets": "ვიჯეტები",
         "hidebold": "შეტყობინების წერტილის დამალვა (მხოლოდ მრიცხველების სამკერდე ნიშნების ჩვენება)",
-        "html_topic": "ოთახის თემების HTML წარმოდგენის ჩვენება",
         "join_beta": "შეუერთდი ბეტას",
         "join_beta_reload": "ბეტაში შეერთება ხელახლა ჩაიტვირთება%(brand)s .",
         "jump_to_date": "",
@@ -1019,13 +976,10 @@
         "notifications": "ჩართეთ შეტყობინებების პანელი ოთახის სათაურში",
         "render_reaction_images": "რეაქციებში მორგებული სურათების გადაცემა",
         "render_reaction_images_description": "ზოგჯერ მოიხსენიება როგორც &quot;მორგებული emojis&quot;.",
-        "report_to_moderators": "მოდერატორებს ანგარიში",
-        "report_to_moderators_description": "ოთახებში, რომლებსაც აქვთ მოდერაციის მხარდაჭერა, ღილაკი „მოხსენება“ საშუალებას მოგცემთ შეატყობინოთ ოთახის მოდერატორებს არასათანადო მოპყრობის შესახებ.",
         "sliding_sync": "მოსლაიდული სინქრო",
         "sliding_sync_description": "აქტიური განვითარების პირობებში არ შეიძლება გამორთული იყოს.",
         "sliding_sync_disabled_notice": "გამოდით და ისევ გამორთეთ",
         "sliding_sync_server_no_support": "თქვენს სერვერს არ აქვს მხარდაჭერა",
-        "under_active_development": "აქტიური განვითარების ქვეშ.",
         "unrealiable_e2e": "არასანდო დაშიფრულ ოთახებში",
         "video_rooms": "ვიდეო ოთახები",
         "video_rooms_a_new_way_to_chat": "ხმოვან და ვიდეოზე საუბრის ახალი გზა%(brand)s.",
@@ -1140,7 +1094,6 @@
         "mentions_and_keywords": "@ხსენებები და საკვანძო სიტყვები",
         "mentions_and_keywords_description": "მიიღეთ შეტყობინებები მხოლოდ ხსენებებითა და საკვანძო სიტყვებით, როგორც დაყენებულია თქვენსში<a> პარამეტრები</a>",
         "mentions_keywords": "ხსენებები და საკვანძო სიტყვები",
-        "message_didnt_send": "შეტყობინება არ გაიგზავნა. დააწკაპუნეთ ინფორმაციისთვის.",
         "mute_description": "თქვენ არ მიიღებთ შეტყობინებებს"
     },
     "notifier": {
@@ -1838,7 +1791,6 @@
         "send_typing_notifications": "აკრეფის შეტყობინებების გაგზავნა",
         "sessions": {
             "best_security_note": "საუკეთესო უსაფრთხოებისთვის, გადაამოწმეთ თქვენი სესიები და გამოდით ნებისმიერი სესიიდან, რომელსაც აღარ იცნობთ ან აღარ იყენებთ.",
-            "browser": "ბრაუზერი",
             "confirm_sign_out": {
                 "one": "დაადასტურეთ ამ მოწყობილობის გამოსვლა",
                 "other": "დაადასტურეთ ამ მოწყობილობებიდან გამოსვლა"
@@ -1887,7 +1839,6 @@
             "no_sessions": "სესიები ვერ მოიძებნა.",
             "no_unverified_sessions": "დაუდასტურებელი სესიები ვერ მოიძებნა.",
             "no_verified_sessions": "დადასტურებული სესიები ვერ მოიძებნა.",
-            "os": "ოპერაციული სისტემა",
             "other_sessions_heading": "სხვა სესიები",
             "push_heading": "Push შეტყობინებები",
             "push_subheading": "მიიღეთ push-შეტყობინებები ამ სესიაზე.",
@@ -1944,13 +1895,11 @@
         "show_stickers_button": "სტიკერების ღილაკის ჩვენება",
         "show_typing_notifications": "აჩვენეთ აკრეფის შეტყობინებები",
         "sidebar": {
-            "metaspaces_favourites_description": "დააჯგუფეთ ყველა თქვენი საყვარელი ოთახი და ადამიანი ერთ ადგილას.",
             "metaspaces_home_all_rooms": "ყველა ოთახის ჩვენება",
             "metaspaces_home_all_rooms_description": "აჩვენეთ ყველა თქვენი ოთახი Home-ში, თუნდაც ისინი სივრცეში იყოს.",
             "metaspaces_home_description": "სახლი სასარგებლოა ყველაფრის მიმოხილვისთვის.",
             "metaspaces_orphans": "ოთახები სივრცის გარეთ",
             "metaspaces_orphans_description": "დააჯგუფეთ ყველა თქვენი ოთახი, რომელიც არ არის სივრცის ნაწილი ერთ ადგილას.",
-            "metaspaces_people_description": "დააჯგუფეთ ყველა თქვენი ადამიანი ერთ ადგილას.",
             "metaspaces_subsection": "საჩვენებელი ადგილები",
             "spaces_explainer": "სივრცეები არის ოთახების და ადამიანების დაჯგუფების გზები. იმ სივრცეებთან ერთად, სადაც იმყოფებით, შეგიძლიათ გამოიყენოთ რამდენიმე წინასწარ აშენებული.",
             "title": "გვერდითი ზოლი"
@@ -1967,7 +1916,6 @@
             "audio_output": "აუდიო გამომავალი",
             "audio_output_empty": "აუდიო გამომავალი არ არის აღმოჩენილი",
             "auto_gain_control": "მოგების ავტომატური კონტროლი",
-            "connection_section": "კავშირი",
             "echo_cancellation": "ექოს გაუქმება",
             "enable_fallback_ice_server": "სარეზერვო ზარის დამხმარე სერვერის დაშვება (%(server)s )",
             "enable_fallback_ice_server_description": "ვრცელდება მხოლოდ იმ შემთხვევაში, თუ თქვენი სახლის სერვერი არ გთავაზობთ. თქვენი IP მისამართი გაზიარდება ზარის დროს.",
@@ -2262,9 +2210,7 @@
         "m.poll.start": "%(senderName)sდაიწყო გამოკითხვა - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)sშეცვალა ოთახის ავატარი.",
-            "changed_img": "%(senderDisplayName)sშეცვალა ოთახის ავატარი<img/>",
-            "lightbox_title": "%(senderDisplayName)sშეცვალე ავატარი%(roomName)s",
-            "removed": "%(senderDisplayName)sამოიღო ოთახის ავატარი."
+            "lightbox_title": "%(senderDisplayName)sშეცვალე ავატარი%(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -2743,13 +2689,7 @@
         "close_to_view_right_panel": "დახურეთ ეს ვიჯეტი ამ პანელში სანახავად",
         "context_menu": {
             "delete": "ვიჯეტის წაშლა",
-            "delete_warning": "ვიჯეტის წაშლა წაშლის მას ამ ოთახში ყველა მომხმარებლისთვის. დარწმუნებული ხართ, რომ გსურთ ამ ვიჯეტის წაშლა?",
-            "move_left": "მარცხნივ გადაადგილება",
-            "move_right": "იმოძრავეთ მარჯვნივ",
-            "remove": "წაშლა ყველასთვის",
-            "revoke": "გააუქმეთ ნებართვები",
-            "screenshot": "სურათის გადაღება",
-            "start_audio_stream": "აუდიო ნაკადის დაწყება"
+            "delete_warning": "ვიჯეტის წაშლა წაშლის მას ამ ოთახში ყველა მომხმარებლისთვის. დარწმუნებული ხართ, რომ გსურთ ამ ვიჯეტის წაშლა?"
         },
         "cookie_warning": "ამ ვიჯეტმა შეიძლება გამოიყენოს ქუქიები.",
         "error_hangup_description": "თქვენ გათიშული იყავით ზართან. (შეცდომა:%(message)s )",
diff --git a/apps/web/src/i18n/strings/ko.json b/apps/web/src/i18n/strings/ko.json
index 31d7b22e11..1dc6ec8b76 100644
--- a/apps/web/src/i18n/strings/ko.json
+++ b/apps/web/src/i18n/strings/ko.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "이모지 선택",
         "jump_first_invite": "첫 초대로 건너뜁니다.",
         "message_composer": "메세지 작성자",
         "n_unread_messages": {
@@ -9,8 +8,6 @@
         "n_unread_messages_mentions": {
             "other": "읽지 않은 메시지 %(count)s개 (멘션 포함)."
         },
-        "recent_rooms": "최근 방",
-        "room_name": "%(name)s 방",
         "room_status_bar": "방 상태 표시줄",
         "seek_bar_label": "오디오 탐색 바",
         "unread_messages": "읽지 않은 메시지"
@@ -20,7 +17,6 @@
         "accept": "수락",
         "add": "추가",
         "add_existing_room": "기존 방 목록에서 추가하기",
-        "add_people": "사용자 추가",
         "apply": "적용",
         "approve": "승인",
         "ask_to_join": "참여를 요청하세요.",
@@ -55,7 +51,6 @@
         "enter_fullscreen": "전체 화면 표시",
         "exit_fullscreeen": "전체 화면 종료",
         "expand": "펼치기",
-        "explore_public_rooms": "공개 방 목록 살펴보기",
         "explore_rooms": "방 검색",
         "export": "내보내기",
         "forward": "전달",
@@ -67,8 +62,6 @@
         "ignore": "무시",
         "import": "가져오기",
         "invite": "초대",
-        "invite_to_space": "스페이스에 초대하기",
-        "invites_list": "초대",
         "join": "참가",
         "learn_more": "자세히 알아보기",
         "leave": "떠나기",
@@ -95,7 +88,6 @@
         "rename": "이름 변경",
         "reply": "답장",
         "reply_in_thread": "스레드에 답장",
-        "report_content": "내용 신고",
         "report_room": "방 신고",
         "resend": "다시 보내기",
         "reset": "되돌리기",
@@ -115,8 +107,6 @@
         "sign_out": "이 기기 로그아웃",
         "skip": "건너뛰기",
         "start": "시작하기",
-        "start_chat": "대화 시작",
-        "start_new_chat": "새로운 대화 시작하기",
         "stop": "중지",
         "submit": "제출",
         "subscribe": "구독",
@@ -217,11 +207,9 @@
         "log_in_new_account": "새 계정으로 <a>로그인</a>하기.",
         "logout_dialog": {
             "description": "정말로 이 기기를 제거하시겠습니까?",
-            "megolm_export": "수동으로 키 내보내기",
-            "setup_key_backup_title": "암호화된 메시지에 접근할 수 없게 됩니다",
-            "setup_secure_backup_description_1": "암호화된 메시지는 종단간 암호화로 보호됩니다. 오직 당신과 상대방만 이 메시지를 읽을 수 있는 키를 갖습니다.",
-            "setup_secure_backup_description_2": "이 기기를 제거하면 다른 기기에 암호화 키가 있거나 서버에 백업해 두지 않은 경우, 암호화된 메시지를 읽을 수 없게 됩니다.",
-            "skip_key_backup": "저는 제 암호화된 메시지를 원하지 않아요"
+            "setup_key_backup_title": "암호화된 채팅에 대한 접근 권한을 잃게 됩니다.",
+            "setup_secure_backup_description": "현재 유일하게 등록된 기기입니다. 이 기기를 제거하면 다음 로그인 시 디지털 신원을 인증하고 암호화된 대화를 복구하기 위해 복구 키가 필요합니다.",
+            "skip_key_backup": "그래도 이 기기 삭제"
         },
         "misconfigured_body": "%(brand)s 관리자에게 <a>당신의 설정</a>에 잘못되거나 중복된 항목이 있는지 확인하도록 요청하세요.",
         "misconfigured_title": "%(brand)s이 잘못 설정됨",
@@ -272,7 +260,6 @@
             "point_the_camera": "여기에 표시된 QR 코드를 스캔하세요",
             "scan_code_instruction": "다른 기기로 QR 코드를 스캔하세요",
             "scan_qr_code": "QR 코드로 로그인",
-            "security_code": "보안 코드",
             "security_code_prompt": "요청 시, 다른 기기에서 아래 코드를 입력하세요.",
             "select_qr_code": "\"%(scanQRCode)s\"를 선택하십시오.",
             "unsupported_explainer": "귀하의 계정 제공업체는 QR 코드를 사용한 새 기기 로그인을 지원하지 않습니다.",
@@ -471,13 +458,13 @@
         "description": "설명",
         "deselect_all": "전체 선택 해제",
         "device": "기기",
+        "disabled_by_homeserver": "홈서버에 의해 비활성화됨",
         "edited": "편집됨",
         "email_address": "이메일 주소",
         "emoji": "이모지",
         "encrypted": "암호화됨",
         "error": "오류",
         "faq": "자주 묻는 질문 (FAQ)",
-        "favourites": "즐겨찾기",
         "feedback": "피드백",
         "filter_results": "필터 결과",
         "forward_message": "전달 메세지",
@@ -485,7 +472,6 @@
         "go_to_settings": "설정으로 가기",
         "guest": "손님",
         "help": "도움말",
-        "historical": "기록",
         "home": "홈",
         "homeserver": "홈서버",
         "identity_server": "ID 서버",
@@ -497,13 +483,11 @@
         "light": "라이트",
         "loading": "불러오는 중…",
         "location": "위치",
-        "low_priority": "중요하지 않음",
         "matrix": "매트릭스",
         "message": "메시지",
         "message_layout": "메시지 레이아웃",
         "message_timestamp_invalid": "유효하지 않은 타임스탬프",
         "microphone": "마이크",
-        "model": "모델",
         "moderation_and_safety": "관리 및 안전",
         "modern": "모던",
         "mute": "음소거",
@@ -561,7 +545,6 @@
         "success": "성공",
         "suggestions": "추천 목록",
         "support": "지원",
-        "system_alerts": "시스템 알림",
         "theme": "테마",
         "thread": "스레드",
         "threads": "스레드",
@@ -578,7 +561,6 @@
         "username": "사용자 이름",
         "verified": "검증됨",
         "version": "버전",
-        "video": "비디오",
         "video_room": "비디오 room",
         "view_message": "메시지 보기",
         "warning": "경고"
@@ -673,6 +655,13 @@
         "unfederated_label_default_on": "해당 방이 자체 홈서버를 보유한 외부 팀과의 협업에 사용될 경우 이 기능을 비활성화할 수 있습니다. 이 설정은 나중에 변경할 수 없습니다.",
         "unsupported_version": "서버가 지정된 방 버전을 지원하지 않습니다."
     },
+    "create_section_dialog": {
+        "create_section": "섹션 생성",
+        "description": "이 섹션은 당신만을 위한 공간입니다.",
+        "label": "섹션 이름",
+        "title": "섹션 만들기",
+        "title_edition": "섹션을 편집하세요"
+    },
     "create_space": {
         "add_details_prompt": "사람들이 알아볼 수 있도록 세부 사항을 추가하세요.",
         "add_details_prompt_2": "이 설정은 언제든지 변경할 수 있습니다.",
@@ -821,7 +810,7 @@
         "invalid_json": "유효한 JSON이 아닌 것 같습니다.",
         "level": "레벨",
         "low_bandwidth_mode": "저대역폭 모드",
-        "low_bandwidth_mode_description": "호환되는 홈 서버가 필요합니다.",
+        "low_bandwidth_mode_description": "암호화, 상태 표시, 프로필 이미지, 읽음 확인, 타이핑 알림 기능이 비활성화됩니다.",
         "main_timeline": "주 타임라인",
         "manual_device_verification": "수동 기기 검증",
         "no_receipt_found": "영수증을 찾을 수 없습니다",
@@ -876,7 +865,6 @@
         "thread_root_id": "스레드 Root ID: %(threadRootId)s",
         "threads_timeline": "스레드 타임라인",
         "title": "개발자 도구",
-        "toggle_event": "이벤트 토글",
         "toolbox": "도구 상자",
         "use_at_own_risk": "이 UI는 값의 유형을 확인하지 않습니다. 사용 시 주의하십시오.",
         "user_avatar": "아바타: %(avatar)s",
@@ -911,22 +899,6 @@
     },
     "dialog_close_label": "대화 상자 닫기",
     "download_completed": "다운로드 완료",
-    "emoji": {
-        "categories": "카테고리",
-        "category_activities": "활동",
-        "category_animals_nature": "동물 & 자연",
-        "category_flags": "깃발",
-        "category_food_drink": "음식 & 음료",
-        "category_frequently_used": "자주 사용함",
-        "category_objects": "물건",
-        "category_smileys_people": "표정 & 사람",
-        "category_symbols": "기호",
-        "category_travel_places": "여행 & 장소",
-        "quick_reactions": "빠른 리액션"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "검색 취소"
-    },
     "empty_room": "빈 채팅방",
     "empty_room_was_name": "빈 채팅방 (이전 이름: %(oldName)s)",
     "encryption": {
@@ -964,7 +936,6 @@
         "import_invalid_passphrase": "인증 확인 실패: 비밀번호를 틀리셨나요?",
         "key_storage_out_of_sync": "키 저장소가 동기화되지 않았습니다.",
         "key_storage_out_of_sync_description": "키 저장소 및 메시지 기록에 대한 액세스를 유지하려면 복구 키를 확인하세요.",
-        "message_shared_by": "메시지가 전송될 당시 방에 계시지 않아, %(displayName)s(%(userId)s)님이 이 메시지를 공유했습니다.",
         "messages_not_secure": {
             "cause_1": "당신의 홈 서버",
             "cause_2": "사용자가 확인 중인 홈 서버에 연결된 사용자",
@@ -990,19 +961,8 @@
         "set_up_recovery": "대화 백업하기",
         "set_up_recovery_toast_description": "대화 내용은 종단간 암호화 기술로 자동 백업됩니다. 모든 기기에 접속할 수 없는 상황에서 백업을 복구하고 디지털 신원을 유지하려면 복구 키가 반드시 필요합니다.",
         "set_up_toast_title": "보안 백업 설정",
-        "setup_secure_backup": {
-            "explainer": "키를 잃어버리지 않도록 이 기기에서 로그아웃하기 전에 미리 백업해 두세요."
-        },
         "turn_on_key_storage": "키 저장 기능 켜기",
         "turn_on_key_storage_description": "이 설정을 통해 새로운 기기에서도 대화 기록을 확인할 수 있으며, 대화 및 디지털 신원 백업에 반드시 필요합니다.",
-        "udd": {
-            "interactive_verification_button": "이모지를 통한 상호 인증",
-            "other_ask_verify_text": "이 사용자에게 세션 확인을 요청하거나, 아래에서 수동으로 확인하십시오.",
-            "other_new_session_text": "%(name)s (%(userId)s)가 새 세션에 인증 없이 로그인했습니다:",
-            "own_ask_verify_text": "아래 옵션 중 하나를 사용하여 다른 세션을 확인하세요.",
-            "own_new_session_text": "인증하지 않고 새 세션에 로그인했습니다.",
-            "title": "신뢰할 수 없음"
-        },
         "unable_to_setup_keys_error": "키 설정이 불가능합니다",
         "verification": {
             "accepting": "수락 중…",
@@ -1347,6 +1307,14 @@
         "impossible_dialog_title": "통합이 허용되지 않습니다"
     },
     "invite": {
+        "confirm_unknown_users": {
+            "invite_subtitle": "이 연락처들과는 기존 대화 기록이 없습니다. 계속하기 전에 이 방에 초대하는 것이 맞는지 확인해 주세요",
+            "invite_title": "이 방에 새 사용자를 초대할까요?",
+            "start_chat_subtitle_multiple_users": "이 사람들과는 기존 대화 기록이 없습니다. 계속하기 전에 초대를 진행할지 확인해 주세요.",
+            "start_chat_subtitle_one_user": "이 사람과는 기존 대화 기록이 없습니다. 계속하기 전에 초대를 진행할지 확인해 주세요.",
+            "start_chat_title_multiple_users": "이 새 연락처들과 대화를 시작하시겠습니까?",
+            "start_chat_title_one_user": "이 사용자와 대화를 시작하시겠습니까?"
+        },
         "email_caption": "이메일로 초대",
         "email_limit_one": "이메일 초대는 한 번에 하나씩만 보낼 수 있습니다",
         "email_use_default_is": "이메일로 초대하기 위해 ID 서버를 사용합니다. <default>기본 (%(defaultIdentityServerName)s)을(를) 사용하거나</default> <settings>설정</settings>에서 관리하세요.",
@@ -1508,8 +1476,12 @@
         "experimental_section": "조기 시연",
         "extended_profiles_msc_support": "서버가 MSC4133을 지원해야 합니다.",
         "feature_disable_call_per_sender_encryption": "Element 통화에서 발신자별 암호화 비활성화",
+        "feature_user_status": {
+            "description": "현재 상태를 확인하고 설정할 수 있도록 합니다.",
+            "display_name": "사용자 상태",
+            "required_msc_support": "레거시 동기화 프로필 업데이트를 위해 MSC4429 규격이 필요합니다."
+        },
         "feature_wysiwyg_composer_description": "메시지 작성기에서 Markdown 대신 서식 있는 텍스트를 사용하세요",
-        "group_calls": "그룹 통화 새 기능",
         "group_developer": "개발자",
         "group_encryption": "암호화",
         "group_experimental": "실험적 기능",
@@ -1524,7 +1496,6 @@
         "group_voip": "음성 & 영상",
         "group_widgets": "위젯",
         "hidebold": "알림 점 숨기기 (카운터 배지만 표시)",
-        "html_topic": "채팅방 주제의 HTML 표현 표시",
         "join_beta": "베타 참여",
         "join_beta_reload": "베타에 참여하면 %(brand)s 페이지가 다시 로드됩니다.",
         "jump_to_date": "날짜로 이동 ( /jumptodate 명령어 및 날짜 이동 헤더 추가 )",
@@ -1536,21 +1507,16 @@
         "location_share_live_description": "임시 구현. 위치는 채팅방 기록에 유지됩니다.",
         "mjolnir": "새로운 차단/무시 기능",
         "msc3531_hide_messages_pending_moderation": "관리자가 검토 대기 중인 메시지를 숨길 수 있도록 하십시오.",
-        "new_room_list": "새 채팅방 목록 활성화",
         "notification_settings": "새 알림 설정",
         "notification_settings_beta_caption": "더욱 간편해진 알림 설정 방법을 만나보세요. 원하는 대로, 당신의 취향에 맞게 %(brand)s을(를) 설정할 수 있습니다.",
         "notification_settings_beta_title": "알림 설정",
         "notifications": "방 헤더에서 알림 패널 활성화",
         "render_reaction_images": "반응에 사용자 정의 이미지 렌더링",
         "render_reaction_images_description": "때로는 \"사용자 정의 이모지\"라고도 불립니다.",
-        "report_to_moderators": "관리자에게 신고하기",
-        "report_to_moderators_description": "운영자가 관리하는 방에서는 '신고' 버튼으로 관리자에게 문제를 신고할 수 있습니다.",
-        "room_list_sections": "대화방 목록 섹션",
         "sliding_sync": "슬라이딩 동기화 모드",
         "sliding_sync_description": "개발 진행 중인 기능이며 비활성화는 불가능합니다. 현재 Element Call 기능은 지원하지 않습니다.",
         "sliding_sync_disabled_notice": "기능을 해제하려면 다시 로그인하세요",
         "sliding_sync_server_no_support": "서버에서 지원하지 않는 기능입니다.",
-        "under_active_development": "활발한 개발 중입니다.",
         "unrealiable_e2e": "암호화된 방에서는 신뢰할 수 없음",
         "video_rooms": "영상채팅방",
         "video_rooms_a_new_way_to_chat": "%(brand)s에서 음성 및 영상으로 채팅하는 새로운 방법",
@@ -1606,9 +1572,6 @@
         "room_rejoin_warning": "이 방은 공개되지 않았습니다. 초대 없이는 다시 들어올 수 없습니다.",
         "space_rejoin_warning": "이 스페이스는 공개되지 않습니다. 초대 없이는 다시 참여할 수 없습니다."
     },
-    "left_panel": {
-        "open_dial_pad": "다이얼 패드 열기"
-    },
     "lightbox": {
         "rotate_left": "왼쪽으로 회전",
         "rotate_right": "오른쪽으로 회전",
@@ -1706,7 +1669,6 @@
         "mentions_and_keywords": "@멘션(언급) & 키워드",
         "mentions_and_keywords_description": "<a>설정</a>에서 지정한 멘션과 키워드인 경우에만 알림을 받습니다",
         "mentions_keywords": "멘션 및 키워드",
-        "message_didnt_send": "메시지가 전송되지 않았습니다. 자세한 내용은 클릭하세요.",
         "mute_description": "어떤 알람도 받지 않습니다"
     },
     "notifier": {
@@ -1791,7 +1753,6 @@
     },
     "quick_settings": {
         "all_settings": "전체 설정",
-        "metaspace_section": "사이드바 고정",
         "sidebar_settings": "추가 옵션",
         "title": "빠른 설정"
     },
@@ -1807,27 +1768,18 @@
         "ongoing": "제거 중…",
         "reason_label": "이유(선택 사항)"
     },
+    "remove_section_dialog": {
+        "confirmation": "이 섹션을 정말로 삭제하시겠습니까?",
+        "description": "섹션의 대화방들은 전체 채팅 목록에서 계속 확인할 수 있습니다.",
+        "remove_section": "섹션 제거",
+        "title": "이 섹션을 삭제하시겠습니까?"
+    },
     "report_content": {
         "description": "이 메시지를 신고하면 고유 '이벤트 ID'를 홈서버의 관리자에게 보내게 됩니다. 이 방의 메시지가 암호화되어 있다면, 홈서버 관리자는 메시지 문자를 읽거나 파일 혹은 사진을 볼 수 없습니다.",
-        "disagree": "동의 안 함",
-        "error_create_room_moderation_bot": "모더레이션 봇과 함께 채팅방을 생성할 수 없습니다",
         "hide_messages_from_user": "이 사용자로부터 현재 및 향후 모든 메시지를 숨기려면 선택하십시오.",
         "ignore_user": "사용자 무시",
-        "illegal_content": "불법 콘텐츠",
         "missing_reason": "왜 신고하는 지 이유를 적어주세요.",
-        "nature": "부적절한 메시지의 유형을 선택하고, 해당 메시지가 왜 부적절한지 설명해 주세요.",
-        "nature_disagreement": "이 사용자가 작성한 내용은 잘못되었습니다.\n이 내용은 채팅방 관리자에게 신고될 것입니다.",
-        "nature_illegal": "이 사용자는 개인 정보를 유출하거나 폭력을 행사하겠다고 위협하는 등 불법적인 행동을 보이고 있습니다. 이 사실은 채팅방 운영자에게 신고되며, 운영자는 사법 당국에 신고할 수 있습니다.",
-        "nature_nonstandard_admin": "이 방은 불법 또는 유해한 콘텐츠를 게시하거나, 운영진이 불법 또는 유해한 콘텐츠를 적절히 관리하지 못하는 경우에 해당됩니다.\n해당 사항은 %(homeserver)s 관리자에게 신고될 예정입니다.",
-        "nature_nonstandard_admin_encrypted": "이 채팅방은 불법 또는 유해한 콘텐츠를 다루거나, 관리자가 불법/유해 콘텐츠를 적절히 관리하지 못하는 방입니다. 이는 %(homeserver)s 관리자로 신고됩니다. 관리자는 이 채팅방의 암호화된 내용을 열람할 수 없습니다.",
-        "nature_other": "기타 사유. 문제를 설명해 주세요.\n이 내용은 채팅방 관리자에게 보고될 예정입니다.",
-        "nature_spam": "이 사용자는 광고, 광고 링크 또는 선전성 링크로 채팅방을 스팸하고 있습니다. 이는 채팅방 관리자에게 신고될 예정입니다.",
-        "nature_toxic": "이 사용자는 다른 사용자를 모욕하거나 가족 친화적인 채팅방에서 성인 전용 콘텐츠를 공유하는 등 채팅방 규칙을 위반하는 유해한 행동을 하고 있습니다. 이는 채팅방 관리자에게 신고될 예정입니다.",
-        "other_label": "기타",
-        "report_content_to_homeserver": "홈서버 관리자에게 내용 신고하기",
-        "report_entire_room": "채팅방 전체 신고",
-        "spam_or_propaganda": "스팸 또는 광고",
-        "toxic_behaviour": "유해한 행동"
+        "report_content_to_homeserver": "홈서버 관리자에게 내용 신고하기"
     },
     "report_room": {
         "description": "이 채팅방을 계정 제공자에게 신고하세요. 메시지가 암호화된 경우, 관리자는 내용을 확인할 수 없습니다",
@@ -2092,43 +2044,21 @@
         "waiting_for_join_title": "다른 사용자가 %(brand)s에 참여하기를 기다리는 중입니다."
     },
     "room_list": {
-        "add_room_label": "방 추가",
         "add_space_label": "스페이스 추가하기",
-        "breadcrumbs_empty": "최근에 방문하지 않은 방 목록",
-        "breadcrumbs_label": "최근 방문한 방 목록",
         "failed_add_tag": "방에 %(tagName)s 태그 추가에 실패함",
         "failed_remove_tag": "방에 %(tagName)s 태그 제거에 실패함",
         "failed_set_dm_tag": "다이렉트 메시지 태그 설정에 실패했습니다",
-        "home_menu_label": "홈 옵션",
-        "join_public_room_label": "공개 방 참가하기",
-        "joining_rooms_status": {
-            "other": "현재 %(count)s 방에 참여 중입니다"
-        },
         "list_title": "채팅방 목록",
         "more_options": {
             "leave_room": "채팅방 떠나기"
         },
         "notification_options": "알림 옵션",
-        "redacting_messages_status": {
-            "other": "현재 %(count)s 방에서 메시지를 삭제 중입니다"
-        },
         "section": {
             "chats": "채팅",
             "favourites": "즐겨찾기",
             "low_priority": "낮은 우선순위"
         },
-        "show_less": "간단히 표시",
-        "show_n_more": {
-            "other": "%(count)s개 더 보기"
-        },
-        "show_previews": "메시지 미리 보기 표시",
-        "sort_by": "정렬 기준",
-        "sort_by_activity": "활동내역",
-        "sort_by_alphabet": "A-Z",
-        "sort_unread_first": "읽지 않은 메시지가 있는 방을 먼저 표시",
-        "space_menu_label": "%(spaceName)s 메뉴",
-        "sublist_options": "목록 옵션",
-        "suggested_rooms_heading": "추천 방"
+        "show_less": "간단히 표시"
     },
     "room_settings": {
         "access": {
@@ -2634,6 +2564,7 @@
             "username": "사용자 이름"
         },
         "inline_url_previews_default": "기본으로 인라인 URL 미리 보기 사용하기",
+        "inline_url_previews_encrypted": "암호화된 방에서 미리 보기 기능 활성화",
         "insert_trailing_colon_mentions": "메시지 시작 부분에 사용자 언급 뒤에 콜론을 추가합니다",
         "invite_controls": {
             "default_label": "사용자가 방에 초대할 수 있도록 허용"
@@ -2771,6 +2702,8 @@
             "enable_tray_icon": "트레이 아이콘을 표시하고 닫을 때 창을 최소화합니다.",
             "keyboard_heading": "키보드 단축키",
             "keyboard_view_shortcuts_button": "모든 키보드 단축키를 보려면 <a>여기를 클릭하세요</a>.",
+            "link_previews_description": "메시지 아래에 링크 정보를 표시합니다.",
+            "link_previews_heading": "링크 미리보기",
             "media_heading": "이미지, GIF 및 동영상",
             "presence_description": "귀하의 활동과 상태를 다른 사람들과 공유하세요.",
             "publish_timezone": "공개 프로필에 시간대 게시",
@@ -2827,7 +2760,6 @@
         "send_typing_notifications": "입력 알림 보내기",
         "sessions": {
             "best_security_note": "최상의 보안을 위해 세션을 인증하고, 인식하지 못하거나 더 이상 사용하지 않는 세션은 제거하세요.",
-            "browser": "브라우저",
             "confirm_sign_out": {
                 "other": "이 기기들을 제거하시겠습니까?"
             },
@@ -2873,7 +2805,6 @@
             "no_sessions": "세션을 찾을 수 없습니다.",
             "no_unverified_sessions": "확인되지 않은 세션이 없습니다.",
             "no_verified_sessions": "확인된 세션이 없습니다.",
-            "os": "운영체제",
             "other_sessions_heading": "다른 세션",
             "push_heading": "푸시 알림",
             "push_subheading": "이 세션에 대한 푸시 알림을 받으세요.",
@@ -2932,13 +2863,11 @@
         "showbold": "채팅방 목록에서 모든 활동 표시 (점 또는 읽지 않은 메시지 수)",
         "sidebar": {
             "dialog_title": "<strong>설정:</strong> 사이드바",
-            "metaspaces_favourites_description": "좋아하는 채팅방과 사람들을 한곳에 모아보세요.",
             "metaspaces_home_all_rooms": "모든 방 목록 보기",
             "metaspaces_home_all_rooms_description": "홈에서 모든 채팅방을 표시합니다. 채팅방이 스페이스에 속해 있어도 표시됩니다.",
             "metaspaces_home_description": "홈은 모든 것을 한눈에 파악하는 데 유용합니다.",
             "metaspaces_orphans": "스페이스 밖의 채팅방",
             "metaspaces_orphans_description": "스페이스에 속하지 않은 모든 채팅방을 한곳에 모으기",
-            "metaspaces_people_description": "모든 사람들을 한곳에 모으세요.",
             "metaspaces_subsection": "표시할 스페이스",
             "metaspaces_video_rooms": "영상 회의실 및 회의",
             "metaspaces_video_rooms_description": "모든 비공개 영상 방 및 회의를 그룹화합니다.",
@@ -2965,7 +2894,6 @@
             "audio_output": "오디오 출력",
             "audio_output_empty": "오디오 출력 감지 없음",
             "auto_gain_control": "자동 이득 제어",
-            "connection_section": "연결",
             "dialog_title": "<strong>설정:</strong> 음성 및 영상",
             "echo_cancellation": "에코 제거",
             "echo_cancellation_description": "통화 중 마이크 입력에서 에코를 제거합니다. 이 설정은 Element Call에도 적용됩니다.",
@@ -3061,6 +2989,14 @@
         "server_error_detail": "서버를 쓸 수 없거나 과부하거나, 다른 문제가 있습니다.",
         "shrug": "¯\\_(ツ)_/¯ 앞에 일반 문자 메시지를 놓으세요",
         "spoiler": "스포일러로서 주어진 메시지를 전송",
+        "status": {
+            "description": "현재 상태 설정",
+            "no_args": "인자가 제공되지 않았습니다. 이모지와 선택 사항인 텍스트 컴포넌트를 입력해야 합니다.",
+            "no_emoji": "이모티콘을 제공하지 않으셨습니다.",
+            "no_text": "상태 메시지를 제공하지 않으셨습니다.",
+            "too_long_emoji": "첫 번째 인수는 이모티콘이어야 합니다.",
+            "too_long_text": "입력하신 텍스트가 너무 깁니다."
+        },
         "tableflip": "평문 텍스트 메시지 앞에 (╯°□°）╯︵ ┻━┻ 를 덧붙임",
         "topic": "방 주제를 얻거나 설정하기",
         "topic_none": "이 방은 주제가 없습니다.",
@@ -3149,12 +3085,6 @@
     "space_settings": {
         "title": "설정 -%(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "이 공간에 방을 추가할 권한이 없습니다.",
-        "error_no_permission_add_space": "이 스페이스에 스페이스를 추가할 권한이 없습니다.",
-        "error_no_permission_create_room": "이 스페이스에서 새 방을 생성할 권한이 없습니다.",
-        "error_no_permission_invite": "이 스페이스에 사람을 초대할 권한이 없습니다."
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "접속할 새 서버 이름을 입력하세요",
@@ -3279,7 +3209,6 @@
         "download_action_downloading": "다운로드 중",
         "download_failed": "다운로드 실패",
         "download_failed_description": "이 파일을 다운로드하는 동안 오류가 발생했습니다.",
-        "e2e_state": "종단 간 암호화 현황",
         "edits": {
             "tooltip_label": "%(date)s에 편집함. 클릭해서 편집 보기.",
             "tooltip_sub": "편집 내용을 보려면 클릭하세요",
@@ -3360,9 +3289,7 @@
         "m.poll.start": "%(senderName)s님이 설문을 시작했습니다 - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s 방 아바타를 변경했습니다.",
-            "changed_img": "%(senderDisplayName)s님이 방 아바타를 <img/>(으)로 바꿈",
-            "lightbox_title": "%(senderDisplayName)s님이 %(roomName)s 방의 아바타를 바꿈",
-            "removed": "%(senderDisplayName)s님이 방 아바타를 제거했습니다."
+            "lightbox_title": "%(senderDisplayName)s님이 %(roomName)s 방의 아바타를 바꿈"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3766,6 +3693,14 @@
         "call_held": "%(peerName)s님이 통화를 보류했습니다",
         "call_held_resume": "통화를 보류했습니다. <a>다시 시작</a>",
         "call_held_switch": "통화를 보류했습니다. <a>전환</a>",
+        "call_members": {
+            "exhaustive": {
+                "other": "<avatars/> 통화 참여 중"
+            },
+            "overflow": {
+                "other": "<avatars/> +%(overflowCount)s명 통화 중"
+            }
+        },
         "call_toast_unknown_room": "알 수 없는 채팅방",
         "camera_disabled": "카메라가 꺼져 있습니다",
         "camera_enabled": "카메라가 여전히 활성화되어 있습니다",
@@ -3788,10 +3723,12 @@
         "enable_microphone": "마이크 음소거 해제",
         "expand": "통화로 돌아가기",
         "get_call_link": "통화 링크 공유하기",
+        "group_call_started": "그룹 통화 시작됨",
         "hangup": "전화 끊기",
         "hide_sidebar_button": "사이드바 숨기기",
         "input_devices": "입력 장치",
         "jitsi_call": "Jitsi 화상 회의",
+        "join_with_video": "동영상으로 참여하기",
         "legacy_call": "레거시 콜",
         "maximise": "화면 채우기",
         "maximise_call": "통화 최대화",
@@ -3851,6 +3788,11 @@
         "you_are_presenting": "화면을 공유 중입니다."
     },
     "web_default_device_name": "%(appName)s: %(browserName)s on %(osName)s",
+    "welcome": {
+        "tagline_element": "압도적인 속도와 간결함.",
+        "title_element": "가장 나다운 공간, 엘리먼트에서",
+        "title_generic": "%(brand)s에 오신 것을 환영합니다"
+    },
     "widget": {
         "added_by": "위젯을 추가했습니다",
         "capabilities_dialog": {
@@ -3872,6 +3814,7 @@
             "change_name_this_room": "이 채팅방의 이름을 변경하세요",
             "change_topic_active_room": "현재 사용 중인 채팅방의 주제를 변경하세요",
             "change_topic_this_room": "이 채팅방의 주제를 변경하세요",
+            "download_file": "미디어 저장소에서 파일 다운로드",
             "receive_membership_active_room": "현재 채팅방의 멤버 변동 내역 보기",
             "receive_membership_this_room": "채팅방 멤버 변동 내역 보기",
             "remove_ban_invite_leave_active_room": "다른 사용자를 현재 채팅방에서 내보내거나, 차단하거나, 초대할 수 있으며, 회원님 자신도 강제로 퇴장시킬 수 있습니다.",
@@ -3927,13 +3870,7 @@
         "close_to_view_right_panel": "이 위젯을 닫으면 이 패널에서 볼 수 있습니다",
         "context_menu": {
             "delete": "위젯 삭제",
-            "delete_warning": "위젯을 삭제하면 이 방의 모든 사용자에게도 제거됩니다. 위젯을 삭제하겠습니까?",
-            "move_left": "왼쪽으로 이동",
-            "move_right": "오른쪽으로 이동",
-            "remove": "모두를 위해 제거하세요",
-            "revoke": "권한 취소",
-            "screenshot": "사진 찍기",
-            "start_audio_stream": "오디오 스트림 시작"
+            "delete_warning": "위젯을 삭제하면 이 방의 모든 사용자에게도 제거됩니다. 위젯을 삭제하겠습니까?"
         },
         "cookie_warning": "이 위젯은 쿠키를 사용합니다.",
         "error_hangup_description": "통화가 끊겼습니다. (오류:%(message)s )",
diff --git a/apps/web/src/i18n/strings/lo.json b/apps/web/src/i18n/strings/lo.json
index 8884433e71..5816556e37 100644
--- a/apps/web/src/i18n/strings/lo.json
+++ b/apps/web/src/i18n/strings/lo.json
@@ -9,7 +9,6 @@
             "one": "ການກ່າວເຖິງທີ່ຍັງບໍ່ໄດ້ອ່ານ 1.",
             "other": "%(count)s ຂໍ້ຄວາມທີ່ຍັງບໍ່ໄດ້ອ່ານ ລວມທັງການກ່າວເຖິງ."
         },
-        "room_name": "ຫ້ອງ %(name)s",
         "unread_messages": "ຂໍ້ຄວາມທີ່ຍັງບໍ່ໄດ້ອ່ານ."
     },
     "a11y_jump_first_unread_room": "ໄປຫາຫ້ອງທໍາອິດທີ່ຍັງບໍ່ໄດ້ອ່ານ.",
@@ -17,7 +16,6 @@
         "accept": "ຍອມຮັບ",
         "add": "ຕື່ມ",
         "add_existing_room": "ເພີ່ມຫ້ອງທີ່ມີຢູ່",
-        "add_people": "ເພີ່ມຄົນ",
         "approve": "ອະນຸມັດ",
         "back": "ກັບຄືນ",
         "call": "ໂທ",
@@ -45,7 +43,6 @@
         "edit": "ແກ້ໄຂ",
         "enable": "ເປີດໃຊ້ງານ",
         "expand": "ຂະຫຍາຍ",
-        "explore_public_rooms": "ສຳຫຼວດຫ້ອງສາທາລະນະ",
         "explore_rooms": "ການສຳຫຼວດຫ້ອງ",
         "export": "ສົ່ງອອກ",
         "forward": "ສົ່ງຕໍ່",
@@ -57,8 +54,6 @@
         "ignore": "ບໍ່ສົນໃຈ/ຍົກເວັ້ນ",
         "import": "ນໍາເຂົ້າ",
         "invite": "ເຊີນ",
-        "invite_to_space": "ເຊີນໄປຍັງພື້ນທີ່",
-        "invites_list": "ເຊີນ",
         "join": "ເຂົ້າຮ່ວມ",
         "learn_more": "ສຶກສາເພີ່ມເຕີມ",
         "leave": "ອອກຈາກ",
@@ -82,7 +77,6 @@
         "rename": "ປ່ຽນຊື່",
         "reply": "ຕອບ",
         "reply_in_thread": "ຕອບໃນກະທູ້",
-        "report_content": "ລາຍງານເນື້ອຫາ",
         "resend": "ສົ່ງຄືນ",
         "reset": "ຕັ້ງຄ່າຄືນ",
         "resume": "ປະຫວັດຫຍໍ້",
@@ -99,8 +93,6 @@
         "sign_out": "ອອກຈາກລະບົບ",
         "skip": "ຂ້າມ",
         "start": "ເລີ່ມຕົ້ນ",
-        "start_chat": "ເລີ່ມການສົນທະນາ",
-        "start_new_chat": "ເລີ່ມການສົນທະນາໃໝ່",
         "stop": "ຢຸດ",
         "submit": "ສົ່ງ",
         "subscribe": "ຕິດຕາມ",
@@ -186,9 +178,7 @@
         "log_in_new_account": "<a>ເຂົ້າສູ່ລະບົບ</a> ບັນຊີໃໝ່ຂອງທ່ານ.",
         "logout_dialog": {
             "description": "ທ່ານແນ່ໃຈບໍ່ວ່າຕ້ອງການອອກຈາກລະບົບ?",
-            "megolm_export": "ສົ່ງກະແຈອອກດ້ວຍຕົນເອງ",
             "setup_key_backup_title": "ທ່ານຈະສູນເສຍການເຂົ້າເຖິງລະຫັດຂໍ້ຄວາມຂອງທ່ານ",
-            "setup_secure_backup_description_1": "ຂໍ້ຄວາມທີ່ເຂົ້າລະຫັດໄວ້ແມ່ນປອດໄພດ້ວຍການເຂົ້າລະຫັດແບບຕົ້ນທາງ. ພຽງແຕ່ທ່ານ ແລະ ຜູ້ຮັບເທົ່ານັ້ນທີ່ມີກະແຈເພື່ອອ່ານຂໍ້ຄວາມເຫຼົ່ານີ້.",
             "skip_key_backup": "ຂ້ອຍບໍ່ຕ້ອງການຂໍ້ຄວາມທີ່ຖືກເຂົ້າລະຫັດຂອງຂ້ອຍ"
         },
         "misconfigured_body": "ຂໍໃຫ້ຜູ້ຄຸ້ມຄອງ %(brand)s ຂອງທ່ານກວດເບິ່ງ <a>ການຕັ້ງຄ່າຂອງທ່ານ</a> ສໍາລັບລາຍການທີ່ບໍ່ຖືກຕ້ອງ ຫຼື ຊໍ້າກັນ.",
@@ -371,7 +361,6 @@
         "encrypted": "ເຂົ້າລະຫັດແລ້ວ",
         "error": "ມີບັນຫາ",
         "faq": "ຄໍາຖາມທີ່ພົບເປັນປະຈໍາ",
-        "favourites": "ລາຍການທີ່ມັກ",
         "feedback": "ຄໍາຕິຊົມ",
         "filter_results": "ການກັ່ນຕອງຜົນຮັບ",
         "forward_message": "ສົ່ງຂໍ້ຄວາມຕໍ່",
@@ -379,7 +368,6 @@
         "go_to_settings": "ໄປທີ່ການຕັ້ງຄ່າ",
         "guest": "ແຂກ",
         "help": "ຊ່ວຍເຫຼືອ",
-        "historical": "ປະຫວັດ",
         "home": "ໜ້າຫຼັກ",
         "identity_server": "ຕົວເຊີບເວີ",
         "image": "ຮູບພາບ",
@@ -389,7 +377,6 @@
         "legal": "ຖືກກົດໝາຍ",
         "light": "ແສງສະຫວ່າງ",
         "location": "ສະຖານທີ່",
-        "low_priority": "ບູລິມະສິດຕໍ່າ",
         "message": "ຂໍ້ຄວາມ",
         "message_layout": "ຮູບແບບຂໍ້ຄວາມ",
         "microphone": "ໄມໂຄຣໂຟນ",
@@ -445,7 +432,6 @@
         "success": "ຄວາມສໍາເລັດ",
         "suggestions": "ຄຳແນະນຳ",
         "support": "ສະຫນັບສະຫນູນ",
-        "system_alerts": "ການແຈ້ງເຕືອນລະບົບ",
         "theme": "ຫົວຂໍ້",
         "thread": "ກະທູ້",
         "threads": "ກະທູ້",
@@ -456,7 +442,6 @@
         "unnamed_space": "ພື້ນທີ່ບໍ່ລະບຸຊື່",
         "user_avatar": "ຮູບໂປຣໄຟລ໌",
         "username": "ຊື່ຜູ້ໃຊ້",
-        "video": "ວິດີໂອ",
         "video_room": "ຫ້ອງວີດີໂອ",
         "view_message": "ເບິ່ງຂໍ້ຄວາມ",
         "warning": "ຄຳເຕືອນ"
@@ -617,7 +602,6 @@
         "show_hidden_events": "ສະແດງເຫດການທີ່ເຊື່ອງໄວ້ໃນທາມລາຍ",
         "state_key": "ປຸມລັດ",
         "title": "ເຄື່ອງມືພັດທະນາ",
-        "toggle_event": "ສະຫຼັບກິດຈະກຳ",
         "toolbox": "ກ່ອງເຄື່ອງມື",
         "use_at_own_risk": "UI ນີ້ບໍ່ໄດ້ກວດເບິ່ງປະເພດຂອງຄ່າ. ໃຊ້ຢູ່ໃນຄວາມສ່ຽງຂອງທ່ານເອງ.",
         "value": "ຄ່າ",
@@ -634,22 +618,6 @@
     },
     "dialog_close_label": "ປິດກ່ອງໂຕ້ຕອບ",
     "download_completed": "ດາວໂຫຼດສຳເລັດແລ້ວ",
-    "emoji": {
-        "categories": "ໝວດໝູ່",
-        "category_activities": "ກິດຈະກໍາ",
-        "category_animals_nature": "ສັດ & ທໍາມະຊາດ",
-        "category_flags": "ທຸງ",
-        "category_food_drink": "ອາຫານ ແລະ ເຄື່ອງດື່ມ",
-        "category_frequently_used": "ໃຊ້ເປັນປະຈຳ",
-        "category_objects": "ວັດຖຸ",
-        "category_smileys_people": "ຮອຍຍິ້ມ & ຜູ້ຄົນ",
-        "category_symbols": "ສັນຍາລັກ",
-        "category_travel_places": "ການເດີນທາງ & ສະຖານທີ່",
-        "quick_reactions": "ການໂຕ້ຕອບທັນທີ"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "ຍົກເລີກການຄົ້ນຫາ"
-    },
     "empty_room": "ຫ້ອງຫວ່າງ",
     "encryption": {
         "access_secret_storage_dialog": {
@@ -694,16 +662,6 @@
             "warning": "ຖ້າທ່ານບໍ່ໄດ້ລືບຂະບວນການກູ້ຄືນ, ຜູ້ໂຈມຕີອາດຈະພະຍາຍາມເຂົ້າເຖິງບັນຊີຂອງທ່ານ. ປ່ຽນລະຫັດຜ່ານບັນຊີຂອງທ່ານ ແລະ ກຳນົດຂະບວນການກູ້ຄືນໃໝ່ທັນທີໃນການຕັ້ງຄ່າ."
         },
         "set_up_toast_title": "ຕັ້ງຄ່າການສໍາຮອງຂໍ້ມູນທີ່ປອດໄພ",
-        "setup_secure_backup": {
-            "explainer": "ສຳຮອງຂໍ້ມູນກະແຈຂອງທ່ານກ່ອນທີ່ຈະອອກຈາກລະບົບເພື່ອຫຼີກເວັ້ນການສູນເສຍຂໍ້ມູນ."
-        },
-        "udd": {
-            "other_ask_verify_text": "ຂໍໃຫ້ຜູ້ໃຊ້ນີ້ກວດສອບລະບົບຂອງເຂົາເຈົ້າ, ຫຼື ຢືນຢັນດ້ວຍຕົນເອງຂ້າງລຸ່ມນີ້.",
-            "other_new_session_text": "%(name)s (%(userId)s) ເຂົ້າສູ່ລະບົບໃໝ່ໂດຍບໍ່ມີການຢັ້ງຢືນ:",
-            "own_ask_verify_text": "ຢືນຢັນລະບົບອື່ນຂອງທ່ານໂດຍໃຊ້ໜຶ່ງໃນຕົວເລືອກຂ້າງລຸ່ມນີ້.",
-            "own_new_session_text": "ທ່ານເຂົ້າສູ່ລະບົບໃໝ່ໂດຍບໍ່ມີການຢັ້ງຢືນ:",
-            "title": "ເຊື່ອຖືບໍ່ໄດ້"
-        },
         "unable_to_setup_keys_error": "ບໍ່ສາມາດຕັ້ງຄ່າກະແຈໄດ້",
         "verification": {
             "accepting": "ກຳລັງຍອມຮັບ…",
@@ -1137,9 +1095,6 @@
         "room_rejoin_warning": "ຫ້ອງນີ້ບໍ່ແມ່ນສາທາລະນະ. ທ່ານຈະບໍ່ສາມາດເຂົ້າຮ່ວມຄືນໃໝ່ໄດ້ໂດຍບໍ່ມີການເຊີນ.",
         "space_rejoin_warning": "ພື້ນທີ່ນີ້ບໍ່ແມ່ນສາທາລະນະ. ທ່ານຈະບໍ່ສາມາດເຂົ້າຮ່ວມຄືນໃໝ່ໄດ້ໂດຍບໍ່ມີການເຊີນ."
     },
-    "left_panel": {
-        "open_dial_pad": "ເປີດແຜ່ນປັດ"
-    },
     "lightbox": {
         "rotate_left": "ໝຸນດ້ານຊ້າຍ",
         "rotate_right": "ໝຸນດ້ານຂວາ"
@@ -1214,7 +1169,6 @@
         "mentions_and_keywords": "@ກ່າວເຖິງ & ຄໍາສໍາຄັນ",
         "mentions_and_keywords_description": "ຮັບການແຈ້ງເຕືອນພຽງແຕ່ມີການກ່າວເຖິງ ແລະ ຄໍາທີ່ກຳນົດໄວ້ໃນ<a>settings</a>ຂອງທ່ານ",
         "mentions_keywords": "ກ່າວເຖິງ & ຄໍາສໍາຄັນ",
-        "message_didnt_send": "ບໍ່ໄດ້ສົ່ງຂໍ້ຄວາມ. ກົດສຳລັບຂໍ້ມູນ.",
         "mute_description": "ທ່ານຈະບໍ່ໄດ້ຮັບການແຈ້ງເຕືອນໃດໆ"
     },
     "notifier": {
@@ -1293,7 +1247,6 @@
     },
     "quick_settings": {
         "all_settings": "ການຕັ້ງຄ່າທັງໝົດ",
-        "metaspace_section": "ປັກໝຸດໃສ່ແຖບດ້ານຂ້າງ",
         "sidebar_settings": "ທາງເລືອກເພີ່ມເຕີມ",
         "title": "ການຕັ້ງຄ່າດ່ວນ"
     },
@@ -1309,21 +1262,10 @@
     },
     "report_content": {
         "description": "ການລາຍງານຂໍ້ຄວາມນີ້ຈະສົ່ງ 'ID ເຫດການ' ທີ່ບໍ່ຊໍ້າກັນໄປຫາຜູ້ຄຸ້ມຄອງລະບົບເຊີບເວີຂອງທ່ານ. ຖ້າຂໍ້ຄວາມຢູ່ໃນຫ້ອງນີ້ຖືກເຂົ້າລະຫັດໄວ້, ຜູ້ຄຸ້ມຄອງລະບົບເຊີບເວີຂອງທ່ານຈະບໍ່ສາມາດອ່ານຂໍ້ຄວາມ ຫຼືເບິ່ງໄຟລ໌ ຫຼືຮູບພາບຕ່າງໆໄດ້.",
-        "disagree": "ບໍ່ເຫັນດີ",
         "hide_messages_from_user": "ກວດຄືນຫາກວ່ທ່ານຕ້ອງການເຊື່ອງການສົນທະນາກັບຜູ້ໃຊ້ນີ້ດຽວນີ້ ຫຼືໃນອະນາຄົດ.",
         "ignore_user": "ລະເວັ້ນຜູ້ໃຊ້",
-        "illegal_content": "ເນື້ອຫາທີ່ຜິດຕໍ່ກົດໝາຍ",
         "missing_reason": "ກະລຸນາຕື່ມຂໍ້ມູນວ່າເປັນຫຍັງທ່ານກໍາລັງລາຍງານ.",
-        "nature": "ກະລຸນາເລືອກລັກສະນະ ແລະ ການອະທິບາຍຂອງຂໍ້ຄວາມໃດໜຶ່ງທີ່ສຸພາບ.",
-        "nature_disagreement": "ສິ່ງທີ່ຜູ້ໃຊ້ນີ້ຂຽນແມ່ນຜິດພາດ.\nສິ່ງນີ້ຈະຖືກລາຍງານໃຫ້ຜູ້ຄວບຄຸມຫ້ອງ.",
-        "nature_illegal": "ຜູ້ໃຊ້ນີ້ກຳລັງສະແດງພຶດຕິກຳທີ່ຜິດກົດໝາຍ, ດ້ວຍການໃສ່ຮ້າຍປ້າຍສີ ຫຼືຂົ່ມຂູ່ຄວາມຮຸນແຮງ.\nອັນນີ້ຈະຖືກລາຍງານຕໍ່ຜູ້ຄວບຄຸມຫ້ອງ ອາດຈະສົ່ງເລື່ອງຕໍ່ໃຫ້ເຈົ້າໜ້າທີ່ທາງກົດໝາຍ.",
-        "nature_other": "ເຫດຜົນອື່ນໆ. ກະລຸນາອະທິບາຍບັນຫາ.\nອັນນີ້ຈະຖືກລາຍງານໃຫ້ຜູ້ຄວບຄຸມຫ້ອງ.",
-        "nature_spam": "ຜູ້ໃຊ້ນີ້ແມ່ນ spamming ຫ້ອງທີ່ມີການໂຄສະນາ, ການເຊື່ອມຕໍ່ກັບການໂຄສະນາ ຫຼື ການເຜີຍແຜ່.\nສິ່ງນີ້ຈະຖືກລາຍງານໃຫ້ຜູ້ຄວບຄຸມຫ້ອງ.",
-        "other_label": "ອື່ນໆ",
-        "report_content_to_homeserver": "ລາຍງານເນື້ອຫາໃຫ້ຜູ້ຄຸ້ມຄອງລະບົບ Homeserver ຂອງທ່ານ",
-        "report_entire_room": "ລາຍງານຫ້ອງທັງໝົດ",
-        "spam_or_propaganda": "ຂໍ້ຄວາມຂີ້ເຫຍື້ອ ຫຼື ການໂຄສະນາເຜີຍແຜ່",
-        "toxic_behaviour": "ພຶດຕິກຳທີ່ບໍ່ເປັນມິດ"
+        "report_content_to_homeserver": "ລາຍງານເນື້ອຫາໃຫ້ຜູ້ຄຸ້ມຄອງລະບົບ Homeserver ຂອງທ່ານ"
     },
     "restore_key_backup_dialog": {
         "count_of_decryption_failures": "ການຖອດລະຫັດ %(failedCount)s ລະບົບບໍ່ສຳເລັດ!",
@@ -1484,35 +1426,11 @@
         }
     },
     "room_list": {
-        "add_room_label": "ເພີ່ມຫ້ອງ",
         "add_space_label": "ເພີ່ມພື້ນທີ່",
-        "breadcrumbs_empty": "ບໍ່ມີຫ້ອງທີ່ເຂົ້າເບິ່ງເມື່ອບໍ່ດົນມານີ້",
-        "breadcrumbs_label": "ຫ້ອງທີ່ເຂົ້າເບິ່ງເມື່ອບໍ່ດົນມານີ້",
         "failed_add_tag": "ເພີ່ມແທັກ %(tagName)s ໃສ່ຫ້ອງບໍ່ສຳເລັດ",
         "failed_remove_tag": "ລຶບແທັກ %(tagName)s ອອກຈາກຫ້ອງບໍ່ສຳເລັດ",
-        "home_menu_label": "ຕົວເລືອກໜ້າຫຼັກ",
-        "join_public_room_label": "ເຂົ້າຮ່ວມຫ້ອງສາທາລະນະ",
-        "joining_rooms_status": {
-            "one": "ກຳລັງເຂົ້າຮ່ວມຫ້ອງ %(count)s",
-            "other": "ປະຈຸບັນກຳລັງເຂົ້າຮ່ວມ %(count)s ຫ້ອງ"
-        },
         "notification_options": "ຕົວເລືອກການແຈ້ງເຕືອນ",
-        "redacting_messages_status": {
-            "one": "ຕອນນີ້ກຳລັງລຶບຂໍ້ຄວາມຢູ່ໃນຫ້ອງ %(count)s",
-            "other": "ກຳລັງລຶບຂໍ້ຄວາມຢູ່ໃນ %(count)s ຫ້ອງ"
-        },
-        "show_less": "ສະແດງໜ້ອຍລົງ",
-        "show_n_more": {
-            "one": "ສະແດງ %(count)s ເພີ່ມເຕີມ",
-            "other": "ສະແດງ %(count)s ເພີ່ມເຕີມ"
-        },
-        "show_previews": "ສະແດງຕົວຢ່າງຂອງຂໍ້ຄວາມ",
-        "sort_by": "ຈັດຮຽງຕາມ",
-        "sort_by_activity": "ກິດຈະກໍາ",
-        "sort_unread_first": "ສະແດງຫ້ອງຂໍ້ຄວາມທີ່ຍັງບໍ່ທັນໄດ້ອ່ານກ່ອນ",
-        "space_menu_label": "ເມນູ %(spaceName)s",
-        "sublist_options": "ລາຍຊື່ຕົວເລືອກ",
-        "suggested_rooms_heading": "ຫ້ອງແນະນຳ"
+        "show_less": "ສະແດງໜ້ອຍລົງ"
     },
     "room_settings": {
         "access": {
@@ -2006,13 +1924,11 @@
         "show_stickers_button": "ສະແດງປຸ່ມສະຕິກເກີ",
         "show_typing_notifications": "ສະແດງການແຈ້ງເຕືອນການພິມ",
         "sidebar": {
-            "metaspaces_favourites_description": "ຈັດກຸ່ມຫ້ອງ ແລະ ຄົນທີ່ທ່ານມັກທັງໝົດຢູ່ບ່ອນດຽວ.",
             "metaspaces_home_all_rooms": "ສະແດງຫ້ອງທັງໝົດ",
             "metaspaces_home_all_rooms_description": "ສະແດງຫ້ອງທັງໝົດຂອງທ່ານໃນໜ້າຫຼັກ, ເຖິງແມ່ນວ່າພວກມັນຢູ່ໃນບ່ອນໃດນຶ່ງກໍ່ຕາມ.",
             "metaspaces_home_description": "ຫນ້າHome ເປັນປະໂຫຍດສໍາລັບການເບິ່ງລາຍການລວມທັງໝົດ.",
             "metaspaces_orphans": "ຫ້ອງຢູ່ນອກພື້ນທີ່",
             "metaspaces_orphans_description": "ຈັດກຸ່ມຫ້ອງທັງໝົດຂອງທ່ານທີ່ບໍ່ໄດ້ເປັນສ່ວນໜຶ່ງຂອງພື້ນທີ່ຢູ່ໃນບ່ອນດຽວກັນ.",
-            "metaspaces_people_description": "ຈັດກຸ່ມຄົນທັງໝົດຂອງເຈົ້າຢູ່ບ່ອນດຽວ.",
             "metaspaces_subsection": "ພຶ້ນທີ່ຈະສະແດງ",
             "title": "ແຖບດ້ານຂ້າງ"
         },
@@ -2182,12 +2098,6 @@
     "space_settings": {
         "title": "ການຕັ້ງຄ່າ - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "ທ່ານບໍ່ມີສິດໃນການເພີ່ມຫ້ອງໃສ່ພື້ນທີ່ນີ້",
-        "error_no_permission_add_space": "ທ່ານບໍ່ມີການອະນຸຍາດໃຫ້ເພີ່ມພື້ນທີ່ໃສ່ພື້ນທີ່ນີ້",
-        "error_no_permission_create_room": "ທ່ານບໍ່ໄດ້ຮັບອະນຸຍາດໃຫ້ສ້າງຫ້ອງໃຫມ່ໃນພື້ນທີ່ນີ້",
-        "error_no_permission_invite": "ທ່ານບໍ່ມີສິດທີ່ຈະເຊີນຄົນເຂົ້າມາໃນພື້ນທີ່ນີ້"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "ໃສ່ຊື່ຂອງເຊີບເວີໃໝ່ທີ່ທ່ານຕ້ອງການສຳຫຼວດ.",
@@ -2338,9 +2248,7 @@
         "m.poll.start": "%(senderName)s ໄດ້ເລີ່ມສຳຫຼວດ - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s ໄດ້ປ່ຽນແປງຮູບແທນຕົວຂອງຫ້ອງ.",
-            "changed_img": "%(senderDisplayName)s ໄດ້ປ່ຽນຮູບແທນຕົວຂອງຫ້ອງເປັນ <img/>",
-            "lightbox_title": "%(senderDisplayName)s ໄດ້ປ່ຽນຮູບແທນຕົວຂອງ %(roomName)s",
-            "removed": "%(senderDisplayName)s ເອົາຮູບແທນຕົວຂອງຫ້ອງອອກແລ້ວ."
+            "lightbox_title": "%(senderDisplayName)s ໄດ້ປ່ຽນຮູບແທນຕົວຂອງ %(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -2879,13 +2787,7 @@
         "close_to_view_right_panel": "ປິດວິດເຈັດນີ້ເພື່ອເບິ່ງມັນຢູ່ໃນແຜງນີ້",
         "context_menu": {
             "delete": "ລຶບ widget",
-            "delete_warning": "ການລຶບwidget ຈະເປັນການລຶບອອກສຳລັບຜູ້ໃຊ້ທັງໝົດໃນຫ້ອງນີ້. ທ່ານແນ່ໃຈບໍ່ວ່າຕ້ອງການລຶບwidget ນີ້?",
-            "move_left": "ຍ້າຍໄປທາງຊ້າຍ",
-            "move_right": "ຍ້າຍໄປທາງຂວາ",
-            "remove": "ລຶບອອກສຳລັບທຸກຄົນ",
-            "revoke": "ຖອນການອະນຸຍາດ",
-            "screenshot": "ຖ່າຍຮູບ",
-            "start_audio_stream": "ເລີ່ມການຖ່າຍທອດສຽງ"
+            "delete_warning": "ການລຶບwidget ຈະເປັນການລຶບອອກສຳລັບຜູ້ໃຊ້ທັງໝົດໃນຫ້ອງນີ້. ທ່ານແນ່ໃຈບໍ່ວ່າຕ້ອງການລຶບwidget ນີ້?"
         },
         "cookie_warning": "widget ນີ້ອາດຈະໃຊ້ cookies.",
         "error_loading": "ເກີດຄວາມຜິດພາດໃນການໂຫຼດ Widget",
diff --git a/apps/web/src/i18n/strings/lt.json b/apps/web/src/i18n/strings/lt.json
index e7db80b930..45a5bdb7a3 100644
--- a/apps/web/src/i18n/strings/lt.json
+++ b/apps/web/src/i18n/strings/lt.json
@@ -9,7 +9,6 @@
             "one": "1 neperskaitytas paminėjimas.",
             "other": "%(count)s neperskaitytos žinutės, įskaitant paminėjimus."
         },
-        "room_name": "Kambarys %(name)s",
         "unread_messages": "Neperskaitytos žinutės."
     },
     "a11y_jump_first_unread_room": "Peršokti į pirmą neperskaitytą kambarį.",
@@ -17,7 +16,6 @@
         "accept": "Priimti",
         "add": "Pridėti",
         "add_existing_room": "Pridėti esamą kambarį",
-        "add_people": "Pridėti žmonių",
         "approve": "Patvirtinti",
         "back": "Atgal",
         "call": "Skambinti",
@@ -42,7 +40,6 @@
         "edit": "Koreguoti",
         "enable": "Įjungti",
         "expand": "Išplėsti",
-        "explore_public_rooms": "Tyrinėti viešuosius kambarius",
         "explore_rooms": "Žvalgyti kambarius",
         "export": "Eksportuoti",
         "forward": "Persiųsti",
@@ -54,8 +51,6 @@
         "ignore": "Ignoruoti",
         "import": "Importuoti",
         "invite": "Pakviesti",
-        "invite_to_space": "Pakviesti į erdvę",
-        "invites_list": "Pakvietimai",
         "join": "Prisijungti",
         "learn_more": "Sužinokite daugiau",
         "leave": "Palikti",
@@ -79,7 +74,6 @@
         "rename": "Pervadinti",
         "reply": "Atsakyti",
         "reply_in_thread": "Atsakyti temoje",
-        "report_content": "Pranešti",
         "resend": "Siųsti iš naujo",
         "reset": "Iš naujo nustatyti",
         "resume": "Tęsti",
@@ -97,8 +91,6 @@
         "sign_out": "Šalinti šį įrenginį",
         "skip": "Praleisti",
         "start": "Pradėti",
-        "start_chat": "Pradėti pokalbį",
-        "start_new_chat": "Pradėti naują pokalbį",
         "stop": "Sustabdyti",
         "submit": "Pateikti",
         "subscribe": "Prenumeruoti",
@@ -160,9 +152,7 @@
         "log_in_new_account": "<a>Prisijunkite</a> prie naujos paskyros.",
         "logout_dialog": {
             "description": "Ar tikrai norite atsijungti?",
-            "megolm_export": "Eksportuoti raktus rankiniu būdu",
             "setup_key_backup_title": "Jūs prarasite prieigą prie savo užšifruotų žinučių",
-            "setup_secure_backup_description_1": "Užšifruotos žinutės yra apsaugotos visapusiu šifravimu. Tik jūs ir gavėjas(-ai) turi raktus šioms žinutėms perskaityti.",
             "skip_key_backup": "Man nereikalingos užšifruotos žinutės"
         },
         "misconfigured_body": "Paprašykite savo %(brand)s administratoriaus patikrinti ar <a>jūsų konfigūracijoje</a> nėra neteisingų arba pasikartojančių įrašų.",
@@ -309,7 +299,6 @@
         "encrypted": "Užšifruota",
         "error": "Klaida",
         "faq": "DUK",
-        "favourites": "Mėgstami",
         "feedback": "Atsiliepimai",
         "filter_results": "Išfiltruoti rezultatus",
         "forward_message": "Persiųsti žinutę",
@@ -317,7 +306,6 @@
         "go_to_settings": "Eiti į Nustatymus",
         "guest": "Svečias",
         "help": "Pagalba",
-        "historical": "Istoriniai",
         "home": "Pradžia",
         "homeserver": "Serveris",
         "identity_server": "Tapatybės serveris",
@@ -326,7 +314,6 @@
         "labs": "Laboratorijos",
         "legal": "Teisiniai",
         "light": "Šviesi",
-        "low_priority": "Žemo prioriteto",
         "message": "Žinutė",
         "message_layout": "Žinutės išdėstymas",
         "microphone": "Mikrofonas",
@@ -371,7 +358,6 @@
         "stickerpack": "Lipdukų paketas",
         "success": "Pavyko",
         "suggestions": "Pasiūlymai",
-        "system_alerts": "Sistemos įspėjimai",
         "theme": "Tema",
         "threads": "Temos",
         "timeline": "Laiko juosta",
@@ -382,7 +368,6 @@
         "user_avatar": "Profilio paveikslėlis",
         "username": "Vartotojo vardas",
         "verified": "Patvirtinta",
-        "video": "Vaizdo įrašas",
         "video_room": "Vaizdo kambarys",
         "view_message": "Žiūrėti žinutę",
         "warning": "Įspėjimas"
@@ -500,22 +485,6 @@
     },
     "dialog_close_label": "Uždaryti dialogą",
     "download_completed": "Atsisiuntimas baigtas",
-    "emoji": {
-        "categories": "Kategorijos",
-        "category_activities": "Veikla",
-        "category_animals_nature": "Gyvūnai & Gamta",
-        "category_flags": "Vėliavos",
-        "category_food_drink": "Maistas & Gėrimai",
-        "category_frequently_used": "Dažnai Naudojama",
-        "category_objects": "Objektai",
-        "category_smileys_people": "Šypsenėlės ir Žmonės",
-        "category_symbols": "Simboliai",
-        "category_travel_places": "Kelionės & Vietovės",
-        "quick_reactions": "Greitos Reakcijos"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Atšaukti paiešką"
-    },
     "empty_room": "Tuščias kambarys",
     "empty_room_was_name": "Tuščias kambarys (buvo %(oldName)s)",
     "encryption": {
@@ -559,16 +528,6 @@
             "warning": "Jei jūs nepašalinote paskyros atgavimo metodo, gali būti, kad užpuolikas bando patekti į jūsų paskyrą. Nedelsiant nustatymuose pakeiskite savo paskyros slaptažodį ir nustatykite naują atgavimo metodą."
         },
         "set_up_toast_title": "Nustatyti Saugią Atsarginę Kopiją",
-        "setup_secure_backup": {
-            "explainer": "Prieš atsijungdami sukurkite atsarginę savo raktų kopiją, kad išvengtumėte jų praradimo."
-        },
-        "udd": {
-            "other_ask_verify_text": "Paprašykite šio vartotojo patvirtinti savo seansą, arba patvirtinkite jį rankiniu būdu žemiau.",
-            "other_new_session_text": "%(name)s (%(userId)s) prisijungė prie naujo seanso jo nepatvirtinę:",
-            "own_ask_verify_text": "Patvirtinkite savo kitą seansą naudodami vieną iš žemiau esančių parinkčių.",
-            "own_new_session_text": "Jūs prisijungėte prie naujo seanso, jo nepatvirtinę:",
-            "title": "Nepatikimas"
-        },
         "unable_to_setup_keys_error": "Nepavyksta nustatyti raktų",
         "verification": {
             "accepting": "Priimama…",
@@ -872,7 +831,6 @@
         "dynamic_room_predecessors": "Dinaminiai kambario pirmtakai",
         "element_call_video_rooms": "Element skambučio vaizdo kambariai",
         "feature_wysiwyg_composer_description": "Naudoti raiškųjį tekstą vietoj ženklinimo žinučių rengyklėje.",
-        "group_calls": "Nauja grupinio skambučio patirtis",
         "group_developer": "Kūrėjas",
         "group_encryption": "Šifravimas",
         "group_experimental": "Eksperimentinis",
@@ -885,7 +843,6 @@
         "group_voip": "Garsas ir Vaizdas",
         "group_widgets": "Valdikliai",
         "hidebold": "Slėpti pranešimų tašką (rodyti tik skaičių žymes)",
-        "html_topic": "Rodyti kambarių temų HTML atvaizdavimą",
         "jump_to_date": "Pereiti prie datos (prideda /jumptodate ir perėjimo prie datos antraštes)",
         "jump_to_date_msc_support": "Privaloma, kad jūsų serveris palaikytų MSC3030.",
         "latex_maths": "Atvaizduoti LaTeX matematikas žinutėse",
@@ -895,10 +852,8 @@
         "mjolnir": "Nauji būdai ignoruoti žmones",
         "msc3531_hide_messages_pending_moderation": "Leisti moderatoriams slėpti žinutes, laukiančias moderavimo.",
         "notification_settings": "Nauji pranešimų nustatymai",
-        "report_to_moderators": "Pranešti prižiūrėtojams",
         "sliding_sync": "Slankiojo sinchronizavimo režimas",
         "sliding_sync_description": "Aktyviai kuriama, negalima išjungti. Šiuo metu nesuderinama su „Element“ skambučiais.",
-        "under_active_development": "Šiuo metu aktyviai kuriama.",
         "video_rooms": "Vaizdo kambariai",
         "video_rooms_a_new_way_to_chat": "Naujas būdas kalbėtis balsu ir vaizdu per %(brand)s.",
         "video_rooms_always_on_voip_channels": "Vaizdo kambariai - tai visada veikiantys VoIP kanalai, įterpti į %(brand)s kambarį.",
@@ -977,7 +932,6 @@
         "mentions_and_keywords": "@paminėjimai & raktažodžiai",
         "mentions_and_keywords_description": "Gaukite pranešimus tik apie paminėjimus ir raktinius žodžius, kaip nustatyta jūsų <a>nustatymuose</a>",
         "mentions_keywords": "Paminėjimai & Raktažodžiai",
-        "message_didnt_send": "Žinutė nebuvo išsiųsta. Spustelėkite norėdami gauti informacijos.",
         "mute_description": "Negausite jokių pranešimų"
     },
     "notifier": {
@@ -1013,7 +967,6 @@
     },
     "quick_settings": {
         "all_settings": "Visi nustatymai",
-        "metaspace_section": "Prisegti prie šoninės juostos",
         "sidebar_settings": "Daugiau parinkčių",
         "title": "Greiti nustatymai"
     },
@@ -1030,7 +983,6 @@
     "report_content": {
         "description": "Pranešant apie šią netinkamą žinutę, serverio administratoriui bus nusiųstas unikalus 'įvykio ID'. Jei žinutės šiame kambaryje yra šifruotos, serverio administratorius negalės perskaityti žinutės teksto ar peržiūrėti failų arba paveikslėlių.",
         "missing_reason": "Įrašykite kodėl pranešate.",
-        "other_label": "Kitas",
         "report_content_to_homeserver": "Pranešti apie turinį serverio administratoriui"
     },
     "restore_key_backup_dialog": {
@@ -1170,35 +1122,10 @@
         }
     },
     "room_list": {
-        "add_room_label": "Sukurti kambarį",
         "add_space_label": "Pridėti erdvę",
-        "breadcrumbs_empty": "Nėra neseniai lankytų kambarių",
-        "breadcrumbs_label": "Neseniai lankyti kambariai",
         "failed_remove_tag": "Nepavyko pašalinti žymos %(tagName)s iš kambario",
-        "home_menu_label": "Pradžios parinktys",
-        "join_public_room_label": "Prisijungti prie viešo kambario",
-        "joining_rooms_status": {
-            "one": "Šiuo metu prisijungiama prie %(count)s kambario",
-            "other": "Šiuo metu prisijungiama prie %(count)s kambarių"
-        },
         "notification_options": "Pranešimų parinktys",
-        "redacting_messages_status": {
-            "one": "Šiuo metu šalinamos žinutės iš %(count)s kambario",
-            "other": "Šiuo metu šalinamos žinutės iš %(count)s kambarių"
-        },
-        "show_less": "Rodyti mažiau",
-        "show_n_more": {
-            "one": "Rodyti dar %(count)s",
-            "other": "Rodyti dar %(count)s"
-        },
-        "show_previews": "Rodyti žinučių peržiūras",
-        "sort_by": "Rūšiuoti pagal",
-        "sort_by_activity": "Aktyvumą",
-        "sort_by_alphabet": "A-Ž",
-        "sort_unread_first": "Pirmiausia rodyti kambarius su neperskaitytomis žinutėmis",
-        "space_menu_label": "%(spaceName)s meniu",
-        "sublist_options": "Sąrašo parinktys",
-        "suggested_rooms_heading": "Siūlomi kambariai"
+        "show_less": "Rodyti mažiau"
     },
     "room_settings": {
         "access": {
@@ -1687,13 +1614,11 @@
         "show_stickers_button": "Rodyti lipdukų mygtuką",
         "show_typing_notifications": "Rodyti spausdinimo pranešimus",
         "sidebar": {
-            "metaspaces_favourites_description": "Sugrupuokite visus mėgstamus kambarius ir žmones vienoje vietoje.",
             "metaspaces_home_all_rooms": "Rodyti visus kambarius",
             "metaspaces_home_all_rooms_description": "Rodyti visus savo kambarius pradžioje, net jei jie yra erdvėje.",
             "metaspaces_home_description": "Pradžia yra naudinga norint apžvelgti viską.",
             "metaspaces_orphans": "Kambariai nepriklausantys erdvei",
             "metaspaces_orphans_description": "Sugrupuokite visus kambarius, kurie nėra erdvės dalis, į vieną vietą.",
-            "metaspaces_people_description": "Sugrupuokite visus savo žmones vienoje vietoje.",
             "metaspaces_subsection": "Kurias erdves rodyti",
             "title": "Šoninė juosta"
         },
@@ -1795,12 +1720,6 @@
         "invite_link": "Bendrinti pakvietimo nuorodą",
         "search_children": "Ieškoti %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Neturite leidimų pridėti kambarių į šią erdvę",
-        "error_no_permission_add_space": "Neturite leidimų į šią erdvę pridėti erdvių",
-        "error_no_permission_create_room": "Neturite leidimų kurti naujus kambarius šioje erdvėje",
-        "error_no_permission_invite": "Neturite leidimų kviesti žmones į šią erdvę"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Įveskite naujo, norimo žvalgyti serverio pavadinimą.",
@@ -1913,9 +1832,7 @@
         "m.poll.start": "%(senderName)s pradėjo apklausą - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s pakeitė kambario avatarą.",
-            "changed_img": "%(senderDisplayName)s pakeitė kambario pseudoportretą į <img/>",
-            "lightbox_title": "%(senderDisplayName)s pakeitė kambario %(roomName)s pseudoportretą",
-            "removed": "%(senderDisplayName)s pašalino kambario pseudoportretą."
+            "lightbox_title": "%(senderDisplayName)s pakeitė kambario %(roomName)s pseudoportretą"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -2362,11 +2279,7 @@
         "close_to_view_right_panel": "Uždarykite šį valdiklį, kad galėtumėte jį peržiūrėti šiame skydelyje",
         "context_menu": {
             "delete": "Ištrinti valdiklį",
-            "delete_warning": "Valdiklio ištrinimas pašalina jį visiems kambaryje esantiems vartotojams. Ar tikrai norite ištrinti šį valdiklį?",
-            "remove": "Pašalinti visiems",
-            "revoke": "Atšaukti leidimus",
-            "screenshot": "Padarykite nuotrauką",
-            "start_audio_stream": "Pradėti garso transliaciją"
+            "delete_warning": "Valdiklio ištrinimas pašalina jį visiems kambaryje esantiems vartotojams. Ar tikrai norite ištrinti šį valdiklį?"
         },
         "cookie_warning": "Šiame valdiklyje gali būti naudojami slapukai.",
         "error_hangup_description": "Jūsų skambutis buvo nutrauktas. (Klaida: %(message)s)",
diff --git a/apps/web/src/i18n/strings/lv.json b/apps/web/src/i18n/strings/lv.json
index 6385b15939..489a9788fc 100644
--- a/apps/web/src/i18n/strings/lv.json
+++ b/apps/web/src/i18n/strings/lv.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Emocijzīmju atlasītājs",
         "jump_first_invite": "Pārlēkt uz pirmo uzaicinājumu.",
         "message_composer": "Ziņas sastādītājs",
         "n_unread_messages": {
@@ -12,8 +11,6 @@
             "one": "1 neslasīta ziņa ar pieminēšanu.",
             "other": "%(count)s nelasītas ziņas ar pieminēšanu."
         },
-        "recent_rooms": "Nesenās istabas",
-        "room_name": "Istaba %(name)s",
         "room_status_bar": "Istabas statusa josla",
         "seek_bar_label": "Audio meklēšanas josla",
         "unread_messages": "Nelasītās ziņas."
@@ -23,7 +20,6 @@
         "accept": "Apstiprināt",
         "add": "Pievienot",
         "add_existing_room": "Pievienot esošu istabu",
-        "add_people": "Pievienot cilvēkus",
         "apply": "Pielietot",
         "approve": "Apstiprināt",
         "ask_to_join": "Aicināt pievienoties",
@@ -56,7 +52,6 @@
         "enter_fullscreen": "Atvērt pilnekrāna režīmā",
         "exit_fullscreeen": "Iziet no pilnekrāna režīma",
         "expand": "Izvērst",
-        "explore_public_rooms": "Pārlūkot publiskas istabas",
         "explore_rooms": "Pārlūkot istabas",
         "export": "Eksportēt",
         "forward": "Pārsūtīt",
@@ -68,8 +63,6 @@
         "ignore": "Neņemt vērā",
         "import": "Importēt",
         "invite": "Uzaicināt",
-        "invite_to_space": "Uzaicināt uz telpu",
-        "invites_list": "Uzaicinājumi",
         "join": "Pievienoties",
         "learn_more": "Uzzināt vairāk",
         "leave": "Pamest",
@@ -96,7 +89,6 @@
         "rename": "Pārdēvēt",
         "reply": "Atbildēt",
         "reply_in_thread": "Atbildēt pavedienā",
-        "report_content": "Ziņot par saturu",
         "resend": "Nosūtīt atkārtoti",
         "reset": "Atiestatīt",
         "resume": "Turpināt",
@@ -115,8 +107,6 @@
         "sign_out": "Izrakstīties",
         "skip": "Izlaist",
         "start": "Sākt",
-        "start_chat": "Uzsākt tērzēšanu",
-        "start_new_chat": "Uzsākt jaunu tērzēšanu",
         "stop": "Apturēt",
         "submit": "Iesniegt",
         "subscribe": "Abonēt",
@@ -216,10 +206,7 @@
         "log_in_new_account": "<a>Pieteikties</a> jaunajā kontā.",
         "logout_dialog": {
             "description": "Vai tiešām izrakstīties?",
-            "megolm_export": "Pašrocīgi izgūt atslēgas",
             "setup_key_backup_title": "Tu zaudēsi piekļuvi savām šifrētajām ziņām",
-            "setup_secure_backup_description_1": "Šifrētas ziņas tiek nodrošinātas ar pilnīgu šifrēšanu. Tikai Tev un saņēmējam(iem) ir atslēgas šo ziņojumu lasīšanai.",
-            "setup_secure_backup_description_2": "Kad Tu atteiksies, šīs atslēgas tiks izdzēstas no šīs ierīces, kas nozīmē, ka Tu nevarēsi lasīt šifrētas ziņas, līdz Tev būs to atslēgas citās ierīcēs vai serverī izveidosi to rezerves kopiju.",
             "skip_key_backup": "Es nevēlos savas šifrētās ziņas"
         },
         "misconfigured_body": "Jāvaicā savam %(brand)s pārvaldniekam pārbaudīt, vai <a>konfigurācijā</a> ir nepareizu vai atkārtojošos ierakstu",
@@ -271,7 +258,6 @@
             "point_the_camera": "Jāvērš kamera uz šeit parādīto kvadrātkodu",
             "scan_code_instruction": "Zemāk esošais kvadrātkods ir jānolasa ar ierīci, kurā ir notikusi atteikšanās.",
             "scan_qr_code": "Nolasīt kvadrātkodu",
-            "security_code": "Drošības kods",
             "security_code_prompt": "Ja tiek prasīts, otrā ierīcē jāievada zemāk esošais kods",
             "select_qr_code": "Jāatlasa '%(scanQRCode)s'",
             "unsupported_explainer": "Konta nodrošinātājs neatbalsta pieteikšanos jaunā ierīcē ar kvadrātkodu.",
@@ -464,7 +450,6 @@
         "encrypted": "Šifrēts",
         "error": "Kļūda",
         "faq": "BUJ",
-        "favourites": "Izlase",
         "feedback": "Atsauksmes",
         "filter_results": "Filtrēt rezultātus",
         "forward_message": "Pārsūtīt ziņu",
@@ -472,7 +457,6 @@
         "go_to_settings": "Pāriet uz iestatījumiem",
         "guest": "Viesis",
         "help": "Palīdzība",
-        "historical": "Bijušie",
         "home": "Mājup",
         "homeserver": "Mājasserveris",
         "identity_server": "Identitāšu serveris",
@@ -484,13 +468,11 @@
         "light": "Gaiša",
         "loading": "Notiek ielāde…",
         "location": "Atrašanās vieta",
-        "low_priority": "Zems svarīgums",
         "matrix": "Matrix",
         "message": "Ziņa",
         "message_layout": "Ziņas izkārtojums",
         "message_timestamp_invalid": "Nederīgs laikspiedols",
         "microphone": "Mikrofons",
-        "model": "Modelis",
         "modern": "Mūsdienīgs",
         "mute": "Apklusināt",
         "n_members": {
@@ -547,7 +529,6 @@
         "success": "Izdevās",
         "suggestions": "Ieteikumi",
         "support": "Atbalsts",
-        "system_alerts": "Sistēmas brīdinājumi",
         "theme": "Tēma",
         "thread": "Pavediens",
         "threads": "Pavedieni",
@@ -564,7 +545,6 @@
         "username": "Lietotājvārds",
         "verified": "Verificēts",
         "version": "Versija",
-        "video": "Video",
         "video_room": "Video istaba",
         "view_message": "Skatīt ziņu",
         "warning": "Brīdinājums"
@@ -783,7 +763,6 @@
         "thread_root_id": "Pavediena saknes ID: %(threadRootId)s",
         "threads_timeline": "Pavedienu laika skala",
         "title": "Izstrādātāja rīki",
-        "toggle_event": "pārslēgt notikumu",
         "toolbox": "Instrumentārijs",
         "use_at_own_risk": "Šī lietotāja saskarne NEPĀRBAUDA vērtību veidus. Izmantojiet uz savu risku.",
         "user_read_up_to": "Lietotājs izlasījis līdz: ",
@@ -805,22 +784,6 @@
     },
     "dialog_close_label": "Aizvērt dialoglodziņu",
     "download_completed": "Lejupielāde pabeigta",
-    "emoji": {
-        "categories": "Kategorijas",
-        "category_activities": "Aktivitātes",
-        "category_animals_nature": "Dzīvnieki un daba",
-        "category_flags": "Karogi",
-        "category_food_drink": "Pārtika un dzērieni",
-        "category_frequently_used": "Bieži lietotas",
-        "category_objects": "Objekti",
-        "category_smileys_people": "Smaidiņi & cilvēki",
-        "category_symbols": "Simboli",
-        "category_travel_places": "Ceļojumi un vietas",
-        "quick_reactions": "Ātra reaģēšana"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Atcelt meklējumu"
-    },
     "empty_room": "Tukša istaba",
     "empty_room_was_name": "Tukša istaba (bija %(oldName)s)",
     "encryption": {
@@ -869,17 +832,6 @@
             "warning": "Ja nenoņēmi atkopšanas veidu, var būt, ka uzbrucējs mēģina piekļūt Tavam kontam. Nekavējoties jānomaina sava konta parole un jāiestata jauns atkopšanas veids."
         },
         "set_up_toast_title": "Iestatīt drošu rezerves dublēšanu",
-        "setup_secure_backup": {
-            "explainer": "Pirms izrakstīšanās iestatiet atslēgu dublēšanu, lai izvairītos no tās pazaudēšanas."
-        },
-        "udd": {
-            "interactive_verification_button": "Mijiedarbīga apliecināšana ar emocijzīmēm",
-            "other_ask_verify_text": "Vaicāt šim lietotājam apliecināt savu sesiju vai zemāk apliecināt to pašrocīgi.",
-            "other_new_session_text": "%(name)s (%(userId)s) pieteicās jaunā sesijā bez tās apliecināšanas:",
-            "own_ask_verify_text": "Cita sesija ir jāapliecina ar vienu no zemāk esošajām iespējām.",
-            "own_new_session_text": "Tu pierakstījies jaunā sesijā bez tās apliecināšanas:",
-            "title": "Neuzticama"
-        },
         "unable_to_setup_keys_error": "Nevar iestatīt atslēgas",
         "verification": {
             "accepting": "Apstiprina…",
@@ -1238,7 +1190,6 @@
         "experimental_description": "Vai jūtaties gatavs eksperimentiem? Izmēģiniet mūsu jaunākās idejas izstrādes stadijā. Šīs funkcijas nav pabeigtas un var būt nestabilas, var mainīties vai vispār var tikt atmestas. <a> Uzzināt vairāk</a> .",
         "experimental_section": "Agrīnie priekšskatījumi",
         "feature_wysiwyg_composer_description": "Ziņu sastādītājā Markdown vietā izmantot bagātinātu tekstu.",
-        "group_calls": "Jauna grupas zvanu pieredze",
         "group_developer": "Izstrādātājs",
         "group_encryption": "Šifrēšana",
         "group_experimental": "Eksperimentāls",
@@ -1251,7 +1202,6 @@
         "group_voip": "Balss un video",
         "group_widgets": "Logrīki",
         "hidebold": "Slēpt paziņojumu punktu (rādīt tikai skaitītāju emblēmas)",
-        "html_topic": "Rādīt istabas tēmu HTML attēlojumu",
         "join_beta": "Pievienoties beta versijai",
         "join_beta_reload": "Pievienošanās beta izraisīs %(brand)s pārlādēšanu",
         "jump_to_date": "Pāriet uz datumu (pievieno /jumptodate un pāriet uz datuma galvenēm)",
@@ -1269,13 +1219,10 @@
         "notifications": "Iespējot paziņojumu paneli istabas galvenē",
         "render_reaction_images": "Atveidot pielāgotus attēlus reakcijās",
         "render_reaction_images_description": "Dažkārt tās dēvē par \"pielāgotām emocijzīmēm\".",
-        "report_to_moderators": "Ziņot moderatoriem",
-        "report_to_moderators_description": "Istabās, kurās tiek nodrošināta moderēšana, poga \"Ziņot\" ļauj paziņot istabas moderatoriem par pārkāpumiem.",
         "sliding_sync": "Sliding Sync režīms",
         "sliding_sync_description": "Aktīvā izstrādes stadijā, to nevar atspējot.",
         "sliding_sync_disabled_notice": "Lai atspējotu, izrakstieties un pierakstieties atkārtoti",
         "sliding_sync_server_no_support": "Jūsu serverim trūkst atbalsta",
-        "under_active_development": "Aktīvas izstrādes stadijā.",
         "unrealiable_e2e": "Neuzticams šifrētās istabās",
         "video_rooms": "Video istabas",
         "video_rooms_a_new_way_to_chat": "Jauns veids, kā tērzēt %(brand)s, izmantojot balsi un video.",
@@ -1402,7 +1349,6 @@
         "mentions_and_keywords": "@pieminēšana un atslēgvārdi",
         "mentions_and_keywords_description": "Saņemt paziņojumus tikai par pieminēšanu un atslēgvārdiem, kā tas ir norādīts <a>iestatījumos</a>.",
         "mentions_keywords": "Pieminēšana un atslēgvārdi",
-        "message_didnt_send": "Ziņa netika nosūtīta. Noklikšķiniet, lai iegūtu vairāk informācijas.",
         "mute_description": "Jūs nesaņemsit nekādus paziņojumus"
     },
     "notifier": {
@@ -1488,7 +1434,6 @@
     },
     "quick_settings": {
         "all_settings": "Visi iestatījumi",
-        "metaspace_section": "Piespraust sānjoslai",
         "sidebar_settings": "Papildus iespējas",
         "title": "Ātrie iestatījumi"
     },
@@ -1506,25 +1451,10 @@
     },
     "report_content": {
         "description": "Ziņojuma par šo ziņu iesniegšana nosūtīs tās neatkārtojamo notikuma identifikatoru mājasservera pārvaldniekam. Ja ziņas šajā istabā ir šifrētas, mājasservera pārvaldnieks nevarēs lasīt ziņas saturu vai skatīt jebkādas datnes vai attēlus.",
-        "disagree": "Nepiekrist",
-        "error_create_room_moderation_bot": "Nevar izveidot istabu ar moderēšanas botu",
         "hide_messages_from_user": "Atzīmējiet, vai vēlaties slēpt visas šī lietotāja pašreizējās un turpmākās ziņas.",
         "ignore_user": "Neņemt vērā lietotāju",
-        "illegal_content": "Nelikumīgs saturs",
         "missing_reason": "Lūdzu, norādiet ziņošanas iemeslu.",
-        "nature": "Lūdzu, izvēlieties pārkāpuma raksturu un aprakstiet, kāpēc šī ziņa ir uzskatāma par aizskarošu.",
-        "nature_disagreement": "Tas, ko šis lietotājs raksta, ir nepareizi.\nPar to tiks ziņots istabas moderatoriem.",
-        "nature_illegal": "Šis lietotājs veic nelikumīgas darbības, piemēram, publiskojot cilvēku dzīvesvietu vai draudot ar vardarbību.\nPar to tiks ziņots istabas moderatoriem, kuri to var nodot tiesībsargājošajām iestādēm.",
-        "nature_nonstandard_admin": "Šī istaba ir veltīta nelikumīgam vai kaitīgam saturam vai moderatori nespēj pārskatīt nelikumīgu vai kaitīgu saturu.\nPar šo tiks ziņots %(homeserver)s pārvaldītājiem.",
-        "nature_nonstandard_admin_encrypted": "Šī istaba ir veltīta nelikumīgam vai kaitīgam saturam vai moderatori nespēj pārskatīt nelikumīgu vai kaitīgu saturu.\nPar šo tiks ziņots %(homeserver)s pārvaldītājiem. Tie nevarēs lasīt šīs istabas šifrēto saturu.",
-        "nature_other": "Jebkāds cits iemesls. Lūdzu, aprakstiet problēmu.\nPar to tiks ziņots istabas moderatoriem.",
-        "nature_spam": "Šis lietotājs pārpludina istabu ar reklāmām, saitēm uz reklāmām vai propagandu.\nPar to tiks ziņots istabas moderatoriem.",
-        "nature_toxic": "Šis lietotājs demonstrē toksisku uzvedību, piemēram, apvainojot citus lietotājus vai kopīgojot tikai pieaugušajiem paredzēto saturu ģimenei draudzīgā istabā vai citādi pārkāpjot šīs istabas noteikumus.\nPar to tiks ziņots istabas moderatoriem.",
-        "other_label": "Citi",
-        "report_content_to_homeserver": "Ziņot par saturu mājasservera pārvaldniekam",
-        "report_entire_room": "Ziņot par visu istabu",
-        "spam_or_propaganda": "Surogātpasts vai propaganda",
-        "toxic_behaviour": "Toksiska uzvedība"
+        "report_content_to_homeserver": "Ziņot par saturu mājasservera pārvaldniekam"
     },
     "restore_key_backup_dialog": {
         "count_of_decryption_failures": "Neizdevās atšifrēt %(failedCount)s sesijas.",
@@ -1746,39 +1676,12 @@
         "waiting_for_join_title": "Gaida lietotāju pievienošanos %(brand)s"
     },
     "room_list": {
-        "add_room_label": "Pievienot istabu",
         "add_space_label": "Pievienot telpu",
-        "breadcrumbs_empty": "Nav nesen apmeklētu istabu",
-        "breadcrumbs_label": "Nesen apmeklētās istabas",
         "failed_add_tag": "Neizdevās istabai pievienot birku %(tagName)s",
         "failed_remove_tag": "Neizdevās istabai noņemt birku %(tagName)s",
         "failed_set_dm_tag": "Neizdevās iestatīt tiešās ziņas atzīmi",
-        "home_menu_label": "Sākumlapas opcijas",
-        "join_public_room_label": "Pievienoties publiskai istabai",
-        "joining_rooms_status": {
-            "zero": "Pašlaik pievienojas %(count)s istabām",
-            "one": "Pašlaik pievienojas %(count)s istabai",
-            "other": "Pašlaik pievienojas %(count)s istabām"
-        },
         "notification_options": "Paziņojumu iespējas",
-        "redacting_messages_status": {
-            "zero": "",
-            "one": "Pašlaik tiek dzēstas ziņas %(count)s istabā",
-            "other": "Pašlaik tiek dzēstas ziņas %(count)s istabās"
-        },
-        "show_less": "Rādīt mazāk",
-        "show_n_more": {
-            "one": "Rādīt vēl %(count)s",
-            "other": "Rādīt vēl %(count)s"
-        },
-        "show_previews": "Rādīt ziņu priekšskatījumus",
-        "sort_by": "Kārtot pēc",
-        "sort_by_activity": "Aktivitātes",
-        "sort_by_alphabet": "A-Ž",
-        "sort_unread_first": "Rādīt istabas ar nelasītām ziņām augšpusē",
-        "space_menu_label": "%(spaceName)s izvēlne",
-        "sublist_options": "Saraksta iespējas",
-        "suggested_rooms_heading": "Ieteicamās istabas"
+        "show_less": "Rādīt mazāk"
     },
     "room_settings": {
         "access": {
@@ -2320,7 +2223,6 @@
         "send_typing_notifications": "Sūtīt paziņojumus par rakstīšanu",
         "sessions": {
             "best_security_note": "Visdrošāk ir apliecināt savas sesijas un atteikties no jebkuras sesijas, kas nav atpazīstama vai netiek vairs izmantota.",
-            "browser": "Pārlūks",
             "confirm_sign_out": {
                 "zero": "Jāapstiprina atteikšanās no šīm ierīcēm.",
                 "one": "Jāapstiprina atteikšanās no šīs ierīces.",
@@ -2374,7 +2276,6 @@
             "no_sessions": "Netika atrasta neviena sesija.",
             "no_unverified_sessions": "Netika atrasta neviena neapliecināta sesija.",
             "no_verified_sessions": "Netika atrasta neviena apliecināta sesija.",
-            "os": "Operētājsistēma",
             "other_sessions_heading": "Citas sesijas",
             "push_heading": "Pašpiegādes paziņojumi",
             "push_subheading": "Saņemt pašpiegādes paziņojumus šajā sesijā.",
@@ -2433,13 +2334,11 @@
         "show_stickers_button": "Rādīt uzlīmju pogu",
         "show_typing_notifications": "Rādīt paziņojumus par rakstīšanu",
         "sidebar": {
-            "metaspaces_favourites_description": "Grupējiet savas iecienītākās istabas un personas vienuviet.",
             "metaspaces_home_all_rooms": "Rādīt visas istabas",
             "metaspaces_home_all_rooms_description": "Rādīt visas savas istabas sākumlapā, pat ja tās pievienotas kādai telpai.",
             "metaspaces_home_description": "Sākums ir noderīgs, lai iegūtu pārskatu par visu.",
             "metaspaces_orphans": "Istabas ārpus telpām",
             "metaspaces_orphans_description": "Grupējiet visas telpām nepiesaistītās istabas vienuviet.",
-            "metaspaces_people_description": "Grupējiet visus savus cilvēkus vienuviet.",
             "metaspaces_subsection": "Telpas, ko rādīt",
             "metaspaces_video_rooms": "Video istabas un konferences",
             "metaspaces_video_rooms_description": "Grupējiet visas privātās video istabas un konferences.",
@@ -2459,7 +2358,6 @@
             "audio_output": "Audio izeja",
             "audio_output_empty": "Nav konstatētas audio izejas",
             "auto_gain_control": "Automātiska pastiprinājuma kontrole",
-            "connection_section": "Savienojums",
             "echo_cancellation": "Atbalss slāpēšana",
             "enable_fallback_ice_server": "Atļaut rezerves zvanu palīgserveri (%(server)s)",
             "enable_fallback_ice_server_description": "Attiecināms tikai tad, ja Tavs mājasserveris to nenodrošina. Tava IP adrese zvana laikā tiks kopīgota.",
@@ -2638,12 +2536,6 @@
     "space_settings": {
         "title": "Iestatījumi - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Jums nav atļauju pievienot istabas šai telpai",
-        "error_no_permission_add_space": "Jums nav atļauju pievienot telpas šai telpai",
-        "error_no_permission_create_room": "Nav atļauju veidot jaunas istabas šajā vietā",
-        "error_no_permission_invite": "Jums nav atļauju uzaicināt cilvēkus uz šo telpu"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Ievadiet nosaukumu jaunam serverim, kuru vēlaties pārlūkot.",
@@ -2835,9 +2727,7 @@
         "m.poll.start": "%(senderName)s uzsāka aptauju- %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s mainīja istabas avataru.",
-            "changed_img": "%(senderDisplayName)s nomainīja istabas avataru uz <img/>",
-            "lightbox_title": "%(senderDisplayName)s nomainīja %(roomName)s istabas avataru",
-            "removed": "%(senderDisplayName)s dzēsa istabas avataru."
+            "lightbox_title": "%(senderDisplayName)s nomainīja %(roomName)s istabas avataru"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3423,13 +3313,7 @@
         "close_to_view_right_panel": "Aizvērt šo logrīku, lai skatītu to šajā panelī",
         "context_menu": {
             "delete": "Izdzēst ekrānvadīklu",
-            "delete_warning": "Ekrānvadīklas izdzēšana noņems to visiem šīs istabas lietotājiem. Vai tiešām izdzēst šo ekrānvadīklu?",
-            "move_left": "Pārvietot pa kreisi",
-            "move_right": "Pārvietot pa labi",
-            "remove": "Dzēst visiem",
-            "revoke": "Atsaukt atļaujas",
-            "screenshot": "Uzņemt attēlu",
-            "start_audio_stream": "Sākt audio straumēšanu"
+            "delete_warning": "Ekrānvadīklas izdzēšana noņems to visiem šīs istabas lietotājiem. Vai tiešām izdzēst šo ekrānvadīklu?"
         },
         "cookie_warning": "Šis logrīks var izmantot sīkfailus.",
         "error_hangup_description": "Jūs tikāt atvienots no zvana. (Kļūda: %(message)s)",
diff --git a/apps/web/src/i18n/strings/mg_MG.json b/apps/web/src/i18n/strings/mg_MG.json
index 1c02414632..4901acebe7 100644
--- a/apps/web/src/i18n/strings/mg_MG.json
+++ b/apps/web/src/i18n/strings/mg_MG.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Mpifidy Emoji",
         "jump_first_invite": "Hanketo amin'ny fanasana voalohany.",
         "message_composer": "Mpamorona hafatra",
         "n_unread_messages": {
@@ -11,8 +10,6 @@
             "one": " Voalaza tsy voavaky.",
             "other": "%(count)shafatra tsy novakiana anisan'izany ny filazana."
         },
-        "recent_rooms": "Efitrano vao haingana",
-        "room_name": "Efitra%(name)s",
         "room_status_bar": "Bara momba ny efitrano",
         "seek_bar_label": "Audio mitady bar",
         "unread_messages": "Hafatra tsy novakiana."
@@ -22,7 +19,6 @@
         "accept": "Manaiky",
         "add": "Ametraka",
         "add_existing_room": "Anampy ny efitrano misy",
-        "add_people": "Ampiditra olona",
         "apply": "Manatontonsa",
         "approve": "Hanaiky",
         "ask_to_join": "Mangataka ny hiaraka",
@@ -54,7 +50,6 @@
         "enter_fullscreen": "Ampidiro ny efijery feno",
         "exit_fullscreeen": "Hivoaka ny efijery feno",
         "expand": "Fampivoarana",
-        "explore_public_rooms": "Tsidiho ny efitranom-bahoaka",
         "explore_rooms": "Tsidiho ny efitrano",
         "export": "Fanondranana",
         "forward": "Teo aloa",
@@ -66,8 +61,6 @@
         "ignore": "Dingiavina",
         "import": "Manafatra",
         "invite": "Asao",
-        "invite_to_space": "Asao hoany amin'ny habakabaka",
-        "invites_list": "Fanasana",
         "join": "Iombona",
         "learn_more": "Hamantatra bebekokoa",
         "leave": "Lasa",
@@ -93,7 +86,6 @@
         "rename": "Hanova anarana",
         "reply": "Valio",
         "reply_in_thread": "Valio amin'ny kofehy",
-        "report_content": "Mitatitra votoaty",
         "resend": "Voaroaka",
         "reset": "Amerina aminy laoniny",
         "resume": "CV",
@@ -111,8 +103,6 @@
         "sign_out": "Ivoaka",
         "skip": "Itsambikina",
         "start": "Manomboka",
-        "start_chat": "Manomboka",
-        "start_new_chat": "Manomboka chat vaovao",
         "stop": "Atsaharo",
         "submit": "Manolotra",
         "subscribe": "Anaraka",
@@ -211,10 +201,7 @@
         "log_in_new_account": "<a>Hiditra</a> amin'ny kaontinao vaovao.",
         "logout_dialog": {
             "description": "Tena te hivoaka ve ianao?",
-            "megolm_export": "Manondrana lakile amin'ny tanana",
             "setup_key_backup_title": "Ho very ny fidirana amin'ny hafatrao voasakana",
-            "setup_secure_backup_description_1": "Ny hafatra voarakitra dia arovana aminy fanafenana farany mankany amin'ny farany. Ianao sy ny mpandray (ireo) ihany no manana ny fanalahidy hamakiana ireo hafatra ireo.",
-            "setup_secure_backup_description_2": "Rehefa mivoaka ianao dia ho voafafa amin'ity fitaovana ity ireo fanalahidy ireo, izay midika fa tsy ho afaka hamaky hafatra voafono ianao raha tsy manana ny fanalahidin'izy ireo amin'ny fitaovanao hafa, na averinao any aminy mpizara.",
             "skip_key_backup": "Tsy tiako ny hafatra voarakotra"
         },
         "misconfigured_body": "Anontanio ny anao%(brand)s admin hanamarina<a> ny config</a> hoany fidirana diso na dika mitovy.",
@@ -428,7 +415,6 @@
         "encrypted": "Nafenina",
         "error": "Fahadisoana",
         "faq": "Soloky",
-        "favourites": "Ankafizina",
         "feedback": "Iverina",
         "filter_results": "Sivana ny valiny",
         "forward_message": "Talohan'ny",
@@ -436,7 +422,6 @@
         "go_to_settings": "Mandehana any amin'ny fanitsiana",
         "guest": "Hivahiny",
         "help": "Vonjy",
-        "historical": "ara-tantara",
         "home": "Trano",
         "homeserver": "Mpizara an-trano",
         "identity_server": "Mpizara famantarana",
@@ -448,12 +433,10 @@
         "light": "Fahazavana",
         "loading": "Manatontonsa",
         "location": "Toerana isihany",
-        "low_priority": "Laharam-pahamehana ambany",
         "matrix": "Matrix",
         "message": "Hafatra",
         "message_layout": "Fandaharana",
         "microphone": "Fanamafisampeo ara taribia",
-        "model": "Modely",
         "modern": "Ankehitriny",
         "mute": "Moana",
         "n_members": {
@@ -508,7 +491,6 @@
         "success": "Fahombiazana",
         "suggestions": "Hevitra",
         "support": "Manampy",
-        "system_alerts": "Fanairana momba ny rafitra",
         "theme": "Foto-kevitra",
         "thread": "Taridresaka",
         "threads": "Zanaka lahy",
@@ -524,7 +506,6 @@
         "username": "Anarany mpampiasa",
         "verified": "Fanamariana",
         "version": "Dikan-teny",
-        "video": "Ainamanjery",
         "video_room": "Efitranon'ny Lahatsary",
         "view_message": "Jereo ny hafatra",
         "warning": "Fampitandremana"
@@ -741,7 +722,6 @@
         "thread_root_id": "Id fototra :%(threadRootId)s",
         "threads_timeline": "Laha-tahirin'ny randram-potoana",
         "title": "Fitaovana ny mampandroso",
-        "toggle_event": "Itsipaka hetsika",
         "toolbox": "Toeram-pitahirizana ny mety ilaina",
         "use_at_own_risk": "TSY manamarina ny karazana soatoavina ity UI ity. Ampiasao amin'ny risikao manokana.",
         "user_read_up_to": "Ny mpampiasa dia namaky hatramin'ny :",
@@ -762,22 +742,6 @@
         "widget_screenshots": "Alefaso ny pikantsary widget amin'ny widget tohanana"
     },
     "dialog_close_label": "Akatona ny fifanakalozan-kevitra",
-    "emoji": {
-        "categories": "Sokajy",
-        "category_activities": "Fiaraha-mientana",
-        "category_animals_nature": "Ny biby sy ny natiora",
-        "category_flags": "Saina",
-        "category_food_drink": "Sakafo sy zava-pisotro",
-        "category_frequently_used": "Ampiasaina matetika",
-        "category_objects": "Zavatra",
-        "category_smileys_people": "Smileys sy olona",
-        "category_symbols": "Sariohatra",
-        "category_travel_places": "Fitsidihana & Toerana",
-        "quick_reactions": "Fanehoan-kevitra haingana"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Hanafoana ny fikarohana"
-    },
     "empty_room": "Efitra banga",
     "empty_room_was_name": "Efitra banga (dia%(oldName)s )",
     "encryption": {
@@ -826,17 +790,6 @@
             "warning": "Raha tsy nesorinao ny fomba fanarenana, dia mety hanandrana hiditra aminy kaontinao ny mpanafika. Hanova ny tenimiafiny kaontinao ary mametraha fomba fanarenana vaovao avy hatrany ao amin'ny fanitsiana."
         },
         "set_up_toast_title": "Hanitsy angona voaharo",
-        "setup_secure_backup": {
-            "explainer": "Amboary ny fanalahidinao alohany hivoahana mba tsy ho very."
-        },
-        "udd": {
-            "interactive_verification_button": "Hamarino amin'ny alalany emoji",
-            "other_ask_verify_text": "Angataho ity mpampiasa ity mba hanamarina ny fotoam-pivorian'izy ireo, na hanamarina izany amin'ny tanana eto ambany.",
-            "other_new_session_text": "%(name)s(%(userId)s ) niditra tamina fivoriana vaovao nefa tsy nanamarina izany:",
-            "own_ask_verify_text": "Hamarino ny fotoam-pivorianao hafa aminy fampiasana ny iray amin'ireo safidy etsy ambany.",
-            "own_new_session_text": "Niditra tamina fivoriana vaovao ianao nefa tsy nanamarina izany:",
-            "title": "Tsy atokisana"
-        },
         "unable_to_setup_keys_error": "Tsy afaka nanangana fanalahidy",
         "verification": {
             "accepting": "Manaiky…",
@@ -1264,7 +1217,6 @@
         "experimental_section": "Fijery mialoha",
         "feature_disable_call_per_sender_encryption": "Atsaharo ny encryption isaky ny mpandefa hoany Element Call",
         "feature_wysiwyg_composer_description": "Mampiasà lahatsoratra manankarena fa tsy Markdown ao amin'ny mpamoron-dahatsoratra.",
-        "group_calls": "Traikefa antso vondrona vaovao",
         "group_developer": "Fampandrosoana",
         "group_encryption": "Fanafenana",
         "group_experimental": "Fanandramana",
@@ -1278,7 +1230,6 @@
         "group_voip": "Feo sy Orinan-tsary",
         "group_widgets": "Widgets",
         "hidebold": "Afeno ny teboka fampandrenesana (asehoy fotsiny ny mari-pamantarana kaontinanta)",
-        "html_topic": "Asehoy ny fanehoana HTML momba ny lohahevitra efitrano",
         "join_beta": "Midira amin'ny beta",
         "join_beta_reload": "Hamerina ny fidirana amin'ny beta%(brand)s .",
         "jump_to_date": "Hanketo amin'ny daty (manampy / hitsambikina ary hitsambikina amin'ny lohateniny daty)",
@@ -1296,13 +1247,10 @@
         "notifications": "Alefaso ny tontonana fampahafantarana ao amin'ny lohateniny efitrano",
         "render_reaction_images": "Mandefa sary mahazatra amin'ny fanehoan-kevitra",
         "render_reaction_images_description": "Indraindray antsoina hoe emojis mahazatra.",
-        "report_to_moderators": "Tatitra aminy mpandrindra",
-        "report_to_moderators_description": "Ao amin'ny efitrano izay manohana ny fampitoniana, ny bokotra \"Report\" dia hamela anao hitatitra ny fanararaotana amin'ireo mpandrindra ny efitrano.",
         "sliding_sync": "Fomba atao",
         "sliding_sync_description": "Eo ambany fampandrosoana mavitrika, tsy azo kilemaina.",
         "sliding_sync_disabled_notice": "Miala aloa de miverena mba hahafahana mampiato",
         "sliding_sync_server_no_support": "Tsy manana fanohanana avy amin'ny teratany ny mpizaranao",
-        "under_active_development": "Eo ambanin'ny fampandrosoana mavitrika.",
         "unrealiable_e2e": "Tsy azo ianteherana amin'ny efitrano misy miafina",
         "video_rooms": "Efi-trano fandraisan-tsary",
         "video_rooms_a_new_way_to_chat": "Fomba vaovao hiresahana amin'ny feo sy sary mietsika%(brand)s .",
@@ -1356,9 +1304,6 @@
         "room_rejoin_warning": "Tsy ampahibemaso ity efitrano ity. Tsy afaka miditra indray ianao raha tsy misy fanasana.",
         "space_rejoin_warning": "Tsy ampahibemaso ity habaka ity. Tsy afaka miditra indray ianao raha tsy misy fanasana."
     },
-    "left_panel": {
-        "open_dial_pad": "Sokafy ny dial pad"
-    },
     "lightbox": {
         "rotate_left": "Ahodina ankavia",
         "rotate_right": "Ahodina miankavanana",
@@ -1450,7 +1395,6 @@
         "mentions_and_keywords": "@fanononana sy teny fanalahidy",
         "mentions_and_keywords_description": "Mahazoa fampandrenesana afa-tsy amin'ny teny sy teny fanalahidy araka ny napetraka ao amin'ny anao<a> Fikirana</a>",
         "mentions_keywords": "Fanononana sy teny fototra",
-        "message_didnt_send": "Tsy lasa ny hafatra. Tsindrio raha mila fanazavana.",
         "mute_description": "Tsy hahazo fampandrenesana ianao"
     },
     "notifier": {
@@ -1535,7 +1479,6 @@
     },
     "quick_settings": {
         "all_settings": "Fikirana rehetra",
-        "metaspace_section": "Ampiantona aminy bar lateraly",
         "sidebar_settings": "Safidy bebe kokoa",
         "title": "Fandrindrana haingana"
     },
@@ -1553,25 +1496,10 @@
     },
     "report_content": {
         "description": "Ny tatitra an'ity hafatra ity dia handefa ny event ID azy manokana any amin'ny mpitantana ny homeserver-nao. Raha misy encryption ny hafatra ao amin'ity efitrano ity dia tsy afaka mamaky ny lahatsoratra na mijery rakitra na sary ny mpitantana ny homeserver anao.",
-        "disagree": "Tsy miombon-kevitra",
-        "error_create_room_moderation_bot": "Tsy afaka mamorona toerana miaraka amin'ny bot fandrindrana",
         "hide_messages_from_user": "Jereo raha te hanafina ny hafatra rehetra ankehitriny sy ho avy amin'ity mpampiasa ity ianao.",
         "ignore_user": "Tsy iraharaha ny mpampiasa",
-        "illegal_content": "Votoaty tsy ara-dalàna",
         "missing_reason": "Fenoy azafady ny antony hanaovanao tatitra.",
-        "nature": "Misafidiana toetra iray ary lazao ny antony mahatonga an'ity hafatra ity hanararaotana.",
-        "nature_disagreement": "Diso ny zavatra soratan'ity mpampiasa ity. Hampandrenesina amin’ireo mpandrindra ny efitrano izany.",
-        "nature_illegal": "Ity mpampiasa ity dia mampiseho fitondran-tena tsy ara-dalàna, ohatra amin'ny fametavetana olona na fandrahonana herisetra. Hatao amin’ireo mpandrindra efitrano izay mety hampiakatra izany any amin’ny tompon’andraikitra ara-dalàna izany.",
-        "nature_nonstandard_admin": "Ity efitrano ity dia natokana hoany votoaty tsy ara-dalàna na misy poizina na ny mpandrindra dia tsy afaka mamatsy votoaty tsy ara-dalàna na misy poizina. Hatao amin’ny mpitantana ny%(homeserver)s .",
-        "nature_nonstandard_admin_encrypted": "Ity efitrano ity dia natokana hoany votoaty tsy ara-dalàna na misy poizina na ny mpandrindra dia tsy afaka mamatsy votoaty tsy ara-dalàna na misy poizina. Hatao amin’ny mpitantana ny%(homeserver)s . Tsy ho azon'ny mpitantana mamaky ny votoatin'ity efitrano ity.",
-        "nature_other": "Ny antony hafa. Farito ny olana azafady. Hampandrenesina amin’ireo mpandrindra ny efitrano izany.",
-        "nature_spam": "Ity mpampiasa ity dia mametaka ny efitrano miaraka aminy doka, rohy mankany amin'ny doka na propagandy. Hampandrenesina amin’ireo mpandrindra ny efitrano izany.",
-        "nature_toxic": "Maneho fihetsika misy poizina ity mpampiasa ity, ohatra amin'ny faniratsirana ny mpampiasa hafa na ny fizarana votoaty hoany olon-dehibe irery ao aminy efitranony fianakaviana na raha tsy izany dia manitsakitsaka ny fitsipika ao amin'ity efitrano ity. Hampandrenesina amin’ireo mpandrindra ny efitrano izany.",
-        "other_label": "Hafa",
-        "report_content_to_homeserver": "Mitatitra votoaty amin'ny Administrator Homeserver-nao",
-        "report_entire_room": "Tatitra ny efitrano manontolo",
-        "spam_or_propaganda": "Spam na propagandy",
-        "toxic_behaviour": "Fitondran-tena misy poizina"
+        "report_content_to_homeserver": "Mitatitra votoaty amin'ny Administrator Homeserver-nao"
     },
     "restore_key_backup_dialog": {
         "count_of_decryption_failures": "Tsy nahomby ny decrypt%(failedCount)s sessions!",
@@ -1799,37 +1727,12 @@
         "waiting_for_join_title": "Miandry ny mpampiasa hiditra%(brand)s"
     },
     "room_list": {
-        "add_room_label": "Hanampy efitrano",
         "add_space_label": "Ampio toerana",
-        "breadcrumbs_empty": "Tsy misy efitrano notsidihina vao haingana",
-        "breadcrumbs_label": "Efitrano notsidihina vao haingana",
         "failed_add_tag": "Tsy nety nanampy tag%(tagName)s mankany amin'ny efitrano",
         "failed_remove_tag": "Tsy nesorina ny marika%(tagName)s avy amin'ny efitrano",
         "failed_set_dm_tag": "Tsy nahavita nametraka tenifototra hafatra mivantana",
-        "home_menu_label": "Safidy an-trano",
-        "join_public_room_label": "Midira amin'ny efitranom-bahoaka",
-        "joining_rooms_status": {
-            "one": "Miditra amin'izao fotoana izao%(count)s efitra",
-            "other": "Miditra amin'izao fotoana izao%(count)s ROOM"
-        },
         "notification_options": "Safidy fampahafantarana",
-        "redacting_messages_status": {
-            "one": "Esory ny hafatra ao%(count)s efitra",
-            "other": "Esory ny hafatra ao%(count)s efitra"
-        },
-        "show_less": "Asehoy kely",
-        "show_n_more": {
-            "one": "Fampiseona%(nombre) s Bebekokoa",
-            "other": "Fampiseona%(nombre)s Bebekokoa"
-        },
-        "show_previews": "Asehoy mialoha ny hafatra",
-        "sort_by": "Sivanina araka",
-        "sort_by_activity": "Asa atao",
-        "sort_by_alphabet": "A-Z",
-        "sort_unread_first": "Asehoy aloha ny efitrano misy hafatra tsy novakiana",
-        "space_menu_label": "%(spaceName)ssakafo",
-        "sublist_options": "Lisitra safidy",
-        "suggested_rooms_heading": "Efitrano Soso-kevitra"
+        "show_less": "Asehoy kely"
     },
     "room_settings": {
         "access": {
@@ -2386,7 +2289,6 @@
         "send_typing_notifications": "Alefaso fampandrenesana fanoratana",
         "sessions": {
             "best_security_note": "Ho fiarovana tsara indrindra, hamarino ny fotoam-pivorianao ary midira amin'ny fivoriana izay tsy fantatrao na tsy ampiasainao intsony.",
-            "browser": "Mpitety",
             "confirm_sign_out": {
                 "one": "Hamafiso ny fivoahana ity fitaovana ity",
                 "other": "Hamafiso ny fisoratana anarana ireto fitaovana ireto"
@@ -2435,7 +2337,6 @@
             "no_sessions": "Tsy misy fivoriana hita.",
             "no_unverified_sessions": "Tsy misy fivoriana tsy voamarina hita.",
             "no_verified_sessions": "Tsy misy fivoriana voamarina hita.",
-            "os": "Rafitra fikirakirana",
             "other_sessions_heading": "Fivoriana hafa",
             "push_heading": "Fampandrenesana manosika",
             "push_subheading": "Mandraisa fampandrenesana fanosehana amin'ity fivoriana ity.",
@@ -2492,13 +2393,11 @@
         "show_stickers_button": "Asehoy ny bokotra an-tsary",
         "show_typing_notifications": "Asehoy ny fampandrenesana fanoratana",
         "sidebar": {
-            "metaspaces_favourites_description": "Vorio amin'ny toerana iray ny efitranonao sy ny olona tianao rehetra.",
             "metaspaces_home_all_rooms": "Asehoy ny efitrano rehetra",
             "metaspaces_home_all_rooms_description": "Asehoy ny efitranonao rehetra ao an-trano, na dia ao anaty habakabaka aza.",
             "metaspaces_home_description": "Ny trano dia ilaina amin'ny fijerena ny zava-drehetra.",
             "metaspaces_orphans": "Efitrano ivelan'ny toerana iray",
             "metaspaces_orphans_description": "Vondrona amin'ny toerana iray ny efitranonao rehetra izay tsy anisan'ny habaka.",
-            "metaspaces_people_description": "Vorio amin'ny toerana iray ny olonao rehetra.",
             "metaspaces_subsection": "Toerana hanehoana",
             "spaces_explainer": "Ny habaka dia fomba ivondronana efitrano sy olona. Miaraka amin'ireo habaka misy anao, azonao atao koa ny mampiasa ireo efa vita.",
             "title": "Sidebar"
@@ -2515,7 +2414,6 @@
             "audio_output": "Fivoaham-peo",
             "audio_output_empty": "Tsy misy fivoaham-peo voatsikiaritra",
             "auto_gain_control": "Fanaraha-maso ny fahazoana mandeha ho azy",
-            "connection_section": "Fifandraisana",
             "echo_cancellation": "Fanafoanana ny echo",
             "enable_fallback_ice_server": "Avelao ny mpizara fanampiana antso miverina (%(server)s )",
             "enable_fallback_ice_server_description": "Mihatra ihany raha tsy manolotra iray ny homeserver anao. Ny adiresy IP anao dia hozaraina mandritra ny antso.",
@@ -2689,12 +2587,6 @@
     "space_settings": {
         "title": "Fikirana -%(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Tsy manana alalana hanampy efitrano amin'ity habaka ity ianao",
-        "error_no_permission_add_space": "Tsy manana alalana hanisy habaka amin'ity habaka ity ianao",
-        "error_no_permission_create_room": "Tsy manana alalana hamorona efitrano vaovao amin'ity habaka ity ianao",
-        "error_no_permission_invite": "Tsy manana alalana hanasa olona ho amin'ity habaka ity ianao"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Ampidiro ny anaran'ny mpizara vaovao tianao hojerena.",
@@ -2890,9 +2782,7 @@
         "m.poll.start": "%(senderName)snanomboka ny fitsapan-kevitra -%(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)snanova ny avatar.",
-            "changed_img": "%(senderDisplayName)sniova ny avatar ho<img/>",
-            "lightbox_title": "%(senderDisplayName)sniova ny avatar ho%(roomName)s",
-            "removed": "%(senderDisplayName)snesorina ny avatar."
+            "lightbox_title": "%(senderDisplayName)sniova ny avatar ho%(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3466,13 +3356,7 @@
         "close_to_view_right_panel": "Akatono ity widget ity raha hijery azy amin'ity tontonana ity",
         "context_menu": {
             "delete": "Fafao ny widget",
-            "delete_warning": "Ny famafana widget dia manala azy hoany mpampiasa rehetra ao amin'ity efitrano ity. Tena te-hamafa ity widget ity ve ianao?",
-            "move_left": "Mifindra eo ankavia",
-            "move_right": "Mandrosoa miankavanana",
-            "remove": "Esory avokoa hoany rehetra",
-            "revoke": "Manafoana ny fahazoan-dàlana",
-            "screenshot": "Maka sary",
-            "start_audio_stream": "Atombohy ny onjam-peo"
+            "delete_warning": "Ny famafana widget dia manala azy hoany mpampiasa rehetra ao amin'ity efitrano ity. Tena te-hamafa ity widget ity ve ianao?"
         },
         "cookie_warning": "Ity widget ity dia mety mampiasa cookies.",
         "error_hangup_description": "Tapaka tamin'ny antso ianao. (Hadisoana:%(message)s )",
diff --git a/apps/web/src/i18n/strings/nb_NO.json b/apps/web/src/i18n/strings/nb_NO.json
index e4c2a664f3..d8da67c4e0 100644
--- a/apps/web/src/i18n/strings/nb_NO.json
+++ b/apps/web/src/i18n/strings/nb_NO.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Emoji-velger",
         "jump_first_invite": "Hopp til den første invitasjonen.",
         "message_composer": "Meldingsfelt",
         "n_unread_messages": {
@@ -11,8 +10,6 @@
             "one": "1 ulest omtale.",
             "other": "%(count)s uleste meldinger inkludert der du nevnes."
         },
-        "recent_rooms": "Nylige rom",
-        "room_name": "Rom %(name)s",
         "room_status_bar": "Statuslinje for rommet",
         "seek_bar_label": "Søkelinje for lyd",
         "unread_messages": "Uleste meldinger."
@@ -22,7 +19,6 @@
         "accept": "Godta",
         "add": "Legg til",
         "add_existing_room": "Legg til et eksisterende rom",
-        "add_people": "Legg til personer",
         "apply": "Bruk",
         "approve": "Godkjenn",
         "ask_to_join": "Be om å få bli med",
@@ -57,7 +53,6 @@
         "enter_fullscreen": "Gå til fullskjermmodus",
         "exit_fullscreeen": "Avslutt fullskjermmodus",
         "expand": "Utvid",
-        "explore_public_rooms": "Utforsk offentlige rom",
         "explore_rooms": "Se alle rom",
         "export": "Eksporter",
         "forward": "Videresend",
@@ -69,8 +64,6 @@
         "ignore": "Ignorer",
         "import": "Importer",
         "invite": "Inviter",
-        "invite_to_space": "Inviter til område",
-        "invites_list": "Invitasjoner",
         "join": "Bli med",
         "learn_more": "Lær mer",
         "leave": "Forlat",
@@ -97,7 +90,6 @@
         "rename": "Gi nytt navn",
         "reply": "Svar",
         "reply_in_thread": "Svar i tråd",
-        "report_content": "Rapporter innhold",
         "report_room": "Rapporter rom",
         "resend": "Send på nytt",
         "reset": "Nullstill",
@@ -117,8 +109,6 @@
         "sign_out": "Fjern denne enheten",
         "skip": "Hopp over",
         "start": "Begynn",
-        "start_chat": "Start chat",
-        "start_new_chat": "Start ny chat",
         "stop": "Stopp",
         "submit": "Send inn",
         "subscribe": "Abonnér",
@@ -219,10 +209,7 @@
         "log_in_new_account": "<a>Logg på</a> din nye konto.",
         "logout_dialog": {
             "description": "Er du sikker på at du vil logge av?",
-            "megolm_export": "Eksporter nøkler manuelt",
             "setup_key_backup_title": "Du mister tilgangen til de krypterte meldingene dine",
-            "setup_secure_backup_description_1": "Krypterte meldinger er sikret med punkt-til-punkt-kryptering. Bare du og mottakeren(e) har nøklene til å lese disse meldingene.",
-            "setup_secure_backup_description_2": "Når du logger av, slettes disse nøklene fra denne enheten, noe som betyr at du ikke vil kunne lese krypterte meldinger med mindre du har nøklene til dem på dine andre enheter, eller har sikkerhetskopiert dem til serveren.",
             "skip_key_backup": "Jeg vil ikke ha mine krypterte meldinger"
         },
         "misconfigured_body": "Spør din%(brand)s administrator om å sjekke <a>konfigurasjonen din</a> for feil eller dupliserte oppføringer.",
@@ -274,7 +261,6 @@
             "point_the_camera": "Skann QR-koden som vises her",
             "scan_code_instruction": "Skann QR-koden med en annen enhet",
             "scan_qr_code": "Logg på med QR-kode",
-            "security_code": "Sikkerhetskode",
             "security_code_prompt": "Hvis du blir spurt, skriv inn koden nedenfor på den andre enheten.",
             "select_qr_code": "Velg \"%(scanQRCode)s»",
             "unsupported_explainer": "Din kontoleverandør støtter ikke pålogging på en ny enhet med en QR-kode.",
@@ -480,7 +466,6 @@
         "encrypted": "Kryptert",
         "error": "Feil",
         "faq": "Ofte Stilte Spørsmål",
-        "favourites": "Favoritter",
         "feedback": "Tilbakemelding",
         "filter_results": "Filtrerresultater",
         "forward_message": "Videresend melding",
@@ -488,7 +473,6 @@
         "go_to_settings": "Gå til Innstillinger",
         "guest": "Gjest",
         "help": "Hjelp",
-        "historical": "Historisk",
         "home": "Hjem",
         "homeserver": "Hjemmeserver",
         "identity_server": "Identitetstjener",
@@ -500,13 +484,11 @@
         "light": "Lys",
         "loading": "Laster inn …",
         "location": "Lokasjon",
-        "low_priority": "Lav prioritet",
         "matrix": "Matrix",
         "message": "Melding",
         "message_layout": "Meldingsoppsett",
         "message_timestamp_invalid": "Ugyldig tidsstempel",
         "microphone": "Mikrofon",
-        "model": "Modell",
         "moderation_and_safety": "Moderasjon og sikkerhet",
         "modern": "Moderne",
         "mute": "Demp",
@@ -566,7 +548,6 @@
         "success": "Vellykket",
         "suggestions": "Forslag",
         "support": "Brukerstøtte",
-        "system_alerts": "Systemvarsler",
         "theme": "Tema",
         "thread": "Tråd",
         "threads": "Tråder",
@@ -583,7 +564,6 @@
         "username": "Brukernavn",
         "verified": "Verifisert",
         "version": "Versjon",
-        "video": "Video",
         "video_room": "Videorom",
         "view_message": "Se melding",
         "warning": "Advarsel"
@@ -872,7 +852,6 @@
         "thread_root_id": "Trådens rot-ID: %(threadRootId)s",
         "threads_timeline": "Tidslinje for tråder",
         "title": "Utviklerverktøy",
-        "toggle_event": "slå av/på hendelse",
         "toolbox": "Verktøykasse",
         "use_at_own_risk": "Dette brukergrensesnittet kontrollerer IKKE verditypene. Bruk på egen risiko.",
         "user_avatar": "Avatar: %(avatar)s",
@@ -907,22 +886,6 @@
     },
     "dialog_close_label": "Lukk dialog",
     "download_completed": "Nedlasting fullført",
-    "emoji": {
-        "categories": "Kategorier",
-        "category_activities": "Aktiviteter",
-        "category_animals_nature": "Dyreliv og natur",
-        "category_flags": "Flagg",
-        "category_food_drink": "Mat og drikke",
-        "category_frequently_used": "Ofte brukte",
-        "category_objects": "Objekter",
-        "category_smileys_people": "Smilefjes og folk",
-        "category_symbols": "Symboler",
-        "category_travel_places": "Reise og steder",
-        "quick_reactions": "Hurtigreaksjoner"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Avbryt søket"
-    },
     "empty_room": "Tomt rom",
     "empty_room_was_name": "Tomt rom (var %(oldName)s)",
     "encryption": {
@@ -960,7 +923,6 @@
         "import_invalid_passphrase": "Autentiseringssjekk mislyktes: Feil passord?",
         "key_storage_out_of_sync": "Nøkkeloppbevaringen din er ikke synkronisert.",
         "key_storage_out_of_sync_description": "Bekreft gjenopprettingsnøkkelen for å opprettholde tilgang til nøkkellagring og meldingshistorikk.",
-        "message_shared_by": "%(displayName)s (%(userId)s) delte denne meldingen siden du ikke var i rommet da den ble sendt.",
         "messages_not_secure": {
             "cause_1": "Hjemmeserveren din",
             "cause_2": "Hjemmeserveren brukeren du bekrefter er koblet til",
@@ -986,19 +948,8 @@
         "set_up_recovery": "Sett opp gjenoppretting",
         "set_up_recovery_toast_description": "Generer en gjenopprettingsnøkkel som kan brukes til å gjenopprette den krypterte meldingshistorikken i tilfelle du mister tilgangen til enhetene dine.",
         "set_up_toast_title": "Sett opp sikker sikkerhetskopiering",
-        "setup_secure_backup": {
-            "explainer": "Ta sikkerhetskopi av nøklene dine før du logger av for å unngå å miste dem."
-        },
         "turn_on_key_storage": "Slå på nøkkeloppbevaring",
         "turn_on_key_storage_description": "Lagre din kryptografiske identitet og nøkler til meldinger sikkert på serveren. Dette gjør at du kan se historikken for meldinger på alle nye enheter.",
-        "udd": {
-            "interactive_verification_button": "Interaktiv verifisering ved hjelp av emoji",
-            "other_ask_verify_text": "Be denne brukeren om å bekrefte sesjonen sin, eller bekreft den manuelt nedenfor.",
-            "other_new_session_text": "%(name)s (%(userId)s) logget på en ny sesjon uten å bekrefte den:",
-            "own_ask_verify_text": "Verifiser den andre økten din med en av metodene nedenfor.",
-            "own_new_session_text": "Du logget på en ny økt uten å bekrefte den:",
-            "title": "Ikke betrodd"
-        },
         "unable_to_setup_keys_error": "Kan ikke sette opp nøkler",
         "verification": {
             "accepting": "Aksepterer …",
@@ -1512,7 +1463,6 @@
         "extended_profiles_msc_support": "Krever at serveren din støtter MSC4133",
         "feature_disable_call_per_sender_encryption": "Deaktiver kryptering per avsender for Element Call",
         "feature_wysiwyg_composer_description": "Bruk rik tekst i stedet for Markdown i meldingsskriveren.",
-        "group_calls": "Ny opplevelse for gruppesamtaler",
         "group_developer": "Utvikler",
         "group_encryption": "Kryptering",
         "group_experimental": "Eksperimentelt",
@@ -1527,7 +1477,6 @@
         "group_voip": "Stemme og video",
         "group_widgets": "Komponenter",
         "hidebold": "Skjul varslingspunkt (bare vise tellemerker)",
-        "html_topic": "Vis HTML-visning av romemner",
         "join_beta": "Bli med i betaen",
         "join_beta_reload": "Hvis du blir med i betaen, lastes %(brand)s på nytt.",
         "jump_to_date": "Gå til dato (legger til/jumptodate og hopp til datooverskrifter)",
@@ -1539,20 +1488,16 @@
         "location_share_live_description": "Midlertidig implementering. Plasseringer beholdes i romhistorikken.",
         "mjolnir": "Nye måter å ignorere folk på",
         "msc3531_hide_messages_pending_moderation": "La moderatorer skjule meldinger i påvente av moderering.",
-        "new_room_list": "Aktiver ny romliste",
         "notification_settings": "Nye varslingsinnstillinger",
         "notification_settings_beta_caption": "Vi introduserer en enklere måte å endre varslingsinnstillingene dine på. Tilpass %(brand)s, akkurat slik du vil.",
         "notification_settings_beta_title": "Innstillinger for varsler",
         "notifications": "Aktiver varslingspanelet i romoverskriften",
         "render_reaction_images": "Gjengi egendefinerte bilder i reaksjoner",
         "render_reaction_images_description": "Noen ganger omtalt som \"egendefinerte emojier\".",
-        "report_to_moderators": "Rapporter til moderatorene",
-        "report_to_moderators_description": "I rom som støtter moderering, kan du bruke \"Rapporter\"-knappen for å rapportere misbruk til rommoderatorene.",
         "sliding_sync": "Sliding Sync modus",
         "sliding_sync_description": "Under aktiv utvikling, kan ikke deaktiveres.",
         "sliding_sync_disabled_notice": "Logg ut og inn igjen for å deaktivere",
         "sliding_sync_server_no_support": "Serveren din mangler støtte",
-        "under_active_development": "Under aktiv utvikling.",
         "unrealiable_e2e": "Upålitelig i krypterte rom",
         "video_rooms": "Videorom",
         "video_rooms_a_new_way_to_chat": "En ny måte å chatte over tale og video i %(brand)s.",
@@ -1608,9 +1553,6 @@
         "room_rejoin_warning": "Dette rommet er ikke offentlig. Du vil ikke kunne bli med igjen uten en invitasjon.",
         "space_rejoin_warning": "Dette området er ikke offentlig. Du vil ikke kunne bli med igjen uten en invitasjon."
     },
-    "left_panel": {
-        "open_dial_pad": "Åpne nummerpanelet"
-    },
     "lightbox": {
         "rotate_left": "Roter til venstre",
         "rotate_right": "Roter til høyre",
@@ -1709,7 +1651,6 @@
         "mentions_and_keywords": "@mentions & nøkkelord",
         "mentions_and_keywords_description": "Bli varslet bare med omtaler og nøkkelord som konfigurert i <a> innstillingene dine </a>",
         "mentions_keywords": "Omtaler og nøkkelord",
-        "message_didnt_send": "Meldingen ble ikke sendt. Klikk for informasjon.",
         "mute_description": "Du vil ikke få noen varsler"
     },
     "notifier": {
@@ -1807,7 +1748,6 @@
     },
     "quick_settings": {
         "all_settings": "Alle innstillinger",
-        "metaspace_section": "Fest til sidepanel",
         "sidebar_settings": "Flere alternativer",
         "title": "Hurtiginnstillinger"
     },
@@ -1825,25 +1765,10 @@
     },
     "report_content": {
         "description": "Rapportering av denne meldingen vil sende sin unike 'hendelses-ID' til administratoren av hjemmeserveren din. Hvis meldinger i dette rommet er kryptert, vil ikke hjemmeserveradministratoren kunne lese meldingsteksten eller se noen filer eller bilder.",
-        "disagree": "Uenig",
-        "error_create_room_moderation_bot": "Kan ikke opprette rom med modereringsbot",
         "hide_messages_from_user": "Sjekk om du vil skjule alle nåværende og fremtidige meldinger fra denne brukeren.",
         "ignore_user": "Ignorer bruker",
-        "illegal_content": "Ulovlig innhold",
         "missing_reason": "Vennligst fyll ut hvorfor du rapporterer.",
-        "nature": "Velg en type og beskriv hva som gjør denne meldingen støtende.",
-        "nature_disagreement": "Det denne brukeren skriver er feil.\nDette vil bli rapportert til rommoderatorene.",
-        "nature_illegal": "Denne brukeren viser ulovlig oppførsel, for eksempel ved å utlevere mennesker eller true med vold.\nDette vil bli rapportert til rommoderatorene som kan eskalere dette til juridiske myndigheter.",
-        "nature_nonstandard_admin": "Dette rommet er dedikert til ulovlig eller giftig innhold, eller moderatorene klarer ikke å moderere ulovlig eller giftig innhold.\nDette vil bli rapportert til administratorene av%(homeserver)s.",
-        "nature_nonstandard_admin_encrypted": "Dette rommet er dedikert til ulovlig eller giftig innhold, eller moderatorene klarer ikke å moderere ulovlig eller giftig innhold.\nDette vil bli rapportert til administratorene av%(homeserver)s. Administratorene vil IKKE kunne lese det krypterte innholdet i dette rommet.",
-        "nature_other": "En hvilken som helst annen grunn. Vennligst beskriv problemet.\nDette vil bli rapportert til rommoderatorene.",
-        "nature_spam": "Denne brukeren spammer rommet med annonser, lenker til annonser eller til propaganda.\nDette vil bli rapportert til rommoderatorene.",
-        "nature_toxic": "Denne brukeren viser giftig oppførsel, for eksempel ved å fornærme andre brukere eller dele innhold kun for voksne i et familievennlig rom eller på annen måte bryte reglene i dette rommet.\nDette vil bli rapportert til rommoderatorene.",
-        "other_label": "Andre",
-        "report_content_to_homeserver": "Rapportere innhold til hjemmeserveradministratoren",
-        "report_entire_room": "Rapporter hele rommet",
-        "spam_or_propaganda": "Spam eller propaganda",
-        "toxic_behaviour": "Giftig oppførsel"
+        "report_content_to_homeserver": "Rapportere innhold til hjemmeserveradministratoren"
     },
     "report_room": {
         "description": "Rapporter dette rommet til hjemmeserveradministratoren din. Dette vil sende rommets unike ID, men hvis meldinger er kryptert, vil ikke administratoren kunne lese dem eller se delte filer.",
@@ -2117,40 +2042,16 @@
         "waiting_for_join_title": "Venter på at brukerne skal bli med %(brand)s"
     },
     "room_list": {
-        "add_room_label": "Legg til et rom",
         "add_space_label": "Legg til område",
-        "breadcrumbs_empty": "Ingen nylig besøkte rom",
-        "breadcrumbs_label": "Nylig besøkte rom",
         "failed_add_tag": "Kunne ikke legge til tagg %(tagName)s til rom",
         "failed_remove_tag": "Kunne ikke fjerne tagg %(tagName)s fra rommet",
         "failed_set_dm_tag": "Kan ikke sette kode på direktemeldingen",
-        "home_menu_label": "Hjem alternativer",
-        "join_public_room_label": "Bli med i offentlig rom",
-        "joining_rooms_status": {
-            "one": "Blir for øyeblikket med i %(count)s rom",
-            "other": "Blir for øyeblikket med i %(count)s rom"
-        },
         "list_title": "Romliste",
         "more_options": {
             "leave_room": "Forlat rommet"
         },
         "notification_options": "Varselsinnstillinger",
-        "redacting_messages_status": {
-            "one": "Fjerner for øyeblikket meldinger i %(count)s rom",
-            "other": "Fjerner for øyeblikket meldinger i %(count)s rom"
-        },
-        "show_less": "Vis mindre",
-        "show_n_more": {
-            "Vis %(count)s til": "Vis %(count)s mer"
-        },
-        "show_previews": "Vis forhåndsvisninger av meldinger",
-        "sort_by": "Sorter etter",
-        "sort_by_activity": "Aktivitet",
-        "sort_by_alphabet": "A-Å",
-        "sort_unread_first": "Vis rom med uleste meldinger først",
-        "space_menu_label": "",
-        "sublist_options": "Liste alternativer",
-        "suggested_rooms_heading": "Foreslåtte rom"
+        "show_less": "Vis mindre"
     },
     "room_settings": {
         "access": {
@@ -2858,7 +2759,6 @@
         "send_typing_notifications": "Send varsler om at du skriver",
         "sessions": {
             "best_security_note": "For best mulig sikkerhet bør du verifisere sesjonene dine og logge ut av alle sesjoner du ikke kjenner igjen eller ikke bruker lenger.",
-            "browser": "Nettleser",
             "confirm_sign_out": {
                 "one": "Bekreft at du logger av denne enheten",
                 "other": "Bekreft at du logger av disse enhetene"
@@ -2909,7 +2809,6 @@
             "no_sessions": "Ingen sesjoner funnet.",
             "no_unverified_sessions": "Ingen ubekreftede sesjoner funnet.",
             "no_verified_sessions": "Ingen verifiserte sesjoner funnet.",
-            "os": "Operativsystem",
             "other_sessions_heading": "Andre sesjoner",
             "push_heading": "Push-varsler",
             "push_subheading": "Motta push-varsler på denne sesjonen.",
@@ -2970,13 +2869,11 @@
         "showbold": "Vis all aktivitet i romlisten (prikker eller antall uleste meldinger)",
         "sidebar": {
             "dialog_title": "<strong>Innstillinger:</strong> Sidepanel",
-            "metaspaces_favourites_description": "Grupper alle dine favorittrom og -personer på ett sted.",
             "metaspaces_home_all_rooms": "Vis alle rom",
             "metaspaces_home_all_rooms_description": "Vis alle rommene dine i Hjem, selv om de er i et område.",
             "metaspaces_home_description": "Hjem er nyttig for å få oversikt over alt.",
             "metaspaces_orphans": "Rom utenfor et område",
             "metaspaces_orphans_description": "Grupper alle rommene dine som ikke er en del av et område på ett sted.",
-            "metaspaces_people_description": "Grupper alle dine personer på ett sted.",
             "metaspaces_subsection": "Områder å vise",
             "metaspaces_video_rooms": "Videorom og konferanser",
             "metaspaces_video_rooms_description": "Grupper alle private videorom og konferanser.",
@@ -3003,7 +2900,6 @@
             "audio_output": "Lydutdata",
             "audio_output_empty": "Ingen lydutdataer ble oppdaget",
             "auto_gain_control": "Automatisk forsterkningskontroll",
-            "connection_section": "Tilkobling",
             "dialog_title": "<strong>Innstillinger:</strong> Tale og video",
             "echo_cancellation": "Ekko-kansellering",
             "enable_fallback_ice_server": "Tillat reserveserver for anropsassistanse (%(server)s)",
@@ -3186,12 +3082,6 @@
     "space_settings": {
         "title": "Innstillinger - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Du har ikke tillatelse til å legge til rom på dette området",
-        "error_no_permission_add_space": "Du har ikke tillatelse til å legge til områder på dette området",
-        "error_no_permission_create_room": "Du har ikke tillatelse til å opprette nye rom på dette området",
-        "error_no_permission_invite": "Du har ikke tillatelse til å invitere folk til dette området"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Skriv inn navnet på en ny server du vil utforske.",
@@ -3318,7 +3208,6 @@
         "download_action_downloading": "Laster ned",
         "download_failed": "Nedlasting mislyktes",
         "download_failed_description": "Det oppstod en feil under nedlasting av denne filen",
-        "e2e_state": "Tilstand for ende-til-ende-kryptering",
         "edits": {
             "tooltip_label": "Redigert den %(date)s. Klikk for å se endringer.",
             "tooltip_sub": "Klikk for å vise redigeringer",
@@ -3400,9 +3289,7 @@
         "m.poll.start": "%(senderName)s har startet en avstemning - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s endret rommets avatar.",
-            "changed_img": "%(senderDisplayName)s endret rommets avatar til <img/>",
-            "lightbox_title": "%(senderDisplayName)s endret avataren for %(roomName)s",
-            "removed": "%(senderDisplayName)s fjernet romavataren."
+            "lightbox_title": "%(senderDisplayName)s endret avataren for %(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -4003,13 +3890,7 @@
         "close_to_view_right_panel": "Lukk denne widgeten for å se den i dette panelet",
         "context_menu": {
             "delete": "Slett modul",
-            "delete_warning": "Hvis du sletter en widget, fjernes den for alle brukere i dette rommet. Er du sikker på at du vil slette denne widgeten?",
-            "move_left": "Gå til venstre",
-            "move_right": "Gå til høyre",
-            "remove": "Fjern for alle",
-            "revoke": "Trekk tilbake rettigheter",
-            "screenshot": "Ta et bilde",
-            "start_audio_stream": "Start lydstrøm"
+            "delete_warning": "Hvis du sletter en widget, fjernes den for alle brukere i dette rommet. Er du sikker på at du vil slette denne widgeten?"
         },
         "cookie_warning": "Denne modulen bruker kanskje infokapsler.",
         "error_hangup_description": "Du ble koblet fra samtalen. (Feil:%(message)s)",
diff --git a/apps/web/src/i18n/strings/nl.json b/apps/web/src/i18n/strings/nl.json
index 55f058afa0..1a9d454543 100644
--- a/apps/web/src/i18n/strings/nl.json
+++ b/apps/web/src/i18n/strings/nl.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Emoji kiezer",
         "jump_first_invite": "Ga naar de eerste uitnodiging.",
         "message_composer": "Bericht opsteller",
         "n_unread_messages": {
@@ -11,8 +10,6 @@
             "other": "%(count)s ongelezen berichten, inclusief vermeldingen.",
             "one": "1 ongelezen vermelding."
         },
-        "recent_rooms": "Recente kamers",
-        "room_name": "Kamer %(name)s",
         "room_status_bar": "Kamerstatus balk",
         "seek_bar_label": "Audio zoekbalk",
         "unread_messages": "Ongelezen berichten."
@@ -22,7 +19,6 @@
         "accept": "Accepteren",
         "add": "Toevoegen",
         "add_existing_room": "Voeg bestaande kamer toeroom",
-        "add_people": "Personen toevoegen",
         "apply": "Toepassen",
         "approve": "Keur goed",
         "ask_to_join": "Vraag om toe te treden",
@@ -55,7 +51,6 @@
         "enter_fullscreen": "Volledig scherm openen",
         "exit_fullscreeen": "Volledig scherm verlaten",
         "expand": "Uitvouwen",
-        "explore_public_rooms": "Publieke kamers ontdekken",
         "explore_rooms": "Kamers ontdekken",
         "export": "Wegschrijven",
         "forward": "Doorsturen",
@@ -67,8 +62,6 @@
         "ignore": "Negeren",
         "import": "Inlezen",
         "invite": "Uitnodigen",
-        "invite_to_space": "Voor Space uitnodigen",
-        "invites_list": "Uitnodigingen",
         "join": "Deelnemen",
         "learn_more": "Lees verder",
         "leave": "Verlaten",
@@ -95,7 +88,6 @@
         "rename": "Hernoemen",
         "reply": "Beantwoorden",
         "reply_in_thread": "Reageer in draad",
-        "report_content": "Inhoud melden",
         "resend": "Opnieuw versturen",
         "reset": "Opnieuw instellen",
         "resume": "Hervatten",
@@ -113,8 +105,6 @@
         "sign_out": "Uitloggen",
         "skip": "Overslaan",
         "start": "Starten",
-        "start_chat": "Gesprek beginnen",
-        "start_new_chat": "Nieuwe chat beginnen",
         "stop": "Stop",
         "submit": "Bevestigen",
         "subscribe": "Abonneren",
@@ -201,10 +191,7 @@
         "log_in_new_account": "<a>Login</a> met je nieuwe account.",
         "logout_dialog": {
             "description": "Weet je zeker dat je wilt uitloggen?",
-            "megolm_export": "Sleutels handmatig wegschrijven",
             "setup_key_backup_title": "Je zal de toegang tot je versleutelde berichten verliezen",
-            "setup_secure_backup_description_1": "Versleutelde berichten zijn beveiligd met eind-tot-eind-versleuteling. Enkel de ontvanger(s) en jij hebben de sleutels om deze berichten te lezen.",
-            "setup_secure_backup_description_2": "Wanneer je jezelf afmeldt, worden deze sleutels van dit apparaat verwijderd, wat betekent dat je geen versleutelde berichten kunt lezen, tenzij je de sleutels ervoor op je andere apparaten hebt of er een back-up van hebt gemaakt op de server.",
             "skip_key_backup": "Ik wil mijn versleutelde berichten niet"
         },
         "misconfigured_body": "Vraag jouw %(brand)s-beheerder <a>je configuratie</a> na te kijken op onjuiste of dubbele items.",
@@ -394,14 +381,12 @@
         "encrypted": "Versleuteld",
         "error": "Fout",
         "faq": "FAQ",
-        "favourites": "Favorieten",
         "filter_results": "Resultaten filteren",
         "forward_message": "Bericht doorsturen",
         "general": "Algemeen",
         "go_to_settings": "Ga naar instellingen",
         "guest": "Gast",
         "help": "Hulp",
-        "historical": "Historisch",
         "home": "Thuis",
         "homeserver": "Homeserver",
         "identity_server": "Identiteitsserver",
@@ -413,12 +398,10 @@
         "light": "Helder",
         "loading": "Laden...",
         "location": "Locatie",
-        "low_priority": "Lage prioriteit",
         "matrix": "Matrix",
         "message": "Bericht",
         "message_layout": "Berichtlayout",
         "microphone": "Microfoon",
-        "model": "Model",
         "modern": "Modern",
         "mute": "Dempen",
         "n_members": {
@@ -471,7 +454,6 @@
         "success": "Klaar",
         "suggestions": "Suggesties",
         "support": "Ondersteuning",
-        "system_alerts": "Systeemmeldingen",
         "theme": "Thema",
         "thread": "Draad",
         "threads": "Onderwerpen",
@@ -486,7 +468,6 @@
         "username": "Inlognaam",
         "verified": "Geverifieerd",
         "version": "Versie",
-        "video": "Video",
         "video_room": "Video kamer",
         "view_message": "Bericht bekijken",
         "warning": "Let op"
@@ -647,7 +628,6 @@
         "show_hidden_events": "Verborgen gebeurtenissen op de tijdslijn weergeven",
         "state_key": "Toestandssleutel",
         "title": "Ontwikkelaarstools",
-        "toggle_event": "wissel gebeurtenis",
         "toolbox": "Gereedschap",
         "use_at_own_risk": "De UI heeft GEEN controle op het type van de waardes. Gebruik op eigen risico.",
         "value": "Waarde",
@@ -664,22 +644,6 @@
     },
     "dialog_close_label": "Dialoog sluiten",
     "download_completed": "Download voltooid",
-    "emoji": {
-        "categories": "Categorieën",
-        "category_activities": "Activiteiten",
-        "category_animals_nature": "Dieren en natuur",
-        "category_flags": "Vlaggen",
-        "category_food_drink": "Eten en drinken",
-        "category_frequently_used": "Vaak gebruikt",
-        "category_objects": "Objecten",
-        "category_smileys_people": "Smileys & Personen",
-        "category_symbols": "Symbolen",
-        "category_travel_places": "Reizen en plaatsen",
-        "quick_reactions": "Snelle reacties"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Zoeken annuleren"
-    },
     "empty_room": "Lege kamer",
     "empty_room_was_name": "Lege ruimte (was %(oldName)s)",
     "encryption": {
@@ -725,17 +689,6 @@
             "warning": "Als je de herstelmethode niet hebt verwijderd, is het mogelijk dat er een aanvaller toegang tot jouw account probeert te verkrijgen. Wijzig onmiddellijk je wachtwoord en stel bij instellingen een nieuwe herstelmethode in."
         },
         "set_up_toast_title": "Beveiligde back-up instellen",
-        "setup_secure_backup": {
-            "explainer": "Maak een back-up van je sleutels voordat je jezelf afmeldt om ze niet te verliezen."
-        },
-        "udd": {
-            "interactive_verification_button": "Interactief verifiëren door emoji",
-            "other_ask_verify_text": "Vraag deze persoon de sessie te verifiëren, of verifieer het handmatig hieronder.",
-            "other_new_session_text": "%(name)s%(userId)s heeft zich aangemeld bij een nieuwe sessie zonder deze te verifiëren:",
-            "own_ask_verify_text": "Verifieer je andere sessie op een van onderstaande wijzen.",
-            "own_new_session_text": "Je hebt je bij een nog niet geverifieerde sessie aangemeld:",
-            "title": "Niet vertrouwd"
-        },
         "unable_to_setup_keys_error": "Kan geen sleutels instellen",
         "verification": {
             "accepting": "Toestaan…",
@@ -1109,7 +1062,6 @@
         "click_for_info": "Klik voor meer info",
         "custom_themes": "Maatwerkthema's ondersteuning",
         "element_call_video_rooms": "Element Call videokamers",
-        "group_calls": "Nieuwe ervaring voor groepsgesprekken",
         "group_developer": "Ontwikkelaar",
         "group_encryption": "Versleuteling",
         "group_experimental": "Experimenteel",
@@ -1118,7 +1070,6 @@
         "group_rooms": "Kamers",
         "group_themes": "Thema's",
         "group_voip": "Spraak & video",
-        "html_topic": "HTML-weergave van kamer onderwerpen weergeven",
         "join_beta": "Beta inschakelen",
         "join_beta_reload": "Door deel te nemen aan de bèta wordt %(brand)s opnieuw geladen.",
         "jump_to_date": "Ga naar datum (voegt /jumptodate en spring naar datum headers toe)",
@@ -1176,9 +1127,6 @@
         "room_rejoin_warning": "Dit is geen publieke kamer. Slechts op uitnodiging zal je opnieuw kunnen toetreden.",
         "space_rejoin_warning": "Deze Space is niet publiek. Zonder uitnodiging zal je niet opnieuw kunnen toetreden."
     },
-    "left_panel": {
-        "open_dial_pad": "Kiestoetsen openen"
-    },
     "lightbox": {
         "rotate_left": "Links draaien",
         "rotate_right": "Rechts draaien"
@@ -1259,7 +1207,6 @@
         "mentions_and_keywords": "@vermeldingen & trefwoorden",
         "mentions_and_keywords_description": "Krijg alleen meldingen met vermeldingen en trefwoorden zoals ingesteld in je <a>instellingen</a>",
         "mentions_keywords": "Vermeldingen & trefwoorden",
-        "message_didnt_send": "Bericht is niet verstuur. Klik voor meer info.",
         "mute_description": "Je krijgt geen meldingen"
     },
     "notifier": {
@@ -1334,7 +1281,6 @@
     },
     "quick_settings": {
         "all_settings": "Instellingen",
-        "metaspace_section": "Vastprikken aan zijbalk",
         "sidebar_settings": "Meer opties",
         "title": "Snelle instellingen"
     },
@@ -1350,21 +1296,10 @@
     },
     "report_content": {
         "description": "Dit bericht melden zal zijn unieke ‘gebeurtenis-ID’ versturen naar de beheerder van jouw homeserver. Als de berichten in deze kamer versleuteld zijn, zal de beheerder van jouw homeserver het bericht niet kunnen lezen, noch enige bestanden of afbeeldingen zien.",
-        "disagree": "Niet mee eens",
         "hide_messages_from_user": "Vink aan als je alle huidige en toekomstige berichten van deze persoon wilt verbergen.",
         "ignore_user": "Negeer persoon",
-        "illegal_content": "Illegale Inhoud",
         "missing_reason": "Geef aan waarom je deze melding indient.",
-        "nature": "Kies een reden en beschrijf wat dit bericht kwetsend maakt.",
-        "nature_disagreement": "Wat deze persoon schrijft is verkeerd.\nDit zal worden gerapporteerd aan de kamermoderators.",
-        "nature_illegal": "Deze persoon vertoont illegaal gedrag, bijvoorbeeld door doxing van personen of te dreigen met geweld.\nDit zal gerapporteerd worden aan de moderators van deze kamer die dit kunnen doorzetten naar de gerechtelijke autoriteiten.",
-        "nature_other": "Een andere reden. Beschrijf alstublieft het probleem.\nDit zal gerapporteerd worden aan de kamermoderators.",
-        "nature_spam": "Deze persoon spamt de kamer met advertenties, links naar advertenties of propaganda.\nDit zal gerapporteerd worden aan de moderators van deze kamer.",
-        "other_label": "Overige",
-        "report_content_to_homeserver": "Inhoud melden aan de beheerder van jouw homeserver",
-        "report_entire_room": "Rapporteer het hele kamer",
-        "spam_or_propaganda": "Spam of propaganda",
-        "toxic_behaviour": "Giftig Gedrag"
+        "report_content_to_homeserver": "Inhoud melden aan de beheerder van jouw homeserver"
     },
     "restore_key_backup_dialog": {
         "count_of_decryption_failures": "Ontsleutelen van %(failedCount)s sessies is mislukt!",
@@ -1528,36 +1463,12 @@
         }
     },
     "room_list": {
-        "add_room_label": "Kamer toevoegen",
         "add_space_label": "Space toevoegen",
-        "breadcrumbs_empty": "Geen onlangs bezochte kamers",
-        "breadcrumbs_label": "Onlangs geopende kamers",
         "failed_add_tag": "Toevoegen van %(tagName)s-label aan kamer is mislukt",
         "failed_remove_tag": "Verwijderen van %(tagName)s-label van kamer is mislukt",
         "failed_set_dm_tag": "Kan tag voor direct bericht niet instellen",
-        "home_menu_label": "Home-opties",
-        "join_public_room_label": "Publieke kamer toetreden",
-        "joining_rooms_status": {
-            "one": "Momenteel aan het toetreden tot %(count)s kamer",
-            "other": "Momenteel aan het toetreden tot %(count)s kamers"
-        },
         "notification_options": "Meldingsinstellingen",
-        "redacting_messages_status": {
-            "one": "Momenteel berichten in %(count)s kamer aan het verwijderen",
-            "other": "Momenteel berichten in %(count)s kamers aan het verwijderen"
-        },
-        "show_less": "Minder tonen",
-        "show_n_more": {
-            "one": "Toon %(count)s meer",
-            "other": "Toon %(count)s meer"
-        },
-        "show_previews": "Voorvertoning van berichten inschakelen",
-        "sort_by": "Sorteer op",
-        "sort_by_activity": "Activiteit",
-        "sort_unread_first": "Kamers met ongelezen berichten als eerste tonen",
-        "space_menu_label": "%(spaceName)s-menu",
-        "sublist_options": "Lijstopties",
-        "suggested_rooms_heading": "Kamersuggesties"
+        "show_less": "Minder tonen"
     },
     "room_settings": {
         "access": {
@@ -2082,7 +1993,6 @@
             "no_sessions": "Geen sessies gevonden.",
             "no_unverified_sessions": "Geen niet-geverifieerde sessies gevonden.",
             "no_verified_sessions": "Geen geverifieerde sessies gevonden.",
-            "os": "Besturingssysteem",
             "other_sessions_heading": "Andere sessies",
             "push_heading": "Pushmeldingen",
             "push_subheading": "Ontvang pushmeldingen voor deze sessie.",
@@ -2124,13 +2034,11 @@
         "show_stickers_button": "Stickers-knop tonen",
         "show_typing_notifications": "Typmeldingen weergeven",
         "sidebar": {
-            "metaspaces_favourites_description": "Groepeer al je favoriete kamers en mensen op één plek.",
             "metaspaces_home_all_rooms": "Alle kamers tonen",
             "metaspaces_home_all_rooms_description": "Toon al je kamers in Home, zelfs als ze al in een space zitten.",
             "metaspaces_home_description": "Home is handig om een overzicht van alles te krijgen.",
             "metaspaces_orphans": "Kamers buiten een space",
             "metaspaces_orphans_description": "Groepeer al je kamers die geen deel uitmaken van een space op één plaats.",
-            "metaspaces_people_description": "Groepeer al je mensen op één plek.",
             "metaspaces_subsection": "Spaces om te tonen",
             "title": "Zijbalk"
         },
@@ -2299,12 +2207,6 @@
     "space_settings": {
         "title": "Instellingen - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Je hebt geen toestemming om kamers toe te voegen in deze Space",
-        "error_no_permission_add_space": "Je bent niet gemachtigd om spaces aan deze space toe te voegen",
-        "error_no_permission_create_room": "Je hebt geen toestemming om kamers te maken in deze Space",
-        "error_no_permission_invite": "Je hebt geen toestemming om personen in deze Space uit te nodigen"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Voer de naam in van een nieuwe server die je wilt ontdekken.",
@@ -2485,9 +2387,7 @@
         "m.poll.start": "%(senderName)s is een poll gestart - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s veranderde de kamerafbeelding.",
-            "changed_img": "%(senderDisplayName)s heeft de kamerafbeelding aangepast naar <img/>",
-            "lightbox_title": "%(senderDisplayName)s heeft de afbeelding van %(roomName)s veranderd",
-            "removed": "%(senderDisplayName)s heeft de kamerafbeelding verwijderd."
+            "lightbox_title": "%(senderDisplayName)s heeft de afbeelding van %(roomName)s veranderd"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3032,13 +2932,7 @@
         "close_to_view_right_panel": "Sluit deze widget om het in dit paneel weer te geven",
         "context_menu": {
             "delete": "Widget verwijderen",
-            "delete_warning": "Widgets verwijderen geldt voor alle deelnemers aan deze kamer. Weet je zeker dat je deze widget wilt verwijderen?",
-            "move_left": "Ga naar links",
-            "move_right": "Ga naar rechts",
-            "remove": "Verwijderen voor iedereen",
-            "revoke": "Machtigingen intrekken",
-            "screenshot": "Neem een foto",
-            "start_audio_stream": "Audiostream starten"
+            "delete_warning": "Widgets verwijderen geldt voor alle deelnemers aan deze kamer. Weet je zeker dat je deze widget wilt verwijderen?"
         },
         "cookie_warning": "Deze widget kan cookies gebruiken.",
         "error_hangup_description": "De verbinding is verbroken van uw oproep. (Error: %(message)s)",
diff --git a/apps/web/src/i18n/strings/pl.json b/apps/web/src/i18n/strings/pl.json
index 7d40fcaa68..44fb15a293 100644
--- a/apps/web/src/i18n/strings/pl.json
+++ b/apps/web/src/i18n/strings/pl.json
@@ -1,18 +1,17 @@
 {
     "a11y": {
-        "emoji_picker": "Selektor emoji",
         "jump_first_invite": "Przejdź do pierwszego zaproszenia.",
         "message_composer": "Kompozytor wiadomości",
         "n_unread_messages": {
-            "other": "%(count)s nieprzeczytanych wiadomości.",
-            "one": "1 nieprzeczytana wiadomość."
+            "one": "1 nieprzeczytana wiadomość.",
+            "few": "%(count)s nieprzeczytane wiadomości.",
+            "many": "%(count)s nieprzeczytanych wiadomości."
         },
         "n_unread_messages_mentions": {
-            "other": "%(count)s nieprzeczytanych wiadomości, wliczając wzmianki.",
-            "one": "1 nieprzeczytana wzmianka."
+            "one": "1 nieprzeczytana wzmianka.",
+            "few": "%(count)s nieprzeczytane wiadomości lub wzmianki.",
+            "many": "%(count)s nieprzeczytanych wiadomości lub wzmianek."
         },
-        "recent_rooms": "Ostatnie pokoje",
-        "room_name": "Pokój %(name)s",
         "room_status_bar": "Pasek stanu pokoju",
         "seek_bar_label": "Pasek wyszukiwania audio",
         "unread_messages": "Nieprzeczytane wiadomości."
@@ -22,7 +21,6 @@
         "accept": "Akceptuję",
         "add": "Dodaj",
         "add_existing_room": "Dodaj istniejący pokój",
-        "add_people": "Dodaj osoby",
         "apply": "Zastosuj",
         "approve": "Zatwierdź",
         "ask_to_join": "Poproś o dołączenie",
@@ -49,7 +47,7 @@
         "deny": "Odmów",
         "disable": "Wyłącz",
         "disconnect": "Rozłącz",
-        "dismiss": "Pomiń",
+        "dismiss": "Zamknij",
         "done": "Gotowe",
         "download": "Pobierz",
         "edit": "Edytuj",
@@ -57,9 +55,8 @@
         "enter_fullscreen": "Otwórz w trybie pełnoekranowym",
         "exit_fullscreeen": "Wyjdź z trybu pełnoekranowego",
         "expand": "Rozwiń",
-        "explore_public_rooms": "Przeglądaj pokoje publiczne",
         "explore_rooms": "Przeglądaj pokoje",
-        "export": "Eksport",
+        "export": "Eksportuj",
         "forward": "Przekaż",
         "go": "Przejdź",
         "go_back": "Wróć",
@@ -69,8 +66,6 @@
         "ignore": "Ignoruj",
         "import": "Importuj",
         "invite": "Zaproś",
-        "invite_to_space": "Zaproś do przestrzeni",
-        "invites_list": "Zaproszenia",
         "join": "Dołącz",
         "learn_more": "Dowiedz się więcej",
         "leave": "Opuść",
@@ -97,7 +92,6 @@
         "rename": "Zmień nazwę",
         "reply": "Odpowiedz",
         "reply_in_thread": "Odpowiedz w wątku",
-        "report_content": "Zgłoś treść",
         "report_room": "Zgłoś pokój",
         "resend": "Wyślij jeszcze raz",
         "reset": "Resetuj",
@@ -117,8 +111,6 @@
         "sign_out": "Usuń to urządzenie",
         "skip": "Pomiń",
         "start": "Rozpocznij",
-        "start_chat": "Rozpocznij czat",
-        "start_new_chat": "Nowy czat",
         "stop": "Zatrzymaj",
         "submit": "Wyślij",
         "subscribe": "Subskrybuj",
@@ -174,7 +166,7 @@
         "autodiscovery_unexpected_error_hs": "Nieoczekiwany błąd przy ustalaniu konfiguracji serwera domowego",
         "autodiscovery_unexpected_error_is": "Nieoczekiwany błąd przy ustalaniu konfiguracji serwera tożsamości",
         "captcha_description": "Serwer domowy prosi o potwierdzenie, że nie jesteś robotem.",
-        "change_password_action": "Zmień Hasło",
+        "change_password_action": "Zmień hasło",
         "change_password_confirm_invalid": "Hasła nie zgadzają się",
         "change_password_confirm_label": "Potwierdź hasło",
         "change_password_current_label": "Aktualne hasło",
@@ -204,7 +196,7 @@
         "failed_connect_identity_server_other": "Możesz się zalogować, lecz niektóre funkcje nie będą dostępne dopóki Serwer Tożsamości nie będzie znów online. Jeśli ciągle widzisz to ostrzeżenie, sprawdź swoją konfigurację lub skontaktuj się z administratorem serwera.",
         "failed_connect_identity_server_register": "Możesz się zarejestrować, lecz niektóre funkcje nie będą dostępne dopóki Serwer Tożsamości nie będzie znów online. Jeśli ciągle widzisz to ostrzeżenie, sprawdź swoją konfigurację lub skontaktuj się z administratorem serwera.",
         "failed_connect_identity_server_reset_password": "Możesz zresetować hasło, lecz niektóre funkcje nie będą dostępne dopóki Serwer Tożsamości nie będzie znów online. Jeśli ciągle widzisz to ostrzeżenie, sprawdź swoją konfigurację lub skontaktuj się z administratorem serwera.",
-        "failed_homeserver_discovery": "Nie udało się rozpocząć odkrywania serwerów domowych",
+        "failed_homeserver_discovery": "Nie udało się odkryć serwerów domowych",
         "failed_query_registration_methods": "Nie można uzyskać wspieranych metod rejestracji.",
         "failed_soft_logout_auth": "Nie udało się uwierzytelnić ponownie",
         "failed_soft_logout_homeserver": "Nie udało się uwierzytelnić ponownie z powodu błędu serwera domowego",
@@ -218,15 +210,13 @@
         "incorrect_password": "Nieprawidłowe hasło",
         "log_in_new_account": "<a>Zaloguj się</a> do nowego konta.",
         "logout_dialog": {
-            "description": "Czy na pewno chcesz się wylogować?",
-            "megolm_export": "Ręcznie eksportuj klucze",
-            "setup_key_backup_title": "Utracisz dostęp do swoich wiadomości szyfrowanych",
-            "setup_secure_backup_description_1": "Wiadomości szyfrowane są zabezpieczone szyfrowaniem end-to-end. Tylko Ty i Twój odbiorca mają klucze, aby je wyświetlić.",
-            "setup_secure_backup_description_2": "Po wylogowaniu, te klucze zostaną usunięte z urządzenia, co oznacza, że nie będziesz w stanie czytać wiadomości szyfrowanych, chyba że posiadasz je na swoich innych urządzeniach lub zapisałeś je na serwerze.",
-            "skip_key_backup": "Nie chcę moich zaszyfrowanych wiadomości"
+            "description": "Czy na pewno chcesz usunąć to urządzenie?",
+            "setup_key_backup_title": "Zamierzasz utracić dostęp do swoich zaszyfrowanych czatów",
+            "setup_secure_backup_description": "To jest twoje jedyne urządzenie. Jeśli je usuniesz, będziesz potrzebować klucza przywracania, aby potwierdzić swoją tożsamość cyfrową i przywrócić zaszyfrowane czaty przy następnym logowaniu.",
+            "skip_key_backup": "Usuń urządzenie mimo to"
         },
         "misconfigured_body": "Poproś swojego administratora %(brand)s by sprawdzić <a>Twoją konfigurację</a> względem niewłaściwych lub zduplikowanych elementów.",
-        "misconfigured_title": "Twój %(brand)s jest źle skonfigurowany",
+        "misconfigured_title": "%(brand)s jest źle skonfigurowany",
         "mobile_create_account_title": "Zamierzasz utworzyć konto na%(hsName)s",
         "msisdn_field_description": "Inni użytkownicy mogą Cię zaprosić do pokoi za pomocą Twoich danych kontaktowych",
         "msisdn_field_label": "Telefon",
@@ -246,10 +236,12 @@
         "phone_optional_label": "Telefon (opcjonalny)",
         "qr_code_login": {
             "check_code_explainer": "Bezpieczeństwo połączenia z urządzeniem zostanie sprawdzone.",
-            "check_code_heading": "Wprowadź numer wyświetlany na drugim urządzeniu",
+            "check_code_heading": "Wprowadź numer widoczny na drugim urządzeniu",
             "check_code_input_label": "2-cyfrowy kod",
             "check_code_mismatch": "Liczby się nie zgadzają",
+            "choose_desktop_computer": "Wybierz \"%(desktopComputer)s\"",
             "completing_setup": "Kończenie konfiguracji nowego urządzenia",
+            "desktop_computer": "Komputer stacjonarny",
             "error_etag_missing": "Wystąpił nieoczekiwany błąd. Może to być spowodowane rozszerzeniem przeglądarki, serwerem proxy lub błędną konfiguracją serwera.",
             "error_expired": "Logowanie wygasło. Spróbuj ponownie.",
             "error_expired_title": "Logowanie nie zostało zakończone na czas",
@@ -270,16 +262,22 @@
             "error_user_declined": "Ty lub Twój dostawca konta odrzucił żądanie logowania.",
             "error_user_declined_title": "Logowanie odrzucone",
             "follow_remaining_instructions": "Postępuj zgodnie z pozostałymi instrukcjami, aby zweryfikować Twoje inne urządzenie",
-            "open_element_other_device": "Otwórz %(brand)s na innym urządzeniu",
+            "open_element_mobile_device": "Otwórz %(brand)s na swoim urządzeniu mobilnym",
+            "open_element_other_device": "Otwórz %(brand)s na drugim urządzeniu",
             "point_the_camera": "Skieruj kamerę na pokazany tutaj kod QR",
-            "scan_code_instruction": "Skanuj kod QR za pomocą innego urządzenia",
+            "ready_to_scan": "Gotowy do skanowania",
+            "scan_code_instruction": "Skanuj kod QR",
+            "scan_code_instruction_reciprocate": "Zeskanuj kod QR drugim urządzeniem",
             "scan_qr_code": "Zaloguj się kodem QR",
-            "security_code": "Kod bezpieczeństwa",
-            "security_code_prompt": "Jeśli zostaniesz poproszony, wprowadź poniższy kod na drugim urządzeniu.",
+            "security_code_prompt": "Twój dostawca konta może poprosić o podany kod w celu weryfikacji logowania.",
+            "security_code_title": "Twój kod weryfikacyjny",
             "select_qr_code": "Wybierz '%(scanQRCode)s'",
+            "select_ready_to_scan": "Wybierz \"%(readyToScan)s\" i zeskanuj kod QR widoczny tutaj",
+            "start_over": "Zacznij od nowa",
+            "tap_avatar_link_new_device": "Kliknij swój awatar i wybierz \"%(linkNewDevice)s\"",
             "unsupported_explainer": "Twój dostawca konta nie obsługuje logowania nowego urządzenia za pomocą kodu QR.",
             "unsupported_heading": "Kod QR nie jest wspierany",
-            "waiting_for_device": "Oczekiwanie na logowanie urządzenia"
+            "waiting_for_device": "Oczekiwanie na drugie urządzenie"
         },
         "register_action": "Utwórz konto",
         "registration": {
@@ -295,16 +293,16 @@
         "registration_username_validation": "Użyj tylko małych liter, cyfr, myślników i podkreśleń",
         "reset_password": {
             "confirm_new_password": "Potwierdź nowe hasło",
-            "devices_logout_success": "Zostałeś wylogowany z wszystkich urządzeń i przestaniesz otrzymywać powiadomienia push. Aby włączyć powiadomienia, zaloguj się ponownie na każdym urządzeniu.",
-            "other_devices_logout_warning_1": "Wylogowanie Twoich urządzeń spowoduje usunięcie wszystkich kluczy szyfrujących, które się na nich znajdują, uniemożliwiając czytanie historii wiadomości szyfrowanych.",
-            "other_devices_logout_warning_2": "Jeśli chcesz zachować dostęp do historii czatu w zaszyfrowanych pokojach, przed kontynuacją skonfiguruj kopię zapasową kluczy lub wyeksportuj klucze wiadomości z innego urządzenia.",
+            "devices_logout_success": "Wszystkie Twoje urządzenia zostały usunięte i nie będą już otrzymywać powiadomień push. Aby włączyć ponownie powiadomienia, zaloguj się na każdym urządzeniu z powrotem.",
+            "other_devices_logout_warning_1": "Usunięcie Twoich urządzeń spowoduje usunięcie wszystkich kluczy szyfrujących, które się na nich znajdują, uniemożliwiając czytanie zaszyfrowanej historii wiadomości.",
+            "other_devices_logout_warning_2": "Jeśli chcesz zachować dostęp do historii czatu w zaszyfrowanych pokojach, przed kontynuacją utwórz klucz przywracania lub wyeksportuj klucze wiadomości z innego urządzenia.",
             "password_not_entered": "Musisz wprowadzić nowe hasło.",
             "passwords_mismatch": "Nowe hasła muszą się zgadzać.",
             "rate_limit_error": "Za dużo prób w krótkim odstępie czasu. Odczekaj trochę, zanim spróbujesz ponownie.",
             "rate_limit_error_with_time": "Za dużo prób w krótkim odstępie czasu. Spróbuj ponownie za%(timeout)s.",
             "reset_successful": "Twoje hasło zostało zresetowane.",
             "return_to_login": "Wróć do ekranu logowania",
-            "sign_out_other_devices": "Wyloguj się z wszystkich urządzeń"
+            "sign_out_other_devices": "Usuń pozostałe urządzenia"
         },
         "reset_password_action": "Resetuj hasło",
         "reset_password_button": "Nie pamiętasz hasła?",
@@ -316,7 +314,7 @@
         "server_picker_custom": "Inne serwery domowe",
         "server_picker_description": "Możesz użyć niestandardowych opcji serwera, aby zalogować się na inny serwer Matrix, wprowadzając inny adres URL serwera. Umożliwi Ci to na korzystanie z %(brand)s z istniejącym już kontem Matrix na innym serwerze domowym.",
         "server_picker_description_matrix.org": "Dołącz do milionów za darmo na największym publicznym serwerze",
-        "server_picker_dialog_title": "Decyduj, gdzie Twoje konto jest hostowane",
+        "server_picker_dialog_title": "Decyduj, gdzie chcesz hostować swoje konto",
         "server_picker_explainer": "Korzystaj z wybranego przez Ciebie serwera domowego Matrix lub hostuj swój własny.",
         "server_picker_failed_validate_homeserver": "Nie można zweryfikować serwera domowego",
         "server_picker_intro": "Kontaktujemy się z miejscami, gdzie możesz założyć swoje konto tzw. 'serwery domowe'.",
@@ -327,8 +325,8 @@
         "server_picker_title": "Zaloguj się do swojego serwera domowego",
         "server_picker_title_default": "Opcje serwera",
         "server_picker_title_registration": "Przechowuj konto na",
-        "session_logged_out_description": "Ze względów bezpieczeństwa ta sesja została wylogowana. Zaloguj się jeszcze raz.",
-        "session_logged_out_title": "Wylogowano",
+        "session_logged_out_description": "Ze względów bezpieczeństwa ta sesja została usunięta. Zaloguj się jeszcze raz.",
+        "session_logged_out_title": "Sesja została usunięta",
         "set_email": {
             "description": "To pozwoli Ci zresetować Twoje hasło i otrzymać powiadomienia.",
             "verification_pending_description": "Sprawdź swój e-mail i kliknij link w nim zawarty. Kiedy już to zrobisz, kliknij \"kontynuuj\".",
@@ -338,8 +336,10 @@
         "sign_in_description": "Użyj swojego konta, aby kontynuować.",
         "sign_in_instead": "Zamiast tego zaloguj się",
         "sign_in_instead_prompt": "Masz już konto? <a>Zaloguj się tutaj </a>",
+        "sign_in_manually": "Zaloguj się ręcznie",
         "sign_in_or_register": "Zaloguj się lub utwórz konto",
         "sign_in_or_register_description": "Użyj konta lub utwórz nowe, aby kontynuować.",
+        "sign_in_with_qr": "Zaloguj się kodem QR",
         "sign_in_with_sso": "Zaloguj się za pomocą pojedynczego logowania",
         "signing_in": "Logowanie…",
         "soft_logout": {
@@ -367,8 +367,8 @@
             "email_resent": "Wysłano ponownie!",
             "fallback_button": "Rozpocznij uwierzytelnienie",
             "mas_cross_signing_reset_cta": "Przejdź do swojego konta",
-            "mas_cross_signing_reset_description": "Zresetuj swoją tożsamość za pośrednictwem dostawcy konta, a następnie wróć i kliknij „Spróbuj ponownie”.",
-            "mas_cross_signing_reset_title": "Przejdź do swojego konta, aby zresetować swoją tożsamość",
+            "mas_cross_signing_reset_description": "Zaraz zostaniesz przeniesiony na swoje konto %(serverName)s, aby zresetować swoją tożsamość cyfrową. Po zresetowaniu konta wróć tutaj i kliknij Ponów.",
+            "mas_cross_signing_reset_title": "Przejdź do swojego konta, aby zresetować swoją tożsamość cyfrową",
             "msisdn": "Wysłano wiadomość tekstową do %(msisdn)s",
             "msisdn_token_incorrect": "Niepoprawny token",
             "msisdn_token_prompt": "Wpisz kod, który jest tam zawarty:",
@@ -401,7 +401,7 @@
         "create_new_issue": "<newIssueLink>Utwórz nowe zgłoszenie</newIssueLink> na GitHubie, abyśmy mogli zbadać ten błąd.",
         "description": "Dzienniki debugowania zawierają dane o korzystaniu z aplikacji, w tym nazwę użytkownika, identyfikatory lub aliasy odwiedzonych pokoi, elementy interfejsu użytkownika, z którymi ostatnio wchodziłeś w interakcje oraz nazwy innych użytkowników. Nie zawierają treści wiadomości.",
         "download_logs": "Pobierz dzienniki",
-        "downloading_logs": "Pobieranie logów",
+        "downloading_logs": "Pobieram dzienniki",
         "error_empty": "Powiedz nam, co poszło nie tak, lub nawet lepiej - utwórz zgłoszenie na platformie GitHub, które opisuje problem.",
         "failed_download_logs": "Nie udało się pobrać dzienników debugowania: ",
         "failed_send_logs_causes": {
@@ -479,18 +479,16 @@
         "edited": "edytowane",
         "email_address": "Adres e-mail",
         "emoji": "Emoji",
-        "encrypted": "Szyfrowanie",
+        "encrypted": "Szyfrowany",
         "error": "Błąd",
         "faq": "Najczęściej zadawane pytania",
-        "favourites": "Ulubione",
-        "feedback": "Feedback",
+        "feedback": "Opinia użytkownika",
         "filter_results": "Filtruj wyniki",
         "forward_message": "Przekaż wiadomość",
         "general": "Ogólne",
         "go_to_settings": "Przejdź do ustawień",
         "guest": "Gość",
         "help": "Pomoc",
-        "historical": "Historyczne",
         "home": "Główna",
         "homeserver": "Serwer domowy",
         "identity_server": "Serwer tożsamości",
@@ -498,17 +496,16 @@
         "integration_manager": "Menedżer integracji",
         "joined": "Dołączono",
         "labs": "Laboratoria",
+        "legacy_voice_and_video_settings": "Połączenia Matrix 1:1 (starsza wersja)",
         "legal": "Zasoby prawne",
         "light": "Jasny",
         "loading": "Wczytywanie…",
         "location": "Lokalizacja",
-        "low_priority": "Niski priorytet",
         "matrix": "Matrix",
         "message": "Wiadomość",
         "message_layout": "Wygląd wiadomości",
         "message_timestamp_invalid": "Nieprawidłowy znacznik czasu",
         "microphone": "Mikrofon",
-        "model": "Model",
         "moderation_and_safety": "Moderacja i bezpieczeństwo",
         "modern": "Współczesny",
         "mute": "Wycisz",
@@ -519,7 +516,8 @@
         },
         "n_rooms": {
             "one": "%(count)s pokój",
-            "other": "%(count)s pokojów"
+            "few": "%(count)s pokoje",
+            "many": "%(count)s pokoi"
         },
         "name": "Nazwa",
         "no_results": "Brak wyników",
@@ -563,12 +561,12 @@
         "someone": "Ktoś",
         "space": "Przestrzeń",
         "spaces": "Przestrzenie",
+        "state_encryption_enabled": "Eksperymentalne szyfrowanie włączone",
         "sticker": "Naklejka",
         "stickerpack": "Pakiet naklejek",
         "success": "Sukces",
         "suggestions": "Propozycje",
         "support": "Wsparcie",
-        "system_alerts": "Alerty systemowe",
         "theme": "Motyw",
         "thread": "Wątek",
         "threads": "Wątki",
@@ -585,7 +583,6 @@
         "username": "Nazwa użytkownika",
         "verified": "Zweryfikowane",
         "version": "Wersja",
-        "video": "Wideo",
         "video_room": "Pokój wideo",
         "view_message": "Wyświetl wiadomość",
         "warning": "Ostrzeżenie"
@@ -665,10 +662,12 @@
         "join_rule_knock_label": "Każdy może poprosić o dołączenie, lecz administratorzy lub moderacja muszą przyznać zezwolenie. Można zmienić to później.",
         "join_rule_public_label": "Każdy będzie mógł znaleźć i dołączyć do tego pokoju.",
         "join_rule_public_parent_space_label": "Każdy będzie mógł znaleźć i dołączyć do tego pokoju, nie tylko członkowie <SpaceName/>.",
-        "join_rule_restricted": "Widoczne dla członków przestrzeni",
-        "join_rule_restricted_label": "Każdy w <SpaceName/> będzie mógł znaleźć i dołączyć do tego pokoju.",
+        "join_rule_restricted": "Standardowy",
+        "join_rule_restricted_label": "Każdy w <SpaceName/> może dołączyć.",
         "name_validation_required": "Proszę podać nazwę pokoju",
         "room_visibility_label": "Widoczność pokoju",
+        "state_encrypted_warning": "Włącza eksperymentalne wsparcie dla szyfrowania zdarzeń stanowych, które ukrywa przed serwerem metadane, takie jak nazwy pokoi i tematy. Te metadane będą również ukryte przed osobami dołączającymi do pokoi później oraz osobami, których klient nie obsługuje standardu MSC4362.",
+        "state_encryption_label": "Szyfruj zdarzenia stanowe",
         "title_private_room": "Utwórz prywatny pokój",
         "title_public_room": "Utwórz publiczny pokój",
         "title_video_room": "Utwórz pokój wideo",
@@ -679,21 +678,24 @@
         "unsupported_version": "Serwer nie wspiera tej wersji pokoju."
     },
     "create_section_dialog": {
-        "edit_section": "Edytuj sekcję",
+        "create_section": "Utwórz sekcję",
+        "description": "Sekcje są tylko dla Ciebie",
+        "label": "Nazwa sekcji",
+        "title": "Utwórz sekcję",
         "title_edition": "Edytuj sekcję"
     },
     "create_space": {
         "add_details_prompt": "Dodaj trochę szczegółów, aby ludzie mogli ją łatwo rozpoznać.",
         "add_details_prompt_2": "Możesz to zmienić w każdej chwili.",
         "add_existing_rooms_description": "Wybierz pokoje lub konwersacje do dodania. Ta przestrzeń jest wyłącznie dla Ciebie, nikt o niej nie wie. Możesz dodać więcej później.",
-        "add_existing_rooms_heading": "Co chcesz organizować?",
+        "add_existing_rooms_heading": "Co chcesz zorganizować?",
         "address_label": "Adres",
         "address_placeholder": "np. moja-przestrzen",
         "creating": "Tworzenie…",
         "creating_rooms": "Tworzenie pokojów…",
         "done_action": "Przejdź do mojej przestrzeni",
         "done_action_first_room": "Przejdź do mojego pierwszego pokoju",
-        "explainer": "Przestrzenie to nowy sposób na grupowanie pokojów i osób. Jaki rodzaj przestrzeni chcesz utworzyć? Możesz zmienić to później.",
+        "explainer": "Przestrzenie to sposób na organizację i odkrywanie pokoi. Jaki rodzaj przestrzeni chcesz stworzyć?",
         "failed_create_initial_rooms": "Nie udało się utworzyć początkowych pokoi przestrzeni",
         "failed_invite_users": "Nie udało się zaprosić następujących użytkowników do przestrzeni: %(csvUsers)s",
         "invite_teammates_by_username": "Zaproś przez nazwę użytkownika",
@@ -704,20 +706,20 @@
         "name_required": "Podaj nazwę dla przestrzeni",
         "personal_space": "Tylko ja",
         "personal_space_description": "Prywatna przestrzeń do organizacji Twoich pokoi",
-        "private_description": "Tylko na zaproszenie, najlepsza dla siebie lub zespołów",
+        "private_description": "Tylko na zaproszenie, dla Ciebie lub Twojego zespołu",
         "private_heading": "Twoja prywatna przestrzeń",
         "private_only_heading": "Twoja przestrzeń",
         "private_personal_description": "Upewnij się, że odpowiednie osoby mają dostęp do %(name)s",
         "private_personal_heading": "Z kim pracujesz?",
         "private_space": "Ja i moi koledzy z drużyny",
         "private_space_description": "Prywatna przestrzeń dla Ciebie i Twoich kolegów z drużyny",
-        "public_description": "Przestrzeń otwarta dla każdego, najlepsza dla społeczności",
+        "public_description": "Każdy może dołączyć, zalecane dla społeczności",
         "public_heading": "Twoja publiczna przestrzeń",
         "search_public_button": "Szukaj przestrzeni publicznych",
-        "setup_rooms_community_description": "Utwórzmy pokój dla każdego z nich.",
+        "setup_rooms_community_description": "Na początek stwórzmy kilka pokoi.",
         "setup_rooms_community_heading": "O jakich rzeczach będziesz chciał dyskutować w %(spaceName)s?",
-        "setup_rooms_description": "W przyszłości będziesz mógł dodać więcej, włączając już istniejące.",
-        "setup_rooms_private_description": "Utworzymy pokój dla każdego z nich.",
+        "setup_rooms_description": "Później możesz dodać do przestrzeni więcej pomieszczeń, włączając w to już istniejące.",
+        "setup_rooms_private_description": "Na początek stwórzmy kilka pokoi.",
         "setup_rooms_private_heading": "Nad jakimi projektami pracuje Twój zespół?",
         "share_description": "Aktualnie jesteś tu tylko Ty, będzie jeszcze lepiej, jak dołączą inni.",
         "share_heading": "Udostępnij %(name)s",
@@ -730,7 +732,7 @@
         "subspace_join_rule_invite_only": "Przestrzeń prywatna (tylko na zaproszenie)",
         "subspace_join_rule_label": "Widoczność przestrzeni",
         "subspace_join_rule_public_description": "Każdy będzie mógł znaleźć i dołączyć do tej przestrzeni, nie tylko członkowie <SpaceName/>.",
-        "subspace_join_rule_restricted_description": "Każdy w <SpaceName/> będzie mógł znaleźć i dołączyć."
+        "subspace_join_rule_restricted_description": "Każdy w <SpaceName/> może dołączyć."
     },
     "credits": {
         "default_cover_photo": "Autorem <photo>domyślnego zdjęcia okładkowego</photo> jest <author>Jesús Roncero</author> na licencji <terms>CC-BY-SA 4.0</terms>.",
@@ -773,7 +775,7 @@
             "cross_signing_public_keys_on_device_status": "Weryfikacja krzyżowa kluczy publicznych:",
             "cross_signing_ready": "Weryfikacja krzyżowa jest gotowa do użycia.",
             "cross_signing_status": "Status weryfikacji krzyżowej:",
-            "cross_signing_untrusted": "Twoje konto ma tożsamość weryfikacji krzyżowej w sekretnym magazynie, ale nie jest jeszcze zaufane przez tę sesję.",
+            "cross_signing_untrusted": "Twoje konto posiada tożsamość cyfrową w sekretnym magazynie, ale ta sesja nie uznała jej jeszcze za zaufaną.",
             "crypto_not_available": "Moduł kryptograficzny nie jest dostępny",
             "device_id": "ID urządzenia",
             "key_backup_active_version": "Aktywna wersja kopii zapasowej:",
@@ -795,6 +797,17 @@
         },
         "developer_mode": "Tryb programisty",
         "developer_tools": "Narzędzia programistyczne",
+        "device_dehydrated_no": "Odwodniony: Nie",
+        "device_dehydrated_yes": "Odwodniony: Tak",
+        "device_id": "ID urządzenia: %(deviceId)s",
+        "device_keys": "Klucze urządzenia",
+        "device_verification_status": {
+            "signed_by_owner": "Status weryfikacji: <E2EIcon /> Podpisane przez właściciela",
+            "unknown": "Status weryfikacji: Nieznany",
+            "unverified": "Status weryfikacji: <E2EIcon /> Brak podpisu właściciela",
+            "verified": "Status weryfikacji: <E2EIcon /> Zweryfikowano przez podpis krzyżowy"
+        },
+        "devices": "Urządzenia kryptograficzne (%(count)s)",
         "edit_setting": "Edytuj ustawienie",
         "edit_values": "Edytuj wartości",
         "empty_string": "<empty string>",
@@ -804,6 +817,8 @@
         "event_id": "ID wydarzenia: %(eventId)s",
         "event_sent": "Wydarzenie wysłane!",
         "event_type": "Typ wydarzenia",
+        "expired": "Wygasło",
+        "expires_in": "Wygasa za",
         "explore_account_data": "Przeglądaj dane konta",
         "explore_room_account_data": "Przeglądaj dane konta pokoju",
         "explore_room_state": "Przeglądaj stan pokoju",
@@ -813,10 +828,11 @@
         "failed_to_save": "Nie udało się zapisać ustawień.",
         "failed_to_send": "Nie udało się wysłać wydarzenia!",
         "id": "ID: ",
+        "invalid_device_key_id": "Nieprawidłowy identyfikator klucza urządzenia",
         "invalid_json": "Nie wygląda to na prawidłowy JSON.",
         "level": "Poziom",
         "low_bandwidth_mode": "Tryb niskiej przepustowości",
-        "low_bandwidth_mode_description": "Wymaga kompatybilnego serwera domowego.",
+        "low_bandwidth_mode_description": "Wyłącza szyfrowanie, statusy aktywności, awatary, potwierdzenia przeczytania i powiadomienie o pisaniu",
         "main_timeline": "Główna oś czasu",
         "manual_device_verification": "Ręczna weryfikacja urządzenia",
         "no_receipt_found": "Nie znaleziono potwierdzenia",
@@ -824,7 +840,9 @@
         "notification_state": "Status powiadomień <strong>%(notificationState)s</strong>",
         "notifications_debug": "Debug powiadomień",
         "number_of_users": "Liczba użytkowników",
+        "only_joined_members": "Tylko użytkownicy, którzy dołączyli",
         "original_event_source": "Oryginalne źródło wydarzenia",
+        "restore_from_backup": "Przywróć z kopii zapasowej",
         "room_encrypted": "Pokój jest <strong>szyfrowany ✅</strong>",
         "room_id": "ID pokoju: %(roomId)s",
         "room_not_encrypted": "Pokój nie jest <strong>szyfrowany 🚨</strong>",
@@ -873,13 +891,27 @@
         "thread_root_id": "ID Root Wątku:%(threadRootId)s",
         "threads_timeline": "Oś czasu wątków",
         "title": "Ustawienia deweloperskie",
-        "toggle_event": "przełącz wydarzenie",
         "toolbox": "Przybornik",
         "use_at_own_risk": "Ten interfejs nie sprawdza typów wartości. Używaj na własne ryzyko.",
+        "user_avatar": "Awatar: %(avatar)s",
+        "user_displayname": "Wyświetlana nazwa: %(displayname)s",
+        "user_id": "ID użytkownika: %(userId)s",
+        "user_identity": "Tożsamość kryptograficzna",
+        "user_identity_unknown": "Nieznany",
+        "user_no_avatar": "Awatar: <i>Brak</i>",
+        "user_no_displayname": "Wyświetlana nazwa: <i>Brak</i>",
         "user_read_up_to": "Użytkownik czyta do: ",
         "user_read_up_to_ignore_synthetic": "Użytkownik przeczytał do (ignoreSynthetic): ",
         "user_read_up_to_private": "Użytkownik przeczytał do (m.read.private): ",
         "user_read_up_to_private_ignore_synthetic": "Użytkownik przeczytał do (m.read.private;ignoreSynthetic): ",
+        "user_room_membership": "Członkostwo: %(membership)s",
+        "user_verification_status": {
+            "identity_changed": "Status weryfikacji: <E2EIcon /> Niezweryfikowany oraz zmieniona tożsamość cyfrowa",
+            "unverified": "Status weryfikacji: <E2EIcon /> Niezweryfikowany",
+            "verified": "Status weryfikacji: <E2EIcon /> Zweryfikowany",
+            "was_verified": "Status weryfikacji:<E2EIcon /> Zweryfikowany, ale tożsamość cyfrowa uległa zmianie"
+        },
+        "users": "Użytkownicy",
         "value": "Wartość",
         "value_colon": "Wartość:",
         "value_in_this_room": "Wartość w tym pokoju",
@@ -895,22 +927,6 @@
     },
     "dialog_close_label": "Zamknij okno dialogowe",
     "download_completed": "Pobieranie zakończone",
-    "emoji": {
-        "categories": "Kategorie",
-        "category_activities": "Aktywności",
-        "category_animals_nature": "Zwierzęta i natura",
-        "category_flags": "Flagi",
-        "category_food_drink": "Żywność i napoje",
-        "category_frequently_used": "Często używane",
-        "category_objects": "Przedmioty",
-        "category_smileys_people": "Buźki i osoby",
-        "category_symbols": "Symbole",
-        "category_travel_places": "Podróże i miejsca",
-        "quick_reactions": "Szybkie reakcje"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Anuluj wyszukiwanie"
-    },
     "empty_room": "Pusty pokój",
     "empty_room_was_name": "Pusty pokój (poprzednio %(oldName)s)",
     "encryption": {
@@ -927,6 +943,7 @@
         "bootstrap_title": "Konfigurowanie kluczy",
         "confirm_encryption_setup_body": "Kliknij przycisk poniżej, aby potwierdzić ustawienie szyfrowania.",
         "confirm_encryption_setup_title": "Potwierdź ustawienie szyfrowania",
+        "continue_with_reset": "Kontynuuj resetowanie",
         "cross_signing_room_normal": "Ten pokój jest szyfrowany end-to-end",
         "cross_signing_room_verified": "Wszyscy w tym pokoju są zweryfikowani",
         "cross_signing_room_warning": "Ktoś używa nieznanej sesji",
@@ -942,16 +959,17 @@
         "event_shield_reason_unverified_identity": "Zaszyfrowano przez niezweryfikowanego użytkownika",
         "export_unsupported": "Twoja przeglądarka nie wspiera wymaganych rozszerzeń kryptograficznych",
         "forgot_recovery_key": "Nie pamiętasz klucza przywracania?",
+        "identity_needs_reset_description": "Zresetuj swoją tożsamość cyfrową, by utrzymać dostęp do historii czatów.",
         "import_invalid_keyfile": "Niepoprawny plik klucza %(brand)s",
-        "import_invalid_passphrase": "Próba autentykacji nieudana: nieprawidłowe hasło?",
+        "import_invalid_passphrase": "Próba uwierzytelnienia nieudana: błędne hasło?",
         "key_storage_out_of_sync": "Twój magazyn kluczy nie jest zsynchronizowany.",
         "key_storage_out_of_sync_description": "Potwierdź klucz przywracania, aby zachować dostęp do magazynu kluczy i historii wiadomości.",
         "messages_not_secure": {
             "cause_1": "Twój serwer domowy",
-            "cause_2": "Użytkownik, którego weryfikujesz jest połączony z serwerem domowym",
+            "cause_2": "Serwer domowy użytkownika, którego weryfikujesz",
             "cause_3": "Połączenie internetowe Twoje lub innych użytkowników",
             "cause_4": "Sesja Twoja lub innych użytkowników",
-            "heading": "Jedno z wymienionych mogło zostać zdradzone:",
+            "heading": "Mogło dojść do naruszenia bezpieczeństwa na którymś z wymienionych:",
             "title": "Twoje wiadomości nie są bezpieczne"
         },
         "new_recovery_method_detected": {
@@ -960,30 +978,19 @@
             "title": "Nowy sposób odzyskiwania",
             "warning": "Jeżeli nie ustawiłeś nowej metody odzyskiwania, atakujący może uzyskać dostęp do Twojego konta. Zmień hasło konta i natychmiast ustaw nową metodę odzyskiwania w Ustawieniach."
         },
-        "pinned_identity_changed": "Tożsamość %(displayName)s (<b>%(userId)s</b>) została zresetowana. <a>Dowiedz się więcej</a>",
-        "pinned_identity_changed_no_displayname": "Tożsamość <b>%(userId)s</b> została zresetowana. <a>Dowiedz się więcej</a>",
+        "pinned_identity_changed": "Tożsamość cyfrowa %(displayName)s (<b>%(userId)s</b>) została zresetowana. <a>Dowiedz się więcej</a>",
+        "pinned_identity_changed_no_displayname": "Cyfrowa tożsamość <b>%(userId)s</b> została zresetowana. <a>Dowiedz się więcej</a>",
         "recovery_method_removed": {
-            "description_1": "Ta sesja wykryła, że Twoja fraza bezpieczeństwa i klucz dla bezpiecznych wiadomości zostały usunięte.",
+            "description_1": "W tej sesji wykryto, że Twoja fraza bezpieczeństwa i klucz dla bezpiecznych wiadomości zostały usunięte.",
             "description_2": "Jeśli zrobiłeś to przez pomyłkę, możesz ustawić bezpieczne wiadomości w tej sesji, co zaszyfruje ponownie historię wiadomości za pomocą nowej metody odzyskiwania.",
             "title": "Usunięto metodę odzyskiwania",
             "warning": "Jeśli nie usunąłeś metody odzyskiwania, atakujący może próbować dostać się na Twoje konto. Zmień hasło konta i natychmiast ustaw nową metodę odzyskiwania w Ustawieniach."
         },
-        "set_up_recovery": "Skonfiguruj przywracanie",
-        "set_up_recovery_toast_description": "Wygeneruj klucz przywracania, którego można użyć do przywrócenia zaszyfrowanej historii wiadomości w przypadku utraty dostępu do swoich urządzeń.",
+        "set_up_recovery": "Utwórz kopię zapasową swoich czatów",
+        "set_up_recovery_toast_description": "Twoje czaty są automatycznie archiwizowane za pomocą szyfrowania end-to-end. Aby przywrócić tę kopię zapasową i swoją tożsamość cyfrową, wymagany będzie klucz przywracania.",
         "set_up_toast_title": "Skonfiguruj bezpieczną kopię zapasową",
-        "setup_secure_backup": {
-            "explainer": "Utwórz kopię zapasową kluczy przed wylogowaniem, aby ich nie utracić."
-        },
         "turn_on_key_storage": "Włącz magazyn kluczy",
-        "turn_on_key_storage_description": "Bezpiecznie przechowuj swoją tożsamość kryptograficzną i klucze wiadomości na serwerze. Umożliwi to przeglądanie historii wiadomości na każdym nowym urządzeniu.",
-        "udd": {
-            "interactive_verification_button": "Zweryfikuj interaktywnie za pomocą emoji",
-            "other_ask_verify_text": "Poproś go/ją o zweryfikowanie tej sesji bądź zweryfikuj ją osobiście poniżej.",
-            "other_new_session_text": "%(name)s%(userId)s zalogował się do nowej sesji bez zweryfikowania jej:",
-            "own_ask_verify_text": "Zweryfikuj swoje pozostałe sesje używając jednej z opcji poniżej.",
-            "own_new_session_text": "Zalogowałeś się do nowej sesji bez jej zweryfikowania:",
-            "title": "Niezaufany"
-        },
+        "turn_on_key_storage_description": "Dzięki temu będziesz mógł przeglądać historię czatów na nowych urządzeniach. Jest to również wymagane do tworzenia kopii zapasowych i tożsamości cyfrowej.",
         "unable_to_setup_keys_error": "Nie można ustawić kluczy",
         "verification": {
             "accepting": "Akceptowanie…",
@@ -992,14 +999,14 @@
                 "skip_verification": "Pomiń weryfikację na razie",
                 "verify_this_device": "Zweryfikuj to urządzenie"
             },
-            "cancelled_verification": "Albo upłynął limit czasu oczekiwania, żądanie zostało odrzucone, albo wystąpiła niezgodność w trakcie weryfikacji.",
+            "cancelled_verification": "Upłynął limit czasu żądania, żądanie zostało odrzucone lub wystąpił błąd weryfikacji.",
             "cancelling": "Anulowanie…",
             "cant_confirm": "Nie możesz potwierdzić?",
             "complete_action": "Zrobione",
             "complete_description": "Pomyślnie zweryfikowałeś tego użytkownika.",
             "complete_title": "Zweryfikowano!",
             "confirm_identity_description": "Zweryfikuj to urządzenie, aby ustawić bezpieczną komunikację",
-            "confirm_identity_title": "Potwierdź swoją tożsamość",
+            "confirm_identity_title": "Potwierdź swoją tożsamość cyfrową",
             "confirm_the_emojis": "Upewnij się, że emoji poniżej pasują do tych pokazanych na innej sesji.",
             "error_starting_description": "Nie byliśmy w stanie rozpocząć czatu z innym użytkownikiem.",
             "error_starting_title": "Wystąpił błąd w trakcie weryfikacji",
@@ -1028,7 +1035,7 @@
             },
             "no_support_qr_emoji": "Urządzenie, które próbujesz zweryfikować nie wspiera skanowania kodu QR lub weryfikacji emoji, czyli tego co obsługuje %(brand)s. Spróbuj użyć innego klienta.",
             "now_you_can": "Teraz możesz bezpiecznie czytać i wysyłać wiadomości, a każdy z kim czatujesz również może ufać temu urządzeniu.",
-            "once_accepted_can_continue": "Po zaakceptowaniu będziesz mógł kontynuować weryfikację.",
+            "once_accepted_can_continue": "Po zaakceptowaniu rozpocznie się proces weryfikacji.",
             "other_party_cancelled": "Druga strona anulowała weryfikację.",
             "prompt_encrypted": "Zweryfikuj wszystkich użytkowników w pokoju, aby upewnić się, że jest bezpieczny.",
             "prompt_unencrypted": "W pokojach szyfrowanych, zweryfikuj wszystkich użytkowników, aby upewnić się, że są bezpieczne.",
@@ -1083,10 +1090,10 @@
             "waiting_other_user": "Oczekiwanie na weryfikację przez %(displayName)s…"
         },
         "verification_requested_toast_title": "Zażądano weryfikacji",
-        "verified_identity_changed": "Tożsamość %(displayName)s (<b>%(userId)s</b>) została zresetowana. <a>Dowiedz się więcej</a>",
-        "verified_identity_changed_no_displayname": "Tożsamość <b>%(userId)s</b> została zresetowana. <a>Dowiedz się więcej</a>",
-        "verify_toast_description": "Inni użytkownicy mogą temu nie ufać",
-        "verify_toast_title": "Zweryfikuj tę sesję",
+        "verified_identity_changed": "Cyfrowa tożsamość %(displayName)s (<b>%(userId)s</b>) została zresetowana. <a>Dowiedz się więcej</a>",
+        "verified_identity_changed_no_displayname": "Cyfrowa tożsamość <b>%(userId)s</b> została zresetowana. <a>Dowiedz się więcej</a>",
+        "verify_toast_description": "Z końcem października 2026r. urządzenia niezweryfikowane utracą możliwość wysyłania oraz odbierania wiadomości. <a>Dowiedz się więcej</a>",
+        "verify_toast_title": "Zweryfikuj to urządzenie",
         "withdraw_verification_action": "Wycofaj weryfikację"
     },
     "error": {
@@ -1111,15 +1118,15 @@
         "non_urgent_echo_failure_toast": "Twój serwer nie odpowiada na niektóre <a>zapytania</a>.",
         "resource_limits": "Ten serwer przekroczył jeden z limitów.",
         "session_restore": {
-            "clear_storage_button": "Wyczyść pamięć i wyloguj się",
-            "clear_storage_description": "Wylogować się i usunąć klucze szyfrowania?",
-            "description_1": "Napotkaliśmy błąd podczas przywracania poprzedniej sesji.",
+            "clear_storage_button": "Usuń to urządzenie",
+            "clear_storage_description": "Usunąć to urządzenie wraz z jego kluczami szyfrowania?",
+            "description_1": "Napotkaliśmy błąd podczas próby przywrócenia Twojej sesji.",
             "description_2": "Jeśli wcześniej używałeś/aś nowszej wersji %(brand)s, Twoja sesja może być niekompatybilna z tą wersją. Zamknij to okno i powróć do nowszej wersji.",
-            "description_3": "Wyczyszczenie pamięci przeglądarki może rozwiązać problem, ale wyloguje Cię i spowoduje, że jakakolwiek zaszyfrowana historia czatu stanie się nieczytelna.",
+            "description_3": "Wyczyszczenie danych przeglądarki może rozwiązać problem, ale usunie to urządzenie i sprawi, że cała zaszyfrowana historia czatów stanie się nieczytelna.",
             "title": "Przywrócenie sesji jest niemożliwe"
         },
         "something_went_wrong": "Coś poszło nie tak!",
-        "storage_evicted_description_1": "Brakuje niektórych danych sesji, w tym zaszyfrowanych kluczy wiadomości. Wyloguj się i zaloguj, aby to naprawić, przywracając klucze z kopii zapasowej.",
+        "storage_evicted_description_1": "Nie udało się znaleźć kluczy szyfrujących wiadomości i niektórych danych sesji. Usuń to urządzenie i zaloguj się ponownie, aby przywrócić klucze z kopii zapasowej i naprawić ten problem.",
         "storage_evicted_description_2": "Twoja przeglądarka prawdopodobnie usunęła te dane, kiedy brakowało jej miejsca.",
         "storage_evicted_title": "Brakujące dane sesji",
         "sync": "Nie można połączyć się z serwerem domowym. Ponawianie…",
@@ -1242,7 +1249,7 @@
         "topic": "Temat: %(topic)s",
         "unload_confirm": "Czy na pewno chcesz wyjść podczas tego eksportu?"
     },
-    "failed_load_async_component": "Nie można załadować! Sprawdź połączenie sieciowe i spróbuj ponownie.",
+    "failed_load_async_component": "Nie udało się załadować zawartości! Sprawdź połączenie sieciowe i spróbuj ponownie.",
     "feedback": {
         "can_contact_label": "Wyrażam zgodę na kontakt ze mną, jeśli są jakiekolwiek pytania",
         "comment_label": "Komentarz",
@@ -1498,24 +1505,31 @@
         "bridge_state_manager": "Ten mostek jest zarządzany przez <user />.",
         "bridge_state_workspace": "Obszar roboczy: <networkLink/>",
         "click_for_info": "Kliknij po więcej informacji",
+        "config_only": "Może zostać włączony tylko poprzez config.json.",
         "currently_experimental": "Aktualnie eksperymentalne.",
         "custom_themes": "Obsługa dodawania niestandardowych motywów",
         "dynamic_room_predecessors": "Dynamiczne poprzedniki pokoju",
         "dynamic_room_predecessors_description": "Włącz MSC3946 (dla opóźnionych archiwów pokoju)",
         "element_call_video_rooms": "Pokoje rozmów wideo Element Call",
+        "encrypted_state_events": "Szyfrowane zdarzenia stanowe (MSC4362)",
+        "encrypted_state_events_description": "Włącza eksperymentalne wsparcie dla szyfrowania zdarzeń stanowych, które ukrywa przed serwerem metadane, takie jak nazwy pokoi i tematy. Te metadane będą również ukryte przed osobami dołączającymi do pokoi później oraz osobami, których klient nie obsługuje standardu MSC4362.",
         "exclude_insecure_devices": "Wyklucz niezabezpieczone urządzenia wysyłając/odbierając wiadomości",
         "exclude_insecure_devices_description": "Gdy ten tryb jest włączony, wiadomości szyfrowane nie zostaną udostępnione niezweryfikowanym urządzeniom, a wiadomości odbierane od tych urządzeń wyświetlą błąd. Należy pamiętać, że jeśli włączysz ten tryb, możesz nie być w stanie komunikować się z użytkownikami, którzy nie zweryfikowali swoich urządzeń.",
         "experimental_description": "Chcesz poeksperymentować? Wypróbuj nasze najnowsze pomysły w trakcie rozwoju. Przedstawione funkcje nie zostały w pełni ukończone; mogą być niestabilne; mogą się zmienić lub zostać kompletnie porzucone. <a>Dowiedz się więcej</a>.",
         "experimental_section": "Wczesny podgląd",
         "extended_profiles_msc_support": "Wymaga, aby Twój serwer obsługiwał MSC4133",
         "feature_disable_call_per_sender_encryption": "Wyłącz szyfrowanie nadawcy dla Element Call",
+        "feature_retention": {
+            "description": "Automatycznie usuwaj wiadomości po upływie ustawionego czasu wygaśnięcia. Obecnie obsługiwane są tylko ustawienia czytania.",
+            "disabled_sliding_sync": "Nie można ustawić czasu wygaśnięcia wiadomości, gdy opcja Sliding Sync jest włączona.",
+            "display_name": "Limit czasu wiadomości"
+        },
         "feature_user_status": {
             "description": "Pozwala wyświetlić i ustawić aktualny status.",
             "display_name": "Status użytkownika",
             "required_msc_support": "Wymaga MSC4429 (aktualizacje profilu dla starszej wersji synchronizacji)"
         },
         "feature_wysiwyg_composer_description": "Użyj bogatego edytora tekstu zamiast edytora Markdown podczas tworzenia wiadomości.",
-        "group_calls": "Nowe wrażenia rozmów grupowych",
         "group_developer": "Deweloper",
         "group_encryption": "Szyfrowanie",
         "group_experimental": "Eksperymentalne",
@@ -1530,7 +1544,6 @@
         "group_voip": "Głos i wideo",
         "group_widgets": "Widżety",
         "hidebold": "Ukryj kropkę powiadomienia (wyświetlaj tylko licznik plakietek)",
-        "html_topic": "Pokaż reprezentację HTML tematów pokojów",
         "join_beta": "Dołącz do bety",
         "join_beta_reload": "Dołączenie do bety, wczyta ponownie %(brand)s.",
         "jump_to_date": "Przeskocz do daty (dodaje /jumptodate oraz nagłówki przeskakiwania do dat)",
@@ -1540,23 +1553,22 @@
         "leave_beta_reload": "Opuszczenie bety, wczyta ponownie %(brand)s.",
         "location_share_live": "Udostępnianie lokalizacji na żywo",
         "location_share_live_description": "Implementacja tymczasowa. Lokalizacje są zapisywane w historii pokoju.",
+        "login_with_qr": "Zaloguj się kodem QR",
         "mjolnir": "Nowe sposoby na ignorowanie osób",
         "msc3531_hide_messages_pending_moderation": "Daj moderatorom ukrycie wiadomości które są sprawdzane.",
-        "new_room_list": "Włącz nową listę pokojów",
         "notification_settings": "Ustawienia nowych powiadomień",
         "notification_settings_beta_caption": "Przedstawiamy prostszy sposób zmiany ustawień powiadomień. Dostosuj %(brand)s wedle swojego upodobania.",
         "notification_settings_beta_title": "Ustawienia powiadomień",
         "notifications": "Włącz panel powiadomień w nagłówku pokoju.",
         "render_reaction_images": "Renderuj niestandardowe obrazy w reakcjach",
         "render_reaction_images_description": "Czasami określane jako \"emoji niestandardowe\".",
-        "report_to_moderators": "Zgłoś do moderatorów",
-        "report_to_moderators_description": "W pokojach, które wspierają moderacje, przycisk \"Zgłoś\" pozwoli Ci zgłosić nadużycia moderatorom.",
         "sliding_sync": "Tryb Sliding sync",
         "sliding_sync_description": "W trakcie aktywnego rozwoju, nie można wyłączyć.",
         "sliding_sync_disabled_notice": "Zaloguj się ponownie, aby wyłączyć",
         "sliding_sync_server_no_support": "Twój serwer nie ma wsparcia",
-        "under_active_development": "W trakcie aktywnego rozwoju.",
         "unrealiable_e2e": "Problematyczny w pokojach szyfrowanych",
+        "url_preview_bundle": "Pakiet podglądu adresów URL (MSC4095)",
+        "url_preview_bundle_description": "Wysyłaj podglądy adresów URL wraz z treścią w wiadomościach",
         "video_rooms": "Pokoje wideo",
         "video_rooms_a_new_way_to_chat": "Nowy sposób prowadzenia rozmów audio-wideo w %(brand)s.",
         "video_rooms_always_on_voip_channels": "Pokoje wideo są stale dostępnymi kanałami VoIP osadzonymi w pokoju w %(brand)s.",
@@ -1611,9 +1623,6 @@
         "room_rejoin_warning": "Ten pokój nie jest publiczny. Nie będziesz w stanie do niego dołączyć bez zaproszenia.",
         "space_rejoin_warning": "Ta przestrzeń nie jest publiczna. Nie będziesz w stanie dołączyć bez zaproszenia."
     },
-    "left_panel": {
-        "open_dial_pad": "Otwórz klawiaturę numeryczną"
-    },
     "lightbox": {
         "rotate_left": "Obróć w lewo",
         "rotate_right": "Obróć w prawo",
@@ -1710,10 +1719,9 @@
         "level_notification": "Powiadomienie",
         "level_unsent": "Niewysłane",
         "mark_all_read": "Oznacz wszystkie jako przeczytane",
-        "mentions_and_keywords": "@wzmianki & słowa kluczowe",
-        "mentions_and_keywords_description": "Otrzymuj powiadomienia tylko z wzmiankami i słowami kluczowymi zgodnie z Twoimi <a>ustawieniami</a>",
+        "mentions_and_keywords": "Tylko @wzmianki i odpowiedzi",
+        "mentions_and_keywords_description": "Otrzymuj powiadomienia tylko od wzmianek i słów kluczowych zgodnie z Twoimi <a>ustawieniami</a>",
         "mentions_keywords": "Wzmianki i słowa kluczowe",
-        "message_didnt_send": "Nie wysłano wiadomości. Kliknij po więcej informacji.",
         "mute_description": "Nie otrzymasz żadnych powiadomień"
     },
     "notifier": {
@@ -1723,7 +1731,7 @@
         "create_room": "Utwórz czat grupowy",
         "explore_rooms": "Przeglądaj pokoje publiczne",
         "has_avatar_label": "Świetnie, pomoże to innym Cię rozpoznać",
-        "intro_byline": "Bądź właścicielem swoich konwersacji.",
+        "intro_byline": "Stań się właścicielem swoich konwersacji.",
         "intro_welcome": "Witamy w %(appName)s",
         "no_avatar_label": "Dodaj zdjęcie, aby inni mogli Cię rozpoznać.",
         "send_dm": "Wyślij wiadomość prywatną",
@@ -1743,6 +1751,7 @@
         "end_message": "Ankieta została zakończona. Najlepsza odpowiedź: %(topAnswer)s",
         "end_message_no_votes": "Ankieta została zakończona. Nie został oddany żaden głos.",
         "end_title": "Zakończ ankietę",
+        "ended_poll_label": "Ankieta zakończona",
         "error_ending_description": "Przepraszamy, ankieta nie została zakończona. Spróbuj ponownie.",
         "error_ending_title": "Nie udało się zakończyć ankiety",
         "error_voting_description": "Przepraszamy, Twój głos nie został zarejestrowany, spróbuj ponownie.",
@@ -1750,21 +1759,35 @@
         "failed_send_poll_description": "Przepraszamy, ankieta, którą próbowałeś utworzyć nie została opublikowana.",
         "failed_send_poll_title": "Nie udało się opublikować ankiety",
         "notes": "Wyniki są ujawnione tylko po zakończeniu ankiety",
+        "option_label": "Opcja %(number)s, %(answer)s",
+        "option_label_winning_with_total": {
+            "one": "Opcja %(number)s, %(answer)s, opcja wygrywająca, %(count)s głos",
+            "few": "Opcja %(number)s, %(answer)s, opcja wygrywająca, %(count)s głosy",
+            "many": "Opcja %(number)s, %(answer)s, opcja wygrywająca, %(count)s głosów"
+        },
+        "option_label_with_total": {
+            "one": "Opcja %(number)s, %(answer)s, %(count)s głos",
+            "few": "Opcja %(number)s, %(answer)s, %(count)s głosy",
+            "many": "Opcja %(number)s, %(answer)s, %(count)s głosów"
+        },
         "options_add_button": "Dodaj opcję",
         "options_heading": "Utwórz opcje",
         "options_label": "Opcja %(number)s",
         "options_placeholder": "Napisz opcję",
+        "poll_label": "Ankieta",
         "topic_heading": "Jakie jest Twoje pytanie lub temat ankiety?",
         "topic_label": "Pytanie lub temat",
         "topic_placeholder": "Napisz coś…",
         "total_decryption_errors": "Ze względu na błędy rozszyfrowywania, niektóre głosy mogły nie zostać policzone",
         "total_n_votes": {
             "one": "Oddano %(count)s głos. Zagłosuj, aby zobaczyć wyniki",
-            "other": "Oddano %(count)s głosów. Zagłosuj, aby zobaczyć wyniki"
+            "few": "Oddano %(count)s głosy. Zagłosuj, aby zobaczyć wyniki",
+            "many": "Oddano %(count)s głosów. Zagłosuj, aby zobaczyć wyniki"
         },
         "total_n_votes_voted": {
             "one": "Oparte na %(count)s głosie",
-            "other": "Oparte na %(count)s głosach"
+            "few": "Oparte na %(count)s głosach",
+            "many": "Oparte na %(count)s głosach"
         },
         "total_no_votes": "Brak głosów",
         "total_not_ended": "Wyniki będą widoczne po zakończeniu ankiety",
@@ -1800,7 +1823,6 @@
     },
     "quick_settings": {
         "all_settings": "Wszystkie ustawienia",
-        "metaspace_section": "Przypnij do paska bocznego",
         "sidebar_settings": "Więcej opcji",
         "title": "Szybkie ustawienia"
     },
@@ -1824,25 +1846,10 @@
     },
     "report_content": {
         "description": "Zgłoszenie tej wiadomości wyśle administratorowi serwera unikatowe „ID wydarzenia”. Jeżeli wiadomości w tym pokoju są szyfrowane, administrator serwera może nie być w stanie przeczytać treści wiadomości, lub zobaczyć plików bądź zdjęć.",
-        "disagree": "Nie zgadzam się",
-        "error_create_room_moderation_bot": "Nie można utworzyć pokoju z botem moderującym",
         "hide_messages_from_user": "Upewnij się, czy chcesz ukryć wszystkie bieżące i przyszłe wiadomości od tego użytkownika.",
         "ignore_user": "Ignoruj użytkownika",
-        "illegal_content": "Nielegalna treść",
         "missing_reason": "Wypełnij, dlaczego dokonujesz zgłoszenia.",
-        "nature": "Wybierz powód oraz opisz dlaczego ta wiadomość jest niestosowna.",
-        "nature_disagreement": "To co pisze ten użytkownik jest złe.\nZostanie to zgłoszone moderatorom pokoju.",
-        "nature_illegal": "Ten użytkownik wykazuje nielegalne zachowanie, na przykład wyłudza dane lub stosuje groźby karalne.\nTo zdarzenie zostanie zgłoszone moderatorom pokoju, którzy mogą przekazać te informacje organom prawnym.",
-        "nature_nonstandard_admin": "Ten pokój jest przeznaczony do nielegalnych lub toksycznych treści lub moderatorom nie udało się opanować nielegalnej lub toksycznej zawartości.\nZdarzenie zostanie zgłoszone administratorom %(homeserver)s.",
-        "nature_nonstandard_admin_encrypted": "Ten pokój jest przeznaczony do nielegalnych lub toksycznych treści lub moderatorom nie udało się opanować nielegalnej lub toksycznej zawartości.\nZdarzenie zostanie zgłoszone administratorom %(homeserver)s. Administratorzy NIE będą mogli odczytać szyfrowanej zawartości tego pokoju.",
-        "nature_other": "Inny powód. Proszę opisać problem.\nZostanie to zgłoszone do moderatorów pokoju.",
-        "nature_spam": "Ten użytkownik spamuje pokój, wysyłając wiadomości z reklamami, linkami do reklam lub propagandy.\nTo zdarzenie zostanie zgłoszone moderatorom.",
-        "nature_toxic": "Ten użytkownik wykazuje toksyczne zachowanie, na przykład obraża innych, udostępnia treści dla dorosłych lub łamie zasady panujące w pokoju.\nTo zdarzenie zostanie zgłoszone moderatorom pokoju.",
-        "other_label": "Inne",
-        "report_content_to_homeserver": "Zgłoś zawartość do administratora swojego serwera",
-        "report_entire_room": "Zgłoś cały pokój",
-        "spam_or_propaganda": "Spam lub propaganda",
-        "toxic_behaviour": "Toksyczne zachowanie"
+        "report_content_to_homeserver": "Zgłoś zawartość do administratora swojego serwera"
     },
     "report_room": {
         "description": "Zgłoś ten pokój swojemu dostawcy konta. Jeśli wiadomości są zaszyfrowane, administrator nie będzie mógł ich odczytać.",
@@ -1887,7 +1894,9 @@
                 "many": "%(count)s przypiętych wiadomości"
             },
             "limits": {
-                "other": "Możesz przypiąć do %(count)s widżetów"
+                "one": "Możesz przypiąć maksymalnie %(count)s widżet",
+                "few": "Możesz przypiąć maksymalnie %(count)s widżety",
+                "many": "Możesz przypiąć maksymalnie %(count)s widżetów"
             },
             "menu": "Otwórz menu",
             "reply_thread": "Odpowiedz na <link>wiadomość w wątku</link>",
@@ -1904,18 +1913,21 @@
             "empty_active": "Brak aktywnych ankiet w tym pokoju",
             "empty_active_load_more": "Nie znaleziono aktywnych ankiet. Wczytaj więcej ankiet, aby wyświetlić poprzednie miesiące",
             "empty_active_load_more_n_days": {
-                "one": "Nie znaleziono aktywnych ankiet w ostatnim dniu. Wczytaj więcej ankiet, aby wyświetlić poprzednie miesiące",
-                "other": "Nie znaleziono aktywnych ankiet w ostatnich %(count)s dniach. Wczytaj więcej ankiet, aby wyświetlić ankiety z poprzednich miesięcy"
+                "one": "Nie znaleziono aktywnych ankiet z ostatniej doby. Załaduj więcej ankiet, aby wyświetlić poprzednie miesiące",
+                "few": "Nie znaleziono aktywnych ankiet z ostatnich %(count)s dni. Załaduj więcej ankiet, aby wyświetlić poprzednie miesiące",
+                "many": "Nie znaleziono aktywnych ankiet z ostatnich %(count)s dni. Załaduj więcej ankiet, aby wyświetlić poprzednie miesiące"
             },
             "empty_past": "Brak przeszłych ankiet w tym pokoju",
             "empty_past_load_more": "Nie znaleziono przeszłych ankiet. Wczytaj więcej ankiet, aby wyświetlić poprzednie miesiące",
             "empty_past_load_more_n_days": {
-                "one": "Nie znaleziono przeszłych ankiet w ostatnim dniu. Wczytaj więcej ankiet, aby wyświetlić ankiety z poprzednich miesięcy",
-                "other": "Nie znaleziono przeszłych ankiet w ostatnich %(count)s dniach. Wczytaj więcej ankiet, aby wyświetlić poprzednie miesiące"
+                "one": "Nie znaleziono zakończonych ankiet z ostatniej doby. Załaduj więcej ankiet, aby wyświetlić poprzednie miesiące",
+                "few": "Nie znaleziono zakończonych ankiet z ostatnich %(count)s dni. Załaduj więcej ankiet, aby wyświetlić poprzednie miesiące",
+                "many": "Nie znaleziono zakończonych ankiet z ostatnich %(count)s dni. Załaduj więcej ankiet, aby wyświetlić poprzednie miesiące"
             },
             "final_result": {
                 "one": "Ostateczny wynik na podstawie %(count)s głosu",
-                "other": "Ostateczne wyniki na podstawie %(count)s głosów"
+                "few": "Ostateczny wynik na podstawie %(count)s głosów",
+                "many": "Ostateczny wynik na podstawie %(count)s głosów"
             },
             "load_more": "Wczytaj więcej ankiet",
             "loading": "Wczytywanie ankiet",
@@ -1935,7 +1947,7 @@
         }
     },
     "room": {
-        "3pid_invite_email_not_found_account": "To zaproszenie zostało wysłane do %(email)s, które nie jest powiązane z Twoim kontem",
+        "3pid_invite_email_not_found_account": "Zaproszenie zostało wysłane do %(email)s, które nie jest powiązane z Twoim kontem",
         "3pid_invite_email_not_found_account_room": "To zaproszenie do %(roomName)s zostało wysłane na adres %(email)s, który nie jest przypisany do Twojego konta",
         "3pid_invite_error_description": "Wystąpił błąd (%(errcode)s) podczas próby weryfikacji zaproszenia. Spróbuj skontaktować się z osobą, od której otrzymano zaproszenie.",
         "3pid_invite_error_invite_action": "Spróbuj dołączyć mimo tego",
@@ -1974,6 +1986,7 @@
         "error_join_incompatible_version_1": "Przykro nam, twój serwer domowy jest zbyt stary, by uczestniczyć tu.",
         "error_join_incompatible_version_2": "Proszę o kontakt z administratorem serwera.",
         "error_join_title": "Nie udało się dołączyć",
+        "error_join_unknown": "Wystąpił nieznany błąd.",
         "error_jump_to_date": "Serwer zwrócił %(statusCode)s z kodem błędu %(errorCode)s",
         "error_jump_to_date_connection": "Wystąpił błąd sieci w trakcie próby przeskoczenia do określonej daty. Twój serwer domowy mógł zostać wyłączony lub wystąpił tymczasowym problem z Twoim połączeniem sieciowym. Spróbuj ponownie. Jeśli problem będzie się powtarzał, skontaktuj się z administratorem serwera domowego.",
         "error_jump_to_date_details": "Szczegóły błędu",
@@ -1981,12 +1994,14 @@
         "error_jump_to_date_send_logs_prompt": "Wyślij <debugLogsLink>dzienniki debugowania</debugLogsLink>, aby pomóc nam znaleźć problem.",
         "error_jump_to_date_title": "Nie można znaleźć wydarzenia w tym dniu",
         "face_pile_summary": {
-            "one": "%(count)s osoba, którą znasz, już dołączyła",
-            "other": "%(count)s osób, które znasz, już dołączyło"
+            "one": "%(count)s osoba, którą znasz już dołączyła",
+            "few": "%(count)s osoby, które znasz już dołączyło",
+            "many": "%(count)s osób, które znasz już dołączyło"
         },
         "face_pile_tooltip_label": {
             "one": "Wyświetl 1 członka",
-            "other": "Wyświetl wszystkich %(count)s członków"
+            "few": "Wyświetl wszystkich %(count)s członków",
+            "many": "Wyświetl wszystkich %(count)s członków"
         },
         "face_pile_tooltip_shortcut": "Włączając %(commaSeparatedMembers)s",
         "face_pile_tooltip_shortcut_joined": "Włączając Ciebie, %(commaSeparatedMembers)s",
@@ -1995,12 +2010,16 @@
         "forget_room": "Zapomnij o tym pokoju",
         "forget_space": "Zapomnij tą przestrzeń",
         "header": {
+            "join_video_call": "Dołącz do rozmowy wideo",
+            "join_voice_call": "Dołącz do rozmowy głosowej",
             "n_people_asking_to_join": {
                 "one": "Prosi o dołączenie",
                 "few": "%(count)s osoby proszą o dołączenie",
                 "many": "%(count)s osób prosi o dołączenie"
             },
-            "room_is_public": "Ten pokój jest publiczny"
+            "room_is_public": "Ten pokój jest publiczny",
+            "shared_history_tooltip": "Nowi członkowie widzą historię",
+            "world_readable_history_tooltip": "Każdy może zobaczyć historię"
         },
         "header_avatar_open_settings_label": "Otwórz ustawienia pokoju",
         "header_face_pile_tooltip": "Osoby",
@@ -2017,7 +2036,7 @@
             "encrypted_3pid_dm_pending_join": "Kiedy wszyscy dołączą, będziesz mógł rozmawiać",
             "no_avatar_label": "Dodaj zdjęcie, aby inni mogli łatwo zauważyć Twój pokój.",
             "no_topic": "<a>Dodaj temat</a>, aby poinformować ludzi czego dotyczy.",
-            "private_unencrypted_warning": "Normalnie Twoje wiadomości prywatne są szyfrowane, lecz ten pokój nie jest. Przeważnie jest to spowodowane korzystaniem z niewspieranego urządzenia lub metody, takiej jak zaproszenia e-mail.",
+            "private_unencrypted_warning": "Normalnie Twoje wiadomości prywatne są szyfrowane, lecz ten pokój nie jest. Przeważnie jest to spowodowane korzystaniem z niewspieranego urządzenia lub metody weryfikacji, takiej jak zaproszenie e-mail.",
             "room_invite": "Zaproś do tylko tego pokoju",
             "send_message_start_dm": "Wyślij pierwszą wiadomość, aby zaprosić <displayName/> do rozmowy",
             "start_of_dm_history": "Oto początek Twojej historii wiadomości prywatnych z <displayName/>.",
@@ -2094,8 +2113,9 @@
         },
         "unknown_status_code_for_timeline_jump": "nieznany kod statusu",
         "unread_notifications_predecessor": {
-            "one": "Masz %(count)s nieprzeczytanych powiadomień we wcześniejszej wersji tego pokoju.",
-            "other": "Masz %(count)s nieprzeczytane powiadomienie we wcześniejszej wersji tego pokoju."
+            "one": "Masz %(count)s nieprzeczytane powiadomienie w poprzedniej wersji pokoju.",
+            "few": "Masz %(count)s nieprzeczytane powiadomienia w poprzedniej wersji pokoju.",
+            "many": "Masz %(count)s nieprzeczytanych powiadomień w poprzedniej wersji pokoju."
         },
         "upgrade_error_description": "Sprawdź ponownie czy Twój serwer wspiera wybraną wersję pokoju i spróbuj ponownie.",
         "upgrade_error_title": "Błąd podczas aktualizacji pokoju",
@@ -2105,8 +2125,9 @@
         "upgrade_warning_bar_upgraded": "Ten pokój został już ulepszony.",
         "upload": {
             "uploading_multiple_file": {
-                "one": "Przesyłanie %(filename)s oraz %(count)s innych",
-                "other": "Przesyłanie %(filename)s oraz %(count)s innych"
+                "one": "Przesyłanie %(filename)s oraz %(count)s inne",
+                "few": "Przesyłanie %(filename)s oraz %(count)s inne",
+                "many": "Przesyłanie %(filename)s oraz %(count)s innych"
             },
             "uploading_single_file": "Przesyłanie %(filename)s"
         },
@@ -2115,42 +2136,21 @@
         "waiting_for_join_title": "Czekanie na użytkowników %(brand)s"
     },
     "room_list": {
-        "add_room_label": "Dodaj pokój",
         "add_space_label": "Dodaj przestrzeń",
-        "breadcrumbs_empty": "Brak ostatnio odwiedzonych pokojów",
-        "breadcrumbs_label": "Ostatnio odwiedzane pokoje",
         "failed_add_tag": "Nie można dodać tagu %(tagName)s do pokoju",
         "failed_remove_tag": "Nie udało się usunąć tagu %(tagName)s z pokoju",
         "failed_set_dm_tag": "Nie udało się ustawić tagu wiadomości prywatnych",
-        "home_menu_label": "Opcje głównej",
-        "join_public_room_label": "Dołącz do publicznego pokoju",
-        "joining_rooms_status": {
-            "one": "Aktualnie dołączanie do %(count)s pokoju",
-            "other": "Aktualnie dołączanie do %(count)s pokoi"
-        },
         "list_title": "Lista pokojów",
         "more_options": {
             "leave_room": "Opuść pokój"
         },
         "notification_options": "Opcje powiadomień",
-        "redacting_messages_status": {
-            "one": "Aktualnie usuwanie wiadomości z %(count)s pokoju",
-            "other": "Aktualnie usuwanie wiadomości z %(count)s pokoi"
+        "section": {
+            "chats": "Czaty",
+            "favourites": "Ulubione",
+            "low_priority": "Niski priorytet"
         },
-        "show_less": "Pokaż mniej",
-        "show_n_more": {
-            "one": "Pokaż %(count)s więcej",
-            "few": "Pokaż %(count)s więcej",
-            "many": "Pokaż %(count)s więcej"
-        },
-        "show_previews": "Pokazuj podgląd wiadomości",
-        "sort_by": "Sortuj według",
-        "sort_by_activity": "Aktywności",
-        "sort_by_alphabet": "A-Z",
-        "sort_unread_first": "Pokazuj najpierw pokoje z nieprzeczytanymi wiadomościami",
-        "space_menu_label": "menu %(spaceName)s",
-        "sublist_options": "Ustawienia listy",
-        "suggested_rooms_heading": "Sugerowane pokoje"
+        "show_less": "Pokaż mniej"
     },
     "room_settings": {
         "access": {
@@ -2196,8 +2196,8 @@
         },
         "delete_avatar_label": "Usuń awatar",
         "general": {
-            "alias_field_has_domain_invalid": "Brakuje separatora domeny np. (:domena.org)",
-            "alias_field_has_localpart_invalid": "Brakuje nazwy pokoju lub separatora np. (mój-pokój:domena.org)",
+            "alias_field_has_domain_invalid": "Brakuje separatora domeny np. (:domain.org)",
+            "alias_field_has_localpart_invalid": "Brakuje nazwy pokoju lub separatora np. (mój-pokój:domain.org)",
             "alias_field_matches_invalid": "Ten adres nie wskazuje na ten pokój",
             "alias_field_placeholder_default": "np. mój-pokój",
             "alias_field_required_invalid": "Podaj adres",
@@ -2211,7 +2211,7 @@
             "aliases_section": "Adresy pokoju",
             "avatar_field_label": "Awatar pokoju",
             "canonical_alias_field_label": "Główny adres",
-            "description_space": "Edytuj ustawienia powiązane z twoją przestrzenią.",
+            "description_space": "Edytuj ustawienia powiązane z Twoją przestrzenią.",
             "error_creating_alias_description": "Wystąpił błąd podczas aktualizowania tego adresu. Serwer mógł odrzucić żądanie lub wystąpił błąd tymczasowy.",
             "error_creating_alias_title": "Wystąpił błąd podczas tworzenia adresu",
             "error_deleting_alias_description": "Wystąpił błąd podczas usuwania tego adresu. Może już nie istnieć lub wystąpił tymczasowy błąd.",
@@ -2230,10 +2230,12 @@
             "local_aliases_section": "Lokalne adresy",
             "name_field_label": "Nazwa pokoju",
             "new_alias_placeholder": "Nowo opublikowany adres (np. #alias:server)",
-            "no_aliases_room": "Ten pokój nie ma lokalnych adresów",
+            "no_aliases_room": "Ten pokój posiada adresów lokalnych",
             "no_aliases_space": "Ta przestrzeń nie ma adresu lokalnego",
             "other_section": "Inne",
             "publish_toggle": "Czy udostępnić ten pokój publicznie w katalogu pokojów %(domain)s?",
+            "publish_warn_invite_only": "Nie możesz opublikować pokoju, który jest dostępny tylko dla zaproszonych osób.",
+            "publish_warn_no_canonical_permission": "Aby opublikować ten pokój, musisz mieć uprawnienia do ustawienia adresu głównego.",
             "published_aliases_description": "Aby opublikować adres, musi być on najpierw ustawiony jako adres lokalny.",
             "published_aliases_explainer_room": "Opublikowane adresy mogą być używane przez każdego, kto dołączył do Twojego pokoju.",
             "published_aliases_explainer_space": "Opublikowane adresy mogą być używane przez każdego, kto dołączył do Twojej przestrzeni.",
@@ -2323,38 +2325,41 @@
             "error_join_rule_change_title": "Nie udało się zaktualizować zasad dołączania",
             "error_join_rule_change_unknown": "Nieznany błąd",
             "guest_access_warning": "Osoby ze wspieranymi klientami będą mogli dołączyć do pokoju bez posiadania konta.",
-            "history_visibility_invited": "Tylko członkowie (od kiedy zostali zaproszeni)",
+            "history_visibility_invited": "Członkowie od momentu zaproszenia",
             "history_visibility_legend": "Kto może czytać historię?",
-            "history_visibility_shared": "Tylko członkowie (od momentu włączenia tej opcji)",
-            "history_visibility_warning": "Widoczność istniejącej historii nie ulegnie zmianie.",
-            "history_visibility_world_readable": "Każdy",
+            "history_visibility_shared": "Członkowie (cała historia)",
+            "history_visibility_warning": "Zmiany nie wpłyną na starsze wiadomości, tylko nowe. <a>Dowiedz się więcej</a>",
+            "history_visibility_world_readable": "Każdy (historia jest publiczna)",
             "join_rule_description": "Decyduj kto może dołączyć do %(roomName)s.",
-            "join_rule_invite": "Prywatny (tylko na zaproszenie)",
+            "join_rule_invite": "Tylko na zaproszenie",
             "join_rule_invite_description": "Tylko zaproszone osoby mogą dołączyć",
             "join_rule_knock": "Poproś o dołączenie",
             "join_rule_knock_description": "Osoby nie mogą dołączyć, dopóki nie otrzymają zezwolenia.",
-            "join_rule_public_description": "Każdy może znaleźć i dołączyć.",
+            "join_rule_public": "Każdy",
+            "join_rule_public_description": "Każdy może dołączyć.",
             "join_rule_restricted": "Członkowie przestrzeni",
-            "join_rule_restricted_description": "Każdy w przestrzeni może znaleźć i dołączyć. <a>Kliknij tu, aby ustawić które przestrzenie mają dostęp.</a>",
-            "join_rule_restricted_description_active_space": "Każdy w <spaceName/> może znaleźć i dołączyć. Możesz też wybrać inne przestrzenie.",
-            "join_rule_restricted_description_prompt": "Każdy w przestrzeni może znaleźć i dołączyć. Możesz wybrać wiele przestrzeni.",
-            "join_rule_restricted_description_spaces": "Przestrzenie z dostępem",
-            "join_rule_restricted_dialog_description": "Decyduj, które przestrzenie mogą dostać się do tego pokoju. Jeśli wybrano przestrzeń, jej członkowie mogą znaleźć i dołączyć do <RoomName/>.",
-            "join_rule_restricted_dialog_empty_warning": "Usuwasz wszystkie przestrzenie. Domyślnie dostęp będą miały tylko osoby z zaproszeniem",
+            "join_rule_restricted_description": "Każdy w autoryzowanej przestrzeni może dołączyć bez zaproszenia. <a>Zarządzaj przestrzeniami.</a>",
+            "join_rule_restricted_description_active_space": "Każdy w <spaceName/> może dołączyć.",
+            "join_rule_restricted_description_prompt": "Każdy w przestrzeni może dołączyć.",
+            "join_rule_restricted_description_spaces": "Autoryzowane przestrzenie",
+            "join_rule_restricted_dialog_description": "Przestrzenie, do których mogą dołączyć członkowie <RoomName/> bez zaproszenia.",
+            "join_rule_restricted_dialog_empty_warning": "Usuwasz wszystkie autoryzowane przestrzenie. Domyślnie dostęp będą miały tylko osoby z zaproszeniem",
             "join_rule_restricted_dialog_filter_placeholder": "Szukaj przestrzeni",
-            "join_rule_restricted_dialog_heading_known": "Inne przestrzenie, które znasz",
-            "join_rule_restricted_dialog_heading_other": "Inne przestrzenie lub pokoje, których możesz nie znać",
-            "join_rule_restricted_dialog_heading_room": "Przestrzenie, które znasz, że zawierają ten pokój",
+            "join_rule_restricted_dialog_heading_known": "Twoje przestrzenie, które nie zawierają tego pokoju",
+            "join_rule_restricted_dialog_heading_other": "Pozostałe przestrzenie, których nie jesteś członkiem",
+            "join_rule_restricted_dialog_heading_room": "Twoje przestrzenie, w których znajduje się ten pokój",
             "join_rule_restricted_dialog_heading_space": "Przestrzenie, które znasz, że zawierają tą przestrzeń",
             "join_rule_restricted_dialog_heading_unknown": "Są to prawdopodobnie te, których częścią są inni administratorzy pokoju.",
-            "join_rule_restricted_dialog_title": "Wybierz przestrzenie",
+            "join_rule_restricted_dialog_title": "Zarządzaj przestrzeniami",
             "join_rule_restricted_n_more": {
                 "one": "i %(count)s więcej",
-                "other": "i %(count)s więcej"
+                "few": "i %(count)s więcej",
+                "many": "i %(count)s więcej"
             },
             "join_rule_restricted_summary": {
-                "one": "Obecnie jedna przestrzeń ma dostęp",
-                "other": "Obecnie %(count)s przestrzeni ma dostęp"
+                "one": "Obecnie jedna przestrzeń jest autoryzowana",
+                "few": "Obecnie %(count)s przestrzenie są autoryzowane",
+                "many": "Obecnie %(count)s przestrzeni jest autoryzowanych"
             },
             "join_rule_restricted_upgrade_description": "To ulepszenie pozwoli członkom wybranych przestrzeni uzyskać dostęp do tego pokoju bez zaproszenia.",
             "join_rule_restricted_upgrade_warning": "Ten pokój znajduje się w przestrzeniach, w których nie masz uprawnień administratora. W tych przestrzeniach stary pokój wciąż będzie wyświetlany, lecz ludzie otrzymają propozycję dołączenia do nowego.",
@@ -2362,11 +2367,13 @@
             "join_rule_upgrade_required": "Aktualizacja wymagana",
             "join_rule_upgrade_sending_invites": {
                 "one": "Wysyłanie zaproszenia...",
-                "other": "Wysyłanie zaproszeń... (%(progress)s z %(count)s)"
+                "few": "Wysyłanie zaproszeń... (%(progress)s z %(count)s)",
+                "many": "Wysyłanie zaproszeń... (%(progress)s z %(count)s)"
             },
             "join_rule_upgrade_updating_spaces": {
                 "one": "Aktualizowanie przestrzeni...",
-                "other": "Aktualizowanie przestrzeni... (%(progress)s z %(count)s)"
+                "few": "Aktualizowanie przestrzeni... (%(progress)s z %(count)s)",
+                "many": "Aktualizowanie przestrzeni... (%(progress)s z %(count)s)"
             },
             "join_rule_upgrade_upgrading_room": "Aktualizowanie pokoju",
             "join_rule_world_readable_description": "Zmiana osób, które mogą dołączyć do pokoju, wpłynie również na widoczność przyszłych wiadomości.",
@@ -2380,15 +2387,17 @@
         "upload_avatar_label": "Prześlij awatar",
         "visibility": {
             "alias_section": "Adres",
-            "error_failed_save": "Nie udało się zaktualizować widoczności tej przestrzeni",
+            "error_failed_save": "Nie udało się zaktualizować ustawień tej przestrzeni",
             "error_update_guest_access": "Nie udało się zaktualizować dostępu dla gości do tej przestrzeni",
             "error_update_history_visibility": "Nie udało się zaktualizować widoczności historii dla tej przestrzeni",
-            "guest_access_explainer": "Goście mogą dołączyć do przestrzeni bez posiadania konta.",
+            "guest_access_disabled": "Nie masz uprawnień do zmiany ustawień dostępu dla gości.",
+            "guest_access_explainer": "Goście mogą dołączyć do przestrzeni bez posiadania konta. Może być to przydatne dla przestrzeni publicznych.",
             "guest_access_label": "Włącz dostęp dla gości",
             "history_visibility_anyone_space": "Podgląd przestrzeni",
             "history_visibility_anyone_space_description": "Pozwól ludziom na podgląd Twojej przestrzeni zanim dołączą.",
+            "history_visibility_anyone_space_disabled": "Nie masz uprawnień do zmiany widoczności historii.",
             "history_visibility_anyone_space_recommendation": "Zalecane dla publicznych przestrzeni.",
-            "title": "Widoczność"
+            "title": "Bezpieczeństwo i prywatność"
         },
         "voip": {
             "call_type_section": "Typ połączenia",
@@ -2439,11 +2448,12 @@
         "warning_kind_files": "Ta wersja %(brand)s nie wspiera wyświetlania niektórych plików szyfrowanych",
         "warning_kind_files_app": "Użyj <a>aplikacji desktopowej</a>, aby zobaczyć wszystkie szyfrowane pliki",
         "warning_kind_search": "Ta wersja %(brand)s nie obsługuje wyszukiwania zabezpieczonych wiadomości",
-        "warning_kind_search_app": "Używaj <a>Aplikacji desktopowej</a>, aby wyszukiwać zaszyfrowane wiadomości"
+        "warning_kind_search_app": "Używaj <a>Aplikacji desktopowej</a>, aby wyszukiwać zaszyfrowane wiadomości",
+        "warning_kind_search_partial": "Wyniki wyszukiwania mogą być niekompletne, ponieważ budowa indeksu nie została ukończona."
     },
     "setting": {
         "help_about": {
-            "access_token_detail": "Twój token dostępu daje pełny dostęp do Twojego konta. Nie dziel się nim z nikim.",
+            "access_token_detail": "Token dostępu daje pełny dostęp do Twojego konta. Nie dziel się nim z nikim.",
             "brand_version": "Wersja %(brand)s:",
             "clear_cache_reload": "Wyczyść pamięć podręczną i przeładuj",
             "crypto_version": "Wersja krypto:",
@@ -2506,16 +2516,16 @@
                 "breadcrumb_page": "Resetuj szyfrowanie",
                 "breadcrumb_second_description": "Stracisz całą historię wiadomości przechowywaną na serwerze",
                 "breadcrumb_third_description": "Konieczne będzie ponowne zweryfikowanie wszystkich istniejących urządzeń i kontaktów",
-                "breadcrumb_title": "Czy na pewno chcesz zresetować swoją tożsamość?",
-                "breadcrumb_title_cant_confirm": "Musisz zresetować swoją tożsamość",
-                "breadcrumb_title_forgot": "Nie pamiętasz klucza przywracania? Musisz zresetować swoją tożsamość.",
-                "breadcrumb_title_sync_failed": "Nie udało się zsynchronizować magazynu kluczy. Zresetuj swoją tożsamość.",
+                "breadcrumb_title": "Czy na pewno chcesz zresetować swoją tożsamość cyfrową?",
+                "breadcrumb_title_cant_confirm": "Musisz zresetować swoją tożsamość cyfrową",
+                "breadcrumb_title_forgot": "Zapomniałeś klucza przywracania? Musisz zresetować swoją tożsamość cyfrową.",
+                "breadcrumb_title_sync_failed": "Nie udało się zsynchronizować magazynu kluczy. Zresetuj swoją tożsamość cyfrową.",
                 "breadcrumb_warning": "Zrób to tylko wtedy, gdy uważasz, że Twoje konto zostało naruszone.",
                 "details_title": "Szczegóły szyfrowania",
                 "do_not_close_warning": "Nie zamykaj tego okna, dopóki reset nie zostanie zakończony",
                 "export_keys": "Eksportuj klucze",
                 "import_keys": "Importuj klucze",
-                "other_people_device_description": "Ostrzeżenie: użytkownicy, którzy nie zweryfikowali Twojej tożsamości bezpośrednio z Tobą (np. za pomocą emoji), nie będą mogli czytać Twoich wiadomości szyfrowanych. Również niezweryfikowane urządzenia zweryfikowanych użytkowników nie będą otrzymywać zaszyfrowanych wiadomości.",
+                "other_people_device_description": "Uwaga: użytkownicy, którzy nie zweryfikowali bezpośrednio Twojej tożsamości (np. za pomocą emoji), nie otrzymają Twoich wiadomości szyfrowanych. Jaki i również niezweryfikowane urządzenia zweryfikowanych użytkowników. Zastosowanie zmian wymaga ponownego uruchomienia aplikacji.",
                 "other_people_device_label": "W pokojach szyfrowanych wysyłaj wiadomości tylko do zweryfikowanych użytkowników",
                 "other_people_device_title": "Urządzenia innych osób",
                 "reset_identity": "Zresetuj tożsamość kryptograficzną",
@@ -2525,13 +2535,13 @@
                 "title": "Zaawansowane"
             },
             "confirm_key_storage_off": "Czy na pewno pozostawić wyłączony magazyn kluczy?",
-            "confirm_key_storage_off_description": "Jeśli wylogujesz się ze wszystkich swoich urządzeń, utracisz historię wiadomości i będziesz musiał ponownie zweryfikować wszystkie istniejące kontakty. <a>Dowiedz się więcej</a>",
+            "confirm_key_storage_off_description": "Jeśli usuniesz wszystkie swoje urządzenia, utracisz historię wiadomości i będziesz musiał ponownie zweryfikować wszystkie istniejące kontakty. <a>Dowiedz się więcej</a>",
             "delete_key_storage": {
-                "breadcrumb_page": "Usuń pamięć klucza",
+                "breadcrumb_page": "Usuń magazyn kluczy",
                 "confirm": "Usuń magazyn kluczy",
-                "description": "Usunięcie pamięci kluczy spowoduje usunięcie tożsamości kryptograficznej i kluczy wiadomości z serwera i wyłączenie następujących funkcji bezpieczeństwa:",
-                "list_first": "Nie będziesz mieć szyfrowanej historii wiadomości na nowych urządzeniach",
-                "list_second": "Stracisz dostęp do zaszyfrowanych wiadomości, jeśli zostaniesz wylogowany z dowolnego %(brand)s miejsca",
+                "description": "Usunięcie magazynu kluczy spowoduje usunięcie tożsamości kryptograficznej i kluczy wiadomości z serwera i wyłączenie następujących funkcji bezpieczeństwa:",
+                "list_first": "Stracisz dostęp do zaszyfrowanej historii wiadomości na nowych urządzeniach",
+                "list_second": "Jeśli nie jesteś zalogowany na żadnym innym urządzeniu, stracisz dostęp do swoich zaszyfrowanych wiadomości",
                 "title": "Czy na pewno chcesz wyłączyć przechowywanie kluczy i je usunąć?"
             },
             "device_not_verified_button": "Zweryfikuj to urządzenie",
@@ -2540,7 +2550,7 @@
             "dialog_title": "<strong>Ustawienia:</strong> Szyfrowanie",
             "key_storage": {
                 "allow_key_storage": "Zezwalaj na przechowywanie kluczy",
-                "description": "Bezpiecznie przechowuj swoją tożsamość kryptograficzną i klucze wiadomości na serwerze. Umożliwi to przeglądanie historii wiadomości na dowolnych nowych urządzeniach. <a>Dowiedz się więcej </a>",
+                "description": "Dzięki temu będziesz mógł przeglądać historię czatów na nowych urządzeniach. Jest to również wymagane do tworzenia kopii zapasowych i tożsamości cyfrowej. <a>Dowiedz się więcej</a>",
                 "title": "Magazyn kluczy"
             },
             "recovery": {
@@ -2550,14 +2560,14 @@
                 "change_recovery_key": "Zmień klucz przywracania",
                 "change_recovery_key_description": "Zapisz nowy klucz przywracania w bezpiecznym miejscu. Następnie kliknij Kontynuuj, aby zastosować zmiany.",
                 "change_recovery_key_title": "Zmienić klucz przywracania?",
-                "description": "Odzyskaj swoją tożsamość kryptograficzną i historię wiadomości za pomocą klucza przywracania, jeśli stracisz dostęp do swoich urządzeń.",
+                "description": "Twoje czaty są automatycznie archiwizowane za pomocą szyfrowania end-to-end. Aby przywrócić tę kopię zapasową i swoją tożsamość cyfrową, wymagany będzie klucz przywracania.",
                 "enter_key_error": "Wprowadzony klucz przywracania nie jest poprawny.",
                 "enter_recovery_key": "Wprowadź klucz przywracania",
                 "forgot_recovery_key": "Zapomniałeś klucza przywracania?",
                 "key_storage_warning": "Magazyn kluczy nie jest zsynchronizowany. Kliknij jeden z przycisków poniżej, aby rozwiązać problem.",
                 "save_key_description": "Nie udostępniaj go nikomu!",
                 "save_key_title": "Klucz przywracania",
-                "set_up_recovery": "Skonfiguruj przywracanie",
+                "set_up_recovery": "Uzyskaj klucz przywracania",
                 "set_up_recovery_confirm_button": "Zakończ konfigurację",
                 "set_up_recovery_confirm_description": "Wprowadź klucz przywracania pokazany na poprzednim ekranie, aby zakończyć konfigurowanie przywracania.",
                 "set_up_recovery_confirm_title": "Wprowadź klucz przywracania, aby potwierdzić",
@@ -2565,7 +2575,7 @@
                 "set_up_recovery_save_key_description": "Zapisz ten klucz przywracania w bezpiecznym miejscu, takim jak menedżer haseł, notatka szyfrowana lub sejf.",
                 "set_up_recovery_save_key_title": "Zapisz klucz przywracania w bezpiecznym miejscu",
                 "set_up_recovery_secondary_description": "Klikając przycisk Kontynuuj, wygenerujemy dla Ciebie klucz przywracania.",
-                "title": "Przywracanie"
+                "title": "Kopia zapasowa"
             },
             "title": "Szyfrowanie"
         },
@@ -2659,6 +2669,7 @@
             "username": "Nazwa użytkownika"
         },
         "inline_url_previews_default": "Włącz podgląd",
+        "inline_url_previews_encrypted": "Włącz podgląd w pokojach szyfrowanych",
         "insert_trailing_colon_mentions": "Wstawiaj dwukropek po wzmiance użytkownika na początku wiadomości",
         "invite_controls": {
             "default_label": "Zezwól użytkownikom na zapraszanie Cię do pokojów"
@@ -2769,13 +2780,13 @@
             "room_activity": "Pojawiła się nowa aktywność pokoju, aktualizacje i status wiadomości",
             "rule_call": "Zaproszenie do rozmowy",
             "rule_contains_display_name": "Wiadomości zawierające moją wyświetlaną nazwę",
-            "rule_contains_user_name": "Wiadomości zawierające moją nazwę użytkownika",
+            "rule_contains_user_name": "@wzmianki i odpowiedzi",
             "rule_encrypted": "Wiadomości szyfrowane w czatach grupowych",
             "rule_encrypted_room_one_to_one": "Wiadomości szyfrowane w czatach jeden-na-jeden",
             "rule_invite_for_me": "Kiedy zostanę zaproszony do pokoju",
             "rule_message": "Wiadomości w czatach grupowych",
             "rule_room_one_to_one": "Wiadomości w czatach jeden-na-jeden",
-            "rule_roomnotif": "Wiadomości zawierające @room",
+            "rule_roomnotif": "Wzmianki @room",
             "rule_suppress_notices": "Wiadomości wysłane przez bota",
             "rule_tombstone": "Kiedy pokoje są uaktualniane",
             "show_message_desktop_notification": "Pokaż wiadomość w powiadomieniu na pulpicie",
@@ -2796,6 +2807,8 @@
             "enable_tray_icon": "Pokaż ikonę w zasobniku systemowym i zminimalizuj okno do niej zamiast zamknięcia",
             "keyboard_heading": "Skróty klawiszowe",
             "keyboard_view_shortcuts_button": "<a>Kliknij tutaj</a> aby wyświetlić wszystkie skróty klawiaturowe.",
+            "link_previews_description": "Wyświetla informacje o linkach pod wiadomościami",
+            "link_previews_heading": "Podgląd linków",
             "media_heading": "Obrazy, GIFy i wideo",
             "presence_description": "Udostępnij swoją aktywność i status z innymi.",
             "publish_timezone": "Opublikuj strefę czasową na profilu publicznym",
@@ -2829,8 +2842,9 @@
             "message_search_disable_warning": "Jeśli wyłączone, wiadomości z szyfrowanych pokojów nie pojawią się w wynikach wyszukiwania.",
             "message_search_disabled": "Bezpiecznie przechowuj lokalnie wiadomości szyfrowane, aby mogły się wyświetlać w wynikach wyszukiwania.",
             "message_search_enabled": {
-                "one": "Bezpiecznie przechowuj lokalnie wiadomości szyfrowane, aby mogły się wyświetlać w wynikach wyszukiwania. Zostanie użyte %(size)s do przechowywania wiadomości z %(rooms)s pokoju.",
-                "other": "Bezpiecznie przechowuj lokalnie wiadomości szyfrowane, aby mogły się wyświetlać w wynikach wyszukiwania. Zostanie użyte %(size)s do przechowywania wiadomości z %(rooms)s pokoi."
+                "one": "Bezpiecznie i lokalnie przechowuj wiadomości szyfrowane, aby mogły się wyświetlać w wynikach wyszukiwania wykorzystując %(size)s z %(rooms)s pokoju.",
+                "few": "Bezpiecznie i lokalnie przechowuj wiadomości szyfrowane, aby mogły się wyświetlać w wynikach wyszukiwania wykorzystując %(size)s z %(rooms)s pokojów.",
+                "many": "Bezpiecznie i lokalnie przechowuj wiadomości szyfrowane, aby mogły się wyświetlać w wynikach wyszukiwania wykorzystując %(size)s z %(rooms)s pokojów."
             },
             "message_search_failed": "Inicjalizacja wyszukiwania wiadomości nie powiodła się",
             "message_search_indexed_messages": "Wiadomości indeksowane:",
@@ -2838,12 +2852,13 @@
             "message_search_indexing": "Aktualnie indeksowanie: %(currentRoom)s",
             "message_search_indexing_idle": "Aktualnie nie są indeksowane wiadomości z żadnego pokoju.",
             "message_search_intro": "%(brand)s bezpiecznie i lokalnie przechowuje wiadomości szyfrowane, aby mogły pojawić się w wynikach wyszukiwania:",
+            "message_search_pending_rooms": "Pokoje oczekujące na indeksowanie: %(pendingRooms)s",
             "message_search_room_progress": "%(doneRooms)s z %(totalRooms)s",
             "message_search_section": "Wyszukiwanie wiadomości",
             "message_search_sleep_time": "Jak szybko powinny być pobierane wiadomości.",
             "message_search_space_used": "Wykorzystane miejsce:",
             "message_search_unsupported": "%(brand)s brakuje niektórych komponentów wymaganych do bezpiecznego przechowywania wiadomości szyfrowanych lokalnie. Jeśli chcesz eksperymentować z tą funkcją, zbuduj własny %(brand)s Desktop z <nativeLink> dodanymi komponentami wyszukiwania</nativeLink>.",
-            "message_search_unsupported_web": "%(brand)s nie jest w stanie bezpiecznie przechowywać wiadomości szyfrowanych lokalnie, gdy działa w przeglądarce. Użyj <desktopLink> Desktop</desktopLink>, aby wiadomości pojawiły się w wynikach wyszukiwania.",
+            "message_search_unsupported_web": "%(brand)s nie jest w stanie bezpiecznie przechowywać wiadomości szyfrowanych lokalnie, gdy działa w przeglądarce. Użyj <desktopLink>%(brand)s Desktop</desktopLink>, aby wiadomości pojawiły się w wynikach wyszukiwania.",
             "record_session_details": "Zapisz nazwę klienta, wersję i URL, aby łatwiej rozpoznawać sesje w menedżerze sesji",
             "send_analytics": "Wysyłaj dane analityczne",
             "strict_encryption": "Wysyłaj wiadomości tylko do zweryfikowanych użytkowników"
@@ -2853,7 +2868,6 @@
         "send_typing_notifications": "Wyślij powiadomienia o pisaniu",
         "sessions": {
             "best_security_note": "Dla najlepszego bezpieczeństwa zweryfikuj swoje sesje i usuń każdą, której nie rozpoznajesz lub z której już nie korzystasz.",
-            "browser": "Przeglądarka",
             "confirm_sign_out": {
                 "one": "Potwierdź usunięcie tego urządzenia",
                 "few": "Potwierdź usunięcie tych urządzeń",
@@ -2902,13 +2916,13 @@
             "mobile_session": "Sesja mobilna",
             "n_sessions_selected": {
                 "one": "Zaznaczono %(count)s sesję",
-                "other": "Zaznaczono %(count)s sesji"
+                "few": "Zaznaczono %(count)s sesje",
+                "many": "Zaznaczono %(count)s sesji"
             },
             "no_inactive_sessions": "Nie znaleziono nieaktywnych sesji.",
             "no_sessions": "Nie znaleziono sesji.",
             "no_unverified_sessions": "Nie znaleziono niezweryfikowanych sesji.",
             "no_verified_sessions": "Nie znaleziono zweryfikowanych sesji.",
-            "os": "System operacyjny",
             "other_sessions_heading": "Inne sesje",
             "push_heading": "Powiadomienia push",
             "push_subheading": "Otrzymuj powiadomienia push na tej sesji.",
@@ -2966,18 +2980,17 @@
         "show_nsfw_content": "Pokaż zawartość NSFW",
         "show_read_receipts": "Pokaż potwierdzenia odczytania wysyłane przez innych użytkowników",
         "show_redaction_placeholder": "Pokaż symbol zastępczy dla usuniętych wiadomości",
+        "show_sections": "Pokaż sekcje",
         "show_stickers_button": "Pokaż przycisk naklejek",
         "show_typing_notifications": "Pokazuj powiadomienia o pisaniu",
         "showbold": "Pokaż całą aktywność na liście pomieszczeń (kropki lub liczbę nieprzeczytanych wiadomości)",
         "sidebar": {
             "dialog_title": "<strong>Ustawienia:</strong> Pasek boczny",
-            "metaspaces_favourites_description": "Pogrupuj wszystkie swoje ulubione pokoje i osoby w jednym miejscu.",
             "metaspaces_home_all_rooms": "Pokaż wszystkie pokoje",
             "metaspaces_home_all_rooms_description": "Pokaż wszystkie swoje pokoje na głównej, nawet jeśli znajdują się w przestrzeni.",
             "metaspaces_home_description": "Główna to przydatne miejsce, gdzie znajdziesz przegląd wszystkich pokoi.",
             "metaspaces_orphans": "Pokoje poza przestrzenią",
             "metaspaces_orphans_description": "Pogrupuj wszystkie pokoje, które nie są częścią przestrzeni, w jednym miejscu.",
-            "metaspaces_people_description": "Pogrupuj wszystkie osoby w jednym miejscu.",
             "metaspaces_subsection": "Wyświetlanie przestrzeni",
             "metaspaces_video_rooms": "Pokoje wideo i konferencje",
             "metaspaces_video_rooms_description": "Grupuj wszystkie prywatne pokoje wideo i konferencje.",
@@ -3004,19 +3017,25 @@
             "audio_output": "Wyjście audio",
             "audio_output_empty": "Nie wykryto wyjść audio",
             "auto_gain_control": "Automatyczna regulacja głośności",
-            "connection_section": "Połączenie",
             "dialog_title": "<strong>Ustawienia:</strong> Głos i wideo",
             "echo_cancellation": "Usuwanie echa",
+            "echo_cancellation_description": "Usuwa echo z mikrofonu podczas połączeń. To ustawienie dotyczy również połączenia Element Call.",
             "enable_fallback_ice_server": "Zezwól na alternatywny serwer wspierający (%(server)s)",
             "enable_fallback_ice_server_description": "Stosuje się go tylko wtedy, kiedy Twój serwer domowy go nie oferuje. Twój adres IP zostanie współdzielony w trakcie połączenia.",
+            "enable_legacy_calls": "Włącz starszą wersję połączeń głosowych/wideo",
+            "enable_legacy_calls_description": "Dotyczy połączeń Jitsi i 1:1 WebRTC",
             "mirror_local_feed": "Lustrzane odbicie wideo",
-            "missing_permissions_prompt": "Brakuje uprawnień do mediów, kliknij przycisk poniżej, aby o nie zapytać.",
+            "missing_permissions_prompt": "Aby dołączyć do połączenia, przyznaj %(brand)s dostęp do Twoich urządzeń audio i wideo.",
             "noise_suppression": "Redukcja szumów",
-            "request_permissions": "Zapytaj o uprawnienia",
+            "noise_suppression_description": "Redukuje szum tła w mikrofonie podczas połączeń. To ustawienie dotyczy również Element Call.",
+            "permissions": "Zezwól na dostęp do mikrofonu i kamery",
+            "request_permissions": "Prośba",
             "title": "Głos i wideo",
             "video_input_empty": "Nie wykryto żadnej kamerki internetowej",
             "video_section": "Ustawienia wideo",
             "voice_agc": "Automatycznie dostosuj głośność mikrofonu",
+            "voice_input_description": "Skonfigurowane tutaj wejście audio jest używane do obsługi wiadomości głosowych i połączeń (starsza wersja/1:1).",
+            "voice_input_section": "Wejście audio",
             "voice_processing": "Procesowanie głosu",
             "voice_section": "Ustawienia głosu"
         },
@@ -3136,8 +3155,9 @@
             "dm_heading": "Wiadomości prywatne",
             "error_heading": "Nie dodano wszystkiego, co było zaznaczone",
             "progress_text": {
-                "other": "Dodawanie pokojów... (%(progress)s z %(count)s)",
-                "one": "Dodawanie pokoju..."
+                "one": "Dodawanie pokoju...",
+                "few": "Dodawanie pokoi... (%(progress)s z %(count)s)",
+                "many": "Dodawanie pokoi... (%(progress)s z %(count)s)"
             },
             "space_dropdown_label": "Wybór przestrzeni",
             "space_dropdown_title": "Dodaj istniejące pokoje",
@@ -3178,7 +3198,7 @@
         "no_search_result_hint": "Możesz spróbować inną frazę lub sprawdzić błędy pisowni.",
         "preferences": {
             "sections_section": "Sekcje do pokazania",
-            "show_people_in_space": "Ta funkcja grupuje Twoje czaty z członkami tej przestrzeni. Wyłączenie jej, ukryje następujące czaty %(spaceName)s."
+            "show_people_in_space": "Ta funkcja grupuje Twoje czaty z członkami przestrzeni. Wyłączenie jej, ukryje następujące czaty: %(spaceName)s."
         },
         "room_filter_placeholder": "Szukaj pokoi",
         "search_children": "Przeszukaj %(spaceName)s",
@@ -3195,12 +3215,6 @@
     "space_settings": {
         "title": "Ustawienia - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Nie masz uprawnień do dodawania pokoi do tej przestrzeni",
-        "error_no_permission_add_space": "Nie masz uprawnień, aby dodać przestrzenie do tej przestrzeni",
-        "error_no_permission_create_room": "Nie masz uprawnień do tworzenia nowych pokoi w tej przestrzeni",
-        "error_no_permission_invite": "Nie masz uprawnień do zapraszania osób do tej przestrzeni"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Wpisz nazwę nowego serwera, którego chcesz przeglądać.",
@@ -3223,7 +3237,8 @@
         "copy_link_text": "Kopiuj link z zaproszeniem",
         "count_of_members": {
             "one": "%(count)s członek",
-            "other": "%(count)s członków"
+            "few": "%(count)s członków",
+            "many": "%(count)s członków"
         },
         "create_new_room_button": "Utwórz nowy pokój",
         "failed_querying_public_rooms": "Nie udało się pobrać pokoi publicznych",
@@ -3277,7 +3292,8 @@
         "all_threads_description": "Pokazuje wszystkie wątki z bieżącego pokoju",
         "count_of_reply": {
             "one": "%(count)s odpowiedź",
-            "other": "%(count)s odpowiedzi"
+            "few": "%(count)s odpowiedzi",
+            "many": "%(count)s odpowiedzi"
         },
         "empty_description": "Użyj „%(replyInThread)s” podczas najechania kursorem na wiadomość.",
         "empty_title": "Wątki pomagają utrzymać tematykę rozmów i łatwo je śledzić.",
@@ -3320,14 +3336,13 @@
         "creation_summary_dm": "%(creator)s utworzył tę wiadomość prywatną.",
         "creation_summary_room": "%(creator)s stworzył i skonfigurował pokój.",
         "decryption_failure": {
-            "sender_identity_previously_verified": "Zweryfikowana tożsamość nadawcy została zresetowana",
+            "sender_identity_previously_verified": "Zweryfikowana tożsamość cyfrowa nadawcy została zresetowana",
             "unable_to_decrypt": "Nie można rozszyfrować wiadomości"
         },
         "disambiguated_profile": "%(displayName)s (%(matrixId)s)",
         "download_action_downloading": "Pobieranie",
         "download_failed": "Błąd pobierania",
         "download_failed_description": "Wystąpił błąd podczas pobierania tego pliku",
-        "e2e_state": "Stan szyfrowania end-to-end",
         "edits": {
             "tooltip_label": "Edytowano w %(date)s. Kliknij, aby zobaczyć zmiany.",
             "tooltip_sub": "Kliknij, aby wyświetlić edycje",
@@ -3400,7 +3415,8 @@
         "m.poll": {
             "count_of_votes": {
                 "one": "%(count)s głos",
-                "other": "%(count)s głosów"
+                "few": "%(count)s głosy",
+                "many": "%(count)s głosów"
             }
         },
         "m.poll.end": {
@@ -3409,18 +3425,18 @@
         "m.poll.start": "%(senderName)s utworzył ankietę - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s zmienił awatar pokoju.",
-            "changed_img": "%(senderDisplayName)s zmienił awatar pokoju na <img/>",
-            "lightbox_title": "%(senderDisplayName)s zmienił awatar %(roomName)s",
-            "removed": "%(senderDisplayName)s usunął awatar pokoju."
+            "lightbox_title": "%(senderDisplayName)s zmienił awatar %(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
-                "other": "%(senderName)s dodał alternatywne adresy %(addresses)s dla tego pokoju.",
-                "one": "%(senderName)s dodał alternatywny adres %(addresses)s dla tego pokoju."
+                "one": "%(senderName)s dodał alternatywny adres %(addresses)s dla tego pokoju.",
+                "few": "%(senderName)s dodał alternatywne adresy %(addresses)s dla tego pokoju.",
+                "many": "%(senderName)s dodał alternatywne adresy %(addresses)s dla tego pokoju."
             },
             "alt_removed": {
-                "one": "%(senderName)s usunął alternatywny adres %(addresses)s tego pokoju.",
-                "other": "%(senderName)s usunął alternatywny adres %(addresses)s tego pokoju."
+                "one": "%(senderName)s usunął alternatywny adres %(addresses)s pokoju.",
+                "few": "%(senderName)s usunął alternatywne adresy %(addresses)s pokoju.",
+                "many": "%(senderName)s usunął alternatywne adresy %(addresses)s pokoju."
             },
             "changed": "%(senderName)s zmienił adresy dla tego pokoju.",
             "changed_alternative": "%(senderName)s zmienił alternatywne adresy dla tego pokoju.",
@@ -3459,6 +3475,8 @@
             "accepted_invite": "%(targetName)s zaakceptował zaproszenie",
             "ban": "%(senderName)s zbanował użytkownika",
             "ban_reason": "%(senderName)s zbanował użytkownika: %(reason)s",
+            "ban_reason_spoiler": "%(senderName)s zbanował <user/>: %(reason)s",
+            "ban_spoiler": "%(senderName)s zbanował <user/>",
             "change_avatar": "%(senderName)s zmienił swoje zdjęcie profilowe",
             "change_name": "%(oldDisplayName)s zmienił wyświetlaną nazwę na %(displayName)s",
             "change_name_avatar": "%(oldDisplayName)s zmienił swoją wyświetlaną nazwę i zdjęcie profilowe",
@@ -3564,7 +3582,7 @@
         },
         "redaction": "Wiadomość usunięta przez %(name)s",
         "reply": {
-            "error_loading": "Nie zdołano wczytać zdarzenia, na które odpowiedziano, może ono nie istnieć lub nie masz uprawnienia, by je zobaczyć.",
+            "error_loading": "Nie można wczytać wydarzenia, na które udzielono odpowiedzi. Wydarzenie nie istnieje lub nie masz uprawnień do jego przeglądania.",
             "in_reply_to": "<a>W odpowiedzi do</a> <pill>",
             "in_reply_to_for_export": "W odpowiedzi do <a>tej wiadomości</a>"
         },
@@ -3580,50 +3598,64 @@
         "summary": {
             "banned": {
                 "one": "został zbanowany",
-                "other": "został zbanowany %(count)s razy"
+                "few": "został zbanowany %(count)s razy",
+                "many": "został zbanowany %(count)s razy"
             },
             "banned_multiple": {
                 "one": "zostało zbanowanych",
-                "other": "zostało zbanowanych %(count)s razy"
+                "few": "zostało zbanowanych %(count)s razy",
+                "many": "zostało zbanowanych %(count)s razy"
             },
             "changed_avatar": {
-                "other": "%(oneUser)szmienił swoje zdjęcie profilowe %(count)s razy"
+                "one": "%(oneUser)szmienił swoje zdjęcie profilowe",
+                "few": "%(oneUser)szmienił swoje zdjęcie profilowe %(count)s razy",
+                "many": "%(oneUser)szmienił swoje zdjęcie profilowe %(count)s razy"
             },
             "changed_avatar_multiple": {
-                "other": "%(severalUsers)szmieniło swoje zdjęcie profilowe %(count)s razy"
+                "one": "%(severalUsers)szmieniło swoje zdjęcie profilowe",
+                "few": "%(severalUsers)szmieniło swoje zdjęcie profilowe %(count)s razy",
+                "many": "%(severalUsers)szmieniło swoje zdjęcie profilowe %(count)s razy"
             },
             "changed_name": {
                 "one": "%(oneUser)szmienił swoją nazwę",
-                "other": "%(oneUser)szmienił swoją nazwę %(count)s razy"
+                "few": "%(oneUser)szmienił swoją nazwę %(count)s razy",
+                "many": "%(oneUser)szmienił swoją nazwę %(count)s razy"
             },
             "changed_name_multiple": {
-                "other": "%(severalUsers)szmieniło ich nazwę %(count)s razy",
-                "one": "%(severalUsers)szmieniło ich nazwę"
+                "one": "%(severalUsers)szmieniło swoją nazwę",
+                "few": "%(severalUsers)szmieniło swoją nazwę %(count)s razy",
+                "many": "%(severalUsers)szmieniło swoją nazwę %(count)s razy"
             },
             "format": "%(nameList)s %(transitionList)s",
             "hidden_event": {
                 "one": "%(oneUser)swysłał ukrytą wiadomość",
-                "other": "%(oneUser)swysłał %(count)s ukrytych wiadomości"
+                "few": "%(oneUser)swysłał %(count)s ukryte wiadomości",
+                "many": "%(oneUser)swysłał %(count)s ukrytych wiadomości"
             },
             "hidden_event_multiple": {
-                "other": "%(severalUsers)swysłało %(count)s ukrytych wiadomości",
-                "one": "%(severalUsers)swysłało ukrytą wiadomość"
+                "one": "%(severalUsers)swysłało ukrytą wiadomość",
+                "few": "%(severalUsers)swysłało %(count)s ukryte wiadomości",
+                "many": "%(severalUsers)swysłało %(count)s ukrytych wiadomości"
             },
             "invite_withdrawn": {
-                "other": "%(oneUser)swycofał zaproszenie %(count)s razy",
-                "one": "%(oneUser)swycofał zaproszenie"
+                "one": "%(oneUser)sutracił swoje zaproszenie",
+                "few": "%(oneUser)sutracił swoje zaproszenie %(count)s razy",
+                "many": "%(oneUser)sutracił swoje zaproszenie %(count)s razy"
             },
             "invite_withdrawn_multiple": {
-                "other": "%(severalUsers)swycofało zaproszenie %(count)s razy",
-                "one": "%(severalUsers)swycofało zaproszenie"
+                "one": "%(severalUsers)sutraciły swoje zaproszenie",
+                "few": "%(severalUsers)sutraciły swoje zaproszenie %(count)s razy",
+                "many": "%(severalUsers)sutraciły swoje zaproszenie %(count)s razy"
             },
             "invited": {
-                "other": "został zaproszony %(count)s razy",
-                "one": "został zaproszony"
+                "one": "został zaproszony",
+                "few": "został zaproszony %(count)s razy",
+                "many": "został zaproszony %(count)s razy"
             },
             "invited_multiple": {
                 "one": "zostało zaproszonych",
-                "other": "zostało zaproszonych %(count)s razy"
+                "few": "zostało zaproszonych %(count)s razy",
+                "many": "zostało zaproszonych %(count)s razy"
             },
             "joined": {
                 "one": "%(oneUser)s dołączył",
@@ -3646,52 +3678,64 @@
                 "many": "%(severalUsers)s dołączyło %(count)s razy"
             },
             "kicked": {
-                "one": "zostało usunięte",
-                "other": "zostało usunięte %(count)s raz"
+                "one": "został usunięty",
+                "few": "został usunięty %(count)s razy",
+                "many": "został usunięty %(count)s razy"
             },
             "kicked_multiple": {
                 "one": "zostało usuniętych",
-                "other": "zostało usuniętych %(count)s razy"
+                "few": "zostało usuniętych %(count)s razy",
+                "many": "zostało usuniętych %(count)s razy"
             },
             "left": {
-                "one": "%(oneUser)s wyszedł",
-                "other": "%(oneUser)sopuścił %(count)s razy"
+                "one": "%(oneUser)sopuścił pokój",
+                "few": "%(oneUser)sopuścił pokój %(count)s razy",
+                "many": "%(oneUser)sopuścił pokój %(count)s razy"
             },
             "left_multiple": {
-                "one": "%(severalUsers)s wyszło",
-                "other": "%(severalUsers)swyszło %(count)s razy"
+                "one": "%(severalUsers)sopuściło pokój",
+                "few": "%(severalUsers)sopuściło pokój %(count)s razy",
+                "many": "%(severalUsers)sopuściło pokój %(count)s razy"
             },
             "no_change": {
-                "other": "%(oneUser)snie wykonał zmian %(count)s razy",
-                "one": "%(oneUser)snie wykonał zmian"
+                "one": "%(oneUser)snie dokonał zmian",
+                "few": "%(oneUser)snie dokonał zmian %(count)s razy",
+                "many": "%(oneUser)snie dokonał zmian %(count)s razy"
             },
             "no_change_multiple": {
-                "other": "%(severalUsers)snie wykonało zmian %(count)s razy",
-                "one": "%(severalUsers)snie wykonało zmian"
+                "one": "%(severalUsers)snie dokonało zmian",
+                "few": "%(severalUsers)snie dokonało zmian %(count)s razy",
+                "many": "%(severalUsers)snie dokonało zmian %(count)s razy"
             },
             "pinned_events": {
-                "one": "%(oneUser)szmienił <a>przypięte wiadomości</a> pokoju",
-                "other": "%(oneUser)szmienił <a>przypięte wiadomości</a> pokoju %(count)s razy"
+                "one": "%(oneUser)szmienił <a>przypięte wiadomości</a> w pokoju",
+                "few": "%(oneUser)szmienił <a>przypięte wiadomości</a> w pokoju %(count)s razy",
+                "many": "%(oneUser)szmienił <a>przypięte wiadomości</a> w pokoju %(count)s razy"
             },
             "pinned_events_multiple": {
-                "one": "%(severalUsers)szmieniło <a>przypięte wiadomości</a> pokoju",
-                "other": "%(severalUsers)szmieniło <a>przypięte wiadomości</a> pokoju %(count)s razy"
+                "one": "%(severalUsers)szmienili <a>przypięte wiadomości</a> pokoju",
+                "few": "%(severalUsers)szmienili <a>przypięte wiadomości</a> pokoju %(count)s razy",
+                "many": "%(severalUsers)szmienili <a>przypięte wiadomości</a> pokoju %(count)s razy"
             },
             "redacted": {
                 "one": "%(oneUser)susunął wiadomość",
-                "other": "%(oneUser)susunął %(count)s wiadomości"
+                "few": "%(oneUser)susunął %(count)s wiadomości",
+                "many": "%(oneUser)susunął %(count)s wiadomości"
             },
             "redacted_multiple": {
                 "one": "%(severalUsers)susunęło wiadomość",
-                "other": "%(severalUsers)susunęło %(count)s wiadomości"
+                "few": "%(severalUsers)susunęło %(count)s wiadomości",
+                "many": "%(severalUsers)susunęło %(count)s wiadomości"
             },
             "rejected_invite": {
-                "other": "%(oneUser)sodrzucił ich zaproszenie %(count)s razy",
-                "one": "%(oneUser)sodrzucił ich zaproszenie"
+                "one": "%(oneUser)sodrzucił zaproszenie",
+                "few": "%(oneUser)sodrzucił zaproszenie %(count)s razy",
+                "many": "%(oneUser)sodrzucił zaproszenie %(count)s razy"
             },
             "rejected_invite_multiple": {
-                "one": "%(severalUsers)sodrzuciło ich zaproszenia",
-                "other": "%(severalUsers)sodrzuciło ich zaproszenia %(count)s razy"
+                "one": "%(severalUsers)sodrzuciło zaproszenie",
+                "few": "%(severalUsers)sodrzuciło zaproszenie %(count)s razy",
+                "many": "%(severalUsers)sodrzuciło zaproszenie %(count)s razy"
             },
             "rejoined": {
                 "one": "%(oneUser)s wyszedł i dołączył ponownie",
@@ -3705,11 +3749,13 @@
             },
             "unbanned": {
                 "one": "został odbanowany",
-                "other": "został odbanowany %(count)s razy"
+                "few": "został odbanowany %(count)s razy",
+                "many": "został odbanowany %(count)s razy"
             },
             "unbanned_multiple": {
-                "one": "zostali odbanowani",
-                "other": "zostali odbanowani %(count)s razy"
+                "one": "zostało odbanowanych",
+                "few": "zostało odbanowanych %(count)s razy",
+                "many": "zostało odbanowanych %(count)s razy"
             }
         },
         "thread_info_basic": "Z wątku",
@@ -3725,7 +3771,9 @@
         "undecryptable_tooltip": "Wiadomość nie mogła zostać rozszyfrowana"
     },
     "truncated_list_n_more": {
-        "other": "I %(count)s więcej…"
+        "one": "",
+        "few": "i jeszcze %(count)s...",
+        "many": "i jeszcze %(count)s..."
     },
     "unsupported_browser": {
         "description": "Jeśli kontynuujesz, niektóre funkcje mogą przestać działać, jak i istnieje ryzyko utraty danych w przyszłości. Zaktualizuj przeglądarkę, aby nadal używać %(brand)s.",
@@ -3745,7 +3793,7 @@
         "release_notes_toast_title": "Co nowego",
         "see_changes_button": "Co nowego?",
         "toast_description": "Dostępna jest nowa wersja %(brand)s",
-        "toast_title": "Aktualizuj %(brand)s",
+        "toast_title": "Aktualizacja %(brand)s",
         "unavailable": "Niedostępny"
     },
     "update_room_access_modal": {
@@ -3769,8 +3817,9 @@
         "title_progress": "Prześlij pliki (%(current)s z %(total)s)",
         "upload_all_button": "Prześlij wszystko",
         "upload_n_others_button": {
-            "other": "Prześlij %(count)s innych plików",
-            "one": "Prześlij %(count)s inny plik"
+            "one": "Prześlij %(count)s inny plik",
+            "few": "Prześlij %(count)s inne pliki",
+            "many": "Prześlij %(count)s innych plików"
         }
     },
     "user_info": {
@@ -3781,7 +3830,7 @@
         "ban_space_everything": "Zbanuj ich z wszystkiego co mogę",
         "ban_space_specific": "Zbanuj ich z określonych rzeczy, które mogę",
         "deactivate_confirm_action": "Dezaktywuj użytkownika",
-        "deactivate_confirm_description": "Dezaktywacja tego użytkownika, wyloguje go i uniemożliwi logowanie ponowne. Dodatkowo, opuści wszystkie pokoje, w których się znajdują. Tej akcji nie można cofnąć. Czy na pewno chcesz dezaktywować tego użytkownika?",
+        "deactivate_confirm_description": "Dezaktywacja tego użytkownika, usunie jego urządzenia i uniemożliwi ponowne zalogowanie. Dodatkowo, opuści wszystkie pokoje, w których się znajduje. Tej akcji nie można cofnąć. Czy na pewno chcesz dezaktywować tego użytkownika?",
         "deactivate_confirm_title": "Dezaktywować użytkownika?",
         "demote_button": "Degraduj",
         "demote_self_confirm_description_space": "Nie będziesz mógł cofnąć tej zmiany, ponieważ degradujesz swoje uprawnienia. Jeśli jesteś ostatnim użytkownikiem uprzywilejowanym w tej przestrzeni, nie będziesz mógł ich odzyskać.",
@@ -3810,12 +3859,14 @@
         "promote_warning": "Nie będziesz mógł cofnąć tej zmiany, ponieważ nadajesz użytkownikowi uprawnienia administratorskie równe Twoim.",
         "redact": {
             "confirm_button": {
-                "other": "Usuń %(count)s wiadomości",
-                "one": "Usuń 1 wiadomość"
+                "one": "Usuń 1 wiadomość",
+                "few": "Usuń %(count)s wiadomości",
+                "many": "Usuń %(count)s wiadomości"
             },
             "confirm_description_1": {
-                "one": "Zamierzasz usunąć %(count)s wiadomość przez %(user)s. To usunie ją permanentnie dla wszystkich w konwersacji. Czy chcesz kontynuować?",
-                "other": "Zamierzasz usunąć %(count)s wiadomości przez %(user)s. To usunie je permanentnie dla wszystkich w konwersacji. Czy chcesz kontynuować?"
+                "one": "Zamierzasz usunąć %(count)s wiadomość użytkownika %(user)s. Zniknie nieodwracalnie dla wszystkich osób w rozmowie. Kontynuować?",
+                "few": "Zamierzasz usunąć %(count)s wiadomości użytkownika %(user)s. Znikną nieodwracalnie dla wszystkich osób w rozmowie. Kontynuować?",
+                "many": "Zamierzasz usunąć %(count)s wiadomości użytkownika %(user)s. Znikną nieodwracalnie dla wszystkich osób w rozmowie. Kontynuować?"
             },
             "confirm_description_2": "Dla większej liczby wiadomości, może to zająć trochę czasu. Nie odświeżaj klienta w tym czasie.",
             "confirm_keep_state_explainer": "Odznacz, jeśli chcesz również usunąć wiadomości systemowe tego użytkownika (np. zmiana członkostwa, profilu…)",
@@ -3843,6 +3894,9 @@
         "verify_button": "Zweryfikuj użytkownika",
         "verify_explainer": "Dla dodatkowego bezpieczeństwa, zweryfikuj tego użytkownika za pomocą jednorazowego kodu na obu waszych urządzeniach."
     },
+    "user_status": {
+        "on_a_call": "W trakcie rozmowy"
+    },
     "voip": {
         "already_in_call": "Już dzwoni",
         "already_in_call_person": "Prowadzisz już rozmowę z tą osobą.",
@@ -3860,9 +3914,9 @@
         "call_held_switch": "Zawieszono rozmowę <a>Przełącz</a>",
         "call_members": {
             "exhaustive": {
-                "one": "<avatars/> w połączeniu",
-                "few": "<avatars/> w połączeniu",
-                "many": "<avatars/> w połączeniu"
+                "one": "<avatars/> w trakcie połączenia",
+                "few": "<avatars/> w trakcie połączenia",
+                "many": "<avatars/> w trakcie połączenia"
             },
             "overflow": {
                 "one": "<avatars/> +%(overflowCount)s w połączeniu",
@@ -3952,8 +4006,11 @@
         "user_busy_description": "Użytkownik, do którego zadzwoniłeś jest zajęty.",
         "user_is_presenting": "%(sharerName)s prezentuje",
         "video_call": "Rozmowa wideo",
+        "video_call_incoming": "Przychodzące połączenie wideo",
         "video_call_using": "Połączenie wideo przy użyciu:",
         "voice_call": "Rozmowa głosowa",
+        "voice_call_incoming": "Przychodzące połączenie głosowe",
+        "voice_call_using": "Połączenie głosowe przy użyciu:",
         "you_are_presenting": "Prezentujesz"
     },
     "web_default_device_name": "%(appName)s: %(browserName)s na %(osName)s",
@@ -3983,6 +4040,7 @@
             "change_name_this_room": "Zmień nazwę tego pokoju",
             "change_topic_active_room": "Zmień temat swojego obecnego pokoju",
             "change_topic_this_room": "Zmień temat tego pokoju",
+            "download_file": "Pobierz pliki z repozytorium multimediów",
             "receive_membership_active_room": "Pokazuj kiedy osoby wchodzą, wychodzą, lub zostają zaproszone do aktywnego pokoju",
             "receive_membership_this_room": "Pokazuj kiedy ktoś wejdzie, wyjdzie, lub zostanie zaproszony do tego pokoju",
             "remove_ban_invite_leave_active_room": "Usuń, zbanuj lub zaproś ludzi do aktywnego pokoju i wyjdź z niego",
@@ -4016,9 +4074,9 @@
             "send_event_type_active_room": "Wysyłaj wydarzenia <b>%(eventType)s</b> jako Ty w obecnym pokoju",
             "send_event_type_this_room": "Wysyłaj zdarzenia <b>%(eventType)s</b> jako Ty w tym pokoju",
             "send_files_active_room": "Wyślij pliki jako ty do aktywnego pokoju",
-            "send_files_this_room": "Wyślij pliki jako ty do tego pokoju",
-            "send_images_active_room": "Wysyłaj obrazki jako ty w aktywnym pokoju",
-            "send_images_this_room": "Wysyłaj obrazki jako ty w tym pokoju",
+            "send_files_this_room": "Wyślij pliki jako Ty do tego pokoju",
+            "send_images_active_room": "Wysyłaj obrazki jako Ty w obecnym pokoju",
+            "send_images_this_room": "Wysyłaj obrazki jako Ty w tym pokoju",
             "send_messages_active_room": "Wysyłaj wiadomości jako Ty w obecnym pokoju",
             "send_messages_this_room": "Wysyłaj wiadomości jako Ty w tym pokoju",
             "send_msgtype_active_room": "Wysyłaj wiadomości <b>%(msgtype)s</b> jako Ty w bieżącym pokoju",
@@ -4038,13 +4096,7 @@
         "close_to_view_right_panel": "Zamknij widżet, aby wyświetlić go w tym panelu",
         "context_menu": {
             "delete": "Usuń widżet",
-            "delete_warning": "Usunięcie widżetu usuwa go dla wszystkich użytkowników w tym pokoju. Czy na pewno chcesz usunąć ten widżet?",
-            "move_left": "Przenieś w lewo",
-            "move_right": "Przenieś w prawo",
-            "remove": "Usuń dla wszystkich",
-            "revoke": "Odwołaj uprawnienia",
-            "screenshot": "Zrób zdjęcie",
-            "start_audio_stream": "Rozpocznij transmisję audio"
+            "delete_warning": "Usunięcie widżetu usuwa go dla wszystkich użytkowników w tym pokoju. Czy na pewno chcesz usunąć ten widżet?"
         },
         "cookie_warning": "Ten widżet może używać plików cookies.",
         "error_hangup_description": "Zostałeś rozłączony z rozmowy. (Błąd: %(message)s)",
@@ -4111,8 +4163,8 @@
             "similarToCommon": "Jest to podobne do powszechnie stosowanego hasła",
             "simpleRepeat": "Powtórzenia takie jak \"aaa\" są łatwe do odgadnięcia",
             "straightRow": "Proste rzędy klawiszy są łatwe do odgadnięcia",
-            "topHundred": "To jest 100 najpopularniejszych haseł",
-            "topTen": "To jest 10 najpopularniejszych haseł",
+            "topHundred": "Jest to jedno ze stu najpopularniejszych haseł",
+            "topTen": "Jest to jedno z dziesięciu najpopularniejszych haseł",
             "userInputs": "Nie powinny się tu znajdować żadne dane osobiste lub związane ze stroną.",
             "wordByItself": "Samo słowo jest łatwe do odgadnięcia"
         }
diff --git a/apps/web/src/i18n/strings/pt.json b/apps/web/src/i18n/strings/pt.json
index a0b1fbce12..7f80863ab0 100644
--- a/apps/web/src/i18n/strings/pt.json
+++ b/apps/web/src/i18n/strings/pt.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Selecionador de emojis",
         "jump_first_invite": "Salta para o primeiro convite.",
         "message_composer": "Compositor de mensagens",
         "n_unread_messages": {
@@ -11,8 +10,6 @@
             "one": "1 menção não lida.",
             "other": "%(count)s mensagens não lidas, incluindo menções."
         },
-        "recent_rooms": "Salas recentes",
-        "room_name": "Sala %(name)s",
         "room_status_bar": "Barra de estado da sala",
         "seek_bar_label": "Barra de procura de áudio",
         "unread_messages": "Mensagens não lidas"
@@ -22,7 +19,6 @@
         "accept": "Aceitar",
         "add": "Adicionar",
         "add_existing_room": "Adicionar sala existente",
-        "add_people": "Adicionar pessoas",
         "apply": "Aplicar",
         "approve": "Aprovar",
         "ask_to_join": "Pedir para participar",
@@ -55,7 +51,6 @@
         "enter_fullscreen": "Entra no ecrã completo",
         "exit_fullscreeen": "Sai do ecrã completo",
         "expand": "Expandir",
-        "explore_public_rooms": "Explorar salas públicas",
         "explore_rooms": "Explorar rooms",
         "export": "Exportar",
         "forward": "Encaminhar",
@@ -67,8 +62,6 @@
         "ignore": "Ignorar",
         "import": "Importar",
         "invite": "Convidar",
-        "invite_to_space": "Convida para o espaço",
-        "invites_list": "Convidar",
         "join": "Participar",
         "learn_more": "Saiba mais",
         "leave": "Sair",
@@ -95,7 +88,6 @@
         "rename": "Renomear",
         "reply": "Responder",
         "reply_in_thread": "Responder no tópico",
-        "report_content": "Denunciar conteúdo",
         "resend": "Reenviar",
         "reset": "Redefinir",
         "resume": "Retoma",
@@ -114,8 +106,6 @@
         "sign_out": "Sair",
         "skip": "Saltar",
         "start": "Iniciar",
-        "start_chat": "Iniciar conversa",
-        "start_new_chat": "Inicia um novo chat",
         "stop": "Parar",
         "submit": "Enviar",
         "subscribe": "Subscrever",
@@ -215,10 +205,7 @@
         "log_in_new_account": "<a>Inicia sessão em</a> na tua nova conta.",
         "logout_dialog": {
             "description": "Tens a certeza que queres encerrar a sessão?",
-            "megolm_export": "Exportação manual de chaves",
             "setup_key_backup_title": "Perderás o acesso às tuas mensagens encriptadas",
-            "setup_secure_backup_description_1": "As mensagens encriptadas são protegidas com encriptação de ponta a ponta. Só tu e o(s) destinatário(s) têm as chaves para ler estas mensagens.",
-            "setup_secure_backup_description_2": "Quando terminares a sessão, estas chaves serão eliminadas deste dispositivo, o que significa que não poderás ler mensagens encriptadas, a menos que tenhas as chaves para elas nos teus outros dispositivos ou tenhas feito uma cópia de segurança das mesmas no servidor.",
             "skip_key_backup": "Não quero as minhas mensagens encriptadas"
         },
         "misconfigured_body": "Pede ao teu administrador %(brand)s para verificar <a>a tua configuração</a> para ver se há entradas incorretas ou duplicadas.",
@@ -270,7 +257,6 @@
             "point_the_camera": "Aponta a câmara para o código QR mostrado aqui",
             "scan_code_instruction": "Lê o código QR com outro dispositivo",
             "scan_qr_code": "Ler código QR",
-            "security_code": "Código de segurança",
             "security_code_prompt": "Se solicitado, insira o código abaixo no seu outro dispositivo.",
             "select_qr_code": "Seleciona \"%(scanQRCode)s\"",
             "unsupported_explainer": "O teu fornecedor de conta não suporta o início de sessão num novo dispositivo com um código QR.",
@@ -475,7 +461,6 @@
         "encrypted": "Encriptado",
         "error": "Erro",
         "faq": "Perguntas frequentes",
-        "favourites": "Favoritos",
         "feedback": "Comentários",
         "filter_results": "Filtrar resultados",
         "forward_message": "Encaminhar mensagem",
@@ -483,7 +468,6 @@
         "go_to_settings": "Ir para as definições",
         "guest": "Convidado",
         "help": "Ajuda",
-        "historical": "Histórico",
         "home": "Início",
         "homeserver": "Servidor doméstico",
         "identity_server": "Servidor de identidade",
@@ -495,13 +479,11 @@
         "light": "Claro",
         "loading": "A carregar…",
         "location": "Localização",
-        "low_priority": "Baixa prioridade",
         "matrix": "Matrix",
         "message": "Mensagem",
         "message_layout": "Disposição da mensagem",
         "message_timestamp_invalid": "Carimbo de data/hora inválido",
         "microphone": "Microfone",
-        "model": "Modelo",
         "modern": "Moderno",
         "mute": "Silenciar",
         "n_members": {
@@ -559,7 +541,6 @@
         "success": "Sucesso",
         "suggestions": "Sugestões",
         "support": "Suporte",
-        "system_alerts": "Alertas do sistema",
         "theme": "Tema",
         "thread": "Tópico",
         "threads": "Tópicos",
@@ -576,7 +557,6 @@
         "username": "Nome de utilizador",
         "verified": "Verificado",
         "version": "Versão",
-        "video": "Vídeo",
         "video_room": "Sala de vídeo",
         "view_message": "Ver mensagem",
         "warning": "Aviso"
@@ -832,7 +812,6 @@
         "thread_root_id": "ID da raiz do tópico: %(threadRootId)s",
         "threads_timeline": "Cronograma de tópicos",
         "title": "Ferramentas de desenvolvedor",
-        "toggle_event": "alternar evento",
         "toolbox": "Caixa de ferramentas",
         "use_at_own_risk": "Esta interface de utilizador NÃO verifica os tipos dos valores. Utiliza-a por tua conta e risco.",
         "user_read_up_to": "O utilizador leu até: ",
@@ -854,22 +833,6 @@
     },
     "dialog_close_label": "Fechar diálogo",
     "download_completed": "Download Concluído",
-    "emoji": {
-        "categories": "Categorias",
-        "category_activities": "Atividades",
-        "category_animals_nature": "Animais e Natureza",
-        "category_flags": "Bandeiras",
-        "category_food_drink": "Comida e Bebida",
-        "category_frequently_used": "Frequentemente utilizado",
-        "category_objects": "Objetos",
-        "category_smileys_people": "Carinhas Sorridentes e Pessoas",
-        "category_symbols": "Símbolos",
-        "category_travel_places": "Viagens e Locais",
-        "quick_reactions": "Reações rápidas"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Cancelar pesquisa"
-    },
     "empty_room": "Sala vazia",
     "empty_room_was_name": "Sala vazia (era %(oldName)s)",
     "encryption": {
@@ -926,17 +889,6 @@
         "set_up_recovery": "Configurar a recuperação",
         "set_up_recovery_toast_description": "Gera uma chave de recuperação que pode ser utilizada para restaurar o teu histórico de mensagens encriptadas, caso percas o acesso aos teus dispositivos.",
         "set_up_toast_title": "Configura uma cópia de segurança segura",
-        "setup_secure_backup": {
-            "explainer": "Guarda as tuas chaves antes de saíres para evitar perdê-las."
-        },
-        "udd": {
-            "interactive_verification_button": "Verifica interactivamente por emoji",
-            "other_ask_verify_text": "Pede a este utilizador para verificar a sua sessão ou verifica-a manualmente abaixo.",
-            "other_new_session_text": "%(name)s(%(userId)s ) entrou numa nova sessão sem verificá-la:",
-            "own_ask_verify_text": "Verifica a tua outra sessão utilizando uma das opções abaixo.",
-            "own_new_session_text": "Entraste numa nova sessão sem a verificar:",
-            "title": "Não é confiável"
-        },
         "unable_to_setup_keys_error": "Não é possível configurar as chaves",
         "verification": {
             "accepting": "Aceitando...",
@@ -1407,7 +1359,6 @@
         "extended_profiles_msc_support": "Requer que o teu servidor suporte MSC4133",
         "feature_disable_call_per_sender_encryption": "Desativar a cifragem por remetente na Element Call",
         "feature_wysiwyg_composer_description": "Utiliza texto rico em vez de Markdown no compositor de mensagens.",
-        "group_calls": "Nova experiência de chamada de grupo",
         "group_developer": "Desenvolvedor",
         "group_encryption": "Encriptação",
         "group_experimental": "Experimental",
@@ -1422,7 +1373,6 @@
         "group_voip": "Voz e vídeo",
         "group_widgets": "Widgets",
         "hidebold": "Ocultar o ponto de notificação (mostrar apenas os emblemas dos contadores)",
-        "html_topic": "Mostrar a representação HTML dos tópicos da sala",
         "join_beta": "Junta-te à versão beta",
         "join_beta_reload": "Se entrares na versão beta, recarregas o site %(brand)s.",
         "jump_to_date": "Saltar para a data (adiciona cabeçalhos /jumptodate e saltar para a data)",
@@ -1434,20 +1384,16 @@
         "location_share_live_description": "Implementação temporária. As localizações permanecem no histórico da sala.",
         "mjolnir": "Novas formas de ignorar pessoas",
         "msc3531_hide_messages_pending_moderation": "Permitir que os moderadores ocultem mensagens pendentes de moderação.",
-        "new_room_list": "Ativar nova lista de salas",
         "notification_settings": "Novas Definições de Notificação",
         "notification_settings_beta_caption": "Apresentamos uma forma mais simples de alterar as tuas definições de notificação. Personaliza o teu %(brand)s, tal como gostas.",
         "notification_settings_beta_title": "Definições de Notificação",
         "notifications": "Ativar o painel de notificações no cabeçalho da sala",
         "render_reaction_images": "Renderizar imagens personalizadas em reações",
         "render_reaction_images_description": "Por vezes designados por \"emojis personalizados\".",
-        "report_to_moderators": "Denunciar aos moderadores",
-        "report_to_moderators_description": "Nas salas que suportam moderação, o botão \"Denunciar\" permite-te denunciar abusos aos moderadores da sala.",
         "sliding_sync": "Modo Sliding Sync",
         "sliding_sync_description": "Em desenvolvimento ativo, não pode ser desativado.",
         "sliding_sync_disabled_notice": "Termina a sessão e volta a entrar para desativar",
         "sliding_sync_server_no_support": "O teu servidor não tem suporte nativo",
-        "under_active_development": "Em desenvolvimento ativo.",
         "unrealiable_e2e": "Não é fiável em salas encriptadas",
         "video_rooms": "Salas de vídeo",
         "video_rooms_a_new_way_to_chat": "Uma nova forma de conversar por voz e vídeo em %(brand)s.",
@@ -1503,9 +1449,6 @@
         "room_rejoin_warning": "Esta sala não é pública. Não poderás voltar a entrar sem um convite.",
         "space_rejoin_warning": "Este espaço não é público. Não poderás voltar a entrar sem um convite."
     },
-    "left_panel": {
-        "open_dial_pad": "Abre o teclado de marcação"
-    },
     "lightbox": {
         "rotate_left": "Rodar à esquerda",
         "rotate_right": "Rodar à direita",
@@ -1603,7 +1546,6 @@
         "mentions_and_keywords": "@menções e palavras-chave",
         "mentions_and_keywords_description": "Recebe notificações apenas com menções e palavras-chave, conforme definido nas tuas definições de <a></a>",
         "mentions_keywords": "Menções e palavras-chave",
-        "message_didnt_send": "A mensagem não foi enviada. Clica para obteres informações.",
         "mute_description": "Não receberás quaisquer notificações"
     },
     "notifier": {
@@ -1689,7 +1631,6 @@
     },
     "quick_settings": {
         "all_settings": "Todas as definições",
-        "metaspace_section": "Fixar na barra lateral",
         "sidebar_settings": "Mais opções",
         "title": "Definições rápidas"
     },
@@ -1707,25 +1648,10 @@
     },
     "report_content": {
         "description": "Ao reportar esta mensagem, envias o seu \"ID de evento\" único para o administrador do teu servidor. Se as mensagens nesta sala estiverem cifradas, o administrador não poderá ler o texto ou ver quaisquer ficheiros ou imagens.",
-        "disagree": "Não concordo",
-        "error_create_room_moderation_bot": "Não é possível criar uma sala com o bot de moderação",
         "hide_messages_from_user": "Verifica se pretendes ocultar todas as mensagens actuais e futuras deste utilizador.",
         "ignore_user": "Ignora o utilizador",
-        "illegal_content": "Conteúdo ilegal",
         "missing_reason": "Por favor, indica o motivo da tua denúncia.",
-        "nature": "Escolhe uma natureza e descreve o que torna esta mensagem abusiva.",
-        "nature_disagreement": "O que este utilizador está a escrever está errado.\nIsto será reportado aos moderadores da sala.",
-        "nature_illegal": "Este utilizador está a demonstrar um comportamento ilegal, por exemplo, ao fazer \"doxing\" a pessoas ou ao ameaçar com violência.\nEsta situação será comunicada aos moderadores da sala, que podem encaminhar o caso para as autoridades legais.",
-        "nature_nonstandard_admin": "Esta sala é dedicada a conteúdos ilegais ou tóxicos, ou os moderadores não conseguem moderar conteúdos ilegais ou tóxicos.\nIsto será comunicado aos administradores da %(homeserver)s.",
-        "nature_nonstandard_admin_encrypted": "Esta sala é dedicada a conteúdos ilegais ou tóxicos ou os moderadores não conseguem moderar conteúdos ilegais ou tóxicos.\nIsto será comunicado aos administradores da %(homeserver)s. Os administradores NÃO poderão ler o conteúdo cifrado desta sala.",
-        "nature_other": "Qualquer outro motivo. Descreve o problema.\nEste problema será comunicado aos moderadores da sala.",
-        "nature_spam": "Este utilizador está a enviar spam para a sala através de anúncios, ligações para anúncios ou propaganda.\nIsto será comunicado aos moderadores da sala.",
-        "nature_toxic": "Este utilizador está a demonstrar um comportamento tóxico, por exemplo, insultando outros utilizadores ou partilhando conteúdos só para adultos numa sala familiar ou violando as regras desta sala.\nEste comportamento será comunicado aos moderadores da sala.",
-        "other_label": "Outros",
-        "report_content_to_homeserver": "Denuncia conteúdo ao administrador do teu servidor doméstico",
-        "report_entire_room": "Denuncia a sala inteira",
-        "spam_or_propaganda": "Spam ou propaganda",
-        "toxic_behaviour": "Comportamento tóxico"
+        "report_content_to_homeserver": "Denuncia conteúdo ao administrador do teu servidor doméstico"
     },
     "restore_key_backup_dialog": {
         "count_of_decryption_failures": "Falha ao descriptografar%(failedCount)s sessões!",
@@ -1984,41 +1910,16 @@
         "waiting_for_join_title": "Aguarda a adesão dos utilizadores %(brand)s"
     },
     "room_list": {
-        "add_room_label": "Adicionar sala",
         "add_space_label": "Adiciona espaço",
-        "breadcrumbs_empty": "Nenhuma sala visitada recentemente",
-        "breadcrumbs_label": "Salas visitadas recentemente",
         "failed_add_tag": "Falha ao adicionar %(tagName)s à sala",
         "failed_remove_tag": "Não foi possível remover a marcação %(tagName)s desta sala",
         "failed_set_dm_tag": "Falha ao definir a etiqueta de mensagem direta",
-        "home_menu_label": "Opções de casa",
-        "join_public_room_label": "Participa na sala pública",
-        "joining_rooms_status": {
-            "one": "Atualmente ingressando%(count)s sala",
-            "other": "Atualmente ingressando%(count)s salas"
-        },
         "list_title": "Lista de salas",
         "more_options": {
             "leave_room": "Sair da sala"
         },
         "notification_options": "Opções de notificação",
-        "redacting_messages_status": {
-            "one": "Atualmente removendo mensagens na %(count)s sala",
-            "other": "Atualmente removendo mensagens em %(count)s salas"
-        },
-        "show_less": "Mostrar menos",
-        "show_n_more": {
-            "one": "Mostrar %(count)s mais",
-            "other": "Mostrar %(count)s mais"
-        },
-        "show_previews": "Mostra pré-visualizações de mensagens",
-        "sort_by": "Ordenar por",
-        "sort_by_activity": "Atividade",
-        "sort_by_alphabet": "A-Z",
-        "sort_unread_first": "Mostra primeiro as salas com mensagens não lidas",
-        "space_menu_label": "%(spaceName)s menu",
-        "sublist_options": "Lista de opções",
-        "suggested_rooms_heading": "Salas sugeridas"
+        "show_less": "Mostrar menos"
     },
     "room_settings": {
         "access": {
@@ -2689,7 +2590,6 @@
         "send_typing_notifications": "Enviar notificações de digitação",
         "sessions": {
             "best_security_note": "Para maior segurança, verifica as tuas sessões e termina a sessão de qualquer sessão que já não reconheças ou utilizes.",
-            "browser": "Navegador",
             "confirm_sign_out": {
                 "one": "Confirma a saída deste dispositivo",
                 "other": "Confirma a saída destes dispositivos"
@@ -2740,7 +2640,6 @@
             "no_sessions": "Nenhuma sessão encontrada",
             "no_unverified_sessions": "Nenhuma sessão não verificada foi encontrada.",
             "no_verified_sessions": "Nenhuma sessão verificada foi encontrada.",
-            "os": "Sistema operativo",
             "other_sessions_heading": "Outras sessões",
             "push_heading": "Notificações push",
             "push_subheading": "Recebe notificações push sobre esta sessão.",
@@ -2800,13 +2699,11 @@
         "showbold": "Mostra toda a atividade na lista de salas (pontos ou número de mensagens não lidas)",
         "sidebar": {
             "dialog_title": "<strong>Configurações:</strong> Barra lateral",
-            "metaspaces_favourites_description": "Agrupa todas as tuas salas e pessoas favoritas num único local.",
             "metaspaces_home_all_rooms": "Mostra todas as salas",
             "metaspaces_home_all_rooms_description": "Mostra todos as tuas salas na Página Inicial, mesmo que estejam num espaço.",
             "metaspaces_home_description": "A página inicial é útil para obter uma visão geral de tudo.",
             "metaspaces_orphans": "Salas fora de um espaço",
             "metaspaces_orphans_description": "Agrupa todas as tuas salas que não fazem parte de um espaço num único local.",
-            "metaspaces_people_description": "Agrupa todas as tuas pessoas num único local.",
             "metaspaces_subsection": "Espaços para mostrar",
             "metaspaces_video_rooms": "Salas de vídeo e conferências",
             "metaspaces_video_rooms_description": "Agrupa todas as salas de vídeo privadas e conferências.",
@@ -2827,7 +2724,6 @@
             "audio_output": "Saída de áudio",
             "audio_output_empty": "Não foram detectadas saídas de áudio",
             "auto_gain_control": "Controlo automático de ganho",
-            "connection_section": "Ligação",
             "dialog_title": "<strong>Definições:</strong> Voz e vídeo",
             "echo_cancellation": "Cancelamento de eco",
             "enable_fallback_ice_server": "Permite o servidor de assistência a chamadas de recurso (%(server)s)",
@@ -3007,12 +2903,6 @@
     "space_settings": {
         "title": "Configurações - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Não tens permissões para adicionar salas a este espaço",
-        "error_no_permission_add_space": "Não tens permissões para adicionar espaços a este espaço",
-        "error_no_permission_create_room": "Não tens permissões para criar novas salas neste espaço",
-        "error_no_permission_invite": "Não tens permissões para convidar pessoas para este espaço"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Introduz o nome de um novo servidor que pretendes explorar.",
@@ -3138,7 +3028,6 @@
         "download_action_downloading": "A transferir…",
         "download_failed": "A transferência falhou",
         "download_failed_description": "Ocorreu um erro ao transferir este ficheiro",
-        "e2e_state": "Estado da encriptação de ponta a ponta",
         "edits": {
             "tooltip_label": "Editado em %(date)s. Clica para ver as edições.",
             "tooltip_sub": "Clica para ver as edições",
@@ -3220,9 +3109,7 @@
         "m.poll.start": "%(senderName)s iniciou uma sondagem - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s mudaste o avatar da sala.",
-            "changed_img": "%(senderDisplayName)s alterou a imagem da sala para <img/>",
-            "lightbox_title": "%(senderDisplayName)s alterou a imagem da sala %(roomName)s",
-            "removed": "%(senderDisplayName)s removeu a imagem da sala."
+            "lightbox_title": "%(senderDisplayName)s alterou a imagem da sala %(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3822,13 +3709,7 @@
         "close_to_view_right_panel": "Fecha este widget para o veres neste painel",
         "context_menu": {
             "delete": "Apagar widget",
-            "delete_warning": "A eliminação de um widget remove-o para todos os utilizadores desta sala. Tens a certeza de que queres apagar este widget?",
-            "move_left": "Mover para a esquerda",
-            "move_right": "Mover para a direita",
-            "remove": "Remover para todos",
-            "revoke": "Revogar permissões",
-            "screenshot": "Tira uma fotografia",
-            "start_audio_stream": "Iniciar transmissão de áudio"
+            "delete_warning": "A eliminação de um widget remove-o para todos os utilizadores desta sala. Tens a certeza de que queres apagar este widget?"
         },
         "cookie_warning": "Este widget pode utilizar cookies.",
         "error_hangup_description": "Foste desligado da chamada. (Erro: %(message)s)",
diff --git a/apps/web/src/i18n/strings/pt_BR.json b/apps/web/src/i18n/strings/pt_BR.json
index d948b281f8..63b11ce95e 100644
--- a/apps/web/src/i18n/strings/pt_BR.json
+++ b/apps/web/src/i18n/strings/pt_BR.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Seletor de emojis",
         "jump_first_invite": "Ir para o primeiro convite.",
         "message_composer": "Compositor de mensagens",
         "n_unread_messages": {
@@ -11,8 +10,6 @@
             "other": "%(count)s mensagens não lidas, incluindo menções.",
             "one": "1 menção não lida."
         },
-        "recent_rooms": "Salas recentes",
-        "room_name": "Sala %(name)s",
         "room_status_bar": "Barra de status da sala",
         "seek_bar_label": "Barra de busca de áudio",
         "unread_messages": "Mensagens não lidas."
@@ -22,7 +19,6 @@
         "accept": "Aceitar",
         "add": "Adicionar",
         "add_existing_room": "Adicionar sala existente",
-        "add_people": "Adicionar pessoas",
         "apply": "Aplicar",
         "approve": "Autorizar",
         "ask_to_join": "Pedir para participar",
@@ -57,7 +53,6 @@
         "enter_fullscreen": "Entrar em tela cheia",
         "exit_fullscreeen": "Sair da tela cheia",
         "expand": "Expandir",
-        "explore_public_rooms": "Explorar salas públicas",
         "explore_rooms": "Explorar salas",
         "export": "Exportar",
         "forward": "Encaminhar",
@@ -69,8 +64,6 @@
         "ignore": "Bloquear",
         "import": "Importar",
         "invite": "Convidar",
-        "invite_to_space": "Convidar para o espaço",
-        "invites_list": "Convidar",
         "join": "Entrar",
         "learn_more": "Saiba mais",
         "leave": "Sair",
@@ -97,7 +90,6 @@
         "rename": "Renomear",
         "reply": "Responder",
         "reply_in_thread": "Responder no tópico",
-        "report_content": "Denunciar conteúdo",
         "report_room": "Reportar sala",
         "resend": "Reenviar",
         "reset": "Redefinir",
@@ -117,8 +109,6 @@
         "sign_out": "Sair",
         "skip": "Pular",
         "start": "Iniciar",
-        "start_chat": "Iniciar conversa",
-        "start_new_chat": "Comece um novo bate-papo",
         "stop": "Pare",
         "submit": "Enviar",
         "subscribe": "Inscrever-se",
@@ -219,10 +209,7 @@
         "log_in_new_account": "<a>Entrar</a> em sua nova conta.",
         "logout_dialog": {
             "description": "Deseja mesmo sair?",
-            "megolm_export": "Exportar chaves manualmente",
             "setup_key_backup_title": "Você perderá acesso às suas mensagens criptografadas",
-            "setup_secure_backup_description_1": "As mensagens estão protegidas com a criptografia de ponta a ponta. Somente você e o(s) destinatário(s) têm as chaves para ler essas mensagens.",
-            "setup_secure_backup_description_2": "Quando você se desconectar, essas chaves serão excluídas desse dispositivo, o que significa que você não poderá ler mensagens criptografadas, a menos que tenha as chaves delas em seus outros dispositivos ou tenha feito backup delas no servidor.",
             "skip_key_backup": "Não quero minhas mensagens criptografadas"
         },
         "misconfigured_body": "Entre em contato com o administrador do %(brand)s para verificar se há entradas inválidas ou duplicadas nas <a>suas configurações</a>.",
@@ -274,7 +261,6 @@
             "point_the_camera": "Escaneie o código QR mostrado aqui",
             "scan_code_instruction": "Digitalize o código QR com outro dispositivo",
             "scan_qr_code": "Iniciar sessão com código QR",
-            "security_code": "Código de segurança",
             "security_code_prompt": "Se solicitado, insira o código abaixo em seu outro dispositivo.",
             "select_qr_code": "Selecione \"%(scanQRCode)s”",
             "unsupported_explainer": "Seu provedor de conta não suporta o login em um novo dispositivo com um código QR.",
@@ -480,7 +466,6 @@
         "encrypted": "Criptografada",
         "error": "Erro",
         "faq": "Perguntas frequentes",
-        "favourites": "Favoritos",
         "feedback": "Fale conosco",
         "filter_results": "Filtrar resultados",
         "forward_message": "Encaminhar",
@@ -488,7 +473,6 @@
         "go_to_settings": "Ir para as configurações",
         "guest": "Convidado",
         "help": "Ajuda",
-        "historical": "Histórico",
         "home": "Início",
         "homeserver": "Servidor local",
         "identity_server": "Servidor de identidade",
@@ -500,13 +484,11 @@
         "light": "Claro",
         "loading": "Carregando...",
         "location": "Localidade",
-        "low_priority": "Baixa prioridade",
         "matrix": "Matrix",
         "message": "Mensagem",
         "message_layout": "Aparência da mensagem",
         "message_timestamp_invalid": "Data/hora inválido",
         "microphone": "Microfone",
-        "model": "Modelo",
         "moderation_and_safety": "Moderação e segurança",
         "modern": "Moderno",
         "mute": "Mudo",
@@ -565,7 +547,6 @@
         "success": "Sucesso",
         "suggestions": "Sugestões",
         "support": "Suporte",
-        "system_alerts": "Alertas do sistema",
         "theme": "Tema",
         "thread": "Tópico",
         "threads": "Tópicos",
@@ -582,7 +563,6 @@
         "username": "Nome de usuário",
         "verified": "Verificado",
         "version": "Versão",
-        "video": "Vídeo",
         "video_room": "Sala de vídeo",
         "view_message": "Ver mensagem",
         "warning": "Atenção"
@@ -868,7 +848,6 @@
         "thread_root_id": "ID raiz do tópico: %(threadRootId)s",
         "threads_timeline": "Linha do tempo dos tópicos",
         "title": "Ferramentas de desenvolvimento",
-        "toggle_event": "alternar evento",
         "toolbox": "Ferramentas",
         "use_at_own_risk": "Esta interface de usuário NÃO verifica os tipos de valores. Use por sua conta e risco.",
         "user_avatar": "Avatar: %(avatar)s",
@@ -903,22 +882,6 @@
     },
     "dialog_close_label": "Fechar caixa de diálogo",
     "download_completed": "Download Concluído",
-    "emoji": {
-        "categories": "Categorias",
-        "category_activities": "Atividades",
-        "category_animals_nature": "Animais e natureza",
-        "category_flags": "Bandeiras",
-        "category_food_drink": "Comidas e bebidas",
-        "category_frequently_used": "Mais usados",
-        "category_objects": "Objetos",
-        "category_smileys_people": "Sorrisos e pessoas",
-        "category_symbols": "Símbolos",
-        "category_travel_places": "Viagem e lugares",
-        "quick_reactions": "Reações rápidas"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Cancelar busca"
-    },
     "empty_room": "Sala vazia",
     "empty_room_was_name": "Sala vazia (era %(oldName)s)",
     "encryption": {
@@ -979,19 +942,8 @@
         "set_up_recovery": "Configurar a recuperação",
         "set_up_recovery_toast_description": "Gere uma chave de recuperação que possa ser usada para restaurar seu histórico de mensagens criptografadas caso você perca o acesso aos seus dispositivos.",
         "set_up_toast_title": "Configurar o backup online",
-        "setup_secure_backup": {
-            "explainer": "Faça o backup das suas chaves antes de sair, para evitar perdê-las."
-        },
         "turn_on_key_storage": "Ativar o armazenamento de chaves",
         "turn_on_key_storage_description": "Armazene sua identidade criptográfica e as chaves de mensagem com segurança no servidor. Isso permitirá que você visualize seu histórico de mensagens em qualquer novo dispositivo.",
-        "udd": {
-            "interactive_verification_button": "Verificar interativamente por emoji",
-            "other_ask_verify_text": "Peça a este usuário para confirmar a sessão dele, ou confirme-a manualmente abaixo.",
-            "other_new_session_text": "%(name)s (%(userId)s) entrou em uma nova sessão sem confirmá-la:",
-            "own_ask_verify_text": "Confirme suas outras sessões usando uma das opções abaixo.",
-            "own_new_session_text": "Você entrou em uma nova sessão sem confirmá-la:",
-            "title": "Não confiável"
-        },
         "unable_to_setup_keys_error": "Não foi possível configurar as chaves",
         "verification": {
             "accepting": "Aceitando…",
@@ -1503,7 +1455,6 @@
         "extended_profiles_msc_support": "Requer que seu servidor ofereça suporte ao MSC4133",
         "feature_disable_call_per_sender_encryption": "Desativar a criptografia por remetente para Element Call",
         "feature_wysiwyg_composer_description": "Use rich text em vez de Markdown no compositor de mensagens.",
-        "group_calls": "Nova experiência de chamada em grupo",
         "group_developer": "Desenvolvedor",
         "group_encryption": "Criptografia",
         "group_experimental": "Experimental",
@@ -1518,7 +1469,6 @@
         "group_voip": "Voz e vídeo",
         "group_widgets": "Widgets",
         "hidebold": "Ocultar ponto de notificação (exibir somente emblemas de contadores)",
-        "html_topic": "Mostrar representação HTML dos tópicos da sala",
         "join_beta": "Participe da versão beta",
         "join_beta_reload": "Aderir à versão beta irá recarregar %(brand)s.",
         "jump_to_date": "Ir para a data (adiciona cabeçalhos /jumptodate e pular para a data)",
@@ -1530,20 +1480,16 @@
         "location_share_live_description": "Implementação temporária. As localizações persistem no histórico da sala.",
         "mjolnir": "Novas formas de ignorar as pessoas",
         "msc3531_hide_messages_pending_moderation": "Permitir que os moderadores ocultem mensagens com moderação pendente.",
-        "new_room_list": "Habilitar nova lista de salas",
         "notification_settings": "Novas configurações de notificação",
         "notification_settings_beta_caption": "Apresentamos uma maneira mais simples de alterar suas configurações de notificação. Personalize o seu %(brand)s, da forma que quiser.",
         "notification_settings_beta_title": "Configurações de notificação",
         "notifications": "Ative o painel de notificações no cabeçalho da sala",
         "render_reaction_images": "Renderizar imagens personalizadas em reações",
         "render_reaction_images_description": "Às vezes chamados de “emojis personalizados”.",
-        "report_to_moderators": "Reportar aos moderadores",
-        "report_to_moderators_description": "Em salas que aceitam moderação, o botão \"Denunciar\" permitirá que você denuncie abusos aos moderadores da sala.",
         "sliding_sync": "Modo Sliding Sync",
         "sliding_sync_description": "Em desenvolvimento ativo, não pode ser desativado.",
         "sliding_sync_disabled_notice": "Saia e entre novamente para desativar",
         "sliding_sync_server_no_support": "Seu servidor não tem suporte",
-        "under_active_development": "Em desenvolvimento ativo.",
         "unrealiable_e2e": "Não confiável em salas criptografadas",
         "video_rooms": "Salas de vídeo",
         "video_rooms_a_new_way_to_chat": "Uma nova maneira de conversar por voz e vídeo em %(brand)s .",
@@ -1599,9 +1545,6 @@
         "room_rejoin_warning": "Esta sala não é pública. Você não poderá entrar novamente sem um convite.",
         "space_rejoin_warning": "Este espaço não é público. Você não poderá entrar novamente sem um convite."
     },
-    "left_panel": {
-        "open_dial_pad": "Abrir o teclado de discagem"
-    },
     "lightbox": {
         "rotate_left": "Girar para a esquerda",
         "rotate_right": "Girar para a direita",
@@ -1700,7 +1643,6 @@
         "mentions_and_keywords": "@menções e palavras-chave",
         "mentions_and_keywords_description": "Receba notificações apenas com menções e palavras-chave conforme definido em suas <a>configurações</a>",
         "mentions_keywords": "Menções e palavras-chave!",
-        "message_didnt_send": "A mensagem não foi enviada. Clique para mais informações.",
         "mute_description": "Você não receberá nenhuma notificação"
     },
     "notifier": {
@@ -1787,7 +1729,6 @@
     },
     "quick_settings": {
         "all_settings": "Todas as configurações",
-        "metaspace_section": "Fixar na barra lateral",
         "sidebar_settings": "Mais opções",
         "title": "Configurações rápidas"
     },
@@ -1805,25 +1746,10 @@
     },
     "report_content": {
         "description": "Denunciar essa mensagem enviará seu “ID de evento” exclusivo ao administrador do seu servidor doméstico. Se as mensagens nesta sala forem criptografadas, o administrador do servidor doméstico não poderá ler o texto da mensagem nem visualizar arquivos ou imagens.",
-        "disagree": "Discordo",
-        "error_create_room_moderation_bot": "Não é possível criar espaço com o bot de moderação",
         "hide_messages_from_user": "Marque se você deseja ocultar todas as mensagens atuais e futuras desse usuário.",
         "ignore_user": "Ignorar usuário",
-        "illegal_content": "Conteúdo ilegal",
         "missing_reason": "Por favor, descreva porque você está reportando.",
-        "nature": "Escolha uma natureza e descreva o que torna essa mensagem abusiva.",
-        "nature_disagreement": "O que esse usuário está escrevendo está errado.\nIsso será relatado aos moderadores da sala.",
-        "nature_illegal": "Este usuário está exibindo comportamento ilegal, por exemplo, expondo pessoas (doxxing) ou ameaçando de violência.\nIsso será relatado aos moderadores da sala, que podem encaminhar isso às autoridades legais.",
-        "nature_nonstandard_admin": "Esta sala é dedicada a conteúdo ilegal ou tóxico ou os moderadores não conseguem moderar conteúdo ilegal ou tóxico.\nIsso será relatado aos administradores do %(homeserver)s.",
-        "nature_nonstandard_admin_encrypted": "Esta sala é dedicada a conteúdo ilegal ou tóxico ou os moderadores não conseguem moderar conteúdo ilegal ou tóxico.\nIsso será relatado aos administradores do %(homeserver)s. Os administradores NÃO poderão ler o conteúdo criptografado desta sala.",
-        "nature_other": "Qualquer outro motivo. Descreva o problema.\nIsso será relatado aos moderadores da sala.",
-        "nature_spam": "Esse usuário está enviando spam para a sala com anúncios, links para anúncios ou propaganda.\nIsso será relatado aos moderadores da sala.",
-        "nature_toxic": "Esse usuário está exibindo comportamento tóxico, por exemplo, insultando outros usuários ou compartilhando conteúdo somente para adultos em um sala para menores de idade ou violando as regras desta sala. Isso será relatado aos moderadores da sala.",
-        "other_label": "Outros",
-        "report_content_to_homeserver": "Denunciar conteúdo ao administrador do seu servidor principal",
-        "report_entire_room": "Denunciar a sala inteira",
-        "spam_or_propaganda": "Spam ou propaganda",
-        "toxic_behaviour": "Comportamento tóxico"
+        "report_content_to_homeserver": "Denunciar conteúdo ao administrador do seu servidor principal"
     },
     "report_room": {
         "description": "Denuncie esta sala ao administrador do seu servidor. Isso enviará a ID exclusiva da sala, mas se as mensagens forem criptografadas, o administrador não poderá lê-las nem visualizar os arquivos compartilhados.",
@@ -2093,41 +2019,16 @@
         "waiting_for_join_title": "Aguardando​•​que​•​os​•​usuários​•​se​•​juntem​•​a​•​%(brand)s"
     },
     "room_list": {
-        "add_room_label": "Adicionar sala",
         "add_space_label": "Adicionar espaço",
-        "breadcrumbs_empty": "Nenhuma sala foi visitada recentemente",
-        "breadcrumbs_label": "Salas visitadas recentemente",
         "failed_add_tag": "Falha ao adicionar a tag %(tagName)s para a sala",
         "failed_remove_tag": "Falha ao remover a tag %(tagName)s da sala",
         "failed_set_dm_tag": "Falha ao definir a marca de mensagem direta",
-        "home_menu_label": "Opções do Início",
-        "join_public_room_label": "Entrar na sala pública",
-        "joining_rooms_status": {
-            "one": "Entrando na %(count)s sala",
-            "other": "Entrando atualmente em %(count)s salas"
-        },
         "list_title": "Lista de salas",
         "more_options": {
             "leave_room": "Sair da sala"
         },
         "notification_options": "Alterar notificações",
-        "redacting_messages_status": {
-            "one": "Atualmente removendo mensagens em %(count)s sala",
-            "other": "Atualmente removendo mensagens em %(count)s salas"
-        },
-        "show_less": "Mostrar menos",
-        "show_n_more": {
-            "other": "Mostrar %(count)s a mais",
-            "one": "Mostrar %(count)s a mais"
-        },
-        "show_previews": "Mostrar pré-visualizações de mensagens",
-        "sort_by": "Classificar por",
-        "sort_by_activity": "Atividade recente",
-        "sort_by_alphabet": "De A a Z",
-        "sort_unread_first": "Mostrar salas não lidas em primeiro",
-        "space_menu_label": "Menu de %(spaceName)s",
-        "sublist_options": "Opções da Lista",
-        "suggested_rooms_heading": "Salas sugeridas"
+        "show_less": "Mostrar menos"
     },
     "room_settings": {
         "access": {
@@ -2830,7 +2731,6 @@
         "send_typing_notifications": "Permitir que saibam quando eu estiver digitando",
         "sessions": {
             "best_security_note": "Para maior segurança, verifique suas sessões e saia de qualquer sessão que você não reconhece ou não usa mais.",
-            "browser": "Navegador",
             "confirm_sign_out": {
                 "other": "Confirme a saída destes dispositivos",
                 "one": "Confirme a saída deste dispositivo"
@@ -2881,7 +2781,6 @@
             "no_sessions": "Nenhuma sessão encontrada.",
             "no_unverified_sessions": "Nenhuma sessão não verificada foi encontrada.",
             "no_verified_sessions": "Nenhuma sessão verificada foi encontrada.",
-            "os": "Sistema operacional",
             "other_sessions_heading": "Outras sessões",
             "push_heading": "Notificações push",
             "push_subheading": "Receber notificações push nesta sessão.",
@@ -2942,13 +2841,11 @@
         "showbold": "Mostrar todas as atividades na lista de salas (pontos ou número de mensagens não lidas)",
         "sidebar": {
             "dialog_title": "<strong>Configurações:</strong> Barra lateral",
-            "metaspaces_favourites_description": "Agrupe todas as suas salas e pessoas favoritas em um só lugar.",
             "metaspaces_home_all_rooms": "Mostrar todas as salas",
             "metaspaces_home_all_rooms_description": "Mostre todas as suas salas no Início, mesmo que elas estejam em um espaço.",
             "metaspaces_home_description": "A página inicial é útil para obter uma visão geral de tudo.",
             "metaspaces_orphans": "Salas fora de um espaço",
             "metaspaces_orphans_description": "Agrupe todas as suas salas que não fazem parte de um espaço em um só lugar.",
-            "metaspaces_people_description": "Agrupe todas as suas pessoas em um só lugar.",
             "metaspaces_subsection": "Espaços para mostrar",
             "metaspaces_video_rooms": "Salas de vídeo e conferências",
             "metaspaces_video_rooms_description": "Agrupar todas as salas de vídeo e conferências privadas.",
@@ -2975,7 +2872,6 @@
             "audio_output": "Caixa de som",
             "audio_output_empty": "Nenhuma caixa de som detectada",
             "auto_gain_control": "Controle de ganho automático",
-            "connection_section": "Conexão",
             "dialog_title": "<strong>Configurações:</strong> Voz e Vídeo",
             "echo_cancellation": "Cancelamento de eco",
             "enable_fallback_ice_server": "Permitir servidor de assistência de chamada de fallback (%(server)s)",
@@ -3158,12 +3054,6 @@
     "space_settings": {
         "title": "Configurações - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Você não tem permissão para adicionar salas neste espaço",
-        "error_no_permission_add_space": "Você não tem permissão para adicionar espaços a este espaço",
-        "error_no_permission_create_room": "Você não tem permissão para criar novas salas neste espaço",
-        "error_no_permission_invite": "Você não tem permissão para convidar pessoas para este espaço"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Digite o nome do novo servidor que você deseja explorar.",
@@ -3290,7 +3180,6 @@
         "download_action_downloading": "Baixando",
         "download_failed": "Falha no download",
         "download_failed_description": "Ocorreu um erro ao baixar esse arquivo",
-        "e2e_state": "Estado da criptografia de ponta a ponta",
         "edits": {
             "tooltip_label": "Editado em %(date)s. Clique para ver edições.",
             "tooltip_sub": "Clicar para ver edições",
@@ -3372,9 +3261,7 @@
         "m.poll.start": "%(senderName)s começou uma enquete - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s mudou a foto da sala.",
-            "changed_img": "%(senderDisplayName)s alterou a foto da sala para <img/>",
-            "lightbox_title": "%(senderDisplayName)s alterou a foto da sala %(roomName)s",
-            "removed": "%(senderDisplayName)s removeu a foto da sala."
+            "lightbox_title": "%(senderDisplayName)s alterou a foto da sala %(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3977,13 +3864,7 @@
         "close_to_view_right_panel": "Feche este widget para visualizá-lo neste painel",
         "context_menu": {
             "delete": "Remover widget",
-            "delete_warning": "Remover um widget o remove para todas as pessoas desta sala. Tem certeza que quer remover este widget?",
-            "move_left": "Mover para a esquerda",
-            "move_right": "Mover para a direita",
-            "remove": "Remover para todos",
-            "revoke": "Revogar permissões",
-            "screenshot": "Tirar uma foto",
-            "start_audio_stream": "Iniciar transmissão de áudio"
+            "delete_warning": "Remover um widget o remove para todas as pessoas desta sala. Tem certeza que quer remover este widget?"
         },
         "cookie_warning": "Este widget pode usar cookies.",
         "error_hangup_description": "Você foi desconectado da chamada. (Erro: %(message)s)",
diff --git a/apps/web/src/i18n/strings/ru.json b/apps/web/src/i18n/strings/ru.json
index b1959e0d5e..a99718acbf 100644
--- a/apps/web/src/i18n/strings/ru.json
+++ b/apps/web/src/i18n/strings/ru.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Выбор эмодзи",
         "jump_first_invite": "Перейти к первому приглашению.",
         "message_composer": "Автор сообщения",
         "n_unread_messages": {
@@ -11,8 +10,6 @@
             "other": "%(count)s непрочитанных сообщения(-й), включая упоминания.",
             "one": "1 непрочитанное упоминание."
         },
-        "recent_rooms": "Недавние чаты",
-        "room_name": "Чат %(name)s",
         "room_status_bar": "Строка состояния чата",
         "seek_bar_label": "Панель поиска аудио",
         "unread_messages": "Непрочитанные сообщения."
@@ -22,7 +19,6 @@
         "accept": "Принять",
         "add": "Добавить",
         "add_existing_room": "Добавить существующий чат",
-        "add_people": "Добавить людей",
         "apply": "Применить",
         "approve": "Согласиться",
         "ask_to_join": "Присоединиться",
@@ -57,7 +53,6 @@
         "enter_fullscreen": "Перейти в полноэкранный режим",
         "exit_fullscreeen": "Выйти из полноэкранного режима",
         "expand": "Развернуть",
-        "explore_public_rooms": "Просмотреть публичные групповые чаты",
         "explore_rooms": "Обзор комнат",
         "export": "Экспорт",
         "forward": "Переслать",
@@ -69,8 +64,6 @@
         "ignore": "Игнорировать",
         "import": "Импорт",
         "invite": "Пригласить",
-        "invite_to_space": "Пригласить в пространство",
-        "invites_list": "Приглашения",
         "join": "Войти",
         "learn_more": "Узнать больше",
         "leave": "Покинуть",
@@ -97,7 +90,6 @@
         "rename": "Переименовать",
         "reply": "Ответить",
         "reply_in_thread": "Обсудить",
-        "report_content": "Пожаловаться на сообщение",
         "report_room": "Комната отчетов",
         "resend": "Переотправить",
         "reset": "Сброс",
@@ -117,8 +109,6 @@
         "sign_out": "Удалить это устройство",
         "skip": "Пропустить",
         "start": "Начать",
-        "start_chat": "Отправить личное сообщение",
-        "start_new_chat": "Начать новый чат",
         "stop": "Стоп",
         "submit": "Отправить",
         "subscribe": "Подписаться",
@@ -165,9 +155,9 @@
         "autodiscovery_hs_incompatible": "Ваш домашний сервер устарел и не поддерживает минимальную требуемую версию API. Обратитесь к владельцу сервера или обновите его.",
         "autodiscovery_invalid": "Неверный ответ при попытке обнаружения домашнего сервера",
         "autodiscovery_invalid_hs": "URL-адрес домашнего сервера не является допустимым домашним сервером Matrix",
-        "autodiscovery_invalid_hs_base_url": "Неверный base_url для m.homeserver",
+        "autodiscovery_invalid_hs_base_url": "Неверный адрес base_url для m.homeserver",
         "autodiscovery_invalid_is": "URL-адрес сервера идентификации не является действительным сервером идентификации",
-        "autodiscovery_invalid_is_base_url": "Неверный base_url для m.identity_server",
+        "autodiscovery_invalid_is_base_url": "Неверный адрес base_url для m.identity_server",
         "autodiscovery_invalid_is_response": "Неверный ответ на запрос идентификации сервера",
         "autodiscovery_invalid_json": "Неверный JSON",
         "autodiscovery_no_well_known": "Не найден файл .well-known",
@@ -219,10 +209,7 @@
         "log_in_new_account": "<a>Войти</a> в новую учётную запись.",
         "logout_dialog": {
             "description": "Вы уверены, что хотите удалить это устройство?",
-            "megolm_export": "Выгрузить ключи вручную",
             "setup_key_backup_title": "Вы потеряете доступ к вашим шифрованным сообщениям",
-            "setup_secure_backup_description_1": "Эти сообщения защищены сквозным шифрованием. Только вы и ваш собеседник имеете ключи для их расшифровки и чтения.",
-            "setup_secure_backup_description_2": "При выходе эти ключи будут удалены с данного устройства и вы больше не сможете прочитать зашифрованные сообщения, если у вас нет ключей для них на других устройствах или резервной копии на сервере.",
             "skip_key_backup": "Мне не нужны мои зашифрованные сообщения"
         },
         "misconfigured_body": "Попросите администратора %(brand)s проверить <a>конфигурационный файл</a> на наличие неправильных или повторяющихся записей.",
@@ -274,7 +261,6 @@
             "point_the_camera": "Отсканируйте QR-код на экране",
             "scan_code_instruction": "Отсканируйте QR-код с помощью другого устройства",
             "scan_qr_code": "Войти с помощью QR-кода",
-            "security_code": "Код безопасности",
             "security_code_prompt": "Если появится запрос, введите код ниже на другом устройстве.",
             "select_qr_code": "Выберите \"%(scanQRCode)s\"",
             "unsupported_explainer": "Поставщик учетной записи не поддерживает вход на новое устройство с помощью QR-кода.",
@@ -474,13 +460,13 @@
         "description": "Описание",
         "deselect_all": "Отменить выбор",
         "device": "Устройство",
+        "disabled_by_homeserver": "Отключено на домашнем сервере",
         "edited": "изменено",
         "email_address": "Электронная почта",
         "emoji": "Смайлы",
         "encrypted": "Зашифровано",
         "error": "Ошибка",
         "faq": "Часто задаваемые вопросы",
-        "favourites": "Избранные",
         "feedback": "Отзыв",
         "filter_results": "Фильтрация результатов",
         "forward_message": "Переслать сообщение",
@@ -488,7 +474,6 @@
         "go_to_settings": "Перейти в настройки",
         "guest": "Гость",
         "help": "Помощь",
-        "historical": "Архив",
         "home": "Главная",
         "homeserver": "Домашний сервер",
         "identity_server": "Идентификационный сервер",
@@ -500,13 +485,11 @@
         "light": "Светлая",
         "loading": "Загрузка…",
         "location": "Местоположение",
-        "low_priority": "Маловажные",
         "matrix": "Matrix",
         "message": "Отправить личное сообщение",
         "message_layout": "Макет сообщения",
         "message_timestamp_invalid": "Недопустимая метка времени",
         "microphone": "Микрофон",
-        "model": "Модель",
         "moderation_and_safety": "Модерация и безопасность",
         "modern": "Современный",
         "mute": "Приглушить",
@@ -567,7 +550,6 @@
         "success": "Успех",
         "suggestions": "Предложения",
         "support": "Поддержка",
-        "system_alerts": "Системные оповещения",
         "theme": "Тема",
         "thread": "Обсуждение",
         "threads": "Обсуждения",
@@ -584,7 +566,6 @@
         "username": "Имя пользователя",
         "verified": "Заверено",
         "version": "Версия",
-        "video": "Видео",
         "video_room": "Видеочат",
         "view_message": "Посмотреть сообщение",
         "warning": "Внимание"
@@ -681,7 +662,8 @@
     "create_section_dialog": {
         "create_section": "Новый раздел",
         "label": "Название раздела",
-        "title": "Новый раздел"
+        "title": "Новый раздел",
+        "title_edition": "Редактировать раздел"
     },
     "create_space": {
         "add_details_prompt": "Добавьте некоторые подробности, чтобы помочь людям узнать его.",
@@ -879,7 +861,6 @@
         "thread_root_id": "Идентификатор Root ID: %(threadRootId)s",
         "threads_timeline": "Хронология обсуждений",
         "title": "Инструменты разработчика",
-        "toggle_event": "переключить событие",
         "toolbox": "Панель инструментов",
         "use_at_own_risk": "Этот пользовательский интерфейс НЕ проверяет типы значений. Используйте на свой страх и риск.",
         "user_avatar": "Аватар: %(avatar)s",
@@ -914,22 +895,6 @@
     },
     "dialog_close_label": "Закрыть диалог",
     "download_completed": "Скачивание завершено",
-    "emoji": {
-        "categories": "Категории",
-        "category_activities": "Действия",
-        "category_animals_nature": "Животные и природа",
-        "category_flags": "Флаги",
-        "category_food_drink": "Еда и напитки",
-        "category_frequently_used": "Часто используемые",
-        "category_objects": "Объекты",
-        "category_smileys_people": "Смайлики и люди",
-        "category_symbols": "Символы",
-        "category_travel_places": "Путешествия и места",
-        "quick_reactions": "Быстрая реакция"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Отменить поиск"
-    },
     "empty_room": "Пустая комната",
     "empty_room_was_name": "Пустая комната (без %(oldName)s)",
     "encryption": {
@@ -992,19 +957,8 @@
         "set_up_recovery": "Создать резервную копию своих чатов.",
         "set_up_recovery_toast_description": "Создайте ключ восстановления, который можно использовать для восстановления зашифрованной истории сообщений в случае потери доступа к своим устройствам.",
         "set_up_toast_title": "Настроить безопасное резервное копирование",
-        "setup_secure_backup": {
-            "explainer": "Перед выходом сохраните резервную копию ключей шифрования, чтобы не потерять их."
-        },
         "turn_on_key_storage": "Включить хранилище ключей",
         "turn_on_key_storage_description": "Безопасно храните свои криптографические идентификационные данные и ключи сообщений на сервере. Это позволит вам просматривать историю сообщений на любых новых устройствах.",
-        "udd": {
-            "interactive_verification_button": "Интерактивная сверка по смайлам",
-            "other_ask_verify_text": "Попросите этого пользователя подтвердить сеанс или подтвердите его вручную ниже.",
-            "other_new_session_text": "%(name)s (%(userId)s) произвел(а) вход через новый сеанс без подтверждения:",
-            "own_ask_verify_text": "Подтвердите ваш другой сеанс, используя один из вариантов ниже.",
-            "own_new_session_text": "Вы вошли в новый сеанс, не подтвердив его:",
-            "title": "Недоверенное"
-        },
         "unable_to_setup_keys_error": "Невозможно настроить ключи",
         "verification": {
             "accepting": "Принятие…",
@@ -1517,7 +1471,6 @@
         "extended_profiles_msc_support": "Требуется, чтобы ваш сервер поддерживал MSC4133",
         "feature_disable_call_per_sender_encryption": "Отключить шифрование для каждого отправителя Element Call",
         "feature_wysiwyg_composer_description": "Используйте форматированный текст вместо Markdown в редакторе сообщений.",
-        "group_calls": "Новый опыт группового вызова",
         "group_developer": "Разработка",
         "group_encryption": "Шифрование",
         "group_experimental": "Экспериментально",
@@ -1532,7 +1485,6 @@
         "group_voip": "Голос и видео",
         "group_widgets": "Виджеты",
         "hidebold": "Скрыть точку уведомления (отображать только значки счетчиков)",
-        "html_topic": "Показать HTML-представление тем комнаты",
         "join_beta": "Присоединиться к бета-версии",
         "join_beta_reload": "Присоединение к бета-тестированию перезагрузит %(brand)s.",
         "jump_to_date": "Перейти к дате (добавляет /jumptodate и переход к заголовкам дат)",
@@ -1544,21 +1496,16 @@
         "location_share_live_description": "Временная реализация. Местоположения сохраняются в истории комнаты.",
         "mjolnir": "Новые способы игнорировать людей",
         "msc3531_hide_messages_pending_moderation": "Позволяет модераторам скрывать сообщения, ожидающие модерации.",
-        "new_room_list": "Включить новый список комнат",
         "notification_settings": "Новые настройки уведомлений",
         "notification_settings_beta_caption": "Представляем вам более простой способ изменения настроек уведомлений. Настройте свои настройки так %(brand)s, как вам удобно.",
         "notification_settings_beta_title": "Настройки уведомлений",
         "notifications": "Включить панель уведомлений в заголовке комнаты",
         "render_reaction_images": "Обработка пользовательских изображений в реакциях",
         "render_reaction_images_description": "Иногда их называют \"пользовательскими эмодзи\".",
-        "report_to_moderators": "Пожаловаться модераторам",
-        "report_to_moderators_description": "В поддерживающих модерирование чатах, кнопка \"Пожаловаться\" позволит вам сообщить о нарушении модераторам комнаты.",
-        "room_list_sections": "Разделы списка чатов",
         "sliding_sync": "Режим Sliding Sync",
         "sliding_sync_description": "В активной разработке, нельзя отключить.",
         "sliding_sync_disabled_notice": "Выйдите из системы и снова войдите, чтобы отключить",
         "sliding_sync_server_no_support": "На вашем сервере отсутствует поддержка",
-        "under_active_development": "В активной разработке.",
         "unrealiable_e2e": "Ненадежно в зашифрованных комнатах",
         "video_rooms": "Видеокомнаты",
         "video_rooms_a_new_way_to_chat": "Новый способ голосового и видеообщения в %(brand)s.",
@@ -1614,9 +1561,6 @@
         "room_rejoin_warning": "Эта комната не является публичной. Вы не сможете войти без приглашения.",
         "space_rejoin_warning": "Это пространство не публично. Вы не сможете вновь войти без приглашения."
     },
-    "left_panel": {
-        "open_dial_pad": "Открыть панель набора номера"
-    },
     "lightbox": {
         "rotate_left": "Повернуть влево",
         "rotate_right": "Повернуть вправо",
@@ -1716,7 +1660,6 @@
         "mentions_and_keywords": "@упоминания и ключевые слова",
         "mentions_and_keywords_description": "Получать уведомления только по упоминаниям и ключевым словам, установленным в ваших <a>настройках</a>",
         "mentions_keywords": "Упоминания и ключевые слова",
-        "message_didnt_send": "Сообщение не отправлено. Нажмите для получения информации.",
         "mute_description": "Вы не будете получать никаких уведомлений"
     },
     "notifier": {
@@ -1811,7 +1754,6 @@
     },
     "quick_settings": {
         "all_settings": "Все настройки",
-        "metaspace_section": "Закрепить на боковой панели",
         "sidebar_settings": "Дополнительные параметры",
         "title": "Быстрые настройки"
     },
@@ -1829,25 +1771,10 @@
     },
     "report_content": {
         "description": "Отчет о данном сообщении отправит свой уникальный 'event ID' администратору вашего домашнего сервера. Если сообщения в этой комнате зашифрованы, администратор вашего домашнего сервера не сможет прочитать текст сообщения или просмотреть какие-либо файлы или изображения.",
-        "disagree": "Не согласен",
-        "error_create_room_moderation_bot": "Невозможно создать комнату с помощью бота-модератора",
         "hide_messages_from_user": "Выберите, хотите ли вы скрыть все текущие и будущие сообщения от этого пользователя.",
         "ignore_user": "Игнорировать пользователя",
-        "illegal_content": "Незаконный контент",
         "missing_reason": "Пожалуйста, заполните, почему вы сообщаете.",
-        "nature": "Пожалуйста, выберите характер и опишите, что делает это сообщение оскорбительным.",
-        "nature_disagreement": "То, что пишет этот пользователь, неправильно.\nОб этом будет сообщено модераторам комнаты.",
-        "nature_illegal": "Этот пользователь демонстрирует незаконное поведение, например, домогается до людей или угрожает насилием.\nОб этом будет сообщено модераторам комнаты, которые могут передать дело в юридические органы.",
-        "nature_nonstandard_admin": "Эта комната посвящена незаконному/токсичному контенту или модераторы не контролируют контент.\nОб этом будет сообщено администраторам %(homeserver)s.",
-        "nature_nonstandard_admin_encrypted": "Эта комната посвящена незаконному/токсичному контенту или модераторы не контролируют контент.\nОб этом будет сообщено администраторам %(homeserver)s. Администраторы НЕ смогут прочитать зашифрованное содержимое этой комнаты.",
-        "nature_other": "Любая другая причина. Пожалуйста, опишите проблему.\nОб этом будет сообщено модераторам комнаты.",
-        "nature_spam": "Этот пользователь спамит комнату рекламой, ссылками на рекламу или пропагандой.\nОб этом будет сообщено модераторам комнаты.",
-        "nature_toxic": "Этот пользователь ведет себя токсично, например, оскорбляет других пользователей, публикует контент только для взрослых в семейном комнате или иным образом нарушает правила этой комнаты.\nОб этом будет сообщено модераторам комнаты.",
-        "other_label": "Другие",
-        "report_content_to_homeserver": "Сообщите о содержании своему администратору домашнего сервера",
-        "report_entire_room": "Сообщить обо всей комнате",
-        "spam_or_propaganda": "Спам или пропаганда",
-        "toxic_behaviour": "Токсичное поведение"
+        "report_content_to_homeserver": "Сообщите о содержании своему администратору домашнего сервера"
     },
     "report_room": {
         "description": "Сообщите об этой комнате вашему провайдеру аккаунта. Если сообщения зашифрованы, ваш администратор не сможет их прочитать.",
@@ -2128,47 +2055,21 @@
         "waiting_for_join_title": "Ожидание присоединения пользователей %(brand)s"
     },
     "room_list": {
-        "add_room_label": "Добавить комнату",
         "add_space_label": "Добавить пространство",
-        "breadcrumbs_empty": "Нет недавно посещенных комнат",
-        "breadcrumbs_label": "Недавно посещённые комнаты",
         "failed_add_tag": "Не удалось добавить тег %(tagName)s в комнату",
         "failed_remove_tag": "Не удалось удалить тег %(tagName)s из комнаты",
         "failed_set_dm_tag": "Не удалось установить метку личного сообщения",
-        "home_menu_label": "Параметры раздела \"Главная\"",
-        "join_public_room_label": "Присоединиться к публичной комнате",
-        "joining_rooms_status": {
-            "one": "Сейчас вы состоите в %(count)s чате",
-            "few": "Сейчас вы состоите в %(count)s чатах",
-            "many": "Сейчас вы состоите в %(count)s чатах"
-        },
         "list_title": "Список комнат",
         "more_options": {
             "leave_room": "Покинуть комнату"
         },
         "notification_options": "Настройки уведомлений",
-        "redacting_messages_status": {
-            "one": "Удаляются сообщения в %(count)s комнате",
-            "other": "Удаляются сообщения в %(count)s комнатах"
-        },
         "section": {
             "chats": "Чаты",
             "favourites": "Избранное",
             "low_priority": "Низкий приоритет"
         },
-        "show_less": "Показать меньше",
-        "show_n_more": {
-            "other": "Показать ещё %(count)s",
-            "one": "Показать ещё %(count)s"
-        },
-        "show_previews": "Показывать последнее сообщение",
-        "sort_by": "Сортировать",
-        "sort_by_activity": "По активности",
-        "sort_by_alphabet": "А-Я",
-        "sort_unread_first": "Комнаты с непрочитанными сообщениями в начале",
-        "space_menu_label": "Меню %(spaceName)s",
-        "sublist_options": "Настройки списка",
-        "suggested_rooms_heading": "Предлагаемые комнаты"
+        "show_less": "Показать меньше"
     },
     "room_settings": {
         "access": {
@@ -2882,7 +2783,6 @@
         "send_typing_notifications": "Уведомлять о наборе текста",
         "sessions": {
             "best_security_note": "Для обеспечения максимальной безопасности проверяйте свои сеансы и выходите из любого сеанса, который вы больше не знаете или не используете.",
-            "browser": "Браузер",
             "confirm_sign_out": {
                 "one": "Подтвердите выход из этого устройства",
                 "few": "Подтвердите выход из этих устройств",
@@ -2938,7 +2838,6 @@
             "no_sessions": "Сеансов не найдено.",
             "no_unverified_sessions": "Незаверенных сеансов не обнаружено.",
             "no_verified_sessions": "Заверенных сеансов не обнаружено.",
-            "os": "Операционная система",
             "other_sessions_heading": "Другие сеансы",
             "push_heading": "Уведомления",
             "push_subheading": "Получать push-уведомления в этом сеансе.",
@@ -3001,13 +2900,11 @@
         "showbold": "Показывать всю активность в списке комнат (точки или количество непрочитанных сообщений)",
         "sidebar": {
             "dialog_title": "<strong>Настройки:</strong> Боковая панель",
-            "metaspaces_favourites_description": "Сгруппируйте все свои любимые комнаты и людей в одном месте.",
             "metaspaces_home_all_rooms": "Показать все комнаты",
             "metaspaces_home_all_rooms_description": "Показать все комнаты на Главной, даже если они находятся в пространстве.",
             "metaspaces_home_description": "Раздел \"Главная\" полезен для получения общего вида.",
             "metaspaces_orphans": "Комнаты без пространства",
             "metaspaces_orphans_description": "Сгруппируйте все комнаты, которые не являются частью пространства, в одном месте.",
-            "metaspaces_people_description": "Сгруппируйте всех своих людей в одном месте.",
             "metaspaces_subsection": "Пространства для показа",
             "metaspaces_video_rooms": "Видеокомнаты и конференции",
             "metaspaces_video_rooms_description": "Сгруппировать все частные видеокомнаты и конференции.",
@@ -3034,7 +2931,6 @@
             "audio_output": "Аудиовыход",
             "audio_output_empty": "Аудиовыход не обнаружен",
             "auto_gain_control": "Авторегулировка усиления",
-            "connection_section": "Соединение",
             "dialog_title": "<strong>Настройки:</strong> Голос и видео",
             "echo_cancellation": "Эхоподавление",
             "echo_cancellation_description": "Устраняет эхо микрофона во время звонков. Эта настройка также влияет на Element Call.",
@@ -3220,12 +3116,6 @@
     "space_settings": {
         "title": "Настройки — %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "У вас нет разрешений, чтобы добавить комнаты в это пространство",
-        "error_no_permission_add_space": "У вас нет разрешения добавлять пространства в это пространство",
-        "error_no_permission_create_room": "У вас нет разрешений для создания новых комнат в этом пространстве",
-        "error_no_permission_invite": "У вас нет разрешения приглашать людей в это пространство"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Введите имя нового сервера для просмотра.",
@@ -3354,7 +3244,6 @@
         "download_action_downloading": "Скачивание",
         "download_failed": "Скачивание не удалось",
         "download_failed_description": "Произошла ошибка при скачивании этого файла",
-        "e2e_state": "Состояние сквозного шифрования",
         "edits": {
             "tooltip_label": "Изменено %(date)s. Нажмите для посмотра истории изменений.",
             "tooltip_sub": "Нажмите для просмотра правок",
@@ -3436,9 +3325,7 @@
         "m.poll.start": "%(senderName)s начал(а) опрос — %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s изменил(а) аватар комнаты.",
-            "changed_img": "%(senderDisplayName)s изменил(а) аватар комнаты на <img/>",
-            "lightbox_title": "%(senderDisplayName)s изменил(а) аватар комнаты %(roomName)s",
-            "removed": "%(senderDisplayName)s удалил(а) аватар комнаты."
+            "lightbox_title": "%(senderDisplayName)s изменил(а) аватар комнаты %(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -4049,13 +3936,7 @@
         "close_to_view_right_panel": "Закройте виджет, чтобы просмотреть его на этой панели",
         "context_menu": {
             "delete": "Удалить виджет",
-            "delete_warning": "Удаление виджета действует для всех участников этой комнаты. Вы действительно хотите удалить этот виджет?",
-            "move_left": "Сдвинуть влево",
-            "move_right": "Сдвинуть вправо",
-            "remove": "Убрать для всех",
-            "revoke": "Отозвать разрешения",
-            "screenshot": "Сделать снимок",
-            "start_audio_stream": "Запустить аудиотрансляцию"
+            "delete_warning": "Удаление виджета действует для всех участников этой комнаты. Вы действительно хотите удалить этот виджет?"
         },
         "cookie_warning": "Этот виджет может использовать куки.",
         "error_hangup_description": "Вас отключили от звонка. (Ошибка: %(message)s)",
diff --git a/apps/web/src/i18n/strings/sk.json b/apps/web/src/i18n/strings/sk.json
index 1ed87c7277..e06a5ed338 100644
--- a/apps/web/src/i18n/strings/sk.json
+++ b/apps/web/src/i18n/strings/sk.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Výber emotikonov",
         "jump_first_invite": "Prejsť na prvú pozvánku.",
         "message_composer": "Editor správ",
         "n_unread_messages": {
@@ -13,8 +12,6 @@
             "few": "%(count)s neprečítané správy vrátane zmienok.",
             "other": "%(count)s neprečítaných správ vrátane zmienok."
         },
-        "recent_rooms": "Nedávne miestnosti",
-        "room_name": "Miestnosť %(name)s",
         "room_status_bar": "Stavový riadok miestnosti",
         "seek_bar_label": "Panel vyhľadávania zvuku",
         "unread_messages": "Neprečítané správy."
@@ -24,7 +21,6 @@
         "accept": "Prijať",
         "add": "Pridať",
         "add_existing_room": "Pridať existujúcu miestnosť",
-        "add_people": "Pridať ľudí",
         "apply": "Použiť",
         "approve": "Schváliť",
         "ask_to_join": "Požiadať o pripojenie",
@@ -59,7 +55,6 @@
         "enter_fullscreen": "Prejsť na celú obrazovku",
         "exit_fullscreeen": "Ukončiť režim celej obrazovky",
         "expand": "Rozbaliť",
-        "explore_public_rooms": "Preskúmajte verejné miestnosti",
         "explore_rooms": "Preskúmať miestnosti",
         "export": "Exportovať",
         "forward": "Preposlať",
@@ -71,8 +66,6 @@
         "ignore": "Ignorovať",
         "import": "Importovať",
         "invite": "Pozvať",
-        "invite_to_space": "Pozvať do priestoru",
-        "invites_list": "Pozvánky",
         "join": "Vstúpiť",
         "learn_more": "Zistiť viac",
         "leave": "Opustiť",
@@ -99,7 +92,6 @@
         "rename": "Premenovať",
         "reply": "Odpovedať",
         "reply_in_thread": "Odpovedať vo vlákne",
-        "report_content": "Nahlásiť obsah",
         "report_room": "Nahlásiť miestnosť",
         "resend": "Poslať znovu",
         "reset": "Obnoviť predvolené",
@@ -119,8 +111,6 @@
         "sign_out": "Odhlásiť sa",
         "skip": "Preskočiť",
         "start": "Začať",
-        "start_chat": "Začať konverzáciu",
-        "start_new_chat": "Spustiť novú konverzáciu",
         "stop": "Zastaviť",
         "submit": "Odoslať",
         "subscribe": "Prihlásiť sa na odber",
@@ -221,10 +211,7 @@
         "log_in_new_account": "<a>Prihláste sa</a> do vášho nového účtu.",
         "logout_dialog": {
             "description": "Naozaj sa chcete odhlásiť?",
-            "megolm_export": "Ručne exportovať kľúče",
             "setup_key_backup_title": "Stratíte prístup ku zašifrovaným správam",
-            "setup_secure_backup_description_1": "Šifrované správy sú zabezpečené end-to-end šifrovaním. Kľúče na čítanie týchto správ máte len vy a príjemca (príjemcovia).",
-            "setup_secure_backup_description_2": "Po odhlásení sa tieto kľúče z tohto zariadenia vymažú, čo znamená, že nebudete môcť čítať zašifrované správy, pokiaľ k nim nemáte kľúče v iných zariadeniach alebo ich nemáte zálohované na serveri.",
             "skip_key_backup": "Nezáleží mi na zašifrovaných správach"
         },
         "misconfigured_body": "Požiadajte správcu vášho %(brand)su, aby skontroloval <a>vašu konfiguráciu</a>. Pravdepodobne obsahuje chyby alebo duplikáty.",
@@ -276,7 +263,6 @@
             "point_the_camera": "Naskenujte tu zobrazený QR kód",
             "scan_code_instruction": "Naskenujte QR kód pomocou druhého zariadenia",
             "scan_qr_code": "Prihláste sa pomocou QR kódu",
-            "security_code": "Bezpečnostný kód",
             "security_code_prompt": "Ak sa zobrazí výzva, zadajte nižšie uvedený kód na svojom druhom zariadení.",
             "select_qr_code": "Vyberte '%(scanQRCode)s'",
             "unsupported_explainer": "Poskytovateľ vášho účtu nepodporuje prihlásenie do nového zariadenia pomocou QR kódu.",
@@ -483,7 +469,6 @@
         "encrypted": "Zašifrované",
         "error": "Chyba",
         "faq": "Často kladené otázky (FAQ)",
-        "favourites": "Obľúbené",
         "feedback": "Spätná väzba",
         "filter_results": "Filtrovať výsledky",
         "forward_message": "Preposlať správu",
@@ -491,7 +476,6 @@
         "go_to_settings": "Otvoriť nastavenia",
         "guest": "Hosť",
         "help": "Pomocník",
-        "historical": "Historické",
         "home": "Domov",
         "homeserver": "Domovský server",
         "identity_server": "Server totožností",
@@ -503,13 +487,11 @@
         "light": "Svetlý",
         "loading": "Načítavanie…",
         "location": "Poloha",
-        "low_priority": "Nízka priorita",
         "matrix": "Matrix",
         "message": "Správa",
         "message_layout": "Rozloženie správy",
         "message_timestamp_invalid": "Neplatná časová značka",
         "microphone": "Mikrofón",
-        "model": "Model",
         "moderation_and_safety": "Moderovanie a bezpečnosť",
         "modern": "Moderný",
         "mute": "Umlčať",
@@ -571,7 +553,6 @@
         "success": "Úspech",
         "suggestions": "Návrhy",
         "support": "Podpora",
-        "system_alerts": "Systémové upozornenia",
         "theme": "Vzhľad",
         "thread": "Vlákno",
         "threads": "Vlákna",
@@ -588,7 +569,6 @@
         "username": "Meno používateľa",
         "verified": "Overený",
         "version": "Verzia",
-        "video": "Video",
         "video_room": "Video miestnosť",
         "view_message": "Zobraziť správu",
         "warning": "Upozornenie"
@@ -879,7 +859,6 @@
         "thread_root_id": "ID koreňového vlákna: %(threadRootId)s",
         "threads_timeline": "Časová os vlákien",
         "title": "Vývojárske nástroje",
-        "toggle_event": "prepnúť udalosť",
         "toolbox": "Nástroje",
         "use_at_own_risk": "Toto používateľské rozhranie nekontroluje typy hodnôt. Používajte ho na vlastné riziko.",
         "user_avatar": "Profilový obrázok: %(avatar)s",
@@ -914,22 +893,6 @@
     },
     "dialog_close_label": "Zavrieť dialógové okno",
     "download_completed": "Preberanie dokončené",
-    "emoji": {
-        "categories": "Kategórie",
-        "category_activities": "Aktivity",
-        "category_animals_nature": "Zvieratá a príroda",
-        "category_flags": "Vlajky",
-        "category_food_drink": "Jedlo a nápoje",
-        "category_frequently_used": "Často používané",
-        "category_objects": "Objekty",
-        "category_smileys_people": "Smajlíky a ľudia",
-        "category_symbols": "Symboly",
-        "category_travel_places": "Cestovanie a miesta",
-        "quick_reactions": "Rýchle reakcie"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Zrušiť vyhľadávanie"
-    },
     "empty_room": "Prázdna miestnosť",
     "empty_room_was_name": "Prázdna miestnosť (bola %(oldName)s)",
     "encryption": {
@@ -967,7 +930,6 @@
         "import_invalid_passphrase": "Kontrola overenia zlyhala: Nesprávne heslo?",
         "key_storage_out_of_sync": "Vaše úložisko kľúčov nie je synchronizované.",
         "key_storage_out_of_sync_description": "Potvrďte svoj kľúč na obnovenie, aby ste zachovali prístup k úložisku kľúčov a histórii správ.",
-        "message_shared_by": "%(displayName)s (%(userId)s ) zdieľal túto správu čase, keď ste ešte neboli v miestnosti, keď bola odoslaná.",
         "messages_not_secure": {
             "cause_1": "Váš domovský server",
             "cause_2": "Domovský server, ku ktorému je pripojený používateľ, ktorého overujete",
@@ -993,19 +955,8 @@
         "set_up_recovery": "Nastaviť obnovenie",
         "set_up_recovery_toast_description": "Vytvorte kľúč na obnovenie, ktorý môžete použiť na obnovenie histórie šifrovaných správ v prípade straty prístupu k zariadeniam.",
         "set_up_toast_title": "Nastaviť bezpečné zálohovanie",
-        "setup_secure_backup": {
-            "explainer": "Zálohujte si šifrovacie kľúče pred odhlásením, aby ste zabránili ich strate."
-        },
         "turn_on_key_storage": "Zapnúť úložisko kľúčov",
         "turn_on_key_storage_description": "Uložte svoju kryptografickú totožnosť a kľúče správ bezpečne na serveri. To vám umožní zobraziť históriu správ na všetkých nových zariadeniach.",
-        "udd": {
-            "interactive_verification_button": "Interaktívne overte pomocou emotikonov",
-            "other_ask_verify_text": "Poproste tohto používateľa, aby si overil svoju reláciu alebo ju nižšie manuálne overte.",
-            "other_new_session_text": "%(name)s (%(userId)s) sa prihlásil do novej relácie bez jej overenia:",
-            "own_ask_verify_text": "Overte svoje ostatné relácie pomocou jednej z nižšie uvedených možností.",
-            "own_new_session_text": "Prihlásili ste sa do novej relácie bez jej overenia:",
-            "title": "Nedôveryhodné"
-        },
         "unable_to_setup_keys_error": "Nie je možné nastaviť kľúče",
         "verification": {
             "accepting": "Akceptovanie…",
@@ -1526,7 +1477,6 @@
         "extended_profiles_msc_support": "Vyžaduje, aby váš server podporoval MSC4133",
         "feature_disable_call_per_sender_encryption": "Zakázať šifrovanie pre jednotlivých odosielateľov pre Element Call",
         "feature_wysiwyg_composer_description": "Použiť rozšírený text namiesto Markdown v správach.",
-        "group_calls": "Nový zážitok zo skupinových hovorov",
         "group_developer": "Vývojárske",
         "group_encryption": "Šifrovanie",
         "group_experimental": "Experimentálne",
@@ -1541,7 +1491,6 @@
         "group_voip": "Zvuk a video",
         "group_widgets": "Widgety",
         "hidebold": "Skryť oznamovaciu bodku (zobrazovať iba odznaky počítadiel)",
-        "html_topic": "Zobraziť HTML znázornenie tém miestnosti",
         "join_beta": "Pripojte sa k beta verzii",
         "join_beta_reload": "Vstupom do beta verzie sa %(brand)s znovu načíta.",
         "jump_to_date": "Prejsť na dátum (pridá /jumptodate a hlavičky na prechod na dátum)",
@@ -1553,20 +1502,16 @@
         "location_share_live_description": "Dočasná implementácia. Polohy ostávajú v histórii miestnosti.",
         "mjolnir": "Nové spôsoby ignorovania ľudí",
         "msc3531_hide_messages_pending_moderation": "Umožniť moderátorom skryť správy čakajúce na schválenie.",
-        "new_room_list": "Povoliť nový zoznam miestností",
         "notification_settings": "Nové nastavenia oznámení",
         "notification_settings_beta_caption": "Predstavujeme jednoduchší spôsob zmeny nastavení oznámení. Prispôsobte si svoju aplikáciu %(brand)s, presne podľa svojich predstáv.",
         "notification_settings_beta_title": "Nastavenia oznámení",
         "notifications": "Povolenie panelu oznámení v záhlaví miestnosti",
         "render_reaction_images": "Vykresľovať vlastné obrázky v reakciách",
         "render_reaction_images_description": "Niekedy sa označujú ako „vlastné emotikony“.",
-        "report_to_moderators": "Nahlásiť moderátorom",
-        "report_to_moderators_description": "V miestnostiach, ktoré podporujú moderovanie, môžete pomocou tlačidla \"Nahlásiť\" nahlásiť porušovanie pravidiel moderátorom miestnosti.",
         "sliding_sync": "Režim kĺzavej synchronizácie",
         "sliding_sync_description": "V štádiu aktívneho vývoja, nie je možné to vypnúť.",
         "sliding_sync_disabled_notice": "Odhláste sa a znova sa prihláste, aby sa to vyplo",
         "sliding_sync_server_no_support": "Váš server nemá podporu",
-        "under_active_development": "V štádiu aktívneho vývoja.",
         "unrealiable_e2e": "Nespoľahlivé v šifrovaných miestnostiach",
         "video_rooms": "Video miestnosti",
         "video_rooms_a_new_way_to_chat": "Nový spôsob konverzácie prostredníctvom hlasu a videa v aplikácii %(brand)s.",
@@ -1622,9 +1567,6 @@
         "room_rejoin_warning": "Toto nie je verejne dostupná miestnosť. Bez pozvánky nebudete do nej môcť vstúpiť znovu.",
         "space_rejoin_warning": "Tento priestor nie je verejný. Bez pozvánky sa doň nebudete môcť opätovne pripojiť."
     },
-    "left_panel": {
-        "open_dial_pad": "Otvoriť číselník"
-    },
     "lightbox": {
         "rotate_left": "Otočiť doľava",
         "rotate_right": "Otočiť doprava",
@@ -1724,7 +1666,6 @@
         "mentions_and_keywords": "@zmienky a kľúčové slová",
         "mentions_and_keywords_description": "Dostávajte upozornenia len na zmienky a kľúčové slová nastavené vo vašich <a>nastaveniach</a>",
         "mentions_keywords": "Zmienky a kľúčové slová",
-        "message_didnt_send": "Správa sa neodoslala. Kliknite pre informácie.",
         "mute_description": "Nebudete dostávať žiadne oznámenia"
     },
     "notifier": {
@@ -1826,7 +1767,6 @@
     },
     "quick_settings": {
         "all_settings": "Všetky nastavenia",
-        "metaspace_section": "Pripnúť na bočný panel",
         "sidebar_settings": "Ďalšie možnosti",
         "title": "Rýchle nastavenia"
     },
@@ -1844,25 +1784,10 @@
     },
     "report_content": {
         "description": "Nahlásenie tejto správy odošle jej jedinečné \"ID udalosti\" správcovi vášho domovského servera. Ak sú správy v tejto miestnosti zašifrované, správca domovského servera nebude môcť prečítať text správy ani zobraziť žiadne súbory alebo obrázky.",
-        "disagree": "Nesúhlasím",
-        "error_create_room_moderation_bot": "Nie je možné vytvoriť miestnosť s moderovacím botom",
         "hide_messages_from_user": "Označte, či chcete skryť všetky aktuálne a budúce správy od tohto používateľa.",
         "ignore_user": "Ignorovať používateľa",
-        "illegal_content": "Nelegálny obsah",
         "missing_reason": "Vyplňte prosím, prečo podávate hlásenie.",
-        "nature": "Prosím, vyberte charakter a popíšte, čo robí túto správu obťažujúcou.",
-        "nature_disagreement": "To, čo tento používateľ napísal, je nesprávne.\nBude to nahlásené moderátorom miestnosti.",
-        "nature_illegal": "Tento používateľ prejavuje protiprávne správanie, napríklad zverejňuje doxing (citlivé informácie o ľudoch) alebo sa vyhráža násilím.\nToto bude nahlásené moderátorom miestnosti, ktorí to môžu postúpiť právnym orgánom.",
-        "nature_nonstandard_admin": "Táto miestnosť je venovaná nezákonnému alebo škodlivému obsahu alebo moderátori nedokážu moderovať nelegálny alebo škodlivý obsah..\nToto bude hlásené správcom servera %(homeserver)s.",
-        "nature_nonstandard_admin_encrypted": "Táto miestnosť je venovaná nezákonnému alebo škodlivému obsahu alebo moderátori nedokážu moderovať nelegálny alebo škodlivý obsah..\nToto bude hlásené správcom servera %(homeserver)s. Správcovia nebudú vedieť prečítať šifrovaný obsah tejto miestnosti.",
-        "nature_other": "Akýkoľvek iný dôvod. Opíšte problém.\nTento problém bude nahlásený moderátorom miestnosti.",
-        "nature_spam": "Tento používateľ spamuje miestnosť reklamami, odkazmi na reklamy alebo propagandou.\nToto bude nahlásené moderátorom miestnosti.",
-        "nature_toxic": "Tento používateľ prejavuje nepriateľské správanie, napríklad uráža ostatných používateľov alebo zdieľa obsah určený len pre dospelých v miestnosti určenej pre rodiny alebo inak porušuje pravidlá tejto miestnosti.\nToto bude nahlásené moderátorom miestnosti.",
-        "other_label": "Ďalšie",
-        "report_content_to_homeserver": "Nahlásenie obsahu správcovi domovského serveru",
-        "report_entire_room": "Nahlásiť celú miestnosť",
-        "spam_or_propaganda": "Spam alebo propaganda",
-        "toxic_behaviour": "Nebezpečné správanie"
+        "report_content_to_homeserver": "Nahlásenie obsahu správcovi domovského serveru"
     },
     "report_room": {
         "description": "Nahláste túto miestnosť poskytovateľovi účtu. Ak sú správy zašifrované, váš správca ich nebude môcť prečítať.",
@@ -2146,44 +2071,16 @@
         "waiting_for_join_title": "Čaká sa na používateľov, kým sa pripoja k aplikácii %(brand)s"
     },
     "room_list": {
-        "add_room_label": "Pridať miestnosť",
         "add_space_label": "Pridať priestor",
-        "breadcrumbs_empty": "Žiadne nedávno navštívené miestnosti",
-        "breadcrumbs_label": "Nedávno navštívené miestnosti",
         "failed_add_tag": "Miestnosti sa nepodarilo pridať značku %(tagName)s",
         "failed_remove_tag": "Z miestnosti sa nepodarilo odstrániť značku %(tagName)s",
         "failed_set_dm_tag": "Nepodarilo sa nastaviť značku priamej správy",
-        "home_menu_label": "Možnosti domovskej obrazovky",
-        "join_public_room_label": "Pripojiť sa k verejnej miestnosti",
-        "joining_rooms_status": {
-            "one": "Momentálne ste pripojení k %(count)s miestnosti",
-            "few": "Momentálne ste pripojení k %(count)s miestnostiam",
-            "other": "Momentálne ste pripojení k %(count)s miestnostiam"
-        },
         "list_title": "Zoznam miestností",
         "more_options": {
             "leave_room": "Opustiť miestnosť"
         },
         "notification_options": "Možnosti oznámenia",
-        "redacting_messages_status": {
-            "one": "V súčasnosti sa odstraňujú správy v %(count)s miestnosti",
-            "few": "V súčasnosti sa odstraňujú správy v %(count)s miestnostiach",
-            "other": "V súčasnosti sa odstraňujú správy v %(count)s miestnostiach"
-        },
-        "show_less": "Zobraziť menej",
-        "show_n_more": {
-            "one": "Zobraziť %(count)s ďalšiu",
-            "few": "Zobraziť %(count)s ďalšie",
-            "other": "Zobraziť %(count)s ďalších"
-        },
-        "show_previews": "Zobraziť náhľady správ",
-        "sort_by": "Zoradiť podľa",
-        "sort_by_activity": "Aktivity",
-        "sort_by_alphabet": "A-Z",
-        "sort_unread_first": "Najprv ukázať miestnosti s neprečítanými správami",
-        "space_menu_label": "%(spaceName)s ponuka",
-        "sublist_options": "Možnosti zoznamu",
-        "suggested_rooms_heading": "Navrhované miestnosti"
+        "show_less": "Zobraziť menej"
     },
     "room_settings": {
         "access": {
@@ -2894,7 +2791,6 @@
         "send_typing_notifications": "Posielať oznámenia, keď píšete",
         "sessions": {
             "best_security_note": "V záujme čo najlepšieho zabezpečenia overte svoje relácie a odhláste sa z každej relácie, ktorú už nepoznáte alebo nepoužívate.",
-            "browser": "Prehliadač",
             "confirm_sign_out": {
                 "one": "Potvrďte odhlásenie z tohto zariadenia",
                 "other": "Potvrdiť odhlásenie týchto zariadení"
@@ -2946,7 +2842,6 @@
             "no_sessions": "Nenašli sa žiadne relácie.",
             "no_unverified_sessions": "Nenašli sa žiadne neoverené relácie.",
             "no_verified_sessions": "Nenašli sa žiadne overené relácie.",
-            "os": "Operačný systém",
             "other_sessions_heading": "Iné relácie",
             "push_heading": "Push oznámenia",
             "push_subheading": "Prijímať push oznámenia v tejto relácii.",
@@ -3009,13 +2904,11 @@
         "showbold": "Zobraziť všetku aktivitu v zozname miestností (bodky alebo počet neprečítaných správ)",
         "sidebar": {
             "dialog_title": "<strong>Nastavenia:</strong> Bočný panel",
-            "metaspaces_favourites_description": "Zoskupte všetky vaše obľúbené miestnosti a ľudí na jednom mieste.",
             "metaspaces_home_all_rooms": "Zobraziť všetky miestnosti",
             "metaspaces_home_all_rooms_description": "Zobrazte všetky miestnosti v časti Domov, aj keď sú v priestore.",
             "metaspaces_home_description": "Domov je užitočný na získanie prehľadu o všetkom.",
             "metaspaces_orphans": "Miestnosti mimo priestoru",
             "metaspaces_orphans_description": "Zoskupte všetky miestnosti, ktoré nie sú súčasťou priestoru, na jednom mieste.",
-            "metaspaces_people_description": "Zoskupte všetkých ľudí na jednom mieste.",
             "metaspaces_subsection": "Priestory na zobrazenie",
             "metaspaces_video_rooms": "Video miestnosti a konferencie",
             "metaspaces_video_rooms_description": "Zoskupte všetky súkromné video miestnosti a konferencie.",
@@ -3042,7 +2935,6 @@
             "audio_output": "Výstup zvuku",
             "audio_output_empty": "Neboli rozpoznané žiadne zariadenia pre výstup zvuku",
             "auto_gain_control": "Automatické riadenie zosilnenia",
-            "connection_section": "Pripojenie",
             "dialog_title": "<strong>Nastavenia:</strong> Hlas a video",
             "echo_cancellation": "Potlačenie ozveny",
             "enable_fallback_ice_server": "Povoliť náhradnú službu hovorov asistenčného servera (%(server)s)",
@@ -3226,12 +3118,6 @@
     "space_settings": {
         "title": "Nastavenia - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Nemáte oprávnenie pridávať miestnosti do tohto priestoru",
-        "error_no_permission_add_space": "Nemáte oprávnenia na pridávanie priestorov do tohto priestoru",
-        "error_no_permission_create_room": "Nemáte oprávnenie vytvárať nové miestnosti v tomto priestore",
-        "error_no_permission_invite": "Nemáte povolenie pozývať ľudí do tohto priestoru"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Zadajte názov nového servera, ktorý chcete preskúmať.",
@@ -3360,7 +3246,6 @@
         "download_action_downloading": "Preberanie",
         "download_failed": "Sťahovanie zlyhalo",
         "download_failed_description": "Pri sťahovaní tohto súboru sa vyskytla chyba",
-        "e2e_state": "Stav end-to-end šifrovania",
         "edits": {
             "tooltip_label": "Upravené %(date)s. Kliknutím zobrazíte úpravy.",
             "tooltip_sub": "Kliknutím zobrazíte úpravy",
@@ -3443,9 +3328,7 @@
         "m.poll.start": "%(senderName)s spustil anketu - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s zmenil obrázok miestnosti.",
-            "changed_img": "%(senderDisplayName)s zmenil obrázok miestnosti <img/>",
-            "lightbox_title": "%(senderDisplayName)s zmenil obrázok miestnosti %(roomName)s",
-            "removed": "%(senderDisplayName)s odstránil obrázok miestnosti."
+            "lightbox_title": "%(senderDisplayName)s zmenil obrázok miestnosti %(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -4083,13 +3966,7 @@
         "close_to_view_right_panel": "Zatvorte tento widget a zobrazíte ho na tomto paneli",
         "context_menu": {
             "delete": "Vymazať widget",
-            "delete_warning": "Týmto vymažete widget pre všetkých používateľov v tejto miestnosti. Ste si istí, že chcete vymazať tento widget?",
-            "move_left": "Presun doľava",
-            "move_right": "Presun doprava",
-            "remove": "Odstrániť pre všetkých",
-            "revoke": "Odvolať oprávnenia",
-            "screenshot": "Urobiť fotografiu",
-            "start_audio_stream": "Spustiť zvukový prenos"
+            "delete_warning": "Týmto vymažete widget pre všetkých používateľov v tejto miestnosti. Ste si istí, že chcete vymazať tento widget?"
         },
         "cookie_warning": "Tento widget môže používať súbory cookie.",
         "error_hangup_description": "Boli ste odpojení od hovoru. (Chyba: %(message)s)",
diff --git a/apps/web/src/i18n/strings/sq.json b/apps/web/src/i18n/strings/sq.json
index 0d704e5940..48cca1d959 100644
--- a/apps/web/src/i18n/strings/sq.json
+++ b/apps/web/src/i18n/strings/sq.json
@@ -9,7 +9,6 @@
             "other": "%(count)s mesazhe të palexuar, përfshi përmendje.",
             "one": "1 përmendje e palexuar."
         },
-        "room_name": "Dhoma %(name)s",
         "unread_messages": "Mesazhe të palexuar."
     },
     "a11y_jump_first_unread_room": "Hidhu te dhoma e parë e palexuar.",
@@ -17,7 +16,6 @@
         "accept": "Pranoje",
         "add": "Shtojeni",
         "add_existing_room": "Shtoni dhomë ekzistuese",
-        "add_people": "Shtoni njerëz",
         "apply": "Aplikoje",
         "approve": "Miratojeni",
         "back": "Mbrapsht",
@@ -48,7 +46,6 @@
         "enter_fullscreen": "Kalo në mënyrën “Sa krejt ekrani”",
         "exit_fullscreeen": "Dil nga mënyra “Sa krejt ekrani”",
         "expand": "Zgjeroje",
-        "explore_public_rooms": "Eksploroni dhoma publike",
         "explore_rooms": "Eksploroni dhoma",
         "export": "Eksporto",
         "forward": "Përcille",
@@ -60,8 +57,6 @@
         "ignore": "Shpërfille",
         "import": "Importo",
         "invite": "Ftoje",
-        "invite_to_space": "Ftoni në hapësirë",
-        "invites_list": "Ftesa",
         "join": "Hyni",
         "learn_more": "Mësoni më tepër",
         "leave": "Dilni",
@@ -86,7 +81,6 @@
         "rename": "Riemërtojeni",
         "reply": "Përgjigje",
         "reply_in_thread": "Përgjigjuni te rrjedha",
-        "report_content": "Raportoni Lëndë",
         "resend": "Ridërgoje",
         "reset": "Rikthe te parazgjedhjet",
         "resume": "Rimerre",
@@ -104,8 +98,6 @@
         "sign_out": "Dilni",
         "skip": "Anashkaloje",
         "start": "Nise",
-        "start_chat": "Filloni fjalosje",
-        "start_new_chat": "Filloni fjalosje të re",
         "stop": "Ndale",
         "submit": "Parashtroje",
         "subscribe": "Pajtohuni",
@@ -201,10 +193,7 @@
         "log_in_new_account": "<a>Bëni hyrjen</a> te llogaria juaj e re.",
         "logout_dialog": {
             "description": "Jeni i sigurt se doni të dilni?",
-            "megolm_export": "Eksporto dorazi kyçet",
             "setup_key_backup_title": "Do të humbni hyrje te mesazhet tuaj të fshehtëzuar",
-            "setup_secure_backup_description_1": "Mesazhet e fshehtëzuar sigurohen me fshehtëzim skaj-më-skaj. Vetëm ju dhe marrësi(t) kanë kyçet për të lexuar këto mesazhe.",
-            "setup_secure_backup_description_2": "Kur dilni nga llogaria, këto kyçe do të fshihen te kjo pajisje, që do të thotë se s’do të jeni në gjendje të lexoni mesazhe të fshehtëzuar, veç në paçi kyçet për ta në pajisjet tuaja të tjera, ose të kopjeruajtur te shërbyesi.",
             "skip_key_backup": "Nuk i dua mesazhet e mia të fshehtëzuar"
         },
         "misconfigured_body": "Kërkojini përgjegjësit të %(brand)s-it tuaj të kontrollojë <a>formësimin tuaj</a> për zëra të pasaktë ose të përsëdytur.",
@@ -412,7 +401,6 @@
         "email_address": "Adresë email",
         "encrypted": "I fshehtëzuar",
         "error": "Gabim",
-        "favourites": "Të parapëlqyer",
         "feedback": "Mendime",
         "filter_results": "Filtroni përfundimet",
         "forward_message": "Përcille mesazhin",
@@ -420,7 +408,6 @@
         "go_to_settings": "Kalo te Rregullimet",
         "guest": "Mysafir",
         "help": "Ndihmë",
-        "historical": "Të dikurshme",
         "home": "Kreu",
         "homeserver": "Shërbyes Home",
         "identity_server": "Shërbyes identitetesh",
@@ -431,7 +418,6 @@
         "light": "E çelët",
         "loading": "Po ngarkohet…",
         "location": "Vendndodhje",
-        "low_priority": "Me përparësi të ulët",
         "message": "Mesazh",
         "message_layout": "Skemë mesazhesh",
         "microphone": "Mikrofon",
@@ -485,7 +471,6 @@
         "success": "Sukses",
         "suggestions": "Sugjerime",
         "support": "Asistencë",
-        "system_alerts": "Sinjalizime Sistemi",
         "theme": "Temë",
         "thread": "Rrjedhë",
         "threads": "Rrjedha",
@@ -709,7 +694,6 @@
         "state_key": "Kyç Gjendjesh",
         "threads_timeline": "Rrjedhë kohore rrjedhash",
         "title": "Mjete zhvilluesi",
-        "toggle_event": "shfaqe/fshihe aktin",
         "toolbox": "Grup mjetesh",
         "use_at_own_risk": "Kjo UI NUK kontrollon llojet e vlerave. Përdorini me përgjegjësinë tuaj.",
         "value": "Vlerë",
@@ -727,22 +711,6 @@
     },
     "dialog_close_label": "Mbylle dialogun",
     "download_completed": "Shkarkim i Plotësuar",
-    "emoji": {
-        "categories": "Kategori",
-        "category_activities": "Veprimtari",
-        "category_animals_nature": "Kafshë & Natyrë",
-        "category_flags": "Flamuj",
-        "category_food_drink": "Ushqim & Pije",
-        "category_frequently_used": "Përdorur Shpesh",
-        "category_objects": "Objekte",
-        "category_smileys_people": "Emotikone & Persona",
-        "category_symbols": "Simbole",
-        "category_travel_places": "Udhëtim & Vende",
-        "quick_reactions": "Reagime të Shpejta"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Anulo kërkimin"
-    },
     "empty_room": "Dhomë e zbrazët",
     "empty_room_was_name": "Dhomë e zbrazët (qe %(oldName)s)",
     "encryption": {
@@ -788,17 +756,6 @@
             "warning": "Nëse metodën e re të rimarrjeve s’e keni hequr ju, dikush mund të jetë duke u rrekur të hyjë në llogarinë tuaj. Ndryshoni menjëherë fjalëkalimin e llogarisë tuaj, te Rregullimet, dhe caktoni një metodë të re rimarrjesh."
         },
         "set_up_toast_title": "Ujdisni Kopjeruajtje të Sigurt",
-        "setup_secure_backup": {
-            "explainer": "Kopjeruajini kyçet tuaj, përpara se të dilni, që të shmangni humbjen e tyre."
-        },
-        "udd": {
-            "interactive_verification_button": "Verifikojeni në mënyrë ndërvepruese përmes emoji-sh",
-            "other_ask_verify_text": "Kërkojini këtij përdoruesi të verifikojë sesionin e vet, ose ta verifikojë më poshtë dorazi.",
-            "other_new_session_text": "%(name)s (%(userId)s) bëri hyrjen në një sesion të ri pa e verifikuar:",
-            "own_ask_verify_text": "Verifikoni sesionit tuaj tjetër duke përdorur një nga mundësitë më poshtë.",
-            "own_new_session_text": "Bëtë hyrjen në një sesion të ri pa e verifikuar:",
-            "title": "Jo e Besuar"
-        },
         "unable_to_setup_keys_error": "S’arrihet të ujdisen kyçe",
         "verification": {
             "accepting": "Po pranohet…",
@@ -1202,7 +1159,6 @@
         "experimental_description": "Ndiheni eksperimentues? Provoni idetë tona më të reja në zhvillim. Këto veçori s’janë të përfunduara; mund të jenë të paqëndrueshme, mund të ndryshojnë, ose mund të braktisen faqe. <a>Mësoni më tepër</a>.",
         "experimental_section": "Paraparje të hershme",
         "feature_wysiwyg_composer_description": "Përdor tekst të pasur, në vend se Markdown, te hartuesi i mesazheve.",
-        "group_calls": "Punim i ri i thirrjeev në grup",
         "group_developer": "Zhvillues",
         "group_encryption": "Fshehtëzim",
         "group_experimental": "Eksperimentale",
@@ -1216,7 +1172,6 @@
         "group_voip": "Zë & Video",
         "group_widgets": "Widget-e",
         "hidebold": "Fshihe pikën e njoftimeve (shfaq vetëm stema numëratorësh)",
-        "html_topic": "Shfaq paraqitje HTML të temave të dhomave",
         "join_beta": "Merrni pjesë te beta",
         "join_beta_reload": "Pjesëmarrja në beta do të sjellë ringarkim të %(brand)s.",
         "jump_to_date": "Kalo te datë (shton /jumptodate dhe kalon te krye date)",
@@ -1228,12 +1183,9 @@
         "location_share_live_description": "Sendërtim i përkohshëm. Vendndodhjet mbeten te historiku i dhomës.",
         "mjolnir": "Rrugë të reja për të shpërfillur njerëz",
         "msc3531_hide_messages_pending_moderation": "Lejoni moderatorët të fshehin mesazhe në pritje të moderimit.",
-        "report_to_moderators": "Raportojeni te moderatorët",
-        "report_to_moderators_description": "Në dhoma që mbulojnë moderimin, butoni “Raportojeni” do t’ju lejojë t’u raportoni abuzim moderatorëve të dhomës.",
         "sliding_sync_description": "Nën zhvillim aktiv, s’mund të çaktivizohet.",
         "sliding_sync_disabled_notice": "Që të çaktivizohet, dilni dhe rihyni në llogari",
         "sliding_sync_server_no_support": "Shërbyesit tuaj i mungon mbulim i brendshëm për këtë",
-        "under_active_development": "Nën zhvillim aktiv.",
         "video_rooms": "Dhoma me video",
         "video_rooms_a_new_way_to_chat": "Një rrugë e re për të biseduar me zë dhe video në %(brand)s.",
         "video_rooms_always_on_voip_channels": "Në %(brand)s, dhomat video janë kanale VoIP përherë-hapur, trupëzuar brenda një dhome.",
@@ -1285,9 +1237,6 @@
         "room_rejoin_warning": "Kjo dhomë s’është publike. S’do të jeni në gjendje të rihyni në të pa një ftesë.",
         "space_rejoin_warning": "Kjo hapësirë s’është publike. S’do të jeni në gjendje të rihyni në të pa një ftesë."
     },
-    "left_panel": {
-        "open_dial_pad": "Hap butona numrash"
-    },
     "lightbox": {
         "rotate_left": "Rrotulloje Majtas",
         "rotate_right": "Rrotulloje Djathtas",
@@ -1370,7 +1319,6 @@
         "mentions_and_keywords": "@përmendje & fjalëkyçe",
         "mentions_and_keywords_description": "Merrni njoftime vetëm për përmendje dhe fjalëkyçe që keni ujdisur te <a>rregullimet</a> tuaja",
         "mentions_keywords": "Përmendje & fjalëkyçe",
-        "message_didnt_send": "Mesazhi s’u dërgua. Klikoni për hollësi.",
         "mute_description": "S’do të merrni ndonjë njoftim"
     },
     "notifier": {
@@ -1454,7 +1402,6 @@
     },
     "quick_settings": {
         "all_settings": "Krejt rregullimet",
-        "metaspace_section": "Fiksoje në anështyllë",
         "sidebar_settings": "Më tepër mundësi",
         "title": "Rregullime të shpejta"
     },
@@ -1470,22 +1417,10 @@
     },
     "report_content": {
         "description": "Raportimi i këtij mesazhi do të shkaktojë dërgimin e 'ID-së së aktit' unike te përgjegjësi i shërbyesit tuaj Home. Nëse mesazhet në këtë dhomë fshehtëzohen, përgjegjësi i shërbyesit tuaj Home s’do të jetë në gjendje të lexojë tekstin e mesazhit apo të shohë çfarëdo kartelë apo figurë.",
-        "disagree": "S’pajtohem",
         "hide_messages_from_user": "I vini shenjë, nëse doni të fshihen krejt mesazhet e tanishme dhe të ardhshme nga ky përdorues.",
         "ignore_user": "Shpërfille përdoruesin",
-        "illegal_content": "Lëndë e Paligjshme",
         "missing_reason": "Ju lutemi, plotësoni arsyen pse po raportoni.",
-        "nature": "Ju lutemi, zgjidhni një karakterizim dhe përshkruani se ç’e bën këtë mesazh abuziv.",
-        "nature_disagreement": "Ajo ç’shkruan ky përdorues është gabim.\nKjo do t’u njoftohet përgjegjësve të dhomës.",
-        "nature_illegal": "Ky përdorues shfaq sjellje të paligjshme, bie fjala, duke zbuluar identitet personash ose duke kërcënuar me dhunë.\nKjo do t’u njoftohet përgjegjësve të dhomës, të cilët mund ta përshkallëzojnë punën drejt autoriteteve ligjore.",
-        "nature_other": "Çfarëdo arsye tjetër. Ju lutemi, përshkruani problemin.\nKjo do t’u raportohet moderatorëve të dhomës.",
-        "nature_spam": "Ky përdorues dërgon në dhomë reklama të padëshiruara, lidhje për te reklama të tilla ose te propagandë e padëshiruar.\nKjo do t’u njoftohet përgjegjësve të dhomës.",
-        "nature_toxic": "Ky përdorues po tregon sjellje toksike, bie fjala, duke fyer përdorues të tjerë ose duke dhënë lëndë vetëm për të rritur në një dhomë të menduar për familje, ose duke shkelur në mënyra të tjera rregullat e kësaj dhome.\nKjo do t’u njoftohet moderatorëve të dhomës.",
-        "other_label": "Tjetër",
-        "report_content_to_homeserver": "Raportoni Lëndë te Përgjegjësi i Shërbyesit Tuaj Home",
-        "report_entire_room": "Raporto krejt dhomën",
-        "spam_or_propaganda": "Mesazh i padëshiruar ose propagandë",
-        "toxic_behaviour": "Sjellje Toksike"
+        "report_content_to_homeserver": "Raportoni Lëndë te Përgjegjësi i Shërbyesit Tuaj Home"
     },
     "restore_key_backup_dialog": {
         "count_of_decryption_failures": "S’u arrit të shfshehtëzohet sesioni %(failedCount)s!",
@@ -1694,36 +1629,12 @@
         "waiting_for_join_title": "Po pritet që përdorues të vijnë në %(brand)s"
     },
     "room_list": {
-        "add_room_label": "Shtoni dhomë",
         "add_space_label": "Shtoni hapësirë",
-        "breadcrumbs_empty": "S’ka dhoma të vizituara së fundi",
-        "breadcrumbs_label": "Dhoma të vizituara së fundi",
         "failed_add_tag": "S’u arrit të shtohej në dhomë etiketa %(tagName)s",
         "failed_remove_tag": "S’u arrit të hiqej etiketa %(tagName)s nga dhoma",
         "failed_set_dm_tag": "S’u arrit të caktohej etiketa e fjalosjes së drejtpërdrejtë",
-        "home_menu_label": "Mundësi kreu",
-        "join_public_room_label": "Hyni në dhomë publike",
-        "joining_rooms_status": {
-            "one": "Aktualisht duke hyrë në %(count)s dhomë",
-            "other": "Aktualisht duke hyrë në %(count)s dhoma"
-        },
         "notification_options": "Mundësi njoftimesh",
-        "redacting_messages_status": {
-            "one": "Aktualisht po hiqen mesazhe në %(count)s dhomë",
-            "other": "Aktualisht po hiqen mesazhe në %(count)s dhoma"
-        },
-        "show_less": "Shfaq më pak",
-        "show_n_more": {
-            "other": "Shfaq %(count)s të tjera",
-            "one": "Shfaq %(count)s tjetër"
-        },
-        "show_previews": "Shfaq paraparje mesazhesh",
-        "sort_by": "Renditi sipas",
-        "sort_by_activity": "Veprimtari",
-        "sort_unread_first": "Së pari shfaq dhoma me mesazhe të palexuar",
-        "space_menu_label": "Menu %(spaceName)s",
-        "sublist_options": "Mundësi liste",
-        "suggested_rooms_heading": "Roma të Këshilluara"
+        "show_less": "Shfaq më pak"
     },
     "room_settings": {
         "access": {
@@ -2232,7 +2143,6 @@
         "send_read_receipts_unsupported": "Shërbyesi juaj nuk mbulon çaktivizimin e dërgimit të dëftesave të leximit.",
         "send_typing_notifications": "Dërgo njoftime shtypjesh",
         "sessions": {
-            "browser": "Shfletues",
             "confirm_sign_out": {
                 "one": "Ripohoni daljen nga kjo pajisje",
                 "other": "Ripohoni daljen nga këto pajisje"
@@ -2280,7 +2190,6 @@
             "no_sessions": "S’u gjetën sesione.",
             "no_unverified_sessions": "S’u gjetën sesione të paverifikuar.",
             "no_verified_sessions": "S’u gjetën sesione të verifikuar.",
-            "os": "Sistem operativ",
             "other_sessions_heading": "Sesione të tjerë",
             "push_heading": "Njoftime Push",
             "push_subheading": "Merrni njoftime push për këtë sesion.",
@@ -2335,13 +2244,11 @@
         "show_stickers_button": "Shfaq buton ngjitësish",
         "show_typing_notifications": "Shfaq njoftime shtypjeje",
         "sidebar": {
-            "metaspaces_favourites_description": "Gruponi në një vend krejt dhomat tuaja të parapëlqyera dhe personat e parapëlqyer.",
             "metaspaces_home_all_rooms": "Shfaq krejt dhomat",
             "metaspaces_home_all_rooms_description": "Shfaqni krejt dhomat tuaja te Kreu, edhe nëse gjenden në një hapësirë.",
             "metaspaces_home_description": "Kreu është i dobishëm për të pasur një përmbledhje të gjithçkaje.",
             "metaspaces_orphans": "Dhoma jashtë një hapësire",
             "metaspaces_orphans_description": "Gruponi në një vend krejt dhomat tuaja që s’janë pjesë e një hapësire.",
-            "metaspaces_people_description": "Gruponi krejt personat tuaj në një vend.",
             "metaspaces_subsection": "Hapësira për shfaqje",
             "title": "Anështyllë"
         },
@@ -2357,7 +2264,6 @@
             "audio_output": "Sinjal Audio",
             "audio_output_empty": "S’u pikasën Sinjale Audio Në Dalje",
             "auto_gain_control": "Kontroll i automatizuar gain-i",
-            "connection_section": "Lidhje",
             "echo_cancellation": "Anulim jehonash",
             "enable_fallback_ice_server_description": "Vlen vetëm nëse shërbyes juaj Home nuk ofron një të tillë. Adresa juaj IP mund t’u zbulohet të tjerëve gjatë thirrjes.",
             "mirror_local_feed": "Pasqyro prurje vendore videoje",
@@ -2526,12 +2432,6 @@
     "space_settings": {
         "title": "Rregullime - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "S’keni leje të shtoni dhoma në këtë hapësirë",
-        "error_no_permission_add_space": "S’keni leje të shtoni hapësira te kjo hapësirë",
-        "error_no_permission_create_room": "S’keni leje të krijoni dhoma të reja në këtë hapësirë",
-        "error_no_permission_invite": "S’keni leje të ftoni njerëz në këtë hapësirë"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Jepni emrin e një shërbyesi të ri që doni të eksploroni.",
@@ -2712,9 +2612,7 @@
         "m.poll.start": "%(senderName)s nisi një anketim - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s ndryshoi avatarin e dhomës.",
-            "changed_img": "%(senderDisplayName)s ndryshoi avatarin e dhomës në <img/>",
-            "lightbox_title": "%(senderDisplayName)s ndryshoi avatarin në %(roomName)s",
-            "removed": "%(senderDisplayName)s hoqi avatarin e dhomës."
+            "lightbox_title": "%(senderDisplayName)s ndryshoi avatarin në %(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3268,13 +3166,7 @@
         "close_to_view_right_panel": "Mbylleni këtë widget, që ta shihni te ky panel",
         "context_menu": {
             "delete": "Fshije widget-in",
-            "delete_warning": "Fshirja e një widget-i e heq atë për krejt përdoruesit në këtë dhomë. Jeni i sigurt se doni të fshihet ky widget?",
-            "move_left": "Lëvize majtas",
-            "move_right": "Lëvize djathtas",
-            "remove": "Hiqe për këdo",
-            "revoke": "Shfuqizoji lejet",
-            "screenshot": "Bëni një foto",
-            "start_audio_stream": "Nisni transmetim audio"
+            "delete_warning": "Fshirja e një widget-i e heq atë për krejt përdoruesit në këtë dhomë. Jeni i sigurt se doni të fshihet ky widget?"
         },
         "cookie_warning": "Ky <em>widget</em> mund të përdorë <em>cookies</em>.",
         "error_hangup_description": "U shkëputët nga thirrja. (Gabim: %(message)s)",
diff --git a/apps/web/src/i18n/strings/sv.json b/apps/web/src/i18n/strings/sv.json
index 18feb89012..497e198f87 100644
--- a/apps/web/src/i18n/strings/sv.json
+++ b/apps/web/src/i18n/strings/sv.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Emojiväljare",
         "jump_first_invite": "Hoppa till första inbjudan.",
         "message_composer": "Meddelanderedigerare",
         "n_unread_messages": {
@@ -11,8 +10,6 @@
             "other": "%(count)s olästa meddelanden inklusive omnämnanden.",
             "one": "1 oläst omnämnande."
         },
-        "recent_rooms": "Nyliga rum",
-        "room_name": "Rum %(name)s",
         "room_status_bar": "Rumsstatusfält",
         "seek_bar_label": "Förloppsfält för ljud",
         "unread_messages": "Olästa meddelanden."
@@ -22,7 +19,6 @@
         "accept": "Godkänn",
         "add": "Lägg till",
         "add_existing_room": "Lägg till existerande rum",
-        "add_people": "Lägg till personer",
         "apply": "Tillämpa",
         "approve": "Godta",
         "ask_to_join": "Be om att gå med",
@@ -57,7 +53,6 @@
         "enter_fullscreen": "Gå till fullskärm",
         "exit_fullscreeen": "Gå ur fullskärm",
         "expand": "Expandera",
-        "explore_public_rooms": "Utforska offentliga rum",
         "explore_rooms": "Utforska rum",
         "export": "Exportera",
         "forward": "Vidarebefordra",
@@ -69,8 +64,6 @@
         "ignore": "Ignorera",
         "import": "Importera",
         "invite": "Bjud in",
-        "invite_to_space": "Bjud in till utrymme",
-        "invites_list": "Inbjudningar",
         "join": "Gå med",
         "learn_more": "Läs mer",
         "leave": "Lämna",
@@ -97,7 +90,6 @@
         "rename": "Döp om",
         "reply": "Svara",
         "reply_in_thread": "Svara i tråd",
-        "report_content": "Anmäl innehåll",
         "report_room": "Anmäl rum",
         "resend": "Skicka igen",
         "reset": "Återställ",
@@ -117,8 +109,6 @@
         "sign_out": "Ta bort den här enheten",
         "skip": "Hoppa över",
         "start": "Starta",
-        "start_chat": "Starta chatt",
-        "start_new_chat": "Starta ny chatt",
         "stop": "Stoppa",
         "submit": "Skicka in",
         "subscribe": "Prenumerera",
@@ -219,10 +209,7 @@
         "log_in_new_account": "<a>Logga in</a> i ditt nya konto.",
         "logout_dialog": {
             "description": "Är du säker på att du vill logga ut?",
-            "megolm_export": "Exportera nycklar manuellt",
             "setup_key_backup_title": "Du kommer att förlora åtkomst till dina krypterade meddelanden",
-            "setup_secure_backup_description_1": "Krypterade meddelanden är säkrade med totalsträckskryptering. Bara du och mottagaren/na har nycklarna för att läsa dessa meddelanden.",
-            "setup_secure_backup_description_2": "När du loggar ut kommer nycklarna att raderas från den här enheten, vilket betyder att du inte kommer kunna läsa krypterade meddelanden om du inte har nycklarna för dem på dina andra enheter, eller säkerhetskopierade dem till servern.",
             "skip_key_backup": "Jag vill inte ha mina krypterade meddelanden"
         },
         "misconfigured_body": "Be din %(brand)s-administratör att kolla <a>din konfiguration</a> efter felaktiga eller duplicerade poster.",
@@ -274,7 +261,6 @@
             "point_the_camera": "Skanna QR-koden som visas här",
             "scan_code_instruction": "Skanna QR-koden med en annan enhet",
             "scan_qr_code": "Logga in med QR-kod",
-            "security_code": "Säkerhetskod",
             "security_code_prompt": "Om du blir ombedd anger du koden nedan på din andra enhet.",
             "select_qr_code": "Välj \"%(scanQRCode)s”",
             "unsupported_explainer": "Din kontoleverantör stöder inte inloggning på en ny enhet med en QR-kod.",
@@ -480,7 +466,6 @@
         "encrypted": "Krypterat",
         "error": "Fel",
         "faq": "Vanliga frågor",
-        "favourites": "Favoriter",
         "feedback": "Återkoppling",
         "filter_results": "Filtrera resultaten",
         "forward_message": "Vidarebefordra meddelande",
@@ -488,7 +473,6 @@
         "go_to_settings": "Gå till inställningarna",
         "guest": "Gäst",
         "help": "Hjälp",
-        "historical": "Historiska",
         "home": "Hem",
         "homeserver": "Hemserver",
         "identity_server": "Identitetsserver",
@@ -500,13 +484,11 @@
         "light": "Ljust",
         "loading": "Laddar …",
         "location": "Plats",
-        "low_priority": "Låg prioritet",
         "matrix": "Matrix",
         "message": "Meddelande",
         "message_layout": "Meddelandearrangemang",
         "message_timestamp_invalid": "Ogiltig tidsstämpel",
         "microphone": "Mikrofon",
-        "model": "Modell",
         "moderation_and_safety": "Moderering och säkerhet",
         "modern": "Modernt",
         "mute": "Tysta",
@@ -565,7 +547,6 @@
         "success": "Lyckades",
         "suggestions": "Förslag",
         "support": "Hjälp",
-        "system_alerts": "Systemvarningar",
         "theme": "Tema",
         "thread": "Tråd",
         "threads": "Trådar",
@@ -582,7 +563,6 @@
         "username": "Användarnamn",
         "verified": "Verifierad",
         "version": "Version",
-        "video": "Video",
         "video_room": "Videorum",
         "view_message": "Visa meddelande",
         "warning": "Varning"
@@ -853,7 +833,6 @@
         "thread_root_id": "Trådroots-ID: %(threadRootId)s",
         "threads_timeline": "Trådtidslinje",
         "title": "Utvecklarverktyg",
-        "toggle_event": "växla händelse",
         "toolbox": "Verktygslåda",
         "use_at_own_risk": "Det här UI:t kontrollerar inte typer för värden. Använd på egen risk.",
         "user_read_up_to": "Användaren har läst fram till: ",
@@ -875,22 +854,6 @@
     },
     "dialog_close_label": "Stäng dialogrutan",
     "download_completed": "Nedladdning slutförd",
-    "emoji": {
-        "categories": "Kategorier",
-        "category_activities": "Aktiviteter",
-        "category_animals_nature": "Djur & natur",
-        "category_flags": "Flaggor",
-        "category_food_drink": "Mat & dryck",
-        "category_frequently_used": "Ofta använda",
-        "category_objects": "Objekt",
-        "category_smileys_people": "Smileys & personer",
-        "category_symbols": "Symboler",
-        "category_travel_places": "Resor & platser",
-        "quick_reactions": "Snabbreaktioner"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Avbryt sökningen"
-    },
     "empty_room": "Tomt rum",
     "empty_room_was_name": "Tomt rum (var %(oldName)s)",
     "encryption": {
@@ -951,19 +914,8 @@
         "set_up_recovery": "Ställ in återställning",
         "set_up_recovery_toast_description": "Generera en återställningsnyckel som kan användas för att återställa din krypterade meddelandehistorik om du förlorar åtkomst till dina enheter.",
         "set_up_toast_title": "Ställ in säker säkerhetskopiering",
-        "setup_secure_backup": {
-            "explainer": "Säkerhetskopiera dina nycklar innan du loggar ut för att undvika att du blir av med dem."
-        },
         "turn_on_key_storage": "Slå på nyckellagring",
         "turn_on_key_storage_description": "Lagra din kryptografiska identitet och dina meddelandenycklar säkert på servern. Detta gör att du kan se din meddelandehistorik på alla nya enheter.",
-        "udd": {
-            "interactive_verification_button": "Verifiera interaktivt med emoji",
-            "other_ask_verify_text": "Be den här användaren att verifiera sin session, eller verifiera den manuellt nedan.",
-            "other_new_session_text": "%(name)s (%(userId)s) loggade in i en ny session utan att verifiera den:",
-            "own_ask_verify_text": "Verifiera din andra session med ett av alternativen nedan.",
-            "own_new_session_text": "Du loggade in i en ny session utan att verifiera den:",
-            "title": "Inte betrodd"
-        },
         "unable_to_setup_keys_error": "Kunde inte ställa in nycklar",
         "verification": {
             "accepting": "Accepterar…",
@@ -1454,7 +1406,6 @@
         "extended_profiles_msc_support": "Kräver att din server har stöd för MSC4133",
         "feature_disable_call_per_sender_encryption": "Inaktivera kryptering per avsändare för Element Call",
         "feature_wysiwyg_composer_description": "Använd rik text istället för Markdown i meddelanderedigeraren.",
-        "group_calls": "Ny gruppsamtalsupplevelse",
         "group_developer": "Utvecklare",
         "group_encryption": "Kryptering",
         "group_experimental": "Experimentellt",
@@ -1469,7 +1420,6 @@
         "group_voip": "Röst & video",
         "group_widgets": "Widgets",
         "hidebold": "Dölj aviseringspunkt (visa bara räknarmärken)",
-        "html_topic": "Visa HTML-representation av rumsämnen",
         "join_beta": "Gå med i betan",
         "join_beta_reload": "Att gå med i betan kommer att ladda om %(brand)s.",
         "jump_to_date": "Hoppa till datum (lägger till /jumptodate och hopp till datumrubriker)",
@@ -1481,20 +1431,16 @@
         "location_share_live_description": "Temporär implementation. Platser stannar kvar i rumshistoriken.",
         "mjolnir": "Nya sätt att ignorera personer",
         "msc3531_hide_messages_pending_moderation": "Låt moderatorer dölja meddelanden i väntan på moderering.",
-        "new_room_list": "Aktivera ny rumslista",
         "notification_settings": "Nya aviseringsinställningar",
         "notification_settings_beta_caption": "Vi introducerar ett enklare sätt att ändra dina aviseringsinställningar. Anpassa din %(brand)s precis som du vill ha den.",
         "notification_settings_beta_title": "Aviseringsinställningar",
         "notifications": "Aktivera aviseringspanelen i rumshuvudet",
         "render_reaction_images": "Återge anpassade bilder i reaktioner",
         "render_reaction_images_description": "Ibland kallat för ”anpassade emojis”.",
-        "report_to_moderators": "Rapportera till moderatorer",
-        "report_to_moderators_description": "I rum som stöder moderering så låter \"Rapportera\"-knappen dig rapportera trakasseri till rumsmoderatorer.",
         "sliding_sync": "Sliding sync-läge",
         "sliding_sync_description": "Under aktiv utveckling, kan inte inaktiveras.",
         "sliding_sync_disabled_notice": "Logga ut och in igen för att inaktivera",
         "sliding_sync_server_no_support": "Din server saknar support",
-        "under_active_development": "Under aktiv utveckling.",
         "unrealiable_e2e": "Otillförlitlig i krypterade rum",
         "video_rooms": "Videorum",
         "video_rooms_a_new_way_to_chat": "Ett nytt sätt att chatta över röst och video i %(brand)s.",
@@ -1550,9 +1496,6 @@
         "room_rejoin_warning": "Det här rummet är inte offentligt. Du kommer inte kunna gå med igen utan en inbjudan.",
         "space_rejoin_warning": "Det här utrymmet är inte offentligt. Du kommer inte kunna gå med igen utan en inbjudan."
     },
-    "left_panel": {
-        "open_dial_pad": "Öppna knappsats"
-    },
     "lightbox": {
         "rotate_left": "Rotera vänster",
         "rotate_right": "Rotera höger",
@@ -1651,7 +1594,6 @@
         "mentions_and_keywords": "@omnämnanden och nyckelord",
         "mentions_and_keywords_description": "Bli endast aviserad om omnämnanden och nyckelord i enlighet med dina <a>inställningar</a>",
         "mentions_keywords": "Omnämnanden & nyckelord",
-        "message_didnt_send": "Meddelande skickades inte. Klicka för info.",
         "mute_description": "Du får inga aviseringar"
     },
     "notifier": {
@@ -1738,7 +1680,6 @@
     },
     "quick_settings": {
         "all_settings": "Alla inställningar",
-        "metaspace_section": "Fäst i sidopanelen",
         "sidebar_settings": "Fler alternativ",
         "title": "Snabbinställningar"
     },
@@ -1756,25 +1697,10 @@
     },
     "report_content": {
         "description": "Att rapportera det här meddelandet kommer att skicka dess unika 'händelse-ID' till administratören för din hemserver. Om meddelanden i det här rummet är krypterade kommer din hemserveradministratör inte att kunna läsa meddelandetexten eller se några filer eller bilder.",
-        "disagree": "Håll inte med",
-        "error_create_room_moderation_bot": "Kunde inte skapa rum med modereringsbot",
         "hide_messages_from_user": "Bocka i om du vill dölja alla nuvarande och framtida meddelanden från den här användaren.",
         "ignore_user": "Ignorera användare",
-        "illegal_content": "Olagligt innehåll",
         "missing_reason": "Vänligen fyll i varför du anmäler.",
-        "nature": "Välj en art och beskriv vad som gör detta meddelande kränkande.",
-        "nature_disagreement": "Vad användaren skriver är fel.\nDetta kommer att anmälas till rumsmoderatorerna.",
-        "nature_illegal": "Användaren påvisar olagligt beteende, som att doxa folk eller hota med våld.\nDetta kommer att rapporteras till rumsmoderatorerna som kanske eskalerar detta till juridiska myndigheter.",
-        "nature_nonstandard_admin": "Detta rum är dedikerat till olagligt eller toxiskt innehåll eller moderatorerna misslyckas med att moderera olagligt eller toxiskt innehåll.\nDetta kommer att rapporteras till administratörerna för%(homeserver)s.",
-        "nature_nonstandard_admin_encrypted": "Detta rum är dedikerat till olagligt eller giftigt innehåll eller moderatorerna misslyckas med att moderera olagligt eller toxiskt innehåll.\nDetta kommer att rapporteras till administratörerna för%(homeserver)s. Administratörerna kommer INTE kunna läsa krypterat innehåll i det här rummet.",
-        "nature_other": "Annan orsak. Beskriv problemet tack.\nDetta kommer att rapporteras till rumsmoderatorerna.",
-        "nature_spam": "Användaren spammar rummet med reklam eller länkar till reklam eller propaganda.\nDetta kommer att rapporteras till rumsmoderatorerna.",
-        "nature_toxic": "Den här användaren uppvisar ett stötande beteende, till exempel genom att förolämpa andra användare eller dela vuxenmaterial i familjevänliga rum, eller på annat sätt bryter mot rummets regler.\nDetta kommer att rapporteras till rummets moderatorer.",
-        "other_label": "Annat",
-        "report_content_to_homeserver": "Rapportera innehåll till din hemserveradministratör",
-        "report_entire_room": "Rapportera hela rummet",
-        "spam_or_propaganda": "Spam eller propaganda",
-        "toxic_behaviour": "Stötande beteende"
+        "report_content_to_homeserver": "Rapportera innehåll till din hemserveradministratör"
     },
     "report_room": {
         "description": "Rapportera det här rummet till din hemserveradministratör. Detta skickar rummets unika ID, men om meddelanden är krypterade kan administratören inte läsa dem eller visa delade filer.",
@@ -2040,41 +1966,16 @@
         "waiting_for_join_title": "Väntar på att användare går med i %(brand)s"
     },
     "room_list": {
-        "add_room_label": "Lägg till rum",
         "add_space_label": "Lägg till utrymme",
-        "breadcrumbs_empty": "Inga nyligen besökta rum",
-        "breadcrumbs_label": "Nyligen besökta rum",
         "failed_add_tag": "Misslyckades att lägga till etiketten %(tagName)s till rummet",
         "failed_remove_tag": "Misslyckades att radera etiketten %(tagName)s från rummet",
         "failed_set_dm_tag": "Misslyckades att sätta direktmeddelandetagg",
-        "home_menu_label": "Hemalternativ",
-        "join_public_room_label": "Gå med i offentligt rum",
-        "joining_rooms_status": {
-            "one": "Går just nu med i %(count)s rum",
-            "other": "Går just nu med i %(count)s rum"
-        },
         "list_title": "Rumslista",
         "more_options": {
             "leave_room": "Lämna rum"
         },
         "notification_options": "Aviseringsinställningar",
-        "redacting_messages_status": {
-            "one": "Tar just nu bort meddelanden i %(count)s rum",
-            "other": "Tar just nu bort meddelanden i %(count)s rum"
-        },
-        "show_less": "Visa mindre",
-        "show_n_more": {
-            "other": "Visa %(count)s till",
-            "one": "Visa %(count)s till"
-        },
-        "show_previews": "Visa förhandsgranskningar av meddelanden",
-        "sort_by": "Sortera efter",
-        "sort_by_activity": "Aktivitet",
-        "sort_by_alphabet": "A-Ö",
-        "sort_unread_first": "Visa rum med olästa meddelanden först",
-        "space_menu_label": "%(spaceName)s-alternativ",
-        "sublist_options": "Listalternativ",
-        "suggested_rooms_heading": "Föreslagna rum"
+        "show_less": "Visa mindre"
     },
     "room_settings": {
         "access": {
@@ -2575,7 +2476,7 @@
             "unable_to_load_msisdns": "Det går inte att läsa in telefonnummer",
             "username": "Användarnamn"
         },
-        "inline_url_previews_default": "Aktivera inbäddad URL-förhandsgranskning som standard",
+        "inline_url_previews_default": "Aktivera förhandsgranskningar",
         "insert_trailing_colon_mentions": "Infoga kolon efter användaromnämnande på början av ett meddelande",
         "invite_controls": {
             "default_label": "Tillåt användare att bjuda in dig till rum"
@@ -2686,13 +2587,13 @@
             "room_activity": "Ny rumsaktivitet, uppgraderingar och statusmeddelanden inträffar",
             "rule_call": "Inbjudan till samtal",
             "rule_contains_display_name": "Meddelanden som innehåller mitt visningsnamn",
-            "rule_contains_user_name": "Meddelanden som innehåller mitt användarnamn",
+            "rule_contains_user_name": "@omnämnanden och svar",
             "rule_encrypted": "Krypterade meddelanden i gruppchattar",
             "rule_encrypted_room_one_to_one": "Krypterade meddelanden i en-till-en-chattar",
             "rule_invite_for_me": "När jag bjuds in till ett rum",
             "rule_message": "Meddelanden i gruppchattar",
             "rule_room_one_to_one": "Meddelanden i en-till-en-chattar",
-            "rule_roomnotif": "Meddelanden som innehåller @room",
+            "rule_roomnotif": "@rumsomnämnanden",
             "rule_suppress_notices": "Meddelanden från bottar",
             "rule_tombstone": "När rum uppgraderas",
             "show_message_desktop_notification": "Visa meddelande i skrivbordsavisering",
@@ -2769,7 +2670,6 @@
         "send_typing_notifications": "Skicka \"skriver\"-statusar",
         "sessions": {
             "best_security_note": "För bästa säkerhet, verifiera dina sessioner och logga ut från sessioner som du inte känner igen eller använder längre.",
-            "browser": "Webbläsare",
             "confirm_sign_out": {
                 "one": "Bekräfta utloggning av denna enhet",
                 "other": "Bekräfta utloggning av dessa enheter"
@@ -2820,7 +2720,6 @@
             "no_sessions": "Inga sessioner hittades.",
             "no_unverified_sessions": "Inga overifierade sessioner hittades.",
             "no_verified_sessions": "Inga verifierade sessioner hittades.",
-            "os": "Operativsystem",
             "other_sessions_heading": "Andra sessioner",
             "push_heading": "Pushnotiser",
             "push_subheading": "Få pushnotiser på den här sessionen.",
@@ -2881,13 +2780,11 @@
         "showbold": "Visa all aktivitet i rumslistan (prickar eller antal olästa meddelanden)",
         "sidebar": {
             "dialog_title": "<strong>Inställningar:</strong> Sidofält",
-            "metaspaces_favourites_description": "Gruppera alla dina favoritrum och -personer på ett ställe.",
             "metaspaces_home_all_rooms": "Visa alla rum",
             "metaspaces_home_all_rooms_description": "Visa alla dina rum i Hem, även om de är i ett utrymme.",
             "metaspaces_home_description": "Hem är användbar för att få en översikt över allt.",
             "metaspaces_orphans": "Rum utanför ett utrymme",
             "metaspaces_orphans_description": "Gruppera alla dina rum som inte är en del av ett utrymme på ett ställe.",
-            "metaspaces_people_description": "Gruppera alla dina personer på ett ställe.",
             "metaspaces_subsection": "Utrymmen att visa",
             "metaspaces_video_rooms": "Videorum och konferenser",
             "metaspaces_video_rooms_description": "Gruppera alla privata videorum och konferenser.",
@@ -2908,7 +2805,6 @@
             "audio_output": "Ljudutgång",
             "audio_output_empty": "Inga ljudutgångar hittades",
             "auto_gain_control": "Automatisk förstärkningskontroll",
-            "connection_section": "Anslutning",
             "dialog_title": "<strong>Inställningar: </strong> Röst och video",
             "echo_cancellation": "Ekoreducering",
             "enable_fallback_ice_server": "Tillåt reservserver för samtalsassistans (%(server)s)",
@@ -3091,12 +2987,6 @@
     "space_settings": {
         "title": "Inställningar - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Du är inte behörig att lägga till rum till det här utrymmet",
-        "error_no_permission_add_space": "Du är inte behörig att lägga till utrymmen till det här utrymmet",
-        "error_no_permission_create_room": "Du är inte behörig att skapa nya rum i det här utrymmet",
-        "error_no_permission_invite": "Du är inte behörig att bjuda in personer till det här utrymmet"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Ange namnet för en ny server du vill utforska.",
@@ -3223,7 +3113,6 @@
         "download_action_downloading": "Laddar ner",
         "download_failed": "Nedladdning misslyckades",
         "download_failed_description": "Ett fel uppstod när den här filen laddades ned",
-        "e2e_state": "Tillståndet för end-to-end-krypteringen",
         "edits": {
             "tooltip_label": "Redigerat vid %(date)s. Klicka för att visa redigeringar.",
             "tooltip_sub": "Klicka för att visa redigeringar",
@@ -3305,9 +3194,7 @@
         "m.poll.start": "%(senderName)s har startat en omröstning - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s bytte rummets avatar.",
-            "changed_img": "%(senderDisplayName)s bytte rummets avatar till <img/>",
-            "lightbox_title": "%(senderDisplayName)s bytte avatar för %(roomName)s",
-            "removed": "%(senderDisplayName)s tog bort rummets avatar."
+            "lightbox_title": "%(senderDisplayName)s bytte avatar för %(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3908,13 +3795,7 @@
         "close_to_view_right_panel": "Stäng den här widgeten för att se den i den här panelen",
         "context_menu": {
             "delete": "Radera widget",
-            "delete_warning": "Att radera en widget tar bort den för alla användare i rummet. Är du säker på att du vill radera den?",
-            "move_left": "Flytta till vänster",
-            "move_right": "Flytta till höger",
-            "remove": "Ta bort för alla",
-            "revoke": "Återkalla behörigheter",
-            "screenshot": "Ta en bild",
-            "start_audio_stream": "Starta ljudström"
+            "delete_warning": "Att radera en widget tar bort den för alla användare i rummet. Är du säker på att du vill radera den?"
         },
         "cookie_warning": "Denna widget kan använda kakor.",
         "error_hangup_description": "Du kopplades bort från samtalet. (Fel: %(message)s)",
diff --git a/apps/web/src/i18n/strings/tr.json b/apps/web/src/i18n/strings/tr.json
index f8121f0faf..3e68839ac5 100644
--- a/apps/web/src/i18n/strings/tr.json
+++ b/apps/web/src/i18n/strings/tr.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Emoji seçici",
         "jump_first_invite": "İlk davete git.",
         "message_composer": "Mesaj oluşturucu",
         "n_unread_messages": {
@@ -11,8 +10,6 @@
             "one": "1 okunmamış bahis.",
             "other": "anmalar dahil okunmayan %(count)s mesaj."
         },
-        "recent_rooms": "Son odalar",
-        "room_name": "Oda %(name)s",
         "room_status_bar": "Oda durum çubuğu",
         "seek_bar_label": "Ses arama çubuğu",
         "unread_messages": "Okunmamış mesajlar."
@@ -22,7 +19,6 @@
         "accept": "Kabul Et",
         "add": "Ekle",
         "add_existing_room": "Mevcut odayı ekle",
-        "add_people": "Kişi ekleme",
         "apply": "Uygula",
         "approve": "Onayla",
         "ask_to_join": "Katılmak için sor",
@@ -55,7 +51,6 @@
         "enter_fullscreen": "Tam ekrana geç",
         "exit_fullscreeen": "Tam ekrandan çık",
         "expand": "Genişlet",
-        "explore_public_rooms": "Herkese açık odaları keşfet",
         "explore_rooms": "Odaları keşfet",
         "export": "Dışa Aktar",
         "forward": "İleri",
@@ -67,8 +62,6 @@
         "ignore": "Yoksay",
         "import": "İçe Aktar",
         "invite": "Davet et",
-        "invite_to_space": "Alana davet et\n",
-        "invites_list": "Davetler",
         "join": "Katıl",
         "learn_more": "Daha fazla bilgi edin",
         "leave": "Ayrıl",
@@ -95,7 +88,6 @@
         "rename": "Yeniden adlandır",
         "reply": "Yanıtla",
         "reply_in_thread": "Konu içinde yanıtla\n",
-        "report_content": "İçeriği Raporla",
         "resend": "Yeniden Gönder",
         "reset": "Sıfırla",
         "resume": "Devam et",
@@ -114,8 +106,6 @@
         "sign_out": "Çıkış Yap",
         "skip": "Atla",
         "start": "Başlat",
-        "start_chat": "Sohbete başla",
-        "start_new_chat": "Yeni sohbeti başlat",
         "stop": "Dur",
         "submit": "Gönder",
         "subscribe": "Abone ol",
@@ -215,10 +205,7 @@
         "log_in_new_account": "Yeni hesabınızla <a>Oturum aç</a>ın.",
         "logout_dialog": {
             "description": "Oturumdan çıkmak istediğinize emin misiniz?",
-            "megolm_export": "Elle dışa aktarılmış anahtarlar",
             "setup_key_backup_title": "Şifrelenmiş mesajlarınıza erişiminizi kaybedeceksiniz",
-            "setup_secure_backup_description_1": "Şifreli mesajlar uçtan uca şifreleme ile korunur. Bu mesajları yalnızca siz ve alıcı(lar) okuyabilir.",
-            "setup_secure_backup_description_2": "Oturumu kapattığınızda, bu anahtarlar bu cihazdan silinecek. Bu, diğer cihazlarınızda bu anahtarlara sahip olmadığınız veya anahtarları sunucuya yedeklemediğiniz sürece şifreli mesajları okuyamayacağınız anlamına gelir.",
             "skip_key_backup": "Şifrelenmiş mesajlarımı istemiyorum"
         },
         "misconfigured_body": "%(brand)s yöneticinize <a>yapılandırmanızın</a> hatalı ve mükerrer girdilerini kontrol etmesi için talepte bulunun.",
@@ -270,7 +257,6 @@
             "point_the_camera": "Burada gösterilen QR kodunu tarayın",
             "scan_code_instruction": "QR kodunu başka bir cihazla tarayın",
             "scan_qr_code": "QR kod ile oturum aç",
-            "security_code": "Güvenlik kodu",
             "security_code_prompt": "İstenirse, diğer cihazınızda aşağıdaki kodu girin.",
             "select_qr_code": "Seç \"%(scanQRCode)s”",
             "unsupported_explainer": "Hesap sağlayıcınız, QR koduyla yeni bir cihazda oturum açmayı desteklemiyor.",
@@ -474,7 +460,6 @@
         "encrypted": "Şifrelenmiş",
         "error": "Hata",
         "faq": "SSS",
-        "favourites": "Favoriler",
         "feedback": "Geri bildirim",
         "filter_results": "Sonuçları filtrele",
         "forward_message": "Mesajı ilet",
@@ -482,7 +467,6 @@
         "go_to_settings": "Ayarlara Git",
         "guest": "Misafir",
         "help": "Yardım",
-        "historical": "Geçmiş",
         "home": "Ev",
         "homeserver": "Ana sunucu",
         "identity_server": "Kimlik sunucusu",
@@ -494,13 +478,11 @@
         "light": "Aydınlık",
         "loading": "Yükleniyor...",
         "location": "Konum",
-        "low_priority": "Düşük öncelik",
         "matrix": "Matrix",
         "message": "Message",
         "message_layout": "Mesaj düzeni",
         "message_timestamp_invalid": "Geçersiz zaman damgası",
         "microphone": "Mikrofon",
-        "model": "Model",
         "modern": "Modern",
         "mute": "Sessiz",
         "n_members": {
@@ -558,7 +540,6 @@
         "success": "Başarılı",
         "suggestions": "Öneriler",
         "support": "Destek",
-        "system_alerts": "Sistem Uyarıları",
         "theme": "Tema",
         "thread": "Konu",
         "threads": "Konular",
@@ -575,7 +556,6 @@
         "username": "Kullanıcı Adı",
         "verified": "Doğrulanmış",
         "version": "Versiyon",
-        "video": "Video",
         "video_room": "Görüntülü sohbet odası",
         "view_message": "Mesajı görüntüle",
         "warning": "Uyarı"
@@ -831,7 +811,6 @@
         "thread_root_id": "Konu Kök Kimliği: %(threadRootId)s",
         "threads_timeline": "Dizi mesajlar zaman çizelgesi",
         "title": "Geliştirici araçları",
-        "toggle_event": "etkinliği değiştir",
         "toolbox": "Araç Kutusu",
         "use_at_own_risk": "Bu kullanıcı arayüzü, değerlerin türlerini kontrol ETMEZ. Kendi sorumluluğunuzda kullanın.",
         "user_read_up_to": "Kullanıcı buraya kadar okudu: ",
@@ -853,22 +832,6 @@
     },
     "dialog_close_label": "Kutucuğu kapat",
     "download_completed": "İndirme Tamamlandı",
-    "emoji": {
-        "categories": "Kategoriler",
-        "category_activities": "Aktiviteler",
-        "category_animals_nature": "Hayvanlar & Doğa",
-        "category_flags": "Bayraklar",
-        "category_food_drink": "Yiyecek & İçecek",
-        "category_frequently_used": "Sıklıkla Kullanılan",
-        "category_objects": "Nesneler",
-        "category_smileys_people": "İfadeler ve İnsanlar",
-        "category_symbols": "Semboller",
-        "category_travel_places": "Seyahat & Yerler",
-        "quick_reactions": "Hızlı Tepkiler"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Aramayı iptal et"
-    },
     "empty_room": "Boş oda",
     "empty_room_was_name": "Boş oda (%(oldName)s idi)",
     "encryption": {
@@ -925,17 +888,6 @@
         "set_up_recovery": "Kurtarmayı ayarlayın",
         "set_up_recovery_toast_description": "Cihazlarınıza erişiminizi kaybetmeniz durumunda şifrelenmiş mesaj geçmişinizi geri yüklemek için kullanılabilecek bir kurtarma anahtarı oluşturun.",
         "set_up_toast_title": "Güvenli Yedekleme kur",
-        "setup_secure_backup": {
-            "explainer": "Anahtarlarını kaybetmemek için, çıkış yapmadan önce önleri yedekle."
-        },
-        "udd": {
-            "interactive_verification_button": "Emoji ile etkileşimli olarak doğrula",
-            "other_ask_verify_text": "Kullanıcıya oturumunu doğrulamasını söyle, ya da aşağıdan doğrula.",
-            "other_new_session_text": "%(name)s (%(userId)s) yeni oturuma doğrulamadan giriş yaptı:",
-            "own_ask_verify_text": "Diğer oturumunuzu aşağıdaki seçeneklerden birini kullanarak doğrulayın.",
-            "own_new_session_text": "Yeni bir oturuma, doğrulamadan oturum açtınız:",
-            "title": "Güvenilmiyor"
-        },
         "unable_to_setup_keys_error": "Anahtarlar ayarlanamıyor",
         "verification": {
             "accepting": "Kabul ediyorum…",
@@ -1406,7 +1358,6 @@
         "extended_profiles_msc_support": "Sunucunuzun MSC4133 desteklemesini gerektirir",
         "feature_disable_call_per_sender_encryption": "Element Call için gönderen başına şifrelemeyi devre dışı bırakın",
         "feature_wysiwyg_composer_description": "Mesaj oluşturucu olarak Markdown yerine zengin metin kullanın.",
-        "group_calls": "Yeni grup görüşmesi deneyimi",
         "group_developer": "Geliştirici",
         "group_encryption": "Şifreleme",
         "group_experimental": "Deneysel",
@@ -1421,7 +1372,6 @@
         "group_voip": "Ses & Video",
         "group_widgets": "Widget'lar",
         "hidebold": "Bildirim noktasını gizle (yalnızca sayaç rozetlerini göster)",
-        "html_topic": "Oda konularının HTML gösterimini göster",
         "join_beta": "Beta’ya katıl",
         "join_beta_reload": "Betaya katılmak, %(brand)s yeniden yükleyecektir.",
         "jump_to_date": "Tarihe atla (/jumptodate ve tarihe atla başlıklarını ekler)",
@@ -1433,20 +1383,16 @@
         "location_share_live_description": "Geçici uygulama. Konumlar oda geçmişinde kalır.",
         "mjolnir": "İnsanları görmezden gelmenin yeni yolları",
         "msc3531_hide_messages_pending_moderation": "Moderatörlerin onay bekleyen mesajları gizlemesine izin verin.",
-        "new_room_list": "Yeni oda listesini etkinleştir",
         "notification_settings": "Yeni Bildirim Ayarları",
         "notification_settings_beta_caption": "Bildirim ayarlarınızı değiştirmenin daha basit bir yolunu sunuyoruz. %(brand)s istediğiniz gibi özelleştirin.",
         "notification_settings_beta_title": "Bildirim Ayarları",
         "notifications": "Oda başlığındaki bildirim panelini etkinleştir",
         "render_reaction_images": "Tepkilerde özel görüntüler oluştur",
         "render_reaction_images_description": "Bazen \"özel emojiler\" olarak da adlandırılır.",
-        "report_to_moderators": "Moderatörlere bildir",
-        "report_to_moderators_description": "Moderasyonu destekleyen odalarda, \"Bildir\" düğmesi, kötüye kullanımı oda moderatörlerine bildirmenize olanak tanır.",
         "sliding_sync": "Sliding Sync modu",
         "sliding_sync_description": "Aktif geliştirme aşamasında, devre dışı bırakılamaz.",
         "sliding_sync_disabled_notice": "Devre dışı bırakmak için oturumu kapatıp tekrar açın",
         "sliding_sync_server_no_support": "Sunucunuz desteklemiyor",
-        "under_active_development": "Aktif geliştirme aşamasında.",
         "unrealiable_e2e": "Şifreli odalarda güvenilir değil",
         "video_rooms": "Video odaları",
         "video_rooms_a_new_way_to_chat": "%(brand)s ile sesli ve görüntülü sohbet etmenin yeni bir yolu.",
@@ -1502,9 +1448,6 @@
         "room_rejoin_warning": "Bu oda herkese açık değildir. Davetiye olmadan tekrar katılamazsınız.",
         "space_rejoin_warning": "Bu alan herkese açık değildir. Davet olmadan yeniden katılamazsınız."
     },
-    "left_panel": {
-        "open_dial_pad": "Arama tuşlarını aç"
-    },
     "lightbox": {
         "rotate_left": "Sola Döndür",
         "rotate_right": "Sağa Döndür",
@@ -1602,7 +1545,6 @@
         "mentions_and_keywords": "@bahsetmeler ve anahtar kelimeler",
         "mentions_and_keywords_description": "Yalnızca <a>settings</a> ayarlarınızda ayarlanan bahsetmeler ve anahtar kelimelerle bildirim alın",
         "mentions_keywords": "Bahsetmeler ve anahtar kelimeler",
-        "message_didnt_send": "Mesaj gönderilmedi. Bilgi için tıklayınız.",
         "mute_description": "Hiçbir bildirim almayacaksınız"
     },
     "notifier": {
@@ -1688,7 +1630,6 @@
     },
     "quick_settings": {
         "all_settings": "Tüm ayarlar",
-        "metaspace_section": "Kenar çubuğuna sabitle",
         "sidebar_settings": "Daha fazla seçenek",
         "title": "Hızlı ayarlar"
     },
@@ -1706,25 +1647,10 @@
     },
     "report_content": {
         "description": "Bu mesajı bildirdiğinizde, benzersiz 'etkinlik kimliği' ev sunucunuzun yöneticisine gönderilir. Bu odadaki iletiler şifrelenmişse, ev sunucusu yöneticiniz ileti metnini okuyamaz veya herhangi bir dosya ya da resmi görüntüleyemez.",
-        "disagree": "Katılmıyorum",
-        "error_create_room_moderation_bot": "Moderasyon botu ile oda oluşturulamıyor",
         "hide_messages_from_user": "Bu kullanıcıdan gelen tüm mevcut ve gelecekteki mesajları gizlemek istiyorsanız işaretleyin.",
         "ignore_user": "Kullanıcıyı görmezden gel",
-        "illegal_content": "Yasadışı İçerik",
         "missing_reason": "Lütfen neden raporlama yaptığınızı belirtin.",
-        "nature": "Lütfen bir nitelik seçin ve bu mesajın neden taciz edici olduğunu açıklayın.",
-        "nature_disagreement": "Bu kullanıcının yazdıkları yanlıştır.\nBu durum oda moderatörlerine bildirilecektir.",
-        "nature_illegal": "Bu kullanıcı yasadışı davranışlar sergiliyor, örneğin insanlara iftira atıyor veya şiddet tehdidinde bulunuyor.\nBu durum oda moderatörlerine bildirilecek ve onlar da konuyu yasal mercilere taşıyabileceklerdir.",
-        "nature_nonstandard_admin": "Bu oda yasadışı veya zehirli içeriğe adanmıştır veya moderatörler yasadışı veya zehirli içeriği denetlemede başarısız olmuşlardır.\nBu durum %(homeserver)s yöneticilerine bildirilecektir.",
-        "nature_nonstandard_admin_encrypted": "Bu oda yasadışı veya zehirli içeriğe adanmıştır veya moderatörler yasadışı veya zehirli içeriği denetlemekte başarısız olmaktadır.\nBu durum %(homeserver)s yöneticilerine bildirilecektir. Yöneticiler bu odanın şifrelenmiş içeriğini okuyamayacaktır.",
-        "nature_other": "Başka herhangi bir sebep. Lütfen sorunu açıklayın.\nBu durum oda moderatörlerine bildirilecektir.",
-        "nature_spam": "Bu kullanıcı, odaya reklamlar, reklam bağlantıları veya propaganda ile spam gönderiyor.\nBu durum oda moderatörlerine bildirilecektir.",
-        "nature_toxic": "Bu kullanıcı, örneğin diğer kullanıcılara hakaret ederek veya aile dostu bir odada yalnızca yetişkinlere yönelik içerik paylaşarak veya bu odanın kurallarını başka bir şekilde ihlal ederek zehirli davranışlar sergiliyor.\nBu durum oda moderatörlerine bildirilecektir.",
-        "other_label": "Diğer",
-        "report_content_to_homeserver": "Ana Sunucu Yöneticinize İçeriği Raporlayın",
-        "report_entire_room": "Tüm odayı bildir",
-        "spam_or_propaganda": "Spam veya propaganda",
-        "toxic_behaviour": "Zehirli Davranış"
+        "report_content_to_homeserver": "Ana Sunucu Yöneticinize İçeriği Raporlayın"
     },
     "restore_key_backup_dialog": {
         "count_of_decryption_failures": "%(failedCount)s adet oturum çözümlenemedi!",
@@ -1983,38 +1909,13 @@
         "waiting_for_join_title": "Kullanıcıların katılması bekleniyor %(brand)s"
     },
     "room_list": {
-        "add_room_label": "Oda ekle",
         "add_space_label": "Alan ekle",
-        "breadcrumbs_empty": "Yakında ziyaret edilen oda yok",
-        "breadcrumbs_label": "En son ziyaret edilmiş odalar",
         "failed_add_tag": "%(tagName)s etiketi odaya eklenemedi",
         "failed_remove_tag": "Odadan %(tagName)s etiketi kaldırılamadı",
         "failed_set_dm_tag": "Doğrudan mesaj etiketi ayarlanamadı",
-        "home_menu_label": "Ana sayfa seçenekleri",
-        "join_public_room_label": "Herkese açık odaya katıl",
-        "joining_rooms_status": {
-            "one": "Şu anda %(count)s odaya katılıyor",
-            "other": "Şu anda %(count)s odaya katılıyor"
-        },
         "list_title": "Oda listesi",
         "notification_options": "Bildirim ayarları",
-        "redacting_messages_status": {
-            "one": "Şu anda %(count)s odadaki mesajlar kaldırılıyor",
-            "other": "Şu anda %(count)s odadaki mesajlar kaldırılıyor"
-        },
-        "show_less": "Daha az göster",
-        "show_n_more": {
-            "one": "%(count)s adet daha fazla göster",
-            "other": "%(count)s adet daha fazla göster"
-        },
-        "show_previews": "Mesajların ön izlemelerini göster",
-        "sort_by": "Göre sırala",
-        "sort_by_activity": "Aktivite",
-        "sort_by_alphabet": "A-Z",
-        "sort_unread_first": "Önce okunmamış mesajları olan odaları göster",
-        "space_menu_label": "%(spaceName)s menü",
-        "sublist_options": "Liste seçenekleri",
-        "suggested_rooms_heading": "Önerilen Odalar"
+        "show_less": "Daha az göster"
     },
     "room_settings": {
         "access": {
@@ -2679,7 +2580,6 @@
         "send_typing_notifications": "Yazma bildirimlerini gönder",
         "sessions": {
             "best_security_note": "Güvenlik için oturumlarınızı doğrulayın ve tanımadığınız veya artık kullanmadığınız oturumlardan çıkış yapın.",
-            "browser": "Tarayıcı",
             "confirm_sign_out": {
                 "one": "Bu cihazın oturumunu kapatmayı onayla",
                 "other": "Şu cihazlardan oturumu kapatmayı onayla"
@@ -2730,7 +2630,6 @@
             "no_sessions": "Oturum bulunamadı.",
             "no_unverified_sessions": "Doğrulanmamış oturum bulunamadı.",
             "no_verified_sessions": "Doğrulanmış oturum bulunamadı.",
-            "os": "İşletim Sistemi",
             "other_sessions_heading": "Diğer oturumlar",
             "push_heading": "Anlık bildirimler",
             "push_subheading": "Bu oturumda anlık bildirimler alın.",
@@ -2791,13 +2690,11 @@
         "showbold": "Oda listesindeki tüm etkinlikleri göster (noktalar veya okunmamış mesaj sayısı)",
         "sidebar": {
             "dialog_title": "<strong>Ayarlar:</strong> Kenar çubuğu",
-            "metaspaces_favourites_description": "Tüm favori odalarınızı ve kişilerinizi tek bir yerde toplayın.",
             "metaspaces_home_all_rooms": "Tüm odaları göster",
             "metaspaces_home_all_rooms_description": "Bir alana dahil olsalar bile tüm odaları Ana sayfada göster.",
             "metaspaces_home_description": "Ana sayfa, genel bir bakış sağlamak için faydalıdır.",
             "metaspaces_orphans": "Bir alana ait olmayan odalar",
             "metaspaces_orphans_description": "Bir alana ait olmayan tüm odalarınızı tek bir yerde toplayın.",
-            "metaspaces_people_description": "Tüm kişilerinizi tek bir yerde toplayın.",
             "metaspaces_subsection": "Gösterilecek alanlar",
             "metaspaces_video_rooms": "Video odaları ve konferanslar",
             "metaspaces_video_rooms_description": "Tüm özel video odalarını ve konferansları gruplandır.",
@@ -2818,7 +2715,6 @@
             "audio_output": "Ses Çıkışı",
             "audio_output_empty": "Ses çıkışları tespit edilemedi",
             "auto_gain_control": "Otomatik kazanç kontrolü",
-            "connection_section": "Bağlantı",
             "dialog_title": "<strong>Ayarlar:</strong> Ses ve Görüntü",
             "echo_cancellation": "Yankı giderme",
             "enable_fallback_ice_server": "Yedek arama destek sunucusuna (%(server)s) izin ver",
@@ -2998,12 +2894,6 @@
     "space_settings": {
         "title": "Ayarlar - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Bu alana oda ekleme izniniz yok",
-        "error_no_permission_add_space": "Bu alana alan ekleme izniniz yok",
-        "error_no_permission_create_room": "Bu alanda yeni oda oluşturma izniniz yok",
-        "error_no_permission_invite": "Kullanıcıları bu alana davet etme izniniz yok"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Keşfetmek istediğiniz sunucunun adını girin.",
@@ -3129,7 +3019,6 @@
         "download_action_downloading": "İndiriliyor",
         "download_failed": "İndirme başarısız oldu",
         "download_failed_description": "Bu dosya indirilirken bir hata oluştu",
-        "e2e_state": "Uçtan uca şifrelemenin durumu",
         "edits": {
             "tooltip_label": "%(date)s tarihinde düzenlendi. Düzenlemeleri görmek için tıkla.",
             "tooltip_sub": "Düzenlemeleri görmek için tıkla",
@@ -3211,9 +3100,7 @@
         "m.poll.start": "%(senderName)s bir anket başlattı - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s odanın avatarını değiştirdi.",
-            "changed_img": "%(senderDisplayName)s odanın avatarını <img/> olarak çevirdi",
-            "lightbox_title": "%(senderDisplayName)s %(roomName)s için avatarı değiştirdi",
-            "removed": "%(senderDisplayName)s odanın avatarını kaldırdı."
+            "lightbox_title": "%(senderDisplayName)s %(roomName)s için avatarı değiştirdi"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3808,13 +3695,7 @@
         "close_to_view_right_panel": "Bu panelde görüntülemek için bu widget'ı kapatın",
         "context_menu": {
             "delete": "Görsel bileşen sil",
-            "delete_warning": "Bir widget silindiğinde, widget bu odadaki tüm kullanıcılar için kaldırılır. Bu widget'ı silmek istediğinizden emin misiniz?",
-            "move_left": "Sola taşı",
-            "move_right": "Sağa taşı",
-            "remove": "Herkes için sil",
-            "revoke": "İzinleri iptal et",
-            "screenshot": "Resim çek",
-            "start_audio_stream": "Ses akışını başlat"
+            "delete_warning": "Bir widget silindiğinde, widget bu odadaki tüm kullanıcılar için kaldırılır. Bu widget'ı silmek istediğinizden emin misiniz?"
         },
         "cookie_warning": "Bu widget çerezleri kullanabilir.",
         "error_hangup_description": "Aramayla bağlantınız kesildi. (Hata: %(message)s)",
diff --git a/apps/web/src/i18n/strings/uk.json b/apps/web/src/i18n/strings/uk.json
index e8150e3123..195ac3bcc9 100644
--- a/apps/web/src/i18n/strings/uk.json
+++ b/apps/web/src/i18n/strings/uk.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Панель емоджі",
         "jump_first_invite": "Перейти до першого запрошення.",
         "message_composer": "Редактор повідомлень",
         "n_unread_messages": {
@@ -11,8 +10,6 @@
             "other": "%(count)s непрочитаних повідомлень включно зі згадками.",
             "one": "1 непрочитана згадка."
         },
-        "recent_rooms": "Недавні кімнати",
-        "room_name": "Кімната %(name)s",
         "room_status_bar": "Панель стану кімнати",
         "seek_bar_label": "Панель гортання аудіо",
         "unread_messages": "Непрочитані повідомлення."
@@ -22,7 +19,6 @@
         "accept": "Погодитись",
         "add": "Додати",
         "add_existing_room": "Додати наявну кімнату",
-        "add_people": "Додати людей",
         "apply": "Застосувати",
         "approve": "Дозволити",
         "ask_to_join": "Запит на приєднання",
@@ -57,7 +53,6 @@
         "enter_fullscreen": "Перейти у повноекранний режим",
         "exit_fullscreeen": "Вийти з повноекранного режиму",
         "expand": "Розгорнути",
-        "explore_public_rooms": "Переглянути загальнодоступні кімнати",
         "explore_rooms": "Каталог кімнат",
         "export": "Експортувати",
         "forward": "Переслати",
@@ -69,8 +64,6 @@
         "ignore": "Ігнорувати",
         "import": "Імпорт",
         "invite": "Запросити",
-        "invite_to_space": "Запросити до простору",
-        "invites_list": "Запрошення",
         "join": "Приєднатися",
         "learn_more": "Докладніше",
         "leave": "Вийти",
@@ -97,7 +90,6 @@
         "rename": "Перейменувати",
         "reply": "Відповісти",
         "reply_in_thread": "Відповісти у гілці",
-        "report_content": "Поскаржитись на вміст",
         "report_room": "Поскаржитися на кімнату",
         "resend": "Перенадіслати",
         "reset": "Скинути",
@@ -114,11 +106,9 @@
         "show_advanced": "Показати розширені",
         "show_all": "Показати все",
         "sign_in": "Увійти",
-        "sign_out": "Вийти",
+        "sign_out": "Вилучити цей пристрій",
         "skip": "Пропустити",
         "start": "Почати",
-        "start_chat": "Почати бесіду",
-        "start_new_chat": "Почати бесіду",
         "stop": "Припинити",
         "submit": "Надіслати",
         "subscribe": "Підписатись",
@@ -218,12 +208,10 @@
         "incorrect_password": "Неправильний пароль",
         "log_in_new_account": "<a>Увійти</a> до нового облікового запису.",
         "logout_dialog": {
-            "description": "Ви впевнені, що хочете вийти?",
-            "megolm_export": "Експорт ключів власноруч",
-            "setup_key_backup_title": "Ви втратите доступ до ваших зашифрованих повідомлень",
-            "setup_secure_backup_description_1": "Зашифровані повідомлення захищені наскрізним шифруванням. Лише ви та отримувачі повідомлень мають ключі для їх читання.",
-            "setup_secure_backup_description_2": "Коли ви вийдете, ці ключі буде видалено з цього пристрою, і ви не зможете читати зашифровані повідомлення, якщо у вас немає ключів для них на інших пристроях або не створено їх резервну копію на сервері.",
-            "skip_key_backup": "Мені не потрібні мої зашифровані повідомлення"
+            "description": "Ви впевнені, що хочете вилучити цей пристрій?",
+            "setup_key_backup_title": "Ви втратите доступ до своїх зашифрованих бесід",
+            "setup_secure_backup_description": "Це ваш єдиний пристрій. Якщо ви його вилучите, вам знадобиться ключ відновлення, щоб підтвердити свою цифрову ідентичність та відновити зашифровані бесіди під час наступного входу.",
+            "skip_key_backup": "Усе одно вилучити цей пристрій"
         },
         "misconfigured_body": "Попросіть адміністратора %(brand)s перевірити <a>конфігураційний файл</a> на наявність неправильних або повторюваних записів.",
         "misconfigured_title": "Ваш %(brand)s налаштовано неправильно",
@@ -249,7 +237,9 @@
             "check_code_heading": "Введіть номер, показаний на іншому пристрої",
             "check_code_input_label": "2-значний код",
             "check_code_mismatch": "Цифри не збігаються",
+            "choose_desktop_computer": "Виберіть «%(desktopComputer)s»",
             "completing_setup": "Завершення налаштування нового пристрою",
+            "desktop_computer": "Настільний комп'ютер",
             "error_etag_missing": "Сталася неочікувана помилка. Це може бути пов’язано з розширенням браузера, проксі-сервером або неправильною конфігурацією сервера.",
             "error_expired": "Час входу минув. Повторіть спробу.",
             "error_expired_title": "Вхід не було завершено вчасно",
@@ -270,16 +260,22 @@
             "error_user_declined": "Ви або постачальник облікового запису відхилили запит на вхід.",
             "error_user_declined_title": "Вхід відхилено",
             "follow_remaining_instructions": "Дотримуйтесь подальших інструкцій",
+            "open_element_mobile_device": "Відкрийте %(brand)s на своєму мобільному пристрої",
             "open_element_other_device": "Відкрийте %(brand)s на своєму іншому пристрої",
             "point_the_camera": "Скануйте QR-код, показаний тут",
-            "scan_code_instruction": "Відскануйте QR-код іншим пристроєм",
+            "ready_to_scan": "Готовий до сканування",
+            "scan_code_instruction": "Скануйте QR-код",
+            "scan_code_instruction_reciprocate": "Скануйте QR-код за допомогою іншого пристрою",
             "scan_qr_code": "Увійдіть за допомогою QR-коду",
-            "security_code": "Захисний код",
-            "security_code_prompt": "Якщо з'явиться запит, введіть наведений нижче код на іншому пристрої.",
+            "security_code_prompt": "Постачальник облікового запису може попросити вас ввести код нижче для підтвердження входу.",
+            "security_code_title": "Ваш код підтвердження",
             "select_qr_code": "Виберіть «%(scanQRCode)s»",
+            "select_ready_to_scan": "Виберіть «%(readyToScan)s» і скануйте QR-код, показаний тут",
+            "start_over": "Розпочати знову",
+            "tap_avatar_link_new_device": "Натисніть на свій аватар і виберіть «%(linkNewDevice)s»",
             "unsupported_explainer": "Ваш постачальник облікового запису не підтримує вхід на новий пристрій за допомогою QR-коду.",
             "unsupported_heading": "QR-код не підтримується",
-            "waiting_for_device": "Очікування входу з пристрою"
+            "waiting_for_device": "Очікування іншого вашого пристрою"
         },
         "register_action": "Створити обліковий запис",
         "registration": {
@@ -295,16 +291,16 @@
         "registration_username_validation": "Використовуйте лише малі літери, цифри, дефіс і підкреслення",
         "reset_password": {
             "confirm_new_password": "Підтвердити новий пароль",
-            "devices_logout_success": "Ви виходите з усіх пристроїв, і більше не отримуватимете сповіщень. Щоб повторно ввімкнути сповіщення, увійдіть знову на кожному пристрої.",
-            "other_devices_logout_warning_1": "Вихід з ваших пристроїв, видалить ключі шифрування повідомлень, що зберігаються на них і зробить зашифровану історію бесіди нечитабельною.",
-            "other_devices_logout_warning_2": "Якщо ви хочете зберегти доступ до історії бесіди у кімнатах з шифруванням, налаштуйте резервну копію ключа або експортуйте ключі з одного з інших пристроїв, перш ніж продовжувати.",
+            "devices_logout_success": "Усі ваші пристрої вилучено, і вони більше не отримуватимуть push-сповіщення. Щоб знову ввімкнути сповіщення, знову ввійдіть на кожному пристрої.",
+            "other_devices_logout_warning_1": "Вилучення пристроїв призведе до видалення ключів шифрування повідомлень, що зберігаються на них, що зробить зашифровану історію бесіди непрочитною.",
+            "other_devices_logout_warning_2": "Якщо ви хочете зберегти доступ до історії бесід у зашифрованих кімнатах, отримайте ключ відновлення або експортуйте ключі повідомлень з одного з інших пристроїв, перш ніж продовжувати.",
             "password_not_entered": "Має бути введений новий пароль.",
             "passwords_mismatch": "Нові паролі мають збігатися.",
             "rate_limit_error": "Забагато спроб за короткий час. Зачекайте трохи, перш ніж повторити спробу.",
             "rate_limit_error_with_time": "Забагато спроб за короткий час. Повторіть спробу за %(timeout)s.",
             "reset_successful": "Ваш пароль скинуто.",
             "return_to_login": "Повернутися на сторінку входу",
-            "sign_out_other_devices": "Вийти на всіх пристроях"
+            "sign_out_other_devices": "Вилучити інші пристрої"
         },
         "reset_password_action": "Скинути пароль",
         "reset_password_button": "Забули пароль?",
@@ -327,8 +323,8 @@
         "server_picker_title": "Увійдіть на ваш домашній сервер",
         "server_picker_title_default": "Опції сервера",
         "server_picker_title_registration": "Розмістити обліковий запис на",
-        "session_logged_out_description": "З метою безпеки ваш сеанс було завершено. Увійдіть знову.",
-        "session_logged_out_title": "Виконано вихід",
+        "session_logged_out_description": "З міркувань безпеки цей сеанс вилучено. Увійдіть знову.",
+        "session_logged_out_title": "Сеанс вилучено",
         "set_email": {
             "description": "Це дозволить вам скинути пароль і отримувати сповіщення.",
             "verification_pending_description": "Перейдіть до своєї е-пошти й натисніть на отримане посилання. Після цього натисніть «Продовжити».",
@@ -338,8 +334,10 @@
         "sign_in_description": "Скористайтесь обліковим записом, щоб продовжити.",
         "sign_in_instead": "Натомість увійти",
         "sign_in_instead_prompt": "Натомість увійти",
+        "sign_in_manually": "Увійти вручну",
         "sign_in_or_register": "Увійти або створити обліковий запис",
         "sign_in_or_register_description": "Скористайтесь вашим обліковим записом або створіть новий, щоб продовжити.",
+        "sign_in_with_qr": "Увійти за допомогою QR-коду",
         "sign_in_with_sso": "Увійти за допомогою єдиного входу",
         "signing_in": "Вхід…",
         "soft_logout": {
@@ -367,8 +365,8 @@
             "email_resent": "Надіслано повторно!",
             "fallback_button": "Почати автентифікацію",
             "mas_cross_signing_reset_cta": "Перейти до свого облікового запису",
-            "mas_cross_signing_reset_description": "Скиньте свою особистість через постачальника облікового запису, а потім поверніться та натисніть «Повторити».",
-            "mas_cross_signing_reset_title": "Перейдіть до свого облікового запису, щоб скинути свою ідентичність",
+            "mas_cross_signing_reset_description": "Ви збираєтеся перейти до свого облікового запису %(serverName)s, щоб скинути налаштування цифрової ідентичності. Після завершення скидання облікового запису поверніться сюди та натисніть Повторити.",
+            "mas_cross_signing_reset_title": "Перейдіть до свого облікового запису, щоб скинути свою цифрову ідентичність",
             "msisdn": "Текстове повідомлення надіслано на %(msisdn)s",
             "msisdn_token_incorrect": "Хибний токен",
             "msisdn_token_prompt": "Введіть отриманий код:",
@@ -474,13 +472,13 @@
         "description": "Опис",
         "deselect_all": "Скасувати вибір",
         "device": "Пристрій",
+        "disabled_by_homeserver": "Вимкнено на домашньому сервері",
         "edited": "змінено",
         "email_address": "Адреса е-пошти",
-        "emoji": "Емодзі",
+        "emoji": "Емоджі",
         "encrypted": "Зашифроване",
         "error": "Помилка",
         "faq": "ЧаПи",
-        "favourites": "Вибрані",
         "feedback": "Відгук",
         "filter_results": "Відфільтрувати результати",
         "forward_message": "Переслати повідомлення",
@@ -488,7 +486,6 @@
         "go_to_settings": "Перейти до налаштувань",
         "guest": "Гість",
         "help": "Довідка",
-        "historical": "Історичні",
         "home": "Домівка",
         "homeserver": "Домашній сервер",
         "identity_server": "Сервер ідентифікації",
@@ -496,17 +493,16 @@
         "integration_manager": "Менеджер інтеграцій",
         "joined": "Приєднано",
         "labs": "Лабораторія",
+        "legacy_voice_and_video_settings": "Виклики 1:1 Calls (Застарілі)",
         "legal": "Правові положення",
         "light": "Світла",
         "loading": "Завантаження…",
         "location": "Місцеперебування",
-        "low_priority": "Неважливі",
         "matrix": "Matrix",
         "message": "Повідомлення",
         "message_layout": "Макет повідомлення",
         "message_timestamp_invalid": "Недійсна позначка часу",
         "microphone": "Мікрофон",
-        "model": "Модель",
         "moderation_and_safety": "Модерування й безпека",
         "modern": "Сучасний",
         "mute": "Стишити",
@@ -567,7 +563,6 @@
         "success": "Успіх",
         "suggestions": "Пропозиції",
         "support": "Підтримка",
-        "system_alerts": "Системні попередження",
         "theme": "Тема",
         "thread": "Гілка",
         "threads": "Гілки",
@@ -584,7 +579,6 @@
         "username": "Ім'я користувача",
         "verified": "Звірений",
         "version": "Версія",
-        "video": "Відео",
         "video_room": "Відеокімната",
         "view_message": "Переглянути повідомлення",
         "warning": "Попередження"
@@ -594,7 +588,7 @@
             "@room_description": "Сповістити всю кімнату",
             "command_a11y": "Команда автозаповнення",
             "command_description": "Команди",
-            "emoji_a11y": "Самодоповнення емодзі",
+            "emoji_a11y": "Самозаповнення емодзі",
             "notification_a11y": "Автозаповнення сповіщення",
             "notification_description": "Сповіщення кімнати",
             "room_a11y": "Автозаповнення кімнати",
@@ -664,10 +658,11 @@
         "join_rule_knock_label": "Будь-хто може подати заявку на приєднання, але адміністратори або модератори повинні надати доступ. Ви можете змінити це пізніше.",
         "join_rule_public_label": "Будь-хто зможе знайти цю кімнату й приєднатись.",
         "join_rule_public_parent_space_label": "Будь-хто зможе знайти цю кімнату й приєднатись, не лише учасники <SpaceName/>.",
-        "join_rule_restricted": "Видима для учасників простору",
-        "join_rule_restricted_label": "Усі в <SpaceName/> зможуть знайти та приєднатися до цієї кімнати.",
+        "join_rule_restricted": "Стандартно",
+        "join_rule_restricted_label": "Будь-хто з <SpaceName/> може приєднатися.",
         "name_validation_required": "Введіть назву кімнати",
         "room_visibility_label": "Видимість кімнати",
+        "state_encrypted_warning": "Увімкнення експериментальної підтримки шифрування подій стану, що приховує від сервера метадані, такі як назви кімнат та теми. Ці метадані також будуть приховані від користувачів, які приєднаються до кімнат пізніше, та від тих, чиї клієнти не підтримують MSC4362.",
         "state_encryption_label": "Шифрування подій стану",
         "title_private_room": "Створити приватну кімнату",
         "title_public_room": "Створити загальнодоступну кімнату",
@@ -678,6 +673,13 @@
         "unfederated_label_default_on": "Ви можете вимкнути це, якщо кімната буде використовуватися для співпраці із зовнішніми командами, які мають власний домашній сервер. Це неможливо змінити пізніше.",
         "unsupported_version": "Сервер не підтримує вказану версію кімнати."
     },
+    "create_section_dialog": {
+        "create_section": "Створити розділ",
+        "description": "Розділи призначені лише для вас",
+        "label": "Назва розділу",
+        "title": "Створити розділ",
+        "title_edition": "Змінити розділ"
+    },
     "create_space": {
         "add_details_prompt": "Додайте якісь подробиці, щоб допомогти людям дізнатися про нього.",
         "add_details_prompt_2": "Ви можете змінити це будь-коли.",
@@ -689,7 +691,7 @@
         "creating_rooms": "Створення кімнат…",
         "done_action": "Перейти до мого простору",
         "done_action_first_room": "Перейти до моєї першої кімнати",
-        "explainer": "Простори — це новий спосіб групових кімнат та людей. Який вид простору ви хочете створити? Ви можете змінити це пізніше.",
+        "explainer": "Простори — це новий спосіб групувати кімнати та людей. Який вид простору ви хочете створити?",
         "failed_create_initial_rooms": "Не вдалося створити початкові кімнати простору",
         "failed_invite_users": "Не вдалося запросити до вашого простору таких користувачів: %(csvUsers)s",
         "invite_teammates_by_username": "Запросити за користувацьким іменем",
@@ -707,13 +709,13 @@
         "private_personal_heading": "З ким ви працюєте?",
         "private_space": "Я й учасники моєї команди",
         "private_space_description": "Приватний простір для вас та учасників вашої команди",
-        "public_description": "Відкритий простір для будь-кого, найкраще для спільнот",
+        "public_description": "Приєднатися може будь-хто, ідеально підходить для спільнот",
         "public_heading": "Ваш загальнодоступний простір",
         "search_public_button": "Пошук загальнодоступних просторів",
-        "setup_rooms_community_description": "Створімо по кімнаті для кожної.",
+        "setup_rooms_community_description": "Створімо кімнати, щоб розпочати.",
         "setup_rooms_community_heading": "Які речі ви бажаєте обговорювати в %(spaceName)s?",
-        "setup_rooms_description": "Згодом ви зможете додати більше, зокрема вже наявні.",
-        "setup_rooms_private_description": "Ми створимо кімнати для кожного з них.",
+        "setup_rooms_description": "Згодом ви зможете додати більше кімнат до простору, зокрема вже наявні.",
+        "setup_rooms_private_description": "Створімо кімнати, щоб розпочати.",
         "setup_rooms_private_heading": "Над якими проєктами працює ваша команда?",
         "share_description": "Зараз це лише для вас, якщо додати ще когось буде цікавіше.",
         "share_heading": "Поділитися %(name)s",
@@ -726,7 +728,7 @@
         "subspace_join_rule_invite_only": "Приватний простір (лише за запрошенням)",
         "subspace_join_rule_label": "Видимість простору",
         "subspace_join_rule_public_description": "Будь-хто зможе знайти цей простір і приєднатись, не лише учасники <SpaceName/>.",
-        "subspace_join_rule_restricted_description": "Будь-хто в <SpaceName/> зможе знайти й приєднатись."
+        "subspace_join_rule_restricted_description": "Будь-хто з <SpaceName/> може приєднатися."
     },
     "credits": {
         "default_cover_photo": "<photo>Типова світлина обкладинки</photo> від © <author>Jesús Roncero</author> використовується на умовах <terms>CC-BY-SA 4.0</terms>.",
@@ -746,6 +748,7 @@
         "category_other": "Інше",
         "category_room": "Кімната",
         "caution_colon": "Попередження:",
+        "checking_sticky_events_support": "Перевірка підтримки закріплених подій...",
         "client_versions": "Версії клієнта",
         "crypto": {
             "4s_public_key_in_account_data": "у даних облікового запису",
@@ -768,7 +771,7 @@
             "cross_signing_public_keys_on_device_status": "Відкриті ключі перехресного підписування:",
             "cross_signing_ready": "Перехресне підписування готове до користування.",
             "cross_signing_status": "Стан перехресного підписування:",
-            "cross_signing_untrusted": "Ваш обліковий запис має ідентичність із перехресним підписом у таємному сховищі, але цей сеанс ще не довіряє їй.",
+            "cross_signing_untrusted": "Ваш обліковий запис має цифрову ідентичність у сховищі таємниць, але цей сеанс ще не має до неї довіри.",
             "crypto_not_available": "Криптографічний модуль недоступний",
             "device_id": "ID пристрою",
             "key_backup_active_version": "Активна версія резервної копії:",
@@ -790,6 +793,8 @@
         },
         "developer_mode": "Режим розробника",
         "developer_tools": "Інструменти розробника",
+        "device_dehydrated_no": "Підготовлено до відновлення: ні",
+        "device_dehydrated_yes": "Підготовлено до відновлення: так",
         "device_id": "ID пристрою: %(deviceId)s",
         "device_keys": "Ключі пристрою",
         "device_verification_status": {
@@ -802,13 +807,18 @@
         "edit_setting": "Змінити налаштування",
         "edit_values": "Редагувати значення",
         "empty_string": "<порожній рядок>",
+        "error_sticky_duration_must_be_a_number": "stickyDuration має бути числом",
+        "error_sticky_duration_out_of_range": "Значення stickyDuration має бути від 0 до 36000 мілісекунд (1 год)",
         "event_content": "Зміст події",
         "event_id": "ID події: %(eventId)s",
         "event_sent": "Подію надіслано!",
         "event_type": "Тип події",
+        "expired": "Термін дії минув",
+        "expires_in": "Діє до",
         "explore_account_data": "Переглянути дані облікового запису",
         "explore_room_account_data": "Переглянути дані облікового запису кімнати",
         "explore_room_state": "Переглянути стан кімнати",
+        "explore_sticky_state": "Дізнайтеся про прикріплений стан",
         "failed_to_find_widget": "Сталася помилка під час пошуку віджету.",
         "failed_to_load": "Не вдалося завантажити.",
         "failed_to_save": "Не вдалося зберегти налаштування.",
@@ -818,10 +828,11 @@
         "invalid_json": "Не схоже на чинний JSON.",
         "level": "Рівень",
         "low_bandwidth_mode": "Режим низької пропускної спроможності",
-        "low_bandwidth_mode_description": "Потрібен сумісний домашній сервер.",
+        "low_bandwidth_mode_description": "Вимикає шифрування, відомості про присутність, аватари, сповіщення про прочитання та введення тексту",
         "main_timeline": "Основна стрічка",
         "manual_device_verification": "Ручна верифікація пристрою",
         "no_receipt_found": "Підтвердження не знайдено",
+        "no_sticky_events": "У цій кімнаті немає закріплених подій.",
         "notification_state": "Стан сповіщень <strong>%(notificationState)s</strong>",
         "notifications_debug": "Сповіщення зневадження",
         "number_of_users": "Кількість користувачів",
@@ -849,6 +860,7 @@
         "send_custom_account_data_event": "Надіслати нетипову подію даних облікового запису",
         "send_custom_room_account_data_event": "Надіслати нетипову подію даних кімнати",
         "send_custom_state_event": "Надіслати нетипову подію стану",
+        "send_custom_sticky_event": "Надіслати власну закріплену подію",
         "send_custom_timeline_event": "Надіслати спеціальну подію стрічки",
         "server_info": "Інформація сервера",
         "server_versions": "Версії сервера",
@@ -868,15 +880,18 @@
             "other": "<%(count)s просторів>"
         },
         "state_key": "Ключ стану",
+        "sticky_duration": "Тривалість закріплення (мс)",
+        "sticky_events_not_supported": "Ваш домашній сервер ще не підтримує закріплені події.",
         "thread_root_id": "ID кореневої гілки: %(threadRootId)s",
         "threads_timeline": "Стрічка гілок",
         "title": "Інструменти розробника",
-        "toggle_event": "перемкнути подію",
         "toolbox": "Панель інструментів",
         "use_at_own_risk": "Цей інтерфейс НЕ перевіряє типи значень. Користуйтесь на свій ризик.",
         "user_avatar": "Аватар: %(avatar)s",
         "user_displayname": "Показуване ім'я: %(displayname)s",
         "user_id": "ID користувача: %(userId)s",
+        "user_identity": "Криптографічна ідентичність",
+        "user_identity_unknown": "Невідомо",
         "user_no_avatar": "Аватар: <i>Немає</i>",
         "user_no_displayname": "Показуване ім'я: <i>Немає</i>",
         "user_read_up_to": "Користувач прочитав до: ",
@@ -885,10 +900,10 @@
         "user_read_up_to_private_ignore_synthetic": "Користувач прочитав до (m.read.private;ignoreSynthetic): ",
         "user_room_membership": "Учасник: %(membership)s",
         "user_verification_status": {
-            "identity_changed": "Стан верифікації: <E2EIcon /> Не верифіковано, а особу змінено",
+            "identity_changed": "Стан звіряння: <E2EIcon /> Не звірено, цифрову ідентичність змінено",
             "unverified": "Стан верифікації: <E2EIcon /> Не верифіковано",
             "verified": "Стан верифікації: <E2EIcon /> верифіковано",
-            "was_verified": "Стан верифікації: <E2EIcon /> верифіковано, але ідентичність змінено"
+            "was_verified": "Стан звіряння: <E2EIcon /> Звірено, але цифрова ідентичність змінилася"
         },
         "users": "Користувачі",
         "value": "Значення",
@@ -906,22 +921,6 @@
     },
     "dialog_close_label": "Закрити діалогове вікно",
     "download_completed": "Завантаження завершено",
-    "emoji": {
-        "categories": "Категорії",
-        "category_activities": "Діяльність",
-        "category_animals_nature": "Тварини та природа",
-        "category_flags": "Прапори",
-        "category_food_drink": "Їжа та напої",
-        "category_frequently_used": "Часто використовувані",
-        "category_objects": "Об'єкти",
-        "category_smileys_people": "Емоджі та люди",
-        "category_symbols": "Символи",
-        "category_travel_places": "Подорожі та місця",
-        "quick_reactions": "Швидкі реакції"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Скасувати пошук"
-    },
     "empty_room": "Порожня кімната",
     "empty_room_was_name": "Порожня кімната (були %(oldName)s)",
     "encryption": {
@@ -938,6 +937,7 @@
         "bootstrap_title": "Налаштовування ключів",
         "confirm_encryption_setup_body": "Клацніть на кнопку внизу, щоб підтвердити налаштування шифрування.",
         "confirm_encryption_setup_title": "Підтвердити налаштування шифрування",
+        "continue_with_reset": "Продовжити скидання",
         "cross_signing_room_normal": "Ця кімната є наскрізно зашифрованою",
         "cross_signing_room_verified": "Усі в цій кімнаті звірені",
         "cross_signing_room_warning": "Хтось користується невідомим сеансом",
@@ -953,6 +953,7 @@
         "event_shield_reason_unverified_identity": "Зашифровано неперевіреним користувачем.",
         "export_unsupported": "Ваш браузер не підтримує необхідних криптографічних функцій",
         "forgot_recovery_key": "Забули ключ відновлення?",
+        "identity_needs_reset_description": "Вам потрібно скинути налаштування цифрової ідентичності, щоб забезпечити доступ до історії бесіди",
         "import_invalid_keyfile": "Файл ключа %(brand)s некоректний",
         "import_invalid_passphrase": "Помилка автентифікації: неправильний пароль?",
         "key_storage_out_of_sync": "Ваше сховище ключів не синхронізується.",
@@ -971,30 +972,19 @@
             "title": "Новий метод відновлення",
             "warning": "Якщо ви не встановлювали нового способу відновлення, ймовірно хтось намагається зламати ваш обліковий запис. Негайно змініть пароль до свого облікового запису й встановіть новий спосіб відновлення в налаштуваннях."
         },
-        "pinned_identity_changed": "Ідентичність %(displayName)s (<b>%(userId)s</b>) скинуто. <a>Докладніше</a>",
-        "pinned_identity_changed_no_displayname": "Ідентичність <b>%(userId)s</b> скинуто. <a>Докладніше</a>",
+        "pinned_identity_changed": "Цифрову ідентичність %(displayName)s (<b>%(userId)s</b>) скинуто. <a>Докладніше</a>",
+        "pinned_identity_changed_no_displayname": "Цифрову ідентичність <b>%(userId)s</b> скинуто. <a>Докладніше</a>",
         "recovery_method_removed": {
             "description_1": "Цей сеанс виявив, що ваша фраза безпеки й ключ до захищених повідомлень були видалені.",
             "description_2": "Якщо це ненароком зробили ви, налаштуйте захищені повідомлення для цього сеансу, щоб повторно зашифрувати історію листування цього сеансу з новим способом відновлення.",
             "title": "Відновлювальний засіб було видалено",
             "warning": "Якщо ви не видаляли способу відновлення, ймовірно хтось намагається зламати ваш обліковий запис. Негайно змініть пароль до свого облікового запису й встановіть новий спосіб відновлення в налаштуваннях."
         },
-        "set_up_recovery": "Налаштування відновлення",
-        "set_up_recovery_toast_description": "Згенеруйте ключ відновлення, який можна використовувати для відновлення історії зашифрованих повідомлень у разі втрати доступу до своїх пристроїв.",
+        "set_up_recovery": "Створити резервну копію своїх бесід",
+        "set_up_recovery_toast_description": "Ваші бесіди автоматично резервуються з використанням наскрізного шифрування. Щоб відновити цю резервну копію та зберегти свою цифрову ідентичність у разі втрати доступу до всіх своїх пристроїв, вам знадобиться ключ відновлення.",
         "set_up_toast_title": "Налаштувати захищене резервне копіювання",
-        "setup_secure_backup": {
-            "explainer": "Створіть резервну копію ключів перед виходом, щоб не втратити їх."
-        },
         "turn_on_key_storage": "Увімкнути сховище ключів",
-        "turn_on_key_storage_description": "Зберігайте свій криптографічний ідентифікатор і ключі повідомлень на сервері. Це дозволить вам переглядати історію повідомлень на будь-яких нових пристроях. %1$s.",
-        "udd": {
-            "interactive_verification_button": "Звірити інтерактивно за допомогою емоджі",
-            "other_ask_verify_text": "Попросіть цього користувача звірити сеанс, або звірте його власноруч унизу.",
-            "other_new_session_text": "%(name)s (%(userId)s) починає новий сеанс без його звірення:",
-            "own_ask_verify_text": "Звірте інший сеанс за допомогою одного з варіантів знизу.",
-            "own_new_session_text": "Ви увійшли в новий сеанс, не звіривши його:",
-            "title": "Не довірений"
-        },
+        "turn_on_key_storage_description": "Це дозволить вам переглядати історію бесід на нових пристроях і необхідно для резервного копіювання бесід і цифрової ідентичності.",
         "unable_to_setup_keys_error": "Не вдалося налаштувати ключі",
         "verification": {
             "accepting": "Прийняття…",
@@ -1010,7 +1000,7 @@
             "complete_description": "Ви успішно звірили цього користувача.",
             "complete_title": "Звірено!",
             "confirm_identity_description": "Верифікуйте цей пристрій, щоб налаштувати безпечний обмін повідомленнями.",
-            "confirm_identity_title": "Підтвердьте свою особистість",
+            "confirm_identity_title": "Звірте свою цифрову ідентичність",
             "confirm_the_emojis": "Підтвердьте, що емодзі нижче збігаються з тими, які показані на вашому іншому пристрої.",
             "error_starting_description": "Ми не змогли розпочати бесіду з іншим користувачем.",
             "error_starting_title": "Помилка запуску перевірки",
@@ -1055,11 +1045,11 @@
             "request_toast_start_verification": "Почати верифікацію",
             "sas_caption_self": "Звірте цей пристрій, підтвердивши, що на екрані з'явилося це число.",
             "sas_caption_user": "Звірте справжність цього користувача, підтвердивши, що на екрані з'явилося таке число.",
-            "sas_description": "Порівняйте унікальний набір емодзі якщо жоден ваш пристрій не має камери",
-            "sas_emoji_caption_user": "Звірте цього користувача підтвердженням того, що наступні емодзі з'являються на його екрані.",
+            "sas_description": "Порівняйте унікальний набір емоджі, якщо на жодному з ваших пристроїв немає камери",
+            "sas_emoji_caption_user": "Звірте цього користувача, отримавши підтвердження, що на його екрані показано ці емоджі.",
             "sas_match": "Вони збігаються",
             "sas_no_match": "Вони не збігаються",
-            "sas_prompt": "Порівняйте унікальні емодзі",
+            "sas_prompt": "Порівняйте унікальні емоджі",
             "scan_qr": "Звірити скануванням",
             "scan_qr_explainer": "Попросіть %(displayName)s відсканувати ваш код:",
             "start_button": "Почати перевірку",
@@ -1072,7 +1062,7 @@
             "unverified_sessions_toast_title": "У вас є неперевірені сеанси",
             "use_another_device": "Використати інший пристрій",
             "use_recovery_key": "Використати ключ відновлення",
-            "verification_dialog_title_choose": "Виберіть спосіб верифікації",
+            "verification_dialog_title_choose": "Виберіть спосіб звіряння",
             "verification_dialog_title_compare_emojis": "Порівняти емодзі",
             "verification_dialog_title_confirm_green_shield": "Підтвердьте, що на іншому пристрої ви бачите зелений щит",
             "verification_dialog_title_device": "Звірити інший пристрій",
@@ -1094,10 +1084,10 @@
             "waiting_other_user": "Очікування звірки %(displayName)s…"
         },
         "verification_requested_toast_title": "Запит перевірки",
-        "verified_identity_changed": "Ідентичність %(displayName)s (<b>%(userId)s</b>) скинуто. <a>Докладніше</a>",
-        "verified_identity_changed_no_displayname": "Ідентичність <b>%(userId)s</b> скинуто. <a>Докладніше</a> ",
-        "verify_toast_description": "Інші користувачі можуть не довіряти цьому",
-        "verify_toast_title": "Звірити цей сеанс",
+        "verified_identity_changed": "Цифрову ідентичність %(displayName)s (<b>%(userId)s</b>) скинуто. <a>Докладніше</a>",
+        "verified_identity_changed_no_displayname": "Цифрову ідентичність <b>%(userId)s</b> скинуто. <a>Докладніше</a> ",
+        "verify_toast_description": "З кінця жовтня 2026 року, не звірені пристрої не зможуть надсилати та отримувати повідомлення. <a>Докладніше</a>",
+        "verify_toast_title": "Звірити цей пристрій",
         "withdraw_verification_action": "Відкликати верифікацію"
     },
     "error": {
@@ -1112,7 +1102,7 @@
         "failed_copy": "Не вдалося скопіювати",
         "hs_blocked": "Цей домашній сервер заблокований адміністратором.",
         "invalid_configuration_mixed_server": "Неправильна конфігурація: не можна вказати default_hs_url разом з default_server_name або default_server_config",
-        "invalid_configuration_no_server": "Невірна конфігурація: не вказано сервер за замовчуванням.",
+        "invalid_configuration_no_server": "Неправильна конфігурація: не вказано усталений сервер.",
         "invalid_json": "Ваша конфігурація Element містить хибний JSON. Виправте проблему та оновіть сторінку.",
         "invalid_json_detail": "Повідомлення від аналізатора : %(message)s",
         "invalid_json_generic": "Хибний JSON",
@@ -1122,15 +1112,15 @@
         "non_urgent_echo_failure_toast": "Ваш сервер не відповідає на деякі <a>запити</a>.",
         "resource_limits": "Цей домашній сервер досягнув одного зі своїх лімітів ресурсів.",
         "session_restore": {
-            "clear_storage_button": "Очистити сховище та вийти",
-            "clear_storage_description": "Вийти та видалити ключі шифрування?",
-            "description_1": "Ми натрапили на помилку, намагаючись відновити ваш попередній сеанс.",
+            "clear_storage_button": "Вилучити цей пристрій",
+            "clear_storage_description": "Вилучити цей пристрій разом із його ключами шифрування?",
+            "description_1": "Сталася помилка під час спроби відновити ваш сеанс.",
             "description_2": "Якщо ви досі користувались новішою версією %(brand)s, ваш сеанс може бути несумісним із цією версією. Закрийте це вікно й поверніться до новішої версії.",
-            "description_3": "Очищення сховища вашого браузера може усунути проблему, але ви вийдете з системи та зробить історію вашого зашифрованого спілкування непрочитною.",
+            "description_3": "Очищення сховища браузера може усунути проблему, але призведе до вилучення цього пристрою та неможливості читання зашифрованої історії бесіди.",
             "title": "Не вдалося відновити сеанс"
         },
         "something_went_wrong": "Щось пішло не так!",
-        "storage_evicted_description_1": "Бракує деяких даних сеансу, включно з ключами зашифрованих повідомлень. Вийдіть та зайдіть знову щоб виправити цю проблему, відновлюючи ключі з дубля.",
+        "storage_evicted_description_1": "Бракує деяких даних сеансу, зокрема ключів зашифрованих повідомлень. Щоб виправити цю проблему, видаліть цей пристрій і увійдіть знову, відновивши ключі з резервної копії.",
         "storage_evicted_description_2": "Схоже, що ваш браузер вилучив ці дані через брак простору на диску.",
         "storage_evicted_title": "Відсутні дані сеансу",
         "sync": "Не вдалося під'єднатися до домашнього сервера. Повторна спроба…",
@@ -1221,7 +1211,7 @@
         "fetching_events": "Отримання подій…",
         "file_attached": "Файл прикріплено",
         "format": "Формат",
-        "from_the_beginning": "З самого початку",
+        "from_the_beginning": "З початку",
         "generating_zip": "Генерування ZIP-файлу",
         "html": "HTML",
         "html_title": "Експортовані дані",
@@ -1254,7 +1244,7 @@
         "can_contact_label": "Можете зв’язатися зі мною, якщо у вас виникнуть додаткові запитання",
         "comment_label": "Коментар",
         "existing_issue_link": "Спершу гляньте <existingIssuesLink>відомі вади на Github</existingIssuesLink>. Ця ще невідома? <newIssueLink>Звітувати про нову ваду</newIssueLink>.",
-        "may_contact_label": "Можете звернутись до мене за подальшими діями чи допомогою з випробуванням ідей",
+        "may_contact_label": "Ви можете зв’язатися зі мною, щоб уточнити подробиці або запропонувати мені випробувати майбутні ідеї",
         "platform_username": "Ваша платформа й користувацьке ім'я будуть додані, щоб допомогти нам якнайточніше використати ваш відгук.",
         "pro_type": "ПОРАДА: Звітуючи про ваду, додайте <debugLogsLink>журнали зневадження</debugLogsLink>, щоб допомогти нам визначити проблему.",
         "send_feedback_action": "Надіслати відгук",
@@ -1344,6 +1334,14 @@
         "impossible_dialog_title": "Інтеграції не дозволені"
     },
     "invite": {
+        "confirm_unknown_users": {
+            "invite_subtitle": "Наразі у вас немає бесід з цими контактами. Підтвердьте запрошення їх до цієї кімнати, перш ніж продовжувати.",
+            "invite_title": "Запросити нові контакти до цієї кімнати?",
+            "start_chat_subtitle_multiple_users": "Наразі у вас немає бесід із цими людьми. Підтвердьте запрошення, перш ніж продовжити.",
+            "start_chat_subtitle_one_user": "Наразі у вас немає бесід із цією особою. Підтвердьте запрошення, перш ніж продовжити.",
+            "start_chat_title_multiple_users": "Розпочати бесіду з цими новими контактами?",
+            "start_chat_title_one_user": "Розпочати бесіду з цим новим контактом?"
+        },
         "email_caption": "Запросити е-поштою",
         "email_limit_one": "Запрошення електронною поштою можна надсилати лише одне за раз",
         "email_use_default_is": "Використовуйте сервер ідентифікації, щоб запрошувати через е-пошту. <default>Наприклад, типовий %(defaultIdentityServerName)s,</default> або інший у <settings>налаштуваннях</settings>.",
@@ -1495,19 +1493,29 @@
         "bridge_state_manager": "Цей міст керується <user />.",
         "bridge_state_workspace": "Робочий простір: <networkLink/>",
         "click_for_info": "Натисніть, щоб дізнатися більше",
+        "config_only": "Можна ввімкнути лише через config.json.",
         "currently_experimental": "Наразі експериментально.",
         "custom_themes": "Підтримка користувацьких тем",
         "dynamic_room_predecessors": "Попередники динамічної кімнати",
         "dynamic_room_predecessors_description": "Увімкнути MSC3946 (для підтримки архівів пізніх кімнат)",
         "element_call_video_rooms": "Відео кімнати Element Call",
+        "encrypted_state_events": "Події зашифрованого стану (MSC4362)",
+        "encrypted_state_events_description": "Вмикає експериментальну підтримку шифрування подій стану, що приховує від сервера метадані, такі як назви кімнат та теми. Ці метадані також будуть приховані від користувачів, які приєднаються до кімнат пізніше, та від тих, чиї клієнти не підтримують MSC4362.",
         "exclude_insecure_devices": "Виключати незахищені пристрої під час надсилання/отримання повідомлень",
         "exclude_insecure_devices_description": "Якщо цей режим увімкнено, зашифровані повідомлення не надходитимуть на неверифіковані пристрої, а повідомлення з неверифікованих пристроїв будуть показані як помилка. Зауважте, що якщо ви увімкнете цей режим, ви не зможете спілкуватися з користувачами, які не верифікували свої пристрої.",
         "experimental_description": "Відчуваєте себе експериментатором? Спробуйте наші новітні задуми в розробці. Ці функції не остаточні; вони можуть бути нестабільними, можуть змінюватися або взагалі можуть бути відкинуті. <a>Докладніше</a>.",
         "experimental_section": "Ранній огляд",
         "extended_profiles_msc_support": "Вимагає, щоб ваш сервер підтримував MSC4133",
         "feature_disable_call_per_sender_encryption": "Вимкнути шифрування для кожного відправника для Element Call",
+        "feature_retention": {
+            "description": "Автоматично вилучати повідомлення з кімнати, коли вони досягають налаштованого періоду зберігання. Наразі підтримуються лише налаштування читання."
+        },
+        "feature_user_status": {
+            "description": "Дає змогу переглядати та встановлювати поточний стан.",
+            "display_name": "Стан користувача",
+            "required_msc_support": "Потрібно MSC4429 (Оновлення профілів для Legacy Sync)"
+        },
         "feature_wysiwyg_composer_description": "Використовувати розширений текст замість розмітки в редакторі повідомлень.",
-        "group_calls": "Нові можливості групових викликів",
         "group_developer": "Розробка",
         "group_encryption": "Шифрування",
         "group_experimental": "Експериментально",
@@ -1522,7 +1530,6 @@
         "group_voip": "Голос і відео",
         "group_widgets": "Віджети",
         "hidebold": "Сховати крапку сповіщення ( показувати тільки значки лічильників)",
-        "html_topic": "Показати HTML-подання тем кімнати",
         "join_beta": "Долучитися до бета-тестування",
         "join_beta_reload": "Перехід до бета-тестування перезавантажить %(brand)s.",
         "jump_to_date": "Перейти до дати (додає /jumptodate і переходить до заголовків дати)",
@@ -1532,23 +1539,22 @@
         "leave_beta_reload": "Вихід з бета-тестування перезавантажить %(brand)s.",
         "location_share_live": "Надсилання місця перебування наживо",
         "location_share_live_description": "Тимчасова реалізація. Місце перебування зберігається в історії кімнати.",
+        "login_with_qr": "Увійти за допомогою QR-коду",
         "mjolnir": "Нові способи нехтувати людей",
         "msc3531_hide_messages_pending_moderation": "Дозволити модераторам ховати повідомлення у черзі модерування.",
-        "new_room_list": "Увімкнути новий список кімнат",
         "notification_settings": "Нові налаштування сповіщень",
         "notification_settings_beta_caption": "Представляємо простіший спосіб змінювати налаштування сповіщень. Налаштуйте %(brand)s, саме так, як вам подобається.",
         "notification_settings_beta_title": "Налаштування сповіщень",
         "notifications": "Увімкнути панель сповіщень у шапці кімнати",
         "render_reaction_images": "Відтворення кастомних зображень у реакціях",
-        "render_reaction_images_description": "Іноді їх називають \"користувацькими емодзі\".",
-        "report_to_moderators": "Поскаржитись модераторам",
-        "report_to_moderators_description": "У кімнатах, які підтримують модерацію, кнопка «Поскаржитися» дає змогу повідомити про зловживання модераторам кімнати.",
+        "render_reaction_images_description": "Іноді їх називають \"власними емоджі\".",
         "sliding_sync": "Режим ковзної синхронізації",
         "sliding_sync_description": "На стадії активної розробки, вимкнути не можна.",
-        "sliding_sync_disabled_notice": "Вийдіть і знову увійдіть, щоб вимкнути",
+        "sliding_sync_disabled_notice": "Увійдіть повторно, щоб вимкнути",
         "sliding_sync_server_no_support": "На вашому сервері відсутня підтримка",
-        "under_active_development": "У стадії активної розробки.",
         "unrealiable_e2e": "Ненадійно в зашифрованих кімнатах",
+        "url_preview_bundle": "Пакет попереднього перегляду URL-адрес (MSC4095)",
+        "url_preview_bundle_description": "Надсилати попередній перегляд URL-адреси у повідомленні разом із текстом повідомлення",
         "video_rooms": "Відеокімнати",
         "video_rooms_a_new_way_to_chat": "Новий спосіб спілкування за допомогою голосового та відеозв’язку в %(brand)s.",
         "video_rooms_always_on_voip_channels": "Відеокімнати — це завжди в VOIP-канали, вбудовані в кімнату в %(brand)s.",
@@ -1603,9 +1609,6 @@
         "room_rejoin_warning": "Ця кімната не загальнодоступна. Ви не зможете повторно приєднатися без запрошення.",
         "space_rejoin_warning": "Цей простір не загальнодоступний. Ви не зможете приєднатися знову без запрошення."
     },
-    "left_panel": {
-        "open_dial_pad": "Відкрити номеронабирач"
-    },
     "lightbox": {
         "rotate_left": "Обернути ліворуч",
         "rotate_right": "Обернути праворуч",
@@ -1687,7 +1690,7 @@
         "all_messages_description": "Отримувати сповіщення про кожне повідомлення",
         "class_global": "Глобально",
         "class_other": "Інше",
-        "default": "Типовий",
+        "default": "Типово",
         "email_pusher_app_display_name": "Сповіщення е-поштою",
         "enable_prompt_toast_description": "Увімкнути сповіщення стільниці",
         "enable_prompt_toast_title": "Сповіщення",
@@ -1702,10 +1705,9 @@
         "level_notification": "Сповіщення",
         "level_unsent": "Не надіслано",
         "mark_all_read": "Позначити все прочитаним",
-        "mentions_and_keywords": "@згадки й ключові слова",
+        "mentions_and_keywords": "Лише @згадки й відповіді",
         "mentions_and_keywords_description": "Отримувати лише вказані у ваших <a>налаштуваннях</a> згадки й ключові слова",
         "mentions_keywords": "Згадки та ключові слова",
-        "message_didnt_send": "Повідомлення не надіслане. Натисніть, щоб дізнатись більше.",
         "mute_description": "Ви не отримуватимете жодних сповіщень"
     },
     "notifier": {
@@ -1744,6 +1746,11 @@
         "failed_send_poll_title": "Не вдалося надіслати опитування",
         "notes": "Результати показуються лише після завершення опитування",
         "option_label": "Варіант %(number)s, %(answer)s",
+        "option_label_winning_with_total": {
+            "one": "Варіант %(number)s, варіант переможець — %(answer)s, %(count)s голос",
+            "few": "Варіант %(number)s, варіант переможець — %(answer)s, %(count)s голоси",
+            "many": "Варіант %(number)s, варіант переможець — %(answer)s, %(count)s голосів"
+        },
         "option_label_with_total": {
             "one": "Варіант %(number)s, %(answer)s, %(count)s голос",
             "few": "Варіант %(number)s, %(answer)s, %(count)s голоси",
@@ -1800,7 +1807,6 @@
     },
     "quick_settings": {
         "all_settings": "Усі налаштування",
-        "metaspace_section": "Закріплення на бічній панелі",
         "sidebar_settings": "Інші опції",
         "title": "Швидкі налаштування"
     },
@@ -1816,27 +1822,18 @@
         "ongoing": "Вилучення…",
         "reason_label": "Причина (не обов'язково)"
     },
+    "remove_section_dialog": {
+        "confirmation": "Ви впевнені, що хочете вилучити цей розділ?",
+        "description": "Бесіди з цього розділу й надалі будуть доступні у вашому списку бесід.",
+        "remove_section": "Вилучити розділ",
+        "title": "Вилучити розділ?"
+    },
     "report_content": {
         "description": "Зі скаргою на це повідомлення буде надіслано його унікальний «ID події» адміністраторові вашого домашнього сервера. Якщо повідомлення у цій кімнаті зашифровані, то адміністратор не зможе побачити ані тексту повідомлень, ані жодних файлів чи зображень.",
-        "disagree": "Відхилити",
-        "error_create_room_moderation_bot": "Не вдається створити кімнату за допомогою бота-модератора",
         "hide_messages_from_user": "Виберіть, чи хочете ви сховати всі поточні та майбутні повідомлення від цього користувача.",
         "ignore_user": "Нехтувати користувача",
-        "illegal_content": "Протиправний вміст",
         "missing_reason": "Будь ласка, вкажіть причину скарги.",
-        "nature": "Оберіть природу й опишіть, що образливого в цьому повідомленні.",
-        "nature_disagreement": "Те, що пише цей користувач, неправильно.\nПро це буде повідомлено модераторам кімнати.",
-        "nature_illegal": "Користувач порушує закон, наприклад зливає особисті дані людей чи погрожує насиллям.\nМодератори кімнати отримають скаргу на це й зможуть передати її правоохоронцям.",
-        "nature_nonstandard_admin": "Ця кімната присвячена незаконному чи токсичному вмісту, або модератори не модерують незаконний чи токсичний вміст.\nПро це буде повідомлено адміністраторів %(homeserver)s.",
-        "nature_nonstandard_admin_encrypted": "Ця кімната присвячена незаконному чи токсичному вмісту, або модератори не модерують незаконний чи токсичний вміст.\nПро це буде повідомлено адміністраторів %(homeserver)s. Адміністратори НЕ зможуть прочитати зашифрований вміст цієї кімнати.",
-        "nature_other": "Будь-яка інша причина. Будь ласка, опишіть проблему.\nМодератори кімнати отримають вашу скаргу.",
-        "nature_spam": "Користувач засмічує кімнату рекламою, посиланнями на рекламу чи пропагандою.\nМодератори кімнати отримають скаргу на це.",
-        "nature_toxic": "Користувач поводиться токсично, наприклад ображає інших користувачів, поширює дорослий вміст у сімейній кімнаті чи ще якось порушує правила цієї кімнати.\nМодератори кімнати отримають скаргу на це.",
-        "other_label": "Інше",
-        "report_content_to_homeserver": "Поскаржитися на вміст адміністратору вашого домашнього сервера",
-        "report_entire_room": "Поскаржитися на всю кімнату",
-        "spam_or_propaganda": "Спам чи пропаганда",
-        "toxic_behaviour": "Токсична поведінка"
+        "report_content_to_homeserver": "Поскаржитися на вміст адміністратору вашого домашнього сервера"
     },
     "report_room": {
         "description": "Поскаржитися на цю кімнату постачальнику облікового запису. Якщо повідомлення зашифровані, адміністратор не зможе прочитати їх.",
@@ -1968,6 +1965,7 @@
         "error_join_incompatible_version_1": "На жаль, ваш домашній сервер застарий для участі тут.",
         "error_join_incompatible_version_2": "Будь ласка, зв'яжіться з адміністратором вашого домашнього сервера.",
         "error_join_title": "Не вдалося приєднатися",
+        "error_join_unknown": "Сталася невідома помилка.",
         "error_jump_to_date": "Сервер повернув %(statusCode)s з кодом помилки %(errorCode)s",
         "error_jump_to_date_connection": "Виникла помилка мережі під час спроби знайти та перейти до вказаної дати. Можливо, ваш домашній сервер не працює або виникли тимчасові проблеми з інтернет-з'єднанням. Повторіть спробу ще раз. Якщо це не допоможе, зверніться до адміністратора вашого домашнього сервера.",
         "error_jump_to_date_details": "Подробиці помилки",
@@ -2015,7 +2013,7 @@
             "encrypted_3pid_dm_pending_join": "Коли хтось приєднається, ви зможете спілкуватись",
             "no_avatar_label": "Додайте фото, щоб люди легко вирізняли вашу кімнату.",
             "no_topic": "<a>Додайте тему</a>, щоб люди розуміли про що вона.",
-            "private_unencrypted_warning": "Ваші приватні повідомлення, зазвичай, зашифровані, але ця кімната — ні. Зазвичай це пов'язано з непідтримуваним пристроєм або використаним методом, наприклад, запрошення електронною поштою.",
+            "private_unencrypted_warning": "Зазвичай ваші приватні повідомлення шифруються, але не в цій кімнаті. Найчастіше це пов’язано з використанням непідтримуваних пристроїв або методів, як-от запрошення через електронну пошту.",
             "room_invite": "Запросити лише до цієї кімнати",
             "send_message_start_dm": "Надішліть своє перше повідомлення, щоб запросити <displayName/> до бесіди",
             "start_of_dm_history": "Це початок історії вашого особистого спілкування з <displayName/>.",
@@ -2113,41 +2111,21 @@
         "waiting_for_join_title": "Очікування приєднання користувача до %(brand)s"
     },
     "room_list": {
-        "add_room_label": "Додати кімнату",
         "add_space_label": "Додати простір",
-        "breadcrumbs_empty": "Немає недавно відвіданих кімнат",
-        "breadcrumbs_label": "Недавно відвідані кімнати",
         "failed_add_tag": "Не вдалось додати до кімнати мітку %(tagName)s",
         "failed_remove_tag": "Не вдалося прибрати з кімнати мітку %(tagName)s",
         "failed_set_dm_tag": "Не вдалося встановити мітку особистого повідомлення",
-        "home_menu_label": "Параметри домівки",
-        "join_public_room_label": "Приєднатись до загальнодоступної кімнати",
-        "joining_rooms_status": {
-            "one": "Приєднання до %(count)s кімнати",
-            "other": "Приєднання до %(count)s кімнат"
-        },
         "list_title": "Список кімнат",
         "more_options": {
             "leave_room": "Вийти з кімнати"
         },
         "notification_options": "Параметри сповіщень",
-        "redacting_messages_status": {
-            "one": "Триває видалення повідомлень в %(count)s кімнаті",
-            "other": "Триває видалення повідомлень у %(count)s кімнатах"
+        "section": {
+            "chats": "Бесіди",
+            "favourites": "Обране",
+            "low_priority": "Неважливі"
         },
-        "show_less": "Згорнути",
-        "show_n_more": {
-            "other": "Показати ще %(count)s",
-            "one": "Показати ще %(count)s"
-        },
-        "show_previews": "Показувати попередній перегляд повідомлень",
-        "sort_by": "Упорядкувати за",
-        "sort_by_activity": "Активністю",
-        "sort_by_alphabet": "А-Я",
-        "sort_unread_first": "Спочатку показувати кімнати з непрочитаними повідомленнями",
-        "space_menu_label": "%(spaceName)s — меню",
-        "sublist_options": "Параметри переліку",
-        "suggested_rooms_heading": "Пропоновані кімнати"
+        "show_less": "Згорнути"
     },
     "room_settings": {
         "access": {
@@ -2325,35 +2303,37 @@
             "history_visibility_invited": "Учасники з моменту запрошення",
             "history_visibility_legend": "Хто може читати історію?",
             "history_visibility_shared": "Учасники (повна історія)",
-            "history_visibility_warning": "Видимість наявної історії не зміниться.",
+            "history_visibility_warning": "Зміни не вплинуть на попередні повідомлення, лише на нові. <a>Докладніше</a>",
             "history_visibility_world_readable": "Будь-хто (історія загальнодоступна)",
             "join_rule_description": "Вкажіть, хто може приєднуватися до %(roomName)s.",
-            "join_rule_invite": "Приватно (лише за запрошенням)",
+            "join_rule_invite": "Лише запрошені",
             "join_rule_invite_description": "Приєднатися можуть лише запрошені люди.",
             "join_rule_knock": "Запит на приєднання",
             "join_rule_knock_description": "Люди не можуть приєднатися, якщо їм не надано доступ.",
-            "join_rule_public_description": "Будь-хто може знайти та приєднатися.",
+            "join_rule_public": "Будь-хто",
+            "join_rule_public_description": "Будь-хто може приєднатися.",
             "join_rule_restricted": "Учасники простору",
-            "join_rule_restricted_description": "Будь-хто у просторі може знайти та приєднатися. <a>Укажіть, які простори можуть отримати доступ сюди.</a>",
-            "join_rule_restricted_description_active_space": "Будь-хто у <spaceName/> може знайти та приєднатися. Ви можете вибрати інші простори.",
-            "join_rule_restricted_description_prompt": "Будь-хто у просторі може знайти та приєднатися. Можна вибрати кілька просторів.",
-            "join_rule_restricted_description_spaces": "Простори з доступом",
-            "join_rule_restricted_dialog_description": "Оберіть, які простори матимуть доступ до цієї кімнати. Якщо обрати простір, його учасники зможуть знаходити <RoomName/> і приєднуватися.",
-            "join_rule_restricted_dialog_empty_warning": "Ви вилучаєте всі простори. Усталеним стане доступ за запрошенням",
+            "join_rule_restricted_description": "Будь-хто в авторизованому просторі може приєднатися без запрошення. <a>Керувати просторами</a>",
+            "join_rule_restricted_description_active_space": "Будь-хто з <spaceName/> може приєднатися.",
+            "join_rule_restricted_description_prompt": "Приєднуватися можуть усі учасники простору.",
+            "join_rule_restricted_description_spaces": "Авторизовані простори",
+            "join_rule_restricted_dialog_description": "Простори, де учасники можуть приєднатися до <RoomName/> без запрошення.",
+            "join_rule_restricted_dialog_empty_warning": "Ви вилучаєте авторизовані простори. Усталеним стане доступ лише за запрошенням",
             "join_rule_restricted_dialog_filter_placeholder": "Пошук просторів",
-            "join_rule_restricted_dialog_heading_known": "Інші відомі вам простори",
-            "join_rule_restricted_dialog_heading_other": "Інші простори чи кімнати, яких ви можете не знати",
-            "join_rule_restricted_dialog_heading_room": "Відомі вам простори, до яких входить кімната",
+            "join_rule_restricted_dialog_heading_known": "Ваші простори, які не містять цієї кімнати",
+            "join_rule_restricted_dialog_heading_other": "Інші простори, учасником яких ви не є",
+            "join_rule_restricted_dialog_heading_room": "Ваші простори, що містять цю кімнату",
             "join_rule_restricted_dialog_heading_space": "Відомі вам простори, до яких входить цей",
             "join_rule_restricted_dialog_heading_unknown": "Ймовірно, інші адміністратори кімнати є їхніми учасниками.",
-            "join_rule_restricted_dialog_title": "Вибрати простори",
+            "join_rule_restricted_dialog_title": "Керувати просторами",
             "join_rule_restricted_n_more": {
                 "one": "і ще %(count)s",
                 "other": "і ще %(count)s"
             },
             "join_rule_restricted_summary": {
-                "one": "На разі простір має доступ",
-                "other": "На разі доступ мають %(count)s просторів"
+                "one": "Наразі авторизовано один простір",
+                "few": "Наразі авторизовано %(count)s простори",
+                "many": "Наразі авторизовано %(count)s просторів"
             },
             "join_rule_restricted_upgrade_description": "Це поліпшення дозволить учасникам обраних просторів доступитися до цієї кімнати без запрошення.",
             "join_rule_restricted_upgrade_warning": "Ця кімната належить до просторів, які ви не адмініструєте. Ці простори показуватимуть стару кімнату, але пропонуватимуть людям приєднатись до нової.",
@@ -2373,13 +2353,13 @@
             "publish_room": "Зробити цю кімнату видимою в каталозі загальнодоступних кімнат.",
             "publish_space": "Зробити цей простір видимим у каталозі загальнодоступних кімнат.",
             "strict_encryption": "Надсилати повідомлення лише верифікованим користувачам.",
-            "title": "Безпека й приватність"
+            "title": "Безпека та приватність"
         },
         "title": "Налаштування кімнати - %(roomName)s",
         "upload_avatar_label": "Вивантажити аватар",
         "visibility": {
             "alias_section": "Адреса",
-            "error_failed_save": "Не вдалось оновити видимість цього простору",
+            "error_failed_save": "Не вдалося оновити налаштування цього простору",
             "error_update_guest_access": "Не вдалося оновити гостьовий доступ до цього простору",
             "error_update_history_visibility": "Не вдалося оновити видимість історії цього простору",
             "guest_access_disabled": "Ви не маєте дозволу змінювати доступ гостей.",
@@ -2389,7 +2369,7 @@
             "history_visibility_anyone_space_description": "Дозвольте людям переглядати ваш простір, перш ніж вони приєднаються.",
             "history_visibility_anyone_space_disabled": "Ви не маєте дозволу змінювати видимість історії.",
             "history_visibility_anyone_space_recommendation": "Рекомендовано для загальнодоступних просторів.",
-            "title": "Видимість"
+            "title": "Безпека та приватність"
         },
         "voip": {
             "call_type_section": "Тип викликів",
@@ -2440,7 +2420,8 @@
         "warning_kind_files": "Ця версія %(brand)s не підтримує перегляд деяких зашифрованих файлів",
         "warning_kind_files_app": "Скористайтеся <a>стільничним застосунком</a>, щоб переглянути всі зашифровані файли",
         "warning_kind_search": "Ця версія %(brand)s не підтримує пошук зашифрованих повідомлень",
-        "warning_kind_search_app": "Скористайтеся <a>стільничним застосунком</a>, щоб пошукати серед зашифрованих повідомлень"
+        "warning_kind_search_app": "Скористайтеся <a>стільничним застосунком</a>, щоб пошукати серед зашифрованих повідомлень",
+        "warning_kind_search_partial": "Результати можуть бути неповними, оскільки індексація пошуку ще формується."
     },
     "setting": {
         "help_about": {
@@ -2452,7 +2433,7 @@
             "help_link": "Якщо необхідна допомога у користуванні %(brand)s'ом, клацніть <a>тут</a>.",
             "homeserver": "Домашній сервер <code>%(homeserverUrl)s</code>",
             "identity_server": "Сервер ідентифікації <code>%(identityServerUrl)s</code>",
-            "title": "Допомога та про програму",
+            "title": "Довідка та інформація",
             "versions": "Версії"
         }
     },
@@ -2465,7 +2446,7 @@
         "all_rooms_home_description": "Всі кімнати, до яких ви приєднались, з'являться в домівці.",
         "always_show_message_timestamps": "Завжди показувати часові позначки повідомлень",
         "appearance": {
-            "bundled_emoji_font": "Використовувати вбудований шрифт емодзі",
+            "bundled_emoji_font": "Використовувати вбудований шрифт емоджі",
             "compact_layout": "Показувати компактні текст і повідомлення",
             "compact_layout_description": "Щоб користуватися цією функцією потрібно вибрати сучасний макет.",
             "custom_font": "Використовувати системний шрифт",
@@ -2498,7 +2479,7 @@
         "discovery": {
             "title": "Як вас знайти"
         },
-        "emoji_autocomplete": "Увімкнути пропонування емодзі при друкуванні",
+        "emoji_autocomplete": "Увімкнути пропозиції емодзі під час введення тексту",
         "enable_markdown": "Увімкнути Markdown",
         "enable_markdown_description": "Розпочинати повідомлення з <code>/plain</code>, щоб надіслати без markdown.",
         "encryption": {
@@ -2507,16 +2488,16 @@
                 "breadcrumb_page": "Скинути шифрування",
                 "breadcrumb_second_description": "Ви втратите історію повідомлень, яка зберігається лише на сервері",
                 "breadcrumb_third_description": "Вам потрібно буде верифікувати всі наявні пристрої та контакти ще раз",
-                "breadcrumb_title": "Ви впевнені, що хочете скинути свою особистість?",
-                "breadcrumb_title_cant_confirm": "Вам потрібно скинути свою ідентичність",
-                "breadcrumb_title_forgot": "Забули ключ відновлення? Вам потрібно скинути свою особистість.",
-                "breadcrumb_title_sync_failed": "Не вдалося синхронізувати сховище ключів. Вам потрібно скинути свою ідентичність.",
+                "breadcrumb_title": "Ви впевнені, що хочете скинути свою цифрову ідентичність?",
+                "breadcrumb_title_cant_confirm": "Вам потрібно скинути налаштування вашої цифрової ідентичності",
+                "breadcrumb_title_forgot": "Забули ключ відновлення? Вам потрібно скинути свою цифрову ідентичність.",
+                "breadcrumb_title_sync_failed": "Не вдалося синхронізувати сховище ключів. Вам потрібно скинути свою цифрову ідентичність.",
                 "breadcrumb_warning": "Робіть це, лише якщо ви впевнені, що ваш обліковий запис скомпрометований.",
                 "details_title": "Подробиці шифрування",
                 "do_not_close_warning": "Не закривайте це вікно, поки не завершиться скидання",
                 "export_keys": "Експорт ключів",
                 "import_keys": "Імпорт ключів",
-                "other_people_device_description": "Попередження: користувачі, які не пройшли явну верифікацію з вами (наприклад, за допомогою емодзі), не отримають ваші зашифровані повідомлення. Також неверифіковані пристрої верифікованих користувачів не отримуватимуть ваші зашифровані повідомлення. Зміни набудуть чинності після перезапуску застосунку.",
+                "other_people_device_description": "Попередження: користувачі, які не явно не звірені з вами (наприклад, за допомогою емоджі), не отримуватимуть ваші зашифровані повідомлення. Також незвірені пристрої звірених користувачів не отримуватимуть ваші зашифровані повідомлення. Зміни набудуть чинності після перезапуску застосунку.",
                 "other_people_device_label": "У кімнатах з увімкненим шифруванням надсилати повідомлення лише верифікованим користувачам",
                 "other_people_device_title": "Пристрої інших людей",
                 "reset_identity": "Скинути криптографічну ідентичність",
@@ -2526,13 +2507,13 @@
                 "title": "Додатково"
             },
             "confirm_key_storage_off": "Ви впевнені, що хочете вимкнути сховище ключів?",
-            "confirm_key_storage_off_description": "Якщо ви вийдете з усіх своїх пристроїв, ви втратите історію повідомлень і вам потрібно буде знову підтвердити всі наявні контакти. <a>Докладніше</a>",
+            "confirm_key_storage_off_description": "Якщо ви вийдете з усіх своїх пристроїв, ви втратите історію повідомлень і вам потрібно буде знову звірити всі наявні контакти. <a>Докладніше</a>",
             "delete_key_storage": {
                 "breadcrumb_page": "Видалити сховище ключів",
                 "confirm": "Видалити сховище ключів",
                 "description": "Видалення сховища ключів вилучить вашу криптографічну ідентичність і ключі повідомлень з сервера, а також вимкне такі функції безпеки:",
                 "list_first": "Ви не матимете історії зашифрованих повідомлень на нових пристроях",
-                "list_second": "Ви втратите доступ до своїх зашифрованих повідомлень, якщо ви вийдете з %(brand)s на всіх пристроях",
+                "list_second": "Ви втратите доступ до своїх зашифрованих повідомлень, якщо ви вийдете на всіх пристроях",
                 "title": "Ви впевнені, що хочете вимкнути зберігання ключів і видалити їх?"
             },
             "device_not_verified_button": "Верифікувати цей пристрій",
@@ -2541,7 +2522,7 @@
             "dialog_title": "<strong>Налаштування:</strong> Шифрування",
             "key_storage": {
                 "allow_key_storage": "Дозволити зберігання ключів",
-                "description": "Надійно зберігайте свою криптографічну ідентичність і ключі повідомлень на сервері. Це дозволить вам переглядати історію повідомлень на будь-яких нових пристроях. <a>Докладніше</a>",
+                "description": "Це дозволить вам переглядати історію бесід на будь-яких нових пристроях і необхідно для створення резервних копій бесід і цифрової ідентичності. <a>Докладніше</a>",
                 "title": "Сховище ключів"
             },
             "recovery": {
@@ -2551,14 +2532,14 @@
                 "change_recovery_key": "Змінити ключ відновлення",
                 "change_recovery_key_description": "Запишіть цей новий ключ відновлення в безпечне місце. Потім натисніть Продовжити, щоб підтвердити зміну.",
                 "change_recovery_key_title": "Змінити ключ відновлення?",
-                "description": "Відновіть свою криптографічну особистість та історію повідомлень за допомогою ключа відновлення, якщо ви втратили всі наявні пристрої.",
+                "description": "Ваші бесіди автоматично резервуються з використанням наскрізного шифрування. Щоб відновити цю резервну копію та зберегти свою цифрову ідентичність у разі втрати доступу до всіх своїх пристроїв, вам знадобиться ключ відновлення.",
                 "enter_key_error": "Ви ввели некоректний ключ відновлення.",
                 "enter_recovery_key": "Введіть ключ відновлення",
                 "forgot_recovery_key": "Забули ключ відновлення?",
                 "key_storage_warning": "Ваше сховище ключів не синхронізовано. Натисніть кнопку нижче, щоб усунути проблему.",
                 "save_key_description": "Не діліться цим ні з ким!",
                 "save_key_title": "Ключ відновлення",
-                "set_up_recovery": "Налаштувати відновлення",
+                "set_up_recovery": "Отримати ключ відновлення",
                 "set_up_recovery_confirm_button": "Завершити налаштування",
                 "set_up_recovery_confirm_description": "Введіть ключ відновлення, показаний на попередньому екрані, щоб завершити налаштування відновлення.",
                 "set_up_recovery_confirm_title": "Введіть ключ відновлення для підтвердження",
@@ -2566,7 +2547,7 @@
                 "set_up_recovery_save_key_description": "Запишіть цей ключ відновлення в безпечне місце, наприклад, у менеджері паролів, зашифровану примітку або фізично у безпечне місце.",
                 "set_up_recovery_save_key_title": "Збережіть ключ відновлення в надійному місці",
                 "set_up_recovery_secondary_description": "Після натискання кнопки Продовжити ми згенеруємо для вас ключ відновлення.",
-                "title": "Відновлення"
+                "title": "Резервне копіювання"
             },
             "title": "Шифрування"
         },
@@ -2650,7 +2631,7 @@
             "password_change_section": "Встановити новий пароль облікового запису…",
             "password_change_success": "Ваш пароль успішно змінено.",
             "personal_info": "Особиста інформація",
-            "profile_subtitle": "Ось як вас бачать інші в застосунку.",
+            "profile_subtitle": "Так вас бачать інші в застосунку.",
             "profile_subtitle_oidc": "Вашим обліковим записом окремо керує постачальник даних особистості, тому деякі ваші особисті дані не можуть бути змінені тут.",
             "remove_email_prompt": "Вилучити %(email)s?",
             "remove_msisdn_prompt": "Вилучити %(phone)s?",
@@ -2659,7 +2640,8 @@
             "unable_to_load_msisdns": "Не вдалося завантажити номери телефонів",
             "username": "Ім'я користувача"
         },
-        "inline_url_previews_default": "Увімкнути вбудований перегляд гіперпосилань за умовчанням",
+        "inline_url_previews_default": "Увімкнути попередній перегляд",
+        "inline_url_previews_encrypted": "Увімкнути попередній перегляд у зашифрованих кімнатах",
         "insert_trailing_colon_mentions": "Додавати двокрапку після згадки користувача на початку повідомлення",
         "invite_controls": {
             "default_label": "Дозволити користувачам запрошувати вас до кімнат"
@@ -2738,7 +2720,7 @@
             "enable_desktop_notifications_session": "Увімкнути стільничні сповіщення для цього сеансу",
             "enable_email_notifications": "Увімкнути сповіщення е-поштою для %(email)s",
             "enable_notifications_account": "Увімкнути сповіщення для цього облікового запису",
-            "enable_notifications_account_detail": "Вимкніть, щоб вимкнути сповіщення для всіх ваших пристроїв і сесій",
+            "enable_notifications_account_detail": "Вимкніть, щоб вимкнути сповіщення для всіх ваших пристроїв і сеансів",
             "enable_notifications_device": "Увімкнути сповіщення для цього пристрою",
             "error_loading": "Сталася помилка під час завантаження налаштувань сповіщень.",
             "error_permissions_denied": "%(brand)s не має дозволу надсилати вам сповіщення — перевірте налаштування браузера",
@@ -2770,13 +2752,13 @@
             "room_activity": "Нова діяльність у кімнаті, поліпшення та повідомлення про стан",
             "rule_call": "Запрошення до виклику",
             "rule_contains_display_name": "Повідомлення з моїм псевдонімом",
-            "rule_contains_user_name": "Повідомлення, що містять моє користувацьке ім'я",
+            "rule_contains_user_name": "@згадки та відповіді",
             "rule_encrypted": "Зашифровані повідомлення у групових бесідах",
             "rule_encrypted_room_one_to_one": "Зашифровані повідомлення у бесідах віч-на-віч",
             "rule_invite_for_me": "Коли мене запрошено до кімнати",
             "rule_message": "Повідомлення у групових бесідах",
             "rule_room_one_to_one": "Повідомлення у бесідах віч-на-віч",
-            "rule_roomnotif": "Повідомлення, що містять @room",
+            "rule_roomnotif": "Згадки @room",
             "rule_suppress_notices": "Повідомлення, надіслані ботом",
             "rule_tombstone": "Коли кімнати поліпшено",
             "show_message_desktop_notification": "Показувати повідомлення у стільничних сповіщеннях",
@@ -2797,6 +2779,8 @@
             "enable_tray_icon": "Згортати вікно до піктограми в лотку при закритті",
             "keyboard_heading": "Комбінації клавіш",
             "keyboard_view_shortcuts_button": "Щоб переглянути всі комбінації клавіш, <a>натисніть сюди</a>.",
+            "link_previews_description": "Показує інформацію про посилання під повідомленнями",
+            "link_previews_heading": "Попередній перегляд посилань",
             "media_heading": "Зображення, GIF та відео",
             "presence_description": "Діліться своєю активністю та станом з іншими.",
             "publish_timezone": "Публікувати часовий пояс у загальнодоступному профілі",
@@ -2812,7 +2796,7 @@
             "user_timezone": "Установити часовий пояс"
         },
         "prompt_invite": "Запитувати перед надсиланням запрошень на потенційно недійсні matrix ID",
-        "replace_plain_emoji": "Автоматично замінювати простотекстові емодзі",
+        "replace_plain_emoji": "Автоматично замінювати текстові емоджі",
         "security": {
             "analytics_description": "Поділіться анонімними даними, щоб допомагати нам виявляти проблеми. Нічого особистого. Ніяких третіх осіб.",
             "bulk_options_accept_all_invites": "Прийняти всі %(invitedRooms)s запрошення",
@@ -2820,7 +2804,7 @@
             "bulk_options_section": "Масові дії",
             "dehydrated_device_description": "Функція офлайн-пристрою дозволяє отримувати зашифровані повідомлення, навіть якщо ви не ввійшли в обліковий запис на жодному пристрої",
             "dehydrated_device_enabled": "Офлайн-пристрій увімкнено",
-            "dialog_title": "<strong>Налаштування:</strong> Безпека й приватність",
+            "dialog_title": "<strong>Налаштування:</strong> Безпека та приватність",
             "e2ee_default_disabled_warning": "Адміністратором вашого сервера було вимкнено автоматичне наскрізне шифрування у приватних кімнатах і особистих повідомленнях.",
             "enable_message_search": "Увімкнути шукання повідомлень у зашифрованих кімнатах",
             "encryption_section": "Шифрування",
@@ -2854,28 +2838,31 @@
         "send_read_receipts_unsupported": "Ваш сервер не підтримує вимкнення надсилання сповіщень про прочитання.",
         "send_typing_notifications": "Надсилати сповіщення про набирання тексту",
         "sessions": {
-            "best_security_note": "Для кращої безпеки перевірте свої сеанси та вийдіть із усіх сеансів, які ви більше не впізнаєте або не використовуєте.",
-            "browser": "Браузер",
+            "best_security_note": "Для кращої безпеки звірте свої сеанси та вийдіть з усіх сеансів, які ви більше не розпізнаєте або не використовуєте.",
             "confirm_sign_out": {
-                "one": "Підтвердьте вихід із цього пристрою",
-                "other": "Підтвердьте вихід із цих пристроїв"
+                "one": "Підтвердьте вилучення цього пристрою",
+                "few": "Підтвердьте вилучення цих пристроїв",
+                "many": "Підтвердьте вилучення цих пристроїв"
             },
             "confirm_sign_out_body": {
-                "other": "Клацніть кнопку внизу, щоб підтвердити вихід із цих пристроїв.",
-                "one": "Натисніть кнопку внизу, щоб підтвердити вихід із цього пристрою."
+                "one": "Натисніть кнопку внизу, щоб підтвердити вилучення цього пристрою.",
+                "few": "Натисніть кнопку внизу, щоб підтвердити вилучення цих пристроїв.",
+                "many": "Натисніть кнопку внизу, щоб підтвердити вилучення цих пристроїв."
             },
             "confirm_sign_out_continue": {
-                "one": "Вийти з пристрою",
-                "other": "Вийти з пристроїв"
+                "one": "Вилучити пристрій",
+                "few": "Вилучити пристрої",
+                "many": "Вилучити пристрої"
             },
             "confirm_sign_out_sso": {
-                "other": "Підтвердьте вихід із цих пристроїв за допомогою єдиного входу, щоб довести вашу справжність.",
-                "one": "Підтвердьте вихід із цього пристрою за допомогою єдиного входу, щоб підтвердити вашу особу."
+                "one": "Підтвердьте вилучення цього пристрою за допомогою єдиного входу, щоб підтвердити свою ідентичність.",
+                "few": "Підтвердьте вилучення цих пристроїв за допомогою єдиного входу, щоб підтвердити свою ідентичність.",
+                "many": "Підтвердьте вилучення цих пристроїв за допомогою єдиного входу, щоб підтвердити свою ідентичність."
             },
             "current_session": "Поточний сеанс",
             "desktop_session": "Сеанс на комп'ютері",
             "details_heading": "Подробиці сеансу",
-            "device_unverified_description": "Звірте цей сеанс або вийдіть із нього для поліпшення безпеки та надійності.",
+            "device_unverified_description": "Звірте цей сеанс або вийдіть із нього для найкращої безпеки та надійності.",
             "device_unverified_description_current": "Звірте свій поточний сеанс для посилення безпеки обміну повідомленнями.",
             "device_verified_description": "Цей сеанс готовий для безпечного обміну повідомленнями.",
             "device_verified_description_current": "Ваш поточний сеанс готовий до захищеного обміну повідомленнями.",
@@ -2893,7 +2880,7 @@
             "inactive_sessions": "Неактивні сеанси",
             "inactive_sessions_explainer_1": "Неактивні сеанси — це сеанси, які ви не використовували протягом певного часу, але вони продовжують отримувати ключі шифрування.",
             "inactive_sessions_explainer_2": "Вилучення неактивних сеансів посилює безпеку і швидкодію, а також полегшує виявлення підозрілих нових сеансів.",
-            "inactive_sessions_list_description": "Обміркуйте можливість виходу зі старих сеансів (%(inactiveAgeDays)s днів або більше), якими ви більше не користуєтесь.",
+            "inactive_sessions_list_description": "Розгляньте можливість виходу зі старих сеансів (%(inactiveAgeDays)s днів або більше), якими ви більше не користуєтесь.",
             "ip": "IP-адреса",
             "last_activity": "Остання активність",
             "manage": "Керувати цим сеансом",
@@ -2906,7 +2893,6 @@
             "no_sessions": "Не знайдено сеансів.",
             "no_unverified_sessions": "Не знайдено не звірених сеансів.",
             "no_verified_sessions": "Не знайдено звірених сеансів.",
-            "os": "Операційна система",
             "other_sessions_heading": "Інші сеанси",
             "push_heading": "Push-сповіщення",
             "push_subheading": "Отримувати push-сповіщення в цьому сеансі.",
@@ -2920,19 +2906,21 @@
             "security_recommendations_description": "Удоскональте безпеку свого облікового запису, дотримуючись цих порад.",
             "session_id": "ID сеансу",
             "show_details": "Показати подробиці",
-            "sign_in_with_qr": "Підключити новий пристрій",
+            "sign_in_with_qr": "Зв’язати новий пристрій",
             "sign_in_with_qr_button": "Показати QR-код",
             "sign_in_with_qr_description": "Використовуйте QR-код, щоб увійти на інший пристрій і налаштувати безпечний обмін повідомленнями.",
             "sign_in_with_qr_unsupported": "Не підтримується постачальником облікового запису",
             "sign_out": "Вийти з цього сеансу",
-            "sign_out_all_other_sessions": "Вийти з усіх інших сеансів (%(otherSessionsCount)s)",
+            "sign_out_all_other_sessions": "Вилучити всі інші сеанси (%(otherSessionsCount)s)",
             "sign_out_confirm_description": {
-                "one": "Ви впевнені, що хочете вийти з %(count)s сеансів?",
-                "other": "Ви впевнені, що хочете вийти з %(count)s сеансів?"
+                "one": "Ви впевнені, що хочете вилучити %(count)s сеанс?",
+                "few": "Ви впевнені, що хочете вилучити %(count)s сеанси?",
+                "many": "Ви впевнені, що хочете вилучити %(count)s сеансів?"
             },
             "sign_out_n_sessions": {
-                "one": "Вийти з %(count)s сеансу",
-                "other": "Вийти з %(count)s сеансів"
+                "one": "Вилучити %(count)s сеанс",
+                "few": "Вилучити %(count)s сеанси",
+                "many": "Вилучити %(count)s сеансів"
             },
             "title": "Сеанси",
             "unknown_session": "Невідомий тип сеансу",
@@ -2941,15 +2929,15 @@
             "unverified_session_explainer_2": "Під час користування цим сеансом ви не зможете брати участь у кімнатах, де ввімкнено шифрування.",
             "unverified_session_explainer_3": "Для найкращої безпеки та приватності радимо користуватися клієнтами Matrix, які підтримують шифрування.",
             "unverified_sessions": "Не звірені сеанси",
-            "unverified_sessions_explainer_1": "Не звірені сеанси — це сеанси, які увійшли в систему з вашими обліковими даними, але не пройшли перехресну перевірку.",
+            "unverified_sessions_explainer_1": "Незвірені сеанси — це сеанси, які розпочаті з вашими обліковими даними, у яких не підтверджено вашу цифрову ідентичність.",
             "unverified_sessions_explainer_2": "Ви повинні бути впевнені, що розпізнаєте ці сеанси, оскільки вони можуть бути несанкціонованим використанням вашого облікового запису.",
             "unverified_sessions_list_description": "Звірте свої сеанси для покращеного безпечного обміну повідомленнями або вийдіть із тих, які ви не розпізнаєте або не використовуєте.",
             "url": "URL-адреса",
             "verified_session": "Звірений сеанс",
             "verified_sessions": "Звірені сеанси",
-            "verified_sessions_explainer_1": "Звірені сеанси — це будь-який пристрій, на якому ви використовуєте цей обліковий запис після введення парольної фрази або підтвердження вашої особи за допомогою іншого перевіреного сеансу.",
+            "verified_sessions_explainer_1": "Вашу цифрову особу підтверджено у звірених сеансах.",
             "verified_sessions_explainer_2": "Це означає, що у вас є всі ключі, необхідні для розблокування ваших зашифрованих повідомлень і підтвердження іншим користувачам, що ви довіряєте цьому сеансу.",
-            "verified_sessions_list_description": "Для кращої безпеки виходьте з усіх сеансів, які ви не розпізнаєте або більше не використовуєте.",
+            "verified_sessions_list_description": "Для найкращої безпеки вилучіть усі сеанси, які ви більше не розпізнаєте або не використовуєте.",
             "verify_session": "Звірити сеанс",
             "web_session": "Сеанс у браузері"
         },
@@ -2962,19 +2950,18 @@
         "show_nsfw_content": "Показати матеріали NSFW",
         "show_read_receipts": "Показувати мітки прочитання, надіслані іншими користувачами",
         "show_redaction_placeholder": "Показувати замісну позначку замість видалених повідомлень",
+        "show_sections": "Показувати розділи",
         "show_stickers_button": "Показати кнопку наліпок",
         "show_typing_notifications": "Сповіщати про друкування",
         "showbold": "Показати всю діяльність у списку кімнат (крапки або кількість непрочитаних повідомлень)",
         "sidebar": {
             "dialog_title": "<strong>Налаштування:</strong> Бічна панель",
-            "metaspaces_favourites_description": "Групуйте всі свої улюблені кімнати та людей в одному місці.",
             "metaspaces_home_all_rooms": "Показати всі кімнати",
             "metaspaces_home_all_rooms_description": "Показати всі кімнати в домівці, навіть ті, що належать до просторів.",
             "metaspaces_home_description": "Домівка надає загальний огляд усього.",
             "metaspaces_orphans": "Кімнати без просторів",
             "metaspaces_orphans_description": "Групуйте всі свої кімнати, не приєднані до простору, в одному місці.",
-            "metaspaces_people_description": "Групуйте всіх своїх людей в одному місці.",
-            "metaspaces_subsection": "Показувати такі простори",
+            "metaspaces_subsection": "Простори для показу",
             "metaspaces_video_rooms": "Відеокімнати та конференції",
             "metaspaces_video_rooms_description": "Згрупувати всі приватні відеокімнати та конференції.",
             "metaspaces_video_rooms_description_invite_extension": "На конференції можна запрошувати людей не з matrix.",
@@ -2984,7 +2971,7 @@
         "start_automatically": {
             "disabled": "Ні",
             "enabled": "Так",
-            "label": "Відкрийте %(brand)s після входу на комп'ютері.",
+            "label": "Відкривати %(brand)s після входу на комп'ютері",
             "minimised": "Згорнуто"
         },
         "tac_only_notifications": "Показувати сповіщення лише в центрі діяльності в гілках",
@@ -3000,19 +2987,25 @@
             "audio_output": "Звуковий вивід",
             "audio_output_empty": "Звуковий вивід не виявлено",
             "auto_gain_control": "Авторегулювання підсилення",
-            "connection_section": "З'єднання",
             "dialog_title": "<strong>Налаштування:</strong> Голос і відео",
             "echo_cancellation": "Пригнічення відлуння",
+            "echo_cancellation_description": "Прибирає відлуння з мікрофонного вводу під час викликів. Це налаштування також застосовується до Element Call.",
             "enable_fallback_ice_server": "Дозволити резервний сервер підтримки викликів (%(server)s)",
             "enable_fallback_ice_server_description": "Застосовується лише в тому випадку, якщо ваш домашній сервер не пропонує його. Ваша IP-адреса передаватиметься під час виклику.",
+            "enable_legacy_calls": "Увімкнути застарілі голосові/відеовиклики",
+            "enable_legacy_calls_description": "Стосується Jitsi та викликів 1:1 через WebRTC",
             "mirror_local_feed": "Показувати локальне відео віддзеркалено",
-            "missing_permissions_prompt": "Бракує медіадозволів, натисніть кнопку нижче, щоб їх надати.",
+            "missing_permissions_prompt": "Щоб брати участь у викликах, надайте %(brand)s дозвіл на доступ до вашого аудіо- та відеопристрою.",
             "noise_suppression": "Шумопригнічення",
-            "request_permissions": "Запитати медіадозволи",
+            "noise_suppression_description": "Знижує фоновий шум на вводі мікрофона під час викликів. Це налаштування також застосовується до Element Call.",
+            "permissions": "Дозволити доступ до мікрофона та камери",
+            "request_permissions": "Запит",
             "title": "Голос і відео",
             "video_input_empty": "Вебкамеру не виявлено",
             "video_section": "Налаштування відео",
             "voice_agc": "Авторегулювання гучності мікрофона",
+            "voice_input_description": "Налаштований тут аудіовхід використовується для голосових повідомлень та викликів (Legacy/1:1).",
+            "voice_input_section": "Аудіоввід",
             "voice_processing": "Обробка голосу",
             "voice_section": "Налаштування голосу"
         },
@@ -3084,7 +3077,7 @@
         "plain": "Надсилає повідомлення у вигляді звичайного тексту, не інтерпретуючи його як розмітку",
         "query": "Відкриває бесіду з вказаним користувачем",
         "query_not_found_phone_number": "Не вдалося знайти Matrix ID для номера телефону",
-        "rageshake": "Надіслати звіт про ваду разом з журналами",
+        "rageshake": "Надіслати звіт про проблему разом з журналами",
         "rainbow": "Надсилає вказане повідомлення, розфарбоване веселкою",
         "rainbowme": "Надсилає вказаний смайлик, розфарбований веселкою",
         "remove": "Вилучає користувача з указаним ID з цієї кімнати",
@@ -3094,6 +3087,14 @@
         "server_error_detail": "Сервер недоступний, перевантажений чи ще щось пішло не так.",
         "shrug": "Додає ¯\\_(ツ)_/¯ на початку текстового повідомлення",
         "spoiler": "Надсилає вказане повідомлення згорненим",
+        "status": {
+            "description": "Вкажіть свій поточний статус",
+            "no_args": "Аргументи не вказано. Необхідно вказати емодзі та, за бажанням, текстову складову.",
+            "no_emoji": "Ви не вказали емодзі",
+            "no_text": "Ви не вказали текст статусу",
+            "too_long_emoji": "Першим аргументом має бути емодзі",
+            "too_long_text": "Наданий вами текст був занадто довгим."
+        },
         "tableflip": "Додає (╯°□°）╯︵ ┻━┻ на початку текстового повідомлення",
         "topic": "Показує чи встановлює тему кімнати",
         "topic_none": "Ця кімната не має теми.",
@@ -3183,12 +3184,6 @@
     "space_settings": {
         "title": "Налаштування — %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "У вас немає дозволу додавати кімнати до цього простору",
-        "error_no_permission_add_space": "У вас немає дозволу додавати простори до цього простору",
-        "error_no_permission_create_room": "У вас немає дозволу створювати кімнати в цьому просторі",
-        "error_no_permission_invite": "Ви не маєте дозволу запрошувати людей до цього простору"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Введіть назву нового сервера, який ви хочете переглянути.",
@@ -3267,8 +3262,8 @@
             "one": "%(count)s відповідь",
             "other": "%(count)s відповідей"
         },
-        "empty_description": "Використовувати “%(replyInThread)s” під час наведення курсора на повідомлення.",
-        "empty_title": "Гілки допомагають підтримувати тему розмов і їх легко відстежувати.",
+        "empty_description": "Наведіть курсор на повідомлення та виберіть “%(replyInThread)s”.",
+        "empty_title": "Гілки допомагають дотримуватися теми розмов та полегшують відстеження повідомлень.",
         "mark_all_read": "Позначити все прочитаним",
         "my_threads": "Мої гілки",
         "my_threads_description": "Показує всі гілки, де ви брали участь",
@@ -3308,14 +3303,13 @@
         "creation_summary_dm": "%(creator)s створює цю приватну розмову.",
         "creation_summary_room": "%(creator)s створює й налаштовує кімнату.",
         "decryption_failure": {
-            "sender_identity_previously_verified": "Верифіковану ідентичність відправника скинуто",
+            "sender_identity_previously_verified": "Звірена цифрова ідентичність відправника була скинута",
             "unable_to_decrypt": "Не вдалося розшифрувати повідомлення"
         },
         "disambiguated_profile": "%(displayName)s(%(matrixId)s)",
         "download_action_downloading": "Завантаження",
         "download_failed": "Не вдалося завантажити",
         "download_failed_description": "Під час завантаження цього файлу сталася помилка",
-        "e2e_state": "Стан наскрізного шифрування",
         "edits": {
             "tooltip_label": "Змінено %(date)s. Натисніть, щоб переглянути зміни.",
             "tooltip_sub": "Натисніть, щоб переглянути зміни",
@@ -3397,9 +3391,7 @@
         "m.poll.start": "%(senderName)s починає опитування - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s змінює аватар кімнати.",
-            "changed_img": "%(senderDisplayName)s змінює аватар кімнати на <img/>",
-            "lightbox_title": "%(senderDisplayName)s змінює аватар %(roomName)s",
-            "removed": "%(senderDisplayName)s вилучає аватар кімнати."
+            "lightbox_title": "%(senderDisplayName)s змінює аватар %(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3445,8 +3437,10 @@
         "m.room.member": {
             "accepted_3pid_invite": "%(targetName)s приймає запрошення до %(displayName)s",
             "accepted_invite": "%(targetName)s приймає запрошення",
-            "ban": "%(senderName)s блокує %(targetName)s",
-            "ban_reason": "%(senderName)s блокує %(targetName)s: %(reason)s",
+            "ban": "%(senderName)s блокує користувача",
+            "ban_reason": "%(senderName)s блокує користувача: %(reason)s",
+            "ban_reason_spoiler": "%(senderName)s блокує <user/>: %(reason)s",
+            "ban_spoiler": "%(senderName)s блокує <user/>",
             "change_avatar": "%(senderName)s змінює зображення профілю",
             "change_name": "%(oldDisplayName)s змінює псевдонім на %(displayName)s",
             "change_name_avatar": "%(oldDisplayName)s змінює своє ім'я та зображення профілю",
@@ -3774,7 +3768,7 @@
         "ban_space_everything": "Заблокувати скрізь, де маю доступ",
         "ban_space_specific": "Заблокувати в частині того, куди маю доступ",
         "deactivate_confirm_action": "Деактивувати користувача",
-        "deactivate_confirm_description": "Деактивація цього користувача виведе їх з системи й унеможливить вхід у майбутньому. До того ж вони вийдуть з усіх кімнат, у яких перебувають. Ця дія безповоротна. Ви впевнені, що хочете деактивувати цього користувача?",
+        "deactivate_confirm_description": "Деактивація цього користувача призведе до вилучення його пристроїв та унеможливить повторний вхід. Крім того, його буде вилучено з усіх кімнат, в яких він перебуває. Цю дію неможливо скасувати. Ви впевнені, що хочете деактивувати цього користувача?",
         "deactivate_confirm_title": "Деактивувати користувача?",
         "demote_button": "Зменшити повноваження",
         "demote_self_confirm_description_space": "Ви не зможете скасувати цю дію, оскільки ви знижуєте свої повноваження. Якщо ви останній привілейований користувач у цьому просторі, ви не зможете повернути повноваження.",
@@ -3836,6 +3830,9 @@
         "verify_button": "Звірити користувача",
         "verify_explainer": "Для додаткової безпеки перевірте цього користувача, звіривши одноразовий код на обох своїх пристроях."
     },
+    "user_status": {
+        "on_a_call": "Розмовляє"
+    },
     "voip": {
         "already_in_call": "Вже у виклику",
         "already_in_call_person": "Ви вже спілкуєтесь із цією особою.",
@@ -3851,6 +3848,18 @@
         "call_held": "%(peerName)s утримує виклик",
         "call_held_resume": "Ви утримуєте виклик <a>Відновити</a>",
         "call_held_switch": "Ви утримуєте виклик <a>Перемкнути</a>",
+        "call_members": {
+            "exhaustive": {
+                "one": "<avatars/> у виклику",
+                "few": "<avatars/> у виклику",
+                "many": "<avatars/> у виклику"
+            },
+            "overflow": {
+                "one": "<avatars/> +%(overflowCount)s у виклику",
+                "few": "<avatars/> +%(overflowCount)s у виклику",
+                "many": "<avatars/> +%(overflowCount)s у виклику"
+            }
+        },
         "call_toast_unknown_room": "Невідома кімната",
         "camera_disabled": "Вашу камеру вимкнено",
         "camera_enabled": "Ваша камера досі увімкнена",
@@ -3873,10 +3882,12 @@
         "enable_microphone": "Увімкнути мікрофон",
         "expand": "Повернутися до виклику",
         "get_call_link": "Поділитися посиланням на виклик",
+        "group_call_started": "Груповий виклик розпочато",
         "hangup": "Покласти слухавку",
         "hide_sidebar_button": "Сховати бічну панель",
         "input_devices": "Пристрої вводу",
         "jitsi_call": "Конференція Jitsi",
+        "join_with_video": "Приєднатися з відео",
         "legacy_call": "Застарілий спосіб виклику",
         "maximise": "Заповнити екран",
         "maximise_call": "Розгорнути виклик",
@@ -3932,13 +3943,18 @@
         "user_is_presenting": "%(sharerName)s показує",
         "video_call": "Відеовиклик",
         "video_call_incoming": "Вхідний відеовиклик",
-        "video_call_using": "Відеодзвінок за допомогою:",
+        "video_call_using": "Відеовиклик за допомогою:",
         "voice_call": "Голосовий виклик",
         "voice_call_incoming": "Вхідний голосовий виклик",
         "voice_call_using": "Голосовий виклик за допомогою:",
         "you_are_presenting": "Ви показуєте"
     },
     "web_default_device_name": "%(appName)s: %(browserName)s на %(osName)s",
+    "welcome": {
+        "tagline_element": "Створено для швидкості та простоти.",
+        "title_element": "Спілкуйтесь елементарно",
+        "title_generic": "Вітаємо в %(brand)s"
+    },
     "widget": {
         "added_by": "Вджет додано",
         "capabilities_dialog": {
@@ -3960,6 +3976,7 @@
             "change_name_this_room": "Змінювати назву цієї кімнати",
             "change_topic_active_room": "Змінювати тему вашої активної кімнати",
             "change_topic_this_room": "Змінювати тему цієї кімнати",
+            "download_file": "Завантажити файли з медіарепозиторію",
             "receive_membership_active_room": "Бачити, коли хтось додається, виходить чи запрошується до вашої активної кімнати",
             "receive_membership_this_room": "Бачити, коли хтось додається, виходить чи запрошується до цієї кімнати",
             "remove_ban_invite_leave_active_room": "Вилучати, блокувати чи запрошувати людей у вашій активній кімнаті, зокрема вас",
@@ -4015,13 +4032,7 @@
         "close_to_view_right_panel": "Закрийте віджет, щоб він зʼявився на цій панелі",
         "context_menu": {
             "delete": "Видалити віджет",
-            "delete_warning": "Видалення віджету вилучить його в усіх користувачів кімнати. Точно видалити цей віджет?",
-            "move_left": "Посунути ліворуч",
-            "move_right": "Посунути праворуч",
-            "remove": "Прибрати для всіх",
-            "revoke": "Відкликати дозвіл",
-            "screenshot": "Зробити знімок",
-            "start_audio_stream": "Почати аудіотрансляцію"
+            "delete_warning": "Видалення віджету вилучить його в усіх користувачів кімнати. Точно видалити цей віджет?"
         },
         "cookie_warning": "Цей віджет може використовувати куки.",
         "error_hangup_description": "Вас від'єднано від виклику. (Помилка: %(message)s)",
@@ -4035,7 +4046,7 @@
         "error_unable_start_audio_stream_title": "Не вдалося почати живу трансляцію",
         "modal_data_warning": "Наведені далі дані надсилаються на %(widgetDomain)s",
         "modal_title_default": "Модальний віджет",
-        "no_name": "Невідомий додаток",
+        "no_name": "Невідомий застосунок",
         "open_id_permissions_dialog": {
             "remember_selection": "Запам'ятати це",
             "starting_text": "Віджет звірить ваш ID користувача, але не зможе виконувати такі дії від вашого імені:",
diff --git a/apps/web/src/i18n/strings/vi.json b/apps/web/src/i18n/strings/vi.json
index 201ff4a6b6..acd6c7f4e3 100644
--- a/apps/web/src/i18n/strings/vi.json
+++ b/apps/web/src/i18n/strings/vi.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Trình chọn biểu tượng cảm xúc",
         "jump_first_invite": "Chuyển đến lời mời đầu tiên.",
         "message_composer": "Trình soạn tin nhắn",
         "n_unread_messages": {
@@ -11,7 +10,6 @@
             "one": "1 đề cập chưa đọc.",
             "other": "%(count)s tin nhắn chưa đọc bao gồm các đề cập."
         },
-        "room_name": "Phòng %(name)s",
         "unread_messages": "Các tin nhắn chưa đọc."
     },
     "a11y_jump_first_unread_room": "Chuyển đến phòng chưa đọc đầu tiên.",
@@ -19,7 +17,6 @@
         "accept": "Đồng ý",
         "add": "Thêm",
         "add_existing_room": "Thêm phòng hiện có",
-        "add_people": "Thêm người",
         "apply": "Áp dụng",
         "approve": "Chấp thuận",
         "ask_to_join": "Yêu cầu để tham gia",
@@ -52,7 +49,6 @@
         "enter_fullscreen": "Vào toàn màn hình",
         "exit_fullscreeen": "Thoát toàn màn hình",
         "expand": "Mở rộng",
-        "explore_public_rooms": "Khám phá các phòng chung",
         "explore_rooms": "Khám phá các phòng",
         "export": "Xuất",
         "forward": "Chuyển tiếp",
@@ -64,8 +60,6 @@
         "ignore": "Tảng lờ",
         "import": "Nhập",
         "invite": "Mời",
-        "invite_to_space": "Mời vào space",
-        "invites_list": "Mời",
         "join": "Tham gia",
         "learn_more": "Tìm hiểu thêm",
         "leave": "Rời khỏi",
@@ -92,7 +86,6 @@
         "rename": "Đặt lại tên",
         "reply": "Phản hồi",
         "reply_in_thread": "Trả lời theo chủ đề",
-        "report_content": "Báo cáo nội dung",
         "resend": "Gửi lại",
         "reset": "Cài lại",
         "resume": "Tiếp tục",
@@ -110,8 +103,6 @@
         "sign_out": "Đăng xuất",
         "skip": "Bỏ qua",
         "start": "Bắt đầu",
-        "start_chat": "Bắt đầu trò chuyện",
-        "start_new_chat": "Bắt đầu trò chuyện mới",
         "stop": "Dừng",
         "submit": "Xác nhận",
         "subscribe": "Đặt mua",
@@ -205,10 +196,7 @@
         "log_in_new_account": "<a>Sign in</a> để vào tài khoản mới của bạn.",
         "logout_dialog": {
             "description": "Bạn có chắc mình muốn đăng xuất không?",
-            "megolm_export": "Xuất các khóa thủ công",
             "setup_key_backup_title": "Bạn sẽ mất quyền truy cập vào các tin nhắn được mã hóa của mình",
-            "setup_secure_backup_description_1": "Các tin nhắn được mã hóa được bảo mật bằng mã hóa đầu cuối. Chỉ bạn và (những) người nhận mới có chìa khóa để đọc những tin nhắn này.",
-            "setup_secure_backup_description_2": "Khi bạn đăng xuất, các khóa sẽ được xóa khỏi thiết bị này, tức là bạn không thể đọc các tin nhắn được mã hóa trừ khi bạn có khóa cho chúng trong thiết bị khác, hoặc sao lưu chúng lên máy chủ.",
             "skip_key_backup": "Tôi không muốn tin nhắn được mã hóa của mình"
         },
         "misconfigured_body": "Yêu cầu quản trị viên %(brand)s của bạn kiểm tra <a>your config</a> để tìm các mục nhập sai hoặc trùng lặp.",
@@ -394,7 +382,6 @@
         "encrypted": "Được mã hóa",
         "error": "Lỗi",
         "faq": "Câu hỏi thường gặp",
-        "favourites": "Yêu thích",
         "feedback": "Phản hồi",
         "filter_results": "Lọc kết quả",
         "forward_message": "Chuyển tiếp tin nhắn",
@@ -402,7 +389,6 @@
         "go_to_settings": "Đi tới Cài đặt",
         "guest": "Khách",
         "help": "Hỗ trợ",
-        "historical": "Lịch sử",
         "home": "Nhà",
         "homeserver": "Máy chủ",
         "identity_server": "Máy chủ định danh",
@@ -414,12 +400,10 @@
         "light": "Sáng",
         "loading": "Đang tải…",
         "location": "Vị trí",
-        "low_priority": "Ưu tiên thấp",
         "matrix": "Matrix",
         "message": "Tin nhắn",
         "message_layout": "Bố cục tin nhắn",
         "microphone": "Micrô",
-        "model": "Mẫu mã",
         "modern": "Hiện đại",
         "mute": "Im lặng",
         "n_members": {
@@ -474,7 +458,6 @@
         "success": "Thành công",
         "suggestions": "Gợi ý",
         "support": "Hỗ trợ",
-        "system_alerts": "Cảnh báo hệ thống",
         "theme": "Chủ đề",
         "thread": "Chủ đề",
         "threads": "Chủ đề",
@@ -490,7 +473,6 @@
         "username": "Tên đăng nhập",
         "verified": "Đã xác thực",
         "version": "Phiên bản",
-        "video": "Truyền hình",
         "video_room": "Phòng truyền hình",
         "view_message": "Xem tin nhăn",
         "warning": "Cảnh báo"
@@ -694,7 +676,6 @@
         "thread_root_id": "ID luồng gốc: %(threadRootId)s",
         "threads_timeline": "Dòng thời gian luồng",
         "title": "Công cụ phát triển",
-        "toggle_event": "chuyển đổi sự kiện",
         "toolbox": "Hộp công cụ",
         "use_at_own_risk": "Giao diện người dùng này KHÔNG kiểm tra các loại giá trị. Sử dụng và hãy biết nguy cơ.",
         "user_read_up_to": "Người dùng đọc lên tới: ",
@@ -716,22 +697,6 @@
     },
     "dialog_close_label": "Đóng hộp thoại",
     "download_completed": "Tải xuống hoàn tất",
-    "emoji": {
-        "categories": "Hạng mục",
-        "category_activities": "Các hoạt động",
-        "category_animals_nature": "Động vật & Thiên nhiên",
-        "category_flags": "Cờ",
-        "category_food_drink": "Đồ ăn thức uống",
-        "category_frequently_used": "Thường xuyên sử dụng",
-        "category_objects": "Các đối tượng",
-        "category_smileys_people": "Biểu tượng mặt cười và con người",
-        "category_symbols": "Ký hiệu",
-        "category_travel_places": "Du lịch & Địa điểm",
-        "quick_reactions": "Phản ứng nhanh"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "Hủy tìm kiếm"
-    },
     "empty_room": "Phòng trống",
     "empty_room_was_name": "Phòng trống (trước kia là %(oldName)s)",
     "encryption": {
@@ -777,17 +742,6 @@
             "warning": "Nếu bạn không xóa phương pháp khôi phục, kẻ tấn công có thể đang cố truy cập vào tài khoản của bạn. Thay đổi mật khẩu tài khoản của bạn và đặt phương pháp khôi phục mới ngay lập tức trong Cài đặt."
         },
         "set_up_toast_title": "Thiết lập Sao lưu Bảo mật",
-        "setup_secure_backup": {
-            "explainer": "Sao lưu chìa khóa của bạn trước khi đăng xuất để tránh mất chúng."
-        },
-        "udd": {
-            "interactive_verification_button": "Xác thực có tương tác bằng biểu tượng cảm xúc",
-            "other_ask_verify_text": "Yêu cầu người dùng này xác thực phiên của họ hoặc xác minh theo cách thủ công bên dưới.",
-            "other_new_session_text": "%(name)s (%(userId)s) đã đăng nhập vào một phiên mới mà không xác thực:",
-            "own_ask_verify_text": "Xác minh phiên khác của bạn bằng một trong các tùy chọn bên dưới.",
-            "own_new_session_text": "Bạn đã đăng nhập vào một phiên mới mà không xác thực nó:",
-            "title": "Không tin cậy"
-        },
         "unable_to_setup_keys_error": "Không thể thiết lập khóa",
         "verification": {
             "accepting": "Đang chấp nhận…",
@@ -1197,7 +1151,6 @@
         "experimental_description": "Muốn trải nghiệm? Thử các ý tưởng mới nhất còn đang được phát triển của chúng tôi. Các tính năng này chưa được hoàn thiện, chúng có thể không ổn định, có thể thay đổi, hay bị loại bỏ hoàn toàn. <a>Tìm hiểu thêm</a>.",
         "experimental_section": "Thử trước tính năng mới",
         "feature_wysiwyg_composer_description": "Dùng văn bản giàu tính chất thay cho định dạng Markdown ở thanh soạn tin nhắn.",
-        "group_calls": "Trải nghiệm gọi nhóm mới",
         "group_developer": "Nhà phát triển",
         "group_encryption": "Mã hóa",
         "group_experimental": "Thử nghiệm",
@@ -1211,7 +1164,6 @@
         "group_voip": "Âm thanh & Hình ảnh",
         "group_widgets": "Vật dụng",
         "hidebold": "Ẩn dấu chấm thông báo (chỉ hiển thị bộ đếm)",
-        "html_topic": "Hiện chủ đề phòng bằng HTML",
         "join_beta": "Tham gia phiên bản beta",
         "join_beta_reload": "Tham gia thử nghiệm sẽ tải lại %(brand)s.",
         "jump_to_date": "Nhảy đến ngày (thêm lệnh /jumptodate và nhảy đến ngày)",
@@ -1225,13 +1177,10 @@
         "msc3531_hide_messages_pending_moderation": "Cho phép điều phối viên ẩn các tin nhắn đang chờ duyệt.",
         "notification_settings": "Cài đặt thông báo mới",
         "notification_settings_beta_title": "Cài đặt thông báo",
-        "report_to_moderators": "Báo cáo cho điều phối viên",
-        "report_to_moderators_description": "Trong các phòng hỗ trợ điều phối, nút \"Báo cáo\" sẽ giúp bạn báo cáo lạm dụng cho điều phối viên của phòng.",
         "sliding_sync": "Chế độ đồng bộ tối ưu (Sync v3)",
         "sliding_sync_description": "Đang được phát triển tích cực, không thể vô hiệu.",
         "sliding_sync_disabled_notice": "Đăng xuất và đăng nhập lại để vô hiệu hóa",
         "sliding_sync_server_no_support": "Máy chủ của bạn không hoàn toàn hỗ trợ",
-        "under_active_development": "Đang được phát triển tích cực.",
         "video_rooms": "Phòng video",
         "video_rooms_a_new_way_to_chat": "Một cách mới để trò chuyện bằng thoại và video trong %(brand)s.",
         "video_rooms_always_on_voip_channels": "Các phòng video là các kênh VoIP luôn bật được nhúng trong một phòng ở %(brand)s.",
@@ -1283,9 +1232,6 @@
         "room_rejoin_warning": "Phòng này không công khai. Bạn sẽ không thể tham gia lại nếu không có lời mời.",
         "space_rejoin_warning": "space này không công khai. Bạn sẽ không thể tham gia lại nếu không có lời mời."
     },
-    "left_panel": {
-        "open_dial_pad": "Mở bàn phím quay số"
-    },
     "lightbox": {
         "rotate_left": "Xoay trái",
         "rotate_right": "Xoay phải",
@@ -1345,7 +1291,6 @@
         "mentions_and_keywords": "@đề cập & từ khóa",
         "mentions_and_keywords_description": "Chỉ nhận thông báo với các đề cập và từ khóa được thiết lập trong <a>cài đặt</a> của bạn",
         "mentions_keywords": "Đề cập & từ khóa",
-        "message_didnt_send": "Tin nhắn chưa gửi. Nhấn để biết thông tin.",
         "mute_description": "Bạn sẽ không nhận bất kỳ thông báo nào"
     },
     "notifier": {
@@ -1423,7 +1368,6 @@
     },
     "quick_settings": {
         "all_settings": "Tất cả cài đặt",
-        "metaspace_section": "Ghim vào sidebar",
         "sidebar_settings": "Thêm tùy chọn",
         "title": "Cài đặt nhanh"
     },
@@ -1439,20 +1383,9 @@
     },
     "report_content": {
         "description": "Báo cáo thông báo này sẽ gửi 'ID sự kiện' duy nhất của nó đến quản trị viên của máy chủ của bạn. Nếu tin nhắn trong phòng này được mã hóa, quản trị viên máy chủ của bạn sẽ không thể đọc nội dung tin nhắn hoặc xem bất kỳ tệp hoặc hình ảnh nào.",
-        "disagree": "Không đồng ý",
         "ignore_user": "Tảng lờ người dùng",
-        "illegal_content": "Nội dung bất hợp pháp",
         "missing_reason": "Vui lòng điền lý do bạn đang báo cáo.",
-        "nature": "Vui lòng chọn một bản chất và mô tả điều gì khiến thông báo này bị lạm dụng.",
-        "nature_disagreement": "Những gì người dùng này đang viết là sai.\nĐiều này sẽ được báo cáo tới các moderator của phòng.",
-        "nature_illegal": "Người dùng này đang hiển thị hành vi bất hợp pháp, ví dụ bằng cách doxing mọi người hoặc đe dọa bạo lực.\nĐiều này sẽ được báo cáo cho những người điều hành phòng có thể leo thang điều này cho các cơ quan pháp lý.",
-        "nature_other": "Bất kỳ lý do nào khác. Xin hãy mô tả vấn đề.\nĐiều này sẽ được báo cáo cho người điều hành phòng.",
-        "nature_spam": "Người dùng này đang spam phòng bằng quảng cáo, liên kết đến quảng cáo hoặc tuyên truyền.\nĐiều này sẽ được báo cáo cho người điều hành phòng.",
-        "other_label": "Khác",
-        "report_content_to_homeserver": "Báo cáo Nội dung cho Quản trị viên Máy chủ Trang chủ của Bạn",
-        "report_entire_room": "Báo cáo toàn bộ phòng",
-        "spam_or_propaganda": "Thư rác hoặc tuyên truyền",
-        "toxic_behaviour": "Hành vi độc hại"
+        "report_content_to_homeserver": "Báo cáo Nội dung cho Quản trị viên Máy chủ Trang chủ của Bạn"
     },
     "restore_key_backup_dialog": {
         "count_of_decryption_failures": "Không giải mã được phiên %(failedCount)s !",
@@ -1635,35 +1568,11 @@
         }
     },
     "room_list": {
-        "add_room_label": "Thêm phòng",
         "add_space_label": "Thêm space",
-        "breadcrumbs_empty": "Không có phòng nào được truy cập gần đây",
-        "breadcrumbs_label": "Các phòng đã ghé thăm gần đây",
         "failed_add_tag": "Không thêm được thẻ %(tagName)s vào phòng",
         "failed_remove_tag": "Không xóa được thẻ %(tagName)s khỏi phòng",
-        "home_menu_label": "Các tùy chọn Home",
-        "join_public_room_label": "Tham gia vào phòng công cộng",
-        "joining_rooms_status": {
-            "one": "Hiện đang tham gia %(count)s phòng",
-            "other": "Hiện đang tham gia %(count)s phòng"
-        },
         "notification_options": "Tùy chọn thông báo",
-        "redacting_messages_status": {
-            "one": "Hiện đang xóa tin nhắn ở %(count)s phòng",
-            "other": "Hiện đang xóa tin nhắn ở %(count)s phòng"
-        },
-        "show_less": "Hiện ít hơn",
-        "show_n_more": {
-            "one": "Hiển thị %(count)s thêm",
-            "other": "Hiển thị %(count)s thêm"
-        },
-        "show_previews": "Hiển thị bản xem trước của tin nhắn",
-        "sort_by": "Sắp xếp theo",
-        "sort_by_activity": "Hoạt động",
-        "sort_by_alphabet": "AZ",
-        "sort_unread_first": "Hiển thị các phòng có tin nhắn chưa đọc trước",
-        "sublist_options": "Liệt kê các tùy chọn",
-        "suggested_rooms_heading": "Phòng được đề xuất"
+        "show_less": "Hiện ít hơn"
     },
     "room_settings": {
         "access": {
@@ -2185,7 +2094,6 @@
         "send_read_receipts_unsupported": "Máy chủ của bạn không hỗ trợ tắt gửi thông báo đã học.",
         "send_typing_notifications": "Gửi thông báo đang gõ tin nhắn",
         "sessions": {
-            "browser": "Trình duyệt",
             "confirm_sign_out": {
                 "one": "Xác nhận đăng xuất khỏi thiết bị này",
                 "other": "Xác nhận đăng xuất khỏi các thiết bị này"
@@ -2232,7 +2140,6 @@
             "no_sessions": "Không thấy phiên nào.",
             "no_unverified_sessions": "Không thấy phiên chưa xác thực nào.",
             "no_verified_sessions": "Không thấy phiên được xác thực nào.",
-            "os": "Hệ điều hành",
             "other_sessions_heading": "Các phiên khác",
             "push_heading": "Thông báo đẩy",
             "push_subheading": "Nhận thông báo đẩy trong phiên này.",
@@ -2289,13 +2196,11 @@
         "show_stickers_button": "Hiển thị nút sticker cảm xúc",
         "show_typing_notifications": "Hiển thị thông báo \"đang gõ\"",
         "sidebar": {
-            "metaspaces_favourites_description": "Nhóm tất cả các phòng và người mà bạn yêu thích ở một nơi.",
             "metaspaces_home_all_rooms": "Hiển thị tất cả các phòng",
             "metaspaces_home_all_rooms_description": "Hiển thị tất cả các phòng trong Home, ngay cả nếu chúng ở trong space.",
             "metaspaces_home_description": "Home rất hữu ích để có cái nhìn tổng quan về mọi thứ.",
             "metaspaces_orphans": "Các phòng bên ngoài một space",
             "metaspaces_orphans_description": "Nhóm tất cả các phòng của bạn mà không phải là một phần của không gian ở một nơi.",
-            "metaspaces_people_description": "Đưa tất cả mọi người vào một chỗ.",
             "metaspaces_subsection": "Space để hiển thị",
             "title": "Thanh bên"
         },
@@ -2311,7 +2216,6 @@
             "audio_output": "Đầu ra âm thanh",
             "audio_output_empty": "Không phát hiện thấy đầu ra âm thanh",
             "auto_gain_control": "Tự động chiếm quyền điều khiển",
-            "connection_section": "Kết nối",
             "echo_cancellation": "Loại bỏ tiếng vang",
             "enable_fallback_ice_server": "Cho phép máy chủ hỗ trợ cuộc gọi dự phòng (%(server)s)",
             "enable_fallback_ice_server_description": "Chỉ áp dụng nếu máy chủ nhà của bạn không cung cấp. Địa chỉ Internet (IP) của bạn có thể được chia sẻ trong một cuộc gọi.",
@@ -2482,12 +2386,6 @@
     "space_settings": {
         "title": "Cài đặt - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "Bạn không có quyền thêm phòng vào space này",
-        "error_no_permission_add_space": "Bạn không có quyền để thêm space khác vào trong space này",
-        "error_no_permission_create_room": "Bạn không có quyền tạo phòng mới trong space này",
-        "error_no_permission_invite": "Bạn không có quyền mời mọi người vào space này"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "Nhập tên của một máy chủ mới mà bạn muốn khám phá.",
@@ -2662,9 +2560,7 @@
         "m.poll.start": "%(senderName)s vừa bắt đầu một cuộc bình chọn - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s đã thay đổi avatar phòng.",
-            "changed_img": "%(senderDisplayName)s đã thay đổi hình đại diện của phòng thành <img />",
-            "lightbox_title": "%(senderDisplayName)s đã thay đổi hình đại diện cho %(roomName)s",
-            "removed": "%(senderDisplayName)s đã xóa hình đại diện của phòng."
+            "lightbox_title": "%(senderDisplayName)s đã thay đổi hình đại diện cho %(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3209,13 +3105,7 @@
         "close_to_view_right_panel": "Đóng widget này để xem nó trong bảng điều khiển này",
         "context_menu": {
             "delete": "Xóa Widget",
-            "delete_warning": "Xóa tiện ích widget sẽ xóa tiện ích widget đó cho tất cả người dùng khác trong phòng này. Bạn có chắc chắn muốn xóa tiện ích widget này không?",
-            "move_left": "Di chuyển sang trái",
-            "move_right": "Đi sang phải",
-            "remove": "Xóa cho mọi người",
-            "revoke": "Thu hồi quyền",
-            "screenshot": "Chụp ảnh",
-            "start_audio_stream": "Bắt đầu luồng âm thanh"
+            "delete_warning": "Xóa tiện ích widget sẽ xóa tiện ích widget đó cho tất cả người dùng khác trong phòng này. Bạn có chắc chắn muốn xóa tiện ích widget này không?"
         },
         "cookie_warning": "Tiện ích này có thể sử dụng cookie.",
         "error_hangup_description": "Bạn bị mất kết nối đến cuộc gọi. (Lỗi: %(message)s)",
diff --git a/apps/web/src/i18n/strings/zh_Hans.json b/apps/web/src/i18n/strings/zh_Hans.json
index 4ce0d263e8..a7b26a9315 100644
--- a/apps/web/src/i18n/strings/zh_Hans.json
+++ b/apps/web/src/i18n/strings/zh_Hans.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Emoji 选择器",
         "jump_first_invite": "跳转到首个邀请",
         "message_composer": "消息编辑器",
         "n_unread_messages": {
@@ -11,8 +10,6 @@
             "one": "1 个未读提及",
             "other": "%(count)s 个包含提及在内的未读消息"
         },
-        "recent_rooms": "最近的房间",
-        "room_name": "房间 %(name)s",
         "room_status_bar": "房间状态栏",
         "seek_bar_label": "音频搜索栏",
         "unread_messages": "未读消息。"
@@ -22,7 +19,6 @@
         "accept": "接受",
         "add": "添加",
         "add_existing_room": "添加现有房间",
-        "add_people": "添加人员",
         "apply": "应用",
         "approve": "批准",
         "ask_to_join": "申请加入",
@@ -57,7 +53,6 @@
         "enter_fullscreen": "进入全屏",
         "exit_fullscreeen": "退出全屏",
         "expand": "展开",
-        "explore_public_rooms": "浏览公共房间",
         "explore_rooms": "查找房间",
         "export": "导出",
         "forward": "转发",
@@ -69,8 +64,6 @@
         "ignore": "忽略",
         "import": "导入",
         "invite": "邀请",
-        "invite_to_space": "邀请到空间",
-        "invites_list": "邀请",
         "join": "加入",
         "learn_more": "了解更多",
         "leave": "离开",
@@ -97,7 +90,6 @@
         "rename": "重命名",
         "reply": "回复",
         "reply_in_thread": "在消息列中回复",
-        "report_content": "举报内容",
         "report_room": "举报房间",
         "resend": "重新发送",
         "reset": "重置",
@@ -117,8 +109,6 @@
         "sign_out": "移除此设备",
         "skip": "跳过",
         "start": "开始",
-        "start_chat": "开始聊天",
-        "start_new_chat": "开始新聊天",
         "stop": "停止",
         "submit": "提交",
         "subscribe": "订阅",
@@ -219,11 +209,9 @@
         "log_in_new_account": "<a>登录</a>到你的新账户。",
         "logout_dialog": {
             "description": "你确定要移除此设备？",
-            "megolm_export": "手动导出密钥",
-            "setup_key_backup_title": "你将失去加密消息的访问权",
-            "setup_secure_backup_description_1": "加密消息采用端到端加密技术确保安全。只有你与收件人拥有读取这些消息的密钥。",
-            "setup_secure_backup_description_2": "当你移除此设备时，这些密钥将从此设备中删除，这意味着你将无法读取加密消息，除非你在其他设备上拥有这些密钥，或者将它们备份到服务器。",
-            "skip_key_backup": "我要丢弃加密消息"
+            "setup_key_backup_title": "你即将失去加密聊天的访问权",
+            "setup_secure_backup_description": "这是你的唯一设备。一旦移除，下次登录时你需要使用恢复密钥验证数字身份并恢复加密聊天。",
+            "skip_key_backup": "仍要移除此设备"
         },
         "misconfigured_body": "请 %(brand)s 的管理员检查<a>你的配置</a>中是否存在错误或重复的条目。",
         "misconfigured_title": "你的 %(brand)s 配置错误",
@@ -249,7 +237,9 @@
             "check_code_heading": "输入其它设备上显示的数字",
             "check_code_input_label": "2 位数代码",
             "check_code_mismatch": "数字不匹配",
+            "choose_desktop_computer": "选择“%(desktopComputer)s”",
             "completing_setup": "完成新设备的设置",
+            "desktop_computer": "台式计算机",
             "error_etag_missing": "发生意外错误。这可能是由于浏览器扩展、代理服务器或服务器配置错误造成的。",
             "error_expired": "登录已过期。请重试。",
             "error_expired_title": "登录未及时完成",
@@ -270,16 +260,22 @@
             "error_user_declined": "你或账户提供者拒绝了登录请求。",
             "error_user_declined_title": "登录被拒绝",
             "follow_remaining_instructions": "按剩余说明操作",
+            "open_element_mobile_device": "在移动设备上打开 %(brand)s",
             "open_element_other_device": "在你的其它设备上打开 %(brand)s",
             "point_the_camera": "扫描此处显示的二维码",
-            "scan_code_instruction": "使用其它设备扫描二维码",
+            "ready_to_scan": "准备进行扫描",
+            "scan_code_instruction": "扫描二维码",
+            "scan_code_instruction_reciprocate": "使用另一台设备扫描二维码",
             "scan_qr_code": "使用二维码登录",
-            "security_code": "安全代码",
-            "security_code_prompt": "如有要求，请在其它设备上输入以下代码。",
+            "security_code_prompt": "你的账户提供者可能会要求你提供以下代码以验证登录。",
+            "security_code_title": "你的验证码",
             "select_qr_code": "选择“%(scanQRCode)s”",
+            "select_ready_to_scan": "选择“%(readyToScan)s”并扫描此处显示的二维码",
+            "start_over": "重新开始",
+            "tap_avatar_link_new_device": "点击头像并选择“%(linkNewDevice)s”",
             "unsupported_explainer": "你的账户提供者不支持通过二维码登录到新设备。",
             "unsupported_heading": "二维码不受支持",
-            "waiting_for_device": "等待设备登录"
+            "waiting_for_device": "正在等待其它设备"
         },
         "register_action": "创建账户",
         "registration": {
@@ -289,6 +285,8 @@
         },
         "registration_disabled": "此主服务器已禁用注册。",
         "registration_msisdn_field_required_invalid": "输入电话号码（在此主服务器为必需）",
+        "registration_rate_limited": "短时间内尝试次数过多。请稍后再试。",
+        "registration_rate_limited_with_time": "短时间内尝试次数过多。请于 %(timeout)s 秒后重试。",
         "registration_successful": "注册成功",
         "registration_username_in_use": "该用户名已被使用。请尝试其它用户名，如果是你本人，请在下方登录。",
         "registration_username_unable_check": "无法检查用户名是否被占用。稍后再试。",
@@ -338,8 +336,10 @@
         "sign_in_description": "使用你的账户以继续。",
         "sign_in_instead": "其它登录方式",
         "sign_in_instead_prompt": "已有账户？<a>登录</a>",
+        "sign_in_manually": "手动登录",
         "sign_in_or_register": "登录或创建账户",
         "sign_in_or_register_description": "使用你的现有账户或创建一个新账户继续。",
+        "sign_in_with_qr": "使用二维码登录",
         "sign_in_with_sso": "以单点模式登录",
         "signing_in": "正在登录…",
         "soft_logout": {
@@ -474,13 +474,13 @@
         "description": "描述",
         "deselect_all": "取消全选",
         "device": "设备",
+        "disabled_by_homeserver": "已被主服务器禁用",
         "edited": "已编辑",
         "email_address": "邮件地址",
         "emoji": "表情符号",
         "encrypted": "已加密",
         "error": "错误",
         "faq": "常见问答集",
-        "favourites": "收藏",
         "feedback": "反馈",
         "filter_results": "筛选结果",
         "forward_message": "转发消息",
@@ -488,7 +488,6 @@
         "go_to_settings": "转到设置",
         "guest": "访客",
         "help": "帮助",
-        "historical": "历史",
         "home": "主页",
         "homeserver": "主服务器",
         "identity_server": "身份服务器",
@@ -496,17 +495,16 @@
         "integration_manager": "集成管理器",
         "joined": "已加入",
         "labs": "实验室",
+        "legacy_voice_and_video_settings": "Matrix 一对一通话（旧版）",
         "legal": "法律",
         "light": "浅色",
         "loading": "正在载入…",
         "location": "位置",
-        "low_priority": "低优先级",
         "matrix": "Matrix",
         "message": "消息",
         "message_layout": "消息布局",
         "message_timestamp_invalid": "无效时间戳",
         "microphone": "麦克风",
-        "model": "模型",
         "moderation_and_safety": "尺度与安全",
         "modern": "现代",
         "mute": "静默",
@@ -566,7 +564,6 @@
         "success": "成功",
         "suggestions": "建议",
         "support": "支持",
-        "system_alerts": "系统警报",
         "theme": "主题",
         "thread": "消息列",
         "threads": "消息列",
@@ -583,7 +580,6 @@
         "username": "用户名",
         "verified": "已验证",
         "version": "版本",
-        "video": "视频",
         "video_room": "视频房间",
         "view_message": "查看消息",
         "warning": "警告"
@@ -681,7 +677,6 @@
     "create_section_dialog": {
         "create_section": "创建区域",
         "description": "区域仅对你可见",
-        "edit_section": "编辑区域",
         "label": "区域名称",
         "title": "创建区域",
         "title_edition": "编辑区域"
@@ -890,12 +885,13 @@
         "thread_root_id": "消息列根 ID：%(threadRootId)s",
         "threads_timeline": "消息列时间线",
         "title": "开发者工具",
-        "toggle_event": "切换事件",
         "toolbox": "工具箱",
         "use_at_own_risk": "此 UI 不检查值的数据类型。需自行承担使用风险。",
         "user_avatar": "头像：%(avatar)s",
         "user_displayname": "显示名称：%(displayname)s",
         "user_id": "用户 ID：%(userId)s",
+        "user_identity": "密码学身份",
+        "user_identity_unknown": "未知",
         "user_no_avatar": "头像：<i>无</i>",
         "user_no_displayname": "显示名称：<i>无</i>",
         "user_read_up_to": "用户阅读到：",
@@ -925,22 +921,6 @@
     },
     "dialog_close_label": "关闭对话框",
     "download_completed": "下载完成",
-    "emoji": {
-        "categories": "类别",
-        "category_activities": "节假日",
-        "category_animals_nature": "动物与自然",
-        "category_flags": "旗帜",
-        "category_food_drink": "饮食",
-        "category_frequently_used": "经常使用",
-        "category_objects": "日常物品",
-        "category_smileys_people": "人与表情",
-        "category_symbols": "符号",
-        "category_travel_places": "文旅景点",
-        "quick_reactions": "快速反应"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "取消搜索"
-    },
     "empty_room": "空房间",
     "empty_room_was_name": "空房间（曾是 %(oldName)s）",
     "encryption": {
@@ -978,7 +958,6 @@
         "import_invalid_passphrase": "身份验证检查失败：密码不正确？",
         "key_storage_out_of_sync": "你的密钥存储不同步。",
         "key_storage_out_of_sync_description": "请确认恢复密钥，以保持对密钥存储与消息历史记录的访问权。",
-        "message_shared_by": "由于此消息在发送时你不位于此房间，%(displayName)s（%(userId)s）共享了此消息。",
         "messages_not_secure": {
             "cause_1": "你的主服务器版本太旧，不支持所需的最低 API 版本。请联系你的服务器所有者或升级你的服务器。",
             "cause_2": "你正在验证的用户所连接的主服务器",
@@ -1004,19 +983,8 @@
         "set_up_recovery": "备份聊天",
         "set_up_recovery_toast_description": "你的聊天已被端到端加密自动备份。如果你无法访问所有设备，则需要使用恢复密钥并保留数字身份。",
         "set_up_toast_title": "设置安全备份",
-        "setup_secure_backup": {
-            "explainer": "移除此设备前备份密钥以防止丢失。"
-        },
         "turn_on_key_storage": "启用密钥存储",
         "turn_on_key_storage_description": "这将允许你在新设备上查看聊天历史， 这是备份聊天与数字身份所必需的。",
-        "udd": {
-            "interactive_verification_button": "使用 Emoji 交互式验证",
-            "other_ask_verify_text": "请该用户验证其会话，或在下面手动验证。",
-            "other_new_session_text": "%(name)s（%(userId)s）在未验证的情况下登录了一个新会话：",
-            "own_ask_verify_text": "请使用以下选项之一验证你的其它会话。",
-            "own_new_session_text": "你在未验证的情况下登录了新会话：",
-            "title": "未被信任"
-        },
         "unable_to_setup_keys_error": "无法设置密钥",
         "verification": {
             "accepting": "正在接受…",
@@ -1186,14 +1154,14 @@
             "you": "你已加入通话"
         },
         "m.call.hangup": {
-            "user": "%(senderName)s 结束了通话",
-            "you": "你结束了通话"
+            "user": "%(senderName)s 已结束通话",
+            "you": "你已结束通话"
         },
         "m.call.invite": {
             "dm_receive": "%(senderName)s 正在通话",
             "dm_send": "等待接听",
-            "user": "%(senderName)s 开始了通话",
-            "you": "你开始了通话"
+            "user": "%(senderName)s 已开始通话",
+            "you": "你已开始通话"
         },
         "m.emote": "* %(senderName)s %(emote)s",
         "m.reaction": {
@@ -1524,6 +1492,7 @@
         "bridge_state_manager": "此桥接器由 <user /> 管理。",
         "bridge_state_workspace": "工作区: <networkLink/>",
         "click_for_info": "点击显示更多信息",
+        "config_only": "只能通过文件 config.json 启用。",
         "currently_experimental": "当前为实验性。",
         "custom_themes": "支持添加自定义主题",
         "dynamic_room_predecessors": "动态房间前身",
@@ -1537,13 +1506,17 @@
         "experimental_section": "早期预览",
         "extended_profiles_msc_support": "需要服务器支持 MSC4133",
         "feature_disable_call_per_sender_encryption": "为 Element Call 禁用“按每个发送者加密”",
+        "feature_retention": {
+            "description": "当消息到达配置的保留期限时自动从房间移除该消息。当前仅支持为“已读消息”设置。",
+            "disabled_sliding_sync": "当滑动同步启用时无法启用保留期。",
+            "display_name": "消息保留期"
+        },
         "feature_user_status": {
             "description": "启用以查看并设置当前状态。",
             "display_name": "用户状态",
             "required_msc_support": "需要 MSC4429（面向旧版同步模式的配置文件更新）"
         },
         "feature_wysiwyg_composer_description": "在消息编辑器中使用富文本取代 Markdown。",
-        "group_calls": "新的群呼体验",
         "group_developer": "开发者",
         "group_encryption": "加密",
         "group_experimental": "实验性",
@@ -1558,7 +1531,6 @@
         "group_voip": "语音与视频",
         "group_widgets": "小部件",
         "hidebold": "隐藏通知圆点（仅显示计数器徽章）",
-        "html_topic": "以 HTML 格式显示房间主题",
         "join_beta": "参与 Beta 测试",
         "join_beta_reload": "参与 Beta 测试将重载 %(brand)s。",
         "jump_to_date": "跳转到日期（在编辑器中输入指令“/jumptodate”可以跳转到当天的消息开头）",
@@ -1566,26 +1538,24 @@
         "latex_maths": "在消息中渲染 LaTeX 数学公式",
         "leave_beta": "退出 Beta 测试",
         "leave_beta_reload": "退出 Beta 测试将重载 %(brand)s。",
-        "location_share_live": "分享实时位置",
+        "location_share_live": "实时位置共享",
         "location_share_live_description": "临时实现。位置将持续保留于房间历史。",
+        "login_with_qr": "使用二维码登录",
         "mjolnir": "忽略人员的新方式",
         "msc3531_hide_messages_pending_moderation": "允许协管员隐藏等待审核的消息",
-        "new_room_list": "启用新的房间列表",
         "notification_settings": "新的通知设置",
         "notification_settings_beta_caption": "介绍一种更简单的方法来更改通知设置。就像你喜欢的那样定制 %(brand)s。",
         "notification_settings_beta_title": "通知设置",
         "notifications": "在房间标题处启用通知面板",
         "render_reaction_images": "在反应中渲染自定义图像",
         "render_reaction_images_description": "有时被称为“自定义 Emoji”。",
-        "report_to_moderators": "向协管员举报",
-        "report_to_moderators_description": "在支持审核的房间中，“举报”按钮可以让你向房间协管员举报滥用行为。",
-        "room_list_sections": "房间列表区域",
         "sliding_sync": "滑动同步模式",
         "sliding_sync_description": "正在处于开发中，并且一旦启用就无法禁用。当前与 Element Call 不兼容。",
         "sliding_sync_disabled_notice": "重新登录以禁用",
         "sliding_sync_server_no_support": "服务器缺少支持",
-        "under_active_development": "正在处于开发中。",
         "unrealiable_e2e": "在加密房间中不可靠",
+        "url_preview_bundle": "URL 预览组件（MSC4095）",
+        "url_preview_bundle_description": "在消息的一侧随消息内容一并发送 URL 预览",
         "video_rooms": "视频房间",
         "video_rooms_a_new_way_to_chat": "在 %(brand)s 中语音与视频聊天的新方式。",
         "video_rooms_always_on_voip_channels": "视频房间是嵌入到 %(brand)s 并始终在线的 VoIP 渠道。",
@@ -1640,9 +1610,6 @@
         "room_rejoin_warning": "此房间非公共房间。你无法在未被邀请的情况下重新加入。",
         "space_rejoin_warning": "此空间非公开。未经邀请，你将无法重新加入。"
     },
-    "left_panel": {
-        "open_dial_pad": "打开拨号键盘"
-    },
     "lightbox": {
         "rotate_left": "向左旋转",
         "rotate_right": "向右旋转",
@@ -1738,10 +1705,9 @@
         "level_notification": "通知",
         "level_unsent": "未发送",
         "mark_all_read": "全部设为已读",
-        "mentions_and_keywords": "提及与关键词",
-        "mentions_and_keywords_description": "仅按<a>设置</a>中的配置获取提及与关键词",
+        "mentions_and_keywords": "仅限提及（@）与回复",
+        "mentions_and_keywords_description": "仅为在<a>设置</a>中针对提及与关键词的配置获取通知",
         "mentions_keywords": "提及与关键词",
-        "message_didnt_send": "消息未发送。点击以获取信息。",
         "mute_description": "你不会收到任何通知"
     },
     "notifier": {
@@ -1839,7 +1805,6 @@
     },
     "quick_settings": {
         "all_settings": "所有设置",
-        "metaspace_section": "钉在边栏",
         "sidebar_settings": "更多选项",
         "title": "快速设置"
     },
@@ -1863,25 +1828,10 @@
     },
     "report_content": {
         "description": "举报此消息会将其唯一的“事件 ID”发送给服务器管理员。如果此房间中的消息已加密，则服务器管理员将无法查看消息文本、任何文件或图像。",
-        "disagree": "不同意",
-        "error_create_room_moderation_bot": "无法使用协管机器人创建房间",
         "hide_messages_from_user": "如果你想隐藏此用户当前及未来的所有消息，请选中此项。",
         "ignore_user": "忽略用户",
-        "illegal_content": "非法内容",
         "missing_reason": "请填写举报理由。",
-        "nature": "请选择一种性质，并描述该消息为何具有滥用性。",
-        "nature_disagreement": "此用户输入的内容有误。\n此问题将报告给房间协管员。",
-        "nature_illegal": "此用户存在违法行为，例如人肉搜索或威胁使用暴力。\n我们会将此情况报告给房间管理员，管理员可能会将此问题上报给法律部门。",
-        "nature_nonstandard_admin": "此房间专门用于非法或有害内容，或者管理员未能审核非法或有害内容。\n此问题将报告给 %(homeserver)s 的管理员。",
-        "nature_nonstandard_admin_encrypted": "此房间专门发布非法或有害内容，或者管理员未能审核非法或有害内容。\n此问题将报告给 %(homeserver)s 的管理员。管理员将无法阅读此房间的加密内容。",
-        "nature_other": "任何其它原因。请描述问题。\n这将报告给房间管理员。",
-        "nature_spam": "此用户正在向房间发送垃圾广告、广告链接或推广内容。\n我们将向房间管理员报告此问题。",
-        "nature_toxic": "此用户表现不良，例如辱骂其他用户、在家庭友好型房间分享仅限成人的内容或以其它方式违反此房间的规则。\n将向房间管理员举报。",
-        "other_label": "其它",
-        "report_content_to_homeserver": "向服务器管理员举报此内容",
-        "report_entire_room": "举报整个房间",
-        "spam_or_propaganda": "垃圾内容或广告",
-        "toxic_behaviour": "有害行为"
+        "report_content_to_homeserver": "向服务器管理员举报此内容"
     },
     "report_room": {
         "description": "向服务器管理员举报此房间。如果消息已被加密，则管理员无法看到它们。",
@@ -1984,7 +1934,7 @@
         "3pid_invite_error_title_room": "你对 %(roomName)s 的邀请出现问题",
         "3pid_invite_no_is_subtitle": "使用“设置”中的身份服务器，可直接在 %(brand)s 中接收邀请。",
         "banned_by": "你已被 %(memberName)s 封禁",
-        "banned_from_room_by": "你已被 %(memberName)s 禁止进入 %(roomName)s",
+        "banned_from_room_by": "你在 %(roomName)s 中已被 %(memberName)s 封禁",
         "context_menu": {
             "copy_link": "复制房间链接",
             "favourite": "收藏",
@@ -2157,46 +2107,21 @@
         "waiting_for_join_title": "等待用户加入 %(brand)s"
     },
     "room_list": {
-        "add_room_label": "添加房间",
         "add_space_label": "添加空间",
-        "breadcrumbs_empty": "暂无最近访问的房间",
-        "breadcrumbs_label": "最近访问的房间",
         "failed_add_tag": "为房间添加标签 %(tagName)s 失败",
         "failed_remove_tag": "从房间移除标签 %(tagName)s 失败",
         "failed_set_dm_tag": "私聊标签设置失败",
-        "home_menu_label": "主页选项",
-        "join_public_room_label": "加入公共房间",
-        "joining_rooms_status": {
-            "one": "当前正在加入 %(count)s 个房间",
-            "other": "当前加入了 %(count)s 个房间"
-        },
         "list_title": "房间列表",
         "more_options": {
             "leave_room": "离开房间"
         },
         "notification_options": "通知选项",
-        "redacting_messages_status": {
-            "one": "正在移除房间中的 %(count)s 个消息",
-            "other": "正在移除房间中的 %(count)s 个消息"
-        },
         "section": {
             "chats": "聊天",
             "favourites": "收藏",
             "low_priority": "低优先级"
         },
-        "show_less": "显示更少",
-        "show_n_more": {
-            "one": "显示剩余 %(count)s 个",
-            "other": "显示剩余 %(count)s 个"
-        },
-        "show_previews": "显示消息预览",
-        "sort_by": "排序",
-        "sort_by_activity": "活动",
-        "sort_by_alphabet": "字典顺序",
-        "sort_unread_first": "优先显示包含未读消息的房间",
-        "space_menu_label": "%(spaceName)s 菜单",
-        "sublist_options": "列表选项",
-        "suggested_rooms_heading": "建议的房间"
+        "show_less": "显示更少"
     },
     "room_settings": {
         "access": {
@@ -2310,7 +2235,7 @@
             "add_privileged_user_heading": "添加特权用户",
             "ban": "封禁用户",
             "ban_reason": "理由",
-            "banned_by": "被 %(displayName)s 封禁",
+            "banned_by": "已被 %(displayName)s 封禁",
             "banned_users_section": "已被封禁的用户",
             "error_changing_pl_description": "更改用户权力值时出错。请确保你拥有足够的权限并重试。",
             "error_changing_pl_reqs_description": "更改房间权力值要求时出错。请确保你拥有足够的权限并重试。",
@@ -2490,7 +2415,8 @@
         "warning_kind_files": "此版本的 %(brand)s 不支持查看某些加密文件",
         "warning_kind_files_app": "使用<a>桌面 App</a> 查看所有加密文件",
         "warning_kind_search": "此版本的 %(brand)s 不支持搜索加密消息",
-        "warning_kind_search_app": "使用<a>桌面 App</a> 搜索加密消息"
+        "warning_kind_search_app": "使用<a>桌面 App</a> 搜索加密消息",
+        "warning_kind_search_partial": "搜索结果可能不完整，因为索引仍在建立中。"
     },
     "setting": {
         "help_about": {
@@ -2653,7 +2579,7 @@
             "deactivate_confirm_content_5": "你将被从身份服务器中移除：你的好友将无法再通过你的邮件地址或电话号码找到你。",
             "deactivate_confirm_content_6": "你的旧消息仍然会被接收者看到，就像你过去发送的邮件一样。是否对以后加入房间的人员隐藏你发送的消息？",
             "deactivate_confirm_continue": "确认停用账户",
-            "deactivate_confirm_erase_label": "隐藏我的信息不被新加入者看到",
+            "deactivate_confirm_erase_label": "对新加入者隐藏我的消息",
             "deactivate_section": "停用账户",
             "deactivate_warning": "停用账户是一项永久性操作，请务必小心！",
             "discovery_email_empty": "添加邮件后，将出现发现选项。",
@@ -2821,13 +2747,13 @@
             "room_activity": "新产生的房间活动、升级与状态消息",
             "rule_call": "通话邀请",
             "rule_contains_display_name": "包含我的显示名称的消息",
-            "rule_contains_user_name": "包含我的用户名的消息",
+            "rule_contains_user_name": "提及（@）与回复",
             "rule_encrypted": "群聊中的加密消息",
             "rule_encrypted_room_one_to_one": "一对一聊天中的加密消息",
             "rule_invite_for_me": "当我受邀到房间",
             "rule_message": "群聊中的消息",
             "rule_room_one_to_one": "一对一聊天中的消息",
-            "rule_roomnotif": "包含 @room 的消息",
+            "rule_roomnotif": "包含 @room 的提及",
             "rule_suppress_notices": "由机器人发送的消息",
             "rule_tombstone": "当房间升级时。",
             "show_message_desktop_notification": "在桌面通知中显示消息内容",
@@ -2901,14 +2827,13 @@
             "message_search_unsupported_web": "%(brand)s 在 Web 浏览器中运行时无法安全地在本地缓存加密消息。请使用 <desktopLink>%(brand)s Desktop</desktopLink> 使加密消息出现在搜索结果中。",
             "record_session_details": "在会话管理器中记录客户端名称、版本及 URL 以更易于识别",
             "send_analytics": "发送分析数据",
-            "strict_encryption": "仅向已验证用户发送信息"
+            "strict_encryption": "仅向已验证用户发送消息"
         },
         "send_read_receipts": "发送已读回执",
         "send_read_receipts_unsupported": "你的服务器不支持禁用发送已读回执。",
         "send_typing_notifications": "发送键入通知",
         "sessions": {
             "best_security_note": "为了最佳的安全性请验证此会话，并移除任何你不认识或不再使用的会话。",
-            "browser": "浏览器",
             "confirm_sign_out": {
                 "one": "确认移除此设备",
                 "other": "确认移除这些设备"
@@ -2958,7 +2883,6 @@
             "no_sessions": "未找到会话。",
             "no_unverified_sessions": "未找到未验证的会话。",
             "no_verified_sessions": "未找到已验证的会话。",
-            "os": "操作系统",
             "other_sessions_heading": "其它会话",
             "push_heading": "推送通知",
             "push_subheading": "允许此会话接收通知推送",
@@ -3014,18 +2938,17 @@
         "show_nsfw_content": "显示 NSFW 内容",
         "show_read_receipts": "显示其他用户的已读回执",
         "show_redaction_placeholder": "为已被移除的消息显示占位符",
+        "show_sections": "显示区域",
         "show_stickers_button": "显示贴纸按钮",
         "show_typing_notifications": "显示用户的键入通知",
         "showbold": "在房间列表上显示所有活动（用于未读消息的圆点与数字）",
         "sidebar": {
             "dialog_title": "<strong>设置：</strong>边栏",
-            "metaspaces_favourites_description": "集中所有设为收藏的房间与人员分组在一处。",
             "metaspaces_home_all_rooms": "显示所有房间",
             "metaspaces_home_all_rooms_description": "在主页显示所有房间，即使它们位于不同的空间。",
             "metaspaces_home_description": "主页有助于概览所有对话。",
             "metaspaces_orphans": "空间外的房间",
             "metaspaces_orphans_description": "集中所有不属于任何空间的房间在一处。",
-            "metaspaces_people_description": "集中所有人员在一处。",
             "metaspaces_subsection": "要显示的空间",
             "metaspaces_video_rooms": "视频房间与会议",
             "metaspaces_video_rooms_description": "集中所有私有视频房间与会议在一处。",
@@ -3052,21 +2975,25 @@
             "audio_output": "音频输出",
             "audio_output_empty": "未检测到音频输出",
             "auto_gain_control": "自动增益控制",
-            "connection_section": "连接",
             "dialog_title": "<strong>设置：</strong>语音与视频",
             "echo_cancellation": "回声消除",
             "echo_cancellation_description": "在通话期间移除回声。此设置亦将应用于 Element Call。",
             "enable_fallback_ice_server": "允许备选的通话辅助服务器",
             "enable_fallback_ice_server_description": "仅用于你所在的主服务器不提供时。你的 IP 地址会在通话期间被分享。",
+            "enable_legacy_calls": "启用旧版语音视频通话",
+            "enable_legacy_calls_description": "适用于 Jitsi 与一对一 WebRTC 通话",
             "mirror_local_feed": "镜像本地视频源",
-            "missing_permissions_prompt": "缺少媒体权限，点击按钮以请求。",
+            "missing_permissions_prompt": "要参与通话，请为 %(brand)s 授予音视频设备的访问权。",
             "noise_suppression": "降噪",
             "noise_suppression_description": "在通话期间降低背景噪音。此设置亦将应用于 Element Call。",
-            "request_permissions": "请求媒体权限",
+            "permissions": "允许访问麦克风和摄像头",
+            "request_permissions": "请求",
             "title": "语音与视频",
             "video_input_empty": "未检测到摄像头",
             "video_section": "视频设置",
             "voice_agc": "自动调整麦克风音量",
+            "voice_input_description": "此处的音频输入配置用于语音消息与通话（旧版与一对一）。",
+            "voice_input_section": "音频输入",
             "voice_processing": "语音处理",
             "voice_section": "语音设置"
         },
@@ -3127,7 +3054,7 @@
         "manual_device_verification_confirm_description": "这将允许其它设备以你的身份发送和接收消息。如果有人告诉你在此处粘贴内容，你很可能被诈骗！你确定要验证此设备？",
         "manual_device_verification_confirm_title": "警告：手动设备验证",
         "me": "显示操作",
-        "msg": "向指定用户发送信息",
+        "msg": "向指定用户发送消息",
         "myavatar": "更改个人资料图像（应用于所有房间）",
         "myroomavatar": "仅更改我在当前房间内的个人资料图像",
         "myroomnick": "仅更改我在当前房间内的显示名称",
@@ -3245,12 +3172,6 @@
     "space_settings": {
         "title": "设置：%(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "你无权在此空间添加房间",
-        "error_no_permission_add_space": "你无权在此空间中添加空间",
-        "error_no_permission_create_room": "你无权在此空间创建新房间",
-        "error_no_permission_invite": "你无权邀请人员访问此空间"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "输入要浏览的新服务器名称。",
@@ -3377,7 +3298,6 @@
         "download_action_downloading": "下载中",
         "download_failed": "下载失败",
         "download_failed_description": "下载此文件时出错",
-        "e2e_state": "端到端加密状态",
         "edits": {
             "tooltip_label": "编辑于 %(date)s，点击查看编辑历史。",
             "tooltip_sub": "点击查看编辑历史",
@@ -3414,7 +3334,7 @@
         "m.call.invite": {
             "answered_elsewhere": "已在别处接听",
             "call_back_prompt": "回拨",
-            "declined": "来电被拒接",
+            "declined": "通话已被拒接",
             "failed_connect_media": "无法连接媒体",
             "failed_connection": "连接失败",
             "failed_opponent_media": "其设备无法开启摄像头或麦克风",
@@ -3454,14 +3374,12 @@
             }
         },
         "m.poll.end": {
-            "sender_ended": "%(senderName)s 结束了投票"
+            "sender_ended": "%(senderName)s 已结束投票"
         },
         "m.poll.start": "%(senderName)s 发起投票： %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s 已更改房间头像。",
-            "changed_img": "%(senderDisplayName)s 已将房间头像更改为 <img/>",
-            "lightbox_title": "%(senderDisplayName)s 已更改房间 %(roomName)s 中的头像",
-            "removed": "%(senderDisplayName)s 已移除房间头像。"
+            "lightbox_title": "%(senderDisplayName)s 已更改房间 %(roomName)s 中的头像"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3509,8 +3427,8 @@
             "accepted_invite": "%(targetName)s 已接受邀请",
             "ban": "%(senderName)s 已封禁 1 个用户",
             "ban_reason": "%(senderName)s 已封禁 1 个用户： %(reason)s",
-            "ban_reason_spoiler": "%(senderName)s 已封禁 <user/>",
-            "ban_spoiler": "%(senderName)s 已封禁 <user/>： %(reason)s",
+            "ban_reason_spoiler": "%(senderName)s 已封禁 <user/>：%(reason)s",
+            "ban_spoiler": "%(senderName)s 已封禁 <user/>",
             "change_avatar": "%(senderName)s 已更改其个人资料图像",
             "change_name": "%(oldDisplayName)s 已将其显示名称更改为 %(displayName)s",
             "change_name_avatar": "%(oldDisplayName)s 已更改其显示名称与个人资料图片",
@@ -3564,7 +3482,7 @@
         },
         "m.widget": {
             "added": "%(senderName)s 添加了小部件：%(widgetName)s",
-            "jitsi_ended": "%(senderName)s 结束了视频会议",
+            "jitsi_ended": "%(senderName)s 已结束视频会议",
             "jitsi_join_right_prompt": "从右侧的房间信息卡片加入会议",
             "jitsi_join_top_prompt": "在此房间加入会议的前排",
             "jitsi_started": "%(senderName)s 已开始视频会议",
@@ -3615,7 +3533,7 @@
         },
         "redaction": "消息已被 %(name)s 删除",
         "reply": {
-            "error_loading": "无法加载已回复的事件，该事件可能不存在或你无权查看。",
+            "error_loading": "无法加载曾回复过的事件；该事件可能不存在或你无权查看。",
             "in_reply_to": "<a>回复给</a> <pill>",
             "in_reply_to_for_export": "回复<a>此消息</a>"
         },
@@ -3803,8 +3721,8 @@
     "upload_failed_title": "上传失败",
     "upload_file": {
         "cancel_all_button": "全部取消",
-        "error_file_too_large": "此文件<b>太大</b>，无法上传。文件大小限制为 %(limit)s，但此文件为 %(sizeOfThisFile)s。",
-        "error_files_too_large": "这些文件<b>过大大</b>而无法上传。文件大小限制为 %(limit)s。",
+        "error_file_too_large": "此文件由于<b>过大</b>而无法上传。文件大小限制为 %(limit)s，但此文件为 %(sizeOfThisFile)s。",
+        "error_files_too_large": "这些文件由于<b>过大</b>而无法上传。文件大小限制为 %(limit)s。",
         "error_some_files_too_large": "某些文件<b>过大</b>而未能上传。文件大小限制为 %(limit)s。",
         "error_title": "上传出错",
         "not_image": "你选择的文件不是有效的图像文件。",
@@ -3832,7 +3750,7 @@
         "demote_self_confirm_title": "降级自身？",
         "disinvite_button_room": "撤消邀请",
         "disinvite_button_room_name": "从 %(roomName)s 取消邀请",
-        "disinvite_button_space": "取消邀请",
+        "disinvite_button_space": "从空间取消邀请",
         "error_ban_user": "封禁用户失败",
         "error_deactivate": "用户停用失败",
         "error_kicking_user": "用户移除失败",
@@ -3863,9 +3781,9 @@
             "confirm_description_2": "如果消息量较大，这可能需要一些时间。在此期间请勿刷新客户端。",
             "confirm_keep_state_explainer": "如果你还想移除此用户的系统消息（例如，成员关系变更、个人资料变更等），请取消选中。",
             "confirm_keep_state_label": "保留系统消息",
-            "confirm_title": "移除 %(user)s 最近的信息",
+            "confirm_title": "移除 %(user)s 的最近消息",
             "no_recent_messages_description": "尝试向上滚动时间线，查看是否有更早的消息。",
-            "no_recent_messages_title": "未找到 %(user)s 的最近信息"
+            "no_recent_messages_title": "未找到 %(user)s 的最近消息"
         },
         "redact_button": "移除消息",
         "revoke_invite": "撤消申请",
@@ -3886,6 +3804,9 @@
         "verify_button": "验证用户",
         "verify_explainer": "为了提高安全性，请通过检查两台设备上的一次性代码来验证此用户。"
     },
+    "user_status": {
+        "on_a_call": "通话中"
+    },
     "voip": {
         "already_in_call": "已在通话中",
         "already_in_call_person": "你已正在与此人通话。",
@@ -4062,7 +3983,7 @@
             "send_images_active_room": "以你的身份在活跃房间发送图像",
             "send_images_this_room": "以你的身份在此房间发送图片",
             "send_messages_active_room": "以你的身份在活跃房间发送消息",
-            "send_messages_this_room": "以你的身份在此房间中发送信息",
+            "send_messages_this_room": "以你的身份在此房间中发送消息",
             "send_msgtype_active_room": "以你的身份在活跃房间中发送 <b>%(msgtype)s</b> 消息",
             "send_msgtype_this_room": "以你的身份在此房间发送 <b>%(msgtype)s</b> 消息",
             "send_stickers_active_room": "向你的活跃房间发送贴纸",
@@ -4080,16 +4001,10 @@
         "close_to_view_right_panel": "关闭此小部件以在此面板查看",
         "context_menu": {
             "delete": "删除小部件",
-            "delete_warning": "删除小部件的同时会为该房间中的所有用户删除。你确定要删除此小部件？",
-            "move_left": "向左移动",
-            "move_right": "向右移动",
-            "remove": "为所有人删除",
-            "revoke": "撤销权限",
-            "screenshot": "拍照",
-            "start_audio_stream": "开始音频流"
+            "delete_warning": "删除小部件的同时会为该房间中的所有用户删除。你确定要删除此小部件？"
         },
         "cookie_warning": "此小部件可能会使用 Cookies。",
-        "error_hangup_description": "通话已中断。（错误：(message)s）",
+        "error_hangup_description": "通话已中断。（错误：%(message)s）",
         "error_hangup_title": "连接丢失",
         "error_loading": "载入小部件时出错",
         "error_mixed_content": "错误：混合内容",
diff --git a/apps/web/src/i18n/strings/zh_Hant.json b/apps/web/src/i18n/strings/zh_Hant.json
index 8f46b4fc3e..e87493a3fe 100644
--- a/apps/web/src/i18n/strings/zh_Hant.json
+++ b/apps/web/src/i18n/strings/zh_Hant.json
@@ -1,6 +1,5 @@
 {
     "a11y": {
-        "emoji_picker": "Emoji 選擇器",
         "jump_first_invite": "跳到第一個邀請。",
         "n_unread_messages": {
             "other": "%(count)s 則未讀訊息。",
@@ -10,7 +9,6 @@
             "other": "包含提及有 %(count)s 則未讀訊息。",
             "one": "1 則未讀的提及。"
         },
-        "room_name": "聊天室 %(name)s",
         "unread_messages": "未讀的訊息。"
     },
     "a11y_jump_first_unread_room": "跳到第一個未讀的聊天室。",
@@ -18,7 +16,6 @@
         "accept": "接受",
         "add": "新增",
         "add_existing_room": "新增既有的聊天室",
-        "add_people": "新增夥伴",
         "apply": "套用",
         "approve": "批准",
         "ask_to_join": "要求加入",
@@ -53,7 +50,6 @@
         "enter_fullscreen": "進入全螢幕",
         "exit_fullscreeen": "離開全螢幕",
         "expand": "展開",
-        "explore_public_rooms": "探索公開聊天室",
         "explore_rooms": "探索聊天室",
         "export": "匯出",
         "forward": "轉寄",
@@ -65,8 +61,6 @@
         "ignore": "忽略",
         "import": "匯入",
         "invite": "邀請",
-        "invite_to_space": "邀請加入聊天空間",
-        "invites_list": "邀請",
         "join": "加入",
         "learn_more": "了解更多",
         "leave": "離開",
@@ -93,7 +87,6 @@
         "rename": "重新命名",
         "reply": "回覆",
         "reply_in_thread": "在討論串中回覆",
-        "report_content": "回報內容",
         "resend": "重新傳送",
         "reset": "重設",
         "resume": "繼續",
@@ -111,8 +104,6 @@
         "sign_out": "登出",
         "skip": "略過",
         "start": "開始",
-        "start_chat": "開始聊天",
-        "start_new_chat": "開始新聊天",
         "stop": "停止",
         "submit": "送出",
         "subscribe": "訂閱",
@@ -210,10 +201,7 @@
         "log_in_new_account": "<a>登入</a>到您的新帳號。",
         "logout_dialog": {
             "description": "您確定要登出嗎？",
-            "megolm_export": "手動匯出金鑰",
             "setup_key_backup_title": "您將會失去您的加密訊息",
-            "setup_secure_backup_description_1": "加密訊息是使用端對端加密。只有您和接收者才有金鑰可以閱讀這些訊息。",
-            "setup_secure_backup_description_2": "當您登出時，這些金鑰將會從此裝置被刪除，這代表您將無法再閱讀加密的訊息，除非您在其他裝置上有那些訊息的金鑰，或是將它們備份到伺服器上。",
             "skip_key_backup": "我不要我的加密訊息了"
         },
         "misconfigured_body": "請要求您的 %(brand)s 管理員檢查<a>您的設定</a>是否有不正確或重覆的項目。",
@@ -429,7 +417,6 @@
         "encrypted": "開啟加密",
         "error": "錯誤",
         "faq": "常見問答集",
-        "favourites": "我的最愛",
         "feedback": "回饋",
         "filter_results": "過濾結果",
         "forward_message": "轉寄訊息",
@@ -437,7 +424,6 @@
         "go_to_settings": "前往設定",
         "guest": "訪客",
         "help": "說明",
-        "historical": "歷史",
         "home": "首頁",
         "homeserver": "家伺服器",
         "identity_server": "身分伺服器",
@@ -449,12 +435,10 @@
         "light": "亮色",
         "loading": "載入中…",
         "location": "位置",
-        "low_priority": "低優先度",
         "matrix": "Matrix",
         "message": "訊息",
         "message_layout": "訊息佈局",
         "microphone": "麥克風",
-        "model": "模型",
         "modern": "現代",
         "mute": "靜音",
         "n_members": {
@@ -508,7 +492,6 @@
         "success": "成功",
         "suggestions": "建議",
         "support": "支援",
-        "system_alerts": "系統警告",
         "theme": "主題",
         "thread": "討論串",
         "threads": "討論串",
@@ -524,7 +507,6 @@
         "username": "使用者名稱",
         "verified": "已驗證",
         "version": "版本",
-        "video": "影片",
         "video_room": "視訊聊天室",
         "view_message": "檢視訊息",
         "warning": "警告"
@@ -743,7 +725,6 @@
         "thread_root_id": "討論串 Root ID：%(threadRootId)s",
         "threads_timeline": "討論串時間軸",
         "title": "開發者工具",
-        "toggle_event": "切換事件",
         "toolbox": "工具箱",
         "use_at_own_risk": "此使用者介面不會檢查值的類型。使用風險自負。",
         "user_read_up_to": "使用者讀取至： ",
@@ -765,22 +746,6 @@
     },
     "dialog_close_label": "關閉對話框",
     "download_completed": "下載完成",
-    "emoji": {
-        "categories": "分類",
-        "category_activities": "活動",
-        "category_animals_nature": "動物與自然",
-        "category_flags": "旗幟",
-        "category_food_drink": "食物與飲料",
-        "category_frequently_used": "經常使用",
-        "category_objects": "物件",
-        "category_smileys_people": "笑臉與人",
-        "category_symbols": "符號",
-        "category_travel_places": "旅遊與景點",
-        "quick_reactions": "快速反應"
-    },
-    "emoji_picker": {
-        "cancel_search_label": "取消搜尋"
-    },
     "empty_room": "空聊天室",
     "empty_room_was_name": "空的聊天室（曾為 %(oldName)s）",
     "encryption": {
@@ -832,18 +797,7 @@
         "set_up_recovery": "設定復原",
         "set_up_recovery_toast_description": "產生一把復原金鑰，以便在您無法存取裝置時恢復您的加密訊息歷史記錄。",
         "set_up_toast_title": "設定安全備份",
-        "setup_secure_backup": {
-            "explainer": "請在登出前備份您的金鑰，以免遺失。"
-        },
         "turn_on_key_storage_description": "在伺服器安全地儲存您的加密身分及訊息金鑰。如此一來，您便能在任何新裝置上檢視訊息歷史紀錄。",
-        "udd": {
-            "interactive_verification_button": "透過表情符號互動來驗證",
-            "other_ask_verify_text": "要求此使用者驗證他們的工作階段，或在下方手動驗證。",
-            "other_new_session_text": "%(name)s （%(userId)s）登入到未驗證的新工作階段：",
-            "own_ask_verify_text": "使用下方的其中一個選項來驗證您其他工作階段。",
-            "own_new_session_text": "您已登入新的工作階段但未驗證：",
-            "title": "未受信任"
-        },
         "unable_to_setup_keys_error": "無法設定金鑰",
         "verification": {
             "accepting": "正在接受…",
@@ -1268,7 +1222,6 @@
         "experimental_description": "想要做點實驗？歡迎測試我們開發中的最新創意功能。這些功能尚未完成設計；可能不穩定、可能會變動，也可能會被完全捨棄。<a>取得更多資訊</a>。",
         "experimental_section": "提早預覽",
         "feature_wysiwyg_composer_description": "在訊息編輯器中使用格式化文字而非 Markdown。",
-        "group_calls": "全新的群組通話體驗",
         "group_developer": "開發者",
         "group_encryption": "加密",
         "group_experimental": "實驗性",
@@ -1282,7 +1235,6 @@
         "group_voip": "語音與視訊",
         "group_widgets": "小工具",
         "hidebold": "隱藏通知點（僅顯示計數器徽章）",
-        "html_topic": "顯示聊天室主題的 HTML 表現",
         "join_beta": "加入 Beta 測試",
         "join_beta_reload": "加入 Beta 測試版將會重新載入 %(brand)s。",
         "jump_to_date": "跳至日期（使用 /jumptodate 指令即可跳到當天最早的訊息）",
@@ -1297,13 +1249,10 @@
         "notification_settings": "新通知設定",
         "notification_settings_beta_caption": "全新推出更簡便的通知設定調整方式。隨心所欲地自訂您的%(brand)s ，打造專屬體驗。",
         "notification_settings_beta_title": "通知設定",
-        "report_to_moderators": "回報給版主",
-        "report_to_moderators_description": "在支援審核的聊天室中，「回報」按鈕讓您可以回報濫用行為給聊天室管理員。",
         "sliding_sync": "滑動同步模式",
         "sliding_sync_description": "正在積極開發中，無法停用。",
         "sliding_sync_disabled_notice": "登出並重新登入以停用",
         "sliding_sync_server_no_support": "您的伺服器缺乏原生支援",
-        "under_active_development": "正在積極開發中。",
         "video_rooms": "視訊聊天室",
         "video_rooms_a_new_way_to_chat": "在 %(brand)s 中透過語音及視訊聊天的新方式。",
         "video_rooms_always_on_voip_channels": "視訊聊天室是內建在 %(brand)s 聊天室當中，隨時開啟的 VoIP 頻道。",
@@ -1355,9 +1304,6 @@
         "room_rejoin_warning": "這個聊天室不是公開聊天。沒有再次收到邀請的情況下將無法重新加入。",
         "space_rejoin_warning": "此聊天空間並非公開。在無邀請的情況下，您將無法重新加入。"
     },
-    "left_panel": {
-        "open_dial_pad": "開啟撥號鍵盤"
-    },
     "lightbox": {
         "rotate_left": "向左旋轉",
         "rotate_right": "向右旋轉",
@@ -1444,7 +1390,6 @@
         "mentions_and_keywords": "@提及與關鍵字",
         "mentions_and_keywords_description": "僅在提及您與您在<a>設定</a>中列出的關鍵字時收到通知",
         "mentions_keywords": "提及與關鍵字",
-        "message_didnt_send": "訊息未傳送。點擊以取得更多資訊。",
         "mute_description": "不會收到任何通知"
     },
     "notifier": {
@@ -1529,7 +1474,6 @@
     },
     "quick_settings": {
         "all_settings": "所有設定",
-        "metaspace_section": "釘選至側邊欄",
         "sidebar_settings": "更多選項",
         "title": "快速設定"
     },
@@ -1547,22 +1491,10 @@
     },
     "report_content": {
         "description": "回報此訊息將會傳送其獨特的「活動 ID」給您家伺服器的管理員。如果此聊天室中的訊息已加密，您的家伺服器管理員將無法閱讀訊息文字或檢視任何檔案或圖片。",
-        "disagree": "不同意",
         "hide_messages_from_user": "若想隱藏來自該使用者所有目前與未來的訊息，請打勾。",
         "ignore_user": "忽略使用者",
-        "illegal_content": "違法內容",
         "missing_reason": "請填寫為什麼您要回報。",
-        "nature": "請挑選性質並描述此訊息為什麼是濫用。",
-        "nature_disagreement": "該使用者所寫的內容是錯誤的。\n這將會回報給聊天室管理員。",
-        "nature_illegal": "該使用者進行違法行為，例如洩漏他人個資，或威脅使用暴力。\n將會回報給聊天室版主，他們可能會將其回報給執法單位。",
-        "nature_other": "任何其他理由。請描述問題。\n將會回報給聊天室版主。",
-        "nature_spam": "該使用者傳送廣告、廣告連結或宣傳等垃圾訊息至聊天室。\n將會回報給聊天室版主。",
-        "nature_toxic": "該使用者表現出不良行為，例如侮辱其他使用者，或在適合家庭的聊天室中分享成人內容，又或是以其他方式違反該聊天室的規則。\n將回報給聊天室版主。",
-        "other_label": "其他",
-        "report_content_to_homeserver": "回報內容給您的家伺服器管理員",
-        "report_entire_room": "回報整個聊天室",
-        "spam_or_propaganda": "垃圾郵件或宣傳",
-        "toxic_behaviour": "有問題的行為"
+        "report_content_to_homeserver": "回報內容給您的家伺服器管理員"
     },
     "restore_key_backup_dialog": {
         "count_of_decryption_failures": "無法解密 %(failedCount)s 個工作階段！",
@@ -1781,36 +1713,12 @@
         "waiting_for_join_title": "等待使用者加入 %(brand)s"
     },
     "room_list": {
-        "add_room_label": "新增聊天室",
         "add_space_label": "新增聊天空間",
-        "breadcrumbs_empty": "沒有最近造訪過的聊天室",
-        "breadcrumbs_label": "最近造訪過的聊天室",
         "failed_add_tag": "無法新增標籤 %(tagName)s 到聊天室",
         "failed_remove_tag": "無法從聊天室移除標籤 %(tagName)s",
         "failed_set_dm_tag": "無法設定私人訊息標籤",
-        "home_menu_label": "家選項",
-        "join_public_room_label": "加入公開聊天室",
-        "joining_rooms_status": {
-            "one": "目前正在加入 %(count)s 個聊天室",
-            "other": "目前正在加入 %(count)s 個聊天室"
-        },
         "notification_options": "通知選項",
-        "redacting_messages_status": {
-            "one": "目前正在移除 %(count)s 個聊天室中的訊息",
-            "other": "目前正在移除 %(count)s 個聊天室中的訊息"
-        },
-        "show_less": "顯示更少",
-        "show_n_more": {
-            "other": "再顯示 %(count)s 個",
-            "one": "再顯示 %(count)s 個"
-        },
-        "show_previews": "顯示訊息預覽",
-        "sort_by": "排序方式",
-        "sort_by_activity": "訊息順序",
-        "sort_unread_first": "先顯示有未讀訊息的聊天室",
-        "space_menu_label": "%(spaceName)s 選單",
-        "sublist_options": "列表選項",
-        "suggested_rooms_heading": "建議的聊天室"
+        "show_less": "顯示更少"
     },
     "room_settings": {
         "access": {
@@ -2402,7 +2310,6 @@
         "send_read_receipts_unsupported": "您的伺服器不支援停用傳送讀取回條。",
         "send_typing_notifications": "傳送「輸入中」的通知",
         "sessions": {
-            "browser": "瀏覽器",
             "confirm_sign_out": {
                 "one": "確認登出此裝置",
                 "other": "確認登出這些裝置"
@@ -2451,7 +2358,6 @@
             "no_sessions": "找不到工作階段。",
             "no_unverified_sessions": "找不到未驗證的工作階段。",
             "no_verified_sessions": "找不到已驗證的工作階段。",
-            "os": "作業系統",
             "other_sessions_heading": "其他工作階段",
             "push_heading": "推送通知",
             "push_subheading": "在此工作階段接收推送通知。",
@@ -2510,13 +2416,11 @@
         "show_typing_notifications": "顯示打字通知",
         "sidebar": {
             "dialog_title": "<strong>設定：</strong>側邊欄",
-            "metaspaces_favourites_description": "將所有您最喜愛的聊天室與夥伴集中在同一個地方。",
             "metaspaces_home_all_rooms": "顯示所有聊天室",
             "metaspaces_home_all_rooms_description": "將您所有的聊天室顯示在首頁，即便它們位於同一個聊天空間。",
             "metaspaces_home_description": "首頁對於取得所有內容的概覽很有用。",
             "metaspaces_orphans": "聊天空間外的聊天室",
             "metaspaces_orphans_description": "將所有不屬於某個聊天空間的聊天室集中在同一個地方。",
-            "metaspaces_people_description": "將您所有的夥伴集中在同一個地方。",
             "metaspaces_subsection": "要顯示的聊天空間",
             "spaces_explainer": "空間是將房間和人群分組的方式。除了您所在的空間之外，您也可以使用一些預先構建的空間。",
             "title": "側邊欄"
@@ -2533,7 +2437,6 @@
             "audio_output": "音訊輸出",
             "audio_output_empty": "未偵測到音訊輸出",
             "auto_gain_control": "自動增益控制",
-            "connection_section": "連線",
             "dialog_title": "<strong>設定：</strong>語音與視訊",
             "echo_cancellation": "迴聲消除",
             "enable_fallback_ice_server": "允許使用備用通話輔助伺服器（%(server)s）",
@@ -2707,12 +2610,6 @@
     "space_settings": {
         "title": "設定 - %(spaceName)s"
     },
-    "spaces": {
-        "error_no_permission_add_room": "您沒有權限在此聊天空間中新增聊天室",
-        "error_no_permission_add_space": "您沒有權限向此聊天空間新增聊天空間",
-        "error_no_permission_create_room": "您沒有權限在此聊天空間中建立新聊天室",
-        "error_no_permission_invite": "您沒有權限邀請夥伴到此聊天空間"
-    },
     "spotlight": {
         "public_rooms": {
             "network_dropdown_add_dialog_description": "輸入您想要探索的新伺服器的名稱。",
@@ -2901,9 +2798,7 @@
         "m.poll.start": "%(senderName)s 啟動了投票 - %(pollQuestion)s",
         "m.room.avatar": {
             "changed": "%(senderDisplayName)s 變更了聊天室大頭照。",
-            "changed_img": "%(senderDisplayName)s 將聊天室大頭照更改為 <img/>",
-            "lightbox_title": "%(senderDisplayName)s 將聊天室的大頭照改為 %(roomName)s",
-            "removed": "%(senderDisplayName)s 移除了聊天室的大頭照。"
+            "lightbox_title": "%(senderDisplayName)s 將聊天室的大頭照改為 %(roomName)s"
         },
         "m.room.canonical_alias": {
             "alt_added": {
@@ -3471,13 +3366,7 @@
         "close_to_view_right_panel": "關閉此小工具以在此面板中檢視",
         "context_menu": {
             "delete": "刪除小工具",
-            "delete_warning": "刪除小工具會將它從此聊天室中所有使用者的收藏中移除。您確定您要刪除這個小工具嗎？",
-            "move_left": "向左移動",
-            "move_right": "向右移動",
-            "remove": "為所有人移除",
-            "revoke": "撤銷權限",
-            "screenshot": "拍照",
-            "start_audio_stream": "開始音訊串流"
+            "delete_warning": "刪除小工具會將它從此聊天室中所有使用者的收藏中移除。您確定您要刪除這個小工具嗎？"
         },
         "cookie_warning": "這個小工具可能會使用 cookies。",
         "error_hangup_description": "您已斷開通話。（錯誤：%(message)s）",
diff --git a/apps/web/src/i18n/utils.test.ts b/apps/web/src/i18n/utils.test.ts
new file mode 100644
index 0000000000..b4e893aab6
--- /dev/null
+++ b/apps/web/src/i18n/utils.test.ts
@@ -0,0 +1,45 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+// @vitest-environment happy-dom
+
+import { describe, it, expect } from "vitest";
+import fetchMock from "@fetch-mock/vitest";
+
+import { getAllLanguagesWithLabels } from "./utils";
+
+describe("getAllLanguagesWithLabels", () => {
+    it("should handle unknown language sanely", async () => {
+        fetchMock.modifyRoute("languages", {
+            response: {
+                en: "en_EN.json",
+                de: "de_DE.json",
+                qq: "qq.json",
+            },
+        });
+        await expect(getAllLanguagesWithLabels()).resolves.toMatchInlineSnapshot(`
+                [
+                  {
+                    "label": "English",
+                    "labelInTargetLanguage": "English",
+                    "value": "en",
+                  },
+                  {
+                    "label": "German",
+                    "labelInTargetLanguage": "Deutsch",
+                    "value": "de",
+                  },
+                  {
+                    "label": "qq",
+                    "labelInTargetLanguage": "qq",
+                    "value": "qq",
+                  },
+                ]
+            `);
+    });
+});
diff --git a/apps/web/src/i18n/utils.ts b/apps/web/src/i18n/utils.ts
new file mode 100644
index 0000000000..7386a4adbb
--- /dev/null
+++ b/apps/web/src/i18n/utils.ts
@@ -0,0 +1,64 @@
+/*
+ * 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 { getLangsJson, getLocale, normalizeLanguageKey } from "@element-hq/web-shared-components";
+
+async function getAllLanguagesFromJson(): Promise<string[]> {
+    return Object.keys(await getLangsJson());
+}
+
+type Language = {
+    value: string;
+    label: string; // translated
+    labelInTargetLanguage: string; // translated
+};
+
+export async function getAllLanguagesWithLabels(): Promise<Language[]> {
+    const languageNames = new Intl.DisplayNames([getLocale()], { type: "language", style: "short" });
+    const languages = await getAllLanguagesFromJson();
+    return languages.map<Language>((langKey) => {
+        return {
+            value: langKey,
+            label: languageNames.of(langKey)!,
+            labelInTargetLanguage: new Intl.DisplayNames([langKey], { type: "language", style: "short" }).of(langKey)!,
+        };
+    });
+}
+
+/**
+ * Given a list of language codes, pick the most appropriate one
+ * given the current language (ie. getCurrentLanguage())
+ * English is assumed to be a reasonable default.
+ *
+ * @param {string[]} langs List of language codes to pick from
+ * @returns {string} The most appropriate language code from langs
+ */
+export function pickBestLanguage(langs: string[]): string {
+    const currentLang = getLocale();
+    const normalisedLangs = langs.map(normalizeLanguageKey);
+
+    {
+        // Best is an exact match
+        const currentLangIndex = normalisedLangs.indexOf(currentLang);
+        if (currentLangIndex > -1) return langs[currentLangIndex];
+    }
+
+    {
+        // Failing that, a different dialect of the same language
+        const closeLangIndex = normalisedLangs.findIndex((l) => l.slice(0, 2) === currentLang.slice(0, 2));
+        if (closeLangIndex > -1) return langs[closeLangIndex];
+    }
+
+    {
+        // Neither of those? Try an english variant.
+        const enIndex = normalisedLangs.findIndex((l) => l.startsWith("en"));
+        if (enIndex > -1) return langs[enIndex];
+    }
+
+    // if nothing else, use the first
+    return langs[0];
+}
diff --git a/apps/web/src/index.ts b/apps/web/src/index.ts
deleted file mode 100644
index 7988f32dad..0000000000
--- a/apps/web/src/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2019 The Matrix.org Foundation C.I.C.
-Copyright 2015, 2016 OpenMarket 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 the js-sdk so the proper `request` object can be set. This does some
-// magic with the browser injection to make all subsequent imports work fine.
-import "matrix-js-sdk/src/browser-index";
diff --git a/apps/web/src/indexing/BaseEventIndexManager.ts b/apps/web/src/indexing/BaseEventIndexManager.ts
index 8f0e5a1651..8a1c85dbbb 100644
--- a/apps/web/src/indexing/BaseEventIndexManager.ts
+++ b/apps/web/src/indexing/BaseEventIndexManager.ts
@@ -14,7 +14,6 @@ import {
 } from "matrix-js-sdk/src/matrix";
 
 // The following interfaces take their names and member names from seshat and the spec
-/* eslint-disable camelcase */
 
 /** A record of a place to resume crawling events in a given room. */
 export interface ICrawlerCheckpoint {
@@ -76,7 +75,7 @@ export default abstract class BaseEventIndexManager {
      * optionally enable event indexing they may override this method to perform
      * the necessary runtime checks here.
      *
-     * @return {Promise} A promise that will resolve to true if event indexing
+     * @returns {Promise} A promise that will resolve to true if event indexing
      * is supported, false otherwise.
      */
     public async supportsEventIndexing(): Promise<boolean> {
@@ -88,7 +87,7 @@ export default abstract class BaseEventIndexManager {
      * @param {string} userId The event that should be added to the index.
      * @param {string} deviceId The profile of the event sender at the
      *
-     * @return {Promise} A promise that will resolve when the event index is
+     * @returns {Promise} A promise that will resolve when the event index is
      * initialized.
      */
     public async initEventIndex(userId: string, deviceId: string): Promise<void> {
@@ -102,7 +101,7 @@ export default abstract class BaseEventIndexManager {
      * @param {IMatrixProfile} profile The profile of the event sender at the
      * time the event was received.
      *
-     * @return {Promise} A promise that will resolve when the was queued up for
+     * @returns {Promise} A promise that will resolve when the was queued up for
      * addition.
      */
     public async addEventToIndex(ev: IMatrixEvent, profile: IMatrixProfile): Promise<void> {
@@ -123,7 +122,7 @@ export default abstract class BaseEventIndexManager {
      * @param {string} roomId The ID of the room which we want to check if it
      * has been already indexed.
      *
-     * @return {Promise<boolean>} Returns true if the index contains events for
+     * @returns {Promise<boolean>} Returns true if the index contains events for
      * the given room, false otherwise.
      */
     public isRoomIndexed(roomId: string): Promise<boolean> {
@@ -133,7 +132,7 @@ export default abstract class BaseEventIndexManager {
     /**
      * Get statistical information of the index.
      *
-     * @return {Promise<IIndexStats>} A promise that will resolve to the index
+     * @returns {Promise<IIndexStats>} A promise that will resolve to the index
      * statistics.
      */
     public async getStats(): Promise<IIndexStats> {
@@ -142,7 +141,7 @@ export default abstract class BaseEventIndexManager {
 
     /**
      * Get the user version of the database.
-     * @return {Promise<number>} A promise that will resolve to the user stored
+     * @returns {Promise<number>} A promise that will resolve to the user stored
      * version number.
      */
     public async getUserVersion(): Promise<number> {
@@ -155,7 +154,7 @@ export default abstract class BaseEventIndexManager {
      * @param {number} version The new version that should be stored in the
      * database.
      *
-     * @return {Promise<void>} A promise that will resolve once the new version
+     * @returns {Promise<void>} A promise that will resolve once the new version
      * is stored.
      */
     public async setUserVersion(version: number): Promise<void> {
@@ -165,7 +164,7 @@ export default abstract class BaseEventIndexManager {
     /**
      * Commit the previously queued up events to the index.
      *
-     * @return {Promise} A promise that will resolve once the queued up events
+     * @returns {Promise} A promise that will resolve once the queued up events
      * were added to the index.
      */
     public async commitLiveEvents(): Promise<void> {
@@ -178,7 +177,7 @@ export default abstract class BaseEventIndexManager {
      * @param {ISearchArgs} searchArgs The search configuration for the search,
      * sets the search term and determines the search result contents.
      *
-     * @return {Promise<IResultRoomEvents[]>} A promise that will resolve to an array
+     * @returns {Promise<IResultRoomEvents[]>} A promise that will resolve to an array
      * of search results once the search is done.
      */
     public async searchEventIndex(searchArgs: ISearchArgs): Promise<IResultRoomEvents> {
@@ -199,7 +198,7 @@ export default abstract class BaseEventIndexManager {
      * to fetch the current batch of events. This checkpoint will be removed
      * from the index.
      *
-     * @return {Promise} A promise that will resolve to true if all the events
+     * @returns {Promise} A promise that will resolve to true if all the events
      * were already added to the index, false otherwise.
      */
     public async addHistoricEvents(
@@ -216,7 +215,7 @@ export default abstract class BaseEventIndexManager {
      * @param {ICrawlerCheckpoint} checkpoint The checkpoint that should be added
      * to the index.
      *
-     * @return {Promise} A promise that will resolve once the checkpoint has
+     * @returns {Promise} A promise that will resolve once the checkpoint has
      * been stored.
      */
     public async addCrawlerCheckpoint(checkpoint: ICrawlerCheckpoint): Promise<void> {
@@ -229,7 +228,7 @@ export default abstract class BaseEventIndexManager {
      * @param {ICrawlerCheckpoint} checkpoint The checkpoint that should be
      * removed from the index.
      *
-     * @return {Promise} A promise that will resolve once the checkpoint has
+     * @returns {Promise} A promise that will resolve once the checkpoint has
      * been removed.
      */
     public async removeCrawlerCheckpoint(checkpoint: ICrawlerCheckpoint): Promise<void> {
@@ -239,7 +238,7 @@ export default abstract class BaseEventIndexManager {
     /**
      * Load the stored checkpoints from the index.
      *
-     * @return {Promise<[ICrawlerCheckpoint]>} A promise that will resolve to an
+     * @returns {Promise<[ICrawlerCheckpoint]>} A promise that will resolve to an
      * array of crawler checkpoints once they have been loaded from the index.
      */
     public async loadCheckpoints(): Promise<ICrawlerCheckpoint[]> {
@@ -258,7 +257,7 @@ export default abstract class BaseEventIndexManager {
      * @param  {string} args.direction The direction to which we should continue
      * loading events from. This is used only if fromEvent is used as well.
      *
-     * @return {Promise<[IEventAndProfile]>} A promise that will resolve to an
+     * @returns {Promise<[IEventAndProfile]>} A promise that will resolve to an
      * array of Matrix events that contain mxc URLs accompanied with the
      * historic profile of the sender.
      */
@@ -269,7 +268,7 @@ export default abstract class BaseEventIndexManager {
     /**
      * close our event index.
      *
-     * @return {Promise} A promise that will resolve once the event index has
+     * @returns {Promise} A promise that will resolve once the event index has
      * been closed.
      */
     public async closeEventIndex(): Promise<void> {
@@ -279,7 +278,7 @@ export default abstract class BaseEventIndexManager {
     /**
      * Delete our current event index.
      *
-     * @return {Promise} A promise that will resolve once the event index has
+     * @returns {Promise} A promise that will resolve once the event index has
      * been deleted.
      */
     public async deleteEventIndex(): Promise<void> {
diff --git a/apps/web/test/unit-tests/indexing/EventIndex-test.ts b/apps/web/src/indexing/EventIndex.test.ts
similarity index 84%
rename from apps/web/test/unit-tests/indexing/EventIndex-test.ts
rename to apps/web/src/indexing/EventIndex.test.ts
index 3e33beaf3b..3b284cd076 100644
--- a/apps/web/test/unit-tests/indexing/EventIndex-test.ts
+++ b/apps/web/src/indexing/EventIndex.test.ts
@@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { type Mocked } from "jest-mock";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, afterEach, type Mocked } from "vitest";
 import {
     Direction,
     type MatrixClient,
@@ -25,22 +27,27 @@ import {
     SyncState,
 } from "matrix-js-sdk/src/matrix";
 
-import EventIndex from "../../../src/indexing/EventIndex.ts";
-import { emitPromise, getMockClientWithEventEmitter, mockClientMethodsRooms, mockPlatformPeg } from "../../test-utils";
-import type BaseEventIndexManager from "../../../src/indexing/BaseEventIndexManager.ts";
-import { type ICrawlerCheckpoint } from "../../../src/indexing/BaseEventIndexManager.ts";
-import SettingsStore from "../../../src/settings/SettingsStore.ts";
+import EventIndex from "./EventIndex.ts";
+import {
+    emitPromise,
+    getMockClientWithEventEmitter,
+    mockClientMethodsRooms,
+    mockPlatformPeg,
+} from "../../test/test-utils";
+import type BaseEventIndexManager from "./BaseEventIndexManager.ts";
+import { type ICrawlerCheckpoint } from "./BaseEventIndexManager.ts";
+import SettingsStore from "../settings/SettingsStore.ts";
 
 afterEach(() => {
-    jest.restoreAllMocks();
+    vi.restoreAllMocks();
 });
 
 describe("EventIndex", () => {
     it("crawls through the loaded checkpoints", async () => {
         const mockIndexingManager = {
-            loadCheckpoints: jest.fn(),
-            removeCrawlerCheckpoint: jest.fn(),
-            isEventIndexEmpty: jest.fn().mockResolvedValue(false),
+            loadCheckpoints: vi.fn(),
+            removeCrawlerCheckpoint: vi.fn(),
+            isEventIndexEmpty: vi.fn().mockResolvedValue(false),
         } as any as Mocked<BaseEventIndexManager>;
         mockPlatformPeg({ getEventIndexingManager: () => mockIndexingManager });
 
@@ -48,11 +55,11 @@ describe("EventIndex", () => {
         const room2 = { roomId: "!room2:id" } as any as Room;
         const mockClient = getMockClientWithEventEmitter({
             getEventMapper: () => (obj: Partial<IEvent>) => new MatrixEvent(obj),
-            createMessagesRequest: jest.fn(),
+            createMessagesRequest: vi.fn(),
             ...mockClientMethodsRooms([room1, room2]),
         });
 
-        jest.spyOn(SettingsStore, "getValueAt").mockImplementation((_level, settingName): any => {
+        vi.spyOn(SettingsStore, "getValueAt").mockImplementation((_level, settingName): any => {
             if (settingName === "crawlerSleepTime") return 0;
             return undefined;
         });
@@ -90,11 +97,11 @@ describe("EventIndex", () => {
 
     it("adds checkpoints for the encrypted rooms after the first sync", async () => {
         const mockIndexingManager = {
-            loadCheckpoints: jest.fn().mockResolvedValue([]),
-            isEventIndexEmpty: jest.fn().mockResolvedValue(true),
-            addCrawlerCheckpoint: jest.fn(),
-            removeCrawlerCheckpoint: jest.fn(),
-            commitLiveEvents: jest.fn(),
+            loadCheckpoints: vi.fn().mockResolvedValue([]),
+            isEventIndexEmpty: vi.fn().mockResolvedValue(true),
+            addCrawlerCheckpoint: vi.fn(),
+            removeCrawlerCheckpoint: vi.fn(),
+            commitLiveEvents: vi.fn(),
         } as any as Mocked<BaseEventIndexManager>;
         mockPlatformPeg({ getEventIndexingManager: () => mockIndexingManager });
 
@@ -111,11 +118,11 @@ describe("EventIndex", () => {
             }),
         } as any as Room;
         const mockCrypto = {
-            isEncryptionEnabledInRoom: jest.fn().mockResolvedValue(true),
+            isEncryptionEnabledInRoom: vi.fn().mockResolvedValue(true),
         };
         const mockClient = getMockClientWithEventEmitter({
             getEventMapper: () => (obj: Partial<IEvent>) => new MatrixEvent(obj),
-            createMessagesRequest: jest.fn(),
+            createMessagesRequest: vi.fn(),
             getCrypto: () => mockCrypto as any,
             ...mockClientMethodsRooms([room1, room2]),
         });
diff --git a/apps/web/src/indexing/EventIndex.ts b/apps/web/src/indexing/EventIndex.ts
index 97913bf845..6b6f351012 100644
--- a/apps/web/src/indexing/EventIndex.ts
+++ b/apps/web/src/indexing/EventIndex.ts
@@ -6,6 +6,7 @@ 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.
 */
 
+// oxlint-disable-next-line no-restricted-imports
 import { EventEmitter } from "events";
 import {
     RoomMember,
@@ -458,6 +459,7 @@ export default class EventIndex extends EventEmitter {
 
         let idle = false;
 
+        // oxlint-disable-next-line no-unmodified-loop-condition
         while (!cancelled) {
             let sleepTime = SettingsStore.getValueAt(SettingLevel.DEVICE, "crawlerSleepTime");
 
@@ -711,7 +713,7 @@ export default class EventIndex extends EventEmitter {
      * @param {ISearchArgs} searchArgs The search configuration for the search,
      * sets the search term and determines the search result contents.
      *
-     * @return {Promise<IResultRoomEvents[]>} A promise that will resolve to an array
+     * @returns {Promise<IResultRoomEvents[]>} A promise that will resolve to an array
      * of search results once the search is done.
      */
     public async search(searchArgs: ISearchArgs): Promise<IResultRoomEvents | undefined> {
@@ -949,7 +951,7 @@ export default class EventIndex extends EventEmitter {
     /**
      * Get statistical information of the index.
      *
-     * @return {Promise<IIndexStats>} A promise that will resolve to the index
+     * @returns {Promise<IIndexStats>} A promise that will resolve to the index
      * statistics.
      */
     public async getStats(): Promise<IIndexStats | undefined> {
@@ -963,7 +965,7 @@ export default class EventIndex extends EventEmitter {
      * @param {string} roomId The ID of the room which we want to check if it
      * has been already indexed.
      *
-     * @return {Promise<boolean>} Returns true if the index contains events for
+     * @returns {Promise<boolean>} Returns true if the index contains events for
      * the given room, false otherwise.
      */
     public async isRoomIndexed(roomId: string): Promise<boolean | undefined> {
@@ -992,7 +994,10 @@ export default class EventIndex extends EventEmitter {
     }
 
     public crawlingRooms(): {
-        /** The rooms that we are currently crawling. */
+        /**
+         * The rooms with an outstanding crawler checkpoint: the one being crawled right now, and
+         * those still queued behind it.
+         */
         crawlingRooms: Set<string>;
 
         /** All the encrypted rooms known by the MatrixClient. */
diff --git a/apps/web/src/indexing/EventIndexPeg.ts b/apps/web/src/indexing/EventIndexPeg.ts
index f33cbcc74c..eb32c823ca 100644
--- a/apps/web/src/indexing/EventIndexPeg.ts
+++ b/apps/web/src/indexing/EventIndexPeg.ts
@@ -37,7 +37,7 @@ export class EventIndexPeg {
      * Initialize the EventIndexPeg and if event indexing is enabled initialize
      * the event index.
      *
-     * @return {Promise<boolean>} A promise that will resolve to true if an
+     * @returns {Promise<boolean>} A promise that will resolve to true if an
      * EventIndex was successfully initialized, false otherwise.
      */
     public async init(): Promise<boolean> {
@@ -111,7 +111,7 @@ export class EventIndexPeg {
     /**
      * Check if the current platform has support for event indexing.
      *
-     * @return {boolean} True if it has support, false otherwise. Note that this
+     * @returns {boolean} True if it has support, false otherwise. Note that this
      * does not mean that support is installed.
      */
     public platformHasSupport(): boolean {
@@ -125,7 +125,7 @@ export class EventIndexPeg {
      * this tells us if those are installed. Note that this should only be
      * called after the init() method was called.
      *
-     * @return {boolean} True if support is installed, false otherwise.
+     * @returns {boolean} True if support is installed, false otherwise.
      */
     public supportIsInstalled(): boolean {
         return this._supportIsInstalled;
@@ -134,7 +134,7 @@ export class EventIndexPeg {
     /**
      * Get the current event index.
      *
-     * @return {EventIndex} The current event index.
+     * @returns {EventIndex} The current event index.
      */
     public get(): EventIndex | null {
         return this.index;
@@ -155,7 +155,7 @@ export class EventIndexPeg {
      *
      * After a call to this the init() method will need to be called again.
      *
-     * @return {Promise} A promise that will resolve once the event index is
+     * @returns {Promise} A promise that will resolve once the event index is
      * closed.
      */
     public async unset(): Promise<void> {
@@ -169,7 +169,7 @@ export class EventIndexPeg {
      *
      * After a call to this the init() method will need to be called again.
      *
-     * @return {Promise} A promise that will resolve once the event index is
+     * @returns {Promise} A promise that will resolve once the event index is
      * deleted.
      */
     public async deleteEventIndex(): Promise<void> {
diff --git a/apps/web/src/languageHandler.ts b/apps/web/src/languageHandler.ts
new file mode 100644
index 0000000000..9c4cc41bb4
--- /dev/null
+++ b/apps/web/src/languageHandler.ts
@@ -0,0 +1,12 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+/**
+ * Re-export of the i18n main export, to lessen the diff for the pull request.
+ */
+
+export * from "./i18n";
diff --git a/apps/web/src/languageHandler.tsx b/apps/web/src/languageHandler.tsx
deleted file mode 100644
index a315d61298..0000000000
--- a/apps/web/src/languageHandler.tsx
+++ /dev/null
@@ -1,313 +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 { logger } from "matrix-js-sdk/src/logger";
-import { MapWithDefault } from "matrix-js-sdk/src/utils";
-import { type TranslationStringsObject } from "@matrix-org/react-sdk-module-api";
-import _ from "lodash";
-import {
-    _t,
-    normalizeLanguageKey,
-    type StringVariables,
-    KEY_SEPARATOR,
-    getLangsJson,
-    registerTranslations,
-    setLocale,
-    getLocale,
-    setMissingEntryGenerator as setMissingEntryGeneratorSharedComponents,
-} from "@element-hq/web-shared-components";
-
-import SettingsStore from "./settings/SettingsStore";
-import PlatformPeg from "./PlatformPeg";
-import { SettingLevel } from "./settings/SettingLevel";
-import { retry } from "./utils/promise";
-import SdkConfig from "./SdkConfig";
-import { ModuleRunner } from "./modules/ModuleRunner";
-
-export {
-    _t,
-    type IVariables,
-    type Tags,
-    type TranslatedString,
-    _td,
-    _tDom,
-    lookupString,
-    sanitizeForTranslation,
-    normalizeLanguageKey,
-    getNormalizedLanguageKeys,
-    substitute,
-} from "@element-hq/web-shared-components";
-
-const i18nFolder = "i18n/";
-
-export interface ErrorOptions {
-    // Because we're mixing the substitution variables and `cause` into the same object
-    // below, we want them to always explicitly say whether there is an underlying error
-    // or not to avoid typos of "cause" slipping through unnoticed.
-    cause: unknown | undefined;
-}
-
-/**
- * Used to rethrow an error with a user-friendly translatable message while maintaining
- * access to that original underlying error. Downstream consumers can display the
- * `translatedMessage` property in the UI and inspect the underlying error with the
- * `cause` property.
- *
- * The error message will display as English in the console and logs so Element
- * developers can easily understand the error and find the source in the code. It also
- * helps tools like Sentry deduplicate the error, or just generally searching in
- * rageshakes to find all instances regardless of the users locale.
- *
- * @param message - The untranslated error message text, e.g "Something went wrong with %(foo)s".
- * @param substitutionVariablesAndCause - Variable substitutions for the translation and
- * original cause of the error. If there is no cause, just pass `undefined`, e.g { foo:
- * 'bar', cause: err || undefined }
- */
-export class UserFriendlyError extends Error {
-    public readonly translatedMessage: string;
-
-    public constructor(
-        message: TranslationKey,
-        substitutionVariablesAndCause?: Omit<StringVariables, keyof ErrorOptions> | ErrorOptions,
-    ) {
-        // Prevent "Could not find /%\(cause\)s/g in x" logs to the console by removing it from the list
-        const { cause, ...substitutionVariables } = substitutionVariablesAndCause ?? {};
-        const errorOptions = { cause };
-
-        // Create the error with the English version of the message that we want to show up in the logs
-        const englishTranslatedMessage = _t(message, { ...substitutionVariables, locale: "en" });
-        super(englishTranslatedMessage, errorOptions);
-
-        // Also provide a translated version of the error in the users locale to display
-        this.translatedMessage = _t(message, substitutionVariables);
-    }
-}
-
-export function getUserLanguage(): string {
-    const language = SettingsStore.getValue("language", null, /*excludeDefault:*/ true);
-    if (typeof language === "string" && language !== "") {
-        return language;
-    } else {
-        return normalizeLanguageKey(getLanguageFromBrowser());
-    }
-}
-
-// Allow overriding the text displayed when no translation exists
-// Currently only used in unit tests to avoid having to load
-// the translations in element-web
-export function setMissingEntryGenerator(f: (value: string) => void): void {
-    setMissingEntryGeneratorSharedComponents(f);
-}
-
-export async function setLanguage(...preferredLangs: string[]): Promise<void> {
-    PlatformPeg.get()?.setLanguage(preferredLangs);
-
-    const availableLanguages = await getLangsJson();
-    let chosenLanguage = preferredLangs.find((lang) => availableLanguages.hasOwnProperty(lang));
-    if (!chosenLanguage) {
-        // Fallback to en_EN if none is found
-        chosenLanguage = "en";
-        logger.error("Unable to find an appropriate language, preferred: ", preferredLangs);
-    }
-
-    const languageData = await getLanguageRetry(i18nFolder + availableLanguages[chosenLanguage]);
-
-    registerTranslations(chosenLanguage, languageData);
-    setLocale(chosenLanguage);
-
-    await SettingsStore.setValue("language", null, SettingLevel.DEVICE, chosenLanguage);
-    // Adds a lot of noise to test runs, so disable logging there.
-    if (process.env.NODE_ENV !== "test") {
-        logger.log("set language to " + chosenLanguage);
-    }
-
-    // Set 'en' as fallback language:
-    if (chosenLanguage !== "en") {
-        const fallbackLanguageData = await getLanguageRetry(i18nFolder + availableLanguages["en"]);
-        registerTranslations("en", fallbackLanguageData);
-    }
-
-    await registerCustomTranslations();
-}
-
-type Language = {
-    value: string;
-    label: string; // translated
-    labelInTargetLanguage: string; // translated
-};
-
-export async function getAllLanguagesFromJson(): Promise<string[]> {
-    return Object.keys(await getLangsJson());
-}
-
-export async function getAllLanguagesWithLabels(): Promise<Language[]> {
-    const languageNames = new Intl.DisplayNames([getUserLanguage()], { type: "language", style: "short" });
-    const languages = await getAllLanguagesFromJson();
-    return languages.map<Language>((langKey) => {
-        return {
-            value: langKey,
-            label: languageNames.of(langKey)!,
-            labelInTargetLanguage: new Intl.DisplayNames([langKey], { type: "language", style: "short" }).of(langKey)!,
-        };
-    });
-}
-
-export function getLanguagesFromBrowser(): readonly string[] {
-    if (navigator.languages && navigator.languages.length) return navigator.languages;
-    return [navigator.language ?? "en"];
-}
-
-export function getLanguageFromBrowser(): string {
-    return getLanguagesFromBrowser()[0];
-}
-
-export function getCurrentLanguage(): string {
-    return getLocale();
-}
-
-/**
- * Given a list of language codes, pick the most appropriate one
- * given the current language (ie. getCurrentLanguage())
- * English is assumed to be a reasonable default.
- *
- * @param {string[]} langs List of language codes to pick from
- * @returns {string} The most appropriate language code from langs
- */
-export function pickBestLanguage(langs: string[]): string {
-    const currentLang = getCurrentLanguage();
-    const normalisedLangs = langs.map(normalizeLanguageKey);
-
-    {
-        // Best is an exact match
-        const currentLangIndex = normalisedLangs.indexOf(currentLang);
-        if (currentLangIndex > -1) return langs[currentLangIndex];
-    }
-
-    {
-        // Failing that, a different dialect of the same language
-        const closeLangIndex = normalisedLangs.findIndex((l) => l.slice(0, 2) === currentLang.slice(0, 2));
-        if (closeLangIndex > -1) return langs[closeLangIndex];
-    }
-
-    {
-        // Neither of those? Try an english variant.
-        const enIndex = normalisedLangs.findIndex((l) => l.startsWith("en"));
-        if (enIndex > -1) return langs[enIndex];
-    }
-
-    // if nothing else, use the first
-    return langs[0];
-}
-
-interface ICounterpartTranslation {
-    [key: string]:
-        | string
-        | {
-              [pluralisation: string]: string;
-          };
-}
-
-async function getLanguageRetry(langPath: string, num = 3): Promise<ICounterpartTranslation> {
-    return retry(
-        () => getLanguage(langPath),
-        num,
-        (e) => {
-            logger.log("Failed to load i18n", langPath);
-            logger.error(e);
-            return true; // always retry
-        },
-    );
-}
-
-async function getLanguage(langPath: string): Promise<ICounterpartTranslation> {
-    const res = await fetch(langPath, { method: "GET" });
-
-    if (!res.ok) {
-        throw new Error(`Failed to load ${langPath}, got ${res.status}`);
-    }
-
-    return res.json();
-}
-
-let cachedCustomTranslations: TranslationStringsObject | undefined;
-let cachedCustomTranslationsExpire = 0; // zero to trigger expiration right away
-
-// This awkward class exists so the test runner can get at the function. It is
-// not intended for practical or realistic usage.
-export class CustomTranslationOptions {
-    public static lookupFn?: (url: string) => TranslationStringsObject;
-
-    private constructor() {
-        // static access for tests only
-    }
-}
-
-function doRegisterTranslations(customTranslations: TranslationStringsObject): void {
-    // We convert the operator-friendly version into something counterpart can consume.
-    // Map: lang → Record: string → translation
-    const langs: MapWithDefault<string, Record<string, string>> = new MapWithDefault(() => ({}));
-    for (const [translationKey, translations] of Object.entries(customTranslations)) {
-        for (const [lang, translation] of Object.entries(translations)) {
-            _.set(langs.getOrCreate(lang), translationKey.split(KEY_SEPARATOR), translation);
-        }
-    }
-
-    // Finally, tell counterpart about our translations
-    for (const [lang, translations] of langs) {
-        registerTranslations(lang, translations);
-    }
-}
-
-/**
- * Any custom modules with translations to load are parsed first, followed by an
- * optionally defined translations file in the config. If no customization is made,
- * or the file can't be parsed, no action will be taken.
- *
- * This function should be called *after* registering other translations data to
- * ensure it overrides strings properly.
- */
-export async function registerCustomTranslations({
-    testOnlyIgnoreCustomTranslationsCache = false,
-}: {
-    testOnlyIgnoreCustomTranslationsCache?: boolean;
-} = {}): Promise<void> {
-    const moduleTranslations = ModuleRunner.instance.allTranslations;
-    doRegisterTranslations(moduleTranslations);
-
-    const lookupUrl = SdkConfig.get().custom_translations_url;
-    if (!lookupUrl) return; // easy - nothing to do
-
-    try {
-        let json: TranslationStringsObject | undefined;
-        if (testOnlyIgnoreCustomTranslationsCache || Date.now() >= cachedCustomTranslationsExpire) {
-            json = CustomTranslationOptions.lookupFn
-                ? CustomTranslationOptions.lookupFn(lookupUrl)
-                : ((await (await fetch(lookupUrl)).json()) as TranslationStringsObject);
-            cachedCustomTranslations = json;
-
-            // Set expiration to the future, but not too far. Just trying to avoid
-            // repeated, successive, calls to the server rather than anything long-term.
-            cachedCustomTranslationsExpire = Date.now() + 5 * 60 * 1000;
-        } else {
-            json = cachedCustomTranslations;
-        }
-
-        // If the (potentially cached) json is invalid, don't use it.
-        if (!json) return;
-
-        // Finally, register it.
-        doRegisterTranslations(json);
-    } catch (e) {
-        // We consume all exceptions because it's considered non-fatal for custom
-        // translations to break. Most failures will be during initial development
-        // of the json file and not (hopefully) at runtime.
-        logger.warn("Ignoring error while registering custom translations: ", e);
-
-        // Like above: trigger a cache of the json to avoid successive calls.
-        cachedCustomTranslationsExpire = Date.now() + 5 * 60 * 1000;
-    }
-}
diff --git a/apps/web/src/mjolnir/Mjolnir.ts b/apps/web/src/mjolnir/Mjolnir.ts
index 63059b3c04..f1f848bcb3 100644
--- a/apps/web/src/mjolnir/Mjolnir.ts
+++ b/apps/web/src/mjolnir/Mjolnir.ts
@@ -24,8 +24,8 @@ import { Action } from "../dispatcher/actions";
 export class Mjolnir {
     private static instance?: Mjolnir;
 
-    private _lists: BanList[] = []; // eslint-disable-line @typescript-eslint/naming-convention
-    private _roomIds: string[] = []; // eslint-disable-line @typescript-eslint/naming-convention
+    private _lists: BanList[] = [];
+    private _roomIds: string[] = [];
     private mjolnirWatchRef?: string;
     private dispatcherRef?: string;
 
diff --git a/apps/web/src/models/Call.ts b/apps/web/src/models/Call.ts
index 6cf95a0681..fbbb516752 100644
--- a/apps/web/src/models/Call.ts
+++ b/apps/web/src/models/Call.ts
@@ -26,6 +26,7 @@ import {
     MatrixRTCSessionManagerEvents,
 } from "matrix-js-sdk/src/matrixrtc";
 
+// oxlint-disable-next-line no-restricted-imports
 import type EventEmitter from "events";
 import type { IApp } from "../stores/WidgetStore";
 import SettingsStore from "../settings/SettingsStore";
@@ -226,6 +227,7 @@ export abstract class Call extends TypedEventEmitter<CallEvent, CallEventHandler
         // The widget might still be initializing, so wait for it in an async
         // event loop. We need the messaging to be both present and started
         // (have a connected widget API), so register listeners for both cases.
+        // oxlint-disable-next-line no-unmodified-loop-condition
         while (!messaging?.widgetApi) {
             if (messaging) logger.debug(`Messaging present but not yet started for ${this.widgetUid}`);
             else logger.debug(`No messaging yet for ${this.widgetUid}`);
@@ -335,6 +337,7 @@ export abstract class Call extends TypedEventEmitter<CallEvent, CallEventHandler
     };
 }
 
+/** @knipignore - exported for tests */
 export type { JitsiCallMemberContent };
 
 /**
@@ -430,7 +433,7 @@ export class JitsiCall extends Call {
         const event = this.room.currentState.getStateEvents(JitsiCall.MEMBER_EVENT_TYPE, this.client.getUserId()!);
         const content = event?.getContent<JitsiCallMemberContent>();
         const expiresAt = typeof content?.expires_ts === "number" ? content.expires_ts : -Infinity;
-        const devices = expiresAt > Date.now() && Array.isArray(content?.devices) ? content!.devices : [];
+        const devices = expiresAt > Date.now() && Array.isArray(content?.devices) ? content.devices : [];
         const newDevices = fn(devices);
 
         if (newDevices !== null) {
@@ -707,7 +710,11 @@ export class ElementCall extends Call {
      */
     private static appendAnalyticsParams(params: URLSearchParams, client: MatrixClient): void {
         const posthogConfig = SdkConfig.get("posthog");
-        if (!posthogConfig || PosthogAnalytics.instance.getAnonymity() === Anonymity.Disabled) {
+        if (
+            !posthogConfig?.project_api_key ||
+            !posthogConfig?.api_host ||
+            PosthogAnalytics.instance.getAnonymity() === Anonymity.Disabled
+        ) {
             return;
         }
 
@@ -725,7 +732,7 @@ export class ElementCall extends Call {
         // We gate passing sentry behind analytics consent as EC shares data automatically without user-consent,
         // unlike EW where data is shared upon an intentional user action (rageshake).
         const sentryConfig = SdkConfig.get("sentry");
-        if (sentryConfig) {
+        if (sentryConfig?.dsn) {
             params.append("sentryDsn", sentryConfig.dsn);
             params.append("sentryEnvironment", sentryConfig.environment ?? "");
         }
@@ -759,6 +766,8 @@ export class ElementCall extends Call {
             lang: getCurrentLanguage().replace("_", "-"),
             fontScale: (FontWatcher.getRootFontSize() / FontWatcher.getBrowserDefaultFontSize()).toString(),
             theme: "$org.matrix.msc2873.client_theme",
+            // on EW we do not want the gradient EC background.
+            background: "solid",
         });
 
         if (typeof opts.skipLobby === "boolean") {
diff --git a/apps/web/src/models/notificationsettings/keywordRuleId.ts b/apps/web/src/models/notificationsettings/keywordRuleId.ts
new file mode 100644
index 0000000000..987ab1dba8
--- /dev/null
+++ b/apps/web/src/models/notificationsettings/keywordRuleId.ts
@@ -0,0 +1,31 @@
+/*
+Copyright 2026 hayaksi1
+
+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.
+*/
+
+/**
+ * Work out which rule ID a keyword should be stored under.
+ *
+ * A keyword is normally its own rule ID, but homeservers reserve the IDs beginning with a dot for
+ * the rules they define themselves and refuse to store any other, so a keyword such as
+ * `...push complete` cannot be one. The ID drops those leading dots; the rule's pattern, which is
+ * what messages are actually matched against, keeps the keyword exactly as it was typed. That can
+ * leave two keywords wanting the same ID, so one of them is numbered off the end.
+ *
+ * @param keyword - The keyword as the user typed it.
+ * @param existingIds - The rule IDs already in use.
+ * @returns A rule ID the homeserver will accept and no other rule is using.
+ */
+export function keywordRuleId(keyword: string, existingIds: Iterable<string>): string {
+    // A keyword of nothing but dots leaves nothing to name the rule after.
+    const base = keyword.replace(/^\.+/, "") || "keyword";
+
+    const taken = new Set(existingIds);
+    if (!taken.has(base)) return base;
+
+    let suffix = 2;
+    while (taken.has(`${base}-${suffix}`)) suffix++;
+    return `${base}-${suffix}`;
+}
diff --git a/apps/web/src/models/notificationsettings/reconcileNotificationSettings.ts b/apps/web/src/models/notificationsettings/reconcileNotificationSettings.ts
index fdf4f4925b..f32cfbeae7 100644
--- a/apps/web/src/models/notificationsettings/reconcileNotificationSettings.ts
+++ b/apps/web/src/models/notificationsettings/reconcileNotificationSettings.ts
@@ -15,6 +15,7 @@ import { RoomNotifState } from "../../RoomNotifs";
 import { type NotificationSettings } from "./NotificationSettings";
 import { type PushRuleDiff, type PushRuleUpdate } from "./PushRuleDiff";
 import { buildPushRuleMap } from "./PushRuleMap";
+import { keywordRuleId } from "./keywordRuleId";
 
 function toStandardRules(
     model: NotificationSettings,
@@ -225,9 +226,12 @@ export function reconcileNotificationSettings(
         }
         newKeywords.delete(rule.pattern!);
     }
+    const ruleIds = new Set(contentRules.map((rule) => rule.rule_id));
     for (const keyword of newKeywords) {
+        const ruleId = keywordRuleId(keyword, ruleIds);
+        ruleIds.add(ruleId);
         changes.added.push({
-            rule_id: keyword,
+            rule_id: ruleId,
             kind: PushRuleKind.ContentSpecific,
             default: false,
             enabled: model.mentions.keywords,
diff --git a/apps/web/src/modules/Api.ts b/apps/web/src/modules/Api.ts
index 5d9eddfab2..df822131e1 100644
--- a/apps/web/src/modules/Api.ts
+++ b/apps/web/src/modules/Api.ts
@@ -34,6 +34,8 @@ import { WidgetLifecycleApi } from "./WidgetLifecycleApi.ts";
 import { WidgetApi } from "./WidgetApi.ts";
 import { CustomisationsApi } from "./customisationsApi.ts";
 import { ComposerApi } from "./ComposerApi.ts";
+import { StorageHelperApi } from "./StorageHelperApi.ts";
+import { SettingsApi } from "./SettingsApi.ts";
 import defaultDispatcher from "../dispatcher/dispatcher.ts";
 
 const legacyCustomisationsFactory = <T extends object>(baseCustomisations: T) => {
@@ -59,7 +61,6 @@ export class ModuleApi implements Api {
         return ModuleApi._instance;
     }
 
-    /* eslint-disable @typescript-eslint/naming-convention */
     public async _registerLegacyModule(LegacyModule: RuntimeModuleConstructor): Promise<void> {
         ModuleRunner.instance.registerModule((api) => new LegacyModule(api));
     }
@@ -74,11 +75,11 @@ export class ModuleApi implements Api {
     public readonly _registerLegacyRoomListCustomisations = legacyCustomisationsFactory(RoomListCustomisations);
     public readonly _registerLegacyUserIdentifierCustomisations =
         legacyCustomisationsFactory(UserIdentifierCustomisations);
-    public readonly _registerLegacyWidgetPermissionsCustomisations =
-        legacyCustomisationsFactory(WidgetPermissionCustomisations);
+    public readonly _registerLegacyWidgetPermissionsCustomisations: (
+        customisations: typeof WidgetPermissionCustomisations,
+    ) => void = legacyCustomisationsFactory(WidgetPermissionCustomisations);
     public readonly _registerLegacyWidgetVariablesCustomisations =
         legacyCustomisationsFactory(WidgetVariableCustomisations);
-    /* eslint-enable @typescript-eslint/naming-convention */
 
     public readonly navigation = new NavigationApi();
     public readonly openDialog = openDialog;
@@ -97,6 +98,8 @@ export class ModuleApi implements Api {
     public readonly client = new ClientApi();
     public readonly stores = new StoresApi();
     public readonly composer = new ComposerApi(defaultDispatcher);
+    public readonly storageHelper = new StorageHelperApi();
+    public readonly settings = new SettingsApi();
 
     public createRoot(element: Element): Root {
         return createRoot(element);
diff --git a/apps/web/src/modules/ComposerApi.ts b/apps/web/src/modules/ComposerApi.ts
index c3cce62485..a4b4deed13 100644
--- a/apps/web/src/modules/ComposerApi.ts
+++ b/apps/web/src/modules/ComposerApi.ts
@@ -5,19 +5,76 @@ 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 ComposerApi as ModuleComposerApi } from "@element-hq/element-web-module-api";
+import {
+    type ComposerApi as ModuleComposerApi,
+    type ComposerApiFileUploadOption,
+    type ComposerApiTarget,
+} from "@element-hq/element-web-module-api";
+import { TypedEventEmitter } from "matrix-js-sdk/src/matrix";
 
 import type { MatrixDispatcher } from "../dispatcher/dispatcher";
 import { Action } from "../dispatcher/actions";
-import type { ComposerInsertPayload } from "../dispatcher/payloads/ComposerInsertPayload";
+import { ComposerType, type ComposerInsertPayload } from "../dispatcher/payloads/ComposerInsertPayload";
+import { TimelineRenderingType } from "../contexts/RoomContext";
+import type { ComposerInsertFilesPayload } from "../dispatcher/payloads/ComposerInsertFilePayload";
 
-export class ComposerApi implements ModuleComposerApi {
-    public constructor(private readonly dispatcher: MatrixDispatcher) {}
+export enum ModuleComposerApiEvents {
+    UploaderOptionsChanged = "uploaderOptionsChanged",
+}
 
-    public insertPlaintextIntoComposer(plaintext: string): void {
+interface ModuleComposerApiEventsMap {
+    [ModuleComposerApiEvents.UploaderOptionsChanged]: (option: ComposerApiFileUploadOption) => void;
+}
+
+export class ComposerApi
+    extends TypedEventEmitter<ModuleComposerApiEvents, ModuleComposerApiEventsMap>
+    implements ModuleComposerApi
+{
+    private readonly configuredFileUploadOptions = new Map<string, ComposerApiFileUploadOption>();
+
+    public constructor(private readonly dispatcher: MatrixDispatcher) {
+        super();
+    }
+
+    /**
+     * List of possible file upload options.
+     */
+    public get fileUploadOptions(): ComposerApiFileUploadOption[] {
+        return [...this.configuredFileUploadOptions.values()];
+    }
+
+    public addFileUploadOption(option: ComposerApiFileUploadOption): void {
+        if (this.configuredFileUploadOptions.has(option.type)) {
+            throw new Error(`Option "${option.type}" already exists`);
+        }
+        if (option.type === "local") {
+            throw new Error(`Option "local" is reserved`);
+        }
+        this.configuredFileUploadOptions.set(option.type, option);
+        this.emit(ModuleComposerApiEvents.UploaderOptionsChanged, option);
+    }
+
+    public openFileUploadConfirmation(files: File[], view: ComposerApiTarget = { view: "room" }): void {
+        if (!["room", "thread"].includes(view.view)) {
+            throw new Error(`Invalid view '${view.view}'`);
+        }
+        this.dispatcher.dispatch({
+            action: Action.ComposerFileInsert,
+            files,
+            timelineRenderingType: view.view === "room" ? TimelineRenderingType.Room : TimelineRenderingType.Thread,
+        } satisfies ComposerInsertFilesPayload);
+    }
+
+    public insertPlaintextIntoComposer(plaintext: string, view: ComposerApiTarget = { view: "room" }): void {
+        if (!["room", "thread"].includes(view.view)) {
+            throw new Error(`Invalid view '${view.view}'`);
+        }
         this.dispatcher.dispatch({
             action: Action.ComposerInsert,
             text: plaintext,
+            timelineRenderingType: view.view === "room" ? TimelineRenderingType.Room : TimelineRenderingType.Thread,
+            // We only support send.
+            composerType: ComposerType.Send,
         } satisfies ComposerInsertPayload);
     }
 }
diff --git a/apps/web/src/modules/ConfigApi.ts b/apps/web/src/modules/ConfigApi.ts
index 512a1c4abe..ebdb4bb8ea 100644
--- a/apps/web/src/modules/ConfigApi.ts
+++ b/apps/web/src/modules/ConfigApi.ts
@@ -13,7 +13,7 @@ export class ConfigApi implements IConfigApi {
     public get<K extends keyof Config>(key: K): Config[K];
     public get<K extends keyof Config = never>(key?: K): Config | Config[K] {
         if (key === undefined) {
-            return SdkConfig.get() as Config;
+            return SdkConfig.get();
         }
         return SdkConfig.get(key);
     }
diff --git a/apps/web/src/modules/ProxiedModuleApi.ts b/apps/web/src/modules/ProxiedModuleApi.ts
index 9bccf9f71f..84a8fa0d3c 100644
--- a/apps/web/src/modules/ProxiedModuleApi.ts
+++ b/apps/web/src/modules/ProxiedModuleApi.ts
@@ -143,7 +143,7 @@ export class ProxiedModuleApi implements ModuleApi {
 
         return {
             homeserverUrl: hsUrl,
-            userId: creds.user_id!,
+            userId: creds.user_id,
             deviceId: creds.device_id!,
             accessToken: creds.access_token!,
         };
diff --git a/apps/web/src/modules/SettingsApi.test.ts b/apps/web/src/modules/SettingsApi.test.ts
new file mode 100644
index 0000000000..45bee785bb
--- /dev/null
+++ b/apps/web/src/modules/SettingsApi.test.ts
@@ -0,0 +1,27 @@
+/*
+Copyright 2026 Element Creations 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 { describe, it, expect, vi } from "vitest";
+
+import SettingsStore from "../settings/SettingsStore";
+import { SettingsApi } from "./SettingsApi";
+
+describe("SettingsApi", () => {
+    it("should return the value from SettingsStore.getValue", () => {
+        const spy = vi.spyOn(SettingsStore, "getValue").mockReturnValue("en" as any);
+        const api = new SettingsApi();
+        expect(api.getValue("language")).toBe("en");
+        expect(spy).toHaveBeenCalledWith("language", undefined, undefined);
+    });
+
+    it("should pass roomId and excludeDefault through to SettingsStore.getValue", () => {
+        const spy = vi.spyOn(SettingsStore, "getValue").mockReturnValue(null);
+        const api = new SettingsApi();
+        api.getValue("m.setting", "!room:example.org", true);
+        expect(spy).toHaveBeenCalledWith("m.setting", "!room:example.org", true);
+    });
+});
diff --git a/apps/web/src/modules/SettingsApi.ts b/apps/web/src/modules/SettingsApi.ts
new file mode 100644
index 0000000000..8140395a8f
--- /dev/null
+++ b/apps/web/src/modules/SettingsApi.ts
@@ -0,0 +1,16 @@
+/*
+Copyright 2026 Element Creations 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 { SettingsApi as ISettingsApi } from "@element-hq/element-web-module-api";
+import SettingsStore from "../settings/SettingsStore";
+
+export class SettingsApi implements ISettingsApi {
+    public getValue<T = any>(settingName: string, roomId?: string | null, excludeDefault?: boolean): T | undefined {
+        //@ts-expect-error: SettingsStore.getValue will throw on an invalid setting name anyway.
+        return SettingsStore.getValue(settingName, roomId, excludeDefault);
+    }
+}
diff --git a/apps/web/src/modules/StorageHelperApi.test.ts b/apps/web/src/modules/StorageHelperApi.test.ts
new file mode 100644
index 0000000000..d476accd95
--- /dev/null
+++ b/apps/web/src/modules/StorageHelperApi.test.ts
@@ -0,0 +1,32 @@
+/*
+Copyright 2026 Element Creations 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.
+*/
+
+// @vitest-environment happy-dom
+
+import { describe, it, expect, vi } from "vitest";
+import { mockPlatformPeg } from "test-utils";
+
+import { StorageHelperApi } from "./StorageHelperApi";
+
+describe("StorageHelperApi", () => {
+    it("should return the pickle key from the platform", async () => {
+        const mockPlatform = mockPlatformPeg();
+        vi.spyOn(mockPlatform, "getPickleKey").mockResolvedValue("test-pickle-key");
+
+        const api = new StorageHelperApi();
+        await expect(api.getPickleKey("@alice:example.org", "DEVICE123")).resolves.toBe("test-pickle-key");
+        expect(mockPlatform.getPickleKey).toHaveBeenCalledWith("@alice:example.org", "DEVICE123");
+    });
+
+    it("should return null if the platform has no pickle key stored", async () => {
+        const mockPlatform = mockPlatformPeg();
+        vi.spyOn(mockPlatform, "getPickleKey").mockResolvedValue(null);
+
+        const api = new StorageHelperApi();
+        await expect(api.getPickleKey("@alice:example.org", "DEVICE123")).resolves.toBeNull();
+    });
+});
diff --git a/apps/web/src/modules/StorageHelperApi.ts b/apps/web/src/modules/StorageHelperApi.ts
new file mode 100644
index 0000000000..42753c6627
--- /dev/null
+++ b/apps/web/src/modules/StorageHelperApi.ts
@@ -0,0 +1,15 @@
+/*
+Copyright 2026 Element Creations 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 { StorageHelperApi as IStorageHelperApi } from "@element-hq/element-web-module-api";
+import PlatformPeg from "../PlatformPeg";
+
+export class StorageHelperApi implements IStorageHelperApi {
+    public async getPickleKey(userId: string, deviceId: string): Promise<string | null> {
+        return PlatformPeg.get()!.getPickleKey(userId, deviceId);
+    }
+}
diff --git a/apps/web/src/modules/customComponentApi.ts b/apps/web/src/modules/customComponentApi.ts
index 7fd297b94b..a6ead66cb5 100644
--- a/apps/web/src/modules/customComponentApi.ts
+++ b/apps/web/src/modules/customComponentApi.ts
@@ -17,10 +17,13 @@ import type {
     MatrixEvent as ModuleMatrixEvent,
     CustomRoomPreviewBarRenderFunction,
     CustomLoginRenderFunction,
+    CustomComposerPreviewRenderFunction,
+    CustomComposerPreviewComponentProps,
 } from "@element-hq/element-web-module-api";
 import type React from "react";
 
 type EventTypeOrFilter = Parameters<ICustomComponentsApi["registerMessageRenderer"]>[0];
+type ComposerPreviewFilterFn = Parameters<ICustomComponentsApi["registerComposerPreview"]>[0];
 
 type EventRenderer = {
     eventTypeOrFilter: EventTypeOrFilter;
@@ -37,6 +40,11 @@ interface CustomMessageRenderHints extends Omit<ModuleCustomCustomMessageRenderH
     allowDownloadingMedia?: () => Promise<boolean>;
 }
 
+type ComposerPreviewRenderer = {
+    filter: ComposerPreviewFilterFn;
+    renderer: CustomComposerPreviewRenderFunction;
+};
+
 export class CustomComponentsApi implements ICustomComponentsApi {
     /**
      * Convert a matrix-js-sdk event into a ModuleMatrixEvent.
@@ -66,6 +74,7 @@ export class CustomComponentsApi implements ICustomComponentsApi {
     }
 
     private readonly registeredMessageRenderers: EventRenderer[] = [];
+    private readonly registeredComposerPreviewRenderers: ComposerPreviewRenderer[] = [];
 
     public registerMessageRenderer(
         eventTypeOrFilter: EventTypeOrFilter,
@@ -80,7 +89,7 @@ export class CustomComponentsApi implements ICustomComponentsApi {
      * @param mxEvent The message event being rendered.
      * @returns The registered renderer.
      */
-    private selectRenderer(mxEvent: ModuleMatrixEvent): EventRenderer | undefined {
+    private selectMessageRenderer(mxEvent: ModuleMatrixEvent): EventRenderer | undefined {
         return this.registeredMessageRenderers.find((renderer) => {
             if (typeof renderer.eventTypeOrFilter === "string") {
                 return renderer.eventTypeOrFilter === mxEvent.type;
@@ -106,7 +115,7 @@ export class CustomComponentsApi implements ICustomComponentsApi {
         originalComponent?: (props?: OriginalMessageComponentProps) => React.JSX.Element,
     ): React.JSX.Element | null {
         const moduleEv = CustomComponentsApi.getModuleMatrixEvent(props.mxEvent);
-        const renderer = moduleEv && this.selectRenderer(moduleEv);
+        const renderer = moduleEv && this.selectMessageRenderer(moduleEv);
         if (renderer) {
             try {
                 return renderer.renderer({ ...props, mxEvent: moduleEv }, originalComponent);
@@ -125,7 +134,7 @@ export class CustomComponentsApi implements ICustomComponentsApi {
      */
     public getHintsForMessage(mxEvent: MatrixEvent): CustomMessageRenderHints | null {
         const moduleEv = CustomComponentsApi.getModuleMatrixEvent(mxEvent);
-        const renderer = moduleEv && this.selectRenderer(moduleEv);
+        const renderer = moduleEv && this.selectMessageRenderer(moduleEv);
         if (renderer) {
             return {
                 ...renderer.hints,
@@ -171,4 +180,31 @@ export class CustomComponentsApi implements ICustomComponentsApi {
     public registerLoginComponent(renderer: CustomLoginRenderFunction): void {
         this._loginRenderer = renderer;
     }
+
+    public registerComposerPreview(
+        filter: ComposerPreviewFilterFn,
+        renderer: CustomComposerPreviewRenderFunction,
+    ): void {
+        this.registeredComposerPreviewRenderers.push({ filter, renderer });
+    }
+    /**
+     * Render the component for a composer preview.
+     * @param props Props to be passed to the custom renderer.
+     * @param originalComponent Function that will be rendered if no custom renderers are present, or as a child of a custom component.
+     * @returns A component if a custom renderer was found. Otherwise null.
+     */
+    public renderComposerPreview(
+        props: CustomComposerPreviewComponentProps,
+        originalComponent: (props?: CustomComposerPreviewComponentProps) => React.JSX.Element,
+    ): React.JSX.Element | null {
+        const renderer = this.registeredComposerPreviewRenderers.find(({ filter }) => filter(props.text, props.roomId));
+        if (renderer) {
+            try {
+                return renderer.renderer({ ...props }, originalComponent);
+            } catch (ex) {
+                logger.warn("Composer preview failed to render", ex);
+            }
+        }
+        return null;
+    }
 }
diff --git a/apps/web/test/unit-tests/notifications/ContentRules-test.ts b/apps/web/src/notifications/ContentRules.test.ts
similarity index 90%
rename from apps/web/test/unit-tests/notifications/ContentRules-test.ts
rename to apps/web/src/notifications/ContentRules.test.ts
index 7f900b1d08..b1dc504629 100644
--- a/apps/web/test/unit-tests/notifications/ContentRules-test.ts
+++ b/apps/web/src/notifications/ContentRules.test.ts
@@ -7,9 +7,10 @@ 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 { describe, it, expect } from "vitest";
 import { TweakName, PushRuleActionName, type TweakHighlight, type TweakSound } from "matrix-js-sdk/src/matrix";
 
-import { ContentRules, PushRuleVectorState } from "../../../src/notifications";
+import { ContentRules, PushRuleVectorState } from ".";
 
 const NORMAL_RULE = {
     actions: [PushRuleActionName.Notify, { set_tweak: TweakName.Highlight, value: false } as TweakHighlight],
@@ -57,7 +58,7 @@ describe("ContentRules", function () {
             const rules = { global: { content: [NORMAL_RULE, USERNAME_RULE] } };
 
             const parsed = ContentRules.parseContentRules(rules);
-            expect(parsed.rules.length).toEqual(1);
+            expect(parsed.rules).toHaveLength(1);
             expect(parsed.rules[0]).toEqual(NORMAL_RULE);
             expect(parsed.vectorState).toEqual(PushRuleVectorState.ON);
             expect(parsed.externalRules).toEqual([]);
@@ -67,7 +68,7 @@ describe("ContentRules", function () {
             const rules = { global: { content: [LOUD_RULE, USERNAME_RULE] } };
 
             const parsed = ContentRules.parseContentRules(rules);
-            expect(parsed.rules.length).toEqual(1);
+            expect(parsed.rules).toHaveLength(1);
             expect(parsed.rules[0]).toEqual(LOUD_RULE);
             expect(parsed.vectorState).toEqual(PushRuleVectorState.LOUD);
             expect(parsed.externalRules).toEqual([]);
@@ -77,10 +78,10 @@ describe("ContentRules", function () {
             const rules = { global: { content: [LOUD_RULE, NORMAL_RULE, USERNAME_RULE] } };
 
             const parsed = ContentRules.parseContentRules(rules);
-            expect(parsed.rules.length).toEqual(1);
+            expect(parsed.rules).toHaveLength(1);
             expect(parsed.rules[0]).toEqual(LOUD_RULE);
             expect(parsed.vectorState).toEqual(PushRuleVectorState.LOUD);
-            expect(parsed.externalRules.length).toEqual(1);
+            expect(parsed.externalRules).toHaveLength(1);
             expect(parsed.externalRules[0]).toEqual(NORMAL_RULE);
         });
     });
diff --git a/apps/web/src/notifications/ContentRules.ts b/apps/web/src/notifications/ContentRules.ts
index ee8dabd16d..cedd539f7c 100644
--- a/apps/web/src/notifications/ContentRules.ts
+++ b/apps/web/src/notifications/ContentRules.ts
@@ -16,6 +16,7 @@ export interface IContentRules {
     externalRules: IAnnotatedPushRule[];
 }
 
+// oxlint-disable-next-line typescript/no-extraneous-class
 export class ContentRules {
     /**
      * Extract the keyword rules from a list of rules, and parse them
diff --git a/apps/web/src/notifications/NotificationUtils.ts b/apps/web/src/notifications/NotificationUtils.ts
index cce937551c..3871748710 100644
--- a/apps/web/src/notifications/NotificationUtils.ts
+++ b/apps/web/src/notifications/NotificationUtils.ts
@@ -19,6 +19,7 @@ export interface PushRuleActions {
     highlight?: boolean;
 }
 
+// oxlint-disable-next-line typescript/no-extraneous-class
 export class NotificationUtils {
     // Encodes a dictionary of {
     //   "notify": true/false,
diff --git a/apps/web/test/unit-tests/notifications/PushRuleVectorState-test.ts b/apps/web/src/notifications/PushRuleVectorState.test.ts
similarity index 94%
rename from apps/web/test/unit-tests/notifications/PushRuleVectorState-test.ts
rename to apps/web/src/notifications/PushRuleVectorState.test.ts
index 8179bde13e..14a6cb8694 100644
--- a/apps/web/test/unit-tests/notifications/PushRuleVectorState-test.ts
+++ b/apps/web/src/notifications/PushRuleVectorState.test.ts
@@ -7,9 +7,10 @@ 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 { describe, it, expect } from "vitest";
 import { PushRuleActionName, type TweakHighlight, TweakName, type TweakSound } from "matrix-js-sdk/src/matrix";
 
-import { PushRuleVectorState } from "../../../src/notifications";
+import { PushRuleVectorState } from "./PushRuleVectorState";
 
 describe("PushRuleVectorState", function () {
     describe("contentRuleVectorStateKind", function () {
diff --git a/apps/web/src/notifications/PushRuleVectorState.ts b/apps/web/src/notifications/PushRuleVectorState.ts
index 465299095a..1435957f24 100644
--- a/apps/web/src/notifications/PushRuleVectorState.ts
+++ b/apps/web/src/notifications/PushRuleVectorState.ts
@@ -21,6 +21,7 @@ export enum VectorState {
     Loud = "loud",
 }
 
+// oxlint-disable-next-line typescript/no-extraneous-class
 export class PushRuleVectorState {
     // Backwards compatibility (things should probably be using the enum above instead)
     public static OFF = VectorState.Off;
@@ -37,7 +38,7 @@ export class PushRuleVectorState {
     /**
      * Convert a PushRuleVectorState to a list of actions
      *
-     * @return [object] list of push-rule actions
+     * @returns [object] list of push-rule actions
      */
     public static actionsFor(pushRuleVectorState?: VectorState): PushRuleAction[] {
         if (pushRuleVectorState === VectorState.On) {
diff --git a/apps/web/src/notifications/StandardActions.ts b/apps/web/src/notifications/StandardActions.ts
index b40e8b4d50..eac2c3c807 100644
--- a/apps/web/src/notifications/StandardActions.ts
+++ b/apps/web/src/notifications/StandardActions.ts
@@ -13,6 +13,7 @@ import { NotificationUtils } from "./NotificationUtils";
 
 const encodeActions = NotificationUtils.encodeActions;
 
+// oxlint-disable-next-line typescript/no-extraneous-class
 export class StandardActions {
     public static ACTION_NOTIFY = encodeActions({ notify: true });
     public static ACTION_NOTIFY_DEFAULT_SOUND = encodeActions({ notify: true, sound: "default" });
diff --git a/apps/web/src/phonenumber.ts b/apps/web/src/phonenumber.ts
index dbf49e65b9..a5d67e3973 100644
--- a/apps/web/src/phonenumber.ts
+++ b/apps/web/src/phonenumber.ts
@@ -15,7 +15,7 @@ const PHONE_NUMBER_REGEXP = /^[0-9 -.]+$/;
  * @param {String} phoneNumber The string to validate. This could be
  *     either an international format number (MSISDN or e.164) or
  *     a national-format number.
- * @return True if the number could be a valid phone number, otherwise false.
+ * @returns True if the number could be a valid phone number, otherwise false.
  */
 export function looksValid(phoneNumber: string): boolean {
     return PHONE_NUMBER_REGEXP.test(phoneNumber);
diff --git a/apps/web/src/rageshake/rageshake.ts b/apps/web/src/rageshake/rageshake.ts
index fbfedf0e4c..0ce1966478 100644
--- a/apps/web/src/rageshake/rageshake.ts
+++ b/apps/web/src/rageshake/rageshake.ts
@@ -109,7 +109,7 @@ export class ConsoleLogger {
     /**
      * Retrieve log lines to flush to disk.
      * @param {boolean} keepLogs True to not delete logs after flushing.
-     * @return {string} \n delimited log lines to flush.
+     * @returns {string} \n delimited log lines to flush.
      */
     public flush(keepLogs?: boolean): string {
         // The ConsoleLogger doesn't care how these end up on disk, it just
@@ -139,7 +139,7 @@ export class IndexedDBLogStore {
     }
 
     /**
-     * @return {Promise} Resolves when the store is ready.
+     * @returns {Promise} Resolves when the store is ready.
      */
     public connect(): Promise<void> {
         const req = this.indexedDB.open("logs");
@@ -195,7 +195,7 @@ export class IndexedDBLogStore {
      * This guarantees that we will always eventually do a flush when flush() is
      * called.
      *
-     * @return {Promise} Resolved when the logs have been flushed.
+     * @returns {Promise} Resolved when the logs have been flushed.
      */
     public flush(): Promise<void> {
         // check if a flush() operation is ongoing
@@ -250,7 +250,7 @@ export class IndexedDBLogStore {
      * returned are deleted at the same time, so this can be called at startup
      * to do house-keeping to keep the logs from growing too large.
      *
-     * @return {Promise<Object[]>} Resolves to an array of objects. The array is
+     * @returns {Promise<Object[]>} Resolves to an array of objects. The array is
      * sorted in time (oldest first) based on when the log file was created (the
      * log ID). The objects have said log ID in an "id" field and "lines" which
      * is a big string with all the new-line delimited logs.
@@ -421,7 +421,7 @@ export class IndexedDBLogStore {
                 resolve();
             };
             txn.onerror = () => {
-                reject(new Error("Failed to delete logs for " + `'${id}' : ${query.error?.message}`));
+                reject(new Error(`Failed to delete logs for '${id}' : ${query.error?.message}`));
             };
             // delete last modified entries
             const lastModStore = txn.objectStore("logslastmod");
@@ -455,7 +455,7 @@ export class IndexedDBLogStore {
  * @param {Function} resultMapper A function which is repeatedly called with a
  * Cursor.
  * Return the data you want to keep.
- * @return {Promise<T[]>} Resolves to an array of whatever you returned from
+ * @returns {Promise<T[]>} Resolves to an array of whatever you returned from
  * resultMapper.
  */
 function selectQuery<T>(
@@ -487,7 +487,7 @@ function selectQuery<T>(
  * Modifies globals.
  * @param {boolean} setUpPersistence When true (default), the persistence will
  * be set up immediately for the logs.
- * @return {Promise} Resolves when set up.
+ * @returns {Promise} Resolves when set up.
  */
 export function init(setUpPersistence = true): Promise<void> {
     if (global.mx_rage_initPromise) {
@@ -512,7 +512,7 @@ export function init(setUpPersistence = true): Promise<void> {
 /**
  * Try to start up the rageshake storage for logs. If not possible (client unsupported)
  * then this no-ops.
- * @return {Promise} Resolves when complete.
+ * @returns {Promise} Resolves when complete.
  */
 export function tryInitStorage(): Promise<void> {
     if (global.mx_rage_initStoragePromise) {
@@ -558,7 +558,7 @@ export function flush(): void {
  * @deprecated There is no need to call this explicitly: it will be done as a side-effect of {@link tryInitStorage},
  * or {@link init} with `setUpPersistence: true`.
  *
- * @return {Promise} Resolves if cleaned logs.
+ * @returns {Promise} Resolves if cleaned logs.
  */
 export async function cleanup(): Promise<void> {
     if (!global.mx_rage_store) {
@@ -570,7 +570,7 @@ export async function cleanup(): Promise<void> {
 /**
  * Get a recent snapshot of the logs, ready for attaching to a bug report
  *
- * @return {Array<{lines: string, id, string}>}  list of log data
+ * @returns {Array<{lines: string, id, string}>}  list of log data
  */
 export async function getLogsForReport(): Promise<{ lines: string; id: string }[]> {
     if (!global.mx_rage_logger) {
diff --git a/apps/web/src/rageshake/submit-rageshake.ts b/apps/web/src/rageshake/submit-rageshake.ts
index f341664f05..e69c1429c3 100644
--- a/apps/web/src/rageshake/submit-rageshake.ts
+++ b/apps/web/src/rageshake/submit-rageshake.ts
@@ -320,8 +320,8 @@ async function collectLogs(
         let buf = new TextEncoder().encode(entry.lines);
 
         // compress
-        if (gzipLogs) {
-            buf = pako!.gzip(buf);
+        if (pako) {
+            buf = pako.gzip(buf).slice();
         }
 
         body.append("compressed-log", new Blob([buf]), entry.id);
@@ -340,7 +340,7 @@ async function collectLogs(
  *
  * @param {function(string)} opts.progressCallback Callback to call with progress updates
  *
- * @return {Promise<string>} URL returned by the rageshake server
+ * @returns {Promise<string>} URL returned by the rageshake server
  *
  * @throws A RageshakeError when the rageshake server responds with an error. This will be `RS_UNKNOWN` if the
  *         the server does not respond with an expected body format.
@@ -361,7 +361,7 @@ export default async function sendBugReport(bugReportEndpoint?: string, opts: IO
  * Loads a bug report into a tarball.
  *
  * @param opts optional dictionary of options
- * @return Resolves with a Tarball object.
+ * @returns Resolves with a Tarball object.
  */
 export async function loadBugReport(opts: IOpts = {}): Promise<Tar> {
     const Tar = (await import("tar-js")).default;
@@ -395,7 +395,7 @@ export async function loadBugReport(opts: IOpts = {}): Promise<Tar> {
  * but instead causes the browser to download the files locally.
  *
  * @param opts optional dictionary of options
- * @return Resolved when the bug report is downloaded (or started).
+ * @returns Resolved when the bug report is downloaded (or started).
  */
 export async function downloadBugReport(opts: IOpts = {}): Promise<void> {
     const tape = await loadBugReport(opts);
diff --git a/apps/web/src/renderer/code-block.tsx b/apps/web/src/renderer/code-block.tsx
index 78b8282489..d44d464eaa 100644
--- a/apps/web/src/renderer/code-block.tsx
+++ b/apps/web/src/renderer/code-block.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 
-import { type RendererMap } from "./utils.tsx";
+import { type RendererMap } from "./utils.ts";
 import CodeBlock from "../components/views/messages/CodeBlock.tsx";
 
 /**
diff --git a/apps/web/src/renderer/link-tooltip.tsx b/apps/web/src/renderer/link-tooltip.tsx
index 1c66b6d8e7..8358d84c7f 100644
--- a/apps/web/src/renderer/link-tooltip.tsx
+++ b/apps/web/src/renderer/link-tooltip.tsx
@@ -10,7 +10,7 @@ import React from "react";
 import { domToReact } from "html-react-parser";
 
 import LinkWithTooltip from "../components/views/elements/LinkWithTooltip";
-import { getSingleTextContentNode, type RendererMap } from "./utils.tsx";
+import { getSingleTextContentNode, type RendererMap } from "./utils.ts";
 
 /**
  * Wraps ambiguous links in a tooltip trigger that shows the full URL.
@@ -22,7 +22,7 @@ export const ambiguousLinkTooltipRenderer: RendererMap = {
 
         const href = anchor.attribs["href"];
         if (href && href !== getSingleTextContentNode(anchor)) {
-            let tooltip = href as string;
+            let tooltip = href;
             try {
                 tooltip = new URL(href, window.location.href).toString();
             } catch {
diff --git a/apps/web/src/renderer/pill.tsx b/apps/web/src/renderer/pill.tsx
index 9157c1181a..647dab0fb6 100644
--- a/apps/web/src/renderer/pill.tsx
+++ b/apps/web/src/renderer/pill.tsx
@@ -13,10 +13,11 @@ import { textContent } from "domutils";
 import reactStringReplace from "react-string-replace";
 import { PushProcessor } from "matrix-js-sdk/src/pushprocessor";
 
-import { Pill, PillType } from "../components/views/elements/Pill";
+import { Pill } from "../components/views/elements/Pill";
+import { PillType } from "../components/views/elements/PillType";
 import { parsePermalink } from "../utils/permalinks/Permalinks";
 import { type PermalinkParts } from "../utils/permalinks/PermalinkConstructor";
-import { hasParentMatching, type RendererMap, type ParentNode } from "./utils.tsx";
+import { hasParentMatching, type RendererMap, type ParentNode } from "./utils.ts";
 
 const AT_ROOM_REGEX = PushProcessor.getPushRuleGlobRegex("@room", true, "gmi");
 
diff --git a/apps/web/src/renderer/spoiler.tsx b/apps/web/src/renderer/spoiler.tsx
index 7b71295c08..59bc36af6f 100644
--- a/apps/web/src/renderer/spoiler.tsx
+++ b/apps/web/src/renderer/spoiler.tsx
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 import React from "react";
 import { domToReact, type DOMNode } from "html-react-parser";
 
-import { type RendererMap } from "./utils.tsx";
+import { type RendererMap } from "./utils.ts";
 import Spoiler from "../components/views/elements/Spoiler.tsx";
 
 /**
diff --git a/apps/web/src/renderer/utils.tsx b/apps/web/src/renderer/utils.ts
similarity index 100%
rename from apps/web/src/renderer/utils.tsx
rename to apps/web/src/renderer/utils.ts
diff --git a/apps/web/src/resizer/distributors/collapse.ts b/apps/web/src/resizer/distributors/collapse.ts
deleted file mode 100644
index bd0e874cc4..0000000000
--- a/apps/web/src/resizer/distributors/collapse.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { BaseDistributor } from "./fixed";
-import ResizeItem from "../item";
-import { type IConfig } from "../resizer";
-import type Resizer from "../resizer";
-import type Sizer from "../sizer";
-
-export interface ICollapseConfig extends IConfig {
-    toggleSize: number;
-    onCollapsed?(collapsed: boolean, id: string | null, element: HTMLElement): void;
-    isItemCollapsed(element: HTMLElement): boolean;
-}
-
-export class CollapseItem extends ResizeItem<ICollapseConfig> {
-    public notifyCollapsed(collapsed: boolean): void {
-        this.resizer.config?.onCollapsed?.(collapsed, this.id, this.domNode);
-    }
-
-    public get isCollapsed(): boolean {
-        return this.resizer.config?.isItemCollapsed?.(this.domNode) ?? false;
-    }
-}
-
-export default class CollapseDistributor extends BaseDistributor<ICollapseConfig, CollapseItem> {
-    public static createItem(
-        resizeHandle: HTMLDivElement,
-        resizer: Resizer<ICollapseConfig, CollapseItem>,
-        sizer: Sizer,
-        container?: HTMLElement,
-    ): CollapseItem {
-        return new CollapseItem(resizeHandle, resizer, sizer, container);
-    }
-
-    private readonly toggleSize: number | undefined;
-    private isCollapsed: boolean;
-
-    public constructor(item: CollapseItem) {
-        super(item);
-        this.toggleSize = item.resizer?.config?.toggleSize;
-        this.isCollapsed = item.isCollapsed;
-    }
-
-    public resize(newSize: number): void {
-        const isCollapsedSize = !!this.toggleSize && newSize < this.toggleSize;
-        if (isCollapsedSize !== this.isCollapsed) {
-            this.isCollapsed = isCollapsedSize;
-            this.item.notifyCollapsed(isCollapsedSize);
-        }
-        if (!isCollapsedSize) {
-            super.resize(newSize);
-        }
-    }
-}
diff --git a/apps/web/src/resizer/index.ts b/apps/web/src/resizer/index.ts
deleted file mode 100644
index b73b368361..0000000000
--- a/apps/web/src/resizer/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-export { default as FixedDistributor } from "./distributors/fixed";
-export { default as PercentageDistributor } from "./distributors/percentage";
-export { default as CollapseDistributor } from "./distributors/collapse";
-export { default as Resizer } from "./resizer";
diff --git a/apps/web/src/resizer/resizer.ts b/apps/web/src/resizer/resizer.ts
index 8a814792ad..76e922b29d 100644
--- a/apps/web/src/resizer/resizer.ts
+++ b/apps/web/src/resizer/resizer.ts
@@ -72,7 +72,7 @@ export default class Resizer<C extends IConfig, I extends ResizeItem<C> = Resize
     Gives the distributor for a specific resize handle, as if you would have started
     to drag that handle. Can be used to manipulate the size of an item programmatically.
     @param {number} handleIndex the index of the resize handle in the container
-    @return {FixedDistributor} a new distributor for the given handle
+    @returns {FixedDistributor} a new distributor for the given handle
     */
     public forHandleAt(handleIndex: number): FixedDistributor<C, I> | undefined {
         const handles = this.getResizeHandles();
diff --git a/apps/web/src/resizer/sizer.ts b/apps/web/src/resizer/sizer.ts
index 2284781c9d..a9a8868d1c 100644
--- a/apps/web/src/resizer/sizer.ts
+++ b/apps/web/src/resizer/sizer.ts
@@ -19,7 +19,7 @@ export default class Sizer {
 
     /**
         @param {Element} item the dom element being resized
-        @return {number} how far the edge of the item is from the edge of the container
+        @returns {number} how far the edge of the item is from the edge of the container
     */
     public getItemOffset(item: HTMLElement): number {
         const offset = (this.vertical ? item.offsetTop : item.offsetLeft) - this.getOffset();
@@ -32,23 +32,23 @@ export default class Sizer {
 
     /**
         @param {Element} item the dom element being resized
-        @return {number} the width/height of an item in the container
+        @returns {number} the width/height of an item in the container
     */
     public getItemSize(item: HTMLElement): number {
         return this.vertical ? item.offsetHeight : item.offsetWidth;
     }
 
-    /** @return {number} the width/height of the container */
+    /** @returns {number} the width/height of the container */
     public getTotalSize(): number {
         return this.vertical ? this.container.offsetHeight : this.container.offsetWidth;
     }
 
-    /** @return {number} container offset to offsetParent */
+    /** @returns {number} container offset to offsetParent */
     private getOffset(): number {
         return this.vertical ? this.container.offsetTop : this.container.offsetLeft;
     }
 
-    /** @return {number} container offset to document */
+    /** @returns {number} container offset to document */
     private getPageOffset(): number {
         let element = this.container;
         let offset = 0;
@@ -90,7 +90,7 @@ export default class Sizer {
 
     /**
         @param {MouseEvent} event the mouse event
-        @return {number} the distance between the cursor and the edge of the container,
+        @returns {number} the distance between the cursor and the edge of the container,
             along the applicable axis (vertical or horizontal)
     */
     public offsetFromEvent(event: MouseEvent): number {
diff --git a/apps/web/src/sentry.ts b/apps/web/src/sentry.ts
index 7b3148d211..d705ef7c02 100644
--- a/apps/web/src/sentry.ts
+++ b/apps/web/src/sentry.ts
@@ -14,8 +14,6 @@ import { MatrixClientPeg } from "./MatrixClientPeg";
 import SettingsStore from "./settings/SettingsStore";
 import { type IConfigOptions } from "./IConfigOptions";
 
-/* eslint-disable camelcase */
-
 type StorageContext = {
     storageManager_persisted?: string;
     storageManager_quota?: string;
@@ -58,8 +56,6 @@ type Contexts = {
     storage: StorageContext;
 };
 
-/* eslint-enable camelcase */
-
 async function getStorageContext(): Promise<StorageContext> {
     const result: StorageContext = {};
 
@@ -205,6 +201,7 @@ export async function initSentry(sentryConfig: IConfigOptions["sentry"]): Promis
 
     Sentry.init({
         dsn: sentryConfig.dsn,
+        // oxlint-disable-next-line node/no-process-env
         release: process.env.VERSION,
         environment: sentryConfig.environment,
         defaultIntegrations: false,
diff --git a/apps/web/src/settings/Settings.tsx b/apps/web/src/settings/Settings.tsx
index ba6b84e9c1..08aac45fc7 100644
--- a/apps/web/src/settings/Settings.tsx
+++ b/apps/web/src/settings/Settings.tsx
@@ -10,6 +10,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type ReactNode } from "react";
 import { STABLE_MSC4133_EXTENDED_PROFILES, UNSTABLE_MSC4133_EXTENDED_PROFILES } from "matrix-js-sdk/src/matrix";
+import { type JsonDocument, type JsonValue } from "shared-types";
 // Import these directly from shared-components to avoid circular deps
 import { _t, _td } from "@element-hq/web-shared-components";
 
@@ -44,7 +45,6 @@ import FallbackIceServerController from "./controllers/FallbackIceServerControll
 import { type IRightPanelForRoomStored } from "../stores/right-panel/RightPanelStoreIPanelState.ts";
 import { type ILayoutSettings } from "../stores/widgets/WidgetLayoutStore.ts";
 import { type ReleaseAnnouncementData } from "../stores/ReleaseAnnouncementStore.ts";
-import { type Json, type JsonValue } from "../@types/json.ts";
 import { type RecentEmojiData } from "../emojipicker/recent.ts";
 import { type Assignable } from "../@types/common.ts";
 import { SortingAlgorithm } from "../stores/room-list-v3/skip-list/sorters/index.ts";
@@ -53,8 +53,13 @@ import InviteRulesConfigController from "./controllers/InviteRulesConfigControll
 import { type ComputedInviteConfig } from "../@types/invite-rules.ts";
 import BlockInvitesConfigController from "./controllers/BlockInvitesConfigController.ts";
 import RequiresSettingsController from "./controllers/RequiresSettingsController.ts";
-import { type OrderedCustomSections, type CustomSectionsData } from "../stores/room-list-v3/section.ts";
+import {
+    type ReorderableSection,
+    type CustomSectionsData,
+    type SectionExpansionState,
+} from "../stores/room-list-v3/section.ts";
 import { type NotificationSound } from "../Notifier.ts";
+import VideoRoomsBetaImage from "../../res/img/betas/video_rooms.png";
 
 export const defaultWatchManager = new WatchManager();
 
@@ -120,7 +125,7 @@ export const labGroupNames: Record<LabGroup, TranslationKey> = {
     [LabGroup.Ui]: _td("labs|group_ui"),
 };
 
-export type SettingValueType = Json | JsonValue | Record<string, unknown> | Record<string, unknown>[];
+export type SettingValueType = JsonDocument | JsonValue | Record<string, unknown> | Record<string, unknown>[];
 
 export interface IBaseSetting<T extends SettingValueType = SettingValueType> {
     isFeature?: false | undefined;
@@ -208,29 +213,27 @@ export interface Settings {
     "feature_video_rooms": IFeature;
     [Features.NotificationSettings2]: IFeature;
     "feature_msc3531_hide_messages_pending_moderation": IFeature;
-    "feature_report_to_moderators": IFeature;
     "feature_latex_maths": IFeature;
     "feature_wysiwyg_composer": IFeature;
     "feature_mjolnir": IFeature;
     "feature_custom_themes": IFeature;
     "feature_exclude_insecure_devices": IFeature;
-    "feature_html_topic": IFeature;
     "feature_bridge_state": IFeature;
     "feature_jump_to_date": IFeature;
     "feature_sliding_sync": IBaseSetting<boolean>;
     "feature_simplified_sliding_sync": IFeature;
     "feature_element_call_video_rooms": IFeature;
-    "feature_group_calls": IFeature;
     "feature_disable_call_per_sender_encryption": IFeature;
     "feature_location_share_live": IFeature;
     "feature_dynamic_room_predecessors": IFeature;
     "feature_render_reaction_images": IFeature;
-    "feature_new_room_list": IFeature;
-    "feature_room_list_sections": IFeature;
+    "feature_retention": IFeature;
     "feature_ask_to_join": IFeature;
     "feature_notifications": IFeature;
     "feature_msc4362_encrypted_state_events": IFeature;
     "feature_user_status": IFeature;
+    "feature_login_with_qr": IFeature;
+    "feature_msc4095_url_preview_bundle": IFeature;
     // These are in the feature namespace but aren't actually features
     "feature_hidebold": IBaseSetting<boolean>;
 
@@ -239,15 +242,12 @@ export interface Settings {
     "mjolnirPersonalRoom": IBaseSetting<string | null>;
     "RoomList.backgroundImage": IBaseSetting<string | null>;
     "sendReadReceipts": IBaseSetting<boolean>;
-    "baseFontSize": IBaseSetting<"" | number>;
-    "baseFontSizeV2": IBaseSetting<"" | number>;
     "fontSizeDelta": IBaseSetting<number>;
     "useCustomFontSize": IBaseSetting<boolean>;
     "MessageComposerInput.suggestEmoji": IBaseSetting<boolean>;
     "MessageComposerInput.showStickersButton": IBaseSetting<boolean>;
     "MessageComposerInput.showPollsButton": IBaseSetting<boolean>;
     "MessageComposerInput.insertTrailingColon": IBaseSetting<boolean>;
-    "Notifications.alwaysShowBadgeCounts": IBaseSetting<boolean>;
     "Notifications.showbold": IBaseSetting<boolean>;
     "Notifications.tac_only_notifications": IBaseSetting<boolean>;
     "useCompactLayout": IBaseSetting<boolean>;
@@ -268,8 +268,6 @@ export interface Settings {
     "scrollToBottomOnMessageSent": IBaseSetting<boolean>;
     "Pill.shouldShowPillAvatar": IBaseSetting<boolean>;
     "TextualBody.enableBigEmoji": IBaseSetting<boolean>;
-    "MessageComposerInput.isRichTextEnabled": IBaseSetting<boolean>;
-    "MessageComposer.showFormatting": IBaseSetting<boolean>;
     "sendTypingNotifications": IBaseSetting<boolean>;
     "showTypingNotifications": IBaseSetting<boolean>;
     "ctrlFForSearch": IBaseSetting<boolean>;
@@ -285,6 +283,7 @@ export interface Settings {
     "useSystemFont": IBaseSetting<boolean>;
     "systemFont": IBaseSetting<string>;
     "webRtcAllowPeerToPeer": IBaseSetting<boolean>;
+    "enableLegacyCallsVoip": IBaseSetting<boolean>;
     "webrtc_audiooutput": IBaseSetting<string>;
     "webrtc_audioinput": IBaseSetting<string>;
     "webrtc_videoinput": IBaseSetting<string>;
@@ -337,7 +336,6 @@ export interface Settings {
     "RightPanel.phases": IBaseSetting<IRightPanelForRoomStored | null>;
     "enableEventIndexing": IBaseSetting<boolean>;
     "crawlerSleepTime": IBaseSetting<number>;
-    "showCallButtonsInComposer": IBaseSetting<boolean>;
     "ircDisplayNameWidth": IBaseSetting<number>;
     "layout": IBaseSetting<Layout>;
     "Images.size": IBaseSetting<ImageSize>;
@@ -353,7 +351,6 @@ export interface Settings {
     "debug_timeline_panel": IBaseSetting<boolean>;
     "debug_registration": IBaseSetting<boolean>;
     "debug_animation": IBaseSetting<boolean>;
-    "debug_legacy_call_handler": IBaseSetting<boolean>;
     "audioInputMuted": IBaseSetting<boolean>;
     "videoInputMuted": IBaseSetting<boolean>;
     "activeCallRoomIds": IBaseSetting<string[]>;
@@ -369,15 +366,24 @@ export interface Settings {
     "blockInvites": IBaseSetting<boolean>;
     "Developer.elementCallUrl": IBaseSetting<string>;
     "RoomList.CustomSectionData": IBaseSetting<CustomSectionsData>;
-    "RoomList.OrderedCustomSections": IBaseSetting<OrderedCustomSections>;
+    "RoomList.OrderedCustomSections": IBaseSetting<ReorderableSection[]>;
+    "RoomList.SectionExpansionState": IBaseSetting<SectionExpansionState>;
+    "RoomList.showSections": IBaseSetting<boolean>;
 }
 
 export type SettingKey = keyof Settings;
 export type FeatureSettingKey = Assignable<Settings, IFeature>;
 export type BooleanSettingKey = Assignable<Settings, IBaseSetting<boolean>> | FeatureSettingKey;
+export type NullableBooleanSettingKey = Assignable<Settings, IBaseSetting<boolean | null>> | FeatureSettingKey;
 export type StringSettingKey = Assignable<Settings, IBaseSetting<string>>;
 
 export const SETTINGS: Settings = {
+    // Used in tests only
+    "test_setting": {
+        supportedLevels: [],
+        default: "",
+    },
+
     "feature_video_rooms": {
         isFeature: true,
         labsGroup: LabGroup.VoiceAndVideo,
@@ -412,8 +418,7 @@ export const SETTINGS: Settings = {
             ),
             feedbackLabel: "video-room-feedback",
             feedbackSubheading: _td("labs|video_rooms_feedbackSubheading"),
-            // eslint-disable-next-line @typescript-eslint/no-require-imports
-            image: require("../../res/img/betas/video_rooms.png"),
+            image: VideoRoomsBetaImage,
             requiresRefresh: true,
         },
     },
@@ -426,13 +431,11 @@ export const SETTINGS: Settings = {
         betaInfo: {
             title: _td("labs|notification_settings_beta_title"),
             caption: () => (
-                <>
-                    <p>
-                        {_t("labs|notification_settings_beta_caption", {
-                            brand: SdkConfig.get().brand,
-                        })}
-                    </p>
-                </>
+                <p>
+                    {_t("labs|notification_settings_beta_caption", {
+                        brand: SdkConfig.get().brand,
+                    })}
+                </p>
             ),
         },
     },
@@ -459,19 +462,10 @@ export const SETTINGS: Settings = {
         shouldExportToRageshake: false,
     },
     "blockInvites": {
-        controller: new BlockInvitesConfigController("blockInvites"),
+        controller: new BlockInvitesConfigController("blockInvites", defaultWatchManager),
         supportedLevels: [SettingLevel.ACCOUNT],
         default: false,
     },
-    "feature_report_to_moderators": {
-        isFeature: true,
-        labsGroup: LabGroup.Moderation,
-        displayName: _td("labs|report_to_moderators"),
-        description: _td("labs|report_to_moderators_description"),
-        supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG_PRIORITISED,
-        supportedLevelsAreOrdered: true,
-        default: false,
-    },
     "feature_latex_maths": {
         isFeature: true,
         labsGroup: LabGroup.Messaging,
@@ -536,14 +530,6 @@ export const SETTINGS: Settings = {
         // Contains room ID
         shouldExportToRageshake: false,
     },
-    "feature_html_topic": {
-        isFeature: true,
-        labsGroup: LabGroup.Rooms,
-        supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG_PRIORITISED,
-        supportedLevelsAreOrdered: true,
-        displayName: _td("labs|html_topic"),
-        default: false,
-    },
     "feature_bridge_state": {
         isFeature: true,
         labsGroup: LabGroup.Rooms,
@@ -611,15 +597,6 @@ export const SETTINGS: Settings = {
         controller: new ReloadOnChangeController(),
         default: false,
     },
-    "feature_group_calls": {
-        isFeature: true,
-        labsGroup: LabGroup.VoiceAndVideo,
-        supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG_PRIORITISED,
-        supportedLevelsAreOrdered: true,
-        displayName: _td("labs|group_calls"),
-        controller: new ReloadOnChangeController(),
-        default: false,
-    },
     "feature_disable_call_per_sender_encryption": {
         isFeature: true,
         labsGroup: LabGroup.VoiceAndVideo,
@@ -648,15 +625,6 @@ export const SETTINGS: Settings = {
         shouldWarn: true,
         default: false,
     },
-    /**
-     * @deprecated in favor of {@link fontSizeDelta}
-     */
-    "baseFontSize": {
-        displayName: _td("settings|appearance|font_size"),
-        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
-        default: "",
-        controller: new FontSizeController(),
-    },
     "feature_render_reaction_images": {
         isFeature: true,
         labsGroup: LabGroup.Messaging,
@@ -666,39 +634,25 @@ export const SETTINGS: Settings = {
         supportedLevelsAreOrdered: true,
         default: false,
     },
-    "feature_new_room_list": {
-        supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG_PRIORITISED,
+    "feature_login_with_qr": {
+        supportedLevels: [SettingLevel.CONFIG],
         labsGroup: LabGroup.Ui,
-        displayName: _td("labs|new_room_list"),
-        description: _td("labs|under_active_development"),
-        isFeature: true,
-        default: true,
-        controller: new ReloadOnChangeController(),
-    },
-    "feature_room_list_sections": {
-        supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG_PRIORITISED,
-        labsGroup: LabGroup.Ui,
-        displayName: _td("labs|room_list_sections"),
-        description: _td("labs|under_active_development"),
+        displayName: _td("labs|login_with_qr"),
+        description: _td("labs|config_only"),
         isFeature: true,
         default: false,
-        controller: new ReloadOnChangeController(),
     },
-    /**
-     * With the transition to Compound we are moving to a base font size
-     * of 16px. We're taking the opportunity to move away from the `baseFontSize`
-     * setting that had a 5px offset.
-     * @deprecated in favor {@link fontSizeDelta}
-     */
-    "baseFontSizeV2": {
-        displayName: _td("settings|appearance|font_size"),
-        supportedLevels: [SettingLevel.DEVICE],
-        default: "",
-        controller: new FontSizeController(),
+    "feature_msc4095_url_preview_bundle": {
+        labsGroup: LabGroup.Messaging,
+        displayName: _td("labs|url_preview_bundle"),
+        description: _td("labs|url_preview_bundle_description"),
+        supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG_PRIORITISED,
+        supportedLevelsAreOrdered: true,
+        isFeature: true,
+        default: false,
     },
     /**
      * This delta is added to the browser default font size
-     * Moving from `baseFontSizeV2` to `fontSizeDelta` to replace the default 16px to --cpd-font-size-root (browser default font size) + fontSizeDelta
      */
     "fontSizeDelta": {
         displayName: _td("settings|appearance|font_size"),
@@ -733,11 +687,6 @@ export const SETTINGS: Settings = {
         displayName: _td("settings|insert_trailing_colon_mentions"),
         default: true,
     },
-    // TODO: Wire up appropriately to UI (FTUE notifications)
-    "Notifications.alwaysShowBadgeCounts": {
-        supportedLevels: LEVELS_ROOM_OR_ACCOUNT,
-        default: false,
-    },
     // Used to be a feature, name kept for backwards compat
     "feature_hidebold": {
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
@@ -808,6 +757,22 @@ export const SETTINGS: Settings = {
         ),
         default: false,
     },
+    "feature_retention": {
+        isFeature: true,
+        labsGroup: LabGroup.Messaging,
+        displayName: _td("labs|feature_retention|display_name"),
+        description: _td("labs|feature_retention|description"),
+        supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG_PRIORITISED,
+        supportedLevelsAreOrdered: true,
+        controller: new IncompatibleController(
+            "feature_sliding_sync",
+            false,
+            true,
+            _td("labs|feature_retention|disabled_sliding_sync"),
+            true,
+        ),
+        default: false,
+    },
     "useCompactLayout": {
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
         displayName: _td("settings|preferences|compact_modern"),
@@ -916,14 +881,6 @@ export const SETTINGS: Settings = {
         default: true,
         invertedSettingName: "TextualBody.disableBigEmoji",
     },
-    "MessageComposerInput.isRichTextEnabled": {
-        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
-        default: false,
-    },
-    "MessageComposer.showFormatting": {
-        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
-        default: false,
-    },
     "sendTypingNotifications": {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
         displayName: _td("settings|send_typing_notifications"),
@@ -1006,6 +963,12 @@ export const SETTINGS: Settings = {
         displayName: _td("settings|appearance|custom_font_name"),
         controller: new SystemFontController(),
     },
+    "enableLegacyCallsVoip": {
+        supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
+        displayName: _td("settings|voip|enable_legacy_calls"),
+        description: _td("settings|voip|enable_legacy_calls_description"),
+        default: true,
+    },
     "webRtcAllowPeerToPeer": {
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
         displayName: _td("settings|voip|allow_p2p"),
@@ -1141,7 +1104,7 @@ export const SETTINGS: Settings = {
     "urlPreviewsEnabled": {
         // Enabled by default and client configurable as this setting only allows unencrypted
         // messages to be previewed.
-        supportedLevels: [SettingLevel.DEVICE, SettingLevel.ACCOUNT, SettingLevel.CONFIG],
+        supportedLevels: [SettingLevel.ROOM_DEVICE, SettingLevel.DEVICE, SettingLevel.ACCOUNT, SettingLevel.CONFIG],
         supportedLevelsAreOrdered: true,
         displayName: _td("settings|inline_url_previews_default"),
         default: true,
@@ -1251,6 +1214,11 @@ export const SETTINGS: Settings = {
         default: false,
         displayName: _td("settings|show_message_previews"),
     },
+    "RoomList.showSections": {
+        supportedLevels: LEVELS_ACCOUNT_SETTINGS,
+        default: true,
+        displayName: _td("settings|show_sections"),
+    },
     "RightPanel.phasesGlobal": {
         supportedLevels: [SettingLevel.DEVICE],
         default: null,
@@ -1269,13 +1237,6 @@ export const SETTINGS: Settings = {
         displayName: _td("settings|security|message_search_sleep_time"),
         default: 3000,
     },
-    "showCallButtonsInComposer": {
-        // Dev note: This is no longer "in composer" but is instead "in room header".
-        // TODO: Rename with settings v3
-        supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
-        default: true,
-        controller: new UIFeatureController(UIFeature.Voip),
-    },
     "ircDisplayNameWidth": {
         // We specifically want to have room-device > device so that users may set a device default
         // with a per-room override.
@@ -1349,10 +1310,6 @@ export const SETTINGS: Settings = {
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
         default: false,
     },
-    "debug_legacy_call_handler": {
-        supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
-        default: false,
-    },
     "audioInputMuted": {
         supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
         default: false,
@@ -1391,6 +1348,14 @@ export const SETTINGS: Settings = {
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
         default: [],
     },
+    /**
+     * Managed by the {@link RoomListSectionHeaderViewModel}
+     * Store the expanded/collapsed state of the room list sections, per space and per section tag
+     */
+    "RoomList.SectionExpansionState": {
+        supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS,
+        default: {},
+    },
     [UIFeature.RoomHistorySettings]: {
         supportedLevels: LEVELS_UI_FEATURE,
         default: true,
diff --git a/apps/web/test/unit-tests/settings/SettingsStore-test.ts b/apps/web/src/settings/SettingsStore.test.ts
similarity index 78%
rename from apps/web/test/unit-tests/settings/SettingsStore-test.ts
rename to apps/web/src/settings/SettingsStore.test.ts
index 2452456bf0..d5f655c7cb 100644
--- a/apps/web/test/unit-tests/settings/SettingsStore-test.ts
+++ b/apps/web/src/settings/SettingsStore.test.ts
@@ -6,16 +6,19 @@ 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 { ClientEvent, type MatrixClient, type Room, SyncState } from "matrix-js-sdk/src/matrix";
-import { waitFor } from "jest-matrix-react";
+// @vitest-environment happy-dom
 
-import type BasePlatform from "../../../src/BasePlatform";
-import SdkConfig from "../../../src/SdkConfig";
-import { SettingLevel } from "../../../src/settings/SettingLevel";
-import SettingsStore from "../../../src/settings/SettingsStore";
-import { mkStubRoom, mockPlatformPeg, stubClient } from "../../test-utils";
-import { SETTINGS, type SettingKey } from "../../../src/settings/Settings.tsx";
-import MatrixClientBackedController from "../../../src/settings/controllers/MatrixClientBackedController.ts";
+import { vi, describe, it, expect, beforeAll, beforeEach, afterEach } from "vitest";
+import { ClientEvent, type MatrixClient, type Room, SyncState } from "matrix-js-sdk/src/matrix";
+import { waitFor } from "test-utils-rtl";
+
+import type BasePlatform from "../BasePlatform";
+import SdkConfig from "../SdkConfig";
+import { SettingLevel } from "./SettingLevel";
+import SettingsStore from "./SettingsStore";
+import { mkStubRoom, mockPlatformPeg, stubClient } from "../../test/test-utils";
+import { SETTINGS, type SettingKey } from "./Settings.tsx";
+import MatrixClientBackedController from "./controllers/MatrixClientBackedController.ts";
 
 const TEST_DATA = [
     {
@@ -34,18 +37,18 @@ describe("SettingsStore", () => {
     let platformSettings: Record<string, any>;
 
     beforeAll(() => {
-        jest.clearAllMocks();
+        vi.clearAllMocks();
         platformSettings = {};
         mockPlatformPeg({
-            isLevelSupported: jest.fn().mockReturnValue(true),
-            supportsSetting: jest.fn().mockReturnValue(true),
-            setSettingValue: jest.fn().mockImplementation((settingName: string, value: any) => {
+            isLevelSupported: vi.fn().mockReturnValue(true),
+            supportsSetting: vi.fn().mockReturnValue(true),
+            setSettingValue: vi.fn().mockImplementation((settingName: string, value: any) => {
                 platformSettings[settingName] = value;
             }),
-            getSettingValue: jest.fn().mockImplementation((settingName: string) => {
+            getSettingValue: vi.fn().mockImplementation((settingName: string) => {
                 return platformSettings[settingName];
             }),
-            reload: jest.fn(),
+            reload: vi.fn(),
         } as unknown as BasePlatform);
 
         TEST_DATA.forEach((d) => {
@@ -100,21 +103,21 @@ describe("SettingsStore", () => {
         beforeEach(() => {
             client = stubClient();
             room = mkStubRoom("!room:example.org", "Room", client);
-            client.getRooms = jest.fn().mockReturnValue([room]);
-            client.getRoom = jest.fn().mockReturnValue(room);
+            client.getRooms = vi.fn().mockReturnValue([room]);
+            client.getRoom = vi.fn().mockReturnValue(room);
         });
 
         afterEach(() => {
-            jest.restoreAllMocks();
+            vi.restoreAllMocks();
         });
 
         describe("Migrate media preview configuration", () => {
             beforeEach(() => {
                 MatrixClientBackedController.matrixClient = client;
-                client.getAccountData = jest.fn().mockImplementation((type) => {
+                client.getAccountData = vi.fn().mockImplementation((type) => {
                     if (type === "im.vector.web.settings") {
                         return {
-                            getContent: jest.fn().mockReturnValue({
+                            getContent: vi.fn().mockReturnValue({
                                 showImages: false,
                                 showAvatarsOnInvites: false,
                             }),
@@ -126,7 +129,7 @@ describe("SettingsStore", () => {
             });
 
             it("migrates media preview configuration immediately", async () => {
-                client.setAccountData = jest.fn();
+                client.setAccountData = vi.fn();
                 SettingsStore.runMigrations(false);
                 expect(client.setAccountData).toHaveBeenCalledWith("io.element.msc4278.media_preview_config", {
                     invite_avatars: "off",
@@ -134,13 +137,13 @@ describe("SettingsStore", () => {
                 });
             });
             it("migrates media preview configuration once client is ready", async () => {
-                client.setAccountData = jest.fn();
-                const mockInitialSync = (client.isInitialSyncComplete = jest.fn().mockReturnValue(false));
+                client.setAccountData = vi.fn();
+                const mockInitialSync = (client.isInitialSyncComplete = vi.fn().mockReturnValue(false));
                 SettingsStore.runMigrations(false);
                 mockInitialSync.mockReturnValue(true);
                 client.emit(ClientEvent.Sync, SyncState.Prepared, null);
                 // Update is asynchronous
-                waitFor(() => {
+                await waitFor(() => {
                     expect(client.setAccountData).toHaveBeenCalledWith("io.element.msc4278.media_preview_config", {
                         invite_avatars: "off",
                         media_previews: "off",
@@ -149,15 +152,15 @@ describe("SettingsStore", () => {
             });
 
             it("does not migrate media preview configuration if the session is fresh", async () => {
-                client.setAccountData = jest.fn();
+                client.setAccountData = vi.fn();
                 SettingsStore.runMigrations(true);
                 client.emit(ClientEvent.Sync, SyncState.Prepared, null);
                 expect(client.setAccountData).not.toHaveBeenCalled();
             });
 
             it("does not migrate media preview configuration if the account data is already set", async () => {
-                client.setAccountData = jest.fn();
-                client.getAccountData = jest.fn().mockReturnValue({});
+                client.setAccountData = vi.fn();
+                client.getAccountData = vi.fn().mockReturnValue({});
                 SettingsStore.runMigrations(false);
                 client.emit(ClientEvent.Sync, SyncState.Prepared, null);
                 expect(client.setAccountData).not.toHaveBeenCalled();
diff --git a/apps/web/src/settings/SettingsStore.ts b/apps/web/src/settings/SettingsStore.ts
index 10100a1af6..b0342692da 100644
--- a/apps/web/src/settings/SettingsStore.ts
+++ b/apps/web/src/settings/SettingsStore.ts
@@ -10,6 +10,8 @@ Please see LICENSE files in the repository root for full details.
 import { logger } from "matrix-js-sdk/src/logger";
 import { type ReactNode } from "react";
 import { ClientEvent } from "matrix-js-sdk/src/matrix";
+// Imports directly from shared-components to avoid an import cycle
+import { _t } from "@element-hq/web-shared-components";
 
 import DeviceSettingsHandler from "./handlers/DeviceSettingsHandler";
 import RoomDeviceSettingsHandler from "./handlers/RoomDeviceSettingsHandler";
@@ -18,7 +20,6 @@ import RoomAccountSettingsHandler from "./handlers/RoomAccountSettingsHandler";
 import AccountSettingsHandler from "./handlers/AccountSettingsHandler";
 import RoomSettingsHandler from "./handlers/RoomSettingsHandler";
 import ConfigSettingsHandler from "./handlers/ConfigSettingsHandler";
-import { _t } from "../languageHandler";
 import dis from "../dispatcher/dispatcher";
 import {
     type IFeature,
@@ -39,6 +40,7 @@ import PlatformSettingsHandler from "./handlers/PlatformSettingsHandler";
 import ReloadOnChangeController from "./controllers/ReloadOnChangeController";
 import { MatrixClientPeg } from "../MatrixClientPeg";
 import { MediaPreviewValue } from "../@types/media_preview";
+import SettingController from "./controllers/SettingController.ts";
 
 // Convert the settings to easier to manage objects for the handlers
 const defaultSettings: Record<string, any> = {};
@@ -123,6 +125,7 @@ type HandlerMap = Partial<{
  * feature may be reported as disabled even though a user has specifically requested it
  * be enabled).
  */
+// oxlint-disable-next-line typescript/no-extraneous-class
 export default class SettingsStore {
     // We support watching settings for changes, and do this by tracking which callbacks have
     // been given to us. We end up returning the callbackRef to the caller so they can unsubscribe
@@ -261,7 +264,7 @@ export default class SettingsStore {
             if (roomId === null) {
                 // Unregister all existing watchers and register the new one
                 rooms.forEach((roomId) => {
-                    SettingsStore.unwatchSetting(this.monitors.get(settingName)!.get(roomId)!);
+                    SettingsStore.unwatchSetting(this.monitors.get(settingName)!.get(roomId));
                 });
                 this.monitors.get(settingName)!.clear();
                 registerWatcher();
@@ -274,7 +277,7 @@ export default class SettingsStore {
      * @param {string} settingName The setting to look up.
      * @param {SettingLevel} atLevel
      * The level to get the display name for; Defaults to 'default'.
-     * @return {String} The display name for the setting, or null if not found.
+     * @returns {String} The display name for the setting, or null if not found.
      */
     public static getDisplayName(settingName: SettingKey, atLevel = SettingLevel.DEFAULT): string | null {
         if (!SETTINGS[settingName] || !SETTINGS[settingName].displayName) return null;
@@ -297,7 +300,7 @@ export default class SettingsStore {
     /**
      * Gets the translated description for a given setting
      * @param {string} settingName The setting to look up.
-     * @return {String} The description for the setting, or null if not found.
+     * @returns {String} The description for the setting, or null if not found.
      */
     public static getDescription(settingName: SettingKey): string | ReactNode {
         const description = SETTINGS[settingName]?.description;
@@ -309,7 +312,7 @@ export default class SettingsStore {
     /**
      * Determines if a setting is also a feature.
      * @param {string} settingName The setting to look up.
-     * @return {boolean} True if the setting is a feature.
+     * @returns {boolean} True if the setting is a feature.
      */
     public static isFeature(settingName: SettingKey): boolean {
         if (!SETTINGS[settingName]) return false;
@@ -319,7 +322,7 @@ export default class SettingsStore {
     /**
      * Determines if a setting should have a warning sign in the microcopy
      * @param {string} settingName The setting to look up.
-     * @return {boolean} True if the setting should have a warning sign.
+     * @returns {boolean} True if the setting should have a warning sign.
      */
     public static shouldHaveWarning(settingName: SettingKey): boolean {
         if (!SETTINGS[settingName]) return false;
@@ -332,10 +335,10 @@ export default class SettingsStore {
             SettingsStore.isFeature(settingName) &&
             SettingsStore.getValueAt(SettingLevel.CONFIG, settingName, null, true, true) !== false
         ) {
-            const betaInfo = SETTINGS[settingName]!.betaInfo;
+            const betaInfo = SETTINGS[settingName].betaInfo;
             if (betaInfo) {
                 betaInfo.requiresRefresh =
-                    betaInfo.requiresRefresh ?? SETTINGS[settingName]!.controller instanceof ReloadOnChangeController;
+                    betaInfo.requiresRefresh ?? SETTINGS[settingName].controller instanceof ReloadOnChangeController;
             }
             return betaInfo;
         }
@@ -352,7 +355,7 @@ export default class SettingsStore {
      * If a setting is not disabled, or no reason is given by the `SettingController`,
      * this will return undefined.
      * @param {string} settingName The setting to look up.
-     * @return {string} The reason the setting is disabled.
+     * @returns {string} The reason the setting is disabled.
      */
     public static disabledMessage(settingName: SettingKey): string | undefined {
         const disabled = SETTINGS[settingName].controller?.settingDisabled;
@@ -365,7 +368,7 @@ export default class SettingsStore {
      * @param {string} settingName The name of the setting to read the value of.
      * @param {String} roomId The room ID to read the setting value in, may be null.
      * @param {boolean} excludeDefault True to disable using the default value.
-     * @return {*} The value, or null if not found
+     * @returns {*} The value, or null if not found
      */
     public static getValue<S extends SettingKey>(
         settingName: S,
@@ -402,7 +405,7 @@ export default class SettingsStore {
      * @param {boolean} explicit If true, this method will not consider other levels, just the one
      * provided. Defaults to false.
      * @param {boolean} excludeDefault True to disable using the default value.
-     * @return {*} The value, or null if not found.
+     * @returns {*} The value, or null if not found.
      */
     public static getValueAt<S extends SettingKey>(
         level: SettingLevel,
@@ -458,7 +461,7 @@ export default class SettingsStore {
     /**
      * Gets the default value of a setting.
      * @param settingName The name of the setting to read the value of.
-     * @return The default value
+     * @returns The default value
      */
     public static getDefaultValue<S extends SettingKey>(settingName: S): Settings[S]["default"] {
         // Verify that the setting is actually a setting
@@ -496,7 +499,7 @@ export default class SettingsStore {
      * @param level The level
      * to change the value at.
      * @param value The new value of the setting, may be null.
-     * @return Resolves when the setting has been changed.
+     * @returns Resolves when the setting has been changed.
      */
     public static async setValue<S extends SettingKey>(
         settingName: S,
@@ -554,7 +557,7 @@ export default class SettingsStore {
      * @param {string} settingName The name of the setting to check.
      * @param {String} roomId The room ID to check in, may be null.
      * @param {SettingLevel} level The level to check at.
-     * @return {boolean} True if the user may set the setting, false otherwise.
+     * @returns {boolean} True if the user may set the setting, false otherwise.
      */
     public static canSetValue(settingName: SettingKey, roomId: string | null, level: SettingLevel): boolean {
         const setting = SETTINGS[settingName];
@@ -608,7 +611,7 @@ export default class SettingsStore {
      * Determines if the given level is supported on this device.
      * @param {SettingLevel} level The level
      * to check the feasibility of.
-     * @return {boolean} True if the level is supported, false otherwise.
+     * @returns {boolean} True if the level is supported, false otherwise.
      */
     public static isLevelSupported(level: SettingLevel): boolean {
         if (!LEVEL_HANDLERS[level]) return false;
@@ -636,7 +639,7 @@ export default class SettingsStore {
      * Determines the first supported level out of all the levels that can be used for a
      * specific setting.
      * @param {string} settingName The setting name.
-     * @return {SettingLevel}
+     * @returns {SettingLevel}
      */
     public static firstSupportedLevel(settingName: SettingKey): SettingLevel | null {
         // Verify that the setting is actually a setting
@@ -866,8 +869,7 @@ export default class SettingsStore {
 
     private static getHandler(settingName: SettingKey, level: SettingLevel): SettingsHandler | null {
         const handlers = SettingsStore.getHandlers(settingName);
-        if (!handlers[level]) return null;
-        return handlers[level]!;
+        return handlers[level] ?? null;
     }
 
     private static getHandlers(settingName: SettingKey): HandlerMap {
@@ -886,5 +888,6 @@ export default class SettingsStore {
     }
 }
 
+SettingController.settingsStore = SettingsStore;
 // For debugging purposes
 window.mxSettingsStore = SettingsStore;
diff --git a/apps/web/test/unit-tests/settings/controllers/AnalyticsController-test.ts b/apps/web/src/settings/controllers/AnalyticsController.test.ts
similarity index 63%
rename from apps/web/test/unit-tests/settings/controllers/AnalyticsController-test.ts
rename to apps/web/src/settings/controllers/AnalyticsController.test.ts
index fb7d4a5613..dfb4113de8 100644
--- a/apps/web/test/unit-tests/settings/controllers/AnalyticsController-test.ts
+++ b/apps/web/src/settings/controllers/AnalyticsController.test.ts
@@ -6,17 +6,21 @@ 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 PosthogTrackers from "../../../../src/PosthogTrackers";
-import AnalyticsController from "../../../../src/settings/controllers/AnalyticsController";
-import { SettingLevel } from "../../../../src/settings/SettingLevel";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, afterEach } from "vitest";
+
+import PosthogTrackers from "../../PosthogTrackers";
+import AnalyticsController from "../controllers/AnalyticsController";
+import { SettingLevel } from "../SettingLevel";
 
 describe("AnalyticsController", () => {
     afterEach(() => {
-        jest.restoreAllMocks();
+        vi.restoreAllMocks();
     });
 
     it("Tracks a Posthog interaction on change", () => {
-        const trackInteractionSpy = jest.spyOn(PosthogTrackers, "trackInteraction");
+        const trackInteractionSpy = vi.spyOn(PosthogTrackers, "trackInteraction");
 
         const controller = new AnalyticsController("WebSettingsNotificationsTACOnlyNotificationsToggle");
 
diff --git a/apps/web/test/unit-tests/settings/controllers/BlockInvitesConfigController-test.ts b/apps/web/src/settings/controllers/BlockInvitesConfigController.test.ts
similarity index 83%
rename from apps/web/test/unit-tests/settings/controllers/BlockInvitesConfigController-test.ts
rename to apps/web/src/settings/controllers/BlockInvitesConfigController.test.ts
index 55ef127545..5a5fc6d89e 100644
--- a/apps/web/test/unit-tests/settings/controllers/BlockInvitesConfigController-test.ts
+++ b/apps/web/src/settings/controllers/BlockInvitesConfigController.test.ts
@@ -6,24 +6,26 @@ 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 MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
-import { mocked } from "jest-mock";
+// @vitest-environment happy-dom
 
-import { SETTINGS } from "../../../../src/settings/Settings";
-import { stubClient } from "../../../test-utils";
-import MatrixClientBackedController from "../../../../src/settings/controllers/MatrixClientBackedController";
-import { SettingLevel } from "../../../../src/settings/SettingLevel.ts";
+import { vi, describe, it, expect, beforeEach } from "vitest";
+import { type MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { stubClient } from "test-utils";
+
+import { SETTINGS } from "../Settings";
+import MatrixClientBackedController from "./MatrixClientBackedController";
+import { SettingLevel } from "../SettingLevel.ts";
 
 describe("BlockInvitesConfigController", () => {
     describe("When server does not support MSC4380", () => {
         let cli: MatrixClient;
         beforeEach(() => {
             cli = stubClient();
-            cli.doesServerSupportUnstableFeature = jest.fn(async () => false);
+            cli.doesServerSupportUnstableFeature = vi.fn(async () => false);
             MatrixClientBackedController.matrixClient = cli;
         });
 
-        test("settingDisabled() should give a message", () => {
+        it("settingDisabled() should give a message", () => {
             const controller = SETTINGS.blockInvites.controller!;
             expect(controller.settingDisabled).toEqual("Your server does not implement this feature.");
         });
@@ -33,13 +35,13 @@ describe("BlockInvitesConfigController", () => {
         let cli: MatrixClient;
         beforeEach(async () => {
             cli = stubClient();
-            cli.doesServerSupportUnstableFeature = jest.fn(async (feature) => {
+            cli.doesServerSupportUnstableFeature = vi.fn(async (feature) => {
                 return feature == "org.matrix.msc4380.stable";
             });
             MatrixClientBackedController.matrixClient = cli;
         });
 
-        test("settingDisabled() should be false", () => {
+        it("settingDisabled() should be false", () => {
             const controller = SETTINGS.blockInvites.controller!;
             expect(controller.settingDisabled).toEqual(false);
         });
@@ -85,7 +87,7 @@ describe("BlockInvitesConfigController", () => {
  * in response to any request for `m.invite_permission_config`.
  */
 function mockAccountData(cli: MatrixClient, mockAccountData: object) {
-    mocked(cli.getAccountData).mockImplementation((eventType) => {
+    vi.mocked(cli.getAccountData).mockImplementation((eventType) => {
         if (eventType == "m.invite_permission_config") {
             return new MatrixEvent({
                 type: "m.invite_permission_config",
diff --git a/apps/web/src/settings/controllers/BlockInvitesConfigController.ts b/apps/web/src/settings/controllers/BlockInvitesConfigController.ts
index a945dbb384..da80f5136f 100644
--- a/apps/web/src/settings/controllers/BlockInvitesConfigController.ts
+++ b/apps/web/src/settings/controllers/BlockInvitesConfigController.ts
@@ -8,23 +8,18 @@ Please see LICENSE files in the repository root for full details.
 import { EventType } from "matrix-js-sdk/src/matrix";
 
 import { type SettingLevel } from "../SettingLevel.ts";
-import { _td } from "../../languageHandler.tsx";
+import { _td } from "../../languageHandler";
 import ServerSupportUnstableFeatureController from "./ServerSupportUnstableFeatureController.ts";
-import { defaultWatchManager, type SettingKey } from "../Settings.tsx";
+import { type SettingKey } from "../Settings.tsx";
+import type { WatchManager } from "../WatchManager.ts";
 
 /**
  * Handles invite filtering rules provided by MSC4380.
  * This handler does not make use of the roomId parameter.
  */
 export default class BlockInvitesConfigController extends ServerSupportUnstableFeatureController {
-    public constructor(settingName: SettingKey) {
-        super(
-            settingName,
-            defaultWatchManager,
-            [["org.matrix.msc4380.stable"]],
-            "v1.18",
-            _td("settings|not_supported"),
-        );
+    public constructor(settingName: SettingKey, watchers: WatchManager) {
+        super(settingName, watchers, [["org.matrix.msc4380.stable"]], "v1.18", _td("settings|not_supported"));
     }
 
     public getValueOverride(_level: SettingLevel): boolean {
diff --git a/apps/web/test/unit-tests/settings/controllers/DeviceIsolationModeController-test.ts b/apps/web/src/settings/controllers/DeviceIsolationModeController.test.ts
similarity index 79%
rename from apps/web/test/unit-tests/settings/controllers/DeviceIsolationModeController-test.ts
rename to apps/web/src/settings/controllers/DeviceIsolationModeController.test.ts
index dc1829a05f..4ef266ff66 100644
--- a/apps/web/test/unit-tests/settings/controllers/DeviceIsolationModeController-test.ts
+++ b/apps/web/src/settings/controllers/DeviceIsolationModeController.test.ts
@@ -5,15 +5,18 @@ 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 { AllDevicesIsolationMode, OnlySignedDevicesIsolationMode } from "matrix-js-sdk/src/crypto-api";
+// @vitest-environment happy-dom
 
-import { stubClient } from "../../../test-utils";
-import DeviceIsolationModeController from "../../../../src/settings/controllers/DeviceIsolationModeController.ts";
-import { SettingLevel } from "../../../../src/settings/SettingLevel";
+import { vi, describe, it, expect, afterEach } from "vitest";
+import { AllDevicesIsolationMode, OnlySignedDevicesIsolationMode } from "matrix-js-sdk/src/crypto-api";
+import { stubClient } from "test-utils";
+
+import DeviceIsolationModeController from "./DeviceIsolationModeController.ts";
+import { SettingLevel } from "../SettingLevel";
 
 describe("DeviceIsolationModeController", () => {
     afterEach(() => {
-        jest.resetAllMocks();
+        vi.resetAllMocks();
     });
 
     describe("tracks enabling and disabling", () => {
diff --git a/apps/web/test/unit-tests/settings/controllers/FallbackIceServerController-test.ts b/apps/web/src/settings/controllers/FallbackIceServerController.test.ts
similarity index 73%
rename from apps/web/test/unit-tests/settings/controllers/FallbackIceServerController-test.ts
rename to apps/web/src/settings/controllers/FallbackIceServerController.test.ts
index 7834c4fd91..a777d64113 100644
--- a/apps/web/test/unit-tests/settings/controllers/FallbackIceServerController-test.ts
+++ b/apps/web/src/settings/controllers/FallbackIceServerController.test.ts
@@ -5,13 +5,16 @@ 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 fetchMock from "@fetch-mock/jest";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
+import fetchMock from "@fetch-mock/vitest";
 import { ClientEvent, MatrixClient } from "matrix-js-sdk/src/matrix";
 
-import { SettingLevel } from "../../../../src/settings/SettingLevel";
-import FallbackIceServerController from "../../../../src/settings/controllers/FallbackIceServerController.ts";
-import MatrixClientBackedController from "../../../../src/settings/controllers/MatrixClientBackedController.ts";
-import SettingsStore from "../../../../src/settings/SettingsStore.ts";
+import { SettingLevel } from "../SettingLevel";
+import FallbackIceServerController from "./FallbackIceServerController.ts";
+import MatrixClientBackedController from "./MatrixClientBackedController.ts";
+import SettingsStore from "../SettingsStore.ts";
 
 describe("FallbackIceServerController", () => {
     beforeEach(() => {
@@ -19,7 +22,7 @@ describe("FallbackIceServerController", () => {
     });
 
     afterEach(() => {
-        jest.restoreAllMocks();
+        vi.restoreAllMocks();
     });
 
     it("should update MatrixClient's state when the setting is updated", async () => {
@@ -45,12 +48,13 @@ describe("FallbackIceServerController", () => {
         MatrixClientBackedController.matrixClient = client;
         expect(controller.settingDisabled).toBeFalsy();
 
-        client["clientWellKnown"] = {
+        const wellKnown = {
             "io.element.voip": {
                 disable_fallback_ice: true,
             },
         };
-        client.emit(ClientEvent.ClientWellKnown, client["clientWellKnown"]);
+        vi.spyOn(client, "getClientWellKnown").mockResolvedValue(wellKnown);
+        client.emit(ClientEvent.ClientWellKnown, wellKnown);
 
         expect(controller.settingDisabled).toBeTruthy();
     });
diff --git a/apps/web/src/settings/controllers/FallbackIceServerController.ts b/apps/web/src/settings/controllers/FallbackIceServerController.ts
index fa87a00bd3..858bab6ce8 100644
--- a/apps/web/src/settings/controllers/FallbackIceServerController.ts
+++ b/apps/web/src/settings/controllers/FallbackIceServerController.ts
@@ -8,7 +8,6 @@ Please see LICENSE files in the repository root for full details.
 import { ClientEvent, type IClientWellKnown, type MatrixClient } from "matrix-js-sdk/src/matrix";
 
 import { type SettingLevel } from "../SettingLevel";
-import SettingsStore from "../SettingsStore.ts";
 import MatrixClientBackedController from "./MatrixClientBackedController.ts";
 
 /**
@@ -47,6 +46,6 @@ export default class FallbackIceServerController extends MatrixClientBackedContr
     }
 
     public onChange(_level: SettingLevel, _roomId: string | null, _newValue: any): void {
-        this.client?.setFallbackICEServerAllowed(!!SettingsStore.getValue("fallbackICEServerAllowed"));
+        this.client?.setFallbackICEServerAllowed(!!this.settingsStore.getValue("fallbackICEServerAllowed"));
     }
 }
diff --git a/apps/web/test/unit-tests/settings/controllers/FontSizeController-test.ts b/apps/web/src/settings/controllers/FontSizeController.test.ts
similarity index 54%
rename from apps/web/test/unit-tests/settings/controllers/FontSizeController-test.ts
rename to apps/web/src/settings/controllers/FontSizeController.test.ts
index e9dc3ee942..7d36ab1d90 100644
--- a/apps/web/test/unit-tests/settings/controllers/FontSizeController-test.ts
+++ b/apps/web/src/settings/controllers/FontSizeController.test.ts
@@ -6,12 +6,14 @@ 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 { Action } from "../../../../src/dispatcher/actions";
-import dis from "../../../../src/dispatcher/dispatcher";
-import FontSizeController from "../../../../src/settings/controllers/FontSizeController";
-import { SettingLevel } from "../../../../src/settings/SettingLevel";
+import { vi, describe, it, expect } from "vitest";
 
-const dispatchSpy = jest.spyOn(dis, "fire");
+import { Action } from "../../dispatcher/actions";
+import dis from "../../dispatcher/dispatcher";
+import FontSizeController from "./FontSizeController";
+import { SettingLevel } from "../SettingLevel";
+
+const dispatchSpy = vi.spyOn(dis, "dispatch");
 
 describe("FontSizeController", () => {
     it("dispatches a font size action on change", () => {
@@ -19,6 +21,6 @@ describe("FontSizeController", () => {
 
         controller.onChange(SettingLevel.ACCOUNT, "$room:server", 12);
 
-        expect(dispatchSpy).toHaveBeenCalledWith(Action.MigrateBaseFontSize);
+        expect(dispatchSpy).toHaveBeenCalledWith({ action: Action.UpdateFontSizeDelta, delta: 12 });
     });
 });
diff --git a/apps/web/src/settings/controllers/FontSizeController.ts b/apps/web/src/settings/controllers/FontSizeController.ts
index 140369c2b8..fa70012fcb 100644
--- a/apps/web/src/settings/controllers/FontSizeController.ts
+++ b/apps/web/src/settings/controllers/FontSizeController.ts
@@ -10,7 +10,7 @@ import SettingController from "./SettingController";
 import dis from "../../dispatcher/dispatcher";
 import { type UpdateFontSizeDeltaPayload } from "../../dispatcher/payloads/UpdateFontSizeDeltaPayload";
 import { Action } from "../../dispatcher/actions";
-import { SettingLevel } from "../SettingLevel";
+import { type SettingLevel } from "../SettingLevel";
 
 export default class FontSizeController extends SettingController {
     public constructor() {
@@ -18,13 +18,7 @@ export default class FontSizeController extends SettingController {
     }
 
     public onChange(level: SettingLevel, roomId: string, newValue: any): void {
-        // In a distant past, `baseFontSize` was set on the account and config
-        // level. This can be accessed only after the initial sync. If we end up
-        // discovering that a logged in user has this kind of setting, we want to
-        // trigger another migration of the base font size.
-        if (level === SettingLevel.ACCOUNT || level === SettingLevel.CONFIG) {
-            dis.fire(Action.MigrateBaseFontSize);
-        } else if (newValue !== "") {
+        if (newValue !== "") {
             // Dispatch font size change so that everything open responds to the change.
             dis.dispatch<UpdateFontSizeDeltaPayload>({
                 action: Action.UpdateFontSizeDelta,
diff --git a/apps/web/test/unit-tests/settings/controllers/IncompatibleController-test.ts b/apps/web/src/settings/controllers/IncompatibleController.test.ts
similarity index 63%
rename from apps/web/test/unit-tests/settings/controllers/IncompatibleController-test.ts
rename to apps/web/src/settings/controllers/IncompatibleController.test.ts
index 43dec5fc44..27f53ad92c 100644
--- a/apps/web/test/unit-tests/settings/controllers/IncompatibleController-test.ts
+++ b/apps/web/src/settings/controllers/IncompatibleController.test.ts
@@ -6,13 +6,20 @@ 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 IncompatibleController from "../../../../src/settings/controllers/IncompatibleController";
-import { SettingLevel } from "../../../../src/settings/SettingLevel";
-import SettingsStore from "../../../../src/settings/SettingsStore";
-import { type FeatureSettingKey } from "../../../../src/settings/Settings.tsx";
+import { vi, describe, it, expect, beforeEach } from "vitest";
+
+import IncompatibleController from "./IncompatibleController";
+import { SettingLevel } from "../SettingLevel";
+import SettingsStore from "../SettingsStore";
+
+declare module "../Settings.tsx" {
+    interface Settings {
+        test_setting: IBaseSetting<string>;
+    }
+}
 
 describe("IncompatibleController", () => {
-    const settingsGetValueSpy = jest.spyOn(SettingsStore, "getValue");
+    const settingsGetValueSpy = vi.spyOn(SettingsStore, "getValue");
     beforeEach(() => {
         settingsGetValueSpy.mockClear();
     });
@@ -21,17 +28,17 @@ describe("IncompatibleController", () => {
         describe("when incompatibleValue is not set", () => {
             it("returns true when setting value is true", () => {
                 // no incompatible value set, defaulted to true
-                const controller = new IncompatibleController("feature_spotlight" as FeatureSettingKey, { key: null });
+                const controller = new IncompatibleController("test_setting", { key: null });
                 settingsGetValueSpy.mockReturnValue(true);
                 // true === true
                 expect(controller.incompatibleSetting).toBe(true);
                 expect(controller.settingDisabled).toEqual(true);
-                expect(settingsGetValueSpy).toHaveBeenCalledWith("feature_spotlight");
+                expect(settingsGetValueSpy).toHaveBeenCalledWith("test_setting");
             });
 
             it("returns false when setting value is not true", () => {
                 // no incompatible value set, defaulted to true
-                const controller = new IncompatibleController("feature_spotlight" as FeatureSettingKey, { key: null });
+                const controller = new IncompatibleController("test_setting", { key: null });
                 settingsGetValueSpy.mockReturnValue("test");
                 expect(controller.incompatibleSetting).toBe(false);
             });
@@ -39,21 +46,13 @@ describe("IncompatibleController", () => {
 
         describe("when incompatibleValue is set to a value", () => {
             it("returns true when setting value matches incompatible value", () => {
-                const controller = new IncompatibleController(
-                    "feature_spotlight" as FeatureSettingKey,
-                    { key: null },
-                    "test",
-                );
+                const controller = new IncompatibleController("test_setting", { key: null }, "test");
                 settingsGetValueSpy.mockReturnValue("test");
                 expect(controller.incompatibleSetting).toBe(true);
             });
 
             it("returns false when setting value is not true", () => {
-                const controller = new IncompatibleController(
-                    "feature_spotlight" as FeatureSettingKey,
-                    { key: null },
-                    "test",
-                );
+                const controller = new IncompatibleController("test_setting", { key: null }, "test");
                 settingsGetValueSpy.mockReturnValue("not test");
                 expect(controller.incompatibleSetting).toBe(false);
             });
@@ -61,12 +60,8 @@ describe("IncompatibleController", () => {
 
         describe("when incompatibleValue is set to a function", () => {
             it("returns result from incompatibleValue function", () => {
-                const incompatibleValueFn = jest.fn().mockReturnValue(false);
-                const controller = new IncompatibleController(
-                    "feature_spotlight" as FeatureSettingKey,
-                    { key: null },
-                    incompatibleValueFn,
-                );
+                const incompatibleValueFn = vi.fn().mockReturnValue(false);
+                const controller = new IncompatibleController("test_setting", { key: null }, incompatibleValueFn);
                 settingsGetValueSpy.mockReturnValue("test");
                 expect(controller.incompatibleSetting).toBe(false);
                 expect(incompatibleValueFn).toHaveBeenCalledWith("test");
@@ -77,7 +72,7 @@ describe("IncompatibleController", () => {
     describe("getValueOverride()", () => {
         it("returns forced value when setting is incompatible", () => {
             settingsGetValueSpy.mockReturnValue(true);
-            const controller = new IncompatibleController("feature_spotlight" as FeatureSettingKey, { key: null });
+            const controller = new IncompatibleController("test_setting", { key: null });
             expect(
                 controller.getValueOverride(SettingLevel.ACCOUNT, "$room:server", true, SettingLevel.ACCOUNT),
             ).toEqual({ key: null });
@@ -85,7 +80,7 @@ describe("IncompatibleController", () => {
 
         it("returns null when setting is not incompatible", () => {
             settingsGetValueSpy.mockReturnValue(false);
-            const controller = new IncompatibleController("feature_spotlight" as FeatureSettingKey, { key: null });
+            const controller = new IncompatibleController("test_setting", { key: null });
             expect(
                 controller.getValueOverride(SettingLevel.ACCOUNT, "$room:server", true, SettingLevel.ACCOUNT),
             ).toEqual(null);
diff --git a/apps/web/src/settings/controllers/IncompatibleController.ts b/apps/web/src/settings/controllers/IncompatibleController.ts
index 81c8ca74ac..73b9f07c58 100644
--- a/apps/web/src/settings/controllers/IncompatibleController.ts
+++ b/apps/web/src/settings/controllers/IncompatibleController.ts
@@ -8,19 +8,26 @@ Please see LICENSE files in the repository root for full details.
 
 import SettingController from "./SettingController";
 import { type SettingLevel } from "../SettingLevel";
-import SettingsStore from "../SettingsStore";
-import { type BooleanSettingKey } from "../Settings.tsx";
+import { type SettingKey, type Settings } from "../Settings.tsx";
+import PlatformPeg from "../../PlatformPeg.ts";
 
 /**
  * Enforces that a boolean setting cannot be enabled if the incompatible setting
  * is also enabled, to prevent cascading undefined behaviour between conflicting
  * labs flags.
  */
-export default class IncompatibleController extends SettingController {
+export default class IncompatibleController<
+    ControlledSetting extends SettingKey,
+    WatchedSetting extends SettingKey,
+> extends SettingController {
     public constructor(
-        private settingName: BooleanSettingKey,
-        private forcedValue: any = false,
-        private incompatibleValue: any | ((v: any) => boolean) = true,
+        private settingName: WatchedSetting,
+        private forcedValue: Settings[ControlledSetting]["default"] = false,
+        private incompatibleValue:
+            | Settings[WatchedSetting]["default"]
+            | ((v: Settings[WatchedSetting]["default"]) => boolean) = true,
+        private readonly disabledMessage?: string,
+        private readonly forceReload = false,
     ) {
         super();
     }
@@ -37,14 +44,23 @@ export default class IncompatibleController extends SettingController {
         return null; // no override
     }
 
-    public get settingDisabled(): boolean {
-        return this.incompatibleSetting;
+    public get settingDisabled(): boolean | string {
+        if (this.incompatibleSetting) {
+            return this.disabledMessage ?? true;
+        }
+        return false;
     }
 
     public get incompatibleSetting(): boolean {
         if (typeof this.incompatibleValue === "function") {
-            return this.incompatibleValue(SettingsStore.getValue(this.settingName));
+            return this.incompatibleValue(this.settingsStore.getValue(this.settingName));
+        }
+        return this.settingsStore.getValue(this.settingName) === this.incompatibleValue;
+    }
+
+    public onChange(): void {
+        if (this.forceReload) {
+            PlatformPeg.get()?.reload();
         }
-        return SettingsStore.getValue(this.settingName) === this.incompatibleValue;
     }
 }
diff --git a/apps/web/test/unit-tests/settings/controllers/InviteRulesConfigController-test.ts b/apps/web/src/settings/controllers/InviteRulesConfigController.test.ts
similarity index 86%
rename from apps/web/test/unit-tests/settings/controllers/InviteRulesConfigController-test.ts
rename to apps/web/src/settings/controllers/InviteRulesConfigController.test.ts
index 516b1641f5..ef1902eee5 100644
--- a/apps/web/test/unit-tests/settings/controllers/InviteRulesConfigController-test.ts
+++ b/apps/web/src/settings/controllers/InviteRulesConfigController.test.ts
@@ -5,17 +5,20 @@ 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 { MatrixEvent } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import MatrixClientBackedController from "../../../../src/settings/controllers/MatrixClientBackedController";
-import InviteRulesConfigController from "../../../../src/settings/controllers/InviteRulesConfigController";
-import { SettingLevel } from "../../../../src/settings/SettingLevel";
-import { getMockClientWithEventEmitter, mockClientMethodsServer } from "../../../test-utils";
-import { INVITE_RULES_ACCOUNT_DATA_TYPE, type InviteConfigAccountData } from "../../../../src/@types/invite-rules";
+import { vi, describe, it, expect, afterEach } from "vitest";
+import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { getMockClientWithEventEmitter, mockClientMethodsServer } from "test-utils";
+
+import MatrixClientBackedController from "./MatrixClientBackedController";
+import InviteRulesConfigController from "./InviteRulesConfigController";
+import { SettingLevel } from "../SettingLevel";
+import { INVITE_RULES_ACCOUNT_DATA_TYPE, type InviteConfigAccountData } from "../../@types/invite-rules";
 
 describe("InviteRulesConfigController", () => {
     afterEach(() => {
-        jest.restoreAllMocks();
+        vi.restoreAllMocks();
     });
 
     it("gets the default settings when none are specified.", () => {
@@ -23,7 +26,7 @@ describe("InviteRulesConfigController", () => {
 
         MatrixClientBackedController.matrixClient = getMockClientWithEventEmitter({
             ...mockClientMethodsServer(),
-            getAccountData: jest.fn().mockReturnValue(null),
+            getAccountData: vi.fn().mockReturnValue(null),
         });
 
         const value = controller.getValueOverride(SettingLevel.ACCOUNT);
@@ -35,7 +38,7 @@ describe("InviteRulesConfigController", () => {
 
         MatrixClientBackedController.matrixClient = getMockClientWithEventEmitter({
             ...mockClientMethodsServer(),
-            getAccountData: jest
+            getAccountData: vi
                 .fn()
                 .mockReturnValue(new MatrixEvent({ type: INVITE_RULES_ACCOUNT_DATA_TYPE, content: {} })),
         });
@@ -51,7 +54,7 @@ describe("InviteRulesConfigController", () => {
 
             MatrixClientBackedController.matrixClient = getMockClientWithEventEmitter({
                 ...mockClientMethodsServer(),
-                getAccountData: jest.fn().mockReturnValue(
+                getAccountData: vi.fn().mockReturnValue(
                     new MatrixEvent({
                         type: INVITE_RULES_ACCOUNT_DATA_TYPE,
                         content,
@@ -73,7 +76,7 @@ describe("InviteRulesConfigController", () => {
 
         MatrixClientBackedController.matrixClient = getMockClientWithEventEmitter({
             ...mockClientMethodsServer(),
-            getAccountData: jest.fn().mockReturnValue(
+            getAccountData: vi.fn().mockReturnValue(
                 new MatrixEvent({
                     type: INVITE_RULES_ACCOUNT_DATA_TYPE,
                     content,
@@ -89,7 +92,7 @@ describe("InviteRulesConfigController", () => {
         const controller = new InviteRulesConfigController();
         const client = (MatrixClientBackedController.matrixClient = getMockClientWithEventEmitter({
             ...mockClientMethodsServer(),
-            getAccountData: jest.fn().mockReturnValue(
+            getAccountData: vi.fn().mockReturnValue(
                 new MatrixEvent({
                     type: INVITE_RULES_ACCOUNT_DATA_TYPE,
                     content: {
@@ -98,7 +101,7 @@ describe("InviteRulesConfigController", () => {
                     },
                 }),
             ),
-            setAccountData: jest.fn(),
+            setAccountData: vi.fn(),
         }));
 
         expect(await controller.beforeChange(SettingLevel.ACCOUNT, null, { allBlocked: true })).toBe(true);
@@ -113,7 +116,7 @@ describe("InviteRulesConfigController", () => {
         const controller = new InviteRulesConfigController();
         const client = (MatrixClientBackedController.matrixClient = getMockClientWithEventEmitter({
             ...mockClientMethodsServer(),
-            getAccountData: jest.fn().mockReturnValue(
+            getAccountData: vi.fn().mockReturnValue(
                 new MatrixEvent({
                     type: INVITE_RULES_ACCOUNT_DATA_TYPE,
                     content: {
@@ -123,7 +126,7 @@ describe("InviteRulesConfigController", () => {
                     },
                 }),
             ),
-            setAccountData: jest.fn(),
+            setAccountData: vi.fn(),
         }));
 
         expect(await controller.beforeChange(SettingLevel.ACCOUNT, null, { allBlocked: false })).toBe(true);
@@ -137,7 +140,7 @@ describe("InviteRulesConfigController", () => {
         const controller = new InviteRulesConfigController();
         const client = (MatrixClientBackedController.matrixClient = getMockClientWithEventEmitter({
             ...mockClientMethodsServer(),
-            getAccountData: jest.fn().mockReturnValue(
+            getAccountData: vi.fn().mockReturnValue(
                 new MatrixEvent({
                     type: INVITE_RULES_ACCOUNT_DATA_TYPE,
                     content: {
@@ -147,7 +150,7 @@ describe("InviteRulesConfigController", () => {
                     },
                 }),
             ),
-            setAccountData: jest.fn(),
+            setAccountData: vi.fn(),
         }));
 
         expect(await controller.beforeChange(SettingLevel.ACCOUNT, null, { allBlocked })).toBe(false);
diff --git a/apps/web/src/settings/controllers/InviteRulesConfigController.ts b/apps/web/src/settings/controllers/InviteRulesConfigController.ts
index 61c7323009..74d3253dbf 100644
--- a/apps/web/src/settings/controllers/InviteRulesConfigController.ts
+++ b/apps/web/src/settings/controllers/InviteRulesConfigController.ts
@@ -14,7 +14,7 @@ import {
     INVITE_RULES_ACCOUNT_DATA_TYPE,
     type InviteConfigAccountData,
 } from "../../@types/invite-rules.ts";
-import { _t } from "../../languageHandler.tsx";
+import { _t } from "../../languageHandler";
 
 /**
  * Handles invite filtering rules provided by MSC4155.
diff --git a/apps/web/test/unit-tests/settings/controllers/MediaPreviewConfigController-test.ts b/apps/web/src/settings/controllers/MediaPreviewConfigController.test.ts
similarity index 82%
rename from apps/web/test/unit-tests/settings/controllers/MediaPreviewConfigController-test.ts
rename to apps/web/src/settings/controllers/MediaPreviewConfigController.test.ts
index ec93afb799..2e81994475 100644
--- a/apps/web/test/unit-tests/settings/controllers/MediaPreviewConfigController-test.ts
+++ b/apps/web/src/settings/controllers/MediaPreviewConfigController.test.ts
@@ -5,17 +5,20 @@ 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 { MatrixEvent } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import MatrixClientBackedController from "../../../../src/settings/controllers/MatrixClientBackedController";
-import MediaPreviewConfigController from "../../../../src/settings/controllers/MediaPreviewConfigController";
-import { SettingLevel } from "../../../../src/settings/SettingLevel";
-import { getMockClientWithEventEmitter, mockClientMethodsServer } from "../../../test-utils";
-import { MEDIA_PREVIEW_ACCOUNT_DATA_TYPE, MediaPreviewValue } from "../../../../src/@types/media_preview";
+import { vi, describe, it, expect, afterEach } from "vitest";
+import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { getMockClientWithEventEmitter, mockClientMethodsServer } from "test-utils";
+
+import MatrixClientBackedController from "./MatrixClientBackedController";
+import MediaPreviewConfigController from "./MediaPreviewConfigController";
+import { SettingLevel } from "../SettingLevel";
+import { MEDIA_PREVIEW_ACCOUNT_DATA_TYPE, MediaPreviewValue } from "../../@types/media_preview";
 
 describe("MediaPreviewConfigController", () => {
     afterEach(() => {
-        jest.restoreAllMocks();
+        vi.restoreAllMocks();
     });
 
     const ROOM_ID = "!room:example.org";
@@ -25,7 +28,7 @@ describe("MediaPreviewConfigController", () => {
 
         MatrixClientBackedController.matrixClient = getMockClientWithEventEmitter({
             ...mockClientMethodsServer(),
-            getAccountData: jest.fn().mockReturnValue(null),
+            getAccountData: vi.fn().mockReturnValue(null),
         });
 
         const value = controller.getValueOverride(SettingLevel.ACCOUNT, null);
@@ -37,7 +40,7 @@ describe("MediaPreviewConfigController", () => {
 
         MatrixClientBackedController.matrixClient = getMockClientWithEventEmitter({
             ...mockClientMethodsServer(),
-            getAccountData: jest
+            getAccountData: vi
                 .fn()
                 .mockReturnValue(new MatrixEvent({ type: MEDIA_PREVIEW_ACCOUNT_DATA_TYPE, content: {} })),
         });
@@ -51,7 +54,7 @@ describe("MediaPreviewConfigController", () => {
 
         MatrixClientBackedController.matrixClient = getMockClientWithEventEmitter({
             ...mockClientMethodsServer(),
-            getAccountData: jest.fn().mockReturnValue(
+            getAccountData: vi.fn().mockReturnValue(
                 new MatrixEvent({
                     type: MEDIA_PREVIEW_ACCOUNT_DATA_TYPE,
                     content: {
@@ -59,8 +62,8 @@ describe("MediaPreviewConfigController", () => {
                     },
                 }),
             ),
-            getRoom: jest.fn().mockReturnValue({
-                getAccountData: jest.fn().mockReturnValue(null),
+            getRoom: vi.fn().mockReturnValue({
+                getAccountData: vi.fn().mockReturnValue(null),
             }),
         });
 
@@ -77,9 +80,9 @@ describe("MediaPreviewConfigController", () => {
 
         MatrixClientBackedController.matrixClient = getMockClientWithEventEmitter({
             ...mockClientMethodsServer(),
-            getAccountData: jest.fn().mockReturnValue(null),
-            getRoom: jest.fn().mockReturnValue({
-                getAccountData: jest.fn().mockReturnValue(
+            getAccountData: vi.fn().mockReturnValue(null),
+            getRoom: vi.fn().mockReturnValue({
+                getAccountData: vi.fn().mockReturnValue(
                     new MatrixEvent({
                         type: MEDIA_PREVIEW_ACCOUNT_DATA_TYPE,
                         content: {
@@ -105,7 +108,7 @@ describe("MediaPreviewConfigController", () => {
 
             MatrixClientBackedController.matrixClient = getMockClientWithEventEmitter({
                 ...mockClientMethodsServer(),
-                getAccountData: jest.fn().mockReturnValue(
+                getAccountData: vi.fn().mockReturnValue(
                     new MatrixEvent({
                         type: MEDIA_PREVIEW_ACCOUNT_DATA_TYPE,
                         content: {
@@ -113,8 +116,8 @@ describe("MediaPreviewConfigController", () => {
                         },
                     }),
                 ),
-                getRoom: jest.fn().mockReturnValue({
-                    getAccountData: jest.fn().mockReturnValue(null),
+                getRoom: vi.fn().mockReturnValue({
+                    getAccountData: vi.fn().mockReturnValue(null),
                 }),
             });
 
@@ -133,7 +136,7 @@ describe("MediaPreviewConfigController", () => {
 
             MatrixClientBackedController.matrixClient = getMockClientWithEventEmitter({
                 ...mockClientMethodsServer(),
-                getAccountData: jest.fn().mockReturnValue(
+                getAccountData: vi.fn().mockReturnValue(
                     new MatrixEvent({
                         type: MEDIA_PREVIEW_ACCOUNT_DATA_TYPE,
                         content: {
@@ -141,8 +144,8 @@ describe("MediaPreviewConfigController", () => {
                         },
                     }),
                 ),
-                getRoom: jest.fn().mockReturnValue({
-                    getAccountData: jest.fn().mockReturnValue(
+                getRoom: vi.fn().mockReturnValue({
+                    getAccountData: vi.fn().mockReturnValue(
                         new MatrixEvent({
                             type: MEDIA_PREVIEW_ACCOUNT_DATA_TYPE,
                             content: {
diff --git a/apps/web/src/settings/controllers/MediaPreviewConfigController.ts b/apps/web/src/settings/controllers/MediaPreviewConfigController.ts
index beda3d1cf5..14e3b1ac10 100644
--- a/apps/web/src/settings/controllers/MediaPreviewConfigController.ts
+++ b/apps/web/src/settings/controllers/MediaPreviewConfigController.ts
@@ -56,7 +56,7 @@ export default class MediaPreviewConfigController extends MatrixClientBackedCont
 
         // Save an account data fetch if we have all the values.
         if (calculatedConfig.invite_avatars && calculatedConfig.media_previews) {
-            return calculatedConfig as MediaPreviewConfig;
+            return calculatedConfig;
         }
 
         // We're missing some keys.
diff --git a/apps/web/src/settings/controllers/NotificationControllers.ts b/apps/web/src/settings/controllers/NotificationControllers.ts
index 08c5cc3c2c..20a9245a25 100644
--- a/apps/web/src/settings/controllers/NotificationControllers.ts
+++ b/apps/web/src/settings/controllers/NotificationControllers.ts
@@ -29,14 +29,6 @@ export function isPushNotifyDisabled(): boolean {
     return masterRule.enabled && !masterRule.actions.includes(PushRuleActionName.Notify);
 }
 
-function getNotifier(): any {
-    // TODO: [TS] Formal type that doesn't cause a cyclical reference.
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    let Notifier = require("../../Notifier"); // avoids cyclical references
-    if (Notifier.default) Notifier = Notifier.default; // correct for webpack require() weirdness
-    return Notifier;
-}
-
 export class NotificationsEnabledController extends SettingController {
     public getValueOverride(
         level: SettingLevel,
@@ -44,7 +36,7 @@ export class NotificationsEnabledController extends SettingController {
         calculatedValue: any,
         calculatedAtLevel: SettingLevel | null,
     ): any {
-        if (!getNotifier().isPossible()) return false;
+        if (!this.sdkContext.notifier.isPossible()) return false;
 
         if (calculatedValue === null || calculatedAtLevel === "default") {
             return !isPushNotifyDisabled();
@@ -54,15 +46,15 @@ export class NotificationsEnabledController extends SettingController {
     }
 
     public onChange(level: SettingLevel, roomId: string, newValue: any): void {
-        if (getNotifier().supportsDesktopNotifications()) {
-            getNotifier().setEnabled(newValue);
+        if (this.sdkContext.notifier.supportsDesktopNotifications()) {
+            this.sdkContext.notifier.setEnabled(newValue);
         }
     }
 }
 
 export class NotificationBodyEnabledController extends SettingController {
     public getValueOverride(level: SettingLevel, roomId: string, calculatedValue: any): any {
-        if (!getNotifier().isPossible()) return false;
+        if (!this.sdkContext.notifier.isPossible()) return false;
 
         if (calculatedValue === null) {
             return !isPushNotifyDisabled();
diff --git a/apps/web/test/unit-tests/settings/controllers/RequiresSettingsController-test.ts b/apps/web/src/settings/controllers/RequiresSettingsController.test.ts
similarity index 89%
rename from apps/web/test/unit-tests/settings/controllers/RequiresSettingsController-test.ts
rename to apps/web/src/settings/controllers/RequiresSettingsController.test.ts
index 36335d9323..a337e0a282 100644
--- a/apps/web/test/unit-tests/settings/controllers/RequiresSettingsController-test.ts
+++ b/apps/web/src/settings/controllers/RequiresSettingsController.test.ts
@@ -5,12 +5,16 @@ 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 { Capabilities } from "matrix-js-sdk/src/matrix";
-import RequiresSettingsController from "../../../../src/settings/controllers/RequiresSettingsController";
-import { SettingLevel } from "../../../../src/settings/SettingLevel";
-import SettingsStore from "../../../../src/settings/SettingsStore";
-import MatrixClientBackedController from "../../../../src/settings/controllers/MatrixClientBackedController";
-import { getMockClientWithEventEmitter, mockClientMethodsServer } from "../../../test-utils";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
+import { type Capabilities } from "matrix-js-sdk/src/matrix";
+import { getMockClientWithEventEmitter, mockClientMethodsServer } from "test-utils";
+
+import RequiresSettingsController from "./RequiresSettingsController";
+import { SettingLevel } from "../SettingLevel";
+import SettingsStore from "../SettingsStore";
+import MatrixClientBackedController from "./MatrixClientBackedController";
 
 describe("RequiresSettingsController", () => {
     afterEach(() => {
@@ -39,14 +43,14 @@ describe("RequiresSettingsController", () => {
         beforeEach(() => {
             client = getMockClientWithEventEmitter({
                 ...mockClientMethodsServer(),
-                getCachedCapabilities: jest.fn().mockImplementation(() => {}),
-                getCapabilities: jest.fn().mockRejectedValue({}),
+                getCachedCapabilities: vi.fn().mockImplementation(() => {}),
+                getCapabilities: vi.fn().mockRejectedValue({}),
             });
             MatrixClientBackedController["_matrixClient"] = client;
         });
 
         afterEach(() => {
-            jest.restoreAllMocks();
+            vi.restoreAllMocks();
         });
 
         it("will disable setting if capability check is true", async () => {
diff --git a/apps/web/src/settings/controllers/RequiresSettingsController.ts b/apps/web/src/settings/controllers/RequiresSettingsController.ts
index 3729ce7fbb..cfe6802721 100644
--- a/apps/web/src/settings/controllers/RequiresSettingsController.ts
+++ b/apps/web/src/settings/controllers/RequiresSettingsController.ts
@@ -8,7 +8,6 @@ Please see LICENSE files in the repository root for full details.
 import { logger as rootLogger } from "matrix-js-sdk/src/logger";
 
 import type { Capabilities } from "matrix-js-sdk/src/matrix";
-import SettingsStore from "../SettingsStore";
 import type { BooleanSettingKey } from "../Settings.tsx";
 import MatrixClientBackedController from "./MatrixClientBackedController.ts";
 
@@ -60,7 +59,7 @@ export default class RequiresSettingsController extends MatrixClientBackedContro
     }
 
     public get settingDisabled(): boolean | string {
-        if (this.settingNames.some((s) => !SettingsStore.getValue(s))) {
+        if (this.settingNames.some((s) => !this.settingsStore.getValue(s))) {
             return true;
         }
         return this.isBlockedByCapabilites;
diff --git a/apps/web/test/unit-tests/settings/controllers/ServerSupportUnstableFeatureController-test.ts b/apps/web/src/settings/controllers/ServerSupportUnstableFeatureController.test.ts
similarity index 83%
rename from apps/web/test/unit-tests/settings/controllers/ServerSupportUnstableFeatureController-test.ts
rename to apps/web/src/settings/controllers/ServerSupportUnstableFeatureController.test.ts
index 1bd80e2535..0819267453 100644
--- a/apps/web/test/unit-tests/settings/controllers/ServerSupportUnstableFeatureController-test.ts
+++ b/apps/web/src/settings/controllers/ServerSupportUnstableFeatureController.test.ts
@@ -6,14 +6,17 @@ 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 MatrixClient } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import ServerSupportUnstableFeatureController from "../../../../src/settings/controllers/ServerSupportUnstableFeatureController";
-import { SettingLevel } from "../../../../src/settings/SettingLevel";
-import { type FeatureSettingKey, LabGroup, SETTINGS } from "../../../../src/settings/Settings";
-import { stubClient } from "../../../test-utils";
-import { WatchManager } from "../../../../src/settings/WatchManager";
-import MatrixClientBackedController from "../../../../src/settings/controllers/MatrixClientBackedController";
+import { vi, describe, it, expect } from "vitest";
+import { type MatrixClient } from "matrix-js-sdk/src/matrix";
+import { stubClient } from "test-utils";
+
+import ServerSupportUnstableFeatureController from "./ServerSupportUnstableFeatureController";
+import { SettingLevel } from "../SettingLevel";
+import { type FeatureSettingKey, LabGroup, SETTINGS } from "../Settings";
+import { WatchManager } from "../WatchManager";
+import MatrixClientBackedController from "./MatrixClientBackedController";
 
 describe("ServerSupportUnstableFeatureController", () => {
     const watchers = new WatchManager();
@@ -41,7 +44,7 @@ describe("ServerSupportUnstableFeatureController", () => {
     describe("getValueOverride()", () => {
         it("should return forced value is setting is disabled", async () => {
             const cli = stubClient();
-            cli.doesServerSupportUnstableFeature = jest.fn(async () => false);
+            cli.doesServerSupportUnstableFeature = vi.fn(async () => false);
 
             const controller = new ServerSupportUnstableFeatureController(
                 setting,
@@ -60,7 +63,7 @@ describe("ServerSupportUnstableFeatureController", () => {
 
         it("should pass through to the handler if setting is not disabled", async () => {
             const cli = stubClient();
-            cli.doesServerSupportUnstableFeature = jest.fn(async () => true);
+            cli.doesServerSupportUnstableFeature = vi.fn(async () => true);
 
             const controller = new ServerSupportUnstableFeatureController(
                 setting,
@@ -82,7 +85,7 @@ describe("ServerSupportUnstableFeatureController", () => {
 
         it("considered disabled if not all required features in the only feature group are supported", async () => {
             const cli = stubClient();
-            cli.doesServerSupportUnstableFeature = jest.fn(async (featureName) => {
+            cli.doesServerSupportUnstableFeature = vi.fn(async (featureName) => {
                 return featureName === "org.matrix.msc3827.stable";
             });
 
@@ -96,7 +99,7 @@ describe("ServerSupportUnstableFeatureController", () => {
 
         it("considered enabled if all required features in the only feature group are supported", async () => {
             const cli = stubClient();
-            cli.doesServerSupportUnstableFeature = jest.fn(async (featureName) => {
+            cli.doesServerSupportUnstableFeature = vi.fn(async (featureName) => {
                 return featureName === "org.matrix.msc3827.stable" || featureName === "org.matrix.msc3030";
             });
             const controller = new ServerSupportUnstableFeatureController(setting, watchers, [
@@ -109,7 +112,7 @@ describe("ServerSupportUnstableFeatureController", () => {
 
         it("considered enabled if all required features in one of the feature groups are supported", async () => {
             const cli = stubClient();
-            cli.doesServerSupportUnstableFeature = jest.fn(async (featureName) => {
+            cli.doesServerSupportUnstableFeature = vi.fn(async (featureName) => {
                 return featureName === "org.matrix.msc3827.stable" || featureName === "org.matrix.msc3030";
             });
             const controller = new ServerSupportUnstableFeatureController(setting, watchers, [
@@ -123,7 +126,7 @@ describe("ServerSupportUnstableFeatureController", () => {
 
         it("considered disabled if not all required features in one of the feature groups are supported", async () => {
             const cli = stubClient();
-            cli.doesServerSupportUnstableFeature = jest.fn(async (featureName) => {
+            cli.doesServerSupportUnstableFeature = vi.fn(async (featureName) => {
                 return featureName === "org.matrix.msc3827.stable";
             });
 
diff --git a/apps/web/src/settings/controllers/ServerSupportUnstableFeatureController.ts b/apps/web/src/settings/controllers/ServerSupportUnstableFeatureController.ts
index c5c3fc3911..6109b1bc07 100644
--- a/apps/web/src/settings/controllers/ServerSupportUnstableFeatureController.ts
+++ b/apps/web/src/settings/controllers/ServerSupportUnstableFeatureController.ts
@@ -10,9 +10,8 @@ Please see LICENSE files in the repository root for full details.
 import { type SettingLevel } from "../SettingLevel";
 import MatrixClientBackedController from "./MatrixClientBackedController";
 import { type WatchManager } from "../WatchManager";
-import SettingsStore from "../SettingsStore";
 import { type SettingKey } from "../Settings.tsx";
-import { _t } from "../../languageHandler.tsx";
+import { _t } from "../../languageHandler";
 import PlatformPeg from "../../PlatformPeg.ts";
 
 /**
@@ -63,9 +62,9 @@ export default class ServerSupportUnstableFeatureController extends MatrixClient
     public set disabled(newDisabledValue: boolean) {
         if (!newDisabledValue === this.enabled) return;
         this.enabled = !newDisabledValue;
-        const level = SettingsStore.firstSupportedLevel(this.settingName);
+        const level = this.settingsStore.firstSupportedLevel(this.settingName);
         if (!level) return;
-        const settingValue = SettingsStore.getValue(this.settingName, null);
+        const settingValue = this.settingsStore.getValue(this.settingName, null);
         this.watchers.notifyUpdate(this.settingName, null, level, settingValue);
     }
 
diff --git a/apps/web/src/settings/controllers/SettingController.ts b/apps/web/src/settings/controllers/SettingController.ts
index 4f8d804adb..9aa75aeb40 100644
--- a/apps/web/src/settings/controllers/SettingController.ts
+++ b/apps/web/src/settings/controllers/SettingController.ts
@@ -8,6 +8,8 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type SettingLevel } from "../SettingLevel";
+import type SettingsStore from "../SettingsStore";
+import { type SDKContextClass } from "../../contexts/SDKContextClass.ts";
 
 /**
  * Represents a controller for individual settings to alter the reading behaviour
@@ -18,6 +20,9 @@ import { type SettingLevel } from "../SettingLevel";
  * intended to handle environmental factors for specific settings.
  */
 export default abstract class SettingController {
+    public static sdkContext: SDKContextClass;
+    public static settingsStore: typeof SettingsStore;
+
     /**
      * Gets the overridden value for the setting, if any. This must return null if the
      * value is not to be overridden, otherwise it must return the new value.
@@ -27,7 +32,7 @@ export default abstract class SettingController {
      * may be null.
      * @param {SettingLevel} calculatedAtLevel The level for which the calculated value was
      * calculated at. May be null.
-     * @return {*} The value that should be used, or null if no override is applicable.
+     * @returns {*} The value that should be used, or null if no override is applicable.
      */
     public getValueOverride(
         level: SettingLevel,
@@ -43,7 +48,7 @@ export default abstract class SettingController {
      * @param {string} level The level at which the setting has been modified.
      * @param {String} roomId The room ID, may be null.
      * @param {*} newValue The new value for the setting, may be null.
-     * @return {boolean} Whether the settings change should be accepted.
+     * @returns {boolean} Whether the settings change should be accepted.
      */
     public async beforeChange(level: SettingLevel, roomId: string | null, newValue: any): Promise<boolean> {
         return true;
@@ -66,4 +71,20 @@ export default abstract class SettingController {
     public get settingDisabled(): boolean | string {
         return false;
     }
+
+    /**
+     * Accessor to the SettingsStore injected at runtime.
+     * Preferred to direct imports in order to avoid import cycles.
+     */
+    protected get settingsStore(): typeof SettingsStore {
+        return SettingController.settingsStore;
+    }
+
+    /**
+     * Accessor to the SDKContext injected at runtime.
+     * Preferred to direct imports in order to avoid import cycles.
+     */
+    protected get sdkContext(): SDKContextClass {
+        return SettingController.sdkContext;
+    }
 }
diff --git a/apps/web/src/settings/controllers/SlidingSyncController.ts b/apps/web/src/settings/controllers/SlidingSyncController.ts
index 44de3ba8ee..dfa3732f25 100644
--- a/apps/web/src/settings/controllers/SlidingSyncController.ts
+++ b/apps/web/src/settings/controllers/SlidingSyncController.ts
@@ -9,7 +9,6 @@ Please see LICENSE files in the repository root for full details.
 
 import SettingController from "./SettingController";
 import PlatformPeg from "../../PlatformPeg";
-import SettingsStore from "../SettingsStore";
 import { _t } from "../../languageHandler";
 import { SlidingSyncManager } from "../../SlidingSyncManager";
 
@@ -20,7 +19,7 @@ export default class SlidingSyncController extends SettingController {
 
     public get settingDisabled(): boolean | string {
         // Cannot be disabled once enabled, user has been warned and must log out and back in.
-        if (SettingsStore.getValue("feature_simplified_sliding_sync")) {
+        if (this.settingsStore.getValue("feature_simplified_sliding_sync")) {
             return _t("labs|sliding_sync_disabled_notice");
         }
         if (!SlidingSyncManager.serverSupportsSlidingSync) {
diff --git a/apps/web/test/unit-tests/settings/controllers/SystemFontController-test.ts b/apps/web/src/settings/controllers/SystemFontController.test.ts
similarity index 68%
rename from apps/web/test/unit-tests/settings/controllers/SystemFontController-test.ts
rename to apps/web/src/settings/controllers/SystemFontController.test.ts
index 13212ce650..45553bbc2e 100644
--- a/apps/web/test/unit-tests/settings/controllers/SystemFontController-test.ts
+++ b/apps/web/src/settings/controllers/SystemFontController.test.ts
@@ -6,18 +6,20 @@ 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 { Action } from "../../../../src/dispatcher/actions";
-import dis from "../../../../src/dispatcher/dispatcher";
-import SystemFontController from "../../../../src/settings/controllers/SystemFontController";
-import SettingsStore from "../../../../src/settings/SettingsStore";
+import { vi, describe, it, expect } from "vitest";
 
-const dispatchSpy = jest.spyOn(dis, "dispatch");
+import { Action } from "../../dispatcher/actions";
+import dis from "../../dispatcher/dispatcher";
+import SystemFontController from "./SystemFontController";
+import SettingsStore from "../SettingsStore";
+
+const dispatchSpy = vi.spyOn(dis, "dispatch");
 
 describe("SystemFontController", () => {
     it("dispatches a system font update action on change", () => {
         const controller = new SystemFontController();
 
-        const getValueSpy = jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName): any => {
+        const getValueSpy = vi.spyOn(SettingsStore, "getValue").mockImplementation((settingName): any => {
             if (settingName === "useBundledEmojiFont") return false;
             if (settingName === "useSystemFont") return true;
             if (settingName === "systemFont") return "Comic Sans MS";
diff --git a/apps/web/src/settings/controllers/SystemFontController.ts b/apps/web/src/settings/controllers/SystemFontController.ts
index 11d9a2cbd6..499e84bb06 100644
--- a/apps/web/src/settings/controllers/SystemFontController.ts
+++ b/apps/web/src/settings/controllers/SystemFontController.ts
@@ -7,7 +7,6 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import SettingController from "./SettingController";
-import SettingsStore from "../SettingsStore";
 import dis from "../../dispatcher/dispatcher";
 import { type UpdateSystemFontPayload } from "../../dispatcher/payloads/UpdateSystemFontPayload";
 import { Action } from "../../dispatcher/actions";
@@ -21,9 +20,9 @@ export default class SystemFontController extends SettingController {
         // Dispatch font size change so that everything open responds to the change.
         dis.dispatch<UpdateSystemFontPayload>({
             action: Action.UpdateSystemFont,
-            useBundledEmojiFont: SettingsStore.getValue("useBundledEmojiFont"),
-            useSystemFont: SettingsStore.getValue("useSystemFont"),
-            font: SettingsStore.getValue("systemFont"),
+            useBundledEmojiFont: this.settingsStore.getValue("useBundledEmojiFont"),
+            useSystemFont: this.settingsStore.getValue("useSystemFont"),
+            font: this.settingsStore.getValue("systemFont"),
         });
     }
 }
diff --git a/apps/web/src/settings/controllers/UIFeatureController.ts b/apps/web/src/settings/controllers/UIFeatureController.ts
index 59ab516487..94cd669f22 100644
--- a/apps/web/src/settings/controllers/UIFeatureController.ts
+++ b/apps/web/src/settings/controllers/UIFeatureController.ts
@@ -8,7 +8,6 @@ Please see LICENSE files in the repository root for full details.
 
 import SettingController from "./SettingController";
 import { type SettingLevel } from "../SettingLevel";
-import SettingsStore from "../SettingsStore";
 import { type SettingKey } from "../Settings.tsx";
 
 /**
@@ -40,6 +39,6 @@ export default class UIFeatureController extends SettingController {
     }
 
     public get settingDisabled(): boolean {
-        return !SettingsStore.getValue(this.uiFeatureName);
+        return !this.settingsStore.getValue(this.uiFeatureName);
     }
 }
diff --git a/apps/web/test/unit-tests/settings/enums/ImageSize-test.ts b/apps/web/src/settings/enums/ImageSize.test.ts
similarity index 93%
rename from apps/web/test/unit-tests/settings/enums/ImageSize-test.ts
rename to apps/web/src/settings/enums/ImageSize.test.ts
index 0d4990978b..88d651f942 100644
--- a/apps/web/test/unit-tests/settings/enums/ImageSize-test.ts
+++ b/apps/web/src/settings/enums/ImageSize.test.ts
@@ -6,7 +6,9 @@ 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 { ImageSize, suggestedSize } from "../../../../src/settings/enums/ImageSize";
+import { describe, it, expect } from "vitest";
+
+import { ImageSize, suggestedSize } from "./ImageSize";
 
 describe("ImageSize", () => {
     describe("suggestedSize", () => {
diff --git a/apps/web/src/settings/handlers/AccountSettingsHandler.test.ts b/apps/web/src/settings/handlers/AccountSettingsHandler.test.ts
new file mode 100644
index 0000000000..ae02d9d1b5
--- /dev/null
+++ b/apps/web/src/settings/handlers/AccountSettingsHandler.test.ts
@@ -0,0 +1,48 @@
+/*
+Copyright 2026 Element Creations 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.
+*/
+
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach } from "vitest";
+import { ClientEvent, MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { stubClient } from "test-utils";
+
+import AccountSettingsHandler from "./AccountSettingsHandler.ts";
+import { WatchManager } from "../WatchManager.ts";
+
+describe("AccountSettingsHandler", () => {
+    const watchManager = new WatchManager();
+    const handler = new AccountSettingsHandler(watchManager);
+
+    beforeEach(stubClient);
+
+    it("should notify watchers of recent_emoji on account data update", async () => {
+        const fn = vi.fn();
+        handler.watchers.watchSetting("recent_emoji", null, fn);
+
+        const ev = new MatrixEvent({
+            type: "io.element.recent_emoji",
+            content: {
+                recent_emoji: [["🤒", 1]],
+            },
+        });
+        vi.mocked(handler.client.getAccountData).mockImplementation((eventType) =>
+            eventType === "io.element.recent_emoji" ? ev : undefined,
+        );
+        handler.client.emit(ClientEvent.AccountData, ev);
+
+        expect(fn).toHaveBeenCalledWith(null, "account", [{ emoji: "🤒", total: 1 }]);
+    });
+
+    it("should write value to account data correctly", async () => {
+        void handler.setValue("pseudonymousAnalyticsOptIn", null, true);
+
+        expect(handler.client.setAccountData).toHaveBeenCalledWith("im.vector.analytics", {
+            pseudonymousAnalyticsOptIn: true,
+        });
+    });
+});
diff --git a/apps/web/src/settings/handlers/AccountSettingsHandler.ts b/apps/web/src/settings/handlers/AccountSettingsHandler.ts
index 29117778d6..9ea7a43c57 100644
--- a/apps/web/src/settings/handlers/AccountSettingsHandler.ts
+++ b/apps/web/src/settings/handlers/AccountSettingsHandler.ts
@@ -15,11 +15,14 @@ import { objectClone, objectKeyChanges } from "../../utils/objects";
 import { SettingLevel } from "../SettingLevel";
 import { type WatchManager } from "../WatchManager";
 import { MEDIA_PREVIEW_ACCOUNT_DATA_TYPE } from "../../@types/media_preview";
+import { type SettingKey, type Settings } from "../Settings.tsx";
+import { mergeEmojiData, type RecentEmojiData, translateLegacyEmojiData } from "../../emojipicker/recent.ts";
 
 const BREADCRUMBS_LEGACY_EVENT_TYPE = "im.vector.riot.breadcrumb_rooms";
 const BREADCRUMBS_EVENT_TYPE = "im.vector.setting.breadcrumbs";
 const BREADCRUMBS_EVENT_TYPES = [BREADCRUMBS_LEGACY_EVENT_TYPE, BREADCRUMBS_EVENT_TYPE];
-const RECENT_EMOJI_EVENT_TYPE = "io.element.recent_emoji";
+const LEGACY_RECENT_EMOJI_EVENT_TYPE = "io.element.recent_emoji";
+const RECENT_EMOJI_EVENT_TYPE = "m.recent_emoji";
 const INTEG_PROVISIONING_EVENT_TYPE = "im.vector.setting.integration_provisioning";
 const ANALYTICS_EVENT_TYPE = "im.vector.analytics";
 const DEFAULT_SETTINGS_EVENT_TYPE = "im.vector.web.settings";
@@ -65,8 +68,8 @@ export default class AccountSettingsHandler extends MatrixClientBackedSettingsHa
         } else if (event.getType() === INTEG_PROVISIONING_EVENT_TYPE) {
             const val = event.getContent()["enabled"];
             this.watchers.notifyUpdate("integrationProvisioning", null, SettingLevel.ACCOUNT, val);
-        } else if (event.getType() === RECENT_EMOJI_EVENT_TYPE) {
-            const val = event.getContent()["enabled"];
+        } else if (event.getType() === RECENT_EMOJI_EVENT_TYPE || event.getType() === LEGACY_RECENT_EMOJI_EVENT_TYPE) {
+            const val = this.getRecentEmoji();
             this.watchers.notifyUpdate("recent_emoji", null, SettingLevel.ACCOUNT, val);
         } else if (event.getType() === MEDIA_PREVIEW_ACCOUNT_DATA_TYPE) {
             this.watchers.notifyUpdate("mediaPreviewConfig", null, SettingLevel.ROOM_ACCOUNT, event.getContent());
@@ -76,30 +79,33 @@ export default class AccountSettingsHandler extends MatrixClientBackedSettingsHa
     public getValue(settingName: string, roomId: string): any {
         // Special case URL previews
         if (settingName === "urlPreviewsEnabled") {
-            const content = this.getSettings("org.matrix.preview_urls") || {};
+            const content = this.getSettings("org.matrix.preview_urls");
 
             // Check to make sure that we actually got a boolean
-            if (typeof content["disable"] !== "boolean") return null;
+            if (typeof content?.["disable"] !== "boolean") return null;
             return !content["disable"];
         }
 
         // Special case for breadcrumbs
         if (settingName === "breadcrumb_rooms") {
             let content = this.getSettings(BREADCRUMBS_EVENT_TYPE);
-            if (!content || !content["recent_rooms"]) {
-                content = this.getSettings(BREADCRUMBS_LEGACY_EVENT_TYPE);
+            if (!content?.["recent_rooms"]) {
+                const legacyContent = this.getSettings(BREADCRUMBS_LEGACY_EVENT_TYPE);
 
-                // This is a bit of a hack, but it makes things slightly easier
-                if (content) content["recent_rooms"] = content["rooms"];
+                if (legacyContent) {
+                    content = {
+                        recent_rooms: legacyContent["rooms"],
+                    };
+                }
             }
 
-            return content && content["recent_rooms"] ? content["recent_rooms"] : [];
+            return content?.["recent_rooms"] ?? [];
         }
 
         // Special case recent emoji
         if (settingName === "recent_emoji") {
-            const content = this.getSettings(RECENT_EMOJI_EVENT_TYPE);
-            return content ? content["recent_emoji"] : null;
+            const val = this.getRecentEmoji();
+            return val ?? null;
         }
 
         // Special case integration manager provisioning
@@ -109,15 +115,15 @@ export default class AccountSettingsHandler extends MatrixClientBackedSettingsHa
         }
 
         if (settingName === "pseudonymousAnalyticsOptIn") {
-            const content = this.getSettings(ANALYTICS_EVENT_TYPE) || {};
+            const content = this.getSettings(ANALYTICS_EVENT_TYPE);
             // Check to make sure that we actually got a boolean
-            if (typeof content[settingName] !== "boolean") return null;
+            if (typeof content?.[settingName] !== "boolean") return null;
             return content[settingName];
         }
 
         if (settingName === "MessageComposerInput.insertTrailingColon") {
-            const content = this.getSettings() || {};
-            const value = content[settingName];
+            const content = this.getSettings();
+            const value = content?.[settingName];
             if (value === null || value === undefined) {
                 // Write true as it is the default. This will give us the option
                 // of making this opt-in in the future, without affecting old
@@ -128,13 +134,13 @@ export default class AccountSettingsHandler extends MatrixClientBackedSettingsHa
             return value;
         }
 
-        const settings = this.getSettings() || {};
-        let preferredValue = settings[settingName];
+        const settings = this.getSettings();
+        let preferredValue = settings?.[settingName];
 
         if (preferredValue === null || preferredValue === undefined) {
             // Honour the old setting on read only
             if (settingName === "hideAvatarChanges" || settingName === "hideDisplaynameChanges") {
-                preferredValue = settings["hideAvatarDisplaynameChanges"];
+                preferredValue = settings?.["hideAvatarDisplaynameChanges"];
             }
         }
 
@@ -150,11 +156,11 @@ export default class AccountSettingsHandler extends MatrixClientBackedSettingsHa
     ): Promise<void> {
         let content = this.getSettings(eventType);
         if (legacyEventType && !content?.[field]) {
-            content = this.getSettings(legacyEventType);
+            content = this.getSettings(legacyEventType) as AccountDataEvents[K];
         }
 
         if (!content) {
-            content = {};
+            content = {} as AccountDataEvents[K];
         }
 
         content[field] = value;
@@ -175,7 +181,11 @@ export default class AccountSettingsHandler extends MatrixClientBackedSettingsHa
         await deferred.promise;
     }
 
-    public async setValue(settingName: string, roomId: string, newValue: any): Promise<void> {
+    public async setValue<S extends SettingKey>(
+        settingName: S,
+        roomId: string | null,
+        newValue: Settings[S]["default"],
+    ): Promise<void> {
         switch (settingName) {
             // Special case URL previews
             case "urlPreviewsEnabled":
@@ -186,21 +196,33 @@ export default class AccountSettingsHandler extends MatrixClientBackedSettingsHa
                 return this.setAccountData(
                     BREADCRUMBS_EVENT_TYPE,
                     "recent_rooms",
-                    newValue,
+                    <Settings["breadcrumb_rooms"]["default"]>newValue,
                     BREADCRUMBS_LEGACY_EVENT_TYPE,
                 );
 
             // Special case recent emoji
             case "recent_emoji":
-                return this.setAccountData(RECENT_EMOJI_EVENT_TYPE, "recent_emoji", newValue);
+                return this.setAccountData(
+                    RECENT_EMOJI_EVENT_TYPE,
+                    "recent_emoji",
+                    <Settings["recent_emoji"]["default"]>newValue,
+                );
 
             // Special case integration manager provisioning
             case "integrationProvisioning":
-                return this.setAccountData(INTEG_PROVISIONING_EVENT_TYPE, "enabled", newValue);
+                return this.setAccountData(
+                    INTEG_PROVISIONING_EVENT_TYPE,
+                    "enabled",
+                    <Settings["integrationProvisioning"]["default"]>newValue,
+                );
 
             // Special case analytics
             case "pseudonymousAnalyticsOptIn":
-                return this.setAccountData(ANALYTICS_EVENT_TYPE, "pseudonymousAnalyticsOptIn", newValue);
+                return this.setAccountData(
+                    ANALYTICS_EVENT_TYPE,
+                    "pseudonymousAnalyticsOptIn",
+                    <Settings["pseudonymousAnalyticsOptIn"]["default"]>newValue ?? undefined,
+                );
             case "mediaPreviewConfig":
                 // Handled in MediaPreviewConfigController.
                 return;
@@ -220,13 +242,15 @@ export default class AccountSettingsHandler extends MatrixClientBackedSettingsHa
         return this.client && !this.client.isGuest();
     }
 
-    private getSettings(eventType: keyof AccountDataEvents = "im.vector.web.settings"): any {
-        // TODO: [TS] Types on return
+    private getSettings(): AccountDataEvents["im.vector.web.settings"] | null;
+    private getSettings<E extends keyof AccountDataEvents>(eventType: E): AccountDataEvents[E] | null;
+    private getSettings<E extends keyof AccountDataEvents>(eventType?: E): AccountDataEvents[E] | null {
         if (!this.client) return null;
 
-        const event = this.client.getAccountData(eventType);
-        if (!event || !event.getContent()) return null;
-        return objectClone(event.getContent()); // clone to prevent mutation
+        const event = this.client.getAccountData(eventType ?? "im.vector.web.settings");
+        const content = event?.getContent<AccountDataEvents[E]>();
+        if (!content) return null;
+        return objectClone(content); // clone to prevent mutation
     }
 
     private notifyBreadcrumbsUpdate(event: MatrixEvent): void {
@@ -243,4 +267,15 @@ export default class AccountSettingsHandler extends MatrixClientBackedSettingsHa
         }
         this.watchers.notifyUpdate("breadcrumb_rooms", null, SettingLevel.ACCOUNT, val || []);
     }
+
+    private getRecentEmoji(): RecentEmojiData {
+        let val = this.getSettings(RECENT_EMOJI_EVENT_TYPE)?.recent_emoji || [];
+
+        const legacyVal = this.getSettings(LEGACY_RECENT_EMOJI_EVENT_TYPE)?.recent_emoji;
+        if (legacyVal) {
+            val = mergeEmojiData(val, translateLegacyEmojiData(legacyVal));
+        }
+
+        return val;
+    }
 }
diff --git a/apps/web/test/unit-tests/settings/handlers/DeviceSettingsHandler-test.ts b/apps/web/src/settings/handlers/DeviceSettingsHandler.test.ts
similarity index 83%
rename from apps/web/test/unit-tests/settings/handlers/DeviceSettingsHandler-test.ts
rename to apps/web/src/settings/handlers/DeviceSettingsHandler.test.ts
index d7580adf1c..052c9a8818 100644
--- a/apps/web/test/unit-tests/settings/handlers/DeviceSettingsHandler-test.ts
+++ b/apps/web/src/settings/handlers/DeviceSettingsHandler.test.ts
@@ -6,13 +6,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { mocked } from "jest-mock";
-import { MatrixClient } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
-import DeviceSettingsHandler from "../../../../src/settings/handlers/DeviceSettingsHandler";
-import { type CallbackFn, WatchManager } from "../../../../src/settings/WatchManager";
-import { stubClient } from "../../../test-utils/test-utils";
+import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { stubClient } from "test-utils";
+
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import DeviceSettingsHandler from "./DeviceSettingsHandler";
+import { type CallbackFn, WatchManager } from "../WatchManager";
 
 describe("DeviceSettingsHandler", () => {
     const ROOM_ID_IS_UNUSED = "";
@@ -27,7 +29,7 @@ describe("DeviceSettingsHandler", () => {
     beforeEach(() => {
         watchers = new WatchManager();
         handler = new DeviceSettingsHandler([featureKey], watchers);
-        settingListener = jest.fn();
+        settingListener = vi.fn();
     });
 
     afterEach(() => {
@@ -53,7 +55,7 @@ describe("DeviceSettingsHandler", () => {
 
         beforeEach(() => {
             client = stubClient();
-            mocked(client.isGuest).mockReturnValue(true);
+            vi.mocked(client.isGuest).mockReturnValue(true);
         });
 
         afterEach(() => {
diff --git a/apps/web/test/unit-tests/settings/handlers/RoomDeviceSettingsHandler-test.ts b/apps/web/src/settings/handlers/RoomDeviceSettingsHandler.test.ts
similarity index 84%
rename from apps/web/test/unit-tests/settings/handlers/RoomDeviceSettingsHandler-test.ts
rename to apps/web/src/settings/handlers/RoomDeviceSettingsHandler.test.ts
index 1852acaf17..84b2ebc8bd 100644
--- a/apps/web/test/unit-tests/settings/handlers/RoomDeviceSettingsHandler-test.ts
+++ b/apps/web/src/settings/handlers/RoomDeviceSettingsHandler.test.ts
@@ -6,9 +6,13 @@ 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 RoomDeviceSettingsHandler from "../../../../src/settings/handlers/RoomDeviceSettingsHandler";
-import { SettingLevel } from "../../../../src/settings/SettingLevel";
-import { type CallbackFn, WatchManager } from "../../../../src/settings/WatchManager";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
+
+import RoomDeviceSettingsHandler from "./RoomDeviceSettingsHandler";
+import { SettingLevel } from "../SettingLevel";
+import { type CallbackFn, WatchManager } from "../WatchManager";
 
 describe("RoomDeviceSettingsHandler", () => {
     const roomId = "!room:example.com";
@@ -25,7 +29,7 @@ describe("RoomDeviceSettingsHandler", () => {
     beforeEach(() => {
         watchers = new WatchManager();
         handler = new RoomDeviceSettingsHandler(watchers);
-        settingListener = jest.fn();
+        settingListener = vi.fn();
     });
 
     afterEach(() => {
diff --git a/apps/web/src/settings/watchers/FontWatcher.ts b/apps/web/src/settings/watchers/FontWatcher.ts
index 9a36d8f73e..ee6813a7a4 100644
--- a/apps/web/src/settings/watchers/FontWatcher.ts
+++ b/apps/web/src/settings/watchers/FontWatcher.ts
@@ -11,7 +11,6 @@ import SettingsStore from "../SettingsStore";
 import type IWatcher from "./Watcher";
 import { toPx } from "../../utils/units";
 import { Action } from "../../dispatcher/actions";
-import { SettingLevel } from "../SettingLevel";
 import { type UpdateSystemFontPayload } from "../../dispatcher/payloads/UpdateSystemFontPayload";
 import { type ActionPayload } from "../../dispatcher/payloads";
 
@@ -33,97 +32,6 @@ export class FontWatcher implements IWatcher {
     public async start(): Promise<void> {
         this.updateFont();
         this.dispatcherRef = dis.register(this.onAction);
-        /**
-         * baseFontSize is an account level setting which is loaded after the initial
-         * sync. Hence why we can't do that in the `constructor`
-         */
-        await this.migrateBaseFontSize();
-    }
-
-    /**
-     * Migrate the base font size from the V1 and V2 version to the V3 version
-     * @private
-     */
-    private async migrateBaseFontSize(): Promise<void> {
-        await this.migrateBaseFontV1toFontSizeDelta();
-        await this.migrateBaseFontV2toFontSizeDelta();
-    }
-
-    /**
-     * Migrating from the V1 version of the base font size to the new delta system.
-     * The delta system is using the default browser font size as a base
-     * Everything will become slightly larger, and getting rid of the `SIZE_DIFF`
-     * weirdness for locally persisted values
-     * @private
-     */
-    private async migrateBaseFontV1toFontSizeDelta(): Promise<void> {
-        const legacyBaseFontSize = SettingsStore.getValue("baseFontSize");
-        // No baseFontV1 found, nothing to migrate
-        if (!legacyBaseFontSize) return;
-
-        console.log(
-            "Migrating base font size -> base font size V2 -> font size delta for Compound, current value",
-            legacyBaseFontSize,
-        );
-
-        // Compute the V1 to V2 version before migrating to fontSizeDelta
-        const baseFontSizeV2 = this.computeBaseFontSizeV1toV2(legacyBaseFontSize);
-
-        // Compute the difference between the V2 and the fontSizeDelta
-        const delta = this.computeFontSizeDeltaFromV2BaseFontSize(baseFontSizeV2);
-
-        await SettingsStore.setValue("fontSizeDelta", null, SettingLevel.DEVICE, delta);
-        await SettingsStore.setValue("baseFontSize", null, SettingLevel.DEVICE, 0);
-        console.log("Migration complete, deleting legacy `baseFontSize`");
-    }
-
-    /**
-     * Migrating from the V2 version of the base font size to the new delta system
-     * @private
-     */
-    private async migrateBaseFontV2toFontSizeDelta(): Promise<void> {
-        const legacyBaseFontV2Size = SettingsStore.getValue("baseFontSizeV2");
-        // No baseFontV2 found, nothing to migrate
-        if (!legacyBaseFontV2Size) return;
-
-        console.log("Migrating base font size V2 for Compound, current value", legacyBaseFontV2Size);
-
-        // Compute the difference between the V2 and the fontSizeDelta
-        const delta = this.computeFontSizeDeltaFromV2BaseFontSize(legacyBaseFontV2Size);
-
-        await SettingsStore.setValue("fontSizeDelta", null, SettingLevel.DEVICE, delta);
-        await SettingsStore.setValue("baseFontSizeV2", null, SettingLevel.DEVICE, 0);
-        console.log("Migration complete, deleting legacy `baseFontSizeV2`");
-    }
-
-    /**
-     * Compute the V2 font size from the V1 font size
-     * @param legacyBaseFontSize
-     * @private
-     */
-    private computeBaseFontSizeV1toV2(legacyBaseFontSize: number): number {
-        // For some odd reason, the persisted value in user storage has an offset
-        // of 5 pixels for all values stored under `baseFontSize`
-        const LEGACY_SIZE_DIFF = 5;
-
-        // Compound uses a base font size of `16px`, whereas the old Element
-        // styles based their calculations off a `15px` root font size.
-        const ROOT_FONT_SIZE_INCREASE = 1;
-
-        // Compute the font size of the V2 version before migrating to V3
-        return legacyBaseFontSize + ROOT_FONT_SIZE_INCREASE + LEGACY_SIZE_DIFF;
-    }
-
-    /**
-     * Compute the difference between the V2 font size and the default browser font size
-     * @param legacyBaseFontV2Size
-     * @private
-     */
-    private computeFontSizeDeltaFromV2BaseFontSize(legacyBaseFontV2Size: number): number {
-        const browserDefaultFontSize = FontWatcher.getRootFontSize();
-
-        // Compute the difference between the V2 font size and the default browser font size
-        return legacyBaseFontV2Size - browserDefaultFontSize;
     }
 
     /**
@@ -157,9 +65,7 @@ export class FontWatcher implements IWatcher {
     }
 
     private onAction = (payload: ActionPayload): void => {
-        if (payload.action === Action.MigrateBaseFontSize) {
-            this.migrateBaseFontSize();
-        } else if (payload.action === Action.UpdateFontSizeDelta) {
+        if (payload.action === Action.UpdateFontSizeDelta) {
             this.setRootFontSize(payload.delta);
         } else if (payload.action === Action.UpdateSystemFont) {
             this.setSystemFont(payload as UpdateSystemFontPayload);
diff --git a/apps/web/test/unit-tests/settings/watchers/ThemeWatcher-test.tsx b/apps/web/src/settings/watchers/ThemeWatcher.test.ts
similarity index 96%
rename from apps/web/test/unit-tests/settings/watchers/ThemeWatcher-test.tsx
rename to apps/web/src/settings/watchers/ThemeWatcher.test.ts
index 325b55693c..828becbd88 100644
--- a/apps/web/test/unit-tests/settings/watchers/ThemeWatcher-test.tsx
+++ b/apps/web/src/settings/watchers/ThemeWatcher.test.ts
@@ -6,10 +6,14 @@ 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 SettingsStore from "../../../../src/settings/SettingsStore";
-import ThemeWatcher from "../../../../src/settings/watchers/ThemeWatcher";
-import { type SettingLevel } from "../../../../src/settings/SettingLevel";
-import { type SettingKey, type Settings } from "../../../../src/settings/Settings.tsx";
+// @vitest-environment happy-dom
+
+import { describe, it, expect } from "vitest";
+
+import SettingsStore from "../SettingsStore";
+import ThemeWatcher from "./ThemeWatcher";
+import { type SettingLevel } from "../SettingLevel";
+import { type SettingKey, type Settings } from "../Settings.tsx";
 
 function makeMatchMedia(values: any) {
     class FakeMediaQueryList {
diff --git a/apps/web/src/slash-commands/SlashCommands.tsx b/apps/web/src/slash-commands/SlashCommands.tsx
index d34949a4bc..ae56c9e316 100644
--- a/apps/web/src/slash-commands/SlashCommands.tsx
+++ b/apps/web/src/slash-commands/SlashCommands.tsx
@@ -44,7 +44,6 @@ import SdkConfig from "../SdkConfig";
 import SettingsStore from "../settings/SettingsStore";
 import { UIComponent, UIFeature } from "../settings/UIFeature";
 import { CHAT_EFFECTS } from "../effects";
-import LegacyCallHandler from "../LegacyCallHandler";
 import { guessAndSetDMRoom } from "../Rooms";
 import DevtoolsDialog from "../components/views/dialogs/DevtoolsDialog";
 import InfoDialog from "../components/views/dialogs/InfoDialog";
@@ -55,7 +54,7 @@ import { type ViewRoomPayload } from "../dispatcher/payloads/ViewRoomPayload";
 import { htmlSerializeFromMdIfNeeded } from "../editor/serialize";
 import { leaveRoomBehaviour } from "../utils/leave-behaviour";
 import { MatrixClientPeg } from "../MatrixClientPeg";
-import { isCurrentLocalRoom, reject, singleMxcUpload, success, successSync } from "./utils";
+import { isCurrentLocalRoom, reject, singleMxcUpload, success, successSync, splitAtFirstSpace } from "./utils";
 import { deop, op } from "./op";
 import { CommandCategories } from "./interface";
 import { Command } from "./command";
@@ -64,6 +63,7 @@ import { manuallyVerifyDevice } from "../components/views/dialogs/ManualDeviceKe
 import upgraderoom from "./upgraderoom/upgraderoom";
 import { emoticon } from "./emoticon";
 import { statusCommand } from "./status";
+import { SDKContextClass } from "../contexts/SDKContextClass.ts";
 
 export { CommandCategories, Command };
 
@@ -712,7 +712,7 @@ export const Commands = [
             return success(
                 (async (): Promise<void> => {
                     if (isPhoneNumber) {
-                        const results = await LegacyCallHandler.instance.pstnLookup(userId);
+                        const results = await SDKContextClass.instance.legacyCallHandler.pstnLookup(userId);
                         if (!results || results.length === 0 || !results[0].userid) {
                             throw new UserFriendlyError("slash_command|query_not_found_phone_number");
                         }
@@ -773,7 +773,7 @@ export const Commands = [
         category: CommandCategories.other,
         isEnabled: (cli) => !isCurrentLocalRoom(cli),
         runFn: function (cli, roomId, threadId, args) {
-            const call = LegacyCallHandler.instance.getCallForRoom(roomId);
+            const call = SDKContextClass.instance.legacyCallHandler.getCallForRoom(roomId);
             if (!call) {
                 return reject(new UserFriendlyError("slash_command|no_active_call"));
             }
@@ -788,7 +788,7 @@ export const Commands = [
         category: CommandCategories.other,
         isEnabled: (cli) => !isCurrentLocalRoom(cli),
         runFn: function (cli, roomId, threadId, args) {
-            const call = LegacyCallHandler.instance.getCallForRoom(roomId);
+            const call = SDKContextClass.instance.legacyCallHandler.getCallForRoom(roomId);
             if (!call) {
                 return reject(new UserFriendlyError("slash_command|no_active_call"));
             }
@@ -892,31 +892,11 @@ interface ICmd {
     args?: string;
 }
 
-/**
- * Split the supplied string into one or two strings separated by the first
- * region of white space we can find.
- */
-export function splitAtFirstSpace(args: string): [string, string?] {
-    const trimmedArgs = args.trim();
-    const i = trimmedArgs.search(/\s+/);
-    if (i === -1) {
-        return [trimmedArgs];
-    } else {
-        const first = trimmedArgs.slice(0, i);
-        const second = trimmedArgs.slice(i + 1).trimStart();
-        if (second === "") {
-            return [first];
-        } else {
-            return [first, second];
-        }
-    }
-}
-
 /**
  * Process the given text for /commands and returns a parsed command that can be used for running the operation.
  * @param {string} roomId The room ID where the command was issued.
  * @param {string} input The raw text input by the user.
- * @return {ICmd} The parsed command object.
+ * @returns {ICmd} The parsed command object.
  * Returns an empty object if the input didn't match a command.
  */
 export function getCommand(roomId: string, input: string): ICmd {
diff --git a/apps/web/test/slash-commands/status-test.ts b/apps/web/src/slash-commands/status.test.ts
similarity index 89%
rename from apps/web/test/slash-commands/status-test.ts
rename to apps/web/src/slash-commands/status.test.ts
index 2f81af17c6..bffcf5d2fb 100644
--- a/apps/web/test/slash-commands/status-test.ts
+++ b/apps/web/src/slash-commands/status.test.ts
@@ -5,9 +5,13 @@ 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 { stubClient } from "../test-utils";
-import { statusCommand } from "../../src/slash-commands/status";
-import { UserFriendlyError } from "../../src/languageHandler";
+// @vitest-environment happy-dom
+
+import { describe, it, expect, beforeEach } from "vitest";
+import { stubClient } from "test-utils";
+
+import { statusCommand } from "./status";
+import { UserFriendlyError } from "../i18n";
 
 describe("/status", () => {
     const roomId = "!room:example.com";
@@ -16,7 +20,6 @@ describe("/status", () => {
 
     beforeEach(() => {
         client = stubClient();
-        client.setExtendedProfileProperty = jest.fn().mockResolvedValue(undefined);
     });
 
     function run(args?: string) {
diff --git a/apps/web/src/slash-commands/status.ts b/apps/web/src/slash-commands/status.ts
index 7a1bf36d94..6eb74a6777 100644
--- a/apps/web/src/slash-commands/status.ts
+++ b/apps/web/src/slash-commands/status.ts
@@ -7,12 +7,13 @@ Please see LICENSE files in the repository root for full details.
 
 import { _td } from "@element-hq/web-shared-components";
 
-import { Command, CommandCategories, splitAtFirstSpace } from "./SlashCommands";
+import { Command } from "./command";
+import { CommandCategories } from "./interface";
 import SettingsStore from "../settings/SettingsStore";
-import { reject, success } from "./utils";
+import { reject, success, splitAtFirstSpace } from "./utils";
 import { UserFriendlyError } from "../languageHandler";
-import { userStatusTextWithinMaxLength } from "../hooks/useUserStatus";
 import { TimelineRenderingType } from "../contexts/RoomContext";
+import { setUserStatus, userStatusTextWithinMaxLength } from "../utils/userStatus";
 
 export const statusCommand = new Command({
     command: "status",
@@ -40,7 +41,7 @@ export const statusCommand = new Command({
             return reject(new UserFriendlyError("slash_command|status|too_long_text"));
         }
         return success(
-            cli.setExtendedProfileProperty("org.matrix.msc4426.status", {
+            setUserStatus(cli, {
                 emoji: emoji.segment,
                 text,
             }),
diff --git a/apps/web/src/slash-commands/utils.ts b/apps/web/src/slash-commands/utils.ts
index a96a324d5d..40ec7c2744 100644
--- a/apps/web/src/slash-commands/utils.ts
+++ b/apps/web/src/slash-commands/utils.ts
@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { EventType, type MatrixClient } from "matrix-js-sdk/src/matrix";
 
-import { SdkContextClass } from "../contexts/SDKContext";
+import { SDKContextClass } from "../contexts/SDKContextClass";
 import { isLocalRoom } from "../utils/localRoom/isLocalRoom";
 import Modal from "../Modal";
 import UploadConfirmDialog from "../components/views/dialogs/UploadConfirmDialog";
@@ -70,9 +70,29 @@ export const singleMxcUpload = async (cli: MatrixClient): Promise<string | null>
 };
 
 export const isCurrentLocalRoom = (cli: MatrixClient | null): boolean => {
-    const roomId = SdkContextClass.instance.roomViewStore.getRoomId();
+    const roomId = SDKContextClass.instance.roomViewStore.getRoomId();
     if (!roomId) return false;
     const room = cli?.getRoom(roomId);
     if (!room) return false;
     return isLocalRoom(room);
 };
+
+/**
+ * Split the supplied string into one or two strings separated by the first
+ * region of white space we can find.
+ */
+export function splitAtFirstSpace(args: string): [string, string?] {
+    const trimmedArgs = args.trim();
+    const i = trimmedArgs.search(/\s+/);
+    if (i === -1) {
+        return [trimmedArgs];
+    } else {
+        const first = trimmedArgs.slice(0, i);
+        const second = trimmedArgs.slice(i + 1).trimStart();
+        if (second === "") {
+            return [first];
+        } else {
+            return [first, second];
+        }
+    }
+}
diff --git a/apps/web/src/stores/ActiveWidgetStore.ts b/apps/web/src/stores/ActiveWidgetStore.ts
index 74497ebf99..270b18628f 100644
--- a/apps/web/src/stores/ActiveWidgetStore.ts
+++ b/apps/web/src/stores/ActiveWidgetStore.ts
@@ -5,6 +5,7 @@ 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.
 */
 
+// oxlint-disable-next-line no-restricted-imports
 import EventEmitter from "events";
 import { type MatrixEvent, RoomStateEvent, type RoomState } from "matrix-js-sdk/src/matrix";
 
diff --git a/apps/web/src/stores/AsyncStore.ts b/apps/web/src/stores/AsyncStore.ts
index 86a043f84a..dd9b059604 100644
--- a/apps/web/src/stores/AsyncStore.ts
+++ b/apps/web/src/stores/AsyncStore.ts
@@ -6,6 +6,7 @@ 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.
 */
 
+// oxlint-disable-next-line no-restricted-imports
 import { EventEmitter } from "events";
 import AwaitLock from "await-lock";
 
@@ -45,7 +46,7 @@ export abstract class AsyncStore<T extends object> extends EventEmitter {
      * @param {T} initialState The initial state for the store.
      */
     protected constructor(
-        private dispatcher: MatrixDispatcher,
+        protected dispatcher: MatrixDispatcher,
         initialState: T = <T>{},
     ) {
         super();
@@ -78,7 +79,7 @@ export abstract class AsyncStore<T extends object> extends EventEmitter {
             this.storeState = Object.freeze(Object.assign(<T>{}, this.storeState, newState));
             this.emit(UPDATE_EVENT, this);
         } finally {
-            await this.lock.release();
+            this.lock.release();
         }
     }
 
@@ -93,7 +94,7 @@ export abstract class AsyncStore<T extends object> extends EventEmitter {
             this.storeState = Object.freeze(<T>(newState || {}));
             if (!quiet) this.emit(UPDATE_EVENT, this);
         } finally {
-            await this.lock.release();
+            this.lock.release();
         }
     }
 
diff --git a/apps/web/src/stores/BreadcrumbsStore.ts b/apps/web/src/stores/BreadcrumbsStore.ts
index 041430340e..e1df06076b 100644
--- a/apps/web/src/stores/BreadcrumbsStore.ts
+++ b/apps/web/src/stores/BreadcrumbsStore.ts
@@ -6,9 +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 Room, RoomEvent, ClientEvent } from "matrix-js-sdk/src/matrix";
+import { type Room, ClientEvent } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
-import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
 
 import SettingsStore from "../settings/SettingsStore";
 import { AsyncStoreWithClient } from "./AsyncStoreWithClient";
@@ -24,7 +23,6 @@ const MAX_ROOMS = 20; // arbitrary
 const AUTOJOIN_WAIT_THRESHOLD_MS = 90000; // 90s, the time we wait for an autojoined room to show up
 
 interface IState {
-    enabled?: boolean;
     rooms?: Room[];
 }
 
@@ -41,7 +39,6 @@ export class BreadcrumbsStore extends AsyncStoreWithClient<IState> {
         super(defaultDispatcher);
 
         SettingsStore.monitorSetting("breadcrumb_rooms", null);
-        SettingsStore.monitorSetting("breadcrumbs", null);
     }
 
     public static get instance(): BreadcrumbsStore {
@@ -52,29 +49,10 @@ export class BreadcrumbsStore extends AsyncStoreWithClient<IState> {
         return this.state.rooms || [];
     }
 
-    public get visible(): boolean {
-        return !!this.state.enabled && this.meetsRoomRequirement;
-    }
-
-    /**
-     * Do we have enough rooms to justify showing the breadcrumbs?
-     * (Or is the labs feature enabled?)
-     *
-     * @returns true if there are at least 20 visible rooms.
-     */
-    public get meetsRoomRequirement(): boolean {
-        const msc3946ProcessDynamicPredecessor = SettingsStore.getValue("feature_dynamic_room_predecessors");
-        return !!this.matrixClient && this.matrixClient.getVisibleRooms(msc3946ProcessDynamicPredecessor).length >= 20;
-    }
-
     protected async onAction(payload: SettingUpdatedPayload | ViewRoomPayload | JoinRoomPayload): Promise<void> {
         if (!this.matrixClient) return;
-        if (payload.action === Action.SettingUpdated) {
-            if (payload.settingName === "breadcrumb_rooms") {
-                await this.updateRooms();
-            } else if (payload.settingName === "breadcrumbs") {
-                await this.updateState({ enabled: SettingsStore.getValue("breadcrumbs", null) });
-            }
+        if (payload.action === Action.SettingUpdated && payload.settingName === "breadcrumb_rooms") {
+            await this.updateRooms();
         } else if (payload.action === Action.ViewRoom) {
             if (payload.auto_join && payload.room_id && !this.matrixClient.getRoom(payload.room_id)) {
                 // Queue the room instead of pushing it immediately. We're probably just
@@ -94,29 +72,18 @@ export class BreadcrumbsStore extends AsyncStoreWithClient<IState> {
 
     protected async onReady(): Promise<void> {
         await this.updateRooms();
-        await this.updateState({ enabled: SettingsStore.getValue("breadcrumbs", null) });
 
         if (this.matrixClient) {
-            this.matrixClient.on(RoomEvent.MyMembership, this.onMyMembership);
             this.matrixClient.on(ClientEvent.Room, this.onRoom);
         }
     }
 
     protected async onNotReady(): Promise<void> {
         if (this.matrixClient) {
-            this.matrixClient.removeListener(RoomEvent.MyMembership, this.onMyMembership);
             this.matrixClient.removeListener(ClientEvent.Room, this.onRoom);
         }
     }
 
-    private onMyMembership = async (room: Room): Promise<void> => {
-        // Only turn on breadcrumbs is the user hasn't explicitly turned it off again.
-        const settingValueRaw = SettingsStore.getValue("breadcrumbs", null, /*excludeDefault=*/ true);
-        if (this.meetsRoomRequirement && isNullOrUndefined(settingValueRaw)) {
-            await SettingsStore.setValue("breadcrumbs", null, SettingLevel.ACCOUNT, true);
-        }
-    };
-
     private onRoom = async (room: Room): Promise<void> => {
         const waitingRoom = this.waitingRooms.find((r) => r.roomId === room.roomId);
         if (!waitingRoom) return;
diff --git a/apps/web/src/stores/CallStore.ts b/apps/web/src/stores/CallStore.ts
index d025b0a014..d5ce82665e 100644
--- a/apps/web/src/stores/CallStore.ts
+++ b/apps/web/src/stores/CallStore.ts
@@ -16,12 +16,16 @@ import { AsyncStoreWithClient } from "./AsyncStoreWithClient";
 import WidgetStore from "./WidgetStore";
 import SettingsStore from "../settings/SettingsStore";
 import { SettingLevel } from "../settings/SettingLevel";
+import SdkConfig from "../SdkConfig";
 import { Call, CallEvent, ConnectionState } from "../models/Call";
 
 export enum CallStoreEvent {
     // Signals a change in the call associated with a given room
     Call = "call",
     // Signals a change in the active calls
+    // Parameters:
+    // - Set<Call> The set of calls the user is currently connected to
+    // - Set<Call> The set of calls the user was connected to before this event
     ConnectedCalls = "connected_calls",
     // Signals a change in the configured RTC transports.
     TransportsUpdated = "transports_updated",
@@ -62,16 +66,22 @@ export class CallStore extends AsyncStoreWithClient<EmptyObject> {
             transports.forEach((t) => this.configuredMatrixRTCTransports.add(t));
         } catch (ex) {
             // Expected, MSC not implemented.
-            if (ex instanceof MatrixError === false || ex.errcode !== "M_NOT_FOUND") {
+            //
+            // Homeservers will return a 404 M_UNRECOGNIZED matrix error if they
+            // don't implement a requested endpoint.
+            if (ex instanceof MatrixError === false || ex.errcode !== "M_UNRECOGNIZED") {
                 logger.warn("Unexpected error when trying to fetch RTC transports", ex);
             }
         }
         // See https://github.com/matrix-org/matrix-spec-proposals/blob/d61969a9a3696b6c54d7987b1643b5bc03670927/proposals/4143-matrix-rtc.md#discovery-of-foci-using-well-knownmatrixclient
         // This well-known option has since been removed from the spec but is still widely deployed.
-        await this.matrixClient.waitForClientWellKnown();
-        const foci = this.matrixClient.getClientWellKnown()?.["org.matrix.msc4143.rtc_foci"];
-        if (Array.isArray(foci)) {
-            foci.forEach((foci) => this.configuredMatrixRTCTransports.add(foci));
+        // Reading it can be disabled via config; the modern endpoint above is unaffected.
+        if (SdkConfig.get("enable_client_well_known_lookups")) {
+            await this.matrixClient.waitForClientWellKnown();
+            const foci = this.matrixClient.getClientWellKnown()?.["org.matrix.msc4143.rtc_foci"];
+            if (Array.isArray(foci)) {
+                foci.forEach((foci) => this.configuredMatrixRTCTransports.add(foci));
+            }
         }
         this.emit(CallStoreEvent.TransportsUpdated);
     }
@@ -129,8 +139,9 @@ export class CallStore extends AsyncStoreWithClient<EmptyObject> {
         return this._connectedCalls;
     }
     private set connectedCalls(value: Set<Call>) {
+        const prevValue = this._connectedCalls;
         this._connectedCalls = value;
-        this.emit(CallStoreEvent.ConnectedCalls, value);
+        this.emit(CallStoreEvent.ConnectedCalls, value, prevValue);
 
         // The room IDs are persisted to settings so we can detect unclean disconnects
         SettingsStore.setValue(
@@ -207,6 +218,14 @@ export class CallStore extends AsyncStoreWithClient<EmptyObject> {
         return call !== null && this.connectedCalls.has(call) ? call : null;
     }
 
+    /**
+     * Get all the ongoing calls
+     * @returns Map from room-id to the ongoing call in that room
+     */
+    public getAllCalls(): Map<string, Call> {
+        return this.calls;
+    }
+
     private onWidgets = (roomId: string | null): void => {
         if (!this.matrixClient) return;
         if (roomId === null) {
diff --git a/apps/web/src/stores/InitialCryptoSetupStore.ts b/apps/web/src/stores/InitialCryptoSetupStore.ts
index 226d3f4b2a..ee646fb53a 100644
--- a/apps/web/src/stores/InitialCryptoSetupStore.ts
+++ b/apps/web/src/stores/InitialCryptoSetupStore.ts
@@ -5,6 +5,7 @@ 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.
 */
 
+// oxlint-disable-next-line no-restricted-imports
 import EventEmitter from "events";
 import { type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
diff --git a/apps/web/src/stores/LatestRtcNotificationEventStore.test.ts b/apps/web/src/stores/LatestRtcNotificationEventStore.test.ts
new file mode 100644
index 0000000000..a5c9c7d087
--- /dev/null
+++ b/apps/web/src/stores/LatestRtcNotificationEventStore.test.ts
@@ -0,0 +1,167 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+// @vitest-environment happy-dom
+
+import { describe, it, expect, vi } from "vitest";
+import { type EventTimeline, EventType, RoomEvent } from "matrix-js-sdk/src/matrix";
+import { EventEmitter } from "node:events";
+
+import { mkEvent, mkRoom, mkRoomMember, stubClient } from "../../test/test-utils";
+import { CallStoreEvent, type CallStore } from "./CallStore";
+import { LatestRtcNotificationEventStore } from "./LatestRtcNotificationEventStore";
+import { type ElementCall, type Call } from "../models/Call";
+
+describe("LatestRtcNotificationEventStore", () => {
+    it("should populate map from timeline on start", () => {
+        const cli = stubClient();
+
+        const event1 = mkEvent({
+            type: EventType.RTCNotification,
+            user: "@alice:m.org",
+            content: {},
+            event: true,
+            id: "event-1",
+        });
+        const room1 = mkRoom(cli, "!my-room1:m.org");
+        vi.spyOn(room1, "getLiveTimeline").mockImplementation(() => {
+            return {
+                getEvents: () => {
+                    return [event1];
+                },
+            } as unknown as EventTimeline;
+        });
+
+        const event2 = mkEvent({
+            type: EventType.RTCNotification,
+            user: "@bob:m.org",
+            content: {},
+            event: true,
+            id: "event-2",
+        });
+        const room2 = mkRoom(cli, "!my-room2:m.org");
+        vi.spyOn(room2, "getLiveTimeline").mockImplementation(() => {
+            return {
+                getEvents: () => {
+                    return [event2];
+                },
+            } as unknown as EventTimeline;
+        });
+
+        vi.spyOn(cli, "getRoom").mockImplementation((roomId) => (roomId === "!my-room1:m.org" ? room1 : room2));
+
+        const callStore = new EventEmitter() as unknown as CallStore;
+        callStore.getAllCalls = () => {
+            return new Map([
+                ["!my-room1:m.org", undefined],
+                ["!my-room2:m.org", undefined],
+            ]) as unknown as Map<string, Call>;
+        };
+
+        const store = new LatestRtcNotificationEventStore(callStore);
+        vi.spyOn(store, "matrixClient", "get").mockReturnValue(cli);
+        store.start();
+        vi.waitFor(() => {
+            expect(store.getLatestEventId("!my-room1:m.org")).toStrictEqual("event-1");
+            expect(store.getLatestEventId("!my-room2:m.org")).toStrictEqual("event-2");
+        });
+    });
+
+    it("should wait for rtc notification event when a call begins", () => {
+        const cli = stubClient();
+
+        // This is the last notification event in the timeline
+        const oldNotificationEvent = mkEvent({
+            type: EventType.RTCNotification,
+            user: "@alice:m.org",
+            content: {
+                "m.relates_to": {
+                    event_id: "$GOr0aimJwcQcPV4F20IEhBCpandNPMEfhWYfpcK3VeE",
+                    rel_type: "m.reference",
+                },
+            },
+            event: true,
+            id: "event-1",
+        });
+
+        // This is the notification event corresponding to the ongoing call which hasn't come in yet
+        const newNotificationEvent = mkEvent({
+            type: EventType.RTCNotification,
+            user: "@alice:m.org",
+            content: {
+                "m.relates_to": {
+                    event_id: "call-membership-1",
+                    rel_type: "m.reference",
+                },
+            },
+            event: true,
+            id: "event-2",
+        });
+
+        // The call membership event associated with newNotificationEvent
+        const callMembershipEvent = mkEvent({
+            type: EventType.GroupCallMemberPrefix,
+            user: "@alice:m.org",
+            content: {},
+            event: true,
+            id: "call-membership-1",
+        });
+
+        // The room where this call takes place
+        const room = mkRoom(cli, "!my-room1:m.org");
+        vi.spyOn(cli, "getRoom").mockImplementation(() => room);
+
+        // The current timeline in that room
+        const timeline = [oldNotificationEvent];
+        vi.spyOn(room, "getLiveTimeline").mockImplementation(() => {
+            return {
+                getEvents: () => {
+                    return timeline;
+                },
+            } as unknown as EventTimeline;
+        });
+
+        const call = new EventEmitter();
+        // @ts-ignore
+        call.participants = new Map([[mkRoomMember("!my-room1:m.org", "@alice:m.org"), new Set()]]);
+        // @ts-ignore
+        call.session = {
+            getOldestMembership: () => {
+                return {
+                    eventId: callMembershipEvent.getId(),
+                };
+            },
+        };
+
+        const callStore = new EventEmitter() as unknown as CallStore;
+        callStore.getAllCalls = () => {
+            return new Map([]) as unknown as Map<string, Call>;
+        };
+        callStore.getCall = () => call as unknown as ElementCall;
+
+        const store = new LatestRtcNotificationEventStore(callStore);
+        vi.spyOn(store, "matrixClient", "get").mockReturnValue(cli);
+        store.start();
+
+        // No calls in the room yet
+        expect(store.getLatestEventId("!my-room1:m.org")).toBeUndefined();
+
+        // Let's say a new call starts
+        callStore.emit(CallStoreEvent.Call, call, room);
+
+        // The correct notification event hasn't come in yet, so still undefined.
+        expect(store.getLatestEventId("!my-room1:m.org")).toBeUndefined();
+
+        // Notification event comes in
+        room.emit(RoomEvent.Timeline, newNotificationEvent);
+
+        // Should update the event id in store
+        vi.waitFor(() => {
+            expect(store.getLatestEventId("!my-room1:m.org")).toStrictEqual("event-2");
+        });
+    });
+});
diff --git a/apps/web/src/stores/LatestRtcNotificationEventStore.ts b/apps/web/src/stores/LatestRtcNotificationEventStore.ts
new file mode 100644
index 0000000000..d309a86b73
--- /dev/null
+++ b/apps/web/src/stores/LatestRtcNotificationEventStore.ts
@@ -0,0 +1,176 @@
+/*
+ * Copyright 2026 Element Creations 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 EmptyObject, EventType, type MatrixEvent, type Room, RoomEvent } from "matrix-js-sdk/src/matrix";
+
+import { AsyncStoreWithClient } from "./AsyncStoreWithClient";
+import defaultDispatcher from "../dispatcher/dispatcher";
+import { type CallStore, CallStoreEvent } from "./CallStore";
+import { CallEvent, type ElementCall } from "../models/Call";
+
+/**
+ * The event that {@link LatestRtcNotificationEventStore} emits when the latest event id changes.
+ */
+export const LatestRtcNotificationEventUpdate = "rtc_notification_updated";
+
+/**
+ * This store tracks the event-id of the {@link EventType.RTCNotification} event that
+ * is related to an ongoing call.
+ * This is required because the rtc notification arrives after the call has started.
+ * Without this logic, we wouldn't know whether the last rtc notification tile in the
+ * timeline is related to an ongoing call or if it is related to some other rtc notification
+ * event that is yet to come through sync.
+ */
+export class LatestRtcNotificationEventStore extends AsyncStoreWithClient<EmptyObject> {
+    private eventIdMap = new Map<string, string>();
+
+    public constructor(private readonly callStore: CallStore) {
+        super(defaultDispatcher);
+    }
+
+    /**
+     * Get the event id of the latest rtc notification event corresponding to an ongoing call.
+     * @param roomId The id of the room where the call is taking place
+     * @returns event id or undefined
+     */
+    public getLatestEventId(roomId: string): string | undefined {
+        return this.eventIdMap.get(roomId);
+    }
+
+    private async populateMap(): Promise<void> {
+        if (!this.matrixClient) return;
+
+        // 1. Get all the calls
+        const callMap = this.callStore.getAllCalls();
+        // 2. Add the calls to our map
+        for (const roomId of callMap.keys()) {
+            const room = this.getRoom(roomId);
+            const eventId = (await getLastRtcNotificationEvent(room))?.getId();
+            if (eventId) {
+                this.eventIdMap.set(roomId, eventId);
+                // 3. Emit event so that the call tile can re-render
+                this.emit(LatestRtcNotificationEventUpdate, roomId, eventId);
+            }
+        }
+    }
+
+    private getRoom(roomId: string): Room {
+        if (!this.matrixClient) {
+            throw new Error("LatestRtcNotificationEventStore: this.matrixClient is undefined.");
+        }
+
+        const room = this.matrixClient.getRoom(roomId);
+        if (!room) throw new Error(`No room associated with room-id ${roomId}`);
+        return room;
+    }
+
+    protected async onReady(): Promise<void> {
+        this.callStore.on(CallStoreEvent.Call, this.onCallStoreEvent);
+        this.populateMap();
+    }
+
+    protected async onNotReady(): Promise<void> {
+        this.callStore.off(CallStoreEvent.Call, this.onCallStoreEvent);
+        this.eventIdMap.clear();
+    }
+
+    protected async onAction(): Promise<void> {
+        // nothing to do
+    }
+
+    private onCallStoreEvent = async (_: unknown, roomId: string): Promise<void> => {
+        if (!this.matrixClient) return;
+        const call = this.callStore.getCall(roomId) as ElementCall;
+        if (!call) {
+            // If there's no longer a call in this room, remove entry from map
+            this.eventIdMap.delete(roomId);
+        } else if (call && !this.eventIdMap.has(roomId)) {
+            // If there's a call, find the event id and add it to the map.
+            if (call.participants.size) {
+                this.findAndSetNotificationEvent(call, roomId);
+            } else {
+                // This call just started but the participants haven't been added yet.
+                // So wait until participants are added and then compute the event id.
+                call.once(CallEvent.Participants, () => {
+                    this.findAndSetNotificationEvent(call, roomId);
+                });
+            }
+        }
+    };
+
+    private async findAndSetNotificationEvent(call: ElementCall, roomId: string): Promise<void> {
+        const room = this.getRoom(roomId);
+        // Since we're running this logic as the call just started, this membership
+        // event corresponds to the person who started the call.
+        // The rtc notification event corresponding to this ongoing call will have
+        // a reference relation to this membership event.
+        const callMembershipEventId = call.session.getOldestMembership()?.eventId;
+
+        if (callMembershipEventId) {
+            const eventId = await getNotificationEventId(room, callMembershipEventId);
+            this.eventIdMap.set(roomId, eventId);
+            this.emit(LatestRtcNotificationEventUpdate, roomId, eventId);
+        }
+    }
+}
+
+/**
+ * Returns the first rtc notification event from the end of the timeline
+ */
+async function getLastRtcNotificationEvent(room: Room): Promise<MatrixEvent | undefined> {
+    const events = room.getLiveTimeline().getEvents();
+    for (let i = events.length - 1; i >= 0; i--) {
+        const event = events[i];
+        // Wait for decryption if necessary
+        await event.getDecryptionPromise();
+        if (event.getType() === EventType.RTCNotification) {
+            return event;
+        }
+    }
+}
+
+/**
+ * Get the event id of the rtc notification event that has a relation to a given call membership event.
+ * @param room The room in which this call is taking place
+ * @param callMemberEventId The event id of the call membership event
+ * @returns A promise that resolves to the event-id of the notification event.
+ */
+async function getNotificationEventId(room: Room, callMemberEventId: string): Promise<string> {
+    // We might already have the notification event in the timeline, so check that first.
+    const event = await getLastRtcNotificationEvent(room);
+    const relatedEventId = event?.getRelation()?.event_id;
+    const eventId = event?.getId();
+    if (relatedEventId === callMemberEventId && eventId) return eventId;
+
+    const { promise, resolve, reject } = Promise.withResolvers<string>();
+
+    // This callback will run with new events that are added to the timeline.
+    // We'll run some logic in the callback to see if we're receiving any
+    // new notification event that corresponds to the call membership event.
+    const onNewEvent = async (event: MatrixEvent): Promise<void> => {
+        // Wait for decryption if necessary
+        await event.getDecryptionPromise();
+
+        const type = event.getType();
+        const relatedEventId = event.getRelation()?.event_id;
+        const eventId = event.getId();
+
+        if (type === EventType.RTCNotification && relatedEventId === callMemberEventId && eventId) {
+            // Remove event listener
+            room.off(RoomEvent.Timeline, onNewEvent);
+            resolve(eventId);
+        }
+    };
+    room.on(RoomEvent.Timeline, onNewEvent);
+
+    // We won't wait for more than ten seconds for the notification event to come through.
+    setTimeout(() => {
+        reject(new Error("Timeout waiting for rtc notification event"));
+    }, 10000);
+
+    return await promise;
+}
diff --git a/apps/web/src/stores/LifecycleStore.ts b/apps/web/src/stores/LifecycleStore.ts
index 1afc105f19..52334a71ce 100644
--- a/apps/web/src/stores/LifecycleStore.ts
+++ b/apps/web/src/stores/LifecycleStore.ts
@@ -123,4 +123,4 @@ let singletonLifecycleStore: LifecycleStore | null = null;
 if (!singletonLifecycleStore) {
     singletonLifecycleStore = new LifecycleStore();
 }
-export default singletonLifecycleStore!;
+export default singletonLifecycleStore;
diff --git a/apps/web/src/stores/MemberListStore.ts b/apps/web/src/stores/MemberListStore.ts
index 29269bac94..654622edec 100644
--- a/apps/web/src/stores/MemberListStore.ts
+++ b/apps/web/src/stores/MemberListStore.ts
@@ -10,7 +10,7 @@ import { type Room, type RoomMember } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 
 import SettingsStore from "../settings/SettingsStore";
-import { type SdkContextClass } from "../contexts/SDKContext";
+import { type SDKContextClass } from "../contexts/SDKContextClass";
 import SdkConfig from "../SdkConfig";
 
 // Regex applied to filter our punctuation in member names before applying sort, to fuzzy it a little
@@ -28,7 +28,7 @@ export class MemberListStore {
 
     private collator?: Intl.Collator;
 
-    public constructor(private readonly stores: SdkContextClass) {}
+    public constructor(private readonly stores: SDKContextClass) {}
 
     /**
      * Load the member list. Call this whenever the list may have changed.
@@ -145,7 +145,7 @@ export class MemberListStore {
             return true;
         }
         const enablePresenceByHsUrl = SdkConfig.get("enable_presence_by_hs_url");
-        return enablePresenceByHsUrl?.[this.stores.client!.baseUrl] ?? true;
+        return enablePresenceByHsUrl?.[this.stores.client.baseUrl] ?? true;
     }
 
     /**
diff --git a/apps/web/src/stores/ModalWidgetStore.ts b/apps/web/src/stores/ModalWidgetStore.ts
index 76db49e5dc..a1c5a5aa06 100644
--- a/apps/web/src/stores/ModalWidgetStore.ts
+++ b/apps/web/src/stores/ModalWidgetStore.ts
@@ -66,7 +66,7 @@ export class ModalWidgetStore extends AsyncStoreWithClient<IState> {
             /* priority = */ false,
             /* static = */ true,
         );
-        this.modalInstance!.finished.then(([success, data]) => {
+        this.modalInstance.finished.then(([success, data]) => {
             this.closeModalWidget(sourceWidget, widgetRoomId, success && data ? data : { "m.exited": true });
 
             this.openSourceWidgetId = null;
diff --git a/apps/web/src/stores/MultiRoomViewStore.ts b/apps/web/src/stores/MultiRoomViewStore.ts
index bc2f090e6f..201458933b 100644
--- a/apps/web/src/stores/MultiRoomViewStore.ts
+++ b/apps/web/src/stores/MultiRoomViewStore.ts
@@ -9,7 +9,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 
 import { RoomViewStore } from "./RoomViewStore";
 import { type MatrixDispatcher } from "../dispatcher/dispatcher";
-import { type SdkContextClass } from "../contexts/SDKContext";
+import { type SDKContextClass } from "../contexts/SDKContextClass";
 import { Action } from "../dispatcher/actions";
 
 /**
@@ -24,7 +24,7 @@ export class MultiRoomViewStore {
 
     public constructor(
         private dispatcher: MatrixDispatcher,
-        private sdkContextClass: SdkContextClass,
+        private sdkContextClass: SDKContextClass,
     ) {}
 
     /**
diff --git a/apps/web/src/stores/NonUrgentToastStore.ts b/apps/web/src/stores/NonUrgentToastStore.ts
index 3912fb5788..a1f514a512 100644
--- a/apps/web/src/stores/NonUrgentToastStore.ts
+++ b/apps/web/src/stores/NonUrgentToastStore.ts
@@ -6,6 +6,7 @@ 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.
 */
 
+// oxlint-disable-next-line no-restricted-imports
 import EventEmitter from "events";
 
 import { type ComponentClass } from "../@types/common";
diff --git a/apps/web/src/stores/OwnBeaconStore.ts b/apps/web/src/stores/OwnBeaconStore.ts
index 4b6f0ddc11..5ce458a492 100644
--- a/apps/web/src/stores/OwnBeaconStore.ts
+++ b/apps/web/src/stores/OwnBeaconStore.ts
@@ -426,7 +426,6 @@ export class OwnBeaconStore extends AsyncStoreWithClient<OwnBeaconStoreState> {
         const existingLiveBeaconIdsForRoom = this.getLiveBeaconIds(roomId);
         await Promise.all(existingLiveBeaconIdsForRoom.map((beaconId) => this.stopBeacon(beaconId)));
 
-        // eslint-disable-next-line camelcase
         const { event_id } = await doMaybeLocalRoomAction(
             roomId,
             (actualRoomId: string) => this.matrixClient!.unstable_createLiveBeacon(actualRoomId, beaconInfoContent),
@@ -513,6 +512,7 @@ export class OwnBeaconStore extends AsyncStoreWithClient<OwnBeaconStoreState> {
 
         this.stopPollingLocation();
         // kill live beacons when location permissions are revoked
+        // oxlint-disable-next-line promise/no-promise-in-callback
         await Promise.all(this.liveBeaconIds.map(this.stopBeacon));
     };
 
@@ -579,7 +579,9 @@ export class OwnBeaconStore extends AsyncStoreWithClient<OwnBeaconStoreState> {
         this.lastPublishedPositionTimestamp = Date.now();
         await Promise.all(
             this.healthyLiveBeaconIds.map((beaconId) =>
-                this.beacons.has(beaconId) ? this.sendLocationToBeacon(this.beacons.get(beaconId)!, position) : null,
+                this.beacons.has(beaconId)
+                    ? this.sendLocationToBeacon(this.beacons.get(beaconId)!, position)
+                    : Promise.resolve(),
             ),
         );
     };
diff --git a/apps/web/src/stores/OwnProfileStore.ts b/apps/web/src/stores/OwnProfileStore.ts
index b2d35a390f..3b1647ab8a 100644
--- a/apps/web/src/stores/OwnProfileStore.ts
+++ b/apps/web/src/stores/OwnProfileStore.ts
@@ -13,8 +13,10 @@ import {
     type User,
     UserEvent,
     EventType,
+    ClientEvent,
 } from "matrix-js-sdk/src/matrix";
 import { throttle } from "lodash";
+import { type UserStatus } from "@element-hq/web-shared-components";
 
 import { type ActionPayload } from "../dispatcher/payloads";
 import { AsyncStoreWithClient } from "./AsyncStoreWithClient";
@@ -22,11 +24,14 @@ import defaultDispatcher from "../dispatcher/dispatcher";
 import { MatrixClientPeg } from "../MatrixClientPeg";
 import { _t } from "../languageHandler";
 import { mediaFromMxc } from "../customisations/Media";
+import SettingsStore from "../settings/SettingsStore";
+import { fetchUserStatus } from "../utils/userStatus";
 
 interface IState {
     displayName?: string;
     avatarUrl?: string;
     fetchedAt?: number;
+    userStatus?: UserStatus;
 }
 
 const KEY_DISPLAY_NAME = "mx_profile_displayname";
@@ -81,6 +86,10 @@ export class OwnProfileStore extends AsyncStoreWithClient<IState> {
         return this.state.avatarUrl || null;
     }
 
+    public get userStatus(): UserStatus | undefined {
+        return this.state.userStatus;
+    }
+
     /**
      * Gets the user's avatar as an HTTP URL of the given size. If the user's
      * avatar is not present, this returns null.
@@ -105,6 +114,9 @@ export class OwnProfileStore extends AsyncStoreWithClient<IState> {
             this.monitoredUser.removeListener(UserEvent.AvatarUrl, this.onProfileUpdate);
         }
         this.matrixClient?.removeListener(RoomStateEvent.Events, this.onStateEvents);
+        if (SettingsStore.getValue("feature_user_status")) {
+            this.matrixClient?.removeListener(ClientEvent.UserProfileUpdate, this.onExtendedProfileUpdate);
+        }
         await this.reset({});
     }
 
@@ -117,11 +129,16 @@ export class OwnProfileStore extends AsyncStoreWithClient<IState> {
             this.monitoredUser.on(UserEvent.AvatarUrl, this.onProfileUpdate);
         }
 
+        if (SettingsStore.getValue("feature_user_status")) {
+            this.matrixClient.on(ClientEvent.UserProfileUpdate, this.onExtendedProfileUpdate);
+        }
+
         // We also have to listen for membership events for ourselves as the above User events
         // are fired only with presence, which matrix.org (and many others) has disabled.
         this.matrixClient.on(RoomStateEvent.Events, this.onStateEvents);
 
         await this.onProfileUpdate(); // trigger an initial update
+        await this.refreshUserStatus(); // trigger an update for the user status
     }
 
     protected async onAction(payload: ActionPayload): Promise<void> {
@@ -175,6 +192,20 @@ export class OwnProfileStore extends AsyncStoreWithClient<IState> {
         { trailing: true, leading: true },
     );
 
+    private onExtendedProfileUpdate = async (syncedUserId: string): Promise<void> => {
+        if (syncedUserId === this.matrixClient?.getSafeUserId()) {
+            await this.refreshUserStatus();
+        }
+    };
+
+    private refreshUserStatus = async (): Promise<void> => {
+        if (!this.matrixClient) return;
+        if (!SettingsStore.getValue("feature_user_status")) return;
+
+        const userStatus = await fetchUserStatus(this.matrixClient, this.matrixClient.getSafeUserId());
+        await this.updateState({ userStatus });
+    };
+
     private onStateEvents = async (ev: MatrixEvent): Promise<void> => {
         const myUserId = MatrixClientPeg.safeGet().getUserId();
         if (ev.getType() === EventType.RoomMember && ev.getSender() === myUserId && ev.getStateKey() === myUserId) {
diff --git a/apps/web/src/stores/ReadyWatchingStore.ts b/apps/web/src/stores/ReadyWatchingStore.ts
index 1c7b92ade7..e2366c34e8 100644
--- a/apps/web/src/stores/ReadyWatchingStore.ts
+++ b/apps/web/src/stores/ReadyWatchingStore.ts
@@ -7,6 +7,7 @@
  */
 
 import { type MatrixClient, SyncState } from "matrix-js-sdk/src/matrix";
+// oxlint-disable-next-line no-restricted-imports
 import { EventEmitter } from "events";
 
 import { MatrixClientPeg } from "../MatrixClientPeg";
diff --git a/apps/web/src/stores/ReleaseAnnouncementStore.ts b/apps/web/src/stores/ReleaseAnnouncementStore.ts
index 7d37cf2853..4bb77174b0 100644
--- a/apps/web/src/stores/ReleaseAnnouncementStore.ts
+++ b/apps/web/src/stores/ReleaseAnnouncementStore.ts
@@ -19,7 +19,7 @@ import ToastStore from "./ToastStore";
  * We include a `_test_dummy` value to enable tests to function even where there are no running release announcements.
  * This value must be at the end of the list.
  */
-const FEATURES = ["_test_dummy1", "_test_dummy2"] as const;
+const FEATURES = ["room_list_section", "_test_dummy1", "_test_dummy2"] as const;
 /**
  * All the features that can be shown in the release announcements.
  */
diff --git a/apps/web/src/stores/RoomScrollStateStore.ts b/apps/web/src/stores/RoomScrollStateStore.ts
index b072200e02..b38d102bef 100644
--- a/apps/web/src/stores/RoomScrollStateStore.ts
+++ b/apps/web/src/stores/RoomScrollStateStore.ts
@@ -45,4 +45,5 @@ export class RoomScrollStateStore {
 if (window.mxRoomScrollStateStore === undefined) {
     window.mxRoomScrollStateStore = new RoomScrollStateStore();
 }
+// oxlint-disable-next-line typescript/no-unnecessary-type-assertion
 export default window.mxRoomScrollStateStore!;
diff --git a/apps/web/src/stores/RoomViewStore.tsx b/apps/web/src/stores/RoomViewStore.tsx
index f875d2f26d..5604fb3936 100644
--- a/apps/web/src/stores/RoomViewStore.tsx
+++ b/apps/web/src/stores/RoomViewStore.tsx
@@ -15,6 +15,7 @@ import { KnownMembership } from "matrix-js-sdk/src/types";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type ViewRoom as ViewRoomEvent } from "@matrix-org/analytics-events/types/typescript/ViewRoom";
 import { type JoinedRoom as JoinedRoomEvent } from "@matrix-org/analytics-events/types/typescript/JoinedRoom";
+// oxlint-disable-next-line no-restricted-imports
 import EventEmitter from "events";
 import {
     RoomViewLifecycle,
@@ -41,7 +42,7 @@ import { type ActiveRoomChangedPayload } from "../dispatcher/payloads/ActiveRoom
 import SettingsStore from "../settings/SettingsStore";
 import { awaitRoomDownSync } from "../utils/RoomUpgrade";
 import { UPDATE_EVENT } from "./AsyncStore";
-import { type SdkContextClass } from "../contexts/SDKContext";
+import { type SDKContextClass } from "../contexts/SDKContextClass";
 import { CallStore } from "./CallStore";
 import { type ThreadPayload } from "../dispatcher/payloads/ThreadPayload";
 import { type ActionPayload } from "../dispatcher/payloads";
@@ -52,6 +53,7 @@ import { setMarkedUnreadState } from "../utils/notifications";
 import { ConnectionState, ElementCall } from "../models/Call";
 import { isVideoRoom } from "../utils/video-rooms";
 import { ModuleApi } from "../modules/Api";
+import ActiveWidgetStore from "./ActiveWidgetStore";
 
 const NUM_JOIN_RETRY = 5;
 
@@ -147,12 +149,13 @@ export class RoomViewStore extends EventEmitter {
     // another RVS via INITIAL_STATE as they share the same underlying object. Mostly relevant for tests.
     private state = utils.deepCopy(INITIAL_STATE);
 
-    private dis?: MatrixDispatcher;
+    // this is defacto always assigned as `resetDispatcher` is called in the constructor.
+    private dis!: MatrixDispatcher;
     private dispatchToken?: string;
 
     public constructor(
         dis: MatrixDispatcher,
-        private readonly stores: SdkContextClass,
+        private readonly stores: SDKContextClass,
         private readonly lockedToRoomId?: string,
     ) {
         super();
@@ -194,7 +197,7 @@ export class RoomViewStore extends EventEmitter {
 
             // Fired so we can reduce dependency on event emitters to this store, which is relatively
             // central to the application and can easily cause import cycles.
-            this.dis?.dispatch<ActiveRoomChangedPayload>({
+            this.dis.dispatch<ActiveRoomChangedPayload>({
                 action: Action.ActiveRoomChanged,
                 oldRoomId: lastRoomId,
                 newRoomId: this.state.roomId,
@@ -208,7 +211,7 @@ export class RoomViewStore extends EventEmitter {
         if (this.lockedToRoomId && payload.room_id && this.lockedToRoomId !== payload.room_id) {
             return;
         }
-        // eslint-disable-line @typescript-eslint/naming-convention
+
         switch (payload.action) {
             // view_room:
             //      - room_alias:   '#somealias:matrix.org'
@@ -301,7 +304,7 @@ export class RoomViewStore extends EventEmitter {
                         // if the room is displayed in a module, we don't want to change the room view
                         if (roomId && this.isRoomDisplayedInModule(roomId)) return;
 
-                        this.dis?.dispatch<ViewRoomPayload>({
+                        this.dis.dispatch<ViewRoomPayload>({
                             action: Action.ViewRoom,
                             room_id: payload.event.getRoomId(),
                             replyingToEvent: payload.event,
@@ -377,6 +380,12 @@ export class RoomViewStore extends EventEmitter {
                     ElementCall.create(room);
                     call = CallStore.instance.getCall(payload.room_id)!;
                 }
+
+                // Custom case where we start voice calls in pip
+                if (payload.voiceOnly ?? false) {
+                    viewingCall = false;
+                    ActiveWidgetStore.instance.setWidgetPersistence(call.widget.id, room.roomId, true);
+                }
                 call.presented = true;
                 // Immediately start the call. This will connect to all required widget events
                 // and allow the widget to show the lobby.
@@ -401,14 +410,14 @@ export class RoomViewStore extends EventEmitter {
                     roomLoadError: null,
                     viaServers: payload.via_servers,
                     wasContextSwitch: payload.context_switch,
-                    viewingCall: payload.view_call ?? false,
+                    viewingCall,
                 });
                 // set this room as the room subscription. We need to await for it as this will fetch
                 // all room state for this room, which is required before we get the state below.
                 await this.stores.slidingSyncManager.setRoomVisible(payload.room_id);
 
                 // Re-fire the payload: we won't re-process it because the prev room ID == payload room ID now
-                this.dis?.dispatch({
+                this.dis.dispatch({
                     ...payload,
                 });
                 return;
@@ -459,7 +468,7 @@ export class RoomViewStore extends EventEmitter {
                         viaServers: payload.via_servers,
                     };
                 }
-                this.dis?.dispatch<JoinRoomPayload>(joinPayload);
+                this.dis.dispatch<JoinRoomPayload>(joinPayload);
             }
 
             if (room) {
@@ -498,7 +507,7 @@ export class RoomViewStore extends EventEmitter {
                     viaServers = result.servers;
                 } catch (err) {
                     logger.error("RVS failed to get room id for alias: ", err);
-                    this.dis?.dispatch<ViewRoomErrorPayload>({
+                    this.dis.dispatch<ViewRoomErrorPayload>({
                         action: Action.ViewRoomError,
                         room_id: null,
                         room_alias: payload.room_alias,
@@ -509,7 +518,7 @@ export class RoomViewStore extends EventEmitter {
             }
 
             // Re-fire the payload with the newly found room_id
-            this.dis?.dispatch({
+            this.dis.dispatch({
                 ...payload,
                 room_id: roomId,
                 via_servers: viaServers,
@@ -538,14 +547,29 @@ export class RoomViewStore extends EventEmitter {
         });
 
         // take a copy of roomAlias, roomId & viaServers as they may change by the time the join is complete
-        const { roomAlias, roomId = payload.roomId, viaServers = [] } = this.state;
+        const { roomAlias, viaServers = [] } = this.state;
+        // fall back to the payload's roomId explicitly since it is always the room we were asked to join
+        const roomId = this.state.roomId ?? payload.roomId;
         // prefer the room alias if we have one as it allows joining over federation even with no viaServers
-        const address = roomAlias || roomId!;
+        const address = roomAlias || roomId;
+
+        if (!address) {
+            logger.error("Cannot join room: no room ID or alias to join", payload);
+            this.dis.dispatch<JoinRoomErrorPayload>({
+                action: Action.JoinRoomError,
+                roomId,
+                err: new UserFriendlyError("room|error_join_unknown", {
+                    cause: new Error("Cannot join room: no room ID or alias to join"),
+                }),
+                canAskToJoin: payload.canAskToJoin,
+            });
+            return;
+        }
 
         const joinOpts: IJoinRoomOpts = {
             viaServers,
             acceptSharedHistory: true,
-            ...(payload.opts ?? {}),
+            ...payload.opts,
         };
         try {
             const cli = MatrixClientPeg.safeGet();
@@ -561,14 +585,14 @@ export class RoomViewStore extends EventEmitter {
             // We do *not* clear the 'joining' flag because the Room object and/or our 'joined' member event may not
             // have come down the sync stream yet, and that's the point at which we'd consider the user joined to the
             // room.
-            this.dis?.dispatch<JoinRoomReadyPayload>({
+            this.dis.dispatch<JoinRoomReadyPayload>({
                 action: Action.JoinRoomReady,
-                roomId: roomId!,
+                roomId,
                 metricsTrigger: payload.metricsTrigger,
             });
         } catch (err) {
             logger.error("Error thrown while handling joinRoom", err);
-            this.dis?.dispatch<JoinRoomErrorPayload>({
+            this.dis.dispatch<JoinRoomErrorPayload>({
                 action: Action.JoinRoomError,
                 roomId,
                 err: err instanceof Error ? err : new UserFriendlyError("room|error_join_unknown", { cause: err }),
@@ -576,7 +600,7 @@ export class RoomViewStore extends EventEmitter {
             });
 
             if (payload.canAskToJoin && err instanceof MatrixError && err.httpStatus === 403) {
-                this.dis?.dispatch({ action: Action.PromptAskToJoin });
+                this.dis.dispatch({ action: Action.PromptAskToJoin });
             }
         }
     }
@@ -658,7 +682,7 @@ export class RoomViewStore extends EventEmitter {
      */
     public resetDispatcher(dis: MatrixDispatcher): void {
         if (this.dispatchToken) {
-            this.dis?.unregister(this.dispatchToken);
+            this.dis.unregister(this.dispatchToken);
         }
         this.dis = dis;
         if (dis) {
diff --git a/apps/web/src/stores/SetupEncryptionStore.ts b/apps/web/src/stores/SetupEncryptionStore.ts
index 9e324b6496..5815782d8e 100644
--- a/apps/web/src/stores/SetupEncryptionStore.ts
+++ b/apps/web/src/stores/SetupEncryptionStore.ts
@@ -6,6 +6,7 @@ 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.
 */
 
+// oxlint-disable-next-line no-restricted-imports
 import EventEmitter from "events";
 import {
     type KeyBackupInfo,
@@ -15,12 +16,12 @@ import {
     CryptoEvent,
 } from "matrix-js-sdk/src/crypto-api";
 import { logger } from "matrix-js-sdk/src/logger";
-import { type Device, type SecretStorage } from "matrix-js-sdk/src/matrix";
+import { type SecretStorage } from "matrix-js-sdk/src/matrix";
 
 import { MatrixClientPeg } from "../MatrixClientPeg";
 import { AccessCancelledError, accessSecretStorage } from "../SecurityManager";
-import { asyncSome } from "../utils/arrays";
 import { initialiseDehydrationIfEnabled } from "../utils/device/dehydration";
+import { hasOtherVerifiedDevices } from "../hooks/useHasOtherVerifiedDevices";
 
 export enum Phase {
     Loading = 0,
@@ -102,21 +103,10 @@ export class SetupEncryptionStore extends EventEmitter {
         }
 
         const ownUserId = cli.getUserId()!;
+        const ownDeviceId = cli.getDeviceId()!;
         const crypto = cli.getCrypto()!;
         // do we have any other verified devices which are E2EE which we can verify against?
-        const userDevices: Iterable<Device> =
-            (await crypto.getUserDeviceInfo([ownUserId])).get(ownUserId)?.values() ?? [];
-        this.hasDevicesToVerifyAgainst = await asyncSome(userDevices, async (device) => {
-            // Ignore dehydrated devices. MSC3814 proposes that devices
-            // should set a `dehydrated` flag in the device key.
-            if (device.dehydrated) return false;
-
-            // ignore devices without an identity key
-            if (!device.getIdentityKey()) return false;
-
-            const verificationStatus = await crypto.getDeviceVerificationStatus(ownUserId, device.deviceId);
-            return !!verificationStatus?.signedByOwner;
-        });
+        this.hasDevicesToVerifyAgainst = (await hasOtherVerifiedDevices(ownUserId, ownDeviceId, crypto)) === true;
 
         this.phase = Phase.Intro;
         this.emit("update");
diff --git a/apps/web/src/stores/ThreepidInviteStore.ts b/apps/web/src/stores/ThreepidInviteStore.ts
index 271d75b130..a8a282dc09 100644
--- a/apps/web/src/stores/ThreepidInviteStore.ts
+++ b/apps/web/src/stores/ThreepidInviteStore.ts
@@ -6,6 +6,7 @@ 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.
 */
 
+// oxlint-disable-next-line no-restricted-imports
 import EventEmitter from "events";
 import { base32 } from "rfc4648";
 import { type RoomType } from "matrix-js-sdk/src/matrix";
@@ -15,13 +16,13 @@ import { type RoomType } from "matrix-js-sdk/src/matrix";
 export interface IThreepidInviteWireFormat {
     email: string;
     signurl: string;
-    room_name: string; // eslint-disable-line camelcase
-    room_avatar_url: string; // eslint-disable-line camelcase
-    inviter_name: string; // eslint-disable-line camelcase
+    room_name: string;
+    room_avatar_url: string;
+    inviter_name: string;
 
     // TODO: Figure out if these are ever populated
-    guest_access_token?: string; // eslint-disable-line camelcase
-    guest_user_id?: string; // eslint-disable-line camelcase
+    guest_access_token?: string;
+    guest_user_id?: string;
 }
 
 interface IPersistedThreepidInvite extends IThreepidInviteWireFormat {
@@ -46,7 +47,6 @@ export interface IOOBData {
     name?: string; // The room's name
     avatarUrl?: string; // The mxc:// avatar URL for the room
     inviterName?: string; // The display name of the person who invited us to the room
-    // eslint-disable-next-line camelcase
     room_name?: string; // The name of the room, to be used until we are told better by the server
     roomType?: RoomType | string; // The type of the room, to be used until we are told better by the server
 }
@@ -64,7 +64,7 @@ export default class ThreepidInviteStore extends EventEmitter {
     }
 
     public storeInvite(roomId: string, wireInvite: IThreepidInviteWireFormat): IThreepidInvite {
-        const invite = <IPersistedThreepidInvite>{ roomId, ...wireInvite };
+        const invite: IPersistedThreepidInvite = { roomId, ...wireInvite };
         const id = this.generateIdOf(invite);
         localStorage.setItem(`${STORAGE_PREFIX}${id}`, JSON.stringify(invite));
         return this.translateInvite(invite);
diff --git a/apps/web/src/stores/ToastStore.ts b/apps/web/src/stores/ToastStore.ts
index 971e49be58..04de298340 100644
--- a/apps/web/src/stores/ToastStore.ts
+++ b/apps/web/src/stores/ToastStore.ts
@@ -6,6 +6,7 @@ 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.
 */
 
+// oxlint-disable-next-line no-restricted-imports
 import EventEmitter from "events";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type JSX } from "react";
diff --git a/apps/web/src/stores/TypingStore.ts b/apps/web/src/stores/TypingStore.ts
index 31f04121b1..2796cc2293 100644
--- a/apps/web/src/stores/TypingStore.ts
+++ b/apps/web/src/stores/TypingStore.ts
@@ -6,7 +6,7 @@ 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 SdkContextClass } from "../contexts/SDKContext";
+import { type SDKContextClass } from "../contexts/SDKContextClass";
 import SettingsStore from "../settings/SettingsStore";
 import { isLocalRoom } from "../utils/localRoom/isLocalRoom";
 import Timer from "../utils/Timer";
@@ -26,7 +26,7 @@ export default class TypingStore {
         };
     } = {};
 
-    public constructor(private readonly context: SdkContextClass) {
+    public constructor(private readonly context: SDKContextClass) {
         this.reset();
     }
 
diff --git a/apps/web/src/stores/UIStore.ts b/apps/web/src/stores/UIStore.ts
index 0792bb206d..13b59fee46 100644
--- a/apps/web/src/stores/UIStore.ts
+++ b/apps/web/src/stores/UIStore.ts
@@ -6,10 +6,13 @@ 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.
 */
 
+// oxlint-disable-next-line no-restricted-imports
 import EventEmitter from "events";
 
 export enum UI_EVENTS {
     Resize = "resize",
+    WidthIncreased = "width-increased",
+    WidthDecreased = "width-decreased",
 }
 
 export default class UIStore extends EventEmitter {
@@ -19,9 +22,14 @@ export default class UIStore extends EventEmitter {
 
     private uiElementDimensions = new Map<string, DOMRectReadOnly>();
     private trackedUiElements = new Map<Element, string>();
+    private timeoutId: number = 0;
 
     public windowWidth: number;
     public windowHeight: number;
+    /**
+     * Whether the window is currently being resized.
+     */
+    public isWindowBeingResized: boolean = false;
 
     public constructor() {
         super();
@@ -38,6 +46,7 @@ export default class UIStore extends EventEmitter {
     public static get instance(): UIStore {
         if (!UIStore._instance) {
             UIStore._instance = new UIStore();
+            window.mxUIStore = UIStore._instance;
         }
         return UIStore._instance;
     }
@@ -81,7 +90,12 @@ export default class UIStore extends EventEmitter {
         const windowEntry = entries.find((entry) => entry.target === document.body);
 
         if (windowEntry) {
-            this.windowWidth = windowEntry.contentRect.width;
+            this.setWindowAsBeingResized();
+
+            const currentWidth = windowEntry.contentRect.width;
+            this.emitWidthChangeEvents(currentWidth);
+
+            this.windowWidth = currentWidth;
             this.windowHeight = windowEntry.contentRect.height;
         }
 
@@ -95,6 +109,29 @@ export default class UIStore extends EventEmitter {
 
         this.emit(UI_EVENTS.Resize, entries);
     };
-}
 
-window.mxUIStore = UIStore.instance;
+    /**
+     * Emit any necessary {@link UI_EVENTS.WidthIncreased} or {@link UI_EVENTS.WidthDecreased} events.
+     * @param currentWidth The current width of {@link window}
+     */
+    private emitWidthChangeEvents = (currentWidth: number): void => {
+        if (currentWidth > this.windowWidth) this.emit(UI_EVENTS.WidthIncreased, currentWidth);
+        if (currentWidth < this.windowWidth) this.emit(UI_EVENTS.WidthDecreased, currentWidth);
+    };
+
+    /**
+     * Update {@link UIStore#isWindowBeingResized}.
+     */
+    private setWindowAsBeingResized = (): void => {
+        // Window is being resized, so set to true.
+        this.isWindowBeingResized = true;
+        // Reset any previous timeout.
+        window.clearTimeout(this.timeoutId);
+        // Set to false after a second.
+        // If the window continues to be resized, this method will be called
+        // again and this setTimeout will be cancelled.
+        this.timeoutId = window.setTimeout(() => {
+            this.isWindowBeingResized = false;
+        }, 1000);
+    };
+}
diff --git a/apps/web/src/stores/VoiceRecordingStore.ts b/apps/web/src/stores/VoiceRecordingStore.ts
index 20ad092484..5991c689d6 100644
--- a/apps/web/src/stores/VoiceRecordingStore.ts
+++ b/apps/web/src/stores/VoiceRecordingStore.ts
@@ -84,11 +84,7 @@ export class VoiceRecordingStore extends AsyncStoreWithClient<IState> {
     public disposeRecording(voiceRecordingId: string): Promise<void> {
         this.state[voiceRecordingId]?.destroy(); // stops internally
 
-        const {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            [voiceRecordingId]: _toDelete,
-            ...newState
-        } = this.state;
+        const { [voiceRecordingId]: _toDelete, ...newState } = this.state;
         // unexpectedly AsyncStore.updateState merges state
         // AsyncStore.reset actually just *sets*
         return this.reset(newState);
diff --git a/apps/web/src/stores/WidgetEchoStore.ts b/apps/web/src/stores/WidgetEchoStore.ts
index 7be77652c7..3ca206930f 100644
--- a/apps/web/src/stores/WidgetEchoStore.ts
+++ b/apps/web/src/stores/WidgetEchoStore.ts
@@ -6,6 +6,7 @@ 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.
 */
 
+// oxlint-disable-next-line no-restricted-imports
 import EventEmitter from "events";
 import { type IWidget } from "matrix-widget-api";
 import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
@@ -107,4 +108,5 @@ let singletonWidgetEchoStore: WidgetEchoStore | null = null;
 if (!singletonWidgetEchoStore) {
     singletonWidgetEchoStore = new WidgetEchoStore();
 }
+// oxlint-disable-next-line typescript/no-unnecessary-type-assertion
 export default singletonWidgetEchoStore!;
diff --git a/apps/web/src/stores/WidgetStore.ts b/apps/web/src/stores/WidgetStore.ts
index fbae950dbc..b41c101ac6 100644
--- a/apps/web/src/stores/WidgetStore.ts
+++ b/apps/web/src/stores/WidgetStore.ts
@@ -202,5 +202,3 @@ export default class WidgetStore extends AsyncStoreWithClient<EmptyObject> {
         this.emit(UPDATE_EVENT, roomId);
     }
 }
-
-window.mxWidgetStore = WidgetStore.instance;
diff --git a/apps/web/src/stores/local-echo/GenericEchoChamber.ts b/apps/web/src/stores/local-echo/GenericEchoChamber.ts
index 6dbd7f587b..27ae8f241d 100644
--- a/apps/web/src/stores/local-echo/GenericEchoChamber.ts
+++ b/apps/web/src/stores/local-echo/GenericEchoChamber.ts
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type MatrixClient } from "matrix-js-sdk/src/matrix";
+// oxlint-disable-next-line no-restricted-imports
 import { EventEmitter } from "events";
 
 import { type EchoContext } from "./EchoContext";
diff --git a/apps/web/src/stores/message-preview/MessagePreviewStore.ts b/apps/web/src/stores/message-preview/MessagePreviewStore.ts
index a0fced0193..0f9b074757 100644
--- a/apps/web/src/stores/message-preview/MessagePreviewStore.ts
+++ b/apps/web/src/stores/message-preview/MessagePreviewStore.ts
@@ -10,7 +10,6 @@ import {
     type Room,
     RelationType,
     type MatrixEvent,
-    type Thread,
     M_POLL_START,
     RoomEvent,
     type EmptyObject,
@@ -31,58 +30,16 @@ import { ReactionEventPreview } from "./previews/ReactionEventPreview";
 import { UPDATE_EVENT } from "../AsyncStore";
 import { type Preview } from "./previews";
 import shouldHideEvent from "../../shouldHideEvent";
-import SettingsStore from "../../settings/SettingsStore";
 
 // Emitted event for when a room's preview has changed. First argument will the room for which
 // the change happened.
 const ROOM_PREVIEW_CHANGED = "room_preview_changed";
 
-const PREVIEWS: Record<
-    string,
-    {
-        isState: boolean;
-        previewer: Preview;
-    }
-> = {
-    "m.room.message": {
-        isState: false,
-        previewer: new MessageEventPreview(),
-    },
-    "m.call.invite": {
-        isState: false,
-        previewer: new LegacyCallInviteEventPreview(),
-    },
-    "m.call.answer": {
-        isState: false,
-        previewer: new LegacyCallAnswerEventPreview(),
-    },
-    "m.call.hangup": {
-        isState: false,
-        previewer: new LegacyCallHangupEvent(),
-    },
-    "m.sticker": {
-        isState: false,
-        previewer: new StickerEventPreview(),
-    },
-    "m.reaction": {
-        isState: false,
-        previewer: new ReactionEventPreview(),
-    },
-    [M_POLL_START.name]: {
-        isState: false,
-        previewer: new PollStartEventPreview(),
-    },
-    [M_POLL_START.altName]: {
-        isState: false,
-        previewer: new PollStartEventPreview(),
-    },
-};
-
 // The maximum number of events we're willing to look back on to get a preview.
 const MAX_EVENTS_BACKWARDS = 50;
 
 // type merging ftw
-type TAG_ANY = "im.vector.any"; // eslint-disable-line @typescript-eslint/naming-convention
+type TAG_ANY = "im.vector.any";
 const TAG_ANY: TAG_ANY = "im.vector.any";
 
 export interface MessagePreview {
@@ -139,8 +96,23 @@ export class MessagePreviewStore extends AsyncStoreWithClient<EmptyObject> {
     // null indicates the preview is empty / irrelevant
     private previews = new Map<string, Map<TagID | TAG_ANY, MessagePreview | null>>();
 
+    // Previewers keyed by event type
+    private readonly previewers: Record<string, { isState: boolean; previewer: Preview }>;
+
     private constructor() {
         super(defaultDispatcher, {});
+        this.previewers = {
+            "m.room.message": { isState: false, previewer: new MessageEventPreview() },
+            "m.call.invite": { isState: false, previewer: new LegacyCallInviteEventPreview() },
+            "m.call.answer": { isState: false, previewer: new LegacyCallAnswerEventPreview() },
+            "m.call.hangup": { isState: false, previewer: new LegacyCallHangupEvent() },
+            "m.sticker": { isState: false, previewer: new StickerEventPreview() },
+            // ReactionEventPreview needs the message preview store, so the previewers are constructed here (passing `this`) rather than at
+            // module scope, where the store singleton would not exist yet (circular dependency).
+            "m.reaction": { isState: false, previewer: new ReactionEventPreview(this) },
+            [M_POLL_START.name]: { isState: false, previewer: new PollStartEventPreview() },
+            [M_POLL_START.altName]: { isState: false, previewer: new PollStartEventPreview() },
+        };
     }
 
     public static get instance(): MessagePreviewStore {
@@ -172,22 +144,13 @@ export class MessagePreviewStore extends AsyncStoreWithClient<EmptyObject> {
     }
 
     public generatePreviewForEvent(event: MatrixEvent): string {
-        const previewDef = PREVIEWS[event.getType()];
+        const previewDef = this.previewers[event.getType()];
         return previewDef?.previewer.getTextFor(event, undefined, true) ?? "";
     }
 
     private async generatePreview(room: Room, tagId?: TagID): Promise<void> {
         const events = [...room.getLiveTimeline().getEvents(), ...room.getPendingEvents()];
 
-        const isNewRoomListEnabled = SettingsStore.getValue("feature_new_room_list");
-        if (!isNewRoomListEnabled) {
-            // add last reply from each thread
-            room.getThreads().forEach((thread: Thread): void => {
-                const lastReply = thread.lastReply();
-                if (lastReply) events.push(lastReply);
-            });
-        }
-
         // sort events from oldest to newest
         events.sort((a: MatrixEvent, b: MatrixEvent) => {
             return a.getTs() - b.getTs();
@@ -217,7 +180,7 @@ export class MessagePreviewStore extends AsyncStoreWithClient<EmptyObject> {
             await this.matrixClient?.decryptEventIfNeeded(event);
             const shouldHide = shouldHideEvent(event);
             if (shouldHide) continue;
-            const previewDef = PREVIEWS[event.getType()];
+            const previewDef = this.previewers[event.getType()];
             if (!previewDef) continue;
             if (previewDef.isState && isNullOrUndefined(event.getStateKey())) continue;
 
diff --git a/apps/web/src/stores/message-preview/index.ts b/apps/web/src/stores/message-preview/index.ts
index 529f72888d..abb8d3e760 100644
--- a/apps/web/src/stores/message-preview/index.ts
+++ b/apps/web/src/stores/message-preview/index.ts
@@ -5,4 +5,8 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-export { type MessagePreview, MessagePreviewStore } from "./MessagePreviewStore";
+export {
+    /** @knipignore - exported for tests */
+    type MessagePreview,
+    MessagePreviewStore,
+} from "./MessagePreviewStore";
diff --git a/apps/web/src/stores/message-preview/previews/ReactionEventPreview.ts b/apps/web/src/stores/message-preview/previews/ReactionEventPreview.ts
index 8b405f2fc8..f886059a2e 100644
--- a/apps/web/src/stores/message-preview/previews/ReactionEventPreview.ts
+++ b/apps/web/src/stores/message-preview/previews/ReactionEventPreview.ts
@@ -13,9 +13,11 @@ import { type TagID } from "../../room-list-v3/skip-list/tag";
 import { getSenderName, isSelf } from "./utils";
 import { _t } from "../../../languageHandler";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
-import { MessagePreviewStore } from "../MessagePreviewStore";
+import type { MessagePreviewStore } from "../MessagePreviewStore";
 
 export class ReactionEventPreview implements Preview {
+    public constructor(private readonly messagePreviewStore: MessagePreviewStore) {}
+
     public getTextFor(event: MatrixEvent, tagId?: TagID, isThread?: boolean): string | null {
         const roomId = event.getRoomId();
         if (!roomId) return null; // not a room event
@@ -31,7 +33,7 @@ export class ReactionEventPreview implements Preview {
         const relatedEvent = relation.event_id ? room?.findEventById(relation.event_id) : null;
         if (!relatedEvent) return null;
 
-        const message = MessagePreviewStore.instance.generatePreviewForEvent(relatedEvent);
+        const message = this.messagePreviewStore.generatePreviewForEvent(relatedEvent);
         if (isSelf(event)) {
             return _t("event_preview|m.reaction|you", {
                 reaction,
diff --git a/apps/web/test/unit-tests/stores/notifications/NotificationColor-test.ts b/apps/web/src/stores/notifications/NotificationLevel.test.ts
similarity index 85%
rename from apps/web/test/unit-tests/stores/notifications/NotificationColor-test.ts
rename to apps/web/src/stores/notifications/NotificationLevel.test.ts
index f6ad12829b..12f28d606c 100644
--- a/apps/web/test/unit-tests/stores/notifications/NotificationColor-test.ts
+++ b/apps/web/src/stores/notifications/NotificationLevel.test.ts
@@ -6,10 +6,9 @@ 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 {
-    humanReadableNotificationLevel,
-    NotificationLevel,
-} from "../../../../src/stores/notifications/NotificationLevel";
+import { describe, it, expect } from "vitest";
+
+import { humanReadableNotificationLevel, NotificationLevel } from "./NotificationLevel";
 
 describe("NotificationLevel", () => {
     describe("humanReadableNotificationLevel", () => {
diff --git a/apps/web/test/unit-tests/stores/notifications/RoomNotificationState-test.ts b/apps/web/src/stores/notifications/RoomNotificationState.test.ts
similarity index 84%
rename from apps/web/test/unit-tests/stores/notifications/RoomNotificationState-test.ts
rename to apps/web/src/stores/notifications/RoomNotificationState.test.ts
index 3ae4958de6..5e5a04d108 100644
--- a/apps/web/test/unit-tests/stores/notifications/RoomNotificationState-test.ts
+++ b/apps/web/src/stores/notifications/RoomNotificationState.test.ts
@@ -6,6 +6,9 @@ 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.
 */
 
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
 import {
     Room,
     MatrixEventEvent,
@@ -17,15 +20,15 @@ import {
     RoomEvent,
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
+import { mkEvent, muteRoom, stubClient } from "test-utils";
+import { createMessageEventContent } from "test-utils/events";
 
 import type { MatrixClient } from "matrix-js-sdk/src/matrix";
-import { mkEvent, muteRoom, stubClient } from "../../../test-utils";
-import { RoomNotificationState } from "../../../../src/stores/notifications/RoomNotificationState";
-import { NotificationStateEvents } from "../../../../src/stores/notifications/NotificationState";
-import { NotificationLevel } from "../../../../src/stores/notifications/NotificationLevel";
-import { createMessageEventContent } from "../../../test-utils/events";
-import SettingsStore from "../../../../src/settings/SettingsStore";
-import * as UnreadModule from "../../../../src/Unread";
+import { RoomNotificationState } from "./RoomNotificationState";
+import { NotificationStateEvents } from "./NotificationState";
+import { NotificationLevel } from "./NotificationLevel";
+import SettingsStore from "../../settings/SettingsStore";
+import * as UnreadModule from "../../Unread";
 
 describe("RoomNotificationState", () => {
     let room: Room;
@@ -39,12 +42,12 @@ describe("RoomNotificationState", () => {
     });
 
     afterEach(() => {
-        jest.resetAllMocks();
+        vi.resetAllMocks();
     });
 
     function addThread(room: Room): void {
         const threadId = "thread_id";
-        jest.spyOn(room, "eventShouldLiveIn").mockReturnValue({
+        vi.spyOn(room, "eventShouldLiveIn").mockReturnValue({
             shouldLiveInRoom: true,
             shouldLiveInThread: true,
             threadId,
@@ -82,19 +85,19 @@ describe("RoomNotificationState", () => {
 
     it("updates on event decryption", () => {
         const roomNotifState = new RoomNotificationState(room, true);
-        const listener = jest.fn();
+        const listener = vi.fn();
         roomNotifState.addListener(NotificationStateEvents.Update, listener);
         const testEvent = {
             getRoomId: () => room.roomId,
         } as unknown as MatrixEvent;
-        room.getUnreadNotificationCount = jest.fn().mockReturnValue(1);
+        room.getUnreadNotificationCount = vi.fn().mockReturnValue(1);
         client.emit(MatrixEventEvent.Decrypted, testEvent);
         expect(listener).toHaveBeenCalled();
     });
 
     it("emits an Update event on marked unread room account data", () => {
         const roomNotifState = new RoomNotificationState(room, true);
-        const listener = jest.fn();
+        const listener = vi.fn();
         roomNotifState.addListener(NotificationStateEvents.Update, listener);
         const accountDataEvent = {
             getType: () => "m.marked_unread",
@@ -102,14 +105,14 @@ describe("RoomNotificationState", () => {
                 return { unread: true };
             },
         } as unknown as MatrixEvent;
-        room.getAccountData = jest.fn().mockReturnValue(accountDataEvent);
+        room.getAccountData = vi.fn().mockReturnValue(accountDataEvent);
         room.emit(RoomEvent.AccountData, accountDataEvent, room);
         expect(listener).toHaveBeenCalled();
     });
 
     it("does not update on other account data", () => {
         const roomNotifState = new RoomNotificationState(room, true);
-        const listener = jest.fn();
+        const listener = vi.fn();
         roomNotifState.addListener(NotificationStateEvents.Update, listener);
         const accountDataEvent = {
             getType: () => "else.something",
@@ -117,7 +120,7 @@ describe("RoomNotificationState", () => {
                 return {};
             },
         } as unknown as MatrixEvent;
-        room.getAccountData = jest.fn().mockReturnValue(accountDataEvent);
+        room.getAccountData = vi.fn().mockReturnValue(accountDataEvent);
         room.emit(RoomEvent.AccountData, accountDataEvent, room);
         expect(listener).not.toHaveBeenCalled();
     });
@@ -209,8 +212,8 @@ describe("RoomNotificationState", () => {
 
     describe("computed attributes", () => {
         beforeEach(() => {
-            jest.spyOn(room, "getPendingEvents").mockReturnValue([]);
-            jest.spyOn(UnreadModule, "doesRoomHaveUnreadMessages").mockReturnValue(false);
+            vi.spyOn(room, "getPendingEvents").mockReturnValue([]);
+            vi.spyOn(UnreadModule, "doesRoomHaveUnreadMessages").mockReturnValue(false);
         });
 
         it("should has invited at true", () => {
@@ -220,7 +223,7 @@ describe("RoomNotificationState", () => {
         });
 
         it("should has isUnsetMessage at true", () => {
-            jest.spyOn(room, "getPendingEvents").mockReturnValue([
+            vi.spyOn(room, "getPendingEvents").mockReturnValue([
                 mkEvent({ status: EventStatus.NOT_SENT, user: "@foobar:example.org", type: "any.event", content: {} }),
             ]);
             const roomNotifState = new RoomNotificationState(room, false);
@@ -236,11 +239,11 @@ describe("RoomNotificationState", () => {
             room.updateMyMembership(KnownMembership.Invite);
             expect(roomNotifState.isMention).toBe(false);
 
-            jest.spyOn(SettingsStore, "getValue").mockReturnValue(true);
+            vi.spyOn(SettingsStore, "getValue").mockReturnValue(true);
             room.updateMyMembership(KnownMembership.Knock);
             expect(roomNotifState.isMention).toBe(false);
 
-            jest.spyOn(room, "getPendingEvents").mockReturnValue([
+            vi.spyOn(room, "getPendingEvents").mockReturnValue([
                 mkEvent({ status: EventStatus.NOT_SENT, user: "@foobar:example.org", type: "any.event", content: {} }),
             ]);
             room.updateMyMembership(KnownMembership.Join);
@@ -255,7 +258,7 @@ describe("RoomNotificationState", () => {
         });
 
         it("should has isActivityNotification at true", () => {
-            jest.spyOn(UnreadModule, "doesRoomHaveUnreadMessages").mockReturnValue(true);
+            vi.spyOn(UnreadModule, "doesRoomHaveUnreadMessages").mockReturnValue(true);
 
             const roomNotifState = new RoomNotificationState(room, false);
             expect(roomNotifState.isActivityNotification).toBe(true);
@@ -263,9 +266,9 @@ describe("RoomNotificationState", () => {
 
         it("should has hasAnyNotificationOrActivity at true", () => {
             // Hidebold is disabled
-            jest.spyOn(SettingsStore, "getValue").mockReturnValue(false);
+            vi.spyOn(SettingsStore, "getValue").mockReturnValue(false);
             // Unread message, generate activity notification
-            jest.spyOn(UnreadModule, "doesRoomHaveUnreadMessages").mockReturnValue(true);
+            vi.spyOn(UnreadModule, "doesRoomHaveUnreadMessages").mockReturnValue(true);
             // Highlight notification
             setUnreads(room, 0, 1);
 
@@ -281,12 +284,12 @@ describe("RoomNotificationState", () => {
             expect(roomNotifState.hasAnyNotificationOrActivity).toBe(true);
 
             // hidebold is enabled and we have an activity notification
-            jest.spyOn(SettingsStore, "getValue").mockReturnValue(true);
+            vi.spyOn(SettingsStore, "getValue").mockReturnValue(true);
             room.updateMyMembership(KnownMembership.Join);
             expect(roomNotifState.hasAnyNotificationOrActivity).toBe(false);
 
             // No unread
-            jest.spyOn(UnreadModule, "doesRoomHaveUnreadMessages").mockReturnValue(false);
+            vi.spyOn(UnreadModule, "doesRoomHaveUnreadMessages").mockReturnValue(false);
             room.updateMyMembership(KnownMembership.Join);
             expect(roomNotifState.hasAnyNotificationOrActivity).toBe(false);
         });
diff --git a/apps/web/src/stores/oidc/OidcClientStore.ts b/apps/web/src/stores/oidc/OidcClientStore.ts
deleted file mode 100644
index 4b53089d57..0000000000
--- a/apps/web/src/stores/oidc/OidcClientStore.ts
+++ /dev/null
@@ -1,183 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2023 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { type MatrixClient, discoverAndValidateOIDCIssuerWellKnown } from "matrix-js-sdk/src/matrix";
-import { logger } from "matrix-js-sdk/src/logger";
-import { OidcClient } from "oidc-client-ts";
-
-import {
-    getStoredOidcTokenIssuer,
-    getStoredOidcClientId,
-    getStoredOidcIdToken,
-} from "../../utils/oidc/persistOidcSettings";
-import PlatformPeg from "../../PlatformPeg";
-
-/**
- * @experimental
- * Stores information about configured OIDC provider
- *
- * In OIDC Native mode the client is registered with OIDC directly and maintains an OIDC token.
- *
- * In OIDC Aware mode, the client is aware that the Server is using OIDC, but is using the standard Matrix APIs for most things.
- * (Notable exceptions are account management, where a link to the account management endpoint will be provided instead.)
- *
- * Otherwise, the store is not operating. Auth is then in Legacy mode and everything uses normal Matrix APIs.
- */
-export class OidcClientStore {
-    private oidcClient?: OidcClient;
-    private initialisingOidcClientPromise: Promise<void> | undefined;
-    private authenticatedIssuer?: string; // set only in OIDC-native mode
-    private _accountManagementEndpoint?: string;
-    private _accountManagementActionsSupported?: string[];
-    /**
-     * Promise which resolves once this store is read to use, which may mean there is no OIDC client if we're in legacy mode,
-     * or we just have the account management endpoint if running in OIDC-aware mode.
-     */
-    public readonly readyPromise: Promise<void>;
-
-    public constructor(private readonly matrixClient: MatrixClient) {
-        this.readyPromise = this.init();
-    }
-
-    private async init(): Promise<void> {
-        this.authenticatedIssuer = getStoredOidcTokenIssuer();
-        if (this.authenticatedIssuer) {
-            await this.getOidcClient();
-        } else {
-            // We are not in OIDC Native mode, as we have no locally stored issuer. Check if the server delegates auth to OIDC.
-            try {
-                const authMetadata = await this.matrixClient.getAuthMetadata();
-                this.setAccountManagementEndpoint(
-                    authMetadata.account_management_uri,
-                    authMetadata.issuer,
-                    authMetadata.account_management_actions_supported,
-                );
-            } catch (e) {
-                console.log("Auth issuer not found", e);
-            }
-        }
-    }
-
-    /**
-     * True when the active user is authenticated via OIDC
-     */
-    public get isUserAuthenticatedWithOidc(): boolean {
-        return !!this.authenticatedIssuer;
-    }
-
-    private setAccountManagementEndpoint(
-        endpoint: string | undefined,
-        issuer: string,
-        actionsSupported?: string[],
-    ): void {
-        // if no account endpoint is configured default to the issuer
-        const url = new URL(endpoint ?? issuer);
-        const idToken = getStoredOidcIdToken();
-        if (idToken) {
-            url.searchParams.set("id_token_hint", idToken);
-        }
-        this._accountManagementEndpoint = url.toString();
-        this._accountManagementActionsSupported = actionsSupported;
-    }
-
-    public get accountManagementEndpoint(): string | undefined {
-        return this._accountManagementEndpoint;
-    }
-
-    public get accountManagementActionsSupported(): string[] | undefined {
-        return this._accountManagementActionsSupported;
-    }
-
-    /**
-     * Revokes provided access and refresh tokens with the configured OIDC provider
-     * @param accessToken
-     * @param refreshToken
-     * @returns Promise that resolves when tokens have been revoked
-     * @throws when OidcClient cannot be initialised, or revoking either token fails
-     */
-    public async revokeTokens(accessToken?: string, refreshToken?: string): Promise<void> {
-        const client = await this.getOidcClient();
-
-        if (!client) {
-            throw new Error("No OIDC client");
-        }
-
-        const results = await Promise.all([
-            this.tryRevokeToken(client, accessToken, "access_token"),
-            this.tryRevokeToken(client, refreshToken, "refresh_token"),
-        ]);
-
-        if (results.some((success) => !success)) {
-            throw new Error("Failed to revoke tokens");
-        }
-    }
-
-    /**
-     * Try to revoke a given token
-     * @param oidcClient
-     * @param token
-     * @param tokenType passed to revocation endpoint as token type hint
-     * @returns Promise that resolved with boolean whether the token revocation succeeded or not
-     */
-    private async tryRevokeToken(
-        oidcClient: OidcClient,
-        token: string | undefined,
-        tokenType: "access_token" | "refresh_token",
-    ): Promise<boolean> {
-        try {
-            if (!token) {
-                return false;
-            }
-            await oidcClient.revokeToken(token, tokenType);
-            return true;
-        } catch (error) {
-            logger.error(`Failed to revoke ${tokenType}`, error);
-            return false;
-        }
-    }
-
-    private async getOidcClient(): Promise<OidcClient | undefined> {
-        if (!this.oidcClient && !this.initialisingOidcClientPromise) {
-            this.initialisingOidcClientPromise = this.initOidcClient();
-        }
-        await this.initialisingOidcClientPromise;
-        this.initialisingOidcClientPromise = undefined;
-        return this.oidcClient;
-    }
-
-    /**
-     * Tries to initialise an OidcClient using stored clientId and OIDC discovery.
-     * Assigns this.oidcClient and accountManagement endpoint.
-     * Logs errors and does not throw when oidc client cannot be initialised.
-     * @returns promise that resolves when initialising OidcClient succeeds or fails
-     */
-    private async initOidcClient(): Promise<void> {
-        if (!this.authenticatedIssuer) {
-            logger.error("Cannot initialise OIDC client without issuer.");
-            return;
-        }
-
-        try {
-            const clientId = getStoredOidcClientId();
-            const authMetadata = await discoverAndValidateOIDCIssuerWellKnown(this.authenticatedIssuer);
-            this.setAccountManagementEndpoint(
-                authMetadata.account_management_uri,
-                authMetadata.issuer,
-                authMetadata.account_management_actions_supported,
-            );
-            this.oidcClient = new OidcClient({
-                authority: authMetadata.issuer,
-                signingKeys: authMetadata.signingKeys ?? undefined,
-                redirect_uri: PlatformPeg.get()!.getOidcCallbackUrl().href,
-                client_id: clientId,
-            });
-        } catch (error) {
-            logger.error("Failed to initialise OidcClientStore", error);
-        }
-    }
-}
diff --git a/apps/web/src/stores/right-panel/RightPanelStore.ts b/apps/web/src/stores/right-panel/RightPanelStore.ts
index f58559a66e..58f7f2357a 100644
--- a/apps/web/src/stores/right-panel/RightPanelStore.ts
+++ b/apps/web/src/stores/right-panel/RightPanelStore.ts
@@ -26,7 +26,7 @@ import {
 import { type ActionPayload } from "../../dispatcher/payloads";
 import { Action } from "../../dispatcher/actions";
 import { type ActiveRoomChangedPayload } from "../../dispatcher/payloads/ActiveRoomChangedPayload";
-import { SdkContextClass } from "../../contexts/SDKContext";
+import { SDKContextClass } from "../../contexts/SDKContextClass";
 import { MatrixClientPeg } from "../../MatrixClientPeg";
 
 /**
@@ -74,7 +74,7 @@ export default class RightPanelStore extends ReadyWatchingStore {
     }
 
     protected async onReady(): Promise<any> {
-        this.viewedRoomId = SdkContextClass.instance.roomViewStore.getRoomId();
+        this.viewedRoomId = SDKContextClass.instance.roomViewStore.getRoomId();
         this.matrixClient?.on(CryptoEvent.VerificationRequestReceived, this.onVerificationRequestUpdate);
         this.loadCacheFromSettings();
         this.emitAndUpdateSettings();
@@ -175,7 +175,7 @@ export default class RightPanelStore extends ReadyWatchingStore {
             this.emitAndUpdateSettings();
         } else if (targetPhase !== this.currentCardForRoom(rId)?.phase || !this.byRoom[rId]) {
             // Set right panel and initialize/erase history
-            const history = this.generateHistoryForPhase(targetPhase!, cardState ?? {});
+            const history = this.generateHistoryForPhase(targetPhase, cardState ?? {});
             this.byRoom[rId] = { history, isOpen: true };
             this.emitAndUpdateSettings();
         } else {
@@ -454,5 +454,3 @@ export default class RightPanelStore extends ReadyWatchingStore {
         return this.internalInstance;
     }
 }
-
-window.mxRightPanelStore = RightPanelStore.instance;
diff --git a/apps/web/src/stores/room-list-v3/RoomListStoreV3.ts b/apps/web/src/stores/room-list-v3/RoomListStoreV3.ts
index 60b86ddc81..c87e9f7bd5 100644
--- a/apps/web/src/stores/room-list-v3/RoomListStoreV3.ts
+++ b/apps/web/src/stores/room-list-v3/RoomListStoreV3.ts
@@ -19,7 +19,6 @@ import { RecencySorter } from "./skip-list/sorters/RecencySorter";
 import { AlphabeticSorter } from "./skip-list/sorters/AlphabeticSorter";
 import { readReceiptChangeIsFor } from "../../utils/read-receipts";
 import { EffectiveMembership, getEffectiveMembership, getEffectiveMembershipTag } from "../../utils/membership";
-import SpaceStore from "../spaces/SpaceStore";
 import { type SpaceKey, UPDATE_HOME_BEHAVIOUR, UPDATE_SELECTED_SPACE } from "../spaces";
 import { FavouriteFilter } from "./skip-list/filters/FavouriteFilter";
 import { UnreadFilter } from "./skip-list/filters/UnreadFilter";
@@ -36,11 +35,20 @@ import { UnreadSorter } from "./skip-list/sorters/UnreadSorter";
 import { getChangedOverrideRoomMutePushRules } from "./utils";
 import { isRoomVisible } from "./isRoomVisible";
 import { RoomSkipList } from "./skip-list/RoomSkipList";
-import { DefaultTagID } from "./skip-list/tag";
+import { getTagsForRoom } from "../../utils/room/getTagsForRoom";
 import { ExcludeTagsFilter } from "./skip-list/filters/ExcludeTagsFilter";
 import { TagFilter } from "./skip-list/filters/TagFilter";
 import { filterBoolean } from "../../utils/arrays";
-import { createSection, deleteSection, editSection } from "./section";
+import {
+    CHATS_TAG,
+    createSection,
+    deleteSection,
+    editSection,
+    getOrderedReorderableSections,
+    reorderSection,
+} from "./section";
+import { DefaultTagID, type TagID } from "./skip-list/tag";
+import { SDKContextClass } from "../../contexts/SDKContextClass.ts";
 
 /**
  * These are the filters passed to the room skip list.
@@ -86,12 +94,6 @@ export interface Section {
     rooms: Room[];
 }
 
-/**
- * A synthetic tag used to represent the "Chats" section, which contains
- * every room that does not belong to any other explicit tag section.
- */
-export const CHATS_TAG = "chats";
-
 export const LISTS_UPDATE_EVENT = RoomListStoreV3Event.ListsUpdate;
 export const LISTS_LOADED_EVENT = RoomListStoreV3Event.ListsLoaded;
 export const SECTION_CREATED_EVENT = RoomListStoreV3Event.SectionCreated;
@@ -129,12 +131,14 @@ export class RoomListStoreV3Class extends AsyncStoreWithClient<EmptyObject> {
     public constructor(dispatcher: MatrixDispatcher) {
         super(dispatcher);
         this.msc3946ProcessDynamicPredecessor = SettingsStore.getValue("feature_dynamic_room_predecessors");
-        SpaceStore.instance.on(UPDATE_SELECTED_SPACE, () => {
+        SDKContextClass.instance.spaceStore.on(UPDATE_SELECTED_SPACE, () => {
             this.onActiveSpaceChanged();
         });
-        SpaceStore.instance.on(UPDATE_HOME_BEHAVIOUR, () => this.onActiveSpaceChanged());
+        SDKContextClass.instance.spaceStore.on(UPDATE_HOME_BEHAVIOUR, () => this.onActiveSpaceChanged());
         SettingsStore.watchSetting("RoomList.OrderedCustomSections", null, () => this.onOrderedCustomSectionsChange());
         this.loadCustomSections();
+
+        SettingsStore.watchSetting("RoomList.showSections", null, () => this.scheduleEmit());
     }
 
     /**
@@ -169,9 +173,9 @@ export class RoomListStoreV3Class extends AsyncStoreWithClient<EmptyObject> {
      * @param filterKeys Optional array of filters that the rooms must match against.
      */
     public getSortedRoomsInActiveSpace(filterKeys?: FilterKey[]): RoomsResult {
-        const spaceId = SpaceStore.instance.activeSpace;
+        const spaceId = SDKContextClass.instance.spaceStore.activeSpace;
+        const areSectionsEnabled = SettingsStore.getValue("RoomList.showSections");
 
-        const areSectionsEnabled = SettingsStore.getValue("feature_room_list_sections");
         const sections = areSectionsEnabled
             ? this.getSections(filterKeys)
             : [{ tag: CHATS_TAG, rooms: Array.from(this.roomSkipList?.getRoomsInActiveSpace(filterKeys) ?? []) }];
@@ -183,6 +187,30 @@ export class RoomListStoreV3Class extends AsyncStoreWithClient<EmptyObject> {
         };
     }
 
+    /**
+     * Get the rooms in the currently active space that are tagged with the given tag.
+     * @param tag The tag to filter the rooms by.
+     */
+    private getRoomsWithTagInActiveSpace(tag: TagID): Room[] {
+        return this.getSortedRoomsInActiveSpace()
+            .sections.flatMap((s) => s.rooms)
+            .filter((room) => getTagsForRoom(room).includes(tag));
+    }
+
+    /**
+     * Get the server notice rooms in the currently active space.
+     */
+    public getServerNoticeRooms(): Room[] {
+        return this.getRoomsWithTagInActiveSpace(DefaultTagID.ServerNotice);
+    }
+
+    /**
+     * Get the direct message (DM) rooms in the currently active space.
+     */
+    public getDmRooms(): Room[] {
+        return this.getRoomsWithTagInActiveSpace(DefaultTagID.DM);
+    }
+
     /**
      * Resort the list of rooms using a different algorithm.
      * @param algorithm The sorting algorithm to use.
@@ -210,7 +238,7 @@ export class RoomListStoreV3Class extends AsyncStoreWithClient<EmptyObject> {
 
         this.roomSkipList = new RoomSkipList(sorter, this.getSkipListFilters());
 
-        await SpaceStore.instance.storeReadyPromise;
+        await SDKContextClass.instance.spaceStore.storeReadyPromise;
         const rooms = this.getRooms();
         this.roomSkipList.seed(rooms);
         this.emit(LISTS_LOADED_EVENT);
@@ -244,8 +272,16 @@ export class RoomListStoreV3Class extends AsyncStoreWithClient<EmptyObject> {
             }
 
             case "MatrixActions.Room.tags": {
+                // Re-sort on any tag change, but don't emit ROOM_TAGGED_EVENT here: the js-sdk
+                // re-emits RoomEvent.Tags for every m.tag on every sync, which would show a spurious
+                // "chat moved" toast on load. It is emitted from tagRoom.success below instead.
                 const room = payload.room;
                 this.addRoomAndEmit(room);
+                break;
+            }
+
+            case "RoomListActions.tagRoom.success": {
+                // Tag change initiated by the local user, so surface the "chat moved" toast.
                 this.emit(ROOM_TAGGED_EVENT);
                 break;
             }
@@ -465,14 +501,16 @@ export class RoomListStoreV3Class extends AsyncStoreWithClient<EmptyObject> {
      * @returns An array of sections
      */
     private getSections(filterKeys?: FilterKey[]): Section[] {
-        return this.sortedTags.map((tag) => {
-            const filters = filterBoolean([this.filterByTag.get(tag)?.key, ...(filterKeys || [])]);
+        return this.sortedTags
+            .map((tag) => {
+                const filters = filterBoolean([this.filterByTag.get(tag)?.key, ...(filterKeys ?? [])]);
 
-            return {
-                tag,
-                rooms: Array.from(this.roomSkipList?.getRoomsInActiveSpace(filters) || []),
-            };
-        });
+                return {
+                    tag,
+                    rooms: Array.from(this.roomSkipList?.getRoomsInActiveSpace(filters) || []),
+                };
+            })
+            .filter((section) => !filterKeys || section.rooms.length > 0);
     }
 
     /**
@@ -492,7 +530,7 @@ export class RoomListStoreV3Class extends AsyncStoreWithClient<EmptyObject> {
      * Emits {@link SECTION_CREATED_EVENT} if the section was successfully created.
      */
     public async createSection(): Promise<string | undefined> {
-        const tag = await createSection();
+        const tag = await createSection(SDKContextClass.instance.spaceStore.activeSpace);
         if (!tag) return;
         this.emit(SECTION_CREATED_EVENT, tag);
         return tag;
@@ -517,6 +555,15 @@ export class RoomListStoreV3Class extends AsyncStoreWithClient<EmptyObject> {
         this.scheduleEmit();
     }
 
+    /**
+     * Reorder custom sections by moving sourceTag to the position of targetTag.
+     * @param sourceTag The tag of the section to move
+     * @param targetTag The tag of the section to move to
+     */
+    public async reorderSection(sourceTag: string, targetTag: string): Promise<void> {
+        await reorderSection(sourceTag, targetTag);
+    }
+
     /**
      * Returns the ordered section tags.
      */
@@ -528,11 +575,14 @@ export class RoomListStoreV3Class extends AsyncStoreWithClient<EmptyObject> {
      * Load the custom sections from the settings store and update the sorted tags.
      */
     private loadCustomSections(): void {
-        const orderedCustomSections = SettingsStore.getValue("RoomList.OrderedCustomSections");
-        this.sortedTags = [DefaultTagID.Favourite, ...orderedCustomSections, CHATS_TAG, DefaultTagID.LowPriority];
+        // Favourite is pinned to the top and LowPriority to the bottom. Everything in between
+        // (custom sections + Chats) is user-reorderable.
+        const reorderable = getOrderedReorderableSections();
+        this.sortedTags = [DefaultTagID.Favourite, ...reorderable, DefaultTagID.LowPriority];
     }
 }
 
+// oxlint-disable-next-line typescript/no-extraneous-class
 export default class RoomListStoreV3 {
     private static internalInstance: RoomListStoreV3Class;
 
diff --git a/apps/web/src/stores/room-list-v3/section.ts b/apps/web/src/stores/room-list-v3/section.ts
index 5cd4f97169..e8b8681b42 100644
--- a/apps/web/src/stores/room-list-v3/section.ts
+++ b/apps/web/src/stores/room-list-v3/section.ts
@@ -12,64 +12,213 @@ import SettingsStore from "../../settings/SettingsStore";
 import Modal from "../../Modal";
 import { CreateSectionDialog } from "../../components/views/dialogs/CreateSectionDialog";
 import { RemoveSectionDialog } from "../../components/views/dialogs/RemoveSectionDialog";
+import { DefaultTagID, type TagID } from "./skip-list/tag";
+import { isMetaSpace, MetaSpace, type SpaceKey } from "../spaces";
+import { SDKContextClass } from "../../contexts/SDKContextClass.ts";
 
-type Tag = string;
+/**
+ * A synthetic tag used to represent the "Chats" section, which contains
+ * every room that does not belong to any other explicit tag section.
+ */
+export const CHATS_TAG = "chats";
 
 /**
  * Prefix for custom section tags.
  */
 export const CUSTOM_SECTION_TAG_PREFIX = "element.io.section.";
 
+type CustomTag = `${typeof CUSTOM_SECTION_TAG_PREFIX}${string}`;
+
 /**
  * Checks if a given tag is a custom section tag.
  * @param tag - The tag to check.
  * @returns True if the tag is a custom section tag, false otherwise.
  */
-export function isCustomSectionTag(tag: string): boolean {
+export function isCustomSectionTag(tag: string): tag is CustomTag {
     return tag.startsWith(CUSTOM_SECTION_TAG_PREFIX);
 }
 
+/**
+ * Checks if a given tag is a default section tag.
+ * @param tagId - The tag to check.
+ * @returns True if the tag is a default section tag, false otherwise.
+ */
+export function isDefaultSectionTag(tagId: TagID): boolean {
+    return tagId === DefaultTagID.Favourite || tagId === DefaultTagID.LowPriority || tagId === CHATS_TAG;
+}
+
+/**
+ * Checks if a given tag is a section tag.
+ * @param tagId - The tag to check.
+ * @returns True if the tag is a section tag, false otherwise.
+ */
+export function isSectionTag(tagId: TagID): boolean {
+    return isCustomSectionTag(tagId) || isDefaultSectionTag(tagId);
+}
+
 /**
  * Structure of the custom section stored in the settings. The tag is used as a unique identifier for the section, and the name is given by the user.
  */
 type CustomSection = {
-    tag: Tag;
+    tag: CustomTag;
     name: string;
+    /** The space in which this section was created. Used to control visibility of empty sections. */
+    spaceId?: SpaceKey;
 };
 
+/**
+ * Type guard to check if a value is a valid CustomSection object.
+ */
+function isValidCustomSection(value: unknown): value is CustomSection {
+    return (
+        typeof value === "object" &&
+        value !== null &&
+        isCustomSectionTag((value as Record<string, unknown>).tag as string) &&
+        typeof (value as Record<string, unknown>).name === "string"
+    );
+}
+
 /**
  * The custom sections data is stored as a record in the settings, where the key is the section tag and the value is the section data (name and tag).
  */
-export type CustomSectionsData = Record<Tag, CustomSection>;
+export type CustomSectionsData = Record<CustomTag, CustomSection>;
+
 /**
  * Ordered list of custom section tags.
  */
-export type OrderedCustomSections = Tag[];
+export type OrderedCustomSections = CustomTag[];
+
+/**
+ * Tags that can be reordered relative to each other (everything except Favourite and LowPriority,
+ * which are pinned to the top and bottom respectively).
+ */
+export type ReorderableSection = CustomTag | typeof CHATS_TAG;
+
+/**
+ * Returns true if the given tag is a tag that can be reordered (custom section or the Chats tag).
+ */
+function isReorderableSection(tag: string, customData: CustomSectionsData): tag is ReorderableSection {
+    return tag === CHATS_TAG || (isCustomSectionTag(tag) && tag in customData);
+}
+
+/**
+ * Returns true if the given space key corresponds to an enabled meta-space or a known top-level space room.
+ */
+function doesSpaceExist(spaceId: SpaceKey): boolean {
+    if (isMetaSpace(spaceId)) return SDKContextClass.instance.spaceStore.enabledMetaSpaces.includes(spaceId);
+    return SDKContextClass.instance.spaceStore.spacePanelSpaces.some((room) => room.roomId === spaceId);
+}
+
+/**
+ * Retrieves the custom sections data from the settings.
+ * Invalid or malformed entries are dropped and the cleaned data is persisted back to settings.
+ */
+export function getCustomSectionData(): CustomSectionsData {
+    const raw = SettingsStore.getValue("RoomList.CustomSectionData");
+    // Data are malformed
+    if (typeof raw !== "object" || raw === null || Array.isArray(raw)) return {};
+
+    return Object.fromEntries(
+        Object.entries(raw)
+            .filter(([key, value]) => isValidCustomSection(value) && value.tag === key)
+            .map(([key, value]) => [
+                key,
+                {
+                    ...value,
+                    // Default to MetaSpace.Home for legacy sections (no spaceId) or if the stored space no longer exists
+                    spaceId: value.spaceId && doesSpaceExist(value.spaceId) ? value.spaceId : MetaSpace.Home,
+                },
+            ]),
+    ) satisfies CustomSectionsData;
+}
+
+/**
+ * Persisted expanded/collapsed state of the room list sections, stored per space then per section tag.
+ */
+export type SectionExpansionState = { [spaceId: string]: { [sectionTag: string]: boolean } };
+
+/**
+ * Returns whether the section with the given tag is expanded in the given space.
+ * Defaults to expanded when no state has been persisted.
+ * @param spaceId - The id of the space.
+ * @param tag - The tag of the section.
+ */
+export function isSectionExpanded(spaceId: string, tag: string): boolean {
+    return SettingsStore.getValue("RoomList.SectionExpansionState")[spaceId]?.[tag] ?? true;
+}
+
+/**
+ * Persists the expanded/collapsed state of a section for a given space at the device level.
+ * @param spaceId - The id of the space.
+ * @param tag - The tag of the section.
+ * @param expanded - Whether the section is expanded.
+ */
+export async function setSectionExpanded(spaceId: string, tag: string, expanded: boolean): Promise<void> {
+    const state = SettingsStore.getValue("RoomList.SectionExpansionState");
+    const newState: SectionExpansionState = {
+        ...state,
+        [spaceId]: { ...state[spaceId], [tag]: expanded },
+    };
+    await SettingsStore.setValue("RoomList.SectionExpansionState", null, SettingLevel.DEVICE, newState);
+}
+
+/**
+ * Retrieves the ordered list of custom section tags from the settings.
+ * If the settings contain tags that are not present in the custom section data, they will be filtered out and the settings will be updated to remove the unknown tags.
+ *
+ * @knipignore - exported for tests
+ */
+export function getOrderedCustomSections(): OrderedCustomSections {
+    const sectionData = getCustomSectionData();
+    const rawValue = SettingsStore.getValue("RoomList.OrderedCustomSections");
+    const orderedSections = Array.isArray(rawValue) ? rawValue : [];
+    return orderedSections.filter((tag): tag is CustomTag => isCustomSectionTag(tag) && tag in sectionData);
+}
+
+/**
+ * Returns the ordered list of reorderable section tags (custom sections + the Chats tag).
+ * Favourite and LowPriority are not included — they are pinned at the top and bottom respectively.
+ *
+ * If `CHATS_TAG` is missing from the stored order (e.g. legacy data or a freshly created custom
+ * section), it is appended at the end so that custom sections sit above Chats by default.
+ */
+export function getOrderedReorderableSections(): ReorderableSection[] {
+    const sectionData = getCustomSectionData();
+    const rawValue = SettingsStore.getValue("RoomList.OrderedCustomSections");
+    const stored = Array.isArray(rawValue) ? rawValue : [];
+
+    const result = stored.filter((tag): tag is ReorderableSection => isReorderableSection(tag, sectionData));
+    if (!result.includes(CHATS_TAG)) result.push(CHATS_TAG);
+    return result;
+}
 
 /**
  * Creates a new custom section by showing a dialog to the user to enter the section name.
  * If the user confirms, it generates a unique tag for the section, saves the section data in the settings, and updates the ordered list of sections.
  *
- * @return A promise that resolves to the new section tag if created, or undefined if cancelled.
+ * @param spaceId The space in which the section is being created. Used to control visibility of the empty section.
+ * @returns A promise that resolves to the new section tag if created, or undefined if cancelled.
  */
-export async function createSection(): Promise<string | undefined> {
+export async function createSection(spaceId: SpaceKey): Promise<string | undefined> {
     const modal = Modal.createDialog(CreateSectionDialog);
 
     const [shouldCreateSection, sectionName] = await modal.finished;
     if (!shouldCreateSection || !sectionName) return undefined;
 
-    const tag = `${CUSTOM_SECTION_TAG_PREFIX}${window.crypto.randomUUID()}`;
-    const newSection: CustomSection = { tag, name: sectionName };
+    const tag: CustomTag = `${CUSTOM_SECTION_TAG_PREFIX}${window.crypto.randomUUID()}`;
+    const newSection: CustomSection = { tag, name: sectionName, spaceId };
 
     // Save the new section data
-    const sectionData = SettingsStore.getValue("RoomList.CustomSectionData") || {};
+    const sectionData = getCustomSectionData();
     sectionData[tag] = newSection;
     await SettingsStore.setValue("RoomList.CustomSectionData", null, SettingLevel.ACCOUNT, sectionData);
 
-    // Add the new section to the ordered list of sections
-    const orderedSections = SettingsStore.getValue("RoomList.OrderedCustomSections") || [];
-    orderedSections.push(tag);
-    await SettingsStore.setValue("RoomList.OrderedCustomSections", null, SettingLevel.ACCOUNT, orderedSections);
+    // Add the new section to the ordered list of reorderable sections, just before CHATS_TAG
+    // so that newly-created sections appear above Chats by default.
+    const reorderable = getOrderedReorderableSections();
+    const chatsIndex = reorderable.indexOf(CHATS_TAG);
+    reorderable.splice(chatsIndex === -1 ? reorderable.length : chatsIndex, 0, tag);
+    await SettingsStore.setValue("RoomList.OrderedCustomSections", null, SettingLevel.ACCOUNT, reorderable);
     return tag;
 }
 
@@ -78,7 +227,11 @@ export async function createSection(): Promise<string | undefined> {
  * @param tag - The tag of the section to edit.
  */
 export async function editSection(tag: string): Promise<void> {
-    const sectionData = SettingsStore.getValue("RoomList.CustomSectionData") || {};
+    if (!isCustomSectionTag(tag)) {
+        logger.info("Unknown section tag, cannot edit section", tag);
+        return;
+    }
+    const sectionData = getCustomSectionData();
     const section = sectionData[tag];
     if (!section) {
         logger.info("Unknown section tag, cannot edit section", tag);
@@ -102,7 +255,11 @@ export async function editSection(tag: string): Promise<void> {
  * @param isEmpty - Whether the section is empty (has no rooms). If the section is not empty, the confirmation dialog will show a warning message.
  */
 export async function deleteSection(tag: string, isEmpty: boolean): Promise<void> {
-    const sectionData = SettingsStore.getValue("RoomList.CustomSectionData");
+    if (!isCustomSectionTag(tag)) {
+        logger.info("Unknown section tag, cannot delete section", tag);
+        return;
+    }
+    const sectionData = getCustomSectionData();
     if (!sectionData[tag]) {
         logger.info("Unknown section tag, cannot delete section", tag);
         return;
@@ -112,12 +269,35 @@ export async function deleteSection(tag: string, isEmpty: boolean): Promise<void
     const [shouldRemoveSection] = await modal.finished;
     if (!shouldRemoveSection) return;
 
-    // Remove the section from the ordered list of sections
-    const orderedSections = SettingsStore.getValue("RoomList.OrderedCustomSections");
-    const newOrderedSections = orderedSections.filter((sectionTag) => sectionTag !== tag);
+    // Remove the section from the ordered list of reorderable sections (preserves CHATS_TAG position)
+    const newOrderedSections = getOrderedReorderableSections().filter((sectionTag) => sectionTag !== tag);
     await SettingsStore.setValue("RoomList.OrderedCustomSections", null, SettingLevel.ACCOUNT, newOrderedSections);
 
     // Remove the section data
     delete sectionData[tag];
     await SettingsStore.setValue("RoomList.CustomSectionData", null, SettingLevel.ACCOUNT, sectionData);
 }
+
+/**
+ * Reorders sections by moving sourceTag relative to targetTag within the set of reorderable
+ * sections (custom sections and the Chats tag). Favourite and LowPriority are not reorderable
+ * and are rejected as either source or target.
+ *
+ * If the source was below the target, it is inserted before the target; otherwise after.
+ * @param sourceTag - The tag of the section to move.
+ * @param targetTag - The tag of the section to move relative to.
+ */
+export async function reorderSection(sourceTag: string, targetTag: string): Promise<void> {
+    const ordered = getOrderedReorderableSections();
+    const fromIndex = ordered.indexOf(sourceTag as ReorderableSection);
+
+    if (fromIndex === -1 || !ordered.includes(targetTag as ReorderableSection) || sourceTag === targetTag) return;
+
+    const toIndex = ordered.indexOf(targetTag as ReorderableSection);
+    const insertBefore = fromIndex > toIndex;
+
+    ordered.splice(fromIndex, 1);
+    const newToIndex = ordered.indexOf(targetTag as ReorderableSection);
+    ordered.splice(insertBefore ? newToIndex : newToIndex + 1, 0, sourceTag as ReorderableSection);
+    await SettingsStore.setValue("RoomList.OrderedCustomSections", null, SettingLevel.ACCOUNT, ordered);
+}
diff --git a/apps/web/src/stores/room-list-v3/skip-list/RoomNode.ts b/apps/web/src/stores/room-list-v3/skip-list/RoomNode.ts
index 6fbcb65588..3e44d21d4a 100644
--- a/apps/web/src/stores/room-list-v3/skip-list/RoomNode.ts
+++ b/apps/web/src/stores/room-list-v3/skip-list/RoomNode.ts
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 import type { Room } from "matrix-js-sdk/src/matrix";
 import type { Filter, FilterKey } from "./filters";
-import SpaceStore from "../../spaces/SpaceStore";
+import { SDKContextClass } from "../../../contexts/SDKContextClass.ts";
 
 /**
  * Room skip list stores room nodes.
@@ -34,7 +34,7 @@ export class RoomNode {
     /**
      * Whether the room associated with this room node belongs to
      * the currently active space.
-     * @see {@link SpaceStoreClass#activeSpace} to understand what active
+     * @see {@link SpaceStore#activeSpace} to understand what active
      * space means.
      */
     public get isInActiveSpace(): boolean {
@@ -46,8 +46,8 @@ export class RoomNode {
      * in {@link RoomNode#isInActiveSpace}.
      */
     public checkIfRoomBelongsToActiveSpace(): void {
-        const activeSpace = SpaceStore.instance.activeSpace;
-        this._isInActiveSpace = SpaceStore.instance.isRoomInSpace(activeSpace, this.room.roomId);
+        const activeSpace = SDKContextClass.instance.spaceStore.activeSpace;
+        this._isInActiveSpace = SDKContextClass.instance.spaceStore.isRoomInSpace(activeSpace, this.room.roomId);
     }
 
     /**
diff --git a/apps/web/src/stores/room-list-v3/skip-list/RoomSkipList.ts b/apps/web/src/stores/room-list-v3/skip-list/RoomSkipList.ts
index dfa5b678e0..5ee86aefc9 100644
--- a/apps/web/src/stores/room-list-v3/skip-list/RoomSkipList.ts
+++ b/apps/web/src/stores/room-list-v3/skip-list/RoomSkipList.ts
@@ -6,6 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import type { Room } from "matrix-js-sdk/src/matrix";
+import { logger } from "matrix-js-sdk/src/logger";
 import type { Sorter, SortingAlgorithm } from "./sorters";
 import type { Filter, FilterKey } from "./filters";
 import { RoomNode } from "./RoomNode";
@@ -115,12 +116,13 @@ export class RoomSkipList implements Iterable<Room> {
 
     /**
      * Adds a new room to the skiplist.
-     * This method will throw an error if the room is already in the skiplist.
+     * This method does nothing if the room is already in the skiplist.
      * @param room the room to add
      */
     public addNewRoom(room: Room): void {
         if (this.roomNodeMap.has(room.roomId)) {
-            throw new Error(`Can't add room to skiplist: ${room.roomId} is already in the skiplist!`);
+            logger.error(`Can't add room to skiplist: ${room.roomId} is already in the skiplist!`);
+            return;
         }
         this.insertRoom(room);
     }
diff --git a/apps/web/src/stores/room-list-v3/skip-list/tag.ts b/apps/web/src/stores/room-list-v3/skip-list/tag.ts
index 03a9315fc7..f81255ca6a 100644
--- a/apps/web/src/stores/room-list-v3/skip-list/tag.ts
+++ b/apps/web/src/stores/room-list-v3/skip-list/tag.ts
@@ -17,7 +17,6 @@ export enum DefaultTagID {
     DM = "im.vector.fake.direct",
     Conference = "im.vector.fake.conferences",
     ServerNotice = "m.server_notice",
-    Suggested = "im.vector.fake.suggested",
 }
 
 /**
diff --git a/apps/web/src/stores/room-list-v3/utils.ts b/apps/web/src/stores/room-list-v3/utils.ts
index 614368b36d..2f7c0637b6 100644
--- a/apps/web/src/stores/room-list-v3/utils.ts
+++ b/apps/web/src/stores/room-list-v3/utils.ts
@@ -32,10 +32,8 @@ export const getChangedOverrideRoomMutePushRules = (actionPayload: ActionPayload
         return undefined;
     }
 
-    const roomPushRules = (event.getContent() as IPushRules)?.global?.override?.filter(isRuleMaybeRoomMuteRule);
-    const prevRoomPushRules = (prevEvent?.getContent() as IPushRules)?.global?.override?.filter(
-        isRuleMaybeRoomMuteRule,
-    );
+    const roomPushRules = event.getContent<IPushRules>()?.global?.override?.filter(isRuleMaybeRoomMuteRule);
+    const prevRoomPushRules = prevEvent?.getContent<IPushRules>()?.global?.override?.filter(isRuleMaybeRoomMuteRule);
 
     const { added, removed } = arrayDiff(
         prevRoomPushRules?.map((rule) => rule.rule_id) || [],
diff --git a/apps/web/src/stores/room-list/Interface.ts b/apps/web/src/stores/room-list/Interface.ts
deleted file mode 100644
index d4265ef076..0000000000
--- a/apps/web/src/stores/room-list/Interface.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import type { Room } from "matrix-js-sdk/src/matrix";
-import type { EventEmitter } from "events";
-import { type ITagMap, type ListAlgorithm, type SortAlgorithm } from "./algorithms/models";
-import { type RoomUpdateCause } from "./models";
-import { type TagID } from "../room-list-v3/skip-list/tag";
-import { type IFilterCondition } from "./filters/IFilterCondition";
-
-export enum RoomListStoreEvent {
-    // The event/channel which is called when the room lists have been changed.
-    ListsUpdate = "lists_update",
-    // The event which is called when the room list is loading.
-    // Called with the (tagId, bool) which is true when the list is loading, else false.
-    ListsLoading = "lists_loading",
-}
-
-export interface RoomListStore extends EventEmitter {
-    /**
-     * Gets an ordered set of rooms for the all known tags.
-     * @returns {ITagMap} The cached list of rooms, ordered,
-     * for each tag. May be empty, but never null/undefined.
-     */
-    get orderedLists(): ITagMap;
-
-    /**
-     * Return the total number of rooms in this list. Prefer this method to
-     * RoomListStore.orderedLists[tagId].length because the client may not
-     * be aware of all the rooms in this list (e.g in Sliding Sync).
-     * @param tagId the tag to get the room count for.
-     * @returns the number of rooms in this list, or 0 if the list is unknown.
-     */
-    getCount(tagId: TagID): number;
-
-    /**
-     * Set the sort algorithm for the specified tag.
-     * @param tagId the tag to set the algorithm for
-     * @param sort the sort algorithm to set to
-     */
-    setTagSorting(tagId: TagID, sort: SortAlgorithm): void;
-
-    /**
-     * Get the sort algorithm for the specified tag.
-     * @param tagId tag to get the sort algorithm for
-     * @returns the sort algorithm
-     */
-    getTagSorting(tagId: TagID): SortAlgorithm | null;
-
-    /**
-     * Set the list algorithm for the specified tag.
-     * @param tagId the tag to set the algorithm for
-     * @param order the list algorithm to set to
-     */
-    setListOrder(tagId: TagID, order: ListAlgorithm): void;
-
-    /**
-     * Get the list algorithm for the specified tag.
-     * @param tagId tag to get the list algorithm for
-     * @returns the list algorithm
-     */
-    getListOrder(tagId: TagID): ListAlgorithm | null;
-
-    /**
-     * Regenerates the room whole room list, discarding any previous results.
-     *
-     * Note: This is only exposed externally for the tests. Do not call this from within
-     * the app.
-     * @param params.trigger Set to false to prevent a list update from being sent. Should only
-     * be used if the calling code will manually trigger the update.
-     */
-    regenerateAllLists(params: { trigger: boolean }): void;
-
-    /**
-     * Adds a filter condition to the room list store. Filters may be applied async,
-     * and thus might not cause an update to the store immediately.
-     * @param {IFilterCondition} filter The filter condition to add.
-     */
-    addFilter(filter: IFilterCondition): Promise<void>;
-
-    /**
-     * Removes a filter condition from the room list store. If the filter was
-     * not previously added to the room list store, this will no-op. The effects
-     * of removing a filter may be applied async and therefore might not cause
-     * an update right away.
-     * @param {IFilterCondition} filter The filter condition to remove.
-     */
-    removeFilter(filter: IFilterCondition): void;
-
-    /**
-     * Manually update a room with a given cause. This should only be used if the
-     * room list store would otherwise be incapable of doing the update itself. Note
-     * that this may race with the room list's regular operation.
-     * @param {Room} room The room to update.
-     * @param {RoomUpdateCause} cause The cause to update for.
-     */
-    manualRoomUpdate(room: Room, cause: RoomUpdateCause): Promise<void>;
-}
diff --git a/apps/web/src/stores/room-list/ListLayout.ts b/apps/web/src/stores/room-list/ListLayout.ts
deleted file mode 100644
index 1723bc5c32..0000000000
--- a/apps/web/src/stores/room-list/ListLayout.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { type TagID } from "../room-list-v3/skip-list/tag";
-
-const TILE_HEIGHT_PX = 44;
-
-interface ISerializedListLayout {
-    numTiles: number;
-    showPreviews: boolean;
-    collapsed: boolean;
-}
-
-export class ListLayout {
-    private _n = 0;
-    private _previews = false;
-    private _collapsed = false;
-
-    public constructor(public readonly tagId: TagID) {
-        const serialized = localStorage.getItem(this.key);
-        if (serialized) {
-            // We don't use the setters as they cause writes.
-            const parsed = <ISerializedListLayout>JSON.parse(serialized);
-            this._n = parsed.numTiles;
-            this._previews = parsed.showPreviews;
-            this._collapsed = parsed.collapsed;
-        }
-    }
-
-    public get isCollapsed(): boolean {
-        return this._collapsed;
-    }
-
-    public set isCollapsed(v: boolean) {
-        this._collapsed = v;
-        this.save();
-    }
-
-    public get showPreviews(): boolean {
-        return this._previews;
-    }
-
-    public set showPreviews(v: boolean) {
-        this._previews = v;
-        this.save();
-    }
-
-    public get tileHeight(): number {
-        return TILE_HEIGHT_PX;
-    }
-
-    private get key(): string {
-        return `mx_sublist_layout_${this.tagId}_boxed`;
-    }
-
-    public get visibleTiles(): number {
-        if (this._n === 0) return this.defaultVisibleTiles;
-        return Math.max(this._n, this.minVisibleTiles);
-    }
-
-    public set visibleTiles(v: number) {
-        this._n = v;
-        this.save();
-    }
-
-    public get minVisibleTiles(): number {
-        return 1;
-    }
-
-    public get defaultVisibleTiles(): number {
-        // This number is what "feels right", and mostly subject to design's opinion.
-        return 8;
-    }
-
-    public tilesWithPadding(n: number, paddingPx: number): number {
-        return this.pixelsToTiles(this.tilesToPixelsWithPadding(n, paddingPx));
-    }
-
-    public tilesToPixelsWithPadding(n: number, paddingPx: number): number {
-        return this.tilesToPixels(n) + paddingPx;
-    }
-
-    public tilesToPixels(n: number): number {
-        return n * this.tileHeight;
-    }
-
-    public pixelsToTiles(px: number): number {
-        return px / this.tileHeight;
-    }
-
-    public reset(): void {
-        localStorage.removeItem(this.key);
-    }
-
-    private save(): void {
-        localStorage.setItem(this.key, JSON.stringify(this.serialize()));
-    }
-
-    private serialize(): ISerializedListLayout {
-        return {
-            numTiles: this.visibleTiles,
-            showPreviews: this.showPreviews,
-            collapsed: this.isCollapsed,
-        };
-    }
-}
diff --git a/apps/web/src/stores/room-list/RoomListLayoutStore.ts b/apps/web/src/stores/room-list/RoomListLayoutStore.ts
deleted file mode 100644
index 16c7fba070..0000000000
--- a/apps/web/src/stores/room-list/RoomListLayoutStore.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { logger } from "matrix-js-sdk/src/logger";
-import { type EmptyObject } from "matrix-js-sdk/src/matrix";
-
-import { type TagID } from "../room-list-v3/skip-list/tag";
-import { ListLayout } from "./ListLayout";
-import { AsyncStoreWithClient } from "../AsyncStoreWithClient";
-import defaultDispatcher from "../../dispatcher/dispatcher";
-import { type ActionPayload } from "../../dispatcher/payloads";
-
-export default class RoomListLayoutStore extends AsyncStoreWithClient<EmptyObject> {
-    private static internalInstance: RoomListLayoutStore;
-
-    private readonly layoutMap = new Map<TagID, ListLayout>();
-
-    public constructor() {
-        super(defaultDispatcher);
-    }
-
-    public static get instance(): RoomListLayoutStore {
-        if (!this.internalInstance) {
-            this.internalInstance = new RoomListLayoutStore();
-            this.internalInstance.start();
-        }
-        return RoomListLayoutStore.internalInstance;
-    }
-
-    public ensureLayoutExists(tagId: TagID): void {
-        if (!this.layoutMap.has(tagId)) {
-            this.layoutMap.set(tagId, new ListLayout(tagId));
-        }
-    }
-
-    public getLayoutFor(tagId: TagID): ListLayout {
-        if (!this.layoutMap.has(tagId)) {
-            this.layoutMap.set(tagId, new ListLayout(tagId));
-        }
-        return this.layoutMap.get(tagId)!;
-    }
-
-    // Note: this primarily exists for debugging, and isn't really intended to be used by anything.
-    public async resetLayouts(): Promise<void> {
-        logger.warn("Resetting layouts for room list");
-        for (const layout of this.layoutMap.values()) {
-            layout.reset();
-        }
-    }
-
-    protected async onNotReady(): Promise<any> {
-        // On logout, clear the map.
-        this.layoutMap.clear();
-    }
-
-    // We don't need this function, but our contract says we do
-    protected async onAction(payload: ActionPayload): Promise<void> {}
-}
-
-window.mxRoomListLayoutStore = RoomListLayoutStore.instance;
diff --git a/apps/web/src/stores/room-list/RoomListStore.ts b/apps/web/src/stores/room-list/RoomListStore.ts
deleted file mode 100644
index fc2343d441..0000000000
--- a/apps/web/src/stores/room-list/RoomListStore.ts
+++ /dev/null
@@ -1,632 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2018-2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { type MatrixClient, type Room, EventType, type EmptyObject } from "matrix-js-sdk/src/matrix";
-import { logger } from "matrix-js-sdk/src/logger";
-
-import SettingsStore from "../../settings/SettingsStore";
-import { OrderedDefaultTagIDs, RoomUpdateCause } from "./models";
-import {
-    type IListOrderingMap,
-    type ITagMap,
-    type ITagSortingMap,
-    ListAlgorithm,
-    SortAlgorithm,
-} from "./algorithms/models";
-import { type ActionPayload } from "../../dispatcher/payloads";
-import defaultDispatcher, { type MatrixDispatcher } from "../../dispatcher/dispatcher";
-import { readReceiptChangeIsFor } from "../../utils/read-receipts";
-import { FILTER_CHANGED, type IFilterCondition } from "./filters/IFilterCondition";
-import { Algorithm, LIST_UPDATED_EVENT } from "./algorithms/Algorithm";
-import { EffectiveMembership, getEffectiveMembership, getEffectiveMembershipTag } from "../../utils/membership";
-import RoomListLayoutStore from "./RoomListLayoutStore";
-import { MarkedExecution } from "../../utils/MarkedExecution";
-import { AsyncStoreWithClient } from "../AsyncStoreWithClient";
-import { RoomNotificationStateStore } from "../notifications/RoomNotificationStateStore";
-import { isRoomVisible } from "../room-list-v3/isRoomVisible";
-import { SpaceWatcher } from "./SpaceWatcher";
-import { type IRoomTimelineActionPayload } from "../../actions/MatrixActionCreators";
-import { type RoomListStore as Interface, RoomListStoreEvent } from "./Interface";
-import { UPDATE_EVENT } from "../AsyncStore";
-import { SdkContextClass } from "../../contexts/SDKContext";
-import { getChangedOverrideRoomMutePushRules } from "../room-list-v3/utils";
-import { type TagID } from "../room-list-v3/skip-list/tag";
-
-export const LISTS_UPDATE_EVENT = RoomListStoreEvent.ListsUpdate;
-export const LISTS_LOADING_EVENT = RoomListStoreEvent.ListsLoading; // unused; used by SlidingRoomListStore
-
-export class RoomListStoreClass extends AsyncStoreWithClient<EmptyObject> implements Interface {
-    /**
-     * Set to true if you're running tests on the store. Should not be touched in
-     * any other environment.
-     */
-    public static TEST_MODE = false;
-
-    private initialListsGenerated = false;
-    private msc3946ProcessDynamicPredecessor: boolean;
-    private msc3946SettingWatcherRef: string;
-    private algorithm = new Algorithm();
-    private prefilterConditions: IFilterCondition[] = [];
-    private updateFn = new MarkedExecution(() => {
-        for (const tagId of Object.keys(this.orderedLists)) {
-            RoomNotificationStateStore.instance.getListState(tagId).setRooms(this.orderedLists[tagId]);
-        }
-        this.emit(LISTS_UPDATE_EVENT);
-    });
-
-    public constructor(dis: MatrixDispatcher) {
-        super(dis);
-        this.setMaxListeners(20); // RoomList + LeftPanel + 8xRoomSubList + spares
-        this.algorithm.start();
-
-        this.msc3946ProcessDynamicPredecessor = SettingsStore.getValue("feature_dynamic_room_predecessors");
-        this.msc3946SettingWatcherRef = SettingsStore.watchSetting(
-            "feature_dynamic_room_predecessors",
-            null,
-            (_settingName, _roomId, _level, _newValAtLevel, newVal) => {
-                this.msc3946ProcessDynamicPredecessor = !!newVal;
-                this.regenerateAllLists({ trigger: true });
-            },
-        );
-    }
-
-    public componentWillUnmount(): void {
-        SettingsStore.unwatchSetting(this.msc3946SettingWatcherRef);
-    }
-
-    private setupWatchers(): void {
-        // TODO: Maybe destroy this if this class supports destruction
-        new SpaceWatcher(this);
-    }
-
-    public get orderedLists(): ITagMap {
-        if (!this.algorithm) return {}; // No tags yet.
-        return this.algorithm.getOrderedRooms();
-    }
-
-    // Intended for test usage
-    public async resetStore(): Promise<void> {
-        await this.reset();
-        this.prefilterConditions = [];
-        this.initialListsGenerated = false;
-
-        this.algorithm.off(LIST_UPDATED_EVENT, this.onAlgorithmListUpdated);
-        this.algorithm.off(FILTER_CHANGED, this.onAlgorithmListUpdated);
-        this.algorithm.stop();
-        this.algorithm = new Algorithm();
-        this.algorithm.on(LIST_UPDATED_EVENT, this.onAlgorithmListUpdated);
-        this.algorithm.on(FILTER_CHANGED, this.onAlgorithmListUpdated);
-
-        // Reset state without causing updates as the client will have been destroyed
-        // and downstream code will throw NPE errors.
-        await this.reset(null, true);
-    }
-
-    // Public for test usage. Do not call this.
-    public async makeReady(forcedClient?: MatrixClient): Promise<void> {
-        if (forcedClient) {
-            this.readyStore.useUnitTestClient(forcedClient);
-        }
-
-        SdkContextClass.instance.roomViewStore.addListener(UPDATE_EVENT, () => this.handleRVSUpdate({}));
-        this.algorithm.on(LIST_UPDATED_EVENT, this.onAlgorithmListUpdated);
-        this.algorithm.on(FILTER_CHANGED, this.onAlgorithmFilterUpdated);
-        this.setupWatchers();
-
-        // Update any settings here, as some may have happened before we were logically ready.
-        logger.log("Regenerating room lists: Startup");
-        this.updateAlgorithmInstances();
-        this.regenerateAllLists({ trigger: false });
-        this.handleRVSUpdate({ trigger: false }); // fake an RVS update to adjust sticky room, if needed
-
-        this.updateFn.mark(); // we almost certainly want to trigger an update.
-        this.updateFn.trigger();
-    }
-
-    /**
-     * Handles suspected RoomViewStore changes.
-     * @param trigger Set to false to prevent a list update from being sent. Should only
-     * be used if the calling code will manually trigger the update.
-     */
-    private handleRVSUpdate({ trigger = true }): void {
-        if (!this.matrixClient) return; // We assume there won't be RVS updates without a client
-
-        const activeRoomId = SdkContextClass.instance.roomViewStore.getRoomId();
-        if (!activeRoomId && this.algorithm.stickyRoom) {
-            this.algorithm.setStickyRoom(null);
-        } else if (activeRoomId) {
-            const activeRoom = this.matrixClient.getRoom(activeRoomId);
-            if (!activeRoom) {
-                logger.warn(`${activeRoomId} is current in RVS but missing from client - clearing sticky room`);
-                this.algorithm.setStickyRoom(null);
-            } else if (activeRoom !== this.algorithm.stickyRoom) {
-                this.algorithm.setStickyRoom(activeRoom);
-            }
-        }
-
-        if (trigger) this.updateFn.trigger();
-    }
-
-    protected async onReady(): Promise<any> {
-        await this.makeReady();
-    }
-
-    protected async onNotReady(): Promise<any> {
-        await this.resetStore();
-    }
-
-    protected async onAction(payload: ActionPayload): Promise<void> {
-        // If we're not remotely ready, don't even bother scheduling the dispatch handling.
-        // This is repeated in the handler just in case things change between a decision here and
-        // when the timer fires.
-        const logicallyReady = this.matrixClient && this.initialListsGenerated;
-        if (!logicallyReady) return;
-
-        // When we're running tests we can't reliably use setImmediate out of timing concerns.
-        // As such, we use a more synchronous model.
-        if (RoomListStoreClass.TEST_MODE) {
-            await this.onDispatchAsync(payload);
-            return;
-        }
-
-        // We do this to intentionally break out of the current event loop task, allowing
-        // us to instead wait for a more convenient time to run our updates.
-        setTimeout(() => this.onDispatchAsync(payload));
-    }
-
-    protected async onDispatchAsync(payload: ActionPayload): Promise<void> {
-        // Everything here requires a MatrixClient or some sort of logical readiness.
-        if (!this.matrixClient || !this.initialListsGenerated) return;
-
-        if (!this.algorithm) {
-            // This shouldn't happen because `initialListsGenerated` implies we have an algorithm.
-            throw new Error("Room list store has no algorithm to process dispatcher update with");
-        }
-
-        if (payload.action === "MatrixActions.Room.receipt") {
-            // First see if the receipt event is for our own user. If it was, trigger
-            // a room update (we probably read the room on a different device).
-            if (readReceiptChangeIsFor(payload.event, this.matrixClient)) {
-                const room = payload.room;
-                if (!room) {
-                    logger.warn(`Own read receipt was in unknown room ${room.roomId}`);
-                    return;
-                }
-                await this.handleRoomUpdate(room, RoomUpdateCause.ReadReceipt);
-                this.updateFn.trigger();
-                return;
-            }
-        } else if (payload.action === "MatrixActions.Room.tags") {
-            const roomPayload = <any>payload; // TODO: Type out the dispatcher types
-            await this.handleRoomUpdate(roomPayload.room, RoomUpdateCause.PossibleTagChange);
-            this.updateFn.trigger();
-        } else if (payload.action === "MatrixActions.Room.timeline") {
-            const eventPayload = <IRoomTimelineActionPayload>payload;
-
-            // Ignore non-live events (backfill) and notification timeline set events (without a room)
-            if (!eventPayload.isLiveEvent || !eventPayload.isLiveUnfilteredRoomTimelineEvent || !eventPayload.room) {
-                return;
-            }
-
-            const roomId = eventPayload.event.getRoomId();
-            const room = this.matrixClient.getRoom(roomId);
-            const tryUpdate = async (updatedRoom: Room): Promise<void> => {
-                if (
-                    eventPayload.event.getType() === EventType.RoomTombstone &&
-                    eventPayload.event.getStateKey() === ""
-                ) {
-                    const newRoom = this.matrixClient?.getRoom(eventPayload.event.getContent()["replacement_room"]);
-                    if (newRoom) {
-                        // If we have the new room, then the new room check will have seen the predecessor
-                        // and did the required updates, so do nothing here.
-                        return;
-                    }
-                }
-                // If the join rule changes we need to update the tags for the room.
-                // A conference tag is determined by the room public join rule.
-                if (eventPayload.event.getType() === EventType.RoomJoinRules)
-                    await this.handleRoomUpdate(updatedRoom, RoomUpdateCause.PossibleTagChange);
-                else await this.handleRoomUpdate(updatedRoom, RoomUpdateCause.Timeline);
-
-                this.updateFn.trigger();
-            };
-            if (!room) {
-                logger.warn(`Live timeline event ${eventPayload.event.getId()} received without associated room`);
-                logger.warn(`Queuing failed room update for retry as a result.`);
-                window.setTimeout(async (): Promise<void> => {
-                    const updatedRoom = this.matrixClient?.getRoom(roomId);
-
-                    if (updatedRoom) {
-                        await tryUpdate(updatedRoom);
-                    }
-                }, 100); // 100ms should be enough for the room to show up
-                return;
-            } else {
-                await tryUpdate(room);
-            }
-        } else if (payload.action === "MatrixActions.Event.decrypted") {
-            const eventPayload = <any>payload; // TODO: Type out the dispatcher types
-            const roomId = eventPayload.event.getRoomId();
-            if (!roomId) {
-                return;
-            }
-            const room = this.matrixClient.getRoom(roomId);
-            if (!room) {
-                logger.warn(`Event ${eventPayload.event.getId()} was decrypted in an unknown room ${roomId}`);
-                return;
-            }
-            await this.handleRoomUpdate(room, RoomUpdateCause.Timeline);
-            this.updateFn.trigger();
-        } else if (payload.action === "MatrixActions.accountData" && payload.event_type === EventType.Direct) {
-            const eventPayload = <any>payload; // TODO: Type out the dispatcher types
-            const dmMap = eventPayload.event.getContent();
-            for (const userId of Object.keys(dmMap)) {
-                const roomIds = dmMap[userId];
-                for (const roomId of roomIds) {
-                    const room = this.matrixClient.getRoom(roomId);
-                    if (!room) {
-                        logger.warn(`${roomId} was found in DMs but the room is not in the store`);
-                        continue;
-                    }
-
-                    // We expect this RoomUpdateCause to no-op if there's no change, and we don't expect
-                    // the user to have hundreds of rooms to update in one event. As such, we just hammer
-                    // away at updates until the problem is solved. If we were expecting more than a couple
-                    // of rooms to be updated at once, we would consider batching the rooms up.
-                    await this.handleRoomUpdate(room, RoomUpdateCause.PossibleTagChange);
-                }
-            }
-            this.updateFn.trigger();
-        } else if (payload.action === "MatrixActions.Room.myMembership") {
-            this.onDispatchMyMembership(<any>payload);
-            return;
-        }
-
-        const possibleMuteChangeRoomIds = getChangedOverrideRoomMutePushRules(payload);
-        if (possibleMuteChangeRoomIds) {
-            for (const roomId of possibleMuteChangeRoomIds) {
-                const room = roomId && this.matrixClient.getRoom(roomId);
-                if (room) {
-                    await this.handleRoomUpdate(room, RoomUpdateCause.PossibleMuteChange);
-                }
-            }
-            this.updateFn.trigger();
-        }
-    }
-
-    /**
-     * Handle a MatrixActions.Room.myMembership event from the dispatcher.
-     *
-     * Public for test.
-     */
-    public async onDispatchMyMembership(membershipPayload: any): Promise<void> {
-        // TODO: Type out the dispatcher types so membershipPayload is not any
-        const oldMembership = getEffectiveMembership(membershipPayload.oldMembership);
-        const newMembership = getEffectiveMembershipTag(membershipPayload.room, membershipPayload.membership);
-        if (oldMembership !== EffectiveMembership.Join && newMembership === EffectiveMembership.Join) {
-            // If we're joining an upgraded room, we'll want to make sure we don't proliferate the dead room in the list.
-            const room: Room = membershipPayload.room;
-            const roomUpgradeHistory = room.client.getRoomUpgradeHistory(
-                room.roomId,
-                true,
-                this.msc3946ProcessDynamicPredecessor,
-            );
-            const predecessors = roomUpgradeHistory.slice(0, roomUpgradeHistory.indexOf(room));
-            for (const predecessor of predecessors) {
-                const isSticky = this.algorithm.stickyRoom === predecessor;
-                if (isSticky) {
-                    this.algorithm.setStickyRoom(null);
-                }
-                // Note: we hit the algorithm instead of our handleRoomUpdate() function to
-                // avoid redundant updates.
-                this.algorithm.handleRoomUpdate(predecessor, RoomUpdateCause.RoomRemoved);
-            }
-
-            await this.handleRoomUpdate(membershipPayload.room, RoomUpdateCause.NewRoom);
-            this.updateFn.trigger();
-            return;
-        }
-
-        if (oldMembership !== EffectiveMembership.Invite && newMembership === EffectiveMembership.Invite) {
-            await this.handleRoomUpdate(membershipPayload.room, RoomUpdateCause.NewRoom);
-            this.updateFn.trigger();
-            return;
-        }
-
-        // If it's not a join, it's transitioning into a different list (possibly historical)
-        if (oldMembership !== newMembership) {
-            await this.handleRoomUpdate(membershipPayload.room, RoomUpdateCause.PossibleTagChange);
-            this.updateFn.trigger();
-            return;
-        }
-    }
-
-    private async handleRoomUpdate(room: Room, cause: RoomUpdateCause): Promise<any> {
-        if (!isRoomVisible(room)) {
-            return; // don't do anything on rooms that aren't visible
-        }
-
-        if (
-            (cause === RoomUpdateCause.NewRoom || cause === RoomUpdateCause.PossibleTagChange) &&
-            !this.prefilterConditions.every((c) => c.isVisible(room))
-        ) {
-            return; // don't do anything on new/moved rooms which ought not to be shown
-        }
-
-        const shouldUpdate = this.algorithm.handleRoomUpdate(room, cause);
-        if (shouldUpdate) {
-            this.updateFn.mark();
-        }
-    }
-
-    private async recalculatePrefiltering(): Promise<void> {
-        if (!this.algorithm) return;
-        if (!this.algorithm.hasTagSortingMap) return; // we're still loading
-
-        // Inhibit updates because we're about to lie heavily to the algorithm
-        this.algorithm.updatesInhibited = true;
-
-        // Figure out which rooms are about to be valid, and the state of affairs
-        const rooms = this.getPlausibleRooms();
-        const currentSticky = this.algorithm.stickyRoom;
-        const stickyIsStillPresent = currentSticky && rooms.includes(currentSticky);
-
-        // Reset the sticky room before resetting the known rooms so the algorithm
-        // doesn't freak out.
-        this.algorithm.setStickyRoom(null);
-        this.algorithm.setKnownRooms(rooms);
-
-        // Set the sticky room back, if needed, now that we have updated the store.
-        // This will use relative stickyness to the new room set.
-        if (stickyIsStillPresent) {
-            this.algorithm.setStickyRoom(currentSticky);
-        }
-
-        // Finally, mark an update and resume updates from the algorithm
-        this.updateFn.mark();
-        this.algorithm.updatesInhibited = false;
-    }
-
-    public setTagSorting(tagId: TagID, sort: SortAlgorithm): void {
-        this.setAndPersistTagSorting(tagId, sort);
-        // We'll always need an update after changing the sort order, so mark for update and trigger
-        // immediately.
-        this.updateFn.mark();
-        this.updateFn.trigger();
-    }
-
-    private setAndPersistTagSorting(tagId: TagID, sort: SortAlgorithm): void {
-        this.algorithm.setTagSorting(tagId, sort);
-        // TODO: Per-account? https://github.com/vector-im/element-web/issues/14114
-        localStorage.setItem(`mx_tagSort_${tagId}`, sort);
-    }
-
-    public getTagSorting(tagId: TagID): SortAlgorithm | null {
-        return this.algorithm.getTagSorting(tagId);
-    }
-
-    // noinspection JSMethodCanBeStatic
-    private getStoredTagSorting(tagId: TagID): SortAlgorithm {
-        // TODO: Per-account? https://github.com/vector-im/element-web/issues/14114
-        return <SortAlgorithm>localStorage.getItem(`mx_tagSort_${tagId}`);
-    }
-
-    // logic must match calculateListOrder
-    private calculateTagSorting(tagId: TagID): SortAlgorithm {
-        const definedSort = this.getTagSorting(tagId);
-        const storedSort = this.getStoredTagSorting(tagId);
-
-        // We use the following order to determine which of the 4 flags to use:
-        // Stored > Settings > Defined > Default
-
-        let tagSort = SortAlgorithm.Recent;
-        if (storedSort) {
-            tagSort = storedSort;
-        } else if (definedSort) {
-            tagSort = definedSort;
-        } // else default (already set)
-
-        return tagSort;
-    }
-
-    public setListOrder(tagId: TagID, order: ListAlgorithm): void {
-        this.setAndPersistListOrder(tagId, order);
-        this.updateFn.trigger();
-    }
-
-    private setAndPersistListOrder(tagId: TagID, order: ListAlgorithm): void {
-        this.algorithm.setListOrdering(tagId, order);
-        // TODO: Per-account? https://github.com/vector-im/element-web/issues/14114
-        localStorage.setItem(`mx_listOrder_${tagId}`, order);
-    }
-
-    public getListOrder(tagId: TagID): ListAlgorithm | null {
-        return this.algorithm.getListOrdering(tagId);
-    }
-
-    // noinspection JSMethodCanBeStatic
-    private getStoredListOrder(tagId: TagID): ListAlgorithm {
-        // TODO: Per-account? https://github.com/vector-im/element-web/issues/14114
-        return <ListAlgorithm>localStorage.getItem(`mx_listOrder_${tagId}`);
-    }
-
-    // logic must match calculateTagSorting
-    private calculateListOrder(tagId: TagID): ListAlgorithm {
-        const defaultOrder = ListAlgorithm.Natural;
-        const definedOrder = this.getListOrder(tagId);
-        const storedOrder = this.getStoredListOrder(tagId);
-
-        // We use the following order to determine which of the 4 flags to use:
-        // Stored > Settings > Defined > Default
-
-        let listOrder = defaultOrder;
-        if (storedOrder) {
-            listOrder = storedOrder;
-        } else if (definedOrder) {
-            listOrder = definedOrder;
-        } // else default (already set)
-
-        return listOrder;
-    }
-
-    private updateAlgorithmInstances(): void {
-        // We'll require an update, so mark for one. Marking now also prevents the calls
-        // to setTagSorting and setListOrder from causing triggers.
-        this.updateFn.mark();
-
-        for (const tag of Object.keys(this.orderedLists)) {
-            const definedSort = this.getTagSorting(tag);
-            const definedOrder = this.getListOrder(tag);
-
-            const tagSort = this.calculateTagSorting(tag);
-            const listOrder = this.calculateListOrder(tag);
-
-            if (tagSort !== definedSort) {
-                this.setAndPersistTagSorting(tag, tagSort);
-            }
-            if (listOrder !== definedOrder) {
-                this.setAndPersistListOrder(tag, listOrder);
-            }
-        }
-    }
-
-    private onAlgorithmListUpdated = (forceUpdate: boolean): void => {
-        this.updateFn.mark();
-        if (forceUpdate) this.updateFn.trigger();
-    };
-
-    private onAlgorithmFilterUpdated = (): void => {
-        // The filter can happen off-cycle, so trigger an update. The filter will have
-        // already caused a mark.
-        this.updateFn.trigger();
-    };
-
-    private onPrefilterUpdated = async (): Promise<void> => {
-        await this.recalculatePrefiltering();
-        this.updateFn.trigger();
-    };
-
-    private getPlausibleRooms(): Room[] {
-        if (!this.matrixClient) return [];
-
-        let rooms = this.matrixClient.getVisibleRooms(this.msc3946ProcessDynamicPredecessor);
-        rooms = rooms.filter((r) => isRoomVisible(r));
-
-        if (this.prefilterConditions.length > 0) {
-            rooms = rooms.filter((r) => {
-                for (const filter of this.prefilterConditions) {
-                    if (!filter.isVisible(r)) {
-                        return false;
-                    }
-                }
-                return true;
-            });
-        }
-
-        return rooms;
-    }
-
-    /**
-     * Regenerates the room whole room list, discarding any previous results.
-     *
-     * Note: This is only exposed externally for the tests. Do not call this from within
-     * the app.
-     * @param trigger Set to false to prevent a list update from being sent. Should only
-     * be used if the calling code will manually trigger the update.
-     */
-    public regenerateAllLists({ trigger = true }): void {
-        logger.warn("Regenerating all room lists");
-
-        const rooms = this.getPlausibleRooms();
-
-        const sorts: ITagSortingMap = {};
-        const orders: IListOrderingMap = {};
-        const allTags = [...OrderedDefaultTagIDs];
-        for (const tagId of allTags) {
-            sorts[tagId] = this.calculateTagSorting(tagId);
-            orders[tagId] = this.calculateListOrder(tagId);
-
-            RoomListLayoutStore.instance.ensureLayoutExists(tagId);
-        }
-
-        this.algorithm.populateTags(sorts, orders);
-        this.algorithm.setKnownRooms(rooms);
-
-        this.initialListsGenerated = true;
-
-        if (trigger) this.updateFn.trigger();
-    }
-
-    /**
-     * Adds a filter condition to the room list store. Filters may be applied async,
-     * and thus might not cause an update to the store immediately.
-     * @param {IFilterCondition} filter The filter condition to add.
-     */
-    public async addFilter(filter: IFilterCondition): Promise<void> {
-        filter.on(FILTER_CHANGED, this.onPrefilterUpdated);
-        this.prefilterConditions.push(filter);
-        const promise = this.recalculatePrefiltering();
-        promise.then(() => this.updateFn.trigger());
-    }
-
-    /**
-     * Removes a filter condition from the room list store. If the filter was
-     * not previously added to the room list store, this will no-op. The effects
-     * of removing a filter may be applied async and therefore might not cause
-     * an update right away.
-     * @param {IFilterCondition} filter The filter condition to remove.
-     */
-    public removeFilter(filter: IFilterCondition): void {
-        let promise = Promise.resolve();
-        let removed = false;
-        const idx = this.prefilterConditions.indexOf(filter);
-        if (idx >= 0) {
-            filter.off(FILTER_CHANGED, this.onPrefilterUpdated);
-            this.prefilterConditions.splice(idx, 1);
-            promise = this.recalculatePrefiltering();
-            removed = true;
-        }
-
-        if (removed) {
-            promise.then(() => this.updateFn.trigger());
-        }
-    }
-
-    public getCount(tagId: TagID): number {
-        // The room list store knows about all the rooms, so just return the length.
-        return this.orderedLists[tagId].length || 0;
-    }
-
-    /**
-     * Manually update a room with a given cause. This should only be used if the
-     * room list store would otherwise be incapable of doing the update itself. Note
-     * that this may race with the room list's regular operation.
-     * @param {Room} room The room to update.
-     * @param {RoomUpdateCause} cause The cause to update for.
-     */
-    public async manualRoomUpdate(room: Room, cause: RoomUpdateCause): Promise<void> {
-        await this.handleRoomUpdate(room, cause);
-        this.updateFn.trigger();
-    }
-}
-
-export default class RoomListStore {
-    private static internalInstance: Interface;
-
-    public static get instance(): Interface {
-        if (!RoomListStore.internalInstance) {
-            const instance = new RoomListStoreClass(defaultDispatcher);
-            instance.start();
-            RoomListStore.internalInstance = instance;
-        }
-
-        return this.internalInstance;
-    }
-}
-
-window.mxRoomListStore = RoomListStore.instance;
diff --git a/apps/web/src/stores/room-list/SpaceWatcher.ts b/apps/web/src/stores/room-list/SpaceWatcher.ts
deleted file mode 100644
index 83d2b1a5db..0000000000
--- a/apps/web/src/stores/room-list/SpaceWatcher.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2021 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { type RoomListStore as Interface } from "./Interface";
-import { SpaceFilterCondition } from "./filters/SpaceFilterCondition";
-import SpaceStore from "../spaces/SpaceStore";
-import { MetaSpace, type SpaceKey, UPDATE_HOME_BEHAVIOUR, UPDATE_SELECTED_SPACE } from "../spaces";
-
-/**
- * Watches for changes in spaces to manage the filter on the provided RoomListStore
- */
-export class SpaceWatcher {
-    private readonly filter = new SpaceFilterCondition();
-    // we track these separately to the SpaceStore as we need to observe transitions
-    private activeSpace: SpaceKey = SpaceStore.instance.activeSpace;
-    private allRoomsInHome: boolean = SpaceStore.instance.allRoomsInHome;
-
-    public constructor(private store: Interface) {
-        if (SpaceWatcher.needsFilter(this.activeSpace, this.allRoomsInHome)) {
-            this.updateFilter();
-            store.addFilter(this.filter);
-        }
-        SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.onSelectedSpaceUpdated);
-        SpaceStore.instance.on(UPDATE_HOME_BEHAVIOUR, this.onHomeBehaviourUpdated);
-    }
-
-    private static needsFilter(spaceKey: SpaceKey, allRoomsInHome: boolean): boolean {
-        return !(spaceKey === MetaSpace.Home && allRoomsInHome);
-    }
-
-    private onSelectedSpaceUpdated = (activeSpace: SpaceKey, allRoomsInHome = this.allRoomsInHome): void => {
-        if (activeSpace === this.activeSpace && allRoomsInHome === this.allRoomsInHome) return; // nop
-
-        const neededFilter = SpaceWatcher.needsFilter(this.activeSpace, this.allRoomsInHome);
-        const needsFilter = SpaceWatcher.needsFilter(activeSpace, allRoomsInHome);
-
-        this.activeSpace = activeSpace;
-        this.allRoomsInHome = allRoomsInHome;
-
-        if (needsFilter) {
-            this.updateFilter();
-        }
-
-        if (!neededFilter && needsFilter) {
-            this.store.addFilter(this.filter);
-        } else if (neededFilter && !needsFilter) {
-            this.store.removeFilter(this.filter);
-        }
-    };
-
-    private onHomeBehaviourUpdated = (allRoomsInHome: boolean): void => {
-        this.onSelectedSpaceUpdated(this.activeSpace, allRoomsInHome);
-    };
-
-    private updateFilter = (): void => {
-        this.filter.updateSpace(this.activeSpace);
-    };
-}
diff --git a/apps/web/src/stores/room-list/algorithms/Algorithm.ts b/apps/web/src/stores/room-list/algorithms/Algorithm.ts
deleted file mode 100644
index 52fe9b26ff..0000000000
--- a/apps/web/src/stores/room-list/algorithms/Algorithm.ts
+++ /dev/null
@@ -1,731 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { type Room } from "matrix-js-sdk/src/matrix";
-import { KnownMembership } from "matrix-js-sdk/src/types";
-import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
-import { EventEmitter } from "events";
-import { logger } from "matrix-js-sdk/src/logger";
-
-import DMRoomMap from "../../../utils/DMRoomMap";
-import { arrayDiff, arrayHasDiff } from "../../../utils/arrays";
-import { DefaultTagID, type TagID } from "../../room-list-v3/skip-list/tag";
-import { RoomUpdateCause } from "../models";
-import {
-    type IListOrderingMap,
-    type IOrderingAlgorithmMap,
-    type ITagMap,
-    type ITagSortingMap,
-    type ListAlgorithm,
-    type SortAlgorithm,
-} from "./models";
-import { EffectiveMembership, splitRoomsByMembership } from "../../../utils/membership";
-import { type OrderingAlgorithm } from "./list-ordering/OrderingAlgorithm";
-import { getListAlgorithmInstance } from "./list-ordering";
-import { isRoomVisible } from "../../room-list-v3/isRoomVisible";
-import { CallStore, CallStoreEvent } from "../../CallStore";
-import { getTagsForRoom, getTagsOfJoinedRoom } from "../../../utils/room/getTagsForRoom";
-
-/**
- * Fired when the Algorithm has determined a list has been updated.
- */
-export const LIST_UPDATED_EVENT = "list_updated_event";
-
-// These are the causes which require a room to be known in order for us to handle them. If
-// a cause in this list is raised and we don't know about the room, we don't handle the update.
-//
-// Note: these typically happen when a new room is coming in, such as the user creating or
-// joining the room. For these cases, we need to know about the room prior to handling it otherwise
-// we'll make bad assumptions.
-const CAUSES_REQUIRING_ROOM = [RoomUpdateCause.Timeline, RoomUpdateCause.ReadReceipt];
-
-interface IStickyRoom {
-    room: Room;
-    position: number;
-    tag: TagID;
-}
-
-/**
- * Represents a list ordering algorithm. This class will take care of tag
- * management (which rooms go in which tags) and ask the implementation to
- * deal with ordering mechanics.
- */
-export class Algorithm extends EventEmitter {
-    private _cachedRooms: ITagMap = {};
-    private _cachedStickyRooms: ITagMap | null = {}; // a clone of the _cachedRooms, with the sticky room
-    private _stickyRoom: IStickyRoom | null = null;
-    private _lastStickyRoom: IStickyRoom | null = null; // only not-null when changing the sticky room
-    private sortAlgorithms: ITagSortingMap | null = null;
-    private listAlgorithms: IListOrderingMap | null = null;
-    private algorithms: IOrderingAlgorithmMap | null = null;
-    private rooms: Room[] = [];
-    private roomIdsToTags: {
-        [roomId: string]: TagID[];
-    } = {};
-
-    /**
-     * Set to true to suspend emissions of algorithm updates.
-     */
-    public updatesInhibited = false;
-
-    public start(): void {
-        CallStore.instance.on(CallStoreEvent.ConnectedCalls, this.onConnectedCalls);
-    }
-
-    public stop(): void {
-        CallStore.instance.off(CallStoreEvent.ConnectedCalls, this.onConnectedCalls);
-    }
-
-    public get stickyRoom(): Room | null {
-        return this._stickyRoom ? this._stickyRoom.room : null;
-    }
-
-    public get hasTagSortingMap(): boolean {
-        return !!this.sortAlgorithms;
-    }
-
-    protected set cachedRooms(val: ITagMap) {
-        this._cachedRooms = val;
-        this.recalculateStickyRoom();
-        this.recalculateActiveCallRooms();
-    }
-
-    protected get cachedRooms(): ITagMap {
-        // 🐉 Here be dragons.
-        // Note: this is used by the underlying algorithm classes, so don't make it return
-        // the sticky room cache. If it ends up returning the sticky room cache, we end up
-        // corrupting our caches and confusing them.
-        return this._cachedRooms;
-    }
-
-    /**
-     * Awaitable version of the sticky room setter.
-     * @param val The new room to sticky.
-     */
-    public setStickyRoom(val: Room | null): void {
-        try {
-            this.updateStickyRoom(val);
-        } catch (e) {
-            logger.warn("Failed to update sticky room", e);
-        }
-    }
-
-    public getTagSorting(tagId: TagID): SortAlgorithm | null {
-        if (!this.sortAlgorithms) return null;
-        return this.sortAlgorithms[tagId];
-    }
-
-    public setTagSorting(tagId: TagID, sort: SortAlgorithm): void {
-        if (!tagId) throw new Error("Tag ID must be defined");
-        if (!sort) throw new Error("Algorithm must be defined");
-        if (!this.sortAlgorithms) throw new Error("this.sortAlgorithms must be defined before calling setTagSorting");
-        if (!this.algorithms) throw new Error("this.algorithms must be defined before calling setTagSorting");
-        this.sortAlgorithms[tagId] = sort;
-
-        const algorithm: OrderingAlgorithm = this.algorithms[tagId];
-        algorithm.setSortAlgorithm(sort);
-        this._cachedRooms[tagId] = algorithm.orderedRooms;
-        this.recalculateStickyRoom(tagId); // update sticky room to make sure it appears if needed
-        this.recalculateActiveCallRooms(tagId);
-    }
-
-    public getListOrdering(tagId: TagID): ListAlgorithm | null {
-        if (!this.listAlgorithms) return null;
-        return this.listAlgorithms[tagId];
-    }
-
-    public setListOrdering(tagId: TagID, order: ListAlgorithm): void {
-        if (!tagId) throw new Error("Tag ID must be defined");
-        if (!order) throw new Error("Algorithm must be defined");
-        if (!this.sortAlgorithms) throw new Error("this.sortAlgorithms must be defined before calling setListOrdering");
-        if (!this.listAlgorithms) throw new Error("this.listAlgorithms must be defined before calling setListOrdering");
-        if (!this.algorithms) throw new Error("this.algorithms must be defined before calling setListOrdering");
-        this.listAlgorithms[tagId] = order;
-
-        const algorithm = getListAlgorithmInstance(order, tagId, this.sortAlgorithms[tagId]);
-        this.algorithms[tagId] = algorithm;
-
-        algorithm.setRooms(this._cachedRooms[tagId]);
-        this._cachedRooms[tagId] = algorithm.orderedRooms;
-        this.recalculateStickyRoom(tagId); // update sticky room to make sure it appears if needed
-        this.recalculateActiveCallRooms(tagId);
-    }
-
-    private updateStickyRoom(val: Room | null): void {
-        this.doUpdateStickyRoom(val);
-        this._lastStickyRoom = null; // clear to indicate we're done changing
-    }
-
-    private doUpdateStickyRoom(val: Room | null): void {
-        if (val?.isSpaceRoom() && val.getMyMembership() !== KnownMembership.Invite) {
-            // no-op sticky rooms for spaces - they're effectively virtual rooms
-            val = null;
-        }
-
-        if (val && !isRoomVisible(val)) {
-            val = null; // the room isn't visible - lie to the rest of this function
-        }
-
-        // Set the last sticky room to indicate that we're in a change. The code throughout the
-        // class can safely handle a null room, so this should be safe to do as a backup.
-        this._lastStickyRoom = this._stickyRoom || <IStickyRoom>{};
-
-        // It's possible to have no selected room. In that case, clear the sticky room
-        if (!val) {
-            if (this._stickyRoom) {
-                const stickyRoom = this._stickyRoom.room;
-                this._stickyRoom = null; // clear before we go to update the algorithm
-
-                // Lie to the algorithm and re-add the room to the algorithm
-                this.handleRoomUpdate(stickyRoom, RoomUpdateCause.NewRoom);
-                return;
-            }
-            return;
-        }
-
-        // When we do have a room though, we expect to be able to find it
-        let tag = this.roomIdsToTags[val.roomId]?.[0];
-        if (!tag) throw new Error(`${val.roomId} does not belong to a tag and cannot be sticky`);
-
-        // We specifically do NOT use the ordered rooms set as it contains the sticky room, which
-        // means we'll be off by 1 when the user is switching rooms. This leads to visual jumping
-        // when the user is moving south in the list (not north, because of math).
-        const tagList = this.getOrderedRoomsWithoutSticky()[tag] || []; // can be null if filtering
-        let position = tagList.indexOf(val);
-
-        // We do want to see if a tag change happened though - if this did happen then we'll want
-        // to force the position to zero (top) to ensure we can properly handle it.
-        const wasSticky = this._lastStickyRoom.room ? this._lastStickyRoom.room.roomId === val.roomId : false;
-        if (this._lastStickyRoom.tag && tag !== this._lastStickyRoom.tag && wasSticky && position < 0) {
-            logger.warn(`Sticky room ${val.roomId} changed tags during sticky room handling`);
-            position = 0;
-        }
-
-        // Sanity check the position to make sure the room is qualified for being sticky
-        if (position < 0) throw new Error(`${val.roomId} does not appear to be known and cannot be sticky`);
-
-        // 🐉 Here be dragons.
-        // Before we can go through with lying to the underlying algorithm about a room
-        // we need to ensure that when we do we're ready for the inevitable sticky room
-        // update we'll receive. To prepare for that, we first remove the sticky room and
-        // recalculate the state ourselves so that when the underlying algorithm calls for
-        // the same thing it no-ops. After we're done calling the algorithm, we'll issue
-        // a new update for ourselves.
-        const lastStickyRoom = this._stickyRoom;
-        this._stickyRoom = null; // clear before we update the algorithm
-        this.recalculateStickyRoom();
-
-        // When we do have the room, re-add the old room (if needed) to the algorithm
-        // and remove the sticky room from the algorithm. This is so the underlying
-        // algorithm doesn't try and confuse itself with the sticky room concept.
-        // We don't add the new room if the sticky room isn't changing because that's
-        // an easy way to cause duplication. We have to do room ID checks instead of
-        // referential checks as the references can differ through the lifecycle.
-        if (lastStickyRoom && lastStickyRoom.room && lastStickyRoom.room.roomId !== val.roomId) {
-            // Lie to the algorithm and re-add the room to the algorithm
-            this.handleRoomUpdate(lastStickyRoom.room, RoomUpdateCause.NewRoom);
-        }
-        // Lie to the algorithm and remove the room from it's field of view
-        this.handleRoomUpdate(val, RoomUpdateCause.RoomRemoved);
-
-        // handleRoomUpdate may have modified this._stickyRoom. Convince the
-        // compiler of this fact.
-        this._stickyRoom = this.stickyRoomMightBeModified();
-
-        // Check for tag & position changes while we're here. We also check the room to ensure
-        // it is still the same room.
-        if (this._stickyRoom) {
-            if (this._stickyRoom.room !== val) {
-                // Check the room IDs just in case
-                if (this._stickyRoom.room.roomId === val.roomId) {
-                    logger.warn("Sticky room changed references");
-                } else {
-                    throw new Error("Sticky room changed while the sticky room was changing");
-                }
-            }
-
-            logger.warn(
-                `Sticky room changed tag & position from ${tag} / ${position} ` +
-                    `to ${this._stickyRoom.tag} / ${this._stickyRoom.position}`,
-            );
-
-            tag = this._stickyRoom.tag;
-            position = this._stickyRoom.position;
-        }
-
-        // Now that we're done lying to the algorithm, we need to update our position
-        // marker only if the user is moving further down the same list. If they're switching
-        // lists, or moving upwards, the position marker will splice in just fine but if
-        // they went downwards in the same list we'll be off by 1 due to the shifting rooms.
-        if (lastStickyRoom && lastStickyRoom.tag === tag && lastStickyRoom.position <= position) {
-            position++;
-        }
-
-        this._stickyRoom = {
-            room: val,
-            position: position,
-            tag: tag,
-        };
-
-        // We update the filtered rooms just in case, as otherwise users will end up visiting
-        // a room while filtering and it'll disappear. We don't update the filter earlier in
-        // this function simply because we don't have to.
-        this.recalculateStickyRoom();
-        this.recalculateActiveCallRooms(tag);
-        if (lastStickyRoom && lastStickyRoom.tag !== tag) this.recalculateActiveCallRooms(lastStickyRoom.tag);
-
-        // Finally, trigger an update
-        if (this.updatesInhibited) return;
-        this.emit(LIST_UPDATED_EVENT);
-    }
-
-    /**
-     * Hack to prevent Typescript claiming this._stickyRoom is always null.
-     */
-    private stickyRoomMightBeModified(): IStickyRoom | null {
-        return this._stickyRoom;
-    }
-
-    private onConnectedCalls = (): void => {
-        // In case we're unsticking a room, sort it back into natural order
-        this.recalculateStickyRoom();
-
-        // Update the stickiness of rooms with calls
-        this.recalculateActiveCallRooms();
-
-        if (this.updatesInhibited) return;
-        // This isn't in response to any particular RoomListStore update,
-        // so notify the store that it needs to force-update
-        this.emit(LIST_UPDATED_EVENT, true);
-    };
-
-    private initCachedStickyRooms(): void {
-        this._cachedStickyRooms = {};
-        for (const tagId of Object.keys(this.cachedRooms)) {
-            this._cachedStickyRooms[tagId] = [...this.cachedRooms[tagId]]; // shallow clone
-        }
-    }
-
-    /**
-     * Recalculate the sticky room position. If this is being called in relation to
-     * a specific tag being updated, it should be given to this function to optimize
-     * the call.
-     * @param updatedTag The tag that was updated, if possible.
-     */
-    protected recalculateStickyRoom(updatedTag: TagID | null = null): void {
-        // 🐉 Here be dragons.
-        // This function does far too much for what it should, and is called by many places.
-        // Not only is this responsible for ensuring the sticky room is held in place at all
-        // times, it is also responsible for ensuring our clone of the cachedRooms is up to
-        // date. If either of these desyncs, we see weird behaviour like duplicated rooms,
-        // outdated lists, and other nonsensical issues that aren't necessarily obvious.
-
-        if (!this._stickyRoom) {
-            // If there's no sticky room, just do nothing useful.
-            if (!!this._cachedStickyRooms) {
-                // Clear the cache if we won't be needing it
-                this._cachedStickyRooms = null;
-                if (this.updatesInhibited) return;
-                this.emit(LIST_UPDATED_EVENT);
-            }
-            return;
-        }
-
-        if (!this._cachedStickyRooms || !updatedTag) {
-            this.initCachedStickyRooms();
-        }
-
-        if (updatedTag) {
-            // Update the tag indicated by the caller, if possible. This is mostly to ensure
-            // our cache is up to date.
-            if (this._cachedStickyRooms) {
-                this._cachedStickyRooms[updatedTag] = [...this.cachedRooms[updatedTag]]; // shallow clone
-            }
-        }
-
-        // Now try to insert the sticky room, if we need to.
-        // We need to if there's no updated tag (we regenned the whole cache) or if the tag
-        // we might have updated from the cache is also our sticky room.
-        const sticky = this._stickyRoom;
-        if (sticky && (!updatedTag || updatedTag === sticky.tag) && this._cachedStickyRooms) {
-            this._cachedStickyRooms[sticky.tag].splice(sticky.position, 0, sticky.room);
-        }
-
-        // Finally, trigger an update
-        if (this.updatesInhibited) return;
-        this.emit(LIST_UPDATED_EVENT);
-    }
-
-    /**
-     * Recalculate the position of any rooms with calls. If this is being called in
-     * relation to a specific tag being updated, it should be given to this function to
-     * optimize the call.
-     *
-     * This expects to be called *after* the sticky rooms are updated, and sticks the
-     * room with the currently active call to the top of its tag.
-     *
-     * @param updatedTag The tag that was updated, if possible.
-     */
-    protected recalculateActiveCallRooms(updatedTag: TagID | null = null): void {
-        if (!updatedTag) {
-            // Assume all tags need updating
-            // We're not modifying the map here, so can safely rely on the cached values
-            // rather than the explicitly sticky map.
-            for (const tagId of Object.keys(this.cachedRooms)) {
-                if (!tagId) {
-                    throw new Error("Unexpected recursion: falsy tag");
-                }
-                this.recalculateActiveCallRooms(tagId);
-            }
-            return;
-        }
-
-        if (CallStore.instance.connectedCalls.size) {
-            // We operate on the sticky rooms map
-            if (!this._cachedStickyRooms) this.initCachedStickyRooms();
-            const rooms = this._cachedStickyRooms![updatedTag];
-
-            const activeRoomIds = new Set([...CallStore.instance.connectedCalls].map((call) => call.roomId));
-            const activeRooms: Room[] = [];
-            const inactiveRooms: Room[] = [];
-
-            for (const room of rooms) {
-                (activeRoomIds.has(room.roomId) ? activeRooms : inactiveRooms).push(room);
-            }
-
-            // Stick rooms with active calls to the top
-            this._cachedStickyRooms![updatedTag] = [...activeRooms, ...inactiveRooms];
-        }
-    }
-
-    /**
-     * Asks the Algorithm to regenerate all lists, using the tags given
-     * as reference for which lists to generate and which way to generate
-     * them.
-     * @param {ITagSortingMap} tagSortingMap The tags to generate.
-     * @param {IListOrderingMap} listOrderingMap The ordering of those tags.
-     */
-    public populateTags(tagSortingMap: ITagSortingMap, listOrderingMap: IListOrderingMap): void {
-        if (!tagSortingMap) throw new Error(`Sorting map cannot be null or empty`);
-        if (!listOrderingMap) throw new Error(`Ordering ma cannot be null or empty`);
-        if (arrayHasDiff(Object.keys(tagSortingMap), Object.keys(listOrderingMap))) {
-            throw new Error(`Both maps must contain the exact same tags`);
-        }
-        this.sortAlgorithms = tagSortingMap;
-        this.listAlgorithms = listOrderingMap;
-        this.algorithms = {};
-        for (const tag of Object.keys(tagSortingMap)) {
-            this.algorithms[tag] = getListAlgorithmInstance(this.listAlgorithms[tag], tag, this.sortAlgorithms[tag]);
-        }
-        return this.setKnownRooms(this.rooms);
-    }
-
-    /**
-     * Gets an ordered set of rooms for the all known tags.
-     * @returns {ITagMap} The cached list of rooms, ordered,
-     * for each tag. May be empty, but never null/undefined.
-     */
-    public getOrderedRooms(): ITagMap {
-        return this._cachedStickyRooms || this.cachedRooms;
-    }
-
-    /**
-     * This returns the same as getOrderedRooms(), but without the sticky room
-     * map as it causes issues for sticky room handling (see sticky room handling
-     * for more information).
-     * @returns {ITagMap} The cached list of rooms, ordered,
-     * for each tag. May be empty, but never null/undefined.
-     */
-    private getOrderedRoomsWithoutSticky(): ITagMap {
-        return this.cachedRooms;
-    }
-
-    /**
-     * Seeds the Algorithm with a set of rooms. The algorithm will discard all
-     * previously known information and instead use these rooms instead.
-     * @param {Room[]} rooms The rooms to force the algorithm to use.
-     */
-    public setKnownRooms(rooms: Room[]): void {
-        if (isNullOrUndefined(rooms)) throw new Error(`Array of rooms cannot be null`);
-        if (!this.sortAlgorithms) throw new Error(`Cannot set known rooms without a tag sorting map`);
-
-        if (!this.updatesInhibited) {
-            // We only log this if we're expecting to be publishing updates, which means that
-            // this could be an unexpected invocation. If we're inhibited, then this is probably
-            // an intentional invocation.
-            logger.warn("Resetting known rooms, initiating regeneration");
-        }
-
-        // Before we go any further we need to clear (but remember) the sticky room to
-        // avoid accidentally duplicating it in the list.
-        const oldStickyRoom = this._stickyRoom;
-        if (oldStickyRoom) this.updateStickyRoom(null);
-
-        this.rooms = rooms;
-
-        const newTags: ITagMap = {};
-        for (const tagId in this.sortAlgorithms) {
-            // noinspection JSUnfilteredForInLoop
-            newTags[tagId] = [];
-        }
-
-        // If we can avoid doing work, do so.
-        if (!rooms.length) {
-            this.generateFreshTags(newTags); // just in case it wants to do something
-            this.cachedRooms = newTags;
-            return;
-        }
-
-        // Split out the easy rooms first (leave and invite)
-        const memberships = splitRoomsByMembership(rooms);
-
-        for (const room of memberships[EffectiveMembership.Invite]) {
-            newTags[DefaultTagID.Invite].push(room);
-        }
-        for (const room of memberships[EffectiveMembership.Leave]) {
-            // We may not have had an archived section previously, so make sure its there.
-            if (newTags[DefaultTagID.Archived] === undefined) newTags[DefaultTagID.Archived] = [];
-            newTags[DefaultTagID.Archived].push(room);
-        }
-
-        // Now process all the joined rooms. This is a bit more complicated
-        for (const room of memberships[EffectiveMembership.Join]) {
-            const tags = getTagsOfJoinedRoom(room);
-
-            let inTag = false;
-            if (tags.length > 0) {
-                for (const tag of tags) {
-                    if (!isNullOrUndefined(newTags[tag])) {
-                        newTags[tag].push(room);
-                        inTag = true;
-                    }
-                }
-            }
-
-            if (!inTag) {
-                if (DMRoomMap.shared().getUserIdForRoomId(room.roomId)) {
-                    newTags[DefaultTagID.DM].push(room);
-                } else {
-                    newTags[DefaultTagID.Untagged].push(room);
-                }
-            }
-        }
-
-        this.generateFreshTags(newTags);
-
-        this.cachedRooms = newTags; // this recalculates the filtered rooms for us
-        this.updateTagsFromCache();
-
-        // Now that we've finished generation, we need to update the sticky room to what
-        // it was. It's entirely possible that it changed lists though, so if it did then
-        // we also have to update the position of it.
-        if (oldStickyRoom && oldStickyRoom.room) {
-            this.updateStickyRoom(oldStickyRoom.room);
-            if (this._stickyRoom && this._stickyRoom.room) {
-                // just in case the update doesn't go according to plan
-                if (this._stickyRoom.tag !== oldStickyRoom.tag) {
-                    // We put the sticky room at the top of the list to treat it as an obvious tag change.
-                    this._stickyRoom.position = 0;
-                    this.recalculateStickyRoom(this._stickyRoom.tag);
-                }
-            }
-        }
-    }
-
-    /**
-     * Updates the roomsToTags map
-     */
-    private updateTagsFromCache(): void {
-        const newMap: Algorithm["roomIdsToTags"] = {};
-
-        const tags = Object.keys(this.cachedRooms);
-        for (const tagId of tags) {
-            const rooms = this.cachedRooms[tagId];
-            for (const room of rooms) {
-                if (!newMap[room.roomId]) newMap[room.roomId] = [];
-                newMap[room.roomId].push(tagId);
-            }
-        }
-
-        this.roomIdsToTags = newMap;
-    }
-
-    /**
-     * Called when the Algorithm believes a complete regeneration of the existing
-     * lists is needed.
-     * @param {ITagMap} updatedTagMap The tag map which needs populating. Each tag
-     * will already have the rooms which belong to it - they just need ordering. Must
-     * be mutated in place.
-     */
-    private generateFreshTags(updatedTagMap: ITagMap): void {
-        if (!this.algorithms) throw new Error("Not ready: no algorithms to determine tags from");
-
-        for (const tag of Object.keys(updatedTagMap)) {
-            const algorithm: OrderingAlgorithm = this.algorithms[tag];
-            if (!algorithm) throw new Error(`No algorithm for ${tag}`);
-
-            algorithm.setRooms(updatedTagMap[tag]);
-            updatedTagMap[tag] = algorithm.orderedRooms;
-        }
-    }
-
-    /**
-     * Asks the Algorithm to update its knowledge of a room. For example, when
-     * a user tags a room, joins/creates a room, or leaves a room the Algorithm
-     * should be told that the room's info might have changed. The Algorithm
-     * may no-op this request if no changes are required.
-     * @param {Room} room The room which might have affected sorting.
-     * @param {RoomUpdateCause} cause The reason for the update being triggered.
-     * @returns {Promise<boolean>} A boolean of whether or not getOrderedRooms()
-     * should be called after processing.
-     */
-    public handleRoomUpdate(room: Room, cause: RoomUpdateCause): boolean {
-        if (!this.algorithms) throw new Error("Not ready: no algorithms to determine tags from");
-
-        // Note: check the isSticky against the room ID just in case the reference is wrong
-        const isSticky = this._stickyRoom?.room?.roomId === room.roomId;
-        if (cause === RoomUpdateCause.NewRoom) {
-            const isForLastSticky = this._lastStickyRoom?.room === room;
-            const roomTags = this.roomIdsToTags[room.roomId];
-            const hasTags = roomTags && roomTags.length > 0;
-
-            // Don't change the cause if the last sticky room is being re-added. If we fail to
-            // pass the cause through as NewRoom, we'll fail to lie to the algorithm and thus
-            // lose the room.
-            if (hasTags && !isForLastSticky) {
-                logger.warn(`${room.roomId} is reportedly new but is already known - assuming TagChange instead`);
-                cause = RoomUpdateCause.PossibleTagChange;
-            }
-
-            // Check to see if the room is known first
-            let knownRoomRef = this.rooms.includes(room);
-            if (hasTags && !knownRoomRef) {
-                logger.warn(`${room.roomId} might be a reference change - attempting to update reference`);
-                this.rooms = this.rooms.map((r) => (r.roomId === room.roomId ? room : r));
-                knownRoomRef = this.rooms.includes(room);
-                if (!knownRoomRef) {
-                    logger.warn(`${room.roomId} is still not referenced. It may be sticky.`);
-                }
-            }
-
-            // If we have tags for a room and don't have the room referenced, something went horribly
-            // wrong - the reference should have been updated above.
-            if (hasTags && !knownRoomRef && !isSticky) {
-                throw new Error(`${room.roomId} is missing from room array but is known - trying to find duplicate`);
-            }
-
-            // Like above, update the reference to the sticky room if we need to
-            if (hasTags && isSticky && this._stickyRoom) {
-                // Go directly in and set the sticky room's new reference, being careful not
-                // to trigger a sticky room update ourselves.
-                this._stickyRoom.room = room;
-            }
-
-            // If after all that we're still a NewRoom update, add the room if applicable.
-            // We don't do this for the sticky room (because it causes duplication issues)
-            // or if we know about the reference (as it should be replaced).
-            if (cause === RoomUpdateCause.NewRoom && !isSticky && !knownRoomRef) {
-                this.rooms.push(room);
-            }
-        }
-
-        let didTagChange = false;
-        if (cause === RoomUpdateCause.PossibleTagChange) {
-            const oldTags = this.roomIdsToTags[room.roomId] || [];
-            const newTags = getTagsForRoom(room);
-            const diff = arrayDiff(oldTags, newTags);
-            if (diff.removed.length > 0 || diff.added.length > 0) {
-                for (const rmTag of diff.removed) {
-                    const algorithm: OrderingAlgorithm = this.algorithms[rmTag];
-                    if (!algorithm) throw new Error(`No algorithm for ${rmTag}`);
-                    algorithm.handleRoomUpdate(room, RoomUpdateCause.RoomRemoved);
-                    this._cachedRooms[rmTag] = algorithm.orderedRooms;
-                    this.recalculateStickyRoom(rmTag); // update sticky room to make sure it moves if needed
-                    this.recalculateActiveCallRooms(rmTag);
-                }
-                for (const addTag of diff.added) {
-                    const algorithm: OrderingAlgorithm = this.algorithms[addTag];
-                    if (!algorithm) throw new Error(`No algorithm for ${addTag}`);
-                    algorithm.handleRoomUpdate(room, RoomUpdateCause.NewRoom);
-                    this._cachedRooms[addTag] = algorithm.orderedRooms;
-                }
-
-                // Update the tag map so we don't regen it in a moment
-                this.roomIdsToTags[room.roomId] = newTags;
-
-                cause = RoomUpdateCause.Timeline;
-                didTagChange = true;
-            } else {
-                // This is a tag change update and no tags were changed, nothing to do!
-                return false;
-            }
-
-            if (didTagChange && isSticky) {
-                // Manually update the tag for the sticky room without triggering a sticky room
-                // update. The update will be handled implicitly by the sticky room handling and
-                // requires no changes on our part, if we're in the middle of a sticky room change.
-                if (this._lastStickyRoom) {
-                    this._stickyRoom = {
-                        room,
-                        tag: this.roomIdsToTags[room.roomId][0],
-                        position: 0, // right at the top as it changed tags
-                    };
-                } else {
-                    // We have to clear the lock as the sticky room change will trigger updates.
-                    this.setStickyRoom(room);
-                }
-            }
-        }
-
-        // If the update is for a room change which might be the sticky room, prevent it. We
-        // need to make sure that the causes (NewRoom and RoomRemoved) are still triggered though
-        // as the sticky room relies on this.
-        if (cause !== RoomUpdateCause.NewRoom && cause !== RoomUpdateCause.RoomRemoved) {
-            if (this.stickyRoom === room) {
-                return false;
-            }
-        }
-
-        if (!this.roomIdsToTags[room.roomId]) {
-            if (CAUSES_REQUIRING_ROOM.includes(cause)) {
-                return false;
-            }
-
-            // Get the tags for the room and populate the cache
-            const roomTags = getTagsForRoom(room).filter((t) => !isNullOrUndefined(this.cachedRooms[t]));
-
-            // "This should never happen" condition - we specify DefaultTagID.Untagged in getTagsForRoom(),
-            // which means we should *always* have a tag to go off of.
-            if (!roomTags.length) throw new Error(`Tags cannot be determined for ${room.roomId}`);
-
-            this.roomIdsToTags[room.roomId] = roomTags;
-        }
-
-        const tags = this.roomIdsToTags[room.roomId];
-        if (!tags) {
-            logger.warn(`No tags known for "${room.name}" (${room.roomId})`);
-            return false;
-        }
-
-        let changed = didTagChange;
-        for (const tag of tags) {
-            const algorithm: OrderingAlgorithm = this.algorithms[tag];
-            if (!algorithm) throw new Error(`No algorithm for ${tag}`);
-
-            algorithm.handleRoomUpdate(room, cause);
-            this._cachedRooms[tag] = algorithm.orderedRooms;
-
-            // Flag that we've done something
-            this.recalculateStickyRoom(tag); // update sticky room to make sure it appears if needed
-            this.recalculateActiveCallRooms(tag);
-            changed = true;
-        }
-
-        return changed;
-    }
-}
diff --git a/apps/web/src/stores/room-list/algorithms/list-ordering/ImportanceAlgorithm.ts b/apps/web/src/stores/room-list/algorithms/list-ordering/ImportanceAlgorithm.ts
deleted file mode 100644
index 1e37c61c23..0000000000
--- a/apps/web/src/stores/room-list/algorithms/list-ordering/ImportanceAlgorithm.ts
+++ /dev/null
@@ -1,299 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-Copyright 2018, 2019 New Vector Ltd
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { type Room } from "matrix-js-sdk/src/matrix";
-import { logger } from "matrix-js-sdk/src/logger";
-
-import { type TagID } from "../../../room-list-v3/skip-list/tag";
-import { RoomUpdateCause } from "../../models";
-import { type SortAlgorithm } from "../models";
-import { sortRoomsWithAlgorithm } from "../tag-sorting";
-import { OrderingAlgorithm } from "./OrderingAlgorithm";
-import { NotificationLevel } from "../../../notifications/NotificationLevel";
-import { RoomNotificationStateStore } from "../../../notifications/RoomNotificationStateStore";
-
-type CategorizedRoomMap = {
-    [category in NotificationLevel]: Room[];
-};
-
-type CategoryIndex = Partial<{
-    [category in NotificationLevel]: number; // integer
-}>;
-
-// Caution: changing this means you'll need to update a bunch of assumptions and
-// comments! Check the usage of Category carefully to figure out what needs changing
-// if you're going to change this array's order.
-const CATEGORY_ORDER = [
-    NotificationLevel.Unsent,
-    NotificationLevel.Highlight,
-    NotificationLevel.Notification,
-    NotificationLevel.Activity,
-    NotificationLevel.None, // idle
-    NotificationLevel.Muted,
-];
-
-/**
- * An implementation of the "importance" algorithm for room list sorting. Where
- * the tag sorting algorithm does not interfere, rooms will be ordered into
- * categories of varying importance to the user. Alphabetical sorting does not
- * interfere with this algorithm, however manual ordering does.
- *
- * The importance of a room is defined by the kind of notifications, if any, are
- * present on the room. These are classified internally as Unsent, Red, Grey,
- * Bold, and Idle. 'Unsent' rooms have unsent messages, Red rooms have mentions,
- * grey have unread messages, bold is a less noisy version of grey, and idle
- * means all activity has been seen by the user.
- *
- * The algorithm works by monitoring all room changes, including new messages in
- * tracked rooms, to determine if it needs a new category or different placement
- * within the same category. For more information, see the comments contained
- * within the class.
- */
-export class ImportanceAlgorithm extends OrderingAlgorithm {
-    // This tracks the category for the tag it represents by tracking the index of
-    // each category within the list, where zero is the top of the list. This then
-    // tracks when rooms change categories and splices the orderedRooms array as
-    // needed, preventing many ordering operations.
-
-    private indices: CategoryIndex = {};
-
-    public constructor(tagId: TagID, initialSortingAlgorithm: SortAlgorithm) {
-        super(tagId, initialSortingAlgorithm);
-    }
-
-    // noinspection JSMethodCanBeStatic
-    private categorizeRooms(rooms: Room[]): CategorizedRoomMap {
-        const map: CategorizedRoomMap = {
-            [NotificationLevel.Unsent]: [],
-            [NotificationLevel.Highlight]: [],
-            [NotificationLevel.Notification]: [],
-            [NotificationLevel.Activity]: [],
-            [NotificationLevel.None]: [],
-            [NotificationLevel.Muted]: [],
-        };
-        for (const room of rooms) {
-            const category = this.getRoomCategory(room);
-            map[category]?.push(room);
-        }
-        return map;
-    }
-
-    // noinspection JSMethodCanBeStatic
-    private getRoomCategory(room: Room): NotificationLevel {
-        // It's fine for us to call this a lot because it's cached, and we shouldn't be
-        // wasting anything by doing so as the store holds single references
-        const state = RoomNotificationStateStore.instance.getRoomState(room);
-        return this.isMutedToBottom && state.muted ? NotificationLevel.Muted : state.level;
-    }
-
-    public setRooms(rooms: Room[]): void {
-        const categorized = this.categorizeRooms(rooms);
-        for (const category of Object.keys(categorized)) {
-            const notificationColor = category as unknown as NotificationLevel;
-            const roomsToOrder = categorized[notificationColor];
-            categorized[notificationColor] = sortRoomsWithAlgorithm(roomsToOrder, this.tagId, this.sortingAlgorithm);
-        }
-
-        const newlyOrganized: Room[] = [];
-        const newIndices: CategoryIndex = {};
-
-        for (const category of CATEGORY_ORDER) {
-            newIndices[category] = newlyOrganized.length;
-            newlyOrganized.push(...categorized[category]);
-        }
-
-        this.indices = newIndices;
-        this.cachedOrderedRooms = newlyOrganized;
-    }
-
-    private getCategoryIndex(category: NotificationLevel): number {
-        const categoryIndex = this.indices[category];
-
-        if (categoryIndex === undefined) {
-            throw new Error(`Index of category ${category} not found`);
-        }
-
-        return categoryIndex;
-    }
-
-    private handleSplice(room: Room, cause: RoomUpdateCause): boolean {
-        if (cause === RoomUpdateCause.NewRoom) {
-            const category = this.getRoomCategory(room);
-            this.alterCategoryPositionBy(category, 1, this.indices);
-            this.cachedOrderedRooms.splice(this.getCategoryIndex(category), 0, room); // splice in the new room (pre-adjusted)
-            this.sortCategory(category);
-        } else if (cause === RoomUpdateCause.RoomRemoved) {
-            const roomIdx = this.getRoomIndex(room);
-            if (roomIdx === -1) {
-                logger.warn(`Tried to remove unknown room from ${this.tagId}: ${room.roomId}`);
-                return false; // no change
-            }
-            const oldCategory = this.getCategoryFromIndices(roomIdx, this.indices);
-            this.alterCategoryPositionBy(oldCategory, -1, this.indices);
-            this.cachedOrderedRooms.splice(roomIdx, 1); // remove the room
-        } else {
-            throw new Error(`Unhandled splice: ${cause}`);
-        }
-
-        // changes have been made if we made it here, so say so
-        return true;
-    }
-
-    public handleRoomUpdate(room: Room, cause: RoomUpdateCause): boolean {
-        if (cause === RoomUpdateCause.NewRoom || cause === RoomUpdateCause.RoomRemoved) {
-            return this.handleSplice(room, cause);
-        }
-
-        if (
-            cause !== RoomUpdateCause.Timeline &&
-            cause !== RoomUpdateCause.ReadReceipt &&
-            cause !== RoomUpdateCause.PossibleMuteChange
-        ) {
-            throw new Error(`Unsupported update cause: ${cause}`);
-        }
-
-        // don't react to mute changes when we are not sorting by mute
-        if (cause === RoomUpdateCause.PossibleMuteChange && !this.isMutedToBottom) {
-            return false;
-        }
-
-        const category = this.getRoomCategory(room);
-
-        const roomIdx = this.getRoomIndex(room);
-        if (roomIdx === -1) {
-            throw new Error(`Room ${room.roomId} has no index in ${this.tagId}`);
-        }
-
-        // Try to avoid doing array operations if we don't have to: only move rooms within
-        // the categories if we're jumping categories
-        const oldCategory = this.getCategoryFromIndices(roomIdx, this.indices);
-        if (oldCategory !== category) {
-            // Move the room and update the indices
-            this.moveRoomIndexes(1, oldCategory, category, this.indices);
-            this.cachedOrderedRooms.splice(roomIdx, 1); // splice out the old index (fixed position)
-            this.cachedOrderedRooms.splice(this.getCategoryIndex(category), 0, room); // splice in the new room (pre-adjusted)
-            // Note: if moveRoomIndexes() is called after the splice then the insert operation
-            // will happen in the wrong place. Because we would have already adjusted the index
-            // for the category, we don't need to determine how the room is moving in the list.
-            // If we instead tried to insert before updating the indices, we'd have to determine
-            // whether the room was moving later (towards IDLE) or earlier (towards RED) from its
-            // current position, as it'll affect the category's start index after we remove the
-            // room from the array.
-        }
-
-        // Sort the category now that we've dumped the room in
-        this.sortCategory(category);
-
-        return true; // change made
-    }
-
-    private sortCategory(category: NotificationLevel): void {
-        // This should be relatively quick because the room is usually inserted at the top of the
-        // category, and most popular sorting algorithms will deal with trying to keep the active
-        // room at the top/start of the category. For the few algorithms that will have to move the
-        // thing quite far (alphabetic with a Z room for example), the list should already be sorted
-        // well enough that it can rip through the array and slot the changed room in quickly.
-        const nextCategoryStartIdx =
-            category === CATEGORY_ORDER[CATEGORY_ORDER.length - 1]
-                ? Number.MAX_SAFE_INTEGER
-                : this.getCategoryIndex(CATEGORY_ORDER[CATEGORY_ORDER.indexOf(category) + 1]);
-        const startIdx = this.getCategoryIndex(category);
-        const numSort = nextCategoryStartIdx - startIdx; // splice() returns up to the max, so MAX_SAFE_INT is fine
-        const unsortedSlice = this.cachedOrderedRooms.splice(startIdx, numSort);
-        const sorted = sortRoomsWithAlgorithm(unsortedSlice, this.tagId, this.sortingAlgorithm);
-        this.cachedOrderedRooms.splice(startIdx, 0, ...sorted);
-    }
-
-    // noinspection JSMethodCanBeStatic
-    private getCategoryFromIndices(index: number, indices: CategoryIndex): NotificationLevel {
-        for (let i = 0; i < CATEGORY_ORDER.length; i++) {
-            const category = CATEGORY_ORDER[i];
-            const isLast = i === CATEGORY_ORDER.length - 1;
-            const startIdx = indices[category];
-            const endIdx = isLast ? Number.MAX_SAFE_INTEGER : indices[CATEGORY_ORDER[i + 1]];
-
-            if (startIdx === undefined || endIdx === undefined) continue;
-
-            if (index >= startIdx && index < endIdx) {
-                return category;
-            }
-        }
-
-        // "Should never happen" disclaimer goes here
-        throw new Error("Programming error: somehow you've ended up with an index that isn't in a category");
-    }
-
-    // noinspection JSMethodCanBeStatic
-    private moveRoomIndexes(
-        nRooms: number,
-        fromCategory: NotificationLevel,
-        toCategory: NotificationLevel,
-        indices: CategoryIndex,
-    ): void {
-        // We have to update the index of the category *after* the from/toCategory variables
-        // in order to update the indices correctly. Because the room is moving from/to those
-        // categories, the next category's index will change - not the category we're modifying.
-        // We also need to update subsequent categories as they'll all shift by nRooms, so we
-        // loop over the order to achieve that.
-
-        this.alterCategoryPositionBy(fromCategory, -nRooms, indices);
-        this.alterCategoryPositionBy(toCategory, +nRooms, indices);
-    }
-
-    private alterCategoryPositionBy(category: NotificationLevel, n: number, indices: CategoryIndex): void {
-        // Note: when we alter a category's index, we actually have to modify the ones following
-        // the target and not the target itself.
-
-        // XXX: If this ever actually gets more than one room passed to it, it'll need more index
-        // handling. For instance, if 45 rooms are removed from the middle of a 50 room list, the
-        // index for the categories will be way off.
-
-        const nextOrderIndex = CATEGORY_ORDER.indexOf(category) + 1;
-
-        if (n > 0) {
-            for (let i = nextOrderIndex; i < CATEGORY_ORDER.length; i++) {
-                const nextCategory = CATEGORY_ORDER[i];
-
-                if (indices[nextCategory] === undefined) {
-                    throw new Error(`Index of category ${category} not found`);
-                }
-
-                indices[nextCategory]! += Math.abs(n);
-            }
-        } else if (n < 0) {
-            for (let i = nextOrderIndex; i < CATEGORY_ORDER.length; i++) {
-                const nextCategory = CATEGORY_ORDER[i];
-
-                if (indices[nextCategory] === undefined) {
-                    throw new Error(`Index of category ${category} not found`);
-                }
-
-                indices[nextCategory]! -= Math.abs(n);
-            }
-        }
-
-        // Do a quick check to see if we've completely broken the index
-        for (let i = 1; i < CATEGORY_ORDER.length; i++) {
-            const lastCat = CATEGORY_ORDER[i - 1];
-            const lastCatIndex = indices[lastCat];
-            const thisCat = CATEGORY_ORDER[i];
-            const thisCatIndex = indices[thisCat];
-
-            if (lastCatIndex === undefined || thisCatIndex === undefined || lastCatIndex > thisCatIndex) {
-                // "should never happen" disclaimer goes here
-                logger.warn(
-                    `!! Room list index corruption: ${lastCat} (i:${indices[lastCat]}) is greater ` +
-                        `than ${thisCat} (i:${indices[thisCat]}) - category indices are likely desynced from reality`,
-                );
-
-                // TODO: Regenerate index when this happens: https://github.com/vector-im/element-web/issues/14234
-            }
-        }
-    }
-}
diff --git a/apps/web/src/stores/room-list/algorithms/list-ordering/NaturalAlgorithm.ts b/apps/web/src/stores/room-list/algorithms/list-ordering/NaturalAlgorithm.ts
deleted file mode 100644
index ce15aaff1c..0000000000
--- a/apps/web/src/stores/room-list/algorithms/list-ordering/NaturalAlgorithm.ts
+++ /dev/null
@@ -1,204 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { type Room } from "matrix-js-sdk/src/matrix";
-import { logger } from "matrix-js-sdk/src/logger";
-
-import { type SortAlgorithm } from "../models";
-import { sortRoomsWithAlgorithm } from "../tag-sorting";
-import { OrderingAlgorithm } from "./OrderingAlgorithm";
-import { type TagID } from "../../../room-list-v3/skip-list/tag";
-import { RoomUpdateCause } from "../../models";
-import { RoomNotificationStateStore } from "../../../notifications/RoomNotificationStateStore";
-
-type NaturalCategorizedRoomMap = {
-    defaultRooms: Room[];
-    mutedRooms: Room[];
-};
-
-/**
- * Uses the natural tag sorting algorithm order to determine tag ordering. No
- * additional behavioural changes are present.
- */
-export class NaturalAlgorithm extends OrderingAlgorithm {
-    private cachedCategorizedOrderedRooms: NaturalCategorizedRoomMap = {
-        defaultRooms: [],
-        mutedRooms: [],
-    };
-    public constructor(tagId: TagID, initialSortingAlgorithm: SortAlgorithm) {
-        super(tagId, initialSortingAlgorithm);
-    }
-
-    public setRooms(rooms: Room[]): void {
-        const { defaultRooms, mutedRooms } = this.categorizeRooms(rooms);
-
-        this.cachedCategorizedOrderedRooms = {
-            defaultRooms: sortRoomsWithAlgorithm(defaultRooms, this.tagId, this.sortingAlgorithm),
-            mutedRooms: sortRoomsWithAlgorithm(mutedRooms, this.tagId, this.sortingAlgorithm),
-        };
-        this.buildCachedOrderedRooms();
-    }
-
-    public handleRoomUpdate(room: Room, cause: RoomUpdateCause): boolean {
-        const isSplice = cause === RoomUpdateCause.NewRoom || cause === RoomUpdateCause.RoomRemoved;
-        const isInPlace =
-            cause === RoomUpdateCause.Timeline ||
-            cause === RoomUpdateCause.ReadReceipt ||
-            cause === RoomUpdateCause.PossibleMuteChange;
-        const isMuted = this.isMutedToBottom && this.getRoomIsMuted(room);
-
-        if (!isSplice && !isInPlace) {
-            throw new Error(`Unsupported update cause: ${cause}`);
-        }
-
-        if (cause === RoomUpdateCause.NewRoom) {
-            if (isMuted) {
-                this.cachedCategorizedOrderedRooms.mutedRooms = sortRoomsWithAlgorithm(
-                    [...this.cachedCategorizedOrderedRooms.mutedRooms, room],
-                    this.tagId,
-                    this.sortingAlgorithm,
-                );
-            } else {
-                this.cachedCategorizedOrderedRooms.defaultRooms = sortRoomsWithAlgorithm(
-                    [...this.cachedCategorizedOrderedRooms.defaultRooms, room],
-                    this.tagId,
-                    this.sortingAlgorithm,
-                );
-            }
-            this.buildCachedOrderedRooms();
-            return true;
-        } else if (cause === RoomUpdateCause.RoomRemoved) {
-            return this.removeRoom(room);
-        } else if (cause === RoomUpdateCause.PossibleMuteChange) {
-            if (this.isMutedToBottom) {
-                return this.onPossibleMuteChange(room);
-            } else {
-                return false;
-            }
-        }
-
-        // TODO: Optimize this to avoid useless operations: https://github.com/vector-im/element-web/issues/14457
-        // For example, we can skip updates to alphabetic (sometimes) and manually ordered tags
-        if (isMuted) {
-            this.cachedCategorizedOrderedRooms.mutedRooms = sortRoomsWithAlgorithm(
-                this.cachedCategorizedOrderedRooms.mutedRooms,
-                this.tagId,
-                this.sortingAlgorithm,
-            );
-        } else {
-            this.cachedCategorizedOrderedRooms.defaultRooms = sortRoomsWithAlgorithm(
-                this.cachedCategorizedOrderedRooms.defaultRooms,
-                this.tagId,
-                this.sortingAlgorithm,
-            );
-        }
-        this.buildCachedOrderedRooms();
-        return true;
-    }
-
-    /**
-     * Remove a room from the cached room list
-     * @param room Room to remove
-     * @returns {boolean} true when room list should update as result
-     */
-    private removeRoom(room: Room): boolean {
-        const defaultIndex = this.cachedCategorizedOrderedRooms.defaultRooms.findIndex((r) => r.roomId === room.roomId);
-        if (defaultIndex > -1) {
-            this.cachedCategorizedOrderedRooms.defaultRooms.splice(defaultIndex, 1);
-            this.buildCachedOrderedRooms();
-            return true;
-        }
-        const mutedIndex = this.cachedCategorizedOrderedRooms.mutedRooms.findIndex((r) => r.roomId === room.roomId);
-        if (mutedIndex > -1) {
-            this.cachedCategorizedOrderedRooms.mutedRooms.splice(mutedIndex, 1);
-            this.buildCachedOrderedRooms();
-            return true;
-        }
-
-        logger.warn(`Tried to remove unknown room from ${this.tagId}: ${room.roomId}`);
-        // room was not in cached lists, no update
-        return false;
-    }
-
-    /**
-     * Sets cachedOrderedRooms from cachedCategorizedOrderedRooms
-     */
-    private buildCachedOrderedRooms(): void {
-        this.cachedOrderedRooms = [
-            ...this.cachedCategorizedOrderedRooms.defaultRooms,
-            ...this.cachedCategorizedOrderedRooms.mutedRooms,
-        ];
-    }
-
-    private getRoomIsMuted(room: Room): boolean {
-        // It's fine for us to call this a lot because it's cached, and we shouldn't be
-        // wasting anything by doing so as the store holds single references
-        const state = RoomNotificationStateStore.instance.getRoomState(room);
-        return state.muted;
-    }
-
-    private categorizeRooms(rooms: Room[]): NaturalCategorizedRoomMap {
-        if (!this.isMutedToBottom) {
-            return { defaultRooms: rooms, mutedRooms: [] };
-        }
-        return rooms.reduce<NaturalCategorizedRoomMap>(
-            (acc, room: Room) => {
-                if (this.getRoomIsMuted(room)) {
-                    acc.mutedRooms.push(room);
-                } else {
-                    acc.defaultRooms.push(room);
-                }
-                return acc;
-            },
-            { defaultRooms: [], mutedRooms: [] } as NaturalCategorizedRoomMap,
-        );
-    }
-
-    private onPossibleMuteChange(room: Room): boolean {
-        const isMuted = this.getRoomIsMuted(room);
-        if (isMuted) {
-            const defaultIndex = this.cachedCategorizedOrderedRooms.defaultRooms.findIndex(
-                (r) => r.roomId === room.roomId,
-            );
-
-            // room has been muted
-            if (defaultIndex > -1) {
-                // remove from the default list
-                this.cachedCategorizedOrderedRooms.defaultRooms.splice(defaultIndex, 1);
-                // add to muted list and reorder
-                this.cachedCategorizedOrderedRooms.mutedRooms = sortRoomsWithAlgorithm(
-                    [...this.cachedCategorizedOrderedRooms.mutedRooms, room],
-                    this.tagId,
-                    this.sortingAlgorithm,
-                );
-                // rebuild
-                this.buildCachedOrderedRooms();
-                return true;
-            }
-        } else {
-            const mutedIndex = this.cachedCategorizedOrderedRooms.mutedRooms.findIndex((r) => r.roomId === room.roomId);
-
-            // room has been unmuted
-            if (mutedIndex > -1) {
-                // remove from the muted list
-                this.cachedCategorizedOrderedRooms.mutedRooms.splice(mutedIndex, 1);
-                // add to default list and reorder
-                this.cachedCategorizedOrderedRooms.defaultRooms = sortRoomsWithAlgorithm(
-                    [...this.cachedCategorizedOrderedRooms.defaultRooms, room],
-                    this.tagId,
-                    this.sortingAlgorithm,
-                );
-                // rebuild
-                this.buildCachedOrderedRooms();
-                return true;
-            }
-        }
-
-        return false;
-    }
-}
diff --git a/apps/web/src/stores/room-list/algorithms/list-ordering/OrderingAlgorithm.ts b/apps/web/src/stores/room-list/algorithms/list-ordering/OrderingAlgorithm.ts
deleted file mode 100644
index 6cb4473524..0000000000
--- a/apps/web/src/stores/room-list/algorithms/list-ordering/OrderingAlgorithm.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { type Room } from "matrix-js-sdk/src/matrix";
-import { logger } from "matrix-js-sdk/src/logger";
-
-import { type RoomUpdateCause } from "../../models";
-import { type TagID } from "../../../room-list-v3/skip-list/tag";
-import { SortAlgorithm } from "../models";
-
-/**
- * Represents a list ordering algorithm. Subclasses should populate the
- * `cachedOrderedRooms` field.
- */
-export abstract class OrderingAlgorithm {
-    protected cachedOrderedRooms: Room[] = [];
-
-    // set by setSortAlgorithm() in ctor
-    protected sortingAlgorithm!: SortAlgorithm;
-
-    protected constructor(
-        protected tagId: TagID,
-        initialSortingAlgorithm: SortAlgorithm,
-    ) {
-        // noinspection JSIgnoredPromiseFromCall
-        this.setSortAlgorithm(initialSortingAlgorithm); // we use the setter for validation
-    }
-
-    /**
-     * The rooms as ordered by the algorithm.
-     */
-    public get orderedRooms(): Room[] {
-        return this.cachedOrderedRooms;
-    }
-
-    public get isMutedToBottom(): boolean {
-        return this.sortingAlgorithm === SortAlgorithm.Recent;
-    }
-
-    /**
-     * Sets the sorting algorithm to use within the list.
-     * @param newAlgorithm The new algorithm. Must be defined.
-     * @returns Resolves when complete.
-     */
-    public setSortAlgorithm(newAlgorithm: SortAlgorithm): void {
-        if (!newAlgorithm) throw new Error("A sorting algorithm must be defined");
-        this.sortingAlgorithm = newAlgorithm;
-
-        // Force regeneration of the rooms
-        this.setRooms(this.orderedRooms);
-    }
-
-    /**
-     * Sets the rooms the algorithm should be handling, implying a reconstruction
-     * of the ordering.
-     * @param rooms The rooms to use going forward.
-     */
-    public abstract setRooms(rooms: Room[]): void;
-
-    /**
-     * Handle a room update. The Algorithm will only call this for causes which
-     * the list ordering algorithm can handle within the same tag. For example,
-     * tag changes will not be sent here.
-     * @param room The room where the update happened.
-     * @param cause The cause of the update.
-     * @returns True if the update requires the Algorithm to update the presentation layers.
-     */
-    public abstract handleRoomUpdate(room: Room, cause: RoomUpdateCause): boolean;
-
-    protected getRoomIndex(room: Room): number {
-        let roomIdx = this.cachedOrderedRooms.indexOf(room);
-        if (roomIdx === -1) {
-            // can only happen if the js-sdk's store goes sideways.
-            logger.warn(`Degrading performance to find missing room in "${this.tagId}": ${room.roomId}`);
-            roomIdx = this.cachedOrderedRooms.findIndex((r) => r.roomId === room.roomId);
-        }
-        return roomIdx;
-    }
-}
diff --git a/apps/web/src/stores/room-list/algorithms/list-ordering/index.ts b/apps/web/src/stores/room-list/algorithms/list-ordering/index.ts
deleted file mode 100644
index 50110cda5d..0000000000
--- a/apps/web/src/stores/room-list/algorithms/list-ordering/index.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { ImportanceAlgorithm } from "./ImportanceAlgorithm";
-import { ListAlgorithm, type SortAlgorithm } from "../models";
-import { NaturalAlgorithm } from "./NaturalAlgorithm";
-import { type TagID } from "../../../room-list-v3/skip-list/tag";
-import { type OrderingAlgorithm } from "./OrderingAlgorithm";
-
-interface AlgorithmFactory {
-    (tagId: TagID, initialSortingAlgorithm: SortAlgorithm): OrderingAlgorithm;
-}
-
-const ALGORITHM_FACTORIES: { [algorithm in ListAlgorithm]: AlgorithmFactory } = {
-    [ListAlgorithm.Natural]: (tagId, initSort) => new NaturalAlgorithm(tagId, initSort),
-    [ListAlgorithm.Importance]: (tagId, initSort) => new ImportanceAlgorithm(tagId, initSort),
-};
-
-/**
- * Gets an instance of the defined algorithm
- * @param {ListAlgorithm} algorithm The algorithm to get an instance of.
- * @param {TagID} tagId The tag the algorithm is for.
- * @param {SortAlgorithm} initSort The initial sorting algorithm for the ordering algorithm.
- * @returns {Algorithm} The algorithm instance.
- */
-export function getListAlgorithmInstance(
-    algorithm: ListAlgorithm,
-    tagId: TagID,
-    initSort: SortAlgorithm,
-): OrderingAlgorithm {
-    if (!ALGORITHM_FACTORIES[algorithm]) {
-        throw new Error(`${algorithm} is not a known algorithm`);
-    }
-
-    return ALGORITHM_FACTORIES[algorithm](tagId, initSort);
-}
diff --git a/apps/web/src/stores/room-list/algorithms/models.ts b/apps/web/src/stores/room-list/algorithms/models.ts
deleted file mode 100644
index 99d5874e2d..0000000000
--- a/apps/web/src/stores/room-list/algorithms/models.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { type Room } from "matrix-js-sdk/src/matrix";
-
-import { type TagID } from "../../room-list-v3/skip-list/tag";
-import { type OrderingAlgorithm } from "./list-ordering/OrderingAlgorithm";
-
-export enum SortAlgorithm {
-    Alphabetic = "ALPHABETIC",
-    Recent = "RECENT",
-}
-
-export enum ListAlgorithm {
-    // Orders Red > Grey > Bold > Idle
-    Importance = "IMPORTANCE",
-
-    // Orders however the SortAlgorithm decides
-    Natural = "NATURAL",
-}
-
-export interface ITagSortingMap {
-    // @ts-ignore - TypeScript really wants this to be [tagId: string] but we know better.
-    [tagId: TagID]: SortAlgorithm;
-}
-
-export interface IListOrderingMap {
-    // @ts-ignore - TypeScript really wants this to be [tagId: string] but we know better.
-    [tagId: TagID]: ListAlgorithm;
-}
-
-export interface IOrderingAlgorithmMap {
-    // @ts-ignore - TypeScript really wants this to be [tagId: string] but we know better.
-    [tagId: TagID]: OrderingAlgorithm;
-}
-
-export interface ITagMap {
-    // @ts-ignore - TypeScript really wants this to be [tagId: string] but we know better.
-    [tagId: TagID]: Room[];
-}
diff --git a/apps/web/src/stores/room-list/algorithms/tag-sorting/AlphabeticAlgorithm.ts b/apps/web/src/stores/room-list/algorithms/tag-sorting/AlphabeticAlgorithm.ts
deleted file mode 100644
index 2f1bbbfa9f..0000000000
--- a/apps/web/src/stores/room-list/algorithms/tag-sorting/AlphabeticAlgorithm.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { type Room } from "matrix-js-sdk/src/matrix";
-
-import { type TagID } from "../../../room-list-v3/skip-list/tag";
-import { type IAlgorithm } from "./IAlgorithm";
-
-/**
- * Sorts rooms according to the browser's determination of alphabetic.
- */
-export class AlphabeticAlgorithm implements IAlgorithm {
-    public sortRooms(rooms: Room[], tagId: TagID): Room[] {
-        const collator = new Intl.Collator();
-        return rooms.sort((a, b) => {
-            return collator.compare(a.name, b.name);
-        });
-    }
-}
diff --git a/apps/web/src/stores/room-list/algorithms/tag-sorting/IAlgorithm.ts b/apps/web/src/stores/room-list/algorithms/tag-sorting/IAlgorithm.ts
deleted file mode 100644
index 69f3222c9b..0000000000
--- a/apps/web/src/stores/room-list/algorithms/tag-sorting/IAlgorithm.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { type Room } from "matrix-js-sdk/src/matrix";
-
-import { type TagID } from "../../../room-list-v3/skip-list/tag";
-
-/**
- * Represents a tag sorting algorithm.
- */
-export interface IAlgorithm {
-    /**
-     * Sorts the given rooms according to the sorting rules of the algorithm.
-     * @param {Room[]} rooms The rooms to sort.
-     * @param {TagID} tagId The tag ID in which the rooms are being sorted.
-     * @returns {Room[]} Returns the sorted rooms.
-     */
-    sortRooms(rooms: Room[], tagId: TagID): Room[];
-}
diff --git a/apps/web/src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm.ts b/apps/web/src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm.ts
deleted file mode 100644
index eacb4e5253..0000000000
--- a/apps/web/src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { type Room, type MatrixEvent, EventType } from "matrix-js-sdk/src/matrix";
-
-import { type TagID } from "../../../room-list-v3/skip-list/tag";
-import { type IAlgorithm } from "./IAlgorithm";
-import { MatrixClientPeg } from "../../../../MatrixClientPeg";
-import * as Unread from "../../../../Unread";
-import { EffectiveMembership, getEffectiveMembership } from "../../../../utils/membership";
-
-export function shouldCauseReorder(event: MatrixEvent): boolean {
-    const type = event.getType();
-    const content = event.getContent();
-    const prevContent = event.getPrevContent();
-
-    // Never ignore membership changes
-    if (type === EventType.RoomMember && prevContent.membership !== content.membership) return true;
-
-    // Ignore display name changes
-    if (type === EventType.RoomMember && prevContent.displayname !== content.displayname) return false;
-    // Ignore avatar changes
-    if (type === EventType.RoomMember && prevContent.avatar_url !== content.avatar_url) return false;
-
-    return true;
-}
-
-export const sortRooms = (rooms: Room[]): Room[] => {
-    // We cache the timestamp lookup to avoid iterating forever on the timeline
-    // of events. This cache only survives a single sort though.
-    // We wouldn't need this if `.sort()` didn't constantly try and compare all
-    // of the rooms to each other.
-
-    // TODO: We could probably improve the sorting algorithm here by finding changes.
-    // See https://github.com/vector-im/element-web/issues/14459
-    // For example, if we spent a little bit of time to determine which elements have
-    // actually changed (probably needs to be done higher up?) then we could do an
-    // insertion sort or similar on the limited set of changes.
-
-    // TODO: Don't assume we're using the same client as the peg
-    // See https://github.com/vector-im/element-web/issues/14458
-    let myUserId = "";
-    if (MatrixClientPeg.get()) {
-        myUserId = MatrixClientPeg.get()!.getSafeUserId();
-    }
-
-    const tsCache: { [roomId: string]: number } = {};
-
-    return rooms.sort((a, b) => {
-        const roomALastTs = tsCache[a.roomId] ?? getLastTs(a, myUserId);
-        const roomBLastTs = tsCache[b.roomId] ?? getLastTs(b, myUserId);
-
-        tsCache[a.roomId] = roomALastTs;
-        tsCache[b.roomId] = roomBLastTs;
-
-        return roomBLastTs - roomALastTs;
-    });
-};
-
-export const getLastTs = (r: Room, userId: string): number => {
-    const mainTimelineLastTs = ((): number => {
-        // Apparently we can have rooms without timelines, at least under testing
-        // environments. Just return MAX_INT when this happens.
-        if (!r?.timeline) {
-            return Number.MAX_SAFE_INTEGER;
-        }
-        // MSC4186: Simplified Sliding Sync sets this.
-        // If it's present, sort by it.
-        const bumpStamp = r.getBumpStamp();
-        if (bumpStamp) {
-            return bumpStamp;
-        }
-
-        // If the room hasn't been joined yet, it probably won't have a timeline to
-        // parse. We'll still fall back to the timeline if this fails, but chances
-        // are we'll at least have our own membership event to go off of.
-        const effectiveMembership = getEffectiveMembership(r.getMyMembership());
-        if (effectiveMembership !== EffectiveMembership.Join) {
-            const membershipEvent = r.currentState.getStateEvents(EventType.RoomMember, userId);
-            if (membershipEvent && !Array.isArray(membershipEvent)) {
-                return membershipEvent.getTs();
-            }
-        }
-
-        for (let i = r.timeline.length - 1; i >= 0; --i) {
-            const ev = r.timeline[i];
-            if (!ev.getTs()) continue; // skip events that don't have timestamps (tests only?)
-
-            if (
-                (ev.getSender() === userId && shouldCauseReorder(ev)) ||
-                Unread.eventTriggersUnreadCount(r.client, ev)
-            ) {
-                return ev.getTs();
-            }
-        }
-
-        // we might only have events that don't trigger the unread indicator,
-        // in which case use the oldest event even if normally it wouldn't count.
-        // This is better than just assuming the last event was forever ago.
-        return r.timeline[0]?.getTs() ?? Number.MAX_SAFE_INTEGER;
-    })();
-
-    const threadLastEventTimestamps = r.getThreads().map((thread) => {
-        const event = thread.replyToEvent ?? thread.rootEvent;
-        return event?.getTs() ?? 0;
-    });
-
-    return Math.max(mainTimelineLastTs, ...threadLastEventTimestamps);
-};
-
-/**
- * Sorts rooms according to the last event's timestamp in each room that seems
- * useful to the user.
- */
-export class RecentAlgorithm implements IAlgorithm {
-    public sortRooms(rooms: Room[], tagId: TagID): Room[] {
-        return sortRooms(rooms);
-    }
-
-    public getLastTs(room: Room, userId: string): number {
-        return getLastTs(room, userId);
-    }
-}
diff --git a/apps/web/src/stores/room-list/algorithms/tag-sorting/index.ts b/apps/web/src/stores/room-list/algorithms/tag-sorting/index.ts
deleted file mode 100644
index 236fde6b8d..0000000000
--- a/apps/web/src/stores/room-list/algorithms/tag-sorting/index.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { type Room } from "matrix-js-sdk/src/matrix";
-
-import { SortAlgorithm } from "../models";
-import { type IAlgorithm } from "./IAlgorithm";
-import { type TagID } from "../../../room-list-v3/skip-list/tag";
-import { RecentAlgorithm } from "./RecentAlgorithm";
-import { AlphabeticAlgorithm } from "./AlphabeticAlgorithm";
-
-const ALGORITHM_INSTANCES: { [algorithm in SortAlgorithm]: IAlgorithm } = {
-    [SortAlgorithm.Recent]: new RecentAlgorithm(),
-    [SortAlgorithm.Alphabetic]: new AlphabeticAlgorithm(),
-};
-
-/**
- * Gets an instance of the defined algorithm
- * @param {SortAlgorithm} algorithm The algorithm to get an instance of.
- * @returns {IAlgorithm} The algorithm instance.
- */
-export function getSortingAlgorithmInstance(algorithm: SortAlgorithm): IAlgorithm {
-    if (!ALGORITHM_INSTANCES[algorithm]) {
-        throw new Error(`${algorithm} is not a known algorithm`);
-    }
-
-    return ALGORITHM_INSTANCES[algorithm];
-}
-
-/**
- * Sorts rooms in a given tag according to the algorithm given.
- * @param {Room[]} rooms The rooms to sort.
- * @param {TagID} tagId The tag in which the sorting is occurring.
- * @param {SortAlgorithm} algorithm The algorithm to use for sorting.
- * @returns {Room[]} Returns the sorted rooms.
- */
-export function sortRoomsWithAlgorithm(rooms: Room[], tagId: TagID, algorithm: SortAlgorithm): Room[] {
-    return getSortingAlgorithmInstance(algorithm).sortRooms(rooms, tagId);
-}
diff --git a/apps/web/src/stores/room-list/filters/IFilterCondition.ts b/apps/web/src/stores/room-list/filters/IFilterCondition.ts
deleted file mode 100644
index 8dd77fd4b9..0000000000
--- a/apps/web/src/stores/room-list/filters/IFilterCondition.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { type Room } from "matrix-js-sdk/src/matrix";
-import { type EventEmitter } from "events";
-
-export const FILTER_CHANGED = "filter_changed";
-
-/**
- * A filter condition for the room list, determining if a room
- * should be shown or not.
- *
- * All filter conditions are expected to be stable executions,
- * meaning that given the same input the same answer will be
- * returned (thus allowing caching). As such, filter conditions
- * can, but shouldn't, do heavier logic and not worry about being
- * called constantly by the room list. When the condition changes
- * such that different inputs lead to different answers (such
- * as a change in the user's input), this emits FILTER_CHANGED.
- */
-export interface IFilterCondition extends EventEmitter {
-    /**
-     * Determines if a given room should be visible under this
-     * condition.
-     * @param room The room to check.
-     * @returns True if the room should be visible.
-     */
-    isVisible(room: Room): boolean;
-}
diff --git a/apps/web/src/stores/room-list/filters/SpaceFilterCondition.ts b/apps/web/src/stores/room-list/filters/SpaceFilterCondition.ts
deleted file mode 100644
index 02e20e9103..0000000000
--- a/apps/web/src/stores/room-list/filters/SpaceFilterCondition.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2021 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { EventEmitter } from "events";
-import { type Room } from "matrix-js-sdk/src/matrix";
-
-import { FILTER_CHANGED, type IFilterCondition } from "./IFilterCondition";
-import { type IDestroyable } from "../../../utils/IDestroyable";
-import SpaceStore from "../../spaces/SpaceStore";
-import { isMetaSpace, MetaSpace, type SpaceKey } from "../../spaces";
-import { setHasDiff } from "../../../utils/sets";
-import SettingsStore from "../../../settings/SettingsStore";
-
-/**
- * A filter condition for the room list which reveals rooms which
- * are a member of a given space or if no space is selected shows:
- *  + Orphaned rooms (ones not in any space you are a part of)
- *  + All DMs
- */
-export class SpaceFilterCondition extends EventEmitter implements IFilterCondition, IDestroyable {
-    private roomIds = new Set<string>();
-    private userIds = new Set<string>();
-    private showPeopleInSpace = true;
-    private space: SpaceKey = MetaSpace.Home;
-
-    public isVisible(room: Room): boolean {
-        return SpaceStore.instance.isRoomInSpace(this.space, room.roomId);
-    }
-
-    private onStoreUpdate = async (forceUpdate = false): Promise<void> => {
-        const beforeRoomIds = this.roomIds;
-        // clone the set as it may be mutated by the space store internally
-        this.roomIds = new Set(SpaceStore.instance.getSpaceFilteredRoomIds(this.space));
-
-        const beforeUserIds = this.userIds;
-        // clone the set as it may be mutated by the space store internally
-        this.userIds = new Set(SpaceStore.instance.getSpaceFilteredUserIds(this.space));
-
-        const beforeShowPeopleInSpace = this.showPeopleInSpace;
-        this.showPeopleInSpace =
-            isMetaSpace(this.space[0]) || SettingsStore.getValue("Spaces.showPeopleInSpace", this.space);
-
-        if (
-            forceUpdate ||
-            beforeShowPeopleInSpace !== this.showPeopleInSpace ||
-            setHasDiff(beforeRoomIds, this.roomIds) ||
-            setHasDiff(beforeUserIds, this.userIds)
-        ) {
-            this.emit(FILTER_CHANGED);
-            // XXX: Room List Store has a bug where updates to the pre-filter during a local echo of a
-            // tags transition seem to be ignored, so refire in the next tick to work around it
-            setTimeout(() => {
-                this.emit(FILTER_CHANGED);
-            });
-        }
-    };
-
-    public updateSpace(space: SpaceKey): void {
-        SpaceStore.instance.off(this.space, this.onStoreUpdate);
-        SpaceStore.instance.on((this.space = space), this.onStoreUpdate);
-        this.onStoreUpdate(true); // initial update from the change to the space
-    }
-
-    public destroy(): void {
-        SpaceStore.instance.off(this.space, this.onStoreUpdate);
-    }
-}
diff --git a/apps/web/src/stores/room-list/models.ts b/apps/web/src/stores/room-list/models.ts
deleted file mode 100644
index 90c721a9e2..0000000000
--- a/apps/web/src/stores/room-list/models.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { DefaultTagID } from "../room-list-v3/skip-list/tag";
-
-export const OrderedDefaultTagIDs = [
-    DefaultTagID.Invite,
-    DefaultTagID.Favourite,
-    DefaultTagID.DM,
-    DefaultTagID.Conference,
-    DefaultTagID.Untagged,
-    DefaultTagID.LowPriority,
-    DefaultTagID.ServerNotice,
-    DefaultTagID.Suggested,
-    DefaultTagID.Archived,
-];
-
-export enum RoomUpdateCause {
-    Timeline = "TIMELINE",
-    PossibleTagChange = "POSSIBLE_TAG_CHANGE",
-    PossibleMuteChange = "POSSIBLE_MUTE_CHANGE",
-    ReadReceipt = "READ_RECEIPT",
-    NewRoom = "NEW_ROOM",
-    RoomRemoved = "ROOM_REMOVED",
-}
diff --git a/apps/web/test/unit-tests/stores/SpaceStore-test.ts b/apps/web/src/stores/spaces/SpaceStore.test.ts
similarity index 85%
rename from apps/web/test/unit-tests/stores/SpaceStore-test.ts
rename to apps/web/src/stores/spaces/SpaceStore.test.ts
index 2058edaa4a..b890b861af 100644
--- a/apps/web/test/unit-tests/stores/SpaceStore-test.ts
+++ b/apps/web/src/stores/spaces/SpaceStore.test.ts
@@ -6,8 +6,10 @@ 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 EventEmitter } from "events";
-import { mocked } from "jest-mock";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeAll, beforeEach, afterEach } from "vitest";
+import { type EventEmitter } from "node:events";
 import {
     EventType,
     RoomMember,
@@ -20,30 +22,31 @@ import {
     type RoomState,
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
+import * as testUtils from "test-utils";
+import { mkEvent, setupAsyncStoreWithClient, stubClient } from "test-utils";
 
-import SpaceStore from "../../../src/stores/spaces/SpaceStore";
+import SpaceStore from "./SpaceStore";
 import {
     MetaSpace,
     UPDATE_HOME_BEHAVIOUR,
     UPDATE_INVITED_SPACES,
     UPDATE_SELECTED_SPACE,
     UPDATE_TOP_LEVEL_SPACES,
-} from "../../../src/stores/spaces";
-import * as testUtils from "../../test-utils";
-import { mkEvent, stubClient } from "../../test-utils";
+} from ".";
 import DMRoomMap from "../../../src/utils/DMRoomMap";
 import defaultDispatcher from "../../../src/dispatcher/dispatcher";
 import SettingsStore from "../../../src/settings/SettingsStore";
-import { SettingLevel } from "../../../src/settings/SettingLevel";
-import { Action } from "../../../src/dispatcher/actions";
-import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
-import RoomListStore from "../../../src/stores/room-list/RoomListStore";
-import { DefaultTagID } from "../../../src/stores/room-list-v3/skip-list/tag";
-import { RoomNotificationStateStore } from "../../../src/stores/notifications/RoomNotificationStateStore";
-import { NotificationLevel } from "../../../src/stores/notifications/NotificationLevel";
-import { storeRoomAliasInCache } from "../../../src/RoomAliasCache.ts";
+import { SettingLevel } from "../../settings/SettingLevel";
+import { Action } from "../../dispatcher/actions";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import RoomListStoreV3 from "../room-list-v3/RoomListStoreV3";
+import { DefaultTagID } from "../room-list-v3/skip-list/tag";
+import { RoomNotificationStateStore } from "../notifications/RoomNotificationStateStore";
+import { NotificationLevel } from "../notifications/NotificationLevel";
+import { storeRoomAliasInCache } from "../../RoomAliasCache.ts";
+import { TestSDKContext } from "../../../test/unit-tests/TestSDKContext.ts";
 
-jest.useFakeTimers();
+vi.useFakeTimers();
 
 const testUserId = "@test:user";
 
@@ -74,14 +77,14 @@ const space2 = "!space2:server";
 const space3 = "!space3:server";
 const space4 = "!space4:server";
 
-const getUserIdForRoomId = jest.fn((roomId: string) => {
+const getUserIdForRoomId = vi.fn((roomId: string) => {
     return {
         [dm1]: dm1Partner.userId,
         [dm2]: dm2Partner.userId,
         [dm3]: dm3Partner.userId,
     }[roomId];
 });
-const getDMRoomsForUserId = jest.fn((userId) => {
+const getDMRoomsForUserId = vi.fn((userId) => {
     switch (userId) {
         case dm1Partner.userId:
             return [dm1];
@@ -98,10 +101,12 @@ DMRoomMap.sharedInstance = { getUserIdForRoomId, getDMRoomsForUserId };
 
 describe("SpaceStore", () => {
     stubClient();
-    const store = SpaceStore.instance;
     const client = MatrixClientPeg.safeGet();
+    const sdkContext = new TestSDKContext();
+    sdkContext._client = client;
+    const store = sdkContext.spaceStore;
 
-    const spyDispatcher = jest.spyOn(defaultDispatcher, "dispatch");
+    const spyDispatcher = vi.spyOn(defaultDispatcher, "dispatch");
 
     let rooms: Room[] = [];
     const mkRoom = (roomId: string) => testUtils.mkRoom(client, roomId, rooms);
@@ -109,31 +114,29 @@ describe("SpaceStore", () => {
     const viewRoom = (roomId: string) => defaultDispatcher.dispatch({ action: Action.ViewRoom, room_id: roomId }, true);
 
     const run = async () => {
-        mocked(client).getRoom.mockImplementation((roomId) => rooms.find((room) => room.roomId === roomId) || null);
-        mocked(client).getRoomUpgradeHistory.mockImplementation((roomId) => {
+        vi.mocked(client).getRoom.mockImplementation((roomId) => rooms.find((room) => room.roomId === roomId) || null);
+        vi.mocked(client).getRoomUpgradeHistory.mockImplementation((roomId) => {
             const room = rooms.find((room) => room.roomId === roomId);
             return room ? [room] : [];
         });
         await testUtils.setupAsyncStoreWithClient(store, client);
-        jest.runOnlyPendingTimers();
+        vi.runOnlyPendingTimers();
     };
 
     const setShowAllRooms = async (value: boolean) => {
         if (store.allRoomsInHome === value) return;
         const emitProm = testUtils.emitPromise(store, UPDATE_HOME_BEHAVIOUR);
         await SettingsStore.setValue("Spaces.allRoomsInHome", null, SettingLevel.DEVICE, value);
-        jest.runOnlyPendingTimers(); // run async dispatch
+        vi.runOnlyPendingTimers(); // run async dispatch
         await emitProm;
     };
 
     beforeEach(async () => {
-        jest.runOnlyPendingTimers(); // run async dispatch
-        mocked(client).getVisibleRooms.mockReturnValue((rooms = []));
+        vi.runOnlyPendingTimers(); // run async dispatch
+        vi.mocked(client).getVisibleRooms.mockReturnValue((rooms = []));
 
         await SettingsStore.setValue("Spaces.enabledMetaSpaces", null, SettingLevel.DEVICE, {
             [MetaSpace.Home]: true,
-            [MetaSpace.Favourites]: true,
-            [MetaSpace.People]: true,
             [MetaSpace.Orphans]: true,
         });
 
@@ -141,8 +144,6 @@ describe("SpaceStore", () => {
     });
 
     afterEach(async () => {
-        // Disable the new room list feature flag
-        await SettingsStore.setValue("feature_new_room_list", null, SettingLevel.DEVICE, false);
         await testUtils.resetAsyncStoreWithClient(store);
     });
 
@@ -323,7 +324,7 @@ describe("SpaceStore", () => {
                 mkSpace(space3, [invite2]);
                 mkSpace(space4, [room4, fav2, space2, space3]);
 
-                mocked(client).getRoom.mockImplementation(
+                vi.mocked(client).getRoom.mockImplementation(
                     (roomId) => rooms.find((room) => room.roomId === roomId) || null,
                 );
 
@@ -336,20 +337,20 @@ describe("SpaceStore", () => {
                 });
 
                 [invite1, invite2].forEach((roomId) => {
-                    mocked(client.getRoom(roomId)!).getMyMembership.mockReturnValue(KnownMembership.Invite);
+                    vi.mocked(client.getRoom(roomId)!).getMyMembership.mockReturnValue(KnownMembership.Invite);
                 });
 
                 // have dmPartner1 be in space1 with you
                 const mySpace1Member = new RoomMember(space1, testUserId);
                 mySpace1Member.membership = KnownMembership.Join;
-                (rooms.find((r) => r.roomId === space1)!.getMembers as jest.Mock).mockReturnValue([
+                vi.mocked(rooms.find((r) => r.roomId === space1)!.getMembers).mockReturnValue([
                     mySpace1Member,
                     dm1Partner,
                 ]);
                 // have dmPartner2 be in space2 with you
                 const mySpace2Member = new RoomMember(space2, testUserId);
                 mySpace2Member.membership = KnownMembership.Join;
-                (rooms.find((r) => r.roomId === space2)!.getMembers as jest.Mock).mockReturnValue([
+                vi.mocked(rooms.find((r) => r.roomId === space2)!.getMembers).mockReturnValue([
                     mySpace2Member,
                     dm2Partner,
                 ]);
@@ -368,9 +369,9 @@ describe("SpaceStore", () => {
                         ts: Date.now(),
                     }) as MatrixEvent,
                 ]);
-                mocked(cliRoom2!.currentState).getStateEvents.mockImplementation(room2MockStateEvents);
+                vi.mocked(cliRoom2!.currentState).getStateEvents.mockImplementation(room2MockStateEvents);
                 const cliSpace2 = client.getRoom(space2);
-                mocked(cliSpace2!.currentState).maySendStateEvent.mockImplementation(
+                vi.mocked(cliSpace2!.currentState).maySendStateEvent.mockImplementation(
                     (evType: string, userId: string) => {
                         if (evType === EventType.SpaceChild) {
                             return userId === client.getUserId();
@@ -381,7 +382,7 @@ describe("SpaceStore", () => {
 
                 // room 3 claims to be a child of space3 but is not due to invalid m.space.parent (permissions)
                 const cliRoom3 = client.getRoom(room3);
-                mocked(cliRoom3!.currentState).getStateEvents.mockImplementation(
+                vi.mocked(cliRoom3!.currentState).getStateEvents.mockImplementation(
                     testUtils.mockStateEventImplementation([
                         mkEvent({
                             event: true,
@@ -395,7 +396,7 @@ describe("SpaceStore", () => {
                     ]),
                 );
                 const cliSpace3 = client.getRoom(space3);
-                mocked(cliSpace3!.currentState).maySendStateEvent.mockImplementation(
+                vi.mocked(cliSpace3!.currentState).maySendStateEvent.mockImplementation(
                     (evType: string, userId: string) => {
                         if (evType === EventType.SpaceChild) {
                             return false;
@@ -406,10 +407,10 @@ describe("SpaceStore", () => {
 
                 [videoRoomPrivate, videoRoomPublic].forEach((roomId) => {
                     const videoRoom = client.getRoom(roomId);
-                    (videoRoom!.isCallRoom as jest.Mock).mockReturnValue(true);
+                    vi.mocked(videoRoom!.isCallRoom).mockReturnValue(true);
                 });
                 const videoRoomPublicRoom = client.getRoom(videoRoomPublic);
-                (videoRoomPublicRoom!.getJoinRule as jest.Mock).mockReturnValue(JoinRule.Public);
+                vi.mocked(videoRoomPublicRoom!.getJoinRule).mockReturnValue(JoinRule.Public);
                 await run();
             });
 
@@ -444,18 +445,6 @@ describe("SpaceStore", () => {
                     expect(store.isRoomInSpace(MetaSpace.Home, room1)).toBeTruthy();
                 });
 
-                it("favourites space does contain favourites even if they are also shown in a space", async () => {
-                    expect(store.isRoomInSpace(MetaSpace.Favourites, fav1)).toBeTruthy();
-                    expect(store.isRoomInSpace(MetaSpace.Favourites, fav2)).toBeTruthy();
-                    expect(store.isRoomInSpace(MetaSpace.Favourites, fav3)).toBeTruthy();
-                });
-
-                it("people space does contain people even if they are also shown in a space", async () => {
-                    expect(store.isRoomInSpace(MetaSpace.People, dm1)).toBeTruthy();
-                    expect(store.isRoomInSpace(MetaSpace.People, dm2)).toBeTruthy();
-                    expect(store.isRoomInSpace(MetaSpace.People, dm3)).toBeTruthy();
-                });
-
                 it("orphans space does contain orphans even if they are also shown in all rooms", async () => {
                     await setShowAllRooms(true);
                     expect(store.isRoomInSpace(MetaSpace.Orphans, orphan1)).toBeTruthy();
@@ -476,7 +465,7 @@ describe("SpaceStore", () => {
 
                 it("updates the video room space when the room type changes", async () => {
                     expect(store.isRoomInSpace(MetaSpace.VideoRooms, videoRoomPrivate)).toBeTruthy();
-                    (client.getRoom(videoRoomPublic)!.isCallRoom as jest.Mock).mockReturnValue(false);
+                    vi.mocked(client.getRoom(videoRoomPublic)!.isCallRoom).mockReturnValue(false);
                     client.emit(
                         RoomStateEvent.Events,
                         {
@@ -573,27 +562,6 @@ describe("SpaceStore", () => {
                 });
             });
 
-            it("dms are only added to Notification States for only the People Space", async () => {
-                [dm1, dm2, dm3].forEach((d) => {
-                    expect(
-                        store
-                            .getNotificationState(MetaSpace.People)
-                            .rooms.map((r) => r.roomId)
-                            .includes(d),
-                    ).toBeTruthy();
-                });
-                [space1, space2, space3, MetaSpace.Home, MetaSpace.Orphans, MetaSpace.Favourites].forEach((s) => {
-                    [dm1, dm2, dm3].forEach((d) => {
-                        expect(
-                            store
-                                .getNotificationState(s)
-                                .rooms.map((r) => r.roomId)
-                                .includes(d),
-                        ).toBeFalsy();
-                    });
-                });
-            });
-
             it("orphan rooms are added to Notification States for only the Home Space", async () => {
                 await setShowAllRooms(false);
                 [orphan1, orphan2].forEach((d) => {
@@ -710,29 +678,6 @@ describe("SpaceStore", () => {
         });
     });
 
-    it("should add new DM Invites to the People Space Notification State", async () => {
-        mkRoom(dm1);
-        mocked(client.getRoom(dm1)!).getMyMembership.mockReturnValue(KnownMembership.Join);
-        mocked(client).getRoom.mockImplementation((roomId) => rooms.find((room) => room.roomId === roomId) || null);
-
-        await run();
-
-        mkRoom(dm2);
-        const cliDm2 = client.getRoom(dm2)!;
-        mocked(cliDm2).getMyMembership.mockReturnValue(KnownMembership.Invite);
-        mocked(client).getRoom.mockImplementation((roomId) => rooms.find((room) => room.roomId === roomId) || null);
-        client.emit(RoomEvent.MyMembership, cliDm2, KnownMembership.Invite);
-
-        [dm1, dm2].forEach((d) => {
-            expect(
-                store
-                    .getNotificationState(MetaSpace.People)
-                    .rooms.map((r) => r.roomId)
-                    .includes(d),
-            ).toBeTruthy();
-        });
-    });
-
     describe("hierarchy resolution update tests", () => {
         it("updates state when spaces are joined", async () => {
             await run();
@@ -860,7 +805,7 @@ describe("SpaceStore", () => {
                     ts: Date.now(),
                 });
                 const spaceRoom = client.getRoom(spaceId)!;
-                mocked(spaceRoom.currentState).getStateEvents.mockImplementation(
+                vi.mocked(spaceRoom.currentState).getStateEvents.mockImplementation(
                     testUtils.mockStateEventImplementation([childEvent]),
                 );
 
@@ -878,10 +823,10 @@ describe("SpaceStore", () => {
                     ts: Date.now(),
                 });
                 const spaceRoom = client.getRoom(spaceId)!;
-                mocked(spaceRoom.currentState).getStateEvents.mockImplementation(
+                vi.mocked(spaceRoom.currentState).getStateEvents.mockImplementation(
                     testUtils.mockStateEventImplementation([memberEvent]),
                 );
-                mocked(spaceRoom).getMember.mockReturnValue(user);
+                vi.mocked(spaceRoom).getMember.mockReturnValue(user);
 
                 client.emit(RoomStateEvent.Members, memberEvent, spaceRoom.currentState, user);
             };
@@ -890,7 +835,7 @@ describe("SpaceStore", () => {
                 await run();
 
                 const room5 = mkRoom("!room5:server");
-                const emitSpy = jest.spyOn(store, "emit").mockClear();
+                const emitSpy = vi.spyOn(store, "emit").mockClear();
                 // add room5 into space2
                 addChildRoom(space2, room5.roomId);
 
@@ -922,7 +867,7 @@ describe("SpaceStore", () => {
             it("emits events for parent spaces when a member is added", async () => {
                 await run();
 
-                const emitSpy = jest.spyOn(store, "emit").mockClear();
+                const emitSpy = vi.spyOn(store, "emit").mockClear();
                 // add into space2
                 addMember(space2, dm1Partner);
 
@@ -950,7 +895,7 @@ describe("SpaceStore", () => {
     });
 
     describe("active space switching tests", () => {
-        const fn = jest.spyOn(store, "emit");
+        const fn = vi.spyOn(store, "emit");
 
         beforeEach(async () => {
             mkRoom(room1); // not a space
@@ -1046,9 +991,9 @@ describe("SpaceStore", () => {
         expect(space.loadMembersIfNeeded).not.toHaveBeenCalled();
 
         store.setActiveSpace(space1, true);
-        jest.runOnlyPendingTimers();
+        vi.runOnlyPendingTimers();
         expect(space.loadMembersIfNeeded).toHaveBeenCalled();
-        jest.runAllTimers();
+        vi.runAllTimers();
 
         expect(store.activeSpace).toBe(space1);
         expect(getCurrentRoom()).toBe(room1);
@@ -1057,7 +1002,7 @@ describe("SpaceStore", () => {
         expect(store.activeSpace).toBe(space1);
         expect(getCurrentRoom()).toBe(room1);
 
-        jest.runAllTimers();
+        vi.runAllTimers();
         expect(store.activeSpace).toBe(space1);
         expect(getCurrentRoom()).toBe(room1);
     });
@@ -1085,7 +1030,7 @@ describe("SpaceStore", () => {
         });
 
         const getCurrentRoom = () => {
-            jest.runOnlyPendingTimers();
+            vi.runOnlyPendingTimers();
             return currentRoom;
         };
 
@@ -1154,7 +1099,7 @@ describe("SpaceStore", () => {
             mkSpace(space2, [room1, room2]);
 
             const cliRoom2 = client.getRoom(room2)!;
-            mocked(cliRoom2.currentState).getStateEvents.mockImplementation(
+            vi.mocked(cliRoom2.currentState).getStateEvents.mockImplementation(
                 testUtils.mockStateEventImplementation([
                     mkEvent({
                         event: true,
@@ -1199,16 +1144,15 @@ describe("SpaceStore", () => {
         });
 
         it("switch to first valid space when selected metaspace is disabled", async () => {
-            store.setActiveSpace(MetaSpace.People, false);
-            expect(store.activeSpace).toBe(MetaSpace.People);
-            await SettingsStore.setValue("Spaces.enabledMetaSpaces", null, SettingLevel.DEVICE, {
-                [MetaSpace.Home]: false,
-                [MetaSpace.Favourites]: true,
-                [MetaSpace.People]: false,
-                [MetaSpace.Orphans]: true,
-            });
-            jest.runAllTimers();
+            viewRoom(room1);
+            store.setActiveSpace(MetaSpace.Orphans, false);
             expect(store.activeSpace).toBe(MetaSpace.Orphans);
+            await SettingsStore.setValue("Spaces.enabledMetaSpaces", null, SettingLevel.DEVICE, {
+                [MetaSpace.Home]: true,
+                [MetaSpace.Orphans]: false,
+            });
+            vi.runAllTimers();
+            expect(store.activeSpace).toBe(space1);
         });
 
         it("when switching rooms in the all rooms home space don't switch to related space", async () => {
@@ -1246,7 +1190,7 @@ describe("SpaceStore", () => {
         });
 
         it("avoids cycles", () => {
-            const fn = jest.fn();
+            const fn = vi.fn();
             store.traverseSpace("!b:server", fn);
 
             expect(fn).toHaveBeenCalledTimes(3);
@@ -1256,7 +1200,7 @@ describe("SpaceStore", () => {
         });
 
         it("including rooms", () => {
-            const fn = jest.fn();
+            const fn = vi.fn();
             store.traverseSpace("!b:server", fn, true);
 
             expect(fn).toHaveBeenCalledTimes(8); // twice for shared-child
@@ -1270,7 +1214,7 @@ describe("SpaceStore", () => {
         });
 
         it("excluding rooms", () => {
-            const fn = jest.fn();
+            const fn = vi.fn();
             store.traverseSpace("!b:server", fn, false);
 
             expect(fn).toHaveBeenCalledTimes(3);
@@ -1289,44 +1233,40 @@ describe("SpaceStore", () => {
         const rootSpace = mkSpace(space1, [room1, room2, space2]);
         rootSpace.getMyMembership.mockReturnValue(KnownMembership.Invite);
         client.emit(ClientEvent.Room, rootSpace);
-        jest.runOnlyPendingTimers();
-        expect(SpaceStore.instance.invitedSpaces).toStrictEqual([rootSpace]);
-        expect(SpaceStore.instance.spacePanelSpaces).toStrictEqual([]);
+        vi.runOnlyPendingTimers();
+        expect(sdkContext.spaceStore.invitedSpaces).toStrictEqual([rootSpace]);
+        expect(sdkContext.spaceStore.spacePanelSpaces).toStrictEqual([]);
 
         // accept invite to space
         rootSpace.getMyMembership.mockReturnValue(KnownMembership.Join);
         client.emit(RoomEvent.MyMembership, rootSpace, KnownMembership.Join, KnownMembership.Invite);
-        jest.runOnlyPendingTimers();
-        expect(SpaceStore.instance.invitedSpaces).toStrictEqual([]);
-        expect(SpaceStore.instance.spacePanelSpaces).toStrictEqual([rootSpace]);
+        vi.runOnlyPendingTimers();
+        expect(sdkContext.spaceStore.invitedSpaces).toStrictEqual([]);
+        expect(sdkContext.spaceStore.spacePanelSpaces).toStrictEqual([rootSpace]);
 
         // join room in space
-        expect(SpaceStore.instance.isRoomInSpace(space1, room1)).toBeFalsy();
+        expect(sdkContext.spaceStore.isRoomInSpace(space1, room1)).toBeFalsy();
         const rootSpaceRoom1 = mkRoom(room1);
         rootSpaceRoom1.getMyMembership.mockReturnValue(KnownMembership.Join);
         client.emit(ClientEvent.Room, rootSpaceRoom1);
-        jest.runOnlyPendingTimers();
-        expect(SpaceStore.instance.invitedSpaces).toStrictEqual([]);
-        expect(SpaceStore.instance.spacePanelSpaces).toStrictEqual([rootSpace]);
-        expect(SpaceStore.instance.isRoomInSpace(space1, room1)).toBeTruthy();
-        expect(SpaceStore.instance.isRoomInSpace(MetaSpace.Home, room1)).toBeFalsy();
-        expect(SpaceStore.instance.isRoomInSpace(MetaSpace.Favourites, room1)).toBeFalsy();
-        expect(SpaceStore.instance.isRoomInSpace(MetaSpace.People, room1)).toBeFalsy();
-        expect(SpaceStore.instance.isRoomInSpace(MetaSpace.Orphans, room1)).toBeFalsy();
+        vi.runOnlyPendingTimers();
+        expect(sdkContext.spaceStore.invitedSpaces).toStrictEqual([]);
+        expect(sdkContext.spaceStore.spacePanelSpaces).toStrictEqual([rootSpace]);
+        expect(sdkContext.spaceStore.isRoomInSpace(space1, room1)).toBeTruthy();
+        expect(sdkContext.spaceStore.isRoomInSpace(MetaSpace.Home, room1)).toBeFalsy();
+        expect(sdkContext.spaceStore.isRoomInSpace(MetaSpace.Orphans, room1)).toBeFalsy();
 
         // receive room invite
-        expect(SpaceStore.instance.isRoomInSpace(space1, room2)).toBeFalsy();
+        expect(sdkContext.spaceStore.isRoomInSpace(space1, room2)).toBeFalsy();
         const rootSpaceRoom2 = mkRoom(room2);
         rootSpaceRoom2.getMyMembership.mockReturnValue(KnownMembership.Invite);
         client.emit(ClientEvent.Room, rootSpaceRoom2);
-        jest.runOnlyPendingTimers();
-        expect(SpaceStore.instance.invitedSpaces).toStrictEqual([]);
-        expect(SpaceStore.instance.spacePanelSpaces).toStrictEqual([rootSpace]);
-        expect(SpaceStore.instance.isRoomInSpace(space1, room2)).toBeTruthy();
-        expect(SpaceStore.instance.isRoomInSpace(MetaSpace.Home, room2)).toBeTruthy();
-        expect(SpaceStore.instance.isRoomInSpace(MetaSpace.Favourites, room2)).toBeFalsy();
-        expect(SpaceStore.instance.isRoomInSpace(MetaSpace.People, room2)).toBeFalsy();
-        expect(SpaceStore.instance.isRoomInSpace(MetaSpace.Orphans, room2)).toBeFalsy();
+        vi.runOnlyPendingTimers();
+        expect(sdkContext.spaceStore.invitedSpaces).toStrictEqual([]);
+        expect(sdkContext.spaceStore.spacePanelSpaces).toStrictEqual([rootSpace]);
+        expect(sdkContext.spaceStore.isRoomInSpace(space1, room2)).toBeTruthy();
+        expect(sdkContext.spaceStore.isRoomInSpace(MetaSpace.Home, room2)).toBeTruthy();
+        expect(sdkContext.spaceStore.isRoomInSpace(MetaSpace.Orphans, room2)).toBeFalsy();
 
         // start DM in space
         const myRootSpaceMember = new RoomMember(space1, testUserId);
@@ -1343,7 +1283,7 @@ describe("SpaceStore", () => {
             }
             return null;
         });
-        expect(SpaceStore.instance.getSpaceFilteredUserIds(space1)!.has(dm1Partner.userId)).toBeFalsy();
+        expect(sdkContext.spaceStore.getSpaceFilteredUserIds(space1)!.has(dm1Partner.userId)).toBeFalsy();
         const memberEvent = mkEvent({
             event: true,
             type: EventType.RoomMember,
@@ -1355,28 +1295,26 @@ describe("SpaceStore", () => {
             room: space1,
         });
         client.emit(RoomStateEvent.Members, memberEvent, rootSpace.currentState, dm1Partner);
-        jest.runOnlyPendingTimers();
-        expect(SpaceStore.instance.getSpaceFilteredUserIds(space1)!.has(dm1Partner.userId)).toBeTruthy();
+        vi.runOnlyPendingTimers();
+        expect(sdkContext.spaceStore.getSpaceFilteredUserIds(space1)!.has(dm1Partner.userId)).toBeTruthy();
         const dm1Room = mkRoom(dm1);
         dm1Room.getMyMembership.mockReturnValue(KnownMembership.Join);
         client.emit(ClientEvent.Room, dm1Room);
-        jest.runOnlyPendingTimers();
-        expect(SpaceStore.instance.invitedSpaces).toStrictEqual([]);
-        expect(SpaceStore.instance.spacePanelSpaces).toStrictEqual([rootSpace]);
-        expect(SpaceStore.instance.isRoomInSpace(space1, dm1)).toBeTruthy();
-        expect(SpaceStore.instance.isRoomInSpace(MetaSpace.Home, dm1)).toBeTruthy();
-        expect(SpaceStore.instance.isRoomInSpace(MetaSpace.Favourites, dm1)).toBeFalsy();
-        expect(SpaceStore.instance.isRoomInSpace(MetaSpace.People, dm1)).toBeTruthy();
-        expect(SpaceStore.instance.isRoomInSpace(MetaSpace.Orphans, dm1)).toBeFalsy();
+        vi.runOnlyPendingTimers();
+        expect(sdkContext.spaceStore.invitedSpaces).toStrictEqual([]);
+        expect(sdkContext.spaceStore.spacePanelSpaces).toStrictEqual([rootSpace]);
+        expect(sdkContext.spaceStore.isRoomInSpace(space1, dm1)).toBeTruthy();
+        expect(sdkContext.spaceStore.isRoomInSpace(MetaSpace.Home, dm1)).toBeTruthy();
+        expect(sdkContext.spaceStore.isRoomInSpace(MetaSpace.Orphans, dm1)).toBeFalsy();
 
         // join subspace
         const subspace = mkSpace(space2);
         subspace.getMyMembership.mockReturnValue(KnownMembership.Join);
-        const prom = testUtils.emitPromise(SpaceStore.instance, space1);
+        const prom = testUtils.emitPromise(sdkContext.spaceStore, space1);
         client.emit(ClientEvent.Room, subspace);
-        jest.runOnlyPendingTimers();
-        expect(SpaceStore.instance.invitedSpaces).toStrictEqual([]);
-        expect(SpaceStore.instance.spacePanelSpaces.map((r) => r.roomId)).toStrictEqual([rootSpace.roomId]);
+        vi.runOnlyPendingTimers();
+        expect(sdkContext.spaceStore.invitedSpaces).toStrictEqual([]);
+        expect(sdkContext.spaceStore.spacePanelSpaces.map((r) => r.roomId)).toStrictEqual([rootSpace.roomId]);
         await prom;
     });
 
@@ -1402,22 +1340,19 @@ describe("SpaceStore", () => {
         removeListener();
     });
 
-    it("Favourites and People meta spaces should not be returned when the feature_new_room_list labs flag is enabled", async () => {
-        // Enable the new room list
-        await SettingsStore.setValue("feature_new_room_list", null, SettingLevel.DEVICE, true);
-
+    it("Favourites and People meta spaces should not be returned", async () => {
         await run();
-        // Favourites and People meta spaces should not be returned
-        expect(SpaceStore.instance.enabledMetaSpaces).toStrictEqual([MetaSpace.Home, MetaSpace.Orphans]);
+        // Favourites and People meta spaces are not part of the meta space order
+        expect(sdkContext.spaceStore.enabledMetaSpaces).toStrictEqual([MetaSpace.Home, MetaSpace.Orphans]);
     });
 
     describe("when feature_dynamic_room_predecessors is not enabled", () => {
         beforeAll(() => {
-            jest.spyOn(SettingsStore, "getValue").mockImplementation(
+            vi.spyOn(SettingsStore, "getValue").mockImplementation(
                 (settingName) => settingName === "Spaces.allRoomsInHome",
             );
             // @ts-ignore calling a private function
-            SpaceStore.instance.onAction({
+            sdkContext.spaceStore.onAction({
                 action: Action.SettingUpdated,
                 settingName: "feature_dynamic_room_predecessors",
                 roomId: null,
@@ -1428,7 +1363,7 @@ describe("SpaceStore", () => {
         });
 
         beforeEach(() => {
-            jest.clearAllMocks();
+            vi.clearAllMocks();
         });
 
         it("passes that value in calls to getVisibleRooms and getRoomUpgradeHistory during startup", async () => {
@@ -1447,8 +1382,12 @@ describe("SpaceStore", () => {
         });
 
         it("passes that value in calls to getVisibleRooms during getSpaceFilteredRoomIds", () => {
+            const sdkContext = new TestSDKContext();
+            sdkContext._client = client;
             // Given a store
-            const store = SpaceStore.testInstance();
+            const store = new SpaceStore(defaultDispatcher, sdkContext);
+            sdkContext._SpaceStore = store;
+            setupAsyncStoreWithClient(store, client);
 
             // When we ask for filtered room ids
             store.getSpaceFilteredRoomIds(MetaSpace.Home);
@@ -1462,12 +1401,12 @@ describe("SpaceStore", () => {
 
     describe("when feature_dynamic_room_predecessors is enabled", () => {
         beforeAll(() => {
-            jest.spyOn(SettingsStore, "getValue").mockImplementation(
+            vi.spyOn(SettingsStore, "getValue").mockImplementation(
                 (settingName) =>
                     settingName === "Spaces.allRoomsInHome" || settingName === "feature_dynamic_room_predecessors",
             );
             // @ts-ignore calling a private function
-            SpaceStore.instance.onAction({
+            sdkContext.spaceStore.onAction({
                 action: Action.SettingUpdated,
                 settingName: "feature_dynamic_room_predecessors",
                 roomId: null,
@@ -1478,7 +1417,7 @@ describe("SpaceStore", () => {
         });
 
         beforeEach(() => {
-            jest.clearAllMocks();
+            vi.clearAllMocks();
         });
 
         it("passes that value in calls to getVisibleRooms and getRoomUpgradeHistory during startup", async () => {
@@ -1497,8 +1436,13 @@ describe("SpaceStore", () => {
         });
 
         it("passes that value in calls to getVisibleRooms during getSpaceFilteredRoomIds", () => {
+            const sdkContext = new TestSDKContext();
+            sdkContext._client = client;
             // Given a store
-            const store = SpaceStore.testInstance();
+            const store = new SpaceStore(defaultDispatcher, sdkContext);
+            sdkContext._SpaceStore = store;
+            setupAsyncStoreWithClient(store, client);
+
             // When we ask for filtered room ids
             store.getSpaceFilteredRoomIds(MetaSpace.Home);
 
@@ -1515,8 +1459,9 @@ describe("SpaceStore", () => {
             const state = RoomNotificationStateStore.instance.getRoomState(room);
             // @ts-ignore
             state._level = NotificationLevel.Notification;
-            jest.spyOn(RoomListStore.instance, "orderedLists", "get").mockReturnValue({
-                [DefaultTagID.Untagged]: [room],
+            vi.spyOn(RoomListStoreV3.instance, "getSortedRoomsInActiveSpace").mockReturnValue({
+                spaceId: MetaSpace.Home,
+                sections: [{ tag: DefaultTagID.Untagged, rooms: [room] }],
             });
 
             // init the store
diff --git a/apps/web/src/stores/spaces/SpaceStore.ts b/apps/web/src/stores/spaces/SpaceStore.ts
index 2ccbb750a6..6976d2f265 100644
--- a/apps/web/src/stores/spaces/SpaceStore.ts
+++ b/apps/web/src/stores/spaces/SpaceStore.ts
@@ -23,19 +23,17 @@ import { KnownMembership } from "matrix-js-sdk/src/types";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { AsyncStoreWithClient } from "../AsyncStoreWithClient";
-import defaultDispatcher from "../../dispatcher/dispatcher";
-import RoomListStore from "../room-list/RoomListStore";
+import { type MatrixDispatcher } from "../../dispatcher/dispatcher.ts";
+import RoomListStoreV3 from "../room-list-v3/RoomListStoreV3";
 import SettingsStore from "../../settings/SettingsStore";
 import DMRoomMap from "../../utils/DMRoomMap";
 import { SpaceNotificationState } from "../notifications/SpaceNotificationState";
 import { RoomNotificationStateStore } from "../notifications/RoomNotificationStateStore";
-import { DefaultTagID } from "../room-list-v3/skip-list/tag";
 import { EnhancedMap, mapDiff } from "../../utils/maps";
 import { setDiff, setHasDiff } from "../../utils/sets";
 import { Action } from "../../dispatcher/actions";
 import { arrayHasDiff, arrayHasOrderChange, filterBoolean } from "../../utils/arrays";
 import { reorderLexicographically } from "../../utils/stringOrderField";
-import { TAG_ORDER } from "../../components/views/rooms/LegacyRoomList";
 import { type SettingUpdatedPayload } from "../../dispatcher/payloads/SettingUpdatedPayload";
 import {
     isMetaSpace,
@@ -61,18 +59,12 @@ import { type ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload"
 import { type ViewHomePagePayload } from "../../dispatcher/payloads/ViewHomePagePayload";
 import { type SwitchSpacePayload } from "../../dispatcher/payloads/SwitchSpacePayload";
 import { type AfterLeaveRoomPayload } from "../../dispatcher/payloads/AfterLeaveRoomPayload";
-import { SdkContextClass } from "../../contexts/SDKContext";
+import { type SDKContextClass } from "../../contexts/SDKContextClass";
 import { ModuleApi } from "../../modules/Api.ts";
 
 const ACTIVE_SPACE_LS_KEY = "mx_active_space";
 
-const metaSpaceOrder: MetaSpace[] = [
-    MetaSpace.Home,
-    MetaSpace.Favourites,
-    MetaSpace.People,
-    MetaSpace.Orphans,
-    MetaSpace.VideoRooms,
-];
+const metaSpaceOrder: MetaSpace[] = [MetaSpace.Home, MetaSpace.Orphans, MetaSpace.VideoRooms];
 
 const MAX_SUGGESTED_ROOMS = 20;
 
@@ -118,7 +110,7 @@ type SpaceStoreActions =
     | SwitchSpacePayload
     | AfterLeaveRoomPayload;
 
-export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
+export default class SpaceStore extends AsyncStoreWithClient<EmptyObject> {
     // The spaces representing the roots of the various tree-like hierarchies
     private rootSpaces: Room[] = [];
     // Map from room/space ID to set of spaces which list it as a child
@@ -150,8 +142,11 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
     private _msc3946ProcessDynamicPredecessor: boolean = SettingsStore.getValue("feature_dynamic_room_predecessors");
     private _storeReadyDeferred = Promise.withResolvers<void>();
 
-    public constructor() {
-        super(defaultDispatcher, {});
+    public constructor(
+        dispatcher: MatrixDispatcher,
+        private readonly sdkContext: SDKContextClass,
+    ) {
+        super(dispatcher, {});
 
         SettingsStore.monitorSetting("Spaces.allRoomsInHome", null);
         SettingsStore.monitorSetting("Spaces.enabledMetaSpaces", null);
@@ -167,20 +162,6 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
         return this._storeReadyDeferred.promise;
     }
 
-    /**
-     * Get the order of meta spaces to display in the space panel.
-     *
-     * This accessor should be removed when the "feature_new_room_list" labs flag is removed.
-     * "People" and "Favourites" will be removed from the "metaSpaceOrder" array and this filter will no longer be needed.
-     * @private
-     */
-    private get metaSpaceOrder(): MetaSpace[] {
-        if (!SettingsStore.getValue("feature_new_room_list")) return metaSpaceOrder;
-
-        // People and Favourites are not shown when the new room list is enabled
-        return metaSpaceOrder.filter((space) => space !== MetaSpace.People && space !== MetaSpace.Favourites);
-    }
-
     public get invitedSpaces(): Room[] {
         return Array.from(this._invitedSpaces);
     }
@@ -217,16 +198,12 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
         let roomId: string | undefined;
         if (space === MetaSpace.Home && this.allRoomsInHome) {
             const hasMentions = RoomNotificationStateStore.instance.globalState.hasMentions;
-            const lists = RoomListStore.instance.orderedLists;
-            tagLoop: for (let i = 0; i < TAG_ORDER.length; i++) {
-                const t = TAG_ORDER[i];
-                if (!lists[t]) continue;
-                for (const room of lists[t]) {
-                    const state = RoomNotificationStateStore.instance.getRoomState(room);
-                    if (hasMentions ? state.hasMentions : state.isUnread) {
-                        roomId = room.roomId;
-                        break tagLoop;
-                    }
+            const rooms = RoomListStoreV3.instance.getSortedRoomsInActiveSpace().sections.flatMap((s) => s.rooms);
+            for (const room of rooms) {
+                const state = RoomNotificationStateStore.instance.getRoomState(room);
+                if (hasMentions ? state.hasMentions : state.isUnread) {
+                    roomId = room.roomId;
+                    break;
                 }
             }
         } else {
@@ -234,7 +211,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
         }
 
         if (!!roomId) {
-            defaultDispatcher.dispatch<ViewRoomPayload>({
+            this.dispatcher.dispatch<ViewRoomPayload>({
                 action: Action.ViewRoom,
                 room_id: roomId,
                 context_switch: true,
@@ -278,14 +255,14 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
                 this.matrixClient.getRoom(roomId)?.getMyMembership() === KnownMembership.Join &&
                 this.isRoomInSpace(space, roomId)
             ) {
-                defaultDispatcher.dispatch<ViewRoomPayload>({
+                this.dispatcher.dispatch<ViewRoomPayload>({
                     action: Action.ViewRoom,
                     room_id: roomId,
                     context_switch: true,
                     metricsTrigger: "WebSpaceContextSwitch",
                 });
             } else if (cliSpace) {
-                defaultDispatcher.dispatch<ViewRoomPayload>({
+                this.dispatcher.dispatch<ViewRoomPayload>({
                     action: Action.ViewRoom,
                     room_id: space,
                     context_switch: true,
@@ -294,7 +271,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
             } else if (ModuleApi.instance.extras.spacePanelItems.has(space)) {
                 // module will handle this
             } else {
-                defaultDispatcher.dispatch<ViewHomePagePayload>({
+                this.dispatcher.dispatch<ViewHomePagePayload>({
                     action: Action.ViewHomePage,
                     context_switch: true,
                 });
@@ -309,7 +286,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
 
             // Load all members for the selected space and its subspaces,
             // so we can correctly show DMs we have with members of this space.
-            SpaceStore.instance.traverseSpace(
+            this.traverseSpace(
                 space,
                 (roomId) => {
                     this.matrixClient?.getRoom(roomId)?.loadMembersIfNeeded();
@@ -476,7 +453,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
         }
         // beyond this point we know this is a DM
 
-        if (space === MetaSpace.Home || space === MetaSpace.People) {
+        if (space === MetaSpace.Home) {
             // these spaces contain all DMs
             return true;
         }
@@ -673,13 +650,6 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
             this.roomIdsBySpace.delete(MetaSpace.Home);
         }
 
-        if (enabledMetaSpaces.has(MetaSpace.Favourites)) {
-            const favourites = visibleRooms.filter((r) => r.tags[DefaultTagID.Favourite]);
-            this.roomIdsBySpace.set(MetaSpace.Favourites, new Set(favourites.map((r) => r.roomId)));
-        } else {
-            this.roomIdsBySpace.delete(MetaSpace.Favourites);
-        }
-
         // The People metaspace doesn't need maintaining
 
         // Populate the orphans space if the Home space is enabled as it is a superset of it.
@@ -703,18 +673,13 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
         const visibleRooms = this.matrixClient.getVisibleRooms(this._msc3946ProcessDynamicPredecessor);
 
         let dmBadgeSpace: MetaSpace | undefined;
-        // only show badges on dms on the most relevant space if such exists
-        if (enabledMetaSpaces.has(MetaSpace.People)) {
-            dmBadgeSpace = MetaSpace.People;
-        } else if (enabledMetaSpaces.has(MetaSpace.Home)) {
+        // only show badges on home
+        if (enabledMetaSpaces.has(MetaSpace.Home)) {
             dmBadgeSpace = MetaSpace.Home;
         }
 
         if (!spaces) {
             spaces = [...this.roomIdsBySpace.keys()];
-            if (dmBadgeSpace === MetaSpace.People) {
-                spaces.push(MetaSpace.People);
-            }
             if (enabledMetaSpaces.has(MetaSpace.Home) && !this.allRoomsInHome) {
                 spaces.push(MetaSpace.Home);
             }
@@ -728,10 +693,6 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
             // Update NotificationStates
             this.getNotificationState(s).setRooms(
                 visibleRooms.filter((room) => {
-                    if (s === MetaSpace.People) {
-                        return this.isRoomInSpace(MetaSpace.People, room.roomId);
-                    }
-
                     if (room.isSpaceRoom() || !flattenedRoomsForSpace.has(room.roomId)) return false;
 
                     if (dmBadgeSpace && DMRoomMap.shared().getUserIdForRoomId(room.roomId)) {
@@ -742,10 +703,6 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
                 }),
             );
         });
-
-        if (dmBadgeSpace !== MetaSpace.People) {
-            this.notificationStateMap.delete(MetaSpace.People);
-        }
     };
 
     private showInHomeSpace = (room: Room): boolean => {
@@ -764,7 +721,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
 
     // Method for resolving the impact of a single user's membership change in the given Space and its hierarchy
     private onMemberUpdate = (space: Room, userId: string): void => {
-        const inSpace = SpaceStoreClass.isInSpace(space.getMember(userId));
+        const inSpace = SpaceStore.isInSpace(space.getMember(userId));
 
         if (inSpace) {
             this.userIdsBySpace.get(space.roomId)?.add(userId);
@@ -910,16 +867,10 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
             this.switchSpaceIfNeeded();
         }
 
-        const notificationStatesToUpdate = [...changeSet];
-        // We update the People metaspace even if we didn't detect any changes
-        // as roomIdsBySpace does not pre-calculate it so we have to assume it could have changed
-        if (this.enabledMetaSpaces.includes(MetaSpace.People)) {
-            notificationStatesToUpdate.push(MetaSpace.People);
-        }
-        this.updateNotificationStates(notificationStatesToUpdate);
+        this.updateNotificationStates([...changeSet]);
     };
 
-    private switchSpaceIfNeeded = (roomId = SdkContextClass.instance.roomViewStore.getRoomId()): void => {
+    private switchSpaceIfNeeded = (roomId = this.sdkContext.roomViewStore.getRoomId()): void => {
         if (!roomId) return;
         if (!this.isRoomInSpace(this.activeSpace, roomId) && !this.matrixClient?.getRoom(roomId)?.isSpaceRoom()) {
             this.switchToRelatedSpace(roomId);
@@ -975,7 +926,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
                 // if the room currently being viewed was just joined then switch to its related space
                 if (
                     newMembership === KnownMembership.Join &&
-                    room.roomId === SdkContextClass.instance.roomViewStore.getRoomId()
+                    room.roomId === this.sdkContext.roomViewStore.getRoomId()
                 ) {
                     this.switchSpaceIfNeeded(room.roomId);
                 }
@@ -1003,7 +954,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
             this.emit(room.roomId);
         }
 
-        if (membership === KnownMembership.Join && room.roomId === SdkContextClass.instance.roomViewStore.getRoomId()) {
+        if (membership === KnownMembership.Join && room.roomId === this.sdkContext.roomViewStore.getRoomId()) {
             // if the user was looking at the space and then joined: select that space
             this.setActiveSpace(room.roomId, false);
         } else if (membership === KnownMembership.Leave && room.roomId === this.activeSpace) {
@@ -1095,27 +1046,9 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
             if (order !== lastOrder) {
                 this.notifyIfOrderChanged();
             }
-        } else if (ev.getType() === EventType.Tag) {
-            // If the room was in favourites and now isn't or the opposite then update its position in the trees
-            const oldTags = lastEv?.getContent()?.tags || {};
-            const newTags = ev.getContent()?.tags || {};
-            if (!!oldTags[DefaultTagID.Favourite] !== !!newTags[DefaultTagID.Favourite]) {
-                this.onRoomFavouriteChange(room);
-            }
         }
     };
 
-    private onRoomFavouriteChange(room: Room): void {
-        if (this.enabledMetaSpaces.includes(MetaSpace.Favourites)) {
-            if (room.tags[DefaultTagID.Favourite]) {
-                this.roomIdsBySpace.get(MetaSpace.Favourites)?.add(room.roomId);
-            } else {
-                this.roomIdsBySpace.get(MetaSpace.Favourites)?.delete(room.roomId);
-            }
-            this.emit(MetaSpace.Favourites);
-        }
-    }
-
     private onRoomDmChange(room: Room, isDm: boolean): void {
         const enabledMetaSpaces = new Set(this.enabledMetaSpaces);
 
@@ -1130,10 +1063,6 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
             this.emit(MetaSpace.Home);
         }
 
-        if (enabledMetaSpaces.has(MetaSpace.People)) {
-            this.emit(MetaSpace.People);
-        }
-
         if (enabledMetaSpaces.has(MetaSpace.Orphans) || enabledMetaSpaces.has(MetaSpace.Home)) {
             if (isDm && this.roomIdsBySpace.get(MetaSpace.Orphans)?.delete(room.roomId)) {
                 this.emit(MetaSpace.Orphans);
@@ -1198,7 +1127,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
 
         const oldMetaSpaces = this._enabledMetaSpaces;
         const enabledMetaSpaces = SettingsStore.getValue("Spaces.enabledMetaSpaces");
-        this._enabledMetaSpaces = this.metaSpaceOrder.filter((k) => enabledMetaSpaces[k]);
+        this._enabledMetaSpaces = metaSpaceOrder.filter((k) => enabledMetaSpaces[k]);
 
         this._allRoomsInHome = SettingsStore.getValue("Spaces.allRoomsInHome");
         this.sendUserProperties();
@@ -1229,8 +1158,6 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
         const enabled = new Set(this.enabledMetaSpaces);
         PosthogAnalytics.instance.setProperty("WebMetaSpaceHomeEnabled", enabled.has(MetaSpace.Home));
         PosthogAnalytics.instance.setProperty("WebMetaSpaceHomeAllRooms", this.allRoomsInHome);
-        PosthogAnalytics.instance.setProperty("WebMetaSpacePeopleEnabled", enabled.has(MetaSpace.People));
-        PosthogAnalytics.instance.setProperty("WebMetaSpaceFavouritesEnabled", enabled.has(MetaSpace.Favourites));
         PosthogAnalytics.instance.setProperty("WebMetaSpaceOrphansEnabled", enabled.has(MetaSpace.Orphans));
     }
 
@@ -1315,15 +1242,11 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
 
                     case "Spaces.enabledMetaSpaces": {
                         const newValue = SettingsStore.getValue("Spaces.enabledMetaSpaces");
-                        const enabledMetaSpaces = this.metaSpaceOrder.filter((k) => newValue[k]);
+                        const enabledMetaSpaces = metaSpaceOrder.filter((k) => newValue[k]);
                         if (arrayHasDiff(this._enabledMetaSpaces, enabledMetaSpaces)) {
-                            const hadPeopleOrHomeEnabled = this.enabledMetaSpaces.some((s) => {
-                                return s === MetaSpace.Home || s === MetaSpace.People;
-                            });
+                            const hadHomeEnabled = this.enabledMetaSpaces.some((s) => s === MetaSpace.Home);
                             this._enabledMetaSpaces = enabledMetaSpaces;
-                            const hasPeopleOrHomeEnabled = this.enabledMetaSpaces.some((s) => {
-                                return s === MetaSpace.Home || s === MetaSpace.People;
-                            });
+                            const hasHomeEnabled = this.enabledMetaSpaces.some((s) => s === MetaSpace.Home);
 
                             // if a metaspace currently being viewed was removed, go to another one
                             if (isMetaSpace(this.activeSpace) && !newValue[this.activeSpace]) {
@@ -1331,7 +1254,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
                             }
                             this.rebuildMetaSpaces();
 
-                            if (hadPeopleOrHomeEnabled !== hasPeopleOrHomeEnabled) {
+                            if (hadHomeEnabled !== hasHomeEnabled) {
                                 // in this case we have to rebuild everything as DM badges will move to/from real spaces
                                 this.updateNotificationStates();
                             } else {
@@ -1348,7 +1271,7 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
                         if (payload.roomId) {
                             // getSpaceFilteredUserIds will return the appropriate value
                             this.emit(payload.roomId);
-                            if (!this.enabledMetaSpaces.some((s) => s === MetaSpace.Home || s === MetaSpace.People)) {
+                            if (!this.enabledMetaSpaces.some((s) => s === MetaSpace.Home)) {
                                 this.updateNotificationStates([payload.roomId]);
                             }
                         }
@@ -1429,26 +1352,3 @@ export class SpaceStoreClass extends AsyncStoreWithClient<EmptyObject> {
         this.notifyIfOrderChanged();
     }
 }
-
-export default class SpaceStore {
-    private static readonly internalInstance = (() => {
-        const instance = new SpaceStoreClass();
-        instance.start();
-        return instance;
-    })();
-
-    public static get instance(): SpaceStoreClass {
-        return SpaceStore.internalInstance;
-    }
-
-    /**
-     * @internal for test only
-     */
-    public static testInstance(): SpaceStoreClass {
-        const store = new SpaceStoreClass();
-        store.start();
-        return store;
-    }
-}
-
-window.mxSpaceStore = SpaceStore.instance;
diff --git a/apps/web/src/stores/spaces/index.ts b/apps/web/src/stores/spaces/index.ts
index fb642b638d..8c9865d1dc 100644
--- a/apps/web/src/stores/spaces/index.ts
+++ b/apps/web/src/stores/spaces/index.ts
@@ -21,8 +21,6 @@ export const UPDATE_SUGGESTED_ROOMS = Symbol("suggested-rooms");
 
 export enum MetaSpace {
     Home = "home-space",
-    Favourites = "favourites-space",
-    People = "people-space",
     Orphans = "orphans-space",
     VideoRooms = "video-rooms-space",
 }
@@ -31,10 +29,6 @@ export const getMetaSpaceName = (spaceKey: MetaSpace, allRoomsInHome = false): s
     switch (spaceKey) {
         case MetaSpace.Home:
             return allRoomsInHome ? _t("common|all_chats") : _t("common|home");
-        case MetaSpace.Favourites:
-            return _t("common|favourites");
-        case MetaSpace.People:
-            return _t("common|people");
         case MetaSpace.Orphans:
             return _t("common|orphan_rooms");
         case MetaSpace.VideoRooms:
@@ -57,11 +51,5 @@ export interface ISuggestedRoom extends HierarchyRoom {
 }
 
 export function isMetaSpace(spaceKey?: SpaceKey): spaceKey is MetaSpace {
-    return (
-        spaceKey === MetaSpace.Home ||
-        spaceKey === MetaSpace.Favourites ||
-        spaceKey === MetaSpace.People ||
-        spaceKey === MetaSpace.Orphans ||
-        spaceKey === MetaSpace.VideoRooms
-    );
+    return spaceKey === MetaSpace.Home || spaceKey === MetaSpace.Orphans || spaceKey === MetaSpace.VideoRooms;
 }
diff --git a/apps/web/src/stores/widgets/ElementWidgetActions.ts b/apps/web/src/stores/widgets/ElementWidgetActions.ts
index c7bcfcd8cd..0db59e986b 100644
--- a/apps/web/src/stores/widgets/ElementWidgetActions.ts
+++ b/apps/web/src/stores/widgets/ElementWidgetActions.ts
@@ -56,6 +56,6 @@ export interface IHangupCallApiRequest extends IWidgetApiRequest {
  */
 export interface IViewRoomApiRequest extends IWidgetApiRequest {
     data: {
-        room_id: string; // eslint-disable-line camelcase
+        room_id: string;
     };
 }
diff --git a/apps/web/src/stores/widgets/ElementWidgetDriver.ts b/apps/web/src/stores/widgets/ElementWidgetDriver.ts
index 23ab7cc511..6de3a30aad 100644
--- a/apps/web/src/stores/widgets/ElementWidgetDriver.ts
+++ b/apps/web/src/stores/widgets/ElementWidgetDriver.ts
@@ -26,6 +26,7 @@ import {
     type IWidgetApiErrorResponseDataDetails,
     type ISearchUserDirectoryResult,
     type IGetMediaConfigResult,
+    type IRtcTransportsResult,
 } from "matrix-widget-api";
 import {
     ClientEvent,
@@ -39,7 +40,6 @@ import {
     type StateEvents,
     type TimelineEvents,
     type Room,
-    type SendDelayedEventRequestOpts,
     type MatrixClient,
 } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
@@ -62,7 +62,7 @@ import { containsEmoji } from "../../effects/utils";
 import dis from "../../dispatcher/dispatcher";
 import { ElementWidgetCapabilities } from "./ElementWidgetCapabilities";
 import { navigateToPermalink } from "../../utils/permalinks/navigator";
-import { SdkContextClass } from "../../contexts/SDKContext";
+import { SDKContextClass } from "../../contexts/SDKContextClass";
 import { ModuleRunner } from "../../modules/ModuleRunner";
 import { ModuleApi } from "../../modules/Api";
 import { toWidgetDescriptor } from "../../modules/WidgetLifecycleApi";
@@ -123,6 +123,7 @@ export class ElementWidgetDriver extends WidgetDriver {
             // This is a trusted Element Call widget that we control
             this.allowedCapabilities.add(MatrixCapabilities.AlwaysOnScreen);
             this.allowedCapabilities.add(MatrixCapabilities.MSC3846TurnServers);
+            this.allowedCapabilities.add(MatrixCapabilities.MSC4515RtcTransports);
             this.allowedCapabilities.add(`org.matrix.msc2762.timeline:${inRoomId}`);
             this.allowedCapabilities.add(MatrixCapabilities.MSC4157SendDelayedEvent);
             this.allowedCapabilities.add(MatrixCapabilities.MSC4157UpdateDelayedEvent);
@@ -139,6 +140,9 @@ export class ElementWidgetDriver extends WidgetDriver {
             this.allowedCapabilities.add(
                 WidgetEventCapability.forStateEvent(EventDirection.Receive, "org.matrix.msc3401.call").raw,
             );
+            this.allowedCapabilities.add(
+                WidgetEventCapability.forStateEvent(EventDirection.Receive, "org.matrix.msc4143.rtc.slot").raw,
+            );
             this.allowedCapabilities.add(
                 WidgetEventCapability.forStateEvent(EventDirection.Receive, EventType.RoomEncryption).raw,
             );
@@ -232,7 +236,7 @@ export class ElementWidgetDriver extends WidgetDriver {
             }
 
             // To always allow OIDC requests for element call, the widgetPermissionStore is used:
-            SdkContextClass.instance.widgetPermissionStore.setOIDCState(
+            SDKContextClass.instance.widgetPermissionStore.setOIDCState(
                 forWidget,
                 forWidgetKind,
                 inRoomId,
@@ -281,7 +285,6 @@ export class ElementWidgetDriver extends WidgetDriver {
             try {
                 const [result] = await Modal.createDialog(WidgetCapabilitiesPromptDialog, {
                     requestedCapabilities: missing,
-                    widget: this.forWidget,
                     widgetKind: this.forWidgetKind,
                 }).finished;
                 result?.approved?.forEach((cap) => allowedSoFar.add(cap));
@@ -304,7 +307,7 @@ export class ElementWidgetDriver extends WidgetDriver {
 
     private getSendEventTarget(roomId: string | null = null): { client: MatrixClient; roomId: string } {
         const client = MatrixClientPeg.safeGet();
-        roomId = roomId || SdkContextClass.instance.roomViewStore.getRoomId() || null;
+        roomId = roomId || SDKContextClass.instance.roomViewStore.getRoomId() || null;
         if (!roomId) throw new Error("No room specified and no room in RoomViewStore focus.");
         return { client, roomId };
     }
@@ -335,7 +338,7 @@ export class ElementWidgetDriver extends WidgetDriver {
             r = await client.sendStateEvent(
                 roomId,
                 eventType as keyof StateEvents,
-                content as StateEvents[keyof StateEvents],
+                content satisfies StateEvents[keyof StateEvents],
                 stateKey,
             );
         } else if (eventType === EventType.RoomRedaction) {
@@ -403,27 +406,12 @@ export class ElementWidgetDriver extends WidgetDriver {
         return stickyEvents;
     }
 
-    private getSendDelayedEventOpts(delay: number | null, parentDelayId: string | null): SendDelayedEventRequestOpts {
-        if (delay !== null) {
-            return {
-                delay,
-                ...(parentDelayId !== null && { parent_delay_id: parentDelayId }),
-            };
-        } else if (parentDelayId !== null) {
-            return {
-                parent_delay_id: parentDelayId,
-            };
-        }
-        throw new Error("Must provide at least one of delay or parentDelayId");
-    }
-
     /**
      * @experimental Part of MSC4140 & MSC4157
      * @see {@link WidgetDriver#sendDelayedEvent}
      */
     public async sendDelayedEvent<K extends keyof StateEvents>(
-        delay: number | null,
-        parentDelayId: string | null,
+        delay: number,
         eventType: K,
         content: StateEvents[K],
         stateKey: string | null,
@@ -433,23 +421,21 @@ export class ElementWidgetDriver extends WidgetDriver {
      * @experimental Part of MSC4140 & MSC4157
      */
     public async sendDelayedEvent<K extends keyof TimelineEvents>(
-        delay: number | null,
-        parentDelayId: string | null,
+        delay: number,
         eventType: K,
         content: TimelineEvents[K],
         stateKey: null,
         targetRoomId: string | null,
     ): Promise<ISendDelayedEventDetails>;
     public async sendDelayedEvent(
-        delay: number | null,
-        parentDelayId: string | null,
+        delay: number,
         eventType: string,
         content: IContent,
         stateKey: string | null = null,
         targetRoomId: string | null = null,
     ): Promise<ISendDelayedEventDetails> {
         const { client, roomId } = this.getSendEventTarget(targetRoomId);
-        const delayOpts = this.getSendDelayedEventOpts(delay, parentDelayId);
+        const delayOpts = { delay };
 
         let r: SendDelayedEventResponse | null;
         if (stateKey !== null) {
@@ -458,7 +444,7 @@ export class ElementWidgetDriver extends WidgetDriver {
                 roomId,
                 delayOpts,
                 eventType as keyof StateEvents,
-                content as StateEvents[keyof StateEvents],
+                content satisfies StateEvents[keyof StateEvents],
                 stateKey,
             );
         } else {
@@ -483,20 +469,17 @@ export class ElementWidgetDriver extends WidgetDriver {
      * @see {@link WidgetDriver#sendStickyEvent}
      */
     public async sendDelayedStickyEvent(
-        delay: number | null,
-        parentDelayId: string | null,
+        delay: number,
         stickyDurationMs: number,
         eventType: string,
         content: unknown,
         targetRoomId?: string | null,
     ): Promise<ISendDelayedEventDetails> {
         const { client, roomId } = this.getSendEventTarget(targetRoomId);
-        const delayOpts = this.getSendDelayedEventOpts(delay, parentDelayId);
-
         const r = await client._unstable_sendStickyDelayedEvent(
             roomId,
             stickyDurationMs,
-            delayOpts,
+            { delay },
             null,
             eventType as keyof TimelineEvents,
             content as TimelineEvents[keyof TimelineEvents] & { msc4354_sticky_key: string },
@@ -601,6 +584,7 @@ export class ElementWidgetDriver extends WidgetDriver {
      * Otherwise, the event ID at which only subsequent events will be returned, as many as specified
      * in "limit".
      * @returns A generator that emits events.
+     * @yields IRoomEvents from the room timeline
      */
     private *readRoomTimelineIterator(
         room: Room,
@@ -692,7 +676,7 @@ export class ElementWidgetDriver extends WidgetDriver {
             });
         }
 
-        const oidcState = SdkContextClass.instance.widgetPermissionStore.getOIDCState(
+        const oidcState = SDKContextClass.instance.widgetPermissionStore.getOIDCState(
             this.forWidget,
             this.forWidgetKind,
             this.inRoomId,
@@ -762,6 +746,16 @@ export class ElementWidgetDriver extends WidgetDriver {
         }
     }
 
+    public async getRtcTransports(): Promise<IRtcTransportsResult> {
+        const client = MatrixClientPeg.safeGet();
+        // Delegate to the authenticated CS endpoint (MSC4143). Any error (e.g. the
+        // homeserver not supporting it) propagates and is turned into a widget error
+        // response by ClientWidgetApi. The js-sdk Transport and widget-api IRtcTransport
+        // types are structurally identical.
+        const transports = await client._unstable_getRTCTransports();
+        return { rtc_transports: transports };
+    }
+
     public async readEventRelations(
         eventId: string,
         roomId?: string,
@@ -774,7 +768,7 @@ export class ElementWidgetDriver extends WidgetDriver {
     ): Promise<IReadEventRelationsResult> {
         const client = MatrixClientPeg.safeGet();
         const dir = direction as Direction;
-        roomId = roomId ?? SdkContextClass.instance.roomViewStore.getRoomId() ?? undefined;
+        roomId = roomId ?? SDKContextClass.instance.roomViewStore.getRoomId() ?? undefined;
 
         if (typeof roomId !== "string") {
             throw new Error("Error while reading the current room");
diff --git a/apps/web/src/stores/widgets/WidgetLayoutStore.ts b/apps/web/src/stores/widgets/WidgetLayoutStore.ts
index 0beeba830b..f2b7144f70 100644
--- a/apps/web/src/stores/widgets/WidgetLayoutStore.ts
+++ b/apps/web/src/stores/widgets/WidgetLayoutStore.ts
@@ -483,7 +483,7 @@ export class WidgetLayoutStore extends ReadyWatchingStore {
         for (const [container, containerValue] of containers) {
             const widgets = containerValue.ordered;
             for (const widget of widgets) {
-                ret.push([widget, container as Container]);
+                ret.push([widget, container]);
             }
         }
         return ret;
@@ -514,5 +514,3 @@ export class WidgetLayoutStore extends ReadyWatchingStore {
         this.recalculateRoom(room); // call to try local echo on changes (the catch above undoes any errors)
     }
 }
-
-window.mxWidgetLayoutStore = WidgetLayoutStore.instance;
diff --git a/apps/web/src/stores/widgets/WidgetMessaging.ts b/apps/web/src/stores/widgets/WidgetMessaging.ts
index 6731f1d1d9..bf7cb46db3 100644
--- a/apps/web/src/stores/widgets/WidgetMessaging.ts
+++ b/apps/web/src/stores/widgets/WidgetMessaging.ts
@@ -25,9 +25,7 @@ import {
     type IStickyActionRequest,
     type ITemplateParams,
     type IWidget,
-    type IWidgetApiErrorResponseData,
     type IWidgetApiRequest,
-    type IWidgetApiRequestEmptyData,
     type IWidgetData,
     MatrixCapabilities,
     runTemplate,
@@ -37,7 +35,8 @@ import {
 } from "matrix-widget-api";
 import { logger } from "matrix-js-sdk/src/logger";
 
-import { _t, getUserLanguage } from "../../languageHandler";
+import { _t } from "../../languageHandler";
+import { getUserLanguage } from "../../i18n/settings";
 import { ElementWidgetDriver } from "./ElementWidgetDriver";
 import { WidgetMessagingStore } from "./WidgetMessagingStore";
 import { MatrixClientPeg } from "../../MatrixClientPeg";
@@ -60,7 +59,7 @@ import { arrayFastClone } from "../../utils/arrays";
 import { type ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
 import Modal from "../../Modal";
 import ErrorDialog from "../../components/views/dialogs/ErrorDialog";
-import { SdkContextClass } from "../../contexts/SDKContext";
+import { SDKContextClass } from "../../contexts/SDKContextClass";
 import { UPDATE_EVENT } from "../AsyncStore";
 
 // TODO: Purge this code of its overgrown hacks and compatibility shims.
@@ -292,7 +291,7 @@ export class WidgetMessaging extends TypedEventEmitter<WidgetMessagingEvent, Wid
     // This listener is only active for account widgets, which may follow the
     // user to different rooms
     private onRoomViewStoreUpdate = (): void => {
-        const roomId = SdkContextClass.instance.roomViewStore.getRoomId() ?? null;
+        const roomId = SDKContextClass.instance.roomViewStore.getRoomId() ?? null;
         if (roomId !== this.viewedRoomId) {
             this.widgetApi!.setViewedRoomId(roomId);
             this.viewedRoomId = roomId;
@@ -322,8 +321,8 @@ export class WidgetMessaging extends TypedEventEmitter<WidgetMessagingEvent, Wid
         // receiving events for the right room
         if (this.roomId === undefined) {
             // Account widgets listen to the currently active room
-            this.widgetApi.setViewedRoomId(SdkContextClass.instance.roomViewStore.getRoomId() ?? null);
-            SdkContextClass.instance.roomViewStore.on(UPDATE_EVENT, this.onRoomViewStoreUpdate);
+            this.widgetApi.setViewedRoomId(SDKContextClass.instance.roomViewStore.getRoomId() ?? null);
+            SDKContextClass.instance.roomViewStore.on(UPDATE_EVENT, this.onRoomViewStoreUpdate);
         } else {
             // Room widgets get locked to the room they were added in
             this.widgetApi.setViewedRoomId(this.roomId);
@@ -336,14 +335,14 @@ export class WidgetMessaging extends TypedEventEmitter<WidgetMessagingEvent, Wid
             // Check up front if this is even a valid request
             const targetRoomId = (ev.detail.data || {}).room_id;
             if (!targetRoomId) {
-                return this.widgetApi?.transport.reply(ev.detail, <IWidgetApiErrorResponseData>{
+                return this.widgetApi?.transport.reply(ev.detail, {
                     error: { message: "Room ID not supplied." },
                 });
             }
 
             // Check the widget's permission
             if (!this.widgetApi?.hasCapability(ElementWidgetCapabilities.CanChangeViewedRoom)) {
-                return this.widgetApi?.transport.reply(ev.detail, <IWidgetApiErrorResponseData>{
+                return this.widgetApi?.transport.reply(ev.detail, {
                     error: { message: "This widget does not have permission for this action (denied)." },
                 });
             }
@@ -356,7 +355,7 @@ export class WidgetMessaging extends TypedEventEmitter<WidgetMessagingEvent, Wid
             });
 
             // acknowledge so the widget doesn't freak out
-            this.widgetApi.transport.reply(ev.detail, <IWidgetApiRequestEmptyData>{});
+            this.widgetApi.transport.reply(ev.detail, {});
         });
 
         // Populate the map of "read up to" events for this widget with the current event in every room.
@@ -392,7 +391,7 @@ export class WidgetMessaging extends TypedEventEmitter<WidgetMessagingEvent, Wid
                         ev.detail.data.value,
                     );
                     // Send the ack after the widget actually has become sticky.
-                    this.widgetApi.transport.reply(ev.detail, <IWidgetApiRequestEmptyData>{});
+                    this.widgetApi.transport.reply(ev.detail, {});
                 }
             },
         );
@@ -405,7 +404,7 @@ export class WidgetMessaging extends TypedEventEmitter<WidgetMessagingEvent, Wid
                 if (this.widgetApi?.hasCapability(MatrixCapabilities.StickerSending)) {
                     // Acknowledge first
                     ev.preventDefault();
-                    this.widgetApi.transport.reply(ev.detail, <IWidgetApiRequestEmptyData>{});
+                    this.widgetApi.transport.reply(ev.detail, {});
 
                     // Send the sticker
                     defaultDispatcher.dispatch({
@@ -423,7 +422,7 @@ export class WidgetMessaging extends TypedEventEmitter<WidgetMessagingEvent, Wid
                 (ev: CustomEvent<IWidgetApiRequest>) => {
                     // Acknowledge first
                     ev.preventDefault();
-                    this.widgetApi?.transport.reply(ev.detail, <IWidgetApiRequestEmptyData>{});
+                    this.widgetApi?.transport.reply(ev.detail, {});
 
                     // First close the stickerpicker
                     defaultDispatcher.dispatch({ action: "stickerpicker_close" });
@@ -434,7 +433,7 @@ export class WidgetMessaging extends TypedEventEmitter<WidgetMessagingEvent, Wid
                     const integType = data?.integType as string;
                     const integId = <string>data?.integId;
 
-                    const roomId = SdkContextClass.instance.roomViewStore.getRoomId();
+                    const roomId = SDKContextClass.instance.roomViewStore.getRoomId();
                     const room = roomId ? this.client.getRoom(roomId) : undefined;
                     if (!room) return;
 
@@ -455,7 +454,7 @@ export class WidgetMessaging extends TypedEventEmitter<WidgetMessagingEvent, Wid
                         }),
                     });
                 }
-                this.widgetApi?.transport.reply(ev.detail, <IWidgetApiRequestEmptyData>{});
+                this.widgetApi?.transport.reply(ev.detail, {});
             });
         }
 
@@ -501,7 +500,7 @@ export class WidgetMessaging extends TypedEventEmitter<WidgetMessagingEvent, Wid
             // optimized out by a browser. Instead, we'll just point the iframe
             // at a page that is reasonably safe to use in the event the iframe
             // doesn't wink away.
-            this.iframe!.src = "about:blank";
+            this.iframe.src = "about:blank";
         } else if (ActiveWidgetStore.instance.getWidgetPersistence(this.widget.id, this.roomId ?? null)) {
             logger.log("Skipping destroy - persistent widget");
             return;
@@ -515,7 +514,7 @@ export class WidgetMessaging extends TypedEventEmitter<WidgetMessagingEvent, Wid
         this.iframe = null;
         WidgetMessagingStore.instance.stopMessaging(this.widget, this.roomId);
 
-        SdkContextClass.instance.roomViewStore.off(UPDATE_EVENT, this.onRoomViewStoreUpdate);
+        SDKContextClass.instance.roomViewStore.off(UPDATE_EVENT, this.onRoomViewStoreUpdate);
 
         this.client.off(ClientEvent.Event, this.onEvent);
         this.client.off(MatrixEventEvent.Decrypted, this.onEventDecrypted);
diff --git a/apps/web/src/stores/widgets/WidgetPermissionStore.ts b/apps/web/src/stores/widgets/WidgetPermissionStore.ts
index 75f491fcf5..026438e1c4 100644
--- a/apps/web/src/stores/widgets/WidgetPermissionStore.ts
+++ b/apps/web/src/stores/widgets/WidgetPermissionStore.ts
@@ -10,7 +10,7 @@ import { type Widget, WidgetKind } from "matrix-widget-api";
 
 import SettingsStore from "../../settings/SettingsStore";
 import { SettingLevel } from "../../settings/SettingLevel";
-import { type SdkContextClass } from "../../contexts/SDKContext";
+import { type SDKContextClass } from "../../contexts/SDKContextClass";
 
 export enum OIDCState {
     Allowed, // user has set the remembered value as allowed
@@ -19,7 +19,7 @@ export enum OIDCState {
 }
 
 export class WidgetPermissionStore {
-    public constructor(private readonly context: SdkContextClass) {}
+    public constructor(private readonly context: SDKContextClass) {}
 
     // TODO (all functions here): Merge widgetKind with the widget definition
 
diff --git a/apps/web/src/test/react-use-id-serializer.ts b/apps/web/src/test/react-use-id-serializer.ts
new file mode 100644
index 0000000000..70eaa5e16a
--- /dev/null
+++ b/apps/web/src/test/react-use-id-serializer.ts
@@ -0,0 +1,52 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type SnapshotSerializer } from "vitest";
+
+const REACT_USE_ID = /_r_[a-z0-9]+_/g;
+
+function normaliseReactUseIds(snapshot: string): string {
+    // React useId values can vary between runs and make snapshots flaky:
+    // https://github.com/element-hq/element-web/issues/31765
+    // Avoid running the regex for DOM snapshots without React useId output.
+    if (!snapshot.includes("_r_")) return snapshot;
+
+    const ids = new Map<string, string>();
+    let nextId = 1;
+
+    return snapshot.replace(REACT_USE_ID, (id) => {
+        let replacement = ids.get(id);
+        if (!replacement) {
+            replacement = `react-use-id-${nextId++}`;
+            ids.set(id, replacement);
+        }
+        return replacement;
+    });
+}
+
+// Prevent this serializer from recursively matching the same DOM node when it calls serialize().
+let isSerializingDomSnapshot = false;
+
+const plugin = {
+    test: (value: unknown): value is Element | DocumentFragment =>
+        !isSerializingDomSnapshot &&
+        globalThis.Element &&
+        (value instanceof Element || value instanceof DocumentFragment),
+    print: (value: unknown, serialize: (value: unknown) => string): string => {
+        isSerializingDomSnapshot = true;
+        try {
+            return normaliseReactUseIds(serialize(value));
+        } finally {
+            isSerializingDomSnapshot = false;
+        }
+    },
+} satisfies SnapshotSerializer;
+
+export default plugin;
+// Jest compatibility exports
+export const test = plugin.test;
+export const print = plugin.print;
diff --git a/apps/web/src/test/setupGlobals.ts b/apps/web/src/test/setupGlobals.ts
new file mode 100644
index 0000000000..4856e83b74
--- /dev/null
+++ b/apps/web/src/test/setupGlobals.ts
@@ -0,0 +1,34 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { vi } from "vitest";
+
+import { mocks } from "../../test/setup/mocks.ts";
+import SdkConfig, { DEFAULTS } from "../SdkConfig";
+
+// set up AudioContext API mock
+vi.stubGlobal("AudioContext", function () {
+    return mocks.AudioContext;
+});
+
+if (globalThis.window === undefined) {
+    // We are in a node environment, stub a basic window so singletons work.
+    // Also stub `location` as a bare global: some libraries (e.g. posthog toolbar) access
+    // `location` directly rather than via `window.location`.
+    const locationStub = new URL("test://test/test");
+    vi.stubGlobal("location", locationStub);
+    vi.stubGlobal("window", {
+        // Mock this as some code assumes it exists (needs to be done at the top level as
+        // things try to access it before the beforeEach blocks run)
+        addEventListener: vi.fn<typeof window.addEventListener>(),
+        location: locationStub,
+        setTimeout: globalThis.setTimeout,
+    });
+}
+
+// uninitialised SdkConfig causes lots of warnings in console, init with defaults
+SdkConfig.put(DEFAULTS);
diff --git a/apps/web/src/test/setupLanguage.ts b/apps/web/src/test/setupLanguage.ts
new file mode 100644
index 0000000000..1533493176
--- /dev/null
+++ b/apps/web/src/test/setupLanguage.ts
@@ -0,0 +1,70 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import fetchMock from "@fetch-mock/vitest";
+import { merge } from "lodash";
+import { setMissingEntryGenerator, setLanguage, I18nApi } from "@element-hq/web-shared-components";
+import type { ModuleApiType } from "../modules/Api.ts";
+
+import enElementWeb from "../i18n/strings/en_EN.json";
+import deElementWeb from "../i18n/strings/de_DE.json";
+// Cheat and import relatively here as these aren't exported by the module (should they be?)
+// eslint-disable-next-line no-restricted-imports
+import enSharedComponents from "../../../../packages/shared-components/src/i18n/strings/en_EN.json";
+// eslint-disable-next-line no-restricted-imports
+import deSharedComponents from "../../../../packages/shared-components/src/i18n/strings/de_DE.json";
+
+const lv = {
+    Save: "Saglabāt",
+    room: {
+        upload: {
+            uploading_multiple_file: {
+                one: "Качване на %(filename)s и %(count)s друг",
+            },
+        },
+    },
+};
+
+// Fake languages.json containing references to en_EN, de_DE and lv
+// en_EN.json
+// de_DE.json
+// lv.json - mock version with few translations, used to test fallback translation
+
+export function setupLanguageMock() {
+    // Pull the translations from shared components too as they have
+    // the strings for things like `humanizeTime` which do appear in
+    // snapshots (needs 'merge' which does a deep-merge rather than just
+    // replacing top-level keys).
+    const enTranslations = merge(enElementWeb, enSharedComponents);
+    const deTranslations = merge(deElementWeb, deSharedComponents);
+
+    fetchMock
+        .get(
+            "include:/i18n/languages.json?",
+            {
+                en: "en_EN.json",
+                de: "de_DE.json",
+                lv: "lv.json",
+            },
+            { name: "languages" },
+        )
+        .get("end:en_EN.json", enTranslations)
+        .get("end:de_DE.json", deTranslations)
+        .get("end:lv.json", lv);
+}
+
+// Initialise the fetchMock before the test starts so the languageHandler.setLanguage call below can function
+fetchMock.mockGlobal();
+fetchMock.catch(404);
+setupLanguageMock();
+
+setLanguage("en");
+setMissingEntryGenerator((key) => key.split("|", 2)[1]);
+
+// Set up a stub module API (so the i18n API exists)
+window.mxModuleApi = { i18n: new I18nApi() } as ModuleApiType;
diff --git a/apps/web/src/test/setupTests.ts b/apps/web/src/test/setupTests.ts
new file mode 100644
index 0000000000..03f24c0185
--- /dev/null
+++ b/apps/web/src/test/setupTests.ts
@@ -0,0 +1,51 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { vi, beforeEach, afterEach } from "vitest";
+import { act } from "react";
+import fetchMock from "@fetch-mock/vitest";
+
+import SdkConfig, { DEFAULTS } from "../SdkConfig";
+import "./setupGlobals.ts";
+import { setupLanguageMock } from "./setupLanguage.ts";
+
+declare global {
+    var IS_REACT_ACT_ENVIRONMENT: boolean;
+}
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+// Captured before any test can install fake timers, so the drain in `afterEach` below always
+// runs against a real immediate and cannot hang.
+const realSetImmediate = globalThis.setImmediate;
+
+// Deliberately *not* calling `manageFetchMockGlobally()` as it monkey-patches `vi.restoreAllMocks`,
+// `vi.resetAllMocks` and `vi.unstubAllGlobals` such that they also tear the fetch mock down, putting the
+// environment's real `fetch` back on the global.
+// We re-set the mock before every test below, so the lifecycle integration buys us nothing.
+
+beforeEach(() => {
+    vi.stubEnv("TZ", "UTC");
+
+    // set up fetch API mock. Unmatched requests 404 rather than reaching the network.
+    fetchMock.hardReset();
+    fetchMock.catch(404);
+    fetchMock.mockGlobal();
+
+    setupLanguageMock();
+});
+
+afterEach(async () => {
+    await fetchMock.callHistory.flush();
+
+    await act(async () => {
+        await new Promise((resolve) => realSetImmediate(resolve));
+    });
+});
+
+// uninitialised SdkConfig causes lots of warnings in console, init with defaults
+SdkConfig.put(DEFAULTS);
diff --git a/apps/web/src/theme.ts b/apps/web/src/theme.ts
index 4bd3ea322d..5dbd5142bc 100644
--- a/apps/web/src/theme.ts
+++ b/apps/web/src/theme.ts
@@ -47,7 +47,7 @@ interface CompoundTheme {
 
 export type CustomTheme = {
     name: string;
-    is_dark?: boolean; // eslint-disable-line camelcase
+    is_dark?: boolean;
     colors?: {
         [key: string]: string;
     };
diff --git a/apps/web/src/toasts/AnalyticsToast.tsx b/apps/web/src/toasts/AnalyticsToast.tsx
index 351ccdf4b2..40d4643e93 100644
--- a/apps/web/src/toasts/AnalyticsToast.tsx
+++ b/apps/web/src/toasts/AnalyticsToast.tsx
@@ -68,10 +68,6 @@ const onLearnMorePreviouslyOptedIn = (): void => {
 
 const TOAST_KEY = "analytics";
 
-export function getPolicyUrl(): string | undefined {
-    return SdkConfig.get("privacy_policy_url");
-}
-
 export const showToast = (): void => {
     const legacyAnalyticsOptIn = SettingsStore.getValue("analyticsOptIn", null, true);
 
diff --git a/apps/web/src/toasts/DesktopNotificationsToast.ts b/apps/web/src/toasts/DesktopNotificationsToast.ts
index 8d88d209fb..fb9dd4ec1a 100644
--- a/apps/web/src/toasts/DesktopNotificationsToast.ts
+++ b/apps/web/src/toasts/DesktopNotificationsToast.ts
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { _t } from "../languageHandler";
-import Notifier from "../Notifier";
+import type Notifier from "../Notifier";
 import GenericToast from "../components/views/toasts/GenericToast";
 import ToastStore from "../stores/ToastStore";
 import { MatrixClientPeg } from "../MatrixClientPeg";
@@ -15,22 +15,22 @@ import { getLocalNotificationAccountDataEventType } from "../utils/notifications
 import SettingsStore from "../settings/SettingsStore";
 import { SettingLevel } from "../settings/SettingLevel";
 
-const onAccept = async (): Promise<void> => {
-    await SettingsStore.setValue("notificationsEnabled", null, SettingLevel.DEVICE, true);
-    const cli = MatrixClientPeg.safeGet();
-    const eventType = getLocalNotificationAccountDataEventType(cli.deviceId!);
-    cli.setAccountData(eventType, {
-        is_silenced: false,
-    });
-};
-
-const onReject = (): void => {
-    Notifier.setPromptHidden(true);
-};
-
 const TOAST_KEY = "desktopnotifications";
 
-export const showToast = (fromMessageSend: boolean): void => {
+export const showToast = (notifier: Notifier, fromMessageSend: boolean): void => {
+    const onAccept = async (): Promise<void> => {
+        await SettingsStore.setValue("notificationsEnabled", null, SettingLevel.DEVICE, true);
+        const cli = MatrixClientPeg.safeGet();
+        const eventType = getLocalNotificationAccountDataEventType(cli.deviceId);
+        cli.setAccountData(eventType, {
+            is_silenced: false,
+        });
+    };
+
+    const onReject = (): void => {
+        notifier.setPromptHidden(true);
+    };
+
     ToastStore.sharedInstance().addOrReplaceToast({
         key: TOAST_KEY,
         title: fromMessageSend
diff --git a/apps/web/src/toasts/IncomingCallToast.tsx b/apps/web/src/toasts/IncomingCallToast.tsx
index 5b79bc5ae0..14f253c522 100644
--- a/apps/web/src/toasts/IncomingCallToast.tsx
+++ b/apps/web/src/toasts/IncomingCallToast.tsx
@@ -16,6 +16,7 @@ import React, {
     useRef,
     useState,
     useId,
+    useContext,
 } from "react";
 import {
     type Room,
@@ -39,7 +40,6 @@ import { AvatarWithDetails } from "@element-hq/web-shared-components";
 
 import { _t } from "../languageHandler";
 import RoomAvatar from "../components/views/avatars/RoomAvatar";
-import { MatrixClientPeg } from "../MatrixClientPeg";
 import defaultDispatcher from "../dispatcher/dispatcher";
 import { type ViewRoomPayload } from "../dispatcher/payloads/ViewRoomPayload";
 import { Action } from "../dispatcher/actions";
@@ -49,11 +49,12 @@ import AccessibleButton, { type ButtonEvent } from "../components/views/elements
 import { useDispatcher } from "../hooks/useDispatcher";
 import { type ActionPayload } from "../dispatcher/payloads";
 import { type Call, CallEvent } from "../models/Call";
-import LegacyCallHandler, { AudioID } from "../LegacyCallHandler";
+import { AudioID } from "../LegacyCallHandler";
 import { useEventEmitter, useTypedEventEmitter } from "../hooks/useEventEmitter";
 import { CallStore, CallStoreEvent } from "../stores/CallStore";
 import DMRoomMap from "../utils/DMRoomMap";
 import MemberAvatar from "../components/views/avatars/MemberAvatar";
+import { SDKContext } from "../contexts/SDKContext.ts";
 
 /**
  * Get the key for the incoming call toast. A combination of the call ID and room ID.
@@ -86,9 +87,7 @@ const MAX_RING_TIME_MS = 90 * 1000;
 
 interface JoinCallButtonWithCallProps {
     onClick: (e: ButtonEvent) => void;
-    call: Call | null;
     disabledTooltip: string | undefined;
-    isRinging: boolean;
 }
 
 function JoinCallButtonWithCall({ onClick, disabledTooltip }: JoinCallButtonWithCallProps): JSX.Element {
@@ -160,10 +159,11 @@ interface Props {
 }
 
 export function IncomingCallToast({ notificationEvent, toastKey }: Props): JSX.Element {
+    const sdkContext = useContext(SDKContext);
     const roomId = notificationEvent.getRoomId()!;
     // Use a partial type so ts still helps us to not miss any type checks.
     const notificationContent = notificationEvent.getContent() as Partial<IRTCNotificationContent>;
-    const room = MatrixClientPeg.safeGet().getRoom(roomId) ?? undefined;
+    const room = sdkContext.client?.getRoom(roomId) ?? undefined;
     const call = useCall(roomId);
     const [connectedCalls, setConnectedCalls] = useState<Call[]>(Array.from(CallStore.instance.connectedCalls));
     useEventEmitter(CallStore.instance, CallStoreEvent.ConnectedCalls, () => {
@@ -176,18 +176,18 @@ export function IncomingCallToast({ notificationEvent, toastKey }: Props): JSX.E
         // This is because `LegacyCallHandler.play` tries to load the sound and then play it asynchonously
         // and `LegacyCallHandler.isPlaying` will not be `true` until the sound starts playing.
         const isRingToast = notificationContent.notification_type === "ring";
-        if (isRingToast && !soundHasStarted.current && !LegacyCallHandler.instance.isPlaying(AudioID.Ring)) {
+        if (isRingToast && !soundHasStarted.current && !sdkContext.legacyCallHandler.isPlaying(AudioID.Ring)) {
             // Start ringing if not already.
             soundHasStarted.current = true;
-            void LegacyCallHandler.instance.play(AudioID.Ring);
+            void sdkContext.legacyCallHandler.play(AudioID.Ring);
         }
-    }, [notificationContent.notification_type, soundHasStarted]);
+    }, [notificationContent.notification_type, soundHasStarted, sdkContext.legacyCallHandler]);
 
     // Stop ringing on dismiss.
     const dismissToast = useCallback((): void => {
         ToastStore.sharedInstance().dismissToast(toastKey);
-        LegacyCallHandler.instance.pause(AudioID.Ring);
-    }, [toastKey]);
+        sdkContext.legacyCallHandler.pause(AudioID.Ring);
+    }, [toastKey, sdkContext.legacyCallHandler]);
 
     // Dismiss if the notification event or call event is redacted
     useTypedEventEmitter(room, MatrixEventEvent.BeforeRedaction, (ev: MatrixEvent) => {
@@ -379,8 +379,6 @@ export function IncomingCallToast({ notificationEvent, toastKey }: Props): JSX.E
                 />
                 <JoinCallButtonWithCall
                     onClick={onJoinClick}
-                    call={call}
-                    isRinging={notificationContent.notification_type === "ring"}
                     disabledTooltip={otherCallIsOngoing ? "Ongoing call" : undefined}
                 />
             </div>
diff --git a/apps/web/src/toasts/IncomingLegacyCallToast.tsx b/apps/web/src/toasts/IncomingLegacyCallToast.tsx
index bbcf241587..ae8629994e 100644
--- a/apps/web/src/toasts/IncomingLegacyCallToast.tsx
+++ b/apps/web/src/toasts/IncomingLegacyCallToast.tsx
@@ -19,12 +19,12 @@ import {
     VolumeOnSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 
-import LegacyCallHandler, { LegacyCallHandlerEvent } from "../LegacyCallHandler";
-import { MatrixClientPeg } from "../MatrixClientPeg";
+import { LegacyCallHandlerEvent } from "../LegacyCallHandler";
 import { _t } from "../languageHandler";
 import RoomAvatar from "../components/views/avatars/RoomAvatar";
 import AccessibleButton, { type ButtonEvent } from "../components/views/elements/AccessibleButton";
 import { getCallStateIcon } from "../components/views/messages/LegacyCallEvent.tsx";
+import { SDKContext } from "../contexts/SDKContext.ts";
 
 export const getIncomingLegacyCallToastKey = (callId: string): string => `call_${callId}`;
 
@@ -37,64 +37,67 @@ interface IState {
 }
 
 export default class IncomingLegacyCallToast extends React.Component<IProps, IState> {
+    public static contextType = SDKContext;
+    declare public context: React.ContextType<typeof SDKContext>;
+
     private readonly roomId: string;
 
-    public constructor(props: IProps) {
-        super(props);
+    public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
+        super(props, context);
 
-        const roomId = LegacyCallHandler.instance.roomIdForCall(this.props.call);
+        const roomId = context.legacyCallHandler.roomIdForCall(this.props.call);
         if (!roomId) {
             throw new Error("Unable to find room for incoming call");
         }
         this.roomId = roomId;
 
         this.state = {
-            silenced: LegacyCallHandler.instance.isCallSilenced(this.props.call.callId),
+            silenced: context.legacyCallHandler.isCallSilenced(this.props.call.callId),
         };
     }
 
     public componentDidMount = (): void => {
-        LegacyCallHandler.instance.addListener(
+        this.context.legacyCallHandler.addListener(
             LegacyCallHandlerEvent.SilencedCallsChanged,
             this.onSilencedCallsChanged,
         );
     };
 
     public componentWillUnmount(): void {
-        LegacyCallHandler.instance.removeListener(
+        this.context.legacyCallHandler.removeListener(
             LegacyCallHandlerEvent.SilencedCallsChanged,
             this.onSilencedCallsChanged,
         );
     }
 
     private onSilencedCallsChanged = (): void => {
-        this.setState({ silenced: LegacyCallHandler.instance.isCallSilenced(this.props.call.callId) });
+        this.setState({ silenced: this.context.legacyCallHandler.isCallSilenced(this.props.call.callId) });
     };
 
     private onAnswerClick = (e: ButtonEvent): void => {
         e.stopPropagation();
-        LegacyCallHandler.instance.answerCall(this.roomId);
+        this.context.legacyCallHandler.answerCall(this.roomId);
     };
 
     private onRejectClick = (e: ButtonEvent): void => {
         e.stopPropagation();
-        LegacyCallHandler.instance.hangupOrReject(this.roomId, true);
+        this.context.legacyCallHandler.hangupOrReject(this.roomId, true);
     };
 
     private onSilenceClick = (e: ButtonEvent): void => {
         e.stopPropagation();
         const callId = this.props.call.callId;
         if (this.state.silenced) {
-            LegacyCallHandler.instance.unSilenceCall(callId);
+            this.context.legacyCallHandler.unSilenceCall(callId);
         } else {
-            LegacyCallHandler.instance.silenceCall(callId);
+            this.context.legacyCallHandler.silenceCall(callId);
         }
     };
 
     public render(): React.ReactNode {
-        const room = MatrixClientPeg.safeGet().getRoom(this.roomId);
+        const room = this.context.client?.getRoom(this.roomId);
         const isVoice = this.props.call.type === CallType.Voice;
-        const callForcedSilent = LegacyCallHandler.instance.isForcedSilent();
+        const callForcedSilent = this.context.legacyCallHandler.isForcedSilent();
 
         let silenceButtonTooltip = this.state.silenced ? _t("voip|unsilence") : _t("voip|silence");
         if (callForcedSilent) {
@@ -105,7 +108,7 @@ export default class IncomingLegacyCallToast extends React.Component<IProps, ISt
             <React.Fragment>
                 <RoomAvatar room={room ?? undefined} size="32px" />
                 <div className="mx_IncomingLegacyCallToast_content">
-                    <span className="mx_LegacyCallEvent_caller">{room ? room.name : _t("voip|unknown_caller")}</span>
+                    <span className="mx_LegacyCallEvent_caller">{room?.name ?? _t("voip|unknown_caller")}</span>
                     <div className="mx_LegacyCallEvent_type">
                         {getCallStateIcon(isVoice, undefined)}
                         {isVoice ? _t("voip|voice_call") : _t("voip|video_call")}
diff --git a/apps/web/src/toasts/MobileGuideToast.test.ts b/apps/web/src/toasts/MobileGuideToast.test.ts
new file mode 100644
index 0000000000..8206381a78
--- /dev/null
+++ b/apps/web/src/toasts/MobileGuideToast.test.ts
@@ -0,0 +1,41 @@
+/*
+Copyright 2026 Element Creations 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.
+*/
+
+// @vitest-environment happy-dom
+// @vitest-environment-options {"settings": {"navigator": {"userAgent": "Mozilla/5.0 (iPod touch; CPU iPhone OS 8_4_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12H321 Safari/600.1.4" }}}
+
+import { type ComponentProps } from "react";
+import { vi, describe, it, expect, beforeEach } from "vitest";
+
+import ToastStore from "../stores/ToastStore.ts";
+import { showToast } from "./MobileGuideToast.ts";
+import type GenericToast from "../components/views/toasts/GenericToast.tsx";
+
+describe("showToast", () => {
+    const addOrReplaceToastSpy = vi.spyOn(ToastStore.sharedInstance(), "addOrReplaceToast");
+
+    beforeEach(() => {
+        sessionStorage.clear();
+    });
+
+    it("should do nothing if sessionStorage has `skip_mobile_redirect`", () => {
+        sessionStorage.setItem("skip_mobile_redirect", "true");
+
+        showToast();
+        expect(addOrReplaceToastSpy).not.toHaveBeenCalled();
+    });
+
+    it("should set sessionStorage `skip_mobile_redirect` on reject", () => {
+        expect(sessionStorage.getItem("skip_mobile_redirect")).toBeFalsy();
+
+        showToast();
+        const toast = addOrReplaceToastSpy.mock.calls[0][0];
+        expect((toast.props as ComponentProps<typeof GenericToast>).secondaryLabel).toBe("Dismiss");
+        (toast.props as ComponentProps<typeof GenericToast>).onSecondaryClick!();
+        expect(sessionStorage.getItem("skip_mobile_redirect")).toBe("true");
+    });
+});
diff --git a/apps/web/src/toasts/MobileGuideToast.ts b/apps/web/src/toasts/MobileGuideToast.ts
index 566ea6aa93..f76893aaf0 100644
--- a/apps/web/src/toasts/MobileGuideToast.ts
+++ b/apps/web/src/toasts/MobileGuideToast.ts
@@ -16,7 +16,7 @@ const onAccept = (): void => {
 };
 
 const onReject = (): void => {
-    document.cookie = "element_mobile_redirect_to_guide=false;path=/;max-age=14400";
+    sessionStorage.setItem("skip_mobile_redirect", "true");
     hideToast();
 };
 
@@ -29,7 +29,7 @@ export const showToast = (): void => {
     if (!isIos && !isAndroid) {
         return;
     }
-    if (document.cookie.includes("element_mobile_redirect_to_guide=false")) {
+    if (sessionStorage.getItem("skip_mobile_redirect") === "true") {
         return;
     }
     ToastStore.sharedInstance().addOrReplaceToast({
diff --git a/apps/web/src/toasts/UnverifiedSessionToast.tsx b/apps/web/src/toasts/UnverifiedSessionToast.tsx
index d66439d4fe..cc78907eb9 100644
--- a/apps/web/src/toasts/UnverifiedSessionToast.tsx
+++ b/apps/web/src/toasts/UnverifiedSessionToast.tsx
@@ -17,8 +17,8 @@ import ToastStore from "../stores/ToastStore";
 import GenericToast from "../components/views/toasts/GenericToast";
 import { Action } from "../dispatcher/actions";
 import { isDeviceVerified } from "../utils/device/isDeviceVerified";
-import { DeviceType } from "../utils/device/parseUserAgent";
 import { DeviceMetaData } from "../components/views/settings/devices/DeviceMetaData";
+import type { ExtendedDevice } from "../components/views/settings/devices/types.ts";
 
 function toastKey(deviceId: string): string {
     return "unverified_session_" + deviceId;
@@ -39,10 +39,9 @@ export const showToast = async (deviceId: string): Promise<void> => {
     };
 
     const device = await cli.getDevice(deviceId);
-    const extendedDevice = {
+    const extendedDevice: ExtendedDevice = {
         ...device,
         isVerified: await isDeviceVerified(cli, deviceId),
-        deviceType: DeviceType.Unknown,
     };
 
     ToastStore.sharedInstance().addOrReplaceToast({
diff --git a/apps/web/src/usercontent/index.ts b/apps/web/src/usercontent/index.ts
index e780ea1ac1..46ef5d1156 100644
--- a/apps/web/src/usercontent/index.ts
+++ b/apps/web/src/usercontent/index.ts
@@ -43,7 +43,7 @@ function remoteRender(event: MessageEvent): void {
         img.style.webkitMaskRepeat = "no-repeat";
         img.style.display = "inline-block";
         img.style.webkitMaskImage = `url('${data.imgSrc}')`;
-        img.style.backgroundColor = `${a.style.color}`;
+        img.style.backgroundColor = a.style.color;
     }
 
     const body = document.body;
diff --git a/apps/web/test/unit-tests/utils/AnimationUtils-test.ts b/apps/web/src/utils/AnimationUtils.test.ts
similarity index 89%
rename from apps/web/test/unit-tests/utils/AnimationUtils-test.ts
rename to apps/web/src/utils/AnimationUtils.test.ts
index 196285973a..ef8979667c 100644
--- a/apps/web/test/unit-tests/utils/AnimationUtils-test.ts
+++ b/apps/web/src/utils/AnimationUtils.test.ts
@@ -6,7 +6,9 @@ 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 { lerp } from "../../../src/utils/AnimationUtils";
+import { describe, it, expect } from "vitest";
+
+import { lerp } from "./AnimationUtils";
 
 describe("lerp", () => {
     it("correctly interpolates", () => {
diff --git a/apps/web/test/unit-tests/utils/AutoDiscoveryUtils-test.tsx b/apps/web/src/utils/AutoDiscoveryUtils.test.ts
similarity index 69%
rename from apps/web/test/unit-tests/utils/AutoDiscoveryUtils-test.tsx
rename to apps/web/src/utils/AutoDiscoveryUtils.test.ts
index 19abc4f041..ecfec22c24 100644
--- a/apps/web/test/unit-tests/utils/AutoDiscoveryUtils-test.tsx
+++ b/apps/web/src/utils/AutoDiscoveryUtils.test.ts
@@ -6,15 +6,17 @@ 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 { vi, describe, it, expect, afterAll, beforeEach } from "vitest";
+import { makeDelegatedAuthMetadata } from "test-utils/auth";
 import { AutoDiscovery, AutoDiscoveryAction, type ClientConfig } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
-import fetchMock from "@fetch-mock/jest";
+import fetchMock from "@fetch-mock/vitest";
 
-import AutoDiscoveryUtils from "../../../src/utils/AutoDiscoveryUtils";
-import { mockOpenIdConfiguration } from "../../test-utils/oidc";
+import AutoDiscoveryUtils from "./AutoDiscoveryUtils";
 
 describe("AutoDiscoveryUtils", () => {
     beforeEach(() => {
+        fetchMock.mockReset();
         fetchMock.catch({
             status: 404,
             body: '{"errcode": "M_UNRECOGNIZED", "error": "Unrecognized request"}',
@@ -27,13 +29,13 @@ describe("AutoDiscoveryUtils", () => {
 
         beforeEach(() => {
             // don't litter console with expected errors
-            jest.spyOn(logger, "error")
+            vi.spyOn(logger, "error")
                 .mockClear()
                 .mockImplementation(() => {});
         });
 
         afterAll(() => {
-            jest.spyOn(logger, "error").mockRestore();
+            vi.spyOn(logger, "error").mockRestore();
         });
 
         const validIsConfig = {
@@ -224,115 +226,15 @@ describe("AutoDiscoveryUtils", () => {
 
         it("should validate delegated oidc auth", async () => {
             const issuer = "https://auth.matrix.org/";
-            fetchMock.get(
-                `${validHsConfig["m.homeserver"].base_url}/_matrix/client/unstable/org.matrix.msc2965/auth_issuer`,
-                {
-                    issuer,
-                },
-            );
-            fetchMock.get(`${issuer}.well-known/openid-configuration`, {
-                ...mockOpenIdConfiguration(issuer),
-                "scopes_supported": ["openid", "email"],
-                "response_modes_supported": ["form_post", "query", "fragment"],
-                "token_endpoint_auth_methods_supported": [
-                    "client_secret_basic",
-                    "client_secret_post",
-                    "client_secret_jwt",
-                    "private_key_jwt",
-                    "none",
-                ],
-                "token_endpoint_auth_signing_alg_values_supported": [
-                    "HS256",
-                    "HS384",
-                    "HS512",
-                    "RS256",
-                    "RS384",
-                    "RS512",
-                    "PS256",
-                    "PS384",
-                    "PS512",
-                    "ES256",
-                    "ES384",
-                    "ES256K",
-                ],
-                "revocation_endpoint_auth_methods_supported": [
-                    "client_secret_basic",
-                    "client_secret_post",
-                    "client_secret_jwt",
-                    "private_key_jwt",
-                    "none",
-                ],
-                "revocation_endpoint_auth_signing_alg_values_supported": [
-                    "HS256",
-                    "HS384",
-                    "HS512",
-                    "RS256",
-                    "RS384",
-                    "RS512",
-                    "PS256",
-                    "PS384",
-                    "PS512",
-                    "ES256",
-                    "ES384",
-                    "ES256K",
-                ],
-                "introspection_endpoint": `${issuer}oauth2/introspect`,
-                "introspection_endpoint_auth_methods_supported": [
-                    "client_secret_basic",
-                    "client_secret_post",
-                    "client_secret_jwt",
-                    "private_key_jwt",
-                    "none",
-                ],
-                "introspection_endpoint_auth_signing_alg_values_supported": [
-                    "HS256",
-                    "HS384",
-                    "HS512",
-                    "RS256",
-                    "RS384",
-                    "RS512",
-                    "PS256",
-                    "PS384",
-                    "PS512",
-                    "ES256",
-                    "ES384",
-                    "ES256K",
-                ],
-                "userinfo_endpoint": `${issuer}oauth2/userinfo`,
-                "subject_types_supported": ["public"],
-                "id_token_signing_alg_values_supported": [
-                    "RS256",
-                    "RS384",
-                    "RS512",
-                    "ES256",
-                    "ES384",
-                    "PS256",
-                    "PS384",
-                    "PS512",
-                    "ES256K",
-                ],
-                "userinfo_signing_alg_values_supported": [
-                    "RS256",
-                    "RS384",
-                    "RS512",
-                    "ES256",
-                    "ES384",
-                    "PS256",
-                    "PS384",
-                    "PS512",
-                    "ES256K",
-                ],
-                "display_values_supported": ["page"],
-                "claim_types_supported": ["normal"],
-                "claims_supported": ["iss", "sub", "aud", "iat", "exp", "nonce", "auth_time", "at_hash", "c_hash"],
-                "claims_parameter_supported": false,
-                "request_parameter_supported": false,
-                "request_uri_parameter_supported": false,
-                "prompt_values_supported": ["none", "login", "create"],
-                "device_authorization_endpoint": `${issuer}oauth2/device`,
-                "org.matrix.matrix-authentication-service.graphql_endpoint": `${issuer}graphql`,
-                "account_management_uri": `${issuer}account/`,
-                "account_management_actions_supported": [
+            fetchMock.get(`${validHsConfig["m.homeserver"].base_url}/_matrix/client/versions`, { versions: ["v1.15"] });
+            fetchMock.get(`${validHsConfig["m.homeserver"].base_url}/_matrix/client/v1/auth_metadata`, {
+                ...makeDelegatedAuthMetadata(issuer),
+                scopes_supported: ["email"],
+                response_modes_supported: ["query", "fragment"],
+                prompt_values_supported: ["none", "login", "create"],
+                device_authorization_endpoint: `${issuer}oauth2/device`,
+                account_management_uri: `${issuer}account/`,
+                account_management_actions_supported: [
                     "org.matrix.profile",
                     "org.matrix.sessions_list",
                     "org.matrix.session_view",
@@ -340,9 +242,6 @@ describe("AutoDiscoveryUtils", () => {
                     "org.matrix.cross_signing_reset",
                 ],
             });
-            fetchMock.get(`${issuer}jwks`, {
-                keys: [],
-            });
 
             const discoveryResult = {
                 ...validIsConfig,
@@ -366,7 +265,6 @@ describe("AutoDiscoveryUtils", () => {
                     account_management_uri: "https://auth.matrix.org/account/",
                     authorization_endpoint: "https://auth.matrix.org/auth",
                     registration_endpoint: "https://auth.matrix.org/registration",
-                    signingKeys: [],
                     token_endpoint: "https://auth.matrix.org/token",
                 }),
                 warning: null,
diff --git a/apps/web/src/utils/AutoDiscoveryUtils.tsx b/apps/web/src/utils/AutoDiscoveryUtils.tsx
index 32bd92df7c..f43f8ff126 100644
--- a/apps/web/src/utils/AutoDiscoveryUtils.tsx
+++ b/apps/web/src/utils/AutoDiscoveryUtils.tsx
@@ -14,7 +14,7 @@ import {
     type IClientWellKnown,
     MatrixClient,
     MatrixError,
-    type OidcClientConfig,
+    type ValidatedAuthMetadata,
 } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 
@@ -64,6 +64,7 @@ const mapAutoDiscoveryErrorTranslation = (err: AutoDiscoveryError): TranslationK
     }
 };
 
+// oxlint-disable-next-line typescript/no-extraneous-class
 export default class AutoDiscoveryUtils {
     /**
      * Checks if a given error or error message is considered an error
@@ -288,7 +289,7 @@ export default class AutoDiscoveryUtils {
 
         // This isn't inherently auto-discovery but used to be in an earlier incarnation of the MSC,
         // and shuttling the data together makes a lot of sense
-        let delegatedAuthentication: OidcClientConfig | undefined;
+        let delegatedAuthentication: ValidatedAuthMetadata | undefined;
         let delegatedAuthenticationError: Error | undefined;
         try {
             const tempClient = new MatrixClient({ baseUrl: preferredHomeserverUrl });
diff --git a/apps/web/test/unit-tests/utils/DMRoomMap-test.ts b/apps/web/src/utils/DMRoomMap.test.ts
similarity index 91%
rename from apps/web/test/unit-tests/utils/DMRoomMap-test.ts
rename to apps/web/src/utils/DMRoomMap.test.ts
index 69360a277d..99fd2c7844 100644
--- a/apps/web/test/unit-tests/utils/DMRoomMap-test.ts
+++ b/apps/web/src/utils/DMRoomMap.test.ts
@@ -6,7 +6,10 @@ 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 { mocked, type Mocked } from "jest-mock";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach, type Mocked } from "vitest";
+
 import { logger } from "matrix-js-sdk/src/logger";
 import {
     ClientEvent,
@@ -16,9 +19,10 @@ import {
     type MatrixEvent,
     type Room,
 } from "matrix-js-sdk/src/matrix";
+import { mkEvent, stubClient } from "test-utils";
+
+import DMRoomMap from "./DMRoomMap";
 
-import DMRoomMap from "../../../src/utils/DMRoomMap";
-import { mkEvent, stubClient } from "../../test-utils";
 describe("DMRoomMap", () => {
     const roomId1 = "!room1:example.com";
     const roomId2 = "!room2:example.com";
@@ -44,8 +48,8 @@ describe("DMRoomMap", () => {
     };
 
     beforeEach(() => {
-        client = mocked(stubClient());
-        jest.spyOn(logger, "warn");
+        client = vi.mocked(stubClient());
+        vi.spyOn(logger, "warn");
     });
 
     describe("when m.direct has valid content", () => {
@@ -140,19 +144,19 @@ describe("DMRoomMap", () => {
     describe("getUniqueRoomsWithIndividuals()", () => {
         const bigRoom = {
             roomId: "!bigRoom:server.org",
-            getInvitedAndJoinedMemberCount: jest.fn().mockReturnValue(5000),
+            getInvitedAndJoinedMemberCount: vi.fn().mockReturnValue(5000),
         } as unknown as Room;
         const dmWithBob = {
             roomId: "!dmWithBob:server.org",
-            getInvitedAndJoinedMemberCount: jest.fn().mockReturnValue(2),
+            getInvitedAndJoinedMemberCount: vi.fn().mockReturnValue(2),
         } as unknown as Room;
         const dmWithCharlie = {
             roomId: "!dmWithCharlie:server.org",
-            getInvitedAndJoinedMemberCount: jest.fn().mockReturnValue(2),
+            getInvitedAndJoinedMemberCount: vi.fn().mockReturnValue(2),
         } as unknown as Room;
         const smallRoom = {
             roomId: "!smallRoom:server.org",
-            getInvitedAndJoinedMemberCount: jest.fn().mockReturnValue(3),
+            getInvitedAndJoinedMemberCount: vi.fn().mockReturnValue(3),
         } as unknown as Room;
 
         const mDirectContent = {
@@ -163,7 +167,7 @@ describe("DMRoomMap", () => {
         beforeEach(() => {
             client.getAccountData.mockReturnValue(mkMDirectEvent(mDirectContent));
             client.getRoom.mockImplementation(
-                (roomId: string) =>
+                (roomId?: string) =>
                     [bigRoom, smallRoom, dmWithCharlie, dmWithBob].find((room) => room.roomId === roomId) ?? null,
             );
         });
diff --git a/apps/web/src/utils/DMRoomMap.ts b/apps/web/src/utils/DMRoomMap.ts
index 989eea09d0..3153ed88fa 100644
--- a/apps/web/src/utils/DMRoomMap.ts
+++ b/apps/web/src/utils/DMRoomMap.ts
@@ -162,11 +162,11 @@ export default class DMRoomMap {
             commonRooms = commonRooms.filter((r) => userRooms.includes(r));
         }
 
-        const joinedRooms = commonRooms
-            .map((r) => this.matrixClient.getRoom(r))
-            .filter((r) => r && r.getMyMembership() === KnownMembership.Join);
-
-        return joinedRooms[0];
+        return (
+            commonRooms
+                .map((r) => this.matrixClient.getRoom(r))
+                .find((r) => r && r.getMyMembership() === KnownMembership.Join) ?? null
+        );
     }
 
     public getUserIdForRoomId(roomId: string): string | undefined {
diff --git a/apps/web/src/utils/DialogOpener.ts b/apps/web/src/utils/DialogOpener.ts
index fff7297a68..1130245fff 100644
--- a/apps/web/src/utils/DialogOpener.ts
+++ b/apps/web/src/utils/DialogOpener.ts
@@ -24,7 +24,7 @@ import AddExistingToSpaceDialog from "../components/views/dialogs/AddExistingToS
 import { type ButtonEvent } from "../components/views/elements/AccessibleButton";
 import PosthogTrackers from "../PosthogTrackers";
 import { showAddExistingSubspace, showCreateNewRoom } from "./space";
-import { SdkContextClass } from "../contexts/SDKContext";
+import { SDKContextClass } from "../contexts/SDKContextClass";
 
 /**
  * Auxiliary class to listen for dialog opening over the dispatcher and
@@ -55,9 +55,9 @@ export class DialogOpener {
                 Modal.createDialog(
                     RoomSettingsDialog,
                     {
-                        roomId: payload.room_id || SdkContextClass.instance.roomViewStore.getRoomId(),
+                        roomId: payload.room_id || SDKContextClass.instance.roomViewStore.getRoomId(),
                         initialTabId: payload.initial_tab_id,
-                        sdkContext: SdkContextClass.instance,
+                        sdkContext: SDKContextClass.instance,
                     },
                     /*className=*/ undefined,
                     /*isPriority=*/ false,
@@ -133,7 +133,7 @@ export class DialogOpener {
                     "mx_AddExistingToSpaceDialog_wrapper",
                 );
                 finished.then(([added]) => {
-                    if (added && SdkContextClass.instance.roomViewStore.getRoomId() === space.roomId) {
+                    if (added && SDKContextClass.instance.roomViewStore.getRoomId() === space.roomId) {
                         defaultDispatcher.fire(Action.UpdateSpaceHierarchy);
                     }
                 });
diff --git a/apps/web/test/unit-tests/utils/ErrorUtils-test.ts b/apps/web/src/utils/ErrorUtils.test.ts
similarity index 97%
rename from apps/web/test/unit-tests/utils/ErrorUtils-test.ts
rename to apps/web/src/utils/ErrorUtils.test.ts
index 170a639af3..c1dd43ea82 100644
--- a/apps/web/test/unit-tests/utils/ErrorUtils-test.ts
+++ b/apps/web/src/utils/ErrorUtils.test.ts
@@ -6,8 +6,11 @@ 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.
 */
 
+// @vitest-environment happy-dom
+
 import { type ReactElement } from "react";
-import { render } from "jest-matrix-react";
+import { render } from "test-utils-rtl";
+import { describe, it, expect } from "vitest";
 import { MatrixError, ConnectionError } from "matrix-js-sdk/src/matrix";
 
 import {
@@ -17,7 +20,7 @@ import {
     messageForResourceLimitError,
     messageForSyncError,
     resourceLimitStrings,
-} from "../../../src/utils/ErrorUtils";
+} from "./ErrorUtils";
 
 describe("messageForResourceLimitError", () => {
     it("should match snapshot for monthly_active_user", () => {
diff --git a/apps/web/src/utils/EventRenderingUtils.ts b/apps/web/src/utils/EventRenderingUtils.ts
index b99e01a07b..6bc01d477a 100644
--- a/apps/web/src/utils/EventRenderingUtils.ts
+++ b/apps/web/src/utils/EventRenderingUtils.ts
@@ -35,6 +35,7 @@ const calcIsInfoMessage = (
         eventType !== EventType.RoomMessageEncrypted &&
         eventType !== EventType.Sticker &&
         eventType !== EventType.RoomCreate &&
+        eventType !== EventType.RTCNotification &&
         !M_POLL_START.matches(eventType) &&
         !M_POLL_END.matches(eventType) &&
         !M_BEACON_INFO.matches(eventType)
@@ -53,6 +54,7 @@ export function getEventDisplayInfo(
     isLeftAlignedBubbleMessage: boolean;
     noBubbleEvent: boolean;
     isSeeingThroughMessageHiddenForModeration: boolean;
+    isAlignedBetweenBubbles: boolean;
 } {
     const content = mxEvent.getContent();
     const msgtype = content.msgtype;
@@ -82,7 +84,10 @@ export function getEventDisplayInfo(
         eventType === EventType.RoomEncryption ||
         factory === JitsiEventFactory;
     const isLeftAlignedBubbleMessage =
-        !isBubbleMessage && (eventType === EventType.CallInvite || ElementCallEventType.matches(eventType));
+        !isBubbleMessage &&
+        (eventType === EventType.RTCNotification ||
+            eventType === EventType.CallInvite ||
+            ElementCallEventType.matches(eventType));
     let isInfoMessage = calcIsInfoMessage(eventType, content, isBubbleMessage, isLeftAlignedBubbleMessage);
     // Some non-info messages want to be rendered in the appropriate bubble column but without the bubble background
     const noBubbleEvent =
@@ -105,6 +110,32 @@ export function getEventDisplayInfo(
         }
     }
 
+    /*
+     ┌──────────────────────────────────────────────────────────┐
+     │                                                          │
+     │             TILE ALIGNED BETWEEN BUBBLES                 │
+     │                                                          │
+     └──────────────────────────────────────────────────────────┘
+     ▲                                                          ▲
+     │                                                          │
+     │                                                          │
+     │                                                          │
+┌────┤                                                          │
+│ ┌──┼───────────────────┐                                      │
+│ │  │                   │                                      │
+└─┼──┘  Bubble           │                                      │
+  └──────────────────────┘                                      │
+                                                                │
+                                                                │
+                                                                │
+                                                                ├────┐
+                                            ┌───────────────────┼──┐ │
+                                            │                   │  │ │
+                                            │     Bubble        └──┼─┘
+                                            └──────────────────────┘
+    */
+    const isAlignedBetweenBubbles = eventType === EventType.RTCNotification;
+
     return {
         hasRenderer: !!factory,
         isInfoMessage,
@@ -112,5 +143,6 @@ export function getEventDisplayInfo(
         isLeftAlignedBubbleMessage,
         noBubbleEvent,
         isSeeingThroughMessageHiddenForModeration,
+        isAlignedBetweenBubbles,
     };
 }
diff --git a/apps/web/test/unit-tests/utils/EventUtils-test.ts b/apps/web/src/utils/EventUtils.test.ts
similarity index 93%
rename from apps/web/test/unit-tests/utils/EventUtils-test.ts
rename to apps/web/src/utils/EventUtils.test.ts
index 82c7eb7191..f365b4f289 100644
--- a/apps/web/test/unit-tests/utils/EventUtils-test.ts
+++ b/apps/web/src/utils/EventUtils.test.ts
@@ -6,6 +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.
 */
 
+// @vitest-environment happy-dom
+
 import {
     M_LOCATION,
     EventStatus,
@@ -19,8 +21,9 @@ import {
     Room,
     Thread,
 } from "matrix-js-sdk/src/matrix";
+import { vi, describe, it, expect, beforeEach, afterAll } from "vitest";
 
-import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
+import { MatrixClientPeg } from "../MatrixClientPeg";
 import {
     canCancel,
     canEditContent,
@@ -31,25 +34,30 @@ import {
     isContentActionable,
     isLocationEvent,
     isVoiceMessage,
-} from "../../../src/utils/EventUtils";
-import { getMockClientWithEventEmitter, makeBeaconInfoEvent, makePollStartEvent, stubClient } from "../../test-utils";
-import dis from "../../../src/dispatcher/dispatcher";
-import { Action } from "../../../src/dispatcher/actions";
+} from "./EventUtils";
+import {
+    getMockClientWithEventEmitter,
+    makeBeaconInfoEvent,
+    makePollStartEvent,
+    stubClient,
+} from "../../test/test-utils";
+import dis from "../dispatcher/dispatcher";
+import { Action } from "../dispatcher/actions";
 
-jest.mock("../../../src/dispatcher/dispatcher");
+vi.mock("../dispatcher/dispatcher");
 
 describe("EventUtils", () => {
     const userId = "@user:server";
     const roomId = "!room:server";
     const mockClient = getMockClientWithEventEmitter({
-        getUserId: jest.fn().mockReturnValue(userId),
+        getUserId: vi.fn().mockReturnValue(userId),
     });
 
     beforeEach(() => {
         mockClient.getUserId.mockClear().mockReturnValue(userId);
     });
     afterAll(() => {
-        jest.spyOn(MatrixClientPeg, "get").mockRestore();
+        vi.spyOn(MatrixClientPeg, "get").mockRestore();
     });
 
     // setup events
@@ -176,8 +184,8 @@ describe("EventUtils", () => {
             type: EventType.RoomMessage,
             sender: userId,
             content: {
-                msgtype: MsgType.Text,
-                body: "Hello",
+                "msgtype": MsgType.Text,
+                "body": "Hello",
                 ["m.relates_to"]: {
                     rel_type: RelationType.Replace,
                     event_id: "1",
@@ -189,8 +197,8 @@ describe("EventUtils", () => {
             type: EventType.RoomMessage,
             sender: userId,
             content: {
-                msgtype: MsgType.Text,
-                body: "Hello",
+                "msgtype": MsgType.Text,
+                "body": "Hello",
                 ["m.relates_to"]: {
                     rel_type: RelationType.Reference,
                     event_id: "1",
@@ -404,7 +412,7 @@ describe("EventUtils", () => {
         };
 
         beforeEach(() => {
-            jest.clearAllMocks();
+            vi.clearAllMocks();
 
             stubClient();
             client = MatrixClientPeg.safeGet();
@@ -413,9 +421,9 @@ describe("EventUtils", () => {
                 pendingEventOrdering: PendingEventOrdering.Detached,
             });
 
-            jest.spyOn(client, "supportsThreads").mockReturnValue(true);
-            jest.spyOn(client, "getRoom").mockReturnValue(room);
-            jest.spyOn(client, "fetchRoomEvent").mockImplementation(async (roomId, eventId) => {
+            vi.spyOn(client, "supportsThreads").mockReturnValue(true);
+            vi.spyOn(client, "getRoom").mockReturnValue(room);
+            vi.spyOn(client, "fetchRoomEvent").mockImplementation(async (roomId, eventId) => {
                 return events[eventId] ?? Promise.reject();
             });
         });
diff --git a/apps/web/src/utils/EventUtils.ts b/apps/web/src/utils/EventUtils.ts
index 2c6d149342..dd3a0627bc 100644
--- a/apps/web/src/utils/EventUtils.ts
+++ b/apps/web/src/utils/EventUtils.ts
@@ -165,7 +165,7 @@ const getMsc3531Enabled = (): boolean => {
     if (msc3531Enabled === null) {
         msc3531Enabled = SettingsStore.getValue("feature_msc3531_hide_messages_pending_moderation");
     }
-    return msc3531Enabled!;
+    return msc3531Enabled;
 };
 
 /**
diff --git a/apps/web/test/unit-tests/utils/Feedback-test.ts b/apps/web/src/utils/Feedback.test.ts
similarity index 74%
rename from apps/web/test/unit-tests/utils/Feedback-test.ts
rename to apps/web/src/utils/Feedback.test.ts
index 089b1cefc1..31cf036cbd 100644
--- a/apps/web/test/unit-tests/utils/Feedback-test.ts
+++ b/apps/web/src/utils/Feedback.test.ts
@@ -6,18 +6,20 @@ 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 SdkConfig from "../../../src/SdkConfig";
-import { shouldShowFeedback } from "../../../src/utils/Feedback";
-import SettingsStore from "../../../src/settings/SettingsStore";
-import { UIFeature } from "../../../src/settings/UIFeature";
-import { BugReportEndpointURLLocal } from "../../../src/IConfigOptions";
+import { vi, describe, it, expect, afterEach } from "vitest";
+
+import SdkConfig from "../SdkConfig";
+import { shouldShowFeedback } from "./Feedback";
+import SettingsStore from "../settings/SettingsStore";
+import { UIFeature } from "../settings/UIFeature";
+import { BugReportEndpointURLLocal } from "../IConfigOptions";
 
 const realGetValue = SettingsStore.getValue;
 
 describe("shouldShowFeedback", () => {
     afterEach(() => {
         SdkConfig.reset();
-        jest.restoreAllMocks();
+        vi.restoreAllMocks();
     });
 
     it("should return false if bug_report_endpoint_url is falsey", () => {
@@ -35,7 +37,7 @@ describe("shouldShowFeedback", () => {
     });
 
     it("should return false if UIFeature.Feedback is disabled", () => {
-        jest.spyOn(SettingsStore, "getValue").mockImplementation((key, ...params) => {
+        vi.spyOn(SettingsStore, "getValue").mockImplementation((key, ...params) => {
             if (key === UIFeature.Feedback) {
                 return false;
             }
@@ -48,7 +50,7 @@ describe("shouldShowFeedback", () => {
         SdkConfig.put({
             bug_report_endpoint_url: "https://rageshake.server",
         });
-        jest.spyOn(SettingsStore, "getValue").mockImplementation((key, ...params) => {
+        vi.spyOn(SettingsStore, "getValue").mockImplementation((key, ...params) => {
             if (key === UIFeature.Feedback) {
                 return true;
             }
diff --git a/apps/web/test/unit-tests/utils/FileUtils-test.ts b/apps/web/src/utils/FileUtils.test.ts
similarity index 94%
rename from apps/web/test/unit-tests/utils/FileUtils-test.ts
rename to apps/web/src/utils/FileUtils.test.ts
index 68e0c3ae06..b2e9c6d232 100644
--- a/apps/web/test/unit-tests/utils/FileUtils-test.ts
+++ b/apps/web/src/utils/FileUtils.test.ts
@@ -6,8 +6,9 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type MediaEventContent } from "matrix-js-sdk/src/types";
+import { describe, it, expect } from "vitest";
 
-import { downloadLabelForFile } from "../../../src/utils/FileUtils.ts";
+import { downloadLabelForFile } from "./FileUtils.ts";
 
 describe("FileUtils", () => {
     describe("downloadLabelForFile", () => {
diff --git a/apps/web/src/utils/FileUtils.ts b/apps/web/src/utils/FileUtils.ts
index 7958489057..a0901e91b3 100644
--- a/apps/web/src/utils/FileUtils.ts
+++ b/apps/web/src/utils/FileUtils.ts
@@ -31,7 +31,7 @@ export function downloadLabelForFile(content: MediaEventContent, withSize = true
  * @param {string} fallbackText The fallback text
  * @param {boolean} withSize Whether to include size information. Default true.
  * @param {boolean} shortened Ensure the extension of the file name is visible. Default false.
- * @return {string} the human-readable link text for the attachment.
+ * @returns {string} the human-readable link text for the attachment.
  */
 export function presentableTextForFile(
     content: MediaEventContent,
diff --git a/apps/web/test/unit-tests/utils/FixedRollingArray-test.ts b/apps/web/src/utils/FixedRollingArray.test.ts
similarity index 88%
rename from apps/web/test/unit-tests/utils/FixedRollingArray-test.ts
rename to apps/web/src/utils/FixedRollingArray.test.ts
index 51b4748a82..7b1c0d54a9 100644
--- a/apps/web/test/unit-tests/utils/FixedRollingArray-test.ts
+++ b/apps/web/src/utils/FixedRollingArray.test.ts
@@ -6,7 +6,9 @@ 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 { FixedRollingArray } from "../../../src/utils/FixedRollingArray";
+import { describe, it, expect } from "vitest";
+
+import { FixedRollingArray } from "./FixedRollingArray";
 
 describe("FixedRollingArray", () => {
     it("should seed the array with the given value", () => {
@@ -48,10 +50,8 @@ describe("FixedRollingArray", () => {
             expect(previous - current).toBe(1);
 
             if (i === 1) {
-                // eslint-disable-next-line jest/no-conditional-expect
                 expect(previous).toBe(maxValue);
             } else if (i === width) {
-                // eslint-disable-next-line jest/no-conditional-expect
                 expect(current).toBe(minValue);
             }
         }
diff --git a/apps/web/test/unit-tests/utils/FormattingUtils-test.tsx b/apps/web/src/utils/FormattingUtils.test.tsx
similarity index 89%
rename from apps/web/test/unit-tests/utils/FormattingUtils-test.tsx
rename to apps/web/src/utils/FormattingUtils.test.tsx
index 1b5aedda53..b577909032 100644
--- a/apps/web/test/unit-tests/utils/FormattingUtils-test.tsx
+++ b/apps/web/src/utils/FormattingUtils.test.tsx
@@ -6,12 +6,13 @@ 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 { vi, describe, it, expect, beforeEach } from "vitest";
 import React from "react";
 
-import { formatList, formatCount, formatCountLong } from "../../../src/utils/FormattingUtils";
-import SettingsStore from "../../../src/settings/SettingsStore";
+import { formatList, formatCount, formatCountLong } from "./FormattingUtils";
+import SettingsStore from "../settings/SettingsStore";
 
-jest.mock("../../../src/dispatcher/dispatcher");
+vi.mock("../dispatcher/dispatcher");
 
 describe("FormattingUtils", () => {
     describe("formatCount", () => {
@@ -37,8 +38,8 @@ describe("FormattingUtils", () => {
 
     describe("formatList", () => {
         beforeEach(() => {
-            jest.resetAllMocks();
-            jest.spyOn(SettingsStore, "getValue").mockReturnValue("en-GB");
+            vi.resetAllMocks();
+            vi.spyOn(SettingsStore, "getValue").mockReturnValue("en-GB");
         });
 
         it("should return empty string when given empty list", () => {
@@ -54,7 +55,7 @@ describe("FormattingUtils", () => {
         });
 
         it("should return expected sentence in German without item limit", () => {
-            jest.spyOn(SettingsStore, "getValue").mockReturnValue("de");
+            vi.spyOn(SettingsStore, "getValue").mockReturnValue("de");
             expect(formatList(["abc", "def", "ghi"])).toEqual("abc, def und ghi");
         });
 
diff --git a/apps/web/src/utils/FormattingUtils.ts b/apps/web/src/utils/FormattingUtils.ts
index b952c96170..2e6ae5a84d 100644
--- a/apps/web/src/utils/FormattingUtils.ts
+++ b/apps/web/src/utils/FormattingUtils.ts
@@ -10,37 +10,44 @@ Please see LICENSE files in the repository root for full details.
 import { type ReactElement, type ReactNode } from "react";
 import { useIdColorHash } from "@vector-im/compound-web";
 
-import { _t, getCurrentLanguage, getUserLanguage } from "../languageHandler";
+import { _t, getCurrentLanguage } from "../languageHandler";
+import { getUserLanguage } from "../i18n/settings";
 import { jsxJoin } from "./ReactUtils";
 
 export { formatBytes } from "@element-hq/web-shared-components";
 
-const locale = getCurrentLanguage();
+let cachedFormatter: Intl.NumberFormat | undefined;
+let cachedCompactFormatter: Intl.NumberFormat | undefined;
 
 // It's quite costly to instanciate `Intl.NumberFormat`, hence why we do not do
 // it in every function call
-const compactFormatter = new Intl.NumberFormat(locale, {
-    notation: "compact",
-});
+const getCachedCompactFormatter = (): Intl.NumberFormat => {
+    if (!cachedCompactFormatter)
+        cachedCompactFormatter = new Intl.NumberFormat(getCurrentLanguage(), { notation: "compact" });
+    return cachedCompactFormatter;
+};
 
 /**
  * formats and rounds numbers to fit into ~3 characters, suitable for badge counts
  * e.g: 999, 10K, 99K, 1M, 10M, 99M, 1B, 10B, ...
  */
 export function formatCount(count: number): string {
-    return compactFormatter.format(count);
+    return getCachedCompactFormatter().format(count);
 }
 
 // It's quite costly to instanciate `Intl.NumberFormat`, hence why we do not do
 // it in every function call
-const formatter = new Intl.NumberFormat(locale);
+const getCachedFormatter = (): Intl.NumberFormat => {
+    if (!cachedFormatter) cachedFormatter = new Intl.NumberFormat(getCurrentLanguage());
+    return cachedFormatter;
+};
 
 /**
  * Format a count showing the whole number but making it a bit more readable.
  * e.g: 1000 => 1,000
  */
 export function formatCountLong(count: number): string {
-    return formatter.format(count);
+    return getCachedFormatter().format(count);
 }
 
 export function getUserNameColorClass(userId: string): string {
@@ -88,7 +95,7 @@ export function formatList(items: ReactNode[], itemLimit = items.length, include
     }
 
     if (items.every((e) => typeof e === "string")) {
-        return formatter.format(items as string[]);
+        return formatter.format(items);
     }
 
     const parts = formatter.formatToParts(items.map((_, i) => `${i}`));
diff --git a/apps/web/test/unit-tests/Image-test.ts b/apps/web/src/utils/Image.test.ts
similarity index 70%
rename from apps/web/test/unit-tests/Image-test.ts
rename to apps/web/src/utils/Image.test.ts
index 1104788e6f..7f381bdba7 100644
--- a/apps/web/test/unit-tests/Image-test.ts
+++ b/apps/web/src/utils/Image.test.ts
@@ -6,10 +6,14 @@ 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 fs from "fs";
-import path from "path";
+import { describe, it, expect } from "vitest";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
 
-import { blobIsAnimated, mayBeAnimated } from "../../src/utils/Image";
+import { blobIsAnimated, mayBeAnimated } from "./Image";
+
+const imagesDir = fileURLToPath(import.meta.resolve("../../test/unit-tests/images"));
 
 describe("Image", () => {
     describe("mayBeAnimated", () => {
@@ -32,28 +36,28 @@ describe("Image", () => {
 
     describe("blobIsAnimated", () => {
         it("Animated GIF", async () => {
-            const img = new Blob([fs.readFileSync(path.resolve(__dirname, "images", "animated-logo.gif"))], {
+            const img = new Blob([fs.readFileSync(path.resolve(imagesDir, "animated-logo.gif")).slice()], {
                 type: "image/gif",
             });
             expect(await blobIsAnimated(img)).toBeTruthy();
         });
 
         it("Static GIF", async () => {
-            const img = new Blob([fs.readFileSync(path.resolve(__dirname, "images", "static-logo.gif"))], {
+            const img = new Blob([fs.readFileSync(path.resolve(imagesDir, "static-logo.gif")).slice()], {
                 type: "image/gif",
             });
             expect(await blobIsAnimated(img)).toBeFalsy();
         });
 
         it("Animated WEBP", async () => {
-            const img = new Blob([fs.readFileSync(path.resolve(__dirname, "images", "animated-logo.webp"))], {
+            const img = new Blob([fs.readFileSync(path.resolve(imagesDir, "animated-logo.webp")).slice()], {
                 type: "image/webp",
             });
             expect(await blobIsAnimated(img)).toBeTruthy();
         });
 
         it("Static WEBP", async () => {
-            const img = new Blob([fs.readFileSync(path.resolve(__dirname, "images", "static-logo.webp"))], {
+            const img = new Blob([fs.readFileSync(path.resolve(imagesDir, "static-logo.webp")).slice()], {
                 type: "image/webp",
             });
             expect(await blobIsAnimated(img)).toBeFalsy();
@@ -61,14 +65,14 @@ describe("Image", () => {
 
         it("Static WEBP in extended file format", async () => {
             const img = new Blob(
-                [fs.readFileSync(path.resolve(__dirname, "images", "static-logo-extended-file-format.webp"))],
+                [fs.readFileSync(path.resolve(imagesDir, "static-logo-extended-file-format.webp")).slice()],
                 { type: "image/webp" },
             );
             expect(await blobIsAnimated(img)).toBeFalsy();
         });
 
         it("Animated PNG", async () => {
-            const img = new Blob([fs.readFileSync(path.resolve(__dirname, "images", "animated-logo.apng"))]);
+            const img = new Blob([fs.readFileSync(path.resolve(imagesDir, "animated-logo.apng")).slice()]);
             const pngBlob = img.slice(0, img.size, "image/png");
             const apngBlob = img.slice(0, img.size, "image/apng");
             expect(await blobIsAnimated(pngBlob)).toBeTruthy();
@@ -76,7 +80,7 @@ describe("Image", () => {
         });
 
         it("Static PNG", async () => {
-            const img = new Blob([fs.readFileSync(path.resolve(__dirname, "images", "static-logo.png"))]);
+            const img = new Blob([fs.readFileSync(path.resolve(imagesDir, "static-logo.png")).slice()]);
             const pngBlob = img.slice(0, img.size, "image/png");
             const apngBlob = img.slice(0, img.size, "image/apng");
             expect(await blobIsAnimated(pngBlob)).toBeFalsy();
diff --git a/apps/web/src/utils/Image.ts b/apps/web/src/utils/Image.ts
index 99352e26a0..24ae1bd290 100644
--- a/apps/web/src/utils/Image.ts
+++ b/apps/web/src/utils/Image.ts
@@ -105,7 +105,7 @@ export async function blobIsAnimated(blob: Blob): Promise<boolean | undefined> {
                 return false;
             }
 
-            for (let i = 8; i < blob.size; ) {
+            for (let i = 8; i < blob.size;) {
                 const length = arrayBufferReadInt(arr, i);
                 i += 4;
                 const type = arrayBufferReadStr(arr, i, 4);
diff --git a/apps/web/test/unit-tests/utils/LruCache-test.ts b/apps/web/src/utils/LruCache.test.ts
similarity index 94%
rename from apps/web/test/unit-tests/utils/LruCache-test.ts
rename to apps/web/src/utils/LruCache.test.ts
index 3090c22ace..76904c2653 100644
--- a/apps/web/test/unit-tests/utils/LruCache-test.ts
+++ b/apps/web/src/utils/LruCache.test.ts
@@ -6,21 +6,18 @@ 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 { vi, describe, it, expect, beforeEach } from "vitest";
 import { logger } from "matrix-js-sdk/src/logger";
 
-import { LruCache } from "../../../src/utils/LruCache";
+import { LruCache } from "./LruCache";
 
 describe("LruCache", () => {
     it("when creating a cache with negative capacity it should raise an error", () => {
-        expect(() => {
-            new LruCache(-23);
-        }).toThrow("Cache capacity must be at least 1");
+        expect(() => new LruCache(-23)).toThrow("Cache capacity must be at least 1");
     });
 
     it("when creating a cache with 0 capacity it should raise an error", () => {
-        expect(() => {
-            new LruCache(0);
-        }).toThrow("Cache capacity must be at least 1");
+        expect(() => new LruCache(0)).toThrow("Cache capacity must be at least 1");
     });
 
     describe("when there is a cache with a capacity of 3", () => {
@@ -43,7 +40,7 @@ describe("LruCache", () => {
         });
 
         it("delete() should not raise an error", () => {
-            cache.delete("a");
+            expect(() => cache.delete("a")).not.toThrow();
         });
 
         describe("when the cache contains 2 items", () => {
@@ -72,7 +69,7 @@ describe("LruCache", () => {
             });
 
             it("when an error occurs while setting an item the cache should be cleard", () => {
-                jest.spyOn(logger, "warn");
+                vi.spyOn(logger, "warn");
                 const err = new Error("Something weng wrong :(");
 
                 // @ts-ignore
@@ -90,8 +87,8 @@ describe("LruCache", () => {
                     cache.set("c", "c value");
                 });
 
-                it("deleting an unkonwn item should not raise an error", () => {
-                    cache.delete("unknown");
+                it("deleting an unknown item should not raise an error", () => {
+                    expect(() => cache.delete("unknown")).not.toThrow();
                 });
 
                 it("deleting the first item should work", () => {
diff --git a/apps/web/src/utils/LruCache.ts b/apps/web/src/utils/LruCache.ts
index bfff80d5d5..659d27c65d 100644
--- a/apps/web/src/utils/LruCache.ts
+++ b/apps/web/src/utils/LruCache.ts
@@ -131,6 +131,7 @@ export class LruCache<K, V> {
 
     /**
      * Returns an iterator over the cached values.
+     * @yields each value in the cache
      */
     public *values(): IterableIterator<V> {
         for (const item of this.map.values()) {
diff --git a/apps/web/test/unit-tests/utils/MediaEventHelper-test.ts b/apps/web/src/utils/MediaEventHelper.test.ts
similarity index 86%
rename from apps/web/test/unit-tests/utils/MediaEventHelper-test.ts
rename to apps/web/src/utils/MediaEventHelper.test.ts
index 803924f74c..32dda7ad72 100644
--- a/apps/web/test/unit-tests/utils/MediaEventHelper-test.ts
+++ b/apps/web/src/utils/MediaEventHelper.test.ts
@@ -5,10 +5,14 @@ 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 { MatrixEvent } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import { MediaEventHelper } from "../../../src/utils/MediaEventHelper.ts";
-import { stubClient } from "../../test-utils";
+import { describe, it, expect } from "vitest";
+
+import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { stubClient } from "test-utils";
+
+import { MediaEventHelper } from "./MediaEventHelper.ts";
 
 describe("MediaEventHelper", () => {
     it("should set the mime type on the blob based on the event metadata", async () => {
diff --git a/apps/web/src/utils/MediaEventHelper.ts b/apps/web/src/utils/MediaEventHelper.ts
index 837f049398..96615d692f 100644
--- a/apps/web/src/utils/MediaEventHelper.ts
+++ b/apps/web/src/utils/MediaEventHelper.ts
@@ -75,7 +75,7 @@ export class MediaEventHelper implements IDestroyable {
     private fetchSource = (): Promise<Blob> => {
         const content = this.event.getContent<MediaEventContent>();
         if (this.media.isEncrypted) {
-            return decryptFile(content.file!, content.info);
+            return decryptFile(content.file, content.info);
         }
 
         return (
diff --git a/apps/web/src/utils/MegolmExportEncryption.ts b/apps/web/src/utils/MegolmExportEncryption.ts
index 818f20b532..deed2a73a9 100644
--- a/apps/web/src/utils/MegolmExportEncryption.ts
+++ b/apps/web/src/utils/MegolmExportEncryption.ts
@@ -35,7 +35,7 @@ function cryptoFailMsg(): string {
  *
  * @param {ArrayBuffer} data file to decrypt
  * @param {String} password
- * @return {Promise<String>} promise for decrypted output
+ * @returns {Promise<String>} promise for decrypted output
  *
  *
  */
@@ -103,12 +103,12 @@ export async function decryptMegolmKeyFile(data: ArrayBuffer, password: string):
  * @param {Object=} options
  * @param {Number=} options.kdf_rounds Number of iterations to perform of the
  *    key-derivation function.
- * @return {Promise<ArrayBuffer>} promise for encrypted output
+ * @returns {Promise<ArrayBuffer>} promise for encrypted output
  */
 export async function encryptMegolmKeyFile(
     data: string,
     password: string,
-    options?: { kdf_rounds?: number }, // eslint-disable-line camelcase
+    options?: { kdf_rounds?: number },
 ): Promise<ArrayBuffer> {
     options = options || {};
     const kdfRounds = options.kdf_rounds || 500000;
@@ -178,7 +178,7 @@ export async function encryptMegolmKeyFile(
  * @param {Unit8Array} salt  salt for pbkdf
  * @param {Number} iterations number of pbkdf iterations
  * @param {String} password  password
- * @return {Promise<[CryptoKey, CryptoKey]>} promise for [aes key, hmac key]
+ * @returns {Promise<[CryptoKey, CryptoKey]>} promise for [aes key, hmac key]
  */
 async function deriveKeys(
     salt: Uint8Array<ArrayBuffer>,
@@ -251,7 +251,7 @@ const TRAILER_LINE = "-----END MEGOLM SESSION DATA-----";
  * Strips the header and trailer lines, and unbase64s the content
  *
  * @param {ArrayBuffer} data  input file
- * @return {Uint8Array} unbase64ed content
+ * @returns {Uint8Array} unbase64ed content
  */
 function unpackMegolmKeyFile(data: ArrayBuffer): Uint8Array<ArrayBuffer> {
     // parse the file as a great big String. This should be safe, because there
@@ -306,7 +306,7 @@ function unpackMegolmKeyFile(data: ArrayBuffer): Uint8Array<ArrayBuffer> {
  * base64s the content, and adds header and trailer lines
  *
  * @param {Uint8Array} data  raw data
- * @return {ArrayBuffer} formatted file
+ * @returns {ArrayBuffer} formatted file
  */
 function packMegolmKeyFile(data: Uint8Array): ArrayBuffer {
     // we split into lines before base64ing, because encodeBase64 doesn't deal
@@ -329,7 +329,7 @@ function packMegolmKeyFile(data: Uint8Array): ArrayBuffer {
 /**
  * Encode a typed array of uint8 as base64.
  * @param {Uint8Array} uint8Array The data to encode.
- * @return {string} The base64.
+ * @returns {string} The base64.
  */
 function encodeBase64(uint8Array: Uint8Array): string {
     // Misinterpt the Uint8Array as Latin-1.
@@ -342,7 +342,7 @@ function encodeBase64(uint8Array: Uint8Array): string {
 /**
  * Decode a base64 string to a typed array of uint8.
  * @param {string} base64 The base64 to decode.
- * @return {Uint8Array} The decoded data.
+ * @returns {Uint8Array} The decoded data.
  */
 function decodeBase64(base64: string): Uint8Array<ArrayBuffer> {
     // window.atob returns a unicode string with codepoints in the range 0-255.
diff --git a/apps/web/test/unit-tests/utils/MessageDiffUtils-test.tsx b/apps/web/src/utils/MessageDiffUtils.test.ts
similarity index 94%
rename from apps/web/test/unit-tests/utils/MessageDiffUtils-test.tsx
rename to apps/web/src/utils/MessageDiffUtils.test.ts
index 08ac1d5209..c30c6592b9 100644
--- a/apps/web/test/unit-tests/utils/MessageDiffUtils-test.tsx
+++ b/apps/web/src/utils/MessageDiffUtils.test.ts
@@ -6,11 +6,14 @@ 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 { render } from "jest-matrix-react";
+// @vitest-environment happy-dom
+
+import { describe, it, expect } from "vitest";
+import { render } from "test-utils-rtl";
 
 import type { IContent } from "matrix-js-sdk/src/matrix";
 import type React from "react";
-import { editBodyDiffToHtml } from "../../../src/utils/MessageDiffUtils";
+import { editBodyDiffToHtml } from "./MessageDiffUtils";
 
 describe("editBodyDiffToHtml", () => {
     function buildContent(message: string): IContent {
diff --git a/apps/web/src/utils/MessageDiffUtils.tsx b/apps/web/src/utils/MessageDiffUtils.tsx
index 53d12b2513..f54ea78471 100644
--- a/apps/web/src/utils/MessageDiffUtils.tsx
+++ b/apps/web/src/utils/MessageDiffUtils.tsx
@@ -68,7 +68,7 @@ function findRefNodes(
     const end = isAddition ? route.length - 1 : route.length;
     for (let i = 0; i < end; ++i) {
         refParentNode = refNode;
-        refNode = refNode?.childNodes[route[i]!];
+        refNode = refNode?.childNodes[route[i]];
     }
     return { refNode, refParentNode };
 }
@@ -117,7 +117,7 @@ function isRouteOfNextSibling(route1: number[], route2: number[]): boolean {
     // last element of route1 being larger
     // (e.g. coming behind route1 at that level)
     const lastD1Idx = route1.length - 1;
-    return route2[lastD1Idx]! >= route1[lastD1Idx]!;
+    return route2[lastD1Idx] >= route1[lastD1Idx];
 }
 
 function adjustRoutes(diff: IDiff, remainingDiffs: IDiff[]): void {
@@ -246,7 +246,7 @@ function renderDifferenceInDOM(originalRootNode: Node, diff: IDiff, diffMathPatc
  * Renders a message with the changes made in an edit shown visually.
  * @param {IContent} originalContent the content for the base message
  * @param {IContent} editContent the content for the edit message
- * @return {JSX.Element} a react element similar to what `bodyToHtml` returns
+ * @returns {JSX.Element} a react element similar to what `bodyToHtml` returns
  */
 export function editBodyDiffToHtml(originalContent: IContent, editContent: IContent): JSX.Element {
     // wrap the body in a div, DiffDOM needs a root element
@@ -261,9 +261,9 @@ export function editBodyDiffToHtml(originalContent: IContent, editContent: ICont
     const diffMathPatch = new DiffMatchPatch();
     // parse the base html message as a DOM tree, to which we'll apply the differences found.
     // fish out the div in which we wrapped the messages above with children[0].
-    const originalRootNode = new DOMParser().parseFromString(originalBody, "text/html").body.children[0]!;
+    const originalRootNode = new DOMParser().parseFromString(originalBody, "text/html").body.children[0];
     for (let i = 0; i < diffActions.length; ++i) {
-        const diff = diffActions[i]!;
+        const diff = diffActions[i];
         renderDifferenceInDOM(originalRootNode, diff, diffMathPatch);
         // DiffDOM assumes in subsequent diffs route path that
         // the action was applied (e.g. that a removeElement action removed the element).
diff --git a/apps/web/test/unit-tests/utils/MultiInviter-test.ts b/apps/web/src/utils/MultiInviter.test.ts
similarity index 79%
rename from apps/web/test/unit-tests/utils/MultiInviter-test.ts
rename to apps/web/src/utils/MultiInviter.test.ts
index eda6d9baa6..f23434c0a8 100644
--- a/apps/web/test/unit-tests/utils/MultiInviter-test.ts
+++ b/apps/web/src/utils/MultiInviter.test.ts
@@ -6,17 +6,19 @@ 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 { mocked } from "jest-mock";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach, type Mocked } from "vitest";
 import { EventType, type MatrixClient, MatrixError, MatrixEvent, Room, RoomMember } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
+import * as TestUtilsMatrix from "test-utils";
 
-import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
-import Modal, { type ComponentType, type ComponentProps } from "../../../src/Modal";
-import SettingsStore from "../../../src/settings/SettingsStore";
-import MultiInviter, { type CompletionStates } from "../../../src/utils/MultiInviter";
-import * as TestUtilsMatrix from "../../test-utils";
-import AskInviteAnywayDialog from "../../../src/components/views/dialogs/AskInviteAnywayDialog";
-import ConfirmUserActionDialog from "../../../src/components/views/dialogs/ConfirmUserActionDialog";
+import { MatrixClientPeg } from "../MatrixClientPeg";
+import Modal, { type ComponentType, type ComponentProps } from "../Modal";
+import SettingsStore from "../settings/SettingsStore";
+import MultiInviter, { type CompletionStates } from "./MultiInviter";
+import AskInviteAnywayDialog from "../components/views/dialogs/AskInviteAnywayDialog";
+import ConfirmUserActionDialog from "../components/views/dialogs/ConfirmUserActionDialog";
 
 const ROOMID = "!room:server";
 
@@ -34,19 +36,23 @@ const MXID_PROFILE_STATES: Record<string, () => {}> = {
     },
 };
 
-jest.mock("../../../src/Modal", () => ({
-    createDialog: jest.fn(),
+vi.mock("../Modal", () => ({
+    default: {
+        createDialog: vi.fn(),
+    },
 }));
 
-jest.mock("../../../src/settings/SettingsStore", () => ({
-    getValue: jest.fn(),
-    monitorSetting: jest.fn(),
-    watchSetting: jest.fn(),
+vi.mock("../settings/SettingsStore", () => ({
+    default: {
+        getValue: vi.fn(),
+        monitorSetting: vi.fn(),
+        watchSetting: vi.fn(),
+    },
 }));
 
 const mockPromptBeforeInviteUnknownUsers = (value: boolean) => {
-    mocked(SettingsStore.getValue).mockImplementation(
-        (settingName: string, roomId: string, _excludeDefault = false): any => {
+    vi.mocked(SettingsStore.getValue).mockImplementation(
+        (settingName: string, roomId?: string | null, _excludeDefault = false): any => {
             if (settingName === "promptBeforeInviteUnknownUsers" && roomId === ROOMID) {
                 return value;
             }
@@ -55,12 +61,14 @@ const mockPromptBeforeInviteUnknownUsers = (value: boolean) => {
 };
 
 const mockCreateTrackedDialog = (callbackName: "onInviteAnyways" | "onGiveUp") => {
-    mocked(Modal.createDialog).mockImplementation((Element: ComponentType, props?: ComponentProps<ComponentType>) => {
-        if (Element === AskInviteAnywayDialog) {
-            (props as ComponentProps<typeof AskInviteAnywayDialog>)[callbackName]();
-        }
-        return { close: jest.fn(), finished: new Promise(() => {}) };
-    });
+    vi.mocked(Modal.createDialog).mockImplementation(
+        (Element: ComponentType, props?: ComponentProps<ComponentType>) => {
+            if (Element === AskInviteAnywayDialog) {
+                (props as ComponentProps<typeof AskInviteAnywayDialog>)[callbackName]();
+            }
+            return { close: vi.fn(), finished: new Promise(() => {}) };
+        },
+    );
 };
 
 const expectAllInvitedResult = (result: CompletionStates) => {
@@ -72,34 +80,34 @@ const expectAllInvitedResult = (result: CompletionStates) => {
 };
 
 describe("MultiInviter", () => {
-    let client: jest.Mocked<MatrixClient>;
+    let client: Mocked<MatrixClient>;
     let inviter: MultiInviter;
 
     beforeEach(() => {
-        jest.resetAllMocks();
-        mocked(Modal.createDialog).mockReturnValue({ close: jest.fn(), finished: new Promise(() => {}) });
+        vi.resetAllMocks();
+        vi.mocked(Modal.createDialog).mockReturnValue({ close: vi.fn(), finished: new Promise(() => {}) });
 
         TestUtilsMatrix.stubClient();
-        client = MatrixClientPeg.safeGet() as jest.Mocked<MatrixClient>;
+        client = vi.mocked(MatrixClientPeg.safeGet());
 
-        client.invite = jest.fn();
+        client.invite = vi.fn();
         client.invite.mockResolvedValue({});
 
-        client.getProfileInfo = jest.fn();
+        client.getProfileInfo = vi.fn();
         client.getProfileInfo.mockImplementation(async (userId: string) => {
             const m = MXID_PROFILE_STATES[userId];
             if (m) return m();
             throw new Error();
         });
-        client.unban = jest.fn();
+        client.unban = vi.fn();
 
         inviter = new MultiInviter(client, ROOMID);
     });
 
     describe("invite", () => {
         it("should show a progress dialog while the invite happens", async () => {
-            const mockModalHandle = { close: jest.fn(), finished: new Promise<[]>(() => {}) };
-            mocked(Modal.createDialog).mockReturnValue(mockModalHandle);
+            const mockModalHandle = { close: vi.fn(), finished: new Promise<[]>(() => {}) };
+            vi.mocked(Modal.createDialog).mockReturnValue(mockModalHandle);
 
             const invitePromise = Promise.withResolvers<{}>();
             client.invite.mockReturnValue(invitePromise.promise);
@@ -163,7 +171,7 @@ describe("MultiInviter", () => {
         });
 
         it("should show sensible error when attempting 3pid invite with no identity server", async () => {
-            client.inviteByEmail = jest.fn().mockRejectedValueOnce(
+            client.inviteByEmail = vi.fn().mockRejectedValueOnce(
                 new MatrixError({
                     errcode: "ORG.MATRIX.JSSDK_MISSING_PARAM",
                 }),
@@ -175,7 +183,7 @@ describe("MultiInviter", () => {
         });
 
         it("should ask if user wants to unban user if they have permission", async () => {
-            mocked(Modal.createDialog).mockImplementation(
+            vi.mocked(Modal.createDialog).mockImplementation(
                 (Element: ComponentType, props?: ComponentProps<ComponentType>): any => {
                     // We stub out the modal with an immediate affirmative (proceed) return
                     return { finished: Promise.resolve([true]) };
@@ -183,7 +191,7 @@ describe("MultiInviter", () => {
             );
 
             const room = new Room(ROOMID, client, client.getSafeUserId());
-            mocked(client.getRoom).mockReturnValue(room);
+            vi.mocked(client.getRoom).mockReturnValue(room);
             const ourMember = new RoomMember(ROOMID, client.getSafeUserId());
             ourMember.membership = KnownMembership.Join;
             ourMember.powerLevel = 100;
@@ -206,7 +214,7 @@ describe("MultiInviter", () => {
         });
 
         it("should show sensible error when attempting to invite over federation with m.federate=false", async () => {
-            mocked(client.invite).mockRejectedValueOnce(
+            vi.mocked(client.invite).mockRejectedValueOnce(
                 new MatrixError({
                     errcode: "M_FORBIDDEN",
                 }),
@@ -222,7 +230,7 @@ describe("MultiInviter", () => {
                     room_id: ROOMID,
                 }),
             ]);
-            mocked(client.getRoom).mockReturnValue(room);
+            vi.mocked(client.getRoom).mockReturnValue(room);
 
             await inviter.invite(["@user:other_server"]);
             expect(inviter.getErrorText("@user:other_server")).toMatchInlineSnapshot(
@@ -231,7 +239,7 @@ describe("MultiInviter", () => {
         });
 
         it("should show sensible error when attempting to invite over federation with m.federate=false to space", async () => {
-            mocked(client.invite).mockRejectedValueOnce(
+            vi.mocked(client.invite).mockRejectedValueOnce(
                 new MatrixError({
                     errcode: "M_FORBIDDEN",
                 }),
@@ -248,7 +256,7 @@ describe("MultiInviter", () => {
                     room_id: ROOMID,
                 }),
             ]);
-            mocked(client.getRoom).mockReturnValue(room);
+            vi.mocked(client.getRoom).mockReturnValue(room);
 
             await inviter.invite(["@user:other_server"]);
             expect(inviter.getErrorText("@user:other_server")).toMatchInlineSnapshot(
diff --git a/apps/web/src/utils/PasswordScorer.test.ts b/apps/web/src/utils/PasswordScorer.test.ts
new file mode 100644
index 0000000000..d87e01ce7f
--- /dev/null
+++ b/apps/web/src/utils/PasswordScorer.test.ts
@@ -0,0 +1,37 @@
+/*
+Copyright 2026 Element Creations 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 { vi, describe, it, expect } from "vitest";
+import { ZxcvbnFactory } from "@zxcvbn-ts/core";
+
+import { scorePassword, baseOptions } from "./PasswordScorer.ts";
+
+vi.mock("../languageHandler", () => ({
+    getCurrentLanguage: vi.fn().mockReturnValue("en"),
+    _t: vi.fn((k) => k),
+}));
+vi.mock("../SdkConfig", () => ({
+    default: {
+        get: vi.fn().mockReturnValue({
+            brand: "BRAND",
+        }),
+    },
+}));
+
+describe("scorePassword", () => {
+    const baseZxcvbn = new ZxcvbnFactory(baseOptions);
+
+    it("should handle inputs with spaces by removing them", () => {
+        const input = "apple banana cherry";
+        const baseResult = baseZxcvbn.check(input);
+
+        const output = scorePassword(null, input);
+        expect(output).toBeDefined();
+        expect(output!.score).toBe(3);
+        expect(output!.score).toBeLessThan(baseResult.score);
+    });
+});
diff --git a/apps/web/src/utils/PasswordScorer.ts b/apps/web/src/utils/PasswordScorer.ts
index b01e5051cf..ff50c43ee0 100644
--- a/apps/web/src/utils/PasswordScorer.ts
+++ b/apps/web/src/utils/PasswordScorer.ts
@@ -5,7 +5,7 @@ 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 { zxcvbn, zxcvbnOptions, type ZxcvbnResult, type TranslationKeys } from "@zxcvbn-ts/core";
+import { ZxcvbnFactory, type ZxcvbnResult, type TranslationKeys } from "@zxcvbn-ts/core";
 import * as zxcvbnCommonPackage from "@zxcvbn-ts/language-common";
 import * as zxcvbnEnPackage from "@zxcvbn-ts/language-en";
 import { type MatrixClient } from "matrix-js-sdk/src/matrix";
@@ -13,7 +13,11 @@ import { type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { _t } from "../languageHandler";
 import SdkConfig from "../SdkConfig";
 
-zxcvbnOptions.setOptions({
+/**
+ * Base zxcvbn options
+ * @knipignore - exported for tests
+ */
+export const baseOptions = {
     dictionary: {
         ...zxcvbnCommonPackage.dictionary,
         ...zxcvbnEnPackage.dictionary,
@@ -21,7 +25,7 @@ zxcvbnOptions.setOptions({
     },
     graphs: zxcvbnCommonPackage.adjacencyGraphs,
     useLevenshteinDistance: true,
-});
+};
 
 function getTranslations(): TranslationKeys {
     return {
@@ -95,12 +99,15 @@ export function scorePassword(
         }
     }
 
-    zxcvbnOptions.setTranslations(getTranslations());
+    const zxcvbn = new ZxcvbnFactory({
+        ...baseOptions,
+        translations: getTranslations(),
+    });
 
-    let zxcvbnResult = zxcvbn(password, inputs);
+    let zxcvbnResult = zxcvbn.check(password, inputs);
     // Work around https://github.com/dropbox/zxcvbn/issues/216
     if (password.includes(" ")) {
-        const resultNoSpaces = zxcvbn(password.replace(/ /g, ""), inputs);
+        const resultNoSpaces = zxcvbn.check(password.replace(/ /g, ""), inputs);
         if (resultNoSpaces.score < zxcvbnResult.score) zxcvbnResult = resultNoSpaces;
     }
 
diff --git a/apps/web/src/utils/PhasedRolloutFeature.ts b/apps/web/src/utils/PhasedRolloutFeature.ts
deleted file mode 100644
index dd94ee5c89..0000000000
--- a/apps/web/src/utils/PhasedRolloutFeature.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { xxHash32 } from "js-xxhash";
-
-/**
- * The PhasedRolloutFeature class is used to manage the phased rollout of a new feature.
- *
- * It uses a hash of the user's identifier and the feature name to determine if a feature is enabled for a specific user.
- * The rollout percentage determines the probability that a user will be enabled for the feature.
- * The feature will be enabled for all users if the rollout percentage is 100, and for no users if the percentage is 0.
- * If a user is enabled for a feature at x% rollout, it will also be for any greater than x percent.
- *
- * The process ensures a uniform distribution of enabled features across users.
- *
- * @property featureName - The name of the feature to be rolled out.
- * @property rolloutPercentage - The int percentage (0..100) of users for whom the feature should be enabled.
- */
-export class PhasedRolloutFeature {
-    public readonly featureName: string;
-    private readonly rolloutPercentage: number;
-    private readonly seed: number;
-
-    public constructor(featureName: string, rolloutPercentage: number) {
-        this.featureName = featureName;
-        if (!Number.isInteger(rolloutPercentage) || rolloutPercentage < 0 || rolloutPercentage > 100) {
-            throw new Error("Rollout percentage must be an integer between 0 and 100");
-        }
-        this.rolloutPercentage = rolloutPercentage;
-        // We add the feature name for the seed to ensure that the hash is different for each feature
-        this.seed = Array.from(featureName).reduce((sum, char) => sum + char.charCodeAt(0), 0);
-    }
-
-    /**
-     * Returns true if the feature should be enabled for the given user.
-     * @param userIdentifier - Some unique identifier for the user, e.g. their user ID or device ID.
-     */
-    public isFeatureEnabled(userIdentifier: string): boolean {
-        /*
-         * We use a hash function to convert the unique user ID string into an integer.
-         * This integer can then be used as a basis for deciding whether the user should have access to the new feature.
-         * We need some hash with good uniform distribution properties, security is not a concern here.
-         * We use xxHash32, which is fast and has good distribution properties.
-         */
-        const hash = xxHash32(userIdentifier, this.seed);
-        // We use the hash modulo 100 to get a number between 0 and 99.
-        // Modulo is simple and effective and the distribution should be uniform enough for our purposes.
-        return hash % 100 < this.rolloutPercentage;
-    }
-}
diff --git a/apps/web/test/unit-tests/utils/PinningUtils-test.ts b/apps/web/src/utils/PinningUtils.test.ts
similarity index 89%
rename from apps/web/test/unit-tests/utils/PinningUtils-test.ts
rename to apps/web/src/utils/PinningUtils.test.ts
index 38ca05244d..e27933e415 100644
--- a/apps/web/test/unit-tests/utils/PinningUtils-test.ts
+++ b/apps/web/src/utils/PinningUtils.test.ts
@@ -6,19 +6,21 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
+// @vitest-environment happy-dom
+
+import { vi, describe, it, test, expect, beforeEach } from "vitest";
 import { EventTimeline, EventType, type IEvent, type MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
-import { mocked } from "jest-mock";
 
-import { createTestClient } from "../../test-utils";
-import PinningUtils from "../../../src/utils/PinningUtils";
-import SettingsStore from "../../../src/settings/SettingsStore";
-import { isContentActionable } from "../../../src/utils/EventUtils";
-import { ReadPinsEventId } from "../../../src/components/views/right_panel/types";
+import { createTestClient } from "../../test/test-utils";
+import PinningUtils from "./PinningUtils";
+import SettingsStore from "../settings/SettingsStore";
+import { isContentActionable } from "./EventUtils";
+import { ReadPinsEventId } from "../components/views/right_panel/types";
 
-jest.mock("../../../src/utils/EventUtils", () => {
+vi.mock("./EventUtils", () => {
     return {
-        isContentActionable: jest.fn(),
-        canPinEvent: jest.fn(),
+        isContentActionable: vi.fn(),
+        canPinEvent: vi.fn(),
     };
 });
 
@@ -26,7 +28,7 @@ describe("PinningUtils", () => {
     const roomId = "!room:example.org";
     const userId = "@alice:example.org";
 
-    const mockedIsContentActionable = mocked(isContentActionable);
+    const mockedIsContentActionable = vi.mocked(isContentActionable);
 
     let matrixClient: MatrixClient;
     let room: Room;
@@ -52,14 +54,14 @@ describe("PinningUtils", () => {
 
     beforeEach(() => {
         // Enable feature pinning
-        jest.spyOn(SettingsStore, "getValue").mockReturnValue(true);
+        vi.spyOn(SettingsStore, "getValue").mockReturnValue(true);
         mockedIsContentActionable.mockImplementation(() => true);
 
         matrixClient = createTestClient();
         room = new Room(roomId, matrixClient, userId);
-        matrixClient.getRoom = jest.fn().mockReturnValue(room);
+        matrixClient.getRoom = vi.fn().mockReturnValue(room);
 
-        jest.spyOn(
+        vi.spyOn(
             matrixClient.getRoom(roomId)!.getLiveTimeline().getState(EventTimeline.FORWARDS)!,
             "mayClientSendStateEvent",
         ).mockReturnValue(true);
@@ -96,14 +98,14 @@ describe("PinningUtils", () => {
 
     describe("isPinned", () => {
         test("should return false if no room", () => {
-            matrixClient.getRoom = jest.fn().mockReturnValue(undefined);
+            matrixClient.getRoom = vi.fn().mockReturnValue(undefined);
             const event = makePinEvent();
 
             expect(PinningUtils.isPinned(matrixClient, event)).toBe(false);
         });
 
         test("should return false if no pinned event", () => {
-            jest.spyOn(
+            vi.spyOn(
                 matrixClient.getRoom(roomId)!.getLiveTimeline().getState(EventTimeline.FORWARDS)!,
                 "getStateEvents",
             ).mockReturnValue(null);
@@ -113,7 +115,7 @@ describe("PinningUtils", () => {
         });
 
         test("should return false if pinned events do not contain the event id", () => {
-            jest.spyOn(
+            vi.spyOn(
                 matrixClient.getRoom(roomId)!.getLiveTimeline().getState(EventTimeline.FORWARDS)!,
                 "getStateEvents",
             ).mockReturnValue({
@@ -127,7 +129,7 @@ describe("PinningUtils", () => {
 
         test("should return true if pinned events contains the event id", () => {
             const event = makePinEvent();
-            jest.spyOn(
+            vi.spyOn(
                 matrixClient.getRoom(roomId)!.getLiveTimeline().getState(EventTimeline.FORWARDS)!,
                 "getStateEvents",
             ).mockReturnValue({
@@ -149,14 +151,14 @@ describe("PinningUtils", () => {
             });
 
             test("should return false if no room", () => {
-                matrixClient.getRoom = jest.fn().mockReturnValue(undefined);
+                matrixClient.getRoom = vi.fn().mockReturnValue(undefined);
                 const event = makePinEvent();
 
                 expect(PinningUtils.canPin(matrixClient, event)).toBe(false);
             });
 
             test("should return false if client cannot send state event", () => {
-                jest.spyOn(
+                vi.spyOn(
                     matrixClient.getRoom(roomId)!.getLiveTimeline().getState(EventTimeline.FORWARDS)!,
                     "mayClientSendStateEvent",
                 ).mockReturnValue(false);
@@ -201,7 +203,7 @@ describe("PinningUtils", () => {
 
     describe("pinOrUnpinEvent", () => {
         test("should do nothing if no room", async () => {
-            matrixClient.getRoom = jest.fn().mockReturnValue(undefined);
+            matrixClient.getRoom = vi.fn().mockReturnValue(undefined);
             const event = makePinEvent();
 
             await PinningUtils.pinOrUnpinEvent(matrixClient, event);
@@ -216,7 +218,7 @@ describe("PinningUtils", () => {
         });
 
         test("should pin the event if not pinned", async () => {
-            jest.spyOn(
+            vi.spyOn(
                 matrixClient.getRoom(roomId)!.getLiveTimeline().getState(EventTimeline.FORWARDS)!,
                 "getStateEvents",
             ).mockReturnValue({
@@ -224,8 +226,8 @@ describe("PinningUtils", () => {
                 getContent: () => ({ pinned: ["$otherEventId"] }),
             });
 
-            jest.spyOn(room, "getAccountData").mockReturnValue({
-                getContent: jest.fn().mockReturnValue({
+            vi.spyOn(room, "getAccountData").mockReturnValue({
+                getContent: vi.fn().mockReturnValue({
                     event_ids: ["$otherEventId"],
                 }),
             } as unknown as MatrixEvent);
@@ -247,7 +249,7 @@ describe("PinningUtils", () => {
         test("should unpin the event if already pinned", async () => {
             const event = makePinEvent();
 
-            jest.spyOn(
+            vi.spyOn(
                 matrixClient.getRoom(roomId)!.getLiveTimeline().getState(EventTimeline.FORWARDS)!,
                 "getStateEvents",
             ).mockReturnValue({
@@ -271,7 +273,7 @@ describe("PinningUtils", () => {
         });
 
         test("should return false if client cannot send state event", () => {
-            jest.spyOn(
+            vi.spyOn(
                 matrixClient.getRoom(roomId)!.getLiveTimeline().getState(EventTimeline.FORWARDS)!,
                 "mayClientSendStateEvent",
             ).mockReturnValue(false);
diff --git a/apps/web/src/utils/PinningUtils.ts b/apps/web/src/utils/PinningUtils.ts
index 19a1a9a726..8e8430bcad 100644
--- a/apps/web/src/utils/PinningUtils.ts
+++ b/apps/web/src/utils/PinningUtils.ts
@@ -19,6 +19,7 @@ import {
 import { isContentActionable } from "./EventUtils";
 import { ReadPinsEventId } from "../components/views/right_panel/types";
 
+// oxlint-disable-next-line typescript/no-extraneous-class
 export default class PinningUtils {
     /**
      * Event types that may be pinned.
@@ -33,7 +34,7 @@ export default class PinningUtils {
      * Determines if the given event can be pinned.
      * This is a simple check to see if the event is of a type that can be pinned.
      * @param {MatrixEvent} event The event to check.
-     * @return {boolean} True if the event may be pinned, false otherwise.
+     * @returns {boolean} True if the event may be pinned, false otherwise.
      */
     public static isPinnable(event: MatrixEvent): boolean {
         if (event.isRedacted()) return false;
@@ -43,7 +44,7 @@ export default class PinningUtils {
     /**
      * Determines if the given event may be unpinned.
      * @param {MatrixEvent} event The event to check.
-     * @return {boolean} True if the event may be unpinned, false otherwise.
+     * @returns {boolean} True if the event may be unpinned, false otherwise.
      */
     public static isUnpinnable(event: MatrixEvent): boolean {
         if (!event) return false;
diff --git a/apps/web/test/unit-tests/PreferredRoomVersions-test.ts b/apps/web/src/utils/PreferredRoomVersions.test.ts
similarity index 96%
rename from apps/web/test/unit-tests/PreferredRoomVersions-test.ts
rename to apps/web/src/utils/PreferredRoomVersions.test.ts
index 17d457632d..a01d45897c 100644
--- a/apps/web/test/unit-tests/PreferredRoomVersions-test.ts
+++ b/apps/web/src/utils/PreferredRoomVersions.test.ts
@@ -6,7 +6,9 @@ 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 { doesRoomVersionSupport, PreferredRoomVersions } from "../../src/utils/PreferredRoomVersions";
+import { describe, it, expect } from "vitest";
+
+import { doesRoomVersionSupport, PreferredRoomVersions } from "./PreferredRoomVersions";
 
 describe("doesRoomVersionSupport", () => {
     it("should detect unstable as unsupported", () => {
diff --git a/apps/web/src/utils/ReactUtils.tsx b/apps/web/src/utils/ReactUtils.tsx
index 40217b1adb..f75d94da7a 100644
--- a/apps/web/src/utils/ReactUtils.tsx
+++ b/apps/web/src/utils/ReactUtils.tsx
@@ -18,6 +18,7 @@ export function jsxJoin(array: ReactNode[], joiner?: string | JSX.Element): JSX.
     return (
         <>
             {array.map((element, index) => (
+                // oxlint-disable-next-line react/no-array-index-key
                 <React.Fragment key={index}>
                     {element}
                     {index === array.length - 1 ? null : joiner}
diff --git a/apps/web/src/utils/Reply.ts b/apps/web/src/utils/Reply.ts
index 3b595e8693..249c901fce 100644
--- a/apps/web/src/utils/Reply.ts
+++ b/apps/web/src/utils/Reply.ts
@@ -85,7 +85,7 @@ export function shouldDisplayReply(event: MatrixEvent): boolean {
 
 export function addReplyToMessageContent(content: IContent, replyToEvent: MatrixEvent): void {
     content["m.relates_to"] = {
-        ...(content["m.relates_to"] || {}),
+        ...content["m.relates_to"],
         ...makeReplyMixIn(replyToEvent),
     };
 }
diff --git a/apps/web/src/utils/ResizeNotifier.ts b/apps/web/src/utils/ResizeNotifier.ts
index 02b4848c2f..a52db4fc1e 100644
--- a/apps/web/src/utils/ResizeNotifier.ts
+++ b/apps/web/src/utils/ResizeNotifier.ts
@@ -15,6 +15,7 @@ Please see LICENSE files in the repository root for full details.
  * @event module:utils~ResizeNotifier#"middlePanelResizedNoisy"
  */
 
+// oxlint-disable-next-line no-restricted-imports
 import { EventEmitter } from "events";
 import { throttle } from "lodash";
 
diff --git a/apps/web/src/utils/RoomUpgrade.ts b/apps/web/src/utils/RoomUpgrade.ts
index d92038e0db..7bed4b68a4 100644
--- a/apps/web/src/utils/RoomUpgrade.ts
+++ b/apps/web/src/utils/RoomUpgrade.ts
@@ -14,9 +14,9 @@ import { showAnyInviteErrors } from "../RoomInvite";
 import Modal, { type IHandle } from "../Modal";
 import { _t } from "../languageHandler";
 import ErrorDialog from "../components/views/dialogs/ErrorDialog";
-import SpaceStore from "../stores/spaces/SpaceStore";
 import Spinner from "../components/views/elements/Spinner";
 import MultiInviter, { type MultiInviterOptions } from "./MultiInviter";
+import { SDKContextClass } from "../contexts/SDKContextClass.ts";
 
 export interface RoomUpgradeProgress {
     roomUpgraded: boolean;
@@ -73,7 +73,7 @@ export async function upgradeRoom(
 
     let parentsToRelink: Room[] = [];
     if (updateSpaces) {
-        parentsToRelink = Array.from(SpaceStore.instance.getKnownParents(room.roomId))
+        parentsToRelink = Array.from(SDKContextClass.instance.spaceStore.getKnownParents(room.roomId))
             .map((roomId) => cli.getRoom(roomId))
             .filter((parent) =>
                 parent?.currentState.maySendStateEvent(EventType.SpaceChild, cli.getUserId()!),
@@ -132,7 +132,7 @@ export async function upgradeRoom(
                     parent.roomId,
                     EventType.SpaceChild,
                     {
-                        ...(currentEv?.getContent() || {}), // copy existing attributes like suggested
+                        ...currentEv?.getContent(), // copy existing attributes like suggested
                         via: [cli.getDomain()!],
                     },
                     newRoomId,
diff --git a/apps/web/test/unit-tests/utils/SearchInput-test.ts b/apps/web/src/utils/SearchInput.test.ts
similarity index 74%
rename from apps/web/test/unit-tests/utils/SearchInput-test.ts
rename to apps/web/src/utils/SearchInput.test.ts
index 79786601a5..ec8c2f17d2 100644
--- a/apps/web/test/unit-tests/utils/SearchInput-test.ts
+++ b/apps/web/src/utils/SearchInput.test.ts
@@ -5,21 +5,22 @@ Copyright 2023 Boluwatife Omosowon <boluomosowon@gmail.com>
 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 { mocked } from "jest-mock";
 
-import { parsePermalink } from "../../../src/utils/permalinks/Permalinks";
-import { transformSearchTerm } from "../../../src/utils/SearchInput";
+import { vi, describe, it, expect } from "vitest";
 
-jest.mock("../../../src/utils/permalinks/Permalinks");
-jest.mock("../../../src/stores/WidgetStore");
-jest.mock("../../../src/stores/widgets/WidgetLayoutStore");
+import { parsePermalink } from "./permalinks/Permalinks";
+import { transformSearchTerm } from "./SearchInput";
+
+vi.mock("./permalinks/Permalinks");
+vi.mock("../stores/WidgetStore");
+vi.mock("../stores/widgets/WidgetLayoutStore");
 
 describe("transforming search term", () => {
     it("should return the primaryEntityId if the search term was a permalink", () => {
         const roomLink = "https://matrix.to/#/#element-dev:matrix.org";
         const parsedPermalink = "#element-dev:matrix.org";
 
-        mocked(parsePermalink).mockReturnValue({
+        vi.mocked(parsePermalink).mockReturnValue({
             primaryEntityId: parsedPermalink,
             roomIdOrAlias: parsedPermalink,
             eventId: "",
@@ -33,7 +34,7 @@ describe("transforming search term", () => {
     it("should return the original search term if the search term is a permalink and the primaryEntityId is null", () => {
         const searchTerm = "https://matrix.to/#/#random-link:matrix.org";
 
-        mocked(parsePermalink).mockReturnValue({
+        vi.mocked(parsePermalink).mockReturnValue({
             primaryEntityId: null,
             roomIdOrAlias: null,
             eventId: null,
@@ -46,7 +47,7 @@ describe("transforming search term", () => {
 
     it("should return the original search term if the search term was not a permalink", () => {
         const searchTerm = "search term";
-        mocked(parsePermalink).mockReturnValue(null);
+        vi.mocked(parsePermalink).mockReturnValue(null);
         expect(transformSearchTerm(searchTerm)).toBe(searchTerm);
     });
 });
diff --git a/apps/web/src/utils/SessionLock.ts b/apps/web/src/utils/SessionLock.ts
index afa18c2644..096f5d1fb5 100644
--- a/apps/web/src/utils/SessionLock.ts
+++ b/apps/web/src/utils/SessionLock.ts
@@ -217,7 +217,6 @@ export async function getSessionLock(onNewInstance: () => Promise<void>): Promis
     window.localStorage.setItem(SESSION_LOCK_CONSTANTS.STORAGE_ITEM_CLAIMANT, sessionIdentifier);
 
     // now, wait for the lock to be free.
-    // eslint-disable-next-line no-constant-condition
     while (true) {
         const remaining = checkLock();
 
diff --git a/apps/web/test/unit-tests/utils/ShieldUtils-test.ts b/apps/web/src/utils/ShieldUtils.test.ts
similarity index 94%
rename from apps/web/test/unit-tests/utils/ShieldUtils-test.ts
rename to apps/web/src/utils/ShieldUtils.test.ts
index 43f978cd4a..de70905238 100644
--- a/apps/web/test/unit-tests/utils/ShieldUtils-test.ts
+++ b/apps/web/src/utils/ShieldUtils.test.ts
@@ -6,11 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
+import { vi, describe, it, expect, beforeAll, afterAll } from "vitest";
 import { type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
 import { UserVerificationStatus } from "matrix-js-sdk/src/crypto-api";
 
-import { shieldStatusForRoom } from "../../../src/utils/ShieldUtils";
-import DMRoomMap from "../../../src/utils/DMRoomMap";
+import { shieldStatusForRoom } from "./ShieldUtils";
+import DMRoomMap from "./DMRoomMap";
 
 function mkClient(selfTrust = false) {
     return {
@@ -30,13 +31,13 @@ function mkClient(selfTrust = false) {
 }
 
 describe("mkClient self-test", function () {
-    test.each([true, false])("behaves well for self-trust=%s", async (v) => {
+    it.each([true, false])("behaves well for self-trust=%s", async (v) => {
         const client = mkClient(v);
         const status = await client.getCrypto()!.getDeviceVerificationStatus("@self:localhost", "DEVICE");
         expect(status?.isVerified()).toBe(v);
     });
 
-    test.each([
+    it.each([
         ["@TT:h", true],
         ["@TF:h", true],
         ["@FT:h", false],
@@ -46,7 +47,7 @@ describe("mkClient self-test", function () {
         expect(status!.isCrossSigningVerified()).toBe(trust);
     });
 
-    test.each([
+    it.each([
         ["@TT:h", true],
         ["@TF:h", false],
         ["@FT:h", true],
@@ -62,11 +63,11 @@ describe("shieldStatusForMembership self-trust behaviour", function () {
         const mockInstance = {
             getUserIdForRoomId: (roomId: string) => (roomId === "DM" ? "@any:h" : null),
         } as unknown as DMRoomMap;
-        jest.spyOn(DMRoomMap, "shared").mockReturnValue(mockInstance);
+        vi.spyOn(DMRoomMap, "shared").mockReturnValue(mockInstance);
     });
 
     afterAll(() => {
-        jest.spyOn(DMRoomMap, "shared").mockRestore();
+        vi.spyOn(DMRoomMap, "shared").mockRestore();
     });
 
     it.each([
@@ -165,7 +166,7 @@ describe("shieldStatusForMembership other-trust behaviour", function () {
         const mockInstance = {
             getUserIdForRoomId: (roomId: string) => (roomId === "DM" ? "@any:h" : null),
         } as unknown as DMRoomMap;
-        jest.spyOn(DMRoomMap, "shared").mockReturnValue(mockInstance);
+        vi.spyOn(DMRoomMap, "shared").mockReturnValue(mockInstance);
     });
 
     it.each([
diff --git a/apps/web/test/unit-tests/utils/Singleflight-test.ts b/apps/web/src/utils/Singleflight.test.ts
similarity index 90%
rename from apps/web/test/unit-tests/utils/Singleflight-test.ts
rename to apps/web/src/utils/Singleflight.test.ts
index 58e15f2060..c816189c43 100644
--- a/apps/web/test/unit-tests/utils/Singleflight-test.ts
+++ b/apps/web/src/utils/Singleflight.test.ts
@@ -6,7 +6,9 @@ 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 { Singleflight } from "../../../src/utils/Singleflight";
+import { vi, describe, it, expect, afterEach } from "vitest";
+
+import { Singleflight } from "./Singleflight";
 
 describe("Singleflight", () => {
     afterEach(() => {
@@ -28,7 +30,7 @@ describe("Singleflight", () => {
         const instance = {};
         const key = "test";
         const val = {}; // unique object for reference check
-        const fn = jest.fn().mockReturnValue(val);
+        const fn = vi.fn().mockReturnValue(val);
         const sf = Singleflight.for(instance, key);
         const r1 = sf.do(fn);
         expect(r1).toBe(val);
@@ -42,7 +44,7 @@ describe("Singleflight", () => {
         const instance = {};
         const key = "test";
         const val = {}; // unique object for reference check
-        const fn = jest.fn().mockReturnValue(val);
+        const fn = vi.fn().mockReturnValue(val);
         let sf = Singleflight.for(instance, key);
         const r1 = sf.do(fn);
         expect(r1).toBe(val);
@@ -57,7 +59,7 @@ describe("Singleflight", () => {
         const instance = {};
         const key = "test";
         const val = {}; // unique object for reference check
-        const fn = jest.fn().mockReturnValue(val);
+        const fn = vi.fn().mockReturnValue(val);
         const sf = Singleflight.for(instance, key);
         const r1 = sf.do(fn);
         expect(r1).toBe(val);
@@ -72,7 +74,7 @@ describe("Singleflight", () => {
         const instance = {};
         const key = "test";
         const val = {}; // unique object for reference check
-        const fn = jest.fn().mockReturnValue(val);
+        const fn = vi.fn().mockReturnValue(val);
         const sf = Singleflight.for(instance, key);
         const r1 = sf.do(fn);
         expect(r1).toBe(val);
@@ -87,7 +89,7 @@ describe("Singleflight", () => {
         const instance = {};
         const key = "test";
         const val = {}; // unique object for reference check
-        const fn = jest.fn().mockReturnValue(val);
+        const fn = vi.fn().mockReturnValue(val);
         const sf = Singleflight.for(instance, key);
         const r1 = sf.do(fn);
         expect(r1).toBe(val);
diff --git a/apps/web/test/unit-tests/utils/SnakedObject-test.ts b/apps/web/src/utils/SnakedObject.test.ts
similarity index 93%
rename from apps/web/test/unit-tests/utils/SnakedObject-test.ts
rename to apps/web/src/utils/SnakedObject.test.ts
index d0195aef39..1324d64dd9 100644
--- a/apps/web/test/unit-tests/utils/SnakedObject-test.ts
+++ b/apps/web/src/utils/SnakedObject.test.ts
@@ -6,7 +6,9 @@ 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 { SnakedObject, snakeToCamel } from "../../../src/utils/SnakedObject";
+import { describe, it, expect } from "vitest";
+
+import { SnakedObject, snakeToCamel } from "./SnakedObject";
 
 describe("snakeToCamel", () => {
     it("should convert snake_case to camelCase in simple scenarios", () => {
@@ -31,14 +33,12 @@ describe("snakeToCamel", () => {
 });
 
 describe("SnakedObject", () => {
-    /* eslint-disable camelcase*/
     const input = {
         snake_case: "woot",
         snakeCase: "oh no", // ensure different value from snake_case for tests
         camelCase: "fallback",
     };
     const snake = new SnakedObject(input);
-    /* eslint-enable camelcase*/
 
     it("should prefer snake_case keys", () => {
         expect(snake.get("snake_case")).toBe(input.snake_case);
diff --git a/apps/web/src/utils/StorageAccess.ts b/apps/web/src/utils/StorageAccess.ts
index 90bf5e74a5..5871904cf7 100644
--- a/apps/web/src/utils/StorageAccess.ts
+++ b/apps/web/src/utils/StorageAccess.ts
@@ -47,7 +47,7 @@ async function idbInit(): Promise<void> {
 async function idbTransaction(
     table: string,
     mode: IDBTransactionMode,
-    fn: (objectStore: IDBObjectStore) => IDBRequest<any>,
+    fn: (objectStore: IDBObjectStore) => IDBRequest,
 ): Promise<any> {
     if (!idb) {
         await idbInit();
diff --git a/apps/web/src/utils/StorageManager.ts b/apps/web/src/utils/StorageManager.ts
index 478d30af6f..c80885d2c7 100644
--- a/apps/web/src/utils/StorageManager.ts
+++ b/apps/web/src/utils/StorageManager.ts
@@ -22,23 +22,72 @@ function log(msg: string): void {
     logger.log(`StorageManager: ${msg}`);
 }
 
+function warn(msg: string, ...args: any[]): void {
+    logger.warn(`StorageManager: ${msg}`, ...args);
+}
+
 function error(msg: string, ...args: any[]): void {
     logger.error(`StorageManager: ${msg}`, ...args);
 }
 
-export function tryPersistStorage(): void {
-    if (navigator.storage && navigator.storage.persist) {
-        navigator.storage.persist().then((persistent) => {
-            logger.log("StorageManager: Persistent?", persistent);
-        });
-    } else if (document.requestStorageAccess) {
-        // Safari
-        document.requestStorageAccess().then(
-            () => logger.log("StorageManager: Persistent?", true),
-            () => logger.log("StorageManager: Persistent?", false),
-        );
-    } else {
-        logger.log("StorageManager: Persistence unsupported");
+/**
+ * Warn (in the logs, captured by rageshakes) that the browser refused to make our storage
+ * persistent. Without durable storage the browser may evict IndexedDB — which holds the
+ * end-to-end encryption crypto store — under storage pressure, forcing a re-login and
+ * recovery-key re-entry. See https://github.com/element-hq/element-web/issues/32198.
+ *
+ * We deliberately do NOT surface a user-facing dialog/toast here: on a packaged desktop
+ * (custom-scheme) build Chromium's durable-storage heuristic commonly returns `false` even
+ * in the healthy case, so a per-login warning would be a false-alarm flood. The actual
+ * post-eviction user prompt is handled separately by {@link checkConsistency} →
+ * StorageEvictedDialog.
+ */
+function warnPersistenceDenied(): void {
+    warn(
+        "Persistent storage was not granted. The browser may evict locally stored data " +
+            "(including the end-to-end encryption keys in the crypto store) under storage pressure, " +
+            "which can force a re-login. See https://github.com/element-hq/element-web/issues/32198.",
+    );
+}
+
+/**
+ * Ask the browser to make our storage persistent (durable), so it is not evicted under
+ * storage pressure. Acts on the result: warns when persistence is denied.
+ *
+ * Invoked on every login *and* session restore, so we first check whether storage is
+ * already persistent and short-circuit to avoid re-requesting (some browsers re-prompt).
+ *
+ * Never rejects, so it is safe to call fire-and-forget.
+ *
+ * @returns whether storage is persistent after the attempt.
+ */
+export async function tryPersistStorage(): Promise<boolean> {
+    try {
+        if (navigator.storage && navigator.storage.persist) {
+            // Avoid re-requesting (and possibly re-prompting) when we already have it. A failure
+            // to *query* the state must not stop us from *requesting* persistence below.
+            try {
+                if (navigator.storage.persisted && (await navigator.storage.persisted())) {
+                    log("Persistent storage already granted");
+                    return true;
+                }
+            } catch (e) {
+                warn("Could not query persisted-storage state; requesting persistence anyway", e);
+            }
+            const persistent = await navigator.storage.persist();
+            log(`Persistent? ${persistent}`);
+            if (!persistent) {
+                warnPersistenceDenied();
+            }
+            return persistent;
+        } else {
+            log("Persistence unsupported");
+            return false;
+        }
+    } catch (e) {
+        // A storage-API hiccup must never reject into the fire-and-forget caller.
+        error("Failed to request persistent storage", e);
+        return false;
     }
 }
 
diff --git a/apps/web/src/utils/Timer.ts b/apps/web/src/utils/Timer.ts
index c5d9084c31..f078bcbe55 100644
--- a/apps/web/src/utils/Timer.ts
+++ b/apps/web/src/utils/Timer.ts
@@ -105,7 +105,7 @@ export default class Timer {
     /**
      *promise that will resolve when the timer elapses,
      *or is rejected when abort is called
-     *@return {Promise}
+     *@returns {Promise}
      */
     public finished(): Promise<void> {
         return this.deferred.promise;
diff --git a/apps/web/src/utils/UrlPreviewFetcher.test.ts b/apps/web/src/utils/UrlPreviewFetcher.test.ts
new file mode 100644
index 0000000000..31c1115818
--- /dev/null
+++ b/apps/web/src/utils/UrlPreviewFetcher.test.ts
@@ -0,0 +1,349 @@
+/*
+ * Copyright 2026 Element Creations 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 { vi, describe, it, expect, beforeAll, afterAll, type Mock } from "vitest";
+
+import type { IPreviewUrlResponse, MatrixClient } from "matrix-js-sdk/src/matrix";
+import { UrlPreviewFetcher } from "./UrlPreviewFetcher";
+import { type UnstableBundledUrlPreviewSingle } from "../../@types/url-preview";
+
+const IMAGE_MXC = "mxc://example.org/abc";
+const BASIC_PREVIEW_OGDATA = {
+    "og:title": "This is an example!",
+    "og:description": "This is a description",
+    "og:type": "document",
+    "og:url": "https://example.org",
+    "og:site_name": "Example.org",
+};
+
+function getFetcher(): {
+    fetcher: UrlPreviewFetcher;
+    client: { getUrlPreview: Mock; mxcUrlToHttp: Mock };
+} {
+    const client = {
+        getUrlPreview: vi.fn(),
+        mxcUrlToHttp: vi.fn(),
+    } as unknown as MatrixClient;
+    return {
+        fetcher: new UrlPreviewFetcher(client, 0, false),
+        client: client as unknown as { getUrlPreview: Mock; mxcUrlToHttp: Mock },
+    };
+}
+
+describe("UrlPreviewFetcher", () => {
+    let originalDevicePixelRatio: Window["devicePixelRatio"];
+    beforeAll(() => {
+        originalDevicePixelRatio = window.devicePixelRatio;
+        window.devicePixelRatio = 1;
+    });
+    afterAll(() => {
+        window.devicePixelRatio = originalDevicePixelRatio;
+    });
+    it("should return null when the fetch fails", async () => {
+        const { fetcher, client } = getFetcher();
+        client.getUrlPreview.mockRejectedValue(new Error("Forced test failure"));
+        expect(await fetcher.fetchPreview("https://example.org", true)).toBeNull();
+    });
+
+    it("should return null when title equals the URL and there is no image", async () => {
+        const { fetcher, client } = getFetcher();
+        client.getUrlPreview.mockResolvedValueOnce({
+            "og:title": "https://example.org",
+            "og:type": "document",
+            "og:url": "https://example.org",
+        });
+        expect(await fetcher.fetchPreview("https://example.org", true)).toBeNull();
+    });
+
+    it("should cache results and not re-fetch for the same URL", async () => {
+        const { fetcher, client } = getFetcher();
+        client.getUrlPreview.mockResolvedValue(BASIC_PREVIEW_OGDATA);
+        await fetcher.fetchPreview("https://example.org", true);
+        await fetcher.fetchPreview("https://example.org", true);
+        expect(client.getUrlPreview).toHaveBeenCalledTimes(1);
+    });
+
+    it("should re-fetch after clearCache is called", async () => {
+        const { fetcher, client } = getFetcher();
+        client.getUrlPreview.mockResolvedValue(BASIC_PREVIEW_OGDATA);
+        await fetcher.fetchPreview("https://example.org", true);
+        fetcher.clearCache();
+        await fetcher.fetchPreview("https://example.org", true);
+        expect(client.getUrlPreview).toHaveBeenCalledTimes(2);
+    });
+
+    it("should not process media when loadMedia is false", async () => {
+        const { fetcher, client } = getFetcher();
+        client.getUrlPreview.mockResolvedValueOnce({
+            "og:title": "This is an example!",
+            "og:type": "document",
+            "og:url": "https://example.org",
+            "og:image": IMAGE_MXC,
+            "og:image:height": 128,
+            "og:image:width": 128,
+            "matrix:image:size": 10000,
+        });
+        const preview = await fetcher.fetchPreview("https://example.org", false);
+        expect(preview?.image).toBeUndefined();
+        // eslint-disable-next-line no-restricted-properties
+        expect(client.mxcUrlToHttp).not.toHaveBeenCalled();
+    });
+
+    it("should preview a URL with media", async () => {
+        const { fetcher, client } = getFetcher();
+        client.getUrlPreview.mockResolvedValueOnce({
+            "og:title": "This is an example!",
+            "og:type": "document",
+            "og:url": "https://example.org",
+            "og:image": IMAGE_MXC,
+            "og:image:height": 128,
+            "og:image:width": 128,
+            "matrix:image:size": 10000,
+        });
+        // eslint-disable-next-line no-restricted-properties
+        client.mxcUrlToHttp.mockImplementation((url, width) => {
+            expect(url).toEqual(IMAGE_MXC);
+            if (width) return "https://example.org/image/thumb";
+            return "https://example.org/image/src";
+        });
+        const preview = await fetcher.fetchPreview("https://example.org", true);
+        expect(preview).toMatchSnapshot();
+    });
+
+    it.each<Partial<IPreviewUrlResponse>>([
+        { "matrix:image:size": 8191 },
+        { "og:image:width": 95 },
+        { "og:image:height": 95 },
+    ])("should use a site icon for small images %s", async (extraResp) => {
+        const { fetcher, client } = getFetcher();
+        client.getUrlPreview.mockResolvedValueOnce({
+            "og:title": "This is an example!",
+            "og:type": "document",
+            "og:url": "https://example.org",
+            "og:image": IMAGE_MXC,
+            "og:image:height": 128,
+            "og:image:width": 128,
+            "matrix:image:size": 8193,
+            ...extraResp,
+        });
+        // eslint-disable-next-line no-restricted-properties
+        client.mxcUrlToHttp.mockImplementation((url) => {
+            expect(url).toEqual(IMAGE_MXC);
+            return "https://example.org/image/src";
+        });
+        const preview = await fetcher.fetchPreview("https://example.org", true);
+        expect(preview?.siteIcon).toBeTruthy();
+        expect(preview?.image).toBeUndefined();
+    });
+
+    it.each<string>(["og:video", "og:video:type", "og:audio"])("detects playable links via %s", async (property) => {
+        const { fetcher, client } = getFetcher();
+        // eslint-disable-next-line no-restricted-properties
+        client.mxcUrlToHttp.mockImplementation((url, width) => {
+            if (width) return "https://example.org/image/thumb";
+            return "https://example.org/image/src";
+        });
+        client.getUrlPreview.mockResolvedValueOnce({
+            ...BASIC_PREVIEW_OGDATA,
+            "og:image": IMAGE_MXC,
+            "og:image:height": 128,
+            "og:image:width": 128,
+            "matrix:image:size": 10000,
+            [property]: "anything",
+        });
+        const preview = await fetcher.fetchPreview("https://example.org", true);
+        expect(preview?.image?.playable).toBe(true);
+    });
+
+    describe("calculates author", () => {
+        it("should use the profile:username if provided", async () => {
+            const { fetcher, client } = getFetcher();
+            client.getUrlPreview.mockResolvedValueOnce({ ...BASIC_PREVIEW_OGDATA, "profile:username": "my username" });
+            const preview = await fetcher.fetchPreview("https://example.org", true);
+            expect(preview?.author).toEqual("my username");
+        });
+
+        it("should use author if the og:type is an article", async () => {
+            const { fetcher, client } = getFetcher();
+            client.getUrlPreview.mockResolvedValueOnce({
+                ...BASIC_PREVIEW_OGDATA,
+                "og:type": "article",
+                "article:author": "my name",
+            });
+            const preview = await fetcher.fetchPreview("https://example.org", true);
+            expect(preview?.author).toEqual("my name");
+        });
+
+        it("should NOT use author if the author is a URL", async () => {
+            const { fetcher, client } = getFetcher();
+            client.getUrlPreview.mockResolvedValueOnce({
+                ...BASIC_PREVIEW_OGDATA,
+                "og:type": "article",
+                "article:author": "https://junk.example.org/foo",
+            });
+            const preview = await fetcher.fetchPreview("https://example.org", true);
+            expect(preview?.author).toBeUndefined();
+        });
+    });
+
+    // og:url and og:type are not surfaced in the preview.
+    const baseOg = {
+        "og:url": "https://example.org",
+        "og:type": "document",
+    };
+
+    it.each<IPreviewUrlResponse>([
+        { ...baseOg, "og:title": "Basic title" },
+        { ...baseOg, "og:site_name": "Site name", "og:title": "" },
+        { ...baseOg, "og:description": "A description", "og:title": "" },
+        { ...baseOg, "og:title": "Cool blog", "og:site_name": "Cool site" },
+        {
+            ...baseOg,
+            "og:title": "Media test",
+            // API *may* return a string, so check we parse correctly.
+            "og:image:height": "500" as unknown as number,
+            "og:image:width": 500,
+            "matrix:image:size": 10000,
+            "og:image": IMAGE_MXC,
+        },
+    ])("handles different kinds of opengraph responses %s", async (og) => {
+        const { fetcher, client } = getFetcher();
+        // eslint-disable-next-line no-restricted-properties
+        client.mxcUrlToHttp.mockImplementation((url, width) => {
+            if (width) return "https://example.org/image/thumb";
+            return "https://example.org/image/src";
+        });
+        client.getUrlPreview.mockResolvedValueOnce(og);
+        const preview = await fetcher.fetchPreview("https://example.org", true);
+        expect(preview).toMatchSnapshot();
+    });
+
+    describe("previewFromBundle", () => {
+        const BASIC_BUNDLE: UnstableBundledUrlPreviewSingle = {
+            "matched_url": "https://example.org/page",
+            "og:title": "Bundled title",
+            "og:description": "Bundled description",
+            "og:url": "https://example.org/canonical",
+        };
+
+        const IMAGE_BUNDLE: UnstableBundledUrlPreviewSingle = {
+            ...BASIC_BUNDLE,
+            "og:image": IMAGE_MXC,
+            "og:image:type": "image/png",
+            "og:image:width": 500,
+            "og:image:height": 400,
+            "matrix:image:size": 10000,
+        };
+
+        function mockMedia(client: { mxcUrlToHttp: Mock }): void {
+            // eslint-disable-next-line no-restricted-properties
+            client.mxcUrlToHttp.mockImplementation((url, width) => {
+                expect(url).toEqual(IMAGE_MXC);
+                if (width) return "https://example.org/image/thumb";
+                return "https://example.org/image/src";
+            });
+        }
+
+        it("should map basic bundle fields without an image", () => {
+            const { fetcher, client } = getFetcher();
+            const preview = fetcher.previewFromBundle(BASIC_BUNDLE);
+            expect(preview).toEqual({
+                link: "https://example.org/page",
+                title: "Bundled title",
+                siteName: "example.org",
+                showTooltipOnLink: false,
+                description: "Bundled description",
+                ogUrl: "https://example.org/canonical",
+            });
+            // eslint-disable-next-line no-restricted-properties
+            expect(client.mxcUrlToHttp).not.toHaveBeenCalled();
+        });
+
+        it("should fall back to the matched_url when there is no title", () => {
+            const { fetcher } = getFetcher();
+            const preview = fetcher.previewFromBundle({ matched_url: "https://example.org/page" });
+            expect(preview.title).toEqual("https://example.org/page");
+            expect(preview.showTooltipOnLink).toBe(false);
+        });
+
+        it("should set showTooltipOnLink when tooltips are enabled and title differs from the URL", () => {
+            const { client } = getFetcher();
+            const fetcher = new UrlPreviewFetcher(client as unknown as MatrixClient, 0, true);
+            const preview = fetcher.previewFromBundle(BASIC_BUNDLE);
+            expect(preview.showTooltipOnLink).toBe(true);
+        });
+
+        // Unlike fetchPreview, the tooltip flag is computed against the raw og:title rather than
+        // the resolved title, so a missing og:title still shows a tooltip even though the displayed
+        // title falls back to the matched_url.
+        it("should set showTooltipOnLink when tooltips are enabled and og:title is absent", () => {
+            const { client } = getFetcher();
+            const fetcher = new UrlPreviewFetcher(client as unknown as MatrixClient, 0, true);
+            const preview = fetcher.previewFromBundle({ matched_url: "https://example.org/page" });
+            expect(preview.showTooltipOnLink).toBe(true);
+        });
+
+        it("should not set showTooltipOnLink when tooltips are enabled but og:title equals the URL", () => {
+            const { client } = getFetcher();
+            const fetcher = new UrlPreviewFetcher(client as unknown as MatrixClient, 0, true);
+            const preview = fetcher.previewFromBundle({
+                "matched_url": "https://example.org/page",
+                "og:title": "https://example.org/page",
+            });
+            expect(preview.showTooltipOnLink).toBe(false);
+        });
+
+        it("should include the image when all image fields are present", () => {
+            const { fetcher, client } = getFetcher();
+            mockMedia(client);
+            const preview = fetcher.previewFromBundle(IMAGE_BUNDLE);
+            expect(preview.image).toEqual({
+                imageThumb: "https://example.org/image/thumb",
+                imageFull: "https://example.org/image/src",
+                imageType: "image/png",
+                mxcImageFull: IMAGE_MXC,
+                width: 500,
+                height: 400,
+                playable: false,
+            });
+        });
+
+        it.each<Partial<UnstableBundledUrlPreviewSingle>>([
+            { "og:image": undefined },
+            { "og:image:type": undefined },
+            { "og:image:width": undefined },
+            { "og:image:height": undefined },
+            // Non-numeric dimensions are ignored (bundle values are trusted as-is).
+            { "og:image:width": "500" as unknown as number },
+        ])("should omit the image when image metadata is incomplete %s", (override) => {
+            const { fetcher, client } = getFetcher();
+            mockMedia(client);
+            const preview = fetcher.previewFromBundle({ ...IMAGE_BUNDLE, ...override });
+            expect(preview.image).toBeUndefined();
+        });
+
+        it("should omit the image when the media mxc URL is malformed", () => {
+            const { fetcher, client } = getFetcher();
+            // A malformed/unresolvable mxc yields no HTTP URL.
+            // eslint-disable-next-line no-restricted-properties
+            client.mxcUrlToHttp.mockReturnValue(null);
+            const preview = fetcher.previewFromBundle(IMAGE_BUNDLE);
+            expect(preview.image).toBeUndefined();
+            // The rest of the preview is still returned.
+            expect(preview.title).toEqual("Bundled title");
+        });
+
+        it("should compute the siteName from the matched_url hostname", () => {
+            const { fetcher } = getFetcher();
+            const preview = fetcher.previewFromBundle({
+                ...BASIC_BUNDLE,
+                matched_url: "https://sub.example.com:8443/some/path?q=1",
+            });
+            expect(preview.siteName).toEqual("sub.example.com");
+        });
+    });
+});
diff --git a/apps/web/src/utils/UrlPreviewFetcher.ts b/apps/web/src/utils/UrlPreviewFetcher.ts
new file mode 100644
index 0000000000..d38d8db1e4
--- /dev/null
+++ b/apps/web/src/utils/UrlPreviewFetcher.ts
@@ -0,0 +1,257 @@
+/*
+ * Copyright 2026 Element Creations 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 { logger as rootLogger } from "matrix-js-sdk/src/logger";
+import { type IPreviewUrlResponse, type MatrixClient, MatrixError } from "matrix-js-sdk/src/matrix";
+import { decode } from "html-entities";
+
+import type { UrlPreview } from "@element-hq/web-shared-components";
+import { mediaFromMxc } from "../customisations/Media";
+import { thumbHeight } from "../ImageUtils";
+import { type UnstableBundledUrlPreviewSingle } from "../../@types/url-preview";
+
+const logger = rootLogger.getChild("UrlPreviewFetcher");
+
+export const PREVIEW_WIDTH_PX = 478;
+export const PREVIEW_HEIGHT_PX = 200;
+export const MIN_PREVIEW_PX = 96;
+export const MIN_IMAGE_SIZE_BYTES = 8192;
+
+/**
+ * Handles fetching and parsing URL previews.
+ * Maintains a cache of previously fetched previews; call `clearCache` when
+ * media visibility changes so images are re-fetched with the correct visibility.
+ */
+export class UrlPreviewFetcher {
+    private readonly cache = new Map<string, UrlPreview>();
+
+    public constructor(
+        private readonly client: MatrixClient,
+        private readonly previewRequestTs: number,
+        private readonly showTooltips: boolean,
+    ) {}
+
+    public clearCache(): void {
+        this.cache.clear();
+    }
+
+    /**
+     * Parse a numeric value from OpenGraph. The OpenGraph spec defines all values as strings
+     * although Synapse may return these values as numbers. To be compatible, test strings
+     * and numbers.
+     * @param value The numeric value
+     * @returns A number if the value parsed correctly, or undefined otherwise.
+     */
+    private static getNumberFromOpenGraph(value: number | string | undefined): number | undefined {
+        if (typeof value === "number") {
+            return value;
+        } else if (typeof value === "string" && value) {
+            const i = Number.parseInt(value, 10);
+            if (!Number.isNaN(i)) return i;
+        }
+        return undefined;
+    }
+
+    /**
+     * Calculate the best possible title from an opengraph response.
+     * @param response The opengraph response
+     * @param link The link being used to preview.
+     * @returns The title value.
+     */
+    private static getBaseMetadataFromResponse(
+        response: IPreviewUrlResponse,
+        link: string,
+    ): Pick<UrlPreview, "title" | "description" | "siteName"> {
+        let title =
+            typeof response["og:title"] === "string" && response["og:title"].trim()
+                ? response["og:title"].trim()
+                : undefined;
+        let description =
+            typeof response["og:description"] === "string" && response["og:description"].trim()
+                ? response["og:description"].trim()
+                : undefined;
+        const siteName =
+            typeof response["og:site_name"] === "string" && response["og:site_name"].trim()
+                ? response["og:site_name"].trim()
+                : new URL(link).hostname;
+
+        if (!title && description) {
+            title = description;
+            description = undefined;
+        } else if (!title && siteName) {
+            title = siteName;
+        } else if (!title) {
+            title = link;
+        }
+
+        if (description && description.toLowerCase() === siteName.toLowerCase()) {
+            description = undefined;
+        }
+
+        return { title, description: description && decode(description), siteName };
+    }
+
+    /**
+     * Calculate the best possible author from an opengraph response.
+     * @param response The opengraph response
+     * @returns The author value, or undefined if no valid author could be found.
+     */
+    private static getAuthorFromResponse(response: IPreviewUrlResponse): UrlPreview["author"] {
+        let calculatedAuthor: string | undefined;
+        if (response["og:type"] === "article") {
+            if (typeof response["article:author"] === "string" && response["article:author"]) {
+                calculatedAuthor = response["article:author"];
+            }
+        }
+        if (typeof response["profile:username"] === "string" && response["profile:username"]) {
+            calculatedAuthor = response["profile:username"];
+        }
+        if (calculatedAuthor && URL.canParse(calculatedAuthor)) {
+            return undefined;
+        }
+        return calculatedAuthor;
+    }
+
+    /**
+     * Calculate whether the provided image from the preview response is an full size preview or
+     * a site icon.
+     * @returns `true` if the image should be used as a preview, otherwise `false`
+     */
+    private static isImagePreview(width?: number, height?: number, bytes?: number): boolean {
+        if (width && width < MIN_PREVIEW_PX) return false;
+        if (height && height < MIN_PREVIEW_PX) return false;
+        if (bytes && bytes < MIN_IMAGE_SIZE_BYTES) return false;
+        return true;
+    }
+
+    /**
+     * Fetch a preview for a single URL, returning a cached result if available.
+     * @param link The URL to preview.
+     * @param loadMedia Whether to include the preview image. Pass false when media is hidden.
+     */
+    public async fetchPreview(link: string, loadMedia: boolean): Promise<UrlPreview | null> {
+        const cached = this.cache.get(link);
+        if (cached) return cached;
+
+        let response: IPreviewUrlResponse;
+        try {
+            response = await this.client.getUrlPreview(link, this.previewRequestTs);
+        } catch (error) {
+            if (error instanceof MatrixError && error.httpStatus === 404) {
+                logger.debug("Failed to get URL preview: ", error);
+            } else {
+                logger.error("Failed to get URL preview: ", error);
+            }
+            return null;
+        }
+
+        const { title, description, siteName } = UrlPreviewFetcher.getBaseMetadataFromResponse(response, link);
+        const author = UrlPreviewFetcher.getAuthorFromResponse(response);
+        const hasImage = response["og:image"] && typeof response["og:image"] === "string";
+
+        if (title === link && !hasImage) {
+            return null;
+        }
+
+        let image: UrlPreview["image"];
+        let siteIcon: string | undefined;
+
+        if (typeof response["og:image"] === "string" && loadMedia) {
+            const mxcImageFull = response["og:image"];
+            const media = mediaFromMxc(response["og:image"], this.client);
+            const declaredHeight = UrlPreviewFetcher.getNumberFromOpenGraph(response["og:image:height"]);
+            const declaredWidth = UrlPreviewFetcher.getNumberFromOpenGraph(response["og:image:width"]);
+            const imageSize = UrlPreviewFetcher.getNumberFromOpenGraph(response["matrix:image:size"]);
+            const alt = typeof response["og:image:alt"] === "string" ? response["og:image:alt"] : undefined;
+            const imageType = typeof response["og:image:type"] === "string" ? response["og:image:type"] : undefined;
+
+            if (UrlPreviewFetcher.isImagePreview(declaredWidth, declaredHeight, imageSize)) {
+                const width = Math.min(declaredWidth ?? PREVIEW_WIDTH_PX, PREVIEW_WIDTH_PX);
+                const height =
+                    thumbHeight(width, declaredHeight, PREVIEW_WIDTH_PX, PREVIEW_WIDTH_PX) ?? PREVIEW_WIDTH_PX;
+                const thumb = media.getThumbnailOfSourceHttp(PREVIEW_WIDTH_PX, PREVIEW_HEIGHT_PX, "scale");
+                const playable = !!response["og:video"] || !!response["og:video:type"] || !!response["og:audio"];
+                if (thumb) {
+                    image = {
+                        imageThumb: thumb,
+                        imageFull: media.srcHttp ?? thumb,
+                        mxcImageFull,
+                        imageType,
+                        width,
+                        height,
+                        fileSize: UrlPreviewFetcher.getNumberFromOpenGraph(response["matrix:image:size"]),
+                        alt,
+                        playable,
+                    };
+                }
+            } else if (media.srcHttp) {
+                siteIcon = media.srcHttp;
+            }
+        }
+
+        const result = {
+            link,
+            title,
+            author,
+            description,
+            siteName,
+            siteIcon,
+            ogUrl: response["og:url"],
+            showTooltipOnLink: !!(link !== title && this.showTooltips),
+            image,
+        } satisfies UrlPreview;
+        this.cache.set(link, result);
+        return result;
+    }
+
+    /*
+     * Convert an MSC4095 URL preview bundle item to a UrlPreview
+     */
+    public previewFromBundle(single: UnstableBundledUrlPreviewSingle): UrlPreview {
+        const preview: UrlPreview = {
+            link: single.matched_url,
+            title: single["og:title"] ?? single.matched_url,
+            siteName: new URL(single.matched_url).hostname,
+            showTooltipOnLink: !!(single.matched_url !== single["og:title"] && this.showTooltips),
+            description: single["og:description"],
+            ogUrl: single["og:url"],
+        };
+
+        // missing fields from the bundle because backend does provide it:
+        // - siteName (can be computed)
+        // - favicon
+        // - media is a video or audio?
+        // TODO in next PR: URL previews in encrypted chat?
+        if (
+            typeof single["og:image"] === "string" &&
+            typeof single["og:image:type"] === "string" &&
+            typeof single["og:image:width"] === "number" &&
+            typeof single["og:image:height"] === "number"
+        ) {
+            const media = mediaFromMxc(single["og:image"], this.client);
+            const thumb = media.getThumbnailOfSourceHttp(PREVIEW_WIDTH_PX, PREVIEW_HEIGHT_PX, "scale");
+
+            // cannot rule out the mxc:// url is malformed because
+            // the sender can specify anything
+            if (media.srcHttp === null || thumb === null) {
+                return preview;
+            }
+
+            preview.image = {
+                imageThumb: thumb,
+                imageFull: media.srcHttp,
+                imageType: single["og:image:type"],
+                mxcImageFull: single["og:image"],
+                width: single["og:image:width"],
+                height: single["og:image:height"],
+                playable: false, // TODO: do we know?
+            };
+        }
+
+        return preview;
+    }
+}
diff --git a/apps/web/test/unit-tests/utils/UrlUtils-test.ts b/apps/web/src/utils/UrlUtils.test.ts
similarity index 89%
rename from apps/web/test/unit-tests/utils/UrlUtils-test.ts
rename to apps/web/src/utils/UrlUtils.test.ts
index 649b7ab7cf..fb95435e57 100644
--- a/apps/web/test/unit-tests/utils/UrlUtils-test.ts
+++ b/apps/web/src/utils/UrlUtils.test.ts
@@ -6,7 +6,11 @@ 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 { abbreviateUrl, parseUrl, unabbreviateUrl } from "../../../src/utils/UrlUtils";
+// @vitest-environment happy-dom
+
+import { describe, it, expect } from "vitest";
+
+import { abbreviateUrl, parseUrl, unabbreviateUrl } from "./UrlUtils";
 
 describe("abbreviateUrl", () => {
     it("should return empty string if passed falsey", () => {
diff --git a/apps/web/src/utils/ValidatedServerConfig.ts b/apps/web/src/utils/ValidatedServerConfig.ts
index 2e83ba20c5..726751c91b 100644
--- a/apps/web/src/utils/ValidatedServerConfig.ts
+++ b/apps/web/src/utils/ValidatedServerConfig.ts
@@ -6,7 +6,7 @@ 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 OidcClientConfig } from "matrix-js-sdk/src/matrix";
+import { type ValidatedAuthMetadata } from "matrix-js-sdk/src/matrix";
 
 export interface ValidatedServerConfig {
     hsUrl: string;
@@ -24,8 +24,8 @@ export interface ValidatedServerConfig {
     /**
      * Config related to delegated authentication
      * Included when delegated auth is configured and valid, otherwise undefined.
-     * From issuer's .well-known/openid-configuration.
+     * From {@link MatrixClient.getAuthMetadata}.
      * Used for OIDC native flow authentication.
      */
-    delegatedAuthentication?: OidcClientConfig;
+    delegatedAuthentication?: ValidatedAuthMetadata;
 }
diff --git a/apps/web/src/utils/WellKnownUtils.ts b/apps/web/src/utils/WellKnownUtils.ts
index f1e093b66a..fc1efe3591 100644
--- a/apps/web/src/utils/WellKnownUtils.ts
+++ b/apps/web/src/utils/WellKnownUtils.ts
@@ -15,7 +15,6 @@ const E2EE_WK_KEY_DEPRECATED = "im.vector.riot.e2ee";
 export const TILE_SERVER_WK_KEY = new UnstableValue("m.tile_server", "org.matrix.msc3488.tile_server");
 const EMBEDDED_PAGES_WK_PROPERTY = "io.element.embedded_pages";
 
-/* eslint-disable camelcase */
 export interface ICallBehaviourWellKnown {
     widget_build_url?: string;
     ignore_dm?: boolean;
@@ -39,7 +38,6 @@ export interface ITileServerWellKnown {
 export interface IEmbeddedPagesWellKnown {
     home_url?: string;
 }
-/* eslint-enable camelcase */
 
 export function getCallBehaviourWellKnown(matrixClient: MatrixClient): ICallBehaviourWellKnown {
     const clientWellKnown = matrixClient.getClientWellKnown();
@@ -61,7 +59,7 @@ export function getTileServerWellKnown(matrixClient: MatrixClient): ITileServerW
     return tileServerFromWellKnown(matrixClient.getClientWellKnown());
 }
 
-export function tileServerFromWellKnown(clientWellKnown?: IClientWellKnown | undefined): ITileServerWellKnown {
+export function tileServerFromWellKnown(clientWellKnown?: IClientWellKnown): ITileServerWellKnown {
     return clientWellKnown?.[TILE_SERVER_WK_KEY.name] ?? clientWellKnown?.[TILE_SERVER_WK_KEY.altName];
 }
 
diff --git a/apps/web/src/utils/WidgetUtils-types.ts b/apps/web/src/utils/WidgetUtils-types.ts
index 374b37632f..0e5129c4a7 100644
--- a/apps/web/src/utils/WidgetUtils-types.ts
+++ b/apps/web/src/utils/WidgetUtils-types.ts
@@ -12,7 +12,6 @@ import { type IWidget } from "matrix-widget-api";
 export interface IApp extends IWidget {
     "roomId": string;
     "eventId"?: string; // not present on virtual widgets
-    // eslint-disable-next-line camelcase
     "avatar_url"?: string; // MSC2765 https://github.com/matrix-org/matrix-doc/pull/2765
     // Whether the widget was created from `widget_build_url` and thus is a call widget of some kind
     "io.element.managed_hybrid"?: boolean;
@@ -22,7 +21,6 @@ export interface IWidgetEvent {
     id: string;
     type: string;
     sender: string;
-    // eslint-disable-next-line camelcase
     state_key: string;
     content: IApp;
 }
diff --git a/apps/web/test/unit-tests/utils/WidgetUtils-test.ts b/apps/web/src/utils/WidgetUtils.test.ts
similarity index 90%
rename from apps/web/test/unit-tests/utils/WidgetUtils-test.ts
rename to apps/web/src/utils/WidgetUtils.test.ts
index b9c7e95f9d..00b2e3accd 100644
--- a/apps/web/test/unit-tests/utils/WidgetUtils-test.ts
+++ b/apps/web/src/utils/WidgetUtils.test.ts
@@ -7,8 +7,10 @@ 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 WidgetUtils from "../../../src/utils/WidgetUtils";
-import { mockPlatformPeg } from "../../test-utils";
+import { describe, it, expect, beforeEach } from "vitest";
+import { mockPlatformPeg } from "test-utils/platform";
+
+import WidgetUtils from "./WidgetUtils";
 
 describe("getLocalJitsiWrapperUrl", () => {
     beforeEach(() => {
diff --git a/apps/web/src/utils/WidgetUtils.ts b/apps/web/src/utils/WidgetUtils.ts
index 41232db3c4..624ff0e753 100644
--- a/apps/web/src/utils/WidgetUtils.ts
+++ b/apps/web/src/utils/WidgetUtils.ts
@@ -36,15 +36,16 @@ import { type IWidgetEvent, type UserWidget } from "./WidgetUtils-types";
 // before waitFor[Room/User]Widget rejects its promise
 const WIDGET_WAIT_TIME = 20000;
 
-export type { IWidgetEvent, UserWidget };
+export type { UserWidget };
 
+// oxlint-disable-next-line typescript/no-extraneous-class
 export default class WidgetUtils {
     /**
      * Returns true if user is able to send state events to modify widgets in this room
      * (Does not apply to non-room-based / user widgets)
      * @param client The matrix client of the logged-in user
      * @param roomId -- The ID of the room to check
-     * @return Boolean -- true if the user can modify widgets in this room
+     * @returns Boolean -- true if the user can modify widgets in this room
      * @throws Error -- specifies the error reason
      */
     public static canUserModifyWidgets(client: MatrixClient, roomId?: string): boolean {
@@ -84,7 +85,7 @@ export default class WidgetUtils {
      * Returns true if specified url is a scalar URL, typically https://scalar.vector.im/api
      * @param matrixClient The matrix client of the logged-in user
      * @param  {[type]}  testUrlString URL to check
-     * @return {Boolean} True if specified URL is a scalar URL
+     * @returns {Boolean} True if specified URL is a scalar URL
      */
     public static isScalarUrl(testUrlString?: string): boolean {
         if (!testUrlString) {
@@ -339,7 +340,7 @@ export default class WidgetUtils {
     /**
      * Get room specific widgets
      * @param  {Room} room The room to get widgets force
-     * @return {[object]} Array containing current / active room widgets
+     * @returns {[object]} Array containing current / active room widgets
      */
     public static getRoomWidgets(room: Room): MatrixEvent[] {
         // TODO: Enable support for m.widget event type (https://github.com/vector-im/element-web/issues/13111)
@@ -356,7 +357,7 @@ export default class WidgetUtils {
     /**
      * Get user specific widgets (not linked to a specific room)
      * @param client The matrix client of the logged-in user
-     * @return {object} Event content object containing current / active user widgets
+     * @returns {object} Event content object containing current / active user widgets
      */
     public static getUserWidgets(client: MatrixClient | undefined): Record<string, UserWidget> {
         if (!client) {
@@ -372,7 +373,7 @@ export default class WidgetUtils {
     /**
      * Get user specific widgets (not linked to a specific room) as an array
      * @param client The matrix client of the logged-in user
-     * @return {[object]} Array containing current / active user widgets
+     * @returns {[object]} Array containing current / active user widgets
      */
     public static getUserWidgetsArray(client: MatrixClient | undefined): UserWidget[] {
         return Object.values(WidgetUtils.getUserWidgets(client));
@@ -381,7 +382,7 @@ export default class WidgetUtils {
     /**
      * Get active stickerpicker widgets (stickerpickers are user widgets by nature)
      * @param client The matrix client of the logged-in user
-     * @return {[object]} Array containing current / active stickerpicker widgets
+     * @returns {[object]} Array containing current / active stickerpicker widgets
      */
     public static getStickerpickerWidgets(client: MatrixClient | undefined): UserWidget[] {
         const widgets = WidgetUtils.getUserWidgetsArray(client);
@@ -401,7 +402,7 @@ export default class WidgetUtils {
     /**
      * Remove all stickerpicker widgets (stickerpickers are user widgets by nature)
      * @param client The matrix client of the logged-in user
-     * @return {Promise} Resolves on account data updated
+     * @returns {Promise} Resolves on account data updated
      */
     public static async removeStickerpickerWidgets(client: MatrixClient | undefined): Promise<void> {
         if (!client) {
diff --git a/apps/web/test/unit-tests/utils/__snapshots__/AutoDiscoveryUtils-test.tsx.snap b/apps/web/src/utils/__snapshots__/AutoDiscoveryUtils.test.ts.snap
similarity index 73%
rename from apps/web/test/unit-tests/utils/__snapshots__/AutoDiscoveryUtils-test.tsx.snap
rename to apps/web/src/utils/__snapshots__/AutoDiscoveryUtils.test.ts.snap
index 8556db8ba8..a455808d44 100644
--- a/apps/web/test/unit-tests/utils/__snapshots__/AutoDiscoveryUtils-test.tsx.snap
+++ b/apps/web/src/utils/__snapshots__/AutoDiscoveryUtils.test.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`AutoDiscoveryUtils authComponentStateForError should return expected error for the registration page 1`] = `
+exports[`AutoDiscoveryUtils > authComponentStateForError > should return expected error for the registration page 1`] = `
 {
   "serverDeadError": <div>
     <strong>
diff --git a/apps/web/test/unit-tests/utils/__snapshots__/ErrorUtils-test.ts.snap b/apps/web/src/utils/__snapshots__/ErrorUtils.test.ts.snap
similarity index 72%
rename from apps/web/test/unit-tests/utils/__snapshots__/ErrorUtils-test.ts.snap
rename to apps/web/src/utils/__snapshots__/ErrorUtils.test.ts.snap
index 6c8cc750b8..0128ca2e56 100644
--- a/apps/web/test/unit-tests/utils/__snapshots__/ErrorUtils-test.ts.snap
+++ b/apps/web/src/utils/__snapshots__/ErrorUtils.test.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`messageForConnectionError should match snapshot for ConnectionError 1`] = `
+exports[`messageForConnectionError > should match snapshot for ConnectionError 1`] = `
 <DocumentFragment>
   <span>
     <span>
@@ -34,13 +34,13 @@ exports[`messageForConnectionError should match snapshot for ConnectionError 1`]
 </DocumentFragment>
 `;
 
-exports[`messageForConnectionError should match snapshot for MatrixError M_NOT_FOUND 1`] = `
+exports[`messageForConnectionError > should match snapshot for MatrixError M_NOT_FOUND 1`] = `
 <DocumentFragment>
   There was a problem communicating with the homeserver, please try again later.(M_NOT_FOUND)
 </DocumentFragment>
 `;
 
-exports[`messageForConnectionError should match snapshot for mixed content error 1`] = `
+exports[`messageForConnectionError > should match snapshot for mixed content error 1`] = `
 <DocumentFragment>
   <span>
     <span>
@@ -58,19 +58,19 @@ exports[`messageForConnectionError should match snapshot for mixed content error
 </DocumentFragment>
 `;
 
-exports[`messageForConnectionError should match snapshot for unknown error 1`] = `
+exports[`messageForConnectionError > should match snapshot for unknown error 1`] = `
 <DocumentFragment>
   There was a problem communicating with the homeserver, please try again later.
 </DocumentFragment>
 `;
 
-exports[`messageForLoginError should match snapshot for 401 1`] = `
+exports[`messageForLoginError > should match snapshot for 401 1`] = `
 <DocumentFragment>
   Incorrect username and/or password.
 </DocumentFragment>
 `;
 
-exports[`messageForLoginError should match snapshot for M_RESOURCE_LIMIT_EXCEEDED 1`] = `
+exports[`messageForLoginError > should match snapshot for M_RESOURCE_LIMIT_EXCEEDED 1`] = `
 <DocumentFragment>
   <div>
     <div>
@@ -85,19 +85,19 @@ exports[`messageForLoginError should match snapshot for M_RESOURCE_LIMIT_EXCEEDE
 </DocumentFragment>
 `;
 
-exports[`messageForLoginError should match snapshot for M_USER_DEACTIVATED 1`] = `
+exports[`messageForLoginError > should match snapshot for M_USER_DEACTIVATED 1`] = `
 <DocumentFragment>
   This account has been deactivated.
 </DocumentFragment>
 `;
 
-exports[`messageForLoginError should match snapshot for unknown error 1`] = `
+exports[`messageForLoginError > should match snapshot for unknown error 1`] = `
 <DocumentFragment>
   There was a problem communicating with the homeserver, please try again later. (HTTP 400)
 </DocumentFragment>
 `;
 
-exports[`messageForResourceLimitError should match snapshot for admin contact links 1`] = `
+exports[`messageForResourceLimitError > should match snapshot for admin contact links 1`] = `
 <DocumentFragment>
   <span>
     Please 
@@ -113,13 +113,13 @@ exports[`messageForResourceLimitError should match snapshot for admin contact li
 </DocumentFragment>
 `;
 
-exports[`messageForResourceLimitError should match snapshot for monthly_active_user 1`] = `
+exports[`messageForResourceLimitError > should match snapshot for monthly_active_user 1`] = `
 <DocumentFragment>
   This homeserver has hit its Monthly Active User limit.
 </DocumentFragment>
 `;
 
-exports[`messageForSyncError should match snapshot for M_RESOURCE_LIMIT_EXCEEDED 1`] = `
+exports[`messageForSyncError > should match snapshot for M_RESOURCE_LIMIT_EXCEEDED 1`] = `
 <DocumentFragment>
   <div>
     <div>
@@ -132,7 +132,7 @@ exports[`messageForSyncError should match snapshot for M_RESOURCE_LIMIT_EXCEEDED
 </DocumentFragment>
 `;
 
-exports[`messageForSyncError should match snapshot for other errors 1`] = `
+exports[`messageForSyncError > should match snapshot for other errors 1`] = `
 <DocumentFragment>
   <div>
     Unable to connect to Homeserver. Retrying…
diff --git a/apps/web/test/unit-tests/utils/__snapshots__/FormattingUtils-test.tsx.snap b/apps/web/src/utils/__snapshots__/FormattingUtils.test.tsx.snap
similarity index 68%
rename from apps/web/test/unit-tests/utils/__snapshots__/FormattingUtils-test.tsx.snap
rename to apps/web/src/utils/__snapshots__/FormattingUtils.test.tsx.snap
index 92baf3ce34..7f7cdd3157 100644
--- a/apps/web/test/unit-tests/utils/__snapshots__/FormattingUtils-test.tsx.snap
+++ b/apps/web/src/utils/__snapshots__/FormattingUtils.test.tsx.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`FormattingUtils formatList should return expected sentence in ReactNode when given 2 React children 1`] = `
+exports[`FormattingUtils > formatList > should return expected sentence in ReactNode when given 2 React children 1`] = `
 <React.Fragment>
   <React.Fragment>
     <span>
@@ -18,7 +18,7 @@ exports[`FormattingUtils formatList should return expected sentence in ReactNode
 </React.Fragment>
 `;
 
-exports[`FormattingUtils formatList should return expected sentence in ReactNode when given more React children 1`] = `
+exports[`FormattingUtils > formatList > should return expected sentence in ReactNode when given more React children 1`] = `
 <React.Fragment>
   <React.Fragment>
     <span>
@@ -52,7 +52,7 @@ exports[`FormattingUtils formatList should return expected sentence in ReactNode
 </React.Fragment>
 `;
 
-exports[`FormattingUtils formatList should return expected sentence in ReactNode when using itemLimit 1`] = `
+exports[`FormattingUtils > formatList > should return expected sentence in ReactNode when using itemLimit 1`] = `
 <span>
   <React.Fragment>
     <React.Fragment>
diff --git a/apps/web/test/unit-tests/utils/__snapshots__/MessageDiffUtils-test.tsx.snap b/apps/web/src/utils/__snapshots__/MessageDiffUtils.test.ts.snap
similarity index 87%
rename from apps/web/test/unit-tests/utils/__snapshots__/MessageDiffUtils-test.tsx.snap
rename to apps/web/src/utils/__snapshots__/MessageDiffUtils.test.ts.snap
index 1c25d3b3a6..51edd183e5 100644
--- a/apps/web/test/unit-tests/utils/__snapshots__/MessageDiffUtils-test.tsx.snap
+++ b/apps/web/src/utils/__snapshots__/MessageDiffUtils.test.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`editBodyDiffToHtml deduplicates diff steps 1`] = `
+exports[`editBodyDiffToHtml > deduplicates diff steps 1`] = `
 <div>
   <span
     class="mx_EventTile_body markdown-body"
@@ -28,7 +28,7 @@ exports[`editBodyDiffToHtml deduplicates diff steps 1`] = `
 </div>
 `;
 
-exports[`editBodyDiffToHtml handles complex transformations 1`] = `
+exports[`editBodyDiffToHtml > handles complex transformations 1`] = `
 <div>
   <span
     class="mx_EventTile_body markdown-body"
@@ -76,7 +76,7 @@ exports[`editBodyDiffToHtml handles complex transformations 1`] = `
 </div>
 `;
 
-exports[`editBodyDiffToHtml handles non-html input 1`] = `
+exports[`editBodyDiffToHtml > handles non-html input 1`] = `
 <div>
   <span
     class="mx_EventTile_body markdown-body"
@@ -95,7 +95,7 @@ exports[`editBodyDiffToHtml handles non-html input 1`] = `
 </div>
 `;
 
-exports[`editBodyDiffToHtml renders attribute additions 1`] = `
+exports[`editBodyDiffToHtml > renders attribute additions 1`] = `
 <div>
   <span
     class="mx_EventTile_body markdown-body"
@@ -159,7 +159,7 @@ exports[`editBodyDiffToHtml renders attribute additions 1`] = `
 </div>
 `;
 
-exports[`editBodyDiffToHtml renders attribute deletions 1`] = `
+exports[`editBodyDiffToHtml > renders attribute deletions 1`] = `
 <div>
   <span
     class="mx_EventTile_body markdown-body"
@@ -225,7 +225,7 @@ exports[`editBodyDiffToHtml renders attribute deletions 1`] = `
 </div>
 `;
 
-exports[`editBodyDiffToHtml renders attribute modifications 1`] = `
+exports[`editBodyDiffToHtml > renders attribute modifications 1`] = `
 <div>
   <span
     class="mx_EventTile_body markdown-body"
@@ -259,7 +259,7 @@ exports[`editBodyDiffToHtml renders attribute modifications 1`] = `
 </div>
 `;
 
-exports[`editBodyDiffToHtml renders block element additions 1`] = `
+exports[`editBodyDiffToHtml > renders block element additions 1`] = `
 <div>
   <span
     class="mx_EventTile_body markdown-body"
@@ -284,7 +284,7 @@ exports[`editBodyDiffToHtml renders block element additions 1`] = `
 </div>
 `;
 
-exports[`editBodyDiffToHtml renders block element deletions 1`] = `
+exports[`editBodyDiffToHtml > renders block element deletions 1`] = `
 <div>
   <span
     class="mx_EventTile_body markdown-body"
@@ -309,7 +309,7 @@ exports[`editBodyDiffToHtml renders block element deletions 1`] = `
 </div>
 `;
 
-exports[`editBodyDiffToHtml renders central word changes 1`] = `
+exports[`editBodyDiffToHtml > renders central word changes 1`] = `
 <div>
   <span
     class="mx_EventTile_body markdown-body"
@@ -340,7 +340,7 @@ exports[`editBodyDiffToHtml renders central word changes 1`] = `
 </div>
 `;
 
-exports[`editBodyDiffToHtml renders element replacements 1`] = `
+exports[`editBodyDiffToHtml > renders element replacements 1`] = `
 <div>
   <span
     class="mx_EventTile_body markdown-body"
@@ -367,7 +367,7 @@ exports[`editBodyDiffToHtml renders element replacements 1`] = `
 </div>
 `;
 
-exports[`editBodyDiffToHtml renders handles empty tags 1`] = `
+exports[`editBodyDiffToHtml > renders handles empty tags 1`] = `
 <div>
   <span
     class="mx_EventTile_body markdown-body"
@@ -398,7 +398,7 @@ exports[`editBodyDiffToHtml renders handles empty tags 1`] = `
 </div>
 `;
 
-exports[`editBodyDiffToHtml renders inline element additions 1`] = `
+exports[`editBodyDiffToHtml > renders inline element additions 1`] = `
 <div>
   <span
     class="mx_EventTile_body markdown-body"
@@ -416,7 +416,7 @@ exports[`editBodyDiffToHtml renders inline element additions 1`] = `
 </div>
 `;
 
-exports[`editBodyDiffToHtml renders inline element deletions 1`] = `
+exports[`editBodyDiffToHtml > renders inline element deletions 1`] = `
 <div>
   <span
     class="mx_EventTile_body markdown-body"
@@ -441,7 +441,7 @@ exports[`editBodyDiffToHtml renders inline element deletions 1`] = `
 </div>
 `;
 
-exports[`editBodyDiffToHtml renders simple word changes 1`] = `
+exports[`editBodyDiffToHtml > renders simple word changes 1`] = `
 <div>
   <span
     class="mx_EventTile_body markdown-body"
@@ -463,7 +463,7 @@ exports[`editBodyDiffToHtml renders simple word changes 1`] = `
 </div>
 `;
 
-exports[`editBodyDiffToHtml renders text additions 1`] = `
+exports[`editBodyDiffToHtml > renders text additions 1`] = `
 <div>
   <span
     class="mx_EventTile_body markdown-body"
@@ -481,7 +481,7 @@ exports[`editBodyDiffToHtml renders text additions 1`] = `
 </div>
 `;
 
-exports[`editBodyDiffToHtml renders text deletions 1`] = `
+exports[`editBodyDiffToHtml > renders text deletions 1`] = `
 <div>
   <span
     class="mx_EventTile_body markdown-body"
diff --git a/apps/web/src/utils/__snapshots__/UrlPreviewFetcher.test.ts.snap b/apps/web/src/utils/__snapshots__/UrlPreviewFetcher.test.ts.snap
new file mode 100644
index 0000000000..8506879ae9
--- /dev/null
+++ b/apps/web/src/utils/__snapshots__/UrlPreviewFetcher.test.ts.snap
@@ -0,0 +1,105 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`UrlPreviewFetcher > handles different kinds of opengraph responses { 'og:url': 'https://example.org', 'og:type': 'document', 'og:description': 'A description', 'og:title': '' } 1`] = `
+{
+  "author": undefined,
+  "description": undefined,
+  "image": undefined,
+  "link": "https://example.org",
+  "ogUrl": "https://example.org",
+  "showTooltipOnLink": false,
+  "siteIcon": undefined,
+  "siteName": "example.org",
+  "title": "A description",
+}
+`;
+
+exports[`UrlPreviewFetcher > handles different kinds of opengraph responses { 'og:url': 'https://example.org', 'og:type': 'document', 'og:site_name': 'Site name', 'og:title': '' } 1`] = `
+{
+  "author": undefined,
+  "description": undefined,
+  "image": undefined,
+  "link": "https://example.org",
+  "ogUrl": "https://example.org",
+  "showTooltipOnLink": false,
+  "siteIcon": undefined,
+  "siteName": "Site name",
+  "title": "Site name",
+}
+`;
+
+exports[`UrlPreviewFetcher > handles different kinds of opengraph responses { 'og:url': 'https://example.org', 'og:type': 'document', 'og:title': 'Basic title' } 1`] = `
+{
+  "author": undefined,
+  "description": undefined,
+  "image": undefined,
+  "link": "https://example.org",
+  "ogUrl": "https://example.org",
+  "showTooltipOnLink": false,
+  "siteIcon": undefined,
+  "siteName": "example.org",
+  "title": "Basic title",
+}
+`;
+
+exports[`UrlPreviewFetcher > handles different kinds of opengraph responses { 'og:url': 'https://example.org', 'og:type': 'document', 'og:title': 'Cool blog', 'og:site_name': 'Cool site' } 1`] = `
+{
+  "author": undefined,
+  "description": undefined,
+  "image": undefined,
+  "link": "https://example.org",
+  "ogUrl": "https://example.org",
+  "showTooltipOnLink": false,
+  "siteIcon": undefined,
+  "siteName": "Cool site",
+  "title": "Cool blog",
+}
+`;
+
+exports[`UrlPreviewFetcher > handles different kinds of opengraph responses { 'og:url': 'https://example.org', 'og:type': 'document', 'og:title': 'Media test', 'og:image:height': '500', 'og:image:width': 500, 'matrix:image:size': 10000, 'og:image': 'mxc://example.org/abc' } 1`] = `
+{
+  "author": undefined,
+  "description": undefined,
+  "image": {
+    "alt": undefined,
+    "fileSize": 10000,
+    "height": 478,
+    "imageFull": "https://example.org/image/src",
+    "imageThumb": "https://example.org/image/thumb",
+    "imageType": undefined,
+    "mxcImageFull": "mxc://example.org/abc",
+    "playable": false,
+    "width": 478,
+  },
+  "link": "https://example.org",
+  "ogUrl": "https://example.org",
+  "showTooltipOnLink": false,
+  "siteIcon": undefined,
+  "siteName": "example.org",
+  "title": "Media test",
+}
+`;
+
+exports[`UrlPreviewFetcher > should preview a URL with media 1`] = `
+{
+  "author": undefined,
+  "description": undefined,
+  "image": {
+    "alt": undefined,
+    "fileSize": 10000,
+    "height": 128,
+    "imageFull": "https://example.org/image/src",
+    "imageThumb": "https://example.org/image/thumb",
+    "imageType": undefined,
+    "mxcImageFull": "mxc://example.org/abc",
+    "playable": false,
+    "width": 128,
+  },
+  "link": "https://example.org",
+  "ogUrl": "https://example.org",
+  "showTooltipOnLink": false,
+  "siteIcon": undefined,
+  "siteName": "example.org",
+  "title": "This is an example!",
+}
+`;
diff --git a/apps/web/test/unit-tests/utils/__snapshots__/createVoiceMessageContent-test.ts.snap b/apps/web/src/utils/__snapshots__/createVoiceMessageContent.test.ts.snap
similarity index 79%
rename from apps/web/test/unit-tests/utils/__snapshots__/createVoiceMessageContent-test.ts.snap
rename to apps/web/src/utils/__snapshots__/createVoiceMessageContent.test.ts.snap
index 0263ed07ab..a2983d5b0c 100644
--- a/apps/web/test/unit-tests/utils/__snapshots__/createVoiceMessageContent-test.ts.snap
+++ b/apps/web/src/utils/__snapshots__/createVoiceMessageContent.test.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`createVoiceMessageContent should create a voice message content 1`] = `
+exports[`createVoiceMessageContent > should create a voice message content 1`] = `
 {
   "body": "Voice message",
   "file": {},
diff --git a/apps/web/test/unit-tests/utils/arrays-test.ts b/apps/web/src/utils/arrays.test.ts
similarity index 93%
rename from apps/web/test/unit-tests/utils/arrays-test.ts
rename to apps/web/src/utils/arrays.test.ts
index 93cf56d3b9..e4f331433f 100644
--- a/apps/web/test/unit-tests/utils/arrays-test.ts
+++ b/apps/web/src/utils/arrays.test.ts
@@ -6,6 +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 { vi, describe, it, expect } from "vitest";
+
 import {
     arrayDiff,
     arrayFastClone,
@@ -25,7 +27,7 @@ import {
     asyncSome,
     asyncSomeParallel,
     asyncFilter,
-} from "../../../src/utils/arrays";
+} from "./arrays";
 
 type TestParams = { input: number[]; output: number[] };
 type TestCase = [string, TestParams];
@@ -412,11 +414,11 @@ describe("arrays", () => {
 
     describe("asyncEvery", () => {
         it("when called with an empty array, it should return true", async () => {
-            expect(await asyncEvery([], jest.fn().mockResolvedValue(true))).toBe(true);
+            expect(await asyncEvery([], vi.fn().mockResolvedValue(true))).toBe(true);
         });
 
         it("when called with some items and the predicate resolves to true for all of them, it should return true", async () => {
-            const predicate = jest.fn().mockResolvedValue(true);
+            const predicate = vi.fn().mockResolvedValue(true);
             expect(await asyncEvery([1, 2, 3], predicate)).toBe(true);
             expect(predicate).toHaveBeenCalledTimes(3);
             expect(predicate).toHaveBeenCalledWith(1);
@@ -425,14 +427,14 @@ describe("arrays", () => {
         });
 
         it("when called with some items and the predicate resolves to false for all of them, it should return false", async () => {
-            const predicate = jest.fn().mockResolvedValue(false);
+            const predicate = vi.fn().mockResolvedValue(false);
             expect(await asyncEvery([1, 2, 3], predicate)).toBe(false);
             expect(predicate).toHaveBeenCalledTimes(1);
             expect(predicate).toHaveBeenCalledWith(1);
         });
 
         it("when called with some items and the predicate resolves to false for one of them, it should return false", async () => {
-            const predicate = jest.fn().mockResolvedValueOnce(true).mockResolvedValueOnce(false);
+            const predicate = vi.fn().mockResolvedValueOnce(true).mockResolvedValueOnce(false);
             expect(await asyncEvery([1, 2, 3], predicate)).toBe(false);
             expect(predicate).toHaveBeenCalledTimes(2);
             expect(predicate).toHaveBeenCalledWith(1);
@@ -442,11 +444,11 @@ describe("arrays", () => {
 
     describe("asyncSome", () => {
         it("when called with an empty array, it should return false", async () => {
-            expect(await asyncSome([], jest.fn().mockResolvedValue(true))).toBe(false);
+            expect(await asyncSome([], vi.fn().mockResolvedValue(true))).toBe(false);
         });
 
         it("when called with some items and the predicate resolves to false for all of them, it should return false", async () => {
-            const predicate = jest.fn().mockResolvedValue(false);
+            const predicate = vi.fn().mockResolvedValue(false);
             expect(await asyncSome([1, 2, 3], predicate)).toBe(false);
             expect(predicate).toHaveBeenCalledTimes(3);
             expect(predicate).toHaveBeenCalledWith(1);
@@ -455,7 +457,7 @@ describe("arrays", () => {
         });
 
         it("when called with some items and the predicate resolves to true, it should short-circuit and return true", async () => {
-            const predicate = jest.fn().mockResolvedValueOnce(false).mockResolvedValueOnce(true);
+            const predicate = vi.fn().mockResolvedValueOnce(false).mockResolvedValueOnce(true);
             expect(await asyncSome([1, 2, 3], predicate)).toBe(true);
             expect(predicate).toHaveBeenCalledTimes(2);
             expect(predicate).toHaveBeenCalledWith(1);
@@ -465,30 +467,30 @@ describe("arrays", () => {
 
     describe("asyncSomeParallel", () => {
         it("when called with an empty array, it should return false", async () => {
-            expect(await asyncSomeParallel([], jest.fn().mockResolvedValue(true))).toBe(false);
+            expect(await asyncSomeParallel([], vi.fn().mockResolvedValue(true))).toBe(false);
         });
 
         it("when all the predicates return false", async () => {
-            expect(await asyncSomeParallel([1, 2, 3], jest.fn().mockResolvedValue(false))).toBe(false);
+            expect(await asyncSomeParallel([1, 2, 3], vi.fn().mockResolvedValue(false))).toBe(false);
         });
 
         it("when all the predicates return true", async () => {
-            expect(await asyncSomeParallel([1, 2, 3], jest.fn().mockResolvedValue(true))).toBe(true);
+            expect(await asyncSomeParallel([1, 2, 3], vi.fn().mockResolvedValue(true))).toBe(true);
         });
 
         it("when one of the predicate return true", async () => {
-            const predicate = jest.fn().mockImplementation((value) => Promise.resolve(value === 2));
+            const predicate = vi.fn().mockImplementation((value) => Promise.resolve(value === 2));
             expect(await asyncSomeParallel([1, 2, 3], predicate)).toBe(true);
         });
     });
 
     describe("asyncFilter", () => {
         it("when called with an empty array, it should return an empty array", async () => {
-            expect(await asyncFilter([], jest.fn().mockResolvedValue(true))).toEqual([]);
+            expect(await asyncFilter([], vi.fn().mockResolvedValue(true))).toEqual([]);
         });
 
         it("should filter the content", async () => {
-            const predicate = jest.fn().mockImplementation((value) => Promise.resolve(value === 2));
+            const predicate = vi.fn().mockImplementation((value) => Promise.resolve(value === 2));
             expect(await asyncFilter([1, 2, 3], predicate)).toEqual([2]);
         });
     });
diff --git a/apps/web/src/utils/arrays.ts b/apps/web/src/utils/arrays.ts
index 63b16a6f72..ee9ac68943 100644
--- a/apps/web/src/utils/arrays.ts
+++ b/apps/web/src/utils/arrays.ts
@@ -6,7 +6,7 @@ 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 { percentageOf, percentageWithin } from "@element-hq/web-shared-components";
+import { percentageOf, percentageWithin } from "@element-hq/web-shared-components/numbers";
 
 /**
  * Quickly resample an array to have less/more data points. If an input which is larger
@@ -135,7 +135,7 @@ export function arrayTrimFill<T>(a: T[], len: number, seed: T[]): T[] {
  * @returns A copy of the array.
  */
 export function arrayFastClone<T>(a: T[]): T[] {
-    return a.slice(0, a.length);
+    return a.slice(0);
 }
 
 /**
diff --git a/apps/web/test/unit-tests/utils/beacon/bounds-test.ts b/apps/web/src/utils/beacon/bounds.test.ts
similarity index 94%
rename from apps/web/test/unit-tests/utils/beacon/bounds-test.ts
rename to apps/web/src/utils/beacon/bounds.test.ts
index 0a9876d237..90c5b44eb5 100644
--- a/apps/web/test/unit-tests/utils/beacon/bounds-test.ts
+++ b/apps/web/src/utils/beacon/bounds.test.ts
@@ -6,10 +6,13 @@ 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 { Beacon } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import { type Bounds, getBeaconBounds } from "../../../../src/utils/beacon/bounds";
-import { makeBeaconEvent, makeBeaconInfoEvent } from "../../../test-utils";
+import { describe, it, expect } from "vitest";
+import { Beacon } from "matrix-js-sdk/src/matrix";
+import { makeBeaconEvent, makeBeaconInfoEvent } from "test-utils";
+
+import { type Bounds, getBeaconBounds } from "./bounds";
 
 describe("getBeaconBounds()", () => {
     const userId = "@user:server";
diff --git a/apps/web/src/utils/beacon/bounds.ts b/apps/web/src/utils/beacon/bounds.ts
index 4df186b037..f4d692f502 100644
--- a/apps/web/src/utils/beacon/bounds.ts
+++ b/apps/web/src/utils/beacon/bounds.ts
@@ -46,9 +46,9 @@ export const getBeaconBounds = (beacons: Beacon[]): Bounds | undefined => {
     if (sortedByLat.length < 1 || sortedByLong.length < 1) return;
 
     return {
-        north: sortedByLat[0]!.latitude,
-        south: sortedByLat[sortedByLat.length - 1]!.latitude,
-        east: sortedByLong[0]!.longitude,
-        west: sortedByLong[sortedByLong.length - 1]!.longitude,
+        north: sortedByLat[0].latitude,
+        south: sortedByLat[sortedByLat.length - 1].latitude,
+        east: sortedByLong[0].longitude,
+        west: sortedByLong[sortedByLong.length - 1].longitude,
     };
 };
diff --git a/apps/web/test/unit-tests/utils/beacon/duration-test.ts b/apps/web/src/utils/beacon/duration.test.ts
similarity index 92%
rename from apps/web/test/unit-tests/utils/beacon/duration-test.ts
rename to apps/web/src/utils/beacon/duration.test.ts
index da17d6cbb4..b6fe56938b 100644
--- a/apps/web/test/unit-tests/utils/beacon/duration-test.ts
+++ b/apps/web/src/utils/beacon/duration.test.ts
@@ -6,10 +6,13 @@ 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 { M_TIMESTAMP, Beacon } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import { msUntilExpiry, sortBeaconsByLatestExpiry, sortBeaconsByLatestCreation } from "../../../../src/utils/beacon";
-import { makeBeaconInfoEvent } from "../../../test-utils";
+import { vi, describe, it, expect, afterAll, beforeEach } from "vitest";
+import { M_TIMESTAMP, Beacon } from "matrix-js-sdk/src/matrix";
+import { makeBeaconInfoEvent } from "test-utils";
+
+import { msUntilExpiry, sortBeaconsByLatestExpiry, sortBeaconsByLatestCreation } from "./duration";
 
 describe("beacon utils", () => {
     // 14.03.2022 16:15
@@ -17,11 +20,11 @@ describe("beacon utils", () => {
     const HOUR_MS = 3600000;
 
     beforeEach(() => {
-        jest.spyOn(global.Date, "now").mockReturnValue(now);
+        vi.spyOn(global.Date, "now").mockReturnValue(now);
     });
 
     afterAll(() => {
-        jest.spyOn(global.Date, "now").mockRestore();
+        vi.spyOn(global.Date, "now").mockRestore();
     });
 
     describe("msUntilExpiry", () => {
diff --git a/apps/web/test/unit-tests/utils/beacon/geolocation-test.ts b/apps/web/src/utils/beacon/geolocation.test.ts
similarity index 83%
rename from apps/web/test/unit-tests/utils/beacon/geolocation-test.ts
rename to apps/web/src/utils/beacon/geolocation.test.ts
index f8203519ee..c4014f7c4a 100644
--- a/apps/web/test/unit-tests/utils/beacon/geolocation-test.ts
+++ b/apps/web/src/utils/beacon/geolocation.test.ts
@@ -6,8 +6,11 @@ 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.
 */
 
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach, afterEach, type Mocked } from "vitest";
 import { logger } from "matrix-js-sdk/src/logger";
-import { type Mocked } from "jest-mock";
+import { makeGeolocationPosition, mockGeolocation, getMockGeolocationPositionError } from "test-utils";
 
 import {
     type GenericPosition,
@@ -16,9 +19,8 @@ import {
     mapGeolocationError,
     mapGeolocationPositionToTimedGeo,
     watchPosition,
-} from "../../../../src/utils/beacon";
-import { getCurrentPosition } from "../../../../src/utils/beacon/geolocation";
-import { makeGeolocationPosition, mockGeolocation, getMockGeolocationPositionError } from "../../../test-utils";
+    getCurrentPosition,
+} from "./geolocation";
 
 describe("geolocation utilities", () => {
     let geolocation: Mocked<Geolocation>;
@@ -29,12 +31,12 @@ describe("geolocation utilities", () => {
 
     beforeEach(() => {
         geolocation = mockGeolocation();
-        jest.spyOn(Date, "now").mockReturnValue(now);
+        vi.spyOn(Date, "now").mockReturnValue(now);
     });
 
     afterEach(() => {
-        jest.spyOn(Date, "now").mockRestore();
-        jest.spyOn(logger, "error").mockRestore();
+        vi.spyOn(Date, "now").mockRestore();
+        vi.spyOn(logger, "error").mockRestore();
     });
 
     describe("getGeoUri", () => {
@@ -97,7 +99,7 @@ describe("geolocation utilities", () => {
     describe("mapGeolocationError", () => {
         beforeEach(() => {
             // suppress expected errors from test log
-            jest.spyOn(logger, "error").mockImplementation(() => {});
+            vi.spyOn(logger, "error").mockImplementation(() => {});
         });
 
         it("returns default for other error", () => {
@@ -138,21 +140,20 @@ describe("geolocation utilities", () => {
     describe("watchPosition()", () => {
         it("throws with unavailable error when geolocation is not available", () => {
             // suppress expected errors from test log
-            jest.spyOn(logger, "error").mockImplementation(() => {});
+            vi.spyOn(logger, "error").mockImplementation(() => {});
 
             // remove the mock we added
-            // @ts-ignore illegal assignment to readonly property
-            navigator.geolocation = undefined;
+            vi.spyOn(navigator, "geolocation", "get").mockRestore();
 
-            const positionHandler = jest.fn();
-            const errorHandler = jest.fn();
+            const positionHandler = vi.fn();
+            const errorHandler = vi.fn();
 
             expect(() => watchPosition(positionHandler, errorHandler)).toThrow(GeolocationError.Unavailable);
         });
 
         it("sets up position handler with correct options", () => {
-            const positionHandler = jest.fn();
-            const errorHandler = jest.fn();
+            const positionHandler = vi.fn();
+            const errorHandler = vi.fn();
             watchPosition(positionHandler, errorHandler);
 
             const [, , options] = geolocation.watchPosition.mock.calls[0];
@@ -165,8 +166,8 @@ describe("geolocation utilities", () => {
         it("returns clearWatch function", () => {
             const watchId = 1;
             geolocation.watchPosition.mockReturnValue(watchId);
-            const positionHandler = jest.fn();
-            const errorHandler = jest.fn();
+            const positionHandler = vi.fn();
+            const errorHandler = vi.fn();
             const clearWatch = watchPosition(positionHandler, errorHandler);
 
             clearWatch();
@@ -175,8 +176,8 @@ describe("geolocation utilities", () => {
         });
 
         it("calls position handler with position", () => {
-            const positionHandler = jest.fn();
-            const errorHandler = jest.fn();
+            const positionHandler = vi.fn();
+            const errorHandler = vi.fn();
             watchPosition(positionHandler, errorHandler);
 
             expect(positionHandler).toHaveBeenCalledWith(defaultPosition);
@@ -184,13 +185,13 @@ describe("geolocation utilities", () => {
 
         it("maps geolocation position error and calls error handler", () => {
             // suppress expected errors from test log
-            jest.spyOn(logger, "error").mockImplementation(() => {});
+            vi.spyOn(logger, "error").mockImplementation(() => {});
             geolocation.watchPosition.mockImplementation((_callback, error) => {
                 error!(getMockGeolocationPositionError(1, "message"));
                 return -1;
             });
-            const positionHandler = jest.fn();
-            const errorHandler = jest.fn();
+            const positionHandler = vi.fn();
+            const errorHandler = vi.fn();
             watchPosition(positionHandler, errorHandler);
 
             expect(errorHandler).toHaveBeenCalledWith(GeolocationError.PermissionDenied);
@@ -200,18 +201,17 @@ describe("geolocation utilities", () => {
     describe("getCurrentPosition()", () => {
         it("throws with unavailable error when geolocation is not available", async () => {
             // suppress expected errors from test log
-            jest.spyOn(logger, "error").mockImplementation(() => {});
+            vi.spyOn(logger, "error").mockImplementation(() => {});
 
             // remove the mock we added
-            // @ts-ignore illegal assignment to readonly property
-            navigator.geolocation = undefined;
+            vi.spyOn(navigator, "geolocation", "get").mockRestore();
 
             await expect(() => getCurrentPosition()).rejects.toThrow(GeolocationError.Unavailable);
         });
 
         it("throws with geolocation error when geolocation.getCurrentPosition fails", async () => {
             // suppress expected errors from test log
-            jest.spyOn(logger, "error").mockImplementation(() => {});
+            vi.spyOn(logger, "error").mockImplementation(() => {});
 
             const timeoutError = getMockGeolocationPositionError(3, "message");
             geolocation.getCurrentPosition.mockImplementation((callback, error) => error!(timeoutError));
diff --git a/apps/web/test/unit-tests/utils/beacon/timeline-test.ts b/apps/web/src/utils/beacon/timeline.test.ts
similarity index 87%
rename from apps/web/test/unit-tests/utils/beacon/timeline-test.ts
rename to apps/web/src/utils/beacon/timeline.test.ts
index 0c7306bf4f..0ccbe472f4 100644
--- a/apps/web/test/unit-tests/utils/beacon/timeline-test.ts
+++ b/apps/web/src/utils/beacon/timeline.test.ts
@@ -6,10 +6,13 @@ 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 { EventType, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import { shouldDisplayAsBeaconTile } from "../../../../src/utils/beacon/timeline";
-import { makeBeaconInfoEvent, stubClient } from "../../../test-utils";
+import { describe, it, expect } from "vitest";
+import { EventType, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+import { makeBeaconInfoEvent, stubClient } from "test-utils";
+
+import { shouldDisplayAsBeaconTile } from "./timeline";
 
 describe("shouldDisplayAsBeaconTile", () => {
     const userId = "@user:server";
diff --git a/apps/web/src/utils/beacon/useLiveBeacons.ts b/apps/web/src/utils/beacon/useLiveBeacons.ts
index 8d2d956a2f..f67dcb12d7 100644
--- a/apps/web/src/utils/beacon/useLiveBeacons.ts
+++ b/apps/web/src/utils/beacon/useLiveBeacons.ts
@@ -22,8 +22,8 @@ export const useLiveBeacons = (roomId: Room["roomId"], matrixClient: MatrixClien
         room?.currentState,
         RoomStateEvent.BeaconLiveness,
         () =>
-            room?.currentState?.liveBeaconIds.map(
-                (beaconIdentifier) => room.currentState.beacons.get(beaconIdentifier)!,
+            room?.currentState?.liveBeaconIds.map((beaconIdentifier) =>
+                room.currentState.beacons.get(beaconIdentifier)!,
             ) || [],
     );
 
diff --git a/apps/web/test/unit-tests/utils/colour-test.ts b/apps/web/src/utils/colour.test.ts
similarity index 86%
rename from apps/web/test/unit-tests/utils/colour-test.ts
rename to apps/web/src/utils/colour.test.ts
index 7ba966e25e..cbdac2916d 100644
--- a/apps/web/test/unit-tests/utils/colour-test.ts
+++ b/apps/web/src/utils/colour.test.ts
@@ -6,7 +6,9 @@ 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 { textToHtmlRainbow } from "../../../src/utils/colour";
+import { describe, it, expect } from "vitest";
+
+import { textToHtmlRainbow } from "./colour";
 
 describe("textToHtmlRainbow", () => {
     it("correctly transform text to html without splitting the emoji in two", () => {
diff --git a/apps/web/test/unit-tests/utils/connection-test.ts b/apps/web/src/utils/connection.test.ts
similarity index 87%
rename from apps/web/test/unit-tests/utils/connection-test.ts
rename to apps/web/src/utils/connection.test.ts
index 1df67070b3..44068b68a6 100644
--- a/apps/web/test/unit-tests/utils/connection-test.ts
+++ b/apps/web/src/utils/connection.test.ts
@@ -6,16 +6,17 @@ 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 { vi, describe, it, expect, beforeEach, type Mock } from "vitest";
 import { type ClientEvent, type ClientEventHandlerMap, SyncState } from "matrix-js-sdk/src/matrix";
 
-import { createReconnectedListener } from "../../../src/utils/connection";
+import { createReconnectedListener } from "./connection";
 
 describe("createReconnectedListener", () => {
     let reconnectedListener: ClientEventHandlerMap[ClientEvent.Sync];
-    let onReconnect: jest.Mock;
+    let onReconnect: Mock;
 
     beforeEach(() => {
-        onReconnect = jest.fn();
+        onReconnect = vi.fn();
         reconnectedListener = createReconnectedListener(onReconnect);
     });
 
diff --git a/apps/web/src/utils/createMatrixClient.test.ts b/apps/web/src/utils/createMatrixClient.test.ts
new file mode 100644
index 0000000000..a261255df7
--- /dev/null
+++ b/apps/web/src/utils/createMatrixClient.test.ts
@@ -0,0 +1,153 @@
+/*
+Copyright 2026 Element Creations 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 { vi, describe, beforeEach, it, expect } from "vitest";
+import { type MatrixClient, RoomNameType } from "matrix-js-sdk/src/matrix";
+
+import { createClientWithCreds } from "./createMatrixClient";
+
+describe("createMatrixClient", () => {
+    let client: MatrixClient;
+
+    beforeEach(() => {
+        vi.stubGlobal("localStorage", {
+            getItem: vi.fn().mockReturnValue(null),
+            setItem: vi.fn(),
+            removeItem: vi.fn(),
+        });
+
+        client = createClientWithCreds({
+            homeserverUrl: "https://test.dummy",
+            userId: "@user:test.dummy",
+            accessToken: "access_token",
+        });
+    });
+
+    describe("room name generator", () => {
+        it("should return empty room for an empty room", () => {
+            const roomName = client.roomNameGenerator?.("", {
+                type: RoomNameType.EmptyRoom,
+            });
+            expect(roomName).toBe("Empty room");
+        });
+
+        it("should include the old name for an empty room that used to have a name", () => {
+            const roomName = client.roomNameGenerator?.("", {
+                type: RoomNameType.EmptyRoom,
+                oldName: "Old Room",
+            });
+            expect(roomName).toBe("Empty room (was Old Room)");
+        });
+
+        it("should return null for an actual room name", () => {
+            const roomName = client.roomNameGenerator?.("", {
+                type: RoomNameType.Actual,
+                name: "Some name",
+            });
+            expect(roomName).toBeNull();
+        });
+
+        describe("generated room names", () => {
+            it("should return empty room when there are no members", () => {
+                const roomName = client.roomNameGenerator?.("", {
+                    type: RoomNameType.Generated,
+                    names: [],
+                    count: 0,
+                });
+                expect(roomName).toBe("Empty room");
+            });
+
+            it("should return the single member name when there is only one other member", () => {
+                const roomName = client.roomNameGenerator?.("", {
+                    type: RoomNameType.Generated,
+                    names: ["Alice"],
+                    count: 2,
+                });
+                expect(roomName).toBe("Alice");
+            });
+
+            it("should join two member names with 'and'", () => {
+                const roomName = client.roomNameGenerator?.("", {
+                    type: RoomNameType.Generated,
+                    names: ["Alice", "Bob"],
+                    count: 2,
+                });
+                expect(roomName).toBe("Alice and Bob");
+            });
+
+            it("should name the first member and count the rest when there is one other member not named", () => {
+                const roomName = client.roomNameGenerator?.("", {
+                    type: RoomNameType.Generated,
+                    names: ["Alice", "Bob"],
+                    count: 3,
+                });
+                expect(roomName).toBe("Alice and one other");
+            });
+
+            it("should name the first member and count the rest when there are multiple members not named", () => {
+                const roomName = client.roomNameGenerator?.("", {
+                    type: RoomNameType.Generated,
+                    names: ["Alice", "Bob", "Carol"],
+                    count: 3,
+                });
+                expect(roomName).toBe("Alice and 2 others");
+            });
+
+            describe("when inviting", () => {
+                it("should return empty room when there are no invitees", () => {
+                    const roomName = client.roomNameGenerator?.("", {
+                        type: RoomNameType.Generated,
+                        subtype: "Inviting",
+                        names: [],
+                        count: 0,
+                    });
+                    expect(roomName).toBe("Empty room");
+                });
+
+                it("should return the single invitee name when there is only one invitee", () => {
+                    const roomName = client.roomNameGenerator?.("", {
+                        type: RoomNameType.Generated,
+                        subtype: "Inviting",
+                        names: ["Alice"],
+                        count: 1,
+                    });
+                    expect(roomName).toBe("Alice");
+                });
+
+                it("should say who is being invited when there are two invitees", () => {
+                    const roomName = client.roomNameGenerator?.("", {
+                        type: RoomNameType.Generated,
+                        subtype: "Inviting",
+                        names: ["Alice", "Bob"],
+                        count: 2,
+                    });
+                    expect(roomName).toBe("Inviting Alice and Bob");
+                });
+
+                it("should name the first invitee and count the rest when there are more than two invitees", () => {
+                    const roomName = client.roomNameGenerator?.("", {
+                        type: RoomNameType.Generated,
+                        subtype: "Inviting",
+                        names: ["Alice", "Bob", "Carol"],
+                        count: 3,
+                    });
+                    expect(roomName).toBe("Inviting Alice and 2 others");
+                });
+
+                it("should count uninvited members separately from named invitees", () => {
+                    const roomName = client.roomNameGenerator?.("", {
+                        type: RoomNameType.Generated,
+                        subtype: "Inviting",
+                        names: ["Alice", "Bob"],
+                        count: 4,
+                    });
+                    expect(roomName).toBe("Inviting Alice and 3 others");
+                });
+            });
+        });
+    });
+});
diff --git a/apps/web/src/utils/createMatrixClient.ts b/apps/web/src/utils/createMatrixClient.ts
index 3cbc7a62f3..37097a36f0 100644
--- a/apps/web/src/utils/createMatrixClient.ts
+++ b/apps/web/src/utils/createMatrixClient.ts
@@ -1,4 +1,5 @@
 /*
+Copyright 2026 Element Creations Ltd.
 Copyright 2024 New Vector Ltd.
 Copyright 2017-2021 The Matrix.org Foundation C.I.C.
 
@@ -14,9 +15,23 @@ import {
     IndexedDBCryptoStore,
     IndexedDBStore,
     LocalStorageCryptoStore,
+    RoomNameType,
+    type RoomNameState,
+    EventTimelineSet,
+    EventTimeline,
+    type OAuth2,
+    TokenRefresher,
 } from "matrix-js-sdk/src/matrix";
+import { VerificationMethod } from "matrix-js-sdk/src/types";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import indexeddbWorkerFactory from "../workers/indexeddbWorkerFactory";
+import SettingsStore from "../settings/SettingsStore";
+import { crossSigningCallbacks } from "../SecurityManager";
+import IdentityAuthClient from "../IdentityAuthClient";
+import { _t } from "../languageHandler";
+import { formatList } from "./FormattingUtils";
+import { persistTokens } from "./tokens/tokens.ts";
 
 const localStorage = window.localStorage;
 
@@ -27,6 +42,136 @@ try {
     indexedDB = window.indexedDB;
 } catch {}
 
+/**
+ * Credentials used to create a MatrixClient with `createClientWithCreds`.
+ */
+export interface IMatrixClientCreds {
+    homeserverUrl: string;
+    identityServerUrl?: string;
+    userId: string;
+    deviceId?: string;
+    accessToken: string;
+    refreshToken?: string;
+    guest?: boolean;
+    pickleKey?: string;
+    freshLogin?: boolean;
+}
+
+function namesToRoomName(names: string[], count: number): string | undefined {
+    const countWithoutMe = count - 1;
+    if (!names.length) {
+        return _t("empty_room");
+    }
+    if (names.length === 1 && countWithoutMe <= 1) {
+        return names[0];
+    }
+}
+
+function memberNamesToRoomName(names: string[], count: number): string {
+    const name = namesToRoomName(names, count);
+    if (name) return name;
+
+    if (names.length === 2 && count === 2) {
+        return formatList(names);
+    }
+    return formatList(names, 1);
+}
+
+function inviteeNamesToRoomName(names: string[], count: number): string {
+    const name = namesToRoomName(names, count);
+    if (name) return name;
+
+    if (names.length === 2 && count === 2) {
+        return _t("inviting_user1_and_user2", {
+            user1: names[0],
+            user2: names[1],
+        });
+    }
+    return _t("inviting_user_and_n_others", {
+        user: names[0],
+        count: count - 1,
+    });
+}
+
+function roomNameGenerator(_: string, state: RoomNameState): string | null {
+    switch (state.type) {
+        case RoomNameType.Generated:
+            switch (state.subtype) {
+                case "Inviting":
+                    return inviteeNamesToRoomName(state.names, state.count);
+                default:
+                    return memberNamesToRoomName(state.names, state.count);
+            }
+        case RoomNameType.EmptyRoom:
+            if (state.oldName) {
+                return _t("empty_room_was_name", {
+                    oldName: state.oldName,
+                });
+            } else {
+                return _t("empty_room");
+            }
+        default:
+            return null;
+    }
+}
+
+/**
+ * Create a new matrix client from credentials with all the options needed.
+ *
+ * @param creds The credentials to create the client with
+ * @param oauth The OAuth2 instance for OAuth2-native sessions
+ *
+ * @returns {MatrixClient} the newly-created MatrixClient
+ */
+export function createClientWithCreds(creds: IMatrixClientCreds, oauth?: OAuth2): MatrixClient {
+    let tokenRefreshFunction: ICreateClientOpts["tokenRefreshFunction"];
+    if (creds.refreshToken && oauth) {
+        const tokenRefresher = new TokenRefresher(oauth, persistTokens.bind(null, creds.pickleKey));
+        tokenRefreshFunction = tokenRefresher?.tokenRefreshFunction;
+    } else {
+        logger.debug("No refresh token was supplied: access token will not be refreshed");
+    }
+
+    const opts: ICreateClientOpts = {
+        baseUrl: creds.homeserverUrl,
+        idBaseUrl: creds.identityServerUrl,
+        accessToken: creds.accessToken,
+        refreshToken: creds.refreshToken,
+        tokenRefreshFunction,
+        userId: creds.userId,
+        deviceId: creds.deviceId,
+        pickleKey: creds.pickleKey,
+        timelineSupport: true,
+        forceTURN: !SettingsStore.getValue("webRtcAllowPeerToPeer"),
+        fallbackICEServerAllowed: !!SettingsStore.getValue("fallbackICEServerAllowed"),
+        // Gather up to 20 ICE candidates when a call arrives: this should be more than we'd
+        // ever normally need, so effectively this should make all the gathering happen when
+        // the call arrives.
+        iceCandidatePoolSize: 20,
+        verificationMethods: [VerificationMethod.Sas, VerificationMethod.ShowQrCode, VerificationMethod.Reciprocate],
+        identityServer: new IdentityAuthClient(),
+        // These are always installed regardless of the labs flag so that cross-signing features
+        // can toggle on without reloading and also be accessed immediately after login.
+        cryptoCallbacks: { ...crossSigningCallbacks },
+        enableEncryptedStateEvents: SettingsStore.getValue("feature_msc4362_encrypted_state_events"),
+        unstableMSC1763Retention: SettingsStore.getValue("feature_retention"),
+        roomNameGenerator,
+    };
+
+    const newCli = createMatrixClient(opts);
+    newCli.setGuest(Boolean(creds.guest));
+
+    const notifTimelineSet = new EventTimelineSet(undefined, {
+        timelineSupport: true,
+        pendingEvents: false,
+    });
+    // XXX: what is our initial pagination token?! it somehow needs to be synchronised with /sync.
+    notifTimelineSet.getLiveTimeline().setPaginationToken("", EventTimeline.BACKWARDS);
+    newCli.setNotifTimelineSet(notifTimelineSet);
+
+    return newCli;
+}
+
 /**
  * Create a new matrix client, with the persistent stores set up appropriately
  * (using localstorage/indexeddb, etc)
@@ -36,7 +181,7 @@ try {
  *
  * @returns {MatrixClient} the newly-created MatrixClient
  */
-export default function createMatrixClient(opts: ICreateClientOpts): MatrixClient {
+export function createMatrixClient(opts: ICreateClientOpts): MatrixClient {
     const storeOpts: Partial<ICreateClientOpts> = {
         useAuthorizationHeader: true,
     };
diff --git a/apps/web/test/unit-tests/utils/createVoiceMessageContent-test.ts b/apps/web/src/utils/createVoiceMessageContent.test.ts
similarity index 85%
rename from apps/web/test/unit-tests/utils/createVoiceMessageContent-test.ts
rename to apps/web/src/utils/createVoiceMessageContent.test.ts
index 83f14cbb97..b70a48bf8b 100644
--- a/apps/web/test/unit-tests/utils/createVoiceMessageContent-test.ts
+++ b/apps/web/src/utils/createVoiceMessageContent.test.ts
@@ -6,9 +6,10 @@ 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 { describe, it, expect } from "vitest";
 import { type EncryptedFile } from "matrix-js-sdk/src/types";
 
-import { createVoiceMessageContent } from "../../../src/utils/createVoiceMessageContent";
+import { createVoiceMessageContent } from "./createVoiceMessageContent";
 
 describe("createVoiceMessageContent", () => {
     it("should create a voice message content", () => {
diff --git a/apps/web/test/unit-tests/utils/crypto/deviceInfo-test.ts b/apps/web/src/utils/crypto/deviceInfo.test.ts
similarity index 76%
rename from apps/web/test/unit-tests/utils/crypto/deviceInfo-test.ts
rename to apps/web/src/utils/crypto/deviceInfo.test.ts
index 616b47ae69..6d81add5b1 100644
--- a/apps/web/test/unit-tests/utils/crypto/deviceInfo-test.ts
+++ b/apps/web/src/utils/crypto/deviceInfo.test.ts
@@ -6,11 +6,13 @@ 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 Mocked, mocked } from "jest-mock";
-import { type Device, type MatrixClient } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import { getDeviceCryptoInfo, getUserDeviceIds } from "../../../../src/utils/crypto/deviceInfo";
-import { getMockClientWithEventEmitter, mockClientMethodsCrypto } from "../../../test-utils";
+import { vi, describe, it, expect, beforeEach, type Mocked } from "vitest";
+import { type Device, type MatrixClient } from "matrix-js-sdk/src/matrix";
+import { getMockClientWithEventEmitter, mockClientMethodsCrypto } from "test-utils";
+
+import { getDeviceCryptoInfo, getUserDeviceIds } from "./deviceInfo";
 
 describe("getDeviceCryptoInfo()", () => {
     let mockClient: Mocked<MatrixClient>;
@@ -20,23 +22,23 @@ describe("getDeviceCryptoInfo()", () => {
     });
 
     it("should return undefined on clients with no crypto", async () => {
-        jest.spyOn(mockClient, "getCrypto").mockReturnValue(undefined);
+        vi.spyOn(mockClient, "getCrypto").mockReturnValue(undefined);
         await expect(getDeviceCryptoInfo(mockClient, "@user:id", "device_id")).resolves.toBeUndefined();
     });
 
     it("should return undefined for unknown users", async () => {
-        mocked(mockClient.getCrypto()!.getUserDeviceInfo).mockResolvedValue(new Map());
+        vi.mocked(mockClient.getCrypto()!.getUserDeviceInfo).mockResolvedValue(new Map());
         await expect(getDeviceCryptoInfo(mockClient, "@user:id", "device_id")).resolves.toBeUndefined();
     });
 
     it("should return undefined for unknown devices", async () => {
-        mocked(mockClient.getCrypto()!.getUserDeviceInfo).mockResolvedValue(new Map([["@user:id", new Map()]]));
+        vi.mocked(mockClient.getCrypto()!.getUserDeviceInfo).mockResolvedValue(new Map([["@user:id", new Map()]]));
         await expect(getDeviceCryptoInfo(mockClient, "@user:id", "device_id")).resolves.toBeUndefined();
     });
 
     it("should return the right result for known devices", async () => {
         const mockDevice = { deviceId: "device_id" } as Device;
-        mocked(mockClient.getCrypto()!.getUserDeviceInfo).mockResolvedValue(
+        vi.mocked(mockClient.getCrypto()!.getUserDeviceInfo).mockResolvedValue(
             new Map([["@user:id", new Map([["device_id", mockDevice]])]]),
         );
         await expect(getDeviceCryptoInfo(mockClient, "@user:id", "device_id")).resolves.toBe(mockDevice);
@@ -52,18 +54,18 @@ describe("getUserDeviceIds", () => {
     });
 
     it("should return empty set on clients with no crypto", async () => {
-        jest.spyOn(mockClient, "getCrypto").mockReturnValue(undefined);
+        vi.spyOn(mockClient, "getCrypto").mockReturnValue(undefined);
         await expect(getUserDeviceIds(mockClient, "@user:id")).resolves.toEqual(new Set());
     });
 
     it("should return empty set for unknown users", async () => {
-        mocked(mockClient.getCrypto()!.getUserDeviceInfo).mockResolvedValue(new Map());
+        vi.mocked(mockClient.getCrypto()!.getUserDeviceInfo).mockResolvedValue(new Map());
         await expect(getUserDeviceIds(mockClient, "@user:id")).resolves.toEqual(new Set());
     });
 
     it("should return the right result for known users", async () => {
         const mockDevice = { deviceId: "device_id" } as Device;
-        mocked(mockClient.getCrypto()!.getUserDeviceInfo).mockResolvedValue(
+        vi.mocked(mockClient.getCrypto()!.getUserDeviceInfo).mockResolvedValue(
             new Map([["@user:id", new Map([["device_id", mockDevice]])]]),
         );
         await expect(getUserDeviceIds(mockClient, "@user:id")).resolves.toEqual(new Set(["device_id"]));
diff --git a/apps/web/test/unit-tests/utils/crypto/shouldForceDisableEncryption-test.ts b/apps/web/src/utils/crypto/shouldForceDisableEncryption.test.ts
similarity index 87%
rename from apps/web/test/unit-tests/utils/crypto/shouldForceDisableEncryption-test.ts
rename to apps/web/src/utils/crypto/shouldForceDisableEncryption.test.ts
index f4a3048f51..dd173bce51 100644
--- a/apps/web/test/unit-tests/utils/crypto/shouldForceDisableEncryption-test.ts
+++ b/apps/web/src/utils/crypto/shouldForceDisableEncryption.test.ts
@@ -6,12 +6,16 @@ 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 { shouldForceDisableEncryption } from "../../../../src/utils/crypto/shouldForceDisableEncryption";
-import { getMockClientWithEventEmitter } from "../../../test-utils";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach } from "vitest";
+import { getMockClientWithEventEmitter } from "test-utils";
+
+import { shouldForceDisableEncryption } from "./shouldForceDisableEncryption";
 
 describe("shouldForceDisableEncryption()", () => {
     const mockClient = getMockClientWithEventEmitter({
-        getClientWellKnown: jest.fn(),
+        getClientWellKnown: vi.fn(),
     });
 
     beforeEach(() => {
diff --git a/apps/web/test/unit-tests/utils/device/clientInformation-test.ts b/apps/web/src/utils/device/clientInformation.test.ts
similarity index 82%
rename from apps/web/test/unit-tests/utils/device/clientInformation-test.ts
rename to apps/web/src/utils/device/clientInformation.test.ts
index 18478dbdaf..2f029f8e6b 100644
--- a/apps/web/test/unit-tests/utils/device/clientInformation-test.ts
+++ b/apps/web/src/utils/device/clientInformation.test.ts
@@ -6,14 +6,17 @@ 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 { MatrixEvent } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import type BasePlatform from "../../../../src/BasePlatform";
-import { type IConfigOptions } from "../../../../src/IConfigOptions";
-import { getDeviceClientInformation, recordClientInformation } from "../../../../src/utils/device/clientInformation";
-import { getMockClientWithEventEmitter } from "../../../test-utils";
-import { DEFAULTS } from "../../../../src/SdkConfig";
-import { type DeepReadonly } from "../../../../src/@types/common";
+import { vi, describe, it, expect, afterAll, beforeEach } from "vitest";
+import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { getMockClientWithEventEmitter } from "test-utils";
+
+import type BasePlatform from "../../BasePlatform";
+import { type IConfigOptions } from "../../IConfigOptions";
+import { getDeviceClientInformation, recordClientInformation } from "./clientInformation";
+import { DEFAULTS } from "../../SdkConfig";
+import { type DeepReadonly } from "../../@types/common";
 
 describe("recordClientInformation()", () => {
     const deviceId = "my-device-id";
@@ -21,22 +24,22 @@ describe("recordClientInformation()", () => {
     const isElectron = window.electron;
 
     const mockClient = getMockClientWithEventEmitter({
-        getDeviceId: jest.fn().mockReturnValue(deviceId),
-        setAccountData: jest.fn(),
+        getDeviceId: vi.fn().mockReturnValue(deviceId),
+        setAccountData: vi.fn(),
     });
 
     const sdkConfig: DeepReadonly<IConfigOptions> = {
         ...DEFAULTS,
         brand: "Test Brand",
-        element_call: { use_exclusively: false, brand: "Element Call" },
+        element_call: { brand: "Element Call" },
     };
 
     const platform = {
-        getAppVersion: jest.fn().mockResolvedValue(version),
+        getAppVersion: vi.fn().mockResolvedValue(version),
     } as unknown as BasePlatform;
 
     beforeEach(() => {
-        jest.clearAllMocks();
+        vi.clearAllMocks();
         window.electron = undefined;
     });
 
@@ -72,11 +75,11 @@ describe("getDeviceClientInformation()", () => {
     const deviceId = "my-device-id";
 
     const mockClient = getMockClientWithEventEmitter({
-        getAccountData: jest.fn(),
+        getAccountData: vi.fn(),
     });
 
     beforeEach(() => {
-        jest.resetAllMocks();
+        vi.resetAllMocks();
     });
 
     it("returns an empty object when no event exists for the device", () => {
diff --git a/apps/web/test/unit-tests/utils/device/parseUserAgent-test.ts b/apps/web/src/utils/device/parseUserAgent.test.ts
similarity index 97%
rename from apps/web/test/unit-tests/utils/device/parseUserAgent-test.ts
rename to apps/web/src/utils/device/parseUserAgent.test.ts
index 87f27031cb..6799e1c02f 100644
--- a/apps/web/test/unit-tests/utils/device/parseUserAgent-test.ts
+++ b/apps/web/src/utils/device/parseUserAgent.test.ts
@@ -6,11 +6,9 @@ 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 {
-    DeviceType,
-    type ExtendedDeviceInformation,
-    parseUserAgent,
-} from "../../../../src/utils/device/parseUserAgent";
+import { describe, it, expect } from "vitest";
+
+import { DeviceType, type ExtendedDeviceInformation, parseUserAgent } from "./parseUserAgent";
 
 const makeDeviceExtendedInfo = (
     deviceType: DeviceType,
@@ -25,7 +23,6 @@ const makeDeviceExtendedInfo = (
     client: clientName && [clientName, clientVersion].filter(Boolean).join(" "),
 });
 
-/* eslint-disable max-len */
 const ANDROID_UA = [
     // New User Agent Implementation
     "Element dbg/1.5.0-dev (Xiaomi Mi 9T; Android 11; RKQ1.200826.002 test-keys; Flavour GooglePlay; MatrixAndroidSdk2 1.5.2)",
@@ -110,7 +107,6 @@ const MISC_EXPECTED_RESULT = [
     makeDeviceExtendedInfo(DeviceType.Unknown, undefined, undefined, undefined, undefined),
     makeDeviceExtendedInfo(DeviceType.Unknown, undefined, undefined, undefined, undefined),
 ];
-/* eslint-disable max-len */
 
 describe("parseUserAgent()", () => {
     it("returns deviceType unknown when user agent is falsy", () => {
diff --git a/apps/web/test/unit-tests/utils/device/snoozeBulkUnverifiedDeviceReminder-test.ts b/apps/web/src/utils/device/snoozeBulkUnverifiedDeviceReminder.test.ts
similarity index 83%
rename from apps/web/test/unit-tests/utils/device/snoozeBulkUnverifiedDeviceReminder-test.ts
rename to apps/web/src/utils/device/snoozeBulkUnverifiedDeviceReminder.test.ts
index 268176df29..1a6e8430ee 100644
--- a/apps/web/test/unit-tests/utils/device/snoozeBulkUnverifiedDeviceReminder-test.ts
+++ b/apps/web/src/utils/device/snoozeBulkUnverifiedDeviceReminder.test.ts
@@ -6,19 +6,22 @@ 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.
 */
 
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, afterAll, beforeEach } from "vitest";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import {
     isBulkUnverifiedDeviceReminderSnoozed,
     snoozeBulkUnverifiedDeviceReminder,
-} from "../../../../src/utils/device/snoozeBulkUnverifiedDeviceReminder";
+} from "./snoozeBulkUnverifiedDeviceReminder";
 
 const SNOOZE_KEY = "mx_snooze_bulk_unverified_device_nag";
 
 describe("snooze bulk unverified device nag", () => {
-    const localStorageSetSpy = jest.spyOn(localStorage.__proto__, "setItem");
-    const localStorageGetSpy = jest.spyOn(localStorage.__proto__, "getItem");
-    const localStorageRemoveSpy = jest.spyOn(localStorage.__proto__, "removeItem");
+    const localStorageSetSpy = vi.spyOn(localStorage.__proto__, "setItem");
+    const localStorageGetSpy = vi.spyOn(localStorage.__proto__, "getItem");
+    const localStorageRemoveSpy = vi.spyOn(localStorage.__proto__, "removeItem");
 
     // 14.03.2022 16:15
     const now = 1647270879403;
@@ -28,11 +31,11 @@ describe("snooze bulk unverified device nag", () => {
         localStorageGetSpy.mockClear().mockReturnValue(null);
         localStorageRemoveSpy.mockClear().mockImplementation(() => {});
 
-        jest.spyOn(Date, "now").mockReturnValue(now);
+        vi.spyOn(Date, "now").mockReturnValue(now);
     });
 
     afterAll(() => {
-        jest.restoreAllMocks();
+        vi.restoreAllMocks();
     });
 
     describe("snoozeBulkUnverifiedDeviceReminder()", () => {
@@ -43,7 +46,7 @@ describe("snooze bulk unverified device nag", () => {
         });
 
         it("catches an error from localstorage", () => {
-            const loggerErrorSpy = jest.spyOn(logger, "error");
+            const loggerErrorSpy = vi.spyOn(logger, "error");
             localStorageSetSpy.mockImplementation(() => {
                 throw new Error("oups");
             });
@@ -60,7 +63,7 @@ describe("snooze bulk unverified device nag", () => {
         });
 
         it("catches an error from localstorage and returns false", () => {
-            const loggerErrorSpy = jest.spyOn(logger, "error");
+            const loggerErrorSpy = vi.spyOn(logger, "error");
             localStorageGetSpy.mockImplementation(() => {
                 throw new Error("oups");
             });
diff --git a/apps/web/src/utils/direct-messages.ts b/apps/web/src/utils/direct-messages.ts
index e1e518421d..862daf6dde 100644
--- a/apps/web/src/utils/direct-messages.ts
+++ b/apps/web/src/utils/direct-messages.ts
@@ -119,7 +119,6 @@ export class DirectoryMember extends Member {
     private readonly displayName?: string;
     private readonly avatarUrl?: string;
 
-    // eslint-disable-next-line camelcase
     public constructor(userDirResult: { user_id: string; display_name?: string; avatar_url?: string }) {
         super();
         this._userId = userDirResult.user_id;
diff --git a/apps/web/test/unit-tests/utils/dm/createDmLocalRoom-test.ts b/apps/web/src/utils/dm/createDmLocalRoom.test.ts
similarity index 79%
rename from apps/web/test/unit-tests/utils/dm/createDmLocalRoom-test.ts
rename to apps/web/src/utils/dm/createDmLocalRoom.test.ts
index bb23b2f2d5..41cc50c648 100644
--- a/apps/web/test/unit-tests/utils/dm/createDmLocalRoom-test.ts
+++ b/apps/web/src/utils/dm/createDmLocalRoom.test.ts
@@ -6,23 +6,25 @@ 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 { mocked } from "jest-mock";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach } from "vitest";
 import { EventType, KNOWN_SAFE_ROOM_VERSION, type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
+import { createTestClient } from "test-utils";
 
-import { canEncryptToAllUsers } from "../../../../src/createRoom";
-import { type LocalRoom, LOCAL_ROOM_ID_PREFIX } from "../../../../src/models/LocalRoom";
-import { DirectoryMember, type Member, ThreepidMember } from "../../../../src/utils/direct-messages";
-import { createDmLocalRoom } from "../../../../src/utils/dm/createDmLocalRoom";
-import { privateShouldBeEncrypted } from "../../../../src/utils/rooms";
-import { createTestClient } from "../../../test-utils";
+import { canEncryptToAllUsers } from "../../createRoom";
+import { type LocalRoom, LOCAL_ROOM_ID_PREFIX } from "../../models/LocalRoom";
+import { DirectoryMember, type Member, ThreepidMember } from "../direct-messages";
+import { createDmLocalRoom } from "./createDmLocalRoom";
+import { privateShouldBeEncrypted } from "../rooms";
 
-jest.mock("../../../../src/utils/rooms", () => ({
-    privateShouldBeEncrypted: jest.fn(),
+vi.mock("../rooms", () => ({
+    privateShouldBeEncrypted: vi.fn(),
 }));
 
-jest.mock("../../../../src/createRoom", () => ({
-    canEncryptToAllUsers: jest.fn(),
+vi.mock("../../createRoom", () => ({
+    canEncryptToAllUsers: vi.fn(),
 }));
 
 function assertLocalRoom(room: LocalRoom, targets: Member[], encrypted: boolean) {
@@ -60,7 +62,7 @@ describe("createDmLocalRoom", () => {
 
     describe("when rooms should be encrypted", () => {
         beforeEach(() => {
-            mocked(privateShouldBeEncrypted).mockReturnValue(true);
+            vi.mocked(privateShouldBeEncrypted).mockReturnValue(true);
         });
 
         it("should create an encrytped room for 3PID targets", async () => {
@@ -71,7 +73,7 @@ describe("createDmLocalRoom", () => {
 
         describe("for MXID targets with encryption available", () => {
             beforeEach(() => {
-                mocked(canEncryptToAllUsers).mockResolvedValue(true);
+                vi.mocked(canEncryptToAllUsers).mockResolvedValue(true);
             });
 
             it("should create an encrypted room", async () => {
@@ -83,7 +85,7 @@ describe("createDmLocalRoom", () => {
 
         describe("for MXID targets with encryption unavailable", () => {
             beforeEach(() => {
-                mocked(canEncryptToAllUsers).mockResolvedValue(false);
+                vi.mocked(canEncryptToAllUsers).mockResolvedValue(false);
             });
 
             it("should create an unencrypted room", async () => {
@@ -96,7 +98,7 @@ describe("createDmLocalRoom", () => {
 
     describe("if rooms should not be encrypted", () => {
         beforeEach(() => {
-            mocked(privateShouldBeEncrypted).mockReturnValue(false);
+            vi.mocked(privateShouldBeEncrypted).mockReturnValue(false);
         });
 
         it("should create an unencrypted room", async () => {
diff --git a/apps/web/test/unit-tests/utils/dm/filterValidMDirect-test.ts b/apps/web/src/utils/dm/filterValidMDirect.test.ts
similarity index 94%
rename from apps/web/test/unit-tests/utils/dm/filterValidMDirect-test.ts
rename to apps/web/src/utils/dm/filterValidMDirect.test.ts
index ee21ed338a..cfe79f7827 100644
--- a/apps/web/test/unit-tests/utils/dm/filterValidMDirect-test.ts
+++ b/apps/web/src/utils/dm/filterValidMDirect.test.ts
@@ -6,7 +6,9 @@ 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 { filterValidMDirect } from "../../../../src/utils/dm/filterValidMDirect";
+import { describe, it, expect } from "vitest";
+
+import { filterValidMDirect } from "./filterValidMDirect";
 
 const roomId1 = "!room1:example.com";
 const roomId2 = "!room2:example.com";
diff --git a/apps/web/test/unit-tests/utils/dm/findDMForUser-test.ts b/apps/web/src/utils/dm/findDMForUser.test.ts
similarity index 84%
rename from apps/web/test/unit-tests/utils/dm/findDMForUser-test.ts
rename to apps/web/src/utils/dm/findDMForUser.test.ts
index c5bd6eef38..bbf7ba9b08 100644
--- a/apps/web/test/unit-tests/utils/dm/findDMForUser-test.ts
+++ b/apps/web/src/utils/dm/findDMForUser.test.ts
@@ -6,18 +6,20 @@ 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 { mocked } from "jest-mock";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach } from "vitest";
 import { type MatrixClient, Room } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
+import { createTestClient, makeMembershipEvent, mkThirdPartyInviteEvent } from "test-utils";
 
-import DMRoomMap from "../../../../src/utils/DMRoomMap";
-import { createTestClient, makeMembershipEvent, mkThirdPartyInviteEvent } from "../../../test-utils";
-import { LocalRoom } from "../../../../src/models/LocalRoom";
-import { findDMForUser } from "../../../../src/utils/dm/findDMForUser";
-import { getFunctionalMembers } from "../../../../src/utils/room/getFunctionalMembers";
+import DMRoomMap from "../DMRoomMap";
+import { LocalRoom } from "../../models/LocalRoom";
+import { findDMForUser } from "./findDMForUser";
+import { getFunctionalMembers } from "../room/getFunctionalMembers";
 
-jest.mock("../../../../src/utils/room/getFunctionalMembers", () => ({
-    getFunctionalMembers: jest.fn(),
+vi.mock("../room/getFunctionalMembers", () => ({
+    getFunctionalMembers: vi.fn(),
 }));
 
 describe("findDMForUser", () => {
@@ -41,7 +43,7 @@ describe("findDMForUser", () => {
         mockClient = createTestClient();
 
         // always return the bot user as functional member
-        mocked(getFunctionalMembers).mockReturnValue([botId]);
+        vi.mocked(getFunctionalMembers).mockReturnValue([botId]);
 
         room1 = new Room("!room1:example.com", mockClient, userId1);
         room1.getMyMembership = () => KnownMembership.Join;
@@ -92,7 +94,7 @@ describe("findDMForUser", () => {
             mkThirdPartyInviteEvent(thirdPartyId, "third-party", room7.roomId),
         ]);
 
-        mocked(mockClient.getRoom).mockImplementation((roomId: string) => {
+        vi.mocked(mockClient.getRoom).mockImplementation((roomId?: string) => {
             return (
                 {
                     [room1.roomId]: room1,
@@ -102,14 +104,14 @@ describe("findDMForUser", () => {
                     [room5.roomId]: room5,
                     [room6.roomId]: room6,
                     [room7.roomId]: room7,
-                }[roomId] || null
+                }[roomId!] || null
             );
         });
 
         dmRoomMap = {
-            getDMRoomForIdentifiers: jest.fn(),
-            getDMRoomsForUserId: jest.fn(),
-            getRoomIds: jest.fn().mockReturnValue(
+            getDMRoomForIdentifiers: vi.fn(),
+            getDMRoomsForUserId: vi.fn(),
+            getRoomIds: vi.fn().mockReturnValue(
                 new Set([
                     room1.roomId,
                     room2.roomId,
@@ -122,8 +124,8 @@ describe("findDMForUser", () => {
                 ]),
             ),
         } as unknown as DMRoomMap;
-        jest.spyOn(DMRoomMap, "shared").mockReturnValue(dmRoomMap);
-        mocked(dmRoomMap.getDMRoomsForUserId).mockImplementation((userId: string) => {
+        vi.spyOn(DMRoomMap, "shared").mockReturnValue(dmRoomMap);
+        vi.mocked(dmRoomMap.getDMRoomsForUserId).mockImplementation((userId: string) => {
             if (userId === userId1) {
                 return [room1.roomId, room2.roomId, room3.roomId, room4.roomId, room5.roomId, unknownRoomId];
             }
@@ -138,8 +140,8 @@ describe("findDMForUser", () => {
 
     describe("for an empty DM room list", () => {
         beforeEach(() => {
-            mocked(dmRoomMap.getDMRoomsForUserId).mockReturnValue([]);
-            mocked(dmRoomMap.getRoomIds).mockReturnValue(new Set());
+            vi.mocked(dmRoomMap.getDMRoomsForUserId).mockReturnValue([]);
+            vi.mocked(dmRoomMap.getRoomIds).mockReturnValue(new Set());
         });
 
         it("should return undefined", () => {
diff --git a/apps/web/test/unit-tests/utils/dm/findDMRoom-test.ts b/apps/web/src/utils/dm/findDMRoom.test.ts
similarity index 57%
rename from apps/web/test/unit-tests/utils/dm/findDMRoom-test.ts
rename to apps/web/src/utils/dm/findDMRoom.test.ts
index 170ed774bf..fc557c999f 100644
--- a/apps/web/test/unit-tests/utils/dm/findDMRoom-test.ts
+++ b/apps/web/src/utils/dm/findDMRoom.test.ts
@@ -6,18 +6,20 @@ 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 { mocked } from "jest-mock";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach } from "vitest";
 import { type MatrixClient, Room } from "matrix-js-sdk/src/matrix";
+import { createTestClient } from "test-utils";
 
-import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
-import { DirectoryMember, ThreepidMember } from "../../../../src/utils/direct-messages";
-import { findDMForUser } from "../../../../src/utils/dm/findDMForUser";
-import { findDMRoom } from "../../../../src/utils/dm/findDMRoom";
-import DMRoomMap from "../../../../src/utils/DMRoomMap";
-import { createTestClient } from "../../../test-utils";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import { DirectoryMember, ThreepidMember } from "../direct-messages";
+import { findDMForUser } from "./findDMForUser";
+import { findDMRoom } from "./findDMRoom";
+import DMRoomMap from "../DMRoomMap";
 
-jest.mock("../../../../src/utils/dm/findDMForUser", () => ({
-    findDMForUser: jest.fn(),
+vi.mock("../dm/findDMForUser", () => ({
+    findDMForUser: vi.fn(),
 }));
 
 describe("findDMRoom", () => {
@@ -30,33 +32,33 @@ describe("findDMRoom", () => {
 
     beforeEach(() => {
         mockClient = createTestClient();
-        jest.spyOn(MatrixClientPeg, "get").mockReturnValue(mockClient);
+        vi.spyOn(MatrixClientPeg, "get").mockReturnValue(mockClient);
         room1 = new Room("!room1:example.com", mockClient, userId1);
 
         dmRoomMap = {
-            getDMRoomForIdentifiers: jest.fn(),
-            getDMRoomsForUserId: jest.fn(),
+            getDMRoomForIdentifiers: vi.fn(),
+            getDMRoomsForUserId: vi.fn(),
         } as unknown as DMRoomMap;
-        jest.spyOn(DMRoomMap, "shared").mockReturnValue(dmRoomMap);
+        vi.spyOn(DMRoomMap, "shared").mockReturnValue(dmRoomMap);
     });
 
     it("should return the room for a single target with a room", () => {
-        mocked(findDMForUser).mockReturnValue(room1);
+        vi.mocked(findDMForUser).mockReturnValue(room1);
         expect(findDMRoom(mockClient, [member1])).toBe(room1);
     });
 
     it("should return undefined for a single target without a room", () => {
-        mocked(findDMForUser).mockReturnValue(undefined);
+        vi.mocked(findDMForUser).mockReturnValue(undefined);
         expect(findDMRoom(mockClient, [member1])).toBeNull();
     });
 
     it("should return the room for 2 targets with a room", () => {
-        mocked(dmRoomMap.getDMRoomForIdentifiers).mockReturnValue(room1);
+        vi.mocked(dmRoomMap.getDMRoomForIdentifiers).mockReturnValue(room1);
         expect(findDMRoom(mockClient, [member1, member2])).toBe(room1);
     });
 
     it("should return null for 2 targets without a room", () => {
-        mocked(dmRoomMap.getDMRoomForIdentifiers).mockReturnValue(null);
+        vi.mocked(dmRoomMap.getDMRoomForIdentifiers).mockReturnValue(null);
         expect(findDMRoom(mockClient, [member1, member2])).toBeNull();
     });
 });
diff --git a/apps/web/src/utils/enums.ts b/apps/web/src/utils/enums.ts
deleted file mode 100644
index f138ce4cac..0000000000
--- a/apps/web/src/utils/enums.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-/**
- * Get the values for an enum.
- * @param e The enum.
- * @returns The enum values.
- */
-export function getEnumValues(e: any): (string | number)[] {
-    // String-based enums will simply be objects ({Key: "value"}), but number-based
-    // enums will instead map themselves twice: in one direction for {Key: 12} and
-    // the reverse for easy lookup, presumably ({12: Key}). In the reverse mapping,
-    // the key is a string, not a number.
-    //
-    // For this reason, we try to determine what kind of enum we're dealing with.
-
-    const keys = Object.keys(e);
-    const values: (string | number)[] = [];
-    for (const key of keys) {
-        const value = e[key];
-        if (Number.isFinite(value) || e[value.toString()] !== Number(key)) {
-            values.push(value);
-        }
-    }
-    return values;
-}
-
-/**
- * Determines if a given value is a valid value for the provided enum.
- * @param e The enum to check against.
- * @param val The value to search for.
- * @returns True if the enum contains the value.
- */
-export function isEnumValue<T>(e: T, val: string | number): boolean {
-    return getEnumValues(e).includes(val);
-}
diff --git a/apps/web/src/utils/exportUtils/Exporter.ts b/apps/web/src/utils/exportUtils/Exporter.ts
index 185507e8cc..1c535db5d4 100644
--- a/apps/web/src/utils/exportUtils/Exporter.ts
+++ b/apps/web/src/utils/exportUtils/Exporter.ts
@@ -56,7 +56,7 @@ export default abstract class Exporter {
     }
 
     public get destinationFileName(): string {
-        return this.makeFileNameNoExtension(SdkConfig.get().brand) + ".zip";
+        return this.makeFileNameNoExtension() + ".zip";
     }
 
     protected onBeforeUnload(this: void, e: BeforeUnloadEvent): string {
@@ -77,12 +77,12 @@ export default abstract class Exporter {
         this.files.push(file);
     }
 
-    protected makeFileNameNoExtension(brand = "matrix"): string {
+    protected makeFileNameNoExtension(): string {
         // First try to use the real name of the room, then a translated copy of a generic name,
         // then finally hardcoded default to guarantee we'll have a name.
         const safeRoomName = sanitizeFilename(this.room.name ?? _t("common|unnamed_room")).trim() || "Unnamed Room";
         const safeDate = formatFullDateNoDayISO(new Date()).replace(/:/g, "-"); // ISO format automatically removes a lot of stuff for us
-        const safeBrand = sanitizeFilename(brand);
+        const safeBrand = sanitizeFilename(SdkConfig.get().brand);
         return `${safeBrand} - ${safeRoomName} - Chat Export - ${safeDate}`;
     }
 
diff --git a/apps/web/src/utils/exportUtils/HtmlExport.tsx b/apps/web/src/utils/exportUtils/HtmlExport.tsx
index 903125bf8a..ec908ccc9e 100644
--- a/apps/web/src/utils/exportUtils/HtmlExport.tsx
+++ b/apps/web/src/utils/exportUtils/HtmlExport.tsx
@@ -30,10 +30,10 @@ import MatrixClientContext from "../../contexts/MatrixClientContext";
 import getExportCSS from "./exportCSS";
 import { textForEvent } from "../../TextForEvent";
 import { haveRendererForEvent } from "../../events/EventTileFactory";
-import { SDKContext, SdkContextClass } from "../../contexts/SDKContext.ts";
+import { SDKContext } from "../../contexts/SDKContext.ts";
+import { SDKContextClass } from "../../contexts/SDKContextClass";
 import { DateSeparatorViewModel } from "../../viewmodels/room/timeline/DateSeparatorViewModel";
-
-import exportJS from "!!raw-loader!./exportJS";
+import exportJS from "./exportJS.js?raw";
 
 export default class HTMLExporter extends Exporter {
     protected avatars: Map<string, boolean>;
@@ -262,6 +262,7 @@ export default class HTMLExporter extends Exporter {
             roomId: event.getRoomId()!,
             ts,
             forExport: true,
+            roomViewStore: SDKContextClass.instance.roomViewStore,
         });
         try {
             const dateSeparator = (
@@ -286,7 +287,7 @@ export default class HTMLExporter extends Exporter {
                 {/* Export rendering uses an isolated root, so provide I18nContext explicitly. */}
                 <I18nContext.Provider value={window.mxModuleApi.i18n}>
                     <MatrixClientContext.Provider value={this.room.client}>
-                        <SDKContext.Provider value={SdkContextClass.instance}>
+                        <SDKContext.Provider value={SDKContextClass.instance}>
                             <TooltipProvider>
                                 <EventTile
                                     mxEvent={mxEv}
@@ -361,9 +362,9 @@ export default class HTMLExporter extends Exporter {
     protected createModifiedEvent(text: string, mxEv: MatrixEvent, italic = true): MatrixEvent {
         const modifiedContent = {
             msgtype: MsgType.Text,
-            body: `${text}`,
+            body: text,
             format: "org.matrix.custom.html",
-            formatted_body: `${text}`,
+            formatted_body: text,
         };
         if (italic) {
             modifiedContent.formatted_body = "<em>" + modifiedContent.formatted_body + "</em>";
diff --git a/apps/web/src/utils/exportUtils/exportCSS.ts b/apps/web/src/utils/exportUtils/exportCSS.ts
index 7e55b0cebe..90f0156885 100644
--- a/apps/web/src/utils/exportUtils/exportCSS.ts
+++ b/apps/web/src/utils/exportUtils/exportCSS.ts
@@ -7,8 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import type { CssNode, Rule, StyleSheet } from "css-tree";
-
-import customCSS from "!!raw-loader!./exportCustomCSS.css";
+import customCSS from "./exportCustomCSS.css?raw";
 
 const cssSelectorTextClassesRegex = /\.[\w-]+/g;
 const appLayerName = "app-web";
diff --git a/apps/web/test/unit-tests/utils/form-test.ts b/apps/web/src/utils/form.test.ts
similarity index 68%
rename from apps/web/test/unit-tests/utils/form-test.ts
rename to apps/web/src/utils/form.test.ts
index d1036e146f..030522b856 100644
--- a/apps/web/test/unit-tests/utils/form-test.ts
+++ b/apps/web/src/utils/form.test.ts
@@ -5,12 +5,16 @@ 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 { onSubmitPreventDefault } from "../../../src/utils/form.ts";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect } from "vitest";
+
+import { onSubmitPreventDefault } from "./form.ts";
 
 describe("onSubmitPreventDefault", () => {
     it("should preventDefault", () => {
         const event = new SubmitEvent("submit");
-        const spy = jest.spyOn(event, "preventDefault");
+        const spy = vi.spyOn(event, "preventDefault");
 
         onSubmitPreventDefault(event);
         expect(spy).toHaveBeenCalled();
diff --git a/apps/web/src/utils/i18n-helpers.ts b/apps/web/src/utils/i18n-helpers.ts
index 408ec269e5..2b61b29d74 100644
--- a/apps/web/src/utils/i18n-helpers.ts
+++ b/apps/web/src/utils/i18n-helpers.ts
@@ -8,10 +8,10 @@ Please see LICENSE files in the repository root for full details.
 
 import { type Room } from "matrix-js-sdk/src/matrix";
 
-import SpaceStore from "../stores/spaces/SpaceStore";
 import { _t } from "../languageHandler";
 import DMRoomMap from "./DMRoomMap";
 import { formatList } from "./FormattingUtils";
+import { SDKContextClass } from "../contexts/SDKContextClass.ts";
 
 export interface RoomContextDetails {
     details: string | null;
@@ -26,7 +26,7 @@ export function roomContextDetails(room: Room): RoomContextDetails | null {
         return { details: dmPartner };
     }
 
-    const [parent, secondParent, ...otherParents] = SpaceStore.instance.getKnownParents(room.roomId);
+    const [parent, secondParent, ...otherParents] = SDKContextClass.instance.spaceStore.getKnownParents(room.roomId);
     if (secondParent && !otherParents?.length) {
         // exactly 2 edge case for improved i18n
         const space1Name = room.client.getRoom(parent)?.name;
diff --git a/apps/web/src/utils/image-media.ts b/apps/web/src/utils/image-media.ts
index 03c34fb39e..46b527ac68 100644
--- a/apps/web/src/utils/image-media.ts
+++ b/apps/web/src/utils/image-media.ts
@@ -38,7 +38,7 @@ const MAX_HEIGHT = 600;
  * @param {number} inputHeight the width of the image in the input element.
  * @param {string} mimeType The mimeType to save the blob as.
  * @param {boolean} calculateBlurhash Whether to calculate a blurhash of the given image too.
- * @return {Promise} A promise that resolves with an object with an info key
+ * @returns {Promise} A promise that resolves with an object with an info key
  *  and a thumbnail key.
  */
 export async function createThumbnail(
@@ -63,7 +63,7 @@ export async function createThumbnail(
     let context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
     try {
         canvas = new window.OffscreenCanvas(targetWidth, targetHeight);
-        context = canvas.getContext("2d") as OffscreenCanvasRenderingContext2D;
+        context = canvas.getContext("2d")!;
     } catch {
         // Fallback support for other browsers (Safari and Firefox for now)
         canvas = document.createElement("canvas");
diff --git a/apps/web/test/unit-tests/utils/iterables-test.ts b/apps/web/src/utils/iterables.test.ts
similarity index 95%
rename from apps/web/test/unit-tests/utils/iterables-test.ts
rename to apps/web/src/utils/iterables.test.ts
index 963f6efd82..f047dc73dd 100644
--- a/apps/web/test/unit-tests/utils/iterables-test.ts
+++ b/apps/web/src/utils/iterables.test.ts
@@ -6,7 +6,9 @@ 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 { iterableDiff, iterableIntersection } from "../../../src/utils/iterables";
+import { describe, it, expect } from "vitest";
+
+import { iterableDiff, iterableIntersection } from "./iterables";
 
 describe("iterables", () => {
     describe("iterableIntersection", () => {
diff --git a/apps/web/test/unit-tests/utils/keepIfSame-test.ts b/apps/web/src/utils/keepIfSame.test.ts
similarity index 88%
rename from apps/web/test/unit-tests/utils/keepIfSame-test.ts
rename to apps/web/src/utils/keepIfSame.test.ts
index b4ea3393b5..f47d4ae01c 100644
--- a/apps/web/test/unit-tests/utils/keepIfSame-test.ts
+++ b/apps/web/src/utils/keepIfSame.test.ts
@@ -5,7 +5,9 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { keepIfSame } from "../../../src/utils/keepIfSame";
+import { describe, it, expect } from "vitest";
+
+import { keepIfSame } from "./keepIfSame";
 
 describe("keepIfSame", () => {
     it("returns the next value if the current and next values are not deeply equal", () => {
diff --git a/apps/web/test/unit-tests/utils/leave-behaviour-test.ts b/apps/web/src/utils/leave-behaviour.test.ts
similarity index 67%
rename from apps/web/test/unit-tests/utils/leave-behaviour-test.ts
rename to apps/web/src/utils/leave-behaviour.test.ts
index a6da3a4083..03070a47be 100644
--- a/apps/web/test/unit-tests/utils/leave-behaviour-test.ts
+++ b/apps/web/src/utils/leave-behaviour.test.ts
@@ -6,28 +6,30 @@ 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 { mocked, type Mocked } from "jest-mock";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach, afterEach, type Mocked } from "vitest";
 import { type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
 import { sleep } from "matrix-js-sdk/src/utils";
+import { mkRoom, resetAsyncStoreWithClient, setupAsyncStoreWithClient, stubClient } from "test-utils/test-utils";
 
-import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
-import { mkRoom, resetAsyncStoreWithClient, setupAsyncStoreWithClient, stubClient } from "../../test-utils";
-import defaultDispatcher from "../../../src/dispatcher/dispatcher";
-import { type ViewRoomPayload } from "../../../src/dispatcher/payloads/ViewRoomPayload";
-import { Action } from "../../../src/dispatcher/actions";
-import { leaveRoomBehaviour } from "../../../src/utils/leave-behaviour";
-import { SdkContextClass } from "../../../src/contexts/SDKContext";
-import DMRoomMap from "../../../src/utils/DMRoomMap";
-import SpaceStore from "../../../src/stores/spaces/SpaceStore";
-import { MetaSpace } from "../../../src/stores/spaces";
-import { type ActionPayload } from "../../../src/dispatcher/payloads";
-import SettingsStore from "../../../src/settings/SettingsStore";
-import { CallStore } from "../../../src/stores/CallStore";
-import { type Call } from "../../../src/models/Call";
-import LegacyCallHandler from "../../../src/LegacyCallHandler";
+import { MatrixClientPeg } from "../MatrixClientPeg";
+import defaultDispatcher from "../dispatcher/dispatcher";
+import { type ViewRoomPayload } from "../dispatcher/payloads/ViewRoomPayload";
+import { Action } from "../dispatcher/actions";
+import { leaveRoomBehaviour } from "./leave-behaviour";
+import { SDKContextClass } from "../contexts/SDKContextClass";
+import DMRoomMap from "../utils/DMRoomMap";
+import { MetaSpace } from "../stores/spaces";
+import { type ActionPayload } from "../dispatcher/payloads";
+import SettingsStore from "../settings/SettingsStore";
+import { CallStore } from "../stores/CallStore";
+import { type Call } from "../models/Call";
+
+vi.mock("../Modal.tsx");
 
 describe("leaveRoomBehaviour", () => {
-    SdkContextClass.instance.constructEagerStores(); // Initialize RoomViewStore
+    SDKContextClass.instance.constructEagerStores(); // Initialize RoomViewStore
 
     let client: Mocked<MatrixClient>;
     let room: Mocked<Room>;
@@ -35,7 +37,7 @@ describe("leaveRoomBehaviour", () => {
 
     beforeEach(async () => {
         stubClient();
-        client = mocked(MatrixClientPeg.safeGet());
+        client = vi.mocked(MatrixClientPeg.safeGet());
         DMRoomMap.makeShared(client);
 
         room = mkRoom(client, "!1:example.org");
@@ -52,13 +54,13 @@ describe("leaveRoomBehaviour", () => {
             }
         });
 
-        await setupAsyncStoreWithClient(SpaceStore.instance, client);
+        await setupAsyncStoreWithClient(SDKContextClass.instance.spaceStore, client);
     });
 
     afterEach(async () => {
-        SpaceStore.instance.setActiveSpace(MetaSpace.Home);
-        await resetAsyncStoreWithClient(SpaceStore.instance);
-        jest.restoreAllMocks();
+        SDKContextClass.instance.spaceStore.setActiveSpace(MetaSpace.Home);
+        await resetAsyncStoreWithClient(SDKContextClass.instance.spaceStore);
+        vi.restoreAllMocks();
     });
 
     const viewRoom = (room: Room) =>
@@ -72,7 +74,7 @@ describe("leaveRoomBehaviour", () => {
         );
 
     const expectDispatch = async <T extends ActionPayload>(payload: T) => {
-        const dispatcherSpy = jest.fn();
+        const dispatcherSpy = vi.fn();
         const dispatcherRef = defaultDispatcher.register(dispatcherSpy);
         await sleep(0);
         expect(dispatcherSpy).toHaveBeenCalledWith(payload);
@@ -80,7 +82,9 @@ describe("leaveRoomBehaviour", () => {
     };
 
     it("hangs up legacy calls when leaving a room", async () => {
-        const hangupSpy = jest.spyOn(LegacyCallHandler.instance, "hangupOrReject").mockImplementation(() => {});
+        const hangupSpy = vi
+            .spyOn(SDKContextClass.instance.legacyCallHandler, "hangupOrReject")
+            .mockImplementation(() => {});
 
         viewRoom(room);
         await leaveRoomBehaviour(client, room.roomId);
@@ -90,10 +94,10 @@ describe("leaveRoomBehaviour", () => {
 
     it("disconnects widget-based calls when leaving a room", async () => {
         const mockCall = {
-            disconnect: jest.fn().mockResolvedValue(undefined),
+            disconnect: vi.fn().mockResolvedValue(undefined),
         } as unknown as Call;
 
-        jest.spyOn(CallStore.instance, "getActiveCall").mockReturnValue(mockCall);
+        vi.spyOn(CallStore.instance, "getActiveCall").mockReturnValue(mockCall);
 
         viewRoom(room);
         await leaveRoomBehaviour(client, room.roomId);
@@ -109,11 +113,11 @@ describe("leaveRoomBehaviour", () => {
     });
 
     it("returns to the parent space after leaving a room inside of a space that was being viewed", async () => {
-        jest.spyOn(SpaceStore.instance, "getCanonicalParent").mockImplementation((roomId) =>
+        vi.spyOn(SDKContextClass.instance.spaceStore, "getCanonicalParent").mockImplementation((roomId) =>
             roomId === room.roomId ? space : null,
         );
         viewRoom(room);
-        SpaceStore.instance.setActiveSpace(space.roomId, false);
+        SDKContextClass.instance.spaceStore.setActiveSpace(space.roomId, false);
 
         await leaveRoomBehaviour(client, room.roomId);
         await expectDispatch({
@@ -125,7 +129,7 @@ describe("leaveRoomBehaviour", () => {
 
     it("returns to the home page after leaving a top-level space that was being viewed", async () => {
         viewRoom(space);
-        SpaceStore.instance.setActiveSpace(space.roomId, false);
+        SDKContextClass.instance.spaceStore.setActiveSpace(space.roomId, false);
 
         await leaveRoomBehaviour(client, space.roomId);
         await expectDispatch({ action: Action.ViewHomePage });
@@ -133,11 +137,11 @@ describe("leaveRoomBehaviour", () => {
 
     it("returns to the parent space after leaving a subspace that was being viewed", async () => {
         room.isSpaceRoom.mockReturnValue(true);
-        jest.spyOn(SpaceStore.instance, "getCanonicalParent").mockImplementation((roomId) =>
+        vi.spyOn(SDKContextClass.instance.spaceStore, "getCanonicalParent").mockImplementation((roomId) =>
             roomId === room.roomId ? space : null,
         );
         viewRoom(room);
-        SpaceStore.instance.setActiveSpace(room.roomId, false);
+        SDKContextClass.instance.spaceStore.setActiveSpace(room.roomId, false);
 
         await leaveRoomBehaviour(client, room.roomId);
         await expectDispatch({
@@ -149,7 +153,7 @@ describe("leaveRoomBehaviour", () => {
 
     describe("If the feature_dynamic_room_predecessors is not enabled", () => {
         beforeEach(() => {
-            jest.spyOn(SettingsStore, "getValue").mockReturnValue(false);
+            vi.spyOn(SettingsStore, "getValue").mockReturnValue(false);
         });
 
         it("Passes through the dynamic predecessor setting", async () => {
@@ -161,7 +165,7 @@ describe("leaveRoomBehaviour", () => {
     describe("If the feature_dynamic_room_predecessors is enabled", () => {
         beforeEach(() => {
             // Turn on feature_dynamic_room_predecessors setting
-            jest.spyOn(SettingsStore, "getValue").mockImplementation(
+            vi.spyOn(SettingsStore, "getValue").mockImplementation(
                 (settingName) => settingName === "feature_dynamic_room_predecessors",
             );
         });
diff --git a/apps/web/src/utils/leave-behaviour.ts b/apps/web/src/utils/leave-behaviour.ts
index 9756fa50cf..ddbcd47623 100644
--- a/apps/web/src/utils/leave-behaviour.ts
+++ b/apps/web/src/utils/leave-behaviour.ts
@@ -16,7 +16,6 @@ import Spinner from "../components/views/elements/Spinner";
 import { _t } from "../languageHandler";
 import ErrorDialog from "../components/views/dialogs/ErrorDialog";
 import { isMetaSpace } from "../stores/spaces";
-import SpaceStore from "../stores/spaces/SpaceStore";
 import dis from "../dispatcher/dispatcher";
 import { type ViewRoomPayload } from "../dispatcher/payloads/ViewRoomPayload";
 import { Action } from "../dispatcher/actions";
@@ -24,10 +23,9 @@ import { type ViewHomePagePayload } from "../dispatcher/payloads/ViewHomePagePay
 import LeaveSpaceDialog from "../components/views/dialogs/LeaveSpaceDialog";
 import { type AfterLeaveRoomPayload } from "../dispatcher/payloads/AfterLeaveRoomPayload";
 import { bulkSpaceBehaviour } from "./space";
-import { SdkContextClass } from "../contexts/SDKContext";
+import { SDKContextClass } from "../contexts/SDKContextClass";
 import SettingsStore from "../settings/SettingsStore";
 import { CallStore } from "../stores/CallStore";
-import LegacyCallHandler from "../LegacyCallHandler";
 
 export async function leaveRoomBehaviour(
     matrixClient: MatrixClient,
@@ -64,7 +62,7 @@ export async function leaveRoomBehaviour(
 
     // attempt to hang up legacy based calls
     try {
-        LegacyCallHandler.instance.hangupOrReject(roomId);
+        SDKContextClass.instance.legacyCallHandler.hangupOrReject(roomId);
     } catch (e) {
         logger.warn("Failed to hangup call before leaving room: ", e);
     }
@@ -161,16 +159,16 @@ export async function leaveRoomBehaviour(
         return;
     }
 
-    if (SdkContextClass.instance.roomViewStore.getRoomId() === roomId) {
+    if (SDKContextClass.instance.roomViewStore.getRoomId() === roomId) {
         // We were viewing the room that was just left. In order to avoid
         // accidentally viewing the next room in the list and clearing its
         // notifications, switch to a neutral ground such as the home page or
         // space landing page.
-        if (isMetaSpace(SpaceStore.instance.activeSpace)) {
+        if (isMetaSpace(SDKContextClass.instance.spaceStore.activeSpace)) {
             dis.dispatch<ViewHomePagePayload>({ action: Action.ViewHomePage });
-        } else if (SpaceStore.instance.activeSpace === roomId) {
+        } else if (SDKContextClass.instance.spaceStore.activeSpace === roomId) {
             // View the parent space, if there is one
-            const parent = SpaceStore.instance.getCanonicalParent(roomId);
+            const parent = SDKContextClass.instance.spaceStore.getCanonicalParent(roomId);
             if (parent !== null) {
                 dis.dispatch<ViewRoomPayload>({
                     action: Action.ViewRoom,
@@ -183,7 +181,7 @@ export async function leaveRoomBehaviour(
         } else {
             dis.dispatch<ViewRoomPayload>({
                 action: Action.ViewRoom,
-                room_id: SpaceStore.instance.activeSpace,
+                room_id: SDKContextClass.instance.spaceStore.activeSpace,
                 metricsTrigger: undefined, // other
             });
         }
diff --git a/apps/web/src/utils/local-room.ts b/apps/web/src/utils/local-room.ts
index 90d25bd4c0..5d48ed116f 100644
--- a/apps/web/src/utils/local-room.ts
+++ b/apps/web/src/utils/local-room.ts
@@ -124,7 +124,7 @@ export async function waitForRoomReadyAndApplyAfterCreateCallbacks(
  */
 async function applyAfterCreateCallbacks(localRoom: LocalRoom, roomId: string): Promise<void> {
     for (const afterCreateCallback of localRoom.afterCreateCallbacks) {
-        await afterCreateCallback(roomId);
+        afterCreateCallback(roomId);
     }
 
     localRoom.afterCreateCallbacks = [];
diff --git a/apps/web/test/unit-tests/utils/localRoom/isLocalRoom-test.ts b/apps/web/src/utils/localRoom/isLocalRoom.test.ts
similarity index 80%
rename from apps/web/test/unit-tests/utils/localRoom/isLocalRoom-test.ts
rename to apps/web/src/utils/localRoom/isLocalRoom.test.ts
index 2d11f4e523..f03f69033c 100644
--- a/apps/web/test/unit-tests/utils/localRoom/isLocalRoom-test.ts
+++ b/apps/web/src/utils/localRoom/isLocalRoom.test.ts
@@ -6,11 +6,14 @@ 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 { Room } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import { LocalRoom, LOCAL_ROOM_ID_PREFIX } from "../../../../src/models/LocalRoom";
-import { isLocalRoom } from "../../../../src/utils/localRoom/isLocalRoom";
-import { createTestClient } from "../../../test-utils";
+import { describe, it, expect, beforeEach } from "vitest";
+import { Room } from "matrix-js-sdk/src/matrix";
+import { createTestClient } from "test-utils";
+
+import { LocalRoom, LOCAL_ROOM_ID_PREFIX } from "../../models/LocalRoom";
+import { isLocalRoom } from "./isLocalRoom";
 
 describe("isLocalRoom", () => {
     let room: Room;
diff --git a/apps/web/test/unit-tests/utils/localRoom/isRoomReady-test.ts b/apps/web/src/utils/localRoom/isRoomReady.test.ts
similarity index 91%
rename from apps/web/test/unit-tests/utils/localRoom/isRoomReady-test.ts
rename to apps/web/src/utils/localRoom/isRoomReady.test.ts
index d257f1e2a2..2da89c7bdb 100644
--- a/apps/web/test/unit-tests/utils/localRoom/isRoomReady-test.ts
+++ b/apps/web/src/utils/localRoom/isRoomReady.test.ts
@@ -6,14 +6,16 @@ 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 { mocked } from "jest-mock";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach } from "vitest";
 import { EventType, type MatrixClient, Room } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
+import { createTestClient, makeMembershipEvent, mkEvent } from "test-utils";
 
-import { LocalRoom, LOCAL_ROOM_ID_PREFIX } from "../../../../src/models/LocalRoom";
-import { DirectoryMember } from "../../../../src/utils/direct-messages";
-import { isRoomReady } from "../../../../src/utils/localRoom/isRoomReady";
-import { createTestClient, makeMembershipEvent, mkEvent } from "../../../test-utils";
+import { LocalRoom, LOCAL_ROOM_ID_PREFIX } from "../../models/LocalRoom";
+import { DirectoryMember } from "../direct-messages";
+import { isRoomReady } from "./isRoomReady";
 
 describe("isRoomReady", () => {
     const userId1 = "@user1:example.com";
@@ -41,7 +43,7 @@ describe("isRoomReady", () => {
     describe("for a room with an actual room id", () => {
         beforeEach(() => {
             localRoom.actualRoomId = room1.roomId;
-            mocked(client.getRoom).mockReturnValue(null);
+            vi.mocked(client.getRoom).mockReturnValue(null);
         });
 
         it("should return false", () => {
@@ -50,7 +52,7 @@ describe("isRoomReady", () => {
 
         describe("and the room is known to the client", () => {
             beforeEach(() => {
-                mocked(client.getRoom).mockImplementation((roomId: string) => {
+                vi.mocked(client.getRoom).mockImplementation((roomId?: string) => {
                     if (roomId === room1.roomId) return room1;
                     return null;
                 });
diff --git a/apps/web/test/unit-tests/utils/location/isSelfLocation-test.ts b/apps/web/src/utils/location/isSelfLocation.test.ts
similarity index 95%
rename from apps/web/test/unit-tests/utils/location/isSelfLocation-test.ts
rename to apps/web/src/utils/location/isSelfLocation.test.ts
index 927fa2ed62..02559daf6c 100644
--- a/apps/web/test/unit-tests/utils/location/isSelfLocation-test.ts
+++ b/apps/web/src/utils/location/isSelfLocation.test.ts
@@ -6,6 +6,7 @@ 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 { describe, it, expect } from "vitest";
 import {
     M_TEXT,
     type ILocationContent,
@@ -16,7 +17,7 @@ import {
     ContentHelpers,
 } from "matrix-js-sdk/src/matrix";
 
-import { isSelfLocation } from "../../../../src/utils/location";
+import { isSelfLocation } from "./isSelfLocation";
 
 describe("isSelfLocation", () => {
     it("Returns true for a full m.asset event", () => {
diff --git a/apps/web/test/unit-tests/utils/location/map-test.ts b/apps/web/src/utils/location/links.test.ts
similarity index 76%
rename from apps/web/test/unit-tests/utils/location/map-test.ts
rename to apps/web/src/utils/location/links.test.ts
index c2dcf75118..37df2a3855 100644
--- a/apps/web/test/unit-tests/utils/location/map-test.ts
+++ b/apps/web/src/utils/location/links.test.ts
@@ -6,9 +6,12 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { createMapSiteLinkFromEvent } from "../../../../src/utils/location";
-import { mkMessage } from "../../../test-utils";
-import { makeLegacyLocationEvent, makeLocationEvent } from "../../../test-utils/location";
+// @vitest-environment happy-dom
+
+import { describe, it, expect } from "vitest";
+import { mkMessage, makeLegacyLocationEvent, makeLocationEvent } from "test-utils";
+
+import { createMapSiteLinkFromEvent } from "./links";
 
 describe("createMapSiteLinkFromEvent", () => {
     it("returns null if event does not contain geouri", () => {
@@ -25,7 +28,7 @@ describe("createMapSiteLinkFromEvent", () => {
 
     it("returns OpenStreetMap link if event contains m.location with valid uri", () => {
         expect(createMapSiteLinkFromEvent(makeLocationEvent("geo:51.5076,-0.1276"))).toEqual(
-            "https://www.openstreetmap.org/" + "?mlat=51.5076&mlon=-0.1276" + "#map=16/51.5076/-0.1276",
+            "https://www.openstreetmap.org/?mlat=51.5076&mlon=-0.1276#map=16/51.5076/-0.1276",
         );
     });
 
@@ -35,7 +38,7 @@ describe("createMapSiteLinkFromEvent", () => {
 
     it("returns OpenStreetMap link if event contains geo_uri", () => {
         expect(createMapSiteLinkFromEvent(makeLegacyLocationEvent("geo:51.5076,-0.1276"))).toEqual(
-            "https://www.openstreetmap.org/" + "?mlat=51.5076&mlon=-0.1276" + "#map=16/51.5076/-0.1276",
+            "https://www.openstreetmap.org/?mlat=51.5076&mlon=-0.1276#map=16/51.5076/-0.1276",
         );
     });
 
diff --git a/apps/web/test/unit-tests/utils/location/locationEventGeoUri-test.ts b/apps/web/src/utils/location/locationEventGeoUri.test.ts
similarity index 77%
rename from apps/web/test/unit-tests/utils/location/locationEventGeoUri-test.ts
rename to apps/web/src/utils/location/locationEventGeoUri.test.ts
index c1c77f2844..f606499934 100644
--- a/apps/web/test/unit-tests/utils/location/locationEventGeoUri-test.ts
+++ b/apps/web/src/utils/location/locationEventGeoUri.test.ts
@@ -6,8 +6,10 @@ 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 { locationEventGeoUri } from "../../../../src/utils/location";
-import { makeLegacyLocationEvent, makeLocationEvent } from "../../../test-utils/location";
+import { describe, it, expect } from "vitest";
+import { makeLegacyLocationEvent, makeLocationEvent } from "test-utils/location";
+
+import { locationEventGeoUri } from "./locationEventGeoUri";
 
 describe("locationEventGeoUri()", () => {
     it("returns m.location uri when available", () => {
diff --git a/apps/web/test/unit-tests/utils/location/parseGeoUri-test.ts b/apps/web/src/utils/location/parseGeoUri.test.ts
similarity index 97%
rename from apps/web/test/unit-tests/utils/location/parseGeoUri-test.ts
rename to apps/web/src/utils/location/parseGeoUri.test.ts
index 608ed52ba0..27bc56a4b2 100644
--- a/apps/web/test/unit-tests/utils/location/parseGeoUri-test.ts
+++ b/apps/web/src/utils/location/parseGeoUri.test.ts
@@ -6,7 +6,9 @@ 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 { parseGeoUri } from "../../../../src/utils/location/parseGeoUri";
+import { describe, it, expect } from "vitest";
+
+import { parseGeoUri } from "./parseGeoUri";
 
 describe("parseGeoUri", () => {
     it("fails if the supplied URI is empty", () => {
diff --git a/apps/web/src/utils/location/parseGeoUri.ts b/apps/web/src/utils/location/parseGeoUri.ts
index 85a4474be5..358c018de5 100644
--- a/apps/web/src/utils/location/parseGeoUri.ts
+++ b/apps/web/src/utils/location/parseGeoUri.ts
@@ -33,8 +33,8 @@ export const parseGeoUri = (uri: string): GeolocationCoordinates | undefined =>
     }
 
     const geoCoords = {
-        latitude: latitude!,
-        longitude: longitude!,
+        latitude: latitude,
+        longitude: longitude,
         altitude: parse(coords[2]),
         accuracy: uncertainty!,
         altitudeAccuracy: null,
diff --git a/apps/web/test/unit-tests/utils/location/positionFailureMessage-test.ts b/apps/web/src/utils/location/positionFailureMessage.test.ts
similarity index 90%
rename from apps/web/test/unit-tests/utils/location/positionFailureMessage-test.ts
rename to apps/web/src/utils/location/positionFailureMessage.test.ts
index f3eeacb83e..99baa49cdb 100644
--- a/apps/web/test/unit-tests/utils/location/positionFailureMessage-test.ts
+++ b/apps/web/src/utils/location/positionFailureMessage.test.ts
@@ -6,7 +6,9 @@ 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 { positionFailureMessage } from "../../../../src/utils/location/positionFailureMessage";
+import { describe, it, expect } from "vitest";
+
+import { positionFailureMessage } from "./positionFailureMessage";
 
 describe("positionFailureMessage()", () => {
     // error codes from GeolocationPositionError
diff --git a/apps/web/test/unit-tests/utils/maps-test.ts b/apps/web/src/utils/maps.test.ts
similarity index 98%
rename from apps/web/test/unit-tests/utils/maps-test.ts
rename to apps/web/src/utils/maps.test.ts
index 619766e679..4fe4174197 100644
--- a/apps/web/test/unit-tests/utils/maps-test.ts
+++ b/apps/web/src/utils/maps.test.ts
@@ -6,7 +6,9 @@ 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 { EnhancedMap, mapDiff } from "../../../src/utils/maps";
+import { describe, it, expect } from "vitest";
+
+import { EnhancedMap, mapDiff } from "./maps";
 
 describe("maps", () => {
     describe("mapDiff", () => {
diff --git a/apps/web/src/utils/media/requestMediaPermissions.tsx b/apps/web/src/utils/media/requestMediaPermissions.ts
similarity index 100%
rename from apps/web/src/utils/media/requestMediaPermissions.tsx
rename to apps/web/src/utils/media/requestMediaPermissions.ts
diff --git a/apps/web/test/unit-tests/utils/membership-test.ts b/apps/web/src/utils/membership.test.ts
similarity index 84%
rename from apps/web/test/unit-tests/utils/membership-test.ts
rename to apps/web/src/utils/membership.test.ts
index e0ade64186..61a640ade7 100644
--- a/apps/web/test/unit-tests/utils/membership-test.ts
+++ b/apps/web/src/utils/membership.test.ts
@@ -6,6 +6,9 @@ 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.
 */
 
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach, afterEach, type Mocked } from "vitest";
 import {
     type MatrixClient,
     type MatrixEvent,
@@ -15,18 +18,17 @@ import {
     RoomStateEvent,
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
-import { mocked } from "jest-mock";
+import { createTestClient, mkRoomMember, stubClient } from "test-utils";
 
-import { isKnockDenied, waitForMember } from "../../../src/utils/membership";
-import { createTestClient, mkRoomMember, stubClient } from "../../test-utils";
+import { isKnockDenied, waitForMember } from "./membership";
 
 describe("isKnockDenied", () => {
     const userId = "alice";
-    let client: jest.Mocked<MatrixClient>;
+    let client: Mocked<MatrixClient>;
     let room: Room;
 
     beforeEach(() => {
-        client = stubClient() as jest.Mocked<MatrixClient>;
+        client = vi.mocked(stubClient());
         room = new Room("!room-id:example.com", client, "@user:example.com");
     });
 
@@ -34,7 +36,7 @@ describe("isKnockDenied", () => {
         const roomMember = mkRoomMember(room.roomId, userId, KnownMembership.Leave, true, {
             membership: KnownMembership.Knock,
         });
-        jest.spyOn(room, "getMember").mockReturnValue(roomMember);
+        vi.spyOn(room, "getMember").mockReturnValue(roomMember);
         expect(isKnockDenied(room)).toBe(true);
     });
 
@@ -45,7 +47,7 @@ describe("isKnockDenied", () => {
         { membership: KnownMembership.Leave, isKicked: true, prevMembership: KnownMembership.Join },
     ])("checks that the user knock has been not denied", ({ membership, isKicked, prevMembership }) => {
         const roomMember = mkRoomMember(room.roomId, userId, membership, isKicked, { membership: prevMembership });
-        jest.spyOn(room, "getMember").mockReturnValue(roomMember);
+        vi.spyOn(room, "getMember").mockReturnValue(roomMember);
         expect(isKnockDenied(room)).toBe(false);
     });
 });
@@ -64,17 +66,17 @@ describe("waitForMember", () => {
 
         // getRoom() only knows about !stub_room, which has only one member
         const stubRoom = {
-            getMember: jest.fn().mockImplementation((userId) => {
+            getMember: vi.fn().mockImplementation((userId) => {
                 return userId === STUB_MEMBER_ID ? ({} as RoomMember) : null;
             }),
         };
-        mocked(client.getRoom).mockImplementation((roomId) => {
+        vi.mocked(client.getRoom).mockImplementation((roomId) => {
             return roomId === STUB_ROOM_ID ? (stubRoom as unknown as Room) : null;
         });
     });
 
     afterEach(() => {
-        jest.useRealTimers();
+        vi.useRealTimers();
     });
 
     it("resolves with false if the timeout is reached", async () => {
@@ -83,11 +85,11 @@ describe("waitForMember", () => {
     });
 
     it("resolves with false if the timeout is reached, even if other RoomState.newMember events fire", async () => {
-        jest.useFakeTimers();
+        vi.useFakeTimers();
         const roomId = "!roomId:domain";
         const userId = "@clientId:domain";
         const resultProm = waitForMember(client, roomId, userId, { timeout });
-        jest.advanceTimersByTime(50);
+        vi.advanceTimersByTime(50);
         expect(await resultProm).toBe(false);
         client.emit(
             RoomStateEvent.NewMember,
@@ -98,7 +100,7 @@ describe("waitForMember", () => {
                 userId: "@anotherClient:domain",
             } as RoomMember,
         );
-        jest.useRealTimers();
+        vi.useRealTimers();
     });
 
     it("resolves with true if RoomState.newMember fires", async () => {
@@ -115,7 +117,7 @@ describe("waitForMember", () => {
     });
 
     it("resolves immediately if the user is already a member", async () => {
-        jest.useFakeTimers();
+        vi.useFakeTimers();
         const resultProm = waitForMember(client, STUB_ROOM_ID, STUB_MEMBER_ID, { timeout });
         expect(await resultProm).toBe(true);
     });
diff --git a/apps/web/src/utils/membership.ts b/apps/web/src/utils/membership.ts
index 9880043e3d..73038ba45d 100644
--- a/apps/web/src/utils/membership.ts
+++ b/apps/web/src/utils/membership.ts
@@ -43,28 +43,6 @@ export enum EffectiveMembership {
     Leave = "LEAVE",
 }
 
-export type MembershipSplit = {
-    [state in EffectiveMembership]: Room[];
-};
-
-export function splitRoomsByMembership(rooms: Room[]): MembershipSplit {
-    const split: MembershipSplit = {
-        [EffectiveMembership.Invite]: [],
-        [EffectiveMembership.Join]: [],
-        [EffectiveMembership.Leave]: [],
-    };
-
-    for (const room of rooms) {
-        const membership = room.getMyMembership();
-        // Filter out falsey relationship as this will be peeked rooms
-        if (!!membership) {
-            split[getEffectiveMembershipTag(room)].push(room);
-        }
-    }
-
-    return split;
-}
-
 export function getEffectiveMembership(membership: Membership): EffectiveMembership {
     if (membership === KnownMembership.Invite) {
         return EffectiveMembership.Invite;
@@ -116,7 +94,6 @@ export async function waitForMember(
     }
 
     return new Promise<boolean>((resolve) => {
-        // eslint-disable-next-line @typescript-eslint/naming-convention
         handler = function (_, __, member: RoomMember) {
             if (member.userId !== userId) return;
             if (member.roomId !== roomId) return;
diff --git a/apps/web/src/utils/messages.ts b/apps/web/src/utils/messages.ts
index b6040b536b..0a2b91f492 100644
--- a/apps/web/src/utils/messages.ts
+++ b/apps/web/src/utils/messages.ts
@@ -6,9 +6,12 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type MatrixEvent, type IContent, type IMentions, type IEventRelation } from "matrix-js-sdk/src/matrix";
+import { type MessageComposerUrlPreviewSnapshot } from "@element-hq/web-shared-components";
 
 import type EditorModel from "../editor/model";
 import { Type } from "../editor/parts";
+import { type RoomMessageEventContent } from "../../@types/url-preview";
+import SettingsStore from "../settings/SettingsStore";
 
 /**
  * Build the mentions information based on the editor model (and any related events):
@@ -80,7 +83,7 @@ export function attachMentions(
         // mentioned users.
         const prevMentions = editedContent["m.mentions"];
         if (Array.isArray(prevMentions?.user_ids)) {
-            prevMentions!.user_ids.forEach((userId) => userMentions.delete(userId));
+            prevMentions.user_ids.forEach((userId) => userMentions.delete(userId));
         }
 
         // If the original event mentioned the room, nothing to do here.
@@ -102,8 +105,30 @@ export function attachMentions(
 export function attachRelation(content: IContent, relation?: IEventRelation): void {
     if (relation) {
         content["m.relates_to"] = {
-            ...(content["m.relates_to"] || {}),
+            ...content["m.relates_to"],
             ...relation,
         };
     }
 }
+export function attachUrlPreviews(
+    urlPreviewSnapshot: MessageComposerUrlPreviewSnapshot,
+    content: RoomMessageEventContent,
+): void {
+    if (!SettingsStore.getValue("feature_msc4095_url_preview_bundle")) return;
+
+    if (urlPreviewSnapshot.previews.length) {
+        content["com.beeper.linkpreviews"] = urlPreviewSnapshot.previews.map((preview) => {
+            return {
+                "matched_url": preview.link,
+                "og:url": preview.ogUrl,
+                "og:title": preview.title,
+                "og:description": preview.description,
+                "og:image": preview.image?.mxcImageFull,
+                "og:image:width": preview.image?.width,
+                "og:image:height": preview.image?.height,
+                "og:image:type": preview.image?.imageType,
+                "matrix:image:size": preview.image?.fileSize,
+            };
+        });
+    }
+}
diff --git a/apps/web/src/utils/notifications.ts b/apps/web/src/utils/notifications.ts
index 9fab246a55..47e74de149 100644
--- a/apps/web/src/utils/notifications.ts
+++ b/apps/web/src/utils/notifications.ts
@@ -59,7 +59,7 @@ export async function createLocalNotificationSettingsIfNeeded(cli: MatrixClient)
     if (cli.isGuest()) {
         return;
     }
-    const eventType = getLocalNotificationAccountDataEventType(cli.deviceId!);
+    const eventType = getLocalNotificationAccountDataEventType(cli.deviceId);
     const event = cli.getAccountData(eventType);
     // New sessions will create an account data event to signify they support
     // remote toggling of push notifications on this device. Default `is_silenced=true`
@@ -77,7 +77,7 @@ export async function createLocalNotificationSettingsIfNeeded(cli: MatrixClient)
 }
 
 export function localNotificationsAreSilenced(cli: MatrixClient): boolean {
-    const eventType = getLocalNotificationAccountDataEventType(cli.deviceId!);
+    const eventType = getLocalNotificationAccountDataEventType(cli.deviceId);
     const event = cli.getAccountData(eventType);
     return event?.getContent<LocalNotificationSettings>()?.is_silenced ?? false;
 }
diff --git a/apps/web/src/utils/oauth/authorize.ts b/apps/web/src/utils/oauth/authorize.ts
new file mode 100644
index 0000000000..36644d58cb
--- /dev/null
+++ b/apps/web/src/utils/oauth/authorize.ts
@@ -0,0 +1,127 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { OAuth2, OAuth2Error, type ValidatedAuthMetadata } from "matrix-js-sdk/src/matrix";
+import { secureRandomString } from "matrix-js-sdk/src/randomstring";
+
+import { OAuthClientError } from "./error";
+import PlatformPeg from "../../PlatformPeg";
+import { type URLParams } from "../../vector/url_utils.ts";
+import { getOAuthParams, loadAuthContext, storeAuthContext } from "./persistOAuthSettings.ts";
+
+const RESPONSE_MODE = "fragment";
+
+/**
+ * Start OAuth2 authorization code flow
+ * Generates auth params, stores them in session storage and
+ * Navigates to configured authorization endpoint
+ * @param authMetadata from {@link MatrixClient.getAuthMetdata}
+ * @param clientId this client's id as registered with configured issuer
+ * @param homeserverUrl target homeserver
+ * @param identityServerUrl OPTIONAL target identity server
+ * @param isRegistration if true will set the prompt to "create"
+ * @returns Promise that resolves after we have navigated to auth endpoint
+ */
+export const startOAuthLogin = async (
+    authMetadata: ValidatedAuthMetadata,
+    clientId: string,
+    homeserverUrl: string,
+    identityServerUrl?: string,
+    isRegistration?: boolean,
+): Promise<void> => {
+    const platform = PlatformPeg.get()!;
+    const state = secureRandomString(32) + platform.getOAuthClientState();
+
+    const auth = new OAuth2(authMetadata, getOAuthParams(clientId));
+    storeAuthContext({
+        authContext: auth.context,
+        metadata: authMetadata,
+        homeserverUrl,
+        identityServerUrl,
+        state,
+    });
+
+    const authorizationUrl = await auth.generateAuthorizationCodeGrantUrl(
+        state,
+        RESPONSE_MODE,
+        isRegistration ? "create" : undefined,
+    );
+
+    window.location.href = authorizationUrl;
+};
+
+/**
+ * Gets `code` and `state` response params
+ *
+ * @param urlParams - the parameters to read
+ * @returns code and state
+ * @throws when code and state are not valid strings
+ */
+const getCodeAndStateFromParams = ({
+    code,
+    state,
+}: NonNullable<URLParams["oauth2"]>): { code: string; state: string } => {
+    if (!code || typeof code !== "string" || !state || typeof state !== "string") {
+        throw new Error(OAuthClientError.InvalidFragmentParameters);
+    }
+    return { code, state };
+};
+
+/**
+ * Return type for {@link completeOAuthLogin}
+ * Contains all the credentials gathered from a successful OIDC login
+ */
+export type CompleteOAuthLoginResponse = {
+    /**
+     * URL of the homeserver selected during login
+     */
+    homeserverUrl: string;
+    /**
+     * Identity server URL as discovered during login
+     */
+    identityServerUrl?: string;
+    /**
+     * Access Token gained from OIDC token issuer
+     */
+    accessToken: string;
+    /**
+     * Refresh Token gained from OIDC token issuer, when falsy token cannot be refreshed
+     */
+    refreshToken?: string;
+    /**
+     * This client's ID as registered with the OIDC issuer
+     */
+    clientId: string;
+};
+
+/**
+ * Attempt to complete authorization code flow to get an access token
+ * @param urlParams the parameters extracted from the app-load URI.
+ * @returns Promise that resolves with a CompleteOAuthLoginResponse when login was successful
+ * @throws When we failed to get a valid access token
+ */
+export const completeOAuthLogin = async (
+    urlParams: NonNullable<URLParams["oauth2"]>,
+): Promise<CompleteOAuthLoginResponse> => {
+    const { code, state } = getCodeAndStateFromParams(urlParams);
+
+    const context = loadAuthContext();
+    if (context?.state !== state) {
+        throw new Error(OAuth2Error.MissingOrInvalidStoredState);
+    }
+
+    const bearerToken = await new OAuth2(context.metadata, context.authContext).completeAuthorizationCodeGrant(code);
+
+    return {
+        homeserverUrl: context.homeserverUrl,
+        identityServerUrl: context.identityServerUrl,
+        accessToken: bearerToken.access_token,
+        refreshToken: bearerToken.refresh_token,
+        clientId: context.authContext.clientId,
+    };
+};
diff --git a/apps/web/src/utils/oidc/error.ts b/apps/web/src/utils/oauth/error.ts
similarity index 62%
rename from apps/web/src/utils/oidc/error.ts
rename to apps/web/src/utils/oauth/error.ts
index 3cc5c14ec5..dd812801d1 100644
--- a/apps/web/src/utils/oidc/error.ts
+++ b/apps/web/src/utils/oauth/error.ts
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type ReactNode } from "react";
-import { OidcError } from "matrix-js-sdk/src/oidc/error";
+import { OAuth2Error } from "matrix-js-sdk/src/matrix";
 
 import { _t } from "../../languageHandler";
 
@@ -15,8 +15,7 @@ import { _t } from "../../languageHandler";
  * Errors thrown by EW during OIDC native flow authentication.
  * Intended to be logged, not read by users.
  */
-export enum OidcClientError {
-    InvalidQueryParameters = "Invalid query parameters for OIDC native login. `code` and `state` are required.",
+export enum OAuthClientError {
     InvalidFragmentParameters = "Invalid fragment parameters for OIDC native login. `code` and `state` are required.",
 }
 
@@ -26,15 +25,13 @@ export enum OidcClientError {
  * @param error
  * @returns a friendly translated error message for user consumption
  */
-export const getOidcErrorMessage = (error: Error): string | ReactNode => {
+export const getOAuthErrorMessage = (error: Error): string | ReactNode => {
     switch (error.message) {
-        case OidcError.MissingOrInvalidStoredState:
+        case OAuth2Error.MissingOrInvalidStoredState:
             return _t("auth|oidc|missing_or_invalid_stored_state");
-        case OidcClientError.InvalidQueryParameters:
-        case OidcClientError.InvalidFragmentParameters:
-        case OidcError.CodeExchangeFailed:
-        case OidcError.InvalidBearerTokenResponse:
-        case OidcError.InvalidIdToken:
+        case OAuthClientError.InvalidFragmentParameters:
+        case OAuth2Error.CodeExchangeFailed:
+        case OAuth2Error.InvalidBearerTokenResponse:
         default:
             return _t("auth|oidc|generic_auth_error");
     }
diff --git a/apps/web/src/utils/oidc/isUserRegistrationSupported.ts b/apps/web/src/utils/oauth/isUserRegistrationSupported.ts
similarity index 87%
rename from apps/web/src/utils/oidc/isUserRegistrationSupported.ts
rename to apps/web/src/utils/oauth/isUserRegistrationSupported.ts
index 805206635d..62522ebfac 100644
--- a/apps/web/src/utils/oidc/isUserRegistrationSupported.ts
+++ b/apps/web/src/utils/oauth/isUserRegistrationSupported.ts
@@ -6,7 +6,7 @@ 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 OidcClientConfig } from "matrix-js-sdk/src/matrix";
+import { type ValidatedAuthMetadata } from "matrix-js-sdk/src/matrix";
 
 /**
  * Check the create prompt is supported by the OP, if so, we can do a registration flow
@@ -14,7 +14,7 @@ import { type OidcClientConfig } from "matrix-js-sdk/src/matrix";
  * @param delegatedAuthConfig config as returned from discovery
  * @returns whether user registration is supported
  */
-export const isUserRegistrationSupported = (delegatedAuthConfig: OidcClientConfig): boolean => {
+export const isUserRegistrationSupported = (delegatedAuthConfig: ValidatedAuthMetadata): boolean => {
     const supportedPrompts = delegatedAuthConfig.prompt_values_supported;
     return Array.isArray(supportedPrompts) && supportedPrompts?.includes("create");
 };
diff --git a/apps/web/src/utils/oauth/persistOAuthSettings.test.ts b/apps/web/src/utils/oauth/persistOAuthSettings.test.ts
new file mode 100644
index 0000000000..b3c5f7e882
--- /dev/null
+++ b/apps/web/src/utils/oauth/persistOAuthSettings.test.ts
@@ -0,0 +1,42 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach } from "vitest";
+
+import { getStoredOAuthClientId, persistOAuthClientId } from "./persistOAuthSettings";
+
+describe("persist OAuth2 settings", () => {
+    vi.spyOn(localStorage, "getItem");
+    vi.spyOn(localStorage, "setItem");
+
+    beforeEach(() => {
+        localStorage.clear();
+    });
+
+    const clientId = "test-client-id";
+
+    describe("persistOAuthClientId", () => {
+        it("should set clientId in localStorage", () => {
+            persistOAuthClientId(clientId);
+            expect(localStorage.setItem).toHaveBeenCalledWith("mx_oidc_client_id", clientId);
+        });
+    });
+
+    describe("getStoredOAuthClientId()", () => {
+        it("should return clientId from localStorage", () => {
+            localStorage.setItem("mx_oidc_client_id", clientId);
+            expect(getStoredOAuthClientId()).toEqual(clientId);
+            expect(localStorage.getItem).toHaveBeenCalledWith("mx_oidc_client_id");
+        });
+        it("should throw when no clientId in localStorage", () => {
+            expect(() => getStoredOAuthClientId()).toThrow("OAuth client ID not found in storage");
+        });
+    });
+});
diff --git a/apps/web/src/utils/oauth/persistOAuthSettings.ts b/apps/web/src/utils/oauth/persistOAuthSettings.ts
new file mode 100644
index 0000000000..c38ad4f8fe
--- /dev/null
+++ b/apps/web/src/utils/oauth/persistOAuthSettings.ts
@@ -0,0 +1,82 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type OAuth2, type ValidatedAuthMetadata } from "matrix-js-sdk/src/matrix";
+
+import PlatformPeg from "../../PlatformPeg.ts";
+
+const clientIdLocalStorageKey = "mx_oidc_client_id";
+const stateSessionStorageKey = "mx_oauth_state";
+
+/**
+ * Persists OAuth2 clientId in local storage
+ * Only set after successful authentication
+ * @param clientId
+ */
+export const persistOAuthClientId = (clientId: string): void => {
+    localStorage.setItem(clientIdLocalStorageKey, clientId);
+};
+
+/**
+ * Retrieves stored oauth client id from local storage.
+ * The presence of a client ID in storage implies that the user is authenticated via OAuth.
+ * @returns clientId
+ * @throws when clientId is not found in local storage
+ */
+export const getStoredOAuthClientId = (): string => {
+    const clientId = localStorage.getItem(clientIdLocalStorageKey);
+    if (!clientId) {
+        throw new Error("OAuth client ID not found in storage");
+    }
+    return clientId;
+};
+
+type OAuth2Context = ConstructorParameters<typeof OAuth2>[1];
+
+/**
+ * Utility function to get the OAuth parameters needed to construct an OAuth2 instance
+ * @param clientId - the registered OAuth client ID
+ */
+export function getOAuthParams(clientId: string): OAuth2Context {
+    const platform = PlatformPeg.get()!;
+    const redirectUri = platform.getOAuthCallbackUrl().href;
+    return { clientId, redirectUri };
+}
+
+/**
+ * Temporary context for authorization code flow
+ * Persisted via sessionStorage to be recalled when authentication navigates the tab away and back again
+ */
+export interface Context {
+    /** The state string we included in the auth url */
+    state: string;
+    /** The URL of the homeserver the user is logging into */
+    homeserverUrl: string;
+    /** The URL of the identity server the user is using */
+    identityServerUrl: string | undefined;
+    /** The metadata received from {@link MatrixClient.getAuthMetadata} at time of initiating the auth dance */
+    metadata: ValidatedAuthMetadata;
+    /** The context needed for the SDK's OAuth2 to resume the auth flow */
+    authContext: Required<OAuth2Context>;
+}
+
+/**
+ * Retrieve the context of the ongoing authorization code flow from sessionStorage
+ */
+export function loadAuthContext(): Context | null {
+    const value = sessionStorage.getItem(stateSessionStorageKey);
+    return JSON.parse(value!);
+}
+
+/**
+ * Temporary storage for the authorization code flow
+ * @param context - the data to store in sessionStorage
+ */
+export function storeAuthContext(context: Context): void {
+    sessionStorage.setItem(stateSessionStorageKey, JSON.stringify(context));
+}
diff --git a/apps/web/src/utils/oidc/registerClient.ts b/apps/web/src/utils/oauth/registerClient.ts
similarity index 58%
rename from apps/web/src/utils/oidc/registerClient.ts
rename to apps/web/src/utils/oauth/registerClient.ts
index 92b7cf57d0..62ba9aab51 100644
--- a/apps/web/src/utils/oidc/registerClient.ts
+++ b/apps/web/src/utils/oauth/registerClient.ts
@@ -7,43 +7,43 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { logger } from "matrix-js-sdk/src/logger";
-import { registerOidcClient, type OidcClientConfig } from "matrix-js-sdk/src/matrix";
+import { OAuth2, type ValidatedAuthMetadata } from "matrix-js-sdk/src/matrix";
 
 import { type IConfigOptions } from "../../IConfigOptions";
 import PlatformPeg from "../../PlatformPeg";
 
 /**
  * Get the statically configured clientId for the issuer
- * @param issuer delegated auth OIDC issuer
- * @param staticOidcClients static client config from config.json
+ * @param issuer delegated auth OAuth2 issuer
+ * @param staticOAuthClients static client config from config.json
  * @returns clientId if found, otherwise undefined
  */
-const getStaticOidcClientId = (
+const getStaticOAuthClientId = (
     issuer: string,
-    staticOidcClients?: IConfigOptions["oidc_static_clients"],
+    staticOAuthClients?: IConfigOptions["oidc_static_clients"],
 ): string | undefined => {
     // static_oidc_clients are configured with a trailing slash
     const issuerWithTrailingSlash = issuer.endsWith("/") ? issuer : issuer + "/";
-    return staticOidcClients?.[issuerWithTrailingSlash]?.client_id;
+    return staticOAuthClients?.[issuerWithTrailingSlash]?.client_id;
 };
 
 /**
- * Get the clientId for an OIDC OP
+ * Get the clientId for an OAuth2 OP
  * Checks statically configured clientIds first
  * Then attempts dynamic registration with the OP
  * @param delegatedAuthConfig Auth config from ValidatedServerConfig
- * @param staticOidcClients static client config from config.json
+ * @param staticOAuthClients static client config from config.json
  * @returns Promise<string> resolves with clientId
  * @throws if no clientId is found
  */
-export const getOidcClientId = async (
-    delegatedAuthConfig: OidcClientConfig,
-    staticOidcClients?: IConfigOptions["oidc_static_clients"],
+export const getOAuthClientId = async (
+    delegatedAuthConfig: ValidatedAuthMetadata,
+    staticOAuthClients?: IConfigOptions["oidc_static_clients"],
 ): Promise<string> => {
-    const staticClientId = getStaticOidcClientId(delegatedAuthConfig.issuer, staticOidcClients);
+    const staticClientId = getStaticOAuthClientId(delegatedAuthConfig.issuer, staticOAuthClients);
     if (staticClientId) {
         logger.debug(`Using static clientId for issuer ${delegatedAuthConfig.issuer}`);
         return staticClientId;
     }
-    return await registerOidcClient(delegatedAuthConfig, await PlatformPeg.get()!.getOidcClientMetadata());
+    return await OAuth2.registerClient(delegatedAuthConfig, await PlatformPeg.get()!.getOAuthClientMetadata());
 };
diff --git a/apps/web/test/unit-tests/utils/oidc/urls-test.ts b/apps/web/src/utils/oauth/urls.test.ts
similarity index 95%
rename from apps/web/test/unit-tests/utils/oidc/urls-test.ts
rename to apps/web/src/utils/oauth/urls.test.ts
index 072202d0b6..b344622261 100644
--- a/apps/web/test/unit-tests/utils/oidc/urls-test.ts
+++ b/apps/web/src/utils/oauth/urls.test.ts
@@ -5,7 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import { getManageDeviceUrl } from "../../../../src/utils/oidc/urls";
+import { describe, it, expect } from "vitest";
+
+import { getManageDeviceUrl } from "./urls";
 
 describe("OIDC urls", () => {
     const accountManagementEndpoint = "https://auth.com/manage";
diff --git a/apps/web/src/utils/oidc/urls.ts b/apps/web/src/utils/oauth/urls.ts
similarity index 100%
rename from apps/web/src/utils/oidc/urls.ts
rename to apps/web/src/utils/oauth/urls.ts
diff --git a/apps/web/test/unit-tests/utils/objects-test.ts b/apps/web/src/utils/objects.test.ts
similarity index 93%
rename from apps/web/test/unit-tests/utils/objects-test.ts
rename to apps/web/src/utils/objects.test.ts
index 48d5ca84fe..5a909951a7 100644
--- a/apps/web/test/unit-tests/utils/objects-test.ts
+++ b/apps/web/src/utils/objects.test.ts
@@ -6,6 +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 { describe, it, expect } from "vitest";
+
 import {
     objectClone,
     objectDiff,
@@ -13,8 +15,7 @@ import {
     objectHasDiff,
     objectKeyChanges,
     objectShallowClone,
-    objectWithOnly,
-} from "../../../src/utils/objects";
+} from "./objects";
 
 describe("objects", () => {
     describe("objectExcluding", () => {
@@ -28,17 +29,6 @@ describe("objects", () => {
         });
     });
 
-    describe("objectWithOnly", () => {
-        it("should exclusively use the given properties", () => {
-            const input = { hello: "world", test: true };
-            const output = { hello: "world" };
-            const props = ["hello", "doesnotexist"]; // we also make sure it doesn't explode on missing props
-            const result = objectWithOnly(input, <any>props); // any is to test the missing prop
-            expect(result).toBeDefined();
-            expect(result).toMatchObject(output);
-        });
-    });
-
     describe("objectShallowClone", () => {
         it("should create a new object", () => {
             const input = { test: 1 };
diff --git a/apps/web/src/utils/objects.ts b/apps/web/src/utils/objects.ts
index 60bf702404..16b9b6d1ad 100644
--- a/apps/web/src/utils/objects.ts
+++ b/apps/web/src/utils/objects.ts
@@ -30,23 +30,6 @@ export function objectExcluding<O extends object, P extends Array<keyof O>>(a: O
     }, {} as O);
 }
 
-/**
- * Gets a new object which represents the provided object, with only some properties
- * included.
- * @param a The object to clone properties of. Must be defined.
- * @param props The property names to keep.
- * @returns The new object with only the provided properties.
- */
-export function objectWithOnly<O extends object, P extends Array<keyof O>>(a: O, props: P): { [k in P[number]]: O[k] } {
-    const existingProps = Object.keys(a) as (keyof O)[];
-    const diff = arrayDiff(existingProps, props);
-    if (diff.removed.length === 0) {
-        return objectShallowClone(a);
-    } else {
-        return objectExcluding(a, diff.removed) as { [k in P[number]]: O[k] };
-    }
-}
-
 /**
  * Clones an object to a caller-controlled depth. When a propertyCloner is supplied, the
  * object's properties will be passed through it with the return value used as the new
diff --git a/apps/web/src/utils/oidc/TokenRefresher.ts b/apps/web/src/utils/oidc/TokenRefresher.ts
deleted file mode 100644
index 3ee354c998..0000000000
--- a/apps/web/src/utils/oidc/TokenRefresher.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2023 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { OidcTokenRefresher, type AccessTokens } from "matrix-js-sdk/src/matrix";
-import { type IdTokenClaims } from "oidc-client-ts";
-
-import PlatformPeg from "../../PlatformPeg";
-import { persistAccessTokenInStorage, persistRefreshTokenInStorage } from "../tokens/tokens";
-
-/**
- * OidcTokenRefresher that implements token persistence.
- * Stores tokens in the same way as login flow in Lifecycle.
- */
-export class TokenRefresher extends OidcTokenRefresher {
-    public constructor(
-        issuer: string,
-        clientId: string,
-        redirectUri: string,
-        deviceId: string,
-        idTokenClaims: IdTokenClaims,
-        private readonly userId: string,
-    ) {
-        super(issuer, clientId, redirectUri, deviceId, idTokenClaims);
-    }
-
-    public async persistTokens({ accessToken, refreshToken }: AccessTokens): Promise<void> {
-        const pickleKey = (await PlatformPeg.get()?.getPickleKey(this.userId, this.deviceId)) ?? undefined;
-        await persistAccessTokenInStorage(accessToken, pickleKey);
-        await persistRefreshTokenInStorage(refreshToken, pickleKey);
-    }
-}
diff --git a/apps/web/src/utils/oidc/authorize.ts b/apps/web/src/utils/oidc/authorize.ts
deleted file mode 100644
index 18bd910fc1..0000000000
--- a/apps/web/src/utils/oidc/authorize.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2023 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { completeAuthorizationCodeGrant, generateOidcAuthorizationUrl } from "matrix-js-sdk/src/oidc/authorize";
-import { type OidcClientConfig } from "matrix-js-sdk/src/matrix";
-import { secureRandomString } from "matrix-js-sdk/src/randomstring";
-import { type IdTokenClaims } from "oidc-client-ts";
-
-import { OidcClientError } from "./error";
-import PlatformPeg from "../../PlatformPeg";
-import { type URLParams } from "../../vector/url_utils.ts";
-
-/**
- * Start OIDC authorization code flow
- * Generates auth params, stores them in session storage and
- * Navigates to configured authorization endpoint
- * @param delegatedAuthConfig from discovery
- * @param clientId this client's id as registered with configured issuer
- * @param homeserverUrl target homeserver
- * @param identityServerUrl OPTIONAL target identity server
- * @param isRegistration if true will set the prompt to "create"
- * @returns Promise that resolves after we have navigated to auth endpoint
- */
-export const startOidcLogin = async (
-    delegatedAuthConfig: OidcClientConfig,
-    clientId: string,
-    homeserverUrl: string,
-    identityServerUrl?: string,
-    isRegistration?: boolean,
-): Promise<void> => {
-    const redirectUri = PlatformPeg.get()!.getOidcCallbackUrl().href;
-
-    const nonce = secureRandomString(10);
-
-    const prompt = isRegistration ? "create" : undefined;
-
-    const authorizationUrl = await generateOidcAuthorizationUrl({
-        metadata: delegatedAuthConfig,
-        redirectUri,
-        clientId,
-        homeserverUrl,
-        identityServerUrl,
-        nonce,
-        prompt,
-        urlState: PlatformPeg.get()?.getOidcClientState(),
-        responseMode: delegatedAuthConfig.response_modes_supported?.includes("fragment") ? "fragment" : "query",
-    });
-
-    window.location.href = authorizationUrl;
-};
-
-/**
- * Gets `code` and `state` response params
- *
- * @param urlParams - the parameters to read
- * @param responseMode - the response_mode used in the auth request
- * @returns code and state
- * @throws when code and state are not valid strings
- */
-const getCodeAndStateFromParams = (
-    { code, state }: NonNullable<URLParams["oidc_fragment"]>,
-    responseMode: "fragment" | "query",
-): { code: string; state: string } => {
-    if (!code || typeof code !== "string" || !state || typeof state !== "string") {
-        if (responseMode === "fragment") {
-            throw new Error(OidcClientError.InvalidFragmentParameters);
-        } else {
-            throw new Error(OidcClientError.InvalidQueryParameters);
-        }
-    }
-    return { code, state };
-};
-
-type CompleteOidcLoginResponse = {
-    // url of the homeserver selected during login
-    homeserverUrl: string;
-    // identity server url as discovered during login
-    identityServerUrl?: string;
-    // accessToken gained from OIDC token issuer
-    accessToken: string;
-    // refreshToken gained from OIDC token issuer, when falsy token cannot be refreshed
-    refreshToken?: string;
-    // idToken gained from OIDC token issuer
-    idToken?: string;
-    // this client's id as registered with the OIDC issuer
-    clientId: string;
-    // issuer used during authentication
-    issuer: string;
-    // claims of the given access token; used during token refresh to validate new tokens
-    idTokenClaims: IdTokenClaims;
-};
-/**
- * Attempt to complete authorization code flow to get an access token
- * @param urlParams the parameters extracted from the app-load URI.
- * @param responseMode - the response_mode used in the auth request
- * @returns Promise that resolves with a CompleteOidcLoginResponse when login was successful
- * @throws When we failed to get a valid access token
- */
-export const completeOidcLogin = async (
-    urlParams: NonNullable<URLParams["oidc_fragment"]>,
-    responseMode: "fragment" | "query",
-): Promise<CompleteOidcLoginResponse> => {
-    const { code, state } = getCodeAndStateFromParams(urlParams, responseMode);
-    const { homeserverUrl, tokenResponse, idTokenClaims, identityServerUrl, oidcClientSettings } =
-        await completeAuthorizationCodeGrant(code, state, responseMode);
-
-    return {
-        homeserverUrl,
-        identityServerUrl,
-        accessToken: tokenResponse.access_token,
-        refreshToken: tokenResponse.refresh_token,
-        idToken: tokenResponse.id_token,
-        clientId: oidcClientSettings.clientId,
-        issuer: oidcClientSettings.issuer,
-        idTokenClaims,
-    };
-};
diff --git a/apps/web/src/utils/oidc/persistOidcSettings.ts b/apps/web/src/utils/oidc/persistOidcSettings.ts
deleted file mode 100644
index 63d4515869..0000000000
--- a/apps/web/src/utils/oidc/persistOidcSettings.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2023 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { type IdTokenClaims } from "oidc-client-ts";
-import { decodeIdToken } from "matrix-js-sdk/src/matrix";
-
-const clientIdStorageKey = "mx_oidc_client_id";
-const tokenIssuerStorageKey = "mx_oidc_token_issuer";
-const idTokenStorageKey = "mx_oidc_id_token";
-/**
- * @deprecated in favour of using idTokenStorageKey
- */
-const idTokenClaimsStorageKey = "mx_oidc_id_token_claims";
-
-/**
- * Persists oidc clientId and issuer in local storage
- * Only set after successful authentication
- * @param clientId
- * @param issuer
- * @param idToken
- * @param idTokenClaims
- */
-export const persistOidcAuthenticatedSettings = (
-    clientId: string,
-    issuer: string,
-    idToken: string | undefined,
-): void => {
-    localStorage.setItem(clientIdStorageKey, clientId);
-    localStorage.setItem(tokenIssuerStorageKey, issuer);
-    if (idToken) {
-        localStorage.setItem(idTokenStorageKey, idToken);
-    }
-};
-
-/**
- * Retrieve stored oidc issuer from local storage
- * When user has token from OIDC issuer, this will be set
- * @returns issuer or undefined
- */
-export const getStoredOidcTokenIssuer = (): string | undefined => {
-    return localStorage.getItem(tokenIssuerStorageKey) ?? undefined;
-};
-
-/**
- * Retrieves stored oidc client id from local storage
- * @returns clientId
- * @throws when clientId is not found in local storage
- */
-export const getStoredOidcClientId = (): string => {
-    const clientId = localStorage.getItem(clientIdStorageKey);
-    if (!clientId) {
-        throw new Error("Oidc client id not found in storage");
-    }
-    return clientId;
-};
-
-/**
- * Retrieve stored id token claims from stored id token or local storage
- * @returns idTokenClaims or undefined
- */
-export const getStoredOidcIdTokenClaims = (): IdTokenClaims | undefined => {
-    const idToken = getStoredOidcIdToken();
-    if (idToken) {
-        return decodeIdToken(idToken);
-    }
-
-    const idTokenClaims = localStorage.getItem(idTokenClaimsStorageKey);
-    if (!idTokenClaims) {
-        return;
-    }
-    return JSON.parse(idTokenClaims) as IdTokenClaims;
-};
-
-/**
- * Retrieve stored id token from local storage
- * @returns idToken or undefined
- */
-export const getStoredOidcIdToken = (): string | undefined => {
-    return localStorage.getItem(idTokenStorageKey) ?? undefined;
-};
diff --git a/apps/web/test/unit-tests/utils/permalinks/MatrixSchemePermalinkConstructor-test.ts b/apps/web/src/utils/permalinks/MatrixSchemePermalinkConstructor.test.ts
similarity index 77%
rename from apps/web/test/unit-tests/utils/permalinks/MatrixSchemePermalinkConstructor-test.ts
rename to apps/web/src/utils/permalinks/MatrixSchemePermalinkConstructor.test.ts
index 514ff7bdb7..69100af47b 100644
--- a/apps/web/test/unit-tests/utils/permalinks/MatrixSchemePermalinkConstructor-test.ts
+++ b/apps/web/src/utils/permalinks/MatrixSchemePermalinkConstructor.test.ts
@@ -6,8 +6,10 @@ 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 { PermalinkParts } from "../../../../src/utils/permalinks/PermalinkConstructor";
-import MatrixSchemePermalinkConstructor from "../../../../src/utils/permalinks/MatrixSchemePermalinkConstructor";
+import { describe, it, expect } from "vitest";
+
+import { PermalinkParts } from "./PermalinkConstructor";
+import MatrixSchemePermalinkConstructor from "./MatrixSchemePermalinkConstructor";
 
 describe("MatrixSchemePermalinkConstructor", () => {
     const peramlinkConstructor = new MatrixSchemePermalinkConstructor();
diff --git a/apps/web/test/unit-tests/utils/permalinks/MatrixToPermalinkConstructor-test.ts b/apps/web/src/utils/permalinks/MatrixToPermalinkConstructor.test.ts
similarity index 91%
rename from apps/web/test/unit-tests/utils/permalinks/MatrixToPermalinkConstructor-test.ts
rename to apps/web/src/utils/permalinks/MatrixToPermalinkConstructor.test.ts
index 92f005d0d9..160e114184 100644
--- a/apps/web/test/unit-tests/utils/permalinks/MatrixToPermalinkConstructor-test.ts
+++ b/apps/web/src/utils/permalinks/MatrixToPermalinkConstructor.test.ts
@@ -6,8 +6,10 @@ 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 MatrixToPermalinkConstructor from "../../../../src/utils/permalinks/MatrixToPermalinkConstructor";
-import { PermalinkParts } from "../../../../src/utils/permalinks/PermalinkConstructor";
+import { describe, it, expect } from "vitest";
+
+import MatrixToPermalinkConstructor from "./MatrixToPermalinkConstructor";
+import { PermalinkParts } from "./PermalinkConstructor";
 
 describe("MatrixToPermalinkConstructor", () => {
     const peramlinkConstructor = new MatrixToPermalinkConstructor();
diff --git a/apps/web/test/unit-tests/utils/permalinks/Permalinks-test.ts b/apps/web/src/utils/permalinks/Permalinks.test.ts
similarity index 91%
rename from apps/web/test/unit-tests/utils/permalinks/Permalinks-test.ts
rename to apps/web/src/utils/permalinks/Permalinks.test.ts
index 4f96e6c41f..eeaa7fe093 100644
--- a/apps/web/test/unit-tests/utils/permalinks/Permalinks-test.ts
+++ b/apps/web/src/utils/permalinks/Permalinks.test.ts
@@ -7,27 +7,24 @@ 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 EventEmitter } from "events";
+import { vi, describe, it, expect, afterAll, beforeEach } from "vitest";
+import { getMockClientWithEventEmitter } from "test-utils/client";
+
+import { type EventEmitter } from "node:events";
 import { Room, RoomMember, EventType, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 
-import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
-import { PermalinkParts } from "../../../../src/utils/permalinks/PermalinkConstructor";
-import {
-    makeRoomPermalink,
-    makeUserPermalink,
-    parsePermalink,
-    RoomPermalinkCreator,
-} from "../../../../src/utils/permalinks/Permalinks";
-import { type IConfigOptions } from "../../../../src/IConfigOptions";
-import SdkConfig from "../../../../src/SdkConfig";
-import { getMockClientWithEventEmitter } from "../../../test-utils";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import { PermalinkParts } from "./PermalinkConstructor";
+import { makeRoomPermalink, makeUserPermalink, parsePermalink, RoomPermalinkCreator } from "./Permalinks";
+import { type IConfigOptions } from "../../IConfigOptions";
+import SdkConfig from "../../SdkConfig";
 
 describe("Permalinks", function () {
     const userId = "@test:example.com";
     const mockClient = getMockClientWithEventEmitter({
-        getUserId: jest.fn().mockReturnValue(userId),
-        getRoom: jest.fn(),
+        getUserId: vi.fn().mockReturnValue(userId),
+        getRoom: vi.fn(),
     });
     mockClient.credentials = { userId };
 
@@ -72,18 +69,18 @@ describe("Permalinks", function () {
         const stateEvents = serverACL ? [powerLevels, serverACL] : [powerLevels];
         room.currentState.setStateEvents(stateEvents);
 
-        jest.spyOn(room, "getCanonicalAlias").mockReturnValue(null);
-        jest.spyOn(room, "getJoinedMembers").mockReturnValue(members);
-        jest.spyOn(room, "getMember").mockImplementation((userId) => members.find((m) => m.userId === userId) || null);
+        vi.spyOn(room, "getCanonicalAlias").mockReturnValue(null);
+        vi.spyOn(room, "getJoinedMembers").mockReturnValue(members);
+        vi.spyOn(room, "getMember").mockImplementation((userId) => members.find((m) => m.userId === userId) || null);
 
         return room;
     }
     beforeEach(function () {
-        jest.clearAllMocks();
+        vi.clearAllMocks();
     });
 
     afterAll(() => {
-        jest.spyOn(MatrixClientPeg, "get").mockRestore();
+        vi.spyOn(MatrixClientPeg, "get").mockRestore();
     });
 
     it("should not clean up listeners even if start was called multiple times", () => {
@@ -382,10 +379,10 @@ describe("Permalinks", function () {
     });
 
     it("should generate a room permalink for room IDs with some candidate servers", function () {
-        mockClient.getRoom.mockImplementation((roomId: Room["roomId"]) => {
-            return mockRoom(roomId, [
-                makeMemberWithPL(roomId, "@alice:first", 100),
-                makeMemberWithPL(roomId, "@bob:second", 0),
+        mockClient.getRoom.mockImplementation((roomId?: string) => {
+            return mockRoom(roomId!, [
+                makeMemberWithPL(roomId!, "@alice:first", 100),
+                makeMemberWithPL(roomId!, "@bob:second", 0),
             ]);
         });
         const result = makeRoomPermalink(mockClient, "!somewhere:example.org");
@@ -399,10 +396,10 @@ describe("Permalinks", function () {
     });
 
     it("should generate a room permalink for room aliases without candidate servers", function () {
-        mockClient.getRoom.mockImplementation((roomId: Room["roomId"]) => {
-            return mockRoom(roomId, [
-                makeMemberWithPL(roomId, "@alice:first", 100),
-                makeMemberWithPL(roomId, "@bob:second", 0),
+        mockClient.getRoom.mockImplementation((roomId?: string) => {
+            return mockRoom(roomId!, [
+                makeMemberWithPL(roomId!, "@alice:first", 100),
+                makeMemberWithPL(roomId!, "@bob:second", 0),
             ]);
         });
         const result = makeRoomPermalink(mockClient, "#somewhere:example.org");
@@ -416,7 +413,7 @@ describe("Permalinks", function () {
 
     it("should use permalink_prefix for permalinks", function () {
         const sdkConfigGet = SdkConfig.get;
-        jest.spyOn(SdkConfig, "get").mockImplementation((key: keyof IConfigOptions, altCaseName?: string) => {
+        vi.spyOn(SdkConfig, "get").mockImplementation((key: keyof IConfigOptions, altCaseName?: string) => {
             if (key === "permalink_prefix") {
                 return "https://element.fs.tld";
             } else return sdkConfigGet(key, altCaseName);
@@ -440,7 +437,7 @@ describe("Permalinks", function () {
 
         it("should correctly parse event permalink via arguments", () => {
             const result = parsePermalink(
-                "https://matrix.to/#/!room_id:server/$event_id/some_thing_here/foobar" + "?via=m1.org&via=m2.org",
+                "https://matrix.to/#/!room_id:server/$event_id/some_thing_here/foobar?via=m1.org&via=m2.org",
             );
             expect(result?.eventId).toBe("$event_id/some_thing_here/foobar");
             expect(result?.roomIdOrAlias).toBe("!room_id:server");
diff --git a/apps/web/test/unit-tests/utils/promise-test.ts b/apps/web/src/utils/promise.test.ts
similarity index 89%
rename from apps/web/test/unit-tests/utils/promise-test.ts
rename to apps/web/src/utils/promise.test.ts
index 5761c8f881..5004591484 100644
--- a/apps/web/test/unit-tests/utils/promise-test.ts
+++ b/apps/web/src/utils/promise.test.ts
@@ -5,11 +5,13 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { batch } from "../../../src/utils/promise.ts";
+import { vi, describe, it, expect, afterEach } from "vitest";
+
+import { batch } from "./promise.ts";
 
 describe("promise.ts", () => {
     describe("batch", () => {
-        afterEach(() => jest.useRealTimers());
+        afterEach(() => vi.useRealTimers());
 
         it("should batch promises into groups of a given size", async () => {
             const promises = [() => Promise.resolve(1), () => Promise.resolve(2), () => Promise.resolve(3)];
@@ -19,7 +21,7 @@ describe("promise.ts", () => {
         });
 
         it("should wait for the current batch to finish to request the next one", async () => {
-            jest.useFakeTimers();
+            vi.useFakeTimers();
 
             let promise1Called = false;
             const promise1 = () =>
@@ -49,7 +51,7 @@ describe("promise.ts", () => {
             expect(promise2Called).toBe(true);
             expect(promise3Called).toBe(false);
 
-            jest.advanceTimersByTime(11);
+            vi.advanceTimersByTime(11);
             expect(await batchPromise).toEqual([1, 2, 3]);
         });
     });
diff --git a/apps/web/src/utils/pushRules/monitorSyncedPushRules.ts b/apps/web/src/utils/pushRules/monitorSyncedPushRules.ts
index 0e9620fe13..72c939a1e2 100644
--- a/apps/web/src/utils/pushRules/monitorSyncedPushRules.ts
+++ b/apps/web/src/utils/pushRules/monitorSyncedPushRules.ts
@@ -68,7 +68,6 @@ const monitorSyncedRule = async (
     if (outOfSyncRules.length) {
         await updateExistingPushRulesWithActions(
             matrixClient,
-            // eslint-disable-next-line camelcase, @typescript-eslint/naming-convention
             outOfSyncRules.map(({ rule_id }) => rule_id),
             primaryRule.enabled ? primaryRule.actions : undefined,
         );
diff --git a/apps/web/test/unit-tests/utils/room/canInviteTo-test.ts b/apps/web/src/utils/room/canInviteTo.test.ts
similarity index 64%
rename from apps/web/test/unit-tests/utils/room/canInviteTo-test.ts
rename to apps/web/src/utils/room/canInviteTo.test.ts
index 2340c667dd..b16fc52ac4 100644
--- a/apps/web/test/unit-tests/utils/room/canInviteTo-test.ts
+++ b/apps/web/src/utils/room/canInviteTo.test.ts
@@ -6,22 +6,24 @@ 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 { mocked } from "jest-mock";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
 import { JoinRule, Room } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
+import { getMockClientWithEventEmitter, mockClientMethodsUser } from "test-utils";
 
-import { shouldShowComponent } from "../../../../src/customisations/helpers/UIComponents";
-import { UIComponent } from "../../../../src/settings/UIFeature";
-import { canInviteTo } from "../../../../src/utils/room/canInviteTo";
-import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../test-utils";
+import { shouldShowComponent } from "../../customisations/helpers/UIComponents";
+import { UIComponent } from "../../settings/UIFeature";
+import { canInviteTo } from "./canInviteTo";
 
-jest.mock("../../../../src/customisations/helpers/UIComponents", () => ({
-    shouldShowComponent: jest.fn(),
+vi.mock("../../customisations/helpers/UIComponents", () => ({
+    shouldShowComponent: vi.fn(),
 }));
 
 describe("canInviteTo()", () => {
     afterEach(() => {
-        jest.restoreAllMocks();
+        vi.restoreAllMocks();
     });
 
     const userId = "@alice:server.org";
@@ -32,14 +34,14 @@ describe("canInviteTo()", () => {
             ...mockClientMethodsUser(userId),
         });
         const room = new Room(roomId, client, userId);
-        jest.spyOn(room, "getMyMembership").mockReturnValue(KnownMembership.Join);
-        jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Public);
-        jest.spyOn(room, "canInvite").mockReturnValue(true);
+        vi.spyOn(room, "getMyMembership").mockReturnValue(KnownMembership.Join);
+        vi.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Public);
+        vi.spyOn(room, "canInvite").mockReturnValue(true);
         return room;
     };
 
     beforeEach(() => {
-        mocked(shouldShowComponent).mockReturnValue(true);
+        vi.mocked(shouldShowComponent).mockReturnValue(true);
     });
 
     describe("when user has permissions to issue an invite for this room", () => {
@@ -47,14 +49,14 @@ describe("canInviteTo()", () => {
 
         it("should return false when current user membership is not joined", () => {
             const room = makeRoom();
-            jest.spyOn(room, "getMyMembership").mockReturnValue(KnownMembership.Invite);
+            vi.spyOn(room, "getMyMembership").mockReturnValue(KnownMembership.Invite);
 
             expect(canInviteTo(room)).toEqual(false);
         });
 
         it("should return false when UIComponent.InviteUsers customisation hides invite", () => {
             const room = makeRoom();
-            mocked(shouldShowComponent).mockReturnValue(false);
+            vi.mocked(shouldShowComponent).mockReturnValue(false);
 
             expect(canInviteTo(room)).toEqual(false);
             expect(shouldShowComponent).toHaveBeenCalledWith(UIComponent.InviteUsers);
@@ -72,16 +74,16 @@ describe("canInviteTo()", () => {
 
         it("should return false when room is a private space", () => {
             const room = makeRoom();
-            jest.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Invite);
-            jest.spyOn(room, "isSpaceRoom").mockReturnValue(true);
-            jest.spyOn(room, "canInvite").mockReturnValue(false);
+            vi.spyOn(room, "getJoinRule").mockReturnValue(JoinRule.Invite);
+            vi.spyOn(room, "isSpaceRoom").mockReturnValue(true);
+            vi.spyOn(room, "canInvite").mockReturnValue(false);
 
             expect(canInviteTo(room)).toEqual(false);
         });
 
         it("should return false when room is just a room", () => {
             const room = makeRoom();
-            jest.spyOn(room, "canInvite").mockReturnValue(false);
+            vi.spyOn(room, "canInvite").mockReturnValue(false);
 
             expect(canInviteTo(room)).toEqual(false);
         });
@@ -89,8 +91,8 @@ describe("canInviteTo()", () => {
         it("should return true when room is a public space", () => {
             const room = makeRoom();
             // default join rule is public
-            jest.spyOn(room, "isSpaceRoom").mockReturnValue(true);
-            jest.spyOn(room, "canInvite").mockReturnValue(false);
+            vi.spyOn(room, "isSpaceRoom").mockReturnValue(true);
+            vi.spyOn(room, "canInvite").mockReturnValue(false);
 
             expect(canInviteTo(room)).toEqual(true);
         });
diff --git a/apps/web/test/unit-tests/utils/room/getJoinedNonFunctionalMembers-test.ts b/apps/web/src/utils/room/getJoinedNonFunctionalMembers.test.ts
similarity index 66%
rename from apps/web/test/unit-tests/utils/room/getJoinedNonFunctionalMembers-test.ts
rename to apps/web/src/utils/room/getJoinedNonFunctionalMembers.test.ts
index 1c397e143e..475e0ad590 100644
--- a/apps/web/test/unit-tests/utils/room/getJoinedNonFunctionalMembers-test.ts
+++ b/apps/web/src/utils/room/getJoinedNonFunctionalMembers.test.ts
@@ -6,14 +6,14 @@ 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 { mocked } from "jest-mock";
+import { vi, describe, it, expect, beforeEach } from "vitest";
 import { type MatrixClient, Room, RoomMember } from "matrix-js-sdk/src/matrix";
 
-import { getFunctionalMembers } from "../../../../src/utils/room/getFunctionalMembers";
-import { getJoinedNonFunctionalMembers } from "../../../../src/utils/room/getJoinedNonFunctionalMembers";
+import { getFunctionalMembers } from "./getFunctionalMembers";
+import { getJoinedNonFunctionalMembers } from "./getJoinedNonFunctionalMembers";
 
-jest.mock("../../../../src/utils/room/getFunctionalMembers", () => ({
-    getFunctionalMembers: jest.fn(),
+vi.mock("./getFunctionalMembers", () => ({
+    getFunctionalMembers: vi.fn(),
 }));
 
 describe("getJoinedNonFunctionalMembers", () => {
@@ -23,7 +23,7 @@ describe("getJoinedNonFunctionalMembers", () => {
 
     beforeEach(() => {
         room = new Room("!room:example.com", {} as unknown as MatrixClient, "@user:example.com");
-        room.getJoinedMembers = jest.fn();
+        room.getJoinedMembers = vi.fn();
 
         roomMember1 = new RoomMember(room.roomId, "@user1:example.com");
         roomMember2 = new RoomMember(room.roomId, "@user2:example.com");
@@ -31,8 +31,8 @@ describe("getJoinedNonFunctionalMembers", () => {
 
     describe("if there are no members", () => {
         beforeEach(() => {
-            mocked(room.getJoinedMembers).mockReturnValue([]);
-            mocked(getFunctionalMembers).mockReturnValue([]);
+            vi.mocked(room.getJoinedMembers).mockReturnValue([]);
+            vi.mocked(getFunctionalMembers).mockReturnValue([]);
         });
 
         it("should return an empty list", () => {
@@ -42,8 +42,8 @@ describe("getJoinedNonFunctionalMembers", () => {
 
     describe("if there are only regular room members", () => {
         beforeEach(() => {
-            mocked(room.getJoinedMembers).mockReturnValue([roomMember1, roomMember2]);
-            mocked(getFunctionalMembers).mockReturnValue([]);
+            vi.mocked(room.getJoinedMembers).mockReturnValue([roomMember1, roomMember2]);
+            vi.mocked(getFunctionalMembers).mockReturnValue([]);
         });
 
         it("should return the room members", () => {
@@ -55,8 +55,8 @@ describe("getJoinedNonFunctionalMembers", () => {
 
     describe("if there are only functional room members", () => {
         beforeEach(() => {
-            mocked(room.getJoinedMembers).mockReturnValue([]);
-            mocked(getFunctionalMembers).mockReturnValue(["@functional:example.com"]);
+            vi.mocked(room.getJoinedMembers).mockReturnValue([]);
+            vi.mocked(getFunctionalMembers).mockReturnValue(["@functional:example.com"]);
         });
 
         it("should return an empty list", () => {
@@ -66,8 +66,8 @@ describe("getJoinedNonFunctionalMembers", () => {
 
     describe("if there are some functional room members", () => {
         beforeEach(() => {
-            mocked(room.getJoinedMembers).mockReturnValue([roomMember1, roomMember2]);
-            mocked(getFunctionalMembers).mockReturnValue([roomMember1.userId]);
+            vi.mocked(room.getJoinedMembers).mockReturnValue([roomMember1, roomMember2]);
+            vi.mocked(getFunctionalMembers).mockReturnValue([roomMember1.userId]);
         });
 
         it("should only return the non-functional members", () => {
diff --git a/apps/web/test/unit-tests/utils/room/getRoomFunctionalMembers-test.ts b/apps/web/src/utils/room/getRoomFunctionalMembers.test.ts
similarity index 89%
rename from apps/web/test/unit-tests/utils/room/getRoomFunctionalMembers-test.ts
rename to apps/web/src/utils/room/getRoomFunctionalMembers.test.ts
index 4f910f9283..1344323cee 100644
--- a/apps/web/test/unit-tests/utils/room/getRoomFunctionalMembers-test.ts
+++ b/apps/web/src/utils/room/getRoomFunctionalMembers.test.ts
@@ -6,10 +6,13 @@ 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 { Room, UNSTABLE_ELEMENT_FUNCTIONAL_USERS } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import { getFunctionalMembers } from "../../../../src/utils/room/getFunctionalMembers";
-import { createTestClient, mkEvent } from "../../../test-utils";
+import { describe, it, expect } from "vitest";
+import { Room, UNSTABLE_ELEMENT_FUNCTIONAL_USERS } from "matrix-js-sdk/src/matrix";
+import { createTestClient, mkEvent } from "test-utils";
+
+import { getFunctionalMembers } from "./getFunctionalMembers";
 
 describe("getRoomFunctionalMembers", () => {
     const client = createTestClient();
diff --git a/apps/web/src/utils/room/getSectionTagForRoom.test.ts b/apps/web/src/utils/room/getSectionTagForRoom.test.ts
new file mode 100644
index 0000000000..11158c5588
--- /dev/null
+++ b/apps/web/src/utils/room/getSectionTagForRoom.test.ts
@@ -0,0 +1,54 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect } from "vitest";
+import { type Room } from "matrix-js-sdk/src/matrix";
+
+import { DefaultTagID } from "../../stores/room-list-v3/skip-list/tag";
+import { CUSTOM_SECTION_TAG_PREFIX } from "../../stores/room-list-v3/section";
+import { getSectionTagForRoom } from "./getSectionTagForRoom";
+import { getTagsForRoom } from "./getTagsForRoom";
+
+vi.mock("./getTagsForRoom");
+
+const mockGetTagsForRoom = vi.mocked(getTagsForRoom);
+
+describe("getSectionTagForRoom", () => {
+    const room = {} as Room;
+
+    it("should return null when room has no tags", () => {
+        mockGetTagsForRoom.mockReturnValue([]);
+        expect(getSectionTagForRoom(room)).toBeNull();
+    });
+
+    it("should return null when room only has a non-section tag", () => {
+        mockGetTagsForRoom.mockReturnValue([DefaultTagID.Untagged]);
+        expect(getSectionTagForRoom(room)).toBeNull();
+    });
+
+    it.each([DefaultTagID.Favourite, DefaultTagID.LowPriority, `${CUSTOM_SECTION_TAG_PREFIX}abc-123`])(
+        "should return section tag %s when present",
+        (tag) => {
+            mockGetTagsForRoom.mockReturnValue([tag]);
+            expect(getSectionTagForRoom(room)).toBe(tag);
+        },
+    );
+
+    it("should return the first section tag when multiple are present", () => {
+        const customTag = `${CUSTOM_SECTION_TAG_PREFIX}abc-123`;
+        mockGetTagsForRoom.mockReturnValue([DefaultTagID.Favourite, customTag]);
+        expect(getSectionTagForRoom(room)).toBe(DefaultTagID.Favourite);
+    });
+
+    it("should ignore non-section tags and return the section tag", () => {
+        const customTag = `${CUSTOM_SECTION_TAG_PREFIX}abc-123`;
+        mockGetTagsForRoom.mockReturnValue([DefaultTagID.Untagged, customTag]);
+        expect(getSectionTagForRoom(room)).toBe(customTag);
+    });
+});
diff --git a/apps/web/src/utils/room/getSectionTagForRoom.ts b/apps/web/src/utils/room/getSectionTagForRoom.ts
new file mode 100644
index 0000000000..9dd59fd646
--- /dev/null
+++ b/apps/web/src/utils/room/getSectionTagForRoom.ts
@@ -0,0 +1,21 @@
+/*
+ * Copyright 2026 Element Creations 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 Room } from "matrix-js-sdk/src/matrix";
+
+import { type TagID } from "../../stores/room-list-v3/skip-list/tag";
+import { getTagsForRoom } from "./getTagsForRoom";
+import { isSectionTag } from "../../stores/room-list-v3/section";
+
+/**
+ * Get the section tag for a given room.
+ * @param room The room to get the section tag for.
+ * @returns The section tag ID or null if none found.
+ */
+export function getSectionTagForRoom(room: Room): TagID | null {
+    return getTagsForRoom(room).find((t) => isSectionTag(t)) ?? null;
+}
diff --git a/apps/web/test/unit-tests/utils/room/getTagsForRoom-test.ts b/apps/web/src/utils/room/getTagsForRoom.test.ts
similarity index 69%
rename from apps/web/test/unit-tests/utils/room/getTagsForRoom-test.ts
rename to apps/web/src/utils/room/getTagsForRoom.test.ts
index bec448834a..f17e573ee1 100644
--- a/apps/web/test/unit-tests/utils/room/getTagsForRoom-test.ts
+++ b/apps/web/src/utils/room/getTagsForRoom.test.ts
@@ -5,14 +5,16 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach } from "vitest";
 import { JoinRule, type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
-import { mocked } from "jest-mock";
+import { createTestClient, mkRoom } from "test-utils";
 
-import { createTestClient, mkRoom } from "../../../test-utils";
-import { DefaultTagID } from "../../../../src/stores/room-list-v3/skip-list/tag";
-import { getTagsForRoom } from "../../../../src/utils/room/getTagsForRoom";
-import DMRoomMap from "../../../../src/utils/DMRoomMap";
+import { DefaultTagID } from "../../stores/room-list-v3/skip-list/tag";
+import { getTagsForRoom } from "./getTagsForRoom";
+import DMRoomMap from "../DMRoomMap";
 
 describe("getTagsForRoom", () => {
     let client: MatrixClient;
@@ -23,21 +25,21 @@ describe("getTagsForRoom", () => {
         rooms = [];
 
         const dmRoomMap = {
-            getUserIdForRoomId: jest.fn().mockReturnValue(undefined),
+            getUserIdForRoomId: vi.fn().mockReturnValue(undefined),
         } as unknown as DMRoomMap;
         DMRoomMap.setShared(dmRoomMap);
     });
 
     function makeRoom(roomId: string): Room {
         mkRoom(client, roomId, rooms);
-        mocked(client).getRoom.mockImplementation((id) => rooms.find((r) => r.roomId === id) ?? null);
-        mocked(client).getRooms.mockImplementation(() => rooms);
+        vi.mocked(client).getRoom.mockImplementation((id) => rooms.find((r) => r.roomId === id) ?? null);
+        vi.mocked(client).getRooms.mockImplementation(() => rooms);
         return client.getRoom(roomId)!;
     }
 
     it("should return [Invite] for a room where the user is invited", () => {
         const room = makeRoom("!invited:server");
-        (room.getMyMembership as jest.Mock).mockReturnValue(KnownMembership.Invite);
+        vi.mocked(room.getMyMembership).mockReturnValue(KnownMembership.Invite);
 
         const tags = getTagsForRoom(room);
         expect(tags).toEqual([DefaultTagID.Invite]);
@@ -47,7 +49,7 @@ describe("getTagsForRoom", () => {
         "should return [Archived] for a room where the user has %s",
         (membership) => {
             const room = makeRoom(`!${membership.toLowerCase()}:server`);
-            (room.getMyMembership as jest.Mock).mockReturnValue(membership);
+            vi.mocked(room.getMyMembership).mockReturnValue(membership);
 
             const tags = getTagsForRoom(room);
             expect(tags).toEqual([DefaultTagID.Archived]);
@@ -58,7 +60,7 @@ describe("getTagsForRoom", () => {
         describe("with no user-defined tags and not a DM", () => {
             it("should return [Untagged] when the room has no tags and is not a DM", () => {
                 const room = makeRoom("!plain:server");
-                (room.getMyMembership as jest.Mock).mockReturnValue(KnownMembership.Join);
+                vi.mocked(room.getMyMembership).mockReturnValue(KnownMembership.Join);
                 (room as any).tags = {};
 
                 const tags = getTagsForRoom(room);
@@ -68,10 +70,10 @@ describe("getTagsForRoom", () => {
 
         it("should return [DM] when the room is a DM", () => {
             const room = makeRoom("!dm:server");
-            (room.getMyMembership as jest.Mock).mockReturnValue(KnownMembership.Join);
+            vi.mocked(room.getMyMembership).mockReturnValue(KnownMembership.Join);
             (room as any).tags = {};
 
-            mocked(DMRoomMap.shared().getUserIdForRoomId as jest.Mock).mockReturnValue("@alice:server");
+            vi.mocked(DMRoomMap.shared().getUserIdForRoomId).mockReturnValue("@alice:server");
 
             const tags = getTagsForRoom(room);
             expect(tags).toContain(DefaultTagID.DM);
@@ -81,7 +83,7 @@ describe("getTagsForRoom", () => {
         describe("rooms with user-defined tags", () => {
             it("should return the user-defined tags", () => {
                 const room = makeRoom("!tagged:server");
-                (room.getMyMembership as jest.Mock).mockReturnValue(KnownMembership.Join);
+                vi.mocked(room.getMyMembership).mockReturnValue(KnownMembership.Join);
                 (room as any).tags = { "m.favourite": {}, "u.alice": {} };
 
                 const tags = getTagsForRoom(room);
@@ -92,11 +94,11 @@ describe("getTagsForRoom", () => {
 
             it("should not check DM status when user-defined tags are already present", () => {
                 const room = makeRoom("!tagged-dm:server");
-                (room.getMyMembership as jest.Mock).mockReturnValue(KnownMembership.Join);
+                vi.mocked(room.getMyMembership).mockReturnValue(KnownMembership.Join);
                 (room as any).tags = { "m.lowpriority": {} };
 
                 // Even if the room is a DM, user-defined tags take priority
-                mocked(DMRoomMap.shared().getUserIdForRoomId as jest.Mock).mockReturnValue("@alice:server");
+                vi.mocked(DMRoomMap.shared().getUserIdForRoomId).mockReturnValue("@alice:server");
 
                 const tags = getTagsForRoom(room);
                 expect(tags).toContain("m.lowpriority");
@@ -110,9 +112,9 @@ describe("getTagsForRoom", () => {
             "should include Conference tag for a call room with %s join rule",
             (joinRule) => {
                 const room = makeRoom(`!call:${joinRule}:server`);
-                (room.getMyMembership as jest.Mock).mockReturnValue(KnownMembership.Join);
-                (room.isCallRoom as jest.Mock).mockReturnValue(true);
-                (room.getJoinRule as jest.Mock).mockReturnValue(joinRule);
+                vi.mocked(room.getMyMembership).mockReturnValue(KnownMembership.Join);
+                vi.mocked(room.isCallRoom).mockReturnValue(true);
+                vi.mocked(room.getJoinRule).mockReturnValue(joinRule);
 
                 const tags = getTagsForRoom(room);
                 expect(tags).toContain(DefaultTagID.Conference);
@@ -123,9 +125,9 @@ describe("getTagsForRoom", () => {
             "should not include Conference tag for a call room with %s join rule",
             (joinRule) => {
                 const room = makeRoom(`!call:${joinRule}:server`);
-                (room.getMyMembership as jest.Mock).mockReturnValue(KnownMembership.Join);
-                (room.isCallRoom as jest.Mock).mockReturnValue(true);
-                (room.getJoinRule as jest.Mock).mockReturnValue(joinRule);
+                vi.mocked(room.getMyMembership).mockReturnValue(KnownMembership.Join);
+                vi.mocked(room.isCallRoom).mockReturnValue(true);
+                vi.mocked(room.getJoinRule).mockReturnValue(joinRule);
 
                 const tags = getTagsForRoom(room);
                 expect(tags).not.toContain(DefaultTagID.Conference);
@@ -134,10 +136,10 @@ describe("getTagsForRoom", () => {
 
         it("should include Conference alongside Untagged for a public call room with no other tags", () => {
             const room = makeRoom("!callPublicPlain:server");
-            (room.getMyMembership as jest.Mock).mockReturnValue(KnownMembership.Join);
+            vi.mocked(room.getMyMembership).mockReturnValue(KnownMembership.Join);
             (room as any).tags = {};
-            (room.isCallRoom as jest.Mock).mockReturnValue(true);
-            (room.getJoinRule as jest.Mock).mockReturnValue(JoinRule.Public);
+            vi.mocked(room.isCallRoom).mockReturnValue(true);
+            vi.mocked(room.getJoinRule).mockReturnValue(JoinRule.Public);
 
             const tags = getTagsForRoom(room);
             // Conference is added to the tag list before the Untagged fallback check,
diff --git a/apps/web/test/unit-tests/utils/room/inviteToRoom-test.ts b/apps/web/src/utils/room/inviteToRoom.test.ts
similarity index 70%
rename from apps/web/test/unit-tests/utils/room/inviteToRoom-test.ts
rename to apps/web/src/utils/room/inviteToRoom.test.ts
index bee74e2d1b..50cf09e826 100644
--- a/apps/web/test/unit-tests/utils/room/inviteToRoom-test.ts
+++ b/apps/web/src/utils/room/inviteToRoom.test.ts
@@ -6,11 +6,14 @@ 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 { Room } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
-import { inviteToRoom } from "../../../../src/utils/room/inviteToRoom";
-import { getMockClientWithEventEmitter } from "../../../test-utils";
+import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
+import { Room } from "matrix-js-sdk/src/matrix";
+import { getMockClientWithEventEmitter } from "test-utils";
+
+import defaultDispatcher from "../../dispatcher/dispatcher";
+import { inviteToRoom } from "./inviteToRoom";
 
 describe("inviteToRoom()", () => {
     const userId = "@alice:server.org";
@@ -18,7 +21,7 @@ describe("inviteToRoom()", () => {
 
     const makeRoom = (): Room => {
         const client = getMockClientWithEventEmitter({
-            isGuest: jest.fn(),
+            isGuest: vi.fn(),
         });
         const room = new Room(roomId, client, userId);
         return room;
@@ -26,17 +29,17 @@ describe("inviteToRoom()", () => {
 
     beforeEach(() => {
         // stub
-        jest.spyOn(defaultDispatcher, "dispatch").mockImplementation(() => {});
+        vi.spyOn(defaultDispatcher, "dispatch").mockImplementation(() => {});
     });
 
     afterEach(() => {
-        jest.restoreAllMocks();
+        vi.restoreAllMocks();
     });
 
     it("requires registration when a guest tries to invite to a room", () => {
         const room = makeRoom();
 
-        jest.spyOn(room.client, "isGuest").mockReturnValue(true);
+        vi.spyOn(room.client, "isGuest").mockReturnValue(true);
 
         inviteToRoom(room);
 
@@ -47,7 +50,7 @@ describe("inviteToRoom()", () => {
     it("opens the room inviter", () => {
         const room = makeRoom();
 
-        jest.spyOn(room.client, "isGuest").mockReturnValue(false);
+        vi.spyOn(room.client, "isGuest").mockReturnValue(false);
 
         inviteToRoom(room);
 
diff --git a/apps/web/src/utils/room/placeCall.ts b/apps/web/src/utils/room/placeCall.ts
index 6c046116ce..4991ba6566 100644
--- a/apps/web/src/utils/room/placeCall.ts
+++ b/apps/web/src/utils/room/placeCall.ts
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import { type CallType } from "matrix-js-sdk/src/webrtc/call";
 import { type Room } from "matrix-js-sdk/src/matrix";
 
-import LegacyCallHandler from "../../LegacyCallHandler";
+import type LegacyCallHandler from "../../LegacyCallHandler";
 import { getPlatformCallTypeProps, PlatformCallType } from "../../hooks/room/useRoomCall";
 import defaultDispatcher from "../../dispatcher/dispatcher";
 import { type ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
@@ -24,6 +24,7 @@ import PosthogTrackers from "../../PosthogTrackers";
  * @param skipLobby Has the user indicated they would like to skip the lobby. Otherwise, defer to platform defaults.
  */
 export const placeCall = async (
+    legacyCallHandler: LegacyCallHandler,
     room: Room,
     callType: CallType,
     platformCallType: PlatformCallType,
@@ -34,7 +35,7 @@ export const placeCall = async (
     PosthogTrackers.trackInteraction(analyticsName);
 
     if (platformCallType == PlatformCallType.LegacyCall || platformCallType == PlatformCallType.JitsiCall) {
-        await LegacyCallHandler.instance.placeCall(room.roomId, callType);
+        await legacyCallHandler.placeCall(room.roomId, callType);
     } else if (platformCallType == PlatformCallType.ElementCall) {
         defaultDispatcher.dispatch<ViewRoomPayload>({
             action: Action.ViewRoom,
diff --git a/apps/web/test/unit-tests/utils/room/shouldEncryptRoomWithSingle3rdPartyInvite-test.ts b/apps/web/src/utils/room/shouldEncryptRoomWithSingle3rdPartyInvite.test.ts
similarity index 81%
rename from apps/web/test/unit-tests/utils/room/shouldEncryptRoomWithSingle3rdPartyInvite-test.ts
rename to apps/web/src/utils/room/shouldEncryptRoomWithSingle3rdPartyInvite.test.ts
index 8e3de54896..80ee961a2a 100644
--- a/apps/web/test/unit-tests/utils/room/shouldEncryptRoomWithSingle3rdPartyInvite-test.ts
+++ b/apps/web/src/utils/room/shouldEncryptRoomWithSingle3rdPartyInvite.test.ts
@@ -6,16 +6,18 @@ 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 { mocked } from "jest-mock";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeAll, beforeEach } from "vitest";
 import { type MatrixClient, type MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+import { mkRoomMemberJoinEvent, mkThirdPartyInviteEvent, stubClient } from "test-utils";
 
-import DMRoomMap from "../../../../src/utils/DMRoomMap";
-import { shouldEncryptRoomWithSingle3rdPartyInvite } from "../../../../src/utils/room/shouldEncryptRoomWithSingle3rdPartyInvite";
-import { privateShouldBeEncrypted } from "../../../../src/utils/rooms";
-import { mkRoomMemberJoinEvent, mkThirdPartyInviteEvent, stubClient } from "../../../test-utils";
+import DMRoomMap from "../DMRoomMap";
+import { shouldEncryptRoomWithSingle3rdPartyInvite } from "./shouldEncryptRoomWithSingle3rdPartyInvite";
+import { privateShouldBeEncrypted } from "../rooms";
 
-jest.mock("../../../../src/utils/rooms", () => ({
-    privateShouldBeEncrypted: jest.fn(),
+vi.mock("../rooms", () => ({
+    privateShouldBeEncrypted: vi.fn(),
 }));
 
 describe("shouldEncryptRoomWithSingle3rdPartyInvite", () => {
@@ -40,12 +42,12 @@ describe("shouldEncryptRoomWithSingle3rdPartyInvite", () => {
             mkRoomMemberJoinEvent(client.getSafeUserId(), roomWithOneThirdPartyInvite.roomId),
             thirdPartyInviteEvent,
         ]);
-        jest.spyOn(DMRoomMap.shared(), "getRoomIds").mockReturnValue(new Set([roomWithOneThirdPartyInvite.roomId]));
+        vi.spyOn(DMRoomMap.shared(), "getRoomIds").mockReturnValue(new Set([roomWithOneThirdPartyInvite.roomId]));
     });
 
     describe("when well-known promotes encryption", () => {
         beforeEach(() => {
-            mocked(privateShouldBeEncrypted).mockReturnValue(true);
+            vi.mocked(privateShouldBeEncrypted).mockReturnValue(true);
         });
 
         it("should return true + invite event for a DM room with one third-party invite", () => {
@@ -56,7 +58,7 @@ describe("shouldEncryptRoomWithSingle3rdPartyInvite", () => {
         });
 
         it("should return false for a non-DM room with one third-party invite", () => {
-            mocked(DMRoomMap.shared().getRoomIds).mockReturnValue(new Set());
+            vi.mocked(DMRoomMap.shared().getRoomIds).mockReturnValue(new Set());
 
             expect(shouldEncryptRoomWithSingle3rdPartyInvite(roomWithOneThirdPartyInvite)).toEqual({
                 shouldEncrypt: false,
@@ -90,7 +92,7 @@ describe("shouldEncryptRoomWithSingle3rdPartyInvite", () => {
 
     describe("when well-known does not promote encryption", () => {
         beforeEach(() => {
-            mocked(privateShouldBeEncrypted).mockReturnValue(false);
+            vi.mocked(privateShouldBeEncrypted).mockReturnValue(false);
         });
 
         it("should return false for a DM room with one third-party invite", () => {
diff --git a/apps/web/src/utils/room/sortRoomsByRecency.test.ts b/apps/web/src/utils/room/sortRoomsByRecency.test.ts
new file mode 100644
index 0000000000..6480682cce
--- /dev/null
+++ b/apps/web/src/utils/room/sortRoomsByRecency.test.ts
@@ -0,0 +1,60 @@
+/*
+Copyright 2026 Element Creations 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.
+*/
+
+// @vitest-environment happy-dom
+
+import { describe, it, expect, beforeEach } from "vitest";
+import { type Room } from "matrix-js-sdk/src/matrix";
+import { createTestClient } from "test-utils";
+
+import { getMockedRooms } from "../../../test/unit-tests/stores/room-list-v3/skip-list/getMockedRooms";
+import { DefaultTagID } from "../../stores/room-list-v3/skip-list/tag";
+import { compareRoomsByRecency, sortRoomsByRecency } from "./sortRoomsByRecency";
+
+describe("sortRoomsByRecency", () => {
+    let userId: string;
+    let rooms: Room[];
+
+    beforeEach(() => {
+        const client = createTestClient();
+        userId = client.getSafeUserId();
+        rooms = getMockedRooms(client);
+    });
+
+    describe("sortRoomsByRecency", () => {
+        it("sorts an arbitrary list by recency without mutating the input", () => {
+            const input = [rooms[0], rooms[5], rooms[2]];
+            const inputCopy = [...input];
+
+            const sorted = sortRoomsByRecency(input, userId);
+
+            // ts: room5 (6) > room2 (3) > room0 (1)
+            expect(sorted).toEqual([rooms[5], rooms[2], rooms[0]]);
+            // The input array is not mutated.
+            expect(input).toEqual(inputCopy);
+        });
+
+        it("does not move muted or low-priority rooms (pure recency)", () => {
+            const recent = rooms[99]; // highest ts
+            recent.tags = { [DefaultTagID.LowPriority]: { order: 0 } };
+
+            const sorted = sortRoomsByRecency([rooms[0], rooms[50], recent], userId);
+
+            // A pure recency sort keeps the most recent room first even though it is
+            // low priority (the full RecencySorter would sink it).
+            expect(sorted[0]).toBe(recent);
+        });
+    });
+
+    describe("compareRoomsByRecency", () => {
+        it("orders the more recent room first", () => {
+            // rooms[10] (ts 11) is more recent than rooms[3] (ts 4)
+            expect(compareRoomsByRecency(rooms[10], rooms[3], userId)).toBeLessThan(0);
+            expect(compareRoomsByRecency(rooms[3], rooms[10], userId)).toBeGreaterThan(0);
+        });
+    });
+});
diff --git a/apps/web/src/utils/room/sortRoomsByRecency.ts b/apps/web/src/utils/room/sortRoomsByRecency.ts
new file mode 100644
index 0000000000..682f2989b7
--- /dev/null
+++ b/apps/web/src/utils/room/sortRoomsByRecency.ts
@@ -0,0 +1,45 @@
+/*
+Copyright 2026 Element Creations 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 { Room } from "matrix-js-sdk/src/matrix";
+import { getLastTimestamp } from "../../stores/room-list-v3/skip-list/sorters/utils/getLastTimestamp";
+
+/**
+ * Sort an arbitrary list of rooms by recency (most recent activity first).
+ *
+ * Unlike the main room list sorting, this is a pure recency sort: muted and
+ * low-priority rooms are NOT moved to the bottom. The provided array is not
+ * mutated; a sorted copy is returned. The given list is sorted as-is and is
+ * not filtered by the active space.
+ * @param rooms The rooms to sort.
+ * @param userId The mxId of the current user.
+ */
+export function sortRoomsByRecency(rooms: Room[], userId: string): Room[] {
+    const cache = new Map<string, number>();
+    const ts = (room: Room): number => {
+        let value = cache.get(room.roomId);
+        if (value === undefined) {
+            value = getLastTimestamp(room, userId);
+            cache.set(room.roomId, value);
+        }
+        return value;
+    };
+    return [...rooms].sort((a, b) => ts(b) - ts(a));
+}
+
+/**
+ * Compare two rooms by recency, most recent activity first.
+ *
+ * Intended for sorting mixed result sets where rooms need to be ordered
+ * relative to each other (e.g. spotlight search results).
+ * @param roomA The first room.
+ * @param roomB The second room.
+ * @param userId The mxId of the current user.
+ */
+export function compareRoomsByRecency(roomA: Room, roomB: Room, userId: string): number {
+    return getLastTimestamp(roomB, userId) - getLastTimestamp(roomA, userId);
+}
diff --git a/apps/web/test/unit-tests/utils/room/tagRoom-test.ts b/apps/web/src/utils/room/tagRoom.test.ts
similarity index 67%
rename from apps/web/test/unit-tests/utils/room/tagRoom-test.ts
rename to apps/web/src/utils/room/tagRoom.test.ts
index cec9b805a2..1dcf143d9c 100644
--- a/apps/web/test/unit-tests/utils/room/tagRoom-test.ts
+++ b/apps/web/src/utils/room/tagRoom.test.ts
@@ -6,40 +6,43 @@ 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 { Room } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import RoomListActions from "../../../../src/actions/RoomListActions";
-import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
-import { DefaultTagID, type TagID } from "../../../../src/stores/room-list-v3/skip-list/tag";
-import { CUSTOM_SECTION_TAG_PREFIX } from "../../../../src/stores/room-list-v3/section";
-import { tagRoom } from "../../../../src/utils/room/tagRoom";
-import { getMockClientWithEventEmitter } from "../../../test-utils";
-import * as getTagsForRoomUtils from "../../../../src/utils/room/getTagsForRoom";
+import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
+import { Room } from "matrix-js-sdk/src/matrix";
+import { getMockClientWithEventEmitter } from "test-utils";
+
+import RoomListActions from "../../actions/RoomListActions";
+import defaultDispatcher from "../../dispatcher/dispatcher";
+import { DefaultTagID, type TagID } from "../../stores/room-list-v3/skip-list/tag";
+import { CHATS_TAG, CUSTOM_SECTION_TAG_PREFIX } from "../../stores/room-list-v3/section";
+import { tagRoom } from "./tagRoom";
+import * as getSectionTagForRoomUtils from "./getSectionTagForRoom";
 
 describe("tagRoom()", () => {
     const userId = "@alice:server.org";
     const roomId = "!room:server.org";
     const customTag = `${CUSTOM_SECTION_TAG_PREFIX}my-section`;
 
-    const makeRoom = (tags: TagID[] = []): Room => {
+    const makeRoom = (currentSectionTag: TagID | null = null): Room => {
         const client = getMockClientWithEventEmitter({
-            isGuest: jest.fn(),
+            isGuest: vi.fn(),
         });
         const room = new Room(roomId, client, userId);
 
-        jest.spyOn(getTagsForRoomUtils, "getTagsForRoom").mockReturnValue(tags);
+        vi.spyOn(getSectionTagForRoomUtils, "getSectionTagForRoom").mockReturnValue(currentSectionTag);
 
         return room;
     };
 
     beforeEach(() => {
         // stub
-        jest.spyOn(defaultDispatcher, "dispatch").mockImplementation(() => {});
-        jest.spyOn(RoomListActions, "tagRoom").mockReturnValue({ action: "mocked_tag_room_action", fn: () => {} });
+        vi.spyOn(defaultDispatcher, "dispatch").mockImplementation(() => {});
+        vi.spyOn(RoomListActions, "tagRoom").mockReturnValue({ action: "mocked_tag_room_action", fn: () => {} });
     });
 
     afterEach(() => {
-        jest.restoreAllMocks();
+        vi.restoreAllMocks();
     });
 
     it("does nothing when room tag is not allowed", () => {
@@ -51,7 +54,7 @@ describe("tagRoom()", () => {
         expect(RoomListActions.tagRoom).not.toHaveBeenCalled();
     });
 
-    describe("when a room has no tags", () => {
+    describe("when a room has no section tag", () => {
         it("should tag a room as favourite", () => {
             const room = makeRoom();
 
@@ -93,11 +96,25 @@ describe("tagRoom()", () => {
                 customTag, // add
             );
         });
+
+        it("should do nothing meaningful when applying CHATS_TAG", () => {
+            const room = makeRoom();
+
+            tagRoom(room, CHATS_TAG);
+
+            expect(defaultDispatcher.dispatch).toHaveBeenCalled();
+            expect(RoomListActions.tagRoom).toHaveBeenCalledWith(
+                room.client,
+                room,
+                null, // remove
+                null, // add
+            );
+        });
     });
 
     describe("when a room is tagged as favourite", () => {
         it("should unfavourite a room", () => {
-            const room = makeRoom([DefaultTagID.Favourite]);
+            const room = makeRoom(DefaultTagID.Favourite);
 
             tagRoom(room, DefaultTagID.Favourite);
 
@@ -111,7 +128,7 @@ describe("tagRoom()", () => {
         });
 
         it("should tag a room low priority", () => {
-            const room = makeRoom([DefaultTagID.Favourite]);
+            const room = makeRoom(DefaultTagID.Favourite);
 
             tagRoom(room, DefaultTagID.LowPriority);
 
@@ -123,10 +140,25 @@ describe("tagRoom()", () => {
                 DefaultTagID.LowPriority, // add
             );
         });
+
+        it("should remove the favourite tag when applying CHATS_TAG", () => {
+            const room = makeRoom(DefaultTagID.Favourite);
+
+            tagRoom(room, CHATS_TAG);
+
+            expect(defaultDispatcher.dispatch).toHaveBeenCalled();
+            expect(RoomListActions.tagRoom).toHaveBeenCalledWith(
+                room.client,
+                room,
+                DefaultTagID.Favourite, // remove
+                null, // add
+            );
+        });
     });
+
     describe("when a room is tagged as low priority", () => {
         it("should favourite a room", () => {
-            const room = makeRoom([DefaultTagID.LowPriority]);
+            const room = makeRoom(DefaultTagID.LowPriority);
 
             tagRoom(room, DefaultTagID.Favourite);
 
@@ -140,7 +172,7 @@ describe("tagRoom()", () => {
         });
 
         it("should untag a room low priority", () => {
-            const room = makeRoom([DefaultTagID.LowPriority]);
+            const room = makeRoom(DefaultTagID.LowPriority);
 
             tagRoom(room, DefaultTagID.LowPriority);
 
@@ -161,8 +193,9 @@ describe("tagRoom()", () => {
             { label: "untag the custom section", applyTag: customTag, expectedAdd: null },
             { label: "replace with favourite", applyTag: DefaultTagID.Favourite, expectedAdd: DefaultTagID.Favourite },
             { label: "replace with another custom section", applyTag: otherCustomTag, expectedAdd: otherCustomTag },
+            { label: "remove section tag when applying CHATS_TAG", applyTag: CHATS_TAG, expectedAdd: null },
         ])("should $label", ({ applyTag, expectedAdd }) => {
-            const room = makeRoom([customTag]);
+            const room = makeRoom(customTag);
 
             tagRoom(room, applyTag);
 
diff --git a/apps/web/src/utils/room/tagRoom.ts b/apps/web/src/utils/room/tagRoom.ts
index 62bac2ffca..4e0fb6625c 100644
--- a/apps/web/src/utils/room/tagRoom.ts
+++ b/apps/web/src/utils/room/tagRoom.ts
@@ -9,11 +9,11 @@ Please see LICENSE files in the repository root for full details.
 import { type Room } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 
-import { DefaultTagID, type TagID } from "../../stores/room-list-v3/skip-list/tag";
+import { type TagID } from "../../stores/room-list-v3/skip-list/tag";
 import RoomListActions from "../../actions/RoomListActions";
 import dis from "../../dispatcher/dispatcher";
-import { getTagsForRoom } from "./getTagsForRoom";
-import { isCustomSectionTag } from "../../stores/room-list-v3/section";
+import { CHATS_TAG, isSectionTag } from "../../stores/room-list-v3/section";
+import { getSectionTagForRoom } from "./getSectionTagForRoom";
 
 /**
  * Toggle tag for a given room.
@@ -23,19 +23,19 @@ import { isCustomSectionTag } from "../../stores/room-list-v3/section";
  * @param tagId The tag to invert
  */
 export function tagRoom(room: Room, tagId: TagID): void {
-    if (tagId !== DefaultTagID.Favourite && tagId !== DefaultTagID.LowPriority && !isCustomSectionTag(tagId)) {
-        logger.warn(`Unexpected tag ${tagId} applied to ${room.roomId}`);
+    const isChatTag = tagId === CHATS_TAG;
+    const tag = isChatTag ? null : tagId;
+
+    if (!isSectionTag(tagId)) {
+        logger.warn(`Unexpected tag ${tag} applied to ${room.roomId}`);
         return;
     }
 
     // Find the section tag currently applied (Fav, LowPriority, or custom) — at most one exists
-    const currentSectionTag =
-        getTagsForRoom(room).find(
-            (t) => t === DefaultTagID.Favourite || t === DefaultTagID.LowPriority || isCustomSectionTag(t),
-        ) ?? null;
+    const currentSectionTag = getSectionTagForRoom(room);
 
-    const isApplied = currentSectionTag === tagId;
+    const isApplied = currentSectionTag === tag;
     const removeTag = currentSectionTag;
-    const addTag = isApplied ? null : tagId;
+    const addTag = isApplied ? null : tag;
     dis.dispatch(RoomListActions.tagRoom(room.client, room, removeTag, addTag));
 }
diff --git a/apps/web/test/unit-tests/utils/sets-test.ts b/apps/web/src/utils/sets.test.ts
similarity index 94%
rename from apps/web/test/unit-tests/utils/sets-test.ts
rename to apps/web/src/utils/sets.test.ts
index 20889aa611..632d5c2a91 100644
--- a/apps/web/test/unit-tests/utils/sets-test.ts
+++ b/apps/web/src/utils/sets.test.ts
@@ -6,7 +6,9 @@ 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 { setHasDiff } from "../../../src/utils/sets";
+import { describe, it, expect } from "vitest";
+
+import { setHasDiff } from "./sets";
 
 describe("sets", () => {
     describe("setHasDiff", () => {
diff --git a/apps/web/src/utils/space.tsx b/apps/web/src/utils/space.tsx
index 230c783322..a794c6c050 100644
--- a/apps/web/src/utils/space.tsx
+++ b/apps/web/src/utils/space.tsx
@@ -31,7 +31,7 @@ import {
 } from "../dispatcher/payloads/OpenSpacePreferencesPayload";
 import { type OpenSpaceSettingsPayload } from "../dispatcher/payloads/OpenSpaceSettingsPayload";
 import { type OpenAddExistingToSpaceDialogPayload } from "../dispatcher/payloads/OpenAddExistingToSpaceDialogPayload";
-import { SdkContextClass } from "../contexts/SDKContext";
+import { SDKContextClass } from "../contexts/SDKContextClass";
 
 export const shouldShowSpaceSettings = (space: Room): boolean => {
     const userId = space.client.getUserId()!;
@@ -115,7 +115,7 @@ export const showAddExistingSubspace = (space: Room): void => {
         "mx_AddExistingToSpaceDialog_wrapper",
     );
     finished.then(([added]) => {
-        if (added && SdkContextClass.instance.roomViewStore.getRoomId() === space.roomId) {
+        if (added && SDKContextClass.instance.roomViewStore.getRoomId() === space.roomId) {
             defaultDispatcher.fire(Action.UpdateSpaceHierarchy);
         }
     });
@@ -131,7 +131,7 @@ export const showCreateNewSubspace = (space: Room): void => {
         "mx_CreateSubspaceDialog_wrapper",
     );
     finished.then(([added]) => {
-        if (added && SdkContextClass.instance.roomViewStore.getRoomId() === space.roomId) {
+        if (added && SDKContextClass.instance.roomViewStore.getRoomId() === space.roomId) {
             defaultDispatcher.fire(Action.UpdateSpaceHierarchy);
         }
     });
diff --git a/apps/web/test/unit-tests/utils/stringOrderField-test.ts b/apps/web/src/utils/stringOrderField.test.ts
similarity index 99%
rename from apps/web/test/unit-tests/utils/stringOrderField-test.ts
rename to apps/web/src/utils/stringOrderField.test.ts
index e5c5c5f050..e42d5ef6ef 100644
--- a/apps/web/test/unit-tests/utils/stringOrderField-test.ts
+++ b/apps/web/src/utils/stringOrderField.test.ts
@@ -6,10 +6,11 @@ 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 { describe, it, expect } from "vitest";
 import { sortBy } from "lodash";
 import { averageBetweenStrings, DEFAULT_ALPHABET } from "matrix-js-sdk/src/utils";
 
-import { midPointsBetweenStrings, reorderLexicographically } from "../../../src/utils/stringOrderField";
+import { midPointsBetweenStrings, reorderLexicographically } from "./stringOrderField";
 
 const moveLexicographicallyTest = (
     orders: Array<string | undefined>,
diff --git a/apps/web/test/unit-tests/utils/threepids-test.ts b/apps/web/src/utils/threepids.test.ts
similarity index 94%
rename from apps/web/test/unit-tests/utils/threepids-test.ts
rename to apps/web/src/utils/threepids.test.ts
index 4cf2a427d1..e4450f1011 100644
--- a/apps/web/test/unit-tests/utils/threepids-test.ts
+++ b/apps/web/src/utils/threepids.test.ts
@@ -6,12 +6,14 @@ 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 Mocked } from "jest-mock";
-import { type IIdentityServerProvider, type MatrixClient } from "matrix-js-sdk/src/matrix";
+// @vitest-environment happy-dom
 
-import { DirectoryMember, ThreepidMember } from "../../../src/utils/direct-messages";
-import { lookupThreePids, resolveThreePids } from "../../../src/utils/threepids";
-import { stubClient } from "../../test-utils";
+import { vi, describe, it, expect, beforeEach, type Mocked } from "vitest";
+import { type IIdentityServerProvider, type MatrixClient } from "matrix-js-sdk/src/matrix";
+import { stubClient } from "test-utils";
+
+import { DirectoryMember, ThreepidMember } from "./direct-messages";
+import { lookupThreePids, resolveThreePids } from "./threepids";
 
 describe("threepids", () => {
     let client: Mocked<MatrixClient>;
@@ -21,7 +23,7 @@ describe("threepids", () => {
     beforeEach(() => {
         client = stubClient() as Mocked<MatrixClient>;
         identityServer = {
-            getAccessToken: jest.fn().mockResolvedValue(accessToken),
+            getAccessToken: vi.fn().mockResolvedValue(accessToken),
         } as unknown as Mocked<IIdentityServerProvider>;
     });
 
diff --git a/apps/web/src/utils/threepids.ts b/apps/web/src/utils/threepids.ts
index cfd5235fbb..36e1e6ea8c 100644
--- a/apps/web/src/utils/threepids.ts
+++ b/apps/web/src/utils/threepids.ts
@@ -17,7 +17,7 @@ import { DirectoryMember, type Member, ThreepidMember } from "./direct-messages"
  * @returns {Promise<Member[]>} Same list with ThreepidMembers replaced by DirectoryMembers if succesfully resolved
  */
 export const resolveThreePids = async (members: Member[], client: MatrixClient): Promise<Member[]> => {
-    const threePidMembers = members.filter((m) => m instanceof ThreepidMember) as ThreepidMember[];
+    const threePidMembers = members.filter((m) => m instanceof ThreepidMember);
 
     // Nothing to do here
     if (threePidMembers.length === 0) return members;
diff --git a/apps/web/src/utils/tokens/pickling.ts b/apps/web/src/utils/tokens/pickling.ts
index 3415624e64..f0658ccee3 100644
--- a/apps/web/src/utils/tokens/pickling.ts
+++ b/apps/web/src/utils/tokens/pickling.ts
@@ -46,7 +46,7 @@ export interface EncryptedPickleKey {
  *
  * @param {string} userId The user ID who owns the pickle key.
  * @param {string} deviceId The device ID which owns the pickle key.
- * @return {Uint8Array} The additional data as a Uint8Array.
+ * @returns {Uint8Array} The additional data as a Uint8Array.
  */
 export function getPickleAdditionalData(userId: string, deviceId: string): Uint8Array<ArrayBuffer> {
     const additionalData = new Uint8Array(userId.length + deviceId.length + 1);
diff --git a/apps/web/src/utils/tokens/tokens.ts b/apps/web/src/utils/tokens/tokens.ts
index ec01ca199e..0d3b7555a7 100644
--- a/apps/web/src/utils/tokens/tokens.ts
+++ b/apps/web/src/utils/tokens/tokens.ts
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { logger } from "matrix-js-sdk/src/logger";
+import { type AccessTokens } from "matrix-js-sdk/src/matrix";
 import decryptAESSecretStorageItem from "matrix-js-sdk/src/utils/decryptAESSecretStorageItem";
 import encryptAESSecretStorageItem from "matrix-js-sdk/src/utils/encryptAESSecretStorageItem";
 import { type AESEncryptedSecretStoragePayload } from "matrix-js-sdk/src/types";
@@ -51,7 +52,6 @@ async function pickleKeyToAesKey(pickleKey: string): Promise<Uint8Array<ArrayBuf
             {
                 name: "HKDF",
                 hash: "SHA-256",
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-ignore: https://github.com/microsoft/TypeScript-DOM-lib-generator/pull/879
                 salt: new Uint8Array(32),
                 info: new Uint8Array(0),
@@ -116,7 +116,7 @@ export async function tryDecryptToken(
  * @param hasTokenStorageKey Localstorage key for an item which stores whether we expect to have a token in indexeddb,
  *    eg "mx_has_access_token".
  */
-export async function persistTokenInStorage(
+async function persistTokenInStorage(
     storageKey: string,
     tokenName: string,
     token: string | undefined,
@@ -174,40 +174,24 @@ export async function persistTokenInStorage(
 }
 
 /**
- * Wraps {@link persistTokenInStorage} with accessToken storage keys
+ * Wraps {@link persistTokenInStorage} with accessToken & refreshToken storage keys
  *
- * @param token - The token to store. When undefined, any existing accessToken is removed from storage.
- * @param pickleKey - Pickle key: used to derive the key used to encrypt token. If `undefined`, the token will be stored
- *    unencrypted.
+ * @param tokens - The tokens to persist
+ * @param pickleKey - Pickle key: used to derive the key used to encrypt token.
+ *     If `undefined`, the token will be stored unencrypted.
  */
-export async function persistAccessTokenInStorage(
-    token: string | undefined,
-    pickleKey: string | undefined,
-): Promise<void> {
-    return persistTokenInStorage(
+export async function persistTokens(pickleKey: string | undefined, tokens: AccessTokens): Promise<void> {
+    await persistTokenInStorage(
         ACCESS_TOKEN_STORAGE_KEY,
         ACCESS_TOKEN_IV,
-        token,
+        tokens.accessToken,
         pickleKey,
         HAS_ACCESS_TOKEN_STORAGE_KEY,
     );
-}
-
-/**
- * Wraps {@link persistTokenInStorage} with refreshToken storage keys.
- *
- * @param token - The token to store. When undefined, any existing refreshToken is removed from storage.
- * @param pickleKey - Pickle key: used to derive the key used to encrypt token. If `undefined`, the token will be stored
- *    unencrypted.
- */
-export async function persistRefreshTokenInStorage(
-    token: string | undefined,
-    pickleKey: string | undefined,
-): Promise<void> {
-    return persistTokenInStorage(
+    await persistTokenInStorage(
         REFRESH_TOKEN_STORAGE_KEY,
         REFRESH_TOKEN_IV,
-        token,
+        tokens.refreshToken,
         pickleKey,
         HAS_REFRESH_TOKEN_STORAGE_KEY,
     );
diff --git a/apps/web/src/utils/userStatus.test.ts b/apps/web/src/utils/userStatus.test.ts
new file mode 100644
index 0000000000..db4ca6fb3d
--- /dev/null
+++ b/apps/web/src/utils/userStatus.test.ts
@@ -0,0 +1,195 @@
+/*
+Copyright 2026 Element Creations 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.
+*/
+
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach } from "vitest";
+import { type MatrixClient, MatrixError } from "matrix-js-sdk/src/matrix";
+import { stubClient } from "test-utils";
+
+import {
+    clearAllUserStatus,
+    fetchUserStatus,
+    setUserOnCall,
+    setUserStatus,
+    userStatusFromProfile,
+    userStatusTextWithinMaxLength,
+} from "./userStatus";
+
+describe("userStatus utils", () => {
+    describe("userStatusFromProfile", () => {
+        it("returns the user status if it is valid", () => {
+            expect(userStatusFromProfile({ emoji: "🐳", text: "Feeling a little blue" }, undefined)).toEqual({
+                emoji: "🐳",
+                text: "Feeling a little blue",
+            });
+        });
+
+        it("returns undefined if the user status is invalid and there is no call status", () => {
+            expect(userStatusFromProfile({ text: "Feeling a little blue" }, undefined)).toBeUndefined();
+        });
+
+        it("returns the call status if the user status is invalid but the call status is valid", () => {
+            expect(userStatusFromProfile({ text: "Feeling a little blue" }, { call_joined_ts: 12345 })).toEqual({
+                emoji: "📞",
+                text: "On a call",
+            });
+        });
+
+        it("prefers the user status over the call status if both are valid", () => {
+            expect(
+                userStatusFromProfile({ emoji: "🐳", text: "Feeling a little blue" }, { call_joined_ts: 12345 }),
+            ).toEqual({
+                emoji: "🐳",
+                text: "Feeling a little blue",
+            });
+        });
+
+        it("returns undefined if the call status has a non-positive call_joined_ts", () => {
+            expect(userStatusFromProfile(undefined, { call_joined_ts: 0 })).toBeUndefined();
+        });
+
+        it("returns undefined if neither status is valid", () => {
+            expect(userStatusFromProfile(undefined, undefined)).toBeUndefined();
+        });
+    });
+
+    describe("userStatusTextWithinMaxLength", () => {
+        it("returns true for text within the max length", () => {
+            const text = "a".repeat(256);
+            expect(userStatusTextWithinMaxLength(text)).toBe(true);
+        });
+        it("returns false for text exceeding the max length", () => {
+            const text = "a".repeat(257);
+            expect(userStatusTextWithinMaxLength(text)).toBe(false);
+        });
+    });
+
+    describe("setUserStatus", () => {
+        let client: MatrixClient;
+
+        beforeEach(() => {
+            client = stubClient();
+        });
+
+        it("sets the user status with valid input", async () => {
+            setUserStatus(client, { emoji: "🐳", text: "Feeling a little blue" });
+
+            expect(client.setExtendedProfileProperty).toHaveBeenCalledWith("org.matrix.msc4426.status", {
+                emoji: "🐳",
+                text: "Feeling a little blue",
+            });
+        });
+    });
+
+    describe("fetchUserStatus", () => {
+        let client: MatrixClient;
+
+        beforeEach(() => {
+            client = stubClient();
+            client.doesServerSupportExtendedProfiles = vi.fn();
+        });
+
+        it("returns undefined if the server does not support extended profiles", async () => {
+            vi.mocked(client.doesServerSupportExtendedProfiles).mockResolvedValue(false);
+
+            await expect(fetchUserStatus(client, "@alice:example.com")).resolves.toBeUndefined();
+            expect(client.getExtendedProfileProperty).not.toHaveBeenCalled();
+        });
+
+        it("returns the validated status if the server supports extended profiles and has a status set", async () => {
+            vi.mocked(client.doesServerSupportExtendedProfiles).mockResolvedValue(true);
+            vi.mocked(client.getExtendedProfileProperty).mockResolvedValue({
+                emoji: "🐳",
+                text: "Feeling a little blue",
+            });
+
+            await expect(fetchUserStatus(client, "@alice:example.com")).resolves.toEqual({
+                emoji: "🐳",
+                text: "Feeling a little blue",
+            });
+            expect(client.getExtendedProfileProperty).toHaveBeenCalledWith(
+                "@alice:example.com",
+                "org.matrix.msc4426.status",
+            );
+        });
+
+        it("returns undefined if the status is invalid", async () => {
+            vi.mocked(client.doesServerSupportExtendedProfiles).mockResolvedValue(true);
+            vi.mocked(client.getExtendedProfileProperty).mockResolvedValue({ text: "Feeling a little blue" });
+
+            await expect(fetchUserStatus(client, "@alice:example.com")).resolves.toBeUndefined();
+        });
+
+        it("returns undefined if the user has no status set", async () => {
+            vi.mocked(client.doesServerSupportExtendedProfiles).mockResolvedValue(true);
+            vi.mocked(client.getExtendedProfileProperty).mockRejectedValue(
+                new MatrixError({ errcode: "M_NOT_FOUND" }, 404),
+            );
+
+            await expect(fetchUserStatus(client, "@alice:example.com")).resolves.toBeUndefined();
+        });
+
+        it("returns undefined and logs a warning if fetching the status fails unexpectedly", async () => {
+            vi.mocked(client.doesServerSupportExtendedProfiles).mockResolvedValue(true);
+            const error = new Error("network error");
+            vi.mocked(client.getExtendedProfileProperty).mockRejectedValue(error);
+
+            await expect(fetchUserStatus(client, "@alice:example.com")).resolves.toBeUndefined();
+        });
+    });
+
+    describe("clearAllUserStatus", () => {
+        let client: MatrixClient;
+
+        beforeEach(() => {
+            client = stubClient();
+        });
+
+        it("clears the user status", async () => {
+            vi.mocked(client.getExtendedProfileProperty).mockResolvedValue({ emoji: "🍩", text: "Arbitrary Status" });
+
+            await clearAllUserStatus(client);
+
+            expect(client.setExtendedProfileProperty).toHaveBeenCalledWith("org.matrix.msc4426.status", null);
+        });
+
+        it("clears the call status", async () => {
+            vi.mocked(client.getExtendedProfileProperty).mockResolvedValue({ call_joined_ts: 12345 });
+
+            await clearAllUserStatus(client);
+
+            expect(client.setExtendedProfileProperty).toHaveBeenCalledWith("org.matrix.msc4426.call", null);
+        });
+    });
+
+    describe("setUserOnCall", () => {
+        let client: MatrixClient;
+
+        beforeEach(() => {
+            client = stubClient();
+        });
+
+        it("sets the call status with the current time if onCall is true", async () => {
+            vi.useFakeTimers().setSystemTime(12345);
+
+            await setUserOnCall(client, true);
+
+            expect(client.setExtendedProfileProperty).toHaveBeenCalledWith("org.matrix.msc4426.call", {
+                call_joined_ts: 12345,
+            });
+
+            vi.useRealTimers();
+        });
+
+        it("clears the call status if onCall is false", async () => {
+            await setUserOnCall(client, false);
+
+            expect(client.setExtendedProfileProperty).toHaveBeenCalledWith("org.matrix.msc4426.call", null);
+        });
+    });
+});
diff --git a/apps/web/src/utils/userStatus.ts b/apps/web/src/utils/userStatus.ts
new file mode 100644
index 0000000000..67027a82cc
--- /dev/null
+++ b/apps/web/src/utils/userStatus.ts
@@ -0,0 +1,176 @@
+/*
+Copyright 2026 Element Creations 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 { _td, type UserStatus } from "@element-hq/web-shared-components";
+import { type MatrixClient, MatrixError } from "matrix-js-sdk/src/matrix";
+import { logger } from "matrix-js-sdk/src/logger";
+
+import { _t } from "../languageHandler";
+
+// MSC4426 defines the maximum length of a status to be 256 bytes of UTF-8,
+// so we truncate anything longer than that.
+const MAX_STATUS_TEXT_BYTES = 256;
+
+// We don't use the actual UserStatus type here as we want to translate the string at runtime,
+// so we can make the types reflect the fact it's not ready for human consumption.
+const ON_A_CALL_STATUS = {
+    emoji: "📞",
+    textKey: _td("user_status|on_a_call"),
+};
+
+// Static Intl.Segmenter for grabbing the first grapheme of a user status emoji.
+// We make one and keep it for performance.
+const intlSegmenter = new Intl.Segmenter();
+
+/**
+ * Checks if a given text is within the maximum allowed length for a user status.
+ * @param text The text to check.
+ * @returns True if the text is within the maximum length, false otherwise.
+ */
+export function userStatusTextWithinMaxLength(text: string): boolean {
+    const textEncoder = new TextEncoder();
+    return textEncoder.encode(text).length <= MAX_STATUS_TEXT_BYTES;
+}
+
+/**
+ * Validates an object from a user profile and returns a UserStatus object if it contains a valid user status.
+ * @param rawUserStatus The raw user status object to validate.
+ * @returns A UserStatus object if valid, otherwise undefined.
+ */
+function validateUserStatus(rawUserStatus: unknown): UserStatus | undefined {
+    if (typeof rawUserStatus !== "object" || rawUserStatus === null) {
+        return undefined;
+    }
+    if ("emoji" in rawUserStatus === false || typeof rawUserStatus.emoji !== "string" || !rawUserStatus.emoji) {
+        return undefined;
+    }
+    if ("text" in rawUserStatus === false || typeof rawUserStatus.text !== "string" || !rawUserStatus.text) {
+        return undefined;
+    }
+    return {
+        emoji: [...intlSegmenter.segment(rawUserStatus.emoji)][0]?.segment,
+        text: userStatusTextWithinMaxLength(rawUserStatus.text)
+            ? rawUserStatus.text
+            : `${rawUserStatus.text.slice(0, MAX_STATUS_TEXT_BYTES)}…`,
+    };
+}
+
+/**
+ * Takes the raw result from getExtendedProfileProperty for m.call, validates it and
+ * returns true a UserStatus object reflect it, undefined if there is no status or it
+ * does not say that the user is on a call.
+ * Designed to be the same API as validateUserStatus for simplicty.
+ * @param rawCallStatus
+ */
+function validateMCallStatus(rawCallStatus: unknown): UserStatus | undefined {
+    if (!rawCallStatus || typeof rawCallStatus !== "object") return undefined;
+    if (!("call_joined_ts" in rawCallStatus) || typeof rawCallStatus.call_joined_ts !== "number") return undefined;
+    if (rawCallStatus.call_joined_ts > 0) return { emoji: ON_A_CALL_STATUS.emoji, text: _t(ON_A_CALL_STATUS.textKey) };
+
+    return undefined;
+}
+
+/**
+ * Takes both MSC4426 user status fields (m.status and m.call) and returns a UserStatus
+ * object that reflects the information they represent.
+ */
+export function userStatusFromProfile(userStatus: unknown, callStatus: unknown): UserStatus | undefined {
+    const validatedUserStatus = validateUserStatus(userStatus);
+    if (validatedUserStatus) return validatedUserStatus;
+
+    const validatedCallStatus = validateMCallStatus(callStatus);
+    if (validatedCallStatus) return validatedCallStatus;
+
+    return undefined;
+}
+
+/**
+ * Fetch the MSC4426 user status of the given user, taking into account m.call if present.
+ * Returns undefined if the server does not support extended profiles, the user has no
+ * (valid) status, or the status could not be fetched.
+ *
+ * @param client The Matrix client to fetch the status with.
+ * @param userId The ID of the user whose status is being fetched.
+ */
+export async function fetchUserStatus(client: MatrixClient, userId: string): Promise<UserStatus | undefined> {
+    if ((await client.doesServerSupportExtendedProfiles()) === false) {
+        return undefined;
+    }
+
+    let rawUserStatus: unknown;
+    let rawCallStatus: unknown;
+
+    try {
+        // nb. one of these may be redundant since one takes precedence over the other, but the two
+        // are fetched in the same call by the js-sdk anyway so it will only be one API call and this
+        // is simpler and duplicates less logic.
+        rawUserStatus = await client.getExtendedProfileProperty(userId, "org.matrix.msc4426.status");
+    } catch (ex) {
+        if (!(ex instanceof MatrixError && ex.errcode === "M_NOT_FOUND")) {
+            logger.warn(`Failed to get user status for ${userId}`, ex);
+        }
+    }
+
+    try {
+        rawCallStatus = await client.getExtendedProfileProperty(userId, "org.matrix.msc4426.call");
+    } catch (ex) {
+        if (!(ex instanceof MatrixError && ex.errcode === "M_NOT_FOUND")) {
+            logger.warn(`Failed to get call status for ${userId}`, ex);
+        }
+    }
+    return userStatusFromProfile(rawUserStatus, rawCallStatus);
+}
+
+/**
+ * Sets the MSC4426 user status for the given user.
+ *
+ * @param client The Matrix client to use.
+ * @param userStatus The user status to set.
+ */
+export function setUserStatus(client: MatrixClient, userStatus: UserStatus): Promise<void> {
+    return client.setExtendedProfileProperty("org.matrix.msc4426.status", {
+        emoji: userStatus.emoji,
+        text: userStatus.text,
+    });
+}
+
+/**
+ * Clears all MSC4426 user status for the given user, including their m.status and m.call status,
+ * if anything is set in those fields.
+ *
+ * @param client The Matrix client to use.
+ * @throws If either request fails, in which case the other may also not have been cleared.
+ */
+export async function clearAllUserStatus(client: MatrixClient): Promise<void> {
+    const rawUserStatus = await client.getExtendedProfileProperty(client.getSafeUserId(), "org.matrix.msc4426.status");
+    if (rawUserStatus) {
+        await client.setExtendedProfileProperty("org.matrix.msc4426.status", null);
+    }
+
+    const rawCallStatus = await client.getExtendedProfileProperty(client.getSafeUserId(), "org.matrix.msc4426.call");
+    if (rawCallStatus) {
+        await setUserOnCall(client, false);
+    }
+}
+
+/**
+ * Sets or clears the user's m.call status to represent that they are currently on a call or not.
+ * If onCall is true, the status will be set to show that they joined the call at the time when this
+ * function is called.
+ * @param client The matrix client to use
+ * @param onCall Whether the user is currently on a call.
+ */
+export function setUserOnCall(client: MatrixClient, onCall: boolean): Promise<void> {
+    return client.setExtendedProfileProperty(
+        "org.matrix.msc4426.call",
+        onCall
+            ? {
+                  call_joined_ts: Date.now(),
+              }
+            : null,
+    );
+}
diff --git a/apps/web/test/unit-tests/utils/validate/numberInRange-test.ts b/apps/web/src/utils/validate/numberInRange.test.ts
similarity index 92%
rename from apps/web/test/unit-tests/utils/validate/numberInRange-test.ts
rename to apps/web/src/utils/validate/numberInRange.test.ts
index d62045ac68..5acbf91b28 100644
--- a/apps/web/test/unit-tests/utils/validate/numberInRange-test.ts
+++ b/apps/web/src/utils/validate/numberInRange.test.ts
@@ -6,7 +6,9 @@ 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 { validateNumberInRange } from "../../../../src/utils/validate";
+import { describe, it, expect } from "vitest";
+
+import { validateNumberInRange } from "./numberInRange";
 
 describe("validateNumberInRange", () => {
     const min = 1;
diff --git a/apps/web/test/unit-tests/vector/__snapshots__/init-test.ts.snap b/apps/web/src/vector/__snapshots__/init.test.ts.snap
similarity index 98%
rename from apps/web/test/unit-tests/vector/__snapshots__/init-test.ts.snap
rename to apps/web/src/vector/__snapshots__/init.test.ts.snap
index 7c5f97eb53..beaaf7d8c4 100644
--- a/apps/web/test/unit-tests/vector/__snapshots__/init-test.ts.snap
+++ b/apps/web/src/vector/__snapshots__/init.test.ts.snap
@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`showError should match snapshot 1`] = `
+exports[`showError > should match snapshot 1`] = `
 <div
   id="matrixchat"
 >
@@ -36,7 +36,7 @@ exports[`showError should match snapshot 1`] = `
 </div>
 `;
 
-exports[`showIncompatibleBrowser should match snapshot 1`] = `
+exports[`showIncompatibleBrowser > should match snapshot 1`] = `
 <div
   id="matrixchat"
 >
diff --git a/apps/web/src/vector/app.test.ts b/apps/web/src/vector/app.test.ts
new file mode 100644
index 0000000000..9f04a1a87b
--- /dev/null
+++ b/apps/web/src/vector/app.test.ts
@@ -0,0 +1,87 @@
+/*
+Copyright 2026 Element Creations 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.
+*/
+
+// @vitest-environment happy-dom
+// @vitest-environment-options {"url": "https://app.element.io/#/room/#room:server"}
+
+import { vi, describe, it, expect, afterAll, beforeEach } from "vitest";
+import fetchMock from "@fetch-mock/vitest";
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { mockPlatformPeg, unmockPlatformPeg } from "test-utils";
+import { makeDelegatedAuthMetadata } from "test-utils/auth";
+import { type RefCallback } from "react";
+
+import { loadApp } from "./app.tsx";
+import SdkConfig from "../SdkConfig.ts";
+import PlatformPeg from "../PlatformPeg.ts";
+import type MatrixChat from "../components/structures/MatrixChat.tsx";
+
+const defaultConfig = {
+    default_hs_url: "https://synapse",
+};
+const issuer = "https://auth.org/";
+
+describe("sso_redirect_options", () => {
+    beforeEach(() => {
+        // Stable stub
+        vi.spyOn(window.crypto, "getRandomValues").mockImplementation((arr) => {
+            for (let i = 0; i < (<Uint8Array>arr).length; i++) {
+                (<Uint8Array>arr)[i] = i;
+            }
+            return arr;
+        });
+    });
+
+    beforeEach(() => {
+        SdkConfig.reset();
+        mockPlatformPeg({ getDefaultDeviceDisplayName: vi.fn(), startSingleSignOn: vi.fn() });
+    });
+
+    afterAll(() => {
+        unmockPlatformPeg();
+    });
+
+    describe("immediate", () => {
+        beforeEach(() => {
+            SdkConfig.put({
+                ...defaultConfig,
+                sso_redirect_options: { immediate: true },
+                // Avoid testing dynamic client registration
+                oidc_static_clients: { [issuer]: { client_id: "12345" } },
+            });
+            // Signal we support v1.1 to pass the minimum js-sdk compatibility bar
+            // Signal we support v1.15 to use stable Native OAuth2 support
+            fetchMock.get("https://synapse/_matrix/client/versions", { versions: ["v1.1", "v1.15"] });
+        });
+
+        it("should redirect for legacy SSO", async () => {
+            fetchMock.getOnce("https://synapse/_matrix/client/v3/login", {
+                flows: [{ stages: ["m.login.sso"] }],
+            });
+
+            const startSingleSignOnSpy = vi.spyOn(PlatformPeg.get()!, "startSingleSignOn");
+
+            await loadApp({}, vi.fn() as RefCallback<MatrixChat>);
+            expect(startSingleSignOnSpy).toHaveBeenCalledWith(expect.any(MatrixClient), "sso", "/room/#room:server");
+        });
+
+        it("should redirect for native OAuth2", async () => {
+            const authConfig = {
+                ...makeDelegatedAuthMetadata(issuer),
+                response_modes_supported: ["query", "fragment"],
+            };
+            fetchMock.get("https://synapse/_matrix/client/v1/auth_metadata", authConfig);
+
+            const startOAuthLoginSpy = vi.spyOn(window.location, "href", "set");
+
+            await loadApp({}, vi.fn() as RefCallback<MatrixChat>);
+            expect(startOAuthLoginSpy).toHaveBeenCalledWith(
+                "https://auth.org/auth?response_type=code&response_mode=fragment&client_id=12345&redirect_uri=https%3A%2F%2Fapp.element.io%2F%3Fno_universal_links%3Dtrue&scope=urn%3Amatrix%3Aclient%3Aapi%3A*+urn%3Amatrix%3Aclient%3Adevice%3AABCDEFGHIJ&state=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdef&code_challenge_method=S256&code_challenge=ymW9_yTzfYF1Km4N7W4OC6jQ7xoj91DUulQHWfmrROM",
+            );
+        });
+    });
+});
diff --git a/apps/web/src/vector/app.tsx b/apps/web/src/vector/app.tsx
index db5d0e4e99..f1e7f645b8 100644
--- a/apps/web/src/vector/app.tsx
+++ b/apps/web/src/vector/app.tsx
@@ -34,8 +34,9 @@ import { RoomView } from "../components/structures/RoomView";
 import RoomAvatar from "../components/views/avatars/RoomAvatar";
 import { ModuleNotificationDecoration } from "../modules/components/ModuleNotificationDecoration";
 import Login from "../Login.ts";
-import { startOidcLogin } from "../utils/oidc/authorize.ts";
+import { startOAuthLogin } from "../utils/oauth/authorize.ts";
 
+// oxlint-disable-next-line node/no-process-env
 logger.log(`Application is running in ${process.env.NODE_ENV} mode`);
 
 window.matrixLogger = logger;
@@ -44,7 +45,7 @@ function onTokenLoginCompleted(urlParams: URLParams, fragmentAfterLogin: string)
     const url = new URL(window.location.href);
 
     // if we did a token login, we're now left with the login token as query param in the url; clear it out
-    for (const param in { ...urlParams.legacy_sso, ...urlParams.oidc_query }) {
+    for (const param in { ...urlParams.legacy_sso }) {
         url.searchParams.delete(param);
     }
 
@@ -68,9 +69,9 @@ async function redirectToSso(config: ValidatedServerConfig): Promise<boolean> {
         });
         const flows = await login.getFlows();
 
-        const nativeOidcFlow = flows.find((flow) => "clientId" in flow);
-        if (nativeOidcFlow && config.delegatedAuthentication) {
-            await startOidcLogin(config.delegatedAuthentication, nativeOidcFlow.clientId, config.hsUrl, config.isUrl);
+        const nativeOAuthFlow = flows.find((flow) => "clientId" in flow);
+        if (nativeOAuthFlow && config.delegatedAuthentication) {
+            await startOAuthLogin(config.delegatedAuthentication, nativeOAuthFlow.clientId, config.hsUrl, config.isUrl);
             return true;
         }
 
@@ -112,7 +113,7 @@ export async function loadApp(urlParams: URLParams, matrixChatRef: React.Ref<Mat
     // Before we continue, let's see if we're supposed to do an SSO redirect
     const [userId] = await Lifecycle.getStoredSessionOwner();
     const hasPossibleToken = !!userId;
-    const isReturningFromSso = !!urlParams.legacy_sso || !!urlParams.oidc_fragment || !!urlParams.oidc_query;
+    const isReturningFromSso = !!urlParams.legacy_sso || !!urlParams.oauth2;
     const ssoRedirects = config.sso_redirect_options || {};
     let autoRedirect = ssoRedirects.immediate === true;
     // XXX: This path matching is a bit brittle, but better to do it early instead of in the app code.
diff --git a/apps/web/test/unit-tests/vector/getconfig-test.ts b/apps/web/src/vector/getconfig.test.ts
similarity index 92%
rename from apps/web/test/unit-tests/vector/getconfig-test.ts
rename to apps/web/src/vector/getconfig.test.ts
index 725a4d328b..c0f1241bd6 100644
--- a/apps/web/test/unit-tests/vector/getconfig-test.ts
+++ b/apps/web/src/vector/getconfig.test.ts
@@ -6,9 +6,10 @@ 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 fetchMock from "@fetch-mock/jest";
+import { vi, describe, it, expect, beforeEach, afterAll } from "vitest";
+import fetchMock from "@fetch-mock/vitest";
 
-import { getVectorConfig } from "../../../src/vector/getconfig";
+import { getVectorConfig } from "./getconfig";
 
 describe("getVectorConfig()", () => {
     const elementDomain = "app.element.io";
@@ -27,13 +28,13 @@ describe("getVectorConfig()", () => {
         });
 
         // stable value for cachebuster
-        jest.spyOn(Date, "now").mockReturnValue(now);
-        jest.clearAllMocks();
+        vi.spyOn(Date, "now").mockReturnValue(now);
+        vi.clearAllMocks();
         fetchMock.removeRoutes();
     });
 
     afterAll(() => {
-        jest.spyOn(Date, "now").mockRestore();
+        vi.spyOn(Date, "now").mockRestore();
     });
 
     it("requests specific config for document domain", async () => {
diff --git a/apps/web/src/vector/index.ts b/apps/web/src/vector/index.ts
index 6a01f32e53..586b55a052 100644
--- a/apps/web/src/vector/index.ts
+++ b/apps/web/src/vector/index.ts
@@ -16,19 +16,21 @@ import { shouldPolyfill as shouldPolyFillIntlSegmenter } from "@formatjs/intl-se
 // These are things that can run before the skin loads - be careful not to reference the react-sdk though.
 import { parseAppUrl } from "./url_utils";
 import "./modernizr.cjs";
+import { polyfillTouchEvent } from "../@types/polyfill";
 
-// Import shared components CSS
-import "@element-hq/web-shared-components/dist/element-web-shared-components.css";
-
+import "../../res/css/_index.pcss";
 // Require common CSS here; this will make webpack process it into bundle.css.
 // Our own CSS (which is themed) is imported via separate webpack entry points
 // in webpack.config.js
-// eslint-disable-next-line @typescript-eslint/no-require-imports
+// eslint-disable-next-line @typescript-eslint/no-require-imports,import/no-commonjs,unicorn/prefer-module
 require("katex/dist/katex.css");
 
-// eslint-disable-next-line @typescript-eslint/no-require-imports
+// eslint-disable-next-line @typescript-eslint/no-require-imports,import/no-commonjs,unicorn/prefer-module
 require("./localstorage-fix");
 
+// Patch a fake window.TouchEvent for re-resizable's unguarded `instanceof TouchEvent`.
+polyfillTouchEvent();
+
 async function settled(...promises: Array<Promise<any>>): Promise<void> {
     for (const prom of promises) {
         try {
@@ -82,7 +84,7 @@ function checkBrowserFeatures(): boolean {
     for (const feature of featureList) {
         if (window.Modernizr[feature] === undefined) {
             logger.error(
-                "Looked for feature '%s' but Modernizr has no results for this. " + "Has it been configured correctly?",
+                "Looked for feature '%s' but Modernizr has no results for this. Has it been configured correctly?",
                 feature,
             );
             return false;
@@ -148,7 +150,7 @@ async function start(): Promise<void> {
             const isIos = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
             const isAndroid = /Android/.test(navigator.userAgent);
             if (isIos || isAndroid) {
-                if (document.cookie.indexOf("element_mobile_redirect_to_guide=false") === -1) {
+                if (sessionStorage.getItem("skip_mobile_redirect") !== "true") {
                     window.location.href = "mobile_guide/";
                     return;
                 }
@@ -253,7 +255,6 @@ start().catch((err) => {
     // with some basic styling to make the iframe full page
     document.body.style.removeProperty("height");
     const iframe = document.createElement("iframe");
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore - typescript seems to only like the IE syntax for iframe sandboxing
     iframe["sandbox"] = "";
     iframe.src = supportedBrowser ? "static/unable-to-load.html" : "static/incompatible-browser.html";
diff --git a/apps/web/test/unit-tests/vector/init-test.ts b/apps/web/src/vector/init.test.ts
similarity index 51%
rename from apps/web/test/unit-tests/vector/init-test.ts
rename to apps/web/src/vector/init.test.ts
index 9c39ba652a..37d0582be8 100644
--- a/apps/web/test/unit-tests/vector/init-test.ts
+++ b/apps/web/src/vector/init.test.ts
@@ -1,8 +1,3 @@
-/**
- * @jest-environment jest-fixed-jsdom
- * @jest-environment-options {"url": "https://app.element.io/?loginToken=123&no_universal_links&something_else=value#/home?state=abc&code=xyz"}
- */
-
 /*
 Copyright 2024 New Vector Ltd.
 
@@ -10,13 +5,17 @@ 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 fetchMock from "@fetch-mock/jest";
-import { waitFor, screen } from "jest-matrix-react";
+// @vitest-environment happy-dom
+// @vitest-environment-options {"url": "https://app.element.io/?loginToken=123&no_universal_links&something_else=value#/home?state=abc&code=xyz"}
 
-import { loadApp, showError, showIncompatibleBrowser } from "../../../src/vector/init.tsx";
-import SdkConfig from "../../../src/SdkConfig.ts";
-import MatrixChat from "../../../src/components/structures/MatrixChat.tsx";
-import { parseAppUrl } from "../../../src/vector/url_utils.ts";
+import { vi, describe, it, expect, beforeEach } from "vitest";
+import fetchMock from "@fetch-mock/vitest";
+import { waitFor, screen } from "test-utils-rtl";
+
+import { loadApp, showError, showIncompatibleBrowser } from "./init.tsx";
+import SdkConfig from "../SdkConfig.ts";
+import MatrixChat from "../components/structures/MatrixChat.tsx";
+import { parseAppUrl } from "./url_utils.ts";
 
 function setUpMatrixChatDiv() {
     document.getElementById("matrixchat")?.remove();
@@ -29,7 +28,7 @@ describe("showIncompatibleBrowser", () => {
     beforeEach(setUpMatrixChatDiv);
 
     it("should match snapshot", async () => {
-        await showIncompatibleBrowser(jest.fn());
+        await showIncompatibleBrowser(vi.fn());
         await screen.findByText("Element does not support this browser");
         expect(document.getElementById("matrixchat")).toMatchSnapshot();
     });
@@ -58,8 +57,29 @@ describe("loadApp", () => {
         await waitFor(() => expect(window.matrixChat).toBeInstanceOf(MatrixChat));
     });
 
+    it("should replace the previous app rather than leaving it mounted", async () => {
+        await loadApp({});
+        await waitFor(() => expect(window.matrixChat).toBeInstanceOf(MatrixChat));
+        const first = window.matrixChat;
+
+        // Count only what the second load does. We track the mounted/unmounted delta rather than raw
+        // mount count, as StrictMode's extra mount/unmount cycle cancels out in the difference.
+        const mounted = vi.spyOn(MatrixChat.prototype, "componentDidMount");
+        const unmounted = vi.spyOn(MatrixChat.prototype, "componentWillUnmount");
+        const delta = (): number => mounted.mock.calls.length - unmounted.mock.calls.length;
+
+        setUpMatrixChatDiv();
+        await loadApp({});
+        await waitFor(() => expect(window.matrixChat).not.toBe(first));
+
+        // The new app replaces the old one, so the number of live apps is unchanged. A second root over
+        // the same container would instead leave the first tree mounted against a detached node, with both
+        // copies still driven by the dispatcher and the client peg.
+        await waitFor(() => expect(delta()).toBe(0));
+    });
+
     it("should pass onTokenLoginCompleted which strips searchParams & fragment to MatrixChat", async () => {
-        const spy = jest.spyOn(window.history, "replaceState");
+        const spy = vi.spyOn(window.history, "replaceState");
 
         await loadApp({});
         await waitFor(() => expect(window.matrixChat).toBeInstanceOf(MatrixChat));
diff --git a/apps/web/src/vector/init.tsx b/apps/web/src/vector/init.tsx
index 2557e74ba3..208f29d0bf 100644
--- a/apps/web/src/vector/init.tsx
+++ b/apps/web/src/vector/init.tsx
@@ -8,12 +8,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { createRoot } from "react-dom/client";
+import { createRoot, type Root } from "react-dom/client";
 import React, { StrictMode } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { ModuleLoader } from "@element-hq/element-web-module-api";
+import { getNormalizedLanguageKeys } from "@element-hq/web-shared-components";
 
-import * as languageHandler from "../languageHandler";
+import { getLanguagesFromBrowser } from "../i18n/browser";
+import { setLanguage } from "../i18n/settings";
+import { getCurrentLanguage } from "../i18n";
 import SettingsStore from "../settings/SettingsStore";
 import PlatformPeg from "../PlatformPeg";
 import SdkConfig from "../SdkConfig";
@@ -29,6 +32,25 @@ import { type URLParams } from "./url_utils.ts";
 
 export const rageshakePromise = initRageshake();
 
+let root: Root | undefined;
+let rootContainer: Element | undefined;
+
+/**
+ * Get the React root for the `#matrixchat` container.
+ *
+ * These views replace one another (`showError` may be called after `loadApp`, for instance), so they share a
+ * single root: calling `createRoot` again for the same container leaves the previous tree mounted and running
+ * against a detached DOM node, with both copies still subscribed to the dispatcher and the client peg.
+ */
+function getRoot(): Root {
+    const container = document.getElementById("matrixchat")!;
+    if (root && rootContainer === container) return root;
+    root?.unmount();
+    rootContainer = container;
+    root = createRoot(container);
+    return root;
+}
+
 export function preparePlatform(): void {
     if (window.electron) {
         logger.log("Using Electron platform");
@@ -68,15 +90,13 @@ export async function loadLanguage(): Promise<void> {
     let langs: string[] = [];
 
     if (!prefLang) {
-        languageHandler.getLanguagesFromBrowser().forEach((l) => {
-            langs.push(...languageHandler.getNormalizedLanguageKeys(l));
-        });
+        langs = getLanguagesFromBrowser().flatMap(getNormalizedLanguageKeys);
     } else {
         langs = [prefLang];
     }
     try {
-        await languageHandler.setLanguage(...langs);
-        document.documentElement.setAttribute("lang", languageHandler.getCurrentLanguage());
+        await setLanguage(...langs);
+        document.documentElement.setAttribute("lang", getCurrentLanguage());
     } catch (e) {
         logger.error("Unable to set language", e);
     }
@@ -97,8 +117,7 @@ export async function loadApp(urlParams: URLParams): Promise<void> {
         window.matrixChat = matrixChat;
     }
     const app = await module.loadApp(urlParams, setWindowMatrixChat);
-    const root = createRoot(document.getElementById("matrixchat")!);
-    root.render(app);
+    getRoot().render(app);
 }
 
 export async function showError(title: string, messages?: string[]): Promise<void> {
@@ -106,8 +125,7 @@ export async function showError(title: string, messages?: string[]): Promise<voi
         /* webpackChunkName: "error-view" */
         "../async-components/structures/ErrorView"
     );
-    const root = createRoot(document.getElementById("matrixchat")!);
-    root.render(
+    getRoot().render(
         <StrictMode>
             <ErrorView title={title} messages={messages} />
         </StrictMode>,
@@ -119,8 +137,7 @@ export async function showIncompatibleBrowser(onAccept: () => void): Promise<voi
         /* webpackChunkName: "error-view" */
         "../async-components/structures/ErrorView"
     );
-    const root = createRoot(document.getElementById("matrixchat")!);
-    root.render(
+    getRoot().render(
         <StrictMode>
             <UnsupportedBrowserView onAccept={onAccept} />
         </StrictMode>,
diff --git a/apps/web/src/vector/jitsi/index.html b/apps/web/src/vector/jitsi/index.html
index 8570e1ded0..a81d9917e9 100644
--- a/apps/web/src/vector/jitsi/index.html
+++ b/apps/web/src/vector/jitsi/index.html
@@ -9,7 +9,7 @@
         <div id="joinButtonContainer">
             <div class="joinConferenceFloating">
                 <div class="joinConferencePrompt">
-                    <%= require('!!raw-loader!@vector-im/compound-design-tokens/icons/video-call-solid.svg').default %>
+                    <%= require('@vector-im/compound-design-tokens/icons/video-call-solid.svg?raw') %>
                     <!-- TODO: i18n -->
                     <h2>Jitsi Video Conference</h2>
                     <div id="widgetActionContainer">
diff --git a/apps/web/src/vector/jitsi/index.ts b/apps/web/src/vector/jitsi/index.ts
index c90dbc8657..09e1e8bc34 100644
--- a/apps/web/src/vector/jitsi/index.ts
+++ b/apps/web/src/vector/jitsi/index.ts
@@ -392,7 +392,6 @@ async function joinConference(audioInput?: string | null, videoInput?: string |
         logger.log("Got OpenID Connect token");
 
         if (!openIdToken?.access_token) {
-            // eslint-disable-line camelcase
             // We've failing to get a token, don't try to init conference
             logger.warn("Expected to have an OpenID credential, cannot initialize widget.");
             document.getElementById("widgetActionContainer")!.innerText = "Failed to load Jitsi widget";
@@ -439,7 +438,7 @@ async function joinConference(audioInput?: string | null, videoInput?: string |
             // back over the iframe API, and therefore end up crashing
             // https://github.com/jitsi/jitsi-meet/issues/11585
             apiLogLevels: ["warn", "error"],
-        } as any,
+        },
         jwt: jwt,
         lang: mapLanguage(normalizeLanguage(language)),
     };
@@ -469,7 +468,7 @@ async function joinConference(audioInput?: string | null, videoInput?: string |
     // (regardless of video on or off)
     meetApi.on("videoConferenceJoined", onVideoConferenceJoined);
     meetApi.on("videoConferenceLeft", onVideoConferenceLeft);
-    meetApi.on("readyToClose", closeConference as ExternalAPIEventCallbacks["readyToClose"]);
+    meetApi.on("readyToClose", closeConference satisfies ExternalAPIEventCallbacks["readyToClose"]);
     meetApi.on("errorOccurred", onErrorOccurred);
     meetApi.on("audioMuteStatusChanged", onMuteStatusChanged);
     meetApi.on("videoMuteStatusChanged", onVideoMuteStatusChanged);
diff --git a/apps/web/src/vector/mobile_guide/index.test.ts b/apps/web/src/vector/mobile_guide/index.test.ts
new file mode 100644
index 0000000000..c22ca8d735
--- /dev/null
+++ b/apps/web/src/vector/mobile_guide/index.test.ts
@@ -0,0 +1,45 @@
+/*
+Copyright 2026 Element Creations 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.
+*/
+
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach, beforeAll } from "vitest";
+import { waitFor } from "@testing-library/dom";
+import fetchMock from "@fetch-mock/vitest";
+
+vi.mock("../getconfig.ts", () => ({
+    getVectorConfig: vi.fn().mockResolvedValue({ default_server_name: "server_name" }),
+}));
+vi.mock("./mobile-apps.ts");
+
+describe("onBackToElementClick", () => {
+    beforeAll(async () => {
+        const backButton = document.createElement("a");
+        backButton.id = "back_to_element_button";
+        backButton.textContent = "Back";
+        document.body.append(backButton);
+
+        fetchMock.get("https://server_name/.well-known/matrix/client", {
+            "m.homeserver": {
+                base_url: "https://server/",
+            },
+        });
+        await import("./index.ts");
+    });
+
+    beforeEach(async () => {
+        sessionStorage.clear();
+    });
+
+    it("should set skip_mobile_redirect in sessionStorage", async () => {
+        expect(sessionStorage.getItem("skip_mobile_redirect")).toBeFalsy();
+        const button = document.getElementById("back_to_element_button")!;
+        await waitFor(() => expect(button.onclick).toBeTruthy());
+        button.click();
+        expect(sessionStorage.getItem("skip_mobile_redirect")).toBe("true");
+    });
+});
diff --git a/apps/web/src/vector/mobile_guide/index.ts b/apps/web/src/vector/mobile_guide/index.ts
index e9732b4035..b8cb06afdf 100644
--- a/apps/web/src/vector/mobile_guide/index.ts
+++ b/apps/web/src/vector/mobile_guide/index.ts
@@ -15,15 +15,14 @@ import { getVectorConfig } from "../getconfig";
 import { MobileAppVariant, mobileApps, updateMobilePage } from "./mobile-apps.ts";
 
 function onBackToElementClick(): void {
-    // Cookie should expire in 4 hours
-    document.cookie = "element_mobile_redirect_to_guide=false;path=/;max-age=14400";
+    sessionStorage.setItem("skip_mobile_redirect", "true");
     window.location.href = "../";
 }
 
 // NEVER pass user-controlled content to this function! Hardcoded strings only please.
 function renderConfigError(message: string): void {
     const contactMsg =
-        "If this is unexpected, please contact your system administrator " + "or technical support representative.";
+        "If this is unexpected, please contact your system administrator or technical support representative.";
     message = `<h2>Error loading Element</h2><p>${message}</p><p>${contactMsg}</p>`;
 
     const toHide = document.getElementsByClassName("mx_HomePage_container");
diff --git a/apps/web/src/vector/mobile_guide/mobile-apps.ts b/apps/web/src/vector/mobile_guide/mobile-apps.ts
index ff3430d6b7..5d6f88439c 100644
--- a/apps/web/src/vector/mobile_guide/mobile-apps.ts
+++ b/apps/web/src/vector/mobile_guide/mobile-apps.ts
@@ -59,7 +59,7 @@ export const mobileApps: Record<MobileAppVariant, MobileAppMetadata> = {
 };
 
 export function updateMobilePage(metadata: MobileAppMetadata, deepLinkUrl: string, server: string | undefined): void {
-    const appleMeta = document.querySelector('meta[name="apple-itunes-app"]') as Element;
+    const appleMeta = document.querySelector('meta[name="apple-itunes-app"]')!;
     appleMeta.setAttribute("content", `app-id=${metadata.appleAppId}`);
 
     if (server) {
@@ -75,7 +75,7 @@ export function updateMobilePage(metadata: MobileAppMetadata, deepLinkUrl: strin
     }
 
     const step1Heading = document.getElementById("step1_heading")!;
-    step1Heading.innerHTML = step1Heading!.innerHTML.replace("Element", metadata.name);
+    step1Heading.innerHTML = step1Heading.innerHTML.replace("Element", metadata.name);
 
     // Step 2 is only shown on the mobile guide, not on mobile.element.io
     if (document.getElementById("step2_container")) {
diff --git a/apps/web/test/unit-tests/vector/platform/ElectronPlatform-test.ts b/apps/web/src/vector/platform/ElectronPlatform.test.ts
similarity index 90%
rename from apps/web/test/unit-tests/vector/platform/ElectronPlatform-test.ts
rename to apps/web/src/vector/platform/ElectronPlatform.test.ts
index f6ff2db07f..48c90a2d33 100644
--- a/apps/web/test/unit-tests/vector/platform/ElectronPlatform-test.ts
+++ b/apps/web/src/vector/platform/ElectronPlatform.test.ts
@@ -6,28 +6,31 @@ 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.
 */
 
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeAll, beforeEach, afterEach, type MockedObject } from "vitest";
 import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
-import { mocked, type MockedObject } from "jest-mock";
-import { waitFor } from "jest-matrix-react";
+import { waitFor } from "test-utils-rtl";
+import { stubClient } from "test-utils";
+import "vitest-canvas-mock";
 
-import { UpdateCheckStatus } from "../../../../src/BasePlatform";
-import { Action } from "../../../../src/dispatcher/actions";
-import dispatcher from "../../../../src/dispatcher/dispatcher";
-import * as rageshake from "../../../../src/rageshake/rageshake";
-import { BreadcrumbsStore } from "../../../../src/stores/BreadcrumbsStore";
-import Modal from "../../../../src/Modal";
-import DesktopCapturerSourcePicker from "../../../../src/components/views/elements/DesktopCapturerSourcePicker";
-import ElectronPlatform from "../../../../src/vector/platform/ElectronPlatform";
-import { stubClient } from "../../../test-utils";
-import ToastStore from "../../../../src/stores/ToastStore.ts";
+import { UpdateCheckStatus } from "../../BasePlatform";
+import { Action } from "../../dispatcher/actions";
+import dispatcher from "../../dispatcher/dispatcher";
+import * as rageshake from "../../rageshake/rageshake";
+import { BreadcrumbsStore } from "../../stores/BreadcrumbsStore";
+import Modal from "../../Modal";
+import DesktopCapturerSourcePicker from "../../components/views/elements/DesktopCapturerSourcePicker";
+import ElectronPlatform from "./ElectronPlatform";
+import ToastStore from "../../stores/ToastStore.ts";
 
-jest.mock("../../../../src/rageshake/rageshake", () => ({
-    flush: jest.fn(),
+vi.mock("../../rageshake/rageshake", () => ({
+    flush: vi.fn(),
 }));
 
 describe("ElectronPlatform", () => {
-    const initialiseValues = jest.fn().mockReturnValue({
+    const initialiseValues = vi.fn().mockReturnValue({
         protocol: "io.element.desktop",
         sessionId: "session-id",
         config: { _config: true },
@@ -38,23 +41,23 @@ describe("ElectronPlatform", () => {
         "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 " +
         "(KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36";
     const mockElectron = {
-        on: jest.fn(),
-        send: jest.fn(),
+        on: vi.fn(),
+        send: vi.fn(),
         initialise: initialiseValues,
-        setSettingValue: jest.fn().mockResolvedValue(undefined),
-        getSettingValue: jest.fn().mockResolvedValue(undefined),
+        setSettingValue: vi.fn().mockResolvedValue(undefined),
+        getSettingValue: vi.fn().mockResolvedValue(undefined),
     } as unknown as MockedObject<Electron>;
 
-    const dispatchSpy = jest.spyOn(dispatcher, "dispatch");
-    const dispatchFireSpy = jest.spyOn(dispatcher, "fire");
-    const logSpy = jest.spyOn(logger, "log").mockImplementation(() => {});
+    const dispatchSpy = vi.spyOn(dispatcher, "dispatch");
+    const dispatchFireSpy = vi.spyOn(dispatcher, "fire");
+    const logSpy = vi.spyOn(logger, "log").mockImplementation(() => {});
 
     const userId = "@alice:server.org";
     const deviceId = "device-id";
 
     beforeEach(() => {
         window.electron = mockElectron;
-        jest.clearAllMocks();
+        vi.clearAllMocks();
         Object.defineProperty(window, "navigator", { value: { userAgent: defaultUserAgent }, writable: true });
     });
 
@@ -83,7 +86,7 @@ describe("ElectronPlatform", () => {
     it("should return oidc client state as expected", async () => {
         const platform = new ElectronPlatform();
         await platform.getConfig();
-        expect(platform.getOidcClientState()).toMatchInlineSnapshot(`":element-desktop-ssoid:session-id"`);
+        expect(platform.getOAuthClientState()).toMatchInlineSnapshot(`":element-desktop-ssoid:session-id"`);
     });
 
     it("dispatches view settings action on preferences event", () => {
@@ -99,10 +102,10 @@ describe("ElectronPlatform", () => {
 
     it("creates a modal on openDesktopCapturerSourcePicker", async () => {
         const plat = new ElectronPlatform();
-        Modal.createDialog = jest.fn();
+        Modal.createDialog = vi.fn();
 
         // @ts-ignore mock
-        mocked(Modal.createDialog).mockReturnValue({
+        vi.mocked(Modal.createDialog).mockReturnValue({
             finished: new Promise((r) => r(["source"])),
         });
 
@@ -111,7 +114,7 @@ describe("ElectronPlatform", () => {
             res = r;
         });
         // @ts-ignore mock
-        jest.spyOn(plat.ipc, "call").mockImplementation(() => {
+        vi.spyOn(plat.ipc, "call").mockImplementation(() => {
             res();
         });
 
@@ -134,7 +137,7 @@ describe("ElectronPlatform", () => {
             },
             true,
         );
-        const spy = jest.spyOn(ToastStore.sharedInstance(), "addOrReplaceToast");
+        const spy = vi.spyOn(ToastStore.sharedInstance(), "addOrReplaceToast");
 
         const [event, handler] = getElectronEventHandlerCall("showToast")!;
         handler({} as any, { title: "title", description: "description" });
@@ -335,7 +338,7 @@ describe("ElectronPlatform", () => {
 
     describe("breadcrumbs", () => {
         it("should send breadcrumb updates over the IPC", () => {
-            const spy = jest.spyOn(BreadcrumbsStore.instance, "on");
+            const spy = vi.spyOn(BreadcrumbsStore.instance, "on");
             new ElectronPlatform();
             const cb = spy.mock.calls[0][1];
             cb();
@@ -352,9 +355,9 @@ describe("ElectronPlatform", () => {
     describe("authenticated media", () => {
         it("should respond to relevant ipc requests", async () => {
             const cli = stubClient();
-            mocked(cli.getAccessToken).mockReturnValue("access_token");
-            mocked(cli.getHomeserverUrl).mockReturnValue("homeserver_url");
-            mocked(cli.getVersions).mockResolvedValue({
+            vi.mocked(cli.getAccessToken).mockReturnValue("access_token");
+            vi.mocked(cli.getHomeserverUrl).mockReturnValue("homeserver_url");
+            vi.mocked(cli.getVersions).mockResolvedValue({
                 versions: ["v1.1"],
                 unstable_features: {},
             });
@@ -443,7 +446,7 @@ describe("ElectronPlatform", () => {
         });
 
         afterEach(() => {
-            jest.clearAllMocks();
+            vi.clearAllMocks();
         });
 
         it("should send a badge with a notification count", async () => {
diff --git a/apps/web/src/vector/platform/ElectronPlatform.tsx b/apps/web/src/vector/platform/ElectronPlatform.tsx
index 941963602e..b81ff40917 100644
--- a/apps/web/src/vector/platform/ElectronPlatform.tsx
+++ b/apps/web/src/vector/platform/ElectronPlatform.tsx
@@ -14,7 +14,7 @@ import {
     type MatrixClient,
     type Room,
     type MatrixEvent,
-    type OidcRegistrationClientMetadata,
+    type OAuthRegistrationRequest,
 } from "matrix-js-sdk/src/matrix";
 import React from "react";
 import { logger } from "matrix-js-sdk/src/logger";
@@ -531,28 +531,28 @@ export default class ElectronPlatform extends BasePlatform {
         return (SdkConfig.get() as unknown as Record<string, string>)["web_base_url"] ?? "https://app.element.io";
     }
 
-    public get defaultOidcClientUri(): string {
+    public get defaultOAuthClientUri(): string {
         // Default to element.io as our scheme `io.element.desktop` is within its scope on default MAS policies
         return "https://element.io";
     }
 
-    public async getOidcClientMetadata(): Promise<OidcRegistrationClientMetadata> {
-        const baseMetadata = await super.getOidcClientMetadata();
+    public async getOAuthClientMetadata(): Promise<OAuthRegistrationRequest> {
+        const baseMetadata = await super.getOAuthClientMetadata();
         return {
             ...baseMetadata,
-            applicationType: "native",
+            application_type: "native",
         };
     }
 
-    public getOidcClientState(): string {
+    public getOAuthClientState(): string {
         return `:${SSO_ID_KEY}:${this.sessionId}`;
     }
 
     /**
      * The URL to return to after a successful OIDC authentication
      */
-    public getOidcCallbackUrl(): URL {
-        const url = super.getOidcCallbackUrl();
+    public getOAuthCallbackUrl(): URL {
+        const url = super.getOAuthCallbackUrl();
         url.protocol = this.protocol;
         // Trim the double slash into a single slash to comply with https://datatracker.ietf.org/doc/html/rfc8252#section-7.1
         if (url.href.startsWith(`${url.protocol}//`)) {
diff --git a/apps/web/test/unit-tests/vector/platform/PWAPlatform-test.ts b/apps/web/src/vector/platform/PWAPlatform.test.ts
similarity index 73%
rename from apps/web/test/unit-tests/vector/platform/PWAPlatform-test.ts
rename to apps/web/src/vector/platform/PWAPlatform.test.ts
index 3ab3e97415..8c6fde8c99 100644
--- a/apps/web/test/unit-tests/vector/platform/PWAPlatform-test.ts
+++ b/apps/web/src/vector/platform/PWAPlatform.test.ts
@@ -6,21 +6,21 @@ 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 { mocked } from "jest-mock";
+import { vi, describe, it, expect, beforeEach } from "vitest";
 
-import PWAPlatform from "../../../../src/vector/platform/PWAPlatform";
-import WebPlatform from "../../../../src/vector/platform/WebPlatform";
+import PWAPlatform from "./PWAPlatform";
+import WebPlatform from "./WebPlatform";
 
-jest.mock("../../../../src/vector/platform/WebPlatform");
+vi.mock("./WebPlatform");
 
 describe("PWAPlatform", () => {
     beforeEach(() => {
-        jest.clearAllMocks();
+        vi.clearAllMocks();
     });
 
     describe("setNotificationCount", () => {
         it("should call Navigator::setAppBadge", () => {
-            navigator.setAppBadge = jest.fn().mockResolvedValue(undefined);
+            navigator.setAppBadge = vi.fn().mockResolvedValue(undefined);
             const platform = new PWAPlatform();
             expect(navigator.setAppBadge).not.toHaveBeenCalled();
             platform.setNotificationCount(123);
@@ -28,7 +28,7 @@ describe("PWAPlatform", () => {
         });
 
         it("should no-op if the badge count isn't changing", () => {
-            navigator.setAppBadge = jest.fn().mockResolvedValue(undefined);
+            navigator.setAppBadge = vi.fn().mockResolvedValue(undefined);
             const platform = new PWAPlatform();
             platform.setNotificationCount(123);
             expect(navigator.setAppBadge).toHaveBeenCalledTimes(1);
@@ -40,14 +40,14 @@ describe("PWAPlatform", () => {
             // @ts-ignore
             navigator.setAppBadge = undefined;
             const platform = new PWAPlatform();
-            const superMethod = mocked(WebPlatform.prototype.setNotificationCount);
+            const superMethod = vi.mocked(WebPlatform.prototype.setNotificationCount);
             expect(superMethod).not.toHaveBeenCalled();
             platform.setNotificationCount(123);
             expect(superMethod).toHaveBeenCalledWith(123);
         });
 
         it("should handle Navigator::setAppBadge rejecting gracefully", () => {
-            navigator.setAppBadge = jest.fn().mockRejectedValue(new Error());
+            navigator.setAppBadge = vi.fn().mockRejectedValue(new Error());
             const platform = new PWAPlatform();
             expect(() => platform.setNotificationCount(123)).not.toThrow();
         });
diff --git a/apps/web/test/unit-tests/vector/platform/WebPlatform-test.ts b/apps/web/src/vector/platform/WebPlatform.test.ts
similarity index 78%
rename from apps/web/test/unit-tests/vector/platform/WebPlatform-test.ts
rename to apps/web/src/vector/platform/WebPlatform.test.ts
index 438968c78a..02fa172055 100644
--- a/apps/web/test/unit-tests/vector/platform/WebPlatform-test.ts
+++ b/apps/web/src/vector/platform/WebPlatform.test.ts
@@ -6,26 +6,30 @@ 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 fetchMock from "@fetch-mock/jest";
+// @vitest-environment happy-dom
 
-import { UpdateCheckStatus } from "../../../../src/BasePlatform";
-import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
-import WebPlatform from "../../../../src/vector/platform/WebPlatform";
-import ToastStore from "../../../../src/stores/ToastStore.ts";
-import defaultDispatcher from "../../../../src/dispatcher/dispatcher.ts";
-import { emitPromise } from "../../../test-utils";
-import { Action } from "../../../../src/dispatcher/actions.ts";
+import { vi, describe, it, expect, afterAll, beforeEach } from "vitest";
+import fetchMock from "@fetch-mock/vitest";
+import { emitPromise } from "test-utils/utilities";
+import "vitest-canvas-mock";
+
+import { UpdateCheckStatus } from "../../BasePlatform";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import WebPlatform from "./WebPlatform";
+import ToastStore from "../../stores/ToastStore.ts";
+import defaultDispatcher from "../../dispatcher/dispatcher.ts";
+import { Action } from "../../dispatcher/actions.ts";
 
 describe("WebPlatform", () => {
     beforeEach(() => {
-        jest.spyOn(global, "navigator", "get").mockReturnValue({
+        vi.spyOn(global, "navigator", "get").mockReturnValue({
             ...navigator,
             // @ts-expect-error - mocking readonly object
             serviceWorker: {
-                register: jest.fn().mockResolvedValue({
-                    update: jest.fn(),
+                register: vi.fn().mockResolvedValue({
+                    update: vi.fn(),
                 }),
-                addEventListener: jest.fn(),
+                addEventListener: vi.fn(),
             },
         });
     });
@@ -42,7 +46,7 @@ describe("WebPlatform", () => {
         });
 
         it("handles errors", async () => {
-            jest.spyOn(global, "navigator", "get").mockReturnValue({
+            vi.spyOn(global, "navigator", "get").mockReturnValue({
                 serviceWorker: {
                     // @ts-expect-error - mocking readonly object
                     register: undefined,
@@ -59,7 +63,7 @@ describe("WebPlatform", () => {
     });
 
     it("should call reload on window location object", () => {
-        Object.defineProperty(window, "location", { value: { reload: jest.fn() }, writable: true });
+        Object.defineProperty(window, "location", { value: { reload: vi.fn() }, writable: true });
 
         const platform = new WebPlatform();
         expect(window.location.reload).not.toHaveBeenCalled();
@@ -68,7 +72,7 @@ describe("WebPlatform", () => {
     });
 
     it("should call reload to install update", () => {
-        Object.defineProperty(window, "location", { value: { reload: jest.fn() }, writable: true });
+        Object.defineProperty(window, "location", { value: { reload: vi.fn() }, writable: true });
 
         const platform = new WebPlatform();
         expect(window.location.reload).not.toHaveBeenCalled();
@@ -85,7 +89,7 @@ describe("WebPlatform", () => {
                 "develop.element.io: Chrome on macOS",
             ],
         ])("%s & %s = %s", (url, userAgent, result) => {
-            jest.spyOn(global, "navigator", "get").mockReturnValue({ userAgent } as Navigator);
+            vi.spyOn(global, "navigator", "get").mockReturnValue({ userAgent } as Navigator);
             Object.defineProperty(window, "location", { value: { href: url }, writable: true });
             const platform = new WebPlatform();
             expect(platform.getDefaultDeviceDisplayName()).toEqual(result);
@@ -94,7 +98,7 @@ describe("WebPlatform", () => {
 
     describe("notification support", () => {
         const mockNotification = {
-            requestPermission: jest.fn(),
+            requestPermission: vi.fn(),
             permission: "notGranted",
         };
         beforeEach(() => {
@@ -132,11 +136,12 @@ describe("WebPlatform", () => {
     });
 
     describe("app version", () => {
+        // oxlint-disable-next-line node/no-process-env
         const envVersion = process.env.VERSION;
         const prodVersion = "1.10.13";
 
         beforeEach(() => {
-            jest.spyOn(MatrixClientPeg, "userRegisteredWithinLastHours").mockReturnValue(false);
+            vi.spyOn(MatrixClientPeg, "userRegisteredWithinLastHours").mockReturnValue(false);
         });
 
         afterAll(() => {
@@ -177,8 +182,8 @@ describe("WebPlatform", () => {
                 fetchMock.getOnce("end:/version", prodVersion);
                 const platform = new WebPlatform();
 
-                const showUpdate = jest.fn();
-                const showNoUpdate = jest.fn();
+                const showUpdate = vi.fn();
+                const showNoUpdate = vi.fn();
                 const result = await platform.pollForUpdate(showUpdate, showNoUpdate);
 
                 expect(result).toEqual({ status: UpdateCheckStatus.NotAvailable });
@@ -192,8 +197,8 @@ describe("WebPlatform", () => {
                 fetchMock.getOnce("end:/version", `v${prodVersion}`);
                 const platform = new WebPlatform();
 
-                const showUpdate = jest.fn();
-                const showNoUpdate = jest.fn();
+                const showUpdate = vi.fn();
+                const showNoUpdate = vi.fn();
                 const result = await platform.pollForUpdate(showUpdate, showNoUpdate);
 
                 // versions only differ by v prefix, no update
@@ -202,33 +207,30 @@ describe("WebPlatform", () => {
                 expect(showNoUpdate).toHaveBeenCalled();
             });
 
-            it(
-                "should return ready and call showUpdate when current version " + "differs from most recent version",
-                async () => {
-                    // @ts-ignore
-                    WebPlatform.VERSION = "0.0.0"; // old version
-                    fetchMock.getOnce("end:/version", prodVersion);
-                    const platform = new WebPlatform();
+            it("should return ready and call showUpdate when current version differs from most recent version", async () => {
+                // @ts-ignore
+                WebPlatform.VERSION = "0.0.0"; // old version
+                fetchMock.getOnce("end:/version", prodVersion);
+                const platform = new WebPlatform();
 
-                    const showUpdate = jest.fn();
-                    const showNoUpdate = jest.fn();
-                    const result = await platform.pollForUpdate(showUpdate, showNoUpdate);
+                const showUpdate = vi.fn();
+                const showNoUpdate = vi.fn();
+                const result = await platform.pollForUpdate(showUpdate, showNoUpdate);
 
-                    expect(result).toEqual({ status: UpdateCheckStatus.Ready });
-                    expect(showUpdate).toHaveBeenCalledWith("0.0.0", prodVersion);
-                    expect(showNoUpdate).not.toHaveBeenCalled();
-                },
-            );
+                expect(result).toEqual({ status: UpdateCheckStatus.Ready });
+                expect(showUpdate).toHaveBeenCalledWith("0.0.0", prodVersion);
+                expect(showNoUpdate).not.toHaveBeenCalled();
+            });
 
             it("should return ready without showing update when user registered in last 24", async () => {
                 // @ts-ignore
                 WebPlatform.VERSION = "0.0.0"; // old version
-                jest.spyOn(MatrixClientPeg, "userRegisteredWithinLastHours").mockReturnValue(true);
+                vi.spyOn(MatrixClientPeg, "userRegisteredWithinLastHours").mockReturnValue(true);
                 fetchMock.getOnce("end:/version", prodVersion);
                 const platform = new WebPlatform();
 
-                const showUpdate = jest.fn();
-                const showNoUpdate = jest.fn();
+                const showUpdate = vi.fn();
+                const showNoUpdate = vi.fn();
                 const result = await platform.pollForUpdate(showUpdate, showNoUpdate);
 
                 expect(result).toEqual({ status: UpdateCheckStatus.Ready });
@@ -240,8 +242,8 @@ describe("WebPlatform", () => {
                 fetchMock.getOnce("end:/version", { throws: "oups" });
                 const platform = new WebPlatform();
 
-                const showUpdate = jest.fn();
-                const showNoUpdate = jest.fn();
+                const showUpdate = vi.fn();
+                const showNoUpdate = vi.fn();
                 const result = await platform.pollForUpdate(showUpdate, showNoUpdate);
 
                 expect(result).toEqual({ status: UpdateCheckStatus.Error, detail: "Unknown Error" });
@@ -260,12 +262,12 @@ describe("WebPlatform", () => {
 
     it("should re-render favicon when setting error status", () => {
         const platform = new WebPlatform();
-        const spy = jest.spyOn(platform.favicon, "badge");
+        const spy = vi.spyOn(platform.favicon, "badge");
         platform.setErrorStatus(true);
         expect(spy).toHaveBeenCalledWith(expect.anything(), { bgColor: "#f00" });
     });
 
-    describe("getOidcCallbackUrl()", () => {
+    describe("getOAuthCallbackUrl()", () => {
         it("should not include the 'updated' query param in the redirect URI", () => {
             Object.defineProperty(window, "location", {
                 value: {
@@ -276,7 +278,7 @@ describe("WebPlatform", () => {
                 writable: true,
             });
             const platform = new WebPlatform();
-            const url = platform.getOidcCallbackUrl();
+            const url = platform.getOAuthCallbackUrl();
 
             expect(url.searchParams.has("updated")).toBe(false);
             expect(url.searchParams.get("no_universal_links")).toEqual("true");
diff --git a/apps/web/src/vector/platform/WebPlatform.ts b/apps/web/src/vector/platform/WebPlatform.ts
index 88aa7ee9cc..a546ad5018 100644
--- a/apps/web/src/vector/platform/WebPlatform.ts
+++ b/apps/web/src/vector/platform/WebPlatform.ts
@@ -35,6 +35,7 @@ function getNormalizedAppVersion(version: string): string {
 }
 
 export default class WebPlatform extends BasePlatform {
+    // oxlint-disable-next-line node/no-process-env
     private static readonly VERSION = process.env.VERSION!; // baked in by Webpack
     private readonly registerServiceWorkerPromise: Promise<void>;
 
diff --git a/apps/web/test/unit-tests/vector/rageshakesetup-test.ts b/apps/web/src/vector/rageshakesetup.test.ts
similarity index 75%
rename from apps/web/test/unit-tests/vector/rageshakesetup-test.ts
rename to apps/web/src/vector/rageshakesetup.test.ts
index 81b5064c71..55f0c25463 100644
--- a/apps/web/test/unit-tests/vector/rageshakesetup-test.ts
+++ b/apps/web/src/vector/rageshakesetup.test.ts
@@ -5,13 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import fetchMock from "@fetch-mock/jest";
+// @vitest-environment happy-dom
 
-import type { Mocked } from "jest-mock";
-import type { ConsoleLogger } from "../../../src/rageshake/rageshake";
-import SdkConfig from "../../../src/SdkConfig";
-import "../../../src/vector/rageshakesetup";
-import { BugReportEndpointURLLocal } from "../../../src/IConfigOptions";
+import { vi, describe, it, expect, beforeEach, afterEach, type Mocked } from "vitest";
+import fetchMock from "@fetch-mock/vitest";
+
+import type { ConsoleLogger } from "../rageshake/rageshake";
+import SdkConfig from "../SdkConfig";
+import "./rageshakesetup";
+import { BugReportEndpointURLLocal } from "../IConfigOptions";
 
 const RAGESHAKE_URL = "https://logs.example.org/logtome";
 
@@ -23,9 +25,9 @@ describe("mxSendRageshake", () => {
         fetchMock.postOnce(RAGESHAKE_URL, { status: 200, body: {} });
 
         const mockConsoleLogger = {
-            flush: jest.fn(),
-            consume: jest.fn(),
-            warn: jest.fn(),
+            flush: vi.fn(),
+            consume: vi.fn(),
+            warn: vi.fn(),
         } as unknown as Mocked<ConsoleLogger>;
         prevLogger = global.mx_rage_logger;
         mockConsoleLogger.flush.mockReturnValue("line 1\nline 2\n");
@@ -34,7 +36,7 @@ describe("mxSendRageshake", () => {
 
     afterEach(() => {
         global.mx_rage_logger = prevLogger;
-        jest.restoreAllMocks();
+        vi.restoreAllMocks();
         fetchMock.unmockGlobal();
         SdkConfig.reset();
     });
@@ -46,7 +48,7 @@ describe("mxSendRageshake", () => {
     });
 
     it.each(["", "  ", undefined, null])("Does not send a rageshake if text is '%s'", async (text) => {
-        await window.mxSendRageshake(text as string);
+        await window.mxSendRageshake(text!);
         expect(fetchMock).not.toHaveFetched();
     });
 
@@ -57,7 +59,7 @@ describe("mxSendRageshake", () => {
 
     it("Provides a rageshake locally", async () => {
         SdkConfig.put({ bug_report_endpoint_url: BugReportEndpointURLLocal });
-        const urlSpy = jest.spyOn(URL, "createObjectURL");
+        const urlSpy = vi.spyOn(URL, "createObjectURL");
         await window.mxSendRageshake("Hello world");
         expect(fetchMock).not.toHaveFetched(RAGESHAKE_URL);
         expect(urlSpy).toHaveBeenCalledTimes(1);
diff --git a/apps/web/test/unit-tests/vector/routing-test.ts b/apps/web/src/vector/routing.test.ts
similarity index 86%
rename from apps/web/test/unit-tests/vector/routing-test.ts
rename to apps/web/src/vector/routing.test.ts
index a9a078f760..809dba582f 100644
--- a/apps/web/test/unit-tests/vector/routing-test.ts
+++ b/apps/web/src/vector/routing.test.ts
@@ -6,16 +6,20 @@ 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 { getInitialScreenAfterLogin, init, onNewScreen } from "../../../src/vector/routing";
-import type MatrixChat from "../../../src/components/structures/MatrixChat.tsx";
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach, afterAll } from "vitest";
+
+import { getInitialScreenAfterLogin, init, onNewScreen } from "./routing";
+import type MatrixChat from "../components/structures/MatrixChat.tsx";
 
 describe("onNewScreen", () => {
     it("should replace history if stripping via fields", () => {
         Object.defineProperty(window, "location", {
             value: {
                 hash: "#/room/!room:server?via=abc",
-                replace: jest.fn(),
-                assign: jest.fn(),
+                replace: vi.fn(),
+                assign: vi.fn(),
             },
             writable: true,
         });
@@ -28,8 +32,8 @@ describe("onNewScreen", () => {
         Object.defineProperty(window, "location", {
             value: {
                 hash: "#/room/!room1:server?via=abc",
-                replace: jest.fn(),
-                assign: jest.fn(),
+                replace: vi.fn(),
+                assign: vi.fn(),
             },
             writable: true,
         });
@@ -41,8 +45,8 @@ describe("onNewScreen", () => {
 
 describe("getInitialScreenAfterLogin", () => {
     beforeEach(() => {
-        jest.spyOn(sessionStorage.__proto__, "getItem").mockClear().mockReturnValue(null);
-        jest.spyOn(sessionStorage.__proto__, "setItem").mockClear();
+        vi.spyOn(sessionStorage, "getItem").mockClear().mockReturnValue(null);
+        vi.spyOn(sessionStorage, "setItem").mockClear();
     });
 
     const makeMockLocation = (hash = "") => {
@@ -65,7 +69,7 @@ describe("getInitialScreenAfterLogin", () => {
             const screen = {
                 screen: "/room/!test",
             };
-            jest.spyOn(sessionStorage.__proto__, "getItem").mockReturnValue(JSON.stringify(screen));
+            vi.spyOn(sessionStorage, "getItem").mockReturnValue(JSON.stringify(screen));
             expect(getInitialScreenAfterLogin(makeMockLocation())).toEqual(screen);
         });
     });
@@ -111,7 +115,7 @@ describe("init", () => {
         });
 
         window.matrixChat = {
-            showScreen: jest.fn(),
+            showScreen: vi.fn(),
         } as unknown as MatrixChat;
 
         init();
diff --git a/apps/web/test/unit-tests/vector/url_utils-test.ts b/apps/web/src/vector/url_utils.test.ts
similarity index 74%
rename from apps/web/test/unit-tests/vector/url_utils-test.ts
rename to apps/web/src/vector/url_utils.test.ts
index ad2c0e0390..30281223ac 100644
--- a/apps/web/test/unit-tests/vector/url_utils-test.ts
+++ b/apps/web/src/vector/url_utils.test.ts
@@ -5,7 +5,9 @@ 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 { parseAppUrl, parseQsFromFragment, searchParamsToQueryDict } from "../../../src/vector/url_utils";
+import { describe, it, expect } from "vitest";
+
+import { parseAppUrl, parseQsFromFragment, searchParamsToQueryDict } from "./url_utils";
 
 // @ts-ignore
 const location: Location = {
@@ -43,18 +45,11 @@ describe("parseUrlParameters", () => {
         expect(parsed.params.legacy_sso?.loginToken).toEqual("foobar");
     });
 
-    it("should parse oidc parameters from fragment", () => {
+    it("should parse oauth2 parameters from fragment", () => {
         const u = new URL("https://app.element.io/#code=foobar&state=barfoo");
         const parsed = parseAppUrl(u);
-        expect(parsed.params.oidc_fragment?.code).toEqual("foobar");
-        expect(parsed.params.oidc_fragment?.state).toEqual("barfoo");
-    });
-
-    it("should parse oidc parameters from query", () => {
-        const u = new URL("https://app.element.io/?code=foobar&state=barfoo");
-        const parsed = parseAppUrl(u);
-        expect(parsed.params.oidc_query?.code).toEqual("foobar");
-        expect(parsed.params.oidc_query?.state).toEqual("barfoo");
+        expect(parsed.params.oauth2?.code).toEqual("foobar");
+        expect(parsed.params.oauth2?.state).toEqual("barfoo");
     });
 
     it("should parse guest parameters", () => {
diff --git a/apps/web/src/vector/url_utils.ts b/apps/web/src/vector/url_utils.ts
index 34d671c678..9af13722c7 100644
--- a/apps/web/src/vector/url_utils.ts
+++ b/apps/web/src/vector/url_utils.ts
@@ -54,16 +54,11 @@ const urlParameterConfig = {
         keys: ["loginToken"],
         location: "query",
     },
-    // Fragment params for OIDC login, added by the Identity Provider
-    oidc_fragment: {
+    // Fragment params for OAuth2 login, added by the Identity Provider
+    oauth2: {
         keys: ["code", "state"],
         location: "fragment",
     },
-    // Query params for OIDC login, added by the Identity Provider, used as fallback when fragment is unsupported
-    oidc_query: {
-        keys: ["code", "state"],
-        location: "query",
-    },
     // Fragment params relating to 3pid (email) invites, added in url within the invite email itself
     threepid: {
         keys: ["client_secret", "session_id", "hs_url", "is_url", "sid"],
@@ -99,7 +94,7 @@ export type URLParams = Partial<{
  * Utility to parse parameters held in the app's URL.
  * Currently focusing only on at-load URL parameters.
  * @param url - the URL to parse.
- * @return an object keyed by the groups defined in {@link urlParameterConfig} with values for each key listed,
+ * @returns an object keyed by the groups defined in {@link urlParameterConfig} with values for each key listed,
  *     sourced from the location (query/fragment/either) specified. If no parameters in a group are found the entire group
  *     will be omitted from the returned object to simplify presence checking.
  */
@@ -120,9 +115,7 @@ export function parseAppUrl(url: Location | URL): {
         if (!params) continue; // no params
 
         const target: Record<string, string> = {};
-        for (const k of groupConfig.keys) {
-            const key = k as (typeof groupConfig)["keys"][number];
-
+        for (const key of groupConfig.keys) {
             const value = params.get(key);
             if (value !== null) {
                 target[key] = value;
@@ -134,5 +127,5 @@ export function parseAppUrl(url: Location | URL): {
         }
     }
 
-    return { params: urlParams as URLParams, location: parsedFragment.location };
+    return { params: urlParams, location: parsedFragment.location };
 }
diff --git a/apps/web/src/verification.test.ts b/apps/web/src/verification.test.ts
new file mode 100644
index 0000000000..e936f9763d
--- /dev/null
+++ b/apps/web/src/verification.test.ts
@@ -0,0 +1,48 @@
+/*
+Copyright 2026 Element Creations 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.
+*/
+
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect } from "vitest";
+import { createTestClient, TestSDKContext } from "test-utils";
+
+import { verifyUser } from "./verification";
+import defaultDispatcher from "./dispatcher/dispatcher";
+import DMRoomMap from "./utils/DMRoomMap.ts";
+import { RightPanelPhases } from "./stores/right-panel/RightPanelStorePhases.ts";
+
+describe("verifyUser", () => {
+    const sdkContext = new TestSDKContext();
+    sdkContext._client = createTestClient();
+    DMRoomMap.makeShared(sdkContext._client);
+
+    it("should require registration if user is a guest", () => {
+        vi.spyOn(defaultDispatcher, "dispatch");
+        vi.spyOn(sdkContext._client!, "isGuest").mockReturnValue(true);
+        verifyUser(
+            sdkContext.rightPanelStore,
+            sdkContext.client!,
+            sdkContext.client!.getUser(sdkContext.client!.getUserId()!)!,
+        );
+        expect(defaultDispatcher.dispatch).toHaveBeenCalledWith({ action: "require_registration" });
+    });
+
+    it("should open verification in right panel", () => {
+        vi.spyOn(sdkContext.rightPanelStore, "setCards");
+        vi.spyOn(sdkContext._client!, "isGuest").mockReturnValue(false);
+        verifyUser(
+            sdkContext.rightPanelStore,
+            sdkContext.client!,
+            sdkContext.client!.getUser(sdkContext.client!.getUserId()!)!,
+        );
+        expect(sdkContext.rightPanelStore.setCards).toHaveBeenCalledWith([
+            { phase: RightPanelPhases.RoomSummary },
+            expect.objectContaining({ phase: RightPanelPhases.MemberInfo }),
+            expect.objectContaining({ phase: RightPanelPhases.EncryptionPanel }),
+        ]);
+    });
+});
diff --git a/apps/web/src/verification.ts b/apps/web/src/verification.ts
index e3e6fb2293..7687363350 100644
--- a/apps/web/src/verification.ts
+++ b/apps/web/src/verification.ts
@@ -11,7 +11,7 @@ import { type VerificationRequest } from "matrix-js-sdk/src/crypto-api";
 
 import dis from "./dispatcher/dispatcher";
 import { RightPanelPhases } from "./stores/right-panel/RightPanelStorePhases";
-import RightPanelStore from "./stores/right-panel/RightPanelStore";
+import type RightPanelStore from "./stores/right-panel/RightPanelStore";
 import { type IRightPanelCardState } from "./stores/right-panel/RightPanelStoreIPanelState";
 import { findDMForUser } from "./utils/dm/findDMForUser";
 
@@ -20,20 +20,20 @@ import { findDMForUser } from "./utils/dm/findDMForUser";
  *
  * Note: cross-signing must be set up before calling this function.
  */
-export async function verifyUser(matrixClient: MatrixClient, user: User): Promise<void> {
+export function verifyUser(rightPanelStore: RightPanelStore, matrixClient: MatrixClient, user: User): void {
     if (matrixClient.isGuest()) {
         dis.dispatch({ action: "require_registration" });
         return;
     }
     const existingRequest = pendingVerificationRequestForUser(matrixClient, user);
-    setRightPanel({ member: user, verificationRequest: existingRequest });
+    setRightPanel(rightPanelStore, { member: user, verificationRequest: existingRequest });
 }
 
-function setRightPanel(state: IRightPanelCardState): void {
-    if (RightPanelStore.instance.roomPhaseHistory.some((card) => card.phase == RightPanelPhases.RoomSummary)) {
-        RightPanelStore.instance.pushCard({ phase: RightPanelPhases.EncryptionPanel, state });
+function setRightPanel(rightPanelStore: RightPanelStore, state: IRightPanelCardState): void {
+    if (rightPanelStore.roomPhaseHistory.some((card) => card.phase == RightPanelPhases.RoomSummary)) {
+        rightPanelStore.pushCard({ phase: RightPanelPhases.EncryptionPanel, state });
     } else {
-        RightPanelStore.instance.setCards([
+        rightPanelStore.setCards([
             { phase: RightPanelPhases.RoomSummary },
             { phase: RightPanelPhases.MemberInfo, state: { member: state.member } },
             { phase: RightPanelPhases.EncryptionPanel, state },
diff --git a/apps/web/src/viewmodels/composer/MessageComposerUrlPreviewViewModel.test.ts b/apps/web/src/viewmodels/composer/MessageComposerUrlPreviewViewModel.test.ts
new file mode 100644
index 0000000000..a93ff8dcd5
--- /dev/null
+++ b/apps/web/src/viewmodels/composer/MessageComposerUrlPreviewViewModel.test.ts
@@ -0,0 +1,145 @@
+/*
+ * Copyright 2026 Element Creations 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 { vi, describe, it, expect, type Mock, beforeAll, afterAll } from "vitest";
+
+import type { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { MessageComposerUrlPreviewViewModel } from "./MessageComposerUrlPreviewViewModel";
+
+const IMAGE_MXC = "mxc://example.org/abc";
+const BASIC_PREVIEW_OGDATA = {
+    "og:title": "This is an example!",
+    "og:description": "This is a description",
+    "og:type": "document",
+    "og:url": "https://example.org",
+    "og:site_name": "Example.org",
+};
+
+function getViewModel({ visible } = { visible: true }): {
+    vm: MessageComposerUrlPreviewViewModel;
+    client: { getUrlPreview: Mock; mxcUrlToHttp: Mock };
+} {
+    const client = {
+        getUrlPreview: vi.fn(),
+        mxcUrlToHttp: vi.fn(),
+    } as unknown as MatrixClient;
+    const vm = new MessageComposerUrlPreviewViewModel({
+        client,
+        visible,
+        showTooltips: false,
+        urlPreviewBundle: false,
+    });
+    return { vm, client: client as unknown as { getUrlPreview: Mock; mxcUrlToHttp: Mock } };
+}
+
+describe("MessageComposerUrlPreviewViewModel", () => {
+    let originalDevicePixelRatio: Window["devicePixelRatio"];
+    beforeAll(() => {
+        originalDevicePixelRatio = window.devicePixelRatio;
+        window.devicePixelRatio = 1;
+    });
+    afterAll(() => {
+        window.devicePixelRatio = originalDevicePixelRatio;
+    });
+
+    it("should return no preview by default", () => {
+        expect(getViewModel().vm.getSnapshot()).toMatchInlineSnapshot(`
+          {
+            "content": "",
+            "previews": [],
+          }
+        `);
+    });
+
+    it("should preview a valid URL in text", async () => {
+        const { vm, client } = getViewModel();
+        client.getUrlPreview.mockResolvedValueOnce(BASIC_PREVIEW_OGDATA);
+        await vm.updateWithText({ content: "Check out https://example.org today", debounced: false });
+        expect(vm.getSnapshot()).toMatchSnapshot();
+    });
+
+    it("should return empty list when preview is not visible", async () => {
+        const { vm, client } = getViewModel({ visible: false });
+        await vm.updateWithText({ content: "https://example.org", debounced: false });
+        expect(vm.getSnapshot().previews).toHaveLength(0);
+        expect(client.getUrlPreview).not.toHaveBeenCalled();
+    });
+
+    it("should return empty list when all URL fetches fail", async () => {
+        const { vm, client } = getViewModel();
+        client.getUrlPreview.mockRejectedValue(new Error("Forced test failure"));
+        await vm.updateWithText({ content: "https://example.org", debounced: false });
+        expect(vm.getSnapshot().previews).toHaveLength(0);
+    });
+
+    it("should use all URLs with a valid preview when multiple are given", async () => {
+        const { vm, client } = getViewModel();
+        client.getUrlPreview
+            .mockRejectedValueOnce(new Error("First URL failed"))
+            .mockResolvedValueOnce(BASIC_PREVIEW_OGDATA);
+        await vm.updateWithText({ content: "https://example.org/one https://example.org/two", debounced: false });
+        expect(vm.getSnapshot().previews[0]?.link).toEqual("https://example.org/two");
+        expect(vm.getSnapshot().previews).toHaveLength(1);
+    });
+
+    it("should not re-fetch when text changes but the URL set does not", async () => {
+        const { vm, client } = getViewModel();
+        client.getUrlPreview.mockResolvedValue(BASIC_PREVIEW_OGDATA);
+        await vm.updateWithText({ content: "https://example.org", debounced: false });
+        await vm.updateWithText({ content: "https://example.org some extra words", debounced: false });
+        expect(client.getUrlPreview).toHaveBeenCalledTimes(1);
+    });
+
+    it("should deduplicate repeated URLs", async () => {
+        const { vm, client } = getViewModel();
+        client.getUrlPreview.mockResolvedValue(BASIC_PREVIEW_OGDATA);
+        await vm.updateWithText({
+            content: "https://example.org https://example.org https://example.org",
+            debounced: false,
+        });
+        expect(client.getUrlPreview).toHaveBeenCalledTimes(1);
+    });
+
+    it("should hide preview when made invisible", async () => {
+        const { vm, client } = getViewModel();
+        client.getUrlPreview.mockResolvedValue(BASIC_PREVIEW_OGDATA);
+        await vm.updateWithText({ content: "https://example.org", debounced: false });
+        expect(vm.getSnapshot().previews).not.toHaveLength(0);
+        await vm.updateUrlPreviewVisible(false);
+        expect(vm.getSnapshot().previews).toHaveLength(0);
+    });
+
+    it("should restore preview when made visible again", async () => {
+        const { vm, client } = getViewModel({ visible: false });
+        client.getUrlPreview.mockResolvedValue(BASIC_PREVIEW_OGDATA);
+        await vm.updateWithText({ content: "https://example.org", debounced: false });
+        expect(vm.getSnapshot().previews).toHaveLength(0);
+        await vm.updateUrlPreviewVisible(true);
+        expect(vm.getSnapshot().previews).not.toHaveLength(0);
+    });
+
+    it("should preview a URL with media", async () => {
+        const { vm, client } = getViewModel();
+        client.getUrlPreview.mockResolvedValueOnce({
+            "og:title": "Media example",
+            "og:type": "document",
+            "og:url": "https://example.org",
+            "og:image": IMAGE_MXC,
+            "og:image:height": 128,
+            "og:image:width": 128,
+            "matrix:image:size": 10000,
+        });
+        // eslint-disable-next-line no-restricted-properties
+        client.mxcUrlToHttp.mockImplementation((url, width) => {
+            expect(url).toEqual(IMAGE_MXC);
+            if (width) return "https://example.org/image/thumb";
+            return "https://example.org/image/src";
+        });
+        await vm.updateWithText({ content: "https://example.org", debounced: false });
+        expect(vm.getSnapshot()).toMatchSnapshot();
+    });
+});
diff --git a/apps/web/src/viewmodels/composer/MessageComposerUrlPreviewViewModel.ts b/apps/web/src/viewmodels/composer/MessageComposerUrlPreviewViewModel.ts
new file mode 100644
index 0000000000..78ae44876a
--- /dev/null
+++ b/apps/web/src/viewmodels/composer/MessageComposerUrlPreviewViewModel.ts
@@ -0,0 +1,142 @@
+/*
+ * Copyright 2026 Element Creations 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 { logger as rootLogger } from "matrix-js-sdk/src/logger";
+import { type MatrixClient } from "matrix-js-sdk/src/matrix";
+import { BaseViewModel, type MessageComposerUrlPreviewSnapshot } from "@element-hq/web-shared-components";
+import { debounce } from "lodash";
+
+import { UrlPreviewFetcher } from "../../utils/UrlPreviewFetcher";
+
+const logger = rootLogger.getChild("MessageComposerUrlPreviewViewModel");
+
+export const DEBOUNCE_REQUEST_TIMEOUT_MS = 500;
+
+export interface MessageComposerUrlPreviewViewModelProps {
+    client: MatrixClient;
+    visible: boolean;
+    showTooltips: boolean;
+    urlPreviewBundle: boolean;
+    content?: string;
+}
+
+export class MessageComposerUrlPreviewViewModel extends BaseViewModel<
+    MessageComposerUrlPreviewSnapshot,
+    MessageComposerUrlPreviewViewModelProps
+> {
+    private readonly fetcher: UrlPreviewFetcher;
+
+    /**
+     * Calculated set of links from the message text.
+     *
+     * Links are inserted in the order they appear in the message text,
+     * which guarantees Array.from(this.links) to be in the same order.
+     */
+    private links: Set<string> = new Set();
+
+    /**
+     * Should the URL preview render according to the application.
+     */
+    private urlPreviewVisible: boolean;
+
+    private content: string;
+
+    public constructor(props: MessageComposerUrlPreviewViewModelProps) {
+        super(props, { previews: [], content: props.content ?? "" });
+        this.urlPreviewVisible = props.visible;
+        this.fetcher = new UrlPreviewFetcher(props.client, Date.now(), props.showTooltips);
+        this.content = this.snapshot.current.content;
+    }
+
+    private async computeSnapshot(content: string): Promise<void> {
+        const newLinksOrdered = content
+            .split(" ")
+            .map((w) => w.trim())
+            .filter((word) => URL.canParse(word));
+        const newLinks = new Set(newLinksOrdered);
+
+        if (!this.urlPreviewVisible) {
+            // Clear any existing previews whenever previews are hidden, regardless of
+            // whether the URL set has changed (e.g. when toggled invisible).
+            this.snapshot.set({ previews: [], content });
+            return;
+        }
+
+        if (this.links.symmetricDifference(newLinks).size === 0) {
+            // Skip if the URL set hasn't changed
+            return;
+        }
+
+        this.links = newLinks;
+
+        let previews;
+        if (this.props.urlPreviewBundle) {
+            const previewRequests = Array.from(this.links).map(async (link) => {
+                try {
+                    return await this.fetcher.fetchPreview(link, true);
+                } catch (ex) {
+                    logger.warn("Fetching preview failed", ex);
+                    return null;
+                }
+            });
+
+            // Fetch previews for all links in the message text,
+            // And remove the ones with erroneous responses
+            const previewResponses = await Promise.all(previewRequests);
+            previews = previewResponses.filter((res) => res !== null);
+
+            this.snapshot.set({ previews, content });
+        } else {
+            for (const link of this.links) {
+                try {
+                    const preview = await this.fetcher.fetchPreview(link, true);
+                    if (preview) {
+                        this.snapshot.set({ previews: [preview], content });
+                        return;
+                    }
+                } catch (ex) {
+                    logger.warn("Fetching preview failed", ex);
+                }
+            }
+
+            this.snapshot.set({ previews: [], content });
+        }
+    }
+
+    /**
+     * Trigger a recalculation of the links in the provided text.
+     * @param content Plaintext from the message composer.
+     */
+    public async updateWithText({ content, debounced }: { content?: string; debounced: boolean }): Promise<void> {
+        if (content !== undefined) {
+            this.content = content;
+        }
+
+        if (debounced) {
+            return this.computeSnapshotDebounced(this.content);
+        } else {
+            return this.computeSnapshot(this.content);
+        }
+    }
+
+    private computeSnapshotDebounced = debounce(
+        (content) => this.computeSnapshot(content),
+        DEBOUNCE_REQUEST_TIMEOUT_MS,
+    );
+
+    /**
+     * Update the view model about visible state of previews.
+     * @param urlPreviewVisible Whether URL previews are hidden for this room.
+     *
+     * @returns A promise that completes when the snapshot has been recomputed.
+     */
+    public readonly updateUrlPreviewVisible = (urlPreviewVisible: boolean): Promise<void> => {
+        this.urlPreviewVisible = urlPreviewVisible;
+        this.fetcher.clearCache();
+        return this.computeSnapshot(this.content);
+    };
+}
diff --git a/apps/web/src/viewmodels/composer/__snapshots__/MessageComposerUrlPreviewViewModel.test.ts.snap b/apps/web/src/viewmodels/composer/__snapshots__/MessageComposerUrlPreviewViewModel.test.ts.snap
new file mode 100644
index 0000000000..9901ba4e50
--- /dev/null
+++ b/apps/web/src/viewmodels/composer/__snapshots__/MessageComposerUrlPreviewViewModel.test.ts.snap
@@ -0,0 +1,49 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MessageComposerUrlPreviewViewModel > should preview a URL with media 1`] = `
+{
+  "content": "https://example.org",
+  "previews": [
+    {
+      "author": undefined,
+      "description": undefined,
+      "image": {
+        "alt": undefined,
+        "fileSize": 10000,
+        "height": 128,
+        "imageFull": "https://example.org/image/src",
+        "imageThumb": "https://example.org/image/thumb",
+        "imageType": undefined,
+        "mxcImageFull": "mxc://example.org/abc",
+        "playable": false,
+        "width": 128,
+      },
+      "link": "https://example.org",
+      "ogUrl": "https://example.org",
+      "showTooltipOnLink": false,
+      "siteIcon": undefined,
+      "siteName": "example.org",
+      "title": "Media example",
+    },
+  ],
+}
+`;
+
+exports[`MessageComposerUrlPreviewViewModel > should preview a valid URL in text 1`] = `
+{
+  "content": "Check out https://example.org today",
+  "previews": [
+    {
+      "author": undefined,
+      "description": "This is a description",
+      "image": undefined,
+      "link": "https://example.org",
+      "ogUrl": "https://example.org",
+      "showTooltipOnLink": false,
+      "siteIcon": undefined,
+      "siteName": "Example.org",
+      "title": "This is an example!",
+    },
+  ],
+}
+`;
diff --git a/apps/web/src/viewmodels/menus/UserMenuViewModel.ts b/apps/web/src/viewmodels/menus/UserMenuViewModel.ts
index 0de9d80e21..a94d5c4308 100644
--- a/apps/web/src/viewmodels/menus/UserMenuViewModel.ts
+++ b/apps/web/src/viewmodels/menus/UserMenuViewModel.ts
@@ -6,8 +6,9 @@
  */
 
 import { BaseViewModel, type UserMenuSnapshot, type UserMenuViewActions } from "@element-hq/web-shared-components";
+import { logger } from "matrix-js-sdk/src/logger";
 
-import { OwnProfileStore } from "../../stores/OwnProfileStore";
+import { type OwnProfileStore } from "../../stores/OwnProfileStore";
 import { UPDATE_EVENT } from "../../stores/AsyncStore";
 import type { MatrixDispatcher } from "../../dispatcher/dispatcher";
 import Modal from "../../Modal";
@@ -18,21 +19,37 @@ import { shouldShowFeedback } from "../../utils/Feedback";
 import { getHomePageUrl } from "../../utils/pages";
 import SdkConfig from "../../SdkConfig";
 import type { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { clearAllUserStatus } from "../../utils/userStatus";
+import { type SetStatusViewModel, UserMenuSetStatusViewModel } from "../status/SetStatusViewModel";
+import SettingsStore from "../../settings/SettingsStore";
 
 // Matches maximum size of an avatar in the UserMenu
 const AVATAR_PX = 88;
 
-export class UserMenuViewModel extends BaseViewModel<UserMenuSnapshot, undefined> implements UserMenuViewActions {
+interface UserMenuViewModelProps {
+    ownProfileStore: OwnProfileStore;
+}
+
+export class UserMenuViewModel
+    extends BaseViewModel<UserMenuSnapshot, UserMenuViewModelProps>
+    implements UserMenuViewActions
+{
+    public readonly setStatusVm: SetStatusViewModel;
     private static computeSnapshot(
         client: MatrixClient,
+        ownProfileStore: OwnProfileStore,
         isPanelCollapsed: boolean,
-        accountManagementEndpoint?: string,
     ): UserMenuSnapshot {
         const hasHomePage = !!getHomePageUrl(SdkConfig.get(), client);
         const isAuthenticated = !client.isGuest();
         const userId = client.getSafeUserId();
-        const displayName = OwnProfileStore.instance.displayName || userId;
-        const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(AVATAR_PX) ?? undefined;
+        const displayName = ownProfileStore.displayName || userId;
+        const avatarUrl = ownProfileStore.getHttpAvatarUrl(AVATAR_PX) ?? undefined;
+
+        const setStatusViewModel = new UserMenuSetStatusViewModel({
+            client,
+            ownProfileStore,
+        });
 
         return {
             open: false,
@@ -40,8 +57,11 @@ export class UserMenuViewModel extends BaseViewModel<UserMenuSnapshot, undefined
             displayName,
             avatarUrl,
             expanded: !isPanelCollapsed,
-            manageAccountHref: accountManagementEndpoint,
+            manageAccountHref: undefined, // loaded async
             showAvatar: isAuthenticated,
+            userStatus: ownProfileStore.userStatus,
+            showUserStatus: SettingsStore.getValue("feature_user_status") && isAuthenticated,
+            setStatusViewModel,
             actions: {
                 createAccount: !isAuthenticated,
                 signIn: !isAuthenticated,
@@ -55,24 +75,28 @@ export class UserMenuViewModel extends BaseViewModel<UserMenuSnapshot, undefined
     }
 
     public constructor(
+        props: UserMenuViewModelProps,
         private readonly dispatcher: MatrixDispatcher,
-        client: MatrixClient,
+        private readonly client: MatrixClient,
         isPanelCollapsed: boolean,
-        accountManagementEndpoint?: string,
     ) {
-        super(undefined, UserMenuViewModel.computeSnapshot(client, isPanelCollapsed, accountManagementEndpoint));
-        OwnProfileStore.instance.on(UPDATE_EVENT, this.recalculateProfile);
+        super(props, UserMenuViewModel.computeSnapshot(client, props.ownProfileStore, isPanelCollapsed));
+        this.setStatusVm = new UserMenuSetStatusViewModel({ client, ownProfileStore: props.ownProfileStore });
+        props.ownProfileStore.on(UPDATE_EVENT, this.recalculateProfile);
+        this.loadAuthMetadata();
     }
 
     public dispose(): void {
-        OwnProfileStore.instance.off(UPDATE_EVENT, this.recalculateProfile);
+        this.props.ownProfileStore.off(UPDATE_EVENT, this.recalculateProfile);
+        this.setStatusVm.dispose();
         super.dispose();
     }
 
     public readonly recalculateProfile = (): void => {
-        const displayName = OwnProfileStore.instance.displayName || this.snapshot.current.userId;
-        const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(AVATAR_PX) ?? undefined;
-        this.snapshot.merge({ displayName, avatarUrl });
+        const displayName = this.props.ownProfileStore.displayName || this.snapshot.current.userId;
+        const avatarUrl = this.props.ownProfileStore.getHttpAvatarUrl(AVATAR_PX) ?? undefined;
+        const userStatus = this.props.ownProfileStore.userStatus;
+        this.snapshot.merge({ displayName, avatarUrl, userStatus });
     };
 
     public readonly setOpen = (isOpen: boolean): void => {
@@ -126,4 +150,16 @@ export class UserMenuViewModel extends BaseViewModel<UserMenuSnapshot, undefined
             action: Action.ViewUserSettings,
         });
     };
+
+    public readonly clearStatus = (): void => {
+        this.setOpen(false);
+        clearAllUserStatus(this.client).catch((err) => {
+            logger.warn("Failed to clear user status", err);
+        });
+    };
+
+    private async loadAuthMetadata(): Promise<void> {
+        const authMetadata = await this.client.getAuthMetadata().catch(() => {});
+        this.snapshot.merge({ manageAccountHref: authMetadata?.account_management_uri });
+    }
 }
diff --git a/apps/web/src/viewmodels/message-body/FileBodyViewModel.ts b/apps/web/src/viewmodels/message-body/FileBodyViewModel.ts
index 0e08b706f7..a4ad71bc78 100644
--- a/apps/web/src/viewmodels/message-body/FileBodyViewModel.ts
+++ b/apps/web/src/viewmodels/message-body/FileBodyViewModel.ts
@@ -16,6 +16,8 @@ import {
     type FileBodyViewSnapshot,
     type FileBodyViewModel as FileBodyViewModelInterface,
 } from "@element-hq/web-shared-components";
+// eslint-disable-next-line no-restricted-imports
+import DownloadSvg from "@vector-im/compound-design-tokens/icons/download.svg";
 
 import Modal from "../../Modal";
 import { _t } from "../../languageHandler";
@@ -42,10 +44,7 @@ const downloadIconCache = { url: "" };
 
 async function cacheDownloadIcon(): Promise<string> {
     if (downloadIconCache.url) return downloadIconCache.url;
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    const svg = await fetch(require("@vector-im/compound-design-tokens/icons/download.svg").default).then((r) =>
-        r.text(),
-    );
+    const svg = await fetch(DownloadSvg).then((r) => r.text());
     downloadIconCache.url = "data:image/svg+xml;base64," + window.btoa(svg);
     return downloadIconCache.url;
 }
@@ -87,7 +86,7 @@ cacheDownloadIcon();
 /**
  * Get the current CSS style for a DOMElement.
  * @param {HTMLElement} element The element to get the current style of.
- * @return {string} The CSS style encoded as a string.
+ * @returns {string} The CSS style encoded as a string.
  */
 function computedStyle(element: HTMLElement | null): string {
     if (!element) {
diff --git a/apps/web/src/viewmodels/message-body/ImageBodyViewModel.ts b/apps/web/src/viewmodels/message-body/ImageBodyViewModel.ts
new file mode 100644
index 0000000000..62bf21e01d
--- /dev/null
+++ b/apps/web/src/viewmodels/message-body/ImageBodyViewModel.ts
@@ -0,0 +1,677 @@
+/*
+ * Copyright 2026 Element Creations 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 ComponentProps, type MouseEvent, type RefObject } from "react";
+import { logger } from "matrix-js-sdk/src/logger";
+import { ClientEvent, type MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { type ImageContent } from "matrix-js-sdk/src/types";
+import {
+    BaseViewModel,
+    ImageBodyViewPlaceholder,
+    ImageBodyViewState,
+    type ImageBodyViewModel as ImageBodyViewModelInterface,
+    type ImageBodyViewSnapshot,
+} from "@element-hq/web-shared-components";
+
+import Modal from "../../Modal";
+import { MatrixClientPeg } from "../../MatrixClientPeg";
+import { _t } from "../../languageHandler";
+import { mediaFromContent } from "../../customisations/Media";
+import { TimelineRenderingType } from "../../contexts/RoomContext";
+import SettingsStore from "../../settings/SettingsStore";
+import { type ImageSize, suggestedSize as suggestedImageSize } from "../../settings/enums/ImageSize";
+import { presentableTextForFile } from "../../utils/FileUtils";
+import { type MediaEventHelper } from "../../utils/MediaEventHelper";
+import { blobIsAnimated, mayBeAnimated } from "../../utils/Image";
+import { type RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
+import { createReconnectedListener } from "../../utils/connection";
+import { DecryptError, DownloadError } from "../../utils/DecryptFile";
+// ThreadNet-Fork: ClamAV-Client-Scanning. Der Haken sass frueher in
+// components/views/messages/MImageBody.tsx - die Datei hat Upstream beim
+// MVVM-Umbau entfernt (v1.12.26). Hier ist die neue Stelle; gleiches Muster wie
+// in VideoBodyViewModel.ts und FileBodyViewModel.ts.
+import { ContentScanRejectedError } from "../../utils/ContentScanner";
+import { BLURHASH_FIELD, createThumbnail } from "../../utils/image-media";
+import { isMimeTypeAllowed } from "../../utils/blobs";
+import ImageView from "../../components/views/elements/ImageView";
+
+export interface ImageBodyViewModelProps {
+    /**
+     * Image event being rendered.
+     */
+    mxEvent: MatrixEvent;
+    /**
+     * Helper for resolving encrypted media sources.
+     */
+    mediaEventHelper?: MediaEventHelper;
+    /**
+     * Whether the image is being rendered for export instead of the live timeline.
+     */
+    forExport?: boolean;
+    /**
+     * Optional maximum height applied when computing the rendered image dimensions.
+     */
+    maxImageHeight?: number;
+    /**
+     * Whether the media should currently be shown instead of the hidden-media preview.
+     */
+    mediaVisible: boolean;
+    /**
+     * Permalink helper passed to the image lightbox.
+     */
+    permalinkCreator?: RoomPermalinkCreator;
+    /**
+     * Timeline context used to decide which labels and supplemental content should be shown.
+     */
+    timelineRenderingType: TimelineRenderingType;
+    /**
+     * Ref to the underlying image element used for load dimensions and lightbox animation.
+     */
+    imageRef: RefObject<HTMLImageElement | null>;
+    /**
+     * Callback invoked when hidden media is revealed.
+     */
+    setMediaVisible?: (visible: boolean) => void;
+}
+
+interface LoadedImageDimensions {
+    naturalWidth: number;
+    naturalHeight: number;
+}
+
+interface InternalState {
+    contentUrl: string | null;
+    thumbUrl: string | null;
+    isAnimated: boolean;
+    error: unknown | null;
+    imgError: boolean;
+    imgLoaded: boolean;
+    loadedImageDimensions?: LoadedImageDimensions;
+    placeholder: ImageBodyViewPlaceholder;
+    imageSize: ImageSize;
+    generatedThumbnailUrl: string | null;
+}
+
+/**
+ * View model for the image message body, encapsulating media loading, sizing,
+ * visibility, animated-image previews, and lightbox interactions.
+ */
+export class ImageBodyViewModel
+    extends BaseViewModel<ImageBodyViewSnapshot, ImageBodyViewModelProps>
+    implements ImageBodyViewModelInterface
+{
+    private state: InternalState;
+    private blurhashTimeout?: number;
+
+    private readonly reconnectedListener = createReconnectedListener((): void => {
+        MatrixClientPeg.get()?.off(ClientEvent.Sync, this.reconnectedListener);
+
+        if (!this.state.imgError) {
+            return;
+        }
+
+        this.state = {
+            ...this.state,
+            imgError: false,
+        };
+        this.updateSnapshotFromState();
+    });
+
+    public constructor(props: ImageBodyViewModelProps) {
+        const initialState = ImageBodyViewModel.createInitialState(props.mxEvent);
+        super(props, ImageBodyViewModel.computeSnapshot(props, initialState));
+        this.state = initialState;
+
+        const imageSizeWatcherRef = SettingsStore.watchSetting("Images.size", null, (_s, _r, _l, _nvl, value) => {
+            this.setImageSize(value!);
+        });
+        this.disposables.track(() => SettingsStore.unwatchSetting(imageSizeWatcherRef));
+    }
+
+    private static createInitialState(mxEvent: MatrixEvent): InternalState {
+        return {
+            contentUrl: null,
+            thumbUrl: null,
+            isAnimated: false,
+            error: null,
+            imgError: false,
+            imgLoaded: false,
+            loadedImageDimensions: undefined,
+            placeholder: mxEvent.getContent<ImageContent>().info?.[BLURHASH_FIELD]
+                ? ImageBodyViewPlaceholder.NONE
+                : ImageBodyViewPlaceholder.SPINNER,
+            imageSize: SettingsStore.getValue("Images.size"),
+            generatedThumbnailUrl: null,
+        };
+    }
+
+    private static getImageDimensions(
+        props: ImageBodyViewModelProps,
+        state: InternalState,
+    ): Pick<ImageBodyViewSnapshot, "maxWidth" | "maxHeight" | "aspectRatio" | "isSvg"> {
+        const content = props.mxEvent.getContent<ImageContent>();
+        const info = content.info;
+        const naturalWidth = info?.w ?? state.loadedImageDimensions?.naturalWidth;
+        const naturalHeight = info?.h ?? state.loadedImageDimensions?.naturalHeight;
+
+        if (!naturalWidth || !naturalHeight) {
+            return {
+                maxWidth: undefined,
+                maxHeight: undefined,
+                aspectRatio: undefined,
+                isSvg: info?.mimetype === "image/svg+xml",
+            };
+        }
+
+        const { w: maxWidth, h: maxHeight } = suggestedImageSize(
+            state.imageSize,
+            { w: naturalWidth, h: naturalHeight },
+            props.maxImageHeight,
+        );
+
+        return {
+            maxWidth,
+            maxHeight,
+            aspectRatio: `${naturalWidth}/${naturalHeight}`,
+            isSvg: info?.mimetype === "image/svg+xml",
+        };
+    }
+
+    private static computeErrorLabel(error: unknown, imgError: boolean): string {
+        // Vor DecryptError pruefen: eine abgelehnte Datei ist kein Entschluesselungsfehler,
+        // und der Nutzer soll den Grund sehen (ThreadNet-Fork, ClamAV).
+        if (error instanceof ContentScanRejectedError) return _t("timeline|m.image|error_scan_rejected");
+        if (error instanceof DecryptError) return _t("timeline|m.image|error_decrypting");
+        if (error instanceof DownloadError) return _t("timeline|m.image|error_downloading");
+        if (imgError || error) return _t("timeline|m.image|error");
+
+        return _t("timeline|m.image|error");
+    }
+
+    private static shouldShowBanner(timelineRenderingType: TimelineRenderingType): boolean {
+        return ![TimelineRenderingType.ThreadsList, TimelineRenderingType.File].includes(timelineRenderingType);
+    }
+
+    private static computeSnapshot(props: ImageBodyViewModelProps, state: InternalState): ImageBodyViewSnapshot {
+        const content = props.mxEvent.getContent<ImageContent>();
+        const dimensions = ImageBodyViewModel.getImageDimensions(props, state);
+        const autoplayGifs = SettingsStore.getValue("autoplayGifs");
+        const contentUrl = ImageBodyViewModel.getContentUrl(props, state);
+        const thumbnailSrc = props.forExport
+            ? (contentUrl ?? undefined)
+            : state.isAnimated && autoplayGifs
+              ? (contentUrl ?? undefined)
+              : (state.thumbUrl ?? contentUrl ?? undefined);
+
+        if (state.error || state.imgError) {
+            return {
+                state: ImageBodyViewState.ERROR,
+                errorLabel: ImageBodyViewModel.computeErrorLabel(state.error, state.imgError),
+                ...dimensions,
+            };
+        }
+
+        if (!props.mediaVisible) {
+            return {
+                state: ImageBodyViewState.HIDDEN,
+                hiddenButtonLabel: _t("timeline|m.image|show_image"),
+                ...dimensions,
+            };
+        }
+
+        return {
+            state: ImageBodyViewState.READY,
+            alt: content.body,
+            src: contentUrl ?? undefined,
+            thumbnailSrc,
+            showAnimatedContentOnHover: state.isAnimated && !autoplayGifs && !!contentUrl,
+            placeholder: !props.forExport && !state.imgLoaded ? state.placeholder : ImageBodyViewPlaceholder.NONE,
+            blurhash: content.info?.[BLURHASH_FIELD],
+            gifLabel: state.isAnimated && !autoplayGifs ? "GIF" : undefined,
+            bannerLabel: ImageBodyViewModel.shouldShowBanner(props.timelineRenderingType)
+                ? presentableTextForFile(content, _t("common|image"), true, true)
+                : undefined,
+            linkUrl: contentUrl ?? undefined,
+            linkTarget: props.forExport ? "_blank" : undefined,
+            ...dimensions,
+        };
+    }
+
+    private static getContentUrl(props: ImageBodyViewModelProps, state: InternalState): string | null {
+        if (props.forExport) {
+            return (
+                props.mxEvent.getContent<ImageContent>().url ??
+                props.mxEvent.getContent<ImageContent>().file?.url ??
+                null
+            );
+        }
+
+        return state.contentUrl;
+    }
+
+    public loadInitialMediaIfVisible(): void {
+        if (!this.props.mediaVisible) {
+            return;
+        }
+
+        this.scheduleBlurhashPlaceholder();
+        void this.downloadImage();
+    }
+
+    private updateSnapshotFromState(): void {
+        this.snapshot.set(ImageBodyViewModel.computeSnapshot(this.props, this.state));
+    }
+
+    private resetState(mxEvent: MatrixEvent): void {
+        this.clearBlurhashTimeout();
+        MatrixClientPeg.get()?.off(ClientEvent.Sync, this.reconnectedListener);
+        this.revokeGeneratedThumbnailUrl();
+        this.state = ImageBodyViewModel.createInitialState(mxEvent);
+    }
+
+    private revokeGeneratedThumbnailUrl(): void {
+        if (!this.state.generatedThumbnailUrl) {
+            return;
+        }
+
+        URL.revokeObjectURL(this.state.generatedThumbnailUrl);
+        this.state = {
+            ...this.state,
+            generatedThumbnailUrl: null,
+        };
+    }
+
+    private clearBlurhashTimeout(): void {
+        if (!this.blurhashTimeout) {
+            return;
+        }
+
+        clearTimeout(this.blurhashTimeout);
+        this.blurhashTimeout = undefined;
+    }
+
+    private scheduleBlurhashPlaceholder(): void {
+        if (
+            !this.props.mxEvent.getContent<ImageContent>().info?.[BLURHASH_FIELD] ||
+            this.state.imgLoaded ||
+            this.state.imgError
+        ) {
+            return;
+        }
+
+        this.clearBlurhashTimeout();
+        this.blurhashTimeout = window.setTimeout(() => {
+            if (this.isDisposed || this.state.imgLoaded || this.state.imgError) {
+                return;
+            }
+
+            this.state = {
+                ...this.state,
+                placeholder: ImageBodyViewPlaceholder.BLURHASH,
+            };
+            this.snapshot.merge({ placeholder: ImageBodyViewPlaceholder.BLURHASH });
+        }, 150);
+    }
+
+    private getThumbUrl(): string | null {
+        const thumbWidth = 800;
+        const thumbHeight = 600;
+
+        const content = this.props.mxEvent.getContent<ImageContent>();
+        const media = mediaFromContent(content);
+        const info = content.info;
+
+        if (info?.mimetype === "image/svg+xml" && media.hasThumbnail) {
+            return media.getThumbnailHttp(thumbWidth, thumbHeight, "scale");
+        }
+
+        if (this.state.isAnimated || window.devicePixelRatio === 1.0 || !info || !info.w || !info.h || !info.size) {
+            return media.getThumbnailOfSourceHttp(thumbWidth, thumbHeight);
+        }
+
+        const isLargerThanThumbnail = info.w > thumbWidth || info.h > thumbHeight;
+        const isLargeFileSize = info.size > 1 * 1024 * 1024;
+
+        if (isLargeFileSize && isLargerThanThumbnail) {
+            return media.getThumbnailOfSourceHttp(thumbWidth, thumbHeight);
+        }
+
+        return media.srcHttp;
+    }
+
+    private async downloadImage(): Promise<void> {
+        if (this.state.contentUrl || this.props.forExport) {
+            return;
+        }
+
+        let thumbUrl: string | null;
+        let contentUrl: string | null;
+
+        if (this.props.mediaEventHelper?.media.isEncrypted) {
+            try {
+                [contentUrl, thumbUrl] = await Promise.all([
+                    this.props.mediaEventHelper.sourceUrl.value,
+                    this.props.mediaEventHelper.thumbnailUrl.value,
+                ]);
+            } catch (error) {
+                if (this.isDisposed) {
+                    return;
+                }
+
+                if (error instanceof DecryptError) {
+                    logger.error("Unable to decrypt attachment: ", error);
+                } else if (error instanceof DownloadError) {
+                    logger.error("Unable to download attachment to decrypt it: ", error);
+                } else {
+                    logger.error("Error encountered when downloading encrypted attachment: ", error);
+                }
+
+                this.state = {
+                    ...this.state,
+                    error,
+                };
+                this.updateSnapshotFromState();
+                return;
+            }
+        } else {
+            contentUrl = mediaFromContent(this.props.mxEvent.getContent<ImageContent>()).srcHttp;
+            thumbUrl = this.getThumbUrl();
+        }
+
+        const content = this.props.mxEvent.getContent<ImageContent>();
+        let generatedThumbnailUrl: string | null = null;
+        let isAnimated = content.info?.["org.matrix.msc4230.is_animated"];
+        if (isAnimated === undefined) {
+            isAnimated = mayBeAnimated(content.info?.mimetype);
+        }
+
+        const autoplayGifs = SettingsStore.getValue("autoplayGifs");
+        if (isAnimated && !autoplayGifs) {
+            if (!thumbUrl || !content.info?.thumbnail_info || mayBeAnimated(content.info.thumbnail_info.mimetype)) {
+                const image = document.createElement("img");
+                const loadPromise = new Promise<void>((resolve, reject) => {
+                    image.onload = (): void => resolve();
+                    image.onerror = (): void => reject(new Error("Unable to load image"));
+                });
+
+                image.crossOrigin = "Anonymous";
+                image.src = contentUrl ?? "";
+
+                try {
+                    await loadPromise;
+                } catch (error) {
+                    logger.error("Unable to download attachment: ", error);
+                    this.state = {
+                        ...this.state,
+                        error,
+                    };
+                    this.updateSnapshotFromState();
+                    return;
+                }
+
+                try {
+                    if (
+                        content.info?.["org.matrix.msc4230.is_animated"] === false ||
+                        (this.props.mediaEventHelper &&
+                            (await blobIsAnimated(await this.props.mediaEventHelper.sourceBlob.value)) === false)
+                    ) {
+                        isAnimated = false;
+                    }
+
+                    if (isAnimated) {
+                        const thumbnail = await createThumbnail(
+                            image,
+                            image.width,
+                            image.height,
+                            content.info?.mimetype ?? "image/jpeg",
+                            false,
+                        );
+                        generatedThumbnailUrl = URL.createObjectURL(thumbnail.thumbnail);
+                        thumbUrl = generatedThumbnailUrl;
+                    }
+                } catch (error) {
+                    logger.warn("Unable to generate thumbnail for animated image: ", error);
+                }
+            }
+        }
+
+        if (this.isDisposed) {
+            if (generatedThumbnailUrl) {
+                URL.revokeObjectURL(generatedThumbnailUrl);
+            }
+            return;
+        }
+
+        this.revokeGeneratedThumbnailUrl();
+        this.state = {
+            ...this.state,
+            contentUrl,
+            thumbUrl,
+            isAnimated,
+            error: null,
+            generatedThumbnailUrl,
+        };
+        this.updateSnapshotFromState();
+    }
+
+    private openImageViewer(event: MouseEvent<HTMLAnchorElement>): void {
+        if (event.button !== 0 || event.metaKey) {
+            return;
+        }
+
+        event.preventDefault();
+
+        if (!this.props.mediaVisible) {
+            this.props.setMediaVisible?.(true);
+            return;
+        }
+
+        const content = this.props.mxEvent.getContent<ImageContent>();
+
+        let httpUrl = this.state.contentUrl;
+        if (
+            this.props.mediaEventHelper?.media.isEncrypted &&
+            !isMimeTypeAllowed(this.props.mediaEventHelper.sourceBlob.cachedValue?.type ?? "")
+        ) {
+            httpUrl = this.state.thumbUrl;
+        }
+
+        if (!httpUrl) {
+            return;
+        }
+
+        const params: Omit<ComponentProps<typeof ImageView>, "onFinished"> = {
+            src: httpUrl,
+            name: content.body && content.body.length > 0 ? content.body : _t("common|attachment"),
+            mxEvent: this.props.mxEvent,
+            permalinkCreator: this.props.permalinkCreator,
+        };
+
+        if (content.info) {
+            params.width = content.info.w;
+            params.height = content.info.h;
+            params.fileSize = content.info.size;
+        }
+
+        if (this.props.imageRef.current) {
+            const clientRect = this.props.imageRef.current.getBoundingClientRect();
+            params.thumbnailInfo = {
+                width: clientRect.width,
+                height: clientRect.height,
+                positionX: clientRect.x,
+                positionY: clientRect.y,
+            };
+        }
+
+        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox", undefined, true);
+    }
+
+    public onLinkClick = (event: MouseEvent<HTMLAnchorElement>): void => {
+        this.openImageViewer(event);
+    };
+
+    public onHiddenButtonClick = (): void => {
+        this.props.setMediaVisible?.(true);
+    };
+
+    public onImageError = (): void => {
+        if (this.state.thumbUrl && this.state.thumbUrl !== this.state.contentUrl) {
+            this.state = {
+                ...this.state,
+                thumbUrl: null,
+            };
+            this.updateSnapshotFromState();
+            return;
+        }
+
+        this.clearBlurhashTimeout();
+
+        if (this.state.imgError) {
+            return;
+        }
+
+        this.state = {
+            ...this.state,
+            imgError: true,
+        };
+        MatrixClientPeg.safeGet().on(ClientEvent.Sync, this.reconnectedListener);
+        this.updateSnapshotFromState();
+    };
+
+    public onImageLoad = (): void => {
+        this.clearBlurhashTimeout();
+
+        let loadedImageDimensions: LoadedImageDimensions | undefined;
+        if (this.props.imageRef.current) {
+            const { naturalWidth, naturalHeight } = this.props.imageRef.current;
+            loadedImageDimensions = { naturalWidth, naturalHeight };
+        }
+
+        this.state = {
+            ...this.state,
+            imgLoaded: true,
+            loadedImageDimensions,
+            placeholder: ImageBodyViewPlaceholder.NONE,
+        };
+        this.updateSnapshotFromState();
+    };
+
+    public setEvent(mxEvent: MatrixEvent, mediaEventHelper?: MediaEventHelper): void {
+        if (this.props.mxEvent === mxEvent && this.props.mediaEventHelper === mediaEventHelper) {
+            return;
+        }
+
+        const previousVisible = this.props.mediaVisible;
+        this.props = {
+            ...this.props,
+            mxEvent,
+            mediaEventHelper,
+        };
+        this.resetState(mxEvent);
+        this.updateSnapshotFromState();
+
+        if (previousVisible) {
+            this.scheduleBlurhashPlaceholder();
+            void this.downloadImage();
+        }
+    }
+
+    public setForExport(forExport?: boolean): void {
+        if (this.props.forExport === forExport) {
+            return;
+        }
+
+        this.props = {
+            ...this.props,
+            forExport,
+        };
+        this.updateSnapshotFromState();
+    }
+
+    public setMaxImageHeight(maxImageHeight?: number): void {
+        if (this.props.maxImageHeight === maxImageHeight) {
+            return;
+        }
+
+        this.props = {
+            ...this.props,
+            maxImageHeight,
+        };
+        this.updateSnapshotFromState();
+    }
+
+    public setMediaVisible(mediaVisible: boolean): void {
+        if (this.props.mediaVisible === mediaVisible) {
+            return;
+        }
+
+        const wasVisible = this.props.mediaVisible;
+        this.props = {
+            ...this.props,
+            mediaVisible,
+        };
+        this.updateSnapshotFromState();
+
+        if (!wasVisible && mediaVisible) {
+            this.scheduleBlurhashPlaceholder();
+            void this.downloadImage();
+        }
+    }
+
+    public setPermalinkCreator(permalinkCreator?: RoomPermalinkCreator): void {
+        if (this.props.permalinkCreator === permalinkCreator) {
+            return;
+        }
+
+        this.props = {
+            ...this.props,
+            permalinkCreator,
+        };
+    }
+
+    public setTimelineRenderingType(timelineRenderingType: TimelineRenderingType): void {
+        if (this.props.timelineRenderingType === timelineRenderingType) {
+            return;
+        }
+
+        this.props = {
+            ...this.props,
+            timelineRenderingType,
+        };
+        this.snapshot.merge(ImageBodyViewModel.computeSnapshot(this.props, this.state));
+    }
+
+    public setSetMediaVisible(setMediaVisible?: (visible: boolean) => void): void {
+        if (this.props.setMediaVisible === setMediaVisible) {
+            return;
+        }
+
+        this.props = {
+            ...this.props,
+            setMediaVisible,
+        };
+    }
+
+    private setImageSize(imageSize: ImageSize): void {
+        if (this.state.imageSize === imageSize) {
+            return;
+        }
+
+        this.state = {
+            ...this.state,
+            imageSize,
+        };
+        this.updateSnapshotFromState();
+    }
+
+    public dispose(): void {
+        this.clearBlurhashTimeout();
+        MatrixClientPeg.get()?.off(ClientEvent.Sync, this.reconnectedListener);
+        this.revokeGeneratedThumbnailUrl();
+        super.dispose();
+    }
+}
diff --git a/apps/web/src/viewmodels/message-body/RedactedBodyViewModel.ts b/apps/web/src/viewmodels/message-body/RedactedBodyViewModel.ts
index 490f7be43f..9e412590e1 100644
--- a/apps/web/src/viewmodels/message-body/RedactedBodyViewModel.ts
+++ b/apps/web/src/viewmodels/message-body/RedactedBodyViewModel.ts
@@ -5,93 +5,29 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
 import {
     BaseViewModel,
     type RedactedBodyViewSnapshot,
     type RedactedBodyViewModel as RedactedBodyViewModelInterface,
 } from "@element-hq/web-shared-components";
 
-import { formatFullDate } from "../../DateUtils";
-import { _t } from "../../languageHandler";
-import { MatrixClientPeg } from "../../MatrixClientPeg";
-import SettingsStore from "../../settings/SettingsStore";
-
-export interface RedactedBodyViewModelProps {
-    /**
-     * The redacted event being rendered.
-     */
-    mxEvent: MatrixEvent;
-}
+/**
+ * View model for a redacted event body.
+ *
+ * All event inspection, localization, and settings access happens in the application adapter.
+ */
+export type RedactedBodyViewModelProps = RedactedBodyViewSnapshot;
 
 export class RedactedBodyViewModel
     extends BaseViewModel<RedactedBodyViewSnapshot, RedactedBodyViewModelProps>
     implements RedactedBodyViewModelInterface
 {
-    private showTwelveHour: boolean;
-
-    private static readonly computeText = ({ mxEvent }: RedactedBodyViewModelProps): string => {
-        const redactedBecauseUserId = mxEvent.getUnsigned().redacted_because?.sender;
-        if (!redactedBecauseUserId || redactedBecauseUserId === mxEvent.getSender()) {
-            return _t("timeline|self_redaction");
-        }
-
-        const roomId = mxEvent.getRoomId();
-        const room = roomId ? MatrixClientPeg.get()?.getRoom(roomId) : null;
-        const sender = room?.getMember(redactedBecauseUserId);
-
-        return _t("timeline|redaction", { name: sender?.name ?? redactedBecauseUserId });
-    };
-
-    private static readonly computeTooltip = (mxEvent: MatrixEvent, showTwelveHour: boolean): string | undefined => {
-        const redactionTs = mxEvent.getUnsigned().redacted_because?.origin_server_ts;
-        if (!redactionTs) {
-            return undefined;
-        }
-
-        return _t("timeline|redacted|tooltip", {
-            date: formatFullDate(new Date(redactionTs), showTwelveHour),
-        });
-    };
-
-    private static readonly computeSnapshot = (
-        props: RedactedBodyViewModelProps,
-        showTwelveHour: boolean,
-    ): RedactedBodyViewSnapshot => ({
-        text: RedactedBodyViewModel.computeText(props),
-        tooltip: RedactedBodyViewModel.computeTooltip(props.mxEvent, showTwelveHour),
-    });
-
     public constructor(props: RedactedBodyViewModelProps) {
-        const showTwelveHour = SettingsStore.getValue("showTwelveHourTimestamps");
-
-        super(props, RedactedBodyViewModel.computeSnapshot(props, showTwelveHour));
-
-        this.showTwelveHour = showTwelveHour;
-
-        const showTwelveHourWatcherRef = SettingsStore.watchSetting(
-            "showTwelveHourTimestamps",
-            null,
-            (_settingName, _roomId, _level, _newValAtLevel, newVal) => {
-                if (this.showTwelveHour === newVal) return;
-
-                this.showTwelveHour = !!newVal;
-                this.updateTooltip();
-            },
-        );
-        this.disposables.track(() => SettingsStore.unwatchSetting(showTwelveHourWatcherRef));
+        super(props, props);
     }
 
-    public setEvent(mxEvent: MatrixEvent): void {
-        this.props = { ...this.props, mxEvent };
-
-        const text = RedactedBodyViewModel.computeText(this.props);
-        const tooltip = RedactedBodyViewModel.computeTooltip(this.props.mxEvent, this.showTwelveHour);
-        this.snapshot.merge({ text, tooltip });
-    }
-
-    private updateTooltip(): void {
-        const tooltip = RedactedBodyViewModel.computeTooltip(this.props.mxEvent, this.showTwelveHour);
-        this.snapshot.merge({ tooltip });
+    public setProps(props: RedactedBodyViewModelProps): void {
+        this.props = props;
+        this.snapshot.merge(props);
     }
 }
diff --git a/apps/web/src/viewmodels/message-body/UrlPreviewGroupViewModel.ts b/apps/web/src/viewmodels/message-body/UrlPreviewGroupViewModel.ts
index 025bc4e337..0f6505a2bc 100644
--- a/apps/web/src/viewmodels/message-body/UrlPreviewGroupViewModel.ts
+++ b/apps/web/src/viewmodels/message-body/UrlPreviewGroupViewModel.ts
@@ -5,173 +5,50 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
+import { MsgType, type MatrixClient, type MatrixEvent } from "matrix-js-sdk/src/matrix";
 import {
     BaseViewModel,
-    type UrlPreviewGroupViewSnapshot,
-    type UrlPreviewGroupViewActions,
     type UrlPreview,
+    type UrlPreviewGroupViewActions,
+    type UrlPreviewGroupViewSnapshot,
 } from "@element-hq/web-shared-components";
-import { logger as rootLogger } from "matrix-js-sdk/src/logger";
-import { type IPreviewUrlResponse, type MatrixClient, MatrixError, type MatrixEvent } from "matrix-js-sdk/src/matrix";
-import { decode } from "html-entities";
 import { type UrlPreviewVisibilityChanged } from "@matrix-org/analytics-events/types/typescript/UrlPreviewVisibilityChanged";
 
-import { isPermalinkHost } from "../../utils/permalinks/Permalinks";
-import { mediaFromMxc } from "../../customisations/Media";
-import PlatformPeg from "../../PlatformPeg";
-import { thumbHeight } from "../../ImageUtils";
 import { PosthogAnalytics } from "../../PosthogAnalytics";
+import { isPermalinkHost } from "../../utils/permalinks/Permalinks";
+import { UrlPreviewFetcher } from "../../utils/UrlPreviewFetcher";
+import { type RoomMessageEventContent } from "../../../@types/url-preview";
 
-const logger = rootLogger.getChild("UrlPreviewGroupViewModel");
+// From https://github.com/matrix-org/matrix-spec-proposals/pull/4095
+export const BUNDLED_LINK_PREVIEWS = "com.beeper.linkpreviews";
+
+export const MAX_PREVIEWS_WHEN_LIMITED = 2;
+
+export enum PreviewVisibility {
+    /** Preview is entirely hidden and cannot be changed. */
+    Hidden,
+    /** Preview is hidden by the user and may be shown again. */
+    UserHidden,
+    /** Preview is visible but media should not be rendered. */
+    MediaHidden,
+    /** Preview is fully visible including media. */
+    Visible,
+}
 
 export interface UrlPreviewGroupViewModelProps {
     client: MatrixClient;
     mxEvent: MatrixEvent;
-    mediaVisible: boolean;
     visible: boolean;
+    mediaVisible: boolean;
+    showTooltips: boolean;
     onImageClicked: (preview: UrlPreview) => void;
+    urlPreviewBundleEnabled: boolean;
 }
 
-export const MAX_PREVIEWS_WHEN_LIMITED = 2;
-export const PREVIEW_WIDTH_PX = 478;
-export const PREVIEW_HEIGHT_PX = 200;
-export const MIN_PREVIEW_PX = 96;
-export const MIN_IMAGE_SIZE_BYTES = 8192;
-
-export enum PreviewVisibility {
-    /**
-     * Preview is entirely hidden from view and can not be changed.
-     */
-    Hidden,
-    /**
-     * Preview is entirely hidden from view but the user may change this.
-     */
-    UserHidden,
-    /**
-     * Preview is visible but media should not be rendered.
-     */
-    MediaHidden,
-    /**
-     * Preview is visible and media should be rendered.
-     */
-    Visible,
-}
-
-/**
- * ViewModel for fetching and rendering URL previews for an individual event.
- */
 export class UrlPreviewGroupViewModel
     extends BaseViewModel<UrlPreviewGroupViewSnapshot, UrlPreviewGroupViewModelProps>
     implements UrlPreviewGroupViewActions
 {
-    /**
-     * Parse a numeric value from OpenGraph. The OpenGraph spec defines all values as strings
-     * although Synapse may return these values as numbers. To be compatible, test strings
-     * and numbers.
-     * @param value The numeric value
-     * @returns A number if the value parsed correctly, or undefined otherwise.
-     */
-    private static getNumberFromOpenGraph(value: number | string | undefined): number | undefined {
-        if (typeof value === "number") {
-            return value;
-        } else if (typeof value === "string" && value) {
-            const i = parseInt(value, 10);
-            if (!isNaN(i)) {
-                return i;
-            }
-        }
-        return undefined;
-    }
-
-    /**
-     * Calculate the best possible title from an opengraph response.
-     * @param response The opengraph response
-     * @param link The link being used to preview.
-     * @returns The title value.
-     */
-    private static getBaseMetadataFromResponse(
-        response: IPreviewUrlResponse,
-        link: string,
-    ): Pick<UrlPreview, "title" | "description" | "siteName"> {
-        let title =
-            typeof response["og:title"] === "string" && response["og:title"].trim()
-                ? response["og:title"].trim()
-                : undefined;
-        let description =
-            typeof response["og:description"] === "string" && response["og:description"].trim()
-                ? response["og:description"].trim()
-                : undefined;
-        const siteName =
-            typeof response["og:site_name"] === "string" && response["og:site_name"].trim()
-                ? response["og:site_name"].trim()
-                : new URL(link).hostname;
-
-        // If there is no title, use the description as the title.
-        if (!title && description) {
-            title = description;
-            description = undefined;
-        } else if (!title && siteName) {
-            title = siteName;
-        } else if (!title) {
-            title = link;
-        }
-
-        // If the description matches the site name, don't bother with a description.
-        if (description && description.toLowerCase() === siteName.toLowerCase()) {
-            description = undefined;
-        }
-
-        return {
-            title,
-            description: description && decode(description),
-            siteName,
-        };
-    }
-
-    /**
-     * Calculate the best possible author from an opengraph response.
-     * @param response The opengraph response
-     * @returns The author value, or undefined if no valid author could be found.
-     */
-    private static getAuthorFromResponse(response: IPreviewUrlResponse): UrlPreview["author"] {
-        let calculatedAuthor: string | undefined;
-        if (response["og:type"] === "article") {
-            if (typeof response["article:author"] === "string" && response["article:author"]) {
-                calculatedAuthor = response["article:author"];
-            }
-            // Otherwise fall through to check the profile.
-        }
-        if (typeof response["profile:username"] === "string" && response["profile:username"]) {
-            calculatedAuthor = response["profile:username"];
-        }
-        if (calculatedAuthor && URL.canParse(calculatedAuthor)) {
-            // Some sites return URLs as authors which doesn't look good in Element, so discard it.
-            return;
-        }
-        return calculatedAuthor;
-    }
-
-    /**
-     * Calculate whether the provided image from the preview response is an full size preview or
-     * a site icon.
-     * @returns `true` if the image should be used as a preview, otherwise `false`
-     */
-    private static isImagePreview(width?: number, height?: number, bytes?: number): boolean {
-        // We can't currently distinguish from a preview image and a favicon. Neither OpenGraph nor Matrix
-        // have a clear distinction, so we're using a heuristic here to check the dimensions & size of the file and
-        // deciding whether to render it as a full preview or icon.
-        if (width && width < MIN_PREVIEW_PX) {
-            return false;
-        }
-        if (height && height < MIN_PREVIEW_PX) {
-            return false;
-        }
-        if (bytes && bytes < MIN_IMAGE_SIZE_BYTES) {
-            return false;
-        }
-        return true;
-    }
-
     /**
      * Determine if an anchor element can be rendered into a preview.
      * If it can, return the value of `href`
@@ -179,36 +56,15 @@ export class UrlPreviewGroupViewModel
      * @returns The value of the `href` of the node, or null if this node cannot be previewed.
      */
     private static getAnchorLink(node: HTMLAnchorElement): string | null {
-        // don't try to preview relative links
         const href = node.getAttribute("href");
-        if (!href || !URL.canParse(href)) {
-            return null;
-        }
+        if (!href || !URL.canParse(href)) return null;
 
         const url = new URL(href);
-        if (!["http:", "https:"].includes(url.protocol)) {
-            return null;
-        }
-        // never preview permalinks (if anything we should give a smart
-        // preview of the room/user they point to: nobody needs to be reminded
-        // what the matrix.to site looks like).
-        if (isPermalinkHost(url.host)) {
-            return null;
-        }
+        if (!["http:", "https:"].includes(url.protocol)) return null;
+        if (isPermalinkHost(url.host)) return null;
 
-        // as a random heuristic to avoid highlighting things like "foo.pl"
-        // we require the linked text to either include a / (either from http://
-        // or from a full foo.bar/baz style schemeless URL) - or be a markdown-style
-        // link, in which case we check the target text differs from the link value.
-        if (node.textContent?.includes("/")) {
-            return href;
-        }
-
-        if (node.textContent?.toLowerCase().trim().startsWith(url.host.toLowerCase())) {
-            // it's a "foo.pl" style link
-            return null;
-        }
-        // it's a [foo bar](http://foo.com) style link
+        if (node.textContent?.includes("/")) return href;
+        if (node.textContent?.toLowerCase().trim().startsWith(url.host.toLowerCase())) return null;
         return href;
     }
 
@@ -219,43 +75,26 @@ export class UrlPreviewGroupViewModel
      */
     private static findLinks(nodes: Iterable<Element>): string[] {
         let links = new Set<string>();
-
         for (const node of nodes) {
             if (node.tagName === "A") {
                 const href = this.getAnchorLink(node as HTMLAnchorElement);
-                if (href) {
-                    links.add(href);
-                }
+                if (href) links.add(href);
             } else if (node.tagName === "PRE" || node.tagName === "CODE" || node.tagName === "BLOCKQUOTE") {
                 continue;
-            } else if (node.children && node.children.length) {
+            } else if (node.children?.length) {
                 links = new Set([...links, ...this.findLinks(node.children)]);
             }
         }
         return [...links];
     }
 
-    private readonly client: MatrixClient;
     private readonly storageKey: string;
-    private readonly eventSendTime: number;
-
-    /**
-     * Should the URL preview render according to the application.
-     */
-    private urlPreviewVisible: boolean;
-    /**
-     * Should media be rendered in the preview.
-     */
-    private mediaVisible: boolean;
-    /**
-     * Has the user opted to render this individual preview, or hide it.
-     */
-    private urlPreviewEnabledByUser: boolean;
+    private readonly fetcher: UrlPreviewFetcher;
 
     /**
      * Calculated set of links from the provided DOM element.
      */
-    private links: Array<string> = [];
+    private links: string[] = [];
 
     /**
      * Should the preview limit how many links are rendered. If `false`, all
@@ -264,9 +103,19 @@ export class UrlPreviewGroupViewModel
     private limitPreviews = true;
 
     /**
-     * A cache containing all previously calculated previews.
+     * Should the URL preview render according to the application.
      */
-    private readonly previewCache = new Map<string, UrlPreview>();
+    private urlPreviewVisible: boolean;
+
+    /**
+     * Should media be rendered in the preview.
+     */
+    private mediaVisible: boolean;
+
+    /**
+     * Has the user opted to render this individual preview, or hide it.
+     */
+    private urlPreviewEnabledByUser: boolean;
 
     /**
      * Called when the user clicks on the preview thumbnail.
@@ -274,111 +123,31 @@ export class UrlPreviewGroupViewModel
     public readonly onImageClick: (preview: UrlPreview) => void;
 
     public constructor(props: UrlPreviewGroupViewModelProps) {
-        const storageKey = `hide_preview_${props.mxEvent.getId()}`;
         super(props, {
             previews: [],
             totalPreviewCount: 0,
             previewsLimited: true,
             overPreviewLimit: false,
         });
-        this.urlPreviewEnabledByUser = globalThis.localStorage.getItem(storageKey) !== "1";
+        this.onImageClick = props.onImageClicked;
+        this.storageKey = `hide_preview_${props.mxEvent.getId()}`;
         this.urlPreviewVisible = props.visible;
         this.mediaVisible = props.mediaVisible;
-        this.storageKey = storageKey;
-        this.client = props.client;
-        this.eventSendTime = props.mxEvent.getTs();
-        this.onImageClick = props.onImageClicked;
+        this.urlPreviewEnabledByUser = globalThis.localStorage.getItem(this.storageKey) !== "1";
+        this.fetcher = new UrlPreviewFetcher(props.client, props.mxEvent.getTs(), props.showTooltips);
     }
 
     /**
-     * Fetch a complete preview of a given URL.
-     * Will always return a cached response if it was previously calculated.
-     * @param link A URL to be previewed.
-     * @returns A Promise that returns the snapshot needed to render the preview, or null
-     * if the resource could not be previewed.
+     * `true` only when the user has chosen to hide previews.
      */
-    private async fetchPreview(link: string): Promise<UrlPreview | null> {
-        const cached = this.previewCache.get(link);
-        if (cached) {
-            return cached;
-        }
-        let preview: IPreviewUrlResponse;
-
-        try {
-            preview = await this.client.getUrlPreview(link, this.eventSendTime);
-        } catch (error) {
-            if (error instanceof MatrixError && error.httpStatus === 404) {
-                // Quieten 404 Not found errors, not all URLs can have a preview generated
-                logger.debug("Failed to get URL preview: ", error);
-            } else {
-                logger.error("Failed to get URL preview: ", error);
-            }
-            return null;
-        }
-
-        const { title, description, siteName } = UrlPreviewGroupViewModel.getBaseMetadataFromResponse(preview, link);
-        const author = UrlPreviewGroupViewModel.getAuthorFromResponse(preview);
-        const hasImage = preview["og:image"] && typeof preview?.["og:image"] === "string";
-        // Ensure we have something relevant to render.
-        // The title must not just be the link, or we must have an image.
-        if (title === link && !hasImage) {
-            return null;
-        }
-        let image: UrlPreview["image"];
-        let siteIcon: string | undefined;
-        if (typeof preview["og:image"] === "string" && this.visibility > PreviewVisibility.MediaHidden) {
-            const media = mediaFromMxc(preview["og:image"], this.client);
-            const declaredHeight = UrlPreviewGroupViewModel.getNumberFromOpenGraph(preview["og:image:height"]);
-            const declaredWidth = UrlPreviewGroupViewModel.getNumberFromOpenGraph(preview["og:image:width"]);
-            const imageSize = UrlPreviewGroupViewModel.getNumberFromOpenGraph(preview["matrix:image:size"]);
-            const alt = typeof preview["og:image:alt"] === "string" ? preview["og:image:alt"] : undefined;
-
-            const isImagePreview = UrlPreviewGroupViewModel.isImagePreview(declaredWidth, declaredHeight, imageSize);
-            if (isImagePreview) {
-                const width = Math.min(declaredWidth ?? PREVIEW_WIDTH_PX, PREVIEW_WIDTH_PX);
-                const height =
-                    thumbHeight(width, declaredHeight, PREVIEW_WIDTH_PX, PREVIEW_WIDTH_PX) ?? PREVIEW_WIDTH_PX;
-                const thumb = media.getThumbnailOfSourceHttp(PREVIEW_WIDTH_PX, PREVIEW_HEIGHT_PX, "scale");
-                const playable = !!preview["og:video"] || !!preview["og:video:type"] || !!preview["og:audio"];
-                // No thumb, no preview.
-                if (thumb) {
-                    image = {
-                        imageThumb: thumb,
-                        imageFull: media.srcHttp ?? thumb,
-                        width,
-                        height,
-                        fileSize: UrlPreviewGroupViewModel.getNumberFromOpenGraph(preview["matrix:image:size"]),
-                        alt,
-                        playable,
-                    };
-                }
-            } else if (media.srcHttp) {
-                siteIcon = media.srcHttp;
-            }
-        }
-
-        const result = {
-            link,
-            title,
-            author,
-            description,
-            siteName,
-            siteIcon,
-            showTooltipOnLink: !!(link !== title && PlatformPeg.get()?.needsUrlTooltips()),
-            image,
-        } satisfies UrlPreview;
-        this.previewCache.set(link, result);
-        return result;
+    public get isPreviewHiddenByUser(): boolean {
+        return this.visibility === PreviewVisibility.UserHidden;
     }
 
     private get visibility(): PreviewVisibility {
-        if (!this.urlPreviewVisible) {
-            return PreviewVisibility.Hidden;
-        } else if (!this.urlPreviewEnabledByUser) {
-            return PreviewVisibility.UserHidden;
-        } else if (!this.mediaVisible) {
-            return PreviewVisibility.MediaHidden;
-        }
+        if (!this.urlPreviewVisible) return PreviewVisibility.Hidden;
+        if (!this.urlPreviewEnabledByUser) return PreviewVisibility.UserHidden;
+        if (!this.mediaVisible) return PreviewVisibility.MediaHidden;
         return PreviewVisibility.Visible;
     }
 
@@ -387,16 +156,44 @@ export class UrlPreviewGroupViewModel
      * for the previously-calculated links.
      */
     private async computeSnapshot(): Promise<void> {
-        const previews =
-            this.visibility <= PreviewVisibility.UserHidden
-                ? []
-                : await Promise.all(
-                      this.links
-                          .slice(0, this.limitPreviews ? MAX_PREVIEWS_WHEN_LIMITED : undefined)
-                          .map((link) => this.fetchPreview(link)),
-                  );
+        // MSC4095: an empty bundled previews array means the sender opted out of previews.
+        const bundledLinkPreviews = this.props.mxEvent.getContent()[BUNDLED_LINK_PREVIEWS];
+        if (Array.isArray(bundledLinkPreviews) && bundledLinkPreviews.length === 0) {
+            this.snapshot.merge({
+                previews: [],
+                totalPreviewCount: 0,
+                previewsLimited: false,
+                overPreviewLimit: false,
+            });
+            return;
+        }
+
+        const loadMedia = this.visibility === PreviewVisibility.Visible;
+        let previews: (UrlPreview | null)[] | undefined;
+
+        if (this.visibility <= PreviewVisibility.UserHidden) {
+            previews = [];
+        }
+
+        const content = this.props.mxEvent.getContent();
+        if (content.msgtype === MsgType.Text && this.props.urlPreviewBundleEnabled) {
+            const messageContent = content as RoomMessageEventContent;
+
+            if (messageContent[BUNDLED_LINK_PREVIEWS] !== undefined) {
+                previews = messageContent[BUNDLED_LINK_PREVIEWS]
+                    .slice(0, this.limitPreviews ? MAX_PREVIEWS_WHEN_LIMITED : undefined)
+                    .map((preview) => this.fetcher.previewFromBundle(preview));
+            }
+        }
+
+        previews ??= await Promise.all(
+            this.links
+                .slice(0, this.limitPreviews ? MAX_PREVIEWS_WHEN_LIMITED : undefined)
+                .map((link) => this.fetcher.fetchPreview(link, loadMedia)),
+        );
+
         this.snapshot.merge({
-            previews: previews.filter((m) => !!m),
+            previews: previews.filter((p) => !!p),
             totalPreviewCount: this.links.length,
             previewsLimited: this.limitPreviews,
             overPreviewLimit: this.links.length > MAX_PREVIEWS_WHEN_LIMITED,
@@ -409,7 +206,6 @@ export class UrlPreviewGroupViewModel
      */
     public async updateEventElement(eventElement: HTMLDivElement | HTMLSpanElement): Promise<void> {
         const newLinks = UrlPreviewGroupViewModel.findLinks([eventElement]);
-        // Only recalculate if the set of links has changed.
         if (newLinks.some((x) => !this.links.includes(x)) || this.links.some((x) => !newLinks.includes(x))) {
             this.links = newLinks;
             return this.computeSnapshot();
@@ -417,19 +213,26 @@ export class UrlPreviewGroupViewModel
     }
 
     /**
-     * Update the view model about the status of whether the event should be
-     * viewable.
+     * Update the view model about visible state of previews.
      * @param urlPreviewVisible Whether URL previews are hidden for this room.
-     * @param mediaVisible Whether media is hidden for this room or event.
      *
      * @returns A promise that completes when the snapshot has been recomputed.
      */
-    public readonly updateHidden = (urlPreviewVisible: boolean, mediaVisible: boolean): Promise<void> => {
+    public readonly updateUrlPreviewVisible = (urlPreviewVisible: boolean): Promise<void> => {
         this.urlPreviewVisible = urlPreviewVisible;
+        this.fetcher.clearCache();
+        return this.computeSnapshot();
+    };
+
+    /**
+     * Update the view model about visible state of media.
+     * @param urlPreviewVisible Whether media is hidden for this room or event.
+     *
+     * @returns A promise that completes when the snapshot has been recomputed.
+     */
+    public readonly updateMediaVisible = (mediaVisible: boolean): Promise<void> => {
         this.mediaVisible = mediaVisible;
-        // Changing the visibility here means we need to clear cache as we may need to load
-        // the media again.
-        this.previewCache.clear();
+        this.fetcher.clearCache();
         return this.computeSnapshot();
     };
 
@@ -475,11 +278,4 @@ export class UrlPreviewGroupViewModel
         this.limitPreviews = !this.limitPreviews;
         return this.computeSnapshot();
     };
-
-    /**
-     * `true` only when the user has chosen to hide previews.
-     */
-    public get isPreviewHiddenByUser(): boolean {
-        return this.visibility === PreviewVisibility.UserHidden;
-    }
 }
diff --git a/apps/web/src/viewmodels/message-body/VideoBodyViewModel.ts b/apps/web/src/viewmodels/message-body/VideoBodyViewModel.ts
index fdb4bb1b62..9591c36e7a 100644
--- a/apps/web/src/viewmodels/message-body/VideoBodyViewModel.ts
+++ b/apps/web/src/viewmodels/message-body/VideoBodyViewModel.ts
@@ -110,7 +110,7 @@ export class VideoBodyViewModel
         this.state = initialState;
 
         const imageSizeWatcherRef = SettingsStore.watchSetting("Images.size", null, (_s, _r, _l, _nvl, value) => {
-            this.setImageSize(value as ImageSize);
+            this.setImageSize(value!);
         });
         this.disposables.track(() => SettingsStore.unwatchSetting(imageSizeWatcherRef));
     }
@@ -130,7 +130,7 @@ export class VideoBodyViewModel
             error: null,
             posterLoading: false,
             blurhashUrl: null,
-            imageSize: SettingsStore.getValue("Images.size") as ImageSize,
+            imageSize: SettingsStore.getValue("Images.size"),
         };
     }
 
@@ -138,7 +138,7 @@ export class VideoBodyViewModel
      * Derive the aspect ratio for the video frame from the event metadata, when available.
      */
     private static getAspectRatio(mxEvent: MatrixEvent): string | undefined {
-        const { w, h } = (mxEvent.getContent<MediaEventContent>().info as VideoInfoWithBlurhash | undefined) ?? {};
+        const { w, h } = mxEvent.getContent<MediaEventContent & { info: VideoInfoWithBlurhash }>().info ?? {};
         if (!w || !h) {
             return undefined;
         }
@@ -150,7 +150,7 @@ export class VideoBodyViewModel
      * Compute the rendered video dimensions from the event metadata and current image-size setting.
      */
     private static getDimensions(mxEvent: MatrixEvent, imageSize: ImageSize): Required<{ w?: number; h?: number }> {
-        const { w, h } = (mxEvent.getContent<MediaEventContent>().info as VideoInfoWithBlurhash | undefined) ?? {};
+        const { w, h } = mxEvent.getContent<MediaEventContent & { info: VideoInfoWithBlurhash }>().info ?? {};
         return suggestedVideoSize(imageSize, { w, h });
     }
 
@@ -197,7 +197,7 @@ export class VideoBodyViewModel
 
     private static computeSnapshot(props: VideoBodyViewModelProps, state: InternalState): VideoBodyViewSnapshot {
         const content = props.mxEvent.getContent<MediaEventContent>();
-        const autoplay = !props.inhibitInteraction && (SettingsStore.getValue("autoplayVideo") as boolean);
+        const autoplay = !props.inhibitInteraction && SettingsStore.getValue("autoplayVideo");
         const aspectRatio = VideoBodyViewModel.getAspectRatio(props.mxEvent);
         const { w: maxWidth, h: maxHeight } = VideoBodyViewModel.getDimensions(props.mxEvent, state.imageSize);
 
@@ -292,7 +292,7 @@ export class VideoBodyViewModel
     }
 
     private loadBlurhash(): void {
-        const info = this.props.mxEvent.getContent<MediaEventContent>().info as VideoInfoWithBlurhash | undefined;
+        const info = this.props.mxEvent.getContent<MediaEventContent & { info: VideoInfoWithBlurhash }>().info;
         const blurhash = info?.[BLURHASH_FIELD];
         if (!blurhash) {
             return;
@@ -356,7 +356,7 @@ export class VideoBodyViewModel
         const currentEvent = this.props.mxEvent;
         const currentHelper = this.props.mediaEventHelper;
         try {
-            const autoplay = !this.props.inhibitInteraction && (SettingsStore.getValue("autoplayVideo") as boolean);
+            const autoplay = !this.props.inhibitInteraction && SettingsStore.getValue("autoplayVideo");
             const thumbnailUrl = await currentHelper.thumbnailUrl.value;
 
             if (
diff --git a/apps/web/src/viewmodels/room-list/RoomListHeaderViewModel.ts b/apps/web/src/viewmodels/room-list/RoomListHeaderViewModel.ts
index 2e48532078..017a16a068 100644
--- a/apps/web/src/viewmodels/room-list/RoomListHeaderViewModel.ts
+++ b/apps/web/src/viewmodels/room-list/RoomListHeaderViewModel.ts
@@ -17,7 +17,7 @@ import defaultDispatcher from "../../dispatcher/dispatcher";
 import PosthogTrackers from "../../PosthogTrackers";
 import { Action } from "../../dispatcher/actions";
 import { getMetaSpaceName, type MetaSpace, UPDATE_HOME_BEHAVIOUR, UPDATE_SELECTED_SPACE } from "../../stores/spaces";
-import { type SpaceStoreClass } from "../../stores/spaces/SpaceStore";
+import type SpaceStore from "../../stores/spaces/SpaceStore";
 import {
     shouldShowSpaceSettings,
     showCreateNewRoom,
@@ -32,6 +32,7 @@ import RoomListStoreV3 from "../../stores/room-list-v3/RoomListStoreV3";
 import { SortingAlgorithm } from "../../stores/room-list-v3/skip-list/sorters";
 import { SettingLevel } from "../../settings/SettingLevel";
 import { createRoom, hasCreateRoomRights } from "./utils";
+import { ReleaseAnnouncementStore } from "../../stores/ReleaseAnnouncementStore";
 
 export interface Props {
     /**
@@ -41,7 +42,7 @@ export interface Props {
     /**
      * The space store instance.
      */
-    spaceStore: SpaceStoreClass;
+    spaceStore: SpaceStore;
 }
 
 /**
@@ -69,6 +70,13 @@ export class RoomListHeaderViewModel
         );
         this.disposables.track(() => SettingsStore.unwatchSetting(settingsFeatureVideoRef));
 
+        const settingsShowSectionsRef = SettingsStore.watchSetting(
+            "RoomList.showSections",
+            null,
+            this.onShowSectionsChange,
+        );
+        this.disposables.track(() => SettingsStore.unwatchSetting(settingsShowSectionsRef));
+
         // Listen for space changes
         this.disposables.trackListener(props.spaceStore, UPDATE_SELECTED_SPACE, this.onSpaceChange);
         this.disposables.trackListener(props.spaceStore, UPDATE_HOME_BEHAVIOUR, this.onHomeBehaviourChange);
@@ -82,6 +90,12 @@ export class RoomListHeaderViewModel
         // Listen for section collapse state changes from RoomListViewModel
         const dispatcherRef = defaultDispatcher.register(this.onDispatch);
         this.disposables.track(() => defaultDispatcher.unregister(dispatcherRef));
+
+        this.disposables.trackListener(
+            ReleaseAnnouncementStore.instance,
+            "releaseAnnouncementChanged",
+            this.onReleaseAnnouncementChanged,
+        );
     }
 
     /**
@@ -126,6 +140,15 @@ export class RoomListHeaderViewModel
         });
     };
 
+    /**
+     * Handles show sections setting change events.
+     */
+    private readonly onShowSectionsChange = (): void => {
+        this.snapshot.merge({
+            areSectionsEnabled: SettingsStore.getValue("RoomList.showSections"),
+        });
+    };
+
     public createChatRoom = (e: Event): void => {
         defaultDispatcher.fire(Action.CreateChat);
         PosthogTrackers.trackInteraction("WebRoomListHeaderPlusMenuCreateChatItem", e);
@@ -207,6 +230,7 @@ export class RoomListHeaderViewModel
 
     public createSection = (): void => {
         RoomListStoreV3.instance.createSection();
+        PosthogTrackers.trackSectionCreation("RoomListHeader");
     };
 
     public collapseOrExpandSections = (): void => {
@@ -215,6 +239,9 @@ export class RoomListHeaderViewModel
                 ? Action.RoomListExpandAllSections
                 : Action.RoomListCollapseAllSections;
         defaultDispatcher.fire(action);
+
+        const kind = action === Action.RoomListExpandAllSections ? "Expand" : "Collapse";
+        PosthogTrackers.trackCollapseOrExpandSection(kind, "RoomListHeader");
     };
 
     private readonly onDispatch = (payload: { action: string }): void => {
@@ -225,14 +252,26 @@ export class RoomListHeaderViewModel
             });
         }
     };
+
+    public closeSectionReleaseAnnouncement = (): void => {
+        ReleaseAnnouncementStore.instance.nextReleaseAnnouncement();
+        this.snapshot.merge({ displaySectionReleaseAnnouncement: false });
+    };
+
+    public onReleaseAnnouncementChanged = (): void => {
+        const displaySectionReleaseAnnouncement =
+            ReleaseAnnouncementStore.instance.getReleaseAnnouncement() === "room_list_section";
+        this.snapshot.merge({ displaySectionReleaseAnnouncement });
+    };
 }
+
 /**
  * Get the initial snapshot for the RoomListHeaderViewModel.
  * @param spaceStore - The space store instance.
  * @param matrixClient - The Matrix client instance.
  * @returns
  */
-function getInitialSnapshot(spaceStore: SpaceStoreClass, matrixClient: MatrixClient): RoomListHeaderViewSnapshot {
+function getInitialSnapshot(spaceStore: SpaceStore, matrixClient: MatrixClient): RoomListHeaderViewSnapshot {
     const sortingAlgorithm = SettingsStore.getValue("RoomList.preferredSorting");
 
     let activeSortOption: SortOption;
@@ -261,7 +300,7 @@ function getInitialSnapshot(spaceStore: SpaceStoreClass, matrixClient: MatrixCli
  * Get the header title based on the active space.
  * @param spaceStore - The space store instance.
  */
-function getHeaderTitle(spaceStore: SpaceStoreClass): string {
+function getHeaderTitle(spaceStore: SpaceStore): string {
     const activeSpace = spaceStore.activeSpaceRoom;
     const spaceName = activeSpace?.name;
     return spaceName ?? getMetaSpaceName(spaceStore.activeSpace as MetaSpace, spaceStore.allRoomsInHome);
@@ -282,34 +321,32 @@ function getCanCreateVideoRoom(canCreateRoom: boolean): boolean {
  * @returns The header space state containing title, permissions, and display flags.
  */
 function computeHeaderSpaceState(
-    spaceStore: SpaceStoreClass,
+    spaceStore: SpaceStore,
     matrixClient: MatrixClient,
 ): Omit<RoomListHeaderViewSnapshot, "activeSortOption" | "isMessagePreviewEnabled"> {
+    const displaySectionReleaseAnnouncement =
+        ReleaseAnnouncementStore.instance.getReleaseAnnouncement() === "room_list_section";
+    const areSectionsEnabled = SettingsStore.getValue("RoomList.showSections");
+
     const activeSpace = spaceStore.activeSpaceRoom;
     const title = getHeaderTitle(spaceStore);
 
     const canCreateRoom = hasCreateRoomRights(matrixClient, activeSpace);
     const canCreateVideoRoom = getCanCreateVideoRoom(canCreateRoom);
-    const displayComposeMenu = canCreateRoom;
     const displaySpaceMenu = Boolean(activeSpace);
     const canInviteInSpace = Boolean(
         activeSpace?.getJoinRule() === JoinRule.Public || activeSpace?.canInvite(matrixClient.getSafeUserId()),
     );
     const canAccessSpaceSettings = Boolean(activeSpace && shouldShowSpaceSettings(activeSpace));
 
-    const isSectionFeatureEnabled = SettingsStore.getValue("feature_room_list_sections");
-    const useComposeIcon = !isSectionFeatureEnabled;
-    const canCreateSection = isSectionFeatureEnabled;
-
     return {
         title,
         canCreateRoom,
         canCreateVideoRoom,
-        displayComposeMenu,
         displaySpaceMenu,
         canInviteInSpace,
         canAccessSpaceSettings,
-        canCreateSection,
-        useComposeIcon,
+        displaySectionReleaseAnnouncement,
+        areSectionsEnabled,
     };
 }
diff --git a/apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts b/apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts
index 0942b2d2ba..5ab5d58d38 100644
--- a/apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts
+++ b/apps/web/src/viewmodels/room-list/RoomListItemViewModel.ts
@@ -11,11 +11,13 @@ import {
     type RoomListItemViewSnapshot,
     type RoomListItemViewActions,
     type Section,
+    type UserStatus,
 } from "@element-hq/web-shared-components";
-import { RoomEvent } from "matrix-js-sdk/src/matrix";
+import { ClientEvent, RoomEvent } from "matrix-js-sdk/src/matrix";
 import { CallType } from "matrix-js-sdk/src/webrtc/call";
+import { logger } from "matrix-js-sdk/src/logger";
 
-import type { Room, MatrixClient, RoomMember } from "matrix-js-sdk/src/matrix";
+import type { Room, MatrixClient, RoomMember, ClientEventHandlerMap } from "matrix-js-sdk/src/matrix";
 import type { RoomNotificationState } from "../../stores/notifications/RoomNotificationState";
 import { RoomNotificationStateStore } from "../../stores/notifications/RoomNotificationStateStore";
 import { NotificationStateEvents } from "../../stores/notifications/NotificationState";
@@ -39,8 +41,15 @@ import { Action } from "../../dispatcher/actions";
 import type { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
 import PosthogTrackers from "../../PosthogTrackers";
 import { type Call, CallEvent } from "../../models/Call";
-import RoomListStoreV3, { CHATS_TAG } from "../../stores/room-list-v3/RoomListStoreV3";
+import RoomListStoreV3 from "../../stores/room-list-v3/RoomListStoreV3";
+import { getCustomSectionData, isDefaultSectionTag } from "../../stores/room-list-v3/section";
 import { _t } from "../../languageHandler";
+import { fetchUserStatus, userStatusFromProfile } from "../../utils/userStatus";
+
+/**
+ * View section type without `isSelected` field
+ */
+type Sections = Array<Omit<Section, "isSelected">>;
 
 interface RoomItemProps {
     room: Room;
@@ -61,14 +70,34 @@ export class RoomListItemViewModel
      * Track the current call for this room to manager listeners
      */
     private currentCall: Call | null = null;
+    /**
+     * The sections available in the "Move to section" submenu (tag + display name), identical
+     * for every update of this item. Computing it reads the custom section settings, so it is
+     * built once and rebuilt only when those settings change (see {@link onCustomSectionsChange})
+     * rather than on every snapshot rebuild; only the per-room isSelected flag is derived per
+     * snapshot (see {@link buildSections}).
+     */
+    private availableSections: Sections;
+
+    /**
+     * The user ID of the other user if this room is a DM, used to show their user status.
+     */
+    private readonly dmUserId?: string;
 
     public constructor(props: RoomItemProps) {
         // Get notification state first so we can generate a complete initial snapshot
         const notifState = RoomNotificationStateStore.instance.getRoomState(props.room);
-        const initialItem = RoomListItemViewModel.generateItemSync(props.room, props.client, notifState);
+        const availableSections = RoomListItemViewModel.computeAvailableSections();
+        const initialItem = RoomListItemViewModel.generateItemSync(
+            props.room,
+            props.client,
+            notifState,
+            availableSections,
+        );
         super(props, initialItem);
 
         this.notifState = notifState;
+        this.availableSections = availableSections;
 
         // Subscribe to notification state changes for this room
         this.disposables.trackListener(this.notifState, NotificationStateEvents.Update, this.onNotificationChanged);
@@ -90,6 +119,14 @@ export class RoomListItemViewModel
             SettingsStore.unwatchSetting(settingsWatchRef);
         });
 
+        // Subscribe to settings changes for section toggle
+        const settingsShowSectionsRef = SettingsStore.watchSetting(
+            "RoomList.showSections",
+            null,
+            this.onShowSectionsChange,
+        );
+        this.disposables.track(() => SettingsStore.unwatchSetting(settingsShowSectionsRef));
+
         // Subscribe to call state changes
         this.disposables.trackListener(CallStore.instance, CallStoreEvent.Call, this.onCallStateChanged);
         // If there is an active call for this room, listen to participant changes
@@ -99,15 +136,31 @@ export class RoomListItemViewModel
         this.disposables.trackListener(props.room, RoomEvent.Name, this.onRoomChanged);
         this.disposables.trackListener(props.room, RoomEvent.Tags, this.onRoomChanged);
 
+        // Rebuild the available sections when their order changes or when one is created/renamed/removed
         const orderSectionsRef = SettingsStore.watchSetting("RoomList.OrderedCustomSections", null, () =>
-            this.onOrderedCustomSectionsChange(),
+            this.onCustomSectionsChange(),
+        );
+        const sectionDataRef = SettingsStore.watchSetting("RoomList.CustomSectionData", null, () =>
+            this.onCustomSectionsChange(),
         );
         this.disposables.track(() => {
             SettingsStore.unwatchSetting(orderSectionsRef);
+            SettingsStore.unwatchSetting(sectionDataRef);
         });
 
         // Load message preview asynchronously (sync data is already complete)
         void this.loadAndSetMessagePreview();
+
+        // If this room is a DM, show the MSC4426 user status of the other user
+        this.dmUserId = DMRoomMap.shared().getUserIdForRoomId(props.room.roomId) ?? undefined;
+        if (this.dmUserId) {
+            props.client.on(ClientEvent.UserProfileUpdate, this.onUserProfileUpdate);
+            this.disposables.track(() => {
+                props.client.off(ClientEvent.UserProfileUpdate, this.onUserProfileUpdate);
+            });
+
+            this.updateUserStatus();
+        }
     }
 
     public dispose(): void {
@@ -128,6 +181,11 @@ export class RoomListItemViewModel
         void this.loadAndSetMessagePreview();
     };
 
+    private readonly onShowSectionsChange = (): void => {
+        const areSectionsEnabled = SettingsStore.getValue("RoomList.showSections");
+        this.snapshot.merge({ areSectionsEnabled });
+    };
+
     /**
      * Handler for call participant changes. Only updates the item if the call moves between having participants and not having participants, to avoid unnecessary updates.
      * @param participants The current call participants
@@ -183,7 +241,12 @@ export class RoomListItemViewModel
      * Preserves the message preview which is managed separately.
      */
     private updateItem(): void {
-        const newItem = RoomListItemViewModel.generateItemSync(this.props.room, this.props.client, this.notifState);
+        const newItem = RoomListItemViewModel.generateItemSync(
+            this.props.room,
+            this.props.client,
+            this.notifState,
+            this.availableSections,
+        );
         this.snapshot.merge({
             ...newItem,
             notification: keepIfSame(this.snapshot.current.notification, newItem.notification),
@@ -221,6 +284,35 @@ export class RoomListItemViewModel
         this.snapshot.merge({ messagePreview });
     }
 
+    /**
+     * Handler for profile updates received via sync, to keep the DM user's status up to date.
+     */
+    private onUserProfileUpdate: ClientEventHandlerMap[ClientEvent.UserProfileUpdate] = (userId, profile) => {
+        if (userId !== this.dmUserId || !SettingsStore.getValue("feature_user_status")) return;
+        this.snapshot.merge({
+            userStatus: userStatusFromProfile(
+                profile?.["org.matrix.msc4426.status"],
+                profile?.["org.matrix.msc4426.call"],
+            ),
+        });
+    };
+
+    /**
+     * Fetch and set the user status of the DM user, if the feature is enabled.
+     */
+    private updateUserStatus(): void {
+        (async () => {
+            let userStatus: UserStatus | undefined;
+            if (this.dmUserId && SettingsStore.getValue("feature_user_status")) {
+                userStatus = await fetchUserStatus(this.props.client, this.dmUserId);
+            }
+            if (this.disposables.isDisposed) return;
+            this.snapshot.merge({ userStatus });
+        })().catch((ex) => {
+            logger.warn(`Failed to update userStatus for ${this.dmUserId}`, ex);
+        });
+    }
+
     /**
      * Generate a complete RoomListItem with all synchronous data.
      * Message preview is loaded separately to avoid blocking initial render.
@@ -229,6 +321,7 @@ export class RoomListItemViewModel
         room: Room,
         client: MatrixClient,
         notifState: RoomNotificationState,
+        availableSections: Sections,
     ): RoomListItemViewSnapshot {
         // Get room tags for menu state
         const roomTags = room.tags;
@@ -306,7 +399,8 @@ export class RoomListItemViewModel
         const canMoveToSection = SettingsStore.getValue("feature_room_list_sections");
 
         // Build sections list for the "Move to section" submenu
-        const sections: Section[] = canMoveToSection ? RoomListItemViewModel.buildSections(roomTags) : [];
+        const sections: Section[] = RoomListItemViewModel.buildSections(roomTags, availableSections);
+        const areSectionsEnabled = SettingsStore.getValue("RoomList.showSections");
 
         return {
             id: room.roomId,
@@ -336,8 +430,8 @@ export class RoomListItemViewModel
             canMarkAsRead,
             canMarkAsUnread,
             roomNotifState,
-            canMoveToSection,
             sections,
+            areSectionsEnabled,
         };
     }
 
@@ -419,6 +513,8 @@ export class RoomListItemViewModel
 
     public onCreateSection = async (): Promise<void> => {
         const newTag = await RoomListStoreV3.instance.createSection();
+        PosthogTrackers.trackSectionCreation("RoomListItemOverflowMenu");
+
         // Add the room to the section
         if (newTag) {
             tagRoom(this.props.room, newTag);
@@ -429,34 +525,54 @@ export class RoomListItemViewModel
         tagRoom(this.props.room, tag);
     };
 
-    private onOrderedCustomSectionsChange = (): void => {
-        // Rebuild sections list to reflect new order
-        const sections = RoomListItemViewModel.buildSections(this.props.room.tags);
+    public onRemoveFromSection = (): void => {
+        const roomTags = this.props.room.tags;
+        const sectionTag = RoomListStoreV3.instance.orderedSectionTags.find((tag) => Boolean(roomTags[tag]));
+        if (sectionTag) {
+            tagRoom(this.props.room, sectionTag);
+        }
+    };
+
+    private onCustomSectionsChange = (): void => {
+        // Rebuild the available sections and the sections list to reflect the new settings
+        this.availableSections = RoomListItemViewModel.computeAvailableSections();
+        const sections = RoomListItemViewModel.buildSections(this.props.room.tags, this.availableSections);
         this.snapshot.merge({ sections: keepIfSame(this.snapshot.current.sections, sections) });
     };
 
     /**
-     * Build the list of available sections for the "Move to section" submenu.
+     * Compute the sections available in the "Move to section" submenu.
      * Order follows the canonical section order from RoomListStoreV3.
+     * Reads the custom section settings, so callers should cache the result and recompute only
+     * when those settings change.
      */
-    private static buildSections(roomTags: Room["tags"]): Section[] {
-        const customSectionData = SettingsStore.getValue("RoomList.CustomSectionData") || {};
+    private static computeAvailableSections(): Sections {
+        const customSectionData = getCustomSectionData();
 
         return (
             RoomListStoreV3.instance.orderedSectionTags
                 // Exclude the Chats because the user toggle the other sections to move rooms in and out of the Chats section.
                 // Also exclude the default sections because they are available as toggles in the main context menu, and we don't want them to be duplicated in the "Move to section" submenu.
-                .filter(
-                    (tag) => tag !== CHATS_TAG && tag !== DefaultTagID.Favourite && tag !== DefaultTagID.LowPriority,
-                )
+                .filter((tag) => !isDefaultSectionTag(tag))
                 .map((tag) => ({
                     tag,
                     name: RoomListItemViewModel.getSectionName(tag, customSectionData),
-                    isSelected: Boolean(roomTags[tag]),
                 }))
         );
     }
 
+    /**
+     * Build the list of sections for the "Move to section" submenu by deriving the per-room
+     * selected state from the room's tags.
+     */
+    private static buildSections(roomTags: Room["tags"], availableSections: Sections): Section[] {
+        return availableSections.map(({ tag, name }) => ({
+            tag,
+            name,
+            isSelected: Boolean(roomTags[tag]),
+        }));
+    }
+
     /**
      * Get the display name for a section based on its tag.
      */
diff --git a/apps/web/src/viewmodels/room-list/RoomListSearchViewModel.ts b/apps/web/src/viewmodels/room-list/RoomListSearchViewModel.ts
index d1a15f99ea..6cf48de4cb 100644
--- a/apps/web/src/viewmodels/room-list/RoomListSearchViewModel.ts
+++ b/apps/web/src/viewmodels/room-list/RoomListSearchViewModel.ts
@@ -21,7 +21,8 @@ import { MetaSpace } from "../../stores/spaces";
 import { Action } from "../../dispatcher/actions";
 import PosthogTrackers from "../../PosthogTrackers";
 import defaultDispatcher from "../../dispatcher/dispatcher";
-import LegacyCallHandler, { LegacyCallHandlerEvent } from "../../LegacyCallHandler";
+import type LegacyCallHandler from "../../LegacyCallHandler";
+import { LegacyCallHandlerEvent } from "../../LegacyCallHandler";
 
 export interface Props {
     /**
@@ -29,6 +30,11 @@ export interface Props {
      * The explore button is only displayed in the Home meta space
      */
     activeSpace: string;
+
+    /**
+     * Reference to the LegacyCallHandler instance
+     */
+    legacyCallHandler: LegacyCallHandler;
 }
 
 /**
@@ -58,13 +64,13 @@ export class RoomListSearchViewModel
     };
 
     public constructor(props: Props) {
-        const supportsPstn = LegacyCallHandler.instance.getSupportsPstnProtocol();
+        const supportsPstn = props.legacyCallHandler.getSupportsPstnProtocol();
         super(props, RoomListSearchViewModel.computeSnapshot(props.activeSpace, supportsPstn));
         this.displayDialButton = supportsPstn;
 
         // Listen for changes in PSTN protocol support
         this.disposables.trackListener(
-            LegacyCallHandler.instance,
+            props.legacyCallHandler,
             LegacyCallHandlerEvent.ProtocolSupport,
             this.onProtocolSupportChange,
         );
@@ -74,7 +80,7 @@ export class RoomListSearchViewModel
      * Handles changes in protocol support (PSTN).
      */
     private readonly onProtocolSupportChange = (): void => {
-        const supportsPstn = LegacyCallHandler.instance.getSupportsPstnProtocol();
+        const supportsPstn = this.props.legacyCallHandler.getSupportsPstnProtocol();
         this.displayDialButton = supportsPstn;
         this.snapshot.set(RoomListSearchViewModel.computeSnapshot(this.props.activeSpace, supportsPstn));
     };
diff --git a/apps/web/src/viewmodels/room-list/RoomListSectionHeaderViewModel.ts b/apps/web/src/viewmodels/room-list/RoomListSectionHeaderViewModel.ts
index a7b8d6dd2d..abde61571a 100644
--- a/apps/web/src/viewmodels/room-list/RoomListSectionHeaderViewModel.ts
+++ b/apps/web/src/viewmodels/room-list/RoomListSectionHeaderViewModel.ts
@@ -6,8 +6,10 @@
  */
 
 import { type Room } from "matrix-js-sdk/src/matrix";
+import { CallType } from "matrix-js-sdk/src/webrtc/call";
 import {
     BaseViewModel,
+    type NotificationDecorationData,
     type RoomListSectionHeaderActions,
     type RoomListSectionHeaderViewSnapshot,
 } from "@element-hq/web-shared-components";
@@ -16,8 +18,19 @@ import { RoomNotificationStateStore } from "../../stores/notifications/RoomNotif
 import { NotificationStateEvents } from "../../stores/notifications/NotificationState";
 import { type RoomNotificationState } from "../../stores/notifications/RoomNotificationState";
 import SettingsStore from "../../settings/SettingsStore";
-import { DefaultTagID } from "../../stores/room-list-v3/skip-list/tag";
-import RoomListStoreV3, { CHATS_TAG } from "../../stores/room-list-v3/RoomListStoreV3";
+import RoomListStoreV3 from "../../stores/room-list-v3/RoomListStoreV3";
+import {
+    CHATS_TAG,
+    getCustomSectionData,
+    isCustomSectionTag,
+    isDefaultSectionTag,
+    isSectionExpanded,
+    setSectionExpanded,
+} from "../../stores/room-list-v3/section";
+import PosthogTrackers from "../../PosthogTrackers";
+import { CallStore, CallStoreEvent } from "../../stores/CallStore";
+import { type Call, CallEvent } from "../../models/Call";
+import throttle from "lodash/throttle";
 
 interface RoomListSectionHeaderViewModelProps {
     tag: string;
@@ -39,30 +52,33 @@ export class RoomListSectionHeaderViewModel
     private roomNotificationStates = new Set<RoomNotificationState>();
 
     /**
-     * Tracks the expanded/collapsed state per space.
-     * Key is spaceId. Defaults to expanded if not set.
+     * The calls of the rooms currently in this section that we are listening to, used to aggregate the call decoration.
      */
-    private readonly expandedBySpace = new Map<string, boolean>();
+    private currentCalls = new Set<Call>();
 
     public constructor(props: RoomListSectionHeaderViewModelProps) {
-        const isDefaultSection =
-            props.tag === DefaultTagID.Favourite || props.tag === DefaultTagID.LowPriority || props.tag === CHATS_TAG;
+        const isDefaultSection = isDefaultSectionTag(props.tag);
         super(props, {
             id: props.tag,
             title: props.title,
-            isExpanded: true,
+            isExpanded: isSectionExpanded(props.spaceId, props.tag),
             isUnread: false,
             displaySectionMenu: !isDefaultSection,
+            canBeReordered: !isDefaultSection || props.tag === CHATS_TAG,
         });
         const sectionWatherRef = SettingsStore.watchSetting("RoomList.CustomSectionData", null, () =>
             this.onCustomSectionDataChange(),
         );
         this.disposables.track(() => SettingsStore.unwatchSetting(sectionWatherRef));
+
+        // Recompute the decoration when a call starts or ends in any room
+        this.disposables.trackListener(CallStore.instance, CallStoreEvent.Call, this.onCallChanged);
     }
 
-    public onClick = (): void => {
+    public onClick = async (): Promise<void> => {
         const isExpanded = !this.snapshot.current.isExpanded;
-        this.expandedBySpace.set(this.props.spaceId, isExpanded);
+        // We don't wait to persist the expanded state to storage, as it is not critical and we want the UI to update immediately
+        void setSectionExpanded(this.props.spaceId, this.props.tag, isExpanded);
         this.snapshot.merge({ isExpanded });
         this.props.onToggleExpanded(isExpanded);
     };
@@ -79,8 +95,12 @@ export class RoomListSectionHeaderViewModel
      * This will not trigger the onToggleExpanded callback.
      */
     public set isExpanded(value: boolean) {
-        this.expandedBySpace.set(this.props.spaceId, value);
+        // We don't wait to persist the expanded state to storage, as it is not critical and we want the UI to update immediately
+        void setSectionExpanded(this.props.spaceId, this.props.tag, value);
         this.snapshot.merge({ isExpanded: value });
+
+        const kind = value ? "Expand" : "Collapse";
+        PosthogTrackers.trackCollapseOrExpandSection(kind, "SectionHeader");
     }
 
     /**
@@ -89,7 +109,7 @@ export class RoomListSectionHeaderViewModel
      */
     public setSpace(spaceId: string): void {
         this.props.spaceId = spaceId;
-        const isExpanded = this.expandedBySpace.get(this.props.spaceId) ?? true;
+        const isExpanded = isSectionExpanded(this.props.spaceId, this.props.tag);
         this.snapshot.merge({ isExpanded });
     }
 
@@ -104,7 +124,7 @@ export class RoomListSectionHeaderViewModel
         // Unsubscribe from rooms no longer in the section
         for (const state of this.roomNotificationStates) {
             if (!newStates.has(state)) {
-                state.off(NotificationStateEvents.Update, this.updateUnreadState);
+                state.off(NotificationStateEvents.Update, this.updateNotificationState);
             }
         }
 
@@ -112,27 +132,123 @@ export class RoomListSectionHeaderViewModel
         for (const state of newStates) {
             if (!this.roomNotificationStates.has(state)) {
                 // We don't use trackListener because we don't want to grow the disposables indefinitely as rooms are added and removed from the section
-                state.on(NotificationStateEvents.Update, this.updateUnreadState);
+                state.on(NotificationStateEvents.Update, this.updateNotificationState);
             }
         }
 
         this.roomNotificationStates = newStates;
-        this.updateUnreadState();
+        this.updateCallListeners();
+        this.updateNotificationState();
     }
 
     /**
-     * Update the unread state of the section header based on the notification states of the tracked rooms.
+     * Subscribe to participant/type changes of the calls in the section's rooms, and unsubscribe
+     * from calls that are no longer present. Mirrors the call tracking done per room list item.
      */
-    private updateUnreadState = (): void => {
-        const isUnread = [...this.roomNotificationStates].some((state) => state.hasAnyNotificationOrActivity);
-        this.snapshot.merge({ isUnread });
+    private updateCallListeners(): void {
+        const newCalls = new Set<Call>();
+        for (const state of this.roomNotificationStates) {
+            const call = state.room && CallStore.instance.getCall(state.room.roomId);
+            if (call) newCalls.add(call);
+        }
+
+        // Unsubscribe from calls no longer present
+        for (const call of this.currentCalls) {
+            if (!newCalls.has(call)) {
+                call.off(CallEvent.Participants, this.updateNotificationState);
+                call.off(CallEvent.CallTypeChanged, this.updateNotificationState);
+            }
+        }
+
+        // Subscribe to newly added calls
+        for (const call of newCalls) {
+            if (!this.currentCalls.has(call)) {
+                call.on(CallEvent.Participants, this.updateNotificationState);
+                call.on(CallEvent.CallTypeChanged, this.updateNotificationState);
+            }
+        }
+
+        this.currentCalls = newCalls;
+    }
+
+    private onCallChanged = (): void => {
+        this.updateCallListeners();
+        this.updateNotificationState();
+    };
+
+    /**
+     * Update the section header from the notification states of the tracked rooms.
+     * Computes both the unread (bold) state and a merged notification decoration that aggregates
+     * the rooms' notifications. The activity "dot" is intentionally excluded from the decoration.
+     */
+    private updateNotificationState = throttle(
+        (): void => {
+            this.doUpdateNotificationState();
+        },
+        200,
+        // Throttled because it iterates every room in the section and fires once per tracked room
+        // notification update, which during sync catch-up means once per incoming timeline event
+        { leading: true, trailing: true },
+    );
+
+    private doUpdateNotificationState = (): void => {
+        let isUnread = false;
+        let isMention = false;
+        let isNotification = false;
+        let isUnsentMessage = false;
+        let hasUnreadCount = false;
+        let invited = false;
+        let count = 0;
+        let callType: "video" | "voice" | undefined = undefined;
+
+        for (const state of this.roomNotificationStates) {
+            if (state.hasAnyNotificationOrActivity) isUnread = true;
+            if (state.isMention) isMention = true;
+            if (state.isNotification) isNotification = true;
+            if (state.isUnsentMessage) isUnsentMessage = true;
+            if (state.hasUnreadCount) hasUnreadCount = true;
+            if (state.invited) invited = true;
+            // Mention, notification, Mark as unread are aggregated
+            if (state.isMention || state.isNotification) count += state.count || 1;
+
+            // Aggregate active calls, preferring a video call over a voice call
+            const call = state.room && CallStore.instance.getCall(state.room.roomId);
+            if (call && call.participants.size > 0) {
+                if (call.callType === CallType.Video) callType = "video";
+                else if (call.callType === CallType.Voice && callType !== "video") callType = "voice";
+            }
+        }
+
+        const notification: NotificationDecorationData = {
+            // Drives the decoration's early-return: an activity-only section stays bold but shows no badge
+            hasAnyNotificationOrActivity:
+                isMention || isNotification || isUnsentMessage || invited || Boolean(callType),
+            isUnsentMessage,
+            isMention,
+            isNotification,
+            hasUnreadCount,
+            count,
+            invited,
+            callType,
+            // The activity dot and muted bell are intentionally not aggregated onto the section header
+            isActivityNotification: false,
+            muted: false,
+        };
+
+        this.snapshot.merge({ isUnread, notification });
     };
 
     public dispose(): void {
+        this.updateNotificationState.cancel();
         for (const state of this.roomNotificationStates) {
-            state.off(NotificationStateEvents.Update, this.updateUnreadState);
+            state.off(NotificationStateEvents.Update, this.updateNotificationState);
         }
         this.roomNotificationStates.clear();
+        for (const call of this.currentCalls) {
+            call.off(CallEvent.Participants, this.updateNotificationState);
+            call.off(CallEvent.CallTypeChanged, this.updateNotificationState);
+        }
+        this.currentCalls.clear();
         super.dispose();
     }
 
@@ -140,8 +256,7 @@ export class RoomListSectionHeaderViewModel
      * Handle changes to custom section data.
      */
     private onCustomSectionDataChange(): void {
-        const customSectionData = SettingsStore.getValue("RoomList.CustomSectionData") || {};
-        const sectionData = customSectionData[this.props.tag];
+        const sectionData = isCustomSectionTag(this.props.tag) ? getCustomSectionData()[this.props.tag] : undefined;
         if (sectionData) {
             this.snapshot.merge({ title: sectionData.name });
         }
@@ -155,5 +270,7 @@ export class RoomListSectionHeaderViewModel
         // There is one notification state per room in the section
         const isEmpty = this.roomNotificationStates.size === 0;
         await RoomListStoreV3.instance.removeSection(this.props.tag, isEmpty);
+
+        PosthogTrackers.trackInteraction("WebDeleteSection");
     };
 }
diff --git a/apps/web/src/viewmodels/room-list/RoomListViewModel.ts b/apps/web/src/viewmodels/room-list/RoomListViewModel.ts
index 6e28e61ed7..d17d88c3a1 100644
--- a/apps/web/src/viewmodels/room-list/RoomListViewModel.ts
+++ b/apps/web/src/viewmodels/room-list/RoomListViewModel.ts
@@ -15,29 +15,34 @@ import {
     _t,
     type ToastType,
 } from "@element-hq/web-shared-components";
-import { type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
+import { type Room, type MatrixClient } from "matrix-js-sdk/src/matrix";
 
 import { Action } from "../../dispatcher/actions";
 import dispatcher from "../../dispatcher/dispatcher";
 import { type ViewRoomDeltaPayload } from "../../dispatcher/payloads/ViewRoomDeltaPayload";
 import { type ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
 import { type RoomListSectionsCollapseStateChangedPayload } from "../../dispatcher/payloads/RoomListSectionsCollapseStateChangedPayload";
-import SpaceStore from "../../stores/spaces/SpaceStore";
+import type SpaceStore from "../../stores/spaces/SpaceStore";
 import RoomListStoreV3, {
-    CHATS_TAG,
     RoomListStoreV3Event,
     type RoomsResult,
     type Section,
 } from "../../stores/room-list-v3/RoomListStoreV3";
 import { FilterEnum } from "../../stores/room-list-v3/skip-list/filters";
-import { RoomNotificationStateStore } from "../../stores/notifications/RoomNotificationStateStore";
+import {
+    RoomNotificationStateStore,
+    UPDATE_STATUS_INDICATOR,
+} from "../../stores/notifications/RoomNotificationStateStore";
 import { RoomListItemViewModel } from "./RoomListItemViewModel";
-import { SdkContextClass } from "../../contexts/SDKContext";
 import { hasCreateRoomRights } from "./utils";
 import { keepIfSame } from "../../utils/keepIfSame";
 import { DefaultTagID } from "../../stores/room-list-v3/skip-list/tag";
 import { RoomListSectionHeaderViewModel } from "./RoomListSectionHeaderViewModel";
+import { getCustomSectionData, isCustomSectionTag, CHATS_TAG } from "../../stores/room-list-v3/section";
+import { tagRoom } from "../../utils/room/tagRoom";
+import { getSectionTagForRoom } from "../../utils/room/getSectionTagForRoom";
 import SettingsStore from "../../settings/SettingsStore";
+import { type RoomViewStore } from "../../stores/RoomViewStore.tsx";
 
 /**
  * Tracks the position of the active room within a specific section.
@@ -53,6 +58,8 @@ interface StickyRoomPosition {
 
 interface RoomListViewModelProps {
     client: MatrixClient;
+    roomViewStore: RoomViewStore;
+    spaceStore: SpaceStore;
 }
 
 const filterKeyToIdMap: Map<FilterEnum, FilterId> = new Map([
@@ -65,6 +72,24 @@ const filterKeyToIdMap: Map<FilterEnum, FilterId> = new Map([
     [FilterEnum.LowPriorityFilter, "low_priority"],
 ]);
 
+/**
+ * Filters that are redundant when sections are enabled: Favourites and Low Priority rooms
+ * already have their own sections, so these filters are only shown as chips when sectioning
+ * is disabled (see {@link getVisibleFilterIds}).
+ */
+const SECTION_ONLY_FILTER_IDS: ReadonlySet<FilterId> = new Set<FilterId>(["favourite", "low_priority"]);
+
+/**
+ * Compute the filter ids to display as primary filter chips.
+ * When sections are enabled, the Favourites and Low Priority filters are hidden because those
+ * rooms are surfaced as dedicated sections instead.
+ */
+function getVisibleFilterIds(): FilterId[] {
+    const areSectionsEnabled = SettingsStore.getValue("RoomList.showSections");
+    const filterIds = [...filterKeyToIdMap.values()];
+    return areSectionsEnabled ? filterIds.filter((id) => !SECTION_ONLY_FILTER_IDS.has(id)) : filterIds;
+}
+
 const TAG_TO_TITLE_MAP: Record<string, string> = {
     [DefaultTagID.Favourite]: _t("room_list|section|favourites"),
     [CHATS_TAG]: _t("room_list|section|chats"),
@@ -92,24 +117,56 @@ export class RoomListViewModel
     private roomsMap = new Map<string, Room>();
     // Don't clear section vm because we want to keep the expand/collapse state even during space changes.
     private readonly roomSectionHeaderViewModels = new Map<string, RoomListSectionHeaderViewModel>();
+    /**
+     * When dragging sections, we want to temporarily expand all sections to make it easier to move rooms between sections.
+     * This map stores the original expansion state of each section before the drag starts, so we can restore it after the drag ends.
+     */
+    private readonly savedExpansionStates = new Map<string, boolean>();
 
     /**
-     * Reference to the currently displayed toast, used to automatically close the toast after a timeout.
+     * Reference to the currently displayed event toast's auto-close timer, used to dismiss it
+     * after a timeout (see {@link showToast}).
      */
     private toastRef?: number;
 
+    /**
+     * The currently active transient event toast ("section_created" / "chat_moved"), if any.
+     * Distinct from the derived "unread_activity" toast: this is set imperatively by an event
+     * and auto-dismisses, whereas unread activity is recomputed from list/notification state.
+     * {@link recomputeToast} reconciles the two into the single {@link RoomListViewSnapshot.toast}.
+     */
+    private eventToast?: ToastType;
+
+    /**
+     * Whether there is currently unread activity (a notification count) in a room scrolled below
+     * the visible area of the list. Recomputed by {@link updateUnreadActivityBelow}; surfaced as
+     * the "unread_activity" toast by {@link recomputeToast} when no event toast takes precedence.
+     */
+    private hasUnreadActivityBelow = false;
+
+    /**
+     * The last genuinely-visible index reported by the virtualized list (excluding the
+     * rendered overscan buffer), in the list's own entry space (room indices for a flat
+     * list; including a slot per section header for a grouped list). Initialised to -1 so
+     * that nothing is considered "below the fold" until the view reports the fold.
+     */
+    private foldIndex = -1;
+
+    /**
+     * Imperative scroll handle registered by the view (see {@link setScrollToIndex}). The view
+     * owns the virtualized list's scroll handle, so it provides this; we call it to scroll a
+     * given item index into view in response to user actions.
+     */
+    private scrollToIndex?: (index: number) => void;
+
     public constructor(props: RoomListViewModelProps) {
-        const activeSpace = SpaceStore.instance.activeSpaceRoom;
+        const activeSpace = props.spaceStore.activeSpaceRoom;
 
         // Get initial rooms
         const roomsResult = RoomListStoreV3.instance.getSortedRoomsInActiveSpace(undefined);
         const canCreateRoom = hasCreateRoomRights(props.client, activeSpace);
 
-        // Remove favourite and low priority filters if sections are enabled, as they are redundant with the sections
-        const areSectionsEnabled = SettingsStore.getValue("feature_room_list_sections");
-        const filterIds = [...filterKeyToIdMap.values()].filter(
-            (id) => !areSectionsEnabled || (id !== "favourite" && id !== "low_priority"),
-        );
+        const filterIds = getVisibleFilterIds();
 
         // By default, all sections are expanded
         const { sections, isFlatList } = computeSections(roomsResult, (tag) => true);
@@ -138,31 +195,27 @@ export class RoomListViewModel
         this.updateRoomsMap(roomsResult);
 
         // Subscribe to room list updates
-        this.disposables.trackListener(
-            RoomListStoreV3.instance,
-            RoomListStoreV3Event.ListsUpdate as any,
-            this.onListsUpdate,
-        );
+        this.disposables.trackListener(RoomListStoreV3.instance, RoomListStoreV3Event.ListsUpdate, this.onListsUpdate);
 
         // Subscribe to room list loaded
-        this.disposables.trackListener(
-            RoomListStoreV3.instance,
-            RoomListStoreV3Event.ListsLoaded as any,
-            this.onListsLoaded,
-        );
+        this.disposables.trackListener(RoomListStoreV3.instance, RoomListStoreV3Event.ListsLoaded, this.onListsLoaded);
 
         // Subscribe to section creation
         this.disposables.trackListener(
             RoomListStoreV3.instance,
-            RoomListStoreV3Event.SectionCreated as any,
+            RoomListStoreV3Event.SectionCreated,
             this.onSectionCreated as (...args: unknown[]) => void,
         );
 
         // Subscribe to room tagging
+        this.disposables.trackListener(RoomListStoreV3.instance, RoomListStoreV3Event.RoomTagged, this.onRoomTagged);
+
+        // Recompute the "unread activity below" toast when room notification state
+        // changes (e.g. a room below the fold becomes unread, or is marked read).
         this.disposables.trackListener(
-            RoomListStoreV3.instance,
-            RoomListStoreV3Event.RoomTagged as any,
-            this.onRoomTagged,
+            RoomNotificationStateStore.instance,
+            UPDATE_STATUS_INDICATOR,
+            this.updateUnreadActivityBelow,
         );
 
         // Subscribe to active room changes to update selected room
@@ -171,6 +224,10 @@ export class RoomListViewModel
             dispatcher.unregister(dispatcherRef);
         });
 
+        // Recompute the lis when setting changes
+        const showSectionsRef = SettingsStore.watchSetting("RoomList.showSections", null, this.onShowSectionsChange);
+        this.disposables.track(() => SettingsStore.unwatchSetting(showSectionsRef));
+
         // Track cleanup of all child view models
         this.disposables.track(() => {
             for (const viewModel of this.roomItemViewModels.values()) {
@@ -203,16 +260,20 @@ export class RoomListViewModel
         // Update roomsMap immediately before clearing VMs
         this.updateRoomsMap(this.roomsResult);
 
-        // When a filter is toggled on, expand sections that have results so they're visible
-        if (newFilter) {
-            for (const section of this.roomsResult.sections) {
-                if (section.rooms.length > 0) {
-                    const sectionHeaderVM = this.roomSectionHeaderViewModels.get(section.tag);
-                    if (sectionHeaderVM) sectionHeaderVM.isExpanded = true;
-                }
-            }
-        }
+        this.updateRoomListData();
+    };
 
+    /**
+     * Handle changes to the {@link RoomList.showSections} setting.
+     * Toggling sections is a rare action, so we simply reset the filters and rebuild
+     * the list from scratch rather than trying to reconcile the previous state.
+     */
+    private readonly onShowSectionsChange = (): void => {
+        this.activeFilter = undefined;
+        this.clearViewModels();
+        this.roomsResult = RoomListStoreV3.instance.getSortedRoomsInActiveSpace();
+        this.updateRoomsMap(this.roomsResult);
+        this.snapshot.merge({ filterIds: getVisibleFilterIds() });
         this.updateRoomListData();
     };
 
@@ -285,8 +346,7 @@ export class RoomListViewModel
     public getSectionHeaderViewModel(tag: string): RoomListSectionHeaderViewModel {
         if (this.roomSectionHeaderViewModels.has(tag)) return this.roomSectionHeaderViewModels.get(tag)!;
 
-        const customSections = SettingsStore.getValue("RoomList.CustomSectionData");
-        const title = TAG_TO_TITLE_MAP[tag] || customSections[tag]?.name || tag;
+        const title = TAG_TO_TITLE_MAP[tag] || (isCustomSectionTag(tag) && getCustomSectionData()[tag]?.name) || tag;
         const viewModel = new RoomListSectionHeaderViewModel({
             tag,
             title,
@@ -301,10 +361,13 @@ export class RoomListViewModel
      * Update which rooms are currently visible.
      * Called by the view when scroll position changes.
      * Disposes of view models for rooms no longer visible.
+     *
+     * Indices are in room-index space (section header entries excluded):
+     * startIndex is inclusive, endIndex is exclusive.
      */
     public updateVisibleRooms(startIndex: number, endIndex: number): void {
         const allRoomIds = this.roomIds;
-        const newVisibleIds = allRoomIds.slice(startIndex, Math.min(endIndex, allRoomIds.length));
+        const newVisibleIds = allRoomIds.slice(startIndex, endIndex);
 
         const newVisibleSet = new Set(newVisibleIds);
 
@@ -315,9 +378,159 @@ export class RoomListViewModel
                 this.roomItemViewModels.delete(roomId);
             }
         }
+
+        // The rendered range changed, so re-evaluate whether unread activity is below the fold.
+        this.updateUnreadActivityBelow();
     }
 
-    private onDispatch = (payload: any): void => {
+    /**
+     * Update the last genuinely-visible item index (excluding the rendered overscan
+     * buffer), reported by the view from the scroller geometry. This is what the
+     * "unread activity" toast uses to decide what is below the fold, so that the toast
+     * appears as soon as an unread room scrolls just out of view rather than only once
+     * it leaves the overscan buffer.
+     */
+    public updateVisibleFold = (visibleEndIndex: number): void => {
+        if (this.foldIndex === visibleEndIndex) return;
+        this.foldIndex = visibleEndIndex;
+        this.updateUnreadActivityBelow();
+    };
+
+    /**
+     * Find the first room with an unread-message notification (a count badge — the green or
+     * red decoration, not just the unread-activity dot) positioned below the visible area.
+     *
+     * "Below the fold" is determined from the last visible index reported by the
+     * virtualized list (see {@link updateVisibleRooms}). For a grouped list the
+     * virtualized list interleaves a section-header entry before each section's
+     * rooms, so we walk the rooms in the same entry order the view renders and
+     * compare against that index space.
+     *
+     * Collapsed sections render only their header (their rooms are removed from the
+     * displayed sections), so their notifying rooms are not directly reachable. When a
+     * collapsed section's header is itself below the fold and the section contains a
+     * notifying room, we surface the header as the target so clicking the toast scrolls
+     * it into view (revealing the header's aggregated notification badge).
+     *
+     * @returns The next notifying room below the fold, or undefined if there is none
+     *          (or the view has not yet reported a visible range).
+     */
+    private firstUnreadRoomBelowFold(): { room: Room; index: number } | undefined {
+        if (this.foldIndex < 0) return undefined;
+
+        // Only surface rooms showing a notification badge (a count/symbol — the green or red
+        // decoration), not rooms with just the unread-activity dot.
+        const hasNotification = (room: Room): boolean =>
+            RoomNotificationStateStore.instance.getRoomState(room).hasUnreadCount;
+
+        if (this.snapshot.current.isFlatList) {
+            // Flat list: virtualized indices map 1:1 to rooms.
+            const rooms = this.sections.flatMap((section) => section.rooms);
+            for (let i = this.foldIndex + 1; i < rooms.length; i++) {
+                if (hasNotification(rooms[i])) return { room: rooms[i], index: i };
+            }
+            return undefined;
+        }
+
+        // Full (pre-collapse) rooms per section tag, so we can detect unreads hidden inside
+        // collapsed sections whose displayed rooms have been emptied.
+        const fullRoomsByTag = new Map(this.roomsResult.sections.map((section) => [section.tag, section.rooms]));
+
+        // Grouped list: each section contributes a header entry followed by its rooms, so the
+        // index we return is in the virtualized list's entry space (matching scrollIntoView).
+        let entryIndex = -1;
+        for (const section of this.sections) {
+            entryIndex++; // section header entry
+
+            const isExpanded = this.roomSectionHeaderViewModels.get(section.tag)?.isExpanded ?? true;
+            if (!isExpanded) {
+                // Collapsed: rooms aren't rendered, so the header is the only entry. If it is
+                // below the fold and hides an unread room, target the header itself.
+                if (entryIndex > this.foldIndex) {
+                    const notifyingRoom = (fullRoomsByTag.get(section.tag) ?? []).find(hasNotification);
+                    if (notifyingRoom) return { room: notifyingRoom, index: entryIndex };
+                }
+                continue;
+            }
+
+            for (const room of section.rooms) {
+                entryIndex++; // this room's entry
+                if (entryIndex > this.foldIndex && hasNotification(room)) return { room, index: entryIndex };
+            }
+        }
+        return undefined;
+    }
+
+    /**
+     * Recompute whether there is unread activity below the visible area, reconciling the
+     * displayed toast if it changed.
+     */
+    private updateUnreadActivityBelow = (): void => {
+        const hasUnreadActivityBelow = this.firstUnreadRoomBelowFold() !== undefined;
+        if (this.hasUnreadActivityBelow === hasUnreadActivityBelow) return;
+        this.hasUnreadActivityBelow = hasUnreadActivityBelow;
+        this.recomputeToast();
+    };
+
+    /**
+     * Register (or clear) the view's imperative scroll handler. Called by the view on mount
+     * since it owns the virtualized list's scroll handle.
+     */
+    public setScrollToIndex = (scrollToIndex: ((index: number) => void) | undefined): void => {
+        this.scrollToIndex = scrollToIndex;
+    };
+
+    /**
+     * Scroll the next unread room below the visible area of the list into view (without opening
+     * it). Invoked when the user clicks the "unread activity" toast.
+     */
+    public scrollToUnreadActivity = (): void => {
+        const target = this.firstUnreadRoomBelowFold();
+        if (target) this.scrollToIndex?.(target.index);
+    };
+
+    /**
+     * Scroll a room into view, expanding its section first if it is collapsed so the tile can
+     * actually be shown.
+     */
+    private async scrollRoomIntoView(roomId: string): Promise<void> {
+        // Look in the full (pre-collapse) sections so we can find rooms hidden in collapsed sections.
+        const section = this.roomsResult.sections.find((s) => s.rooms.some((room) => room.roomId === roomId));
+        // Room not found
+        if (!section) return;
+
+        const headerViewModel = this.roomSectionHeaderViewModels.get(section.tag);
+        // Expand and rebuild the section
+        if (headerViewModel && !headerViewModel.isExpanded) {
+            headerViewModel.isExpanded = true;
+            await this.updateRoomListData();
+        }
+
+        // Scroll to the room
+        const index = this.getRoomEntryIndex(roomId);
+        if (index !== undefined) this.scrollToIndex?.(index);
+    }
+
+    /**
+     * Compute a room's index in the list's entry space, or undefined if it is not in the displayed
+     * sections (e.g. collapsed or filtered out). Flat list: the room index; grouped list: includes
+     * one slot per section header (matching {@link firstUnreadRoomBelowFold}).
+     */
+    private getRoomEntryIndex(roomId: string): number | undefined {
+        // A grouped list renders a header entry before each section's rooms; a flat list does not.
+        const hasSectionHeaders = !this.snapshot.current.isFlatList;
+
+        let entryIndex = 0;
+        for (const section of this.sections) {
+            if (hasSectionHeaders) entryIndex++; // section header entry
+            const indexInSection = section.rooms.findIndex((room) => room.roomId === roomId);
+            if (indexInSection !== -1) return entryIndex + indexInSection;
+            entryIndex += section.rooms.length;
+        }
+        return undefined;
+    }
+
+    private onDispatch = async (payload: any): Promise<void> => {
         if (payload.action === Action.ActiveRoomChanged) {
             // When the active room changes, update the room list data to reflect the new selected room
             // Pass isRoomChange=true so sticky logic doesn't prevent the index from updating
@@ -326,6 +539,8 @@ export class RoomListViewModel
             // Handle keyboard navigation shortcuts (Alt+ArrowUp/Down)
             // This was previously handled by useRoomListNavigation hook
             this.handleViewRoomDelta(payload as ViewRoomDeltaPayload);
+        } else if (payload.action === Action.ViewRoom && payload.show_room_tile && payload.room_id) {
+            await this.scrollRoomIntoView(payload.room_id);
         } else if (payload.action === Action.RoomListCollapseAllSections) {
             this.onCollapseAllSections(false);
         } else if (payload.action === Action.RoomListExpandAllSections) {
@@ -350,7 +565,7 @@ export class RoomListViewModel
      * Migrated from useRoomListNavigation hook.
      */
     private handleViewRoomDelta(payload: ViewRoomDeltaPayload): void {
-        const currentRoomId = SdkContextClass.instance.roomViewStore.getRoomId();
+        const currentRoomId = this.props.roomViewStore.getRoomId();
         if (!currentRoomId) return;
 
         const { delta, unread } = payload;
@@ -421,7 +636,7 @@ export class RoomListViewModel
             }
 
             // Space changed - get the last selected room for the new space to prevent flicker
-            const lastSelectedRoom = SpaceStore.instance.getLastSelectedRoomIdForSpace(newSpaceId);
+            const lastSelectedRoom = this.props.spaceStore.getLastSelectedRoomIdForSpace(newSpaceId);
 
             this.updateRoomListData(true, lastSelectedRoom);
             return;
@@ -526,9 +741,12 @@ export class RoomListViewModel
         roomIdOverride: string | null = null,
         scrollToSectionTag: string | undefined = undefined,
     ): Promise<void> {
+        // Store is still loading rooms - don't update the list yet, we'll get another update when loading finishes
+        if (RoomListStoreV3.instance.isLoadingRooms) return;
+
         // Determine the room ID to use for calculations
         // Use override if provided (e.g., during space changes), otherwise fall back to RoomViewStore
-        const roomId = roomIdOverride ?? SdkContextClass.instance.roomViewStore.getRoomId();
+        const roomId = roomIdOverride ?? this.props.roomViewStore.getRoomId();
 
         // Apply sticky room logic to keep selected room at same position within its section
         const stickySections = this.applyStickyRoom(isRoomChange, roomId);
@@ -555,12 +773,6 @@ export class RoomListViewModel
             this.roomsResult,
             (tag) => this.roomSectionHeaderViewModels.get(tag)?.isExpanded ?? true,
         );
-        // If it's a flat list, we need to make sure the single section is expanded and has all rooms, otherwise the room list will be empty
-        if (isFlatList) {
-            const chatSections = this.roomSectionHeaderViewModels.get(CHATS_TAG);
-            if (chatSections) chatSections.isExpanded = true;
-            chatSections?.setRooms(this.roomsResult.sections.flatMap((section) => section.rooms));
-        }
         this.sections = sections;
 
         // Calculate the active room index from the computed sections (which exclude collapsed sections' rooms)
@@ -599,6 +811,9 @@ export class RoomListViewModel
         });
 
         this.notifyCollapseState(isFlatList);
+
+        // Room list / sections changed: re-evaluate the unread-activity toast.
+        this.updateUnreadActivityBelow();
     }
 
     /**
@@ -606,8 +821,8 @@ export class RoomListViewModel
      * @param isFlatList - Whether the room list is currently displayed as a flat list
      */
     private notifyCollapseState(isFlatList: boolean): void {
-        // Hide collapse/expand all button if sections are disabled or if it's a flat list
-        if (!SettingsStore.getValue("feature_room_list_sections") || isFlatList) {
+        // Hide collapse/expand all button if it's a flat list
+        if (isFlatList) {
             dispatcher.dispatch<RoomListSectionsCollapseStateChangedPayload>({
                 action: Action.RoomListSectionsCollapseStateChanged,
                 collapseSections: undefined,
@@ -630,7 +845,7 @@ export class RoomListViewModel
     };
 
     public createRoom = (): void => {
-        const activeSpace = SpaceStore.instance.activeSpaceRoom;
+        const activeSpace = this.props.spaceStore.activeSpaceRoom;
         if (activeSpace) {
             dispatcher.dispatch({
                 action: Action.CreateRoom,
@@ -644,29 +859,88 @@ export class RoomListViewModel
     };
 
     public onSectionCreated = (tag: string): void => {
+        // Refresh roomsResult so the new section lands in the same snapshot as the scroll-to.
+        const filterKeys = this.activeFilter !== undefined ? [this.activeFilter] : undefined;
+        this.roomsResult = RoomListStoreV3.instance.getSortedRoomsInActiveSpace(filterKeys);
+        this.updateRoomsMap(this.roomsResult);
         this.updateRoomListData(false, null, tag);
         this.showToast("section_created");
     };
 
     public onRoomTagged = (): void => {
+        const areSectionsEnabled = SettingsStore.getValue("RoomList.showSections");
+        // Only show the "chat moved" toast if sections are enabled
+        if (!areSectionsEnabled) return;
+
         this.showToast("chat_moved");
     };
 
     public closeToast: () => void = () => {
         clearTimeout(this.toastRef);
-        this.snapshot.merge({
-            toast: undefined,
-        });
+        this.eventToast = undefined;
+        this.recomputeToast();
     };
 
     private showToast(toast: ToastType): void {
         clearTimeout(this.toastRef);
-        this.snapshot.merge({ toast });
+        this.eventToast = toast;
+        this.recomputeToast();
         // Automatically close the toast after 15 seconds
         this.toastRef = setTimeout(() => {
             this.closeToast();
         }, 15 * 1000);
     }
+
+    /**
+     * Reconcile the single toast shown by the view from the two independent sources: the
+     * transient event toast (which takes precedence and auto-dismisses) and the derived
+     * unread-activity state. The snapshot is only updated when the effective toast changes,
+     * to avoid unnecessary re-renders.
+     */
+    private recomputeToast(): void {
+        const toast = this.eventToast ?? (this.hasUnreadActivityBelow ? "unread_activity" : undefined);
+        if (this.snapshot.current.toast !== toast) {
+            this.snapshot.merge({ toast });
+        }
+    }
+
+    public changeSectionOrder = async (sourceTag: string, targetTag: string): Promise<void> => {
+        await RoomListStoreV3.instance.reorderSection(sourceTag, targetTag);
+        // Scroll to the section after it moved
+        const filterKeys = this.activeFilter !== undefined ? [this.activeFilter] : undefined;
+        this.roomsResult = RoomListStoreV3.instance.getSortedRoomsInActiveSpace(filterKeys);
+        this.updateRoomsMap(this.roomsResult);
+        this.updateRoomListData(false, null, sourceTag);
+    };
+
+    public onSectionDragStart = (): void => {
+        this.savedExpansionStates.clear();
+        for (const [tag, sectionVM] of this.roomSectionHeaderViewModels) {
+            this.savedExpansionStates.set(tag, sectionVM.isExpanded);
+            sectionVM.isExpanded = false;
+        }
+        this.updateRoomListData();
+    };
+
+    public onSectionDragEnd = (): void => {
+        for (const [tag, expanded] of this.savedExpansionStates) {
+            const sectionVM = this.roomSectionHeaderViewModels.get(tag);
+            if (sectionVM) sectionVM.isExpanded = expanded;
+        }
+        this.savedExpansionStates.clear();
+        this.updateRoomListData();
+    };
+
+    public changeRoomSection = (roomId: string, tag: string): void => {
+        const room = this.props.client.getRoom(roomId);
+        if (!room) return;
+
+        const currentTag = getSectionTagForRoom(room);
+        // Room is already in the section
+        if (currentTag === tag) return;
+
+        tagRoom(room, tag);
+    };
 }
 
 /**
@@ -679,17 +953,23 @@ function computeSections(
     roomsResult: RoomsResult,
     isSectionExpanded: (tag: string) => boolean,
 ): { sections: Section[]; isFlatList: boolean } {
-    const customSections = SettingsStore.getValue("RoomList.CustomSectionData");
+    const customSections = getCustomSectionData();
 
-    const sections = roomsResult.sections
-        // Only include sections that have rooms or are custom sections (which may be empty but should still be shown)
-        .filter((section) => section.rooms.length > 0 || customSections[section.tag])
-        // Remove roomIds for sections that are currently collapsed according to their section header view model
-        .map((section) => ({
-            ...section,
-            rooms: isSectionExpanded(section.tag) ? section.rooms : [],
-        }));
-    const isFlatList = sections.length === 1 && sections[0].tag === CHATS_TAG;
+    const filtered = roomsResult.sections
+        // Only include sections that have rooms, or custom sections that were created in the current space.
+        .filter(
+            (section) =>
+                section.rooms.length > 0 ||
+                (isCustomSectionTag(section.tag) && customSections[section.tag]?.spaceId === roomsResult.spaceId),
+        );
+    const isFlatList = filtered.length === 0 || (filtered.length === 1 && filtered[0].tag === CHATS_TAG);
+
+    const sections = filtered.map((section) => ({
+        ...section,
+        // A flat list has no section header to toggle, so always render its rooms.
+        // Otherwise, remove roomIds for sections that are currently collapsed.
+        rooms: isFlatList || isSectionExpanded(section.tag) ? section.rooms : [],
+    }));
 
     return { sections, isFlatList };
 }
diff --git a/apps/web/src/viewmodels/room/RoomUploadViewModel.tsx b/apps/web/src/viewmodels/room/RoomUploadViewModel.tsx
new file mode 100644
index 0000000000..dd0ca4a0a5
--- /dev/null
+++ b/apps/web/src/viewmodels/room/RoomUploadViewModel.tsx
@@ -0,0 +1,322 @@
+/*
+ * Copyright 2026 Element Creations 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 {
+    _t,
+    BaseViewModel,
+    type UploadButtonViewActions,
+    type UploadButtonViewSnapshot,
+    useCreateAutoDisposedViewModel,
+} from "@element-hq/web-shared-components";
+import { logger as rootLogger } from "matrix-js-sdk/src/logger";
+import { AttachmentIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import React, {
+    type ChangeEventHandler,
+    createContext,
+    type ReactNode,
+    useCallback,
+    useContext,
+    useEffect,
+    useRef,
+} from "react";
+import {
+    type MatrixClient,
+    type Room,
+    type IEventRelation,
+    type MatrixEvent,
+    RoomEvent,
+} from "matrix-js-sdk/src/matrix";
+
+import type { ComposerApiFileUploadOption } from "@element-hq/element-web-module-api";
+import { useScopedRoomContext } from "../../contexts/ScopedRoomContext";
+import { useMatrixClientContext } from "../../contexts/MatrixClientContext";
+import ContentMessages from "../../ContentMessages";
+import { TimelineRenderingType } from "../../contexts/RoomContext";
+import { chromeFileInputFix } from "../../utils/BrowserWorkarounds";
+import type { MatrixDispatcher } from "../../dispatcher/dispatcher";
+import defaultDispatcher from "../../dispatcher/dispatcher";
+import { ModuleApi } from "../../modules/Api";
+import { ModuleComposerApiEvents } from "../../modules/ComposerApi";
+import { Action } from "../../dispatcher/actions";
+import type { ComposerInsertFilesPayload } from "../../dispatcher/payloads/ComposerInsertFilePayload";
+import { useDispatcher } from "../../hooks/useDispatcher";
+import type { ActionPayload } from "../../dispatcher/payloads";
+
+const logger = rootLogger.getChild("RoomUploadViewModel");
+
+interface RoomUploadViewSnapshot extends UploadButtonViewSnapshot {
+    mayDragAndDropFile: boolean;
+}
+
+export class RoomUploadViewModel
+    extends BaseViewModel<RoomUploadViewSnapshot, Record<string, never>>
+    implements UploadButtonViewActions
+{
+    private readonly uploadSelectFns = new Map<string, ComposerApiFileUploadOption["onSelected"]>();
+    public constructor(
+        private readonly room: Room,
+        private readonly client: MatrixClient,
+        private readonly timelineRenderingType: TimelineRenderingType,
+        private readonly dispatcher: MatrixDispatcher,
+        private replyToEvent: MatrixEvent | undefined,
+        private threadRelation: IEventRelation | undefined,
+        public readonly openUploadDialog: () => void,
+        private readonly moduleComposerApi = ModuleApi.instance.composer,
+    ) {
+        super(
+            {},
+            {
+                options: [],
+                mayDragAndDropFile: false,
+            },
+        );
+        // Initial check.
+        this.onRoomCurrentStateUpdated();
+        // Configure upload functions
+        for (const option of moduleComposerApi.fileUploadOptions) {
+            this.uploadSelectFns.set(option.type, option.onSelected);
+        }
+        this.uploadSelectFns.set("local", this.openUploadDialog);
+        room.on(RoomEvent.CurrentStateUpdated, this.onRoomCurrentStateUpdated);
+        this.disposables.trackListener(room, RoomEvent.CurrentStateUpdated, this.onRoomCurrentStateUpdated);
+
+        moduleComposerApi.on(ModuleComposerApiEvents.UploaderOptionsChanged, this.onUploaderOptionsChanged);
+        this.disposables.trackListener(
+            moduleComposerApi,
+            ModuleComposerApiEvents.UploaderOptionsChanged,
+            // Types issue.
+            this.onUploaderOptionsChanged as any,
+        );
+    }
+
+    private onRoomCurrentStateUpdated = (): void => {
+        const maySendMessage = this.room.maySendMessage();
+        this.snapshot.merge({
+            mayDragAndDropFile: maySendMessage,
+            options: maySendMessage
+                ? [
+                      {
+                          type: "local",
+                          label: _t("common|attachment"),
+                          icon: AttachmentIcon,
+                      },
+                      ...this.moduleComposerApi.fileUploadOptions.map((option) => ({
+                          type: option.type,
+                          label: option.label,
+                          icon: option.icon,
+                      })),
+                  ]
+                : [],
+        });
+    };
+
+    private readonly onUploaderOptionsChanged = (option: ComposerApiFileUploadOption): void => {
+        this.uploadSelectFns.set(option.type, option.onSelected);
+        this.snapshot.merge({
+            options: [
+                ...this.snapshot.current.options,
+                {
+                    type: option.type,
+                    label: option.label,
+                    icon: option.icon,
+                },
+            ],
+        });
+    };
+
+    public setReplyToEvent = (replyToEvent?: MatrixEvent): void => {
+        this.replyToEvent = replyToEvent;
+    };
+
+    public setThreadRelation = (threadRelation?: IEventRelation): void => {
+        this.threadRelation = threadRelation;
+    };
+
+    public initiateViaInputFiles = async (files: FileList | File[] | null): Promise<void> => {
+        if (!this.checkCanUpload()) {
+            return;
+        }
+        const { roomId } = this.room;
+        logger.info("initiateViaInputFiles for", roomId);
+        if (!files?.length) return;
+
+        try {
+            await ContentMessages.sharedInstance().sendContentListToRoom(
+                Array.from(files),
+                roomId,
+                this.threadRelation,
+                this.replyToEvent,
+                this.client,
+                this.timelineRenderingType,
+            );
+        } catch (ex) {
+            logger.warn("Failed to handle file upload transfer", ex);
+        }
+    };
+
+    public initiateViaDataTransfer = async (dataTransfer: DataTransfer): Promise<void> => {
+        if (!this.checkCanUpload()) {
+            return;
+        }
+        const { roomId } = this.room;
+        logger.info("initiateViaDataTransfer for", roomId);
+        if (!dataTransfer.files?.length) return;
+
+        try {
+            await ContentMessages.sharedInstance().sendContentListToRoom(
+                Array.from(dataTransfer.files),
+                roomId,
+                this.threadRelation,
+                this.replyToEvent,
+                this.client,
+                this.timelineRenderingType,
+            );
+        } catch (ex) {
+            logger.warn("Failed to handle drag and drop data transfer", ex);
+        }
+    };
+
+    public onUploadOptionSelected = (type: ComposerApiFileUploadOption["type"]): void => {
+        const fn = this.uploadSelectFns.get(type);
+        if (!fn) {
+            throw new Error("Unexpectedly called onUploadOptionSelected with an unknown type");
+        }
+        // At the point of this function being called, we should be in a state that is either rendering a room
+        // or timeline.
+        if (![TimelineRenderingType.Room, TimelineRenderingType.Thread].includes(this.timelineRenderingType)) {
+            throw new Error("TimelineRenderingType must be Room or Thread");
+        }
+        fn(
+            this.room.roomId,
+            {
+                view: this.timelineRenderingType === TimelineRenderingType.Room ? "room" : "thread",
+            },
+            {
+                inReplyToEventId: this.replyToEvent?.getId(),
+                relType: this.threadRelation?.rel_type,
+            },
+        );
+    };
+
+    private checkCanUpload(): boolean {
+        if (this.client.isGuest()) {
+            this.dispatcher.dispatch({ action: "require_registration" });
+            return false;
+        }
+        return true;
+    }
+}
+
+export const RoomUploadContext = createContext<RoomUploadViewModel | null>(null);
+
+export function useRoomUploadViewModel(): RoomUploadViewModel {
+    const ctx = useContext(RoomUploadContext);
+    if (!ctx) {
+        throw new Error("RoomFileUploadProvider is not present");
+    }
+    return ctx;
+}
+
+export function RoomUploadContextProvider({
+    children,
+    threadRelation,
+}: {
+    children: ReactNode;
+    threadRelation?: IEventRelation;
+}): ReactNode {
+    const { room, timelineRenderingType, replyToEvent } = useScopedRoomContext(
+        "room",
+        "timelineRenderingType",
+        "replyToEvent",
+    );
+    const client = useMatrixClientContext();
+    const uploadInput = useRef<HTMLInputElement>(null);
+
+    const openFilePicker = useCallback((): void => {
+        if (!uploadInput.current) {
+            throw new Error("Input not ready");
+        }
+        uploadInput.current.click();
+    }, [uploadInput]);
+
+    const vm = useCreateAutoDisposedViewModel(() => {
+        if (!room) {
+            throw new Error("RoomUploadContextProvider must have a room");
+        }
+        return new RoomUploadViewModel(
+            room,
+            client,
+            // Checked earlier
+            timelineRenderingType,
+            defaultDispatcher,
+            replyToEvent,
+            threadRelation,
+            openFilePicker,
+        );
+    });
+
+    useEffect(() => {
+        vm.setReplyToEvent(replyToEvent);
+    }, [vm, replyToEvent]);
+
+    useEffect(() => {
+        vm.setThreadRelation(threadRelation);
+    }, [vm, threadRelation]);
+
+    const onInputChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+        (ev) => {
+            void (async () => {
+                try {
+                    await vm.initiateViaInputFiles(ev.target.files);
+                } finally {
+                    // This is the onChange handler for a file form control, but we're
+                    // not keeping any state, so reset the value of the form control
+                    // to empty.
+                    // NB. we need to set 'value': the 'files' property is immutable.
+                    ev.target.value = "";
+                }
+            })();
+        },
+        [vm],
+    );
+
+    useDispatcher(defaultDispatcher, (payload: ActionPayload) => {
+        if (payload.action !== Action.ComposerFileInsert) {
+            return;
+        }
+        const fileInsert = payload as ComposerInsertFilesPayload;
+        if (fileInsert.timelineRenderingType === timelineRenderingType) {
+            logger.info(
+                `Got ComposerFileInsert with ${fileInsert.files.length} files`,
+                timelineRenderingType,
+                threadRelation,
+            );
+            vm.initiateViaInputFiles(fileInsert.files);
+        }
+    });
+
+    // Note, while this logic could be largely replaced with https://developer.mozilla.org/en-US/docs/Web/API/Window/showOpenFilePicker
+    // it does not enjoy support across all our target platforms.
+    // Therefore, we use the invisible input element trick.
+
+    return (
+        <RoomUploadContext.Provider value={vm}>
+            <>
+                {children}
+                <input
+                    ref={uploadInput}
+                    type="file"
+                    data-testid="room-upload-context-input"
+                    style={{ display: "none" }}
+                    multiple
+                    onClick={chromeFileInputFix}
+                    onChange={onInputChange}
+                />
+            </>
+        </RoomUploadContext.Provider>
+    );
+}
diff --git a/apps/web/test/viewmodels/room/WidgetPip-test.ts b/apps/web/src/viewmodels/room/WidgetPipViewModel.test.ts
similarity index 72%
rename from apps/web/test/viewmodels/room/WidgetPip-test.ts
rename to apps/web/src/viewmodels/room/WidgetPipViewModel.test.ts
index 60823c076e..646ee476b5 100644
--- a/apps/web/test/viewmodels/room/WidgetPip-test.ts
+++ b/apps/web/src/viewmodels/room/WidgetPipViewModel.test.ts
@@ -5,18 +5,20 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { type MatrixClient, type Room, RoomEvent } from "matrix-js-sdk/src/matrix";
-import { type MockedObject } from "jest-mock";
-import { createRef } from "react";
+// @vitest-environment happy-dom
 
-import { mkRoom, stubClient } from "../../test-utils";
-import { WidgetPipViewModel } from "../../../src/viewmodels/room/WidgetPipViewModel";
-import WidgetStore, { type IApp } from "../../../src/stores/WidgetStore";
-import defaultDispatcher from "../../../src/dispatcher/dispatcher";
-import { Action } from "../../../src/dispatcher/actions";
-import { WidgetLayoutStore } from "../../../src/stores/widgets/WidgetLayoutStore";
-import { CallStore, CallStoreEvent } from "../../../src/stores/CallStore";
-import { type Call } from "../../../src/models/Call";
+import { type MatrixClient, type Room, RoomEvent } from "matrix-js-sdk/src/matrix";
+import { vi, describe, it, expect, beforeEach, afterEach, type MockedObject } from "vitest";
+import { createRef } from "react";
+import { mkRoom, stubClient } from "test-utils";
+
+import { WidgetPipViewModel } from "./WidgetPipViewModel";
+import WidgetStore, { type IApp } from "../../stores/WidgetStore";
+import defaultDispatcher from "../../dispatcher/dispatcher";
+import { Action } from "../../dispatcher/actions";
+import { WidgetLayoutStore } from "../../stores/widgets/WidgetLayoutStore";
+import { CallStore, CallStoreEvent } from "../../stores/CallStore";
+import { type Call } from "../../models/Call";
 
 const userId = "@example:example.org";
 const widgetId = "test-widget-id";
@@ -25,8 +27,8 @@ type BackClickEvent = Parameters<WidgetPipViewModel["onBackClick"]>[0];
 
 const createBackClickEvent = (): BackClickEvent =>
     ({
-        preventDefault: jest.fn(),
-        stopPropagation: jest.fn(),
+        preventDefault: vi.fn(),
+        stopPropagation: vi.fn(),
     }) as unknown as BackClickEvent;
 
 describe("WidgetPipViewModel", () => {
@@ -46,7 +48,7 @@ describe("WidgetPipViewModel", () => {
             name: "Test Widget",
             data: {},
         } as unknown as IApp;
-        jest.spyOn(WidgetStore.instance, "getApps").mockReturnValue([widget]);
+        vi.spyOn(WidgetStore.instance, "getApps").mockReturnValue([widget]);
 
         vm = new WidgetPipViewModel({
             room,
@@ -58,7 +60,7 @@ describe("WidgetPipViewModel", () => {
 
     afterEach(() => {
         vm.dispose();
-        jest.restoreAllMocks();
+        vi.restoreAllMocks();
     });
 
     it("updates room name", () => {
@@ -68,7 +70,7 @@ describe("WidgetPipViewModel", () => {
     });
 
     it("updates onBackClick if call changes", () => {
-        const dispatchSpy = jest.spyOn(defaultDispatcher, "dispatch").mockImplementation(() => {});
+        const dispatchSpy = vi.spyOn(defaultDispatcher, "dispatch").mockImplementation(() => {});
 
         vm.onBackClick(createBackClickEvent());
         expect(dispatchSpy).toHaveBeenCalledWith({
@@ -91,8 +93,8 @@ describe("WidgetPipViewModel", () => {
     });
 
     it("updates onBackClick if viewingRoom changes", () => {
-        const dispatchSpy = jest.spyOn(defaultDispatcher, "dispatch").mockImplementation(() => {});
-        const moveSpy = jest.spyOn(WidgetLayoutStore.instance, "moveToContainer").mockImplementation(() => {});
+        const dispatchSpy = vi.spyOn(defaultDispatcher, "dispatch").mockImplementation(() => {});
+        const moveSpy = vi.spyOn(WidgetLayoutStore.instance, "moveToContainer").mockImplementation(() => {});
 
         vm.setViewingRoom(true);
         vm.onBackClick(createBackClickEvent());
diff --git a/apps/web/src/viewmodels/room/WidgetPipViewModel.tsx b/apps/web/src/viewmodels/room/WidgetPipViewModel.tsx
index 80eb04b9b9..7a49484834 100644
--- a/apps/web/src/viewmodels/room/WidgetPipViewModel.tsx
+++ b/apps/web/src/viewmodels/room/WidgetPipViewModel.tsx
@@ -35,7 +35,7 @@ export interface Props {
     /**
      * A callback which is called when a mouse event (most likely mouse down) occurs at the start of moving the PiP around.
      */
-    onStartMoving: (ev: React.MouseEvent<Element, MouseEvent>) => void;
+    onStartMoving: (ev: React.MouseEvent) => void;
     /**
      * This callback ref will be used by the ViewModel once the view is moving.
      * Widgets might be implemented with a top-layer DOM tree path containing the widget iframe.
@@ -69,7 +69,7 @@ export class WidgetPipViewModel
         this.disposables.trackListener(CallStore.instance, CallStoreEvent.Call, this.onCallChange);
     }
 
-    public onStartMoving: (ev: React.MouseEvent<Element, MouseEvent>) => void;
+    public onStartMoving: (ev: React.MouseEvent) => void;
 
     /**
      * The view model needs to know if the room is currently being viewed.
@@ -79,7 +79,7 @@ export class WidgetPipViewModel
         this.viewingRoom = viewing;
     }
 
-    public onBackClick(ev: React.MouseEvent<Element, MouseEvent>): void {
+    public onBackClick(ev: React.MouseEvent): void {
         ev.preventDefault();
         ev.stopPropagation();
 
diff --git a/apps/web/src/viewmodels/room/notification-badge/NotificationBadgeViewModel.ts b/apps/web/src/viewmodels/room/notification-badge/NotificationBadgeViewModel.ts
new file mode 100644
index 0000000000..1ec79b86f3
--- /dev/null
+++ b/apps/web/src/viewmodels/room/notification-badge/NotificationBadgeViewModel.ts
@@ -0,0 +1,177 @@
+/*
+ * Copyright 2026 Element Creations 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 MouseEventHandler } from "react";
+import {
+    BaseViewModel,
+    type NotificationBadgeType,
+    type NotificationBadgeViewModel as NotificationBadgeViewModelInterface,
+    type NotificationBadgeViewSnapshot,
+} from "@element-hq/web-shared-components";
+
+import { NotificationLevel } from "../../../stores/notifications/NotificationLevel";
+import { type NotificationState } from "../../../stores/notifications/NotificationState";
+import { formatCount } from "../../../utils/FormattingUtils";
+
+export interface NotificationBadgeData {
+    symbol: string | null;
+    count: number;
+    level: NotificationLevel;
+    knocked?: boolean;
+}
+
+export interface NotificationBadgeViewModelProps extends NotificationBadgeData {
+    /**
+     * If true, hide badges that would render as a dot.
+     */
+    hideIfDot?: boolean;
+    /**
+     * If true, render a dot even when the badge has a count.
+     */
+    forceDot?: boolean;
+    /**
+     * Whether activity-level bold indicators are disabled by the user.
+     */
+    hideBold?: boolean;
+    /**
+     * Whether to show the unsent-message tooltip when the level is Unsent.
+     */
+    showUnsentTooltip?: boolean;
+    /**
+     * Accessible label for clickable badges.
+     */
+    ariaLabel?: string;
+    /**
+     * Tab index for clickable badges.
+     */
+    tabIndex?: number;
+    /**
+     * Called when an interactive badge is activated.
+     */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+
+function getBadgeType(
+    level: NotificationLevel,
+    symbol: string | null,
+    forceDot?: boolean,
+    knocked?: boolean,
+): NotificationBadgeType {
+    if (!knocked && (forceDot || level <= NotificationLevel.Activity)) {
+        return "dot";
+    }
+
+    return symbol && symbol.length >= 3 ? "badge_3char" : "badge_2char";
+}
+
+export function notificationBadgeDataFromNotification(notification: NotificationState): NotificationBadgeData {
+    return {
+        symbol: notification.symbol,
+        count: notification.count,
+        level: notification.level,
+        knocked: notification.knocked,
+    };
+}
+
+export class NotificationBadgeViewModel
+    extends BaseViewModel<NotificationBadgeViewSnapshot, NotificationBadgeViewModelProps>
+    implements NotificationBadgeViewModelInterface
+{
+    private static readonly computeSnapshot = (
+        props: NotificationBadgeViewModelProps,
+    ): NotificationBadgeViewSnapshot => {
+        const knocked = !!props.knocked;
+        const isIdle = props.level <= NotificationLevel.None;
+        const hiddenByBoldSetting = !!props.hideBold && props.level === NotificationLevel.Activity;
+        const hiddenByDotSetting = !!props.hideIfDot && props.level < NotificationLevel.Notification;
+        const hasUnreadCount = props.level >= NotificationLevel.Notification && (!!props.count || !!props.symbol);
+        const isEmptyBadge = props.symbol === null && props.count === 0;
+        const isRendered = !((isIdle || hiddenByBoldSetting) && !knocked) && !hiddenByDotSetting;
+        const isVisible = isEmptyBadge || knocked || hasUnreadCount;
+        const displaySymbol = props.symbol === null && props.count > 0 ? formatCount(props.count) : props.symbol;
+
+        return {
+            shouldRender: isRendered,
+            isVisible: isRendered && isVisible,
+            isNotification: props.level === NotificationLevel.Notification,
+            isHighlight: props.level >= NotificationLevel.Highlight,
+            isKnocked: knocked,
+            badgeType: getBadgeType(props.level, displaySymbol, props.forceDot, knocked),
+            symbol: displaySymbol,
+            isClickable: !!props.onClick,
+            ariaLabel: props.ariaLabel,
+            tabIndex: props.tabIndex,
+            showUnsentTooltip: !!props.showUnsentTooltip && props.level === NotificationLevel.Unsent,
+        };
+    };
+
+    public constructor(props: NotificationBadgeViewModelProps) {
+        super(props, NotificationBadgeViewModel.computeSnapshot(props));
+    }
+
+    private updateSnapshotFromProps(): void {
+        this.snapshot.merge(NotificationBadgeViewModel.computeSnapshot(this.props));
+    }
+
+    public setNotificationData(data: NotificationBadgeData): void {
+        this.props = {
+            ...this.props,
+            ...data,
+        };
+        this.updateSnapshotFromProps();
+    }
+
+    public setHideIfDot(hideIfDot: boolean): void {
+        this.props = {
+            ...this.props,
+            hideIfDot,
+        };
+        this.updateSnapshotFromProps();
+    }
+
+    public setForceDot(forceDot: boolean): void {
+        this.props = {
+            ...this.props,
+            forceDot,
+        };
+        this.updateSnapshotFromProps();
+    }
+
+    public setHideBold(hideBold: boolean): void {
+        this.props = {
+            ...this.props,
+            hideBold,
+        };
+        this.updateSnapshotFromProps();
+    }
+
+    public setShowUnsentTooltip(showUnsentTooltip: boolean): void {
+        this.props = {
+            ...this.props,
+            showUnsentTooltip,
+        };
+        this.updateSnapshotFromProps();
+    }
+
+    public setClickOptions({
+        onClick,
+        ariaLabel,
+        tabIndex,
+    }: Pick<NotificationBadgeViewModelProps, "onClick" | "ariaLabel" | "tabIndex">): void {
+        this.props = {
+            ...this.props,
+            onClick,
+            ariaLabel,
+            tabIndex,
+        };
+        this.updateSnapshotFromProps();
+    }
+
+    public onClick: MouseEventHandler<HTMLButtonElement> = (event) => {
+        this.props.onClick?.(event);
+    };
+}
diff --git a/apps/web/src/viewmodels/room/notification-badge/UnreadNotificationBadgeViewModel.ts b/apps/web/src/viewmodels/room/notification-badge/UnreadNotificationBadgeViewModel.ts
new file mode 100644
index 0000000000..2e6f8d6515
--- /dev/null
+++ b/apps/web/src/viewmodels/room/notification-badge/UnreadNotificationBadgeViewModel.ts
@@ -0,0 +1,186 @@
+/*
+ * Copyright 2026 Element Creations 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 NotificationCount, type Room, RoomEvent } from "matrix-js-sdk/src/matrix";
+import {
+    BaseViewModel,
+    type NotificationBadgeType,
+    type NotificationBadgeViewSnapshot,
+    type NotificationBadgeViewModel as NotificationBadgeViewModelInterface,
+} from "@element-hq/web-shared-components";
+
+import { determineUnreadState } from "../../../RoomNotifs";
+import { NotificationLevel } from "../../../stores/notifications/NotificationLevel";
+import SettingsStore from "../../../settings/SettingsStore";
+import { formatCount } from "../../../utils/FormattingUtils";
+
+const notificationChangeEvents = [
+    RoomEvent.Receipt,
+    RoomEvent.Timeline,
+    RoomEvent.Redaction,
+    RoomEvent.LocalEchoUpdated,
+    RoomEvent.MyMembership,
+];
+
+function getBadgeType(level: NotificationLevel, symbol: string | null, forceDot?: boolean): NotificationBadgeType {
+    if (forceDot || level <= NotificationLevel.Activity) {
+        return "dot";
+    }
+
+    return symbol && symbol.length >= 3 ? "badge_3char" : "badge_2char";
+}
+
+export interface UnreadNotificationBadgeViewModelProps {
+    /**
+     * Room whose unread state should be represented by the badge.
+     */
+    room?: Room;
+    /**
+     * Thread to read unread state from. Omit for room-level unread state.
+     */
+    threadId?: string;
+    /**
+     * Show a dot instead of a numeric/symbol badge whenever the badge would otherwise render.
+     */
+    forceDot?: boolean;
+}
+
+interface InternalProps extends UnreadNotificationBadgeViewModelProps {
+    hideBold: boolean;
+}
+
+export class UnreadNotificationBadgeViewModel
+    extends BaseViewModel<NotificationBadgeViewSnapshot, InternalProps>
+    implements NotificationBadgeViewModelInterface
+{
+    private listenerCleanups: Array<() => void> = [];
+
+    private static readonly computeSnapshot = (props: InternalProps): NotificationBadgeViewSnapshot => {
+        const { symbol, count, level } = determineUnreadState(props.room, props.threadId, false);
+        const displaySymbol = symbol ?? (count > 0 ? formatCount(count) : null);
+        const hasUnreadCount = level >= NotificationLevel.Notification && (count > 0 || symbol !== null);
+        const isSuppressedActivity = props.hideBold && level === NotificationLevel.Activity;
+
+        return {
+            shouldRender: level !== NotificationLevel.None && !isSuppressedActivity,
+            isVisible: symbol === null && count === 0 ? true : hasUnreadCount,
+            isNotification: level === NotificationLevel.Notification,
+            isHighlight: level >= NotificationLevel.Highlight,
+            isKnocked: false,
+            badgeType: getBadgeType(level, displaySymbol, props.forceDot),
+            symbol: displaySymbol,
+            isClickable: false,
+            showUnsentTooltip: false,
+        };
+    };
+
+    public constructor(props: UnreadNotificationBadgeViewModelProps) {
+        const internalProps: InternalProps = {
+            ...props,
+            hideBold: SettingsStore.getValue("feature_hidebold"),
+        };
+
+        super(internalProps, UnreadNotificationBadgeViewModel.computeSnapshot(internalProps));
+
+        this.setupListeners();
+
+        const hideBoldWatcherRef = SettingsStore.watchSetting("feature_hidebold", null, this.onHideBoldSettingChanged);
+        this.disposables.track(() => SettingsStore.unwatchSetting(hideBoldWatcherRef));
+    }
+
+    public dispose(): void {
+        this.teardownListeners();
+        super.dispose();
+    }
+
+    public setRoom(room?: Room): void {
+        if (this.props.room === room) return;
+
+        this.props = {
+            ...this.props,
+            room,
+        };
+        this.setupListeners();
+        this.updateSnapshotFromProps();
+    }
+
+    public setThreadId(threadId?: string): void {
+        if (this.props.threadId === threadId) return;
+
+        this.props = {
+            ...this.props,
+            threadId,
+        };
+        this.updateSnapshotFromProps();
+    }
+
+    public setForceDot(forceDot?: boolean): void {
+        if (this.props.forceDot === forceDot) return;
+
+        this.props = {
+            ...this.props,
+            forceDot,
+        };
+        this.updateSnapshotFromProps();
+    }
+
+    private setHideBold(hideBold: boolean): void {
+        if (this.props.hideBold === hideBold) return;
+
+        this.props = {
+            ...this.props,
+            hideBold,
+        };
+        this.updateSnapshotFromProps();
+    }
+
+    private updateSnapshotFromProps(): void {
+        this.snapshot.merge(UnreadNotificationBadgeViewModel.computeSnapshot(this.props));
+    }
+
+    private setupListeners(): void {
+        this.teardownListeners();
+
+        const { room } = this.props;
+        if (!room) return;
+
+        room.on(RoomEvent.UnreadNotifications, this.onRoomUnreadNotifications);
+        for (const eventName of notificationChangeEvents) {
+            room.on(eventName, this.onNotificationChanged);
+        }
+
+        this.listenerCleanups.push(() => {
+            room.off(RoomEvent.UnreadNotifications, this.onRoomUnreadNotifications);
+            for (const eventName of notificationChangeEvents) {
+                room.off(eventName, this.onNotificationChanged);
+            }
+        });
+    }
+
+    private teardownListeners(): void {
+        for (const cleanup of this.listenerCleanups) {
+            cleanup();
+        }
+        this.listenerCleanups = [];
+    }
+
+    private readonly onRoomUnreadNotifications = (
+        _unreadNotifications?: NotificationCount,
+        evtThreadId?: string,
+    ): void => {
+        if (this.props.threadId && this.props.threadId !== evtThreadId) return;
+        this.updateSnapshotFromProps();
+    };
+
+    private readonly onNotificationChanged = (): void => {
+        this.updateSnapshotFromProps();
+    };
+
+    private readonly onHideBoldSettingChanged = (): void => {
+        this.setHideBold(SettingsStore.getValue("feature_hidebold"));
+    };
+}
diff --git a/apps/web/src/viewmodels/room/right-panel/WidgetContextMenuViewModel.tsx b/apps/web/src/viewmodels/room/right-panel/WidgetContextMenuViewModel.tsx
index 43932592fb..389d26e7df 100644
--- a/apps/web/src/viewmodels/room/right-panel/WidgetContextMenuViewModel.tsx
+++ b/apps/web/src/viewmodels/room/right-panel/WidgetContextMenuViewModel.tsx
@@ -132,7 +132,7 @@ export class WidgetContextMenuViewModel
     };
 
     public get onFinished(): () => void {
-        return () => this.props.onFinished!();
+        return () => this.props.onFinished();
     }
 
     public get onRevokeClick(): () => void {
@@ -147,7 +147,7 @@ export class WidgetContextMenuViewModel
                 logger.error(err);
                 // We don't really need to do anything about this - the user will just hit the button again.
             });
-            this.props.onFinished!();
+            this.props.onFinished();
         };
     }
 
@@ -169,7 +169,7 @@ export class WidgetContextMenuViewModel
                 });
             }
 
-            this.props.onFinished!();
+            this.props.onFinished();
         };
     }
 
@@ -186,7 +186,7 @@ export class WidgetContextMenuViewModel
                 .catch((err) => {
                     logger.error("Failed to take screenshot: ", err);
                 });
-            this.props.onFinished!();
+            this.props.onFinished();
         };
     }
 
@@ -194,7 +194,7 @@ export class WidgetContextMenuViewModel
         return async () => {
             try {
                 if (this._roomId) {
-                    await startJitsiAudioLivestream(this._cli, this._widgetMessaging!.widgetApi!, this._roomId!);
+                    await startJitsiAudioLivestream(this._cli, this._widgetMessaging!.widgetApi!, this._roomId);
                 }
             } catch (err: any) {
                 logger.error("Failed to start livestream", err);
@@ -206,7 +206,7 @@ export class WidgetContextMenuViewModel
                     description: message,
                 });
             }
-            this.props.onFinished!();
+            this.props.onFinished();
         };
     }
 
@@ -217,7 +217,7 @@ export class WidgetContextMenuViewModel
             } else if (this._room) {
                 WidgetUtils.editWidget(this._room, this._app);
             }
-            this.props.onFinished!();
+            this.props.onFinished();
         };
     }
 
@@ -225,7 +225,7 @@ export class WidgetContextMenuViewModel
         return (direction: number) => {
             if (!this._room) throw new Error("room must be defined");
             WidgetLayoutStore.instance.moveWithinContainer(this._room, "top", this._app, direction);
-            this.props.onFinished!();
+            this.props.onFinished();
         };
     }
 }
diff --git a/apps/web/test/viewmodels/timeline/DateSeparatorViewModel-test.tsx b/apps/web/src/viewmodels/room/timeline/DateSeparatorViewModel.test.ts
similarity index 80%
rename from apps/web/test/viewmodels/timeline/DateSeparatorViewModel-test.tsx
rename to apps/web/src/viewmodels/room/timeline/DateSeparatorViewModel.test.ts
index b5875a5551..705ec59cec 100644
--- a/apps/web/test/viewmodels/timeline/DateSeparatorViewModel-test.tsx
+++ b/apps/web/src/viewmodels/room/timeline/DateSeparatorViewModel.test.ts
@@ -5,27 +5,28 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
+import { vi, describe, it, expect, beforeEach, afterEach } from "vitest";
 import React from "react";
-import { mocked } from "jest-mock";
 import { ConnectionError, Direction } from "matrix-js-sdk/src/matrix";
+import { flushPromisesWithFakeTimers } from "test-utils/utilities";
 
-import dispatcher from "../../../src/dispatcher/dispatcher";
-import { Action } from "../../../src/dispatcher/actions";
-import { formatFullDateNoTime } from "../../../src/DateUtils";
-import Modal from "../../../src/Modal";
-import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
-import SettingsStore from "../../../src/settings/SettingsStore";
-import { UIFeature } from "../../../src/settings/UIFeature";
-import { SdkContextClass } from "../../../src/contexts/SDKContext";
-import { DateSeparatorViewModel } from "../../../src/viewmodels/room/timeline/DateSeparatorViewModel";
-import { flushPromisesWithFakeTimers } from "../../test-utils";
+import dispatcher from "../../../dispatcher/dispatcher";
+import { Action } from "../../../dispatcher/actions";
+import { formatFullDateNoTime } from "../../../DateUtils";
+import Modal from "../../../Modal";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import SettingsStore from "../../../settings/SettingsStore";
+import { UIFeature } from "../../../settings/UIFeature";
+import { SDKContextClass } from "../../../contexts/SDKContextClass";
+import { DateSeparatorViewModel } from "./DateSeparatorViewModel";
 
-jest.mock("../../../src/settings/SettingsStore");
-jest.mock("../../../src/contexts/SDKContext", () => ({
-    SdkContextClass: {
+vi.mock("../../../Modal");
+vi.mock("../../../settings/SettingsStore");
+vi.mock("../../../contexts/SDKContextClass", () => ({
+    SDKContextClass: {
         instance: {
             roomViewStore: {
-                getRoomId: jest.fn(),
+                getRoomId: vi.fn(),
             },
         },
     },
@@ -56,7 +57,7 @@ describe("DateSeparatorViewModel", () => {
     ];
 
     const watchCallbacks = new Map<string, (...args: any[]) => void>();
-    const mockTimestampToEvent = jest.fn();
+    const mockTimestampToEvent = vi.fn();
 
     const hasTestId = (node: React.ReactNode, testId: string): boolean => {
         if (!React.isValidElement<{ children?: React.ReactNode }>(node)) return false;
@@ -70,39 +71,44 @@ describe("DateSeparatorViewModel", () => {
     const createViewModel = (
         props: Partial<typeof defaultProps> & { forExport?: boolean } = {},
     ): DateSeparatorViewModel => {
-        return new DateSeparatorViewModel({ ...defaultProps, ...props });
+        return new DateSeparatorViewModel({
+            ...defaultProps,
+            ...props,
+            roomViewStore: SDKContextClass.instance.roomViewStore,
+        });
     };
 
     beforeEach(() => {
-        jest.useFakeTimers();
-        jest.setSystemTime(nowDate.getTime());
+        vi.useFakeTimers();
+        vi.setSystemTime(nowDate.getTime());
         watchCallbacks.clear();
 
-        mocked(SettingsStore).getValue.mockImplementation((key): any => {
+        vi.mocked(SettingsStore).getValue.mockImplementation((key): any => {
             if (String(key) === UIFeature.TimelineEnableRelativeDates) return true;
             if (key === "feature_jump_to_date") return false;
             return undefined;
         });
-        mocked(SettingsStore).watchSetting.mockImplementation((settingName, _roomId, cb): any => {
+        vi.mocked(SettingsStore).watchSetting.mockImplementation((settingName, _roomId, cb): any => {
             watchCallbacks.set(String(settingName), cb);
             return `${String(settingName)}-watch-ref`;
         });
-        mocked(SettingsStore).unwatchSetting.mockImplementation(() => {});
+        vi.mocked(SettingsStore).unwatchSetting.mockImplementation(() => {});
 
         mockTimestampToEvent.mockReset();
-        jest.spyOn(MatrixClientPeg, "safeGet").mockReturnValue({
+        vi.spyOn(MatrixClientPeg, "safeGet").mockReturnValue({
             timestampToEvent: mockTimestampToEvent,
         } as any);
 
-        jest.spyOn(dispatcher, "dispatch").mockImplementation(() => {});
-        jest.spyOn(Modal, "createDialog").mockImplementation(() => ({ close: jest.fn() }) as any);
+        vi.spyOn(dispatcher, "dispatch").mockImplementation(() => {});
+        vi.spyOn(Modal, "createDialog").mockImplementation(() => ({ close: vi.fn() }) as any);
 
-        mocked(SdkContextClass.instance.roomViewStore.getRoomId).mockReturnValue(roomId);
+        vi.mocked(SDKContextClass.instance.roomViewStore.getRoomId).mockReturnValue(roomId);
     });
 
     afterEach(() => {
-        jest.restoreAllMocks();
-        jest.useRealTimers();
+        vi.restoreAllMocks();
+        vi.clearAllMocks();
+        vi.useRealTimers();
     });
 
     it("computes relative label for today", () => {
@@ -129,7 +135,7 @@ describe("DateSeparatorViewModel", () => {
     });
 
     it("exposes jumpToDateMenu when feature is enabled", () => {
-        mocked(SettingsStore).getValue.mockImplementation((key): any => {
+        vi.mocked(SettingsStore).getValue.mockImplementation((key): any => {
             if (String(key) === UIFeature.TimelineEnableRelativeDates) return true;
             if (key === "feature_jump_to_date") return true;
             return undefined;
@@ -146,7 +152,7 @@ describe("DateSeparatorViewModel", () => {
     });
 
     it("does not expose jumpToDateMenu when exporting", () => {
-        mocked(SettingsStore).getValue.mockImplementation((key): any => {
+        vi.mocked(SettingsStore).getValue.mockImplementation((key): any => {
             if (String(key) === UIFeature.TimelineEnableRelativeDates) return true;
             if (key === "feature_jump_to_date") return true;
             return undefined;
@@ -193,7 +199,7 @@ describe("DateSeparatorViewModel", () => {
             event_id: "$event",
             origin_server_ts: nowDate.getTime(),
         });
-        mocked(SdkContextClass.instance.roomViewStore.getRoomId).mockReturnValue("!other:example.org");
+        vi.mocked(SDKContextClass.instance.roomViewStore.getRoomId).mockReturnValue("!other:example.org");
         const vm = createViewModel();
 
         await vm.pickDate(nowDate.getTime() - HOUR_MS);
@@ -208,7 +214,7 @@ describe("DateSeparatorViewModel", () => {
         await vm.pickDate(nowDate.getTime() - HOUR_MS);
 
         expect(Modal.createDialog).toHaveBeenCalled();
-        const [, params] = mocked(Modal.createDialog).mock.calls.at(-1)!;
+        const [, params] = vi.mocked(Modal.createDialog).mock.calls.at(-1)!;
         expect(hasTestId((params as any).description, "jump-to-date-error-submit-debug-logs-button")).toBe(true);
     });
 
@@ -219,7 +225,7 @@ describe("DateSeparatorViewModel", () => {
         await vm.pickDate(nowDate.getTime() - HOUR_MS);
 
         expect(Modal.createDialog).toHaveBeenCalled();
-        const [, params] = mocked(Modal.createDialog).mock.calls.at(-1)!;
+        const [, params] = vi.mocked(Modal.createDialog).mock.calls.at(-1)!;
         expect(hasTestId((params as any).description, "jump-to-date-error-submit-debug-logs-button")).toBe(false);
     });
 
@@ -238,7 +244,7 @@ describe("DateSeparatorViewModel", () => {
 
         describe("when TimelineEnableRelativeDates is false", () => {
             beforeEach(() => {
-                mocked(SettingsStore).getValue.mockImplementation((key): any => {
+                vi.mocked(SettingsStore).getValue.mockImplementation((key): any => {
                     if (String(key) === UIFeature.TimelineEnableRelativeDates) return false;
                     if (key === "feature_jump_to_date") return false;
                     return undefined;
@@ -253,7 +259,7 @@ describe("DateSeparatorViewModel", () => {
 
     describe("jump actions", () => {
         beforeEach(() => {
-            mocked(SettingsStore).getValue.mockImplementation((key): any => {
+            vi.mocked(SettingsStore).getValue.mockImplementation((key): any => {
                 if (String(key) === UIFeature.TimelineEnableRelativeDates) return true;
                 if (key === "feature_jump_to_date") return true;
                 return undefined;
@@ -299,7 +305,7 @@ describe("DateSeparatorViewModel", () => {
         });
 
         it("does not jump when room changed before request resolves", async () => {
-            mocked(SdkContextClass.instance.roomViewStore.getRoomId).mockReturnValue("!some-other-room");
+            vi.mocked(SDKContextClass.instance.roomViewStore.getRoomId).mockReturnValue("!some-other-room");
             mockTimestampToEvent.mockResolvedValue({
                 event_id: "$abc",
                 origin_server_ts: 0,
@@ -313,7 +319,7 @@ describe("DateSeparatorViewModel", () => {
         });
 
         it("does not show jump to date error if user switched room", async () => {
-            mocked(SdkContextClass.instance.roomViewStore.getRoomId).mockReturnValue("!some-other-room");
+            vi.mocked(SDKContextClass.instance.roomViewStore.getRoomId).mockReturnValue("!some-other-room");
             mockTimestampToEvent.mockRejectedValue(new Error("Fake error in test"));
             const vm = createViewModel();
 
@@ -331,7 +337,7 @@ describe("DateSeparatorViewModel", () => {
             await flushPromisesWithFakeTimers();
 
             expect(Modal.createDialog).toHaveBeenCalled();
-            const [, params] = mocked(Modal.createDialog).mock.calls.at(-1)!;
+            const [, params] = vi.mocked(Modal.createDialog).mock.calls.at(-1)!;
             expect(hasTestId((params as any).description, "jump-to-date-error-submit-debug-logs-button")).toBe(true);
         });
 
@@ -343,7 +349,7 @@ describe("DateSeparatorViewModel", () => {
             await flushPromisesWithFakeTimers();
 
             expect(Modal.createDialog).toHaveBeenCalled();
-            const [, params] = mocked(Modal.createDialog).mock.calls.at(-1)!;
+            const [, params] = vi.mocked(Modal.createDialog).mock.calls.at(-1)!;
             expect(hasTestId((params as any).description, "jump-to-date-error-submit-debug-logs-button")).toBe(false);
         });
     });
diff --git a/apps/web/src/viewmodels/room/timeline/DateSeparatorViewModel.tsx b/apps/web/src/viewmodels/room/timeline/DateSeparatorViewModel.tsx
index 131c365530..7e7517c40f 100644
--- a/apps/web/src/viewmodels/room/timeline/DateSeparatorViewModel.tsx
+++ b/apps/web/src/viewmodels/room/timeline/DateSeparatorViewModel.tsx
@@ -20,14 +20,15 @@ import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import dispatcher from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
 import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
-import { _t, getUserLanguage } from "../../../languageHandler";
+import { _t } from "../../../languageHandler";
+import { getUserLanguage } from "../../../i18n/settings";
 import Modal from "../../../Modal";
 import SettingsStore from "../../../settings/SettingsStore";
 import { UIFeature } from "../../../settings/UIFeature";
 import ErrorDialog from "../../../components/views/dialogs/ErrorDialog";
 import BugReportDialog from "../../../components/views/dialogs/BugReportDialog";
 import AccessibleButton from "../../../components/views/elements/AccessibleButton";
-import { SdkContextClass } from "../../../contexts/SDKContext";
+import { type RoomViewStore } from "../../../stores/RoomViewStore.tsx";
 
 export interface DateSeparatorViewModelProps {
     /**
@@ -42,6 +43,10 @@ export interface DateSeparatorViewModelProps {
      * Export mode disables relative date labels and jump-to-date menu UI.
      */
     forExport?: boolean;
+    /**
+     * The room view store instance to use
+     */
+    roomViewStore: RoomViewStore;
 }
 
 /**
@@ -158,7 +163,7 @@ export class DateSeparatorViewModel
             // Only try to navigate to the room if the user is still viewing the same
             // room. We don't want to jump someone back to a room after a slow request
             // if they've already navigated away to another room.
-            const currentRoomId = SdkContextClass.instance.roomViewStore.getRoomId();
+            const currentRoomId = this.props.roomViewStore.getRoomId();
             if (currentRoomId === roomIdForJumpRequest) {
                 dispatcher.dispatch<ViewRoomPayload>({
                     action: Action.ViewRoom,
@@ -184,7 +189,7 @@ export class DateSeparatorViewModel
             // don't want to worry someone about an error in a room they no longer care
             // about after a slow request if they've already navigated away to another
             // room.
-            const currentRoomId = SdkContextClass.instance.roomViewStore.getRoomId();
+            const currentRoomId = this.props.roomViewStore.getRoomId();
             if (currentRoomId === roomIdForJumpRequest) {
                 let friendlyErrorMessage = "An error occured while trying to find and jump to the given date.";
                 let submitDebugLogsContent: React.ReactElement = <></>;
diff --git a/apps/web/test/viewmodels/profile/DisambiguatedProfileViewModel-test.tsx b/apps/web/src/viewmodels/room/timeline/event-tile/DisambiguatedProfileViewModel.test.ts
similarity index 92%
rename from apps/web/test/viewmodels/profile/DisambiguatedProfileViewModel-test.tsx
rename to apps/web/src/viewmodels/room/timeline/event-tile/DisambiguatedProfileViewModel.test.ts
index 5b8c2070e7..c5027a4e04 100644
--- a/apps/web/test/viewmodels/profile/DisambiguatedProfileViewModel-test.tsx
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/DisambiguatedProfileViewModel.test.ts
@@ -5,7 +5,9 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { DisambiguatedProfileViewModel } from "../../../src/viewmodels/room/timeline/event-tile/DisambiguatedProfileViewModel";
+import { vi, describe, it, expect } from "vitest";
+
+import { DisambiguatedProfileViewModel } from "./DisambiguatedProfileViewModel";
 
 describe("DisambiguatedProfileViewModel", () => {
     const member = {
@@ -53,14 +55,14 @@ describe("DisambiguatedProfileViewModel", () => {
     });
 
     it("should delegate onClick without emitting a snapshot update", () => {
-        const onClick = jest.fn();
+        const onClick = vi.fn();
         const vm = new DisambiguatedProfileViewModel({
             member,
             fallbackName: "Fallback",
             onClick,
         });
         const prevSnapshot = vm.getSnapshot();
-        const subscriber = jest.fn();
+        const subscriber = vi.fn();
 
         vm.subscribe(subscriber);
         vm.onClick?.({} as never);
@@ -71,7 +73,7 @@ describe("DisambiguatedProfileViewModel", () => {
     });
 
     it("should keep onClick bound when extracted as a callback", () => {
-        const onClick = jest.fn();
+        const onClick = vi.fn();
         const vm = new DisambiguatedProfileViewModel({
             member,
             fallbackName: "Fallback",
@@ -89,7 +91,7 @@ describe("DisambiguatedProfileViewModel", () => {
             member: null,
             fallbackName: "Fallback",
         });
-        const subscriber = jest.fn();
+        const subscriber = vi.fn();
 
         vm.subscribe(subscriber);
         vm.setMember("Updated");
@@ -103,7 +105,7 @@ describe("DisambiguatedProfileViewModel", () => {
             member: null,
             fallbackName: "Fallback",
         });
-        const subscriber = jest.fn();
+        const subscriber = vi.fn();
 
         vm.subscribe(subscriber);
         vm.setMember("Fallback");
@@ -136,7 +138,7 @@ describe("DisambiguatedProfileViewModel", () => {
             member: null,
             fallbackName: "Fallback",
         });
-        const subscriber = jest.fn();
+        const subscriber = vi.fn();
 
         vm.subscribe(subscriber);
         vm.setMember("Fallback", member);
@@ -150,7 +152,7 @@ describe("DisambiguatedProfileViewModel", () => {
             member,
             fallbackName: "Fallback",
         });
-        const subscriber = jest.fn();
+        const subscriber = vi.fn();
 
         vm.subscribe(subscriber);
         vm.setMember("Fallback", member);
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/DisambiguatedProfileViewModel.ts b/apps/web/src/viewmodels/room/timeline/event-tile/DisambiguatedProfileViewModel.ts
index 858c8110c7..5448d2a909 100644
--- a/apps/web/src/viewmodels/room/timeline/event-tile/DisambiguatedProfileViewModel.ts
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/DisambiguatedProfileViewModel.ts
@@ -9,18 +9,18 @@ import {
     type DisambiguatedProfileViewActions,
     type DisambiguatedProfileViewSnapshot,
     type DisambiguatedProfileViewModel as DisambiguatedProfileViewModelInterface,
+    type UserStatus,
 } from "@element-hq/web-shared-components";
 import { type MouseEvent } from "react";
 
 import { _t } from "../../../../languageHandler";
 import { getUserNameColorClass } from "../../../../utils/FormattingUtils";
 import UserIdentifier from "../../../../customisations/UserIdentifier";
-import type { UserStatus } from "../../../../hooks/useUserStatus";
 
 /**
  * Information about a member for disambiguation purposes.
  */
-interface MemberInfo {
+export interface MemberInfo {
     /**
      * The user's Matrix ID.
      */
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/E2eMessageSharedIconViewModel.ts b/apps/web/src/viewmodels/room/timeline/event-tile/E2eMessageSharedIconViewModel.ts
new file mode 100644
index 0000000000..70e5464c0d
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/E2eMessageSharedIconViewModel.ts
@@ -0,0 +1,100 @@
+/*
+Copyright 2026 Element Creations 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 { EventTimeline, RoomStateEvent, type MatrixClient, type RoomState } from "matrix-js-sdk/src/matrix";
+import {
+    BaseViewModel,
+    type E2eMessageSharedIconViewModel as E2eMessageSharedIconViewModelInterface,
+    type E2eMessageSharedIconViewSnapshot,
+} from "@element-hq/web-shared-components";
+
+export interface E2eMessageSharedIconViewModelProps {
+    /** Matrix client used to look up room membership state. */
+    client: MatrixClient;
+    /** The ID of the room containing the event whose keys were shared. */
+    roomId: string;
+    /** The ID of the user who shared the keys. */
+    keyForwardingUserId: string;
+}
+
+export class E2eMessageSharedIconViewModel
+    extends BaseViewModel<E2eMessageSharedIconViewSnapshot, E2eMessageSharedIconViewModelProps>
+    implements E2eMessageSharedIconViewModelInterface
+{
+    private roomStateListenerCleanup?: () => void;
+
+    public constructor(props: E2eMessageSharedIconViewModelProps) {
+        super(props, E2eMessageSharedIconViewModel.computeSnapshot(props));
+        this.setupRoomStateListener();
+        this.disposables.track(() => this.teardownRoomStateListener());
+    }
+
+    public setClient(client: MatrixClient): void {
+        if (this.props.client === client) return;
+
+        this.props = { ...this.props, client };
+        this.setupRoomStateListener();
+        this.updateSnapshotFromProps();
+    }
+
+    public setRoomId(roomId: string): void {
+        if (this.props.roomId === roomId) return;
+
+        this.props = { ...this.props, roomId };
+        this.setupRoomStateListener();
+        this.updateSnapshotFromProps();
+    }
+
+    public setKeyForwardingUserId(keyForwardingUserId: string): void {
+        if (this.props.keyForwardingUserId === keyForwardingUserId) return;
+
+        this.props = { ...this.props, keyForwardingUserId };
+        this.updateSnapshotFromProps();
+    }
+
+    private updateSnapshotFromProps = (): void => {
+        this.snapshot.merge(E2eMessageSharedIconViewModel.computeSnapshot(this.props));
+    };
+
+    private setupRoomStateListener(): void {
+        this.teardownRoomStateListener();
+
+        const roomState = this.getForwardRoomState();
+        if (!roomState) return;
+
+        // The room can change while the VM lives, so this listener needs per-room cleanup before final VM disposal.
+        roomState.on(RoomStateEvent.Events, this.updateSnapshotFromProps);
+        this.roomStateListenerCleanup = (): void => {
+            roomState.off(RoomStateEvent.Events, this.updateSnapshotFromProps);
+        };
+    }
+
+    private teardownRoomStateListener(): void {
+        this.roomStateListenerCleanup?.();
+        this.roomStateListenerCleanup = undefined;
+    }
+
+    private getForwardRoomState(): RoomState | undefined {
+        return this.props.client.getRoom(this.props.roomId)?.getLiveTimeline()?.getState(EventTimeline.FORWARDS);
+    }
+
+    private static computeSnapshot(props: E2eMessageSharedIconViewModelProps): E2eMessageSharedIconViewSnapshot {
+        const displayName = E2eMessageSharedIconViewModel.getDisplayName(props);
+
+        return {
+            displayName,
+            userId: props.keyForwardingUserId,
+        };
+    }
+
+    private static getDisplayName(props: E2eMessageSharedIconViewModelProps): string {
+        const roomState = props.client.getRoom(props.roomId)?.getLiveTimeline()?.getState(EventTimeline.FORWARDS);
+        const forwardingMember = roomState?.getMember(props.keyForwardingUserId);
+
+        return forwardingMember?.rawDisplayName ?? props.keyForwardingUserId;
+    }
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/EventPreviewUtils.tsx b/apps/web/src/viewmodels/room/timeline/event-tile/EventPreviewUtils.tsx
new file mode 100644
index 0000000000..9ea8bff6e7
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/EventPreviewUtils.tsx
@@ -0,0 +1,111 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type ReactNode } from "react";
+import { M_POLL_START, type MatrixEvent, MatrixEventEvent, MsgType } from "matrix-js-sdk/src/matrix";
+import { Disposables } from "@element-hq/web-shared-components";
+
+import { _t } from "../../../../languageHandler";
+import { MessagePreviewStore } from "../../../../stores/message-preview";
+
+export interface EventPreviewContent {
+    previewContent: ReactNode;
+    previewTooltip?: string;
+}
+
+export class EventPreviewContentCache {
+    private key?: string;
+    private content?: ReactNode;
+
+    public get(preview: string, prefix: string | null): ReactNode {
+        const key = `${prefix ?? ""}\u0000${preview}`;
+        if (this.key === key && this.content !== undefined) {
+            return this.content;
+        }
+
+        this.key = key;
+        this.content = prefix
+            ? _t(
+                  "event_preview|preview",
+                  {
+                      prefix,
+                      preview,
+                  },
+                  {
+                      bold: (sub) => <strong>{sub}</strong>,
+                  },
+              )
+            : preview;
+
+        return this.content;
+    }
+}
+
+export class MatrixEventContentChangeListener {
+    private mxEvent?: MatrixEvent;
+    private callback?: () => void;
+    private disposables?: Disposables;
+
+    public setEvent(mxEvent: MatrixEvent | undefined, callback: () => void): void {
+        if (this.mxEvent === mxEvent && this.callback === callback) return;
+
+        this.teardown();
+        this.mxEvent = mxEvent;
+        this.callback = callback;
+
+        if (!mxEvent) return;
+
+        this.disposables = new Disposables();
+        this.disposables.trackListener(mxEvent, MatrixEventEvent.Replaced, callback);
+        this.disposables.trackListener(mxEvent, MatrixEventEvent.Decrypted, callback);
+    }
+
+    public teardown(): void {
+        this.disposables?.dispose();
+        this.disposables = undefined;
+        this.mxEvent = undefined;
+        this.callback = undefined;
+    }
+}
+
+export function getEventPreviewContent(
+    mxEvent: MatrixEvent,
+    cache: EventPreviewContentCache,
+): EventPreviewContent | null {
+    const preview = MessagePreviewStore.instance.generatePreviewForEvent(mxEvent);
+    if (!preview) {
+        return null;
+    }
+
+    const prefix = getEventPreviewPrefix(mxEvent.getType(), mxEvent.getContent().msgtype as MsgType | undefined);
+
+    return {
+        previewContent: cache.get(preview, prefix),
+        previewTooltip: prefix ? undefined : preview,
+    };
+}
+
+function getEventPreviewPrefix(type: string, msgType?: MsgType): string | null {
+    switch (type) {
+        case M_POLL_START.name:
+            return _t("event_preview|prefix|poll");
+        default:
+    }
+
+    switch (msgType) {
+        case MsgType.Audio:
+            return _t("event_preview|prefix|audio");
+        case MsgType.Image:
+            return _t("event_preview|prefix|image");
+        case MsgType.Video:
+            return _t("event_preview|prefix|video");
+        case MsgType.File:
+            return _t("event_preview|prefix|file");
+        default:
+            return null;
+    }
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/EventPreviewViewModel.ts b/apps/web/src/viewmodels/room/timeline/event-tile/EventPreviewViewModel.ts
new file mode 100644
index 0000000000..f8456f9d36
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/EventPreviewViewModel.ts
@@ -0,0 +1,160 @@
+/*
+ * Copyright 2026 Element Creations 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 MatrixClient, type MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { logger } from "matrix-js-sdk/src/logger";
+import {
+    BaseViewModel,
+    type EventPreviewViewModel as EventPreviewViewModelInterface,
+    type EventPreviewViewSnapshot,
+} from "@element-hq/web-shared-components";
+
+import {
+    EventPreviewContentCache,
+    getEventPreviewContent,
+    MatrixEventContentChangeListener,
+} from "./EventPreviewUtils";
+
+export interface EventPreviewViewModelProps {
+    /**
+     * Matrix client used to decrypt event content before preview generation.
+     */
+    cli: MatrixClient;
+    /**
+     * The event to display the preview for.
+     */
+    mxEvent?: MatrixEvent;
+}
+
+export class EventPreviewViewModel
+    extends BaseViewModel<EventPreviewViewSnapshot, EventPreviewViewModelProps>
+    implements EventPreviewViewModelInterface
+{
+    private readonly eventContentListener = new MatrixEventContentChangeListener();
+    private readonly previewContentCache = new EventPreviewContentCache();
+    private previewRequestId = 0;
+    private updatePreviewInFlight = false;
+    private updatePreviewQueued = false;
+
+    private static readonly hiddenSnapshot: EventPreviewViewSnapshot = {
+        isVisible: false,
+    };
+
+    public constructor(props: EventPreviewViewModelProps) {
+        super(props, EventPreviewViewModel.hiddenSnapshot);
+
+        this.disposables.track(() => this.eventContentListener.teardown());
+        this.eventContentListener.setEvent(props.mxEvent, this.onEventContentChanged);
+        this.updatePreviewSafely();
+    }
+
+    public setEvent(mxEvent?: MatrixEvent): void {
+        if (this.props.mxEvent === mxEvent) return;
+
+        this.props = {
+            ...this.props,
+            mxEvent,
+        };
+        this.eventContentListener.setEvent(mxEvent, this.onEventContentChanged);
+        this.updatePreviewSafely();
+    }
+
+    public setClient(cli: MatrixClient): void {
+        if (this.props.cli === cli) return;
+
+        this.props = {
+            ...this.props,
+            cli,
+        };
+        this.updatePreviewSafely();
+    }
+
+    private onEventContentChanged = (): void => {
+        this.updatePreviewSafely();
+    };
+
+    private updatePreviewSafely(): void {
+        if (this.updatePreviewInFlight) {
+            this.updatePreviewQueued = true;
+            return;
+        }
+
+        void this.drainPreviewUpdates();
+    }
+
+    private async drainPreviewUpdates(): Promise<void> {
+        this.updatePreviewInFlight = true;
+
+        try {
+            do {
+                this.updatePreviewQueued = false;
+                try {
+                    await this.updatePreview();
+                } catch (error) {
+                    logger.error("Failed to update event preview", error);
+                }
+            } while (this.updatePreviewQueued && !this.isDisposed);
+        } finally {
+            this.updatePreviewInFlight = false;
+        }
+    }
+
+    private async updatePreview(): Promise<void> {
+        const { cli, mxEvent } = this.props;
+        const requestId = ++this.previewRequestId;
+
+        if (!mxEvent || mxEvent.isRedacted() || mxEvent.isDecryptionFailure()) {
+            this.setHidden();
+            return;
+        }
+
+        try {
+            await cli.decryptEventIfNeeded(mxEvent);
+        } catch (error) {
+            logger.error("Failed to decrypt event preview", error);
+            if (this.isCurrentPreviewRequest(requestId, cli, mxEvent)) {
+                this.setHidden();
+            }
+            return;
+        }
+
+        if (!this.isCurrentPreviewRequest(requestId, cli, mxEvent)) return;
+
+        if (mxEvent.isRedacted() || mxEvent.isDecryptionFailure()) {
+            this.setHidden();
+            return;
+        }
+
+        const previewContent = getEventPreviewContent(mxEvent, this.previewContentCache);
+        if (!previewContent) {
+            this.setHidden();
+            return;
+        }
+
+        this.snapshot.merge({
+            isVisible: true,
+            ...previewContent,
+        });
+    }
+
+    private isCurrentPreviewRequest(requestId: number, cli: MatrixClient, mxEvent: MatrixEvent): boolean {
+        return (
+            !this.isDisposed &&
+            requestId === this.previewRequestId &&
+            this.props.cli === cli &&
+            this.props.mxEvent === mxEvent
+        );
+    }
+
+    private setHidden(): void {
+        this.snapshot.merge({
+            isVisible: false,
+            previewContent: undefined,
+            previewTooltip: undefined,
+        });
+    }
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/EventTileDerivedState.ts b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileDerivedState.ts
new file mode 100644
index 0000000000..3291f438ac
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileDerivedState.ts
@@ -0,0 +1,496 @@
+/*
+Copyright 2026 Element Creations 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 { ElementCallEventType } from "../../../../call-types";
+import { TimelineRenderingType } from "../../../../contexts/RoomContext";
+import { Layout } from "../../../../settings/enums/Layout";
+
+/**
+ * Pure EventTile derivations extracted ahead of EventTileViewModel.
+ * Keep this module free of React lifecycle, DOM access, dispatch, and MatrixClientPeg lookups.
+ */
+
+/** Inputs for the stable scroll token derivation. */
+export interface ScrollTokenInput {
+    /** The event identifier, when available. */
+    eventId?: string;
+    /** Whether the event is a local echo. */
+    isLocalEcho: boolean;
+}
+
+/** The stable scroll token for a non-local-echo event. */
+export function getScrollToken({ eventId, isLocalEcho }: ScrollTokenInput): string | undefined {
+    return isLocalEcho ? undefined : eventId;
+}
+
+/** Whether EventTile should render as a continuation in the current layout/rendering mode. */
+export function getIsContinuation(
+    continuation: boolean | undefined,
+    timelineRenderingType: TimelineRenderingType,
+    layout: Layout | undefined,
+): boolean | undefined {
+    if (
+        timelineRenderingType !== TimelineRenderingType.Room &&
+        timelineRenderingType !== TimelineRenderingType.Search &&
+        timelineRenderingType !== TimelineRenderingType.Thread &&
+        layout !== Layout.Bubble
+    ) {
+        return false;
+    }
+
+    return continuation;
+}
+
+/** Inputs for EventTile line CSS class derivation. */
+export interface EventTileLineClassState {
+    /** Whether the event body is likely to render media content. */
+    isProbablyMedia: boolean;
+    /** The Matrix event type for event-type class derivation. */
+    eventType: string;
+    /** The Matrix message type for message-type class derivation. */
+    msgtype?: string;
+}
+
+/** The EventTile line CSS class flags for the current derived state. */
+export function getEventTileLineClassState({
+    isProbablyMedia,
+    eventType,
+    msgtype,
+}: EventTileLineClassState): Record<string, boolean> {
+    const roomMessageEventType = "m.room.message";
+    const stickerEventType = "m.sticker";
+    const imageMsgtype = "m.image";
+    const emoteMsgtype = "m.emote";
+
+    return {
+        mx_EventTile_mediaLine: isProbablyMedia,
+        mx_EventTile_image: eventType === roomMessageEventType && msgtype === imageMsgtype,
+        mx_EventTile_sticker: eventType === stickerEventType,
+        mx_EventTile_emote: eventType === roomMessageEventType && msgtype === emoteMsgtype,
+    };
+}
+
+/** Inputs for EventTile avatar and sender profile derivation. */
+export interface EventTileSenderProfileStateInput {
+    /** Whether the tile is rendering as a notification. */
+    isRenderingNotification: boolean;
+    /** Whether the event renders as an informational timeline item. */
+    isInfoMessage: boolean;
+    /** The current timeline rendering mode. */
+    timelineRenderingType: TimelineRenderingType;
+    /** Whether the tile is a continuation of the previous event. */
+    continuation?: boolean;
+    /** The Matrix event type for event-type sender profile derivation. */
+    eventType: string;
+    /** Whether the tile should use bubble container styling. */
+    isBubbleMessage: boolean;
+    /** The current timeline layout. */
+    layout?: Layout;
+    /** Whether the event is a room create event. */
+    isRoomCreate: boolean;
+    /** Whether the event is a call invite. */
+    isCallInvite: boolean;
+    /** Whether the event is an RTC notification. */
+    isRtcNotification: boolean;
+}
+
+/** EventTile avatar and sender profile display state. */
+export interface EventTileSenderProfileState {
+    /** The avatar size to render, or null when no avatar should render. */
+    avatarSize: string | null;
+    /** Whether sender profile details should render. */
+    needsSenderProfile: boolean;
+}
+
+/** The EventTile avatar and sender profile state for the current derived state. */
+export function getEventTileSenderProfileState({
+    isRenderingNotification,
+    isInfoMessage,
+    timelineRenderingType,
+    continuation,
+    eventType,
+    isBubbleMessage,
+    layout,
+    isRoomCreate,
+    isCallInvite,
+    isRtcNotification,
+}: EventTileSenderProfileStateInput): EventTileSenderProfileState {
+    if (isRenderingNotification) {
+        return { avatarSize: "24px", needsSenderProfile: true };
+    }
+
+    if (isInfoMessage) {
+        return { avatarSize: "14px", needsSenderProfile: false };
+    }
+
+    if (
+        timelineRenderingType === TimelineRenderingType.ThreadsList ||
+        (timelineRenderingType === TimelineRenderingType.Thread && !continuation)
+    ) {
+        return { avatarSize: "32px", needsSenderProfile: true };
+    }
+
+    if (isRoomCreate || isBubbleMessage) {
+        return { avatarSize: null, needsSenderProfile: false };
+    }
+
+    if (layout === Layout.IRC) {
+        return { avatarSize: "14px", needsSenderProfile: true };
+    }
+
+    if (
+        (continuation && timelineRenderingType !== TimelineRenderingType.File) ||
+        isCallInvite ||
+        ElementCallEventType.matches(eventType) ||
+        isRtcNotification
+    ) {
+        return { avatarSize: null, needsSenderProfile: false };
+    }
+
+    if (timelineRenderingType === TimelineRenderingType.File) {
+        return { avatarSize: "20px", needsSenderProfile: true };
+    }
+
+    return { avatarSize: "30px", needsSenderProfile: true };
+}
+
+/** Whether clicking the avatar should open the user profile. */
+export function getShouldViewUserOnClick(
+    inhibitInteraction: boolean | undefined,
+    timelineRenderingType: TimelineRenderingType,
+): boolean {
+    return (
+        !inhibitInteraction &&
+        ![TimelineRenderingType.ThreadsList, TimelineRenderingType.Notification].includes(timelineRenderingType)
+    );
+}
+
+/** SenderProfile rendering mode for EventTile. */
+export type SenderProfileMode = "hidden" | "clickable" | "tooltip" | "default";
+
+/** Inputs for EventTile sender profile mode derivation. */
+export interface SenderProfileModeInput {
+    /** Whether sender profile details should render. */
+    needsSenderProfile: boolean;
+    /** Whether sender details should be hidden. */
+    hideSender?: boolean;
+    /** The current timeline rendering mode. */
+    timelineRenderingType: TimelineRenderingType;
+}
+
+/** The SenderProfile rendering mode for the current EventTile state. */
+export function getSenderProfileMode({
+    needsSenderProfile,
+    hideSender,
+    timelineRenderingType,
+}: SenderProfileModeInput): SenderProfileMode {
+    if (!needsSenderProfile || hideSender === true) {
+        return "hidden";
+    }
+
+    if (
+        timelineRenderingType === TimelineRenderingType.Room ||
+        timelineRenderingType === TimelineRenderingType.Search ||
+        timelineRenderingType === TimelineRenderingType.Pinned ||
+        timelineRenderingType === TimelineRenderingType.Thread
+    ) {
+        return "clickable";
+    }
+
+    if (timelineRenderingType === TimelineRenderingType.ThreadsList) {
+        return "tooltip";
+    }
+
+    return "default";
+}
+
+/** Inputs for EventTile message action bar visibility derivation. */
+export interface ShouldShowMessageActionBarInput {
+    /** Whether the event is currently being edited. */
+    isEditing: boolean;
+    /** Whether the tile is rendering for export. */
+    forExport?: boolean;
+    /** Whether the tile is currently hovered. */
+    hover: boolean;
+    /** Whether focus should force the action bar visible. */
+    showActionBarFromFocus: boolean;
+    /** Whether the action bar currently has focus. */
+    actionBarFocused: boolean;
+    /** Whether an EventTile context menu is currently open. */
+    hasContextMenu: boolean;
+}
+
+/** Whether EventTile should render the message action bar. */
+export function getShouldShowMessageActionBar({
+    isEditing,
+    forExport,
+    hover,
+    showActionBarFromFocus,
+    actionBarFocused,
+    hasContextMenu,
+}: ShouldShowMessageActionBarInput): boolean {
+    return !isEditing && !forExport && (hover || showActionBarFromFocus || (actionBarFocused && !hasContextMenu));
+}
+
+/** Inputs for EventTile timestamp visibility derivation. */
+export interface ShouldShowTimestampInput {
+    /** The event origin timestamp. */
+    eventTs: number;
+    /** Whether the event is an RTC notification. */
+    isRtcNotification: boolean;
+    /** Whether timestamp rendering is disabled. */
+    hideTimestamp?: boolean;
+    /** Whether timestamps should always show. */
+    alwaysShowTimestamps?: boolean;
+    /** Whether the tile is the last event in the timeline. */
+    last?: boolean;
+    /** Whether the tile is currently hovered. */
+    hover: boolean;
+    /** Whether focus is currently inside the tile. */
+    focusWithin: boolean;
+    /** Whether the action bar currently has focus. */
+    actionBarFocused: boolean;
+    /** Whether an EventTile context menu is currently open. */
+    hasContextMenu: boolean;
+}
+
+/** Whether EventTile should render the message timestamp. */
+export function getShouldShowTimestamp({
+    eventTs,
+    isRtcNotification,
+    hideTimestamp,
+    alwaysShowTimestamps,
+    last,
+    hover,
+    focusWithin,
+    actionBarFocused,
+    hasContextMenu,
+}: ShouldShowTimestampInput): boolean {
+    return (
+        !!eventTs &&
+        !isRtcNotification &&
+        !hideTimestamp &&
+        (alwaysShowTimestamps || last || hover || focusWithin || actionBarFocused || hasContextMenu)
+    );
+}
+
+/** Inputs for EventTile timestamp value derivation. */
+export interface EventTileTimestampInput {
+    /** The current timeline rendering mode. */
+    timelineRenderingType: TimelineRenderingType;
+    /** The event origin timestamp. */
+    eventTs: number;
+    /** The latest thread reply timestamp, when available. */
+    threadReplyEventTs?: number;
+}
+
+/** The timestamp EventTile should display for the current rendering mode. */
+export function getEventTileTimestamp({
+    timelineRenderingType,
+    eventTs,
+    threadReplyEventTs,
+}: EventTileTimestampInput): number {
+    if (timelineRenderingType === TimelineRenderingType.ThreadsList && typeof threadReplyEventTs === "number") {
+        return threadReplyEventTs;
+    }
+
+    return eventTs;
+}
+
+/** Inputs for EventTile timestamp display state derivation. */
+export interface TimestampDisplayStateInput {
+    /** The current timeline layout. */
+    layout?: Layout;
+    /** Whether the timestamp should render. */
+    showTimestamp: boolean;
+    /** The timestamp EventTile may display. */
+    timestamp: number;
+    /** Whether timestamp rendering is disabled. */
+    hideTimestamp?: boolean;
+}
+
+/** EventTile timestamp display state. */
+export interface TimestampDisplayState {
+    /** Whether the current layout is IRC. */
+    useIRCLayout: boolean;
+    /** Whether EventTile should render the real timestamp element. */
+    showRealTimestamp: boolean;
+    /** Whether EventTile should render the linked timestamp element. */
+    showLinkedTimestamp: boolean;
+}
+
+/** The EventTile timestamp display state for the current derived state. */
+export function getTimestampDisplayState({
+    layout,
+    showTimestamp,
+    timestamp,
+    hideTimestamp,
+}: TimestampDisplayStateInput): TimestampDisplayState {
+    const showRealTimestamp = showTimestamp && !!timestamp;
+
+    return {
+        useIRCLayout: layout === Layout.IRC,
+        showRealTimestamp,
+        showLinkedTimestamp: showRealTimestamp && !hideTimestamp,
+    };
+}
+
+/** Inputs for ReplyChain timestamp visibility derivation. */
+export interface ReplyChainTimestampInput {
+    /** Whether timestamps should always show. */
+    alwaysShowTimestamps?: boolean;
+    /** Whether the tile is currently hovered. */
+    hover: boolean;
+    /** Whether focus is currently inside the tile. */
+    focusWithin: boolean;
+}
+
+/** Whether ReplyChain should always show timestamps. */
+export function getReplyChainAlwaysShowTimestamps({
+    alwaysShowTimestamps,
+    hover,
+    focusWithin,
+}: ReplyChainTimestampInput): boolean {
+    return !!alwaysShowTimestamps || hover || focusWithin;
+}
+
+/** Inputs for EventTile footer display state derivation. */
+export interface FooterDisplayStateInput {
+    /** Whether a reactions row element will render. */
+    hasReactionsRow: boolean;
+    /** Whether reactions data is available. */
+    hasReactions: boolean;
+    /** Whether a pinned message badge element will render. */
+    hasPinnedMessageBadge: boolean;
+    /** The current timeline layout. */
+    layout?: Layout;
+    /** Whether the event was sent by the current user. */
+    isOwnEvent: boolean;
+}
+
+/** EventTile footer display state. */
+export interface FooterDisplayState {
+    /** Whether EventTile should render a footer. */
+    hasFooter: boolean;
+    /** Whether the main footer position should render the pinned message badge. */
+    showMainPinnedMessageBadge: boolean;
+    /** Whether the bubble footer position should render the pinned message badge. */
+    showBubblePinnedMessageBadge: boolean;
+}
+
+/** The EventTile footer display state for the current derived state. */
+export function getFooterDisplayState({
+    hasReactionsRow,
+    hasReactions,
+    hasPinnedMessageBadge,
+    layout,
+    isOwnEvent,
+}: FooterDisplayStateInput): FooterDisplayState {
+    return {
+        hasFooter: (hasReactionsRow && hasReactions) || hasPinnedMessageBadge,
+        showMainPinnedMessageBadge: hasPinnedMessageBadge && (layout === Layout.Group || !isOwnEvent),
+        showBubblePinnedMessageBadge: hasPinnedMessageBadge && layout === Layout.Bubble && isOwnEvent,
+    };
+}
+
+/** Inputs for EventTile root CSS class derivation. */
+export interface EventTileClassState {
+    /** Whether the tile should use bubble container styling. */
+    isBubbleMessage: boolean;
+    /** Whether the bubble tile is left-aligned. */
+    isLeftAlignedBubbleMessage: boolean;
+    /** Whether the event is aligned between the bubbles */
+    isAlignedBetweenBubbles: boolean;
+    /** Whether the event is currently being edited. */
+    isEditing: boolean;
+    /** Whether the event renders as an informational timeline item. */
+    isInfoMessage: boolean;
+    /** Whether timestamps use twelve-hour formatting. */
+    isTwelveHour?: boolean;
+    /** Whether the event is in a pending send state. */
+    isSending: boolean;
+    /** Whether the event should be highlighted. */
+    isHighlighted: boolean;
+    /** Whether the tile is selected or has an open context menu. */
+    isSelected: boolean;
+    /** Whether the tile is a continuation of the previous event. */
+    isContinuation?: boolean;
+    /** The Matrix event type for event-type class derivation. */
+    eventType: string;
+    /** Whether the event is a call invite. */
+    isCallInvite: boolean;
+    /** Whether the tile is the last event in the timeline. */
+    isLast?: boolean;
+    /** Whether the tile is the last event in its section. */
+    isLastInSection?: boolean;
+    /** Whether the tile is being rendered in contextual mode. */
+    isContextual?: boolean;
+    /** Whether the action bar currently has focus. */
+    isActionBarFocused: boolean;
+    /** Whether the event failed decryption. */
+    isEncryptionFailure: boolean;
+    /** The Matrix message type for message-type class derivation. */
+    msgtype?: string;
+    /** Whether sender details should be hidden. */
+    hideSender?: boolean;
+    /** The current timeline rendering mode. */
+    timelineRenderingType: TimelineRenderingType;
+    /** Whether the tile is rendering as a notification. */
+    isRenderingNotification: boolean;
+    /** Whether bubble styling should be suppressed for this event. */
+    noBubbleEvent: boolean;
+}
+
+/** The EventTile root CSS class flags for the current derived state. */
+export function getEventTileClassState({
+    isBubbleMessage,
+    isLeftAlignedBubbleMessage,
+    isAlignedBetweenBubbles,
+    isEditing,
+    isInfoMessage,
+    isTwelveHour,
+    isSending,
+    isHighlighted,
+    isSelected,
+    isContinuation,
+    eventType,
+    isCallInvite,
+    isLast,
+    isLastInSection,
+    isContextual,
+    isActionBarFocused,
+    isEncryptionFailure,
+    msgtype,
+    hideSender,
+    timelineRenderingType,
+    isRenderingNotification,
+    noBubbleEvent,
+}: EventTileClassState): Record<string, boolean | undefined> {
+    return {
+        mx_EventTile_bubbleContainer: isBubbleMessage,
+        mx_EventTile_leftAlignedBubble: isLeftAlignedBubbleMessage,
+        mx_EventTile_alignedBetweenBubbles: isAlignedBetweenBubbles,
+        mx_EventTile: true,
+        mx_EventTile_isEditing: isEditing,
+        mx_EventTile_info: isInfoMessage,
+        mx_EventTile_12hr: isTwelveHour,
+        // Note: we keep the `sending` state class for tests, not for our styles
+        mx_EventTile_sending: !isEditing && isSending,
+        mx_EventTile_highlight: isHighlighted,
+        mx_EventTile_selected: isSelected,
+        mx_EventTile_continuation: isContinuation || isCallInvite || ElementCallEventType.matches(eventType),
+        mx_EventTile_last: isLast,
+        mx_EventTile_lastInSection: isLastInSection,
+        mx_EventTile_contextual: isContextual,
+        mx_EventTile_actionBarFocused: isActionBarFocused,
+        mx_EventTile_bad: isEncryptionFailure,
+        mx_EventTile_emote: msgtype === "m.emote",
+        mx_EventTile_noSender: hideSender,
+        mx_EventTile_clamp: timelineRenderingType === TimelineRenderingType.ThreadsList || isRenderingNotification,
+        mx_EventTile_noBubble: noBubbleEvent,
+    };
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/EventTileE2eState.ts b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileE2eState.ts
new file mode 100644
index 0000000000..735754d8a2
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileE2eState.ts
@@ -0,0 +1,211 @@
+/*
+Copyright 2026 Element Creations 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 { EventStatus, type MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { DecryptionFailureCode, EventShieldColour, EventShieldReason } from "matrix-js-sdk/src/crypto-api";
+import { E2ePadlockIcon } from "@element-hq/web-shared-components";
+
+import { _t } from "../../../../languageHandler";
+
+/** Display state for the EventTile E2E padlock area. */
+export type EventTileE2ePadlockState =
+    | {
+          /** No E2E padlock should render. */
+          kind: "none";
+      }
+    | {
+          /** Render the undecryptable padlock. */
+          kind: "decryptionFailure";
+      }
+    | {
+          /** Render the forwarded/shared message indicator. */
+          kind: "messageShared";
+          /** User ID that forwarded the message key. */
+          keyForwardingUserId: string;
+          /** Room ID used by the shared-message indicator. */
+          roomId: string;
+      }
+    | {
+          /** Render a trust shield padlock. */
+          kind: "shield";
+          /** Shield colour used to choose the rendered icon. */
+          shieldColour: EventShieldColour;
+          /** Shield reason used to choose the visible tooltip. */
+          shieldReason: EventShieldReason | null;
+      }
+    | {
+          /** Render the unencrypted warning in an encrypted room. */
+          kind: "unencrypted";
+      };
+
+/** Renderable display state for the EventTile E2E padlock area. */
+export type EventTileE2ePadlockViewState =
+    | {
+          /** No E2E padlock should render. */
+          kind: "none";
+      }
+    | {
+          /** Render the shared-message indicator. */
+          kind: "messageShared";
+          /** User ID that forwarded the message key. */
+          keyForwardingUserId: string;
+          /** Room ID used by the shared-message indicator. */
+          roomId: string;
+      }
+    | {
+          /** Render a standard E2E padlock icon. */
+          kind: "icon";
+          /** Icon variant to render. */
+          icon: E2ePadlockIcon;
+          /** Tooltip shown for the icon. */
+          title: string;
+      };
+
+/** Inputs for deriving EventTile E2E padlock display state. */
+export interface EventTileE2ePadlockStateInput {
+    /** Matrix event rendered by the tile. */
+    mxEvent: MatrixEvent;
+    /** Event used for verification decisions, usually the replacing event for edits. */
+    verificationEvent: MatrixEvent;
+    /** Current event shield colour. */
+    shieldColour: EventShieldColour;
+    /** Current event shield reason. */
+    shieldReason: EventShieldReason | null;
+    /** Whether the room is encrypted. */
+    isRoomEncrypted?: boolean | null;
+    /** Whether the event belongs to a local room. */
+    isLocalRoom: boolean;
+}
+
+/** Derives the E2E padlock display state for EventTile. */
+export function getEventTileE2ePadlockState({
+    mxEvent,
+    verificationEvent,
+    shieldColour,
+    shieldReason,
+    isRoomEncrypted,
+    isLocalRoom,
+}: EventTileE2ePadlockStateInput): EventTileE2ePadlockState {
+    if (isLocalRoom) {
+        return { kind: "none" };
+    }
+
+    if (verificationEvent.isDecryptionFailure()) {
+        switch (verificationEvent.decryptionFailureReason) {
+            case DecryptionFailureCode.SENDER_IDENTITY_PREVIOUSLY_VERIFIED:
+            case DecryptionFailureCode.UNSIGNED_SENDER_DEVICE:
+                return { kind: "none" };
+            default:
+                return { kind: "decryptionFailure" };
+        }
+    }
+
+    if (shieldReason === EventShieldReason.AUTHENTICITY_NOT_GUARANTEED) {
+        const keyForwardingUserId = mxEvent.getKeyForwardingUser();
+        if (keyForwardingUserId) {
+            return {
+                kind: "messageShared",
+                keyForwardingUserId,
+                roomId: verificationEvent.getRoomId()!,
+            };
+        }
+    }
+
+    if (shieldColour !== EventShieldColour.NONE) {
+        return {
+            kind: "shield",
+            shieldColour,
+            shieldReason,
+        };
+    }
+
+    if (isRoomEncrypted) {
+        if (
+            verificationEvent.status === EventStatus.ENCRYPTING ||
+            verificationEvent.status === EventStatus.NOT_SENT ||
+            verificationEvent.isState() ||
+            verificationEvent.isRedacted()
+        ) {
+            return { kind: "none" };
+        }
+
+        if (!verificationEvent.isEncrypted()) {
+            return { kind: "unencrypted" };
+        }
+    }
+
+    return { kind: "none" };
+}
+
+function getEventTileShieldReasonMessage(shieldReason: EventShieldReason | null): string {
+    switch (shieldReason) {
+        case EventShieldReason.UNVERIFIED_IDENTITY:
+            return _t("encryption|event_shield_reason_unverified_identity");
+
+        case EventShieldReason.UNSIGNED_DEVICE:
+            return _t("encryption|event_shield_reason_unsigned_device");
+
+        case EventShieldReason.UNKNOWN_DEVICE:
+            return _t("encryption|event_shield_reason_unknown_device");
+
+        case EventShieldReason.AUTHENTICITY_NOT_GUARANTEED:
+            return _t("encryption|event_shield_reason_authenticity_not_guaranteed");
+
+        case EventShieldReason.MISMATCHED_SENDER_KEY:
+            return _t("encryption|event_shield_reason_mismatched_sender_key");
+
+        case EventShieldReason.SENT_IN_CLEAR:
+            return _t("common|unencrypted");
+
+        case EventShieldReason.VERIFICATION_VIOLATION:
+            return _t("timeline|decryption_failure|sender_identity_previously_verified");
+
+        case EventShieldReason.MISMATCHED_SENDER:
+            return _t("encryption|event_shield_reason_mismatched_sender");
+
+        default:
+            return _t("error|unknown");
+    }
+}
+
+/** Derives renderable E2E padlock display state for EventTile. */
+export function getEventTileE2ePadlockViewState(input: EventTileE2ePadlockStateInput): EventTileE2ePadlockViewState {
+    const state = getEventTileE2ePadlockState(input);
+
+    switch (state.kind) {
+        case "none":
+            return { kind: "none" };
+
+        case "decryptionFailure":
+            return {
+                kind: "icon",
+                icon: E2ePadlockIcon.DecryptionFailure,
+                title: _t("timeline|undecryptable_tooltip"),
+            };
+
+        case "messageShared":
+            return {
+                kind: "messageShared",
+                keyForwardingUserId: state.keyForwardingUserId,
+                roomId: state.roomId,
+            };
+
+        case "unencrypted":
+            return {
+                kind: "icon",
+                icon: E2ePadlockIcon.Warning,
+                title: _t("common|unencrypted"),
+            };
+
+        case "shield":
+            return {
+                kind: "icon",
+                icon: state.shieldColour === EventShieldColour.GREY ? E2ePadlockIcon.Normal : E2ePadlockIcon.Warning,
+                title: getEventTileShieldReasonMessage(state.shieldReason),
+            };
+    }
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/EventTileE2eViewModel.ts b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileE2eViewModel.ts
new file mode 100644
index 0000000000..d4167f8ddc
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileE2eViewModel.ts
@@ -0,0 +1,212 @@
+/*
+Copyright 2026 Element Creations 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 MatrixClient, MatrixEventEvent, type MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { logger } from "matrix-js-sdk/src/logger";
+import { CryptoEvent, EventShieldColour, type EventShieldReason } from "matrix-js-sdk/src/crypto-api";
+import { BaseViewModel } from "@element-hq/web-shared-components";
+
+import { isLocalRoom } from "../../../../utils/localRoom/isLocalRoom";
+import { objectHasDiff } from "../../../../utils/objects";
+import { getEventTileE2ePadlockViewState, type EventTileE2ePadlockViewState } from "./EventTileE2eState";
+
+export interface EventTileE2eViewModelProps {
+    /** Matrix client used for crypto verification lookups. */
+    cli: MatrixClient;
+    /** Matrix event rendered by the tile. */
+    mxEvent: MatrixEvent;
+    /** Whether the room is encrypted. */
+    isRoomEncrypted?: boolean | null;
+    /** Current event send status. Used to re-check verification as local echoes progress. */
+    eventSendStatus?: MatrixEvent["status"] | null;
+    /** Whether the view model should register live event and trust listeners. */
+    enableListeners: boolean;
+    /** Optional local-room predicate for tests. */
+    isLocalRoom?: (roomId: string) => boolean;
+}
+
+interface EventTileE2eShieldState {
+    shieldColour: EventShieldColour;
+    shieldReason: EventShieldReason | null;
+}
+
+/** View model for EventTile E2E padlock state and verification refreshes. */
+export class EventTileE2eViewModel extends BaseViewModel<EventTileE2ePadlockViewState, EventTileE2eViewModelProps> {
+    private shieldState: EventTileE2eShieldState = {
+        shieldColour: EventShieldColour.NONE,
+        shieldReason: null,
+    };
+    private listenerCleanups: Array<() => void> = [];
+    private started = false;
+    private verificationRequestId = 0;
+
+    public constructor(props: EventTileE2eViewModelProps) {
+        super(
+            props,
+            EventTileE2eViewModel.calculateSnapshot(props, {
+                shieldColour: EventShieldColour.NONE,
+                shieldReason: null,
+            }),
+        );
+    }
+
+    private static calculateSnapshot(
+        props: EventTileE2eViewModelProps,
+        shieldState: EventTileE2eShieldState,
+    ): EventTileE2ePadlockViewState {
+        const verificationEvent = props.mxEvent.replacingEvent() ?? props.mxEvent;
+        const roomId = verificationEvent.getRoomId()!;
+
+        return getEventTileE2ePadlockViewState({
+            mxEvent: props.mxEvent,
+            verificationEvent,
+            shieldColour: shieldState.shieldColour,
+            shieldReason: shieldState.shieldReason,
+            isRoomEncrypted: props.isRoomEncrypted,
+            isLocalRoom: props.isLocalRoom?.(roomId) ?? isLocalRoom(roomId),
+        });
+    }
+
+    /** Starts live listeners and runs the initial verification check. */
+    public start(): void {
+        if (this.started) return;
+
+        this.started = true;
+        this.setupListeners();
+        this.verifyEvent();
+    }
+
+    /** Updates inputs, refreshes listeners when the event changes, and re-checks verification when needed. */
+    public setProps(newProps: Partial<EventTileE2eViewModelProps>): void {
+        const prevProps = this.props;
+        const prevEvent = this.props.mxEvent;
+
+        this.props = {
+            ...this.props,
+            ...newProps,
+        };
+
+        const eventChanged = prevEvent !== this.props.mxEvent;
+        const shouldVerify =
+            eventChanged ||
+            prevProps.eventSendStatus !== this.props.eventSendStatus ||
+            prevProps.enableListeners !== this.props.enableListeners;
+
+        if (eventChanged) {
+            this.shieldState = {
+                shieldColour: EventShieldColour.NONE,
+                shieldReason: null,
+            };
+            this.refreshSnapshot();
+            this.setupListeners();
+        } else if (prevProps.enableListeners !== this.props.enableListeners) {
+            this.setupListeners();
+        } else if (prevProps.isRoomEncrypted !== this.props.isRoomEncrypted) {
+            this.refreshSnapshot();
+        }
+
+        if (shouldVerify) {
+            this.verifyEvent();
+        }
+    }
+
+    public override dispose(): void {
+        this.teardownListeners();
+        super.dispose();
+    }
+
+    private setupListeners(): void {
+        this.teardownListeners();
+
+        if (!this.started || !this.props.enableListeners) {
+            return;
+        }
+
+        const { cli, mxEvent } = this.props;
+
+        cli.on(CryptoEvent.UserTrustStatusChanged, this.onUserVerificationChanged);
+        this.listenerCleanups.push(() => {
+            cli.removeListener(CryptoEvent.UserTrustStatusChanged, this.onUserVerificationChanged);
+        });
+
+        mxEvent.on(MatrixEventEvent.Decrypted, this.onDecrypted);
+        this.listenerCleanups.push(() => {
+            mxEvent.removeListener(MatrixEventEvent.Decrypted, this.onDecrypted);
+        });
+
+        mxEvent.on(MatrixEventEvent.Replaced, this.onReplaced);
+        this.listenerCleanups.push(() => {
+            mxEvent.removeListener(MatrixEventEvent.Replaced, this.onReplaced);
+        });
+    }
+
+    private teardownListeners(): void {
+        for (const cleanup of this.listenerCleanups) {
+            cleanup();
+        }
+        this.listenerCleanups = [];
+    }
+
+    private readonly onDecrypted = (): void => {
+        this.verifyEvent();
+    };
+
+    private readonly onReplaced = (): void => {
+        this.verifyEvent();
+    };
+
+    private readonly onUserVerificationChanged = (userId: string): void => {
+        if (userId === this.props.mxEvent.getSender()) {
+            this.verifyEvent();
+        }
+    };
+
+    private verifyEvent(): void {
+        const requestId = ++this.verificationRequestId;
+
+        this.doVerifyEvent(requestId).catch((e) => {
+            const event = this.props.mxEvent;
+            logger.error(`Error getting encryption info on event ${event.getId()} in room ${event.getRoomId()}`, e);
+        });
+    }
+
+    private async doVerifyEvent(requestId: number): Promise<void> {
+        const verificationEvent = this.props.mxEvent.replacingEvent() ?? this.props.mxEvent;
+
+        if (!verificationEvent.isEncrypted() || verificationEvent.isRedacted()) {
+            this.setShieldState(EventShieldColour.NONE, null);
+            return;
+        }
+
+        const encryptionInfo = (await this.props.cli.getCrypto()?.getEncryptionInfoForEvent(verificationEvent)) ?? null;
+        if (this.isDisposed || requestId !== this.verificationRequestId) return;
+
+        if (encryptionInfo === null) {
+            // likely a decryption error
+            this.setShieldState(EventShieldColour.NONE, null);
+            return;
+        }
+
+        this.setShieldState(encryptionInfo.shieldColour, encryptionInfo.shieldReason);
+    }
+
+    private setShieldState(shieldColour: EventShieldColour, shieldReason: EventShieldReason | null): void {
+        this.shieldState = {
+            shieldColour,
+            shieldReason,
+        };
+        this.refreshSnapshot();
+    }
+
+    private refreshSnapshot(): void {
+        const nextSnapshot = EventTileE2eViewModel.calculateSnapshot(this.props, this.shieldState);
+
+        if (objectHasDiff(this.snapshot.current, nextSnapshot)) {
+            this.snapshot.set(nextSnapshot);
+        }
+    }
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/EventTileHighlightState.ts b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileHighlightState.ts
new file mode 100644
index 0000000000..8a4b9657d8
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileHighlightState.ts
@@ -0,0 +1,58 @@
+/*
+Copyright 2026 Element Creations 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 { EventType, type MatrixClient, type MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import { TimelineRenderingType } from "../../../../contexts/RoomContext";
+
+/** Inputs for deriving EventTile highlight display state. */
+export interface EventTileHighlightStateInput {
+    /** Matrix client used to resolve push actions and the current user. */
+    cli: MatrixClient;
+    /** Matrix event rendered by the tile. */
+    mxEvent: MatrixEvent;
+    /** Current timeline rendering mode. */
+    timelineRenderingType: TimelineRenderingType;
+    /** Whether the tile is rendering for export. */
+    forExport?: boolean;
+    /** Whether the event is considered redacted by the tile. */
+    isRedacted?: boolean;
+}
+
+/**
+ * Determine whether an event should be highlighted.
+ * For edited events, if a previous version of the event was highlighted, the event should remain highlighted as the
+ * user may have been notified.
+ */
+export function shouldHighlightEventTile({
+    cli,
+    mxEvent,
+    timelineRenderingType,
+    forExport,
+    isRedacted,
+}: EventTileHighlightStateInput): boolean {
+    if (forExport) return false;
+    if (timelineRenderingType === TimelineRenderingType.Notification) return false;
+    if (timelineRenderingType === TimelineRenderingType.ThreadsList) return false;
+    if (isRedacted) return false;
+
+    // This event is a room mention but we don't want the call tile to have a highlight.
+    if (mxEvent.getType() === EventType.RTCNotification) return false;
+
+    const actions = cli.getPushActionsForEvent(mxEvent.replacingEvent() || mxEvent);
+    const previousActions = mxEvent.replacingEvent() ? cli.getPushActionsForEvent(mxEvent) : undefined;
+    if (!actions?.tweaks && !previousActions?.tweaks) {
+        return false;
+    }
+
+    // Don't show self-highlights from another of our clients.
+    if (mxEvent.getSender() === cli.credentials.userId) {
+        return false;
+    }
+
+    return !!(actions?.tweaks.highlight || previousActions?.tweaks.highlight);
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/EventTileInteractionState.ts b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileInteractionState.ts
new file mode 100644
index 0000000000..7cb3f576a1
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileInteractionState.ts
@@ -0,0 +1,114 @@
+/*
+Copyright 2026 Element Creations 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.
+*/
+
+/** Context menu state owned by EventTile interaction handling. */
+export interface EventTileContextMenuState {
+    /** Menu anchor position. */
+    position: Pick<DOMRect, "top" | "left" | "bottom">;
+    /** Optional link target captured from the context-menu target. */
+    link?: string;
+}
+
+/** Interaction state owned by EventTile. */
+export interface EventTileInteractionState {
+    /** Whether the action bar is focused. */
+    actionBarFocused: boolean;
+    /** Whether focus should force the action bar visible. */
+    showActionBarFromFocus: boolean;
+    /** Whether the tile is currently hovered. */
+    hover: boolean;
+    /** Whether focus is currently inside the tile. */
+    focusWithin: boolean;
+    /** Context menu state, when the EventTile context menu is open. */
+    contextMenu?: EventTileContextMenuState;
+}
+
+/** Initial EventTile interaction state. */
+export const initialEventTileInteractionState: EventTileInteractionState = {
+    actionBarFocused: false,
+    showActionBarFromFocus: false,
+    hover: false,
+    focusWithin: false,
+};
+
+/** Updates interaction state when the tile is hovered. */
+export function eventTileMouseEnter(state: EventTileInteractionState): EventTileInteractionState {
+    return {
+        ...state,
+        hover: true,
+    };
+}
+
+/** Updates interaction state when the tile is no longer hovered. */
+export function eventTileMouseLeave(state: EventTileInteractionState): EventTileInteractionState {
+    return {
+        ...state,
+        hover: false,
+    };
+}
+
+/** Updates interaction state when focus enters the tile. */
+export function eventTileFocusWithin(
+    state: EventTileInteractionState,
+    showActionBarFromFocus: boolean,
+): EventTileInteractionState {
+    return {
+        ...state,
+        focusWithin: true,
+        showActionBarFromFocus,
+    };
+}
+
+/** Updates interaction state when focus leaves the tile. */
+export function eventTileBlurWithin(state: EventTileInteractionState): EventTileInteractionState {
+    return {
+        ...state,
+        focusWithin: false,
+        showActionBarFromFocus: false,
+    };
+}
+
+/** Updates interaction state when the action bar focus changes. */
+export function eventTileActionBarFocusChange(
+    state: EventTileInteractionState,
+    actionBarFocused: boolean,
+    tileHovered: boolean,
+): EventTileInteractionState {
+    return {
+        ...state,
+        actionBarFocused,
+        hover: actionBarFocused ? state.hover : tileHovered,
+    };
+}
+
+/** Updates interaction state when stale hover is detected. */
+export function eventTileClearHover(state: EventTileInteractionState): EventTileInteractionState {
+    return eventTileMouseLeave(state);
+}
+
+/** Updates interaction state when the EventTile context menu opens. */
+export function eventTileOpenContextMenu(
+    state: EventTileInteractionState,
+    contextMenu: EventTileContextMenuState,
+): EventTileInteractionState {
+    return {
+        ...state,
+        contextMenu,
+        actionBarFocused: true,
+        hover: false,
+    };
+}
+
+/** Updates interaction state when the EventTile context menu closes. */
+export function eventTileCloseContextMenu(state: EventTileInteractionState): EventTileInteractionState {
+    return {
+        ...state,
+        contextMenu: undefined,
+        actionBarFocused: false,
+        hover: false,
+    };
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/EventTileMjolnirBodyState.test.ts b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileMjolnirBodyState.test.ts
new file mode 100644
index 0000000000..30543ed13a
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileMjolnirBodyState.test.ts
@@ -0,0 +1,53 @@
+/*
+Copyright 2026 Element Creations 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.
+*/
+
+// @vitest-environment happy-dom
+
+import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { allowMjolnirBody, getMjolnirBodyStorageKey, isMjolnirBodyAllowed } from "./EventTileMjolnirBodyState";
+
+describe("EventTileMjolnirBodyState", () => {
+    afterEach(() => {
+        localStorage.clear();
+        vi.restoreAllMocks();
+    });
+
+    it("derives the application storage key from an event", () => {
+        const event = new MatrixEvent({
+            room_id: "!room:example.org",
+            event_id: "$event:example.org",
+        });
+
+        expect(getMjolnirBodyStorageKey(event)).toBe("mx_mjolnir_render_!room:example.org__$event:example.org");
+    });
+
+    it("reads whether an event has been allowed", () => {
+        const event = new MatrixEvent({
+            room_id: "!room:example.org",
+            event_id: "$event:example.org",
+        });
+
+        expect(isMjolnirBodyAllowed(event)).toBe(false);
+        allowMjolnirBody(event);
+        expect(isMjolnirBodyAllowed(event)).toBe(true);
+    });
+
+    it("stores the allow decision and notifies the owning tile", () => {
+        const event = new MatrixEvent({
+            room_id: "!room:example.org",
+            event_id: "$event:example.org",
+        });
+        const onMessageAllowed = vi.fn();
+
+        allowMjolnirBody(event, onMessageAllowed);
+
+        expect(localStorage.getItem("mx_mjolnir_render_!room:example.org__$event:example.org")).toBe("true");
+        expect(onMessageAllowed).toHaveBeenCalledTimes(1);
+    });
+});
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/EventTileMjolnirBodyState.ts b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileMjolnirBodyState.ts
new file mode 100644
index 0000000000..e75e4a3a1e
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileMjolnirBodyState.ts
@@ -0,0 +1,24 @@
+/*
+Copyright 2026 Element Creations 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 MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+/** Gets the application storage key used to remember that an event may be shown. */
+export function getMjolnirBodyStorageKey(mxEvent: MatrixEvent): string {
+    return `mx_mjolnir_render_${mxEvent.getRoomId()}__${mxEvent.getId()}`;
+}
+
+/** Gets whether a Mjolnir-hidden event has been allowed to render. */
+export function isMjolnirBodyAllowed(mxEvent: MatrixEvent): boolean {
+    return localStorage.getItem(getMjolnirBodyStorageKey(mxEvent)) === "true";
+}
+
+/** Allows a Mjolnir-hidden event to be shown and notifies the owning tile. */
+export function allowMjolnirBody(mxEvent: MatrixEvent, onMessageAllowed?: () => void): void {
+    localStorage.setItem(getMjolnirBodyStorageKey(mxEvent), "true");
+    onMessageAllowed?.();
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/EventTileReceiptState.ts b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileReceiptState.ts
new file mode 100644
index 0000000000..5f321213ef
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileReceiptState.ts
@@ -0,0 +1,80 @@
+/*
+Copyright 2026 Element Creations 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 { EventStatus, EventType, type MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import { TimelineRenderingType } from "../../../../contexts/RoomContext";
+import { isMessageEvent } from "../../../../events/EventTileFactory";
+
+interface ReadReceiptLike {
+    userId: string;
+}
+
+/** Inputs for deriving EventTile receipt display state. */
+export interface EventTileReceiptStateInput {
+    /** The Matrix event rendered by the tile. */
+    mxEvent: MatrixEvent;
+    /** Read receipts supplied for the tile. */
+    readReceipts?: ReadReceiptLike[];
+    /** Whether the event room is known locally. */
+    hasRoom: boolean;
+    /** Current user's safe user ID, used for sender eligibility. */
+    ownUserId: string;
+    /** Whether this is the last successful event sent by the current user. */
+    lastSuccessful?: boolean;
+    /** Current event send status. */
+    eventSendStatus?: EventStatus | null;
+    /** The current timeline rendering mode. */
+    timelineRenderingType: TimelineRenderingType;
+}
+
+/** EventTile receipt display state. */
+export interface EventTileReceiptState {
+    /** Whether the event is eligible for a sent/sending receipt. */
+    isEligibleForSpecialReceipt: boolean;
+    /** Whether EventTile should render the sent receipt. */
+    shouldShowSentReceipt: boolean;
+    /** Whether EventTile should render the sending receipt. */
+    shouldShowSendingReceipt: boolean;
+    /** Whether EventTile should listen for receipt updates. */
+    shouldListenForReceipts: boolean;
+}
+
+/**
+ * Whether the event type qualifies for a sent/sending receipt.
+ * This excludes state events and other events that are not sent by the composer.
+ */
+export function isEligibleForSpecialReceipt(mxEvent: MatrixEvent): boolean {
+    return isMessageEvent(mxEvent) || mxEvent.getType() === EventType.RoomMessageEncrypted;
+}
+
+/** Derives receipt display state for EventTile. */
+export function getEventTileReceiptState({
+    mxEvent,
+    readReceipts,
+    hasRoom,
+    ownUserId,
+    lastSuccessful,
+    eventSendStatus,
+    timelineRenderingType,
+}: EventTileReceiptStateInput): EventTileReceiptState {
+    const isEligible =
+        !readReceipts?.length && hasRoom && mxEvent.getSender() === ownUserId && isEligibleForSpecialReceipt(mxEvent);
+    const shouldShowSentReceipt =
+        isEligible &&
+        !!lastSuccessful &&
+        timelineRenderingType !== TimelineRenderingType.ThreadsList &&
+        (!eventSendStatus || eventSendStatus === EventStatus.SENT);
+    const shouldShowSendingReceipt = isEligible && !!eventSendStatus && eventSendStatus !== EventStatus.SENT;
+
+    return {
+        isEligibleForSpecialReceipt: isEligible,
+        shouldShowSentReceipt,
+        shouldShowSendingReceipt,
+        shouldListenForReceipts: shouldShowSentReceipt || shouldShowSendingReceipt,
+    };
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/EventTileRedactedBodyState.test.ts b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileRedactedBodyState.test.ts
new file mode 100644
index 0000000000..8799bc3a83
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileRedactedBodyState.test.ts
@@ -0,0 +1,90 @@
+/*
+Copyright 2026 Element Creations 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.
+*/
+
+// @vitest-environment happy-dom
+
+import { EventType, MatrixEvent, MsgType, type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
+import { beforeEach, afterEach, describe, expect, it, vi } from "vitest";
+
+import { formatFullDate } from "../../../../DateUtils";
+import { _t } from "../../../../languageHandler";
+import { MatrixClientPeg } from "../../../../MatrixClientPeg";
+import { getRedactedBodyViewModelProps } from "./EventTileRedactedBodyState";
+
+describe("EventTileRedactedBodyState", () => {
+    let client: MatrixClient;
+    let room: Room;
+
+    const makeRedactedEvent = ({
+        sender = "@alice:example.com",
+        redactedBecauseSender = sender,
+        originServerTs = Date.UTC(2022, 10, 17, 15, 58, 32),
+    }: {
+        sender?: string;
+        redactedBecauseSender?: string;
+        originServerTs?: number;
+    } = {}): MatrixEvent =>
+        new MatrixEvent({
+            event_id: "$message:example.com",
+            type: EventType.RoomMessage,
+            sender,
+            room_id: room.roomId,
+            content: {
+                msgtype: MsgType.Text,
+                body: "Message",
+            },
+            unsigned: {
+                redacted_because: {
+                    content: {},
+                    event_id: "$redaction:example.com",
+                    origin_server_ts: originServerTs,
+                    redacts: "$message:example.com",
+                    room_id: room.roomId,
+                    sender: redactedBecauseSender,
+                    type: EventType.RoomRedaction,
+                    unsigned: {},
+                },
+            },
+        });
+
+    beforeEach(() => {
+        client = { getRoom: vi.fn() } as unknown as MatrixClient;
+        room = { roomId: "!room:example.com", getMember: vi.fn() } as unknown as Room;
+        vi.spyOn(MatrixClientPeg, "get").mockReturnValue(client);
+        vi.spyOn(client, "getRoom").mockReturnValue(room);
+    });
+
+    afterEach(() => vi.restoreAllMocks());
+
+    it("builds self-redaction text and tooltip from the event", () => {
+        const event = makeRedactedEvent();
+
+        expect(getRedactedBodyViewModelProps(event, true)).toEqual({
+            text: "Message deleted",
+            tooltip: _t("timeline|redacted|tooltip", {
+                date: formatFullDate(new Date(Date.UTC(2022, 10, 17, 15, 58, 32)), true),
+            }),
+        });
+    });
+
+    it("uses the redacting member name when another user removed the message", () => {
+        vi.spyOn(room, "getMember").mockReturnValue({ name: "Alice" } as any);
+
+        expect(
+            getRedactedBodyViewModelProps(
+                makeRedactedEvent({ redactedBecauseSender: "@alice-redactor:example.com" }),
+                false,
+            ).text,
+        ).toBe("Message deleted by Alice");
+    });
+
+    it("omits the tooltip when the event has no redaction timestamp", () => {
+        const event = makeRedactedEvent({ originServerTs: 0 });
+
+        expect(getRedactedBodyViewModelProps(event, false).tooltip).toBeUndefined();
+    });
+});
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/EventTileRedactedBodyState.ts b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileRedactedBodyState.ts
new file mode 100644
index 0000000000..578b78cdb4
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileRedactedBodyState.ts
@@ -0,0 +1,37 @@
+/*
+Copyright 2026 Element Creations 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 MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import { formatFullDate } from "../../../../DateUtils";
+import { _t } from "../../../../languageHandler";
+import { MatrixClientPeg } from "../../../../MatrixClientPeg";
+import { type RedactedBodyViewSnapshot } from "@element-hq/web-shared-components";
+
+/** Converts a redacted event into the data required by the redacted body view. */
+export function getRedactedBodyViewModelProps(mxEvent: MatrixEvent, showTwelveHour: boolean): RedactedBodyViewSnapshot {
+    const redactedBecause = mxEvent.getUnsigned().redacted_because;
+
+    const redactingUserId = redactedBecause?.sender;
+    const redactingRoomId = mxEvent.getRoomId();
+    const redactingRoom = redactingRoomId ? MatrixClientPeg.get()?.getRoom(redactingRoomId) : null;
+    const redactingMember = redactingUserId ? redactingRoom?.getMember(redactingUserId) : undefined;
+
+    const text =
+        !redactingUserId || redactingUserId === mxEvent.getSender()
+            ? _t("timeline|self_redaction")
+            : _t("timeline|redaction", { name: redactingMember?.name ?? redactingUserId });
+
+    const redactionTs = redactedBecause?.origin_server_ts;
+    const tooltip = redactionTs
+        ? _t("timeline|redacted|tooltip", {
+              date: formatFullDate(new Date(redactionTs), showTwelveHour),
+          })
+        : undefined;
+
+    return { text, tooltip };
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/EventTileReplyChainState.ts b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileReplyChainState.ts
new file mode 100644
index 0000000000..45b20808d8
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileReplyChainState.ts
@@ -0,0 +1,34 @@
+/*
+Copyright 2026 Element Creations 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 MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import { shouldDisplayReply } from "../../../../utils/Reply";
+
+/** Inputs for deriving EventTile reply-chain display state. */
+export interface EventTileReplyChainStateInput {
+    /** Matrix event rendered by the tile. */
+    mxEvent: MatrixEvent;
+    /** Whether the event has a renderer in the current timeline context. */
+    hasRenderer: boolean;
+}
+
+/** EventTile reply-chain display state. */
+export interface EventTileReplyChainState {
+    /** Whether EventTile should render ReplyChain. */
+    shouldShowReplyChain: boolean;
+}
+
+/** Derives reply-chain display state for EventTile. */
+export function getEventTileReplyChainState({
+    mxEvent,
+    hasRenderer,
+}: EventTileReplyChainStateInput): EventTileReplyChainState {
+    return {
+        shouldShowReplyChain: hasRenderer && shouldDisplayReply(mxEvent),
+    };
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/EventTileThreadState.ts b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileThreadState.ts
new file mode 100644
index 0000000000..e701da998c
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileThreadState.ts
@@ -0,0 +1,96 @@
+/*
+Copyright 2026 Element Creations 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 MatrixEvent, type Thread } from "matrix-js-sdk/src/matrix";
+
+import { TimelineRenderingType } from "../../../../contexts/RoomContext";
+
+/** Minimal room surface used to look up a thread for an event. */
+export interface EventTileThreadLookup {
+    /** Finds the thread associated with an event. */
+    findThreadForEvent(mxEvent: MatrixEvent): Thread | null | undefined;
+}
+
+/** Search thread-info rendering kind. */
+export type SearchThreadInfoKind = "none" | "text" | "link";
+
+/** Search timeline thread-info display state. */
+export interface EventTileSearchThreadInfo {
+    /** Kind of search thread info to render. */
+    kind: SearchThreadInfoKind;
+    /** Link target when rendering linked thread info. */
+    href?: string;
+}
+
+/** Inputs for deriving EventTile thread display state. */
+export interface EventTileThreadStateInput {
+    /** Matrix event rendered by the tile. */
+    mxEvent: MatrixEvent;
+    /** Thread associated with the event, when available. */
+    thread: Thread | null;
+    /** Current timeline rendering mode. */
+    timelineRenderingType: TimelineRenderingType;
+    /** Optional search-result link for thread info. */
+    highlightLink?: string;
+}
+
+/** EventTile thread display state. */
+export interface EventTileThreadState {
+    /** Thread associated with the event, when available. */
+    thread: Thread | null;
+    /** Whether EventTile should render the main thread summary. */
+    shouldShowThreadSummary: boolean;
+    /** Whether EventTile should render the thread panel reply summary. */
+    shouldShowThreadPanelSummary: boolean;
+    /** Timestamp of the latest thread reply, when available. */
+    threadReplyEventTs?: number;
+    /** Search timeline thread-info display state. */
+    searchThreadInfo: EventTileSearchThreadInfo;
+}
+
+/**
+ * Finds the thread associated with an event.
+ *
+ * Accessing the thread through the room covers a race where the event has not
+ * discovered its thread yet during sync.
+ */
+export function getEventTileThread(mxEvent: MatrixEvent, room?: EventTileThreadLookup | null): Thread | null {
+    return mxEvent.getThread() ?? room?.findThreadForEvent(mxEvent) ?? null;
+}
+
+function getSearchThreadInfo(shouldShowSearchThreadInfo: boolean, highlightLink?: string): EventTileSearchThreadInfo {
+    if (!shouldShowSearchThreadInfo) {
+        return { kind: "none" };
+    }
+
+    if (highlightLink) {
+        return { kind: "link", href: highlightLink };
+    }
+
+    return { kind: "text" };
+}
+
+/** Derives thread display state for EventTile. */
+export function getEventTileThreadState({
+    mxEvent,
+    thread,
+    timelineRenderingType,
+    highlightLink,
+}: EventTileThreadStateInput): EventTileThreadState {
+    const shouldShowThreadSummary = !!thread && thread.id === mxEvent.getId();
+    const shouldShowSearchThreadInfo =
+        !shouldShowThreadSummary && timelineRenderingType === TimelineRenderingType.Search && !!mxEvent.threadRootId;
+    const searchThreadInfo = getSearchThreadInfo(shouldShowSearchThreadInfo, highlightLink);
+
+    return {
+        thread,
+        shouldShowThreadSummary,
+        shouldShowThreadPanelSummary: !!thread,
+        threadReplyEventTs: thread?.replyToEvent?.getTs(),
+        searchThreadInfo,
+    };
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/EventTileViewModel.ts b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileViewModel.ts
new file mode 100644
index 0000000000..90a5d5b11c
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileViewModel.ts
@@ -0,0 +1,812 @@
+/*
+Copyright 2026 Element Creations 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 classNames from "classnames";
+import { BaseViewModel } from "@element-hq/web-shared-components";
+import { EventType, MsgType, type MatrixClient, type MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import {
+    type EventTileSenderProfileState,
+    type FooterDisplayState,
+    getEventTileClassState,
+    getEventTileLineClassState,
+    getEventTileSenderProfileState,
+    getEventTileTimestamp,
+    getFooterDisplayState,
+    getIsContinuation,
+    getReplyChainAlwaysShowTimestamps,
+    getScrollToken,
+    getSenderProfileMode,
+    getShouldShowMessageActionBar,
+    getShouldShowTimestamp,
+    getShouldViewUserOnClick,
+    getTimestampDisplayState,
+    type SenderProfileMode,
+    type TimestampDisplayState,
+} from "./EventTileDerivedState";
+import { type MemberInfo } from "./DisambiguatedProfileViewModel";
+import { TimelineRenderingType } from "../../../../contexts/RoomContext";
+import { type Layout } from "../../../../settings/enums/Layout";
+import { MessageTimestampViewModel, type MessageTimestampViewModelProps } from "./timestamp/MessageTimestampViewModel";
+import {
+    ThreadMessagePreviewViewModel,
+    type ThreadMessagePreviewViewModelProps,
+    ThreadSummaryViewModel,
+    type ThreadSummaryViewModelProps,
+} from "./ThreadSummaryViewModel";
+import {
+    E2eMessageSharedIconViewModel,
+    type E2eMessageSharedIconViewModelProps,
+} from "./E2eMessageSharedIconViewModel";
+import { EventPreviewViewModel, type EventPreviewViewModelProps } from "./EventPreviewViewModel";
+import { getEventTileReplyChainState } from "./EventTileReplyChainState";
+import { getEventDisplayInfo } from "../../../../utils/EventRenderingUtils";
+import { haveRendererForEvent } from "../../../../events/EventTileFactory";
+import {
+    ThreadListActionBarViewModel,
+    type ThreadListActionBarViewModelProps,
+} from "../../ThreadListActionBarViewModel";
+import { EventTileActionBarViewModel, type EventTileActionBarViewModelProps } from "../../EventTileActionBarViewModel";
+import { ReactionsRowViewModel, type ReactionsRowViewModelProps } from "./reactions/ReactionsRowViewModel";
+
+/** Event-level inputs for deriving the EventTile snapshot. */
+export interface EventTileEventInput {
+    /** Whether the event is in a pending send state. */
+    isSending: boolean;
+    /** Whether EventTile should announce updates in an aria-live region. */
+    ariaLive?: "off";
+    /** Whether the event is currently being edited. */
+    isEditing: boolean;
+    /** Whether the tile is rendering for export. */
+    forExport?: boolean;
+}
+
+/** Event-level inputs after SDK data has been converted to pure values. */
+export interface EventTileDerivedEventInput extends EventTileEventInput {
+    /** The event type rendered by the tile. */
+    eventType: string;
+    /** The Matrix message type rendered by the tile. */
+    msgtype?: string;
+    /** The event origin timestamp. */
+    eventTs: number;
+    /** The stable event identifier, when available. */
+    eventId?: string;
+    /** The event identifier replaced by this event, when available. */
+    replacingEventId?: string;
+    /** Whether the event is a state event. */
+    isState: boolean;
+    /** Whether the event is a local echo. */
+    isLocalEcho: boolean;
+    /** Whether the event is a room create event. */
+    isRoomCreate: boolean;
+    /** Whether the event is a call invite. */
+    isCallInvite: boolean;
+    /** Whether the event is an RTC notification. */
+    isRtcNotification: boolean;
+    /** Whether the event failed decryption. */
+    isEncryptionFailure: boolean;
+    /** Whether a renderer is available for the event. */
+    hasRenderer: boolean;
+    /** Whether the event should be rendered through the moderation fallback. */
+    isSeeingThroughMessageHiddenForModeration: boolean;
+    /** Whether EventTile should render the reply chain. */
+    hasReplyChain: boolean;
+}
+
+/** Display inputs for deriving the EventTile snapshot. */
+export interface EventTileDisplayInput {
+    /** The current timeline rendering mode. */
+    timelineRenderingType: TimelineRenderingType;
+    /** The current timeline layout. */
+    layout?: Layout;
+    /** Whether the tile is a continuation of the previous event. */
+    continuation?: boolean;
+    /** Whether the event body is likely to render media content. */
+    isProbablyMedia: boolean;
+    /** Whether the tile should use bubble container styling. */
+    isBubbleMessage?: boolean;
+    /** Whether the bubble tile is left-aligned. */
+    isLeftAlignedBubbleMessage?: boolean;
+    /** Whether the event is aligned between bubble columns. */
+    isAlignedBetweenBubbles?: boolean;
+    /** Whether the event renders as an informational timeline item. */
+    isInfoMessage?: boolean;
+    /** Whether bubble styling should be suppressed for this event. */
+    noBubbleEvent?: boolean;
+    /** Whether timestamps use twelve-hour formatting. */
+    isTwelveHour?: boolean;
+    /** Whether the event should be highlighted. */
+    isHighlighted: boolean;
+    /** Whether the tile is selected or has an open context menu. */
+    isSelected: boolean;
+    /** Whether the tile is the last event in the timeline. */
+    isLast?: boolean;
+    /** Whether the tile is the last event in its section. */
+    isLastInSection?: boolean;
+    /** Whether the tile is being rendered in contextual mode. */
+    isContextual?: boolean;
+}
+
+/** Event display inputs after renderer and event display information has been normalized. */
+export interface EventTileDerivedDisplayInput extends EventTileDisplayInput {
+    isBubbleMessage: boolean;
+    isLeftAlignedBubbleMessage: boolean;
+    isAlignedBetweenBubbles: boolean;
+    isInfoMessage: boolean;
+    noBubbleEvent: boolean;
+}
+
+/** Interaction inputs for deriving the EventTile snapshot. */
+export interface EventTileInteractionInput {
+    /** Whether the tile is currently hovered. */
+    hover: boolean;
+    /** Whether focus should force the action bar visible. */
+    showActionBarFromFocus: boolean;
+    /** Whether focus is currently inside the tile. */
+    focusWithin: boolean;
+    /** Whether the action bar currently has focus. */
+    isActionBarFocused: boolean;
+    /** Whether an EventTile context menu is currently open. */
+    hasContextMenu: boolean;
+    /** Whether interaction should be inhibited inside the tile. */
+    inhibitInteraction?: boolean;
+}
+
+/** Sender inputs for deriving the EventTile snapshot. */
+export interface EventTileSenderInput {
+    /** The Matrix sender ID, when available. */
+    senderId?: string;
+    /** Plain member info for sender/profile rendering. */
+    member: MemberInfo | null;
+    /** Whether sender details should be hidden. */
+    hideSender?: boolean;
+    /** Whether the event body renders as an emote. */
+    isEmote?: boolean;
+}
+
+/** Timestamp inputs for deriving the EventTile snapshot. */
+export interface EventTileTimestampInput {
+    /** Whether timestamps should always show. */
+    alwaysShowTimestamps?: boolean;
+    /** Whether timestamp rendering is disabled. */
+    hideTimestamp?: boolean;
+    /** The latest thread reply timestamp, when available. */
+    threadReplyEventTs?: number;
+}
+
+/** Footer inputs for deriving the EventTile snapshot. */
+export interface EventTileFooterInput {
+    /** Whether the event was sent by the current user. */
+    isOwnEvent: boolean;
+    /** Whether a reactions row element will render. */
+    hasReactionsRow: boolean;
+    /** Whether reactions data is available. */
+    hasReactions: boolean;
+    /** Whether a pinned message badge element will render. */
+    hasPinnedMessageBadge: boolean;
+}
+
+/** Inputs for deriving the EventTile view model snapshot. */
+export interface EventTileViewModelProps {
+    /** Event-level inputs. */
+    event: EventTileEventInput;
+    /** Display inputs. */
+    display: EventTileDisplayInput;
+    /** Interaction inputs. */
+    interaction: EventTileInteractionInput;
+    /** Sender inputs. */
+    sender: EventTileSenderInput;
+    /** Timestamp inputs. */
+    timestamp: EventTileTimestampInput;
+    /** Footer inputs. */
+    footer: EventTileFooterInput;
+}
+
+/** Pure EventTile inputs after event and sender data has been normalized. */
+export interface NormalizedEventTileViewModelProps {
+    event: EventTileDerivedEventInput;
+    display: EventTileDerivedDisplayInput;
+    interaction: EventTileInteractionInput;
+    sender: EventTileSenderInput;
+    timestamp: EventTileTimestampInput;
+    footer: EventTileFooterInput;
+}
+
+/** Application dependencies used by EventTileViewModel to derive render data. */
+export interface EventTileViewModelDependencies {
+    /** The Matrix event being rendered. */
+    mxEvent: MatrixEvent;
+    /** Matrix client used to select the event renderer. */
+    matrixClient: MatrixClient;
+    /** Whether hidden events should use their fallback renderer. */
+    showHiddenEvents: boolean;
+    /** Whether the event is hidden by the current tile context. */
+    hideEvent?: boolean;
+}
+
+/** Event-level state derived for the EventTile snapshot. */
+export interface EventTileEventSnapshot {
+    /** The Matrix event type. */
+    eventType: string;
+    /** The Matrix message type. */
+    msgtype?: string;
+    /** The stable event identifier, when available. */
+    eventId?: string;
+    /** The event identifier replaced by this event, when available. */
+    replacingEventId?: string;
+    /** Whether the event is a state event. */
+    isState: boolean;
+    /** The event origin timestamp. */
+    eventTs: number;
+    /** Whether the event is a local echo. */
+    isLocalEcho: boolean;
+    /** Whether the event is in a pending send state. */
+    isSending: boolean;
+    /** Whether the event is currently being edited. */
+    isEditing: boolean;
+    /** Whether EventTile should render as a continuation. */
+    isContinuation?: boolean;
+    /** Whether the tile is rendering as a notification. */
+    isRenderingNotification: boolean;
+    /** Whether the event failed decryption. */
+    isEncryptionFailure: boolean;
+    /** Whether a renderer is available for the event. */
+    hasRenderer: boolean;
+    /** Whether the event should be rendered through the moderation fallback. */
+    isSeeingThroughMessageHiddenForModeration: boolean;
+}
+
+/** Plain data attributes rendered on the EventTile root element. */
+export interface EventTileRootData {
+    /** The event identifier exposed through `data-event-id`. */
+    eventId?: string;
+    /** The configured tile layout exposed through `data-layout`. */
+    layout?: Layout;
+    /** The timeline rendering mode exposed through `data-shape`. */
+    shape: TimelineRenderingType;
+    /** Whether the event belongs to the current user, exposed through `stateOwnEvent`. */
+    isOwnEvent: boolean;
+    /** Whether EventTile renders a reply chain, exposed through `stateHasReply`. */
+    hasReply: boolean;
+}
+
+/** Root state derived for the EventTile snapshot. */
+export interface EventTileRootSnapshot {
+    /** The aria-live setting used by EventTile. */
+    ariaLive?: "off";
+    /** The stable scroll token for the event. */
+    scrollToken?: string;
+    /** Plain data attributes used by the EventTile root element. */
+    data: EventTileRootData;
+    /** EventTile root CSS class flags. */
+    classState: ReturnType<typeof getEventTileClassState>;
+}
+
+/** Line state derived for the EventTile snapshot. */
+export interface EventTileLineSnapshot {
+    /** EventTile line CSS class flags. */
+    classState: ReturnType<typeof getEventTileLineClassState>;
+}
+
+/** Sender state derived for the EventTile snapshot. */
+export interface EventTileSenderSnapshot {
+    /** The Matrix sender ID, when available. */
+    senderId?: string;
+    /** Plain member info for sender/profile rendering. */
+    member: MemberInfo | null;
+    /** EventTile avatar and sender profile display state. */
+    profileState: EventTileSenderProfileState;
+    /** Whether clicking the avatar should open the user profile. */
+    viewUserOnClick: boolean;
+    /** SenderProfile rendering mode. */
+    profileMode: SenderProfileMode;
+    /** Whether the avatar should use historical room member details. */
+    forceHistoricalAvatar: boolean;
+    /** Whether the event body renders as an emote. */
+    isEmote: boolean;
+}
+
+/** Action bar state derived for the EventTile snapshot. */
+export interface EventTileActionBarSnapshot {
+    /** Whether EventTile should render the message action bar. */
+    show: boolean;
+}
+
+/** Timestamp state derived for the EventTile snapshot. */
+export interface EventTileTimestampSnapshot {
+    /** Whether EventTile should render the message timestamp. */
+    show: boolean;
+    /** The timestamp EventTile should display. */
+    value: number;
+    /** EventTile timestamp display state. */
+    displayState: TimestampDisplayState;
+}
+
+/** Reply chain state derived for the EventTile snapshot. */
+export interface EventTileReplyChainSnapshot {
+    /** Whether ReplyChain should always show timestamps. */
+    alwaysShowTimestamps: boolean;
+}
+
+/** Footer state derived for the EventTile snapshot. */
+export type EventTileFooterSnapshot = FooterDisplayState;
+
+/** Derived EventTile view state consumed by the existing component. */
+export interface EventTileViewModelSnapshot {
+    /** Event-level derived state. */
+    event: EventTileEventSnapshot;
+    /** Root derived state. */
+    root: EventTileRootSnapshot;
+    /** Line derived state. */
+    line: EventTileLineSnapshot;
+    /** Sender derived state. */
+    sender: EventTileSenderSnapshot;
+    /** Action bar derived state. */
+    actionBar: EventTileActionBarSnapshot;
+    /** Timestamp derived state. */
+    timestamp: EventTileTimestampSnapshot;
+    /** Reply chain derived state. */
+    replyChain: EventTileReplyChainSnapshot;
+    /** Footer derived state. */
+    footer: EventTileFooterSnapshot;
+}
+
+/** Render-ready EventTile state consumed by the existing component. */
+export interface EventTileRenderState {
+    /** Derived EventTile view state. */
+    snapshot: EventTileViewModelSnapshot;
+    /** EventTile root render state. */
+    root: {
+        /** EventTile root CSS classes. */
+        className: string;
+        /** EventTile aria-live value. */
+        ariaLive?: "off";
+        /** Stable scroll token for the event. */
+        scrollToken?: string;
+        /** Whether the tile is rendering as a notification. */
+        isRenderingNotification: boolean;
+        /** Plain data attributes used by the EventTile root element. */
+        data: EventTileRootData;
+    };
+    /** EventTile line render state. */
+    line: {
+        /** EventTile line CSS classes. */
+        className: string;
+    };
+    /** EventTile timestamp render state. */
+    timestamp: EventTileTimestampSnapshot & {
+        /** Whether EventTile should render the placeholder timestamp used by IRC layout. */
+        showDummy: boolean;
+        /** Whether the timestamp slot belongs in the group-layout line. */
+        showInGroupLine: boolean;
+        /** Whether the timestamp slot belongs in the IRC-layout line. */
+        showInIrcLine: boolean;
+    };
+    /** EventTile E2E padlock slot state. */
+    e2ePadlock: {
+        /** Whether the padlock should render in the group-layout timestamp area. */
+        showInGroupLine: boolean;
+        /** Whether the padlock should render in the IRC-layout timestamp area. */
+        showInIrcLine: boolean;
+    };
+    /** EventTile footer slot state. */
+    footer: EventTileFooterSnapshot & {
+        /** Whether the footer belongs inside the IRC-layout message line. */
+        showInIrcLayout: boolean;
+        /** Whether the footer belongs below the message line. */
+        showInDefaultLayout: boolean;
+    };
+}
+
+/**
+ * Aggregate application-side render-state boundary for EventTile.
+ *
+ * SDK objects are converted to plain render data here before the existing render tree consumes it.
+ */
+export class EventTileViewModel extends BaseViewModel<EventTileRenderState, EventTileViewModelProps> {
+    private messageTimestampViewModel?: MessageTimestampViewModel;
+    private linkedMessageTimestampViewModel?: MessageTimestampViewModel;
+    private threadMessagePreviewViewModel?: ThreadMessagePreviewViewModel;
+    private threadSummaryViewModel?: ThreadSummaryViewModel;
+    private threadListActionBarViewModel?: ThreadListActionBarViewModel;
+    private e2eMessageSharedIconViewModel?: E2eMessageSharedIconViewModel;
+    private eventPreviewViewModel?: EventPreviewViewModel;
+    private actionBarViewModel?: EventTileActionBarViewModel;
+    private reactionsRowViewModel?: ReactionsRowViewModel;
+
+    public constructor(dependencies: EventTileViewModelDependencies, props: EventTileViewModelProps) {
+        const normalizedProps = EventTileViewModel.normalizeDependencies(dependencies, props);
+        const initialRenderState = EventTileViewModel.createRenderState(normalizedProps);
+
+        super(normalizedProps, initialRenderState);
+    }
+
+    /** Updates dependencies and root inputs together, emitting one consistent render state. */
+    public setInputs(dependencies: EventTileViewModelDependencies, props: EventTileViewModelProps): void {
+        const normalizedProps = EventTileViewModel.normalizeDependencies(dependencies, props);
+        this.props = normalizedProps;
+        this.snapshot.set(EventTileViewModel.createRenderState(normalizedProps));
+    }
+
+    public override dispose(): void {
+        this.messageTimestampViewModel?.dispose();
+        this.linkedMessageTimestampViewModel?.dispose();
+        this.threadMessagePreviewViewModel?.dispose();
+        this.threadSummaryViewModel?.dispose();
+        this.threadListActionBarViewModel?.dispose();
+        this.e2eMessageSharedIconViewModel?.dispose();
+        this.eventPreviewViewModel?.dispose();
+        this.actionBarViewModel?.dispose();
+        this.reactionsRowViewModel?.dispose();
+        super.dispose();
+    }
+
+    /** Lazily creates and returns the plain timestamp child view model. */
+    public getMessageTimestampViewModel(props: MessageTimestampViewModelProps): MessageTimestampViewModel {
+        this.messageTimestampViewModel ??= new MessageTimestampViewModel(props);
+        return this.messageTimestampViewModel;
+    }
+
+    /** Lazily creates and returns the permalink timestamp child view model. */
+    public getLinkedMessageTimestampViewModel(props: MessageTimestampViewModelProps): MessageTimestampViewModel {
+        this.linkedMessageTimestampViewModel ??= new MessageTimestampViewModel(props);
+        return this.linkedMessageTimestampViewModel;
+    }
+
+    /** Lazily creates and returns the thread message preview child view model. */
+    public getThreadMessagePreviewViewModel(props: ThreadMessagePreviewViewModelProps): ThreadMessagePreviewViewModel {
+        this.threadMessagePreviewViewModel ??= new ThreadMessagePreviewViewModel(props);
+        return this.threadMessagePreviewViewModel;
+    }
+
+    /** Releases the thread message preview child view model when its adapter unmounts. */
+    public releaseThreadMessagePreviewViewModel(): void {
+        this.threadMessagePreviewViewModel?.dispose();
+        this.threadMessagePreviewViewModel = undefined;
+    }
+
+    /** Lazily creates and returns the thread summary child view model. */
+    public getThreadSummaryViewModel(props: ThreadSummaryViewModelProps): ThreadSummaryViewModel {
+        this.threadSummaryViewModel ??= new ThreadSummaryViewModel(props);
+        return this.threadSummaryViewModel;
+    }
+
+    /** Releases the thread summary child view model when its adapter unmounts. */
+    public releaseThreadSummaryViewModel(): void {
+        this.threadSummaryViewModel?.dispose();
+        this.threadSummaryViewModel = undefined;
+    }
+
+    /** Lazily creates and returns the thread-list action bar child view model. */
+    public getThreadListActionBarViewModel(props: ThreadListActionBarViewModelProps): ThreadListActionBarViewModel {
+        this.threadListActionBarViewModel ??= new ThreadListActionBarViewModel(props);
+        return this.threadListActionBarViewModel;
+    }
+
+    /** Lazily creates and returns the E2E message-shared icon child view model. */
+    public getE2eMessageSharedIconViewModel(props: E2eMessageSharedIconViewModelProps): E2eMessageSharedIconViewModel {
+        this.e2eMessageSharedIconViewModel ??= new E2eMessageSharedIconViewModel(props);
+        return this.e2eMessageSharedIconViewModel;
+    }
+
+    /** Releases the E2E message-shared icon child view model when its adapter unmounts. */
+    public releaseE2eMessageSharedIconViewModel(): void {
+        this.e2eMessageSharedIconViewModel?.dispose();
+        this.e2eMessageSharedIconViewModel = undefined;
+    }
+
+    /** Lazily creates and returns the event preview child view model. */
+    public getEventPreviewViewModel(props: EventPreviewViewModelProps): EventPreviewViewModel {
+        this.eventPreviewViewModel ??= new EventPreviewViewModel(props);
+        return this.eventPreviewViewModel;
+    }
+
+    /** Releases the event preview child view model when its adapter unmounts. */
+    public releaseEventPreviewViewModel(): void {
+        this.eventPreviewViewModel?.dispose();
+        this.eventPreviewViewModel = undefined;
+    }
+
+    /** Lazily creates and returns the event action bar child view model. */
+    public getActionBarViewModel(props: EventTileActionBarViewModelProps): EventTileActionBarViewModel {
+        this.actionBarViewModel ??= new EventTileActionBarViewModel(props);
+        return this.actionBarViewModel;
+    }
+
+    /** Releases the event action bar child view model when its adapter unmounts. */
+    public releaseActionBarViewModel(): void {
+        this.actionBarViewModel?.dispose();
+        this.actionBarViewModel = undefined;
+    }
+
+    /** Lazily creates and returns the reactions row child view model. */
+    public getReactionsRowViewModel(props: ReactionsRowViewModelProps): ReactionsRowViewModel {
+        this.reactionsRowViewModel ??= new ReactionsRowViewModel(props);
+        return this.reactionsRowViewModel;
+    }
+
+    /** Releases the reactions row child view model when its adapter unmounts. */
+    public releaseReactionsRowViewModel(): void {
+        this.reactionsRowViewModel?.dispose();
+        this.reactionsRowViewModel = undefined;
+    }
+
+    /** Derives render-ready EventTile state from component-owned inputs. */
+    public static createRenderState(props: NormalizedEventTileViewModelProps): EventTileRenderState {
+        const snapshot = EventTileViewModel.createSnapshot(props);
+        const useIRCLayout = snapshot.timestamp.displayState.useIRCLayout;
+        const showPadlock = !props.display.isBubbleMessage;
+
+        return {
+            snapshot,
+            root: {
+                className: classNames(snapshot.root.classState),
+                ariaLive: snapshot.root.ariaLive,
+                scrollToken: snapshot.root.scrollToken,
+                isRenderingNotification: snapshot.event.isRenderingNotification,
+                data: snapshot.root.data,
+            },
+            line: {
+                className: classNames("mx_EventTile_line", snapshot.line.classState),
+            },
+            timestamp: {
+                ...snapshot.timestamp,
+                showDummy: useIRCLayout,
+                showInGroupLine: !useIRCLayout,
+                showInIrcLine: useIRCLayout,
+            },
+            e2ePadlock: {
+                showInGroupLine: !useIRCLayout && showPadlock,
+                showInIrcLine: useIRCLayout && showPadlock,
+            },
+            footer: {
+                ...snapshot.footer,
+                showInIrcLayout: useIRCLayout,
+                showInDefaultLayout: !useIRCLayout,
+            },
+        };
+    }
+
+    /**
+     * Derives pure inputs from application dependencies while keeping the VM's public props SDK-free.
+     */
+    private static normalizeDependencies(
+        dependencies: EventTileViewModelDependencies,
+        props: EventTileViewModelProps,
+    ): NormalizedEventTileViewModelProps {
+        const { mxEvent } = dependencies;
+        const eventType = mxEvent.getType();
+        const displayInfo = getEventDisplayInfo(
+            dependencies.matrixClient,
+            mxEvent,
+            dependencies.showHiddenEvents,
+            dependencies.hideEvent,
+        );
+        const replyChainState = getEventTileReplyChainState({
+            mxEvent,
+            // Replacement events have a fallback tile but must not show their own reply chain
+            hasRenderer: haveRendererForEvent(mxEvent, dependencies.matrixClient, dependencies.showHiddenEvents),
+        });
+
+        return {
+            ...props,
+            event: {
+                ...props.event,
+                eventType,
+                msgtype: mxEvent.getContent().msgtype,
+                eventTs: mxEvent.getTs(),
+                eventId: mxEvent.getId() ?? undefined,
+                replacingEventId: mxEvent.replacingEventId() ?? undefined,
+                isState: mxEvent.isState(),
+                isLocalEcho: !!mxEvent.status,
+                isRoomCreate: eventType === EventType.RoomCreate,
+                isCallInvite: eventType === EventType.CallInvite,
+                isRtcNotification: eventType === EventType.RTCNotification,
+                isEncryptionFailure: mxEvent.isDecryptionFailure(),
+                hasRenderer: displayInfo.hasRenderer,
+                isSeeingThroughMessageHiddenForModeration: displayInfo.isSeeingThroughMessageHiddenForModeration,
+                hasReplyChain: replyChainState.shouldShowReplyChain,
+            },
+            display: {
+                ...props.display,
+                ...displayInfo,
+            },
+            sender: {
+                ...props.sender,
+                senderId: mxEvent.getSender() ?? undefined,
+                isEmote: mxEvent.getContent().msgtype === MsgType.Emote,
+            },
+        };
+    }
+
+    /** Creates an EventTile view model snapshot. */
+    public static createSnapshot(props: NormalizedEventTileViewModelProps): EventTileViewModelSnapshot {
+        const { event, display, interaction, sender, timestamp, footer } = props;
+        const isContinuation = getIsContinuation(display.continuation, display.timelineRenderingType, display.layout);
+        const isRenderingNotification = display.timelineRenderingType === TimelineRenderingType.Notification;
+        const eventSnapshot: EventTileEventSnapshot = {
+            eventType: event.eventType,
+            msgtype: event.msgtype,
+            eventId: event.eventId,
+            replacingEventId: event.replacingEventId,
+            isState: event.isState,
+            eventTs: event.eventTs,
+            isLocalEcho: event.isLocalEcho,
+            isSending: event.isSending,
+            isEditing: event.isEditing,
+            isContinuation,
+            isRenderingNotification,
+            isEncryptionFailure: event.isEncryptionFailure,
+            hasRenderer: event.hasRenderer,
+            isSeeingThroughMessageHiddenForModeration: event.isSeeingThroughMessageHiddenForModeration,
+        };
+        const senderProfileState = getEventTileSenderProfileState({
+            isRenderingNotification,
+            isInfoMessage: display.isInfoMessage,
+            timelineRenderingType: display.timelineRenderingType,
+            continuation: display.continuation,
+            eventType: event.eventType,
+            isBubbleMessage: display.isBubbleMessage,
+            layout: display.layout,
+            isRoomCreate: event.isRoomCreate,
+            isCallInvite: event.isCallInvite,
+            isRtcNotification: event.isRtcNotification,
+        });
+        const showTimestamp = getShouldShowTimestamp({
+            eventTs: event.eventTs,
+            isRtcNotification: event.isRtcNotification,
+            hideTimestamp: timestamp.hideTimestamp,
+            alwaysShowTimestamps: timestamp.alwaysShowTimestamps,
+            last: display.isLast,
+            hover: interaction.hover,
+            focusWithin: interaction.focusWithin,
+            actionBarFocused: interaction.isActionBarFocused,
+            hasContextMenu: interaction.hasContextMenu,
+        });
+        const timestampValue = getEventTileTimestamp({
+            timelineRenderingType: display.timelineRenderingType,
+            eventTs: event.eventTs,
+            threadReplyEventTs: timestamp.threadReplyEventTs,
+        });
+
+        return {
+            event: eventSnapshot,
+            root: {
+                ariaLive: event.ariaLive,
+                scrollToken: getScrollToken({
+                    eventId: event.eventId,
+                    isLocalEcho: event.isLocalEcho,
+                }),
+                data: {
+                    eventId: event.eventId,
+                    layout: display.layout,
+                    shape: display.timelineRenderingType,
+                    isOwnEvent: footer.isOwnEvent,
+                    hasReply: event.hasReplyChain,
+                },
+                classState: EventTileViewModel.getClassState({
+                    event,
+                    display,
+                    interaction,
+                    sender,
+                    eventType: event.eventType,
+                    msgtype: event.msgtype,
+                    isSending: event.isSending,
+                    isCallInvite: event.isCallInvite,
+                    isContinuation,
+                    isRenderingNotification,
+                }),
+            },
+            line: {
+                classState: getEventTileLineClassState({
+                    isProbablyMedia: display.isProbablyMedia,
+                    eventType: event.eventType,
+                    msgtype: event.msgtype,
+                }),
+            },
+            sender: {
+                senderId: sender.senderId,
+                member: sender.member ?? null,
+                profileState: senderProfileState,
+                viewUserOnClick: getShouldViewUserOnClick(
+                    interaction.inhibitInteraction,
+                    display.timelineRenderingType,
+                ),
+                profileMode: getSenderProfileMode({
+                    needsSenderProfile: senderProfileState.needsSenderProfile,
+                    hideSender: sender.hideSender,
+                    timelineRenderingType: display.timelineRenderingType,
+                }),
+                forceHistoricalAvatar: event.eventType === "m.room.member",
+                isEmote: sender.isEmote ?? false,
+            },
+            actionBar: {
+                show: getShouldShowMessageActionBar({
+                    isEditing: event.isEditing,
+                    forExport: event.forExport,
+                    hover: interaction.hover,
+                    showActionBarFromFocus: interaction.showActionBarFromFocus,
+                    actionBarFocused: interaction.isActionBarFocused,
+                    hasContextMenu: interaction.hasContextMenu,
+                }),
+            },
+            timestamp: {
+                show: showTimestamp,
+                value: timestampValue,
+                displayState: getTimestampDisplayState({
+                    layout: display.layout,
+                    showTimestamp,
+                    timestamp: timestampValue,
+                    hideTimestamp: timestamp.hideTimestamp,
+                }),
+            },
+            replyChain: {
+                alwaysShowTimestamps: getReplyChainAlwaysShowTimestamps({
+                    alwaysShowTimestamps: timestamp.alwaysShowTimestamps,
+                    hover: interaction.hover,
+                    focusWithin: interaction.focusWithin,
+                }),
+            },
+            footer: getFooterDisplayState({
+                hasReactionsRow: footer.hasReactionsRow,
+                hasReactions: footer.hasReactions,
+                hasPinnedMessageBadge: footer.hasPinnedMessageBadge,
+                layout: display.layout,
+                isOwnEvent: footer.isOwnEvent,
+            }),
+        };
+    }
+
+    private static getClassState({
+        event,
+        display,
+        interaction,
+        sender,
+        eventType,
+        msgtype,
+        isSending,
+        isCallInvite,
+        isContinuation,
+        isRenderingNotification,
+    }: {
+        event: EventTileDerivedEventInput;
+        display: EventTileDerivedDisplayInput;
+        interaction: EventTileInteractionInput;
+        sender: EventTileSenderInput;
+        eventType: string;
+        msgtype?: string;
+        isSending: boolean;
+        isCallInvite: boolean;
+        isContinuation?: boolean;
+        isRenderingNotification: boolean;
+    }): ReturnType<typeof getEventTileClassState> {
+        return getEventTileClassState({
+            isBubbleMessage: display.isBubbleMessage,
+            isLeftAlignedBubbleMessage: display.isLeftAlignedBubbleMessage,
+            isAlignedBetweenBubbles: display.isAlignedBetweenBubbles,
+            isEditing: event.isEditing,
+            isInfoMessage: display.isInfoMessage,
+            isTwelveHour: display.isTwelveHour,
+            isSending,
+            isHighlighted: display.isHighlighted,
+            isSelected: display.isSelected,
+            isContinuation,
+            eventType,
+            isCallInvite,
+            isLast: display.isLast,
+            isLastInSection: display.isLastInSection,
+            isContextual: display.isContextual,
+            isActionBarFocused: interaction.isActionBarFocused,
+            isEncryptionFailure: event.isEncryptionFailure,
+            msgtype,
+            hideSender: sender.hideSender,
+            timelineRenderingType: display.timelineRenderingType,
+            isRenderingNotification,
+            noBubbleEvent: display.noBubbleEvent,
+        });
+    }
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/EventTileVisibilityState.ts b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileVisibilityState.ts
new file mode 100644
index 0000000000..4f8dd3fad7
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/EventTileVisibilityState.ts
@@ -0,0 +1,28 @@
+/*
+Copyright 2026 Element Creations 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 { CallErrorCode } from "matrix-js-sdk/src/webrtc/call";
+
+/** Call event state used to decide whether EventTile should suppress rendering. */
+export interface EventTileCallEventState {
+    /** Legacy call hangup reason, when available. */
+    hangupReason?: string | null;
+}
+
+/** Inputs for deriving EventTile hidden display state. */
+export interface EventTileVisibilityStateInput {
+    /** Legacy call event grouping state for this tile. */
+    callEventGrouper?: EventTileCallEventState;
+}
+
+/**
+ * In some cases EventTile cannot rely on the event's own visibility because replacement call events are rendered by
+ * the replacing call tile instead.
+ */
+export function shouldHideEventTile({ callEventGrouper }: EventTileVisibilityStateInput): boolean {
+    return callEventGrouper?.hangupReason === CallErrorCode.Replaced;
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/MJitsiWidgetEventViewModel.ts b/apps/web/src/viewmodels/room/timeline/event-tile/MJitsiWidgetEventViewModel.ts
new file mode 100644
index 0000000000..d622877af4
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/MJitsiWidgetEventViewModel.ts
@@ -0,0 +1,154 @@
+/*
+ * Copyright 2026 Element Creations 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 JSX } from "react";
+import { type MatrixClient, type MatrixEvent } from "matrix-js-sdk/src/matrix";
+import {
+    BaseViewModel,
+    type MJitsiWidgetEventViewModel as MJitsiWidgetEventViewModelInterface,
+    type MJitsiWidgetEventViewSnapshot,
+} from "@element-hq/web-shared-components";
+
+import { _t } from "../../../../languageHandler";
+import WidgetStore, { type IApp } from "../../../../stores/WidgetStore";
+import { UPDATE_EVENT } from "../../../../stores/AsyncStore";
+import { WidgetLayoutStore } from "../../../../stores/widgets/WidgetLayoutStore";
+
+export interface MJitsiWidgetEventViewModelProps {
+    /**
+     * Caller-provided client.
+     */
+    cli: MatrixClient;
+    /**
+     * Jitsi widget state event to derive tile state from.
+     */
+    mxEvent: MatrixEvent;
+    /**
+     * Optional timestamp element rendered in the tile footer slot.
+     */
+    timestamp?: JSX.Element;
+    /**
+     * Widget store used to resolve the widget referenced by the state event.
+     */
+    widgetStore?: WidgetStore;
+    /**
+     * Widget layout store used to resolve the current join prompt.
+     */
+    widgetLayoutStore?: WidgetLayoutStore;
+}
+
+type InternalProps = Required<Pick<MJitsiWidgetEventViewModelProps, "widgetStore" | "widgetLayoutStore">> &
+    Omit<MJitsiWidgetEventViewModelProps, "widgetStore" | "widgetLayoutStore">;
+
+/**
+ * ViewModel for Jitsi widget events.
+ */
+export class MJitsiWidgetEventViewModel
+    extends BaseViewModel<MJitsiWidgetEventViewSnapshot, InternalProps>
+    implements MJitsiWidgetEventViewModelInterface
+{
+    public constructor(props: MJitsiWidgetEventViewModelProps) {
+        const internalProps = {
+            ...props,
+            widgetStore: props.widgetStore ?? WidgetStore.instance,
+            widgetLayoutStore: props.widgetLayoutStore ?? WidgetLayoutStore.instance,
+        };
+
+        super(internalProps, MJitsiWidgetEventViewModel.computeSnapshot(internalProps));
+        this.trackStoreUpdates();
+    }
+
+    public setEvent(mxEvent: MatrixEvent): void {
+        this.props = { ...this.props, mxEvent };
+        this.updateSnapshotFromProps();
+    }
+
+    private trackStoreUpdates(): void {
+        const roomId = this.props.mxEvent.getRoomId();
+        const room = roomId ? this.props.cli.getRoom(roomId) : null;
+
+        this.disposables.trackListener(this.props.widgetStore, UPDATE_EVENT, (updatedRoomId?: unknown) => {
+            if (typeof updatedRoomId === "string" && updatedRoomId !== this.props.mxEvent.getRoomId()) return;
+            this.updateSnapshotFromProps();
+        });
+
+        if (roomId) {
+            this.disposables.trackListener(this.props.widgetStore, roomId, () => this.updateSnapshotFromProps());
+        }
+
+        if (room) {
+            this.disposables.trackListener(this.props.widgetLayoutStore, WidgetLayoutStore.emissionForRoom(room), () =>
+                this.updateSnapshotFromProps(),
+            );
+        }
+    }
+
+    private updateSnapshotFromProps(): void {
+        this.snapshot.merge(MJitsiWidgetEventViewModel.computeSnapshot(this.props));
+    }
+
+    private static computeSnapshot(props: InternalProps): MJitsiWidgetEventViewSnapshot {
+        const { mxEvent, timestamp } = props;
+        const roomId = mxEvent.getRoomId();
+        const room = roomId ? props.cli.getRoom(roomId) : null;
+
+        if (!room) {
+            return {
+                isVisible: false,
+                title: "",
+                subtitle: null,
+                timestamp,
+            };
+        }
+
+        const content = mxEvent.getContent<{ url?: string }>();
+        const prevContent = mxEvent.getPrevContent() as { url?: string };
+        const senderName = mxEvent.sender?.name || mxEvent.getSender() || "";
+        const widget = MJitsiWidgetEventViewModel.getWidget(props);
+        let subtitle: string | null = null;
+
+        if (content.url && widget) {
+            subtitle = props.widgetLayoutStore.isInContainer(room, widget, "right")
+                ? _t("timeline|m.widget|jitsi_join_right_prompt")
+                : _t("timeline|m.widget|jitsi_join_top_prompt");
+        }
+
+        if (!content.url) {
+            return {
+                isVisible: true,
+                title: _t("timeline|m.widget|jitsi_ended", { senderName }),
+                subtitle: null,
+                timestamp,
+            };
+        }
+
+        if (prevContent.url) {
+            return {
+                isVisible: true,
+                title: _t("timeline|m.widget|jitsi_updated", { senderName }),
+                subtitle,
+                timestamp,
+            };
+        }
+
+        return {
+            isVisible: true,
+            title: _t("timeline|m.widget|jitsi_started", { senderName }),
+            subtitle,
+            timestamp,
+        };
+    }
+
+    private static getWidget(props: InternalProps): IApp | undefined {
+        const roomId = props.mxEvent.getRoomId();
+        const widgetId = props.mxEvent.getStateKey();
+
+        if (!roomId || widgetId === undefined) return undefined;
+
+        return props.widgetStore.getRoom(roomId, true).widgets.find((widget) => widget.id === widgetId);
+    }
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/MKeyVerificationRequestViewModel.ts b/apps/web/src/viewmodels/room/timeline/event-tile/MKeyVerificationRequestViewModel.ts
new file mode 100644
index 0000000000..5d4de14f0f
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/MKeyVerificationRequestViewModel.ts
@@ -0,0 +1,101 @@
+/*
+ * Copyright 2026 Element Creations 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 JSX } from "react";
+import { type MatrixClient, type MatrixEvent } from "matrix-js-sdk/src/matrix";
+import {
+    BaseViewModel,
+    type MKeyVerificationRequestViewModel as MKeyVerificationRequestViewModelInterface,
+    type MKeyVerificationRequestViewSnapshot,
+} from "@element-hq/web-shared-components";
+
+import { _t } from "../../../../languageHandler";
+import { getNameForEventRoom, userLabelForEventRoom } from "../../../../utils/KeyVerificationStateObserver";
+
+interface MKeyVerificationRequestContent {
+    body?: string;
+    format?: string;
+    formatted_body?: string;
+    from_device: string;
+    methods: string[];
+    msgtype: "m.key.verification.request";
+    to: string;
+}
+
+export interface MKeyVerificationRequestViewModelProps {
+    /**
+     * Caller-provided client.
+     */
+    cli: MatrixClient;
+    /**
+     * Verification request message event.
+     */
+    mxEvent: MatrixEvent;
+    /**
+     * Optional timestamp element rendered in the tile footer slot.
+     */
+    timestamp?: JSX.Element;
+}
+
+/**
+ * ViewModel for key verification request message events.
+ */
+export class MKeyVerificationRequestViewModel
+    extends BaseViewModel<MKeyVerificationRequestViewSnapshot, MKeyVerificationRequestViewModelProps>
+    implements MKeyVerificationRequestViewModelInterface
+{
+    public constructor(props: MKeyVerificationRequestViewModelProps) {
+        super(props, MKeyVerificationRequestViewModel.computeSnapshot(props));
+    }
+
+    public setEvent(mxEvent: MatrixEvent): void {
+        this.props = { ...this.props, mxEvent };
+        this.updateSnapshotFromProps();
+    }
+
+    public setTimestamp(timestamp: JSX.Element | undefined): void {
+        this.props = { ...this.props, timestamp };
+        this.snapshot.merge({ timestamp });
+    }
+
+    private updateSnapshotFromProps(): void {
+        this.snapshot.merge(MKeyVerificationRequestViewModel.computeSnapshot(this.props));
+    }
+
+    private static computeSnapshot({
+        cli,
+        mxEvent,
+        timestamp,
+    }: MKeyVerificationRequestViewModelProps): MKeyVerificationRequestViewSnapshot {
+        const myUserId = cli.getSafeUserId();
+        const content = mxEvent.getContent<MKeyVerificationRequestContent>();
+        const sender = mxEvent.getSender();
+        const roomId = mxEvent.getRoomId();
+
+        if (!sender) {
+            throw new Error("Verification request did not include a sender!");
+        }
+        if (!roomId) {
+            throw new Error("Verification request did not include a room ID!");
+        }
+
+        if (sender === myUserId) {
+            return {
+                title: _t("timeline|m.key.verification.request|you_started"),
+                subtitle: userLabelForEventRoom(cli, content.to, roomId),
+                timestamp,
+            };
+        }
+
+        const name = getNameForEventRoom(cli, sender, roomId);
+        return {
+            title: _t("timeline|m.key.verification.request|user_wants_to_verify", { name }),
+            subtitle: userLabelForEventRoom(cli, sender, roomId),
+            timestamp,
+        };
+    }
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/RoomAvatarEventViewModel.ts b/apps/web/src/viewmodels/room/timeline/event-tile/RoomAvatarEventViewModel.ts
new file mode 100644
index 0000000000..c2a0f11d16
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/RoomAvatarEventViewModel.ts
@@ -0,0 +1,109 @@
+/*
+ * Copyright 2026 Element Creations 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 MatrixClient, type MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { type RoomAvatarEventContent } from "matrix-js-sdk/src/types";
+import {
+    BaseViewModel,
+    type RoomAvatarEventViewModel as RoomAvatarEventViewModelInterface,
+    type RoomAvatarEventViewSnapshot,
+} from "@element-hq/web-shared-components";
+
+import { mediaFromMxc } from "../../../../customisations/Media";
+import { _t } from "../../../../languageHandler";
+import Modal from "../../../../Modal";
+import ImageView from "../../../../components/views/elements/ImageView";
+
+export interface RoomAvatarEventViewModelProps {
+    /**
+     * Caller-provided client.
+     */
+    cli: MatrixClient;
+    /**
+     * Room avatar state event.
+     */
+    mxEvent: MatrixEvent;
+}
+
+/**
+ * ViewModel for room avatar state events.
+ */
+export class RoomAvatarEventViewModel
+    extends BaseViewModel<RoomAvatarEventViewSnapshot, RoomAvatarEventViewModelProps>
+    implements RoomAvatarEventViewModelInterface
+{
+    public constructor(props: RoomAvatarEventViewModelProps) {
+        super(props, RoomAvatarEventViewModel.computeSnapshot(props));
+    }
+
+    public setEvent(mxEvent: MatrixEvent): void {
+        this.props = { ...this.props, mxEvent };
+        this.updateSnapshotFromProps();
+    }
+
+    public onAvatarClick = (): void => {
+        const avatarUrl = RoomAvatarEventViewModel.getAvatarUrl(this.props.mxEvent);
+        if (!avatarUrl) return;
+
+        const httpUrl = mediaFromMxc(avatarUrl, this.props.cli).srcHttp;
+        if (!httpUrl) return;
+
+        Modal.createDialog(
+            ImageView,
+            {
+                src: httpUrl,
+                name: RoomAvatarEventViewModel.computeLightboxLabel(this.props),
+            },
+            "mx_Dialog_lightbox",
+            undefined,
+            true,
+        );
+    };
+
+    private updateSnapshotFromProps(): void {
+        this.snapshot.merge(RoomAvatarEventViewModel.computeSnapshot(this.props));
+    }
+
+    private static computeSnapshot(props: RoomAvatarEventViewModelProps): RoomAvatarEventViewSnapshot {
+        const avatarUrl = RoomAvatarEventViewModel.getAvatarUrl(props.mxEvent);
+        const senderDisplayName = RoomAvatarEventViewModel.getSenderDisplayName(props.mxEvent);
+        const roomName = RoomAvatarEventViewModel.getRoomName(props);
+
+        return {
+            senderDisplayName,
+            roomName,
+            avatarUrl,
+            lightboxLabel: RoomAvatarEventViewModel.computeLightboxLabel(props),
+            isRemoved: !avatarUrl,
+        };
+    }
+
+    private static computeLightboxLabel(props: RoomAvatarEventViewModelProps): string {
+        return _t("timeline|m.room.avatar|lightbox_title", {
+            senderDisplayName: RoomAvatarEventViewModel.getSenderDisplayName(props.mxEvent),
+            roomName: RoomAvatarEventViewModel.getRoomName(props),
+        });
+    }
+
+    private static getSenderDisplayName(mxEvent: MatrixEvent): string {
+        return mxEvent.sender?.name || mxEvent.getSender() || "";
+    }
+
+    private static getRoomName({ cli, mxEvent }: RoomAvatarEventViewModelProps): string {
+        const roomId = mxEvent.getRoomId();
+        if (!roomId) return "";
+
+        return cli.getRoom(roomId)?.name ?? "";
+    }
+
+    private static getAvatarUrl(mxEvent: MatrixEvent): string | undefined {
+        const avatarUrl = mxEvent.getContent<RoomAvatarEventContent>().url;
+        if (!avatarUrl || avatarUrl.trim().length === 0) return undefined;
+
+        return avatarUrl;
+    }
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/ThreadSummaryViewModel.ts b/apps/web/src/viewmodels/room/timeline/event-tile/ThreadSummaryViewModel.ts
new file mode 100644
index 0000000000..20cd8d87cd
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/ThreadSummaryViewModel.ts
@@ -0,0 +1,606 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ * Copyright 2024 New Vector Ltd.
+ * Copyright 2022 The Matrix.org Foundation C.I.C.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { type MouseEvent } from "react";
+import {
+    type MatrixClient,
+    type MatrixEvent,
+    type NotificationCount,
+    RoomEvent,
+    type Room,
+    type RoomMember,
+    type RoomState,
+    RoomStateEvent,
+    type Thread,
+    ThreadEvent,
+} from "matrix-js-sdk/src/matrix";
+import { logger } from "matrix-js-sdk/src/logger";
+import {
+    BaseViewModel,
+    type ThreadMessagePreviewAvatar,
+    type ThreadMessagePreviewViewModel as ThreadMessagePreviewViewModelInterface,
+    type ThreadMessagePreviewViewSnapshot,
+    type ThreadSummaryViewModel as ThreadSummaryViewModelInterface,
+    type ThreadSummaryViewSnapshot,
+} from "@element-hq/web-shared-components";
+
+import { _t } from "../../../../languageHandler";
+import defaultDispatcher from "../../../../dispatcher/dispatcher";
+import { Action } from "../../../../dispatcher/actions";
+import { type ShowThreadPayload } from "../../../../dispatcher/payloads/ShowThreadPayload";
+import PosthogTrackers from "../../../../PosthogTrackers";
+import { determineUnreadState } from "../../../../RoomNotifs";
+import { notificationLevelToIndicator } from "../../../../utils/notifications";
+import { mediaFromMxc } from "../../../../customisations/Media";
+import UserIdentifierCustomisations from "../../../../customisations/UserIdentifier";
+import { TimelineRenderingType } from "../../../../contexts/RoomContext";
+import { keepIfSame } from "../../../../utils/keepIfSame";
+import {
+    EventPreviewContentCache,
+    getEventPreviewContent,
+    MatrixEventContentChangeListener,
+} from "./EventPreviewUtils";
+
+const AVATAR_SIZE_PX = 24;
+const THREAD_PROFILE_CONTEXTS = new Set<TimelineRenderingType>([
+    TimelineRenderingType.Thread,
+    TimelineRenderingType.ThreadsList,
+]);
+
+export interface ThreadMessagePreviewViewModelProps {
+    /**
+     * Matrix client used for event decryption and media URL resolution.
+     */
+    cli: MatrixClient;
+    /**
+     * Thread whose latest reply should be previewed.
+     */
+    thread: Thread;
+    /**
+     * Room context used to resolve current member profiles when configured.
+     */
+    room?: Room;
+    /**
+     * Timeline context used to match legacy current-profile behaviour in thread timelines.
+     */
+    timelineRenderingType: TimelineRenderingType;
+    /**
+     * Whether avatar images should be suppressed for low-bandwidth mode.
+     */
+    lowBandwidth?: boolean;
+    /**
+     * Whether to prefer current member profiles over historical event sender profiles.
+     */
+    useOnlyCurrentProfiles: boolean;
+    /**
+     * Whether to render the sender display name.
+     */
+    showDisplayName: boolean;
+    /**
+     * Optional class name for app-side avatar integration styling.
+     */
+    avatarClassName?: string;
+}
+
+export class ThreadMessagePreviewViewModel
+    extends BaseViewModel<ThreadMessagePreviewViewSnapshot, ThreadMessagePreviewViewModelProps>
+    implements ThreadMessagePreviewViewModelInterface
+{
+    private threadListenerCleanups: Array<() => void> = [];
+    private memberListenerCleanups: Array<() => void> = [];
+    private readonly eventContentListener = new MatrixEventContentChangeListener();
+    private readonly previewContentCache = new EventPreviewContentCache();
+    private watchedMemberRoom?: Room;
+    private watchedMemberUserId?: string;
+    private previewRequestId = 0;
+
+    public constructor(props: ThreadMessagePreviewViewModelProps) {
+        super(props, {
+            isVisible: false,
+            showDisplayName: props.showDisplayName,
+        });
+
+        this.setupThreadListener();
+        this.updateFromThreadSafely();
+    }
+
+    public dispose(): void {
+        this.teardownThreadListener();
+        this.eventContentListener.teardown();
+        this.teardownMemberListener();
+        super.dispose();
+    }
+
+    public setClient(cli: MatrixClient): void {
+        if (this.props.cli === cli) return;
+        this.props = { ...this.props, cli };
+        this.updateFromThreadSafely();
+    }
+
+    public setThread(thread: Thread): void {
+        if (this.props.thread === thread) return;
+        this.props = { ...this.props, thread };
+        this.setupThreadListener();
+        this.updateFromThreadSafely();
+    }
+
+    public setRoom(room?: Room): void {
+        if (this.props.room === room) return;
+        this.props = { ...this.props, room };
+        this.updateFromThreadSafely();
+    }
+
+    public setTimelineRenderingType(timelineRenderingType: TimelineRenderingType): void {
+        if (this.props.timelineRenderingType === timelineRenderingType) return;
+        this.props = { ...this.props, timelineRenderingType };
+        this.updateFromThreadSafely();
+    }
+
+    public setLowBandwidth(lowBandwidth?: boolean): void {
+        if (this.props.lowBandwidth === lowBandwidth) return;
+        this.props = { ...this.props, lowBandwidth };
+        this.updateFromThreadSafely();
+    }
+
+    public setUseOnlyCurrentProfiles(useOnlyCurrentProfiles: boolean): void {
+        if (this.props.useOnlyCurrentProfiles === useOnlyCurrentProfiles) return;
+        this.props = { ...this.props, useOnlyCurrentProfiles };
+        this.updateFromThreadSafely();
+    }
+
+    public setShowDisplayName(showDisplayName: boolean): void {
+        this.props = { ...this.props, showDisplayName };
+        this.snapshot.merge({ showDisplayName });
+    }
+
+    private setupThreadListener(): void {
+        this.teardownThreadListener();
+        const { thread } = this.props;
+        thread.on(ThreadEvent.Update, this.onThreadUpdate);
+        this.threadListenerCleanups.push(() => {
+            thread.off(ThreadEvent.Update, this.onThreadUpdate);
+        });
+    }
+
+    private teardownThreadListener(): void {
+        for (const cleanup of this.threadListenerCleanups) {
+            cleanup();
+        }
+        this.threadListenerCleanups = [];
+    }
+
+    private setupMemberListener(mxEvent?: MatrixEvent): void {
+        const userId = ThreadMessagePreviewViewModel.getProfileUserId(mxEvent);
+        const room = this.getProfileRoom();
+        const shouldUseCurrentProfiles = this.shouldUseCurrentProfiles();
+
+        if (!mxEvent || !userId || !room || !shouldUseCurrentProfiles) {
+            this.teardownMemberListener();
+            return;
+        }
+
+        if (this.watchedMemberRoom === room && this.watchedMemberUserId === userId) return;
+
+        this.teardownMemberListener();
+        this.watchedMemberRoom = room;
+        this.watchedMemberUserId = userId;
+
+        room.on(RoomStateEvent.Members, this.onRoomStateMember);
+        this.memberListenerCleanups.push(() => {
+            room.off(RoomStateEvent.Members, this.onRoomStateMember);
+        });
+    }
+
+    private teardownMemberListener(): void {
+        for (const cleanup of this.memberListenerCleanups) {
+            cleanup();
+        }
+        this.memberListenerCleanups = [];
+        this.watchedMemberRoom = undefined;
+        this.watchedMemberUserId = undefined;
+    }
+
+    private readonly onThreadUpdate = (): void => {
+        this.updateFromThreadSafely();
+    };
+
+    private readonly onEventContentChanged = (): void => {
+        this.updateFromThreadSafely();
+    };
+
+    private readonly onRoomStateMember = (_event: MatrixEvent, _state: RoomState, member: RoomMember): void => {
+        if (member.userId !== this.watchedMemberUserId) return;
+        this.updateProfileSnapshot();
+    };
+
+    private updateFromThreadSafely(): void {
+        void this.updateFromThread().catch((error) => {
+            logger.error("Failed to update thread preview", error);
+        });
+    }
+
+    private async updateFromThread(): Promise<void> {
+        const requestId = ++this.previewRequestId;
+        const lastReply = this.props.thread.replyToEvent ?? undefined;
+        this.eventContentListener.setEvent(lastReply, this.onEventContentChanged);
+        this.setupMemberListener(lastReply);
+
+        if (!lastReply) {
+            this.setHidden();
+            return;
+        }
+
+        await this.updateFromEvent(lastReply, requestId);
+    }
+
+    private async updateFromEvent(mxEvent: MatrixEvent, requestId: number): Promise<void> {
+        if (mxEvent.isRedacted()) {
+            this.setHidden();
+            return;
+        }
+
+        const baseSnapshot = this.computeBaseReplySnapshot(mxEvent);
+
+        if (mxEvent.isDecryptionFailure()) {
+            this.setDecryptionFailure(baseSnapshot);
+            return;
+        }
+
+        try {
+            await this.props.cli.decryptEventIfNeeded(mxEvent);
+        } catch (error) {
+            logger.error("Failed to decrypt thread preview event", error);
+            if (!this.isCurrentPreviewRequest(requestId, mxEvent)) return;
+
+            if (mxEvent.isDecryptionFailure()) {
+                this.setDecryptionFailure(baseSnapshot);
+            } else {
+                this.setHidden();
+            }
+            return;
+        }
+
+        if (!this.isCurrentPreviewRequest(requestId, mxEvent)) return;
+
+        if (mxEvent.isRedacted()) {
+            this.setHidden();
+            return;
+        }
+
+        if (mxEvent.isDecryptionFailure()) {
+            this.setDecryptionFailure(baseSnapshot);
+            return;
+        }
+
+        const preview = getEventPreviewContent(mxEvent, this.previewContentCache);
+        if (!preview) {
+            this.setHidden();
+            return;
+        }
+
+        this.snapshot.merge({
+            ...baseSnapshot,
+            ...preview,
+            isVisible: true,
+        });
+    }
+
+    private isCurrentPreviewRequest(requestId: number, mxEvent: MatrixEvent): boolean {
+        return !this.isDisposed && requestId === this.previewRequestId && this.props.thread.replyToEvent === mxEvent;
+    }
+
+    private computeBaseReplySnapshot(
+        mxEvent: MatrixEvent,
+    ): Pick<ThreadMessagePreviewViewSnapshot, "avatar" | "senderName" | "showDisplayName"> {
+        const member = ThreadMessagePreviewViewModel.getDisplayMember(this.props, mxEvent);
+        const sender = mxEvent.getSender() ?? "";
+        const senderName = member?.name ?? sender;
+        const avatar = ThreadMessagePreviewViewModel.computeAvatar(this.props, mxEvent, member);
+
+        return {
+            avatar: keepIfSame(this.snapshot.current.avatar, avatar),
+            senderName,
+            showDisplayName: this.props.showDisplayName,
+        };
+    }
+
+    private updateProfileSnapshot(): void {
+        const lastReply = this.props.thread.replyToEvent;
+        if (!lastReply || !this.snapshot.current.isVisible) return;
+
+        this.snapshot.merge(this.computeBaseReplySnapshot(lastReply));
+    }
+
+    private setDecryptionFailure(
+        baseSnapshot: Pick<ThreadMessagePreviewViewSnapshot, "avatar" | "senderName" | "showDisplayName">,
+    ): void {
+        const label = _t("timeline|decryption_failure|unable_to_decrypt");
+        this.snapshot.merge({
+            ...baseSnapshot,
+            previewContent: label,
+            previewTooltip: label,
+            isVisible: true,
+        });
+    }
+
+    private setHidden(): void {
+        this.snapshot.merge({
+            isVisible: false,
+            avatar: undefined,
+            senderName: undefined,
+            previewContent: undefined,
+            previewTooltip: undefined,
+            showDisplayName: this.props.showDisplayName,
+        });
+    }
+
+    private static getDisplayMember(
+        props: ThreadMessagePreviewViewModelProps,
+        mxEvent: MatrixEvent,
+    ): RoomMember | null | undefined {
+        const userId = ThreadMessagePreviewViewModel.getProfileUserId(mxEvent);
+        if (userId && ThreadMessagePreviewViewModel.shouldUseCurrentProfilesForProps(props)) {
+            const currentMember = ThreadMessagePreviewViewModel.getProfileRoomForProps(props)?.getMember(userId);
+            if (currentMember) return currentMember;
+        }
+
+        return mxEvent.sender;
+    }
+
+    private getProfileRoom(): Room | undefined {
+        return ThreadMessagePreviewViewModel.getProfileRoomForProps(this.props);
+    }
+
+    private shouldUseCurrentProfiles(): boolean {
+        return ThreadMessagePreviewViewModel.shouldUseCurrentProfilesForProps(this.props);
+    }
+
+    private static getProfileRoomForProps(props: ThreadMessagePreviewViewModelProps): Room | undefined {
+        return props.room ?? props.thread.room;
+    }
+
+    private static shouldUseCurrentProfilesForProps(props: ThreadMessagePreviewViewModelProps): boolean {
+        return props.useOnlyCurrentProfiles || THREAD_PROFILE_CONTEXTS.has(props.timelineRenderingType);
+    }
+
+    private static getProfileUserId(mxEvent?: MatrixEvent): string {
+        return mxEvent?.sender?.userId ?? mxEvent?.getSender() ?? "";
+    }
+
+    private static computeAvatar(
+        props: ThreadMessagePreviewViewModelProps,
+        mxEvent: MatrixEvent,
+        member: RoomMember | null | undefined,
+    ): ThreadMessagePreviewAvatar {
+        const fallbackUserId = mxEvent.getSender() ?? "";
+        const name = member?.name ?? fallbackUserId;
+        let src: string | undefined;
+        let title: string | undefined;
+
+        if (member?.name) {
+            const mxcAvatarUrl = member.getMxcAvatarUrl();
+            if (mxcAvatarUrl && !props.lowBandwidth) {
+                src =
+                    mediaFromMxc(mxcAvatarUrl, props.cli).getThumbnailOfSourceHttp(
+                        AVATAR_SIZE_PX,
+                        AVATAR_SIZE_PX,
+                        "crop",
+                    ) ?? undefined;
+            }
+
+            title =
+                UserIdentifierCustomisations.getDisplayUserIdentifier(member.userId, {
+                    roomId: member.roomId,
+                }) ?? fallbackUserId;
+        }
+
+        return {
+            className: props.avatarClassName,
+            id: member?.userId ?? fallbackUserId,
+            name,
+            src,
+            title,
+            label: _t("common|user_avatar"),
+        };
+    }
+}
+
+export interface ThreadSummaryViewModelProps extends Omit<ThreadMessagePreviewViewModelProps, "showDisplayName"> {
+    /**
+     * Thread root event opened by the summary.
+     */
+    mxEvent: MatrixEvent;
+    /**
+     * Whether the timeline is in narrow mode.
+     */
+    narrow: boolean;
+    /**
+     * Whether opening the thread should push a card.
+     */
+    isCard: boolean;
+}
+
+export class ThreadSummaryViewModel
+    extends BaseViewModel<ThreadSummaryViewSnapshot, ThreadSummaryViewModelProps>
+    implements ThreadSummaryViewModelInterface
+{
+    private listenerCleanups: Array<() => void> = [];
+    private readonly previewVm: ThreadMessagePreviewViewModel;
+
+    public constructor(props: ThreadSummaryViewModelProps) {
+        const previewVm = new ThreadMessagePreviewViewModel({
+            ...props,
+            showDisplayName: !props.narrow,
+        });
+
+        super(props, ThreadSummaryViewModel.computeSnapshot(props, previewVm));
+        this.previewVm = previewVm;
+        this.disposables.track(previewVm);
+        this.setupListeners();
+    }
+
+    public dispose(): void {
+        this.teardownListeners();
+        super.dispose();
+    }
+
+    public setRootEvent(mxEvent: MatrixEvent): void {
+        this.props = { ...this.props, mxEvent };
+    }
+
+    public setClient(cli: MatrixClient): void {
+        if (this.props.cli === cli) return;
+        this.props = { ...this.props, cli };
+        this.previewVm.setClient(cli);
+    }
+
+    public setThread(thread: Thread): void {
+        if (this.props.thread === thread) return;
+        this.props = { ...this.props, thread };
+        this.previewVm.setThread(thread);
+        this.setupListeners();
+        this.updateSnapshotFromProps();
+    }
+
+    public setRoom(room?: Room): void {
+        if (this.props.room === room) return;
+        this.props = { ...this.props, room };
+        this.previewVm.setRoom(room);
+    }
+
+    public setTimelineRenderingType(timelineRenderingType: TimelineRenderingType): void {
+        if (this.props.timelineRenderingType === timelineRenderingType) return;
+        this.props = { ...this.props, timelineRenderingType };
+        this.previewVm.setTimelineRenderingType(timelineRenderingType);
+    }
+
+    public setLowBandwidth(lowBandwidth?: boolean): void {
+        if (this.props.lowBandwidth === lowBandwidth) return;
+        this.props = { ...this.props, lowBandwidth };
+        this.previewVm.setLowBandwidth(lowBandwidth);
+    }
+
+    public setUseOnlyCurrentProfiles(useOnlyCurrentProfiles: boolean): void {
+        if (this.props.useOnlyCurrentProfiles === useOnlyCurrentProfiles) return;
+        this.props = { ...this.props, useOnlyCurrentProfiles };
+        this.previewVm.setUseOnlyCurrentProfiles(useOnlyCurrentProfiles);
+    }
+
+    public setNarrow(narrow: boolean): void {
+        this.props = { ...this.props, narrow };
+        this.previewVm.setShowDisplayName(!narrow);
+        this.snapshot.merge(ThreadSummaryViewModel.computeLayoutSnapshot(this.props));
+    }
+
+    public setIsCard(isCard: boolean): void {
+        this.props = { ...this.props, isCard };
+    }
+
+    public onClick = (event: MouseEvent<HTMLButtonElement>): void => {
+        defaultDispatcher.dispatch<ShowThreadPayload>({
+            action: Action.ShowThread,
+            rootEvent: this.props.mxEvent,
+            push: this.props.isCard,
+        });
+        PosthogTrackers.trackInteraction("WebRoomTimelineThreadSummaryButton", event);
+    };
+
+    private setupListeners(): void {
+        this.teardownListeners();
+
+        const { thread } = this.props;
+        const { room } = thread;
+        thread.on(ThreadEvent.Update, this.onThreadUpdate);
+        this.listenerCleanups.push(() => {
+            thread.off(ThreadEvent.Update, this.onThreadUpdate);
+        });
+
+        room.on(RoomEvent.UnreadNotifications, this.onRoomUnreadNotifications);
+        room.on(RoomEvent.Receipt, this.onNotificationChanged);
+        room.on(RoomEvent.Timeline, this.onNotificationChanged);
+        room.on(RoomEvent.Redaction, this.onNotificationChanged);
+        room.on(RoomEvent.LocalEchoUpdated, this.onNotificationChanged);
+        room.on(RoomEvent.MyMembership, this.onNotificationChanged);
+        this.listenerCleanups.push(() => {
+            room.off(RoomEvent.UnreadNotifications, this.onRoomUnreadNotifications);
+            room.off(RoomEvent.Receipt, this.onNotificationChanged);
+            room.off(RoomEvent.Timeline, this.onNotificationChanged);
+            room.off(RoomEvent.Redaction, this.onNotificationChanged);
+            room.off(RoomEvent.LocalEchoUpdated, this.onNotificationChanged);
+            room.off(RoomEvent.MyMembership, this.onNotificationChanged);
+        });
+    }
+
+    private teardownListeners(): void {
+        for (const cleanup of this.listenerCleanups) {
+            cleanup();
+        }
+        this.listenerCleanups = [];
+    }
+
+    private readonly onThreadUpdate = (): void => {
+        this.updateSnapshotFromProps();
+    };
+
+    private readonly onRoomUnreadNotifications = (
+        _unreadNotifications?: NotificationCount,
+        eventThreadId?: string,
+    ): void => {
+        if (eventThreadId && eventThreadId !== this.props.thread.id) return;
+        this.updateNotificationSnapshot();
+    };
+
+    private readonly onNotificationChanged = (): void => {
+        this.updateNotificationSnapshot();
+    };
+
+    private updateSnapshotFromProps(): void {
+        this.snapshot.merge({
+            ...ThreadSummaryViewModel.computeLayoutSnapshot(this.props),
+            notificationIndicator: ThreadSummaryViewModel.computeNotificationIndicator(this.props),
+        });
+    }
+
+    private updateNotificationSnapshot(): void {
+        this.snapshot.merge({
+            notificationIndicator: ThreadSummaryViewModel.computeNotificationIndicator(this.props),
+        });
+    }
+
+    private static computeSnapshot(
+        props: ThreadSummaryViewModelProps,
+        previewVm: ThreadMessagePreviewViewModel,
+    ): ThreadSummaryViewSnapshot {
+        return {
+            openThreadLabel: _t("threads|open_thread"),
+            previewVm,
+            notificationIndicator: ThreadSummaryViewModel.computeNotificationIndicator(props),
+            ...ThreadSummaryViewModel.computeLayoutSnapshot(props),
+        };
+    }
+
+    private static computeLayoutSnapshot(
+        props: ThreadSummaryViewModelProps,
+    ): Pick<ThreadSummaryViewSnapshot, "isVisible" | "replyCountLabel" | "narrow"> {
+        const count = props.thread.length;
+
+        return {
+            isVisible: count > 0,
+            replyCountLabel: props.narrow ? String(count) : _t("threads|count_of_reply", { count }),
+            narrow: props.narrow,
+        };
+    }
+
+    private static computeNotificationIndicator(
+        props: ThreadSummaryViewModelProps,
+    ): ThreadSummaryViewSnapshot["notificationIndicator"] {
+        const { level } = determineUnreadState(props.thread.room, props.thread.id, false);
+        return notificationLevelToIndicator(level);
+    }
+}
diff --git a/apps/web/test/viewmodels/audio/AudioPlayerViewModel-test.tsx b/apps/web/src/viewmodels/room/timeline/event-tile/body/AudioPlayerViewModel.test.ts
similarity index 74%
rename from apps/web/test/viewmodels/audio/AudioPlayerViewModel-test.tsx
rename to apps/web/src/viewmodels/room/timeline/event-tile/body/AudioPlayerViewModel.test.ts
index 4e4f6c6c91..cbb6514a3e 100644
--- a/apps/web/test/viewmodels/audio/AudioPlayerViewModel-test.tsx
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/body/AudioPlayerViewModel.test.ts
@@ -5,12 +5,16 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach } from "vitest";
+
 import { type ChangeEvent, type KeyboardEvent as ReactKeyboardEvent } from "react";
 import { waitFor } from "@testing-library/dom";
 
-import { type Playback, PlaybackState } from "../../../src/audio/Playback";
-import { AudioPlayerViewModel } from "../../../src/viewmodels/room/timeline/event-tile/body/AudioPlayerViewModel";
-import { MockedPlayback } from "../../unit-tests/audio/MockedPlayback";
+import { type Playback, PlaybackState } from "../../../../../audio/Playback";
+import { AudioPlayerViewModel } from "./AudioPlayerViewModel";
+import { MockedPlayback } from "../../../../../../test/unit-tests/audio/MockedPlayback";
 
 describe("AudioPlayerViewModel", () => {
     let playback: Playback;
@@ -45,7 +49,7 @@ describe("AudioPlayerViewModel", () => {
     });
 
     it("should has error=true when playback.prepare fails", async () => {
-        jest.spyOn(playback, "prepare").mockRejectedValue(new Error("Failed to prepare playback"));
+        vi.spyOn(playback, "prepare").mockRejectedValue(new Error("Failed to prepare playback"));
         const vm = new AudioPlayerViewModel({ playback, mediaName: "mediaName" });
         await waitFor(() => expect(vm.getSnapshot().error).toBe(true));
     });
@@ -65,6 +69,18 @@ describe("AudioPlayerViewModel", () => {
         expect(playback.skipTo).toHaveBeenCalledWith(10 + 5); // 5 seconds forward
     });
 
+    it("does not stop propagation for unhandled key down events", () => {
+        const vm = new AudioPlayerViewModel({ playback, mediaName: "mediaName" });
+        const event = new KeyboardEvent("keydown", { key: "a" });
+        const stopPropagationSpy = vi.spyOn(event, "stopPropagation");
+
+        vm.onKeyDown(event as unknown as ReactKeyboardEvent<HTMLDivElement>);
+
+        expect(stopPropagationSpy).not.toHaveBeenCalled();
+        expect(playback.toggle).not.toHaveBeenCalled();
+        expect(playback.skipTo).not.toHaveBeenCalled();
+    });
+
     it("should update snapshot when setProps is called with new mediaName", () => {
         const vm = new AudioPlayerViewModel({ playback, mediaName: "oldName" });
         expect(vm.getSnapshot().mediaName).toBe("oldName");
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/body/MjolnirBodyViewModel.ts b/apps/web/src/viewmodels/room/timeline/event-tile/body/MjolnirBodyViewModel.ts
index b64e554321..df68a52528 100644
--- a/apps/web/src/viewmodels/room/timeline/event-tile/body/MjolnirBodyViewModel.ts
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/body/MjolnirBodyViewModel.ts
@@ -5,8 +5,6 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { type MouseEvent } from "react";
-import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
 import {
     BaseViewModel,
     type MjolnirBodyViewModel as MjolnirBodyViewModelInterface,
@@ -14,14 +12,8 @@ import {
 } from "@element-hq/web-shared-components";
 
 export interface MjolnirBodyViewModelProps {
-    /**
-     * The event currently hidden by Mjolnir.
-     */
-    mxEvent: MatrixEvent;
-    /**
-     * Invoked after the event has been allowed so the tile can re-render.
-     */
-    onMessageAllowed?: () => void;
+    /** Invoked when the user chooses to show the hidden event. */
+    onAllow: () => void;
 }
 
 /**
@@ -37,29 +29,11 @@ export class MjolnirBodyViewModel
         super(props, MjolnirBodyViewModel.computeSnapshot());
     }
 
-    public setEvent(mxEvent: MatrixEvent): void {
-        if (this.props.mxEvent === mxEvent) return;
-
-        // The view has no event-derived render state; this only changes action inputs.
-        this.props = { ...this.props, mxEvent };
+    public setProps(props: MjolnirBodyViewModelProps): void {
+        this.props = props;
     }
 
-    public setOnMessageAllowed(onMessageAllowed: (() => void) | undefined): void {
-        if (this.props.onMessageAllowed === onMessageAllowed) return;
-
-        // The view has no callback-derived render state; this only changes action inputs.
-        this.props = { ...this.props, onMessageAllowed };
-    }
-
-    public onAllowClick = (event: MouseEvent<HTMLButtonElement>): void => {
-        event.preventDefault();
-        event.stopPropagation();
-
-        localStorage.setItem(this.localStorageKey, "true");
-        this.props.onMessageAllowed?.();
+    public onAllow = (): void => {
+        this.props.onAllow();
     };
-
-    private get localStorageKey(): string {
-        return `mx_mjolnir_render_${this.props.mxEvent.getRoomId()}__${this.props.mxEvent.getId()}`;
-    }
 }
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/body/TextualBodyViewModel.tsx b/apps/web/src/viewmodels/room/timeline/event-tile/body/TextualBodyViewModel.tsx
index b0d5b9baa5..1fca14c81f 100644
--- a/apps/web/src/viewmodels/room/timeline/event-tile/body/TextualBodyViewModel.tsx
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/body/TextualBodyViewModel.tsx
@@ -9,7 +9,6 @@ import React, { type MouseEvent } from "react";
 import { MatrixEventEvent, MsgType, type MatrixEvent } from "matrix-js-sdk/src/matrix";
 import {
     BaseViewModel,
-    LINKIFIED_DATA_ATTRIBUTE,
     TextualBodyViewBodyWrapperKind,
     TextualBodyViewKind,
     type TextualBodyViewModel as TextualBodyViewModelInterface,
@@ -278,10 +277,6 @@ export class TextualBodyViewModel
     public onRootClick = (event: MouseEvent<HTMLDivElement>): void => {
         let target: HTMLLinkElement | null = event.target as HTMLLinkElement;
 
-        if (target.dataset?.[LINKIFIED_DATA_ATTRIBUTE]) {
-            return;
-        }
-
         if (target.nodeName !== "A") {
             target = target.closest<HTMLLinkElement>("a");
         }
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/body/ViewSourceEventViewModel.ts b/apps/web/src/viewmodels/room/timeline/event-tile/body/ViewSourceEventViewModel.ts
new file mode 100644
index 0000000000..d574ee1572
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/body/ViewSourceEventViewModel.ts
@@ -0,0 +1,113 @@
+/*
+Copyright 2026 Element Creations Ltd.
+Copyright 2024 New Vector Ltd.
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type MouseEvent } from "react";
+import { type MatrixClient, type MatrixEvent, MatrixEventEvent } from "matrix-js-sdk/src/matrix";
+import {
+    BaseViewModel,
+    Disposables,
+    type ViewSourceEventViewModel as ViewSourceEventViewModelInterface,
+    type ViewSourceEventViewSnapshot,
+} from "@element-hq/web-shared-components";
+
+export interface ViewSourceEventViewModelProps {
+    /**
+     * The hidden event whose source is being rendered.
+     */
+    mxEvent: MatrixEvent;
+    /**
+     * Matrix client used to request decryption before rendering event source.
+     */
+    cli: MatrixClient;
+}
+
+/**
+ * ViewModel for hidden event source rendering.
+ */
+export class ViewSourceEventViewModel
+    extends BaseViewModel<ViewSourceEventViewSnapshot, ViewSourceEventViewModelProps>
+    implements ViewSourceEventViewModelInterface
+{
+    private decryptionListenerDisposables?: Disposables;
+
+    private static computeSnapshot(
+        { mxEvent }: ViewSourceEventViewModelProps,
+        expanded: boolean,
+    ): ViewSourceEventViewSnapshot {
+        return {
+            expanded,
+            preview: `{ "type": ${mxEvent.getType()} }`,
+            source: expanded ? ViewSourceEventViewModel.computeSource(mxEvent) : "",
+        };
+    }
+
+    private static computeSource(mxEvent: MatrixEvent): string {
+        return JSON.stringify(mxEvent, null, 4) ?? "";
+    }
+
+    public constructor(props: ViewSourceEventViewModelProps) {
+        super(props, ViewSourceEventViewModel.computeSnapshot(props, false));
+        this.disposables.track(() => this.removeDecryptionListener());
+        this.setupDecryptionListener();
+    }
+
+    public setProps(newProps: Partial<ViewSourceEventViewModelProps>): void {
+        const nextProps = { ...this.props, ...newProps };
+        const eventChanged = this.props.mxEvent !== nextProps.mxEvent;
+        const clientChanged = this.props.cli !== nextProps.cli;
+
+        if (!eventChanged && !clientChanged) return;
+
+        this.props = nextProps;
+
+        this.setupDecryptionListener();
+
+        if (eventChanged) {
+            this.updateSnapshotFromProps();
+        }
+    }
+
+    public onToggle = (event: MouseEvent<HTMLButtonElement>): void => {
+        event.preventDefault();
+
+        const expanded = !this.snapshot.current.expanded;
+        this.snapshot.merge({
+            expanded,
+            source: expanded ? ViewSourceEventViewModel.computeSource(this.props.mxEvent) : "",
+        });
+    };
+
+    private updateSnapshotFromProps(): void {
+        this.snapshot.merge(ViewSourceEventViewModel.computeSnapshot(this.props, this.snapshot.current.expanded));
+    }
+
+    private setupDecryptionListener(): void {
+        this.removeDecryptionListener();
+
+        const { cli, mxEvent } = this.props;
+        cli.decryptEventIfNeeded(mxEvent);
+
+        if (!mxEvent.isBeingDecrypted()) return;
+
+        const onDecrypted = (): void => {
+            this.removeDecryptionListener();
+            if (this.props.mxEvent !== mxEvent) return;
+
+            this.updateSnapshotFromProps();
+        };
+
+        this.decryptionListenerDisposables = new Disposables();
+        this.decryptionListenerDisposables.trackListener(mxEvent, MatrixEventEvent.Decrypted, onDecrypted);
+    }
+
+    private removeDecryptionListener(): void {
+        this.decryptionListenerDisposables?.dispose();
+        this.decryptionListenerDisposables = undefined;
+    }
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/call/RootCallTileViewModel.test.ts b/apps/web/src/viewmodels/room/timeline/event-tile/call/RootCallTileViewModel.test.ts
new file mode 100644
index 0000000000..4d05a579cf
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/call/RootCallTileViewModel.test.ts
@@ -0,0 +1,189 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+// @vitest-environment happy-dom
+
+import { it, describe, expect, vi } from "vitest";
+import { type EventTimeline, EventType, type MatrixEvent, type RoomState } from "matrix-js-sdk/src/matrix";
+import { EventEmitter } from "node:stream";
+
+import {
+    mkEvent,
+    mkMessage,
+    mkRoomMember,
+    mkStubRoom,
+    stubClient,
+    TestSDKContext,
+} from "../../../../../../test/test-utils";
+import { getMockedRtcNotificationEvent, MockedCall, MockedCallStore } from "./call-mocks";
+import { RootCallTileViewModel } from "./RootCallTileViewModel";
+import {
+    LatestRtcNotificationEventUpdate,
+    type LatestRtcNotificationEventStore,
+} from "../../../../../stores/LatestRtcNotificationEventStore";
+
+function getEvents(): MatrixEvent[] {
+    const message1 = mkMessage({
+        room: "!my-room:m.org",
+        user: "@alice:m.org",
+        event: true,
+        msg: "hello",
+    });
+
+    const message2 = mkMessage({
+        room: "!my-room:m.org",
+        user: "@bob:m.org",
+        event: true,
+        msg: "hello",
+    });
+
+    const oldRtcNotificationEvent = mkEvent({
+        type: EventType.RTCNotification,
+        id: "old-event",
+        content: {
+            "m.call.intent": "video",
+        },
+        user: "@alice:m.org",
+        event: true,
+    });
+
+    const latestRtcNotificationEvent = mkEvent({
+        type: EventType.RTCNotification,
+        id: "new-event",
+        content: {
+            "m.call.intent": "video",
+        },
+        user: "@bob:m.org",
+        event: true,
+    });
+    return [message1, message2, oldRtcNotificationEvent, latestRtcNotificationEvent];
+}
+
+function getMocked(userIds: string[]) {
+    const cli = stubClient();
+    const mxEvent = getMockedRtcNotificationEvent("audio", 100, 100);
+    mxEvent.getId = () => "new-event";
+
+    const call = MockedCall.create();
+    const callStore = MockedCallStore.create(call);
+
+    const members = userIds.map((id) => mkRoomMember("!my-room:m.org", id));
+
+    const room = mkStubRoom("!my-room:m.org", "My Room");
+    cli.getRoom = () => room;
+
+    vi.spyOn(room, "getMembers").mockReturnValue(members);
+
+    const events = getEvents();
+    vi.spyOn(room, "getLiveTimeline").mockImplementation(() => {
+        return {
+            getEvents: () => {
+                return events;
+            },
+            getState: (): RoomState => {
+                return {
+                    mayClientSendStateEvent: () => true,
+                } as unknown as RoomState;
+            },
+        } as unknown as EventTimeline;
+    });
+
+    const latestRtcNotificationEventStore = new EventEmitter() as unknown as LatestRtcNotificationEventStore;
+    latestRtcNotificationEventStore.getLatestEventId = () => undefined;
+
+    return { callStore, latestRtcNotificationEventStore, cli, mxEvent, call };
+}
+
+describe("RootCallTileViewModel", () => {
+    const sdkContext = new TestSDKContext();
+    const legacyCallHandler = sdkContext.legacyCallHandler;
+
+    it("computes correct tileType for ongoing call in DM", () => {
+        const { callStore, cli, mxEvent, latestRtcNotificationEventStore } = getMocked(["@alice:m.org", "@bob:m.org"]);
+        latestRtcNotificationEventStore.getLatestEventId = () => "new-event";
+        const vm = new RootCallTileViewModel({
+            latestRtcNotificationEventStore,
+            callStore,
+            cli,
+            mxEvent,
+            legacyCallHandler,
+        });
+
+        expect(vm.getSnapshot().tileType).toStrictEqual("ongoing-call-dm");
+    });
+
+    it("computes correct tileType for ongoing call in Room", () => {
+        const { callStore, cli, mxEvent, latestRtcNotificationEventStore } = getMocked([
+            "@alice:m.org",
+            "@bob:m.org",
+            "@jack:m.org",
+        ]);
+        latestRtcNotificationEventStore.getLatestEventId = () => "new-event";
+        const vm = new RootCallTileViewModel({
+            latestRtcNotificationEventStore,
+            callStore,
+            cli,
+            mxEvent,
+            legacyCallHandler,
+        });
+
+        expect(vm.getSnapshot().tileType).toStrictEqual("ongoing-call-room");
+    });
+
+    it("computes correct tileType for tombstone call in DM", () => {
+        // When there's an ongoing call
+        const { callStore, cli, mxEvent, latestRtcNotificationEventStore } = getMocked(["@alice:m.org", "@bob:m.org"]);
+        const vm = new RootCallTileViewModel({
+            latestRtcNotificationEventStore,
+            callStore,
+            cli,
+            mxEvent,
+            legacyCallHandler,
+        });
+
+        expect(vm.getSnapshot().tileType).toStrictEqual("tombstone-call-dm");
+    });
+
+    it("computes correct tileType for tombstone call in Room", () => {
+        // When there's an ongoing call
+        const { callStore, cli, mxEvent, latestRtcNotificationEventStore } = getMocked([
+            "@alice:m.org",
+            "@bob:m.org",
+            "@jack:m.org",
+        ]);
+        const vm = new RootCallTileViewModel({
+            latestRtcNotificationEventStore,
+            callStore,
+            cli,
+            mxEvent,
+            legacyCallHandler,
+        });
+        expect(vm.getSnapshot().tileType).toStrictEqual("tombstone-call-room");
+    });
+
+    it("recomputes snapshot on event from LatestRtcNotificationEventUpdate", () => {
+        // When there's an ongoing call
+        const { callStore, cli, mxEvent, latestRtcNotificationEventStore } = getMocked([
+            "@alice:m.org",
+            "@bob:m.org",
+            "@jack:m.org",
+        ]);
+        const vm = new RootCallTileViewModel({
+            latestRtcNotificationEventStore,
+            callStore,
+            cli,
+            mxEvent,
+            legacyCallHandler,
+        });
+        expect(vm.getSnapshot().tileType).toStrictEqual("tombstone-call-room");
+
+        // Tile type should update on event
+        latestRtcNotificationEventStore.getLatestEventId = () => "new-event";
+        latestRtcNotificationEventStore.emit(LatestRtcNotificationEventUpdate, "!my-room:m.org", "new-event");
+        expect(vm.getSnapshot().tileType).toStrictEqual("ongoing-call-room");
+    });
+});
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/call/RootCallTileViewModel.ts b/apps/web/src/viewmodels/room/timeline/event-tile/call/RootCallTileViewModel.ts
new file mode 100644
index 0000000000..46e3576894
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/call/RootCallTileViewModel.ts
@@ -0,0 +1,181 @@
+/*
+ * Copyright 2026 Element Creations 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 MatrixClient, type MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { BaseViewModel, type ViewModel, type RootCallTileViewSnapshot } from "@element-hq/web-shared-components";
+
+import type { GetRelationsForEvent } from "../../../../../components/views/rooms/EventTile";
+import { type CallStore, CallStoreEvent } from "../../../../../stores/CallStore";
+import { RoomOngoingCallTileViewModel } from "./tiles/ongoing/RoomOngoingCallTileViewModel";
+import { DmOngoingCallTileViewModel } from "./tiles/ongoing/DmOngoingCallTileViewModel";
+import { DmTombstoneCallTileViewModel } from "./tiles/tombstone/DmTombstoneCallTileViewModel";
+import { RoomTombstoneCallTileViewModel } from "./tiles/tombstone/RoomTombstoneCallTileViewModel";
+import {
+    LatestRtcNotificationEventUpdate,
+    type LatestRtcNotificationEventStore,
+} from "../../../../../stores/LatestRtcNotificationEventStore";
+import { JitsiCall } from "../../../../../models/Call";
+import type LegacyCallHandler from "../../../../../LegacyCallHandler.tsx";
+
+interface Props {
+    /**
+     * Event of type `org.matrix.msc4075.rtc.notification`.
+     */
+    mxEvent: MatrixEvent;
+
+    /**
+     * Helper to fetch related events from a given event.
+     */
+    getRelationsForEvent?: GetRelationsForEvent;
+
+    /**
+     * The {@link MatrixClient} object to access js-sdk API.
+     */
+    cli: MatrixClient;
+
+    /**
+     * {@link CallStore} to access calls in a room.
+     */
+    callStore: CallStore;
+
+    /**
+     * {@link LegacyCallHandler} to handle calls in a room.
+     */
+    legacyCallHandler: LegacyCallHandler;
+
+    /**
+     * {@link LatestRtcNotificationEventStore} to track the latest notification event id.
+     */
+    latestRtcNotificationEventStore: LatestRtcNotificationEventStore;
+}
+
+function computeSnapshot(props: Props): RootCallTileViewSnapshot {
+    const cli = props.cli;
+    const notificationEvent = props.mxEvent;
+
+    // Get the room where this call is taking place
+    const roomId = props.mxEvent.getRoomId();
+    if (!roomId) throw new Error("Notification event does not have associated room-id");
+    const room = cli.getRoom(roomId);
+    if (!room) throw new Error(`No room with id ${roomId}`);
+
+    const lastId = props.latestRtcNotificationEventStore.getLatestEventId(roomId);
+    const isLastNotificationEvent = lastId === notificationEvent.getId();
+    const isLocalEvent = notificationEvent.getId()?.startsWith("~");
+
+    // Check if there's an ongoing call
+    const call = props.callStore.getCall(roomId);
+    const hasOngoingCall = !!call && !(call instanceof JitsiCall);
+
+    // This is the same logic used for hiding/showing the voice call button.
+    const isDmRoom = room.getMembers().length <= 2;
+
+    /**
+     * We know we should render the ongoing tile if:
+     * - There's an ongoing call in this room
+     * - This is the last call tile in the room or a local call tile.
+     */
+    if ((isLastNotificationEvent || isLocalEvent) && hasOngoingCall) {
+        if (isDmRoom) {
+            return {
+                tileType: "ongoing-call-dm",
+                tileViewModel: new DmOngoingCallTileViewModel({
+                    mxEvent: notificationEvent,
+                    roomId,
+                    getRelationsForEvent: props.getRelationsForEvent,
+                    callStore: props.callStore,
+                    cli: props.cli,
+                    legacyCallHandler: props.legacyCallHandler,
+                }),
+            };
+        }
+        return {
+            tileType: "ongoing-call-room",
+            tileViewModel: new RoomOngoingCallTileViewModel({
+                roomId,
+                mxEvent: notificationEvent,
+                getRelationsForEvent: props.getRelationsForEvent,
+                callStore: props.callStore,
+                cli: props.cli,
+                legacyCallHandler: props.legacyCallHandler,
+            }),
+        };
+    }
+
+    if (isDmRoom) {
+        return {
+            tileType: "tombstone-call-dm",
+            tileViewModel: new DmTombstoneCallTileViewModel({
+                mxEvent: notificationEvent,
+                getRelationsForEvent: props.getRelationsForEvent,
+                cli: props.cli,
+            }),
+        };
+    } else
+        return {
+            tileType: "tombstone-call-room",
+            tileViewModel: new RoomTombstoneCallTileViewModel({ mxEvent: notificationEvent }),
+        };
+}
+
+/**
+ * The root call tile view model which decides what call tile should be rendered.
+ */
+export class RootCallTileViewModel extends BaseViewModel<RootCallTileViewSnapshot, Props> {
+    public constructor(props: Props) {
+        const snapshot = computeSnapshot(props);
+        super(props, snapshot);
+        this.trackViewModel(snapshot.tileViewModel);
+        this.addListener();
+    }
+
+    private addListener(): void {
+        // Recompute the state on changes to the call in this room
+        this.disposables.trackListener(
+            this.props.callStore,
+            CallStoreEvent.Call,
+            this.onCallStoreEvent as (...args: unknown[]) => void,
+        );
+
+        // Recompute the state when the latest rtc notification event in this room changes
+        this.disposables.trackListener(this.props.latestRtcNotificationEventStore, LatestRtcNotificationEventUpdate, ((
+            roomId: string,
+            eventId: string,
+        ) => {
+            if (roomId === this.props.mxEvent.getRoomId() && eventId === this.props.mxEvent.getId()) {
+                this.recomputeSnapshot();
+            }
+        }) as (...args: unknown[]) => void);
+    }
+
+    private onCallStoreEvent = (_: unknown, roomId: string): void => {
+        if (roomId === this.props.mxEvent.getRoomId()) {
+            this.recomputeSnapshot();
+        }
+    };
+
+    private recomputeSnapshot(): void {
+        const snapshot = computeSnapshot(this.props);
+        const currentTileType = this.getSnapshot().tileType;
+        if (currentTileType === snapshot.tileType) {
+            /**
+             * We're already rendering the correct vm if the tile type did not change.
+             * So dispose thew new vm and return.
+             */
+            (snapshot.tileViewModel as BaseViewModel<unknown, unknown>).dispose();
+            return;
+        }
+
+        this.trackViewModel(snapshot.tileViewModel);
+        this.snapshot.set(snapshot);
+    }
+
+    private trackViewModel(vm: ViewModel<unknown>): void {
+        // ViewModel type has no dispose method, so this needs a type assertion.
+        this.disposables.track(vm as BaseViewModel<unknown, unknown>);
+    }
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/call/call-mocks.ts b/apps/web/src/viewmodels/room/timeline/event-tile/call/call-mocks.ts
new file mode 100644
index 0000000000..23cc691d39
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/call/call-mocks.ts
@@ -0,0 +1,128 @@
+/*
+ * Copyright 2026 Element Creations 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 { EventEmitter } from "node:events";
+import { type RoomMember, type MatrixEvent, EventType } from "matrix-js-sdk/src/matrix";
+
+import { mkEvent, mkRoomMember } from "../../../../../../test/test-utils";
+import { type ElementCall } from "../../../../../models/Call";
+import type { CallStore } from "../../../../../stores/CallStore";
+import type { CallMembership, MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
+
+export function getMockedRtcNotificationEvent(
+    intent: string,
+    senderTs: number,
+    serverTs: number,
+    sender: string = "@foo:m.org",
+): MatrixEvent {
+    const mockEvent = mkEvent({
+        type: "org.matrix.msc4075.rtc.notification",
+        user: sender,
+        content: {
+            "m.call.intent": intent,
+            "sender_ts": senderTs,
+        },
+        ts: serverTs,
+        event: true,
+        room: "!my-room:m.org",
+    });
+    return mockEvent;
+}
+
+export function getMockedRtcDeclineEvent(rtcNotificationEvent: MatrixEvent, sender = "@foo:m.org"): MatrixEvent {
+    const mockEvent = mkEvent({
+        type: EventType.RTCDecline,
+        user: sender,
+        content: {
+            "m.relates_to": {
+                rel_type: "m.reference",
+                event_id: rtcNotificationEvent.getId(),
+            },
+        },
+        ts: 924285416000,
+        event: true,
+    });
+    return mockEvent;
+}
+
+export function getMockedMember(roomId: string, userId: string, name: string): RoomMember {
+    const member = mkRoomMember(roomId, userId);
+    member.name = name;
+    return member;
+}
+
+interface MockCallStoreType extends CallStore {
+    withActiveCall(): this;
+    isActiveCall: boolean;
+    call: ElementCall | null;
+}
+
+export class MockedCallStore extends EventEmitter {
+    public isActiveCall: boolean = false;
+
+    public constructor(public call: ElementCall | null) {
+        super();
+    }
+
+    public static create(call: ElementCall | null): MockCallStoreType {
+        return new MockedCallStore(call) as unknown as MockCallStoreType;
+    }
+
+    public withActiveCall(): this {
+        this.isActiveCall = true;
+        return this;
+    }
+
+    public getCall(): ElementCall | null {
+        return this.call;
+    }
+
+    public getActiveCall(): ElementCall | null {
+        if (this.isActiveCall) return this.getCall();
+        return null;
+    }
+}
+
+interface MockCallType extends ElementCall {
+    withOldestMembershipTs(ts: number): this;
+    withParticipants(participants: RoomMember[]): this;
+}
+
+export class MockedCall extends EventEmitter {
+    public participantMap = new Map<RoomMember, Set<string>>();
+    public createdTs: number = Date.now();
+
+    public static create(): MockCallType {
+        return new MockedCall() as unknown as MockCallType;
+    }
+
+    public withOldestMembershipTs(ts: number): this {
+        this.createdTs = ts;
+        return this;
+    }
+
+    public withParticipants(participants: RoomMember[]): this {
+        for (const participant of participants) {
+            this.participantMap.set(participant, new Set());
+        }
+        return this;
+    }
+
+    public get participants(): Map<RoomMember, Set<string>> {
+        return this.participantMap;
+    }
+
+    public get session(): MatrixRTCSession {
+        return {
+            getOldestMembership: (): CallMembership => {
+                return {
+                    createdTs: () => this.createdTs,
+                } as CallMembership;
+            },
+        } as MatrixRTCSession;
+    }
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/call/common.ts b/apps/web/src/viewmodels/room/timeline/event-tile/call/common.ts
new file mode 100644
index 0000000000..ce2e390d9c
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/call/common.ts
@@ -0,0 +1,44 @@
+/*
+ * Copyright 2026 Element Creations 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 { CallType } from "@element-hq/web-shared-components";
+import { EventType, RelationType, type MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { type IRTCNotificationContent } from "matrix-js-sdk/src/matrixrtc";
+
+import { type GetRelationsForEvent } from "../../../../../components/views/rooms/EventTile";
+
+/**
+ * Find the call intent from a given rtc notification event.
+ * @param event Rtc notification event
+ */
+export function getIntentFromEvent(event: MatrixEvent): CallType {
+    const content = event.getContent<IRTCNotificationContent>();
+    const intentInContent = content["m.call.intent"];
+    switch (intentInContent) {
+        case "audio":
+            return CallType.Voice;
+        case "video":
+        default:
+            return CallType.Video;
+    }
+}
+
+/**
+ * Get all declined events that is related to the given rtc notification event.
+ * @param event rtc notification event
+ */
+export function getDeclinedEvents(
+    event: MatrixEvent,
+    getRelationsForEvent?: GetRelationsForEvent,
+): MatrixEvent[] | null {
+    const eventId = event.getId();
+    if (eventId && getRelationsForEvent) {
+        const relations = getRelationsForEvent(eventId, RelationType.Reference, EventType.RTCDecline)?.getRelations();
+        if (relations) return relations;
+    }
+    return null;
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/ongoing/BaseOngoingCallTileViewModel.test.ts b/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/ongoing/BaseOngoingCallTileViewModel.test.ts
new file mode 100644
index 0000000000..29c9a3509e
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/ongoing/BaseOngoingCallTileViewModel.test.ts
@@ -0,0 +1,162 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+// @vitest-environment happy-dom
+
+import { it, describe, expect, vi } from "vitest";
+import { CallDirection, CallType } from "@element-hq/web-shared-components";
+
+import { BaseOngoingCallViewModel } from "./BaseOngoingCallTileViewModel";
+import { mkRoom, stubClient } from "../../../../../../../../test/test-utils";
+import { CallEvent } from "../../../../../../../models/Call";
+import type { RootCallTileViewModel } from "../../RootCallTileViewModel";
+import { getMockedMember, getMockedRtcNotificationEvent, MockedCall, MockedCallStore } from "../../call-mocks";
+import type { EventTimeline, RoomState } from "matrix-js-sdk/src/matrix";
+import { placeCall } from "../../../../../../../utils/room/placeCall";
+import { PlatformCallType } from "../../../../../../../hooks/room/useRoomCall";
+import { SDKContextClass } from "../../../../../../../contexts/SDKContextClass.ts";
+
+/**
+ * There's a nasty circular dependency in useRoomCall so that we end up with:
+ * BaseOngoingCallViewModel -> useRoomCall -> ... -> EventTileFactory
+ * -> RootCallTileViewModel -> RoomOngoingCallTileViewModel -> BaseOngoingCallViewModel
+ */
+//@ts-ignore
+vi.mock(import("../../RootCallTileViewModel"), () => {
+    return {
+        RootCallTileViewModel: class {} as unknown as RootCallTileViewModel,
+    };
+});
+
+vi.mock(import("../../../../../../../utils/room/placeCall"), () => {
+    return {
+        placeCall: vi.fn(),
+    };
+});
+
+const roomId = "!my-room:m.org";
+
+describe("BaseOngoingCallViewModel", () => {
+    const legacyCallHandler = SDKContextClass.instance.legacyCallHandler;
+
+    describe("should compute the correct snapshot", () => {
+        it("startedByDisplayName", () => {
+            const cli = stubClient();
+
+            const mxEvent = getMockedRtcNotificationEvent("audio", 100, 100);
+            mxEvent.sender = getMockedMember(roomId, "@alice:m.org", "Alice");
+
+            const call = MockedCall.create();
+            const callStore = MockedCallStore.create(call);
+
+            const vm = new BaseOngoingCallViewModel({ mxEvent, cli, callStore, roomId, legacyCallHandler });
+            expect(vm.getSnapshot().startedByDisplayName).toStrictEqual("Alice");
+        });
+
+        it("isJoined", () => {
+            const cli = stubClient();
+
+            const mxEvent = getMockedRtcNotificationEvent("audio", 100, 100);
+            mxEvent.sender = getMockedMember(roomId, "@alice:m.org", "Alice");
+
+            const bob = getMockedMember(roomId, "@bob:m.org", "Bob");
+            const call = MockedCall.create().withParticipants([bob]);
+            const callStore = MockedCallStore.create(call);
+
+            // Alice hasn't joined the call yet
+            const vm = new BaseOngoingCallViewModel({ mxEvent, cli, callStore, roomId, legacyCallHandler });
+            expect(vm.getSnapshot().isJoined).toStrictEqual(false);
+
+            // Alice has joined call
+            callStore.withActiveCall();
+            call.withParticipants([mxEvent.sender, bob]);
+            call.emit(CallEvent.Participants, call.participants, new Map());
+            expect(vm.getSnapshot().isJoined).toStrictEqual(true);
+        });
+
+        it("callDirection", () => {
+            const cli = stubClient();
+            vi.spyOn(cli, "getUserId").mockReturnValue("@bob:m.org");
+
+            const mxEvent = getMockedRtcNotificationEvent("audio", 100, 100, "@alice:m.org");
+            mxEvent.sender = getMockedMember(roomId, "@alice:m.org", "Alice");
+
+            const call = MockedCall.create();
+            const callStore = MockedCallStore.create(call);
+
+            const vm1 = new BaseOngoingCallViewModel({ mxEvent, cli, callStore, roomId, legacyCallHandler });
+            expect(vm1.getSnapshot().callDirection).toStrictEqual(CallDirection.Incoming);
+
+            vi.spyOn(cli, "getUserId").mockReturnValue("@alice:m.org");
+            const vm2 = new BaseOngoingCallViewModel({ mxEvent, cli, callStore, roomId, legacyCallHandler });
+            expect(vm2.getSnapshot().callDirection).toStrictEqual(CallDirection.Outgoing);
+        });
+
+        it("callHasOtherParticipants", () => {
+            const cli = stubClient();
+
+            const mxEvent = getMockedRtcNotificationEvent("audio", 100, 100);
+            mxEvent.sender = getMockedMember(roomId, "@alice:m.org", "Alice");
+
+            const call = MockedCall.create().withParticipants([mxEvent.sender]);
+            const callStore = MockedCallStore.create(call);
+
+            // Call has no other participants other than alice
+            const vm = new BaseOngoingCallViewModel({ mxEvent, cli, callStore, roomId, legacyCallHandler });
+            expect(vm.getSnapshot().callHasOtherParticipants).toStrictEqual(false);
+
+            // Let's say others join
+            const bob = getMockedMember(roomId, "@bob:m.org", "Bob");
+            const james = getMockedMember(roomId, "@james:m.org", "James");
+            call.withParticipants([mxEvent.sender, bob, james]);
+            call.emit(CallEvent.Participants, call.participants, new Map());
+            expect(vm.getSnapshot().callHasOtherParticipants).toStrictEqual(true);
+        });
+
+        it("isJoinable", () => {
+            const cli = stubClient();
+            const room = mkRoom(cli, roomId);
+            // @ts-ignore
+            room.getLiveTimeline = (): EventTimeline => {
+                return {
+                    getState: (): RoomState => {
+                        return {
+                            mayClientSendStateEvent: () => true,
+                        } as unknown as RoomState;
+                    },
+                } as unknown as EventTimeline;
+            };
+            cli.getRoom = () => room;
+
+            const mxEvent = getMockedRtcNotificationEvent("audio", 100, 100);
+            mxEvent.sender = getMockedMember(roomId, "@alice:m.org", "Alice");
+
+            const call = MockedCall.create();
+            const callStore = MockedCallStore.create(call);
+
+            const vm = new BaseOngoingCallViewModel({ mxEvent, cli, callStore, roomId, legacyCallHandler });
+            expect(vm.getSnapshot().isJoinable).toStrictEqual(true);
+        });
+    });
+
+    it("should join call on join()", () => {
+        const cli = stubClient();
+
+        const mxEvent = getMockedRtcNotificationEvent("video", 100, 100);
+        mxEvent.sender = getMockedMember(roomId, "@alice:m.org", "Alice");
+
+        const call = MockedCall.create().withParticipants([mxEvent.sender]);
+        const callStore = MockedCallStore.create(call);
+        const vm = new BaseOngoingCallViewModel({ mxEvent, cli, callStore, roomId, legacyCallHandler });
+
+        vm.join();
+        const [, room, callType, platformCallType] = vi.mocked(placeCall).mock.calls[0];
+        expect(room.roomId).toStrictEqual(roomId);
+        expect(callType).toStrictEqual(CallType.Video);
+        expect(platformCallType).toStrictEqual(PlatformCallType.ElementCall);
+    });
+});
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/ongoing/BaseOngoingCallTileViewModel.ts b/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/ongoing/BaseOngoingCallTileViewModel.ts
new file mode 100644
index 0000000000..6833663223
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/ongoing/BaseOngoingCallTileViewModel.ts
@@ -0,0 +1,196 @@
+/*
+ * Copyright 2026 Element Creations 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 {
+    BaseViewModel,
+    CallDirection,
+    CallType as SharedComponentsCallType,
+    type CommonOngoingCallTileViewSnapshot,
+} from "@element-hq/web-shared-components";
+import {
+    EventTimeline,
+    EventType,
+    type RoomMember,
+    type MatrixEvent,
+    type MatrixClient,
+} from "matrix-js-sdk/src/matrix";
+import { CallType } from "matrix-js-sdk/src/webrtc/call";
+
+import { type CallStore } from "../../../../../../../stores/CallStore";
+import { MemberAvatarViewModel } from "../../../../../../../components/viewmodels/avatars/MemberAvatarViewModel";
+import { FacePileViewModel } from "../../../../../../../components/viewmodels/avatars/FacePileViewModel";
+import { CallEvent, type ElementCall } from "../../../../../../../models/Call";
+import { placeCall } from "../../../../../../../utils/room/placeCall";
+import { PlatformCallType } from "../../../../../../../hooks/room/useRoomCall";
+import { type GetRelationsForEvent } from "../../../../../../../components/views/rooms/EventTile";
+import { getIntentFromEvent } from "../../common";
+import { DurationViewModel } from "./components/DurationViewModel";
+import type LegacyCallHandler from "../../../../../../../LegacyCallHandler.tsx";
+
+export interface Props {
+    /**
+     * The id of the room.
+     */
+    roomId: string;
+    /**
+     * Event of type `org.matrix.msc4075.rtc.notification`.
+     */
+    mxEvent: MatrixEvent;
+    /**
+     * Helper to fetch related events from a given event.
+     */
+    getRelationsForEvent?: GetRelationsForEvent;
+    /**
+     * The {@link MatrixClient} object to access js-sdk API.
+     */
+    cli: MatrixClient;
+    /**
+     * {@link CallStore} to access calls in a room.
+     */
+    callStore: CallStore;
+    /**
+     * {@link LegacyCallHandler} to handle calls in a room.
+     */
+    legacyCallHandler: LegacyCallHandler;
+}
+
+function getCallOrThrow(store: CallStore, roomId: string): ElementCall {
+    const call = store.getCall(roomId);
+    if (!call) {
+        throw new Error(`No call in room ${roomId}`);
+    }
+    return call as ElementCall;
+}
+
+/**
+ * Whether this call has participants other than who started the call.
+ */
+function doesCallHaveOtherParticipants(notificationEvent: MatrixEvent, participants: RoomMember[]): boolean {
+    return Array.from(participants).some((participant) => participant.userId !== notificationEvent.sender?.userId);
+}
+
+function computeSnapshot(props: Props): CommonOngoingCallTileViewSnapshot {
+    const mxEvent = props.mxEvent;
+    const callStore = props.callStore;
+    const cli = props.cli;
+    const roomId = mxEvent.getRoomId();
+    if (!roomId) {
+        throw new Error("RTCNotification event has no room associated with it!");
+    }
+
+    // Get the call in the room
+    const call = getCallOrThrow(callStore, roomId);
+
+    // Find the mx-id of the user who started this call
+    const startedUserId = mxEvent.getSender();
+    if (!startedUserId) {
+        throw new Error("RTCNotification event has no sender associated with it!");
+    }
+
+    // Get room-member from mx-id
+    const participants = Array.from(call.participants.keys());
+    const callHasOtherParticipants = doesCallHaveOtherParticipants(props.mxEvent, participants);
+
+    const room = cli.getRoom(roomId);
+    if (!room) {
+        throw new Error(`Cannot find room ${roomId}`);
+    }
+
+    const startedMember = mxEvent.sender;
+    if (!startedMember) {
+        // This should never happen but just to be safe ...
+        throw new Error("Event does not have a sender!");
+    }
+    const startedByDisplayName = startedMember.name;
+
+    // We know we're joined to this call if there's an active call in the room
+    const isJoined = !!callStore.getActiveCall(roomId);
+
+    const callDirection = cli.getUserId() === startedUserId ? CallDirection.Outgoing : CallDirection.Incoming;
+
+    // Create the avatar vms
+    const facePileViewModel = new FacePileViewModel({ size: 20, members: participants, cli });
+    const memberAvatarViewModel = new MemberAvatarViewModel({ member: startedMember, size: 20, cli });
+
+    const isJoinable = !!room
+        .getLiveTimeline()
+        .getState(EventTimeline.FORWARDS)
+        ?.mayClientSendStateEvent(EventType.GroupCallMemberPrefix, room.client);
+
+    const callStartTs = call.session.getOldestMembership()?.createdTs();
+    let durationViewModel: DurationViewModel | undefined;
+    if (callStartTs) {
+        durationViewModel = new DurationViewModel({ callStartTs });
+    }
+
+    return {
+        startedByDisplayName,
+        isJoined,
+        isJoinable,
+        facePileViewModel,
+        memberAvatarViewModel,
+        callDirection,
+        durationViewModel,
+        callHasOtherParticipants,
+    };
+}
+
+/**
+ * A base view model for an ongoing call in the timeline.
+ */
+export class BaseOngoingCallViewModel<
+    T extends CommonOngoingCallTileViewSnapshot = CommonOngoingCallTileViewSnapshot,
+> extends BaseViewModel<T, Props> {
+    public constructor(props: Props, extraSnapshot: Partial<T> = {}) {
+        const snapshot = { ...computeSnapshot(props), ...extraSnapshot };
+        super(props, snapshot as T);
+        this.disposables.track(snapshot.facePileViewModel as BaseViewModel<unknown, unknown>);
+        this.disposables.track(snapshot.memberAvatarViewModel as BaseViewModel<unknown, unknown>);
+        this.setupListener();
+    }
+
+    private setupListener(): void {
+        const call = getCallOrThrow(this.props.callStore, this.props.roomId);
+        this.disposables.trackListener(call, CallEvent.Participants, ((participants: Map<RoomMember, Set<string>>) => {
+            this.onParticipantsChange(participants);
+        }) as (...args: unknown[]) => void);
+    }
+
+    /**
+     * Join the call associated with this tile.
+     * @param event The button click event
+     */
+    public join(event?: React.MouseEvent<HTMLButtonElement>): void {
+        const roomId = this.props.roomId;
+        const room = this.props.cli.getRoom(roomId);
+        if (!room) {
+            throw new Error(`Cannot find room ${roomId}`);
+        }
+        const callType = getIntentFromEvent(this.props.mxEvent);
+        const type = callType === SharedComponentsCallType.Voice ? CallType.Voice : CallType.Video;
+        placeCall(
+            this.props.legacyCallHandler,
+            room,
+            type,
+            PlatformCallType.ElementCall,
+            event?.shiftKey || undefined,
+            type === CallType.Voice,
+        );
+    }
+
+    /**
+     * Recomputes the snapshot when the call participants are updated.
+     */
+    protected onParticipantsChange(participants: Map<RoomMember, Set<string>>, extraSnapshot: Partial<T> = {}): void {
+        const roomId = this.props.roomId;
+        const isJoined = !!this.props.callStore.getActiveCall(roomId);
+        const members = Array.from(participants.keys());
+        const callHasOtherParticipants = doesCallHaveOtherParticipants(this.props.mxEvent, members);
+        (this.getSnapshot().facePileViewModel as FacePileViewModel).updateMembers(members);
+        this.snapshot.merge({ isJoined, callHasOtherParticipants, ...extraSnapshot });
+    }
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/ongoing/DmOngoingCallTileViewModel.test.ts b/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/ongoing/DmOngoingCallTileViewModel.test.ts
new file mode 100644
index 0000000000..d41417b72b
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/ongoing/DmOngoingCallTileViewModel.test.ts
@@ -0,0 +1,52 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+// @vitest-environment happy-dom
+
+import { it, describe, expect } from "vitest";
+import { CallType } from "@element-hq/web-shared-components";
+
+import { stubClient, TestSDKContext } from "../../../../../../../../test/test-utils";
+import { getMockedMember, getMockedRtcNotificationEvent, MockedCall, MockedCallStore } from "../../call-mocks";
+import { DmOngoingCallTileViewModel } from "./DmOngoingCallTileViewModel";
+
+const roomId = "!my-room:m.org";
+
+describe("DmOngoingCallTileViewModel", () => {
+    const sdkContext = new TestSDKContext();
+    const legacyCallHandler = sdkContext.legacyCallHandler;
+
+    describe("should compute the correct snapshot", () => {
+        describe("callType", () => {
+            it("voice", () => {
+                const cli = stubClient();
+
+                const mxEvent = getMockedRtcNotificationEvent("audio", 100, 100);
+                mxEvent.sender = getMockedMember(roomId, "@alice:m.org", "Alice");
+
+                const call = MockedCall.create().withParticipants([mxEvent.sender]);
+                const callStore = MockedCallStore.create(call);
+                const vm = new DmOngoingCallTileViewModel({ mxEvent, cli, callStore, roomId, legacyCallHandler });
+
+                expect(vm.getSnapshot().callType).toStrictEqual(CallType.Voice);
+            });
+
+            it("video", () => {
+                const cli = stubClient();
+
+                const mxEvent = getMockedRtcNotificationEvent("video", 100, 100);
+                mxEvent.sender = getMockedMember(roomId, "@alice:m.org", "Alice");
+
+                const call = MockedCall.create().withParticipants([mxEvent.sender]);
+                const callStore = MockedCallStore.create(call);
+                const vm = new DmOngoingCallTileViewModel({ mxEvent, cli, callStore, roomId, legacyCallHandler });
+
+                expect(vm.getSnapshot().callType).toStrictEqual(CallType.Video);
+            });
+        });
+    });
+});
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/ongoing/DmOngoingCallTileViewModel.ts b/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/ongoing/DmOngoingCallTileViewModel.ts
new file mode 100644
index 0000000000..0cb16e21cf
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/ongoing/DmOngoingCallTileViewModel.ts
@@ -0,0 +1,27 @@
+/*
+ * Copyright 2026 Element Creations 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 CommonOngoingCallTileViewAction,
+    type DmOngoingCallTileViewSnapshot,
+} from "@element-hq/web-shared-components";
+
+import { type Props, BaseOngoingCallViewModel } from "./BaseOngoingCallTileViewModel";
+import { getIntentFromEvent } from "../../common";
+
+/**
+ * View model for an ongoing call in a DM room.
+ */
+export class DmOngoingCallTileViewModel
+    extends BaseOngoingCallViewModel<DmOngoingCallTileViewSnapshot>
+    implements CommonOngoingCallTileViewAction
+{
+    public constructor(props: Props) {
+        const callType = getIntentFromEvent(props.mxEvent);
+        super(props, { callType });
+    }
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/ongoing/RoomOngoingCallTileViewModel.test.ts b/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/ongoing/RoomOngoingCallTileViewModel.test.ts
new file mode 100644
index 0000000000..505e34ccda
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/ongoing/RoomOngoingCallTileViewModel.test.ts
@@ -0,0 +1,86 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+// @vitest-environment happy-dom
+
+import { it, describe, expect, vi } from "vitest";
+import { EventType, MatrixEventEvent } from "matrix-js-sdk/src/matrix";
+
+import { stubClient, TestSDKContext } from "../../../../../../../../test/test-utils";
+import {
+    getMockedMember,
+    getMockedRtcDeclineEvent,
+    getMockedRtcNotificationEvent,
+    MockedCall,
+    MockedCallStore,
+} from "../../call-mocks";
+import { RoomOngoingCallTileViewModel } from "./RoomOngoingCallTileViewModel";
+import { CallEvent } from "../../../../../../../models/Call";
+
+const roomId = "!my-room:m.org";
+
+describe("RoomOngoingCallTileViewModel", () => {
+    const sdkContext = new TestSDKContext();
+    const legacyCallHandler = sdkContext.legacyCallHandler;
+
+    describe("should compute the correct snapshot", () => {
+        it("totalParticipants", () => {
+            const cli = stubClient();
+
+            const mxEvent = getMockedRtcNotificationEvent("audio", 100, 100);
+            mxEvent.sender = getMockedMember(roomId, "@alice:m.org", "Alice");
+
+            const bob = getMockedMember(roomId, "@bob:m.org", "Bob");
+            const james = getMockedMember(roomId, "@james:m.org", "James");
+            const call = MockedCall.create().withParticipants([mxEvent.sender, bob, james]);
+            const callStore = MockedCallStore.create(call);
+            const vm = new RoomOngoingCallTileViewModel({ mxEvent, cli, callStore, roomId, legacyCallHandler });
+
+            // Call has 3 participants now
+            expect(vm.getSnapshot().totalParticipants).toStrictEqual(3);
+
+            // Peter also joins the call
+            const peter = getMockedMember(roomId, "@peter:m.org", "Peter");
+            call.withParticipants([mxEvent.sender, bob, james, peter]);
+            call.emit(CallEvent.Participants, call.participants, new Map());
+
+            // Now there should be 4 participants
+            expect(vm.getSnapshot().totalParticipants).toStrictEqual(4);
+        });
+
+        it("isCallIgnored", () => {
+            const cli = stubClient();
+            vi.spyOn(cli, "getUserId").mockReturnValue("@alice:m.org");
+            const getRelationsForEvent = vi.fn();
+
+            const mxEvent = getMockedRtcNotificationEvent("audio", 100, 100);
+            mxEvent.sender = getMockedMember(roomId, "@alice:m.org", "Alice");
+
+            const call = MockedCall.create().withParticipants([mxEvent.sender]);
+            const callStore = MockedCallStore.create(call);
+            const vm = new RoomOngoingCallTileViewModel({
+                mxEvent,
+                cli,
+                callStore,
+                roomId,
+                getRelationsForEvent,
+                legacyCallHandler,
+            });
+
+            // Call hasn't been ignored yet
+            expect(vm.getSnapshot().isCallIgnored).toStrictEqual(false);
+
+            // Ignore the call
+            const declineEvent = getMockedRtcDeclineEvent(mxEvent, "@alice:m.org");
+            getRelationsForEvent.mockReturnValue({ getRelations: () => [declineEvent] });
+            mxEvent.emit(MatrixEventEvent.RelationsCreated, "m.reference", EventType.RTCDecline);
+
+            // Call should be ignored
+            expect(vm.getSnapshot().isCallIgnored).toStrictEqual(true);
+        });
+    });
+});
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/ongoing/RoomOngoingCallTileViewModel.ts b/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/ongoing/RoomOngoingCallTileViewModel.ts
new file mode 100644
index 0000000000..315d71add5
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/ongoing/RoomOngoingCallTileViewModel.ts
@@ -0,0 +1,71 @@
+/*
+ * Copyright 2026 Element Creations 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 CommonOngoingCallTileViewAction,
+    type RoomOngoingCallTileViewSnapshot,
+} from "@element-hq/web-shared-components";
+import { MatrixEventEvent, type MatrixEvent, type RoomMember, type MatrixClient } from "matrix-js-sdk/src/matrix";
+
+import { type Props, BaseOngoingCallViewModel } from "./BaseOngoingCallTileViewModel";
+import { getDeclinedEvents } from "../../common";
+import { type GetRelationsForEvent } from "../../../../../../../components/views/rooms/EventTile";
+
+/**
+ * Check if this call is declined by our user.
+ */
+function isCallDeclinedByOwnUser(
+    notificationEvent: MatrixEvent,
+    getRelationsForEvent: GetRelationsForEvent | undefined,
+    cli: MatrixClient,
+): boolean {
+    const declinedEvents = getDeclinedEvents(notificationEvent, getRelationsForEvent);
+    const ownUserId = cli.getUserId();
+    return declinedEvents?.some((event) => event.getSender() === ownUserId) ?? false;
+}
+
+/**
+ * View model for an ongoing call in a non DM room.
+ */
+export class RoomOngoingCallTileViewModel
+    extends BaseOngoingCallViewModel<RoomOngoingCallTileViewSnapshot>
+    implements CommonOngoingCallTileViewAction
+{
+    public constructor(props: Props) {
+        // Get the call in the room
+        const call = props.callStore.getCall(props.roomId);
+        if (!call) {
+            throw new Error(`No call in room ${props.roomId}`);
+        }
+        const totalParticipants = call.participants.size;
+        const isCallDeclined = isCallDeclinedByOwnUser(props.mxEvent, props.getRelationsForEvent, props.cli);
+        super(props, { totalParticipants, isCallIgnored: isCallDeclined });
+
+        // When a relation is added to the event, recompute the state.
+        this.disposables.trackListener(props.mxEvent, MatrixEventEvent.RelationsCreated, () => {
+            this.onRelationsCreated();
+        });
+    }
+
+    /**
+     * Recompute the snapshot when a relation is added to the notification event.
+     * We do this so that we know if our user has declined (ignored) this call.
+     */
+    private onRelationsCreated(): void {
+        const isCallIgnored = isCallDeclinedByOwnUser(
+            this.props.mxEvent,
+            this.props.getRelationsForEvent,
+            this.props.cli,
+        );
+        this.snapshot.merge({ isCallIgnored });
+    }
+
+    protected onParticipantsChange(participants: Map<RoomMember, Set<string>>): void {
+        const totalParticipants = participants.size;
+        super.onParticipantsChange(participants, { totalParticipants });
+    }
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/ongoing/components/DurationViewModel.test.ts b/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/ongoing/components/DurationViewModel.test.ts
new file mode 100644
index 0000000000..316a3e8edb
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/ongoing/components/DurationViewModel.test.ts
@@ -0,0 +1,33 @@
+/*
+ * Copyright 2026 Element Creations 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 { describe, it, beforeEach, afterEach, vi, expect } from "vitest";
+
+import { DurationViewModel } from "./DurationViewModel";
+
+describe("DurationViewModel", () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+    });
+
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it("should compute duration correctly", () => {
+        const callStartTs = Date.now();
+        vi.advanceTimersByTime(100 * 1000);
+        const vm = new DurationViewModel({ callStartTs });
+
+        // Time elapsed from callStartTs is 100 seconds, so expect duration to be 100
+        expect(vm.getSnapshot().duration).toStrictEqual(100);
+
+        // Snapshot must update as time goes on
+        vi.advanceTimersByTime(100 * 1000);
+        expect(vm.getSnapshot().duration).toStrictEqual(200);
+    });
+});
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/ongoing/components/DurationViewModel.ts b/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/ongoing/components/DurationViewModel.ts
new file mode 100644
index 0000000000..2385ee6bfd
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/ongoing/components/DurationViewModel.ts
@@ -0,0 +1,47 @@
+/*
+ * Copyright 2026 Element Creations 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 { BaseViewModel, type DurationViewSnapshot } from "@element-hq/web-shared-components";
+
+interface Props {
+    /**
+     * The timestamp of when this call started.
+     */
+    callStartTs: number;
+}
+
+/**
+ * Get the duration of the call in seconds
+ * @param timestamp The timestamp at which the call started
+ */
+function getDurationInSeconds(timestamp: number): number {
+    const durationInMs = Date.now() - timestamp;
+    const durationInSeconds = Math.floor(durationInMs * 0.001);
+    return durationInSeconds;
+}
+
+/**
+ * View model for showing the duration of an ongoing call.
+ */
+export class DurationViewModel extends BaseViewModel<DurationViewSnapshot, Props> {
+    public constructor(props: Props) {
+        super(props, { duration: getDurationInSeconds(props.callStartTs) });
+        this.setupInterval();
+    }
+
+    /**
+     * Update the duration every second.
+     */
+    private setupInterval(): void {
+        const intervalRef = setInterval(() => {
+            this.snapshot.set({ duration: getDurationInSeconds(this.props.callStartTs) });
+        }, 1000);
+        this.disposables.track(() => {
+            clearInterval(intervalRef);
+        });
+    }
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/tombstone/DmTombstoneCallTileViewModel.test.ts b/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/tombstone/DmTombstoneCallTileViewModel.test.ts
new file mode 100644
index 0000000000..b6dde28979
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/tombstone/DmTombstoneCallTileViewModel.test.ts
@@ -0,0 +1,80 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+// @vitest-environment happy-dom
+
+import { it, describe, expect, vi } from "vitest";
+import { CallDirection, CallType } from "@element-hq/web-shared-components";
+import { EventType, MatrixEventEvent } from "matrix-js-sdk/src/matrix";
+
+import { getMockedRtcDeclineEvent, getMockedRtcNotificationEvent } from "../../call-mocks";
+import { formatTime } from "../../../../../../../DateUtils";
+import { DmTombstoneCallTileViewModel } from "./DmTombstoneCallTileViewModel";
+import { stubClient } from "../../../../../../../../test/test-utils";
+
+describe("DmTombstoneCallTileViewModel", () => {
+    it("should compute correct state on decline", () => {
+        const mxEvent = getMockedRtcNotificationEvent("video", 924285348000, 924285348000, "@alice:m.org");
+        const declineEvent = getMockedRtcDeclineEvent(mxEvent, "@alice:m.org");
+        const getRelationsForEvent = vi.fn();
+        const cli = stubClient();
+        const vm = new DmTombstoneCallTileViewModel({ mxEvent, getRelationsForEvent, cli });
+
+        // Without decline event, isCallDeclined = false
+        expect(vm.getSnapshot().isCallDeclined).toStrictEqual(false);
+
+        // Decline event comes through
+        getRelationsForEvent.mockReturnValue({
+            getRelations: () => [declineEvent],
+        });
+        mxEvent.emit(MatrixEventEvent.RelationsCreated, "m.reference", EventType.RTCDecline);
+
+        // Timestamp should be that of the decline event
+        expect(vm.getSnapshot().timestamp).toStrictEqual(formatTime(new Date(924285416000)));
+        // Call should be declined
+        expect(vm.getSnapshot().isCallDeclined).toStrictEqual(true);
+    });
+
+    it("should compute voice intent in state", () => {
+        const mxEvent = getMockedRtcNotificationEvent("audio", 1752583130365, 1752583130365);
+
+        const getRelationsForEvent = vi.fn();
+        const cli = stubClient();
+        const vm = new DmTombstoneCallTileViewModel({ mxEvent, cli, getRelationsForEvent });
+        const { type } = vm.getSnapshot();
+        expect(type).toStrictEqual(CallType.Voice);
+    });
+
+    it("should compute video intent in state", () => {
+        const mxEvent = getMockedRtcNotificationEvent("video", 1752583130365, 1752583130365);
+        const getRelationsForEvent = vi.fn();
+        const cli = stubClient();
+        const vm = new DmTombstoneCallTileViewModel({ mxEvent, cli, getRelationsForEvent });
+        const { type } = vm.getSnapshot();
+        expect(type).toStrictEqual(CallType.Video);
+    });
+
+    describe("should compute callDirection", () => {
+        it("for outgoing", () => {
+            const mxEvent = getMockedRtcNotificationEvent("video", 1752583130365, 1752583130365, "@alice:m.org");
+            const getRelationsForEvent = vi.fn();
+            const cli = stubClient();
+            vi.spyOn(cli, "getUserId").mockReturnValue("@alice:m.org");
+            const vm = new DmTombstoneCallTileViewModel({ mxEvent, cli, getRelationsForEvent });
+            expect(vm.getSnapshot().callDirection).toStrictEqual(CallDirection.Outgoing);
+        });
+
+        it("for incoming", () => {
+            const mxEvent = getMockedRtcNotificationEvent("video", 1752583130365, 1752583130365, "@bob:m.org");
+            const getRelationsForEvent = vi.fn();
+            const cli = stubClient();
+            vi.spyOn(cli, "getUserId").mockReturnValue("@alice:m.org");
+            const vm = new DmTombstoneCallTileViewModel({ mxEvent, cli, getRelationsForEvent });
+            expect(vm.getSnapshot().callDirection).toStrictEqual(CallDirection.Incoming);
+        });
+    });
+});
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/tombstone/DmTombstoneCallTileViewModel.ts b/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/tombstone/DmTombstoneCallTileViewModel.ts
new file mode 100644
index 0000000000..1f331b6f51
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/tombstone/DmTombstoneCallTileViewModel.ts
@@ -0,0 +1,79 @@
+/*
+ * Copyright 2026 Element Creations 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 { CallDirection, type DmTombstoneCallTileViewSnapshot } from "@element-hq/web-shared-components";
+import { type MatrixClient, type MatrixEvent, MatrixEventEvent } from "matrix-js-sdk/src/matrix";
+
+import SettingsStore from "../../../../../../../settings/SettingsStore";
+import type { GetRelationsForEvent } from "../../../../../../../components/views/rooms/EventTile";
+import { getTimeFromEvent } from "./common";
+import {
+    RoomTombstoneCallTileViewModel,
+    type RoomTombstoneCallTileViewModelProps,
+} from "./RoomTombstoneCallTileViewModel";
+import { getDeclinedEvents, getIntentFromEvent } from "../../common";
+
+export interface DmTombstoneCallTileViewModelProps extends RoomTombstoneCallTileViewModelProps {
+    /**
+     * Helper to fetch related events from a given event.
+     */
+    getRelationsForEvent?: GetRelationsForEvent;
+    /**
+     * The {@link MatrixClient} object to access js-sdk API.
+     */
+    cli: MatrixClient;
+}
+
+function generateSnapshot(props: DmTombstoneCallTileViewModelProps): {
+    snapshot: DmTombstoneCallTileViewSnapshot;
+    declineEvent: MatrixEvent | null;
+} {
+    const { mxEvent, getRelationsForEvent, cli } = props;
+    const type = getIntentFromEvent(mxEvent);
+
+    // Find the mx-id of the user who started this call
+    const startedUserId = mxEvent.getSender();
+    if (!startedUserId) {
+        throw new Error("RTCNotification event has no sender associated with it!");
+    }
+    const callDirection = cli.getUserId() === startedUserId ? CallDirection.Outgoing : CallDirection.Incoming;
+
+    const declineEvent = getDeclinedEvents(mxEvent, getRelationsForEvent)?.[0] ?? null;
+    const showTwelveHour = SettingsStore.getValue("showTwelveHourTimestamps");
+    const timestamp = getTimeFromEvent(declineEvent ?? mxEvent, showTwelveHour);
+    return { snapshot: { timestamp, type, callDirection, isCallDeclined: !!declineEvent }, declineEvent };
+}
+
+/**
+ * View model for a tombstone call in a DM.
+ */
+export class DmTombstoneCallTileViewModel extends RoomTombstoneCallTileViewModel<
+    DmTombstoneCallTileViewSnapshot,
+    DmTombstoneCallTileViewModelProps
+> {
+    /**
+     * The decline event associated with this call, if any.
+     */
+    private declineEvent: MatrixEvent | null;
+
+    public constructor(props: DmTombstoneCallTileViewModelProps) {
+        const { snapshot, declineEvent } = generateSnapshot(props);
+        super(props, snapshot);
+        this.declineEvent = declineEvent;
+
+        // When a relation is added to the event, recompute the state.
+        this.disposables.trackListener(props.mxEvent, MatrixEventEvent.RelationsCreated, () => {
+            const { declineEvent, snapshot } = generateSnapshot(props);
+            this.declineEvent = declineEvent;
+            this.snapshot.set(snapshot);
+        });
+    }
+
+    protected getTimestamp(showTwelveHour: boolean): string {
+        return getTimeFromEvent(this.declineEvent ?? this.props.mxEvent, showTwelveHour);
+    }
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/tombstone/RoomTombstoneCallTileViewModel.test.ts b/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/tombstone/RoomTombstoneCallTileViewModel.test.ts
new file mode 100644
index 0000000000..2271294400
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/tombstone/RoomTombstoneCallTileViewModel.test.ts
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+// @vitest-environment happy-dom
+
+import { it, describe, expect, vi } from "vitest";
+
+import { getMockedRtcNotificationEvent } from "../../call-mocks";
+import { RoomTombstoneCallTileViewModel } from "./RoomTombstoneCallTileViewModel";
+import SettingsStore from "../../../../../../../settings/SettingsStore";
+import { SettingLevel } from "../../../../../../../settings/SettingLevel";
+import { formatTime } from "../../../../../../../DateUtils";
+
+describe("RoomTombstoneCallTileViewModel", () => {
+    it("should compute timestamp correctly", () => {
+        const mxEvent = getMockedRtcNotificationEvent("video", 924285348000, 924285348000);
+        const vm = new RoomTombstoneCallTileViewModel({ mxEvent });
+        expect(vm.getSnapshot().timestamp).toStrictEqual(formatTime(new Date(924285348000)));
+    });
+
+    it("should calculate time string correctly when configured to use 12 hour format", async () => {
+        const mxEvent = getMockedRtcNotificationEvent("video", 924285348000, 924285348000);
+        await SettingsStore.setValue("showTwelveHourTimestamps", null, SettingLevel.DEVICE, true);
+        const vm = new RoomTombstoneCallTileViewModel({ mxEvent });
+        const { timestamp } = vm.getSnapshot();
+
+        expect(timestamp).toStrictEqual(formatTime(new Date(924285348000), true));
+        SettingsStore.reset();
+    });
+
+    it("should change timestamp format when setting is modified", async () => {
+        await SettingsStore.setValue("showTwelveHourTimestamps", null, SettingLevel.DEVICE, false);
+        const mxEvent = getMockedRtcNotificationEvent("video", 924285348000, 924285348000);
+        const vm = new RoomTombstoneCallTileViewModel({ mxEvent });
+        expect(vm.getSnapshot().timestamp).toStrictEqual(formatTime(new Date(924285348000)));
+        await SettingsStore.setValue("showTwelveHourTimestamps", null, SettingLevel.DEVICE, true);
+        await vi.waitFor(() => {
+            expect(vm.getSnapshot().timestamp).toStrictEqual(formatTime(new Date(924285348000), true));
+        });
+        SettingsStore.reset();
+    });
+});
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/tombstone/RoomTombstoneCallTileViewModel.ts b/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/tombstone/RoomTombstoneCallTileViewModel.ts
new file mode 100644
index 0000000000..eda4a3b9a8
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/tombstone/RoomTombstoneCallTileViewModel.ts
@@ -0,0 +1,69 @@
+/*
+ * Copyright 2026 Element Creations 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 { BaseViewModel, type RoomTombstoneCallTileViewSnapshot } from "@element-hq/web-shared-components";
+import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import SettingsStore from "../../../../../../../settings/SettingsStore";
+import defaultDispatcher from "../../../../../../../dispatcher/dispatcher";
+import type { SettingUpdatedPayload } from "../../../../../../../dispatcher/payloads/SettingUpdatedPayload";
+import type { ActionPayload } from "../../../../../../../dispatcher/payloads";
+import { Action } from "../../../../../../../dispatcher/actions";
+import type { GetRelationsForEvent } from "../../../../../../../components/views/rooms/EventTile";
+import { getTimeFromEvent } from "./common";
+
+export interface RoomTombstoneCallTileViewModelProps {
+    /**
+     * Event of type `org.matrix.msc4075.rtc.notification`.
+     */
+    mxEvent: MatrixEvent;
+    /**
+     * Helper to fetch related events from a given event.
+     */
+    getRelationsForEvent?: GetRelationsForEvent;
+}
+
+function generateSnapshot(event: MatrixEvent): RoomTombstoneCallTileViewSnapshot {
+    const showTwelveHour = SettingsStore.getValue("showTwelveHourTimestamps");
+    const timestamp = getTimeFromEvent(event, showTwelveHour);
+    return { timestamp };
+}
+
+function isSettingsChangedPayload(payload: ActionPayload): payload is SettingUpdatedPayload {
+    return payload.action === Action.SettingUpdated;
+}
+
+/**
+ * View model for a tombstone call in a room.
+ */
+export class RoomTombstoneCallTileViewModel<
+    T extends RoomTombstoneCallTileViewSnapshot = RoomTombstoneCallTileViewSnapshot,
+    P extends RoomTombstoneCallTileViewModelProps = RoomTombstoneCallTileViewModelProps,
+> extends BaseViewModel<T, P> {
+    public constructor(props: P, extraSnapshot: Partial<T> = {}) {
+        const snapshot = { ...generateSnapshot(props.mxEvent), ...extraSnapshot };
+        super(props, snapshot as T);
+
+        // Listen to the changes on settings so that we can update the timestamp format (12H vs 24H).
+        SettingsStore.monitorSetting("showTwelveHourTimestamps", null);
+        const token = defaultDispatcher.register(this.onAction);
+        this.disposables.track(() => {
+            defaultDispatcher.unregister(token);
+        });
+    }
+
+    private onAction = (payload: ActionPayload): void => {
+        if (!isSettingsChangedPayload(payload) || payload.settingName !== "showTwelveHourTimestamps") return;
+        const showTwelveHour = (payload.newValue as boolean) ?? false;
+        const timestamp = this.getTimestamp(showTwelveHour);
+        this.snapshot.merge({ timestamp } as Partial<T>);
+    };
+
+    protected getTimestamp(showTwelveHour: boolean): string {
+        return getTimeFromEvent(this.props.mxEvent, showTwelveHour);
+    }
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/tombstone/common.ts b/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/tombstone/common.ts
new file mode 100644
index 0000000000..8ab63b6132
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/call/tiles/tombstone/common.ts
@@ -0,0 +1,37 @@
+/*
+ * Copyright 2026 Element Creations 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 { EventType, type MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { type IRTCNotificationContent } from "matrix-js-sdk/src/matrixrtc";
+
+import { formatTime } from "../../../../../../../DateUtils";
+
+function getTs(event: MatrixEvent): number {
+    if (event.getType() === EventType.RTCNotification) {
+        /**
+         * According to the spec:
+         * Receivers SHOULD use origin_server_ts if |sender_ts - origin_server_ts| > 20000 ms.
+         */
+        const content = event.getContent<IRTCNotificationContent>();
+        const senderTs = content["sender_ts"];
+        const originServerTs = event.getTs();
+        const ts = Math.abs(senderTs - originServerTs) > 20000 ? originServerTs : senderTs;
+        return ts;
+    } else return event.getTs();
+}
+
+/**
+ * Get the time at which a call took place from a given rtc notification event.
+ * @param event The notification event
+ * @param showTwelveHour Whether the time is to be shown in 12 hour format
+ * @returns A formatted time string
+ */
+export function getTimeFromEvent(event: MatrixEvent, showTwelveHour: boolean): string {
+    const ts = getTs(event);
+    const date = new Date(ts);
+    const timestamp = formatTime(date, showTwelveHour);
+    return timestamp;
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/reactions/EventTileReactionState.ts b/apps/web/src/viewmodels/room/timeline/event-tile/reactions/EventTileReactionState.ts
new file mode 100644
index 0000000000..f477614b23
--- /dev/null
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/reactions/EventTileReactionState.ts
@@ -0,0 +1,52 @@
+/*
+Copyright 2026 Element Creations 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 { EventType, type MatrixEvent, type Relations, type RelationType } from "matrix-js-sdk/src/matrix";
+
+/** Looks up relations for an event by relation and event type. */
+export type GetRelationsForEvent = (
+    eventId: string,
+    relationType: RelationType | string,
+    eventType: EventType | string,
+) => Relations | null | undefined;
+
+/** Inputs for fetching EventTile reaction relations. */
+export interface EventTileReactionRelationsInput {
+    /** Matrix event rendered by the tile. */
+    mxEvent: MatrixEvent;
+    /** Whether reactions are enabled for the tile. */
+    showReactions?: boolean;
+    /** Relation lookup function supplied by the timeline. */
+    getRelationsForEvent?: GetRelationsForEvent;
+}
+
+/** Relation type used for EventTile reaction annotations. */
+export const EVENT_TILE_REACTION_RELATION_TYPE = "m.annotation";
+
+/** Event type used for EventTile reaction annotations. */
+export const EVENT_TILE_REACTION_EVENT_TYPE = EventType.Reaction;
+
+/** Whether a created relation event should refresh EventTile reactions. */
+export function isEventTileReactionRelation(relationType: string, eventType: string): boolean {
+    return relationType === EVENT_TILE_REACTION_RELATION_TYPE && eventType === EVENT_TILE_REACTION_EVENT_TYPE;
+}
+
+/** Fetches reaction relations for EventTile when reactions are enabled. */
+export function getEventTileReactionRelations({
+    mxEvent,
+    showReactions,
+    getRelationsForEvent,
+}: EventTileReactionRelationsInput): Relations | null {
+    if (!showReactions || !getRelationsForEvent) {
+        return null;
+    }
+
+    return (
+        getRelationsForEvent(mxEvent.getId()!, EVENT_TILE_REACTION_RELATION_TYPE, EVENT_TILE_REACTION_EVENT_TYPE) ??
+        null
+    );
+}
diff --git a/apps/web/src/viewmodels/room/timeline/event-tile/timestamp/MessageTimestampViewModel.ts b/apps/web/src/viewmodels/room/timeline/event-tile/timestamp/MessageTimestampViewModel.ts
index 394404ca4b..2d5a8e2486 100644
--- a/apps/web/src/viewmodels/room/timeline/event-tile/timestamp/MessageTimestampViewModel.ts
+++ b/apps/web/src/viewmodels/room/timeline/event-tile/timestamp/MessageTimestampViewModel.ts
@@ -100,8 +100,7 @@ export class MessageTimestampViewModel
         };
     };
 
-    private updateProps(newProps: Partial<MessageTimestampViewModelProps>): void {
-        const nextProps = { ...this.props, ...newProps };
+    private replaceProps(nextProps: MessageTimestampViewModelProps): void {
         if (!objectHasDiff(this.props, nextProps)) return;
 
         this.props = nextProps;
@@ -120,52 +119,9 @@ export class MessageTimestampViewModel
     }
 
     /**
-     * Update the base timestamp (milliseconds since Unix epoch).
+     * Replace all timestamp props in one update.
      */
-    public setTimestamp(ts: number): void {
-        this.updateProps({ ts });
-    }
-
-    /**
-     * Update the optional received timestamp (milliseconds since Unix epoch).
-     */
-    public setReceivedTimestamp(receivedTs?: number): void {
-        this.updateProps({ receivedTs });
-    }
-
-    /**
-     * Update display formatting options for the rendered timestamp.
-     */
-    public setDisplayOptions(options: {
-        showTwelveHour?: boolean;
-        showFullDate?: boolean;
-        showSeconds?: boolean;
-        showRelative?: boolean;
-    }): void {
-        this.updateProps(options);
-    }
-
-    /**
-     * Enable or disable the tooltip rendering.
-     */
-    public setTooltipInhibited(inhibitTooltip?: boolean): void {
-        this.updateProps({ inhibitTooltip });
-    }
-
-    /**
-     * Update the optional href for link rendering.
-     */
-    public setHref(href?: string): void {
-        this.updateProps({ href });
-    }
-
-    /**
-     * Update click and context-menu handlers for the rendered element.
-     */
-    public setHandlers(handlers: {
-        onClick?: MouseEventHandler<HTMLElement>;
-        onContextMenu?: MouseEventHandler<HTMLElement>;
-    }): void {
-        this.updateProps(handlers);
+    public setProps(props: MessageTimestampViewModelProps): void {
+        this.replaceProps(props);
     }
 }
diff --git a/apps/web/src/viewmodels/status/SetStatusViewModel.test.ts b/apps/web/src/viewmodels/status/SetStatusViewModel.test.ts
new file mode 100644
index 0000000000..2b6ebeafbb
--- /dev/null
+++ b/apps/web/src/viewmodels/status/SetStatusViewModel.test.ts
@@ -0,0 +1,217 @@
+// @vitest-environment happy-dom
+
+/*
+ * Copyright 2026 Element Creations 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 MatrixClient } from "matrix-js-sdk/src/matrix";
+import { waitFor } from "test-utils-rtl";
+import { vi, describe, it, expect, beforeEach, afterEach, type MockInstance, type MockedObject } from "vitest";
+
+import { SetStatusViewModel, UserMenuSetStatusViewModel } from "./SetStatusViewModel";
+import {
+    getMockClientWithEventEmitter,
+    MockEventEmitter,
+    mockClientMethodsServer,
+    mockClientMethodsUser,
+} from "../../../test/test-utils";
+import type { UserStatus as MatrixUserStatus } from "@element-hq/web-shared-components";
+import dis from "../../dispatcher/dispatcher";
+import { Action } from "../../dispatcher/actions";
+import { UserTab } from "../../components/views/dialogs/UserTab";
+import { OwnProfileStore } from "../../stores/OwnProfileStore";
+import { UPDATE_EVENT } from "../../stores/AsyncStore";
+
+const STATUS: MatrixUserStatus = { emoji: "🧪", text: "Testing" };
+
+describe("SetStatusViewModel", () => {
+    let client: MockedObject<MatrixClient>;
+    let mockOwnProfileStoreInstance: MockEventEmitter<OwnProfileStore> & OwnProfileStore;
+
+    beforeEach(() => {
+        mockOwnProfileStoreInstance = new MockEventEmitter<OwnProfileStore>({
+            userStatus: undefined,
+        }) as unknown as MockEventEmitter<OwnProfileStore> & OwnProfileStore;
+
+        client = getMockClientWithEventEmitter({
+            ...mockClientMethodsUser(),
+            ...mockClientMethodsServer(),
+            getExtendedProfileProperty: vi.fn().mockResolvedValue(undefined),
+            setExtendedProfileProperty: vi.fn().mockResolvedValue(undefined),
+        });
+        vi.mocked(mockOwnProfileStoreInstance).userStatus = undefined;
+    });
+
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+
+    it("initialises snapshot from OwnProfileStore userStatus", () => {
+        vi.mocked(mockOwnProfileStoreInstance).userStatus = STATUS;
+        const vm = new SetStatusViewModel({ client, ownProfileStore: mockOwnProfileStoreInstance });
+        expect(vm.getSnapshot().userStatus).toEqual(STATUS);
+    });
+
+    it("initialises snapshot with undefined when no status is set", () => {
+        const vm = new SetStatusViewModel({ client, ownProfileStore: mockOwnProfileStoreInstance });
+        expect(vm.getSnapshot().userStatus).toBeUndefined();
+    });
+
+    it("updates the snapshot when OwnProfileStore emits an update", () => {
+        const vm = new SetStatusViewModel({ client, ownProfileStore: mockOwnProfileStoreInstance });
+        expect(vm.getSnapshot().userStatus).toBeUndefined();
+
+        vi.mocked(mockOwnProfileStoreInstance).userStatus = STATUS;
+        mockOwnProfileStoreInstance.emit(UPDATE_EVENT);
+
+        expect(vm.getSnapshot().userStatus).toEqual(STATUS);
+    });
+
+    it("stops listening to OwnProfileStore once disposed", () => {
+        const vm = new SetStatusViewModel({ client, ownProfileStore: mockOwnProfileStoreInstance });
+        vm.dispose();
+
+        vi.mocked(mockOwnProfileStoreInstance).userStatus = STATUS;
+        mockOwnProfileStoreInstance.emit(UPDATE_EVENT);
+
+        expect(vm.getSnapshot().userStatus).toBeUndefined();
+    });
+
+    describe("setStatus", () => {
+        it("optimistically updates the snapshot", () => {
+            const vm = new SetStatusViewModel({ client, ownProfileStore: mockOwnProfileStoreInstance });
+            vm.setStatus(STATUS);
+            expect(vm.getSnapshot().userStatus).toEqual(STATUS);
+        });
+
+        it("calls setExtendedProfileProperty with the new status", async () => {
+            const vm = new SetStatusViewModel({ client, ownProfileStore: mockOwnProfileStoreInstance });
+            vm.setStatus(STATUS);
+            await waitFor(() =>
+                expect(client.setExtendedProfileProperty).toHaveBeenCalledWith("org.matrix.msc4426.status", {
+                    emoji: STATUS.emoji,
+                    text: STATUS.text,
+                }),
+            );
+        });
+
+        it("notifies subscribers of the update", () => {
+            const vm = new SetStatusViewModel({ client, ownProfileStore: mockOwnProfileStoreInstance });
+            const subscriber = vi.fn();
+            vm.subscribe(subscriber);
+            vm.setStatus(STATUS);
+            expect(subscriber).toHaveBeenCalledTimes(1);
+        });
+
+        it("rolls back the snapshot on failure", async () => {
+            vi.mocked(mockOwnProfileStoreInstance).userStatus = STATUS;
+            client.setExtendedProfileProperty.mockRejectedValue(new Error("network error"));
+            const vm = new SetStatusViewModel({ client, ownProfileStore: mockOwnProfileStoreInstance });
+
+            const newStatus = { emoji: "🦎", text: "Gecko" };
+            vm.setStatus(newStatus);
+            expect(vm.getSnapshot().userStatus).toEqual(newStatus);
+
+            await waitFor(() => expect(vm.getSnapshot().userStatus).toEqual(STATUS));
+        });
+    });
+
+    describe("clearStatus", () => {
+        it("optimistically clears the snapshot", () => {
+            vi.mocked(mockOwnProfileStoreInstance).userStatus = STATUS;
+            const vm = new SetStatusViewModel({ client, ownProfileStore: mockOwnProfileStoreInstance });
+            vm.clearStatus();
+            expect(vm.getSnapshot().userStatus).toBeUndefined();
+        });
+
+        it("calls setExtendedProfileProperty with null", async () => {
+            client.getExtendedProfileProperty.mockResolvedValue(STATUS);
+            const vm = new SetStatusViewModel({ client, ownProfileStore: mockOwnProfileStoreInstance });
+            vm.clearStatus();
+            await waitFor(() =>
+                expect(client.setExtendedProfileProperty).toHaveBeenCalledWith("org.matrix.msc4426.status", null),
+            );
+        });
+
+        it("notifies subscribers of the update", () => {
+            vi.mocked(mockOwnProfileStoreInstance).userStatus = STATUS;
+            const vm = new SetStatusViewModel({ client, ownProfileStore: mockOwnProfileStoreInstance });
+            const subscriber = vi.fn();
+            vm.subscribe(subscriber);
+            vm.clearStatus();
+            expect(subscriber).toHaveBeenCalledTimes(1);
+        });
+
+        it("rolls back the snapshot on failure", async () => {
+            vi.mocked(mockOwnProfileStoreInstance).userStatus = STATUS;
+            client.getExtendedProfileProperty.mockResolvedValue(STATUS);
+            client.setExtendedProfileProperty.mockRejectedValue(new Error("network error"));
+            const vm = new SetStatusViewModel({ client, ownProfileStore: mockOwnProfileStoreInstance });
+            vm.clearStatus();
+            expect(vm.getSnapshot().userStatus).toBeUndefined();
+
+            await waitFor(() => expect(vm.getSnapshot().userStatus).toEqual(STATUS));
+        });
+    });
+});
+
+describe("UserMenuSetStatusViewModel", () => {
+    let client: MockedObject<MatrixClient>;
+    let dispatchSpy: MockInstance;
+    let mockOwnProfileStoreInstance: MockEventEmitter<OwnProfileStore> & OwnProfileStore;
+
+    beforeEach(() => {
+        mockOwnProfileStoreInstance = new MockEventEmitter<OwnProfileStore>({
+            userStatus: undefined,
+        }) as unknown as MockEventEmitter<OwnProfileStore> & OwnProfileStore;
+        vi.spyOn(OwnProfileStore, "instance", "get").mockReturnValue(mockOwnProfileStoreInstance);
+
+        client = getMockClientWithEventEmitter({
+            ...mockClientMethodsUser(),
+            ...mockClientMethodsServer(),
+            getExtendedProfileProperty: vi.fn().mockResolvedValue(undefined),
+            setExtendedProfileProperty: vi.fn().mockResolvedValue(undefined),
+        });
+        vi.mocked(mockOwnProfileStoreInstance).userStatus = undefined;
+        dispatchSpy = vi.spyOn(dis, "dispatch").mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+
+    it("dispatches ToggleUserMenu and ViewUserSettings on onSetStatusClick", async () => {
+        const vm = new UserMenuSetStatusViewModel({ client, ownProfileStore: mockOwnProfileStoreInstance });
+        vm.onSetStatusClick();
+        await waitFor(() => {
+            expect(dispatchSpy).toHaveBeenCalledWith({ action: Action.ToggleUserMenu });
+            expect(dispatchSpy).toHaveBeenCalledWith({
+                action: Action.ViewUserSettings,
+                initialTabId: UserTab.Account,
+            });
+        });
+    });
+
+    it("inherits setStatus from SetStatusViewModel", async () => {
+        const vm = new UserMenuSetStatusViewModel({ client, ownProfileStore: mockOwnProfileStoreInstance });
+        vm.setStatus(STATUS);
+        await waitFor(() =>
+            expect(client.setExtendedProfileProperty).toHaveBeenCalledWith("org.matrix.msc4426.status", {
+                emoji: STATUS.emoji,
+                text: STATUS.text,
+            }),
+        );
+    });
+
+    it("inherits clearStatus from SetStatusViewModel", async () => {
+        client.getExtendedProfileProperty.mockResolvedValue(STATUS);
+        const vm = new UserMenuSetStatusViewModel({ client, ownProfileStore: mockOwnProfileStoreInstance });
+        vm.clearStatus();
+        await waitFor(() =>
+            expect(client.setExtendedProfileProperty).toHaveBeenCalledWith("org.matrix.msc4426.status", null),
+        );
+    });
+});
diff --git a/apps/web/src/viewmodels/status/SetStatusViewModel.ts b/apps/web/src/viewmodels/status/SetStatusViewModel.ts
new file mode 100644
index 0000000000..a285dcfb51
--- /dev/null
+++ b/apps/web/src/viewmodels/status/SetStatusViewModel.ts
@@ -0,0 +1,86 @@
+/*
+Copyright 2026 Element Creations 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 MatrixClient } from "matrix-js-sdk/src/matrix";
+import { logger } from "matrix-js-sdk/src/logger";
+import {
+    BaseViewModel,
+    type SetStatusViewSnapshot,
+    type SetStatusViewActions,
+    type UserStatus,
+} from "@element-hq/web-shared-components";
+
+import { clearAllUserStatus, setUserStatus } from "../../utils/userStatus";
+import { UPDATE_EVENT } from "../../stores/AsyncStore";
+import dis from "../../dispatcher/dispatcher";
+import { UserTab } from "../../components/views/dialogs/UserTab";
+import { Action } from "../../dispatcher/actions";
+import { type OwnProfileStore } from "../../stores/OwnProfileStore";
+
+export interface SetStatusViewModelProps {
+    /**
+     * The Matrix client instance.
+     */
+    client: MatrixClient;
+    ownProfileStore: OwnProfileStore;
+}
+
+export class SetStatusViewModel
+    extends BaseViewModel<SetStatusViewSnapshot, SetStatusViewModelProps>
+    implements SetStatusViewActions
+{
+    public constructor(props: SetStatusViewModelProps) {
+        super(props, {
+            userStatus: props.ownProfileStore.userStatus,
+        });
+
+        this.disposables.trackListener(props.ownProfileStore, UPDATE_EVENT, this.onProfileStoreUpdate);
+    }
+
+    private onProfileStoreUpdate = (): void => {
+        this.snapshot.merge({ userStatus: this.props.ownProfileStore.userStatus });
+    };
+
+    public setStatus = (userStatus: UserStatus): void => {
+        const oldStatus = this.snapshot.current.userStatus;
+
+        this.snapshot.merge({ userStatus });
+        setUserStatus(this.props.client, userStatus).catch((err) => {
+            this.snapshot.merge({ userStatus: oldStatus });
+            logger.warn("Failed to set user status", err);
+        });
+    };
+
+    public clearStatus = (): void => {
+        const oldStatus = this.snapshot.current.userStatus;
+
+        this.snapshot.merge({ userStatus: undefined });
+        clearAllUserStatus(this.props.client).catch((err) => {
+            this.snapshot.merge({ userStatus: oldStatus });
+            logger.warn("Failed to clear user status", err);
+        });
+    };
+}
+
+/**
+ * A version of the view model that overrides the click handler to open settings instead.
+ */
+export class UserMenuSetStatusViewModel extends SetStatusViewModel {
+    public constructor(props: SetStatusViewModelProps) {
+        super(props);
+    }
+
+    public onSetStatusClick = (): void => {
+        dis.dispatch({
+            action: Action.ToggleUserMenu,
+        });
+        dis.dispatch({
+            action: Action.ViewUserSettings,
+            initialTabId: UserTab.Account,
+        });
+    };
+}
diff --git a/apps/web/src/viewmodels/status/UserStatusIconViewModel.test.ts b/apps/web/src/viewmodels/status/UserStatusIconViewModel.test.ts
new file mode 100644
index 0000000000..21d60df4ad
--- /dev/null
+++ b/apps/web/src/viewmodels/status/UserStatusIconViewModel.test.ts
@@ -0,0 +1,113 @@
+// @vitest-environment happy-dom
+
+/*
+Copyright 2026 Element Creations 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 { ClientEvent, type MatrixClient } from "matrix-js-sdk/src/matrix";
+import { waitFor } from "test-utils-rtl";
+import { vi, describe, it, expect, beforeEach, afterEach, type MockedObject } from "vitest";
+import { getMockClientWithEventEmitter, mockClientMethodsServer, mockClientMethodsUser } from "test-utils";
+
+import { UserStatusIconViewModel } from "./UserStatusIconViewModel";
+import SettingsStore from "../../settings/SettingsStore";
+
+const userId = "@alice:example.com";
+
+describe("UserStatusIconViewModel", () => {
+    let client: MockedObject<MatrixClient>;
+
+    beforeEach(() => {
+        vi.spyOn(SettingsStore, "getValue").mockImplementation((name): any => {
+            if (name === "feature_user_status") return true;
+        });
+
+        client = getMockClientWithEventEmitter({
+            ...mockClientMethodsUser(),
+            ...mockClientMethodsServer(),
+            doesServerSupportExtendedProfiles: vi.fn().mockResolvedValue(true),
+            getExtendedProfileProperty: vi.fn().mockResolvedValue(undefined),
+        });
+    });
+
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+
+    it("initialises with an undefined status", () => {
+        const vm = new UserStatusIconViewModel({ userId, matrixClient: client });
+        expect(vm.getSnapshot().status).toBeUndefined();
+    });
+
+    it("does not fetch a status when the feature is disabled", async () => {
+        vi.mocked(SettingsStore.getValue).mockReturnValue(false);
+        client.getExtendedProfileProperty.mockResolvedValue({ emoji: "🐎", text: "on a horse" });
+
+        const vm = new UserStatusIconViewModel({ userId, matrixClient: client });
+
+        await waitFor(() => expect(client.doesServerSupportExtendedProfiles).not.toHaveBeenCalled());
+        expect(vm.getSnapshot().status).toBeUndefined();
+    });
+
+    it("fetches and populates the status on construction", async () => {
+        client.getExtendedProfileProperty.mockResolvedValue({ emoji: "🐎", text: "on a horse" });
+
+        const vm = new UserStatusIconViewModel({ userId, matrixClient: client });
+
+        await waitFor(() => expect(vm.getSnapshot().status).toEqual({ emoji: "🐎", text: "on a horse" }));
+    });
+
+    it("updates the status when a matching UserProfileUpdate event is emitted", async () => {
+        const vm = new UserStatusIconViewModel({ userId, matrixClient: client });
+        await waitFor(() => expect(client.getExtendedProfileProperty).toHaveBeenCalled());
+
+        client.emit(ClientEvent.UserProfileUpdate, userId, {
+            "org.matrix.msc4426.status": { emoji: "😵", text: "off a horse" },
+        });
+
+        expect(vm.getSnapshot().status).toEqual({ emoji: "😵", text: "off a horse" });
+    });
+
+    it("ignores UserProfileUpdate events for other users", async () => {
+        client.getExtendedProfileProperty.mockResolvedValue({ emoji: "🐎", text: "on a horse" });
+        const vm = new UserStatusIconViewModel({ userId, matrixClient: client });
+        await waitFor(() => expect(vm.getSnapshot().status).toEqual({ emoji: "🐎", text: "on a horse" }));
+
+        client.emit(ClientEvent.UserProfileUpdate, "@bob:example.com", {
+            "org.matrix.msc4426.status": { emoji: "🤷", text: "unrelated status" },
+        });
+
+        expect(vm.getSnapshot().status).toEqual({ emoji: "🐎", text: "on a horse" });
+    });
+
+    it("stops listening for updates once disposed", async () => {
+        const vm = new UserStatusIconViewModel({ userId, matrixClient: client });
+        await waitFor(() => expect(client.getExtendedProfileProperty).toHaveBeenCalled());
+        vm.dispose();
+
+        client.emit(ClientEvent.UserProfileUpdate, userId, {
+            "org.matrix.msc4426.status": { emoji: "😵", text: "off a horse" },
+        });
+
+        expect(vm.getSnapshot().status).toBeUndefined();
+    });
+
+    it("does not update the snapshot if disposed before the initial fetch resolves", async () => {
+        let resolveFetch: (value: unknown) => void = () => {};
+        client.getExtendedProfileProperty.mockReturnValue(
+            new Promise((resolve) => {
+                resolveFetch = resolve;
+            }),
+        );
+
+        const vm = new UserStatusIconViewModel({ userId, matrixClient: client });
+        vm.dispose();
+        resolveFetch({ emoji: "🐎", text: "on a horse" });
+
+        await Promise.resolve();
+        expect(vm.getSnapshot().status).toBeUndefined();
+    });
+});
diff --git a/apps/web/src/viewmodels/status/UserStatusIconViewModel.ts b/apps/web/src/viewmodels/status/UserStatusIconViewModel.ts
new file mode 100644
index 0000000000..c63a4b575a
--- /dev/null
+++ b/apps/web/src/viewmodels/status/UserStatusIconViewModel.ts
@@ -0,0 +1,59 @@
+/*
+Copyright 2026 Element Creations 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 MatrixClient, ClientEvent } from "matrix-js-sdk/src/matrix";
+import { BaseViewModel, type UserStatusIconViewSnapshot } from "@element-hq/web-shared-components";
+
+import { fetchUserStatus, userStatusFromProfile } from "../../utils/userStatus";
+import SettingsStore from "../../settings/SettingsStore";
+import { logger } from "matrix-js-sdk/src/logger";
+
+export interface UserStatusIconViewModelProps {
+    /**
+     * The ID of the user whose status should be displayed.
+     */
+    userId: string;
+    /**
+     * The Matrix client instance.
+     */
+    matrixClient: MatrixClient;
+}
+
+export class UserStatusIconViewModel extends BaseViewModel<UserStatusIconViewSnapshot, UserStatusIconViewModelProps> {
+    public constructor(props: UserStatusIconViewModelProps) {
+        super(props, { status: undefined });
+
+        if (!SettingsStore.getValue("feature_user_status")) {
+            return;
+        }
+
+        this.disposables.trackListener(
+            props.matrixClient,
+            ClientEvent.UserProfileUpdate,
+            this.onUserProfileUpdate as (...args: unknown[]) => void,
+        );
+
+        fetchUserStatus(props.matrixClient, props.userId)
+            .then((status) => {
+                if (this.isDisposed) return;
+                this.snapshot.merge({ status });
+            })
+            .catch((err) => {
+                logger.warn("Failed to fetch user status:", err);
+            });
+    }
+
+    private onUserProfileUpdate = (syncedUserId: string, syncProfile: Record<string, unknown> | null): void => {
+        if (syncedUserId !== this.props.userId) return;
+        this.snapshot.merge({
+            status: userStatusFromProfile(
+                syncProfile?.["org.matrix.msc4426.status"],
+                syncProfile?.["org.matrix.msc4426.call"],
+            ),
+        });
+    };
+}
diff --git a/apps/web/src/viewmodels/structures/ResizerViewModel.test.ts b/apps/web/src/viewmodels/structures/ResizerViewModel.test.ts
new file mode 100644
index 0000000000..5ccfacc10f
--- /dev/null
+++ b/apps/web/src/viewmodels/structures/ResizerViewModel.test.ts
@@ -0,0 +1,190 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, afterEach } from "vitest";
+import { type PointerEvent } from "react";
+
+import { waitFor } from "test-utils-rtl";
+import { type PanelImperativeHandle } from "@element-hq/web-shared-components";
+
+import { ResizerViewModel } from "./ResizerViewModel";
+import SettingsStore from "../../settings/SettingsStore";
+import { SettingLevel } from "../../settings/SettingLevel";
+import { CallStore } from "../../stores/CallStore";
+
+/** The pointer handlers only read where the pointer is, so that is all a test has to give them. */
+const pointerAt = (x: number, y: number) => ({ clientX: x, clientY: y }) as PointerEvent;
+
+describe("LeftPanelResizerViewModel", () => {
+    afterEach(() => {
+        localStorage.clear();
+        SettingsStore.reset();
+    });
+
+    describe("Initial state is correct", () => {
+        it("should have correct initial state when panel was previously collapsed", () => {
+            SettingsStore.setValue("RoomList.isPanelCollapsed", null, SettingLevel.DEVICE, true);
+            const vm = new ResizerViewModel(CallStore.instance);
+            expect(vm.getSnapshot()).toStrictEqual({
+                isCollapsed: true,
+                initialSize: 0,
+            });
+        });
+
+        it("should have correct initial state when panel was previously resized", () => {
+            SettingsStore.setValue("RoomList.panelSize", null, SettingLevel.DEVICE, 34);
+            const vm = new ResizerViewModel(CallStore.instance);
+            expect(vm.getSnapshot()).toStrictEqual({
+                isCollapsed: false,
+                initialSize: 34,
+            });
+        });
+
+        it("should have correct initial state when panel was neither resized nor collapsed", () => {
+            const vm = new ResizerViewModel(CallStore.instance);
+            expect(vm.getSnapshot()).toStrictEqual({
+                isCollapsed: false,
+                initialSize: undefined,
+            });
+        });
+    });
+
+    it("should update isCollapsed on onLeftPanelResized()", async () => {
+        const vm = new ResizerViewModel(CallStore.instance);
+        vm.onLeftPanelResize({ inPixels: 100, asPercentage: 6 });
+        await waitFor(() => {
+            expect(vm.getSnapshot().isCollapsed).toStrictEqual(false);
+        });
+        vm.onLeftPanelResize({ inPixels: 0, asPercentage: 6 });
+        await waitFor(() => {
+            expect(vm.getSnapshot().isCollapsed).toStrictEqual(true);
+        });
+    });
+
+    it("should noop on click when handle is not yet set", () => {
+        const vm = new ResizerViewModel(CallStore.instance);
+        expect(() => {
+            // Click
+            vm.onPointerDown(pointerAt(100, 100));
+            vm.onPointerUp();
+        }).not.toThrow();
+    });
+
+    it("should noop on mouse drag", () => {
+        const vm = new ResizerViewModel(CallStore.instance);
+        SettingsStore.setValue("RoomList.panelSize", null, SettingLevel.DEVICE, 34);
+        const mockHandle = {
+            resize: vi.fn(),
+            isCollapsed: vi.fn().mockReturnValue(true),
+            getSize: vi.fn().mockReturnValue({
+                inPixels: 0,
+            }),
+            collapse: vi.fn(),
+        } as unknown as PanelImperativeHandle;
+        vm.setPanelHandle(mockHandle);
+
+        // Simulate drag
+        vm.onPointerDown(pointerAt(100, 100));
+        vm.onPointerMove(pointerAt(160, 100));
+        vm.onPointerUp();
+
+        expect(mockHandle.resize).not.toHaveBeenCalledWith("34%");
+    });
+
+    it("should expand panel when a click wanders a little", () => {
+        const vm = new ResizerViewModel(CallStore.instance);
+        SettingsStore.setValue("RoomList.panelSize", null, SettingLevel.DEVICE, 34);
+        const mockHandle = {
+            resize: vi.fn(),
+            isCollapsed: vi.fn().mockReturnValue(true),
+            getSize: vi.fn().mockReturnValue(0),
+        } as unknown as PanelImperativeHandle;
+        vm.setPanelHandle(mockHandle);
+
+        // A trackpad rarely holds the pointer still between press and release.
+        vm.onPointerDown(pointerAt(100, 100));
+        vm.onPointerMove(pointerAt(101, 102));
+        vm.onPointerUp();
+
+        expect(mockHandle.resize).toHaveBeenCalledWith("34%");
+    });
+
+    it("should expand panel on a click that follows moving across the separator", () => {
+        const vm = new ResizerViewModel(CallStore.instance);
+        SettingsStore.setValue("RoomList.panelSize", null, SettingLevel.DEVICE, 34);
+        const mockHandle = {
+            resize: vi.fn(),
+            isCollapsed: vi.fn().mockReturnValue(true),
+            getSize: vi.fn().mockReturnValue(0),
+        } as unknown as PanelImperativeHandle;
+        vm.setPanelHandle(mockHandle);
+
+        // Pointer moves fire on hover too, with no button held.
+        vm.onPointerMove(pointerAt(300, 300));
+        vm.onPointerDown(pointerAt(100, 100));
+        vm.onPointerUp();
+
+        expect(mockHandle.resize).toHaveBeenCalledWith("34%");
+    });
+
+    describe("should expand panel on double click when panel is collapsed", () => {
+        it("to last non-zero width that the user set", () => {
+            const vm = new ResizerViewModel(CallStore.instance);
+            SettingsStore.setValue("RoomList.panelSize", null, SettingLevel.DEVICE, 34);
+            const mockHandle = {
+                resize: vi.fn(),
+                isCollapsed: vi.fn().mockReturnValue(true),
+                getSize: vi.fn().mockReturnValue(0),
+            } as unknown as PanelImperativeHandle;
+            vm.setPanelHandle(mockHandle);
+            // Simulate click
+            vm.onPointerDown(pointerAt(100, 100));
+            vm.onPointerUp();
+            expect(mockHandle.resize).toHaveBeenCalledWith("34%");
+        });
+
+        it("to maximum size of the panel", () => {
+            const vm = new ResizerViewModel(CallStore.instance);
+            const mockHandle = {
+                resize: vi.fn(),
+                isCollapsed: vi.fn().mockReturnValue(true),
+                getSize: vi.fn().mockReturnValue(0),
+            } as unknown as PanelImperativeHandle;
+            vm.setPanelHandle(mockHandle);
+            // Simulate click
+            vm.onPointerDown(pointerAt(100, 100));
+            vm.onPointerUp();
+            expect(mockHandle.resize).toHaveBeenCalledWith("100%");
+        });
+    });
+
+    it("should collapse panel on click when panel is expanded", () => {
+        const vm = new ResizerViewModel(CallStore.instance);
+        const mockHandle = {
+            collapse: vi.fn(),
+            isCollapsed: vi.fn().mockReturnValue(false),
+        } as unknown as PanelImperativeHandle;
+        vm.setPanelHandle(mockHandle);
+
+        vm.onDoubleClick();
+        expect(mockHandle.collapse).toHaveBeenCalled();
+    });
+
+    it("should ignore first resized event", () => {
+        const vm = new ResizerViewModel(CallStore.instance);
+        const mockHandle = {
+            resize: vi.fn(),
+            getSize: vi.fn().mockReturnValue(0),
+        } as unknown as PanelImperativeHandle;
+        vm.setPanelHandle(mockHandle);
+
+        vm.onLeftPanelResized(50);
+        expect(mockHandle.resize).not.toHaveBeenCalled();
+    });
+});
diff --git a/apps/web/src/viewmodels/structures/ResizerViewModel.ts b/apps/web/src/viewmodels/structures/ResizerViewModel.ts
index 7e14523590..bf41469236 100644
--- a/apps/web/src/viewmodels/structures/ResizerViewModel.ts
+++ b/apps/web/src/viewmodels/structures/ResizerViewModel.ts
@@ -15,23 +15,25 @@ import {
     type ResizerViewSnapshot,
 } from "@element-hq/web-shared-components";
 import { debounce } from "lodash";
-import whatInput from "what-input";
+import { type PointerEvent } from "react";
 
 import SettingsStore from "../../settings/SettingsStore";
 import { SettingLevel } from "../../settings/SettingLevel";
+import { AutoCollapse } from "./auto-collapse/AutoCollapse";
+import { type CallStore } from "../../stores/CallStore";
 
 function getInitialState(): ResizerViewSnapshot {
-    if (SettingsStore.getValue("RoomList.isPanelCollapsed")) {
+    const shouldStartCollapsed =
+        SettingsStore.getValue("RoomList.isPanelCollapsed") || AutoCollapse.shouldStartCollapsed();
+    if (shouldStartCollapsed) {
         return {
             isCollapsed: true,
             initialSize: 0,
-            isFocusedViaKeyboard: false,
         };
     }
     return {
         isCollapsed: false,
         initialSize: SettingsStore.getValue("RoomList.panelSize") ?? undefined,
-        isFocusedViaKeyboard: false,
     };
 }
 
@@ -47,8 +49,36 @@ export class ResizerViewModel
      */
     private panelHandle?: PanelImperativeHandle;
 
-    public constructor() {
+    /**
+     * Needed to distinguish between a drag and a click on the separator.
+     */
+    private readonly mouseClickHandler: MouseClickHandler;
+
+    /**
+     * Orchestrator for auto collapse behaviour.
+     */
+    private readonly autoCollapse: AutoCollapse;
+
+    /**
+     * Tracks whether we've seen the first resized event.
+     */
+    private firstResizedEventSeen = false;
+
+    public constructor(callStore: CallStore) {
         super(undefined, getInitialState());
+
+        // Run onSeparatorClick when the separator is clicked.
+        this.mouseClickHandler = new MouseClickHandler(this.onSeparatorClick);
+        this.autoCollapse = this.disposables.track(
+            new AutoCollapse(
+                this.onSeparatorClick,
+                () => {
+                    this.panelHandle?.collapse();
+                    this.snapshot.merge({ isCollapsed: true });
+                },
+                callStore,
+            ),
+        );
     }
 
     public onLeftPanelResize = debounce((panelSize: PanelSize): void => {
@@ -57,12 +87,19 @@ export class ResizerViewModel
     }, 50);
 
     public onLeftPanelResized = (newSize: number): void => {
-        // We don't want the panels to have fractional widths as that can cause blurry UI elements.
-        if (!Number.isInteger(newSize)) {
-            this.panelHandle?.resize(`${Math.round(newSize)}%`);
+        if (!this.firstResizedEventSeen) {
+            // When the panel is first rendered, we get a resized event.
+            // This should be ignored to prevent rewriting the setting value and
+            // to avoid confusing the collapse behaviour code.
+            this.firstResizedEventSeen = true;
             return;
         }
 
+        // Early return if we should be ignoring this event due to some auto-collapse behaviour.
+        if (this.autoCollapse.shouldIgnoreResize) return;
+
+        this.autoCollapse.onLeftPanelResized();
+
         const isCollapsed = newSize === 0;
         // Store the size if the panel isn't collapsed.
         if (!isCollapsed) {
@@ -79,32 +116,69 @@ export class ResizerViewModel
         this.panelHandle = handle;
     };
 
-    public onSeparatorClick = (): void => {
+    private onSeparatorClick = (): void => {
+        // When panel is collapsed, single click should expand the panel.
         if (this.panelHandle?.isCollapsed()) {
             const lastSize = SettingsStore.getValue("RoomList.panelSize");
             this.panelHandle.resize(`${lastSize ?? 100}%`);
+            this.autoCollapse.onLeftPanelResized();
         }
     };
 
-    public onFocus = (): void => {
-        /**
-         * The intention here is to make the separator visible when it is focused by keyboard
-         * navigation i.e tabbing through the app.
-         *
-         * There's a good reason to take this approach instead of just relying on the focus-visible
-         * selector:
-         * When exactly an element gets focus-visible is determined by browser heuristics and usually
-         * interacting with the mouse will not give an element focus-visible.
-         * However with this separator on chrome, mouse interaction occasionally gives it focus-visible.
-         * The leads to flakey separator behaviour.
-         */
-        const currentNavigation = whatInput.ask();
-        if (currentNavigation === "keyboard") {
-            this.snapshot.merge({ isFocusedViaKeyboard: true });
-        }
+    public onDoubleClick = (): void => {
+        // When the panel is expanded, double click should collapse.
+        if (!this.panelHandle?.isCollapsed()) this.panelHandle?.collapse();
     };
 
-    public onBlur = (): void => {
-        this.snapshot.merge({ isFocusedViaKeyboard: false });
+    public onPointerUp = (): void => {
+        this.mouseClickHandler.onPointerUp();
+    };
+
+    public onPointerMove = (event: PointerEvent): void => {
+        this.mouseClickHandler.onPointerMove(event.clientX, event.clientY);
+    };
+
+    public onPointerDown = (event: PointerEvent): void => {
+        this.mouseClickHandler.onPointerDown(event.clientX, event.clientY);
+    };
+}
+
+/**
+ * How far the pointer may travel between going down and coming up and still count as a click rather
+ * than a drag. A trackpad rarely holds a pointer perfectly still, and a separator that only opens on
+ * a pixel-perfect click reads as one that ignores clicks.
+ */
+const CLICK_TOLERANCE_PX = 5;
+
+/**
+ * Dragging the separator will emit a click event.
+ * This class uses pointer event handlers to distinguish between a drag and a click
+ * on the separator.
+ */
+class MouseClickHandler {
+    public constructor(private readonly onClick: () => void) {}
+
+    /** Where the pointer went down, for as long as it is down. */
+    private origin: { x: number; y: number } | null = null;
+    private isResize = false;
+
+    public onPointerUp = (): void => {
+        this.origin = null;
+        if (!this.isResize) this.onClick();
+    };
+
+    public onPointerDown = (x: number, y: number): void => {
+        this.origin = { x, y };
+        this.isResize = false;
+    };
+
+    public onPointerMove = (x: number, y: number): void => {
+        // Moving across the separator with no button held is not a drag, and must not be allowed to
+        // spend the next click.
+        if (!this.origin) return;
+
+        if (Math.abs(x - this.origin.x) > CLICK_TOLERANCE_PX || Math.abs(y - this.origin.y) > CLICK_TOLERANCE_PX) {
+            this.isResize = true;
+        }
     };
 }
diff --git a/apps/web/src/viewmodels/structures/auto-collapse/AutoCollapse.test.ts b/apps/web/src/viewmodels/structures/auto-collapse/AutoCollapse.test.ts
new file mode 100644
index 0000000000..6db3b01f7c
--- /dev/null
+++ b/apps/web/src/viewmodels/structures/auto-collapse/AutoCollapse.test.ts
@@ -0,0 +1,75 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+// @vitest-environment happy-dom
+
+import { describe, expect, beforeEach, it, vi } from "vitest";
+import { AutoCollapse } from "./AutoCollapse";
+import { BaseCollapseBehaviour } from "./behaviours/BaseCollapseBehaviour";
+import type { CollapseHandler } from "./CollapseHandler";
+import { CallStore } from "../../../stores/CallStore";
+
+let instances: BaseCollapseBehaviour[] = [];
+
+class MockBehaviour extends BaseCollapseBehaviour {
+    public constructor(collapseHandler: CollapseHandler) {
+        super(collapseHandler);
+        instances.push(this);
+    }
+
+    public onLeftPanelResized = vi.fn();
+}
+
+class MockBehaviourWithStartCollapsed extends MockBehaviour {
+    public static shouldStartCollapsed(): boolean {
+        return true;
+    }
+}
+
+class MockBehaviourWithIgnoreResize extends MockBehaviour {
+    public get shouldIgnoreResize(): boolean {
+        return true;
+    }
+}
+
+vi.mock("../../../../src/viewmodels/structures/auto-collapse/behaviours/behaviours", () => {
+    return {
+        get Behaviours() {
+            return [MockBehaviour, MockBehaviour, MockBehaviourWithIgnoreResize, MockBehaviourWithStartCollapsed];
+        },
+    };
+});
+
+describe("AutoCollapse", () => {
+    beforeEach(() => {
+        instances = [];
+    });
+
+    it("should calculate initial collapse count correctly", () => {
+        const autoCollapse = new AutoCollapse(vi.fn(), vi.fn(), CallStore.instance);
+        // Since we have one behaviour that tells the app to start collapsed (MockBehaviourWithStartCollapsed),
+        // isAutoCollapsed should be true from initialization.
+        expect(autoCollapse.isAutoCollapsed).toBe(true);
+    });
+
+    it("should proxy onLeftPanelResized to collapseHandler", () => {
+        const autoCollapse = new AutoCollapse(vi.fn(), vi.fn(), CallStore.instance);
+        expect(autoCollapse.isAutoCollapsed).toBe(true);
+        autoCollapse.onLeftPanelResized();
+        expect(autoCollapse.isAutoCollapsed).toBe(false);
+    });
+
+    it("should calculate shouldStartCollapsed correctly", () => {
+        expect(AutoCollapse.shouldStartCollapsed()).toBe(true);
+    });
+
+    it("should calculate shouldIgnoreResize correctly", () => {
+        const autoCollapse = new AutoCollapse(vi.fn(), vi.fn(), CallStore.instance);
+        // Because of MockBehaviourWithIgnoreResize, shouldIgnoreResize should be true.
+        expect(autoCollapse.shouldIgnoreResize).toBe(true);
+    });
+});
diff --git a/apps/web/src/viewmodels/structures/auto-collapse/AutoCollapse.ts b/apps/web/src/viewmodels/structures/auto-collapse/AutoCollapse.ts
new file mode 100644
index 0000000000..0661ad24b9
--- /dev/null
+++ b/apps/web/src/viewmodels/structures/auto-collapse/AutoCollapse.ts
@@ -0,0 +1,74 @@
+/*
+ * Copyright 2026 Element Creations 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 CallStore } from "../../../stores/CallStore";
+import { CollapseHandler } from "./CollapseHandler";
+import type { BaseCollapseBehaviour } from "./behaviours/BaseCollapseBehaviour";
+import { Behaviours } from "./behaviours/behaviours";
+
+/**
+ * This class orchestrates all the auto-collapse behaviours.
+ */
+export class AutoCollapse {
+    private readonly behaviours: BaseCollapseBehaviour[] = [];
+    private readonly collapseHandler: CollapseHandler;
+
+    /**
+     * @param expandPanel Callback that should expand the left panel
+     * @param collapsePanel Callback that should collapse the left panel
+     * @param callStore Instance of the call store.
+     */
+    public constructor(expandPanel: () => void, collapsePanel: () => void, callStore: CallStore) {
+        // Calculate the initial value for autoCollapsedCount
+        const initialAutoCollapsedCount = Behaviours.reduce(
+            (count, B) => (B.shouldStartCollapsed() ? count + 1 : count),
+            0,
+        );
+        this.collapseHandler = new CollapseHandler(expandPanel, collapsePanel, initialAutoCollapsedCount);
+
+        for (const Behaviour of Behaviours) {
+            this.behaviours.push(new Behaviour(this.collapseHandler, callStore));
+        }
+    }
+
+    /**
+     * When this returns true, any left panel resized events should be ignored.
+     */
+    public get shouldIgnoreResize(): boolean {
+        return this.behaviours.some((b) => b.shouldIgnoreResize);
+    }
+
+    /**
+     * Whether the panel is currently auto-collapsed.
+     */
+    public get isAutoCollapsed(): boolean {
+        return this.collapseHandler.isAutoCollapsed;
+    }
+
+    /**
+     * Returns boolean indicating whether the left panel should be collapsed at app start.
+     */
+    public static shouldStartCollapsed(): boolean {
+        return Behaviours.some((B) => B.shouldStartCollapsed());
+    }
+
+    /**
+     * Dispose the behaviours in sequence.
+     */
+    public dispose = (): void => {
+        for (const behaviour of this.behaviours) {
+            behaviour.dispose();
+        }
+    };
+
+    /**
+     * Should be called when the left panel is resized.
+     */
+    public onLeftPanelResized = (): void => {
+        this.collapseHandler.onLeftPanelResized();
+    };
+}
diff --git a/apps/web/src/viewmodels/structures/auto-collapse/CollapseHandler.test.ts b/apps/web/src/viewmodels/structures/auto-collapse/CollapseHandler.test.ts
new file mode 100644
index 0000000000..a217d65eb5
--- /dev/null
+++ b/apps/web/src/viewmodels/structures/auto-collapse/CollapseHandler.test.ts
@@ -0,0 +1,54 @@
+/*
+ * Copyright 2026 Element Creations 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 { describe, it, expect, vi } from "vitest";
+import { CollapseHandler } from "./CollapseHandler";
+
+function getCollapseHandler() {
+    const expandPanel = vi.fn();
+    const collapsePanel = vi.fn();
+    const collapseHandler = new CollapseHandler(expandPanel, collapsePanel, 0);
+    return { collapseHandler, expandPanel, collapsePanel };
+}
+
+describe("CollapseHandler", () => {
+    it("should be possible to collapse and expand the panel", () => {
+        const { collapseHandler, expandPanel, collapsePanel } = getCollapseHandler();
+        collapseHandler.collapse();
+        expect(collapseHandler.isAutoCollapsed).toBe(true);
+        expect(collapsePanel).toHaveBeenCalledTimes(1);
+
+        collapseHandler.expand();
+        expect(collapseHandler.isAutoCollapsed).toBe(false);
+        expect(expandPanel).toHaveBeenCalledTimes(1);
+    });
+
+    it("should retain auto collapsed state on sequential calls of expand and collapse", () => {
+        const { collapseHandler, expandPanel, collapsePanel } = getCollapseHandler();
+        // behaviour X collapses the panel
+        collapseHandler.collapse();
+        expect(collapsePanel).toHaveBeenCalledTimes(1);
+
+        // behaviour Y collapses the panel
+        collapseHandler.collapse();
+        // Since panel is already collapsed, we do not expect another call.
+        expect(collapsePanel).toHaveBeenCalledTimes(1);
+
+        // behaviour Y expands the panel
+        collapseHandler.expand();
+        // should still be auto collapsed because behaviour X hasn't expanded the panel
+        expect(collapseHandler.isAutoCollapsed).toBe(true);
+        // The actual panel should not be expanded yet
+        expect(expandPanel).toHaveBeenCalledTimes(0);
+
+        // behaviour Y expands the panel
+        collapseHandler.expand();
+        // all behaviours have expanded the panel, so no longer auto collapsed
+        expect(collapseHandler.isAutoCollapsed).toBe(false);
+        expect(expandPanel).toHaveBeenCalledTimes(1);
+    });
+});
diff --git a/apps/web/src/viewmodels/structures/auto-collapse/CollapseHandler.ts b/apps/web/src/viewmodels/structures/auto-collapse/CollapseHandler.ts
new file mode 100644
index 0000000000..e9a897ba7d
--- /dev/null
+++ b/apps/web/src/viewmodels/structures/auto-collapse/CollapseHandler.ts
@@ -0,0 +1,85 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+/**
+ * Contains auto-collapsed state and methods to expand/collapse the panel.
+ * This class is used by the different auto-collapse behaviours.
+ */
+export class CollapseHandler {
+    /**
+     * We use this count to control the expand/collapse calls so that the
+     * behaviours do not override each other.
+     *
+     * For example, consider the sequence:
+     * 1. Behaviour A collapses the panel
+     * 2. Behaviour B collapses the panel
+     * 3. Behaviour B expands the panel
+     * 4. Behaviour A expands the panel
+     *
+     * The expand() call made by behaviour B in step 3 should noop since the panel was
+     * also collapsed by behaviour A which hasn't yet expanded the panel.
+     */
+    private autoCollapsedCount: number;
+
+    /**
+     * @param expandPanel Callback that should expand the left panel
+     * @param collapsePanel Callback that should collapse the left panel
+     * @param initialAutoCollapsedCount The initial value for autoCollapsedCount, defaults to 0.
+     */
+    public constructor(
+        private expandPanel: () => void,
+        private collapsePanel: () => void,
+        initialAutoCollapsedCount = 0,
+    ) {
+        this.autoCollapsedCount = initialAutoCollapsedCount;
+    }
+
+    /**
+     * Collapse the left panel.
+     */
+    public collapse = (): void => {
+        this.autoCollapsedCount++;
+        if (this.autoCollapsedCount === 1) {
+            this.collapsePanel();
+        }
+    };
+
+    /**
+     * Expand the left panel.
+     */
+    public expand = (): void => {
+        /**
+         * Some behaviour is asking us to expand the panel but the count is zero.
+         * This happens when the user manually resized the left panel after some
+         * behaviour collapsed the panel.
+         * We can ignore this request to expand the panel since we don't want to
+         * override the manual changes the user made.
+         */
+        if (this.autoCollapsedCount === 0) return;
+
+        this.autoCollapsedCount--;
+        if (this.autoCollapsedCount === 0) {
+            this.expandPanel();
+        }
+    };
+
+    /**
+     * Whether the panel is collapsed due to some behaviour.
+     */
+    public get isAutoCollapsed(): boolean {
+        return this.autoCollapsedCount > 0;
+    }
+
+    public onLeftPanelResized(): void {
+        /**
+         * The user has manually resized the left-panel, reset the count
+         * so that some collapse behaviour does not override the user
+         * choice.
+         */
+        this.autoCollapsedCount = 0;
+    }
+}
diff --git a/apps/web/src/viewmodels/structures/auto-collapse/behaviours/BaseCollapseBehaviour.ts b/apps/web/src/viewmodels/structures/auto-collapse/behaviours/BaseCollapseBehaviour.ts
new file mode 100644
index 0000000000..e54fba2a0e
--- /dev/null
+++ b/apps/web/src/viewmodels/structures/auto-collapse/behaviours/BaseCollapseBehaviour.ts
@@ -0,0 +1,41 @@
+/*
+ * Copyright 2026 Element Creations 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 { CollapseHandler } from "../CollapseHandler";
+
+/**
+ * The left panel should be auto-collapsed under certain app states.
+ * This class provides a base for writing such logic.
+ */
+export class BaseCollapseBehaviour {
+    public constructor(protected readonly collapseHandler: CollapseHandler) {}
+
+    /**
+     * This method should be used to remove any event listeners that this behaviour
+     * uses.
+     */
+    public dispose = (): void => {
+        return;
+    };
+
+    /**
+     * Whether currently arriving left panel resized events should be ignored according
+     * to this behaviour.
+     * This can be used to tell the ResizerViewModel to not process incoming resize
+     * events.
+     */
+    public get shouldIgnoreResize(): boolean {
+        return false;
+    }
+
+    /**
+     * Whether the panel should be collapsed at app start according to this behaviour.
+     */
+    public static shouldStartCollapsed(): boolean {
+        return false;
+    }
+}
diff --git a/apps/web/src/viewmodels/structures/auto-collapse/behaviours/CollapseOnCallResizeBehaviour.test.ts b/apps/web/src/viewmodels/structures/auto-collapse/behaviours/CollapseOnCallResizeBehaviour.test.ts
new file mode 100644
index 0000000000..745938c6a7
--- /dev/null
+++ b/apps/web/src/viewmodels/structures/auto-collapse/behaviours/CollapseOnCallResizeBehaviour.test.ts
@@ -0,0 +1,59 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+// @vitest-environment happy-dom
+
+import EventEmitter from "node:events";
+
+import { type CallStore, CallStoreEvent } from "../../../../stores/CallStore";
+import { CollapseOnCallResizeBehaviour } from "./CollapseOnCallResizeBehaviour";
+import { CollapseHandler } from "../CollapseHandler";
+import { describe, it, expect, vi } from "vitest";
+
+vi.useFakeTimers();
+
+describe("CollapseOnCallResizeBehaviour", () => {
+    it("Should collapse/expand the panel on call", () => {
+        const mockCallStore = new EventEmitter() as unknown as CallStore;
+
+        const expandPanel = vi.fn();
+        const collapsePanel = vi.fn();
+        const collapseHandler = new CollapseHandler(expandPanel, collapsePanel, 0);
+        new CollapseOnCallResizeBehaviour(collapseHandler, mockCallStore);
+
+        // No calls yet
+        expect(expandPanel).not.toHaveBeenCalled();
+        expect(collapsePanel).not.toHaveBeenCalled();
+
+        // Let's say we get a call
+        mockCallStore.emit(CallStoreEvent.ConnectedCalls, new Set([1]));
+        expect(collapsePanel).toHaveBeenCalledTimes(1);
+
+        // When the call is over
+        mockCallStore.emit(CallStoreEvent.ConnectedCalls, new Set([]));
+        expect(expandPanel).toHaveBeenCalledTimes(1);
+    });
+
+    it("should set shouldIgnoreResize to true on call", () => {
+        const mockCallStore = new EventEmitter() as unknown as CallStore;
+
+        const expandPanel = vi.fn();
+        const collapsePanel = vi.fn();
+        const collapseHandler = new CollapseHandler(expandPanel, collapsePanel, 0);
+        const behaviour = new CollapseOnCallResizeBehaviour(collapseHandler, mockCallStore);
+
+        // Initially shouldIgnoreResize should be false
+        expect(behaviour.shouldIgnoreResize).toBe(false);
+        // Let's say we get a call
+        mockCallStore.emit(CallStoreEvent.ConnectedCalls, new Set([1]));
+        // shouldIgnoreResize becomes true
+        expect(behaviour.shouldIgnoreResize).toBe(true);
+        // shouldIgnoreResize becomes false after some time
+        vi.runAllTimers();
+        expect(behaviour.shouldIgnoreResize).toBe(false);
+    });
+});
diff --git a/apps/web/src/viewmodels/structures/auto-collapse/behaviours/CollapseOnCallResizeBehaviour.ts b/apps/web/src/viewmodels/structures/auto-collapse/behaviours/CollapseOnCallResizeBehaviour.ts
new file mode 100644
index 0000000000..46cdec2ae6
--- /dev/null
+++ b/apps/web/src/viewmodels/structures/auto-collapse/behaviours/CollapseOnCallResizeBehaviour.ts
@@ -0,0 +1,59 @@
+/*
+ * Copyright 2026 Element Creations 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 { BaseCollapseBehaviour } from "./BaseCollapseBehaviour";
+import type { Call } from "../../../../models/Call";
+import { type CallStore, CallStoreEvent } from "../../../../stores/CallStore";
+import type { CollapseHandler } from "../CollapseHandler";
+
+/**
+ * This behaviour:
+ * - Collapses the left-panel when the user joins a call.
+ * - Expands the left-panel when the user leaves that call.
+ */
+export class CollapseOnCallResizeBehaviour extends BaseCollapseBehaviour {
+    private callJustStarted: boolean = false;
+    private callStartedTimeout: number = 0;
+
+    public constructor(
+        collapseHandler: CollapseHandler,
+        private readonly callStore: CallStore,
+    ) {
+        super(collapseHandler);
+        this.callStore.on(CallStoreEvent.ConnectedCalls, this.onCallConnected);
+    }
+
+    private onCallConnected = (calls: Set<Call>): void => {
+        if (calls.size > 0) {
+            this.setCallJustStarted();
+            this.collapseHandler.collapse();
+        } else if (calls.size === 0) this.collapseHandler.expand();
+    };
+
+    /**
+     * When a call has just started, we'll probably do some manual resizing according
+     * to this behaviour. We don't want ResizerViewModel to process these events.
+     */
+    private setCallJustStarted = (): void => {
+        // Indicate that a call was just started, will make shouldIgnoreResize true.
+        this.callJustStarted = true;
+        window.clearTimeout(this.callStartedTimeout);
+
+        // We only want shouldIgnoreResize to be true for a second.
+        this.callStartedTimeout = window.setTimeout(() => {
+            this.callJustStarted = false;
+        }, 1000);
+    };
+
+    public get shouldIgnoreResize(): boolean {
+        return this.callJustStarted;
+    }
+
+    public dispose = (): void => {
+        this.callStore.off(CallStoreEvent.ConnectedCalls, this.onCallConnected);
+    };
+}
diff --git a/apps/web/src/viewmodels/structures/auto-collapse/behaviours/CollapseOnWindowResizeBehaviour.test.ts b/apps/web/src/viewmodels/structures/auto-collapse/behaviours/CollapseOnWindowResizeBehaviour.test.ts
new file mode 100644
index 0000000000..d9aa1b7241
--- /dev/null
+++ b/apps/web/src/viewmodels/structures/auto-collapse/behaviours/CollapseOnWindowResizeBehaviour.test.ts
@@ -0,0 +1,52 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+// @vitest-environment happy-dom
+
+import { describe, expect, it, vi } from "vitest";
+import UIStore, { UI_EVENTS } from "../../../../stores/UIStore";
+import { CollapseHandler } from "../CollapseHandler";
+import { CollapseOnWindowResizeBehaviour } from "./CollapseOnWindowResizeBehaviour";
+
+vi.useFakeTimers();
+
+describe("CollapseOnWindowResizeBehaviour", () => {
+    it("Should collapse/expand the panel when the window is resized", () => {
+        const expandPanel = vi.fn();
+        const collapsePanel = vi.fn();
+        const collapseHandler = new CollapseHandler(expandPanel, collapsePanel, 0);
+        new CollapseOnWindowResizeBehaviour(collapseHandler);
+        // Making the window smaller should collapse the panel.
+        UIStore.instance.emit(UI_EVENTS.WidthDecreased, 750);
+        expect(collapsePanel).toHaveBeenCalledTimes(1);
+        // Making the window larger should expand the panel.
+        UIStore.instance.emit(UI_EVENTS.WidthIncreased, 950);
+        vi.runAllTimers();
+        expect(expandPanel).toHaveBeenCalledTimes(1);
+    });
+
+    it("should set shouldIgnoreResize to true when window is being resized", () => {
+        const collapseHandler = new CollapseHandler(vi.fn(), vi.fn(), 0);
+        const behaviour = new CollapseOnWindowResizeBehaviour(collapseHandler);
+        expect(behaviour.shouldIgnoreResize).toBe(false);
+        // When the window is being resized, this behaviour should indicate that resize events
+        // should be ignored.
+        UIStore.instance.isWindowBeingResized = true;
+        expect(behaviour.shouldIgnoreResize).toBe(true);
+    });
+
+    it("should return correct shouldStartCollapsed", () => {
+        const collapseHandler = new CollapseHandler(vi.fn(), vi.fn(), 0);
+        new CollapseOnWindowResizeBehaviour(collapseHandler);
+        // When the window is smaller than 768px, start collapsed.
+        UIStore.instance.windowWidth = 750;
+        expect(CollapseOnWindowResizeBehaviour.shouldStartCollapsed()).toBe(true);
+        // When the window is larger than 768px, start expanded.
+        UIStore.instance.windowWidth = 900;
+        expect(CollapseOnWindowResizeBehaviour.shouldStartCollapsed()).toBe(false);
+    });
+});
diff --git a/apps/web/src/viewmodels/structures/auto-collapse/behaviours/CollapseOnWindowResizeBehaviour.ts b/apps/web/src/viewmodels/structures/auto-collapse/behaviours/CollapseOnWindowResizeBehaviour.ts
new file mode 100644
index 0000000000..c6d2a3085f
--- /dev/null
+++ b/apps/web/src/viewmodels/structures/auto-collapse/behaviours/CollapseOnWindowResizeBehaviour.ts
@@ -0,0 +1,76 @@
+/*
+ * Copyright 2026 Element Creations 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 { throttle } from "lodash";
+
+import UIStore, { UI_EVENTS } from "../../../../stores/UIStore";
+import { BaseCollapseBehaviour } from "./BaseCollapseBehaviour";
+import type { CollapseHandler } from "../CollapseHandler";
+
+/**
+ * The viewport width below which the left panel will be auto-collapsed.
+ */
+const AUTO_COLLAPSE_WIDTH = 768;
+
+/**
+ * Implements auto-collapse logic that collapses and expands the left panel when the
+ * app window is resized.
+ */
+export class CollapseOnWindowResizeBehaviour extends BaseCollapseBehaviour {
+    private isAutoCollapsed = CollapseOnWindowResizeBehaviour.shouldStartCollapsed();
+
+    public constructor(collapseHandler: CollapseHandler) {
+        super(collapseHandler);
+        UIStore.instance.on(UI_EVENTS.WidthIncreased, this.onWindowWidthIncreased);
+        UIStore.instance.on(UI_EVENTS.WidthDecreased, this.onWindowWidthDecreased);
+    }
+
+    private onWindowWidthDecreased = throttle((currentWindowWidth: number): void => {
+        // If the panel is already collapsed, we have nothing else left to do.
+        if (this.isAutoCollapsed) return;
+
+        if (currentWindowWidth <= AUTO_COLLAPSE_WIDTH) {
+            this.collapseHandler.collapse();
+            this.isAutoCollapsed = true;
+        }
+    }, 50);
+
+    private onWindowWidthIncreased = throttle((currentWindowWidth: number): void => {
+        if (currentWindowWidth > AUTO_COLLAPSE_WIDTH) {
+            // If the panel isn't already collapsed, we don't need to expand the panel.
+            if (!this.isAutoCollapsed) return;
+            // As the window is resized, react-resizable-panels is also resizing the panels.
+            // We'll expand the panel after a second to avoid racing with the library logic.
+            window.setTimeout(() => {
+                this.collapseHandler.expand();
+                this.isAutoCollapsed = false;
+            }, 1000);
+        }
+    }, 50);
+
+    /**
+     * Whether the window is currently being resized.
+     */
+    public get shouldIgnoreResize(): boolean {
+        // When the window is resized, the panel is resized in various ways.
+        // These transient changes should not be persisted in settings.
+        // So early return if that is the case.
+        return UIStore.instance.isWindowBeingResized;
+    }
+
+    /**
+     * Remove's any event listeners used by this class.
+     */
+    public dispose = (): void => {
+        UIStore.instance.off(UI_EVENTS.WidthIncreased, this.onWindowWidthIncreased);
+        UIStore.instance.off(UI_EVENTS.WidthDecreased, this.onWindowWidthDecreased);
+    };
+
+    public static shouldStartCollapsed(): boolean {
+        return UIStore.instance.windowWidth <= AUTO_COLLAPSE_WIDTH;
+    }
+}
diff --git a/apps/web/src/viewmodels/structures/auto-collapse/behaviours/behaviours.ts b/apps/web/src/viewmodels/structures/auto-collapse/behaviours/behaviours.ts
new file mode 100644
index 0000000000..5ac3f24b7d
--- /dev/null
+++ b/apps/web/src/viewmodels/structures/auto-collapse/behaviours/behaviours.ts
@@ -0,0 +1,14 @@
+/*
+ * Copyright 2026 Element Creations 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 { CollapseOnCallResizeBehaviour } from "./CollapseOnCallResizeBehaviour";
+import { CollapseOnWindowResizeBehaviour } from "./CollapseOnWindowResizeBehaviour";
+
+/**
+ * The auto-collapse behaviours used by the app.
+ */
+export const Behaviours = [CollapseOnWindowResizeBehaviour, CollapseOnCallResizeBehaviour];
diff --git a/apps/web/src/widgets/CapabilityText.tsx b/apps/web/src/widgets/CapabilityText.tsx
index 5f5c8b9a74..a5f5a62883 100644
--- a/apps/web/src/widgets/CapabilityText.tsx
+++ b/apps/web/src/widgets/CapabilityText.tsx
@@ -26,7 +26,7 @@ import { ElementWidgetCapabilities } from "../stores/widgets/ElementWidgetCapabi
 import { MatrixClientPeg } from "../MatrixClientPeg";
 import TextWithTooltip from "../components/views/elements/TextWithTooltip";
 
-type GENERIC_WIDGET_KIND = "generic"; // eslint-disable-line @typescript-eslint/naming-convention
+type GENERIC_WIDGET_KIND = "generic";
 const GENERIC_WIDGET_KIND: GENERIC_WIDGET_KIND = "generic";
 
 type SendRecvStaticCapText = Partial<
@@ -41,6 +41,7 @@ export interface TranslatedCapabilityText {
     byline?: TranslatedString;
 }
 
+// oxlint-disable-next-line typescript/no-extraneous-class
 export class CapabilityText {
     private static simpleCaps: Record<Capability, Partial<Record<WidgetKind | GENERIC_WIDGET_KIND, TranslationKey>>> = {
         [MatrixCapabilities.AlwaysOnScreen]: {
@@ -133,7 +134,7 @@ export class CapabilityText {
         // First see if we have a super simple line of text to provide back
         if (CapabilityText.simpleCaps[capability]) {
             const textForKind = CapabilityText.simpleCaps[capability];
-            if (textForKind[kind]) return { primary: _t(textForKind[kind]!) };
+            if (textForKind[kind]) return { primary: _t(textForKind[kind]) };
             if (textForKind[GENERIC_WIDGET_KIND]) return { primary: _t(textForKind[GENERIC_WIDGET_KIND]) };
 
             // ... we'll fall through to the generic capability processing at the end of this
diff --git a/apps/web/test/unit-tests/widgets/ManagedHybrid-test.ts b/apps/web/src/widgets/ManagedHybrid.test.ts
similarity index 72%
rename from apps/web/test/unit-tests/widgets/ManagedHybrid-test.ts
rename to apps/web/src/widgets/ManagedHybrid.test.ts
index 126033f2a5..76b2e2a904 100644
--- a/apps/web/test/unit-tests/widgets/ManagedHybrid-test.ts
+++ b/apps/web/src/widgets/ManagedHybrid.test.ts
@@ -6,18 +6,21 @@ 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.
 */
 
+// @vitest-environment happy-dom
+
+import { vi, describe, it, expect, beforeEach } from "vitest";
 import { Room } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
-import fetchMock from "@fetch-mock/jest";
+import fetchMock from "@fetch-mock/vitest";
+import { stubClient } from "test-utils";
 
-import { addManagedHybridWidget, isManagedHybridWidgetEnabled } from "../../../src/widgets/ManagedHybrid";
-import { stubClient } from "../../test-utils";
-import SdkConfig from "../../../src/SdkConfig";
-import WidgetUtils from "../../../src/utils/WidgetUtils";
-import { WidgetLayoutStore } from "../../../src/stores/widgets/WidgetLayoutStore";
+import { addManagedHybridWidget, isManagedHybridWidgetEnabled } from "./ManagedHybrid";
+import SdkConfig from "../SdkConfig";
+import WidgetUtils from "../utils/WidgetUtils";
+import { WidgetLayoutStore } from "../stores/widgets/WidgetLayoutStore";
 
-jest.mock("../../../src/utils/room/getJoinedNonFunctionalMembers", () => ({
-    getJoinedNonFunctionalMembers: jest.fn().mockReturnValue([1, 2]),
+vi.mock("../utils/room/getJoinedNonFunctionalMembers", () => ({
+    getJoinedNonFunctionalMembers: vi.fn().mockReturnValue([1, 2]),
 }));
 
 describe("isManagedHybridWidgetEnabled", () => {
@@ -57,8 +60,8 @@ describe("addManagedHybridWidget", () => {
     });
 
     it("should noop if user lacks permission", async () => {
-        const logSpy = jest.spyOn(logger, "error").mockImplementation();
-        jest.spyOn(WidgetUtils, "canUserModifyWidgets").mockReturnValue(false);
+        const logSpy = vi.spyOn(logger, "error").mockImplementation(() => {});
+        vi.spyOn(WidgetUtils, "canUserModifyWidgets").mockReturnValue(false);
 
         fetchMock.mockClear();
         await addManagedHybridWidget(room);
@@ -67,7 +70,7 @@ describe("addManagedHybridWidget", () => {
     });
 
     it("should noop if no widget_build_url", async () => {
-        jest.spyOn(WidgetUtils, "canUserModifyWidgets").mockReturnValue(true);
+        vi.spyOn(WidgetUtils, "canUserModifyWidgets").mockReturnValue(true);
 
         fetchMock.mockClear();
         await addManagedHybridWidget(room);
@@ -79,9 +82,9 @@ describe("addManagedHybridWidget", () => {
             widget_id: "WIDGET_ID",
             widget: { key: "value" },
         });
-        jest.spyOn(WidgetUtils, "canUserModifyWidgets").mockReturnValue(true);
-        jest.spyOn(WidgetLayoutStore.instance, "canCopyLayoutToRoom").mockReturnValue(true);
-        const setRoomWidgetContentSpy = jest.spyOn(WidgetUtils, "setRoomWidgetContent").mockResolvedValue();
+        vi.spyOn(WidgetUtils, "canUserModifyWidgets").mockReturnValue(true);
+        vi.spyOn(WidgetLayoutStore.instance, "canCopyLayoutToRoom").mockReturnValue(true);
+        const setRoomWidgetContentSpy = vi.spyOn(WidgetUtils, "setRoomWidgetContent").mockResolvedValue();
         SdkConfig.put({
             widget_build_url: "https://widget-build-url",
         });
diff --git a/apps/web/src/widgets/ManagedHybrid.ts b/apps/web/src/widgets/ManagedHybrid.ts
index b1a67db4fb..7c71e1b52d 100644
--- a/apps/web/src/widgets/ManagedHybrid.ts
+++ b/apps/web/src/widgets/ManagedHybrid.ts
@@ -18,13 +18,11 @@ import WidgetStore, { type IApp } from "../stores/WidgetStore";
 import SdkConfig from "../SdkConfig";
 import { getJoinedNonFunctionalMembers } from "../utils/room/getJoinedNonFunctionalMembers";
 
-/* eslint-disable camelcase */
 interface IManagedHybridWidgetData {
     widget_id: string;
     widget: IWidget;
     layout: IStoredLayout;
 }
-/* eslint-enable camelcase */
 
 function getWidgetBuildUrl(room: Room): string | undefined {
     const functionalMembers = getJoinedNonFunctionalMembers(room);
@@ -40,7 +38,6 @@ function getWidgetBuildUrl(room: Room): string | undefined {
     if (isDm && wellKnown?.ignore_dm) {
         return undefined;
     }
-    /* eslint-disable-next-line camelcase */
     return wellKnown?.widget_build_url;
 }
 
@@ -56,7 +53,6 @@ export async function addManagedHybridWidget(room: Room): Promise<void> {
     }
 
     // Get widget data
-    /* eslint-disable-next-line camelcase */
     const widgetBuildUrl = getWidgetBuildUrl(room);
     if (!widgetBuildUrl) {
         return;
diff --git a/apps/web/src/workers/blurhashWorkerFactory.ts b/apps/web/src/workers/blurhashWorkerFactory.ts
index 669ab0a084..2104e704bf 100644
--- a/apps/web/src/workers/blurhashWorkerFactory.ts
+++ b/apps/web/src/workers/blurhashWorkerFactory.ts
@@ -6,7 +6,7 @@ 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.
 */
 
-export default function factory(options?: WorkerOptions | undefined): Worker {
+export default function factory(options?: WorkerOptions): Worker {
     return new Worker(
         /* webpackChunkName: "blurhash.worker" */ new URL("./blurhash.worker.ts", import.meta.url),
         options,
diff --git a/apps/web/src/workers/indexeddbWorkerFactory.ts b/apps/web/src/workers/indexeddbWorkerFactory.ts
index 3ff1e82bf8..c92d578443 100644
--- a/apps/web/src/workers/indexeddbWorkerFactory.ts
+++ b/apps/web/src/workers/indexeddbWorkerFactory.ts
@@ -6,7 +6,7 @@ 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.
 */
 
-export default function factory(options?: WorkerOptions | undefined): Worker {
+export default function factory(options?: WorkerOptions): Worker {
     return new Worker(
         /* webpackChunkName: "indexeddb.worker" */ new URL("./indexeddb.worker.ts", import.meta.url),
         options,
diff --git a/apps/web/src/workers/playbackWorkerFactory.ts b/apps/web/src/workers/playbackWorkerFactory.ts
index 7986184b3c..ceffcd1cab 100644
--- a/apps/web/src/workers/playbackWorkerFactory.ts
+++ b/apps/web/src/workers/playbackWorkerFactory.ts
@@ -6,7 +6,7 @@ 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.
 */
 
-export default function factory(options?: WorkerOptions | undefined): Worker {
+export default function factory(options?: WorkerOptions): Worker {
     return new Worker(
         /* webpackChunkName: "playback.worker" */ new URL("./playback.worker.ts", import.meta.url),
         options,
diff --git a/apps/web/test/globalSetup.ts b/apps/web/test/globalSetup.ts
index c00ca3abf8..fd1c3fbb7d 100644
--- a/apps/web/test/globalSetup.ts
+++ b/apps/web/test/globalSetup.ts
@@ -6,6 +6,7 @@ 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.
 */
 
+// oxlint-disable-next-line import/no-commonjs,unicorn/prefer-module
 module.exports = async () => {
     process.env.TZ = "UTC";
 };
diff --git a/apps/web/test/setup/adapter.ts b/apps/web/test/setup/adapter.ts
new file mode 100644
index 0000000000..9d6c08acff
--- /dev/null
+++ b/apps/web/test/setup/adapter.ts
@@ -0,0 +1,42 @@
+/*
+Copyright 2026 Element Creations 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 { vi } from "vitest";
+import * as vitest from "vitest";
+import { mocked as jestMocked } from "jest-mock";
+
+export const isJest = typeof jest !== "undefined";
+
+/**
+ * Subset of the vitest API surface, with jest equivalents for the same functions when running under jest.
+ */
+const adapter = {
+    fn: isJest ? (jest.fn as unknown as typeof vi.fn) : vi.fn,
+    spyOn: isJest ? (jest.spyOn as unknown as typeof vi.spyOn) : vi.spyOn,
+    mocked: isJest ? (jestMocked as typeof vi.mocked) : vi.mocked,
+    advanceTimersByTime: isJest
+        ? (jest.advanceTimersByTime as unknown as typeof vi.advanceTimersByTime)
+        : vi.advanceTimersByTime,
+} as Pick<typeof vi, "fn" | "spyOn" | "mocked" | "advanceTimersByTime">;
+
+const mocked = adapter.mocked;
+export { adapter as vi, mocked };
+
+const _expect = isJest ? (expect as unknown as typeof vitest.expect) : vitest.expect;
+const _beforeAll = isJest ? (beforeAll as unknown as typeof vitest.beforeAll) : vitest.beforeAll;
+const _afterAll = isJest ? (afterAll as unknown as typeof vitest.afterAll) : vitest.afterAll;
+const _beforeEach = isJest ? (beforeEach as unknown as typeof vitest.beforeEach) : vitest.beforeEach;
+const _afterEach = isJest ? (afterEach as unknown as typeof vitest.afterEach) : vitest.afterEach;
+export {
+    _expect as expect,
+    _beforeAll as beforeAll,
+    _afterAll as afterAll,
+    _beforeEach as beforeEach,
+    _afterEach as afterEach,
+};
+
+export { type Mocked, type MockedObject } from "vitest";
diff --git a/apps/web/test/setup/mocks.ts b/apps/web/test/setup/mocks.ts
index d98991c568..27028742a2 100644
--- a/apps/web/test/setup/mocks.ts
+++ b/apps/web/test/setup/mocks.ts
@@ -6,23 +6,25 @@ 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 { vi } from "./adapter.ts";
+
 export const mocks = {
     AudioBufferSourceNode: {
-        connect: jest.fn(),
-        start: jest.fn(),
-        stop: jest.fn(),
+        connect: vi.fn(),
+        start: vi.fn(),
+        stop: vi.fn(),
     } as unknown as AudioBufferSourceNode,
     AudioContext: {
-        close: jest.fn(),
-        createMediaElementSource: jest.fn(),
-        createMediaStreamDestination: jest.fn(),
-        createMediaStreamSource: jest.fn(),
-        createStreamTrackSource: jest.fn(),
-        createBufferSource: jest.fn((): AudioBufferSourceNode => ({ ...mocks.AudioBufferSourceNode })),
-        getOutputTimestamp: jest.fn(),
-        resume: jest.fn(),
-        setSinkId: jest.fn(),
-        suspend: jest.fn(),
-        decodeAudioData: jest.fn(),
+        close: vi.fn(),
+        createMediaElementSource: vi.fn(),
+        createMediaStreamDestination: vi.fn(),
+        createMediaStreamSource: vi.fn(),
+        createStreamTrackSource: vi.fn(),
+        createBufferSource: vi.fn((): AudioBufferSourceNode => ({ ...mocks.AudioBufferSourceNode })),
+        getOutputTimestamp: vi.fn(),
+        resume: vi.fn(),
+        setSinkId: vi.fn(),
+        suspend: vi.fn(),
+        decodeAudioData: vi.fn(),
     } as unknown as AudioContext,
 };
diff --git a/apps/web/test/setup/setupLanguage.ts b/apps/web/test/setup/setupLanguage.ts
index 6e98061427..8579028d8e 100644
--- a/apps/web/test/setup/setupLanguage.ts
+++ b/apps/web/test/setup/setupLanguage.ts
@@ -9,8 +9,9 @@ Please see LICENSE files in the repository root for full details.
 import fetchMock from "@fetch-mock/jest";
 import { ModuleLoader } from "@element-hq/element-web-module-api";
 import { merge } from "lodash";
+import { setMissingEntryGenerator } from "@element-hq/web-shared-components";
 
-import * as languageHandler from "../../src/languageHandler";
+import { setLanguage } from "../../src/i18n/settings";
 import enElementWeb from "../../src/i18n/strings/en_EN.json";
 import deElementWeb from "../../src/i18n/strings/de_DE.json";
 // Cheat and import relatively here as these aren't exported by the module (should they be?)
@@ -47,7 +48,7 @@ export function setupLanguageMock() {
     fetchMock.mockGlobal();
     fetchMock
         .get(
-            "end:/i18n/languages.json",
+            "include:/i18n/languages.json?",
             {
                 en: "en_EN.json",
                 de: "de_DE.json",
@@ -64,8 +65,8 @@ afterEach(() => fetchMock.callHistory.flush());
 
 // Initialise the fetchMock before the test starts so the languageHandler.setLanguage call below can function
 setupLanguageMock();
-languageHandler.setLanguage("en");
-languageHandler.setMissingEntryGenerator((key) => key.split("|", 2)[1]);
+setLanguage("en");
+setMissingEntryGenerator((key) => key.split("|", 2)[1]);
 
 // Set up the module API (so the i18n API exists)
 const moduleLoader = new ModuleLoader(ModuleApi.instance);
diff --git a/apps/web/test/setupTests.ts b/apps/web/test/setupTests.ts
index f514c10482..e5f1881a01 100644
--- a/apps/web/test/setupTests.ts
+++ b/apps/web/test/setupTests.ts
@@ -6,17 +6,16 @@ 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 { env } from "process";
+import { env } from "node:process";
 import "@testing-library/jest-dom";
 import "blob-polyfill";
 import { secureRandomString } from "matrix-js-sdk/src/randomstring";
-import { mocked } from "jest-mock";
+import { mocked } from "jest-mock-vitest-adapter";
 
 import { PredictableRandom } from "./test-utils/predictableRandom";
 import * as rageshake from "../src/rageshake/rageshake";
 
 declare global {
-    // eslint-disable-next-line no-var
     var IS_REACT_ACT_ENVIRONMENT: boolean;
 }
 
@@ -62,7 +61,7 @@ if (env["GITHUB_ACTIONS"] !== undefined) {
 //
 // These are also require() calls to make sure they get called
 // synchronously.
-/* eslint-disable @typescript-eslint/no-require-imports */
+/* eslint-disable @typescript-eslint/no-require-imports,import/no-commonjs,unicorn/prefer-module */
 require("./setup/setupManualMocks"); // must be first
 require("./setup/setupLanguage");
 require("./setup/setupConfig");
diff --git a/apps/web/test/test-utils/audio.ts b/apps/web/test/test-utils/audio.ts
index eb9f91bcc6..ef775730fa 100644
--- a/apps/web/test/test-utils/audio.ts
+++ b/apps/web/test/test-utils/audio.ts
@@ -6,7 +6,7 @@ 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 EventEmitter from "events";
+import EventEmitter from "node:events";
 import { SimpleObservable } from "matrix-widget-api";
 
 import { type Playback, PlaybackState } from "../../src/audio/Playback";
diff --git a/apps/web/src/accessibility/roving/RovingTabIndexWrapper.tsx b/apps/web/test/test-utils/auth.ts
similarity index 61%
rename from apps/web/src/accessibility/roving/RovingTabIndexWrapper.tsx
rename to apps/web/test/test-utils/auth.ts
index b7f7a2f9a3..9d36fdfb3f 100644
--- a/apps/web/src/accessibility/roving/RovingTabIndexWrapper.tsx
+++ b/apps/web/test/test-utils/auth.ts
@@ -1,9 +1,9 @@
 /*
 Copyright 2024 New Vector Ltd.
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2023 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-export { RovingTabIndexWrapper } from "@element-hq/web-shared-components";
+export { makeDelegatedAuthMetadata } from "matrix-js-sdk/src/testing";
diff --git a/apps/web/test/test-utils/beacon.ts b/apps/web/test/test-utils/beacon.ts
index 2688d223ad..54a0b825fc 100644
--- a/apps/web/test/test-utils/beacon.ts
+++ b/apps/web/test/test-utils/beacon.ts
@@ -6,7 +6,7 @@ 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 MockedObject } from "jest-mock";
+import { type MockedObject } from "jest-mock-vitest-adapter";
 import {
     type MatrixClient,
     MatrixEvent,
@@ -20,6 +20,7 @@ import {
 
 import { getMockGeolocationPositionError } from "./location";
 import { makeRoomWithStateEvents } from "./room";
+import { vi, isJest } from "../setup/adapter.ts";
 
 type InfoContentProps = {
     timeout: number;
@@ -132,14 +133,18 @@ export const makeGeolocationPosition = ({
  */
 export const mockGeolocation = (): MockedObject<Geolocation> => {
     const mockGeolocation = {
-        clearWatch: jest.fn(),
-        getCurrentPosition: jest.fn().mockImplementation((callback) => callback(makeGeolocationPosition({}))),
-        watchPosition: jest.fn().mockImplementation((callback) => callback(makeGeolocationPosition({}))),
+        clearWatch: vi.fn(),
+        getCurrentPosition: vi.fn().mockImplementation((callback) => callback(makeGeolocationPosition({}))),
+        watchPosition: vi.fn().mockImplementation((callback) => callback(makeGeolocationPosition({}))),
     } as unknown as MockedObject<Geolocation>;
 
     // jest jsdom does not provide geolocation
-    // @ts-ignore illegal assignment to readonly property
-    navigator.geolocation = mockGeolocation;
+    if (isJest) {
+        // @ts-ignore illegal assignment to readonly property
+        navigator.geolocation = mockGeolocation;
+    } else {
+        vi.spyOn(navigator, "geolocation", "get").mockReturnValue(mockGeolocation);
+    }
 
     return mockGeolocation;
 };
@@ -165,7 +170,7 @@ export const mockGeolocation = (): MockedObject<Geolocation> => {
  * See for error codes: https://developer.mozilla.org/en-US/docs/Web/API/GeolocationPositionError
  */
 export const watchPositionMockImplementation = (delays: number[], errorCodes: number[] = []) => {
-    return (callback: PositionCallback, error: PositionErrorCallback): number => {
+    return (callback: PositionCallback, error?: PositionErrorCallback | null): number => {
         const position = makeGeolocationPosition({});
 
         let totalDelay = 0;
@@ -173,7 +178,7 @@ export const watchPositionMockImplementation = (delays: number[], errorCodes: nu
             totalDelay += delayMs;
             const timeout = window.setTimeout(() => {
                 if (errorCodes[index]) {
-                    error(getMockGeolocationPositionError(errorCodes[index], "error message"));
+                    error?.(getMockGeolocationPositionError(errorCodes[index], "error message"));
                 } else {
                     callback({ ...position, timestamp: position.timestamp + totalDelay });
                 }
diff --git a/apps/web/test/test-utils/call.ts b/apps/web/test/test-utils/call.ts
index bbfe7eaee8..69b3a32840 100644
--- a/apps/web/test/test-utils/call.ts
+++ b/apps/web/test/test-utils/call.ts
@@ -135,7 +135,7 @@ export function useMockedCalls() {
  * Enables the feature flags required for call tests.
  */
 export function enableCalls(): { enabledSettings: Set<string> } {
-    const enabledSettings = new Set(["feature_group_calls", "feature_video_rooms", "feature_element_call_video_rooms"]);
+    const enabledSettings = new Set(["feature_video_rooms", "feature_element_call_video_rooms", "feature_user_status"]);
     jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName): any => {
         if (settingName.startsWith("feature_")) return enabledSettings.has(settingName);
         if (settingName === "activeCallRoomIds") return [];
diff --git a/apps/web/test/test-utils/client.ts b/apps/web/test/test-utils/client.ts
index 7ab88da0b7..91c3e56238 100644
--- a/apps/web/test/test-utils/client.ts
+++ b/apps/web/test/test-utils/client.ts
@@ -6,12 +6,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import EventEmitter from "events";
-import { type MethodLikeKeys, mocked, type MockedObject, type PropertyLikeKeys } from "jest-mock";
+import EventEmitter from "node:events";
+import { type MockedObject } from "vitest";
+import { type MethodLikeKeys, type PropertyLikeKeys } from "jest-mock";
+import { type MockedObjectDeep } from "@vitest/spy";
 import { Feature, ServerSupport } from "matrix-js-sdk/src/feature";
 import { type MatrixClient, type Room, User } from "matrix-js-sdk/src/matrix";
 
 import { MatrixClientPeg } from "../../src/MatrixClientPeg";
+import { vi } from "../setup/adapter.ts";
 
 /**
  * Mocked generic class with a real EventEmitter.
@@ -53,7 +56,7 @@ export class MockClientWithEventEmitter extends EventEmitter {
  * eg
  * ```
  * const mockClient = getMockClientWithEventEmitter({
-        getUserId: jest.fn().mockReturnValue(aliceId),
+        getUserId: vi.fn().mockReturnValue(aliceId),
     });
  * ```
  *
@@ -62,10 +65,10 @@ export class MockClientWithEventEmitter extends EventEmitter {
 export const getMockClientWithEventEmitter = (
     mockProperties: Partial<Record<keyof MatrixClient, unknown>>,
 ): MockedObject<MatrixClient> => {
-    const mock = mocked(new MockClientWithEventEmitter(mockProperties) as unknown as MatrixClient);
+    const mock = vi.mocked(new MockClientWithEventEmitter(mockProperties) as unknown as MatrixClient);
 
-    jest.spyOn(MatrixClientPeg, "get").mockReturnValue(mock);
-    jest.spyOn(MatrixClientPeg, "safeGet").mockReturnValue(mock);
+    vi.spyOn(MatrixClientPeg, "get").mockReturnValue(mock);
+    vi.spyOn(MatrixClientPeg, "safeGet").mockReturnValue(mock);
 
     // @ts-ignore simplified test stub
     mock.canSupport = new Map();
@@ -76,8 +79,8 @@ export const getMockClientWithEventEmitter = (
 };
 
 export const unmockClientPeg = () => {
-    jest.spyOn(MatrixClientPeg, "get").mockRestore();
-    jest.spyOn(MatrixClientPeg, "safeGet").mockRestore();
+    vi.spyOn(MatrixClientPeg, "get").mockRestore();
+    vi.spyOn(MatrixClientPeg, "safeGet").mockRestore();
 };
 
 /**
@@ -88,19 +91,20 @@ export const unmockClientPeg = () => {
     });
  * ```
  */
-export const mockClientMethodsUser = (userId = "@alice:domain") => ({
-    getUserId: jest.fn().mockReturnValue(userId),
-    getDomain: jest.fn().mockReturnValue(userId.split(":")[1]),
-    getSafeUserId: jest.fn().mockReturnValue(userId),
-    getUser: jest.fn().mockReturnValue(new User(userId)),
-    isGuest: jest.fn().mockReturnValue(false),
-    mxcUrlToHttp: jest.fn().mockReturnValue("mock-mxcUrlToHttp"),
-    credentials: { userId },
-    getThreePids: jest.fn().mockResolvedValue({ threepids: [] }),
-    getAccessToken: jest.fn(),
-    getDeviceId: jest.fn(),
-    getAccountData: jest.fn(),
-});
+export const mockClientMethodsUser = (userId = "@alice:domain") =>
+    ({
+        getUserId: vi.fn().mockReturnValue(userId),
+        getDomain: vi.fn().mockReturnValue(userId.split(":")[1]),
+        getSafeUserId: vi.fn().mockReturnValue(userId),
+        getUser: vi.fn().mockReturnValue(new User(userId)),
+        isGuest: vi.fn().mockReturnValue(false),
+        mxcUrlToHttp: vi.fn().mockReturnValue("mock-mxcUrlToHttp"),
+        credentials: { userId },
+        getThreePids: vi.fn().mockResolvedValue({ threepids: [] }),
+        getAccessToken: vi.fn(),
+        getDeviceId: vi.fn(),
+        getAccountData: vi.fn(),
+    }) satisfies MockedObjectDeep<any>;
 
 /**
  * Returns basic mocked client methods related to rendering events
@@ -110,57 +114,60 @@ export const mockClientMethodsUser = (userId = "@alice:domain") => ({
     });
  * ```
  */
-export const mockClientMethodsEvents = () => ({
-    decryptEventIfNeeded: jest.fn(),
-    getPushActionsForEvent: jest.fn(),
-});
+export const mockClientMethodsEvents = () =>
+    ({
+        decryptEventIfNeeded: vi.fn(),
+        getPushActionsForEvent: vi.fn(),
+    }) satisfies MockedObjectDeep<any>;
 
 /**
  * Returns basic mocked pushProcessor
  */
-export const mockClientPushProcessor = () => ({
-    pushProcessor: {
-        getPushRuleById: jest.fn(),
-        ruleMatchesEvent: jest.fn(),
-    },
-});
+export const mockClientPushProcessor = () =>
+    ({
+        pushProcessor: {
+            getPushRuleById: vi.fn(),
+            ruleMatchesEvent: vi.fn(),
+        },
+    }) satisfies MockedObjectDeep<any>;
 
 /**
  * Returns basic mocked client methods related to server support
  */
 export const mockClientMethodsServer = (): Partial<Record<MethodLikeKeys<MatrixClient>, unknown>> => ({
-    getIdentityServerUrl: jest.fn(),
-    getHomeserverUrl: jest.fn(),
-    getCapabilities: jest.fn().mockResolvedValue({}),
-    getCachedCapabilities: jest.fn().mockResolvedValue({}),
-    getClientWellKnown: jest.fn().mockReturnValue({}),
-    waitForClientWellKnown: jest.fn().mockResolvedValue({}),
-    doesServerSupportUnstableFeature: jest.fn().mockResolvedValue(false),
-    isVersionSupported: jest.fn().mockResolvedValue(false),
-    getVersions: jest.fn().mockResolvedValue({}),
-    isFallbackICEServerAllowed: jest.fn(),
+    getIdentityServerUrl: vi.fn(),
+    getHomeserverUrl: vi.fn(),
+    getCapabilities: vi.fn().mockResolvedValue({}),
+    getCachedCapabilities: vi.fn().mockResolvedValue({}),
+    getClientWellKnown: vi.fn().mockReturnValue({}),
+    waitForClientWellKnown: vi.fn().mockResolvedValue({}),
+    doesServerSupportUnstableFeature: vi.fn().mockResolvedValue(false),
+    isVersionSupported: vi.fn().mockResolvedValue(false),
+    getVersions: vi.fn().mockResolvedValue({}),
+    isFallbackICEServerAllowed: vi.fn(),
 });
 
 export const mockClientMethodsDevice = (
     deviceId = "test-device-id",
 ): Partial<Record<MethodLikeKeys<MatrixClient>, unknown>> => ({
-    getDeviceId: jest.fn().mockReturnValue(deviceId),
-    getDevices: jest.fn().mockResolvedValue({ devices: [] }),
+    getDeviceId: vi.fn().mockReturnValue(deviceId),
+    getDevices: vi.fn().mockResolvedValue({ devices: [] }),
 });
 
 export const mockClientMethodsCrypto = (): Partial<
     Record<MethodLikeKeys<MatrixClient> & PropertyLikeKeys<MatrixClient>, unknown>
 > => ({
-    isKeyBackupKeyStored: jest.fn(),
-    getCrossSigningCacheCallbacks: jest.fn().mockReturnValue({ getCrossSigningKeyCache: jest.fn() }),
+    isKeyBackupKeyStored: vi.fn(),
+    getCrossSigningCacheCallbacks: vi.fn().mockReturnValue({ getCrossSigningKeyCache: vi.fn() }),
     secretStorage: {
-        hasKey: jest.fn(),
-        isStored: jest.fn().mockResolvedValue(null),
-        getDefaultKeyId: jest.fn().mockResolvedValue(null),
+        hasKey: vi.fn(),
+        isStored: vi.fn().mockResolvedValue(null),
+        getDefaultKeyId: vi.fn().mockResolvedValue(null),
     },
-    getCrypto: jest.fn().mockReturnValue({
-        getUserDeviceInfo: jest.fn(),
-        getCrossSigningStatus: jest.fn().mockResolvedValue({
+    getCrypto: vi.fn().mockReturnValue({
+        getUserDeviceInfo: vi.fn(),
+        getDeviceVerificationStatus: vi.fn().mockResolvedValue(null),
+        getCrossSigningStatus: vi.fn().mockResolvedValue({
             publicKeysOnDevice: true,
             privateKeysInSecretStorage: false,
             privateKeysCachedLocally: {
@@ -169,19 +176,20 @@ export const mockClientMethodsCrypto = (): Partial<
                 userSigningKey: true,
             },
         }),
-        isCrossSigningReady: jest.fn().mockResolvedValue(true),
-        isSecretStorageReady: jest.fn(),
-        getSessionBackupPrivateKey: jest.fn(),
-        getVersion: jest.fn().mockReturnValue("Version 0"),
-        getOwnDeviceKeys: jest.fn().mockReturnValue(new Promise(() => {})),
-        getCrossSigningKeyId: jest.fn(),
-        isEncryptionEnabledInRoom: jest.fn().mockResolvedValue(false),
-        getKeyBackupInfo: jest.fn().mockResolvedValue(null),
+        isCrossSigningReady: vi.fn().mockResolvedValue(true),
+        isSecretStorageReady: vi.fn(),
+        getSessionBackupPrivateKey: vi.fn(),
+        getVersion: vi.fn().mockReturnValue("Version 0"),
+        getOwnDeviceKeys: vi.fn().mockReturnValue(new Promise(() => {})),
+        getCrossSigningKeyId: vi.fn(),
+        isEncryptionEnabledInRoom: vi.fn().mockResolvedValue(false),
+        getKeyBackupInfo: vi.fn().mockResolvedValue(null),
     }),
 });
 
 export const mockClientMethodsRooms = (rooms: Room[] = []): Partial<Record<MethodLikeKeys<MatrixClient>, unknown>> => ({
-    getRooms: jest.fn().mockReturnValue(rooms),
-    getRoom: jest.fn((roomId) => rooms.find((r) => r.roomId === roomId) ?? null),
-    isRoomEncrypted: jest.fn(),
+    getVisibleRooms: vi.fn().mockReturnValue(rooms),
+    getRooms: vi.fn().mockReturnValue(rooms),
+    getRoom: vi.fn((roomId) => rooms.find((r) => r.roomId === roomId) ?? null),
+    isRoomEncrypted: vi.fn(),
 });
diff --git a/apps/web/test/test-utils/console.ts b/apps/web/test/test-utils/console.ts
index 690357778b..190e2c6f9e 100644
--- a/apps/web/test/test-utils/console.ts
+++ b/apps/web/test/test-utils/console.ts
@@ -6,6 +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 { beforeAll, afterAll } from "../setup/adapter.ts";
+
 type FilteredConsole = Pick<Console, "log" | "error" | "info" | "debug" | "warn">;
 
 /**
diff --git a/apps/web/test/test-utils/date.ts b/apps/web/test/test-utils/date.ts
index b33961e7c1..f22de9e512 100644
--- a/apps/web/test/test-utils/date.ts
+++ b/apps/web/test/test-utils/date.ts
@@ -6,19 +6,21 @@ 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 { vi } from "../setup/adapter.ts";
+
 export const REPEATABLE_DATE = new Date(2022, 10, 17, 16, 58, 32, 517);
 
-const RealDateTimeFormat = global.Intl.DateTimeFormat;
+const RealDateTimeFormat = globalThis.Intl.DateTimeFormat;
 
 // allow setting default locale and set timezone
 // defaults to en-GB / Europe/London
 // so tests run the same everywhere
 export const mockIntlDateTimeFormat = (defaultLocale = "en-GB", defaultTimezone = "Europe/London"): void => {
-    jest.spyOn(global.Intl, "DateTimeFormat").mockImplementation(
-        (locale, options) => new RealDateTimeFormat(locale || defaultLocale, { ...options, timeZone: defaultTimezone }),
-    );
+    vi.spyOn(globalThis.Intl, "DateTimeFormat").mockImplementation(function (locale, options) {
+        return new RealDateTimeFormat(locale || defaultLocale, { ...options, timeZone: defaultTimezone });
+    });
 };
 
 export const unmockIntlDateTimeFormat = (): void => {
-    jest.spyOn(global.Intl, "DateTimeFormat").mockRestore();
+    vi.spyOn(globalThis.Intl, "DateTimeFormat").mockRestore();
 };
diff --git a/apps/web/test/test-utils/index.ts b/apps/web/test/test-utils/index.ts
index d1298ca3df..860b736b02 100644
--- a/apps/web/test/test-utils/index.ts
+++ b/apps/web/test/test-utils/index.ts
@@ -6,7 +6,7 @@ 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 RenderResult, screen, waitFor } from "jest-matrix-react";
+import { type RenderResult, screen, waitFor } from "test-utils-rtl";
 
 export * from "./beacon";
 export * from "./client";
@@ -21,6 +21,7 @@ export * from "./utilities";
 export * from "./date";
 export * from "./relations";
 export * from "./console";
+export * from "../unit-tests/TestSDKContext.ts";
 
 // wait for loading page
 export async function waitForLoadingSpinner(): Promise<void> {
diff --git a/apps/web/test/test-utils/jest-matrix-react.tsx b/apps/web/test/test-utils/jest-matrix-react.tsx
index 76150df478..f9009b73f6 100644
--- a/apps/web/test/test-utils/jest-matrix-react.tsx
+++ b/apps/web/test/test-utils/jest-matrix-react.tsx
@@ -10,7 +10,9 @@ import React, { type ReactElement } from "react";
 // eslint-disable-next-line no-restricted-imports
 import { render, type RenderOptions } from "@testing-library/react";
 import { TooltipProvider } from "@vector-im/compound-web";
-import { I18nContext } from "@element-hq/web-shared-components";
+import { I18nApi, I18nContext } from "@element-hq/web-shared-components";
+
+const i18nApi = new I18nApi();
 
 /**
  * Wraps the provided components in:
@@ -26,7 +28,7 @@ const wrapWithStandardContexts = (Wrapper: RenderOptions["wrapper"]) => {
         if (Wrapper) {
             return (
                 <Wrapper>
-                    <I18nContext.Provider value={window.mxModuleApi.i18n}>
+                    <I18nContext.Provider value={i18nApi}>
                         <TooltipProvider>{children}</TooltipProvider>
                     </I18nContext.Provider>
                 </Wrapper>
@@ -34,7 +36,7 @@ const wrapWithStandardContexts = (Wrapper: RenderOptions["wrapper"]) => {
         } else {
             return (
                 <TooltipProvider>
-                    <I18nContext.Provider value={window.mxModuleApi.i18n}>{children}</I18nContext.Provider>
+                    <I18nContext.Provider value={i18nApi}>{children}</I18nContext.Provider>
                 </TooltipProvider>
             );
         }
diff --git a/apps/web/test/test-utils/platform.ts b/apps/web/test/test-utils/platform.ts
index ec742a407e..ad109e8462 100644
--- a/apps/web/test/test-utils/platform.ts
+++ b/apps/web/test/test-utils/platform.ts
@@ -6,11 +6,13 @@ 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 MethodLikeKeys, mocked, type MockedObject } from "jest-mock";
+import { type MethodLikeKeys } from "jest-mock";
+import { type MockedObject } from "vitest";
 
 import BasePlatform from "../../src/BasePlatform";
 import PlatformPeg from "../../src/PlatformPeg";
 import * as SessionLock from "../../src/utils/SessionLock";
+import { vi } from "../setup/adapter.ts";
 
 // doesn't implement abstract
 // @ts-ignore
@@ -38,10 +40,10 @@ export const mockPlatformPeg = (
     platformMocks: Partial<Record<MethodLikeKeys<BasePlatform>, unknown>> = {},
 ): MockedObject<BasePlatform> => {
     const mockPlatform = new MockPlatform(platformMocks);
-    jest.spyOn(PlatformPeg, "get").mockReturnValue(mockPlatform);
-    return mocked(mockPlatform);
+    vi.spyOn(PlatformPeg, "get").mockReturnValue(mockPlatform);
+    return vi.mocked(mockPlatform);
 };
 
 export const unmockPlatformPeg = () => {
-    jest.spyOn(PlatformPeg, "get").mockRestore();
+    vi.spyOn(PlatformPeg, "get").mockRestore();
 };
diff --git a/apps/web/test/test-utils/poll.ts b/apps/web/test/test-utils/poll.ts
index a9896c62ca..6ffe2f7aa8 100644
--- a/apps/web/test/test-utils/poll.ts
+++ b/apps/web/test/test-utils/poll.ts
@@ -6,7 +6,7 @@ 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 Mocked } from "jest-mock";
+import { type Mocked } from "jest-mock-vitest-adapter";
 import {
     type MatrixClient,
     MatrixEvent,
diff --git a/apps/web/test/test-utils/qrcode.ts b/apps/web/test/test-utils/qrcode.ts
new file mode 100644
index 0000000000..d02ac5ddc9
--- /dev/null
+++ b/apps/web/test/test-utils/qrcode.ts
@@ -0,0 +1,44 @@
+/*
+ * Copyright 2026 Element Creations 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 { act } from "jest-matrix-react";
+import { toDataURL, type QRCodeSegment, type QRCodeToDataURLOptions } from "qrcode";
+
+jest.mock("qrcode", () => ({
+    ...jest.requireActual("qrcode"),
+    toDataURL: jest.fn(),
+}));
+
+const realQRCode = jest.requireActual("qrcode") as { toDataURL: typeof toDataURL };
+const mockedToDataURL = jest.mocked(toDataURL);
+
+let qrCodeRenderPromise: Promise<string> | undefined;
+
+export function mockQRCodeRender(): void {
+    // Keep real PNG generation, but capture the promise so the test can await it directly.
+    mockedToDataURL.mockImplementation(((data: string | QRCodeSegment[], options?: QRCodeToDataURLOptions) => {
+        qrCodeRenderPromise = realQRCode.toDataURL(data, options);
+        return qrCodeRenderPromise;
+    }) as typeof toDataURL);
+}
+
+export async function waitForQRCodeRender(): Promise<void> {
+    if (!qrCodeRenderPromise) {
+        throw new Error("mockQRCodeRender() must be called before waitForQRCodeRender()");
+    }
+
+    // Flush the React state update scheduled by QRCode after toDataURL resolves.
+    await act(async () => {
+        await qrCodeRenderPromise;
+        await Promise.resolve();
+    });
+}
+
+export function resetQRCodeMock(): void {
+    mockedToDataURL.mockReset();
+    qrCodeRenderPromise = undefined;
+}
diff --git a/apps/web/test/test-utils/room.ts b/apps/web/test/test-utils/room.ts
index 8c05e02c05..458d5efe30 100644
--- a/apps/web/test/test-utils/room.ts
+++ b/apps/web/test/test-utils/room.ts
@@ -6,15 +6,14 @@ 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 MockedObject } from "jest-mock";
+import { type MockedObject } from "jest-mock-vitest-adapter";
 import { type EventTimeline, EventType, type MatrixClient, type MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 
-import { MainSplitContentType } from "../../src/components/structures/RoomView";
-import { type RoomContextType, TimelineRenderingType } from "../../src/contexts/RoomContext";
+import { MainSplitContentType, type RoomContextType, TimelineRenderingType } from "../../src/contexts/RoomContext";
 import { Layout } from "../../src/settings/enums/Layout";
 import { mkEvent } from "./test-utils";
-import { SdkContextClass } from "../../src/contexts/SDKContext";
+import { SDKContextClass } from "../../src/contexts/SDKContextClass";
 
 export const makeMembershipEvent = (roomId: string, userId: string, membership = KnownMembership.Join) =>
     mkEvent({
@@ -45,7 +44,7 @@ export const makeRoomWithStateEvents = (
 
 export function getRoomContext(room: Room, override: Partial<RoomContextType>): RoomContextType {
     return {
-        roomViewStore: SdkContextClass.instance.roomViewStore,
+        roomViewStore: SDKContextClass.instance.roomViewStore,
         room,
         roomLoading: true,
         peekLoading: false,
diff --git a/apps/web/test/test-utils/test-utils.ts b/apps/web/test/test-utils/test-utils.ts
index 08fc1af63a..5a3261ccc5 100644
--- a/apps/web/test/test-utils/test-utils.ts
+++ b/apps/web/test/test-utils/test-utils.ts
@@ -6,8 +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 EventEmitter from "events";
-import { mocked, type MockedObject } from "jest-mock";
+import EventEmitter from "node:events";
+import { type MockedObject } from "vitest";
 import {
     MatrixEvent,
     type Room,
@@ -27,7 +27,7 @@ import {
     type IPushRules,
     RelationType,
     JoinRule,
-    type OidcClientConfig,
+    type ValidatedAuthMetadata,
     type GroupCall,
     type EventStatus,
     type ICreateRoomOpts,
@@ -48,6 +48,8 @@ import { type ValidatedServerConfig } from "../../src/utils/ValidatedServerConfi
 import { EnhancedMap } from "../../src/utils/maps";
 import { type AsyncStoreWithClient } from "../../src/stores/AsyncStoreWithClient";
 import MatrixClientBackedSettingsHandler from "../../src/settings/handlers/MatrixClientBackedSettingsHandler";
+import { vi } from "../setup/adapter.ts";
+import { SDKContextClass } from "../../src/contexts/SDKContextClass.ts";
 
 /**
  * Stub out the MatrixClient, and configure the MatrixClientPeg object to
@@ -66,15 +68,17 @@ export function stubClient(): MatrixClient {
     //
     // 'sandbox.restore()' doesn't work correctly on inherited methods,
     // so we do this for each method
-    jest.spyOn(peg, "get");
-    jest.spyOn(peg, "safeGet");
-    jest.spyOn(peg, "unset");
-    jest.spyOn(peg, "replaceUsingCreds");
+    vi.spyOn(peg, "get");
+    vi.spyOn(peg, "safeGet");
+    vi.spyOn(peg, "unset");
+    vi.spyOn(peg, "set");
     // MatrixClientPeg.safeGet() is called a /lot/, so implement it with our own
     // fast stub function rather than a sinon stub
     peg.get = () => client;
     peg.safeGet = () => client;
     MatrixClientBackedSettingsHandler.matrixClient = client;
+    // @ts-ignore
+    SDKContextClass.instance._client = client;
     return client;
 }
 
@@ -90,64 +94,65 @@ export function createTestClient(): MatrixClient {
     let createdRoom: Room | undefined;
 
     const client = {
-        getHomeserverUrl: jest.fn(),
-        getIdentityServerUrl: jest.fn(),
-        getDomain: jest.fn().mockReturnValue("matrix.org"),
-        getUserId: jest.fn().mockReturnValue("@userId:matrix.org"),
-        getSafeUserId: jest.fn().mockReturnValue("@userId:matrix.org"),
-        getUserIdLocalpart: jest.fn().mockResolvedValue("userId"),
-        getUser: jest.fn().mockReturnValue({ on: jest.fn(), off: jest.fn() }),
-        getDevice: jest.fn(),
-        getDeviceId: jest.fn().mockReturnValue("ABCDEFGHI"),
+        getHomeserverUrl: vi.fn(),
+        getIdentityServerUrl: vi.fn(),
+        getDomain: vi.fn().mockReturnValue("matrix.org"),
+        getUserId: vi.fn().mockReturnValue("@userId:matrix.org"),
+        getSafeUserId: vi.fn().mockReturnValue("@userId:matrix.org"),
+        getUserIdLocalpart: vi.fn().mockResolvedValue("userId"),
+        getUser: vi.fn().mockReturnValue({ on: vi.fn(), off: vi.fn() }),
+        getDevice: vi.fn(),
+        getDeviceId: vi.fn().mockReturnValue("ABCDEFGHI"),
         deviceId: "ABCDEFGHI",
-        getDevices: jest.fn().mockResolvedValue({ devices: [{ device_id: "ABCDEFGHI" }] }),
-        getSessionId: jest.fn().mockReturnValue("iaszphgvfku"),
+        getDevices: vi.fn().mockResolvedValue({ devices: [{ device_id: "ABCDEFGHI" }] }),
+        getSessionId: vi.fn().mockReturnValue("iaszphgvfku"),
         credentials: { userId: "@userId:matrix.org" },
-        getAccessToken: jest.fn(),
+        getAccessToken: vi.fn(),
 
         secretStorage: {
-            get: jest.fn(),
-            isStored: jest.fn().mockReturnValue(false),
-            checkKey: jest.fn().mockResolvedValue(false),
-            hasKey: jest.fn().mockReturnValue(false),
-            getDefaultKeyId: jest.fn().mockResolvedValue(null),
+            get: vi.fn(),
+            isStored: vi.fn().mockReturnValue(false),
+            checkKey: vi.fn().mockResolvedValue(false),
+            hasKey: vi.fn().mockReturnValue(false),
+            getDefaultKeyId: vi.fn().mockResolvedValue(null),
         },
 
         store: {
-            getPendingEvents: jest.fn().mockResolvedValue([]),
-            setPendingEvents: jest.fn().mockResolvedValue(undefined),
-            storeRoom: jest.fn(),
-            removeRoom: jest.fn(),
+            getPendingEvents: vi.fn().mockResolvedValue([]),
+            setPendingEvents: vi.fn().mockResolvedValue(undefined),
+            storeRoom: vi.fn(),
+            removeRoom: vi.fn(),
         },
 
-        getCrypto: jest.fn().mockReturnValue({
-            getOwnDeviceKeys: jest.fn().mockResolvedValue({ ed25519: "ed25519", curve25519: "curve25519" }),
-            getUserDeviceInfo: jest.fn().mockResolvedValue(new Map()),
-            getUserVerificationStatus: jest.fn(),
-            getDeviceVerificationStatus: jest.fn(),
-            resetKeyBackup: jest.fn(),
-            isEncryptionEnabledInRoom: jest.fn().mockResolvedValue(false),
-            isStateEncryptionEnabledInRoom: jest.fn().mockResolvedValue(false),
-            getVerificationRequestsToDeviceInProgress: jest.fn().mockReturnValue([]),
-            setDeviceIsolationMode: jest.fn(),
-            prepareToEncrypt: jest.fn(),
-            bootstrapCrossSigning: jest.fn(),
-            getActiveSessionBackupVersion: jest.fn().mockResolvedValue(null),
-            isKeyBackupTrusted: jest.fn().mockResolvedValue({}),
-            createRecoveryKeyFromPassphrase: jest.fn().mockResolvedValue({
+        getCrypto: vi.fn().mockReturnValue({
+            getOwnDeviceKeys: vi.fn().mockResolvedValue({ ed25519: "ed25519", curve25519: "curve25519" }),
+            getUserDeviceInfo: vi.fn().mockResolvedValue(new Map()),
+            getUserVerificationStatus: vi.fn(),
+            getUserCrossSigningKeys: vi.fn().mockResolvedValue(null),
+            getDeviceVerificationStatus: vi.fn(),
+            resetKeyBackup: vi.fn(),
+            isEncryptionEnabledInRoom: vi.fn().mockResolvedValue(false),
+            isStateEncryptionEnabledInRoom: vi.fn().mockResolvedValue(false),
+            getVerificationRequestsToDeviceInProgress: vi.fn().mockReturnValue([]),
+            setDeviceIsolationMode: vi.fn(),
+            prepareToEncrypt: vi.fn(),
+            bootstrapCrossSigning: vi.fn(),
+            getActiveSessionBackupVersion: vi.fn().mockResolvedValue(null),
+            isKeyBackupTrusted: vi.fn().mockResolvedValue({}),
+            createRecoveryKeyFromPassphrase: vi.fn().mockResolvedValue({
                 privateKey: new Uint8Array(32),
                 encodedPrivateKey: "encoded private key",
             }),
-            bootstrapSecretStorage: jest.fn(),
-            isDehydrationSupported: jest.fn().mockResolvedValue(false),
-            restoreKeyBackup: jest.fn(),
-            restoreKeyBackupWithPassphrase: jest.fn(),
-            loadSessionBackupPrivateKeyFromSecretStorage: jest.fn(),
-            storeSessionBackupPrivateKey: jest.fn(),
-            checkKeyBackupAndEnable: jest.fn().mockResolvedValue(null),
-            getKeyBackupInfo: jest.fn().mockResolvedValue(null),
-            getEncryptionInfoForEvent: jest.fn().mockResolvedValue(null),
-            getCrossSigningStatus: jest.fn().mockResolvedValue({
+            bootstrapSecretStorage: vi.fn(),
+            isDehydrationSupported: vi.fn().mockResolvedValue(false),
+            restoreKeyBackup: vi.fn(),
+            restoreKeyBackupWithPassphrase: vi.fn(),
+            loadSessionBackupPrivateKeyFromSecretStorage: vi.fn(),
+            storeSessionBackupPrivateKey: vi.fn(),
+            checkKeyBackupAndEnable: vi.fn().mockResolvedValue(null),
+            getKeyBackupInfo: vi.fn().mockResolvedValue(null),
+            getEncryptionInfoForEvent: vi.fn().mockResolvedValue(null),
+            getCrossSigningStatus: vi.fn().mockResolvedValue({
                 publicKeysOnDevice: false,
                 privateKeysInSecretStorage: false,
                 privateKeysCachedLocally: {
@@ -156,17 +161,17 @@ export function createTestClient(): MatrixClient {
                     userSigningKey: false,
                 },
             }),
-            isCrossSigningReady: jest.fn().mockResolvedValue(false),
-            disableKeyStorage: jest.fn(),
-            resetEncryption: jest.fn(),
-            getSessionBackupPrivateKey: jest.fn().mockResolvedValue(null),
-            isSecretStorageReady: jest.fn().mockResolvedValue(false),
-            deleteKeyBackupVersion: jest.fn(),
-            crossSignDevice: jest.fn(),
+            isCrossSigningReady: vi.fn().mockResolvedValue(false),
+            disableKeyStorage: vi.fn(),
+            resetEncryption: vi.fn(),
+            getSessionBackupPrivateKey: vi.fn().mockResolvedValue(null),
+            isSecretStorageReady: vi.fn().mockResolvedValue(false),
+            deleteKeyBackupVersion: vi.fn(),
+            crossSignDevice: vi.fn(),
         }),
 
-        getPushActionsForEvent: jest.fn(),
-        getRoom: jest.fn().mockImplementation((roomId) => {
+        getPushActionsForEvent: vi.fn(),
+        getRoom: vi.fn().mockImplementation((roomId) => {
             // If the test called `createRoom`, return the mocked room it created.
             if (createdRoom) {
                 return createdRoom;
@@ -174,32 +179,32 @@ export function createTestClient(): MatrixClient {
                 return mkStubRoom(roomId, "My room", client);
             }
         }),
-        getRooms: jest.fn().mockReturnValue([]),
-        getVisibleRooms: jest.fn().mockReturnValue([]),
-        loginFlows: jest.fn(),
+        getRooms: vi.fn().mockReturnValue([]),
+        getVisibleRooms: vi.fn().mockReturnValue([]),
+        loginFlows: vi.fn(),
         on: eventEmitter.on.bind(eventEmitter),
         once: eventEmitter.once.bind(eventEmitter),
         off: eventEmitter.off.bind(eventEmitter),
         removeListener: eventEmitter.removeListener.bind(eventEmitter),
         emit: eventEmitter.emit.bind(eventEmitter),
-        isRoomEncrypted: jest.fn().mockReturnValue(false),
-        peekInRoom: jest.fn().mockResolvedValue(mkStubRoom(undefined, undefined, undefined)),
-        stopPeeking: jest.fn(),
+        isRoomEncrypted: vi.fn().mockReturnValue(false),
+        peekInRoom: vi.fn().mockResolvedValue(mkStubRoom(undefined, undefined, undefined)),
+        stopPeeking: vi.fn(),
 
-        getEventTimeline: jest.fn().mockResolvedValue([]),
-        paginateEventTimeline: jest.fn().mockResolvedValue(undefined),
-        sendReadReceipt: jest.fn().mockResolvedValue(undefined),
-        getRoomIdForAlias: jest.fn().mockResolvedValue(undefined),
-        getRoomDirectoryVisibility: jest.fn().mockResolvedValue(undefined),
-        getProfileInfo: jest.fn().mockResolvedValue({}),
-        getThirdpartyProtocols: jest.fn().mockResolvedValue({}),
-        getClientWellKnown: jest.fn().mockReturnValue(null),
-        waitForClientWellKnown: jest.fn().mockResolvedValue({}),
-        supportsVoip: jest.fn().mockReturnValue(true),
-        getTurnServers: jest.fn().mockReturnValue([]),
-        getTurnServersExpiry: jest.fn().mockReturnValue(2 ^ 32),
-        getThirdpartyUser: jest.fn().mockResolvedValue([]),
-        getAccountData: jest.fn().mockImplementation((type) => {
+        getEventTimeline: vi.fn().mockResolvedValue([]),
+        paginateEventTimeline: vi.fn().mockResolvedValue(undefined),
+        sendReadReceipt: vi.fn().mockResolvedValue(undefined),
+        getRoomIdForAlias: vi.fn().mockResolvedValue(undefined),
+        getRoomDirectoryVisibility: vi.fn().mockResolvedValue(undefined),
+        getProfileInfo: vi.fn().mockResolvedValue({}),
+        getThirdpartyProtocols: vi.fn().mockResolvedValue({}),
+        getClientWellKnown: vi.fn().mockReturnValue(null),
+        waitForClientWellKnown: vi.fn().mockResolvedValue({}),
+        supportsVoip: vi.fn().mockReturnValue(true),
+        getTurnServers: vi.fn().mockReturnValue([]),
+        getTurnServersExpiry: vi.fn().mockReturnValue(2 ^ 32),
+        getThirdpartyUser: vi.fn().mockResolvedValue([]),
+        getAccountData: vi.fn().mockImplementation((type) => {
             return mkEvent({
                 user: "@user:example.com",
                 room: undefined,
@@ -208,26 +213,26 @@ export function createTestClient(): MatrixClient {
                 content: {},
             });
         }),
-        getAccountDataFromServer: jest.fn(),
+        getAccountDataFromServer: vi.fn(),
 
-        mxcUrlToHttp: jest.fn().mockImplementation((mxc: string) => `http://this.is.a.url/${mxc.substring(6)}`),
-        setAccountData: jest.fn(),
-        deleteAccountData: jest.fn(),
-        setRoomAccountData: jest.fn(),
-        setRoomName: jest.fn(),
-        setRoomTopic: jest.fn(),
-        setRoomReadMarkers: jest.fn().mockResolvedValue({}),
-        sendTyping: jest.fn().mockResolvedValue({}),
-        sendMessage: jest.fn().mockResolvedValue({}),
-        sendStateEvent: jest.fn().mockResolvedValue(undefined),
-        sendRtcDecline: jest.fn().mockResolvedValue(undefined),
-        getSyncState: jest.fn().mockReturnValue("SYNCING"),
+        mxcUrlToHttp: vi.fn().mockImplementation((mxc: string) => `http://this.is.a.url/${mxc.substring(6)}`),
+        setAccountData: vi.fn(),
+        deleteAccountData: vi.fn(),
+        setRoomAccountData: vi.fn(),
+        setRoomName: vi.fn(),
+        setRoomTopic: vi.fn(),
+        setRoomReadMarkers: vi.fn().mockResolvedValue({}),
+        sendTyping: vi.fn().mockResolvedValue({}),
+        sendMessage: vi.fn().mockResolvedValue({}),
+        sendStateEvent: vi.fn().mockResolvedValue(undefined),
+        sendRtcDecline: vi.fn().mockResolvedValue(undefined),
+        getSyncState: vi.fn().mockReturnValue("SYNCING"),
         generateClientSecret: () => "t35tcl1Ent5ECr3T",
-        isGuest: jest.fn().mockReturnValue(false),
-        getRoomHierarchy: jest.fn().mockReturnValue({
+        isGuest: vi.fn().mockReturnValue(false),
+        getRoomHierarchy: vi.fn().mockReturnValue({
             rooms: [],
         }),
-        createRoom: jest.fn(async (createOpts?: ICreateRoomOpts) => {
+        createRoom: vi.fn(async (createOpts?: ICreateRoomOpts) => {
             const initialState = createOpts?.initial_state?.map((event, i) =>
                 mkEvent({
                     ...event,
@@ -244,60 +249,60 @@ export function createTestClient(): MatrixClient {
             );
             return { room_id: "!1:example.org" };
         }),
-        setPowerLevel: jest.fn().mockResolvedValue(undefined),
+        setPowerLevel: vi.fn().mockResolvedValue(undefined),
         pushRules: {},
         decryptEventIfNeeded: () => Promise.resolve(),
-        isUserIgnored: jest.fn().mockReturnValue(false),
-        getCapabilities: jest.fn().mockResolvedValue({}),
-        getCachedCapabilities: jest.fn().mockReturnValue({}),
-        supportsThreads: jest.fn().mockReturnValue(false),
-        supportsIntentionalMentions: jest.fn().mockReturnValue(false),
-        getRoomUpgradeHistory: jest.fn().mockReturnValue([]),
-        getOpenIdToken: jest.fn().mockResolvedValue(undefined),
-        registerWithIdentityServer: jest.fn().mockResolvedValue({}),
-        getIdentityAccount: jest.fn().mockResolvedValue({}),
-        getTerms: jest.fn().mockResolvedValue({ policies: [] }),
-        agreeToTerms: jest.fn(),
-        doesServerSupportUnstableFeature: jest.fn().mockResolvedValue(undefined),
-        isVersionSupported: jest.fn().mockResolvedValue(undefined),
-        getPushRules: jest.fn().mockResolvedValue(undefined),
-        getPushers: jest.fn().mockResolvedValue({ pushers: [] }),
-        getThreePids: jest.fn().mockResolvedValue({ threepids: [] }),
-        bulkLookupThreePids: jest.fn().mockResolvedValue({ threepids: [] }),
-        setAvatarUrl: jest.fn().mockResolvedValue(undefined),
-        setDisplayName: jest.fn().mockResolvedValue(undefined),
-        setPusher: jest.fn().mockResolvedValue(undefined),
-        setPushRuleEnabled: jest.fn().mockResolvedValue(undefined),
-        setPushRuleActions: jest.fn().mockResolvedValue(undefined),
-        relations: jest.fn().mockResolvedValue({
+        isUserIgnored: vi.fn().mockReturnValue(false),
+        getCapabilities: vi.fn().mockResolvedValue({}),
+        getCachedCapabilities: vi.fn().mockReturnValue({}),
+        supportsThreads: vi.fn().mockReturnValue(false),
+        supportsIntentionalMentions: vi.fn().mockReturnValue(false),
+        getRoomUpgradeHistory: vi.fn().mockReturnValue([]),
+        getOpenIdToken: vi.fn().mockResolvedValue(undefined),
+        registerWithIdentityServer: vi.fn().mockResolvedValue({}),
+        getIdentityAccount: vi.fn().mockResolvedValue({}),
+        getTerms: vi.fn().mockResolvedValue({ policies: [] }),
+        agreeToTerms: vi.fn(),
+        doesServerSupportUnstableFeature: vi.fn().mockResolvedValue(undefined),
+        isVersionSupported: vi.fn().mockResolvedValue(undefined),
+        getPushRules: vi.fn().mockResolvedValue(undefined),
+        getPushers: vi.fn().mockResolvedValue({ pushers: [] }),
+        getThreePids: vi.fn().mockResolvedValue({ threepids: [] }),
+        bulkLookupThreePids: vi.fn().mockResolvedValue({ threepids: [] }),
+        setAvatarUrl: vi.fn().mockResolvedValue(undefined),
+        setDisplayName: vi.fn().mockResolvedValue(undefined),
+        setPusher: vi.fn().mockResolvedValue(undefined),
+        setPushRuleEnabled: vi.fn().mockResolvedValue(undefined),
+        setPushRuleActions: vi.fn().mockResolvedValue(undefined),
+        relations: vi.fn().mockResolvedValue({
             events: [],
         }),
-        hasLazyLoadMembersEnabled: jest.fn().mockReturnValue(false),
-        isInitialSyncComplete: jest.fn().mockReturnValue(true),
-        fetchRoomEvent: jest.fn().mockRejectedValue({}),
-        makeTxnId: jest.fn().mockImplementation(() => `t${txnId++}`),
-        sendToDevice: jest.fn().mockResolvedValue(undefined),
-        queueToDevice: jest.fn().mockResolvedValue(undefined),
-        cancelPendingEvent: jest.fn(),
+        hasLazyLoadMembersEnabled: vi.fn().mockReturnValue(false),
+        isInitialSyncComplete: vi.fn().mockReturnValue(true),
+        fetchRoomEvent: vi.fn().mockRejectedValue({}),
+        makeTxnId: vi.fn().mockImplementation(() => `t${txnId++}`),
+        sendToDevice: vi.fn().mockResolvedValue(undefined),
+        queueToDevice: vi.fn().mockResolvedValue(undefined),
+        cancelPendingEvent: vi.fn(),
 
-        getMediaHandler: jest.fn().mockReturnValue({
-            setVideoInput: jest.fn(),
-            setAudioInput: jest.fn(),
-            setAudioSettings: jest.fn(),
-            stopAllStreams: jest.fn(),
+        getMediaHandler: vi.fn().mockReturnValue({
+            setVideoInput: vi.fn(),
+            setAudioInput: vi.fn(),
+            setAudioSettings: vi.fn(),
+            stopAllStreams: vi.fn(),
         } as unknown as MediaHandler),
-        uploadContent: jest.fn(),
+        uploadContent: vi.fn(),
         getEventMapper: (_options?: MapperOpts) => (event: Partial<IEvent>) => new MatrixEvent(event),
-        leaveRoomChain: jest.fn((roomId) => ({ [roomId]: null })),
-        requestPasswordEmailToken: jest.fn().mockRejectedValue({}),
-        setPassword: jest.fn().mockRejectedValue({}),
+        leaveRoomChain: vi.fn((roomId) => ({ [roomId]: null })),
+        requestPasswordEmailToken: vi.fn().mockRejectedValue({}),
+        setPassword: vi.fn().mockRejectedValue({}),
         groupCallEventHandler: { groupCalls: new Map<string, GroupCall>() },
-        redactEvent: jest.fn(),
+        redactEvent: vi.fn(),
 
-        createMessagesRequest: jest.fn().mockResolvedValue({
+        createMessagesRequest: vi.fn().mockResolvedValue({
             chunk: [],
         }),
-        sendEvent: jest.fn().mockImplementation((roomId, type, content) => {
+        sendEvent: vi.fn().mockImplementation((roomId, type, content) => {
             return new MatrixEvent({
                 type,
                 sender: "@me:localhost",
@@ -306,59 +311,62 @@ export function createTestClient(): MatrixClient {
                 room_id: roomId,
             });
         }),
-        resendEvent: jest.fn().mockResolvedValue({}),
+        resendEvent: vi.fn().mockResolvedValue({}),
 
-        _unstable_sendDelayedEvent: jest.fn(),
-        _unstable_sendDelayedStateEvent: jest.fn(),
-        _unstable_cancelScheduledDelayedEvent: jest.fn(),
-        _unstable_restartScheduledDelayedEvent: jest.fn(),
-        _unstable_sendScheduledDelayedEvent: jest.fn(),
-        _unstable_sendStickyEvent: jest.fn(),
-        _unstable_sendStickyDelayedEvent: jest.fn(),
-        _unstable_getRTCTransports: jest.fn(),
-        searchUserDirectory: jest.fn().mockResolvedValue({ limited: false, results: [] }),
-        setDeviceVerified: jest.fn(),
-        joinRoom: jest.fn(),
-        getSyncStateData: jest.fn(),
-        getDehydratedDevice: jest.fn(),
-        exportRoomKeys: jest.fn(),
-        knockRoom: jest.fn(),
-        leave: jest.fn(),
-        getVersions: jest.fn().mockResolvedValue({ versions: ["v1.1"] }),
-        requestAdd3pidEmailToken: jest.fn(),
-        requestAdd3pidMsisdnToken: jest.fn(),
-        submitMsisdnTokenOtherUrl: jest.fn(),
-        deleteThreePid: jest.fn().mockResolvedValue({}),
-        bindThreePid: jest.fn().mockResolvedValue({}),
-        unbindThreePid: jest.fn().mockResolvedValue({}),
-        requestEmailToken: jest.fn(),
-        addThreePidOnly: jest.fn(),
-        requestMsisdnToken: jest.fn(),
-        submitMsisdnToken: jest.fn(),
-        getMediaConfig: jest.fn(),
+        _unstable_sendDelayedEvent: vi.fn(),
+        _unstable_sendDelayedStateEvent: vi.fn(),
+        _unstable_cancelScheduledDelayedEvent: vi.fn(),
+        _unstable_restartScheduledDelayedEvent: vi.fn(),
+        _unstable_sendScheduledDelayedEvent: vi.fn(),
+        _unstable_sendStickyEvent: vi.fn(),
+        _unstable_sendStickyDelayedEvent: vi.fn(),
+        _unstable_getRTCTransports: vi.fn(),
+        searchUserDirectory: vi.fn().mockResolvedValue({ limited: false, results: [] }),
+        setDeviceVerified: vi.fn(),
+        joinRoom: vi.fn(),
+        getSyncStateData: vi.fn(),
+        getDehydratedDevice: vi.fn(),
+        exportRoomKeys: vi.fn(),
+        knockRoom: vi.fn(),
+        leave: vi.fn(),
+        getVersions: vi.fn().mockResolvedValue({ versions: ["v1.1"] }),
+        requestAdd3pidEmailToken: vi.fn(),
+        requestAdd3pidMsisdnToken: vi.fn(),
+        submitMsisdnTokenOtherUrl: vi.fn(),
+        deleteThreePid: vi.fn().mockResolvedValue({}),
+        bindThreePid: vi.fn().mockResolvedValue({}),
+        unbindThreePid: vi.fn().mockResolvedValue({}),
+        requestEmailToken: vi.fn(),
+        addThreePidOnly: vi.fn(),
+        requestMsisdnToken: vi.fn(),
+        submitMsisdnToken: vi.fn(),
+        getMediaConfig: vi.fn(),
         baseUrl: "https://matrix-client.matrix.org",
         matrixRTC: createStubMatrixRTC(),
-        isFallbackICEServerAllowed: jest.fn().mockReturnValue(false),
-        getAuthIssuer: jest.fn(),
-        getOrCreateFilter: jest.fn(),
-        sendStickerMessage: jest.fn(),
-        getLocalAliases: jest.fn().mockReturnValue([]),
-        uploadDeviceSigningKeys: jest.fn(),
-        isKeyBackupKeyStored: jest.fn().mockResolvedValue(null),
-        getIgnoredUsers: jest.fn().mockReturnValue([]),
-        setIgnoredUsers: jest.fn(),
-        reportRoom: jest.fn(),
+        isFallbackICEServerAllowed: vi.fn().mockReturnValue(false),
+        getAuthIssuer: vi.fn(),
+        getOrCreateFilter: vi.fn(),
+        sendStickerMessage: vi.fn(),
+        getLocalAliases: vi.fn().mockReturnValue([]),
+        uploadDeviceSigningKeys: vi.fn(),
+        isKeyBackupKeyStored: vi.fn().mockResolvedValue(null),
+        getIgnoredUsers: vi.fn().mockReturnValue([]),
+        setIgnoredUsers: vi.fn(),
+        reportRoom: vi.fn(),
         pushProcessor: {
-            getPushRuleById: jest.fn(),
+            getPushRuleById: vi.fn(),
         },
-        search: jest.fn().mockResolvedValue({}),
-        processRoomEventsSearch: jest.fn().mockResolvedValue({ highlights: [], results: [] }),
-        invite: jest.fn(),
-        kick: jest.fn(),
-        ban: jest.fn(),
-        sendTextMessage: jest.fn(),
-        deleteRoomTag: jest.fn().mockResolvedValue({}),
-        setRoomTag: jest.fn().mockResolvedValue({}),
+        search: vi.fn().mockResolvedValue({}),
+        processRoomEventsSearch: vi.fn().mockResolvedValue({ highlights: [], results: [] }),
+        invite: vi.fn(),
+        kick: vi.fn(),
+        ban: vi.fn(),
+        sendTextMessage: vi.fn(),
+        deleteRoomTag: vi.fn().mockResolvedValue({}),
+        setRoomTag: vi.fn().mockResolvedValue({}),
+        getExtendedProfileProperty: vi.fn(),
+        setExtendedProfileProperty: vi.fn().mockResolvedValue(undefined),
+        doesServerSupportExtendedProfiles: vi.fn(),
     } as unknown as MatrixClient;
 
     client.reEmitter = new ReEmitter(client);
@@ -377,7 +385,7 @@ export function createTestClient(): MatrixClient {
 
 export function createStubMatrixRTC(): MatrixRTCSessionManager {
     const eventEmitterMatrixRTCSessionManager = new EventEmitter();
-    const mockGetRoomSession = jest.fn();
+    const mockGetRoomSession = vi.fn();
     mockGetRoomSession.mockImplementation((roomId) => {
         const session = new EventEmitter() as MatrixRTCSession;
         session.memberships = [];
@@ -386,9 +394,9 @@ export function createStubMatrixRTC(): MatrixRTCSessionManager {
         return session;
     });
     return {
-        start: jest.fn(),
-        stop: jest.fn(),
-        getActiveRoomSession: jest.fn(),
+        start: vi.fn(),
+        stop: vi.fn(),
+        getActiveRoomSession: vi.fn(),
         getRoomSession: mockGetRoomSession,
         on: eventEmitterMatrixRTCSessionManager.on.bind(eventEmitterMatrixRTCSessionManager),
         off: eventEmitterMatrixRTCSessionManager.off.bind(eventEmitterMatrixRTCSessionManager),
@@ -410,7 +418,6 @@ type MakeEventProps = MakeEventPassThruProps & {
     redacts?: string;
     content: IContent;
     room?: Room["roomId"]; // to-device messages are roomless
-    // eslint-disable-next-line camelcase
     prev_content?: IContent;
     unsigned?: IUnsigned;
     status?: EventStatus;
@@ -647,8 +654,8 @@ export function mkMessage({
         ...opts,
         type: "m.room.message",
         content: {
-            msgtype: "m.text",
-            body: message,
+            "msgtype": "m.text",
+            "body": message,
             ...(format && formattedMsg ? { format, formatted_body: formattedMsg } : {}),
             ["m.relates_to"]: relatesTo,
         },
@@ -659,9 +666,9 @@ export function mkMessage({
 
 export function mkStubRoom(
     roomId: string | null | undefined = null,
-    name: string | undefined,
-    client: MatrixClient | undefined,
-    state?: RoomState | undefined,
+    name?: string,
+    client?: MatrixClient,
+    state?: RoomState,
 ): Room {
     const stubTimeline = {
         getEvents: (): MatrixEvent[] => [],
@@ -671,42 +678,42 @@ export function mkStubRoom(
     const eventEmitter = new EventEmitter();
 
     return {
-        canInvite: jest.fn().mockReturnValue(false),
+        canInvite: vi.fn().mockReturnValue(false),
         client,
-        findThreadForEvent: jest.fn(),
-        createThreadsTimelineSets: jest.fn().mockReturnValue(new Promise(() => {})),
+        findThreadForEvent: vi.fn(),
+        createThreadsTimelineSets: vi.fn().mockReturnValue(new Promise(() => {})),
         currentState: {
-            getStateEvents: jest.fn((_type, key) => (key === undefined ? [] : null)),
-            getMember: jest.fn(),
-            mayClientSendStateEvent: jest.fn().mockReturnValue(true),
-            maySendStateEvent: jest.fn().mockReturnValue(true),
-            maySendRedactionForEvent: jest.fn().mockReturnValue(true),
-            maySendEvent: jest.fn().mockReturnValue(true),
-            maySendMessage: jest.fn().mockReturnValue(true),
+            getStateEvents: vi.fn((_type, key) => (key === undefined ? [] : null)),
+            getMember: vi.fn(),
+            mayClientSendStateEvent: vi.fn().mockReturnValue(true),
+            maySendStateEvent: vi.fn().mockReturnValue(true),
+            maySendRedactionForEvent: vi.fn().mockReturnValue(true),
+            maySendEvent: vi.fn().mockReturnValue(true),
+            maySendMessage: vi.fn().mockReturnValue(true),
             members: {},
-            getHistoryVisibility: jest.fn().mockReturnValue(HistoryVisibility.Shared),
-            getJoinRule: jest.fn().mockReturnValue(JoinRule.Invite),
-            on: jest.fn(),
-            off: jest.fn(),
-            removeListener: jest.fn(),
+            getHistoryVisibility: vi.fn().mockReturnValue(HistoryVisibility.Shared),
+            getJoinRule: vi.fn().mockReturnValue(JoinRule.Invite),
+            on: vi.fn(),
+            off: vi.fn(),
+            removeListener: vi.fn(),
         } as unknown as RoomState,
-        eventShouldLiveIn: jest.fn().mockReturnValue({ shouldLiveInRoom: true, shouldLiveInThread: false }),
-        fetchRoomThreads: jest.fn().mockReturnValue(Promise.resolve()),
-        findEventById: jest.fn().mockReturnValue(undefined),
-        findPredecessor: jest.fn().mockReturnValue({ roomId: "", eventId: null }),
-        getAltAliases: jest.fn().mockReturnValue([]),
+        eventShouldLiveIn: vi.fn().mockReturnValue({ shouldLiveInRoom: true, shouldLiveInThread: false }),
+        fetchRoomThreads: vi.fn().mockReturnValue(Promise.resolve()),
+        findEventById: vi.fn().mockReturnValue(undefined),
+        findPredecessor: vi.fn().mockReturnValue({ roomId: "", eventId: null }),
+        getAltAliases: vi.fn().mockReturnValue([]),
         getAvatarUrl: () => "mxc://avatar.url/room.png",
-        getCanonicalAlias: jest.fn(),
-        getDMInviter: jest.fn(),
-        getEventReadUpTo: jest.fn(() => null),
-        getInvitedAndJoinedMemberCount: jest.fn().mockReturnValue(1),
-        getJoinRule: jest.fn().mockReturnValue("invite"),
-        getJoinedMemberCount: jest.fn().mockReturnValue(1),
-        getJoinedMembers: jest.fn().mockReturnValue([]),
-        getLiveTimeline: jest.fn().mockReturnValue(stubTimeline),
-        getLastLiveEvent: jest.fn().mockReturnValue(undefined),
-        getLastActiveTimestamp: jest.fn().mockReturnValue(1183140000),
-        getMember: jest.fn().mockReturnValue({
+        getCanonicalAlias: vi.fn(),
+        getDMInviter: vi.fn(),
+        getEventReadUpTo: vi.fn(() => null),
+        getInvitedAndJoinedMemberCount: vi.fn().mockReturnValue(1),
+        getJoinRule: vi.fn().mockReturnValue("invite"),
+        getJoinedMemberCount: vi.fn().mockReturnValue(1),
+        getJoinedMembers: vi.fn().mockReturnValue([]),
+        getLiveTimeline: vi.fn().mockReturnValue(stubTimeline),
+        getLastLiveEvent: vi.fn().mockReturnValue(undefined),
+        getLastActiveTimestamp: vi.fn().mockReturnValue(1183140000),
+        getMember: vi.fn().mockReturnValue({
             userId: "@member:domain.bla",
             name: "Member",
             rawDisplayName: "Member",
@@ -716,29 +723,29 @@ export function mkStubRoom(
             events: {},
             isKicked: () => false,
         }),
-        getMembers: jest.fn().mockReturnValue([]),
-        getEncryptionTargetMembers: jest.fn().mockReturnValue([]),
-        getMembersWithMembership: jest.fn().mockReturnValue([]),
+        getMembers: vi.fn().mockReturnValue([]),
+        getEncryptionTargetMembers: vi.fn().mockReturnValue([]),
+        getMembersWithMembership: vi.fn().mockReturnValue([]),
         getMxcAvatarUrl: () => "mxc://avatar.url/room.png",
-        getMyMembership: jest.fn().mockReturnValue(KnownMembership.Join),
-        getPendingEvents: jest.fn().mockReturnValue([]),
-        getReceiptsForEvent: jest.fn().mockReturnValue([]),
-        getRecommendedVersion: jest.fn().mockReturnValue(Promise.resolve("")),
-        getThreads: jest.fn().mockReturnValue([]),
-        getType: jest.fn().mockReturnValue(undefined),
-        getUnfilteredTimelineSet: jest.fn(),
-        getUnreadNotificationCount: jest.fn(() => 0),
-        getRoomUnreadNotificationCount: jest.fn().mockReturnValue(0),
-        getVersion: jest.fn().mockReturnValue("1"),
-        getBumpStamp: jest.fn().mockReturnValue(0),
-        getAccountData: jest.fn(),
+        getMyMembership: vi.fn().mockReturnValue(KnownMembership.Join),
+        getPendingEvents: vi.fn().mockReturnValue([]),
+        getReceiptsForEvent: vi.fn().mockReturnValue([]),
+        getRecommendedVersion: vi.fn().mockReturnValue(Promise.resolve("")),
+        getThreads: vi.fn().mockReturnValue([]),
+        getType: vi.fn().mockReturnValue(undefined),
+        getUnfilteredTimelineSet: vi.fn(),
+        getUnreadNotificationCount: vi.fn(() => 0),
+        getRoomUnreadNotificationCount: vi.fn().mockReturnValue(0),
+        getVersion: vi.fn().mockReturnValue("1"),
+        getBumpStamp: vi.fn().mockReturnValue(0),
+        getAccountData: vi.fn(),
         hasMembershipState: () => false,
-        isElementVideoRoom: jest.fn().mockReturnValue(false),
-        isSpaceRoom: jest.fn().mockReturnValue(false),
-        isCallRoom: jest.fn().mockReturnValue(false),
-        hasEncryptionStateEvent: jest.fn().mockReturnValue(false),
-        loadMembersIfNeeded: jest.fn(),
-        maySendMessage: jest.fn().mockReturnValue(true),
+        isElementVideoRoom: vi.fn().mockReturnValue(false),
+        isSpaceRoom: vi.fn().mockReturnValue(false),
+        isCallRoom: vi.fn().mockReturnValue(false),
+        hasEncryptionStateEvent: vi.fn().mockReturnValue(false),
+        loadMembersIfNeeded: vi.fn(),
+        maySendMessage: vi.fn().mockReturnValue(true),
         myUserId: client?.getUserId(),
         name,
         normalizedName: normalize(name || ""),
@@ -748,8 +755,8 @@ export function mkStubRoom(
         removeListener: eventEmitter.removeListener.bind(eventEmitter),
         emit: eventEmitter.emit.bind(eventEmitter),
         roomId,
-        setBlacklistUnverifiedDevices: jest.fn(),
-        setUnreadNotificationCount: jest.fn(),
+        setBlacklistUnverifiedDevices: vi.fn(),
+        setUnreadNotificationCount: vi.fn(),
         tags: {},
         timeline: [],
     } as unknown as Room;
@@ -774,7 +781,7 @@ export function mkRoomState(
 export function mkServerConfig(
     hsUrl: string,
     isUrl: string,
-    delegatedAuthentication?: OidcClientConfig,
+    delegatedAuthentication?: ValidatedAuthMetadata,
 ): ValidatedServerConfig {
     return {
         hsUrl,
@@ -826,8 +833,8 @@ export const mkRoom = (
     roomId: string,
     rooms?: ReturnType<typeof mkStubRoom>[],
 ): MockedObject<Room> => {
-    const room = mocked(mkStubRoom(roomId, roomId, client));
-    mocked(room.currentState).getStateEvents.mockImplementation(mockStateEventImplementation([]));
+    const room = vi.mocked(mkStubRoom(roomId, roomId, client));
+    vi.mocked(room.currentState).getStateEvents.mockImplementation(mockStateEventImplementation([]));
     rooms?.push(room);
     return room;
 };
@@ -856,10 +863,10 @@ export const mkSpace = (
     rooms?: ReturnType<typeof mkStubRoom>[],
     children: string[] = [],
 ): MockedObject<Room> => {
-    const space = mocked(mkRoom(client, spaceId, rooms));
+    const space = vi.mocked(mkRoom(client, spaceId, rooms));
     space.isSpaceRoom.mockReturnValue(true);
     space.getType.mockReturnValue(RoomType.Space);
-    mocked(space.currentState).getStateEvents.mockImplementation(
+    vi.mocked(space.currentState).getStateEvents.mockImplementation(
         mockStateEventImplementation(
             children.map((roomId) =>
                 mkEvent({
diff --git a/apps/web/test/test-utils/threads.ts b/apps/web/test/test-utils/threads.ts
index 7dca8b2ca0..5767318924 100644
--- a/apps/web/test/test-utils/threads.ts
+++ b/apps/web/test/test-utils/threads.ts
@@ -16,6 +16,7 @@ import {
 } from "matrix-js-sdk/src/matrix";
 
 import { mkMessage, type MessageEventProps } from "./test-utils";
+import { expect } from "../setup/adapter.ts";
 
 export const makeThreadEvent = ({
     rootEventId,
@@ -28,8 +29,8 @@ export const makeThreadEvent = ({
     mkMessage({
         ...props,
         relatesTo: {
-            event_id: rootEventId,
-            rel_type: "m.thread",
+            "event_id": rootEventId,
+            "rel_type": "m.thread",
             ["m.in_reply_to"]: {
                 event_id: replyToEventId,
             },
diff --git a/apps/web/test/test-utils/utilities.ts b/apps/web/test/test-utils/utilities.ts
index fef20bddad..1abb5479eb 100644
--- a/apps/web/test/test-utils/utilities.ts
+++ b/apps/web/test/test-utils/utilities.ts
@@ -6,13 +6,14 @@ 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 { act } from "jest-matrix-react";
+import { act } from "test-utils-rtl";
 
-import type EventEmitter from "events";
+import type EventEmitter from "node:events";
 import { type ActionPayload } from "../../src/dispatcher/payloads";
 import defaultDispatcher from "../../src/dispatcher/dispatcher";
 import { type DispatcherAction } from "../../src/dispatcher/actions";
 import Modal from "../../src/Modal";
+import { vi, beforeEach, afterEach } from "../setup/adapter.ts";
 
 export const emitPromise = (e: EventEmitter, k: string | symbol) => new Promise((r) => e.once(k, r));
 
@@ -30,13 +31,12 @@ export function untilDispatch(
     timeout = 1000,
 ): Promise<ActionPayload> {
     const callerLine = new Error().stack!.toString().split("\n")[2];
-    if (typeof waitForAction === "string") {
-        const action = waitForAction;
-        waitForAction = (payload) => {
-            return payload.action === action;
-        };
-    }
-    const callback = waitForAction as (payload: ActionPayload) => boolean;
+    const callback =
+        typeof waitForAction === "string"
+            ? (payload: ActionPayload) => {
+                  return payload.action === waitForAction;
+              }
+            : waitForAction;
     return new Promise((resolve, reject) => {
         let fulfilled = false;
         let timeoutId: number;
@@ -44,7 +44,11 @@ export function untilDispatch(
         if (timeout > 0) {
             timeoutId = window.setTimeout(() => {
                 if (!fulfilled) {
-                    reject(new Error(`untilDispatch: timed out at ${callerLine}`));
+                    reject(
+                        new Error(
+                            `untilDispatch: timed out (waiting for: ${typeof waitForAction === "function" ? "fn" : waitForAction}) at ${callerLine}`,
+                        ),
+                    );
                     fulfilled = true;
                 }
             }, timeout);
@@ -128,7 +132,7 @@ export const flushPromises = () => act(async () => await new Promise<void>((reso
 // https://gist.github.com/apieceofbart/e6dea8d884d29cf88cdb54ef14ddbcc4?permalink_comment_id=4018174#gistcomment-4018174
 export const flushPromisesWithFakeTimers = async (): Promise<void> => {
     const promise = new Promise((resolve) => process.nextTick(resolve));
-    jest.advanceTimersByTime(1);
+    vi.advanceTimersByTime(1);
     await promise;
 };
 
@@ -165,8 +169,8 @@ export function waitForUpdate(inst: React.Component, updates = 1): Promise<void>
  * that also checks timestamps
  */
 export const advanceDateAndTime = (ms: number) => {
-    jest.spyOn(global.Date, "now").mockReturnValue(Date.now() + ms);
-    jest.advanceTimersByTime(ms);
+    vi.spyOn(global.Date, "now").mockReturnValue(Date.now() + ms);
+    vi.advanceTimersByTime(ms);
 };
 
 /**
@@ -199,8 +203,8 @@ export const clearAllModals = async (): Promise<void> => {
 export function useMockMediaDevices(): void {
     // @ts-ignore assignment of a thing that isn't a `MediaDevices` to read-only property
     navigator["mediaDevices"] = {
-        enumerateDevices: jest.fn().mockResolvedValue([]),
-        getUserMedia: jest.fn(),
+        enumerateDevices: vi.fn().mockResolvedValue([]),
+        getUserMedia: vi.fn(),
     };
 }
 
@@ -234,7 +238,7 @@ export function resetJsDomAfterEach(): void {
 
         // intercept setTimeout and setInterval, and clear them at the end.
         //
-        // *Don't* use jest.spyOn for this because it makes the DOM testing library think we are using fake timers.
+        // *Don't* use vi.spyOn for this because it makes the DOM testing library think we are using fake timers.
         //
         ["setTimeout", "setInterval"].forEach((name) => {
             const originalFn = window[name as keyof Window];
diff --git a/apps/web/test/test-utils/vitest-matrix-react.ts b/apps/web/test/test-utils/vitest-matrix-react.ts
new file mode 100644
index 0000000000..f52fe4c494
--- /dev/null
+++ b/apps/web/test/test-utils/vitest-matrix-react.ts
@@ -0,0 +1,16 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import "@testing-library/jest-dom/vitest";
+// eslint-disable-next-line no-restricted-imports
+import { cleanup } from "@testing-library/react";
+import { afterEach } from "vitest";
+
+afterEach(cleanup);
+
+export * from "./jest-matrix-react.tsx";
diff --git a/apps/web/test/test-utils/wrappers.tsx b/apps/web/test/test-utils/wrappers.tsx
index 99ceae7f94..8dd0761c57 100644
--- a/apps/web/test/test-utils/wrappers.tsx
+++ b/apps/web/test/test-utils/wrappers.tsx
@@ -12,7 +12,10 @@ import { type RenderOptions } from "jest-matrix-react";
 
 import { MatrixClientPeg as peg } from "../../src/MatrixClientPeg";
 import MatrixClientContext from "../../src/contexts/MatrixClientContext";
-import { SDKContext, type SdkContextClass } from "../../src/contexts/SDKContext";
+import { SDKContext } from "../../src/contexts/SDKContext";
+import { type SDKContextClass } from "../../src/contexts/SDKContextClass";
+import { type RoomContextType } from "../../src/contexts/RoomContext.ts";
+import { ScopedRoomContextProvider } from "../../src/contexts/ScopedRoomContext.tsx";
 
 type WrapperProps<T> = { wrappedRef?: Ref<ComponentType<T>> } & T;
 
@@ -38,7 +41,7 @@ export function wrapInMatrixClientContext<T>(WrappedComponent: ComponentType<T>)
 
 export function wrapInSdkContext<T>(
     WrappedComponent: ComponentType<T>,
-    sdkContext: SdkContextClass,
+    sdkContext: SDKContextClass,
 ): ComponentType<WrapperProps<T>> {
     return class extends React.Component<WrapperProps<T>> {
         render() {
@@ -63,7 +66,7 @@ export function withClientContextRenderOptions(client: MatrixClient): RenderOpti
     };
 }
 
-export function clientAndSDKContextRenderOptions(client: MatrixClient, sdkContext: SdkContextClass): RenderOptions {
+export function clientAndSDKContextRenderOptions(client: MatrixClient, sdkContext: SDKContextClass): RenderOptions {
     return {
         wrapper: ({ children }) => (
             <SDKContext.Provider value={sdkContext}>
@@ -72,3 +75,28 @@ export function clientAndSDKContextRenderOptions(client: MatrixClient, sdkContex
         ),
     };
 }
+export function withContexts({
+    sdkContext,
+    matrixClient,
+    roomContext,
+}: {
+    sdkContext?: SDKContextClass;
+    matrixClient?: MatrixClient;
+    roomContext?: RoomContextType;
+}): RenderOptions {
+    return {
+        wrapper: ({ children }) => {
+            const client = matrixClient || sdkContext?.client;
+            if (client) {
+                children = <MatrixClientContext.Provider value={client}>{children}</MatrixClientContext.Provider>;
+            }
+            if (sdkContext) {
+                children = <SDKContext.Provider value={sdkContext}>{children}</SDKContext.Provider>;
+            }
+            if (roomContext) {
+                children = <ScopedRoomContextProvider {...roomContext}>{children}</ScopedRoomContextProvider>;
+            }
+            return children;
+        },
+    };
+}
diff --git a/apps/web/test/unit-tests/HtmlUtils-test.tsx b/apps/web/test/unit-tests/HtmlUtils-test.tsx
index e56d7203cc..3c71bdfa70 100644
--- a/apps/web/test/unit-tests/HtmlUtils-test.tsx
+++ b/apps/web/test/unit-tests/HtmlUtils-test.tsx
@@ -6,11 +6,11 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { type ReactElement } from "react";
 import { render, screen } from "jest-matrix-react";
 import parse from "html-react-parser";
 
-import { bodyToHtml, bodyToNode, formatEmojis, topicToHtml } from "../../src/HtmlUtils";
+import { bodyToHtml, bodyToNode, formatEmojis, sanitizedHtmlNode, topicToHtml } from "../../src/HtmlUtils";
 import SettingsStore from "../../src/settings/SettingsStore";
 import { getMockClientWithEventEmitter } from "../test-utils";
 import { SettingLevel } from "../../src/settings/SettingLevel";
@@ -319,3 +319,12 @@ describe("bodyToNode", () => {
         jest.resetAllMocks();
     });
 });
+
+describe("sanitizedHtmlNode", () => {
+    it("should respect className", () => {
+        const sanitized = sanitizedHtmlNode('<a href="https://google.com">Link</a>', "testClass");
+        const { asFragment, getByText } = render(sanitized as ReactElement);
+        expect(getByText("Link").parentNode).toHaveClass("testClass");
+        expect(asFragment()).toMatchSnapshot();
+    });
+});
diff --git a/apps/web/test/unit-tests/LegacyCallHandler-test.ts b/apps/web/test/unit-tests/LegacyCallHandler-test.ts
index 9b04a97c16..971c5bad2e 100644
--- a/apps/web/test/unit-tests/LegacyCallHandler-test.ts
+++ b/apps/web/test/unit-tests/LegacyCallHandler-test.ts
@@ -17,7 +17,7 @@ import {
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { CallEvent, CallState, CallType, MatrixCall } from "matrix-js-sdk/src/webrtc/call";
-import EventEmitter from "events";
+import EventEmitter from "node:events";
 import { mocked } from "jest-mock";
 import { CallEventHandlerEvent } from "matrix-js-sdk/src/webrtc/callEventHandler";
 import fetchMock from "@fetch-mock/jest";
@@ -40,6 +40,7 @@ import SettingsStore from "../../src/settings/SettingsStore";
 import { UIFeature } from "../../src/settings/UIFeature";
 import { createAudioContext } from "../../src/audio/compat";
 import * as ManagedHybrid from "../../src/widgets/ManagedHybrid";
+import { TestSDKContext } from "./TestSDKContext.ts";
 
 jest.mock("../../src/Modal");
 
@@ -165,7 +166,7 @@ describe("LegacyCallHandler", () => {
             });
         };
 
-        callHandler = new LegacyCallHandler();
+        callHandler = new LegacyCallHandler(new TestSDKContext());
         callHandler.start();
 
         mocked(getFunctionalMembers).mockReturnValue([FUNCTIONAL_USER]);
@@ -238,8 +239,6 @@ describe("LegacyCallHandler", () => {
         callHandler.stop();
         // @ts-ignore
         DMRoomMap.setShared(null);
-        // @ts-ignore
-        window.mxLegacyCallHandler = null;
         MatrixClientPeg.unset();
 
         document.body.removeChild(audioElement);
@@ -373,7 +372,7 @@ describe("LegacyCallHandler without third party protocols", () => {
         };
 
         mocked(createAudioContext).mockReturnValue(mockAudioContext as unknown as AudioContext);
-        callHandler = new LegacyCallHandler();
+        callHandler = new LegacyCallHandler(new TestSDKContext());
         callHandler.start();
 
         const nativeRoomAlice = mkStubDM(NATIVE_ROOM_ALICE, NATIVE_ALICE);
@@ -423,8 +422,6 @@ describe("LegacyCallHandler without third party protocols", () => {
         callHandler.stop();
         // @ts-ignore
         DMRoomMap.setShared(null);
-        // @ts-ignore
-        window.mxLegacyCallHandler = null;
         MatrixClientPeg.unset();
 
         document.body.removeChild(audioElement);
diff --git a/apps/web/test/unit-tests/Notifier-test.ts b/apps/web/test/unit-tests/Notifier-test.ts
index bd1b20c0be..e125eb2625 100644
--- a/apps/web/test/unit-tests/Notifier-test.ts
+++ b/apps/web/test/unit-tests/Notifier-test.ts
@@ -5,7 +5,7 @@ Copyright 2022 The Matrix.org Foundation C.I.C.
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
-import { mocked, type MockedObject } from "jest-mock";
+import { mocked, type MockedObject } from "jest-mock-vitest-adapter";
 import {
     ClientEvent,
     type MatrixClient,
@@ -21,9 +21,10 @@ import {
 import { waitFor } from "jest-matrix-react";
 import { CallMembership, type SessionMembershipData, type MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
 import { randomUUID } from "node:crypto";
+import { PushProcessor } from "matrix-js-sdk/src/pushprocessor";
 
 import type BasePlatform from "../../src/BasePlatform";
-import Notifier from "../../src/Notifier";
+import Notifier, { NOTIFICATION_SOUND_THROTTLE_MS } from "../../src/Notifier";
 import SettingsStore from "../../src/settings/SettingsStore";
 import ToastStore from "../../src/stores/ToastStore";
 import {
@@ -38,7 +39,6 @@ import {
     mockPlatformPeg,
 } from "../test-utils";
 import { getIncomingCallToastKey, IncomingCallToast } from "../../src/toasts/IncomingCallToast";
-import { SdkContextClass } from "../../src/contexts/SDKContext";
 import UserActivity from "../../src/UserActivity";
 import Modal from "../../src/Modal";
 import { mkThread } from "../test-utils/threads";
@@ -46,6 +46,7 @@ import dis from "../../src/dispatcher/dispatcher";
 import { type ThreadPayload } from "../../src/dispatcher/payloads/ThreadPayload";
 import { Action } from "../../src/dispatcher/actions";
 import { addReplyToMessageContent } from "../../src/utils/Reply";
+import { TestSDKContext } from "./TestSDKContext.ts";
 
 jest.mock("../../src/utils/notifications", () => ({
     // @ts-ignore
@@ -61,6 +62,9 @@ jest.mock("../../src/audio/compat", () => ({
 const settingsStoreGetValue = SettingsStore.getValue;
 
 describe("Notifier", () => {
+    const context = new TestSDKContext();
+    let notifier: Notifier;
+
     const roomId = "!room1:server";
     const testEvent = mkEvent({
         event: true,
@@ -131,6 +135,9 @@ describe("Notifier", () => {
             decryptEventIfNeeded: jest.fn(),
             getRoom: jest.fn(),
             getPushActionsForEvent: jest.fn(),
+            // Mock required because TextForEvent now evaluates supportsVoip for RTCNotification to trigger OS popups.
+            // The true/false value is arbitrary here, as this test only verifies the in-app toast creation, not the OS text output.
+            supportsVoip: jest.fn().mockReturnValue(true),
             supportsThreads: jest.fn().mockReturnValue(false),
             matrixRTC: {
                 on: jest.fn(),
@@ -142,6 +149,8 @@ describe("Notifier", () => {
         mockClient.pushRules = {
             global: {},
         };
+        // @ts-ignore
+        mockClient.pushProcessor = new PushProcessor(mockClient);
         accountDataEventKey = getLocalNotificationAccountDataEventType(mockClient.deviceId!);
 
         testRoom = new Room(roomId, mockClient, mockClient.getSafeUserId());
@@ -151,9 +160,11 @@ describe("Notifier", () => {
             maySendNotifications: jest.fn().mockReturnValue(true),
             displayNotification: jest.fn().mockReturnValue({ close: jest.fn() }),
             loudNotification: jest.fn(),
+            requestNotificationPermission: jest.fn(),
         });
 
-        Notifier.isBodyEnabled = jest.fn().mockReturnValue(true);
+        notifier = new Notifier(dis, context);
+        notifier.isBodyEnabled = jest.fn().mockReturnValue(true);
 
         mockClient.getRoom.mockImplementation((id: string | undefined): Room | null => {
             if (id === roomId) return testRoom;
@@ -162,7 +173,8 @@ describe("Notifier", () => {
         });
 
         // @ts-ignore
-        Notifier.backgroundAudio.audioContext = mockAudioContext;
+        notifier.backgroundAudio.audioContext = mockAudioContext;
+        context._client = mockClient;
     });
 
     describe("triggering notification from events", () => {
@@ -182,9 +194,9 @@ describe("Notifier", () => {
             // and references them in stop
             // so blows up if stopped before it was started
             if (hasStartedNotiferBefore) {
-                Notifier.stop();
+                notifier.stop();
             }
-            Notifier.start();
+            notifier.start();
             hasStartedNotiferBefore = true;
             mockClient.getRoom.mockReturnValue(testRoom);
             mockClient.getPushActionsForEvent.mockReturnValue({
@@ -206,7 +218,7 @@ describe("Notifier", () => {
         });
 
         afterAll(() => {
-            Notifier.stop();
+            notifier.stop();
         });
 
         it("does not create notifications before syncing has started", () => {
@@ -319,13 +331,13 @@ describe("Notifier", () => {
         ];
         it.each(testCases)("does not dispatch when notifications are silenced", ({ event, count }) => {
             mockClient.setAccountData(accountDataEventKey, event!);
-            Notifier.displayPopupNotification(testEvent, testRoom);
+            notifier.displayPopupNotification(testEvent, testRoom);
             expect(MockPlatform.displayNotification).toHaveBeenCalledTimes(count);
         });
 
         it("should display a notification for a voice message", () => {
             const audioEvent = mkAudioEvent();
-            Notifier.displayPopupNotification(audioEvent, testRoom);
+            notifier.displayPopupNotification(audioEvent, testRoom);
             expect(MockPlatform.displayNotification).toHaveBeenCalledWith(
                 "@user:example.com (!room1:server)",
                 "@user:example.com: test audio message",
@@ -349,7 +361,7 @@ describe("Notifier", () => {
                 room: testRoom.roomId,
             });
             addReplyToMessageContent(reply.getContent(), event);
-            Notifier.displayPopupNotification(reply, testRoom);
+            notifier.displayPopupNotification(reply, testRoom);
             expect(MockPlatform.displayNotification).toHaveBeenCalledWith(
                 "@bob:example.org (!room1:server)",
                 "This was a triumph",
@@ -389,7 +401,7 @@ describe("Notifier", () => {
                     formatted_body: formattedBody,
                 },
             });
-            Notifier.displayPopupNotification(spoilerEvent, testRoom);
+            notifier.displayPopupNotification(spoilerEvent, testRoom);
             expect(MockPlatform.displayNotification).toHaveBeenCalledWith(
                 "@bob:example.org (!room1:server)",
                 expected,
@@ -405,7 +417,7 @@ describe("Notifier", () => {
             jest.spyOn(SettingsStore, "getValue").mockImplementation((name: string): any => {
                 return { url: { content_uri: "foobar" } };
             });
-            expect(Notifier.getSoundForRoom("!roomId:server")).toBeNull();
+            expect(notifier.getSoundForRoom("!roomId:server")).toBeNull();
         });
     });
 
@@ -418,11 +430,114 @@ describe("Notifier", () => {
         it.each(testCases)("does not dispatch when notifications are silenced", ({ event, count }) => {
             // It's not ideal to only look at whether this function has been called
             // but avoids starting to look into DOM stuff
-            Notifier.getSoundForRoom = jest.fn();
+            notifier.getSoundForRoom = jest.fn();
 
             mockClient.setAccountData(accountDataEventKey, event!);
-            Notifier.playAudioNotification(testEvent, testRoom);
-            expect(Notifier.getSoundForRoom).toHaveBeenCalledTimes(count);
+            notifier.playAudioNotification(testEvent, testRoom);
+            expect(notifier.getSoundForRoom).toHaveBeenCalledTimes(count);
+        });
+    });
+
+    // Regression test for https://github.com/element-hq/element-web/issues/31996
+    // On macOS Sequoia, waking from sleep delivers the whole sync backlog in one
+    // batch, firing playAudioNotification for every backlogged notifying event
+    // near-simultaneously. Without throttling, the identical sound buffers
+    // superimpose into one loud "stacked" sound. We coalesce a burst into at
+    // most one audible play within NOTIFICATION_SOUND_THROTTLE_MS.
+    describe("playAudioNotification throttle (macOS wake-from-sleep stacking)", () => {
+        let playSpy: jest.SpyInstance;
+
+        beforeEach(() => {
+            jest.useFakeTimers();
+            jest.setSystemTime(0);
+
+            // Ensure notifications are not silenced so we exercise the throttle,
+            // not the silencing gate.
+            accountDataStore = {};
+            mockClient.setAccountData(accountDataEventKey, { is_silenced: false });
+
+            // Default sound path (no custom room sound).
+            jest.spyOn(notifier, "getSoundForRoom").mockReturnValue(null);
+
+            // @ts-ignore - backgroundAudio is private
+            playSpy = jest.spyOn(notifier.backgroundAudio, "pickFormatAndPlay").mockResolvedValue({} as any);
+        });
+
+        afterEach(() => {
+            playSpy.mockRestore();
+            jest.useRealTimers();
+        });
+
+        it("plays at most one sound for a burst of notifications within the throttle window", async () => {
+            // Simulate a backlog of notifications arriving back-to-back on wake.
+            await notifier.playAudioNotification(testEvent, testRoom);
+            await notifier.playAudioNotification(testEvent, testRoom);
+            await notifier.playAudioNotification(testEvent, testRoom);
+
+            expect(playSpy).toHaveBeenCalledTimes(1);
+        });
+
+        it("plays again once the throttle window has elapsed", async () => {
+            await notifier.playAudioNotification(testEvent, testRoom);
+            expect(playSpy).toHaveBeenCalledTimes(1);
+
+            // Advance the clock just past the throttle window.
+            jest.setSystemTime(NOTIFICATION_SOUND_THROTTLE_MS + 1);
+
+            await notifier.playAudioNotification(testEvent, testRoom);
+            expect(playSpy).toHaveBeenCalledTimes(2);
+        });
+
+        it("throttles right up to the window boundary, then plays again (strict `<`)", async () => {
+            await notifier.playAudioNotification(testEvent, testRoom);
+            expect(playSpy).toHaveBeenCalledTimes(1);
+
+            // One ms before the window elapses: still throttled.
+            jest.setSystemTime(NOTIFICATION_SOUND_THROTTLE_MS - 1);
+            await notifier.playAudioNotification(testEvent, testRoom);
+            expect(playSpy).toHaveBeenCalledTimes(1);
+
+            // Exactly at the window boundary: plays again (the comparison is a strict `<`).
+            jest.setSystemTime(NOTIFICATION_SOUND_THROTTLE_MS);
+            await notifier.playAudioNotification(testEvent, testRoom);
+            expect(playSpy).toHaveBeenCalledTimes(2);
+        });
+
+        it("does not coalesce two genuinely different sounds within the window (#31996 per-sound keying)", async () => {
+            const soundA = { url: "sound-a.mp3", name: "A", type: "audio/mpeg", size: 1 };
+            const soundB = { url: "sound-b.mp3", name: "B", type: "audio/mpeg", size: 1 };
+            const otherRoom = new Room("!other:server", mockClient, mockClient.getSafeUserId());
+            jest.mocked(notifier.getSoundForRoom).mockImplementation((roomId: string) =>
+                roomId === testRoom.roomId ? soundA : soundB,
+            );
+            // @ts-ignore - backgroundAudio is private
+            const customPlaySpy = jest.spyOn(notifier.backgroundAudio, "play").mockResolvedValue({} as any);
+
+            // Two different sounds back-to-back within the window: BOTH must play (only identical
+            // backlogged sounds are coalesced).
+            await notifier.playAudioNotification(testEvent, testRoom);
+            await notifier.playAudioNotification(testEvent, otherRoom);
+
+            expect(customPlaySpy).toHaveBeenCalledTimes(2);
+            expect(customPlaySpy).toHaveBeenNthCalledWith(1, soundA.url);
+            expect(customPlaySpy).toHaveBeenNthCalledWith(2, soundB.url);
+            customPlaySpy.mockRestore();
+        });
+
+        it("does not play, and does not arm the throttle, when notifications are silenced", async () => {
+            mockClient.setAccountData(accountDataEventKey, { is_silenced: true });
+
+            await notifier.playAudioNotification(testEvent, testRoom);
+            await notifier.playAudioNotification(testEvent, testRoom);
+
+            // Silencing gate short-circuits before the sound is played.
+            expect(playSpy).not.toHaveBeenCalled();
+
+            // ...and the silenced calls did NOT arm the throttle: once un-silenced, the next event plays
+            // immediately (a regression arming the throttle on silenced events would suppress this).
+            mockClient.setAccountData(accountDataEventKey, { is_silenced: false });
+            await notifier.playAudioNotification(testEvent, testRoom);
+            expect(playSpy).toHaveBeenCalledTimes(1);
         });
     });
 
@@ -455,8 +570,8 @@ describe("Notifier", () => {
                 }
                 return undefined;
             });
-            Notifier.start();
-            Notifier.onSyncStateChange(SyncState.Syncing, null);
+            notifier.start();
+            notifier.onSyncStateChange(SyncState.Syncing, null);
         });
 
         afterEach(() => {
@@ -599,7 +714,7 @@ describe("Notifier", () => {
                 slotDescription: { application: "m.call", id: "" },
             } as unknown as MatrixRTCSession;
 
-            mockClient.matrixRTC.getRoomSession.mockReturnValue(mockRtcSession);
+            mocked(mockClient.matrixRTC.getRoomSession).mockReturnValue(mockRtcSession);
 
             emitCallNotificationEvent();
             expect(ToastStore.sharedInstance().addOrReplaceToast).not.toHaveBeenCalled();
@@ -626,15 +741,15 @@ describe("Notifier", () => {
             // and references them in stop
             // so blows up if stopped before it was started
             if (hasStartedNotiferBefore) {
-                Notifier.stop();
+                notifier.stop();
             }
-            Notifier.start();
+            notifier.start();
             hasStartedNotiferBefore = true;
             createLocalNotificationSettingsIfNeededMock.mockClear();
         });
 
         afterAll(() => {
-            Notifier.stop();
+            notifier.stop();
         });
 
         it("does not create local notifications event after a sync error", () => {
@@ -662,14 +777,14 @@ describe("Notifier", () => {
 
     describe("evaluateEvent", () => {
         beforeEach(() => {
-            jest.spyOn(SdkContextClass.instance.roomViewStore, "getRoomId").mockReturnValue(testRoom.roomId);
+            jest.spyOn(context.roomViewStore, "getRoomId").mockReturnValue(testRoom.roomId);
 
             jest.spyOn(UserActivity.sharedInstance(), "userActiveRecently").mockReturnValue(true);
 
             jest.spyOn(Modal, "hasDialogs").mockReturnValue(false);
 
-            jest.spyOn(Notifier, "displayPopupNotification").mockReset();
-            jest.spyOn(Notifier, "isEnabled").mockReturnValue(true);
+            jest.spyOn(notifier, "displayPopupNotification").mockReset();
+            jest.spyOn(notifier, "isEnabled").mockReturnValue(true);
 
             mockClient.getPushActionsForEvent.mockReturnValue({
                 notify: true,
@@ -680,9 +795,9 @@ describe("Notifier", () => {
         });
 
         it("should show a pop-up", () => {
-            expect(Notifier.displayPopupNotification).toHaveBeenCalledTimes(0);
-            Notifier.evaluateEvent(testEvent);
-            expect(Notifier.displayPopupNotification).toHaveBeenCalledTimes(0);
+            expect(notifier.displayPopupNotification).toHaveBeenCalledTimes(0);
+            notifier.evaluateEvent(testEvent);
+            expect(notifier.displayPopupNotification).toHaveBeenCalledTimes(0);
 
             const eventFromOtherRoom = mkEvent({
                 event: true,
@@ -692,8 +807,8 @@ describe("Notifier", () => {
                 content: {},
             });
 
-            Notifier.evaluateEvent(eventFromOtherRoom);
-            expect(Notifier.displayPopupNotification).toHaveBeenCalledTimes(1);
+            notifier.evaluateEvent(eventFromOtherRoom);
+            expect(notifier.displayPopupNotification).toHaveBeenCalledTimes(1);
         });
 
         it("should a pop-up for thread event", async () => {
@@ -704,34 +819,34 @@ describe("Notifier", () => {
                 participantUserIds: ["@bob:example.org"],
             });
 
-            expect(Notifier.displayPopupNotification).toHaveBeenCalledTimes(0);
+            expect(notifier.displayPopupNotification).toHaveBeenCalledTimes(0);
 
-            Notifier.evaluateEvent(rootEvent);
-            expect(Notifier.displayPopupNotification).toHaveBeenCalledTimes(0);
+            notifier.evaluateEvent(rootEvent);
+            expect(notifier.displayPopupNotification).toHaveBeenCalledTimes(0);
 
-            Notifier.evaluateEvent(events[1]);
-            expect(Notifier.displayPopupNotification).toHaveBeenCalledTimes(1);
+            notifier.evaluateEvent(events[1]);
+            expect(notifier.displayPopupNotification).toHaveBeenCalledTimes(1);
 
             dis.dispatch<ThreadPayload>({
                 action: Action.ViewThread,
                 thread_id: rootEvent.getId()!,
             });
 
-            await waitFor(() => expect(SdkContextClass.instance.roomViewStore.getThreadId()).toBe(rootEvent.getId()));
+            await waitFor(() => expect(context.roomViewStore.getThreadId()).toBe(rootEvent.getId()));
 
-            Notifier.evaluateEvent(events[1]);
-            expect(Notifier.displayPopupNotification).toHaveBeenCalledTimes(1);
+            notifier.evaluateEvent(events[1]);
+            expect(notifier.displayPopupNotification).toHaveBeenCalledTimes(1);
         });
 
         it("should show a pop-up for an audio message", () => {
-            Notifier.evaluateEvent(mkAudioEvent());
-            expect(Notifier.displayPopupNotification).toHaveBeenCalledTimes(1);
+            notifier.evaluateEvent(mkAudioEvent());
+            expect(notifier.displayPopupNotification).toHaveBeenCalledTimes(1);
         });
     });
 
     describe("setPromptHidden", () => {
         it("should persist by default", () => {
-            Notifier.setPromptHidden(true);
+            notifier.setPromptHidden(true);
             expect(localStorage.getItem("notifications_hidden")).toBeTruthy();
         });
     });
@@ -740,7 +855,7 @@ describe("Notifier", () => {
         it("should not evaluate events from the thread list fake timeline sets", async () => {
             mockClient.supportsThreads.mockReturnValue(true);
 
-            const fn = jest.spyOn(Notifier, "evaluateEvent");
+            const fn = jest.spyOn(notifier, "evaluateEvent");
 
             await testRoom.createThreadsTimelineSets();
             testRoom.threadsTimelineSets[0]!.addEventToTimeline(
@@ -758,4 +873,34 @@ describe("Notifier", () => {
             expect(fn).not.toHaveBeenCalled();
         });
     });
+
+    describe("setEnabled", () => {
+        it("should call fire notifier_enabled value=true when permission is granted", async () => {
+            const dispatchSpy = jest.spyOn(dis, "dispatch");
+            const notifier = new Notifier(dis, context);
+
+            jest.mocked(MockPlatform.requestNotificationPermission).mockResolvedValue("granted");
+
+            const resolvers = Promise.withResolvers<void>();
+            notifier.setEnabled(true, resolvers.resolve);
+            await resolvers.promise;
+
+            expect(dispatchSpy).toHaveBeenCalledWith({
+                action: "notifier_enabled",
+                value: true,
+            });
+        });
+
+        it("should call fire notifier_enabled value=false when disabling", async () => {
+            const dispatchSpy = jest.spyOn(dis, "dispatch");
+            const notifier = new Notifier(dis, context);
+
+            notifier.setEnabled(false);
+
+            expect(dispatchSpy).toHaveBeenCalledWith({
+                action: "notifier_enabled",
+                value: false,
+            });
+        });
+    });
 });
diff --git a/apps/web/test/unit-tests/Terms-test.tsx b/apps/web/test/unit-tests/Terms-test.ts
similarity index 100%
rename from apps/web/test/unit-tests/Terms-test.tsx
rename to apps/web/test/unit-tests/Terms-test.ts
diff --git a/apps/web/test/unit-tests/TestSdkContext.ts b/apps/web/test/unit-tests/TestSDKContext.ts
similarity index 73%
rename from apps/web/test/unit-tests/TestSdkContext.ts
rename to apps/web/test/unit-tests/TestSDKContext.ts
index f4d7eea9e2..b9c5450c7c 100644
--- a/apps/web/test/unit-tests/TestSdkContext.ts
+++ b/apps/web/test/unit-tests/TestSDKContext.ts
@@ -6,22 +6,26 @@ 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 { SdkContextClass } from "../../src/contexts/SDKContext";
+import { type MatrixClient } from "matrix-js-sdk/src/matrix";
+
+import { SDKContextClass } from "../../src/contexts/SDKContextClass";
 import { type PosthogAnalytics } from "../../src/PosthogAnalytics";
 import { type SlidingSyncManager } from "../../src/SlidingSyncManager";
 import { type RoomNotificationStateStore } from "../../src/stores/notifications/RoomNotificationStateStore";
 import type RightPanelStore from "../../src/stores/right-panel/RightPanelStore";
 import { type RoomViewStore } from "../../src/stores/RoomViewStore";
-import { type SpaceStoreClass } from "../../src/stores/spaces/SpaceStore";
+import type SpaceStore from "../../src/stores/spaces/SpaceStore";
 import { type WidgetLayoutStore } from "../../src/stores/widgets/WidgetLayoutStore";
 import { type WidgetPermissionStore } from "../../src/stores/widgets/WidgetPermissionStore";
 import type WidgetStore from "../../src/stores/WidgetStore";
+import type LegacyCallHandler from "../../src/LegacyCallHandler.tsx";
 
 /**
- * A class which provides the same API as SdkContextClass but adds additional unsafe setters which can
+ * A class which provides the same API as SDKContextClass but adds additional unsafe setters which can
  * replace individual stores. This is useful for tests which need to mock out stores.
  */
-export class TestSdkContext extends SdkContextClass {
+export class TestSDKContext extends SDKContextClass {
+    declare public _client?: MatrixClient;
     declare public _RightPanelStore?: RightPanelStore;
     declare public _RoomNotificationStateStore?: RoomNotificationStateStore;
     declare public _RoomViewStore?: RoomViewStore;
@@ -30,9 +34,6 @@ export class TestSdkContext extends SdkContextClass {
     declare public _WidgetStore?: WidgetStore;
     declare public _PosthogAnalytics?: PosthogAnalytics;
     declare public _SlidingSyncManager?: SlidingSyncManager;
-    declare public _SpaceStore?: SpaceStoreClass;
-
-    constructor() {
-        super();
-    }
+    declare public _SpaceStore?: SpaceStore;
+    declare public _LegacyCallHandler?: LegacyCallHandler;
 }
diff --git a/apps/web/test/unit-tests/TextForEvent-test.tsx b/apps/web/test/unit-tests/TextForEvent-test.tsx
index c6c23bffa2..6b5afac432 100644
--- a/apps/web/test/unit-tests/TextForEvent-test.tsx
+++ b/apps/web/test/unit-tests/TextForEvent-test.tsx
@@ -492,6 +492,48 @@ describe("TextForEvent", () => {
         });
     });
 
+    describe("textForCallInviteEvent()", () => {
+        let mockClient: MatrixClient;
+        let callInviteEvent: MatrixEvent;
+
+        beforeEach(() => {
+            stubClient();
+            mockClient = MatrixClientPeg.safeGet();
+
+            mocked(mockClient.supportsVoip).mockReturnValue(true);
+
+            callInviteEvent = {
+                getSender: jest.fn().mockReturnValue("@alice:matrix.org"),
+                sender: { name: "Alice" },
+                getContent: jest.fn().mockReturnValue({}),
+                getType: jest.fn().mockReturnValue(EventType.CallInvite),
+                isState: jest.fn().mockReturnValue(false),
+            } as unknown as MatrixEvent;
+        });
+
+        it("returns correct message for legacy voice call invite", () => {
+            mocked(callInviteEvent).getContent.mockReturnValue({ offer: { sdp: "m=audio" } });
+            expect(textForEvent(callInviteEvent, mockClient)).toEqual("Alice placed a voice call.");
+        });
+
+        it("returns correct message for legacy video call invite", () => {
+            mocked(callInviteEvent).getContent.mockReturnValue({ offer: { sdp: "m=video" } });
+            expect(textForEvent(callInviteEvent, mockClient)).toEqual("Alice placed a video call.");
+        });
+
+        it("returns correct message for MSC4075 voice call", () => {
+            mocked(callInviteEvent).getType.mockReturnValue(EventType.RTCNotification);
+            mocked(callInviteEvent).getContent.mockReturnValue({ "m.call.intent": "audio" });
+            expect(textForEvent(callInviteEvent, mockClient)).toEqual("Alice placed a voice call.");
+        });
+
+        it("returns correct message for MSC4075 video call", () => {
+            mocked(callInviteEvent).getType.mockReturnValue(EventType.RTCNotification);
+            mocked(callInviteEvent).getContent.mockReturnValue({ "m.call.intent": "video" });
+            expect(textForEvent(callInviteEvent, mockClient)).toEqual("Alice placed a video call.");
+        });
+    });
+
     describe("textForMemberEvent()", () => {
         beforeEach(() => {
             stubClient();
diff --git a/apps/web/test/unit-tests/__snapshots__/HtmlUtils-test.tsx.snap b/apps/web/test/unit-tests/__snapshots__/HtmlUtils-test.tsx.snap
index cca4c999cc..b3049b9e50 100644
--- a/apps/web/test/unit-tests/__snapshots__/HtmlUtils-test.tsx.snap
+++ b/apps/web/test/unit-tests/__snapshots__/HtmlUtils-test.tsx.snap
@@ -15,9 +15,9 @@ exports[`bodyToHtml feature_latex_maths should not mangle code blocks 1`] = `"<p
 
 exports[`bodyToHtml feature_latex_maths should not mangle divs 1`] = `"<p>hello</p><div>world</div>"`;
 
-exports[`bodyToHtml feature_latex_maths should render block katex 1`] = `"<p>hello</p><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mi>ξ</mi></mrow><annotation encoding="application/x-tex">\\xi</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.8889em;vertical-align:-0.1944em;"></span><span class="mord mathnormal" style="margin-right:0.046em;">ξ</span></span></span></span></span><p>world</p>"`;
+exports[`bodyToHtml feature_latex_maths should render block katex 1`] = `"<p>hello</p><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mi>ξ</mi></mrow><annotation encoding="application/x-tex">\\xi</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="katex-base"><span class="katex-strut" style="height:0.8889em;vertical-align:-0.1944em;"></span><span class="mord mathnormal" style="margin-right:0.046em;">ξ</span></span></span></span></span><p>world</p>"`;
 
-exports[`bodyToHtml feature_latex_maths should render inline katex 1`] = `"hello <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>ξ</mi></mrow><annotation encoding="application/x-tex">\\xi</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.8889em;vertical-align:-0.1944em;"></span><span class="mord mathnormal" style="margin-right:0.046em;">ξ</span></span></span></span> world"`;
+exports[`bodyToHtml feature_latex_maths should render inline katex 1`] = `"hello <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>ξ</mi></mrow><annotation encoding="application/x-tex">\\xi</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="katex-base"><span class="katex-strut" style="height:0.8889em;vertical-align:-0.1944em;"></span><span class="mord mathnormal" style="margin-right:0.046em;">ξ</span></span></span></span> world"`;
 
 exports[`bodyToNode generates big emoji for emoji made of multiple characters 1`] = `
 <DocumentFragment>
@@ -91,3 +91,20 @@ exports[`bodyToNode should handle inline media when mediaIsVisible is true 1`] =
   </span>
 </DocumentFragment>
 `;
+
+exports[`sanitizedHtmlNode should respect className 1`] = `
+<DocumentFragment>
+  <div
+    class="testClass"
+    dir="auto"
+  >
+    <a
+      href="https://google.com"
+      rel="noreferrer noopener"
+      target="_blank"
+    >
+      Link
+    </a>
+  </div>
+</DocumentFragment>
+`;
diff --git a/apps/web/test/unit-tests/__snapshots__/Terms-test.tsx.snap b/apps/web/test/unit-tests/__snapshots__/Terms-test.ts.snap
similarity index 99%
rename from apps/web/test/unit-tests/__snapshots__/Terms-test.tsx.snap
rename to apps/web/test/unit-tests/__snapshots__/Terms-test.ts.snap
index 7c1bbaa5c0..4b30a38840 100644
--- a/apps/web/test/unit-tests/__snapshots__/Terms-test.tsx.snap
+++ b/apps/web/test/unit-tests/__snapshots__/Terms-test.ts.snap
@@ -107,6 +107,7 @@ exports[`dialogTermsInteractionCallback should render a dialog with the expected
       class="mx_Dialog_buttons_row"
     >
       <button
+        class="cancel"
         data-testid="dialog-cancel-button"
         type="button"
       >
diff --git a/apps/web/test/unit-tests/accessibility/LandmarkNavigation-test.tsx b/apps/web/test/unit-tests/accessibility/LandmarkNavigation-test.tsx
index 878981f708..ae536ccd8d 100644
--- a/apps/web/test/unit-tests/accessibility/LandmarkNavigation-test.tsx
+++ b/apps/web/test/unit-tests/accessibility/LandmarkNavigation-test.tsx
@@ -16,18 +16,18 @@ describe("KeyboardLandmarkUtils", () => {
     it("Landmarks are cycled through correctly without an opened room", () => {
         render(
             <div>
-                <div tabIndex={0} className="mx_SpaceButton_active" data-testid="mx_SpaceButton_active">
+                <button className="mx_SpaceButton_active" data-testid="mx_SpaceButton_active">
                     SPACE_BUTTON
-                </div>
-                <div tabIndex={0} id="room-list-search-button" data-testid="mx_RoomListSearch_search">
+                </button>
+                <button id="room-list-search-button" data-testid="mx_RoomListSearch_search">
                     ROOM_SEARCH
-                </div>
-                <div tabIndex={0} className="mx_RoomListItemView" data-testid="mx_RoomListItemView">
+                </button>
+                <button className="mx_RoomListItemView" data-testid="mx_RoomListItemView">
                     ROOM_TILE
-                </div>
-                <div tabIndex={0} className="mx_HomePage" data-testid="mx_HomePage">
+                </button>
+                <button className="mx_HomePage" data-testid="mx_HomePage">
                     HOME_PAGE
-                </div>
+                </button>
             </div>,
         );
         // ACTIVE_SPACE_BUTTON <-> ROOM_SEARCH <-> ROOM_LIST <-> HOME <-> ACTIVE_SPACE_BUTTON
@@ -69,21 +69,19 @@ describe("KeyboardLandmarkUtils", () => {
         defaultDispatcher.register(callback);
         render(
             <div>
-                <div tabIndex={0} className="mx_SpaceButton_active" data-testid="mx_SpaceButton_active">
+                <button className="mx_SpaceButton_active" data-testid="mx_SpaceButton_active">
                     SPACE_BUTTON
-                </div>
-                <div tabIndex={0} id="room-list-search-button" data-testid="mx_RoomListSearch_search">
+                </button>
+                <button id="room-list-search-button" data-testid="mx_RoomListSearch_search">
                     ROOM_SEARCH
-                </div>
-                <div tabIndex={0} className="mx_RoomListItemView_selected" data-testid="mx_RoomListItemView_selected">
+                </button>
+                <button className="mx_RoomListItemView_selected" data-testid="mx_RoomListItemView_selected">
                     ROOM_TILE
-                </div>
-                <div tabIndex={0} className="mx_Room" data-testid="mx_Room">
+                </button>
+                <button className="mx_Room" data-testid="mx_Room">
                     ROOM
-                    <div tabIndex={0} className="mx_MessageComposer">
-                        COMPOSER
-                    </div>
-                </div>
+                    <div className="mx_MessageComposer">COMPOSER</div>
+                </button>
             </div>,
         );
         // ACTIVE_SPACE_BUTTON <-> ROOM_SEARCH <-> ROOM_LIST <-> MESSAGE_COMPOSER <-> ACTIVE_SPACE_BUTTON
diff --git a/apps/web/test/unit-tests/async-components/dialogs/security/__snapshots__/NewRecoveryMethodDialog-test.tsx.snap b/apps/web/test/unit-tests/async-components/dialogs/security/__snapshots__/NewRecoveryMethodDialog-test.tsx.snap
index 5e98003dae..4443affc6b 100644
--- a/apps/web/test/unit-tests/async-components/dialogs/security/__snapshots__/NewRecoveryMethodDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/async-components/dialogs/security/__snapshots__/NewRecoveryMethodDialog-test.tsx.snap
@@ -54,6 +54,7 @@ exports[`<NewRecoveryMethodDialog /> when key backup is disabled 1`] = `
         class="mx_Dialog_buttons_row"
       >
         <button
+          class="cancel"
           data-testid="dialog-cancel-button"
           type="button"
         >
@@ -152,6 +153,7 @@ exports[`<NewRecoveryMethodDialog /> when key backup is enabled 1`] = `
         class="mx_Dialog_buttons_row"
       >
         <button
+          class="cancel"
           data-testid="dialog-cancel-button"
           type="button"
         >
diff --git a/apps/web/test/unit-tests/audio/MockedPlayback.ts b/apps/web/test/unit-tests/audio/MockedPlayback.ts
index da7839748e..cde6e837e7 100644
--- a/apps/web/test/unit-tests/audio/MockedPlayback.ts
+++ b/apps/web/test/unit-tests/audio/MockedPlayback.ts
@@ -5,10 +5,11 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import EventEmitter from "events";
+import EventEmitter from "node:events";
 import { SimpleObservable } from "matrix-widget-api";
 
 import { PlaybackState } from "../../../src/audio/Playback";
+import { vi } from "../../setup/adapter.ts";
 
 /**
  * A mocked playback implementation for testing purposes.
@@ -51,8 +52,8 @@ export class MockedPlayback extends EventEmitter {
         return this.waveformObservable;
     }
 
-    public prepare = jest.fn().mockResolvedValue(undefined);
-    public skipTo = jest.fn();
-    public toggle = jest.fn();
-    public destroy = jest.fn().mockResolvedValue(undefined);
+    public prepare = vi.fn().mockResolvedValue(undefined);
+    public skipTo = vi.fn();
+    public toggle = vi.fn();
+    public destroy = vi.fn().mockResolvedValue(undefined);
 }
diff --git a/apps/web/test/unit-tests/audio/Playback-test.ts b/apps/web/test/unit-tests/audio/Playback-test.ts
index 9732132d6d..3ea66938d0 100644
--- a/apps/web/test/unit-tests/audio/Playback-test.ts
+++ b/apps/web/test/unit-tests/audio/Playback-test.ts
@@ -29,11 +29,18 @@ describe("Playback", () => {
         connect: jest.fn(),
         start: jest.fn(),
     };
+    const mockMediaElementSourceNode = {
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        connect: jest.fn(),
+        disconnect: jest.fn(),
+    };
     const mockAudioContext = {
         decodeAudioData: jest.fn(),
         suspend: jest.fn(),
         resume: jest.fn(),
         createBufferSource: jest.fn().mockReturnValue(mockAudioBufferSourceNode),
+        createMediaElementSource: jest.fn().mockReturnValue(mockMediaElementSourceNode),
         currentTime: 1337,
     };
 
@@ -169,6 +176,34 @@ describe("Playback", () => {
             expect(playback.currentState).toEqual(PlaybackState.Stopped);
         });
 
+        it("hands the ogg fallback a buffer which decodeAudioData has not detached", async () => {
+            // stub logger to keep console clean from expected error
+            jest.spyOn(logger, "error").mockReturnValue(undefined);
+            jest.spyOn(logger, "warn").mockReturnValue(undefined);
+
+            const buffer = new ArrayBuffer(8);
+            mockAudioContext.decodeAudioData
+                .mockImplementationOnce((buf: ArrayBuffer) => {
+                    // The real decodeAudioData detaches the buffer it is handed, even when it fails.
+                    structuredClone(buf, { transfer: [buf] });
+                    return Promise.reject(new Error("test"));
+                })
+                .mockResolvedValueOnce(mockAudioBuffer);
+            // Constructing a view over a detached buffer throws, which is what decodeOgg does first.
+            mocked(decodeOgg).mockImplementationOnce(async (audioBuffer: ArrayBuffer) => {
+                expect(() => new Uint8Array(audioBuffer)).not.toThrow();
+                return new ArrayBuffer(1);
+            });
+
+            const playback = new Playback(buffer);
+
+            await playback.prepare();
+
+            expect(decodeOgg).toHaveBeenCalled();
+            expect(mockAudioContext.decodeAudioData).toHaveBeenCalledTimes(2);
+            expect(playback.currentState).toEqual(PlaybackState.Stopped);
+        });
+
         it("does not try to re-decode audio", async () => {
             const buffer = new ArrayBuffer(8);
             const playback = new Playback(buffer);
@@ -181,4 +216,82 @@ describe("Playback", () => {
             expect(mockAudioContext.decodeAudioData).toHaveBeenCalledTimes(1);
         });
     });
+
+    describe("audio larger than 5mb", () => {
+        // Anything over 5mb is played through an <audio /> element rather than a decoded buffer
+        const largeBuffer = (): ArrayBuffer => new ArrayBuffer(5 * 1024 * 1024 + 1);
+
+        let element: ReturnType<typeof mockAudioElement>;
+
+        /**
+         * A stand-in for the <audio /> element Playback creates. Assigning `src` resolves the load
+         * the same way the browser does, and listeners registered on it can be fired by hand.
+         */
+        const mockAudioElement = () => {
+            const listeners = new Map<string, Set<() => void | Promise<void>>>();
+            const el = {
+                duration: 42,
+                currentTime: 0,
+                onloadeddata: undefined as undefined | (() => void),
+                onerror: undefined as undefined | (() => void),
+                play: jest.fn().mockResolvedValue(undefined),
+                pause: jest.fn(),
+                remove: jest.fn(),
+                addEventListener: jest.fn((type: string, cb: () => void) => {
+                    if (!listeners.has(type)) listeners.set(type, new Set());
+                    listeners.get(type)!.add(cb);
+                }),
+                removeEventListener: jest.fn((type: string, cb: () => void) => {
+                    listeners.get(type)?.delete(cb);
+                }),
+                listenerCount: (type: string): number => listeners.get(type)?.size ?? 0,
+                fire: async (type: string): Promise<void> => {
+                    for (const cb of listeners.get(type) ?? []) await cb();
+                },
+            };
+            Object.defineProperty(el, "src", {
+                set() {
+                    el.onloadeddata?.();
+                },
+            });
+            return el;
+        };
+
+        beforeEach(() => {
+            element = mockAudioElement();
+            jest.spyOn(document, "createElement").mockReturnValue(element as unknown as HTMLElement);
+            global.URL.createObjectURL = jest.fn().mockReturnValue("blob:audio");
+            global.URL.revokeObjectURL = jest.fn();
+            mockAudioContext.createMediaElementSource.mockClear().mockReturnValue(mockMediaElementSourceNode);
+            mockMediaElementSourceNode.connect.mockClear();
+        });
+
+        afterEach(() => {
+            mocked(document.createElement).mockRestore();
+        });
+
+        it("stops when the media element ends", async () => {
+            const playback = new Playback(largeBuffer());
+            await playback.prepare();
+            await playback.play();
+            expect(playback.currentState).toEqual(PlaybackState.Playing);
+
+            await element.fire("ended");
+
+            expect(mockAudioContext.suspend).toHaveBeenCalled();
+            expect(playback.currentState).toEqual(PlaybackState.Stopped);
+            expect(playback.timeSeconds).toEqual(0);
+        });
+
+        it("stops listening to the media element once destroyed", async () => {
+            const playback = new Playback(largeBuffer());
+            await playback.prepare();
+            await playback.play();
+            expect(element.listenerCount("ended")).toEqual(1);
+
+            playback.destroy();
+
+            expect(element.listenerCount("ended")).toEqual(0);
+        });
+    });
 });
diff --git a/apps/web/test/unit-tests/audio/PlaybackQueue-test.ts b/apps/web/test/unit-tests/audio/PlaybackQueue-test.ts
index 15bad79345..d2a09dbab9 100644
--- a/apps/web/test/unit-tests/audio/PlaybackQueue-test.ts
+++ b/apps/web/test/unit-tests/audio/PlaybackQueue-test.ts
@@ -12,7 +12,7 @@ import { PlaybackQueue } from "../../../src/audio/PlaybackQueue";
 import { type Playback, PlaybackState } from "../../../src/audio/Playback";
 import { UPDATE_EVENT } from "../../../src/stores/AsyncStore";
 import { MockedPlayback } from "./MockedPlayback";
-import { SdkContextClass } from "../../../src/contexts/SDKContext";
+import { SDKContextClass } from "../../../src/contexts/SDKContextClass";
 
 describe("PlaybackQueue", () => {
     let playbackQueue: PlaybackQueue;
@@ -22,7 +22,7 @@ describe("PlaybackQueue", () => {
         mockRoom = {
             getMember: jest.fn(),
         } as unknown as Mocked<Room>;
-        playbackQueue = new PlaybackQueue(mockRoom, SdkContextClass.instance.roomViewStore);
+        playbackQueue = new PlaybackQueue(mockRoom, SDKContextClass.instance.roomViewStore);
     });
 
     it.each([
@@ -76,7 +76,7 @@ describe("PlaybackQueue", () => {
             `mx_voice_message_clocks_${mockRoom.roomId}`,
             JSON.stringify(Array.from(clockStates.entries())),
         );
-        playbackQueue = new PlaybackQueue(mockRoom, SdkContextClass.instance.roomViewStore);
+        playbackQueue = new PlaybackQueue(mockRoom, SDKContextClass.instance.roomViewStore);
 
         // @ts-ignore
         expect(playbackQueue.clockStates.has("a")).toBe(true);
diff --git a/apps/web/test/unit-tests/audio/VoiceRecording-test.ts b/apps/web/test/unit-tests/audio/VoiceRecording-test.ts
index 73329ba566..29d4fae621 100644
--- a/apps/web/test/unit-tests/audio/VoiceRecording-test.ts
+++ b/apps/web/test/unit-tests/audio/VoiceRecording-test.ts
@@ -136,7 +136,7 @@ describe("VoiceRecording", () => {
             MediaDeviceHandlerMock.getAudioInput.mockReturnValue("default");
             await recording.start();
 
-            const constraints = mocked(navigator.mediaDevices.getUserMedia).mock.calls[0][0] as MediaStreamConstraints;
+            const constraints = mocked(navigator.mediaDevices.getUserMedia).mock.calls[0][0]!;
             expect(constraints.audio).toEqual(
                 expect.not.objectContaining({
                     deviceId: expect.anything(),
diff --git a/apps/web/test/unit-tests/components/structures/ContextMenu-test.ts b/apps/web/test/unit-tests/components/structures/ContextMenu-test.ts
index ae9ff3a1ab..6e57b53a80 100644
--- a/apps/web/test/unit-tests/components/structures/ContextMenu-test.ts
+++ b/apps/web/test/unit-tests/components/structures/ContextMenu-test.ts
@@ -6,7 +6,7 @@ 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 { toLeftOf, toLeftOrRightOf, toRightOf } from "../../../../src/components/structures/ContextMenu";
+import { toRightOf } from "../../../../src/components/structures/ContextMenu";
 import UIStore from "../../../../src/stores/UIStore";
 
 describe("ContextMenu", () => {
@@ -26,16 +26,6 @@ describe("ContextMenu", () => {
         UIStore.instance.windowWidth = 1280;
     });
 
-    describe("toLeftOf", () => {
-        it("should return the correct positioning", () => {
-            expect(toLeftOf(rect)).toEqual({
-                chevronOffset: 12,
-                right: 1285, // 1280 - 23 + 31 - 3
-                top: 303, // 42 + (480 / 2) + 41 - (12 + 8)
-            });
-        });
-    });
-
     describe("toRightOf", () => {
         it("should return the correct positioning", () => {
             expect(toRightOf(rect)).toEqual({
@@ -45,35 +35,4 @@ describe("ContextMenu", () => {
             });
         });
     });
-
-    describe("toLeftOrRightOf", () => {
-        describe("when there is more space to the right", () => {
-            // default case from test setup
-
-            it("should return a position to the right", () => {
-                expect(toLeftOrRightOf(rect)).toEqual({
-                    chevronOffset: 12,
-                    left: 80, // 46 + 31 + 3
-                    top: 303, // 42 + (480 / 2) + 41 - (12 + 8)
-                });
-            });
-        });
-
-        describe("when there is more space to the left", () => {
-            beforeEach(() => {
-                // @ts-ignore
-                rect.left = 500;
-                // @ts-ignore
-                rect.right = 1000;
-            });
-
-            it("should return a position to the left", () => {
-                expect(toLeftOrRightOf(rect)).toEqual({
-                    chevronOffset: 12,
-                    right: 808, // 1280 - 500 + 31 - 3
-                    top: 303, // 42 + (480 / 2) + 41 - (12 + 8)
-                });
-            });
-        });
-    });
 });
diff --git a/apps/web/test/unit-tests/components/structures/FileDropTarget-test.tsx b/apps/web/test/unit-tests/components/structures/FileDropTarget-test.tsx
index 20b02f9fa5..30c780de4c 100644
--- a/apps/web/test/unit-tests/components/structures/FileDropTarget-test.tsx
+++ b/apps/web/test/unit-tests/components/structures/FileDropTarget-test.tsx
@@ -6,35 +6,49 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { mocked } from "jest-mock";
 import { render, fireEvent } from "jest-matrix-react";
-import { Room } from "matrix-js-sdk/src/matrix";
+import { useMockedViewModel } from "@element-hq/web-shared-components";
 
 import FileDropTarget from "../../../../src/components/structures/FileDropTarget.tsx";
-import { stubClient } from "../../../test-utils";
+import { RoomUploadContext, type RoomUploadViewModel } from "../../../../src/viewmodels/room/RoomUploadViewModel.tsx";
+
+function FileDropTargetWrapped({
+    element,
+    mayDragAndDropFile = false,
+    onFileDrop,
+}: {
+    element: HTMLDivElement;
+    mayDragAndDropFile?: boolean;
+    onFileDrop: RoomUploadViewModel["initiateViaDataTransfer"];
+}) {
+    const mockVm = useMockedViewModel<
+        { mayDragAndDropFile: boolean },
+        Pick<RoomUploadViewModel, "initiateViaDataTransfer">
+    >({ mayDragAndDropFile }, { initiateViaDataTransfer: onFileDrop });
+    return (
+        <RoomUploadContext.Provider value={mockVm as RoomUploadViewModel}>
+            <FileDropTarget parent={element} />
+        </RoomUploadContext.Provider>
+    );
+}
 
 describe("FileDropTarget", () => {
-    let room: Room;
-    beforeEach(() => {
-        const client = stubClient();
-        room = new Room("!roomId:example.com", client, client.getUserId()!);
-        room.currentState.maySendMessage = jest.fn().mockReturnValue(true);
-    });
-
     it("should render nothing when idle", () => {
         const element = document.createElement("div");
         const onFileDrop = jest.fn();
 
-        const { asFragment } = render(<FileDropTarget room={room} onFileDrop={onFileDrop} parent={element} />);
+        const { asFragment } = render(
+            <FileDropTargetWrapped element={element} mayDragAndDropFile onFileDrop={onFileDrop} />,
+        );
         expect(asFragment()).toMatchSnapshot();
     });
 
     it("should render drop file prompt on mouse over with file if permissions allow", () => {
         const element = document.createElement("div");
         const onFileDrop = jest.fn();
-        mocked(room.currentState.maySendMessage).mockReturnValue(true);
-
-        const { asFragment } = render(<FileDropTarget room={room} onFileDrop={onFileDrop} parent={element} />);
+        const { asFragment } = render(
+            <FileDropTargetWrapped element={element} mayDragAndDropFile onFileDrop={onFileDrop} />,
+        );
         fireEvent.dragEnter(element, {
             dataTransfer: {
                 types: ["Files"],
@@ -46,9 +60,7 @@ describe("FileDropTarget", () => {
     it("should not render drop file prompt on mouse over with file if permissions do not allow", () => {
         const element = document.createElement("div");
         const onFileDrop = jest.fn();
-        mocked(room.currentState.maySendMessage).mockReturnValue(false);
-
-        const { asFragment } = render(<FileDropTarget room={room} onFileDrop={onFileDrop} parent={element} />);
+        const { asFragment } = render(<FileDropTargetWrapped element={element} onFileDrop={onFileDrop} />);
         fireEvent.dragEnter(element, {
             dataTransfer: {
                 types: ["Files"],
diff --git a/apps/web/test/unit-tests/components/structures/FilePanel-test.tsx b/apps/web/test/unit-tests/components/structures/FilePanel-test.tsx
index eab6725293..acbf699c42 100644
--- a/apps/web/test/unit-tests/components/structures/FilePanel-test.tsx
+++ b/apps/web/test/unit-tests/components/structures/FilePanel-test.tsx
@@ -12,8 +12,9 @@ import { screen, render, waitFor } from "jest-matrix-react";
 import { mocked } from "jest-mock";
 
 import FilePanel from "../../../../src/components/structures/FilePanel";
-import { mkEvent, stubClient } from "../../../test-utils";
+import { clientAndSDKContextRenderOptions, mkEvent, stubClient } from "../../../test-utils";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
+import { SDKContextClass } from "../../../../src/contexts/SDKContextClass.ts";
 
 jest.mock("matrix-js-sdk/src/matrix", () => ({
     ...jest.requireActual("matrix-js-sdk/src/matrix"),
@@ -38,7 +39,10 @@ describe("FilePanel", () => {
         room.getOrCreateFilteredTimelineSet = jest.fn().mockReturnValue(timelineSet);
         mocked(cli.getRoom).mockReturnValue(room);
 
-        const { asFragment } = render(<FilePanel roomId={room.roomId} onClose={jest.fn()} />);
+        const { asFragment } = render(
+            <FilePanel roomId={room.roomId} onClose={jest.fn()} />,
+            clientAndSDKContextRenderOptions(cli, SDKContextClass.instance),
+        );
         await waitFor(() => {
             expect(screen.getByText("No files visible in this room")).toBeInTheDocument();
         });
@@ -65,6 +69,7 @@ describe("FilePanel", () => {
                         filePanel = ref;
                     }}
                 />,
+                clientAndSDKContextRenderOptions(cli, SDKContextClass.instance),
             );
             await screen.findByText("No files visible in this room");
 
diff --git a/apps/web/test/unit-tests/components/structures/LeftPanel-test.tsx b/apps/web/test/unit-tests/components/structures/LeftPanel-test.tsx
deleted file mode 100644
index 518dc948de..0000000000
--- a/apps/web/test/unit-tests/components/structures/LeftPanel-test.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2023 Mikhail Aheichyk
-Copyright 2023 Nordeck IT + Consulting GmbH.
-
-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 { render, type RenderResult, screen } from "jest-matrix-react";
-import { mocked } from "jest-mock";
-
-import LeftPanel from "../../../../src/components/structures/LeftPanel";
-import PageType from "../../../../src/PageTypes";
-import ResizeNotifier from "../../../../src/utils/ResizeNotifier";
-import { shouldShowComponent } from "../../../../src/customisations/helpers/UIComponents";
-import { UIComponent } from "../../../../src/settings/UIFeature";
-
-jest.mock("../../../../src/customisations/helpers/UIComponents", () => ({
-    shouldShowComponent: jest.fn(),
-}));
-
-describe("LeftPanel", () => {
-    function renderComponent(): RenderResult {
-        return render(
-            <LeftPanel isMinimized={false} pageType={PageType.RoomView} resizeNotifier={new ResizeNotifier()} />,
-        );
-    }
-
-    it("does not show filter container when disabled by UIComponent customisations", () => {
-        mocked(shouldShowComponent).mockReturnValue(false);
-        renderComponent();
-        expect(shouldShowComponent).toHaveBeenCalledWith(UIComponent.FilterContainer);
-        expect(screen.queryByRole("button", { name: /search/i })).not.toBeInTheDocument();
-        expect(screen.queryByRole("button", { name: "Explore rooms" })).not.toBeInTheDocument();
-    });
-
-    it("renders filter container when enabled by UIComponent customisations", () => {
-        mocked(shouldShowComponent).mockReturnValue(true);
-        renderComponent();
-        expect(shouldShowComponent).toHaveBeenCalledWith(UIComponent.FilterContainer);
-        expect(screen.getByRole("button", { name: /search/i })).toBeInTheDocument();
-        expect(screen.getByRole("button", { name: "Explore rooms" })).toBeInTheDocument();
-    });
-});
diff --git a/apps/web/test/unit-tests/components/structures/LegacyCallEventGrouper-test.ts b/apps/web/test/unit-tests/components/structures/LegacyCallEventGrouper-test.ts
index 6c4fd23018..be074a5fd0 100644
--- a/apps/web/test/unit-tests/components/structures/LegacyCallEventGrouper-test.ts
+++ b/apps/web/test/unit-tests/components/structures/LegacyCallEventGrouper-test.ts
@@ -6,12 +6,13 @@ 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 MatrixClient, type MatrixEvent, EventType } from "matrix-js-sdk/src/matrix";
+import { type MatrixClient, MatrixEvent, EventType } from "matrix-js-sdk/src/matrix";
 import { CallState } from "matrix-js-sdk/src/webrtc/call";
 
 import { stubClient } from "../../../test-utils";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import LegacyCallEventGrouper from "../../../../src/components/structures/LegacyCallEventGrouper";
+import { SDKContextClass } from "../../../../src/contexts/SDKContextClass.ts";
 
 const MY_USER_ID = "@me:here";
 const THEIR_USER_ID = "@they:here";
@@ -145,4 +146,83 @@ describe("LegacyCallEventGrouper", () => {
 
         expect(grouper.isVoice).toBe(false);
     });
+
+    it("should be able to answer call", () => {
+        const grouper = new LegacyCallEventGrouper();
+        grouper.add(
+            new MatrixEvent({
+                content: {
+                    call_id: "callId",
+                },
+                type: EventType.CallInvite,
+                sender: THEIR_USER_ID,
+                room_id: "!room:server",
+            }),
+        );
+
+        jest.spyOn(SDKContextClass.instance.legacyCallHandler, "answerCall");
+        grouper.answerCall();
+        expect(SDKContextClass.instance.legacyCallHandler.answerCall).toHaveBeenCalledWith("!room:server");
+    });
+
+    it("should be able to reject call", () => {
+        const grouper = new LegacyCallEventGrouper();
+        grouper.add(
+            new MatrixEvent({
+                content: {
+                    call_id: "callId",
+                },
+                type: EventType.CallInvite,
+                sender: THEIR_USER_ID,
+                room_id: "!room:server",
+            }),
+        );
+
+        jest.spyOn(SDKContextClass.instance.legacyCallHandler, "hangupOrReject");
+        grouper.rejectCall();
+        expect(SDKContextClass.instance.legacyCallHandler.hangupOrReject).toHaveBeenCalledWith("!room:server", true);
+    });
+
+    it("should be able to callback call", () => {
+        const grouper = new LegacyCallEventGrouper();
+        grouper.add(
+            new MatrixEvent({
+                content: {
+                    call_id: "callId",
+                },
+                type: EventType.CallHangup,
+                sender: THEIR_USER_ID,
+                room_id: "!room:server",
+            }),
+        );
+
+        jest.spyOn(SDKContextClass.instance.legacyCallHandler, "placeCall");
+        grouper.callBack();
+        expect(SDKContextClass.instance.legacyCallHandler.placeCall).toHaveBeenCalledWith("!room:server", "video");
+    });
+
+    it("should be able to toggle call silenced", () => {
+        const grouper = new LegacyCallEventGrouper();
+        grouper.add(
+            new MatrixEvent({
+                content: {
+                    call_id: "callId",
+                },
+                type: EventType.CallHangup,
+                sender: THEIR_USER_ID,
+                room_id: "!room:server",
+            }),
+        );
+
+        jest.spyOn(SDKContextClass.instance.legacyCallHandler, "unSilenceCall");
+        jest.spyOn(SDKContextClass.instance.legacyCallHandler, "silenceCall");
+
+        jest.spyOn(SDKContextClass.instance.legacyCallHandler, "isCallSilenced").mockReturnValue(false);
+        grouper.toggleSilenced();
+        expect(SDKContextClass.instance.legacyCallHandler.silenceCall).toHaveBeenCalledWith("callId");
+
+        jest.spyOn(SDKContextClass.instance.legacyCallHandler, "isCallSilenced").mockReturnValue(true);
+        grouper.toggleSilenced();
+        expect(SDKContextClass.instance.legacyCallHandler.unSilenceCall).toHaveBeenCalledWith("callId");
+    });
 });
diff --git a/apps/web/test/unit-tests/components/structures/LoggedInView-test.tsx b/apps/web/test/unit-tests/components/structures/LoggedInView-test.tsx
index 3a3d5bc909..7212e5ffea 100644
--- a/apps/web/test/unit-tests/components/structures/LoggedInView-test.tsx
+++ b/apps/web/test/unit-tests/components/structures/LoggedInView-test.tsx
@@ -30,8 +30,14 @@ import LoggedInView from "../../../../src/components/structures/LoggedInView";
 import { SDKContext } from "../../../../src/contexts/SDKContext";
 import { StandardActions } from "../../../../src/notifications/StandardActions";
 import ResizeNotifier from "../../../../src/utils/ResizeNotifier";
-import { flushPromises, getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../test-utils";
-import { TestSdkContext } from "../../TestSdkContext";
+import {
+    flushPromises,
+    getMockClientWithEventEmitter,
+    mockClientMethodsRooms,
+    mockClientMethodsServer,
+    mockClientMethodsUser,
+} from "../../../test-utils";
+import { TestSDKContext } from "../../TestSDKContext";
 import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
 import SettingsStore from "../../../../src/settings/SettingsStore";
 import { SettingLevel } from "../../../../src/settings/SettingLevel";
@@ -39,35 +45,16 @@ import { Action } from "../../../../src/dispatcher/actions";
 import Modal from "../../../../src/Modal";
 import { SETTINGS } from "../../../../src/settings/Settings";
 import ToastStore from "../../../../src/stores/ToastStore";
-
-// Create a mock resizer instance that can be shared across tests
-const mockResizerInstance = {
-    attach: jest.fn(),
-    detach: jest.fn(),
-    forHandleWithId: jest.fn().mockReturnValue({ resize: jest.fn() }),
-    setClassNames: jest.fn(),
-};
-
-// Mock the Resizer module
-jest.mock("../../../../src/resizer", () => {
-    const originalModule = jest.requireActual("../../../../src/resizer");
-    return {
-        ...originalModule,
-        Resizer: jest.fn().mockImplementation((container, distributorBuilder, collapseConfig) => {
-            // Store the callbacks globally for test access
-            (global as any).__resizeCallbacks = collapseConfig;
-            return mockResizerInstance;
-        }),
-    };
-});
+import { ModuleApi } from "../../../../src/modules/Api";
+import { fireEvent } from "@testing-library/dom";
 
 describe("<LoggedInView />", () => {
     const userId = "@alice:domain.org";
     const mockClient = getMockClientWithEventEmitter({
         ...mockClientMethodsUser(userId),
-        getClientWellKnown: jest.fn(),
+        ...mockClientMethodsServer(),
+        ...mockClientMethodsRooms([]),
         getAccountData: jest.fn(),
-        getRoom: jest.fn(),
         getSyncState: jest.fn().mockReturnValue(null),
         getSyncStateData: jest.fn().mockReturnValue(null),
         getMediaHandler: jest.fn(),
@@ -77,19 +64,23 @@ describe("<LoggedInView />", () => {
         setExtendedProfileProperty: jest.fn().mockResolvedValue(undefined),
         deleteExtendedProfileProperty: jest.fn().mockResolvedValue(undefined),
         doesServerSupportExtendedProfiles: jest.fn().mockResolvedValue(true),
+        matrixRTC: {
+            on: jest.fn(),
+        },
+        getAuthMetadata: jest.fn().mockRejectedValue(new Error("Legacy auth")),
+        hasLazyLoadMembersEnabled: jest.fn(),
+        isInitialSyncComplete: jest.fn(),
     });
     const mediaHandler = new MediaHandler(mockClient);
-    const mockSdkContext = new TestSdkContext();
+    const mockSdkContext = new TestSDKContext();
 
     const defaultProps = {
         matrixClient: mockClient,
         onRegistered: jest.fn(),
         resizeNotifier: new ResizeNotifier(),
-        collapseLhs: false,
         hideToSRUsers: false,
         config: {
             brand: "Test",
-            element_call: {},
         },
         currentRoomId: "",
         currentUserId: "@bob:server",
@@ -106,7 +97,7 @@ describe("<LoggedInView />", () => {
         mockClient.setPushRuleActions.mockReset().mockResolvedValue({});
         // @ts-expect-error
         mockClient.pushProcessor = new PushProcessor(mockClient);
-        mockSdkContext.client = mockClient;
+        mockSdkContext._client = mockClient;
     });
 
     describe("synced push rules", () => {
@@ -534,113 +525,44 @@ describe("<LoggedInView />", () => {
         });
     });
 
-    describe("resizer preferences", () => {
-        let mockResize: jest.Mock;
-        let mockForHandleWithId: jest.Mock;
+    describe("module-rendered fullscreen view (e.g. multiroom)", () => {
+        // A page_type for which a module registers a custom full-screen renderer.
+        const modulePageType = "io.element.test_fullscreen";
+
         beforeEach(() => {
-            // Clear localStorage before each test
-            window.localStorage.clear();
-
-            mockResize = jest.fn();
-            mockForHandleWithId = jest.fn().mockReturnValue({ resize: mockResize });
-
-            // Update the shared mock instance for this test
-            mockResizerInstance.forHandleWithId = mockForHandleWithId;
-
-            // Clear any global callback state
-            delete (global as any).__resizeCallbacks;
+            ModuleApi.instance.navigation.registerLocationRenderer(modulePageType, () => (
+                <div data-testid="module-content" />
+            ));
         });
 
-        it("should call resize with default size when localStorage contains NaN value", () => {
-            // Set invalid value in localStorage that will result in NaN
-            window.localStorage.setItem("mx_lhs_size", "not-a-number");
-
-            getComponent();
-
-            // Verify that when lhsSize is NaN, it defaults to 350 and calls resize
-            expect(mockForHandleWithId).toHaveBeenCalledWith("lp-resizer");
-            expect(mockResize).toHaveBeenCalledWith(350);
+        afterEach(() => {
+            ModuleApi.instance.navigation.locationRenderers.delete(modulePageType);
         });
 
-        it("should use existing size when localStorage contains valid value", () => {
-            // Set valid value in localStorage
-            window.localStorage.setItem("mx_lhs_size", "400");
+        it("renders the resizable separator for a normal room view with the new room list", () => {
+            const { container } = getComponent({ page_type: "room" });
 
-            getComponent();
-
-            // Verify the resize method was called with the stored size (400)
-            expect(mockResize).toHaveBeenCalledWith(400);
+            // With the new room list and no module renderer, the resizable left panel and its separator are used.
+            expect(container.querySelector(".mx_Separator")).toBeInTheDocument();
         });
 
-        it("should enforce minimum width for new room list when stored size is zero", async () => {
-            // Enable new room list feature
-            await SettingsStore.setValue("feature_new_room_list", null, SettingLevel.DEVICE, true);
+        it("does not render the resizer for a module-rendered fullscreen view, but keeps the space panel", () => {
+            const { container, getByTestId } = getComponent({ page_type: modulePageType });
 
-            // 0 represents the collapsed state for the old room list, which could have been set before the new room list was enabled
-            window.localStorage.setItem("mx_lhs_size", "0");
-
-            getComponent();
-
-            // Verify the resize method was called with the default size (350) when stored size is below minimum
-            expect(mockResize).toHaveBeenCalledWith(350);
-        });
-
-        it("should not set localStorage to 0 when resizing lp-resizer to minimum width for new room list", async () => {
-            // Enable new room list feature and mock SettingsStore
-            await SettingsStore.setValue("feature_new_room_list", null, SettingLevel.DEVICE, true);
-
-            const minimumWidth = 224; // NEW_ROOM_LIST_MIN_WIDTH
-
-            // Render the component
-            getComponent();
-
-            // Get the callbacks that were captured during resizer creation
-            const callbacks = (global as any).__resizeCallbacks;
-
-            // Create a mock DOM node for isItemCollapsed to check
-            const domNode = {
-                classList: {
-                    contains: jest.fn().mockReturnValue(true), // Simulate the error where mx_LeftPanel_minimized is present
-                },
-            } as any;
-
-            callbacks.onResized(minimumWidth);
-            const isCollapsed = callbacks.isItemCollapsed(domNode);
-            callbacks.onCollapsed(isCollapsed); // Not collapsed for new room list
-            callbacks.onResizeStop();
-
-            // Verify localStorage was set to the minimum width (224), not 0
-            expect(window.localStorage.getItem("mx_lhs_size")).toBe("224");
+            // The module's full-screen content is shown...
+            expect(getByTestId("module-content")).toBeInTheDocument();
+            // ...without the resizable separator or the legacy resize handle...
+            expect(container.querySelector(".mx_Separator")).not.toBeInTheDocument();
+            expect(container.querySelector(".mx_ResizeHandle")).not.toBeInTheDocument();
+            // ...while the space panel rail remains visible.
+            expect(container.querySelector(".mx_SpacePanel")).toBeInTheDocument();
         });
     });
 
-    describe("create a new resizer when page_type changes", () => {
-        afterEach(() => {
-            jest.clearAllMocks();
-        });
-
-        it("should call loadResizer when page_type changes", () => {
-            const component = getComponent({ page_type: "room" });
-
-            // Re-render with different page_type
-            component.rerender(<LoggedInView {...defaultProps} page_type="home" />);
-
-            // Verify that detach was called (from loadResizer)
-            expect(mockResizerInstance.detach).toHaveBeenCalledTimes(1);
-            // Verify that attach was called (from loadResizer)
-            // 1 (when page_type = "room") + 1 (when page_type = "home")
-            expect(mockResizerInstance.attach).toHaveBeenCalledTimes(2);
-        });
-
-        it("should not call loadResizer when page_type remains the same", () => {
-            const component = getComponent({ page_type: "room" });
-
-            // Re-render with same page_type but different other props
-            component.rerender(<LoggedInView {...defaultProps} page_type="room" currentRoomId="!different:room.id" />);
-
-            // Verify that resizer methods were not called
-            expect(mockResizerInstance.detach).not.toHaveBeenCalled();
-            expect(mockResizerInstance.attach).toHaveBeenCalledTimes(1);
-        });
+    it("should handle KeyBindingAction.ToggleRoomSidePanel", async () => {
+        getComponent({ page_type: "room_view" });
+        jest.spyOn(mockSdkContext.rightPanelStore, "togglePanel");
+        fireEvent.keyDown(document.body, { key: ".", code: "Period", ctrlKey: true, keyCode: 190 });
+        expect(mockSdkContext.rightPanelStore.togglePanel).toHaveBeenCalledWith(null);
     });
 });
diff --git a/apps/web/test/unit-tests/components/structures/MainSplit-test.tsx b/apps/web/test/unit-tests/components/structures/MainSplit-test.tsx
index da3c29cd36..9568334fb8 100644
--- a/apps/web/test/unit-tests/components/structures/MainSplit-test.tsx
+++ b/apps/web/test/unit-tests/components/structures/MainSplit-test.tsx
@@ -11,7 +11,8 @@ import { render, fireEvent } from "jest-matrix-react";
 
 import MainSplit from "../../../../src/components/structures/MainSplit";
 import { PosthogAnalytics } from "../../../../src/PosthogAnalytics.ts";
-import { SDKContext, SdkContextClass } from "../../../../src/contexts/SDKContext.ts";
+import { SDKContext } from "../../../../src/contexts/SDKContext.ts";
+import { SDKContextClass } from "../../../../src/contexts/SDKContextClass";
 
 describe("<MainSplit/>", () => {
     const children = (
@@ -20,11 +21,11 @@ describe("<MainSplit/>", () => {
         </div>
     );
     const panel = <div>Right panel</div>;
-    let sdkContext: SdkContextClass;
+    let sdkContext: SDKContextClass;
 
     beforeEach(() => {
         localStorage.clear();
-        sdkContext = new SdkContextClass();
+        sdkContext = new SDKContextClass();
     });
 
     it("renders", () => {
diff --git a/apps/web/test/unit-tests/components/structures/MessagePanel-test.tsx b/apps/web/test/unit-tests/components/structures/MessagePanel-test.tsx
index cef5310920..bb75f4fe19 100644
--- a/apps/web/test/unit-tests/components/structures/MessagePanel-test.tsx
+++ b/apps/web/test/unit-tests/components/structures/MessagePanel-test.tsx
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { EventEmitter } from "events";
+import { EventEmitter } from "node:events";
 import { type MatrixEvent, Room, RoomMember, type Thread, ReceiptType } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { render, within } from "jest-matrix-react";
@@ -25,13 +25,14 @@ import {
     makeBeaconInfoEvent,
     mockClientMethodsCrypto,
     mockClientMethodsEvents,
+    mockClientMethodsServer,
     mockClientMethodsUser,
     mockClientPushProcessor,
 } from "../../../test-utils";
 import type ResizeNotifier from "../../../../src/utils/ResizeNotifier";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import { ScopedRoomContextProvider } from "../../../../src/contexts/ScopedRoomContext.tsx";
-import { SdkContextClass } from "../../../../src/contexts/SDKContext.ts";
+import { TestSDKContext } from "../../TestSDKContext.ts";
 
 jest.mock("../../../../src/utils/beacon", () => ({
     useBeacon: jest.fn(),
@@ -47,14 +48,15 @@ describe("MessagePanel", function () {
         ...mockClientMethodsEvents(),
         ...mockClientMethodsCrypto(),
         ...mockClientPushProcessor(),
+        ...mockClientMethodsServer(),
         getAccountData: jest.fn(),
         isUserIgnored: jest.fn().mockReturnValue(false),
         isRoomEncrypted: jest.fn().mockReturnValue(false),
         getRoom: jest.fn(),
-        getClientWellKnown: jest.fn().mockReturnValue({}),
         supportsThreads: jest.fn().mockReturnValue(true),
+        getVisibleRooms: jest.fn().mockReturnValue([]),
     });
-    let sdkContext: SdkContextClass;
+    let sdkContext: TestSDKContext;
     jest.spyOn(MatrixClientPeg, "get").mockReturnValue(client);
 
     const room = new Room(roomId, client, userId);
@@ -106,7 +108,8 @@ describe("MessagePanel", function () {
             return arg === "showDisplaynameChanges";
         });
 
-        sdkContext = new SdkContextClass();
+        sdkContext = new TestSDKContext();
+        sdkContext._client = client;
 
         DMRoomMap.makeShared(client);
     });
diff --git a/apps/web/test/unit-tests/components/structures/PictureInPictureDragger-test.tsx b/apps/web/test/unit-tests/components/structures/PictureInPictureDragger-test.tsx
index 424a396820..2a0df98df2 100644
--- a/apps/web/test/unit-tests/components/structures/PictureInPictureDragger-test.tsx
+++ b/apps/web/test/unit-tests/components/structures/PictureInPictureDragger-test.tsx
@@ -84,7 +84,6 @@ describe("PictureInPictureDragger", () => {
                 <PictureInPictureDragger>
                     {[
                         ({ onStartMoving }) => (
-                            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
                             <div onMouseDown={onStartMoving} onClick={clickSpy}>
                                 Hello
                             </div>
diff --git a/apps/web/test/unit-tests/components/structures/PipContainer-test.tsx b/apps/web/test/unit-tests/components/structures/PipContainer-test.tsx
index c1b8275981..8c7a7684f5 100644
--- a/apps/web/test/unit-tests/components/structures/PipContainer-test.tsx
+++ b/apps/web/test/unit-tests/components/structures/PipContainer-test.tsx
@@ -41,12 +41,12 @@ import DMRoomMap from "../../../../src/utils/DMRoomMap";
 import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
 import { Action } from "../../../../src/dispatcher/actions";
 import { type ViewRoomPayload } from "../../../../src/dispatcher/payloads/ViewRoomPayload";
-import { TestSdkContext } from "../../TestSdkContext";
+import { TestSDKContext } from "../../TestSDKContext";
 import { RoomViewStore } from "../../../../src/stores/RoomViewStore";
 import { WidgetLayoutStore } from "../../../../src/stores/widgets/WidgetLayoutStore";
 import WidgetStore from "../../../../src/stores/WidgetStore";
 import { WidgetType } from "../../../../src/widgets/WidgetType";
-import { SdkContextClass } from "../../../../src/contexts/SDKContext";
+import { SDKContextClass } from "../../../../src/contexts/SDKContextClass";
 import { type WidgetMessaging } from "../../../../src/stores/widgets/WidgetMessaging";
 
 jest.mock("../../../../src/stores/OwnProfileStore", () => ({
@@ -65,7 +65,7 @@ describe("PipContainer", () => {
     jest.spyOn(HTMLMediaElement.prototype, "play").mockImplementation(async () => {});
 
     let user: UserEvent;
-    let sdkContext: TestSdkContext;
+    let sdkContext: TestSDKContext;
     let client: Mocked<MatrixClient>;
     let room: Room;
     let room2: Room;
@@ -109,10 +109,10 @@ describe("PipContainer", () => {
             ),
         );
 
-        sdkContext = new TestSdkContext();
+        sdkContext = new TestSDKContext();
         // @ts-ignore PipContainer uses SDKContext in the constructor
-        SdkContextClass.instance = sdkContext;
-        sdkContext.client = client;
+        SDKContextClass.instance = sdkContext;
+        sdkContext._client = client;
     });
 
     afterEach(async () => {
diff --git a/apps/web/test/unit-tests/components/structures/ReleaseAnnouncement-test.tsx b/apps/web/test/unit-tests/components/structures/ReleaseAnnouncement-test.tsx
index bb0274e9af..75a1474ac9 100644
--- a/apps/web/test/unit-tests/components/structures/ReleaseAnnouncement-test.tsx
+++ b/apps/web/test/unit-tests/components/structures/ReleaseAnnouncement-test.tsx
@@ -22,7 +22,12 @@ describe("ReleaseAnnouncement", () => {
 
     function renderReleaseAnnouncement() {
         return render(
-            <ReleaseAnnouncement feature="_test_dummy1" header="header" description="description" closeLabel="close">
+            <ReleaseAnnouncement
+                feature="room_list_section"
+                header="header"
+                description="description"
+                closeLabel="close"
+            >
                 <div>content</div>
             </ReleaseAnnouncement>,
         );
diff --git a/apps/web/test/unit-tests/components/structures/RightPanel-test.tsx b/apps/web/test/unit-tests/components/structures/RightPanel-test.tsx
index 5a5b9237af..c163ad2f4e 100644
--- a/apps/web/test/unit-tests/components/structures/RightPanel-test.tsx
+++ b/apps/web/test/unit-tests/components/structures/RightPanel-test.tsx
@@ -23,8 +23,8 @@ import { RightPanelPhases } from "../../../../src/stores/right-panel/RightPanelS
 import RightPanelStore from "../../../../src/stores/right-panel/RightPanelStore";
 import { UPDATE_EVENT } from "../../../../src/stores/AsyncStore";
 import { WidgetLayoutStore } from "../../../../src/stores/widgets/WidgetLayoutStore";
-import { SdkContextClass } from "../../../../src/contexts/SDKContext";
 import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
+import { TestSDKContext } from "../../TestSDKContext.ts";
 
 const RightPanelBase = wrapInMatrixClientContext(_RightPanel);
 
@@ -32,14 +32,14 @@ describe("RightPanel", () => {
     const resizeNotifier = new ResizeNotifier();
 
     let cli: MockedObject<MatrixClient>;
-    let context: SdkContextClass;
+    let context: TestSDKContext;
     let RightPanel: React.ComponentType<React.ComponentProps<typeof RightPanelBase>>;
     beforeEach(() => {
         stubClient();
         cli = mocked(MatrixClientPeg.safeGet());
         DMRoomMap.makeShared(cli);
-        context = new SdkContextClass();
-        context.client = cli;
+        context = new TestSDKContext();
+        context._client = cli;
         RightPanel = wrapInSdkContext(RightPanelBase, context);
     });
 
diff --git a/apps/web/test/unit-tests/components/structures/RoomSearchView-test.tsx b/apps/web/test/unit-tests/components/structures/RoomSearchView-test.tsx
index 36c204ec13..dccf608003 100644
--- a/apps/web/test/unit-tests/components/structures/RoomSearchView-test.tsx
+++ b/apps/web/test/unit-tests/components/structures/RoomSearchView-test.tsx
@@ -24,7 +24,7 @@ import { clientAndSDKContextRenderOptions, stubClient } from "../../../test-util
 import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import { searchPagination, SearchScope } from "../../../../src/Searching";
-import { SdkContextClass } from "../../../../src/contexts/SDKContext";
+import { SDKContextClass } from "../../../../src/contexts/SDKContextClass";
 import SettingsStore from "../../../../src/settings/SettingsStore.ts";
 import { SettingLevel } from "../../../../src/settings/SettingLevel.ts";
 
@@ -36,13 +36,13 @@ jest.mock("../../../../src/Searching", () => ({
 describe("<RoomSearchView/>", () => {
     const eventMapper = (obj: Partial<IEvent>) => new MatrixEvent(obj);
     let client: MatrixClient;
-    let sdkContext: SdkContextClass;
+    let sdkContext: SDKContextClass;
     let room: Room;
 
     beforeEach(async () => {
         stubClient();
         client = MatrixClientPeg.safeGet();
-        sdkContext = new SdkContextClass();
+        sdkContext = new SDKContextClass();
         client.supportsThreads = jest.fn().mockReturnValue(true);
         room = new Room("!room:server", client, client.getSafeUserId());
         mocked(client.getRoom).mockReturnValue(room);
diff --git a/apps/web/test/unit-tests/components/structures/RoomView-test.tsx b/apps/web/test/unit-tests/components/structures/RoomView-test.tsx
index c00a3573e2..afe37d1422 100644
--- a/apps/web/test/unit-tests/components/structures/RoomView-test.tsx
+++ b/apps/web/test/unit-tests/components/structures/RoomView-test.tsx
@@ -21,6 +21,7 @@ import {
     RoomMember,
     RoomStateEvent,
     SearchResult,
+    User,
 } from "matrix-js-sdk/src/matrix";
 import { type CryptoApi, CryptoEvent, UserVerificationStatus } from "matrix-js-sdk/src/crypto-api";
 import { KnownMembership } from "matrix-js-sdk/src/types";
@@ -55,7 +56,8 @@ import { type LocalRoom, LocalRoomState } from "../../../../src/models/LocalRoom
 import { DirectoryMember } from "../../../../src/utils/direct-messages";
 import { createDmLocalRoom } from "../../../../src/utils/dm/createDmLocalRoom";
 import { UPDATE_EVENT } from "../../../../src/stores/AsyncStore";
-import { SDKContext, SdkContextClass } from "../../../../src/contexts/SDKContext";
+import { SDKContext } from "../../../../src/contexts/SDKContext";
+import { TestSDKContext } from "../../TestSDKContext.ts";
 import WidgetUtils from "../../../../src/utils/WidgetUtils";
 import { WidgetType } from "../../../../src/widgets/WidgetType";
 import WidgetStore from "../../../../src/stores/WidgetStore";
@@ -85,7 +87,7 @@ describe("RoomView", () => {
     let cli: MockedObject<MatrixClient>;
     let room: Room;
     let rooms: Map<string, Room>;
-    let stores: SdkContextClass;
+    let stores: TestSDKContext;
     let crypto: CryptoApi;
 
     // mute some noise
@@ -110,8 +112,8 @@ describe("RoomView", () => {
         room.on(RoomEvent.TimelineReset, (...args) => cli.emit(RoomEvent.TimelineReset, ...args));
 
         DMRoomMap.makeShared(cli);
-        stores = new SdkContextClass();
-        stores.client = cli;
+        stores = new TestSDKContext();
+        stores._client = cli;
         stores.rightPanelStore.useUnitTestClient(cli);
 
         crypto = cli.getCrypto()!;
@@ -955,7 +957,7 @@ describe("RoomView", () => {
             expect(searchResultTile).not.toBeNull();
 
             await userEvent.hover(searchResultTile!);
-            await userEvent.click(await findByLabelText("Edit"));
+            await userEvent.click(await findByLabelText("Edit"), { skipHover: true });
 
             await waitFor(() => {
                 expect(container.querySelector(".mx_RoomView_searchResultsPanel")).not.toBeInTheDocument();
@@ -1024,7 +1026,7 @@ describe("RoomView", () => {
             expect(searchResultTile).not.toBeNull();
 
             await userEvent.hover(searchResultTile!);
-            await userEvent.click(await findByLabelText("Edit"));
+            await userEvent.click(await findByLabelText("Edit"), { skipHover: true });
 
             await expect(prom).resolves.toEqual(expect.objectContaining({ room_id: room2.roomId }));
         });
@@ -1079,27 +1081,6 @@ describe("RoomView", () => {
     });
 
     describe("handles Action.ComposerInsert", () => {
-        it("redispatches an empty composerType, timelineRenderingType with the current state", async () => {
-            await mountRoomView();
-            const promise = untilDispatch((payload) => {
-                try {
-                    expect(payload).toEqual({
-                        action: Action.ComposerInsert,
-                        text: "Hello world",
-                        timelineRenderingType: TimelineRenderingType.Room,
-                        composerType: ComposerType.Send,
-                    });
-                } catch {
-                    return false;
-                }
-                return true;
-            }, defaultDispatcher);
-            defaultDispatcher.dispatch({
-                action: Action.ComposerInsert,
-                text: "Hello world",
-            } satisfies ComposerInsertPayload);
-            await promise;
-        });
         it("redispatches an empty composerType with the current state", async () => {
             await mountRoomView();
             const promise = untilDispatch((payload) => {
@@ -1152,6 +1133,54 @@ describe("RoomView", () => {
         });
     });
 
+    it("should handle Action.ViewUser", async () => {
+        await mountRoomView();
+        jest.spyOn(stores.rightPanelStore, "setCards");
+        const member = new User("@user:server");
+        defaultDispatcher.dispatch(
+            {
+                action: Action.ViewUser,
+                member,
+            },
+            true,
+        );
+        expect(stores.rightPanelStore.setCards).toHaveBeenCalledWith([
+            { phase: RightPanelPhases.RoomSummary },
+            { phase: RightPanelPhases.MemberList },
+            { phase: RightPanelPhases.MemberInfo, state: { member } },
+        ]);
+    });
+
+    it("should handle Action.ViewUser with push", async () => {
+        await mountRoomView();
+        jest.spyOn(stores.rightPanelStore, "pushCard");
+        const member = new User("@user:server");
+        defaultDispatcher.dispatch(
+            {
+                action: Action.ViewUser,
+                member,
+                push: true,
+            },
+            true,
+        );
+        expect(stores.rightPanelStore.pushCard).toHaveBeenCalledWith({
+            phase: RightPanelPhases.MemberInfo,
+            state: { member },
+        });
+    });
+
+    it("should handle Action.View3pidInvite", async () => {
+        await mountRoomView();
+        jest.spyOn(stores.rightPanelStore, "showOrHidePhase");
+        defaultDispatcher.dispatch(
+            {
+                action: Action.View3pidInvite,
+            },
+            true,
+        );
+        expect(stores.rightPanelStore.showOrHidePhase).toHaveBeenCalledWith("MemberList");
+    });
+
     describe("when there is a RoomView", () => {
         const widget1Id = "widget1";
         const widget2Id = "widget2";
diff --git a/apps/web/test/unit-tests/components/structures/SpaceRoomView-test.tsx b/apps/web/test/unit-tests/components/structures/SpaceRoomView-test.tsx
index 6610587a50..ba73f0b83a 100644
--- a/apps/web/test/unit-tests/components/structures/SpaceRoomView-test.tsx
+++ b/apps/web/test/unit-tests/components/structures/SpaceRoomView-test.tsx
@@ -10,7 +10,7 @@ import { mocked, type MockedObject } from "jest-mock";
 import { type MatrixClient, MatrixEvent, Preset, Room } from "matrix-js-sdk/src/matrix";
 import { render, cleanup, screen, fireEvent, waitFor, act } from "jest-matrix-react";
 
-import { stubClient, mockPlatformPeg, unmockPlatformPeg, withClientContextRenderOptions } from "../../../test-utils";
+import { stubClient, mockPlatformPeg, unmockPlatformPeg, clientAndSDKContextRenderOptions } from "../../../test-utils";
 import { RightPanelPhases } from "../../../../src/stores/right-panel/RightPanelStorePhases";
 import SpaceRoomView from "../../../../src/components/structures/SpaceRoomView.tsx";
 import ResizeNotifier from "../../../../src/utils/ResizeNotifier.ts";
@@ -18,7 +18,7 @@ import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalink
 import RightPanelStore from "../../../../src/stores/right-panel/RightPanelStore.ts";
 import DMRoomMap from "../../../../src/utils/DMRoomMap.ts";
 import { type IOpts } from "../../../../src/createRoom.ts";
-import SpaceStore from "../../../../src/stores/spaces/SpaceStore.ts";
+import { SDKContextClass } from "../../../../src/contexts/SDKContextClass.ts";
 
 describe("SpaceRoomView", () => {
     let cli: MockedObject<MatrixClient>;
@@ -101,7 +101,7 @@ describe("SpaceRoomView", () => {
                 onRejectButtonClicked={jest.fn()}
                 justCreatedOpts={justCreatedOpts}
             />,
-            withClientContextRenderOptions(cli),
+            clientAndSDKContextRenderOptions(cli, SDKContextClass.instance),
         );
         return spaceRoomView;
     };
@@ -132,7 +132,7 @@ describe("SpaceRoomView", () => {
     describe("Spaces: creating a new community space", () => {
         it("asks what topics you want to discuss, creates rooms for them and offers to share", async () => {
             cli.createRoom.mockResolvedValueOnce({ room_id: "room1" }).mockResolvedValueOnce({ room_id: "room2" });
-            SpaceStore.instance.addRoomToSpace = jest.fn();
+            SDKContextClass.instance.spaceStore.addRoomToSpace = jest.fn();
 
             // Given we are creating a space
             const view = await renderSpaceRoomView({
@@ -243,7 +243,7 @@ describe("SpaceRoomView", () => {
     describe("Spaces: creating a new private space", () => {
         it("creates rooms inside a private space for a team", async () => {
             cli.createRoom.mockResolvedValueOnce({ room_id: "room1" }).mockResolvedValueOnce({ room_id: "room2" });
-            SpaceStore.instance.addRoomToSpace = jest.fn();
+            SDKContextClass.instance.spaceStore.addRoomToSpace = jest.fn();
 
             // When I create a private space
             const view = await renderSpaceRoomView({
diff --git a/apps/web/test/unit-tests/components/structures/ThreadPanel-test.tsx b/apps/web/test/unit-tests/components/structures/ThreadPanel-test.tsx
index 591d990e93..b9083d62eb 100644
--- a/apps/web/test/unit-tests/components/structures/ThreadPanel-test.tsx
+++ b/apps/web/test/unit-tests/components/structures/ThreadPanel-test.tsx
@@ -24,10 +24,18 @@ import { _t } from "../../../../src/languageHandler";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
 import ResizeNotifier from "../../../../src/utils/ResizeNotifier";
-import { createTestClient, getRoomContext, mkRoom, mockPlatformPeg, stubClient } from "../../../test-utils";
+import {
+    clientAndSDKContextRenderOptions,
+    createTestClient,
+    getRoomContext,
+    mkRoom,
+    mockPlatformPeg,
+    stubClient,
+} from "../../../test-utils";
 import { mkThread } from "../../../test-utils/threads";
 import { ScopedRoomContextProvider } from "../../../../src/contexts/ScopedRoomContext.tsx";
 import type { RoomContextType } from "../../../../src/contexts/RoomContext.ts";
+import { SDKContextClass } from "../../../../src/contexts/SDKContextClass.ts";
 
 jest.mock("../../../../src/utils/Feedback");
 
@@ -215,7 +223,10 @@ describe("ThreadPanel", () => {
             myThreads!.addLiveEvent(mixedThread.rootEvent, { addToState: true });
             myThreads!.addLiveEvent(ownThread.rootEvent, { addToState: true });
 
-            const renderResult = render(<TestThreadPanel />);
+            const renderResult = render(
+                <TestThreadPanel />,
+                clientAndSDKContextRenderOptions(createTestClient(), SDKContextClass.instance),
+            );
             await waitFor(() => expect(renderResult.container.querySelector(".mx_AutoHideScrollbar")).toBeFalsy());
             await waitFor(() => {
                 const events = findEvents(renderResult.container);
@@ -260,7 +271,10 @@ describe("ThreadPanel", () => {
             const [allThreads] = room.threadsTimelineSets;
             allThreads!.addLiveEvent(otherThread.rootEvent, { addToState: true });
 
-            const renderResult = render(<TestThreadPanel />);
+            const renderResult = render(
+                <TestThreadPanel />,
+                clientAndSDKContextRenderOptions(createTestClient(), SDKContextClass.instance),
+            );
             await waitFor(() => expect(renderResult.container.querySelector(".mx_AutoHideScrollbar")).toBeFalsy());
             await waitFor(() => {
                 const events = findEvents(renderResult.container);
diff --git a/apps/web/test/unit-tests/components/structures/ThreadView-test.tsx b/apps/web/test/unit-tests/components/structures/ThreadView-test.tsx
index b4f7ed18ae..20ff75d44e 100644
--- a/apps/web/test/unit-tests/components/structures/ThreadView-test.tsx
+++ b/apps/web/test/unit-tests/components/structures/ThreadView-test.tsx
@@ -23,7 +23,7 @@ import React, { useState } from "react";
 
 import ThreadView from "../../../../src/components/structures/ThreadView";
 import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
-import { SdkContextClass } from "../../../../src/contexts/SDKContext";
+import { SDKContextClass } from "../../../../src/contexts/SDKContextClass";
 import { Action } from "../../../../src/dispatcher/actions";
 import dispatcher from "../../../../src/dispatcher/dispatcher";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
@@ -37,6 +37,7 @@ import { ScopedRoomContextProvider } from "../../../../src/contexts/ScopedRoomCo
 import { untilDispatch } from "../../../test-utils/utilities.ts";
 import { TimelineRenderingType } from "../../../../src/contexts/RoomContext.ts";
 import { type ComposerInsertPayload, ComposerType } from "../../../../src/dispatcher/payloads/ComposerInsertPayload.ts";
+import { SDKContext } from "../../../../src/contexts/SDKContext.ts";
 
 describe("ThreadView", () => {
     const ROOM_ID = "!roomId:example.org";
@@ -73,7 +74,11 @@ describe("ThreadView", () => {
     }
 
     async function getComponent(initialEvent?: MatrixEvent): Promise<RenderResult> {
-        const renderResult = render(<TestThreadView initialEvent={initialEvent} />);
+        const renderResult = render(<TestThreadView initialEvent={initialEvent} />, {
+            wrapper: ({ children }) => (
+                <SDKContext.Provider value={SDKContextClass.instance}>{children}</SDKContext.Provider>
+            ),
+        });
 
         await waitFor(() => {
             expect(() => getByTestId(renderResult.container, "spinner")).toThrow();
@@ -190,18 +195,18 @@ describe("ThreadView", () => {
     });
 
     it("sets the correct thread in the room view store", async () => {
-        // expect(SdkContextClass.instance.roomViewStore.getThreadId()).toBeNull();
+        // expect(SDKContextClass.instance.roomViewStore.getThreadId()).toBeNull();
         const { unmount } = await getComponent();
         waitFor(() => {
-            expect(SdkContextClass.instance.roomViewStore.getThreadId()).toBe(rootEvent.getId());
+            expect(SDKContextClass.instance.roomViewStore.getThreadId()).toBe(rootEvent.getId());
         });
 
         unmount();
-        await waitFor(() => expect(SdkContextClass.instance.roomViewStore.getThreadId()).toBeNull());
+        await waitFor(() => expect(SDKContextClass.instance.roomViewStore.getThreadId()).toBeNull());
     });
 
     it("clears highlight message in the room view store", async () => {
-        jest.spyOn(SdkContextClass.instance.roomViewStore, "getRoomId").mockReturnValue(room.roomId);
+        jest.spyOn(SDKContextClass.instance.roomViewStore, "getRoomId").mockReturnValue(room.roomId);
         const mock = jest.spyOn(dispatcher, "dispatch");
         const { unmount } = await getComponent(rootEvent);
         mock.mockClear();
diff --git a/apps/web/test/unit-tests/components/structures/TimelinePanel-test.tsx b/apps/web/test/unit-tests/components/structures/TimelinePanel-test.tsx
index ec312a1edf..351c0669b3 100644
--- a/apps/web/test/unit-tests/components/structures/TimelinePanel-test.tsx
+++ b/apps/web/test/unit-tests/components/structures/TimelinePanel-test.tsx
@@ -52,7 +52,7 @@ import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
 import { Action } from "../../../../src/dispatcher/actions";
 import { SettingLevel } from "../../../../src/settings/SettingLevel";
 import MatrixClientBackedController from "../../../../src/settings/controllers/MatrixClientBackedController";
-import { SdkContextClass } from "../../../../src/contexts/SDKContext";
+import { SDKContextClass } from "../../../../src/contexts/SDKContextClass";
 import type Timer from "../../../../src/utils/Timer";
 
 // ScrollPanel calls this, but jsdom doesn't mock it for us
@@ -162,7 +162,7 @@ const setupPagination = (
 
 describe("TimelinePanel", () => {
     let client: Mocked<MatrixClient>;
-    let sdkContext: SdkContextClass;
+    let sdkContext: SDKContextClass;
     let userId: string;
 
     filterConsole("checkForPreJoinUISI: showing all messages, skipping check");
@@ -170,7 +170,7 @@ describe("TimelinePanel", () => {
     beforeEach(() => {
         client = mocked(stubClient());
         userId = client.getSafeUserId();
-        sdkContext = new SdkContextClass();
+        sdkContext = new SDKContextClass();
     });
 
     describe("read receipts and markers", () => {
@@ -439,6 +439,32 @@ describe("TimelinePanel", () => {
         expect(props.onEventScrolledIntoView).toHaveBeenCalledWith(events[1].getId());
     });
 
+    it("should scroll the event into view again when the same event is re-requested", () => {
+        const client = MatrixClientPeg.safeGet();
+        const room = mkRoom(client, "roomId");
+        const events = mockEvents(room);
+
+        const props = {
+            ...getProps(room, events),
+            eventId: events[1].getId(),
+            eventScrollIntoView: true,
+            onEventScrolledIntoView: jest.fn(),
+        };
+
+        const { rerender } = render(<TimelinePanel {...props} />);
+        expect(props.onEventScrolledIntoView).toHaveBeenCalledTimes(1);
+
+        // RoomView clears the flag once the jump has landed, so the event stays put on re-render.
+        props.eventScrollIntoView = false;
+        rerender(<TimelinePanel {...props} />);
+        expect(props.onEventScrolledIntoView).toHaveBeenCalledTimes(1);
+
+        // Clicking the same permalink a second time asks for the very same event again.
+        props.eventScrollIntoView = true;
+        rerender(<TimelinePanel {...props} />);
+        expect(props.onEventScrolledIntoView).toHaveBeenCalledTimes(2);
+    });
+
     it("paginates", async () => {
         const [client, room, events] = setupTestData();
         const eventsPage1 = events.slice(0, 1);
diff --git a/apps/web/test/unit-tests/components/structures/__snapshots__/FilePanel-test.tsx.snap b/apps/web/test/unit-tests/components/structures/__snapshots__/FilePanel-test.tsx.snap
index 07c557e9d0..a784ecf63a 100644
--- a/apps/web/test/unit-tests/components/structures/__snapshots__/FilePanel-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/structures/__snapshots__/FilePanel-test.tsx.snap
@@ -12,6 +12,7 @@ exports[`FilePanel renders empty state 1`] = `
         class="mx_BaseCard_header_title"
       >
         <p
+          aria-level="1"
           class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
           role="heading"
         >
@@ -19,7 +20,7 @@ exports[`FilePanel renders empty state 1`] = `
         </p>
       </div>
       <button
-        aria-labelledby="_r_0_"
+        aria-labelledby="react-use-id-1"
         class="_icon-button_1215g_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
diff --git a/apps/web/test/unit-tests/components/structures/__snapshots__/MessagePanel-test.tsx.snap b/apps/web/test/unit-tests/components/structures/__snapshots__/MessagePanel-test.tsx.snap
index 64d7061c81..931f952a9c 100644
--- a/apps/web/test/unit-tests/components/structures/__snapshots__/MessagePanel-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/structures/__snapshots__/MessagePanel-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`MessagePanel should handle large numbers of hidden events quickly 1`] = `
 <DocumentFragment>
   <div
-    class="mx_AutoHideScrollbar mx_ScrollPanel cls"
+    class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel cls"
     tabindex="-1"
   >
     <div
@@ -22,7 +22,7 @@ exports[`MessagePanel should handle large numbers of hidden events quickly 1`] =
 exports[`MessagePanel should handle lots of membership events quickly 1`] = `
 <DocumentFragment>
   <div
-    class="mx_AutoHideScrollbar mx_ScrollPanel cls"
+    class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel cls"
     tabindex="-1"
   >
     <div
@@ -137,7 +137,7 @@ exports[`MessagePanel should handle lots of membership events quickly 1`] = `
 exports[`MessagePanel should handle lots of room creation events quickly 1`] = `
 <DocumentFragment>
   <div
-    class="mx_AutoHideScrollbar mx_ScrollPanel cls"
+    class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel cls"
     tabindex="-1"
   >
     <div
diff --git a/apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap b/apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
index 0a6b8d1acc..72faba944c 100644
--- a/apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap
@@ -25,6 +25,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
         aria-label="Room info"
         class="mx_RoomHeader_infoWrapper"
         tabindex="0"
+        type="button"
       >
         <div
           class="mx_RoomHeader_info _box-flex_1odfs_9"
@@ -109,6 +110,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
         aria-label="Room info"
         class="mx_RoomHeader_infoWrapper"
         tabindex="0"
+        type="button"
       >
         <div
           class="mx_RoomHeader_info _box-flex_1odfs_9"
@@ -137,7 +139,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
         class="mx_RoomView_timeline"
       >
         <div
-          class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
+          class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
           tabindex="-1"
         >
           <div
@@ -212,7 +214,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
         </div>
       </div>
       <div
-        aria-labelledby="_r_1cl_"
+        aria-labelledby="react-use-id-1"
         class="_banner_n7ud0_8"
         data-type="critical"
         role="status"
@@ -238,7 +240,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
         >
           <p
             class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _title_mcq5y_24"
-            id="_r_1cl_"
+            id="react-use-id-1"
           >
             Could not start a chat with this user
           </p>
@@ -270,6 +272,12 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
         </div>
       </div>
     </main>
+    <input
+      data-testid="room-upload-context-input"
+      multiple=""
+      style="display: none;"
+      type="file"
+    />
   </div>
 </div>
 `;
@@ -299,6 +307,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
         aria-label="Room info"
         class="mx_RoomHeader_infoWrapper"
         tabindex="0"
+        type="button"
       >
         <div
           class="mx_RoomHeader_info _box-flex_1odfs_9"
@@ -327,7 +336,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
         class="mx_RoomView_timeline"
       >
         <div
-          class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
+          class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
           tabindex="-1"
         >
           <div
@@ -417,7 +426,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
             >
               <svg
                 aria-label="Messages in this room are not end-to-end encrypted"
-                aria-labelledby="_r_19j_"
+                aria-labelledby="react-use-id-1"
                 class="mx_E2EIcon mx_MessageComposer_e2eIcon"
                 color="var(--cpd-color-icon-info-primary)"
                 fill="currentColor"
@@ -602,24 +611,32 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
                   />
                 </svg>
               </div>
-              <div
+              <button
                 aria-label="Attachment"
-                class="mx_AccessibleButton mx_MessageComposer_button"
+                aria-labelledby="react-use-id-2"
+                class="_icon-button_1215g_8"
+                data-kind="primary"
                 role="button"
+                style="--cpd-icon-button-size: 26px;"
                 tabindex="0"
               >
-                <svg
-                  fill="currentColor"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="_indicator-icon_147l5_17"
+                  style="--cpd-icon-button-size: 100%;"
                 >
-                  <path
-                    d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
-                  />
-                </svg>
-              </div>
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
+                    />
+                  </svg>
+                </div>
+              </button>
               <div
                 aria-label="More options"
                 class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
@@ -638,16 +655,17 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
                   />
                 </svg>
               </div>
-              <input
-                multiple=""
-                style="display: none;"
-                type="file"
-              />
             </div>
           </div>
         </div>
       </div>
     </main>
+    <input
+      data-testid="room-upload-context-input"
+      multiple=""
+      style="display: none;"
+      type="file"
+    />
   </div>
 </div>
 `;
@@ -677,6 +695,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
         aria-label="Room info"
         class="mx_RoomHeader_infoWrapper"
         tabindex="0"
+        type="button"
       >
         <div
           class="mx_RoomHeader_info _box-flex_1odfs_9"
@@ -695,7 +714,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
             </span>
             <svg
               aria-label="New members see history"
-              aria-labelledby="_r_1cf_"
+              aria-labelledby="react-use-id-1"
               class="mx_RoomHeader_icon"
               color="var(--cpd-color-icon-info-primary)"
               fill="currentColor"
@@ -723,7 +742,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
         class="mx_RoomView_timeline"
       >
         <div
-          class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
+          class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
           tabindex="-1"
         >
           <div
@@ -735,7 +754,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
               style="height: 400px;"
             >
               <div
-                class="_container_sq5fu_8 mx_EventTileBubble mx_cryptoEvent _content_m88ar_8"
+                class="_container_sq5fu_8 mx_EventTileBubble mx_cryptoEvent _content_ufv8a_8"
               >
                 <svg
                   data-state="supported"
@@ -974,24 +993,32 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
                   />
                 </svg>
               </div>
-              <div
+              <button
                 aria-label="Attachment"
-                class="mx_AccessibleButton mx_MessageComposer_button"
+                aria-labelledby="react-use-id-2"
+                class="_icon-button_1215g_8"
+                data-kind="primary"
                 role="button"
+                style="--cpd-icon-button-size: 26px;"
                 tabindex="0"
               >
-                <svg
-                  fill="currentColor"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="_indicator-icon_147l5_17"
+                  style="--cpd-icon-button-size: 100%;"
                 >
-                  <path
-                    d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
-                  />
-                </svg>
-              </div>
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
+                    />
+                  </svg>
+                </div>
+              </button>
               <div
                 aria-label="More options"
                 class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
@@ -1010,16 +1037,17 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
                   />
                 </svg>
               </div>
-              <input
-                multiple=""
-                style="display: none;"
-                type="file"
-              />
             </div>
           </div>
         </div>
       </div>
     </main>
+    <input
+      data-testid="room-upload-context-input"
+      multiple=""
+      style="display: none;"
+      type="file"
+    />
   </div>
 </div>
 `;
@@ -1137,6 +1165,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
             aria-label="Room info"
             class="mx_RoomHeader_infoWrapper"
             tabindex="0"
+            type="button"
           >
             <div
               class="mx_RoomHeader_info _box-flex_1odfs_9"
@@ -1170,7 +1199,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
-                aria-labelledby="_r_0_"
+                aria-labelledby="react-use-id-1"
                 fill="currentColor"
                 height="1em"
                 viewBox="0 0 24 24"
@@ -1197,7 +1226,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
-                aria-labelledby="_r_5_"
+                aria-labelledby="react-use-id-2"
                 fill="currentColor"
                 height="1em"
                 viewBox="0 0 24 24"
@@ -1212,7 +1241,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
           </button>
           <button
             aria-label="Threads"
-            aria-labelledby="_r_a_"
+            aria-labelledby="react-use-id-3"
             class="_icon-button_1215g_8"
             data-kind="primary"
             role="button"
@@ -1239,7 +1268,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
           </button>
           <button
             aria-label="Room info"
-            aria-labelledby="_r_f_"
+            aria-labelledby="react-use-id-4"
             class="_icon-button_1215g_8"
             data-kind="primary"
             role="button"
@@ -1269,7 +1298,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
           >
             <div
               aria-label="0 members"
-              aria-labelledby="_r_k_"
+              aria-labelledby="react-use-id-5"
               class="mx_AccessibleButton mx_FacePile"
               role="button"
               tabindex="0"
@@ -1282,7 +1311,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
           </div>
         </header>
         <div
-          class="mx_AutoHideScrollbar mx_AuxPanel"
+          class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_AuxPanel"
           role="region"
           tabindex="-1"
         >
@@ -1293,7 +1322,7 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
           data-testid="timeline"
         >
           <div
-            class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
+            class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
             tabindex="-1"
           >
             <div
@@ -1320,6 +1349,12 @@ exports[`RoomView should hide the composer when hideComposer=true 1`] = `
             />
           </div>
         </div>
+        <input
+          data-testid="room-upload-context-input"
+          multiple=""
+          style="display: none;"
+          type="file"
+        />
       </div>
     </div>
   </div>
@@ -1346,7 +1381,7 @@ exports[`RoomView should hide the header when hideHeader=true 1`] = `
         data-layout="group"
       >
         <div
-          class="mx_AutoHideScrollbar mx_AuxPanel"
+          class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_AuxPanel"
           role="region"
           tabindex="-1"
         >
@@ -1357,7 +1392,7 @@ exports[`RoomView should hide the header when hideHeader=true 1`] = `
           data-testid="timeline"
         >
           <div
-            class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
+            class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
             tabindex="-1"
           >
             <div
@@ -1400,7 +1435,7 @@ exports[`RoomView should hide the header when hideHeader=true 1`] = `
               >
                 <svg
                   aria-label="Messages in this room are not end-to-end encrypted"
-                  aria-labelledby="_r_12_"
+                  aria-labelledby="react-use-id-1"
                   class="mx_E2EIcon mx_MessageComposer_e2eIcon"
                   color="var(--cpd-color-icon-info-primary)"
                   fill="currentColor"
@@ -1585,24 +1620,32 @@ exports[`RoomView should hide the header when hideHeader=true 1`] = `
                     />
                   </svg>
                 </div>
-                <div
+                <button
                   aria-label="Attachment"
-                  class="mx_AccessibleButton mx_MessageComposer_button"
+                  aria-labelledby="react-use-id-2"
+                  class="_icon-button_1215g_8"
+                  data-kind="primary"
                   role="button"
+                  style="--cpd-icon-button-size: 26px;"
                   tabindex="0"
                 >
-                  <svg
-                    fill="currentColor"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <div
+                    class="_indicator-icon_147l5_17"
+                    style="--cpd-icon-button-size: 100%;"
                   >
-                    <path
-                      d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
-                    />
-                  </svg>
-                </div>
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
+                      />
+                    </svg>
+                  </div>
+                </button>
                 <div
                   aria-label="More options"
                   class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
@@ -1621,15 +1664,16 @@ exports[`RoomView should hide the header when hideHeader=true 1`] = `
                     />
                   </svg>
                 </div>
-                <input
-                  multiple=""
-                  style="display: none;"
-                  type="file"
-                />
               </div>
             </div>
           </div>
         </div>
+        <input
+          data-testid="room-upload-context-input"
+          multiple=""
+          style="display: none;"
+          type="file"
+        />
       </div>
     </div>
   </div>
@@ -1676,6 +1720,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
             aria-label="Room info"
             class="mx_RoomHeader_infoWrapper"
             tabindex="0"
+            type="button"
           >
             <div
               class="mx_RoomHeader_info _box-flex_1odfs_9"
@@ -1709,7 +1754,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
-                aria-labelledby="_r_5e_"
+                aria-labelledby="react-use-id-1"
                 fill="currentColor"
                 height="1em"
                 viewBox="0 0 24 24"
@@ -1736,7 +1781,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
-                aria-labelledby="_r_5j_"
+                aria-labelledby="react-use-id-2"
                 fill="currentColor"
                 height="1em"
                 viewBox="0 0 24 24"
@@ -1751,7 +1796,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
           </button>
           <button
             aria-label="Threads"
-            aria-labelledby="_r_5o_"
+            aria-labelledby="react-use-id-3"
             class="_icon-button_1215g_8"
             data-kind="primary"
             role="button"
@@ -1778,7 +1823,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
           </button>
           <button
             aria-label="Room info"
-            aria-labelledby="_r_5t_"
+            aria-labelledby="react-use-id-4"
             class="_icon-button_1215g_8"
             data-kind="primary"
             role="button"
@@ -1808,7 +1853,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
           >
             <div
               aria-label="0 members"
-              aria-labelledby="_r_62_"
+              aria-labelledby="react-use-id-5"
               class="mx_AccessibleButton mx_FacePile"
               role="button"
               tabindex="0"
@@ -1821,7 +1866,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
           </div>
         </header>
         <div
-          class="mx_AutoHideScrollbar mx_AuxPanel"
+          class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_AuxPanel"
           role="region"
           tabindex="-1"
         >
@@ -1832,7 +1877,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
           data-testid="timeline"
         >
           <div
-            class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
+            class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
             tabindex="-1"
           >
             <div
@@ -1875,7 +1920,7 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
               >
                 <svg
                   aria-label="Messages in this room are not end-to-end encrypted"
-                  aria-labelledby="_r_6e_"
+                  aria-labelledby="react-use-id-6"
                   class="mx_E2EIcon mx_MessageComposer_e2eIcon"
                   color="var(--cpd-color-icon-info-primary)"
                   fill="currentColor"
@@ -2060,24 +2105,32 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
                     />
                   </svg>
                 </div>
-                <div
+                <button
                   aria-label="Attachment"
-                  class="mx_AccessibleButton mx_MessageComposer_button"
+                  aria-labelledby="react-use-id-7"
+                  class="_icon-button_1215g_8"
+                  data-kind="primary"
                   role="button"
+                  style="--cpd-icon-button-size: 26px;"
                   tabindex="0"
                 >
-                  <svg
-                    fill="currentColor"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <div
+                    class="_indicator-icon_147l5_17"
+                    style="--cpd-icon-button-size: 100%;"
                   >
-                    <path
-                      d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
-                    />
-                  </svg>
-                </div>
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
+                      />
+                    </svg>
+                  </div>
+                </button>
                 <div
                   aria-label="More options"
                   class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
@@ -2096,15 +2149,16 @@ exports[`RoomView should hide the pinned message banner when hidePinnedMessageBa
                     />
                   </svg>
                 </div>
-                <input
-                  multiple=""
-                  style="display: none;"
-                  type="file"
-                />
               </div>
             </div>
           </div>
         </div>
+        <input
+          data-testid="room-upload-context-input"
+          multiple=""
+          style="display: none;"
+          type="file"
+        />
       </div>
     </div>
   </div>
@@ -2151,6 +2205,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
             aria-label="Room info"
             class="mx_RoomHeader_infoWrapper"
             tabindex="0"
+            type="button"
           >
             <div
               class="mx_RoomHeader_info _box-flex_1odfs_9"
@@ -2184,7 +2239,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
-                aria-labelledby="_r_2g_"
+                aria-labelledby="react-use-id-1"
                 fill="currentColor"
                 height="1em"
                 viewBox="0 0 24 24"
@@ -2211,7 +2266,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
-                aria-labelledby="_r_2l_"
+                aria-labelledby="react-use-id-2"
                 fill="currentColor"
                 height="1em"
                 viewBox="0 0 24 24"
@@ -2226,7 +2281,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
           </button>
           <button
             aria-label="Threads"
-            aria-labelledby="_r_2q_"
+            aria-labelledby="react-use-id-3"
             class="_icon-button_1215g_8"
             data-kind="primary"
             role="button"
@@ -2253,7 +2308,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
           </button>
           <button
             aria-label="Room info"
-            aria-labelledby="_r_2v_"
+            aria-labelledby="react-use-id-4"
             class="_icon-button_1215g_8"
             data-kind="primary"
             role="button"
@@ -2283,7 +2338,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
           >
             <div
               aria-label="0 members"
-              aria-labelledby="_r_34_"
+              aria-labelledby="react-use-id-5"
               class="mx_AccessibleButton mx_FacePile mx_FacePile_toggled"
               role="button"
               tabindex="0"
@@ -2296,7 +2351,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
           </div>
         </header>
         <div
-          class="mx_AutoHideScrollbar mx_AuxPanel"
+          class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_AuxPanel"
           role="region"
           tabindex="-1"
         >
@@ -2307,7 +2362,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
           data-testid="timeline"
         >
           <div
-            class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
+            class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
             tabindex="-1"
           >
             <div
@@ -2350,7 +2405,7 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
               >
                 <svg
                   aria-label="Messages in this room are not end-to-end encrypted"
-                  aria-labelledby="_r_3g_"
+                  aria-labelledby="react-use-id-6"
                   class="mx_E2EIcon mx_MessageComposer_e2eIcon"
                   color="var(--cpd-color-icon-info-primary)"
                   fill="currentColor"
@@ -2535,24 +2590,32 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
                     />
                   </svg>
                 </div>
-                <div
+                <button
                   aria-label="Attachment"
-                  class="mx_AccessibleButton mx_MessageComposer_button"
+                  aria-labelledby="react-use-id-7"
+                  class="_icon-button_1215g_8"
+                  data-kind="primary"
                   role="button"
+                  style="--cpd-icon-button-size: 26px;"
                   tabindex="0"
                 >
-                  <svg
-                    fill="currentColor"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <div
+                    class="_indicator-icon_147l5_17"
+                    style="--cpd-icon-button-size: 100%;"
                   >
-                    <path
-                      d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
-                    />
-                  </svg>
-                </div>
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
+                      />
+                    </svg>
+                  </div>
+                </button>
                 <div
                   aria-label="More options"
                   class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
@@ -2571,15 +2634,16 @@ exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
                     />
                   </svg>
                 </div>
-                <input
-                  multiple=""
-                  style="display: none;"
-                  type="file"
-                />
               </div>
             </div>
           </div>
         </div>
+        <input
+          data-testid="room-upload-context-input"
+          multiple=""
+          style="display: none;"
+          type="file"
+        />
       </div>
     </div>
   </div>
@@ -2626,6 +2690,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
             aria-label="Room info"
             class="mx_RoomHeader_infoWrapper"
             tabindex="0"
+            type="button"
           >
             <div
               class="mx_RoomHeader_info _box-flex_1odfs_9"
@@ -2659,7 +2724,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
-                aria-labelledby="_r_fc_"
+                aria-labelledby="react-use-id-1"
                 fill="currentColor"
                 height="1em"
                 viewBox="0 0 24 24"
@@ -2686,7 +2751,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
-                aria-labelledby="_r_fh_"
+                aria-labelledby="react-use-id-2"
                 fill="currentColor"
                 height="1em"
                 viewBox="0 0 24 24"
@@ -2701,7 +2766,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           </button>
           <button
             aria-label="Threads"
-            aria-labelledby="_r_fm_"
+            aria-labelledby="react-use-id-3"
             class="_icon-button_1215g_8"
             data-kind="primary"
             role="button"
@@ -2728,7 +2793,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           </button>
           <button
             aria-label="Room info"
-            aria-labelledby="_r_fr_"
+            aria-labelledby="react-use-id-4"
             class="_icon-button_1215g_8"
             data-kind="primary"
             role="button"
@@ -2758,7 +2823,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           >
             <div
               aria-label="0 members"
-              aria-labelledby="_r_g0_"
+              aria-labelledby="react-use-id-5"
               class="mx_AccessibleButton mx_FacePile"
               role="button"
               tabindex="0"
@@ -2771,7 +2836,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           </div>
         </header>
         <div
-          class="mx_AutoHideScrollbar mx_AuxPanel"
+          class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_AuxPanel"
           role="region"
           tabindex="-1"
         >
@@ -2794,6 +2859,12 @@ exports[`RoomView should not display the timeline when the room encryption is lo
             />
           </div>
         </div>
+        <input
+          data-testid="room-upload-context-input"
+          multiple=""
+          style="display: none;"
+          type="file"
+        />
       </div>
     </div>
   </div>
@@ -2840,6 +2911,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
             aria-label="Room info"
             class="mx_RoomHeader_infoWrapper"
             tabindex="0"
+            type="button"
           >
             <div
               class="mx_RoomHeader_info _box-flex_1odfs_9"
@@ -2858,7 +2930,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
                 </span>
                 <svg
                   aria-label="New members see history"
-                  aria-labelledby="_r_gc_"
+                  aria-labelledby="react-use-id-1"
                   class="mx_RoomHeader_icon"
                   color="var(--cpd-color-icon-info-primary)"
                   fill="currentColor"
@@ -2891,7 +2963,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
-                aria-labelledby="_r_fc_"
+                aria-labelledby="react-use-id-2"
                 fill="currentColor"
                 height="1em"
                 viewBox="0 0 24 24"
@@ -2918,7 +2990,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
               style="--cpd-icon-button-size: 100%;"
             >
               <svg
-                aria-labelledby="_r_fh_"
+                aria-labelledby="react-use-id-3"
                 fill="currentColor"
                 height="1em"
                 viewBox="0 0 24 24"
@@ -2933,7 +3005,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           </button>
           <button
             aria-label="Threads"
-            aria-labelledby="_r_fm_"
+            aria-labelledby="react-use-id-4"
             class="_icon-button_1215g_8"
             data-kind="primary"
             role="button"
@@ -2960,7 +3032,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           </button>
           <button
             aria-label="Room info"
-            aria-labelledby="_r_fr_"
+            aria-labelledby="react-use-id-5"
             class="_icon-button_1215g_8"
             data-kind="primary"
             role="button"
@@ -2990,7 +3062,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           >
             <div
               aria-label="0 members"
-              aria-labelledby="_r_g0_"
+              aria-labelledby="react-use-id-6"
               class="mx_AccessibleButton mx_FacePile"
               role="button"
               tabindex="0"
@@ -3003,7 +3075,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           </div>
         </header>
         <div
-          class="mx_AutoHideScrollbar mx_AuxPanel"
+          class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_AuxPanel"
           role="region"
           tabindex="-1"
         >
@@ -3014,7 +3086,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
           data-testid="timeline"
         >
           <div
-            class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
+            class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
             tabindex="-1"
           >
             <div
@@ -3059,7 +3131,7 @@ exports[`RoomView should not display the timeline when the room encryption is lo
                   tabindex="0"
                 >
                   <div
-                    aria-labelledby="_r_gh_"
+                    aria-labelledby="react-use-id-7"
                     class="mx_E2EIcon mx_MessageComposer_e2eIcon"
                     data-testid="e2e-icon"
                     style="width: 12px; height: 12px;"
@@ -3252,24 +3324,32 @@ exports[`RoomView should not display the timeline when the room encryption is lo
                     />
                   </svg>
                 </div>
-                <div
+                <button
                   aria-label="Attachment"
-                  class="mx_AccessibleButton mx_MessageComposer_button"
+                  aria-labelledby="react-use-id-8"
+                  class="_icon-button_1215g_8"
+                  data-kind="primary"
                   role="button"
+                  style="--cpd-icon-button-size: 26px;"
                   tabindex="0"
                 >
-                  <svg
-                    fill="currentColor"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <div
+                    class="_indicator-icon_147l5_17"
+                    style="--cpd-icon-button-size: 100%;"
                   >
-                    <path
-                      d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
-                    />
-                  </svg>
-                </div>
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
+                      />
+                    </svg>
+                  </div>
+                </button>
                 <div
                   aria-label="More options"
                   class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
@@ -3288,15 +3368,16 @@ exports[`RoomView should not display the timeline when the room encryption is lo
                     />
                   </svg>
                 </div>
-                <input
-                  multiple=""
-                  style="display: none;"
-                  type="file"
-                />
               </div>
             </div>
           </div>
         </div>
+        <input
+          data-testid="room-upload-context-input"
+          multiple=""
+          style="display: none;"
+          type="file"
+        />
       </div>
     </div>
   </div>
@@ -3373,6 +3454,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
             aria-label="Room info"
             class="mx_RoomHeader_infoWrapper"
             tabindex="0"
+            type="button"
           >
             <div
               class="mx_RoomHeader_info _box-flex_1odfs_9"
@@ -3394,7 +3476,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
           </button>
           <button
             aria-label="Chat"
-            aria-labelledby="_r_ks_"
+            aria-labelledby="react-use-id-1"
             class="_icon-button_1215g_8"
             data-kind="primary"
             role="button"
@@ -3421,7 +3503,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
           </button>
           <button
             aria-label="Threads"
-            aria-labelledby="_r_l1_"
+            aria-labelledby="react-use-id-2"
             class="_icon-button_1215g_8"
             data-kind="primary"
             role="button"
@@ -3448,7 +3530,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
           </button>
           <button
             aria-label="Room info"
-            aria-labelledby="_r_l6_"
+            aria-labelledby="react-use-id-3"
             class="_icon-button_1215g_8"
             data-kind="primary"
             role="button"
@@ -3478,7 +3560,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
           >
             <div
               aria-label="0 members"
-              aria-labelledby="_r_lb_"
+              aria-labelledby="react-use-id-4"
               class="mx_AccessibleButton mx_FacePile"
               role="button"
               tabindex="0"
@@ -3556,6 +3638,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
                 class="mx_BaseCard_header_title"
               >
                 <p
+                  aria-level="1"
                   class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
                   role="heading"
                 >
@@ -3563,7 +3646,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
                 </p>
               </div>
               <button
-                aria-labelledby="_r_lk_"
+                aria-labelledby="react-use-id-5"
                 class="_icon-button_1215g_8"
                 data-kind="secondary"
                 data-testid="base-card-close-button"
@@ -3593,7 +3676,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
               class="mx_TimelineCard_timeline"
             >
               <div
-                class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
+                class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
                 tabindex="-1"
               >
                 <div
@@ -3623,7 +3706,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
                   >
                     <svg
                       aria-label="Messages in this room are not end-to-end encrypted"
-                      aria-labelledby="_r_lp_"
+                      aria-labelledby="react-use-id-6"
                       class="mx_E2EIcon mx_MessageComposer_e2eIcon"
                       color="var(--cpd-color-icon-info-primary)"
                       fill="currentColor"
@@ -3808,24 +3891,32 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
                         />
                       </svg>
                     </div>
-                    <div
+                    <button
                       aria-label="Attachment"
-                      class="mx_AccessibleButton mx_MessageComposer_button"
+                      aria-labelledby="react-use-id-7"
+                      class="_icon-button_1215g_8"
+                      data-kind="primary"
                       role="button"
+                      style="--cpd-icon-button-size: 26px;"
                       tabindex="0"
                     >
-                      <svg
-                        fill="currentColor"
-                        height="1em"
-                        viewBox="0 0 24 24"
-                        width="1em"
-                        xmlns="http://www.w3.org/2000/svg"
+                      <div
+                        class="_indicator-icon_147l5_17"
+                        style="--cpd-icon-button-size: 100%;"
                       >
-                        <path
-                          d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
-                        />
-                      </svg>
-                    </div>
+                        <svg
+                          fill="currentColor"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
+                          />
+                        </svg>
+                      </div>
+                    </button>
                     <div
                       aria-label="More options"
                       class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
@@ -3844,15 +3935,16 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
                         />
                       </svg>
                     </div>
-                    <input
-                      multiple=""
-                      style="display: none;"
-                      type="file"
-                    />
                   </div>
                 </div>
               </div>
             </div>
+            <input
+              data-testid="room-upload-context-input"
+              multiple=""
+              style="display: none;"
+              type="file"
+            />
           </div>
         </aside>
         <div>
diff --git a/apps/web/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap b/apps/web/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
index 589f0eaf10..ff86cab70c 100644
--- a/apps/web/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap
@@ -70,7 +70,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
     role="tree"
   >
     <li
-      aria-labelledby="_r_8_"
+      aria-labelledby="react-use-id-1"
       class="mx_SpaceHierarchy_roomTileWrapper"
       role="treeitem"
     >
@@ -100,7 +100,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_name"
           >
             <span
-              id="_r_8_"
+              id="react-use-id-1"
             >
               Unnamed Room
             </span>
@@ -122,22 +122,21 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             Join
           </div>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
-              class="_inline-field_19upo_32"
+              class="_inline-field_1o4d9_33"
             >
               <div
-                class="_inline-field-control_19upo_44"
+                class="_inline-field-control_1o4d9_45"
               >
                 <div
                   class="_container_153f2_10"
                 >
                   <input
-                    aria-labelledby="_r_8_"
+                    aria-labelledby="react-use-id-1"
                     class="_input_153f2_18"
                     id="checkbox_MwbPDmfGtm"
-                    role="presentation"
                     tabindex="-1"
                     type="checkbox"
                   />
@@ -160,7 +159,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                 </div>
               </div>
               <div
-                class="_inline-field-body_19upo_38"
+                class="_inline-field-body_1o4d9_39"
               />
             </div>
           </form>
@@ -168,7 +167,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
       </div>
     </li>
     <li
-      aria-labelledby="_r_c_"
+      aria-labelledby="react-use-id-2"
       class="mx_SpaceHierarchy_roomTileWrapper"
       role="treeitem"
     >
@@ -198,7 +197,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_name"
           >
             <span
-              id="_r_c_"
+              id="react-use-id-2"
             >
               Unnamed Room
             </span>
@@ -220,22 +219,21 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             Join
           </div>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
-              class="_inline-field_19upo_32"
+              class="_inline-field_1o4d9_33"
             >
               <div
-                class="_inline-field-control_19upo_44"
+                class="_inline-field-control_1o4d9_45"
               >
                 <div
                   class="_container_153f2_10"
                 >
                   <input
-                    aria-labelledby="_r_c_"
+                    aria-labelledby="react-use-id-2"
                     class="_input_153f2_18"
                     id="checkbox_GQvdMWe954"
-                    role="presentation"
                     tabindex="-1"
                     type="checkbox"
                   />
@@ -258,7 +256,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                 </div>
               </div>
               <div
-                class="_inline-field-body_19upo_38"
+                class="_inline-field-body_1o4d9_39"
               />
             </div>
           </form>
@@ -267,7 +265,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
     </li>
     <li
       aria-expanded="true"
-      aria-labelledby="_r_g_"
+      aria-labelledby="react-use-id-3"
       class="mx_SpaceHierarchy_roomTileWrapper"
       role="treeitem"
     >
@@ -297,7 +295,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_name"
           >
             <span
-              id="_r_g_"
+              id="react-use-id-3"
             >
               Nested space
             </span>
@@ -319,22 +317,21 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             Join
           </div>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
-              class="_inline-field_19upo_32"
+              class="_inline-field_1o4d9_33"
             >
               <div
-                class="_inline-field-control_19upo_44"
+                class="_inline-field-control_1o4d9_45"
               >
                 <div
                   class="_container_153f2_10"
                 >
                   <input
-                    aria-labelledby="_r_g_"
+                    aria-labelledby="react-use-id-3"
                     class="_input_153f2_18"
                     id="checkbox_DVIAu5CsiH"
-                    role="presentation"
                     tabindex="-1"
                     type="checkbox"
                   />
@@ -357,7 +354,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                 </div>
               </div>
               <div
-                class="_inline-field-body_19upo_38"
+                class="_inline-field-body_1o4d9_39"
               />
             </div>
           </form>
@@ -383,7 +380,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
         role="group"
       >
         <li
-          aria-labelledby="_r_k_"
+          aria-labelledby="react-use-id-4"
           class="mx_SpaceHierarchy_roomTileWrapper"
           role="treeitem"
         >
@@ -413,7 +410,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                 class="mx_SpaceHierarchy_roomTile_name"
               >
                 <span
-                  id="_r_k_"
+                  id="react-use-id-4"
                 >
                   Nested room
                 </span>
@@ -435,27 +432,26 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                 Join
               </div>
               <span
-                aria-labelledby="_r_l_"
+                aria-labelledby="react-use-id-5"
                 tabindex="0"
               >
                 <form
-                  class="_root_19upo_16"
+                  class="_root_1o4d9_17"
                 >
                   <div
-                    class="_inline-field_19upo_32"
+                    class="_inline-field_1o4d9_33"
                   >
                     <div
-                      class="_inline-field-control_19upo_44"
+                      class="_inline-field-control_1o4d9_45"
                     >
                       <div
                         class="_container_153f2_10"
                       >
                         <input
-                          aria-labelledby="_r_k_"
+                          aria-labelledby="react-use-id-4"
                           class="_input_153f2_18"
                           disabled=""
                           id="checkbox_RD7nyrA2oh"
-                          role="presentation"
                           tabindex="-1"
                           type="checkbox"
                         />
@@ -478,7 +474,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                       </div>
                     </div>
                     <div
-                      class="_inline-field-body_19upo_38"
+                      class="_inline-field-body_1o4d9_39"
                     />
                   </div>
                 </form>
@@ -489,7 +485,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
       </ul>
     </li>
     <li
-      aria-labelledby="_r_t_"
+      aria-labelledby="react-use-id-6"
       class="mx_SpaceHierarchy_roomTileWrapper"
       role="treeitem"
     >
@@ -519,7 +515,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             class="mx_SpaceHierarchy_roomTile_name"
           >
             <span
-              id="_r_t_"
+              id="react-use-id-6"
             >
               Knock room
             </span>
@@ -541,22 +537,21 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             View
           </div>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
-              class="_inline-field_19upo_32"
+              class="_inline-field_1o4d9_33"
             >
               <div
-                class="_inline-field-control_19upo_44"
+                class="_inline-field-control_1o4d9_45"
               >
                 <div
                   class="_container_153f2_10"
                 >
                   <input
-                    aria-labelledby="_r_t_"
+                    aria-labelledby="react-use-id-6"
                     class="_input_153f2_18"
                     id="checkbox_jWVJIPauy1"
-                    role="presentation"
                     tabindex="-1"
                     type="checkbox"
                   />
@@ -579,7 +574,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
                 </div>
               </div>
               <div
-                class="_inline-field-body_19upo_38"
+                class="_inline-field-body_1o4d9_39"
               />
             </div>
           </form>
@@ -660,7 +655,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
     role="tree"
   >
     <li
-      aria-labelledby="_r_3i_"
+      aria-labelledby="react-use-id-1"
       class="mx_SpaceHierarchy_roomTileWrapper"
       role="treeitem"
     >
@@ -690,7 +685,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
             class="mx_SpaceHierarchy_roomTile_name"
           >
             <span
-              id="_r_3i_"
+              id="react-use-id-1"
             >
               Unnamed Room
             </span>
@@ -712,22 +707,21 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
             Join
           </div>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
-              class="_inline-field_19upo_32"
+              class="_inline-field_1o4d9_33"
             >
               <div
-                class="_inline-field-control_19upo_44"
+                class="_inline-field-control_1o4d9_45"
               >
                 <div
                   class="_container_153f2_10"
                 >
                   <input
-                    aria-labelledby="_r_3i_"
+                    aria-labelledby="react-use-id-1"
                     class="_input_153f2_18"
                     id="checkbox_EetmBG4yVC"
-                    role="presentation"
                     tabindex="-1"
                     type="checkbox"
                   />
@@ -750,7 +744,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
                 </div>
               </div>
               <div
-                class="_inline-field-body_19upo_38"
+                class="_inline-field-body_1o4d9_39"
               />
             </div>
           </form>
@@ -758,7 +752,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
       </div>
     </li>
     <li
-      aria-labelledby="_r_3m_"
+      aria-labelledby="react-use-id-2"
       class="mx_SpaceHierarchy_roomTileWrapper"
       role="treeitem"
     >
@@ -788,7 +782,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
             class="mx_SpaceHierarchy_roomTile_name"
           >
             <span
-              id="_r_3m_"
+              id="react-use-id-2"
             >
               Unnamed Room
             </span>
@@ -810,22 +804,21 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
             Join
           </div>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
-              class="_inline-field_19upo_32"
+              class="_inline-field_1o4d9_33"
             >
               <div
-                class="_inline-field-control_19upo_44"
+                class="_inline-field-control_1o4d9_45"
               >
                 <div
                   class="_container_153f2_10"
                 >
                   <input
-                    aria-labelledby="_r_3m_"
+                    aria-labelledby="react-use-id-2"
                     class="_input_153f2_18"
                     id="checkbox_eEefiPqpMR"
-                    role="presentation"
                     tabindex="-1"
                     type="checkbox"
                   />
@@ -848,7 +841,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
                 </div>
               </div>
               <div
-                class="_inline-field-body_19upo_38"
+                class="_inline-field-body_1o4d9_39"
               />
             </div>
           </form>
@@ -857,7 +850,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
     </li>
     <li
       aria-expanded="true"
-      aria-labelledby="_r_3q_"
+      aria-labelledby="react-use-id-3"
       class="mx_SpaceHierarchy_roomTileWrapper"
       role="treeitem"
     >
@@ -887,7 +880,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
             class="mx_SpaceHierarchy_roomTile_name"
           >
             <span
-              id="_r_3q_"
+              id="react-use-id-3"
             >
               Nested space
             </span>
@@ -909,22 +902,21 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
             Join
           </div>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
-              class="_inline-field_19upo_32"
+              class="_inline-field_1o4d9_33"
             >
               <div
-                class="_inline-field-control_19upo_44"
+                class="_inline-field-control_1o4d9_45"
               >
                 <div
                   class="_container_153f2_10"
                 >
                   <input
-                    aria-labelledby="_r_3q_"
+                    aria-labelledby="react-use-id-3"
                     class="_input_153f2_18"
                     id="checkbox_MwbPDmfGtm"
-                    role="presentation"
                     tabindex="-1"
                     type="checkbox"
                   />
@@ -947,7 +939,7 @@ exports[`SpaceHierarchy <SpaceHierarchy /> should not render cycles 1`] = `
                 </div>
               </div>
               <div
-                class="_inline-field-body_19upo_38"
+                class="_inline-field-body_1o4d9_39"
               />
             </div>
           </form>
diff --git a/apps/web/test/unit-tests/components/structures/__snapshots__/TabbedView-test.tsx.snap b/apps/web/test/unit-tests/components/structures/__snapshots__/TabbedView-test.tsx.snap
index cc3998f79b..523d38c6da 100644
--- a/apps/web/test/unit-tests/components/structures/__snapshots__/TabbedView-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/structures/__snapshots__/TabbedView-test.tsx.snap
@@ -12,6 +12,7 @@ exports[`<TabbedView /> renders tabs 1`] = `
     >
       <li
         aria-controls="mx_tabpanel_GENERAL"
+        aria-labelledby="mx_tabpanel_GENERAL_label"
         aria-selected="true"
         class="mx_AccessibleButton mx_TabbedView_tabLabel mx_TabbedView_tabLabel_active"
         data-testid="settings-tab-GENERAL"
@@ -38,6 +39,7 @@ exports[`<TabbedView /> renders tabs 1`] = `
       </li>
       <li
         aria-controls="mx_tabpanel_LABS"
+        aria-labelledby="mx_tabpanel_LABS_label"
         aria-selected="false"
         class="mx_AccessibleButton mx_TabbedView_tabLabel"
         data-testid="settings-tab-LABS"
@@ -72,6 +74,7 @@ exports[`<TabbedView /> renders tabs 1`] = `
       </li>
       <li
         aria-controls="mx_tabpanel_APPEARANCE"
+        aria-labelledby="mx_tabpanel_APPEARANCE_label"
         aria-selected="false"
         class="mx_AccessibleButton mx_TabbedView_tabLabel"
         data-testid="settings-tab-APPEARANCE"
@@ -103,7 +106,7 @@ exports[`<TabbedView /> renders tabs 1`] = `
       id="mx_tabpanel_GENERAL"
     >
       <div
-        class="mx_AutoHideScrollbar mx_TabbedView_tabPanelContent"
+        class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_TabbedView_tabPanelContent"
         tabindex="-1"
       >
         <div>
diff --git a/apps/web/test/unit-tests/components/structures/__snapshots__/ThreadPanel-test.tsx.snap b/apps/web/test/unit-tests/components/structures/__snapshots__/ThreadPanel-test.tsx.snap
index 07fc57c9e4..72f24730ee 100644
--- a/apps/web/test/unit-tests/components/structures/__snapshots__/ThreadPanel-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/structures/__snapshots__/ThreadPanel-test.tsx.snap
@@ -6,7 +6,7 @@ exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properl
     class="mx_ThreadPanelHeader"
   >
     <button
-      aria-labelledby="_r_0_"
+      aria-labelledby="react-use-id-1"
       class="_icon-button_1215g_8"
       data-kind="primary"
       role="button"
@@ -56,7 +56,7 @@ exports[`ThreadPanel Header expect that My filter for ThreadPanelHeader properly
     class="mx_ThreadPanelHeader"
   >
     <button
-      aria-labelledby="_r_6_"
+      aria-labelledby="react-use-id-1"
       class="_icon-button_1215g_8"
       data-kind="primary"
       role="button"
diff --git a/apps/web/test/unit-tests/components/viewmodels/avatars/RoomAvatarViewModel-test.tsx b/apps/web/test/unit-tests/components/viewmodels/avatars/RoomAvatarViewModel-test.ts
similarity index 100%
rename from apps/web/test/unit-tests/components/viewmodels/avatars/RoomAvatarViewModel-test.tsx
rename to apps/web/test/unit-tests/components/viewmodels/avatars/RoomAvatarViewModel-test.ts
diff --git a/apps/web/test/unit-tests/components/viewmodels/message-body/RedactedBodyViewModel-test.ts b/apps/web/test/unit-tests/components/viewmodels/message-body/RedactedBodyViewModel-test.ts
index 15911318b7..c6d517e3b3 100644
--- a/apps/web/test/unit-tests/components/viewmodels/message-body/RedactedBodyViewModel-test.ts
+++ b/apps/web/test/unit-tests/components/viewmodels/message-body/RedactedBodyViewModel-test.ts
@@ -5,143 +5,38 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { EventType, MsgType, type MatrixClient, type MatrixEvent, type Room } from "matrix-js-sdk/src/matrix";
-
-import { formatFullDate } from "../../../../../src/DateUtils";
-import { _t } from "../../../../../src/languageHandler";
-import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
-import SettingsStore from "../../../../../src/settings/SettingsStore";
 import { RedactedBodyViewModel } from "../../../../../src/viewmodels/message-body/RedactedBodyViewModel";
-import { mkEvent, mkRoom, stubClient } from "../../../../test-utils";
 
 describe("RedactedBodyViewModel", () => {
-    let client: MatrixClient;
-    let room: Room;
-    let showTwelveHourSettingWatcher: ((...args: any[]) => void) | undefined;
+    it("exposes the supplied render snapshot", () => {
+        const props = {
+            text: "Message deleted",
+            tooltip: "Deleted yesterday",
+        };
+        const vm = new RedactedBodyViewModel(props);
 
-    const makeRedactedBecauseEvent = ({ sender, originServerTs }: { sender: string; originServerTs: number }) => ({
-        content: {},
-        event_id: "$redaction:example.com",
-        origin_server_ts: originServerTs,
-        redacts: "$message:example.com",
-        room_id: room.roomId,
-        sender,
-        type: EventType.RoomRedaction,
-        unsigned: {},
+        expect(vm.getSnapshot()).toEqual(props);
     });
 
-    const makeRedactedEvent = ({
-        sender = "@alice:example.com",
-        redactedBecauseSender = sender,
-        originServerTs = Date.UTC(2022, 10, 17, 15, 58, 32),
-    }: {
-        sender?: string;
-        redactedBecauseSender?: string;
-        originServerTs?: number;
-    } = {}): MatrixEvent =>
-        mkEvent({
-            event: true,
-            type: EventType.RoomMessage,
-            user: sender,
-            room: room.roomId,
-            content: {
-                msgtype: MsgType.Text,
-                body: "Message",
-            },
-            unsigned: {
-                redacted_because: makeRedactedBecauseEvent({
-                    sender: redactedBecauseSender,
-                    originServerTs,
-                }),
-            },
-        });
+    it("updates the render snapshot when props change", () => {
+        const vm = new RedactedBodyViewModel({ text: "Message deleted" });
 
-    beforeEach(() => {
-        client = stubClient();
-        room = mkRoom(client, "!room:example.com");
-        jest.spyOn(MatrixClientPeg, "get").mockReturnValue(client);
-        jest.spyOn(client, "getRoom").mockReturnValue(room);
-        jest.spyOn(SettingsStore, "getValue").mockImplementation(
-            (settingName) => settingName === "showTwelveHourTimestamps",
-        );
-        jest.spyOn(SettingsStore, "watchSetting").mockImplementation((_settingName, _roomId, callbackFn) => {
-            showTwelveHourSettingWatcher = callbackFn as (...args: any[]) => void;
-            return "mock-show-twelve-hour-watcher";
-        });
-        jest.spyOn(SettingsStore, "unwatchSetting").mockImplementation(jest.fn());
-    });
-
-    it("builds self-redaction text and tooltip from the event", () => {
-        const event = makeRedactedEvent();
-        const vm = new RedactedBodyViewModel({ mxEvent: event });
+        vm.setProps({ text: "Message deleted by Alice", tooltip: "Deleted yesterday" });
 
         expect(vm.getSnapshot()).toEqual({
-            text: "Message deleted",
-            tooltip: _t("timeline|redacted|tooltip", {
-                date: formatFullDate(new Date(Date.UTC(2022, 10, 17, 15, 58, 32)), true),
-            }),
+            text: "Message deleted by Alice",
+            tooltip: "Deleted yesterday",
         });
     });
 
-    it("uses the redacting member name when another user removed the message", () => {
-        jest.spyOn(room, "getMember").mockReturnValue({ name: "Alice" } as any);
-        const event = makeRedactedEvent({
-            redactedBecauseSender: "@alice-redactor:example.com",
-        });
-
-        const vm = new RedactedBodyViewModel({ mxEvent: event });
-
-        expect(vm.getSnapshot().text).toBe("Message deleted by Alice");
-    });
-
-    it("updates the tooltip when showTwelveHourTimestamps changes", () => {
-        jest.spyOn(SettingsStore, "getValue").mockReturnValue(false);
-        const event = makeRedactedEvent();
-        const vm = new RedactedBodyViewModel({ mxEvent: event });
+    it("does not notify for unchanged props", () => {
+        const props = { text: "Message deleted" };
+        const vm = new RedactedBodyViewModel(props);
         const listener = jest.fn();
 
         vm.subscribe(listener);
+        vm.setProps(props);
 
-        showTwelveHourSettingWatcher?.("showTwelveHourTimestamps", null, undefined, false, false);
         expect(listener).not.toHaveBeenCalled();
-
-        showTwelveHourSettingWatcher?.("showTwelveHourTimestamps", null, undefined, true, true);
-
-        expect(listener).toHaveBeenCalledTimes(1);
-        expect(vm.getSnapshot().tooltip).toBe(
-            _t("timeline|redacted|tooltip", {
-                date: formatFullDate(new Date(Date.UTC(2022, 10, 17, 15, 58, 32)), true),
-            }),
-        );
-    });
-
-    it("setEvent is a no-op for the same event and updates for a different event", () => {
-        const originalEvent = makeRedactedEvent();
-        const updatedEvent = makeRedactedEvent({
-            redactedBecauseSender: "@moderator:example.com",
-            originServerTs: Date.UTC(2023, 0, 1, 12, 0, 0),
-        });
-        const vm = new RedactedBodyViewModel({ mxEvent: originalEvent });
-        const listener = jest.fn();
-
-        jest.spyOn(room, "getMember").mockReturnValue({ name: "Moderator" } as any);
-
-        vm.subscribe(listener);
-
-        vm.setEvent(originalEvent);
-        expect(listener).not.toHaveBeenCalled();
-
-        vm.setEvent(updatedEvent);
-
-        expect(listener).toHaveBeenCalledTimes(1);
-        expect(vm.getSnapshot().text).toBe("Message deleted by Moderator");
-    });
-
-    it("unwatches the timestamp setting when disposed", () => {
-        const vm = new RedactedBodyViewModel({ mxEvent: makeRedactedEvent() });
-
-        vm.dispose();
-
-        expect(SettingsStore.unwatchSetting).toHaveBeenCalledWith("mock-show-twelve-hour-watcher");
     });
 });
diff --git a/apps/web/test/unit-tests/components/viewmodels/right_panel/RoomSummaryCardTopicViewModel-test.tsx b/apps/web/test/unit-tests/components/viewmodels/right_panel/RoomSummaryCardTopicViewModel-test.ts
similarity index 100%
rename from apps/web/test/unit-tests/components/viewmodels/right_panel/RoomSummaryCardTopicViewModel-test.tsx
rename to apps/web/test/unit-tests/components/viewmodels/right_panel/RoomSummaryCardTopicViewModel-test.ts
diff --git a/apps/web/test/unit-tests/components/viewmodels/right_panel/RoomSummaryCardViewModel-test.tsx b/apps/web/test/unit-tests/components/viewmodels/right_panel/RoomSummaryCardViewModel-test.ts
similarity index 100%
rename from apps/web/test/unit-tests/components/viewmodels/right_panel/RoomSummaryCardViewModel-test.tsx
rename to apps/web/test/unit-tests/components/viewmodels/right_panel/RoomSummaryCardViewModel-test.ts
diff --git a/apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/UserInfoBasicOptionsViewModel-test.tsx b/apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/UserInfoBasicOptionsViewModel-test.ts
similarity index 100%
rename from apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/UserInfoBasicOptionsViewModel-test.tsx
rename to apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/UserInfoBasicOptionsViewModel-test.ts
diff --git a/apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/UserInfoHeaderVerificationViewModel-test.tsx b/apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/UserInfoHeaderVerificationViewModel-test.ts
similarity index 95%
rename from apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/UserInfoHeaderVerificationViewModel-test.tsx
rename to apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/UserInfoHeaderVerificationViewModel-test.ts
index fb9fc12fa6..9fbae906f2 100644
--- a/apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/UserInfoHeaderVerificationViewModel-test.tsx
+++ b/apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/UserInfoHeaderVerificationViewModel-test.ts
@@ -10,9 +10,10 @@ import { type Mocked } from "jest-mock";
 import { UserVerificationStatus, type CryptoApi } from "matrix-js-sdk/src/crypto-api";
 import { renderHook, waitFor } from "jest-matrix-react";
 
-import { createTestClient, withClientContextRenderOptions } from "../../../../../test-utils";
+import { clientAndSDKContextRenderOptions, createTestClient } from "../../../../../test-utils";
 import { MatrixClientPeg } from "../../../../../../src/MatrixClientPeg";
 import { useUserInfoVerificationViewModel } from "../../../../../../src/components/viewmodels/right_panel/user_info/UserInfoHeaderVerificationViewModel";
+import { TestSDKContext } from "../../../../TestSDKContext.ts";
 
 describe("useUserInfoVerificationHeaderViewModel", () => {
     const defaultRoomId = "!fkfk";
@@ -26,6 +27,7 @@ describe("useUserInfoVerificationHeaderViewModel", () => {
     };
     let mockClient: MatrixClient;
     let mockCrypto: Mocked<CryptoApi>;
+    let sdkContext: TestSDKContext;
 
     beforeEach(() => {
         mockCrypto = {
@@ -43,6 +45,9 @@ describe("useUserInfoVerificationHeaderViewModel", () => {
         } as unknown as Mocked<CryptoApi>;
 
         mockClient = createTestClient();
+        sdkContext = new TestSDKContext();
+        sdkContext._client = mockClient;
+
         jest.spyOn(mockClient, "doesServerSupportUnstableFeature").mockResolvedValue(true);
         jest.spyOn(mockClient.secretStorage, "hasKey").mockResolvedValue(true);
         jest.spyOn(mockClient, "getCrypto").mockReturnValue(mockCrypto);
@@ -57,7 +62,7 @@ describe("useUserInfoVerificationHeaderViewModel", () => {
     const renderUserInfoHeaderVerificationHook = (props = defaultProps) => {
         return renderHook(
             () => useUserInfoVerificationViewModel(props.member, props.devices),
-            withClientContextRenderOptions(mockClient),
+            clientAndSDKContextRenderOptions(mockClient, sdkContext),
         );
     };
 
diff --git a/apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/UserInfoHeaderViewModel-test.tsx b/apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/UserInfoHeaderViewModel-test.ts
similarity index 100%
rename from apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/UserInfoHeaderViewModel-test.tsx
rename to apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/UserInfoHeaderViewModel-test.ts
diff --git a/apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/UserInfoPowerLevelsViewModel-test.tsx b/apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/UserInfoPowerLevelsViewModel-test.ts
similarity index 100%
rename from apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/UserInfoPowerLevelsViewModel-test.tsx
rename to apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/UserInfoPowerLevelsViewModel-test.ts
diff --git a/apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/admin/UserInfoAdminToolsContainerViewModel-test.tsx b/apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/admin/UserInfoAdminToolsContainerViewModel-test.ts
similarity index 100%
rename from apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/admin/UserInfoAdminToolsContainerViewModel-test.tsx
rename to apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/admin/UserInfoAdminToolsContainerViewModel-test.ts
diff --git a/apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/admin/UserInfoBanButtonViewModel-test.tsx b/apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/admin/UserInfoBanButtonViewModel-test.ts
similarity index 100%
rename from apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/admin/UserInfoBanButtonViewModel-test.tsx
rename to apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/admin/UserInfoBanButtonViewModel-test.ts
diff --git a/apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/admin/UserInfoKickButtonViewModel-test.tsx b/apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/admin/UserInfoKickButtonViewModel-test.ts
similarity index 100%
rename from apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/admin/UserInfoKickButtonViewModel-test.tsx
rename to apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/admin/UserInfoKickButtonViewModel-test.ts
diff --git a/apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/admin/UserInfoMuteButtonViewModel-test.tsx b/apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/admin/UserInfoMuteButtonViewModel-test.ts
similarity index 78%
rename from apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/admin/UserInfoMuteButtonViewModel-test.tsx
rename to apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/admin/UserInfoMuteButtonViewModel-test.ts
index 5ebd537855..48522abb04 100644
--- a/apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/admin/UserInfoMuteButtonViewModel-test.tsx
+++ b/apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/admin/UserInfoMuteButtonViewModel-test.ts
@@ -19,7 +19,6 @@ import { KnownMembership } from "matrix-js-sdk/src/types";
 import { MatrixClientPeg } from "../../../../../../../src/MatrixClientPeg";
 import { type RoomAdminToolsProps } from "../../../../../../../src/components/viewmodels/right_panel/user_info/admin/UserInfoAdminToolsContainerViewModel";
 import { useMuteButtonViewModel } from "../../../../../../../src/components/viewmodels/right_panel/user_info/admin/UserInfoMuteButtonViewModel";
-import { isMuted } from "../../../../../../../src/components/views/right_panel/UserInfo";
 import { withClientContextRenderOptions } from "../../../../../../test-utils";
 
 describe("useMuteButtonViewModel", () => {
@@ -191,40 +190,4 @@ describe("useMuteButtonViewModel", () => {
 
         expect(mockClient.setPowerLevel).toHaveBeenCalledWith(mockRoom.roomId, defaultMember.userId, -1);
     });
-
-    it("returns false if either argument is falsy", () => {
-        // @ts-ignore to let us purposely pass incorrect args
-        expect(isMuted(defaultMember, null)).toBe(false);
-        // @ts-ignore to let us purposely pass incorrect args
-        expect(isMuted(null, {})).toBe(false);
-    });
-
-    it("when powerLevelContent.events and .events_default are undefined, returns false", () => {
-        const powerLevelContents = {};
-        expect(isMuted(defaultMember, powerLevelContents)).toBe(false);
-    });
-
-    it("when powerLevelContent.events is undefined, uses .events_default", () => {
-        const higherPowerLevelContents = { events_default: 10 };
-        expect(isMuted(defaultMember, higherPowerLevelContents)).toBe(true);
-
-        const lowerPowerLevelContents = { events_default: -10 };
-        expect(isMuted(defaultMember, lowerPowerLevelContents)).toBe(false);
-    });
-
-    it("when powerLevelContent.events is defined but '.m.room.message' isn't, uses .events_default", () => {
-        const higherPowerLevelContents = { events: {}, events_default: 10 };
-        expect(isMuted(defaultMember, higherPowerLevelContents)).toBe(true);
-
-        const lowerPowerLevelContents = { events: {}, events_default: -10 };
-        expect(isMuted(defaultMember, lowerPowerLevelContents)).toBe(false);
-    });
-
-    it("when powerLevelContent.events and '.m.room.message' are defined, uses the value", () => {
-        const higherPowerLevelContents = { events: { "m.room.message": -10 }, events_default: 10 };
-        expect(isMuted(defaultMember, higherPowerLevelContents)).toBe(false);
-
-        const lowerPowerLevelContents = { events: { "m.room.message": 10 }, events_default: -10 };
-        expect(isMuted(defaultMember, lowerPowerLevelContents)).toBe(true);
-    });
 });
diff --git a/apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/admin/UserInfoRedactButtonViewModel-test.tsx b/apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/admin/UserInfoRedactButtonViewModel-test.ts
similarity index 100%
rename from apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/admin/UserInfoRedactButtonViewModel-test.tsx
rename to apps/web/test/unit-tests/components/viewmodels/right_panel/user_info/admin/UserInfoRedactButtonViewModel-test.ts
diff --git a/apps/web/test/unit-tests/components/viewmodels/settings/encryption/KeyStoragePanelViewModel-test.ts b/apps/web/test/unit-tests/components/viewmodels/settings/encryption/KeyStoragePanelViewModel-test.ts
index eb9c81c4a7..b95cf57474 100644
--- a/apps/web/test/unit-tests/components/viewmodels/settings/encryption/KeyStoragePanelViewModel-test.ts
+++ b/apps/web/test/unit-tests/components/viewmodels/settings/encryption/KeyStoragePanelViewModel-test.ts
@@ -79,6 +79,8 @@ describe("KeyStoragePanelViewModel", () => {
                 auth_data: {
                     public_key: "foobar",
                 },
+                count: 0,
+                etag: "",
             },
             trustInfo,
         });
@@ -100,6 +102,8 @@ describe("KeyStoragePanelViewModel", () => {
                 auth_data: {
                     public_key: "foobar",
                 },
+                count: 0,
+                etag: "",
             },
             trustInfo: {
                 trusted: false,
@@ -128,6 +132,10 @@ describe("KeyStoragePanelViewModel", () => {
         expect(mocked(matrixClient.setAccountData)).toHaveBeenCalledWith("m.org.matrix.custom.backup_disabled", {
             disabled: false,
         });
+
+        expect(mocked(matrixClient.setAccountData)).toHaveBeenCalledWith("m.key_backup", {
+            enabled: true,
+        });
     });
 
     it("should delete key storage when disabling", async () => {
@@ -145,5 +153,8 @@ describe("KeyStoragePanelViewModel", () => {
         expect(mocked(matrixClient.setAccountData)).toHaveBeenCalledWith("m.org.matrix.custom.backup_disabled", {
             disabled: true,
         });
+        expect(mocked(matrixClient.setAccountData)).toHaveBeenCalledWith("m.key_backup", {
+            enabled: false,
+        });
     });
 });
diff --git a/apps/web/test/unit-tests/components/views/avatars/WithPresenceIndicator-test.tsx b/apps/web/test/unit-tests/components/views/avatars/WithPresenceIndicator-test.tsx
index 722127cbfd..b3871caa8f 100644
--- a/apps/web/test/unit-tests/components/views/avatars/WithPresenceIndicator-test.tsx
+++ b/apps/web/test/unit-tests/components/views/avatars/WithPresenceIndicator-test.tsx
@@ -6,17 +6,20 @@ 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 { render, waitFor } from "jest-matrix-react";
+import { act, render, renderHook, waitFor } from "jest-matrix-react";
 import { mocked } from "jest-mock";
-import { type MatrixClient, PendingEventOrdering, Room, RoomMember, User } from "matrix-js-sdk/src/matrix";
+import { type MatrixClient, PendingEventOrdering, Room, RoomMember, User, UserEvent } from "matrix-js-sdk/src/matrix";
 import React from "react";
-import userEvent from "@testing-library/user-event";
 
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
-import { stubClient } from "../../../../test-utils";
+import { getMockClientWithEventEmitter, stubClient } from "../../../../test-utils";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
-import WithPresenceIndicator from "../../../../../src/components/views/avatars/WithPresenceIndicator";
+import WithPresenceIndicator, {
+    Presence,
+    usePresence,
+} from "../../../../../src/components/views/avatars/WithPresenceIndicator";
 import { isPresenceEnabled } from "../../../../../src/utils/presence";
+import { getJoinedNonFunctionalMembers } from "../../../../../src/utils/room/getJoinedNonFunctionalMembers";
 
 jest.mock("../../../../../src/utils/presence");
 
@@ -32,7 +35,7 @@ describe("WithPresenceIndicator", () => {
 
     function renderComponent() {
         return render(
-            <WithPresenceIndicator room={room} size="32px">
+            <WithPresenceIndicator room={room}>
                 <span />
             </WithPresenceIndicator>,
         );
@@ -83,67 +86,140 @@ describe("WithPresenceIndicator", () => {
             return member;
         });
 
-        const { container, asFragment } = renderComponent();
-
-        const presence = container.querySelector(".mx_WithPresenceIndicator_icon")!;
-        expect(presence).toBeVisible();
-        await userEvent.hover(presence!);
-
-        // wait for the tooltip to open
-        const tooltip = await waitFor(() => {
-            const tooltip = document.getElementById(presence.getAttribute("aria-labelledby")!);
-            expect(tooltip).toBeVisible();
-            return tooltip;
-        });
-        expect(tooltip).toHaveTextContent(renderedStr);
+        const { asFragment } = renderComponent();
 
         expect(asFragment()).toMatchSnapshot();
     });
+});
+
+describe("usePresence", () => {
+    const ROOM_ID = "roomId";
+    const DM_USER_ID = "@bob:foo.bar";
+
+    let mockClient: ReturnType<typeof getMockClientWithEventEmitter>;
+    let room: Room;
+    let member: RoomMember;
+    let user: User;
+
+    beforeEach(() => {
+        mockClient = getMockClientWithEventEmitter({
+            getUserId: jest.fn().mockReturnValue("@alice:foo.bar"),
+            getUser: jest.fn().mockReturnValue(null),
+            store: { getPendingEvents: jest.fn().mockResolvedValue([]) },
+        });
+        room = new Room(ROOM_ID, mockClient as unknown as MatrixClient, mockClient.getUserId() ?? "");
+
+        mocked(isPresenceEnabled).mockReturnValue(true);
+        mocked(getJoinedNonFunctionalMembers).mockReturnValue([1, 2] as any);
+
+        user = new User(DM_USER_ID);
+        user.presence = "online";
+        member = new RoomMember(ROOM_ID, DM_USER_ID);
+        member.user = user;
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    it("returns null when presence is disabled", () => {
+        mocked(isPresenceEnabled).mockReturnValue(false);
+        const { result } = renderHook(() => usePresence(room, member));
+        expect(result.current).toBeNull();
+    });
+
+    it("returns null when room does not have exactly 2 members", () => {
+        mocked(getJoinedNonFunctionalMembers).mockReturnValue([1] as any);
+        const { result } = renderHook(() => usePresence(room, member));
+        expect(result.current).toBeNull();
+    });
+
+    it("returns null when member is null", () => {
+        const { result } = renderHook(() => usePresence(room, null));
+        expect(result.current).toBeNull();
+    });
 
     it.each([
-        ["online", "Online"],
-        ["offline", "Offline"],
-        ["unavailable", "Away"],
-    ])(
-        "renders presence indicator when member.user is not linked but client has user data",
-        async (presenceStr, renderedStr) => {
-            mocked(isPresenceEnabled).mockReturnValue(true);
+        ["online", Presence.Online],
+        ["offline", Presence.Offline],
+        ["unavailable", Presence.Away],
+        ["busy", Presence.Busy],
+    ])("returns correct presence for user with '%s' presence state", (presenceStr, expectedPresence) => {
+        user.presence = presenceStr;
+        const { result } = renderHook(() => usePresence(room, member));
+        expect(result.current).toBe(expectedPresence);
+    });
 
-            const DM_USER_ID = "@bob:foo.bar";
-            const dmRoomMap = {
-                getUserIdForRoomId: () => {
-                    return DM_USER_ID;
-                },
-            } as unknown as DMRoomMap;
+    it("returns Online when user.currentlyActive is true regardless of presence string", () => {
+        user.presence = "offline";
+        user.currentlyActive = true;
+        const { result } = renderHook(() => usePresence(room, member));
+        expect(result.current).toBe(Presence.Online);
+    });
 
-            jest.spyOn(DMRoomMap, "shared").mockReturnValue(dmRoomMap);
+    it("updates when UserEvent.Presence fires on member.user", async () => {
+        user.presence = "online";
+        const { result } = renderHook(() => usePresence(room, member));
+        expect(result.current).toBe(Presence.Online);
 
-            // member.user is not set: simulates the race condition on fresh login with no cache
-            // where the room list renders before member.user is linked
-            room.getMember = jest.fn((userId) => {
-                return new RoomMember(room.roomId, userId);
-            });
+        act(() => {
+            user.presence = "offline";
+            user.emit(UserEvent.Presence, null as any, user);
+        });
 
-            // But client.getUser() has the presence data
-            const user = new User(DM_USER_ID);
-            user.presence = presenceStr;
-            mockClient.getUser = jest.fn((userId) => (userId === DM_USER_ID ? user : null));
+        await waitFor(() => expect(result.current).toBe(Presence.Offline));
+    });
 
-            const { container } = renderComponent();
+    it("updates when UserEvent.CurrentlyActive fires on member.user", async () => {
+        user.presence = "offline";
+        user.currentlyActive = false;
+        const { result } = renderHook(() => usePresence(room, member));
+        expect(result.current).toBe(Presence.Offline);
 
-            const presence = container.querySelector(".mx_WithPresenceIndicator_icon")!;
-            expect(presence).toBeVisible();
-            await userEvent.hover(presence!);
+        act(() => {
+            user.currentlyActive = true;
+            user.emit(UserEvent.CurrentlyActive, null as any, user);
+        });
 
-            const tooltip = await waitFor(() => {
-                const tooltip = document.getElementById(presence.getAttribute("aria-labelledby")!);
-                expect(tooltip).toBeVisible();
-                return tooltip;
-            });
+        await waitFor(() => expect(result.current).toBe(Presence.Online));
+    });
 
-            // component should fall back to reading client.getUser() which does have the presence data
-            // so it should render correctly
-            expect(tooltip).toHaveTextContent(renderedStr);
-        },
-    );
+    it("returns correct presence when member.user is not linked but client has user data", () => {
+        member.user = undefined;
+        mocked(mockClient.getUser).mockImplementation((userId) => (userId === DM_USER_ID ? user : null));
+
+        user.presence = "online";
+        const { result } = renderHook(() => usePresence(room, member));
+        expect(result.current).toBe("online");
+    });
+
+    it("updates via client-level UserEvent.Presence when member.user is not yet linked", async () => {
+        member.user = undefined;
+        mocked(mockClient.getUser).mockImplementation((userId) => (userId === DM_USER_ID ? user : null));
+        user.presence = "online";
+
+        const { result } = renderHook(() => usePresence(room, member));
+        expect(result.current).toBe(Presence.Online);
+
+        act(() => {
+            user.presence = "offline";
+            mockClient.emit(UserEvent.Presence, null as any, user);
+        });
+
+        await waitFor(() => expect(result.current).toBe(Presence.Offline));
+    });
+
+    it("does not update when client emits UserEvent.Presence for a different user", async () => {
+        user.presence = "online";
+        const { result } = renderHook(() => usePresence(room, member));
+        expect(result.current).toBe(Presence.Online);
+
+        act(() => {
+            const otherUser = new User("@other:foo.bar");
+            otherUser.presence = "offline";
+            mockClient.emit(UserEvent.Presence, null as any, otherUser);
+        });
+
+        expect(result.current).toBe(Presence.Online);
+    });
 });
diff --git a/apps/web/test/unit-tests/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap b/apps/web/test/unit-tests/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap
index ac85c8f2b9..b7da12bb5c 100644
--- a/apps/web/test/unit-tests/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap
@@ -16,7 +16,7 @@ exports[`DecoratedRoomAvatar shows an avatar with globe icon and tooltip for pub
       r
     </span>
     <div
-      aria-labelledby="_r_0_"
+      aria-labelledby="react-use-id-1"
       class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_globe"
       tabindex="0"
     >
@@ -52,7 +52,7 @@ exports[`DecoratedRoomAvatar shows the presence indicator in a DM room that also
       r
     </span>
     <div
-      aria-labelledby="_r_6_"
+      aria-labelledby="react-use-id-1"
       class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_online"
       tabindex="0"
     />
diff --git a/apps/web/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatarView-test.tsx.snap b/apps/web/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatarView-test.tsx.snap
index 4e0b12d820..b57bc10f45 100644
--- a/apps/web/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatarView-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatarView-test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<RoomAvatarView /> should render a low priority room decoration 1`] = `
     </span>
     <svg
       aria-label="This is a low priority room"
-      aria-labelledby="_r_0_"
+      aria-labelledby="react-use-id-1"
       class="mx_RoomAvatarView_icon"
       color="var(--cpd-color-icon-tertiary)"
       fill="currentColor"
@@ -95,7 +95,7 @@ exports[`<RoomAvatarView /> should render a public room decoration 1`] = `
     </span>
     <svg
       aria-label="This room is public"
-      aria-labelledby="_r_c_"
+      aria-labelledby="react-use-id-1"
       class="mx_RoomAvatarView_icon"
       color="var(--cpd-color-icon-info-primary)"
       fill="currentColor"
@@ -139,7 +139,7 @@ exports[`<RoomAvatarView /> should render a video room decoration 1`] = `
     </span>
     <svg
       aria-label="This room is a video room"
-      aria-labelledby="_r_6_"
+      aria-labelledby="react-use-id-1"
       class="mx_RoomAvatarView_icon"
       color="var(--cpd-color-icon-tertiary)"
       fill="currentColor"
@@ -156,64 +156,7 @@ exports[`<RoomAvatarView /> should render a video room decoration 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<RoomAvatarView /> should render the AWAY presence 1`] = `
-<DocumentFragment>
-  <div
-    class="_flex_4dswl_9 mx_RoomAvatarView"
-    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
-  >
-    <span
-      aria-label="Avatar"
-      class="_avatar_va14e_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_presence"
-      data-color="1"
-      data-testid="avatar-img"
-      data-type="round"
-      style="--cpd-avatar-size: 32px;"
-    >
-      <img
-        alt=""
-        class="_image_va14e_43"
-        data-type="round"
-        height="32px"
-        loading="lazy"
-        referrerpolicy="no-referrer"
-        src="http://this.is.a.url/avatar.url/room.png"
-        width="32px"
-      />
-    </span>
-    <svg
-      aria-label="Away"
-      aria-labelledby="_r_14_"
-      class="mx_RoomAvatarView_PresenceDecoration"
-      color="var(--cpd-color-icon-quaternary)"
-      fill="currentColor"
-      height="8px"
-      viewBox="0 0 8 8"
-      width="8px"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g
-        clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
-      >
-        <path
-          d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
-        />
-      </g>
-      <defs>
-        <clippath
-          id="cpd_PresenceSolid8X8Icon_a"
-        >
-          <path
-            d="M0 0h8v8H0z"
-          />
-        </clippath>
-      </defs>
-    </svg>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`<RoomAvatarView /> should render the BUSY presence 1`] = `
+exports[`<RoomAvatarView /> should render the busy presence 1`] = `
 <DocumentFragment>
   <div
     class="_flex_4dswl_9 mx_RoomAvatarView"
@@ -240,7 +183,7 @@ exports[`<RoomAvatarView /> should render the BUSY presence 1`] = `
     </span>
     <svg
       aria-label="Busy"
-      aria-labelledby="_r_u_"
+      aria-labelledby="react-use-id-1"
       class="mx_RoomAvatarView_PresenceDecoration"
       color="var(--cpd-color-icon-tertiary)"
       fill="currentColor"
@@ -272,7 +215,7 @@ exports[`<RoomAvatarView /> should render the BUSY presence 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<RoomAvatarView /> should render the OFFLINE presence 1`] = `
+exports[`<RoomAvatarView /> should render the offline presence 1`] = `
 <DocumentFragment>
   <div
     class="_flex_4dswl_9 mx_RoomAvatarView"
@@ -299,7 +242,7 @@ exports[`<RoomAvatarView /> should render the OFFLINE presence 1`] = `
     </span>
     <svg
       aria-label="Offline"
-      aria-labelledby="_r_o_"
+      aria-labelledby="react-use-id-1"
       class="mx_RoomAvatarView_PresenceDecoration"
       color="var(--cpd-color-icon-tertiary)"
       fill="currentColor"
@@ -331,7 +274,7 @@ exports[`<RoomAvatarView /> should render the OFFLINE presence 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<RoomAvatarView /> should render the ONLINE presence 1`] = `
+exports[`<RoomAvatarView /> should render the online presence 1`] = `
 <DocumentFragment>
   <div
     class="_flex_4dswl_9 mx_RoomAvatarView"
@@ -358,7 +301,7 @@ exports[`<RoomAvatarView /> should render the ONLINE presence 1`] = `
     </span>
     <svg
       aria-label="Online"
-      aria-labelledby="_r_i_"
+      aria-labelledby="react-use-id-1"
       class="mx_RoomAvatarView_PresenceDecoration"
       color="var(--cpd-color-icon-accent-primary)"
       fill="currentColor"
@@ -387,3 +330,60 @@ exports[`<RoomAvatarView /> should render the ONLINE presence 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`<RoomAvatarView /> should render the unavailable presence 1`] = `
+<DocumentFragment>
+  <div
+    class="_flex_4dswl_9 mx_RoomAvatarView"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+  >
+    <span
+      aria-label="Avatar"
+      class="_avatar_va14e_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_presence"
+      data-color="1"
+      data-testid="avatar-img"
+      data-type="round"
+      style="--cpd-avatar-size: 32px;"
+    >
+      <img
+        alt=""
+        class="_image_va14e_43"
+        data-type="round"
+        height="32px"
+        loading="lazy"
+        referrerpolicy="no-referrer"
+        src="http://this.is.a.url/avatar.url/room.png"
+        width="32px"
+      />
+    </span>
+    <svg
+      aria-label="Away"
+      aria-labelledby="react-use-id-1"
+      class="mx_RoomAvatarView_PresenceDecoration"
+      color="var(--cpd-color-icon-quaternary)"
+      fill="currentColor"
+      height="8px"
+      viewBox="0 0 8 8"
+      width="8px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g
+        clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
+      >
+        <path
+          d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
+        />
+      </g>
+      <defs>
+        <clippath
+          id="cpd_PresenceSolid8X8Icon_a"
+        >
+          <path
+            d="M0 0h8v8H0z"
+          />
+        </clippath>
+      </defs>
+    </svg>
+  </div>
+</DocumentFragment>
+`;
diff --git a/apps/web/test/unit-tests/components/views/avatars/__snapshots__/WithPresenceIndicator-test.tsx.snap b/apps/web/test/unit-tests/components/views/avatars/__snapshots__/WithPresenceIndicator-test.tsx.snap
index 137bed37f6..46f56e3a7a 100644
--- a/apps/web/test/unit-tests/components/views/avatars/__snapshots__/WithPresenceIndicator-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/avatars/__snapshots__/WithPresenceIndicator-test.tsx.snap
@@ -7,11 +7,43 @@ exports[`WithPresenceIndicator renders presence indicator with tooltip for DM ro
   >
     <span />
     <div
-      aria-labelledby="_r_0_"
-      class="mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_online"
-      style="width: 32px; height: 32px;"
-      tabindex="0"
-    />
+      class="mx_WithPresenceIndicator_icon"
+    >
+      <span
+        tabindex="0"
+      >
+        <div
+          aria-labelledby="react-use-id-1"
+          class="mx_PresenceIconView"
+        >
+          <svg
+            class="mx_PresenceIconView_online"
+            fill="currentColor"
+            height="8px"
+            viewBox="0 0 8 8"
+            width="8px"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
+            >
+              <path
+                d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
+              />
+            </g>
+            <defs>
+              <clippath
+                id="cpd_PresenceSolid8X8Icon_a"
+              >
+                <path
+                  d="M0 0h8v8H0z"
+                />
+              </clippath>
+            </defs>
+          </svg>
+        </div>
+      </span>
+    </div>
   </div>
 </DocumentFragment>
 `;
@@ -23,11 +55,45 @@ exports[`WithPresenceIndicator renders presence indicator with tooltip for DM ro
   >
     <span />
     <div
-      aria-labelledby="_r_6_"
-      class="mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_offline"
-      style="width: 32px; height: 32px;"
-      tabindex="0"
-    />
+      class="mx_WithPresenceIndicator_icon"
+    >
+      <span
+        tabindex="0"
+      >
+        <div
+          aria-labelledby="react-use-id-1"
+          class="mx_PresenceIconView"
+        >
+          <svg
+            class="mx_PresenceIconView_offline"
+            fill="currentColor"
+            height="8px"
+            viewBox="0 0 8 8"
+            width="8px"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              clip-path="url(#cpd_PresenceOutline8X8Icon_a)"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M4 6.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5M4 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8"
+                fill-rule="evenodd"
+              />
+            </g>
+            <defs>
+              <clippath
+                id="cpd_PresenceOutline8X8Icon_a"
+              >
+                <path
+                  d="M0 0h8v8H0z"
+                />
+              </clippath>
+            </defs>
+          </svg>
+        </div>
+      </span>
+    </div>
   </div>
 </DocumentFragment>
 `;
@@ -39,11 +105,43 @@ exports[`WithPresenceIndicator renders presence indicator with tooltip for DM ro
   >
     <span />
     <div
-      aria-labelledby="_r_c_"
-      class="mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_away"
-      style="width: 32px; height: 32px;"
-      tabindex="0"
-    />
+      class="mx_WithPresenceIndicator_icon"
+    >
+      <span
+        tabindex="0"
+      >
+        <div
+          aria-labelledby="react-use-id-1"
+          class="mx_PresenceIconView"
+        >
+          <svg
+            class="mx_PresenceIconView_unavailable"
+            fill="currentColor"
+            height="8px"
+            viewBox="0 0 8 8"
+            width="8px"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
+            >
+              <path
+                d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
+              />
+            </g>
+            <defs>
+              <clippath
+                id="cpd_PresenceSolid8X8Icon_a"
+              >
+                <path
+                  d="M0 0h8v8H0z"
+                />
+              </clippath>
+            </defs>
+          </svg>
+        </div>
+      </span>
+    </div>
   </div>
 </DocumentFragment>
 `;
diff --git a/apps/web/test/unit-tests/components/views/beacon/BeaconViewDialog-test.tsx b/apps/web/test/unit-tests/components/views/beacon/BeaconViewDialog-test.tsx
index 5895929640..54a8288496 100644
--- a/apps/web/test/unit-tests/components/views/beacon/BeaconViewDialog-test.tsx
+++ b/apps/web/test/unit-tests/components/views/beacon/BeaconViewDialog-test.tsx
@@ -101,9 +101,12 @@ describe("<BeaconViewDialog />", () => {
             lat: 51,
         });
         // marker added
-        await waitFor(() => {
-            expect(mockMarker.addTo).toHaveBeenCalledWith(mockMap);
-        });
+        await waitFor(
+            () => {
+                expect(mockMarker.addTo).toHaveBeenCalledWith(mockMap);
+            },
+            { timeout: 5000 },
+        );
     });
 
     it("does not render any own beacon status when user is not live sharing", () => {
diff --git a/apps/web/test/unit-tests/components/views/beacon/LeftPanelLiveShareWarning-test.tsx b/apps/web/test/unit-tests/components/views/beacon/LeftPanelLiveShareWarning-test.tsx
index af60e87324..371772883f 100644
--- a/apps/web/test/unit-tests/components/views/beacon/LeftPanelLiveShareWarning-test.tsx
+++ b/apps/web/test/unit-tests/components/views/beacon/LeftPanelLiveShareWarning-test.tsx
@@ -18,8 +18,7 @@ import dispatcher from "../../../../../src/dispatcher/dispatcher";
 import { Action } from "../../../../../src/dispatcher/actions";
 
 jest.mock("../../../../../src/stores/OwnBeaconStore", () => {
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    const EventEmitter = require("events");
+    const EventEmitter = jest.requireActual("events");
     class MockOwnBeaconStore extends EventEmitter {
         public getLiveBeaconIdsWithLocationPublishError = jest.fn().mockReturnValue([]);
         public getBeaconById = jest.fn();
diff --git a/apps/web/test/unit-tests/components/views/beacon/RoomCallBanner-test.tsx b/apps/web/test/unit-tests/components/views/beacon/RoomCallBanner-test.tsx
deleted file mode 100644
index caa5b23810..0000000000
--- a/apps/web/test/unit-tests/components/views/beacon/RoomCallBanner-test.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React from "react";
-import {
-    Room,
-    PendingEventOrdering,
-    type MatrixClient,
-    type RoomMember,
-    RoomStateEvent,
-} from "matrix-js-sdk/src/matrix";
-import { Widget } from "matrix-widget-api";
-import { act, cleanup, render, screen } from "jest-matrix-react";
-import { mocked, type Mocked } from "jest-mock";
-
-import {
-    mkRoomMember,
-    MockedCall,
-    setupAsyncStoreWithClient,
-    stubClient,
-    useMockedCalls,
-} from "../../../../test-utils";
-import RoomCallBanner from "../../../../../src/components/views/beacon/RoomCallBanner";
-import { CallStore } from "../../../../../src/stores/CallStore";
-import { WidgetMessagingStore } from "../../../../../src/stores/widgets/WidgetMessagingStore";
-import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
-import { ConnectionState } from "../../../../../src/models/Call";
-import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext";
-import RoomContext, { type RoomContextType } from "../../../../../src/contexts/RoomContext";
-import { type WidgetMessaging } from "../../../../../src/stores/widgets/WidgetMessaging";
-
-describe("<RoomCallBanner />", () => {
-    let client: Mocked<MatrixClient>;
-    let room: Room;
-    let alice: RoomMember;
-    useMockedCalls();
-
-    const defaultProps = {
-        roomId: "!1:example.org",
-    };
-
-    const mockRoomViewStore = {
-        isViewingCall: jest.fn().mockReturnValue(false),
-        on: jest.fn(),
-        off: jest.fn(),
-        emit: jest.fn(),
-    };
-
-    let roomContext: RoomContextType;
-
-    beforeEach(() => {
-        stubClient();
-
-        client = mocked(MatrixClientPeg.safeGet());
-
-        room = new Room("!1:example.org", client, "@alice:example.org", {
-            pendingEventOrdering: PendingEventOrdering.Detached,
-        });
-        alice = mkRoomMember(room.roomId, "@alice:example.org");
-        jest.spyOn(room, "getMember").mockImplementation((userId) => (userId === alice.userId ? alice : null));
-
-        client.getRoom.mockImplementation((roomId) => (roomId === room.roomId ? room : null));
-        client.getRooms.mockReturnValue([room]);
-        client.reEmitter.reEmit(room, [RoomStateEvent.Events]);
-
-        setupAsyncStoreWithClient(CallStore.instance, client);
-        setupAsyncStoreWithClient(WidgetMessagingStore.instance, client);
-
-        // Reset the mock RoomViewStore
-        mockRoomViewStore.isViewingCall.mockReturnValue(false);
-
-        // Create a stable room context for this test
-        roomContext = {
-            ...RoomContext,
-            roomId: room.roomId,
-            roomViewStore: mockRoomViewStore,
-        } as unknown as RoomContextType;
-    });
-
-    afterEach(async () => {
-        client.reEmitter.stopReEmitting(room, [RoomStateEvent.Events]);
-    });
-
-    const renderBanner = async (props = {}): Promise<void> => {
-        render(
-            <ScopedRoomContextProvider {...roomContext}>
-                <RoomCallBanner {...defaultProps} {...props} />
-            </ScopedRoomContextProvider>,
-        );
-        await act(() => Promise.resolve()); // Let effects settle
-    };
-
-    it("renders nothing when there is no call", async () => {
-        await renderBanner();
-        const banner = await screen.queryByText("Video call");
-        expect(banner).toBeFalsy();
-    });
-
-    describe("call started", () => {
-        let call: MockedCall;
-        let widget: Widget;
-
-        beforeEach(() => {
-            MockedCall.create(room, "1");
-            const maybeCall = CallStore.instance.getCall(room.roomId);
-            if (!(maybeCall instanceof MockedCall)) {
-                throw new Error("Failed to create call");
-            }
-            call = maybeCall;
-
-            widget = new Widget(call.widget);
-            WidgetMessagingStore.instance.storeMessaging(widget, room.roomId, {
-                stop: () => {},
-            } as unknown as WidgetMessaging);
-        });
-        afterEach(() => {
-            cleanup(); // Unmount before we do any cleanup that might update the component
-            call.destroy();
-            WidgetMessagingStore.instance.stopMessaging(widget, room.roomId);
-        });
-
-        it("renders if there is a call", async () => {
-            await renderBanner();
-            await screen.findByText("Video call");
-        });
-
-        it("shows Join button if the user has not joined", async () => {
-            await renderBanner();
-            await screen.findByText("Join");
-        });
-
-        it("doesn't show banner if the call is connected", async () => {
-            call.setConnectionState(ConnectionState.Connected);
-            await renderBanner();
-            const banner = await screen.queryByText("Video call");
-            expect(banner).toBeFalsy();
-        });
-
-        it("doesn't show banner if the call is shown", async () => {
-            mockRoomViewStore.isViewingCall.mockReturnValue(true);
-            await renderBanner();
-            const banner = await screen.queryByText("Video call");
-            expect(banner).toBeFalsy();
-        });
-    });
-
-    // TODO: test clicking buttons
-    // TODO: add live location share warning test (should not render if there is an active live location share)
-});
diff --git a/apps/web/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap b/apps/web/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap
index 0ea520e24f..3230269617 100644
--- a/apps/web/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap
@@ -32,7 +32,7 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
           class="mx_BeaconListItem_interactions"
         >
           <a
-            aria-labelledby="_r_0_"
+            aria-labelledby="react-use-id-1"
             data-testid="open-location-in-osm"
             href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
             rel="noreferrer noopener"
@@ -58,25 +58,32 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
             class="mx_CopyableText mx_ShareLatestLocation_copy"
           >
             <button
-              aria-label="Copy"
-              class="mx_AccessibleButton mx_CopyableText_copyButton"
+              aria-labelledby="react-use-id-2"
+              class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+              data-kind="primary"
               role="button"
+              style="--cpd-icon-button-size: 28px; padding: 4px;"
               tabindex="0"
             >
-              <svg
-                fill="currentColor"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
+              <div
+                class="_indicator-icon_147l5_17"
+                style="--cpd-icon-button-size: 100%;"
               >
-                <path
-                  d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-                />
-                <path
-                  d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-                />
-              </svg>
+                <svg
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                  />
+                  <path
+                    d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                  />
+                </svg>
+              </div>
             </button>
           </span>
         </div>
diff --git a/apps/web/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap b/apps/web/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
index 98f74680a2..10e8fd099a 100644
--- a/apps/web/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
@@ -72,7 +72,7 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
               class="mx_BeaconListItem_interactions"
             >
               <a
-                aria-labelledby="_r_8_"
+                aria-labelledby="react-use-id-1"
                 data-testid="open-location-in-osm"
                 href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
                 rel="noreferrer noopener"
@@ -98,25 +98,32 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
                 class="mx_CopyableText mx_ShareLatestLocation_copy"
               >
                 <button
-                  aria-label="Copy"
-                  class="mx_AccessibleButton mx_CopyableText_copyButton"
+                  aria-labelledby="react-use-id-2"
+                  class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                  data-kind="primary"
                   role="button"
+                  style="--cpd-icon-button-size: 28px; padding: 4px;"
                   tabindex="0"
                 >
-                  <svg
-                    fill="currentColor"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <div
+                    class="_indicator-icon_147l5_17"
+                    style="--cpd-icon-button-size: 100%;"
                   >
-                    <path
-                      d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-                    />
-                    <path
-                      d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-                    />
-                  </svg>
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                      />
+                      <path
+                        d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                      />
+                    </svg>
+                  </div>
                 </button>
               </span>
             </div>
diff --git a/apps/web/test/unit-tests/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap b/apps/web/test/unit-tests/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap
index 1e98850d00..38a3cb20d8 100644
--- a/apps/web/test/unit-tests/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ShareLatestLocation /> renders share buttons when there is a location 1`] = `
 <DocumentFragment>
   <a
-    aria-labelledby="_r_0_"
+    aria-labelledby="react-use-id-1"
     data-testid="open-location-in-osm"
     href="https://www.openstreetmap.org/?mlat=51&mlon=42#map=16/51/42"
     rel="noreferrer noopener"
@@ -29,25 +29,32 @@ exports[`<ShareLatestLocation /> renders share buttons when there is a location
     class="mx_CopyableText mx_ShareLatestLocation_copy"
   >
     <button
-      aria-label="Copy"
-      class="mx_AccessibleButton mx_CopyableText_copyButton"
+      aria-labelledby="react-use-id-2"
+      class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+      data-kind="primary"
       role="button"
+      style="--cpd-icon-button-size: 28px; padding: 4px;"
       tabindex="0"
     >
-      <svg
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 24 24"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
+      <div
+        class="_indicator-icon_147l5_17"
+        style="--cpd-icon-button-size: 100%;"
       >
-        <path
-          d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-        />
-        <path
-          d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-        />
-      </svg>
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+          />
+          <path
+            d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+          />
+        </svg>
+      </div>
     </button>
   </span>
 </DocumentFragment>
diff --git a/apps/web/test/unit-tests/components/views/context_menus/EmbeddedPage-test.tsx b/apps/web/test/unit-tests/components/views/context_menus/EmbeddedPage-test.tsx
index 925928cf21..7f92ffa6a8 100644
--- a/apps/web/test/unit-tests/components/views/context_menus/EmbeddedPage-test.tsx
+++ b/apps/web/test/unit-tests/components/views/context_menus/EmbeddedPage-test.tsx
@@ -47,4 +47,13 @@ describe("<EmbeddedPage />", () => {
         const { asFragment } = render(<EmbeddedPage />);
         expect(asFragment()).toMatchSnapshot();
     });
+
+    it("should sanitise input", async () => {
+        fetchMock.get("https://other.page", `<h1>Foo</h1><iframe src="https://home.page" />`);
+
+        const { asFragment } = render(<EmbeddedPage url="https://other.page" />);
+        await expect(screen.findByText("Foo")).resolves.toBeVisible();
+        expect(screen.queryByRole("iframe")).not.toBeInTheDocument();
+        expect(asFragment()).toMatchSnapshot();
+    });
 });
diff --git a/apps/web/test/unit-tests/components/views/context_menus/ThreadListContextMenu-test.tsx b/apps/web/test/unit-tests/components/views/context_menus/ThreadListContextMenu-test.tsx
index 23dd63e9f2..2181cffd2e 100644
--- a/apps/web/test/unit-tests/components/views/context_menus/ThreadListContextMenu-test.tsx
+++ b/apps/web/test/unit-tests/components/views/context_menus/ThreadListContextMenu-test.tsx
@@ -17,8 +17,9 @@ import ThreadListContextMenu, {
 } from "../../../../../src/components/views/context_menus/ThreadListContextMenu";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
 import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
-import { stubClient } from "../../../../test-utils/test-utils";
+import { stubClient, clientAndSDKContextRenderOptions } from "../../../../test-utils";
 import { mkThread } from "../../../../test-utils/threads";
+import { SDKContextClass } from "../../../../../src/contexts/SDKContextClass.ts";
 
 describe("ThreadListContextMenu", () => {
     const ROOM_ID = "!123:matrix.org";
@@ -28,7 +29,10 @@ describe("ThreadListContextMenu", () => {
     let event: MatrixEvent;
 
     function getComponent(props: Partial<ThreadListContextMenuProps>) {
-        return render(<ThreadListContextMenu mxEvent={event} {...props} />);
+        return render(
+            <ThreadListContextMenu mxEvent={event} {...props} />,
+            clientAndSDKContextRenderOptions(mockClient, SDKContextClass.instance),
+        );
     }
 
     beforeEach(() => {
diff --git a/apps/web/test/unit-tests/components/views/context_menus/WidgetContextMenu-test.tsx b/apps/web/test/unit-tests/components/views/context_menus/WidgetContextMenu-test.tsx
deleted file mode 100644
index 9fd96c5cfe..0000000000
--- a/apps/web/test/unit-tests/components/views/context_menus/WidgetContextMenu-test.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2023 Mikhail Aheichyk
-Copyright 2023 Nordeck IT + Consulting GmbH.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { type JSX, type ComponentProps } from "react";
-import { screen, render } from "jest-matrix-react";
-import userEvent from "@testing-library/user-event";
-import { type Room, type MatrixClient } from "matrix-js-sdk/src/matrix";
-import { MatrixWidgetType } from "matrix-widget-api";
-import {
-    type ApprovalOpts,
-    type WidgetInfo,
-    WidgetLifecycle,
-} from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle";
-
-import { WidgetContextMenu } from "../../../../../src/components/views/context_menus/WidgetContextMenu";
-import { type IApp } from "../../../../../src/stores/WidgetStore";
-import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
-import WidgetUtils from "../../../../../src/utils/WidgetUtils";
-import { ModuleRunner } from "../../../../../src/modules/ModuleRunner";
-import SettingsStore from "../../../../../src/settings/SettingsStore";
-import { WidgetLayoutStore } from "../../../../../src/stores/widgets/WidgetLayoutStore";
-import { mkStubRoom } from "../../../../test-utils/test-utils.ts";
-import { type RoomContextType } from "../../../../../src/contexts/RoomContext.ts";
-import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";
-
-describe("<WidgetContextMenu />", () => {
-    const widgetId = "w1";
-    const eventId = "e1";
-    const roomId = "r1";
-    const userId = "@user-id:server";
-
-    const app: IApp = {
-        id: widgetId,
-        eventId,
-        roomId,
-        type: MatrixWidgetType.Custom,
-        url: "https://example.com",
-        name: "Example 1",
-        creatorUserId: userId,
-        avatar_url: undefined,
-    };
-
-    let mockClient: MatrixClient;
-
-    let room: Room;
-
-    let onFinished: () => void;
-
-    let roomContext: RoomContextType;
-
-    beforeEach(() => {
-        onFinished = jest.fn();
-        jest.spyOn(WidgetUtils, "canUserModifyWidgets").mockReturnValue(true);
-
-        mockClient = {
-            getUserId: jest.fn().mockReturnValue(userId),
-        } as unknown as MatrixClient;
-
-        room = mkStubRoom(roomId, "Test Room", mockClient);
-
-        roomContext = {
-            room,
-            roomId,
-        } as unknown as RoomContextType;
-    });
-
-    afterEach(() => {
-        jest.restoreAllMocks();
-    });
-
-    function getComponent(props: Partial<ComponentProps<typeof WidgetContextMenu>> = {}): JSX.Element {
-        return (
-            <MatrixClientContext.Provider value={mockClient}>
-                <ScopedRoomContextProvider {...roomContext}>
-                    <WidgetContextMenu app={app} onFinished={onFinished} {...props} />
-                </ScopedRoomContextProvider>
-            </MatrixClientContext.Provider>
-        );
-    }
-
-    it("renders revoke button", async () => {
-        const { rerender } = render(getComponent());
-
-        const revokeButton = screen.getByLabelText("Revoke permissions");
-        expect(revokeButton).toBeInTheDocument();
-
-        jest.spyOn(ModuleRunner.instance, "invoke").mockImplementation((lifecycleEvent, opts, widgetInfo) => {
-            if (lifecycleEvent === WidgetLifecycle.PreLoadRequest && (widgetInfo as WidgetInfo).id === widgetId) {
-                (opts as ApprovalOpts).approved = true;
-            }
-        });
-
-        rerender(getComponent());
-        expect(revokeButton).not.toBeInTheDocument();
-    });
-
-    it("revokes permissions", async () => {
-        render(getComponent());
-        await userEvent.click(screen.getByLabelText("Revoke permissions"));
-        expect(onFinished).toHaveBeenCalled();
-        expect(SettingsStore.getValue("allowedWidgets", roomId)[eventId]).toBe(false);
-    });
-
-    it("shows the move left button when the widget can be moved left", () => {
-        // Place our widget second so it can move left but not right.
-        jest.spyOn(WidgetLayoutStore.instance, "getContainerWidgets").mockReturnValue([
-            { id: "someOtherWidget", type: "m.custom", creatorUserId: userId, url: "" },
-            { id: widgetId, type: "m.custom", creatorUserId: userId, url: "" },
-        ]);
-
-        render(getComponent({ showUnpin: true }));
-
-        expect(screen.getByLabelText("Move left")).toBeInTheDocument();
-        expect(screen.queryByLabelText("Move right")).not.toBeInTheDocument();
-    });
-
-    it("shows the move right button when the widget can be moved right", () => {
-        // Place our widget first so it can move right but not left.
-        jest.spyOn(WidgetLayoutStore.instance, "getContainerWidgets").mockReturnValue([
-            { id: widgetId, type: "m.custom", creatorUserId: userId, url: "" },
-            { id: "someOtherWidget", type: "m.custom", creatorUserId: userId, url: "" },
-        ]);
-
-        render(getComponent({ showUnpin: true }));
-
-        expect(screen.getByLabelText("Move right")).toBeInTheDocument();
-        expect(screen.queryByLabelText("Move left")).not.toBeInTheDocument();
-    });
-
-    it("moves widget left when move left button is clicked", async () => {
-        // Place our widget second so move left is visible.
-        jest.spyOn(WidgetLayoutStore.instance, "getContainerWidgets").mockReturnValue([
-            { id: "someOtherWidget", type: "m.custom", creatorUserId: userId, url: "" },
-            { id: widgetId, type: "m.custom", creatorUserId: userId, url: "" },
-        ]);
-
-        // Mock moveWithinContainer to verify it's called with the correct arguments.
-        const moveWithinContainerSpy = jest
-            .spyOn(WidgetLayoutStore.instance, "moveWithinContainer")
-            .mockImplementation();
-
-        render(getComponent({ showUnpin: true }));
-
-        await userEvent.click(screen.getByLabelText("Move left"));
-
-        expect(moveWithinContainerSpy).toHaveBeenCalledWith(room, "top", app, -1);
-        expect(onFinished).toHaveBeenCalled();
-    });
-
-    it("moves widget right when move right button is clicked", async () => {
-        // Place our widget first so move right is visible.
-        jest.spyOn(WidgetLayoutStore.instance, "getContainerWidgets").mockReturnValue([
-            { id: widgetId, type: "m.custom", creatorUserId: userId, url: "" },
-            { id: "someOtherWidget", type: "m.custom", creatorUserId: userId, url: "" },
-        ]);
-
-        // Mock moveWithinContainer to verify it's called with the correct arguments.
-        const moveWithinContainerSpy = jest
-            .spyOn(WidgetLayoutStore.instance, "moveWithinContainer")
-            .mockImplementation();
-
-        render(getComponent({ showUnpin: true }));
-        await userEvent.click(screen.getByLabelText("Move right"));
-
-        expect(moveWithinContainerSpy).toHaveBeenCalledWith(room, "top", app, 1);
-        expect(onFinished).toHaveBeenCalled();
-    });
-});
diff --git a/apps/web/test/unit-tests/components/views/context_menus/__snapshots__/EmbeddedPage-test.tsx.snap b/apps/web/test/unit-tests/components/views/context_menus/__snapshots__/EmbeddedPage-test.tsx.snap
index 8d7b6add45..f069425bbc 100644
--- a/apps/web/test/unit-tests/components/views/context_menus/__snapshots__/EmbeddedPage-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/context_menus/__snapshots__/EmbeddedPage-test.tsx.snap
@@ -7,11 +7,29 @@ exports[`<EmbeddedPage /> should render nothing if no url given 1`] = `
   >
     <div
       class="undefined_body"
+      dir="auto"
     />
   </div>
 </DocumentFragment>
 `;
 
+exports[`<EmbeddedPage /> should sanitise input 1`] = `
+<DocumentFragment>
+  <div
+    class="undefined_guest"
+  >
+    <div
+      class="undefined_body"
+      dir="auto"
+    >
+      <h1>
+        Foo
+      </h1>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`<EmbeddedPage /> should show error if unable to load 1`] = `
 <DocumentFragment>
   <div
@@ -19,6 +37,7 @@ exports[`<EmbeddedPage /> should show error if unable to load 1`] = `
   >
     <div
       class="undefined_body"
+      dir="auto"
     >
       Couldn't load page
     </div>
@@ -33,6 +52,7 @@ exports[`<EmbeddedPage /> should translate _t strings ["] 1`] = `
   >
     <div
       class="undefined_body"
+      dir="auto"
     >
       <h1>
         Przeglądaj pokoje
@@ -49,6 +69,7 @@ exports[`<EmbeddedPage /> should translate _t strings [&#27;] 1`] = `
   >
     <div
       class="undefined_body"
+      dir="auto"
     >
       <h1>
         Przeglądaj pokoje
@@ -65,6 +86,7 @@ exports[`<EmbeddedPage /> should translate _t strings [&#34;] 1`] = `
   >
     <div
       class="undefined_body"
+      dir="auto"
     >
       <h1>
         Przeglądaj pokoje
@@ -81,6 +103,7 @@ exports[`<EmbeddedPage /> should translate _t strings ['] 1`] = `
   >
     <div
       class="undefined_body"
+      dir="auto"
     >
       <h1>
         Przeglądaj pokoje
diff --git a/apps/web/test/unit-tests/components/views/dialogs/AskInviteAnywayDialog-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/AskInviteAnywayDialog-test.tsx
index f0e450f9e4..37679dd993 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/AskInviteAnywayDialog-test.tsx
+++ b/apps/web/test/unit-tests/components/views/dialogs/AskInviteAnywayDialog-test.tsx
@@ -16,9 +16,9 @@ import AskInviteAnywayDialog, {
 import SettingsStore from "../../../../../src/settings/SettingsStore";
 
 describe("AskInviteaAnywayDialog", () => {
-    const onFinished: jest.Mock<any, any> = jest.fn();
-    const onGiveUp: jest.Mock<any, any> = jest.fn();
-    const onInviteAnyways: jest.Mock<any, any> = jest.fn();
+    const onFinished = jest.fn();
+    const onGiveUp = jest.fn();
+    const onInviteAnyways = jest.fn();
 
     function renderComponent(props: Partial<AskInviteAnywayDialogProps> = {}): RenderResult {
         return render(
diff --git a/apps/web/test/unit-tests/components/views/dialogs/BaseDialog-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/BaseDialog-test.tsx
index 41a396c5b6..6a536fb686 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/BaseDialog-test.tsx
+++ b/apps/web/test/unit-tests/components/views/dialogs/BaseDialog-test.tsx
@@ -18,7 +18,7 @@ describe("BaseDialog", () => {
         // Autolock's autofocus in the empty dialog is focusing on the close button and bringing up the tooltip
         // So we either need to call escape twice(one for the tooltip and one for the dialog) or focus
         // on the dialog first.
-        const dialog = container.querySelector('[role="dialog"]') as HTMLElement;
+        const dialog = container.querySelector<HTMLElement>('[role="dialog"]')!;
         dialog?.focus();
         await userEvent.keyboard("{Escape}");
         expect(onFinished).toHaveBeenCalled();
diff --git a/apps/web/test/unit-tests/components/views/dialogs/BugReportDialog-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/BugReportDialog-test.tsx
index 78257711c2..0ddfc4c254 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/BugReportDialog-test.tsx
+++ b/apps/web/test/unit-tests/components/views/dialogs/BugReportDialog-test.tsx
@@ -22,7 +22,7 @@ import { BugReportEndpointURLLocal } from "../../../../../src/IConfigOptions";
 const BUG_REPORT_URL = "https://example.org/submit";
 
 describe("BugReportDialog", () => {
-    const onFinished: jest.Mock<any, any> = jest.fn();
+    const onFinished = jest.fn();
 
     function renderComponent(props: Partial<BugReportDialogProps> = {}): RenderResult {
         return render(<BugReportDialog onFinished={onFinished} />);
diff --git a/apps/web/test/unit-tests/components/views/dialogs/ConfirmRedactDialog-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/ConfirmRedactDialog-test.ts
similarity index 100%
rename from apps/web/test/unit-tests/components/views/dialogs/ConfirmRedactDialog-test.tsx
rename to apps/web/test/unit-tests/components/views/dialogs/ConfirmRedactDialog-test.ts
diff --git a/apps/web/test/unit-tests/components/views/dialogs/ConfirmRejectInviteDialog-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/ConfirmRejectInviteDialog-test.tsx
index 573cfa76fe..388d228122 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/ConfirmRejectInviteDialog-test.tsx
+++ b/apps/web/test/unit-tests/components/views/dialogs/ConfirmRejectInviteDialog-test.tsx
@@ -13,7 +13,7 @@ import SdkConfig from "../../../../../src/SdkConfig";
 import { DeclineAndBlockInviteDialog } from "../../../../../src/components/views/dialogs/DeclineAndBlockInviteDialog";
 
 describe("ConfirmRejectInviteDialog", () => {
-    const onFinished: jest.Mock<any, any> = jest.fn();
+    const onFinished = jest.fn();
 
     const MY_ROOM_NAME = "foo";
 
diff --git a/apps/web/test/unit-tests/components/views/dialogs/CreateSectionDialog-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/CreateSectionDialog-test.tsx
index 3e709d93bd..459b689069 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/CreateSectionDialog-test.tsx
+++ b/apps/web/test/unit-tests/components/views/dialogs/CreateSectionDialog-test.tsx
@@ -68,26 +68,26 @@ describe("CreateSectionDialog", () => {
             expect(input).toHaveValue("Existing Section");
         });
 
-        it("shows the edit section button instead of create section", () => {
+        it("shows the save button instead of create section", () => {
             renderEditComponent();
-            expect(screen.getByRole("button", { name: "Edit section" })).toBeInTheDocument();
+            expect(screen.getByRole("button", { name: "Save" })).toBeInTheDocument();
             expect(screen.queryByRole("button", { name: "Create section" })).not.toBeInTheDocument();
         });
 
-        it("calls onFinished with the updated name when edit section is clicked", async () => {
+        it("calls onFinished with the updated name when save is clicked", async () => {
             renderEditComponent();
             const input = screen.getByRole("textbox");
             await userEvent.clear(input);
             await userEvent.type(input, "Updated Section");
-            await userEvent.click(screen.getByRole("button", { name: "Edit section" }));
+            await userEvent.click(screen.getByRole("button", { name: "Save" }));
             expect(onFinished).toHaveBeenCalledWith(true, "Updated Section");
         });
 
-        it("has the edit section button disabled when the input is empty", async () => {
+        it("has the save button disabled when the input is empty", async () => {
             renderEditComponent();
             const input = screen.getByRole("textbox");
             await userEvent.clear(input);
-            expect(screen.getByRole("button", { name: "Edit section" })).toBeDisabled();
+            expect(screen.getByRole("button", { name: "Save" })).toBeDisabled();
         });
     });
 });
diff --git a/apps/web/test/unit-tests/components/views/dialogs/DevtoolsDialog-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/DevtoolsDialog-test.tsx
index 448a762876..a0553bd641 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/DevtoolsDialog-test.tsx
+++ b/apps/web/test/unit-tests/components/views/dialogs/DevtoolsDialog-test.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { getByLabelText, getAllByLabelText, render } from "jest-matrix-react";
+import { render, screen } from "jest-matrix-react";
 import { Room, type MatrixClient } from "matrix-js-sdk/src/matrix";
 import userEvent from "@testing-library/user-event";
 
@@ -49,11 +49,11 @@ describe("DevtoolsDialog", () => {
         const user = userEvent.setup();
         jest.spyOn(navigator.clipboard, "writeText");
 
-        const { container } = getComponent(room.roomId);
+        getComponent(room.roomId);
 
-        const copyBtn = getByLabelText(container, "Copy");
+        const copyBtn = screen.getByLabelText("Copy");
         await user.click(copyBtn);
-        const copiedBtn = getByLabelText(container, "Copied!");
+        const copiedBtn = screen.getByLabelText("Copied!");
 
         expect(copiedBtn).toBeInTheDocument();
         expect(navigator.clipboard.writeText).toHaveBeenCalledWith(room.roomId);
@@ -64,11 +64,11 @@ describe("DevtoolsDialog", () => {
         jest.spyOn(navigator.clipboard, "writeText");
 
         const threadRootId = "$test_event_id_goes_here";
-        const { container } = getComponent(room.roomId, threadRootId);
+        getComponent(room.roomId, threadRootId);
 
-        const copyBtn = getAllByLabelText(container, "Copy")[1];
+        const copyBtn = screen.getAllByLabelText("Copy")[1];
         await user.click(copyBtn);
-        const copiedBtn = getByLabelText(container, "Copied!");
+        const copiedBtn = screen.getByLabelText("Copied!");
 
         expect(copiedBtn).toBeInTheDocument();
         expect(navigator.clipboard.writeText).toHaveBeenCalledWith(threadRootId);
diff --git a/apps/web/test/unit-tests/components/views/dialogs/EditHistoryMessage-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/EditHistoryMessage-test.tsx
new file mode 100644
index 0000000000..b430d977b5
--- /dev/null
+++ b/apps/web/test/unit-tests/components/views/dialogs/EditHistoryMessage-test.tsx
@@ -0,0 +1,273 @@
+/*
+Copyright 2026 Element Creations 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 { act, fireEvent, render, waitFor } from "jest-matrix-react";
+import { MatrixEventEvent, MsgType } from "matrix-js-sdk/src/matrix";
+
+import { mkEvent, stubClient } from "../../../../test-utils";
+import Modal from "../../../../../src/Modal";
+import SettingsStore from "../../../../../src/settings/SettingsStore";
+import type { SettingKey } from "../../../../../src/settings/Settings";
+import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
+import EditHistoryMessage from "../../../../../src/components/views/messages/EditHistoryMessage";
+import ConfirmAndWaitRedactDialog from "../../../../../src/components/views/dialogs/ConfirmAndWaitRedactDialog";
+import ViewSource from "../../../../../src/components/structures/ViewSource";
+import { EventContentBodyViewModel } from "../../../../../src/viewmodels/message-body/EventContentBodyViewModel";
+import { EditHistoryActionBarViewModel } from "../../../../../src/viewmodels/message-body/EditHistoryActionBarViewModel";
+import { MessageTimestampViewModel } from "../../../../../src/viewmodels/room/timeline/event-tile/timestamp/MessageTimestampViewModel";
+
+describe("EditHistoryMessage", () => {
+    const roomId = "!room:example.com";
+    let client: ReturnType<typeof stubClient>;
+    let developerMode = false;
+
+    const renderComponent = (props: React.ComponentProps<typeof EditHistoryMessage>) => {
+        return render(
+            <MatrixClientContext.Provider value={client}>
+                <EditHistoryMessage {...props} />
+            </MatrixClientContext.Provider>,
+        );
+    };
+
+    beforeEach(() => {
+        client = stubClient();
+        developerMode = false;
+        jest.spyOn(SettingsStore, "getValue").mockImplementation(((settingName: SettingKey) => {
+            switch (settingName) {
+                case "developerMode":
+                    return developerMode;
+                case "showTwelveHourTimestamps":
+                case "TextualBody.enableBigEmoji":
+                    return false;
+                case "Pill.shouldShowPillAvatar":
+                    return true;
+                default:
+                    return null;
+            }
+        }) as typeof SettingsStore.getValue);
+        jest.spyOn(Modal, "createDialog").mockReturnValue({} as any);
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    it("renders replaced content, tracks send status, and disposes view models on unmount", async () => {
+        const event = mkEvent({
+            event: true,
+            id: "$event",
+            room: roomId,
+            user: "@alice:example.com",
+            type: "m.room.message",
+            content: {
+                "msgtype": MsgType.Text,
+                "body": "Original body",
+                "m.new_content": {
+                    msgtype: MsgType.Text,
+                    body: "Edited body",
+                },
+            },
+        });
+        const localRedactionEvent = {
+            on: jest.fn(),
+            off: jest.fn(),
+        };
+        const getAssociatedStatus = jest.fn().mockReturnValue("sending");
+        const eventContentDisposeSpy = jest.spyOn(EventContentBodyViewModel.prototype, "dispose");
+        const actionBarDisposeSpy = jest.spyOn(EditHistoryActionBarViewModel.prototype, "dispose");
+        const timestampDisposeSpy = jest.spyOn(MessageTimestampViewModel.prototype, "dispose");
+
+        (event as any).localRedactionEvent = jest.fn().mockReturnValue(localRedactionEvent);
+        (event as any).getAssociatedStatus = getAssociatedStatus;
+
+        const { container, getByRole, getByText, unmount } = renderComponent({ mxEvent: event });
+
+        expect(getByText("Edited body")).toBeInTheDocument();
+        expect(container.querySelector(".mx_EventTile_sending")).not.toBeNull();
+        expect(getByRole("button", { name: /remove/i })).toBeInTheDocument();
+        expect(localRedactionEvent.on).toHaveBeenCalledWith(MatrixEventEvent.Status, expect.any(Function));
+
+        getAssociatedStatus.mockReturnValue(null);
+        const onStatusChanged = localRedactionEvent.on.mock.calls[0][1];
+        act(() => {
+            onStatusChanged();
+        });
+
+        await waitFor(() => expect(container.querySelector(".mx_EventTile_sending")).toBeNull());
+
+        unmount();
+
+        expect(localRedactionEvent.off).toHaveBeenCalledWith(MatrixEventEvent.Status, expect.any(Function));
+        expect(eventContentDisposeSpy).toHaveBeenCalled();
+        expect(actionBarDisposeSpy).toHaveBeenCalled();
+        expect(timestampDisposeSpy).toHaveBeenCalled();
+    });
+
+    it("renders diffs for previous edits and formats emotes with the sender name", () => {
+        const previousEdit = mkEvent({
+            event: true,
+            id: "$prev",
+            room: roomId,
+            user: "@alice:example.com",
+            type: "m.room.message",
+            content: {
+                msgtype: MsgType.Emote,
+                body: "smiles",
+            },
+        });
+        const event = mkEvent({
+            event: true,
+            id: "$event",
+            room: roomId,
+            user: "@alice:example.com",
+            type: "m.room.message",
+            content: {
+                msgtype: MsgType.Emote,
+                body: "waves",
+            },
+        });
+        if (event.sender) {
+            event.sender.name = "Alice";
+        }
+
+        const { container, getByText } = renderComponent({ mxEvent: event, previousEdit });
+
+        expect(getByText("Alice")).toHaveClass("mx_EditHistoryMessage_emoteSender");
+        expect(container.querySelector(".mx_EditHistoryMessage_deletion")).not.toBeNull();
+        expect(container.querySelector(".mx_EditHistoryMessage_insertion")).not.toBeNull();
+        expect(container.querySelector(".mx_EditHistoryMessage_deletion")).not.toBeEmptyDOMElement();
+        expect(container.querySelector(".mx_EditHistoryMessage_insertion")).not.toBeEmptyDOMElement();
+    });
+
+    it("renders redacted events and opens view source from the action bar", () => {
+        developerMode = true;
+        const event = mkEvent({
+            event: true,
+            id: "$event",
+            room: roomId,
+            user: "@alice:example.com",
+            type: "m.room.message",
+            content: {
+                msgtype: MsgType.Text,
+                body: "Removed",
+            },
+            unsigned: {
+                redacted_because: {
+                    event_id: "$redaction",
+                    sender: "@moderator:example.com",
+                    type: "m.room.redaction",
+                    origin_server_ts: Date.UTC(2024, 0, 1, 12, 0, 0),
+                    content: {},
+                    unsigned: {},
+                },
+            },
+        });
+        jest.spyOn(event, "isRedacted").mockReturnValue(true);
+
+        const { container, getByRole, queryByRole } = renderComponent({ mxEvent: event, isBaseEvent: true });
+
+        expect(container.querySelector(".mx_RedactedBody")).not.toBeNull();
+        expect(queryByRole("button", { name: /remove/i })).toBeNull();
+
+        fireEvent.click(getByRole("button", { name: /view source/i }));
+
+        expect(Modal.createDialog).toHaveBeenCalledWith(
+            ViewSource,
+            {
+                mxEvent: event,
+                ignoreEdits: true,
+            },
+            "mx_Dialog_viewsource",
+        );
+    });
+
+    it("opens the redact dialog and uses the client redact callback", async () => {
+        const event = mkEvent({
+            event: true,
+            id: "$event",
+            room: roomId,
+            user: "@alice:example.com",
+            type: "m.room.message",
+            content: {
+                msgtype: MsgType.Text,
+                body: "Editable",
+            },
+        });
+
+        const { getByRole } = renderComponent({ mxEvent: event });
+
+        fireEvent.click(getByRole("button", { name: /remove/i }));
+
+        expect(Modal.createDialog).toHaveBeenCalledWith(
+            ConfirmAndWaitRedactDialog,
+            expect.objectContaining({
+                event,
+                redact: expect.any(Function),
+            }),
+            "mx_Dialog_confirmredact",
+        );
+
+        const [, dialogProps] = (Modal.createDialog as jest.Mock).mock.calls[0];
+        await dialogProps.redact();
+
+        expect(client.redactEvent).toHaveBeenCalledWith(roomId, "$event");
+    });
+
+    it("updates content and timestamp view models when props change", () => {
+        developerMode = true;
+        const firstEventTs = Date.parse("2021-12-17T08:09:00.000Z");
+        const secondEventTs = Date.parse("2021-12-17T09:09:00.000Z");
+        const firstEvent = mkEvent({
+            event: true,
+            id: "$first",
+            room: roomId,
+            user: "@alice:example.com",
+            type: "m.room.message",
+            ts: firstEventTs,
+            content: {
+                msgtype: MsgType.Text,
+                body: "First",
+            },
+        });
+        const secondEvent = mkEvent({
+            event: true,
+            id: "$second",
+            room: roomId,
+            user: "@alice:example.com",
+            type: "m.room.message",
+            ts: secondEventTs,
+            content: {
+                "msgtype": MsgType.Text,
+                "body": "Second",
+                "m.new_content": {
+                    msgtype: MsgType.Text,
+                    body: "Second edited",
+                },
+            },
+        });
+
+        const { getByRole, getByText, queryByRole, rerender } = renderComponent({
+            mxEvent: firstEvent,
+            isTwelveHour: false,
+        });
+
+        expect(getByRole("button", { name: /remove/i })).toBeInTheDocument();
+        expect(getByText("08:09")).toBeInTheDocument();
+
+        rerender(
+            <MatrixClientContext.Provider value={client}>
+                <EditHistoryMessage mxEvent={secondEvent} isBaseEvent={true} isTwelveHour={true} />
+            </MatrixClientContext.Provider>,
+        );
+
+        expect(getByText("Second edited")).toBeInTheDocument();
+        expect(getByText("9:09 AM")).toBeInTheDocument();
+        expect(queryByRole("button", { name: /remove/i })).toBeNull();
+        expect(getByRole("button", { name: /view source/i })).toBeInTheDocument();
+    });
+});
diff --git a/apps/web/test/unit-tests/components/views/dialogs/IncomingSasDialog-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/IncomingSasDialog-test.tsx
index 2a7ed61f13..8a361fc431 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/IncomingSasDialog-test.tsx
+++ b/apps/web/test/unit-tests/components/views/dialogs/IncomingSasDialog-test.tsx
@@ -63,7 +63,7 @@ function makeMockSasCallbacks(): ShowSasCallbacks {
     const unicorn: EmojiMapping = ["🦄", "unicorn"];
     return {
         sas: {
-            emoji: new Array<EmojiMapping>(7).fill(unicorn),
+            emoji: Array.from<EmojiMapping>({ length: 7 }).map(() => unicorn),
         },
         cancel: jest.fn(),
         confirm: jest.fn(),
diff --git a/apps/web/test/unit-tests/components/views/dialogs/LogoutDialog-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/LogoutDialog-test.tsx
index e1bc70f9d5..bee68fb205 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/LogoutDialog-test.tsx
+++ b/apps/web/test/unit-tests/components/views/dialogs/LogoutDialog-test.tsx
@@ -7,12 +7,18 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { mocked, type MockedObject } from "jest-mock";
-import { type MatrixClient } from "matrix-js-sdk/src/matrix";
-import { type CryptoApi, type KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
+import { mocked, type MockedObject } from "jest-mock-vitest-adapter";
+import { Device, DeviceVerification, type MatrixClient } from "matrix-js-sdk/src/matrix";
+import { type CryptoApi, DeviceVerificationStatus, type KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
 import { fireEvent, render, type RenderResult, screen, waitFor } from "jest-matrix-react";
 
-import { filterConsole, getMockClientWithEventEmitter, mockClientMethodsCrypto } from "../../../../test-utils";
+import {
+    filterConsole,
+    getMockClientWithEventEmitter,
+    mockClientMethodsCrypto,
+    mockClientMethodsDevice,
+    mockClientMethodsUser,
+} from "../../../../test-utils";
 import LogoutDialog from "../../../../../src/components/views/dialogs/LogoutDialog";
 import dispatch from "../../../../../src/dispatcher/dispatcher";
 import { Action } from "../../../../../src/dispatcher/actions";
@@ -25,10 +31,13 @@ describe("LogoutDialog", () => {
     beforeEach(() => {
         mockClient = getMockClientWithEventEmitter({
             ...mockClientMethodsCrypto(),
+            ...mockClientMethodsUser(),
+            ...mockClientMethodsDevice(),
         });
 
         mockCrypto = mocked(mockClient.getCrypto()!);
         Object.assign(mockCrypto, {
+            getUserDeviceInfo: jest.fn().mockResolvedValue(new Map()),
             getActiveSessionBackupVersion: jest.fn().mockResolvedValue(null),
         });
     });
@@ -52,37 +61,131 @@ describe("LogoutDialog", () => {
         await rendered.findByText("Are you sure you want to remove this device?");
     });
 
+    it("shows a regular dialog if the user has another verified device", async () => {
+        const userId = mockClient.getUserId()!;
+        mockCrypto.getUserDeviceInfo.mockResolvedValue(
+            new Map([
+                [
+                    userId,
+                    new Map([
+                        [
+                            "otherDevice",
+                            new Device({
+                                deviceId: "otherDevice",
+                                userId: userId,
+                                algorithms: [],
+                                keys: new Map([["curve25519:otherDevice", "akey"]]),
+                                verified: DeviceVerification.Verified,
+                                dehydrated: false,
+                            }),
+                        ],
+                    ]),
+                ],
+            ]),
+        );
+        mockCrypto.getDeviceVerificationStatus.mockResolvedValue(new DeviceVerificationStatus({ signedByOwner: true }));
+
+        const rendered = renderComponent();
+        await rendered.findByText("Are you sure you want to remove this device?");
+    });
+
     it("prompts user to set up recovery if backups are enabled but recovery isn't", async () => {
         mockCrypto.getActiveSessionBackupVersion.mockResolvedValue("1");
         mockCrypto.isSecretStorageReady.mockResolvedValue(false);
         const rendered = renderComponent();
-        await rendered.findByText("You'll lose access to your encrypted messages");
+        await rendered.findByText("You're about to lose access to your encrypted chats");
     });
 
-    it("Prompts user to go to settings if there is a backup on the server", async () => {
+    it("Prompts user to set up recovery if there is a backup on the server but no secret storage", async () => {
         mockCrypto.getKeyBackupInfo.mockResolvedValue({} as KeyBackupInfo);
         const rendered = renderComponent();
-        await rendered.findByText("Go to Settings");
+        await rendered.findByText("Get recovery key");
         expect(rendered.container).toMatchSnapshot();
 
         jest.spyOn(dispatch, "dispatch");
-        fireEvent.click(await screen.findByRole("button", { name: "Go to Settings" }));
+        fireEvent.click(await screen.findByRole("button", { name: "Get recovery key" }));
         await waitFor(() =>
             expect(dispatch.dispatch).toHaveBeenCalledWith({
                 action: Action.ViewUserSettings,
                 initialTabId: UserTab.Encryption,
+                props: {
+                    initialEncryptionState: "set_recovery_key",
+                },
             }),
         );
     });
 
-    it("Prompts user to go to settings if there is no backup on the server", async () => {
+    it("Prompts user to set up recovery if there is no backup on the server", async () => {
         mockCrypto.getKeyBackupInfo.mockResolvedValue(null);
         const rendered = renderComponent();
-        await rendered.findByText("Go to Settings");
+        await rendered.findByText("Get recovery key");
         expect(rendered.container).toMatchSnapshot();
+    });
 
-        fireEvent.click(await screen.findByRole("button", { name: "Manually export keys" }));
-        await expect(screen.findByRole("heading", { name: "Export room keys" })).resolves.toBeInTheDocument();
+    it("Prompts user to set up recovery if there is no backup on the server, and the user has other unverified/dehydrated devices", async () => {
+        const userId = mockClient.getUserId()!;
+        const testDeviceId = mockClient.getDeviceId()!;
+        mockCrypto.getUserDeviceInfo.mockResolvedValue(
+            new Map([
+                [
+                    userId,
+                    new Map([
+                        // the current device
+                        [
+                            testDeviceId,
+                            new Device({
+                                deviceId: testDeviceId,
+                                userId: userId,
+                                algorithms: [],
+                                keys: new Map([["curve25519:test-device-id", "akey"]]),
+                                verified: DeviceVerification.Verified,
+                                dehydrated: false,
+                            }),
+                        ],
+                        // a dehydrated device
+                        [
+                            "dehydratedDevice",
+                            new Device({
+                                deviceId: "otherDevice",
+                                userId: userId,
+                                algorithms: [],
+                                keys: new Map([["curve25519:dehydratedDevice", "akey"]]),
+                                verified: DeviceVerification.Verified,
+                                dehydrated: true,
+                            }),
+                        ],
+                        // an unverified device
+                        [
+                            "otherDevice",
+                            new Device({
+                                deviceId: "otherDevice",
+                                userId: userId,
+                                algorithms: [],
+                                keys: new Map([["curve25519:otherDevice", "akey"]]),
+                                verified: DeviceVerification.Unverified,
+                                dehydrated: false,
+                            }),
+                        ],
+                    ]),
+                ],
+            ]),
+        );
+        mockCrypto.getDeviceVerificationStatus.mockImplementation(async (_userId: string, deviceId: string) => {
+            switch (deviceId) {
+                case testDeviceId:
+                case "dehydratedDevice":
+                    return new DeviceVerificationStatus({ signedByOwner: true });
+                case "otherDevice":
+                    return new DeviceVerificationStatus({ signedByOwner: false });
+                default:
+                    throw new Error("Unknown device ID");
+            }
+        });
+
+        mockCrypto.getKeyBackupInfo.mockResolvedValue(null);
+        const rendered = renderComponent();
+        await rendered.findByText("Get recovery key");
+        expect(rendered.container).toMatchSnapshot();
     });
 
     describe("when there is an error fetching backups", () => {
@@ -92,7 +195,7 @@ describe("LogoutDialog", () => {
                 throw new Error("beep");
             });
             const rendered = renderComponent();
-            await rendered.findByText("Go to Settings");
+            await rendered.findByText("Get recovery key");
         });
     });
 });
diff --git a/apps/web/test/unit-tests/components/views/dialogs/ManageRestrictedJoinRuleDialog-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/ManageRestrictedJoinRuleDialog-test.tsx
index 7321f36b7a..73dcd9b7b2 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/ManageRestrictedJoinRuleDialog-test.tsx
+++ b/apps/web/test/unit-tests/components/views/dialogs/ManageRestrictedJoinRuleDialog-test.tsx
@@ -10,16 +10,16 @@ import React from "react";
 import { render } from "jest-matrix-react";
 import { Room } from "matrix-js-sdk/src/matrix";
 
-import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../../test-utils";
+import { getMockClientWithEventEmitter, mockClientMethodsRooms, mockClientMethodsUser } from "../../../../test-utils";
 import ManageRestrictedJoinRuleDialog from "../../../../../src/components/views/dialogs/ManageRestrictedJoinRuleDialog";
-import SpaceStore from "../../../../../src/stores/spaces/SpaceStore";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
+import { SDKContextClass } from "../../../../../src/contexts/SDKContextClass.ts";
 
 describe("<ManageRestrictedJoinRuleDialog />", () => {
     const userId = "@alice:server.org";
     const mockClient = getMockClientWithEventEmitter({
         ...mockClientMethodsUser(userId),
-        getRoom: jest.fn(),
+        ...mockClientMethodsRooms([]),
     });
     const room = new Room("!roomId:server", mockClient, userId);
     mockClient.getRoom.mockReturnValue(room);
@@ -36,7 +36,7 @@ describe("<ManageRestrictedJoinRuleDialog />", () => {
     it("should list spaces which are not parents of the room", () => {
         const space1 = new Room("!space:server", mockClient, userId);
         space1.name = "Other Space";
-        jest.spyOn(SpaceStore.instance, "spacePanelSpaces", "get").mockReturnValue([space1]);
+        jest.spyOn(SDKContextClass.instance.spaceStore, "spacePanelSpaces", "get").mockReturnValue([space1]);
 
         expect(getComponent().asFragment()).toMatchSnapshot();
     });
diff --git a/apps/web/test/unit-tests/components/views/dialogs/MessageEditHistoryDialog-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/MessageEditHistoryDialog-test.tsx
index 028c415932..375b9f3f8f 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/MessageEditHistoryDialog-test.tsx
+++ b/apps/web/test/unit-tests/components/views/dialogs/MessageEditHistoryDialog-test.tsx
@@ -13,12 +13,13 @@ import { EventType, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import type { MatrixClient } from "matrix-js-sdk/src/matrix";
 import { flushPromises, mkMessage, stubClient } from "../../../../test-utils";
 import MessageEditHistoryDialog from "../../../../../src/components/views/dialogs/MessageEditHistoryDialog";
-import { SDKContext, SdkContextClass } from "../../../../../src/contexts/SDKContext";
+import { SDKContext } from "../../../../../src/contexts/SDKContext";
+import { SDKContextClass } from "../../../../../src/contexts/SDKContextClass";
 
 describe("<MessageEditHistory />", () => {
     const roomId = "!aroom:example.com";
     let client: jest.Mocked<MatrixClient>;
-    let sdkContext: SdkContextClass;
+    let sdkContext: SDKContextClass;
     let event: MatrixEvent;
 
     beforeEach(() => {
@@ -29,7 +30,7 @@ describe("<MessageEditHistory />", () => {
             room: "!room:example.com",
             msg: "My Great Message",
         });
-        sdkContext = new SdkContextClass();
+        sdkContext = new SDKContextClass();
     });
 
     async function renderComponent(): Promise<RenderResult> {
diff --git a/apps/web/test/unit-tests/components/views/dialogs/ReportRoomDialog-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/ReportRoomDialog-test.tsx
index 2357e341a1..089a9d268a 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/ReportRoomDialog-test.tsx
+++ b/apps/web/test/unit-tests/components/views/dialogs/ReportRoomDialog-test.tsx
@@ -17,8 +17,8 @@ const ROOM_ID = "!foo:bar";
 const REASON = "This room is bad!";
 
 describe("ReportRoomDialog", () => {
-    const onFinished: jest.Mock<any, any> = jest.fn();
-    const reportRoom: jest.Mock<any, any> = jest.fn();
+    const onFinished: jest.Mock = jest.fn();
+    const reportRoom: jest.Mock = jest.fn();
     beforeEach(() => {
         jest.resetAllMocks();
         const client = stubClient();
diff --git a/apps/web/test/unit-tests/components/views/dialogs/RoomSettingsDialog-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/RoomSettingsDialog-test.tsx
index 5bc6933d50..d9f8dd65dd 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/RoomSettingsDialog-test.tsx
+++ b/apps/web/test/unit-tests/components/views/dialogs/RoomSettingsDialog-test.tsx
@@ -24,7 +24,7 @@ import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext
 import SettingsStore from "../../../../../src/settings/SettingsStore";
 import { UIFeature } from "../../../../../src/settings/UIFeature";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
-import { SdkContextClass } from "../../../../../src/contexts/SDKContext";
+import { TestSDKContext } from "../../../TestSDKContext.ts";
 
 describe("<RoomSettingsDialog />", () => {
     const userId = "@alice:server.org";
@@ -44,7 +44,7 @@ describe("<RoomSettingsDialog />", () => {
     const room2 = new Room("!room2:server.org", mockClient, userId);
     room2.name = "Another Room";
 
-    let sdkContext: SdkContextClass;
+    let sdkContext: TestSDKContext;
 
     jest.spyOn(SettingsStore, "getValue");
 
@@ -57,8 +57,8 @@ describe("<RoomSettingsDialog />", () => {
             return null;
         });
 
-        sdkContext = new SdkContextClass();
-        sdkContext.client = mockClient;
+        sdkContext = new TestSDKContext();
+        sdkContext._client = mockClient;
 
         jest.spyOn(SettingsStore, "getValue").mockReset().mockReturnValue(false);
 
@@ -146,10 +146,7 @@ describe("<RoomSettingsDialog />", () => {
             });
         });
 
-        it("renders voip settings tab when enabled", () => {
-            jest.spyOn(SettingsStore, "getValue").mockImplementation(
-                (settingName) => settingName === "feature_group_calls",
-            );
+        it("always renders voip settings tab when enabled", () => {
             getComponent();
             expect(screen.getByTestId("settings-tab-ROOM_VOIP_TAB")).toBeInTheDocument();
         });
diff --git a/apps/web/test/unit-tests/components/views/dialogs/SpotlightDialog-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/SpotlightDialog-test.tsx
index 1cbb5b3e03..08e6cdc66e 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/SpotlightDialog-test.tsx
+++ b/apps/web/test/unit-tests/components/views/dialogs/SpotlightDialog-test.tsx
@@ -34,7 +34,7 @@ import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
 import SdkConfig from "../../../../../src/SdkConfig";
 import { Action } from "../../../../../src/dispatcher/actions";
 import { MetaSpace } from "../../../../../src/stores/spaces";
-import SpaceStore from "../../../../../src/stores/spaces/SpaceStore.ts";
+import { SDKContextClass } from "../../../../../src/contexts/SDKContextClass.ts";
 
 jest.useFakeTimers();
 
@@ -704,26 +704,21 @@ describe("Spotlight Dialog", () => {
 
     describe("metaspaces", () => {
         beforeEach(() => {
-            jest.spyOn(SpaceStore.instance, "enabledMetaSpaces", "get").mockReturnValue([
+            jest.spyOn(SDKContextClass.instance.spaceStore, "enabledMetaSpaces", "get").mockReturnValue([
                 MetaSpace.Home,
-                MetaSpace.Favourites,
-                MetaSpace.People,
                 MetaSpace.Orphans,
             ]);
         });
 
-        it.each([MetaSpace.Home, MetaSpace.Favourites, MetaSpace.People])(
-            "should show metaspace %s",
-            async (metaSpace) => {
-                const onFinished = jest.fn();
-                const { asFragment, container } = render(
-                    <SpotlightDialog initialText={metaSpace.split("-")[0]} onFinished={onFinished} />,
-                );
-                await waitFor(() =>
-                    expect(container.querySelector(".mx_SpotlightDialog_metaspaceResult")).toBeInTheDocument(),
-                );
-                expect(asFragment()).toMatchSnapshot();
-            },
-        );
+        it("should show Home metaspace", async () => {
+            const onFinished = jest.fn();
+            const { asFragment, container } = render(
+                <SpotlightDialog initialText={MetaSpace.Home.split("-")[0]} onFinished={onFinished} />,
+            );
+            await waitFor(() =>
+                expect(container.querySelector(".mx_SpotlightDialog_metaspaceResult")).toBeInTheDocument(),
+            );
+            expect(asFragment()).toMatchSnapshot();
+        });
     });
 });
diff --git a/apps/web/test/unit-tests/components/views/dialogs/UntrustedDeviceDialog-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/UntrustedDeviceDialog-test.tsx
deleted file mode 100644
index a9486ca35e..0000000000
--- a/apps/web/test/unit-tests/components/views/dialogs/UntrustedDeviceDialog-test.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * Copyright 2024 New Vector Ltd.
- *
- * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
- * Please see LICENSE files in the repository root for full details.
- */
-
-import React from "react";
-import { Device, type MatrixClient, User } from "matrix-js-sdk/src/matrix";
-import { render, screen } from "jest-matrix-react";
-
-import { stubClient } from "../../../../test-utils";
-import UntrustedDeviceDialog from "../../../../../src/components/views/dialogs/UntrustedDeviceDialog.tsx";
-
-describe("<UntrustedDeviceDialog />", () => {
-    let client: MatrixClient;
-    let user: User;
-    let device: Device;
-    const onFinished = jest.fn();
-
-    beforeEach(() => {
-        client = stubClient();
-        user = User.createUser("@alice:example.org", client);
-        user.setDisplayName("Alice");
-        device = new Device({ deviceId: "device_id", userId: user.userId, algorithms: [], keys: new Map() });
-    });
-
-    afterEach(() => {
-        onFinished.mockReset();
-    });
-
-    function renderComponent() {
-        return render(<UntrustedDeviceDialog user={user} device={device} onFinished={onFinished} />);
-    }
-
-    it("should display the dialog for the device of another user", () => {
-        const { asFragment } = renderComponent();
-        expect(asFragment()).toMatchSnapshot();
-    });
-
-    it("should display the dialog for the device of the current user", () => {
-        jest.spyOn(client, "getUserId").mockReturnValue(user.userId);
-
-        const { asFragment } = renderComponent();
-        expect(asFragment()).toMatchSnapshot();
-    });
-
-    it("should call onFinished without parameter when Done is clicked", () => {
-        renderComponent();
-        screen.getByRole("button", { name: "Done" }).click();
-        expect(onFinished).toHaveBeenCalledWith();
-    });
-
-    it("should call onFinished with sas when Interactively verify by emoji is clicked", () => {
-        renderComponent();
-        screen.getByRole("button", { name: "Interactively verify by emoji" }).click();
-        expect(onFinished).toHaveBeenCalledWith("sas");
-    });
-});
diff --git a/apps/web/test/unit-tests/components/views/dialogs/UserSettingsDialog-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/UserSettingsDialog-test.tsx
index cd04abfde7..aba3e2cdd5 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/UserSettingsDialog-test.tsx
+++ b/apps/web/test/unit-tests/components/views/dialogs/UserSettingsDialog-test.tsx
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type ReactElement } from "react";
 import { render, screen, waitFor } from "jest-matrix-react";
-import { mocked, type MockedObject } from "jest-mock";
+import { mocked, type MockedObject } from "jest-mock-vitest-adapter";
 import { ClientEvent, MatrixEvent, type MatrixClient } from "matrix-js-sdk/src/matrix";
 
 import SettingsStore, { type CallbackFn } from "../../../../../src/settings/SettingsStore";
@@ -26,8 +26,9 @@ import {
 } from "../../../../test-utils";
 import { UIFeature } from "../../../../../src/settings/UIFeature";
 import { SettingLevel } from "../../../../../src/settings/SettingLevel";
-import { SdkContextClass } from "../../../../../src/contexts/SDKContext";
+import { TestSDKContext } from "../../../TestSDKContext.ts";
 import { type FeatureSettingKey } from "../../../../../src/settings/Settings.tsx";
+import { makeDelegatedAuthMetadata } from "../../../../test-utils/auth.ts";
 
 mockPlatformPeg({
     supportsSpellCheckSettings: jest.fn().mockReturnValue(false),
@@ -48,6 +49,7 @@ jest.mock("../../../../../src/settings/SettingsStore", () => ({
     shouldHaveWarning: jest.fn(),
     disabledMessage: jest.fn(),
     settingIsOveriddenAtConfigLevel: jest.fn(),
+    doesSettingSupportLevel: jest.fn(),
 }));
 
 describe("<UserSettingsDialog />", () => {
@@ -55,7 +57,7 @@ describe("<UserSettingsDialog />", () => {
     const mockSettingsStore = mocked(SettingsStore);
     let mockClient!: MockedObject<MatrixClient>;
 
-    let sdkContext: SdkContextClass;
+    let sdkContext: TestSDKContext;
     const defaultProps = { onFinished: jest.fn() };
     const getComponent = (
         props: Partial<typeof defaultProps & { initialTabId?: UserTab; props: Record<string, any> }> = {},
@@ -71,9 +73,11 @@ describe("<UserSettingsDialog />", () => {
             getIgnoredUsers: jest.fn().mockResolvedValue([]),
             getPushers: jest.fn().mockResolvedValue([]),
             getProfileInfo: jest.fn().mockResolvedValue({}),
+            getMediaConfig: jest.fn(),
+            getAuthMetadata: jest.fn().mockResolvedValue(makeDelegatedAuthMetadata()),
         });
-        sdkContext = new SdkContextClass();
-        sdkContext.client = mockClient;
+        sdkContext = new TestSDKContext();
+        sdkContext._client = mockClient;
         mockSettingsStore.getValue.mockReturnValue(false);
         mockSettingsStore.getValueAt.mockReturnValue(false);
         mockSettingsStore.getFeatureSettingNames.mockReturnValue([]);
@@ -254,7 +258,7 @@ describe("<UserSettingsDialog />", () => {
     it("displays an indicator when user needs to set up recovery", async () => {
         // Initially, the user doesn't have secret storage, so it should display
         // an indicator.
-        mockClient.secretStorage.getDefaultKeyId.mockResolvedValue(null);
+        mocked(mockClient.secretStorage.getDefaultKeyId).mockResolvedValue(null);
 
         const { container } = render(getComponent());
 
@@ -267,7 +271,7 @@ describe("<UserSettingsDialog />", () => {
 
         // The user now has secret storage.  Trigger an update and check that
         // the indicator disappears.
-        mockClient.secretStorage.getDefaultKeyId.mockResolvedValue("foo");
+        mocked(mockClient.secretStorage.getDefaultKeyId).mockResolvedValue("foo");
         mockClient.emit(ClientEvent.AccountData, new MatrixEvent({ type: "m.secret_storage.default_key" }));
 
         await waitFor(() => {
diff --git a/apps/web/test/unit-tests/components/views/dialogs/VerificationRequestDialog-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/VerificationRequestDialog-test.tsx
index e019faec4a..b928031622 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/VerificationRequestDialog-test.tsx
+++ b/apps/web/test/unit-tests/components/views/dialogs/VerificationRequestDialog-test.tsx
@@ -19,8 +19,9 @@ import {
 } from "matrix-js-sdk/src/crypto-api";
 import { VerificationMethod } from "matrix-js-sdk/src/types";
 
-import { stubClient } from "../../../../test-utils";
+import { stubClient, withContexts } from "../../../../test-utils";
 import VerificationRequestDialog from "../../../../../src/components/views/dialogs/VerificationRequestDialog";
+import { SDKContextClass } from "../../../../../src/contexts/SDKContextClass";
 
 describe("VerificationRequestDialog", () => {
     function renderComponent(phase: VerificationPhase, method?: "emoji" | "qr"): ReturnType<typeof render> {
@@ -29,6 +30,7 @@ describe("VerificationRequestDialog", () => {
 
         return render(
             <VerificationRequestDialog onFinished={jest.fn()} member={member} verificationRequest={request} />,
+            withContexts({ sdkContext: SDKContextClass.instance }),
         );
     }
 
@@ -124,6 +126,7 @@ describe("VerificationRequestDialog", () => {
                 member={member}
                 verificationRequestPromise={requestPromise}
             />,
+            withContexts({ sdkContext: SDKContextClass.instance }),
         );
 
         // And wait for the component to mount, the promise to resolve and the component state to update
@@ -153,6 +156,7 @@ describe("VerificationRequestDialog", () => {
                 verificationRequest={request}
                 verificationRequestPromise={requestPromise}
             />,
+            withContexts({ sdkContext: SDKContextClass.instance }),
         );
 
         // And wait for the component to mount, the promise to resolve and the component state to update
@@ -173,7 +177,10 @@ describe("VerificationRequestDialog", () => {
         const member = User.createUser("@alice:example.org", stubClient());
         const request = createRequest(VerificationPhase.Unsent);
 
-        render(<VerificationRequestDialog onFinished={jest.fn()} member={member} verificationRequest={request} />);
+        render(
+            <VerificationRequestDialog onFinished={jest.fn()} member={member} verificationRequest={request} />,
+            withContexts({ sdkContext: SDKContextClass.instance }),
+        );
 
         // When I cancel the request (which changes phase and emits a Changed event)
         await act(async () => await request.cancel());
diff --git a/apps/web/test/unit-tests/components/views/dialogs/WidgetCapabilitiesPromptDialog-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/WidgetCapabilitiesPromptDialog-test.tsx
index 5abc5ed93b..86fde06999 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/WidgetCapabilitiesPromptDialog-test.tsx
+++ b/apps/web/test/unit-tests/components/views/dialogs/WidgetCapabilitiesPromptDialog-test.tsx
@@ -13,11 +13,6 @@ import WidgetCapabilitiesPromptDialog from "../../../../../src/components/views/
 import { stubClient } from "../../../../test-utils";
 
 describe("WidgetCapabilitiesPromptDialog", () => {
-    const mockWidget = {
-        id: "test-widget",
-        name: "Test Widget",
-    } as any;
-
     const onFinished = jest.fn();
 
     beforeEach(() => {
@@ -39,7 +34,6 @@ describe("WidgetCapabilitiesPromptDialog", () => {
             const { container } = render(
                 <WidgetCapabilitiesPromptDialog
                     requestedCapabilities={capabilities}
-                    widget={mockWidget}
                     widgetKind={WidgetKind.Room}
                     onFinished={onFinished}
                 />,
@@ -65,7 +59,6 @@ describe("WidgetCapabilitiesPromptDialog", () => {
             render(
                 <WidgetCapabilitiesPromptDialog
                     requestedCapabilities={capabilities}
-                    widget={mockWidget}
                     widgetKind={WidgetKind.Room}
                     onFinished={onFinished}
                 />,
@@ -85,7 +78,6 @@ describe("WidgetCapabilitiesPromptDialog", () => {
             const { container } = render(
                 <WidgetCapabilitiesPromptDialog
                     requestedCapabilities={capabilities}
-                    widget={mockWidget}
                     widgetKind={WidgetKind.Room}
                     onFinished={onFinished}
                 />,
@@ -104,7 +96,6 @@ describe("WidgetCapabilitiesPromptDialog", () => {
             const { container } = render(
                 <WidgetCapabilitiesPromptDialog
                     requestedCapabilities={capabilities}
-                    widget={mockWidget}
                     widgetKind={WidgetKind.Room}
                     onFinished={onFinished}
                 />,
@@ -120,7 +111,6 @@ describe("WidgetCapabilitiesPromptDialog", () => {
             const { container } = render(
                 <WidgetCapabilitiesPromptDialog
                     requestedCapabilities={capabilities}
-                    widget={mockWidget}
                     widgetKind={WidgetKind.Room}
                     onFinished={onFinished}
                 />,
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/AnalyticsLearnMoreDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/AnalyticsLearnMoreDialog-test.tsx.snap
index 12ee8850f0..68fa000f63 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/AnalyticsLearnMoreDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/AnalyticsLearnMoreDialog-test.tsx.snap
@@ -102,6 +102,7 @@ exports[`AnalyticsLearnMoreDialog should match snapshot 1`] = `
         class="mx_Dialog_buttons_row"
       >
         <button
+          class="cancel"
           data-testid="dialog-cancel-button"
           type="button"
         >
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/BugReportDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/BugReportDialog-test.tsx.snap
index d721676762..49d9a50548 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/BugReportDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/BugReportDialog-test.tsx.snap
@@ -47,6 +47,7 @@ exports[`BugReportDialog renders when the config only allows local downloads: lo
         class="mx_Dialog_buttons_row"
       >
         <button
+          class="cancel"
           data-testid="dialog-cancel-button"
           type="button"
         >
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap
index e828bd55fa..db2e62670f 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ChangelogDialog-test.tsx.snap
@@ -92,6 +92,7 @@ exports[`<ChangelogDialog /> should fetch github proxy url for each repo with ol
         class="mx_Dialog_buttons_row"
       >
         <button
+          class="cancel"
           data-testid="dialog-cancel-button"
           type="button"
         >
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmRejectInviteDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmRejectInviteDialog-test.tsx.snap
index 632eac5a6f..a61d0675dd 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmRejectInviteDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmRejectInviteDialog-test.tsx.snap
@@ -26,23 +26,23 @@ exports[`ConfirmRejectInviteDialog can reject with options selected 1`] = `
       </h1>
     </div>
     <form
-      class="_root_19upo_16"
+      class="_root_1o4d9_17"
     >
       <p>
         Are you sure you want to decline the invitation to join "foo"?
       </p>
       <div
-        class="_inline-field_19upo_32"
+        class="_inline-field_1o4d9_33"
       >
         <div
-          class="_inline-field-control_19upo_44"
+          class="_inline-field-control_1o4d9_45"
         >
           <div
             class="_container_udcm8_10"
           >
             <input
               class="_input_udcm8_24"
-              id="_r_b_"
+              id="react-use-id-1"
               role="switch"
               type="checkbox"
             />
@@ -52,34 +52,34 @@ exports[`ConfirmRejectInviteDialog can reject with options selected 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field-body_19upo_38"
+          class="_inline-field-body_1o4d9_39"
         >
           <label
-            class="_label_19upo_59"
-            for="_r_b_"
+            class="_label_1o4d9_60"
+            for="react-use-id-1"
           >
             Ignore user
           </label>
           <span
-            class="_message_19upo_85 _help-message_19upo_91"
-            id="radix-_r_d_"
+            class="_message_1o4d9_86 _help-message_1o4d9_92"
+            id="radix-react-use-id-2"
           >
             You will not see any messages or room invites from this user.
           </span>
         </div>
       </div>
       <div
-        class="_inline-field_19upo_32"
+        class="_inline-field_1o4d9_33"
       >
         <div
-          class="_inline-field-control_19upo_44"
+          class="_inline-field-control_1o4d9_45"
         >
           <div
             class="_container_udcm8_10"
           >
             <input
               class="_input_udcm8_24"
-              id="_r_e_"
+              id="react-use-id-3"
               role="switch"
               type="checkbox"
             />
@@ -89,17 +89,17 @@ exports[`ConfirmRejectInviteDialog can reject with options selected 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field-body_19upo_38"
+          class="_inline-field-body_1o4d9_39"
         >
           <label
-            class="_label_19upo_59"
-            for="_r_e_"
+            class="_label_1o4d9_60"
+            for="react-use-id-3"
           >
             Report room
           </label>
           <span
-            class="_message_19upo_85 _help-message_19upo_91"
-            id="radix-_r_g_"
+            class="_message_1o4d9_86 _help-message_1o4d9_92"
+            id="radix-react-use-id-4"
           >
             Report this room to your account provider.
           </span>
@@ -107,10 +107,10 @@ exports[`ConfirmRejectInviteDialog can reject with options selected 1`] = `
       </div>
       <div
         aria-disabled="false"
-        class="_field_19upo_26"
+        class="_field_1o4d9_27"
       >
         <label
-          class="_label_19upo_59"
+          class="_label_1o4d9_60"
           for="mx_DeclineAndBlockInviteDialog_reason"
         >
           Reason
@@ -131,6 +131,7 @@ exports[`ConfirmRejectInviteDialog can reject with options selected 1`] = `
           class="mx_Dialog_buttons_row"
         >
           <button
+            class="cancel"
             data-testid="dialog-cancel-button"
             type="button"
           >
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
index c256ece1cb..61c4c94115 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ConfirmUserActionDialog-test.tsx.snap
@@ -66,6 +66,7 @@ exports[`ConfirmUserActionDialog renders 1`] = `
         class="mx_Dialog_buttons_row"
       >
         <button
+          class="cancel"
           data-testid="dialog-cancel-button"
           type="button"
         >
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/CreateRoomDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/CreateRoomDialog-test.tsx.snap
index a74186c6ac..e2ef3ee968 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/CreateRoomDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/CreateRoomDialog-test.tsx.snap
@@ -28,7 +28,7 @@ exports[`<CreateRoomDialog /> for a private room should create a private room 1`
       class="mx_Dialog_content"
     >
       <form
-        class="_root_19upo_16"
+        class="_root_1o4d9_17"
       >
         <div
           class="mx_Field mx_Field_input mx_CreateRoomDialog_name"
@@ -116,10 +116,10 @@ exports[`<CreateRoomDialog /> for a private room should create a private room 1`
           </p>
         </div>
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
@@ -127,7 +127,7 @@ exports[`<CreateRoomDialog /> for a private room should create a private room 1`
               <input
                 checked=""
                 class="_input_udcm8_24"
-                id="_r_72_"
+                id="react-use-id-1"
                 role="switch"
                 type="checkbox"
               />
@@ -137,17 +137,17 @@ exports[`<CreateRoomDialog /> for a private room should create a private room 1`
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
-              for="_r_72_"
+              class="_label_1o4d9_60"
+              for="react-use-id-1"
             >
               Enable end-to-end encryption
             </label>
             <span
-              class="_message_19upo_85 _help-message_19upo_91"
-              id="radix-_r_74_"
+              class="_message_1o4d9_86 _help-message_1o4d9_92"
+              id="radix-react-use-id-2"
             >
               You can't disable this later. Bridges & most bots won't work yet.
             </span>
@@ -162,17 +162,17 @@ exports[`<CreateRoomDialog /> for a private room should create a private room 1`
             Show advanced
           </summary>
           <div
-            class="_inline-field_19upo_32"
+            class="_inline-field_1o4d9_33"
           >
             <div
-              class="_inline-field-control_19upo_44"
+              class="_inline-field-control_1o4d9_45"
             >
               <div
                 class="_container_udcm8_10"
               >
                 <input
                   class="_input_udcm8_24"
-                  id="_r_75_"
+                  id="react-use-id-3"
                   role="switch"
                   type="checkbox"
                 />
@@ -182,17 +182,17 @@ exports[`<CreateRoomDialog /> for a private room should create a private room 1`
               </div>
             </div>
             <div
-              class="_inline-field-body_19upo_38"
+              class="_inline-field-body_1o4d9_39"
             >
               <label
-                class="_label_19upo_59"
-                for="_r_75_"
+                class="_label_1o4d9_60"
+                for="react-use-id-3"
               >
                 Block anyone not part of server.org from ever joining this room.
               </label>
               <span
-                class="_message_19upo_85 _help-message_19upo_91"
-                id="radix-_r_77_"
+                class="_message_1o4d9_86 _help-message_1o4d9_92"
+                id="radix-react-use-id-4"
               >
                 You might enable this if the room will only be used for collaborating with internal teams on your homeserver. This cannot be changed later.
               </span>
@@ -208,6 +208,7 @@ exports[`<CreateRoomDialog /> for a private room should create a private room 1`
         class="mx_Dialog_buttons_row"
       >
         <button
+          class="cancel"
           data-testid="dialog-cancel-button"
           type="button"
         >
@@ -277,7 +278,7 @@ exports[`<CreateRoomDialog /> for a private room should render not the advanced
       class="mx_Dialog_content"
     >
       <form
-        class="_root_19upo_16"
+        class="_root_1o4d9_17"
       >
         <div
           class="mx_Field mx_Field_input mx_CreateRoomDialog_name"
@@ -365,10 +366,10 @@ exports[`<CreateRoomDialog /> for a private room should render not the advanced
           </p>
         </div>
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
@@ -376,7 +377,7 @@ exports[`<CreateRoomDialog /> for a private room should render not the advanced
               <input
                 checked=""
                 class="_input_udcm8_24"
-                id="_r_7k_"
+                id="react-use-id-1"
                 role="switch"
                 type="checkbox"
               />
@@ -386,34 +387,34 @@ exports[`<CreateRoomDialog /> for a private room should render not the advanced
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
-              for="_r_7k_"
+              class="_label_1o4d9_60"
+              for="react-use-id-1"
             >
               Enable end-to-end encryption
             </label>
             <span
-              class="_message_19upo_85 _help-message_19upo_91"
-              id="radix-_r_7m_"
+              class="_message_1o4d9_86 _help-message_1o4d9_92"
+              id="radix-react-use-id-2"
             >
               You can't disable this later. Bridges & most bots won't work yet.
             </span>
           </div>
         </div>
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
             >
               <input
                 class="_input_udcm8_24"
-                id="_r_7n_"
+                id="react-use-id-3"
                 role="switch"
                 type="checkbox"
               />
@@ -423,17 +424,17 @@ exports[`<CreateRoomDialog /> for a private room should render not the advanced
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
-              for="_r_7n_"
+              class="_label_1o4d9_60"
+              for="react-use-id-3"
             >
               Encrypt state events
             </label>
             <span
-              class="_message_19upo_85 _help-message_19upo_91"
-              id="radix-_r_7p_"
+              class="_message_1o4d9_86 _help-message_1o4d9_92"
+              id="radix-react-use-id-4"
             >
               Enables experimental support for encrypting state events, which hides metadata such as room names and topics from the server. This metadata will also be hidden from people joining rooms later, and people whose clients do not support MSC4362.
             </span>
@@ -448,6 +449,7 @@ exports[`<CreateRoomDialog /> for a private room should render not the advanced
         class="mx_Dialog_buttons_row"
       >
         <button
+          class="cancel"
           data-testid="dialog-cancel-button"
           type="button"
         >
@@ -517,7 +519,7 @@ exports[`<CreateRoomDialog /> for a private room when the state encryption labs
       class="mx_Dialog_content"
     >
       <form
-        class="_root_19upo_16"
+        class="_root_1o4d9_17"
       >
         <div
           class="mx_Field mx_Field_input mx_CreateRoomDialog_name"
@@ -607,10 +609,10 @@ exports[`<CreateRoomDialog /> for a private room when the state encryption labs
           </p>
         </div>
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
@@ -618,7 +620,7 @@ exports[`<CreateRoomDialog /> for a private room when the state encryption labs
               <input
                 checked=""
                 class="_input_udcm8_24"
-                id="_r_86_"
+                id="react-use-id-1"
                 role="switch"
                 type="checkbox"
               />
@@ -628,34 +630,34 @@ exports[`<CreateRoomDialog /> for a private room when the state encryption labs
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
-              for="_r_86_"
+              class="_label_1o4d9_60"
+              for="react-use-id-1"
             >
               Enable end-to-end encryption
             </label>
             <span
-              class="_message_19upo_85 _help-message_19upo_91"
-              id="radix-_r_88_"
+              class="_message_1o4d9_86 _help-message_1o4d9_92"
+              id="radix-react-use-id-2"
             >
               You can't disable this later. Bridges & most bots won't work yet.
             </span>
           </div>
         </div>
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
             >
               <input
                 class="_input_udcm8_24"
-                id="_r_89_"
+                id="react-use-id-3"
                 role="switch"
                 type="checkbox"
               />
@@ -665,17 +667,17 @@ exports[`<CreateRoomDialog /> for a private room when the state encryption labs
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
-              for="_r_89_"
+              class="_label_1o4d9_60"
+              for="react-use-id-3"
             >
               Encrypt state events
             </label>
             <span
-              class="_message_19upo_85 _help-message_19upo_91"
-              id="radix-_r_8b_"
+              class="_message_1o4d9_86 _help-message_1o4d9_92"
+              id="radix-react-use-id-4"
             >
               Enables experimental support for encrypting state events, which hides metadata such as room names and topics from the server. This metadata will also be hidden from people joining rooms later, and people whose clients do not support MSC4362.
             </span>
@@ -690,6 +692,7 @@ exports[`<CreateRoomDialog /> for a private room when the state encryption labs
         class="mx_Dialog_buttons_row"
       >
         <button
+          class="cancel"
           data-testid="dialog-cancel-button"
           type="button"
         >
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/CreateSectionDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/CreateSectionDialog-test.tsx.snap
index 3308c5a0bb..b4e994f603 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/CreateSectionDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/CreateSectionDialog-test.tsx.snap
@@ -34,21 +34,21 @@ exports[`CreateSectionDialog renders the dialog 1`] = `
         Sections are only for you
       </span>
       <form
-        class="_root_19upo_16 mx_CreateSectionDialog_form"
+        class="_root_1o4d9_17 mx_CreateSectionDialog_form"
       >
         <div
-          class="_field_19upo_26"
+          class="_field_1o4d9_27"
         >
           <label
-            class="_label_19upo_59"
-            for="radix-_r_0_"
+            class="_label_1o4d9_60"
+            for="radix-react-use-id-1"
           >
              
             Section name
           </label>
           <input
             class="_control_d83jn_10"
-            id="radix-_r_0_"
+            id="radix-react-use-id-1"
             name="sectionName"
             required=""
             title=""
@@ -64,6 +64,7 @@ exports[`CreateSectionDialog renders the dialog 1`] = `
         class="mx_Dialog_buttons_row"
       >
         <button
+          class="cancel"
           data-testid="dialog-cancel-button"
           type="button"
         >
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
index 28fe2c81d2..169d0f0f7e 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
@@ -34,26 +34,32 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
     >
       Room ID: !id
       <button
-        aria-describedby="_r_2_"
-        aria-label="Copy"
-        class="mx_AccessibleButton mx_CopyableText_copyButton"
+        aria-labelledby="react-use-id-1"
+        class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+        data-kind="primary"
         role="button"
+        style="--cpd-icon-button-size: 28px; padding: 4px;"
         tabindex="0"
       >
-        <svg
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
+        <div
+          class="_indicator-icon_147l5_17"
+          style="--cpd-icon-button-size: 100%;"
         >
-          <path
-            d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-          />
-          <path
-            d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-          />
-        </svg>
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+            />
+            <path
+              d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+            />
+          </svg>
+        </div>
       </button>
     </span>
     <div
@@ -70,41 +76,49 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
         </h2>
         <button
           class="mx_DevTools_button"
+          type="button"
         >
           Send custom timeline event
         </button>
         <button
           class="mx_DevTools_button"
+          type="button"
         >
           Explore room state
         </button>
         <button
           class="mx_DevTools_button"
+          type="button"
         >
           Explore room account data
         </button>
         <button
           class="mx_DevTools_button"
+          type="button"
         >
           View servers in room
         </button>
         <button
           class="mx_DevTools_button"
+          type="button"
         >
           Notifications debug
         </button>
         <button
           class="mx_DevTools_button"
+          type="button"
         >
           Active Widgets
         </button>
         <button
           class="mx_DevTools_button"
+          type="button"
         >
           Users
         </button>
         <button
           class="mx_DevTools_button"
+          type="button"
         >
           Explore sticky state
         </button>
@@ -117,27 +131,31 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
         </h2>
         <button
           class="mx_DevTools_button"
+          type="button"
         >
           Explore account data
         </button>
         <button
           class="mx_DevTools_button"
+          type="button"
         >
           Settings explorer
         </button>
         <button
           class="mx_DevTools_button"
+          type="button"
         >
           Server info
         </button>
         <button
           class="mx_DevTools_button"
+          type="button"
         >
           End-to-end encryption
         </button>
       </div>
       <form
-        class="_root_19upo_16 mx_DevTools_toggleForm"
+        class="_root_1o4d9_17 mx_DevTools_toggleForm"
       >
         <h2
           class="mx_DevTools_toolHeading"
@@ -145,10 +163,10 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
           Options
         </h2>
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
@@ -165,10 +183,10 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
+              class="_label_1o4d9_60"
               for="mx_SettingsFlag_vY7Q4uEh9K38"
             >
               Developer mode
@@ -176,10 +194,10 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
@@ -196,10 +214,10 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
+              class="_label_1o4d9_60"
               for="mx_SettingsFlag_QgU2PomxwKpa"
             >
               Show hidden events in timeline
@@ -207,10 +225,10 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
@@ -227,10 +245,10 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
+              class="_label_1o4d9_60"
               for="mx_SettingsFlag_6hpi3YEetmBG"
             >
               Enable widget screenshots on supported widgets
@@ -238,10 +256,10 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
@@ -258,17 +276,17 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
+              class="_label_1o4d9_60"
               for="mx_SettingsFlag_4yVCeEefiPqp"
             >
               Disable bandwidth-heavy features
             </label>
             <span
-              class="_message_19upo_85 _help-message_19upo_91"
-              id="radix-_r_c_"
+              class="_message_1o4d9_86 _help-message_1o4d9_92"
+              id="radix-react-use-id-2"
             >
               <span>
                 <span
@@ -283,14 +301,14 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
         </div>
       </form>
       <form
-        class="_root_19upo_16"
+        class="_root_1o4d9_17"
       >
         <div
-          class="_field_19upo_26"
+          class="_field_1o4d9_27"
         >
           <label
-            class="_label_19upo_59"
-            for="radix-_r_d_"
+            class="_label_1o4d9_60"
+            for="radix-react-use-id-3"
           >
             Element Call URL
           </label>
@@ -299,7 +317,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
           >
             <input
               class="_control_d83jn_10"
-              id="radix-_r_d_"
+              id="radix-react-use-id-3"
               name="input"
               title=""
               value=""
@@ -311,7 +329,9 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
     <div
       class="mx_Dialog_buttons"
     >
-      <button>
+      <button
+        type="button"
+      >
         Back
       </button>
     </div>
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
index 3186e05330..bde8430373 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
@@ -164,13 +164,13 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
       </span>
     </div>
     <form
-      class="_root_19upo_16"
+      class="_root_1o4d9_17"
     >
       <div
-        class="_inline-field_19upo_32 mx_ExportDialog_attachments-checkbox"
+        class="_inline-field_1o4d9_33 mx_ExportDialog_attachments-checkbox"
       >
         <div
-          class="_inline-field-control_19upo_44"
+          class="_inline-field-control_1o4d9_45"
         >
           <div
             class="_container_153f2_10"
@@ -199,10 +199,10 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field-body_19upo_38"
+          class="_inline-field-body_1o4d9_39"
         >
           <label
-            class="_label_19upo_59"
+            class="_label_1o4d9_60"
             for="include-attachments"
           >
             Include Attachments
@@ -218,6 +218,7 @@ exports[`<ExportDialog /> renders export dialog 1`] = `
       class="mx_Dialog_buttons_row"
     >
       <button
+        class="cancel"
         data-testid="dialog-cancel-button"
         type="button"
       >
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/IntegrationsDisabledDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/IntegrationsDisabledDialog-test.tsx.snap
index 699e4f745a..93caafe5a1 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/IntegrationsDisabledDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/IntegrationsDisabledDialog-test.tsx.snap
@@ -38,6 +38,7 @@ exports[`<IntegrationsDisabledDialog /> should render as expected 1`] = `
         class="mx_Dialog_buttons_row"
       >
         <button
+          class="cancel"
           data-testid="dialog-cancel-button"
           type="button"
         >
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/InviteProgressBody-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/InviteProgressBody-test.tsx.snap
index e92e655860..1a6683ab90 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/InviteProgressBody-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/InviteProgressBody-test.tsx.snap
@@ -15,7 +15,7 @@ exports[`InviteProgressBody should match snapshot 1`] = `
         fill="currentColor"
         height="1em"
         role="progressbar"
-        style="width: 20px; height: 20px;"
+        style="width: 32px; height: 32px;"
         viewBox="0 0 24 24"
         width="1em"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap
index 1951293f56..a7bc338de0 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/LogoutDialog-test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`LogoutDialog Prompts user to go to settings if there is a backup on the server 1`] = `
+exports[`LogoutDialog Prompts user to set up recovery if there is a backup on the server but no secret storage 1`] = `
 <div>
   <div
     data-focus-guard="true"
@@ -10,71 +10,123 @@ exports[`LogoutDialog Prompts user to go to settings if there is a backup on the
   <div
     aria-describedby="mx_Dialog_content"
     aria-labelledby="mx_BaseDialog_title"
-    class="mx_Dialog_fixedWidth"
+    class="mx_LogoutDialog mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
     tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
+    />
+    <div
+      class="mx_EncryptionCard mx_EncryptionCard_noBorder"
     >
-      <h1
-        class="mx_Heading_h3 mx_Dialog_title"
-        id="mx_BaseDialog_title"
-      >
-        You'll lose access to your encrypted messages
-      </h1>
-    </div>
-    <div>
       <div
-        class="mx_Dialog_content"
-        id="mx_Dialog_content"
+        class="mx_EncryptionCard_header"
       >
-        <div>
-          <p>
-            Encrypted messages are secured with end-to-end encryption. Only you and the recipient(s) have the keys to read these messages.
-          </p>
-          <p>
-            When you remove this device you won't be able to read encrypted messages unless you have the keys for them on your other devices, or backed them up to the server.
-          </p>
-          <p>
-            Back up your keys before removing this device to avoid losing them.
-          </p>
-        </div>
-      </div>
-      <div
-        class="mx_Dialog_buttons"
-      >
-        <span
-          class="mx_Dialog_buttons_row"
+        <div
+          class="_big-icon_1ssbv_8"
+          data-kind="critical"
+          data-size="lg"
         >
-          <button>
-            I don't want my encrypted messages
-          </button>
-          <button
-            class="mx_Dialog_primary"
-            data-testid="dialog-primary-button"
-            type="button"
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            Go to Settings
-          </button>
-        </span>
-      </div>
-      <details>
-        <summary
-          class="mx_LogoutDialog_ExportKeyAdvanced"
+            <path
+              d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+            />
+          </svg>
+        </div>
+        <h2
+          class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
         >
-          Advanced
-        </summary>
-        <p>
-          <button>
-            Manually export keys
-          </button>
+          You're about to lose access to your encrypted chats
+        </h2>
+      </div>
+      <div
+        class="_flex_4dswl_9 mx_EncryptionCard_emphasisedContent"
+        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <p
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
+        >
+          This is your only device. If you remove it you'll need a recovery key in order to confirm your digital identity and restore your encrypted chats the next time you sign in.
         </p>
-      </details>
+        <a
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
+          href="https://element.io/en/help#encryption16"
+          target="_blank"
+        >
+          Learn more
+           
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5 3h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2"
+            />
+            <path
+              d="M15 3h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L17.586 5H15a1 1 0 1 1 0-2"
+            />
+          </svg>
+        </a>
+      </div>
+      <div
+        class="mx_EncryptionCard_buttons"
+      >
+        <button
+          class="_button_1nw83_8 _has-icon_1nw83_60"
+          data-kind="primary"
+          data-size="lg"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 5 12q0-.825.588-1.412A1.93 1.93 0 0 1 7 10q.824 0 1.412.588Q9 11.175 9 12t-.588 1.412A1.93 1.93 0 0 1 7 14m0 4q-2.5 0-4.25-1.75T1 12t1.75-4.25T7 6q1.676 0 3.037.825A6.2 6.2 0 0 1 12.2 9h8.375q.2 0 .387.075.188.075.338.225l2 2q.15.15.212.325.063.175.063.375t-.062.375a.9.9 0 0 1-.213.325l-3.175 3.175a1 1 0 0 1-.3.2q-.175.075-.35.1a.8.8 0 0 1-.35-.025.9.9 0 0 1-.325-.175L17.5 15l-1.425 1.075a.95.95 0 0 1-.887.15.9.9 0 0 1-.288-.15L13.375 15H12.2a6.2 6.2 0 0 1-2.162 2.175Q8.675 18 7 18m0-2q1.4 0 2.463-.85A4.03 4.03 0 0 0 10.875 13H14l1.45 1.025L17.5 12.5l1.775 1.375L21.15 12l-1-1h-9.275a4.03 4.03 0 0 0-1.412-2.15Q8.4 8 7 8 5.35 8 4.175 9.175T3 12t1.175 2.825T7 16"
+            />
+          </svg>
+          Get recovery key
+        </button>
+        <button
+          class="_button_1nw83_8 _has-icon_1nw83_60 _destructive_1nw83_110"
+          data-kind="tertiary"
+          data-size="lg"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9 12.031q0-.424.288-.712A.97.97 0 0 1 10 11.03h7.15l-1.875-1.875a.96.96 0 0 1-.3-.7q0-.4.325-.725a.93.93 0 0 1 .712-.287.98.98 0 0 1 .688.287l3.6 3.6q.15.15.212.325.063.175.063.375 0 .201-.062.375a.9.9 0 0 1-.213.325l-3.6 3.6q-.3.3-.712.288a.98.98 0 0 1-.688-.288 1.02 1.02 0 0 1-.312-.712.93.93 0 0 1 .287-.713l1.875-1.875H10a.97.97 0 0 1-.712-.287A.97.97 0 0 1 9 12.03m-6-7q0-.824.588-1.412A1.93 1.93 0 0 1 5 3.03h6q.424 0 .713.288.287.287.287.712t-.287.713A.97.97 0 0 1 11 5.03H5v14h6q.424 0 .713.288.287.287.287.712t-.287.713a.97.97 0 0 1-.713.287H5q-.824 0-1.412-.587A1.93 1.93 0 0 1 3 19.03z"
+            />
+          </svg>
+          Remove this device anyway
+        </button>
+      </div>
     </div>
     <div
-      aria-describedby="_r_q_"
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
@@ -101,7 +153,7 @@ exports[`LogoutDialog Prompts user to go to settings if there is a backup on the
 </div>
 `;
 
-exports[`LogoutDialog Prompts user to go to settings if there is no backup on the server 1`] = `
+exports[`LogoutDialog Prompts user to set up recovery if there is no backup on the server 1`] = `
 <div>
   <div
     data-focus-guard="true"
@@ -111,71 +163,276 @@ exports[`LogoutDialog Prompts user to go to settings if there is no backup on th
   <div
     aria-describedby="mx_Dialog_content"
     aria-labelledby="mx_BaseDialog_title"
-    class="mx_Dialog_fixedWidth"
+    class="mx_LogoutDialog mx_Dialog_fixedWidth"
     data-focus-lock-disabled="false"
     role="dialog"
     tabindex="-1"
   >
     <div
       class="mx_Dialog_header"
+    />
+    <div
+      class="mx_EncryptionCard mx_EncryptionCard_noBorder"
     >
-      <h1
-        class="mx_Heading_h3 mx_Dialog_title"
-        id="mx_BaseDialog_title"
-      >
-        You'll lose access to your encrypted messages
-      </h1>
-    </div>
-    <div>
       <div
-        class="mx_Dialog_content"
-        id="mx_Dialog_content"
+        class="mx_EncryptionCard_header"
       >
-        <div>
-          <p>
-            Encrypted messages are secured with end-to-end encryption. Only you and the recipient(s) have the keys to read these messages.
-          </p>
-          <p>
-            When you remove this device you won't be able to read encrypted messages unless you have the keys for them on your other devices, or backed them up to the server.
-          </p>
-          <p>
-            Back up your keys before removing this device to avoid losing them.
-          </p>
-        </div>
-      </div>
-      <div
-        class="mx_Dialog_buttons"
-      >
-        <span
-          class="mx_Dialog_buttons_row"
+        <div
+          class="_big-icon_1ssbv_8"
+          data-kind="critical"
+          data-size="lg"
         >
-          <button>
-            I don't want my encrypted messages
-          </button>
-          <button
-            class="mx_Dialog_primary"
-            data-testid="dialog-primary-button"
-            type="button"
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            Go to Settings
-          </button>
-        </span>
-      </div>
-      <details>
-        <summary
-          class="mx_LogoutDialog_ExportKeyAdvanced"
+            <path
+              d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+            />
+          </svg>
+        </div>
+        <h2
+          class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
         >
-          Advanced
-        </summary>
-        <p>
-          <button>
-            Manually export keys
-          </button>
+          You're about to lose access to your encrypted chats
+        </h2>
+      </div>
+      <div
+        class="_flex_4dswl_9 mx_EncryptionCard_emphasisedContent"
+        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <p
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
+        >
+          This is your only device. If you remove it you'll need a recovery key in order to confirm your digital identity and restore your encrypted chats the next time you sign in.
         </p>
-      </details>
+        <a
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
+          href="https://element.io/en/help#encryption16"
+          target="_blank"
+        >
+          Learn more
+           
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5 3h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2"
+            />
+            <path
+              d="M15 3h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L17.586 5H15a1 1 0 1 1 0-2"
+            />
+          </svg>
+        </a>
+      </div>
+      <div
+        class="mx_EncryptionCard_buttons"
+      >
+        <button
+          class="_button_1nw83_8 _has-icon_1nw83_60"
+          data-kind="primary"
+          data-size="lg"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 5 12q0-.825.588-1.412A1.93 1.93 0 0 1 7 10q.824 0 1.412.588Q9 11.175 9 12t-.588 1.412A1.93 1.93 0 0 1 7 14m0 4q-2.5 0-4.25-1.75T1 12t1.75-4.25T7 6q1.676 0 3.037.825A6.2 6.2 0 0 1 12.2 9h8.375q.2 0 .387.075.188.075.338.225l2 2q.15.15.212.325.063.175.063.375t-.062.375a.9.9 0 0 1-.213.325l-3.175 3.175a1 1 0 0 1-.3.2q-.175.075-.35.1a.8.8 0 0 1-.35-.025.9.9 0 0 1-.325-.175L17.5 15l-1.425 1.075a.95.95 0 0 1-.887.15.9.9 0 0 1-.288-.15L13.375 15H12.2a6.2 6.2 0 0 1-2.162 2.175Q8.675 18 7 18m0-2q1.4 0 2.463-.85A4.03 4.03 0 0 0 10.875 13H14l1.45 1.025L17.5 12.5l1.775 1.375L21.15 12l-1-1h-9.275a4.03 4.03 0 0 0-1.412-2.15Q8.4 8 7 8 5.35 8 4.175 9.175T3 12t1.175 2.825T7 16"
+            />
+          </svg>
+          Get recovery key
+        </button>
+        <button
+          class="_button_1nw83_8 _has-icon_1nw83_60 _destructive_1nw83_110"
+          data-kind="tertiary"
+          data-size="lg"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9 12.031q0-.424.288-.712A.97.97 0 0 1 10 11.03h7.15l-1.875-1.875a.96.96 0 0 1-.3-.7q0-.4.325-.725a.93.93 0 0 1 .712-.287.98.98 0 0 1 .688.287l3.6 3.6q.15.15.212.325.063.175.063.375 0 .201-.062.375a.9.9 0 0 1-.213.325l-3.6 3.6q-.3.3-.712.288a.98.98 0 0 1-.688-.288 1.02 1.02 0 0 1-.312-.712.93.93 0 0 1 .287-.713l1.875-1.875H10a.97.97 0 0 1-.712-.287A.97.97 0 0 1 9 12.03m-6-7q0-.824.588-1.412A1.93 1.93 0 0 1 5 3.03h6q.424 0 .713.288.287.287.287.712t-.287.713A.97.97 0 0 1 11 5.03H5v14h6q.424 0 .713.288.287.287.287.712t-.287.713a.97.97 0 0 1-.713.287H5q-.824 0-1.412-.587A1.93 1.93 0 0 1 3 19.03z"
+            />
+          </svg>
+          Remove this device anyway
+        </button>
+      </div>
+    </div>
+    <div
+      aria-label="Close dialog"
+      class="mx_AccessibleButton mx_Dialog_cancelButton"
+      role="button"
+      tabindex="0"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</div>
+`;
+
+exports[`LogoutDialog Prompts user to set up recovery if there is no backup on the server, and the user has other unverified/dehydrated devices 1`] = `
+<div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-describedby="mx_Dialog_content"
+    aria-labelledby="mx_BaseDialog_title"
+    class="mx_LogoutDialog mx_Dialog_fixedWidth"
+    data-focus-lock-disabled="false"
+    role="dialog"
+    tabindex="-1"
+  >
+    <div
+      class="mx_Dialog_header"
+    />
+    <div
+      class="mx_EncryptionCard mx_EncryptionCard_noBorder"
+    >
+      <div
+        class="mx_EncryptionCard_header"
+      >
+        <div
+          class="_big-icon_1ssbv_8"
+          data-kind="critical"
+          data-size="lg"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+            />
+          </svg>
+        </div>
+        <h2
+          class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+        >
+          You're about to lose access to your encrypted chats
+        </h2>
+      </div>
+      <div
+        class="_flex_4dswl_9 mx_EncryptionCard_emphasisedContent"
+        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <p
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
+        >
+          This is your only device. If you remove it you'll need a recovery key in order to confirm your digital identity and restore your encrypted chats the next time you sign in.
+        </p>
+        <a
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
+          href="https://element.io/en/help#encryption16"
+          target="_blank"
+        >
+          Learn more
+           
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5 3h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2"
+            />
+            <path
+              d="M15 3h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L17.586 5H15a1 1 0 1 1 0-2"
+            />
+          </svg>
+        </a>
+      </div>
+      <div
+        class="mx_EncryptionCard_buttons"
+      >
+        <button
+          class="_button_1nw83_8 _has-icon_1nw83_60"
+          data-kind="primary"
+          data-size="lg"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 5 12q0-.825.588-1.412A1.93 1.93 0 0 1 7 10q.824 0 1.412.588Q9 11.175 9 12t-.588 1.412A1.93 1.93 0 0 1 7 14m0 4q-2.5 0-4.25-1.75T1 12t1.75-4.25T7 6q1.676 0 3.037.825A6.2 6.2 0 0 1 12.2 9h8.375q.2 0 .387.075.188.075.338.225l2 2q.15.15.212.325.063.175.063.375t-.062.375a.9.9 0 0 1-.213.325l-3.175 3.175a1 1 0 0 1-.3.2q-.175.075-.35.1a.8.8 0 0 1-.35-.025.9.9 0 0 1-.325-.175L17.5 15l-1.425 1.075a.95.95 0 0 1-.887.15.9.9 0 0 1-.288-.15L13.375 15H12.2a6.2 6.2 0 0 1-2.162 2.175Q8.675 18 7 18m0-2q1.4 0 2.463-.85A4.03 4.03 0 0 0 10.875 13H14l1.45 1.025L17.5 12.5l1.775 1.375L21.15 12l-1-1h-9.275a4.03 4.03 0 0 0-1.412-2.15Q8.4 8 7 8 5.35 8 4.175 9.175T3 12t1.175 2.825T7 16"
+            />
+          </svg>
+          Get recovery key
+        </button>
+        <button
+          class="_button_1nw83_8 _has-icon_1nw83_60 _destructive_1nw83_110"
+          data-kind="tertiary"
+          data-size="lg"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9 12.031q0-.424.288-.712A.97.97 0 0 1 10 11.03h7.15l-1.875-1.875a.96.96 0 0 1-.3-.7q0-.4.325-.725a.93.93 0 0 1 .712-.287.98.98 0 0 1 .688.287l3.6 3.6q.15.15.212.325.063.175.063.375 0 .201-.062.375a.9.9 0 0 1-.213.325l-3.6 3.6q-.3.3-.712.288a.98.98 0 0 1-.688-.288 1.02 1.02 0 0 1-.312-.712.93.93 0 0 1 .287-.713l1.875-1.875H10a.97.97 0 0 1-.712-.287A.97.97 0 0 1 9 12.03m-6-7q0-.824.588-1.412A1.93 1.93 0 0 1 5 3.03h6q.424 0 .713.288.287.287.287.712t-.287.713A.97.97 0 0 1 11 5.03H5v14h6q.424 0 .713.288.287.287.287.712t-.287.713a.97.97 0 0 1-.713.287H5q-.824 0-1.412-.587A1.93 1.93 0 0 1 3 19.03z"
+            />
+          </svg>
+          Remove this device anyway
+        </button>
+      </div>
     </div>
     <div
-      aria-describedby="_r_10_"
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
@@ -240,6 +497,7 @@ exports[`LogoutDialog shows a regular dialog when crypto is disabled 1`] = `
         class="mx_Dialog_buttons_row"
       >
         <button
+          class="cancel"
           data-testid="dialog-cancel-button"
           type="button"
         >
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
index c9f25e3b25..fa0c276705 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ManageRestrictedJoinRuleDialog-test.tsx.snap
@@ -63,7 +63,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
       </div>
     </div>
     <div
-      class="mx_AutoHideScrollbar mx_ManageRestrictedJoinRuleDialog_content"
+      class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ManageRestrictedJoinRuleDialog_content"
       tabindex="-1"
     >
       <div
@@ -76,19 +76,19 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
           class="mx_ManageRestrictedJoinRuleDialog_entry"
         >
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
-              class="_inline-field_19upo_32"
+              class="_inline-field_1o4d9_33"
             >
               <div
-                class="_inline-field-control_19upo_44"
+                class="_inline-field-control_1o4d9_45"
               >
                 <div
                   class="_container_153f2_10"
                 >
                   <input
-                    aria-describedby="_r_5_"
+                    aria-describedby="react-use-id-1"
                     class="_input_153f2_18"
                     id="checkbox_vY7Q4uEh9K"
                     type="checkbox"
@@ -112,10 +112,10 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
                 </div>
               </div>
               <div
-                class="_inline-field-body_19upo_38"
+                class="_inline-field-body_1o4d9_39"
               >
                 <label
-                  class="_label_19upo_59"
+                  class="_label_1o4d9_60"
                   for="checkbox_vY7Q4uEh9K"
                 >
                   <div>
@@ -137,8 +137,8 @@ exports[`<ManageRestrictedJoinRuleDialog /> should list spaces which are not par
                   </div>
                 </label>
                 <span
-                  class="_message_19upo_85 _help-message_19upo_91"
-                  id="_r_5_"
+                  class="_message_1o4d9_86 _help-message_1o4d9_92"
+                  id="react-use-id-1"
                 >
                   0 members
                 </span>
@@ -276,7 +276,7 @@ exports[`<ManageRestrictedJoinRuleDialog /> should render empty state 1`] = `
       </div>
     </div>
     <div
-      class="mx_AutoHideScrollbar mx_ManageRestrictedJoinRuleDialog_content"
+      class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ManageRestrictedJoinRuleDialog_content"
       tabindex="-1"
     >
       <span
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap
index 9d0a049083..9fc03b1c52 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ManualDeviceKeyVerificationDialog-test.tsx.snap
@@ -78,6 +78,7 @@ exports[`ManualDeviceKeyVerificationDialog should render correctly 1`] = `
         class="mx_Dialog_buttons_row"
       >
         <button
+          class="cancel"
           data-testid="dialog-cancel-button"
           type="button"
         >
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
index 506f247626..cfea2f22d2 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap
@@ -25,7 +25,7 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
       </h1>
     </div>
     <div
-      class="mx_AutoHideScrollbar mx_ScrollPanel mx_MessageEditHistoryDialog_scrollPanel"
+      class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel mx_MessageEditHistoryDialog_scrollPanel"
       tabindex="-1"
     >
       <div
@@ -72,7 +72,8 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
                   class="mx_EventTile_line"
                 >
                   <span
-                    class="mx_MessageTimestamp"
+                    aria-live="off"
+                    class="mx_MessageTimestamp _content_1jaux_8"
                   >
                     00:00
                   </span>
@@ -113,7 +114,7 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
       </div>
     </div>
     <div
-      aria-describedby="_r_2_"
+      aria-describedby="react-use-id-1"
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
@@ -165,7 +166,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
       </h1>
     </div>
     <div
-      class="mx_AutoHideScrollbar mx_ScrollPanel mx_MessageEditHistoryDialog_scrollPanel"
+      class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_ScrollPanel mx_MessageEditHistoryDialog_scrollPanel"
       tabindex="-1"
     >
       <div
@@ -212,7 +213,8 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
                   class="mx_EventTile_line"
                 >
                   <span
-                    class="mx_MessageTimestamp"
+                    aria-live="off"
+                    class="mx_MessageTimestamp _content_1jaux_8"
                   >
                     00:00
                   </span>
@@ -263,7 +265,8 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
                   class="mx_EventTile_line"
                 >
                   <span
-                    class="mx_MessageTimestamp"
+                    aria-live="off"
+                    class="mx_MessageTimestamp _content_1jaux_8"
                   >
                     00:00
                   </span>
@@ -325,7 +328,8 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
                   class="mx_EventTile_line"
                 >
                   <span
-                    class="mx_MessageTimestamp"
+                    aria-live="off"
+                    class="mx_MessageTimestamp _content_1jaux_8"
                   >
                     00:00
                   </span>
@@ -366,7 +370,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
       </div>
     </div>
     <div
-      aria-describedby="_r_c_"
+      aria-describedby="react-use-id-1"
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/RemoveSectionDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/RemoveSectionDialog-test.tsx.snap
index aad2489868..2c9aab2a04 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/RemoveSectionDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/RemoveSectionDialog-test.tsx.snap
@@ -36,6 +36,7 @@ exports[`RemoveSectionDialog renders the dialog when section is empty 1`] = `
         class="mx_Dialog_buttons_row"
       >
         <button
+          class="cancel"
           data-testid="dialog-cancel-button"
           type="button"
         >
@@ -119,6 +120,7 @@ exports[`RemoveSectionDialog renders the dialog when section is not empty 1`] =
         class="mx_Dialog_buttons_row"
       >
         <button
+          class="cancel"
           data-testid="dialog-cancel-button"
           type="button"
         >
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ReportRoomDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ReportRoomDialog-test.tsx.snap
index 0581e80f78..46815a3cf9 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ReportRoomDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ReportRoomDialog-test.tsx.snap
@@ -26,14 +26,14 @@ exports[`ReportRoomDialog displays admin message 1`] = `
       </h1>
     </div>
     <form
-      class="_root_19upo_16"
+      class="_root_1o4d9_17"
       id="mx_ReportEventDialog"
     >
       <div
-        class="_field_19upo_26"
+        class="_field_1o4d9_27"
       >
         <label
-          class="_label_19upo_59"
+          class="_label_1o4d9_60"
           for="mx_ReportRoomDialog_reason"
         >
           Describe the reason
@@ -43,8 +43,8 @@ exports[`ReportRoomDialog displays admin message 1`] = `
           rows="5"
         />
         <span
-          class="_message_19upo_85 _help-message_19upo_91"
-          id="radix-_r_9_"
+          class="_message_1o4d9_86 _help-message_1o4d9_92"
+          id="radix-react-use-id-1"
         >
           Report this room to your account provider. If the messages are encrypted, your admin will not be able to read them.
         </span>
@@ -66,17 +66,17 @@ exports[`ReportRoomDialog displays admin message 1`] = `
 
       </p>
       <div
-        class="_inline-field_19upo_32"
+        class="_inline-field_1o4d9_33"
       >
         <div
-          class="_inline-field-control_19upo_44"
+          class="_inline-field-control_1o4d9_45"
         >
           <div
             class="_container_udcm8_10"
           >
             <input
               class="_input_udcm8_24"
-              id="_r_a_"
+              id="react-use-id-2"
               role="switch"
               type="checkbox"
             />
@@ -86,11 +86,11 @@ exports[`ReportRoomDialog displays admin message 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field-body_19upo_38"
+          class="_inline-field-body_1o4d9_39"
         >
           <label
-            class="_label_19upo_59"
-            for="_r_a_"
+            class="_label_1o4d9_60"
+            for="react-use-id-2"
           >
             Leave room
           </label>
@@ -103,6 +103,7 @@ exports[`ReportRoomDialog displays admin message 1`] = `
           class="mx_Dialog_buttons_row"
         >
           <button
+            class="cancel"
             data-testid="dialog-cancel-button"
             type="button"
           >
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/RoomSettingsDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/RoomSettingsDialog-test.tsx.snap
index 9521e705b3..fa3f7b0657 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/RoomSettingsDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/RoomSettingsDialog-test.tsx.snap
@@ -4,6 +4,7 @@ exports[`<RoomSettingsDialog /> Settings tabs renders default tabs correctly 1`]
 NodeList [
   <li
     aria-controls="mx_tabpanel_ROOM_GENERAL_TAB"
+    aria-labelledby="mx_tabpanel_ROOM_GENERAL_TAB_label"
     aria-selected="true"
     class="mx_AccessibleButton mx_TabbedView_tabLabel mx_TabbedView_tabLabel_active"
     data-testid="settings-tab-ROOM_GENERAL_TAB"
@@ -31,8 +32,38 @@ NodeList [
       General
     </span>
   </li>,
+  <li
+    aria-controls="mx_tabpanel_ROOM_VOIP_TAB"
+    aria-labelledby="mx_tabpanel_ROOM_VOIP_TAB_label"
+    aria-selected="false"
+    class="mx_AccessibleButton mx_TabbedView_tabLabel"
+    data-testid="settings-tab-ROOM_VOIP_TAB"
+    role="tab"
+    tabindex="-1"
+  >
+    <svg
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        clip-rule="evenodd"
+        d="M8.929 15.1a13.6 13.6 0 0 0 4.654 3.066q2.62 1.036 5.492.923h.008l.003-.004.003-.002-.034-3.124-3.52-.483-1.791 1.792-.645-.322a13.5 13.5 0 0 1-3.496-2.52 13.4 13.4 0 0 1-2.52-3.496l-.322-.645 1.792-1.791-.483-3.52-3.123-.033-.003.002-.003.004v.002a13.65 13.65 0 0 0 .932 5.492A13.4 13.4 0 0 0 8.93 15.1m3.92 4.926a15.6 15.6 0 0 1-5.334-3.511 15.4 15.4 0 0 1-3.505-5.346 15.6 15.6 0 0 1-1.069-6.274 1.93 1.93 0 0 1 .589-1.366c.366-.366.84-.589 1.386-.589h.01l3.163.035a1.96 1.96 0 0 1 1.958 1.694v.005l.487 3.545v.003c.043.297.025.605-.076.907a2 2 0 0 1-.485.773l-.762.762a11.3 11.3 0 0 0 1.806 2.348 11.4 11.4 0 0 0 2.348 1.806l.762-.762a2 2 0 0 1 .774-.485c.302-.1.61-.118.907-.076l3.553.487a1.96 1.96 0 0 1 1.694 1.958l.034 3.174c0 .546-.223 1.02-.588 1.386-.36.36-.827.582-1.363.588a15.3 15.3 0 0 1-6.29-1.062"
+        fill-rule="evenodd"
+      />
+    </svg>
+    <span
+      class="mx_TabbedView_tabLabel_text"
+      id="mx_tabpanel_ROOM_VOIP_TAB_label"
+    >
+      Voice & Video
+    </span>
+  </li>,
   <li
     aria-controls="mx_tabpanel_ROOM_SECURITY_TAB"
+    aria-labelledby="mx_tabpanel_ROOM_SECURITY_TAB_label"
     aria-selected="false"
     class="mx_AccessibleButton mx_TabbedView_tabLabel"
     data-testid="settings-tab-ROOM_SECURITY_TAB"
@@ -59,6 +90,7 @@ NodeList [
   </li>,
   <li
     aria-controls="mx_tabpanel_ROOM_ROLES_TAB"
+    aria-labelledby="mx_tabpanel_ROOM_ROLES_TAB_label"
     aria-selected="false"
     class="mx_AccessibleButton mx_TabbedView_tabLabel"
     data-testid="settings-tab-ROOM_ROLES_TAB"
@@ -87,6 +119,7 @@ NodeList [
   </li>,
   <li
     aria-controls="mx_tabpanel_ROOM_NOTIFICATIONS_TAB"
+    aria-labelledby="mx_tabpanel_ROOM_NOTIFICATIONS_TAB_label"
     aria-selected="false"
     class="mx_AccessibleButton mx_TabbedView_tabLabel"
     data-testid="settings-tab-ROOM_NOTIFICATIONS_TAB"
@@ -113,6 +146,7 @@ NodeList [
   </li>,
   <li
     aria-controls="mx_tabpanel_ROOM_POLL_HISTORY_TAB"
+    aria-labelledby="mx_tabpanel_ROOM_POLL_HISTORY_TAB_label"
     aria-selected="false"
     class="mx_AccessibleButton mx_TabbedView_tabLabel"
     data-testid="settings-tab-ROOM_POLL_HISTORY_TAB"
@@ -197,7 +231,7 @@ exports[`<RoomSettingsDialog /> poll history displays poll history when tab clic
             fill="currentColor"
             height="1em"
             role="progressbar"
-            style="width: 20px; height: 20px;"
+            style="width: 16px; height: 16px;"
             viewBox="0 0 24 24"
             width="1em"
             xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap
index 79a6d5d38f..2200da857e 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<ServerPickerDialog /> should render dialog 1`] = `
           class="mx_StyledRadioButton_content"
         >
           <span
-            aria-labelledby="_r_0_"
+            aria-labelledby="react-use-id-1"
             class="mx_Login_underlinedServerName"
             tabindex="0"
           >
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/SpotlightDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/SpotlightDialog-test.tsx.snap
index c66af206da..085cd6fdb7 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/SpotlightDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/SpotlightDialog-test.tsx.snap
@@ -1,256 +1,6 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Spotlight Dialog metaspaces should show metaspace favourites-space 1`] = `
-<DocumentFragment>
-  <div
-    id="mx_SpotlightDialog_keyboardPrompt"
-  >
-    <span>
-      Use 
-      <kbd>
-        ↓
-      </kbd>
-      <kbd>
-        ↑
-      </kbd>
-       to scroll
-    </span>
-  </div>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="0"
-  />
-  <div
-    aria-label="Search Dialog"
-    class="mx_SpotlightDialog mx_Dialog_fixedWidth"
-    data-focus-lock-disabled="false"
-    role="dialog"
-    tabindex="-1"
-  >
-    <div
-      class="mx_Dialog_header"
-    />
-    <div
-      class="mx_SpotlightDialog_searchBox mx_textinput"
-    >
-      <input
-        aria-activedescendant="mx_SpotlightDialog_button_result_Favourites"
-        aria-describedby="mx_SpotlightDialog_keyboardPrompt"
-        aria-label="Search"
-        aria-owns="mx_SpotlightDialog_content"
-        autocapitalize="off"
-        autocomplete="off"
-        autocorrect="off"
-        placeholder="Search"
-        spellcheck="false"
-        type="text"
-        value="favourites"
-      />
-    </div>
-    <div
-      aria-activedescendant="mx_SpotlightDialog_button_result_Favourites"
-      aria-describedby="mx_SpotlightDialog_keyboardPrompt"
-      id="mx_SpotlightDialog_content"
-      role="listbox"
-    >
-      <div
-        aria-labelledby="mx_SpotlightDialog_section_spaces"
-        class="mx_SpotlightDialog_section mx_SpotlightDialog_results"
-        role="group"
-      >
-        <h4
-          id="mx_SpotlightDialog_section_spaces"
-        >
-          Spaces you're in
-        </h4>
-        <div>
-          <li
-            aria-selected="true"
-            class="mx_AccessibleButton mx_SpotlightDialog_option"
-            id="mx_SpotlightDialog_button_result_Favourites"
-            role="option"
-            tabindex="-1"
-          >
-            <div
-              class="mx_SpotlightDialog_metaspaceResult"
-            >
-              <svg
-                fill="currentColor"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M13.905 9.378 12 5.52l-1.905 3.86-4.259.618 3.082 3.004-.727 4.242L12 15.24l3.81 2.003-.728-4.242 3.082-3.004zM8.767 7.55l2.336-4.733a1 1 0 0 1 1.794 0l2.336 4.733 5.223.76a1 1 0 0 1 .555 1.705L17.23 13.7l.892 5.202a1 1 0 0 1-1.45 1.054L12 17.5l-4.672 2.456a1 1 0 0 1-1.451-1.054l.892-5.202-3.78-3.685a1 1 0 0 1 .555-1.706z"
-                />
-              </svg>
-            </div>
-            Favourites
-            <div
-              class="mx_SpotlightDialog_option--endAdornment"
-            >
-              <kbd
-                aria-hidden="true"
-                class="mx_SpotlightDialog_enterPrompt"
-              >
-                ↵
-              </kbd>
-            </div>
-          </li>
-        </div>
-      </div>
-      <div
-        aria-labelledby="mx_SpotlightDialog_section_otherSearches"
-        class="mx_SpotlightDialog_section mx_SpotlightDialog_otherSearches"
-        role="group"
-      >
-        <h4
-          id="mx_SpotlightDialog_section_otherSearches"
-        >
-          Use "favourites" to search
-        </h4>
-        <div>
-          <li
-            aria-selected="false"
-            class="mx_AccessibleButton mx_SpotlightDialog_option"
-            id="mx_SpotlightDialog_button_explorePublicSpaces"
-            role="option"
-            tabindex="-1"
-          >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M6 21q-1.65 0-2.825-1.175T2 17t1.175-2.825T6 13t2.825 1.175T10 17t-1.175 2.825T6 21m12 0q-1.65 0-2.825-1.175T14 17t1.175-2.825T18 13t2.825 1.175T22 17t-1.175 2.825T18 21M6 19q.824 0 1.412-.587Q8 17.825 8 17t-.588-1.412A1.93 1.93 0 0 0 6 15q-.824 0-1.412.588A1.93 1.93 0 0 0 4 17q0 .824.588 1.413Q5.175 19 6 19m12 0q.824 0 1.413-.587Q20 17.825 20 17t-.587-1.412A1.93 1.93 0 0 0 18 15q-.824 0-1.413.588A1.93 1.93 0 0 0 16 17q0 .824.587 1.413Q17.176 19 18 19m-6-8q-1.65 0-2.825-1.175T8 7t1.175-2.825T12 3t2.825 1.175T16 7t-1.175 2.825T12 11m0-2q.825 0 1.412-.588Q14 7.826 14 7q0-.824-.588-1.412A1.93 1.93 0 0 0 12 5q-.825 0-1.412.588A1.93 1.93 0 0 0 10 7q0 .824.588 1.412Q11.175 9 12 9"
-              />
-            </svg>
-            Public spaces
-            <div
-              class="mx_SpotlightDialog_option--endAdornment"
-            >
-              <kbd
-                aria-hidden="true"
-                class="mx_SpotlightDialog_enterPrompt"
-              >
-                ↵
-              </kbd>
-            </div>
-          </li>
-          <li
-            aria-selected="false"
-            class="mx_AccessibleButton mx_SpotlightDialog_option"
-            id="mx_SpotlightDialog_button_explorePublicRooms"
-            role="option"
-            tabindex="-1"
-          >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="m8.566 17-.944 4.094q-.086.406-.372.656t-.687.25q-.543 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.801-3.5H3.158q-.572 0-.916-.484a1.27 1.27 0 0 1-.2-1.078 1.12 1.12 0 0 1 1.116-.938H6.85l1.145-5h-3.12q-.57 0-.915-.484a1.27 1.27 0 0 1-.2-1.078A1.12 1.12 0 0 1 4.875 7h3.691l.945-4.094q.085-.406.372-.656.286-.25.686-.25.544 0 .887.469.345.468.2 1.031l-.8 3.5h4.578l.944-4.094q.085-.406.372-.656.286-.25.687-.25.543 0 .887.469t.2 1.031L17.723 7h3.119q.573 0 .916.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937H17.15l-1.145 5h3.12q.57 0 .915.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937h-3.691l-.944 4.094q-.087.406-.373.656t-.686.25q-.544 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.8-3.5zm.573-2.5h4.578l1.144-5h-4.578z"
-              />
-            </svg>
-            Public rooms
-            <div
-              class="mx_SpotlightDialog_option--endAdornment"
-            >
-              <kbd
-                aria-hidden="true"
-                class="mx_SpotlightDialog_enterPrompt"
-              >
-                ↵
-              </kbd>
-            </div>
-          </li>
-          <li
-            aria-selected="false"
-            class="mx_AccessibleButton mx_SpotlightDialog_option"
-            id="mx_SpotlightDialog_button_startChat"
-            role="option"
-            tabindex="-1"
-          >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M9.175 13.825Q10.35 15 12 15t2.825-1.175T16 11t-1.175-2.825T12 7 9.175 8.175 8 11t1.175 2.825m4.237-1.412A1.93 1.93 0 0 1 12 13q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 11q0-.825.588-1.412A1.93 1.93 0 0 1 12 9q.825 0 1.412.588Q14 10.175 14 11t-.588 1.412"
-              />
-              <path
-                d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0"
-              />
-              <path
-                d="M16.23 18.792a13 13 0 0 0-1.455-.455 11.6 11.6 0 0 0-5.55 0q-.73.18-1.455.455a8 8 0 0 1-1.729-1.454q1.336-.618 2.709-.95A13.8 13.8 0 0 1 12 16q1.65 0 3.25.387 1.373.333 2.709.95a8 8 0 0 1-1.73 1.455"
-              />
-            </svg>
-            People
-            <div
-              class="mx_SpotlightDialog_option--endAdornment"
-            >
-              <kbd
-                aria-hidden="true"
-                class="mx_SpotlightDialog_enterPrompt"
-              >
-                ↵
-              </kbd>
-            </div>
-          </li>
-          <li
-            aria-selected="false"
-            class="mx_AccessibleButton mx_SpotlightDialog_option"
-            id="mx_SpotlightDialog_button_searchMessages"
-            role="option"
-            tabindex="-1"
-          >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="m1.5 21.25 1.45-4.95a10.2 10.2 0 0 1-.712-2.1A10.2 10.2 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22q-1.125 0-2.2-.238a10.2 10.2 0 0 1-2.1-.712L2.75 22.5a.94.94 0 0 1-1-.25.94.94 0 0 1-.25-1m2.45-1.2 3.2-.95a1 1 0 0 1 .275-.062q.15-.013.275-.013.225 0 .438.038.212.036.412.137a7.4 7.4 0 0 0 1.675.6Q11.1 20 12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12q0 .9.2 1.775t.6 1.675q.176.325.188.688t-.088.712z"
-              />
-            </svg>
-            Messages
-            <div
-              class="mx_SpotlightDialog_option--endAdornment"
-            >
-              <kbd
-                aria-hidden="true"
-                class="mx_SpotlightDialog_enterPrompt"
-              >
-                ↵
-              </kbd>
-            </div>
-          </li>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="0"
-  />
-</DocumentFragment>
-`;
-
-exports[`Spotlight Dialog metaspaces should show metaspace home-space 1`] = `
+exports[`Spotlight Dialog metaspaces should show Home metaspace 1`] = `
 <DocumentFragment>
   <div
     id="mx_SpotlightDialog_keyboardPrompt"
@@ -501,259 +251,3 @@ exports[`Spotlight Dialog metaspaces should show metaspace home-space 1`] = `
   />
 </DocumentFragment>
 `;
-
-exports[`Spotlight Dialog metaspaces should show metaspace people-space 1`] = `
-<DocumentFragment>
-  <div
-    id="mx_SpotlightDialog_keyboardPrompt"
-  >
-    <span>
-      Use 
-      <kbd>
-        ↓
-      </kbd>
-      <kbd>
-        ↑
-      </kbd>
-       to scroll
-    </span>
-  </div>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="0"
-  />
-  <div
-    aria-label="Search Dialog"
-    class="mx_SpotlightDialog mx_Dialog_fixedWidth"
-    data-focus-lock-disabled="false"
-    role="dialog"
-    tabindex="-1"
-  >
-    <div
-      class="mx_Dialog_header"
-    />
-    <div
-      class="mx_SpotlightDialog_searchBox mx_textinput"
-    >
-      <input
-        aria-activedescendant="mx_SpotlightDialog_button_result_People"
-        aria-describedby="mx_SpotlightDialog_keyboardPrompt"
-        aria-label="Search"
-        aria-owns="mx_SpotlightDialog_content"
-        autocapitalize="off"
-        autocomplete="off"
-        autocorrect="off"
-        placeholder="Search"
-        spellcheck="false"
-        type="text"
-        value="people"
-      />
-    </div>
-    <div
-      aria-activedescendant="mx_SpotlightDialog_button_result_People"
-      aria-describedby="mx_SpotlightDialog_keyboardPrompt"
-      id="mx_SpotlightDialog_content"
-      role="listbox"
-    >
-      <div
-        aria-labelledby="mx_SpotlightDialog_section_spaces"
-        class="mx_SpotlightDialog_section mx_SpotlightDialog_results"
-        role="group"
-      >
-        <h4
-          id="mx_SpotlightDialog_section_spaces"
-        >
-          Spaces you're in
-        </h4>
-        <div>
-          <li
-            aria-selected="true"
-            class="mx_AccessibleButton mx_SpotlightDialog_option"
-            id="mx_SpotlightDialog_button_result_People"
-            role="option"
-            tabindex="-1"
-          >
-            <div
-              class="mx_SpotlightDialog_metaspaceResult"
-            >
-              <svg
-                fill="currentColor"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M9.175 13.825Q10.35 15 12 15t2.825-1.175T16 11t-1.175-2.825T12 7 9.175 8.175 8 11t1.175 2.825m4.237-1.412A1.93 1.93 0 0 1 12 13q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 11q0-.825.588-1.412A1.93 1.93 0 0 1 12 9q.825 0 1.412.588Q14 10.175 14 11t-.588 1.412"
-                />
-                <path
-                  d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0"
-                />
-                <path
-                  d="M16.23 18.792a13 13 0 0 0-1.455-.455 11.6 11.6 0 0 0-5.55 0q-.73.18-1.455.455a8 8 0 0 1-1.729-1.454q1.336-.618 2.709-.95A13.8 13.8 0 0 1 12 16q1.65 0 3.25.387 1.373.333 2.709.95a8 8 0 0 1-1.73 1.455"
-                />
-              </svg>
-            </div>
-            People
-            <div
-              class="mx_SpotlightDialog_option--endAdornment"
-            >
-              <kbd
-                aria-hidden="true"
-                class="mx_SpotlightDialog_enterPrompt"
-              >
-                ↵
-              </kbd>
-            </div>
-          </li>
-        </div>
-      </div>
-      <div
-        aria-labelledby="mx_SpotlightDialog_section_otherSearches"
-        class="mx_SpotlightDialog_section mx_SpotlightDialog_otherSearches"
-        role="group"
-      >
-        <h4
-          id="mx_SpotlightDialog_section_otherSearches"
-        >
-          Use "people" to search
-        </h4>
-        <div>
-          <li
-            aria-selected="false"
-            class="mx_AccessibleButton mx_SpotlightDialog_option"
-            id="mx_SpotlightDialog_button_explorePublicSpaces"
-            role="option"
-            tabindex="-1"
-          >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M6 21q-1.65 0-2.825-1.175T2 17t1.175-2.825T6 13t2.825 1.175T10 17t-1.175 2.825T6 21m12 0q-1.65 0-2.825-1.175T14 17t1.175-2.825T18 13t2.825 1.175T22 17t-1.175 2.825T18 21M6 19q.824 0 1.412-.587Q8 17.825 8 17t-.588-1.412A1.93 1.93 0 0 0 6 15q-.824 0-1.412.588A1.93 1.93 0 0 0 4 17q0 .824.588 1.413Q5.175 19 6 19m12 0q.824 0 1.413-.587Q20 17.825 20 17t-.587-1.412A1.93 1.93 0 0 0 18 15q-.824 0-1.413.588A1.93 1.93 0 0 0 16 17q0 .824.587 1.413Q17.176 19 18 19m-6-8q-1.65 0-2.825-1.175T8 7t1.175-2.825T12 3t2.825 1.175T16 7t-1.175 2.825T12 11m0-2q.825 0 1.412-.588Q14 7.826 14 7q0-.824-.588-1.412A1.93 1.93 0 0 0 12 5q-.825 0-1.412.588A1.93 1.93 0 0 0 10 7q0 .824.588 1.412Q11.175 9 12 9"
-              />
-            </svg>
-            Public spaces
-            <div
-              class="mx_SpotlightDialog_option--endAdornment"
-            >
-              <kbd
-                aria-hidden="true"
-                class="mx_SpotlightDialog_enterPrompt"
-              >
-                ↵
-              </kbd>
-            </div>
-          </li>
-          <li
-            aria-selected="false"
-            class="mx_AccessibleButton mx_SpotlightDialog_option"
-            id="mx_SpotlightDialog_button_explorePublicRooms"
-            role="option"
-            tabindex="-1"
-          >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="m8.566 17-.944 4.094q-.086.406-.372.656t-.687.25q-.543 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.801-3.5H3.158q-.572 0-.916-.484a1.27 1.27 0 0 1-.2-1.078 1.12 1.12 0 0 1 1.116-.938H6.85l1.145-5h-3.12q-.57 0-.915-.484a1.27 1.27 0 0 1-.2-1.078A1.12 1.12 0 0 1 4.875 7h3.691l.945-4.094q.085-.406.372-.656.286-.25.686-.25.544 0 .887.469.345.468.2 1.031l-.8 3.5h4.578l.944-4.094q.085-.406.372-.656.286-.25.687-.25.543 0 .887.469t.2 1.031L17.723 7h3.119q.573 0 .916.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937H17.15l-1.145 5h3.12q.57 0 .915.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937h-3.691l-.944 4.094q-.087.406-.373.656t-.686.25q-.544 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.8-3.5zm.573-2.5h4.578l1.144-5h-4.578z"
-              />
-            </svg>
-            Public rooms
-            <div
-              class="mx_SpotlightDialog_option--endAdornment"
-            >
-              <kbd
-                aria-hidden="true"
-                class="mx_SpotlightDialog_enterPrompt"
-              >
-                ↵
-              </kbd>
-            </div>
-          </li>
-          <li
-            aria-selected="false"
-            class="mx_AccessibleButton mx_SpotlightDialog_option"
-            id="mx_SpotlightDialog_button_startChat"
-            role="option"
-            tabindex="-1"
-          >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M9.175 13.825Q10.35 15 12 15t2.825-1.175T16 11t-1.175-2.825T12 7 9.175 8.175 8 11t1.175 2.825m4.237-1.412A1.93 1.93 0 0 1 12 13q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 11q0-.825.588-1.412A1.93 1.93 0 0 1 12 9q.825 0 1.412.588Q14 10.175 14 11t-.588 1.412"
-              />
-              <path
-                d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0"
-              />
-              <path
-                d="M16.23 18.792a13 13 0 0 0-1.455-.455 11.6 11.6 0 0 0-5.55 0q-.73.18-1.455.455a8 8 0 0 1-1.729-1.454q1.336-.618 2.709-.95A13.8 13.8 0 0 1 12 16q1.65 0 3.25.387 1.373.333 2.709.95a8 8 0 0 1-1.73 1.455"
-              />
-            </svg>
-            People
-            <div
-              class="mx_SpotlightDialog_option--endAdornment"
-            >
-              <kbd
-                aria-hidden="true"
-                class="mx_SpotlightDialog_enterPrompt"
-              >
-                ↵
-              </kbd>
-            </div>
-          </li>
-          <li
-            aria-selected="false"
-            class="mx_AccessibleButton mx_SpotlightDialog_option"
-            id="mx_SpotlightDialog_button_searchMessages"
-            role="option"
-            tabindex="-1"
-          >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="m1.5 21.25 1.45-4.95a10.2 10.2 0 0 1-.712-2.1A10.2 10.2 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22q-1.125 0-2.2-.238a10.2 10.2 0 0 1-2.1-.712L2.75 22.5a.94.94 0 0 1-1-.25.94.94 0 0 1-.25-1m2.45-1.2 3.2-.95a1 1 0 0 1 .275-.062q.15-.013.275-.013.225 0 .438.038.212.036.412.137a7.4 7.4 0 0 0 1.675.6Q11.1 20 12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12q0 .9.2 1.775t.6 1.675q.176.325.188.688t-.088.712z"
-              />
-            </svg>
-            Messages
-            <div
-              class="mx_SpotlightDialog_option--endAdornment"
-            >
-              <kbd
-                aria-hidden="true"
-                class="mx_SpotlightDialog_enterPrompt"
-              >
-                ↵
-              </kbd>
-            </div>
-          </li>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="0"
-  />
-</DocumentFragment>
-`;
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/UntrustedDeviceDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/UntrustedDeviceDialog-test.tsx.snap
deleted file mode 100644
index d2d69ebf26..0000000000
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/UntrustedDeviceDialog-test.tsx.snap
+++ /dev/null
@@ -1,203 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`<UntrustedDeviceDialog /> should display the dialog for the device of another user 1`] = `
-<DocumentFragment>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="0"
-  />
-  <div
-    aria-labelledby="mx_BaseDialog_title"
-    class="mx_UntrustedDeviceDialog mx_Dialog_fixedWidth"
-    data-focus-lock-disabled="false"
-    role="dialog"
-    tabindex="-1"
-  >
-    <div
-      class="mx_Dialog_header"
-    >
-      <h1
-        class="mx_Heading_h3 mx_Dialog_title"
-        id="mx_BaseDialog_title"
-      >
-        <div
-          class="mx_E2EIcon"
-          data-testid="e2e-icon"
-          style="width: 24px; height: 24px;"
-        >
-          <svg
-            color="var(--cpd-color-icon-critical-primary)"
-            fill="currentColor"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
-            />
-          </svg>
-        </div>
-        Not Trusted
-      </h1>
-    </div>
-    <div
-      class="mx_Dialog_content"
-      id="mx_Dialog_content"
-    >
-      <p>
-        Alice (@alice:example.org) signed in to a new session without verifying it:
-      </p>
-      <p>
-         (device_id)
-      </p>
-      <p>
-        Ask this user to verify their session, or manually verify it below.
-      </p>
-    </div>
-    <div
-      class="mx_Dialog_buttons"
-    >
-      <div
-        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
-        role="button"
-        tabindex="0"
-      >
-        Interactively verify by emoji
-      </div>
-      <div
-        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
-        role="button"
-        tabindex="0"
-      >
-        Done
-      </div>
-    </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    >
-      <svg
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 24 24"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
-        />
-      </svg>
-    </div>
-  </div>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="0"
-  />
-</DocumentFragment>
-`;
-
-exports[`<UntrustedDeviceDialog /> should display the dialog for the device of the current user 1`] = `
-<DocumentFragment>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="0"
-  />
-  <div
-    aria-labelledby="mx_BaseDialog_title"
-    class="mx_UntrustedDeviceDialog mx_Dialog_fixedWidth"
-    data-focus-lock-disabled="false"
-    role="dialog"
-    tabindex="-1"
-  >
-    <div
-      class="mx_Dialog_header"
-    >
-      <h1
-        class="mx_Heading_h3 mx_Dialog_title"
-        id="mx_BaseDialog_title"
-      >
-        <div
-          class="mx_E2EIcon"
-          data-testid="e2e-icon"
-          style="width: 24px; height: 24px;"
-        >
-          <svg
-            color="var(--cpd-color-icon-critical-primary)"
-            fill="currentColor"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
-            />
-          </svg>
-        </div>
-        Not Trusted
-      </h1>
-    </div>
-    <div
-      class="mx_Dialog_content"
-      id="mx_Dialog_content"
-    >
-      <p>
-        You signed in to a new session without verifying it:
-      </p>
-      <p>
-         (device_id)
-      </p>
-      <p>
-        Verify your other session using one of the options below.
-      </p>
-    </div>
-    <div
-      class="mx_Dialog_buttons"
-    >
-      <div
-        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
-        role="button"
-        tabindex="0"
-      >
-        Interactively verify by emoji
-      </div>
-      <div
-        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
-        role="button"
-        tabindex="0"
-      >
-        Done
-      </div>
-    </div>
-    <div
-      aria-label="Close dialog"
-      class="mx_AccessibleButton mx_Dialog_cancelButton"
-      role="button"
-      tabindex="0"
-    >
-      <svg
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 24 24"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
-        />
-      </svg>
-    </div>
-  </div>
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="0"
-  />
-</DocumentFragment>
-`;
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/UserSettingsDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/UserSettingsDialog-test.tsx.snap
index 2f515d8a96..d290f8fd54 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/UserSettingsDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/UserSettingsDialog-test.tsx.snap
@@ -4,6 +4,7 @@ exports[`<UserSettingsDialog /> renders tabs correctly 1`] = `
 NodeList [
   <li
     aria-controls="mx_tabpanel_USER_ACCOUNT_TAB"
+    aria-labelledby="mx_tabpanel_USER_ACCOUNT_TAB_label"
     aria-selected="true"
     class="mx_AccessibleButton mx_TabbedView_tabLabel mx_TabbedView_tabLabel_active"
     data-testid="settings-tab-USER_ACCOUNT_TAB"
@@ -36,6 +37,7 @@ NodeList [
   </li>,
   <li
     aria-controls="mx_tabpanel_USER_SESSION_MANAGER_TAB"
+    aria-labelledby="mx_tabpanel_USER_SESSION_MANAGER_TAB_label"
     aria-selected="false"
     class="mx_AccessibleButton mx_TabbedView_tabLabel"
     data-testid="settings-tab-USER_SESSION_MANAGER_TAB"
@@ -62,6 +64,7 @@ NodeList [
   </li>,
   <li
     aria-controls="mx_tabpanel_USER_APPEARANCE_TAB"
+    aria-labelledby="mx_tabpanel_USER_APPEARANCE_TAB_label"
     aria-selected="false"
     class="mx_AccessibleButton mx_TabbedView_tabLabel"
     data-testid="settings-tab-USER_APPEARANCE_TAB"
@@ -88,6 +91,7 @@ NodeList [
   </li>,
   <li
     aria-controls="mx_tabpanel_USER_NOTIFICATIONS_TAB"
+    aria-labelledby="mx_tabpanel_USER_NOTIFICATIONS_TAB_label"
     aria-selected="false"
     class="mx_AccessibleButton mx_TabbedView_tabLabel"
     data-testid="settings-tab-USER_NOTIFICATIONS_TAB"
@@ -114,6 +118,7 @@ NodeList [
   </li>,
   <li
     aria-controls="mx_tabpanel_USER_PREFERENCES_TAB"
+    aria-labelledby="mx_tabpanel_USER_PREFERENCES_TAB_label"
     aria-selected="false"
     class="mx_AccessibleButton mx_TabbedView_tabLabel"
     data-testid="settings-tab-USER_PREFERENCES_TAB"
@@ -142,6 +147,7 @@ NodeList [
   </li>,
   <li
     aria-controls="mx_tabpanel_USER_KEYBOARD_TAB"
+    aria-labelledby="mx_tabpanel_USER_KEYBOARD_TAB_label"
     aria-selected="false"
     class="mx_AccessibleButton mx_TabbedView_tabLabel"
     data-testid="settings-tab-USER_KEYBOARD_TAB"
@@ -173,6 +179,7 @@ NodeList [
   </li>,
   <li
     aria-controls="mx_tabpanel_USER_SIDEBAR_TAB"
+    aria-labelledby="mx_tabpanel_USER_SIDEBAR_TAB_label"
     aria-selected="false"
     class="mx_AccessibleButton mx_TabbedView_tabLabel"
     data-testid="settings-tab-USER_SIDEBAR_TAB"
@@ -201,6 +208,7 @@ NodeList [
   </li>,
   <li
     aria-controls="mx_tabpanel_USER_SECURITY_TAB"
+    aria-labelledby="mx_tabpanel_USER_SECURITY_TAB_label"
     aria-selected="false"
     class="mx_AccessibleButton mx_TabbedView_tabLabel"
     data-testid="settings-tab-USER_SECURITY_TAB"
@@ -227,6 +235,7 @@ NodeList [
   </li>,
   <li
     aria-controls="mx_tabpanel_USER_ENCRYPTION_TAB"
+    aria-labelledby="mx_tabpanel_USER_ENCRYPTION_TAB_label"
     aria-selected="false"
     class="mx_AccessibleButton mx_TabbedView_tabLabel"
     data-testid="settings-tab-USER_ENCRYPTION_TAB"
@@ -253,6 +262,7 @@ NodeList [
   </li>,
   <li
     aria-controls="mx_tabpanel_USER_LABS_TAB"
+    aria-labelledby="mx_tabpanel_USER_LABS_TAB_label"
     aria-selected="false"
     class="mx_AccessibleButton mx_TabbedView_tabLabel"
     data-testid="settings-tab-USER_LABS_TAB"
@@ -287,6 +297,7 @@ NodeList [
   </li>,
   <li
     aria-controls="mx_tabpanel_USER_HELP_TAB"
+    aria-labelledby="mx_tabpanel_USER_HELP_TAB_label"
     aria-selected="false"
     class="mx_AccessibleButton mx_TabbedView_tabLabel"
     data-testid="settings-tab-USER_HELP_TAB"
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/VerificationRequestDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/VerificationRequestDialog-test.tsx.snap
index 821de17b0c..fb30f16ccc 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/VerificationRequestDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/VerificationRequestDialog-test.tsx.snap
@@ -126,7 +126,7 @@ exports[`VerificationRequestDialog After we started verification here, says we a
       Once accepted you'll be able to continue with the verification.
     </div>
     <div
-      aria-describedby="_r_6_"
+      aria-describedby="react-use-id-1"
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
diff --git a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/WidgetOpenIDPermissionsDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/WidgetOpenIDPermissionsDialog-test.tsx.snap
index 8610b5cf10..d1fc06ea83 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/WidgetOpenIDPermissionsDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/__snapshots__/WidgetOpenIDPermissionsDialog-test.tsx.snap
@@ -43,20 +43,20 @@ exports[`WidgetOpenIDPermissionsDialog should render 1`] = `
         class="mx_Dialog_buttons_additive"
       >
         <form
-          class="_root_19upo_16"
+          class="_root_1o4d9_17"
         >
           <div
-            class="_inline-field_19upo_32"
+            class="_inline-field_1o4d9_33"
           >
             <div
-              class="_inline-field-control_19upo_44"
+              class="_inline-field-control_1o4d9_45"
             >
               <div
                 class="_container_udcm8_10"
               >
                 <input
                   class="_input_udcm8_24"
-                  id="_r_0_"
+                  id="react-use-id-1"
                   role="switch"
                   type="checkbox"
                 />
@@ -66,11 +66,11 @@ exports[`WidgetOpenIDPermissionsDialog should render 1`] = `
               </div>
             </div>
             <div
-              class="_inline-field-body_19upo_38"
+              class="_inline-field-body_1o4d9_39"
             >
               <label
-                class="_label_19upo_59"
-                for="_r_0_"
+                class="_label_1o4d9_60"
+                for="react-use-id-1"
               >
                 Remember this
               </label>
@@ -82,6 +82,7 @@ exports[`WidgetOpenIDPermissionsDialog should render 1`] = `
         class="mx_Dialog_buttons_row"
       >
         <button
+          class="cancel"
           data-testid="dialog-cancel-button"
           type="button"
         >
diff --git a/apps/web/test/unit-tests/components/views/dialogs/devtools/Event-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/devtools/Event-test.tsx
index 330d52b0b1..d8545b30b4 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/devtools/Event-test.tsx
+++ b/apps/web/test/unit-tests/components/views/dialogs/devtools/Event-test.tsx
@@ -8,54 +8,95 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import { render } from "jest-matrix-react";
-import { Room, PendingEventOrdering } from "matrix-js-sdk/src/matrix";
+import {
+    Room,
+    PendingEventOrdering,
+    EventType,
+    MsgType,
+    type MatrixClient,
+    type MatrixEvent,
+} from "matrix-js-sdk/src/matrix";
 
 import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
-import { MatrixClientPeg } from "../../../../../../src/MatrixClientPeg";
-import { stubClient } from "../../../../../test-utils";
+import { createTestClient, mkEvent } from "../../../../../test-utils";
 import { DevtoolsContext } from "../../../../../../src/components/views/dialogs/devtools/BaseTool";
 import { TimelineEventEditor } from "../../../../../../src/components/views/dialogs/devtools/Event";
 
-describe("<EventEditor />", () => {
-    beforeEach(() => {
-        stubClient();
-    });
-
-    it("should render", () => {
-        const cli = MatrixClientPeg.safeGet();
-        const { asFragment } = render(
+function renderTimelineEventEditor(
+    cli: MatrixClient,
+    { mxEvent, threadRootId }: { mxEvent?: MatrixEvent; threadRootId?: string } = {},
+): ReturnType<typeof render> {
+    function Wrapper({ children }: { children: React.ReactNode }): React.ReactNode {
+        return (
             <MatrixClientContext.Provider value={cli}>
                 <DevtoolsContext.Provider
                     value={{
                         room: new Room("!roomId", cli, "@alice:example.com", {
                             pendingEventOrdering: PendingEventOrdering.Detached,
                         }),
+                        threadRootId,
                     }}
                 >
-                    <TimelineEventEditor onBack={() => {}} />
+                    {children}
                 </DevtoolsContext.Provider>
-            </MatrixClientContext.Provider>,
+            </MatrixClientContext.Provider>
         );
+    }
+
+    return render(<TimelineEventEditor mxEvent={mxEvent} onBack={() => {}} />, { wrapper: Wrapper });
+}
+
+describe("<EventEditor />", () => {
+    it("should render", () => {
+        const cli = createTestClient();
+        const { asFragment } = renderTimelineEventEditor(cli);
         expect(asFragment()).toMatchSnapshot();
     });
 
+    it("should preserve the com.beeper.linkpreviews field when editing an event", () => {
+        const cli = createTestClient();
+        const linkPreviews = [{ "og:title": "Example", "matrix:image:size": 1234, "og:url": "https://example.com" }];
+        const mxEvent = mkEvent({
+            event: true,
+            type: EventType.RoomMessage,
+            room: "!roomId",
+            user: "@alice:example.com",
+            content: {
+                "body": "https://example.com",
+                "msgtype": MsgType.Text,
+                "com.beeper.linkpreviews": linkPreviews,
+            },
+        });
+
+        const { getByLabelText } = renderTimelineEventEditor(cli, { mxEvent });
+        const content = getByLabelText("Event Content") as HTMLTextAreaElement;
+        expect(JSON.parse(content.value)["com.beeper.linkpreviews"]).toEqual(linkPreviews);
+    });
+
+    it("should omit the com.beeper.linkpreviews field when the edited event has none", () => {
+        const cli = createTestClient();
+        const mxEvent = mkEvent({
+            event: true,
+            type: EventType.RoomMessage,
+            room: "!roomId",
+            user: "@alice:example.com",
+            content: {
+                body: "hello world",
+                msgtype: MsgType.Text,
+            },
+        });
+
+        const { getByLabelText } = renderTimelineEventEditor(cli, { mxEvent });
+        const content = getByLabelText("Event Content") as HTMLTextAreaElement;
+        expect(JSON.parse(content.value)).not.toHaveProperty("com.beeper.linkpreviews");
+    });
+
     describe("thread context", () => {
         it("should pre-populate a thread relationship", () => {
-            const cli = MatrixClientPeg.safeGet();
-            const { asFragment } = render(
-                <MatrixClientContext.Provider value={cli}>
-                    <DevtoolsContext.Provider
-                        value={{
-                            room: new Room("!roomId", cli, "@alice:example.com", {
-                                pendingEventOrdering: PendingEventOrdering.Detached,
-                            }),
-                            threadRootId: "$this_is_a_thread_id",
-                        }}
-                    >
-                        <TimelineEventEditor onBack={() => {}} />
-                    </DevtoolsContext.Provider>
-                </MatrixClientContext.Provider>,
-            );
+            const cli = createTestClient();
+            const { asFragment } = renderTimelineEventEditor(cli, {
+                threadRootId: "$this_is_a_thread_id",
+            });
             expect(asFragment()).toMatchSnapshot();
         });
     });
diff --git a/apps/web/test/unit-tests/components/views/dialogs/devtools/Users-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/devtools/Users-test.tsx
index 76ef540e6f..f8d8bb0c27 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/devtools/Users-test.tsx
+++ b/apps/web/test/unit-tests/components/views/dialogs/devtools/Users-test.tsx
@@ -7,9 +7,16 @@
 
 import React from "react";
 import { mocked } from "jest-mock";
-import { Device, DeviceVerification, type MatrixClient, MatrixEvent, RoomMember } from "matrix-js-sdk/src/matrix";
+import {
+    Device,
+    DeviceVerification,
+    type MatrixClient,
+    MatrixEvent,
+    RoomMember,
+    Room,
+    PendingEventOrdering,
+} from "matrix-js-sdk/src/matrix";
 import { render, screen, waitFor } from "jest-matrix-react";
-import { Room, PendingEventOrdering } from "matrix-js-sdk/src/matrix";
 import { type DeviceVerificationStatus, type UserVerificationStatus } from "matrix-js-sdk/src/crypto-api";
 
 import { createTestClient } from "../../../../../test-utils";
diff --git a/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Event-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Event-test.tsx.snap
index 7fca222e84..992bf96d39 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Event-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Event-test.tsx.snap
@@ -51,10 +51,14 @@ exports[`<EventEditor /> should render 1`] = `
   <div
     class="mx_Dialog_buttons"
   >
-    <button>
+    <button
+      type="button"
+    >
       Back
     </button>
-    <button>
+    <button
+      type="button"
+    >
       Send
     </button>
   </div>
@@ -115,10 +119,14 @@ exports[`<EventEditor /> thread context should pre-populate a thread relationshi
   <div
     class="mx_Dialog_buttons"
   >
-    <button>
+    <button
+      type="button"
+    >
       Back
     </button>
-    <button>
+    <button
+      type="button"
+    >
       Send
     </button>
   </div>
diff --git a/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/RoomNotifications-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/RoomNotifications-test.tsx.snap
index 2fc0258c49..09dce1d977 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/RoomNotifications-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/RoomNotifications-test.tsx.snap
@@ -64,7 +64,9 @@ exports[`<RoomNotifications /> should render 1`] = `
   <div
     class="mx_Dialog_buttons"
   >
-    <button>
+    <button
+      type="button"
+    >
       Back
     </button>
   </div>
diff --git a/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap
index 65510b96e5..308354fc83 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap
@@ -12,25 +12,32 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
         >
           User ID: @alice:example.com
           <button
-            aria-label="Copy"
-            class="mx_AccessibleButton mx_CopyableText_copyButton"
+            aria-labelledby="react-use-id-1"
+            class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+            data-kind="primary"
             role="button"
+            style="--cpd-icon-button-size: 28px; padding: 4px;"
             tabindex="0"
           >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
             >
-              <path
-                d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-              />
-              <path
-                d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-              />
-            </svg>
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                />
+                <path
+                  d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                />
+              </svg>
+            </div>
           </button>
         </span>
       </li>
@@ -40,25 +47,32 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
         >
           Device ID: SIGNED
           <button
-            aria-label="Copy"
-            class="mx_AccessibleButton mx_CopyableText_copyButton"
+            aria-labelledby="react-use-id-2"
+            class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+            data-kind="primary"
             role="button"
+            style="--cpd-icon-button-size: 28px; padding: 4px;"
             tabindex="0"
           >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
             >
-              <path
-                d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-              />
-              <path
-                d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-              />
-            </svg>
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                />
+                <path
+                  d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                />
+              </svg>
+            </div>
           </button>
         </span>
       </li>
@@ -100,25 +114,32 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
             >
               ed25519: an_ed25519_public_key
               <button
-                aria-label="Copy"
-                class="mx_AccessibleButton mx_CopyableText_copyButton"
+                aria-labelledby="react-use-id-3"
+                class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                data-kind="primary"
                 role="button"
+                style="--cpd-icon-button-size: 28px; padding: 4px;"
                 tabindex="0"
               >
-                <svg
-                  fill="currentColor"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="_indicator-icon_147l5_17"
+                  style="--cpd-icon-button-size: 100%;"
                 >
-                  <path
-                    d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-                  />
-                  <path
-                    d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-                  />
-                </svg>
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                    />
+                    <path
+                      d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                    />
+                  </svg>
+                </div>
               </button>
             </span>
           </li>
@@ -128,25 +149,32 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
             >
               curve25519: a_curve25519_public_key
               <button
-                aria-label="Copy"
-                class="mx_AccessibleButton mx_CopyableText_copyButton"
+                aria-labelledby="react-use-id-4"
+                class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                data-kind="primary"
                 role="button"
+                style="--cpd-icon-button-size: 28px; padding: 4px;"
                 tabindex="0"
               >
-                <svg
-                  fill="currentColor"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="_indicator-icon_147l5_17"
+                  style="--cpd-icon-button-size: 100%;"
                 >
-                  <path
-                    d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-                  />
-                  <path
-                    d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-                  />
-                </svg>
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                    />
+                    <path
+                      d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                    />
+                  </svg>
+                </div>
               </button>
             </span>
           </li>
@@ -157,7 +185,9 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
   <div
     class="mx_Dialog_buttons"
   >
-    <button>
+    <button
+      type="button"
+    >
       Back
     </button>
   </div>
@@ -176,25 +206,32 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
         >
           User ID: @alice:example.com
           <button
-            aria-label="Copy"
-            class="mx_AccessibleButton mx_CopyableText_copyButton"
+            aria-labelledby="react-use-id-1"
+            class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+            data-kind="primary"
             role="button"
+            style="--cpd-icon-button-size: 28px; padding: 4px;"
             tabindex="0"
           >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
             >
-              <path
-                d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-              />
-              <path
-                d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-              />
-            </svg>
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                />
+                <path
+                  d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                />
+              </svg>
+            </div>
           </button>
         </span>
       </li>
@@ -204,25 +241,32 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
         >
           Device ID: UNSIGNED
           <button
-            aria-label="Copy"
-            class="mx_AccessibleButton mx_CopyableText_copyButton"
+            aria-labelledby="react-use-id-2"
+            class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+            data-kind="primary"
             role="button"
+            style="--cpd-icon-button-size: 28px; padding: 4px;"
             tabindex="0"
           >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
             >
-              <path
-                d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-              />
-              <path
-                d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-              />
-            </svg>
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                />
+                <path
+                  d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                />
+              </svg>
+            </div>
           </button>
         </span>
       </li>
@@ -264,25 +308,32 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
             >
               ed25519: an_ed25519_public_key
               <button
-                aria-label="Copy"
-                class="mx_AccessibleButton mx_CopyableText_copyButton"
+                aria-labelledby="react-use-id-3"
+                class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                data-kind="primary"
                 role="button"
+                style="--cpd-icon-button-size: 28px; padding: 4px;"
                 tabindex="0"
               >
-                <svg
-                  fill="currentColor"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="_indicator-icon_147l5_17"
+                  style="--cpd-icon-button-size: 100%;"
                 >
-                  <path
-                    d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-                  />
-                  <path
-                    d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-                  />
-                </svg>
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                    />
+                    <path
+                      d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                    />
+                  </svg>
+                </div>
               </button>
             </span>
           </li>
@@ -292,25 +343,32 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
             >
               curve25519: a_curve25519_public_key
               <button
-                aria-label="Copy"
-                class="mx_AccessibleButton mx_CopyableText_copyButton"
+                aria-labelledby="react-use-id-4"
+                class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                data-kind="primary"
                 role="button"
+                style="--cpd-icon-button-size: 28px; padding: 4px;"
                 tabindex="0"
               >
-                <svg
-                  fill="currentColor"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="_indicator-icon_147l5_17"
+                  style="--cpd-icon-button-size: 100%;"
                 >
-                  <path
-                    d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-                  />
-                  <path
-                    d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-                  />
-                </svg>
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                    />
+                    <path
+                      d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                    />
+                  </svg>
+                </div>
               </button>
             </span>
           </li>
@@ -321,7 +379,9 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
   <div
     class="mx_Dialog_buttons"
   >
-    <button>
+    <button
+      type="button"
+    >
       Back
     </button>
   </div>
@@ -340,25 +400,32 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
         >
           User ID: @alice:example.com
           <button
-            aria-label="Copy"
-            class="mx_AccessibleButton mx_CopyableText_copyButton"
+            aria-labelledby="react-use-id-1"
+            class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+            data-kind="primary"
             role="button"
+            style="--cpd-icon-button-size: 28px; padding: 4px;"
             tabindex="0"
           >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
             >
-              <path
-                d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-              />
-              <path
-                d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-              />
-            </svg>
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                />
+                <path
+                  d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                />
+              </svg>
+            </div>
           </button>
         </span>
       </li>
@@ -368,25 +435,32 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
         >
           Device ID: VERIFIED
           <button
-            aria-label="Copy"
-            class="mx_AccessibleButton mx_CopyableText_copyButton"
+            aria-labelledby="react-use-id-2"
+            class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+            data-kind="primary"
             role="button"
+            style="--cpd-icon-button-size: 28px; padding: 4px;"
             tabindex="0"
           >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
             >
-              <path
-                d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-              />
-              <path
-                d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-              />
-            </svg>
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                />
+                <path
+                  d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                />
+              </svg>
+            </div>
           </button>
         </span>
       </li>
@@ -430,25 +504,32 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
             >
               ed25519: an_ed25519_public_key
               <button
-                aria-label="Copy"
-                class="mx_AccessibleButton mx_CopyableText_copyButton"
+                aria-labelledby="react-use-id-3"
+                class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                data-kind="primary"
                 role="button"
+                style="--cpd-icon-button-size: 28px; padding: 4px;"
                 tabindex="0"
               >
-                <svg
-                  fill="currentColor"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="_indicator-icon_147l5_17"
+                  style="--cpd-icon-button-size: 100%;"
                 >
-                  <path
-                    d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-                  />
-                  <path
-                    d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-                  />
-                </svg>
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                    />
+                    <path
+                      d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                    />
+                  </svg>
+                </div>
               </button>
             </span>
           </li>
@@ -458,25 +539,32 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
             >
               curve25519: a_curve25519_public_key
               <button
-                aria-label="Copy"
-                class="mx_AccessibleButton mx_CopyableText_copyButton"
+                aria-labelledby="react-use-id-4"
+                class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                data-kind="primary"
                 role="button"
+                style="--cpd-icon-button-size: 28px; padding: 4px;"
                 tabindex="0"
               >
-                <svg
-                  fill="currentColor"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="_indicator-icon_147l5_17"
+                  style="--cpd-icon-button-size: 100%;"
                 >
-                  <path
-                    d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-                  />
-                  <path
-                    d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-                  />
-                </svg>
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                    />
+                    <path
+                      d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                    />
+                  </svg>
+                </div>
               </button>
             </span>
           </li>
@@ -487,7 +575,9 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
   <div
     class="mx_Dialog_buttons"
   >
-    <button>
+    <button
+      type="button"
+    >
       Back
     </button>
   </div>
@@ -506,25 +596,32 @@ exports[`<Users /> should render a single user 1`] = `
         >
           User ID: @alice:example.com
           <button
-            aria-label="Copy"
-            class="mx_AccessibleButton mx_CopyableText_copyButton"
+            aria-labelledby="react-use-id-1"
+            class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+            data-kind="primary"
             role="button"
+            style="--cpd-icon-button-size: 28px; padding: 4px;"
             tabindex="0"
           >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
             >
-              <path
-                d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-              />
-              <path
-                d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-              />
-            </svg>
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                />
+                <path
+                  d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                />
+              </svg>
+            </div>
           </button>
         </span>
       </li>
@@ -581,6 +678,7 @@ exports[`<Users /> should render a single user 1`] = `
         <li>
           <button
             class="mx_DevTools_button"
+            type="button"
           >
             <div
               class="mx_E2EIcon mx_E2EIcon_inline"
@@ -607,6 +705,7 @@ exports[`<Users /> should render a single user 1`] = `
         <li>
           <button
             class="mx_DevTools_button"
+            type="button"
           >
             <div
               class="mx_E2EIcon mx_E2EIcon_inline"
@@ -631,6 +730,7 @@ exports[`<Users /> should render a single user 1`] = `
         <li>
           <button
             class="mx_DevTools_button"
+            type="button"
           >
             <div
               class="mx_E2EIcon mx_E2EIcon_inline"
@@ -654,11 +754,21 @@ exports[`<Users /> should render a single user 1`] = `
         </li>
       </ul>
     </section>
+    <section>
+      <h2>
+        Cryptographic identity
+      </h2>
+      <i>
+        Unknown
+      </i>
+    </section>
   </div>
   <div
     class="mx_Dialog_buttons"
   >
-    <button>
+    <button
+      type="button"
+    >
       Back
     </button>
   </div>
@@ -690,13 +800,13 @@ exports[`<Users /> should render a user list 1`] = `
     </div>
     No results found
     <form
-      class="_root_19upo_16"
+      class="_root_1o4d9_17"
     >
       <div
-        class="_inline-field_19upo_32"
+        class="_inline-field_1o4d9_33"
       >
         <div
-          class="_inline-field-control_19upo_44"
+          class="_inline-field-control_1o4d9_45"
         >
           <div
             class="_container_udcm8_10"
@@ -704,7 +814,7 @@ exports[`<Users /> should render a user list 1`] = `
             <input
               checked=""
               class="_input_udcm8_24"
-              id="_r_4_"
+              id="react-use-id-1"
               role="switch"
               type="checkbox"
             />
@@ -714,11 +824,11 @@ exports[`<Users /> should render a user list 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field-body_19upo_38"
+          class="_inline-field-body_1o4d9_39"
         >
           <label
-            class="_label_19upo_59"
-            for="_r_4_"
+            class="_label_1o4d9_60"
+            for="react-use-id-1"
           >
             Only joined users
           </label>
@@ -729,7 +839,9 @@ exports[`<Users /> should render a user list 1`] = `
   <div
     class="mx_Dialog_buttons"
   >
-    <button>
+    <button
+      type="button"
+    >
       Back
     </button>
   </div>
diff --git a/apps/web/test/unit-tests/components/views/dialogs/security/ResetIdentityDialog-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/security/ResetIdentityDialog-test.tsx
index 37d8471dfd..7426016134 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/security/ResetIdentityDialog-test.tsx
+++ b/apps/web/test/unit-tests/components/views/dialogs/security/ResetIdentityDialog-test.tsx
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { act } from "react";
 import { render } from "jest-matrix-react";
 import { type CryptoApi } from "matrix-js-sdk/src/crypto-api";
-import { type Mocked } from "jest-mock";
+import { type Mocked } from "jest-mock-vitest-adapter";
 import { type MatrixClient } from "matrix-js-sdk/src/matrix";
 
 import { getMockClientWithEventEmitter } from "../../../../../test-utils";
diff --git a/apps/web/test/unit-tests/components/views/dialogs/security/SetupEncryptionDialog-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/security/SetupEncryptionDialog-test.tsx
index bfaa1b1f59..1adc969196 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/security/SetupEncryptionDialog-test.tsx
+++ b/apps/web/test/unit-tests/components/views/dialogs/security/SetupEncryptionDialog-test.tsx
@@ -79,10 +79,12 @@ function mockClient() {
     } as unknown as Mocked<CryptoApi>;
 
     const userId = "@user:server";
+    const deviceId = "ADEVICE";
 
     getMockClientWithEventEmitter({
         getCrypto: jest.fn().mockReturnValue(mockCrypto),
         getUserId: jest.fn().mockReturnValue(userId),
+        getDeviceId: jest.fn().mockReturnValue(deviceId),
         secretStorage: { isStored: jest.fn().mockReturnValue({}) },
     });
 }
diff --git a/apps/web/test/unit-tests/components/views/dialogs/security/__snapshots__/CreateSecretStorageDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/security/__snapshots__/CreateSecretStorageDialog-test.tsx.snap
index 82c0f1a869..77fed63547 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/security/__snapshots__/CreateSecretStorageDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/security/__snapshots__/CreateSecretStorageDialog-test.tsx.snap
@@ -98,6 +98,7 @@ exports[`CreateSecretStorageDialog handles the happy path 1`] = `
             class="mx_Dialog_buttons_row"
           >
             <button
+              class="cancel"
               data-testid="dialog-cancel-button"
               type="button"
             >
@@ -247,6 +248,7 @@ exports[`CreateSecretStorageDialog when there is an error fetching the backup ve
               class="mx_Dialog_buttons_row"
             >
               <button
+                class="cancel"
                 data-testid="dialog-cancel-button"
                 type="button"
               >
diff --git a/apps/web/test/unit-tests/components/views/dialogs/security/__snapshots__/ExportE2eKeysDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/security/__snapshots__/ExportE2eKeysDialog-test.tsx.snap
index cfee3dd7d7..61a055907d 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/security/__snapshots__/ExportE2eKeysDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/security/__snapshots__/ExportE2eKeysDialog-test.tsx.snap
@@ -92,7 +92,9 @@ exports[`ExportE2eKeysDialog renders 1`] = `
           type="submit"
           value="Export"
         />
-        <button>
+        <button
+          type="button"
+        >
           Cancel
         </button>
       </div>
diff --git a/apps/web/test/unit-tests/components/views/dialogs/security/__snapshots__/ImportE2eKeysDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/security/__snapshots__/ImportE2eKeysDialog-test.tsx.snap
index 37bfb2765f..d54bc4929d 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/security/__snapshots__/ImportE2eKeysDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/security/__snapshots__/ImportE2eKeysDialog-test.tsx.snap
@@ -93,7 +93,9 @@ exports[`ImportE2eKeysDialog renders 1`] = `
           type="submit"
           value="Import"
         />
-        <button>
+        <button
+          type="button"
+        >
           Cancel
         </button>
       </div>
diff --git a/apps/web/test/unit-tests/components/views/dialogs/security/__snapshots__/RestoreKeyBackupDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/dialogs/security/__snapshots__/RestoreKeyBackupDialog-test.tsx.snap
index b82770405c..9f6a7e2825 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/security/__snapshots__/RestoreKeyBackupDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/dialogs/security/__snapshots__/RestoreKeyBackupDialog-test.tsx.snap
@@ -58,6 +58,7 @@ exports[`<RestoreKeyBackupDialog /> should display an error when recovery key is
               class="mx_Dialog_buttons_row"
             >
               <button
+                class="cancel"
                 data-testid="dialog-cancel-button"
                 type="button"
               >
@@ -171,6 +172,7 @@ exports[`<RestoreKeyBackupDialog /> should not raise an error when recovery is v
               class="mx_Dialog_buttons_row"
             >
               <button
+                class="cancel"
                 data-testid="dialog-cancel-button"
                 type="button"
               >
@@ -281,6 +283,7 @@ exports[`<RestoreKeyBackupDialog /> should render 1`] = `
               class="mx_Dialog_buttons_row"
             >
               <button
+                class="cancel"
                 data-testid="dialog-cancel-button"
                 type="button"
               >
@@ -310,7 +313,7 @@ exports[`<RestoreKeyBackupDialog /> should render 1`] = `
       </div>
     </div>
     <div
-      aria-describedby="_r_2_"
+      aria-describedby="react-use-id-1"
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
@@ -545,7 +548,7 @@ exports[`<RestoreKeyBackupDialog /> should restore key backup when the key is ca
       </div>
     </div>
     <div
-      aria-describedby="_r_k_"
+      aria-describedby="react-use-id-1"
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
@@ -624,7 +627,7 @@ exports[`<RestoreKeyBackupDialog /> should restore key backup when the key is in
       </div>
     </div>
     <div
-      aria-describedby="_r_q_"
+      aria-describedby="react-use-id-1"
       aria-label="Close dialog"
       class="mx_AccessibleButton mx_Dialog_cancelButton"
       role="button"
diff --git a/apps/web/test/unit-tests/components/views/dialogs/spotlight/RoomResultContextMenus-test.tsx b/apps/web/test/unit-tests/components/views/dialogs/spotlight/RoomResultContextMenus-test.tsx
index b02d780485..ba74ec449a 100644
--- a/apps/web/test/unit-tests/components/views/dialogs/spotlight/RoomResultContextMenus-test.tsx
+++ b/apps/web/test/unit-tests/components/views/dialogs/spotlight/RoomResultContextMenus-test.tsx
@@ -11,6 +11,7 @@ import React from "react";
 import { render, screen, type RenderResult } from "jest-matrix-react";
 import { mocked } from "jest-mock";
 import { Room, type MatrixClient, PendingEventOrdering } from "matrix-js-sdk/src/matrix";
+import userEvent from "@testing-library/user-event";
 
 import { RoomResultContextMenus } from "../../../../../../src/components/views/dialogs/spotlight/RoomResultContextMenus";
 import { filterConsole, stubClient } from "../../../../../test-utils";
@@ -54,4 +55,16 @@ describe("RoomResultContextMenus", () => {
         expect(shouldShowComponent).toHaveBeenCalledWith(UIComponent.RoomOptionsMenu);
         expect(screen.queryByRole("button", { name: "Room options" })).toBeInTheDocument();
     });
+
+    it("opens the notification options menu positioned relative to its button", async () => {
+        const user = userEvent.setup();
+        mocked(shouldShowComponent).mockReturnValue(true);
+        renderRoomResultContextMenus();
+
+        const button = screen.getByRole("button", { name: "Notification options" });
+        // Opening the menu runs contextMenuBelow to position it beneath the button.
+        await user.click(button);
+
+        expect(screen.getByRole("menu")).toBeInTheDocument();
+    });
 });
diff --git a/apps/web/test/unit-tests/components/views/elements/AppTile-test.tsx b/apps/web/test/unit-tests/components/views/elements/AppTile-test.tsx
index 44f5addcc7..8d8e084849 100644
--- a/apps/web/test/unit-tests/components/views/elements/AppTile-test.tsx
+++ b/apps/web/test/unit-tests/components/views/elements/AppTile-test.tsx
@@ -24,7 +24,6 @@ import { clientAndSDKContextRenderOptions, stubClient } from "../../../../test-u
 import { Action } from "../../../../../src/dispatcher/actions";
 import dis from "../../../../../src/dispatcher/dispatcher";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
-import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
 import { RightPanelPhases } from "../../../../../src/stores/right-panel/RightPanelStorePhases";
 import RightPanelStore from "../../../../../src/stores/right-panel/RightPanelStore";
@@ -39,7 +38,7 @@ import { WidgetMessagingStore } from "../../../../../src/stores/widgets/WidgetMe
 import { ModuleRunner } from "../../../../../src/modules/ModuleRunner";
 import { ModuleApi } from "../../../../../src/modules/Api";
 import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
-import { SdkContextClass } from "../../../../../src/contexts/SDKContext";
+import { TestSDKContext } from "../../../TestSDKContext.ts";
 
 jest.mock("../../../../../src/stores/OwnProfileStore", () => ({
     OwnProfileStore: {
@@ -56,7 +55,7 @@ const realGetValue = SettingsStore.getValue;
 
 describe("AppTile", () => {
     let cli: MatrixClient;
-    let sdkContext: SdkContextClass;
+    let sdkContext: TestSDKContext;
     let r1: Room;
     let r2: Room;
     const resizeNotifier = new ResizeNotifier();
@@ -74,6 +73,8 @@ describe("AppTile", () => {
         r1 = new Room("r1", cli, "@name:example.com");
         r2 = new Room("r2", cli, "@name:example.com");
 
+        jest.spyOn(r1, "getPendingEvents").mockReturnValue([]);
+        jest.spyOn(r2, "getPendingEvents").mockReturnValue([]);
         jest.spyOn(cli, "getRoom").mockImplementation((roomId) => {
             if (roomId === "r1") return r1;
             if (roomId === "r2") return r2;
@@ -118,18 +119,19 @@ describe("AppTile", () => {
     beforeEach(async () => {
         // Do not carry across settings from previous tests
         SettingsStore.reset();
-        sdkContext = new SdkContextClass();
+        sdkContext = new TestSDKContext();
+        sdkContext._client = cli;
         // @ts-ignore
         await WidgetMessagingStore.instance.onReady();
 
         // Wake up various stores we rely on
-        WidgetLayoutStore.instance.useUnitTestClient(cli);
+        sdkContext.widgetLayoutStore.useUnitTestClient(cli);
         // @ts-ignore
-        await WidgetLayoutStore.instance.onReady();
+        await sdkContext.widgetLayoutStore.onReady();
 
-        RightPanelStore.instance.useUnitTestClient(cli);
+        sdkContext.rightPanelStore.useUnitTestClient(cli);
         // @ts-ignore
-        await RightPanelStore.instance.onReady();
+        await sdkContext.rightPanelStore.onReady();
     });
 
     afterEach(async () => {
@@ -162,13 +164,12 @@ describe("AppTile", () => {
 
         // Run initial render with room 1, and also running lifecycle methods
         const renderResult = render(
-            <MatrixClientContext.Provider value={cli}>
-                <RightPanel
-                    room={r1}
-                    resizeNotifier={resizeNotifier}
-                    permalinkCreator={new RoomPermalinkCreator(r1, r1.roomId)}
-                />
-            </MatrixClientContext.Provider>,
+            <RightPanel
+                room={r1}
+                resizeNotifier={resizeNotifier}
+                permalinkCreator={new RoomPermalinkCreator(r1, r1.roomId)}
+            />,
+            clientAndSDKContextRenderOptions(cli, sdkContext),
         );
         act(() =>
             dis.dispatch({
@@ -194,13 +195,11 @@ describe("AppTile", () => {
         );
 
         renderResult.rerender(
-            <MatrixClientContext.Provider value={cli}>
-                <RightPanel
-                    room={r2}
-                    resizeNotifier={resizeNotifier}
-                    permalinkCreator={new RoomPermalinkCreator(r2, r2.roomId)}
-                />
-            </MatrixClientContext.Provider>,
+            <RightPanel
+                room={r2}
+                resizeNotifier={resizeNotifier}
+                permalinkCreator={new RoomPermalinkCreator(r2, r2.roomId)}
+            />,
         );
 
         expect(renderResult.queryByText("Example 1")).not.toBeInTheDocument();
@@ -232,13 +231,12 @@ describe("AppTile", () => {
 
         // Run initial render with room 1, and also running lifecycle methods
         const renderResult = render(
-            <MatrixClientContext.Provider value={cli}>
-                <RightPanel
-                    room={r1}
-                    resizeNotifier={resizeNotifier}
-                    permalinkCreator={new RoomPermalinkCreator(r1, r1.roomId)}
-                />
-            </MatrixClientContext.Provider>,
+            <RightPanel
+                room={r1}
+                resizeNotifier={resizeNotifier}
+                permalinkCreator={new RoomPermalinkCreator(r1, r1.roomId)}
+            />,
+            clientAndSDKContextRenderOptions(cli, sdkContext),
         );
         act(() =>
             dis.dispatch({
@@ -279,13 +277,11 @@ describe("AppTile", () => {
             }),
         );
         renderResult.rerender(
-            <MatrixClientContext.Provider value={cli}>
-                <RightPanel
-                    room={r2}
-                    resizeNotifier={resizeNotifier}
-                    permalinkCreator={new RoomPermalinkCreator(r2, r2.roomId)}
-                />
-            </MatrixClientContext.Provider>,
+            <RightPanel
+                room={r2}
+                resizeNotifier={resizeNotifier}
+                permalinkCreator={new RoomPermalinkCreator(r2, r2.roomId)}
+            />,
         );
 
         await waitFor(() => {
@@ -341,6 +337,47 @@ describe("AppTile", () => {
         expect(ActiveWidgetStore.instance.isLive("1", "r1")).toBe(true);
     });
 
+    it("should hangup Jitsi call when room is left", async () => {
+        const app: IApp = {
+            id: "3",
+            eventId: "jitsi1",
+            roomId: "r2",
+            type: MatrixWidgetType.JitsiMeet,
+            url: "https://jitsi.example.com",
+            name: "Jitsi Conference",
+            creatorUserId: cli.getSafeUserId(),
+            avatar_url: undefined,
+        };
+
+        const { queryByRole, getByText } = render(
+            <AppTile key={app.id} app={app} room={r2} />,
+            clientAndSDKContextRenderOptions(cli, sdkContext),
+        );
+        await waitForElementToBeRemoved(() => queryByRole("progressbar"));
+
+        expect(getByText("Jitsi Conference")).toBeInTheDocument();
+
+        // Switch to room 1
+        dis.dispatch(
+            {
+                action: Action.ViewRoom,
+                room_id: "r1",
+            },
+            true,
+        );
+        jest.spyOn(ActiveWidgetStore.instance, "getWidgetPersistence").mockReturnValue(true);
+        jest.spyOn(sdkContext.legacyCallHandler, "hangupCallApp");
+        dis.dispatch(
+            {
+                action: Action.AfterLeaveRoom,
+                room_id: "r2",
+            },
+            true,
+        );
+
+        expect(sdkContext.legacyCallHandler.hangupCallApp).toHaveBeenCalledWith(app.roomId);
+    });
+
     describe("for a pinned widget", () => {
         let moveToContainerSpy: jest.SpyInstance<void, [room: Room, widget: IWidget, toContainer: Container]>;
         beforeEach(async () => {
@@ -349,9 +386,8 @@ describe("AppTile", () => {
 
         it("should render", async () => {
             const renderResult = render(
-                <MatrixClientContext.Provider value={cli}>
-                    <AppTile key={app1.id} app={app1} room={r1} />
-                </MatrixClientContext.Provider>,
+                <AppTile key={app1.id} app={app1} room={r1} />,
+                clientAndSDKContextRenderOptions(cli, sdkContext),
             );
             await waitForElementToBeRemoved(() => renderResult.queryByRole("progressbar"));
             const { asFragment } = renderResult;
@@ -361,9 +397,8 @@ describe("AppTile", () => {
 
         it("should not display the »Popout widget« button", async () => {
             const renderResult = render(
-                <MatrixClientContext.Provider value={cli}>
-                    <AppTile key={app1.id} app={app1} room={r1} />
-                </MatrixClientContext.Provider>,
+                <AppTile key={app1.id} app={app1} room={r1} />,
+                clientAndSDKContextRenderOptions(cli, sdkContext),
             );
             await waitForElementToBeRemoved(() => renderResult.queryByRole("progressbar"));
             expect(renderResult.queryByLabelText("Popout widget")).not.toBeInTheDocument();
@@ -371,20 +406,34 @@ describe("AppTile", () => {
 
         it("clicking 'minimise' should send the widget to the right", async () => {
             const renderResult = render(
-                <MatrixClientContext.Provider value={cli}>
-                    <AppTile key={app1.id} app={app1} room={r1} />
-                </MatrixClientContext.Provider>,
+                <AppTile key={app1.id} app={app1} room={r1} />,
+                clientAndSDKContextRenderOptions(cli, sdkContext),
             );
             await waitForElementToBeRemoved(() => renderResult.queryByRole("progressbar"));
             await userEvent.click(renderResult.getByLabelText("Minimise"));
             expect(moveToContainerSpy).toHaveBeenCalledWith(r1, app1, "right");
         });
 
+        it("should close right panel timeline when minimising widget", async () => {
+            const renderResult = render(
+                <AppTile key={app1.id} app={app1} room={r1} />,
+                clientAndSDKContextRenderOptions(cli, sdkContext),
+            );
+            await waitForElementToBeRemoved(() => renderResult.queryByRole("progressbar"));
+
+            jest.spyOn(sdkContext.rightPanelStore, "currentCardForRoom").mockReturnValue({
+                phase: RightPanelPhases.Timeline,
+            });
+            jest.spyOn(sdkContext.rightPanelStore, "popCard");
+
+            await userEvent.click(renderResult.getByLabelText("Minimise"));
+            expect(sdkContext.rightPanelStore.popCard).toHaveBeenCalledWith(r1.roomId);
+        });
+
         it("clicking 'maximise' should send the widget to the center", async () => {
             const renderResult = render(
-                <MatrixClientContext.Provider value={cli}>
-                    <AppTile key={app1.id} app={app1} room={r1} />
-                </MatrixClientContext.Provider>,
+                <AppTile key={app1.id} app={app1} room={r1} />,
+                clientAndSDKContextRenderOptions(cli, sdkContext),
             );
             await waitForElementToBeRemoved(() => renderResult.queryByRole("progressbar"));
             await userEvent.click(renderResult.getByLabelText("Maximise"));
@@ -400,9 +449,8 @@ describe("AppTile", () => {
 
             // userId and creatorUserId are different
             const { container, asFragment, queryByRole } = render(
-                <MatrixClientContext.Provider value={cli}>
-                    <AppTile key={app1.id} app={app1} room={r1} userId="@user1" creatorUserId="@userAnother" />
-                </MatrixClientContext.Provider>,
+                <AppTile key={app1.id} app={app1} room={r1} userId="@user1" creatorUserId="@userAnother" />,
+                clientAndSDKContextRenderOptions(cli, sdkContext),
             );
             expect(container.querySelector(".mx_Spinner")).toBeFalsy();
             expect(queryByRole("button", { name: "Continue" })).toBeInTheDocument();
@@ -418,9 +466,8 @@ describe("AppTile", () => {
 
             // userId and creatorUserId are different
             const renderResult = render(
-                <MatrixClientContext.Provider value={cli}>
-                    <AppTile key={app1.id} app={app1} room={r1} userId="@user1" creatorUserId="@userAnother" />
-                </MatrixClientContext.Provider>,
+                <AppTile key={app1.id} app={app1} room={r1} userId="@user1" creatorUserId="@userAnother" />,
+                clientAndSDKContextRenderOptions(cli, sdkContext),
             );
             await waitForElementToBeRemoved(() => renderResult.queryByRole("progressbar"));
 
@@ -440,9 +487,8 @@ describe("AppTile", () => {
 
             // userId and creatorUserId are different so legacy path would show "Continue"
             const renderResult = render(
-                <MatrixClientContext.Provider value={cli}>
-                    <AppTile key={app1.id} app={app1} room={r1} userId="@user1" creatorUserId="@userAnother" />
-                </MatrixClientContext.Provider>,
+                <AppTile key={app1.id} app={app1} room={r1} userId="@user1" creatorUserId="@userAnother" />,
+                clientAndSDKContextRenderOptions(cli, sdkContext),
             );
 
             // The new API runs async in componentDidMount, so wait for it to take effect
@@ -466,9 +512,8 @@ describe("AppTile", () => {
 
             it("clicking 'un-maximise' should send the widget to the top", async () => {
                 const renderResult = render(
-                    <MatrixClientContext.Provider value={cli}>
-                        <AppTile key={app1.id} app={app1} room={r1} />
-                    </MatrixClientContext.Provider>,
+                    <AppTile key={app1.id} app={app1} room={r1} />,
+                    clientAndSDKContextRenderOptions(cli, sdkContext),
                 );
                 await waitForElementToBeRemoved(() => renderResult.queryByRole("progressbar"));
                 await userEvent.click(renderResult.getByLabelText("Un-maximise"));
@@ -496,9 +541,8 @@ describe("AppTile", () => {
 
             it("should display the »Popout widget« button", async () => {
                 const renderResult = render(
-                    <MatrixClientContext.Provider value={cli}>
-                        <AppTile key={app1.id} app={app1} room={r1} />
-                    </MatrixClientContext.Provider>,
+                    <AppTile key={app1.id} app={app1} room={r1} />,
+                    clientAndSDKContextRenderOptions(cli, sdkContext),
                 );
                 await waitForElementToBeRemoved(() => renderResult.queryByRole("progressbar"));
                 expect(renderResult.getByLabelText("Popout widget")).toBeInTheDocument();
@@ -509,9 +553,8 @@ describe("AppTile", () => {
     describe("for a persistent app", () => {
         it("should render", async () => {
             const { asFragment, queryByRole } = render(
-                <MatrixClientContext.Provider value={cli}>
-                    <AppTile key={app1.id} app={app1} room={r1} fullWidth={true} miniMode={true} showMenubar={false} />
-                </MatrixClientContext.Provider>,
+                <AppTile key={app1.id} app={app1} room={r1} fullWidth={true} miniMode={true} showMenubar={false} />,
+                clientAndSDKContextRenderOptions(cli, sdkContext),
             );
             await waitForElementToBeRemoved(() => queryByRole("progressbar"));
             expect(asFragment()).toMatchSnapshot();
diff --git a/apps/web/test/unit-tests/components/views/elements/EventListSummary-test.tsx b/apps/web/test/unit-tests/components/views/elements/EventListSummary-test.tsx
index dec1e89484..85ca2faad6 100644
--- a/apps/web/test/unit-tests/components/views/elements/EventListSummary-test.tsx
+++ b/apps/web/test/unit-tests/components/views/elements/EventListSummary-test.tsx
@@ -21,7 +21,7 @@ import {
 import EventListSummary from "../../../../../src/components/views/elements/EventListSummary";
 import { Layout } from "../../../../../src/settings/enums/Layout";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
-import * as languageHandler from "../../../../../src/languageHandler";
+import * as languageSettings from "../../../../../src/i18n/settings";
 
 describe("EventListSummary", function () {
     const roomId = "!room:server.org";
@@ -130,7 +130,7 @@ describe("EventListSummary", function () {
 
     beforeEach(function () {
         jest.clearAllMocks();
-        jest.spyOn(languageHandler, "getUserLanguage").mockReturnValue("en-GB");
+        jest.spyOn(languageSettings, "getUserLanguage").mockReturnValue("en-GB");
     });
 
     afterAll(() => {
@@ -716,4 +716,75 @@ describe("EventListSummary", function () {
         expect(summary).toHaveTextContent("n...@d... was invited 2 times, d...@w... was invited");
         expect(summary).toMatchSnapshot();
     });
+
+    describe("profile changes", () => {
+        /**
+         * Generates a join -> join membership event with the given profile fields spliced into
+         * `content` and `prev_content`, so that the null-versus-absent cases can be exercised.
+         */
+        const generateProfileEvent = (
+            userId: string,
+            prevProfile: Record<string, string | null>,
+            profile: Record<string, string | null>,
+        ): MatrixEvent => {
+            const member = new RoomMember(roomId, userId);
+            member.name = userId.match(/@([^:]*):/)![1];
+            const e = mkEvent({
+                event: true,
+                type: "m.room.member",
+                room: roomId,
+                user: userId,
+                skey: userId,
+                content: { membership: KnownMembership.Join, ...profile },
+                prev_content: { membership: KnownMembership.Join, ...prevProfile },
+            });
+            e.event.event_id = "event0";
+            e.target = member;
+            return e;
+        };
+
+        const summaryFor = (event: MatrixEvent): string => {
+            const { container } = renderComponent({
+                events: [event],
+                children: generateTiles([event]),
+                summaryLength: 1,
+                avatarsMaxLength: 5,
+                threshold: 1,
+            });
+            return container.querySelector(".mx_GenericEventListSummary_summary")!.textContent!;
+        };
+
+        it("treats an explicit null avatar_url the same as an absent one", () => {
+            const event = generateProfileEvent("@user_1:some.domain", {}, { avatar_url: null });
+            expect(summaryFor(event)).toBe("user_1 made no changes");
+        });
+
+        it("treats an explicit null displayname the same as an absent one", () => {
+            const event = generateProfileEvent("@user_1:some.domain", {}, { displayname: null });
+            expect(summaryFor(event)).toBe("user_1 made no changes");
+        });
+
+        it("still reports a real avatar change", () => {
+            const event = generateProfileEvent(
+                "@user_1:some.domain",
+                { avatar_url: "mxc://server/old" },
+                { avatar_url: "mxc://server/new" },
+            );
+            expect(summaryFor(event)).toBe("user_1 changed their profile picture");
+        });
+
+        it("still reports a real name change", () => {
+            const event = generateProfileEvent("@user_1:some.domain", { displayname: "Old" }, { displayname: "New" });
+            expect(summaryFor(event)).toBe("user_1 changed their name");
+        });
+
+        it("still reports an avatar being removed", () => {
+            const event = generateProfileEvent(
+                "@user_1:some.domain",
+                { avatar_url: "mxc://server/old" },
+                { avatar_url: null },
+            );
+            expect(summaryFor(event)).toBe("user_1 changed their profile picture");
+        });
+    });
 });
diff --git a/apps/web/test/unit-tests/components/views/elements/FilterDropdown-test.tsx b/apps/web/test/unit-tests/components/views/elements/FilterDropdown-test.tsx
index d84cc7d691..44a3a5ec9d 100644
--- a/apps/web/test/unit-tests/components/views/elements/FilterDropdown-test.tsx
+++ b/apps/web/test/unit-tests/components/views/elements/FilterDropdown-test.tsx
@@ -33,7 +33,7 @@ describe("<FilterDropdown />", () => {
         await act(async () => {
             const button = container.querySelector('[role="button"]');
             expect(button).toBeTruthy();
-            fireEvent.click(button as Element);
+            fireEvent.click(button!);
             await flushPromises();
         });
 
diff --git a/apps/web/test/unit-tests/components/views/elements/ImageView-test.tsx b/apps/web/test/unit-tests/components/views/elements/ImageView-test.tsx
index 4a5bd83710..3043fbd118 100644
--- a/apps/web/test/unit-tests/components/views/elements/ImageView-test.tsx
+++ b/apps/web/test/unit-tests/components/views/elements/ImageView-test.tsx
@@ -85,7 +85,7 @@ describe("<ImageView />", () => {
             <ImageView src="https://example.com/image.png" name="filename.png" onFinished={jest.fn()} />,
         );
 
-        const dialog = container.querySelector('[role="dialog"]') as HTMLElement;
+        const dialog = container.querySelector<HTMLElement>('[role="dialog"]')!;
         dialog?.focus();
 
         fireEvent.keyDown(dialog!, { key: "s", code: "KeyS", ctrlKey: true });
diff --git a/apps/web/test/unit-tests/components/views/elements/LearnMore-test.tsx b/apps/web/test/unit-tests/components/views/elements/LearnMore-test.tsx
index 959affc449..40d2f77508 100644
--- a/apps/web/test/unit-tests/components/views/elements/LearnMore-test.tsx
+++ b/apps/web/test/unit-tests/components/views/elements/LearnMore-test.tsx
@@ -15,8 +15,8 @@ import InfoDialog from "../../../../../src/components/views/dialogs/InfoDialog";
 
 describe("<LearnMore />", () => {
     const defaultProps = {
-        title: "Test",
-        description: "test test test",
+        "title": "Test",
+        "description": "test test test",
         ["data-testid"]: "testid",
     };
     const getComponent = (props = {}) => <LearnMore {...defaultProps} {...props} />;
diff --git a/apps/web/test/unit-tests/components/views/elements/Pill-test.tsx b/apps/web/test/unit-tests/components/views/elements/Pill-test.tsx
index f3a49d6734..3602ac6aab 100644
--- a/apps/web/test/unit-tests/components/views/elements/Pill-test.tsx
+++ b/apps/web/test/unit-tests/components/views/elements/Pill-test.tsx
@@ -13,7 +13,8 @@ import { mocked, type Mocked } from "jest-mock";
 import { type MatrixClient, type MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 
 import dis from "../../../../../src/dispatcher/dispatcher";
-import { Pill, type PillProps, PillType } from "../../../../../src/components/views/elements/Pill";
+import { Pill, type PillProps } from "../../../../../src/components/views/elements/Pill";
+import { PillType } from "../../../../../src/components/views/elements/PillType";
 import {
     filterConsole,
     flushPromises,
@@ -26,9 +27,10 @@ import {
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
 import { Action } from "../../../../../src/dispatcher/actions";
 import { type ButtonEvent } from "../../../../../src/components/views/elements/AccessibleButton";
-import { SDKContext, SdkContextClass } from "../../../../../src/contexts/SDKContext";
+import { SDKContext } from "../../../../../src/contexts/SDKContext";
+import { SDKContextClass } from "../../../../../src/contexts/SDKContextClass";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg.ts";
-import { TestSdkContext } from "../../../TestSdkContext.ts";
+import { TestSDKContext } from "../../../TestSDKContext.ts";
 
 describe("<Pill>", () => {
     let client: Mocked<MatrixClient>;
@@ -46,11 +48,12 @@ describe("<Pill>", () => {
     const user3Id = "@user3:example.com";
     let renderResult: RenderResult;
     let pillParentClickHandler: (e: ButtonEvent) => void;
+    let sdkContext: TestSDKContext;
 
     const renderPill = (props: PillProps): void => {
         const cli = MatrixClientPeg.safeGet();
-        const mockSdkContext = new TestSdkContext();
-        mockSdkContext.client = cli;
+        const mockSdkContext = new TestSDKContext();
+        mockSdkContext._client = cli;
 
         const withDefault = {
             inMessage: true,
@@ -59,7 +62,6 @@ describe("<Pill>", () => {
         } as PillProps;
         // wrap Pill with a div to allow testing of event bubbling
         renderResult = render(
-            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
             <SDKContext.Provider value={mockSdkContext}>
                 <div onClick={pillParentClickHandler}>
                     <Pill {...withDefault} />
@@ -77,7 +79,10 @@ describe("<Pill>", () => {
 
     beforeEach(() => {
         client = mocked(stubClient());
-        SdkContextClass.instance.client = client;
+        sdkContext = new TestSDKContext();
+        // @ts-ignore Pill uses the SDKContext global
+        SDKContextClass.instance = sdkContext;
+        sdkContext._client = client;
         DMRoomMap.makeShared(client);
         room1 = new Room(room1Id, client, user1Id);
         room1.name = "Room 1";
diff --git a/apps/web/test/unit-tests/components/views/elements/QRCode-test.tsx b/apps/web/test/unit-tests/components/views/elements/QRCode-test.tsx
index ec688b286b..672ed56213 100644
--- a/apps/web/test/unit-tests/components/views/elements/QRCode-test.tsx
+++ b/apps/web/test/unit-tests/components/views/elements/QRCode-test.tsx
@@ -6,13 +6,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { render, waitFor, cleanup } from "jest-matrix-react";
+import { render, cleanup } from "jest-matrix-react";
 import React from "react";
 
+import { mockQRCodeRender, resetQRCodeMock, waitForQRCodeRender } from "../../../../test-utils/qrcode";
 import QRCode from "../../../../../src/components/views/elements/QRCode";
 
 describe("<QRCode />", () => {
     afterEach(() => {
+        resetQRCodeMock();
         cleanup();
     });
 
@@ -22,14 +24,18 @@ describe("<QRCode />", () => {
     });
 
     it("renders a QR with defaults", async () => {
+        mockQRCodeRender();
         const { container, getAllByAltText } = render(<QRCode data="asd" />);
-        await waitFor(() => getAllByAltText("QR Code").length === 1);
+        await waitForQRCodeRender();
+        expect(getAllByAltText("QR Code")).toHaveLength(1);
         expect(container).toMatchSnapshot();
     });
 
     it("renders a QR with high error correction level", async () => {
+        mockQRCodeRender();
         const { container, getAllByAltText } = render(<QRCode data="asd" errorCorrectionLevel="high" />);
-        await waitFor(() => getAllByAltText("QR Code").length === 1);
+        await waitForQRCodeRender();
+        expect(getAllByAltText("QR Code")).toHaveLength(1);
         expect(container).toMatchSnapshot();
     });
 });
diff --git a/apps/web/test/unit-tests/components/views/elements/ReplyChain-test.tsx b/apps/web/test/unit-tests/components/views/elements/ReplyChain-test.tsx
index 4f750869c6..78b0afd9f9 100644
--- a/apps/web/test/unit-tests/components/views/elements/ReplyChain-test.tsx
+++ b/apps/web/test/unit-tests/components/views/elements/ReplyChain-test.tsx
@@ -59,4 +59,78 @@ describe("ReplyChain", () => {
         await waitFor(() => expect(setQuoteExpanded).toHaveBeenCalledWith(false));
         expect(asFragment()).toMatchSnapshot();
     });
+
+    it("keeps long edited reply quotes collapsible", async () => {
+        // Jest/JSDOM won't set clientHeight/scrollHeight for us so we have to synthesise it
+        jest.spyOn(Element.prototype, "clientHeight", "get").mockReturnValue(100);
+        jest.spyOn(Element.prototype, "scrollHeight", "get").mockReturnValue(150);
+
+        const cli = stubClient();
+        const { room_id: roomId } = await cli.createRoom({});
+        const room = cli.getRoom(roomId)!;
+        const longBody = Array.from({ length: 80 }, (_, index) => `word${index}`).join(" ");
+        const editedLongBody = `${longBody} edited`;
+
+        const targetEv = mkEvent({
+            event: true,
+            type: "m.room.message",
+            user: cli.getUserId()!,
+            room: roomId,
+            id: "$event1",
+            content: {
+                body: longBody,
+                msgtype: "m.text",
+            },
+        });
+        const editEv = mkEvent({
+            event: true,
+            type: "m.room.message",
+            user: cli.getUserId()!,
+            room: roomId,
+            id: "$event1-edit",
+            content: {
+                "body": `* ${editedLongBody}`,
+                "msgtype": "m.text",
+                "m.new_content": {
+                    body: editedLongBody,
+                    msgtype: "m.text",
+                },
+            },
+        });
+        jest.spyOn(targetEv, "replacingEventDate").mockReturnValue(new Date(1993, 7, 3));
+        targetEv.makeReplaced(editEv);
+        jest.spyOn(room, "findEventById").mockReturnValue(targetEv);
+
+        const parentEv = mkEvent({
+            event: true,
+            type: "m.room.message",
+            user: cli.getUserId()!,
+            room: roomId,
+            id: "$event2",
+            content: {
+                "body": "Reply",
+                "msgtype": "m.text",
+                "m.relates_to": {
+                    "m.in_reply_to": {
+                        event_id: "$event1",
+                    },
+                },
+            },
+        });
+        const setQuoteExpanded = jest.fn();
+        const { container } = render(
+            <ReplyChain parentEv={parentEv} setQuoteExpanded={setQuoteExpanded} />,
+            withClientContextRenderOptions(cli),
+        );
+
+        await waitFor(() => expect(setQuoteExpanded).toHaveBeenCalledWith(false));
+        await waitFor(() => expect(container).toHaveTextContent(editedLongBody));
+
+        const replyTile = container.querySelector(".mx_ReplyTile");
+        expect(replyTile).not.toBeNull();
+        const annotationWrapper = replyTile!.querySelector("[data-textual-body-annotation-wrapper]");
+        expect(annotationWrapper).not.toBeNull();
+        expect(annotationWrapper).toContainElement(replyTile!.querySelector(".mx_EventTile_body"));
+        expect(annotationWrapper).toContainElement(replyTile!.querySelector("[data-textual-body-edited-marker]"));
+    });
 });
diff --git a/apps/web/test/unit-tests/components/views/elements/RoomTopic-test.tsx b/apps/web/test/unit-tests/components/views/elements/RoomTopic-test.tsx
index e53af36b71..56cd3b83eb 100644
--- a/apps/web/test/unit-tests/components/views/elements/RoomTopic-test.tsx
+++ b/apps/web/test/unit-tests/components/views/elements/RoomTopic-test.tsx
@@ -17,6 +17,9 @@ import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
 import RoomTopic from "../../../../../src/components/views/elements/RoomTopic";
 import dis from "../../../../../src/dispatcher/dispatcher";
 import { Action } from "../../../../../src/dispatcher/actions";
+import Modal from "../../../../../src/Modal";
+import { type ActionPayload } from "../../../../../src/dispatcher/payloads";
+import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 
 jest.mock("../../../../../src/dispatcher/dispatcher");
 
@@ -94,6 +97,62 @@ describe("<RoomTopic/>", () => {
         expect(dis.fire).toHaveBeenCalledWith(Action.ShowRoomTopic);
     });
 
+    describe("the edit topic button in the topic dialog", () => {
+        /**
+         * Render the topic, open the topic dialog and render its contents, so the
+         * "Edit topic" button can be clicked.
+         * @param isSpaceRoom whether the room should report itself as a space
+         */
+        function renderTopicDialog(isSpaceRoom: boolean) {
+            const room = createRoom("a topic");
+            jest.spyOn(room, "isSpaceRoom").mockReturnValue(isSpaceRoom);
+            jest.spyOn(room.currentState, "maySendStateEvent").mockReturnValue(true);
+
+            const createDialog = jest
+                .spyOn(Modal, "createDialog")
+                .mockReturnValue({ close: jest.fn() } as unknown as ReturnType<typeof Modal.createDialog>);
+
+            render(<RoomTopic room={room} />, {
+                wrapper: ({ children }) => (
+                    <MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>
+                        <LinkedTextContext.Provider value={{}}>{children}</LinkedTextContext.Provider>
+                    </MatrixClientContext.Provider>
+                ),
+            });
+
+            // The dispatcher is mocked for this suite, so drive the registered handler directly
+            // instead of firing Action.ShowRoomTopic through it.
+            const handler = jest.mocked(dis.register).mock.calls.at(-1)![0] as (payload: ActionPayload) => void;
+            handler({ action: Action.ShowRoomTopic });
+
+            const { description } = createDialog.mock.calls.at(-1)![1] as { description: React.ReactNode };
+            render(
+                <LinkedTextContext.Provider value={{}}>
+                    <>{description}</>
+                </LinkedTextContext.Provider>,
+            );
+
+            return room;
+        }
+
+        it("opens space settings for a space", () => {
+            const room = renderTopicDialog(true);
+
+            fireEvent.click(screen.getByRole("button", { name: "Edit topic" }));
+
+            expect(dis.dispatch).toHaveBeenCalledWith({ action: Action.OpenSpaceSettings, space: room });
+            expect(dis.dispatch).not.toHaveBeenCalledWith({ action: "open_room_settings" });
+        });
+
+        it("opens room settings for a room", () => {
+            renderTopicDialog(false);
+
+            fireEvent.click(screen.getByRole("button", { name: "Edit topic" }));
+
+            expect(dis.dispatch).toHaveBeenCalledWith({ action: "open_room_settings" });
+        });
+    });
+
     it("should open the tooltip when hovering a text", async () => {
         const topic = "room topic";
         renderRoom(topic);
diff --git a/apps/web/test/unit-tests/components/views/elements/SearchWarning-test.tsx b/apps/web/test/unit-tests/components/views/elements/SearchWarning-test.tsx
index 117870d7e9..6722bd0dc8 100644
--- a/apps/web/test/unit-tests/components/views/elements/SearchWarning-test.tsx
+++ b/apps/web/test/unit-tests/components/views/elements/SearchWarning-test.tsx
@@ -1,4 +1,5 @@
 /*
+Copyright 2026 hayaksi1
 Copyright 2024 New Vector Ltd.
 Copyright 2024 The Matrix.org Foundation C.I.C.
 
@@ -6,15 +7,76 @@ 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 { render } from "jest-matrix-react";
+import { act, render } from "jest-matrix-react";
 import React from "react";
+import { type Room } from "matrix-js-sdk/src/matrix";
 
 import SdkConfig from "../../../../../src/SdkConfig";
 import SearchWarning, { WarningKind } from "../../../../../src/components/views/elements/SearchWarning";
+import EventIndexPeg from "../../../../../src/indexing/EventIndexPeg";
+import { type default as EventIndex } from "../../../../../src/indexing/EventIndex";
+import { SearchScope } from "../../../../../src/Searching";
+
+const SEARCHED_ROOM = "!searched:example.org";
+const OTHER_ROOM = "!other:example.org";
+const PARTIAL_WARNING = "Results may be incomplete because your search index is still being built.";
+
+/**
+ * A minimal fake EventIndex exposing only the surface that SearchWarning consumes:
+ * `crawlingRooms()` (the rooms with outstanding crawler checkpoints), `isRoomIndexed()` (whether
+ * the index holds any events for a room) and the `changedCheckpoint` emitter.
+ */
+class FakeEventIndex {
+    private listeners = new Map<string, Set<(...args: any[]) => void>>();
+
+    /**
+     * @param crawling Rooms with an outstanding crawler checkpoint.
+     * @param indexed Rooms the index holds events for. Defaults to `undefined`, meaning
+     *     `isRoomIndexed` resolves `undefined`, as it does when there is no index manager.
+     */
+    public constructor(
+        private crawling: string[] = [],
+        private indexed?: string[],
+    ) {}
+
+    public crawlingRooms(): { crawlingRooms: Set<string>; totalRooms: Set<string> } {
+        return { crawlingRooms: new Set(this.crawling), totalRooms: new Set(this.crawling) };
+    }
+
+    public async isRoomIndexed(roomId: string): Promise<boolean | undefined> {
+        return this.indexed === undefined ? undefined : this.indexed.includes(roomId);
+    }
+
+    public on(event: string, listener: (...args: any[]) => void): void {
+        if (!this.listeners.has(event)) this.listeners.set(event, new Set());
+        this.listeners.get(event)!.add(listener);
+    }
+
+    public removeListener(event: string, listener: (...args: any[]) => void): void {
+        this.listeners.get(event)?.delete(listener);
+    }
+
+    /**
+     * Test helper: simulate the crawler advancing (or finishing, when `crawling` is empty).
+     *
+     * The real index emits only the globally-current room, which cannot answer a per-room
+     * question, so `currentRoom` is passed through purely to prove consumers ignore it.
+     */
+    public emitChangedCheckpoint(crawling: string[], currentRoom: Room | null = null): void {
+        this.crawling = crawling;
+        this.listeners.get("changedCheckpoint")?.forEach((listener) => listener(currentRoom));
+    }
+}
 
 describe("<SearchWarning />", () => {
+    afterEach(() => {
+        EventIndexPeg.index = null;
+        EventIndexPeg.error = undefined;
+    });
+
     describe("with desktop builds available", () => {
         beforeEach(() => {
+            EventIndexPeg.index = null;
             SdkConfig.put({
                 brand: "Element",
                 desktop_builds: {
@@ -42,4 +104,292 @@ describe("<SearchWarning />", () => {
             expect(asFragment()).toMatchSnapshot();
         });
     });
+
+    describe("with the event index present", () => {
+        const setIndex = (index: FakeEventIndex): void => {
+            EventIndexPeg.index = index as unknown as EventIndex;
+        };
+
+        /** Let the pending isRoomIndexed() lookup settle and React re-render off the back of it. */
+        const settle = async (): Promise<void> => {
+            await act(async () => {});
+        };
+
+        it("warns a room-scoped search while the searched room is still being crawled", async () => {
+            setIndex(new FakeEventIndex([SEARCHED_ROOM], []));
+
+            const { queryByText, queryByRole } = render(
+                <SearchWarning
+                    isRoomEncrypted={true}
+                    kind={WarningKind.Search}
+                    scope={SearchScope.Room}
+                    roomId={SEARCHED_ROOM}
+                />,
+            );
+            await settle();
+
+            expect(queryByText(PARTIAL_WARNING)).toBeInTheDocument();
+            // The notice appears dynamically while the panel is open, so it must be a live region (#32253).
+            expect(queryByRole("status")).toBeInTheDocument();
+        });
+
+        it("does not warn a room-scoped search when only an unrelated room is still being crawled", async () => {
+            setIndex(new FakeEventIndex([OTHER_ROOM], [SEARCHED_ROOM]));
+
+            const { container } = render(
+                <SearchWarning
+                    isRoomEncrypted={true}
+                    kind={WarningKind.Search}
+                    scope={SearchScope.Room}
+                    roomId={SEARCHED_ROOM}
+                />,
+            );
+            await settle();
+
+            expect(container).toBeEmptyDOMElement();
+        });
+
+        it("warns a room-scoped search when the index holds no events for the searched room", async () => {
+            // Nothing is queued for the searched room, but it has never been indexed: this is how a
+            // room looks before its checkpoint has been seeded, and the crawl set alone cannot see
+            // it. The crawler is still working through another room, so indexing is still under way.
+            setIndex(new FakeEventIndex([OTHER_ROOM], []));
+
+            const { queryByText } = render(
+                <SearchWarning
+                    isRoomEncrypted={true}
+                    kind={WarningKind.Search}
+                    scope={SearchScope.Room}
+                    roomId={SEARCHED_ROOM}
+                />,
+            );
+            await settle();
+
+            expect(queryByText(PARTIAL_WARNING)).toBeInTheDocument();
+        });
+
+        it("does not warn about an unindexed room once the crawler has drained", async () => {
+            // The index holds nothing for the room, but the crawler has no work left, so nothing
+            // more is coming: the warning would never clear itself, and its claim that the index is
+            // "still being built" would be untrue.
+            setIndex(new FakeEventIndex([], []));
+
+            const { container } = render(
+                <SearchWarning
+                    isRoomEncrypted={true}
+                    kind={WarningKind.Search}
+                    scope={SearchScope.Room}
+                    roomId={SEARCHED_ROOM}
+                />,
+            );
+            await settle();
+
+            expect(container).toBeEmptyDOMElement();
+        });
+
+        it("keeps an earned warning up while an unrelated checkpoint change is re-checked", async () => {
+            // The warning here is earned asynchronously: the room is not queued, but the index
+            // holds nothing for it. An unrelated crawler transition must not blink it off while
+            // the fresh lookup is in flight.
+            const index = new FakeEventIndex([OTHER_ROOM], []);
+            setIndex(index);
+
+            const { queryByText } = render(
+                <SearchWarning
+                    isRoomEncrypted={true}
+                    kind={WarningKind.Search}
+                    scope={SearchScope.Room}
+                    roomId={SEARCHED_ROOM}
+                />,
+            );
+            await settle();
+            expect(queryByText(PARTIAL_WARNING)).toBeInTheDocument();
+
+            // The crawler moves on to a third room; nothing about the searched room changed.
+            act(() => {
+                index.emitChangedCheckpoint([OTHER_ROOM, "!third:example.org"]);
+            });
+
+            // Asserted before the lookup settles: the warning must not have been dropped.
+            expect(queryByText(PARTIAL_WARNING)).toBeInTheDocument();
+
+            await settle();
+            expect(queryByText(PARTIAL_WARNING)).toBeInTheDocument();
+        });
+
+        it("treats an unanswerable isRoomIndexed as no evidence for a room-scoped search", async () => {
+            setIndex(new FakeEventIndex([OTHER_ROOM], undefined));
+
+            const { container } = render(
+                <SearchWarning
+                    isRoomEncrypted={true}
+                    kind={WarningKind.Search}
+                    scope={SearchScope.Room}
+                    roomId={SEARCHED_ROOM}
+                />,
+            );
+            await settle();
+
+            expect(container).toBeEmptyDOMElement();
+        });
+
+        it("does not carry a warning from a previously searched room across a scope change", async () => {
+            // The crawler is working through OTHER_ROOM, so an all-rooms search warns. Switching to
+            // a room-scoped search of a fully-indexed room must not leave that warning on screen
+            // while the isRoomIndexed lookup for the new room is in flight.
+            setIndex(new FakeEventIndex([OTHER_ROOM], [SEARCHED_ROOM]));
+
+            const { queryByText, rerender } = render(
+                <SearchWarning isRoomEncrypted={true} kind={WarningKind.Search} scope={SearchScope.All} />,
+            );
+            await settle();
+            expect(queryByText(PARTIAL_WARNING)).toBeInTheDocument();
+
+            rerender(
+                <SearchWarning
+                    isRoomEncrypted={true}
+                    kind={WarningKind.Search}
+                    scope={SearchScope.Room}
+                    roomId={SEARCHED_ROOM}
+                />,
+            );
+
+            // Asserted before settling: the stale answer must be gone as soon as the effect for
+            // the new scope has run, rather than lingering for the isRoomIndexed round-trip.
+            expect(queryByText(PARTIAL_WARNING)).not.toBeInTheDocument();
+        });
+
+        it("warns an all-rooms search while any room is still being crawled", async () => {
+            setIndex(new FakeEventIndex([OTHER_ROOM], []));
+
+            const { queryByText } = render(
+                <SearchWarning isRoomEncrypted={true} kind={WarningKind.Search} scope={SearchScope.All} />,
+            );
+            await settle();
+
+            expect(queryByText(PARTIAL_WARNING)).toBeInTheDocument();
+        });
+
+        it("falls back to the global check when the searched room is not yet known", async () => {
+            // RoomView can render before a room alias has resolved to an id.
+            setIndex(new FakeEventIndex([OTHER_ROOM], []));
+
+            const { queryByText } = render(
+                <SearchWarning
+                    isRoomEncrypted={true}
+                    kind={WarningKind.Search}
+                    scope={SearchScope.Room}
+                    roomId={undefined}
+                />,
+            );
+            await settle();
+
+            expect(queryByText(PARTIAL_WARNING)).toBeInTheDocument();
+        });
+
+        it("renders nothing once the index has finished crawling", async () => {
+            setIndex(new FakeEventIndex([], []));
+
+            const { container } = render(
+                <SearchWarning isRoomEncrypted={true} kind={WarningKind.Search} scope={SearchScope.All} />,
+            );
+            await settle();
+
+            expect(container).toBeEmptyDOMElement();
+        });
+
+        it("does not warn for the Files kind even while crawling", async () => {
+            setIndex(new FakeEventIndex([SEARCHED_ROOM], []));
+
+            const { container } = render(<SearchWarning isRoomEncrypted={true} kind={WarningKind.Files} />);
+            await settle();
+
+            expect(container).toBeEmptyDOMElement();
+        });
+
+        it("clears the warning when the searched room's checkpoint drains", async () => {
+            const index = new FakeEventIndex([SEARCHED_ROOM], [SEARCHED_ROOM]);
+            setIndex(index);
+
+            const { queryByText } = render(
+                <SearchWarning
+                    isRoomEncrypted={true}
+                    kind={WarningKind.Search}
+                    scope={SearchScope.Room}
+                    roomId={SEARCHED_ROOM}
+                />,
+            );
+            await settle();
+
+            expect(queryByText(PARTIAL_WARNING)).toBeInTheDocument();
+
+            await act(async () => {
+                index.emitChangedCheckpoint([]);
+            });
+
+            expect(queryByText(PARTIAL_WARNING)).not.toBeInTheDocument();
+        });
+
+        it("keeps warning when the crawler moves to another room but the searched room is still queued", async () => {
+            const index = new FakeEventIndex([SEARCHED_ROOM, OTHER_ROOM], [SEARCHED_ROOM]);
+            setIndex(index);
+
+            const { queryByText } = render(
+                <SearchWarning
+                    isRoomEncrypted={true}
+                    kind={WarningKind.Search}
+                    scope={SearchScope.Room}
+                    roomId={SEARCHED_ROOM}
+                />,
+            );
+            await settle();
+
+            // The event payload names a different room; the searched room is still outstanding, so
+            // the warning must survive. This fails if the handler trusts the payload.
+            await act(async () => {
+                index.emitChangedCheckpoint([SEARCHED_ROOM], { roomId: OTHER_ROOM } as Room);
+            });
+
+            expect(queryByText(PARTIAL_WARNING)).toBeInTheDocument();
+        });
+
+        it("renders nothing when the room is not encrypted even while crawling", async () => {
+            setIndex(new FakeEventIndex([SEARCHED_ROOM], []));
+
+            const { container } = render(
+                <SearchWarning
+                    isRoomEncrypted={false}
+                    kind={WarningKind.Search}
+                    scope={SearchScope.Room}
+                    roomId={SEARCHED_ROOM}
+                />,
+            );
+
+            expect(container).toBeEmptyDOMElement();
+        });
+    });
+
+    describe("with no event index (web build)", () => {
+        beforeEach(() => {
+            EventIndexPeg.index = null;
+            EventIndexPeg.error = undefined;
+            SdkConfig.put({
+                brand: "Element",
+                desktop_builds: {
+                    available: true,
+                    logo: "https://logo",
+                    url: "https://url",
+                },
+            });
+        });
+
+        it("still renders the desktop/enable-search warning", () => {
+            const { container } = render(<SearchWarning isRoomEncrypted={true} kind={WarningKind.Search} />);
+
+            expect(container.querySelector(".mx_SearchWarning")).toBeInTheDocument();
+            expect(container.textContent).toContain("to search encrypted messages");
+            // It is the desktop/enable-search affordance, not the partial-index notice.
+            expect(container.textContent).not.toContain("your search index is still being built");
+        });
+    });
 });
diff --git a/apps/web/test/unit-tests/components/views/elements/SyntaxHighlight-test.tsx b/apps/web/test/unit-tests/components/views/elements/SyntaxHighlight-test.tsx
index 3d442a6f4d..8f8105eaf9 100644
--- a/apps/web/test/unit-tests/components/views/elements/SyntaxHighlight-test.tsx
+++ b/apps/web/test/unit-tests/components/views/elements/SyntaxHighlight-test.tsx
@@ -22,6 +22,7 @@ describe("<SyntaxHighlight />", () => {
     it.each(["json", "javascript", "css"])("uses the provided language", async (lang) => {
         const mock = jest.spyOn(hljs, "highlight");
 
+        // oxlint-disable-next-line react/jsx-no-comment-textnodes
         const { container } = render(<SyntaxHighlight language={lang}>// Hello, World</SyntaxHighlight>);
         await waitFor(() => expect(container.querySelector(`.language-${lang}`)).toBeTruthy());
 
diff --git a/apps/web/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/apps/web/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap
index a8ced5dbfc..df321554c2 100644
--- a/apps/web/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/elements/__snapshots__/AppTile-test.tsx.snap
@@ -27,14 +27,14 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
             aria-label="Options"
             class="mx_AccessibleButton mx_BaseCard_header_title_button--option"
             data-state="closed"
-            id="radix-_r_0_"
+            id="radix-react-use-id-1"
             role="button"
             tabindex="0"
             type="button"
           />
         </div>
         <button
-          aria-labelledby="_r_2_"
+          aria-labelledby="react-use-id-2"
           class="_icon-button_1215g_8"
           data-kind="secondary"
           data-testid="base-card-close-button"
@@ -177,7 +177,7 @@ exports[`AppTile for a pinned widget should render 1`] = `
           aria-label="Options"
           class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
           data-state="closed"
-          id="radix-_r_1k_"
+          id="radix-react-use-id-1"
           role="button"
           tabindex="0"
           type="button"
@@ -293,7 +293,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
           aria-label="Options"
           class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
           data-state="closed"
-          id="radix-_r_30_"
+          id="radix-react-use-id-1"
           role="button"
           tabindex="0"
           type="button"
@@ -349,8 +349,8 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
             <span>
               Using this widget may share data 
               <div
-                aria-describedby="_r_33_"
-                aria-labelledby="_r_32_"
+                aria-describedby="react-use-id-2"
+                aria-labelledby="react-use-id-3"
                 class="mx_TextWithTooltip_target mx_TextWithTooltip_target--helpIcon"
               >
                 <svg
@@ -488,7 +488,7 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
                 aria-label="Options"
                 class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
                 data-state="closed"
-                id="radix-_r_10_"
+                id="radix-react-use-id-1"
                 role="button"
                 tabindex="0"
                 type="button"
diff --git a/apps/web/test/unit-tests/components/views/elements/__snapshots__/EventListSummary-test.tsx.snap b/apps/web/test/unit-tests/components/views/elements/__snapshots__/EventListSummary-test.tsx.snap
index 6c30e0ce87..45ca820208 100644
--- a/apps/web/test/unit-tests/components/views/elements/__snapshots__/EventListSummary-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/elements/__snapshots__/EventListSummary-test.tsx.snap
@@ -7,6 +7,7 @@ exports[`EventListSummary correctly identifies transitions 1`] = `
   <span>
     <button
       class="mx_EventTile_spoiler"
+      type="button"
     >
        
       <span
@@ -34,6 +35,7 @@ exports[`EventListSummary correctly orders sequences of transitions by the order
   <span>
     <button
       class="mx_EventTile_spoiler"
+      type="button"
     >
        
       <span
@@ -131,6 +133,7 @@ exports[`EventListSummary handles many users following the same sequence of memb
     <span>
       <button
         class="mx_EventTile_spoiler"
+        type="button"
       >
          
         <span
@@ -155,6 +158,7 @@ exports[`EventListSummary handles multiple users following the same sequence of
     <span>
       <button
         class="mx_EventTile_spoiler"
+        type="button"
       >
          
         <span
@@ -257,6 +261,7 @@ exports[`EventListSummary truncates multiple sequences of repetitions with other
   <span>
     <button
       class="mx_EventTile_spoiler"
+      type="button"
     >
        
       <span
diff --git a/apps/web/test/unit-tests/components/views/elements/__snapshots__/FacePile-test.tsx.snap b/apps/web/test/unit-tests/components/views/elements/__snapshots__/FacePile-test.tsx.snap
index 2f83ff1844..dd049f4816 100644
--- a/apps/web/test/unit-tests/components/views/elements/__snapshots__/FacePile-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/elements/__snapshots__/FacePile-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<FacePile /> renders with a tooltip 1`] = `
 <DocumentFragment>
   <div
-    aria-labelledby="_r_0_"
+    aria-labelledby="react-use-id-1"
     class="mx_AccessibleButton mx_FacePile"
     role="button"
     tabindex="0"
diff --git a/apps/web/test/unit-tests/components/views/elements/__snapshots__/ImageView-test.tsx.snap b/apps/web/test/unit-tests/components/views/elements/__snapshots__/ImageView-test.tsx.snap
index 9ac6b166ba..de7a30b5f8 100644
--- a/apps/web/test/unit-tests/components/views/elements/__snapshots__/ImageView-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/elements/__snapshots__/ImageView-test.tsx.snap
@@ -21,7 +21,7 @@ exports[`<ImageView /> renders correctly 1`] = `
         class="mx_ImageView_toolbar"
       >
         <div
-          aria-describedby="_r_2_"
+          aria-describedby="react-use-id-1"
           aria-label="Zoom out"
           class="mx_AccessibleButton mx_ImageView_button"
           role="button"
diff --git a/apps/web/test/unit-tests/components/views/elements/__snapshots__/InfoTooltip-test.tsx.snap b/apps/web/test/unit-tests/components/views/elements/__snapshots__/InfoTooltip-test.tsx.snap
index 70f58d4bd3..0f4bd43686 100644
--- a/apps/web/test/unit-tests/components/views/elements/__snapshots__/InfoTooltip-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/elements/__snapshots__/InfoTooltip-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`InfoTooltip should show tooltip on hover 1`] = `
 <DocumentFragment>
   <div
-    aria-describedby="_r_2_"
+    aria-describedby="react-use-id-1"
     class="mx_InfoTooltip"
     tabindex="0"
   >
diff --git a/apps/web/test/unit-tests/components/views/elements/__snapshots__/LabelledCheckbox-test.tsx.snap b/apps/web/test/unit-tests/components/views/elements/__snapshots__/LabelledCheckbox-test.tsx.snap
index 7a3bbe4ac1..20a0ca7cfd 100644
--- a/apps/web/test/unit-tests/components/views/elements/__snapshots__/LabelledCheckbox-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/elements/__snapshots__/LabelledCheckbox-test.tsx.snap
@@ -6,19 +6,19 @@ exports[`<LabelledCheckbox /> should render with byline of "this is a byline" 1`
     class="mx_LabelledCheckbox"
   >
     <form
-      class="_root_19upo_16"
+      class="_root_1o4d9_17"
     >
       <div
-        class="_inline-field_19upo_32"
+        class="_inline-field_1o4d9_33"
       >
         <div
-          class="_inline-field-control_19upo_44"
+          class="_inline-field-control_1o4d9_45"
         >
           <div
             class="_container_153f2_10"
           >
             <input
-              aria-describedby="_r_4_"
+              aria-describedby="react-use-id-1"
               checked=""
               class="_input_153f2_18"
               id="checkbox_vY7Q4uEh9K"
@@ -43,10 +43,10 @@ exports[`<LabelledCheckbox /> should render with byline of "this is a byline" 1`
           </div>
         </div>
         <div
-          class="_inline-field-body_19upo_38"
+          class="_inline-field-body_1o4d9_39"
         >
           <label
-            class="_label_19upo_59"
+            class="_label_1o4d9_60"
             for="checkbox_vY7Q4uEh9K"
           >
             <span
@@ -56,8 +56,8 @@ exports[`<LabelledCheckbox /> should render with byline of "this is a byline" 1`
             </span>
           </label>
           <span
-            class="_message_19upo_85 _help-message_19upo_91"
-            id="_r_4_"
+            class="_message_1o4d9_86 _help-message_1o4d9_92"
+            id="react-use-id-1"
           >
             this is a byline
           </span>
@@ -74,13 +74,13 @@ exports[`<LabelledCheckbox /> should render with byline of undefined 1`] = `
     class="mx_LabelledCheckbox"
   >
     <form
-      class="_root_19upo_16"
+      class="_root_1o4d9_17"
     >
       <div
-        class="_inline-field_19upo_32"
+        class="_inline-field_1o4d9_33"
       >
         <div
-          class="_inline-field-control_19upo_44"
+          class="_inline-field-control_1o4d9_45"
         >
           <div
             class="_container_153f2_10"
@@ -110,10 +110,10 @@ exports[`<LabelledCheckbox /> should render with byline of undefined 1`] = `
           </div>
         </div>
         <div
-          class="_inline-field-body_19upo_38"
+          class="_inline-field-body_1o4d9_39"
         >
           <label
-            class="_label_19upo_59"
+            class="_label_1o4d9_60"
             for="checkbox_vY7Q4uEh9K"
           >
             <span
diff --git a/apps/web/test/unit-tests/components/views/elements/__snapshots__/ReplyChain-test.tsx.snap b/apps/web/test/unit-tests/components/views/elements/__snapshots__/ReplyChain-test.tsx.snap
index 3201fd4289..d593ca8084 100644
--- a/apps/web/test/unit-tests/components/views/elements/__snapshots__/ReplyChain-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/elements/__snapshots__/ReplyChain-test.tsx.snap
@@ -44,7 +44,7 @@ exports[`ReplyChain should call setQuoteExpanded if chain is longer than 2 lines
               </div>
             </div>
             <div
-              class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
+              class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"
             >
               <div
                 class="mx_EventTile_body translate"
diff --git a/apps/web/test/unit-tests/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap b/apps/web/test/unit-tests/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
index 587bce8906..0c4e9c7d38 100644
--- a/apps/web/test/unit-tests/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
@@ -3,8 +3,8 @@
 exports[`<RoomFacePile /> renders 1`] = `
 <DocumentFragment>
   <div
-    aria-describedby="_r_1_"
-    aria-labelledby="_r_0_"
+    aria-describedby="react-use-id-1"
+    aria-labelledby="react-use-id-2"
     class="mx_AccessibleButton mx_FacePile"
     role="button"
     tabindex="0"
diff --git a/apps/web/test/unit-tests/components/views/elements/__snapshots__/SettingsDropdown-test.tsx.snap b/apps/web/test/unit-tests/components/views/elements/__snapshots__/SettingsDropdown-test.tsx.snap
index 2ecb0a7038..21e244a88b 100644
--- a/apps/web/test/unit-tests/components/views/elements/__snapshots__/SettingsDropdown-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/elements/__snapshots__/SettingsDropdown-test.tsx.snap
@@ -7,7 +7,7 @@ exports[`<SettingsDropdown /> should render a disabled setting 1`] = `
   >
     <label
       class="mx_SettingsDropdown_label"
-      for="_r_0_"
+      for="react-use-id-1"
     >
       <span
         class="mx_SettingsDropdown_labelText"
@@ -19,12 +19,12 @@ exports[`<SettingsDropdown /> should render a disabled setting 1`] = `
       class="mx_Dropdown mx_Dropdown_disabled"
     >
       <div
-        aria-describedby="_r_0__value"
+        aria-describedby="react-use-id-1_value"
         aria-disabled="true"
         aria-expanded="false"
         aria-haspopup="listbox"
         aria-label="Open %(brand)s when you log in to your computer"
-        aria-owns="_r_0__input"
+        aria-owns="react-use-id-1_input"
         class="mx_AccessibleButton mx_Dropdown_input mx_no_textinput mx_AccessibleButton_disabled"
         disabled=""
         role="button"
@@ -32,7 +32,7 @@ exports[`<SettingsDropdown /> should render a disabled setting 1`] = `
       >
         <div
           class="mx_Dropdown_option"
-          id="_r_0__value"
+          id="react-use-id-1_value"
         >
           <div>
             No
diff --git a/apps/web/test/unit-tests/components/views/elements/__snapshots__/SettingsField-test.tsx.snap b/apps/web/test/unit-tests/components/views/elements/__snapshots__/SettingsField-test.tsx.snap
index 15d1fd5eb8..bd80e562ec 100644
--- a/apps/web/test/unit-tests/components/views/elements/__snapshots__/SettingsField-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/elements/__snapshots__/SettingsField-test.tsx.snap
@@ -3,14 +3,14 @@
 exports[`<SettingsField /> should render with the default label 1`] = `
 <DocumentFragment>
   <form
-    class="_root_19upo_16"
+    class="_root_1o4d9_17"
   >
     <div
-      class="_field_19upo_26"
+      class="_field_1o4d9_27"
     >
       <label
-        class="_label_19upo_59"
-        for="radix-_r_0_"
+        class="_label_1o4d9_60"
+        for="radix-react-use-id-1"
       >
         Element Call URL
       </label>
@@ -19,7 +19,7 @@ exports[`<SettingsField /> should render with the default label 1`] = `
       >
         <input
           class="_control_d83jn_10"
-          id="radix-_r_0_"
+          id="radix-react-use-id-1"
           name="input"
           title=""
           value=""
diff --git a/apps/web/test/unit-tests/components/views/elements/crypto/VerificationQRCode-test.tsx b/apps/web/test/unit-tests/components/views/elements/crypto/VerificationQRCode-test.tsx
index 8e7acf742e..13f2206da0 100644
--- a/apps/web/test/unit-tests/components/views/elements/crypto/VerificationQRCode-test.tsx
+++ b/apps/web/test/unit-tests/components/views/elements/crypto/VerificationQRCode-test.tsx
@@ -6,22 +6,26 @@ 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 { cleanup, render, waitFor } from "jest-matrix-react";
+import { cleanup, render } from "jest-matrix-react";
 import React from "react";
 
+import { mockQRCodeRender, resetQRCodeMock, waitForQRCodeRender } from "../../../../../test-utils/qrcode";
 import VerificationQRCode from "../../../../../../src/components/views/elements/crypto/VerificationQRCode";
 
 describe("<VerificationQRCode />", () => {
     afterEach(() => {
+        resetQRCodeMock();
         cleanup();
     });
 
     it("renders a QR code", async () => {
+        mockQRCodeRender();
         const { container, getAllByAltText } = render(
             <VerificationQRCode qrCodeBytes={new Uint8ClampedArray(Buffer.from("asd"))} />,
         );
         // wait for the spinner to go away
-        await waitFor(() => getAllByAltText("QR Code").length === 1);
+        await waitForQRCodeRender();
+        expect(getAllByAltText("QR Code")).toHaveLength(1);
         expect(container).toMatchSnapshot();
     });
 });
diff --git a/apps/web/test/unit-tests/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap b/apps/web/test/unit-tests/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap
index 6fc5011bc6..2089ee8544 100644
--- a/apps/web/test/unit-tests/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/location/__snapshots__/LocationShareMenu-test.tsx.snap
@@ -19,20 +19,20 @@ exports[`<LocationShareMenu /> with live location disabled goes to labs flag scr
     Please note: this is a labs feature using a temporary implementation. This means you will not be able to delete your location history, and advanced users will be able to see your location history even after you stop sharing your live location with this room.
   </p>
   <form
-    class="_root_19upo_16"
+    class="_root_1o4d9_17"
   >
     <div
-      class="_inline-field_19upo_32"
+      class="_inline-field_1o4d9_33"
     >
       <div
-        class="_inline-field-control_19upo_44"
+        class="_inline-field-control_1o4d9_45"
       >
         <div
           class="_container_udcm8_10"
         >
           <input
             class="_input_udcm8_24"
-            id="_r_0_"
+            id="react-use-id-1"
             role="switch"
             type="checkbox"
           />
@@ -42,11 +42,11 @@ exports[`<LocationShareMenu /> with live location disabled goes to labs flag scr
         </div>
       </div>
       <div
-        class="_inline-field-body_19upo_38"
+        class="_inline-field-body_1o4d9_39"
       >
         <label
-          class="_label_19upo_59"
-          for="_r_0_"
+          class="_label_1o4d9_60"
+          for="react-use-id-1"
         >
           Enable live location sharing
         </label>
diff --git a/apps/web/test/unit-tests/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap
index 690e1e02fc..894d6eea75 100644
--- a/apps/web/test/unit-tests/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap
@@ -32,7 +32,7 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
     class="mx_ZoomButtons"
   >
     <div
-      aria-describedby="_r_6_"
+      aria-describedby="react-use-id-1"
       aria-label="Zoom in"
       class="mx_AccessibleButton mx_ZoomButtons_button"
       data-testid="map-zoom-in-button"
diff --git a/apps/web/test/unit-tests/components/views/messages/MAudioBody-test.tsx b/apps/web/test/unit-tests/components/views/messages/MAudioBody-test.tsx
index e2e2245c13..2198ce1e64 100644
--- a/apps/web/test/unit-tests/components/views/messages/MAudioBody-test.tsx
+++ b/apps/web/test/unit-tests/components/views/messages/MAudioBody-test.tsx
@@ -17,6 +17,15 @@ import { type MediaEventHelper } from "../../../../../src/utils/MediaEventHelper
 
 describe("<MAudioBody />", () => {
     let event: MatrixEvent;
+
+    const mediaEventHelper = {
+        sourceBlob: {
+            value: {
+                arrayBuffer: () => new ArrayBuffer(8),
+            },
+        },
+    } as unknown as MediaEventHelper;
+
     beforeEach(() => {
         const playback = new MockedPlayback(PlaybackState.Decoding, 50, 10) as unknown as Playback;
         jest.spyOn(PlaybackManager.instance, "createPlaybackInstance").mockReturnValue(playback);
@@ -34,15 +43,24 @@ describe("<MAudioBody />", () => {
     });
 
     it("should render", async () => {
-        const mediaEventHelper = {
-            sourceBlob: {
-                value: {
-                    arrayBuffer: () => new ArrayBuffer(8),
-                },
-            },
-        } as unknown as MediaEventHelper;
-
         await act(() => render(<MAudioBody mxEvent={event} mediaEventHelper={mediaEventHelper} />));
         expect(await screen.findByRole("region", { name: "Audio player" })).toBeInTheDocument();
     });
+
+    it("should show the body as the title when there is no filename", async () => {
+        await act(() => render(<MAudioBody mxEvent={event} mediaEventHelper={mediaEventHelper} />));
+        expect(await screen.findByRole("region", { name: "Audio player" })).toBeInTheDocument();
+        expect(screen.getByText("audio name")).toBeInTheDocument();
+    });
+
+    it("should prefer the filename over the body as the title", async () => {
+        // A caption puts the human readable text in `body` and the actual file name in `filename`.
+        event.getContent().filename = "recording.ogg";
+        event.getContent().body = "Listen to this!";
+
+        await act(() => render(<MAudioBody mxEvent={event} mediaEventHelper={mediaEventHelper} />));
+        expect(await screen.findByRole("region", { name: "Audio player" })).toBeInTheDocument();
+        expect(screen.getByText("recording.ogg")).toBeInTheDocument();
+        expect(screen.queryByText("Listen to this!")).not.toBeInTheDocument();
+    });
 });
diff --git a/apps/web/test/unit-tests/components/views/messages/MBodyFactory-test.tsx b/apps/web/test/unit-tests/components/views/messages/MBodyFactory-test.tsx
index 4a25bcb57f..3f87e1c774 100644
--- a/apps/web/test/unit-tests/components/views/messages/MBodyFactory-test.tsx
+++ b/apps/web/test/unit-tests/components/views/messages/MBodyFactory-test.tsx
@@ -20,17 +20,26 @@ import {
 import { MediaEventHelper } from "../../../../../src/utils/MediaEventHelper";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
 import {
+    DecryptionFailureBodyFactory,
     FileBodyFactory,
+    ImageBodyFactory,
+    RedactedBodyFactory,
     VideoBodyFactory,
     renderMBody,
 } from "../../../../../src/components/views/messages/MBodyFactory";
 import { TimelineRenderingType } from "../../../../../src/contexts/RoomContext.ts";
 import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";
+import { useMediaVisible } from "../../../../../src/hooks/useMediaVisible";
 
 jest.mock("matrix-encrypt-attachment", () => ({
     decryptAttachment: jest.fn(),
 }));
 
+jest.mock("../../../../../src/hooks/useMediaVisible", () => ({
+    __esModule: true,
+    useMediaVisible: jest.fn(),
+}));
+
 describe("MBodyFactory", () => {
     const userId = "@user:server";
     const deviceId = "DEADB33F";
@@ -40,6 +49,7 @@ describe("MBodyFactory", () => {
         ...mockClientMethodsDevice(deviceId),
         ...mockClientMethodsCrypto(),
         getRooms: jest.fn().mockReturnValue([]),
+        getRoom: jest.fn(),
         getIgnoredUsers: jest.fn(),
         getVersions: jest.fn().mockResolvedValue({
             unstable_features: {
@@ -59,7 +69,7 @@ describe("MBodyFactory", () => {
         onMessageAllowed: jest.fn(),
         permalinkCreator: new RoomPermalinkCreator(new Room("!room:server", cli, cli.getUserId()!)),
     };
-    const mkEvent = (msgtype?: string): MatrixEvent =>
+    const mkEvent = (msgtype?: string, content: Record<string, unknown> = {}): MatrixEvent =>
         new MatrixEvent({
             room_id: "!room:server",
             sender: userId,
@@ -68,13 +78,26 @@ describe("MBodyFactory", () => {
                 body: "alt",
                 ...(msgtype ? { msgtype } : {}),
                 url: "mxc://server/file",
+                ...content,
             },
         });
 
     beforeEach(() => {
         jest.spyOn(SettingsStore, "getValue").mockRestore();
+        jest.mocked(useMediaVisible).mockReturnValue([true, jest.fn()]);
     });
 
+    const encryptedImageHelper = (): MediaEventHelper =>
+        ({
+            media: { isEncrypted: true },
+            sourceUrl: { value: Promise.resolve("blob:source") },
+            thumbnailUrl: { value: Promise.resolve("blob:thumbnail") },
+            sourceBlob: {
+                value: Promise.resolve(new Blob(["image"], { type: "image/jpeg" })),
+                cachedValue: new Blob(["image"], { type: "image/jpeg" }),
+            },
+        }) as unknown as MediaEventHelper;
+
     describe("renderMBody", () => {
         it("renders download button for m.file in file rendering type", () => {
             const mediaEvent = mkEvent("m.file");
@@ -102,6 +125,10 @@ describe("MBodyFactory", () => {
             expect(renderMBody({ ...props, mxEvent: mkEvent("m.video") })?.type).toBe(VideoBodyFactory);
         });
 
+        it("returns the image body factory for m.image", () => {
+            expect(renderMBody({ ...props, mxEvent: mkEvent("m.image") })?.type).toBe(ImageBodyFactory);
+        });
+
         it("returns null when msgtype is missing", () => {
             expect(renderMBody({ ...props, mxEvent: mkEvent() })).toBeNull();
         });
@@ -156,4 +183,160 @@ describe("MBodyFactory", () => {
             expect(container).toMatchSnapshot();
         },
     );
+
+    describe("ImageBodyFactory", () => {
+        const imageContent = {
+            info: {
+                mimetype: "image/jpeg",
+                w: 320,
+                h: 240,
+                size: 48_000,
+            },
+        };
+
+        it("renders the shared image view in room timelines", () => {
+            const mediaEvent = mkEvent("m.image", imageContent);
+
+            const { container } = render(
+                <ScopedRoomContextProvider {...({ timelineRenderingType: TimelineRenderingType.Room } as any)}>
+                    <ImageBodyFactory
+                        {...props}
+                        mxEvent={mediaEvent}
+                        mediaEventHelper={new MediaEventHelper(mediaEvent)}
+                    />
+                </ScopedRoomContextProvider>,
+            );
+
+            expect(container.querySelector(".mx_ImageBody")).not.toBeNull();
+            expect(container.querySelector(".mx_MFileBody")).toBeNull();
+        });
+
+        it("renders the file fallback child in notification timelines", () => {
+            const mediaEvent = mkEvent("m.image", imageContent);
+
+            const { container, getByRole } = render(
+                <ScopedRoomContextProvider {...({ timelineRenderingType: TimelineRenderingType.Notification } as any)}>
+                    <ImageBodyFactory
+                        {...props}
+                        mxEvent={mediaEvent}
+                        mediaEventHelper={new MediaEventHelper(mediaEvent)}
+                    />
+                </ScopedRoomContextProvider>,
+            );
+
+            expect(container.querySelector(".mx_ImageBody")).not.toBeNull();
+            expect(container.querySelector(".mx_MFileBody")).not.toBeNull();
+            expect(getByRole("link", { name: /Download/ })).toBeInTheDocument();
+        });
+
+        it("renders only a file body for encrypted unsafe images without thumbnails", () => {
+            const mediaEvent = mkEvent("m.image", {
+                file: { url: "mxc://server/encrypted-file" },
+                url: undefined,
+                info: {
+                    mimetype: "text/html",
+                },
+            });
+
+            const { container, getByRole } = render(
+                <ScopedRoomContextProvider {...({ timelineRenderingType: TimelineRenderingType.Room } as any)}>
+                    <ImageBodyFactory
+                        {...props}
+                        mxEvent={mediaEvent}
+                        mediaEventHelper={{ media: { isEncrypted: true } } as MediaEventHelper}
+                    />
+                </ScopedRoomContextProvider>,
+            );
+
+            expect(container.querySelector(".mx_ImageBody")).toBeNull();
+            expect(container.querySelector(".mx_MFileBody")).not.toBeNull();
+            expect(getByRole("button", { name: "alt" })).toBeInTheDocument();
+        });
+
+        it("keeps the image body for encrypted unsafe images when a thumbnail is available", () => {
+            const mediaEvent = mkEvent("m.image", {
+                file: { url: "mxc://server/encrypted-file" },
+                url: undefined,
+                info: {
+                    mimetype: "text/html",
+                    thumbnail_info: { mimetype: "image/jpeg" },
+                },
+            });
+
+            const { container } = render(
+                <ScopedRoomContextProvider {...({ timelineRenderingType: TimelineRenderingType.Room } as any)}>
+                    <ImageBodyFactory {...props} mxEvent={mediaEvent} mediaEventHelper={encryptedImageHelper()} />
+                </ScopedRoomContextProvider>,
+            );
+
+            expect(container.querySelector(".mx_ImageBody")).not.toBeNull();
+            expect(container.querySelector(".mx_MFileBody")).toBeNull();
+        });
+    });
+
+    describe("VideoBodyFactory", () => {
+        const videoContent = {
+            info: {
+                mimetype: "video/mp4",
+                w: 320,
+                h: 240,
+                size: 48_000,
+            },
+        };
+
+        it("renders without a file fallback in room timelines", () => {
+            const mediaEvent = mkEvent("m.video", videoContent);
+
+            const { container } = render(
+                <ScopedRoomContextProvider {...({ timelineRenderingType: TimelineRenderingType.Room } as any)}>
+                    <VideoBodyFactory
+                        mxEvent={mediaEvent}
+                        mediaEventHelper={new MediaEventHelper(mediaEvent)}
+                        forExport={false}
+                    />
+                </ScopedRoomContextProvider>,
+            );
+
+            expect(container.querySelector(".mx_MVideoBody")).not.toBeNull();
+            expect(container.querySelector(".mx_MFileBody")).toBeNull();
+        });
+
+        it("renders the file fallback child outside room timelines", () => {
+            const mediaEvent = mkEvent("m.video", videoContent);
+
+            const { container, getByRole } = render(
+                <ScopedRoomContextProvider {...({ timelineRenderingType: TimelineRenderingType.Notification } as any)}>
+                    <VideoBodyFactory
+                        mxEvent={mediaEvent}
+                        mediaEventHelper={new MediaEventHelper(mediaEvent)}
+                        forExport={false}
+                    />
+                </ScopedRoomContextProvider>,
+            );
+
+            expect(container.querySelector(".mx_MVideoBody")).not.toBeNull();
+            expect(container.querySelector(".mx_MFileBody")).not.toBeNull();
+            expect(getByRole("link", { name: /Download/ })).toBeInTheDocument();
+        });
+    });
+
+    it("renders the redacted body wrapper", () => {
+        const mediaEvent = mkEvent("m.text");
+
+        const { container } = render(<RedactedBodyFactory mxEvent={mediaEvent} />);
+
+        expect(container.querySelector(".mx_RedactedBody")).not.toBeNull();
+    });
+
+    it("renders the decryption failure body wrapper", () => {
+        const mediaEvent = mkEvent("m.text");
+        Object.defineProperty(mediaEvent, "decryptionFailureReason", {
+            configurable: true,
+            value: "MEGOLM_UNKNOWN_INBOUND_SESSION_ID",
+        });
+
+        const { container } = render(<DecryptionFailureBodyFactory mxEvent={mediaEvent} />);
+
+        expect(container.querySelector(".mx_DecryptionFailureBody")).not.toBeNull();
+    });
 });
diff --git a/apps/web/test/unit-tests/components/views/messages/MImageBody-test.tsx b/apps/web/test/unit-tests/components/views/messages/MImageBody-test.tsx
deleted file mode 100644
index 882e1fa5d8..0000000000
--- a/apps/web/test/unit-tests/components/views/messages/MImageBody-test.tsx
+++ /dev/null
@@ -1,376 +0,0 @@
-/*
-Copyright 2024, 2025 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React from "react";
-import { fireEvent, render, screen, waitFor, waitForElementToBeRemoved, within } from "jest-matrix-react";
-import { EventType, getHttpUriForMxc, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
-import fetchMock from "@fetch-mock/jest";
-import encrypt from "matrix-encrypt-attachment";
-import { mocked } from "jest-mock";
-import fs from "fs";
-import path from "path";
-import userEvent from "@testing-library/user-event";
-
-import MImageBody from "../../../../../src/components/views/messages/MImageBody";
-import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
-import {
-    getMockClientWithEventEmitter,
-    mockClientMethodsCrypto,
-    mockClientMethodsDevice,
-    mockClientMethodsServer,
-    mockClientMethodsUser,
-    withClientContextRenderOptions,
-} from "../../../../test-utils";
-import { MediaEventHelper } from "../../../../../src/utils/MediaEventHelper";
-import SettingsStore from "../../../../../src/settings/SettingsStore";
-import { MediaPreviewValue } from "../../../../../src/@types/media_preview";
-
-jest.mock("matrix-encrypt-attachment", () => ({
-    decryptAttachment: jest.fn(),
-}));
-
-describe("<MImageBody/>", () => {
-    const ourUserId = "@user:server";
-    const senderUserId = "@other_use:server";
-    const deviceId = "DEADB33F";
-    const cli = getMockClientWithEventEmitter({
-        ...mockClientMethodsUser(ourUserId),
-        ...mockClientMethodsServer(),
-        ...mockClientMethodsDevice(deviceId),
-        ...mockClientMethodsCrypto(),
-        getRooms: jest.fn().mockReturnValue([]),
-        getRoom: jest.fn(),
-        getIgnoredUsers: jest.fn(),
-        getVersions: jest.fn().mockResolvedValue({
-            unstable_features: {
-                "org.matrix.msc3882": true,
-                "org.matrix.msc3886": true,
-            },
-        }),
-    });
-    const url = "https://server/_matrix/media/v3/download/server/encrypted-image";
-    // eslint-disable-next-line no-restricted-properties
-    cli.mxcUrlToHttp.mockImplementation(
-        (mxcUrl: string, width?: number, height?: number, resizeMethod?: string, allowDirectLinks?: boolean) => {
-            return getHttpUriForMxc("https://server", mxcUrl, width, height, resizeMethod, allowDirectLinks);
-        },
-    );
-    const encryptedMediaEvent = new MatrixEvent({
-        event_id: "$foo:bar",
-        room_id: "!room:server",
-        sender: senderUserId,
-        type: EventType.RoomMessage,
-        content: {
-            body: "alt for a test image",
-            info: {
-                w: 40,
-                h: 50,
-                mimetype: "image/png",
-            },
-            file: {
-                url: "mxc://server/encrypted-image",
-            },
-        },
-    });
-
-    const props = {
-        onMessageAllowed: jest.fn(),
-        permalinkCreator: new RoomPermalinkCreator(new Room(encryptedMediaEvent.getRoomId()!, cli, cli.getUserId()!)),
-    };
-
-    beforeEach(() => {
-        jest.spyOn(SettingsStore, "getValue").mockRestore();
-        fetchMock.mockReset();
-    });
-
-    afterEach(() => {
-        SettingsStore.reset();
-        mocked(encrypt.decryptAttachment).mockReset();
-    });
-
-    it("should show a thumbnail while image is being downloaded", async () => {
-        fetchMock.getOnce(url, { status: 200 });
-
-        const { container } = render(
-            <MImageBody
-                {...props}
-                mxEvent={encryptedMediaEvent}
-                mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)}
-            />,
-            withClientContextRenderOptions(cli),
-        );
-
-        // thumbnail with dimensions present
-        expect(container).toMatchSnapshot();
-    });
-
-    it("should show error when encrypted media cannot be downloaded", async () => {
-        fetchMock.getOnce(url, { status: 500 });
-
-        render(
-            <MImageBody
-                {...props}
-                mxEvent={encryptedMediaEvent}
-                mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)}
-            />,
-            withClientContextRenderOptions(cli),
-        );
-
-        expect(fetchMock).toHaveFetched(url);
-
-        await screen.findByText("Error downloading image");
-    });
-
-    it("should show error when encrypted media cannot be decrypted", async () => {
-        fetchMock.getOnce(url, "thisistotallyanencryptedpng");
-        mocked(encrypt.decryptAttachment).mockRejectedValue(new Error("Failed to decrypt"));
-
-        render(
-            <MImageBody
-                {...props}
-                mxEvent={encryptedMediaEvent}
-                mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)}
-            />,
-            withClientContextRenderOptions(cli),
-        );
-
-        await screen.findByText("Error decrypting image");
-    });
-
-    describe("with image previews/thumbnails disabled", () => {
-        beforeEach(() => {
-            const origFn = SettingsStore.getValue;
-            jest.spyOn(SettingsStore, "getValue").mockImplementation((setting, ...args) => {
-                if (setting === "mediaPreviewConfig") {
-                    return { invite_avatars: MediaPreviewValue.Off, media_previews: MediaPreviewValue.Off };
-                }
-                return origFn(setting, ...args);
-            });
-        });
-
-        it("should not download image", async () => {
-            fetchMock.getOnce(url, { status: 200 });
-
-            render(
-                <MImageBody
-                    {...props}
-                    mxEvent={encryptedMediaEvent}
-                    mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)}
-                />,
-                withClientContextRenderOptions(cli),
-            );
-
-            expect(screen.getByText("Show image")).toBeInTheDocument();
-
-            expect(fetchMock).toHaveFetchedTimes(0, url);
-        });
-
-        it("should render hidden image placeholder", async () => {
-            fetchMock.getOnce(url, { status: 200 });
-
-            render(
-                <MImageBody
-                    {...props}
-                    mxEvent={encryptedMediaEvent}
-                    mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)}
-                />,
-                withClientContextRenderOptions(cli),
-            );
-
-            expect(screen.getByText("Show image")).toBeInTheDocument();
-
-            fireEvent.click(screen.getByRole("button"));
-
-            expect(fetchMock).toHaveFetched(url);
-
-            // Show image is asynchronous since it applies through a settings watcher hook, so
-            // be sure to wait here.
-            await waitFor(() => {
-                // spinner while downloading image
-                expect(screen.getByRole("progressbar")).toBeInTheDocument();
-            });
-        });
-    });
-
-    it("should fall back to /download/ if /thumbnail/ fails", async () => {
-        const thumbUrl = "https://server/_matrix/media/v3/thumbnail/server/image?width=800&height=600&method=scale";
-        const downloadUrl = "https://server/_matrix/media/v3/download/server/image";
-
-        const event = new MatrixEvent({
-            room_id: "!room:server",
-            sender: senderUserId,
-            type: EventType.RoomMessage,
-            content: {
-                body: "alt for a test image",
-                info: {
-                    w: 40,
-                    h: 50,
-                },
-                url: "mxc://server/image",
-            },
-        });
-
-        const { container } = render(
-            <MImageBody {...props} mxEvent={event} mediaEventHelper={new MediaEventHelper(event)} />,
-            withClientContextRenderOptions(cli),
-        );
-
-        const img = container.querySelector(".mx_MImageBody_thumbnail")!;
-        expect(img).toHaveProperty("src", thumbUrl);
-
-        fireEvent.error(img);
-        expect(img).toHaveProperty("src", downloadUrl);
-    });
-
-    it("should generate a thumbnail if one isn't included for animated media", async () => {
-        Object.defineProperty(global.Image.prototype, "src", {
-            set(src) {
-                window.setTimeout(() => this.onload?.());
-            },
-        });
-        Object.defineProperty(global.Image.prototype, "height", {
-            get() {
-                return 600;
-            },
-        });
-        Object.defineProperty(global.Image.prototype, "width", {
-            get() {
-                return 800;
-            },
-        });
-
-        mocked(global.URL.createObjectURL).mockReturnValue("blob:generated-thumb");
-
-        fetchMock.getOnce("https://server/_matrix/media/v3/download/server/image", {
-            body: fs.readFileSync(path.resolve(__dirname, "..", "..", "..", "images", "animated-logo.webp")),
-        });
-
-        const event = new MatrixEvent({
-            room_id: "!room:server",
-            sender: senderUserId,
-            type: EventType.RoomMessage,
-            content: {
-                body: "alt for a test image",
-                info: {
-                    w: 40,
-                    h: 50,
-                    mimetype: "image/webp",
-                },
-                url: "mxc://server/image",
-            },
-        });
-
-        const { container } = render(
-            <MImageBody {...props} mxEvent={event} mediaEventHelper={new MediaEventHelper(event)} />,
-            withClientContextRenderOptions(cli),
-        );
-
-        // Wait for spinners to go away
-        await waitForElementToBeRemoved(screen.getAllByRole("progressbar"));
-        // thumbnail with dimensions present
-        expect(container).toMatchSnapshot();
-    });
-
-    it("should show banner on hover", async () => {
-        const event = new MatrixEvent({
-            room_id: "!room:server",
-            sender: senderUserId,
-            type: EventType.RoomMessage,
-            content: {
-                body: "alt for a test image",
-                info: {
-                    w: 40,
-                    h: 50,
-                },
-                url: "mxc://server/image",
-            },
-        });
-
-        const { container } = render(
-            <MImageBody {...props} mxEvent={event} mediaEventHelper={new MediaEventHelper(event)} />,
-            withClientContextRenderOptions(cli),
-        );
-
-        const img = container.querySelector(".mx_MImageBody_thumbnail")!;
-        await userEvent.hover(img);
-
-        expect(container.querySelector(".mx_MImageBody_banner")).toHaveTextContent("...alt for a test image");
-    });
-
-    it("should render MFileBody for svg with no thumbnail", async () => {
-        const event = new MatrixEvent({
-            room_id: "!room:server",
-            sender: senderUserId,
-            type: EventType.RoomMessage,
-            content: {
-                info: {
-                    w: 40,
-                    h: 50,
-                    mimetype: "image/svg+xml",
-                },
-                file: {
-                    url: "mxc://server/encrypted-svg",
-                },
-            },
-        });
-
-        const { container, asFragment } = render(
-            <MImageBody {...props} mxEvent={event} mediaEventHelper={new MediaEventHelper(event)} />,
-            withClientContextRenderOptions(cli),
-        );
-
-        expect(container.querySelector(".mx_MFileBody")).toHaveTextContent("Attachment");
-        expect(asFragment()).toMatchSnapshot();
-    });
-
-    it("should open ImageView using thumbnail for encrypted svg", async () => {
-        const url = "https://server/_matrix/media/v3/download/server/encrypted-svg";
-        fetchMock.getOnce(url, { status: 200 });
-        const thumbUrl = "https://server/_matrix/media/v3/download/server/svg-thumbnail";
-        fetchMock.getOnce(thumbUrl, { status: 200 });
-
-        const event = new MatrixEvent({
-            room_id: "!room:server",
-            sender: senderUserId,
-            type: EventType.RoomMessage,
-            origin_server_ts: 1234567890,
-            content: {
-                info: {
-                    w: 40,
-                    h: 50,
-                    mimetype: "image/svg+xml",
-                    thumbnail_file: {
-                        url: "mxc://server/svg-thumbnail",
-                    },
-                    thumbnail_info: { mimetype: "image/png" },
-                },
-                file: {
-                    url: "mxc://server/encrypted-svg",
-                },
-            },
-        });
-
-        const mediaEventHelper = new MediaEventHelper(event);
-        mediaEventHelper.thumbnailUrl["prom"] = Promise.resolve(thumbUrl);
-        mediaEventHelper.sourceUrl["prom"] = Promise.resolve(url);
-
-        const { findByRole } = render(
-            <MImageBody {...props} mxEvent={event} mediaEventHelper={mediaEventHelper} />,
-            withClientContextRenderOptions(cli),
-        );
-
-        fireEvent.click(await findByRole("link"));
-
-        const dialog = await screen.findByRole("dialog");
-        await expect(within(dialog).findByRole("img")).resolves.toHaveAttribute(
-            "src",
-            "https://server/_matrix/media/v3/download/server/svg-thumbnail",
-        );
-        expect(dialog).toMatchSnapshot();
-    });
-});
diff --git a/apps/web/test/unit-tests/components/views/messages/MImageReplyBody-test.tsx b/apps/web/test/unit-tests/components/views/messages/MImageReplyBody-test.tsx
new file mode 100644
index 0000000000..7ddadc973a
--- /dev/null
+++ b/apps/web/test/unit-tests/components/views/messages/MImageReplyBody-test.tsx
@@ -0,0 +1,620 @@
+/*
+Copyright 2026 Element Creations 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, { createRef } from "react";
+import { act, fireEvent, render, screen, waitFor } from "jest-matrix-react";
+import { ClientEvent, EventType, getHttpUriForMxc, MatrixEvent, Room, SyncState } from "matrix-js-sdk/src/matrix";
+
+import Modal from "../../../../../src/Modal";
+import SettingsStore from "../../../../../src/settings/SettingsStore";
+import { ImageSize } from "../../../../../src/settings/enums/ImageSize";
+import { mediaFromContent } from "../../../../../src/customisations/Media";
+import { BLURHASH_FIELD, createThumbnail } from "../../../../../src/utils/image-media";
+import { blobIsAnimated } from "../../../../../src/utils/Image";
+import { DecryptError, DownloadError } from "../../../../../src/utils/DecryptFile";
+import { type MediaEventHelper } from "../../../../../src/utils/MediaEventHelper";
+import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
+import RoomContext, { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
+import MImageReplyBody, { ImageBodyBaseInner } from "../../../../../src/components/views/messages/MImageReplyBody";
+import {
+    getMockClientWithEventEmitter,
+    mockClientMethodsCrypto,
+    mockClientMethodsDevice,
+    mockClientMethodsServer,
+    mockClientMethodsUser,
+} from "../../../../test-utils";
+import { useMediaVisible } from "../../../../../src/hooks/useMediaVisible";
+
+jest.mock("../../../../../src/customisations/Media", () => ({
+    mediaFromContent: jest.fn(),
+}));
+
+jest.mock("../../../../../src/utils/Image", () => ({
+    ...jest.requireActual("../../../../../src/utils/Image"),
+    blobIsAnimated: jest.fn(),
+}));
+
+jest.mock("../../../../../src/utils/image-media", () => ({
+    ...jest.requireActual("../../../../../src/utils/image-media"),
+    createThumbnail: jest.fn(),
+}));
+
+jest.mock("../../../../../src/hooks/useMediaVisible", () => ({
+    __esModule: true,
+    useMediaVisible: jest.fn(),
+}));
+
+describe("<MImageReplyBody />", () => {
+    const userId = "@user:server";
+    const deviceId = "DEADB33F";
+    const cli = getMockClientWithEventEmitter({
+        ...mockClientMethodsUser(userId),
+        ...mockClientMethodsServer(),
+        ...mockClientMethodsDevice(deviceId),
+        ...mockClientMethodsCrypto(),
+        getRoom: jest.fn(),
+        getRooms: jest.fn().mockReturnValue([]),
+        getIgnoredUsers: jest.fn(),
+        getVersions: jest.fn().mockResolvedValue({
+            unstable_features: {
+                "org.matrix.msc3882": true,
+                "org.matrix.msc3886": true,
+            },
+        }),
+    });
+    // eslint-disable-next-line no-restricted-properties
+    cli.mxcUrlToHttp.mockImplementation(
+        (mxcUrl: string, width?: number, height?: number, resizeMethod?: string, allowDirectLinks?: boolean) => {
+            return getHttpUriForMxc("https://server", mxcUrl, width, height, resizeMethod, allowDirectLinks);
+        },
+    );
+
+    const mockedMediaFromContent = jest.mocked(mediaFromContent);
+    const mockedUseMediaVisible = jest.mocked(useMediaVisible);
+    const mockedBlobIsAnimated = jest.mocked(blobIsAnimated);
+    const mockedCreateThumbnail = jest.mocked(createThumbnail);
+    const originalGetValue = SettingsStore.getValue.bind(SettingsStore);
+
+    const createEvent = ({
+        body = "demo image",
+        content = {},
+    }: {
+        body?: string;
+        content?: Record<string, unknown>;
+    } = {}): MatrixEvent => {
+        const { info: infoOverride, ...restContent } = content;
+        const info =
+            infoOverride === null
+                ? undefined
+                : {
+                      w: 320,
+                      h: 240,
+                      size: 48_000,
+                      mimetype: "image/jpeg",
+                      ...(infoOverride as Record<string, unknown> | undefined),
+                  };
+
+        return new MatrixEvent({
+            type: EventType.RoomMessage,
+            room_id: "!room:server",
+            event_id: "$image:server",
+            sender: userId,
+            content: {
+                msgtype: "m.image",
+                body,
+                url: "mxc://server/image",
+                ...restContent,
+                ...(info ? { info } : {}),
+            },
+        });
+    };
+
+    const createMockMedia = (content: Record<string, any>) => ({
+        isEncrypted: !!content.file,
+        srcMxc: content.url ?? content.file?.url ?? "mxc://server/image",
+        srcHttp: "https://server/full.png",
+        thumbnailMxc: content.info?.thumbnail_url ?? "mxc://server/thumb",
+        thumbnailHttp: "https://server/thumb.png",
+        hasThumbnail: content.info?.thumbnail_url !== null,
+        getThumbnailHttp: jest.fn().mockReturnValue("https://server/thumb.png"),
+        getThumbnailOfSourceHttp: jest.fn().mockReturnValue("https://server/thumb.png"),
+        getSquareThumbnailHttp: jest.fn(),
+        downloadSource: jest.fn(),
+    });
+
+    const createMediaEventHelper = ({
+        encrypted = true,
+        thumbnailUrl = "blob:thumbnail",
+        sourceUrl = "blob:source",
+        sourceBlob = new Blob(["image"], { type: "image/jpeg" }),
+    }: {
+        encrypted?: boolean;
+        thumbnailUrl?: string | null | Promise<string | null>;
+        sourceUrl?: string | null | Promise<string | null>;
+        sourceBlob?: Blob | Promise<Blob>;
+    } = {}): MediaEventHelper =>
+        ({
+            media: { isEncrypted: encrypted },
+            thumbnailUrl: { value: Promise.resolve(thumbnailUrl) },
+            sourceUrl: { value: Promise.resolve(sourceUrl) },
+            sourceBlob: { value: Promise.resolve(sourceBlob), cachedValue: sourceBlob },
+        }) as unknown as MediaEventHelper;
+
+    const props = {
+        mxEvent: createEvent(),
+        mediaVisible: true,
+        setMediaVisible: jest.fn(),
+        onMessageAllowed: jest.fn(),
+        permalinkCreator: new RoomPermalinkCreator(new Room("!room:server", cli, cli.getUserId()!)),
+    };
+
+    const renderBase = ({
+        timelineRenderingType = TimelineRenderingType.Room,
+        overrides = {},
+    }: {
+        timelineRenderingType?: TimelineRenderingType;
+        overrides?: Partial<React.ComponentProps<typeof ImageBodyBaseInner>>;
+    } = {}) => {
+        const ref = createRef<ImageBodyBaseInner>();
+        const result = render(
+            <RoomContext.Provider value={{ timelineRenderingType } as any}>
+                <ImageBodyBaseInner ref={ref} {...props} {...overrides} />
+            </RoomContext.Provider>,
+        );
+        return { ...result, ref };
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        Object.defineProperty(window, "devicePixelRatio", {
+            configurable: true,
+            value: 1,
+        });
+        mockedMediaFromContent.mockImplementation((content: Record<string, any>) => createMockMedia(content) as any);
+        mockedUseMediaVisible.mockReturnValue([true, jest.fn()]);
+        mockedBlobIsAnimated.mockResolvedValue(true);
+        mockedCreateThumbnail.mockResolvedValue({ thumbnail: new Blob(["thumbnail"], { type: "image/jpeg" }) } as any);
+        jest.spyOn(SettingsStore, "getValue").mockImplementation(((setting, ...args) => {
+            if (setting === "Images.size") return ImageSize.Normal;
+            if (setting === "autoplayGifs") return false;
+            return (originalGetValue as any)(setting, ...args);
+        }) as typeof SettingsStore.getValue);
+        jest.spyOn(SettingsStore, "watchSetting").mockReturnValue("image-reply-watch");
+        jest.spyOn(SettingsStore, "unwatchSetting").mockImplementation(jest.fn());
+    });
+
+    afterEach(() => {
+        jest.useRealTimers();
+    });
+
+    afterAll(() => {
+        jest.restoreAllMocks();
+    });
+
+    it("renders a visible unencrypted image and file fallback outside room timelines", async () => {
+        const { container } = renderBase({ timelineRenderingType: TimelineRenderingType.Notification });
+
+        await waitFor(() => expect(screen.getAllByRole("img", { name: "demo image" })).toHaveLength(2));
+
+        expect(container.querySelector(".mx_MImageBody")).not.toBeNull();
+        expect(container.querySelector(".mx_MFileBody")).not.toBeNull();
+        expect(container.querySelector("a[href='https://server/full.png']")).not.toBeNull();
+        expect(container.querySelector("img.mx_MImageBody_thumbnail")).toHaveAttribute(
+            "src",
+            "https://server/thumb.png",
+        );
+        expect(screen.getByRole("link", { name: /Download/ })).toBeInTheDocument();
+    });
+
+    it("reveals hidden media through the supplied setter", () => {
+        const setMediaVisible = jest.fn();
+        renderBase({
+            overrides: {
+                mediaVisible: false,
+                setMediaVisible,
+            },
+        });
+
+        fireEvent.click(screen.getByRole("button", { name: "Show image" }));
+
+        expect(setMediaVisible).toHaveBeenCalledWith(true);
+    });
+
+    it("opens the image viewer with thumbnail geometry", async () => {
+        const { container } = renderBase();
+        await waitFor(() => expect(screen.getByRole("img", { name: "demo image" })).toBeInTheDocument());
+        const image = container.querySelector("img.mx_MImageBody_thumbnail")!;
+        image.getBoundingClientRect = () => ({ width: 100, height: 80, x: 10, y: 20 }) as DOMRect;
+        jest.spyOn(Modal, "createDialog").mockReturnValue({} as any);
+
+        fireEvent.click(screen.getByRole("link", { name: "demo image" }), { button: 0 });
+
+        expect(Modal.createDialog).toHaveBeenCalledWith(
+            expect.any(Function),
+            expect.objectContaining({
+                src: "https://server/full.png",
+                name: "demo image",
+                width: 320,
+                height: 240,
+                fileSize: 48_000,
+                thumbnailInfo: {
+                    width: 100,
+                    height: 80,
+                    positionX: 10,
+                    positionY: 20,
+                },
+            }),
+            "mx_Dialog_lightbox",
+            undefined,
+            true,
+        );
+    });
+
+    it("updates load dimensions and toggles hover/focus banner state", async () => {
+        const { container, ref } = renderBase();
+        await waitFor(() => expect(screen.getByRole("img", { name: "demo image" })).toBeInTheDocument());
+        const image = container.querySelector("img.mx_MImageBody_thumbnail")!;
+        Object.defineProperty(image, "naturalWidth", { configurable: true, value: 640 });
+        Object.defineProperty(image, "naturalHeight", { configurable: true, value: 480 });
+
+        act(() => {
+            ref.current!["onImageLoad"]();
+            ref.current!.setState({ isAnimated: true, imgLoaded: true });
+        });
+        expect(ref.current!.state.loadedImageDimensions).toEqual({ naturalWidth: 640, naturalHeight: 480 });
+
+        fireEvent.mouseEnter(image);
+        expect(ref.current!.state.hover).toBe(true);
+        expect(container.querySelector(".mx_MImageBody_banner")).not.toBeNull();
+        expect(image).toHaveAttribute("src", "https://server/full.png");
+
+        fireEvent.mouseLeave(image);
+        expect(ref.current!.state.hover).toBe(false);
+
+        const link = screen.getByRole("link", { name: /demo image/ });
+        fireEvent.focus(link);
+        expect(ref.current!.state.focus).toBe(true);
+        fireEvent.blur(link);
+        expect(ref.current!.state.focus).toBe(false);
+    });
+
+    it("uses the decrypted thumbnail in the image viewer when the source mime type is unsafe", async () => {
+        renderBase({
+            overrides: {
+                mxEvent: createEvent({
+                    body: "unsafe image",
+                    content: {
+                        file: { url: "mxc://server/encrypted-image" },
+                        url: undefined,
+                        info: {
+                            mimetype: "image/svg+xml",
+                            thumbnail_info: { mimetype: "image/jpeg" },
+                        },
+                    },
+                }),
+                mediaEventHelper: createMediaEventHelper({
+                    sourceUrl: "blob:unsafe-source",
+                    thumbnailUrl: "blob:safe-thumbnail",
+                    sourceBlob: new Blob(["html"], { type: "text/html" }),
+                }),
+            },
+        });
+        jest.spyOn(Modal, "createDialog").mockReturnValue({} as any);
+        await waitFor(() => expect(screen.getByRole("img", { name: "unsafe image" })).toBeInTheDocument());
+
+        fireEvent.click(screen.getByRole("link", { name: "unsafe image" }), { button: 0 });
+
+        expect(Modal.createDialog).toHaveBeenCalledWith(
+            expect.any(Function),
+            expect.objectContaining({
+                src: "blob:safe-thumbnail",
+                name: "unsafe image",
+            }),
+            "mx_Dialog_lightbox",
+            undefined,
+            true,
+        );
+    });
+
+    it("falls back from thumbnail errors and clears image errors after reconnecting", async () => {
+        const onSpy = jest.spyOn(cli, "on");
+        const offSpy = jest.spyOn(cli, "off");
+        const { ref } = renderBase();
+        await waitFor(() => expect(ref.current!.state.thumbUrl).toBe("https://server/thumb.png"));
+
+        act(() => {
+            ref.current!["onImageError"]();
+        });
+        expect(ref.current!.state.thumbUrl).toBeNull();
+
+        act(() => {
+            ref.current!["onImageError"]();
+        });
+        expect(ref.current!.state.imgError).toBe(true);
+        expect(onSpy).toHaveBeenCalledWith(ClientEvent.Sync, expect.any(Function));
+
+        const listener = onSpy.mock.calls.at(-1)![1] as (...args: unknown[]) => void;
+        act(() => {
+            listener(SyncState.Syncing, SyncState.Error);
+        });
+
+        expect(offSpy).toHaveBeenCalledWith(ClientEvent.Sync, listener);
+        expect(ref.current!.state.imgError).toBe(false);
+    });
+
+    it.each([
+        [new DecryptError(new Error("decrypt failed")), "Error decrypting image"],
+        [new DownloadError(new Error("download failed")), "Error downloading image"],
+        [new Error("display failed"), "Unable to show image due to error"],
+    ])("renders media processing errors for %s", async (error, label) => {
+        const { container, ref } = renderBase();
+
+        act(() => {
+            ref.current!.setState({ error });
+        });
+
+        expect(container.querySelector(".mx_MImageBody")).not.toBeNull();
+        expect(screen.getByText(label)).toBeInTheDocument();
+    });
+
+    it.each([
+        [new DecryptError(new Error("decrypt failed")), "Error decrypting image"],
+        [new DownloadError(new Error("download failed")), "Error downloading image"],
+        [new Error("download failed"), "Unable to show image due to error"],
+    ])("renders encrypted download failures for %s", async (error, label) => {
+        renderBase({
+            overrides: {
+                mxEvent: createEvent({
+                    content: {
+                        file: { url: "mxc://server/encrypted-image" },
+                        url: undefined,
+                    },
+                }),
+                mediaEventHelper: createMediaEventHelper({
+                    sourceUrl: Promise.reject(error),
+                }),
+            },
+        });
+
+        await waitFor(() => expect(screen.getByText(label)).toBeInTheDocument());
+    });
+
+    it("renders export images directly from the event MXC URL", () => {
+        renderBase({
+            overrides: {
+                forExport: true,
+                mxEvent: createEvent({
+                    content: {
+                        url: undefined,
+                        file: { url: "mxc://server/encrypted-image" },
+                    },
+                }),
+            },
+        });
+
+        expect(screen.getByRole("link", { name: "demo image" })).toHaveAttribute(
+            "href",
+            "mxc://server/encrypted-image",
+        );
+        expect(screen.getByRole("link", { name: "demo image" })).toHaveAttribute("target", "_blank");
+        expect(screen.queryByRole("link", { name: /Download/ })).toBeNull();
+    });
+
+    it("switches blurhash placeholders on after the delay", () => {
+        jest.useFakeTimers();
+        const { container } = renderBase({
+            overrides: {
+                mxEvent: createEvent({
+                    content: {
+                        info: {
+                            [BLURHASH_FIELD]: "LEHV6nWB2yk8pyo0adR*.7kCMdnj",
+                        },
+                    },
+                }),
+            },
+        });
+
+        expect(container.querySelector(".mx_Blurhash")).toBeNull();
+
+        act(() => {
+            jest.advanceTimersByTime(150);
+        });
+
+        expect(container.querySelector(".mx_Blurhash")).not.toBeNull();
+    });
+
+    it("downloads media when visibility changes after mount", async () => {
+        const ref = createRef<ImageBodyBaseInner>();
+        const mxEvent = createEvent();
+        const { rerender } = render(
+            <RoomContext.Provider value={{ timelineRenderingType: TimelineRenderingType.Room } as any}>
+                <ImageBodyBaseInner
+                    ref={ref}
+                    {...props}
+                    mxEvent={mxEvent}
+                    mediaVisible={false}
+                    setMediaVisible={jest.fn()}
+                />
+            </RoomContext.Provider>,
+        );
+
+        expect(ref.current!.state.contentUrl).toBeNull();
+
+        rerender(
+            <RoomContext.Provider value={{ timelineRenderingType: TimelineRenderingType.Room } as any}>
+                <ImageBodyBaseInner
+                    ref={ref}
+                    {...props}
+                    mxEvent={mxEvent}
+                    mediaVisible={true}
+                    setMediaVisible={jest.fn()}
+                />
+            </RoomContext.Provider>,
+        );
+
+        await waitFor(() => expect(ref.current!.state.contentUrl).toBe("https://server/full.png"));
+    });
+
+    it("renders missing-size media after loading natural dimensions", async () => {
+        const { container, ref } = renderBase({
+            overrides: {
+                mxEvent: createEvent({ content: { info: null } }),
+            },
+        });
+        await waitFor(() => expect(container.querySelector("img[style*='display: none']")).not.toBeNull());
+        const image = container.querySelector("img[style*='display: none']")!;
+        Object.defineProperty(image, "naturalWidth", { configurable: true, value: 640 });
+        Object.defineProperty(image, "naturalHeight", { configurable: true, value: 480 });
+
+        act(() => {
+            ref.current!["onImageLoad"]();
+        });
+
+        expect(ref.current!.state.loadedImageDimensions).toEqual({ naturalWidth: 640, naturalHeight: 480 });
+        expect(container.querySelector(".mx_MImageBody_thumbnail_container")).not.toBeNull();
+    });
+
+    it("generates a static thumbnail for animated images without a safe thumbnail", async () => {
+        let createdImage: any;
+        const originalCreateElement = document.createElement.bind(document);
+        const createElementSpy = jest.spyOn(document, "createElement").mockImplementation(((tagName: string) => {
+            if (tagName !== "img") {
+                return originalCreateElement(tagName);
+            }
+            createdImage = originalCreateElement(tagName) as HTMLImageElement;
+            Object.defineProperty(createdImage, "width", { configurable: true, value: 320 });
+            Object.defineProperty(createdImage, "height", { configurable: true, value: 240 });
+            return createdImage;
+        }) as typeof document.createElement);
+        const { ref } = renderBase({
+            overrides: {
+                mxEvent: createEvent({
+                    content: {
+                        file: { url: "mxc://server/encrypted-image" },
+                        url: undefined,
+                        info: {
+                            "mimetype": "image/gif",
+                            "thumbnail_info": { mimetype: "image/gif" },
+                            "org.matrix.msc4230.is_animated": true,
+                        },
+                    },
+                }),
+                mediaEventHelper: createMediaEventHelper({
+                    sourceUrl: "blob:animated-source",
+                    thumbnailUrl: null,
+                    sourceBlob: new Blob(["gif"], { type: "image/gif" }),
+                }),
+            },
+        });
+
+        await waitFor(() => expect(createdImage).toBeDefined());
+        await act(async () => {
+            createdImage.onload();
+            await Promise.resolve();
+        });
+
+        await waitFor(() => expect(ref.current!.state.thumbUrl).toBe("blob"));
+        expect(mockedBlobIsAnimated).toHaveBeenCalled();
+        expect(mockedCreateThumbnail).toHaveBeenCalledWith(expect.any(HTMLImageElement), 320, 240, "image/gif", false);
+        expect(ref.current!.state.isAnimated).toBe(true);
+        createElementSpy.mockRestore();
+    });
+
+    it("uses SVG thumbnails when available", async () => {
+        const { ref } = renderBase({
+            overrides: {
+                mxEvent: createEvent({
+                    content: {
+                        info: {
+                            mimetype: "image/svg+xml",
+                            thumbnail_url: "mxc://server/thumb",
+                        },
+                    },
+                }),
+            },
+        });
+
+        await waitFor(() => expect(ref.current!.state.thumbUrl).toBe("https://server/thumb.png"));
+
+        expect(
+            mockedMediaFromContent.mock.results.some((result: any) =>
+                result.value.getThumbnailHttp.mock.calls.some(
+                    (call: unknown[]) => call[0] === 800 && call[1] === 600 && call[2] === "scale",
+                ),
+            ),
+        ).toBe(true);
+    });
+
+    it("uses the full source as thumbnail for small high-dpi images", async () => {
+        Object.defineProperty(window, "devicePixelRatio", {
+            configurable: true,
+            value: 2,
+        });
+
+        const { ref } = renderBase();
+
+        await waitFor(() => expect(ref.current!.state.thumbUrl).toBe("https://server/full.png"));
+    });
+
+    it("renders the file body instead of unsafe encrypted images without thumbnails", () => {
+        renderBase({
+            overrides: {
+                mxEvent: createEvent({
+                    content: {
+                        file: { url: "mxc://server/encrypted-file" },
+                        url: undefined,
+                        info: {
+                            mimetype: "text/html",
+                        },
+                    },
+                }),
+                mediaEventHelper: {
+                    media: { isEncrypted: true },
+                    sourceUrl: { value: Promise.resolve("blob:source") },
+                    thumbnailUrl: { value: Promise.resolve(null) },
+                    sourceBlob: {
+                        value: Promise.resolve(new Blob(["html"], { type: "text/html" })),
+                        cachedValue: new Blob(["html"], { type: "text/html" }),
+                    },
+                } as unknown as MediaEventHelper,
+                mediaVisible: false,
+            },
+        });
+
+        expect(screen.getByRole("button", { name: /demo image/ })).toBeInTheDocument();
+        expect(screen.queryByRole("img", { name: "demo image" })).toBeNull();
+    });
+
+    it("renders the compact reply body through the hook wrapper", async () => {
+        const setMediaVisible = jest.fn();
+        mockedUseMediaVisible.mockReturnValue([true, setMediaVisible]);
+
+        const { container } = render(<MImageReplyBody {...props} />);
+
+        await waitFor(() => expect(container.querySelector(".mx_MImageReplyBody")).not.toBeNull());
+        expect(screen.getByRole("img", { name: "demo image" })).toBeInTheDocument();
+    });
+
+    it("cleans up settings watchers, listeners and generated animated thumbnails on unmount", async () => {
+        const offSpy = jest.spyOn(cli, "off");
+        const { ref, unmount } = renderBase();
+        await waitFor(() => expect(ref.current).not.toBeNull());
+
+        act(() => {
+            ref.current!.setState({
+                isAnimated: true,
+                thumbUrl: "blob:animated-thumbnail",
+            });
+        });
+
+        unmount();
+
+        expect(SettingsStore.unwatchSetting).toHaveBeenCalledWith("image-reply-watch");
+        expect(offSpy).toHaveBeenCalledWith(ClientEvent.Sync, expect.any(Function));
+        expect(URL.revokeObjectURL).toHaveBeenCalledWith("blob:animated-thumbnail");
+    });
+});
diff --git a/apps/web/test/unit-tests/components/views/messages/MKeyVerificationRequest-test.tsx b/apps/web/test/unit-tests/components/views/messages/MKeyVerificationRequest-test.tsx
deleted file mode 100644
index 0265bd44d1..0000000000
--- a/apps/web/test/unit-tests/components/views/messages/MKeyVerificationRequest-test.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React from "react";
-import { type RenderResult, render } from "jest-matrix-react";
-import { type MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
-
-import MKeyVerificationRequest from "../../../../../src/components/views/messages/MKeyVerificationRequest";
-import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
-import { filterConsole } from "../../../../test-utils";
-
-describe("MKeyVerificationRequest", () => {
-    filterConsole(
-        "The above error occurred in the <MKeyVerificationRequest> component",
-        "Error: Attempting to render verification request without a client context!",
-        "Error: Verification request did not include a sender!",
-        "Error: Verification request did not include a room ID!",
-    );
-
-    it("shows an error if not wrapped in a client context", () => {
-        const event = new MatrixEvent({ type: "m.key.verification.request" });
-        const { container } = renderEventNoClient(event);
-        expect(container).toHaveTextContent("Can't load this message");
-    });
-
-    it("shows an error if the event has no sender", () => {
-        const { client } = setup();
-        const event = new MatrixEvent({ type: "m.key.verification.request" });
-        const { container } = renderEvent(client, event);
-        expect(container).toHaveTextContent("Can't load this message");
-    });
-
-    it("shows an error if the event has no room", () => {
-        const { client } = setup();
-        const event = new MatrixEvent({ type: "m.key.verification.request", sender: "@a:b.co" });
-        const { container } = renderEvent(client, event);
-        expect(container).toHaveTextContent("Can't load this message");
-    });
-
-    it("displays a request from me", () => {
-        const { client, myUserId } = setup();
-        const event = new MatrixEvent({ type: "m.key.verification.request", sender: myUserId, room_id: "!x:y.co" });
-        const { container } = renderEvent(client, event);
-        expect(container).toHaveTextContent("You sent a verification request");
-    });
-
-    it("displays a request from someone else to me", () => {
-        const otherUserId = "@other:s.uk";
-        const { client } = setup();
-        const event = new MatrixEvent({ type: "m.key.verification.request", sender: otherUserId, room_id: "!x:y.co" });
-        const { container } = renderEvent(client, event);
-        expect(container).toHaveTextContent("other:s.uk wants to verify");
-    });
-});
-
-interface TestTileErrorBoundaryProps {
-    children: React.ReactNode;
-}
-
-interface TestTileErrorBoundaryState {
-    error?: Error;
-}
-
-class TestTileErrorBoundary extends React.Component<TestTileErrorBoundaryProps, TestTileErrorBoundaryState> {
-    public constructor(props: TestTileErrorBoundaryProps) {
-        super(props);
-        this.state = {};
-    }
-
-    public static getDerivedStateFromError(error: Error): Partial<TestTileErrorBoundaryState> {
-        return { error };
-    }
-
-    public render(): React.ReactNode {
-        if (this.state.error) {
-            return "Can't load this message";
-        }
-
-        return this.props.children;
-    }
-}
-
-function renderEventNoClient(event: MatrixEvent): RenderResult {
-    return render(
-        <TestTileErrorBoundary>
-            <MKeyVerificationRequest mxEvent={event} />
-        </TestTileErrorBoundary>,
-    );
-}
-
-function renderEvent(client: MatrixClient, event: MatrixEvent): RenderResult {
-    return render(
-        <TestTileErrorBoundary>
-            <MatrixClientContext.Provider value={client}>
-                <MKeyVerificationRequest mxEvent={event} />
-            </MatrixClientContext.Provider>
-            ,
-        </TestTileErrorBoundary>,
-    );
-}
-
-function setup(): { client: MatrixClient; myUserId: string } {
-    const myUserId = "@me:s.co";
-
-    const client = {
-        getSafeUserId: jest.fn().mockReturnValue(myUserId),
-        getRoom: jest.fn(),
-    } as unknown as MatrixClient;
-
-    return { client, myUserId };
-}
diff --git a/apps/web/test/unit-tests/components/views/messages/MLocationBody-test.tsx b/apps/web/test/unit-tests/components/views/messages/MLocationBody-test.tsx
index 35681700ca..04a654cb9d 100644
--- a/apps/web/test/unit-tests/components/views/messages/MLocationBody-test.tsx
+++ b/apps/web/test/unit-tests/components/views/messages/MLocationBody-test.tsx
@@ -70,7 +70,7 @@ describe("MLocationBody", () => {
         });
 
         describe("with error", () => {
-            let sdkConfigSpy: jest.SpyInstance<any>;
+            let sdkConfigSpy: jest.SpyInstance;
 
             beforeEach(() => {
                 // eat expected errors to keep console clean
diff --git a/apps/web/test/unit-tests/components/views/messages/MPollBody-test.tsx b/apps/web/test/unit-tests/components/views/messages/MPollBody-test.tsx
index 360e5be4ae..f6b93ad044 100644
--- a/apps/web/test/unit-tests/components/views/messages/MPollBody-test.tsx
+++ b/apps/web/test/unit-tests/components/views/messages/MPollBody-test.tsx
@@ -36,7 +36,7 @@ import {
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import { type RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
 import { type MediaEventHelper } from "../../../../../src/utils/MediaEventHelper";
-import * as languageHandler from "../../../../../src/languageHandler";
+import * as languageSettings from "../../../../../src/i18n/settings";
 
 const CHECKED = "mx_PollOption_checked";
 const userId = "@me:example.com";
@@ -55,7 +55,7 @@ describe("MPollBody", () => {
 
         mockClient.getRoom.mockReturnValue(null);
         mockClient.relations.mockResolvedValue({ events: [] });
-        jest.spyOn(languageHandler, "getUserLanguage").mockReturnValue("en-GB");
+        jest.spyOn(languageSettings, "getUserLanguage").mockReturnValue("en-GB");
     });
 
     it("finds no votes if there are none", () => {
diff --git a/apps/web/test/unit-tests/components/views/messages/MVideoBody-test.tsx b/apps/web/test/unit-tests/components/views/messages/MVideoBody-test.tsx
index 9348a5b0b7..de25092ece 100644
--- a/apps/web/test/unit-tests/components/views/messages/MVideoBody-test.tsx
+++ b/apps/web/test/unit-tests/components/views/messages/MVideoBody-test.tsx
@@ -10,7 +10,7 @@ import React from "react";
 import { EventType, getHttpUriForMxc, type IContent, type MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { fireEvent, render, screen } from "jest-matrix-react";
 import fetchMock from "@fetch-mock/jest";
-import { type MockedObject } from "jest-mock";
+import { type MockedObject } from "jest-mock-vitest-adapter";
 
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import { type RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
diff --git a/apps/web/test/unit-tests/components/views/messages/MVoiceMessageBody-test.tsx b/apps/web/test/unit-tests/components/views/messages/MVoiceMessageBody-test.tsx
index d31c6f7390..facdd5547c 100644
--- a/apps/web/test/unit-tests/components/views/messages/MVoiceMessageBody-test.tsx
+++ b/apps/web/test/unit-tests/components/views/messages/MVoiceMessageBody-test.tsx
@@ -16,7 +16,7 @@ import type { MediaEventHelper } from "../../../../../src/utils/MediaEventHelper
 import MVoiceMessageBody from "../../../../../src/components/views/messages/MVoiceMessageBody";
 import { PlaybackQueue } from "../../../../../src/audio/PlaybackQueue";
 import { createTestClient } from "../../../../test-utils";
-import { SdkContextClass } from "../../../../../src/contexts/SDKContext";
+import { SDKContextClass } from "../../../../../src/contexts/SDKContextClass";
 
 describe("<MVvoiceMessageBody />", () => {
     let event: MatrixEvent;
@@ -26,7 +26,7 @@ describe("<MVvoiceMessageBody />", () => {
 
         const matrixClient = createTestClient();
         const room = new Room("!TESTROOM", matrixClient, "@alice:example.org");
-        const playbackQueue = new PlaybackQueue(room, SdkContextClass.instance.roomViewStore);
+        const playbackQueue = new PlaybackQueue(room, SDKContextClass.instance.roomViewStore);
 
         jest.spyOn(PlaybackQueue, "forRoom").mockReturnValue(playbackQueue);
         jest.spyOn(playbackQueue, "unsortedEnqueue").mockReturnValue(undefined);
diff --git a/apps/web/test/unit-tests/components/views/messages/MessageEvent-test.tsx b/apps/web/test/unit-tests/components/views/messages/MessageEvent-test.tsx
index 476a1ba666..4f911852e1 100644
--- a/apps/web/test/unit-tests/components/views/messages/MessageEvent-test.tsx
+++ b/apps/web/test/unit-tests/components/views/messages/MessageEvent-test.tsx
@@ -10,8 +10,8 @@ import React from "react";
 import { fireEvent, render, type RenderResult } from "jest-matrix-react";
 import { type MatrixClient, type MatrixEvent, EventType, type Room, MsgType } from "matrix-js-sdk/src/matrix";
 import fetchMock from "@fetch-mock/jest";
-import fs from "fs";
-import path from "path";
+import fs from "node:fs";
+import path from "node:path";
 
 import SettingsStore from "../../../../../src/settings/SettingsStore";
 import { mkEvent, mkRoom, stubClient } from "../../../../test-utils";
@@ -20,15 +20,11 @@ import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permal
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import { Mjolnir } from "../../../../../src/mjolnir/Mjolnir";
 
-jest.mock("../../../../../src/components/views/messages/MImageBody", () => ({
-    __esModule: true,
-    default: () => <div data-testid="image-body" />,
-}));
-
 jest.mock("../../../../../src/components/views/messages/MBodyFactory", () => ({
     __esModule: true,
     DecryptionFailureBodyFactory: () => <div data-testid="decryption-failure-body" />,
     FileBodyFactory: () => <div data-testid="file-body" />,
+    ImageBodyFactory: () => <div data-testid="image-body" />,
     RedactedBodyFactory: () => <div className="mx_RedactedBody">Message deleted by Moderator</div>,
     VideoBodyFactory: () => <video data-testid="video-body" />,
     renderMBody: () => <div data-testid="file-body" />,
diff --git a/apps/web/test/unit-tests/components/views/messages/TextualBody-test.tsx b/apps/web/test/unit-tests/components/views/messages/TextualBody-test.tsx
index 60fd55c655..704cab45fe 100644
--- a/apps/web/test/unit-tests/components/views/messages/TextualBody-test.tsx
+++ b/apps/web/test/unit-tests/components/views/messages/TextualBody-test.tsx
@@ -8,9 +8,10 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type ComponentProps } from "react";
 import { type MatrixClient, type MatrixEvent, PushRuleKind, type Room } from "matrix-js-sdk/src/matrix";
-import { mocked, type MockedObject } from "jest-mock";
+import { mocked, type MockedObject } from "jest-mock-vitest-adapter";
 import { act, render, waitFor } from "jest-matrix-react";
 import { PushProcessor } from "matrix-js-sdk/src/pushprocessor";
+import { setMissingEntryGenerator } from "@element-hq/web-shared-components";
 
 import {
     getMockClientWithEventEmitter,
@@ -19,7 +20,6 @@ import {
     mkStubRoom,
     mockClientPushProcessor,
 } from "../../../../test-utils";
-import * as languageHandler from "../../../../../src/languageHandler";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
 import { TextualBodyFactory as TextualBody } from "../../../../../src/components/views/messages/TextualBodyFactory";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
@@ -470,7 +470,7 @@ describe("<TextualBody />", () => {
         let matrixClient: MatrixClient;
 
         beforeEach(() => {
-            languageHandler.setMissingEntryGenerator((key) => key.split("|", 2)[1]);
+            setMissingEntryGenerator((key) => key.split("|", 2)[1]);
             matrixClient = getMockClientWithEventEmitter({
                 getRoom: jest.fn(),
                 getUserId: jest.fn(),
diff --git a/apps/web/test/unit-tests/components/views/messages/__snapshots__/MBodyFactory-test.tsx.snap b/apps/web/test/unit-tests/components/views/messages/__snapshots__/MBodyFactory-test.tsx.snap
index 40b956719c..671c1ce8d5 100644
--- a/apps/web/test/unit-tests/components/views/messages/__snapshots__/MBodyFactory-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/messages/__snapshots__/MBodyFactory-test.tsx.snap
@@ -3,10 +3,10 @@
 exports[`MBodyFactory renderMBody fallback shows m.audio generic placeholder when showFileInfo is true 1`] = `
 <div>
   <span
-    class="_content_1t2mx_8 mx_MFileBody"
+    class="_content_bibip_8 mx_MFileBody"
   >
     <div
-      class="mx_MediaBody _mediaBody_rgndh_8"
+      class="mx_MediaBody _mediaBody_14jys_8"
       data-type="info"
     >
       <button
@@ -44,10 +44,10 @@ exports[`MBodyFactory renderMBody fallback shows m.audio generic placeholder whe
 exports[`MBodyFactory renderMBody fallback shows m.file generic placeholder when showFileInfo is true 1`] = `
 <div>
   <span
-    class="_content_1t2mx_8 mx_MFileBody"
+    class="_content_bibip_8 mx_MFileBody"
   >
     <div
-      class="mx_MediaBody _mediaBody_rgndh_8"
+      class="mx_MediaBody _mediaBody_14jys_8"
       data-type="info"
     >
       <button
@@ -82,7 +82,7 @@ exports[`MBodyFactory renderMBody fallback shows m.file generic placeholder when
 exports[`MBodyFactory renderMBody renders download button for m.file in file rendering type 1`] = `
 <div>
   <span
-    class="_content_1t2mx_8 mx_MFileBody"
+    class="_content_bibip_8 mx_MFileBody"
   >
     <div
       data-type="download"
diff --git a/apps/web/test/unit-tests/components/views/messages/__snapshots__/MImageBody-test.tsx.snap b/apps/web/test/unit-tests/components/views/messages/__snapshots__/MImageBody-test.tsx.snap
deleted file mode 100644
index f3d1b64858..0000000000
--- a/apps/web/test/unit-tests/components/views/messages/__snapshots__/MImageBody-test.tsx.snap
+++ /dev/null
@@ -1,379 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`<MImageBody/> should generate a thumbnail if one isn't included for animated media 1`] = `
-<div>
-  <div
-    class="mx_MImageBody"
-  >
-    <a
-      href="https://server/_matrix/media/v3/download/server/image"
-    >
-      <div
-        class="mx_MImageBody_thumbnail_container"
-        style="max-height: 50px; max-width: 40px; aspect-ratio: 40/50;"
-      >
-        <div
-          class="mx_MImageBody_placeholder"
-        >
-          <div
-            class="mx_Spinner"
-          >
-            <svg
-              aria-label="Loading…"
-              class="_icon_1855a_18"
-              data-testid="spinner"
-              fill="currentColor"
-              height="1em"
-              role="progressbar"
-              style="width: 32px; height: 32px;"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2"
-                fill-rule="evenodd"
-              />
-            </svg>
-          </div>
-        </div>
-        <div
-          style="max-height: 50px; max-width: 40px;"
-        >
-          <img
-            alt="alt for a test image"
-            class="mx_MImageBody_thumbnail"
-            src="blob:generated-thumb"
-          />
-          <p
-            class="mx_MImageBody_gifLabel"
-          >
-            GIF
-          </p>
-        </div>
-      </div>
-    </a>
-  </div>
-</div>
-`;
-
-exports[`<MImageBody/> should open ImageView using thumbnail for encrypted svg 1`] = `
-<div
-  aria-label="Image view"
-  class="mx_ImageView"
-  data-focus-lock-disabled="false"
-  role="dialog"
->
-  <div
-    class="mx_ImageView_panel"
-  >
-    <div
-      class="mx_ImageView_info_wrapper"
-    >
-      <button
-        aria-label="Profile picture"
-        aria-live="off"
-        class="_avatar_va14e_8 mx_BaseAvatar mx_Dialog_nonDialogButton _avatar-imageless_va14e_55"
-        data-color="2"
-        data-testid="avatar-img"
-        data-type="round"
-        role="button"
-        style="--cpd-avatar-size: 32px;"
-      >
-        o
-      </button>
-      <div
-        class="mx_ImageView_info"
-      >
-        <div
-          class="mx_ImageView_info_sender"
-        >
-          @other_use:server
-        </div>
-        <a
-          aria-live="off"
-          class="mx_MessageTimestamp _content_1r034_8"
-          href="https://matrix.to/#/!room:server/undefined"
-        >
-          Thu, Jan 15, 1970, 06:56
-        </a>
-      </div>
-    </div>
-    <div
-      class="mx_ImageView_title"
-    >
-      Image
-    </div>
-    <div
-      class="mx_ImageView_toolbar"
-    >
-      <div
-        aria-label="Zoom out"
-        class="mx_AccessibleButton mx_ImageView_button"
-        role="button"
-        tabindex="0"
-      >
-        <svg
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M13.5 9.5q.425 0 .713.287.288.288.287.713a.97.97 0 0 1-.287.713.97.97 0 0 1-.713.287h-6a.97.97 0 0 1-.713-.287.97.97 0 0 1-.287-.713q0-.425.287-.713A.97.97 0 0 1 7.5 9.5z"
-          />
-          <path
-            clip-rule="evenodd"
-            d="M10.5 3a7.5 7.5 0 0 1 5.963 12.049l3.244 3.244a1 1 0 1 1-1.414 1.414l-3.244-3.244A7.5 7.5 0 1 1 10.5 3m0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </div>
-      <div
-        aria-label="Zoom in"
-        class="mx_AccessibleButton mx_ImageView_button"
-        role="button"
-        tabindex="0"
-      >
-        <svg
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <g
-            clip-path="url(#cpd_ZoomInIcon_a)"
-          >
-            <path
-              d="M10.5 6.5q.425 0 .713.287.288.288.287.713v2h2q.425 0 .713.287.288.288.287.713a.97.97 0 0 1-.287.713.97.97 0 0 1-.713.287h-2v2a.97.97 0 0 1-.287.713.97.97 0 0 1-.713.287.97.97 0 0 1-.713-.287.97.97 0 0 1-.287-.713v-2h-2a.97.97 0 0 1-.713-.287.97.97 0 0 1-.287-.713q0-.425.287-.713A.97.97 0 0 1 7.5 9.5h2v-2q0-.425.287-.713A.97.97 0 0 1 10.5 6.5"
-            />
-            <path
-              clip-rule="evenodd"
-              d="M10.5 3a7.5 7.5 0 0 1 5.963 12.049l3.244 3.244a1 1 0 1 1-1.414 1.414l-3.244-3.244A7.5 7.5 0 1 1 10.5 3m0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11"
-              fill-rule="evenodd"
-            />
-            <path
-              d="M15.05 16.463a7.5 7.5 0 1 1 1.414-1.414l3.243 3.244a1 1 0 0 1-1.414 1.414zM16 10.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0"
-            />
-            <path
-              d="M7.875 11.375h1.75v1.75q0 .372.252.623A.85.85 0 0 0 10.5 14a.85.85 0 0 0 .623-.252.85.85 0 0 0 .252-.623v-1.75h1.75a.85.85 0 0 0 .623-.252A.85.85 0 0 0 14 10.5a.85.85 0 0 0-.252-.623.85.85 0 0 0-.623-.252h-1.75v-1.75a.85.85 0 0 0-.252-.623A.85.85 0 0 0 10.5 7a.85.85 0 0 0-.623.252.85.85 0 0 0-.252.623v1.75h-1.75a.85.85 0 0 0-.623.252A.85.85 0 0 0 7 10.5q0 .372.252.623a.85.85 0 0 0 .623.252"
-            />
-          </g>
-          <defs>
-            <clippath
-              id="cpd_ZoomInIcon_a"
-            >
-              <path
-                d="M0 0h24v24H0z"
-              />
-            </clippath>
-          </defs>
-        </svg>
-      </div>
-      <div
-        aria-label="Rotate Left"
-        class="mx_AccessibleButton mx_ImageView_button"
-        role="button"
-        tabindex="0"
-      >
-        <svg
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M6.56 7.98C6.1 7.52 5.31 7.6 5 8.17c-.28.51-.5 1.03-.67 1.58-.19.63.31 1.25.96 1.25h.01c.43 0 .82-.28.94-.7q.18-.6.48-1.17c.22-.37.15-.84-.16-1.15M5.31 13h-.02c-.65 0-1.15.62-.96 1.25.16.54.38 1.07.66 1.58.31.57 1.11.66 1.57.2.3-.31.38-.77.17-1.15-.2-.37-.36-.76-.48-1.16a.97.97 0 0 0-.94-.72m2.85 6.02q.765.42 1.59.66c.62.18 1.24-.32 1.24-.96v-.03c0-.43-.28-.82-.7-.94-.4-.12-.78-.28-1.15-.48a.97.97 0 0 0-1.16.17l-.03.03c-.45.45-.36 1.24.21 1.55M13 4.07v-.66c0-.89-1.08-1.34-1.71-.71L9.17 4.83c-.4.4-.4 1.04 0 1.43l2.13 2.08c.63.62 1.7.17 1.7-.72V6.09c2.84.48 5 2.94 5 5.91 0 2.73-1.82 5.02-4.32 5.75a.97.97 0 0 0-.68.94v.02c0 .65.61 1.14 1.23.96A7.976 7.976 0 0 0 20 12c0-4.08-3.05-7.44-7-7.93"
-          />
-        </svg>
-      </div>
-      <div
-        aria-label="Rotate Right"
-        class="mx_AccessibleButton mx_ImageView_button"
-        role="button"
-        tabindex="0"
-      >
-        <svg
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <g
-            clip-path="url(#cpd_RotateRightIcon_a)"
-          >
-            <path
-              d="M14.83 4.83 12.7 2.7c-.62-.62-1.7-.18-1.7.71v.66C7.06 4.56 4 7.92 4 12c0 3.64 2.43 6.71 5.77 7.68.62.18 1.23-.32 1.23-.96v-.03a.97.97 0 0 0-.68-.94A5.98 5.98 0 0 1 6 12c0-2.97 2.16-5.43 5-5.91v1.53c0 .89 1.07 1.33 1.7.71l2.13-2.08a.99.99 0 0 0 0-1.42m4.84 4.93q-.24-.825-.66-1.59c-.31-.57-1.1-.66-1.56-.2l-.01.01c-.31.31-.38.78-.17 1.16.2.37.36.76.48 1.16.12.42.51.7.94.7h.02c.65 0 1.15-.62.96-1.24M13 18.68v.02c0 .65.62 1.14 1.24.96q.825-.24 1.59-.66c.57-.31.66-1.1.2-1.56l-.02-.02a.97.97 0 0 0-1.16-.17c-.37.21-.76.37-1.16.49-.41.12-.69.51-.69.94m4.44-2.65c.46.46 1.25.37 1.56-.2.28-.51.5-1.04.67-1.59.18-.62-.31-1.24-.96-1.24h-.02c-.44 0-.82.28-.94.7q-.18.6-.48 1.17c-.21.38-.13.86.17 1.16"
-            />
-          </g>
-          <defs>
-            <clippath
-              id="cpd_RotateRightIcon_a"
-            >
-              <path
-                d="M0 0h24v24H0z"
-              />
-            </clippath>
-          </defs>
-        </svg>
-      </div>
-      <div
-        aria-label="Download"
-        class="mx_AccessibleButton mx_ImageView_button"
-        role="button"
-        tabindex="0"
-      >
-        <svg
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M12 15.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-3.6-3.6a.95.95 0 0 1-.275-.7q0-.425.275-.7.274-.275.712-.288t.713.263L11 12.15V5q0-.424.287-.713A.97.97 0 0 1 12 4q.424 0 .713.287Q13 4.576 13 5v7.15l1.875-1.875q.274-.274.713-.263.437.014.712.288a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-3.6 3.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063M6 20q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 18v-2q0-.424.287-.713A.97.97 0 0 1 5 15q.424 0 .713.287Q6 15.576 6 16v2h12v-2q0-.424.288-.713A.97.97 0 0 1 19 15q.424 0 .712.287.288.288.288.713v2q0 .824-.587 1.413A1.93 1.93 0 0 1 18 20z"
-          />
-        </svg>
-      </div>
-      <div
-        aria-expanded="false"
-        aria-haspopup="true"
-        aria-label="Options"
-        class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_more"
-        role="button"
-        tabindex="0"
-      >
-        <svg
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-          />
-        </svg>
-      </div>
-      <div
-        aria-label="Close"
-        class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_close"
-        role="button"
-        tabindex="0"
-      >
-        <svg
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
-          />
-        </svg>
-      </div>
-    </div>
-  </div>
-  <div
-    class="mx_ImageView_image_wrapper"
-  >
-    <img
-      alt="Attachment"
-      class="mx_ImageView_image "
-      draggable="true"
-      src="https://server/_matrix/media/v3/download/server/svg-thumbnail"
-      style="transform: translateX(-512px)
-                        translateY(NaNpx)
-                        scale(0)
-                        rotate(0deg); cursor: zoom-out;"
-    />
-  </div>
-</div>
-`;
-
-exports[`<MImageBody/> should render MFileBody for svg with no thumbnail 1`] = `
-<DocumentFragment>
-  <span
-    class="_content_1t2mx_8 mx_MFileBody"
-  >
-    <div
-      class="mx_MediaBody _mediaBody_rgndh_8"
-      data-type="info"
-    >
-      <button
-        aria-label="Attachment"
-        class="_button_1nw83_8 _has-icon_1nw83_60"
-        data-kind="secondary"
-        data-size="md"
-        role="button"
-        tabindex="0"
-      >
-        <svg
-          aria-hidden="true"
-          fill="currentColor"
-          height="20"
-          viewBox="0 0 24 24"
-          width="20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
-          />
-        </svg>
-        <span>
-          Attachment
-        </span>
-      </button>
-    </div>
-  </span>
-</DocumentFragment>
-`;
-
-exports[`<MImageBody/> should show a thumbnail while image is being downloaded 1`] = `
-<div>
-  <div
-    class="mx_MImageBody"
-  >
-    <div
-      class="mx_MImageBody_thumbnail_container"
-      style="max-height: 50px; max-width: 40px; aspect-ratio: 40/50;"
-    >
-      <div
-        class="mx_MImageBody_placeholder"
-      >
-        <div
-          class="mx_Spinner"
-        >
-          <svg
-            aria-label="Loading…"
-            class="_icon_1855a_18"
-            data-testid="spinner"
-            fill="currentColor"
-            height="1em"
-            role="progressbar"
-            style="width: 32px; height: 32px;"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              clip-rule="evenodd"
-              d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </div>
-      </div>
-      <div
-        style="max-height: 50px; max-width: 40px;"
-      />
-    </div>
-  </div>
-</div>
-`;
diff --git a/apps/web/test/unit-tests/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap b/apps/web/test/unit-tests/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
index 98d88baa75..b4b637d8d7 100644
--- a/apps/web/test/unit-tests/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
@@ -34,7 +34,7 @@ exports[`MLocationBody <MLocationBody> without error renders map correctly 1`] =
     class="mx_MLocationBody"
   >
     <div
-      aria-labelledby="_r_i_"
+      aria-labelledby="react-use-id-1"
       class="mx_MLocationBody_map"
     >
       <div
@@ -76,7 +76,7 @@ exports[`MLocationBody <MLocationBody> without error renders marker correctly fo
     class="mx_MLocationBody"
   >
     <div
-      aria-labelledby="_r_u_"
+      aria-labelledby="react-use-id-1"
       class="mx_MLocationBody_map"
     >
       <div
diff --git a/apps/web/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap b/apps/web/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
index 9df73e702a..2c691e37f7 100644
--- a/apps/web/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
@@ -60,25 +60,32 @@ exports[`<TextualBody /> renders formatted m.text correctly linkification is not
       </div>
     </pre>
     <button
-      aria-label="Copy"
-      class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton"
+      aria-labelledby="react-use-id-1"
+      class="_icon-button_1215g_8 mx_EventTile_button mx_EventTile_copyButton"
+      data-kind="primary"
       role="button"
+      style="--cpd-icon-button-size: 28px; padding: 4px;"
       tabindex="0"
     >
-      <svg
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 24 24"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
+      <div
+        class="_indicator-icon_147l5_17"
+        style="--cpd-icon-button-size: 100%;"
       >
-        <path
-          d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-        />
-        <path
-          d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-        />
-      </svg>
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+          />
+          <path
+            d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+          />
+        </svg>
+      </div>
     </button>
   </div>
   
@@ -130,7 +137,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for an
 exports[`<TextualBody /> renders formatted m.text correctly pills appear for event permalinks without a custom label 1`] = `
 <DocumentFragment>
   <div
-    class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
+    class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"
   >
     <div
       class="mx_EventTile_body markdown-body translate"
@@ -177,7 +184,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
 exports[`<TextualBody /> renders formatted m.text correctly pills appear for room links with vias 1`] = `
 <DocumentFragment>
   <div
-    class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
+    class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"
   >
     <div
       class="mx_EventTile_body markdown-body translate"
@@ -225,7 +232,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
 exports[`<TextualBody /> renders formatted m.text correctly pills do not appear for event permalinks with a custom label 1`] = `
 <DocumentFragment>
   <div
-    class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
+    class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"
   >
     <div
       class="mx_EventTile_body markdown-body translate"
@@ -279,25 +286,32 @@ exports[`<TextualBody /> renders formatted m.text correctly pills do not appear
       </div>
     </pre>
     <button
-      aria-label="Copy"
-      class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton"
+      aria-labelledby="react-use-id-1"
+      class="_icon-button_1215g_8 mx_EventTile_button mx_EventTile_copyButton"
+      data-kind="primary"
       role="button"
+      style="--cpd-icon-button-size: 28px; padding: 4px;"
       tabindex="0"
     >
-      <svg
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 24 24"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
+      <div
+        class="_indicator-icon_147l5_17"
+        style="--cpd-icon-button-size: 100%;"
       >
-        <path
-          d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-        />
-        <path
-          d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-        />
-      </svg>
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+          />
+          <path
+            d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+          />
+        </svg>
+      </div>
     </button>
   </div>
   
@@ -467,8 +481,11 @@ num_sqrt = num **
         </code>
       </div>
     </pre>
-    <span
-      class="mx_EventTile_button"
+    <button
+      aria-label="Expand"
+      class="mx_AccessibleButton mx_EventTile_button"
+      role="button"
+      tabindex="0"
     >
       <svg
         fill="currentColor"
@@ -481,27 +498,34 @@ num_sqrt = num **
           d="M21 3.997a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 20 3h-8a1 1 0 1 0 0 2h5.586L5 17.586V12a1 1 0 1 0-2 0v8.003a1 1 0 0 0 .29.702l.005.004c.18.18.43.291.705.291h8a1 1 0 1 0 0-2H6.414L19 6.414V12a1 1 0 1 0 2 0z"
         />
       </svg>
-    </span>
+    </button>
     <button
-      aria-label="Copy"
-      class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton mx_EventTile_buttonBottom"
+      aria-labelledby="react-use-id-1"
+      class="_icon-button_1215g_8 mx_EventTile_button mx_EventTile_copyButton mx_EventTile_buttonBottom"
+      data-kind="primary"
       role="button"
+      style="--cpd-icon-button-size: 28px; padding: 4px;"
       tabindex="0"
     >
-      <svg
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 24 24"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
+      <div
+        class="_indicator-icon_147l5_17"
+        style="--cpd-icon-button-size: 100%;"
       >
-        <path
-          d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-        />
-        <path
-          d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-        />
-      </svg>
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+          />
+          <path
+            d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+          />
+        </svg>
+      </div>
     </button>
   </div>
   
@@ -517,6 +541,7 @@ exports[`<TextualBody /> renders formatted m.text correctly spoilers get injecte
   Hey 
   <button
     class="mx_EventTile_spoiler"
+    type="button"
   >
     <span
       class="mx_EventTile_spoiler_reason"
diff --git a/apps/web/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap b/apps/web/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap
index 15208761ad..e55c057502 100644
--- a/apps/web/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap
@@ -114,11 +114,13 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
           class="mx_PollListItem"
           data-testid="pollListItem-$2"
         >
-          <span
+          <div
+            aria-label="View poll"
+            class="mx_AccessibleButton mx_PollListItemEnded_content"
+            role="button"
             tabindex="0"
           >
             <div
-              aria-labelledby="_r_a_"
               class="mx_PollListItem_content"
             >
               <span>
@@ -142,17 +144,19 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
                 Where?
               </span>
             </div>
-          </span>
+          </div>
         </li>
         <li
           class="mx_PollListItem"
           data-testid="pollListItem-$1"
         >
-          <span
+          <div
+            aria-label="View poll"
+            class="mx_AccessibleButton mx_PollListItemEnded_content"
+            role="button"
             tabindex="0"
           >
             <div
-              aria-labelledby="_r_f_"
               class="mx_PollListItem_content"
             >
               <span>
@@ -176,7 +180,7 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
                 Question?
               </span>
             </div>
-          </span>
+          </div>
         </li>
       </ol>
     </div>
@@ -201,7 +205,7 @@ exports[`<PollHistory /> renders a no polls message and a load more button when
       fill="currentColor"
       height="1em"
       role="progressbar"
-      style="width: 20px; height: 20px;"
+      style="width: 16px; height: 16px;"
       viewBox="0 0 24 24"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/web/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollListItem-test.tsx.snap b/apps/web/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollListItem-test.tsx.snap
index 558e4ef98a..b56e20c0a7 100644
--- a/apps/web/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollListItem-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollListItem-test.tsx.snap
@@ -6,11 +6,13 @@ exports[`<PollListItem /> renders a poll 1`] = `
     class="mx_PollListItem"
     data-testid="pollListItem-$mypoll"
   >
-    <span
+    <div
+      aria-label="View poll"
+      class="mx_AccessibleButton mx_PollListItemEnded_content"
+      role="button"
       tabindex="0"
     >
       <div
-        aria-labelledby="_r_0_"
         class="mx_PollListItem_content"
       >
         <span>
@@ -34,7 +36,7 @@ exports[`<PollListItem /> renders a poll 1`] = `
           Question?
         </span>
       </div>
-    </span>
+    </div>
   </li>
 </div>
 `;
diff --git a/apps/web/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollListItemEnded-test.tsx.snap b/apps/web/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollListItemEnded-test.tsx.snap
index 635ef0e140..a700787ef0 100644
--- a/apps/web/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollListItemEnded-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollListItemEnded-test.tsx.snap
@@ -6,53 +6,51 @@ exports[`<PollListItemEnded /> renders a poll with no responses 1`] = `
     class="mx_PollListItemEnded"
     data-testid="pollListItem-1"
   >
-    <span
+    <div
+      aria-label="View poll"
+      class="mx_AccessibleButton mx_PollListItemEnded_content"
+      role="button"
       tabindex="0"
     >
       <div
-        aria-labelledby="_r_0_"
-        class="mx_PollListItemEnded_content"
+        class="mx_PollListItemEnded_title"
       >
-        <div
-          class="mx_PollListItemEnded_title"
+        <svg
+          class="mx_PollListItemEnded_icon"
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            class="mx_PollListItemEnded_icon"
-            fill="currentColor"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M21 10.659V19q0 .824-.587 1.413A1.93 1.93 0 0 1 19 21H5q-.824 0-1.412-.587A1.93 1.93 0 0 1 3 19V5q0-.824.587-1.412A1.93 1.93 0 0 1 5 3h8.341A6 6 0 0 0 13 5H5v14h14v-8a6 6 0 0 0 2-.341"
-            />
-            <path
-              d="M13.803 8a6 6 0 0 0 1.88 2H13a.97.97 0 0 1-.713-.287A.97.97 0 0 1 12 9q0-.424.287-.713A.97.97 0 0 1 13 8zm2.91 7.713A.97.97 0 0 1 16 16h-3a.97.97 0 0 1-.713-.287A.97.97 0 0 1 12 15q0-.424.287-.713A.97.97 0 0 1 13 14h3q.424 0 .712.287.288.288.288.713 0 .424-.288.713m-6.299-5.3A1.93 1.93 0 0 1 9 11q-.825 0-1.412-.588A1.93 1.93 0 0 1 7 9q0-.825.588-1.412A1.93 1.93 0 0 1 9 7q.825 0 1.412.588Q11 8.175 11 9t-.588 1.412m.001 6.001A1.93 1.93 0 0 1 9 17q-.825 0-1.412-.587A1.93 1.93 0 0 1 7 15q0-.825.588-1.412A1.93 1.93 0 0 1 9 13q.825 0 1.412.588Q11 14.175 11 15q0 .824-.588 1.413m12.295-14.12a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L18 5.586l3.293-3.293a1 1 0 0 1 1.414 0"
-            />
-          </svg>
-          <span
-            class="mx_PollListItemEnded_question"
-          >
-            Question?
-          </span>
-          <span
-            class="mx_Caption"
-          >
-            02/02/23
-          </span>
-        </div>
-        <div
-          class="mx_PollListItemEnded_voteCount"
+          <path
+            d="M21 10.659V19q0 .824-.587 1.413A1.93 1.93 0 0 1 19 21H5q-.824 0-1.412-.587A1.93 1.93 0 0 1 3 19V5q0-.824.587-1.412A1.93 1.93 0 0 1 5 3h8.341A6 6 0 0 0 13 5H5v14h14v-8a6 6 0 0 0 2-.341"
+          />
+          <path
+            d="M13.803 8a6 6 0 0 0 1.88 2H13a.97.97 0 0 1-.713-.287A.97.97 0 0 1 12 9q0-.424.287-.713A.97.97 0 0 1 13 8zm2.91 7.713A.97.97 0 0 1 16 16h-3a.97.97 0 0 1-.713-.287A.97.97 0 0 1 12 15q0-.424.287-.713A.97.97 0 0 1 13 14h3q.424 0 .712.287.288.288.288.713 0 .424-.288.713m-6.299-5.3A1.93 1.93 0 0 1 9 11q-.825 0-1.412-.588A1.93 1.93 0 0 1 7 9q0-.825.588-1.412A1.93 1.93 0 0 1 9 7q.825 0 1.412.588Q11 8.175 11 9t-.588 1.412m.001 6.001A1.93 1.93 0 0 1 9 17q-.825 0-1.412-.587A1.93 1.93 0 0 1 7 15q0-.825.588-1.412A1.93 1.93 0 0 1 9 13q.825 0 1.412.588Q11 14.175 11 15q0 .824-.588 1.413m12.295-14.12a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L18 5.586l3.293-3.293a1 1 0 0 1 1.414 0"
+          />
+        </svg>
+        <span
+          class="mx_PollListItemEnded_question"
         >
-          <span
-            class="mx_Caption"
-          >
-            Final result based on 0 votes
-          </span>
-        </div>
+          Question?
+        </span>
+        <span
+          class="mx_Caption"
+        >
+          02/02/23
+        </span>
       </div>
-    </span>
+      <div
+        class="mx_PollListItemEnded_voteCount"
+      >
+        <span
+          class="mx_Caption"
+        >
+          Final result based on 0 votes
+        </span>
+      </div>
+    </div>
   </li>
 </div>
 `;
diff --git a/apps/web/test/unit-tests/components/views/right_panel/BaseCard-test.tsx b/apps/web/test/unit-tests/components/views/right_panel/BaseCard-test.tsx
index 3764f53492..817c9b44cf 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/BaseCard-test.tsx
+++ b/apps/web/test/unit-tests/components/views/right_panel/BaseCard-test.tsx
@@ -10,6 +10,8 @@ import { fireEvent, render, screen } from "jest-matrix-react";
 
 import BaseCard from "../../../../../src/components/views/right_panel/BaseCard.tsx";
 import RightPanelStore from "../../../../../src/stores/right-panel/RightPanelStore.ts";
+import { clientAndSDKContextRenderOptions } from "../../../../test-utils";
+import { SDKContextClass } from "../../../../../src/contexts/SDKContextClass.ts";
 
 jest.mock("../../../../../src/stores/right-panel/RightPanelStore", () => ({
     instance: {
@@ -24,6 +26,7 @@ describe("<BaseCard />", () => {
             <BaseCard header="Heading text">
                 <div>Content</div>
             </BaseCard>,
+            clientAndSDKContextRenderOptions(SDKContextClass.instance.client!, SDKContextClass.instance),
         );
 
         expect(screen.getByRole("heading")).toHaveTextContent("Heading text");
diff --git a/apps/web/test/unit-tests/components/views/right_panel/ExtensionsCard-test.tsx b/apps/web/test/unit-tests/components/views/right_panel/ExtensionsCard-test.tsx
index e11b4092d7..3fbd83453f 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/ExtensionsCard-test.tsx
+++ b/apps/web/test/unit-tests/components/views/right_panel/ExtensionsCard-test.tsx
@@ -14,27 +14,34 @@ import { MatrixWidgetType } from "matrix-widget-api";
 import userEvent from "@testing-library/user-event";
 
 import ExtensionsCard from "../../../../../src/components/views/right_panel/ExtensionsCard";
-import { stubClient } from "../../../../test-utils";
+import { clientAndSDKContextRenderOptions, stubClient } from "../../../../test-utils";
 import { type IApp } from "../../../../../src/stores/WidgetStore";
 import WidgetUtils, { useWidgets } from "../../../../../src/utils/WidgetUtils";
 import { WidgetLayoutStore } from "../../../../../src/stores/widgets/WidgetLayoutStore";
 import { IntegrationManagers } from "../../../../../src/integrations/IntegrationManagers";
+import { TestSDKContext } from "../../../TestSDKContext.ts";
 
 jest.mock("../../../../../src/utils/WidgetUtils");
 
 describe("<ExtensionsCard />", () => {
     let client: Mocked<MatrixClient>;
     let room: Room;
+    let sdkContext: TestSDKContext;
 
     beforeEach(() => {
         client = mocked(stubClient());
+        sdkContext = new TestSDKContext();
+        sdkContext._client = client;
         room = new Room("!room:server", client, client.getSafeUserId());
         mocked(WidgetUtils.getWidgetName).mockImplementation((app) => app?.name ?? "No Name");
     });
 
     it("should render empty state", () => {
         mocked(useWidgets).mockReturnValue([]);
-        const { asFragment } = render(<ExtensionsCard room={room} onClose={jest.fn()} />);
+        const { asFragment } = render(
+            <ExtensionsCard room={room} onClose={jest.fn()} />,
+            clientAndSDKContextRenderOptions(client, sdkContext),
+        );
         expect(screen.getByText("Boost productivity with more tools, widgets and bots")).toBeInTheDocument();
         expect(asFragment()).toMatchSnapshot();
     });
@@ -61,7 +68,10 @@ describe("<ExtensionsCard />", () => {
             },
         ] satisfies IApp[]);
 
-        const { asFragment } = render(<ExtensionsCard room={room} onClose={jest.fn()} />);
+        const { asFragment } = render(
+            <ExtensionsCard room={room} onClose={jest.fn()} />,
+            clientAndSDKContextRenderOptions(client, sdkContext),
+        );
         expect(screen.getByText("Custom Widget")).toBeInTheDocument();
         expect(screen.getByText("Jitsi")).toBeInTheDocument();
         expect(asFragment()).toMatchSnapshot();
@@ -81,7 +91,10 @@ describe("<ExtensionsCard />", () => {
             },
         ] satisfies IApp[]);
 
-        const { container } = render(<ExtensionsCard room={room} onClose={jest.fn()} />);
+        const { container } = render(
+            <ExtensionsCard room={room} onClose={jest.fn()} />,
+            clientAndSDKContextRenderOptions(client, sdkContext),
+        );
         await userEvent.click(container.querySelector(".mx_ExtensionsCard_app_options")!);
         expect(document.querySelector(".mx_IconizedContextMenu")).toMatchSnapshot();
     });
@@ -100,7 +113,10 @@ describe("<ExtensionsCard />", () => {
             },
         ] satisfies IApp[]);
 
-        render(<ExtensionsCard room={room} onClose={jest.fn()} />);
+        render(
+            <ExtensionsCard room={room} onClose={jest.fn()} />,
+            clientAndSDKContextRenderOptions(client, sdkContext),
+        );
         expect(screen.getByText("Set layout for everyone")).toBeInTheDocument();
     });
 
@@ -118,7 +134,10 @@ describe("<ExtensionsCard />", () => {
             },
         ] satisfies IApp[]);
 
-        render(<ExtensionsCard room={room} onClose={jest.fn()} />);
+        render(
+            <ExtensionsCard room={room} onClose={jest.fn()} />,
+            clientAndSDKContextRenderOptions(client, sdkContext),
+        );
         expect(screen.getByText("Custom Widget").closest(".mx_ExtensionsCard_Button_pinned")).toBeInTheDocument();
     });
 
@@ -137,15 +156,52 @@ describe("<ExtensionsCard />", () => {
             },
         ] satisfies IApp[]);
 
-        render(<ExtensionsCard room={room} onClose={jest.fn()} />);
+        render(
+            <ExtensionsCard room={room} onClose={jest.fn()} />,
+            clientAndSDKContextRenderOptions(client, sdkContext),
+        );
         expect(screen.getByLabelText("You can only pin up to 3 widgets")).toBeInTheDocument();
     });
 
     it("should should open integration manager on click", async () => {
         jest.spyOn(IntegrationManagers.sharedInstance(), "hasManager").mockReturnValue(false);
         const spy = jest.spyOn(IntegrationManagers.sharedInstance(), "openNoManagerDialog");
-        render(<ExtensionsCard room={room} onClose={jest.fn()} />);
+        render(
+            <ExtensionsCard room={room} onClose={jest.fn()} />,
+            clientAndSDKContextRenderOptions(client, sdkContext),
+        );
         await userEvent.click(screen.getByText("Add extensions"));
         expect(spy).toHaveBeenCalled();
     });
+
+    it("should set room layout on click", async () => {
+        mocked(useWidgets).mockReturnValue([
+            {
+                id: "id",
+                roomId: room.roomId,
+                eventId: "$event1",
+                creatorUserId: client.getSafeUserId(),
+                type: MatrixWidgetType.Custom,
+                name: "Custom Widget",
+                url: "http://url1",
+            },
+            {
+                id: "jitsi",
+                roomId: room.roomId,
+                eventId: "$event2",
+                creatorUserId: client.getSafeUserId(),
+                type: MatrixWidgetType.JitsiMeet,
+                name: "Jitsi",
+                url: "http://jitsi",
+            },
+        ] satisfies IApp[]);
+
+        jest.spyOn(sdkContext.widgetLayoutStore, "copyLayoutToRoom");
+        render(
+            <ExtensionsCard room={room} onClose={jest.fn()} />,
+            clientAndSDKContextRenderOptions(client, sdkContext),
+        );
+        await userEvent.click(screen.getByText("Set layout for everyone"));
+        expect(sdkContext.widgetLayoutStore.copyLayoutToRoom).toHaveBeenCalledWith(room);
+    });
 });
diff --git a/apps/web/test/unit-tests/components/views/right_panel/PinnedMessagesCard-test.tsx b/apps/web/test/unit-tests/components/views/right_panel/PinnedMessagesCard-test.tsx
index 7196667d9c..ac53b9b656 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/PinnedMessagesCard-test.tsx
+++ b/apps/web/test/unit-tests/components/views/right_panel/PinnedMessagesCard-test.tsx
@@ -27,13 +27,19 @@ import { PollEndEvent } from "matrix-js-sdk/src/extensible_events_v1/PollEndEven
 import { sleep } from "matrix-js-sdk/src/utils";
 import userEvent from "@testing-library/user-event";
 
-import { stubClient, mkEvent, mkMessage, flushPromises } from "../../../../test-utils";
+import {
+    stubClient,
+    mkEvent,
+    mkMessage,
+    flushPromises,
+    clientAndSDKContextRenderOptions,
+} from "../../../../test-utils";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
 import { PinnedMessagesCard } from "../../../../../src/components/views/right_panel/PinnedMessagesCard";
-import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
 import Modal from "../../../../../src/Modal";
 import { UnpinAllDialog } from "../../../../../src/components/views/dialogs/UnpinAllDialog";
+import { SDKContextClass } from "../../../../../src/contexts/SDKContextClass.ts";
 
 describe("<PinnedMessagesCard />", () => {
     let cli: MockedObject<MatrixClient>;
@@ -86,13 +92,12 @@ describe("<PinnedMessagesCard />", () => {
 
     async function renderMessagePinList(room: Room): Promise<RenderResult> {
         const renderResult = render(
-            <MatrixClientContext.Provider value={cli}>
-                <PinnedMessagesCard
-                    room={room}
-                    onClose={jest.fn()}
-                    permalinkCreator={new RoomPermalinkCreator(room, room.roomId)}
-                />
-            </MatrixClientContext.Provider>,
+            <PinnedMessagesCard
+                room={room}
+                onClose={jest.fn()}
+                permalinkCreator={new RoomPermalinkCreator(room, room.roomId)}
+            />,
+            clientAndSDKContextRenderOptions(cli, SDKContextClass.instance),
         );
         // Wait a tick for state updates
         await act(() => sleep(0));
@@ -170,13 +175,12 @@ describe("<PinnedMessagesCard />", () => {
     it("should show spinner whilst loading", async () => {
         const room = mkRoom([], [pin1]);
         render(
-            <MatrixClientContext.Provider value={cli}>
-                <PinnedMessagesCard
-                    room={room}
-                    onClose={jest.fn()}
-                    permalinkCreator={new RoomPermalinkCreator(room, room.roomId)}
-                />
-            </MatrixClientContext.Provider>,
+            <PinnedMessagesCard
+                room={room}
+                onClose={jest.fn()}
+                permalinkCreator={new RoomPermalinkCreator(room, room.roomId)}
+            />,
+            clientAndSDKContextRenderOptions(cli, SDKContextClass.instance),
         );
 
         await waitForElementToBeRemoved(() => screen.queryAllByRole("progressbar"));
@@ -294,6 +298,23 @@ describe("<PinnedMessagesCard />", () => {
             await initPinnedMessagesCard([], [pin]);
             expect(screen.queryAllByRole("listitem")).toHaveLength(0);
         });
+
+        it("should filter out null events returned by useFetchedPinnedEvents and only display valid events", async () => {
+            // RoomCreate is not a pinnable event type — useFetchedPinnedEvents returns null for it
+            const unpinnableEvent = mkEvent({
+                event: true,
+                type: EventType.RoomCreate,
+                content: {},
+                room: "!room:example.org",
+                user: "@alice:example.org",
+            });
+            // pin1 is a valid pinnable message, unpinnableEvent causes useFetchedPinnedEvents to return null
+            // useSortedFetchedPinnedEvents must filter out the null, leaving only pin1
+            await initPinnedMessagesCard([pin1], [unpinnableEvent]);
+
+            await waitFor(() => expect(screen.queryAllByRole("listitem")).toHaveLength(1));
+            expect(screen.getByText("First pinned message")).toBeInTheDocument();
+        });
     });
 
     describe("unpin all", () => {
@@ -305,13 +326,12 @@ describe("<PinnedMessagesCard />", () => {
             ).mockReturnValue(false);
 
             const { asFragment } = render(
-                <MatrixClientContext.Provider value={cli}>
-                    <PinnedMessagesCard
-                        room={room}
-                        onClose={jest.fn()}
-                        permalinkCreator={new RoomPermalinkCreator(room, room.roomId)}
-                    />
-                </MatrixClientContext.Provider>,
+                <PinnedMessagesCard
+                    room={room}
+                    onClose={jest.fn()}
+                    permalinkCreator={new RoomPermalinkCreator(room, room.roomId)}
+                />,
+                clientAndSDKContextRenderOptions(cli, SDKContextClass.instance),
             );
 
             // Wait a tick for state updates
diff --git a/apps/web/test/unit-tests/components/views/right_panel/RoomSummaryCardView-test.tsx b/apps/web/test/unit-tests/components/views/right_panel/RoomSummaryCardView-test.tsx
index cd38d48e09..42b00bef91 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/RoomSummaryCardView-test.tsx
+++ b/apps/web/test/unit-tests/components/views/right_panel/RoomSummaryCardView-test.tsx
@@ -23,6 +23,8 @@ import {
     useRoomSummaryCardViewModel,
 } from "../../../../../src/components/viewmodels/right_panel/RoomSummaryCardViewModel";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
+import { SDKContext } from "../../../../../src/contexts/SDKContext.ts";
+import { SDKContextClass } from "../../../../../src/contexts/SDKContextClass.ts";
 
 // Mock the viewmodel hooks
 jest.mock("../../../../../src/components/viewmodels/right_panel/RoomSummaryCardViewModel", () => ({
@@ -45,9 +47,11 @@ describe("<RoomSummaryCard />", () => {
 
         return render(<RoomSummaryCardView {...defaultProps} {...props} />, {
             wrapper: ({ children }) => (
-                <MatrixClientContext.Provider value={mockClient}>
-                    <LinkedTextContext.Provider value={{}}>{children}</LinkedTextContext.Provider>
-                </MatrixClientContext.Provider>
+                <SDKContext.Provider value={SDKContextClass.instance}>
+                    <MatrixClientContext.Provider value={mockClient}>
+                        <LinkedTextContext.Provider value={{}}>{children}</LinkedTextContext.Provider>
+                    </MatrixClientContext.Provider>
+                </SDKContext.Provider>
             ),
         });
     };
@@ -55,6 +59,7 @@ describe("<RoomSummaryCard />", () => {
     // Setup mock view models
     const vmDefaultValues: RoomSummaryCardState = {
         isDirectMessage: false,
+        userStatus: undefined,
         isRoomEncrypted: false,
         e2eStatus: undefined,
         isVideoRoom: false,
@@ -325,4 +330,31 @@ describe("<RoomSummaryCard />", () => {
             expect(screen.queryByText("Public room")).toBeInTheDocument();
         });
     });
+
+    describe("user status", () => {
+        it("shows the other user's status when set", () => {
+            mocked(useRoomSummaryCardViewModel).mockReturnValue({
+                ...vmDefaultValues,
+                isDirectMessage: true,
+                userStatus: { emoji: "💬", text: "In a meeting" },
+            });
+
+            getComponent();
+
+            expect(screen.getByText("In a meeting")).toBeInTheDocument();
+            expect(screen.getByText("💬")).toBeInTheDocument();
+        });
+
+        it("does not show a status when there is none", () => {
+            mocked(useRoomSummaryCardViewModel).mockReturnValue({
+                ...vmDefaultValues,
+                isDirectMessage: true,
+                userStatus: undefined,
+            });
+
+            getComponent();
+
+            expect(screen.queryByText("In a meeting")).not.toBeInTheDocument();
+        });
+    });
 });
diff --git a/apps/web/test/unit-tests/components/views/right_panel/UserInfo-test.tsx b/apps/web/test/unit-tests/components/views/right_panel/UserInfo-test.tsx
index 47dc1826b5..cb8e4b02ae 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/UserInfo-test.tsx
+++ b/apps/web/test/unit-tests/components/views/right_panel/UserInfo-test.tsx
@@ -19,7 +19,7 @@ import {
     ProfileKeyTimezone,
     ProfileKeyMSC4175Timezone,
 } from "matrix-js-sdk/src/matrix";
-import { EventEmitter } from "events";
+import { EventEmitter } from "node:events";
 import {
     UserVerificationStatus,
     type VerificationRequest,
@@ -32,12 +32,12 @@ import UserInfo, { disambiguateDevices } from "../../../../../src/components/vie
 import { getPowerLevels } from "../../../../../src/components/viewmodels/right_panel/user_info/UserInfoBasicViewModel";
 import { RightPanelPhases } from "../../../../../src/stores/right-panel/RightPanelStorePhases";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
-import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import Modal from "../../../../../src/Modal";
-import { clearAllModals, flushPromises } from "../../../../test-utils";
+import { clearAllModals, clientAndSDKContextRenderOptions, flushPromises } from "../../../../test-utils";
 import ErrorDialog from "../../../../../src/components/views/dialogs/ErrorDialog";
 import { shouldShowComponent } from "../../../../../src/customisations/helpers/UIComponents";
 import { UIComponent } from "../../../../../src/settings/UIFeature";
+import { TestSDKContext } from "../../../TestSDKContext.ts";
 
 jest.mock("../../../../../src/utils/direct-messages", () => ({
     ...jest.requireActual("../../../../../src/utils/direct-messages"),
@@ -78,6 +78,7 @@ const defaultUser = new User(defaultUserId);
 let mockRoom: Mocked<Room>;
 let mockClient: Mocked<MatrixClient>;
 let mockCrypto: Mocked<CryptoApi>;
+let sdkContext: TestSDKContext;
 const origDate = global.Date.prototype.toLocaleString;
 
 beforeEach(() => {
@@ -131,6 +132,8 @@ beforeEach(() => {
         setPowerLevel: jest.fn(),
         getCrypto: jest.fn().mockReturnValue(mockCrypto),
     } as unknown as MatrixClient);
+    sdkContext = new TestSDKContext();
+    sdkContext._client = mockClient;
 
     jest.spyOn(MatrixClientPeg, "get").mockReturnValue(mockClient);
     jest.spyOn(MatrixClientPeg, "safeGet").mockReturnValue(mockClient);
@@ -162,13 +165,10 @@ describe("<UserInfo />", () => {
     };
 
     const renderComponent = (props = {}) => {
-        const Wrapper = (wrapperProps = {}) => {
-            return <MatrixClientContext.Provider value={mockClient} {...wrapperProps} />;
-        };
-
-        return render(<UserInfo {...defaultProps} {...props} />, {
-            wrapper: Wrapper,
-        });
+        return render(
+            <UserInfo {...defaultProps} {...props} />,
+            clientAndSDKContextRenderOptions(mockClient, sdkContext),
+        );
     };
 
     beforeEach(() => {
@@ -202,16 +202,14 @@ describe("<UserInfo />", () => {
         describe.each([[ProfileKeyTimezone], [ProfileKeyMSC4175Timezone]])("timezone rendering (%s)", (profileKey) => {
             it("renders user timezone if set", async () => {
                 // For timezone, force a consistent locale.
-                jest.spyOn(global.Date.prototype, "toLocaleString").mockImplementation(function (
-                    this: Date,
-                    _locale,
-                    opts,
-                ) {
-                    return origDate.call(this, "en-US", {
-                        ...opts,
-                        hourCycle: "h12",
-                    });
-                });
+                jest.spyOn(global.Date.prototype, "toLocaleString").mockImplementation(
+                    function (this: Date, _locale, opts) {
+                        return origDate.call(this, "en-US", {
+                            ...opts,
+                            hourCycle: "h12",
+                        });
+                    },
+                );
                 mockClient.doesServerSupportExtendedProfiles.mockResolvedValue(true);
                 mockClient.getExtendedProfile.mockResolvedValue({ [profileKey]: "Europe/London" });
                 renderComponent();
@@ -309,11 +307,7 @@ describe("<UserInfo />", () => {
         });
 
         it("renders the message button", () => {
-            render(
-                <MatrixClientContext.Provider value={mockClient}>
-                    <UserInfo {...defaultProps} />
-                </MatrixClientContext.Provider>,
-            );
+            render(<UserInfo {...defaultProps} />, clientAndSDKContextRenderOptions(mockClient, sdkContext));
 
             screen.getByRole("button", { name: "Send message" });
         });
@@ -324,11 +318,7 @@ describe("<UserInfo />", () => {
                     return component !== UIComponent.CreateRooms;
                 },
                 () => {
-                    render(
-                        <MatrixClientContext.Provider value={mockClient}>
-                            <UserInfo {...defaultProps} />
-                        </MatrixClientContext.Provider>,
-                    );
+                    render(<UserInfo {...defaultProps} />, clientAndSDKContextRenderOptions(mockClient, sdkContext));
 
                     expect(screen.queryByRole("button", { name: "Message" })).toBeNull();
                 },
diff --git a/apps/web/test/unit-tests/components/views/right_panel/VerificationPanel-test.tsx b/apps/web/test/unit-tests/components/views/right_panel/VerificationPanel-test.tsx
index c6a7de8ee1..dca32f66dd 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/VerificationPanel-test.tsx
+++ b/apps/web/test/unit-tests/components/views/right_panel/VerificationPanel-test.tsx
@@ -206,7 +206,7 @@ function makeMockSasCallbacks(): ShowSasCallbacks {
     const unicorn: EmojiMapping = ["🦄", "unicorn"];
     return {
         sas: {
-            emoji: new Array<EmojiMapping>(7).fill(unicorn),
+            emoji: Array.from<EmojiMapping>({ length: 7 }).map(() => unicorn),
         },
         cancel: jest.fn(),
         confirm: jest.fn(),
diff --git a/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/BaseCard-test.tsx.snap b/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/BaseCard-test.tsx.snap
index b4e558abac..5d7c150081 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/BaseCard-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/BaseCard-test.tsx.snap
@@ -12,6 +12,7 @@ exports[`<BaseCard /> should close when clicking X button 1`] = `
         class="mx_BaseCard_header_title"
       >
         <p
+          aria-level="1"
           class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
           role="heading"
         >
@@ -19,7 +20,7 @@ exports[`<BaseCard /> should close when clicking X button 1`] = `
         </p>
       </div>
       <button
-        aria-labelledby="_r_0_"
+        aria-labelledby="react-use-id-1"
         class="_icon-button_1215g_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
@@ -46,7 +47,7 @@ exports[`<BaseCard /> should close when clicking X button 1`] = `
       </button>
     </div>
     <div
-      class="mx_AutoHideScrollbar"
+      class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar"
       tabindex="-1"
     >
       <div>
diff --git a/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap b/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap
index 5107a25a2b..d427defa90 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/ExtensionsCard-test.tsx.snap
@@ -12,6 +12,7 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
         class="mx_BaseCard_header_title"
       >
         <p
+          aria-level="1"
           class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
           role="heading"
         >
@@ -19,7 +20,7 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
         </p>
       </div>
       <button
-        aria-labelledby="_r_0_"
+        aria-labelledby="react-use-id-1"
         class="_icon-button_1215g_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
@@ -46,7 +47,7 @@ exports[`<ExtensionsCard /> should render empty state 1`] = `
       </button>
     </div>
     <div
-      class="mx_AutoHideScrollbar"
+      class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar"
       tabindex="-1"
     >
       <button
@@ -113,6 +114,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
         class="mx_BaseCard_header_title"
       >
         <p
+          aria-level="1"
           class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
           role="heading"
         >
@@ -120,7 +122,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
         </p>
       </div>
       <button
-        aria-labelledby="_r_6_"
+        aria-labelledby="react-use-id-1"
         class="_icon-button_1215g_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
@@ -147,7 +149,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
       </button>
     </div>
     <div
-      class="mx_AutoHideScrollbar"
+      class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar"
       tabindex="-1"
     >
       <button
@@ -283,6 +285,14 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
           </svg>
         </div>
       </div>
+      <a
+        class="_link_13esb_8"
+        data-kind="primary"
+        data-size="md"
+        rel="noreferrer noopener"
+      >
+        Set layout for everyone
+      </a>
     </div>
   </div>
 </DocumentFragment>
diff --git a/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap b/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
index 035744fd70..8745232a2a 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/PinnedMessagesCard-test.tsx.snap
@@ -12,6 +12,7 @@ exports[`<PinnedMessagesCard /> should show the empty state when there are no pi
         class="mx_BaseCard_header_title"
       >
         <p
+          aria-level="1"
           class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
           role="heading"
         >
@@ -19,7 +20,7 @@ exports[`<PinnedMessagesCard /> should show the empty state when there are no pi
         </p>
       </div>
       <button
-        aria-labelledby="_r_f_"
+        aria-labelledby="react-use-id-1"
         class="_icon-button_1215g_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
@@ -46,7 +47,7 @@ exports[`<PinnedMessagesCard /> should show the empty state when there are no pi
       </button>
     </div>
     <div
-      class="mx_AutoHideScrollbar"
+      class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar"
       tabindex="-1"
     >
       <div
@@ -94,6 +95,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
         class="mx_BaseCard_header_title"
       >
         <p
+          aria-level="1"
           class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
           role="heading"
         >
@@ -101,7 +103,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
         </p>
       </div>
       <button
-        aria-labelledby="_r_l_"
+        aria-labelledby="react-use-id-1"
         class="_icon-button_1215g_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
@@ -128,7 +130,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
       </button>
     </div>
     <div
-      class="mx_AutoHideScrollbar"
+      class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar"
       tabindex="-1"
     >
       <div
@@ -159,13 +161,13 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
               class="mx_PinnedEventTile_top"
             >
               <span
-                aria-labelledby="_r_s_"
+                aria-labelledby="react-use-id-2"
                 class="mx_PinnedEventTile_sender mx_Username_color3"
               >
                 @alice:example.org
               </span>
               <button
-                aria-describedby="_r_r_"
+                aria-describedby="react-use-id-3"
                 aria-disabled="false"
                 aria-expanded="false"
                 aria-haspopup="menu"
@@ -173,7 +175,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
                 class="_icon-button_1215g_8"
                 data-kind="primary"
                 data-state="closed"
-                id="radix-_r_11_"
+                id="radix-react-use-id-4"
                 role="button"
                 style="--cpd-icon-button-size: 24px;"
                 tabindex="0"
@@ -198,8 +200,8 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
               </button>
             </div>
             <div
-              class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
-              id="_r_r_"
+              class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"
+              id="react-use-id-3"
             >
               <div
                 class="mx_EventTile_body translate"
@@ -240,13 +242,13 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
               class="mx_PinnedEventTile_top"
             >
               <span
-                aria-labelledby="_r_14_"
+                aria-labelledby="react-use-id-5"
                 class="mx_PinnedEventTile_sender mx_Username_color3"
               >
                 @alice:example.org
               </span>
               <button
-                aria-describedby="_r_13_"
+                aria-describedby="react-use-id-6"
                 aria-disabled="false"
                 aria-expanded="false"
                 aria-haspopup="menu"
@@ -254,7 +256,7 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
                 class="_icon-button_1215g_8"
                 data-kind="primary"
                 data-state="closed"
-                id="radix-_r_19_"
+                id="radix-react-use-id-7"
                 role="button"
                 style="--cpd-icon-button-size: 24px;"
                 tabindex="0"
@@ -279,8 +281,8 @@ exports[`<PinnedMessagesCard /> should show two pinned messages 1`] = `
               </button>
             </div>
             <div
-              class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
-              id="_r_13_"
+              class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"
+              id="react-use-id-6"
             >
               <div
                 class="mx_EventTile_body translate"
@@ -322,6 +324,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
         class="mx_BaseCard_header_title"
       >
         <p
+          aria-level="1"
           class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
           role="heading"
         >
@@ -329,7 +332,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
         </p>
       </div>
       <button
-        aria-labelledby="_r_10f_"
+        aria-labelledby="react-use-id-1"
         class="_icon-button_1215g_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
@@ -356,7 +359,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
       </button>
     </div>
     <div
-      class="mx_AutoHideScrollbar"
+      class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar"
       tabindex="-1"
     >
       <div
@@ -387,13 +390,13 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
               class="mx_PinnedEventTile_top"
             >
               <span
-                aria-labelledby="_r_10m_"
+                aria-labelledby="react-use-id-2"
                 class="mx_PinnedEventTile_sender mx_Username_color3"
               >
                 @alice:example.org
               </span>
               <button
-                aria-describedby="_r_10l_"
+                aria-describedby="react-use-id-3"
                 aria-disabled="false"
                 aria-expanded="false"
                 aria-haspopup="menu"
@@ -401,7 +404,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
                 class="_icon-button_1215g_8"
                 data-kind="primary"
                 data-state="closed"
-                id="radix-_r_10r_"
+                id="radix-react-use-id-4"
                 role="button"
                 style="--cpd-icon-button-size: 24px;"
                 tabindex="0"
@@ -426,8 +429,8 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
               </button>
             </div>
             <div
-              class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
-              id="_r_10l_"
+              class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"
+              id="react-use-id-3"
             >
               <div
                 class="mx_EventTile_body translate"
@@ -468,13 +471,13 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
               class="mx_PinnedEventTile_top"
             >
               <span
-                aria-labelledby="_r_10u_"
+                aria-labelledby="react-use-id-5"
                 class="mx_PinnedEventTile_sender mx_Username_color3"
               >
                 @alice:example.org
               </span>
               <button
-                aria-describedby="_r_10t_"
+                aria-describedby="react-use-id-6"
                 aria-disabled="false"
                 aria-expanded="false"
                 aria-haspopup="menu"
@@ -482,7 +485,7 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
                 class="_icon-button_1215g_8"
                 data-kind="primary"
                 data-state="closed"
-                id="radix-_r_113_"
+                id="radix-react-use-id-7"
                 role="button"
                 style="--cpd-icon-button-size: 24px;"
                 tabindex="0"
@@ -507,8 +510,8 @@ exports[`<PinnedMessagesCard /> unpin all should not allow to unpinall 1`] = `
               </button>
             </div>
             <div
-              class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
-              id="_r_10t_"
+              class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"
+              id="react-use-id-6"
             >
               <div
                 class="mx_EventTile_body translate"
diff --git a/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap b/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap
index 296be2fa26..58f106d62b 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
         class="mx_BaseCard_header_spacer"
       />
       <button
-        aria-labelledby="_r_e_"
+        aria-labelledby="react-use-id-1"
         class="_icon-button_1215g_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
@@ -42,7 +42,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
       </button>
     </div>
     <div
-      class="mx_AutoHideScrollbar"
+      class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar"
       tabindex="-1"
     >
       <header
@@ -181,7 +181,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             style="--mx-box-flex: 1;"
           >
             <a
-              class="_link_k9ljz_8"
+              class="_link_13esb_8"
               data-kind="primary"
               data-size="md"
               rel="noreferrer noopener"
@@ -235,7 +235,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             <input
               aria-hidden="true"
               class="_input_udcm8_24"
-              id="_r_j_"
+              id="react-use-id-2"
               role="switch"
               tabindex="-1"
               type="checkbox"
@@ -754,7 +754,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         class="mx_BaseCard_header_spacer"
       />
       <button
-        aria-labelledby="_r_0_"
+        aria-labelledby="react-use-id-1"
         class="_icon-button_1215g_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
@@ -781,7 +781,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
       </button>
     </div>
     <div
-      class="mx_AutoHideScrollbar"
+      class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar"
       tabindex="-1"
     >
       <header
@@ -878,7 +878,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             style="--mx-box-flex: 1;"
           >
             <a
-              class="_link_k9ljz_8"
+              class="_link_13esb_8"
               data-kind="primary"
               data-size="md"
               rel="noreferrer noopener"
@@ -932,7 +932,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             <input
               aria-hidden="true"
               class="_input_udcm8_24"
-              id="_r_5_"
+              id="react-use-id-2"
               role="switch"
               tabindex="-1"
               type="checkbox"
@@ -1451,7 +1451,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
         class="mx_BaseCard_header_spacer"
       />
       <button
-        aria-labelledby="_r_7_"
+        aria-labelledby="react-use-id-1"
         class="_icon-button_1215g_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
@@ -1478,7 +1478,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
       </button>
     </div>
     <div
-      class="mx_AutoHideScrollbar"
+      class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar"
       tabindex="-1"
     >
       <header
@@ -1617,7 +1617,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             style="--mx-box-flex: 1;"
           >
             <a
-              class="_link_k9ljz_8"
+              class="_link_13esb_8"
               data-kind="primary"
               data-size="md"
               rel="noreferrer noopener"
@@ -1671,7 +1671,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             <input
               aria-hidden="true"
               class="_input_udcm8_24"
-              id="_r_c_"
+              id="react-use-id-2"
               role="switch"
               tabindex="-1"
               type="checkbox"
diff --git a/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap b/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
index a36cc0c4c4..a228981b2b 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
@@ -12,6 +12,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
         class="mx_BaseCard_header_title"
       >
         <p
+          aria-level="1"
           class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
           role="heading"
         >
@@ -19,7 +20,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
         </p>
       </div>
       <button
-        aria-labelledby="_r_7c_"
+        aria-labelledby="react-use-id-1"
         class="_icon-button_1215g_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
@@ -46,7 +47,7 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
       </button>
     </div>
     <div
-      class="mx_AutoHideScrollbar"
+      class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar"
       tabindex="-1"
     >
       <div
@@ -104,25 +105,32 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
             >
               customUserIdentifier
               <button
-                aria-label="Copy"
-                class="mx_AccessibleButton mx_CopyableText_copyButton"
+                aria-labelledby="react-use-id-2"
+                class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                data-kind="primary"
                 role="button"
+                style="--cpd-icon-button-size: 28px; padding: 4px;"
                 tabindex="0"
               >
-                <svg
-                  fill="currentColor"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="_indicator-icon_147l5_17"
+                  style="--cpd-icon-button-size: 100%;"
                 >
-                  <path
-                    d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-                  />
-                  <path
-                    d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-                  />
-                </svg>
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                    />
+                    <path
+                      d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                    />
+                  </svg>
+                </div>
               </button>
             </span>
           </p>
@@ -314,6 +322,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
         class="mx_BaseCard_header_title"
       >
         <p
+          aria-level="1"
           class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
           role="heading"
         >
@@ -321,7 +330,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
         </p>
       </div>
       <button
-        aria-labelledby="_r_7m_"
+        aria-labelledby="react-use-id-1"
         class="_icon-button_1215g_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
@@ -348,7 +357,7 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
       </button>
     </div>
     <div
-      class="mx_AutoHideScrollbar"
+      class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar"
       tabindex="-1"
     >
       <div
@@ -406,25 +415,32 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
             >
               customUserIdentifier
               <button
-                aria-label="Copy"
-                class="mx_AccessibleButton mx_CopyableText_copyButton"
+                aria-labelledby="react-use-id-2"
+                class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                data-kind="primary"
                 role="button"
+                style="--cpd-icon-button-size: 28px; padding: 4px;"
                 tabindex="0"
               >
-                <svg
-                  fill="currentColor"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
+                <div
+                  class="_indicator-icon_147l5_17"
+                  style="--cpd-icon-button-size: 100%;"
                 >
-                  <path
-                    d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-                  />
-                  <path
-                    d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-                  />
-                </svg>
+                  <svg
+                    fill="currentColor"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                    />
+                    <path
+                      d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                    />
+                  </svg>
+                </div>
               </button>
             </span>
           </p>
diff --git a/apps/web/test/unit-tests/components/views/right_panel/user_info/UserInfoHeaderVerificationView-test.tsx b/apps/web/test/unit-tests/components/views/right_panel/user_info/UserInfoHeaderVerificationView-test.tsx
index 7c54d167c3..0aff7d65bb 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/user_info/UserInfoHeaderVerificationView-test.tsx
+++ b/apps/web/test/unit-tests/components/views/right_panel/user_info/UserInfoHeaderVerificationView-test.tsx
@@ -13,9 +13,9 @@ import { render, waitFor, screen } from "jest-matrix-react";
 import React from "react";
 
 import { MatrixClientPeg } from "../../../../../../src/MatrixClientPeg";
-import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
 import { UserInfoHeaderVerificationView } from "../../../../../../src/components/views/right_panel/user_info/UserInfoHeaderVerificationView";
-import { createTestClient } from "../../../../../test-utils";
+import { clientAndSDKContextRenderOptions, createTestClient } from "../../../../../test-utils";
+import { TestSDKContext } from "../../../../TestSDKContext.ts";
 
 describe("<UserInfoHeaderVerificationView />", () => {
     const defaultRoomId = "!fkfk";
@@ -25,6 +25,7 @@ describe("<UserInfoHeaderVerificationView />", () => {
 
     let mockClient: MatrixClient;
     let mockCrypto: Mocked<CryptoApi>;
+    let sdkContext: TestSDKContext;
 
     beforeEach(() => {
         mockCrypto = mocked({
@@ -42,6 +43,8 @@ describe("<UserInfoHeaderVerificationView />", () => {
         } as unknown as CryptoApi);
 
         mockClient = createTestClient();
+        sdkContext = new TestSDKContext();
+        sdkContext._client = mockClient;
         jest.spyOn(mockClient, "doesServerSupportUnstableFeature").mockResolvedValue(true);
         jest.spyOn(mockClient.secretStorage, "hasKey").mockResolvedValue(true);
         jest.spyOn(mockClient, "getCrypto").mockReturnValue(mockCrypto);
@@ -62,13 +65,11 @@ describe("<UserInfoHeaderVerificationView />", () => {
 
         mockCrypto.getUserDeviceInfo.mockResolvedValue(userDeviceMap);
         jest.spyOn(mockClient, "doesServerSupportUnstableFeature").mockResolvedValue(true);
-        const Wrapper = (wrapperProps = {}) => {
-            return <MatrixClientContext.Provider value={mockClient} {...wrapperProps} />;
-        };
 
-        return render(<UserInfoHeaderVerificationView member={defaultMember} devices={[device1]} />, {
-            wrapper: Wrapper,
-        });
+        return render(
+            <UserInfoHeaderVerificationView member={defaultMember} devices={[device1]} />,
+            clientAndSDKContextRenderOptions(mockClient, sdkContext),
+        );
     };
 
     it("renders verified badge when user is verified", async () => {
diff --git a/apps/web/test/unit-tests/components/views/right_panel/user_info/UserInfoHeaderView-test.tsx b/apps/web/test/unit-tests/components/views/right_panel/user_info/UserInfoHeaderView-test.tsx
index 31da372b2a..45ca0c942a 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/user_info/UserInfoHeaderView-test.tsx
+++ b/apps/web/test/unit-tests/components/views/right_panel/user_info/UserInfoHeaderView-test.tsx
@@ -13,10 +13,10 @@ import { fireEvent, render, screen } from "jest-matrix-react";
 import React from "react";
 
 import { MatrixClientPeg } from "../../../../../../src/MatrixClientPeg";
-import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
 import { UserInfoHeaderView } from "../../../../../../src/components/views/right_panel/user_info/UserInfoHeaderView";
-import { createTestClient } from "../../../../../test-utils";
+import { clientAndSDKContextRenderOptions, createTestClient } from "../../../../../test-utils";
 import { useUserfoHeaderViewModel } from "../../../../../../src/components/viewmodels/right_panel/user_info/UserInfoHeaderViewModel";
+import { TestSDKContext } from "../../../../TestSDKContext.ts";
 
 // Mock the viewmodel hooks
 jest.mock("../../../../../../src/components/viewmodels/right_panel/user_info/UserInfoHeaderViewModel", () => ({
@@ -45,6 +45,7 @@ describe("<UserInfoHeaderView />", () => {
 
     let mockClient: MatrixClient;
     let mockCrypto: Mocked<CryptoApi>;
+    let sdkContext: TestSDKContext;
 
     beforeEach(() => {
         mockCrypto = mocked({
@@ -63,6 +64,8 @@ describe("<UserInfoHeaderView />", () => {
 
         mockClient = createTestClient();
         mockClient.doesServerSupportExtendedProfiles = () => Promise.resolve(false);
+        sdkContext = new TestSDKContext();
+        sdkContext._client = mockClient;
 
         jest.spyOn(mockClient, "doesServerSupportUnstableFeature").mockResolvedValue(true);
         jest.spyOn(mockClient.secretStorage, "hasKey").mockResolvedValue(true);
@@ -90,10 +93,6 @@ describe("<UserInfoHeaderView />", () => {
 
         mockCrypto.getUserDeviceInfo.mockResolvedValue(userDeviceMap);
 
-        const Wrapper = (wrapperProps = {}) => {
-            return <MatrixClientContext.Provider value={mockClient} {...wrapperProps} />;
-        };
-
         return render(
             <UserInfoHeaderView
                 {...defaultProps}
@@ -101,9 +100,7 @@ describe("<UserInfoHeaderView />", () => {
                 devices={[device1]}
                 hideVerificationSection={props.hideVerificationSection}
             />,
-            {
-                wrapper: Wrapper,
-            },
+            clientAndSDKContextRenderOptions(mockClient, sdkContext),
         );
     };
 
diff --git a/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderView-test.tsx.snap b/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderView-test.tsx.snap
index 348e688b06..034e73c676 100644
--- a/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderView-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderView-test.tsx.snap
@@ -53,25 +53,32 @@ exports[`<UserInfoHeaderView /> renders custom user identifiers in the header 1`
         >
           customUserIdentifier
           <button
-            aria-label="Copy"
-            class="mx_AccessibleButton mx_CopyableText_copyButton"
+            aria-labelledby="react-use-id-1"
+            class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+            data-kind="primary"
             role="button"
+            style="--cpd-icon-button-size: 28px; padding: 4px;"
             tabindex="0"
           >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
             >
-              <path
-                d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-              />
-              <path
-                d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-              />
-            </svg>
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                />
+                <path
+                  d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                />
+              </svg>
+            </div>
           </button>
         </span>
       </p>
diff --git a/apps/web/test/unit-tests/components/views/rooms/AppsDrawer-test.tsx b/apps/web/test/unit-tests/components/views/rooms/AppsDrawer-test.tsx
index 38efbc1eb8..ddb9396ce9 100644
--- a/apps/web/test/unit-tests/components/views/rooms/AppsDrawer-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/AppsDrawer-test.tsx
@@ -15,21 +15,22 @@ import AppsDrawer from "../../../../../src/components/views/rooms/AppsDrawer";
 import SdkConfig from "../../../../../src/SdkConfig";
 import { WidgetLayoutStore } from "../../../../../src/stores/widgets/WidgetLayoutStore";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
-import { SDKContext, SdkContextClass } from "../../../../../src/contexts/SDKContext";
+import { SDKContext } from "../../../../../src/contexts/SDKContext";
+import { SDKContextClass } from "../../../../../src/contexts/SDKContextClass";
 
 const ROOM_ID = "!room:id";
 
 describe("AppsDrawer", () => {
     let client: MatrixClient;
     let room: Room;
-    let sdkContext: SdkContextClass;
+    let sdkContext: SDKContextClass;
 
     beforeEach(async () => {
         client = stubClient();
         room = new Room(ROOM_ID, client, client.getUserId()!, {
             pendingEventOrdering: PendingEventOrdering.Detached,
         });
-        sdkContext = new SdkContextClass();
+        sdkContext = new SDKContextClass();
     });
 
     afterEach(() => {
diff --git a/apps/web/test/unit-tests/components/views/rooms/BasicMessageComposer-test.tsx b/apps/web/test/unit-tests/components/views/rooms/BasicMessageComposer-test.tsx
index e1b2aa00a5..caedd8cede 100644
--- a/apps/web/test/unit-tests/components/views/rooms/BasicMessageComposer-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/BasicMessageComposer-test.tsx
@@ -18,8 +18,9 @@ import EditorModel from "../../../../../src/editor/model";
 import { createPartCreator, createRenderer } from "../../../editor/mock";
 import { CommandPartCreator } from "../../../../../src/editor/parts";
 import DocumentOffset from "../../../../../src/editor/offset";
-import { SdkContextClass } from "../../../../../src/contexts/SDKContext";
+import { SDKContextClass } from "../../../../../src/contexts/SDKContextClass";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
+import { SDKContext } from "../../../../../src/contexts/SDKContext.ts";
 
 describe("BasicMessageComposer", () => {
     const renderer = createRenderer();
@@ -35,7 +36,11 @@ describe("BasicMessageComposer", () => {
 
     it("should allow a user to paste a URL without it being mangled", async () => {
         const model = new EditorModel([], pc, renderer);
-        render(<BasicMessageComposer model={model} room={room} />);
+        render(<BasicMessageComposer model={model} room={room} />, {
+            wrapper: ({ children }) => (
+                <SDKContext.Provider value={SDKContextClass.instance}>{children}</SDKContext.Provider>
+            ),
+        });
         const testUrl = "https://element.io";
         const mockDataTransfer = generateMockDataTransferForString(testUrl);
         await userEvent.paste(mockDataTransfer);
@@ -51,7 +56,11 @@ describe("BasicMessageComposer", () => {
         });
         userEvent.setup();
         const model = new EditorModel([], pc, renderer);
-        render(<BasicMessageComposer model={model} room={room} />);
+        render(<BasicMessageComposer model={model} room={room} />, {
+            wrapper: ({ children }) => (
+                <SDKContext.Provider value={SDKContextClass.instance}>{children}</SDKContext.Provider>
+            ),
+        });
 
         const tranformations = [
             { before: "4:3 video", after: "4:3 video" },
@@ -81,7 +90,11 @@ describe("BasicMessageComposer", () => {
 
     it("should not mangle shift-enter when the autocomplete is open", async () => {
         const model = new EditorModel([], pc, renderer);
-        render(<BasicMessageComposer model={model} room={room} />);
+        render(<BasicMessageComposer model={model} room={room} />, {
+            wrapper: ({ children }) => (
+                <SDKContext.Provider value={SDKContextClass.instance}>{children}</SDKContext.Provider>
+            ),
+        });
 
         const input = screen.getByRole("textbox");
 
@@ -93,7 +106,11 @@ describe("BasicMessageComposer", () => {
 
     it("should escape single quote in placeholder", async () => {
         const model = new EditorModel([], pc, renderer);
-        const composer = render(<BasicMessageComposer placeholder="Don't" model={model} room={room} />);
+        const composer = render(<BasicMessageComposer placeholder="Don't" model={model} room={room} />, {
+            wrapper: ({ children }) => (
+                <SDKContext.Provider value={SDKContextClass.instance}>{children}</SDKContext.Provider>
+            ),
+        });
         const input = composer.queryAllByRole("textbox");
         const placeholder = input[0].style.getPropertyValue("--placeholder");
         expect(placeholder).toMatch("'Don\\'t'");
@@ -101,7 +118,11 @@ describe("BasicMessageComposer", () => {
 
     it("should escape backslash in placeholder", async () => {
         const model = new EditorModel([], pc, renderer);
-        const composer = render(<BasicMessageComposer placeholder={"w\\e"} model={model} room={room} />);
+        const composer = render(<BasicMessageComposer placeholder={"w\\e"} model={model} room={room} />, {
+            wrapper: ({ children }) => (
+                <SDKContext.Provider value={SDKContextClass.instance}>{children}</SDKContext.Provider>
+            ),
+        });
         const input = composer.queryAllByRole("textbox");
         const placeholder = input[0].style.getPropertyValue("--placeholder");
         expect(placeholder).toMatch("'w\\\\e'");
@@ -114,9 +135,13 @@ describe("BasicMessageComposer", () => {
         const model = new EditorModel([commandPart], commandPc, renderer);
 
         // spy on typingStore.setSelfTyping
-        const spy = jest.spyOn(SdkContextClass.instance.typingStore, "setSelfTyping");
+        const spy = jest.spyOn(SDKContextClass.instance.typingStore, "setSelfTyping");
 
-        render(<BasicMessageComposer model={model} room={room} />);
+        render(<BasicMessageComposer model={model} room={room} />, {
+            wrapper: ({ children }) => (
+                <SDKContext.Provider value={SDKContextClass.instance}>{children}</SDKContext.Provider>
+            ),
+        });
 
         // simulate typing by updating the model - this will call the component's update callback
         await model.update(commandPart.text, "insertText", new DocumentOffset(commandPart.text.length, true));
@@ -128,7 +153,11 @@ describe("BasicMessageComposer", () => {
 
     it("should ignore keydown events during IME composition", () => {
         const model = new EditorModel([], pc, renderer);
-        render(<BasicMessageComposer model={model} room={room} />);
+        render(<BasicMessageComposer model={model} room={room} />, {
+            wrapper: ({ children }) => (
+                <SDKContext.Provider value={SDKContextClass.instance}>{children}</SDKContext.Provider>
+            ),
+        });
         const input = screen.getByRole("textbox");
 
         // Start IME composition
@@ -167,7 +196,11 @@ describe("BasicMessageComposer", () => {
 
     it("should handle keydown events normally when not composing", () => {
         const model = new EditorModel([], pc, renderer);
-        render(<BasicMessageComposer model={model} room={room} />);
+        render(<BasicMessageComposer model={model} room={room} />, {
+            wrapper: ({ children }) => (
+                <SDKContext.Provider value={SDKContextClass.instance}>{children}</SDKContext.Provider>
+            ),
+        });
         const input = screen.getByRole("textbox");
 
         // Simulate Tab key when NOT composing
diff --git a/apps/web/test/unit-tests/components/views/rooms/EditMessageComposer-test.tsx b/apps/web/test/unit-tests/components/views/rooms/EditMessageComposer-test.tsx
index 39ae0a4b6f..84338e7904 100644
--- a/apps/web/test/unit-tests/components/views/rooms/EditMessageComposer-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/EditMessageComposer-test.tsx
@@ -33,6 +33,8 @@ import NotifProvider from "../../../../../src/autocomplete/NotifProvider";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
 import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";
 import type { RoomContextType } from "../../../../../src/contexts/RoomContext.ts";
+import { SDKContext } from "../../../../../src/contexts/SDKContext.ts";
+import { SDKContextClass } from "../../../../../src/contexts/SDKContextClass.ts";
 
 describe("<EditMessageComposer/>", () => {
     const userId = "@alice:server.org";
@@ -78,9 +80,11 @@ describe("<EditMessageComposer/>", () => {
     const getComponent = (editState: EditorStateTransfer, roomContext: RoomContextType = defaultRoomContext) =>
         render(<EditMessageComposerWithMatrixClient editState={editState} />, {
             wrapper: ({ children }) => (
-                <MatrixClientContext.Provider value={mockClient}>
-                    <ScopedRoomContextProvider {...roomContext}>{children}</ScopedRoomContextProvider>
-                </MatrixClientContext.Provider>
+                <SDKContext.Provider value={SDKContextClass.instance}>
+                    <MatrixClientContext.Provider value={mockClient}>
+                        <ScopedRoomContextProvider {...roomContext}>{children}</ScopedRoomContextProvider>
+                    </MatrixClientContext.Provider>
+                </SDKContext.Provider>
             ),
         });
 
diff --git a/apps/web/test/unit-tests/components/views/rooms/EventTile-test.tsx b/apps/web/test/unit-tests/components/views/rooms/EventTile-test.tsx
index 1d2d0ac657..aadff0c081 100644
--- a/apps/web/test/unit-tests/components/views/rooms/EventTile-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/EventTile-test.tsx
@@ -15,9 +15,14 @@ import {
     type IEventDecryptionResult,
     type MatrixClient,
     MatrixEvent,
+    MatrixEventEvent,
+    MsgType,
     NotificationCountType,
     PendingEventOrdering,
+    RelationType,
+    type Relations,
     Room,
+    RoomMember,
     TweakName,
 } from "matrix-js-sdk/src/matrix";
 import {
@@ -44,6 +49,97 @@ import PinningUtils from "../../../../../src/utils/PinningUtils";
 import { Layout } from "../../../../../src/settings/enums/Layout";
 import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
+import EditorStateTransfer from "../../../../../src/utils/EditorStateTransfer";
+import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
+import PlatformPeg from "../../../../../src/PlatformPeg";
+import { SDKContextClass } from "../../../../../src/contexts/SDKContextClass.ts";
+import { SDKContext } from "../../../../../src/contexts/SDKContext.ts";
+
+function getTile(container: HTMLElement): HTMLElement {
+    const tile = container.querySelector(".mx_EventTile");
+    expect(tile).not.toBeNull();
+    return tile as HTMLElement;
+}
+
+function getLine(container: HTMLElement): HTMLElement {
+    const line = container.querySelector(".mx_EventTile_line");
+    expect(line).not.toBeNull();
+    return line as HTMLElement;
+}
+
+function expectTileClass(container: HTMLElement, className: string): void {
+    expect(getTile(container)).toHaveClass(className);
+}
+
+function makeReplyEvent(roomId: string): MatrixEvent {
+    const parentEvent = mkMessage({
+        room: roomId,
+        user: "@alice:example.org",
+        msg: "Original message",
+        event: true,
+    });
+
+    return mkMessage({
+        room: roomId,
+        user: "@bob:example.org",
+        msg: "Reply message",
+        event: true,
+        relatesTo: {
+            "m.in_reply_to": {
+                event_id: parentEvent.getId(),
+            },
+        },
+    });
+}
+
+function makeThreadReplyEvent(roomId: string): MatrixEvent {
+    return mkMessage({
+        room: roomId,
+        user: "@alice:example.org",
+        msg: "Hello world!",
+        ts: 1234,
+        event: true,
+        relatesTo: {
+            rel_type: "m.thread",
+            event_id: "$thread-root",
+        },
+    });
+}
+
+function makeReactionEvent(roomId: string, targetEventId: string, sender: string, key: string): MatrixEvent {
+    return mkEvent({
+        event: true,
+        type: EventType.Reaction,
+        room: roomId,
+        user: sender,
+        content: {
+            "m.relates_to": {
+                rel_type: RelationType.Annotation,
+                event_id: targetEventId,
+                key,
+            },
+        },
+    });
+}
+
+function makeRelations(
+    reactionsByKey: Map<string, MatrixEvent[]>,
+    reactionsBySender: Record<string, MatrixEvent[]> = {},
+): Relations {
+    return {
+        getSortedAnnotationsByKey: () =>
+            [...reactionsByKey.entries()].map(([key, events]) => [key, new Set(events)] as [string, Set<MatrixEvent>]),
+        getAnnotationsBySender: () =>
+            Object.fromEntries(
+                Object.entries(reactionsBySender).map(([sender, events]) => [
+                    sender,
+                    new Map(events.map((ev) => [ev.getId(), ev])),
+                ]),
+            ),
+        on: jest.fn(),
+        off: jest.fn(),
+    } as unknown as Relations;
+}
 
 describe("EventTile", () => {
     const ROOM_ID = "!roomId:example.org";
@@ -83,11 +179,58 @@ describe("EventTile", () => {
         return render(<WrappedEventTile roomContext={context} eventTilePropertyOverrides={overrides} />);
     }
 
+    function makeOwnMessage(overrides: Partial<Parameters<typeof mkMessage>[0]> = {}): MatrixEvent {
+        return mkMessage({
+            ...overrides,
+            room: overrides.room ?? room.roomId,
+            user: overrides.user ?? client.getSafeUserId(),
+            msg: overrides.msg ?? "Hello world!",
+            event: overrides.event ?? true,
+        });
+    }
+
+    function makeTimestampedMessage(overrides: Partial<Parameters<typeof mkMessage>[0]> = {}): MatrixEvent {
+        return mkMessage({
+            ...overrides,
+            room: overrides.room ?? room.roomId,
+            user: overrides.user ?? "@alice:example.org",
+            msg: overrides.msg ?? "Hello world!",
+            ts: overrides.ts ?? 1234,
+            event: overrides.event ?? true,
+        });
+    }
+
+    function WrappedEventTiles(props: { events: MatrixEvent[]; editEvent?: MatrixEvent }) {
+        const roomContext = getRoomContext(room, {
+            timelineRenderingType: TimelineRenderingType.Room,
+        });
+
+        return (
+            <MatrixClientContext.Provider value={client}>
+                <ScopedRoomContextProvider {...roomContext}>
+                    {props.events.map((event) => (
+                        <EventTile
+                            key={event.getId()}
+                            mxEvent={event}
+                            replacingEventId={event.replacingEventId()}
+                            editState={
+                                props.editEvent?.getId() === event.getId() ? new EditorStateTransfer(event) : undefined
+                            }
+                        />
+                    ))}
+                </ScopedRoomContextProvider>
+            </MatrixClientContext.Provider>
+        );
+    }
+
     beforeEach(() => {
         jest.clearAllMocks();
 
         stubClient();
         client = MatrixClientPeg.safeGet();
+        jest.spyOn(DMRoomMap, "shared").mockReturnValue({
+            getUserIdForRoomId: jest.fn().mockReturnValue(undefined),
+        } as unknown as DMRoomMap);
 
         room = new Room(ROOM_ID, client, client.getSafeUserId(), {
             pendingEventOrdering: PendingEventOrdering.Detached,
@@ -110,6 +253,690 @@ describe("EventTile", () => {
         jest.restoreAllMocks();
     });
 
+    describe("layout and tile attributes", () => {
+        it.each([
+            ["last", { last: true }, "mx_EventTile_last"],
+            ["lastInSection", { lastInSection: true }, "mx_EventTile_lastInSection"],
+            ["contextual", { contextual: true }, "mx_EventTile_contextual"],
+            ["isSelectedEvent", { isSelectedEvent: true }, "mx_EventTile_selected"],
+            ["hideSender", { hideSender: true }, "mx_EventTile_noSender"],
+            ["isTwelveHour", { isTwelveHour: true }, "mx_EventTile_12hr"],
+        ] as const)("adds the %s class", (_propName, overrides, className) => {
+            const { container } = getComponent(overrides);
+
+            expectTileClass(container, className);
+        });
+
+        it("marks events from other users as non-self events", () => {
+            const { container } = getComponent();
+
+            expect(getTile(container)).toHaveAttribute("data-self", "false");
+        });
+
+        it("marks events from the current user as self events", () => {
+            const ownEvent = makeOwnMessage();
+            const { container } = getComponent({ mxEvent: ownEvent });
+
+            expect(getTile(container)).toHaveAttribute("data-self", "true");
+        });
+
+        it("exposes the rendered event id in room timelines", () => {
+            const { container } = getComponent();
+
+            expect(getTile(container)).toHaveAttribute("data-event-id", mxEvent.getId());
+        });
+
+        it("renders the event line inside the tile", () => {
+            const { container } = getComponent();
+
+            expect(getTile(container)).toContainElement(getLine(container));
+        });
+
+        it("preserves the existing root and line markup", () => {
+            const { container } = getComponent();
+            const tile = getTile(container);
+
+            expect(tile.tagName).toBe("LI");
+            expect(tile).toContainElement(getLine(container));
+            expect(getLine(container)).toHaveClass("mx_EventTile_line");
+        });
+
+        it("does not expose a scroll token for local echo events", () => {
+            const localEcho = makeOwnMessage();
+            localEcho.setStatus(EventStatus.SENDING);
+            const { container } = getComponent({ mxEvent: localEcho, eventSendStatus: EventStatus.SENDING });
+
+            expect(getTile(container)).not.toHaveAttribute("data-scroll-tokens");
+        });
+
+        it("sets aria-live to off when the send status is undefined", () => {
+            const { container } = getComponent();
+
+            expect(getTile(container)).toHaveAttribute("aria-live", "off");
+        });
+
+        it("does not set aria-live when the send status is explicitly null", () => {
+            const { container } = getComponent({ eventSendStatus: null as unknown as EventStatus });
+
+            expect(getTile(container)).not.toHaveAttribute("aria-live");
+        });
+    });
+
+    describe("rendering root attributes", () => {
+        type RootAttribute =
+            | "data-scroll-tokens"
+            | "data-layout"
+            | "data-shape"
+            | "data-self"
+            | "data-event-id"
+            | "data-has-reply";
+
+        it.each([
+            [
+                TimelineRenderingType.Room,
+                ["data-scroll-tokens", "data-layout", "data-self", "data-event-id", "data-has-reply"],
+                ["data-shape"],
+            ],
+            [
+                TimelineRenderingType.Thread,
+                ["data-scroll-tokens", "data-layout", "data-self", "data-event-id", "data-has-reply"],
+                ["data-shape"],
+            ],
+            [
+                TimelineRenderingType.ThreadsList,
+                ["data-scroll-tokens", "data-layout", "data-shape", "data-self", "data-has-reply"],
+                ["data-event-id"],
+            ],
+            [
+                TimelineRenderingType.Notification,
+                ["data-scroll-tokens", "data-layout", "data-shape", "data-self", "data-has-reply"],
+                ["data-event-id"],
+            ],
+            [
+                TimelineRenderingType.File,
+                ["data-scroll-tokens"],
+                ["data-layout", "data-shape", "data-self", "data-event-id", "data-has-reply"],
+            ],
+        ] as const)(
+            "sets root attributes for %s rendering",
+            (renderingType, expectedPresentAttributes, expectedAbsentAttributes) => {
+                const { container } = getComponent({}, renderingType);
+                const tile = getTile(container);
+                const expectedValues: Record<RootAttribute, string> = {
+                    "data-scroll-tokens": mxEvent.getId()!,
+                    "data-layout": Layout.Group,
+                    "data-shape": renderingType,
+                    "data-self": "false",
+                    "data-event-id": mxEvent.getId()!,
+                    "data-has-reply": "false",
+                };
+
+                for (const attribute of expectedPresentAttributes) {
+                    expect(tile).toHaveAttribute(attribute, expectedValues[attribute]);
+                }
+
+                for (const attribute of expectedAbsentAttributes) {
+                    expect(tile).not.toHaveAttribute(attribute);
+                }
+            },
+        );
+    });
+
+    describe("message type classes", () => {
+        it("adds media and image classes for image messages", () => {
+            const imageEvent = mkEvent({
+                event: true,
+                type: EventType.RoomMessage,
+                room: room.roomId,
+                user: "@alice:example.org",
+                content: {
+                    msgtype: MsgType.Image,
+                    body: "image.png",
+                    url: "mxc://example.org/image",
+                    info: {
+                        mimetype: "image/png",
+                        w: 100,
+                        h: 100,
+                        size: 1234,
+                    },
+                },
+            });
+            const { container } = getComponent({ mxEvent: imageEvent });
+
+            expect(getLine(container)).toHaveClass("mx_EventTile_mediaLine");
+            expect(getLine(container)).toHaveClass("mx_EventTile_image");
+        });
+
+        it("adds emote classes for emote messages", () => {
+            const emoteEvent = mkEvent({
+                event: true,
+                type: EventType.RoomMessage,
+                room: room.roomId,
+                user: "@alice:example.org",
+                content: {
+                    msgtype: MsgType.Emote,
+                    body: "waves",
+                },
+            });
+            const { container } = getComponent({ mxEvent: emoteEvent });
+
+            expect(getTile(container)).toHaveClass("mx_EventTile_emote");
+            expect(getLine(container)).toHaveClass("mx_EventTile_emote");
+        });
+
+        it("adds media and sticker classes for sticker events", () => {
+            const stickerEvent = mkEvent({
+                event: true,
+                type: EventType.Sticker,
+                room: room.roomId,
+                user: "@alice:example.org",
+                content: {
+                    body: "sticker.png",
+                    url: "mxc://example.org/sticker",
+                    info: {
+                        mimetype: "image/png",
+                        w: 100,
+                        h: 100,
+                        size: 1234,
+                    },
+                },
+            });
+            const { container } = getComponent({ mxEvent: stickerEvent });
+
+            expect(getLine(container)).toHaveClass("mx_EventTile_mediaLine");
+            expect(getLine(container)).toHaveClass("mx_EventTile_sticker");
+        });
+    });
+
+    describe("timestamps", () => {
+        beforeEach(() => {
+            mxEvent = makeTimestampedMessage();
+        });
+
+        it("hides the timestamp by default in room timelines", () => {
+            const { container } = getComponent();
+
+            expect(container.querySelector(".mx_MessageTimestamp")).toBeNull();
+        });
+
+        it("shows the timestamp when the tile is hovered", () => {
+            const { container } = getComponent();
+
+            expect(container.querySelector(".mx_MessageTimestamp")).toBeNull();
+
+            fireEvent.mouseEnter(getTile(container));
+
+            expect(container.querySelector(".mx_MessageTimestamp")).not.toBeNull();
+        });
+
+        it("shows the timestamp when focus is within the tile", () => {
+            const { container } = getComponent();
+
+            expect(container.querySelector(".mx_MessageTimestamp")).toBeNull();
+
+            act(() => {
+                getTile(container).focus();
+            });
+
+            expect(container.querySelector(".mx_MessageTimestamp")).not.toBeNull();
+        });
+
+        it("shows the timestamp for the last event", () => {
+            const { container } = getComponent({ last: true });
+
+            expect(container.querySelector(".mx_MessageTimestamp")).not.toBeNull();
+        });
+
+        it("shows the timestamp when timestamps are always shown", () => {
+            const { container } = getComponent({ alwaysShowTimestamps: true });
+
+            expect(container.querySelector(".mx_MessageTimestamp")).not.toBeNull();
+        });
+
+        it("hides the timestamp when timestamps are disabled for the tile", () => {
+            const { container } = getComponent({ alwaysShowTimestamps: true, hideTimestamp: true });
+
+            expect(container.querySelector(".mx_MessageTimestamp")).toBeNull();
+        });
+
+        it("renders a placeholder timestamp in IRC layout", () => {
+            const { container } = getComponent({ layout: Layout.IRC });
+            const timestamp = container.querySelector(".mx_MessageTimestamp");
+
+            expect(timestamp).not.toBeNull();
+            expect(timestamp?.tagName).toBe("SPAN");
+        });
+
+        it("dispatches a room view when the linked timestamp is clicked", () => {
+            jest.spyOn(dis, "dispatch").mockImplementation(() => {});
+            const permalinkCreator = new RoomPermalinkCreator(room);
+            const { container } = getComponent({ alwaysShowTimestamps: true, permalinkCreator });
+            const timestamp = container.querySelector<HTMLAnchorElement>("a.mx_MessageTimestamp");
+
+            expect(timestamp).not.toBeNull();
+            fireEvent.click(timestamp!);
+
+            expect(dis.dispatch).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    action: Action.ViewRoom,
+                    event_id: mxEvent.getId(),
+                    highlighted: true,
+                    room_id: room.roomId,
+                }),
+            );
+        });
+    });
+
+    describe("sender and avatar rendering", () => {
+        it("keeps the sender/avatar composition in room timelines", () => {
+            const { container } = getComponent();
+
+            expect(container.querySelector(".mx_DisambiguatedProfile")).not.toBeNull();
+            expect(container.querySelector(".mx_EventTile_avatar")).not.toBeNull();
+        });
+
+        it("hides sender and avatar for continuation events in room timelines", () => {
+            const { container } = getComponent({ continuation: true });
+
+            expectTileClass(container, "mx_EventTile_continuation");
+            expect(container.querySelector(".mx_DisambiguatedProfile")).toBeNull();
+            expect(container.querySelector(".mx_EventTile_avatar")).toBeNull();
+        });
+
+        it("hides sender but keeps avatar when sender display is disabled", () => {
+            const { container } = getComponent({ hideSender: true });
+
+            expectTileClass(container, "mx_EventTile_noSender");
+            expect(container.querySelector(".mx_DisambiguatedProfile")).toBeNull();
+            expect(container.querySelector(".mx_EventTile_avatar")).not.toBeNull();
+        });
+
+        it("renders sender details as a permalink in file timelines", () => {
+            const { container } = getComponent({}, TimelineRenderingType.File);
+            const senderDetailsLink = container.querySelector(".mx_EventTile_senderDetailsLink");
+
+            expect(senderDetailsLink).not.toBeNull();
+            expect(senderDetailsLink).toContainElement(container.querySelector(".mx_DisambiguatedProfile"));
+            expect(senderDetailsLink).toContainElement(container.querySelector(".mx_EventTile_avatar"));
+        });
+
+        it("renders sender details in thread timelines", () => {
+            const { container } = getComponent({}, TimelineRenderingType.Thread);
+            const senderDetails = container.querySelector(".mx_EventTile_senderDetails");
+
+            expect(senderDetails).not.toBeNull();
+            expect(senderDetails).toContainElement(container.querySelector(".mx_DisambiguatedProfile"));
+            expect(senderDetails).toContainElement(container.querySelector(".mx_EventTile_avatar"));
+        });
+
+        it("keeps sender and avatar when only the layout prop is set to bubble", () => {
+            const { container } = getComponent({ layout: Layout.Bubble });
+
+            expect(container.querySelector(".mx_DisambiguatedProfile")).not.toBeNull();
+            expect(container.querySelector(".mx_EventTile_avatar")).not.toBeNull();
+        });
+
+        it("hides the sender but keeps the info-message avatar for room create events", () => {
+            const createEvent = mkEvent({
+                event: true,
+                type: EventType.RoomCreate,
+                room: room.roomId,
+                user: "@alice:example.org",
+                content: { creator: "@alice:example.org", room_version: "1" },
+            });
+            const { container } = getComponent({ mxEvent: createEvent }, TimelineRenderingType.Room, {
+                showHiddenEvents: true,
+            });
+
+            expect(container.querySelector(".mx_DisambiguatedProfile")).toBeNull();
+            expect(container.querySelector(".mx_EventTile_avatar")).not.toBeNull();
+        });
+
+        it("renders the notification avatar independently from the sender details", () => {
+            const { container } = getComponent({}, TimelineRenderingType.Notification);
+            const details = container.querySelector<HTMLElement>(".mx_EventTile_details");
+            const avatar = container.querySelector<HTMLElement>(".mx_EventTile_avatar");
+
+            expect(details).not.toBeNull();
+            expect(avatar).not.toBeNull();
+            expect(details).not.toContainElement(avatar);
+        });
+    });
+
+    describe("continuation rendering", () => {
+        it.each([TimelineRenderingType.Room, TimelineRenderingType.Search, TimelineRenderingType.Thread])(
+            "keeps continuation styling in %s timelines",
+            (renderingType) => {
+                const { container } = getComponent({ continuation: true }, renderingType);
+
+                expect(getTile(container)).toHaveClass("mx_EventTile_continuation");
+            },
+        );
+
+        it.each([TimelineRenderingType.File, TimelineRenderingType.Notification, TimelineRenderingType.ThreadsList])(
+            "drops continuation styling in %s timelines when not using bubble layout",
+            (renderingType) => {
+                const { container } = getComponent({ continuation: true }, renderingType);
+
+                expect(getTile(container)).not.toHaveClass("mx_EventTile_continuation");
+            },
+        );
+
+        it.each([TimelineRenderingType.File, TimelineRenderingType.Notification, TimelineRenderingType.ThreadsList])(
+            "keeps continuation styling in %s timelines when using bubble layout",
+            (renderingType) => {
+                const { container } = getComponent({ continuation: true, layout: Layout.Bubble }, renderingType);
+
+                expect(getTile(container)).toHaveClass("mx_EventTile_continuation");
+            },
+        );
+    });
+
+    describe("read receipt option", () => {
+        it("shows a sent receipt for the current user's last successful event", () => {
+            const ownEvent = makeOwnMessage();
+            const { getByRole } = getComponent({ mxEvent: ownEvent, lastSuccessful: true });
+
+            expect(getByRole("status")).toHaveAccessibleName("Your message was sent");
+        });
+
+        it.each([
+            [EventStatus.SENDING, "Sending your message…"],
+            [EventStatus.ENCRYPTING, "Encrypting your message…"],
+            [EventStatus.NOT_SENT, "Failed to send"],
+        ])("shows the %s receipt for the current user's pending event", (eventSendStatus, label) => {
+            const ownEvent = makeOwnMessage();
+            ownEvent.setStatus(eventSendStatus);
+            const { getByRole } = getComponent({ mxEvent: ownEvent, eventSendStatus });
+
+            expect(getByRole("status")).toHaveAccessibleName(label);
+        });
+
+        it("does not show a sent receipt in the threads list", () => {
+            const ownEvent = makeOwnMessage();
+            const { queryByRole } = getComponent(
+                { mxEvent: ownEvent, lastSuccessful: true },
+                TimelineRenderingType.ThreadsList,
+            );
+
+            expect(queryByRole("status", { name: "Your message was sent" })).toBeNull();
+        });
+
+        it("shows normal read receipts instead of the sent receipt when other users have read the event", () => {
+            const ownEvent = makeOwnMessage();
+            const { getByRole, queryByRole } = getComponent({
+                mxEvent: ownEvent,
+                lastSuccessful: true,
+                showReadReceipts: true,
+                readReceipts: [
+                    {
+                        userId: "@bob:example.org",
+                        roomMember: null,
+                        ts: 1234,
+                    },
+                ],
+            });
+
+            expect(queryByRole("status", { name: "Your message was sent" })).toBeNull();
+            expect(getByRole("group", { name: "Seen by 1 person" })).toBeInTheDocument();
+        });
+    });
+
+    describe("reactions and footer", () => {
+        it("gets annotation relations when reactions are enabled", () => {
+            const getRelationsForEvent = jest.fn().mockReturnValue(null);
+
+            getComponent({ showReactions: true, getRelationsForEvent });
+
+            expect(getRelationsForEvent).toHaveBeenCalledWith(mxEvent.getId(), "m.annotation", "m.reaction");
+        });
+
+        it("does not get annotation relations when reactions are disabled", () => {
+            const getRelationsForEvent = jest.fn().mockReturnValue(null);
+
+            getComponent({ getRelationsForEvent });
+
+            expect(getRelationsForEvent).not.toHaveBeenCalled();
+        });
+
+        it("refreshes annotation relations when reaction relations are created", () => {
+            const getRelationsForEvent = jest.fn().mockReturnValue(null);
+            getComponent({ showReactions: true, getRelationsForEvent });
+            getRelationsForEvent.mockClear();
+
+            act(() => {
+                mxEvent.emit(MatrixEventEvent.RelationsCreated, "m.annotation", "m.reaction");
+            });
+
+            expect(getRelationsForEvent).toHaveBeenCalledWith(mxEvent.getId(), "m.annotation", "m.reaction");
+        });
+
+        it("does not refresh annotation relations for unrelated relations", () => {
+            const getRelationsForEvent = jest.fn().mockReturnValue(null);
+            getComponent({ showReactions: true, getRelationsForEvent });
+            getRelationsForEvent.mockClear();
+
+            act(() => {
+                mxEvent.emit(MatrixEventEvent.RelationsCreated, "m.reference", "m.room.message");
+            });
+
+            expect(getRelationsForEvent).not.toHaveBeenCalled();
+        });
+
+        it("does not render reactions for redacted events", () => {
+            const getRelationsForEvent = jest.fn().mockReturnValue(null);
+            const { container } = getComponent({ showReactions: true, getRelationsForEvent, isRedacted: true });
+
+            expect(container.querySelector(".mx_ReactionsRow")).toBeNull();
+        });
+
+        it("renders a footer for pinned messages", () => {
+            jest.spyOn(PinningUtils, "isPinned").mockReturnValue(true);
+            const { container } = getComponent();
+
+            expect(container.querySelector(".mx_EventTile_footer")).not.toBeNull();
+            expect(screen.getByText("Pinned message")).toBeInTheDocument();
+        });
+
+        it("renders the IRC footer inside the event line", () => {
+            jest.spyOn(PinningUtils, "isPinned").mockReturnValue(true);
+            const { container } = getComponent({ layout: Layout.IRC });
+
+            expect(getLine(container).querySelector(".mx_EventTile_footer")).not.toBeNull();
+            expect(getTile(container).querySelector(":scope > .mx_EventTile_footer")).toBeNull();
+        });
+
+        it("renders a bubble footer for an own pinned message", () => {
+            jest.spyOn(PinningUtils, "isPinned").mockReturnValue(true);
+            const ownEvent = makeOwnMessage();
+            const { container } = getComponent({ mxEvent: ownEvent, layout: Layout.Bubble });
+            const footer = container.querySelector(".mx_EventTile_footer");
+
+            expect(footer).not.toBeNull();
+            expect(footer).toHaveTextContent("Pinned message");
+        });
+
+        it("renders relation groups and deduplicates reactions from the same sender", () => {
+            const bobReaction1 = makeReactionEvent(room.roomId, mxEvent.getId()!, "@bob:example.org", "👍");
+            const bobReaction2 = makeReactionEvent(room.roomId, mxEvent.getId()!, "@bob:example.org", "👍");
+            const getRelationsForEvent = jest
+                .fn()
+                .mockReturnValue(makeRelations(new Map([["👍", [bobReaction1, bobReaction2]]])));
+
+            getComponent({ showReactions: true, getRelationsForEvent }, TimelineRenderingType.Room, {
+                canReact: true,
+            });
+
+            const reactionButton = screen.getByRole("button", { name: /@bob:example\.org reacted with 👍/ });
+            expect(reactionButton).toHaveTextContent("👍1");
+        });
+
+        it("detects the current user's reaction when rendering relation groups", () => {
+            const ownReaction = makeReactionEvent(room.roomId, mxEvent.getId()!, client.getSafeUserId(), "👍");
+            const getRelationsForEvent = jest.fn().mockReturnValue(
+                makeRelations(new Map([["👍", [ownReaction]]]), {
+                    [client.getSafeUserId()]: [ownReaction],
+                }),
+            );
+
+            getComponent({ showReactions: true, getRelationsForEvent }, TimelineRenderingType.Room, {
+                canReact: true,
+                canSelfRedact: false,
+            });
+
+            expect(screen.getByRole("button", { name: /reacted with 👍/ })).toHaveAttribute("aria-disabled", "true");
+        });
+    });
+
+    describe("action bar", () => {
+        it("does not render the message action bar by default", () => {
+            const { container } = getComponent();
+
+            expect(container.querySelector(".mx_MessageActionBar")).toBeNull();
+        });
+
+        it("renders the message action bar when the tile is hovered", () => {
+            const { container } = getComponent();
+
+            fireEvent.mouseEnter(getTile(container));
+
+            expect(container.querySelector(".mx_MessageActionBar")).not.toBeNull();
+        });
+
+        it("renders the message action bar when the tile receives keyboard focus", () => {
+            const matches = HTMLElement.prototype.matches;
+            jest.spyOn(HTMLElement.prototype, "matches").mockImplementation(function (this: HTMLElement, selector) {
+                if (selector === ":focus-visible") return true;
+                return matches.call(this, selector);
+            });
+            const { container } = getComponent();
+
+            act(() => {
+                getTile(container).focus();
+            });
+
+            expect(container.querySelector(".mx_MessageActionBar")).not.toBeNull();
+        });
+
+        it("hides the keyboard-focused message action bar when focus leaves the tile", () => {
+            const matches = HTMLElement.prototype.matches;
+            jest.spyOn(HTMLElement.prototype, "matches").mockImplementation(function (this: HTMLElement, selector) {
+                if (selector === ":focus-visible") return true;
+                return matches.call(this, selector);
+            });
+            const { container } = getComponent();
+            const tile = getTile(container);
+
+            act(() => {
+                tile.focus();
+            });
+            expect(container.querySelector(".mx_MessageActionBar")).not.toBeNull();
+
+            act(() => {
+                tile.blur();
+            });
+
+            expect(container.querySelector(".mx_MessageActionBar")).toBeNull();
+        });
+
+        it("does not render the message action bar on hover when exporting", () => {
+            const { container } = getComponent({ forExport: true });
+
+            fireEvent.mouseEnter(getTile(container));
+
+            expect(container.querySelector(".mx_MessageActionBar")).toBeNull();
+        });
+
+        it("does not render the message action bar on hover while editing", () => {
+            const { container } = getComponent({ editState: {} as EventTileProps["editState"] });
+
+            fireEvent.mouseEnter(getTile(container));
+
+            expect(container.querySelector(".mx_MessageActionBar")).toBeNull();
+        });
+    });
+
+    describe("context menu", () => {
+        it("renders the message context menu when the event line is right-clicked", async () => {
+            const { container } = getComponent();
+
+            fireEvent.contextMenu(getLine(container), { clientX: 1, clientY: 2 });
+
+            expect(await screen.findByTestId("mx_MessageContextMenu")).toBeInTheDocument();
+        });
+
+        it("marks the tile selected when the context menu is open", async () => {
+            const { container } = getComponent();
+            const tile = getTile(container);
+
+            fireEvent.contextMenu(getLine(container), { clientX: 1, clientY: 2 });
+
+            expect(await screen.findByTestId("mx_MessageContextMenu")).toBeInTheDocument();
+            expect(tile).toHaveClass("mx_EventTile_selected");
+        });
+
+        it("shows the timestamp while the context menu is open", async () => {
+            mxEvent = makeTimestampedMessage();
+            const { container } = getComponent();
+
+            expect(container.querySelector(".mx_MessageTimestamp")).toBeNull();
+
+            fireEvent.contextMenu(getLine(container), { clientX: 1, clientY: 2 });
+
+            expect(await screen.findByTestId("mx_MessageContextMenu")).toBeInTheDocument();
+            expect(container.querySelector(".mx_MessageTimestamp")).not.toBeNull();
+        });
+
+        it("does not render the message context menu while editing", () => {
+            const { container } = getComponent({ editState: {} as EventTileProps["editState"] });
+
+            expect(container.querySelector(".mx_EventTile_line")).toBeNull();
+            expect(screen.queryByTestId("mx_MessageContextMenu")).toBeNull();
+        });
+
+        it("does not override the native browser context menu for links", () => {
+            const { container } = getComponent();
+            jest.spyOn(PlatformPeg, "get").mockReturnValue({
+                allowOverridingNativeContextMenus: () => false,
+            } as ReturnType<typeof PlatformPeg.get>);
+            const link = document.createElement("a");
+            link.href = "https://example.org/";
+            getLine(container).appendChild(link);
+
+            const event = new MouseEvent("contextmenu", { bubbles: true, cancelable: true, clientX: 1, clientY: 2 });
+            link.dispatchEvent(event);
+
+            expect(event.defaultPrevented).toBe(false);
+            expect(screen.queryByTestId("mx_MessageContextMenu")).toBeNull();
+        });
+    });
+
+    describe("reply chain", () => {
+        it("marks non-reply events as having no reply", () => {
+            const { container } = getComponent();
+
+            expect(getTile(container)).toHaveAttribute("data-has-reply", "false");
+            expect(container.querySelector(".mx_ReplyChain_wrapper")).toBeNull();
+        });
+
+        it("marks reply events as having a reply chain", () => {
+            const replyEvent = makeReplyEvent(room.roomId);
+            const { container } = getComponent({ mxEvent: replyEvent });
+
+            expect(getTile(container)).toHaveAttribute("data-has-reply", "true");
+            expect(container.querySelector(".mx_ReplyChain_wrapper")).not.toBeNull();
+        });
+
+        it("does not render the reply chain for redacted reply events", () => {
+            const replyEvent = makeReplyEvent(room.roomId);
+            jest.spyOn(replyEvent, "isRedacted").mockReturnValue(true);
+            const { container } = getComponent({ mxEvent: replyEvent });
+
+            expect(getTile(container)).toHaveAttribute("data-has-reply", "false");
+            expect(container.querySelector(".mx_ReplyChain_wrapper")).toBeNull();
+        });
+    });
+
     describe("EventTile thread summary", () => {
         beforeEach(() => {
             jest.spyOn(client, "supportsThreads").mockReturnValue(true);
@@ -150,26 +977,67 @@ describe("EventTile", () => {
         });
     });
 
+    describe("search thread info", () => {
+        it("renders search thread info for events in a thread", () => {
+            const threadEvent = makeThreadReplyEvent(room.roomId);
+            const { container } = getComponent({ mxEvent: threadEvent }, TimelineRenderingType.Search);
+
+            expect(container.querySelector(".mx_ThreadSummary_icon")).not.toBeNull();
+            expect(container.querySelector(".mx_ThreadSummary_icon")).toHaveTextContent("From a thread");
+        });
+
+        it("renders search thread info as a link when a highlight link is provided", () => {
+            const threadEvent = makeThreadReplyEvent(room.roomId);
+            const { container } = getComponent(
+                { mxEvent: threadEvent, highlightLink: "https://example.org/thread" },
+                TimelineRenderingType.Search,
+            );
+            const threadInfo = container.querySelector<HTMLAnchorElement>("a.mx_ThreadSummary_icon");
+
+            expect(threadInfo).not.toBeNull();
+            expect(threadInfo).toHaveAttribute("href", "https://example.org/thread");
+        });
+
+        it("renders search thread info as text when no highlight link is provided", () => {
+            const threadEvent = makeThreadReplyEvent(room.roomId);
+            const { container } = getComponent({ mxEvent: threadEvent }, TimelineRenderingType.Search);
+            const threadInfo = container.querySelector(".mx_ThreadSummary_icon");
+
+            expect(threadInfo?.tagName).toBe("P");
+        });
+
+        it("does not render search thread info outside search timelines", () => {
+            const threadEvent = makeThreadReplyEvent(room.roomId);
+            const { container } = getComponent({ mxEvent: threadEvent }, TimelineRenderingType.Room);
+
+            expect(container.querySelector(".mx_ThreadSummary_icon")).toBeNull();
+        });
+    });
+
     describe("EventTile renderingType: ThreadsList", () => {
         it("shows an unread notification badge", () => {
             const { container } = getComponent({}, TimelineRenderingType.ThreadsList);
 
             // By default, the thread will assume it is read.
-            expect(container.getElementsByClassName("mx_NotificationBadge")).toHaveLength(0);
+            expect(container.querySelectorAll('[data-testid="notification-badge"]')).toHaveLength(0);
 
             act(() => {
                 room.setThreadUnreadNotificationCount(mxEvent.getId()!, NotificationCountType.Total, 3);
             });
 
-            expect(container.getElementsByClassName("mx_NotificationBadge")).toHaveLength(1);
-            expect(container.getElementsByClassName("mx_NotificationBadge_level_highlight")).toHaveLength(0);
+            let badges = container.querySelectorAll('[data-testid="notification-badge"]');
+            expect(badges).toHaveLength(1);
+            expect(badges[0]).toHaveAttribute("data-badge-type", "dot");
+            expect(badges[0]).toHaveAttribute("data-notification-level", "notification");
 
             act(() => {
                 room.setThreadUnreadNotificationCount(mxEvent.getId()!, NotificationCountType.Highlight, 1);
             });
 
-            expect(container.getElementsByClassName("mx_NotificationBadge")).toHaveLength(1);
-            expect(container.getElementsByClassName("mx_NotificationBadge_level_highlight")).toHaveLength(1);
+            badges = container.querySelectorAll('[data-testid="notification-badge"]');
+            expect(badges).toHaveLength(1);
+            expect(badges[0]).toHaveAttribute("data-badge-type", "dot");
+            expect(badges[0]).toHaveAttribute("data-notification-level", "highlight");
         });
     });
 
@@ -202,6 +1070,25 @@ describe("EventTile", () => {
             },
         );
 
+        it("uses the current room member when current profiles are enabled", async () => {
+            const senderId = mxEvent.getSender()!;
+            const currentMember = new RoomMember(room.roomId, senderId);
+            currentMember.rawDisplayName = "Alan (away)";
+
+            jest.spyOn(room, "getMember").mockImplementation((userId) => (userId === senderId ? currentMember : null));
+            jest.spyOn(SettingsStore, "getValue").mockImplementation(
+                (settingName) => settingName === "useOnlyCurrentProfiles",
+            );
+
+            const { container } = getComponent();
+
+            await waitFor(() =>
+                expect(container.querySelector(".mx_DisambiguatedProfile_displayName")).toHaveTextContent(
+                    "Alan (away)",
+                ),
+            );
+        });
+
         it("renders the tile error fallback when tile rendering throws", async () => {
             jest.spyOn(console, "error").mockImplementation(() => {});
             jest.spyOn(EventTileFactory, "renderTile").mockImplementation(() => {
@@ -215,6 +1102,20 @@ describe("EventTile", () => {
             });
         });
 
+        it("renders a notice when the event has no renderer", () => {
+            const unsupportedEvent = mkEvent({
+                event: true,
+                type: "org.example.unsupported",
+                room: room.roomId,
+                user: "@alice:example.org",
+                content: {},
+            });
+
+            getComponent({ mxEvent: unsupportedEvent });
+
+            expect(screen.getByText("This event could not be displayed")).toBeInTheDocument();
+        });
+
         it("updates msgtype-derived tile classes when an edit changes msgtype to m.emote", async () => {
             const { container } = getComponent();
             expect(container.querySelector(".mx_EventTile_emote")).toBeNull();
@@ -246,13 +1147,6 @@ describe("EventTile", () => {
     });
 
     describe("EventTile in the right panel", () => {
-        beforeAll(() => {
-            const dmRoomMap: DMRoomMap = {
-                getUserIdForRoomId: jest.fn(),
-            } as unknown as DMRoomMap;
-            DMRoomMap.setShared(dmRoomMap);
-        });
-
         it("renders the room name for notifications", () => {
             const { container } = getComponent({}, TimelineRenderingType.Notification);
             expect(container.getElementsByClassName("mx_EventTile_details")[0]).toHaveTextContent(
@@ -566,6 +1460,57 @@ describe("EventTile", () => {
             expect(container.getElementsByClassName("mx_EventTile_e2eIcon")).toHaveLength(1);
             expect(container.getElementsByClassName("mx_EventTile_e2eIcon")[0]).toHaveAccessibleName("Not encrypted");
         });
+
+        it.each([EventStatus.ENCRYPTING, EventStatus.NOT_SENT])(
+            "does not show the unencrypted warning for %s events in encrypted rooms",
+            (status) => {
+                const event = makeOwnMessage();
+                event.setStatus(status);
+                const { container } = getComponent(
+                    { mxEvent: event, eventSendStatus: status },
+                    TimelineRenderingType.Room,
+                    {
+                        isRoomEncrypted: true,
+                    },
+                );
+
+                expect(container.getElementsByClassName("mx_EventTile_e2eIcon")).toHaveLength(0);
+            },
+        );
+
+        it("does not show the unencrypted warning for state events in encrypted rooms", () => {
+            const stateEvent = mkEvent({
+                event: true,
+                type: EventType.RoomTopic,
+                room: room.roomId,
+                user: "@alice:example.org",
+                skey: "",
+                content: { topic: "Topic" },
+            });
+            const { container } = getComponent({ mxEvent: stateEvent }, TimelineRenderingType.Room, {
+                isRoomEncrypted: true,
+            });
+
+            expect(container.getElementsByClassName("mx_EventTile_e2eIcon")).toHaveLength(0);
+        });
+
+        it("does not show the unencrypted warning for redacted events in encrypted rooms", () => {
+            jest.spyOn(mxEvent, "isRedacted").mockReturnValue(true);
+            const { container } = getComponent({}, TimelineRenderingType.Room, {
+                isRoomEncrypted: true,
+            });
+
+            expect(container.getElementsByClassName("mx_EventTile_e2eIcon")).toHaveLength(0);
+        });
+
+        it("does not show the unencrypted warning for local-room events in encrypted rooms", () => {
+            const localEvent = makeTimestampedMessage({ room: "local+room" });
+            const { container } = getComponent({ mxEvent: localEvent }, TimelineRenderingType.Room, {
+                isRoomEncrypted: true,
+            });
+
+            expect(container.getElementsByClassName("mx_EventTile_e2eIcon")).toHaveLength(0);
+        });
     });
 
     describe("event highlighting", () => {
@@ -600,6 +1545,43 @@ describe("EventTile", () => {
             expect(isHighlighted(container)).toBeFalsy();
         });
 
+        it("does not highlight when exporting", () => {
+            mocked(client.getPushActionsForEvent).mockReturnValue({
+                notify: true,
+                tweaks: { [TweakName.Highlight]: true },
+            });
+            const { container } = getComponent({ forExport: true });
+
+            expect(client.getPushActionsForEvent).not.toHaveBeenCalled();
+            expect(isHighlighted(container)).toBeFalsy();
+        });
+
+        it.each([TimelineRenderingType.Notification, TimelineRenderingType.ThreadsList])(
+            "does not highlight in %s timelines",
+            (renderingType) => {
+                mocked(client.getPushActionsForEvent).mockReturnValue({
+                    notify: true,
+                    tweaks: { [TweakName.Highlight]: true },
+                });
+                const { container } = getComponent({}, renderingType);
+
+                expect(client.getPushActionsForEvent).not.toHaveBeenCalled();
+                expect(isHighlighted(container)).toBeFalsy();
+            },
+        );
+
+        it("does not highlight events sent by the current user", () => {
+            mocked(client.getPushActionsForEvent).mockReturnValue({
+                notify: true,
+                tweaks: { [TweakName.Highlight]: true },
+            });
+            const ownEvent = makeOwnMessage();
+            const { container } = getComponent({ mxEvent: ownEvent });
+
+            expect(client.getPushActionsForEvent).toHaveBeenCalledWith(ownEvent);
+            expect(isHighlighted(container)).toBeFalsy();
+        });
+
         it("highlights when message's push actions have a highlight tweak", () => {
             mocked(client.getPushActionsForEvent).mockReturnValue({
                 notify: true,
@@ -676,6 +1658,52 @@ describe("EventTile", () => {
         });
     });
 
+    it("does not leave a stale message action bar when switching edited events", async () => {
+        const firstEvent = mkMessage({
+            room: room.roomId,
+            user: "@alice:example.org",
+            msg: "First message",
+            event: true,
+        });
+        const secondEvent = mkMessage({
+            room: room.roomId,
+            user: "@alice:example.org",
+            msg: "Second message",
+            event: true,
+        });
+        const events = [firstEvent, secondEvent];
+
+        const matches = jest.spyOn(HTMLElement.prototype, "matches").mockImplementation(function (
+            this: HTMLElement,
+            selector: string,
+        ) {
+            if (selector === ":focus-visible") {
+                return true;
+            }
+            return Element.prototype.matches.call(this, selector);
+        });
+
+        const { container, rerender } = render(<WrappedEventTiles events={events} editEvent={firstEvent} />, {
+            wrapper: ({ children }) => (
+                <SDKContext.Provider value={SDKContextClass.instance}>{children}</SDKContext.Provider>
+            ),
+        });
+        const editingTile = container.querySelector(".mx_EventTile_isEditing");
+
+        expect(editingTile).not.toBeNull();
+        fireEvent.focusIn(editingTile!);
+        expect(container.querySelectorAll(".mx_MessageActionBar")).toHaveLength(0);
+
+        rerender(<WrappedEventTiles events={events} editEvent={secondEvent} />);
+
+        await waitFor(() => {
+            expect(container.querySelectorAll(".mx_EventTile_isEditing")).toHaveLength(1);
+            expect(container.querySelectorAll(".mx_MessageActionBar")).toHaveLength(0);
+        });
+
+        matches.mockRestore();
+    });
+
     it("should display the not encrypted status for an unencrypted event when the room becomes encrypted", async () => {
         jest.spyOn(client.getCrypto()!, "getEncryptionInfoForEvent").mockResolvedValue({
             shieldColour: EventShieldColour.NONE,
diff --git a/apps/web/test/unit-tests/components/views/rooms/EventTile/E2eMessageSharedIcon-test.tsx b/apps/web/test/unit-tests/components/views/rooms/EventTile/E2eMessageSharedIcon-test.tsx
deleted file mode 100644
index 83e5afa697..0000000000
--- a/apps/web/test/unit-tests/components/views/rooms/EventTile/E2eMessageSharedIcon-test.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-/*
-Copyright 2026 Element Creations 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 { render } from "jest-matrix-react";
-import React from "react";
-import { mocked } from "jest-mock";
-import { type RoomMember, type RoomState } from "matrix-js-sdk/src/matrix";
-
-import { E2eMessageSharedIcon } from "../../../../../../src/components/views/rooms/EventTile/E2eMessageSharedIcon.tsx";
-import { createTestClient, mkStubRoom, withClientContextRenderOptions } from "../../../../../test-utils";
-
-describe("E2eMessageSharedIcon", () => {
-    it("renders correctly for a known user", () => {
-        const mockClient = createTestClient();
-        const mockMember = { rawDisplayName: "Bob" } as RoomMember;
-        const mockState = {
-            getMember: (userId) => {
-                expect(userId).toEqual("@bob:example.com");
-                return mockMember;
-            },
-        } as RoomState;
-        const mockRoom = mkStubRoom("!roomId", undefined, mockClient, mockState);
-        mocked(mockClient.getRoom).mockImplementation((roomId) => {
-            expect(roomId).toEqual("!roomId");
-            return mockRoom;
-        });
-
-        const result = render(
-            <E2eMessageSharedIcon keyForwardingUserId="@bob:example.com" roomId="!roomId" />,
-            withClientContextRenderOptions(mockClient),
-        );
-
-        expect(result.container).toMatchSnapshot();
-        expect(result.container.firstChild).toHaveAccessibleName(
-            "Bob (@bob:example.com) shared this message since you were not in the room when it was sent.",
-        );
-    });
-
-    it("renders correctly for an unknown user", () => {
-        const mockClient = createTestClient();
-        const result = render(
-            <E2eMessageSharedIcon keyForwardingUserId="@bob:example.com" roomId="!roomId" />,
-            withClientContextRenderOptions(mockClient),
-        );
-
-        expect(result.container).toMatchSnapshot();
-        expect(result.container.firstChild).toHaveAccessibleName(
-            "@bob:example.com (@bob:example.com) shared this message since you were not in the room when it was sent.",
-        );
-    });
-});
diff --git a/apps/web/test/unit-tests/components/views/rooms/EventTile/E2ePadlock-test.tsx b/apps/web/test/unit-tests/components/views/rooms/EventTile/E2ePadlock-test.tsx
deleted file mode 100644
index 8205b47a62..0000000000
--- a/apps/web/test/unit-tests/components/views/rooms/EventTile/E2ePadlock-test.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
-Copyright 2026 Element Creations 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 { render } from "jest-matrix-react";
-import React from "react";
-
-import { E2ePadlock, E2ePadlockIcon } from "../../../../../../src/components/views/rooms/EventTile/E2ePadlock.tsx";
-
-describe("E2ePadlock", () => {
-    it("renders a 'Normal' icon", () => {
-        const result = render(<E2ePadlock icon={E2ePadlockIcon.Normal} title="Test tooltip" />);
-        expect(result.asFragment()).toMatchSnapshot();
-    });
-
-    it("renders a 'Warning' icon", () => {
-        const result = render(<E2ePadlock icon={E2ePadlockIcon.Warning} title="Bad" />);
-        expect(result.asFragment()).toMatchSnapshot();
-    });
-
-    it("renders a 'DecryptionFailure' icon", () => {
-        const result = render(<E2ePadlock icon={E2ePadlockIcon.DecryptionFailure} title="UTD" />);
-        expect(result.asFragment()).toMatchSnapshot();
-    });
-});
diff --git a/apps/web/test/unit-tests/components/views/rooms/EventTileAvatarAdapter-test.tsx b/apps/web/test/unit-tests/components/views/rooms/EventTileAvatarAdapter-test.tsx
new file mode 100644
index 0000000000..10d4c92336
--- /dev/null
+++ b/apps/web/test/unit-tests/components/views/rooms/EventTileAvatarAdapter-test.tsx
@@ -0,0 +1,77 @@
+/*
+Copyright 2026 Element Creations 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 { render } from "jest-matrix-react";
+import { mocked } from "jest-mock";
+import { RoomMember } from "matrix-js-sdk/src/matrix";
+
+import MemberAvatar from "../../../../../src/components/views/avatars/MemberAvatar";
+import { EventTileAvatarAdapter } from "../../../../../src/components/views/rooms/EventTile/EventTileAvatarAdapter";
+import { type EventTileSenderSnapshot } from "../../../../../src/viewmodels/room/timeline/event-tile/EventTileViewModel";
+
+jest.mock("../../../../../src/components/views/avatars/MemberAvatar", () =>
+    jest.fn(() => <div data-testid="member-avatar" />),
+);
+
+function makeSenderSnapshot(overrides: Partial<EventTileSenderSnapshot> = {}): EventTileSenderSnapshot {
+    return {
+        senderId: "@alice:example.org",
+        member: null,
+        viewUserOnClick: true,
+        profileMode: "clickable",
+        forceHistoricalAvatar: false,
+        isEmote: false,
+        ...overrides,
+        profileState: {
+            avatarSize: "30px",
+            needsSenderProfile: true,
+            ...overrides.profileState,
+        },
+    };
+}
+
+describe("EventTileAvatarAdapter", () => {
+    const mockedMemberAvatar = mocked(MemberAvatar);
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it("passes render data through to MemberAvatar", () => {
+        const avatarMember = new RoomMember("!room:example.org", "@alice:example.org");
+        const senderSnapshot = makeSenderSnapshot({
+            profileState: {
+                avatarSize: "24px",
+                needsSenderProfile: true,
+            },
+            viewUserOnClick: false,
+            forceHistoricalAvatar: true,
+        });
+
+        const { container } = render(
+            <EventTileAvatarAdapter avatarMember={avatarMember} senderSnapshot={senderSnapshot} />,
+        );
+
+        expect(container.querySelector(".mx_EventTile_avatar")).not.toBeNull();
+        expect(mockedMemberAvatar.mock.calls[0][0]).toMatchObject({
+            member: avatarMember,
+            size: "24px",
+            viewUserOnClick: false,
+            forceHistorical: true,
+        });
+    });
+
+    it("renders nothing when the avatar is not available", () => {
+        const { container } = render(
+            <EventTileAvatarAdapter avatarMember={null} senderSnapshot={makeSenderSnapshot()} />,
+        );
+
+        expect(container.querySelector(".mx_EventTile_avatar")).toBeNull();
+        expect(mockedMemberAvatar).not.toHaveBeenCalled();
+    });
+});
diff --git a/apps/web/test/unit-tests/components/views/rooms/EventTileSenderAdapter-test.tsx b/apps/web/test/unit-tests/components/views/rooms/EventTileSenderAdapter-test.tsx
new file mode 100644
index 0000000000..1ee8fb6a9c
--- /dev/null
+++ b/apps/web/test/unit-tests/components/views/rooms/EventTileSenderAdapter-test.tsx
@@ -0,0 +1,88 @@
+/*
+Copyright 2026 Element Creations 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 { render, screen } from "jest-matrix-react";
+import { mocked } from "jest-mock";
+
+import SenderProfile from "../../../../../src/components/views/messages/SenderProfile";
+import { EventTileSenderAdapter } from "../../../../../src/components/views/rooms/EventTile/EventTileSenderAdapter";
+import { type MemberInfo } from "../../../../../src/viewmodels/room/timeline/event-tile/DisambiguatedProfileViewModel";
+import { type EventTileSenderSnapshot } from "../../../../../src/viewmodels/room/timeline/event-tile/EventTileViewModel";
+
+jest.mock("../../../../../src/components/views/messages/SenderProfile", () =>
+    jest.fn(() => <div data-testid="sender-profile" />),
+);
+
+function makeSenderSnapshot(overrides: Partial<EventTileSenderSnapshot> = {}): EventTileSenderSnapshot {
+    return {
+        senderId: "@alice:example.org",
+        member: {
+            userId: "@alice:example.org",
+            roomId: "!room:example.org",
+            rawDisplayName: "Alice",
+            disambiguate: false,
+        },
+        viewUserOnClick: true,
+        profileMode: "clickable",
+        forceHistoricalAvatar: false,
+        isEmote: false,
+        ...overrides,
+        profileState: {
+            avatarSize: "30px",
+            needsSenderProfile: true,
+            ...overrides.profileState,
+        },
+    };
+}
+
+describe("EventTileSenderAdapter", () => {
+    const mockedSenderProfile = mocked(SenderProfile);
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it("passes clickable sender state to SenderProfile", () => {
+        const onSenderProfileClick = jest.fn();
+        const senderSnapshot = makeSenderSnapshot({ profileMode: "clickable" });
+        const memberInfo: MemberInfo = senderSnapshot.member!;
+
+        render(<EventTileSenderAdapter sender={senderSnapshot} onSenderProfileClick={onSenderProfileClick} />);
+
+        expect(screen.getByTestId("sender-profile")).toBeInTheDocument();
+        expect(mockedSenderProfile.mock.calls[0][0]).toMatchObject({
+            senderId: "@alice:example.org",
+            member: memberInfo,
+            isEmote: false,
+            onClick: onSenderProfileClick,
+        });
+    });
+
+    it("enables tooltip rendering for tooltip mode", () => {
+        const senderSnapshot = makeSenderSnapshot({ profileMode: "tooltip" });
+
+        render(<EventTileSenderAdapter sender={senderSnapshot} onSenderProfileClick={jest.fn()} />);
+
+        expect(screen.getByTestId("sender-profile")).toBeInTheDocument();
+        expect(mockedSenderProfile.mock.calls[0][0]).toMatchObject({
+            senderId: "@alice:example.org",
+            isEmote: false,
+            withTooltip: true,
+        });
+    });
+
+    it("returns nothing when the sender should be hidden", () => {
+        const senderSnapshot = makeSenderSnapshot({ profileMode: "hidden" });
+
+        const { container } = render(
+            <EventTileSenderAdapter sender={senderSnapshot} onSenderProfileClick={jest.fn()} />,
+        );
+
+        expect(container).toBeEmptyDOMElement();
+        expect(mockedSenderProfile).not.toHaveBeenCalled();
+    });
+});
diff --git a/apps/web/test/unit-tests/components/views/rooms/ExtraTile-test.tsx b/apps/web/test/unit-tests/components/views/rooms/ExtraTile-test.tsx
deleted file mode 100644
index a1a957dbce..0000000000
--- a/apps/web/test/unit-tests/components/views/rooms/ExtraTile-test.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2023 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { getByRole, render } from "jest-matrix-react";
-import userEvent from "@testing-library/user-event";
-import React, { type ComponentProps } from "react";
-
-import ExtraTile from "../../../../../src/components/views/rooms/ExtraTile";
-
-describe("ExtraTile", () => {
-    function renderComponent(props: Partial<ComponentProps<typeof ExtraTile>> = {}) {
-        const defaultProps: ComponentProps<typeof ExtraTile> = {
-            isMinimized: false,
-            isSelected: false,
-            displayName: "test",
-            avatar: <React.Fragment />,
-            onClick: () => {},
-        };
-        return render(<ExtraTile {...defaultProps} {...props} />);
-    }
-
-    it("renders", () => {
-        const { asFragment } = renderComponent();
-        expect(asFragment()).toMatchSnapshot();
-    });
-
-    it("hides text when minimized", () => {
-        const { container } = renderComponent({
-            isMinimized: true,
-            displayName: "testDisplayName",
-        });
-        expect(container).not.toHaveTextContent("testDisplayName");
-    });
-
-    it("registers clicks", async () => {
-        const onClick = jest.fn();
-
-        const { container } = renderComponent({
-            onClick,
-        });
-
-        const btn = getByRole(container, "treeitem");
-
-        await userEvent.click(btn);
-
-        expect(onClick).toHaveBeenCalledTimes(1);
-    });
-});
diff --git a/apps/web/test/unit-tests/components/views/rooms/LegacyRoomList-test.tsx b/apps/web/test/unit-tests/components/views/rooms/LegacyRoomList-test.tsx
deleted file mode 100644
index b043e6d590..0000000000
--- a/apps/web/test/unit-tests/components/views/rooms/LegacyRoomList-test.tsx
+++ /dev/null
@@ -1,273 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2023 Mikhail Aheichyk
-Copyright 2023 Nordeck IT + Consulting GmbH.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React, { type JSX } from "react";
-import { cleanup, queryByRole, render, screen, within } from "jest-matrix-react";
-import userEvent from "@testing-library/user-event";
-import { mocked } from "jest-mock";
-import { type Room } from "matrix-js-sdk/src/matrix";
-
-import LegacyRoomList from "../../../../../src/components/views/rooms/LegacyRoomList";
-import ResizeNotifier from "../../../../../src/utils/ResizeNotifier";
-import { MetaSpace } from "../../../../../src/stores/spaces";
-import { shouldShowComponent } from "../../../../../src/customisations/helpers/UIComponents";
-import { UIComponent } from "../../../../../src/settings/UIFeature";
-import dis from "../../../../../src/dispatcher/dispatcher";
-import { Action } from "../../../../../src/dispatcher/actions";
-import * as testUtils from "../../../../test-utils";
-import { mkSpace, stubClient } from "../../../../test-utils";
-import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
-import SpaceStore from "../../../../../src/stores/spaces/SpaceStore";
-import DMRoomMap from "../../../../../src/utils/DMRoomMap";
-import RoomListStore from "../../../../../src/stores/room-list/RoomListStore";
-import { type ITagMap } from "../../../../../src/stores/room-list/algorithms/models";
-import { DefaultTagID } from "../../../../../src/stores/room-list-v3/skip-list/tag";
-
-jest.mock("../../../../../src/customisations/helpers/UIComponents", () => ({
-    shouldShowComponent: jest.fn(),
-}));
-
-jest.mock("../../../../../src/dispatcher/dispatcher");
-
-const getUserIdForRoomId = jest.fn();
-const getDMRoomsForUserId = jest.fn();
-// @ts-ignore
-DMRoomMap.sharedInstance = { getUserIdForRoomId, getDMRoomsForUserId };
-
-describe("LegacyRoomList", () => {
-    stubClient();
-    const client = MatrixClientPeg.safeGet();
-    const store = SpaceStore.instance;
-
-    function getComponent(props: Partial<LegacyRoomList["props"]> = {}): JSX.Element {
-        return (
-            <LegacyRoomList
-                onKeyDown={jest.fn()}
-                onFocus={jest.fn()}
-                onBlur={jest.fn()}
-                onResize={jest.fn()}
-                resizeNotifier={new ResizeNotifier()}
-                isMinimized={false}
-                activeSpace={MetaSpace.Home}
-                {...props}
-            />
-        );
-    }
-
-    describe("Rooms", () => {
-        describe("when meta space is active", () => {
-            beforeEach(() => {
-                store.setActiveSpace(MetaSpace.Home);
-            });
-
-            it("does not render add room button when UIComponent customisation disables CreateRooms and ExploreRooms", () => {
-                const disabled: UIComponent[] = [UIComponent.CreateRooms, UIComponent.ExploreRooms];
-                mocked(shouldShowComponent).mockImplementation((feature) => !disabled.includes(feature));
-                render(getComponent());
-
-                const roomsList = screen.getByRole("group", { name: "Rooms" });
-                expect(within(roomsList).queryByRole("button", { name: "Add room" })).not.toBeInTheDocument();
-            });
-
-            it("renders add room button with menu when UIComponent customisation allows CreateRooms or ExploreRooms", async () => {
-                let disabled: UIComponent[] = [];
-                mocked(shouldShowComponent).mockImplementation((feature) => !disabled.includes(feature));
-                const { rerender } = render(getComponent());
-
-                const roomsList = screen.getByRole("group", { name: "Rooms" });
-                const addRoomButton = within(roomsList).getByRole("button", { name: "Add room" });
-                expect(screen.queryByRole("menu")).not.toBeInTheDocument();
-
-                await userEvent.click(addRoomButton);
-
-                const menu = screen.getByRole("menu");
-
-                expect(within(menu).getByRole("menuitem", { name: "New room" })).toBeInTheDocument();
-                expect(within(menu).getByRole("menuitem", { name: "Explore public rooms" })).toBeInTheDocument();
-
-                disabled = [UIComponent.CreateRooms];
-                rerender(getComponent());
-
-                expect(addRoomButton).toBeInTheDocument();
-                expect(menu).toBeInTheDocument();
-                expect(within(menu).queryByRole("menuitem", { name: "New room" })).not.toBeInTheDocument();
-                expect(within(menu).getByRole("menuitem", { name: "Explore public rooms" })).toBeInTheDocument();
-
-                disabled = [UIComponent.ExploreRooms];
-                rerender(getComponent());
-
-                expect(addRoomButton).toBeInTheDocument();
-                expect(menu).toBeInTheDocument();
-                expect(within(menu).getByRole("menuitem", { name: "New room" })).toBeInTheDocument();
-                expect(within(menu).queryByRole("menuitem", { name: "Explore public rooms" })).not.toBeInTheDocument();
-            });
-
-            it("renders add room button and clicks explore public rooms", async () => {
-                mocked(shouldShowComponent).mockReturnValue(true);
-                render(getComponent());
-
-                const roomsList = screen.getByRole("group", { name: "Rooms" });
-                await userEvent.click(within(roomsList).getByRole("button", { name: "Add room" }));
-
-                const menu = screen.getByRole("menu");
-                await userEvent.click(within(menu).getByRole("menuitem", { name: "Explore public rooms" }));
-
-                expect(dis.fire).toHaveBeenCalledWith(Action.ViewRoomDirectory);
-            });
-        });
-
-        describe("when room space is active", () => {
-            let rooms: Room[];
-            const mkSpaceForRooms = (spaceId: string, children: string[] = []) =>
-                mkSpace(client, spaceId, rooms, children);
-
-            const space1 = "!space1:server";
-
-            beforeEach(async () => {
-                rooms = [];
-                mkSpaceForRooms(space1);
-                mocked(client).getRoom.mockImplementation(
-                    (roomId) => rooms.find((room) => room.roomId === roomId) || null,
-                );
-                await testUtils.setupAsyncStoreWithClient(store, client);
-
-                store.setActiveSpace(space1);
-            });
-
-            it("does not render add room button when UIComponent customisation disables CreateRooms and ExploreRooms", () => {
-                const disabled: UIComponent[] = [UIComponent.CreateRooms, UIComponent.ExploreRooms];
-                mocked(shouldShowComponent).mockImplementation((feature) => !disabled.includes(feature));
-                render(getComponent());
-
-                const roomsList = screen.getByRole("group", { name: "Rooms" });
-                expect(within(roomsList).queryByRole("button", { name: "Add room" })).not.toBeInTheDocument();
-            });
-
-            it("renders add room button with menu when UIComponent customisation allows CreateRooms or ExploreRooms", async () => {
-                let disabled: UIComponent[] = [];
-                mocked(shouldShowComponent).mockImplementation((feature) => !disabled.includes(feature));
-                const { rerender } = render(getComponent());
-
-                const roomsList = screen.getByRole("group", { name: "Rooms" });
-                const addRoomButton = within(roomsList).getByRole("button", { name: "Add room" });
-                expect(screen.queryByRole("menu")).not.toBeInTheDocument();
-
-                await userEvent.click(addRoomButton);
-
-                const menu = screen.getByRole("menu");
-
-                expect(within(menu).getByRole("menuitem", { name: "Explore rooms" })).toBeInTheDocument();
-                expect(within(menu).getByRole("menuitem", { name: "New room" })).toBeInTheDocument();
-                expect(within(menu).getByRole("menuitem", { name: "Add existing room" })).toBeInTheDocument();
-
-                disabled = [UIComponent.CreateRooms];
-                rerender(getComponent());
-
-                expect(addRoomButton).toBeInTheDocument();
-                expect(menu).toBeInTheDocument();
-                expect(within(menu).getByRole("menuitem", { name: "Explore rooms" })).toBeInTheDocument();
-                expect(within(menu).queryByRole("menuitem", { name: "New room" })).not.toBeInTheDocument();
-                expect(within(menu).queryByRole("menuitem", { name: "Add existing room" })).not.toBeInTheDocument();
-
-                disabled = [UIComponent.ExploreRooms];
-                rerender(getComponent());
-
-                expect(addRoomButton).toBeInTheDocument();
-                expect(menu).toBeInTheDocument();
-                expect(within(menu).queryByRole("menuitem", { name: "Explore rooms" })).toBeInTheDocument();
-                expect(within(menu).getByRole("menuitem", { name: "New room" })).toBeInTheDocument();
-                expect(within(menu).getByRole("menuitem", { name: "Add existing room" })).toBeInTheDocument();
-            });
-
-            it("renders add room button and clicks explore rooms", async () => {
-                mocked(shouldShowComponent).mockReturnValue(true);
-                render(getComponent());
-
-                const roomsList = screen.getByRole("group", { name: "Rooms" });
-                await userEvent.click(within(roomsList).getByRole("button", { name: "Add room" }));
-
-                const menu = screen.getByRole("menu");
-                await userEvent.click(within(menu).getByRole("menuitem", { name: "Explore rooms" }));
-
-                expect(dis.dispatch).toHaveBeenCalledWith({
-                    action: Action.ViewRoom,
-                    room_id: space1,
-                });
-            });
-        });
-
-        describe("when video meta space is active", () => {
-            const videoRoomPrivate = "!videoRoomPrivate_server";
-            const videoRoomPublic = "!videoRoomPublic_server";
-            const videoRoomKnock = "!videoRoomKnock_server";
-
-            beforeEach(async () => {
-                cleanup();
-                const rooms: Room[] = [];
-                testUtils.mkRoom(client, videoRoomPrivate, rooms);
-                testUtils.mkRoom(client, videoRoomPublic, rooms);
-                testUtils.mkRoom(client, videoRoomKnock, rooms);
-
-                mocked(client).getRoom.mockImplementation(
-                    (roomId) => rooms.find((room) => room.roomId === roomId) || null,
-                );
-                mocked(client).getRooms.mockImplementation(() => rooms);
-
-                const videoRoomKnockRoom = client.getRoom(videoRoomKnock)!;
-                const videoRoomPrivateRoom = client.getRoom(videoRoomPrivate)!;
-                const videoRoomPublicRoom = client.getRoom(videoRoomPublic)!;
-
-                [videoRoomPrivateRoom, videoRoomPublicRoom, videoRoomKnockRoom].forEach((room) => {
-                    (room.isCallRoom as jest.Mock).mockReturnValue(true);
-                });
-
-                const roomLists: ITagMap = {};
-                roomLists[DefaultTagID.Conference] = [videoRoomKnockRoom, videoRoomPublicRoom];
-                roomLists[DefaultTagID.Untagged] = [videoRoomPrivateRoom];
-                jest.spyOn(RoomListStore.instance, "orderedLists", "get").mockReturnValue(roomLists);
-                await testUtils.setupAsyncStoreWithClient(store, client);
-
-                store.setActiveSpace(MetaSpace.VideoRooms);
-            });
-
-            it("renders Conferences and Room but no People section", () => {
-                const renderResult = render(getComponent({ activeSpace: MetaSpace.VideoRooms }));
-                const roomsEl = renderResult.getByRole("treeitem", { name: "Rooms" });
-                const conferenceEl = renderResult.getByRole("treeitem", { name: "Conferences" });
-
-                const noInvites = screen.queryByRole("treeitem", { name: "Invites" });
-                const noFavourites = screen.queryByRole("treeitem", { name: "Favourites" });
-                const noPeople = screen.queryByRole("treeitem", { name: "People" });
-                const noLowPriority = screen.queryByRole("treeitem", { name: "Low priority" });
-                const noHistorical = screen.queryByRole("treeitem", { name: "Historical" });
-
-                expect(roomsEl).toBeVisible();
-                expect(conferenceEl).toBeVisible();
-
-                expect(noInvites).toBeFalsy();
-                expect(noFavourites).toBeFalsy();
-                expect(noPeople).toBeFalsy();
-                expect(noLowPriority).toBeFalsy();
-                expect(noHistorical).toBeFalsy();
-            });
-            it("renders Public and Knock rooms in Conferences section", () => {
-                const renderResult = render(getComponent({ activeSpace: MetaSpace.VideoRooms }));
-                const conferenceList = renderResult.getByRole("group", { name: "Conferences" });
-                expect(queryByRole(conferenceList, "treeitem", { name: videoRoomPublic })).toBeVisible();
-                expect(queryByRole(conferenceList, "treeitem", { name: videoRoomKnock })).toBeVisible();
-                expect(queryByRole(conferenceList, "treeitem", { name: videoRoomPrivate })).toBeFalsy();
-
-                const roomsList = renderResult.getByRole("group", { name: "Rooms" });
-                expect(queryByRole(roomsList, "treeitem", { name: videoRoomPrivate })).toBeVisible();
-                expect(queryByRole(roomsList, "treeitem", { name: videoRoomPublic })).toBeFalsy();
-                expect(queryByRole(roomsList, "treeitem", { name: videoRoomKnock })).toBeFalsy();
-            });
-        });
-    });
-});
diff --git a/apps/web/test/unit-tests/components/views/rooms/MessageComposer-test.tsx b/apps/web/test/unit-tests/components/views/rooms/MessageComposer-test.tsx
index bfd9c88448..69acf344f3 100644
--- a/apps/web/test/unit-tests/components/views/rooms/MessageComposer-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/MessageComposer-test.tsx
@@ -35,7 +35,10 @@ import { addTextToComposerRTL } from "../../../../test-utils/composer";
 import UIStore, { UI_EVENTS } from "../../../../../src/stores/UIStore";
 import { Action } from "../../../../../src/dispatcher/actions";
 import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";
-import type { RoomContextType } from "../../../../../src/contexts/RoomContext.ts";
+import { TimelineRenderingType, type RoomContextType } from "../../../../../src/contexts/RoomContext.ts";
+import { RoomUploadContextProvider } from "../../../../../src/viewmodels/room/RoomUploadViewModel.tsx";
+import { SDKContext } from "../../../../../src/contexts/SDKContext.ts";
+import { SDKContextClass } from "../../../../../src/contexts/SDKContextClass.ts";
 
 const openStickerPicker = async (): Promise<void> => {
     await userEvent.click(screen.getByLabelText("More options"));
@@ -211,10 +214,8 @@ describe("MessageComposer", () => {
 
                     it(`should${value ? "" : " not"} display the button`, () => {
                         if (value) {
-                            // eslint-disable-next-line jest/no-conditional-expect
                             expect(screen.getByLabelText(buttonLabel)).toBeInTheDocument();
                         } else {
-                            // eslint-disable-next-line jest/no-conditional-expect
                             expect(screen.queryByLabelText(buttonLabel)).not.toBeInTheDocument();
                         }
                     });
@@ -237,10 +238,8 @@ describe("MessageComposer", () => {
 
                         it(`should${!value || "not"} display the button`, () => {
                             if (!value) {
-                                // eslint-disable-next-line jest/no-conditional-expect
                                 expect(screen.getByLabelText(buttonLabel)).toBeInTheDocument();
                             } else {
-                                // eslint-disable-next-line jest/no-conditional-expect
                                 expect(screen.queryByLabelText(buttonLabel)).not.toBeInTheDocument();
                             }
                         });
@@ -458,7 +457,8 @@ function wrapAndRender(
         canSendMessages,
         tombstone,
         narrow,
-    } as unknown as RoomContextType;
+        timelineRenderingType: TimelineRenderingType.Room,
+    } satisfies Partial<RoomContextType> as RoomContextType;
 
     const defaultProps = {
         room,
@@ -467,11 +467,15 @@ function wrapAndRender(
     };
 
     const getRawComponent = (props = {}, context = roomContext, client = mockClient) => (
-        <MatrixClientContext.Provider value={client}>
-            <ScopedRoomContextProvider {...context}>
-                <MessageComposer {...defaultProps} {...props} />
-            </ScopedRoomContextProvider>
-        </MatrixClientContext.Provider>
+        <SDKContext.Provider value={SDKContextClass.instance}>
+            <MatrixClientContext.Provider value={client}>
+                <ScopedRoomContextProvider {...context}>
+                    <RoomUploadContextProvider>
+                        <MessageComposer {...defaultProps} {...props} />
+                    </RoomUploadContextProvider>
+                </ScopedRoomContextProvider>
+            </MatrixClientContext.Provider>
+        </SDKContext.Provider>
     );
     return {
         rawComponent: getRawComponent(props, roomContext, mockClient),
diff --git a/apps/web/test/unit-tests/components/views/rooms/MessageComposerButtons-test.tsx b/apps/web/test/unit-tests/components/views/rooms/MessageComposerButtons-test.tsx
index 58a58185d0..0f29c546ec 100644
--- a/apps/web/test/unit-tests/components/views/rooms/MessageComposerButtons-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/MessageComposerButtons-test.tsx
@@ -14,7 +14,8 @@ import { createTestClient, getRoomContext, mkStubRoom } from "../../../../test-u
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
 import MessageComposerButtons from "../../../../../src/components/views/rooms/MessageComposerButtons";
 import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";
-import type { RoomContextType } from "../../../../../src/contexts/RoomContext.ts";
+import { type RoomContextType } from "../../../../../src/contexts/RoomContext.ts";
+import { RoomUploadContextProvider } from "../../../../../src/viewmodels/room/RoomUploadViewModel.tsx";
 
 describe("MessageComposerButtons", () => {
     // @ts-ignore - we're deliberately not implementing the whole interface here, but
@@ -54,7 +55,9 @@ describe("MessageComposerButtons", () => {
 
         return render(
             <MatrixClientContext.Provider value={mockClient}>
-                <ScopedRoomContextProvider {...defaultRoomContext}>{component}</ScopedRoomContextProvider>
+                <ScopedRoomContextProvider {...defaultRoomContext}>
+                    <RoomUploadContextProvider>{component}</RoomUploadContextProvider>
+                </ScopedRoomContextProvider>
             </MatrixClientContext.Provider>,
         );
     }
diff --git a/apps/web/test/unit-tests/components/views/rooms/NewRoomIntro-test.tsx b/apps/web/test/unit-tests/components/views/rooms/NewRoomIntro-test.tsx
index 8f0798cfa6..f0db2282f6 100644
--- a/apps/web/test/unit-tests/components/views/rooms/NewRoomIntro-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/NewRoomIntro-test.tsx
@@ -15,29 +15,29 @@ import { LinkedTextContext } from "@element-hq/web-shared-components";
 
 import { LocalRoom } from "../../../../../src/models/LocalRoom";
 import {
+    clientAndSDKContextRenderOptions,
     filterConsole,
     mkEvent,
     mkRoomMemberJoinEvent,
     mkThirdPartyInviteEvent,
     stubClient,
 } from "../../../../test-utils";
-import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import NewRoomIntro from "../../../../../src/components/views/rooms/NewRoomIntro";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
 import { DirectoryMember } from "../../../../../src/utils/direct-messages";
 import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";
 import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
 import type { RoomContextType } from "../../../../../src/contexts/RoomContext.ts";
+import { SDKContextClass } from "../../../../../src/contexts/SDKContextClass.ts";
 
 const renderNewRoomIntro = (client: MatrixClient, room: Room | LocalRoom) => {
     render(
-        <MatrixClientContext.Provider value={client}>
-            <ScopedRoomContextProvider {...({ room, roomId: room.roomId } as unknown as RoomContextType)}>
-                <LinkedTextContext.Provider value={{}}>
-                    <NewRoomIntro />
-                </LinkedTextContext.Provider>
-            </ScopedRoomContextProvider>
-        </MatrixClientContext.Provider>,
+        <ScopedRoomContextProvider {...({ room, roomId: room.roomId } as unknown as RoomContextType)}>
+            <LinkedTextContext.Provider value={{}}>
+                <NewRoomIntro />
+            </LinkedTextContext.Provider>
+        </ScopedRoomContextProvider>,
+        clientAndSDKContextRenderOptions(client, SDKContextClass.instance),
     );
 };
 
diff --git a/apps/web/test/unit-tests/components/views/rooms/NotificationBadge/NotificationBadge-test.tsx b/apps/web/test/unit-tests/components/views/rooms/NotificationBadge/NotificationBadge-test.tsx
index bcbb4ab712..147ebb78ea 100644
--- a/apps/web/test/unit-tests/components/views/rooms/NotificationBadge/NotificationBadge-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/NotificationBadge/NotificationBadge-test.tsx
@@ -12,7 +12,7 @@ import React from "react";
 import { StatelessNotificationBadge } from "../../../../../../src/components/views/rooms/NotificationBadge/StatelessNotificationBadge";
 import SettingsStore from "../../../../../../src/settings/SettingsStore";
 import { NotificationLevel } from "../../../../../../src/stores/notifications/NotificationLevel";
-import NotificationBadge from "../../../../../../src/components/views/rooms/NotificationBadge";
+import { NotificationBadge } from "../../../../../../src/components/views/rooms/NotificationBadge/NotificationBadge";
 import { NotificationState } from "../../../../../../src/stores/notifications/NotificationState";
 
 class DummyNotificationState extends NotificationState {
@@ -26,25 +26,25 @@ describe("NotificationBadge", () => {
     it("shows a dot if the level is activity", () => {
         const notif = new DummyNotificationState(NotificationLevel.Activity);
 
-        const { container } = render(<NotificationBadge roomId="!foo:bar" notification={notif} />);
-        expect(container.querySelector(".mx_NotificationBadge_dot")).toBeInTheDocument();
-        expect(container.querySelector(".mx_NotificationBadge")).toBeInTheDocument();
+        const { container } = render(<NotificationBadge notification={notif} />);
+        expect(container.querySelector('[data-badge-type="dot"]')).toBeInTheDocument();
+        expect(container.querySelector('[data-testid="notification-badge"]')).toBeInTheDocument();
     });
 
     it("does not show a dot if the level is activity and hideIfDot is true", () => {
         const notif = new DummyNotificationState(NotificationLevel.Activity);
 
-        const { container } = render(<NotificationBadge roomId="!foo:bar" notification={notif} hideIfDot={true} />);
-        expect(container.querySelector(".mx_NotificationBadge_dot")).not.toBeInTheDocument();
-        expect(container.querySelector(".mx_NotificationBadge")).not.toBeInTheDocument();
+        const { container } = render(<NotificationBadge notification={notif} hideIfDot={true} />);
+        expect(container.querySelector('[data-badge-type="dot"]')).not.toBeInTheDocument();
+        expect(container.querySelector('[data-testid="notification-badge"]')).not.toBeInTheDocument();
     });
 
     it("still shows an empty badge if hideIfDot us true", () => {
         const notif = new DummyNotificationState(NotificationLevel.Notification);
 
-        const { container } = render(<NotificationBadge roomId="!foo:bar" notification={notif} hideIfDot={true} />);
-        expect(container.querySelector(".mx_NotificationBadge_dot")).not.toBeInTheDocument();
-        expect(container.querySelector(".mx_NotificationBadge")).toBeInTheDocument();
+        const { container } = render(<NotificationBadge notification={notif} hideIfDot={true} />);
+        expect(container.querySelector('[data-badge-type="dot"]')).not.toBeInTheDocument();
+        expect(container.querySelector('[data-testid="notification-badge"]')).toBeInTheDocument();
     });
 
     describe("StatelessNotificationBadge", () => {
diff --git a/apps/web/test/unit-tests/components/views/rooms/NotificationBadge/StatelessNotificationBadge-test.tsx b/apps/web/test/unit-tests/components/views/rooms/NotificationBadge/StatelessNotificationBadge-test.tsx
index e6495b78b8..2bb4defbdd 100644
--- a/apps/web/test/unit-tests/components/views/rooms/NotificationBadge/StatelessNotificationBadge-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/NotificationBadge/StatelessNotificationBadge-test.tsx
@@ -17,14 +17,14 @@ describe("StatelessNotificationBadge", () => {
         const { container } = render(
             <StatelessNotificationBadge symbol="!" count={0} level={NotificationLevel.Unsent} />,
         );
-        expect(container.querySelector(".mx_NotificationBadge_level_highlight")).not.toBe(null);
+        expect(container.querySelector('[data-notification-level="highlight"]')).toBeInTheDocument();
     });
 
     it("has knock style", () => {
         const { container } = render(
             <StatelessNotificationBadge symbol="!" count={0} level={NotificationLevel.Highlight} knocked={true} />,
         );
-        expect(container.querySelector(".mx_NotificationBadge_dot")).not.toBeInTheDocument();
+        expect(container.querySelector('[data-badge-type="dot"]')).not.toBeInTheDocument();
         expect(container.querySelector("svg")).toHaveAccessibleName("Request to join sent");
     });
 
@@ -32,14 +32,14 @@ describe("StatelessNotificationBadge", () => {
         const { container } = render(
             <StatelessNotificationBadge symbol={null} count={3} level={NotificationLevel.Activity} />,
         );
-        expect(container.querySelector(".mx_NotificationBadge_dot")).toBeInTheDocument();
+        expect(container.querySelector('[data-badge-type="dot"]')).toBeInTheDocument();
     });
 
     it("has badge style for notification", () => {
         const { container } = render(
             <StatelessNotificationBadge symbol={null} count={3} level={NotificationLevel.Notification} />,
         );
-        expect(container.querySelector(".mx_NotificationBadge_dot")).not.toBeInTheDocument();
+        expect(container.querySelector('[data-badge-type="dot"]')).not.toBeInTheDocument();
     });
 
     it("has dot style for notification when forced", () => {
@@ -51,6 +51,6 @@ describe("StatelessNotificationBadge", () => {
                 forceDot={true}
             />,
         );
-        expect(container.querySelector(".mx_NotificationBadge_dot")).toBeInTheDocument();
+        expect(container.querySelector('[data-badge-type="dot"]')).toBeInTheDocument();
     });
 });
diff --git a/apps/web/test/unit-tests/components/views/rooms/NotificationBadge/UnreadNotificationBadge-test.tsx b/apps/web/test/unit-tests/components/views/rooms/NotificationBadge/UnreadNotificationBadge-test.tsx
index 6628889dc7..b1e9a2835c 100644
--- a/apps/web/test/unit-tests/components/views/rooms/NotificationBadge/UnreadNotificationBadge-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/NotificationBadge/UnreadNotificationBadge-test.tsx
@@ -38,6 +38,10 @@ describe("UnreadNotificationBadge", () => {
         return <UnreadNotificationBadge room={room} threadId={threadId} />;
     }
 
+    function getBadge(container: HTMLElement): Element | null {
+        return container.querySelector('[data-testid="notification-badge"]');
+    }
+
     beforeEach(() => {
         client = stubClient();
         client.supportsThreads = () => true;
@@ -84,27 +88,27 @@ describe("UnreadNotificationBadge", () => {
     it("renders unread notification badge", () => {
         const { container } = render(getComponent());
 
-        expect(container.querySelector(".mx_NotificationBadge_visible")).toBeTruthy();
-        expect(container.querySelector(".mx_NotificationBadge_level_highlight")).toBeFalsy();
+        expect(getBadge(container)).toHaveTextContent("1");
+        expect(getBadge(container)).toHaveAttribute("data-notification-level", "notification");
 
         act(() => {
             room.setUnreadNotificationCount(NotificationCountType.Highlight, 1);
         });
 
-        expect(container.querySelector(".mx_NotificationBadge_level_highlight")).toBeTruthy();
+        expect(getBadge(container)).toHaveAttribute("data-notification-level", "highlight");
     });
 
     it("renders unread thread notification badge", () => {
         const { container } = render(getComponent(THREAD_ID));
 
-        expect(container.querySelector(".mx_NotificationBadge_visible")).toBeTruthy();
-        expect(container.querySelector(".mx_NotificationBadge_level_highlight")).toBeFalsy();
+        expect(getBadge(container)).toHaveTextContent("1");
+        expect(getBadge(container)).toHaveAttribute("data-notification-level", "notification");
 
         act(() => {
             room.setThreadUnreadNotificationCount(THREAD_ID, NotificationCountType.Highlight, 1);
         });
 
-        expect(container.querySelector(".mx_NotificationBadge_level_highlight")).toBeTruthy();
+        expect(getBadge(container)).toHaveAttribute("data-notification-level", "highlight");
     });
 
     it("hides unread notification badge", () => {
@@ -112,7 +116,7 @@ describe("UnreadNotificationBadge", () => {
             room.setThreadUnreadNotificationCount(THREAD_ID, NotificationCountType.Total, 0);
             room.setThreadUnreadNotificationCount(THREAD_ID, NotificationCountType.Highlight, 0);
             const { container } = render(getComponent(THREAD_ID));
-            expect(container.querySelector(".mx_NotificationBadge_visible")).toBeFalsy();
+            expect(getBadge(container)).toBeNull();
         });
     });
 
@@ -142,7 +146,7 @@ describe("UnreadNotificationBadge", () => {
         muteRoom(room);
 
         const { container } = render(getComponent());
-        expect(container.querySelector(".mx_NotificationBadge")).toBeNull();
+        expect(getBadge(container)).toBeNull();
     });
 
     it("activity renders unread notification badge", () => {
@@ -168,8 +172,8 @@ describe("UnreadNotificationBadge", () => {
         room.addLiveEvents([event], { addToState: true });
 
         const { container } = render(getComponent(THREAD_ID));
-        expect(container.querySelector(".mx_NotificationBadge_dot")).toBeTruthy();
-        expect(container.querySelector(".mx_NotificationBadge_visible")).toBeTruthy();
-        expect(container.querySelector(".mx_NotificationBadge_level_highlight")).toBeFalsy();
+        expect(getBadge(container)).toBeInTheDocument();
+        expect(getBadge(container)).toHaveAttribute("data-badge-type", "dot");
+        expect(getBadge(container)).not.toHaveAttribute("data-notification-level", "highlight");
     });
 });
diff --git a/apps/web/test/unit-tests/components/views/rooms/PinnedMessageBanner-test.tsx b/apps/web/test/unit-tests/components/views/rooms/PinnedMessageBanner-test.tsx
index da6ba71e90..02b5f81b58 100644
--- a/apps/web/test/unit-tests/components/views/rooms/PinnedMessageBanner-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/PinnedMessageBanner-test.tsx
@@ -20,7 +20,7 @@ import RightPanelStore from "../../../../../src/stores/right-panel/RightPanelSto
 import { RightPanelPhases } from "../../../../../src/stores/right-panel/RightPanelStorePhases";
 import { UPDATE_EVENT } from "../../../../../src/stores/AsyncStore";
 import { Action } from "../../../../../src/dispatcher/actions";
-import { SdkContextClass } from "../../../../../src/contexts/SDKContext.ts";
+import { SDKContextClass } from "../../../../../src/contexts/SDKContextClass";
 
 describe("<PinnedMessageBanner />", () => {
     const userId = "@alice:server.org";
@@ -29,12 +29,12 @@ describe("<PinnedMessageBanner />", () => {
     let mockClient: MatrixClient;
     let room: Room;
     let permalinkCreator: RoomPermalinkCreator;
-    let sdkContext: SdkContextClass;
+    let sdkContext: SDKContextClass;
     beforeEach(() => {
         mockClient = stubClient();
         room = new Room(roomId, mockClient, userId);
         permalinkCreator = new RoomPermalinkCreator(room);
-        sdkContext = new SdkContextClass();
+        sdkContext = new SDKContextClass();
         jest.spyOn(dis, "dispatch").mockReturnValue(undefined);
     });
 
diff --git a/apps/web/test/unit-tests/components/views/rooms/ReadReceiptGroup-test.tsx b/apps/web/test/unit-tests/components/views/rooms/ReadReceiptGroup-test.tsx
index 0af49f767d..7842e960da 100644
--- a/apps/web/test/unit-tests/components/views/rooms/ReadReceiptGroup-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/ReadReceiptGroup-test.tsx
@@ -17,7 +17,7 @@ import {
     ReadReceiptPerson,
     readReceiptTooltip,
 } from "../../../../../src/components/views/rooms/ReadReceiptGroup";
-import * as languageHandler from "../../../../../src/languageHandler";
+import * as languageSettings from "../../../../../src/i18n/settings";
 import { stubClient } from "../../../../test-utils";
 import dispatcher from "../../../../../src/dispatcher/dispatcher";
 import { Action } from "../../../../../src/dispatcher/actions";
@@ -46,7 +46,7 @@ describe("ReadReceiptGroup", () => {
             expect(readReceiptTooltip([], 1)).toBe("");
         });
         it("returns a pretty list without hasMore", () => {
-            jest.spyOn(languageHandler, "getUserLanguage").mockReturnValue("en-GB");
+            jest.spyOn(languageSettings, "getUserLanguage").mockReturnValue("en-GB");
             expect(readReceiptTooltip(["Alice", "Bob", "Charlie", "Dan", "Eve"], 5)).toEqual(
                 "Alice, Bob, Charlie, Dan and Eve",
             );
diff --git a/apps/web/test/unit-tests/components/views/rooms/ReplyTile-test.tsx b/apps/web/test/unit-tests/components/views/rooms/ReplyTile-test.tsx
index 43d5912987..d10e20ff2a 100644
--- a/apps/web/test/unit-tests/components/views/rooms/ReplyTile-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/ReplyTile-test.tsx
@@ -30,6 +30,10 @@ describe("ReplyTile", () => {
         jest.mocked(renderReplyTile).mockClear().mockReturnValue(null);
     });
 
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
     it("renders video replies with the video body", () => {
         const mxEvent = mkEvent({
             event: true,
diff --git a/apps/web/test/unit-tests/components/views/rooms/RoomInfoLine-test.tsx b/apps/web/test/unit-tests/components/views/rooms/RoomInfoLine-test.tsx
index 434f78dfc4..f2cfab47e9 100644
--- a/apps/web/test/unit-tests/components/views/rooms/RoomInfoLine-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/RoomInfoLine-test.tsx
@@ -10,7 +10,9 @@ import React from "react";
 import { MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 
 import RoomInfoLine from "../../../../../src/components/views/rooms/RoomInfoLine.tsx";
-import { stubClient } from "../../../../test-utils";
+import { stubClient, TestSDKContext, withContexts } from "../../../../test-utils";
+import { fireEvent } from "@testing-library/dom";
+import { RightPanelPhases } from "../../../../../src/stores/right-panel/RightPanelStorePhases.ts";
 
 describe("RoomInfoLine", () => {
     it("renders for public room", () => {
@@ -33,4 +35,29 @@ describe("RoomInfoLine", () => {
         expect(getByText("Public room")).toBeVisible();
         expect(asFragment()).toMatchSnapshot();
     });
+
+    it("should render members button which opens right panel", async () => {
+        const sdkContext = new TestSDKContext();
+        sdkContext._client = stubClient();
+        const room = new Room("!roomId", sdkContext.client!, sdkContext.client!.getUserId()!);
+        room.currentState.setStateEvents([
+            new MatrixEvent({
+                sender: sdkContext.client!.getUserId()!,
+                room_id: room.roomId,
+                state_key: "",
+                event_id: "$eventId",
+                type: "m.room.join_rules",
+                content: {
+                    join_rule: "public",
+                },
+            }),
+        ]);
+        jest.spyOn(room, "getJoinedMemberCount").mockReturnValue(50);
+
+        jest.spyOn(sdkContext.rightPanelStore, "setCard");
+
+        const { findByText } = render(<RoomInfoLine room={room} />, withContexts({ sdkContext }));
+        fireEvent.click(await findByText("50 members"));
+        expect(sdkContext.rightPanelStore.setCard).toHaveBeenCalledWith({ phase: RightPanelPhases.MemberList });
+    });
 });
diff --git a/apps/web/test/unit-tests/components/views/rooms/RoomKnocksBar-test.tsx b/apps/web/test/unit-tests/components/views/rooms/RoomKnocksBar-test.tsx
index 4f1ad97bca..e1865eb080 100644
--- a/apps/web/test/unit-tests/components/views/rooms/RoomKnocksBar-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/RoomKnocksBar-test.tsx
@@ -21,7 +21,7 @@ import { KnownMembership } from "matrix-js-sdk/src/types";
 import React from "react";
 
 import ErrorDialog from "../../../../../src/components/views/dialogs/ErrorDialog";
-import { RoomSettingsTab } from "../../../../../src/components/views/dialogs/RoomSettingsDialog";
+import { RoomSettingsTab } from "../../../../../src/components/views/dialogs/RoomSettingsDialog-tab";
 import { RoomKnocksBar } from "../../../../../src/components/views/rooms/RoomKnocksBar";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import dis from "../../../../../src/dispatcher/dispatcher";
@@ -32,7 +32,7 @@ import {
     getMockClientWithEventEmitter,
     mockClientMethodsUser,
 } from "../../../../test-utils";
-import * as languageHandler from "../../../../../src/languageHandler";
+import * as languageSettings from "../../../../../src/i18n/settings";
 
 describe("RoomKnocksBar", () => {
     const userId = "@alice:example.org";
@@ -132,7 +132,7 @@ describe("RoomKnocksBar", () => {
             jest.spyOn(state, "hasSufficientPowerLevelFor").mockReturnValue(true);
             jest.spyOn(Modal, "createDialog");
             jest.spyOn(dis, "dispatch");
-            jest.spyOn(languageHandler, "getUserLanguage").mockReturnValue("en-GB");
+            jest.spyOn(languageSettings, "getUserLanguage").mockReturnValue("en-GB");
         });
 
         it("does not render if user can neither approve nor deny", () => {
diff --git a/apps/web/test/unit-tests/components/views/rooms/RoomListHeader-test.tsx b/apps/web/test/unit-tests/components/views/rooms/RoomListHeader-test.tsx
deleted file mode 100644
index b5fd449f50..0000000000
--- a/apps/web/test/unit-tests/components/views/rooms/RoomListHeader-test.tsx
+++ /dev/null
@@ -1,281 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React from "react";
-import { type MatrixClient, type Room, EventType } from "matrix-js-sdk/src/matrix";
-import { mocked } from "jest-mock";
-import { act, render, screen, fireEvent, type RenderResult } from "jest-matrix-react";
-
-import SpaceStore from "../../../../../src/stores/spaces/SpaceStore";
-import { MetaSpace } from "../../../../../src/stores/spaces";
-import _RoomListHeader from "../../../../../src/components/views/rooms/LegacyRoomListHeader";
-import * as testUtils from "../../../../test-utils";
-import { stubClient, mkSpace } from "../../../../test-utils";
-import DMRoomMap from "../../../../../src/utils/DMRoomMap";
-import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
-import SettingsStore from "../../../../../src/settings/SettingsStore";
-import { SettingLevel } from "../../../../../src/settings/SettingLevel";
-import { shouldShowComponent } from "../../../../../src/customisations/helpers/UIComponents";
-import { UIComponent } from "../../../../../src/settings/UIFeature";
-
-const RoomListHeader = testUtils.wrapInMatrixClientContext(_RoomListHeader);
-
-jest.mock("../../../../../src/customisations/helpers/UIComponents", () => ({
-    shouldShowComponent: jest.fn(),
-}));
-
-const blockUIComponent = (component: UIComponent): void => {
-    mocked(shouldShowComponent).mockImplementation((feature) => feature !== component);
-};
-
-const setupSpace = (client: MatrixClient): Room => {
-    const testSpace: Room = mkSpace(client, "!space:server");
-    testSpace.name = "Test Space";
-    client.getRoom = () => testSpace;
-    return testSpace;
-};
-
-const setupMainMenu = async (client: MatrixClient, testSpace: Room): Promise<RenderResult> => {
-    await testUtils.setupAsyncStoreWithClient(SpaceStore.instance, client);
-    act(() => {
-        SpaceStore.instance.setActiveSpace(testSpace.roomId);
-    });
-
-    const wrapper = render(<RoomListHeader />);
-
-    expect(wrapper.getByText("Test Space")).toBeInTheDocument();
-    wrapper.getByLabelText("Test Space menu").click();
-
-    return wrapper;
-};
-
-const setupPlusMenu = async (client: MatrixClient, testSpace: Room): Promise<RenderResult> => {
-    await testUtils.setupAsyncStoreWithClient(SpaceStore.instance, client);
-    act(() => {
-        SpaceStore.instance.setActiveSpace(testSpace.roomId);
-    });
-
-    const wrapper = render(<RoomListHeader />);
-
-    expect(wrapper.getByText("Test Space")).toBeInTheDocument();
-    act(() => {
-        wrapper.getByLabelText("Add")?.click();
-    });
-
-    return wrapper;
-};
-
-const checkIsDisabled = (menuItem: HTMLElement): void => {
-    expect(menuItem).toHaveAttribute("disabled");
-    expect(menuItem).toHaveAttribute("aria-disabled", "true");
-};
-
-const checkMenuLabels = (items: NodeListOf<Element>, labelArray: Array<string>) => {
-    expect(items).toHaveLength(labelArray.length);
-
-    const checkLabel = (item: Element, label: string) => {
-        expect(item.querySelector(".mx_IconizedContextMenu_label")).toHaveTextContent(label);
-    };
-
-    labelArray.forEach((label, index) => {
-        console.log("index", index, "label", label);
-        checkLabel(items[index], label);
-    });
-};
-
-describe("RoomListHeader", () => {
-    let client: MatrixClient;
-
-    beforeEach(async () => {
-        // This tests the header from the old room list/left panel, the new one is now enabled by default,
-        // so needs to be explicitly disabled to test the old list here.
-        await SettingsStore.setValue("feature_new_room_list", null, SettingLevel.DEVICE, false);
-        jest.resetAllMocks();
-
-        const dmRoomMap = {
-            getUserIdForRoomId: jest.fn(),
-            getDMRoomsForUserId: jest.fn(),
-        } as unknown as DMRoomMap;
-        DMRoomMap.setShared(dmRoomMap);
-        stubClient();
-        client = MatrixClientPeg.safeGet();
-        mocked(shouldShowComponent).mockReturnValue(true); // show all UIComponents
-    });
-
-    it("renders a main menu for the home space", () => {
-        act(() => {
-            SpaceStore.instance.setActiveSpace(MetaSpace.Home);
-        });
-
-        const { container } = render(<RoomListHeader />);
-
-        expect(container).toHaveTextContent("Home");
-        fireEvent.click(screen.getByLabelText("Home options"));
-
-        const menu = screen.getByRole("menu");
-        const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
-        expect(items).toHaveLength(1);
-        expect(items[0]).toHaveTextContent("Show all rooms");
-    });
-
-    it("renders a main menu for spaces", async () => {
-        const testSpace = setupSpace(client);
-        await setupMainMenu(client, testSpace);
-
-        const menu = screen.getByRole("menu");
-        const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
-
-        checkMenuLabels(items, ["Space home", "Manage & explore rooms", "Preferences", "Settings", "Room", "Space"]);
-    });
-
-    it("renders a plus menu for spaces", async () => {
-        const testSpace = setupSpace(client);
-        await setupPlusMenu(client, testSpace);
-
-        const menu = screen.getByRole("menu");
-        const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
-
-        checkMenuLabels(items, ["New room", "Explore rooms", "Add existing room", "Add space"]);
-    });
-
-    it("closes menu if space changes from under it", async () => {
-        await SettingsStore.setValue("Spaces.enabledMetaSpaces", null, SettingLevel.DEVICE, {
-            [MetaSpace.Home]: true,
-            [MetaSpace.Favourites]: true,
-        });
-
-        const testSpace = setupSpace(client);
-        await setupMainMenu(client, testSpace);
-
-        act(() => {
-            SpaceStore.instance.setActiveSpace(MetaSpace.Favourites);
-        });
-
-        screen.getByText("Favourites");
-        expect(screen.queryByRole("menu")).toBeFalsy();
-    });
-
-    describe("UIComponents", () => {
-        describe("Main menu", () => {
-            it("does not render Add Space when user does not have permission to add spaces", async () => {
-                // User does not have permission to add spaces, anywhere
-                blockUIComponent(UIComponent.CreateSpaces);
-
-                const testSpace = setupSpace(client);
-                await setupMainMenu(client, testSpace);
-
-                const menu = screen.getByRole("menu");
-                const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
-                checkMenuLabels(items, [
-                    "Space home",
-                    "Manage & explore rooms",
-                    "Preferences",
-                    "Settings",
-                    "Room",
-                    // no add space
-                ]);
-            });
-
-            it("does not render Add Room when user does not have permission to add rooms", async () => {
-                // User does not have permission to add rooms
-                blockUIComponent(UIComponent.CreateRooms);
-
-                const testSpace = setupSpace(client);
-                await setupMainMenu(client, testSpace);
-
-                const menu = screen.getByRole("menu");
-                const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
-                checkMenuLabels(items, [
-                    "Space home",
-                    "Explore rooms", // not Manage & explore rooms
-                    "Preferences",
-                    "Settings",
-                    // no add room
-                    "Space",
-                ]);
-            });
-        });
-
-        describe("Plus menu", () => {
-            it("does not render Add Space when user does not have permission to add spaces", async () => {
-                // User does not have permission to add spaces, anywhere
-                blockUIComponent(UIComponent.CreateSpaces);
-
-                const testSpace = setupSpace(client);
-                await setupPlusMenu(client, testSpace);
-
-                const menu = screen.getByRole("menu");
-                const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
-
-                checkMenuLabels(items, [
-                    "New room",
-                    "Explore rooms",
-                    "Add existing room",
-                    // no Add space
-                ]);
-            });
-
-            it("disables Add Room when user does not have permission to add rooms", async () => {
-                // User does not have permission to add rooms
-                blockUIComponent(UIComponent.CreateRooms);
-
-                const testSpace = setupSpace(client);
-                await setupPlusMenu(client, testSpace);
-
-                const menu = screen.getByRole("menu");
-                const items = menu.querySelectorAll<HTMLElement>(".mx_IconizedContextMenu_item");
-
-                checkMenuLabels(items, ["New room", "Explore rooms", "Add existing room", "Add space"]);
-
-                // "Add existing room" is disabled
-                checkIsDisabled(items[2]);
-            });
-        });
-    });
-
-    describe("adding children to space", () => {
-        it("if user cannot add children to space, MainMenu adding buttons are hidden", async () => {
-            const testSpace = setupSpace(client);
-            mocked(testSpace.currentState.maySendStateEvent).mockImplementation(
-                (stateEventType, userId) => stateEventType !== EventType.SpaceChild,
-            );
-
-            await setupMainMenu(client, testSpace);
-
-            const menu = screen.getByRole("menu");
-            const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
-            checkMenuLabels(items, [
-                "Space home",
-                "Explore rooms", // not Manage & explore rooms
-                "Preferences",
-                "Settings",
-                // no add room
-                // no add space
-            ]);
-        });
-
-        it("if user cannot add children to space, PlusMenu add buttons are disabled", async () => {
-            const testSpace = setupSpace(client);
-            mocked(testSpace.currentState.maySendStateEvent).mockImplementation(
-                (stateEventType, userId) => stateEventType !== EventType.SpaceChild,
-            );
-
-            await setupPlusMenu(client, testSpace);
-
-            const menu = screen.getByRole("menu");
-            const items = menu.querySelectorAll<HTMLElement>(".mx_IconizedContextMenu_item");
-
-            checkMenuLabels(items, ["New room", "Explore rooms", "Add existing room", "Add space"]);
-
-            // "Add existing room" is disabled
-            checkIsDisabled(items[2]);
-            // "Add space" is disabled
-            checkIsDisabled(items[3]);
-        });
-    });
-});
diff --git a/apps/web/test/unit-tests/components/views/rooms/RoomListPanel/RoomListPanel-test.tsx b/apps/web/test/unit-tests/components/views/rooms/RoomListPanel/RoomListPanel-test.tsx
index 79148d5041..824ff2a55c 100644
--- a/apps/web/test/unit-tests/components/views/rooms/RoomListPanel/RoomListPanel-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/RoomListPanel/RoomListPanel-test.tsx
@@ -15,6 +15,8 @@ import { shouldShowComponent } from "../../../../../../src/customisations/helper
 import { MetaSpace } from "../../../../../../src/stores/spaces";
 import { LandmarkNavigation } from "../../../../../../src/accessibility/LandmarkNavigation";
 import { ReleaseAnnouncementStore } from "../../../../../../src/stores/ReleaseAnnouncementStore";
+import { clientAndSDKContextRenderOptions, createTestClient } from "../../../../../test-utils";
+import { TestSDKContext } from "../../../../TestSDKContext.ts";
 
 jest.mock("../../../../../../src/customisations/helpers/UIComponents", () => ({
     shouldShowComponent: jest.fn(),
@@ -34,8 +36,15 @@ jest.mock("../../../../../../src/accessibility/LandmarkNavigation", () => ({
 jest.spyOn(ReleaseAnnouncementStore.instance, "getReleaseAnnouncement").mockReturnValue(null);
 
 describe("<RoomListPanel />", () => {
+    const client = createTestClient();
+    const sdkContext = new TestSDKContext();
+    sdkContext._client = client;
+
     function renderComponent() {
-        return render(<RoomListPanel activeSpace={MetaSpace.Home} />);
+        return render(
+            <RoomListPanel activeSpace={MetaSpace.Home} />,
+            clientAndSDKContextRenderOptions(client, sdkContext),
+        );
     }
 
     beforeEach(() => {
diff --git a/apps/web/test/unit-tests/components/views/rooms/RoomListPanel/RoomListSearch-test.tsx b/apps/web/test/unit-tests/components/views/rooms/RoomListPanel/RoomListSearch-test.tsx
index d6fab31bcf..4323e59579 100644
--- a/apps/web/test/unit-tests/components/views/rooms/RoomListPanel/RoomListSearch-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/RoomListPanel/RoomListSearch-test.tsx
@@ -12,7 +12,8 @@ import { mocked } from "jest-mock";
 import { RoomListSearch } from "../../../../../../src/components/views/rooms/RoomListPanel/RoomListSearch";
 import { MetaSpace } from "../../../../../../src/stores/spaces";
 import { shouldShowComponent } from "../../../../../../src/customisations/helpers/UIComponents";
-import LegacyCallHandler from "../../../../../../src/LegacyCallHandler";
+import { SDKContextClass } from "../../../../../../src/contexts/SDKContextClass.ts";
+import { clientAndSDKContextRenderOptions, createTestClient } from "../../../../../test-utils";
 
 jest.mock("../../../../../../src/customisations/helpers/UIComponents", () => ({
     shouldShowComponent: jest.fn(),
@@ -20,13 +21,16 @@ jest.mock("../../../../../../src/customisations/helpers/UIComponents", () => ({
 
 describe("<RoomListSearch />", () => {
     function renderComponent(activeSpace = MetaSpace.Home) {
-        return render(<RoomListSearch activeSpace={activeSpace} />);
+        return render(
+            <RoomListSearch activeSpace={activeSpace} />,
+            clientAndSDKContextRenderOptions(createTestClient(), SDKContextClass.instance),
+        );
     }
 
     beforeEach(() => {
         // By default, we consider shouldShowComponent(UIComponent.ExploreRooms) should return true
         mocked(shouldShowComponent).mockReturnValue(true);
-        jest.spyOn(LegacyCallHandler.instance, "getSupportsPstnProtocol").mockReturnValue(false);
+        jest.spyOn(SDKContextClass.instance.legacyCallHandler, "getSupportsPstnProtocol").mockReturnValue(false);
     });
 
     it("renders", () => {
diff --git a/apps/web/test/unit-tests/components/views/rooms/RoomTile-test.tsx b/apps/web/test/unit-tests/components/views/rooms/RoomTile-test.tsx
deleted file mode 100644
index 0b583d1de2..0000000000
--- a/apps/web/test/unit-tests/components/views/rooms/RoomTile-test.tsx
+++ /dev/null
@@ -1,317 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import React from "react";
-import { render, screen, act, type RenderResult } from "jest-matrix-react";
-import { mocked, type Mocked } from "jest-mock";
-import {
-    type MatrixClient,
-    PendingEventOrdering,
-    Room,
-    RoomStateEvent,
-    type Thread,
-    type RoomMember,
-} from "matrix-js-sdk/src/matrix";
-import { KnownMembership } from "matrix-js-sdk/src/types";
-import { Widget } from "matrix-widget-api";
-
-import {
-    stubClient,
-    mkRoomMember,
-    MockedCall,
-    useMockedCalls,
-    setupAsyncStoreWithClient,
-    filterConsole,
-    flushPromises,
-    mkMessage,
-    useMockMediaDevices,
-} from "../../../../test-utils";
-import { CallStore } from "../../../../../src/stores/CallStore";
-import RoomTile from "../../../../../src/components/views/rooms/RoomTile";
-import { DefaultTagID } from "../../../../../src/stores/room-list-v3/skip-list/tag";
-import DMRoomMap from "../../../../../src/utils/DMRoomMap";
-import PlatformPeg from "../../../../../src/PlatformPeg";
-import type BasePlatform from "../../../../../src/BasePlatform";
-import { WidgetMessagingStore } from "../../../../../src/stores/widgets/WidgetMessagingStore";
-import { TestSdkContext } from "../../../TestSdkContext";
-import { SDKContext } from "../../../../../src/contexts/SDKContext";
-import { shouldShowComponent } from "../../../../../src/customisations/helpers/UIComponents";
-import { UIComponent } from "../../../../../src/settings/UIFeature";
-import { MessagePreviewStore } from "../../../../../src/stores/message-preview";
-import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
-import SettingsStore from "../../../../../src/settings/SettingsStore";
-import { ConnectionState } from "../../../../../src/models/Call";
-import { type WidgetMessaging } from "../../../../../src/stores/widgets/WidgetMessaging";
-
-jest.mock("../../../../../src/customisations/helpers/UIComponents", () => ({
-    shouldShowComponent: jest.fn(),
-}));
-
-describe("RoomTile", () => {
-    jest.spyOn(PlatformPeg, "get").mockReturnValue({
-        overrideBrowserShortcuts: () => false,
-    } as unknown as BasePlatform);
-    useMockedCalls();
-
-    const renderRoomTile = (): RenderResult => {
-        return render(
-            <SDKContext.Provider value={sdkContext}>
-                <RoomTile
-                    room={room}
-                    showMessagePreview={showMessagePreview}
-                    isMinimized={false}
-                    tag={DefaultTagID.Untagged}
-                />
-            </SDKContext.Provider>,
-        );
-    };
-
-    let client: Mocked<MatrixClient>;
-    let room: Room;
-    let sdkContext: TestSdkContext;
-    let showMessagePreview = false;
-
-    filterConsole(
-        // irrelevant for this test
-        "Room !1:example.org does not have an m.room.create event",
-    );
-
-    const addMessageToRoom = (ts: number) => {
-        const message = mkMessage({
-            event: true,
-            room: room.roomId,
-            msg: "test message",
-            user: client.getSafeUserId(),
-            ts,
-        });
-
-        room.timeline.push(message);
-    };
-
-    const addThreadMessageToRoom = (ts: number) => {
-        const message = mkMessage({
-            event: true,
-            room: room.roomId,
-            msg: "test thread reply",
-            user: client.getSafeUserId(),
-            ts,
-        });
-
-        // Mock thread reply for tests.
-        jest.spyOn(room, "getThreads").mockReturnValue([
-            // @ts-ignore
-            {
-                lastReply: () => message,
-                timeline: [],
-            } as Thread,
-        ]);
-    };
-
-    beforeEach(() => {
-        useMockMediaDevices();
-        sdkContext = new TestSdkContext();
-
-        client = mocked(stubClient());
-        sdkContext.client = client;
-        DMRoomMap.makeShared(client);
-
-        room = new Room("!1:example.org", client, "@alice:example.org", {
-            pendingEventOrdering: PendingEventOrdering.Detached,
-        });
-
-        client.getRoom.mockImplementation((roomId) => (roomId === room.roomId ? room : null));
-        client.getRooms.mockReturnValue([room]);
-        client.reEmitter.reEmit(room, [RoomStateEvent.Events]);
-    });
-
-    afterEach(() => {
-        // @ts-ignore
-        MessagePreviewStore.instance.previews = new Map<string, Map<TagID | TAG_ANY, MessagePreview | null>>();
-        jest.clearAllMocks();
-    });
-
-    describe("when message previews are not enabled", () => {
-        it("should render the room", () => {
-            mocked(shouldShowComponent).mockReturnValue(true);
-            const { container } = renderRoomTile();
-            expect(container).toMatchSnapshot();
-            expect(container.querySelector(".mx_RoomTile_sticky")).not.toBeInTheDocument();
-        });
-
-        it("does not render the room options context menu when UIComponent customisations disable room options", () => {
-            mocked(shouldShowComponent).mockReturnValue(false);
-            renderRoomTile();
-            expect(shouldShowComponent).toHaveBeenCalledWith(UIComponent.RoomOptionsMenu);
-            expect(screen.queryByRole("button", { name: "Room options" })).not.toBeInTheDocument();
-        });
-
-        it("renders the room options context menu when UIComponent customisations enable room options", () => {
-            mocked(shouldShowComponent).mockReturnValue(true);
-            renderRoomTile();
-            expect(shouldShowComponent).toHaveBeenCalledWith(UIComponent.RoomOptionsMenu);
-            expect(screen.queryByRole("button", { name: "Room options" })).toBeInTheDocument();
-        });
-
-        it("does not render the room options context menu when knocked to the room", () => {
-            jest.spyOn(SettingsStore, "getValue").mockImplementation((name) => {
-                return name === "feature_ask_to_join";
-            });
-            mocked(shouldShowComponent).mockReturnValue(true);
-            jest.spyOn(room, "getMyMembership").mockReturnValue(KnownMembership.Knock);
-            const { container } = renderRoomTile();
-            expect(container.querySelector(".mx_RoomTile_sticky")).toBeInTheDocument();
-            expect(screen.queryByRole("button", { name: "Room options" })).not.toBeInTheDocument();
-        });
-
-        it("does not render the room options context menu when knock has been denied", () => {
-            jest.spyOn(SettingsStore, "getValue").mockImplementation((name) => {
-                return name === "feature_ask_to_join";
-            });
-            mocked(shouldShowComponent).mockReturnValue(true);
-            const roomMember = mkRoomMember(
-                room.roomId,
-                MatrixClientPeg.get()!.getSafeUserId(),
-                KnownMembership.Leave,
-                true,
-                {
-                    membership: KnownMembership.Knock,
-                },
-            );
-            jest.spyOn(room, "getMember").mockReturnValue(roomMember);
-            const { container } = renderRoomTile();
-            expect(container.querySelector(".mx_RoomTile_sticky")).toBeInTheDocument();
-            expect(screen.queryByRole("button", { name: "Room options" })).not.toBeInTheDocument();
-        });
-
-        describe("when a call starts", () => {
-            let call: MockedCall;
-            let widget: Widget;
-
-            beforeEach(() => {
-                setupAsyncStoreWithClient(CallStore.instance, client);
-                setupAsyncStoreWithClient(WidgetMessagingStore.instance, client);
-
-                MockedCall.create(room, "1");
-                const maybeCall = CallStore.instance.getCall(room.roomId);
-                if (!(maybeCall instanceof MockedCall)) throw new Error("Failed to create call");
-                call = maybeCall;
-
-                widget = new Widget(call.widget);
-                WidgetMessagingStore.instance.storeMessaging(widget, room.roomId, {
-                    stop: () => {},
-                } as unknown as WidgetMessaging);
-            });
-
-            afterEach(() => {
-                call.destroy();
-                client.reEmitter.stopReEmitting(room, [RoomStateEvent.Events]);
-                WidgetMessagingStore.instance.stopMessaging(widget, room.roomId);
-            });
-
-            it("tracks connection state", async () => {
-                renderRoomTile();
-                screen.getByText("Video");
-                act(() => call.setConnectionState(ConnectionState.Connected));
-                screen.getByText("Joined");
-                await act(() => call.disconnect());
-                screen.getByText("Video");
-            });
-
-            it("tracks participants", () => {
-                renderRoomTile();
-                const alice: [RoomMember, Set<string>] = [
-                    mkRoomMember(room.roomId, "@alice:example.org"),
-                    new Set(["a"]),
-                ];
-                const bob: [RoomMember, Set<string>] = [
-                    mkRoomMember(room.roomId, "@bob:example.org"),
-                    new Set(["b1", "b2"]),
-                ];
-                const carol: [RoomMember, Set<string>] = [
-                    mkRoomMember(room.roomId, "@carol:example.org"),
-                    new Set(["c"]),
-                ];
-
-                expect(screen.queryByLabelText(/participant/)).toBe(null);
-
-                act(() => {
-                    call.participants = new Map([alice]);
-                });
-                expect(screen.getByLabelText("1 person joined").textContent).toBe("1");
-
-                act(() => {
-                    call.participants = new Map([alice, bob, carol]);
-                });
-                expect(screen.getByLabelText("4 people joined").textContent).toBe("4");
-
-                act(() => {
-                    call.participants = new Map();
-                });
-                expect(screen.queryByLabelText(/participant/)).toBe(null);
-            });
-        });
-    });
-
-    describe("when message previews are enabled", () => {
-        beforeEach(() => {
-            showMessagePreview = true;
-        });
-
-        it("should render a room without a message as expected", async () => {
-            const renderResult = renderRoomTile();
-            // flush promises here because the preview is created asynchronously
-            await flushPromises();
-            expect(renderResult.asFragment()).toMatchSnapshot();
-        });
-
-        describe("and there is a message in the room", () => {
-            beforeEach(() => {
-                addMessageToRoom(23);
-            });
-
-            it("should render as expected", async () => {
-                const renderResult = renderRoomTile();
-                expect(await screen.findByText("test message")).toBeInTheDocument();
-                expect(renderResult.asFragment()).toMatchSnapshot();
-            });
-        });
-
-        describe("and there is a message in a thread", () => {
-            beforeEach(() => {
-                addThreadMessageToRoom(23);
-            });
-
-            it("should render as expected", async () => {
-                const renderResult = renderRoomTile();
-                expect(await screen.findByText("test thread reply")).toBeInTheDocument();
-                expect(renderResult.asFragment()).toMatchSnapshot();
-            });
-        });
-
-        describe("and there is a message and a thread without a reply", () => {
-            beforeEach(() => {
-                addMessageToRoom(23);
-
-                // Mock thread reply for tests.
-                jest.spyOn(room, "getThreads").mockReturnValue([
-                    // @ts-ignore
-                    {
-                        lastReply: () => null,
-                        timeline: [],
-                        findEventById: () => {},
-                    } as Thread,
-                ]);
-            });
-
-            it("should render the message preview", async () => {
-                renderRoomTile();
-                expect(await screen.findByText("test message")).toBeInTheDocument();
-            });
-        });
-    });
-});
diff --git a/apps/web/test/unit-tests/components/views/rooms/SearchResultTile-test.tsx b/apps/web/test/unit-tests/components/views/rooms/SearchResultTile-test.tsx
index a605650269..085abab201 100644
--- a/apps/web/test/unit-tests/components/views/rooms/SearchResultTile-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/SearchResultTile-test.tsx
@@ -10,9 +10,10 @@ import React from "react";
 import { MatrixEvent, Room, EventType } from "matrix-js-sdk/src/matrix";
 import { render, type RenderResult } from "jest-matrix-react";
 
-import { stubClient, withClientContextRenderOptions } from "../../../../test-utils";
+import { clientAndSDKContextRenderOptions, stubClient } from "../../../../test-utils";
 import SearchResultTile from "../../../../../src/components/views/rooms/SearchResultTile";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
+import { SDKContextClass } from "../../../../../src/contexts/SDKContextClass.ts";
 
 const ROOM_ID = "!qPewotXpIctQySfjSy:localhost";
 
@@ -30,7 +31,7 @@ describe("SearchResultTile", () => {
     function renderComponent(props: Partial<Props>): RenderResult {
         return render(
             <SearchResultTile timeline={[]} ourEventsIndexes={[1]} {...props} />,
-            withClientContextRenderOptions(MatrixClientPeg.safeGet()),
+            clientAndSDKContextRenderOptions(MatrixClientPeg.safeGet(), SDKContextClass.instance),
         );
     }
 
diff --git a/apps/web/test/unit-tests/components/views/rooms/SendMessageComposer-test.tsx b/apps/web/test/unit-tests/components/views/rooms/SendMessageComposer-test.tsx
index c6e5109406..b1f33d8d63 100644
--- a/apps/web/test/unit-tests/components/views/rooms/SendMessageComposer-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/SendMessageComposer-test.tsx
@@ -17,7 +17,11 @@ import SendMessageComposer, {
     isQuickReaction,
 } from "../../../../../src/components/views/rooms/SendMessageComposer";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
-import { type RoomContextType, TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
+import {
+    type RoomContextType,
+    TimelineRenderingType,
+    MainSplitContentType,
+} from "../../../../../src/contexts/RoomContext";
 import EditorModel from "../../../../../src/editor/model";
 import { createPartCreator } from "../../../editor/mock";
 import { createTestClient, mkEvent, mkStubRoom, stubClient } from "../../../../test-utils";
@@ -25,12 +29,14 @@ import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
 import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
 import DocumentOffset from "../../../../../src/editor/offset";
 import { Layout } from "../../../../../src/settings/enums/Layout";
-import { MainSplitContentType } from "../../../../../src/components/structures/RoomView";
 import { mockPlatformPeg } from "../../../../test-utils/platform";
 import { doMaybeLocalRoomAction } from "../../../../../src/utils/local-room";
 import { addTextToComposer } from "../../../../test-utils/composer";
 import { ScopedRoomContextProvider } from "../../../../../src/contexts/ScopedRoomContext.tsx";
-import { SdkContextClass } from "../../../../../src/contexts/SDKContext.ts";
+import { SDKContextClass } from "../../../../../src/contexts/SDKContextClass";
+import { RoomUploadContextProvider } from "../../../../../src/viewmodels/room/RoomUploadViewModel.tsx";
+import { MessageComposerUrlPreviewViewModel } from "../../../../../src/viewmodels/composer/MessageComposerUrlPreviewViewModel.ts";
+import { SDKContext } from "../../../../../src/contexts/SDKContext.ts";
 
 jest.mock("../../../../../src/utils/local-room", () => ({
     doMaybeLocalRoomAction: jest.fn(),
@@ -38,7 +44,7 @@ jest.mock("../../../../../src/utils/local-room", () => ({
 
 describe("<SendMessageComposer/>", () => {
     const defaultRoomContext: RoomContextType = {
-        roomViewStore: SdkContextClass.instance.roomViewStore,
+        roomViewStore: SDKContextClass.instance.roomViewStore,
         roomLoading: true,
         peekLoading: false,
         shouldPeek: true,
@@ -181,19 +187,31 @@ describe("<SendMessageComposer/>", () => {
             spyDispatcher.mockReset();
         });
 
+        const urlPreviewVm = new MessageComposerUrlPreviewViewModel({
+            client: mockClient,
+            visible: false,
+            showTooltips: false,
+            urlPreviewBundle: false,
+        });
         const defaultProps = {
             room: mockRoom,
             toggleStickerPickerOpen: jest.fn(),
         };
         const getRawComponent = (props = {}, roomContext = defaultRoomContext, client = mockClient) => (
             <MatrixClientContext.Provider value={client}>
-                <ScopedRoomContextProvider {...roomContext}>
-                    <SendMessageComposer {...defaultProps} {...props} />
+                <ScopedRoomContextProvider room={mockRoom} {...roomContext}>
+                    <RoomUploadContextProvider>
+                        <SendMessageComposer {...defaultProps} {...props} urlPreviewVm={urlPreviewVm} />
+                    </RoomUploadContextProvider>
                 </ScopedRoomContextProvider>
             </MatrixClientContext.Provider>
         );
         const getComponent = (props = {}, roomContext = defaultRoomContext, client = mockClient) => {
-            return render(getRawComponent(props, roomContext, client));
+            return render(getRawComponent(props, roomContext, client), {
+                wrapper: ({ children }) => (
+                    <SDKContext.Provider value={SDKContextClass.instance}>{children}</SDKContext.Provider>
+                ),
+            });
         };
 
         it("renders text and placeholder correctly", () => {
@@ -428,6 +446,13 @@ describe("<SendMessageComposer/>", () => {
 
     it("should call prepareToEncrypt when the user is typing", async () => {
         const cli = stubClient();
+        const urlPreviewVm = new MessageComposerUrlPreviewViewModel({
+            client: cli,
+            visible: false,
+            showTooltips: false,
+            urlPreviewBundle: false,
+        });
+
         cli.isRoomEncrypted = jest.fn().mockReturnValue(true);
         const room = mkStubRoom("!roomId:server", "Room", cli);
 
@@ -435,8 +460,21 @@ describe("<SendMessageComposer/>", () => {
 
         const { container } = render(
             <MatrixClientContext.Provider value={cli}>
-                <SendMessageComposer room={room} toggleStickerPickerOpen={jest.fn()} />
+                <ScopedRoomContextProvider {...({ room } as unknown as RoomContextType)}>
+                    <RoomUploadContextProvider>
+                        <SendMessageComposer
+                            room={room}
+                            toggleStickerPickerOpen={jest.fn()}
+                            urlPreviewVm={urlPreviewVm}
+                        />
+                    </RoomUploadContextProvider>
+                </ScopedRoomContextProvider>
             </MatrixClientContext.Provider>,
+            {
+                wrapper: ({ children }) => (
+                    <SDKContext.Provider value={SDKContextClass.instance}>{children}</SDKContext.Provider>
+                ),
+            },
         );
 
         const composer = container.querySelector<HTMLDivElement>(".mx_BasicMessageComposer_input")!;
diff --git a/apps/web/test/unit-tests/components/views/rooms/ThirdPartyMemberInfo-test.tsx b/apps/web/test/unit-tests/components/views/rooms/ThirdPartyMemberInfo-test.tsx
index 147e412d8f..bd83665d45 100644
--- a/apps/web/test/unit-tests/components/views/rooms/ThirdPartyMemberInfo-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/ThirdPartyMemberInfo-test.tsx
@@ -11,7 +11,12 @@ import { render, screen } from "jest-matrix-react";
 import { EventType, type IEvent, MatrixEvent, Room, RoomMember } from "matrix-js-sdk/src/matrix";
 
 import ThirdPartyMemberInfo from "../../../../../src/components/views/rooms/ThirdPartyMemberInfo";
-import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../../test-utils";
+import {
+    clientAndSDKContextRenderOptions,
+    getMockClientWithEventEmitter,
+    mockClientMethodsUser,
+} from "../../../../test-utils";
+import { SDKContextClass } from "../../../../../src/contexts/SDKContextClass.ts";
 
 describe("<ThirdPartyMemberInfo />", () => {
     const userId = "@alice:server.org";
@@ -37,7 +42,11 @@ describe("<ThirdPartyMemberInfo />", () => {
         });
     const defaultEvent = makeInviteEvent();
 
-    const getComponent = (event: MatrixEvent = defaultEvent) => render(<ThirdPartyMemberInfo event={event} />);
+    const getComponent = (event: MatrixEvent = defaultEvent) =>
+        render(
+            <ThirdPartyMemberInfo event={event} />,
+            clientAndSDKContextRenderOptions(mockClient, SDKContextClass.instance),
+        );
     const room = new Room(roomId, mockClient, userId);
     const aliceMember = new RoomMember(roomId, userId);
     aliceMember.name = "Alice DisplayName";
diff --git a/apps/web/test/unit-tests/components/views/rooms/__snapshots__/ExtraTile-test.tsx.snap b/apps/web/test/unit-tests/components/views/rooms/__snapshots__/ExtraTile-test.tsx.snap
deleted file mode 100644
index e489a11bd5..0000000000
--- a/apps/web/test/unit-tests/components/views/rooms/__snapshots__/ExtraTile-test.tsx.snap
+++ /dev/null
@@ -1,39 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`ExtraTile renders 1`] = `
-<DocumentFragment>
-  <div
-    aria-label="test"
-    class="mx_AccessibleButton mx_ExtraTile mx_RoomTile"
-    role="treeitem"
-    tabindex="-1"
-  >
-    <div
-      class="mx_RoomTile_avatarContainer"
-    />
-    <div
-      class="mx_RoomTile_details"
-    >
-      <div
-        class="mx_RoomTile_primaryDetails"
-      >
-        <div
-          class="mx_RoomTile_titleContainer"
-        >
-          <div
-            class="mx_RoomTile_title"
-            dir="auto"
-            tabindex="-1"
-            title="test"
-          >
-            test
-          </div>
-        </div>
-        <div
-          class="mx_RoomTile_badgeContainer"
-        />
-      </div>
-    </div>
-  </div>
-</DocumentFragment>
-`;
diff --git a/apps/web/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap b/apps/web/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
index 8dab86ae11..5451fba54d 100644
--- a/apps/web/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
@@ -25,13 +25,13 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
         class="mx_PinnedEventTile_top"
       >
         <span
-          aria-labelledby="_r_1_"
+          aria-labelledby="react-use-id-1"
           class="mx_PinnedEventTile_sender mx_Username_color2"
         >
           @alice:server.org
         </span>
         <button
-          aria-describedby="_r_0_"
+          aria-describedby="react-use-id-2"
           aria-disabled="false"
           aria-expanded="false"
           aria-haspopup="menu"
@@ -39,7 +39,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
           class="_icon-button_1215g_8"
           data-kind="primary"
           data-state="closed"
-          id="radix-_r_6_"
+          id="radix-react-use-id-3"
           role="button"
           style="--cpd-icon-button-size: 24px;"
           tabindex="0"
@@ -64,8 +64,8 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
         </button>
       </div>
       <div
-        class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
-        id="_r_0_"
+        class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"
+        id="react-use-id-2"
       >
         <div
           class="mx_EventTile_body translate"
@@ -104,13 +104,13 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
         class="mx_PinnedEventTile_top"
       >
         <span
-          aria-labelledby="_r_a_"
+          aria-labelledby="react-use-id-1"
           class="mx_PinnedEventTile_sender mx_Username_color2"
         >
           @alice:server.org
         </span>
         <button
-          aria-describedby="_r_9_"
+          aria-describedby="react-use-id-2"
           aria-disabled="false"
           aria-expanded="false"
           aria-haspopup="menu"
@@ -118,7 +118,7 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
           class="_icon-button_1215g_8"
           data-kind="primary"
           data-state="closed"
-          id="radix-_r_f_"
+          id="radix-react-use-id-3"
           role="button"
           style="--cpd-icon-button-size: 24px;"
           tabindex="0"
@@ -143,8 +143,8 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
         </button>
       </div>
       <div
-        class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
-        id="_r_9_"
+        class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"
+        id="react-use-id-2"
       >
         <div
           class="mx_EventTile_body translate"
@@ -187,16 +187,16 @@ exports[`<PinnedEventTile /> should render pinned event with thread info 1`] = `
 exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
 <div
   aria-label="Open menu"
-  aria-labelledby="radix-_r_14_"
+  aria-labelledby="radix-react-use-id-1"
   aria-orientation="vertical"
-  class="_menu_1kl3y_8"
+  class="_menu_so651_8"
   data-align="start"
   data-orientation="vertical"
   data-radix-menu-content=""
   data-side="right"
   data-state="open"
   dir="ltr"
-  id="radix-_r_15_"
+  id="radix-react-use-id-2"
   role="menu"
   style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
   tabindex="-1"
@@ -378,16 +378,16 @@ exports[`<PinnedEventTile /> should render the menu with all the options 1`] = `
 exports[`<PinnedEventTile /> should render the menu without unpin and delete 1`] = `
 <div
   aria-label="Open menu"
-  aria-labelledby="radix-_r_o_"
+  aria-labelledby="radix-react-use-id-1"
   aria-orientation="vertical"
-  class="_menu_1kl3y_8"
+  class="_menu_so651_8"
   data-align="start"
   data-orientation="vertical"
   data-radix-menu-content=""
   data-side="right"
   data-state="open"
   dir="ltr"
-  id="radix-_r_p_"
+  id="radix-react-use-id-2"
   role="menu"
   style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
   tabindex="-1"
diff --git a/apps/web/test/unit-tests/components/views/rooms/__snapshots__/PinnedMessageBanner-test.tsx.snap b/apps/web/test/unit-tests/components/views/rooms/__snapshots__/PinnedMessageBanner-test.tsx.snap
index 7c810d6422..f227824dfd 100644
--- a/apps/web/test/unit-tests/components/views/rooms/__snapshots__/PinnedMessageBanner-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/rooms/__snapshots__/PinnedMessageBanner-test.tsx.snap
@@ -10,14 +10,14 @@ exports[`<PinnedMessageBanner /> should display display a poll event 1`] = `
     role="region"
   >
     <button
-      aria-describedby="_r_a_"
+      aria-describedby="react-use-id-1"
       aria-label="View the pinned message in the timeline and the newest pinned message here"
       class="mx_PinnedMessageBanner_main"
       type="button"
     >
       <div
         class="mx_PinnedMessageBanner_content"
-        id="_r_a_"
+        id="react-use-id-1"
       >
         <div
           class="mx_PinnedMessageBanner_Indicators"
@@ -40,15 +40,13 @@ exports[`<PinnedMessageBanner /> should display display a poll event 1`] = `
           />
         </svg>
         <span
-          class="mx_EventPreview mx_PinnedMessageBanner_message"
+          class="mx_EventPreview _eventPreview_w0s50_8 mx_PinnedMessageBanner_message"
           data-testid="banner-message"
         >
           <span>
-            <span
-              class="mx_EventPreview_prefix"
-            >
+            <strong>
               Poll:
-            </span>
+            </strong>
              Alice?
           </span>
         </span>
@@ -68,14 +66,14 @@ exports[`<PinnedMessageBanner /> should display the last message when the pinned
     role="region"
   >
     <button
-      aria-describedby="_r_4_"
+      aria-describedby="react-use-id-1"
       aria-label="View the pinned message in the timeline and the newest pinned message here"
       class="mx_PinnedMessageBanner_main"
       type="button"
     >
       <div
         class="mx_PinnedMessageBanner_content"
-        id="_r_4_"
+        id="react-use-id-1"
       >
         <div
           class="mx_PinnedMessageBanner_Indicators"
@@ -119,9 +117,8 @@ exports[`<PinnedMessageBanner /> should display the last message when the pinned
           </span>
         </div>
         <span
-          class="mx_EventPreview mx_PinnedMessageBanner_message"
+          class="mx_EventPreview _eventPreview_w0s50_8 mx_PinnedMessageBanner_message"
           data-testid="banner-message"
-          title="Third pinned message"
         >
           Third pinned message
         </span>
@@ -150,14 +147,14 @@ exports[`<PinnedMessageBanner /> should display the m.audio event type 1`] = `
     role="region"
   >
     <button
-      aria-describedby="_r_7_"
+      aria-describedby="react-use-id-1"
       aria-label="View the pinned message in the timeline and the newest pinned message here"
       class="mx_PinnedMessageBanner_main"
       type="button"
     >
       <div
         class="mx_PinnedMessageBanner_content"
-        id="_r_7_"
+        id="react-use-id-1"
       >
         <div
           class="mx_PinnedMessageBanner_Indicators"
@@ -180,15 +177,13 @@ exports[`<PinnedMessageBanner /> should display the m.audio event type 1`] = `
           />
         </svg>
         <span
-          class="mx_EventPreview mx_PinnedMessageBanner_message"
+          class="mx_EventPreview _eventPreview_w0s50_8 mx_PinnedMessageBanner_message"
           data-testid="banner-message"
         >
           <span>
-            <span
-              class="mx_EventPreview_prefix"
-            >
+            <strong>
               Audio:
-            </span>
+            </strong>
              Message with m.audio type
           </span>
         </span>
@@ -208,14 +203,14 @@ exports[`<PinnedMessageBanner /> should display the m.file event type 1`] = `
     role="region"
   >
     <button
-      aria-describedby="_r_6_"
+      aria-describedby="react-use-id-1"
       aria-label="View the pinned message in the timeline and the newest pinned message here"
       class="mx_PinnedMessageBanner_main"
       type="button"
     >
       <div
         class="mx_PinnedMessageBanner_content"
-        id="_r_6_"
+        id="react-use-id-1"
       >
         <div
           class="mx_PinnedMessageBanner_Indicators"
@@ -238,15 +233,13 @@ exports[`<PinnedMessageBanner /> should display the m.file event type 1`] = `
           />
         </svg>
         <span
-          class="mx_EventPreview mx_PinnedMessageBanner_message"
+          class="mx_EventPreview _eventPreview_w0s50_8 mx_PinnedMessageBanner_message"
           data-testid="banner-message"
         >
           <span>
-            <span
-              class="mx_EventPreview_prefix"
-            >
+            <strong>
               File:
-            </span>
+            </strong>
              Message with m.file type
           </span>
         </span>
@@ -266,14 +259,14 @@ exports[`<PinnedMessageBanner /> should display the m.image event type 1`] = `
     role="region"
   >
     <button
-      aria-describedby="_r_9_"
+      aria-describedby="react-use-id-1"
       aria-label="View the pinned message in the timeline and the newest pinned message here"
       class="mx_PinnedMessageBanner_main"
       type="button"
     >
       <div
         class="mx_PinnedMessageBanner_content"
-        id="_r_9_"
+        id="react-use-id-1"
       >
         <div
           class="mx_PinnedMessageBanner_Indicators"
@@ -296,15 +289,13 @@ exports[`<PinnedMessageBanner /> should display the m.image event type 1`] = `
           />
         </svg>
         <span
-          class="mx_EventPreview mx_PinnedMessageBanner_message"
+          class="mx_EventPreview _eventPreview_w0s50_8 mx_PinnedMessageBanner_message"
           data-testid="banner-message"
         >
           <span>
-            <span
-              class="mx_EventPreview_prefix"
-            >
+            <strong>
               Image:
-            </span>
+            </strong>
              Message with m.image type
           </span>
         </span>
@@ -324,14 +315,14 @@ exports[`<PinnedMessageBanner /> should display the m.video event type 1`] = `
     role="region"
   >
     <button
-      aria-describedby="_r_8_"
+      aria-describedby="react-use-id-1"
       aria-label="View the pinned message in the timeline and the newest pinned message here"
       class="mx_PinnedMessageBanner_main"
       type="button"
     >
       <div
         class="mx_PinnedMessageBanner_content"
-        id="_r_8_"
+        id="react-use-id-1"
       >
         <div
           class="mx_PinnedMessageBanner_Indicators"
@@ -354,15 +345,13 @@ exports[`<PinnedMessageBanner /> should display the m.video event type 1`] = `
           />
         </svg>
         <span
-          class="mx_EventPreview mx_PinnedMessageBanner_message"
+          class="mx_EventPreview _eventPreview_w0s50_8 mx_PinnedMessageBanner_message"
           data-testid="banner-message"
         >
           <span>
-            <span
-              class="mx_EventPreview_prefix"
-            >
+            <strong>
               Video:
-            </span>
+            </strong>
              Message with m.video type
           </span>
         </span>
@@ -382,14 +371,14 @@ exports[`<PinnedMessageBanner /> should render 2 pinned event 1`] = `
     role="region"
   >
     <button
-      aria-describedby="_r_2_"
+      aria-describedby="react-use-id-1"
       aria-label="View the pinned message in the timeline and the newest pinned message here"
       class="mx_PinnedMessageBanner_main"
       type="button"
     >
       <div
         class="mx_PinnedMessageBanner_content"
-        id="_r_2_"
+        id="react-use-id-1"
       >
         <div
           class="mx_PinnedMessageBanner_Indicators"
@@ -429,9 +418,8 @@ exports[`<PinnedMessageBanner /> should render 2 pinned event 1`] = `
           </span>
         </div>
         <span
-          class="mx_EventPreview mx_PinnedMessageBanner_message"
+          class="mx_EventPreview _eventPreview_w0s50_8 mx_PinnedMessageBanner_message"
           data-testid="banner-message"
-          title="Second pinned message"
         >
           Second pinned message
         </span>
@@ -460,14 +448,14 @@ exports[`<PinnedMessageBanner /> should render 4 pinned event 1`] = `
     role="region"
   >
     <button
-      aria-describedby="_r_3_"
+      aria-describedby="react-use-id-1"
       aria-label="View the pinned message in the timeline and the newest pinned message here"
       class="mx_PinnedMessageBanner_main"
       type="button"
     >
       <div
         class="mx_PinnedMessageBanner_content"
-        id="_r_3_"
+        id="react-use-id-1"
       >
         <div
           class="mx_PinnedMessageBanner_Indicators"
@@ -511,9 +499,8 @@ exports[`<PinnedMessageBanner /> should render 4 pinned event 1`] = `
           </span>
         </div>
         <span
-          class="mx_EventPreview mx_PinnedMessageBanner_message"
+          class="mx_EventPreview _eventPreview_w0s50_8 mx_PinnedMessageBanner_message"
           data-testid="banner-message"
-          title="Fourth pinned message"
         >
           Fourth pinned message
         </span>
@@ -542,14 +529,14 @@ exports[`<PinnedMessageBanner /> should render a single pinned event 1`] = `
     role="region"
   >
     <button
-      aria-describedby="_r_1_"
+      aria-describedby="react-use-id-1"
       aria-label="View the pinned message in the timeline and the newest pinned message here"
       class="mx_PinnedMessageBanner_main"
       type="button"
     >
       <div
         class="mx_PinnedMessageBanner_content"
-        id="_r_1_"
+        id="react-use-id-1"
       >
         <div
           class="mx_PinnedMessageBanner_Indicators"
@@ -572,9 +559,8 @@ exports[`<PinnedMessageBanner /> should render a single pinned event 1`] = `
           />
         </svg>
         <span
-          class="mx_EventPreview mx_PinnedMessageBanner_message"
+          class="mx_EventPreview _eventPreview_w0s50_8 mx_PinnedMessageBanner_message"
           data-testid="banner-message"
-          title="First pinned message"
         >
           First pinned message
         </span>
diff --git a/apps/web/test/unit-tests/components/views/rooms/__snapshots__/ReadReceiptGroup-test.tsx.snap b/apps/web/test/unit-tests/components/views/rooms/__snapshots__/ReadReceiptGroup-test.tsx.snap
index dacf39e080..df84c2e715 100644
--- a/apps/web/test/unit-tests/components/views/rooms/__snapshots__/ReadReceiptGroup-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/rooms/__snapshots__/ReadReceiptGroup-test.tsx.snap
@@ -4,7 +4,7 @@ exports[`ReadReceiptGroup <ReadReceiptPerson /> should display a tooltip 1`] = `
 <div
   class="_tooltip_1nqnq_8"
   data-floating-ui-focusable=""
-  id="_r_6_"
+  id="react-use-id-1"
   role="tooltip"
   style="position: absolute; left: 0px; top: 0px; transform: translate(5px, -6px);"
   tabindex="-1"
@@ -22,7 +22,7 @@ exports[`ReadReceiptGroup <ReadReceiptPerson /> should display a tooltip 1`] = `
       stroke="none"
     />
     <clippath
-      id="_r_9_"
+      id="react-use-id-2"
     >
       <rect
         height="10"
@@ -33,13 +33,13 @@ exports[`ReadReceiptGroup <ReadReceiptPerson /> should display a tooltip 1`] = `
     </clippath>
   </svg>
   <span
-    id="_r_4_"
+    id="react-use-id-3"
   >
     Alice
   </span>
   <span
     class="_caption_1nqnq_28 cpd-theme-dark"
-    id="_r_5_"
+    id="react-use-id-4"
   >
     @alice:example.org
   </span>
diff --git a/apps/web/test/unit-tests/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap b/apps/web/test/unit-tests/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap
deleted file mode 100644
index bc712380a3..0000000000
--- a/apps/web/test/unit-tests/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap
+++ /dev/null
@@ -1,378 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`RoomTile when message previews are enabled and there is a message in a thread should render as expected 1`] = `
-<DocumentFragment>
-  <div
-    aria-describedby="mx_RoomTile_messagePreview_!1:example.org"
-    aria-label="!1:​example.org"
-    aria-selected="false"
-    class="mx_AccessibleButton mx_RoomTile"
-    role="treeitem"
-    tabindex="-1"
-  >
-    <div
-      class="mx_DecoratedRoomAvatar"
-    >
-      <span
-        class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
-        data-color="3"
-        data-testid="avatar-img"
-        data-type="round"
-        role="presentation"
-        style="--cpd-avatar-size: 32px;"
-      >
-        !
-      </span>
-    </div>
-    <div
-      class="mx_RoomTile_titleContainer"
-    >
-      <div
-        class="mx_RoomTile_title mx_RoomTile_titleWithSubtitle"
-        tabindex="-1"
-        title="!1:​example.org"
-      >
-        <span
-          dir="auto"
-        >
-          !1:​example.org
-        </span>
-      </div>
-      <div
-        class="mx_RoomTile_subtitle"
-        id="mx_RoomTile_messagePreview_!1:example.org"
-        title="test thread reply"
-      >
-        <span
-          class="mx_RoomTile_subtitle_text"
-        >
-          test thread reply
-        </span>
-      </div>
-    </div>
-    <div
-      aria-hidden="true"
-      class="mx_RoomTile_badgeContainer"
-    />
-    <div
-      aria-expanded="false"
-      aria-haspopup="true"
-      aria-label="Room options"
-      class="mx_AccessibleButton mx_RoomTile_menuButton"
-      role="button"
-      tabindex="0"
-    >
-      <svg
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 24 24"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-        />
-      </svg>
-    </div>
-    <div
-      aria-expanded="false"
-      aria-haspopup="true"
-      aria-label="Notification options"
-      class="mx_AccessibleButton mx_RoomTile_notificationsButton"
-      role="button"
-      tabindex="-1"
-    >
-      <svg
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 24 24"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-        />
-      </svg>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`RoomTile when message previews are enabled and there is a message in the room should render as expected 1`] = `
-<DocumentFragment>
-  <div
-    aria-describedby="mx_RoomTile_messagePreview_!1:example.org"
-    aria-label="!1:​example.org Unread messages."
-    aria-selected="false"
-    class="mx_AccessibleButton mx_RoomTile"
-    role="treeitem"
-    tabindex="-1"
-  >
-    <div
-      class="mx_DecoratedRoomAvatar"
-    >
-      <span
-        class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
-        data-color="3"
-        data-testid="avatar-img"
-        data-type="round"
-        role="presentation"
-        style="--cpd-avatar-size: 32px;"
-      >
-        !
-      </span>
-    </div>
-    <div
-      class="mx_RoomTile_titleContainer"
-    >
-      <div
-        class="mx_RoomTile_title mx_RoomTile_titleWithSubtitle mx_RoomTile_titleHasUnreadEvents"
-        tabindex="-1"
-        title="!1:​example.org"
-      >
-        <span
-          dir="auto"
-        >
-          !1:​example.org
-        </span>
-      </div>
-      <div
-        class="mx_RoomTile_subtitle"
-        id="mx_RoomTile_messagePreview_!1:example.org"
-        title="test message"
-      >
-        <span
-          class="mx_RoomTile_subtitle_text"
-        >
-          test message
-        </span>
-      </div>
-    </div>
-    <div
-      aria-hidden="true"
-      class="mx_RoomTile_badgeContainer"
-    >
-      <div
-        class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_dot"
-      >
-        <span
-          class="mx_NotificationBadge_count"
-        />
-      </div>
-    </div>
-    <div
-      aria-expanded="false"
-      aria-haspopup="true"
-      aria-label="Room options"
-      class="mx_AccessibleButton mx_RoomTile_menuButton"
-      role="button"
-      tabindex="0"
-    >
-      <svg
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 24 24"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-        />
-      </svg>
-    </div>
-    <div
-      aria-expanded="false"
-      aria-haspopup="true"
-      aria-label="Notification options"
-      class="mx_AccessibleButton mx_RoomTile_notificationsButton"
-      role="button"
-      tabindex="-1"
-    >
-      <svg
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 24 24"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-        />
-      </svg>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`RoomTile when message previews are enabled should render a room without a message as expected 1`] = `
-<DocumentFragment>
-  <div
-    aria-describedby="mx_RoomTile_messagePreview_!1:example.org"
-    aria-label="!1:​example.org"
-    aria-selected="false"
-    class="mx_AccessibleButton mx_RoomTile"
-    role="treeitem"
-    tabindex="-1"
-  >
-    <div
-      class="mx_DecoratedRoomAvatar"
-    >
-      <span
-        class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
-        data-color="3"
-        data-testid="avatar-img"
-        data-type="round"
-        role="presentation"
-        style="--cpd-avatar-size: 32px;"
-      >
-        !
-      </span>
-    </div>
-    <div
-      class="mx_RoomTile_titleContainer"
-    >
-      <div
-        class="mx_RoomTile_title"
-        tabindex="-1"
-        title="!1:​example.org"
-      >
-        <span
-          dir="auto"
-        >
-          !1:​example.org
-        </span>
-      </div>
-    </div>
-    <div
-      aria-hidden="true"
-      class="mx_RoomTile_badgeContainer"
-    />
-    <div
-      aria-expanded="false"
-      aria-haspopup="true"
-      aria-label="Room options"
-      class="mx_AccessibleButton mx_RoomTile_menuButton"
-      role="button"
-      tabindex="0"
-    >
-      <svg
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 24 24"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-        />
-      </svg>
-    </div>
-    <div
-      aria-expanded="false"
-      aria-haspopup="true"
-      aria-label="Notification options"
-      class="mx_AccessibleButton mx_RoomTile_notificationsButton"
-      role="button"
-      tabindex="-1"
-    >
-      <svg
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 24 24"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-        />
-      </svg>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`RoomTile when message previews are not enabled should render the room 1`] = `
-<div>
-  <div
-    aria-label="!1:​example.org"
-    aria-selected="false"
-    class="mx_AccessibleButton mx_RoomTile"
-    role="treeitem"
-    tabindex="-1"
-  >
-    <div
-      class="mx_DecoratedRoomAvatar"
-    >
-      <span
-        class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55"
-        data-color="3"
-        data-testid="avatar-img"
-        data-type="round"
-        role="presentation"
-        style="--cpd-avatar-size: 32px;"
-      >
-        !
-      </span>
-    </div>
-    <div
-      class="mx_RoomTile_titleContainer"
-    >
-      <div
-        class="mx_RoomTile_title"
-        tabindex="-1"
-        title="!1:​example.org"
-      >
-        <span
-          dir="auto"
-        >
-          !1:​example.org
-        </span>
-      </div>
-    </div>
-    <div
-      aria-hidden="true"
-      class="mx_RoomTile_badgeContainer"
-    />
-    <div
-      aria-expanded="false"
-      aria-haspopup="true"
-      aria-label="Room options"
-      class="mx_AccessibleButton mx_RoomTile_menuButton"
-      role="button"
-      tabindex="0"
-    >
-      <svg
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 24 24"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-        />
-      </svg>
-    </div>
-    <div
-      aria-expanded="false"
-      aria-haspopup="true"
-      aria-label="Notification options"
-      class="mx_AccessibleButton mx_RoomTile_notificationsButton"
-      role="button"
-      tabindex="-1"
-    >
-      <svg
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 24 24"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-        />
-      </svg>
-    </div>
-  </div>
-</div>
-`;
diff --git a/apps/web/test/unit-tests/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap b/apps/web/test/unit-tests/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap
index a9fc15bd85..a8bf5bb2d0 100644
--- a/apps/web/test/unit-tests/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/rooms/__snapshots__/ThirdPartyMemberInfo-test.tsx.snap
@@ -12,6 +12,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite 1`] = `
         class="mx_BaseCard_header_title"
       >
         <p
+          aria-level="1"
           class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
           role="heading"
         >
@@ -19,7 +20,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite 1`] = `
         </p>
       </div>
       <button
-        aria-labelledby="_r_0_"
+        aria-labelledby="react-use-id-1"
         class="_icon-button_1215g_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
@@ -46,7 +47,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite 1`] = `
       </button>
     </div>
     <div
-      class="mx_AutoHideScrollbar"
+      class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar"
       tabindex="-1"
     >
       <div
@@ -58,6 +59,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite 1`] = `
           style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <span
+            aria-level="2"
             class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74"
             role="heading"
           >
@@ -87,6 +89,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite when room in not availabl
         class="mx_BaseCard_header_title"
       >
         <p
+          aria-level="1"
           class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
           role="heading"
         >
@@ -94,7 +97,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite when room in not availabl
         </p>
       </div>
       <button
-        aria-labelledby="_r_6_"
+        aria-labelledby="react-use-id-1"
         class="_icon-button_1215g_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
@@ -121,7 +124,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite when room in not availabl
       </button>
     </div>
     <div
-      class="mx_AutoHideScrollbar"
+      class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar"
       tabindex="-1"
     >
       <div
@@ -133,6 +136,7 @@ exports[`<ThirdPartyMemberInfo /> should render invite when room in not availabl
           style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
         >
           <span
+            aria-level="2"
             class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74"
             role="heading"
           >
diff --git a/apps/web/test/unit-tests/components/views/rooms/memberlist/MemberListHeaderView-test.tsx b/apps/web/test/unit-tests/components/views/rooms/memberlist/MemberListHeaderView-test.ts
similarity index 82%
rename from apps/web/test/unit-tests/components/views/rooms/memberlist/MemberListHeaderView-test.tsx
rename to apps/web/test/unit-tests/components/views/rooms/memberlist/MemberListHeaderView-test.ts
index b9904edf21..18016ceaf7 100644
--- a/apps/web/test/unit-tests/components/views/rooms/memberlist/MemberListHeaderView-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/memberlist/MemberListHeaderView-test.ts
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { act, fireEvent, screen, waitFor } from "jest-matrix-react";
-import { RoomMember, User, RoomEvent } from "matrix-js-sdk/src/matrix";
+import { RoomMember, User, RoomEvent, RoomStateEvent, type RoomState } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { mocked } from "jest-mock";
 
@@ -99,6 +99,26 @@ describe("MemberListHeaderView", () => {
             );
         });
 
+        it("Updates the invite button when a power level change grants invite rights", async () => {
+            const { memberListRoom, client, reRender } = rendered;
+            jest.spyOn(memberListRoom, "getMyMembership").mockReturnValue(KnownMembership.Join);
+            jest.spyOn(memberListRoom, "canInvite").mockReturnValue(false);
+            await reRender();
+            await waitFor(() =>
+                expect(screen.getByRole("button", { name: "Invite" })).toHaveAttribute("aria-disabled", "true"),
+            );
+
+            // Grant the right to invite, and announce it the way a power level change does
+            jest.spyOn(memberListRoom, "canInvite").mockReturnValue(true);
+            act(() => {
+                client.emit(RoomStateEvent.Update, { roomId: memberListRoom.roomId } as RoomState);
+            });
+
+            await waitFor(() =>
+                expect(screen.getByRole("button", { name: "Invite" })).not.toHaveAttribute("aria-disabled", "true"),
+            );
+        });
+
         it("Opens room inviter on button click", async () => {
             const { memberListRoom, reRender } = rendered;
             jest.spyOn(defaultDispatcher, "dispatch");
diff --git a/apps/web/test/unit-tests/components/views/rooms/memberlist/MemberListView-test.tsx b/apps/web/test/unit-tests/components/views/rooms/memberlist/MemberListView-test.ts
similarity index 93%
rename from apps/web/test/unit-tests/components/views/rooms/memberlist/MemberListView-test.tsx
rename to apps/web/test/unit-tests/components/views/rooms/memberlist/MemberListView-test.ts
index bf4f0326d7..1da454ff89 100644
--- a/apps/web/test/unit-tests/components/views/rooms/memberlist/MemberListView-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/memberlist/MemberListView-test.ts
@@ -11,7 +11,7 @@ import { act } from "react";
 import { waitFor, fireEvent } from "jest-matrix-react";
 import { type Room, type RoomMember, MatrixEvent } from "matrix-js-sdk/src/matrix";
 
-import { filterConsole } from "../../../../../test-utils";
+import { filterConsole, mkThirdPartyInviteEvent } from "../../../../../test-utils";
 import { type Rendered, renderMemberList } from "./common";
 
 jest.mock("../../../../../../src/customisations/helpers/UIComponents", () => ({
@@ -262,4 +262,18 @@ describe("MemberListView and MemberlistHeaderView", () => {
             });
         });
     });
+
+    describe("3PID invites", () => {
+        it("does not collapse invites with duplicate display names", async () => {
+            const threePidEvents = [
+                mkThirdPartyInviteEvent("@alice:localhost", "user@example.com", "!room:localhost"),
+                mkThirdPartyInviteEvent("@alice:localhost", "user@example.com", "!room:localhost"),
+            ];
+            const { root } = await renderMemberList(true, undefined, 2, threePidEvents);
+
+            const tiles = root.container.querySelectorAll(".mx_MemberTileView");
+            // 6 joined + 2 3PID invites
+            expect(tiles).toHaveLength(8);
+        });
+    });
 });
diff --git a/apps/web/test/unit-tests/components/views/rooms/memberlist/PresenceIconView-test.tsx b/apps/web/test/unit-tests/components/views/rooms/memberlist/PresenceIconView-test.tsx
index 74c23f2199..4c9714a782 100644
--- a/apps/web/test/unit-tests/components/views/rooms/memberlist/PresenceIconView-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/memberlist/PresenceIconView-test.tsx
@@ -7,7 +7,8 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render } from "jest-matrix-react";
+import { render, waitFor } from "jest-matrix-react";
+import userEvent from "@testing-library/user-event";
 
 import AvatarPresenceIconView from "../../../../../../src/components/views/rooms/MemberList/tiles/common/PresenceIconView";
 
@@ -39,4 +40,24 @@ describe("<PresenceIconView/>", () => {
         expect(container.querySelector(".mx_PresenceIconView_dnd")).toBeDefined();
         expect(container).toMatchSnapshot();
     });
+
+    it("renders the tooltip", async () => {
+        const user = userEvent.setup();
+
+        const { container, asFragment } = render(<AvatarPresenceIconView presenceState="busy" />);
+
+        const presence = container.querySelector(".mx_PresenceIconView")!;
+        expect(presence).toBeVisible();
+        await user.hover(presence!);
+
+        // wait for the tooltip to open
+        const tooltip = await waitFor(() => {
+            const tooltip = document.getElementById(presence.getAttribute("aria-labelledby")!);
+            expect(tooltip).toBeVisible();
+            return tooltip;
+        });
+        expect(tooltip).toHaveTextContent("Busy");
+
+        expect(asFragment()).toMatchSnapshot();
+    });
 });
diff --git a/apps/web/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap b/apps/web/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap
index ba2c0fceb4..592c742886 100644
--- a/apps/web/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap
@@ -6,6 +6,7 @@ exports[`MemberTileView RoomMemberTileView should display an verified E2EIcon wh
     <div
       aria-label="@userId:matrix.org"
       aria-posinset="1"
+      aria-selected="false"
       aria-setsize="1"
       class="mx_AccessibleButton mx_MemberTileView"
       role="option"
@@ -29,7 +30,9 @@ exports[`MemberTileView RoomMemberTileView should display an verified E2EIcon wh
           >
             u
           </span>
-           
+          <div
+            class="mx_MemberTileView_presence"
+          />
         </div>
         <div
           class="mx_MemberTileView_name"
@@ -54,7 +57,7 @@ exports[`MemberTileView RoomMemberTileView should display an verified E2EIcon wh
         class="mx_MemberTileView_right"
       >
         <div
-          aria-labelledby="_r_6_"
+          aria-labelledby="react-use-id-1"
           class="mx_E2EIconView"
         >
           <svg
@@ -82,6 +85,7 @@ exports[`MemberTileView RoomMemberTileView should display an warning E2EIcon whe
     <div
       aria-label="@userId:matrix.org"
       aria-posinset="1"
+      aria-selected="false"
       aria-setsize="1"
       class="mx_AccessibleButton mx_MemberTileView"
       role="option"
@@ -105,7 +109,9 @@ exports[`MemberTileView RoomMemberTileView should display an warning E2EIcon whe
           >
             u
           </span>
-           
+          <div
+            class="mx_MemberTileView_presence"
+          />
         </div>
         <div
           class="mx_MemberTileView_name"
@@ -130,7 +136,7 @@ exports[`MemberTileView RoomMemberTileView should display an warning E2EIcon whe
         class="mx_MemberTileView_right"
       >
         <div
-          aria-labelledby="_r_0_"
+          aria-labelledby="react-use-id-1"
           class="mx_E2EIconView"
         >
           <svg
@@ -158,6 +164,7 @@ exports[`MemberTileView RoomMemberTileView should not display an E2EIcon when th
     <div
       aria-label="@userId:matrix.org"
       aria-posinset="1"
+      aria-selected="false"
       aria-setsize="1"
       class="mx_AccessibleButton mx_MemberTileView"
       role="option"
@@ -181,7 +188,9 @@ exports[`MemberTileView RoomMemberTileView should not display an E2EIcon when th
           >
             u
           </span>
-           
+          <div
+            class="mx_MemberTileView_presence"
+          />
         </div>
         <div
           class="mx_MemberTileView_name"
@@ -216,6 +225,7 @@ exports[`MemberTileView ThreePidInviteTileView renders ThreePidInvite correctly
     <div
       aria-label="Foobar"
       aria-posinset="1"
+      aria-selected="false"
       aria-setsize="1"
       class="mx_AccessibleButton mx_MemberTileView"
       role="option"
@@ -239,7 +249,9 @@ exports[`MemberTileView ThreePidInviteTileView renders ThreePidInvite correctly
           >
             F
           </span>
-           
+          <div
+            class="mx_MemberTileView_presence"
+          />
         </div>
         <div
           class="mx_MemberTileView_name"
diff --git a/apps/web/test/unit-tests/components/views/rooms/memberlist/__snapshots__/PresenceIconView-test.tsx.snap b/apps/web/test/unit-tests/components/views/rooms/memberlist/__snapshots__/PresenceIconView-test.tsx.snap
index a2be761ec7..3fc2b1b9af 100644
--- a/apps/web/test/unit-tests/components/views/rooms/memberlist/__snapshots__/PresenceIconView-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/rooms/memberlist/__snapshots__/PresenceIconView-test.tsx.snap
@@ -2,174 +2,240 @@
 
 exports[`<PresenceIconView/> renders correctly for presence=busy 1`] = `
 <div>
-  <div
-    class="mx_PresenceIconView"
+  <span
+    tabindex="0"
   >
-    <svg
-      class="mx_PresenceIconView_dnd"
-      fill="currentColor"
-      height="8px"
-      viewBox="0 0 8 8"
-      width="8px"
-      xmlns="http://www.w3.org/2000/svg"
+    <div
+      aria-labelledby="react-use-id-1"
+      class="mx_PresenceIconView"
     >
-      <g
-        clip-path="url(#cpd_PresenceStrikethrough8X8Icon_a)"
+      <svg
+        class="mx_PresenceIconView_dnd"
+        fill="currentColor"
+        height="8px"
+        viewBox="0 0 8 8"
+        width="8px"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          clip-rule="evenodd"
-          d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0M5.435 6.048A2.5 2.5 0 0 1 1.687 3.05zm.914-1.19L2.648 1.897a2.5 2.5 0 0 1 3.701 2.961"
-          fill-rule="evenodd"
-        />
-      </g>
-      <defs>
-        <clippath
-          id="cpd_PresenceStrikethrough8X8Icon_a"
+        <g
+          clip-path="url(#cpd_PresenceStrikethrough8X8Icon_a)"
         >
           <path
-            d="M0 0h8v8H0z"
+            clip-rule="evenodd"
+            d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0M5.435 6.048A2.5 2.5 0 0 1 1.687 3.05zm.914-1.19L2.648 1.897a2.5 2.5 0 0 1 3.701 2.961"
+            fill-rule="evenodd"
           />
-        </clippath>
-      </defs>
-    </svg>
-  </div>
+        </g>
+        <defs>
+          <clippath
+            id="cpd_PresenceStrikethrough8X8Icon_a"
+          >
+            <path
+              d="M0 0h8v8H0z"
+            />
+          </clippath>
+        </defs>
+      </svg>
+    </div>
+  </span>
 </div>
 `;
 
 exports[`<PresenceIconView/> renders correctly for presence=offline 1`] = `
 <div>
-  <div
-    class="mx_PresenceIconView"
+  <span
+    tabindex="0"
   >
-    <svg
-      class="mx_PresenceIconView_offline"
-      fill="currentColor"
-      height="8px"
-      viewBox="0 0 8 8"
-      width="8px"
-      xmlns="http://www.w3.org/2000/svg"
+    <div
+      aria-labelledby="react-use-id-1"
+      class="mx_PresenceIconView"
     >
-      <g
-        clip-path="url(#cpd_PresenceOutline8X8Icon_a)"
+      <svg
+        class="mx_PresenceIconView_offline"
+        fill="currentColor"
+        height="8px"
+        viewBox="0 0 8 8"
+        width="8px"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          clip-rule="evenodd"
-          d="M4 6.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5M4 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8"
-          fill-rule="evenodd"
-        />
-      </g>
-      <defs>
-        <clippath
-          id="cpd_PresenceOutline8X8Icon_a"
+        <g
+          clip-path="url(#cpd_PresenceOutline8X8Icon_a)"
         >
           <path
-            d="M0 0h8v8H0z"
+            clip-rule="evenodd"
+            d="M4 6.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5M4 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8"
+            fill-rule="evenodd"
           />
-        </clippath>
-      </defs>
-    </svg>
-  </div>
+        </g>
+        <defs>
+          <clippath
+            id="cpd_PresenceOutline8X8Icon_a"
+          >
+            <path
+              d="M0 0h8v8H0z"
+            />
+          </clippath>
+        </defs>
+      </svg>
+    </div>
+  </span>
 </div>
 `;
 
 exports[`<PresenceIconView/> renders correctly for presence=online 1`] = `
 <div>
-  <div
-    class="mx_PresenceIconView"
+  <span
+    tabindex="0"
   >
-    <svg
-      class="mx_PresenceIconView_online"
-      fill="currentColor"
-      height="8px"
-      viewBox="0 0 8 8"
-      width="8px"
-      xmlns="http://www.w3.org/2000/svg"
+    <div
+      aria-labelledby="react-use-id-1"
+      class="mx_PresenceIconView"
     >
-      <g
-        clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
+      <svg
+        class="mx_PresenceIconView_online"
+        fill="currentColor"
+        height="8px"
+        viewBox="0 0 8 8"
+        width="8px"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
-        />
-      </g>
-      <defs>
-        <clippath
-          id="cpd_PresenceSolid8X8Icon_a"
+        <g
+          clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
         >
           <path
-            d="M0 0h8v8H0z"
+            d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
           />
-        </clippath>
-      </defs>
-    </svg>
-  </div>
+        </g>
+        <defs>
+          <clippath
+            id="cpd_PresenceSolid8X8Icon_a"
+          >
+            <path
+              d="M0 0h8v8H0z"
+            />
+          </clippath>
+        </defs>
+      </svg>
+    </div>
+  </span>
 </div>
 `;
 
 exports[`<PresenceIconView/> renders correctly for presence=unavailable/unreachable 1`] = `
 <div>
-  <div
-    class="mx_PresenceIconView"
+  <span
+    tabindex="0"
   >
-    <svg
-      class="mx_PresenceIconView_unavailable"
-      fill="currentColor"
-      height="8px"
-      viewBox="0 0 8 8"
-      width="8px"
-      xmlns="http://www.w3.org/2000/svg"
+    <div
+      aria-labelledby="react-use-id-1"
+      class="mx_PresenceIconView"
     >
-      <g
-        clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
+      <svg
+        class="mx_PresenceIconView_unavailable"
+        fill="currentColor"
+        height="8px"
+        viewBox="0 0 8 8"
+        width="8px"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
-        />
-      </g>
-      <defs>
-        <clippath
-          id="cpd_PresenceSolid8X8Icon_a"
+        <g
+          clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
         >
           <path
-            d="M0 0h8v8H0z"
+            d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
           />
-        </clippath>
-      </defs>
-    </svg>
-  </div>
+        </g>
+        <defs>
+          <clippath
+            id="cpd_PresenceSolid8X8Icon_a"
+          >
+            <path
+              d="M0 0h8v8H0z"
+            />
+          </clippath>
+        </defs>
+      </svg>
+    </div>
+  </span>
 </div>
 `;
 
 exports[`<PresenceIconView/> renders correctly for presence=unavailable/unreachable 2`] = `
 <div>
-  <div
-    class="mx_PresenceIconView"
+  <span
+    tabindex="0"
   >
-    <svg
-      class="mx_PresenceIconView_unavailable"
-      fill="currentColor"
-      height="8px"
-      viewBox="0 0 8 8"
-      width="8px"
-      xmlns="http://www.w3.org/2000/svg"
+    <div
+      aria-labelledby="react-use-id-1"
+      class="mx_PresenceIconView"
     >
-      <g
-        clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
+      <svg
+        class="mx_PresenceIconView_unavailable"
+        fill="currentColor"
+        height="8px"
+        viewBox="0 0 8 8"
+        width="8px"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
-        />
-      </g>
-      <defs>
-        <clippath
-          id="cpd_PresenceSolid8X8Icon_a"
+        <g
+          clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
         >
           <path
-            d="M0 0h8v8H0z"
+            d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
           />
-        </clippath>
-      </defs>
-    </svg>
-  </div>
+        </g>
+        <defs>
+          <clippath
+            id="cpd_PresenceSolid8X8Icon_a"
+          >
+            <path
+              d="M0 0h8v8H0z"
+            />
+          </clippath>
+        </defs>
+      </svg>
+    </div>
+  </span>
 </div>
 `;
+
+exports[`<PresenceIconView/> renders the tooltip 1`] = `
+<DocumentFragment>
+  <span
+    tabindex="0"
+  >
+    <div
+      aria-labelledby="react-use-id-1"
+      class="mx_PresenceIconView"
+    >
+      <svg
+        class="mx_PresenceIconView_dnd"
+        fill="currentColor"
+        height="8px"
+        viewBox="0 0 8 8"
+        width="8px"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g
+          clip-path="url(#cpd_PresenceStrikethrough8X8Icon_a)"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0M5.435 6.048A2.5 2.5 0 0 1 1.687 3.05zm.914-1.19L2.648 1.897a2.5 2.5 0 0 1 3.701 2.961"
+            fill-rule="evenodd"
+          />
+        </g>
+        <defs>
+          <clippath
+            id="cpd_PresenceStrikethrough8X8Icon_a"
+          >
+            <path
+              d="M0 0h8v8H0z"
+            />
+          </clippath>
+        </defs>
+      </svg>
+    </div>
+  </span>
+</DocumentFragment>
+`;
diff --git a/apps/web/test/unit-tests/components/views/rooms/memberlist/common.tsx b/apps/web/test/unit-tests/components/views/rooms/memberlist/common.tsx
index af474a13d2..e5e5f4072e 100644
--- a/apps/web/test/unit-tests/components/views/rooms/memberlist/common.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/memberlist/common.tsx
@@ -15,6 +15,7 @@ import { VirtuosoMockContext } from "@element-hq/web-shared-components";
 import {
     Room,
     type MatrixClient,
+    type MatrixEvent,
     type RoomState,
     RoomMember,
     User,
@@ -26,7 +27,7 @@ import { KnownMembership } from "matrix-js-sdk/src/types";
 import { MatrixClientPeg } from "../../../../../../src/MatrixClientPeg";
 import * as TestUtils from "../../../../../test-utils";
 import { SDKContext } from "../../../../../../src/contexts/SDKContext";
-import { TestSdkContext } from "../../../../TestSdkContext";
+import { TestSDKContext } from "../../../../TestSDKContext";
 import MemberListView from "../../../../../../src/components/views/rooms/MemberList/MemberListView";
 import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
 
@@ -54,6 +55,7 @@ export async function renderMemberList(
     enablePresence: boolean,
     roomSetup?: (room: Room) => void,
     usersPerLevel: number = 2,
+    threePidEvents: MatrixEvent[] = [],
 ): Promise<Rendered> {
     TestUtils.stubClient();
     const client = MatrixClientPeg.safeGet();
@@ -109,7 +111,8 @@ export async function renderMemberList(
     memberListRoom.currentState = {
         members: {},
         getMember: jest.fn(),
-        getStateEvents: ((eventType, stateKey) => (stateKey === undefined ? [] : null)) as RoomState["getStateEvents"], // ignore 3pid invites
+        getStateEvents: TestUtils.mockStateEventImplementation(threePidEvents),
+        getInviteForThreePidToken: jest.fn().mockReturnValue(null),
         getInvitedMemberCount: jest.fn().mockReturnValue(0),
         getJoinedMemberCount: jest
             .fn()
@@ -121,8 +124,8 @@ export async function renderMemberList(
         memberListRoom.currentState.members[member.userId] = member;
     }
 
-    const context = new TestSdkContext();
-    context.client = client;
+    const context = new TestSDKContext();
+    context._client = client;
     context.memberListStore.isPresenceEnabled = jest.fn().mockReturnValue(enablePresence);
     const root = render(
         <MatrixClientContext.Provider value={client}>
@@ -139,7 +142,9 @@ export async function renderMemberList(
         },
     );
     await waitFor(async () => {
-        expect(root.container.querySelectorAll(".mx_MemberTileView")).toHaveLength(usersPerLevel * 3);
+        expect(root.container.querySelectorAll(".mx_MemberTileView")).toHaveLength(
+            usersPerLevel * 3 + threePidEvents.length,
+        );
     });
 
     const reRender = createReRenderFunction(client, memberListRoom);
diff --git a/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx b/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
index 3293829686..fd47666269 100644
--- a/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
@@ -27,6 +27,7 @@ import { type ActionPayload } from "../../../../../../src/dispatcher/payloads";
 import * as EmojiButton from "../../../../../../src/components/views/rooms/EmojiButton";
 import { createMocks } from "./utils";
 import { ScopedRoomContextProvider } from "../../../../../../src/contexts/ScopedRoomContext.tsx";
+import { RoomUploadContextProvider } from "../../../../../../src/viewmodels/room/RoomUploadViewModel.tsx";
 
 beforeAll(initOnce, 10000);
 
@@ -46,7 +47,9 @@ describe("EditWysiwygComposer", () => {
         return render(
             <MatrixClientContext.Provider value={client}>
                 <ScopedRoomContextProvider {...roomContext}>
-                    <EditWysiwygComposer disabled={disabled} editorStateTransfer={_editorStateTransfer} />
+                    <RoomUploadContextProvider>
+                        <EditWysiwygComposer disabled={disabled} editorStateTransfer={_editorStateTransfer} />
+                    </RoomUploadContextProvider>
                 </ScopedRoomContextProvider>
             </MatrixClientContext.Provider>,
         );
@@ -62,7 +65,9 @@ describe("EditWysiwygComposer", () => {
         rerender(
             <MatrixClientContext.Provider value={mockClient}>
                 <ScopedRoomContextProvider {...defaultRoomContext} room={undefined}>
-                    <EditWysiwygComposer disabled={false} editorStateTransfer={editorStateTransfer} />
+                    <RoomUploadContextProvider>
+                        <EditWysiwygComposer disabled={false} editorStateTransfer={editorStateTransfer} />
+                    </RoomUploadContextProvider>
                 </ScopedRoomContextProvider>
             </MatrixClientContext.Provider>,
         );
@@ -273,7 +278,9 @@ describe("EditWysiwygComposer", () => {
         render(
             <MatrixClientContext.Provider value={mockClient}>
                 <ScopedRoomContextProvider {...defaultRoomContext}>
-                    <EditWysiwygComposer editorStateTransfer={editorStateTransfer} />
+                    <RoomUploadContextProvider>
+                        <EditWysiwygComposer editorStateTransfer={editorStateTransfer} />
+                    </RoomUploadContextProvider>
                     <Emoji menuPosition={{ chevronFace: ChevronFace.Top }} />
                 </ScopedRoomContextProvider>
             </MatrixClientContext.Provider>,
diff --git a/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx b/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
index 528615939a..1b9df3bcf1 100644
--- a/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
@@ -25,6 +25,7 @@ import { setSelection } from "../../../../../../src/components/views/rooms/wysiw
 import { createMocks } from "./utils";
 import { ScopedRoomContextProvider } from "../../../../../../src/contexts/ScopedRoomContext.tsx";
 import { E2EStatus } from "../../../../../../src/utils/ShieldUtils.ts";
+import { RoomUploadContextProvider } from "../../../../../../src/viewmodels/room/RoomUploadViewModel.tsx";
 
 jest.mock("../../../../../../src/components/views/rooms/EmojiButton", () => ({
     EmojiButton: ({ addEmoji }: { addEmoji: (emoji: string) => void }) => {
@@ -77,15 +78,17 @@ describe("SendWysiwygComposer", () => {
         return render(
             <MatrixClientContext.Provider value={mockClient}>
                 <ScopedRoomContextProvider {...defaultRoomContext}>
-                    <SendWysiwygComposer
-                        onChange={onChange}
-                        onSend={onSend}
-                        disabled={disabled}
-                        isRichTextEnabled={isRichTextEnabled}
-                        menuPosition={aboveLeftOf({ top: 0, bottom: 0, right: 0 })}
-                        placeholder={placeholder}
-                        e2eStatus={e2eStatus}
-                    />
+                    <RoomUploadContextProvider>
+                        <SendWysiwygComposer
+                            onChange={onChange}
+                            onSend={onSend}
+                            disabled={disabled}
+                            isRichTextEnabled={isRichTextEnabled}
+                            menuPosition={aboveLeftOf({ top: 0, bottom: 0, right: 0 })}
+                            placeholder={placeholder}
+                            e2eStatus={e2eStatus}
+                        />
+                    </RoomUploadContextProvider>
                 </ScopedRoomContextProvider>
             </MatrixClientContext.Provider>,
         );
@@ -344,10 +347,8 @@ describe("SendWysiwygComposer", () => {
                 expect(leftIcon).toBeInTheDocument();
                 expect(leftIcon).toHaveClass("mx_E2EIcon");
                 if (expectedLabel) {
-                    // eslint-disable-next-line jest/no-conditional-expect
                     expect(leftIcon).toHaveAccessibleName(expectedLabel);
                 } else {
-                    // eslint-disable-next-line jest/no-conditional-expect
                     expect(leftIcon.querySelector("svg")).not.toBeInTheDocument();
                 }
             });
diff --git a/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx b/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
index 5412f96892..837ddbb0bc 100644
--- a/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
@@ -18,7 +18,7 @@ import {
 
 import { FormattingButtons } from "../../../../../../../src/components/views/rooms/wysiwyg_composer/components/FormattingButtons";
 import * as LinkModal from "../../../../../../../src/components/views/rooms/wysiwyg_composer/components/LinkModal";
-import { setLanguage } from "../../../../../../../src/languageHandler";
+import { setLanguage } from "../../../../../../../src/i18n/settings";
 
 const mockWysiwyg = {
     bold: jest.fn(),
diff --git a/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx b/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx
index ce4eb8634f..e585e551a6 100644
--- a/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx
@@ -33,6 +33,7 @@ import type AutocompleteProvider from "../../../../../../../src/autocomplete/Aut
 import * as Permalinks from "../../../../../../../src/utils/permalinks/Permalinks";
 import { type PermalinkParts } from "../../../../../../../src/utils/permalinks/PermalinkConstructor";
 import { ScopedRoomContextProvider } from "../../../../../../../src/contexts/ScopedRoomContext.tsx";
+import { RoomUploadContextProvider } from "../../../../../../../src/viewmodels/room/RoomUploadViewModel.tsx";
 
 beforeAll(initOnce, 10000);
 
@@ -42,12 +43,14 @@ describe("WysiwygComposer", () => {
         return render(
             <MatrixClientContext.Provider value={mockClient}>
                 <ScopedRoomContextProvider {...defaultRoomContext}>
-                    <WysiwygComposer
-                        onChange={onChange}
-                        onSend={onSend}
-                        disabled={disabled}
-                        initialContent={initialContent}
-                    />
+                    <RoomUploadContextProvider>
+                        <WysiwygComposer
+                            onChange={onChange}
+                            onSend={onSend}
+                            disabled={disabled}
+                            initialContent={initialContent}
+                        />
+                    </RoomUploadContextProvider>
                 </ScopedRoomContextProvider>
             </MatrixClientContext.Provider>,
         );
@@ -71,7 +74,10 @@ describe("WysiwygComposer", () => {
         beforeEach(async () => {
             mockPlatformPeg({ overrideBrowserShortcuts: jest.fn().mockReturnValue(false) });
             customRender(onChange, onSend);
-            await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"));
+            await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"), {
+                // The standard timeout sometimes isn't enough for the async wasm init
+                timeout: 5000,
+            });
         });
 
         afterEach(() => {
@@ -530,7 +536,6 @@ describe("WysiwygComposer", () => {
             await waitFor(() => {
                 const selection = document.getSelection();
                 if (selection) {
-                    // eslint-disable-next-line jest/no-conditional-expect
                     expect(selection.focusNode?.textContent).toEqual("other");
                 }
             });
@@ -561,19 +566,21 @@ describe("WysiwygComposer", () => {
             return render(
                 <MatrixClientContext.Provider value={client}>
                     <ScopedRoomContextProvider {...roomContext}>
-                        <ComposerContext.Provider
-                            value={getDefaultContextValue({ editorStateTransfer: _editorStateTransfer })}
-                        >
-                            <WysiwygComposer
-                                onChange={jest.fn()}
-                                onSend={jest.fn()}
-                                initialContent={
-                                    roomContext.room && _editorStateTransfer
-                                        ? parseEditorStateTransfer(_editorStateTransfer, roomContext.room, client)
-                                        : undefined
-                                }
-                            />
-                        </ComposerContext.Provider>
+                        <RoomUploadContextProvider>
+                            <ComposerContext.Provider
+                                value={getDefaultContextValue({ editorStateTransfer: _editorStateTransfer })}
+                            >
+                                <WysiwygComposer
+                                    onChange={jest.fn()}
+                                    onSend={jest.fn()}
+                                    initialContent={
+                                        roomContext.room && _editorStateTransfer
+                                            ? parseEditorStateTransfer(_editorStateTransfer, roomContext.room, client)
+                                            : undefined
+                                    }
+                                />
+                            </ComposerContext.Provider>
+                        </RoomUploadContextProvider>
                     </ScopedRoomContextProvider>
                 </MatrixClientContext.Provider>,
             );
diff --git a/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/useContainsCommand-test.tsx b/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/useContainsCommand-test.ts
similarity index 100%
rename from apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/useContainsCommand-test.tsx
rename to apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/useContainsCommand-test.ts
diff --git a/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners-test.tsx b/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners-test.ts
similarity index 100%
rename from apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners-test.tsx
rename to apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners-test.ts
diff --git a/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/useSuggestion-test.tsx b/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/useSuggestion-test.ts
similarity index 100%
rename from apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/useSuggestion-test.tsx
rename to apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/useSuggestion-test.ts
diff --git a/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/utils-test.tsx b/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/utils-test.ts
similarity index 55%
rename from apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/utils-test.tsx
rename to apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/utils-test.ts
index 3627513c20..ff8c622426 100644
--- a/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/utils-test.tsx
+++ b/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/utils-test.ts
@@ -5,29 +5,21 @@ Copyright 2023 The Matrix.org Foundation C.I.C.
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
-import { type IEventRelation, type MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { waitFor } from "jest-matrix-react";
 import fetchMock from "@fetch-mock/jest";
 
-import { TimelineRenderingType } from "../../../../../../../src/contexts/RoomContext";
-import { mkStubRoom, stubClient } from "../../../../../../test-utils";
-import ContentMessages from "../../../../../../../src/ContentMessages";
-import { type IRoomState } from "../../../../../../../src/components/structures/RoomView";
 import {
     handleClipboardEvent,
     isEventToHandleAsClipboardEvent,
 } from "../../../../../../../src/components/views/rooms/wysiwyg_composer/hooks/utils";
+import type { RoomUploadViewModel } from "../../../../../../../src/viewmodels/room/RoomUploadViewModel";
+import type { MockedObject } from "jest-mock";
 
-const mockClient = stubClient();
-const mockRoom = mkStubRoom("mock room", "mock room", mockClient);
-const mockRoomState = {
-    room: mockRoom,
-    timelineRenderingType: TimelineRenderingType.Room,
-    replyToEvent: {} as unknown as MatrixEvent,
-} as unknown as IRoomState;
+const mockUploadVM = {
+    initiateViaDataTransfer: jest.fn().mockResolvedValue(undefined),
+    initiateViaInputFiles: jest.fn().mockResolvedValue(undefined),
+} as Partial<RoomUploadViewModel> as MockedObject<RoomUploadViewModel>;
 
-const sendContentListToRoomSpy = jest.spyOn(ContentMessages.sharedInstance(), "sendContentListToRoom");
-const sendContentToRoomSpy = jest.spyOn(ContentMessages.sharedInstance(), "sendContentToRoom");
 const logSpy = jest.spyOn(console, "log").mockImplementation(() => {});
 
 describe("handleClipboardEvent", () => {
@@ -45,29 +37,16 @@ describe("handleClipboardEvent", () => {
 
     it("returns false if it is not a paste event", () => {
         const originalEvent = createMockClipboardEvent({ type: "copy" });
-        const output = handleClipboardEvent(originalEvent, originalEvent.clipboardData, mockRoomState, mockClient);
-
+        const output = handleClipboardEvent(originalEvent, originalEvent.clipboardData, mockUploadVM);
         expect(output).toBe(false);
+        expect(mockUploadVM.initiateViaDataTransfer).not.toHaveBeenCalled();
     });
 
     it("returns false if clipboard data is null", () => {
         const originalEvent = createMockClipboardEvent({ type: "paste", clipboardData: null });
-        const output = handleClipboardEvent(originalEvent, originalEvent.clipboardData, mockRoomState, mockClient);
-
-        expect(output).toBe(false);
-    });
-
-    it("returns false if room is undefined", () => {
-        const originalEvent = createMockClipboardEvent({ type: "paste" });
-        const { room, ...roomStateWithoutRoom } = mockRoomState;
-        const output = handleClipboardEvent(
-            originalEvent,
-            originalEvent.clipboardData,
-            roomStateWithoutRoom,
-            mockClient,
-        );
-
+        const output = handleClipboardEvent(originalEvent, originalEvent.clipboardData, mockUploadVM);
         expect(output).toBe(false);
+        expect(mockUploadVM.initiateViaDataTransfer).not.toHaveBeenCalled();
     });
 
     it("returns false if room clipboardData files and types are empty", () => {
@@ -75,8 +54,9 @@ describe("handleClipboardEvent", () => {
             type: "paste",
             clipboardData: { files: [], types: [] },
         });
-        const output = handleClipboardEvent(originalEvent, originalEvent.clipboardData, mockRoomState, mockClient);
+        const output = handleClipboardEvent(originalEvent, originalEvent.clipboardData, mockUploadVM);
         expect(output).toBe(false);
+        expect(mockUploadVM.initiateViaDataTransfer).not.toHaveBeenCalled();
     });
 
     it("handles event and calls sendContentListToRoom when data files are present", () => {
@@ -84,65 +64,23 @@ describe("handleClipboardEvent", () => {
             type: "paste",
             clipboardData: { files: ["something here"], types: [] },
         });
-        const output = handleClipboardEvent(originalEvent, originalEvent.clipboardData, mockRoomState, mockClient);
-        const mockReplyToEvent = {} as unknown as MatrixEvent;
-        expect(sendContentListToRoomSpy).toHaveBeenCalledTimes(1);
-        expect(sendContentListToRoomSpy).toHaveBeenCalledWith(
-            originalEvent.clipboardData?.files,
-            mockRoom.roomId,
-            undefined, // this is the event relation, an optional arg
-            mockReplyToEvent,
-            mockClient,
-            mockRoomState.timelineRenderingType,
-        );
-        expect(output).toBe(true);
-    });
-
-    it("calls sendContentListToRoom with eventRelation when present", () => {
-        const originalEvent = createMockClipboardEvent({
-            type: "paste",
-            clipboardData: { files: ["something here"], types: [] },
-        });
-        const mockEventRelation = {} as unknown as IEventRelation;
-        const mockReplyToEvent = {} as unknown as MatrixEvent;
-        const output = handleClipboardEvent(
-            originalEvent,
-            originalEvent.clipboardData,
-            mockRoomState,
-            mockClient,
-            mockEventRelation,
-        );
-
-        expect(sendContentListToRoomSpy).toHaveBeenCalledTimes(1);
-        expect(sendContentListToRoomSpy).toHaveBeenCalledWith(
-            originalEvent.clipboardData?.files,
-            mockRoom.roomId,
-            mockEventRelation, // this is the event relation, an optional arg
-            mockReplyToEvent,
-            mockClient,
-            mockRoomState.timelineRenderingType,
-        );
+        const output = handleClipboardEvent(originalEvent, originalEvent.clipboardData, mockUploadVM);
+        expect(mockUploadVM.initiateViaDataTransfer).toHaveBeenCalledTimes(1);
+        expect(mockUploadVM.initiateViaDataTransfer).toHaveBeenCalledWith(originalEvent.clipboardData);
         expect(output).toBe(true);
     });
 
     it("calls the error handler when sentContentListToRoom errors", async () => {
         const mockErrorMessage = "something went wrong";
-        sendContentListToRoomSpy.mockRejectedValueOnce(new Error(mockErrorMessage));
+        mockUploadVM.initiateViaDataTransfer.mockRejectedValueOnce(new Error(mockErrorMessage));
 
         const originalEvent = createMockClipboardEvent({
             type: "paste",
             clipboardData: { files: ["something here"], types: [] },
         });
-        const mockEventRelation = {} as unknown as IEventRelation;
-        const output = handleClipboardEvent(
-            originalEvent,
-            originalEvent.clipboardData,
-            mockRoomState,
-            mockClient,
-            mockEventRelation,
-        );
+        const output = handleClipboardEvent(originalEvent, originalEvent.clipboardData, mockUploadVM);
 
-        expect(sendContentListToRoomSpy).toHaveBeenCalledTimes(1);
+        expect(mockUploadVM.initiateViaDataTransfer).toHaveBeenCalledTimes(1);
         await waitFor(() => {
             expect(logSpy).toHaveBeenCalledWith(mockErrorMessage);
         });
@@ -158,15 +96,7 @@ describe("handleClipboardEvent", () => {
                 getData: jest.fn().mockReturnValue("<div>invalid html"),
             },
         });
-        const mockEventRelation = {} as unknown as IEventRelation;
-        const output = handleClipboardEvent(
-            originalEvent,
-            originalEvent.clipboardData,
-            mockRoomState,
-            mockClient,
-            mockEventRelation,
-        );
-
+        const output = handleClipboardEvent(originalEvent, originalEvent.clipboardData, mockUploadVM);
         expect(logSpy).toHaveBeenCalledWith("Failed to handle pasted content as Safari inserted content");
         expect(output).toBe(false);
     });
@@ -180,10 +110,10 @@ describe("handleClipboardEvent", () => {
                 getData: jest.fn().mockReturnValue(`<img src="blob:" />`),
             },
         });
-        const mockEventRelation = {} as unknown as IEventRelation;
-        handleClipboardEvent(originalEvent, originalEvent.clipboardData, mockRoomState, mockClient, mockEventRelation);
+        const output = handleClipboardEvent(originalEvent, originalEvent.clipboardData, mockUploadVM);
 
         expect(fetchMock).toHaveFetchedTimes(1, "blob:");
+        expect(output).toBe(true);
     });
 
     it("calls error handler when fetch fails", async () => {
@@ -197,14 +127,7 @@ describe("handleClipboardEvent", () => {
                 getData: jest.fn().mockReturnValue(`<img src="blob:" />`),
             },
         });
-        const mockEventRelation = {} as unknown as IEventRelation;
-        const output = handleClipboardEvent(
-            originalEvent,
-            originalEvent.clipboardData,
-            mockRoomState,
-            mockClient,
-            mockEventRelation,
-        );
+        const output = handleClipboardEvent(originalEvent, originalEvent.clipboardData, mockUploadVM);
 
         await waitFor(() => {
             expect(logSpy).toHaveBeenCalledWith(mockErrorMessage);
@@ -212,7 +135,7 @@ describe("handleClipboardEvent", () => {
         expect(output).toBe(true);
     });
 
-    it("calls sendContentToRoom when parsing is successful", async () => {
+    it("calls initiateViaInputFiles when parsing is successful", async () => {
         fetchMock.get("test/file", {
             blob: () => {
                 return Promise.resolve({ type: "image/jpeg" } as Blob);
@@ -227,23 +150,11 @@ describe("handleClipboardEvent", () => {
                 getData: jest.fn().mockReturnValue(`<img src="blob:" />`),
             },
         });
-        const mockEventRelation = {} as unknown as IEventRelation;
-        const output = handleClipboardEvent(
-            originalEvent,
-            originalEvent.clipboardData,
-            mockRoomState,
-            mockClient,
-            mockEventRelation,
-        );
+        const output = handleClipboardEvent(originalEvent, originalEvent.clipboardData, mockUploadVM);
 
         await waitFor(() => {
-            expect(sendContentToRoomSpy).toHaveBeenCalledWith(
-                expect.any(File),
-                mockRoom.roomId,
-                mockEventRelation,
-                mockClient,
-                mockRoomState.replyToEvent,
-            );
+            expect(mockUploadVM.initiateViaInputFiles).toHaveBeenCalledTimes(1);
+            expect(mockUploadVM.initiateViaInputFiles).toHaveBeenCalledWith([expect.any(File)]);
         });
         expect(output).toBe(true);
     });
@@ -254,8 +165,8 @@ describe("handleClipboardEvent", () => {
                 return Promise.resolve({ type: "image/jpeg" } as Blob);
             },
         });
-        const mockErrorMessage = "sendContentToRoom failed";
-        sendContentToRoomSpy.mockRejectedValueOnce(mockErrorMessage);
+        const mockErrorMessage = "initiateViaInputFiles failed";
+        mockUploadVM.initiateViaInputFiles.mockRejectedValueOnce(mockErrorMessage);
 
         const originalEvent = createMockClipboardEvent({
             type: "paste",
@@ -265,14 +176,7 @@ describe("handleClipboardEvent", () => {
                 getData: jest.fn().mockReturnValue(`<img src="blob:" />`),
             },
         });
-        const mockEventRelation = {} as unknown as IEventRelation;
-        const output = handleClipboardEvent(
-            originalEvent,
-            originalEvent.clipboardData,
-            mockRoomState,
-            mockClient,
-            mockEventRelation,
-        );
+        const output = handleClipboardEvent(originalEvent, originalEvent.clipboardData, mockUploadVM);
 
         await waitFor(() => {
             expect(logSpy).toHaveBeenCalledWith(mockErrorMessage);
diff --git a/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/utils/message-test.ts b/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/utils/message-test.ts
index c53db5de35..3fc6410108 100644
--- a/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/utils/message-test.ts
+++ b/apps/web/test/unit-tests/components/views/rooms/wysiwyg_composer/utils/message-test.ts
@@ -65,7 +65,11 @@ describe("message", () => {
     describe("sendMessage", () => {
         it("Should not send empty html message", async () => {
             // When
-            await sendMessage("", true, { roomContext: defaultRoomContext, mxClient: mockClient });
+            await sendMessage("", true, {
+                roomContext: defaultRoomContext,
+                mxClient: mockClient,
+                urlPreviewSnapshot: { previews: [], content: "" },
+            });
 
             // Then
             expect(mockClient.sendMessage).toHaveBeenCalledTimes(0);
@@ -80,6 +84,7 @@ describe("message", () => {
             await sendMessage(message, true, {
                 roomContext: mockRoomContextWithoutId,
                 mxClient: mockClient,
+                urlPreviewSnapshot: { previews: [], content: "" },
             });
 
             // Then
@@ -93,6 +98,7 @@ describe("message", () => {
                 await sendMessage(message, true, {
                     roomContext: defaultRoomContext,
                     mxClient: mockClient,
+                    urlPreviewSnapshot: { previews: [], content: "" },
                 });
 
                 // Then
@@ -104,6 +110,7 @@ describe("message", () => {
                     roomContext: defaultRoomContext,
                     mxClient: mockClient,
                     relation: {},
+                    urlPreviewSnapshot: { previews: [], content: "" },
                 });
 
                 // Then
@@ -118,6 +125,7 @@ describe("message", () => {
                         event_id: "valid_id",
                         rel_type: "m.does_not_match",
                     },
+                    urlPreviewSnapshot: { previews: [], content: "" },
                 });
 
                 // Then
@@ -133,6 +141,7 @@ describe("message", () => {
                         event_id: "valid_id",
                         rel_type: "m.thread",
                     },
+                    urlPreviewSnapshot: { previews: [], content: "" },
                 });
 
                 // Then
@@ -145,6 +154,7 @@ describe("message", () => {
             await sendMessage(message, true, {
                 roomContext: defaultRoomContext,
                 mxClient: mockClient,
+                urlPreviewSnapshot: { previews: [], content: "" },
             });
 
             // Then
@@ -172,6 +182,7 @@ describe("message", () => {
                 roomContext: defaultRoomContext,
                 mxClient: mockClient,
                 replyToEvent: mockReplyEvent,
+                urlPreviewSnapshot: { previews: [], content: "" },
             });
 
             // Then
@@ -201,6 +212,7 @@ describe("message", () => {
             await sendMessage(message, true, {
                 roomContext: defaultRoomContext,
                 mxClient: mockClient,
+                urlPreviewSnapshot: { previews: [], content: "" },
             });
 
             // Then
@@ -212,7 +224,11 @@ describe("message", () => {
 
         it("Should handle emojis", async () => {
             // When
-            await sendMessage("🎉", false, { roomContext: defaultRoomContext, mxClient: mockClient });
+            await sendMessage("🎉", false, {
+                roomContext: defaultRoomContext,
+                mxClient: mockClient,
+                urlPreviewSnapshot: { previews: [], content: "" },
+            });
 
             // Then
             expect(spyDispatcher).toHaveBeenCalledWith({ action: "effects.confetti" });
@@ -227,6 +243,7 @@ describe("message", () => {
                 await sendMessage(validCommand, true, {
                     roomContext: defaultRoomContext,
                     mxClient: mockClient,
+                    urlPreviewSnapshot: { previews: [], content: "" },
                 });
 
                 // Then
@@ -239,6 +256,7 @@ describe("message", () => {
                 await sendMessage(invalidPrefixCommand, true, {
                     roomContext: defaultRoomContext,
                     mxClient: mockClient,
+                    urlPreviewSnapshot: { previews: [], content: "" },
                 });
 
                 // Then
@@ -256,6 +274,7 @@ describe("message", () => {
                 const result = await sendMessage(validCommand, true, {
                     roomContext: defaultRoomContext,
                     mxClient: mockClient,
+                    urlPreviewSnapshot: { previews: [], content: "" },
                 });
 
                 // Then
@@ -270,6 +289,7 @@ describe("message", () => {
                     await sendMessage(inputText, true, {
                         roomContext: defaultRoomContext,
                         mxClient: mockClient,
+                        urlPreviewSnapshot: { previews: [], content: "" },
                     });
                     expect(mockClient.sendMessage).toHaveBeenCalledWith(
                         "myfakeroom",
@@ -289,6 +309,7 @@ describe("message", () => {
                         roomContext: defaultRoomContext,
                         mxClient: mockClient,
                         relation: mockRelation,
+                        urlPreviewSnapshot: { previews: [], content: "" },
                     });
 
                     expect(mockClient.sendMessage).toHaveBeenCalledWith(
@@ -305,6 +326,7 @@ describe("message", () => {
                     roomContext: defaultRoomContext,
                     mxClient: mockClient,
                     replyToEvent: mockEvent,
+                    urlPreviewSnapshot: { previews: [], content: "" },
                 });
 
                 expect(addReplySpy).toHaveBeenCalledTimes(1);
@@ -319,6 +341,7 @@ describe("message", () => {
                         roomContext: defaultRoomContext,
                         mxClient: mockClient,
                         replyToEvent: mockEvent,
+                        urlPreviewSnapshot: { previews: [], content: "" },
                     });
 
                     expect(result).toBeUndefined();
@@ -333,6 +356,7 @@ describe("message", () => {
                 await sendMessage(invalidCommandInput, true, {
                     roomContext: defaultRoomContext,
                     mxClient: mockClient,
+                    urlPreviewSnapshot: { previews: [], content: "" },
                 });
 
                 // we expect the message to have been sent
@@ -353,6 +377,7 @@ describe("message", () => {
                 const result = await sendMessage(invalidCommandInput, true, {
                     roomContext: defaultRoomContext,
                     mxClient: mockClient,
+                    urlPreviewSnapshot: { previews: [], content: "" },
                 });
 
                 expect(result).toBeUndefined();
diff --git a/apps/web/test/unit-tests/components/views/settings/ChangePassword-test.tsx b/apps/web/test/unit-tests/components/views/settings/ChangePassword-test.tsx
index 6b4c58f1d1..f7133c831f 100644
--- a/apps/web/test/unit-tests/components/views/settings/ChangePassword-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/ChangePassword-test.tsx
@@ -14,6 +14,16 @@ import { mocked } from "jest-mock";
 import ChangePassword from "../../../../../src/components/views/settings/ChangePassword";
 import { stubClient } from "../../../../test-utils";
 
+jest.mock("../../../../../src/utils/PasswordScorer", () => ({
+    scorePassword: jest.fn(() => ({
+        score: 4,
+        feedback: {
+            warning: "",
+            suggestions: [],
+        },
+    })),
+}));
+
 describe("<ChangePassword />", () => {
     it("renders expected fields", () => {
         const onFinished = jest.fn();
diff --git a/apps/web/test/unit-tests/components/views/settings/JoinRuleSettings-test.tsx b/apps/web/test/unit-tests/components/views/settings/JoinRuleSettings-test.tsx
index adedbb8737..22881b9916 100644
--- a/apps/web/test/unit-tests/components/views/settings/JoinRuleSettings-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/JoinRuleSettings-test.tsx
@@ -26,6 +26,8 @@ import {
     clearAllModals,
     flushPromises,
     getMockClientWithEventEmitter,
+    mockClientMethodsRooms,
+    mockClientMethodsServer,
     mockClientMethodsUser,
 } from "../../../../test-utils";
 import { filterBoolean } from "../../../../../src/utils/arrays";
@@ -33,14 +35,16 @@ import JoinRuleSettings, {
     type JoinRuleSettingsProps,
 } from "../../../../../src/components/views/settings/JoinRuleSettings";
 import { PreferredRoomVersions } from "../../../../../src/utils/PreferredRoomVersions";
-import SpaceStore from "../../../../../src/stores/spaces/SpaceStore";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
+import { SDKContextClass } from "../../../../../src/contexts/SDKContextClass.ts";
+import DMRoomMap from "../../../../../src/utils/DMRoomMap.ts";
 
 describe("<JoinRuleSettings />", () => {
     const userId = "@alice:server.org";
     const client = getMockClientWithEventEmitter({
         ...mockClientMethodsUser(userId),
-        getRoom: jest.fn(),
+        ...mockClientMethodsServer(),
+        ...mockClientMethodsRooms([]),
         getDomain: jest.fn(),
         getLocalAliases: jest.fn().mockReturnValue([]),
         sendStateEvent: jest.fn(),
@@ -50,6 +54,7 @@ describe("<JoinRuleSettings />", () => {
         isRoomEncrypted: jest.fn().mockReturnValue(false),
         getRoomDirectoryVisibility: jest.fn(),
         setRoomDirectoryVisibility: jest.fn(),
+        matrixRTC: { on: jest.fn() },
     });
     const roomId = "!room:server.org";
     const newRoomId = "!roomUpgraded:server.org";
@@ -112,6 +117,7 @@ describe("<JoinRuleSettings />", () => {
         client.upgradeRoom.mockResolvedValue({ replacement_room: newRoomId });
         client.getRoom.mockReturnValue(null);
         jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => setting === "feature_ask_to_join");
+        DMRoomMap.makeShared(client);
     });
 
     type TestCase = [string, { label: string; unsupportedRoomVersion: string; preferredRoomVersion: string }];
@@ -165,7 +171,9 @@ describe("<JoinRuleSettings />", () => {
                 // room that doesn't support the join rule
                 const room = new Room(roomId, client, userId);
                 const parentSpace = new Room("!parentSpace:server.org", client, userId);
-                jest.spyOn(SpaceStore.instance, "getKnownParents").mockReturnValue(new Set([parentSpace.roomId]));
+                jest.spyOn(SDKContextClass.instance.spaceStore, "getKnownParents").mockReturnValue(
+                    new Set([parentSpace.roomId]),
+                );
                 setRoomStateEvents(room, unsupportedRoomVersion);
                 const memberAlice = new RoomMember(roomId, "@alice:server.org");
                 const memberBob = new RoomMember(roomId, "@bob:server.org");
diff --git a/apps/web/test/unit-tests/components/views/settings/Notifications-test.tsx b/apps/web/test/unit-tests/components/views/settings/Notifications-test.tsx
index 864ca485fa..c0468a2166 100644
--- a/apps/web/test/unit-tests/components/views/settings/Notifications-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/Notifications-test.tsx
@@ -858,6 +858,20 @@ describe("<Notifications />", () => {
             });
         });
 
+        it("adds a keyword that starts with a dot", async () => {
+            await getComponentAndWait();
+
+            await userEvent.type(screen.getByLabelText("Keyword"), ".jest");
+
+            fireEvent.click(screen.getByText("Add"));
+
+            // The homeserver rejects a rule id beginning with a dot, so only the pattern keeps it.
+            expect(mockClient.addPushRule).toHaveBeenCalledWith("global", PushRuleKind.ContentSpecific, "jest", {
+                actions: [PushRuleActionName.Notify, { set_tweak: "highlight", value: false }],
+                pattern: ".jest",
+            });
+        });
+
         it("adds a new keyword with same actions as existing rules when keywords rule is off", async () => {
             const offContentRule = {
                 ...bananaRule,
diff --git a/apps/web/test/unit-tests/components/views/settings/UserProfileSettings-test.tsx b/apps/web/test/unit-tests/components/views/settings/UserProfileSettings-test.tsx
index c2fb1aaf61..eea092d7f5 100644
--- a/apps/web/test/unit-tests/components/views/settings/UserProfileSettings-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/UserProfileSettings-test.tsx
@@ -12,13 +12,12 @@ import { type MatrixClient, type UploadResponse } from "matrix-js-sdk/src/matrix
 import { mocked } from "jest-mock";
 import userEvent from "@testing-library/user-event";
 import { TooltipProvider } from "@vector-im/compound-web";
+import { ToastContext, type ToastRack } from "@element-hq/web-shared-components";
 
 import UserProfileSettings from "../../../../../src/components/views/settings/UserProfileSettings";
 import { mkStubRoom, stubClient } from "../../../../test-utils";
-import { ToastContext, type ToastRack } from "../../../../../src/contexts/ToastContext";
 import { OwnProfileStore } from "../../../../../src/stores/OwnProfileStore";
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
-import dis from "../../../../../src/dispatcher/dispatcher";
 import Modal from "../../../../../src/Modal";
 
 interface MockedAvatarSettingProps {
@@ -73,7 +72,7 @@ const renderProfileSettings = (toastRack: Partial<ToastRack>, client: MatrixClie
     return render(
         <TooltipProvider>
             <MatrixClientContext.Provider value={client}>
-                <ToastContext.Provider value={toastRack}>
+                <ToastContext.Provider value={toastRack as ToastRack}>
                     <UserProfileSettings canSetAvatar={true} canSetDisplayName={true} />
                 </ToastContext.Provider>
             </MatrixClientContext.Provider>
@@ -218,13 +217,15 @@ describe("ProfileSettings", () => {
         expect(await screen.findByText("Mocked EditInPlace: Alice")).toBeInTheDocument();
     });
 
-    it("signs out directly if no rooms are encrypted", async () => {
+    it("displays confirmation dialog if no rooms are encrypted", async () => {
+        jest.spyOn(Modal, "createDialog");
+
         renderProfileSettings(toastRack, client);
 
         const signOutButton = await screen.findByText("Remove this device");
         await userEvent.click(signOutButton);
 
-        expect(dis.dispatch).toHaveBeenCalledWith({ action: "logout" });
+        expect(Modal.createDialog).toHaveBeenCalled();
     });
 
     it("displays confirmation dialog if rooms are encrypted", async () => {
@@ -234,6 +235,7 @@ describe("ProfileSettings", () => {
         client.getRooms = jest.fn().mockReturnValue([mockRoom]);
         client.getCrypto = jest.fn().mockReturnValue({
             isEncryptionEnabledInRoom: jest.fn().mockReturnValue(true),
+            getUserDeviceInfo: jest.fn().mockResolvedValue(new Map()),
         });
 
         renderProfileSettings(toastRack, client);
diff --git a/apps/web/test/unit-tests/components/views/settings/__snapshots__/EventIndexPanel-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/__snapshots__/EventIndexPanel-test.tsx.snap
index 04a0ae30d1..819accbb68 100644
--- a/apps/web/test/unit-tests/components/views/settings/__snapshots__/EventIndexPanel-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/__snapshots__/EventIndexPanel-test.tsx.snap
@@ -62,7 +62,7 @@ exports[`<EventIndexPanel /> when event indexing is supported but not installed
       Element is missing some components required for securely caching encrypted messages locally. If you'd like to experiment with this feature, build a custom Element Desktop with 
       <a
         class="mx_ExternalLink"
-        href="https://github.com/element-hq/element-web/blob/develop/apps/desktop/docs/native-node-modules.md#adding-seshat-for-search-in-e2e-encrypted-rooms"
+        href="https://github.com/element-hq/element-web/blob/develop/docs/native-node-modules.md#adding-seshat-for-search-in-e2e-encrypted-rooms"
         rel="noreferrer noopener"
         target="_blank"
       >
diff --git a/apps/web/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap
index c13f4b1d5c..4428800769 100644
--- a/apps/web/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap
@@ -19,15 +19,15 @@ exports[`<LayoutSwitcher /> should render 1`] = `
       class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
     >
       <form
-        class="_root_19upo_16 mx_LayoutSwitcher_LayoutSelector"
+        class="_root_1o4d9_17 mx_LayoutSwitcher_LayoutSelector"
       >
         <div
-          class="_field_19upo_26 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
+          class="_field_1o4d9_27 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
         >
           <label
             aria-label="Modern"
-            class="_label_19upo_59"
-            for="radix-_r_0_"
+            class="_label_1o4d9_60"
+            for="radix-react-use-id-1"
           >
             <div
               class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
@@ -38,7 +38,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                 <input
                   checked=""
                   class="_input_1ug7n_18"
-                  id="radix-_r_0_"
+                  id="radix-react-use-id-1"
                   name="layout"
                   title=""
                   type="radio"
@@ -102,7 +102,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                   id="1"
                 >
                   <div
-                    class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
+                    class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"
                   >
                     <div
                       class="mx_EventTile_body translate"
@@ -117,12 +117,12 @@ exports[`<LayoutSwitcher /> should render 1`] = `
           </label>
         </div>
         <div
-          class="_field_19upo_26 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
+          class="_field_1o4d9_27 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
         >
           <label
             aria-label="Message bubbles"
-            class="_label_19upo_59"
-            for="radix-_r_1_"
+            class="_label_1o4d9_60"
+            for="radix-react-use-id-2"
           >
             <div
               class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
@@ -132,7 +132,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
               >
                 <input
                   class="_input_1ug7n_18"
-                  id="radix-_r_1_"
+                  id="radix-react-use-id-2"
                   name="layout"
                   title=""
                   type="radio"
@@ -196,7 +196,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                   id="2"
                 >
                   <div
-                    class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
+                    class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"
                   >
                     <div
                       class="mx_EventTile_body translate"
@@ -211,12 +211,12 @@ exports[`<LayoutSwitcher /> should render 1`] = `
           </label>
         </div>
         <div
-          class="_field_19upo_26 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
+          class="_field_1o4d9_27 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
         >
           <label
             aria-label="IRC (experimental)"
-            class="_label_19upo_59"
-            for="radix-_r_2_"
+            class="_label_1o4d9_60"
+            for="radix-react-use-id-3"
           >
             <div
               class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
@@ -226,7 +226,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
               >
                 <input
                   class="_input_1ug7n_18"
-                  id="radix-_r_2_"
+                  id="radix-react-use-id-3"
                   name="layout"
                   title=""
                   type="radio"
@@ -293,7 +293,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                   id="3"
                 >
                   <div
-                    class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
+                    class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"
                   >
                     <div
                       class="mx_EventTile_body translate"
@@ -309,21 +309,21 @@ exports[`<LayoutSwitcher /> should render 1`] = `
         </div>
       </form>
       <form
-        class="_root_19upo_16"
+        class="_root_1o4d9_17"
       >
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
             >
               <input
-                aria-describedby="radix-_r_4_"
+                aria-describedby="radix-react-use-id-4"
                 class="_input_udcm8_24"
-                id="radix-_r_3_"
+                id="radix-react-use-id-5"
                 name="compactLayout"
                 role="switch"
                 title=""
@@ -335,17 +335,17 @@ exports[`<LayoutSwitcher /> should render 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
-              for="radix-_r_3_"
+              class="_label_1o4d9_60"
+              for="radix-react-use-id-5"
             >
               Show compact text and messages
             </label>
             <span
-              class="_message_19upo_85 _help-message_19upo_91"
-              id="radix-_r_4_"
+              class="_message_1o4d9_86 _help-message_1o4d9_92"
+              id="radix-react-use-id-4"
             >
               Modern layout must be selected to use this feature.
             </span>
diff --git a/apps/web/test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap
index 357f441198..012088d663 100644
--- a/apps/web/test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/__snapshots__/Notifications-test.tsx.snap
@@ -3,20 +3,20 @@
 exports[`<Notifications /> main notification switches renders only enable notifications switch when notifications are disabled 1`] = `
 <div>
   <form
-    class="_root_19upo_16"
+    class="_root_1o4d9_17"
   >
     <div
-      class="_inline-field_19upo_32"
+      class="_inline-field_1o4d9_33"
     >
       <div
-        class="_inline-field-control_19upo_44"
+        class="_inline-field-control_1o4d9_45"
       >
         <div
           class="_container_udcm8_10"
         >
           <input
             class="_input_udcm8_24"
-            id="_r_0_"
+            id="react-use-id-1"
             role="switch"
             type="checkbox"
           />
@@ -26,17 +26,17 @@ exports[`<Notifications /> main notification switches renders only enable notifi
         </div>
       </div>
       <div
-        class="_inline-field-body_19upo_38"
+        class="_inline-field-body_1o4d9_39"
       >
         <label
-          class="_label_19upo_59"
-          for="_r_0_"
+          class="_label_1o4d9_60"
+          for="react-use-id-1"
         >
           Enable notifications for this account
         </label>
         <span
-          class="_message_19upo_85 _help-message_19upo_91"
-          id="radix-_r_2_"
+          class="_message_1o4d9_86 _help-message_1o4d9_92"
+          id="radix-react-use-id-2"
         >
           Turn off to disable notifications on all your devices and sessions
         </span>
@@ -44,13 +44,13 @@ exports[`<Notifications /> main notification switches renders only enable notifi
     </div>
   </form>
   <form
-    class="_root_19upo_16"
+    class="_root_1o4d9_17"
   >
     <div
-      class="_inline-field_19upo_32"
+      class="_inline-field_1o4d9_33"
     >
       <div
-        class="_inline-field-control_19upo_44"
+        class="_inline-field-control_1o4d9_45"
       >
         <div
           class="_container_udcm8_10"
@@ -68,10 +68,10 @@ exports[`<Notifications /> main notification switches renders only enable notifi
         </div>
       </div>
       <div
-        class="_inline-field-body_19upo_38"
+        class="_inline-field-body_1o4d9_39"
       >
         <label
-          class="_label_19upo_59"
+          class="_label_1o4d9_60"
           for="mx_SettingsFlag_testid_0"
         >
           Show all activity in the room list (dots or number of unread messages)
@@ -79,10 +79,10 @@ exports[`<Notifications /> main notification switches renders only enable notifi
       </div>
     </div>
     <div
-      class="_inline-field_19upo_32"
+      class="_inline-field_1o4d9_33"
     >
       <div
-        class="_inline-field-control_19upo_44"
+        class="_inline-field-control_1o4d9_45"
       >
         <div
           class="_container_udcm8_10"
@@ -100,10 +100,10 @@ exports[`<Notifications /> main notification switches renders only enable notifi
         </div>
       </div>
       <div
-        class="_inline-field-body_19upo_38"
+        class="_inline-field-body_1o4d9_39"
       >
         <label
-          class="_label_19upo_59"
+          class="_label_1o4d9_60"
           for="mx_SettingsFlag_testid_1"
         >
           Only show notifications in the thread activity centre
diff --git a/apps/web/test/unit-tests/components/views/settings/__snapshots__/SetIdServer-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/__snapshots__/SetIdServer-test.tsx.snap
index a300ebcde9..3e1bb4bd7a 100644
--- a/apps/web/test/unit-tests/components/views/settings/__snapshots__/SetIdServer-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/__snapshots__/SetIdServer-test.tsx.snap
@@ -23,14 +23,14 @@ exports[`<SetIdServer /> renders expected fields 1`] = `
       class="mx_SettingsFieldset_content"
     >
       <form
-        class="_root_19upo_16 mx_IdentityServerPicker"
+        class="_root_1o4d9_17 mx_IdentityServerPicker"
       >
         <div
-          class="_field_19upo_26"
+          class="_field_1o4d9_27"
         >
           <label
-            class="_label_19upo_59"
-            for="radix-_r_0_"
+            class="_label_1o4d9_60"
+            for="radix-react-use-id-1"
           >
             Enter a new identity server
           </label>
@@ -39,7 +39,7 @@ exports[`<SetIdServer /> renders expected fields 1`] = `
           >
             <input
               class="_control_d83jn_10"
-              id="radix-_r_0_"
+              id="radix-react-use-id-1"
               name="input"
               placeholder=""
               title=""
diff --git a/apps/web/test/unit-tests/components/views/settings/__snapshots__/SetIntegrationManager-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/__snapshots__/SetIntegrationManager-test.tsx.snap
index faaec87a09..4a5827d859 100644
--- a/apps/web/test/unit-tests/components/views/settings/__snapshots__/SetIntegrationManager-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/__snapshots__/SetIntegrationManager-test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`SetIntegrationManager should render manage integrations sections 1`] = `
 <form
-  class="_root_19upo_16 mx_SetIntegrationManager"
+  class="_root_1o4d9_17 mx_SetIntegrationManager"
   data-testid="mx_SetIntegrationManager"
 >
   <div
@@ -42,17 +42,17 @@ exports[`SetIntegrationManager should render manage integrations sections 1`] =
     Integration managers receive configuration data, and can modify widgets, send room invites, and set power levels on your behalf.
   </div>
   <div
-    class="_inline-field_19upo_32"
+    class="_inline-field_1o4d9_33"
   >
     <div
-      class="_inline-field-control_19upo_44"
+      class="_inline-field-control_1o4d9_45"
     >
       <div
         class="_container_udcm8_10"
       >
         <input
           class="_input_udcm8_24"
-          id="_r_0_"
+          id="react-use-id-1"
           role="switch"
           type="checkbox"
         />
@@ -62,11 +62,11 @@ exports[`SetIntegrationManager should render manage integrations sections 1`] =
       </div>
     </div>
     <div
-      class="_inline-field-body_19upo_38"
+      class="_inline-field-body_1o4d9_39"
     >
       <label
-        class="_label_19upo_59"
-        for="_r_0_"
+        class="_label_1o4d9_60"
+        for="react-use-id-1"
       >
         Enable the integration manager
       </label>
diff --git a/apps/web/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
index ca8a668c6b..dfb3bbe6d6 100644
--- a/apps/web/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
@@ -19,20 +19,20 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
       class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
     >
       <form
-        class="_root_19upo_16"
+        class="_root_1o4d9_17"
       >
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
             >
               <input
                 class="_input_udcm8_24"
-                id="radix-_r_28_"
+                id="radix-react-use-id-1"
                 name="systemTheme"
                 role="switch"
                 title=""
@@ -44,11 +44,11 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
-              for="radix-_r_28_"
+              class="_label_1o4d9_60"
+              for="radix-react-use-id-1"
             >
               Match system theme
             </label>
@@ -56,13 +56,13 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
         </div>
       </form>
       <form
-        class="_root_19upo_16 mx_ThemeChoicePanel_ThemeSelectors"
+        class="_root_1o4d9_17 mx_ThemeChoicePanel_ThemeSelectors"
       >
         <div
-          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
+          class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_1ug7n_10"
@@ -70,7 +70,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
               <input
                 checked=""
                 class="_input_1ug7n_18"
-                id="radix-_r_29_"
+                id="radix-react-use-id-2"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -82,28 +82,28 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-_r_29_"
+              class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
+              for="radix-react-use-id-2"
             >
               Light
             </label>
           </div>
         </div>
         <div
-          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
+          class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_1ug7n_10"
             >
               <input
                 class="_input_1ug7n_18"
-                id="radix-_r_2a_"
+                id="radix-react-use-id-3"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -115,28 +115,28 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-_r_2a_"
+              class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
+              for="radix-react-use-id-3"
             >
               Dark
             </label>
           </div>
         </div>
         <div
-          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
+          class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_1ug7n_10"
             >
               <input
                 class="_input_1ug7n_18"
-                id="radix-_r_2b_"
+                id="radix-react-use-id-4"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -148,28 +148,28 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-_r_2b_"
+              class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
+              for="radix-react-use-id-4"
             >
               High contrast
             </label>
           </div>
         </div>
         <div
-          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
+          class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_1ug7n_10"
             >
               <input
                 class="_input_1ug7n_18"
-                id="radix-_r_2c_"
+                id="radix-react-use-id-5"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -181,11 +181,11 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-_r_2c_"
+              class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
+              for="radix-react-use-id-5"
             >
               Alice theme
             </label>
@@ -196,14 +196,14 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
         class="mx_ThemeChoicePanel_CustomTheme"
       >
         <form
-          class="_root_19upo_16 mx_ThemeChoicePanel_CustomTheme_EditInPlace"
+          class="_root_1o4d9_17 mx_ThemeChoicePanel_CustomTheme_EditInPlace"
         >
           <div
-            class="_field_19upo_26"
+            class="_field_1o4d9_27"
           >
             <label
-              class="_label_19upo_59"
-              for="radix-_r_2d_"
+              class="_label_1o4d9_60"
+              for="radix-react-use-id-6"
             >
               Add custom theme
             </label>
@@ -211,17 +211,17 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
               class="_controls_17lij_8"
             >
               <input
-                aria-describedby="radix-_r_2e_"
+                aria-describedby="radix-react-use-id-7"
                 class="_control_d83jn_10"
-                id="radix-_r_2d_"
+                id="radix-react-use-id-6"
                 name="input"
                 title=""
                 value=""
               />
             </div>
             <span
-              class="_message_19upo_85 _help-message_19upo_91"
-              id="radix-_r_2e_"
+              class="_message_1o4d9_86 _help-message_1o4d9_92"
+              id="radix-react-use-id-7"
             >
               Enter the URL of a custom theme you want to apply.
             </span>
@@ -241,7 +241,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
             </span>
             <button
               aria-label="Delete"
-              aria-labelledby="_r_2f_"
+              aria-labelledby="react-use-id-8"
               class="_icon-button_1215g_8 _destructive_1215g_95"
               data-kind="primary"
               role="button"
@@ -298,20 +298,20 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
       class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
     >
       <form
-        class="_root_19upo_16"
+        class="_root_1o4d9_17"
       >
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
             >
               <input
                 class="_input_udcm8_24"
-                id="radix-_r_10_"
+                id="radix-react-use-id-1"
                 name="systemTheme"
                 role="switch"
                 title=""
@@ -323,11 +323,11 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
-              for="radix-_r_10_"
+              class="_label_1o4d9_60"
+              for="radix-react-use-id-1"
             >
               Match system theme
             </label>
@@ -335,13 +335,13 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
         </div>
       </form>
       <form
-        class="_root_19upo_16 mx_ThemeChoicePanel_ThemeSelectors"
+        class="_root_1o4d9_17 mx_ThemeChoicePanel_ThemeSelectors"
       >
         <div
-          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
+          class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_1ug7n_10"
@@ -349,7 +349,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
               <input
                 checked=""
                 class="_input_1ug7n_18"
-                id="radix-_r_11_"
+                id="radix-react-use-id-2"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -361,28 +361,28 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-_r_11_"
+              class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
+              for="radix-react-use-id-2"
             >
               Light
             </label>
           </div>
         </div>
         <div
-          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
+          class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_1ug7n_10"
             >
               <input
                 class="_input_1ug7n_18"
-                id="radix-_r_12_"
+                id="radix-react-use-id-3"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -394,28 +394,28 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-_r_12_"
+              class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
+              for="radix-react-use-id-3"
             >
               Dark
             </label>
           </div>
         </div>
         <div
-          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
+          class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_1ug7n_10"
             >
               <input
                 class="_input_1ug7n_18"
-                id="radix-_r_13_"
+                id="radix-react-use-id-4"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -427,28 +427,28 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-_r_13_"
+              class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
+              for="radix-react-use-id-4"
             >
               High contrast
             </label>
           </div>
         </div>
         <div
-          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
+          class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_1ug7n_10"
             >
               <input
                 class="_input_1ug7n_18"
-                id="radix-_r_14_"
+                id="radix-react-use-id-5"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -460,11 +460,11 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-_r_14_"
+              class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
+              for="radix-react-use-id-5"
             >
               Alice theme
             </label>
@@ -475,14 +475,14 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
         class="mx_ThemeChoicePanel_CustomTheme"
       >
         <form
-          class="_root_19upo_16 mx_ThemeChoicePanel_CustomTheme_EditInPlace"
+          class="_root_1o4d9_17 mx_ThemeChoicePanel_CustomTheme_EditInPlace"
         >
           <div
-            class="_field_19upo_26"
+            class="_field_1o4d9_27"
           >
             <label
-              class="_label_19upo_59"
-              for="radix-_r_15_"
+              class="_label_1o4d9_60"
+              for="radix-react-use-id-6"
             >
               Add custom theme
             </label>
@@ -490,17 +490,17 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
               class="_controls_17lij_8"
             >
               <input
-                aria-describedby="radix-_r_16_"
+                aria-describedby="radix-react-use-id-7"
                 class="_control_d83jn_10"
-                id="radix-_r_15_"
+                id="radix-react-use-id-6"
                 name="input"
                 title=""
                 value=""
               />
             </div>
             <span
-              class="_message_19upo_85 _help-message_19upo_91"
-              id="radix-_r_16_"
+              class="_message_1o4d9_86 _help-message_1o4d9_92"
+              id="radix-react-use-id-7"
             >
               Enter the URL of a custom theme you want to apply.
             </span>
@@ -520,7 +520,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
             </span>
             <button
               aria-label="Delete"
-              aria-labelledby="_r_17_"
+              aria-labelledby="react-use-id-8"
               class="_icon-button_1215g_8 _destructive_1215g_95"
               data-kind="primary"
               role="button"
@@ -577,20 +577,20 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
       class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
     >
       <form
-        class="_root_19upo_16"
+        class="_root_1o4d9_17"
       >
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
             >
               <input
                 class="_input_udcm8_24"
-                id="radix-_r_0_"
+                id="radix-react-use-id-1"
                 name="systemTheme"
                 role="switch"
                 title=""
@@ -602,11 +602,11 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
-              for="radix-_r_0_"
+              class="_label_1o4d9_60"
+              for="radix-react-use-id-1"
             >
               Match system theme
             </label>
@@ -614,13 +614,13 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
         </div>
       </form>
       <form
-        class="_root_19upo_16 mx_ThemeChoicePanel_ThemeSelectors"
+        class="_root_1o4d9_17 mx_ThemeChoicePanel_ThemeSelectors"
       >
         <div
-          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
+          class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_enabled cpd-theme-light"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_1ug7n_10"
@@ -628,7 +628,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
               <input
                 checked=""
                 class="_input_1ug7n_18"
-                id="radix-_r_1_"
+                id="radix-react-use-id-2"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -640,28 +640,28 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-_r_1_"
+              class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
+              for="radix-react-use-id-2"
             >
               Light
             </label>
           </div>
         </div>
         <div
-          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
+          class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector cpd-theme-dark"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_1ug7n_10"
             >
               <input
                 class="_input_1ug7n_18"
-                id="radix-_r_2_"
+                id="radix-react-use-id-3"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -673,28 +673,28 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-_r_2_"
+              class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
+              for="radix-react-use-id-3"
             >
               Dark
             </label>
           </div>
         </div>
         <div
-          class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
+          class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector cpd-theme-light"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_1ug7n_10"
             >
               <input
                 class="_input_1ug7n_18"
-                id="radix-_r_3_"
+                id="radix-react-use-id-4"
                 name="themeSelector"
                 title=""
                 type="radio"
@@ -706,11 +706,11 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-              for="radix-_r_3_"
+              class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
+              for="radix-react-use-id-4"
             >
               High contrast
             </label>
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/CurrentDeviceSection-test.tsx b/apps/web/test/unit-tests/components/views/settings/devices/CurrentDeviceSection-test.tsx
index 6ba46ed528..3912ab590d 100644
--- a/apps/web/test/unit-tests/components/views/settings/devices/CurrentDeviceSection-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/devices/CurrentDeviceSection-test.tsx
@@ -10,20 +10,18 @@ import React from "react";
 import { act, fireEvent, render } from "jest-matrix-react";
 
 import CurrentDeviceSection from "../../../../../../src/components/views/settings/devices/CurrentDeviceSection";
-import { DeviceType } from "../../../../../../src/utils/device/parseUserAgent";
+import type { ExtendedDevice } from "../../../../../../src/components/views/settings/devices/types.ts";
 
 describe("<CurrentDeviceSection />", () => {
     const deviceId = "alices_device";
 
-    const alicesVerifiedDevice = {
+    const alicesVerifiedDevice: ExtendedDevice = {
         device_id: deviceId,
         isVerified: false,
-        deviceType: DeviceType.Unknown,
     };
-    const alicesUnverifiedDevice = {
+    const alicesUnverifiedDevice: ExtendedDevice = {
         device_id: deviceId,
         isVerified: false,
-        deviceType: DeviceType.Unknown,
     };
 
     const defaultProps = {
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/DeviceDetailHeading-test.tsx b/apps/web/test/unit-tests/components/views/settings/devices/DeviceDetailHeading-test.tsx
index 807a91843d..be48cddc3a 100644
--- a/apps/web/test/unit-tests/components/views/settings/devices/DeviceDetailHeading-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/devices/DeviceDetailHeading-test.tsx
@@ -11,16 +11,15 @@ import { fireEvent, render, type RenderResult } from "jest-matrix-react";
 
 import { DeviceDetailHeading } from "../../../../../../src/components/views/settings/devices/DeviceDetailHeading";
 import { flushPromisesWithFakeTimers } from "../../../../../test-utils";
-import { DeviceType } from "../../../../../../src/utils/device/parseUserAgent";
+import type { ExtendedDevice } from "../../../../../../src/components/views/settings/devices/types.ts";
 
 jest.useFakeTimers();
 
 describe("<DeviceDetailHeading />", () => {
-    const device = {
+    const device: ExtendedDevice = {
         device_id: "123",
         display_name: "My device",
         isVerified: true,
-        deviceType: DeviceType.Unknown,
     };
     const defaultProps = {
         device,
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/DeviceDetails-test.tsx b/apps/web/test/unit-tests/components/views/settings/devices/DeviceDetails-test.tsx
index 58179edae8..b5427760df 100644
--- a/apps/web/test/unit-tests/components/views/settings/devices/DeviceDetails-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/devices/DeviceDetails-test.tsx
@@ -12,13 +12,12 @@ import { PUSHER_ENABLED } from "matrix-js-sdk/src/matrix";
 
 import DeviceDetails from "../../../../../../src/components/views/settings/devices/DeviceDetails";
 import { mkPusher } from "../../../../../test-utils/test-utils";
-import { DeviceType } from "../../../../../../src/utils/device/parseUserAgent";
+import type { ExtendedDevice } from "../../../../../../src/components/views/settings/devices/types.ts";
 
 describe("<DeviceDetails />", () => {
-    const baseDevice = {
+    const baseDevice: ExtendedDevice = {
         device_id: "my-device",
         isVerified: false,
-        deviceType: DeviceType.Unknown,
     };
     const defaultProps: ComponentProps<typeof DeviceDetails> = {
         device: baseDevice,
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/DeviceTile-test.tsx b/apps/web/test/unit-tests/components/views/settings/devices/DeviceTile-test.tsx
index a87561d872..612557e8e6 100644
--- a/apps/web/test/unit-tests/components/views/settings/devices/DeviceTile-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/devices/DeviceTile-test.tsx
@@ -11,14 +11,12 @@ import { render } from "jest-matrix-react";
 import { type IMyDevice } from "matrix-js-sdk/src/matrix";
 
 import DeviceTile from "../../../../../../src/components/views/settings/devices/DeviceTile";
-import { DeviceType } from "../../../../../../src/utils/device/parseUserAgent";
 
 describe("<DeviceTile />", () => {
     const defaultProps = {
         device: {
             device_id: "123",
             isVerified: false,
-            deviceType: DeviceType.Unknown,
         },
     };
     const getComponent = (props = {}) => <DeviceTile {...defaultProps} {...props} />;
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/DeviceVerificationStatusCard-test.tsx b/apps/web/test/unit-tests/components/views/settings/devices/DeviceVerificationStatusCard-test.tsx
index 4059c9a6a4..3378678721 100644
--- a/apps/web/test/unit-tests/components/views/settings/devices/DeviceVerificationStatusCard-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/devices/DeviceVerificationStatusCard-test.tsx
@@ -14,14 +14,12 @@ import {
     type DeviceVerificationStatusCardProps,
 } from "../../../../../../src/components/views/settings/devices/DeviceVerificationStatusCard";
 import { type ExtendedDevice } from "../../../../../../src/components/views/settings/devices/types";
-import { DeviceType } from "../../../../../../src/utils/device/parseUserAgent";
 
 describe("<DeviceVerificationStatusCard />", () => {
     const deviceId = "test-device";
     const unverifiedDevice: ExtendedDevice = {
         device_id: deviceId,
         isVerified: false,
-        deviceType: DeviceType.Unknown,
     };
     const verifiedDevice: ExtendedDevice = {
         ...unverifiedDevice,
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/FilteredDeviceList-test.tsx b/apps/web/test/unit-tests/components/views/settings/devices/FilteredDeviceList-test.tsx
index 2992b95a5d..b0aa53542b 100644
--- a/apps/web/test/unit-tests/components/views/settings/devices/FilteredDeviceList-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/devices/FilteredDeviceList-test.tsx
@@ -10,9 +10,11 @@ import React, { type ComponentProps } from "react";
 import { act, fireEvent, render } from "jest-matrix-react";
 
 import { FilteredDeviceList } from "../../../../../../src/components/views/settings/devices/FilteredDeviceList";
-import { DeviceSecurityVariation } from "../../../../../../src/components/views/settings/devices/types";
+import {
+    DeviceSecurityVariation,
+    type ExtendedDevice,
+} from "../../../../../../src/components/views/settings/devices/types";
 import { flushPromises, mockPlatformPeg } from "../../../../../test-utils";
-import { DeviceType } from "../../../../../../src/utils/device/parseUserAgent";
 
 mockPlatformPeg();
 
@@ -21,35 +23,30 @@ describe("<FilteredDeviceList />", () => {
     // 14.03.2022 16:15
     const now = 1647270879403;
     jest.spyOn(global.Date, "now").mockReturnValue(now);
-    const newDevice = {
+    const newDevice: ExtendedDevice = {
         device_id: "new",
         last_seen_ts: Date.now() - 500,
         last_seen_ip: "123.456.789",
         display_name: "My Device",
         isVerified: true,
-        deviceType: DeviceType.Unknown,
     };
-    const unverifiedNoMetadata = {
+    const unverifiedNoMetadata: ExtendedDevice = {
         device_id: "unverified-no-metadata",
         isVerified: false,
-        deviceType: DeviceType.Unknown,
     };
-    const verifiedNoMetadata = {
+    const verifiedNoMetadata: ExtendedDevice = {
         device_id: "verified-no-metadata",
         isVerified: true,
-        deviceType: DeviceType.Unknown,
     };
-    const hundredDaysOld = {
+    const hundredDaysOld: ExtendedDevice = {
         device_id: "100-days-old",
         isVerified: true,
         last_seen_ts: Date.now() - MS_DAY * 100,
-        deviceType: DeviceType.Unknown,
     };
-    const hundredDaysOldUnverified = {
+    const hundredDaysOldUnverified: ExtendedDevice = {
         device_id: "unverified-100-days-old",
         isVerified: false,
         last_seen_ts: Date.now() - MS_DAY * 100,
-        deviceType: DeviceType.Unknown,
     };
     const defaultProps: ComponentProps<typeof FilteredDeviceList> = {
         onFilterChange: jest.fn(),
@@ -115,11 +112,11 @@ describe("<FilteredDeviceList />", () => {
         const setFilter = async (container: HTMLElement, option: DeviceSecurityVariation | string) => {
             const dropdown = container.querySelector('[aria-label="Filter devices"]');
 
-            fireEvent.click(dropdown as Element);
+            fireEvent.click(dropdown!);
             // tick to let dropdown render
             await flushPromises();
 
-            fireEvent.click(container.querySelector(`#device-list-filter__${option}`) as Element);
+            fireEvent.click(container.querySelector(`#device-list-filter__${option}`)!);
         };
 
         it("does not display filter description when filter is falsy", () => {
@@ -222,7 +219,7 @@ describe("<FilteredDeviceList />", () => {
             act(() => {
                 const tile = getByTestId(`device-tile-${hundredDaysOld.device_id}`);
                 const toggle = tile.querySelector('[aria-label="Show details"]');
-                fireEvent.click(toggle as Element);
+                fireEvent.click(toggle!);
             });
 
             expect(onDeviceExpandToggle).toHaveBeenCalledWith(hundredDaysOld.device_id);
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/FilteredDeviceListHeader-test.tsx b/apps/web/test/unit-tests/components/views/settings/devices/FilteredDeviceListHeader-test.tsx
index f2c7e9d138..76c5158926 100644
--- a/apps/web/test/unit-tests/components/views/settings/devices/FilteredDeviceListHeader-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/devices/FilteredDeviceListHeader-test.tsx
@@ -13,10 +13,10 @@ import FilteredDeviceListHeader from "../../../../../../src/components/views/set
 
 describe("<FilteredDeviceListHeader />", () => {
     const defaultProps = {
-        selectedDeviceCount: 0,
-        isAllSelected: false,
-        toggleSelectAll: jest.fn(),
-        children: <div>test</div>,
+        "selectedDeviceCount": 0,
+        "isAllSelected": false,
+        "toggleSelectAll": jest.fn(),
+        "children": <div>test</div>,
         ["data-testid"]: "test123",
     };
     const getComponent = (props = {}) => <FilteredDeviceListHeader {...defaultProps} {...props} />;
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/LoginWithQR-test.tsx b/apps/web/test/unit-tests/components/views/settings/devices/LoginWithQR-test.tsx
index f6c77e4029..6310da50f1 100644
--- a/apps/web/test/unit-tests/components/views/settings/devices/LoginWithQR-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/devices/LoginWithQR-test.tsx
@@ -14,11 +14,22 @@ import {
     MSC4108FailureReason,
     MSC4108SignInWithQR,
     RendezvousError,
+    RendezvousIntent,
 } from "matrix-js-sdk/src/rendezvous";
-import { HTTPError, type MatrixClient, MatrixHttpApi } from "matrix-js-sdk/src/matrix";
+import { makeDelegatedAuthMetadata } from "matrix-js-sdk/src/testing";
+import {
+    AutoDiscovery,
+    AutoDiscoveryAction,
+    HTTPError,
+    type MatrixClient,
+    MatrixHttpApi,
+    OAuthGrantType,
+} from "matrix-js-sdk/src/matrix";
+import fetchMock from "@fetch-mock/jest";
 
 import LoginWithQR, { LoginWithQRFailureReason } from "../../../../../../src/components/views/auth/LoginWithQR";
 import { Click, Mode, Phase } from "../../../../../../src/components/views/auth/LoginWithQR-types";
+import { mockPlatformPeg } from "../../../../../test-utils";
 
 jest.mock("matrix-js-sdk/src/rendezvous/transports");
 jest.mock("matrix-js-sdk/src/rendezvous/channels");
@@ -50,6 +61,7 @@ function makeClient() {
         getClientWellKnown: jest.fn().mockReturnValue({}),
         getCrypto: jest.fn().mockReturnValue({}),
         getDomain: jest.fn(),
+        getAuthMetadata: jest.fn().mockReturnValue(makeDelegatedAuthMetadata()),
     } as unknown as MatrixClient);
 
     cli.http = new MatrixHttpApi(cli, {
@@ -80,209 +92,312 @@ describe("<LoginWithQR />", () => {
     });
 
     afterEach(() => {
-        client = makeClient();
         jest.clearAllMocks();
         jest.useRealTimers();
         cleanup();
     });
 
     describe("MSC4108", () => {
-        const getComponent = (props: {
-            client: MatrixClient;
-            onFinished?: () => void;
-            ref?: RefObject<LoginWithQR | null>;
-        }) => <LoginWithQR {...defaultProps} {...props} />;
-
-        test("render QR then back", async () => {
-            const onFinished = jest.fn();
-            jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols").mockReturnValue(unresolvedPromise());
-            jest.spyOn(MSC4108SignInWithQR.prototype, "generateCode");
-            jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols");
-            jest.spyOn(MSC4108SignInWithQR.prototype, "cancel");
-            const ref = createRef<LoginWithQR>();
-            render(getComponent({ client, onFinished, ref }));
-
-            await waitFor(() =>
-                expect(mockedFlow).toHaveBeenLastCalledWith({
-                    phase: Phase.ShowingQR,
-                    onClick: expect.any(Function),
-                }),
+        describe("reciprocate", () => {
+            const getComponent = (props: {
+                client: MatrixClient;
+                onFinished?: () => void;
+                ref?: RefObject<LoginWithQR | null>;
+            }) => (
+                <LoginWithQR
+                    {...defaultProps}
+                    {...props}
+                    intent={RendezvousIntent.RECIPROCATE_LOGIN_ON_EXISTING_DEVICE}
+                />
             );
 
-            const rendezvous = ref.current!.state.rendezvous!;
-            expect(rendezvous.generateCode).toHaveBeenCalled();
-            expect(rendezvous.negotiateProtocols).toHaveBeenCalled();
+            test("render QR then back", async () => {
+                const onFinished = jest.fn();
+                jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols").mockReturnValue(unresolvedPromise());
+                jest.spyOn(MSC4108SignInWithQR.prototype, "generateCode");
+                jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols");
+                jest.spyOn(MSC4108SignInWithQR.prototype, "cancel");
+                const ref = createRef<LoginWithQR>();
+                render(getComponent({ client, onFinished, ref }));
 
-            // back
-            const onClick = mockedFlow.mock.calls[0][0].onClick;
-            await onClick(Click.Back);
-            expect(onFinished).toHaveBeenCalledWith(false);
-            expect(rendezvous.cancel).toHaveBeenCalledWith(MSC4108FailureReason.UserCancelled);
-        });
-
-        test("should open a new channel if expires before qr scan", async () => {
-            const onFinished = jest.fn();
-            jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols").mockReturnValue(unresolvedPromise());
-            const ref = createRef<LoginWithQR>();
-            render(getComponent({ client, onFinished, ref }));
-
-            await waitFor(() =>
-                expect(mockedFlow).toHaveBeenLastCalledWith({
-                    phase: Phase.ShowingQR,
-                    onClick: expect.any(Function),
-                }),
-            );
-
-            const rendezvous = ref.current!.state.rendezvous!;
-            expect(rendezvous.generateCode).toHaveBeenCalled();
-            expect(rendezvous.negotiateProtocols).toHaveBeenCalled();
-
-            // Expire the channel
-            rendezvous.onFailure!(ClientRendezvousFailureReason.Expired);
-            await jest.runAllTimersAsync();
-            await waitFor(() => expect(ref.current!.state.rendezvous).toBeDefined());
-            expect(ref.current!.state.rendezvous).not.toBe(rendezvous);
-        });
-
-        test("failed to connect", async () => {
-            render(getComponent({ client }));
-            jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols").mockResolvedValue({});
-            jest.spyOn(MSC4108SignInWithQR.prototype, "deviceAuthorizationGrant").mockRejectedValue(
-                new HTTPError("Internal Server Error", 500),
-            );
-            const fn = jest.spyOn(MSC4108SignInWithQR.prototype, "cancel");
-            await waitFor(() => expect(fn).toHaveBeenLastCalledWith(ClientRendezvousFailureReason.Unknown));
-        });
-
-        test("should show error if check code doesn't match", async () => {
-            jest.spyOn(global.window, "open");
-
-            render(getComponent({ client }));
-            jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols").mockResolvedValue({});
-            jest.spyOn(MSC4108SignInWithQR.prototype, "deviceAuthorizationGrant").mockResolvedValue({
-                verificationUri: "mock-verification-uri",
-            });
-
-            await waitFor(() =>
-                expect(mockedFlow).toHaveBeenLastCalledWith({
-                    phase: Phase.OutOfBandConfirmation,
-                    onClick: expect.any(Function),
-                }),
-            );
-
-            const onClick = mockedFlow.mock.calls[0][0].onClick;
-            await onClick(Click.Approve, "12");
-
-            await waitFor(() =>
-                expect(mockedFlow).toHaveBeenLastCalledWith({
-                    phase: Phase.OutOfBandConfirmation,
-                    failureReason: LoginWithQRFailureReason.CheckCodeMismatch,
-                    onClick: expect.any(Function),
-                }),
-            );
-        });
-
-        test("reciprocates login", async () => {
-            const ref = createRef<LoginWithQR>();
-            jest.spyOn(global.window, "open");
-
-            render(getComponent({ client, ref }));
-            jest.spyOn(MSC4108SignInWithQR.prototype, "shareSecrets").mockResolvedValue({});
-            jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols").mockResolvedValue({});
-            jest.spyOn(MSC4108SignInWithQR.prototype, "deviceAuthorizationGrant").mockResolvedValue({
-                verificationUri: "mock-verification-uri",
-            });
-
-            await waitFor(() =>
-                expect(mockedFlow).toHaveBeenLastCalledWith({
-                    phase: Phase.OutOfBandConfirmation,
-                    onClick: expect.any(Function),
-                }),
-            );
-
-            const onClick = mockedFlow.mock.calls[0][0].onClick;
-            await onClick(Click.Approve);
-
-            await waitFor(() =>
-                expect(mockedFlow).toHaveBeenLastCalledWith({
-                    phase: Phase.WaitingForDevice,
-                    onClick: expect.any(Function),
-                }),
-            );
-            expect(global.window.open).toHaveBeenCalledWith("mock-verification-uri", "_blank");
-
-            const rendezvous = ref.current!.state.rendezvous!;
-            expect(rendezvous.shareSecrets).toHaveBeenCalled();
-        });
-
-        test("handles errors during protocol negotiation", async () => {
-            const ref = createRef<LoginWithQR>();
-            render(getComponent({ client, ref }));
-            jest.spyOn(MSC4108SignInWithQR.prototype, "cancel").mockResolvedValue();
-            const err = new RendezvousError("Unknown Failure", MSC4108FailureReason.UnsupportedProtocol);
-            // @ts-ignore work-around for lazy mocks
-            err.code = MSC4108FailureReason.UnsupportedProtocol;
-            jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols").mockRejectedValue(err);
-            await waitFor(() =>
-                expect(mockedFlow).toHaveBeenLastCalledWith(
-                    expect.objectContaining({
+                await waitFor(() =>
+                    expect(mockedFlow).toHaveBeenLastCalledWith({
                         phase: Phase.ShowingQR,
+                        onClick: expect.any(Function),
+                        intent: RendezvousIntent.RECIPROCATE_LOGIN_ON_EXISTING_DEVICE,
                     }),
-                ),
-            );
+                );
 
-            await waitFor(() => {
                 const rendezvous = ref.current!.state.rendezvous!;
-                expect(rendezvous.cancel).toHaveBeenCalledWith(MSC4108FailureReason.UnsupportedProtocol);
+                expect(rendezvous.generateCode).toHaveBeenCalled();
+                expect(rendezvous.negotiateProtocols).toHaveBeenCalled();
+
+                // back (cancel)
+                const onClick = mockedFlow.mock.calls[0][0].onClick;
+                await onClick(Click.Cancel);
+                expect(onFinished).toHaveBeenCalledWith(false);
+                expect(rendezvous.cancel).toHaveBeenCalledWith(MSC4108FailureReason.UserCancelled);
+            });
+
+            test("should open a new channel if expires before qr scan", async () => {
+                const onFinished = jest.fn();
+                jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols").mockReturnValue(unresolvedPromise());
+                const ref = createRef<LoginWithQR>();
+                render(getComponent({ client, onFinished, ref }));
+
+                await waitFor(() =>
+                    expect(mockedFlow).toHaveBeenLastCalledWith({
+                        phase: Phase.ShowingQR,
+                        onClick: expect.any(Function),
+                        intent: RendezvousIntent.RECIPROCATE_LOGIN_ON_EXISTING_DEVICE,
+                    }),
+                );
+
+                const rendezvous = ref.current!.state.rendezvous!;
+                expect(rendezvous.generateCode).toHaveBeenCalled();
+                expect(rendezvous.negotiateProtocols).toHaveBeenCalled();
+
+                // Expire the channel
+                rendezvous.onFailure!(ClientRendezvousFailureReason.Expired);
+                await jest.runAllTimersAsync();
+                await waitFor(() => expect(ref.current!.state.rendezvous).toBeDefined());
+                expect(ref.current!.state.rendezvous).not.toBe(rendezvous);
+            });
+
+            test("failed to connect", async () => {
+                render(getComponent({ client }));
+                jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols").mockResolvedValue({});
+                jest.spyOn(MSC4108SignInWithQR.prototype, "deviceAuthorizationGrant").mockRejectedValue(
+                    new HTTPError("Internal Server Error", 500),
+                );
+                const fn = jest.spyOn(MSC4108SignInWithQR.prototype, "cancel");
+                await waitFor(() => expect(fn).toHaveBeenLastCalledWith(ClientRendezvousFailureReason.Unknown));
+            });
+
+            test("should show error if check code doesn't match", async () => {
+                jest.spyOn(global.window, "open");
+
+                render(getComponent({ client }));
+                jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols").mockResolvedValue({});
+                jest.spyOn(MSC4108SignInWithQR.prototype, "deviceAuthorizationGrant").mockResolvedValue({
+                    verificationUri: "mock-verification-uri",
+                });
+
+                await waitFor(() =>
+                    expect(mockedFlow).toHaveBeenLastCalledWith({
+                        phase: Phase.OutOfBandConfirmation,
+                        onClick: expect.any(Function),
+                        intent: RendezvousIntent.RECIPROCATE_LOGIN_ON_EXISTING_DEVICE,
+                    }),
+                );
+
+                const onClick = mockedFlow.mock.calls[0][0].onClick;
+                await onClick(Click.Approve, "12");
+
+                await waitFor(() =>
+                    expect(mockedFlow).toHaveBeenLastCalledWith({
+                        phase: Phase.OutOfBandConfirmation,
+                        failureReason: LoginWithQRFailureReason.CheckCodeMismatch,
+                        onClick: expect.any(Function),
+                        intent: RendezvousIntent.RECIPROCATE_LOGIN_ON_EXISTING_DEVICE,
+                    }),
+                );
+            });
+
+            test("reciprocates login", async () => {
+                const ref = createRef<LoginWithQR>();
+                jest.spyOn(global.window, "open");
+
+                render(getComponent({ client, ref }));
+                jest.spyOn(MSC4108SignInWithQR.prototype, "shareSecrets").mockResolvedValue({});
+                jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols").mockResolvedValue({});
+                jest.spyOn(MSC4108SignInWithQR.prototype, "deviceAuthorizationGrant").mockResolvedValue({
+                    verificationUri: "mock-verification-uri",
+                });
+
+                await waitFor(() =>
+                    expect(mockedFlow).toHaveBeenLastCalledWith({
+                        phase: Phase.OutOfBandConfirmation,
+                        onClick: expect.any(Function),
+                        intent: RendezvousIntent.RECIPROCATE_LOGIN_ON_EXISTING_DEVICE,
+                    }),
+                );
+
+                const onClick = mockedFlow.mock.calls[0][0].onClick;
+                await onClick(Click.Approve);
+
+                await waitFor(() =>
+                    expect(mockedFlow).toHaveBeenLastCalledWith({
+                        phase: Phase.WaitingForDevice,
+                        onClick: expect.any(Function),
+                        intent: RendezvousIntent.RECIPROCATE_LOGIN_ON_EXISTING_DEVICE,
+                    }),
+                );
+                expect(global.window.open).toHaveBeenCalledWith("mock-verification-uri", "_blank");
+
+                const rendezvous = ref.current!.state.rendezvous!;
+                expect(rendezvous.shareSecrets).toHaveBeenCalled();
+            });
+
+            test("handles errors during protocol negotiation", async () => {
+                const ref = createRef<LoginWithQR>();
+                render(getComponent({ client, ref }));
+                jest.spyOn(MSC4108SignInWithQR.prototype, "cancel").mockResolvedValue();
+                const err = new RendezvousError("Unknown Failure", MSC4108FailureReason.UnsupportedProtocol);
+                // @ts-ignore work-around for lazy mocks
+                err.code = MSC4108FailureReason.UnsupportedProtocol;
+                jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols").mockRejectedValue(err);
+                await waitFor(() =>
+                    expect(mockedFlow).toHaveBeenLastCalledWith(
+                        expect.objectContaining({
+                            phase: Phase.ShowingQR,
+                        }),
+                    ),
+                );
+
+                await waitFor(() => {
+                    const rendezvous = ref.current!.state.rendezvous!;
+                    expect(rendezvous.cancel).toHaveBeenCalledWith(MSC4108FailureReason.UnsupportedProtocol);
+                });
+            });
+
+            test("handles errors during reciprocation", async () => {
+                render(getComponent({ client }));
+                jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols").mockResolvedValue({});
+                jest.spyOn(MSC4108SignInWithQR.prototype, "deviceAuthorizationGrant").mockResolvedValue({});
+                await waitFor(() =>
+                    expect(mockedFlow).toHaveBeenLastCalledWith({
+                        phase: Phase.OutOfBandConfirmation,
+                        onClick: expect.any(Function),
+                        intent: RendezvousIntent.RECIPROCATE_LOGIN_ON_EXISTING_DEVICE,
+                    }),
+                );
+
+                jest.spyOn(MSC4108SignInWithQR.prototype, "shareSecrets").mockRejectedValue(
+                    new HTTPError("Internal Server Error", 500),
+                );
+                const onClick = mockedFlow.mock.calls[0][0].onClick;
+                await onClick(Click.Approve);
+
+                await waitFor(() =>
+                    expect(mockedFlow).toHaveBeenLastCalledWith(
+                        expect.objectContaining({
+                            phase: Phase.Error,
+                            failureReason: ClientRendezvousFailureReason.Unknown,
+                        }),
+                    ),
+                );
+            });
+
+            test("handles user cancelling during reciprocation", async () => {
+                const ref = createRef<LoginWithQR>();
+                render(getComponent({ client, ref }));
+                jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols").mockResolvedValue({});
+                jest.spyOn(MSC4108SignInWithQR.prototype, "deviceAuthorizationGrant").mockResolvedValue({});
+                jest.spyOn(MSC4108SignInWithQR.prototype, "deviceAuthorizationGrant").mockResolvedValue({});
+                await waitFor(() =>
+                    expect(mockedFlow).toHaveBeenLastCalledWith({
+                        phase: Phase.OutOfBandConfirmation,
+                        onClick: expect.any(Function),
+                        intent: RendezvousIntent.RECIPROCATE_LOGIN_ON_EXISTING_DEVICE,
+                    }),
+                );
+
+                jest.spyOn(MSC4108SignInWithQR.prototype, "cancel").mockResolvedValue();
+                const onClick = mockedFlow.mock.calls[0][0].onClick;
+                await onClick(Click.Cancel);
+
+                const rendezvous = ref.current!.state.rendezvous!;
+                expect(rendezvous.cancel).toHaveBeenCalledWith(MSC4108FailureReason.UserCancelled);
             });
         });
 
-        test("handles errors during reciprocation", async () => {
-            render(getComponent({ client }));
-            jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols").mockResolvedValue({});
-            jest.spyOn(MSC4108SignInWithQR.prototype, "deviceAuthorizationGrant").mockResolvedValue({});
-            await waitFor(() =>
-                expect(mockedFlow).toHaveBeenLastCalledWith({
-                    phase: Phase.OutOfBandConfirmation,
-                    onClick: expect.any(Function),
-                }),
+        describe("login", () => {
+            const getComponent = (props: {
+                client: MatrixClient;
+                onFinished?: () => void;
+                onLoggedIn?: () => Promise<void>;
+                ref?: RefObject<LoginWithQR | null>;
+            }) => (
+                <LoginWithQR
+                    onLoggedIn={jest.fn()}
+                    {...defaultProps}
+                    {...props}
+                    intent={RendezvousIntent.LOGIN_ON_NEW_DEVICE}
+                />
             );
 
-            jest.spyOn(MSC4108SignInWithQR.prototype, "shareSecrets").mockRejectedValue(
-                new HTTPError("Internal Server Error", 500),
-            );
-            const onClick = mockedFlow.mock.calls[0][0].onClick;
-            await onClick(Click.Approve);
+            test("should handle qr login", async () => {
+                fetchMock.get("https://hs/_matrix/client/versions", {
+                    unstable_features: {},
+                    versions: ["v1.1", "v1.5", "v1.6", "v1.8", "v1.9", "v1.15"],
+                });
+                const authMetadata = makeDelegatedAuthMetadata("https://auth.org/", [
+                    OAuthGrantType.DeviceAuthorization,
+                ]);
+                fetchMock.get("https://hs/_matrix/client/v1/auth_metadata", authMetadata);
+                fetchMock.post(authMetadata.registration_endpoint!, {
+                    client_id: "!client_id!",
+                });
 
-            await waitFor(() =>
-                expect(mockedFlow).toHaveBeenLastCalledWith(
-                    expect.objectContaining({
-                        phase: Phase.Error,
-                        failureReason: ClientRendezvousFailureReason.Unknown,
+                mockPlatformPeg({
+                    getOAuthClientMetadata: jest.fn().mockReturnValue({
+                        client_name: "App name",
+                        client_uri: "https://company",
+                        redirect_uris: ["https://app"],
+                        logo_uri: "https://company/logo.png",
+                        application_type: "web",
                     }),
-                ),
-            );
-        });
+                });
 
-        test("handles user cancelling during reciprocation", async () => {
-            const ref = createRef<LoginWithQR>();
-            render(getComponent({ client, ref }));
-            jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols").mockResolvedValue({});
-            jest.spyOn(MSC4108SignInWithQR.prototype, "deviceAuthorizationGrant").mockResolvedValue({});
-            jest.spyOn(MSC4108SignInWithQR.prototype, "deviceAuthorizationGrant").mockResolvedValue({});
-            await waitFor(() =>
-                expect(mockedFlow).toHaveBeenLastCalledWith({
-                    phase: Phase.OutOfBandConfirmation,
-                    onClick: expect.any(Function),
-                }),
-            );
+                const ref = createRef<LoginWithQR>();
 
-            jest.spyOn(MSC4108SignInWithQR.prototype, "cancel").mockResolvedValue();
-            const onClick = mockedFlow.mock.calls[0][0].onClick;
-            await onClick(Click.Cancel);
+                render(getComponent({ client, ref }));
+                jest.spyOn(MSC4108SignInWithQR.prototype, "shareSecrets").mockResolvedValue({
+                    secrets: {
+                        cross_signing: {
+                            master_key: "mk",
+                            self_signing_key: "ssk",
+                            user_signing_key: "usk",
+                        },
+                    },
+                });
+                jest.spyOn(MSC4108SignInWithQR.prototype, "negotiateProtocols").mockResolvedValue({ serverName: "hs" });
+                jest.spyOn(MSC4108SignInWithQR.prototype, "deviceAuthorizationGrant").mockResolvedValue({
+                    userCode: "123456",
+                });
+                jest.spyOn(MSC4108SignInWithQR.prototype, "completeLoginOnNewDevice").mockResolvedValue({
+                    access_token: "token",
+                    token_type: "Bearer",
+                });
+                jest.spyOn(AutoDiscovery, "findClientConfig").mockResolvedValue({
+                    "m.homeserver": { base_url: "https://hs", state: AutoDiscoveryAction.SUCCESS },
+                    "m.identity_server": { state: AutoDiscoveryAction.PROMPT },
+                });
 
-            const rendezvous = ref.current!.state.rendezvous!;
-            expect(rendezvous.cancel).toHaveBeenCalledWith(MSC4108FailureReason.UserCancelled);
+                await waitFor(() =>
+                    expect(mockedFlow).toHaveBeenLastCalledWith({
+                        phase: Phase.OutOfBandConfirmation,
+                        onClick: expect.any(Function),
+                        intent: RendezvousIntent.LOGIN_ON_NEW_DEVICE,
+                    }),
+                );
+
+                const onClick = mockedFlow.mock.calls[0][0].onClick;
+                await onClick(Click.Approve);
+
+                await waitFor(() =>
+                    expect(mockedFlow).toHaveBeenLastCalledWith({
+                        phase: Phase.WaitingForDevice,
+                        onClick: expect.any(Function),
+                        intent: RendezvousIntent.LOGIN_ON_NEW_DEVICE,
+                        userCode: "123456",
+                    }),
+                );
+
+                const rendezvous = ref.current!.state.rendezvous!;
+                expect(rendezvous.shareSecrets).toHaveBeenCalled();
+            });
         });
     });
 });
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/LoginWithQRFlow-test.tsx b/apps/web/test/unit-tests/components/views/settings/devices/LoginWithQRFlow-test.tsx
index 5de2e70f1b..b1415a89f7 100644
--- a/apps/web/test/unit-tests/components/views/settings/devices/LoginWithQRFlow-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/devices/LoginWithQRFlow-test.tsx
@@ -6,12 +6,13 @@ 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 { cleanup, fireEvent, render, screen, waitFor } from "jest-matrix-react";
+import { cleanup, fireEvent, render, screen } from "jest-matrix-react";
 import React from "react";
-import { ClientRendezvousFailureReason, MSC4108FailureReason } from "matrix-js-sdk/src/rendezvous";
+import { ClientRendezvousFailureReason, MSC4108FailureReason, RendezvousIntent } from "matrix-js-sdk/src/rendezvous";
 
+import { mockQRCodeRender, resetQRCodeMock, waitForQRCodeRender } from "../../../../../test-utils/qrcode";
 import LoginWithQRFlow from "../../../../../../src/components/views/auth/LoginWithQRFlow";
-import { LoginWithQRFailureReason, type FailureReason } from "../../../../../../src/components/views/auth/LoginWithQR";
+import { type FailureReason, LoginWithQRFailureReason } from "../../../../../../src/components/views/auth/LoginWithQR";
 import { Click, Phase } from "../../../../../../src/components/views/auth/LoginWithQR-types";
 
 describe("<LoginWithQRFlow />", () => {
@@ -26,69 +27,106 @@ describe("<LoginWithQRFlow />", () => {
         onClick?: () => Promise<void>;
         failureReason?: FailureReason;
         code?: Uint8Array;
+        intent: RendezvousIntent;
     }) => <LoginWithQRFlow {...defaultProps} {...props} />;
 
-    beforeEach(() => {});
-
     afterEach(() => {
+        resetQRCodeMock();
         onClick.mockReset();
         cleanup();
     });
 
-    it("renders spinner while loading", async () => {
-        const { container } = render(getComponent({ phase: Phase.Loading }));
-        expect(container).toMatchSnapshot();
-    });
-
-    it("renders spinner whilst QR generating", async () => {
-        const { container } = render(getComponent({ phase: Phase.ShowingQR }));
-        expect(screen.getAllByTestId("spinner")).toHaveLength(1);
-        expect(container).toMatchSnapshot();
-    });
-
-    it("renders QR code", async () => {
-        const { container } = render(
-            getComponent({ phase: Phase.ShowingQR, code: new TextEncoder().encode("mock-code") }),
-        );
-        // QR code is rendered async so we wait for it:
-        await waitFor(() => screen.getAllByAltText("QR Code").length === 1);
-        expect(container).toMatchSnapshot();
-    });
-
-    it("renders spinner while signing in", async () => {
-        const { container } = render(getComponent({ phase: Phase.WaitingForDevice }));
-        expect(screen.getAllByTestId("cancel-button")).toHaveLength(1);
-        expect(container).toMatchSnapshot();
-        fireEvent.click(screen.getByTestId("cancel-button"));
-        expect(onClick).toHaveBeenCalledWith(Click.Cancel, undefined);
-    });
-
-    it("renders spinner while verifying", async () => {
-        const { container } = render(getComponent({ phase: Phase.Verifying }));
-        expect(container).toMatchSnapshot();
-    });
-
-    it("renders check code confirmation", async () => {
-        const { container } = render(getComponent({ phase: Phase.OutOfBandConfirmation }));
-        expect(container).toMatchSnapshot();
-    });
-
-    describe("errors", () => {
-        for (const failureReason of [
-            ...Object.values(MSC4108FailureReason),
-            ...Object.values(LoginWithQRFailureReason),
-            ...Object.values(ClientRendezvousFailureReason),
-        ]) {
-            it(`renders ${failureReason}`, async () => {
+    describe.each([RendezvousIntent.LOGIN_ON_NEW_DEVICE, RendezvousIntent.RECIPROCATE_LOGIN_ON_EXISTING_DEVICE])(
+        "%s",
+        (intent) => {
+            it("renders spinner while loading", async () => {
                 const { container } = render(
                     getComponent({
-                        phase: Phase.Error,
-                        failureReason,
+                        phase: Phase.Loading,
+                        intent,
                     }),
                 );
-                expect(screen.getAllByTestId("cancellation-message")).toHaveLength(1);
                 expect(container).toMatchSnapshot();
             });
-        }
-    });
+
+            it("renders spinner whilst QR generating", async () => {
+                const { container } = render(
+                    getComponent({
+                        phase: Phase.ShowingQR,
+                        intent,
+                    }),
+                );
+                expect(screen.getByTestId("spinner")).toBeVisible();
+                expect(container).toMatchSnapshot();
+            });
+
+            it("renders QR code", async () => {
+                mockQRCodeRender();
+                const { container } = render(
+                    getComponent({
+                        phase: Phase.ShowingQR,
+                        code: new TextEncoder().encode("mock-code"),
+                        intent,
+                    }),
+                );
+                // QR code is rendered async so we wait for it:
+                await waitForQRCodeRender();
+                expect(screen.getAllByAltText("QR Code")).toHaveLength(1);
+                expect(container).toMatchSnapshot();
+            });
+
+            it("renders spinner while signing in", async () => {
+                const { container } = render(
+                    getComponent({
+                        phase: Phase.WaitingForDevice,
+                        intent,
+                    }),
+                );
+                expect(screen.getAllByTestId("cancel-button")).toHaveLength(1);
+                expect(container).toMatchSnapshot();
+                fireEvent.click(screen.getByTestId("cancel-button"));
+                expect(onClick).toHaveBeenCalledWith(Click.Cancel, undefined);
+            });
+
+            it("renders spinner while verifying", async () => {
+                const { container } = render(
+                    getComponent({
+                        phase: Phase.Verifying,
+                        intent,
+                    }),
+                );
+                expect(container).toMatchSnapshot();
+            });
+
+            it("renders check code confirmation", async () => {
+                const { container } = render(
+                    getComponent({
+                        phase: Phase.OutOfBandConfirmation,
+                        intent,
+                    }),
+                );
+                expect(container).toMatchSnapshot();
+            });
+
+            describe("errors", () => {
+                for (const failureReason of [
+                    ...Object.values(MSC4108FailureReason),
+                    ...Object.values(LoginWithQRFailureReason),
+                    ...Object.values(ClientRendezvousFailureReason),
+                ]) {
+                    it(`renders ${failureReason}`, async () => {
+                        const { container } = render(
+                            getComponent({
+                                phase: Phase.Error,
+                                failureReason,
+                                intent,
+                            }),
+                        );
+                        expect(screen.getAllByTestId("cancellation-message")).toHaveLength(1);
+                        expect(container).toMatchSnapshot();
+                    });
+                }
+            });
+        },
+    );
 });
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/SelectableDeviceTile-test.tsx b/apps/web/test/unit-tests/components/views/settings/devices/SelectableDeviceTile-test.tsx
index 44d624f621..b5a38329c4 100644
--- a/apps/web/test/unit-tests/components/views/settings/devices/SelectableDeviceTile-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/devices/SelectableDeviceTile-test.tsx
@@ -10,15 +10,14 @@ import { act, fireEvent, render } from "jest-matrix-react";
 import React from "react";
 
 import SelectableDeviceTile from "../../../../../../src/components/views/settings/devices/SelectableDeviceTile";
-import { DeviceType } from "../../../../../../src/utils/device/parseUserAgent";
+import type { ExtendedDevice } from "../../../../../../src/components/views/settings/devices/types.ts";
 
 describe("<SelectableDeviceTile />", () => {
-    const device = {
+    const device: ExtendedDevice = {
         display_name: "My Device",
         device_id: "my-device",
         last_seen_ip: "123.456.789",
         isVerified: false,
-        deviceType: DeviceType.Unknown,
     };
     const defaultProps = {
         onSelect: jest.fn(),
@@ -55,7 +54,7 @@ describe("<SelectableDeviceTile />", () => {
         const { getByText } = render(getComponent({ onClick }));
 
         act(() => {
-            fireEvent.click(getByText(device.display_name));
+            fireEvent.click(getByText(device.display_name!));
         });
 
         expect(onClick).toHaveBeenCalled();
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceDetailHeading-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceDetailHeading-test.tsx.snap
index 5d42b27b16..9a1ead7c2c 100644
--- a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceDetailHeading-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceDetailHeading-test.tsx.snap
@@ -4,7 +4,6 @@ exports[`<DeviceDetailHeading /> displays name edit form on rename button click
 {
   "container": <div>
     <form
-      aria-disabled="false"
       class="mx_DeviceDetailHeading_renameForm"
       method="post"
     >
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
index c1ccc701a7..8d853999d9 100644
--- a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/DeviceDetails-test.tsx.snap
@@ -263,42 +263,6 @@ exports[`<DeviceDetails /> renders device with metadata 1`] = `
           </tr>
         </thead>
         <tbody>
-          <tr>
-            <td
-              class="mxDeviceDetails_metadataLabel"
-            >
-              Model
-            </td>
-            <td
-              class="mxDeviceDetails_metadataValue"
-            >
-              Iphone X
-            </td>
-          </tr>
-          <tr>
-            <td
-              class="mxDeviceDetails_metadataLabel"
-            >
-              Operating system
-            </td>
-            <td
-              class="mxDeviceDetails_metadataValue"
-            >
-              Windows 95
-            </td>
-          </tr>
-          <tr>
-            <td
-              class="mxDeviceDetails_metadataLabel"
-            >
-              Browser
-            </td>
-            <td
-              class="mxDeviceDetails_metadataValue"
-            >
-              Firefox 100
-            </td>
-          </tr>
           <tr>
             <td
               class="mxDeviceDetails_metadataLabel"
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap
index 69f2e8fcac..574215b6cb 100644
--- a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap
@@ -10,20 +10,20 @@ exports[`<FilteredDeviceListHeader /> renders correctly when all devices are sel
       tabindex="0"
     >
       <form
-        class="_root_19upo_16"
+        class="_root_1o4d9_17"
       >
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_153f2_10"
             >
               <input
                 aria-label="Deselect all"
-                aria-labelledby="_r_9_"
+                aria-labelledby="react-use-id-1"
                 checked=""
                 class="_input_153f2_18"
                 data-testid="device-select-all-checkbox"
@@ -49,7 +49,7 @@ exports[`<FilteredDeviceListHeader /> renders correctly when all devices are sel
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           />
         </div>
       </form>
@@ -76,20 +76,20 @@ exports[`<FilteredDeviceListHeader /> renders correctly when no devices are sele
       tabindex="0"
     >
       <form
-        class="_root_19upo_16"
+        class="_root_1o4d9_17"
       >
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_153f2_10"
             >
               <input
                 aria-label="Select all"
-                aria-labelledby="_r_0_"
+                aria-labelledby="react-use-id-1"
                 class="_input_153f2_18"
                 data-testid="device-select-all-checkbox"
                 id="device-select-all-checkbox"
@@ -114,7 +114,7 @@ exports[`<FilteredDeviceListHeader /> renders correctly when no devices are sele
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           />
         </div>
       </form>
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap
index 63eb09fca7..5a2d4bc705 100644
--- a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`<LoginWithQRFlow /> errors renders authorization_expired 1`] = `
+exports[`<LoginWithQRFlow /> login.reciprocate errors renders authorization_expired 1`] = `
 <div>
   <div
     class="mx_LoginWithQR mx_LoginWithQR_error"
@@ -10,13 +10,15 @@ exports[`<LoginWithQRFlow /> errors renders authorization_expired 1`] = `
       class="mx_LoginWithQR_main"
     >
       <div
-        class="mx_LoginWithQR_icon mx_LoginWithQR_icon--critical"
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
-          height="32px"
+          height="1em"
           viewBox="0 0 24 24"
-          width="32px"
+          width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
@@ -37,12 +39,22 @@ exports[`<LoginWithQRFlow /> errors renders authorization_expired 1`] = `
     </div>
     <div
       class="mx_LoginWithQR_buttons"
-    />
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Try again
+      </button>
+    </div>
   </div>
 </div>
 `;
 
-exports[`<LoginWithQRFlow /> errors renders check_code_mismatch 1`] = `
+exports[`<LoginWithQRFlow /> login.reciprocate errors renders check_code_mismatch 1`] = `
 <div>
   <div
     class="mx_LoginWithQR mx_LoginWithQR_error"
@@ -52,13 +64,15 @@ exports[`<LoginWithQRFlow /> errors renders check_code_mismatch 1`] = `
       class="mx_LoginWithQR_main"
     >
       <div
-        class="mx_LoginWithQR_icon mx_LoginWithQR_icon--critical"
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
-          height="32px"
+          height="1em"
           viewBox="0 0 24 24"
-          width="32px"
+          width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
@@ -79,12 +93,22 @@ exports[`<LoginWithQRFlow /> errors renders check_code_mismatch 1`] = `
     </div>
     <div
       class="mx_LoginWithQR_buttons"
-    />
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Try again
+      </button>
+    </div>
   </div>
 </div>
 `;
 
-exports[`<LoginWithQRFlow /> errors renders device_already_exists 1`] = `
+exports[`<LoginWithQRFlow /> login.reciprocate errors renders device_already_exists 1`] = `
 <div>
   <div
     class="mx_LoginWithQR mx_LoginWithQR_error"
@@ -94,13 +118,15 @@ exports[`<LoginWithQRFlow /> errors renders device_already_exists 1`] = `
       class="mx_LoginWithQR_main"
     >
       <div
-        class="mx_LoginWithQR_icon mx_LoginWithQR_icon--critical"
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
-          height="32px"
+          height="1em"
           viewBox="0 0 24 24"
-          width="32px"
+          width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
@@ -121,12 +147,22 @@ exports[`<LoginWithQRFlow /> errors renders device_already_exists 1`] = `
     </div>
     <div
       class="mx_LoginWithQR_buttons"
-    />
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Try again
+      </button>
+    </div>
   </div>
 </div>
 `;
 
-exports[`<LoginWithQRFlow /> errors renders device_not_found 1`] = `
+exports[`<LoginWithQRFlow /> login.reciprocate errors renders device_not_found 1`] = `
 <div>
   <div
     class="mx_LoginWithQR mx_LoginWithQR_error"
@@ -136,13 +172,15 @@ exports[`<LoginWithQRFlow /> errors renders device_not_found 1`] = `
       class="mx_LoginWithQR_main"
     >
       <div
-        class="mx_LoginWithQR_icon mx_LoginWithQR_icon--critical"
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
-          height="32px"
+          height="1em"
           viewBox="0 0 24 24"
-          width="32px"
+          width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
@@ -163,12 +201,22 @@ exports[`<LoginWithQRFlow /> errors renders device_not_found 1`] = `
     </div>
     <div
       class="mx_LoginWithQR_buttons"
-    />
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Try again
+      </button>
+    </div>
   </div>
 </div>
 `;
 
-exports[`<LoginWithQRFlow /> errors renders etag_missing 1`] = `
+exports[`<LoginWithQRFlow /> login.reciprocate errors renders etag_missing 1`] = `
 <div>
   <div
     class="mx_LoginWithQR mx_LoginWithQR_error"
@@ -178,13 +226,15 @@ exports[`<LoginWithQRFlow /> errors renders etag_missing 1`] = `
       class="mx_LoginWithQR_main"
     >
       <div
-        class="mx_LoginWithQR_icon mx_LoginWithQR_icon--critical"
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
-          height="32px"
+          height="1em"
           viewBox="0 0 24 24"
-          width="32px"
+          width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
@@ -205,12 +255,22 @@ exports[`<LoginWithQRFlow /> errors renders etag_missing 1`] = `
     </div>
     <div
       class="mx_LoginWithQR_buttons"
-    />
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Try again
+      </button>
+    </div>
   </div>
 </div>
 `;
 
-exports[`<LoginWithQRFlow /> errors renders expired 1`] = `
+exports[`<LoginWithQRFlow /> login.reciprocate errors renders expired 1`] = `
 <div>
   <div
     class="mx_LoginWithQR mx_LoginWithQR_error"
@@ -220,13 +280,15 @@ exports[`<LoginWithQRFlow /> errors renders expired 1`] = `
       class="mx_LoginWithQR_main"
     >
       <div
-        class="mx_LoginWithQR_icon mx_LoginWithQR_icon--critical"
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
-          height="32px"
+          height="1em"
           viewBox="0 0 24 24"
-          width="32px"
+          width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
@@ -247,12 +309,22 @@ exports[`<LoginWithQRFlow /> errors renders expired 1`] = `
     </div>
     <div
       class="mx_LoginWithQR_buttons"
-    />
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Try again
+      </button>
+    </div>
   </div>
 </div>
 `;
 
-exports[`<LoginWithQRFlow /> errors renders homeserver_lacks_support 1`] = `
+exports[`<LoginWithQRFlow /> login.reciprocate errors renders homeserver_lacks_support 1`] = `
 <div>
   <div
     class="mx_LoginWithQR mx_LoginWithQR_error"
@@ -292,13 +364,15 @@ exports[`<LoginWithQRFlow /> errors renders homeserver_lacks_support 1`] = `
       class="mx_LoginWithQR_main"
     >
       <div
-        class="mx_LoginWithQR_icon"
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
-          height="32px"
+          height="1em"
           viewBox="0 0 24 24"
-          width="32px"
+          width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
@@ -327,12 +401,22 @@ exports[`<LoginWithQRFlow /> errors renders homeserver_lacks_support 1`] = `
     </div>
     <div
       class="mx_LoginWithQR_buttons"
-    />
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Try again
+      </button>
+    </div>
   </div>
 </div>
 `;
 
-exports[`<LoginWithQRFlow /> errors renders insecure_channel_detected 1`] = `
+exports[`<LoginWithQRFlow /> login.reciprocate errors renders insecure_channel_detected 1`] = `
 <div>
   <div
     class="mx_LoginWithQR mx_LoginWithQR_error"
@@ -342,13 +426,15 @@ exports[`<LoginWithQRFlow /> errors renders insecure_channel_detected 1`] = `
       class="mx_LoginWithQR_main"
     >
       <div
-        class="mx_LoginWithQR_icon mx_LoginWithQR_icon--critical"
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
-          height="32px"
+          height="1em"
           viewBox="0 0 24 24"
-          width="32px"
+          width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
@@ -382,12 +468,22 @@ exports[`<LoginWithQRFlow /> errors renders insecure_channel_detected 1`] = `
     </div>
     <div
       class="mx_LoginWithQR_buttons"
-    />
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Try again
+      </button>
+    </div>
   </div>
 </div>
 `;
 
-exports[`<LoginWithQRFlow /> errors renders invalid_code 1`] = `
+exports[`<LoginWithQRFlow /> login.reciprocate errors renders invalid_code 1`] = `
 <div>
   <div
     class="mx_LoginWithQR mx_LoginWithQR_error"
@@ -397,13 +493,15 @@ exports[`<LoginWithQRFlow /> errors renders invalid_code 1`] = `
       class="mx_LoginWithQR_main"
     >
       <div
-        class="mx_LoginWithQR_icon mx_LoginWithQR_icon--critical"
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
-          height="32px"
+          height="1em"
           viewBox="0 0 24 24"
-          width="32px"
+          width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
@@ -424,12 +522,22 @@ exports[`<LoginWithQRFlow /> errors renders invalid_code 1`] = `
     </div>
     <div
       class="mx_LoginWithQR_buttons"
-    />
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Try again
+      </button>
+    </div>
   </div>
 </div>
 `;
 
-exports[`<LoginWithQRFlow /> errors renders other_device_already_signed_in 1`] = `
+exports[`<LoginWithQRFlow /> login.reciprocate errors renders other_device_already_signed_in 1`] = `
 <div>
   <div
     class="mx_LoginWithQR mx_LoginWithQR_error"
@@ -439,13 +547,15 @@ exports[`<LoginWithQRFlow /> errors renders other_device_already_signed_in 1`] =
       class="mx_LoginWithQR_main"
     >
       <div
-        class="mx_LoginWithQR_icon mx_LoginWithQR_icon--success"
+        class="_big-icon_1ssbv_8"
+        data-kind="success"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
-          height="32px"
+          height="1em"
           viewBox="0 0 24 24"
-          width="32px"
+          width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
@@ -466,12 +576,22 @@ exports[`<LoginWithQRFlow /> errors renders other_device_already_signed_in 1`] =
     </div>
     <div
       class="mx_LoginWithQR_buttons"
-    />
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Try again
+      </button>
+    </div>
   </div>
 </div>
 `;
 
-exports[`<LoginWithQRFlow /> errors renders other_device_not_signed_in 1`] = `
+exports[`<LoginWithQRFlow /> login.reciprocate errors renders other_device_not_signed_in 1`] = `
 <div>
   <div
     class="mx_LoginWithQR mx_LoginWithQR_error"
@@ -481,13 +601,15 @@ exports[`<LoginWithQRFlow /> errors renders other_device_not_signed_in 1`] = `
       class="mx_LoginWithQR_main"
     >
       <div
-        class="mx_LoginWithQR_icon mx_LoginWithQR_icon--critical"
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
-          height="32px"
+          height="1em"
           viewBox="0 0 24 24"
-          width="32px"
+          width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
@@ -508,12 +630,22 @@ exports[`<LoginWithQRFlow /> errors renders other_device_not_signed_in 1`] = `
     </div>
     <div
       class="mx_LoginWithQR_buttons"
-    />
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Try again
+      </button>
+    </div>
   </div>
 </div>
 `;
 
-exports[`<LoginWithQRFlow /> errors renders rate_limited 1`] = `
+exports[`<LoginWithQRFlow /> login.reciprocate errors renders rate_limited 1`] = `
 <div>
   <div
     class="mx_LoginWithQR mx_LoginWithQR_error"
@@ -523,13 +655,15 @@ exports[`<LoginWithQRFlow /> errors renders rate_limited 1`] = `
       class="mx_LoginWithQR_main"
     >
       <div
-        class="mx_LoginWithQR_icon mx_LoginWithQR_icon--critical"
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
-          height="32px"
+          height="1em"
           viewBox="0 0 24 24"
-          width="32px"
+          width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
@@ -550,12 +684,22 @@ exports[`<LoginWithQRFlow /> errors renders rate_limited 1`] = `
     </div>
     <div
       class="mx_LoginWithQR_buttons"
-    />
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Try again
+      </button>
+    </div>
   </div>
 </div>
 `;
 
-exports[`<LoginWithQRFlow /> errors renders unexpected_message_received 1`] = `
+exports[`<LoginWithQRFlow /> login.reciprocate errors renders unexpected_message_received 1`] = `
 <div>
   <div
     class="mx_LoginWithQR mx_LoginWithQR_error"
@@ -565,13 +709,15 @@ exports[`<LoginWithQRFlow /> errors renders unexpected_message_received 1`] = `
       class="mx_LoginWithQR_main"
     >
       <div
-        class="mx_LoginWithQR_icon mx_LoginWithQR_icon--critical"
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
-          height="32px"
+          height="1em"
           viewBox="0 0 24 24"
-          width="32px"
+          width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
@@ -592,12 +738,22 @@ exports[`<LoginWithQRFlow /> errors renders unexpected_message_received 1`] = `
     </div>
     <div
       class="mx_LoginWithQR_buttons"
-    />
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Try again
+      </button>
+    </div>
   </div>
 </div>
 `;
 
-exports[`<LoginWithQRFlow /> errors renders unknown 1`] = `
+exports[`<LoginWithQRFlow /> login.reciprocate errors renders unknown 1`] = `
 <div>
   <div
     class="mx_LoginWithQR mx_LoginWithQR_error"
@@ -607,13 +763,15 @@ exports[`<LoginWithQRFlow /> errors renders unknown 1`] = `
       class="mx_LoginWithQR_main"
     >
       <div
-        class="mx_LoginWithQR_icon mx_LoginWithQR_icon--critical"
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
-          height="32px"
+          height="1em"
           viewBox="0 0 24 24"
-          width="32px"
+          width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
@@ -634,12 +792,22 @@ exports[`<LoginWithQRFlow /> errors renders unknown 1`] = `
     </div>
     <div
       class="mx_LoginWithQR_buttons"
-    />
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Try again
+      </button>
+    </div>
   </div>
 </div>
 `;
 
-exports[`<LoginWithQRFlow /> errors renders unsupported_protocol 1`] = `
+exports[`<LoginWithQRFlow /> login.reciprocate errors renders unsupported_protocol 1`] = `
 <div>
   <div
     class="mx_LoginWithQR mx_LoginWithQR_error"
@@ -649,13 +817,15 @@ exports[`<LoginWithQRFlow /> errors renders unsupported_protocol 1`] = `
       class="mx_LoginWithQR_main"
     >
       <div
-        class="mx_LoginWithQR_icon mx_LoginWithQR_icon--critical"
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
-          height="32px"
+          height="1em"
           viewBox="0 0 24 24"
-          width="32px"
+          width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
@@ -676,12 +846,22 @@ exports[`<LoginWithQRFlow /> errors renders unsupported_protocol 1`] = `
     </div>
     <div
       class="mx_LoginWithQR_buttons"
-    />
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Try again
+      </button>
+    </div>
   </div>
 </div>
 `;
 
-exports[`<LoginWithQRFlow /> errors renders user_cancelled 1`] = `
+exports[`<LoginWithQRFlow /> login.reciprocate errors renders user_cancelled 1`] = `
 <div>
   <div
     class="mx_LoginWithQR mx_LoginWithQR_error"
@@ -691,13 +871,15 @@ exports[`<LoginWithQRFlow /> errors renders user_cancelled 1`] = `
       class="mx_LoginWithQR_main"
     >
       <div
-        class="mx_LoginWithQR_icon mx_LoginWithQR_icon--critical"
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
-          height="32px"
+          height="1em"
           viewBox="0 0 24 24"
-          width="32px"
+          width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
@@ -718,12 +900,22 @@ exports[`<LoginWithQRFlow /> errors renders user_cancelled 1`] = `
     </div>
     <div
       class="mx_LoginWithQR_buttons"
-    />
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Try again
+      </button>
+    </div>
   </div>
 </div>
 `;
 
-exports[`<LoginWithQRFlow /> errors renders user_declined 1`] = `
+exports[`<LoginWithQRFlow /> login.reciprocate errors renders user_declined 1`] = `
 <div>
   <div
     class="mx_LoginWithQR mx_LoginWithQR_error"
@@ -733,13 +925,15 @@ exports[`<LoginWithQRFlow /> errors renders user_declined 1`] = `
       class="mx_LoginWithQR_main"
     >
       <div
-        class="mx_LoginWithQR_icon mx_LoginWithQR_icon--critical"
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
       >
         <svg
           fill="currentColor"
-          height="32px"
+          height="1em"
           viewBox="0 0 24 24"
-          width="32px"
+          width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
@@ -760,12 +954,22 @@ exports[`<LoginWithQRFlow /> errors renders user_declined 1`] = `
     </div>
     <div
       class="mx_LoginWithQR_buttons"
-    />
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Try again
+      </button>
+    </div>
   </div>
 </div>
 `;
 
-exports[`<LoginWithQRFlow /> renders QR code 1`] = `
+exports[`<LoginWithQRFlow /> login.reciprocate renders QR code 1`] = `
 <div>
   <div
     class="mx_LoginWithQR"
@@ -850,7 +1054,7 @@ exports[`<LoginWithQRFlow /> renders QR code 1`] = `
 </div>
 `;
 
-exports[`<LoginWithQRFlow /> renders check code confirmation 1`] = `
+exports[`<LoginWithQRFlow /> login.reciprocate renders check code confirmation 1`] = `
 <div>
   <div
     class="mx_LoginWithQR"
@@ -903,28 +1107,32 @@ exports[`<LoginWithQRFlow /> renders check code confirmation 1`] = `
     <div
       class="mx_LoginWithQR_buttons"
     >
-      <div
-        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
         data-testid="approve-login-button"
         role="button"
         tabindex="0"
       >
         Continue
-      </div>
-      <div
-        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
+      </button>
+      <button
+        class="_button_1nw83_8"
+        data-kind="tertiary"
+        data-size="lg"
         data-testid="decline-login-button"
         role="button"
         tabindex="0"
       >
         Cancel
-      </div>
+      </button>
     </div>
   </div>
 </div>
 `;
 
-exports[`<LoginWithQRFlow /> renders spinner while loading 1`] = `
+exports[`<LoginWithQRFlow /> login.reciprocate renders spinner while loading 1`] = `
 <div>
   <div
     class="mx_LoginWithQR"
@@ -999,7 +1207,7 @@ exports[`<LoginWithQRFlow /> renders spinner while loading 1`] = `
 </div>
 `;
 
-exports[`<LoginWithQRFlow /> renders spinner while signing in 1`] = `
+exports[`<LoginWithQRFlow /> login.reciprocate renders spinner while signing in 1`] = `
 <div>
   <div
     class="mx_LoginWithQR"
@@ -1065,7 +1273,7 @@ exports[`<LoginWithQRFlow /> renders spinner while signing in 1`] = `
             </svg>
           </div>
           <p>
-            Waiting for device to sign in
+            Waiting for your other device
           </p>
         </div>
       </div>
@@ -1073,20 +1281,22 @@ exports[`<LoginWithQRFlow /> renders spinner while signing in 1`] = `
     <div
       class="mx_LoginWithQR_buttons"
     >
-      <div
-        class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
         data-testid="cancel-button"
         role="button"
         tabindex="0"
       >
         Cancel
-      </div>
+      </button>
     </div>
   </div>
 </div>
 `;
 
-exports[`<LoginWithQRFlow /> renders spinner while verifying 1`] = `
+exports[`<LoginWithQRFlow /> login.reciprocate renders spinner while verifying 1`] = `
 <div>
   <div
     class="mx_LoginWithQR"
@@ -1164,7 +1374,7 @@ exports[`<LoginWithQRFlow /> renders spinner while verifying 1`] = `
 </div>
 `;
 
-exports[`<LoginWithQRFlow /> renders spinner whilst QR generating 1`] = `
+exports[`<LoginWithQRFlow /> login.reciprocate renders spinner whilst QR generating 1`] = `
 <div>
   <div
     class="mx_LoginWithQR"
@@ -1261,3 +1471,1410 @@ exports[`<LoginWithQRFlow /> renders spinner whilst QR generating 1`] = `
   </div>
 </div>
 `;
+
+exports[`<LoginWithQRFlow /> login.start errors renders authorization_expired 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR mx_LoginWithQR_error"
+    data-testid="login-with-qr"
+  >
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+          />
+        </svg>
+      </div>
+      <h1
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      >
+        The sign in was not completed in time
+      </h1>
+      <p
+        data-testid="cancellation-message"
+      >
+        Sign in expired. Please try again.
+      </p>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Start over
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQRFlow /> login.start errors renders check_code_mismatch 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR mx_LoginWithQR_error"
+    data-testid="login-with-qr"
+  >
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+          />
+        </svg>
+      </div>
+      <h1
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      >
+        Something went wrong!
+      </h1>
+      <p
+        data-testid="cancellation-message"
+      >
+        An unexpected error occurred. The request to connect your other device has been cancelled.
+      </p>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Start over
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQRFlow /> login.start errors renders device_already_exists 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR mx_LoginWithQR_error"
+    data-testid="login-with-qr"
+  >
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+          />
+        </svg>
+      </div>
+      <h1
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      >
+        Something went wrong!
+      </h1>
+      <p
+        data-testid="cancellation-message"
+      >
+        An unexpected error occurred. The request to connect your other device has been cancelled.
+      </p>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Start over
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQRFlow /> login.start errors renders device_not_found 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR mx_LoginWithQR_error"
+    data-testid="login-with-qr"
+  >
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+          />
+        </svg>
+      </div>
+      <h1
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      >
+        Something went wrong!
+      </h1>
+      <p
+        data-testid="cancellation-message"
+      >
+        An unexpected error occurred. The request to connect your other device has been cancelled.
+      </p>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Start over
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQRFlow /> login.start errors renders etag_missing 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR mx_LoginWithQR_error"
+    data-testid="login-with-qr"
+  >
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+          />
+        </svg>
+      </div>
+      <h1
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      >
+        Something went wrong!
+      </h1>
+      <p
+        data-testid="cancellation-message"
+      >
+        An unexpected error occurred. This may be due to a browser extension, proxy server, or server misconfiguration.
+      </p>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Start over
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQRFlow /> login.start errors renders expired 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR mx_LoginWithQR_error"
+    data-testid="login-with-qr"
+  >
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+          />
+        </svg>
+      </div>
+      <h1
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      >
+        The sign in was not completed in time
+      </h1>
+      <p
+        data-testid="cancellation-message"
+      >
+        Sign in expired. Please try again.
+      </p>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Start over
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQRFlow /> login.start errors renders homeserver_lacks_support 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR mx_LoginWithQR_error"
+    data-testid="login-with-qr"
+  >
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M3 4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm2 5V5h4v4zm-2 5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm2 5v-4h4v4zm9-16a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm1 2v4h4V5z"
+            fill-rule="evenodd"
+          />
+          <path
+            d="M15 16v-3h-2v3z"
+          />
+          <path
+            d="M17 16h-2v2h-2v3h2v-3h2v2h4v-2h-2v-5h-2z"
+          />
+        </svg>
+      </div>
+      <h1
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      >
+        QR code not supported
+      </h1>
+      <p
+        data-testid="cancellation-message"
+      >
+        Your account provider doesn't support signing into a new device with a QR code.
+      </p>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        data-testid="cancel-button"
+        role="button"
+        tabindex="0"
+      >
+        Cancel
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQRFlow /> login.start errors renders insecure_channel_detected 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR mx_LoginWithQR_error"
+    data-testid="login-with-qr"
+  >
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+          />
+        </svg>
+      </div>
+      <h1
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      >
+        Connection not secure
+      </h1>
+      A secure connection could not be made to the new device. Your existing devices are still safe and you don't need to worry about them.
+      <h2
+        class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74"
+        data-testid="cancellation-message"
+      >
+        Now what?
+      </h2>
+      <ol>
+        <li>
+          Try signing in to the other device again with a QR code in case this was a network problem
+        </li>
+        <li>
+          If you encounter the same problem, try a different wifi network or use your mobile data instead of wifi
+        </li>
+        <li>
+          If that doesn't work, sign in manually
+        </li>
+      </ol>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Start over
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQRFlow /> login.start errors renders invalid_code 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR mx_LoginWithQR_error"
+    data-testid="login-with-qr"
+  >
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+          />
+        </svg>
+      </div>
+      <h1
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      >
+        Something went wrong!
+      </h1>
+      <p
+        data-testid="cancellation-message"
+      >
+        An unexpected error occurred. The request to connect your other device has been cancelled.
+      </p>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Start over
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQRFlow /> login.start errors renders other_device_already_signed_in 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR mx_LoginWithQR_error"
+    data-testid="login-with-qr"
+  >
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="_big-icon_1ssbv_8"
+        data-kind="success"
+        data-size="lg"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m10.6 13.8-2.15-2.15a.95.95 0 0 0-.7-.275.95.95 0 0 0-.7.275.95.95 0 0 0-.275.7q0 .425.275.7L9.9 15.9q.3.3.7.3t.7-.3l5.65-5.65a.95.95 0 0 0 .275-.7.95.95 0 0 0-.275-.7.95.95 0 0 0-.7-.275.95.95 0 0 0-.7.275zM12 22a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+          />
+        </svg>
+      </div>
+      <h1
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      >
+        Your other device is already signed in
+      </h1>
+      <p
+        data-testid="cancellation-message"
+      >
+        You don’t need to do anything else.
+      </p>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Start over
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQRFlow /> login.start errors renders other_device_not_signed_in 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR mx_LoginWithQR_error"
+    data-testid="login-with-qr"
+  >
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+          />
+        </svg>
+      </div>
+      <h1
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      >
+        Something went wrong!
+      </h1>
+      <p
+        data-testid="cancellation-message"
+      >
+        An unexpected error occurred. The request to connect your other device has been cancelled.
+      </p>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Start over
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQRFlow /> login.start errors renders rate_limited 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR mx_LoginWithQR_error"
+    data-testid="login-with-qr"
+  >
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+          />
+        </svg>
+      </div>
+      <h1
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      >
+        Something went wrong!
+      </h1>
+      <p
+        data-testid="cancellation-message"
+      >
+        Too many attempts in a short time. Wait some time before trying again.
+      </p>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Start over
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQRFlow /> login.start errors renders unexpected_message_received 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR mx_LoginWithQR_error"
+    data-testid="login-with-qr"
+  >
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+          />
+        </svg>
+      </div>
+      <h1
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      >
+        Something went wrong!
+      </h1>
+      <p
+        data-testid="cancellation-message"
+      >
+        An unexpected error occurred. The request to connect your other device has been cancelled.
+      </p>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Start over
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQRFlow /> login.start errors renders unknown 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR mx_LoginWithQR_error"
+    data-testid="login-with-qr"
+  >
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+          />
+        </svg>
+      </div>
+      <h1
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      >
+        Something went wrong!
+      </h1>
+      <p
+        data-testid="cancellation-message"
+      >
+        An unexpected error occurred. The request to connect your other device has been cancelled.
+      </p>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Start over
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQRFlow /> login.start errors renders unsupported_protocol 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR mx_LoginWithQR_error"
+    data-testid="login-with-qr"
+  >
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+          />
+        </svg>
+      </div>
+      <h1
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      >
+        Other device not compatible
+      </h1>
+      <p
+        data-testid="cancellation-message"
+      >
+        This device does not support signing in to the other device with a QR code.
+      </p>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        role="button"
+        tabindex="0"
+      >
+        Start over
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQRFlow /> login.start errors renders user_cancelled 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR mx_LoginWithQR_error"
+    data-testid="login-with-qr"
+  >
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+          />
+        </svg>
+      </div>
+      <h1
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      >
+        Sign in request cancelled
+      </h1>
+      <p
+        data-testid="cancellation-message"
+      >
+        The sign in was cancelled on the other device.
+      </p>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        data-testid="cancel-button"
+        role="button"
+        tabindex="0"
+      >
+        Cancel
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQRFlow /> login.start errors renders user_declined 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR mx_LoginWithQR_error"
+    data-testid="login-with-qr"
+  >
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="_big-icon_1ssbv_8"
+        data-kind="critical"
+        data-size="lg"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 16q0 .424.287.712.288.288.713.288m0-4q.424 0 .713-.287A.97.97 0 0 0 13 12V8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8v4q0 .424.287.713.288.287.713.287m0 9a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
+          />
+        </svg>
+      </div>
+      <h1
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      >
+        Sign in declined
+      </h1>
+      <p
+        data-testid="cancellation-message"
+      >
+        You or the account provider declined the sign in request.
+      </p>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        data-testid="cancel-button"
+        role="button"
+        tabindex="0"
+      >
+        Cancel
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQRFlow /> login.start renders QR code 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR"
+    data-testid="login-with-qr"
+  >
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <h1
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      >
+        Scan the QR code
+      </h1>
+      <div
+        class="mx_LoginWithQR_qrWrapper"
+      >
+        <div
+          class="mx_QRCode"
+        >
+          <img
+            alt="QR Code"
+            class="mx_VerificationQRCode"
+            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAklEQVR4AewaftIAAAPWSURBVO3BQY5jBxYDweSD7n9lTu+8aQJu+Y+gsjMi/QVJv3VImg5J0yFpOiRNh6TpkDQdkqZD0nRImg5J0yFpOiRNh6TpkDQdkqZD0nRImg5J0yFpOiRNh6TpkDQdkqZD0nRImg5J0yFpevFhSfjJ2vKOJCxtWZLwjrYsSfjJ2vIph6TpkDQdkqZD0nRImg5J04sv0pZvkIRPSsI72vK0tnyDJHyDQ9J0SJoOSdMhaTokTYek6cUPkYSnteVJSXhHW5YkLElY2vKkJDytLd/ukDQdkqZD0nRImg5J0yFpeqHHtGVJwtPaov+vQ9J0SJoOSdMhaTokTYek6YU+oi1LEpa2LElY2qJ/7pA0HZKmQ9J0SJoOSdMhaXrxQ7Tl36ot364t/0WHpOmQNB2SpkPSdEiaXnyRJPxkSVjasiRhacsnJUF/OSRNh6TpkDQdkqZD0nRIml58WFv+i5KwtGVJwtPaor/nkDQdkqZD0nRImg5J0yFpevFhSXhaW5YkfLskvKMtSxLe0ZYnJWFpy7c7JE2HpOmQNB2SpkPSdEia0l/4EklY2rIkYWmL/r4k/Km2LEl4Wls+5ZA0HZKmQ9J0SJoOSdMhaUp/4YOS8C3a8jtJ+KS2vCMJS1uWJHxKW5YkvKMtn3JImg5J0yFpOiRNh6TpkDS9+CJtWZKwtGVJwp9qyzuS8ElteUdb/lQSlra8oy3f7pA0HZKmQ9J0SJoOSdMhaUp/4YOS8Elt+VNJWNrytCQsbVmSsLTlHUn4nbY8LQlLW77BIWk6JE2HpOmQNB2SpkPSlP6CHpGEpS3vSMLSlqcl4UltWZLwjrZ8yiFpOiRNh6TpkDQdkqZD0vTiw5Lwk7XlaUl4WhL0zx2SpkPSdEiaDknTIWk6JE0vvkhbvkESnpaEpS1LEpYkvKMtfyoJS1ve0ZZvd0iaDknTIWk6JE2HpOnFD5GEp7XlGyThHW15RxKWtugvh6TpkDQdkqZD0nRImg5J0ws9pi3vSMLSlk9Kwp9KwtPa8g0OSdMhaTokTYek6ZA0HZKmF3pMEpa2LG15RxKWtixtWZLwpLa8IwlLWz7lkDQdkqZD0nRImg5J0yFpevFDtOXfKglLW5a2vCMJS1v+VBLekYSlLd/gkDQdkqZD0nRImg5J0yFpevFFkvBvlYSnJWFpyzuS8DttWdrytCQsbfmUQ9J0SJoOSdMhaTokTYekKf0FSb91SJoOSdMhaTokTYek6ZA0HZKmQ9J0SJoOSdMhaTokTYek6ZA0HZKmQ9J0SJoOSdMhaTokTYek6ZA0HZKmQ9J0SJoOSdP/AHKVDJXnVp/qAAAAAElFTkSuQmCC"
+          />
+        </div>
+      </div>
+      <ol>
+        <li>
+          Open Element on your mobile device
+        </li>
+        <li>
+          <span>
+            Tap your avatar and select "
+            <strong>
+              Link new device
+            </strong>
+            "
+          </span>
+        </li>
+        <li>
+          <span>
+            Choose "
+            <strong>
+              Desktop computer
+            </strong>
+            "
+          </span>
+        </li>
+        <li>
+          <span>
+            Select "
+            <strong>
+              Ready to scan
+            </strong>
+            " and scan the QR code shown here
+          </span>
+        </li>
+        <li>
+          Follow the remaining instructions
+        </li>
+      </ol>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    />
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQRFlow /> login.start renders check code confirmation 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR"
+    data-testid="login-with-qr"
+  >
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="_big-icon_1ssbv_8"
+        data-kind="primary"
+        data-size="lg"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M7 23q-.824 0-1.412-.587A1.93 1.93 0 0 1 5 21V3q0-.824.588-1.412A1.93 1.93 0 0 1 7 1h10q.824 0 1.413.587Q19 2.176 19 3v18q0 .824-.587 1.413A1.93 1.93 0 0 1 17 23zm0-5h10V6H7z"
+          />
+        </svg>
+      </div>
+      <h1
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      >
+        Enter the number shown on your other device
+      </h1>
+      <p
+        class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
+      >
+        This will verify that the connection to your other device is secure.
+      </p>
+      <label
+        for="mx_LoginWithQR_checkCode"
+      >
+        2-digit code
+      </label>
+      <div
+        class="_container_17qhw_10 mx_LoginWithQR_checkCode_input mx_no_textinput"
+      >
+        <input
+          autocomplete="one-time-code"
+          class="_control_17qhw_25"
+          id="mx_LoginWithQR_checkCode"
+          inputmode="numeric"
+          maxlength="2"
+          minlength="0"
+          pattern="\\d{2}"
+          type="text"
+        />
+        <div
+          aria-hidden="true"
+          class="_digit_17qhw_49"
+        />
+        <div
+          aria-hidden="true"
+          class="_digit_17qhw_49"
+        />
+      </div>
+      <div
+        class="mx_ErrorMessage"
+      />
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        data-testid="approve-login-button"
+        role="button"
+        tabindex="0"
+      >
+        Continue
+      </button>
+      <button
+        class="_button_1nw83_8"
+        data-kind="tertiary"
+        data-size="lg"
+        data-testid="decline-login-button"
+        role="button"
+        tabindex="0"
+      >
+        Cancel
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQRFlow /> login.start renders spinner while loading 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR"
+    data-testid="login-with-qr"
+  >
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="mx_LoginWithQR_spinner"
+      >
+        <div>
+          <div
+            class="mx_Spinner"
+          >
+            <svg
+              aria-label="Loading…"
+              class="_icon_1855a_18"
+              data-testid="spinner"
+              fill="currentColor"
+              height="1em"
+              role="progressbar"
+              style="width: 32px; height: 32px;"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    />
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQRFlow /> login.start renders spinner while signing in 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR"
+    data-testid="login-with-qr"
+  >
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="_big-icon_1ssbv_8"
+        data-kind="primary"
+        data-size="lg"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6 22q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412A1.93 1.93 0 0 1 6 8h1V6q0-2.075 1.463-3.537Q9.926 1 12 1q2.075 0 3.537 1.463Q17 3.925 17 6v2h1q.824 0 1.413.588Q20 9.175 20 10v10q0 .824-.587 1.413A1.93 1.93 0 0 1 18 22zM9 8h6V6q0-1.25-.875-2.125A2.9 2.9 0 0 0 12 3q-1.25 0-2.125.875A2.9 2.9 0 0 0 9 6z"
+          />
+        </svg>
+      </div>
+      <h1
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      >
+        Your verification code
+      </h1>
+      <p
+        class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50"
+      >
+        Your account provider may ask for the following code to verify the sign in.
+      </p>
+      <div
+        class="_container_17qhw_10 mx_LoginWithQR_checkCode_input mx_no_textinput"
+      >
+        <input
+          autocomplete="one-time-code"
+          class="_control_17qhw_25"
+          disabled=""
+          inputmode="numeric"
+          maxlength="6"
+          minlength="0"
+          pattern="\\d{6}"
+          type="text"
+        />
+        <div
+          aria-hidden="true"
+          class="_digit_17qhw_49"
+        />
+        <div
+          aria-hidden="true"
+          class="_digit_17qhw_49"
+        />
+        <div
+          aria-hidden="true"
+          class="_digit_17qhw_49"
+        />
+        <div
+          aria-hidden="true"
+          class="_digit_17qhw_49"
+        />
+        <div
+          aria-hidden="true"
+          class="_digit_17qhw_49"
+        />
+        <div
+          aria-hidden="true"
+          class="_digit_17qhw_49"
+        />
+      </div>
+      <div
+        class="mx_LoginWithQR_spinner"
+      >
+        <div>
+          <div
+            class="mx_Spinner"
+          >
+            <svg
+              aria-label="Loading…"
+              class="_icon_1855a_18"
+              data-testid="spinner"
+              fill="currentColor"
+              height="1em"
+              role="progressbar"
+              style="width: 32px; height: 32px;"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </div>
+          <p>
+            Waiting for your other device
+          </p>
+        </div>
+      </div>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    >
+      <button
+        class="_button_1nw83_8"
+        data-kind="primary"
+        data-size="lg"
+        data-testid="cancel-button"
+        role="button"
+        tabindex="0"
+      >
+        Cancel
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQRFlow /> login.start renders spinner while verifying 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR"
+    data-testid="login-with-qr"
+  >
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <div
+        class="mx_LoginWithQR_spinner"
+      >
+        <div>
+          <div
+            class="mx_Spinner"
+          >
+            <svg
+              aria-label="Loading…"
+              class="_icon_1855a_18"
+              data-testid="spinner"
+              fill="currentColor"
+              height="1em"
+              role="progressbar"
+              style="width: 32px; height: 32px;"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </div>
+          <p>
+            Completing set up of your new device
+          </p>
+        </div>
+      </div>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    />
+  </div>
+</div>
+`;
+
+exports[`<LoginWithQRFlow /> login.start renders spinner whilst QR generating 1`] = `
+<div>
+  <div
+    class="mx_LoginWithQR"
+    data-testid="login-with-qr"
+  >
+    <div
+      class="mx_LoginWithQR_main"
+    >
+      <h1
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      >
+        Scan the QR code
+      </h1>
+      <div
+        class="mx_LoginWithQR_qrWrapper"
+      >
+        <div
+          class="mx_Spinner"
+        >
+          <svg
+            aria-label="Loading…"
+            class="_icon_1855a_18"
+            data-testid="spinner"
+            fill="currentColor"
+            height="1em"
+            role="progressbar"
+            style="width: 32px; height: 32px;"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </div>
+      </div>
+      <ol>
+        <li>
+          Open Element on your mobile device
+        </li>
+        <li>
+          <span>
+            Tap your avatar and select "
+            <strong>
+              Link new device
+            </strong>
+            "
+          </span>
+        </li>
+        <li>
+          <span>
+            Choose "
+            <strong>
+              Desktop computer
+            </strong>
+            "
+          </span>
+        </li>
+        <li>
+          <span>
+            Select "
+            <strong>
+              Ready to scan
+            </strong>
+            " and scan the QR code shown here
+          </span>
+        </li>
+        <li>
+          Follow the remaining instructions
+        </li>
+      </ol>
+    </div>
+    <div
+      class="mx_LoginWithQR_buttons"
+    />
+  </div>
+</div>
+`;
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap
index 1b0f12247c..3d1342eab8 100644
--- a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap
@@ -16,13 +16,13 @@ exports[`<SelectableDeviceTile /> renders unselected device tile with checkbox 1
     class="mx_SelectableDeviceTile"
   >
     <form
-      class="_root_19upo_16"
+      class="_root_1o4d9_17"
     >
       <div
-        class="_inline-field_19upo_32 mx_SelectableDeviceTile_checkbox"
+        class="_inline-field_1o4d9_33 mx_SelectableDeviceTile_checkbox"
       >
         <div
-          class="_inline-field-control_19upo_44"
+          class="_inline-field-control_1o4d9_45"
         >
           <div
             class="_container_153f2_10"
@@ -52,10 +52,10 @@ exports[`<SelectableDeviceTile /> renders unselected device tile with checkbox 1
           </div>
         </div>
         <div
-          class="_inline-field-body_19upo_38"
+          class="_inline-field-body_1o4d9_39"
         >
           <label
-            class="_label_19upo_59"
+            class="_label_1o4d9_60"
             for="device-tile-checkbox-my-device"
           >
             <div
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/deleteDevices-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/deleteDevices-test.ts.snap
similarity index 100%
rename from apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/deleteDevices-test.tsx.snap
rename to apps/web/test/unit-tests/components/views/settings/devices/__snapshots__/deleteDevices-test.ts.snap
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/deleteDevices-test.tsx b/apps/web/test/unit-tests/components/views/settings/devices/deleteDevices-test.ts
similarity index 100%
rename from apps/web/test/unit-tests/components/views/settings/devices/deleteDevices-test.tsx
rename to apps/web/test/unit-tests/components/views/settings/devices/deleteDevices-test.ts
diff --git a/apps/web/test/unit-tests/components/views/settings/devices/filter-test.ts b/apps/web/test/unit-tests/components/views/settings/devices/filter-test.ts
index bf131ac788..daa25e9866 100644
--- a/apps/web/test/unit-tests/components/views/settings/devices/filter-test.ts
+++ b/apps/web/test/unit-tests/components/views/settings/devices/filter-test.ts
@@ -7,38 +7,35 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { filterDevicesBySecurityRecommendation } from "../../../../../../src/components/views/settings/devices/filter";
-import { DeviceSecurityVariation } from "../../../../../../src/components/views/settings/devices/types";
-import { DeviceType } from "../../../../../../src/utils/device/parseUserAgent";
+import {
+    DeviceSecurityVariation,
+    type ExtendedDevice,
+} from "../../../../../../src/components/views/settings/devices/types";
 
 const MS_DAY = 86400000;
 describe("filterDevicesBySecurityRecommendation()", () => {
-    const unverifiedNoMetadata = {
+    const unverifiedNoMetadata: ExtendedDevice = {
         device_id: "unverified-no-metadata",
         isVerified: false,
-        deviceType: DeviceType.Unknown,
     };
-    const verifiedNoMetadata = {
+    const verifiedNoMetadata: ExtendedDevice = {
         device_id: "verified-no-metadata",
         isVerified: true,
-        deviceType: DeviceType.Unknown,
     };
-    const hundredDaysOld = {
+    const hundredDaysOld: ExtendedDevice = {
         device_id: "100-days-old",
         isVerified: true,
         last_seen_ts: Date.now() - MS_DAY * 100,
-        deviceType: DeviceType.Unknown,
     };
-    const hundredDaysOldUnverified = {
+    const hundredDaysOldUnverified: ExtendedDevice = {
         device_id: "unverified-100-days-old",
         isVerified: false,
         last_seen_ts: Date.now() - MS_DAY * 100,
-        deviceType: DeviceType.Unknown,
     };
-    const fiftyDaysOld = {
+    const fiftyDaysOld: ExtendedDevice = {
         device_id: "50-days-old",
         isVerified: true,
         last_seen_ts: Date.now() - MS_DAY * 50,
-        deviceType: DeviceType.Unknown,
     };
 
     const devices = [unverifiedNoMetadata, verifiedNoMetadata, hundredDaysOld, hundredDaysOldUnverified, fiftyDaysOld];
diff --git a/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap
index 17a81ca620..318e424cda 100644
--- a/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/AdvancedPanel-test.tsx.snap
@@ -201,7 +201,7 @@ exports[`<AdvancedPanel /> <EncryptionDetails /> should display the device keys
 
 exports[`<AdvancedPanel /> <OtherSettings /> should display the blacklist of unverified devices settings 1`] = `
 <form
-  class="_root_19upo_16 mx_OtherSettings"
+  class="_root_1o4d9_17 mx_OtherSettings"
   data-testid="otherSettings"
 >
   <h3
@@ -210,19 +210,19 @@ exports[`<AdvancedPanel /> <OtherSettings /> should display the blacklist of unv
     Other people’s devices
   </h3>
   <div
-    class="_inline-field_19upo_32"
+    class="_inline-field_1o4d9_33"
   >
     <div
-      class="_inline-field-control_19upo_44"
+      class="_inline-field-control_1o4d9_45"
     >
       <div
         class="_container_udcm8_10"
       >
         <input
-          aria-describedby="radix-_r_7_"
+          aria-describedby="radix-react-use-id-1"
           checked=""
           class="_input_udcm8_24"
-          id="radix-_r_6_"
+          id="radix-react-use-id-2"
           name="neverSendEncrypted"
           role="switch"
           title=""
@@ -234,17 +234,17 @@ exports[`<AdvancedPanel /> <OtherSettings /> should display the blacklist of unv
       </div>
     </div>
     <div
-      class="_inline-field-body_19upo_38"
+      class="_inline-field-body_1o4d9_39"
     >
       <label
-        class="_label_19upo_59"
-        for="radix-_r_6_"
+        class="_label_1o4d9_60"
+        for="radix-react-use-id-2"
       >
         In encrypted rooms, only send messages to verified users
       </label>
       <span
-        class="_message_19upo_85 _help-message_19upo_91"
-        id="radix-_r_7_"
+        class="_message_1o4d9_86 _help-message_1o4d9_92"
+        id="radix-react-use-id-1"
       >
         Warning: users who have not explicitly verified with you (e.g. using emoji) will not receive your encrypted messages. Also, unverified devices of verified users will not receive your encrypted messages. Changes require an application restart to take effect.
       </span>
diff --git a/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/ChangeRecoveryKey-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/ChangeRecoveryKey-test.tsx.snap
index b3e0bab5fe..40f486f928 100644
--- a/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/ChangeRecoveryKey-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/ChangeRecoveryKey-test.tsx.snap
@@ -6,6 +6,7 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
     class="_breadcrumb_t96w3_8"
   >
     <button
+      aria-disabled="false"
       aria-label="Back"
       class="_icon-button_1215g_8"
       data-kind="secondary"
@@ -35,7 +36,7 @@ exports[`<ChangeRecoveryKey /> flow to change the recovery key should display th
     >
       <li>
         <a
-          class="_link_k9ljz_8"
+          class="_link_13esb_8"
           data-kind="primary"
           data-size="sm"
           rel="noreferrer noopener"
@@ -169,6 +170,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
     class="_breadcrumb_t96w3_8"
   >
     <button
+      aria-disabled="false"
       aria-label="Back"
       class="_icon-button_1215g_8"
       data-kind="secondary"
@@ -198,7 +200,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
     >
       <li>
         <a
-          class="_link_k9ljz_8"
+          class="_link_13esb_8"
           data-kind="primary"
           data-size="sm"
           rel="noreferrer noopener"
@@ -251,32 +253,32 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
       </span>
     </div>
     <form
-      class="_root_19upo_16 mx_KeyForm"
+      class="_root_1o4d9_17 mx_KeyForm"
     >
       <div
-        class="_field_19upo_26"
+        class="_field_1o4d9_27"
       >
         <label
-          class="_label_19upo_59"
-          for="radix-_r_0_"
+          class="_label_1o4d9_60"
+          for="radix-react-use-id-1"
         >
           Enter recovery key
         </label>
         <div
           class="_container_1s836_8 mx_KeyForm_password mx_no_textinput"
-          id="_r_1_"
+          id="react-use-id-2"
         >
           <input
             class="_control_d83jn_10 _control_1s836_13"
-            id="radix-_r_0_"
+            id="radix-react-use-id-1"
             name="recoveryKey"
             required=""
             title="Enter recovery key"
             type="password"
           />
           <button
-            aria-controls="_r_1_"
-            aria-labelledby="_r_2_"
+            aria-controls="react-use-id-2"
+            aria-labelledby="react-use-id-3"
             class="_action_1s836_24"
             type="button"
           >
@@ -329,6 +331,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
     class="_breadcrumb_t96w3_8"
   >
     <button
+      aria-disabled="false"
       aria-label="Back"
       class="_icon-button_1215g_8"
       data-kind="secondary"
@@ -358,7 +361,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
     >
       <li>
         <a
-          class="_link_k9ljz_8"
+          class="_link_13esb_8"
           data-kind="primary"
           data-size="sm"
           rel="noreferrer noopener"
@@ -411,37 +414,37 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
       </span>
     </div>
     <form
-      class="_root_19upo_16 mx_KeyForm"
+      class="_root_1o4d9_17 mx_KeyForm"
     >
       <div
-        class="_field_19upo_26"
+        class="_field_1o4d9_27"
         data-invalid="true"
       >
         <label
-          class="_label_19upo_59"
+          class="_label_1o4d9_60"
           data-invalid="true"
-          for="radix-_r_0_"
+          for="radix-react-use-id-1"
         >
           Enter recovery key
         </label>
         <div
           class="_container_1s836_8 mx_KeyForm_password mx_no_textinput"
-          id="_r_1_"
+          id="react-use-id-2"
         >
           <input
-            aria-describedby="radix-_r_8_"
+            aria-describedby="radix-react-use-id-3"
             aria-invalid="true"
             class="_control_d83jn_10 _control_1s836_13"
             data-invalid="true"
-            id="radix-_r_0_"
+            id="radix-react-use-id-1"
             name="recoveryKey"
             required=""
             title="Enter recovery key"
             type="password"
           />
           <button
-            aria-controls="_r_1_"
-            aria-labelledby="_r_2_"
+            aria-controls="react-use-id-2"
+            aria-labelledby="react-use-id-4"
             class="_action_1s836_24"
             type="button"
           >
@@ -460,8 +463,8 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should ask the user
           </button>
         </div>
         <span
-          class="_message_19upo_85 _error-message_19upo_95"
-          id="radix-_r_8_"
+          class="_message_1o4d9_86 _error-message_1o4d9_96"
+          id="radix-react-use-id-3"
         >
           <svg
             fill="currentColor"
@@ -511,6 +514,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display info
     class="_breadcrumb_t96w3_8"
   >
     <button
+      aria-disabled="false"
       aria-label="Back"
       class="_icon-button_1215g_8"
       data-kind="secondary"
@@ -540,7 +544,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display info
     >
       <li>
         <a
-          class="_link_k9ljz_8"
+          class="_link_13esb_8"
           data-kind="primary"
           data-size="sm"
           rel="noreferrer noopener"
@@ -629,6 +633,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display the
     class="_breadcrumb_t96w3_8"
   >
     <button
+      aria-disabled="false"
       aria-label="Back"
       class="_icon-button_1215g_8"
       data-kind="secondary"
@@ -658,7 +663,7 @@ exports[`<ChangeRecoveryKey /> flow to set up a recovery key should display the
     >
       <li>
         <a
-          class="_link_k9ljz_8"
+          class="_link_13esb_8"
           data-kind="primary"
           data-size="sm"
           rel="noreferrer noopener"
diff --git a/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/DeleteKeyStoragePanel-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/DeleteKeyStoragePanel-test.tsx.snap
index 5547156a18..8cb852bb35 100644
--- a/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/DeleteKeyStoragePanel-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/DeleteKeyStoragePanel-test.tsx.snap
@@ -6,6 +6,7 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
     class="_breadcrumb_t96w3_8"
   >
     <button
+      aria-disabled="false"
       aria-label="Back"
       class="_icon-button_1215g_8"
       data-kind="secondary"
@@ -35,7 +36,7 @@ exports[`<DeleteKeyStoragePanel /> should match snapshot 1`] = `
     >
       <li>
         <a
-          class="_link_k9ljz_8"
+          class="_link_13esb_8"
           data-kind="primary"
           data-size="sm"
           rel="noreferrer noopener"
diff --git a/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap
index 171fb6c67e..444856372b 100644
--- a/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap
@@ -6,6 +6,7 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
     class="_breadcrumb_t96w3_8"
   >
     <button
+      aria-disabled="false"
       aria-label="Back"
       class="_icon-button_1215g_8"
       data-kind="secondary"
@@ -35,7 +36,7 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
     >
       <li>
         <a
-          class="_link_k9ljz_8"
+          class="_link_13esb_8"
           data-kind="primary"
           data-size="sm"
           rel="noreferrer noopener"
@@ -190,6 +191,7 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
     class="_breadcrumb_t96w3_8"
   >
     <button
+      aria-disabled="false"
       aria-label="Back"
       class="_icon-button_1215g_8"
       data-kind="secondary"
@@ -219,7 +221,7 @@ exports[`<ResetIdentityPanel /> should display the 'sync failed' variant correct
     >
       <li>
         <a
-          class="_link_k9ljz_8"
+          class="_link_13esb_8"
           data-kind="primary"
           data-size="sm"
           rel="noreferrer noopener"
@@ -374,6 +376,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
     class="_breadcrumb_t96w3_8"
   >
     <button
+      aria-disabled="false"
       aria-label="Back"
       class="_icon-button_1215g_8"
       data-kind="secondary"
@@ -403,7 +406,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
     >
       <li>
         <a
-          class="_link_k9ljz_8"
+          class="_link_13esb_8"
           data-kind="primary"
           data-size="sm"
           rel="noreferrer noopener"
@@ -561,6 +564,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
     class="_breadcrumb_t96w3_8"
   >
     <button
+      aria-disabled="false"
       aria-label="Back"
       class="_icon-button_1215g_8"
       data-kind="secondary"
@@ -590,7 +594,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
     >
       <li>
         <a
-          class="_link_k9ljz_8"
+          class="_link_13esb_8"
           data-kind="primary"
           data-size="sm"
           rel="noreferrer noopener"
diff --git a/apps/web/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
index ff7f965b4a..167b3b3fdf 100644
--- a/apps/web/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
@@ -12,13 +12,13 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
         class="mx_SettingsSection_subSections"
       >
         <form
-          class="_root_19upo_16 mx_SettingsSubsection_content"
+          class="_root_1o4d9_17 mx_SettingsSubsection_content"
         >
           <div
-            class="_inline-field_19upo_32"
+            class="_inline-field_1o4d9_33"
           >
             <div
-              class="_inline-field-control_19upo_44"
+              class="_inline-field-control_1o4d9_45"
             >
               <div
                 class="_container_udcm8_10"
@@ -27,7 +27,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                   checked=""
                   class="_input_udcm8_24"
                   disabled=""
-                  id="_r_1f_"
+                  id="react-use-id-1"
                   role="switch"
                   type="checkbox"
                 />
@@ -37,21 +37,21 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               </div>
             </div>
             <div
-              class="_inline-field-body_19upo_38"
+              class="_inline-field-body_1o4d9_39"
             >
               <label
-                class="_label_19upo_59"
-                for="_r_1f_"
+                class="_label_1o4d9_60"
+                for="react-use-id-1"
               >
                 Enable notifications for this account
               </label>
             </div>
           </div>
           <div
-            class="_inline-field_19upo_32"
+            class="_inline-field_1o4d9_33"
           >
             <div
-              class="_inline-field-control_19upo_44"
+              class="_inline-field-control_1o4d9_45"
             >
               <div
                 class="_container_udcm8_10"
@@ -68,10 +68,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               </div>
             </div>
             <div
-              class="_inline-field-body_19upo_38"
+              class="_inline-field-body_1o4d9_39"
             >
               <label
-                class="_label_19upo_59"
+                class="_label_1o4d9_60"
                 for="mx_SettingsFlag_vY7Q4uEh9K38"
               >
                 Enable desktop notifications for this session
@@ -79,10 +79,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field_19upo_32"
+            class="_inline-field_1o4d9_33"
           >
             <div
-              class="_inline-field-control_19upo_44"
+              class="_inline-field-control_1o4d9_45"
             >
               <div
                 class="_container_udcm8_10"
@@ -99,10 +99,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               </div>
             </div>
             <div
-              class="_inline-field-body_19upo_38"
+              class="_inline-field-body_1o4d9_39"
             >
               <label
-                class="_label_19upo_59"
+                class="_label_1o4d9_60"
                 for="mx_SettingsFlag_QgU2PomxwKpa"
               >
                 Show message preview in desktop notification
@@ -110,10 +110,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field_19upo_32"
+            class="_inline-field_1o4d9_33"
           >
             <div
-              class="_inline-field-control_19upo_44"
+              class="_inline-field-control_1o4d9_45"
             >
               <div
                 class="_container_udcm8_10"
@@ -131,10 +131,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               </div>
             </div>
             <div
-              class="_inline-field-body_19upo_38"
+              class="_inline-field-body_1o4d9_39"
             >
               <label
-                class="_label_19upo_59"
+                class="_label_1o4d9_60"
                 for="mx_SettingsFlag_6hpi3YEetmBG"
               >
                 Enable audible notifications for this session
@@ -263,13 +263,13 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -300,10 +300,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_4yVCeEefiP"
                     >
                       <span
@@ -320,13 +320,13 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -357,10 +357,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_qpMRMwbPDm"
                     >
                       <span
@@ -377,13 +377,13 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -414,10 +414,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_fGtmGQvdMW"
                     >
                       <span
@@ -451,13 +451,13 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -488,10 +488,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_e954DVIAu5"
                     >
                       <span
@@ -508,13 +508,13 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -544,10 +544,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_CsiHRD7nyr"
                     >
                       <span
@@ -564,13 +564,13 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -601,10 +601,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_A2ohjWVJIP"
                     >
                       <span
@@ -640,10 +640,13 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               <span>
                 Show a badge 
                 <div
-                  class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_notification mx_NotificationBadge_2char cpd-theme-light"
+                  class="mx_NotificationSettings2_notificationBadge _notificationBadge_19whq_8 _visible_19whq_16 _notification_19whq_8 _badge2Char_19whq_57 cpd-theme-light"
+                  data-badge-type="badge_2char"
+                  data-notification-level="notification"
+                  data-testid="notification-badge"
                 >
                   <span
-                    class="mx_NotificationBadge_count"
+                    class="_count_19whq_40"
                   >
                     1
                   </span>
@@ -659,13 +662,13 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -696,10 +699,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_auy1OmnTid"
                     >
                       <span
@@ -717,13 +720,13 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               id="mx_NotificationSettings2_MentionCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -754,10 +757,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_X4ePDS0OpW"
                     >
                       <span
@@ -774,19 +777,19 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
                     >
                       <input
-                        aria-describedby="_r_2g_"
+                        aria-describedby="react-use-id-2"
                         checked=""
                         class="_input_153f2_18"
                         disabled=""
@@ -812,10 +815,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_wAHG75JNTN"
                     >
                       <span
@@ -825,8 +828,8 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                       </span>
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
-                      id="_r_2g_"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
+                      id="react-use-id-2"
                     >
                       Enter keywords here, or use for spelling variations or nicknames
                     </span>
@@ -874,13 +877,13 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
               />
             </div>
             <form
-              class="_root_19upo_16"
+              class="_root_1o4d9_17"
             >
               <div
-                class="_inline-field_19upo_32"
+                class="_inline-field_1o4d9_33"
               >
                 <div
-                  class="_inline-field-control_19upo_44"
+                  class="_inline-field-control_1o4d9_45"
                 >
                   <div
                     class="_container_udcm8_10"
@@ -898,10 +901,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field-body_19upo_38"
+                  class="_inline-field-body_1o4d9_39"
                 >
                   <label
-                    class="_label_19upo_59"
+                    class="_label_1o4d9_60"
                     for="mx_SettingsFlag_kNU64raTLcRs"
                   >
                     Show all activity in the room list (dots or number of unread messages)
@@ -909,10 +912,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                 </div>
               </div>
               <div
-                class="_inline-field_19upo_32"
+                class="_inline-field_1o4d9_33"
               >
                 <div
-                  class="_inline-field-control_19upo_44"
+                  class="_inline-field-control_1o4d9_45"
                 >
                   <div
                     class="_container_udcm8_10"
@@ -930,10 +933,10 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field-body_19upo_38"
+                  class="_inline-field-body_1o4d9_39"
                 >
                   <label
-                    class="_label_19upo_59"
+                    class="_label_1o4d9_60"
                     for="mx_SettingsFlag_QRlYy75nfv5b"
                   >
                     Only show notifications in the thread activity centre
@@ -1037,13 +1040,13 @@ exports[`<Notifications /> matches the snapshot 1`] = `
         class="mx_SettingsSection_subSections"
       >
         <form
-          class="_root_19upo_16 mx_SettingsSubsection_content"
+          class="_root_1o4d9_17 mx_SettingsSubsection_content"
         >
           <div
-            class="_inline-field_19upo_32"
+            class="_inline-field_1o4d9_33"
           >
             <div
-              class="_inline-field-control_19upo_44"
+              class="_inline-field-control_1o4d9_45"
             >
               <div
                 class="_container_udcm8_10"
@@ -1051,7 +1054,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                 <input
                   checked=""
                   class="_input_udcm8_24"
-                  id="_r_0_"
+                  id="react-use-id-1"
                   role="switch"
                   type="checkbox"
                 />
@@ -1061,21 +1064,21 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               </div>
             </div>
             <div
-              class="_inline-field-body_19upo_38"
+              class="_inline-field-body_1o4d9_39"
             >
               <label
-                class="_label_19upo_59"
-                for="_r_0_"
+                class="_label_1o4d9_60"
+                for="react-use-id-1"
               >
                 Enable notifications for this account
               </label>
             </div>
           </div>
           <div
-            class="_inline-field_19upo_32"
+            class="_inline-field_1o4d9_33"
           >
             <div
-              class="_inline-field-control_19upo_44"
+              class="_inline-field-control_1o4d9_45"
             >
               <div
                 class="_container_udcm8_10"
@@ -1092,10 +1095,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               </div>
             </div>
             <div
-              class="_inline-field-body_19upo_38"
+              class="_inline-field-body_1o4d9_39"
             >
               <label
-                class="_label_19upo_59"
+                class="_label_1o4d9_60"
                 for="mx_SettingsFlag_vY7Q4uEh9K38"
               >
                 Enable desktop notifications for this session
@@ -1103,10 +1106,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field_19upo_32"
+            class="_inline-field_1o4d9_33"
           >
             <div
-              class="_inline-field-control_19upo_44"
+              class="_inline-field-control_1o4d9_45"
             >
               <div
                 class="_container_udcm8_10"
@@ -1123,10 +1126,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               </div>
             </div>
             <div
-              class="_inline-field-body_19upo_38"
+              class="_inline-field-body_1o4d9_39"
             >
               <label
-                class="_label_19upo_59"
+                class="_label_1o4d9_60"
                 for="mx_SettingsFlag_QgU2PomxwKpa"
               >
                 Show message preview in desktop notification
@@ -1134,10 +1137,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field_19upo_32"
+            class="_inline-field_1o4d9_33"
           >
             <div
-              class="_inline-field-control_19upo_44"
+              class="_inline-field-control_1o4d9_45"
             >
               <div
                 class="_container_udcm8_10"
@@ -1155,10 +1158,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               </div>
             </div>
             <div
-              class="_inline-field-body_19upo_38"
+              class="_inline-field-body_1o4d9_39"
             >
               <label
-                class="_label_19upo_59"
+                class="_label_1o4d9_60"
                 for="mx_SettingsFlag_6hpi3YEetmBG"
               >
                 Enable audible notifications for this session
@@ -1284,13 +1287,13 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -1320,10 +1323,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_OEPN1su1JY"
                     >
                       <span
@@ -1340,13 +1343,13 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -1376,10 +1379,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_VtOyR5kbu3"
                     >
                       <span
@@ -1396,13 +1399,13 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -1432,10 +1435,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_pEwuLn9Enn"
                     >
                       <span
@@ -1469,13 +1472,13 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -1505,10 +1508,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_YuxfFEpOsz"
                     >
                       <span
@@ -1525,13 +1528,13 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -1560,10 +1563,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_tWhQkBerF1"
                     >
                       <span
@@ -1580,13 +1583,13 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -1616,10 +1619,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_ejc4GFes1U"
                     >
                       <span
@@ -1655,10 +1658,13 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               <span>
                 Show a badge 
                 <div
-                  class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_notification mx_NotificationBadge_2char cpd-theme-light"
+                  class="mx_NotificationSettings2_notificationBadge _notificationBadge_19whq_8 _visible_19whq_16 _notification_19whq_8 _badge2Char_19whq_57 cpd-theme-light"
+                  data-badge-type="badge_2char"
+                  data-notification-level="notification"
+                  data-testid="notification-badge"
                 >
                   <span
-                    class="mx_NotificationBadge_count"
+                    class="_count_19whq_40"
                   >
                     1
                   </span>
@@ -1674,13 +1680,13 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -1710,10 +1716,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_FzOK2nvfGF"
                     >
                       <span
@@ -1731,13 +1737,13 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               id="mx_NotificationSettings2_MentionCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
@@ -1767,10 +1773,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_MldL2r2vbs"
                     >
                       <span
@@ -1787,19 +1793,19 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               class="mx_LabelledCheckbox"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
                     >
                       <input
-                        aria-describedby="_r_11_"
+                        aria-describedby="react-use-id-2"
                         checked=""
                         class="_input_153f2_18"
                         id="checkbox_SwicmKUiOB"
@@ -1824,10 +1830,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_SwicmKUiOB"
                     >
                       <span
@@ -1837,8 +1843,8 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                       </span>
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
-                      id="_r_11_"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
+                      id="react-use-id-2"
                     >
                       Enter keywords here, or use for spelling variations or nicknames
                     </span>
@@ -2100,13 +2106,13 @@ exports[`<Notifications /> matches the snapshot 1`] = `
               </div>
             </div>
             <form
-              class="_root_19upo_16"
+              class="_root_1o4d9_17"
             >
               <div
-                class="_inline-field_19upo_32"
+                class="_inline-field_1o4d9_33"
               >
                 <div
-                  class="_inline-field-control_19upo_44"
+                  class="_inline-field-control_1o4d9_45"
                 >
                   <div
                     class="_container_udcm8_10"
@@ -2124,10 +2130,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field-body_19upo_38"
+                  class="_inline-field-body_1o4d9_39"
                 >
                   <label
-                    class="_label_19upo_59"
+                    class="_label_1o4d9_60"
                     for="mx_SettingsFlag_kNU64raTLcRs"
                   >
                     Show all activity in the room list (dots or number of unread messages)
@@ -2135,10 +2141,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                 </div>
               </div>
               <div
-                class="_inline-field_19upo_32"
+                class="_inline-field_1o4d9_33"
               >
                 <div
-                  class="_inline-field-control_19upo_44"
+                  class="_inline-field-control_1o4d9_45"
                 >
                   <div
                     class="_container_udcm8_10"
@@ -2156,10 +2162,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field-body_19upo_38"
+                  class="_inline-field-body_1o4d9_39"
                 >
                   <label
-                    class="_label_19upo_59"
+                    class="_label_1o4d9_60"
                     for="mx_SettingsFlag_QRlYy75nfv5b"
                   >
                     Only show notifications in the thread activity centre
@@ -2215,13 +2221,13 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                 class="mx_LabelledCheckbox"
               >
                 <form
-                  class="_root_19upo_16"
+                  class="_root_1o4d9_17"
                 >
                   <div
-                    class="_inline-field_19upo_32"
+                    class="_inline-field_1o4d9_33"
                   >
                     <div
-                      class="_inline-field-control_19upo_44"
+                      class="_inline-field-control_1o4d9_45"
                     >
                       <div
                         class="_container_153f2_10"
@@ -2250,10 +2256,10 @@ exports[`<Notifications /> matches the snapshot 1`] = `
                       </div>
                     </div>
                     <div
-                      class="_inline-field-body_19upo_38"
+                      class="_inline-field-body_1o4d9_39"
                     >
                       <label
-                        class="_label_19upo_59"
+                        class="_label_1o4d9_60"
                         for="checkbox_dvqsxEaZtl"
                       >
                         <span
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/room/NotificationSettingsTab-test.tsx b/apps/web/test/unit-tests/components/views/settings/tabs/room/NotificationSettingsTab-test.tsx
index 3d0cc39a2e..cda673f41f 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/room/NotificationSettingsTab-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/room/NotificationSettingsTab-test.tsx
@@ -45,7 +45,9 @@ describe("NotificationSettingsTab", () => {
         const tab = renderTab();
 
         // settings link of mentions_only volume
-        const settingsLink = within(tab.getByText("@mentions & keywords")).getByRole("button", { name: "settings" });
+        const settingsLink = within(tab.getByText("@mentions and replies only")).getByRole("button", {
+            name: "settings",
+        });
         if (!settingsLink) throw new Error("settings link does not exist.");
 
         await userEvent.click(settingsLink);
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/room/RolesRoomSettingsTab-test.tsx b/apps/web/test/unit-tests/components/views/settings/tabs/room/RolesRoomSettingsTab-test.tsx
index 42538204cb..52487800b8 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/room/RolesRoomSettingsTab-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/room/RolesRoomSettingsTab-test.tsx
@@ -23,7 +23,7 @@ import userEvent from "@testing-library/user-event";
 import RolesRoomSettingsTab from "../../../../../../../src/components/views/settings/tabs/room/RolesRoomSettingsTab";
 import { mkStubRoom, withClientContextRenderOptions, stubClient } from "../../../../../../test-utils";
 import { MatrixClientPeg } from "../../../../../../../src/MatrixClientPeg";
-import SettingsStore from "../../../../../../../src/settings/SettingsStore";
+import SdkConfig from "../../../../../../../src/SdkConfig";
 import { ElementCallEventType, ElementCallMemberEventType } from "../../../../../../../src/call-types";
 
 describe("RolesRoomSettingsTab", () => {
@@ -75,11 +75,13 @@ describe("RolesRoomSettingsTab", () => {
 
     describe("Element Call", () => {
         const setGroupCallsEnabled = (val: boolean): void => {
-            jest.spyOn(SettingsStore, "getValue").mockImplementation((name: string): any => {
-                if (name === "feature_group_calls") return val;
-            });
+            SdkConfig.put({ element_call: { disable: !val } });
         };
 
+        afterEach(() => {
+            SdkConfig.reset();
+        });
+
         const getStartCallSelect = (tab: RenderResult): HTMLElement => {
             return tab.container.querySelector("select[label='Start Element Call calls']")!;
         };
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/room/SecurityRoomSettingsTab-test.tsx b/apps/web/test/unit-tests/components/views/settings/tabs/room/SecurityRoomSettingsTab-test.tsx
index 6eb3900468..f744cc1d33 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/room/SecurityRoomSettingsTab-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/room/SecurityRoomSettingsTab-test.tsx
@@ -581,4 +581,60 @@ describe("<SecurityRoomSettingsTab />", () => {
             });
         });
     });
+
+    describe("public room address warning", () => {
+        const warning = "To link to this room, please add an address.";
+
+        const setCanonicalAlias = (room: Room, content: object): void => {
+            room.currentState.setStateEvents([
+                new MatrixEvent({
+                    type: EventType.RoomCanonicalAlias,
+                    content,
+                    sender: userId,
+                    state_key: "",
+                    room_id: room.roomId,
+                }),
+            ]);
+        };
+
+        const renderPublicRoom = async (configure?: (room: Room) => void): Promise<void> => {
+            const room = new Room(roomId, client, userId);
+            setRoomStateEvents(room, JoinRule.Public);
+            configure?.(room);
+            getComponent(room);
+            await flushPromises();
+        };
+
+        it("warns when the room has no address anywhere", async () => {
+            client.getLocalAliases.mockResolvedValue({ aliases: [] });
+
+            await renderPublicRoom();
+
+            expect(screen.getByText(warning)).toBeInTheDocument();
+        });
+
+        it("does not warn when the room's main address is on another server", async () => {
+            client.getLocalAliases.mockResolvedValue({ aliases: [] });
+
+            await renderPublicRoom((room) => setCanonicalAlias(room, { alias: "#room:other.server.org" }));
+
+            expect(screen.queryByText(warning)).not.toBeInTheDocument();
+        });
+
+        it("does not warn when the room only has alternative addresses", async () => {
+            client.getLocalAliases.mockResolvedValue({ aliases: [] });
+
+            await renderPublicRoom((room) => setCanonicalAlias(room, { alt_aliases: ["#room:other.server.org"] }));
+
+            expect(screen.queryByText(warning)).not.toBeInTheDocument();
+        });
+
+        it("does not warn when the local server has an address for the room", async () => {
+            client.getLocalAliases.mockResolvedValue({ aliases: ["#room:server.org"] });
+
+            await renderPublicRoom();
+
+            expect(screen.queryByText(warning)).not.toBeInTheDocument();
+        });
+    });
 });
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap
index b4d4bacd02..b90c094f38 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap
@@ -43,25 +43,32 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = `
                 >
                   !room:example.com
                   <button
-                    aria-label="Copy"
-                    class="mx_AccessibleButton mx_CopyableText_copyButton"
+                    aria-labelledby="react-use-id-1"
+                    class="_icon-button_1215g_8 mx_CopyableText_copyButton"
+                    data-kind="primary"
                     role="button"
+                    style="--cpd-icon-button-size: 28px; padding: 4px;"
                     tabindex="0"
                   >
-                    <svg
-                      fill="currentColor"
-                      height="1em"
-                      viewBox="0 0 24 24"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <div
+                      class="_indicator-icon_147l5_17"
+                      style="--cpd-icon-button-size: 100%;"
                     >
-                      <path
-                        d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
-                      />
-                      <path
-                        d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
-                      />
-                    </svg>
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
+                        />
+                        <path
+                          d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
+                        />
+                      </svg>
+                    </div>
                   </button>
                 </span>
               </div>
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap
index fdce6dcec0..8693deca40 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/room/__snapshots__/SecurityRoomSettingsTab-test.tsx.snap
@@ -123,6 +123,7 @@ exports[`<SecurityRoomSettingsTab /> join rule handles error when updating join
   >
     <button
       class="mx_Dialog_primary"
+      type="button"
     >
       OK
     </button>
@@ -208,6 +209,7 @@ exports[`<SecurityRoomSettingsTab /> join rule warns when trying to make an encr
       class="mx_Dialog_buttons_row"
     >
       <button
+        class="cancel"
         data-testid="dialog-cancel-button"
         type="button"
       >
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/user/AccountUserSettingsTab-test.tsx b/apps/web/test/unit-tests/components/views/settings/tabs/user/AccountUserSettingsTab-test.tsx
index b12ba3a4ab..c9b5356d27 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/user/AccountUserSettingsTab-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/user/AccountUserSettingsTab-test.tsx
@@ -11,10 +11,12 @@ import React from "react";
 import { type MatrixClient, ThreepidMedium } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 import userEvent from "@testing-library/user-event";
-import { type MockedObject } from "jest-mock";
+import { type MockedObject } from "jest-mock-vitest-adapter";
+import { ToastContext, ToastRack } from "@element-hq/web-shared-components";
 
 import AccountUserSettingsTab from "../../../../../../../src/components/views/settings/tabs/user/AccountUserSettingsTab";
-import { SdkContextClass, SDKContext } from "../../../../../../../src/contexts/SDKContext";
+import { SDKContext } from "../../../../../../../src/contexts/SDKContext";
+import { TestSDKContext } from "../../../../../TestSDKContext.ts";
 import SettingsStore from "../../../../../../../src/settings/SettingsStore";
 import {
     getMockClientWithEventEmitter,
@@ -24,7 +26,6 @@ import {
     flushPromises,
 } from "../../../../../../test-utils";
 import { UIFeature } from "../../../../../../../src/settings/UIFeature";
-import { type OidcClientStore } from "../../../../../../../src/stores/oidc/OidcClientStore";
 import MatrixClientContext from "../../../../../../../src/contexts/MatrixClientContext";
 import Modal from "../../../../../../../src/Modal";
 
@@ -49,12 +50,14 @@ describe("<AccountUserSettingsTab />", () => {
     const userId = "@alice:server.org";
     let mockClient: MockedObject<MatrixClient>;
 
-    let stores: SdkContextClass;
+    let stores: TestSDKContext;
 
     const getComponent = () => (
         <MatrixClientContext.Provider value={mockClient}>
             <SDKContext.Provider value={stores}>
-                <AccountUserSettingsTab {...defaultProps} />
+                <ToastContext.Provider value={new ToastRack()}>
+                    <AccountUserSettingsTab {...defaultProps} />
+                </ToastContext.Provider>
             </SDKContext.Provider>
         </MatrixClientContext.Provider>
     );
@@ -73,6 +76,8 @@ describe("<AccountUserSettingsTab />", () => {
             getThreePids: jest.fn(),
             getIdentityServerUrl: jest.fn(),
             deleteThreePid: jest.fn(),
+            getMediaConfig: jest.fn(),
+            getAuthMetadata: jest.fn().mockRejectedValue(new Error("not implemented")),
         });
 
         mockClient.getCapabilities.mockResolvedValue({});
@@ -83,11 +88,8 @@ describe("<AccountUserSettingsTab />", () => {
             id_server_unbind_result: "success",
         });
 
-        stores = new SdkContextClass();
-        stores.client = mockClient;
-        // stub out this store completely to avoid mocking initialisation
-        const mockOidcClientStore = {} as unknown as OidcClientStore;
-        jest.spyOn(stores, "oidcClientStore", "get").mockReturnValue(mockOidcClientStore);
+        stores = new TestSDKContext();
+        stores._client = mockClient;
     });
 
     afterEach(() => {
@@ -103,10 +105,9 @@ describe("<AccountUserSettingsTab />", () => {
 
     it("show account management link in expected format", async () => {
         const accountManagementLink = "https://id.server.org/my-account";
-        const mockOidcClientStore = {
-            accountManagementEndpoint: accountManagementLink,
-        } as unknown as OidcClientStore;
-        jest.spyOn(stores, "oidcClientStore", "get").mockReturnValue(mockOidcClientStore);
+        mockClient.getAuthMetadata.mockResolvedValue({
+            account_management_uri: accountManagementLink,
+        } as any);
 
         render(getComponent());
 
@@ -130,10 +131,9 @@ describe("<AccountUserSettingsTab />", () => {
             );
             // account is managed externally when we have delegated auth configured
             const accountManagementLink = "https://id.server.org/my-account";
-            const mockOidcClientStore = {
-                accountManagementEndpoint: accountManagementLink,
-            } as unknown as OidcClientStore;
-            jest.spyOn(stores, "oidcClientStore", "get").mockReturnValue(mockOidcClientStore);
+            mockClient.getAuthMetadata.mockResolvedValue({
+                account_management_uri: accountManagementLink,
+            } as any);
             render(getComponent());
 
             await flushPromises();
@@ -203,11 +203,6 @@ describe("<AccountUserSettingsTab />", () => {
 
     describe("3pids", () => {
         beforeEach(() => {
-            const mockOidcClientStore = {
-                accountManagementEndpoint: undefined,
-            } as unknown as OidcClientStore;
-            jest.spyOn(stores, "oidcClientStore", "get").mockReturnValue(mockOidcClientStore);
-
             mockClient.getCapabilities.mockResolvedValue({
                 "m.3pid_changes": {
                     enabled: true,
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/user/MediaPreviewAccountSettingsTab-test.tsx b/apps/web/test/unit-tests/components/views/settings/tabs/user/MediaPreviewAccountSettingsTab-test.tsx
index e5946c070d..9b942bff29 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/user/MediaPreviewAccountSettingsTab-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/user/MediaPreviewAccountSettingsTab-test.tsx
@@ -18,7 +18,7 @@ import {
 } from "../../../../../../test-utils";
 import MatrixClientBackedController from "../../../../../../../src/settings/controllers/MatrixClientBackedController";
 import MatrixClientBackedSettingsHandler from "../../../../../../../src/settings/handlers/MatrixClientBackedSettingsHandler";
-import type { MockedObject } from "jest-mock";
+import type { MockedObject } from "jest-mock-vitest-adapter";
 import {
     MEDIA_PREVIEW_ACCOUNT_DATA_TYPE,
     type MediaPreviewConfig,
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/user/PreferencesUserSettingsTab-test.tsx b/apps/web/test/unit-tests/components/views/settings/tabs/user/PreferencesUserSettingsTab-test.tsx
index 16dde05448..1cd548e4ea 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/user/PreferencesUserSettingsTab-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/user/PreferencesUserSettingsTab-test.tsx
@@ -31,7 +31,7 @@ describe("PreferencesUserSettingsTab", () => {
     });
 
     const renderTab = (): RenderResult => {
-        return render(<PreferencesUserSettingsTab closeSettingsFn={() => {}} />);
+        return render(<PreferencesUserSettingsTab />);
     };
 
     it("should render", () => {
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/user/SecurityUserSettingsTab-test.tsx b/apps/web/test/unit-tests/components/views/settings/tabs/user/SecurityUserSettingsTab-test.tsx
index 73276fe15f..b46531773a 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/user/SecurityUserSettingsTab-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/user/SecurityUserSettingsTab-test.tsx
@@ -19,16 +19,13 @@ import {
     mockClientMethodsDevice,
     mockPlatformPeg,
 } from "../../../../../../test-utils";
-import { SDKContext, SdkContextClass } from "../../../../../../../src/contexts/SDKContext";
+import { SDKContext } from "../../../../../../../src/contexts/SDKContext";
+import { TestSDKContext } from "../../../../../TestSDKContext.ts";
 import defaultDispatcher from "../../../../../../../src/dispatcher/dispatcher";
 import { UIFeature } from "../../../../../../../src/settings/UIFeature";
 import SettingsStore from "../../../../../../../src/settings/SettingsStore";
 
 describe("<SecurityUserSettingsTab />", () => {
-    const defaultProps = {
-        closeSettingsFn: jest.fn(),
-    };
-
     const getIgnoredUsers = jest.fn();
     const setIgnoredUsers = jest.fn();
 
@@ -45,13 +42,13 @@ describe("<SecurityUserSettingsTab />", () => {
         setIgnoredUsers,
     });
 
-    const sdkContext = new SdkContextClass();
-    sdkContext.client = mockClient;
+    const sdkContext = new TestSDKContext();
+    sdkContext._client = mockClient;
 
     const getComponent = () => (
         <MatrixClientContext.Provider value={mockClient}>
             <SDKContext.Provider value={sdkContext}>
-                <SecurityUserSettingsTab {...defaultProps} />
+                <SecurityUserSettingsTab />
             </SDKContext.Provider>
         </MatrixClientContext.Provider>
     );
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/user/SessionManagerTab-test.tsx b/apps/web/test/unit-tests/components/views/settings/tabs/user/SessionManagerTab-test.tsx
index 00abaa70e4..e63045354f 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/user/SessionManagerTab-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/user/SessionManagerTab-test.tsx
@@ -33,8 +33,7 @@ import {
     MatrixError,
     type MatrixClient,
 } from "matrix-js-sdk/src/matrix";
-import { mocked, type MockedObject } from "jest-mock";
-import fetchMock from "@fetch-mock/jest";
+import { mocked, type MockedObject } from "jest-mock-vitest-adapter";
 
 import {
     clearAllModals,
@@ -56,9 +55,9 @@ import {
 import { INACTIVE_DEVICE_AGE_MS } from "../../../../../../../src/components/views/settings/devices/filter";
 import SettingsStore from "../../../../../../../src/settings/SettingsStore";
 import { getClientInformationEventType } from "../../../../../../../src/utils/device/clientInformation";
-import { SDKContext, SdkContextClass } from "../../../../../../../src/contexts/SDKContext";
-import { type OidcClientStore } from "../../../../../../../src/stores/oidc/OidcClientStore";
-import { makeDelegatedAuthConfig } from "../../../../../../test-utils/oidc";
+import { SDKContext } from "../../../../../../../src/contexts/SDKContext";
+import { TestSDKContext } from "../../../../../TestSDKContext.ts";
+import { makeDelegatedAuthMetadata } from "../../../../../../test-utils/auth";
 import MatrixClientContext from "../../../../../../../src/contexts/MatrixClientContext";
 
 mockPlatformPeg();
@@ -133,7 +132,7 @@ describe("<SessionManagerTab />", () => {
     } as unknown as CryptoApi);
 
     let mockClient!: MockedObject<MatrixClient>;
-    let sdkContext: SdkContextClass;
+    let sdkContext: TestSDKContext;
 
     const defaultProps = {};
     const getComponent = (props = {}): React.ReactElement => (
@@ -249,8 +248,8 @@ describe("<SessionManagerTab />", () => {
             }
         });
 
-        sdkContext = new SdkContextClass();
-        sdkContext.client = mockClient;
+        sdkContext = new TestSDKContext();
+        sdkContext._client = mockClient;
 
         // @ts-ignore allow delete of non-optional prop
         delete window.location;
@@ -949,18 +948,16 @@ describe("<SessionManagerTab />", () => {
                 toggleDeviceDetails(getByTestId, alicesMobileDevice.device_id);
 
                 const deviceDetails = getByTestId(`device-detail-${alicesMobileDevice.device_id}`);
-                const signOutButton = deviceDetails.querySelector(
-                    '[data-testid="device-detail-sign-out-cta"]',
-                ) as Element;
+                const signOutButton = deviceDetails.querySelector('[data-testid="device-detail-sign-out-cta"]')!;
                 fireEvent.click(signOutButton);
 
                 await confirmSignout(getByTestId, false);
 
                 // doesnt enter loading state
                 expect(
-                    (deviceDetails.querySelector('[data-testid="device-detail-sign-out-cta"]') as Element).getAttribute(
-                        "aria-disabled",
-                    ),
+                    deviceDetails
+                        .querySelector('[data-testid="device-detail-sign-out-cta"]')!
+                        .getAttribute("aria-disabled"),
                 ).toEqual(null);
                 // delete not called
                 expect(mockClient.deleteMultipleDevices).not.toHaveBeenCalled();
@@ -992,9 +989,7 @@ describe("<SessionManagerTab />", () => {
                 toggleDeviceDetails(getByTestId, alicesMobileDevice.device_id);
 
                 const deviceDetails = getByTestId(`device-detail-${alicesMobileDevice.device_id}`);
-                const signOutButton = deviceDetails.querySelector(
-                    '[data-testid="device-detail-sign-out-cta"]',
-                ) as Element;
+                const signOutButton = deviceDetails.querySelector('[data-testid="device-detail-sign-out-cta"]')!;
                 fireEvent.click(signOutButton);
                 await confirmSignout(getByTestId);
 
@@ -1053,17 +1048,15 @@ describe("<SessionManagerTab />", () => {
                 toggleDeviceDetails(getByTestId, alicesMobileDevice.device_id);
 
                 const deviceDetails = getByTestId(`device-detail-${alicesMobileDevice.device_id}`);
-                const signOutButton = deviceDetails.querySelector(
-                    '[data-testid="device-detail-sign-out-cta"]',
-                ) as Element;
+                const signOutButton = deviceDetails.querySelector('[data-testid="device-detail-sign-out-cta"]')!;
                 fireEvent.click(signOutButton);
                 await confirmSignout(getByTestId);
 
                 // button is loading
                 expect(
-                    (deviceDetails.querySelector('[data-testid="device-detail-sign-out-cta"]') as Element).getAttribute(
-                        "aria-disabled",
-                    ),
+                    deviceDetails
+                        .querySelector('[data-testid="device-detail-sign-out-cta"]')!
+                        .getAttribute("aria-disabled"),
                 ).toEqual("true");
 
                 await flushPromises();
@@ -1095,9 +1088,9 @@ describe("<SessionManagerTab />", () => {
 
                 // loading state cleared
                 expect(
-                    (deviceDetails.querySelector('[data-testid="device-detail-sign-out-cta"]') as Element).getAttribute(
-                        "aria-disabled",
-                    ),
+                    deviceDetails
+                        .querySelector('[data-testid="device-detail-sign-out-cta"]')!
+                        .getAttribute("aria-disabled"),
                 ).toEqual(null);
             });
 
@@ -1179,10 +1172,10 @@ describe("<SessionManagerTab />", () => {
         describe("for an OIDC-aware server", () => {
             beforeEach(() => {
                 // just do an ugly mock here to avoid mocking initialisation
-                const mockOidcClientStore = {
-                    accountManagementEndpoint: "https://issuer.org/account",
-                } as unknown as OidcClientStore;
-                jest.spyOn(sdkContext, "oidcClientStore", "get").mockReturnValue(mockOidcClientStore);
+                mockClient.getAuthMetadata.mockResolvedValue({
+                    ...makeDelegatedAuthMetadata(),
+                    account_management_uri: "https://issuer.org/account",
+                } as any);
             });
 
             // signing out the current device works as usual
@@ -1242,7 +1235,7 @@ describe("<SessionManagerTab />", () => {
                     const deviceDetails = getByTestId(`device-detail-${alicesMobileDevice.device_id}`);
                     const manageDeviceButton = deviceDetails.querySelector(
                         '[data-testid="device-detail-sign-out-cta"]',
-                    ) as Element;
+                    )!;
                     expect(manageDeviceButton).toHaveAttribute(
                         "href",
                         `https://issuer.org/account?action=org.matrix.session_view&device_id=${alicesMobileDevice.device_id}`,
@@ -1636,7 +1629,7 @@ describe("<SessionManagerTab />", () => {
                     enabled: true,
                 },
             });
-            const delegatedAuthConfig = makeDelegatedAuthConfig(issuer);
+            const delegatedAuthConfig = makeDelegatedAuthMetadata(issuer);
             mockClient.getAuthMetadata.mockResolvedValue({
                 ...delegatedAuthConfig,
                 grant_types_supported: [
@@ -1645,13 +1638,6 @@ describe("<SessionManagerTab />", () => {
                 ],
             });
             mockCrypto.exportSecretsBundle = jest.fn();
-            fetchMock.route(delegatedAuthConfig.jwks_uri!, {
-                status: 200,
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                keys: [],
-            });
         });
 
         it("renders qr code login section", async () => {
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/user/SidebarUserSettingsTab-test.tsx b/apps/web/test/unit-tests/components/views/settings/tabs/user/SidebarUserSettingsTab-test.tsx
index e1c7e4a327..00a7eea1d1 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/user/SidebarUserSettingsTab-test.tsx
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/user/SidebarUserSettingsTab-test.tsx
@@ -50,8 +50,6 @@ describe("<SidebarUserSettingsTab />", () => {
             if (settingName === "Spaces.enabledMetaSpaces") {
                 return {
                     [MetaSpace.Home]: true,
-                    [MetaSpace.Favourites]: true,
-                    [MetaSpace.People]: true,
                     [MetaSpace.Orphans]: true,
                 };
             }
@@ -77,8 +75,6 @@ describe("<SidebarUserSettingsTab />", () => {
             if (settingName === "Spaces.enabledMetaSpaces") {
                 return {
                     [MetaSpace.Home]: false,
-                    [MetaSpace.Favourites]: true,
-                    [MetaSpace.People]: true,
                     [MetaSpace.Orphans]: true,
                 };
             }
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AccountUserSettingsTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AccountUserSettingsTab-test.tsx.snap
index c6a31f0b12..7002d4bd09 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AccountUserSettingsTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AccountUserSettingsTab-test.tsx.snap
@@ -42,14 +42,14 @@ exports[`<AccountUserSettingsTab /> 3pids should display 3pid email addresses an
       >
         <input
           autocomplete="email"
-          id="mx_Field_3"
+          id="mx_Field_11"
           label="Email Address"
           placeholder="Email Address"
           type="text"
           value=""
         />
         <label
-          for="mx_Field_3"
+          for="mx_Field_11"
         >
           Email Address
         </label>
@@ -154,14 +154,14 @@ exports[`<AccountUserSettingsTab /> 3pids should display 3pid email addresses an
         </span>
         <input
           autocomplete="tel-national"
-          id="mx_Field_4"
+          id="mx_Field_12"
           label="Phone Number"
           placeholder="Phone Number"
           type="text"
           value=""
         />
         <label
-          for="mx_Field_4"
+          for="mx_Field_12"
         >
           Phone Number
         </label>
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
index 7c0e5a48a9..e8e82fe1df 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
@@ -32,13 +32,13 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
               class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
             >
               <form
-                class="_root_19upo_16 mx_ThemeChoicePanel_ThemeSelectors"
+                class="_root_1o4d9_17 mx_ThemeChoicePanel_ThemeSelectors"
               >
                 <div
-                  class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light"
+                  class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_1ug7n_10"
@@ -46,7 +46,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                       <input
                         class="_input_1ug7n_18"
                         disabled=""
-                        id="radix-_r_0_"
+                        id="radix-react-use-id-1"
                         name="themeSelector"
                         title=""
                         type="radio"
@@ -58,21 +58,21 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-                      for="radix-_r_0_"
+                      class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
+                      for="radix-react-use-id-1"
                     >
                       Light
                     </label>
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-dark"
+                  class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-dark"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_1ug7n_10"
@@ -80,7 +80,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                       <input
                         class="_input_1ug7n_18"
                         disabled=""
-                        id="radix-_r_1_"
+                        id="radix-react-use-id-2"
                         name="themeSelector"
                         title=""
                         type="radio"
@@ -92,21 +92,21 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-                      for="radix-_r_1_"
+                      class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
+                      for="radix-react-use-id-2"
                     >
                       Dark
                     </label>
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light"
+                  class="_inline-field_1o4d9_33 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_1ug7n_10"
@@ -114,7 +114,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                       <input
                         class="_input_1ug7n_18"
                         disabled=""
-                        id="radix-_r_2_"
+                        id="radix-react-use-id-3"
                         name="themeSelector"
                         title=""
                         type="radio"
@@ -126,11 +126,11 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59 mx_ThemeChoicePanel_themeSelector_Label"
-                      for="radix-_r_2_"
+                      class="_label_1o4d9_60 mx_ThemeChoicePanel_themeSelector_Label"
+                      for="radix-react-use-id-3"
                     >
                       High contrast
                     </label>
@@ -162,15 +162,15 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
               class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
             >
               <form
-                class="_root_19upo_16 mx_LayoutSwitcher_LayoutSelector"
+                class="_root_1o4d9_17 mx_LayoutSwitcher_LayoutSelector"
               >
                 <div
-                  class="_field_19upo_26 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
+                  class="_field_1o4d9_27 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
                 >
                   <label
                     aria-label="Modern"
-                    class="_label_19upo_59"
-                    for="radix-_r_3_"
+                    class="_label_1o4d9_60"
+                    for="radix-react-use-id-4"
                   >
                     <div
                       class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
@@ -181,7 +181,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                         <input
                           checked=""
                           class="_input_1ug7n_18"
-                          id="radix-_r_3_"
+                          id="radix-react-use-id-4"
                           name="layout"
                           title=""
                           type="radio"
@@ -245,7 +245,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                           id="1"
                         >
                           <div
-                            class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
+                            class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"
                           >
                             <div
                               class="mx_EventTile_body translate"
@@ -260,12 +260,12 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                   </label>
                 </div>
                 <div
-                  class="_field_19upo_26 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
+                  class="_field_1o4d9_27 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
                 >
                   <label
                     aria-label="Message bubbles"
-                    class="_label_19upo_59"
-                    for="radix-_r_4_"
+                    class="_label_1o4d9_60"
+                    for="radix-react-use-id-5"
                   >
                     <div
                       class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
@@ -275,7 +275,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                       >
                         <input
                           class="_input_1ug7n_18"
-                          id="radix-_r_4_"
+                          id="radix-react-use-id-5"
                           name="layout"
                           title=""
                           type="radio"
@@ -339,7 +339,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                           id="2"
                         >
                           <div
-                            class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
+                            class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"
                           >
                             <div
                               class="mx_EventTile_body translate"
@@ -354,12 +354,12 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                   </label>
                 </div>
                 <div
-                  class="_field_19upo_26 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
+                  class="_field_1o4d9_27 mxLayoutSwitcher_LayoutSelector_LayoutRadio"
                 >
                   <label
                     aria-label="IRC (experimental)"
-                    class="_label_19upo_59"
-                    for="radix-_r_5_"
+                    class="_label_1o4d9_60"
+                    for="radix-react-use-id-6"
                   >
                     <div
                       class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_inline"
@@ -369,7 +369,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                       >
                         <input
                           class="_input_1ug7n_18"
-                          id="radix-_r_5_"
+                          id="radix-react-use-id-6"
                           name="layout"
                           title=""
                           type="radio"
@@ -436,7 +436,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                           id="3"
                         >
                           <div
-                            class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"
+                            class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"
                           >
                             <div
                               class="mx_EventTile_body translate"
@@ -452,21 +452,21 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                 </div>
               </form>
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
                     >
                       <input
-                        aria-describedby="radix-_r_7_"
+                        aria-describedby="radix-react-use-id-7"
                         class="_input_udcm8_24"
-                        id="radix-_r_6_"
+                        id="radix-react-use-id-8"
                         name="compactLayout"
                         role="switch"
                         title=""
@@ -478,17 +478,17 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
-                      for="radix-_r_6_"
+                      class="_label_1o4d9_60"
+                      for="radix-react-use-id-8"
                     >
                       Show compact text and messages
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
-                      id="radix-_r_7_"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
+                      id="radix-react-use-id-7"
                     >
                       Modern layout must be selected to use this feature.
                     </span>
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap
index 3f738176a7..2ad79f6d52 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap
@@ -235,6 +235,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
         class="_breadcrumb_t96w3_8"
       >
         <button
+          aria-disabled="false"
           aria-label="Back"
           class="_icon-button_1215g_8"
           data-kind="secondary"
@@ -264,7 +265,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
         >
           <li>
             <a
-              class="_link_k9ljz_8"
+              class="_link_13esb_8"
               data-kind="primary"
               data-size="sm"
               rel="noreferrer noopener"
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
index 785298033a..5eab0932df 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap
@@ -16,7 +16,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
           class="mx_SettingsSection_subSections"
         >
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
               class="mx_SettingsSubsection"
@@ -69,7 +69,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
             </div>
           </form>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
               class="mx_SettingsSubsection"
@@ -87,10 +87,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 class="mx_SettingsSubsection_content"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -107,21 +107,54 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_vY7Q4uEh9K38"
                     >
                       Show message previews
                     </label>
                   </div>
                 </div>
+                <div
+                  class="_inline-field_1o4d9_33"
+                >
+                  <div
+                    class="_inline-field-control_1o4d9_45"
+                  >
+                    <div
+                      class="_container_udcm8_10"
+                    >
+                      <input
+                        checked=""
+                        class="_input_udcm8_24"
+                        disabled=""
+                        id="mx_SettingsFlag_QgU2PomxwKpa"
+                        role="switch"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_udcm8_34"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_1o4d9_39"
+                  >
+                    <label
+                      class="_label_1o4d9_60"
+                      for="mx_SettingsFlag_QgU2PomxwKpa"
+                    >
+                      Show sections
+                    </label>
+                  </div>
+                </div>
               </div>
             </div>
           </form>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
               class="mx_SettingsSubsection"
@@ -139,10 +172,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 class="mx_SettingsSubsection_content"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -150,7 +183,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       <input
                         class="_input_udcm8_24"
                         disabled=""
-                        id="mx_SettingsFlag_QgU2PomxwKpa"
+                        id="mx_SettingsFlag_6hpi3YEetmBG"
                         role="switch"
                         type="checkbox"
                       />
@@ -160,17 +193,17 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
-                      for="mx_SettingsFlag_QgU2PomxwKpa"
+                      class="_label_1o4d9_60"
+                      for="mx_SettingsFlag_6hpi3YEetmBG"
                     >
                       Show all rooms in Home
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
-                      id="radix-_r_4_"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
+                      id="radix-react-use-id-1"
                     >
                       All rooms you're in will appear in Home.
                     </span>
@@ -180,7 +213,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
             </div>
           </form>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
               class="mx_SettingsSubsection"
@@ -217,10 +250,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 class="mx_SettingsSubsection_content"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -228,7 +261,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       <input
                         class="_input_udcm8_24"
                         disabled=""
-                        id="mx_SettingsFlag_6hpi3YEetmBG"
+                        id="mx_SettingsFlag_4yVCeEefiPqp"
                         role="switch"
                         type="checkbox"
                       />
@@ -238,11 +271,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
-                      for="mx_SettingsFlag_6hpi3YEetmBG"
+                      class="_label_1o4d9_60"
+                      for="mx_SettingsFlag_4yVCeEefiPqp"
                     >
                       Use Ctrl + F to search timeline
                     </label>
@@ -252,7 +285,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
             </div>
           </form>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
               class="mx_SettingsSubsection"
@@ -308,42 +341,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
-                  >
-                    <div
-                      class="_container_udcm8_10"
-                    >
-                      <input
-                        class="_input_udcm8_24"
-                        disabled=""
-                        id="mx_SettingsFlag_4yVCeEefiPqp"
-                        role="switch"
-                        type="checkbox"
-                      />
-                      <div
-                        class="_ui_udcm8_34"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    class="_inline-field-body_19upo_38"
-                  >
-                    <label
-                      class="_label_19upo_59"
-                      for="mx_SettingsFlag_4yVCeEefiPqp"
-                    >
-                      Show timestamps in 12 hour format (e.g. 2:30pm)
-                    </label>
-                  </div>
-                </div>
-                <div
-                  class="_inline-field_19upo_32"
-                >
-                  <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -361,21 +362,21 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_MRMwbPDmfGtm"
                     >
-                      Always show message timestamps
+                      Show timestamps in 12 hour format (e.g. 2:30pm)
                     </label>
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -393,17 +394,49 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_GQvdMWe954DV"
+                    >
+                      Always show message timestamps
+                    </label>
+                  </div>
+                </div>
+                <div
+                  class="_inline-field_1o4d9_33"
+                >
+                  <div
+                    class="_inline-field-control_1o4d9_45"
+                  >
+                    <div
+                      class="_container_udcm8_10"
+                    >
+                      <input
+                        class="_input_udcm8_24"
+                        disabled=""
+                        id="mx_SettingsFlag_IAu5CsiHRD7n"
+                        role="switch"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_udcm8_34"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_1o4d9_39"
+                  >
+                    <label
+                      class="_label_1o4d9_60"
+                      for="mx_SettingsFlag_IAu5CsiHRD7n"
                     >
                       Publish timezone on public profile
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
-                      id="radix-_r_d_"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
+                      id="radix-react-use-id-2"
                     >
                       Requires your server to support MSC4133
                     </span>
@@ -413,7 +446,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
             </div>
           </form>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
               class="mx_SettingsSubsection"
@@ -440,49 +473,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 class="mx_SettingsSubsection_content"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
-                  >
-                    <div
-                      class="_container_udcm8_10"
-                    >
-                      <input
-                        checked=""
-                        class="_input_udcm8_24"
-                        disabled=""
-                        id="mx_SettingsFlag_IAu5CsiHRD7n"
-                        role="switch"
-                        type="checkbox"
-                      />
-                      <div
-                        class="_ui_udcm8_34"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    class="_inline-field-body_19upo_38"
-                  >
-                    <label
-                      class="_label_19upo_59"
-                      for="mx_SettingsFlag_IAu5CsiHRD7n"
-                    >
-                      Send read receipts
-                    </label>
-                    <span
-                      class="_message_19upo_85 _help-message_19upo_91"
-                      id="radix-_r_g_"
-                    >
-                      Your server doesn't support disabling sending read receipts.
-                    </span>
-                  </div>
-                </div>
-                <div
-                  class="_inline-field_19upo_32"
-                >
-                  <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -501,11 +495,50 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_yrA2ohjWVJIP"
+                    >
+                      Send read receipts
+                    </label>
+                    <span
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
+                      id="radix-react-use-id-3"
+                    >
+                      Your server doesn't support disabling sending read receipts.
+                    </span>
+                  </div>
+                </div>
+                <div
+                  class="_inline-field_1o4d9_33"
+                >
+                  <div
+                    class="_inline-field-control_1o4d9_45"
+                  >
+                    <div
+                      class="_container_udcm8_10"
+                    >
+                      <input
+                        checked=""
+                        class="_input_udcm8_24"
+                        disabled=""
+                        id="mx_SettingsFlag_auy1OmnTidX4"
+                        role="switch"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_udcm8_34"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_1o4d9_39"
+                  >
+                    <label
+                      class="_label_1o4d9_60"
+                      for="mx_SettingsFlag_auy1OmnTidX4"
                     >
                       Send typing notifications
                     </label>
@@ -515,7 +548,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
             </div>
           </form>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
               class="mx_SettingsSubsection"
@@ -533,48 +566,15 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 class="mx_SettingsSubsection_content"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
                     >
                       <input
-                        class="_input_udcm8_24"
-                        disabled=""
-                        id="mx_SettingsFlag_auy1OmnTidX4"
-                        role="switch"
-                        type="checkbox"
-                      />
-                      <div
-                        class="_ui_udcm8_34"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    class="_inline-field-body_19upo_38"
-                  >
-                    <label
-                      class="_label_19upo_59"
-                      for="mx_SettingsFlag_auy1OmnTidX4"
-                    >
-                      Automatically replace plain text Emoji
-                    </label>
-                  </div>
-                </div>
-                <div
-                  class="_inline-field_19upo_32"
-                >
-                  <div
-                    class="_inline-field-control_19upo_44"
-                  >
-                    <div
-                      class="_container_udcm8_10"
-                    >
-                      <input
-                        checked=""
                         class="_input_udcm8_24"
                         disabled=""
                         id="mx_SettingsFlag_ePDS0OpWwAHG"
@@ -587,33 +587,21 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_ePDS0OpWwAHG"
                     >
-                      Enable Markdown
+                      Automatically replace plain text Emoji
                     </label>
-                    <span
-                      class="_message_19upo_85 _help-message_19upo_91"
-                      id="radix-_r_n_"
-                    >
-                      <span>
-                        Start messages with 
-                        <code>
-                          /plain
-                        </code>
-                         to send without markdown.
-                      </span>
-                    </span>
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -632,26 +620,39 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_75JNTNkNU64r"
                     >
-                      Enable Emoji suggestions while typing
+                      Enable Markdown
                     </label>
+                    <span
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
+                      id="radix-react-use-id-4"
+                    >
+                      <span>
+                        Start messages with 
+                        <code>
+                          /plain
+                        </code>
+                         to send without markdown.
+                      </span>
+                    </span>
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
                     >
                       <input
+                        checked=""
                         class="_input_udcm8_24"
                         disabled=""
                         id="mx_SettingsFlag_aTLcRsQRlYy7"
@@ -664,21 +665,21 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_aTLcRsQRlYy7"
                     >
-                      Use Ctrl + Enter to send a message
+                      Enable Emoji suggestions while typing
                     </label>
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -696,27 +697,26 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_5nfv5bOEPN1s"
                     >
-                      Surround selected text when typing special characters
+                      Use Ctrl + Enter to send a message
                     </label>
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
                     >
                       <input
-                        checked=""
                         class="_input_udcm8_24"
                         disabled=""
                         id="mx_SettingsFlag_u1JYVtOyR5kb"
@@ -729,21 +729,21 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_u1JYVtOyR5kb"
                     >
-                      Show stickers button
+                      Surround selected text when typing special characters
                     </label>
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -762,11 +762,44 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_u3pEwuLn9Enn"
+                    >
+                      Show stickers button
+                    </label>
+                  </div>
+                </div>
+                <div
+                  class="_inline-field_1o4d9_33"
+                >
+                  <div
+                    class="_inline-field-control_1o4d9_45"
+                  >
+                    <div
+                      class="_container_udcm8_10"
+                    >
+                      <input
+                        checked=""
+                        class="_input_udcm8_24"
+                        disabled=""
+                        id="mx_SettingsFlag_YuxfFEpOsztW"
+                        role="switch"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_udcm8_34"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_1o4d9_39"
+                  >
+                    <label
+                      class="_label_1o4d9_60"
+                      for="mx_SettingsFlag_YuxfFEpOsztW"
                     >
                       Insert a trailing colon after user mentions at the start of a message
                     </label>
@@ -776,7 +809,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
             </div>
           </form>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
               class="mx_SettingsSubsection"
@@ -794,42 +827,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 class="mx_SettingsSubsection_content"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
-                  >
-                    <div
-                      class="_container_udcm8_10"
-                    >
-                      <input
-                        class="_input_udcm8_24"
-                        disabled=""
-                        id="mx_SettingsFlag_YuxfFEpOsztW"
-                        role="switch"
-                        type="checkbox"
-                      />
-                      <div
-                        class="_ui_udcm8_34"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    class="_inline-field-body_19upo_38"
-                  >
-                    <label
-                      class="_label_19upo_59"
-                      for="mx_SettingsFlag_YuxfFEpOsztW"
-                    >
-                      Enable automatic language detection for syntax highlighting
-                    </label>
-                  </div>
-                </div>
-                <div
-                  class="_inline-field_19upo_32"
-                >
-                  <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -847,27 +848,26 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_hQkBerF1ejc4"
                     >
-                      Expand code blocks by default
+                      Enable automatic language detection for syntax highlighting
                     </label>
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
                     >
                       <input
-                        checked=""
                         class="_input_udcm8_24"
                         disabled=""
                         id="mx_SettingsFlag_GFes1UFzOK2n"
@@ -880,11 +880,44 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_GFes1UFzOK2n"
+                    >
+                      Expand code blocks by default
+                    </label>
+                  </div>
+                </div>
+                <div
+                  class="_inline-field_1o4d9_33"
+                >
+                  <div
+                    class="_inline-field-control_1o4d9_45"
+                  >
+                    <div
+                      class="_container_udcm8_10"
+                    >
+                      <input
+                        checked=""
+                        class="_input_udcm8_24"
+                        disabled=""
+                        id="mx_SettingsFlag_vfGFMldL2r2v"
+                        role="switch"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_udcm8_34"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_1o4d9_39"
+                  >
+                    <label
+                      class="_label_1o4d9_60"
+                      for="mx_SettingsFlag_vfGFMldL2r2v"
                     >
                       Show line numbers in code blocks
                     </label>
@@ -894,7 +927,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
             </div>
           </form>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
               class="mx_SettingsSubsection"
@@ -921,47 +954,16 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 class="mx_SettingsSubsection_content"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
                     >
                       <input
                         checked=""
-                        class="_input_udcm8_24"
-                        id="mx_SettingsFlag_vfGFMldL2r2v"
-                        role="switch"
-                        type="checkbox"
-                      />
-                      <div
-                        class="_ui_udcm8_34"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    class="_inline-field-body_19upo_38"
-                  >
-                    <label
-                      class="_label_19upo_59"
-                      for="mx_SettingsFlag_vfGFMldL2r2v"
-                    >
-                      Enable previews
-                    </label>
-                  </div>
-                </div>
-                <div
-                  class="_inline-field_19upo_32"
-                >
-                  <div
-                    class="_inline-field-control_19upo_44"
-                  >
-                    <div
-                      class="_container_udcm8_10"
-                    >
-                      <input
                         class="_input_udcm8_24"
                         id="mx_SettingsFlag_bsSwicmKUiOB"
                         role="switch"
@@ -973,11 +975,42 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_bsSwicmKUiOB"
+                    >
+                      Enable previews
+                    </label>
+                  </div>
+                </div>
+                <div
+                  class="_inline-field_1o4d9_33"
+                >
+                  <div
+                    class="_inline-field-control_1o4d9_45"
+                  >
+                    <div
+                      class="_container_udcm8_10"
+                    >
+                      <input
+                        class="_input_udcm8_24"
+                        id="mx_SettingsFlag_dvqsxEaZtl3A"
+                        role="switch"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_udcm8_34"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_1o4d9_39"
+                  >
+                    <label
+                      class="_label_1o4d9_60"
+                      for="mx_SettingsFlag_dvqsxEaZtl3A"
                     >
                       Enable previews in encrypted rooms
                     </label>
@@ -987,7 +1020,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
             </div>
           </form>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
               class="mx_SettingsSubsection"
@@ -1005,42 +1038,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 class="mx_SettingsSubsection_content"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
-                  >
-                    <div
-                      class="_container_udcm8_10"
-                    >
-                      <input
-                        class="_input_udcm8_24"
-                        disabled=""
-                        id="mx_SettingsFlag_dvqsxEaZtl3A"
-                        role="switch"
-                        type="checkbox"
-                      />
-                      <div
-                        class="_ui_udcm8_34"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    class="_inline-field-body_19upo_38"
-                  >
-                    <label
-                      class="_label_19upo_59"
-                      for="mx_SettingsFlag_dvqsxEaZtl3A"
-                    >
-                      Autoplay GIFs
-                    </label>
-                  </div>
-                </div>
-                <div
-                  class="_inline-field_19upo_32"
-                >
-                  <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1058,11 +1059,43 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_NIiWzqsApP1c"
+                    >
+                      Autoplay GIFs
+                    </label>
+                  </div>
+                </div>
+                <div
+                  class="_inline-field_1o4d9_33"
+                >
+                  <div
+                    class="_inline-field-control_1o4d9_45"
+                  >
+                    <div
+                      class="_container_udcm8_10"
+                    >
+                      <input
+                        class="_input_udcm8_24"
+                        disabled=""
+                        id="mx_SettingsFlag_q1SIAPqLMVXh"
+                        role="switch"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_udcm8_34"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_1o4d9_39"
+                  >
+                    <label
+                      class="_label_1o4d9_60"
+                      for="mx_SettingsFlag_q1SIAPqLMVXh"
                     >
                       Autoplay videos
                     </label>
@@ -1072,7 +1105,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
             </div>
           </form>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
               class="mx_SettingsSubsection"
@@ -1090,43 +1123,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 class="mx_SettingsSubsection_content"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
-                  >
-                    <div
-                      class="_container_udcm8_10"
-                    >
-                      <input
-                        checked=""
-                        class="_input_udcm8_24"
-                        disabled=""
-                        id="mx_SettingsFlag_q1SIAPqLMVXh"
-                        role="switch"
-                        type="checkbox"
-                      />
-                      <div
-                        class="_ui_udcm8_34"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    class="_inline-field-body_19upo_38"
-                  >
-                    <label
-                      class="_label_19upo_59"
-                      for="mx_SettingsFlag_q1SIAPqLMVXh"
-                    >
-                      Show typing notifications
-                    </label>
-                  </div>
-                </div>
-                <div
-                  class="_inline-field_19upo_32"
-                >
-                  <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1145,21 +1145,21 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_dXFDGgBsKXay"
                     >
-                      Show a placeholder for removed messages
+                      Show typing notifications
                     </label>
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1178,21 +1178,21 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_7Az0xw4Bs4Tt"
                     >
-                      Show read receipts sent by other users
+                      Show a placeholder for removed messages
                     </label>
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1211,21 +1211,21 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_8jmzPIlPoBCv"
                     >
-                      Show join/leave messages (invites/removes/bans unaffected)
+                      Show read receipts sent by other users
                     </label>
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1244,21 +1244,21 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_enFRaTjdsFou"
                     >
-                      Show display name changes
+                      Show join/leave messages (invites/removes/bans unaffected)
                     </label>
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1277,21 +1277,21 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_bfwnd5rz4XNX"
                     >
-                      Show chat effects (animations when receiving e.g. confetti)
+                      Show display name changes
                     </label>
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1310,21 +1310,21 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_gs5uWEzYzZrS"
                     >
-                      Show profile picture changes
+                      Show chat effects (animations when receiving e.g. confetti)
                     </label>
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1343,21 +1343,21 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_qWg7OgID1yRR"
                     >
-                      Show avatars in user, room and event mentions
+                      Show profile picture changes
                     </label>
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1376,21 +1376,21 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_pOPewl7rtMbV"
                     >
-                      Enable big emoji in chat
+                      Show avatars in user, room and event mentions
                     </label>
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1409,21 +1409,21 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_cmt3PZSyNp3v"
                     >
-                      Jump to the bottom of the timeline when you send a message
+                      Enable big emoji in chat
                     </label>
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1442,11 +1442,44 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="mx_SettingsFlag_dJJz3lHUv9XX"
+                    >
+                      Jump to the bottom of the timeline when you send a message
+                    </label>
+                  </div>
+                </div>
+                <div
+                  class="_inline-field_1o4d9_33"
+                >
+                  <div
+                    class="_inline-field-control_1o4d9_45"
+                  >
+                    <div
+                      class="_container_udcm8_10"
+                    >
+                      <input
+                        checked=""
+                        class="_input_udcm8_24"
+                        disabled=""
+                        id="mx_SettingsFlag_SBSSOZDRlzlA"
+                        role="switch"
+                        type="checkbox"
+                      />
+                      <div
+                        class="_ui_udcm8_34"
+                      />
+                    </div>
+                  </div>
+                  <div
+                    class="_inline-field-body_1o4d9_39"
+                  >
+                    <label
+                      class="_label_1o4d9_60"
+                      for="mx_SettingsFlag_SBSSOZDRlzlA"
                     >
                       Show current profile picture and name for users in message history
                     </label>
@@ -1471,20 +1504,20 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
               class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
             >
               <form
-                class="_root_19upo_16 mx_MediaPreviewAccountSetting_Form"
+                class="_root_1o4d9_17 mx_MediaPreviewAccountSetting_Form"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
                     >
                       <input
                         class="_input_udcm8_24"
-                        id="_r_26_"
+                        id="react-use-id-5"
                         role="switch"
                         type="checkbox"
                       />
@@ -1494,11 +1527,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
-                      for="_r_26_"
+                      class="_label_1o4d9_60"
+                      for="react-use-id-5"
                     >
                       Hide avatars of room and inviter
                     </label>
@@ -1506,27 +1539,27 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 </div>
                 <div
                   aria-label="Show media in timeline"
-                  class="_field_19upo_26"
+                  class="_field_1o4d9_27"
                   id="mx_media_previews"
                   role="radiogroup"
                 >
                   <label
-                    class="_label_19upo_59"
-                    for="radix-_r_28_"
+                    class="_label_1o4d9_60"
+                    for="radix-react-use-id-6"
                   >
                     Show media in timeline
                   </label>
                   <span
-                    class="_message_19upo_85 _help-message_19upo_91 mx_MediaPreviewAccountSetting_RadioHelp"
-                    id="radix-_r_29_"
+                    class="_message_1o4d9_86 _help-message_1o4d9_92 mx_MediaPreviewAccountSetting_RadioHelp"
+                    id="radix-react-use-id-7"
                   >
                     A hidden media can always be shown by tapping on it
                   </span>
                   <div
-                    class="_inline-field_19upo_32 mx_MediaPreviewAccountSetting_Radio"
+                    class="_inline-field_1o4d9_33 mx_MediaPreviewAccountSetting_Radio"
                   >
                     <div
-                      class="_inline-field-control_19upo_44"
+                      class="_inline-field-control_1o4d9_45"
                     >
                       <div
                         class="_container_1ug7n_10"
@@ -1542,10 +1575,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       </div>
                     </div>
                     <div
-                      class="_inline-field-body_19upo_38"
+                      class="_inline-field-body_1o4d9_39"
                     >
                       <label
-                        class="_label_19upo_59"
+                        class="_label_1o4d9_60"
                         for="mx_media_previews_off"
                       >
                         Always hide
@@ -1553,10 +1586,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field_19upo_32 mx_MediaPreviewAccountSetting_Radio"
+                    class="_inline-field_1o4d9_33 mx_MediaPreviewAccountSetting_Radio"
                   >
                     <div
-                      class="_inline-field-control_19upo_44"
+                      class="_inline-field-control_1o4d9_45"
                     >
                       <div
                         class="_container_1ug7n_10"
@@ -1572,10 +1605,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       </div>
                     </div>
                     <div
-                      class="_inline-field-body_19upo_38"
+                      class="_inline-field-body_1o4d9_39"
                     >
                       <label
-                        class="_label_19upo_59"
+                        class="_label_1o4d9_60"
                         for="mx_media_previews_private"
                       >
                         In private rooms
@@ -1583,10 +1616,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field_19upo_32 mx_MediaPreviewAccountSetting_Radio"
+                    class="_inline-field_1o4d9_33 mx_MediaPreviewAccountSetting_Radio"
                   >
                     <div
-                      class="_inline-field-control_19upo_44"
+                      class="_inline-field-control_1o4d9_45"
                     >
                       <div
                         class="_container_1ug7n_10"
@@ -1603,10 +1636,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       </div>
                     </div>
                     <div
-                      class="_inline-field-body_19upo_38"
+                      class="_inline-field-body_1o4d9_39"
                     >
                       <label
-                        class="_label_19upo_59"
+                        class="_label_1o4d9_60"
                         for="mx_media_previews_on"
                       >
                         Always show
@@ -1616,13 +1649,13 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 </div>
               </form>
               <form
-                class="_root_19upo_16 mx_MediaPreviewAccountSetting_Form"
+                class="_root_1o4d9_17 mx_MediaPreviewAccountSetting_Form"
               >
                 <div
-                  class="_inline-field_19upo_32 mx_MediaPreviewAccountSetting_ToggleSwitch"
+                  class="_inline-field_1o4d9_33 mx_MediaPreviewAccountSetting_ToggleSwitch"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1631,7 +1664,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                         checked=""
                         class="_input_udcm8_24"
                         disabled=""
-                        id="_r_2d_"
+                        id="react-use-id-8"
                         role="switch"
                         type="checkbox"
                       />
@@ -1641,17 +1674,17 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
-                      for="_r_2d_"
+                      class="_label_1o4d9_60"
+                      for="react-use-id-8"
                     >
                       Allow users to invite you to rooms
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
-                      id="radix-_r_2f_"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
+                      id="radix-react-use-id-9"
                     >
                       Your server does not implement this feature.
                     </span>
@@ -1667,7 +1700,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
             />
           </div>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
               class="mx_SettingsSubsection"
@@ -1685,10 +1718,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 class="mx_SettingsSubsection_content"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1696,7 +1729,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                       <input
                         class="_input_udcm8_24"
                         disabled=""
-                        id="mx_SettingsFlag_SBSSOZDRlzlA"
+                        id="mx_SettingsFlag_FLEpLCb0jpp6"
                         role="switch"
                         type="checkbox"
                       />
@@ -1706,11 +1739,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
-                      for="mx_SettingsFlag_SBSSOZDRlzlA"
+                      class="_label_1o4d9_60"
+                      for="mx_SettingsFlag_FLEpLCb0jpp6"
                     >
                       Show NSFW content
                     </label>
@@ -1720,7 +1753,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
             </div>
           </form>
           <form
-            class="_root_19upo_16"
+            class="_root_1o4d9_17"
           >
             <div
               class="mx_SettingsSubsection"
@@ -1738,10 +1771,10 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                 class="mx_SettingsSubsection_content mx_SettingsSubsection_contentStretch"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -1750,7 +1783,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                         checked=""
                         class="_input_udcm8_24"
                         disabled=""
-                        id="mx_SettingsFlag_FLEpLCb0jpp6"
+                        id="mx_SettingsFlag_NQFWldEwbV3q"
                         role="switch"
                         type="checkbox"
                       />
@@ -1760,11 +1793,11 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
-                      for="mx_SettingsFlag_FLEpLCb0jpp6"
+                      class="_label_1o4d9_60"
+                      for="mx_SettingsFlag_NQFWldEwbV3q"
                     >
                       Prompt before sending invites to potentially invalid matrix IDs
                     </label>
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap
index ad678a5d55..9dbaa827b2 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap
@@ -35,7 +35,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
       class="mx_SettingsTab_sections"
     >
       <form
-        class="_root_19upo_16 mx_SetIntegrationManager"
+        class="_root_1o4d9_17 mx_SetIntegrationManager"
         data-testid="mx_SetIntegrationManager"
       >
         <div
@@ -75,10 +75,10 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
           Integration managers receive configuration data, and can modify widgets, send room invites, and set power levels on your behalf.
         </div>
         <div
-          class="_inline-field_19upo_32"
+          class="_inline-field_1o4d9_33"
         >
           <div
-            class="_inline-field-control_19upo_44"
+            class="_inline-field-control_1o4d9_45"
           >
             <div
               class="_container_udcm8_10"
@@ -86,7 +86,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
               <input
                 checked=""
                 class="_input_udcm8_24"
-                id="_r_0_"
+                id="react-use-id-1"
                 role="switch"
                 type="checkbox"
               />
@@ -96,11 +96,11 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
             </div>
           </div>
           <div
-            class="_inline-field-body_19upo_38"
+            class="_inline-field-body_1o4d9_39"
           >
             <label
-              class="_label_19upo_59"
-              for="_r_0_"
+              class="_label_1o4d9_60"
+              for="react-use-id-1"
             >
               Enable the integration manager
             </label>
@@ -216,14 +216,14 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
                   class="mx_SettingsFieldset_content"
                 >
                   <form
-                    class="_root_19upo_16 mx_IdentityServerPicker"
+                    class="_root_1o4d9_17 mx_IdentityServerPicker"
                   >
                     <div
-                      class="_field_19upo_26"
+                      class="_field_1o4d9_27"
                     >
                       <label
-                        class="_label_19upo_59"
-                        for="radix-_r_2_"
+                        class="_label_1o4d9_60"
+                        for="radix-react-use-id-2"
                       >
                         Enter a new identity server
                       </label>
@@ -232,7 +232,7 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
                       >
                         <input
                           class="_control_d83jn_10"
-                          id="radix-_r_2_"
+                          id="radix-react-use-id-2"
                           name="input"
                           placeholder=""
                           title=""
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
index 69f7e17453..1e889c333e 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
@@ -445,20 +445,20 @@ exports[`<SessionManagerTab /> goes to filtered list from security recommendatio
     tabindex="0"
   >
     <form
-      class="_root_19upo_16"
+      class="_root_1o4d9_17"
     >
       <div
-        class="_inline-field_19upo_32"
+        class="_inline-field_1o4d9_33"
       >
         <div
-          class="_inline-field-control_19upo_44"
+          class="_inline-field-control_1o4d9_45"
         >
           <div
             class="_container_153f2_10"
           >
             <input
               aria-label="Select all"
-              aria-labelledby="_r_4q_"
+              aria-labelledby="react-use-id-1"
               class="_input_153f2_18"
               data-testid="device-select-all-checkbox"
               id="device-select-all-checkbox"
@@ -483,7 +483,7 @@ exports[`<SessionManagerTab /> goes to filtered list from security recommendatio
           </div>
         </div>
         <div
-          class="_inline-field-body_19upo_38"
+          class="_inline-field-body_1o4d9_39"
         />
       </div>
     </form>
diff --git a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap
index 3bac51895a..07e50b5b43 100644
--- a/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/SidebarUserSettingsTab-test.tsx.snap
@@ -39,19 +39,19 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
               class="mx_SettingsSubsection_content"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
+                  class="_inline-field_1o4d9_33 mx_SidebarUserSettingsTab_checkbox"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
                     >
                       <input
-                        aria-describedby="_r_1_"
+                        aria-describedby="react-use-id-1"
                         checked=""
                         class="_input_153f2_18"
                         disabled=""
@@ -77,10 +77,10 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_vY7Q4uEh9K"
                     >
                       <svg
@@ -98,8 +98,8 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                       Home
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
-                      id="_r_1_"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
+                      id="react-use-id-1"
                     >
                       Home is useful for getting an overview of everything.
                     </span>
@@ -107,19 +107,19 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                 </div>
               </form>
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
+                  class="_inline-field_1o4d9_33 mx_SidebarUserSettingsTab_checkbox mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
                     >
                       <input
-                        aria-describedby="_r_5_"
+                        aria-describedby="react-use-id-2"
                         class="_input_153f2_18"
                         data-testid="mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
                         id="checkbox_38QgU2Pomx"
@@ -144,17 +144,17 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_38QgU2Pomx"
                     >
                       Show all rooms
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
-                      id="_r_5_"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
+                      id="react-use-id-2"
                     >
                       Show all your rooms in Home, even if they're in a space.
                     </span>
@@ -162,19 +162,19 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                 </div>
               </form>
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
+                  class="_inline-field_1o4d9_33 mx_SidebarUserSettingsTab_checkbox"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
                     >
                       <input
-                        aria-describedby="_r_9_"
+                        aria-describedby="react-use-id-3"
                         class="_input_153f2_18"
                         id="checkbox_wKpa6hpi3Y"
                         type="checkbox"
@@ -198,17 +198,17 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_wKpa6hpi3Y"
                     >
                       Rooms outside of a space
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
-                      id="_r_9_"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
+                      id="react-use-id-3"
                     >
                       Group all your rooms that aren't part of a space in one place.
                     </span>
@@ -216,19 +216,19 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                 </div>
               </form>
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
+                  class="_inline-field_1o4d9_33 mx_SidebarUserSettingsTab_checkbox"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
                     >
                       <input
-                        aria-describedby="_r_d_"
+                        aria-describedby="react-use-id-4"
                         class="_input_153f2_18"
                         id="checkbox_EetmBG4yVC"
                         type="checkbox"
@@ -252,10 +252,10 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_EetmBG4yVC"
                     >
                       <svg
@@ -273,8 +273,8 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings with guest spa url
                       Video rooms and conferences
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
-                      id="_r_d_"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
+                      id="react-use-id-4"
                     >
                       Group all private video rooms and conferences. In conferences you can invite people outside of matrix.
                     </span>
@@ -329,19 +329,19 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
               class="mx_SettingsSubsection_content"
             >
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
+                  class="_inline-field_1o4d9_33 mx_SidebarUserSettingsTab_checkbox"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
                     >
                       <input
-                        aria-describedby="_r_h_"
+                        aria-describedby="react-use-id-1"
                         checked=""
                         class="_input_153f2_18"
                         disabled=""
@@ -367,10 +367,10 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_vY7Q4uEh9K"
                     >
                       <svg
@@ -388,8 +388,8 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                       Home
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
-                      id="_r_h_"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
+                      id="react-use-id-1"
                     >
                       Home is useful for getting an overview of everything.
                     </span>
@@ -397,19 +397,19 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                 </div>
               </form>
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
+                  class="_inline-field_1o4d9_33 mx_SidebarUserSettingsTab_checkbox mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
                     >
                       <input
-                        aria-describedby="_r_l_"
+                        aria-describedby="react-use-id-2"
                         class="_input_153f2_18"
                         data-testid="mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
                         id="checkbox_38QgU2Pomx"
@@ -434,17 +434,17 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_38QgU2Pomx"
                     >
                       Show all rooms
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
-                      id="_r_l_"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
+                      id="react-use-id-2"
                     >
                       Show all your rooms in Home, even if they're in a space.
                     </span>
@@ -452,19 +452,19 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                 </div>
               </form>
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
+                  class="_inline-field_1o4d9_33 mx_SidebarUserSettingsTab_checkbox"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
                     >
                       <input
-                        aria-describedby="_r_p_"
+                        aria-describedby="react-use-id-3"
                         class="_input_153f2_18"
                         id="checkbox_wKpa6hpi3Y"
                         type="checkbox"
@@ -488,17 +488,17 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_wKpa6hpi3Y"
                     >
                       Rooms outside of a space
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
-                      id="_r_p_"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
+                      id="react-use-id-3"
                     >
                       Group all your rooms that aren't part of a space in one place.
                     </span>
@@ -506,19 +506,19 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                 </div>
               </form>
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32 mx_SidebarUserSettingsTab_checkbox"
+                  class="_inline-field_1o4d9_33 mx_SidebarUserSettingsTab_checkbox"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_153f2_10"
                     >
                       <input
-                        aria-describedby="_r_t_"
+                        aria-describedby="react-use-id-4"
                         class="_input_153f2_18"
                         id="checkbox_EetmBG4yVC"
                         type="checkbox"
@@ -542,10 +542,10 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
+                      class="_label_1o4d9_60"
                       for="checkbox_EetmBG4yVC"
                     >
                       <svg
@@ -563,8 +563,8 @@ exports[`<SidebarUserSettingsTab /> renders sidebar settings without guest spa u
                       Video rooms and conferences
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
-                      id="_r_t_"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
+                      id="react-use-id-4"
                     >
                       Group all private video rooms and conferences.
                     </span>
diff --git a/apps/web/test/unit-tests/components/views/spaces/QuickSettingsButton-test.tsx b/apps/web/test/unit-tests/components/views/spaces/QuickSettingsButton-test.tsx
index 7ca3d573bb..2d1350216a 100644
--- a/apps/web/test/unit-tests/components/views/spaces/QuickSettingsButton-test.tsx
+++ b/apps/web/test/unit-tests/components/views/spaces/QuickSettingsButton-test.tsx
@@ -13,13 +13,18 @@ import { mocked } from "jest-mock";
 
 import QuickSettingsButton from "../../../../../src/components/views/spaces/QuickSettingsButton";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
-import { SdkContextClass } from "../../../../../src/contexts/SDKContext";
+import { SDKContextClass } from "../../../../../src/contexts/SDKContextClass";
+import { SDKContext } from "../../../../../src/contexts/SDKContext.ts";
 
 describe("QuickSettingsButton", () => {
     const roomId = "!room:example.com";
 
     const renderQuickSettingsButton = () => {
-        render(<QuickSettingsButton isPanelCollapsed={true} />);
+        render(<QuickSettingsButton isPanelCollapsed={true} />, {
+            wrapper: ({ children }) => (
+                <SDKContext.Provider value={SDKContextClass.instance}>{children}</SDKContext.Provider>
+            ),
+        });
     };
 
     const getQuickSettingsButton = () => {
@@ -37,7 +42,11 @@ describe("QuickSettingsButton", () => {
     });
 
     it("should render the quick settings button in expanded mode", () => {
-        const { asFragment } = render(<QuickSettingsButton isPanelCollapsed={false} />);
+        const { asFragment } = render(<QuickSettingsButton isPanelCollapsed={false} />, {
+            wrapper: ({ children }) => (
+                <SDKContext.Provider value={SDKContextClass.instance}>{children}</SDKContext.Provider>
+            ),
+        });
         expect(asFragment()).toMatchSnapshot();
     });
 
@@ -72,11 +81,11 @@ describe("QuickSettingsButton", () => {
 
         describe("and a room is viewed", () => {
             beforeEach(() => {
-                jest.spyOn(SdkContextClass.instance.roomViewStore, "getRoomId").mockReturnValue(roomId);
+                jest.spyOn(SDKContextClass.instance.roomViewStore, "getRoomId").mockReturnValue(roomId);
             });
 
             afterEach(() => {
-                mocked(SdkContextClass.instance.roomViewStore.getRoomId).mockRestore();
+                mocked(SDKContextClass.instance.roomViewStore.getRoomId).mockRestore();
             });
 
             describe("and the quick settings are open", () => {
diff --git a/apps/web/test/unit-tests/components/views/spaces/SpaceCreateMenu-test.tsx b/apps/web/test/unit-tests/components/views/spaces/SpaceCreateMenu-test.tsx
index 1293fe690b..aaed2f7e5a 100644
--- a/apps/web/test/unit-tests/components/views/spaces/SpaceCreateMenu-test.tsx
+++ b/apps/web/test/unit-tests/components/views/spaces/SpaceCreateMenu-test.tsx
@@ -17,7 +17,7 @@ import {
     Visibility,
 } from "matrix-js-sdk/src/matrix";
 import userEvent from "@testing-library/user-event";
-import { type MockedObject } from "jest-mock";
+import { type MockedObject } from "jest-mock-vitest-adapter";
 
 import * as createRoomModule from "../../../../../src/createRoom";
 import SpaceCreateMenu, { createSpace } from "../../../../../src/components/views/spaces/SpaceCreateMenu";
diff --git a/apps/web/test/unit-tests/components/views/spaces/SpacePanel-test.tsx b/apps/web/test/unit-tests/components/views/spaces/SpacePanel-test.tsx
index acb38a07b3..cd3379fe8f 100644
--- a/apps/web/test/unit-tests/components/views/spaces/SpacePanel-test.tsx
+++ b/apps/web/test/unit-tests/components/views/spaces/SpacePanel-test.tsx
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render, screen, fireEvent, act, cleanup, waitFor } from "jest-matrix-react";
+import { render, screen, fireEvent, act, cleanup, waitFor, within } from "jest-matrix-react";
 import { mocked } from "jest-mock";
 import { type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
 
@@ -17,8 +17,7 @@ import { MetaSpace, type SpaceKey } from "../../../../../src/stores/spaces";
 import { shouldShowComponent } from "../../../../../src/customisations/helpers/UIComponents";
 import { UIComponent } from "../../../../../src/settings/UIFeature";
 import { mkStubRoom, wrapInMatrixClientContext, wrapInSdkContext } from "../../../../test-utils";
-import { SdkContextClass } from "../../../../../src/contexts/SDKContext";
-import SpaceStore from "../../../../../src/stores/spaces/SpaceStore";
+import { TestSDKContext } from "../../../TestSDKContext.ts";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
 import { type SpaceNotificationState } from "../../../../../src/stores/notifications/SpaceNotificationState";
 import SettingsStore from "../../../../../src/settings/SettingsStore";
@@ -36,12 +35,14 @@ enum Keys {
     ARROW_DOWN = 40,
 }
 
+/* oxlint-disable typescript/prefer-literal-enum-member */
 enum DragDirection {
     LEFT = Keys.ARROW_LEFT,
     UP = Keys.ARROW_UP,
     RIGHT = Keys.ARROW_RIGHT,
     DOWN = Keys.ARROW_DOWN,
 }
+/* oxlint-enable typescript/prefer-literal-enum-member */
 
 // taken from https://github.com/hello-pangea/dnd/blob/main/test/unit/integration/util/controls.ts#L20
 const createTransitionEndEvent = (): Event => {
@@ -54,7 +55,6 @@ const createTransitionEndEvent = (): Event => {
     // TransitionEvent constructor does not exist.
     // This is needed because of the following check
     //   https://github.com/atlassian/react-beautiful-dnd/blob/master/src/view/draggable/draggable.jsx#L130
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (event as any).propertyName = "transform";
 
     return event;
@@ -88,8 +88,7 @@ const drop = async (element: HTMLElement) => {
 };
 
 jest.mock("../../../../../src/stores/spaces/SpaceStore", () => {
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    const EventEmitter = require("events");
+    const EventEmitter = jest.requireActual("events");
     class MockSpaceStore extends EventEmitter {
         invitedSpaces: SpaceKey[] = [];
         enabledMetaSpaces: MetaSpace[] = [];
@@ -99,10 +98,9 @@ jest.mock("../../../../../src/stores/spaces/SpaceStore", () => {
         getNotificationState = () => null as SpaceNotificationState | null;
         setActiveSpace = jest.fn();
         moveRootSpace = jest.fn();
+        start = jest.fn();
     }
-    return {
-        instance: new MockSpaceStore(),
-    };
+    return MockSpaceStore;
 });
 
 jest.mock("../../../../../src/customisations/helpers/UIComponents", () => ({
@@ -123,23 +121,19 @@ describe("<SpacePanel />", () => {
         removeListener: jest.fn(),
         isVersionSupported: jest.fn().mockResolvedValue(true),
         doesServerSupportUnstableFeature: jest.fn().mockResolvedValue(false),
+        getAuthMetadata: jest.fn().mockRejectedValue(new Error("Legacy auth")),
     } as unknown as MatrixClient;
-    const SpacePanel = wrapInSdkContext(wrapInMatrixClientContext(UnwrappedSpacePanel), SdkContextClass.instance);
+    const sdkContext = new TestSDKContext();
+    const SpacePanel = wrapInSdkContext(wrapInMatrixClientContext(UnwrappedSpacePanel), sdkContext);
 
     beforeAll(() => {
         jest.spyOn(MatrixClientPeg, "get").mockReturnValue(mockClient);
         jest.spyOn(MatrixClientPeg, "safeGet").mockReturnValue(mockClient);
-        SdkContextClass.instance.client = mockClient;
+        sdkContext._client = mockClient;
     });
 
     beforeEach(() => {
-        SpaceStore.instance.enabledMetaSpaces.push(
-            MetaSpace.Home,
-            MetaSpace.Favourites,
-            MetaSpace.People,
-            MetaSpace.Orphans,
-            MetaSpace.VideoRooms,
-        );
+        sdkContext.spaceStore.enabledMetaSpaces.push(MetaSpace.Home, MetaSpace.Orphans, MetaSpace.VideoRooms);
         mocked(shouldShowComponent).mockClear().mockReturnValue(true);
     });
     afterEach(() => {
@@ -151,8 +145,21 @@ describe("<SpacePanel />", () => {
         const spySettingsStore = jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
             return setting === "feature_video_rooms" ? true : originalGetValue(setting);
         });
-        const renderResult = render(<SpacePanel />);
-        expect(renderResult.asFragment()).toMatchSnapshot();
+        render(<SpacePanel />);
+
+        // Inspect the order of the rendered MetaSpaces, excluding the "Create a space" button.
+        const tree = screen.getByRole("tree", { name: "Spaces" });
+        const spaceButtons = within(tree)
+            .getAllByRole("treeitem")
+            .filter((el) => within(el).queryByRole("button", { name: "Create a space" }) === null);
+
+        const metaSpaceLabels = Array.from(spaceButtons).map((li) =>
+            within(li)
+                .getByRole("button", { name: /^(?!Options$).*/ }) // filter out the 'options' buttons within the buttons
+                .getAttribute("aria-label"),
+        );
+        expect(metaSpaceLabels).toEqual(["Home", "Other rooms", "Conferences"]);
+
         spySettingsStore.mockRestore();
     });
 
@@ -177,7 +184,7 @@ describe("<SpacePanel />", () => {
     });
 
     it("should allow rearranging via drag and drop", async () => {
-        (SpaceStore.instance.spacePanelSpaces as any) = [
+        (sdkContext.spaceStore.spacePanelSpaces as any) = [
             mkStubRoom("!room1:server", "Room 1", mockClient),
             mkStubRoom("!room2:server", "Room 2", mockClient),
             mkStubRoom("!room3:server", "Room 3", mockClient),
@@ -192,7 +199,7 @@ describe("<SpacePanel />", () => {
         await move(room1, DragDirection.DOWN);
         await drop(room1);
 
-        expect(SpaceStore.instance.moveRootSpace).toHaveBeenCalledWith(0, 1);
+        expect(sdkContext.spaceStore.moveRootSpace).toHaveBeenCalledWith(0, 1);
     });
 
     it("should be able to open the user menu via dispatcher", async () => {
diff --git a/apps/web/test/unit-tests/components/views/spaces/SpaceTreeLevel-test.tsx b/apps/web/test/unit-tests/components/views/spaces/SpaceTreeLevel-test.tsx
index 2dd6ac5016..c5940c945e 100644
--- a/apps/web/test/unit-tests/components/views/spaces/SpaceTreeLevel-test.tsx
+++ b/apps/web/test/unit-tests/components/views/spaces/SpaceTreeLevel-test.tsx
@@ -10,34 +10,33 @@ import React from "react";
 import { fireEvent, getByTestId, render } from "jest-matrix-react";
 import { mocked } from "jest-mock";
 
-import { mkRoom, stubClient } from "../../../../test-utils";
-import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
+import { clientAndSDKContextRenderOptions, mkRoom, stubClient } from "../../../../test-utils";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
 import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
 import { Action } from "../../../../../src/dispatcher/actions";
 import { SpaceItem, SpaceButton } from "../../../../../src/components/views/spaces/SpaceTreeLevel";
 import { MetaSpace, type SpaceKey } from "../../../../../src/stores/spaces";
-import SpaceStore from "../../../../../src/stores/spaces/SpaceStore";
 import { StaticNotificationState } from "../../../../../src/stores/notifications/StaticNotificationState";
 import { NotificationLevel } from "../../../../../src/stores/notifications/NotificationLevel";
+import { SDKContextClass } from "../../../../../src/contexts/SDKContextClass";
 
 jest.mock("../../../../../src/stores/spaces/SpaceStore", () => {
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    const EventEmitter = require("events");
+    const EventEmitter = jest.requireActual("events");
     class MockSpaceStore extends EventEmitter {
         activeSpace: SpaceKey = "!space1";
         setActiveSpace = jest.fn();
         getChildSpaces = jest.fn();
         getNotificationState = jest.fn();
+        start = jest.fn();
     }
 
-    return { instance: new MockSpaceStore() };
+    return MockSpaceStore;
 });
 
 describe("SpaceButton", () => {
-    stubClient();
-    const space = mkRoom(MatrixClientPeg.safeGet(), "!1:example.org");
-    DMRoomMap.makeShared(MatrixClientPeg.safeGet());
+    const cli = stubClient();
+    const space = mkRoom(cli, "!1:example.org");
+    DMRoomMap.makeShared(cli);
 
     const dispatchSpy = jest.spyOn(defaultDispatcher, "dispatch");
 
@@ -53,11 +52,12 @@ describe("SpaceButton", () => {
                     data-testid="create-space-button"
                     size="32px"
                 />,
+                clientAndSDKContextRenderOptions(cli, SDKContextClass.instance),
             );
 
-            expect(SpaceStore.instance.setActiveSpace).not.toHaveBeenCalled();
+            expect(SDKContextClass.instance.spaceStore.setActiveSpace).not.toHaveBeenCalled();
             fireEvent.click(getByTestId(container, "create-space-button"));
-            expect(SpaceStore.instance.setActiveSpace).toHaveBeenCalledWith("!1:example.org");
+            expect(SDKContextClass.instance.spaceStore.setActiveSpace).toHaveBeenCalledWith("!1:example.org");
         });
 
         it("navigates to the space home on click if already active", () => {
@@ -81,34 +81,36 @@ describe("SpaceButton", () => {
         it("activates the metaspace on click", () => {
             const { container } = render(
                 <SpaceButton
-                    spaceKey={MetaSpace.People}
+                    spaceKey={MetaSpace.Home}
                     selected={false}
-                    label="People"
+                    label="Home"
                     data-testid="create-space-button"
                     size="32px"
                 />,
+                clientAndSDKContextRenderOptions(cli, SDKContextClass.instance),
             );
 
-            expect(SpaceStore.instance.setActiveSpace).not.toHaveBeenCalled();
+            expect(SDKContextClass.instance.spaceStore.setActiveSpace).not.toHaveBeenCalled();
             fireEvent.click(getByTestId(container, "create-space-button"));
-            expect(SpaceStore.instance.setActiveSpace).toHaveBeenCalledWith(MetaSpace.People);
+            expect(SDKContextClass.instance.spaceStore.setActiveSpace).toHaveBeenCalledWith(MetaSpace.Home);
         });
 
         it("does nothing on click if already active", () => {
             const { container } = render(
                 <SpaceButton
-                    spaceKey={MetaSpace.People}
+                    spaceKey={MetaSpace.Home}
                     selected={true}
-                    label="People"
+                    label="Home"
                     data-testid="create-space-button"
                     size="32px"
                 />,
+                clientAndSDKContextRenderOptions(cli, SDKContextClass.instance),
             );
 
             fireEvent.click(getByTestId(container, "create-space-button"));
             expect(dispatchSpy).not.toHaveBeenCalled();
             // Re-activating the metaspace is a no-op
-            expect(SpaceStore.instance.setActiveSpace).toHaveBeenCalledWith(MetaSpace.People);
+            expect(SDKContextClass.instance.spaceStore.setActiveSpace).toHaveBeenCalledWith(MetaSpace.Home);
         });
 
         it("should render notificationState if one is provided", () => {
@@ -116,16 +118,16 @@ describe("SpaceButton", () => {
 
             const { container, asFragment } = render(
                 <SpaceButton
-                    spaceKey={MetaSpace.People}
+                    spaceKey={MetaSpace.Home}
                     selected={true}
-                    label="People"
+                    label="Home"
                     data-testid="create-space-button"
                     notificationState={notificationState}
                     size="32px"
                 />,
             );
 
-            expect(container.querySelector(".mx_NotificationBadge_count")).toHaveTextContent("8");
+            expect(getByTestId(container, "notification-badge")).toHaveTextContent("8");
             expect(asFragment()).toMatchSnapshot();
         });
     });
@@ -139,11 +141,14 @@ describe("SpaceItem", () => {
     subspace.name = "Subspace";
 
     it("should render a space with subspaces", () => {
-        mocked(SpaceStore.instance.getChildSpaces).mockImplementation((spaceId) =>
+        mocked(SDKContextClass.instance.spaceStore.getChildSpaces).mockImplementation((spaceId) =>
             spaceId === space.roomId ? [subspace] : [],
         );
 
-        const { asFragment, queryByText, getByLabelText } = render(<SpaceItem space={space} activeSpaces={[]} />);
+        const { asFragment, queryByText, getByLabelText } = render(
+            <SpaceItem space={space} activeSpaces={[]} />,
+            clientAndSDKContextRenderOptions(cli, SDKContextClass.instance),
+        );
 
         expect(queryByText("Root Space")).toBeVisible();
         expect(queryByText("Subspace")).toBeNull();
diff --git a/apps/web/test/unit-tests/components/views/spaces/ThreadsActivityCentre-test.tsx b/apps/web/test/unit-tests/components/views/spaces/ThreadsActivityCentre-test.tsx
index 2e722eea3d..271b280d7c 100644
--- a/apps/web/test/unit-tests/components/views/spaces/ThreadsActivityCentre-test.tsx
+++ b/apps/web/test/unit-tests/components/views/spaces/ThreadsActivityCentre-test.tsx
@@ -124,7 +124,7 @@ describe("ThreadsActivityCentre", () => {
         expect(tacRows.length).toEqual(1);
 
         getByText(tacRows[0], "A notification");
-        expect(tacRows[0].getElementsByClassName("mx_NotificationBadge_level_notification").length).toEqual(1);
+        expect(tacRows[0].querySelector('[data-notification-level="notification"]')).toBeInTheDocument();
     });
 
     it("should render a room with a highlight notification in the TAC", async () => {
@@ -136,7 +136,7 @@ describe("ThreadsActivityCentre", () => {
         expect(tacRows.length).toEqual(1);
 
         getByText(tacRows[0], "This is a real highlight");
-        expect(tacRows[0].getElementsByClassName("mx_NotificationBadge_level_highlight").length).toEqual(1);
+        expect(tacRows[0].querySelector('[data-notification-level="highlight"]')).toBeInTheDocument();
     });
 
     it("renders notifications matching the snapshot", async () => {
diff --git a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
index 885213fcfe..475d47b206 100644
--- a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/AddExistingToSpaceDialog-test.tsx.snap
@@ -90,7 +90,7 @@ exports[`<AddExistingToSpaceDialog /> looks as expected 1`] = `
         </div>
       </div>
       <div
-        class="mx_AutoHideScrollbar mx_AddExistingToSpace_content"
+        class="_scrollbar_1d5jg_8 mx_AutoHideScrollbar mx_AddExistingToSpace_content"
         tabindex="-1"
       >
         <span
diff --git a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
deleted file mode 100644
index 6a964e90e0..0000000000
--- a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
+++ /dev/null
@@ -1,387 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`<SpacePanel /> should show all activated MetaSpaces in the correct order 1`] = `
-<DocumentFragment>
-  <nav
-    aria-label="Spaces"
-    class="mx_SpacePanel collapsed newUi"
-  >
-    <button
-      aria-expanded="false"
-      aria-haspopup="menu"
-      aria-label="User menu"
-      class="_triggerButton_1ejl3_50 mx_UserMenu"
-      data-state="closed"
-      id="radix-_r_0_"
-      type="button"
-    >
-      <span
-        aria-label="@test:test"
-        class="_avatar_va14e_8 _avatar-imageless_va14e_55"
-        data-color="5"
-        data-type="round"
-        role="img"
-        style="--cpd-avatar-size: 36px;"
-      >
-        t
-      </span>
-    </button>
-    <div
-      aria-label="Expand"
-      class="mx_AccessibleButton mx_SpacePanel_toggleCollapse"
-      role="button"
-      tabindex="0"
-    >
-      <svg
-        fill="currentColor"
-        height="1em"
-        viewBox="0 0 24 24"
-        width="1em"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
-        />
-      </svg>
-    </div>
-    <ul
-      aria-label="Spaces"
-      class="mx_AutoHideScrollbar mx_SpaceTreeLevel"
-      data-rbd-droppable-context-id="0"
-      data-rbd-droppable-id="top-level-spaces"
-      role="tree"
-      tabindex="-1"
-    >
-      <li
-        aria-selected="false"
-        class="mx_SpaceItem collapsed"
-        role="treeitem"
-      >
-        <div
-          aria-label="Home"
-          class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_narrow mx_SpaceButton_withIcon"
-          role="button"
-          tabindex="0"
-        >
-          <div
-            class="mx_SpaceButton_selectionWrapper"
-          >
-            <div
-              class="mx_SpaceButton_avatarWrapper"
-            >
-              <div
-                class="mx_SpaceButton_avatarPlaceholder"
-              >
-                <div
-                  class="mx_SpaceButton_icon"
-                >
-                  <svg
-                    fill="currentColor"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m12.971 3.54 7 3.889A2 2 0 0 1 21 9.177V19a2 2 0 0 1-2 2h-4v-9H9v9H5a2 2 0 0 1-2-2V9.177a2 2 0 0 1 1.029-1.748l7-3.89a2 2 0 0 1 1.942 0"
-                    />
-                  </svg>
-                </div>
-              </div>
-            </div>
-            <div
-              aria-expanded="false"
-              aria-haspopup="true"
-              aria-label="Options"
-              class="mx_AccessibleButton mx_SpaceButton_menuButton"
-              role="button"
-              tabindex="0"
-            >
-              <svg
-                fill="currentColor"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                />
-              </svg>
-            </div>
-          </div>
-        </div>
-      </li>
-      <li
-        aria-selected="false"
-        class="mx_SpaceItem collapsed"
-        role="treeitem"
-      >
-        <div
-          aria-label="Favourites"
-          class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_narrow mx_SpaceButton_withIcon"
-          role="button"
-          tabindex="-1"
-        >
-          <div
-            class="mx_SpaceButton_selectionWrapper"
-          >
-            <div
-              class="mx_SpaceButton_avatarWrapper"
-            >
-              <div
-                class="mx_SpaceButton_avatarPlaceholder"
-              >
-                <div
-                  class="mx_SpaceButton_icon"
-                >
-                  <svg
-                    fill="currentColor"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m12.897 2.817 2.336 4.733 5.223.76a1 1 0 0 1 .555 1.705L17.23 13.7l.892 5.202a1 1 0 0 1-1.45 1.054L12 17.5l-4.672 2.456a1 1 0 0 1-1.451-1.054l.892-5.202-3.78-3.685a1 1 0 0 1 .555-1.706l5.223-.759 2.336-4.733a1 1 0 0 1 1.794 0"
-                    />
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </li>
-      <li
-        aria-selected="false"
-        class="mx_SpaceItem collapsed"
-        role="treeitem"
-      >
-        <div
-          aria-label="People"
-          class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_narrow mx_SpaceButton_withIcon"
-          role="button"
-          tabindex="-1"
-        >
-          <div
-            class="mx_SpaceButton_selectionWrapper"
-          >
-            <div
-              class="mx_SpaceButton_avatarWrapper"
-            >
-              <div
-                class="mx_SpaceButton_avatarPlaceholder"
-              >
-                <div
-                  class="mx_SpaceButton_icon"
-                >
-                  <svg
-                    fill="currentColor"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M12 15q-1.65 0-2.825-1.175T8 11t1.175-2.825T12 7t2.825 1.175T16 11t-1.175 2.825T12 15"
-                    />
-                    <path
-                      d="M19.528 18.583A9.96 9.96 0 0 0 22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 2.52.933 4.824 2.472 6.583A9.98 9.98 0 0 0 12 22a9.98 9.98 0 0 0 7.528-3.417M8.75 16.388q-1.373.332-2.709.95a8 8 0 1 1 11.918 0 14.7 14.7 0 0 0-2.709-.95A13.8 13.8 0 0 0 12 16q-1.65 0-3.25.387"
-                    />
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </li>
-      <li
-        aria-selected="false"
-        class="mx_SpaceItem collapsed"
-        role="treeitem"
-      >
-        <div
-          aria-label="Other rooms"
-          class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_narrow mx_SpaceButton_withIcon"
-          role="button"
-          tabindex="-1"
-        >
-          <div
-            class="mx_SpaceButton_selectionWrapper"
-          >
-            <div
-              class="mx_SpaceButton_avatarWrapper"
-            >
-              <div
-                class="mx_SpaceButton_avatarPlaceholder"
-              >
-                <div
-                  class="mx_SpaceButton_icon"
-                >
-                  <svg
-                    fill="currentColor"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="m8.566 17-.944 4.094q-.086.406-.372.656t-.687.25q-.543 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.801-3.5H3.158q-.572 0-.916-.484a1.27 1.27 0 0 1-.2-1.078 1.12 1.12 0 0 1 1.116-.938H6.85l1.145-5h-3.12q-.57 0-.915-.484a1.27 1.27 0 0 1-.2-1.078A1.12 1.12 0 0 1 4.875 7h3.691l.945-4.094q.085-.406.372-.656.286-.25.686-.25.544 0 .887.469.345.468.2 1.031l-.8 3.5h4.578l.944-4.094q.085-.406.372-.656.286-.25.687-.25.543 0 .887.469t.2 1.031L17.723 7h3.119q.573 0 .916.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937H17.15l-1.145 5h3.12q.57 0 .915.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937h-3.691l-.944 4.094q-.087.406-.373.656t-.686.25q-.544 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.8-3.5zm.573-2.5h4.578l1.144-5h-4.578z"
-                    />
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </li>
-      <li
-        aria-selected="false"
-        class="mx_SpaceItem collapsed"
-        role="treeitem"
-      >
-        <div
-          aria-label="Conferences"
-          class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_narrow mx_SpaceButton_withIcon"
-          role="button"
-          tabindex="-1"
-        >
-          <div
-            class="mx_SpaceButton_selectionWrapper"
-          >
-            <div
-              class="mx_SpaceButton_avatarWrapper"
-            >
-              <div
-                class="mx_SpaceButton_avatarPlaceholder"
-              >
-                <div
-                  class="mx_SpaceButton_icon"
-                >
-                  <svg
-                    fill="currentColor"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
-                    />
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </li>
-      <li
-        aria-selected="false"
-        class="mx_SpaceItem mx_SpaceItem_new collapsed"
-        role="treeitem"
-      >
-        <div
-          aria-label="Create a space"
-          class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_new mx_SpaceButton_narrow mx_SpaceButton_withIcon"
-          data-testid="create-space-button"
-          role="button"
-          tabindex="-1"
-        >
-          <div
-            class="mx_SpaceButton_selectionWrapper"
-          >
-            <div
-              class="mx_SpaceButton_avatarWrapper"
-            >
-              <div
-                class="mx_SpaceButton_avatarPlaceholder"
-              >
-                <div
-                  class="mx_SpaceButton_icon"
-                >
-                  <svg
-                    fill="currentColor"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M11 13H6a.97.97 0 0 1-.713-.287A.97.97 0 0 1 5 12q0-.424.287-.713A.97.97 0 0 1 6 11h5V6q0-.424.287-.713A.97.97 0 0 1 12 5q.424 0 .713.287Q13 5.576 13 6v5h5q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 18 13h-5v5q0 .424-.287.712A.97.97 0 0 1 12 19a.97.97 0 0 1-.713-.288A.97.97 0 0 1 11 18z"
-                    />
-                  </svg>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </li>
-    </ul>
-    <div
-      class="mx_ThreadsActivityCentre_container"
-    >
-      <button
-        aria-disabled="false"
-        aria-expanded="false"
-        aria-haspopup="menu"
-        aria-label="Threads"
-        aria-labelledby="_r_14_"
-        class="_icon-button_1215g_8 mx_ThreadsActivityCentreButton"
-        data-kind="primary"
-        data-state="closed"
-        id="radix-_r_12_"
-        role="button"
-        style="--cpd-icon-button-size: 32px;"
-        tabindex="0"
-        type="button"
-      >
-        <div
-          class="_indicator-icon_147l5_17"
-          style="--cpd-icon-button-size: 100%;"
-        >
-          <svg
-            class="mx_ThreadsActivityCentreButton_Icon"
-            fill="currentColor"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
-            />
-          </svg>
-        </div>
-      </button>
-    </div>
-    <button
-      aria-expanded="false"
-      aria-label="Quick settings"
-      aria-labelledby="_r_19_"
-      class="_icon-button_1215g_8 mx_QuickSettingsButton"
-      data-kind="primary"
-      role="button"
-      style="--cpd-icon-button-size: 32px;"
-      tabindex="0"
-      title="Quick settings"
-    >
-      <div
-        class="_indicator-icon_147l5_17"
-        style="--cpd-icon-button-size: 100%;"
-      >
-        <svg
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M12.731 2C13.432 2 14 2.568 14 3.269c0 .578.396 1.074.935 1.286q.128.052.253.106c.531.23 1.162.16 1.572-.25a1.27 1.27 0 0 1 1.794 0l1.034 1.035a1.27 1.27 0 0 1 0 1.794c-.41.41-.48 1.04-.248 1.572l.105.253c.212.539.708.935 1.286.935.701 0 1.269.568 1.269 1.269v1.462c0 .701-.568 1.269-1.269 1.269-.578 0-1.074.396-1.287.935q-.05.128-.104.253c-.232.531-.161 1.162.248 1.572a1.27 1.27 0 0 1 0 1.794l-1.034 1.034a1.27 1.27 0 0 1-1.794 0c-.41-.41-1.04-.48-1.572-.248a8 8 0 0 1-.253.105c-.539.212-.935.708-.935 1.286 0 .701-.568 1.269-1.269 1.269H11.27c-.702 0-1.27-.568-1.27-1.269 0-.578-.396-1.074-.935-1.287a8 8 0 0 1-.253-.104c-.531-.232-1.162-.161-1.572.248a1.27 1.27 0 0 1-1.794 0l-1.034-1.034a1.27 1.27 0 0 1 0-1.794c.41-.41.48-1.04.249-1.572a8 8 0 0 1-.106-.253C4.343 14.396 3.847 14 3.27 14 2.568 14 2 13.432 2 12.731V11.27c0-.702.568-1.27 1.269-1.27.578 0 1.074-.396 1.286-.935q.052-.128.106-.253c.23-.531.16-1.162-.25-1.572a1.27 1.27 0 0 1 0-1.794l1.035-1.034a1.27 1.27 0 0 1 1.794 0c.41.41 1.04.48 1.572.249a8 8 0 0 1 .253-.106c.539-.212.935-.708.935-1.286C10 2.568 10.568 2 11.269 2zM12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8"
-          />
-        </svg>
-      </div>
-    </button>
-  </nav>
-</DocumentFragment>
-`;
diff --git a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap
index 1673424036..ff003777e9 100644
--- a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpaceSettingsVisibilityTab-test.tsx.snap
@@ -4,7 +4,7 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space Access renders guest
 <input
   checked=""
   class="_input_udcm8_24"
-  id="_r_h_"
+  id="react-use-id-1"
   role="switch"
   type="checkbox"
 />
@@ -108,7 +108,7 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space renders addresses sec
                 Anyone can join.
               </span>
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div>
                   <div
@@ -122,10 +122,10 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space renders addresses sec
                   </div>
                 </div>
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -133,7 +133,7 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space renders addresses sec
                       <input
                         checked=""
                         class="_input_udcm8_24"
-                        id="_r_3j_"
+                        id="react-use-id-1"
                         role="switch"
                         type="checkbox"
                       />
@@ -143,17 +143,17 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space renders addresses sec
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
-                      for="_r_3j_"
+                      class="_label_1o4d9_60"
+                      for="react-use-id-1"
                     >
                       Preview space
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
-                      id="radix-_r_3l_"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
+                      id="radix-react-use-id-2"
                     >
                       Allow people to preview your space before they join.
                     </span>
@@ -234,13 +234,13 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space renders addresses sec
                     </svg>
                   </div>
                   <form
-                    class="_root_19upo_16"
+                    class="_root_1o4d9_17"
                   >
                     <div
-                      class="_inline-field_19upo_32"
+                      class="_inline-field_1o4d9_33"
                     >
                       <div
-                        class="_inline-field-control_19upo_44"
+                        class="_inline-field-control_1o4d9_45"
                       >
                         <div
                           class="_container_udcm8_10"
@@ -248,7 +248,7 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space renders addresses sec
                           <input
                             class="_input_udcm8_24"
                             disabled=""
-                            id="_r_3u_"
+                            id="react-use-id-3"
                             role="switch"
                             type="checkbox"
                           />
@@ -258,17 +258,17 @@ exports[`<SpaceSettingsVisibilityTab /> for a public space renders addresses sec
                         </div>
                       </div>
                       <div
-                        class="_inline-field-body_19upo_38"
+                        class="_inline-field-body_1o4d9_39"
                       >
                         <label
-                          class="_label_19upo_59"
-                          for="_r_3u_"
+                          class="_label_1o4d9_60"
+                          for="react-use-id-3"
                         >
                           Publish this room to the public in matrix.org's room directory?
                         </label>
                         <span
-                          class="_message_19upo_85 _help-message_19upo_91"
-                          id="radix-_r_40_"
+                          class="_message_1o4d9_86 _help-message_1o4d9_92"
+                          id="radix-react-use-id-4"
                         >
                           You must have permission to set the main address to publish this room.
                         </span>
@@ -486,13 +486,13 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
                 Anyone can join.
               </span>
               <form
-                class="_root_19upo_16"
+                class="_root_1o4d9_17"
               >
                 <div
-                  class="_inline-field_19upo_32"
+                  class="_inline-field_1o4d9_33"
                 >
                   <div
-                    class="_inline-field-control_19upo_44"
+                    class="_inline-field-control_1o4d9_45"
                   >
                     <div
                       class="_container_udcm8_10"
@@ -500,7 +500,7 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
                       <input
                         checked=""
                         class="_input_udcm8_24"
-                        id="_r_0_"
+                        id="react-use-id-1"
                         role="switch"
                         type="checkbox"
                       />
@@ -510,17 +510,17 @@ exports[`<SpaceSettingsVisibilityTab /> renders container 1`] = `
                     </div>
                   </div>
                   <div
-                    class="_inline-field-body_19upo_38"
+                    class="_inline-field-body_1o4d9_39"
                   >
                     <label
-                      class="_label_19upo_59"
-                      for="_r_0_"
+                      class="_label_1o4d9_60"
+                      for="react-use-id-1"
                     >
                       Preview space
                     </label>
                     <span
-                      class="_message_19upo_85 _help-message_19upo_91"
-                      id="radix-_r_2_"
+                      class="_message_1o4d9_86 _help-message_1o4d9_92"
+                      id="radix-react-use-id-2"
                     >
                       Allow people to preview your space before they join.
                     </span>
diff --git a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpaceTreeLevel-test.tsx.snap b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpaceTreeLevel-test.tsx.snap
index 0400231e07..9710e8fae7 100644
--- a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpaceTreeLevel-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/SpaceTreeLevel-test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`SpaceButton metaspace should render notificationState if one is provided 1`] = `
 <DocumentFragment>
   <div
-    aria-label="People"
+    aria-label="Home"
     class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_active"
     data-testid="create-space-button"
     role="button"
@@ -25,23 +25,27 @@ exports[`SpaceButton metaspace should render notificationState if one is provide
         <div
           class="mx_SpacePanel_badgeContainer"
         >
-          <div
-            class="mx_AccessibleButton mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_notification mx_NotificationBadge_2char cpd-theme-light"
-            role="button"
+          <button
+            aria-label="Jump to first unread room."
+            class="mx_SpacePanel_notificationBadge _notificationBadge_19whq_8 _visible_19whq_16 _notification_19whq_8 _badge2Char_19whq_57 cpd-theme-light"
+            data-badge-type="badge_2char"
+            data-notification-level="notification"
+            data-testid="notification-badge"
             tabindex="-1"
+            type="button"
           >
             <span
-              class="mx_NotificationBadge_count"
+              class="_count_19whq_40"
             >
               8
             </span>
-          </div>
+          </button>
         </div>
       </div>
       <span
         class="mx_SpaceButton_name"
       >
-        People
+        Home
       </span>
     </div>
   </div>
diff --git a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
index 84e874dbae..3eaf158fa5 100644
--- a/apps/web/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
+++ b/apps/web/test/unit-tests/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap
@@ -2,23 +2,23 @@
 
 exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] = `
 <div
-  aria-labelledby="radix-_r_1m_"
+  aria-labelledby="radix-react-use-id-1"
   aria-orientation="vertical"
-  class="_menu_1kl3y_8"
+  class="_menu_so651_8"
   data-align="start"
   data-orientation="vertical"
   data-radix-menu-content=""
   data-side="top"
   data-state="open"
   dir="ltr"
-  id="radix-_r_1n_"
+  id="radix-react-use-id-2"
   role="menu"
   style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
   tabindex="-1"
 >
   <h3
-    class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_1kl3y_65"
-    id="_r_1u_"
+    class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_so651_65"
+    id="react-use-id-3"
   >
     Threads activity
   </h3>
@@ -66,10 +66,13 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
         />
       </svg>
       <div
-        class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_dot"
+        class="mx_ThreadsActivityCentre_notificationBadge _notificationBadge_19whq_8 _visible_19whq_16 _highlight_19whq_48 _dot_19whq_33"
+        data-badge-type="dot"
+        data-notification-level="highlight"
+        data-testid="notification-badge"
       >
         <span
-          class="mx_NotificationBadge_count"
+          class="_count_19whq_40"
         />
       </div>
     </button>
@@ -114,10 +117,13 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
         />
       </svg>
       <div
-        class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_notification mx_NotificationBadge_dot"
+        class="mx_ThreadsActivityCentre_notificationBadge _notificationBadge_19whq_8 _visible_19whq_16 _notification_19whq_8 _dot_19whq_33"
+        data-badge-type="dot"
+        data-notification-level="notification"
+        data-testid="notification-badge"
       >
         <span
-          class="mx_NotificationBadge_count"
+          class="_count_19whq_40"
         />
       </div>
     </button>
@@ -127,23 +133,23 @@ exports[`ThreadsActivityCentre renders notifications matching the snapshot 1`] =
 
 exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
 <div
-  aria-labelledby="radix-_r_2a_"
+  aria-labelledby="radix-react-use-id-1"
   aria-orientation="vertical"
-  class="_menu_1kl3y_8"
+  class="_menu_so651_8"
   data-align="start"
   data-orientation="vertical"
   data-radix-menu-content=""
   data-side="top"
   data-state="open"
   dir="ltr"
-  id="radix-_r_2b_"
+  id="radix-react-use-id-2"
   role="menu"
   style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
   tabindex="-1"
 >
   <h3
-    class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_1kl3y_65"
-    id="_r_2i_"
+    class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_so651_65"
+    id="react-use-id-3"
   >
     Threads activity
   </h3>
@@ -161,23 +167,23 @@ exports[`ThreadsActivityCentre should match snapshot when empty 1`] = `
 
 exports[`ThreadsActivityCentre should order the room with the same notification level by most recent 1`] = `
 <div
-  aria-labelledby="radix-_r_2j_"
+  aria-labelledby="radix-react-use-id-1"
   aria-orientation="vertical"
-  class="_menu_1kl3y_8"
+  class="_menu_so651_8"
   data-align="start"
   data-orientation="vertical"
   data-radix-menu-content=""
   data-side="top"
   data-state="open"
   dir="ltr"
-  id="radix-_r_2k_"
+  id="radix-react-use-id-2"
   role="menu"
   style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); pointer-events: auto;"
   tabindex="-1"
 >
   <h3
-    class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_1kl3y_65"
-    id="_r_2r_"
+    class="_typography_6v6n8_153 _font-body-sm-semibold_6v6n8_36 _menu-title_1sgvx_8 _title_so651_65"
+    id="react-use-id-3"
   >
     Threads activity
   </h3>
@@ -225,10 +231,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
         />
       </svg>
       <div
-        class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_dot"
+        class="mx_ThreadsActivityCentre_notificationBadge _notificationBadge_19whq_8 _visible_19whq_16 _highlight_19whq_48 _dot_19whq_33"
+        data-badge-type="dot"
+        data-notification-level="highlight"
+        data-testid="notification-badge"
       >
         <span
-          class="mx_NotificationBadge_count"
+          class="_count_19whq_40"
         />
       </div>
     </button>
@@ -273,10 +282,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
         />
       </svg>
       <div
-        class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_dot"
+        class="mx_ThreadsActivityCentre_notificationBadge _notificationBadge_19whq_8 _visible_19whq_16 _highlight_19whq_48 _dot_19whq_33"
+        data-badge-type="dot"
+        data-notification-level="highlight"
+        data-testid="notification-badge"
       >
         <span
-          class="mx_NotificationBadge_count"
+          class="_count_19whq_40"
         />
       </div>
     </button>
@@ -321,10 +333,13 @@ exports[`ThreadsActivityCentre should order the room with the same notification
         />
       </svg>
       <div
-        class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_dot"
+        class="mx_ThreadsActivityCentre_notificationBadge _notificationBadge_19whq_8 _visible_19whq_16 _highlight_19whq_48 _dot_19whq_33"
+        data-badge-type="dot"
+        data-notification-level="highlight"
+        data-testid="notification-badge"
       >
         <span
-          class="mx_NotificationBadge_count"
+          class="_count_19whq_40"
         />
       </div>
     </button>
diff --git a/apps/web/test/unit-tests/components/views/toasts/VerificationRequestToast-test.tsx b/apps/web/test/unit-tests/components/views/toasts/VerificationRequestToast-test.tsx
index f813e89286..d2fc03d2bc 100644
--- a/apps/web/test/unit-tests/components/views/toasts/VerificationRequestToast-test.tsx
+++ b/apps/web/test/unit-tests/components/views/toasts/VerificationRequestToast-test.tsx
@@ -7,33 +7,39 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type ComponentProps } from "react";
-import { mocked, type Mocked } from "jest-mock";
+import { mocked, type Mocked } from "jest-mock-vitest-adapter";
 import { render, type RenderResult } from "jest-matrix-react";
 import { TypedEventEmitter, type IMyDevice, type MatrixClient, Device } from "matrix-js-sdk/src/matrix";
 import { type VerificationRequest, VerificationRequestEvent } from "matrix-js-sdk/src/crypto-api";
 
 import VerificationRequestToast from "../../../../../src/components/views/toasts/VerificationRequestToast";
 import {
+    clientAndSDKContextRenderOptions,
     flushPromises,
     getMockClientWithEventEmitter,
     mockClientMethodsCrypto,
     mockClientMethodsUser,
 } from "../../../../test-utils";
 import ToastStore from "../../../../../src/stores/ToastStore";
-
-function renderComponent(
-    props: Partial<ComponentProps<typeof VerificationRequestToast>> & { request: VerificationRequest },
-): RenderResult {
-    const propsWithDefaults = {
-        toastKey: "test",
-        ...props,
-    };
-
-    return render(<VerificationRequestToast {...propsWithDefaults} />);
-}
+import { TestSDKContext } from "../../../TestSDKContext.ts";
 
 describe("VerificationRequestToast", () => {
     let client: Mocked<MatrixClient>;
+    let sdkContext: TestSDKContext;
+
+    function renderComponent(
+        props: Partial<ComponentProps<typeof VerificationRequestToast>> & { request: VerificationRequest },
+    ): RenderResult {
+        const propsWithDefaults = {
+            toastKey: "test",
+            ...props,
+        };
+
+        return render(
+            <VerificationRequestToast {...propsWithDefaults} />,
+            clientAndSDKContextRenderOptions(client, sdkContext),
+        );
+    }
 
     beforeEach(() => {
         client = getMockClientWithEventEmitter({
@@ -41,6 +47,8 @@ describe("VerificationRequestToast", () => {
             ...mockClientMethodsCrypto(),
             getDevice: jest.fn(),
         });
+        sdkContext = new TestSDKContext();
+        sdkContext._client = client;
     });
 
     it("should render a self-verification", async () => {
diff --git a/apps/web/test/unit-tests/components/views/voip/CallView-test.tsx b/apps/web/test/unit-tests/components/views/voip/CallView-test.tsx
index ba8e9b619f..b073b0a25f 100644
--- a/apps/web/test/unit-tests/components/views/voip/CallView-test.tsx
+++ b/apps/web/test/unit-tests/components/views/voip/CallView-test.tsx
@@ -26,6 +26,7 @@ import {
     MockedCall,
     setupAsyncStoreWithClient,
     useMockMediaDevices,
+    clientAndSDKContextRenderOptions,
 } from "../../../../test-utils";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
 import { CallView as _CallView } from "../../../../../src/components/views/voip/CallView";
@@ -33,6 +34,7 @@ import { WidgetMessagingStore } from "../../../../../src/stores/widgets/WidgetMe
 import { CallStore } from "../../../../../src/stores/CallStore";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
 import { type WidgetMessaging } from "../../../../../src/stores/widgets/WidgetMessaging";
+import { TestSDKContext } from "../../../TestSDKContext.ts";
 
 const CallView = wrapInMatrixClientContext(_CallView);
 
@@ -41,6 +43,7 @@ describe("CallView", () => {
     jest.spyOn(HTMLMediaElement.prototype, "play").mockImplementation(async () => {});
 
     let client: Mocked<MatrixClient>;
+    let sdkContext: TestSDKContext;
     let room: Room;
     let alice: RoomMember;
     let call: MockedCall;
@@ -51,6 +54,8 @@ describe("CallView", () => {
 
         stubClient();
         client = mocked(MatrixClientPeg.safeGet());
+        sdkContext = new TestSDKContext();
+        sdkContext._client = client;
         DMRoomMap.makeShared(client);
 
         room = new Room("!1:example.org", client, "@alice:example.org", {
@@ -88,7 +93,10 @@ describe("CallView", () => {
     });
 
     const renderView = async (role: string | undefined = undefined): Promise<void> => {
-        render(<CallView room={room} resizing={false} role={role} onClose={() => {}} />);
+        render(
+            <CallView room={room} resizing={false} role={role} onClose={() => {}} />,
+            clientAndSDKContextRenderOptions(client, sdkContext),
+        );
         await act(() => Promise.resolve()); // Let effects settle
     };
 
diff --git a/apps/web/test/unit-tests/components/views/voip/LegacyCallView-test.tsx b/apps/web/test/unit-tests/components/views/voip/LegacyCallView-test.tsx
index 08f757067d..8cd4c19a76 100644
--- a/apps/web/test/unit-tests/components/views/voip/LegacyCallView-test.tsx
+++ b/apps/web/test/unit-tests/components/views/voip/LegacyCallView-test.tsx
@@ -6,24 +6,27 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render } from "jest-matrix-react";
+import { render, fireEvent } from "jest-matrix-react";
 import { type MatrixCall } from "matrix-js-sdk/src/matrix";
 import { type CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
 import { SDPStreamMetadataPurpose } from "matrix-js-sdk/src/webrtc/callEventTypes";
 
 import LegacyCallView from "../../../../../src/components/views/voip/LegacyCallView";
-import { stubClient } from "../../../../test-utils";
+import { clientAndSDKContextRenderOptions, createTestClient, stubClient } from "../../../../test-utils";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
+import { TestSDKContext } from "../../../TestSDKContext.ts";
 
 describe("LegacyCallView", () => {
+    const cli = stubClient();
+    const sdkContext = new TestSDKContext();
+    sdkContext._client = cli;
+
     it("should exit full screen on unmount", () => {
         const element = document.createElement("div");
         // @ts-expect-error
         document.fullscreenElement = element;
         document.exitFullscreen = jest.fn();
 
-        stubClient();
-
         const call = {
             on: jest.fn(),
             removeListener: jest.fn(),
@@ -35,15 +38,17 @@ describe("LegacyCallView", () => {
             isScreensharing: jest.fn().mockReturnValue(false),
         } as unknown as MatrixCall;
 
-        const { unmount } = render(<LegacyCallView call={call} sidebarShown={false} />);
+        const { unmount } = render(
+            <LegacyCallView call={call} sidebarShown={false} />,
+            clientAndSDKContextRenderOptions(cli, sdkContext),
+        );
         expect(document.exitFullscreen).not.toHaveBeenCalled();
         unmount();
         expect(document.exitFullscreen).toHaveBeenCalled();
     });
 
     it("should show/hide the sidebar based on the sidebarShown prop", async () => {
-        stubClient();
-
+        const cli = stubClient();
         const call = {
             roomId: "test-room",
             on: jest.fn(),
@@ -75,15 +80,17 @@ describe("LegacyCallView", () => {
             getUserIdForRoomId: jest.fn().mockReturnValue("test-user"),
         } as unknown as DMRoomMap);
 
-        const { container, rerender } = render(<LegacyCallView call={call} sidebarShown={true} />);
+        const { container, rerender } = render(
+            <LegacyCallView call={call} sidebarShown={true} />,
+            clientAndSDKContextRenderOptions(cli, sdkContext),
+        );
         expect(container.querySelector(".mx_LegacyCallViewSidebar")).toBeTruthy();
         rerender(<LegacyCallView call={call} sidebarShown={true} />);
         expect(container.querySelector(".mx_LegacyCallViewSidebar")).toBeTruthy();
     });
 
     it("should not show the sidebar button in picture-in-picture mode", async () => {
-        stubClient();
-
+        const cli = stubClient();
         const call = {
             on: jest.fn(),
             removeListener: jest.fn(),
@@ -98,7 +105,102 @@ describe("LegacyCallView", () => {
             getUserIdForRoomId: jest.fn().mockReturnValue("test-user"),
         } as unknown as DMRoomMap);
 
-        const { container } = render(<LegacyCallView call={call} sidebarShown={false} pipMode={true} />);
+        const { container } = render(
+            <LegacyCallView call={call} sidebarShown={false} pipMode={true} />,
+            clientAndSDKContextRenderOptions(cli, sdkContext),
+        );
         expect(container.querySelector(".mx_LegacyCallViewButtons_button_sidebar")).toBeFalsy();
     });
+
+    it("should allow user to resume held call", async () => {
+        const client = createTestClient();
+        const sdkContext = new TestSDKContext();
+        sdkContext._client = client;
+
+        const call = {
+            roomId: "test-room",
+            on: jest.fn(),
+            removeListener: jest.fn(),
+            getFeeds: jest.fn().mockReturnValue(
+                [{ local: true }, { local: false }, { local: true, screenshare: true }].map(
+                    (x, i) =>
+                        ({
+                            stream: { id: "test-" + i },
+                            addListener: jest.fn(),
+                            removeListener: jest.fn(),
+                            getMember: jest.fn(),
+                            isAudioMuted: jest.fn().mockReturnValue(true),
+                            isVideoMuted: jest.fn().mockReturnValue(true),
+                            isLocal: jest.fn().mockReturnValue(x.local),
+                            purpose: x.screenshare && SDPStreamMetadataPurpose.Screenshare,
+                        }) as unknown as CallFeed,
+                ),
+            ),
+            isLocalOnHold: jest.fn().mockReturnValue(false),
+            isRemoteOnHold: jest.fn().mockReturnValue(true),
+            isMicrophoneMuted: jest.fn().mockReturnValue(true),
+            isLocalVideoMuted: jest.fn().mockReturnValue(true),
+            isScreensharing: jest.fn().mockReturnValue(true),
+            noIncomingFeeds: jest.fn().mockReturnValue(false),
+            opponentSupportsSDPStreamMetadata: jest.fn().mockReturnValue(true),
+            getOpponentMember: jest.fn(),
+        } as unknown as MatrixCall;
+
+        jest.spyOn(sdkContext.legacyCallHandler, "roomIdForCall").mockReturnValue(call.roomId);
+        jest.spyOn(sdkContext.legacyCallHandler, "setActiveCallRoomId");
+
+        const { getByText } = render(
+            <LegacyCallView call={call} sidebarShown />,
+            clientAndSDKContextRenderOptions(client, sdkContext),
+        );
+        fireEvent.click(getByText("Resume"));
+
+        expect(sdkContext.legacyCallHandler.setActiveCallRoomId).toHaveBeenCalledWith(call.roomId);
+    });
+
+    it("should allow user to hangup call", async () => {
+        const client = createTestClient();
+        const sdkContext = new TestSDKContext();
+        sdkContext._client = client;
+
+        const call = {
+            roomId: "test-room",
+            on: jest.fn(),
+            removeListener: jest.fn(),
+            getFeeds: jest.fn().mockReturnValue(
+                [{ local: true }, { local: false }, { local: true, screenshare: true }].map(
+                    (x, i) =>
+                        ({
+                            stream: { id: "test-" + i },
+                            addListener: jest.fn(),
+                            removeListener: jest.fn(),
+                            getMember: jest.fn(),
+                            isAudioMuted: jest.fn().mockReturnValue(true),
+                            isVideoMuted: jest.fn().mockReturnValue(true),
+                            isLocal: jest.fn().mockReturnValue(x.local),
+                            purpose: x.screenshare && SDPStreamMetadataPurpose.Screenshare,
+                        }) as unknown as CallFeed,
+                ),
+            ),
+            isLocalOnHold: jest.fn().mockReturnValue(false),
+            isRemoteOnHold: jest.fn().mockReturnValue(false),
+            isMicrophoneMuted: jest.fn().mockReturnValue(true),
+            isLocalVideoMuted: jest.fn().mockReturnValue(true),
+            isScreensharing: jest.fn().mockReturnValue(true),
+            noIncomingFeeds: jest.fn().mockReturnValue(false),
+            opponentSupportsSDPStreamMetadata: jest.fn().mockReturnValue(true),
+            getOpponentMember: jest.fn(),
+        } as unknown as MatrixCall;
+
+        jest.spyOn(sdkContext.legacyCallHandler, "roomIdForCall").mockReturnValue(call.roomId);
+        jest.spyOn(sdkContext.legacyCallHandler, "hangupOrReject");
+
+        const { getByLabelText } = render(
+            <LegacyCallView call={call} sidebarShown />,
+            clientAndSDKContextRenderOptions(client, sdkContext),
+        );
+        fireEvent.click(getByLabelText("Hangup"));
+
+        expect(sdkContext.legacyCallHandler.hangupOrReject).toHaveBeenCalledWith(call.roomId);
+    });
 });
diff --git a/apps/web/test/unit-tests/components/views/voip/LegacyCallViewForRoom-test.tsx b/apps/web/test/unit-tests/components/views/voip/LegacyCallViewForRoom-test.tsx
index 2739c31257..5b53d6d5e1 100644
--- a/apps/web/test/unit-tests/components/views/voip/LegacyCallViewForRoom-test.tsx
+++ b/apps/web/test/unit-tests/components/views/voip/LegacyCallViewForRoom-test.tsx
@@ -12,28 +12,28 @@ import { CallEventHandlerEvent } from "matrix-js-sdk/src/webrtc/callEventHandler
 
 import LegacyCallView from "../../../../../src/components/views/voip/LegacyCallView";
 import LegacyCallViewForRoom from "../../../../../src/components/views/voip/LegacyCallViewForRoom";
-import { mkStubRoom, stubClient } from "../../../../test-utils";
+import { clientAndSDKContextRenderOptions, mkStubRoom, stubClient } from "../../../../test-utils";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
 import LegacyCallHandler from "../../../../../src/LegacyCallHandler";
-import { SDKContext, SdkContextClass } from "../../../../../src/contexts/SDKContext";
+import { TestSDKContext } from "../../../TestSDKContext.ts";
 
 jest.mock("../../../../../src/components/views/voip/LegacyCallView", () => jest.fn(() => "LegacyCallView"));
 
 describe("LegacyCallViewForRoom", () => {
     const LegacyCallViewMock = LegacyCallView as unknown as jest.Mock;
-    let sdkContext: SdkContextClass;
+    let sdkContext: TestSDKContext;
 
     beforeEach(() => {
-        stubClient();
-        sdkContext = new SdkContextClass();
+        sdkContext = new TestSDKContext();
+        sdkContext._client = stubClient();
         LegacyCallViewMock.mockClear();
     });
 
     it("should remember sidebar state, defaulting to shown", async () => {
-        const callHandler = new LegacyCallHandler();
+        const callHandler = new LegacyCallHandler(sdkContext);
         callHandler.start();
-        jest.spyOn(LegacyCallHandler, "instance", "get").mockImplementation(() => callHandler);
+        sdkContext._LegacyCallHandler = callHandler;
 
         const call = new MatrixCall({
             client: MatrixClientPeg.safeGet(),
@@ -48,7 +48,10 @@ describe("LegacyCallViewForRoom", () => {
         const cli = MatrixClientPeg.safeGet();
         cli.emit(CallEventHandlerEvent.Incoming, call);
 
-        const { rerender } = render(<LegacyCallViewForRoom roomId={call.roomId} />);
+        const { rerender } = render(
+            <LegacyCallViewForRoom roomId={call.roomId} />,
+            clientAndSDKContextRenderOptions(cli, sdkContext),
+        );
 
         let props = LegacyCallViewMock.mock.lastCall![0];
         expect(props.sidebarShown).toBeTruthy(); // Sidebar defaults to shown
@@ -83,17 +86,16 @@ describe("LegacyCallViewForRoom", () => {
             addListener: jest.fn(),
             removeListener: jest.fn(),
         };
-        jest.spyOn(LegacyCallHandler, "instance", "get").mockImplementation(
-            () => callHandler as unknown as LegacyCallHandler,
-        );
+        sdkContext._LegacyCallHandler = callHandler as unknown as LegacyCallHandler;
 
         jest.spyOn(sdkContext.resizeNotifier, "startResizing");
         jest.spyOn(sdkContext.resizeNotifier, "stopResizing");
         jest.spyOn(sdkContext.resizeNotifier, "notifyTimelineHeightChanged");
 
-        const { container } = render(<LegacyCallViewForRoom roomId={call.roomId} />, {
-            wrapper: ({ children }) => <SDKContext.Provider value={sdkContext}>{children}</SDKContext.Provider>,
-        });
+        const { container } = render(
+            <LegacyCallViewForRoom roomId={call.roomId} />,
+            clientAndSDKContextRenderOptions(sdkContext.client!, sdkContext),
+        );
 
         const resizer = container.querySelector(".mx_LegacyCallViewForRoom_ResizeHandle");
         await waitFor(() => {
diff --git a/apps/web/test/unit-tests/components/views/voip/VideoFeed-test.tsx b/apps/web/test/unit-tests/components/views/voip/VideoFeed-test.tsx
index bcb1632a38..f09142b25b 100644
--- a/apps/web/test/unit-tests/components/views/voip/VideoFeed-test.tsx
+++ b/apps/web/test/unit-tests/components/views/voip/VideoFeed-test.tsx
@@ -14,9 +14,9 @@ import { type MatrixClient, Room } from "matrix-js-sdk/src/matrix";
 
 import * as AvatarModule from "../../../../../src/Avatar";
 import VideoFeed from "../../../../../src/components/views/voip/VideoFeed";
-import { stubClient, useMockedCalls } from "../../../../test-utils";
-import type LegacyCallHandler from "../../../../../src/LegacyCallHandler";
+import { clientAndSDKContextRenderOptions, stubClient, useMockedCalls } from "../../../../test-utils";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
+import { TestSDKContext } from "../../../TestSDKContext.ts";
 
 const FAKE_AVATAR_URL = "http://fakeurl.dummy/fake.png";
 
@@ -24,9 +24,12 @@ describe("VideoFeed", () => {
     useMockedCalls();
 
     let client: MatrixClient;
+    let sdkContext: TestSDKContext;
 
     beforeAll(() => {
         client = stubClient();
+        sdkContext = new TestSDKContext();
+        sdkContext._client = client;
         (AvatarModule as any).avatarUrlForRoom = jest.fn().mockReturnValue(FAKE_AVATAR_URL);
 
         const dmRoomMap = new DMRoomMap(client);
@@ -39,9 +42,7 @@ describe("VideoFeed", () => {
     });
 
     it("Displays the room avatar when no video is available", () => {
-        window.mxLegacyCallHandler = {
-            roomIdForCall: jest.fn().mockReturnValue("!this:room.here"),
-        } as unknown as LegacyCallHandler;
+        jest.spyOn(sdkContext.legacyCallHandler, "roomIdForCall").mockReturnValue("!this:room.here");
 
         const mockCall = {
             room: new Room("!room:example.com", client, client.getSafeUserId()),
@@ -53,7 +54,10 @@ describe("VideoFeed", () => {
             addListener: jest.fn(),
             removeListener: jest.fn(),
         };
-        render(<VideoFeed feed={feed as unknown as CallFeed} call={mockCall as unknown as MatrixCall} />);
+        render(
+            <VideoFeed feed={feed as unknown as CallFeed} call={mockCall as unknown as MatrixCall} />,
+            clientAndSDKContextRenderOptions(client, sdkContext),
+        );
         const avatarImg = screen.getByRole("presentation");
         expect(avatarImg).toHaveAttribute("src", FAKE_AVATAR_URL);
     });
diff --git a/apps/web/test/unit-tests/contexts/ToastContext-test.ts b/apps/web/test/unit-tests/contexts/ToastContext-test.ts
deleted file mode 100644
index 1124dec7a2..0000000000
--- a/apps/web/test/unit-tests/contexts/ToastContext-test.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2024 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { ToastRack } from "../../../src/contexts/ToastContext";
-
-describe("ToastRack", () => {
-    it("should return a toast once one is displayed", () => {
-        const toastRack = new ToastRack();
-        toastRack.displayToast("Hello, world!");
-
-        expect(toastRack.getActiveToast()).toBe("Hello, world!");
-    });
-
-    it("calls update callback when a toast is added", () => {
-        const toastRack = new ToastRack();
-        const updateCallbackFn = jest.fn();
-        toastRack.setCallback(updateCallbackFn);
-        toastRack.displayToast("Hello, world!");
-
-        expect(updateCallbackFn).toHaveBeenCalled();
-    });
-
-    it("removes toast when remove function is called", () => {
-        const toastRack = new ToastRack();
-        const removeFn = toastRack.displayToast("Hello, world!");
-        expect(toastRack.getActiveToast()).toBe("Hello, world!");
-        removeFn();
-        expect(toastRack.getActiveToast()).toBeUndefined();
-    });
-});
diff --git a/apps/web/test/unit-tests/createRoom-test.ts b/apps/web/test/unit-tests/createRoom-test.ts
index 3474020f65..3e41930ca7 100644
--- a/apps/web/test/unit-tests/createRoom-test.ts
+++ b/apps/web/test/unit-tests/createRoom-test.ts
@@ -36,10 +36,29 @@ import createRoom, {
     canEncryptToAllUsers,
     waitForRoomEncryption,
 } from "../../src/createRoom";
-import SettingsStore from "../../src/settings/SettingsStore";
 import { ElementCallMemberEventType } from "../../src/call-types";
 import DMRoomMap from "../../src/utils/DMRoomMap";
 import { PreferredRoomVersions } from "../../src/utils/PreferredRoomVersions";
+import SdkConfig from "../../src/SdkConfig";
+
+/**
+ * This should be the same as
+ * { POWER_LEVEL_EVENTS_DEFAULT, [ElementCallMemberEventType.name]: 0 }
+ * to get the most regression coverage we provide the string based snapshot here.
+ */
+const POWER_LEVELS_WITH_CALL_MEMBER = {
+    // Default events power levels we always expect
+    "m.room.avatar": 50,
+    "m.room.canonical_alias": 50,
+    "m.room.encryption": 100,
+    "m.room.history_visibility": 100,
+    "m.room.name": 50,
+    "m.room.power_levels": 100,
+    "m.room.server_acl": 100,
+    "m.room.tombstone": 100,
+    // Custom rtc.member event we expect to be 0
+    [ElementCallMemberEventType.name]: 0,
+};
 
 describe("createRoom", () => {
     mockPlatformPeg();
@@ -51,7 +70,10 @@ describe("createRoom", () => {
         DMRoomMap.makeShared(client);
     });
 
-    afterEach(() => jest.clearAllMocks());
+    afterEach(() => {
+        jest.clearAllMocks();
+        SdkConfig.reset();
+    });
 
     it("creates a private room", async () => {
         await createRoom(client, { createOpts: { preset: Preset.PrivateChat } });
@@ -63,6 +85,7 @@ describe("createRoom", () => {
                 { state_key: "", type: "m.room.guest_access", content: { guest_access: "can_join" } },
                 { type: "m.room.history_visibility", content: { history_visibility: "invited" } },
             ],
+            power_level_content_override: { events: POWER_LEVELS_WITH_CALL_MEMBER },
         });
     });
 
@@ -83,6 +106,7 @@ describe("createRoom", () => {
                 },
                 { type: "m.room.history_visibility", content: { history_visibility: "invited" } },
             ],
+            power_level_content_override: { events: POWER_LEVELS_WITH_CALL_MEMBER },
         });
     });
 
@@ -112,6 +136,7 @@ describe("createRoom", () => {
                 { type: "m.room.history_visibility", content: { history_visibility: "invited" } },
                 // Room name is NOT included, since it needs to be encrypted.
             ],
+            power_level_content_override: { events: POWER_LEVELS_WITH_CALL_MEMBER },
         });
 
         // And the room name, topic and avatar are set later
@@ -155,6 +180,7 @@ describe("createRoom", () => {
                 { type: "m.room.history_visibility", content: { history_visibility: "invited" } },
                 // Room name is NOT included, since it needs to be encrypted.
             ],
+            power_level_content_override: { events: POWER_LEVELS_WITH_CALL_MEMBER },
         });
 
         // And the avatar is set later
@@ -188,6 +214,7 @@ describe("createRoom", () => {
                 { type: "m.room.history_visibility", content: { history_visibility: "invited" } },
                 // Room name is NOT included, since it needs to be encrypted.
             ],
+            power_level_content_override: { events: POWER_LEVELS_WITH_CALL_MEMBER },
         });
 
         // And the room name, topic and avatar were not set since we didn't
@@ -228,6 +255,7 @@ describe("createRoom", () => {
                 { type: "m.space.parent", state_key: parentSpace.roomId, content: { canonical: true, via: [] } },
                 { type: "m.room.history_visibility", content: { history_visibility: "invited" } },
             ],
+            power_level_content_override: { events: POWER_LEVELS_WITH_CALL_MEMBER },
         });
     });
 
@@ -238,6 +266,7 @@ describe("createRoom", () => {
             preset: "public_chat",
             visibility: "private",
             initial_state: [{ state_key: "", type: "m.room.guest_access", content: { guest_access: "can_join" } }],
+            power_level_content_override: { events: POWER_LEVELS_WITH_CALL_MEMBER },
         });
     });
 
@@ -249,6 +278,7 @@ describe("createRoom", () => {
             visibility: "private",
             topic: "My topic",
             initial_state: [{ state_key: "", type: "m.room.guest_access", content: { guest_access: "can_join" } }],
+            power_level_content_override: { events: POWER_LEVELS_WITH_CALL_MEMBER },
         });
     });
 
@@ -266,6 +296,7 @@ describe("createRoom", () => {
                 { state_key: "", type: "m.room.guest_access", content: { guest_access: "can_join" } },
                 { type: "m.space.parent", state_key: parentSpace.roomId, content: { canonical: true, via: [] } },
             ],
+            power_level_content_override: { events: POWER_LEVELS_WITH_CALL_MEMBER },
         });
     });
 
@@ -324,10 +355,6 @@ describe("createRoom", () => {
     });
 
     it("correctly sets up MSC3401 power levels", async () => {
-        jest.spyOn(SettingsStore, "getValue").mockImplementation((name: string): any => {
-            if (name === "feature_group_calls") return true;
-        });
-
         await createRoom(client, {});
 
         const callMemberPower =
diff --git a/apps/web/test/unit-tests/editor/deserialize-test.ts b/apps/web/test/unit-tests/editor/deserialize-test.ts
index e178ab8fba..2ed3e40e0d 100644
--- a/apps/web/test/unit-tests/editor/deserialize-test.ts
+++ b/apps/web/test/unit-tests/editor/deserialize-test.ts
@@ -316,7 +316,7 @@ describe("editor/deserialize", function () {
         });
         it("escapes backticks in code blocks", () => {
             const html =
-                "<p><code>this → ` is a backtick</code></p>" + "<pre><code>and here are 3 of them:\n```</code></pre>";
+                "<p><code>this → ` is a backtick</code></p><pre><code>and here are 3 of them:\n```</code></pre>";
             const parts = normalize(parseEvent(htmlMessage(html), createPartCreator()));
             expect(parts).toMatchSnapshot();
         });
diff --git a/apps/web/test/unit-tests/editor/mock.ts b/apps/web/test/unit-tests/editor/mock.ts
index e7bbe1c8ba..29ecc4cf50 100644
--- a/apps/web/test/unit-tests/editor/mock.ts
+++ b/apps/web/test/unit-tests/editor/mock.ts
@@ -13,6 +13,7 @@ import type AutocompleteWrapperModel from "../../../src/editor/autocomplete";
 import { type Caret } from "../../../src/editor/caret";
 import { type PillPart, type Part, PartCreator } from "../../../src/editor/parts";
 import DocumentPosition from "../../../src/editor/position";
+import { vi } from "../../setup/adapter.ts";
 
 export class MockAutoComplete {
     public _updateCallback;
@@ -68,8 +69,8 @@ export function createPartCreator(completions: PillPart[] = []) {
     };
     const room = new MockRoom() as unknown as Room;
     const client = {
-        getRooms: jest.fn().mockReturnValue([]),
-        getRoom: jest.fn().mockReturnValue(null),
+        getRooms: vi.fn().mockReturnValue([]),
+        getRoom: vi.fn().mockReturnValue(null),
     } as unknown as MatrixClient;
     return new PartCreator(room, client, autoCompleteCreator);
 }
diff --git a/apps/web/test/unit-tests/events/RelationsHelper-test.ts b/apps/web/test/unit-tests/events/RelationsHelper-test.ts
deleted file mode 100644
index c8992fc922..0000000000
--- a/apps/web/test/unit-tests/events/RelationsHelper-test.ts
+++ /dev/null
@@ -1,195 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { mocked } from "jest-mock";
-import {
-    EventType,
-    type MatrixClient,
-    type MatrixEvent,
-    MatrixEventEvent,
-    RelationType,
-    Room,
-} from "matrix-js-sdk/src/matrix";
-
-import { RelationsHelper, RelationsHelperEvent } from "../../../src/events/RelationsHelper";
-import { mkEvent, stubClient } from "../../test-utils";
-
-describe("RelationsHelper", () => {
-    const roomId = "!room:example.com";
-    let event: MatrixEvent;
-    let relatedEvent1: MatrixEvent;
-    let relatedEvent2: MatrixEvent;
-    let relatedEvent3: MatrixEvent;
-    let room: Room;
-    let client: MatrixClient;
-    let relationsHelper: RelationsHelper;
-    let onAdd: (event: MatrixEvent) => void;
-
-    beforeEach(() => {
-        client = stubClient();
-        mocked(client.relations).mockClear();
-        room = new Room(roomId, client, client.getSafeUserId());
-        mocked(client.getRoom).mockImplementation((getRoomId?: string): Room | null => {
-            if (getRoomId === roomId) return room;
-            return null;
-        });
-        event = mkEvent({
-            event: true,
-            type: EventType.RoomMessage,
-            room: roomId,
-            user: client.getSafeUserId(),
-            content: {},
-        });
-        relatedEvent1 = mkEvent({
-            event: true,
-            type: EventType.RoomMessage,
-            room: roomId,
-            user: client.getSafeUserId(),
-            content: {
-                ["m.relates_to"]: {
-                    rel_type: RelationType.Reference,
-                    event_id: event.getId(),
-                },
-            },
-        });
-        relatedEvent2 = mkEvent({
-            event: true,
-            type: EventType.RoomMessage,
-            room: roomId,
-            user: client.getSafeUserId(),
-            content: {
-                ["m.relates_to"]: {
-                    rel_type: RelationType.Reference,
-                    event_id: event.getId(),
-                },
-            },
-        });
-        relatedEvent3 = mkEvent({
-            event: true,
-            type: EventType.RoomMessage,
-            room: roomId,
-            user: client.getSafeUserId(),
-            content: {
-                ["m.relates_to"]: {
-                    rel_type: RelationType.Reference,
-                    event_id: event.getId(),
-                },
-            },
-        });
-        onAdd = jest.fn();
-    });
-
-    afterEach(() => {
-        relationsHelper?.destroy();
-    });
-
-    describe("when there is an event without ID", () => {
-        it("should raise an error", () => {
-            jest.spyOn(event, "getId").mockReturnValue(undefined);
-
-            expect(() => {
-                new RelationsHelper(event, RelationType.Reference, EventType.RoomMessage, client);
-            }).toThrow("unable to create RelationsHelper: missing event ID");
-        });
-    });
-
-    describe("when there is an event without room ID", () => {
-        it("should raise an error", () => {
-            jest.spyOn(event, "getRoomId").mockReturnValue(undefined);
-
-            expect(() => {
-                new RelationsHelper(event, RelationType.Reference, EventType.RoomMessage, client);
-            }).toThrow("unable to create RelationsHelper: missing room ID");
-        });
-    });
-
-    describe("when there is an event without relations", () => {
-        beforeEach(() => {
-            relationsHelper = new RelationsHelper(event, RelationType.Reference, EventType.RoomMessage, client);
-            relationsHelper.on(RelationsHelperEvent.Add, onAdd);
-        });
-
-        describe("emitCurrent", () => {
-            beforeEach(() => {
-                relationsHelper.emitCurrent();
-            });
-
-            it("should not emit any event", () => {
-                expect(onAdd).not.toHaveBeenCalled();
-            });
-        });
-
-        describe("and a new event appears", () => {
-            beforeEach(() => {
-                room.relations.aggregateChildEvent(relatedEvent2);
-                event.emit(MatrixEventEvent.RelationsCreated, RelationType.Reference, EventType.RoomMessage);
-            });
-
-            it("should emit the new event", () => {
-                expect(onAdd).toHaveBeenCalledWith(relatedEvent2);
-            });
-        });
-    });
-
-    describe("when there is an event with two pages server side relations", () => {
-        beforeEach(() => {
-            mocked(client.relations)
-                .mockResolvedValueOnce({
-                    events: [relatedEvent1, relatedEvent2],
-                    nextBatch: "next",
-                })
-                .mockResolvedValueOnce({
-                    events: [relatedEvent3],
-                    nextBatch: null,
-                });
-            relationsHelper = new RelationsHelper(event, RelationType.Reference, EventType.RoomMessage, client);
-            relationsHelper.on(RelationsHelperEvent.Add, onAdd);
-        });
-
-        describe("emitFetchCurrent", () => {
-            beforeEach(async () => {
-                await relationsHelper.emitFetchCurrent();
-            });
-
-            it("should emit the server side events", () => {
-                expect(onAdd).toHaveBeenCalledWith(relatedEvent1);
-                expect(onAdd).toHaveBeenCalledWith(relatedEvent2);
-                expect(onAdd).toHaveBeenCalledWith(relatedEvent3);
-            });
-        });
-    });
-
-    describe("when there is an event with relations", () => {
-        beforeEach(() => {
-            room.relations.aggregateChildEvent(relatedEvent1);
-            relationsHelper = new RelationsHelper(event, RelationType.Reference, EventType.RoomMessage, client);
-            relationsHelper.on(RelationsHelperEvent.Add, onAdd);
-        });
-
-        describe("emitCurrent", () => {
-            beforeEach(() => {
-                relationsHelper.emitCurrent();
-            });
-
-            it("should emit the related event", () => {
-                expect(onAdd).toHaveBeenCalledWith(relatedEvent1);
-            });
-        });
-
-        describe("and a new event appears", () => {
-            beforeEach(() => {
-                room.relations.aggregateChildEvent(relatedEvent2);
-                event.emit(MatrixEventEvent.RelationsCreated, RelationType.Reference, EventType.RoomMessage);
-            });
-
-            it("should emit the new event", () => {
-                expect(onAdd).toHaveBeenCalledWith(relatedEvent2);
-            });
-        });
-    });
-});
diff --git a/apps/web/test/unit-tests/hooks/room/useRoomMemberProfile-test.ts b/apps/web/test/unit-tests/hooks/room/useRoomMemberProfile-test.ts
new file mode 100644
index 0000000000..3e8eb52f06
--- /dev/null
+++ b/apps/web/test/unit-tests/hooks/room/useRoomMemberProfile-test.ts
@@ -0,0 +1,76 @@
+/*
+Copyright 2026 Element Creations 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 { RoomMember } from "matrix-js-sdk/src/matrix";
+
+import { resolveRoomMemberProfile, roomMemberToMemberInfo } from "../../../../src/hooks/room/useRoomMemberProfile";
+import { TimelineRenderingType } from "../../../../src/contexts/RoomContext";
+
+describe("resolveRoomMemberProfile", () => {
+    it("prefers the current room member when current profiles are enabled", () => {
+        const roomId = "!room:server";
+        const userId = "@alice:server";
+        const currentMember = new RoomMember(roomId, userId);
+        currentMember.rawDisplayName = "Alan (away)";
+        currentMember.disambiguate = false;
+        const historicalMember = new RoomMember(roomId, userId);
+        historicalMember.rawDisplayName = "Alan";
+        historicalMember.disambiguate = false;
+        const room = {
+            getMember: jest.fn().mockReturnValue(currentMember),
+        };
+
+        const resolved = resolveRoomMemberProfile({
+            room,
+            userId,
+            member: historicalMember,
+            useOnlyCurrentProfiles: true,
+            timelineRenderingType: TimelineRenderingType.Room,
+        });
+
+        expect(resolved).toBe(currentMember);
+    });
+
+    it("falls back to the historical member when current profiles are disabled", () => {
+        const roomId = "!room:server";
+        const userId = "@alice:server";
+        const historicalMember = new RoomMember(roomId, userId);
+        historicalMember.rawDisplayName = "Alan";
+        historicalMember.disambiguate = false;
+
+        const resolved = resolveRoomMemberProfile({
+            room: {
+                getMember: jest.fn(),
+            },
+            userId,
+            member: historicalMember,
+            useOnlyCurrentProfiles: false,
+            timelineRenderingType: TimelineRenderingType.Room,
+        });
+
+        expect(resolved).toBe(historicalMember);
+    });
+});
+
+describe("roomMemberToMemberInfo", () => {
+    it("converts a room member into plain render data", () => {
+        const member = new RoomMember("!room:server", "@alice:server");
+        member.rawDisplayName = "Alan";
+        member.disambiguate = true;
+
+        expect(roomMemberToMemberInfo(member)).toEqual({
+            userId: "@alice:server",
+            roomId: "!room:server",
+            rawDisplayName: "Alan",
+            disambiguate: true,
+        });
+    });
+
+    it("returns null for missing members", () => {
+        expect(roomMemberToMemberInfo(null)).toBeNull();
+    });
+});
diff --git a/apps/web/test/unit-tests/hooks/usePinnedEvents-test.tsx b/apps/web/test/unit-tests/hooks/usePinnedEvents-test.tsx
new file mode 100644
index 0000000000..9dd2c036c0
--- /dev/null
+++ b/apps/web/test/unit-tests/hooks/usePinnedEvents-test.tsx
@@ -0,0 +1,84 @@
+/*
+Copyright 2026 hayaksi1
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { type PropsWithChildren } from "react";
+import { act, renderHook, waitFor } from "jest-matrix-react";
+import { EventType, type MatrixClient, MatrixEvent, RelationType, Room } from "matrix-js-sdk/src/matrix";
+
+import { useFetchedPinnedEvents } from "../../../src/hooks/usePinnedEvents";
+import MatrixClientContext from "../../../src/contexts/MatrixClientContext";
+import { stubClient } from "../../test-utils";
+
+describe("useFetchedPinnedEvents", () => {
+    const roomId = "!room:server";
+    const userId = "@alice:server";
+    const pinnedEventId = "$pinned:server";
+
+    let client: MatrixClient;
+    let room: Room;
+    // Stable identity: the hook memoises on this array, so a fresh literal per render would
+    // refetch forever.
+    const pinnedIds = [pinnedEventId];
+
+    const makeEvent = (id: string, content: object): MatrixEvent =>
+        new MatrixEvent({
+            type: EventType.RoomMessage,
+            sender: userId,
+            room_id: roomId,
+            event_id: id,
+            origin_server_ts: 0,
+            content,
+        });
+
+    const edit = (targetId: string, id: string): MatrixEvent =>
+        makeEvent(id, {
+            "msgtype": "m.text",
+            "body": "* edited",
+            "m.new_content": { msgtype: "m.text", body: "edited" },
+            "m.relates_to": { rel_type: RelationType.Replace, event_id: targetId },
+        });
+
+    const wrapper = ({ children }: PropsWithChildren): React.JSX.Element => (
+        <MatrixClientContext.Provider value={client}>{children}</MatrixClientContext.Provider>
+    );
+
+    beforeEach(() => {
+        client = stubClient();
+        room = new Room(roomId, client, userId);
+        // The pinned event is deliberately not in the local timeline, so the hook holds a copy of
+        // its own that nothing else keeps up to date.
+        jest.spyOn(client, "fetchRoomEvent").mockResolvedValue(
+            makeEvent(pinnedEventId, { msgtype: "m.text", body: "original" }).event as never,
+        );
+        jest.spyOn(client, "relations").mockResolvedValue({ events: [] });
+    });
+
+    it("gives the edited content for a pinned event that is edited", async () => {
+        const { result } = renderHook(() => useFetchedPinnedEvents(room, pinnedIds), { wrapper });
+        await waitFor(() => expect(result.current).toHaveLength(1));
+        expect(result.current[0].getContent().body).toBe("original");
+
+        act(() => {
+            room.addLiveEvents([edit(pinnedEventId, "$edit:server")], { addToState: false });
+        });
+
+        await waitFor(() => expect(result.current[0].getContent().body).toBe("edited"));
+    });
+
+    it("leaves a pinned event alone when a different event is edited", async () => {
+        const { result } = renderHook(() => useFetchedPinnedEvents(room, pinnedIds), { wrapper });
+        await waitFor(() => expect(result.current).toHaveLength(1));
+
+        act(() => {
+            room.addLiveEvents([edit("$somethingElse:server", "$edit2:server")], { addToState: false });
+        });
+
+        // Wait long enough that an edit would have been applied, then confirm none was.
+        await new Promise((resolve) => setTimeout(resolve, 50));
+        expect(result.current[0].getContent().body).toBe("original");
+    });
+});
diff --git a/apps/web/test/unit-tests/models/Call-test.ts b/apps/web/test/unit-tests/models/Call-test.ts
index ba3b264b54..dbab94ba4d 100644
--- a/apps/web/test/unit-tests/models/Call-test.ts
+++ b/apps/web/test/unit-tests/models/Call-test.ts
@@ -6,7 +6,7 @@ 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 EventEmitter from "events";
+import EventEmitter from "node:events";
 import { mocked } from "jest-mock";
 import { waitFor } from "jest-matrix-react";
 import {
diff --git a/apps/web/test/unit-tests/models/notificationsettings/NotificationSettings-test.ts b/apps/web/test/unit-tests/models/notificationsettings/NotificationSettings-test.ts
index a51540129b..79045eb20f 100644
--- a/apps/web/test/unit-tests/models/notificationsettings/NotificationSettings-test.ts
+++ b/apps/web/test/unit-tests/models/notificationsettings/NotificationSettings-test.ts
@@ -215,4 +215,29 @@ describe("NotificationSettings", () => {
         expect(pendingChanges.deleted).toHaveLength(0);
         expect(pendingChanges.updated).toHaveLength(0);
     });
+
+    it("stores a keyword that starts with a dot under an id the server will accept", async () => {
+        const pushRules = (await import("./pushrules_default.json")) as IPushRules;
+        const model = { ...DefaultNotificationSettings, keywords: ["...push complete"] };
+
+        const pendingChanges = reconcileNotificationSettings(pushRules, model, false);
+
+        expect(pendingChanges.added).toEqual([
+            expect.objectContaining({
+                kind: PushRuleKind.ContentSpecific,
+                rule_id: "push complete",
+                pattern: "...push complete",
+            }),
+        ]);
+    });
+
+    it("keeps the ids of two keywords that differ only by a leading dot apart", async () => {
+        const pushRules = (await import("./pushrules_default.json")) as IPushRules;
+        const model = { ...DefaultNotificationSettings, keywords: ["banana", ".banana"] };
+
+        const pendingChanges = reconcileNotificationSettings(pushRules, model, false);
+
+        expect(pendingChanges.added.map((rule) => rule.rule_id)).toEqual(["banana", "banana-2"]);
+        expect(pendingChanges.added.map((rule) => rule.pattern)).toEqual(["banana", ".banana"]);
+    });
 });
diff --git a/apps/web/test/unit-tests/modules/ComposerApi-test.ts b/apps/web/test/unit-tests/modules/ComposerApi-test.ts
index af70ce0125..7d78343d3f 100644
--- a/apps/web/test/unit-tests/modules/ComposerApi-test.ts
+++ b/apps/web/test/unit-tests/modules/ComposerApi-test.ts
@@ -5,20 +5,79 @@ 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 { TimelineRenderingType } from "../../../src/contexts/RoomContext";
 import { Action } from "../../../src/dispatcher/actions";
-import type { MatrixDispatcher } from "../../../src/dispatcher/dispatcher";
-import { ComposerApi } from "../../../src/modules/ComposerApi";
+import { MatrixDispatcher } from "../../../src/dispatcher/dispatcher";
+import { type ComposerInsertPayload, ComposerType } from "../../../src/dispatcher/payloads/ComposerInsertPayload";
+import { ComposerApi, ModuleComposerApiEvents } from "../../../src/modules/ComposerApi";
+import type { ComposerInsertFilesPayload } from "../../../src/dispatcher/payloads/ComposerInsertFilePayload";
 
 describe("ComposerApi", () => {
-    it("should be able to insert text via insertTextIntoComposer()", () => {
-        const dispatcher = {
-            dispatch: jest.fn(),
-        } as unknown as MatrixDispatcher;
-        const api = new ComposerApi(dispatcher);
-        api.insertPlaintextIntoComposer("Hello world");
-        expect(dispatcher.dispatch).toHaveBeenCalledWith({
-            action: Action.ComposerInsert,
-            text: "Hello world",
+    describe("insertPlaintextIntoComposer()", () => {
+        it("should be able to insert text", () => {
+            const dispatcher = {
+                dispatch: jest.fn(),
+            } as unknown as MatrixDispatcher;
+            const api = new ComposerApi(dispatcher);
+            api.insertPlaintextIntoComposer("Hello world", { view: "room" });
+            expect(dispatcher.dispatch).toHaveBeenCalledWith({
+                action: Action.ComposerInsert,
+                text: "Hello world",
+                timelineRenderingType: TimelineRenderingType.Room,
+                composerType: ComposerType.Send,
+            } satisfies ComposerInsertPayload);
+        });
+        it("throws if called with an invalid view", () => {
+            const api = new ComposerApi(new MatrixDispatcher());
+            expect(() => api.insertPlaintextIntoComposer("text", { view: "bleh" as "room" })).toThrow(
+                "Invalid view 'bleh'",
+            );
+        });
+    });
+    describe("openFileUploadConfirmation()", () => {
+        it("should be able to initiate a file upload", () => {
+            const dispatcher = {
+                dispatch: jest.fn(),
+            } as unknown as MatrixDispatcher;
+            const api = new ComposerApi(dispatcher);
+            const files = [new File(["test"], "test.txt")];
+            api.openFileUploadConfirmation(files, { view: "room" });
+            expect(dispatcher.dispatch).toHaveBeenCalledWith({
+                action: Action.ComposerFileInsert,
+                files: files,
+                timelineRenderingType: TimelineRenderingType.Room,
+            } satisfies ComposerInsertFilesPayload);
+        });
+        it("throws if called with an invalid view", () => {
+            const api = new ComposerApi(new MatrixDispatcher());
+            const files = [new File(["test"], "test.txt")];
+            expect(() => api.openFileUploadConfirmation(files, { view: "bleh" as "room" })).toThrow(
+                "Invalid view 'bleh'",
+            );
+        });
+    });
+    describe("addFileUploadOption()", () => {
+        it("should be able to add a file upload option", () => {
+            const api = new ComposerApi(new MatrixDispatcher());
+            const eventCb = jest.fn();
+            api.on(ModuleComposerApiEvents.UploaderOptionsChanged, eventCb);
+            const option = { type: "an_option", label: "New option", onSelected: () => {} };
+            api.addFileUploadOption(option);
+            expect(api.fileUploadOptions).toHaveLength(1);
+            expect(api.fileUploadOptions).toContain(option);
+            expect(eventCb).toHaveBeenCalledWith(option);
+        });
+        it("throws if called with the type 'local'", () => {
+            const api = new ComposerApi(new MatrixDispatcher());
+            expect(() => api.addFileUploadOption({ type: "local", label: "New option", onSelected: () => {} })).toThrow(
+                'Option "local" is reserved',
+            );
+        });
+        it("throws if called with a duplicate type", () => {
+            const api = new ComposerApi(new MatrixDispatcher());
+            const option = { type: "an_option", label: "New option", onSelected: () => {} };
+            api.addFileUploadOption(option);
+            expect(() => api.addFileUploadOption({ ...option })).toThrow('Option "an_option" already exists');
         });
     });
 });
diff --git a/apps/web/test/unit-tests/modules/ExtrasApi-test.tsx b/apps/web/test/unit-tests/modules/ExtrasApi-test.tsx
index 241b518faf..bb566f86c4 100644
--- a/apps/web/test/unit-tests/modules/ExtrasApi-test.tsx
+++ b/apps/web/test/unit-tests/modules/ExtrasApi-test.tsx
@@ -1,18 +1,19 @@
 /*
-Copyright 2026 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.
-*/
+ * Copyright 2026 Element Creations 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, { act } from "react";
 import { render, type RenderOptions } from "jest-matrix-react";
 import { type MatrixClient, PendingEventOrdering, Room } from "matrix-js-sdk/src/matrix";
-import { EventEmitter } from "events";
+import { EventEmitter } from "node:events";
 
 import { stubClient } from "../../test-utils";
 import DMRoomMap from "../../../src/utils/DMRoomMap";
-import { SDKContext, SdkContextClass } from "../../../src/contexts/SDKContext";
+import { SDKContext } from "../../../src/contexts/SDKContext";
+import { TestSDKContext } from "../TestSDKContext.ts";
 import { ScopedRoomContextProvider } from "../../../src/contexts/ScopedRoomContext";
 import RoomContext, { type RoomContextType } from "../../../src/contexts/RoomContext";
 import MatrixClientContext from "../../../src/contexts/MatrixClientContext";
@@ -21,7 +22,7 @@ import { ModuleApi } from "../../../src/modules/Api";
 
 describe("ExtrasApi", () => {
     let client: MatrixClient;
-    let sdkContext: SdkContextClass;
+    let sdkContext: TestSDKContext;
     let room: Room;
     let roomContext: RoomContextType;
 
@@ -30,8 +31,8 @@ describe("ExtrasApi", () => {
         room = new Room("!test:room", client, "@alice:example.org", {
             pendingEventOrdering: PendingEventOrdering.Detached,
         });
-        sdkContext = new SdkContextClass();
-        sdkContext.client = client;
+        sdkContext = new TestSDKContext();
+        sdkContext._client = client;
         jest.spyOn(sdkContext.roomViewStore, "getRoomId").mockReturnValue(room.roomId);
 
         const mockRoomViewStore = new (class extends EventEmitter {
diff --git a/apps/web/test/unit-tests/modules/ProxiedModuleApi-test.tsx b/apps/web/test/unit-tests/modules/ProxiedModuleApi-test.tsx
index 20e0641694..bd6e8bddff 100644
--- a/apps/web/test/unit-tests/modules/ProxiedModuleApi-test.tsx
+++ b/apps/web/test/unit-tests/modules/ProxiedModuleApi-test.tsx
@@ -13,11 +13,11 @@ import { DialogContent, type DialogProps } from "@matrix-org/react-sdk-module-ap
 import { screen, within } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 import { type MatrixClient } from "matrix-js-sdk/src/matrix";
-import { type Mocked } from "jest-mock";
+import { type Mocked } from "jest-mock-vitest-adapter";
 
 import { ProxiedModuleApi } from "../../../src/modules/ProxiedModuleApi";
 import { getMockClientWithEventEmitter, mkRoom, stubClient } from "../../test-utils";
-import { setLanguage } from "../../../src/languageHandler";
+import { setLanguage } from "../../../src/i18n/settings";
 import { ModuleRunner } from "../../../src/modules/ModuleRunner";
 import { registerMockModule } from "./MockModule";
 import defaultDispatcher from "../../../src/dispatcher/dispatcher";
diff --git a/apps/web/test/unit-tests/modules/StoresApi-test.ts b/apps/web/test/unit-tests/modules/StoresApi-test.ts
index ba8a0c83da..ccdfdf1de6 100644
--- a/apps/web/test/unit-tests/modules/StoresApi-test.ts
+++ b/apps/web/test/unit-tests/modules/StoresApi-test.ts
@@ -14,7 +14,6 @@ import RoomListStoreV3, {
 } from "../../../src/stores/room-list-v3/RoomListStoreV3";
 import { mkRoom, stubClient } from "../../test-utils/test-utils";
 import { Room } from "../../../src/modules/models/Room";
-import {} from "../../../src/stores/room-list/algorithms/Algorithm";
 
 describe("StoresApi", () => {
     describe("RoomListStoreApi", () => {
diff --git a/apps/web/test/unit-tests/renderer/__snapshots__/link-tooltip-test.tsx.snap b/apps/web/test/unit-tests/renderer/__snapshots__/link-tooltip-test.tsx.snap
index e4a72ab6c8..c7488a730e 100644
--- a/apps/web/test/unit-tests/renderer/__snapshots__/link-tooltip-test.tsx.snap
+++ b/apps/web/test/unit-tests/renderer/__snapshots__/link-tooltip-test.tsx.snap
@@ -14,7 +14,7 @@ exports[`link-tooltip wraps single anchor 1`] = `
     
                 
     <span
-      aria-labelledby="_r_0_"
+      aria-labelledby="react-use-id-1"
       tabindex="0"
     >
       <a
diff --git a/apps/web/test/unit-tests/settings/watchers/FontWatcher-test.tsx b/apps/web/test/unit-tests/settings/watchers/FontWatcher-test.ts
similarity index 67%
rename from apps/web/test/unit-tests/settings/watchers/FontWatcher-test.tsx
rename to apps/web/test/unit-tests/settings/watchers/FontWatcher-test.ts
index 7e7aab6931..20e2b24681 100644
--- a/apps/web/test/unit-tests/settings/watchers/FontWatcher-test.tsx
+++ b/apps/web/test/unit-tests/settings/watchers/FontWatcher-test.ts
@@ -112,66 +112,6 @@ describe("FontWatcher", function () {
         });
     });
 
-    describe("Migrates baseFontSize", () => {
-        let watcher: FontWatcher | undefined;
-
-        beforeEach(() => {
-            document.documentElement.style.fontSize = "14px";
-            watcher = new FontWatcher();
-        });
-
-        afterEach(() => {
-            watcher!.stop();
-        });
-
-        it("should not run the migration", async () => {
-            await watcher!.start();
-            expect(SettingsStore.getValue("fontSizeDelta")).toBe(0);
-        });
-
-        it("should migrate from V1 font size to V3", async () => {
-            await SettingsStore.setValue("baseFontSize", null, SettingLevel.DEVICE, 13);
-            await watcher!.start();
-            // 13px (V1 font size) + 5px (V1 offset) + 1px (root font size increase) - 16px (default browser font size) = 3px
-            expect(SettingsStore.getValue("fontSizeDelta")).toBe(3);
-            // baseFontSize should be cleared
-            expect(SettingsStore.getValue("baseFontSize")).toBe(0);
-        });
-
-        it("should migrate from V2 font size to V3 using browser font size", async () => {
-            await SettingsStore.setValue("baseFontSizeV2", null, SettingLevel.DEVICE, 18);
-            await watcher!.start();
-            // 18px - 16px (default browser font size) = 2px
-            expect(SettingsStore.getValue("fontSizeDelta")).toBe(2);
-            // baseFontSize should be cleared
-            expect(SettingsStore.getValue("baseFontSizeV2")).toBe(0);
-        });
-
-        it("should migrate from V2 font size to V3 using fallback font size", async () => {
-            document.documentElement.style.fontSize = "";
-            await SettingsStore.setValue("baseFontSizeV2", null, SettingLevel.DEVICE, 18);
-            await watcher!.start();
-            // 18px - 16px (fallback) = 2px
-            expect(SettingsStore.getValue("fontSizeDelta")).toBe(2);
-            // baseFontSize should be cleared
-            expect(SettingsStore.getValue("baseFontSizeV2")).toBe(0);
-        });
-
-        it("should trigger migration when dispatched", async () => {
-            await watcher!.start();
-
-            await SettingsStore.setValue("baseFontSizeV2", null, SettingLevel.DEVICE, 18);
-            defaultDispatcher.fire(Action.MigrateBaseFontSize);
-
-            await waitFor(() => {
-                // 18px - 16px (default browser font size) = 2px
-                expect(SettingsStore.getValue("fontSizeDelta")).toBe(2);
-                // baseFontSizeV2 should be cleared
-                expect(SettingsStore.getValue("baseFontSizeV2")).toBe(0);
-            });
-        });
-    });
-
     it("should update root font size with positive delta", async () => {
         await new FontWatcher().start();
 
diff --git a/apps/web/test/unit-tests/slash-commands/upgraderoom-test.tsx b/apps/web/test/unit-tests/slash-commands/upgraderoom-test.ts
similarity index 100%
rename from apps/web/test/unit-tests/slash-commands/upgraderoom-test.tsx
rename to apps/web/test/unit-tests/slash-commands/upgraderoom-test.ts
diff --git a/apps/web/test/unit-tests/slash-commands/split-at-first-space-test.ts b/apps/web/test/unit-tests/slash-commands/utils.test.ts
similarity index 93%
rename from apps/web/test/unit-tests/slash-commands/split-at-first-space-test.ts
rename to apps/web/test/unit-tests/slash-commands/utils.test.ts
index 2bbbb87b3b..2ca3016425 100644
--- a/apps/web/test/unit-tests/slash-commands/split-at-first-space-test.ts
+++ b/apps/web/test/unit-tests/slash-commands/utils.test.ts
@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { splitAtFirstSpace } from "../../../src/slash-commands/SlashCommands";
+import { splitAtFirstSpace } from "../../../src/slash-commands/utils";
 
 describe("splitAtFirstSpace", () => {
     it("should be able to split arguments at the first whitespace", () => {
diff --git a/apps/web/test/unit-tests/slash-commands/utils.ts b/apps/web/test/unit-tests/slash-commands/utils.ts
index 5654128100..a46d69d817 100644
--- a/apps/web/test/unit-tests/slash-commands/utils.ts
+++ b/apps/web/test/unit-tests/slash-commands/utils.ts
@@ -11,8 +11,9 @@ import { mocked } from "jest-mock";
 import { type Command } from "../../../src/slash-commands/command";
 import { getCommand } from "../../../src/slash-commands/SlashCommands";
 import { stubClient } from "../../test-utils";
-import { SdkContextClass } from "../../../src/contexts/SDKContext";
+import { SDKContextClass } from "../../../src/contexts/SDKContextClass";
 import { LocalRoom } from "../../../src/models/LocalRoom";
+import DMRoomMap from "../../../src/utils/DMRoomMap.ts";
 
 export function setUpCommandTest(
     roomId: string,
@@ -30,6 +31,7 @@ export function setUpCommandTest(
     // createTestClient here instead of stubClient (i.e. avoid setting
     // MatrixClientPeg.)
     const client = stubClient();
+    DMRoomMap.makeShared(client);
     const { cmd: command, args } = getCommand(roomId, input);
 
     let room: Room;
@@ -40,7 +42,7 @@ export function setUpCommandTest(
         room = new Room(roomId, client, client.getSafeUserId());
     }
 
-    jest.spyOn(SdkContextClass.instance.roomViewStore, "getRoomId").mockReturnValue(roomId);
+    jest.spyOn(SDKContextClass.instance.roomViewStore, "getRoomId").mockReturnValue(roomId);
 
     mocked(client.getRoom).mockImplementation((rId: string): Room | null => {
         if (rId === roomId) {
diff --git a/apps/web/test/unit-tests/stores/BreadcrumbsStore-test.ts b/apps/web/test/unit-tests/stores/BreadcrumbsStore-test.ts
index 71ae11831d..5b19d77227 100644
--- a/apps/web/test/unit-tests/stores/BreadcrumbsStore-test.ts
+++ b/apps/web/test/unit-tests/stores/BreadcrumbsStore-test.ts
@@ -27,41 +27,6 @@ describe("BreadcrumbsStore", () => {
         jest.spyOn(SettingsStore, "getValue").mockReturnValue(false);
     });
 
-    it("does not meet room requirements if there are not enough rooms", () => {
-        // We don't have enough rooms, so we don't meet requirements
-        mocked(client.getVisibleRooms).mockReturnValue(fakeRooms(2));
-        expect(store.meetsRoomRequirement).toBe(false);
-    });
-
-    it("meets room requirements if there are enough rooms", () => {
-        // We do have enough rooms to show breadcrumbs
-        mocked(client.getVisibleRooms).mockReturnValue(fakeRooms(25));
-        expect(store.meetsRoomRequirement).toBe(true);
-    });
-
-    describe("And the feature_dynamic_room_predecessors is enabled", () => {
-        beforeEach(() => {
-            // Turn on feature_dynamic_room_predecessors setting
-            jest.spyOn(SettingsStore, "getValue").mockImplementation(
-                (settingName) => settingName === "feature_dynamic_room_predecessors",
-            );
-        });
-
-        it("passes through the dynamic room precessors flag", () => {
-            mocked(client.getVisibleRooms).mockReturnValue(fakeRooms(25));
-            expect(store.meetsRoomRequirement).toBeTruthy();
-            expect(client.getVisibleRooms).toHaveBeenCalledWith(true);
-        });
-    });
-
-    describe("And the feature_dynamic_room_predecessors is not enabled", () => {
-        it("passes through the dynamic room precessors flag", () => {
-            mocked(client.getVisibleRooms).mockReturnValue(fakeRooms(25));
-            expect(store.meetsRoomRequirement).toBeTruthy();
-            expect(client.getVisibleRooms).toHaveBeenCalledWith(false);
-        });
-    });
-
     describe("If the feature_dynamic_room_predecessors is not enabled", () => {
         beforeEach(() => {
             jest.spyOn(SettingsStore, "getValue").mockReturnValue(false);
@@ -155,17 +120,6 @@ describe("BreadcrumbsStore", () => {
         await flushPromises();
     }
 
-    /**
-     * Create as many fake rooms in an array as you ask for.
-     */
-    function fakeRooms(howMany: number): Room[] {
-        const ret: Room[] = [];
-        for (let i = 0; i < howMany; i++) {
-            ret.push(fakeRoom());
-        }
-        return ret;
-    }
-
     let roomIdx = 0;
 
     function fakeRoom(): Room {
diff --git a/apps/web/test/unit-tests/stores/CallStore-test.ts b/apps/web/test/unit-tests/stores/CallStore-test.ts
index 847c4b3592..61bdc44f37 100644
--- a/apps/web/test/unit-tests/stores/CallStore-test.ts
+++ b/apps/web/test/unit-tests/stores/CallStore-test.ts
@@ -11,6 +11,7 @@ import { type MockedObject } from "jest-mock";
 
 import { ElementCall } from "../../../src/models/Call";
 import { CallStore } from "../../../src/stores/CallStore";
+import SdkConfig from "../../../src/SdkConfig";
 import {
     setUpClientRoomAndStores,
     cleanUpClientRoomAndStores,
@@ -21,6 +22,7 @@ import {
 describe("CallStore", () => {
     let client: MockedObject<MatrixClient>;
     let room: Room;
+
     beforeEach(() => {
         enableCalls();
         const res = setUpClientRoomAndStores();
@@ -66,4 +68,20 @@ describe("CallStore", () => {
             { type: "type-d", other_data: "baz" },
         ]);
     });
+    it("does not fall back to client well-known when enable_client_well_known_lookups is false", async () => {
+        const sdkConfigGet = SdkConfig.get;
+        jest.spyOn(SdkConfig, "get").mockImplementation((key?: any, altCaseName?: string): any => {
+            if (key === "enable_client_well_known_lookups") return false;
+            return sdkConfigGet(key, altCaseName);
+        });
+        client._unstable_getRTCTransports.mockResolvedValue([{ type: "type-a", some_data: "value" }]);
+        client.getClientWellKnown.mockReturnValue({
+            "org.matrix.msc4143.rtc_foci": [{ type: "type-c", other_data: "bar" }],
+        });
+        await setupAsyncStoreWithClient(CallStore.instance, client);
+        // Only the modern endpoint contributes; the legacy well-known fallback is skipped entirely.
+        expect(CallStore.instance.getConfiguredRTCTransports()).toEqual([{ type: "type-a", some_data: "value" }]);
+        expect(client.waitForClientWellKnown).not.toHaveBeenCalled();
+        expect(client.getClientWellKnown).not.toHaveBeenCalled();
+    });
 });
diff --git a/apps/web/test/unit-tests/stores/MemberListStore-test.ts b/apps/web/test/unit-tests/stores/MemberListStore-test.ts
index 9139dde85d..1c6f5375f3 100644
--- a/apps/web/test/unit-tests/stores/MemberListStore-test.ts
+++ b/apps/web/test/unit-tests/stores/MemberListStore-test.ts
@@ -14,7 +14,7 @@ import SdkConfig from "../../../src/SdkConfig";
 import SettingsStore from "../../../src/settings/SettingsStore";
 import { MemberListStore } from "../../../src/stores/MemberListStore";
 import { stubClient } from "../../test-utils";
-import { TestSdkContext } from "../TestSdkContext";
+import { TestSDKContext } from "../TestSDKContext";
 
 describe("MemberListStore", () => {
     const alice = "@alice:bar";
@@ -26,10 +26,10 @@ describe("MemberListStore", () => {
     let room: Room;
 
     beforeEach(() => {
-        const context = new TestSdkContext();
+        const context = new TestSDKContext();
         client = stubClient();
         client.baseUrl = "https://invalid.base.url.here";
-        context.client = client;
+        context._client = client;
         store = new MemberListStore(context);
         // alice is joined to the room.
         room = new Room(roomId, client, client.getUserId()!);
diff --git a/apps/web/test/unit-tests/stores/MultiRoomViewStore-test.ts b/apps/web/test/unit-tests/stores/MultiRoomViewStore-test.ts
index 429ec3c08a..15e769c456 100644
--- a/apps/web/test/unit-tests/stores/MultiRoomViewStore-test.ts
+++ b/apps/web/test/unit-tests/stores/MultiRoomViewStore-test.ts
@@ -9,14 +9,14 @@ import { MultiRoomViewStore } from "../../../src/stores/MultiRoomViewStore";
 import { RoomViewStore } from "../../../src/stores/RoomViewStore";
 import { Action } from "../../../src/dispatcher/actions";
 import type { MatrixDispatcher } from "../../../src/dispatcher/dispatcher";
-import { TestSdkContext } from "../TestSdkContext";
+import { TestSDKContext } from "../TestSDKContext";
 
 jest.mock("../../../src/stores/RoomViewStore");
 
 describe("MultiRoomViewStore", () => {
     let multiRoomViewStore: MultiRoomViewStore;
     let mockDispatcher: MatrixDispatcher;
-    let mockSdkContext: TestSdkContext;
+    let mockSdkContext: TestSDKContext;
     let mockRoomViewStore: jest.Mocked<RoomViewStore>;
 
     beforeEach(() => {
@@ -30,7 +30,7 @@ describe("MultiRoomViewStore", () => {
         } as unknown as MatrixDispatcher;
 
         // Create mock SDK context
-        mockSdkContext = new TestSdkContext();
+        mockSdkContext = new TestSDKContext();
 
         // Create mock RoomViewStore instance
         mockRoomViewStore = {
diff --git a/apps/web/test/unit-tests/stores/OwnBeaconStore-test.ts b/apps/web/test/unit-tests/stores/OwnBeaconStore-test.ts
index 383488466a..04e00e00a0 100644
--- a/apps/web/test/unit-tests/stores/OwnBeaconStore-test.ts
+++ b/apps/web/test/unit-tests/stores/OwnBeaconStore-test.ts
@@ -19,7 +19,7 @@ import {
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { logger } from "matrix-js-sdk/src/logger";
-import { type Mocked } from "jest-mock";
+import { type Mocked } from "jest-mock-vitest-adapter";
 
 import { OwnBeaconStore, OwnBeaconStoreEvent } from "../../../src/stores/OwnBeaconStore";
 import {
diff --git a/apps/web/test/unit-tests/stores/OwnProfileStore-test.ts b/apps/web/test/unit-tests/stores/OwnProfileStore-test.ts
index 63d84521fe..f93e6a58a1 100644
--- a/apps/web/test/unit-tests/stores/OwnProfileStore-test.ts
+++ b/apps/web/test/unit-tests/stores/OwnProfileStore-test.ts
@@ -6,12 +6,13 @@ 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 MatrixClient, MatrixError } from "matrix-js-sdk/src/matrix";
+import { ClientEvent, type MatrixClient, MatrixError } from "matrix-js-sdk/src/matrix";
 import { type MockedObject, mocked } from "jest-mock";
 
 import { stubClient } from "../../test-utils";
 import { OwnProfileStore } from "../../../src/stores/OwnProfileStore";
 import { UPDATE_EVENT } from "../../../src/stores/AsyncStore";
+import SettingsStore from "../../../src/settings/SettingsStore";
 
 describe("OwnProfileStore", () => {
     let client: MockedObject<MatrixClient>;
@@ -76,4 +77,75 @@ describe("OwnProfileStore", () => {
         expect(ownProfileStore.displayName).toBe(client.getSafeUserId());
         expect(ownProfileStore.avatarMxc).toBeNull();
     });
+
+    describe("userStatus", () => {
+        beforeEach(() => {
+            client.getProfileInfo.mockResolvedValue({});
+        });
+
+        it("should be undefined if the feature is disabled", async () => {
+            jest.spyOn(SettingsStore, "getValue").mockReturnValue(false);
+            await ownProfileStore.start();
+
+            expect(ownProfileStore.userStatus).toBeUndefined();
+        });
+
+        it("should be undefined if no status is set", async () => {
+            jest.spyOn(SettingsStore, "getValue").mockReturnValue(true);
+            client.getExtendedProfileProperty.mockResolvedValue(undefined);
+            await ownProfileStore.start();
+
+            expect(ownProfileStore.userStatus).toBeUndefined();
+        });
+
+        it("should fetch and expose the user status on start", async () => {
+            jest.spyOn(SettingsStore, "getValue").mockReturnValue(true);
+            client.getExtendedProfileProperty.mockResolvedValue({ emoji: "🏝️", text: "On a tropical holiday" });
+            await ownProfileStore.start();
+
+            expect(client.getExtendedProfileProperty).toHaveBeenCalledWith(
+                client.getSafeUserId(),
+                "org.matrix.msc4426.status",
+            );
+            expect(ownProfileStore.userStatus).toEqual({ emoji: "🏝️", text: "On a tropical holiday" });
+        });
+
+        it("should reflect our own on-a-call status if no other status is set", async () => {
+            jest.spyOn(SettingsStore, "getValue").mockReturnValue(true);
+            client.getExtendedProfileProperty.mockImplementation(async (_userId, key) =>
+                key === "org.matrix.msc4426.call" ? { call_joined_ts: 12345 } : undefined,
+            );
+            await ownProfileStore.start();
+
+            expect(client.getExtendedProfileProperty).toHaveBeenCalledWith(
+                client.getSafeUserId(),
+                "org.matrix.msc4426.call",
+            );
+            expect(ownProfileStore.userStatus).toEqual({ emoji: "📞", text: "On a call" });
+        });
+
+        it("should update the user status when a UserProfileUpdate event is received for the current user", async () => {
+            jest.spyOn(SettingsStore, "getValue").mockReturnValue(true);
+            client.getExtendedProfileProperty.mockResolvedValue({ emoji: "🏝️", text: "On a tropical holiday" });
+            await ownProfileStore.start();
+
+            client.getExtendedProfileProperty.mockResolvedValue({ emoji: "🏡", text: "Back home" });
+            client.emit(ClientEvent.UserProfileUpdate, client.getSafeUserId(), null);
+            await new Promise(process.nextTick);
+
+            expect(ownProfileStore.userStatus).toEqual({ emoji: "🏡", text: "Back home" });
+        });
+
+        it("should not update the user status when a UserProfileUpdate event is received for another user", async () => {
+            jest.spyOn(SettingsStore, "getValue").mockReturnValue(true);
+            client.getExtendedProfileProperty.mockResolvedValue({ emoji: "🏝️", text: "On a tropical holiday" });
+            await ownProfileStore.start();
+
+            client.getExtendedProfileProperty.mockResolvedValue({ emoji: "🐭", text: "Is a mouse" });
+            client.emit(ClientEvent.UserProfileUpdate, "@other:example.com", null);
+            await new Promise(process.nextTick);
+
+            expect(ownProfileStore.userStatus).toEqual({ emoji: "🏝️", text: "On a tropical holiday" });
+        });
+    });
 });
diff --git a/apps/web/test/unit-tests/stores/ReleaseAnnouncementStore-test.tsx b/apps/web/test/unit-tests/stores/ReleaseAnnouncementStore-test.ts
similarity index 97%
rename from apps/web/test/unit-tests/stores/ReleaseAnnouncementStore-test.tsx
rename to apps/web/test/unit-tests/stores/ReleaseAnnouncementStore-test.ts
index dca3429f1f..8a17c1913c 100644
--- a/apps/web/test/unit-tests/stores/ReleaseAnnouncementStore-test.tsx
+++ b/apps/web/test/unit-tests/stores/ReleaseAnnouncementStore-test.ts
@@ -108,13 +108,13 @@ describe("ReleaseAnnouncementStore", () => {
 
     it("should listen to release announcement data changes in the store", async () => {
         const secondStore = new ReleaseAnnouncementStore();
-        expect(secondStore.getReleaseAnnouncement()).toBe("_test_dummy1");
+        expect(secondStore.getReleaseAnnouncement()).toBe("room_list_section");
 
         const promise = listenReleaseAnnouncementChanged();
         await secondStore.nextReleaseAnnouncement();
 
-        expect(await promise).toBe("_test_dummy2");
-        expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBe("_test_dummy2");
+        expect(await promise).toBe("_test_dummy1");
+        expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBe("_test_dummy1");
     });
 
     it("should return null when there are toasts on screen", async () => {
diff --git a/apps/web/test/unit-tests/stores/RoomViewStore-test.ts b/apps/web/test/unit-tests/stores/RoomViewStore-test.ts
index af3ff5bf56..3b1cca51cc 100644
--- a/apps/web/test/unit-tests/stores/RoomViewStore-test.ts
+++ b/apps/web/test/unit-tests/stores/RoomViewStore-test.ts
@@ -6,14 +6,14 @@ 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 { mocked } from "jest-mock";
+import { mocked } from "jest-mock-vitest-adapter";
 import { KnownMembership, MatrixError, Room } from "matrix-js-sdk/src/matrix";
 import { sleep } from "matrix-js-sdk/src/utils";
 import {
     RoomViewLifecycle,
     type ViewRoomOpts,
 } from "@matrix-org/react-sdk-module-api/lib/lifecycles/RoomViewLifecycle";
-import EventEmitter from "events";
+import EventEmitter from "node:events";
 
 import { RoomViewStore } from "../../../src/stores/RoomViewStore";
 import { Action } from "../../../src/dispatcher/actions";
@@ -34,8 +34,8 @@ import { TimelineRenderingType } from "../../../src/contexts/RoomContext";
 import { MatrixDispatcher } from "../../../src/dispatcher/dispatcher";
 import { UPDATE_EVENT } from "../../../src/stores/AsyncStore";
 import { type ActiveRoomChangedPayload } from "../../../src/dispatcher/payloads/ActiveRoomChangedPayload";
-import { SpaceStoreClass } from "../../../src/stores/spaces/SpaceStore";
-import { TestSdkContext } from "../TestSdkContext";
+import SpaceStore from "../../../src/stores/spaces/SpaceStore";
+import { TestSDKContext } from "../TestSDKContext";
 import { type ViewRoomPayload } from "../../../src/dispatcher/payloads/ViewRoomPayload";
 import Modal from "../../../src/Modal";
 import ErrorDialog from "../../../src/components/views/dialogs/ErrorDialog";
@@ -48,8 +48,10 @@ import { CallStore } from "../../../src/stores/CallStore";
 import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
 import MediaDeviceHandler, { MediaDeviceKindEnum } from "../../../src/MediaDeviceHandler";
 import { storeRoomAliasInCache } from "../../../src/RoomAliasCache.ts";
-import { type Call } from "../../../src/models/Call.ts";
+import { type Call, ConnectionState } from "../../../src/models/Call.ts";
+import ActiveWidgetStore from "../../../src/stores/ActiveWidgetStore";
 import { ModuleApi } from "../../../src/modules/Api";
+import { type JoinRoomPayload } from "../../../src/dispatcher/payloads/JoinRoomPayload.ts";
 
 jest.mock("../../../src/Modal");
 
@@ -59,7 +61,7 @@ const MockPosthogAnalytics = <jest.Mock<PosthogAnalytics>>(<unknown>PosthogAnaly
 jest.mock("../../../src/SlidingSyncManager");
 const MockSlidingSyncManager = <jest.Mock<SlidingSyncManager>>(<unknown>SlidingSyncManager);
 jest.mock("../../../src/stores/spaces/SpaceStore");
-const MockSpaceStore = <jest.Mock<SpaceStoreClass>>(<unknown>SpaceStoreClass);
+const MockSpaceStore = <jest.Mock<SpaceStore>>(<unknown>SpaceStore);
 
 // mock VoiceRecording because it contains all the audio APIs
 jest.mock("../../../src/audio/VoiceRecording", () => ({
@@ -96,9 +98,7 @@ jest.mock("../../../src/utils/DMRoomMap", () => {
 });
 
 jest.mock("../../../src/stores/WidgetStore", () => {
-    // This mock needs to use a real EventEmitter; require is the only way to import that in a hoisted block
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    const EventEmitter = require("events");
+    const EventEmitter = jest.requireActual("events");
     const apps: IApp[] = [];
     const instance = new (class extends EventEmitter {
         getApps() {
@@ -175,13 +175,13 @@ describe("RoomViewStore", function () {
     let roomViewStore: RoomViewStore;
     let slidingSyncManager: SlidingSyncManager;
     let dis: MatrixDispatcher;
-    let stores: TestSdkContext;
+    let stores: TestSDKContext;
 
     beforeEach(function () {
         jest.clearAllMocks();
         mockClient.credentials = { userId: userId };
         mockClient.joinRoom.mockResolvedValue(room);
-        mockClient.getRoom.mockImplementation((roomId: string): Room | null => {
+        mockClient.getRoom.mockImplementation((roomId?: string): Room | null => {
             if (roomId === room.roomId) return room;
             if (roomId === room2.roomId) return room2;
             return null;
@@ -192,8 +192,8 @@ describe("RoomViewStore", function () {
         // Make the RVS to test
         dis = new MatrixDispatcher();
         slidingSyncManager = new MockSlidingSyncManager();
-        stores = new TestSdkContext();
-        stores.client = mockClient;
+        stores = new TestSDKContext();
+        stores._client = mockClient;
         stores._SlidingSyncManager = slidingSyncManager;
         stores._PosthogAnalytics = new MockPosthogAnalytics();
         // @ts-expect-error
@@ -430,8 +430,61 @@ describe("RoomViewStore", function () {
         expect(call.presented).toEqual(true);
     });
 
+    it("opens a voice-intent call directly in picture-in-picture rather than maximised", async () => {
+        const call = {
+            presented: false,
+            connectionState: ConnectionState.Disconnected,
+            widget: { id: "!widget:example.org" },
+            start: jest.fn(),
+        } as unknown as Call;
+        jest.spyOn(CallStore.instance, "getCall").mockReturnValue(call);
+        const persistenceSpy = jest.spyOn(ActiveWidgetStore.instance, "setWidgetPersistence");
+        await setupAsyncStoreWithClient(CallStore.instance, MatrixClientPeg.safeGet());
+
+        dis.dispatch<ViewRoomPayload>({
+            action: Action.ViewRoom,
+            room_id: roomId,
+            view_call: true,
+            voiceOnly: true,
+            metricsTrigger: undefined,
+        });
+        await untilDispatch(Action.ViewRoom, dis);
+
+        // The call is started and marked persistent so it renders in the PiP container...
+        expect(call.presented).toEqual(true);
+        expect(persistenceSpy).toHaveBeenCalledWith("!widget:example.org", roomId, true);
+        expect(call.start).toHaveBeenCalledWith(expect.objectContaining({ voiceOnly: true }));
+        // ...but the room is not switched to the maximised call view.
+        expect(roomViewStore.isViewingCall()).toEqual(false);
+    });
+
+    it("opens a video-intent call maximised in the room", async () => {
+        const call = {
+            presented: false,
+            connectionState: ConnectionState.Disconnected,
+            widget: { id: "!widget:example.org" },
+            start: jest.fn(),
+        } as unknown as Call;
+        jest.spyOn(CallStore.instance, "getCall").mockReturnValue(call);
+        const persistenceSpy = jest.spyOn(ActiveWidgetStore.instance, "setWidgetPersistence");
+        await setupAsyncStoreWithClient(CallStore.instance, MatrixClientPeg.safeGet());
+
+        dis.dispatch<ViewRoomPayload>({
+            action: Action.ViewRoom,
+            room_id: roomId,
+            view_call: true,
+            voiceOnly: false,
+            metricsTrigger: undefined,
+        });
+        await untilDispatch(Action.ViewRoom, dis);
+
+        expect(call.presented).toEqual(true);
+        expect(persistenceSpy).not.toHaveBeenCalled();
+        expect(call.start).toHaveBeenCalledWith(expect.objectContaining({ voiceOnly: false }));
+        expect(roomViewStore.isViewingCall()).toEqual(true);
+    });
+
     it("should display an error message when the room is unreachable via the roomId", async () => {
-        // When
         // View and wait for the room
         dis.dispatch({ action: Action.ViewRoom, room_id: roomId });
         await untilDispatch(Action.ActiveRoomChanged, dis);
@@ -442,7 +495,6 @@ describe("RoomViewStore", function () {
         // Check the modal props
         expect(mocked(Modal).createDialog.mock.calls[0][1]).toMatchSnapshot();
     });
-
     // The server bob is on will affect the message we send.
     it.each(["server", "another-server"])(
         "should display an invite-specific error message when the room is unreachable",
@@ -468,6 +520,12 @@ describe("RoomViewStore", function () {
         },
     );
 
+    it("should display an error message when the provided room is invalid", async () => {
+        dis.dispatch({ action: Action.JoinRoom, room_id: "" });
+        const result = await untilDispatch(Action.JoinRoomError, dis);
+        expect(result.err.cause.message).toEqual("Cannot join room: no room ID or alias to join");
+    });
+
     it("should display the generic error message when the roomId doesnt match", async () => {
         // When
         // Generate error to display the expected error message
@@ -535,22 +593,34 @@ describe("RoomViewStore", function () {
             jest.spyOn(dis, "dispatch");
             jest.spyOn(mockClient, "joinRoom").mockRejectedValueOnce(err);
 
-            dis.dispatch({ action: Action.JoinRoom, canAskToJoin: true });
+            const roomId = "!hello:world";
+
+            dis.dispatch<JoinRoomPayload>({
+                action: Action.JoinRoom,
+                canAskToJoin: true,
+                roomId,
+                metricsTrigger: "RoomPreview",
+            });
             await untilDispatch(Action.PromptAskToJoin, dis);
 
-            expect(mocked(dis.dispatch).mock.calls[0][0]).toEqual({ action: "join_room", canAskToJoin: true });
+            expect(mocked(dis.dispatch).mock.calls[0][0]).toEqual({
+                action: Action.JoinRoom,
+                canAskToJoin: true,
+                metricsTrigger: "RoomPreview",
+                roomId,
+            });
             expect(mocked(dis.dispatch).mock.calls[1][0]).toEqual({
-                action: "join_room_error",
-                roomId: null,
+                action: Action.JoinRoomError,
+                roomId,
                 err,
                 canAskToJoin: true,
             });
-            expect(mocked(dis.dispatch).mock.calls[2][0]).toEqual({ action: "prompt_ask_to_join" });
+            expect(mocked(dis.dispatch).mock.calls[2][0]).toEqual({ action: Action.PromptAskToJoin });
         });
 
         it("sets 'acceptSharedHistory'", async () => {
-            dis.dispatch({ action: Action.ViewRoom, room_id: roomId });
-            dis.dispatch({ action: Action.JoinRoom });
+            dis.dispatch<ViewRoomPayload>({ action: Action.ViewRoom, room_id: roomId, metricsTrigger: "RoomList" });
+            dis.dispatch<JoinRoomPayload>({ action: Action.JoinRoom, roomId: roomId, metricsTrigger: "RoomPreview" });
             await untilDispatch(Action.JoinRoomReady, dis);
             expect(mockClient.joinRoom).toHaveBeenCalledWith(roomId, { acceptSharedHistory: true, viaServers: [] });
         });
diff --git a/apps/web/test/unit-tests/stores/TypingStore-test.ts b/apps/web/test/unit-tests/stores/TypingStore-test.ts
index 3cf5e17ad1..44d127215b 100644
--- a/apps/web/test/unit-tests/stores/TypingStore-test.ts
+++ b/apps/web/test/unit-tests/stores/TypingStore-test.ts
@@ -11,7 +11,7 @@ import { type MatrixClient } from "matrix-js-sdk/src/matrix";
 import TypingStore from "../../../src/stores/TypingStore";
 import { LOCAL_ROOM_ID_PREFIX } from "../../../src/models/LocalRoom";
 import SettingsStore from "../../../src/settings/SettingsStore";
-import { TestSdkContext } from "../TestSdkContext";
+import { TestSDKContext } from "../TestSDKContext";
 
 jest.mock("../../../src/settings/SettingsStore", () => ({
     getValue: jest.fn(),
@@ -29,8 +29,8 @@ describe("TypingStore", () => {
         mockClient = {
             sendTyping: jest.fn(),
         } as unknown as MatrixClient;
-        const context = new TestSdkContext();
-        context.client = mockClient;
+        const context = new TestSDKContext();
+        context._client = mockClient;
         typingStore = new TypingStore(context);
         jest.spyOn(SettingsStore, "getValue").mockImplementation((name: string) => {
             return name === "sendTypingNotifications";
diff --git a/apps/web/test/unit-tests/stores/UIStore-test.ts b/apps/web/test/unit-tests/stores/UIStore-test.ts
new file mode 100644
index 0000000000..0daee1b383
--- /dev/null
+++ b/apps/web/test/unit-tests/stores/UIStore-test.ts
@@ -0,0 +1,73 @@
+/*
+ * Copyright 2026 Element Creations 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 UIStore, { UI_EVENTS } from "../../../src/stores/UIStore";
+
+jest.useFakeTimers();
+
+describe("UIStore", () => {
+    class MockResizeObserver {
+        public static instance: ResizeObserver;
+        public static callback: ResizeObserverCallback;
+
+        public constructor(callback: ResizeObserverCallback) {
+            MockResizeObserver.callback = callback;
+            MockResizeObserver.instance = this;
+        }
+
+        public static changeWidth = (width: number): void => {
+            const entry = {
+                target: document.body,
+                contentRect: {
+                    width,
+                    height: 1000,
+                },
+            } as unknown as ResizeObserverEntry;
+            MockResizeObserver.callback([entry], MockResizeObserver.instance);
+        };
+
+        public observe = jest.fn();
+        public unobserve = jest.fn();
+        public disconnect = jest.fn();
+    }
+    globalThis.ResizeObserver = MockResizeObserver;
+
+    it("should emit events on width increase/decrease", () => {
+        // eslint-disable-next-line no-restricted-properties
+        window.innerWidth = 500;
+        const store = UIStore.instance;
+
+        const onDecrease = jest.fn();
+        store.on(UI_EVENTS.WidthDecreased, onDecrease);
+        MockResizeObserver.changeWidth(200);
+        expect(onDecrease).toHaveBeenCalledWith(200);
+
+        const onIncrease = jest.fn();
+        store.on(UI_EVENTS.WidthIncreased, onIncrease);
+        MockResizeObserver.changeWidth(700);
+        expect(onIncrease).toHaveBeenCalledWith(700);
+
+        UIStore.destroy();
+    });
+
+    it("should set isWindowBeingResized on resize", () => {
+        // eslint-disable-next-line no-restricted-properties
+        window.innerWidth = 500;
+        const store = UIStore.instance;
+
+        // No resize yet, so expect isWindowBeingResized to be false
+        expect(store.isWindowBeingResized).toBe(false);
+
+        // When resizing the window, expect isWindowBeingResized to be true
+        MockResizeObserver.changeWidth(200);
+        expect(store.isWindowBeingResized).toBe(true);
+
+        // After a second, isWindowBeingResized should again become false
+        jest.runAllTimers();
+        expect(store.isWindowBeingResized).toBe(false);
+    });
+});
diff --git a/apps/web/test/unit-tests/stores/message-preview/MessagePreviewStore-test.ts b/apps/web/test/unit-tests/stores/message-preview/MessagePreviewStore-test.ts
index 89d87d362b..6b7c2866b6 100644
--- a/apps/web/test/unit-tests/stores/message-preview/MessagePreviewStore-test.ts
+++ b/apps/web/test/unit-tests/stores/message-preview/MessagePreviewStore-test.ts
@@ -11,6 +11,9 @@ import {
     EventStatus,
     EventTimeline,
     EventType,
+    M_POLL_KIND_DISCLOSED,
+    M_POLL_START,
+    M_TEXT,
     type MatrixClient,
     type MatrixEvent,
     PendingEventOrdering,
@@ -373,4 +376,82 @@ describe("MessagePreviewStore", () => {
         // @ts-ignore private access
         expect(store.previews.has(nonRenderedRoom.roomId)).toBeFalsy();
     });
+
+    describe("generatePreviewForEvent", () => {
+        it("should generate a preview for a message event", () => {
+            const message = mkMessage({
+                user: "@sender:server",
+                event: true,
+                room: room.roomId,
+                msg: "Hello world",
+            });
+
+            expect(store.generatePreviewForEvent(message)).toBe("Hello world");
+        });
+
+        it("should generate a preview for a sticker event", () => {
+            const sticker = mkEvent({
+                event: true,
+                type: EventType.Sticker,
+                user: "@sender:server",
+                room: room.roomId,
+                content: { body: "A sticker" },
+            });
+
+            expect(store.generatePreviewForEvent(sticker)).toBe("A sticker");
+        });
+
+        // Poll start events have both a stable and an unstable event type, each with its own
+        // registry entry, so exercise both.
+        it.each([M_POLL_START.name, M_POLL_START.altName])(
+            "should generate a preview for a poll start event (%s)",
+            (type) => {
+                const poll = mkEvent({
+                    event: true,
+                    type: type!,
+                    user: "@sender:server",
+                    room: room.roomId,
+                    content: {
+                        [M_POLL_START.name]: {
+                            question: { [M_TEXT.name]: "Where shall we eat?" },
+                            kind: M_POLL_KIND_DISCLOSED.name,
+                            answers: [
+                                { id: "pizza", [M_TEXT.name]: "Pizza" },
+                                { id: "sushi", [M_TEXT.name]: "Sushi" },
+                            ],
+                        },
+                    },
+                });
+
+                expect(store.generatePreviewForEvent(poll)).toBe("Where shall we eat?");
+            },
+        );
+
+        it.each([EventType.CallInvite, EventType.CallAnswer, EventType.CallHangup])(
+            "should generate a preview for a %s event",
+            (type) => {
+                const callEvent = mkEvent({
+                    event: true,
+                    type,
+                    user: "@sender:server",
+                    room: room.roomId,
+                    content: { call_id: "1" },
+                });
+
+                expect(store.generatePreviewForEvent(callEvent)).toBeTruthy();
+            },
+        );
+
+        it("should return an empty string for an event type without a previewer", () => {
+            const topicEvent = mkEvent({
+                event: true,
+                type: EventType.RoomTopic,
+                user: "@sender:server",
+                room: room.roomId,
+                content: { topic: "A new topic" },
+            });
+
+            expect(store.generatePreviewForEvent(topicEvent)).toBe("");
+        });
+    });
 });
diff --git a/apps/web/test/unit-tests/stores/message-preview/previews/ReactionEventPreview-test.ts b/apps/web/test/unit-tests/stores/message-preview/previews/ReactionEventPreview-test.ts
index 977ee61ebe..56e8ddb7f9 100644
--- a/apps/web/test/unit-tests/stores/message-preview/previews/ReactionEventPreview-test.ts
+++ b/apps/web/test/unit-tests/stores/message-preview/previews/ReactionEventPreview-test.ts
@@ -10,12 +10,12 @@ import { RelationType, Room, RoomMember } from "matrix-js-sdk/src/matrix";
 import { mocked } from "jest-mock";
 
 import { mkEvent, stubClient } from "../../../../test-utils";
-// Import directly from the file to avoid circular dependencies with MessagePreviewStore
 import { ReactionEventPreview } from "../../../../../src/stores/message-preview/previews/ReactionEventPreview";
+import { MessagePreviewStore } from "../../../../../src/stores/message-preview";
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
 
 describe("ReactionEventPreview", () => {
-    const preview = new ReactionEventPreview();
+    const preview = new ReactionEventPreview(MessagePreviewStore.instance);
     const userId = "@user:example.com";
     const roomId = "!room:example.com";
 
diff --git a/apps/web/test/unit-tests/stores/oidc/OidcClientStore-test.ts b/apps/web/test/unit-tests/stores/oidc/OidcClientStore-test.ts
deleted file mode 100644
index 35e5415ca3..0000000000
--- a/apps/web/test/unit-tests/stores/oidc/OidcClientStore-test.ts
+++ /dev/null
@@ -1,260 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2023 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import fetchMock from "@fetch-mock/jest";
-import { mocked } from "jest-mock";
-import { OidcClient } from "oidc-client-ts";
-import { logger } from "matrix-js-sdk/src/logger";
-import { discoverAndValidateOIDCIssuerWellKnown } from "matrix-js-sdk/src/matrix";
-import { OidcError } from "matrix-js-sdk/src/oidc/error";
-
-import { OidcClientStore } from "../../../../src/stores/oidc/OidcClientStore";
-import { flushPromises, getMockClientWithEventEmitter, mockPlatformPeg } from "../../../test-utils";
-import { makeDelegatedAuthConfig } from "../../../test-utils/oidc";
-
-jest.mock("matrix-js-sdk/src/matrix", () => ({
-    ...jest.requireActual("matrix-js-sdk/src/matrix"),
-    discoverAndValidateOIDCIssuerWellKnown: jest.fn(),
-}));
-
-describe("OidcClientStore", () => {
-    const clientId = "test-client-id";
-    const authConfig = makeDelegatedAuthConfig();
-    const account = authConfig.issuer + "account";
-    const accountManagementActionsSupported = ["action1", "action2"];
-
-    const mockClient = getMockClientWithEventEmitter({
-        getAuthMetadata: jest.fn(),
-    });
-
-    beforeEach(() => {
-        localStorage.clear();
-        localStorage.setItem("mx_oidc_client_id", clientId);
-        localStorage.setItem("mx_oidc_token_issuer", authConfig.issuer);
-
-        mocked(discoverAndValidateOIDCIssuerWellKnown)
-            .mockClear()
-            .mockResolvedValue({
-                ...authConfig,
-                account_management_uri: account,
-                account_management_actions_supported: accountManagementActionsSupported,
-                authorization_endpoint: "authorization-endpoint",
-                token_endpoint: "token-endpoint",
-            });
-        jest.spyOn(logger, "error").mockClear();
-
-        fetchMock.get(`${authConfig.issuer}.well-known/openid-configuration`, authConfig);
-        fetchMock.get(`${authConfig.issuer}jwks`, { keys: [] });
-        mockPlatformPeg();
-    });
-
-    describe("isUserAuthenticatedWithOidc()", () => {
-        it("should return true when an issuer is in session storage", () => {
-            const store = new OidcClientStore(mockClient);
-
-            expect(store.isUserAuthenticatedWithOidc).toEqual(true);
-        });
-
-        it("should return false when no issuer is in session storage", () => {
-            localStorage.clear();
-            const store = new OidcClientStore(mockClient);
-
-            expect(store.isUserAuthenticatedWithOidc).toEqual(false);
-        });
-    });
-
-    describe("initialising oidcClient", () => {
-        it("should initialise oidc client from constructor", () => {
-            const store = new OidcClientStore(mockClient);
-
-            // started initialising
-            // @ts-ignore private property
-            expect(store.initialisingOidcClientPromise).toBeTruthy();
-        });
-
-        it("should fallback to stored issuer when no client well known is available", async () => {
-            const store = new OidcClientStore(mockClient);
-
-            // successfully created oidc client
-            // @ts-ignore private property
-            expect(await store.getOidcClient()).toBeTruthy();
-        });
-
-        it("should log and return when no clientId is found in storage", async () => {
-            localStorage.removeItem("mx_oidc_client_id");
-            const store = new OidcClientStore(mockClient);
-
-            // no oidc client
-            // @ts-ignore private property
-            expect(await store.getOidcClient()).toEqual(undefined);
-            expect(logger.error).toHaveBeenCalledWith(
-                "Failed to initialise OidcClientStore",
-                new Error("Oidc client id not found in storage"),
-            );
-        });
-
-        it("should log and return when discovery and validation fails", async () => {
-            mocked(discoverAndValidateOIDCIssuerWellKnown).mockRejectedValue(new Error(OidcError.OpSupport));
-            const store = new OidcClientStore(mockClient);
-
-            await store.readyPromise;
-
-            expect(logger.error).toHaveBeenCalledWith(
-                "Failed to initialise OidcClientStore",
-                new Error(OidcError.OpSupport),
-            );
-            // no oidc client
-            // @ts-ignore private property
-            expect(await store.getOidcClient()).toEqual(undefined);
-        });
-
-        it("should create oidc client correctly", async () => {
-            const store = new OidcClientStore(mockClient);
-
-            // @ts-ignore private property
-            const client = await store.getOidcClient();
-
-            expect(client?.settings.client_id).toEqual(clientId);
-            expect(client?.settings.authority).toEqual(authConfig.issuer);
-        });
-
-        it("should set account management endpoint when configured", async () => {
-            const store = new OidcClientStore(mockClient);
-
-            // @ts-ignore private property
-            await store.getOidcClient();
-
-            expect(store.accountManagementEndpoint).toEqual(account);
-        });
-
-        it("should set account management actions supported when configured", async () => {
-            const store = new OidcClientStore(mockClient);
-
-            // @ts-ignore private property
-            await store.getOidcClient();
-
-            expect(store.accountManagementActionsSupported).toEqual(accountManagementActionsSupported);
-        });
-
-        it("should set account management endpoint to issuer when not configured", async () => {
-            mocked(discoverAndValidateOIDCIssuerWellKnown)
-                .mockClear()
-                .mockResolvedValue({
-                    ...authConfig,
-                    account_management_uri: undefined,
-                    authorization_endpoint: "authorization-endpoint",
-                    token_endpoint: "token-endpoint",
-                });
-            const store = new OidcClientStore(mockClient);
-
-            await store.readyPromise;
-
-            expect(store.accountManagementEndpoint).toEqual(authConfig.issuer);
-        });
-
-        it("should reuse initialised oidc client", async () => {
-            const store = new OidcClientStore(mockClient);
-
-            // @ts-ignore private property
-            store.getOidcClient();
-            // @ts-ignore private property
-            store.getOidcClient();
-
-            await flushPromises();
-
-            // finished initialising
-            // @ts-ignore private property
-            expect(await store.getOidcClient()).toBeTruthy();
-
-            // @ts-ignore private property
-            store.getOidcClient();
-
-            // only called once for multiple calls to getOidcClient
-            // before and after initialisation is complete
-            expect(discoverAndValidateOIDCIssuerWellKnown).toHaveBeenCalledTimes(1);
-        });
-    });
-
-    describe("revokeTokens()", () => {
-        const accessToken = "test-access-token";
-        const refreshToken = "test-refresh-token";
-
-        beforeEach(() => {
-            // spy and call through
-            jest.spyOn(OidcClient.prototype, "revokeToken").mockClear();
-
-            fetchMock.clearHistory();
-            fetchMock.removeRoute("revocation-endpoint");
-            fetchMock.post(
-                authConfig.revocation_endpoint,
-                {
-                    status: 200,
-                },
-                { name: "revocation-endpoint" },
-            );
-        });
-
-        it("should throw when oidcClient could not be initialised", async () => {
-            // make oidcClient initialisation fail
-            localStorage.removeItem("mx_oidc_token_issuer");
-
-            const store = new OidcClientStore(mockClient);
-
-            await expect(() => store.revokeTokens(accessToken, refreshToken)).rejects.toThrow("No OIDC client");
-        });
-
-        it("should revoke access and refresh tokens", async () => {
-            const store = new OidcClientStore(mockClient);
-
-            await store.revokeTokens(accessToken, refreshToken);
-
-            expect(fetchMock).toHaveFetchedTimes(2, authConfig.revocation_endpoint);
-            expect(OidcClient.prototype.revokeToken).toHaveBeenCalledWith(accessToken, "access_token");
-            expect(OidcClient.prototype.revokeToken).toHaveBeenCalledWith(refreshToken, "refresh_token");
-        });
-
-        it("should still attempt to revoke refresh token when access token revocation fails", async () => {
-            // fail once, then succeed
-            fetchMock.removeRoute("revocation-endpoint");
-            fetchMock
-                .postOnce(authConfig.revocation_endpoint, {
-                    status: 404,
-                })
-                .post(authConfig.revocation_endpoint, {
-                    status: 200,
-                });
-
-            const store = new OidcClientStore(mockClient);
-
-            await expect(() => store.revokeTokens(accessToken, refreshToken)).rejects.toThrow(
-                "Failed to revoke tokens",
-            );
-
-            expect(fetchMock).toHaveFetchedTimes(2, authConfig.revocation_endpoint);
-            expect(OidcClient.prototype.revokeToken).toHaveBeenCalledWith(accessToken, "access_token");
-        });
-    });
-
-    describe("OIDC Aware", () => {
-        beforeEach(() => {
-            localStorage.clear();
-        });
-
-        it("should resolve account management endpoint", async () => {
-            mockClient.getAuthMetadata.mockResolvedValue({
-                ...authConfig,
-                account_management_uri: account,
-                account_management_actions_supported: accountManagementActionsSupported,
-            });
-            const store = new OidcClientStore(mockClient);
-            await store.readyPromise;
-            expect(store.accountManagementEndpoint).toBe(account);
-            expect(store.accountManagementActionsSupported).toEqual(accountManagementActionsSupported);
-        });
-    });
-});
diff --git a/apps/web/test/unit-tests/stores/room-list-v3/RoomListStoreV3-test.ts b/apps/web/test/unit-tests/stores/room-list-v3/RoomListStoreV3-test.ts
index fa3def1e46..bf6a36d84b 100644
--- a/apps/web/test/unit-tests/stores/room-list-v3/RoomListStoreV3-test.ts
+++ b/apps/web/test/unit-tests/stores/room-list-v3/RoomListStoreV3-test.ts
@@ -12,8 +12,8 @@ import { mocked } from "jest-mock";
 import type { MatrixClient } from "matrix-js-sdk/src/matrix";
 import type { RoomNotificationState } from "../../../../src/stores/notifications/RoomNotificationState";
 import {
-    CHATS_TAG,
     LISTS_UPDATE_EVENT,
+    ROOM_TAGGED_EVENT,
     SECTION_CREATED_EVENT,
     RoomListStoreV3Class,
     type Section,
@@ -25,7 +25,6 @@ import { mkEvent, mkMessage, mkSpace, mkStubRoom, stubClient, upsertRoomStateEve
 import { getMockedRooms } from "./skip-list/getMockedRooms";
 import { AlphabeticSorter } from "../../../../src/stores/room-list-v3/skip-list/sorters/AlphabeticSorter";
 import dispatcher from "../../../../src/dispatcher/dispatcher";
-import SpaceStore from "../../../../src/stores/spaces/SpaceStore";
 import { MetaSpace, UPDATE_SELECTED_SPACE } from "../../../../src/stores/spaces";
 import { DefaultTagID } from "../../../../src/stores/room-list-v3/skip-list/tag";
 import { FilterEnum } from "../../../../src/stores/room-list-v3/skip-list/filters";
@@ -37,6 +36,8 @@ import * as utils from "../../../../src/utils/notifications";
 import * as utilsRLS from "../../../../src/stores/room-list-v3/utils.ts";
 import { Action } from "../../../../src/dispatcher/actions";
 import { SettingLevel } from "../../../../src/settings/SettingLevel.ts";
+import { CHATS_TAG } from "../../../../src/stores/room-list-v3/section";
+import { SDKContextClass } from "../../../../src/contexts/SDKContextClass.ts";
 
 describe("RoomListStoreV3", () => {
     async function getRoomListStore() {
@@ -54,9 +55,13 @@ describe("RoomListStoreV3", () => {
             cb(0);
             return 0;
         });
-        jest.spyOn(SpaceStore.instance, "isRoomInSpace").mockImplementation((space) => space === MetaSpace.Home);
-        jest.spyOn(SpaceStore.instance, "activeSpace", "get").mockImplementation(() => MetaSpace.Home);
-        jest.spyOn(SpaceStore.instance, "storeReadyPromise", "get").mockImplementation(() => Promise.resolve());
+        jest.spyOn(SDKContextClass.instance.spaceStore, "isRoomInSpace").mockImplementation(
+            (space) => space === MetaSpace.Home,
+        );
+        jest.spyOn(SDKContextClass.instance.spaceStore, "activeSpace", "get").mockImplementation(() => MetaSpace.Home);
+        jest.spyOn(SDKContextClass.instance.spaceStore, "storeReadyPromise", "get").mockImplementation(() =>
+            Promise.resolve(),
+        );
         jest.spyOn(RoomNotificationStateStore.instance, "getRoomState").mockImplementation((room) => {
             const state = {
                 isUnread: false,
@@ -116,7 +121,7 @@ describe("RoomListStoreV3", () => {
 
             // Let's pretend like a new timeline event came on the room in 37th index.
             const room = rooms[37];
-            const event = mkMessage({ room: room.roomId, user: `@foo${3}:matrix.org`, ts: 1000, event: true });
+            const event = mkMessage({ room: room.roomId, user: "@foo3:matrix.org", ts: 1000, event: true });
             jest.spyOn(room.getLiveTimeline(), "getEvents").mockReturnValue([event]);
 
             const payload = {
@@ -342,6 +347,19 @@ describe("RoomListStoreV3", () => {
             expect(fn).toHaveBeenCalled();
         });
 
+        it("emits ROOM_TAGGED_EVENT on a local user tag action", async () => {
+            const { store, dispatcher } = await getRoomListStore();
+            const fn = jest.fn();
+            store.on(ROOM_TAGGED_EVENT, fn);
+            dispatcher.dispatch(
+                {
+                    action: "RoomListActions.tagRoom.success",
+                },
+                true,
+            );
+            expect(fn).toHaveBeenCalled();
+        });
+
         it("Room is re-inserted on decryption", async () => {
             const { store, rooms, client, dispatcher } = await getRoomListStore();
             jest.spyOn(client, "getRoom").mockImplementation(() => rooms[10]);
@@ -448,12 +466,14 @@ describe("RoomListStoreV3", () => {
         }
 
         function setupMocks(spaceRoom: Room, roomIds: string[]) {
-            jest.spyOn(SpaceStore.instance, "isRoomInSpace").mockImplementation((space, id) => {
+            jest.spyOn(SDKContextClass.instance.spaceStore, "isRoomInSpace").mockImplementation((space, id) => {
                 if (space === MetaSpace.Home && !roomIds.includes(id)) return true;
                 if (space === spaceRoom.roomId && roomIds.includes(id)) return true;
                 return false;
             });
-            jest.spyOn(SpaceStore.instance, "activeSpace", "get").mockImplementation(() => spaceRoom.roomId);
+            jest.spyOn(SDKContextClass.instance.spaceStore, "activeSpace", "get").mockImplementation(
+                () => spaceRoom.roomId,
+            );
         }
 
         function getClientAndRooms() {
@@ -497,7 +517,7 @@ describe("RoomListStoreV3", () => {
                 const { spaceRoom, roomIds } = createSpace(rooms, [6, 8, 13, 27, 75], client);
 
                 // Mock the space store
-                jest.spyOn(SpaceStore.instance, "isRoomInSpace").mockImplementation((space, id) => {
+                jest.spyOn(SDKContextClass.instance.spaceStore, "isRoomInSpace").mockImplementation((space, id) => {
                     if (space === MetaSpace.Home && !roomIds.includes(id)) return true;
                     if (space === spaceRoom.roomId && roomIds.includes(id)) return true;
                     return false;
@@ -518,8 +538,10 @@ describe("RoomListStoreV3", () => {
                 }
 
                 // Lets switch to the space
-                jest.spyOn(SpaceStore.instance, "activeSpace", "get").mockImplementation(() => spaceRoom.roomId);
-                SpaceStore.instance.emit(UPDATE_SELECTED_SPACE);
+                jest.spyOn(SDKContextClass.instance.spaceStore, "activeSpace", "get").mockImplementation(
+                    () => spaceRoom.roomId,
+                );
+                SDKContextClass.instance.spaceStore.emit(UPDATE_SELECTED_SPACE);
                 expect(fn).toHaveBeenCalled();
                 const result2 = store
                     .getSortedRoomsInActiveSpace()
@@ -826,13 +848,112 @@ describe("RoomListStoreV3", () => {
                 ).toContain(room);
             });
         });
+
+        describe("getServerNoticeRooms", () => {
+            it("returns only rooms tagged as server notice", async () => {
+                const { rooms } = getClientAndRooms();
+
+                // Tag rooms 8 and 27 as server notice rooms
+                [8, 27].forEach((i) => (rooms[i].tags[DefaultTagID.ServerNotice] = {}));
+
+                const store = new RoomListStoreV3Class(dispatcher);
+                await store.start();
+
+                const result = store.getServerNoticeRooms();
+                expect(result).toHaveLength(2);
+                for (const i of [8, 27]) {
+                    expect(result).toContain(rooms[i]);
+                }
+            });
+
+            it("returns an empty array when there are no server notice rooms", async () => {
+                getClientAndRooms();
+                const store = new RoomListStoreV3Class(dispatcher);
+                await store.start();
+                expect(store.getServerNoticeRooms()).toEqual([]);
+            });
+
+            it("only returns rooms that belong to the active space", async () => {
+                const { client, rooms } = getClientAndRooms();
+                // Put rooms 6, 8, 13, 27, 75 into a space
+                const { spaceRoom, roomIds } = createSpace(rooms, [6, 8, 13, 27, 75], client);
+
+                // Room 8 (in the space) and room 50 (in Home only) are both server notices
+                rooms[8].tags[DefaultTagID.ServerNotice] = {};
+                rooms[50].tags[DefaultTagID.ServerNotice] = {};
+
+                // Activate the space
+                setupMocks(spaceRoom, roomIds);
+                const store = new RoomListStoreV3Class(dispatcher);
+                await store.start();
+
+                // Only the server notice room within the active space is returned
+                const result = store.getServerNoticeRooms();
+                expect(result).toEqual([rooms[8]]);
+            });
+        });
+
+        describe("getDmRooms", () => {
+            it("returns only rooms tagged as DM", async () => {
+                const { rooms } = getClientAndRooms();
+
+                // Rooms 8 and 27 are DMs (no explicit tags + present in the DM map)
+                const ids = [8, 27].map((i) => rooms[i].roomId);
+                jest.spyOn(DMRoomMap, "shared").mockImplementation((() => {
+                    return {
+                        getUserIdForRoomId: (id: string) => (ids.includes(id) ? "@myuser:matrix.org" : ""),
+                    };
+                }) as () => DMRoomMap);
+
+                const store = new RoomListStoreV3Class(dispatcher);
+                await store.start();
+
+                const result = store.getDmRooms();
+                expect(result).toHaveLength(2);
+                for (const i of [8, 27]) {
+                    expect(result).toContain(rooms[i]);
+                }
+            });
+
+            it("returns an empty array when there are no DM rooms", async () => {
+                // The top-level beforeEach mocks the DM map to match no rooms.
+                getClientAndRooms();
+                const store = new RoomListStoreV3Class(dispatcher);
+                await store.start();
+                expect(store.getDmRooms()).toEqual([]);
+            });
+
+            it("only returns rooms that belong to the active space", async () => {
+                const { client, rooms } = getClientAndRooms();
+                // Put rooms 6, 8, 13, 27, 75 into a space
+                const { spaceRoom, roomIds } = createSpace(rooms, [6, 8, 13, 27, 75], client);
+
+                // Room 8 (in the space) and room 50 (in Home only) are both DMs
+                const ids = [rooms[8].roomId, rooms[50].roomId];
+                jest.spyOn(DMRoomMap, "shared").mockImplementation((() => {
+                    return {
+                        getUserIdForRoomId: (id: string) => (ids.includes(id) ? "@myuser:matrix.org" : ""),
+                    };
+                }) as () => DMRoomMap);
+
+                // Activate the space
+                setupMocks(spaceRoom, roomIds);
+                const store = new RoomListStoreV3Class(dispatcher);
+                await store.start();
+
+                // Only the DM room within the active space is returned
+                const result = store.getDmRooms();
+                expect(result).toEqual([rooms[8]]);
+            });
+        });
     });
 
     describe("Sections", () => {
         function enableSections(): void {
             jest.spyOn(SettingsStore, "getValue").mockImplementation((setting: string) => {
-                if (setting === "feature_room_list_sections") return true;
+                if (setting === "RoomList.showSections") return true;
                 if (setting === "RoomList.OrderedCustomSections") return [];
+                if (setting === "RoomList.CustomSectionData") return {};
                 return false;
             });
         }
@@ -849,26 +970,7 @@ describe("RoomListStoreV3", () => {
             return { client, rooms };
         }
 
-        it("returns a single chats section when sections feature is disabled", async () => {
-            const { rooms } = getClientAndRooms();
-            // Mark some rooms as favourite so we can verify they are NOT split out
-            [0, 1, 2].forEach((i) => {
-                rooms[i].tags[DefaultTagID.Favourite] = {};
-            });
-
-            const store = new RoomListStoreV3Class(dispatcher);
-            await store.start();
-
-            const result = store.getSortedRoomsInActiveSpace();
-            expect(result.sections).toHaveLength(1);
-            expect(result.sections[0].tag).toBe(CHATS_TAG);
-            // All rooms, including favourites, are in the single section
-            for (const i of [0, 1, 2]) {
-                expect(result.sections[0].rooms).toContain(rooms[i]);
-            }
-        });
-
-        it("returns three sections in the correct order when enabled", async () => {
+        it("returns three sections in the correct order", async () => {
             enableSections();
             getClientAndRooms();
 
@@ -882,6 +984,55 @@ describe("RoomListStoreV3", () => {
             expect(result.sections[2].tag).toBe(DefaultTagID.LowPriority);
         });
 
+        describe("RoomList.showSections disabled", () => {
+            function disableSections(): void {
+                jest.spyOn(SettingsStore, "getValue").mockImplementation((setting: string) => {
+                    if (setting === "RoomList.showSections") return false;
+                    if (setting === "RoomList.OrderedCustomSections") return [];
+                    if (setting === "RoomList.CustomSectionData") return {};
+                    return false;
+                });
+            }
+
+            it("returns a single Chats section containing the rooms", async () => {
+                disableSections();
+                const { rooms } = getClientAndRooms();
+
+                rooms[3].tags[DefaultTagID.Favourite] = {};
+                rooms[7].tags[DefaultTagID.LowPriority] = {};
+
+                const store = new RoomListStoreV3Class(dispatcher);
+                await store.start();
+
+                const { sections } = store.getSortedRoomsInActiveSpace();
+                expect(sections).toHaveLength(1);
+                expect(sections[0].tag).toBe(CHATS_TAG);
+                expect(sections[0].rooms).toContain(rooms[3]);
+                expect(sections[0].rooms).toContain(rooms[7]);
+            });
+        });
+
+        it("emits LISTS_UPDATE_EVENT when RoomList.showSections setting changes", async () => {
+            enableSections();
+            getClientAndRooms();
+
+            let settingsWatcher: () => void = () => {};
+            jest.spyOn(SettingsStore, "watchSetting").mockImplementation((settingName, _roomId, callback) => {
+                if (settingName === "RoomList.showSections") settingsWatcher = callback as () => void;
+                return "watcher-id";
+            });
+
+            const store = new RoomListStoreV3Class(dispatcher);
+            await store.start();
+
+            const listsUpdateListener = jest.fn();
+            store.on(LISTS_UPDATE_EVENT, listsUpdateListener);
+
+            settingsWatcher();
+
+            expect(listsUpdateListener).toHaveBeenCalled();
+        });
+
         it.each([
             { tag: DefaultTagID.Favourite, label: "Favourite" },
             { tag: DefaultTagID.LowPriority, label: "LowPriority" },
@@ -975,6 +1126,45 @@ describe("RoomListStoreV3", () => {
             expect(favSection.rooms).toContain(rooms[7]);
         });
 
+        it("hides empty sections when filters are applied", async () => {
+            enableSections();
+            const { rooms } = getClientAndRooms();
+
+            // Mark room 3 as favourite; it's the only unread room
+            rooms[3].tags[DefaultTagID.Favourite] = {};
+            jest.spyOn(RoomNotificationStateStore.instance, "getRoomState").mockImplementation((room) => {
+                const state = {
+                    hasUnreadCount: room === rooms[3],
+                } as unknown as RoomNotificationState;
+                return state;
+            });
+
+            const store = new RoomListStoreV3Class(dispatcher);
+            await store.start();
+
+            // With the unread filter, only the Favourite section has matching rooms.
+            // The Chats and LowPriority sections should be hidden because they're empty.
+            const { sections } = store.getSortedRoomsInActiveSpace([FilterEnum.UnreadFilter]);
+            expect(sections).toHaveLength(1);
+            expect(sections[0].tag).toBe(DefaultTagID.Favourite);
+            expect(sections[0].rooms).toContain(rooms[3]);
+        });
+
+        it("shows empty sections when no filters are applied", async () => {
+            enableSections();
+            getClientAndRooms();
+
+            // No rooms are tagged, so Favourite and LowPriority sections will be empty
+            const store = new RoomListStoreV3Class(dispatcher);
+            await store.start();
+
+            const { sections } = store.getSortedRoomsInActiveSpace();
+            // All three sections should be present even though Favourite/LowPriority are empty
+            expect(sections).toHaveLength(3);
+            expect(findSection(sections, DefaultTagID.Favourite)!.rooms).toHaveLength(0);
+            expect(findSection(sections, DefaultTagID.LowPriority)!.rooms).toHaveLength(0);
+        });
+
         it("sections respect space filtering", async () => {
             enableSections();
             const { rooms } = getClientAndRooms();
@@ -984,11 +1174,11 @@ describe("RoomListStoreV3", () => {
 
             const spaceRoomId = "!space1:matrix.org";
             const inSpaceIds = [3, 10, 20].map((i) => rooms[i].roomId);
-            jest.spyOn(SpaceStore.instance, "isRoomInSpace").mockImplementation((space, id) => {
+            jest.spyOn(SDKContextClass.instance.spaceStore, "isRoomInSpace").mockImplementation((space, id) => {
                 if (space === spaceRoomId && inSpaceIds.includes(id)) return true;
                 return false;
             });
-            jest.spyOn(SpaceStore.instance, "activeSpace", "get").mockImplementation(() => spaceRoomId);
+            jest.spyOn(SDKContextClass.instance.spaceStore, "activeSpace", "get").mockImplementation(() => spaceRoomId);
 
             const store = new RoomListStoreV3Class(dispatcher);
             await store.start();
@@ -1091,8 +1281,9 @@ describe("RoomListStoreV3", () => {
             const customTag = "element.io.section.custom";
 
             jest.spyOn(SettingsStore, "getValue").mockImplementation((setting: string) => {
-                if (setting === "feature_room_list_sections") return true;
+                if (setting === "RoomList.showSections") return true;
                 if (setting === "RoomList.OrderedCustomSections") return [];
+                if (setting === "RoomList.CustomSectionData") return {};
                 return false;
             });
 
@@ -1105,13 +1296,15 @@ describe("RoomListStoreV3", () => {
             // Mark a room with the custom tag and update the settings
             rooms[0].tags = { [customTag]: { order: 0 } };
             jest.spyOn(SettingsStore, "getValue").mockImplementation((setting: string) => {
-                if (setting === "feature_room_list_sections") return true;
+                if (setting === "RoomList.showSections") return true;
                 if (setting === "RoomList.OrderedCustomSections") return [customTag];
+                if (setting === "RoomList.CustomSectionData")
+                    return { [customTag]: { tag: customTag, name: "Custom" } };
                 return false;
             });
 
             // Trigger the settings watcher
-            settingsWatcher("RoomList.OrderedCustomSections");
+            await Promise.resolve(settingsWatcher("RoomList.OrderedCustomSections"));
 
             // Now there should be 4 sections (Favourite, custom, Chats, LowPriority)
             expect(store.getSortedRoomsInActiveSpace().sections).toHaveLength(4);
@@ -1156,7 +1349,7 @@ describe("RoomListStoreV3", () => {
             // Let's say that rooms 14 and 34 get new messages in that order
             let ts = 1000;
             for (const room of [rooms[14], rooms[34]]) {
-                const event = mkMessage({ room: room.roomId, user: `@foo${3}:matrix.org`, ts: 1000, event: true });
+                const event = mkMessage({ room: room.roomId, user: `@foo3:matrix.org`, ts: 1000, event: true });
                 jest.spyOn(room.getLiveTimeline(), "getEvents").mockReturnValue([event]);
 
                 const payload = {
diff --git a/apps/web/test/unit-tests/stores/room-list-v3/section-test.ts b/apps/web/test/unit-tests/stores/room-list-v3/section-test.ts
index bfb999871e..33acb3ef7d 100644
--- a/apps/web/test/unit-tests/stores/room-list-v3/section-test.ts
+++ b/apps/web/test/unit-tests/stores/room-list-v3/section-test.ts
@@ -5,21 +5,198 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
+import { type Room } from "matrix-js-sdk/src/matrix";
+
 import Modal from "../../../../src/Modal";
 import SettingsStore from "../../../../src/settings/SettingsStore";
-import { createSection, editSection, deleteSection } from "../../../../src/stores/room-list-v3/section";
+import {
+    createSection,
+    editSection,
+    deleteSection,
+    getCustomSectionData,
+    getOrderedCustomSections,
+    isDefaultSectionTag,
+    isSectionExpanded,
+    setSectionExpanded,
+    CHATS_TAG,
+    CUSTOM_SECTION_TAG_PREFIX,
+    isSectionTag,
+    reorderSection,
+} from "../../../../src/stores/room-list-v3/section";
+import { SettingLevel } from "../../../../src/settings/SettingLevel";
 import { CreateSectionDialog } from "../../../../src/components/views/dialogs/CreateSectionDialog";
 import { RemoveSectionDialog } from "../../../../src/components/views/dialogs/RemoveSectionDialog";
+import { DefaultTagID } from "../../../../src/stores/room-list-v3/skip-list/tag";
+import { MetaSpace } from "../../../../src/stores/spaces";
+import { SDKContextClass } from "../../../../src/contexts/SDKContextClass.ts";
 
 describe("section", () => {
     afterEach(() => {
         jest.restoreAllMocks();
     });
 
+    describe("getCustomSectionData", () => {
+        const validTag = "element.io.section.valid";
+        const invalidTag = "element.io.section.invalid";
+        const validEntry = { tag: validTag, name: "Valid" };
+
+        beforeEach(() => {
+            // Default: no known spaces
+            jest.spyOn(SDKContextClass.instance.spaceStore, "enabledMetaSpaces", "get").mockReturnValue([]);
+            jest.spyOn(SDKContextClass.instance.spaceStore, "spacePanelSpaces", "get").mockReturnValue([]);
+        });
+
+        it.each([null, false, 42, "string", []] as const)("returns an empty object when the raw value is %p", (raw) => {
+            jest.spyOn(SettingsStore, "getValue").mockReturnValue(raw as any);
+            expect(getCustomSectionData()).toEqual({});
+        });
+
+        it("returns valid entries and drops invalid ones, defaulting spaceId to MetaSpace.Home", () => {
+            jest.spyOn(SettingsStore, "getValue").mockReturnValue({
+                [validTag]: validEntry,
+                [invalidTag]: { tag: "element.io.section.mismatch", name: "Bad" },
+            });
+            expect(getCustomSectionData()).toEqual({ [validTag]: { ...validEntry, spaceId: MetaSpace.Home } });
+        });
+
+        it("drops entries that fail the isValidCustomSection check", () => {
+            jest.spyOn(SettingsStore, "getValue").mockReturnValue({
+                "element.io.section.null-val": null,
+                "element.io.section.str-val": "not-an-object",
+                "element.io.section.bad-tag": { tag: "not-a-custom-tag", name: "Bad" },
+                "element.io.section.bad-name": { tag: "element.io.section.bad-name", name: 42 },
+            });
+            expect(getCustomSectionData()).toEqual({});
+        });
+
+        it("defaults spaceId to MetaSpace.Home when spaceId is missing", () => {
+            jest.spyOn(SettingsStore, "getValue").mockReturnValue({ [validTag]: validEntry });
+            expect(getCustomSectionData()[validTag].spaceId).toBe(MetaSpace.Home);
+        });
+
+        it("defaults spaceId to MetaSpace.Home when the stored space does not exist", () => {
+            jest.spyOn(SettingsStore, "getValue").mockReturnValue({
+                [validTag]: { ...validEntry, spaceId: "!gone:server" },
+            });
+            // spacePanelSpaces is empty (default mock), so !gone:server is unknown
+            expect(getCustomSectionData()[validTag].spaceId).toBe(MetaSpace.Home);
+        });
+
+        it("keeps spaceId when the meta-space is enabled", () => {
+            jest.spyOn(SDKContextClass.instance.spaceStore, "enabledMetaSpaces", "get").mockReturnValue([
+                MetaSpace.Home,
+            ]);
+            jest.spyOn(SettingsStore, "getValue").mockReturnValue({
+                [validTag]: { ...validEntry, spaceId: MetaSpace.Home },
+            });
+            expect(getCustomSectionData()[validTag].spaceId).toBe(MetaSpace.Home);
+        });
+
+        it("keeps spaceId when the real space room exists", () => {
+            const spaceId = "!space:server";
+            jest.spyOn(SDKContextClass.instance.spaceStore, "spacePanelSpaces", "get").mockReturnValue([
+                { roomId: spaceId } as Room,
+            ]);
+            jest.spyOn(SettingsStore, "getValue").mockReturnValue({
+                [validTag]: { ...validEntry, spaceId },
+            });
+            expect(getCustomSectionData()[validTag].spaceId).toBe(spaceId);
+        });
+    });
+
+    describe("getOrderedCustomSections", () => {
+        const tag = "element.io.section.abc";
+
+        beforeEach(() => {
+            jest.spyOn(SDKContextClass.instance.spaceStore, "enabledMetaSpaces", "get").mockReturnValue([]);
+            jest.spyOn(SDKContextClass.instance.spaceStore, "spacePanelSpaces", "get").mockReturnValue([]);
+        });
+
+        it("returns an empty array when the raw value is not an array", () => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
+                if (setting === "RoomList.OrderedCustomSections") return "not-an-array";
+                return null;
+            });
+
+            const result = getOrderedCustomSections();
+            expect(result).toEqual([]);
+        });
+
+        it("removes unknown sections and saves the cleaned list", () => {
+            const knownTag = "element.io.section.known";
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
+                if (setting === "RoomList.CustomSectionData") return { [knownTag]: { tag: knownTag, name: "Known" } };
+                if (setting === "RoomList.OrderedCustomSections") return [knownTag, tag];
+                return null;
+            });
+
+            expect(getOrderedCustomSections()).toEqual([knownTag]);
+        });
+    });
+
+    describe("isSectionExpanded", () => {
+        const spaceId = "!space:server";
+        const tag = "element.io.section.abc";
+
+        it.each([
+            { value: {}, result: true },
+            { value: { "!other:server": { [tag]: false } }, result: true },
+            { value: { [spaceId]: { "other.tag": false } }, result: true },
+            { value: { [spaceId]: { [tag]: false } }, result: false },
+        ])("returns the persisted state=$result when value=$value", ({ value, result }) => {
+            jest.spyOn(SettingsStore, "getValue").mockReturnValue(value);
+            expect(isSectionExpanded(spaceId, tag)).toBe(result);
+        });
+    });
+
+    describe("setSectionExpanded", () => {
+        const spaceId = "!space:server";
+        const tag = "element.io.section.abc";
+
+        it("persists the state at the device level", async () => {
+            jest.spyOn(SettingsStore, "getValue").mockReturnValue({});
+            const setValueSpy = jest.spyOn(SettingsStore, "setValue").mockResolvedValue(undefined);
+
+            await setSectionExpanded(spaceId, tag, false);
+
+            expect(setValueSpy).toHaveBeenCalledWith("RoomList.SectionExpansionState", null, SettingLevel.DEVICE, {
+                [spaceId]: { [tag]: false },
+            });
+        });
+
+        it("merges with existing state for other spaces and tags", async () => {
+            jest.spyOn(SettingsStore, "getValue").mockReturnValue({
+                "!other:server": { "other.tag": false },
+                [spaceId]: { "existing.tag": true },
+            });
+            const setValueSpy = jest.spyOn(SettingsStore, "setValue").mockResolvedValue(undefined);
+
+            await setSectionExpanded(spaceId, tag, false);
+
+            expect(setValueSpy).toHaveBeenCalledWith("RoomList.SectionExpansionState", null, SettingLevel.DEVICE, {
+                "!other:server": { "other.tag": false },
+                [spaceId]: { "existing.tag": true, [tag]: false },
+            });
+        });
+
+        it("overwrites the previous state for the same space and tag", async () => {
+            jest.spyOn(SettingsStore, "getValue").mockReturnValue({ [spaceId]: { [tag]: false } });
+            const setValueSpy = jest.spyOn(SettingsStore, "setValue").mockResolvedValue(undefined);
+
+            await setSectionExpanded(spaceId, tag, true);
+
+            expect(setValueSpy).toHaveBeenCalledWith("RoomList.SectionExpansionState", null, SettingLevel.DEVICE, {
+                [spaceId]: { [tag]: true },
+            });
+        });
+    });
+
     describe("createSection", () => {
         beforeEach(() => {
             jest.spyOn(SettingsStore, "getValue").mockReturnValue(null);
             jest.spyOn(SettingsStore, "setValue").mockResolvedValue(undefined);
+            jest.spyOn(SDKContextClass.instance.spaceStore, "enabledMetaSpaces", "get").mockReturnValue([]);
+            jest.spyOn(SDKContextClass.instance.spaceStore, "spacePanelSpaces", "get").mockReturnValue([]);
         });
 
         it.each([
@@ -32,7 +209,7 @@ describe("section", () => {
                 close: jest.fn(),
             } as any);
 
-            const result = await createSection();
+            const result = await createSection(MetaSpace.Home);
             expect(result).toEqual(expected);
         });
 
@@ -42,7 +219,7 @@ describe("section", () => {
                 close: jest.fn(),
             } as any);
 
-            const result = await createSection();
+            const result = await createSection(MetaSpace.Home);
             expect(result).toMatch(/^element\.io\.section\./);
         });
 
@@ -52,7 +229,7 @@ describe("section", () => {
                 close: jest.fn(),
             } as any);
 
-            await createSection();
+            await createSection(MetaSpace.Home);
             expect(createDialogSpy).toHaveBeenCalledWith(CreateSectionDialog);
         });
 
@@ -60,6 +237,8 @@ describe("section", () => {
             const existingTag = "element.io.section.existing";
             jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
                 if (setting === "RoomList.OrderedCustomSections") return [existingTag];
+                if (setting === "RoomList.CustomSectionData")
+                    return { [existingTag]: { tag: existingTag, name: "Existing" } };
                 return null;
             });
             jest.spyOn(Modal, "createDialog").mockReturnValue({
@@ -68,17 +247,21 @@ describe("section", () => {
             } as any);
             const setValueSpy = jest.spyOn(SettingsStore, "setValue").mockResolvedValue(undefined);
 
-            await createSection();
-
-            const customDataCall = setValueSpy.mock.calls.find(([name]) => name === "RoomList.CustomSectionData");
-            const savedSection = Object.values(customDataCall![3] as Record<string, { tag: string; name: string }>)[0];
-            expect(savedSection.name).toBe("My Section");
-            expect(savedSection.tag).toMatch(/^element\.io\.section\./);
+            await createSection(MetaSpace.Home);
 
             const orderedCall = setValueSpy.mock.calls.find(([name]) => name === "RoomList.OrderedCustomSections");
             const savedOrder = orderedCall![3] as string[];
             expect(savedOrder[0]).toBe(existingTag);
             expect(savedOrder[1]).toMatch(/^element\.io\.section\./);
+
+            const newTag = savedOrder[1];
+            const customDataCall = setValueSpy.mock.calls.find(([name]) => name === "RoomList.CustomSectionData");
+            const savedSection = (customDataCall![3] as Record<string, { tag: string; name: string; spaceId: string }>)[
+                newTag
+            ];
+            expect(savedSection.name).toBe("My Section");
+            expect(savedSection.tag).toBe(newTag);
+            expect(savedSection.spaceId).toBe(MetaSpace.Home);
         });
     });
 
@@ -91,6 +274,12 @@ describe("section", () => {
             jest.spyOn(SettingsStore, "setValue").mockResolvedValue(undefined);
         });
 
+        it("does nothing if the tag is not a custom section tag", async () => {
+            const createDialogSpy = jest.spyOn(Modal, "createDialog");
+            await editSection("m.favourite");
+            expect(createDialogSpy).not.toHaveBeenCalled();
+        });
+
         it("does nothing if the section does not exist", async () => {
             jest.spyOn(SettingsStore, "getValue").mockReturnValue({});
             const createDialogSpy = jest.spyOn(Modal, "createDialog");
@@ -137,7 +326,7 @@ describe("section", () => {
                 "RoomList.CustomSectionData",
                 null,
                 expect.anything(),
-                expect.objectContaining({ [tag]: { tag, name: "New Name" } }),
+                expect.objectContaining({ [tag]: expect.objectContaining({ tag, name: "New Name" }) }),
             );
         });
     });
@@ -148,13 +337,20 @@ describe("section", () => {
 
         beforeEach(() => {
             jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
-                if (setting === "RoomList.CustomSectionData") return { [tag]: { tag, name: "My Section" } };
+                if (setting === "RoomList.CustomSectionData")
+                    return { [tag]: { tag, name: "My Section" }, [otherTag]: { tag: otherTag, name: "Other Section" } };
                 if (setting === "RoomList.OrderedCustomSections") return [otherTag, tag];
                 return null;
             });
             jest.spyOn(SettingsStore, "setValue").mockResolvedValue(undefined);
         });
 
+        it("does nothing if the tag is not a custom section tag", async () => {
+            const createDialogSpy = jest.spyOn(Modal, "createDialog");
+            await deleteSection("m.favourite", false);
+            expect(createDialogSpy).not.toHaveBeenCalled();
+        });
+
         it("does nothing if the section does not exist", async () => {
             jest.spyOn(SettingsStore, "getValue").mockReturnValue({});
             const createDialogSpy = jest.spyOn(Modal, "createDialog");
@@ -197,10 +393,149 @@ describe("section", () => {
             await deleteSection(tag, false);
 
             const orderedCall = setValueSpy.mock.calls.find(([name]) => name === "RoomList.OrderedCustomSections");
-            expect(orderedCall![3]).toEqual([otherTag]);
+            // CHATS_TAG is appended because the stored order didn't include it (legacy default position).
+            expect(orderedCall![3]).toEqual([otherTag, CHATS_TAG]);
 
             const customDataCall = setValueSpy.mock.calls.find(([name]) => name === "RoomList.CustomSectionData");
             expect(customDataCall![3]).not.toHaveProperty(tag);
         });
     });
+
+    describe("reorderSection", () => {
+        const customTag = `${CUSTOM_SECTION_TAG_PREFIX}abc`;
+        const customTag2 = `${CUSTOM_SECTION_TAG_PREFIX}def`;
+
+        function mockSettings(
+            orderedTags: string[],
+            customData: Record<string, { tag: string; name: string }> = {},
+        ): void {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
+                if (setting === "RoomList.OrderedCustomSections") return orderedTags;
+                if (setting === "RoomList.CustomSectionData") return customData;
+                return null;
+            });
+        }
+
+        it.each<{
+            description: string;
+            initial: string[];
+            customData: Record<string, { tag: string; name: string }>;
+            source: string;
+            target: string;
+            expected: string[];
+        }>([
+            {
+                description: "a custom section after another custom section",
+                initial: [customTag, customTag2],
+                customData: {
+                    [customTag]: { tag: customTag, name: "A" },
+                    [customTag2]: { tag: customTag2, name: "B" },
+                },
+                source: customTag,
+                target: customTag2,
+                expected: [customTag2, customTag, CHATS_TAG],
+            },
+            {
+                description: "a custom section before another when dragging up",
+                initial: [customTag2, customTag],
+                customData: {
+                    [customTag]: { tag: customTag, name: "A" },
+                    [customTag2]: { tag: customTag2, name: "B" },
+                },
+                source: customTag,
+                target: customTag2,
+                expected: [customTag, customTag2, CHATS_TAG],
+            },
+            {
+                description: "a custom section past the Chats tag",
+                initial: [customTag, customTag2, CHATS_TAG],
+                customData: {
+                    [customTag]: { tag: customTag, name: "A" },
+                    [customTag2]: { tag: customTag2, name: "B" },
+                },
+                source: customTag,
+                target: CHATS_TAG,
+                expected: [customTag2, CHATS_TAG, customTag],
+            },
+            {
+                description: "the Chats tag above a custom section",
+                initial: [customTag, customTag2, CHATS_TAG],
+                customData: {
+                    [customTag]: { tag: customTag, name: "A" },
+                    [customTag2]: { tag: customTag2, name: "B" },
+                },
+                source: CHATS_TAG,
+                target: customTag,
+                expected: [CHATS_TAG, customTag, customTag2],
+            },
+        ])(
+            "moves $description and saves the new order at ACCOUNT level",
+            async ({ initial, customData, source, target, expected }) => {
+                mockSettings(initial, customData);
+                const setValueSpy = jest.spyOn(SettingsStore, "setValue").mockResolvedValue(undefined);
+
+                await reorderSection(source, target);
+
+                expect(setValueSpy).toHaveBeenCalledWith(
+                    "RoomList.OrderedCustomSections",
+                    null,
+                    expect.anything(),
+                    expected,
+                );
+            },
+        );
+
+        it.each([
+            {
+                description: "source and target are the same",
+                source: customTag,
+                target: customTag,
+            },
+            {
+                description: "source custom section is not in the ordered list",
+                source: `${CUSTOM_SECTION_TAG_PREFIX}unknown`,
+                target: customTag,
+            },
+            {
+                description: "target custom section is not in the ordered list",
+                source: customTag,
+                target: `${CUSTOM_SECTION_TAG_PREFIX}unknown`,
+            },
+            {
+                description: "source is a default section",
+                source: DefaultTagID.Favourite,
+                target: customTag,
+            },
+        ])("does nothing when $description", async ({ source, target }) => {
+            mockSettings([customTag], { [customTag]: { tag: customTag, name: "A" } });
+            const setValueSpy = jest.spyOn(SettingsStore, "setValue").mockResolvedValue(undefined);
+
+            await reorderSection(source, target);
+
+            expect(setValueSpy).not.toHaveBeenCalled();
+        });
+    });
+
+    describe("isDefaultSectionTag", () => {
+        it.each([DefaultTagID.Favourite, DefaultTagID.LowPriority, CHATS_TAG])("returns true for %s", (tag) => {
+            expect(isDefaultSectionTag(tag)).toBe(true);
+        });
+
+        it.each([DefaultTagID.Invite, "some.random.tag"])("returns false for %s", (tag) => {
+            expect(isDefaultSectionTag(tag)).toBe(false);
+        });
+    });
+
+    describe("isSectionTag", () => {
+        it.each([DefaultTagID.Favourite, DefaultTagID.LowPriority, CHATS_TAG, `${CUSTOM_SECTION_TAG_PREFIX}some-uuid`])(
+            "returns true for %s",
+            (tag) => {
+                expect(isSectionTag(tag)).toBe(true);
+            },
+        );
+
+        it.each([DefaultTagID.Invite, "some.random.tag"])("returns false for %s", (tag) => {
+            expect(isSectionTag(tag)).toBe(false);
+        });
+    });
 });
diff --git a/apps/web/test/unit-tests/stores/room-list-v3/skip-list/RoomSkipList-test.ts b/apps/web/test/unit-tests/stores/room-list-v3/skip-list/RoomSkipList-test.ts
index 8640f3491e..a187266fdc 100644
--- a/apps/web/test/unit-tests/stores/room-list-v3/skip-list/RoomSkipList-test.ts
+++ b/apps/web/test/unit-tests/stores/room-list-v3/skip-list/RoomSkipList-test.ts
@@ -15,12 +15,12 @@ import { RoomSkipList } from "../../../../../src/stores/room-list-v3/skip-list/R
 import { RecencySorter } from "../../../../../src/stores/room-list-v3/skip-list/sorters/RecencySorter";
 import { AlphabeticSorter } from "../../../../../src/stores/room-list-v3/skip-list/sorters/AlphabeticSorter";
 import { getMockedRooms } from "./getMockedRooms";
-import SpaceStore from "../../../../../src/stores/spaces/SpaceStore";
 import { MetaSpace } from "../../../../../src/stores/spaces";
 import { RoomNotificationStateStore } from "../../../../../src/stores/notifications/RoomNotificationStateStore";
 import { FavouriteFilter } from "../../../../../src/stores/room-list-v3/skip-list/filters/FavouriteFilter";
 import { FilterEnum } from "../../../../../src/stores/room-list-v3/skip-list/filters";
 import { DefaultTagID } from "../../../../../src/stores/room-list-v3/skip-list/tag";
+import { SDKContextClass } from "../../../../../src/contexts/SDKContextClass.ts";
 
 describe("RoomSkipList", () => {
     function generateSkipList(roomCount?: number): {
@@ -38,9 +38,13 @@ describe("RoomSkipList", () => {
     }
 
     beforeEach(() => {
-        jest.spyOn(SpaceStore.instance, "isRoomInSpace").mockImplementation((space) => space === MetaSpace.Home);
-        jest.spyOn(SpaceStore.instance, "activeSpace", "get").mockImplementation(() => MetaSpace.Home);
-        jest.spyOn(SpaceStore.instance, "storeReadyPromise", "get").mockImplementation(() => Promise.resolve());
+        jest.spyOn(SDKContextClass.instance.spaceStore, "isRoomInSpace").mockImplementation(
+            (space) => space === MetaSpace.Home,
+        );
+        jest.spyOn(SDKContextClass.instance.spaceStore, "activeSpace", "get").mockImplementation(() => MetaSpace.Home);
+        jest.spyOn(SDKContextClass.instance.spaceStore, "storeReadyPromise", "get").mockImplementation(() =>
+            Promise.resolve(),
+        );
         jest.spyOn(RoomNotificationStateStore.instance, "getRoomState").mockImplementation(() => {
             const state = {
                 mute: false,
@@ -96,10 +100,13 @@ describe("RoomSkipList", () => {
         }
     });
 
-    it("Throws error when same room is added via addNewRoom", () => {
+    it("Room is not duplicated when same room is added via addNewRoom", () => {
         const { skipList, rooms } = generateSkipList();
         const room = rooms[5];
-        expect(() => skipList.addNewRoom(room)).toThrow("Can't add room to skiplist");
+        const sizeBefore = skipList.size;
+        skipList.addNewRoom(room);
+
+        expect(skipList.size).toEqual(sizeBefore);
     });
 
     it("Filters are applied to existing nodes when useNewFilters is called", () => {
diff --git a/apps/web/test/unit-tests/stores/room-list-v3/skip-list/getMockedRooms.ts b/apps/web/test/unit-tests/stores/room-list-v3/skip-list/getMockedRooms.ts
index 1aa0954ef9..af6858f023 100644
--- a/apps/web/test/unit-tests/stores/room-list-v3/skip-list/getMockedRooms.ts
+++ b/apps/web/test/unit-tests/stores/room-list-v3/skip-list/getMockedRooms.ts
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 import type { MatrixClient, Room } from "matrix-js-sdk/src/matrix";
 import { mkMessage, mkStubRoom } from "../../../../test-utils";
+import { vi } from "../../../../setup/adapter.ts";
 
 export function getMockedRooms(client: MatrixClient, roomCount: number = 100): Room[] {
     const rooms: Room[] = [];
@@ -14,7 +15,7 @@ export function getMockedRooms(client: MatrixClient, roomCount: number = 100): R
         const roomId = `!foo${i}:matrix.org`;
         const room = mkStubRoom(roomId, `Foo Room ${i}`, client);
         const event = mkMessage({ room: roomId, user: `@foo${i}:matrix.org`, ts: i + 1, event: true });
-        jest.spyOn(room.getLiveTimeline(), "getEvents").mockReturnValue([event]);
+        vi.spyOn(room.getLiveTimeline(), "getEvents").mockReturnValue([event]);
         rooms.push(room);
     }
     return rooms;
diff --git a/apps/web/test/unit-tests/stores/room-list/RoomListStore-test.ts b/apps/web/test/unit-tests/stores/room-list/RoomListStore-test.ts
deleted file mode 100644
index 268162909b..0000000000
--- a/apps/web/test/unit-tests/stores/room-list/RoomListStore-test.ts
+++ /dev/null
@@ -1,349 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import {
-    ConditionKind,
-    EventType,
-    type IPushRule,
-    MatrixEvent,
-    PendingEventOrdering,
-    PushRuleActionName,
-    Room,
-} from "matrix-js-sdk/src/matrix";
-import { KnownMembership } from "matrix-js-sdk/src/types";
-import { mocked } from "jest-mock";
-
-import defaultDispatcher, { type MatrixDispatcher } from "../../../../src/dispatcher/dispatcher";
-import { SettingLevel } from "../../../../src/settings/SettingLevel";
-import SettingsStore, { type CallbackFn } from "../../../../src/settings/SettingsStore";
-import { ListAlgorithm, SortAlgorithm } from "../../../../src/stores/room-list/algorithms/models";
-import { OrderedDefaultTagIDs, RoomUpdateCause } from "../../../../src/stores/room-list/models";
-import RoomListStore, { RoomListStoreClass } from "../../../../src/stores/room-list/RoomListStore";
-import DMRoomMap from "../../../../src/utils/DMRoomMap";
-import { flushPromises, stubClient, upsertRoomStateEvents } from "../../../test-utils";
-import { DEFAULT_PUSH_RULES, makePushRule } from "../../../test-utils/pushRules";
-
-describe("RoomListStore", () => {
-    const client = stubClient();
-    const newRoomId = "!roomid:example.com";
-    const roomNoPredecessorId = "!roomnopreid:example.com";
-    const oldRoomId = "!oldroomid:example.com";
-    const userId = "@user:example.com";
-    const createWithPredecessor = new MatrixEvent({
-        type: EventType.RoomCreate,
-        sender: userId,
-        room_id: newRoomId,
-        content: {
-            predecessor: { room_id: oldRoomId, event_id: "tombstone_event_id" },
-        },
-        event_id: "$create",
-        state_key: "",
-    });
-    const createNoPredecessor = new MatrixEvent({
-        type: EventType.RoomCreate,
-        sender: userId,
-        room_id: newRoomId,
-        content: {},
-        event_id: "$create",
-        state_key: "",
-    });
-    const predecessor = new MatrixEvent({
-        type: EventType.RoomPredecessor,
-        sender: userId,
-        room_id: newRoomId,
-        content: {
-            predecessor_room_id: oldRoomId,
-            last_known_event_id: "tombstone_event_id",
-        },
-        event_id: "$pred",
-        state_key: "",
-    });
-    const roomWithPredecessorEvent = new Room(newRoomId, client, userId, {});
-    upsertRoomStateEvents(roomWithPredecessorEvent, [predecessor]);
-    const roomWithCreatePredecessor = new Room(newRoomId, client, userId, {});
-    upsertRoomStateEvents(roomWithCreatePredecessor, [createWithPredecessor]);
-    const roomNoPredecessor = new Room(roomNoPredecessorId, client, userId, {
-        pendingEventOrdering: PendingEventOrdering.Detached,
-    });
-    upsertRoomStateEvents(roomNoPredecessor, [createNoPredecessor]);
-    const oldRoom = new Room(oldRoomId, client, userId, {});
-    const normalRoom = new Room("!normal:server.org", client, userId);
-    client.getRoom = jest.fn().mockImplementation((roomId) => {
-        switch (roomId) {
-            case newRoomId:
-                return roomWithCreatePredecessor;
-            case oldRoomId:
-                return oldRoom;
-            case normalRoom.roomId:
-                return normalRoom;
-            default:
-                return null;
-        }
-    });
-
-    beforeAll(async () => {
-        await (RoomListStore.instance as RoomListStoreClass).makeReady(client);
-    });
-
-    it.each(OrderedDefaultTagIDs)("defaults to importance ordering for %s=", (tagId) => {
-        expect(RoomListStore.instance.getTagSorting(tagId)).toBe(SortAlgorithm.Recent);
-    });
-
-    it.each(OrderedDefaultTagIDs)("defaults to activity ordering for %s=", (tagId) => {
-        expect(RoomListStore.instance.getListOrder(tagId)).toBe(ListAlgorithm.Natural);
-    });
-
-    function createStore(): { store: RoomListStoreClass; handleRoomUpdate: jest.Mock<any, any> } {
-        const fakeDispatcher = { register: jest.fn() } as unknown as MatrixDispatcher;
-        const store = new RoomListStoreClass(fakeDispatcher);
-        // @ts-ignore accessing private member to set client
-        store.readyStore.matrixClient = client;
-        const handleRoomUpdate = jest.fn();
-        // @ts-ignore accessing private member to mock it
-        store.algorithm.handleRoomUpdate = handleRoomUpdate;
-
-        return { store, handleRoomUpdate };
-    }
-
-    it("Removes old room if it finds a predecessor in the create event", () => {
-        // Given a store we can spy on
-        const { store, handleRoomUpdate } = createStore();
-
-        mocked(client.getRoomUpgradeHistory).mockImplementation((roomId) =>
-            roomId === roomWithCreatePredecessor.roomId ? [oldRoom, roomWithCreatePredecessor] : [],
-        );
-
-        // When we tell it we joined a new room that has an old room as
-        // predecessor in the create event
-        const payload = {
-            oldMembership: KnownMembership.Invite,
-            membership: KnownMembership.Join,
-            room: roomWithCreatePredecessor,
-        };
-        store.onDispatchMyMembership(payload);
-
-        // Then the old room is removed
-        expect(handleRoomUpdate).toHaveBeenCalledWith(oldRoom, RoomUpdateCause.RoomRemoved);
-
-        // And the new room is added
-        expect(handleRoomUpdate).toHaveBeenCalledWith(roomWithCreatePredecessor, RoomUpdateCause.NewRoom);
-    });
-
-    it("Does not remove old room if there is no predecessor in the create event", () => {
-        // Given a store we can spy on
-        const { store, handleRoomUpdate } = createStore();
-
-        // When we tell it we joined a new room with no predecessor
-        const payload = {
-            oldMembership: KnownMembership.Invite,
-            membership: KnownMembership.Join,
-            room: roomNoPredecessor,
-        };
-        store.onDispatchMyMembership(payload);
-
-        // Then the new room is added
-        expect(handleRoomUpdate).toHaveBeenCalledWith(roomNoPredecessor, RoomUpdateCause.NewRoom);
-        // And no other updates happen
-        expect(handleRoomUpdate).toHaveBeenCalledTimes(1);
-    });
-
-    it("Lists all rooms that the client says are visible", () => {
-        // Given 3 rooms that are visible according to the client
-        const room1 = new Room("!r1:e.com", client, userId, { pendingEventOrdering: PendingEventOrdering.Detached });
-        const room2 = new Room("!r2:e.com", client, userId, { pendingEventOrdering: PendingEventOrdering.Detached });
-        const room3 = new Room("!r3:e.com", client, userId, { pendingEventOrdering: PendingEventOrdering.Detached });
-        room1.updateMyMembership(KnownMembership.Join);
-        room2.updateMyMembership(KnownMembership.Join);
-        room3.updateMyMembership(KnownMembership.Join);
-        DMRoomMap.makeShared(client);
-        const { store } = createStore();
-        client.getVisibleRooms = jest.fn().mockReturnValue([room1, room2, room3]);
-
-        // When we make the list of rooms
-        store.regenerateAllLists({ trigger: false });
-
-        // Then the list contains all 3
-        expect(store.orderedLists).toMatchObject({
-            "im.vector.fake.recent": [room1, room2, room3],
-        });
-
-        // We asked not to use MSC3946 when we asked the client for the visible rooms
-        expect(client.getVisibleRooms).toHaveBeenCalledWith(false);
-        expect(client.getVisibleRooms).toHaveBeenCalledTimes(1);
-    });
-
-    it("Watches the feature flag setting", () => {
-        jest.spyOn(SettingsStore, "watchSetting").mockReturnValue("dyn_pred_ref");
-        jest.spyOn(SettingsStore, "unwatchSetting");
-
-        // When we create a store
-        const { store } = createStore();
-
-        // Then we watch the feature flag
-        expect(SettingsStore.watchSetting).toHaveBeenCalledWith(
-            "feature_dynamic_room_predecessors",
-            null,
-            expect.any(Function),
-        );
-
-        // And when we unmount it
-        store.componentWillUnmount();
-
-        // Then we unwatch it.
-        expect(SettingsStore.unwatchSetting).toHaveBeenCalledWith("dyn_pred_ref");
-    });
-
-    it("Regenerates all lists when the feature flag is set", () => {
-        // Given a store allowing us to spy on any use of SettingsStore
-        let featureFlagValue = false;
-        jest.spyOn(SettingsStore, "getValue").mockImplementation(() => featureFlagValue);
-
-        let watchCallback: CallbackFn<any> | undefined;
-        jest.spyOn(SettingsStore, "watchSetting").mockImplementation((_settingName, _roomId, callbackFn) => {
-            watchCallback = callbackFn;
-            return "dyn_pred_ref";
-        });
-        jest.spyOn(SettingsStore, "unwatchSetting");
-
-        const { store } = createStore();
-        client.getVisibleRooms = jest.fn().mockReturnValue([]);
-        // Sanity: no calculation has happened yet
-        expect(client.getVisibleRooms).toHaveBeenCalledTimes(0);
-
-        // When we calculate for the first time
-        store.regenerateAllLists({ trigger: false });
-
-        // Then we use the current feature flag value (false)
-        expect(client.getVisibleRooms).toHaveBeenCalledWith(false);
-        expect(client.getVisibleRooms).toHaveBeenCalledTimes(1);
-
-        // But when we update the feature flag
-        featureFlagValue = true;
-        watchCallback!(
-            "feature_dynamic_room_predecessors",
-            "",
-            SettingLevel.DEFAULT,
-            featureFlagValue,
-            featureFlagValue,
-        );
-
-        // Then we recalculate and passed the updated value (true)
-        expect(client.getVisibleRooms).toHaveBeenCalledWith(true);
-        expect(client.getVisibleRooms).toHaveBeenCalledTimes(2);
-    });
-
-    describe("When feature_dynamic_room_predecessors = true", () => {
-        beforeEach(() => {
-            jest.spyOn(SettingsStore, "getValue").mockImplementation(
-                (settingName) => settingName === "feature_dynamic_room_predecessors",
-            );
-        });
-
-        afterEach(() => {
-            jest.spyOn(SettingsStore, "getValue").mockReset();
-        });
-
-        it("Removes old room if it finds a predecessor in the m.predecessor event", () => {
-            // Given a store we can spy on
-            const { store, handleRoomUpdate } = createStore();
-
-            // When we tell it we joined a new room that has an old room as
-            // predecessor in the create event
-            const payload = {
-                oldMembership: KnownMembership.Invite,
-                membership: KnownMembership.Join,
-                room: roomWithPredecessorEvent,
-            };
-            store.onDispatchMyMembership(payload);
-
-            // Then the old room is removed
-            expect(handleRoomUpdate).toHaveBeenCalledWith(oldRoom, RoomUpdateCause.RoomRemoved);
-
-            // And the new room is added
-            expect(handleRoomUpdate).toHaveBeenCalledWith(roomWithPredecessorEvent, RoomUpdateCause.NewRoom);
-        });
-
-        it("Passes the feature flag on to the client when asking for visible rooms", () => {
-            // Given a store that we can ask for a room list
-            DMRoomMap.makeShared(client);
-            const { store } = createStore();
-            client.getVisibleRooms = jest.fn().mockReturnValue([]);
-
-            // When we make the list of rooms
-            store.regenerateAllLists({ trigger: false });
-
-            // We asked to use MSC3946 when we asked the client for the visible rooms
-            expect(client.getVisibleRooms).toHaveBeenCalledWith(true);
-            expect(client.getVisibleRooms).toHaveBeenCalledTimes(1);
-        });
-    });
-
-    describe("room updates", () => {
-        const makeStore = async () => {
-            const store = new RoomListStoreClass(defaultDispatcher);
-            await store.start();
-            return store;
-        };
-
-        describe("push rules updates", () => {
-            const makePushRulesEvent = (overrideRules: IPushRule[] = []): MatrixEvent => {
-                return new MatrixEvent({
-                    type: EventType.PushRules,
-                    content: {
-                        global: {
-                            ...DEFAULT_PUSH_RULES.global,
-                            override: overrideRules,
-                        },
-                    },
-                });
-            };
-
-            it("triggers a room update when room mutes have changed", async () => {
-                const rule = makePushRule(normalRoom.roomId, {
-                    actions: [PushRuleActionName.DontNotify],
-                    conditions: [{ kind: ConditionKind.EventMatch, key: "room_id", pattern: normalRoom.roomId }],
-                });
-                const event = makePushRulesEvent([rule]);
-                const previousEvent = makePushRulesEvent();
-
-                const store = await makeStore();
-                // @ts-ignore private property alg
-                const algorithmSpy = jest.spyOn(store.algorithm, "handleRoomUpdate").mockReturnValue(undefined);
-                // @ts-ignore cheat and call protected fn
-                store.onAction({ action: "MatrixActions.accountData", event, previousEvent });
-                await flushPromises();
-
-                expect(algorithmSpy).toHaveBeenCalledWith(normalRoom, RoomUpdateCause.PossibleMuteChange);
-            });
-
-            it("handles when a muted room is unknown by the room list", async () => {
-                const rule = makePushRule(normalRoom.roomId, {
-                    actions: [PushRuleActionName.DontNotify],
-                    conditions: [{ kind: ConditionKind.EventMatch, key: "room_id", pattern: normalRoom.roomId }],
-                });
-                const unknownRoomRule = makePushRule("!unknown:server.org", {
-                    conditions: [{ kind: ConditionKind.EventMatch, key: "room_id", pattern: "!unknown:server.org" }],
-                });
-                const event = makePushRulesEvent([unknownRoomRule, rule]);
-                const previousEvent = makePushRulesEvent();
-
-                const store = await makeStore();
-                // @ts-ignore private property alg
-                const algorithmSpy = jest.spyOn(store.algorithm, "handleRoomUpdate").mockReturnValue(undefined);
-
-                // @ts-ignore cheat and call protected fn
-                store.onAction({ action: "MatrixActions.accountData", event, previousEvent });
-                await flushPromises();
-
-                // only one call to update made for normalRoom
-                expect(algorithmSpy).toHaveBeenCalledTimes(1);
-                expect(algorithmSpy).toHaveBeenCalledWith(normalRoom, RoomUpdateCause.PossibleMuteChange);
-            });
-        });
-    });
-});
diff --git a/apps/web/test/unit-tests/stores/room-list/SpaceWatcher-test.ts b/apps/web/test/unit-tests/stores/room-list/SpaceWatcher-test.ts
deleted file mode 100644
index 4f0c7ee118..0000000000
--- a/apps/web/test/unit-tests/stores/room-list/SpaceWatcher-test.ts
+++ /dev/null
@@ -1,218 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2021 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { mocked } from "jest-mock";
-import { type Room } from "matrix-js-sdk/src/matrix";
-
-import { SpaceWatcher } from "../../../../src/stores/room-list/SpaceWatcher";
-import type { RoomListStoreClass } from "../../../../src/stores/room-list/RoomListStore";
-import SettingsStore from "../../../../src/settings/SettingsStore";
-import SpaceStore from "../../../../src/stores/spaces/SpaceStore";
-import { MetaSpace, UPDATE_HOME_BEHAVIOUR } from "../../../../src/stores/spaces";
-import { stubClient, mkSpace, emitPromise, setupAsyncStoreWithClient } from "../../../test-utils";
-import { SettingLevel } from "../../../../src/settings/SettingLevel";
-import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
-import { SpaceFilterCondition } from "../../../../src/stores/room-list/filters/SpaceFilterCondition";
-import DMRoomMap from "../../../../src/utils/DMRoomMap";
-
-let filter: SpaceFilterCondition | null = null;
-
-const mockRoomListStore = {
-    addFilter: (f: SpaceFilterCondition) => (filter = f),
-    removeFilter: (): void => {
-        filter = null;
-    },
-} as unknown as RoomListStoreClass;
-
-const getUserIdForRoomId = jest.fn();
-const getDMRoomsForUserId = jest.fn();
-// @ts-ignore
-DMRoomMap.sharedInstance = { getUserIdForRoomId, getDMRoomsForUserId };
-
-const space1 = "!space1:server";
-const space2 = "!space2:server";
-
-describe("SpaceWatcher", () => {
-    stubClient();
-    const store = SpaceStore.instance;
-    const client = mocked(MatrixClientPeg.safeGet());
-
-    let rooms: Room[] = [];
-    const mkSpaceForRooms = (spaceId: string, children: string[] = []) => mkSpace(client, spaceId, rooms, children);
-
-    const setShowAllRooms = async (value: boolean) => {
-        if (store.allRoomsInHome === value) return;
-        await SettingsStore.setValue("Spaces.allRoomsInHome", null, SettingLevel.DEVICE, value);
-        await emitPromise(store, UPDATE_HOME_BEHAVIOUR);
-    };
-
-    beforeEach(async () => {
-        filter = null;
-        store.removeAllListeners();
-        store.setActiveSpace(MetaSpace.Home);
-        client.getVisibleRooms.mockReturnValue((rooms = []));
-
-        mkSpaceForRooms(space1);
-        mkSpaceForRooms(space2);
-
-        await SettingsStore.setValue("Spaces.enabledMetaSpaces", null, SettingLevel.DEVICE, {
-            [MetaSpace.Home]: true,
-            [MetaSpace.Favourites]: true,
-            [MetaSpace.People]: true,
-            [MetaSpace.Orphans]: true,
-        });
-
-        client.getRoom.mockImplementation((roomId) => rooms.find((room) => room.roomId === roomId) || null);
-        await setupAsyncStoreWithClient(store, client);
-    });
-
-    it("initialises sanely with home behaviour", async () => {
-        await setShowAllRooms(false);
-        new SpaceWatcher(mockRoomListStore);
-
-        expect(filter).toBeInstanceOf(SpaceFilterCondition);
-    });
-
-    it("initialises sanely with all behaviour", async () => {
-        await setShowAllRooms(true);
-        new SpaceWatcher(mockRoomListStore);
-
-        expect(filter).toBeNull();
-    });
-
-    it("sets space=Home filter for all -> home transition", async () => {
-        await setShowAllRooms(true);
-        new SpaceWatcher(mockRoomListStore);
-
-        await setShowAllRooms(false);
-
-        expect(filter).toBeInstanceOf(SpaceFilterCondition);
-        expect(filter!["space"]).toBe(MetaSpace.Home);
-    });
-
-    it("sets filter correctly for all -> space transition", async () => {
-        await setShowAllRooms(true);
-        new SpaceWatcher(mockRoomListStore);
-
-        SpaceStore.instance.setActiveSpace(space1);
-
-        expect(filter).toBeInstanceOf(SpaceFilterCondition);
-        expect(filter!["space"]).toBe(space1);
-    });
-
-    it("removes filter for home -> all transition", async () => {
-        await setShowAllRooms(false);
-        new SpaceWatcher(mockRoomListStore);
-
-        await setShowAllRooms(true);
-
-        expect(filter).toBeNull();
-    });
-
-    it("sets filter correctly for home -> space transition", async () => {
-        await setShowAllRooms(false);
-        new SpaceWatcher(mockRoomListStore);
-
-        SpaceStore.instance.setActiveSpace(space1);
-
-        expect(filter).toBeInstanceOf(SpaceFilterCondition);
-        expect(filter!["space"]).toBe(space1);
-    });
-
-    it("removes filter for space -> all transition", async () => {
-        await setShowAllRooms(true);
-        new SpaceWatcher(mockRoomListStore);
-
-        SpaceStore.instance.setActiveSpace(space1);
-        expect(filter).toBeInstanceOf(SpaceFilterCondition);
-        expect(filter!["space"]).toBe(space1);
-        SpaceStore.instance.setActiveSpace(MetaSpace.Home);
-
-        expect(filter).toBeNull();
-    });
-
-    // The new room list is now forced on, which removes the favourites and people meta spaces.
-    // So no need to test these transitions any more.
-
-    it("removes filter for orphans -> all transition", async () => {
-        await setShowAllRooms(true);
-        new SpaceWatcher(mockRoomListStore);
-
-        SpaceStore.instance.setActiveSpace(MetaSpace.Orphans);
-        expect(filter).toBeInstanceOf(SpaceFilterCondition);
-        expect(filter!["space"]).toBe(MetaSpace.Orphans);
-        SpaceStore.instance.setActiveSpace(MetaSpace.Home);
-
-        expect(filter).toBeNull();
-    });
-
-    it("updates filter correctly for space -> home transition", async () => {
-        await setShowAllRooms(false);
-        SpaceStore.instance.setActiveSpace(space1);
-
-        new SpaceWatcher(mockRoomListStore);
-        expect(filter).toBeInstanceOf(SpaceFilterCondition);
-        expect(filter!["space"]).toBe(space1);
-        SpaceStore.instance.setActiveSpace(MetaSpace.Home);
-
-        expect(filter).toBeInstanceOf(SpaceFilterCondition);
-        expect(filter!["space"]).toBe(MetaSpace.Home);
-    });
-
-    it("updates filter correctly for space -> orphans transition", async () => {
-        await setShowAllRooms(false);
-        SpaceStore.instance.setActiveSpace(space1);
-
-        new SpaceWatcher(mockRoomListStore);
-        expect(filter).toBeInstanceOf(SpaceFilterCondition);
-        expect(filter!["space"]).toBe(space1);
-        SpaceStore.instance.setActiveSpace(MetaSpace.Orphans);
-
-        expect(filter).toBeInstanceOf(SpaceFilterCondition);
-        expect(filter!["space"]).toBe(MetaSpace.Orphans);
-    });
-
-    it("updates filter correctly for space -> space transition", async () => {
-        await setShowAllRooms(false);
-        SpaceStore.instance.setActiveSpace(space1);
-
-        new SpaceWatcher(mockRoomListStore);
-        expect(filter).toBeInstanceOf(SpaceFilterCondition);
-        expect(filter!["space"]).toBe(space1);
-        SpaceStore.instance.setActiveSpace(space2);
-
-        expect(filter).toBeInstanceOf(SpaceFilterCondition);
-        expect(filter!["space"]).toBe(space2);
-    });
-
-    it("doesn't change filter when changing showAllRooms mode to true", async () => {
-        await setShowAllRooms(false);
-        SpaceStore.instance.setActiveSpace(space1);
-
-        new SpaceWatcher(mockRoomListStore);
-        expect(filter).toBeInstanceOf(SpaceFilterCondition);
-        expect(filter!["space"]).toBe(space1);
-        await setShowAllRooms(true);
-
-        expect(filter).toBeInstanceOf(SpaceFilterCondition);
-        expect(filter!["space"]).toBe(space1);
-    });
-
-    it("doesn't change filter when changing showAllRooms mode to false", async () => {
-        await setShowAllRooms(true);
-        SpaceStore.instance.setActiveSpace(space1);
-
-        new SpaceWatcher(mockRoomListStore);
-        expect(filter).toBeInstanceOf(SpaceFilterCondition);
-        expect(filter!["space"]).toBe(space1);
-        await setShowAllRooms(false);
-
-        expect(filter).toBeInstanceOf(SpaceFilterCondition);
-        expect(filter!["space"]).toBe(space1);
-    });
-});
diff --git a/apps/web/test/unit-tests/stores/room-list/algorithms/Algorithm-test.ts b/apps/web/test/unit-tests/stores/room-list/algorithms/Algorithm-test.ts
deleted file mode 100644
index b7ba92b4ce..0000000000
--- a/apps/web/test/unit-tests/stores/room-list/algorithms/Algorithm-test.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { mocked, type MockedObject } from "jest-mock";
-import { PendingEventOrdering, Room, RoomStateEvent } from "matrix-js-sdk/src/matrix";
-import { KnownMembership } from "matrix-js-sdk/src/types";
-import { Widget } from "matrix-widget-api";
-
-import type { MatrixClient } from "matrix-js-sdk/src/matrix";
-import {
-    stubClient,
-    setupAsyncStoreWithClient,
-    useMockedCalls,
-    MockedCall,
-    useMockMediaDevices,
-} from "../../../../test-utils";
-import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
-import DMRoomMap from "../../../../../src/utils/DMRoomMap";
-import { DefaultTagID } from "../../../../../src/stores/room-list-v3/skip-list/tag";
-import { SortAlgorithm, ListAlgorithm } from "../../../../../src/stores/room-list/algorithms/models";
-import "../../../../../src/stores/room-list/RoomListStore"; // must be imported before Algorithm to avoid cycles
-import { Algorithm } from "../../../../../src/stores/room-list/algorithms/Algorithm";
-import { CallStore } from "../../../../../src/stores/CallStore";
-import { WidgetMessagingStore } from "../../../../../src/stores/widgets/WidgetMessagingStore";
-import { ConnectionState } from "../../../../../src/models/Call";
-import { type WidgetMessaging } from "../../../../../src/stores/widgets/WidgetMessaging";
-
-describe("Algorithm", () => {
-    useMockedCalls();
-
-    let client: MockedObject<MatrixClient>;
-    let algorithm: Algorithm;
-
-    beforeEach(() => {
-        useMockMediaDevices();
-        stubClient();
-        client = mocked(MatrixClientPeg.safeGet());
-        DMRoomMap.makeShared(client);
-
-        algorithm = new Algorithm();
-        algorithm.start();
-        algorithm.populateTags(
-            { [DefaultTagID.Untagged]: SortAlgorithm.Alphabetic },
-            { [DefaultTagID.Untagged]: ListAlgorithm.Natural },
-        );
-    });
-
-    afterEach(() => {
-        algorithm.stop();
-    });
-
-    it("sticks rooms with calls to the top when they're connected", async () => {
-        const room = new Room("!1:example.org", client, "@alice:example.org", {
-            pendingEventOrdering: PendingEventOrdering.Detached,
-        });
-        const roomWithCall = new Room("!2:example.org", client, "@alice:example.org", {
-            pendingEventOrdering: PendingEventOrdering.Detached,
-        });
-
-        client.getRoom.mockImplementation((roomId) => {
-            switch (roomId) {
-                case room.roomId:
-                    return room;
-                case roomWithCall.roomId:
-                    return roomWithCall;
-                default:
-                    return null;
-            }
-        });
-        client.getRooms.mockReturnValue([room, roomWithCall]);
-        client.reEmitter.reEmit(room, [RoomStateEvent.Events]);
-        client.reEmitter.reEmit(roomWithCall, [RoomStateEvent.Events]);
-
-        for (const room of client.getRooms()) jest.spyOn(room, "getMyMembership").mockReturnValue(KnownMembership.Join);
-        algorithm.setKnownRooms(client.getRooms());
-
-        setupAsyncStoreWithClient(CallStore.instance, client);
-        setupAsyncStoreWithClient(WidgetMessagingStore.instance, client);
-
-        MockedCall.create(roomWithCall, "1");
-        const call = CallStore.instance.getCall(roomWithCall.roomId);
-        if (!(call instanceof MockedCall)) throw new Error("Failed to create call");
-
-        const widget = new Widget(call.widget);
-        WidgetMessagingStore.instance.storeMessaging(widget, roomWithCall.roomId, {
-            stop: () => {},
-        } as unknown as WidgetMessaging);
-
-        // End of setup
-
-        expect(algorithm.getOrderedRooms()[DefaultTagID.Untagged]).toEqual([room, roomWithCall]);
-        call.setConnectionState(ConnectionState.Connected);
-        expect(algorithm.getOrderedRooms()[DefaultTagID.Untagged]).toEqual([roomWithCall, room]);
-        await call.disconnect();
-        expect(algorithm.getOrderedRooms()[DefaultTagID.Untagged]).toEqual([room, roomWithCall]);
-    });
-});
diff --git a/apps/web/test/unit-tests/stores/room-list/algorithms/RecentAlgorithm-test.ts b/apps/web/test/unit-tests/stores/room-list/algorithms/RecentAlgorithm-test.ts
deleted file mode 100644
index 33adc42129..0000000000
--- a/apps/web/test/unit-tests/stores/room-list/algorithms/RecentAlgorithm-test.ts
+++ /dev/null
@@ -1,177 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { Room, type MatrixClient } from "matrix-js-sdk/src/matrix";
-import { KnownMembership } from "matrix-js-sdk/src/types";
-
-import { mkMessage, mkRoom, stubClient } from "../../../../test-utils";
-import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
-import "../../../../../src/stores/room-list/RoomListStore";
-import { RecentAlgorithm } from "../../../../../src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
-import { makeThreadEvent, mkThread } from "../../../../test-utils/threads";
-import { DefaultTagID } from "../../../../../src/stores/room-list-v3/skip-list/tag";
-
-describe("RecentAlgorithm", () => {
-    let algorithm: RecentAlgorithm;
-    let cli: MatrixClient;
-
-    beforeEach(() => {
-        stubClient();
-        cli = MatrixClientPeg.safeGet();
-        algorithm = new RecentAlgorithm();
-    });
-
-    describe("getLastTs", () => {
-        it("returns the last ts", () => {
-            const room = new Room("room123", cli, "@john:matrix.org");
-
-            const event1 = mkMessage({
-                room: room.roomId,
-                msg: "Hello world!",
-                user: "@alice:matrix.org",
-                ts: 5,
-                event: true,
-            });
-            const event2 = mkMessage({
-                room: room.roomId,
-                msg: "Howdy!",
-                user: "@bob:matrix.org",
-                ts: 10,
-                event: true,
-            });
-
-            room.getMyMembership = () => KnownMembership.Join;
-
-            room.addLiveEvents([event1], { addToState: true });
-            expect(algorithm.getLastTs(room, "@jane:matrix.org")).toBe(5);
-            expect(algorithm.getLastTs(room, "@john:matrix.org")).toBe(5);
-
-            room.addLiveEvents([event2], { addToState: true });
-
-            expect(algorithm.getLastTs(room, "@jane:matrix.org")).toBe(10);
-            expect(algorithm.getLastTs(room, "@john:matrix.org")).toBe(10);
-        });
-
-        it("returns a fake ts for rooms without a timeline", () => {
-            const room = mkRoom(cli, "!new:example.org");
-            // @ts-ignore
-            room.timeline = undefined;
-            expect(algorithm.getLastTs(room, "@john:matrix.org")).toBe(Number.MAX_SAFE_INTEGER);
-        });
-
-        it("works when not a member", () => {
-            const room = mkRoom(cli, "!new:example.org");
-            room.getMyMembership.mockReturnValue(KnownMembership.Invite);
-            expect(algorithm.getLastTs(room, "@john:matrix.org")).toBe(Number.MAX_SAFE_INTEGER);
-        });
-    });
-
-    describe("sortRooms", () => {
-        it("orders rooms per last message ts", () => {
-            const room1 = new Room("room1", cli, "@bob:matrix.org");
-            const room2 = new Room("room2", cli, "@bob:matrix.org");
-
-            room1.getMyMembership = () => KnownMembership.Join;
-            room2.getMyMembership = () => KnownMembership.Join;
-
-            const evt = mkMessage({
-                room: room1.roomId,
-                msg: "Hello world!",
-                user: "@alice:matrix.org",
-                ts: 5,
-                event: true,
-            });
-            const evt2 = mkMessage({
-                room: room2.roomId,
-                msg: "Hello world!",
-                user: "@alice:matrix.org",
-                ts: 2,
-                event: true,
-            });
-
-            room1.addLiveEvents([evt], { addToState: true });
-            room2.addLiveEvents([evt2], { addToState: true });
-
-            expect(algorithm.sortRooms([room2, room1], DefaultTagID.Untagged)).toEqual([room1, room2]);
-        });
-
-        it("orders rooms without messages first", () => {
-            const room1 = new Room("room1", cli, "@bob:matrix.org");
-            const room2 = new Room("room2", cli, "@bob:matrix.org");
-
-            room1.getMyMembership = () => KnownMembership.Join;
-            room2.getMyMembership = () => KnownMembership.Join;
-
-            const evt = mkMessage({
-                room: room1.roomId,
-                msg: "Hello world!",
-                user: "@alice:matrix.org",
-                ts: 5,
-                event: true,
-            });
-
-            room1.addLiveEvents([evt], { addToState: true });
-
-            expect(algorithm.sortRooms([room2, room1], DefaultTagID.Untagged)).toEqual([room2, room1]);
-
-            const { events } = mkThread({
-                room: room1,
-                client: cli,
-                authorId: "@bob:matrix.org",
-                participantUserIds: ["@bob:matrix.org"],
-                ts: 12,
-            });
-
-            room1.addLiveEvents(events, { addToState: true });
-        });
-
-        it("orders rooms based on thread replies too", () => {
-            const room1 = new Room("room1", cli, "@bob:matrix.org");
-            const room2 = new Room("room2", cli, "@bob:matrix.org");
-
-            room1.getMyMembership = () => KnownMembership.Join;
-            room2.getMyMembership = () => KnownMembership.Join;
-
-            const { rootEvent, events: events1 } = mkThread({
-                room: room1,
-                client: cli,
-                authorId: "@bob:matrix.org",
-                participantUserIds: ["@bob:matrix.org"],
-                ts: 12,
-                length: 5,
-            });
-            room1.addLiveEvents(events1, { addToState: true });
-
-            const { events: events2 } = mkThread({
-                room: room2,
-                client: cli,
-                authorId: "@bob:matrix.org",
-                participantUserIds: ["@bob:matrix.org"],
-                ts: 14,
-                length: 10,
-            });
-            room2.addLiveEvents(events2, { addToState: true });
-
-            expect(algorithm.sortRooms([room1, room2], DefaultTagID.Untagged)).toEqual([room2, room1]);
-
-            const threadReply = makeThreadEvent({
-                user: "@bob:matrix.org",
-                room: room1.roomId,
-                event: true,
-                msg: `hello world`,
-                rootEventId: rootEvent.getId()!,
-                replyToEventId: rootEvent.getId()!,
-                // replies are 1ms after each other
-                ts: 50,
-            });
-            room1.addLiveEvents([threadReply], { addToState: true });
-
-            expect(algorithm.sortRooms([room1, room2], DefaultTagID.Untagged)).toEqual([room1, room2]);
-        });
-    });
-});
diff --git a/apps/web/test/unit-tests/stores/room-list/algorithms/list-ordering/ImportanceAlgorithm-test.ts b/apps/web/test/unit-tests/stores/room-list/algorithms/list-ordering/ImportanceAlgorithm-test.ts
deleted file mode 100644
index 5e63dbb831..0000000000
--- a/apps/web/test/unit-tests/stores/room-list/algorithms/list-ordering/ImportanceAlgorithm-test.ts
+++ /dev/null
@@ -1,363 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2023 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { ConditionKind, MatrixEvent, PushRuleActionName, Room, RoomEvent } from "matrix-js-sdk/src/matrix";
-import { logger } from "matrix-js-sdk/src/logger";
-
-import { RoomNotificationStateStore } from "../../../../../../src/stores/notifications/RoomNotificationStateStore";
-import { ImportanceAlgorithm } from "../../../../../../src/stores/room-list/algorithms/list-ordering/ImportanceAlgorithm";
-import { SortAlgorithm } from "../../../../../../src/stores/room-list/algorithms/models";
-import * as RoomNotifs from "../../../../../../src/RoomNotifs";
-import { DefaultTagID } from "../../../../../../src/stores/room-list-v3/skip-list/tag";
-import { RoomUpdateCause } from "../../../../../../src/stores/room-list/models";
-import { NotificationLevel } from "../../../../../../src/stores/notifications/NotificationLevel";
-import { AlphabeticAlgorithm } from "../../../../../../src/stores/room-list/algorithms/tag-sorting/AlphabeticAlgorithm";
-import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../../../test-utils";
-import { RecentAlgorithm } from "../../../../../../src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
-import { DEFAULT_PUSH_RULES, makePushRule } from "../../../../../test-utils/pushRules";
-
-describe("ImportanceAlgorithm", () => {
-    const userId = "@alice:server.org";
-    const tagId = DefaultTagID.Favourite;
-
-    const makeRoom = (id: string, name: string, order?: number): Room => {
-        const room = new Room(id, client, userId);
-        room.name = name;
-        const tagEvent = new MatrixEvent({
-            type: "m.tag",
-            content: {
-                tags: {
-                    [tagId]: {
-                        order,
-                    },
-                },
-            },
-        });
-        room.addTags(tagEvent);
-        return room;
-    };
-
-    const client = getMockClientWithEventEmitter({
-        ...mockClientMethodsUser(userId),
-    });
-    const roomA = makeRoom("!aaa:server.org", "Alpha", 2);
-    const roomB = makeRoom("!bbb:server.org", "Bravo", 5);
-    const roomC = makeRoom("!ccc:server.org", "Charlie", 1);
-    const roomD = makeRoom("!ddd:server.org", "Delta", 4);
-    const roomE = makeRoom("!eee:server.org", "Echo", 3);
-    const roomX = makeRoom("!xxx:server.org", "Xylophone", 99);
-
-    const muteRoomARule = makePushRule(roomA.roomId, {
-        actions: [PushRuleActionName.DontNotify],
-        conditions: [{ kind: ConditionKind.EventMatch, key: "room_id", pattern: roomA.roomId }],
-    });
-    const muteRoomBRule = makePushRule(roomB.roomId, {
-        actions: [PushRuleActionName.DontNotify],
-        conditions: [{ kind: ConditionKind.EventMatch, key: "room_id", pattern: roomB.roomId }],
-    });
-    client.pushRules = {
-        global: {
-            ...DEFAULT_PUSH_RULES.global,
-            override: [...DEFAULT_PUSH_RULES.global.override!, muteRoomARule, muteRoomBRule],
-        },
-    };
-
-    const unreadStates: Record<string, ReturnType<(typeof RoomNotifs)["determineUnreadState"]>> = {
-        red: { symbol: null, count: 1, level: NotificationLevel.Highlight, invited: false },
-        grey: { symbol: null, count: 1, level: NotificationLevel.Notification, invited: false },
-        none: { symbol: null, count: 0, level: NotificationLevel.None, invited: false },
-    };
-
-    beforeEach(() => {
-        jest.spyOn(RoomNotifs, "determineUnreadState").mockReturnValue({
-            symbol: null,
-            count: 0,
-            level: NotificationLevel.None,
-            invited: false,
-        });
-    });
-
-    const setupAlgorithm = (sortAlgorithm: SortAlgorithm, rooms?: Room[]) => {
-        const algorithm = new ImportanceAlgorithm(tagId, sortAlgorithm);
-        algorithm.setRooms(rooms || [roomA, roomB, roomC]);
-        return algorithm;
-    };
-
-    describe("When sortAlgorithm is alphabetical", () => {
-        const sortAlgorithm = SortAlgorithm.Alphabetic;
-
-        beforeEach(async () => {
-            // destroy roomMap so we can start fresh
-            // @ts-ignore private property
-            RoomNotificationStateStore.instance.roomMap = new Map<Room, RoomNotificationState>();
-
-            jest.spyOn(AlphabeticAlgorithm.prototype, "sortRooms").mockClear();
-            jest.spyOn(RoomNotifs, "determineUnreadState")
-                .mockClear()
-                .mockImplementation((room) => {
-                    switch (room) {
-                        // b and e have red notifs
-                        case roomB:
-                        case roomE:
-                            return unreadStates.red;
-                        // c is grey
-                        case roomC:
-                            return unreadStates.grey;
-                        default:
-                            return unreadStates.none;
-                    }
-                });
-        });
-
-        it("orders rooms by alpha when they have the same notif state", () => {
-            jest.spyOn(RoomNotifs, "determineUnreadState").mockReturnValue({
-                symbol: null,
-                count: 0,
-                level: NotificationLevel.None,
-                invited: false,
-            });
-            const algorithm = setupAlgorithm(sortAlgorithm);
-
-            // sorted according to alpha
-            expect(algorithm.orderedRooms).toEqual([roomA, roomB, roomC]);
-        });
-
-        it("orders rooms by notification state then alpha", () => {
-            const algorithm = setupAlgorithm(sortAlgorithm, [roomC, roomB, roomE, roomD, roomA]);
-
-            expect(algorithm.orderedRooms).toEqual([
-                // alpha within red
-                roomB,
-                roomE,
-                // grey
-                roomC,
-                // alpha within none
-                roomA,
-                roomD,
-            ]);
-        });
-
-        describe("handleRoomUpdate", () => {
-            it("removes a room", () => {
-                const algorithm = setupAlgorithm(sortAlgorithm);
-                jest.spyOn(AlphabeticAlgorithm.prototype, "sortRooms").mockClear();
-
-                const shouldTriggerUpdate = algorithm.handleRoomUpdate(roomA, RoomUpdateCause.RoomRemoved);
-
-                expect(shouldTriggerUpdate).toBe(true);
-                expect(algorithm.orderedRooms).toEqual([roomB, roomC]);
-                // no re-sorting on a remove
-                expect(AlphabeticAlgorithm.prototype.sortRooms).not.toHaveBeenCalled();
-            });
-
-            it("warns and returns without change when removing a room that is not indexed", () => {
-                jest.spyOn(logger, "warn").mockReturnValue(undefined);
-                const algorithm = setupAlgorithm(sortAlgorithm);
-
-                const shouldTriggerUpdate = algorithm.handleRoomUpdate(roomD, RoomUpdateCause.RoomRemoved);
-
-                expect(shouldTriggerUpdate).toBe(false);
-                expect(logger.warn).toHaveBeenCalledWith(`Tried to remove unknown room from ${tagId}: ${roomD.roomId}`);
-            });
-
-            it("adds a new room", () => {
-                const algorithm = setupAlgorithm(sortAlgorithm);
-                jest.spyOn(AlphabeticAlgorithm.prototype, "sortRooms").mockClear();
-
-                const shouldTriggerUpdate = algorithm.handleRoomUpdate(roomE, RoomUpdateCause.NewRoom);
-
-                expect(shouldTriggerUpdate).toBe(true);
-                // inserted according to notif state
-                expect(algorithm.orderedRooms).toEqual([roomB, roomE, roomC, roomA]);
-                // only sorted within category
-                expect(AlphabeticAlgorithm.prototype.sortRooms).toHaveBeenCalledWith([roomB, roomE], tagId);
-            });
-
-            it("throws for an unhandled update cause", () => {
-                const algorithm = setupAlgorithm(sortAlgorithm);
-
-                expect(() =>
-                    algorithm.handleRoomUpdate(roomA, "something unexpected" as unknown as RoomUpdateCause),
-                ).toThrow("Unsupported update cause: something unexpected");
-            });
-
-            it("ignores a mute change", () => {
-                // muted rooms are not pushed to the bottom when sort is alpha
-                const algorithm = setupAlgorithm(sortAlgorithm, [roomC, roomB, roomE, roomD, roomA]);
-                jest.spyOn(AlphabeticAlgorithm.prototype, "sortRooms").mockClear();
-
-                const shouldTriggerUpdate = algorithm.handleRoomUpdate(roomE, RoomUpdateCause.PossibleMuteChange);
-
-                expect(shouldTriggerUpdate).toBe(false);
-                // no sorting
-                expect(AlphabeticAlgorithm.prototype.sortRooms).not.toHaveBeenCalled();
-            });
-
-            describe("time and read receipt updates", () => {
-                it("throws for when a room is not indexed", () => {
-                    const algorithm = setupAlgorithm(sortAlgorithm, [roomC, roomB, roomE, roomD, roomA]);
-
-                    expect(() => algorithm.handleRoomUpdate(roomX, RoomUpdateCause.Timeline)).toThrow(
-                        `Room ${roomX.roomId} has no index in ${tagId}`,
-                    );
-                });
-
-                it("re-sorts category when updated room has not changed category", () => {
-                    const algorithm = setupAlgorithm(sortAlgorithm, [roomC, roomB, roomE, roomD, roomA]);
-                    jest.spyOn(AlphabeticAlgorithm.prototype, "sortRooms").mockClear();
-
-                    const shouldTriggerUpdate = algorithm.handleRoomUpdate(roomE, RoomUpdateCause.Timeline);
-
-                    expect(shouldTriggerUpdate).toBe(true);
-                    expect(algorithm.orderedRooms).toEqual([roomB, roomE, roomC, roomA, roomD]);
-                    // only sorted within category
-                    expect(AlphabeticAlgorithm.prototype.sortRooms).toHaveBeenCalledTimes(1);
-                    expect(AlphabeticAlgorithm.prototype.sortRooms).toHaveBeenCalledWith([roomB, roomE], tagId);
-                });
-
-                it("re-sorts category when updated room has changed category", () => {
-                    const algorithm = setupAlgorithm(sortAlgorithm, [roomC, roomB, roomE, roomD, roomA]);
-                    jest.spyOn(AlphabeticAlgorithm.prototype, "sortRooms").mockClear();
-
-                    // change roomE to unreadState.none
-                    jest.spyOn(RoomNotifs, "determineUnreadState").mockImplementation((room) => {
-                        switch (room) {
-                            // b and e have red notifs
-                            case roomB:
-                                return unreadStates.red;
-                            // c is grey
-                            case roomC:
-                                return unreadStates.grey;
-                            case roomE:
-                            default:
-                                return unreadStates.none;
-                        }
-                    });
-                    // @ts-ignore don't bother mocking rest of emit properties
-                    roomE.emit(RoomEvent.Timeline, new MatrixEvent({ type: "whatever", room_id: roomE.roomId }));
-
-                    const shouldTriggerUpdate = algorithm.handleRoomUpdate(roomE, RoomUpdateCause.Timeline);
-
-                    expect(shouldTriggerUpdate).toBe(true);
-                    expect(algorithm.orderedRooms).toEqual([roomB, roomC, roomA, roomD, roomE]);
-
-                    // only sorted within roomE's new category
-                    expect(AlphabeticAlgorithm.prototype.sortRooms).toHaveBeenCalledTimes(1);
-                    expect(AlphabeticAlgorithm.prototype.sortRooms).toHaveBeenCalledWith([roomA, roomD, roomE], tagId);
-                });
-            });
-        });
-    });
-
-    describe("When sortAlgorithm is recent", () => {
-        const sortAlgorithm = SortAlgorithm.Recent;
-
-        // mock recent algorithm sorting
-        const fakeRecentOrder = [roomC, roomB, roomE, roomD, roomA];
-
-        beforeEach(async () => {
-            // destroy roomMap so we can start fresh
-            // @ts-ignore private property
-            RoomNotificationStateStore.instance.roomMap = new Map<Room, RoomNotificationState>();
-
-            jest.spyOn(RecentAlgorithm.prototype, "sortRooms")
-                .mockClear()
-                .mockImplementation((rooms: Room[]) =>
-                    fakeRecentOrder.filter((sortedRoom) => rooms.includes(sortedRoom)),
-                );
-            jest.spyOn(RoomNotifs, "determineUnreadState")
-                .mockClear()
-                .mockImplementation((room) => {
-                    switch (room) {
-                        // b, c and e have red notifs
-                        case roomB:
-                        case roomE:
-                        case roomC:
-                            return unreadStates.red;
-                        default:
-                            return unreadStates.none;
-                    }
-                });
-        });
-
-        it("orders rooms by recent when they have the same notif state", () => {
-            jest.spyOn(RoomNotifs, "determineUnreadState").mockReturnValue({
-                symbol: null,
-                count: 0,
-                level: NotificationLevel.None,
-                invited: false,
-            });
-            const algorithm = setupAlgorithm(sortAlgorithm);
-
-            // sorted according to recent
-            expect(algorithm.orderedRooms).toEqual([roomC, roomB, roomA]);
-        });
-
-        it("orders rooms by notification state then recent", () => {
-            const algorithm = setupAlgorithm(sortAlgorithm, [roomC, roomB, roomE, roomD, roomA]);
-
-            expect(algorithm.orderedRooms).toEqual([
-                // recent within red
-                roomC,
-                roomE,
-                // recent within none
-                roomD,
-                // muted
-                roomB,
-                roomA,
-            ]);
-        });
-
-        describe("handleRoomUpdate", () => {
-            it("removes a room", () => {
-                const algorithm = setupAlgorithm(sortAlgorithm);
-                jest.spyOn(RecentAlgorithm.prototype, "sortRooms").mockClear();
-
-                const shouldTriggerUpdate = algorithm.handleRoomUpdate(roomA, RoomUpdateCause.RoomRemoved);
-
-                expect(shouldTriggerUpdate).toBe(true);
-                expect(algorithm.orderedRooms).toEqual([roomC, roomB]);
-                // no re-sorting on a remove
-                expect(RecentAlgorithm.prototype.sortRooms).not.toHaveBeenCalled();
-            });
-
-            it("warns and returns without change when removing a room that is not indexed", () => {
-                jest.spyOn(logger, "warn").mockReturnValue(undefined);
-                const algorithm = setupAlgorithm(sortAlgorithm);
-
-                const shouldTriggerUpdate = algorithm.handleRoomUpdate(roomD, RoomUpdateCause.RoomRemoved);
-
-                expect(shouldTriggerUpdate).toBe(false);
-                expect(logger.warn).toHaveBeenCalledWith(`Tried to remove unknown room from ${tagId}: ${roomD.roomId}`);
-            });
-
-            it("adds a new room", () => {
-                const algorithm = setupAlgorithm(sortAlgorithm);
-                jest.spyOn(RecentAlgorithm.prototype, "sortRooms").mockClear();
-
-                const shouldTriggerUpdate = algorithm.handleRoomUpdate(roomE, RoomUpdateCause.NewRoom);
-
-                expect(shouldTriggerUpdate).toBe(true);
-                // inserted according to notif state and mute
-                expect(algorithm.orderedRooms).toEqual([roomC, roomE, roomB, roomA]);
-                // only sorted within category
-                expect(RecentAlgorithm.prototype.sortRooms).toHaveBeenCalledWith([roomE, roomC], tagId);
-            });
-
-            it("re-sorts on a mute change", () => {
-                const algorithm = setupAlgorithm(sortAlgorithm, [roomC, roomB, roomE, roomD, roomA]);
-                jest.spyOn(RecentAlgorithm.prototype, "sortRooms").mockClear();
-
-                const shouldTriggerUpdate = algorithm.handleRoomUpdate(roomE, RoomUpdateCause.PossibleMuteChange);
-
-                expect(shouldTriggerUpdate).toBe(true);
-                expect(RecentAlgorithm.prototype.sortRooms).toHaveBeenCalledWith([roomC, roomE], tagId);
-            });
-        });
-    });
-});
diff --git a/apps/web/test/unit-tests/stores/room-list/algorithms/list-ordering/NaturalAlgorithm-test.ts b/apps/web/test/unit-tests/stores/room-list/algorithms/list-ordering/NaturalAlgorithm-test.ts
deleted file mode 100644
index dd6a292841..0000000000
--- a/apps/web/test/unit-tests/stores/room-list/algorithms/list-ordering/NaturalAlgorithm-test.ts
+++ /dev/null
@@ -1,282 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2023 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { ConditionKind, EventType, MatrixEvent, PushRuleActionName, Room, ClientEvent } from "matrix-js-sdk/src/matrix";
-import { logger } from "matrix-js-sdk/src/logger";
-
-import { NaturalAlgorithm } from "../../../../../../src/stores/room-list/algorithms/list-ordering/NaturalAlgorithm";
-import { SortAlgorithm } from "../../../../../../src/stores/room-list/algorithms/models";
-import { DefaultTagID } from "../../../../../../src/stores/room-list-v3/skip-list/tag";
-import { RoomUpdateCause } from "../../../../../../src/stores/room-list/models";
-import { AlphabeticAlgorithm } from "../../../../../../src/stores/room-list/algorithms/tag-sorting/AlphabeticAlgorithm";
-import { RecentAlgorithm } from "../../../../../../src/stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
-import { RoomNotificationStateStore } from "../../../../../../src/stores/notifications/RoomNotificationStateStore";
-import * as RoomNotifs from "../../../../../../src/RoomNotifs";
-import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../../../test-utils";
-import { DEFAULT_PUSH_RULES, makePushRule } from "../../../../../test-utils/pushRules";
-import { NotificationLevel } from "../../../../../../src/stores/notifications/NotificationLevel";
-
-describe("NaturalAlgorithm", () => {
-    const userId = "@alice:server.org";
-    const tagId = DefaultTagID.Favourite;
-
-    const makeRoom = (id: string, name: string): Room => {
-        const room = new Room(id, client, userId);
-        room.name = name;
-        return room;
-    };
-
-    const client = getMockClientWithEventEmitter({
-        ...mockClientMethodsUser(userId),
-    });
-    const roomA = makeRoom("!aaa:server.org", "Alpha");
-    const roomB = makeRoom("!bbb:server.org", "Bravo");
-    const roomC = makeRoom("!ccc:server.org", "Charlie");
-    const roomD = makeRoom("!ddd:server.org", "Delta");
-    const roomE = makeRoom("!eee:server.org", "Echo");
-    const roomX = makeRoom("!xxx:server.org", "Xylophone");
-
-    const muteRoomARule = makePushRule(roomA.roomId, {
-        actions: [PushRuleActionName.DontNotify],
-        conditions: [{ kind: ConditionKind.EventMatch, key: "room_id", pattern: roomA.roomId }],
-    });
-    const muteRoomDRule = makePushRule(roomD.roomId, {
-        actions: [PushRuleActionName.DontNotify],
-        conditions: [{ kind: ConditionKind.EventMatch, key: "room_id", pattern: roomD.roomId }],
-    });
-    client.pushRules = {
-        global: {
-            ...DEFAULT_PUSH_RULES.global,
-            override: [...DEFAULT_PUSH_RULES.global!.override!, muteRoomARule, muteRoomDRule],
-        },
-    };
-
-    const setupAlgorithm = (sortAlgorithm: SortAlgorithm, rooms?: Room[]) => {
-        const algorithm = new NaturalAlgorithm(tagId, sortAlgorithm);
-        algorithm.setRooms(rooms || [roomA, roomB, roomC]);
-        return algorithm;
-    };
-
-    describe("When sortAlgorithm is alphabetical", () => {
-        const sortAlgorithm = SortAlgorithm.Alphabetic;
-
-        beforeEach(async () => {
-            jest.spyOn(AlphabeticAlgorithm.prototype, "sortRooms").mockClear();
-        });
-
-        it("orders rooms by alpha", () => {
-            const algorithm = setupAlgorithm(sortAlgorithm);
-
-            // sorted according to alpha
-            expect(algorithm.orderedRooms).toEqual([roomA, roomB, roomC]);
-        });
-
-        describe("handleRoomUpdate", () => {
-            it("removes a room", () => {
-                const algorithm = setupAlgorithm(sortAlgorithm);
-                jest.spyOn(AlphabeticAlgorithm.prototype, "sortRooms").mockClear();
-
-                const shouldTriggerUpdate = algorithm.handleRoomUpdate(roomA, RoomUpdateCause.RoomRemoved);
-
-                expect(shouldTriggerUpdate).toBe(true);
-                expect(algorithm.orderedRooms).toEqual([roomB, roomC]);
-            });
-
-            it("warns when removing a room that is not indexed", () => {
-                jest.spyOn(logger, "warn").mockReturnValue(undefined);
-                const algorithm = setupAlgorithm(sortAlgorithm);
-
-                const shouldTriggerUpdate = algorithm.handleRoomUpdate(roomD, RoomUpdateCause.RoomRemoved);
-
-                expect(shouldTriggerUpdate).toBe(false);
-                expect(logger.warn).toHaveBeenCalledWith(`Tried to remove unknown room from ${tagId}: ${roomD.roomId}`);
-            });
-
-            it("adds a new room", () => {
-                const algorithm = setupAlgorithm(sortAlgorithm);
-                jest.spyOn(AlphabeticAlgorithm.prototype, "sortRooms").mockClear();
-
-                const shouldTriggerUpdate = algorithm.handleRoomUpdate(roomE, RoomUpdateCause.NewRoom);
-
-                expect(shouldTriggerUpdate).toBe(true);
-                expect(algorithm.orderedRooms).toEqual([roomA, roomB, roomC, roomE]);
-                // only sorted within category
-                expect(AlphabeticAlgorithm.prototype.sortRooms).toHaveBeenCalledWith(
-                    [roomA, roomB, roomC, roomE],
-                    tagId,
-                );
-            });
-
-            it("adds a new muted room", () => {
-                const algorithm = setupAlgorithm(sortAlgorithm, [roomA, roomB, roomE]);
-                jest.spyOn(AlphabeticAlgorithm.prototype, "sortRooms").mockClear();
-
-                const shouldTriggerUpdate = algorithm.handleRoomUpdate(roomD, RoomUpdateCause.NewRoom);
-
-                expect(shouldTriggerUpdate).toBe(true);
-                // muted room mixed in main category
-                expect(algorithm.orderedRooms).toEqual([roomA, roomB, roomD, roomE]);
-                // only sorted within category
-                expect(AlphabeticAlgorithm.prototype.sortRooms).toHaveBeenCalledTimes(1);
-            });
-
-            it("ignores a mute change update", () => {
-                const algorithm = setupAlgorithm(sortAlgorithm);
-                jest.spyOn(AlphabeticAlgorithm.prototype, "sortRooms").mockClear();
-
-                const shouldTriggerUpdate = algorithm.handleRoomUpdate(roomA, RoomUpdateCause.PossibleMuteChange);
-
-                expect(shouldTriggerUpdate).toBe(false);
-                expect(AlphabeticAlgorithm.prototype.sortRooms).not.toHaveBeenCalled();
-            });
-
-            it("throws for an unhandled update cause", () => {
-                const algorithm = setupAlgorithm(sortAlgorithm);
-
-                expect(() =>
-                    algorithm.handleRoomUpdate(roomA, "something unexpected" as unknown as RoomUpdateCause),
-                ).toThrow("Unsupported update cause: something unexpected");
-            });
-
-            describe("time and read receipt updates", () => {
-                it("handles when a room is not indexed", () => {
-                    const algorithm = setupAlgorithm(sortAlgorithm);
-
-                    const shouldTriggerUpdate = algorithm.handleRoomUpdate(roomX, RoomUpdateCause.Timeline);
-
-                    // for better or worse natural alg sets this to true
-                    expect(shouldTriggerUpdate).toBe(true);
-                    expect(algorithm.orderedRooms).toEqual([roomA, roomB, roomC]);
-                });
-
-                it("re-sorts rooms when timeline updates", () => {
-                    const algorithm = setupAlgorithm(sortAlgorithm);
-                    jest.spyOn(AlphabeticAlgorithm.prototype, "sortRooms").mockClear();
-
-                    const shouldTriggerUpdate = algorithm.handleRoomUpdate(roomA, RoomUpdateCause.Timeline);
-
-                    expect(shouldTriggerUpdate).toBe(true);
-                    expect(algorithm.orderedRooms).toEqual([roomA, roomB, roomC]);
-                    // only sorted within category
-                    expect(AlphabeticAlgorithm.prototype.sortRooms).toHaveBeenCalledTimes(1);
-                    expect(AlphabeticAlgorithm.prototype.sortRooms).toHaveBeenCalledWith([roomA, roomB, roomC], tagId);
-                });
-            });
-        });
-    });
-
-    describe("When sortAlgorithm is recent", () => {
-        const sortAlgorithm = SortAlgorithm.Recent;
-
-        // mock recent algorithm sorting
-        const fakeRecentOrder = [roomC, roomA, roomB, roomD, roomE];
-
-        beforeEach(async () => {
-            // destroy roomMap so we can start fresh
-            // @ts-ignore private property
-            RoomNotificationStateStore.instance.roomMap = new Map<Room, RoomNotificationState>();
-
-            jest.spyOn(RecentAlgorithm.prototype, "sortRooms")
-                .mockClear()
-                .mockImplementation((rooms: Room[]) =>
-                    fakeRecentOrder.filter((sortedRoom) => rooms.includes(sortedRoom)),
-                );
-
-            jest.spyOn(RoomNotifs, "determineUnreadState").mockReturnValue({
-                symbol: null,
-                count: 0,
-                level: NotificationLevel.None,
-                invited: false,
-            });
-        });
-
-        it("orders rooms by recent with muted rooms to the bottom", () => {
-            const algorithm = setupAlgorithm(sortAlgorithm);
-
-            // sorted according to recent
-            expect(algorithm.orderedRooms).toEqual([roomC, roomB, roomA]);
-        });
-
-        describe("handleRoomUpdate", () => {
-            it("removes a room", () => {
-                const algorithm = setupAlgorithm(sortAlgorithm);
-                jest.spyOn(RecentAlgorithm.prototype, "sortRooms").mockClear();
-
-                const shouldTriggerUpdate = algorithm.handleRoomUpdate(roomA, RoomUpdateCause.RoomRemoved);
-
-                expect(shouldTriggerUpdate).toBe(true);
-                expect(algorithm.orderedRooms).toEqual([roomC, roomB]);
-                // no re-sorting on a remove
-                expect(RecentAlgorithm.prototype.sortRooms).not.toHaveBeenCalled();
-            });
-
-            it("warns and returns without change when removing a room that is not indexed", () => {
-                jest.spyOn(logger, "warn").mockReturnValue(undefined);
-                const algorithm = setupAlgorithm(sortAlgorithm);
-
-                const shouldTriggerUpdate = algorithm.handleRoomUpdate(roomD, RoomUpdateCause.RoomRemoved);
-
-                expect(shouldTriggerUpdate).toBe(false);
-                expect(logger.warn).toHaveBeenCalledWith(`Tried to remove unknown room from ${tagId}: ${roomD.roomId}`);
-            });
-
-            it("adds a new room", () => {
-                const algorithm = setupAlgorithm(sortAlgorithm);
-                jest.spyOn(RecentAlgorithm.prototype, "sortRooms").mockClear();
-
-                const shouldTriggerUpdate = algorithm.handleRoomUpdate(roomE, RoomUpdateCause.NewRoom);
-
-                expect(shouldTriggerUpdate).toBe(true);
-                // inserted according to mute then recentness
-                expect(algorithm.orderedRooms).toEqual([roomC, roomB, roomE, roomA]);
-                // only sorted within category, muted roomA is not resorted
-                expect(RecentAlgorithm.prototype.sortRooms).toHaveBeenCalledWith([roomC, roomB, roomE], tagId);
-            });
-
-            it("does not re-sort on possible mute change when room did not change effective mutedness", () => {
-                const algorithm = setupAlgorithm(sortAlgorithm, [roomC, roomB, roomE, roomD, roomA]);
-                jest.spyOn(RecentAlgorithm.prototype, "sortRooms").mockClear();
-
-                const shouldTriggerUpdate = algorithm.handleRoomUpdate(roomE, RoomUpdateCause.PossibleMuteChange);
-
-                expect(shouldTriggerUpdate).toBe(false);
-                expect(RecentAlgorithm.prototype.sortRooms).not.toHaveBeenCalled();
-            });
-
-            it("re-sorts on a mute change", () => {
-                const algorithm = setupAlgorithm(sortAlgorithm, [roomC, roomB, roomE, roomD, roomA]);
-                jest.spyOn(RecentAlgorithm.prototype, "sortRooms").mockClear();
-
-                // mute roomE
-                const muteRoomERule = makePushRule(roomE.roomId, {
-                    actions: [PushRuleActionName.DontNotify],
-                    conditions: [{ kind: ConditionKind.EventMatch, key: "room_id", pattern: roomE.roomId }],
-                });
-                const pushRulesEvent = new MatrixEvent({ type: EventType.PushRules });
-                client.pushRules!.global!.override!.push(muteRoomERule);
-                client.emit(ClientEvent.AccountData, pushRulesEvent);
-
-                const shouldTriggerUpdate = algorithm.handleRoomUpdate(roomE, RoomUpdateCause.PossibleMuteChange);
-
-                expect(shouldTriggerUpdate).toBe(true);
-                expect(algorithm.orderedRooms).toEqual([
-                    // unmuted, sorted by recent
-                    roomC,
-                    roomB,
-                    // muted, sorted by recent
-                    roomA,
-                    roomD,
-                    roomE,
-                ]);
-                // only sorted muted category
-                expect(RecentAlgorithm.prototype.sortRooms).toHaveBeenCalledTimes(1);
-                expect(RecentAlgorithm.prototype.sortRooms).toHaveBeenCalledWith([roomA, roomD, roomE], tagId);
-            });
-        });
-    });
-});
diff --git a/apps/web/test/unit-tests/stores/room-list/filters/SpaceFilterCondition-test.ts b/apps/web/test/unit-tests/stores/room-list/filters/SpaceFilterCondition-test.ts
deleted file mode 100644
index 915094c844..0000000000
--- a/apps/web/test/unit-tests/stores/room-list/filters/SpaceFilterCondition-test.ts
+++ /dev/null
@@ -1,198 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { mocked } from "jest-mock";
-import { type Room } from "matrix-js-sdk/src/matrix";
-
-import SettingsStore from "../../../../../src/settings/SettingsStore";
-import { FILTER_CHANGED } from "../../../../../src/stores/room-list/filters/IFilterCondition";
-import { SpaceFilterCondition } from "../../../../../src/stores/room-list/filters/SpaceFilterCondition";
-import { MetaSpace, type SpaceKey } from "../../../../../src/stores/spaces";
-import SpaceStore from "../../../../../src/stores/spaces/SpaceStore";
-
-jest.mock("../../../../../src/settings/SettingsStore");
-jest.mock("../../../../../src/stores/spaces/SpaceStore", () => {
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    const EventEmitter = require("events");
-    class MockSpaceStore extends EventEmitter {
-        isRoomInSpace = jest.fn();
-        getSpaceFilteredUserIds = jest.fn().mockReturnValue(new Set<string>([]));
-        getSpaceFilteredRoomIds = jest.fn().mockReturnValue(new Set<string>([]));
-    }
-    return { instance: new MockSpaceStore() };
-});
-
-const SettingsStoreMock = mocked(SettingsStore);
-const SpaceStoreInstanceMock = mocked(SpaceStore.instance);
-
-jest.useFakeTimers();
-
-describe("SpaceFilterCondition", () => {
-    const space1 = "!space1:server";
-    const space2 = "!space2:server";
-    const room1Id = "!r1:server";
-    const room2Id = "!r2:server";
-    const room3Id = "!r3:server";
-    const user1Id = "@u1:server";
-    const user2Id = "@u2:server";
-    const user3Id = "@u3:server";
-    const makeMockGetValue =
-        (settings: Record<string, any> = {}) =>
-        (settingName: string, space: SpaceKey) =>
-            settings[settingName]?.[space] || false;
-
-    beforeEach(() => {
-        jest.resetAllMocks();
-        SettingsStoreMock.getValue.mockClear().mockImplementation(makeMockGetValue());
-        SpaceStoreInstanceMock.getSpaceFilteredUserIds.mockReturnValue(new Set([]));
-        SpaceStoreInstanceMock.isRoomInSpace.mockReturnValue(true);
-    });
-
-    const initFilter = (space: SpaceKey): SpaceFilterCondition => {
-        const filter = new SpaceFilterCondition();
-        filter.updateSpace(space);
-        jest.runOnlyPendingTimers();
-        return filter;
-    };
-
-    describe("isVisible", () => {
-        const room1 = { roomId: room1Id } as unknown as Room;
-        it("calls isRoomInSpace correctly", () => {
-            const filter = initFilter(space1);
-
-            expect(filter.isVisible(room1)).toEqual(true);
-            expect(SpaceStoreInstanceMock.isRoomInSpace).toHaveBeenCalledWith(space1, room1Id);
-        });
-    });
-
-    describe("onStoreUpdate", () => {
-        it("emits filter changed event when updateSpace is called even without changes", async () => {
-            const filter = new SpaceFilterCondition();
-            const emitSpy = jest.spyOn(filter, "emit");
-            filter.updateSpace(space1);
-            jest.runOnlyPendingTimers();
-            expect(emitSpy).toHaveBeenCalledWith(FILTER_CHANGED);
-        });
-
-        describe("showPeopleInSpace setting", () => {
-            it("emits filter changed event when setting changes", async () => {
-                // init filter with setting true for space1
-                SettingsStoreMock.getValue.mockImplementation(
-                    makeMockGetValue({
-                        ["Spaces.showPeopleInSpace"]: { [space1]: true },
-                    }),
-                );
-                const filter = initFilter(space1);
-                const emitSpy = jest.spyOn(filter, "emit");
-
-                SettingsStoreMock.getValue.mockClear().mockImplementation(
-                    makeMockGetValue({
-                        ["Spaces.showPeopleInSpace"]: { [space1]: false },
-                    }),
-                );
-
-                SpaceStoreInstanceMock.emit(space1);
-                jest.runOnlyPendingTimers();
-                expect(emitSpy).toHaveBeenCalledWith(FILTER_CHANGED);
-            });
-
-            it("emits filter changed event when setting is false and space changes to a meta space", async () => {
-                // init filter with setting true for space1
-                SettingsStoreMock.getValue.mockImplementation(
-                    makeMockGetValue({
-                        ["Spaces.showPeopleInSpace"]: { [space1]: false },
-                    }),
-                );
-                const filter = initFilter(space1);
-                const emitSpy = jest.spyOn(filter, "emit");
-
-                filter.updateSpace(MetaSpace.Home);
-                jest.runOnlyPendingTimers();
-                expect(emitSpy).toHaveBeenCalledWith(FILTER_CHANGED);
-            });
-        });
-
-        it("does not emit filter changed event on store update when nothing changed", async () => {
-            const filter = initFilter(space1);
-            const emitSpy = jest.spyOn(filter, "emit");
-            SpaceStoreInstanceMock.emit(space1);
-            jest.runOnlyPendingTimers();
-            expect(emitSpy).not.toHaveBeenCalledWith(FILTER_CHANGED);
-        });
-
-        it("removes listener when updateSpace is called", async () => {
-            const filter = initFilter(space1);
-            filter.updateSpace(space2);
-            jest.runOnlyPendingTimers();
-            const emitSpy = jest.spyOn(filter, "emit");
-
-            // update mock so filter would emit change if it was listening to space1
-            SpaceStoreInstanceMock.getSpaceFilteredRoomIds.mockReturnValue(new Set([room1Id]));
-            SpaceStoreInstanceMock.emit(space1);
-            jest.runOnlyPendingTimers();
-            // no filter changed event
-            expect(emitSpy).not.toHaveBeenCalledWith(FILTER_CHANGED);
-        });
-
-        it("removes listener when destroy is called", async () => {
-            const filter = initFilter(space1);
-            filter.destroy();
-            jest.runOnlyPendingTimers();
-            const emitSpy = jest.spyOn(filter, "emit");
-
-            // update mock so filter would emit change if it was listening to space1
-            SpaceStoreInstanceMock.getSpaceFilteredRoomIds.mockReturnValue(new Set([room1Id]));
-            SpaceStoreInstanceMock.emit(space1);
-            jest.runOnlyPendingTimers();
-            // no filter changed event
-            expect(emitSpy).not.toHaveBeenCalledWith(FILTER_CHANGED);
-        });
-
-        describe("when directChildRoomIds change", () => {
-            beforeEach(() => {
-                SpaceStoreInstanceMock.getSpaceFilteredRoomIds.mockReturnValue(new Set([room1Id, room2Id]));
-            });
-            const filterChangedCases = [
-                ["room added", [room1Id, room2Id, room3Id]],
-                ["room removed", [room1Id]],
-                ["room swapped", [room1Id, room3Id]], // same number of rooms with changes
-            ];
-
-            it.each(filterChangedCases)("%s", (_d, rooms) => {
-                const filter = initFilter(space1);
-                const emitSpy = jest.spyOn(filter, "emit");
-
-                SpaceStoreInstanceMock.getSpaceFilteredRoomIds.mockReturnValue(new Set(rooms));
-                SpaceStoreInstanceMock.emit(space1);
-                jest.runOnlyPendingTimers();
-                expect(emitSpy).toHaveBeenCalledWith(FILTER_CHANGED);
-            });
-        });
-
-        describe("when user ids change", () => {
-            beforeEach(() => {
-                SpaceStoreInstanceMock.getSpaceFilteredUserIds.mockReturnValue(new Set([user1Id, user2Id]));
-            });
-            const filterChangedCases = [
-                ["user added", [user1Id, user2Id, user3Id]],
-                ["user removed", [user1Id]],
-                ["user swapped", [user1Id, user3Id]], // same number of rooms with changes
-            ];
-
-            it.each(filterChangedCases)("%s", (_d, rooms) => {
-                const filter = initFilter(space1);
-                const emitSpy = jest.spyOn(filter, "emit");
-
-                SpaceStoreInstanceMock.getSpaceFilteredUserIds.mockReturnValue(new Set(rooms));
-                SpaceStoreInstanceMock.emit(space1);
-                jest.runOnlyPendingTimers();
-                expect(emitSpy).toHaveBeenCalledWith(FILTER_CHANGED);
-            });
-        });
-    });
-});
diff --git a/apps/web/test/unit-tests/stores/widgets/ElementWidgetDriver-test.ts b/apps/web/test/unit-tests/stores/widgets/ElementWidgetDriver-test.ts
index 2e86fd196c..2824dbc9c4 100644
--- a/apps/web/test/unit-tests/stores/widgets/ElementWidgetDriver-test.ts
+++ b/apps/web/test/unit-tests/stores/widgets/ElementWidgetDriver-test.ts
@@ -14,6 +14,7 @@ import {
     type ITurnServer as IClientTurnServer,
     Direction,
     EventType,
+    MatrixError,
     MatrixEvent,
     MsgType,
     RelationType,
@@ -34,7 +35,7 @@ import {
     WidgetLifecycle,
 } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle";
 
-import { SdkContextClass } from "../../../../src/contexts/SDKContext";
+import { SDKContextClass } from "../../../../src/contexts/SDKContextClass";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import { ElementWidgetDriver } from "../../../../src/stores/widgets/ElementWidgetDriver";
 import { mkEvent, stubClient } from "../../../test-utils";
@@ -89,6 +90,7 @@ describe("ElementWidgetDriver", () => {
         const requestedCapabilities = new Set([
             "m.always_on_screen",
             "town.robin.msc3846.turn_servers",
+            "org.matrix.msc4515.rtc_transports",
             "org.matrix.msc2762.timeline:!1:example.org",
             "org.matrix.msc2762.send.event:org.matrix.msc4075.call.notify",
             "org.matrix.msc2762.send.event:org.matrix.msc4075.rtc.notification",
@@ -420,6 +422,31 @@ describe("ElementWidgetDriver", () => {
         });
     });
 
+    describe("getRtcTransports", () => {
+        let driver: WidgetDriver;
+
+        beforeEach(() => {
+            driver = mkDefaultDriver();
+        });
+
+        it("gets the RTC transports from the homeserver", async () => {
+            const transports = [{ type: "livekit", livekit_service_url: "https://livekit-jwt.example.com" }];
+            client._unstable_getRTCTransports.mockResolvedValue(transports);
+
+            await expect(driver.getRtcTransports()).resolves.toEqual({ rtc_transports: transports });
+
+            expect(client._unstable_getRTCTransports).toHaveBeenCalledWith();
+        });
+
+        it("propagates errors from the homeserver", async () => {
+            const error = new MatrixError({ errcode: "M_NOT_FOUND", error: "Not found" }, 404);
+
+            client._unstable_getRTCTransports.mockRejectedValue(error);
+
+            await expect(driver.getRtcTransports()).rejects.toBe(error);
+        });
+    });
+
     describe("readEventRelations", () => {
         let driver: WidgetDriver;
 
@@ -428,7 +455,7 @@ describe("ElementWidgetDriver", () => {
         });
 
         it("reads related events from the current room", async () => {
-            jest.spyOn(SdkContextClass.instance.roomViewStore, "getRoomId").mockReturnValue("!this-room-id");
+            jest.spyOn(SDKContextClass.instance.roomViewStore, "getRoomId").mockReturnValue("!this-room-id");
 
             client.relations.mockResolvedValue({
                 originalEvent: new MatrixEvent(),
@@ -540,18 +567,12 @@ describe("ElementWidgetDriver", () => {
             driver = mkDefaultDriver();
         });
 
-        it("cannot send delayed events with missing arguments", async () => {
-            await expect(driver.sendDelayedEvent(null, null, EventType.RoomMessage, {})).rejects.toThrow(
-                "Must provide at least one of",
-            );
-        });
-
         it("sends delayed message events", async () => {
             client._unstable_sendDelayedEvent.mockResolvedValue({
                 delay_id: "id",
             });
 
-            await expect(driver.sendDelayedEvent(2000, null, EventType.RoomMessage, {})).resolves.toEqual({
+            await expect(driver.sendDelayedEvent(2000, EventType.RoomMessage, {})).resolves.toEqual({
                 roomId,
                 delayId: "id",
             });
@@ -565,31 +586,12 @@ describe("ElementWidgetDriver", () => {
             );
         });
 
-        it("sends child action delayed message events", async () => {
-            client._unstable_sendDelayedEvent.mockResolvedValue({
-                delay_id: "id-child",
-            });
-
-            await expect(driver.sendDelayedEvent(null, "id-parent", EventType.RoomMessage, {})).resolves.toEqual({
-                roomId,
-                delayId: "id-child",
-            });
-
-            expect(client._unstable_sendDelayedEvent).toHaveBeenCalledWith(
-                roomId,
-                { parent_delay_id: "id-parent" },
-                null,
-                EventType.RoomMessage,
-                {},
-            );
-        });
-
         it("sends delayed state events", async () => {
             client._unstable_sendDelayedStateEvent.mockResolvedValue({
                 delay_id: "id",
             });
 
-            await expect(driver.sendDelayedEvent(2000, null, EventType.RoomTopic, {}, "")).resolves.toEqual({
+            await expect(driver.sendDelayedEvent(2000, EventType.RoomTopic, {}, "")).resolves.toEqual({
                 roomId,
                 delayId: "id",
             });
@@ -602,25 +604,6 @@ describe("ElementWidgetDriver", () => {
                 "",
             );
         });
-
-        it("sends child action delayed state events", async () => {
-            client._unstable_sendDelayedStateEvent.mockResolvedValue({
-                delay_id: "id-child",
-            });
-
-            await expect(driver.sendDelayedEvent(null, "id-parent", EventType.RoomTopic, {}, "")).resolves.toEqual({
-                roomId,
-                delayId: "id-child",
-            });
-
-            expect(client._unstable_sendDelayedStateEvent).toHaveBeenCalledWith(
-                roomId,
-                { parent_delay_id: "id-parent" },
-                EventType.RoomTopic,
-                {},
-                "",
-            );
-        });
     });
 
     describe("updateDelayedEvent", () => {
@@ -743,7 +726,7 @@ describe("ElementWidgetDriver", () => {
                 delay_id: "id",
             });
 
-            await expect(driver.sendDelayedStickyEvent(1000, null, 2000, EventType.RoomMessage, {})).resolves.toEqual({
+            await expect(driver.sendDelayedStickyEvent(1000, 2000, EventType.RoomMessage, {})).resolves.toEqual({
                 roomId,
                 delayId: "id",
             });
@@ -757,27 +740,6 @@ describe("ElementWidgetDriver", () => {
                 {},
             );
         });
-        it("sends child action delayed sticky message events", async () => {
-            client._unstable_sendStickyDelayedEvent.mockResolvedValue({
-                delay_id: "id-child",
-            });
-
-            await expect(
-                driver.sendDelayedStickyEvent(null, "id-parent", 2000, EventType.RoomMessage, {}),
-            ).resolves.toEqual({
-                roomId,
-                delayId: "id-child",
-            });
-
-            expect(client._unstable_sendStickyDelayedEvent).toHaveBeenCalledWith(
-                roomId,
-                2000,
-                { parent_delay_id: "id-parent" },
-                null,
-                EventType.RoomMessage,
-                {},
-            );
-        });
     });
 
     describe("If the feature_dynamic_room_predecessors feature is not enabled", () => {
diff --git a/apps/web/test/unit-tests/stores/widgets/WidgetMessaging-test.ts b/apps/web/test/unit-tests/stores/widgets/WidgetMessaging-test.ts
index eb66502fda..f8662b465a 100644
--- a/apps/web/test/unit-tests/stores/widgets/WidgetMessaging-test.ts
+++ b/apps/web/test/unit-tests/stores/widgets/WidgetMessaging-test.ts
@@ -38,7 +38,7 @@ import ActiveWidgetStore from "../../../../src/stores/ActiveWidgetStore";
 import SettingsStore from "../../../../src/settings/SettingsStore";
 import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
 import { Action } from "../../../../src/dispatcher/actions";
-import { SdkContextClass } from "../../../../src/contexts/SDKContext";
+import { SDKContextClass } from "../../../../src/contexts/SDKContextClass";
 import { UPDATE_EVENT } from "../../../../src/stores/AsyncStore";
 import { type IApp } from "../../../../src/utils/WidgetUtils-types";
 import { ModalWidgetStore } from "../../../../src/stores/ModalWidgetStore";
@@ -397,7 +397,7 @@ describe("WidgetMessaging as an account widget", () => {
     beforeEach(() => {
         stubClient();
         // I give up, getting the return type of spyOn right is hopeless
-        getRoomId = jest.spyOn(SdkContextClass.instance.roomViewStore, "getRoomId") as unknown as MockedFunction<
+        getRoomId = jest.spyOn(SDKContextClass.instance.roomViewStore, "getRoomId") as unknown as MockedFunction<
             () => string | null
         >;
         getRoomId.mockReturnValue("!1:example.org");
@@ -430,7 +430,7 @@ describe("WidgetMessaging as an account widget", () => {
         expect(messaging.setViewedRoomId).toHaveBeenCalledTimes(1);
         expect(messaging.setViewedRoomId).toHaveBeenLastCalledWith("!1:example.org");
         getRoomId.mockReturnValue("!2:example.org");
-        SdkContextClass.instance.roomViewStore.emit(UPDATE_EVENT);
+        SDKContextClass.instance.roomViewStore.emit(UPDATE_EVENT);
         expect(messaging.setViewedRoomId).toHaveBeenCalledTimes(2);
         expect(messaging.setViewedRoomId).toHaveBeenLastCalledWith("!2:example.org");
     });
@@ -630,7 +630,7 @@ describe("WidgetMessaging action handling for stickerpicker", () => {
         const client = mocked(stubClient());
         room = mkRoom(client, "!1:example.org");
         client.getRoom.mockImplementation((roomId) => (roomId === room.roomId ? room : null));
-        const getRoomId = jest.spyOn(SdkContextClass.instance.roomViewStore, "getRoomId") as unknown as MockedFunction<
+        const getRoomId = jest.spyOn(SDKContextClass.instance.roomViewStore, "getRoomId") as unknown as MockedFunction<
             () => string | null
         >;
         getRoomId.mockReturnValue(room.roomId);
diff --git a/apps/web/test/unit-tests/stores/widgets/WidgetPermissionStore-test.ts b/apps/web/test/unit-tests/stores/widgets/WidgetPermissionStore-test.ts
index b0ebf2b23b..af8abe0f4e 100644
--- a/apps/web/test/unit-tests/stores/widgets/WidgetPermissionStore-test.ts
+++ b/apps/web/test/unit-tests/stores/widgets/WidgetPermissionStore-test.ts
@@ -12,9 +12,9 @@ import { Widget, WidgetKind } from "matrix-widget-api";
 
 import { OIDCState, WidgetPermissionStore } from "../../../../src/stores/widgets/WidgetPermissionStore";
 import SettingsStore from "../../../../src/settings/SettingsStore";
-import { TestSdkContext } from "../../TestSdkContext";
+import { TestSDKContext } from "../../TestSDKContext";
 import { type SettingLevel } from "../../../../src/settings/SettingLevel";
-import { SdkContextClass } from "../../../../src/contexts/SDKContext";
+import { SDKContextClass } from "../../../../src/contexts/SDKContextClass";
 import { stubClient } from "../../../test-utils";
 import { ElementWidgetDriver } from "../../../../src/stores/widgets/ElementWidgetDriver";
 import { WidgetType } from "../../../../src/widgets/WidgetType.ts";
@@ -53,8 +53,8 @@ describe("WidgetPermissionStore", () => {
             },
         );
         mockClient = stubClient();
-        const context = new TestSdkContext();
-        context.client = mockClient;
+        const context = new TestSDKContext();
+        context._client = mockClient;
         widgetPermissionStore = new WidgetPermissionStore(context);
     });
 
@@ -85,8 +85,8 @@ describe("WidgetPermissionStore", () => {
         // check this is not the case for the entire account
         expect(widgetPermissionStore.getOIDCState(w, WidgetKind.Account, roomId)).toEqual(OIDCState.Unknown);
     });
-    it("is created once in SdkContextClass", () => {
-        const context = new SdkContextClass();
+    it("is created once in SDKContextClass", () => {
+        const context = new SDKContextClass();
         const store = context.widgetPermissionStore;
         expect(store).toBeDefined();
         const store2 = context.widgetPermissionStore;
diff --git a/apps/web/test/unit-tests/submit-rageshake-test.ts b/apps/web/test/unit-tests/submit-rageshake-test.ts
index 0bb2006754..b33a4a9982 100644
--- a/apps/web/test/unit-tests/submit-rageshake-test.ts
+++ b/apps/web/test/unit-tests/submit-rageshake-test.ts
@@ -6,7 +6,7 @@ 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 Mocked, mocked } from "jest-mock";
+import { type Mocked, mocked } from "jest-mock-vitest-adapter";
 import {
     type HttpApiEvent,
     type HttpApiEventHandlerMap,
@@ -15,6 +15,7 @@ import {
     TypedEventEmitter,
     MatrixHttpApi,
 } from "matrix-js-sdk/src/matrix";
+import { CrossSigningKey } from "matrix-js-sdk/src/crypto-api";
 import fetchMock from "@fetch-mock/jest";
 
 import { getMockClientWithEventEmitter, mockClientMethodsCrypto, mockPlatformPeg } from "../test-utils";
@@ -25,8 +26,8 @@ import { type FeatureSettingKey, type SettingKey } from "../../src/settings/Sett
 import { SettingLevel } from "../../src/settings/SettingLevel.ts";
 import SdkConfig from "../../src/SdkConfig.ts";
 import { BugReportEndpointURLLocal } from "../../src/IConfigOptions.ts";
-import { Notifier } from "../../src/Notifier.ts";
 import { MatrixClientPeg } from "../../src/MatrixClientPeg.ts";
+import { SDKContextClass } from "../../src/contexts/SDKContextClass.ts";
 
 describe("Rageshakes", () => {
     let mockClient: Mocked<MatrixClient>;
@@ -193,7 +194,7 @@ describe("Rageshakes", () => {
                 const crossSigningPubKey = "crossSigningPubKey";
                 mocked(mockClient.getCrypto()!.getCrossSigningKeyId).mockImplementation(
                     async (type): Promise<string | null> => {
-                        if (!type || type === "master") {
+                        if (!type || type === CrossSigningKey.Master) {
                             return crossSigningPubKey;
                         }
                         return null;
@@ -359,7 +360,7 @@ describe("Rageshakes", () => {
 
     describe("Settings Store", () => {
         beforeEach(() => {
-            jest.spyOn(Notifier, "isPossible").mockReturnValue(true);
+            jest.spyOn(SDKContextClass.instance.notifier, "isPossible").mockReturnValue(true);
         });
 
         afterEach(() => {
@@ -405,7 +406,7 @@ describe("Rageshakes", () => {
         it("should handle settings throwing when logged out", async () => {
             jest.mocked(MatrixClientPeg.get).mockRestore();
             jest.mocked(MatrixClientPeg.safeGet).mockRestore();
-            jest.spyOn(Notifier, "isPossible").mockImplementation(() => {
+            jest.spyOn(SDKContextClass.instance.notifier, "isPossible").mockImplementation(() => {
                 throw new Error("Test");
             });
 
@@ -418,7 +419,7 @@ describe("Rageshakes", () => {
         it("should handle reading notification settings when logged out", async () => {
             jest.mocked(MatrixClientPeg.get).mockRestore();
             jest.mocked(MatrixClientPeg.safeGet).mockRestore();
-            jest.spyOn(Notifier, "isPossible").mockReturnValue(true);
+            jest.spyOn(SDKContextClass.instance.notifier, "isPossible").mockReturnValue(true);
 
             const formData = await collectBugReport();
             expect(JSON.parse(formData.get("mx_local_settings") as string)["notificationsEnabled"]).toBe(false);
diff --git a/apps/web/test/unit-tests/theme-test.ts b/apps/web/test/unit-tests/theme-test.ts
index 5c55bc7cae..3466f5a4f2 100644
--- a/apps/web/test/unit-tests/theme-test.ts
+++ b/apps/web/test/unit-tests/theme-test.ts
@@ -21,7 +21,7 @@ describe("theme", () => {
         let lightCustomTheme: HTMLStyleElement;
 
         let spyQuerySelectorAll: jest.MockInstance<NodeListOf<Element>, [selectors: string]>;
-        let spyClassList: jest.SpyInstance<void, string[], any>;
+        let spyClassList: jest.SpyInstance<void, string[]>;
 
         beforeAll(() => {
             const meta = document.createElement("meta");
diff --git a/apps/web/test/unit-tests/toasts/IncomingCallToast-test.tsx b/apps/web/test/unit-tests/toasts/IncomingCallToast-test.tsx
index 025885e319..7309cd5594 100644
--- a/apps/web/test/unit-tests/toasts/IncomingCallToast-test.tsx
+++ b/apps/web/test/unit-tests/toasts/IncomingCallToast-test.tsx
@@ -34,6 +34,7 @@ import {
     setupAsyncStoreWithClient,
     resetAsyncStoreWithClient,
     mkEvent,
+    clientAndSDKContextRenderOptions,
 } from "../../test-utils";
 import defaultDispatcher from "../../../src/dispatcher/dispatcher";
 import { Action } from "../../../src/dispatcher/actions";
@@ -47,9 +48,10 @@ import {
     getNotificationEventSendTs,
     IncomingCallToast,
 } from "../../../src/toasts/IncomingCallToast";
-import LegacyCallHandler, { AudioID } from "../../../src/LegacyCallHandler";
+import { AudioID } from "../../../src/LegacyCallHandler";
 import { CallEvent } from "../../../src/models/Call";
 import { type WidgetMessaging } from "../../../src/stores/widgets/WidgetMessaging";
+import { TestSDKContext } from "../TestSDKContext.ts";
 
 function makeNotificationEvent(room: Room, content: IContent = {}): MatrixEvent {
     const ts = Date.now();
@@ -76,6 +78,7 @@ describe("IncomingCallToast", () => {
     useMockedCalls();
 
     let client: Mocked<MatrixClient>;
+    let sdkContext: TestSDKContext;
     let room: Room;
 
     let alice: RoomMember;
@@ -92,6 +95,8 @@ describe("IncomingCallToast", () => {
     beforeEach(async () => {
         stubClient();
         client = mocked(MatrixClientPeg.safeGet());
+        sdkContext = new TestSDKContext();
+        sdkContext._client = client;
 
         const audio = document.createElement("audio");
         audio.id = AudioID.Ring;
@@ -146,6 +151,7 @@ describe("IncomingCallToast", () => {
                 notificationEvent={notificationEvent}
                 toastKey={getIncomingCallToastKey(callId, room.roomId)}
             />,
+            clientAndSDKContextRenderOptions(client, sdkContext),
         );
         return callId;
     };
@@ -196,8 +202,11 @@ describe("IncomingCallToast", () => {
 
     it("start ringing on ring notify event", () => {
         const notificationEvent = makeNotificationEvent(room, { notification_type: "ring" });
-        const playMock = jest.spyOn(LegacyCallHandler.instance, "play");
-        render(<IncomingCallToast notificationEvent={notificationEvent} toastKey="" />);
+        const playMock = jest.spyOn(sdkContext.legacyCallHandler, "play");
+        render(
+            <IncomingCallToast notificationEvent={notificationEvent} toastKey="" />,
+            clientAndSDKContextRenderOptions(client, sdkContext),
+        );
         expect(playMock).toHaveBeenCalled();
     });
 
diff --git a/apps/web/test/unit-tests/toasts/IncomingLegacyCallToast-test.tsx b/apps/web/test/unit-tests/toasts/IncomingLegacyCallToast-test.tsx
index 4b766c6a08..36fe67b7a8 100644
--- a/apps/web/test/unit-tests/toasts/IncomingLegacyCallToast-test.tsx
+++ b/apps/web/test/unit-tests/toasts/IncomingLegacyCallToast-test.tsx
@@ -10,10 +10,15 @@ import { LOCAL_NOTIFICATION_SETTINGS_PREFIX, MatrixEvent, Room } from "matrix-js
 import { MatrixCall } from "matrix-js-sdk/src/webrtc/call";
 import React from "react";
 
-import LegacyCallHandler from "../../../src/LegacyCallHandler";
 import IncomingLegacyCallToast from "../../../src/toasts/IncomingLegacyCallToast";
 import DMRoomMap from "../../../src/utils/DMRoomMap";
-import { getMockClientWithEventEmitter, mockClientMethodsServer, mockClientMethodsUser } from "../../test-utils";
+import {
+    clientAndSDKContextRenderOptions,
+    getMockClientWithEventEmitter,
+    mockClientMethodsServer,
+    mockClientMethodsUser,
+} from "../../test-utils";
+import { TestSDKContext } from "../TestSDKContext.ts";
 
 describe("<IncomingLegacyCallToast />", () => {
     const userId = "@alice:server.org";
@@ -28,6 +33,8 @@ describe("<IncomingLegacyCallToast />", () => {
         ...mockClientMethodsServer(),
         getRoom: jest.fn(),
     });
+    const sdkContext = new TestSDKContext();
+    sdkContext._client = mockClient;
     const mockRoom = new Room("!room:server.org", mockClient, userId);
     mockClient.deviceId = deviceId;
 
@@ -44,13 +51,13 @@ describe("<IncomingLegacyCallToast />", () => {
     });
 
     it("renders when silence button when call is not silenced", () => {
-        const { getByLabelText } = render(getComponent());
+        const { getByLabelText } = render(getComponent(), clientAndSDKContextRenderOptions(mockClient, sdkContext));
         expect(getByLabelText("Silence call")).toMatchSnapshot();
     });
 
     it("renders sound on button when call is silenced", () => {
-        LegacyCallHandler.instance.silenceCall(call.callId);
-        const { getByLabelText } = render(getComponent());
+        sdkContext.legacyCallHandler.silenceCall(call.callId);
+        const { getByLabelText } = render(getComponent(), clientAndSDKContextRenderOptions(mockClient, sdkContext));
         expect(getByLabelText("Sound on")).toMatchSnapshot();
     });
 
@@ -66,7 +73,7 @@ describe("<IncomingLegacyCallToast />", () => {
                 });
             }
         });
-        const { getByLabelText } = render(getComponent());
+        const { getByLabelText } = render(getComponent(), clientAndSDKContextRenderOptions(mockClient, sdkContext));
         expect(getByLabelText("Notifications silenced")).toMatchSnapshot();
     });
 });
diff --git a/apps/web/test/unit-tests/utils/MegolmExportEncryption-test.ts b/apps/web/test/unit-tests/utils/MegolmExportEncryption-test.ts
index 1719313795..f86ffe45d0 100644
--- a/apps/web/test/unit-tests/utils/MegolmExportEncryption-test.ts
+++ b/apps/web/test/unit-tests/utils/MegolmExportEncryption-test.ts
@@ -6,8 +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 { TextEncoder } from "util";
-import nodeCrypto from "crypto";
+import { TextEncoder } from "node:util";
+import nodeCrypto from "node:crypto";
 import { Crypto } from "@peculiar/webcrypto";
 
 import type * as MegolmExportEncryptionExport from "../../../src/utils/MegolmExportEncryption";
@@ -57,7 +57,7 @@ const TEST_VECTORS = [
             "bWnSXS9oymiqwUIGs08sXI33ZA==\n" +
             "-----END MEGOLM SESSION DATA-----",
     ],
-];
+] as const;
 
 function stringToArray(s: string): ArrayBuffer {
     return new TextEncoder().encode(s).buffer as ArrayBuffer;
@@ -74,8 +74,7 @@ describe("MegolmExportEncryption", function () {
                 subtle: webCrypto.subtle,
             },
         });
-        // eslint-disable-next-line @typescript-eslint/no-require-imports
-        MegolmExportEncryption = require("../../../src/utils/MegolmExportEncryption");
+        MegolmExportEncryption = jest.requireActual("../../../src/utils/MegolmExportEncryption");
     });
 
     describe("decrypt", function () {
@@ -120,20 +119,9 @@ cissyYBxjsfsAn
             );
         });
 
-        // TODO find a subtlecrypto shim which doesn't break this test
-        it.skip("should decrypt a range of inputs", function () {
-            function next(i: number): Promise<string | undefined> | undefined {
-                if (i >= TEST_VECTORS.length) {
-                    return;
-                }
-
-                const [plain, password, input] = TEST_VECTORS[i];
-                return MegolmExportEncryption.decryptMegolmKeyFile(stringToArray(input), password).then((decrypted) => {
-                    expect(decrypted).toEqual(plain);
-                    return next(i + 1);
-                });
-            }
-            next(0);
+        it.skip.each(TEST_VECTORS)("should decrypt a range of inputs", async (plain, password, input) => {
+            const decrypted = await MegolmExportEncryption.decryptMegolmKeyFile(stringToArray(input), password);
+            expect(decrypted).toEqual(plain);
         });
     });
 
diff --git a/apps/web/test/unit-tests/utils/PhasedRolloutFeature-test.ts b/apps/web/test/unit-tests/utils/PhasedRolloutFeature-test.ts
deleted file mode 100644
index 3e4a75a1b2..0000000000
--- a/apps/web/test/unit-tests/utils/PhasedRolloutFeature-test.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2024 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { PhasedRolloutFeature } from "../../../src/utils/PhasedRolloutFeature";
-
-describe("Test PhasedRolloutFeature", () => {
-    function randomUserId() {
-        const characters = "abcdefghijklmnopqrstuvwxyz0123456789.=_-/+";
-        let result = "";
-        const charactersLength = characters.length;
-        const idLength = Math.floor(Math.random() * 15) + 6; // Random number between 6 and 20
-        for (let i = 0; i < idLength; i++) {
-            result += characters.charAt(Math.floor(Math.random() * charactersLength));
-        }
-        return "@" + result + ":matrix.org";
-    }
-
-    function randomDeviceId() {
-        const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
-        let result = "";
-        const charactersLength = characters.length;
-        for (let i = 0; i < 10; i++) {
-            result += characters.charAt(Math.floor(Math.random() * charactersLength));
-        }
-        return result;
-    }
-
-    it("should only accept valid percentage", () => {
-        expect(() => new PhasedRolloutFeature("test", 0.8)).toThrow();
-        expect(() => new PhasedRolloutFeature("test", -1)).toThrow();
-        expect(() => new PhasedRolloutFeature("test", 123)).toThrow();
-    });
-
-    it("should enable for all if percentage is 100", () => {
-        const phasedRolloutFeature = new PhasedRolloutFeature("test", 100);
-
-        for (let i = 0; i < 1000; i++) {
-            expect(phasedRolloutFeature.isFeatureEnabled(randomUserId())).toBeTruthy();
-        }
-    });
-
-    it("should not enable for anyone if percentage is 0", () => {
-        const phasedRolloutFeature = new PhasedRolloutFeature("test", 0);
-
-        for (let i = 0; i < 1000; i++) {
-            expect(phasedRolloutFeature.isFeatureEnabled(randomUserId())).toBeFalsy();
-        }
-    });
-
-    it("should enable for more users if percentage grows", () => {
-        let rolloutPercentage = 0;
-        let previousBatch: string[] = [];
-        const allUsers = new Array(1000).fill(0).map(() => randomDeviceId());
-
-        while (rolloutPercentage <= 90) {
-            rolloutPercentage += 10;
-            const nextRollout = new PhasedRolloutFeature("test", rolloutPercentage);
-            const nextBatch = allUsers.filter((userId) => nextRollout.isFeatureEnabled(userId));
-            expect(previousBatch.length).toBeLessThan(nextBatch.length);
-            expect(previousBatch.every((user) => nextBatch.includes(user))).toBeTruthy();
-            previousBatch = nextBatch;
-        }
-    });
-
-    it("should distribute differently depending on the feature name", () => {
-        const allUsers = new Array(1000).fill(0).map(() => randomUserId());
-
-        const featureARollout = new PhasedRolloutFeature("FeatureA", 50);
-        const featureBRollout = new PhasedRolloutFeature("FeatureB", 50);
-
-        const featureAUsers = allUsers.filter((userId) => featureARollout.isFeatureEnabled(userId));
-        const featureBUsers = allUsers.filter((userId) => featureBRollout.isFeatureEnabled(userId));
-
-        expect(featureAUsers).not.toEqual(featureBUsers);
-    });
-});
diff --git a/apps/web/test/unit-tests/utils/SessionLock-test.ts b/apps/web/test/unit-tests/utils/SessionLock-test.ts
index b0125debc5..fc7a2236ed 100644
--- a/apps/web/test/unit-tests/utils/SessionLock-test.ts
+++ b/apps/web/test/unit-tests/utils/SessionLock-test.ts
@@ -252,7 +252,7 @@ describe("SessionLock", () => {
         const window2 = createWindow();
 
         // import the dependencies of getSessionLock into the new context
-        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        // eslint-disable-next-line typescript/no-require-imports,typescript/no-var-requires
         window2._logger = require("matrix-js-sdk/src/logger");
         window2.SESSION_LOCK_CONSTANTS = SESSION_LOCK_CONSTANTS;
 
diff --git a/apps/web/test/unit-tests/utils/StorageManager-test.ts b/apps/web/test/unit-tests/utils/StorageManager-test.ts
index 99713e7b86..c02fc5d73f 100644
--- a/apps/web/test/unit-tests/utils/StorageManager-test.ts
+++ b/apps/web/test/unit-tests/utils/StorageManager-test.ts
@@ -10,6 +10,7 @@ import "fake-indexeddb/auto";
 
 import { IDBFactory } from "fake-indexeddb";
 import { IndexedDBCryptoStore } from "matrix-js-sdk/src/matrix";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import * as StorageManager from "../../../src/utils/StorageManager";
 
@@ -64,7 +65,6 @@ describe("StorageManager", () => {
 
         beforeEach(async () => {
             await populateHealthySession();
-            // eslint-disable-next-line no-global-assign
             indexedDB = new IDBFactory();
         });
 
@@ -108,15 +108,101 @@ describe("StorageManager", () => {
             });
 
             it("should not be healthy if no indexeddb", async () => {
-                // eslint-disable-next-line no-global-assign
                 indexedDB = {} as IDBFactory;
 
                 const result = await StorageManager.checkConsistency();
                 expect(result.healthy).toBe(false);
 
-                // eslint-disable-next-line no-global-assign
                 indexedDB = new IDBFactory();
             });
         });
     });
+
+    describe("tryPersistStorage", () => {
+        // jsdom does not implement navigator.storage, so stub it per-test; jest.replaceProperty
+        // cannot be used as it refuses to replace a property that does not exist.
+        function setStorage(value: unknown): void {
+            Object.defineProperty(navigator, "storage", { value, configurable: true });
+        }
+
+        beforeEach(() => {
+            jest.spyOn(logger, "log").mockImplementation(() => {});
+            jest.spyOn(logger, "warn").mockImplementation(() => {});
+            jest.spyOn(logger, "error").mockImplementation(() => {});
+        });
+
+        afterEach(() => {
+            delete (navigator as unknown as { storage?: unknown }).storage;
+            jest.restoreAllMocks();
+        });
+
+        it("returns true and does not re-request when storage is already persisted", async () => {
+            const persist = jest.fn().mockResolvedValue(true);
+            const persisted = jest.fn().mockResolvedValue(true);
+            setStorage({ persist, persisted });
+
+            await expect(StorageManager.tryPersistStorage()).resolves.toBe(true);
+            expect(persisted).toHaveBeenCalled();
+            expect(persist).not.toHaveBeenCalled();
+            expect(logger.warn).not.toHaveBeenCalled();
+        });
+
+        it("requests persistence and returns true when granted", async () => {
+            const persist = jest.fn().mockResolvedValue(true);
+            const persisted = jest.fn().mockResolvedValue(false);
+            setStorage({ persist, persisted });
+
+            await expect(StorageManager.tryPersistStorage()).resolves.toBe(true);
+            expect(persist).toHaveBeenCalled();
+            expect(logger.warn).not.toHaveBeenCalled();
+        });
+
+        it("requests persistence directly when persisted() is unavailable", async () => {
+            const persist = jest.fn().mockResolvedValue(true);
+            setStorage({ persist });
+
+            await expect(StorageManager.tryPersistStorage()).resolves.toBe(true);
+            expect(persist).toHaveBeenCalledTimes(1);
+        });
+
+        it("still requests persistence and logs the failure when querying the persisted state fails", async () => {
+            const queryError = new Error("query failed");
+            const persisted = jest.fn().mockRejectedValue(queryError);
+            const persist = jest.fn().mockResolvedValue(true);
+            setStorage({ persist, persisted });
+
+            await expect(StorageManager.tryPersistStorage()).resolves.toBe(true);
+            expect(persist).toHaveBeenCalled();
+            expect(logger.warn).toHaveBeenCalledWith(expect.stringContaining("Could not query"), queryError);
+        });
+
+        it("returns false and warns when persistence is denied", async () => {
+            const persist = jest.fn().mockResolvedValue(false);
+            const persisted = jest.fn().mockResolvedValue(false);
+            setStorage({ persist, persisted });
+
+            await expect(StorageManager.tryPersistStorage()).resolves.toBe(false);
+            expect(logger.warn).toHaveBeenCalledWith(expect.stringContaining("Persistent storage"));
+        });
+
+        it("returns false when navigator.storage lacks persist()", async () => {
+            setStorage({ persisted: jest.fn().mockResolvedValue(false) });
+
+            await expect(StorageManager.tryPersistStorage()).resolves.toBe(false);
+            expect(logger.log).toHaveBeenCalledWith(expect.stringContaining("unsupported"));
+        });
+
+        it("returns false without throwing when persistence is unsupported", async () => {
+            await expect(StorageManager.tryPersistStorage()).resolves.toBe(false);
+        });
+
+        it("does not reject but logs an error if requesting persistence throws", async () => {
+            const persist = jest.fn().mockRejectedValue(new Error("boom"));
+            const persisted = jest.fn().mockResolvedValue(false);
+            setStorage({ persist, persisted });
+
+            await expect(StorageManager.tryPersistStorage()).resolves.toBe(false);
+            expect(logger.error).toHaveBeenCalled();
+        });
+    });
 });
diff --git a/apps/web/test/unit-tests/utils/enums-test.ts b/apps/web/test/unit-tests/utils/enums-test.ts
deleted file mode 100644
index b431e2de3e..0000000000
--- a/apps/web/test/unit-tests/utils/enums-test.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2021 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { getEnumValues, isEnumValue } from "../../../src/utils/enums";
-
-enum TestStringEnum {
-    First = "__first__",
-    Second = "__second__",
-}
-
-enum TestNumberEnum {
-    FirstKey = 10,
-    SecondKey = 20,
-}
-
-describe("enums", () => {
-    describe("getEnumValues", () => {
-        it("should work on string enums", () => {
-            const result = getEnumValues(TestStringEnum);
-            expect(result).toBeDefined();
-            expect(result).toHaveLength(2);
-            expect(result).toEqual(["__first__", "__second__"]);
-        });
-
-        it("should work on number enums", () => {
-            const result = getEnumValues(TestNumberEnum);
-            expect(result).toBeDefined();
-            expect(result).toHaveLength(2);
-            expect(result).toEqual([10, 20]);
-        });
-    });
-
-    describe("isEnumValue", () => {
-        it("should return true on values in a string enum", () => {
-            const result = isEnumValue(TestStringEnum, "__first__");
-            expect(result).toBe(true);
-        });
-
-        it("should return false on values not in a string enum", () => {
-            const result = isEnumValue(TestStringEnum, "not a value");
-            expect(result).toBe(false);
-        });
-
-        it("should return true on values in a number enum", () => {
-            const result = isEnumValue(TestNumberEnum, 10);
-            expect(result).toBe(true);
-        });
-
-        it("should return false on values not in a number enum", () => {
-            const result = isEnumValue(TestStringEnum, 99);
-            expect(result).toBe(false);
-        });
-    });
-});
diff --git a/apps/web/test/unit-tests/utils/export-test.tsx b/apps/web/test/unit-tests/utils/export-test.ts
similarity index 100%
rename from apps/web/test/unit-tests/utils/export-test.tsx
rename to apps/web/test/unit-tests/utils/export-test.ts
diff --git a/apps/web/test/unit-tests/utils/exportUtils/HTMLExport-test.ts b/apps/web/test/unit-tests/utils/exportUtils/HTMLExport-test.ts
index 2bb92f37c8..d4c7503e34 100644
--- a/apps/web/test/unit-tests/utils/exportUtils/HTMLExport-test.ts
+++ b/apps/web/test/unit-tests/utils/exportUtils/HTMLExport-test.ts
@@ -32,7 +32,8 @@ import HTMLExporter from "../../../../src/utils/exportUtils/HtmlExport";
 import DMRoomMap from "../../../../src/utils/DMRoomMap";
 import { mediaFromMxc } from "../../../../src/customisations/Media";
 import SettingsStore from "../../../../src/settings/SettingsStore";
-import { SdkContextClass } from "../../../../src/contexts/SDKContext.ts";
+import { SDKContextClass } from "../../../../src/contexts/SDKContextClass";
+import { TestSDKContext } from "../../TestSDKContext.ts";
 
 jest.mock("jszip");
 jest.mock("../../../../src/settings/SettingsStore");
@@ -93,6 +94,7 @@ const EVENT_MENTION: IRoomEvent = {
 describe("HTMLExport", () => {
     let client: jest.Mocked<MatrixClient>;
     let room: Room;
+    let sdkContext: TestSDKContext;
 
     filterConsole(
         "Starting export",
@@ -111,7 +113,10 @@ describe("HTMLExport", () => {
         jest.setSystemTime(REPEATABLE_DATE);
 
         client = stubClient() as jest.Mocked<MatrixClient>;
-        SdkContextClass.instance.client = client;
+        sdkContext = new TestSDKContext();
+        // @ts-ignore HTMLExport uses SDKContext in the constructor
+        SDKContextClass.instance = sdkContext;
+        sdkContext._client = client;
         DMRoomMap.makeShared(client);
 
         room = new Room("!myroom:example.org", client, "@me:example.org");
@@ -642,9 +647,9 @@ describe("HTMLExport", () => {
         await exporter.export();
         const html = await getMessageFile(exporter).text();
 
-        expect(html).not.toContain(`${name}`);
-        expect(html).toContain(`${escapeHtml(name)}`);
-        expect(html).not.toContain(`${topic}`);
+        expect(html).not.toContain(name);
+        expect(html).toContain(escapeHtml(name));
+        expect(html).not.toContain(topic);
         expect(html).toContain(`Topic: ${escapeHtml(topic)}`);
     });
 
diff --git a/apps/web/test/unit-tests/utils/exportUtils/JSONExport-test.ts b/apps/web/test/unit-tests/utils/exportUtils/JSONExport-test.ts
index 9cc071b4e2..94cfeb08fc 100644
--- a/apps/web/test/unit-tests/utils/exportUtils/JSONExport-test.ts
+++ b/apps/web/test/unit-tests/utils/exportUtils/JSONExport-test.ts
@@ -16,7 +16,7 @@ describe("JSONExport", () => {
         jest.setSystemTime(REPEATABLE_DATE);
     });
 
-    it("should have a Matrix-branded destination file name", () => {
+    it("should have an Element-branded destination file name", () => {
         const roomName = "My / Test / Room: Welcome";
         const client = createTestClient();
         const stubOptions: IExportOptions = {
diff --git a/apps/web/test/unit-tests/utils/exportUtils/PlainTextExport-test.ts b/apps/web/test/unit-tests/utils/exportUtils/PlainTextExport-test.ts
index 006e86b3bf..355e73c30a 100644
--- a/apps/web/test/unit-tests/utils/exportUtils/PlainTextExport-test.ts
+++ b/apps/web/test/unit-tests/utils/exportUtils/PlainTextExport-test.ts
@@ -34,7 +34,7 @@ describe("PlainTextExport", () => {
         stubRoom = mkStubRoom("!myroom:example.org", roomName, client);
     });
 
-    it("should have a Matrix-branded destination file name", () => {
+    it("should have an Element-branded destination file name", () => {
         const exporter = new PlainTextExporter(stubRoom, ExportType.Timeline, stubOptions, () => {});
 
         expect(exporter.destinationFileName).toMatchSnapshot();
diff --git a/apps/web/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap b/apps/web/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
index 8f7a857505..36ed656a21 100644
--- a/apps/web/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
+++ b/apps/web/test/unit-tests/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
@@ -57,7 +57,7 @@ exports[`HTMLExport should export 1`] = `
                                             <br/>
                                             <p>  </p>
                                         </div>
-                                    <li><div role="separator" aria-label="Thu, Jan 1, 1970" class="_flex_4dswl_9 mx_TimelineSeparator _timelineSeparator_yq5ye_8" style="--mx-flex-display:flex;--mx-flex-direction:row;--mx-flex-align:center;--mx-flex-justify:start;--mx-flex-gap:0;--mx-flex-wrap:nowrap"><hr role="none"/><div class="_flex_4dswl_9 _content_u6fft_8" style="--mx-flex-display:flex;--mx-flex-direction:row;--mx-flex-align:start;--mx-flex-justify:start;--mx-flex-gap:0;--mx-flex-wrap:nowrap"><h2 aria-hidden="true" class="_typography_6v6n8_153 _font-heading-lg-regular_6v6n8_121">Thu, Jan 1, 1970</h2></div><hr role="none"/></div></li><div class="mx_Export_EventWrapper" id="49"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="49" data-layout="group" data-self="false" data-event-id="49" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user49:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user49:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="1" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/49" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #49</div></div></div></li></div><div class="mx_Export_EventWrapper" id="48"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="48" data-layout="group" data-self="false" data-event-id="48" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user48:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user48:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="2" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/48" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #48</div></div></div></li></div><div class="mx_Export_EventWrapper" id="47"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="47" data-layout="group" data-self="false" data-event-id="47" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user47:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user47:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="3" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/47" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #47</div></div></div></li></div><div class="mx_Export_EventWrapper" id="46"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="46" data-layout="group" data-self="false" data-event-id="46" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user46:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user46:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="4" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/46" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #46</div></div></div></li></div><div class="mx_Export_EventWrapper" id="45"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="45" data-layout="group" data-self="false" data-event-id="45" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user45:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user45:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="5" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/45" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #45</div></div></div></li></div><div class="mx_Export_EventWrapper" id="44"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="44" data-layout="group" data-self="false" data-event-id="44" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user44:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user44:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="6" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/44" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #44</div></div></div></li></div><div class="mx_Export_EventWrapper" id="43"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="43" data-layout="group" data-self="false" data-event-id="43" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user43:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user43:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="7" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/43" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #43</div></div></div></li></div><div class="mx_Export_EventWrapper" id="42"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="42" data-layout="group" data-self="false" data-event-id="42" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user42:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user42:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="8" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/42" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #42</div></div></div></li></div><div class="mx_Export_EventWrapper" id="41"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="41" data-layout="group" data-self="false" data-event-id="41" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user41:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user41:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="9" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/41" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #41</div></div></div></li></div><div class="mx_Export_EventWrapper" id="40"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="40" data-layout="group" data-self="false" data-event-id="40" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user40:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user40:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="10" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/40" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #40</div></div></div></li></div><div class="mx_Export_EventWrapper" id="39"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="39" data-layout="group" data-self="false" data-event-id="39" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user39:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user39:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="11" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/39" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #39</div></div></div></li></div><div class="mx_Export_EventWrapper" id="38"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="38" data-layout="group" data-self="false" data-event-id="38" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user38:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user38:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="12" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/38" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #38</div></div></div></li></div><div class="mx_Export_EventWrapper" id="37"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="37" data-layout="group" data-self="false" data-event-id="37" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user37:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user37:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="13" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/37" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #37</div></div></div></li></div><div class="mx_Export_EventWrapper" id="36"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="36" data-layout="group" data-self="false" data-event-id="36" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user36:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user36:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="14" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/36" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #36</div></div></div></li></div><div class="mx_Export_EventWrapper" id="35"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="35" data-layout="group" data-self="false" data-event-id="35" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user35:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user35:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="15" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/35" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #35</div></div></div></li></div><div class="mx_Export_EventWrapper" id="34"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="34" data-layout="group" data-self="false" data-event-id="34" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user34:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user34:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="16" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/34" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #34</div></div></div></li></div><div class="mx_Export_EventWrapper" id="33"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="33" data-layout="group" data-self="false" data-event-id="33" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user33:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user33:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="17" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/33" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #33</div></div></div></li></div><div class="mx_Export_EventWrapper" id="32"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="32" data-layout="group" data-self="false" data-event-id="32" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user32:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user32:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="18" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/32" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #32</div></div></div></li></div><div class="mx_Export_EventWrapper" id="31"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="31" data-layout="group" data-self="false" data-event-id="31" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user31:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user31:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="19" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/31" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #31</div></div></div></li></div><div class="mx_Export_EventWrapper" id="30"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="30" data-layout="group" data-self="false" data-event-id="30" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user30:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user30:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="20" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/30" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #30</div></div></div></li></div><div class="mx_Export_EventWrapper" id="29"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="29" data-layout="group" data-self="false" data-event-id="29" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user29:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user29:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="21" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/29" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #29</div></div></div></li></div><div class="mx_Export_EventWrapper" id="28"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="28" data-layout="group" data-self="false" data-event-id="28" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user28:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user28:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="22" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/28" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #28</div></div></div></li></div><div class="mx_Export_EventWrapper" id="27"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="27" data-layout="group" data-self="false" data-event-id="27" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user27:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user27:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="23" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/27" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #27</div></div></div></li></div><div class="mx_Export_EventWrapper" id="26"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="26" data-layout="group" data-self="false" data-event-id="26" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user26:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user26:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="24" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/26" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #26</div></div></div></li></div><div class="mx_Export_EventWrapper" id="25"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="25" data-layout="group" data-self="false" data-event-id="25" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user25:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user25:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="25" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/25" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #25</div></div></div></li></div><div class="mx_Export_EventWrapper" id="24"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="24" data-layout="group" data-self="false" data-event-id="24" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user24:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user24:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="26" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/24" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #24</div></div></div></li></div><div class="mx_Export_EventWrapper" id="23"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="23" data-layout="group" data-self="false" data-event-id="23" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user23:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user23:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="27" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/23" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #23</div></div></div></li></div><div class="mx_Export_EventWrapper" id="22"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="22" data-layout="group" data-self="false" data-event-id="22" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user22:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user22:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="28" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/22" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #22</div></div></div></li></div><div class="mx_Export_EventWrapper" id="21"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="21" data-layout="group" data-self="false" data-event-id="21" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user21:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user21:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="29" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/21" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #21</div></div></div></li></div><div class="mx_Export_EventWrapper" id="20"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="20" data-layout="group" data-self="false" data-event-id="20" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user20:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user20:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="30" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/20" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #20</div></div></div></li></div><div class="mx_Export_EventWrapper" id="19"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="19" data-layout="group" data-self="false" data-event-id="19" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user19:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user19:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="31" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/19" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #19</div></div></div></li></div><div class="mx_Export_EventWrapper" id="18"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="18" data-layout="group" data-self="false" data-event-id="18" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user18:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user18:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="32" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/18" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #18</div></div></div></li></div><div class="mx_Export_EventWrapper" id="17"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="17" data-layout="group" data-self="false" data-event-id="17" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user17:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user17:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="33" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/17" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #17</div></div></div></li></div><div class="mx_Export_EventWrapper" id="16"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="16" data-layout="group" data-self="false" data-event-id="16" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user16:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user16:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="34" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/16" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #16</div></div></div></li></div><div class="mx_Export_EventWrapper" id="15"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="15" data-layout="group" data-self="false" data-event-id="15" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user15:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user15:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="35" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/15" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #15</div></div></div></li></div><div class="mx_Export_EventWrapper" id="14"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="14" data-layout="group" data-self="false" data-event-id="14" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user14:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user14:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="36" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/14" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #14</div></div></div></li></div><div class="mx_Export_EventWrapper" id="13"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="13" data-layout="group" data-self="false" data-event-id="13" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user13:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user13:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="37" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/13" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #13</div></div></div></li></div><div class="mx_Export_EventWrapper" id="12"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="12" data-layout="group" data-self="false" data-event-id="12" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user12:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user12:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="38" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/12" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #12</div></div></div></li></div><div class="mx_Export_EventWrapper" id="11"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="11" data-layout="group" data-self="false" data-event-id="11" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user11:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user11:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="39" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/11" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #11</div></div></div></li></div><div class="mx_Export_EventWrapper" id="10"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="10" data-layout="group" data-self="false" data-event-id="10" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user10:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user10:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="40" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/10" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #10</div></div></div></li></div><div class="mx_Export_EventWrapper" id="9"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="9" data-layout="group" data-self="false" data-event-id="9" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user9:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user9:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="41" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/9" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #9</div></div></div></li></div><div class="mx_Export_EventWrapper" id="8"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="8" data-layout="group" data-self="false" data-event-id="8" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user8:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user8:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="42" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/8" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #8</div></div></div></li></div><div class="mx_Export_EventWrapper" id="7"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="7" data-layout="group" data-self="false" data-event-id="7" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user7:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user7:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="43" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/7" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #7</div></div></div></li></div><div class="mx_Export_EventWrapper" id="6"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="6" data-layout="group" data-self="false" data-event-id="6" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user6:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user6:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="44" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/6" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #6</div></div></div></li></div><div class="mx_Export_EventWrapper" id="5"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="5" data-layout="group" data-self="false" data-event-id="5" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user5:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user5:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="45" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/5" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #5</div></div></div></li></div><div class="mx_Export_EventWrapper" id="4"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="4" data-layout="group" data-self="false" data-event-id="4" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user4:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user4:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="46" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/4" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #4</div></div></div></li></div><div class="mx_Export_EventWrapper" id="3"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="3" data-layout="group" data-self="false" data-event-id="3" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user3:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user3:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="47" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/3" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #3</div></div></div></li></div><div class="mx_Export_EventWrapper" id="2"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="2" data-layout="group" data-self="false" data-event-id="2" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user2:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user2:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="48" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/2" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #2</div></div></div></li></div><div class="mx_Export_EventWrapper" id="1"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="1" data-layout="group" data-self="false" data-event-id="1" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user1:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user1:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="49" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/1" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #1</div></div></div></li></div><div class="mx_Export_EventWrapper" id="0"><li class="mx_EventTile" tabindex="-1" aria-live="off" aria-atomic="true" data-scroll-tokens="0" data-layout="group" data-self="false" data-event-id="0" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user0:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user0:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="50" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/0" class="mx_MessageTimestamp _content_1r034_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_1hgc7_8 _text_1hgc7_13"><div class="mx_EventTile_body translate" dir="auto">Message #0</div></div></div><div class="mx_EventTile_footer"><div class="mx_ReactionsRow _reactionsRow_1lcz2_8" role="toolbar" aria-label="Reactions"><button type="button" class="_reactionsRowButton_5v4c1_8 _reactionsRowButtonDisabled_5v4c1_26" tabindex="0" aria-label="@user0:example.com reacted with 🙃" aria-disabled="true"><span class="_reactionsRowButtonContent_5v4c1_30" aria-hidden="true">🙃</span><span class="_reactionsRowButtonCount_5v4c1_38" aria-hidden="true">1</span></button></div></div></li></div>
+                                    <li><div role="separator" aria-label="Thu, Jan 1, 1970" class="_flex_4dswl_9 mx_TimelineSeparator _timelineSeparator_yq5ye_8" style="--mx-flex-display:flex;--mx-flex-direction:row;--mx-flex-align:center;--mx-flex-justify:start;--mx-flex-gap:0;--mx-flex-wrap:nowrap"><hr role="none"/><div class="_flex_4dswl_9 _content_u6fft_8" style="--mx-flex-display:flex;--mx-flex-direction:row;--mx-flex-align:start;--mx-flex-justify:start;--mx-flex-gap:0;--mx-flex-wrap:nowrap"><h2 aria-hidden="true" class="_typography_6v6n8_153 _font-heading-lg-regular_6v6n8_121">Thu, Jan 1, 1970</h2></div><hr role="none"/></div></li><div class="mx_Export_EventWrapper" id="49"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="49" tabindex="-1" data-layout="group" data-self="false" data-event-id="49" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user49:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user49:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="1" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/49" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #49</div></div></div></li></div><div class="mx_Export_EventWrapper" id="48"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="48" tabindex="-1" data-layout="group" data-self="false" data-event-id="48" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user48:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user48:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="2" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/48" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #48</div></div></div></li></div><div class="mx_Export_EventWrapper" id="47"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="47" tabindex="-1" data-layout="group" data-self="false" data-event-id="47" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user47:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user47:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="3" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/47" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #47</div></div></div></li></div><div class="mx_Export_EventWrapper" id="46"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="46" tabindex="-1" data-layout="group" data-self="false" data-event-id="46" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user46:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user46:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="4" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/46" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #46</div></div></div></li></div><div class="mx_Export_EventWrapper" id="45"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="45" tabindex="-1" data-layout="group" data-self="false" data-event-id="45" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user45:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user45:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="5" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/45" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #45</div></div></div></li></div><div class="mx_Export_EventWrapper" id="44"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="44" tabindex="-1" data-layout="group" data-self="false" data-event-id="44" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user44:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user44:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="6" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/44" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #44</div></div></div></li></div><div class="mx_Export_EventWrapper" id="43"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="43" tabindex="-1" data-layout="group" data-self="false" data-event-id="43" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user43:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user43:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="7" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/43" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #43</div></div></div></li></div><div class="mx_Export_EventWrapper" id="42"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="42" tabindex="-1" data-layout="group" data-self="false" data-event-id="42" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user42:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user42:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="8" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/42" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #42</div></div></div></li></div><div class="mx_Export_EventWrapper" id="41"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="41" tabindex="-1" data-layout="group" data-self="false" data-event-id="41" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user41:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user41:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="9" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/41" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #41</div></div></div></li></div><div class="mx_Export_EventWrapper" id="40"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="40" tabindex="-1" data-layout="group" data-self="false" data-event-id="40" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user40:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user40:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="10" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/40" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #40</div></div></div></li></div><div class="mx_Export_EventWrapper" id="39"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="39" tabindex="-1" data-layout="group" data-self="false" data-event-id="39" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user39:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user39:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="11" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/39" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #39</div></div></div></li></div><div class="mx_Export_EventWrapper" id="38"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="38" tabindex="-1" data-layout="group" data-self="false" data-event-id="38" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user38:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user38:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="12" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/38" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #38</div></div></div></li></div><div class="mx_Export_EventWrapper" id="37"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="37" tabindex="-1" data-layout="group" data-self="false" data-event-id="37" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user37:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user37:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="13" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/37" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #37</div></div></div></li></div><div class="mx_Export_EventWrapper" id="36"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="36" tabindex="-1" data-layout="group" data-self="false" data-event-id="36" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user36:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user36:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="14" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/36" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #36</div></div></div></li></div><div class="mx_Export_EventWrapper" id="35"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="35" tabindex="-1" data-layout="group" data-self="false" data-event-id="35" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user35:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user35:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="15" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/35" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #35</div></div></div></li></div><div class="mx_Export_EventWrapper" id="34"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="34" tabindex="-1" data-layout="group" data-self="false" data-event-id="34" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user34:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user34:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="16" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/34" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #34</div></div></div></li></div><div class="mx_Export_EventWrapper" id="33"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="33" tabindex="-1" data-layout="group" data-self="false" data-event-id="33" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user33:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user33:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="17" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/33" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #33</div></div></div></li></div><div class="mx_Export_EventWrapper" id="32"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="32" tabindex="-1" data-layout="group" data-self="false" data-event-id="32" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user32:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user32:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="18" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/32" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #32</div></div></div></li></div><div class="mx_Export_EventWrapper" id="31"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="31" tabindex="-1" data-layout="group" data-self="false" data-event-id="31" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user31:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user31:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="19" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/31" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #31</div></div></div></li></div><div class="mx_Export_EventWrapper" id="30"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="30" tabindex="-1" data-layout="group" data-self="false" data-event-id="30" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user30:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user30:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="20" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/30" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #30</div></div></div></li></div><div class="mx_Export_EventWrapper" id="29"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="29" tabindex="-1" data-layout="group" data-self="false" data-event-id="29" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user29:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user29:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="21" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/29" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #29</div></div></div></li></div><div class="mx_Export_EventWrapper" id="28"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="28" tabindex="-1" data-layout="group" data-self="false" data-event-id="28" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user28:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user28:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="22" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/28" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #28</div></div></div></li></div><div class="mx_Export_EventWrapper" id="27"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="27" tabindex="-1" data-layout="group" data-self="false" data-event-id="27" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user27:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user27:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="23" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/27" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #27</div></div></div></li></div><div class="mx_Export_EventWrapper" id="26"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="26" tabindex="-1" data-layout="group" data-self="false" data-event-id="26" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user26:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user26:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="24" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/26" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #26</div></div></div></li></div><div class="mx_Export_EventWrapper" id="25"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="25" tabindex="-1" data-layout="group" data-self="false" data-event-id="25" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user25:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user25:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="25" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/25" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #25</div></div></div></li></div><div class="mx_Export_EventWrapper" id="24"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="24" tabindex="-1" data-layout="group" data-self="false" data-event-id="24" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user24:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user24:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="26" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/24" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #24</div></div></div></li></div><div class="mx_Export_EventWrapper" id="23"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="23" tabindex="-1" data-layout="group" data-self="false" data-event-id="23" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user23:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user23:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="27" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/23" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #23</div></div></div></li></div><div class="mx_Export_EventWrapper" id="22"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="22" tabindex="-1" data-layout="group" data-self="false" data-event-id="22" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user22:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user22:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="28" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/22" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #22</div></div></div></li></div><div class="mx_Export_EventWrapper" id="21"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="21" tabindex="-1" data-layout="group" data-self="false" data-event-id="21" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user21:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user21:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="29" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/21" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #21</div></div></div></li></div><div class="mx_Export_EventWrapper" id="20"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="20" tabindex="-1" data-layout="group" data-self="false" data-event-id="20" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user20:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user20:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="30" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/20" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #20</div></div></div></li></div><div class="mx_Export_EventWrapper" id="19"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="19" tabindex="-1" data-layout="group" data-self="false" data-event-id="19" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user19:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user19:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="31" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/19" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #19</div></div></div></li></div><div class="mx_Export_EventWrapper" id="18"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="18" tabindex="-1" data-layout="group" data-self="false" data-event-id="18" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user18:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user18:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="32" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/18" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #18</div></div></div></li></div><div class="mx_Export_EventWrapper" id="17"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="17" tabindex="-1" data-layout="group" data-self="false" data-event-id="17" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user17:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user17:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="33" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/17" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #17</div></div></div></li></div><div class="mx_Export_EventWrapper" id="16"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="16" tabindex="-1" data-layout="group" data-self="false" data-event-id="16" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user16:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user16:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="34" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/16" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #16</div></div></div></li></div><div class="mx_Export_EventWrapper" id="15"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="15" tabindex="-1" data-layout="group" data-self="false" data-event-id="15" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user15:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user15:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="35" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/15" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #15</div></div></div></li></div><div class="mx_Export_EventWrapper" id="14"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="14" tabindex="-1" data-layout="group" data-self="false" data-event-id="14" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user14:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user14:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="36" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/14" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #14</div></div></div></li></div><div class="mx_Export_EventWrapper" id="13"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="13" tabindex="-1" data-layout="group" data-self="false" data-event-id="13" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user13:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user13:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="37" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/13" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #13</div></div></div></li></div><div class="mx_Export_EventWrapper" id="12"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="12" tabindex="-1" data-layout="group" data-self="false" data-event-id="12" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user12:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user12:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="38" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/12" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #12</div></div></div></li></div><div class="mx_Export_EventWrapper" id="11"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="11" tabindex="-1" data-layout="group" data-self="false" data-event-id="11" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user11:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user11:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="39" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/11" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #11</div></div></div></li></div><div class="mx_Export_EventWrapper" id="10"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="10" tabindex="-1" data-layout="group" data-self="false" data-event-id="10" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user10:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user10:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="40" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/10" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #10</div></div></div></li></div><div class="mx_Export_EventWrapper" id="9"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="9" tabindex="-1" data-layout="group" data-self="false" data-event-id="9" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user9:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user9:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="41" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/9" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #9</div></div></div></li></div><div class="mx_Export_EventWrapper" id="8"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="8" tabindex="-1" data-layout="group" data-self="false" data-event-id="8" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user8:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user8:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="42" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/8" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #8</div></div></div></li></div><div class="mx_Export_EventWrapper" id="7"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="7" tabindex="-1" data-layout="group" data-self="false" data-event-id="7" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user7:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user7:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="43" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/7" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #7</div></div></div></li></div><div class="mx_Export_EventWrapper" id="6"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="6" tabindex="-1" data-layout="group" data-self="false" data-event-id="6" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user6:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user6:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="44" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/6" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #6</div></div></div></li></div><div class="mx_Export_EventWrapper" id="5"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="5" tabindex="-1" data-layout="group" data-self="false" data-event-id="5" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color2 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user5:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user5:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="45" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/5" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #5</div></div></div></li></div><div class="mx_Export_EventWrapper" id="4"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="4" tabindex="-1" data-layout="group" data-self="false" data-event-id="4" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color1 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user4:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user4:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="1" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="46" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/4" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #4</div></div></div></li></div><div class="mx_Export_EventWrapper" id="3"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="3" tabindex="-1" data-layout="group" data-self="false" data-event-id="3" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color6 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user3:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user3:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="6" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="47" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/3" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #3</div></div></div></li></div><div class="mx_Export_EventWrapper" id="2"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="2" tabindex="-1" data-layout="group" data-self="false" data-event-id="2" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color5 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user2:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user2:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="5" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="48" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/2" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #2</div></div></div></li></div><div class="mx_Export_EventWrapper" id="1"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="1" tabindex="-1" data-layout="group" data-self="false" data-event-id="1" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color4 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user1:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user1:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="4" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="49" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/1" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #1</div></div></div></li></div><div class="mx_Export_EventWrapper" id="0"><li class="mx_EventTile" aria-live="off" aria-atomic="true" data-scroll-tokens="0" tabindex="-1" data-layout="group" data-self="false" data-event-id="0" data-has-reply="false"><div class="mx_DisambiguatedProfile _disambiguatedProfile_4jooo_8" role="button" tabindex="0"><span class="mx_Username_color3 _disambiguatedProfile_displayName_4jooo_14 mx_DisambiguatedProfile_displayName" dir="auto">@user0:example.com</span></div><div class="mx_EventTile_avatar"><button role="button" aria-label="Profile picture" title="@user0:example.com" aria-live="off" data-testid="avatar-img" data-type="round" data-color="3" class="_avatar_va14e_8 mx_BaseAvatar _avatar-imageless_va14e_55" style="--cpd-avatar-size: 30px;">u</button></div><div id="50" class="mx_EventTile_line"><a href="https://matrix.to/#/!myroom:example.org/0" class="mx_MessageTimestamp _content_1jaux_8" aria-live="off">00:00</a><div class="mx_MTextBody mx_EventTile_content _root_dlp6w_8 _text_dlp6w_13"><div class="mx_EventTile_body translate" dir="auto">Message #0</div></div></div><div class="mx_EventTile_footer"><div class="mx_ReactionsRow _reactionsRow_1lcz2_8" role="toolbar" aria-label="Reactions"><button type="button" class="_reactionsRowButton_5v4c1_8 _reactionsRowButtonDisabled_5v4c1_26" tabindex="0" aria-label="@user0:example.com reacted with 🙃" aria-disabled="true"><span class="_reactionsRowButtonContent_5v4c1_30" aria-hidden="true">🙃</span><span class="_reactionsRowButtonCount_5v4c1_38" aria-hidden="true">1</span></button></div></div></li></div>
                                     </ol>
                                     </div>
                                 </div>
diff --git a/apps/web/test/unit-tests/utils/exportUtils/__snapshots__/JSONExport-test.ts.snap b/apps/web/test/unit-tests/utils/exportUtils/__snapshots__/JSONExport-test.ts.snap
index b8d2c3ce18..70410b2b24 100644
--- a/apps/web/test/unit-tests/utils/exportUtils/__snapshots__/JSONExport-test.ts.snap
+++ b/apps/web/test/unit-tests/utils/exportUtils/__snapshots__/JSONExport-test.ts.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`JSONExport should have a Matrix-branded destination file name 1`] = `"matrix - My  Test  Room Welcome - Chat Export - 2022-11-17T16-58-32.517Z.json"`;
+exports[`JSONExport should have an Element-branded destination file name 1`] = `"Element - My  Test  Room Welcome - Chat Export - 2022-11-17T16-58-32.517Z.json"`;
diff --git a/apps/web/test/unit-tests/utils/exportUtils/__snapshots__/PlainTextExport-test.ts.snap b/apps/web/test/unit-tests/utils/exportUtils/__snapshots__/PlainTextExport-test.ts.snap
index de3cff0d55..6c9f5ab29d 100644
--- a/apps/web/test/unit-tests/utils/exportUtils/__snapshots__/PlainTextExport-test.ts.snap
+++ b/apps/web/test/unit-tests/utils/exportUtils/__snapshots__/PlainTextExport-test.ts.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`PlainTextExport should have a Matrix-branded destination file name 1`] = `"matrix - My  Test  Room Welcome - Chat Export - 2022-11-17T16-58-32.517Z.txt"`;
+exports[`PlainTextExport should have an Element-branded destination file name 1`] = `"Element - My  Test  Room Welcome - Chat Export - 2022-11-17T16-58-32.517Z.txt"`;
diff --git a/apps/web/test/unit-tests/utils/i18n-helpers-test.ts b/apps/web/test/unit-tests/utils/i18n-helpers-test.ts
index 04e7212264..96fe1b5d53 100644
--- a/apps/web/test/unit-tests/utils/i18n-helpers-test.ts
+++ b/apps/web/test/unit-tests/utils/i18n-helpers-test.ts
@@ -9,10 +9,10 @@ Please see LICENSE files in the repository root for full details.
 import { Room } from "matrix-js-sdk/src/matrix";
 import { mocked } from "jest-mock";
 
-import SpaceStore from "../../../src/stores/spaces/SpaceStore";
 import { stubClient } from "../../test-utils";
 import { roomContextDetails } from "../../../src/utils/i18n-helpers";
 import DMRoomMap from "../../../src/utils/DMRoomMap";
+import { SDKContextClass } from "../../../src/contexts/SDKContextClass.ts";
 
 describe("roomContextDetails", () => {
     const client = stubClient();
@@ -30,21 +30,23 @@ describe("roomContextDetails", () => {
     });
 
     it("should return 1-parent variant", () => {
-        jest.spyOn(SpaceStore.instance, "getKnownParents").mockReturnValue(new Set([parent1.roomId]));
+        jest.spyOn(SDKContextClass.instance.spaceStore, "getKnownParents").mockReturnValue(new Set([parent1.roomId]));
         const res = roomContextDetails(room);
         expect(res!.details).toMatchInlineSnapshot(`"Alpha"`);
         expect(res!.ariaLabel).toMatchInlineSnapshot(`"In Alpha."`);
     });
 
     it("should return 2-parent variant", () => {
-        jest.spyOn(SpaceStore.instance, "getKnownParents").mockReturnValue(new Set([parent2.roomId, parent3.roomId]));
+        jest.spyOn(SDKContextClass.instance.spaceStore, "getKnownParents").mockReturnValue(
+            new Set([parent2.roomId, parent3.roomId]),
+        );
         const res = roomContextDetails(room);
         expect(res!.details).toMatchInlineSnapshot(`"Beta and Charlie"`);
         expect(res!.ariaLabel).toMatchInlineSnapshot(`"In spaces Beta and Charlie."`);
     });
 
     it("should return n-parent variant", () => {
-        jest.spyOn(SpaceStore.instance, "getKnownParents").mockReturnValue(
+        jest.spyOn(SDKContextClass.instance.spaceStore, "getKnownParents").mockReturnValue(
             new Set([parent1.roomId, parent2.roomId, parent3.roomId]),
         );
         const res = roomContextDetails(room);
diff --git a/apps/web/test/unit-tests/utils/media/requestMediaPermissions-test.tsx b/apps/web/test/unit-tests/utils/media/requestMediaPermissions-test.ts
similarity index 100%
rename from apps/web/test/unit-tests/utils/media/requestMediaPermissions-test.tsx
rename to apps/web/test/unit-tests/utils/media/requestMediaPermissions-test.ts
diff --git a/apps/web/test/unit-tests/utils/messages-test.ts b/apps/web/test/unit-tests/utils/messages-test.ts
index 12d0242e3c..6df5ae5f01 100644
--- a/apps/web/test/unit-tests/utils/messages-test.ts
+++ b/apps/web/test/unit-tests/utils/messages-test.ts
@@ -7,11 +7,84 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type IContent } from "matrix-js-sdk/src/matrix";
+import { type MessageComposerUrlPreviewSnapshot } from "@element-hq/web-shared-components";
 
-import { attachMentions } from "../../../src/utils/messages";
+import { attachMentions, attachUrlPreviews } from "../../../src/utils/messages";
 import EditorModel from "../../../src/editor/model";
 import { mkEvent } from "../../test-utils";
 import { createPartCreator } from "../editor/mock";
+import { type RoomMessageEventContent } from "../../../@types/url-preview";
+import SettingsStore from "../../../src/settings/SettingsStore";
+
+describe("attachUrlPreviews", () => {
+    beforeEach(() => {
+        const original = SettingsStore.getValue;
+        jest.spyOn(SettingsStore, "getValue").mockImplementation(
+            (setting) => setting === "feature_msc4095_url_preview_bundle" || original(setting),
+        );
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    const makeContent = (): RoomMessageEventContent =>
+        ({ msgtype: "m.text", body: "hi https://example.com" }) as RoomMessageEventContent;
+
+    const snapshot = (image?: object): MessageComposerUrlPreviewSnapshot => ({
+        previews: [
+            {
+                link: "https://example.com",
+                showTooltipOnLink: false,
+                title: "Example",
+                siteName: "example.com",
+                description: "desc",
+                ...(image ? { image } : {}),
+            } as any,
+        ],
+        content: "https://example.com",
+    });
+
+    it("does nothing when there are no previews", () => {
+        const content = makeContent();
+        attachUrlPreviews({ previews: [], content: "" }, content);
+        expect(content["com.beeper.linkpreviews"]).toBeUndefined();
+    });
+
+    it("attaches a preview with no image", () => {
+        const content = makeContent();
+        attachUrlPreviews(snapshot(), content);
+        expect(content["com.beeper.linkpreviews"]).toEqual([
+            expect.objectContaining({ "og:title": "Example", "og:image": undefined }),
+        ]);
+    });
+
+    it("embeds the mxc url from the preview image", () => {
+        const content = makeContent();
+        attachUrlPreviews(
+            snapshot({
+                imageThumb: "",
+                imageFull: "https://example.com/full.png",
+                mxcImageFull: "mxc://server/img",
+                imageType: "image/png",
+                fileSize: 1234,
+                width: 100,
+                height: 50,
+                playable: false,
+            }),
+            content,
+        );
+
+        expect(content["com.beeper.linkpreviews"]![0]).toEqual(
+            expect.objectContaining({
+                "og:image": "mxc://server/img",
+                "og:image:width": 100,
+                "og:image:type": "image/png",
+                "matrix:image:size": 1234,
+            }),
+        );
+    });
+});
 
 describe("attachMentions", () => {
     const partsCreator = createPartCreator();
diff --git a/apps/web/test/unit-tests/utils/notifications-test.ts b/apps/web/test/unit-tests/utils/notifications-test.ts
index 5a416deede..8ea288d2d5 100644
--- a/apps/web/test/unit-tests/utils/notifications-test.ts
+++ b/apps/web/test/unit-tests/utils/notifications-test.ts
@@ -14,7 +14,7 @@ import {
     ReceiptType,
     type AccountDataEvents,
 } from "matrix-js-sdk/src/matrix";
-import { type Mocked, mocked } from "jest-mock";
+import { type Mocked, mocked } from "jest-mock-vitest-adapter";
 
 import {
     localNotificationsAreSilenced,
diff --git a/apps/web/test/unit-tests/utils/oidc/authorize-test.ts b/apps/web/test/unit-tests/utils/oauth/authorize-test.ts
similarity index 59%
rename from apps/web/test/unit-tests/utils/oidc/authorize-test.ts
rename to apps/web/test/unit-tests/utils/oauth/authorize-test.ts
index b7bd2bfd9f..020535b10c 100644
--- a/apps/web/test/unit-tests/utils/oidc/authorize-test.ts
+++ b/apps/web/test/unit-tests/utils/oauth/authorize-test.ts
@@ -6,36 +6,29 @@ 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 fetchMock from "@fetch-mock/jest";
-import { completeAuthorizationCodeGrant } from "matrix-js-sdk/src/oidc/authorize";
+import { OAuth2, type BearerTokenResponse } from "matrix-js-sdk/src/matrix";
 import * as randomStringUtils from "matrix-js-sdk/src/randomstring";
-import { type BearerTokenResponse } from "matrix-js-sdk/src/oidc/validate";
-import { mocked } from "jest-mock";
 import { Crypto } from "@peculiar/webcrypto";
 import { getRandomValues } from "node:crypto";
 
-import { completeOidcLogin, startOidcLogin } from "../../../../src/utils/oidc/authorize";
-import { makeDelegatedAuthConfig } from "../../../test-utils/oidc";
-import { OidcClientError } from "../../../../src/utils/oidc/error";
+import { completeOAuthLogin, startOAuthLogin } from "../../../../src/utils/oauth/authorize";
+import { makeDelegatedAuthMetadata } from "../../../test-utils/auth";
+import { OAuthClientError } from "../../../../src/utils/oauth/error";
 import { mockPlatformPeg } from "../../../test-utils";
+import { storeAuthContext } from "../../../../src/utils/oauth/persistOAuthSettings.ts";
 
 jest.unmock("matrix-js-sdk/src/randomstring");
 
-jest.mock("matrix-js-sdk/src/oidc/authorize", () => ({
-    ...jest.requireActual("matrix-js-sdk/src/oidc/authorize"),
-    completeAuthorizationCodeGrant: jest.fn(),
-}));
-
 const webCrypto = new Crypto();
 
-describe("OIDC authorization", () => {
+describe("OAuth2 authorization", () => {
     const issuer = "https://auth.com/";
     const homeserverUrl = "https://matrix.org";
     const identityServerUrl = "https://is.org";
     const clientId = "xyz789";
     const baseUrl = "https://test.com";
 
-    const delegatedAuthConfig = makeDelegatedAuthConfig(issuer);
+    const delegatedAuthConfig = makeDelegatedAuthMetadata(issuer);
 
     // to restore later
     const realWindowLocation = window.location;
@@ -58,8 +51,6 @@ describe("OIDC authorization", () => {
                 subtle: webCrypto.subtle,
             },
         });
-
-        fetchMock.get(`${delegatedAuthConfig.issuer}.well-known/openid-configuration`, delegatedAuthConfig);
     });
 
     afterAll(() => {
@@ -67,15 +58,15 @@ describe("OIDC authorization", () => {
         window.location = realWindowLocation;
     });
 
-    describe("startOidcLogin()", () => {
+    describe("startOAuthLogin()", () => {
         it("navigates to authorization endpoint with correct parameters", async () => {
-            await startOidcLogin(delegatedAuthConfig, clientId, homeserverUrl);
+            await startOAuthLogin(delegatedAuthConfig, clientId, homeserverUrl);
 
-            const expectedScopeWithoutDeviceId = `openid urn:matrix:org.matrix.msc2967.client:api:* urn:matrix:org.matrix.msc2967.client:device:`;
+            const expectedScopeWithoutDeviceId = `urn:matrix:client:api:* urn:matrix:client:device:`;
 
             const authUrl = new URL(window.location.href);
 
-            expect(authUrl.searchParams.get("response_mode")).toEqual("query");
+            expect(authUrl.searchParams.get("response_mode")).toEqual("fragment");
             expect(authUrl.searchParams.get("response_type")).toEqual("code");
             expect(authUrl.searchParams.get("client_id")).toEqual(clientId);
             expect(authUrl.searchParams.get("code_challenge_method")).toEqual("S256");
@@ -87,12 +78,11 @@ describe("OIDC authorization", () => {
 
             // random string, just check they are set
             expect(authUrl.searchParams.has("state")).toBeTruthy();
-            expect(authUrl.searchParams.has("nonce")).toBeTruthy();
             expect(authUrl.searchParams.has("code_challenge")).toBeTruthy();
         });
 
         it("should prefer response_mode fragment if supported", async () => {
-            await startOidcLogin(
+            await startOAuthLogin(
                 { ...delegatedAuthConfig, response_modes_supported: ["query", "fragment"] },
                 clientId,
                 homeserverUrl,
@@ -104,68 +94,59 @@ describe("OIDC authorization", () => {
         });
     });
 
-    describe("completeOidcLogin()", () => {
+    describe("completeOAuth2Login()", () => {
         const state = "test-state-444";
         const code = "test-code-777";
         const params = {
             code,
-            state: state,
+            state,
         };
 
         const tokenResponse: BearerTokenResponse = {
             access_token: "abc123",
             refresh_token: "def456",
-            id_token: "ghi789",
             scope: "test",
             token_type: "Bearer",
-            expires_at: 12345,
+            expires_in: 12345,
         };
 
         beforeEach(() => {
-            mocked(completeAuthorizationCodeGrant)
-                .mockClear()
-                .mockResolvedValue({
-                    oidcClientSettings: {
-                        clientId,
-                        issuer,
-                    },
-                    tokenResponse,
-                    homeserverUrl,
-                    identityServerUrl,
-                    idTokenClaims: {
-                        aud: "123",
-                        iss: issuer,
-                        sub: "123",
-                        exp: 123,
-                        iat: 456,
-                    },
-                });
+            jest.spyOn(OAuth2.prototype, "completeAuthorizationCodeGrant").mockResolvedValue(tokenResponse);
+            storeAuthContext({
+                state,
+                homeserverUrl,
+                metadata: delegatedAuthConfig,
+                identityServerUrl,
+                authContext: {
+                    codeVerifier: "123456",
+                    clientId,
+                    deviceId: "DEADB33F",
+                    redirectUri: "https://test.com/callback",
+                },
+            });
         });
 
-        it("should throw when query params do not include state and code", async () => {
-            await expect(async () => await completeOidcLogin({}, "query")).rejects.toThrow(
-                OidcClientError.InvalidQueryParameters,
+        it("should throw when fragment params do not include state and code", async () => {
+            await expect(async () => await completeOAuthLogin({})).rejects.toThrow(
+                OAuthClientError.InvalidFragmentParameters,
             );
         });
 
         it("should make request complete authorization code grant", async () => {
-            await completeOidcLogin(params, "fragment");
+            await completeOAuthLogin(params);
 
-            expect(completeAuthorizationCodeGrant).toHaveBeenCalledWith(code, state, "fragment");
+            expect(OAuth2.prototype.completeAuthorizationCodeGrant).toHaveBeenCalledWith(code);
         });
 
         it("should return accessToken, configured homeserver and identityServer", async () => {
-            const result = await completeOidcLogin(params, "query");
+            const result = await completeOAuthLogin(params);
 
             expect(result).toEqual({
                 accessToken: tokenResponse.access_token,
                 refreshToken: tokenResponse.refresh_token,
                 homeserverUrl,
                 identityServerUrl,
-                issuer,
                 clientId,
-                idToken: "ghi789",
-                idTokenClaims: result.idTokenClaims,
             });
         });
     });
diff --git a/apps/web/test/unit-tests/utils/oidc/registerClient-test.ts b/apps/web/test/unit-tests/utils/oauth/registerClient-test.ts
similarity index 55%
rename from apps/web/test/unit-tests/utils/oidc/registerClient-test.ts
rename to apps/web/test/unit-tests/utils/oauth/registerClient-test.ts
index 4a81dab1af..8fce33000c 100644
--- a/apps/web/test/unit-tests/utils/oidc/registerClient-test.ts
+++ b/apps/web/test/unit-tests/utils/oauth/registerClient-test.ts
@@ -7,25 +7,24 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import fetchMock from "@fetch-mock/jest";
-import { OidcError } from "matrix-js-sdk/src/oidc/error";
-import { type OidcClientConfig } from "matrix-js-sdk/src/matrix";
+import { OAuth2Error } from "matrix-js-sdk/src/matrix";
 
-import { getOidcClientId } from "../../../../src/utils/oidc/registerClient";
+import { getOAuthClientId } from "../../../../src/utils/oauth/registerClient";
 import { mockPlatformPeg } from "../../../test-utils";
 import PlatformPeg from "../../../../src/PlatformPeg";
-import { makeDelegatedAuthConfig } from "../../../test-utils/oidc";
+import { makeDelegatedAuthMetadata } from "../../../test-utils/auth";
 
-describe("getOidcClientId()", () => {
+describe("getOAuthClientId()", () => {
     const issuer = "https://auth.com/";
     const clientName = "Element";
     const baseUrl = "https://just.testing";
     const dynamicClientId = "xyz789";
-    const staticOidcClients = {
+    const staticOAuthClients = {
         [issuer]: {
             client_id: "abc123",
         },
     };
-    const delegatedAuthConfig = makeDelegatedAuthConfig(issuer);
+    const delegatedAuthConfig = makeDelegatedAuthMetadata(issuer);
 
     beforeEach(() => {
         fetchMock.removeRoutes();
@@ -35,12 +34,12 @@ describe("getOidcClientId()", () => {
                 return baseUrl;
             },
         });
-        Object.defineProperty(PlatformPeg.get(), "defaultOidcClientUri", {
+        Object.defineProperty(PlatformPeg.get(), "defaultOAuthClientUri", {
             get(): string {
                 return baseUrl;
             },
         });
-        Object.defineProperty(PlatformPeg.get(), "getOidcCallbackUrl", {
+        Object.defineProperty(PlatformPeg.get(), "getOAuthCallbackUrl", {
             value: () => ({
                 href: baseUrl,
             }),
@@ -48,31 +47,7 @@ describe("getOidcClientId()", () => {
     });
 
     it("should return static clientId when configured", async () => {
-        expect(await getOidcClientId(delegatedAuthConfig, staticOidcClients)).toEqual("abc123");
-        // didn't try to register
-        expect(fetchMock).toHaveFetchedTimes(0);
-    });
-
-    it("should throw when no static clientId is configured and no registration endpoint", async () => {
-        const authConfigWithoutRegistration: OidcClientConfig = makeDelegatedAuthConfig(
-            "https://issuerWithoutStaticClientId.org/",
-        );
-        authConfigWithoutRegistration.registration_endpoint = undefined;
-        await expect(getOidcClientId(authConfigWithoutRegistration, staticOidcClients)).rejects.toThrow(
-            OidcError.DynamicRegistrationNotSupported,
-        );
-        // didn't try to register
-        expect(fetchMock).toHaveFetchedTimes(0);
-    });
-
-    it("should handle when staticOidcClients object is falsy", async () => {
-        const authConfigWithoutRegistration: OidcClientConfig = {
-            ...delegatedAuthConfig,
-            registration_endpoint: undefined,
-        };
-        await expect(getOidcClientId(authConfigWithoutRegistration)).rejects.toThrow(
-            OidcError.DynamicRegistrationNotSupported,
-        );
+        expect(await getOAuthClientId(delegatedAuthConfig, staticOAuthClients)).toEqual("abc123");
         // didn't try to register
         expect(fetchMock).toHaveFetchedTimes(0);
     });
@@ -82,7 +57,7 @@ describe("getOidcClientId()", () => {
             status: 200,
             body: JSON.stringify({ client_id: dynamicClientId }),
         });
-        expect(await getOidcClientId(delegatedAuthConfig)).toEqual(dynamicClientId);
+        expect(await getOAuthClientId(delegatedAuthConfig)).toEqual(dynamicClientId);
         // didn't try to register
         expect(fetchMock).toHaveFetched(delegatedAuthConfig.registration_endpoint!, {
             headers: {
@@ -96,7 +71,6 @@ describe("getOidcClientId()", () => {
                 response_types: ["code"],
                 grant_types: ["authorization_code", "refresh_token"],
                 redirect_uris: [baseUrl],
-                id_token_signed_response_alg: "RS256",
                 token_endpoint_auth_method: "none",
                 application_type: "web",
                 logo_uri: `${baseUrl}/vector-icons/1024.png`,
@@ -108,7 +82,7 @@ describe("getOidcClientId()", () => {
         fetchMock.post(delegatedAuthConfig.registration_endpoint!, {
             status: 500,
         });
-        await expect(getOidcClientId(delegatedAuthConfig)).rejects.toThrow(OidcError.DynamicRegistrationFailed);
+        await expect(getOAuthClientId(delegatedAuthConfig)).rejects.toThrow(OAuth2Error.DynamicRegistrationFailed);
     });
 
     it("should throw when registration response is invalid", async () => {
@@ -117,6 +91,6 @@ describe("getOidcClientId()", () => {
             // no clientId in response
             body: "{}",
         });
-        await expect(getOidcClientId(delegatedAuthConfig)).rejects.toThrow(OidcError.DynamicRegistrationInvalid);
+        await expect(getOAuthClientId(delegatedAuthConfig)).rejects.toThrow(OAuth2Error.DynamicRegistrationInvalid);
     });
 });
diff --git a/apps/web/test/unit-tests/utils/oidc/TokenRefresher-test.ts b/apps/web/test/unit-tests/utils/oidc/TokenRefresher-test.ts
deleted file mode 100644
index b5d9218200..0000000000
--- a/apps/web/test/unit-tests/utils/oidc/TokenRefresher-test.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2023 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import fetchMock from "@fetch-mock/jest";
-import { mocked } from "jest-mock";
-
-import { TokenRefresher } from "../../../../src/utils/oidc/TokenRefresher";
-import { persistAccessTokenInStorage, persistRefreshTokenInStorage } from "../../../../src/utils/tokens/tokens";
-import { mockPlatformPeg } from "../../../test-utils";
-import { makeDelegatedAuthConfig } from "../../../test-utils/oidc";
-
-jest.mock("../../../../src/utils/tokens/tokens", () => ({
-    persistAccessTokenInStorage: jest.fn(),
-    persistRefreshTokenInStorage: jest.fn(),
-}));
-
-describe("TokenRefresher", () => {
-    const clientId = "test-client-id";
-    const issuer = "https://auth.com/";
-    const redirectUri = "https://test.com";
-    const deviceId = "test-device-id";
-    const userId = "@alice:server.org";
-    const accessToken = "test-access-token";
-    const refreshToken = "test-refresh-token";
-
-    const authConfig = makeDelegatedAuthConfig(issuer);
-    const idTokenClaims = {
-        aud: "123",
-        iss: issuer,
-        sub: "123",
-        exp: 123,
-        iat: 456,
-    };
-
-    beforeEach(() => {
-        fetchMock.get(`${issuer}.well-known/openid-configuration`, authConfig);
-        fetchMock.get(`${issuer}jwks`, {
-            status: 200,
-            headers: {
-                "Content-Type": "application/json",
-            },
-            keys: [],
-        });
-
-        mocked(persistAccessTokenInStorage).mockResolvedValue(undefined);
-        mocked(persistRefreshTokenInStorage).mockResolvedValue(undefined);
-    });
-
-    afterEach(() => {
-        jest.restoreAllMocks();
-    });
-
-    it("should persist tokens with a pickle key", async () => {
-        const pickleKey = "test-pickle-key";
-        const getPickleKey = jest.fn().mockResolvedValue(pickleKey);
-        mockPlatformPeg({ getPickleKey });
-
-        const refresher = new TokenRefresher(issuer, clientId, redirectUri, deviceId, idTokenClaims, userId);
-
-        await refresher.oidcClientReady;
-
-        await refresher.persistTokens({ accessToken, refreshToken });
-
-        expect(getPickleKey).toHaveBeenCalledWith(userId, deviceId);
-        expect(persistAccessTokenInStorage).toHaveBeenCalledWith(accessToken, pickleKey);
-        expect(persistRefreshTokenInStorage).toHaveBeenCalledWith(refreshToken, pickleKey);
-    });
-
-    it("should persist tokens without a pickle key", async () => {
-        const getPickleKey = jest.fn().mockResolvedValue(null);
-        mockPlatformPeg({ getPickleKey });
-
-        const refresher = new TokenRefresher(issuer, clientId, redirectUri, deviceId, idTokenClaims, userId);
-
-        await refresher.oidcClientReady;
-
-        await refresher.persistTokens({ accessToken, refreshToken });
-
-        expect(getPickleKey).toHaveBeenCalledWith(userId, deviceId);
-        expect(persistAccessTokenInStorage).toHaveBeenCalledWith(accessToken, undefined);
-        expect(persistRefreshTokenInStorage).toHaveBeenCalledWith(refreshToken, undefined);
-    });
-});
diff --git a/apps/web/test/unit-tests/utils/oidc/persistOidcSettings-test.ts b/apps/web/test/unit-tests/utils/oidc/persistOidcSettings-test.ts
deleted file mode 100644
index 86695b4c26..0000000000
--- a/apps/web/test/unit-tests/utils/oidc/persistOidcSettings-test.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2023 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { type IdTokenClaims } from "oidc-client-ts";
-import { decodeIdToken } from "matrix-js-sdk/src/matrix";
-import { mocked } from "jest-mock";
-
-import {
-    getStoredOidcClientId,
-    getStoredOidcIdToken,
-    getStoredOidcIdTokenClaims,
-    getStoredOidcTokenIssuer,
-    persistOidcAuthenticatedSettings,
-} from "../../../../src/utils/oidc/persistOidcSettings";
-
-jest.mock("matrix-js-sdk/src/matrix");
-
-describe("persist OIDC settings", () => {
-    jest.spyOn(Storage.prototype, "getItem");
-    jest.spyOn(Storage.prototype, "setItem");
-
-    beforeEach(() => {
-        localStorage.clear();
-    });
-
-    const clientId = "test-client-id";
-    const issuer = "https://auth.org/";
-    const idToken = "test-id-token";
-    const idTokenClaims: IdTokenClaims = {
-        // audience is this client
-        aud: "123",
-        // issuer matches
-        iss: issuer,
-        sub: "123",
-        exp: 123,
-        iat: 456,
-    };
-
-    describe("persistOidcAuthenticatedSettings", () => {
-        it("should set clientId and issuer in localStorage", () => {
-            persistOidcAuthenticatedSettings(clientId, issuer, idToken);
-            expect(localStorage.setItem).toHaveBeenCalledWith("mx_oidc_client_id", clientId);
-            expect(localStorage.setItem).toHaveBeenCalledWith("mx_oidc_token_issuer", issuer);
-            expect(localStorage.setItem).toHaveBeenCalledWith("mx_oidc_id_token", idToken);
-        });
-
-        it("should not set idToken in localStorage when idToken is undefined", () => {
-            persistOidcAuthenticatedSettings(clientId, issuer, undefined);
-            expect(localStorage.setItem).toHaveBeenCalledWith("mx_oidc_client_id", clientId);
-            expect(localStorage.setItem).toHaveBeenCalledWith("mx_oidc_token_issuer", issuer);
-            expect(localStorage.getItem("mx_oidc_id_token")).toBeFalsy();
-        });
-    });
-
-    describe("getStoredOidcTokenIssuer()", () => {
-        it("should return issuer from localStorage", () => {
-            localStorage.setItem("mx_oidc_token_issuer", issuer);
-            expect(getStoredOidcTokenIssuer()).toEqual(issuer);
-            expect(localStorage.getItem).toHaveBeenCalledWith("mx_oidc_token_issuer");
-        });
-
-        it("should return undefined when no issuer in localStorage", () => {
-            expect(getStoredOidcTokenIssuer()).toBeUndefined();
-        });
-    });
-
-    describe("getStoredOidcClientId()", () => {
-        it("should return clientId from localStorage", () => {
-            localStorage.setItem("mx_oidc_client_id", clientId);
-            expect(getStoredOidcClientId()).toEqual(clientId);
-            expect(localStorage.getItem).toHaveBeenCalledWith("mx_oidc_client_id");
-        });
-        it("should throw when no clientId in localStorage", () => {
-            expect(() => getStoredOidcClientId()).toThrow("Oidc client id not found in storage");
-        });
-    });
-
-    describe("getStoredOidcIdToken()", () => {
-        it("should return token from localStorage", () => {
-            localStorage.setItem("mx_oidc_id_token", idToken);
-            expect(getStoredOidcIdToken()).toEqual(idToken);
-            expect(localStorage.getItem).toHaveBeenCalledWith("mx_oidc_id_token");
-        });
-
-        it("should return undefined when no token in localStorage", () => {
-            expect(getStoredOidcIdToken()).toBeUndefined();
-        });
-    });
-
-    describe("getStoredOidcIdTokenClaims()", () => {
-        it("should return claims from localStorage", () => {
-            localStorage.setItem("mx_oidc_id_token_claims", JSON.stringify(idTokenClaims));
-            expect(getStoredOidcIdTokenClaims()).toEqual(idTokenClaims);
-            expect(localStorage.getItem).toHaveBeenCalledWith("mx_oidc_id_token_claims");
-        });
-
-        it("should return claims extracted from id_token in localStorage", () => {
-            localStorage.setItem("mx_oidc_id_token", idToken);
-            mocked(decodeIdToken).mockReturnValue(idTokenClaims);
-            expect(getStoredOidcIdTokenClaims()).toEqual(idTokenClaims);
-            expect(decodeIdToken).toHaveBeenCalledWith(idToken);
-            expect(localStorage.getItem).toHaveBeenCalledWith("mx_oidc_id_token_claims");
-        });
-
-        it("should return undefined when no claims in localStorage", () => {
-            expect(getStoredOidcIdTokenClaims()).toBeUndefined();
-        });
-    });
-});
diff --git a/apps/web/test/unit-tests/vector/app-test.ts b/apps/web/test/unit-tests/vector/app-test.ts
deleted file mode 100644
index fa95a0053b..0000000000
--- a/apps/web/test/unit-tests/vector/app-test.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-/**
- * @jest-environment jest-fixed-jsdom
- * @jest-environment-options {"url": "https://app.element.io/#/room/#room:server"}
- */
-
-/*
-Copyright 2026 Element Creations 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 fetchMock from "@fetch-mock/jest";
-import { MatrixClient } from "matrix-js-sdk/src/matrix";
-import { Crypto } from "@peculiar/webcrypto";
-
-import { loadApp } from "../../../src/vector/app.tsx";
-import SdkConfig from "../../../src/SdkConfig.ts";
-import PlatformPeg from "../../../src/PlatformPeg.ts";
-import { mockPlatformPeg, unmockPlatformPeg } from "../../test-utils";
-import { makeDelegatedAuthConfig } from "../../test-utils/oidc";
-
-const defaultConfig = {
-    default_hs_url: "https://synapse",
-};
-const issuer = "https://auth.org/";
-const webCrypto = new Crypto();
-
-describe("sso_redirect_options", () => {
-    beforeAll(() => {
-        Object.defineProperty(window, "crypto", {
-            value: {
-                // Stable stub
-                getRandomValues: (arr: Uint8Array) => {
-                    for (let i = 0; i < arr.length; i++) {
-                        arr[i] = i;
-                    }
-                    return arr;
-                },
-                subtle: webCrypto.subtle,
-            },
-        });
-    });
-
-    beforeEach(() => {
-        SdkConfig.reset();
-        mockPlatformPeg({ getDefaultDeviceDisplayName: jest.fn(), startSingleSignOn: jest.fn() });
-    });
-
-    afterAll(() => {
-        unmockPlatformPeg();
-    });
-
-    describe("immediate", () => {
-        beforeEach(() => {
-            SdkConfig.put({
-                ...defaultConfig,
-                sso_redirect_options: { immediate: true },
-                // Avoid testing dynamic client registration
-                oidc_static_clients: { [issuer]: { client_id: "12345" } },
-            });
-            // Signal we support v1.1 to pass the minimum js-sdk compatibility bar
-            // Signal we support v1.15 to use stable Native OIDC support
-            fetchMock.get("https://synapse/_matrix/client/versions", { versions: ["v1.1", "v1.15"] });
-        });
-
-        it("should redirect for legacy SSO", async () => {
-            fetchMock.getOnce("https://synapse/_matrix/client/v3/login", {
-                flows: [{ stages: ["m.login.sso"] }],
-            });
-
-            const startSingleSignOnSpy = jest.spyOn(PlatformPeg.get()!, "startSingleSignOn");
-
-            await loadApp({}, jest.fn());
-            expect(startSingleSignOnSpy).toHaveBeenCalledWith(expect.any(MatrixClient), "sso", "/room/#room:server");
-        });
-
-        it("should redirect for native OIDC", async () => {
-            const authConfig = { ...makeDelegatedAuthConfig(issuer), response_modes_supported: ["query", "fragment"] };
-            fetchMock.get("https://synapse/_matrix/client/v1/auth_metadata", authConfig);
-            fetchMock.get(`${authConfig.issuer}.well-known/openid-configuration`, authConfig);
-            fetchMock.get(authConfig.jwks_uri!, { keys: [] });
-
-            const startOidcLoginSpy = jest.spyOn(window.location, "href", "set");
-
-            await loadApp({}, jest.fn());
-            expect(startOidcLoginSpy).toHaveBeenCalledWith(
-                "https://auth.org/auth?client_id=12345&redirect_uri=https%3A%2F%2Fapp.element.io%2F%3Fno_universal_links%3Dtrue&response_type=code&scope=openid+urn%3Amatrix%3Aorg.matrix.msc2967.client%3Aapi%3A*+urn%3Amatrix%3Aorg.matrix.msc2967.client%3Adevice%3AwKpa6hpi3Y&nonce=38QgU2Pomx&state=10000000100040008000100000000000&code_challenge=awE81eIsGff70JahvrTqWRbGKLI10ooyo_Xm1sxuZvU&code_challenge_method=S256&response_mode=fragment",
-            );
-        });
-    });
-});
diff --git a/apps/web/test/unit-tests/viewmodels/room/timeline/event-tile/EventPreviewViewModel-test.tsx b/apps/web/test/unit-tests/viewmodels/room/timeline/event-tile/EventPreviewViewModel-test.tsx
new file mode 100644
index 0000000000..62994994af
--- /dev/null
+++ b/apps/web/test/unit-tests/viewmodels/room/timeline/event-tile/EventPreviewViewModel-test.tsx
@@ -0,0 +1,163 @@
+/*
+ * Copyright 2026 Element Creations 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 { render, screen, waitFor } from "jest-matrix-react";
+import { EventType, type MatrixClient, MatrixEvent, MsgType } from "matrix-js-sdk/src/matrix";
+
+import { EventPreviewViewModel } from "../../../../../../src/viewmodels/room/timeline/event-tile/EventPreviewViewModel";
+import { mkEvent, stubClient } from "../../../../../test-utils";
+
+describe("EventPreviewViewModel", () => {
+    const roomId = "!room:example.com";
+    const userId = "@alice:example.com";
+
+    let cli: MatrixClient;
+    let decryptEventIfNeeded: jest.SpiedFunction<MatrixClient["decryptEventIfNeeded"]>;
+
+    const makeMessageEvent = ({
+        body = "Hello",
+        msgtype = MsgType.Text,
+    }: {
+        body?: string;
+        msgtype?: MsgType;
+    } = {}): MatrixEvent =>
+        mkEvent({
+            event: true,
+            type: EventType.RoomMessage,
+            room: roomId,
+            user: userId,
+            content: {
+                body,
+                msgtype,
+            },
+        });
+
+    beforeEach(() => {
+        cli = stubClient();
+        decryptEventIfNeeded = jest.spyOn(cli, "decryptEventIfNeeded").mockResolvedValue(undefined);
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    it("generates a text preview and tooltip", async () => {
+        const mxEvent = makeMessageEvent({ body: "Text preview" });
+        const vm = new EventPreviewViewModel({ cli, mxEvent });
+
+        await waitFor(() => expect(vm.getSnapshot().previewContent).toBe("Text preview"));
+
+        expect(decryptEventIfNeeded).toHaveBeenCalledWith(mxEvent);
+        expect(vm.getSnapshot()).toMatchObject({
+            isVisible: true,
+            previewContent: "Text preview",
+            previewTooltip: "Text preview",
+        });
+    });
+
+    it("generates prefixed media preview content", async () => {
+        const mxEvent = makeMessageEvent({ body: "clip.mp4", msgtype: MsgType.Video });
+        const vm = new EventPreviewViewModel({ cli, mxEvent });
+
+        await waitFor(() => expect(vm.getSnapshot().previewContent).toBeDefined());
+
+        render(<>{vm.getSnapshot().previewContent}</>);
+
+        expect(screen.getByText("Video:")).toBeInTheDocument();
+        expect(screen.getByText("Video:").tagName).toBe("STRONG");
+        expect(screen.getByText("clip.mp4")).toBeInTheDocument();
+        expect(vm.getSnapshot().previewTooltip).toBeUndefined();
+    });
+
+    it("updates the preview when the event is replaced", async () => {
+        const mxEvent = makeMessageEvent({ body: "Original" });
+        const vm = new EventPreviewViewModel({ cli, mxEvent });
+
+        await waitFor(() => expect(vm.getSnapshot().previewContent).toBe("Original"));
+
+        const replacementEvent = new MatrixEvent({
+            type: EventType.RoomMessage,
+            room_id: roomId,
+            sender: userId,
+            content: {
+                "body": "Edited",
+                "msgtype": MsgType.Text,
+                "m.new_content": {
+                    body: "Edited",
+                    msgtype: MsgType.Text,
+                },
+                "m.relates_to": {
+                    rel_type: "m.replace",
+                    event_id: mxEvent.getId(),
+                },
+            },
+        });
+
+        mxEvent.makeReplaced(replacementEvent);
+
+        await waitFor(() => expect(vm.getSnapshot().previewContent).toBe("Edited"));
+    });
+
+    it("skips unchanged setter inputs and updates for a different event", async () => {
+        const originalEvent = makeMessageEvent({ body: "Original" });
+        const updatedEvent = makeMessageEvent({ body: "Updated" });
+        const vm = new EventPreviewViewModel({ cli, mxEvent: originalEvent });
+        const listener = jest.fn();
+
+        await waitFor(() => expect(vm.getSnapshot().previewContent).toBe("Original"));
+        decryptEventIfNeeded.mockClear();
+        vm.subscribe(listener);
+
+        vm.setEvent(originalEvent);
+        vm.setClient(cli);
+
+        expect(listener).not.toHaveBeenCalled();
+        expect(decryptEventIfNeeded).not.toHaveBeenCalled();
+
+        vm.setEvent(updatedEvent);
+
+        await waitFor(() => expect(vm.getSnapshot().previewContent).toBe("Updated"));
+
+        expect(listener).toHaveBeenCalledTimes(1);
+    });
+
+    it("removes event listeners when disposed", async () => {
+        const mxEvent = makeMessageEvent({ body: "Original" });
+        const vm = new EventPreviewViewModel({ cli, mxEvent });
+        const listener = jest.fn();
+
+        await waitFor(() => expect(vm.getSnapshot().previewContent).toBe("Original"));
+        decryptEventIfNeeded.mockClear();
+        vm.subscribe(listener);
+        vm.dispose();
+
+        const replacementEvent = new MatrixEvent({
+            type: EventType.RoomMessage,
+            room_id: roomId,
+            sender: userId,
+            content: {
+                "body": "Edited",
+                "msgtype": MsgType.Text,
+                "m.new_content": {
+                    body: "Edited",
+                    msgtype: MsgType.Text,
+                },
+                "m.relates_to": {
+                    rel_type: "m.replace",
+                    event_id: mxEvent.getId(),
+                },
+            },
+        });
+
+        mxEvent.makeReplaced(replacementEvent);
+
+        expect(listener).not.toHaveBeenCalled();
+        expect(decryptEventIfNeeded).not.toHaveBeenCalled();
+        expect(vm.getSnapshot().previewContent).toBe("Original");
+    });
+});
diff --git a/apps/web/test/viewmodels/event-tiles/E2eMessageSharedIconViewModel-test.ts b/apps/web/test/viewmodels/event-tiles/E2eMessageSharedIconViewModel-test.ts
new file mode 100644
index 0000000000..5f8571a6e4
--- /dev/null
+++ b/apps/web/test/viewmodels/event-tiles/E2eMessageSharedIconViewModel-test.ts
@@ -0,0 +1,209 @@
+/*
+Copyright 2026 Element Creations 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 { EventEmitter } from "node:events";
+import {
+    EventTimeline,
+    RoomStateEvent,
+    type MatrixClient,
+    type Room,
+    type RoomMember,
+    type RoomState,
+} from "matrix-js-sdk/src/matrix";
+
+import { E2eMessageSharedIconViewModel } from "../../../src/viewmodels/room/timeline/event-tile/E2eMessageSharedIconViewModel";
+
+type TestRoomState = EventEmitter & {
+    getMember: jest.Mock<RoomMember | null, [userId: string]>;
+};
+
+const USER_ID = "@bob:example.com";
+const OTHER_USER_ID = "@alice:example.com";
+const ROOM_ID = "!roomId";
+const OTHER_ROOM_ID = "!otherRoomId";
+
+function createGetMember(
+    displayNames: Record<string, string | undefined>,
+): jest.Mock<RoomMember | null, [userId: string]> {
+    const getMember = jest.fn((userId: string): RoomMember | null => {
+        const displayName = displayNames[userId];
+        if (displayName === undefined) return null;
+
+        return { rawDisplayName: displayName } as RoomMember;
+    });
+
+    return getMember;
+}
+
+function createRoomState(displayNames: Record<string, string | undefined> = {}): TestRoomState {
+    const getMember = createGetMember(displayNames);
+
+    return Object.assign(new EventEmitter(), { getMember }) as TestRoomState;
+}
+
+function createRoom(roomState: RoomState): Room {
+    const room = {
+        getLiveTimeline: jest.fn(() => ({
+            getState: jest.fn((timeline: EventTimeline) => {
+                expect(timeline).toBe(EventTimeline.FORWARDS);
+                return roomState;
+            }),
+        })),
+    } as unknown as Room;
+
+    return room;
+}
+
+function createClient(roomStates: Record<string, RoomState | undefined>): MatrixClient {
+    return {
+        getRoom: jest.fn((roomId: string) => {
+            const roomState = roomStates[roomId];
+
+            return roomState ? createRoom(roomState) : null;
+        }),
+    } as unknown as MatrixClient;
+}
+
+function createViewModel(displayName?: string): {
+    roomState: TestRoomState;
+    vm: E2eMessageSharedIconViewModel;
+} {
+    const roomState = createRoomState({ [USER_ID]: displayName });
+    const client = createClient({ [ROOM_ID]: roomState as unknown as RoomState });
+    const vm = new E2eMessageSharedIconViewModel({
+        client,
+        roomId: ROOM_ID,
+        keyForwardingUserId: USER_ID,
+    });
+
+    return { roomState, vm };
+}
+
+describe("E2eMessageSharedIconViewModel", () => {
+    it("builds a snapshot with the forwarding member display name", () => {
+        const { vm } = createViewModel("Bob");
+
+        expect(vm.getSnapshot()).toMatchObject({
+            displayName: "Bob",
+            userId: USER_ID,
+        });
+    });
+
+    it("falls back to the user ID when the forwarding member is unknown", () => {
+        const { vm } = createViewModel();
+
+        expect(vm.getSnapshot()).toMatchObject({
+            displayName: USER_ID,
+            userId: USER_ID,
+        });
+    });
+
+    it("falls back to the user ID when the room is unavailable", () => {
+        const client = createClient({});
+        const vm = new E2eMessageSharedIconViewModel({
+            client,
+            roomId: ROOM_ID,
+            keyForwardingUserId: USER_ID,
+        });
+
+        expect(vm.getSnapshot()).toMatchObject({
+            displayName: USER_ID,
+            userId: USER_ID,
+        });
+        expect(() => vm.dispose()).not.toThrow();
+    });
+
+    it("updates when room state events change the forwarding member display name", () => {
+        const { roomState, vm } = createViewModel("Bob");
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        roomState.getMember.mockReturnValue({ rawDisplayName: "Alice" } as RoomMember);
+        roomState.emit(RoomStateEvent.Events);
+
+        expect(vm.getSnapshot().displayName).toBe("Alice");
+        expect(listener).toHaveBeenCalledTimes(1);
+    });
+
+    it("updates when the key forwarding user changes", () => {
+        const roomState = createRoomState({
+            [USER_ID]: "Bob",
+            [OTHER_USER_ID]: "Alice",
+        });
+        const client = createClient({ [ROOM_ID]: roomState as unknown as RoomState });
+        const vm = new E2eMessageSharedIconViewModel({
+            client,
+            roomId: ROOM_ID,
+            keyForwardingUserId: USER_ID,
+        });
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        vm.setKeyForwardingUserId(OTHER_USER_ID);
+
+        expect(vm.getSnapshot()).toMatchObject({
+            displayName: "Alice",
+            userId: OTHER_USER_ID,
+        });
+        expect(listener).toHaveBeenCalledTimes(1);
+    });
+
+    it("updates and rebinds its room state listener when the room changes", () => {
+        const originalRoomState = createRoomState({ [USER_ID]: "Bob" });
+        const newRoomState = createRoomState({ [USER_ID]: "Alice" });
+        const client = createClient({
+            [ROOM_ID]: originalRoomState as unknown as RoomState,
+            [OTHER_ROOM_ID]: newRoomState as unknown as RoomState,
+        });
+        const vm = new E2eMessageSharedIconViewModel({
+            client,
+            roomId: ROOM_ID,
+            keyForwardingUserId: USER_ID,
+        });
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        vm.setRoomId(OTHER_ROOM_ID);
+
+        expect(originalRoomState.listenerCount(RoomStateEvent.Events)).toBe(0);
+        expect(newRoomState.listenerCount(RoomStateEvent.Events)).toBe(1);
+        expect(vm.getSnapshot().displayName).toBe("Alice");
+        expect(listener).toHaveBeenCalledTimes(1);
+
+        originalRoomState.getMember.mockReturnValue({ rawDisplayName: "Ignored" } as RoomMember);
+        originalRoomState.emit(RoomStateEvent.Events);
+
+        expect(vm.getSnapshot().displayName).toBe("Alice");
+        expect(listener).toHaveBeenCalledTimes(1);
+
+        newRoomState.getMember.mockReturnValue({ rawDisplayName: "Carol" } as RoomMember);
+        newRoomState.emit(RoomStateEvent.Events);
+
+        expect(vm.getSnapshot().displayName).toBe("Carol");
+        expect(listener).toHaveBeenCalledTimes(2);
+    });
+
+    it("does not emit updates when setters receive unchanged values", () => {
+        const { vm } = createViewModel("Bob");
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        vm.setRoomId(ROOM_ID);
+        vm.setKeyForwardingUserId(USER_ID);
+
+        expect(listener).not.toHaveBeenCalled();
+    });
+
+    it("removes its room state listener when disposed", () => {
+        const { roomState, vm } = createViewModel("Bob");
+        expect(roomState.listenerCount(RoomStateEvent.Events)).toBe(1);
+
+        vm.dispose();
+
+        expect(roomState.listenerCount(RoomStateEvent.Events)).toBe(0);
+    });
+});
diff --git a/apps/web/test/viewmodels/event-tiles/EventTileE2eState-test.ts b/apps/web/test/viewmodels/event-tiles/EventTileE2eState-test.ts
new file mode 100644
index 0000000000..0246ae36b3
--- /dev/null
+++ b/apps/web/test/viewmodels/event-tiles/EventTileE2eState-test.ts
@@ -0,0 +1,267 @@
+/*
+Copyright 2026 Element Creations 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 { EventStatus, EventType, type MatrixEvent, MsgType } from "matrix-js-sdk/src/matrix";
+import { DecryptionFailureCode, EventShieldColour, EventShieldReason } from "matrix-js-sdk/src/crypto-api";
+import { E2ePadlockIcon } from "@element-hq/web-shared-components";
+
+import { mkEvent } from "../../test-utils";
+import {
+    getEventTileE2ePadlockState,
+    getEventTileE2ePadlockViewState,
+    type EventTileE2ePadlockStateInput,
+} from "../../../src/viewmodels/room/timeline/event-tile/EventTileE2eState";
+
+const roomId = "!room:example.org";
+const userId = "@alice:example.org";
+
+function makeEvent(): MatrixEvent {
+    return mkEvent({
+        event: true,
+        type: EventType.RoomMessage,
+        room: roomId,
+        user: userId,
+        content: {
+            msgtype: MsgType.Text,
+            body: "Hello",
+        },
+    });
+}
+
+function makeInput(overrides: Partial<EventTileE2ePadlockStateInput> = {}): EventTileE2ePadlockStateInput {
+    const mxEvent = overrides.mxEvent ?? makeEvent();
+
+    return {
+        mxEvent,
+        verificationEvent: overrides.verificationEvent ?? mxEvent,
+        shieldColour: EventShieldColour.NONE,
+        shieldReason: null,
+        isRoomEncrypted: false,
+        isLocalRoom: false,
+        ...overrides,
+    };
+}
+
+function mockDecryptionFailure(mxEvent: MatrixEvent, reason: DecryptionFailureCode): void {
+    jest.spyOn(mxEvent, "isDecryptionFailure").mockReturnValue(true);
+    Object.defineProperty(mxEvent, "decryptionFailureReason", {
+        configurable: true,
+        value: reason,
+    });
+}
+
+describe("EventTileE2eState", () => {
+    it("does not show a padlock for local rooms", () => {
+        const state = getEventTileE2ePadlockState(makeInput({ isLocalRoom: true }));
+
+        expect(state.kind).toBe("none");
+    });
+
+    it("shows a decryption failure padlock for generic decryption failures", () => {
+        const mxEvent = makeEvent();
+        mockDecryptionFailure(mxEvent, DecryptionFailureCode.UNKNOWN_ERROR);
+
+        const state = getEventTileE2ePadlockState(makeInput({ mxEvent }));
+
+        expect(state.kind).toBe("decryptionFailure");
+    });
+
+    it("uses the verification event for edited event padlock decisions", () => {
+        const mxEvent = makeEvent();
+        const verificationEvent = makeEvent();
+        mockDecryptionFailure(verificationEvent, DecryptionFailureCode.UNKNOWN_ERROR);
+
+        const state = getEventTileE2ePadlockState(makeInput({ mxEvent, verificationEvent }));
+
+        expect(state.kind).toBe("decryptionFailure");
+    });
+
+    it.each([DecryptionFailureCode.SENDER_IDENTITY_PREVIOUSLY_VERIFIED, DecryptionFailureCode.UNSIGNED_SENDER_DEVICE])(
+        "does not show a padlock for %s decryption failures",
+        (reason) => {
+            const mxEvent = makeEvent();
+            mockDecryptionFailure(mxEvent, reason);
+
+            const state = getEventTileE2ePadlockState(makeInput({ mxEvent }));
+
+            expect(state.kind).toBe("none");
+        },
+    );
+
+    it("shows a message-shared state when the authenticity warning has a key forwarding user", () => {
+        const mxEvent = makeEvent();
+        jest.spyOn(mxEvent, "getKeyForwardingUser").mockReturnValue("@bob:example.org");
+
+        const state = getEventTileE2ePadlockState(
+            makeInput({
+                mxEvent,
+                shieldColour: EventShieldColour.GREY,
+                shieldReason: EventShieldReason.AUTHENTICITY_NOT_GUARANTEED,
+            }),
+        );
+
+        expect(state).toEqual({
+            kind: "messageShared",
+            keyForwardingUserId: "@bob:example.org",
+            roomId,
+        });
+    });
+
+    it("shows a normal shield for grey shield state", () => {
+        const state = getEventTileE2ePadlockState(
+            makeInput({
+                shieldColour: EventShieldColour.GREY,
+                shieldReason: EventShieldReason.UNSIGNED_DEVICE,
+            }),
+        );
+
+        expect(state).toEqual({
+            kind: "shield",
+            shieldColour: EventShieldColour.GREY,
+            shieldReason: EventShieldReason.UNSIGNED_DEVICE,
+        });
+    });
+
+    it("shows a warning shield for red shield state", () => {
+        const state = getEventTileE2ePadlockState(
+            makeInput({
+                shieldColour: EventShieldColour.RED,
+                shieldReason: EventShieldReason.UNKNOWN_DEVICE,
+            }),
+        );
+
+        expect(state).toEqual({
+            kind: "shield",
+            shieldColour: EventShieldColour.RED,
+            shieldReason: EventShieldReason.UNKNOWN_DEVICE,
+        });
+    });
+
+    it("shows an unencrypted warning for unencrypted events in encrypted rooms", () => {
+        const state = getEventTileE2ePadlockState(makeInput({ isRoomEncrypted: true }));
+
+        expect(state.kind).toBe("unencrypted");
+    });
+
+    it.each([EventStatus.ENCRYPTING, EventStatus.NOT_SENT])(
+        "does not show an unencrypted warning for %s local echo state",
+        (status) => {
+            const mxEvent = makeEvent();
+            mxEvent.status = status;
+
+            const state = getEventTileE2ePadlockState(makeInput({ mxEvent, isRoomEncrypted: true }));
+
+            expect(state.kind).toBe("none");
+        },
+    );
+
+    it("does not show an unencrypted warning for state events in encrypted rooms", () => {
+        const mxEvent = makeEvent();
+        jest.spyOn(mxEvent, "isState").mockReturnValue(true);
+
+        const state = getEventTileE2ePadlockState(makeInput({ mxEvent, isRoomEncrypted: true }));
+
+        expect(state.kind).toBe("none");
+    });
+
+    it("does not show an unencrypted warning for redacted events in encrypted rooms", () => {
+        const mxEvent = makeEvent();
+        jest.spyOn(mxEvent, "isRedacted").mockReturnValue(true);
+
+        const state = getEventTileE2ePadlockState(makeInput({ mxEvent, isRoomEncrypted: true }));
+
+        expect(state.kind).toBe("none");
+    });
+
+    it("does not show an unencrypted warning for encrypted events", () => {
+        const mxEvent = makeEvent();
+        jest.spyOn(mxEvent, "isEncrypted").mockReturnValue(true);
+
+        const state = getEventTileE2ePadlockState(makeInput({ mxEvent, isRoomEncrypted: true }));
+
+        expect(state.kind).toBe("none");
+    });
+
+    it("maps decryption failure state to the decryption failure icon view state", () => {
+        const mxEvent = makeEvent();
+        mockDecryptionFailure(mxEvent, DecryptionFailureCode.UNKNOWN_ERROR);
+
+        const state = getEventTileE2ePadlockViewState(makeInput({ mxEvent }));
+
+        expect(state).toEqual({
+            kind: "icon",
+            icon: E2ePadlockIcon.DecryptionFailure,
+            title: "This message could not be decrypted",
+        });
+    });
+
+    it("maps unencrypted state to the warning icon view state", () => {
+        const state = getEventTileE2ePadlockViewState(makeInput({ isRoomEncrypted: true }));
+
+        expect(state).toEqual({
+            kind: "icon",
+            icon: E2ePadlockIcon.Warning,
+            title: "Not encrypted",
+        });
+    });
+
+    it.each([
+        [EventShieldReason.UNKNOWN, E2ePadlockIcon.Normal, "Unknown error"],
+        [EventShieldReason.UNVERIFIED_IDENTITY, E2ePadlockIcon.Normal, "Encrypted by an unverified user."],
+        [EventShieldReason.UNSIGNED_DEVICE, E2ePadlockIcon.Normal, "Encrypted by a device not verified by its owner."],
+        [EventShieldReason.UNKNOWN_DEVICE, E2ePadlockIcon.Normal, "Encrypted by an unknown or deleted device."],
+        [
+            EventShieldReason.AUTHENTICITY_NOT_GUARANTEED,
+            E2ePadlockIcon.Warning,
+            "The authenticity of this encrypted message can't be guaranteed on this device.",
+        ],
+        [EventShieldReason.MISMATCHED_SENDER_KEY, E2ePadlockIcon.Warning, "Encrypted by an unverified session"],
+        [EventShieldReason.SENT_IN_CLEAR, E2ePadlockIcon.Warning, "Not encrypted"],
+        [
+            EventShieldReason.VERIFICATION_VIOLATION,
+            E2ePadlockIcon.Warning,
+            "Sender's verified digital identity was reset",
+        ],
+        [
+            EventShieldReason.MISMATCHED_SENDER,
+            E2ePadlockIcon.Warning,
+            "The sender of the event does not match the owner of the device that sent it.",
+        ],
+    ])("maps shield reason %s to an icon view state", (shieldReason, expectedIcon, expectedTitle) => {
+        const state = getEventTileE2ePadlockViewState(
+            makeInput({
+                shieldColour: expectedIcon === E2ePadlockIcon.Normal ? EventShieldColour.GREY : EventShieldColour.RED,
+                shieldReason,
+            }),
+        );
+
+        expect(state).toEqual({
+            kind: "icon",
+            icon: expectedIcon,
+            title: expectedTitle,
+        });
+    });
+
+    it("keeps forwarded-message state renderable by the shared-message indicator", () => {
+        const mxEvent = makeEvent();
+        jest.spyOn(mxEvent, "getKeyForwardingUser").mockReturnValue("@bob:example.org");
+
+        const state = getEventTileE2ePadlockViewState(
+            makeInput({
+                mxEvent,
+                shieldColour: EventShieldColour.GREY,
+                shieldReason: EventShieldReason.AUTHENTICITY_NOT_GUARANTEED,
+            }),
+        );
+
+        expect(state).toEqual({
+            kind: "messageShared",
+            keyForwardingUserId: "@bob:example.org",
+            roomId,
+        });
+    });
+});
diff --git a/apps/web/test/viewmodels/event-tiles/EventTileE2eViewModel-test.ts b/apps/web/test/viewmodels/event-tiles/EventTileE2eViewModel-test.ts
new file mode 100644
index 0000000000..30f4e772ee
--- /dev/null
+++ b/apps/web/test/viewmodels/event-tiles/EventTileE2eViewModel-test.ts
@@ -0,0 +1,302 @@
+/*
+Copyright 2026 Element Creations 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 { waitFor } from "@testing-library/dom";
+import { EventType, MatrixEventEvent, type MatrixClient, type MatrixEvent, MsgType } from "matrix-js-sdk/src/matrix";
+import {
+    CryptoEvent,
+    type EventEncryptionInfo,
+    EventShieldColour,
+    EventShieldReason,
+} from "matrix-js-sdk/src/crypto-api";
+import { E2ePadlockIcon } from "@element-hq/web-shared-components";
+
+import { mkEvent, MockClientWithEventEmitter } from "../../test-utils";
+import { EventTileE2eViewModel } from "../../../src/viewmodels/room/timeline/event-tile/EventTileE2eViewModel";
+
+function makeClient(
+    getEncryptionInfoForEvent = jest.fn<Promise<EventEncryptionInfo | null>, [MatrixEvent]>(),
+): MockClientWithEventEmitter & MatrixClient {
+    return new MockClientWithEventEmitter({
+        getCrypto: jest.fn(() => ({
+            getEncryptionInfoForEvent,
+        })),
+    }) as MockClientWithEventEmitter & MatrixClient;
+}
+
+describe("EventTileE2eViewModel", () => {
+    const roomId = "!room:example.org";
+    const userId = "@alice:example.org";
+    let viewModels: EventTileE2eViewModel[];
+
+    beforeEach(() => {
+        viewModels = [];
+    });
+
+    afterEach(() => {
+        for (const vm of viewModels) {
+            vm.dispose();
+        }
+    });
+
+    function makeEvent(): MatrixEvent {
+        return mkEvent({
+            event: true,
+            type: EventType.RoomMessage,
+            room: roomId,
+            user: userId,
+            content: {
+                msgtype: MsgType.Text,
+                body: "Hello",
+            },
+        });
+    }
+
+    function makeViewModel(props: ConstructorParameters<typeof EventTileE2eViewModel>[0]): EventTileE2eViewModel {
+        const vm = new EventTileE2eViewModel(props);
+        viewModels.push(vm);
+        return vm;
+    }
+
+    it("verifies encrypted events on start", async () => {
+        const mxEvent = makeEvent();
+        jest.spyOn(mxEvent, "isEncrypted").mockReturnValue(true);
+        const cli = makeClient(
+            jest.fn().mockResolvedValue({
+                shieldColour: EventShieldColour.GREY,
+                shieldReason: EventShieldReason.UNSIGNED_DEVICE,
+            } as EventEncryptionInfo),
+        );
+
+        const vm = makeViewModel({
+            cli,
+            mxEvent,
+            isRoomEncrypted: false,
+            enableListeners: true,
+        });
+        vm.start();
+
+        await waitFor(() =>
+            expect(vm.getSnapshot()).toEqual({
+                kind: "icon",
+                icon: E2ePadlockIcon.Normal,
+                title: "Encrypted by a device not verified by its owner.",
+            }),
+        );
+    });
+
+    it("re-verifies when the sender verification changes", async () => {
+        const mxEvent = makeEvent();
+        jest.spyOn(mxEvent, "isEncrypted").mockReturnValue(true);
+        const cli = makeClient(
+            jest
+                .fn()
+                .mockResolvedValueOnce({
+                    shieldColour: EventShieldColour.GREY,
+                    shieldReason: EventShieldReason.UNSIGNED_DEVICE,
+                } as EventEncryptionInfo)
+                .mockResolvedValueOnce({
+                    shieldColour: EventShieldColour.RED,
+                    shieldReason: EventShieldReason.UNKNOWN_DEVICE,
+                } as EventEncryptionInfo),
+        );
+
+        const vm = makeViewModel({
+            cli,
+            mxEvent,
+            enableListeners: true,
+        });
+        vm.start();
+        await waitFor(() => expect(vm.getSnapshot().kind).toBe("icon"));
+
+        cli.emit(CryptoEvent.UserTrustStatusChanged, userId, {});
+
+        await waitFor(() =>
+            expect(vm.getSnapshot()).toEqual({
+                kind: "icon",
+                icon: E2ePadlockIcon.Warning,
+                title: "Encrypted by an unknown or deleted device.",
+            }),
+        );
+    });
+
+    it("uses the replacing event for verification after edits", async () => {
+        const mxEvent = makeEvent();
+        const replacementEvent = makeEvent();
+        jest.spyOn(mxEvent, "isEncrypted").mockReturnValue(true);
+        jest.spyOn(replacementEvent, "isEncrypted").mockReturnValue(true);
+        const getEncryptionInfoForEvent = jest.fn(async (event: MatrixEvent) => {
+            return {
+                shieldColour: event === replacementEvent ? EventShieldColour.RED : EventShieldColour.NONE,
+                shieldReason: event === replacementEvent ? EventShieldReason.UNKNOWN_DEVICE : null,
+            } as EventEncryptionInfo;
+        });
+        const cli = makeClient(getEncryptionInfoForEvent);
+
+        const vm = makeViewModel({
+            cli,
+            mxEvent,
+            enableListeners: true,
+        });
+        vm.start();
+        await waitFor(() => expect(vm.getSnapshot().kind).toBe("none"));
+
+        mxEvent.makeReplaced(replacementEvent);
+
+        await waitFor(() =>
+            expect(vm.getSnapshot()).toEqual({
+                kind: "icon",
+                icon: E2ePadlockIcon.Warning,
+                title: "Encrypted by an unknown or deleted device.",
+            }),
+        );
+        expect(getEncryptionInfoForEvent).toHaveBeenLastCalledWith(replacementEvent);
+    });
+
+    it("derives the unencrypted warning from room encryption state", () => {
+        const vm = makeViewModel({
+            cli: makeClient(),
+            mxEvent: makeEvent(),
+            isRoomEncrypted: true,
+            enableListeners: false,
+        });
+
+        expect(vm.getSnapshot()).toEqual({
+            kind: "icon",
+            icon: E2ePadlockIcon.Warning,
+            title: "Not encrypted",
+        });
+    });
+
+    it("removes registered listeners on dispose", () => {
+        const mxEvent = makeEvent();
+        const cli = makeClient();
+
+        const vm = makeViewModel({
+            cli,
+            mxEvent,
+            enableListeners: true,
+        });
+        vm.start();
+
+        expect(cli.listenerCount(CryptoEvent.UserTrustStatusChanged)).toBe(1);
+        expect(mxEvent.listenerCount(MatrixEventEvent.Decrypted)).toBe(1);
+        expect(mxEvent.listenerCount(MatrixEventEvent.Replaced)).toBe(1);
+
+        vm.dispose();
+
+        expect(cli.listenerCount(CryptoEvent.UserTrustStatusChanged)).toBe(0);
+        expect(mxEvent.listenerCount(MatrixEventEvent.Decrypted)).toBe(0);
+        expect(mxEvent.listenerCount(MatrixEventEvent.Replaced)).toBe(0);
+    });
+
+    it("moves event listeners when the event prop changes", () => {
+        const oldEvent = makeEvent();
+        const newEvent = makeEvent();
+        const cli = makeClient();
+
+        const vm = makeViewModel({
+            cli,
+            mxEvent: oldEvent,
+            enableListeners: true,
+        });
+        vm.start();
+
+        vm.setProps({ mxEvent: newEvent });
+
+        expect(oldEvent.listenerCount(MatrixEventEvent.Decrypted)).toBe(0);
+        expect(oldEvent.listenerCount(MatrixEventEvent.Replaced)).toBe(0);
+        expect(newEvent.listenerCount(MatrixEventEvent.Decrypted)).toBe(1);
+        expect(newEvent.listenerCount(MatrixEventEvent.Replaced)).toBe(1);
+        expect(cli.listenerCount(CryptoEvent.UserTrustStatusChanged)).toBe(1);
+    });
+
+    it("does not register live listeners when disabled", () => {
+        const mxEvent = makeEvent();
+        const cli = makeClient();
+
+        const vm = makeViewModel({
+            cli,
+            mxEvent,
+            enableListeners: false,
+        });
+        vm.start();
+
+        expect(cli.listenerCount(CryptoEvent.UserTrustStatusChanged)).toBe(0);
+        expect(mxEvent.listenerCount(MatrixEventEvent.Decrypted)).toBe(0);
+        expect(mxEvent.listenerCount(MatrixEventEvent.Replaced)).toBe(0);
+    });
+
+    it("does not re-verify when a different user's verification changes", async () => {
+        const mxEvent = makeEvent();
+        jest.spyOn(mxEvent, "isEncrypted").mockReturnValue(true);
+        const getEncryptionInfoForEvent = jest.fn().mockResolvedValue({
+            shieldColour: EventShieldColour.GREY,
+            shieldReason: EventShieldReason.UNSIGNED_DEVICE,
+        } as EventEncryptionInfo);
+        const cli = makeClient(getEncryptionInfoForEvent);
+
+        const vm = makeViewModel({
+            cli,
+            mxEvent,
+            enableListeners: true,
+        });
+        vm.start();
+        await waitFor(() => expect(getEncryptionInfoForEvent).toHaveBeenCalledTimes(1));
+
+        cli.emit(CryptoEvent.UserTrustStatusChanged, "@bob:example.org", {});
+
+        expect(getEncryptionInfoForEvent).toHaveBeenCalledTimes(1);
+    });
+
+    it("ignores stale async verification results", async () => {
+        const mxEvent = makeEvent();
+        jest.spyOn(mxEvent, "isEncrypted").mockReturnValue(true);
+
+        let resolveFirst: (value: EventEncryptionInfo) => void;
+        const firstResult = new Promise<EventEncryptionInfo>((resolve) => {
+            resolveFirst = resolve;
+        });
+        const getEncryptionInfoForEvent = jest
+            .fn()
+            .mockReturnValueOnce(firstResult)
+            .mockResolvedValueOnce({
+                shieldColour: EventShieldColour.RED,
+                shieldReason: EventShieldReason.UNKNOWN_DEVICE,
+            } as EventEncryptionInfo);
+        const cli = makeClient(getEncryptionInfoForEvent);
+
+        const vm = makeViewModel({
+            cli,
+            mxEvent,
+            enableListeners: true,
+        });
+        vm.start();
+        cli.emit(CryptoEvent.UserTrustStatusChanged, userId, {});
+
+        await waitFor(() =>
+            expect(vm.getSnapshot()).toEqual({
+                kind: "icon",
+                icon: E2ePadlockIcon.Warning,
+                title: "Encrypted by an unknown or deleted device.",
+            }),
+        );
+
+        resolveFirst!({
+            shieldColour: EventShieldColour.GREY,
+            shieldReason: EventShieldReason.UNSIGNED_DEVICE,
+        } as EventEncryptionInfo);
+
+        await Promise.resolve();
+
+        expect(vm.getSnapshot()).toEqual({
+            kind: "icon",
+            icon: E2ePadlockIcon.Warning,
+            title: "Encrypted by an unknown or deleted device.",
+        });
+    });
+});
diff --git a/apps/web/test/viewmodels/event-tiles/EventTileInteractionState-test.ts b/apps/web/test/viewmodels/event-tiles/EventTileInteractionState-test.ts
new file mode 100644
index 0000000000..f9e75b9d60
--- /dev/null
+++ b/apps/web/test/viewmodels/event-tiles/EventTileInteractionState-test.ts
@@ -0,0 +1,88 @@
+/*
+ * Copyright 2026 Element Creations 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 {
+    eventTileActionBarFocusChange,
+    eventTileBlurWithin,
+    eventTileClearHover,
+    eventTileCloseContextMenu,
+    eventTileFocusWithin,
+    eventTileMouseEnter,
+    eventTileMouseLeave,
+    eventTileOpenContextMenu,
+    initialEventTileInteractionState,
+    type EventTileInteractionState,
+} from "../../../src/viewmodels/room/timeline/event-tile/EventTileInteractionState";
+
+function makeState(overrides: Partial<EventTileInteractionState> = {}): EventTileInteractionState {
+    return {
+        ...initialEventTileInteractionState,
+        ...overrides,
+    };
+}
+
+describe("EventTileInteractionState", () => {
+    it("tracks hover state", () => {
+        const hovered = eventTileMouseEnter(makeState());
+        const unhovered = eventTileMouseLeave(hovered);
+
+        expect(hovered.hover).toBe(true);
+        expect(unhovered.hover).toBe(false);
+    });
+
+    it("tracks focus-within state and keyboard action bar visibility", () => {
+        const focused = eventTileFocusWithin(makeState(), true);
+        const blurred = eventTileBlurWithin(focused);
+
+        expect(focused.focusWithin).toBe(true);
+        expect(focused.showActionBarFromFocus).toBe(true);
+        expect(blurred.focusWithin).toBe(false);
+        expect(blurred.showActionBarFromFocus).toBe(false);
+    });
+
+    it("preserves hover while action bar receives focus", () => {
+        const state = makeState({ hover: true });
+        const focused = eventTileActionBarFocusChange(state, true, false);
+
+        expect(focused.actionBarFocused).toBe(true);
+        expect(focused.hover).toBe(true);
+    });
+
+    it("restores hover from the tile when action bar loses focus", () => {
+        const state = makeState({ actionBarFocused: true, hover: false });
+        const focused = eventTileActionBarFocusChange(state, false, true);
+
+        expect(focused.actionBarFocused).toBe(false);
+        expect(focused.hover).toBe(true);
+    });
+
+    it("clears stale hover", () => {
+        const state = eventTileClearHover(makeState({ hover: true }));
+
+        expect(state.hover).toBe(false);
+    });
+
+    it("opens and closes the context menu", () => {
+        const menu = {
+            position: {
+                left: 1,
+                top: 2,
+                bottom: 3,
+            },
+            link: "https://example.org/",
+        };
+        const opened = eventTileOpenContextMenu(makeState({ hover: true }), menu);
+        const closed = eventTileCloseContextMenu(opened);
+
+        expect(opened.contextMenu).toEqual(menu);
+        expect(opened.actionBarFocused).toBe(true);
+        expect(opened.hover).toBe(false);
+        expect(closed.contextMenu).toBeUndefined();
+        expect(closed.actionBarFocused).toBe(false);
+        expect(closed.hover).toBe(false);
+    });
+});
diff --git a/apps/web/test/viewmodels/event-tiles/EventTileReactionState-test.ts b/apps/web/test/viewmodels/event-tiles/EventTileReactionState-test.ts
new file mode 100644
index 0000000000..559c5597d5
--- /dev/null
+++ b/apps/web/test/viewmodels/event-tiles/EventTileReactionState-test.ts
@@ -0,0 +1,97 @@
+/*
+Copyright 2026 Element Creations 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 { EventType, type MatrixEvent, type Relations, MsgType, RelationType } from "matrix-js-sdk/src/matrix";
+
+import { mkEvent } from "../../test-utils";
+import {
+    EVENT_TILE_REACTION_EVENT_TYPE,
+    EVENT_TILE_REACTION_RELATION_TYPE,
+    getEventTileReactionRelations,
+    isEventTileReactionRelation,
+    type GetRelationsForEvent,
+} from "../../../src/viewmodels/room/timeline/event-tile/reactions/EventTileReactionState";
+
+const roomId = "!room:example.org";
+const userId = "@alice:example.org";
+
+function makeEvent(): MatrixEvent {
+    return mkEvent({
+        event: true,
+        id: "$event",
+        type: EventType.RoomMessage,
+        room: roomId,
+        user: userId,
+        content: {
+            msgtype: MsgType.Text,
+            body: "Hello",
+        },
+    });
+}
+
+describe("EventTileReactionState", () => {
+    it("gets annotation reaction relations when reactions are enabled", () => {
+        const relations = {} as Relations;
+        const getRelationsForEvent: jest.MockedFunction<GetRelationsForEvent> = jest.fn().mockReturnValue(relations);
+
+        expect(
+            getEventTileReactionRelations({
+                mxEvent: makeEvent(),
+                showReactions: true,
+                getRelationsForEvent,
+            }),
+        ).toBe(relations);
+        expect(getRelationsForEvent).toHaveBeenCalledWith(
+            "$event",
+            EVENT_TILE_REACTION_RELATION_TYPE,
+            EVENT_TILE_REACTION_EVENT_TYPE,
+        );
+    });
+
+    it("does not get relations when reactions are disabled", () => {
+        const getRelationsForEvent: jest.MockedFunction<GetRelationsForEvent> = jest.fn();
+
+        expect(
+            getEventTileReactionRelations({
+                mxEvent: makeEvent(),
+                showReactions: false,
+                getRelationsForEvent,
+            }),
+        ).toBeNull();
+        expect(getRelationsForEvent).not.toHaveBeenCalled();
+    });
+
+    it("does not get relations without a relation lookup", () => {
+        expect(
+            getEventTileReactionRelations({
+                mxEvent: makeEvent(),
+                showReactions: true,
+            }),
+        ).toBeNull();
+    });
+
+    it("normalizes missing relations to null", () => {
+        const getRelationsForEvent: jest.MockedFunction<GetRelationsForEvent> = jest.fn().mockReturnValue(undefined);
+
+        expect(
+            getEventTileReactionRelations({
+                mxEvent: makeEvent(),
+                showReactions: true,
+                getRelationsForEvent,
+            }),
+        ).toBeNull();
+    });
+
+    it("matches reaction relation creation events", () => {
+        expect(isEventTileReactionRelation(RelationType.Annotation, EventType.Reaction)).toBe(true);
+    });
+
+    it("does not match unrelated relation creation events", () => {
+        expect(isEventTileReactionRelation(RelationType.Reference, EventType.RoomMessage)).toBe(false);
+        expect(isEventTileReactionRelation(RelationType.Annotation, EventType.RoomMessage)).toBe(false);
+    });
+});
diff --git a/apps/web/test/viewmodels/event-tiles/EventTileReceiptState-test.ts b/apps/web/test/viewmodels/event-tiles/EventTileReceiptState-test.ts
new file mode 100644
index 0000000000..f780a31913
--- /dev/null
+++ b/apps/web/test/viewmodels/event-tiles/EventTileReceiptState-test.ts
@@ -0,0 +1,140 @@
+/*
+Copyright 2026 Element Creations 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 { EventStatus, EventType, M_POLL_END, M_POLL_START, type MatrixEvent, MsgType } from "matrix-js-sdk/src/matrix";
+
+import { mkEvent } from "../../test-utils";
+import { TimelineRenderingType } from "../../../src/contexts/RoomContext";
+import {
+    getEventTileReceiptState,
+    isEligibleForSpecialReceipt,
+    type EventTileReceiptStateInput,
+} from "../../../src/viewmodels/room/timeline/event-tile/EventTileReceiptState";
+
+const roomId = "!room:example.org";
+const ownUserId = "@alice:example.org";
+const otherUserId = "@bob:example.org";
+
+function makeEvent({
+    type = EventType.RoomMessage,
+    user = ownUserId,
+}: {
+    type?: string;
+    user?: string;
+} = {}): MatrixEvent {
+    return mkEvent({
+        event: true,
+        type,
+        room: roomId,
+        user,
+        content: {
+            msgtype: MsgType.Text,
+            body: "Hello",
+        },
+    });
+}
+
+function makeInput(overrides: Partial<EventTileReceiptStateInput> = {}): EventTileReceiptStateInput {
+    return {
+        mxEvent: makeEvent(),
+        hasRoom: true,
+        ownUserId,
+        lastSuccessful: true,
+        timelineRenderingType: TimelineRenderingType.Room,
+        ...overrides,
+    };
+}
+
+describe("EventTileReceiptState", () => {
+    it.each([
+        EventType.RoomMessage,
+        EventType.RoomMessageEncrypted,
+        EventType.Sticker,
+        M_POLL_START.name,
+        M_POLL_END.name,
+    ])("treats %s as eligible for special receipts", (type) => {
+        expect(isEligibleForSpecialReceipt(makeEvent({ type }))).toBe(true);
+    });
+
+    it("does not treat state events as eligible for special receipts", () => {
+        expect(isEligibleForSpecialReceipt(makeEvent({ type: EventType.RoomName }))).toBe(false);
+    });
+
+    it("shows a sent receipt for the last successful own event", () => {
+        const state = getEventTileReceiptState(makeInput());
+
+        expect(state).toMatchObject({
+            isEligibleForSpecialReceipt: true,
+            shouldShowSentReceipt: true,
+            shouldShowSendingReceipt: false,
+            shouldListenForReceipts: true,
+        });
+    });
+
+    it("shows a sent receipt for an explicitly sent event", () => {
+        const state = getEventTileReceiptState(makeInput({ eventSendStatus: EventStatus.SENT }));
+
+        expect(state.shouldShowSentReceipt).toBe(true);
+        expect(state.shouldListenForReceipts).toBe(true);
+    });
+
+    it("shows a sending receipt for pending send states", () => {
+        for (const eventSendStatus of [EventStatus.QUEUED, EventStatus.SENDING, EventStatus.ENCRYPTING]) {
+            const state = getEventTileReceiptState(makeInput({ eventSendStatus }));
+
+            expect(state.shouldShowSentReceipt).toBe(false);
+            expect(state.shouldShowSendingReceipt).toBe(true);
+            expect(state.shouldListenForReceipts).toBe(true);
+        }
+    });
+
+    it("does not show a sent receipt in the thread list", () => {
+        const state = getEventTileReceiptState(
+            makeInput({
+                timelineRenderingType: TimelineRenderingType.ThreadsList,
+            }),
+        );
+
+        expect(state.shouldShowSentReceipt).toBe(false);
+        expect(state.shouldListenForReceipts).toBe(false);
+    });
+
+    it("does not show special receipts once read receipts are present", () => {
+        const state = getEventTileReceiptState(
+            makeInput({
+                readReceipts: [
+                    {
+                        userId: otherUserId,
+                    },
+                ],
+            }),
+        );
+
+        expect(state.isEligibleForSpecialReceipt).toBe(false);
+        expect(state.shouldShowSentReceipt).toBe(false);
+        expect(state.shouldShowSendingReceipt).toBe(false);
+        expect(state.shouldListenForReceipts).toBe(false);
+    });
+
+    it("does not show special receipts for another sender", () => {
+        const state = getEventTileReceiptState(
+            makeInput({
+                mxEvent: makeEvent({ user: otherUserId }),
+            }),
+        );
+
+        expect(state.isEligibleForSpecialReceipt).toBe(false);
+        expect(state.shouldListenForReceipts).toBe(false);
+    });
+
+    it("does not show special receipts when the room is not available", () => {
+        const state = getEventTileReceiptState(makeInput({ hasRoom: false }));
+
+        expect(state.isEligibleForSpecialReceipt).toBe(false);
+        expect(state.shouldListenForReceipts).toBe(false);
+    });
+});
diff --git a/apps/web/test/viewmodels/event-tiles/EventTileReplyChainState-test.ts b/apps/web/test/viewmodels/event-tiles/EventTileReplyChainState-test.ts
new file mode 100644
index 0000000000..3bcb8adff9
--- /dev/null
+++ b/apps/web/test/viewmodels/event-tiles/EventTileReplyChainState-test.ts
@@ -0,0 +1,79 @@
+/*
+Copyright 2026 Element Creations 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 MatrixEvent } from "matrix-js-sdk/src/matrix";
+
+import { mkMessage } from "../../test-utils";
+import { getEventTileReplyChainState } from "../../../src/viewmodels/room/timeline/event-tile/EventTileReplyChainState";
+
+const roomId = "!room:example.org";
+
+function makeMessage(): MatrixEvent {
+    return mkMessage({
+        room: roomId,
+        user: "@alice:example.org",
+        msg: "Message",
+        event: true,
+    });
+}
+
+function makeReply(): MatrixEvent {
+    const parentEvent = makeMessage();
+
+    return mkMessage({
+        room: roomId,
+        user: "@bob:example.org",
+        msg: "Reply",
+        event: true,
+        relatesTo: {
+            "m.in_reply_to": {
+                event_id: parentEvent.getId(),
+            },
+        },
+    });
+}
+
+describe("EventTileReplyChainState", () => {
+    it("does not show a reply chain when the event has no renderer", () => {
+        const state = getEventTileReplyChainState({
+            mxEvent: makeReply(),
+            hasRenderer: false,
+        });
+
+        expect(state.shouldShowReplyChain).toBe(false);
+    });
+
+    it("does not show a reply chain for non-reply events", () => {
+        const state = getEventTileReplyChainState({
+            mxEvent: makeMessage(),
+            hasRenderer: true,
+        });
+
+        expect(state.shouldShowReplyChain).toBe(false);
+    });
+
+    it("shows a reply chain for reply events with a renderer", () => {
+        const state = getEventTileReplyChainState({
+            mxEvent: makeReply(),
+            hasRenderer: true,
+        });
+
+        expect(state.shouldShowReplyChain).toBe(true);
+    });
+
+    it("does not show a reply chain for redacted reply events", () => {
+        const replyEvent = makeReply();
+        jest.spyOn(replyEvent, "isRedacted").mockReturnValue(true);
+
+        const state = getEventTileReplyChainState({
+            mxEvent: replyEvent,
+            hasRenderer: true,
+        });
+
+        expect(state.shouldShowReplyChain).toBe(false);
+    });
+});
diff --git a/apps/web/test/viewmodels/event-tiles/EventTileThreadState-test.ts b/apps/web/test/viewmodels/event-tiles/EventTileThreadState-test.ts
new file mode 100644
index 0000000000..541597e805
--- /dev/null
+++ b/apps/web/test/viewmodels/event-tiles/EventTileThreadState-test.ts
@@ -0,0 +1,164 @@
+/*
+Copyright 2026 Element Creations 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 { EventType, type MatrixEvent, MsgType, type Thread } from "matrix-js-sdk/src/matrix";
+
+import { mkEvent } from "../../test-utils";
+import { TimelineRenderingType } from "../../../src/contexts/RoomContext";
+import {
+    getEventTileThread,
+    getEventTileThreadState,
+    type EventTileThreadLookup,
+    type EventTileThreadStateInput,
+} from "../../../src/viewmodels/room/timeline/event-tile/EventTileThreadState";
+
+const roomId = "!room:example.org";
+const userId = "@alice:example.org";
+
+function makeEvent({ id = "$event" }: { id?: string } = {}): MatrixEvent {
+    return mkEvent({
+        event: true,
+        id,
+        type: EventType.RoomMessage,
+        room: roomId,
+        user: userId,
+        content: {
+            msgtype: MsgType.Text,
+            body: "Hello",
+        },
+    });
+}
+
+function makeThread({
+    id = "$event",
+    replyToEvent,
+}: {
+    id?: string;
+    replyToEvent?: MatrixEvent;
+} = {}): Thread {
+    return {
+        id,
+        length: 2,
+        replyToEvent,
+    } as Thread;
+}
+
+function makeInput(overrides: Partial<EventTileThreadStateInput> = {}): EventTileThreadStateInput {
+    return {
+        mxEvent: makeEvent(),
+        thread: null,
+        timelineRenderingType: TimelineRenderingType.Room,
+        ...overrides,
+    };
+}
+
+function setThreadRootId(mxEvent: MatrixEvent, threadRootId: string): void {
+    Object.defineProperty(mxEvent, "threadRootId", {
+        configurable: true,
+        value: threadRootId,
+    });
+}
+
+describe("EventTileThreadState", () => {
+    it("uses the event thread when it is already available", () => {
+        const mxEvent = makeEvent();
+        const thread = makeThread();
+        jest.spyOn(mxEvent, "getThread").mockReturnValue(thread);
+        const room: EventTileThreadLookup = {
+            findThreadForEvent: jest.fn(),
+        };
+
+        expect(getEventTileThread(mxEvent, room)).toBe(thread);
+        expect(room.findThreadForEvent).not.toHaveBeenCalled();
+    });
+
+    it("falls back to the room thread lookup", () => {
+        const mxEvent = makeEvent();
+        const thread = makeThread();
+        jest.spyOn(mxEvent, "getThread").mockReturnValue(undefined);
+        const room: EventTileThreadLookup = {
+            findThreadForEvent: jest.fn().mockReturnValue(thread),
+        };
+
+        expect(getEventTileThread(mxEvent, room)).toBe(thread);
+        expect(room.findThreadForEvent).toHaveBeenCalledWith(mxEvent);
+    });
+
+    it("returns null when no thread can be found", () => {
+        const mxEvent = makeEvent();
+        jest.spyOn(mxEvent, "getThread").mockReturnValue(undefined);
+
+        expect(getEventTileThread(mxEvent, null)).toBeNull();
+    });
+
+    it("shows the thread summary for thread root events", () => {
+        const mxEvent = makeEvent({ id: "$thread-root" });
+        const thread = makeThread({ id: "$thread-root" });
+
+        const state = getEventTileThreadState(makeInput({ mxEvent, thread }));
+
+        expect(state.shouldShowThreadSummary).toBe(true);
+        expect(state.shouldShowThreadPanelSummary).toBe(true);
+        expect(state.searchThreadInfo.kind).toBe("none");
+    });
+
+    it("derives the thread panel timestamp from the latest reply", () => {
+        const replyToEvent = makeEvent({ id: "$reply" });
+        jest.spyOn(replyToEvent, "getTs").mockReturnValue(123);
+
+        const state = getEventTileThreadState(
+            makeInput({
+                thread: makeThread({ replyToEvent }),
+            }),
+        );
+
+        expect(state.threadReplyEventTs).toBe(123);
+    });
+
+    it("shows linked search thread info for thread replies with a highlight link", () => {
+        const mxEvent = makeEvent();
+        setThreadRootId(mxEvent, "$thread-root");
+
+        const state = getEventTileThreadState(
+            makeInput({
+                mxEvent,
+                timelineRenderingType: TimelineRenderingType.Search,
+                highlightLink: "https://example.org/thread",
+            }),
+        );
+
+        expect(state.searchThreadInfo).toEqual({
+            kind: "link",
+            href: "https://example.org/thread",
+        });
+    });
+
+    it("shows text search thread info for thread replies without a highlight link", () => {
+        const mxEvent = makeEvent();
+        setThreadRootId(mxEvent, "$thread-root");
+
+        const state = getEventTileThreadState(
+            makeInput({
+                mxEvent,
+                timelineRenderingType: TimelineRenderingType.Search,
+            }),
+        );
+
+        expect(state.searchThreadInfo).toEqual({
+            kind: "text",
+        });
+    });
+
+    it("does not show search thread info outside search timelines", () => {
+        const mxEvent = makeEvent();
+        setThreadRootId(mxEvent, "$thread-root");
+
+        const state = getEventTileThreadState(makeInput({ mxEvent }));
+
+        expect(state.searchThreadInfo.kind).toBe("none");
+    });
+});
diff --git a/apps/web/test/viewmodels/event-tiles/EventTileViewModel-test.ts b/apps/web/test/viewmodels/event-tiles/EventTileViewModel-test.ts
new file mode 100644
index 0000000000..823b66ef86
--- /dev/null
+++ b/apps/web/test/viewmodels/event-tiles/EventTileViewModel-test.ts
@@ -0,0 +1,726 @@
+/*
+ * Copyright 2026 Element Creations 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 { TimelineRenderingType } from "../../../src/contexts/RoomContext";
+import { Layout } from "../../../src/settings/enums/Layout";
+import { mkEvent, stubClient } from "../../test-utils";
+import {
+    EventTileViewModel,
+    type EventTileViewModelDependencies,
+    type NormalizedEventTileViewModelProps,
+    type EventTileViewModelProps,
+} from "../../../src/viewmodels/room/timeline/event-tile/EventTileViewModel";
+
+describe("EventTileViewModel", () => {
+    const matrixClient = stubClient();
+
+    const makeEvent = () =>
+        mkEvent({
+            event: true,
+            id: "$event",
+            room: "!room:example.org",
+            ts: 123,
+            type: "m.room.message",
+            user: "@alice:example.org",
+            content: { msgtype: "m.text" },
+        });
+
+    const makeDependencies = (mxEvent = makeEvent()): EventTileViewModelDependencies => ({
+        mxEvent,
+        matrixClient,
+        showHiddenEvents: false,
+    });
+
+    type EventTileViewModelPropsOverrides = {
+        event?: Partial<NormalizedEventTileViewModelProps["event"]>;
+        display?: Partial<EventTileViewModelProps["display"]>;
+        interaction?: Partial<EventTileViewModelProps["interaction"]>;
+        sender?: Partial<EventTileViewModelProps["sender"]>;
+        timestamp?: Partial<EventTileViewModelProps["timestamp"]>;
+        footer?: Partial<EventTileViewModelProps["footer"]>;
+    };
+
+    function makeProps(overrides: EventTileViewModelPropsOverrides = {}): NormalizedEventTileViewModelProps {
+        return {
+            event: {
+                eventType: "m.room.message",
+                msgtype: "m.text",
+                eventTs: 123,
+                eventId: "$event",
+                isState: false,
+                hasReplyChain: false,
+                isLocalEcho: false,
+                isSending: false,
+                ariaLive: "off",
+                isRoomCreate: false,
+                isCallInvite: false,
+                isRtcNotification: false,
+                isEditing: false,
+                isEncryptionFailure: false,
+                hasRenderer: true,
+                isSeeingThroughMessageHiddenForModeration: false,
+                forExport: false,
+                ...overrides.event,
+            },
+            display: {
+                timelineRenderingType: TimelineRenderingType.Room,
+                layout: Layout.Group,
+                isProbablyMedia: false,
+                isBubbleMessage: false,
+                isLeftAlignedBubbleMessage: false,
+                isAlignedBetweenBubbles: false,
+                isInfoMessage: false,
+                noBubbleEvent: false,
+                isHighlighted: false,
+                isSelected: false,
+                ...overrides.display,
+            },
+            interaction: {
+                hover: false,
+                showActionBarFromFocus: false,
+                focusWithin: false,
+                isActionBarFocused: false,
+                hasContextMenu: false,
+                ...overrides.interaction,
+            },
+            sender: {
+                senderId: "@alice:example.org",
+                member: null,
+                isEmote: false,
+                ...overrides.sender,
+            },
+            timestamp: {
+                ...overrides.timestamp,
+            },
+            footer: {
+                isOwnEvent: false,
+                hasReactionsRow: false,
+                hasReactions: false,
+                hasPinnedMessageBadge: false,
+                ...overrides.footer,
+            },
+        };
+    }
+
+    it("derives sending, aria-live, and scroll state from plain event data", () => {
+        const snapshot = EventTileViewModel.createSnapshot(
+            makeProps({
+                event: {
+                    isSending: true,
+                    isLocalEcho: true,
+                },
+            }),
+        );
+
+        expect(snapshot.event.isSending).toBe(true);
+        expect(snapshot.event).toMatchObject({
+            eventId: "$event",
+            eventTs: 123,
+            isLocalEcho: true,
+            isEncryptionFailure: false,
+        });
+        expect(snapshot.root.ariaLive).toBe("off");
+        expect(snapshot.root.scrollToken).toBeUndefined();
+        expect(snapshot.root.data).toEqual({
+            eventId: "$event",
+            layout: Layout.Group,
+            shape: TimelineRenderingType.Room,
+            isOwnEvent: false,
+            hasReply: false,
+        });
+        expect(snapshot.root.classState.mx_EventTile_sending).toBe(true);
+    });
+
+    it("derives a scroll token for non-local-echo events", () => {
+        const snapshot = EventTileViewModel.createSnapshot(
+            makeProps({
+                event: {
+                    eventId: "$remote-event",
+                    isLocalEcho: false,
+                },
+            }),
+        );
+
+        expect(snapshot.root.scrollToken).toBe("$remote-event");
+    });
+
+    it("derives render-ready root and line state", () => {
+        const renderState = EventTileViewModel.createRenderState(
+            makeProps({
+                event: {
+                    isSending: true,
+                    isLocalEcho: true,
+                },
+                display: {
+                    isHighlighted: true,
+                },
+            }),
+        );
+
+        expect(renderState.snapshot.event.isSending).toBe(true);
+        expect(renderState.root.className).toContain("mx_EventTile");
+        expect(renderState.root.className).toContain("mx_EventTile_sending");
+        expect(renderState.root.className).toContain("mx_EventTile_highlight");
+        expect(renderState.root.ariaLive).toBe("off");
+        expect(renderState.root.scrollToken).toBeUndefined();
+        expect(renderState.root.isRenderingNotification).toBe(false);
+        expect(renderState.line.className).toContain("mx_EventTile_line");
+        expect(renderState.timestamp).toMatchObject(renderState.snapshot.timestamp);
+    });
+
+    it("derives E2E padlock placement for group layout", () => {
+        const renderState = EventTileViewModel.createRenderState(
+            makeProps({
+                display: {
+                    layout: Layout.Group,
+                    isBubbleMessage: false,
+                },
+            }),
+        );
+
+        expect(renderState.e2ePadlock).toEqual({
+            showInGroupLine: true,
+            showInIrcLine: false,
+        });
+    });
+
+    it("derives E2E padlock placement for IRC layout", () => {
+        const renderState = EventTileViewModel.createRenderState(
+            makeProps({
+                display: {
+                    layout: Layout.IRC,
+                    isBubbleMessage: false,
+                },
+            }),
+        );
+
+        expect(renderState.e2ePadlock).toEqual({
+            showInGroupLine: false,
+            showInIrcLine: true,
+        });
+    });
+
+    it("does not place E2E padlocks for bubble messages", () => {
+        const renderState = EventTileViewModel.createRenderState(
+            makeProps({
+                display: {
+                    layout: Layout.Group,
+                    isBubbleMessage: true,
+                },
+            }),
+        );
+
+        expect(renderState.e2ePadlock).toEqual({
+            showInGroupLine: false,
+            showInIrcLine: false,
+        });
+    });
+
+    it("derives timestamp slots for group layout", () => {
+        const renderState = EventTileViewModel.createRenderState(
+            makeProps({
+                display: {
+                    layout: Layout.Group,
+                },
+                interaction: {
+                    hover: true,
+                },
+            }),
+        );
+
+        expect(renderState.timestamp.showDummy).toBe(false);
+        expect(renderState.timestamp.showInGroupLine).toBe(true);
+        expect(renderState.timestamp.showInIrcLine).toBe(false);
+    });
+
+    it("derives timestamp slots for IRC layout", () => {
+        const renderState = EventTileViewModel.createRenderState(
+            makeProps({
+                display: {
+                    layout: Layout.IRC,
+                },
+                interaction: {
+                    hover: true,
+                },
+            }),
+        );
+
+        expect(renderState.timestamp.showDummy).toBe(true);
+        expect(renderState.timestamp.showInGroupLine).toBe(false);
+        expect(renderState.timestamp.showInIrcLine).toBe(true);
+    });
+
+    it("keeps the IRC timestamp slot for the dummy timestamp when timestamps are hidden", () => {
+        const renderState = EventTileViewModel.createRenderState(
+            makeProps({
+                display: {
+                    layout: Layout.IRC,
+                },
+                interaction: {
+                    hover: true,
+                },
+                timestamp: {
+                    hideTimestamp: true,
+                },
+            }),
+        );
+
+        expect(renderState.timestamp.showDummy).toBe(true);
+        expect(renderState.timestamp.displayState.showLinkedTimestamp).toBe(false);
+        expect(renderState.timestamp.showInGroupLine).toBe(false);
+        expect(renderState.timestamp.showInIrcLine).toBe(true);
+    });
+
+    it("normalizes continuation by rendering mode and bubble layout", () => {
+        const fileSnapshot = EventTileViewModel.createSnapshot(
+            makeProps({
+                display: {
+                    continuation: true,
+                    timelineRenderingType: TimelineRenderingType.File,
+                    layout: Layout.Group,
+                },
+            }),
+        );
+        const bubbleSnapshot = EventTileViewModel.createSnapshot(
+            makeProps({
+                display: {
+                    continuation: true,
+                    timelineRenderingType: TimelineRenderingType.File,
+                    layout: Layout.Bubble,
+                },
+            }),
+        );
+
+        expect(fileSnapshot.event.isContinuation).toBe(false);
+        expect(bubbleSnapshot.event.isContinuation).toBe(true);
+    });
+
+    it("derives line classes from event type, message type, and media eligibility", () => {
+        const snapshot = EventTileViewModel.createSnapshot(
+            makeProps({
+                event: {
+                    msgtype: "m.image",
+                },
+                display: {
+                    isProbablyMedia: true,
+                },
+            }),
+        );
+
+        expect(snapshot.line.classState).toMatchObject({
+            mx_EventTile_mediaLine: true,
+            mx_EventTile_image: true,
+            mx_EventTile_sticker: false,
+            mx_EventTile_emote: false,
+        });
+    });
+
+    it("derives aligned-between-bubbles root class state", () => {
+        const snapshot = EventTileViewModel.createSnapshot(
+            makeProps({
+                display: {
+                    isAlignedBetweenBubbles: true,
+                },
+            }),
+        );
+
+        expect(snapshot.root.classState.mx_EventTile_alignedBetweenBubbles).toBe(true);
+    });
+
+    it("derives avatar and sender profile state for thread timelines", () => {
+        const snapshot = EventTileViewModel.createSnapshot(
+            makeProps({
+                display: {
+                    timelineRenderingType: TimelineRenderingType.Thread,
+                    continuation: false,
+                },
+            }),
+        );
+
+        expect(snapshot.sender.profileState).toEqual({
+            avatarSize: "32px",
+            needsSenderProfile: true,
+        });
+        expect(snapshot.sender.profileMode).toBe("clickable");
+        expect(snapshot.sender.viewUserOnClick).toBe(true);
+    });
+
+    it("carries pure sender render inputs", () => {
+        const snapshot = EventTileViewModel.createSnapshot(
+            makeProps({
+                sender: {
+                    senderId: "@moderator:example.org",
+                    isEmote: true,
+                },
+            }),
+        );
+
+        expect(snapshot.sender.senderId).toBe("@moderator:example.org");
+        expect(snapshot.sender.isEmote).toBe(true);
+    });
+
+    it("marks room member avatars as historical", () => {
+        const snapshot = EventTileViewModel.createSnapshot(
+            makeProps({
+                event: {
+                    eventType: "m.room.member",
+                },
+            }),
+        );
+
+        expect(snapshot.sender.forceHistoricalAvatar).toBe(true);
+    });
+
+    it("derives action bar visibility from interaction state", () => {
+        const hoverSnapshot = EventTileViewModel.createSnapshot(makeProps({ interaction: { hover: true } }));
+        const contextMenuSnapshot = EventTileViewModel.createSnapshot(
+            makeProps({
+                interaction: {
+                    isActionBarFocused: true,
+                    hasContextMenu: true,
+                },
+            }),
+        );
+
+        expect(hoverSnapshot.actionBar.show).toBe(true);
+        expect(contextMenuSnapshot.actionBar.show).toBe(false);
+    });
+
+    it("derives timestamp state for thread list events", () => {
+        const snapshot = EventTileViewModel.createSnapshot(
+            makeProps({
+                display: {
+                    timelineRenderingType: TimelineRenderingType.ThreadsList,
+                },
+                interaction: {
+                    hover: true,
+                },
+                timestamp: {
+                    threadReplyEventTs: 456,
+                },
+            }),
+        );
+
+        expect(snapshot.timestamp.show).toBe(true);
+        expect(snapshot.timestamp.value).toBe(456);
+        expect(snapshot.timestamp.displayState.showRealTimestamp).toBe(true);
+    });
+
+    it("suppresses RTC notification timestamps", () => {
+        const snapshot = EventTileViewModel.createSnapshot(
+            makeProps({
+                event: {
+                    isRtcNotification: true,
+                },
+                interaction: {
+                    hover: true,
+                },
+            }),
+        );
+
+        expect(snapshot.timestamp.show).toBe(false);
+        expect(snapshot.timestamp.displayState.showRealTimestamp).toBe(false);
+    });
+
+    it("derives footer placement state", () => {
+        const groupSnapshot = EventTileViewModel.createSnapshot(
+            makeProps({
+                display: {
+                    layout: Layout.Group,
+                },
+                footer: {
+                    isOwnEvent: true,
+                    hasReactionsRow: true,
+                    hasReactions: true,
+                    hasPinnedMessageBadge: true,
+                },
+            }),
+        );
+        const bubbleSnapshot = EventTileViewModel.createSnapshot(
+            makeProps({
+                display: {
+                    layout: Layout.Bubble,
+                },
+                footer: {
+                    isOwnEvent: true,
+                    hasPinnedMessageBadge: true,
+                },
+            }),
+        );
+
+        expect(groupSnapshot.footer).toMatchObject({
+            hasFooter: true,
+            showMainPinnedMessageBadge: true,
+            showBubblePinnedMessageBadge: false,
+        });
+        expect(bubbleSnapshot.footer).toMatchObject({
+            hasFooter: true,
+            showMainPinnedMessageBadge: false,
+            showBubblePinnedMessageBadge: true,
+        });
+    });
+
+    it("derives footer render placement for default layouts", () => {
+        const renderState = EventTileViewModel.createRenderState(
+            makeProps({
+                display: {
+                    layout: Layout.Group,
+                },
+                footer: {
+                    isOwnEvent: true,
+                    hasReactionsRow: true,
+                    hasReactions: true,
+                },
+            }),
+        );
+
+        expect(renderState.footer).toMatchObject({
+            hasFooter: true,
+            showInIrcLayout: false,
+            showInDefaultLayout: true,
+        });
+    });
+
+    it("derives footer render placement for IRC layout", () => {
+        const renderState = EventTileViewModel.createRenderState(
+            makeProps({
+                display: {
+                    layout: Layout.IRC,
+                },
+                footer: {
+                    isOwnEvent: true,
+                    hasReactionsRow: true,
+                    hasReactions: true,
+                },
+            }),
+        );
+
+        expect(renderState.footer).toMatchObject({
+            hasFooter: true,
+            showInIrcLayout: true,
+            showInDefaultLayout: false,
+        });
+    });
+
+    it("updates an instance snapshot when inputs change", () => {
+        const vm = new EventTileViewModel(makeDependencies(), makeProps());
+        const listener = jest.fn();
+        const unsubscribe = vm.subscribe(listener);
+
+        expect(vm.getSnapshot().snapshot.timestamp.show).toBe(false);
+
+        vm.setInputs(makeDependencies(), makeProps({ interaction: { hover: true } }));
+
+        expect(vm.getSnapshot().snapshot.timestamp.show).toBe(true);
+        expect(listener).toHaveBeenCalled();
+
+        unsubscribe();
+        vm.dispose();
+    });
+
+    it("emits once when dependencies and inputs are updated together", () => {
+        const vm = new EventTileViewModel(makeDependencies(), makeProps());
+        const listener = jest.fn();
+        const unsubscribe = vm.subscribe(listener);
+
+        vm.setInputs(makeDependencies(), makeProps({ interaction: { hover: true } }));
+
+        expect(listener).toHaveBeenCalledTimes(1);
+
+        unsubscribe();
+        vm.dispose();
+    });
+
+    it("normalizes event and sender state from its SDK dependency", () => {
+        const event = mkEvent({
+            event: true,
+            id: "$member-event",
+            room: "!room:example.org",
+            ts: 456,
+            type: "m.room.member",
+            user: "@bob:example.org",
+            content: { membership: "join" },
+        });
+        const vm = new EventTileViewModel(
+            makeDependencies(event),
+            makeProps({
+                event: {
+                    eventType: "m.room.message",
+                    eventId: "$wrong-event",
+                    eventTs: 123,
+                },
+                sender: {
+                    senderId: "@wrong:example.org",
+                    isEmote: false,
+                },
+            }),
+        );
+
+        expect(vm.getSnapshot().snapshot.event).toMatchObject({
+            eventType: "m.room.member",
+            eventId: "$member-event",
+            eventTs: 456,
+            isState: true,
+        });
+        expect(vm.getSnapshot().snapshot.sender).toMatchObject({
+            senderId: "@bob:example.org",
+            forceHistoricalAvatar: true,
+            isEmote: false,
+        });
+
+        vm.setInputs(
+            makeDependencies(
+                mkEvent({
+                    event: true,
+                    id: "$updated-event",
+                    room: "!room:example.org",
+                    ts: 789,
+                    type: "m.call.invite",
+                    user: "@carol:example.org",
+                    content: { msgtype: "m.call.invite" },
+                }),
+            ),
+            makeProps(),
+        );
+
+        expect(vm.getSnapshot().snapshot.event).toMatchObject({
+            eventType: "m.call.invite",
+            eventId: "$updated-event",
+            eventTs: 789,
+        });
+        expect(vm.getSnapshot().snapshot.sender.senderId).toBe("@carol:example.org");
+
+        vm.dispose();
+    });
+
+    it("normalizes event identity, replacement, renderer, and decryption state", () => {
+        const event = makeEvent();
+        jest.spyOn(event, "replacingEventId").mockReturnValue("$replaced-event");
+        jest.spyOn(event, "isDecryptionFailure").mockReturnValue(true);
+
+        const vm = new EventTileViewModel(makeDependencies(event), makeProps());
+        const snapshot = vm.getSnapshot().snapshot;
+
+        expect(snapshot.event).toMatchObject({
+            eventType: "m.room.message",
+            eventId: "$event",
+            replacingEventId: "$replaced-event",
+            isEncryptionFailure: true,
+            hasRenderer: true,
+        });
+
+        vm.dispose();
+    });
+
+    it("does not show a reply chain for replacement events", () => {
+        const event = mkEvent({
+            event: true,
+            id: "$replacement-event",
+            room: "!room:example.org",
+            ts: 123,
+            type: "m.room.message",
+            user: "@alice:example.org",
+            content: {
+                "msgtype": "m.text",
+                "m.relates_to": {
+                    "rel_type": "m.replace",
+                    "event_id": "$original-event",
+                    "m.in_reply_to": {
+                        event_id: "$parent-event",
+                    },
+                },
+            },
+        });
+        const vm = new EventTileViewModel(makeDependencies(event), makeProps());
+
+        expect(vm.getSnapshot().snapshot.root.data.hasReply).toBe(false);
+
+        vm.dispose();
+    });
+
+    it("derives an unavailable renderer for unsupported events", () => {
+        const event = mkEvent({
+            event: true,
+            room: "!room:example.org",
+            type: "org.example.unsupported",
+            user: "@alice:example.org",
+            content: {},
+        });
+        const vm = new EventTileViewModel(makeDependencies(event), makeProps());
+
+        expect(vm.getSnapshot().snapshot.event.hasRenderer).toBe(false);
+
+        vm.dispose();
+    });
+
+    it("recalculates renderer state when dependencies change", () => {
+        const event = mkEvent({
+            event: true,
+            room: "!room:example.org",
+            type: "org.example.unsupported",
+            user: "@alice:example.org",
+            content: {},
+        });
+        const vm = new EventTileViewModel(makeDependencies(event), makeProps());
+
+        expect(vm.getSnapshot().snapshot.event.hasRenderer).toBe(false);
+
+        vm.setInputs(makeDependencies(makeEvent()), makeProps());
+
+        expect(vm.getSnapshot().snapshot.event.hasRenderer).toBe(true);
+
+        vm.dispose();
+    });
+
+    it("lazily owns timestamp child view models", () => {
+        const vm = new EventTileViewModel(makeDependencies(), makeProps());
+        const messageTimestampViewModel = vm.getMessageTimestampViewModel({ ts: 123 });
+        const linkedMessageTimestampViewModel = vm.getLinkedMessageTimestampViewModel({ ts: 456 });
+
+        expect(messageTimestampViewModel.getSnapshot().href).toBeUndefined();
+        expect(linkedMessageTimestampViewModel.getSnapshot().href).toBeUndefined();
+
+        vm.dispose();
+    });
+
+    it("does not initialize timestamp child view models for events without an origin timestamp", () => {
+        const vm = new EventTileViewModel(
+            makeDependencies(),
+            makeProps({
+                event: {
+                    eventTs: 0,
+                },
+                timestamp: {
+                    hideTimestamp: true,
+                },
+            }),
+        );
+
+        expect(vm.getSnapshot().timestamp.displayState.showRealTimestamp).toBe(false);
+
+        vm.dispose();
+    });
+
+    it("owns and updates the thread-list action bar child view model", () => {
+        const vm = new EventTileViewModel(makeDependencies(), makeProps());
+        const onViewInRoomClick = jest.fn();
+        const onCopyLinkClick = jest.fn();
+
+        const threadListActionBarViewModel = vm.getThreadListActionBarViewModel({
+            onViewInRoomClick,
+            onCopyLinkClick,
+        });
+
+        threadListActionBarViewModel.onViewInRoomClick(null);
+        threadListActionBarViewModel.onCopyLinkClick(null);
+
+        expect(onViewInRoomClick).toHaveBeenCalledWith(null);
+        expect(onCopyLinkClick).toHaveBeenCalledWith(null);
+
+        vm.dispose();
+    });
+});
diff --git a/apps/web/test/viewmodels/event-tiles/MJitsiWidgetEventViewModel-test.ts b/apps/web/test/viewmodels/event-tiles/MJitsiWidgetEventViewModel-test.ts
new file mode 100644
index 0000000000..1968b50b01
--- /dev/null
+++ b/apps/web/test/viewmodels/event-tiles/MJitsiWidgetEventViewModel-test.ts
@@ -0,0 +1,180 @@
+/*
+ * Copyright 2026 Element Creations 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 { EventEmitter } from "node:events";
+import { type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
+
+import { MJitsiWidgetEventViewModel } from "../../../src/viewmodels/room/timeline/event-tile/MJitsiWidgetEventViewModel";
+import { UPDATE_EVENT } from "../../../src/stores/AsyncStore";
+import { WidgetLayoutStore } from "../../../src/stores/widgets/WidgetLayoutStore";
+import { mkEvent, stubClient } from "../../test-utils";
+import type WidgetStore from "../../../src/stores/WidgetStore";
+import type { IApp } from "../../../src/stores/WidgetStore";
+
+describe("MJitsiWidgetEventViewModel", () => {
+    const roomId = "!room:example.com";
+    const widgetId = "jitsi";
+    let cli: MatrixClient;
+    let room: Room;
+    let widget: IApp;
+    let widgetStore: WidgetStore & EventEmitter;
+    let widgetLayoutStore: WidgetLayoutStore & EventEmitter;
+
+    const createEvent = (content: { url?: string }, prevContent: { url?: string } = {}) =>
+        mkEvent({
+            event: true,
+            room: roomId,
+            user: "@alice:example.com",
+            skey: widgetId,
+            type: "im.vector.modular.widgets",
+            content,
+            prev_content: prevContent,
+        });
+
+    const createVm = (
+        props: Partial<ConstructorParameters<typeof MJitsiWidgetEventViewModel>[0]> = {},
+    ): MJitsiWidgetEventViewModel =>
+        new MJitsiWidgetEventViewModel({
+            cli,
+            mxEvent: createEvent({ url: "https://jitsi.example.com/room" }),
+            widgetStore,
+            widgetLayoutStore,
+            ...props,
+        });
+
+    beforeEach(() => {
+        cli = stubClient();
+        room = cli.getRoom(roomId)!;
+        widget = {
+            id: widgetId,
+            roomId,
+            type: "m.jitsi",
+        } as IApp;
+        widgetStore = Object.assign(new EventEmitter(), {
+            getRoom: jest.fn().mockReturnValue({ widgets: [widget] }),
+        }) as unknown as WidgetStore & EventEmitter;
+        widgetLayoutStore = Object.assign(new EventEmitter(), {
+            isInContainer: jest.fn().mockReturnValue(false),
+        }) as unknown as WidgetLayoutStore & EventEmitter;
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    it("renders a started Jitsi event with the top join prompt", () => {
+        const vm = createVm();
+
+        expect(vm.getSnapshot()).toMatchObject({
+            isVisible: true,
+            title: "Video conference started by @alice:example.com",
+            subtitle: "Join the conference at the top of this room",
+        });
+    });
+
+    it("uses the right-panel join prompt when the widget is in the right container", () => {
+        jest.mocked(widgetLayoutStore.isInContainer).mockReturnValue(true);
+
+        const vm = createVm();
+
+        expect(vm.getSnapshot().subtitle).toBe("Join the conference from the room information card on the right");
+    });
+
+    it("omits the join prompt when the widget no longer exists", () => {
+        jest.mocked(widgetStore.getRoom).mockReturnValue({ widgets: [] });
+
+        const vm = createVm();
+
+        expect(vm.getSnapshot()).toMatchObject({
+            isVisible: true,
+            title: "Video conference started by @alice:example.com",
+            subtitle: null,
+        });
+    });
+
+    it("renders an updated Jitsi event", () => {
+        const vm = createVm({
+            mxEvent: createEvent({ url: "https://jitsi.example.com/room" }, { url: "https://old.example.com/room" }),
+        });
+
+        expect(vm.getSnapshot()).toMatchObject({
+            isVisible: true,
+            title: "Video conference updated by @alice:example.com",
+            subtitle: "Join the conference at the top of this room",
+        });
+    });
+
+    it("renders an ended Jitsi event without a join prompt", () => {
+        const vm = createVm({
+            mxEvent: createEvent({}, { url: "https://old.example.com/room" }),
+        });
+
+        expect(vm.getSnapshot()).toMatchObject({
+            isVisible: true,
+            title: "Video conference ended by @alice:example.com",
+            subtitle: null,
+        });
+    });
+
+    it("hides the event when the room is unavailable", () => {
+        jest.spyOn(cli, "getRoom").mockReturnValue(null);
+
+        const vm = createVm();
+
+        expect(vm.getSnapshot()).toMatchObject({
+            isVisible: false,
+            title: "",
+            subtitle: null,
+        });
+    });
+
+    it("updates the snapshot when the event changes", () => {
+        const vm = createVm();
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        vm.setEvent(createEvent({ url: "https://jitsi.example.com/room" }, { url: "https://old.example.com/room" }));
+
+        expect(vm.getSnapshot().title).toBe("Video conference updated by @alice:example.com");
+        expect(listener).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not emit updates when setEvent receives the current event", () => {
+        const mxEvent = createEvent({ url: "https://jitsi.example.com/room" });
+        const listener = jest.fn();
+        const vm = createVm({ mxEvent });
+
+        vm.subscribe(listener);
+        vm.setEvent(mxEvent);
+
+        expect(listener).not.toHaveBeenCalled();
+    });
+
+    it("updates when widget stores emit for the room", () => {
+        const vm = createVm();
+        const listener = jest.fn();
+        vm.subscribe(listener);
+        jest.mocked(widgetLayoutStore.isInContainer).mockReturnValue(true);
+
+        widgetStore.emit(UPDATE_EVENT, roomId);
+
+        expect(vm.getSnapshot().subtitle).toBe("Join the conference from the room information card on the right");
+        expect(listener).toHaveBeenCalledTimes(1);
+    });
+
+    it("updates when the widget layout store emits for the room", () => {
+        const vm = createVm();
+        const listener = jest.fn();
+        vm.subscribe(listener);
+        jest.mocked(widgetLayoutStore.isInContainer).mockReturnValue(true);
+
+        widgetLayoutStore.emit(WidgetLayoutStore.emissionForRoom(room));
+
+        expect(vm.getSnapshot().subtitle).toBe("Join the conference from the room information card on the right");
+        expect(listener).toHaveBeenCalledTimes(1);
+    });
+});
diff --git a/apps/web/test/viewmodels/event-tiles/MKeyVerificationRequestViewModel-test.tsx b/apps/web/test/viewmodels/event-tiles/MKeyVerificationRequestViewModel-test.tsx
new file mode 100644
index 0000000000..2afd7e4227
--- /dev/null
+++ b/apps/web/test/viewmodels/event-tiles/MKeyVerificationRequestViewModel-test.tsx
@@ -0,0 +1,161 @@
+/*
+ * Copyright 2026 Element Creations 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 { type MatrixClient, MatrixEvent, type Room, type RoomMember } from "matrix-js-sdk/src/matrix";
+
+import { MKeyVerificationRequestViewModel } from "../../../src/viewmodels/room/timeline/event-tile/MKeyVerificationRequestViewModel";
+
+describe("MKeyVerificationRequestViewModel", () => {
+    const roomId = "!room:example.org";
+    const myUserId = "@me:example.org";
+    let cli: MatrixClient;
+    let room: Room;
+
+    beforeEach(() => {
+        room = {
+            getMember: jest.fn(),
+        } as unknown as Room;
+        cli = {
+            getSafeUserId: jest.fn().mockReturnValue(myUserId),
+            getRoom: jest.fn().mockReturnValue(room),
+        } as unknown as MatrixClient;
+    });
+
+    const createEvent = (sender?: string, to = myUserId, eventRoomId: string | undefined = roomId): MatrixEvent =>
+        new MatrixEvent({
+            type: "m.room.message",
+            room_id: eventRoomId,
+            sender,
+            content: {
+                msgtype: "m.key.verification.request",
+                from_device: "DEVICE",
+                methods: ["m.sas.v1"],
+                to,
+            },
+        });
+
+    it("throws if the event has no sender", () => {
+        expect(() => new MKeyVerificationRequestViewModel({ cli, mxEvent: createEvent() })).toThrow(
+            "Verification request did not include a sender!",
+        );
+    });
+
+    it("throws if the event has no room", () => {
+        expect(
+            () =>
+                new MKeyVerificationRequestViewModel({
+                    cli,
+                    mxEvent: createEvent("@alice:example.org", myUserId, ""),
+                }),
+        ).toThrow("Verification request did not include a room ID!");
+    });
+
+    it("renders a request sent by me", () => {
+        jest.mocked(room.getMember).mockReturnValue({
+            name: "Alice",
+        } as RoomMember);
+
+        const vm = new MKeyVerificationRequestViewModel({
+            cli,
+            mxEvent: createEvent(myUserId, "@alice:example.org"),
+        });
+
+        expect(vm.getSnapshot()).toMatchObject({
+            title: "You sent a verification request",
+            subtitle: "Alice (@alice:example.org)",
+        });
+    });
+
+    it("renders a request sent by someone else", () => {
+        jest.mocked(room.getMember).mockReturnValue({
+            name: "Alice",
+        } as RoomMember);
+
+        const vm = new MKeyVerificationRequestViewModel({
+            cli,
+            mxEvent: createEvent("@alice:example.org"),
+        });
+
+        expect(vm.getSnapshot()).toMatchObject({
+            title: "Alice wants to verify",
+            subtitle: "Alice (@alice:example.org)",
+        });
+    });
+
+    it("falls back to user ID when no room member is available", () => {
+        const vm = new MKeyVerificationRequestViewModel({
+            cli,
+            mxEvent: createEvent("@alice:example.org"),
+        });
+
+        expect(vm.getSnapshot()).toMatchObject({
+            title: "@alice:example.org wants to verify",
+            subtitle: "@alice:example.org",
+        });
+    });
+
+    it("updates the snapshot when the event changes", () => {
+        const vm = new MKeyVerificationRequestViewModel({
+            cli,
+            mxEvent: createEvent("@alice:example.org"),
+        });
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        vm.setEvent(createEvent(myUserId, "@bob:example.org"));
+
+        expect(vm.getSnapshot()).toMatchObject({
+            title: "You sent a verification request",
+            subtitle: "@bob:example.org",
+        });
+        expect(listener).toHaveBeenCalledTimes(1);
+    });
+
+    it("updates only timestamp when the timestamp changes", () => {
+        const timestamp = <span>14:56</span>;
+        const vm = new MKeyVerificationRequestViewModel({
+            cli,
+            mxEvent: createEvent("@alice:example.org"),
+        });
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        vm.setTimestamp(timestamp);
+
+        expect(vm.getSnapshot().timestamp).toBe(timestamp);
+        expect(listener).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not emit when the event-derived snapshot is unchanged", () => {
+        const vm = new MKeyVerificationRequestViewModel({
+            cli,
+            mxEvent: createEvent("@alice:example.org"),
+        });
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        vm.setEvent(createEvent("@alice:example.org"));
+
+        expect(listener).not.toHaveBeenCalled();
+    });
+
+    it("does not emit when the timestamp is unchanged", () => {
+        const timestamp = <span>14:56</span>;
+        const vm = new MKeyVerificationRequestViewModel({
+            cli,
+            mxEvent: createEvent("@alice:example.org"),
+            timestamp,
+        });
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        vm.setTimestamp(timestamp);
+
+        expect(listener).not.toHaveBeenCalled();
+    });
+});
diff --git a/apps/web/test/viewmodels/event-tiles/RoomAvatarEventViewModel-test.ts b/apps/web/test/viewmodels/event-tiles/RoomAvatarEventViewModel-test.ts
new file mode 100644
index 0000000000..9735a4c0aa
--- /dev/null
+++ b/apps/web/test/viewmodels/event-tiles/RoomAvatarEventViewModel-test.ts
@@ -0,0 +1,138 @@
+/*
+ * Copyright 2026 Element Creations 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 { EventType, type MatrixClient, MatrixEvent, type Room } from "matrix-js-sdk/src/matrix";
+
+import Modal from "../../../src/Modal";
+import { RoomAvatarEventViewModel } from "../../../src/viewmodels/room/timeline/event-tile/RoomAvatarEventViewModel";
+
+describe("RoomAvatarEventViewModel", () => {
+    const roomId = "!room:example.org";
+    let cli: MatrixClient;
+    let room: Room;
+    let mxcUrlToHttp: jest.Mock;
+
+    beforeEach(() => {
+        mxcUrlToHttp = jest.fn().mockReturnValue("https://example.org/_matrix/media/v3/download/avatar");
+        room = {
+            name: "General",
+        } as unknown as Room;
+        cli = {
+            getRoom: jest.fn().mockReturnValue(room),
+            mxcUrlToHttp,
+        } as unknown as MatrixClient;
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    const createEvent = (
+        url?: string,
+        sender = "@alice:example.org",
+        eventRoomId: string | undefined = roomId,
+    ): MatrixEvent =>
+        new MatrixEvent({
+            type: EventType.RoomAvatar,
+            room_id: eventRoomId,
+            state_key: "",
+            sender,
+            content: {
+                url,
+            },
+        });
+
+    it("extracts room avatar event details", () => {
+        const mxEvent = createEvent("mxc://example.org/avatar");
+        mxEvent.sender = { name: "Alice" } as MatrixEvent["sender"];
+
+        const vm = new RoomAvatarEventViewModel({ cli, mxEvent });
+
+        expect(vm.getSnapshot()).toEqual({
+            senderDisplayName: "Alice",
+            roomName: "General",
+            avatarUrl: "mxc://example.org/avatar",
+            lightboxLabel: "Alice changed the avatar for General",
+            isRemoved: false,
+        });
+    });
+
+    it("falls back to the sender ID when no sender member is available", () => {
+        const vm = new RoomAvatarEventViewModel({ cli, mxEvent: createEvent("mxc://example.org/avatar") });
+
+        expect(vm.getSnapshot().senderDisplayName).toBe("@alice:example.org");
+    });
+
+    it("marks the event as removed when no avatar URL is present", () => {
+        const vm = new RoomAvatarEventViewModel({ cli, mxEvent: createEvent("") });
+
+        expect(vm.getSnapshot()).toMatchObject({
+            avatarUrl: undefined,
+            isRemoved: true,
+        });
+    });
+
+    it("updates the snapshot when the event changes", () => {
+        const vm = new RoomAvatarEventViewModel({ cli, mxEvent: createEvent("mxc://example.org/avatar") });
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        vm.setEvent(createEvent("mxc://example.org/next", "@bob:example.org"));
+
+        expect(vm.getSnapshot()).toMatchObject({
+            senderDisplayName: "@bob:example.org",
+            avatarUrl: "mxc://example.org/next",
+            isRemoved: false,
+        });
+        expect(listener).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not emit when the event-derived snapshot is unchanged", () => {
+        const vm = new RoomAvatarEventViewModel({ cli, mxEvent: createEvent("mxc://example.org/avatar") });
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        vm.setEvent(createEvent("mxc://example.org/avatar"));
+
+        expect(listener).not.toHaveBeenCalled();
+    });
+
+    it("opens the room avatar in the lightbox", () => {
+        const dialogSpy = jest.spyOn(Modal, "createDialog").mockReturnValue({ close: jest.fn() } as any);
+        const vm = new RoomAvatarEventViewModel({ cli, mxEvent: createEvent("mxc://example.org/avatar") });
+
+        vm.onAvatarClick();
+
+        expect(mxcUrlToHttp).toHaveBeenCalledWith(
+            "mxc://example.org/avatar",
+            undefined,
+            undefined,
+            undefined,
+            false,
+            true,
+        );
+        expect(dialogSpy).toHaveBeenCalledWith(
+            expect.any(Function),
+            {
+                src: "https://example.org/_matrix/media/v3/download/avatar",
+                name: "@alice:example.org changed the avatar for General",
+            },
+            "mx_Dialog_lightbox",
+            undefined,
+            true,
+        );
+    });
+
+    it("does not open the lightbox when the event has no avatar URL", () => {
+        const dialogSpy = jest.spyOn(Modal, "createDialog").mockReturnValue({ close: jest.fn() } as any);
+        const vm = new RoomAvatarEventViewModel({ cli, mxEvent: createEvent("") });
+
+        vm.onAvatarClick();
+
+        expect(dialogSpy).not.toHaveBeenCalled();
+    });
+});
diff --git a/apps/web/test/viewmodels/event-tiles/ThreadSummaryViewModel-test.ts b/apps/web/test/viewmodels/event-tiles/ThreadSummaryViewModel-test.ts
new file mode 100644
index 0000000000..07f51a861b
--- /dev/null
+++ b/apps/web/test/viewmodels/event-tiles/ThreadSummaryViewModel-test.ts
@@ -0,0 +1,888 @@
+/*
+ * Copyright 2026 Element Creations 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 { EventEmitter } from "node:events";
+import { type MouseEvent } from "react";
+import {
+    EventType,
+    M_POLL_START,
+    type MatrixClient,
+    type MatrixEvent,
+    MatrixEventEvent,
+    MsgType,
+    type Room,
+    RoomEvent,
+    type RoomMember,
+    RoomStateEvent,
+    type Thread,
+    ThreadEvent,
+} from "matrix-js-sdk/src/matrix";
+import { logger } from "matrix-js-sdk/src/logger";
+import { waitFor } from "jest-matrix-react";
+
+import { mkEvent } from "../../test-utils";
+import { NotificationLevel } from "../../../src/stores/notifications/NotificationLevel";
+import { TimelineRenderingType } from "../../../src/contexts/RoomContext";
+import { MessagePreviewStore } from "../../../src/stores/message-preview";
+import defaultDispatcher from "../../../src/dispatcher/dispatcher";
+import PosthogTrackers from "../../../src/PosthogTrackers";
+import { determineUnreadState } from "../../../src/RoomNotifs";
+import {
+    ThreadMessagePreviewViewModel,
+    type ThreadMessagePreviewViewModelProps,
+    ThreadSummaryViewModel,
+    type ThreadSummaryViewModelProps,
+} from "../../../src/viewmodels/room/timeline/event-tile/ThreadSummaryViewModel";
+
+jest.mock("../../../src/dispatcher/dispatcher", () => ({
+    __esModule: true,
+    default: {
+        dispatch: jest.fn(),
+        register: jest.fn(),
+        unregister: jest.fn(),
+    },
+}));
+
+jest.mock("../../../src/PosthogTrackers", () => ({
+    __esModule: true,
+    default: {
+        trackInteraction: jest.fn(),
+    },
+}));
+
+jest.mock("../../../src/RoomNotifs", () => ({
+    determineUnreadState: jest.fn(() => ({
+        symbol: null,
+        count: 0,
+        level: 0,
+        invited: false,
+    })),
+}));
+
+const roomId = "!room:example.org";
+const userId = "@alice:example.org";
+const clientMxcUrlToHttpMocks = new WeakMap<MatrixClient, jest.Mock>();
+
+class TestRoom extends EventEmitter {
+    public roomId = roomId;
+    public getMember = jest.fn();
+}
+
+class TestThread extends EventEmitter {
+    public id = "$root";
+    public length = 2;
+    public replyToEvent?: MatrixEvent;
+
+    public constructor(public room: Room) {
+        super();
+    }
+}
+
+function makeClient(decryptEventIfNeeded = jest.fn().mockResolvedValue(undefined)): MatrixClient {
+    const mxcUrlToHttp = jest.fn(
+        (mxc: string, width?: number, height?: number, resizeMethod?: string) =>
+            `https://matrix.example.org/_matrix/media/${mxc}/${width}x${height}/${resizeMethod}`,
+    );
+    const cli = {
+        decryptEventIfNeeded,
+        mxcUrlToHttp,
+    } as unknown as MatrixClient;
+    clientMxcUrlToHttpMocks.set(cli, mxcUrlToHttp);
+    return cli;
+}
+
+function getMxcUrlToHttpMock(cli: MatrixClient): jest.Mock {
+    const mock = clientMxcUrlToHttpMocks.get(cli);
+    if (!mock) throw new Error("Missing mxcUrlToHttp mock for test client");
+    return mock;
+}
+
+function makeMember(name: string, senderUserId = userId, mxcAvatarUrl?: string): RoomMember {
+    return {
+        userId: senderUserId,
+        membership: "join",
+        name,
+        rawDisplayName: name,
+        roomId,
+        getAvatarUrl: jest.fn(),
+        getMxcAvatarUrl: jest.fn(() => mxcAvatarUrl),
+    } as unknown as RoomMember;
+}
+
+function makeEvent(
+    body = "Latest reply",
+    {
+        type = EventType.RoomMessage,
+        msgtype = MsgType.Text,
+        senderName = "Alice",
+        senderUserId = userId,
+        mxcAvatarUrl,
+    }: Partial<{
+        type: string;
+        msgtype: MsgType;
+        senderName: string;
+        senderUserId: string;
+        mxcAvatarUrl: string;
+    }> = {},
+): MatrixEvent {
+    const mxEvent = mkEvent({
+        event: true,
+        id: `$${body}`,
+        type,
+        room: roomId,
+        user: senderUserId,
+        content: {
+            msgtype,
+            body,
+        },
+    });
+    mxEvent.sender = makeMember(senderName, senderUserId, mxcAvatarUrl);
+    return mxEvent;
+}
+
+function makePreviewVm(overrides: Partial<ThreadMessagePreviewViewModelProps> = {}): {
+    vm: ThreadMessagePreviewViewModel;
+    thread: TestThread & Thread;
+    room: TestRoom & Room;
+    cli: MatrixClient;
+} {
+    const room = (overrides.room as (TestRoom & Room) | undefined) ?? (new TestRoom() as TestRoom & Room);
+    const thread =
+        (overrides.thread as (TestThread & Thread) | undefined) ?? (new TestThread(room) as TestThread & Thread);
+    if (!thread.replyToEvent) {
+        thread.replyToEvent = makeEvent();
+    }
+
+    const cli = overrides.cli ?? makeClient();
+    const vm = new ThreadMessagePreviewViewModel({
+        cli,
+        thread,
+        room,
+        timelineRenderingType: TimelineRenderingType.Room,
+        lowBandwidth: false,
+        useOnlyCurrentProfiles: false,
+        showDisplayName: false,
+        ...overrides,
+    });
+
+    return { vm, thread, room, cli };
+}
+
+function makeSummaryVm(overrides: Partial<ThreadSummaryViewModelProps> = {}): {
+    vm: ThreadSummaryViewModel;
+    thread: TestThread & Thread;
+    rootEvent: MatrixEvent;
+    room: TestRoom & Room;
+    cli: MatrixClient;
+} {
+    const room = new TestRoom() as TestRoom & Room;
+    const thread = new TestThread(room) as TestThread & Thread;
+    thread.replyToEvent = makeEvent();
+    const rootEvent = makeEvent("Root");
+    const cli = overrides.cli ?? makeClient();
+    const vm = new ThreadSummaryViewModel({
+        cli,
+        mxEvent: rootEvent,
+        thread,
+        room,
+        timelineRenderingType: TimelineRenderingType.Room,
+        lowBandwidth: false,
+        useOnlyCurrentProfiles: false,
+        narrow: true,
+        isCard: false,
+        ...overrides,
+    });
+
+    return { vm, thread, rootEvent, room, cli };
+}
+
+describe("ThreadSummaryViewModel", () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+        jest.mocked(determineUnreadState).mockReturnValue({
+            symbol: null,
+            count: 0,
+            level: NotificationLevel.None,
+            invited: false,
+        });
+        jest.spyOn(MessagePreviewStore.instance, "generatePreviewForEvent").mockReturnValue("Latest reply");
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    it("computes initial summary state from the thread", () => {
+        const { vm } = makeSummaryVm();
+
+        expect(vm.getSnapshot().isVisible).toBe(true);
+        expect(vm.getSnapshot().replyCountLabel).toBe("2");
+        expect(vm.getSnapshot().narrow).toBe(true);
+        expect(vm.getSnapshot().openThreadLabel).toBeTruthy();
+    });
+
+    it("updates visibility and reply count when the thread mutates", () => {
+        const { vm, thread } = makeSummaryVm();
+
+        thread.length = 0;
+        thread.emit(ThreadEvent.Update, thread);
+
+        expect(vm.getSnapshot().isVisible).toBe(false);
+        expect(vm.getSnapshot().replyCountLabel).toBe("0");
+    });
+
+    it("uses plural reply labels outside narrow mode and synchronizes the nested preview display name", () => {
+        const { vm } = makeSummaryVm({ narrow: false });
+
+        expect(vm.getSnapshot().replyCountLabel).toBe("2 replies");
+        expect(vm.getSnapshot().previewVm.getSnapshot().showDisplayName).toBe(true);
+
+        vm.setNarrow(true);
+
+        expect(vm.getSnapshot().replyCountLabel).toBe("2");
+        expect(vm.getSnapshot().narrow).toBe(true);
+        expect(vm.getSnapshot().previewVm.getSnapshot().showDisplayName).toBe(false);
+    });
+
+    it("does not emit when setters receive unchanged values", () => {
+        const { vm, thread, rootEvent, room, cli } = makeSummaryVm();
+        const previewVm = vm.getSnapshot().previewVm as ThreadMessagePreviewViewModel;
+        const setClientSpy = jest.spyOn(previewVm, "setClient");
+        const setRoomSpy = jest.spyOn(previewVm, "setRoom");
+        const setTimelineRenderingTypeSpy = jest.spyOn(previewVm, "setTimelineRenderingType");
+        const setLowBandwidthSpy = jest.spyOn(previewVm, "setLowBandwidth");
+        const setUseOnlyCurrentProfilesSpy = jest.spyOn(previewVm, "setUseOnlyCurrentProfiles");
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        vm.setRootEvent(rootEvent);
+        vm.setClient(cli);
+        vm.setThread(thread);
+        vm.setRoom(room);
+        vm.setTimelineRenderingType(TimelineRenderingType.Room);
+        vm.setLowBandwidth(false);
+        vm.setUseOnlyCurrentProfiles(false);
+        vm.setNarrow(true);
+        vm.setIsCard(false);
+
+        expect(listener).not.toHaveBeenCalled();
+        expect(setClientSpy).not.toHaveBeenCalled();
+        expect(setRoomSpy).not.toHaveBeenCalled();
+        expect(setTimelineRenderingTypeSpy).not.toHaveBeenCalled();
+        expect(setLowBandwidthSpy).not.toHaveBeenCalled();
+        expect(setUseOnlyCurrentProfilesSpy).not.toHaveBeenCalled();
+    });
+
+    it("forwards changed context inputs to the preview view model", () => {
+        const { vm } = makeSummaryVm();
+        const previewVm = vm.getSnapshot().previewVm as ThreadMessagePreviewViewModel;
+        const nextClient = makeClient();
+        const nextRoom = new TestRoom() as TestRoom & Room;
+
+        const setClientSpy = jest.spyOn(previewVm, "setClient");
+        const setRoomSpy = jest.spyOn(previewVm, "setRoom");
+        const setTimelineRenderingTypeSpy = jest.spyOn(previewVm, "setTimelineRenderingType");
+        const setLowBandwidthSpy = jest.spyOn(previewVm, "setLowBandwidth");
+        const setUseOnlyCurrentProfilesSpy = jest.spyOn(previewVm, "setUseOnlyCurrentProfiles");
+
+        vm.setClient(nextClient);
+        vm.setRoom(nextRoom);
+        vm.setTimelineRenderingType(TimelineRenderingType.Thread);
+        vm.setLowBandwidth(true);
+        vm.setUseOnlyCurrentProfiles(true);
+
+        expect(setClientSpy).toHaveBeenCalledWith(nextClient);
+        expect(setRoomSpy).toHaveBeenCalledWith(nextRoom);
+        expect(setTimelineRenderingTypeSpy).toHaveBeenCalledWith(TimelineRenderingType.Thread);
+        expect(setLowBandwidthSpy).toHaveBeenCalledWith(true);
+        expect(setUseOnlyCurrentProfilesSpy).toHaveBeenCalledWith(true);
+    });
+
+    it("refreshes notification indicator for thread unread events", () => {
+        const { vm, room, thread } = makeSummaryVm();
+        jest.mocked(determineUnreadState).mockReturnValue({
+            symbol: null,
+            count: 1,
+            level: NotificationLevel.Highlight,
+            invited: false,
+        });
+
+        room.emit(RoomEvent.UnreadNotifications, {}, thread.id);
+
+        expect(vm.getSnapshot().notificationIndicator).toBe("critical");
+    });
+
+    it("ignores unread notifications for other threads and refreshes on room notification events", () => {
+        const { vm, room } = makeSummaryVm();
+        jest.mocked(determineUnreadState).mockClear();
+        jest.mocked(determineUnreadState).mockReturnValue({
+            symbol: null,
+            count: 1,
+            level: NotificationLevel.Notification,
+            invited: false,
+        });
+
+        room.emit(RoomEvent.UnreadNotifications, {}, "$other-thread");
+
+        expect(determineUnreadState).not.toHaveBeenCalled();
+        expect(vm.getSnapshot().notificationIndicator).toBeUndefined();
+
+        room.emit(RoomEvent.Receipt);
+
+        expect(determineUnreadState).toHaveBeenCalledWith(room, "$root", false);
+        expect(vm.getSnapshot().notificationIndicator).toBe("success");
+    });
+
+    it("rebinds thread listeners when the thread changes and removes them on dispose", () => {
+        const { vm, thread, room } = makeSummaryVm();
+        const nextRoom = new TestRoom() as TestRoom & Room;
+        const nextThread = new TestThread(nextRoom) as TestThread & Thread;
+        nextThread.length = 4;
+        nextThread.replyToEvent = makeEvent("Next thread reply");
+
+        vm.setThread(nextThread);
+
+        expect(thread.listenerCount(ThreadEvent.Update)).toBe(0);
+        expect(room.listenerCount(RoomEvent.Receipt)).toBe(0);
+        expect(vm.getSnapshot().replyCountLabel).toBe("4");
+
+        thread.length = 0;
+        thread.emit(ThreadEvent.Update, thread);
+        expect(vm.getSnapshot().replyCountLabel).toBe("4");
+
+        nextThread.length = 5;
+        nextThread.emit(ThreadEvent.Update, nextThread);
+        expect(vm.getSnapshot().replyCountLabel).toBe("5");
+
+        vm.dispose();
+
+        expect(nextThread.listenerCount(ThreadEvent.Update)).toBe(0);
+        expect(nextRoom.listenerCount(RoomEvent.Receipt)).toBe(0);
+    });
+
+    it("dispatches ShowThread and tracks interaction on click", () => {
+        const { vm, rootEvent } = makeSummaryVm({ isCard: true });
+        const event = { type: "click" } as MouseEvent<HTMLButtonElement>;
+
+        vm.onClick(event);
+
+        expect(defaultDispatcher.dispatch).toHaveBeenCalledWith({
+            action: "show_thread",
+            rootEvent,
+            push: true,
+        });
+        expect(PosthogTrackers.trackInteraction).toHaveBeenCalledWith("WebRoomTimelineThreadSummaryButton", event);
+    });
+
+    it("uses the latest root event and card mode from setters when opening the thread", () => {
+        const { vm } = makeSummaryVm();
+        const nextRootEvent = makeEvent("Next root");
+        const event = { type: "click" } as MouseEvent<HTMLButtonElement>;
+
+        vm.setRootEvent(nextRootEvent);
+        vm.setIsCard(true);
+        vm.onClick(event);
+
+        expect(defaultDispatcher.dispatch).toHaveBeenCalledWith({
+            action: "show_thread",
+            rootEvent: nextRootEvent,
+            push: true,
+        });
+    });
+});
+
+describe("ThreadMessagePreviewViewModel", () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+        jest.mocked(determineUnreadState).mockReturnValue({
+            symbol: null,
+            count: 0,
+            level: NotificationLevel.None,
+            invited: false,
+        });
+        jest.spyOn(MessagePreviewStore.instance, "generatePreviewForEvent").mockImplementation((event) => {
+            return event.getContent().body;
+        });
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    it("hides the preview when the thread has no latest reply", () => {
+        const room = new TestRoom() as TestRoom & Room;
+        const thread = new TestThread(room) as TestThread & Thread;
+        const vm = new ThreadMessagePreviewViewModel({
+            cli: makeClient(),
+            thread,
+            room,
+            timelineRenderingType: TimelineRenderingType.Room,
+            lowBandwidth: false,
+            useOnlyCurrentProfiles: false,
+            showDisplayName: true,
+        });
+
+        expect(vm.getSnapshot().isVisible).toBe(false);
+        expect(vm.getSnapshot().avatar).toBeUndefined();
+        expect(vm.getSnapshot().senderName).toBeUndefined();
+        expect(vm.getSnapshot().previewContent).toBeUndefined();
+        expect(vm.getSnapshot().previewTooltip).toBeUndefined();
+        expect(vm.getSnapshot().showDisplayName).toBe(true);
+    });
+
+    it("renders the latest reply preview", async () => {
+        const room = new TestRoom() as TestRoom & Room;
+        const thread = new TestThread(room) as TestThread & Thread;
+        thread.replyToEvent = makeEvent("First reply");
+        const vm = new ThreadMessagePreviewViewModel({
+            cli: makeClient(),
+            thread,
+            room,
+            timelineRenderingType: TimelineRenderingType.Room,
+            lowBandwidth: false,
+            useOnlyCurrentProfiles: false,
+            showDisplayName: true,
+        });
+
+        await waitFor(() => expect(vm.getSnapshot().isVisible).toBe(true));
+
+        expect(vm.getSnapshot().senderName).toBe("Alice");
+        expect(vm.getSnapshot().showDisplayName).toBe(true);
+        expect(vm.getSnapshot().previewContent).toBe("First reply");
+    });
+
+    it("skips preview recomputation when guarded setters receive unchanged values", async () => {
+        const { vm, thread, room, cli } = makePreviewVm();
+        await waitFor(() => expect(vm.getSnapshot().isVisible).toBe(true));
+        jest.mocked(cli.decryptEventIfNeeded).mockClear();
+
+        vm.setClient(cli);
+        vm.setThread(thread);
+        vm.setRoom(room);
+        vm.setTimelineRenderingType(TimelineRenderingType.Room);
+        vm.setLowBandwidth(false);
+        vm.setUseOnlyCurrentProfiles(false);
+
+        expect(cli.decryptEventIfNeeded).not.toHaveBeenCalled();
+        expect(thread.listenerCount(ThreadEvent.Update)).toBe(1);
+    });
+
+    it.each([
+        ["audio", EventType.RoomMessage, MsgType.Audio],
+        ["image", EventType.RoomMessage, MsgType.Image],
+        ["video", EventType.RoomMessage, MsgType.Video],
+        ["file", EventType.RoomMessage, MsgType.File],
+        ["poll", M_POLL_START.name, undefined],
+    ])("renders a prefixed preview for %s replies", async (_name, type, msgtype) => {
+        const { vm } = makePreviewVm({
+            thread: new TestThread(new TestRoom() as TestRoom & Room) as TestThread & Thread,
+        });
+        vm.setThread(
+            Object.assign(new TestThread(new TestRoom() as TestRoom & Room), {
+                replyToEvent: makeEvent("Attachment preview", msgtype === undefined ? { type } : { type, msgtype }),
+            }) as TestThread & Thread,
+        );
+
+        await waitFor(() => expect(vm.getSnapshot().isVisible).toBe(true));
+
+        expect(vm.getSnapshot().previewContent).not.toBe("Attachment preview");
+        expect(vm.getSnapshot().previewTooltip).toBeUndefined();
+    });
+
+    it("reuses prefixed preview content when the generated text has not changed", async () => {
+        const event = makeEvent("Image preview", { msgtype: MsgType.Image });
+        const { vm } = makePreviewVm({
+            thread: Object.assign(new TestThread(new TestRoom() as TestRoom & Room), {
+                replyToEvent: event,
+            }) as TestThread & Thread,
+        });
+        await waitFor(() => expect(vm.getSnapshot().isVisible).toBe(true));
+        const previewContent = vm.getSnapshot().previewContent;
+
+        event.emit(MatrixEventEvent.Decrypted, event);
+
+        await waitFor(() => expect(vm.getSnapshot().previewContent).toBe(previewContent));
+    });
+
+    it("updates when the thread latest reply changes in place", async () => {
+        const room = new TestRoom() as TestRoom & Room;
+        const thread = new TestThread(room) as TestThread & Thread;
+        thread.replyToEvent = makeEvent("First reply");
+        const vm = new ThreadMessagePreviewViewModel({
+            cli: makeClient(),
+            thread,
+            room,
+            timelineRenderingType: TimelineRenderingType.Room,
+            lowBandwidth: false,
+            useOnlyCurrentProfiles: false,
+            showDisplayName: false,
+        });
+        await waitFor(() => expect(vm.getSnapshot().previewContent).toBe("First reply"));
+
+        thread.replyToEvent = makeEvent("Second reply");
+        thread.emit(ThreadEvent.Update, thread);
+
+        await waitFor(() => expect(vm.getSnapshot().previewContent).toBe("Second reply"));
+    });
+
+    it("updates when the watched event is replaced or decrypted", async () => {
+        const event = makeEvent("First reply");
+        const { vm } = makePreviewVm({
+            thread: Object.assign(new TestThread(new TestRoom() as TestRoom & Room), {
+                replyToEvent: event,
+            }) as TestThread & Thread,
+        });
+        await waitFor(() => expect(vm.getSnapshot().previewContent).toBe("First reply"));
+
+        jest.mocked(MessagePreviewStore.instance.generatePreviewForEvent).mockReturnValue("Edited reply");
+        event.emit(MatrixEventEvent.Replaced, event);
+
+        await waitFor(() => expect(vm.getSnapshot().previewContent).toBe("Edited reply"));
+
+        jest.mocked(MessagePreviewStore.instance.generatePreviewForEvent).mockReturnValue("Decrypted reply");
+        event.emit(MatrixEventEvent.Decrypted, event);
+
+        await waitFor(() => expect(vm.getSnapshot().previewContent).toBe("Decrypted reply"));
+    });
+
+    it("hides redacted replies and replies without generated previews", async () => {
+        const redactedEvent = makeEvent("Redacted reply");
+        jest.spyOn(redactedEvent, "isRedacted").mockReturnValue(true);
+        const redactedVm = makePreviewVm({
+            thread: Object.assign(new TestThread(new TestRoom() as TestRoom & Room), {
+                replyToEvent: redactedEvent,
+            }) as TestThread & Thread,
+        }).vm;
+
+        expect(redactedVm.getSnapshot().isVisible).toBe(false);
+
+        jest.mocked(MessagePreviewStore.instance.generatePreviewForEvent).mockReturnValue("");
+        const emptyPreviewVm = makePreviewVm({
+            thread: Object.assign(new TestThread(new TestRoom() as TestRoom & Room), {
+                replyToEvent: makeEvent("Unsupported reply"),
+            }) as TestThread & Thread,
+        }).vm;
+
+        await waitFor(() => expect(MessagePreviewStore.instance.generatePreviewForEvent).toHaveBeenCalled());
+        expect(emptyPreviewVm.getSnapshot().isVisible).toBe(false);
+    });
+
+    it("shows a decryption failure preview without trying to decrypt again", async () => {
+        const decryptionFailureEvent = makeEvent("Encrypted reply");
+        jest.spyOn(decryptionFailureEvent, "isDecryptionFailure").mockReturnValue(true);
+        const cli = makeClient();
+        const { vm } = makePreviewVm({
+            cli,
+            thread: Object.assign(new TestThread(new TestRoom() as TestRoom & Room), {
+                replyToEvent: decryptionFailureEvent,
+            }) as TestThread & Thread,
+        });
+
+        await waitFor(() => expect(vm.getSnapshot().isVisible).toBe(true));
+
+        expect(cli.decryptEventIfNeeded).not.toHaveBeenCalled();
+        expect(vm.getSnapshot().previewContent).toBe("Unable to decrypt message");
+        expect(vm.getSnapshot().previewTooltip).toBe("Unable to decrypt message");
+    });
+
+    it("logs and hides the preview when decryption rejects", async () => {
+        const decryptError = new Error("No key");
+        const cli = makeClient(jest.fn().mockRejectedValue(decryptError));
+        const loggerSpy = jest.spyOn(logger, "error").mockImplementation(() => {});
+        const { vm } = makePreviewVm({ cli });
+
+        await waitFor(() =>
+            expect(loggerSpy).toHaveBeenCalledWith("Failed to decrypt thread preview event", decryptError),
+        );
+
+        expect(vm.getSnapshot().isVisible).toBe(false);
+    });
+
+    it("catches fire-and-forget preview update errors", async () => {
+        const previewError = new Error("Preview failed");
+        jest.mocked(MessagePreviewStore.instance.generatePreviewForEvent).mockImplementation(() => {
+            throw previewError;
+        });
+        const loggerSpy = jest.spyOn(logger, "error").mockImplementation(() => {});
+
+        makePreviewVm();
+
+        await waitFor(() => expect(loggerSpy).toHaveBeenCalledWith("Failed to update thread preview", previewError));
+    });
+
+    it("shows a decryption failure preview when decryption rejects into a failure state", async () => {
+        const decryptError = new Error("No key");
+        const event = makeEvent("Encrypted reply");
+        const isDecryptionFailureSpy = jest.spyOn(event, "isDecryptionFailure").mockReturnValue(false);
+        const cli = makeClient(
+            jest.fn().mockImplementation(async () => {
+                isDecryptionFailureSpy.mockReturnValue(true);
+                throw decryptError;
+            }),
+        );
+        jest.spyOn(logger, "error").mockImplementation(() => {});
+        const { vm } = makePreviewVm({
+            cli,
+            thread: Object.assign(new TestThread(new TestRoom() as TestRoom & Room), {
+                replyToEvent: event,
+            }) as TestThread & Thread,
+        });
+
+        await waitFor(() => expect(vm.getSnapshot().previewContent).toBe("Unable to decrypt message"));
+
+        expect(vm.getSnapshot().isVisible).toBe(true);
+        expect(vm.getSnapshot().previewTooltip).toBe("Unable to decrypt message");
+    });
+
+    it("hides the preview when an event is redacted during decryption", async () => {
+        const event = makeEvent("Redacted during decrypt");
+        const isRedactedSpy = jest.spyOn(event, "isRedacted").mockReturnValue(false);
+        const cli = makeClient(
+            jest.fn().mockImplementation(async () => {
+                isRedactedSpy.mockReturnValue(true);
+            }),
+        );
+        const { vm } = makePreviewVm({
+            cli,
+            thread: Object.assign(new TestThread(new TestRoom() as TestRoom & Room), {
+                replyToEvent: event,
+            }) as TestThread & Thread,
+        });
+
+        await waitFor(() => expect(isRedactedSpy).toHaveBeenCalledTimes(2));
+
+        expect(vm.getSnapshot().isVisible).toBe(false);
+        expect(MessagePreviewStore.instance.generatePreviewForEvent).not.toHaveBeenCalled();
+    });
+
+    it("shows a decryption failure preview when an event fails after decryption", async () => {
+        const event = makeEvent("Failure during decrypt");
+        const isDecryptionFailureSpy = jest.spyOn(event, "isDecryptionFailure").mockReturnValue(false);
+        const cli = makeClient(
+            jest.fn().mockImplementation(async () => {
+                isDecryptionFailureSpy.mockReturnValue(true);
+            }),
+        );
+        const { vm } = makePreviewVm({
+            cli,
+            thread: Object.assign(new TestThread(new TestRoom() as TestRoom & Room), {
+                replyToEvent: event,
+            }) as TestThread & Thread,
+        });
+
+        await waitFor(() => expect(vm.getSnapshot().previewContent).toBe("Unable to decrypt message"));
+
+        expect(vm.getSnapshot().isVisible).toBe(true);
+        expect(MessagePreviewStore.instance.generatePreviewForEvent).not.toHaveBeenCalled();
+    });
+
+    it("ignores stale decrypt results when the latest reply changes during decryption", async () => {
+        let resolveFirstDecrypt!: () => void;
+        const firstDecrypt = new Promise<void>((resolve) => {
+            resolveFirstDecrypt = resolve;
+        });
+        const cli = makeClient(jest.fn().mockReturnValueOnce(firstDecrypt).mockResolvedValue(undefined));
+        const room = new TestRoom() as TestRoom & Room;
+        const thread = new TestThread(room) as TestThread & Thread;
+        thread.replyToEvent = makeEvent("First reply");
+        const vm = new ThreadMessagePreviewViewModel({
+            cli,
+            thread,
+            room,
+            timelineRenderingType: TimelineRenderingType.Room,
+            lowBandwidth: false,
+            useOnlyCurrentProfiles: false,
+            showDisplayName: false,
+        });
+
+        thread.replyToEvent = makeEvent("Second reply");
+        thread.emit(ThreadEvent.Update, thread);
+
+        await waitFor(() => expect(vm.getSnapshot().previewContent).toBe("Second reply"));
+
+        resolveFirstDecrypt();
+
+        await Promise.resolve();
+
+        expect(vm.getSnapshot().previewContent).toBe("Second reply");
+    });
+
+    it("ignores stale decrypt errors when the latest reply changes before rejection", async () => {
+        let rejectFirstDecrypt!: (error: Error) => void;
+        const firstDecrypt = new Promise<void>((_resolve, reject) => {
+            rejectFirstDecrypt = reject;
+        });
+        const cli = makeClient(jest.fn().mockReturnValueOnce(firstDecrypt).mockResolvedValue(undefined));
+        const loggerSpy = jest.spyOn(logger, "error").mockImplementation(() => {});
+        const room = new TestRoom() as TestRoom & Room;
+        const thread = new TestThread(room) as TestThread & Thread;
+        thread.replyToEvent = makeEvent("First reply");
+        const vm = new ThreadMessagePreviewViewModel({
+            cli,
+            thread,
+            room,
+            timelineRenderingType: TimelineRenderingType.Room,
+            lowBandwidth: false,
+            useOnlyCurrentProfiles: false,
+            showDisplayName: false,
+        });
+
+        thread.replyToEvent = makeEvent("Second reply");
+        thread.emit(ThreadEvent.Update, thread);
+
+        await waitFor(() => expect(vm.getSnapshot().previewContent).toBe("Second reply"));
+
+        rejectFirstDecrypt(new Error("Stale decrypt"));
+        await waitFor(() => expect(loggerSpy).toHaveBeenCalled());
+
+        expect(vm.getSnapshot().previewContent).toBe("Second reply");
+    });
+
+    it("uses current room profiles and avatar thumbnails when requested", async () => {
+        const room = new TestRoom() as TestRoom & Room;
+        const currentMember = makeMember("Current Alice", userId, "mxc://example.org/avatar");
+        room.getMember.mockReturnValue(currentMember);
+        const { vm, cli } = makePreviewVm({
+            room,
+            useOnlyCurrentProfiles: true,
+            thread: Object.assign(new TestThread(room), {
+                replyToEvent: makeEvent("Profile reply", { senderName: "Historical Alice" }),
+            }) as TestThread & Thread,
+        });
+
+        await waitFor(() => expect(vm.getSnapshot().senderName).toBe("Current Alice"));
+
+        expect(vm.getSnapshot().avatar).toEqual(
+            expect.objectContaining({
+                id: userId,
+                name: "Current Alice",
+                src: "https://matrix.example.org/_matrix/media/mxc://example.org/avatar/24x24/crop",
+            }),
+        );
+        expect(getMxcUrlToHttpMock(cli)).toHaveBeenCalledWith("mxc://example.org/avatar", 24, 24, "crop", false, true);
+    });
+
+    it("updates the avatar and sender when the current room member profile changes", async () => {
+        const room = new TestRoom() as TestRoom & Room;
+        const historicalEvent = makeEvent("Profile update reply", { senderName: "Historical Alice" });
+        const { vm } = makePreviewVm({
+            room,
+            timelineRenderingType: TimelineRenderingType.ThreadsList,
+            thread: Object.assign(new TestThread(room), {
+                replyToEvent: historicalEvent,
+            }) as TestThread & Thread,
+        });
+        await waitFor(() => expect(vm.getSnapshot().senderName).toBe("Historical Alice"));
+
+        const currentMember = makeMember("Current Alice", userId, "mxc://example.org/current-avatar");
+        room.getMember.mockReturnValue(currentMember);
+        room.emit(RoomStateEvent.Members, makeEvent("Member event"), room, currentMember);
+
+        await waitFor(() => expect(vm.getSnapshot().senderName).toBe("Current Alice"));
+        expect(vm.getSnapshot().avatar).toEqual(
+            expect.objectContaining({
+                id: userId,
+                name: "Current Alice",
+                src: "https://matrix.example.org/_matrix/media/mxc://example.org/current-avatar/24x24/crop",
+            }),
+        );
+    });
+
+    it("ignores current room member profile updates for other users and unsubscribes on dispose", async () => {
+        const room = new TestRoom() as TestRoom & Room;
+        const { vm } = makePreviewVm({
+            room,
+            timelineRenderingType: TimelineRenderingType.ThreadsList,
+            thread: Object.assign(new TestThread(room), {
+                replyToEvent: makeEvent("Profile listener reply", { senderName: "Historical Alice" }),
+            }) as TestThread & Thread,
+        });
+        await waitFor(() => expect(vm.getSnapshot().senderName).toBe("Historical Alice"));
+
+        expect(room.listenerCount(RoomStateEvent.Members)).toBe(1);
+
+        room.getMember.mockReturnValue(makeMember("Current Alice", userId, "mxc://example.org/avatar"));
+        room.emit(
+            RoomStateEvent.Members,
+            makeEvent("Other member event"),
+            room,
+            makeMember("Other User", "@other:example.org"),
+        );
+
+        expect(vm.getSnapshot().senderName).toBe("Historical Alice");
+
+        vm.dispose();
+
+        expect(room.listenerCount(RoomStateEvent.Members)).toBe(0);
+    });
+
+    it("uses current room profiles in thread timelines and suppresses avatar URLs in low-bandwidth mode", async () => {
+        const room = new TestRoom() as TestRoom & Room;
+        room.getMember.mockReturnValue(makeMember("Thread Alice", userId, "mxc://example.org/avatar"));
+        const { vm, cli } = makePreviewVm({
+            room,
+            timelineRenderingType: TimelineRenderingType.Thread,
+            lowBandwidth: true,
+            useOnlyCurrentProfiles: false,
+            thread: Object.assign(new TestThread(room), {
+                replyToEvent: makeEvent("Low bandwidth reply", { senderName: "Historical Alice" }),
+            }) as TestThread & Thread,
+        });
+
+        await waitFor(() => expect(vm.getSnapshot().senderName).toBe("Thread Alice"));
+
+        expect(vm.getSnapshot().avatar).toEqual(
+            expect.objectContaining({
+                name: "Thread Alice",
+                src: undefined,
+            }),
+        );
+        expect(getMxcUrlToHttpMock(cli)).not.toHaveBeenCalled();
+    });
+
+    it("falls back to historical sender profiles when no current member exists", async () => {
+        const room = new TestRoom() as TestRoom & Room;
+        room.getMember.mockReturnValue(null);
+        const { vm } = makePreviewVm({
+            room,
+            useOnlyCurrentProfiles: true,
+            thread: Object.assign(new TestThread(room), {
+                replyToEvent: makeEvent("Historical profile reply", { senderName: "Historical Alice" }),
+            }) as TestThread & Thread,
+        });
+
+        await waitFor(() => expect(vm.getSnapshot().senderName).toBe("Historical Alice"));
+
+        expect(vm.getSnapshot().avatar).toEqual(
+            expect.objectContaining({
+                id: userId,
+                name: "Historical Alice",
+            }),
+        );
+    });
+
+    it("falls back to the sender id when event sender profile data is missing", async () => {
+        const mxEvent = makeEvent("Missing sender profile");
+        mxEvent.sender = null;
+        jest.spyOn(mxEvent, "getSender").mockReturnValue("@fallback:example.org");
+        const { vm } = makePreviewVm({
+            thread: Object.assign(new TestThread(new TestRoom() as TestRoom & Room), {
+                replyToEvent: mxEvent,
+            }) as TestThread & Thread,
+        });
+
+        await waitFor(() => expect(vm.getSnapshot().senderName).toBe("@fallback:example.org"));
+
+        expect(vm.getSnapshot().avatar).toEqual(
+            expect.objectContaining({
+                id: "@fallback:example.org",
+                name: "@fallback:example.org",
+                title: undefined,
+            }),
+        );
+    });
+});
diff --git a/apps/web/test/viewmodels/menus/UserMenuViewModel-test.ts b/apps/web/test/viewmodels/menus/UserMenuViewModel-test.ts
index 5bc355670f..8bcc763651 100644
--- a/apps/web/test/viewmodels/menus/UserMenuViewModel-test.ts
+++ b/apps/web/test/viewmodels/menus/UserMenuViewModel-test.ts
@@ -7,71 +7,96 @@
 import { MatrixError, type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { waitFor } from "jest-matrix-react";
 
-import type { MockedObject } from "jest-mock";
+import type { MockedObject } from "jest-mock-vitest-adapter";
 import { UserMenuViewModel } from "../../../src/viewmodels/menus/UserMenuViewModel";
 import { getMockClientWithEventEmitter, mockClientMethodsServer, mockClientMethodsUser } from "../../test-utils";
 import { MatrixDispatcher } from "../../../src/dispatcher/dispatcher";
-import { SdkContextClass } from "../../../src/contexts/SDKContext";
+import { SDKContextClass } from "../../../src/contexts/SDKContextClass";
 import SdkConfig from "../../../src/SdkConfig";
 import { Action } from "../../../src/dispatcher/actions";
 import { UserTab } from "../../../src/components/views/dialogs/UserTab";
 import Modal from "../../../src/Modal";
 import FeedbackDialog from "../../../src/components/views/dialogs/FeedbackDialog";
+import { type OwnProfileStore } from "../../../src/stores/OwnProfileStore";
+import { TestSDKContext } from "../../unit-tests/TestSDKContext.ts";
 
 describe("UserMenuViewModel", () => {
     let dispatcher: MatrixDispatcher;
     let client: MockedObject<MatrixClient>;
+    let mockOwnProfileStore: OwnProfileStore;
+    let sdkContext: TestSDKContext;
+
     beforeEach(() => {
         dispatcher = new MatrixDispatcher();
         client = getMockClientWithEventEmitter({
             ...mockClientMethodsUser(),
             ...mockClientMethodsServer(),
             getAuthMetadata: jest.fn().mockRejectedValue(new MatrixError({ errcode: "M_UNRECOGNIZED" }, 404)),
+            getExtendedProfileProperty: jest.fn().mockResolvedValue(undefined),
+            setExtendedProfileProperty: jest.fn().mockResolvedValue(undefined),
         });
-        SdkContextClass.instance.client = client;
+        sdkContext = new TestSDKContext();
+        // @ts-ignore UserMenuViewModel uses SDKContext in the constructor
+        SDKContextClass.instance = sdkContext;
+        sdkContext._client = client;
+
+        mockOwnProfileStore = {
+            displayName: "Sally Sanderson",
+            userStatus: undefined,
+            getHttpAvatarUrl: jest.fn().mockReturnValue("https://foo.dummy/avatar.png"),
+            on: jest.fn(),
+        } as unknown as OwnProfileStore;
     });
     afterEach(() => {
         jest.resetAllMocks();
         SdkConfig.reset();
-        SdkContextClass.instance.onLoggedOut();
-        SdkContextClass.instance.client = undefined;
+        SDKContextClass.instance.onLoggedOut();
     });
 
     it("should generate a menu options for a logged in client", () => {
-        const vm = new UserMenuViewModel(dispatcher, client, true);
+        const vm = new UserMenuViewModel({ ownProfileStore: mockOwnProfileStore }, dispatcher, client, true);
         vm.setOpen(true);
-        expect(vm.getSnapshot()).toMatchSnapshot();
+        expect(vm.getSnapshot().userId).toEqual("@alice:domain");
+        expect(vm.getSnapshot().displayName).toEqual("Sally Sanderson");
+        expect(vm.getSnapshot().avatarUrl).toEqual("https://foo.dummy/avatar.png");
+        expect(vm.getSnapshot().showAvatar).toEqual(true);
+        expect(vm.getSnapshot().expanded).toEqual(false);
     });
 
     it("should show a link for account management", async () => {
-        const vm = new UserMenuViewModel(dispatcher, client, true, "https://example.org/");
+        client.getAuthMetadata.mockResolvedValue({ account_management_uri: "https://example.org/" } as any);
+        const vm = new UserMenuViewModel({ ownProfileStore: mockOwnProfileStore }, dispatcher, client, true);
         vm.setOpen(true);
-        expect(vm.getSnapshot().manageAccountHref).toEqual("https://example.org/");
+        await waitFor(() => {
+            expect(vm.getSnapshot().manageAccountHref).toEqual("https://example.org/");
+        });
     });
 
     it("should generate a menu options for a guest", () => {
         client.isGuest.mockReturnValue(true);
-        const vm = new UserMenuViewModel(dispatcher, client, true);
+        const vm = new UserMenuViewModel({ ownProfileStore: mockOwnProfileStore }, dispatcher, client, true);
         vm.setOpen(true);
-        expect(vm.getSnapshot()).toMatchSnapshot();
+        expect(vm.getSnapshot().displayName).toEqual("Sally Sanderson");
+        expect(vm.getSnapshot().showAvatar).toEqual(false);
+        expect(vm.getSnapshot().showUserStatus).toEqual(false);
     });
 
     it("should generate a menu options that include feedback", () => {
         SdkConfig.put({ bug_report_endpoint_url: "https://example.org" });
-        const vm = new UserMenuViewModel(dispatcher, client, true);
+        const vm = new UserMenuViewModel({ ownProfileStore: mockOwnProfileStore }, dispatcher, client, true);
         vm.setOpen(true);
         expect(vm.getSnapshot().actions.openFeedback).toEqual(true);
     });
 
     it("should generate a menu options that includes a home page", () => {
         SdkConfig.put({ embedded_pages: { home_url: "https://example.org" } });
-        const vm = new UserMenuViewModel(dispatcher, client, true);
+        const vm = new UserMenuViewModel({ ownProfileStore: mockOwnProfileStore }, dispatcher, client, true);
         vm.setOpen(true);
         expect(vm.getSnapshot().actions.openHomePage).toEqual(true);
     });
 
     it("can toggle menu", () => {
-        const vm = new UserMenuViewModel(dispatcher, client, true);
+        const vm = new UserMenuViewModel({ ownProfileStore: mockOwnProfileStore }, dispatcher, client, true);
         vm.setOpen(true);
         expect(vm.getSnapshot().open).toEqual(true);
         vm.setOpen(false);
@@ -79,7 +104,7 @@ describe("UserMenuViewModel", () => {
     });
 
     it("can toggle expanded state", () => {
-        const vm = new UserMenuViewModel(dispatcher, client, true);
+        const vm = new UserMenuViewModel({ ownProfileStore: mockOwnProfileStore }, dispatcher, client, true);
         vm.setExpanded(true);
         expect(vm.getSnapshot().expanded).toEqual(true);
         vm.setExpanded(false);
@@ -88,7 +113,7 @@ describe("UserMenuViewModel", () => {
 
     it("can open the home menu", async () => {
         SdkConfig.put({ embedded_pages: { home_url: "https://example.org" } });
-        const vm = new UserMenuViewModel(dispatcher, client, true);
+        const vm = new UserMenuViewModel({ ownProfileStore: mockOwnProfileStore }, dispatcher, client, true);
         const dispatcherSpy = jest.fn();
         dispatcher.register(dispatcherSpy);
         vm.setOpen(true);
@@ -101,7 +126,7 @@ describe("UserMenuViewModel", () => {
     });
 
     it("can open the 'link new device' settings menu", async () => {
-        const vm = new UserMenuViewModel(dispatcher, client, true);
+        const vm = new UserMenuViewModel({ ownProfileStore: mockOwnProfileStore }, dispatcher, client, true);
         const dispatcherSpy = jest.fn();
         dispatcher.register(dispatcherSpy);
         vm.setOpen(true);
@@ -116,7 +141,7 @@ describe("UserMenuViewModel", () => {
     });
 
     it("can open the 'security' settings menu", async () => {
-        const vm = new UserMenuViewModel(dispatcher, client, true);
+        const vm = new UserMenuViewModel({ ownProfileStore: mockOwnProfileStore }, dispatcher, client, true);
         const dispatcherSpy = jest.fn();
         dispatcher.register(dispatcherSpy);
         vm.setOpen(true);
@@ -132,7 +157,7 @@ describe("UserMenuViewModel", () => {
     it("can open the 'feedback' settings menu", async () => {
         jest.spyOn(Modal, "createDialog");
         SdkConfig.put({ bug_report_endpoint_url: "https://example.org" });
-        const vm = new UserMenuViewModel(dispatcher, client, true);
+        const vm = new UserMenuViewModel({ ownProfileStore: mockOwnProfileStore }, dispatcher, client, true);
         const dispatcherSpy = jest.fn();
         dispatcher.register(dispatcherSpy);
         vm.setOpen(true);
@@ -141,7 +166,7 @@ describe("UserMenuViewModel", () => {
     });
 
     it("can open the settings menu", async () => {
-        const vm = new UserMenuViewModel(dispatcher, client, true);
+        const vm = new UserMenuViewModel({ ownProfileStore: mockOwnProfileStore }, dispatcher, client, true);
         const dispatcherSpy = jest.fn();
         dispatcher.register(dispatcherSpy);
         vm.setOpen(true);
@@ -153,11 +178,21 @@ describe("UserMenuViewModel", () => {
         );
     });
 
+    it("can clear a user status", async () => {
+        client.getExtendedProfileProperty.mockResolvedValue({ emoji: "🧪", text: "Testing" });
+        const vm = new UserMenuViewModel({ ownProfileStore: mockOwnProfileStore }, dispatcher, client, true);
+        vm.setOpen(true);
+        vm.clearStatus();
+        await waitFor(() =>
+            expect(client.setExtendedProfileProperty).toHaveBeenCalledWith("org.matrix.msc4426.status", null),
+        );
+    });
+
     it("should be able to open the createAccount screen as a guest", async () => {
         client.isGuest.mockReturnValue(true);
         const dispatcherSpy = jest.fn();
         dispatcher.register(dispatcherSpy);
-        const vm = new UserMenuViewModel(dispatcher, client, true);
+        const vm = new UserMenuViewModel({ ownProfileStore: mockOwnProfileStore }, dispatcher, client, true);
         vm.setOpen(true);
         vm.createAccount();
         await waitFor(() =>
@@ -171,7 +206,7 @@ describe("UserMenuViewModel", () => {
         client.isGuest.mockReturnValue(true);
         const dispatcherSpy = jest.fn();
         dispatcher.register(dispatcherSpy);
-        const vm = new UserMenuViewModel(dispatcher, client, true);
+        const vm = new UserMenuViewModel({ ownProfileStore: mockOwnProfileStore }, dispatcher, client, true);
         vm.setOpen(true);
         vm.signIn();
         await waitFor(() =>
diff --git a/apps/web/test/viewmodels/menus/__snapshots__/UserMenuViewModel-test.ts.snap b/apps/web/test/viewmodels/menus/__snapshots__/UserMenuViewModel-test.ts.snap
deleted file mode 100644
index 928f7ce97e..0000000000
--- a/apps/web/test/viewmodels/menus/__snapshots__/UserMenuViewModel-test.ts.snap
+++ /dev/null
@@ -1,43 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`UserMenuViewModel should generate a menu options for a guest 1`] = `
-{
-  "actions": {
-    "createAccount": true,
-    "linkNewDevice": false,
-    "openFeedback": false,
-    "openHomePage": false,
-    "openSecurity": false,
-    "openSettings": true,
-    "signIn": true,
-  },
-  "avatarUrl": undefined,
-  "displayName": "@alice:domain",
-  "expanded": false,
-  "manageAccountHref": undefined,
-  "open": true,
-  "showAvatar": false,
-  "userId": "@alice:domain",
-}
-`;
-
-exports[`UserMenuViewModel should generate a menu options for a logged in client 1`] = `
-{
-  "actions": {
-    "createAccount": false,
-    "linkNewDevice": true,
-    "openFeedback": false,
-    "openHomePage": false,
-    "openSecurity": true,
-    "openSettings": true,
-    "signIn": false,
-  },
-  "avatarUrl": undefined,
-  "displayName": "@alice:domain",
-  "expanded": false,
-  "manageAccountHref": undefined,
-  "open": true,
-  "showAvatar": true,
-  "userId": "@alice:domain",
-}
-`;
diff --git a/apps/web/test/viewmodels/message-body/DecryptionFailureBodyViewModel-test.tsx b/apps/web/test/viewmodels/message-body/DecryptionFailureBodyViewModel-test.ts
similarity index 100%
rename from apps/web/test/viewmodels/message-body/DecryptionFailureBodyViewModel-test.tsx
rename to apps/web/test/viewmodels/message-body/DecryptionFailureBodyViewModel-test.ts
diff --git a/apps/web/test/viewmodels/message-body/EventContentBodyViewModel-test.tsx b/apps/web/test/viewmodels/message-body/EventContentBodyViewModel-test.ts
similarity index 100%
rename from apps/web/test/viewmodels/message-body/EventContentBodyViewModel-test.tsx
rename to apps/web/test/viewmodels/message-body/EventContentBodyViewModel-test.ts
diff --git a/apps/web/test/viewmodels/message-body/FileBodyViewModel-test.tsx b/apps/web/test/viewmodels/message-body/FileBodyViewModel-test.ts
similarity index 100%
rename from apps/web/test/viewmodels/message-body/FileBodyViewModel-test.tsx
rename to apps/web/test/viewmodels/message-body/FileBodyViewModel-test.ts
diff --git a/apps/web/test/viewmodels/message-body/ImageBodyViewModel-test.ts b/apps/web/test/viewmodels/message-body/ImageBodyViewModel-test.ts
new file mode 100644
index 0000000000..787b119f8f
--- /dev/null
+++ b/apps/web/test/viewmodels/message-body/ImageBodyViewModel-test.ts
@@ -0,0 +1,1012 @@
+/*
+ * Copyright 2026 Element Creations 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 { createRef, type RefObject } from "react";
+import { ClientEvent, EventType, MatrixEvent, SyncState } from "matrix-js-sdk/src/matrix";
+import { type Media } from "@element-hq/element-web-module-api";
+import { ImageBodyViewPlaceholder, ImageBodyViewState } from "@element-hq/web-shared-components";
+
+import SettingsStore from "../../../src/settings/SettingsStore";
+import { ImageSize } from "../../../src/settings/enums/ImageSize";
+import { mediaFromContent } from "../../../src/customisations/Media";
+import { TimelineRenderingType } from "../../../src/contexts/RoomContext";
+import { DecryptError, DownloadError } from "../../../src/utils/DecryptFile";
+import { type MediaEventHelper } from "../../../src/utils/MediaEventHelper";
+import { ImageBodyViewModel } from "../../../src/viewmodels/message-body/ImageBodyViewModel";
+import Modal from "../../../src/Modal";
+import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
+import { blobIsAnimated } from "../../../src/utils/Image";
+import { BLURHASH_FIELD, createThumbnail } from "../../../src/utils/image-media";
+
+jest.mock("../../../src/customisations/Media", () => ({
+    mediaFromContent: jest.fn(),
+}));
+
+jest.mock("../../../src/utils/Image", () => ({
+    ...jest.requireActual("../../../src/utils/Image"),
+    blobIsAnimated: jest.fn(),
+}));
+
+jest.mock("../../../src/utils/image-media", () => ({
+    ...jest.requireActual("../../../src/utils/image-media"),
+    createThumbnail: jest.fn(),
+}));
+
+describe("ImageBodyViewModel", () => {
+    const mockedMediaFromContent = jest.mocked(mediaFromContent);
+    const mockedBlobIsAnimated = jest.mocked(blobIsAnimated);
+    const mockedCreateThumbnail = jest.mocked(createThumbnail);
+    const imageRef = createRef<HTMLImageElement>() as RefObject<HTMLImageElement>;
+    let imageSizeWatcher: ((...args: [unknown, unknown, unknown, unknown, ImageSize]) => void) | undefined;
+
+    const flushPromises = async (): Promise<void> => {
+        await Promise.resolve();
+        await Promise.resolve();
+        await Promise.resolve();
+    };
+
+    const downloadImageForTest = async (vm: ImageBodyViewModel): Promise<void> => {
+        await (vm as any).downloadImage();
+    };
+
+    const createEvent = ({
+        body = "demo image",
+        content = {},
+    }: {
+        body?: string;
+        content?: Record<string, unknown>;
+    } = {}): MatrixEvent => {
+        const { info: infoOverride, ...restContent } = content;
+        const info =
+            infoOverride === null
+                ? undefined
+                : {
+                      w: 320,
+                      h: 240,
+                      size: 48_000,
+                      mimetype: "image/jpeg",
+                      ...(infoOverride as Record<string, unknown> | undefined),
+                  };
+
+        return new MatrixEvent({
+            type: EventType.RoomMessage,
+            room_id: "!room:server",
+            event_id: "$image:server",
+            sender: "@alice:server",
+            content: {
+                msgtype: "m.image",
+                body,
+                url: "mxc://server/image",
+                ...restContent,
+                ...(info ? { info } : {}),
+            },
+        });
+    };
+
+    const createMediaEventHelper = ({
+        encrypted,
+        thumbnailUrl = "blob:thumbnail",
+        sourceUrl = "blob:image",
+        sourceBlob = new Blob(["image"], { type: "image/jpeg" }),
+    }: {
+        encrypted: boolean;
+        thumbnailUrl?: string | null | Promise<string | null>;
+        sourceUrl?: string | null | Promise<string | null>;
+        sourceBlob?: Blob | Promise<Blob>;
+    }): MediaEventHelper =>
+        ({
+            media: { isEncrypted: encrypted },
+            thumbnailUrl: { value: Promise.resolve(thumbnailUrl) },
+            sourceUrl: { value: Promise.resolve(sourceUrl) },
+            sourceBlob: { value: Promise.resolve(sourceBlob), cachedValue: sourceBlob },
+        }) as unknown as MediaEventHelper;
+
+    const createMockMedia = (content: Record<string, any>): Media =>
+        ({
+            isEncrypted: !!content.file,
+            srcMxc: content.url ?? "mxc://server/image",
+            srcHttp: "https://server/full.png",
+            thumbnailMxc: content.info?.thumbnail_url ?? "mxc://server/thumb",
+            thumbnailHttp: "https://server/thumb.png",
+            hasThumbnail: content.info?.thumbnail_url !== null,
+            getThumbnailHttp: jest.fn().mockReturnValue("https://server/thumb.png"),
+            getThumbnailOfSourceHttp: jest.fn().mockReturnValue("https://server/thumb.png"),
+            getSquareThumbnailHttp: jest.fn(),
+            downloadSource: jest.fn(),
+        }) as unknown as Media;
+
+    const createVm = (
+        overrides: Partial<ConstructorParameters<typeof ImageBodyViewModel>[0]> = {},
+    ): ImageBodyViewModel =>
+        new ImageBodyViewModel({
+            mxEvent: createEvent(),
+            mediaVisible: false,
+            timelineRenderingType: TimelineRenderingType.Room,
+            imageRef,
+            ...overrides,
+        });
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+
+        Object.defineProperty(window, "devicePixelRatio", {
+            configurable: true,
+            value: 1,
+        });
+
+        const originalGetValue = SettingsStore.getValue;
+        jest.spyOn(SettingsStore, "getValue").mockImplementation((setting, ...args) => {
+            if (setting === "Images.size") {
+                return ImageSize.Normal;
+            }
+            if (setting === "autoplayGifs") {
+                return false;
+            }
+            return originalGetValue(setting, ...args);
+        });
+        jest.spyOn(SettingsStore, "watchSetting").mockImplementation((_name, _roomId, callback) => {
+            imageSizeWatcher = callback as (...args: [unknown, unknown, unknown, unknown, ImageSize]) => void;
+            return "image-body-test-watch";
+        });
+        jest.spyOn(SettingsStore, "unwatchSetting").mockImplementation(jest.fn());
+
+        mockedMediaFromContent.mockImplementation((content: Record<string, any>) => createMockMedia(content));
+        mockedBlobIsAnimated.mockResolvedValue(true);
+        mockedCreateThumbnail.mockResolvedValue({ thumbnail: new Blob(["thumbnail"], { type: "image/jpeg" }) } as any);
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+        imageSizeWatcher = undefined;
+    });
+
+    it("starts hidden and skips emitting when setMediaVisible is unchanged", () => {
+        const vm = createVm();
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        expect(vm.getSnapshot()).toMatchObject({
+            state: ImageBodyViewState.HIDDEN,
+            hiddenButtonLabel: "Show image",
+        });
+
+        vm.setMediaVisible(false);
+
+        expect(listener).not.toHaveBeenCalled();
+    });
+
+    it("waits for initial media loading before exposing unencrypted media urls", () => {
+        const vm = createVm({
+            mediaVisible: true,
+            mxEvent: createEvent({
+                content: {
+                    info: {
+                        mimetype: "image/jpeg",
+                    },
+                },
+            }),
+        });
+
+        expect(vm.getSnapshot()).toMatchObject({
+            state: ImageBodyViewState.READY,
+        });
+        expect(vm.getSnapshot().src).toBeUndefined();
+        expect(vm.getSnapshot().thumbnailSrc).toBeUndefined();
+        expect(mockedMediaFromContent).not.toHaveBeenCalled();
+
+        vm.loadInitialMediaIfVisible();
+
+        expect(vm.getSnapshot()).toMatchObject({
+            state: ImageBodyViewState.READY,
+            src: "https://server/full.png",
+            thumbnailSrc: "https://server/thumb.png",
+            linkUrl: "https://server/full.png",
+        });
+    });
+
+    it("does not load media while hidden", () => {
+        const vm = createVm();
+
+        vm.loadInitialMediaIfVisible();
+
+        expect(mockedMediaFromContent).not.toHaveBeenCalled();
+        expect(vm.getSnapshot()).toMatchObject({
+            state: ImageBodyViewState.HIDDEN,
+            hiddenButtonLabel: "Show image",
+        });
+    });
+
+    it("uses MXC URLs directly for export snapshots", () => {
+        const vm = createVm({
+            forExport: true,
+            mediaVisible: true,
+            mxEvent: createEvent({
+                content: {
+                    url: undefined,
+                    file: { url: "mxc://server/encrypted-image" },
+                },
+            }),
+        });
+
+        vm.loadInitialMediaIfVisible();
+
+        expect(mockedMediaFromContent).not.toHaveBeenCalled();
+        expect(vm.getSnapshot()).toMatchObject({
+            state: ImageBodyViewState.READY,
+            src: "mxc://server/encrypted-image",
+            thumbnailSrc: "mxc://server/encrypted-image",
+            linkUrl: "mxc://server/encrypted-image",
+            linkTarget: "_blank",
+            placeholder: ImageBodyViewPlaceholder.NONE,
+        });
+    });
+
+    it("falls back to loaded image dimensions when event info has no size", () => {
+        const imageRefWithDimensions = {
+            current: {
+                naturalWidth: 640,
+                naturalHeight: 480,
+            },
+        } as RefObject<HTMLImageElement>;
+        const vm = createVm({
+            imageRef: imageRefWithDimensions,
+            mediaVisible: true,
+            mxEvent: createEvent({ content: { info: null } }),
+        });
+
+        expect(vm.getSnapshot()).toMatchObject({
+            maxWidth: undefined,
+            maxHeight: undefined,
+            aspectRatio: undefined,
+        });
+
+        vm.onImageLoad();
+
+        expect(vm.getSnapshot()).toMatchObject({
+            maxWidth: expect.any(Number),
+            maxHeight: expect.any(Number),
+            aspectRatio: "640/480",
+            placeholder: ImageBodyViewPlaceholder.NONE,
+        });
+    });
+
+    it("switches from blurhash placeholder after the delay", () => {
+        jest.useFakeTimers();
+        const vm = createVm({
+            mediaVisible: true,
+            mxEvent: createEvent({
+                content: {
+                    info: {
+                        [BLURHASH_FIELD]: "LEHV6nWB2yk8pyo0adR*.7kCMdnj",
+                    },
+                },
+            }),
+        });
+
+        vm.loadInitialMediaIfVisible();
+        expect(vm.getSnapshot().placeholder).toBe(ImageBodyViewPlaceholder.NONE);
+
+        jest.advanceTimersByTime(150);
+
+        expect(vm.getSnapshot().placeholder).toBe(ImageBodyViewPlaceholder.BLURHASH);
+        jest.useRealTimers();
+    });
+
+    it("renders the ready snapshot with thumbnail data once visible", async () => {
+        const vm = createVm({
+            mxEvent: createEvent({
+                content: {
+                    file: { url: "mxc://server/encrypted-image" },
+                    info: {
+                        mimetype: "image/jpeg",
+                        w: 320,
+                        h: 240,
+                        size: 48_000,
+                    },
+                },
+            }),
+            mediaEventHelper: createMediaEventHelper({
+                encrypted: true,
+                sourceUrl: "https://server/full.png",
+                thumbnailUrl: "https://server/thumb.png",
+            }),
+        });
+
+        vm.setMediaVisible(true);
+        await downloadImageForTest(vm);
+
+        expect(vm.getSnapshot()).toMatchObject({
+            state: ImageBodyViewState.READY,
+            src: "https://server/full.png",
+            thumbnailSrc: "https://server/thumb.png",
+            linkUrl: "https://server/full.png",
+        });
+    });
+
+    it("reveals hidden media through the supplied setter", () => {
+        const setMediaVisible = jest.fn();
+        const vm = createVm({ setMediaVisible });
+
+        vm.onHiddenButtonClick();
+
+        expect(setMediaVisible).toHaveBeenCalledWith(true);
+    });
+
+    it("falls back from the thumbnail url to the full image after an image error", async () => {
+        const vm = createVm({
+            mxEvent: createEvent({
+                content: {
+                    file: { url: "mxc://server/encrypted-image" },
+                    info: {
+                        mimetype: "image/jpeg",
+                        w: 320,
+                        h: 240,
+                        size: 48_000,
+                    },
+                },
+            }),
+            mediaEventHelper: createMediaEventHelper({
+                encrypted: true,
+                sourceUrl: "https://server/full.png",
+                thumbnailUrl: "https://server/thumb.png",
+            }),
+            mediaVisible: true,
+        });
+
+        vm.loadInitialMediaIfVisible();
+        await downloadImageForTest(vm);
+        expect(vm.getSnapshot().thumbnailSrc).toBe("https://server/thumb.png");
+
+        vm.onImageError();
+
+        expect(vm.getSnapshot()).toMatchObject({
+            state: ImageBodyViewState.READY,
+            src: "https://server/full.png",
+            thumbnailSrc: "https://server/full.png",
+        });
+    });
+
+    it("marks animated images for hover playback when autoplay is disabled", async () => {
+        const vm = createVm({
+            mxEvent: createEvent({
+                content: {
+                    file: { url: "mxc://server/encrypted-image" },
+                    info: {
+                        "w": 320,
+                        "h": 240,
+                        "size": 48_000,
+                        "mimetype": "image/gif",
+                        "thumbnail_info": { mimetype: "image/jpeg" },
+                        "org.matrix.msc4230.is_animated": true,
+                    },
+                },
+            }),
+            mediaEventHelper: createMediaEventHelper({
+                encrypted: true,
+                sourceUrl: "https://server/full.gif",
+                thumbnailUrl: "https://server/thumb.jpg",
+                sourceBlob: new Blob(["gif"], { type: "image/gif" }),
+            }),
+            mediaVisible: true,
+        });
+
+        vm.loadInitialMediaIfVisible();
+        await downloadImageForTest(vm);
+
+        expect(vm.getSnapshot()).toMatchObject({
+            state: ImageBodyViewState.READY,
+            showAnimatedContentOnHover: true,
+            gifLabel: "GIF",
+        });
+    });
+
+    it("shows an error snapshot when encrypted media download fails", async () => {
+        const vm = createVm({
+            mxEvent: createEvent({
+                content: {
+                    file: { url: "mxc://server/encrypted-image" },
+                },
+            }),
+            mediaEventHelper: createMediaEventHelper({
+                encrypted: true,
+                sourceUrl: Promise.reject(new DownloadError(new Error("download failed"))),
+            }),
+            mediaVisible: true,
+        });
+
+        vm.loadInitialMediaIfVisible();
+        await flushPromises();
+
+        expect(vm.getSnapshot()).toMatchObject({
+            state: ImageBodyViewState.ERROR,
+            errorLabel: "Error downloading image",
+        });
+    });
+
+    it("uses the decrypt error label when encrypted media decryption fails", async () => {
+        const vm = createVm({
+            mxEvent: createEvent({
+                content: {
+                    file: { url: "mxc://server/encrypted-image" },
+                },
+            }),
+            mediaEventHelper: createMediaEventHelper({
+                encrypted: true,
+                sourceUrl: Promise.reject(new DecryptError(new Error("decrypt failed"))),
+            }),
+            mediaVisible: true,
+        });
+
+        await downloadImageForTest(vm);
+
+        expect(vm.getSnapshot()).toMatchObject({
+            state: ImageBodyViewState.ERROR,
+            errorLabel: "Error decrypting image",
+        });
+    });
+
+    it("uses the generic error label when image loading fails", () => {
+        const client = { on: jest.fn() };
+        jest.spyOn(MatrixClientPeg, "safeGet").mockReturnValue(client as any);
+        const vm = createVm({ mediaVisible: true });
+
+        vm.onImageError();
+
+        expect(client.on).toHaveBeenCalledWith(ClientEvent.Sync, expect.any(Function));
+        expect(vm.getSnapshot()).toMatchObject({
+            state: ImageBodyViewState.ERROR,
+            errorLabel: "Unable to show image due to error",
+        });
+    });
+
+    it("clears image errors after reconnecting", () => {
+        const client = { on: jest.fn(), off: jest.fn() };
+        jest.spyOn(MatrixClientPeg, "safeGet").mockReturnValue(client as any);
+        jest.spyOn(MatrixClientPeg, "get").mockReturnValue(client as any);
+        const vm = createVm({ mediaVisible: true });
+
+        vm.onImageError();
+        expect(vm.getSnapshot().state).toBe(ImageBodyViewState.ERROR);
+
+        const listener = client.on.mock.calls[0][1];
+        listener(SyncState.Syncing, SyncState.Error);
+
+        expect(client.off).toHaveBeenCalledWith(ClientEvent.Sync, listener);
+        expect(vm.getSnapshot().state).toBe(ImageBodyViewState.READY);
+    });
+
+    it("ignores repeated image errors once already in the error state", () => {
+        const client = { on: jest.fn() };
+        jest.spyOn(MatrixClientPeg, "safeGet").mockReturnValue(client as any);
+        const vm = createVm({ mediaVisible: true });
+
+        vm.onImageError();
+        vm.onImageError();
+
+        expect(client.on).toHaveBeenCalledTimes(1);
+    });
+
+    it("uses the SVG thumbnail media when one is available", () => {
+        const vm = createVm({
+            mediaVisible: true,
+            mxEvent: createEvent({
+                content: {
+                    info: {
+                        mimetype: "image/svg+xml",
+                        thumbnail_url: "mxc://server/svg-thumb",
+                    },
+                },
+            }),
+        });
+
+        vm.loadInitialMediaIfVisible();
+
+        const media = mockedMediaFromContent.mock.results.at(-1)!.value as Media;
+        expect(media.getThumbnailHttp).toHaveBeenCalledWith(800, 600, "scale");
+        expect(vm.getSnapshot().thumbnailSrc).toBe("https://server/thumb.png");
+    });
+
+    it("uses the full source as thumbnail for small high-dpi images", () => {
+        Object.defineProperty(window, "devicePixelRatio", {
+            configurable: true,
+            value: 2,
+        });
+        const vm = createVm({
+            mediaVisible: true,
+            mxEvent: createEvent({
+                content: {
+                    info: {
+                        mimetype: "image/jpeg",
+                        w: 320,
+                        h: 240,
+                        size: 48_000,
+                    },
+                },
+            }),
+        });
+
+        vm.loadInitialMediaIfVisible();
+
+        expect(vm.getSnapshot().thumbnailSrc).toBe("https://server/full.png");
+    });
+
+    it("requests a thumbnail for large high-dpi images", () => {
+        Object.defineProperty(window, "devicePixelRatio", {
+            configurable: true,
+            value: 2,
+        });
+        const vm = createVm({
+            mediaVisible: true,
+            mxEvent: createEvent({
+                content: {
+                    info: {
+                        mimetype: "image/jpeg",
+                        w: 1600,
+                        h: 1200,
+                        size: 2 * 1024 * 1024,
+                    },
+                },
+            }),
+        });
+
+        vm.loadInitialMediaIfVisible();
+
+        const media = mockedMediaFromContent.mock.results.at(-1)!.value as Media;
+        expect(media.getThumbnailOfSourceHttp).toHaveBeenCalledWith(800, 600);
+        expect(vm.getSnapshot().thumbnailSrc).toBe("https://server/thumb.png");
+    });
+
+    it("generates a static thumbnail for animated images without a safe thumbnail", async () => {
+        let createdImage: any;
+        const originalCreateElement = document.createElement.bind(document);
+        jest.spyOn(document, "createElement").mockImplementation(((tagName: string) => {
+            if (tagName !== "img") {
+                return originalCreateElement(tagName);
+            }
+            createdImage = {
+                width: 320,
+                height: 240,
+                crossOrigin: "",
+                src: "",
+                onload: undefined,
+                onerror: undefined,
+            };
+            return createdImage as HTMLImageElement;
+        }) as typeof document.createElement);
+        const vm = createVm({
+            mxEvent: createEvent({
+                content: {
+                    file: { url: "mxc://server/encrypted-image" },
+                    info: {
+                        "mimetype": "image/gif",
+                        "thumbnail_info": { mimetype: "image/gif" },
+                        "org.matrix.msc4230.is_animated": true,
+                    },
+                },
+            }),
+            mediaEventHelper: createMediaEventHelper({
+                encrypted: true,
+                sourceUrl: "https://server/full.gif",
+                thumbnailUrl: null,
+                sourceBlob: new Blob(["gif"], { type: "image/gif" }),
+            }),
+            mediaVisible: true,
+        });
+
+        const promise = downloadImageForTest(vm);
+        await flushPromises();
+        createdImage.onload();
+        await promise;
+
+        expect(mockedBlobIsAnimated).toHaveBeenCalled();
+        expect(mockedCreateThumbnail).toHaveBeenCalledWith(createdImage, 320, 240, "image/gif", false);
+        expect(vm.getSnapshot()).toMatchObject({
+            state: ImageBodyViewState.READY,
+            thumbnailSrc: "blob",
+            gifLabel: "GIF",
+        });
+    });
+
+    it("treats decoded static images as non-animated", async () => {
+        mockedBlobIsAnimated.mockResolvedValue(false);
+        let createdImage: any;
+        const originalCreateElement = document.createElement.bind(document);
+        jest.spyOn(document, "createElement").mockImplementation(((tagName: string) => {
+            if (tagName !== "img") {
+                return originalCreateElement(tagName);
+            }
+            createdImage = {
+                width: 320,
+                height: 240,
+                crossOrigin: "",
+                src: "",
+                onload: undefined,
+                onerror: undefined,
+            };
+            return createdImage as HTMLImageElement;
+        }) as typeof document.createElement);
+        const vm = createVm({
+            mxEvent: createEvent({
+                content: {
+                    file: { url: "mxc://server/encrypted-image" },
+                    info: {
+                        mimetype: "image/gif",
+                    },
+                },
+            }),
+            mediaEventHelper: createMediaEventHelper({
+                encrypted: true,
+                sourceUrl: "https://server/full.gif",
+                thumbnailUrl: null,
+                sourceBlob: new Blob(["gif"], { type: "image/gif" }),
+            }),
+            mediaVisible: true,
+        });
+
+        const promise = downloadImageForTest(vm);
+        await flushPromises();
+        createdImage.onload();
+        await promise;
+
+        expect(mockedCreateThumbnail).not.toHaveBeenCalled();
+        expect(vm.getSnapshot()).toMatchObject({
+            state: ImageBodyViewState.READY,
+            gifLabel: undefined,
+            showAnimatedContentOnHover: false,
+        });
+    });
+
+    it("shows an error when animated image loading fails", async () => {
+        let createdImage: any;
+        const originalCreateElement = document.createElement.bind(document);
+        jest.spyOn(document, "createElement").mockImplementation(((tagName: string) => {
+            if (tagName !== "img") {
+                return originalCreateElement(tagName);
+            }
+            createdImage = {
+                width: 320,
+                height: 240,
+                crossOrigin: "",
+                src: "",
+                onload: undefined,
+                onerror: undefined,
+            };
+            return createdImage as HTMLImageElement;
+        }) as typeof document.createElement);
+        const vm = createVm({
+            mxEvent: createEvent({
+                content: {
+                    file: { url: "mxc://server/encrypted-image" },
+                    info: {
+                        mimetype: "image/gif",
+                    },
+                },
+            }),
+            mediaEventHelper: createMediaEventHelper({
+                encrypted: true,
+                sourceUrl: "https://server/full.gif",
+                thumbnailUrl: null,
+            }),
+            mediaVisible: true,
+        });
+
+        const promise = downloadImageForTest(vm);
+        await flushPromises();
+        createdImage.onerror();
+        await promise;
+
+        expect(vm.getSnapshot()).toMatchObject({
+            state: ImageBodyViewState.ERROR,
+            errorLabel: "Unable to show image due to error",
+        });
+    });
+
+    it("continues when animated thumbnail generation fails", async () => {
+        mockedCreateThumbnail.mockRejectedValue(new Error("thumbnail failed"));
+        let createdImage: any;
+        const originalCreateElement = document.createElement.bind(document);
+        jest.spyOn(document, "createElement").mockImplementation(((tagName: string) => {
+            if (tagName !== "img") {
+                return originalCreateElement(tagName);
+            }
+            createdImage = {
+                width: 320,
+                height: 240,
+                crossOrigin: "",
+                src: "",
+                onload: undefined,
+                onerror: undefined,
+            };
+            return createdImage as HTMLImageElement;
+        }) as typeof document.createElement);
+        const vm = createVm({
+            mxEvent: createEvent({
+                content: {
+                    file: { url: "mxc://server/encrypted-image" },
+                    info: {
+                        mimetype: "image/gif",
+                    },
+                },
+            }),
+            mediaEventHelper: createMediaEventHelper({
+                encrypted: true,
+                sourceUrl: "https://server/full.gif",
+                thumbnailUrl: null,
+            }),
+            mediaVisible: true,
+        });
+
+        const promise = downloadImageForTest(vm);
+        await flushPromises();
+        createdImage.onload();
+        await promise;
+
+        expect(vm.getSnapshot()).toMatchObject({
+            state: ImageBodyViewState.READY,
+            thumbnailSrc: "https://server/full.gif",
+            gifLabel: "GIF",
+        });
+    });
+
+    it("revokes a generated thumbnail if disposed before download completes", async () => {
+        let createdImage: any;
+        const originalCreateElement = document.createElement.bind(document);
+        jest.spyOn(document, "createElement").mockImplementation(((tagName: string) => {
+            if (tagName !== "img") {
+                return originalCreateElement(tagName);
+            }
+            createdImage = {
+                width: 320,
+                height: 240,
+                crossOrigin: "",
+                src: "",
+                onload: undefined,
+                onerror: undefined,
+            };
+            return createdImage as HTMLImageElement;
+        }) as typeof document.createElement);
+        const vm = createVm({
+            mxEvent: createEvent({
+                content: {
+                    file: { url: "mxc://server/encrypted-image" },
+                    info: {
+                        mimetype: "image/gif",
+                    },
+                },
+            }),
+            mediaEventHelper: createMediaEventHelper({
+                encrypted: true,
+                sourceUrl: "https://server/full.gif",
+                thumbnailUrl: null,
+            }),
+            mediaVisible: true,
+        });
+        mockedCreateThumbnail.mockImplementation(async () => {
+            vm.dispose();
+            return { thumbnail: new Blob(["thumbnail"], { type: "image/jpeg" }) } as any;
+        });
+
+        const promise = downloadImageForTest(vm);
+        await flushPromises();
+        createdImage.onload();
+        await promise;
+
+        expect(URL.revokeObjectURL).toHaveBeenCalledWith("blob");
+    });
+
+    it("opens the image viewer for primary clicks", () => {
+        const clientRect = { width: 100, height: 80, x: 10, y: 20 };
+        const imageRefWithRect = {
+            current: {
+                getBoundingClientRect: () => clientRect,
+            },
+        } as RefObject<HTMLImageElement>;
+        const vm = createVm({
+            imageRef: imageRefWithRect,
+            mediaVisible: true,
+            permalinkCreator: {} as any,
+        });
+        vm.loadInitialMediaIfVisible();
+        const preventDefault = jest.fn();
+        jest.spyOn(Modal, "createDialog").mockReturnValue({} as any);
+
+        vm.onLinkClick({ button: 0, metaKey: false, preventDefault } as any);
+
+        expect(preventDefault).toHaveBeenCalled();
+        expect(Modal.createDialog).toHaveBeenCalledWith(
+            expect.any(Function),
+            expect.objectContaining({
+                src: "https://server/full.png",
+                name: "demo image",
+                width: 320,
+                height: 240,
+                fileSize: 48_000,
+                thumbnailInfo: {
+                    width: 100,
+                    height: 80,
+                    positionX: 10,
+                    positionY: 20,
+                },
+            }),
+            "mx_Dialog_lightbox",
+            undefined,
+            true,
+        );
+    });
+
+    it("uses the decrypted thumbnail in the image viewer when the source mime type is unsafe", async () => {
+        const vm = createVm({
+            mxEvent: createEvent({
+                body: "",
+                content: {
+                    file: { url: "mxc://server/encrypted-image" },
+                    info: {
+                        mimetype: "image/svg+xml",
+                    },
+                },
+            }),
+            mediaEventHelper: createMediaEventHelper({
+                encrypted: true,
+                sourceUrl: "blob:unsafe-source",
+                thumbnailUrl: "blob:safe-thumbnail",
+                sourceBlob: new Blob(["html"], { type: "text/html" }),
+            }),
+            mediaVisible: true,
+        });
+        jest.spyOn(Modal, "createDialog").mockReturnValue({} as any);
+
+        await downloadImageForTest(vm);
+        vm.onLinkClick({ button: 0, metaKey: false, preventDefault: jest.fn() } as any);
+
+        expect(Modal.createDialog).toHaveBeenCalledWith(
+            expect.any(Function),
+            expect.objectContaining({
+                src: "blob:safe-thumbnail",
+                name: "Attachment",
+            }),
+            "mx_Dialog_lightbox",
+            undefined,
+            true,
+        );
+    });
+
+    it("does not open the image viewer for modified clicks or missing URLs", () => {
+        const vm = createVm({ mediaVisible: true });
+        const preventDefault = jest.fn();
+        jest.spyOn(Modal, "createDialog").mockReturnValue({} as any);
+
+        vm.onLinkClick({ button: 0, metaKey: true, preventDefault } as any);
+        vm.onLinkClick({ button: 1, metaKey: false, preventDefault } as any);
+        vm.onLinkClick({ button: 0, metaKey: false, preventDefault } as any);
+
+        expect(preventDefault).toHaveBeenCalledTimes(1);
+        expect(Modal.createDialog).not.toHaveBeenCalled();
+    });
+
+    it("reveals hidden media instead of opening the viewer", () => {
+        const setMediaVisible = jest.fn();
+        const preventDefault = jest.fn();
+        const vm = createVm({ setMediaVisible });
+        jest.spyOn(Modal, "createDialog").mockReturnValue({} as any);
+
+        vm.onLinkClick({ button: 0, metaKey: false, preventDefault } as any);
+
+        expect(preventDefault).toHaveBeenCalled();
+        expect(setMediaVisible).toHaveBeenCalledWith(true);
+        expect(Modal.createDialog).not.toHaveBeenCalled();
+    });
+
+    it("updates granular props and skips unchanged updates", async () => {
+        const vm = createVm({ mediaVisible: true, maxImageHeight: 100 });
+        const listener = jest.fn();
+        const setMediaVisible = jest.fn();
+        vm.subscribe(listener);
+
+        vm.setForExport(undefined);
+        vm.setMaxImageHeight(100);
+        vm.setMediaVisible(true);
+        vm.setPermalinkCreator(undefined);
+        vm.setTimelineRenderingType(TimelineRenderingType.Room);
+        vm.setSetMediaVisible(undefined);
+        imageSizeWatcher?.(undefined, undefined, undefined, undefined, ImageSize.Normal);
+
+        expect(listener).not.toHaveBeenCalled();
+
+        vm.setForExport(true);
+        vm.setMaxImageHeight(200);
+        vm.setTimelineRenderingType(TimelineRenderingType.File);
+        vm.setPermalinkCreator({} as any);
+        vm.setSetMediaVisible(setMediaVisible);
+        vm.onHiddenButtonClick();
+
+        expect(listener).toHaveBeenCalled();
+        expect(setMediaVisible).toHaveBeenCalledWith(true);
+        expect(vm.getSnapshot()).toMatchObject({
+            linkTarget: "_blank",
+            bannerLabel: undefined,
+        });
+    });
+
+    it("resets state and reloads when the event changes while visible", async () => {
+        const client = { off: jest.fn() };
+        jest.spyOn(MatrixClientPeg, "get").mockReturnValue(client as any);
+        const vm = createVm({ mediaVisible: true });
+        vm.loadInitialMediaIfVisible();
+        expect(vm.getSnapshot().src).toBe("https://server/full.png");
+
+        const nextEvent = createEvent({ body: "next image" });
+        vm.setEvent(nextEvent);
+        await flushPromises();
+
+        expect(client.off).toHaveBeenCalledWith(ClientEvent.Sync, expect.any(Function));
+        expect(vm.getSnapshot()).toMatchObject({
+            alt: "next image",
+            src: "https://server/full.png",
+        });
+    });
+
+    it("updates dimensions when the image size setting changes", () => {
+        const vm = createVm({ mediaVisible: true });
+        vm.loadInitialMediaIfVisible();
+
+        imageSizeWatcher?.(undefined, undefined, undefined, undefined, ImageSize.Large);
+
+        expect(vm.getSnapshot()).toMatchObject({
+            state: ImageBodyViewState.READY,
+            maxWidth: expect.any(Number),
+            maxHeight: expect.any(Number),
+        });
+    });
+
+    it("cleans up watchers, reconnect listeners and generated thumbnails on dispose", async () => {
+        let createdImage: any;
+        const client = { off: jest.fn() };
+        jest.spyOn(MatrixClientPeg, "get").mockReturnValue(client as any);
+        const originalCreateElement = document.createElement.bind(document);
+        jest.spyOn(document, "createElement").mockImplementation(((tagName: string) => {
+            if (tagName !== "img") {
+                return originalCreateElement(tagName);
+            }
+            createdImage = {
+                width: 320,
+                height: 240,
+                crossOrigin: "",
+                src: "",
+                onload: undefined,
+                onerror: undefined,
+            };
+            return createdImage as HTMLImageElement;
+        }) as typeof document.createElement);
+        const vm = createVm({
+            mxEvent: createEvent({
+                content: {
+                    file: { url: "mxc://server/encrypted-image" },
+                    info: {
+                        mimetype: "image/gif",
+                    },
+                },
+            }),
+            mediaEventHelper: createMediaEventHelper({
+                encrypted: true,
+                sourceUrl: "https://server/full.gif",
+                thumbnailUrl: null,
+            }),
+            mediaVisible: true,
+        });
+
+        const promise = downloadImageForTest(vm);
+        await flushPromises();
+        createdImage.onload();
+        await promise;
+
+        vm.dispose();
+
+        expect(SettingsStore.unwatchSetting).toHaveBeenCalledWith("image-body-test-watch");
+        expect(client.off).toHaveBeenCalledWith(ClientEvent.Sync, expect.any(Function));
+        expect(URL.revokeObjectURL).toHaveBeenCalledWith("blob");
+    });
+});
diff --git a/apps/web/test/viewmodels/message-body/MessageTimestampViewModel-test.tsx b/apps/web/test/viewmodels/message-body/MessageTimestampViewModel-test.ts
similarity index 63%
rename from apps/web/test/viewmodels/message-body/MessageTimestampViewModel-test.tsx
rename to apps/web/test/viewmodels/message-body/MessageTimestampViewModel-test.ts
index de8aaa1643..8e58d9911c 100644
--- a/apps/web/test/viewmodels/message-body/MessageTimestampViewModel-test.tsx
+++ b/apps/web/test/viewmodels/message-body/MessageTimestampViewModel-test.ts
@@ -119,4 +119,76 @@ describe("MessageTimestampViewModel", () => {
             href: "https://example.test",
         });
     });
+
+    it("updates all props in one batch", () => {
+        const onClick = jest.fn();
+        const onContextMenu = jest.fn();
+        const vm = new MessageTimestampViewModel({
+            ts: nowDate.getTime(),
+        });
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        vm.setProps({
+            ts: nowDate.getTime() + HOUR_MS,
+            receivedTs: nowDate.getTime() + DAY_MS,
+            showTwelveHour: true,
+            inhibitTooltip: true,
+            href: "https://example.test/event",
+            onClick,
+            onContextMenu,
+        });
+
+        expect(listener).toHaveBeenCalledTimes(1);
+        expect(vm.getSnapshot()).toMatchObject({
+            ts: "9:09 AM",
+            tsSentAt: "Fri, Dec 17, 2021, 9:09:00 AM",
+            tsReceivedAt: "Sat, Dec 18, 2021, 8:09:00 AM",
+            inhibitTooltip: true,
+            href: "https://example.test/event",
+        });
+        expect(vm.onClick).toBe(onClick);
+        expect(vm.onContextMenu).toBe(onContextMenu);
+    });
+
+    it("replaces props and clears omitted optional values", () => {
+        const onClick = jest.fn();
+        const onContextMenu = jest.fn();
+        const vm = new MessageTimestampViewModel({
+            ts: nowDate.getTime(),
+            receivedTs: nowDate.getTime() + DAY_MS,
+            inhibitTooltip: true,
+            href: "https://example.test/event",
+            onClick,
+            onContextMenu,
+        });
+
+        vm.setProps({
+            ts: nowDate.getTime() + HOUR_MS,
+        });
+
+        expect(vm.getSnapshot()).toMatchObject({
+            ts: "09:09",
+            tsSentAt: "Fri, Dec 17, 2021, 09:09:00",
+        });
+        expect(vm.getSnapshot().tsReceivedAt).toBeUndefined();
+        expect(vm.getSnapshot().inhibitTooltip).toBeUndefined();
+        expect(vm.getSnapshot().href).toBeUndefined();
+        expect(vm.onClick).toBeUndefined();
+        expect(vm.onContextMenu).toBeUndefined();
+    });
+
+    it("does not emit an update when batched props are unchanged", () => {
+        const props = {
+            ts: nowDate.getTime(),
+            href: "https://example.test/event",
+        };
+        const vm = new MessageTimestampViewModel(props);
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        vm.setProps(props);
+
+        expect(listener).not.toHaveBeenCalled();
+    });
 });
diff --git a/apps/web/test/viewmodels/message-body/MjolnirBodyViewModel-test.ts b/apps/web/test/viewmodels/message-body/MjolnirBodyViewModel-test.ts
index c93aa3c2b6..5d22deb4d4 100644
--- a/apps/web/test/viewmodels/message-body/MjolnirBodyViewModel-test.ts
+++ b/apps/web/test/viewmodels/message-body/MjolnirBodyViewModel-test.ts
@@ -5,79 +5,44 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { type MouseEvent } from "react";
-import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
-
 import { MjolnirBodyViewModel } from "../../../src/viewmodels/room/timeline/event-tile/body/MjolnirBodyViewModel";
 
 describe("MjolnirBodyViewModel", () => {
-    const createEvent = (roomId = "!room:example.com", eventId = "$event:example.com"): MatrixEvent =>
-        ({
-            getRoomId: jest.fn().mockReturnValue(roomId),
-            getId: jest.fn().mockReturnValue(eventId),
-        }) as unknown as MatrixEvent;
-
-    const createClickEvent = (): MouseEvent<HTMLButtonElement> =>
-        ({
-            preventDefault: jest.fn(),
-            stopPropagation: jest.fn(),
-        }) as unknown as MouseEvent<HTMLButtonElement>;
-
-    afterEach(() => {
-        localStorage.clear();
-        jest.restoreAllMocks();
-    });
-
     it("has an empty snapshot", () => {
-        const vm = new MjolnirBodyViewModel({ mxEvent: createEvent() });
+        const vm = new MjolnirBodyViewModel({ onAllow: jest.fn() });
 
         expect(vm.getSnapshot()).toEqual({});
     });
 
-    it("allows rendering the hidden event and notifies the parent", () => {
-        const onMessageAllowed = jest.fn();
-        const vm = new MjolnirBodyViewModel({
-            mxEvent: createEvent("!room:example.com", "$hidden:example.com"),
-            onMessageAllowed,
-        });
-        const event = createClickEvent();
+    it("forwards the allow action", () => {
+        const onAllow = jest.fn();
+        const vm = new MjolnirBodyViewModel({ onAllow });
 
-        vm.onAllowClick(event);
+        vm.onAllow();
 
-        expect(event.preventDefault).toHaveBeenCalled();
-        expect(event.stopPropagation).toHaveBeenCalled();
-        expect(localStorage.getItem("mx_mjolnir_render_!room:example.com__$hidden:example.com")).toBe("true");
-        expect(onMessageAllowed).toHaveBeenCalledTimes(1);
+        expect(onAllow).toHaveBeenCalledTimes(1);
     });
 
-    it("uses the updated event and callback", () => {
-        const oldCallback = jest.fn();
-        const newCallback = jest.fn();
-        const vm = new MjolnirBodyViewModel({
-            mxEvent: createEvent("!old:example.com", "$old:example.com"),
-            onMessageAllowed: oldCallback,
-        });
+    it("uses the updated action", () => {
+        const oldAction = jest.fn();
+        const newAction = jest.fn();
+        const vm = new MjolnirBodyViewModel({ onAllow: oldAction });
 
-        vm.setEvent(createEvent("!new:example.com", "$new:example.com"));
-        vm.setOnMessageAllowed(newCallback);
-        vm.onAllowClick(createClickEvent());
+        vm.setProps({ onAllow: newAction });
+        vm.onAllow();
 
-        expect(localStorage.getItem("mx_mjolnir_render_!old:example.com__$old:example.com")).toBeNull();
-        expect(localStorage.getItem("mx_mjolnir_render_!new:example.com__$new:example.com")).toBe("true");
-        expect(oldCallback).not.toHaveBeenCalled();
-        expect(newCallback).toHaveBeenCalledTimes(1);
+        expect(oldAction).not.toHaveBeenCalled();
+        expect(newAction).toHaveBeenCalledTimes(1);
     });
 
     it("does not emit snapshot updates for unchanged action inputs", () => {
-        const mxEvent = createEvent();
-        const onMessageAllowed = jest.fn();
+        const props = { onAllow: jest.fn() };
         const listener = jest.fn();
-        const vm = new MjolnirBodyViewModel({ mxEvent, onMessageAllowed });
+        const vm = new MjolnirBodyViewModel(props);
 
         vm.subscribe(listener);
 
-        vm.setEvent(mxEvent);
-        vm.setOnMessageAllowed(onMessageAllowed);
+        vm.setProps(props);
 
         expect(listener).not.toHaveBeenCalled();
     });
diff --git a/apps/web/test/viewmodels/message-body/ReactionsRowButtonTooltipViewModel-test.tsx b/apps/web/test/viewmodels/message-body/ReactionsRowButtonTooltipViewModel-test.ts
similarity index 100%
rename from apps/web/test/viewmodels/message-body/ReactionsRowButtonTooltipViewModel-test.tsx
rename to apps/web/test/viewmodels/message-body/ReactionsRowButtonTooltipViewModel-test.ts
diff --git a/apps/web/test/viewmodels/message-body/ReactionsRowButtonViewModel-test.tsx b/apps/web/test/viewmodels/message-body/ReactionsRowButtonViewModel-test.ts
similarity index 83%
rename from apps/web/test/viewmodels/message-body/ReactionsRowButtonViewModel-test.tsx
rename to apps/web/test/viewmodels/message-body/ReactionsRowButtonViewModel-test.ts
index 2c14e003fb..e12b97d43e 100644
--- a/apps/web/test/viewmodels/message-body/ReactionsRowButtonViewModel-test.tsx
+++ b/apps/web/test/viewmodels/message-body/ReactionsRowButtonViewModel-test.ts
@@ -16,6 +16,9 @@ import { createTestClient, mkEvent, mkStubRoom } from "../../test-utils";
 import dis from "../../../src/dispatcher/dispatcher";
 
 jest.mock("../../../src/dispatcher/dispatcher");
+jest.mock("../../../src/customisations/Media", () => ({
+    mediaFromMxc: jest.fn(() => ({ srcHttp: "https://example.org/_matrix/media/reaction.png" })),
+}));
 
 describe("ReactionsRowButtonViewModel", () => {
     let client: MatrixClient;
@@ -91,6 +94,35 @@ describe("ReactionsRowButtonViewModel", () => {
         expect(getAriaLabel(vm)).toContain("reacted with 👍");
     });
 
+    it("falls back when no room is available", () => {
+        jest.spyOn(client, "getRoom").mockReturnValue(null);
+
+        const vm = new ReactionsRowButtonViewModel(createProps());
+
+        expect(getAriaLabel(vm)).toBeUndefined();
+        expect(vm.getSnapshot().content).toBe("👍");
+        expect(vm.getSnapshot().count).toBe(2);
+    });
+
+    it("renders custom reaction images with shortcode labels when enabled", () => {
+        const reactionEvent = createReactionEvent("@alice:example.org", "mxc://example.org/reaction");
+        reactionEvent.getContent()["shortcode"] = "party";
+
+        const vm = new ReactionsRowButtonViewModel(
+            createProps({
+                content: "mxc://example.org/reaction",
+                reactionEvents: [reactionEvent],
+                customReactionImagesEnabled: true,
+            }),
+        );
+
+        expect(vm.getSnapshot()).toMatchObject({
+            imageSrc: "https://example.org/_matrix/media/reaction.png",
+            imageAlt: "party",
+        });
+        expect(getAriaLabel(vm)).toContain("reacted with party");
+    });
+
     it("updates selected state with myReactionEvent without touching tooltip props", () => {
         const vm = new ReactionsRowButtonViewModel(createProps());
         const tooltipSetPropsSpy = jest.spyOn(getTooltipVm(vm), "setProps");
diff --git a/apps/web/test/viewmodels/message-body/ReactionsRowViewModel-test.tsx b/apps/web/test/viewmodels/message-body/ReactionsRowViewModel-test.ts
similarity index 100%
rename from apps/web/test/viewmodels/message-body/ReactionsRowViewModel-test.tsx
rename to apps/web/test/viewmodels/message-body/ReactionsRowViewModel-test.ts
diff --git a/apps/web/test/viewmodels/message-body/TextualBodyViewModel-test.tsx b/apps/web/test/viewmodels/message-body/TextualBodyViewModel-test.ts
similarity index 95%
rename from apps/web/test/viewmodels/message-body/TextualBodyViewModel-test.tsx
rename to apps/web/test/viewmodels/message-body/TextualBodyViewModel-test.ts
index e11534fb9c..7de8d414bd 100644
--- a/apps/web/test/viewmodels/message-body/TextualBodyViewModel-test.tsx
+++ b/apps/web/test/viewmodels/message-body/TextualBodyViewModel-test.ts
@@ -213,10 +213,29 @@ describe("TextualBodyViewModel", () => {
         ).toThrow("TextualBodyViewModel should only render pending moderation for hidden messages");
     });
 
-    it("ignores linkified root clicks", () => {
+    it("rewrites linkified permalink clicks to local hashes", () => {
+        const vm = createVm();
+        const preventDefault = jest.fn();
+        jest.spyOn(permalinkUtils, "tryTransformPermalinkToLocalHref").mockReturnValue("#/room/#room:example.org");
+
+        vm.onRootClick({
+            preventDefault,
+            target: {
+                dataset: {
+                    [LINKIFIED_DATA_ATTRIBUTE]: "true",
+                },
+                href: "https://matrix.to/#/#room:example.org",
+                nodeName: "A",
+            },
+        } as any);
+
+        expect(preventDefault).toHaveBeenCalled();
+        expect(window.location.hash).toBe("#/room/#room:example.org");
+    });
+
+    it("leaves linkified ordinary links alone", () => {
         const vm = createVm();
         const preventDefault = jest.fn();
-        const transformSpy = jest.spyOn(permalinkUtils, "tryTransformPermalinkToLocalHref");
 
         vm.onRootClick({
             preventDefault,
@@ -229,8 +248,8 @@ describe("TextualBodyViewModel", () => {
             },
         } as any);
 
-        expect(transformSpy).not.toHaveBeenCalled();
         expect(preventDefault).not.toHaveBeenCalled();
+        expect(window.location.hash).toBe("");
     });
 
     it("rewrites permalink clicks to local hashes", () => {
diff --git a/apps/web/test/viewmodels/message-body/TileErrorViewModel-test.tsx b/apps/web/test/viewmodels/message-body/TileErrorViewModel-test.ts
similarity index 100%
rename from apps/web/test/viewmodels/message-body/TileErrorViewModel-test.tsx
rename to apps/web/test/viewmodels/message-body/TileErrorViewModel-test.ts
diff --git a/apps/web/test/viewmodels/message-body/UrlPreviewGroupViewModel-test.ts b/apps/web/test/viewmodels/message-body/UrlPreviewGroupViewModel-test.ts
index 9541e999a8..e3a1e502be 100644
--- a/apps/web/test/viewmodels/message-body/UrlPreviewGroupViewModel-test.ts
+++ b/apps/web/test/viewmodels/message-body/UrlPreviewGroupViewModel-test.ts
@@ -7,9 +7,13 @@
 
 import { expect } from "@jest/globals";
 
-import type { MockedObject } from "jest-mock";
-import type { MatrixClient, IPreviewUrlResponse } from "matrix-js-sdk/src/matrix";
-import { UrlPreviewGroupViewModel } from "../../../src/viewmodels/message-body/UrlPreviewGroupViewModel";
+import type { MockedObject } from "jest-mock-vitest-adapter";
+import { MsgType, type MatrixClient } from "matrix-js-sdk/src/matrix";
+import {
+    BUNDLED_LINK_PREVIEWS,
+    MAX_PREVIEWS_WHEN_LIMITED,
+    UrlPreviewGroupViewModel,
+} from "../../../src/viewmodels/message-body/UrlPreviewGroupViewModel";
 import type { UrlPreview } from "@element-hq/web-shared-components";
 import { getMockClientWithEventEmitter, mkEvent } from "../../test-utils";
 
@@ -22,7 +26,46 @@ const BASIC_PREVIEW_OGDATA = {
     "og:site_name": "Example.org",
 };
 
-function getViewModel({ mediaVisible, visible } = { mediaVisible: true, visible: true }): {
+const BUNDLE_PREVIEW_ONE = {
+    "matched_url": "https://example.org/1",
+    "og:title": "Bundled one",
+    "og:description": "First bundled preview",
+    "og:url": "https://example.org/1",
+};
+const BUNDLE_PREVIEW_TWO = {
+    "matched_url": "https://example.org/2",
+    "og:title": "Bundled two",
+    "og:description": "Second bundled preview",
+    "og:url": "https://example.org/2",
+};
+const BUNDLE_PREVIEW_THREE = {
+    "matched_url": "https://example.org/3",
+    "og:title": "Bundled three",
+    "og:description": "Third bundled preview",
+    "og:url": "https://example.org/3",
+};
+const BUNDLE_PREVIEW_WITH_IMAGE = {
+    "matched_url": "https://example.org/image",
+    "og:title": "Bundled with image",
+    "og:image": IMAGE_MXC,
+    "og:image:type": "image/png",
+    "og:image:width": 128,
+    "og:image:height": 128,
+};
+
+function getViewModel({
+    mediaVisible = true,
+    visible = true,
+    showPreview = true,
+    urlPreviewBundleEnabled = true,
+    content,
+}: {
+    mediaVisible?: boolean;
+    visible?: boolean;
+    showPreview?: boolean;
+    urlPreviewBundleEnabled?: boolean;
+    content?: object;
+} = {}): {
     vm: UrlPreviewGroupViewModel;
     client: MockedObject<MatrixClient>;
     onImageClicked: jest.Mock<void, [UrlPreview]>;
@@ -37,13 +80,18 @@ function getViewModel({ mediaVisible, visible } = { mediaVisible: true, visible:
         mediaVisible,
         visible,
         onImageClicked,
+        showTooltips: false,
         mxEvent: mkEvent({
             event: true,
             user: "@foo:bar",
             type: "m.room.message",
-            content: {},
+            content: {
+                ...(showPreview ? undefined : { [BUNDLED_LINK_PREVIEWS]: [] }),
+                ...content,
+            },
             id: "$id",
         }),
+        urlPreviewBundleEnabled,
     });
     return { vm, client, onImageClicked };
 }
@@ -82,77 +130,31 @@ describe("UrlPreviewGroupViewModel", () => {
         const { previews } = vm.getSnapshot();
         expect(previews).toHaveLength(3);
         expect(previews).toMatchObject([
-            {
-                link: "https://example.org/1",
-            },
-            {
-                link: "https://example.org/2",
-            },
-            {
-                link: "https://example.org/3",
-            },
+            { link: "https://example.org/1" },
+            { link: "https://example.org/2" },
+            { link: "https://example.org/3" },
         ]);
     });
     it("should hide preview when invisible", async () => {
-        const { vm, client } = getViewModel({ visible: false, mediaVisible: true });
+        const { vm, client } = getViewModel({
+            visible: false,
+            mediaVisible: true,
+            showPreview: true,
+            urlPreviewBundleEnabled: false,
+        });
         const msg = document.createElement("div");
         msg.innerHTML = '<a href="https://example.org">Test</a>';
         await vm.updateEventElement(msg);
         expect(vm.getSnapshot()).toMatchSnapshot();
         expect(client.getUrlPreview).not.toHaveBeenCalled();
     });
-    it("should preview a URL with media", async () => {
-        const { vm, client } = getViewModel();
-        client.getUrlPreview.mockResolvedValueOnce({
-            "og:title": "This is an example!",
-            "og:type": "document",
-            "og:url": "https://example.org",
-            "og:image": IMAGE_MXC,
-            "og:image:height": 128,
-            "og:image:width": 128,
-            "matrix:image:size": 10000,
-        });
-        // eslint-disable-next-line no-restricted-properties
-        client.mxcUrlToHttp.mockImplementation((url, width) => {
-            expect(url).toEqual(IMAGE_MXC);
-            if (width) {
-                return "https://example.org/image/thumb";
-            }
-            return "https://example.org/image/src";
-        });
-        const msg = document.createElement("div");
-        msg.innerHTML = '<a href="https://example.org">Test</a>';
-        await vm.updateEventElement(msg);
-        expect(vm.getSnapshot()).toMatchSnapshot();
-    });
-    it.each<Partial<IPreviewUrlResponse>>([
-        { "matrix:image:size": 8191 },
-        { "og:image:width": 95 },
-        { "og:image:height": 95 },
-    ])("should preview a URL with a site icon", async (extraResp) => {
-        const { vm, client } = getViewModel();
-        client.getUrlPreview.mockResolvedValueOnce({
-            "og:title": "This is an example!",
-            "og:type": "document",
-            "og:url": "https://example.org",
-            "og:image": IMAGE_MXC,
-            "og:image:height": 128,
-            "og:image:width": 128,
-            "matrix:image:size": 8193,
-            ...extraResp,
-        });
-        // eslint-disable-next-line no-restricted-properties
-        client.mxcUrlToHttp.mockImplementation((url) => {
-            expect(url).toEqual(IMAGE_MXC);
-            return "https://example.org/image/src";
-        });
-        const msg = document.createElement("div");
-        msg.innerHTML = '<a href="https://example.org">Test</a>';
-        await vm.updateEventElement(msg);
-        expect(vm.getSnapshot().previews[0].siteIcon).toBeTruthy();
-    });
     it("should ignore media when mediaVisible is false", async () => {
-        const { vm, client } = getViewModel({ mediaVisible: false, visible: true });
+        const { vm, client } = getViewModel({
+            mediaVisible: false,
+            visible: true,
+            showPreview: true,
+            urlPreviewBundleEnabled: false,
+        });
         client.getUrlPreview.mockResolvedValueOnce({
             "og:title": "This is an example!",
             "og:type": "document",
@@ -225,40 +227,25 @@ describe("UrlPreviewGroupViewModel", () => {
         await vm.onShowClick();
         expect(vm.getSnapshot()).toMatchSnapshot();
     });
-
-    describe("calculates author", () => {
-        it("should use the profile:username if provided", async () => {
-            const { vm, client } = getViewModel();
-            client.getUrlPreview.mockResolvedValueOnce({ ...BASIC_PREVIEW_OGDATA, "profile:username": "my username" });
-            const msg = document.createElement("div");
-            msg.innerHTML = '<a href="https://example.org">Test</a>';
-            await vm.updateEventElement(msg);
-            expect(vm.getSnapshot().previews[0].author).toEqual("my username");
-        });
-        it("should use author if the og:type is an article", async () => {
-            const { vm, client } = getViewModel();
-            client.getUrlPreview.mockResolvedValueOnce({
-                ...BASIC_PREVIEW_OGDATA,
-                "og:type": "article",
-                "article:author": "my name",
-            });
-            const msg = document.createElement("div");
-            msg.innerHTML = '<a href="https://example.org">Test</a>';
-            await vm.updateEventElement(msg);
-            expect(vm.getSnapshot().previews[0].author).toEqual("my name");
-        });
-        it("should NOT use author if the author is a URL", async () => {
-            const { vm, client } = getViewModel();
-            client.getUrlPreview.mockResolvedValueOnce({
-                ...BASIC_PREVIEW_OGDATA,
-                "og:type": "article",
-                "article:author": "https://junk.example.org/foo",
-            });
-            const msg = document.createElement("div");
-            msg.innerHTML = '<a href="https://example.org">Test</a>';
-            await vm.updateEventElement(msg);
-            expect(vm.getSnapshot().previews[0].author).toBeUndefined();
+    it("should hide a preview if the message requests it", async () => {
+        const { vm, client } = getViewModel({
+            showPreview: false,
+            mediaVisible: true,
+            visible: true,
+            urlPreviewBundleEnabled: false,
         });
+        client.getUrlPreview.mockResolvedValueOnce(BASIC_PREVIEW_OGDATA);
+        const msg = document.createElement("div");
+        msg.innerHTML = '<a href="https://example.org">Test</a>';
+        await vm.updateEventElement(msg);
+        expect(vm.getSnapshot()).toMatchInlineSnapshot(`
+{
+  "overPreviewLimit": false,
+  "previews": [],
+  "previewsLimited": false,
+  "totalPreviewCount": 0,
+}
+`);
     });
 
     it.each([
@@ -276,61 +263,121 @@ describe("UrlPreviewGroupViewModel", () => {
         expect(vm.getSnapshot().previews).toHaveLength(item.hasPreview ? 1 : 0);
     });
 
-    // og:url, og:type are ignored.
-    const baseOg = {
-        "og:url": "https://example.org",
-        "og:type": "document",
-    };
+    describe("bundled link previews (MSC4095)", () => {
+        it("should render bundled previews when the message is text and the bundle is enabled", async () => {
+            const { vm, client } = getViewModel({
+                urlPreviewBundleEnabled: true,
+                content: {
+                    msgtype: MsgType.Text,
+                    [BUNDLED_LINK_PREVIEWS]: [BUNDLE_PREVIEW_ONE, BUNDLE_PREVIEW_TWO],
+                },
+            });
+            const msg = document.createElement("div");
+            msg.innerHTML = '<a href="https://example.org/1">Test1</a><a href="https://example.org/2">Test2</a>';
+            await vm.updateEventElement(msg);
+            const { previews } = vm.getSnapshot();
+            expect(previews).toMatchObject([
+                {
+                    link: "https://example.org/1",
+                    title: "Bundled one",
+                    description: "First bundled preview",
+                    siteName: "example.org",
+                    ogUrl: "https://example.org/1",
+                },
+                {
+                    link: "https://example.org/2",
+                    title: "Bundled two",
+                    description: "Second bundled preview",
+                    siteName: "example.org",
+                    ogUrl: "https://example.org/2",
+                },
+            ]);
+            // Bundled previews are provided inline and must not trigger network fetches.
+            expect(client.getUrlPreview).not.toHaveBeenCalled();
+        });
 
-    it.each<IPreviewUrlResponse>([
-        { ...baseOg, "og:title": "Basic title" },
-        { ...baseOg, "og:site_name": "Site name", "og:title": "" },
-        { ...baseOg, "og:description": "A description", "og:title": "" },
-        { ...baseOg, "og:title": "Cool blog", "og:site_name": "Cool site" },
-        {
-            ...baseOg,
-            "og:title": "Media test",
-            // API *may* return a string, so check we parse correctly.
-            "og:image:height": "500" as unknown as number,
-            "og:image:width": 500,
-            "matrix:image:size": 10000,
-            "og:image": IMAGE_MXC,
-        },
-    ])("handles different kinds of opengraph responses %s", async (og) => {
-        const { vm, client } = getViewModel();
-        // eslint-disable-next-line no-restricted-properties
-        client.mxcUrlToHttp.mockImplementation((url, width) => {
-            expect(url).toEqual(IMAGE_MXC);
-            if (width) {
-                return "https://example.org/image/thumb";
-            }
-            return "https://example.org/image/src";
+        it("should render an image for a bundled preview", async () => {
+            const { vm, client } = getViewModel({
+                urlPreviewBundleEnabled: true,
+                content: {
+                    msgtype: MsgType.Text,
+                    [BUNDLED_LINK_PREVIEWS]: [BUNDLE_PREVIEW_WITH_IMAGE],
+                },
+            });
+            // eslint-disable-next-line no-restricted-properties
+            client.mxcUrlToHttp.mockReturnValue("https://example.org/image/src");
+            const msg = document.createElement("div");
+            msg.innerHTML = '<a href="https://example.org/image">Test</a>';
+            await vm.updateEventElement(msg);
+            const { previews } = vm.getSnapshot();
+            expect(previews).toHaveLength(1);
+            expect(previews[0].image).toMatchObject({
+                mxcImageFull: IMAGE_MXC,
+                imageType: "image/png",
+                width: 128,
+                height: 128,
+            });
+            expect(client.getUrlPreview).not.toHaveBeenCalled();
         });
-        client.getUrlPreview.mockResolvedValueOnce(og);
-        const msg = document.createElement("div");
-        msg.innerHTML = `<a href="https://example.org">test</a>`;
-        await vm.updateEventElement(msg);
-        expect(vm.getSnapshot().previews[0]).toMatchSnapshot();
-    });
 
-    it.each<string>(["og:video", "og:video:type", "og:audio"])("detects playable links via %s", async (property) => {
-        const { vm, client } = getViewModel();
-        // eslint-disable-next-line no-restricted-properties
-        client.mxcUrlToHttp.mockImplementation((url, width) => {
-            expect(url).toEqual(IMAGE_MXC);
-            if (width) {
-                return "https://example.org/image/thumb";
-            }
-            return "https://example.org/image/src";
+        it("should limit bundled previews and reveal the rest when the limit is toggled", async () => {
+            const { vm, client } = getViewModel({
+                urlPreviewBundleEnabled: true,
+                content: {
+                    msgtype: MsgType.Text,
+                    [BUNDLED_LINK_PREVIEWS]: [BUNDLE_PREVIEW_ONE, BUNDLE_PREVIEW_TWO, BUNDLE_PREVIEW_THREE],
+                },
+            });
+            const msg = document.createElement("div");
+            msg.innerHTML =
+                '<a href="https://example.org/1">Test1</a><a href="https://example.org/2">Test2</a><a href="https://example.org/3">Test3</a>';
+            await vm.updateEventElement(msg);
+
+            let snapshot = vm.getSnapshot();
+            expect(snapshot.previews).toHaveLength(MAX_PREVIEWS_WHEN_LIMITED);
+            expect(snapshot.previewsLimited).toBe(true);
+            expect(snapshot.overPreviewLimit).toBe(true);
+
+            await vm.onTogglePreviewLimit();
+            snapshot = vm.getSnapshot();
+            expect(snapshot.previews).toHaveLength(3);
+            expect(snapshot.previewsLimited).toBe(false);
+            expect(client.getUrlPreview).not.toHaveBeenCalled();
         });
-        client.getUrlPreview.mockResolvedValueOnce({
-            ...BASIC_PREVIEW_OGDATA,
-            "og:image": IMAGE_MXC,
-            [property]: "anything",
+
+        it("should fetch previews instead of using the bundle when the bundle setting is disabled", async () => {
+            const { vm, client } = getViewModel({
+                urlPreviewBundleEnabled: false,
+                content: {
+                    msgtype: MsgType.Text,
+                    [BUNDLED_LINK_PREVIEWS]: [BUNDLE_PREVIEW_ONE],
+                },
+            });
+            client.getUrlPreview.mockResolvedValueOnce(BASIC_PREVIEW_OGDATA);
+            const msg = document.createElement("div");
+            msg.innerHTML = '<a href="https://example.org/1">Test1</a>';
+            await vm.updateEventElement(msg);
+            const { previews } = vm.getSnapshot();
+            expect(client.getUrlPreview).toHaveBeenCalledWith("https://example.org/1", expect.anything());
+            // The fetched preview wins over the ignored bundle entry.
+            expect(previews).toMatchObject([{ title: "This is an example!" }]);
+        });
+
+        it("should fetch previews instead of using the bundle when the message is not a text message", async () => {
+            const { vm, client } = getViewModel({
+                urlPreviewBundleEnabled: true,
+                content: {
+                    msgtype: MsgType.Notice,
+                    [BUNDLED_LINK_PREVIEWS]: [BUNDLE_PREVIEW_ONE],
+                },
+            });
+            client.getUrlPreview.mockResolvedValueOnce(BASIC_PREVIEW_OGDATA);
+            const msg = document.createElement("div");
+            msg.innerHTML = '<a href="https://example.org/1">Test1</a>';
+            await vm.updateEventElement(msg);
+            const { previews } = vm.getSnapshot();
+            expect(client.getUrlPreview).toHaveBeenCalledWith("https://example.org/1", expect.anything());
+            expect(previews).toMatchObject([{ title: "This is an example!" }]);
         });
-        const msg = document.createElement("div");
-        msg.innerHTML = `<a href="https://example.org">test</a>`;
-        await vm.updateEventElement(msg);
-        expect(vm.getSnapshot().previews[0].image?.playable).toEqual(true);
     });
 });
diff --git a/apps/web/test/viewmodels/message-body/VideoBodyViewModel-test.tsx b/apps/web/test/viewmodels/message-body/VideoBodyViewModel-test.ts
similarity index 100%
rename from apps/web/test/viewmodels/message-body/VideoBodyViewModel-test.tsx
rename to apps/web/test/viewmodels/message-body/VideoBodyViewModel-test.ts
diff --git a/apps/web/test/viewmodels/message-body/ViewSourceEventViewModel-test.ts b/apps/web/test/viewmodels/message-body/ViewSourceEventViewModel-test.ts
new file mode 100644
index 0000000000..6b0ee8e6f6
--- /dev/null
+++ b/apps/web/test/viewmodels/message-body/ViewSourceEventViewModel-test.ts
@@ -0,0 +1,143 @@
+/*
+Copyright 2026 Element Creations Ltd.
+Copyright 2024 New Vector Ltd.
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type MouseEvent } from "react";
+import { type MatrixClient, MatrixEvent, MatrixEventEvent } from "matrix-js-sdk/src/matrix";
+
+import { ViewSourceEventViewModel } from "../../../src/viewmodels/room/timeline/event-tile/body/ViewSourceEventViewModel";
+
+describe("ViewSourceEventViewModel", () => {
+    const createClient = (): MatrixClient =>
+        ({
+            decryptEventIfNeeded: jest.fn().mockResolvedValue(undefined),
+        }) as unknown as MatrixClient;
+
+    const createEvent = (type = "m.room.message", content: Record<string, unknown> = {}): MatrixEvent =>
+        new MatrixEvent({
+            type,
+            event_id: "$event:example.org",
+            sender: "@alice:example.org",
+            content,
+        });
+
+    const createClickEvent = (): MouseEvent<HTMLButtonElement> =>
+        ({
+            preventDefault: jest.fn(),
+        }) as unknown as MouseEvent<HTMLButtonElement>;
+
+    it("creates a collapsed event source snapshot and requests decryption", () => {
+        const cli = createClient();
+        const mxEvent = createEvent("m.room.member");
+        const vm = new ViewSourceEventViewModel({ cli, mxEvent });
+
+        expect(cli.decryptEventIfNeeded).toHaveBeenCalledWith(mxEvent);
+        expect(vm.getSnapshot()).toEqual({
+            expanded: false,
+            preview: '{ "type": m.room.member }',
+            source: "",
+        });
+    });
+
+    it("toggles expanded state", () => {
+        const mxEvent = createEvent();
+        const vm = new ViewSourceEventViewModel({ cli: createClient(), mxEvent });
+        const event = createClickEvent();
+
+        vm.onToggle(event);
+
+        expect(event.preventDefault).toHaveBeenCalled();
+        expect(vm.getSnapshot().expanded).toBe(true);
+        expect(vm.getSnapshot().source).toBe(JSON.stringify(mxEvent, null, 4));
+
+        vm.onToggle(createClickEvent());
+
+        expect(vm.getSnapshot().expanded).toBe(false);
+        expect(vm.getSnapshot().source).toBe("");
+    });
+
+    it("updates the event source when the event changes", () => {
+        const cli = createClient();
+        const oldEvent = createEvent("m.room.message");
+        const newEvent = createEvent("m.room.topic", { topic: "New topic" });
+        const vm = new ViewSourceEventViewModel({ cli, mxEvent: oldEvent });
+
+        vm.onToggle(createClickEvent());
+        vm.setProps({ mxEvent: newEvent });
+
+        expect(cli.decryptEventIfNeeded).toHaveBeenCalledWith(newEvent);
+        expect(vm.getSnapshot()).toEqual({
+            expanded: true,
+            preview: '{ "type": m.room.topic }',
+            source: JSON.stringify(newEvent, null, 4),
+        });
+    });
+
+    it("removes the previous decryption listener when the event changes", () => {
+        const oldEvent = createEvent("m.room.encrypted");
+        jest.spyOn(oldEvent, "isBeingDecrypted").mockReturnValue(true);
+        const offSpy = jest.spyOn(oldEvent, "off");
+        const vm = new ViewSourceEventViewModel({ cli: createClient(), mxEvent: oldEvent });
+
+        vm.setProps({ mxEvent: createEvent("m.room.message") });
+
+        expect(offSpy).toHaveBeenCalledWith(MatrixEventEvent.Decrypted, expect.any(Function));
+    });
+
+    it("updates the decryption request when the client changes", () => {
+        const oldClient = createClient();
+        const newClient = createClient();
+        const mxEvent = createEvent();
+        const vm = new ViewSourceEventViewModel({ cli: oldClient, mxEvent });
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        vm.setProps({ cli: newClient });
+
+        expect(newClient.decryptEventIfNeeded).toHaveBeenCalledWith(mxEvent);
+        expect(listener).not.toHaveBeenCalled();
+    });
+
+    it("does not emit when setProps receives unchanged props", () => {
+        const cli = createClient();
+        const mxEvent = createEvent();
+        const vm = new ViewSourceEventViewModel({ cli, mxEvent });
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        vm.setProps({ cli, mxEvent });
+
+        expect(listener).not.toHaveBeenCalled();
+    });
+
+    it("updates the source after decryption completes", () => {
+        const mxEvent = createEvent("m.room.encrypted", { ciphertext: "encrypted" });
+        jest.spyOn(mxEvent, "isBeingDecrypted").mockReturnValue(true);
+        const vm = new ViewSourceEventViewModel({ cli: createClient(), mxEvent });
+        vm.onToggle(createClickEvent());
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        mxEvent.getContent().body = "decrypted";
+        mxEvent.emit(MatrixEventEvent.Decrypted, mxEvent);
+
+        expect(listener).toHaveBeenCalledTimes(1);
+        expect(vm.getSnapshot().source).toContain("decrypted");
+    });
+
+    it("removes decryption listeners on dispose", () => {
+        const mxEvent = createEvent("m.room.encrypted");
+        jest.spyOn(mxEvent, "isBeingDecrypted").mockReturnValue(true);
+        const offSpy = jest.spyOn(mxEvent, "off");
+        const vm = new ViewSourceEventViewModel({ cli: createClient(), mxEvent });
+
+        vm.dispose();
+
+        expect(offSpy).toHaveBeenCalledWith(MatrixEventEvent.Decrypted, expect.any(Function));
+    });
+});
diff --git a/apps/web/test/viewmodels/message-body/__snapshots__/UrlPreviewGroupViewModel-test.ts.snap b/apps/web/test/viewmodels/message-body/__snapshots__/UrlPreviewGroupViewModel-test.ts.snap
index 0412afaba9..bc9123407e 100644
--- a/apps/web/test/viewmodels/message-body/__snapshots__/UrlPreviewGroupViewModel-test.ts.snap
+++ b/apps/web/test/viewmodels/message-body/__snapshots__/UrlPreviewGroupViewModel-test.ts.snap
@@ -1,78 +1,5 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`UrlPreviewGroupViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:description': 'A description',\\n  'og:title': ''\\n} 1`] = `
-{
-  "author": undefined,
-  "description": undefined,
-  "image": undefined,
-  "link": "https://example.org",
-  "showTooltipOnLink": false,
-  "siteIcon": undefined,
-  "siteName": "example.org",
-  "title": "A description",
-}
-`;
-
-exports[`UrlPreviewGroupViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:site_name': 'Site name',\\n  'og:title': ''\\n} 1`] = `
-{
-  "author": undefined,
-  "description": undefined,
-  "image": undefined,
-  "link": "https://example.org",
-  "showTooltipOnLink": false,
-  "siteIcon": undefined,
-  "siteName": "Site name",
-  "title": "Site name",
-}
-`;
-
-exports[`UrlPreviewGroupViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:title': 'Basic title'\\n} 1`] = `
-{
-  "author": undefined,
-  "description": undefined,
-  "image": undefined,
-  "link": "https://example.org",
-  "showTooltipOnLink": false,
-  "siteIcon": undefined,
-  "siteName": "example.org",
-  "title": "Basic title",
-}
-`;
-
-exports[`UrlPreviewGroupViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:title': 'Cool blog',\\n  'og:site_name': 'Cool site'\\n} 1`] = `
-{
-  "author": undefined,
-  "description": undefined,
-  "image": undefined,
-  "link": "https://example.org",
-  "showTooltipOnLink": false,
-  "siteIcon": undefined,
-  "siteName": "Cool site",
-  "title": "Cool blog",
-}
-`;
-
-exports[`UrlPreviewGroupViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:title': 'Media test',\\n  'og:image:height': '500',\\n  'og:image:width': 500,\\n  'matrix:image:size': 10000,\\n  'og:image': 'mxc://example.org/abc'\\n} 1`] = `
-{
-  "author": undefined,
-  "description": undefined,
-  "image": {
-    "alt": undefined,
-    "fileSize": 10000,
-    "height": 478,
-    "imageFull": "https://example.org/image/src",
-    "imageThumb": "https://example.org/image/thumb",
-    "playable": false,
-    "width": 478,
-  },
-  "link": "https://example.org",
-  "showTooltipOnLink": false,
-  "siteIcon": undefined,
-  "siteName": "example.org",
-  "title": "Media test",
-}
-`;
-
 exports[`UrlPreviewGroupViewModel should deduplicate multiple versions of the same URL 1`] = `
 {
   "overPreviewLimit": false,
@@ -82,6 +9,7 @@ exports[`UrlPreviewGroupViewModel should deduplicate multiple versions of the sa
       "description": "This is a description",
       "image": undefined,
       "link": "https://example.org",
+      "ogUrl": "https://example.org",
       "showTooltipOnLink": false,
       "siteIcon": undefined,
       "siteName": "Example.org",
@@ -111,6 +39,7 @@ exports[`UrlPreviewGroupViewModel should handle being hidden and shown by the us
       "description": "This is a description",
       "image": undefined,
       "link": "https://example.org",
+      "ogUrl": "https://example.org",
       "showTooltipOnLink": false,
       "siteIcon": undefined,
       "siteName": "Example.org",
@@ -149,34 +78,7 @@ exports[`UrlPreviewGroupViewModel should ignore media when mediaVisible is false
       "description": undefined,
       "image": undefined,
       "link": "https://example.org",
-      "showTooltipOnLink": false,
-      "siteIcon": undefined,
-      "siteName": "example.org",
-      "title": "This is an example!",
-    },
-  ],
-  "previewsLimited": true,
-  "totalPreviewCount": 1,
-}
-`;
-
-exports[`UrlPreviewGroupViewModel should preview a URL with media 1`] = `
-{
-  "overPreviewLimit": false,
-  "previews": [
-    {
-      "author": undefined,
-      "description": undefined,
-      "image": {
-        "alt": undefined,
-        "fileSize": 10000,
-        "height": 128,
-        "imageFull": "https://example.org/image/src",
-        "imageThumb": "https://example.org/image/thumb",
-        "playable": false,
-        "width": 128,
-      },
-      "link": "https://example.org",
+      "ogUrl": "https://example.org",
       "showTooltipOnLink": false,
       "siteIcon": undefined,
       "siteName": "example.org",
@@ -197,6 +99,7 @@ exports[`UrlPreviewGroupViewModel should preview a single valid URL 1`] = `
       "description": "This is a description",
       "image": undefined,
       "link": "https://example.org",
+      "ogUrl": "https://example.org",
       "showTooltipOnLink": false,
       "siteIcon": undefined,
       "siteName": "Example.org",
diff --git a/apps/web/test/viewmodels/room-list/RoomListHeaderViewModel-test.ts b/apps/web/test/viewmodels/room-list/RoomListHeaderViewModel-test.ts
index e4afd6e7b8..3f9415debf 100644
--- a/apps/web/test/viewmodels/room-list/RoomListHeaderViewModel-test.ts
+++ b/apps/web/test/viewmodels/room-list/RoomListHeaderViewModel-test.ts
@@ -10,7 +10,6 @@ import { JoinRule, type MatrixClient, type Room, RoomEvent, RoomType } from "mat
 
 import { RoomListHeaderViewModel } from "../../../src/viewmodels/room-list/RoomListHeaderViewModel";
 import { MetaSpace, UPDATE_HOME_BEHAVIOUR, UPDATE_SELECTED_SPACE } from "../../../src/stores/spaces";
-import SpaceStore from "../../../src/stores/spaces/SpaceStore";
 import defaultDispatcher from "../../../src/dispatcher/dispatcher";
 import { Action } from "../../../src/dispatcher/actions";
 import SettingsStore from "../../../src/settings/SettingsStore";
@@ -26,9 +25,13 @@ import {
 import { createTestClient, mkSpace } from "../../test-utils";
 import { createRoom, hasCreateRoomRights } from "../../../src/viewmodels/room-list/utils";
 import PosthogTrackers from "../../../src/PosthogTrackers";
+import { ReleaseAnnouncementStore } from "../../../src/stores/ReleaseAnnouncementStore";
+import { TestSDKContext } from "../../unit-tests/TestSDKContext.ts";
 
 jest.mock("../../../src/PosthogTrackers", () => ({
     trackInteraction: jest.fn(),
+    trackSectionCreation: jest.fn(),
+    trackCollapseOrExpandSection: jest.fn(),
 }));
 
 jest.mock("../../../src/utils/space", () => ({
@@ -48,15 +51,21 @@ describe("RoomListHeaderViewModel", () => {
     let matrixClient: MatrixClient;
     let mockSpace: Room;
     let vm: RoomListHeaderViewModel;
+    let sdkContext: TestSDKContext;
 
     beforeEach(() => {
         matrixClient = createTestClient();
+        sdkContext = new TestSDKContext();
+        sdkContext._client = matrixClient;
 
         mockSpace = mkSpace(matrixClient, "!space:server");
 
         mocked(hasCreateRoomRights).mockReturnValue(true);
         mocked(shouldShowSpaceSettings).mockReturnValue(true);
 
+        jest.spyOn(ReleaseAnnouncementStore.instance, "getReleaseAnnouncement").mockReturnValue(null);
+        jest.spyOn(ReleaseAnnouncementStore.instance, "nextReleaseAnnouncement").mockResolvedValue(undefined);
+
         jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName: string) => {
             if (settingName === "RoomList.preferredSorting") return SortingAlgorithm.Recency;
             if (settingName === "feature_video_rooms") return true;
@@ -73,14 +82,13 @@ describe("RoomListHeaderViewModel", () => {
 
     describe("snapshot", () => {
         it("should compute snapshot for Home space", () => {
-            jest.spyOn(SpaceStore.instance, "activeSpace", "get").mockReturnValue(MetaSpace.Home);
-            jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(null);
+            jest.spyOn(sdkContext.spaceStore, "activeSpace", "get").mockReturnValue(MetaSpace.Home);
+            jest.spyOn(sdkContext.spaceStore, "activeSpaceRoom", "get").mockReturnValue(null);
 
-            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
 
             const snapshot = vm.getSnapshot();
             expect(snapshot.title).toBe("Home");
-            expect(snapshot.displayComposeMenu).toBe(true);
             expect(snapshot.displaySpaceMenu).toBe(false);
             expect(snapshot.canCreateRoom).toBe(true);
             expect(snapshot.canCreateVideoRoom).toBe(true);
@@ -88,10 +96,10 @@ describe("RoomListHeaderViewModel", () => {
         });
 
         it("should compute snapshot for active space", () => {
-            jest.spyOn(SpaceStore.instance, "activeSpace", "get").mockReturnValue(mockSpace.roomId);
-            jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(mockSpace);
+            jest.spyOn(sdkContext.spaceStore, "activeSpace", "get").mockReturnValue(mockSpace.roomId);
+            jest.spyOn(sdkContext.spaceStore, "activeSpaceRoom", "get").mockReturnValue(mockSpace);
 
-            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
 
             const snapshot = vm.getSnapshot();
             expect(snapshot.title).toBe(mockSpace.roomId);
@@ -103,7 +111,7 @@ describe("RoomListHeaderViewModel", () => {
                 return false;
             });
 
-            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
             expect(vm.getSnapshot().canCreateVideoRoom).toBe(false);
         });
 
@@ -113,41 +121,31 @@ describe("RoomListHeaderViewModel", () => {
                 return false;
             });
 
-            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
             expect(vm.getSnapshot().activeSortOption).toBe("alphabetical");
         });
 
-        it("should hide compose menu when user cannot create rooms", () => {
-            mocked(hasCreateRoomRights).mockReturnValue(false);
-
-            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
-
-            const snapshot = vm.getSnapshot();
-            expect(snapshot.displayComposeMenu).toBe(false);
-            expect(snapshot.canCreateRoom).toBe(false);
-        });
-
         it("should show invite option when space is public", () => {
-            jest.spyOn(SpaceStore.instance, "activeSpace", "get").mockReturnValue(mockSpace.roomId);
-            jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(mockSpace);
+            jest.spyOn(sdkContext.spaceStore, "activeSpace", "get").mockReturnValue(mockSpace.roomId);
+            jest.spyOn(sdkContext.spaceStore, "activeSpaceRoom", "get").mockReturnValue(mockSpace);
             jest.spyOn(mockSpace, "getJoinRule").mockReturnValue(JoinRule.Public);
 
-            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
             expect(vm.getSnapshot().canInviteInSpace).toBe(true);
         });
 
         it("should hide invite option when user cannot invite", () => {
             mocked(mockSpace.canInvite).mockReturnValue(false);
 
-            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
             expect(vm.getSnapshot().canInviteInSpace).toBe(false);
         });
 
         it("should hide space settings when user cannot access them", () => {
-            jest.spyOn(SpaceStore.instance, "activeSpace", "get").mockReturnValue(mockSpace.roomId);
+            jest.spyOn(sdkContext.spaceStore, "activeSpace", "get").mockReturnValue(mockSpace.roomId);
             mocked(shouldShowSpaceSettings).mockReturnValue(false);
 
-            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
             expect(vm.getSnapshot().canAccessSpaceSettings).toBe(false);
         });
 
@@ -157,50 +155,72 @@ describe("RoomListHeaderViewModel", () => {
                 return false;
             });
 
-            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
             expect(vm.getSnapshot().isMessagePreviewEnabled).toBe(true);
         });
 
-        it.each([
-            [true, true, false],
-            [false, false, true],
-        ])(
-            "when feature_room_list_sections is %s: canCreateSection=%s, useComposeIcon=%s",
-            (featureEnabled, expectedCanCreateSection, expectedUseComposeIcon) => {
-                jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName: string) => {
-                    if (settingName === "feature_room_list_sections") return featureEnabled;
-                    return false;
-                });
+        it("should set areSectionsEnabled to true when RoomList.showSections is enabled", () => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName: string) => {
+                if (settingName === "RoomList.showSections") return true;
+                return false;
+            });
 
-                vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
-                expect(vm.getSnapshot().canCreateSection).toBe(expectedCanCreateSection);
-                expect(vm.getSnapshot().useComposeIcon).toBe(expectedUseComposeIcon);
-            },
-        );
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
+            expect(vm.getSnapshot().areSectionsEnabled).toBe(true);
+        });
+
+        it("should update areSectionsEnabled when RoomList.showSections setting changes", () => {
+            let watchCallback: () => void = () => {};
+            jest.spyOn(SettingsStore, "watchSetting").mockImplementation((settingName, _roomId, callback) => {
+                if (settingName === "RoomList.showSections") watchCallback = callback as () => void;
+                return "watcher-id";
+            });
+
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
+            expect(vm.getSnapshot().areSectionsEnabled).toBe(false);
+
+            // Enable sections
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName: string) => {
+                if (settingName === "RoomList.showSections") return true;
+                return false;
+            });
+            watchCallback();
+
+            expect(vm.getSnapshot().areSectionsEnabled).toBe(true);
+        });
+
+        it("should set displaySectionReleaseAnnouncement to true when sections feature is enabled and announcement is active", () => {
+            jest.spyOn(ReleaseAnnouncementStore.instance, "getReleaseAnnouncement").mockReturnValue(
+                "room_list_section",
+            );
+
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
+            expect(vm.getSnapshot().displaySectionReleaseAnnouncement).toBe(true);
+        });
     });
 
     describe("event listeners", () => {
         it.each([UPDATE_SELECTED_SPACE, UPDATE_HOME_BEHAVIOUR])(
             "should update snapshot when %s event is emitted",
             (event) => {
-                jest.spyOn(SpaceStore.instance, "activeSpace", "get").mockReturnValue(MetaSpace.Home);
-                jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(null);
+                jest.spyOn(sdkContext.spaceStore, "activeSpace", "get").mockReturnValue(MetaSpace.Home);
+                jest.spyOn(sdkContext.spaceStore, "activeSpaceRoom", "get").mockReturnValue(null);
 
-                vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+                vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
 
-                jest.spyOn(SpaceStore.instance, "activeSpace", "get").mockReturnValue(mockSpace.roomId);
-                jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(mockSpace);
-                SpaceStore.instance.emit(event);
+                jest.spyOn(sdkContext.spaceStore, "activeSpace", "get").mockReturnValue(mockSpace.roomId);
+                jest.spyOn(sdkContext.spaceStore, "activeSpaceRoom", "get").mockReturnValue(mockSpace);
+                sdkContext.spaceStore.emit(event);
 
                 expect(vm.getSnapshot().title).toBe(mockSpace.roomId);
             },
         );
 
         it("should update snapshot when space name changes", () => {
-            jest.spyOn(SpaceStore.instance, "activeSpace", "get").mockReturnValue(mockSpace.roomId);
-            jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(mockSpace);
+            jest.spyOn(sdkContext.spaceStore, "activeSpace", "get").mockReturnValue(mockSpace.roomId);
+            jest.spyOn(sdkContext.spaceStore, "activeSpaceRoom", "get").mockReturnValue(mockSpace);
 
-            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
 
             mockSpace.name = "new name";
             mockSpace.emit(RoomEvent.Name, mockSpace);
@@ -211,20 +231,20 @@ describe("RoomListHeaderViewModel", () => {
 
     describe("actions", () => {
         beforeEach(() => {
-            jest.spyOn(SpaceStore.instance, "activeSpace", "get").mockReturnValue(mockSpace.roomId);
-            jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(mockSpace);
+            jest.spyOn(sdkContext.spaceStore, "activeSpace", "get").mockReturnValue(mockSpace.roomId);
+            jest.spyOn(sdkContext.spaceStore, "activeSpaceRoom", "get").mockReturnValue(mockSpace);
         });
 
         it("should fire CreateChat action when createChatRoom is called", () => {
             const fireSpy = jest.spyOn(defaultDispatcher, "fire");
-            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
 
             vm.createChatRoom(new Event("click"));
             expect(fireSpy).toHaveBeenCalledWith(Action.CreateChat);
         });
 
         it("should call createRoom with active space when in a space", () => {
-            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
             vm.createRoom(new Event("click"));
 
             expect(createRoom).toHaveBeenCalledWith(mockSpace);
@@ -236,16 +256,16 @@ describe("RoomListHeaderViewModel", () => {
                 return false;
             });
 
-            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
             vm.createVideoRoom();
             expect(showCreateNewRoom).toHaveBeenCalledWith(mockSpace, RoomType.ElementVideo);
         });
 
         it("should use UnstableCall type when element_call_video_rooms is enabled", () => {
-            jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(null);
+            jest.spyOn(sdkContext.spaceStore, "activeSpaceRoom", "get").mockReturnValue(null);
 
             const dispatchSpy = jest.spyOn(defaultDispatcher, "dispatch");
-            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
             vm.createVideoRoom();
 
             expect(dispatchSpy).toHaveBeenCalledWith({
@@ -256,7 +276,7 @@ describe("RoomListHeaderViewModel", () => {
 
         it("should dispatch ViewRoom action when openSpaceHome is called", () => {
             const dispatchSpy = jest.spyOn(defaultDispatcher, "dispatch");
-            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
             vm.openSpaceHome();
 
             expect(dispatchSpy).toHaveBeenCalledWith({
@@ -267,21 +287,21 @@ describe("RoomListHeaderViewModel", () => {
         });
 
         it("should show space invite dialog when inviteInSpace is called", () => {
-            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
             vm.inviteInSpace();
 
             expect(showSpaceInvite).toHaveBeenCalledWith(mockSpace);
         });
 
         it("should show space preferences dialog when openSpacePreferences is called", () => {
-            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
             vm.openSpacePreferences();
 
             expect(showSpacePreferences).toHaveBeenCalledWith(mockSpace);
         });
 
         it("should show space settings dialog when openSpaceSettings is called", () => {
-            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
             vm.openSpaceSettings();
 
             expect(showSpaceSettings).toHaveBeenCalledWith(mockSpace);
@@ -293,7 +313,7 @@ describe("RoomListHeaderViewModel", () => {
             ["unread-first" as const, SortingAlgorithm.Unread],
         ])("should resort when sort is called with '%s'", (option, expectedAlgorithm) => {
             const resortSpy = jest.spyOn(RoomListStoreV3.instance, "resort").mockImplementation(jest.fn());
-            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
             vm.sort(option);
             expect(resortSpy).toHaveBeenCalledWith(expectedAlgorithm);
         });
@@ -304,7 +324,7 @@ describe("RoomListHeaderViewModel", () => {
             );
             PosthogTrackers.trackRoomListSortingAlgorithmChange = jest.fn();
 
-            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
             jest.spyOn(RoomListStoreV3.instance, "resort").mockImplementation(jest.fn());
             vm.sort("unread-first");
 
@@ -318,7 +338,7 @@ describe("RoomListHeaderViewModel", () => {
             const createSectionSpy = jest
                 .spyOn(RoomListStoreV3.instance, "createSection")
                 .mockResolvedValue("element.io.section.work");
-            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
             vm.createSection();
             expect(createSectionSpy).toHaveBeenCalled();
         });
@@ -326,7 +346,7 @@ describe("RoomListHeaderViewModel", () => {
         describe("collapseOrExpandSections", () => {
             it("should dispatch RoomListCollapseAllSections when collapseSections is not 'expand'", () => {
                 const fireSpy = jest.spyOn(defaultDispatcher, "fire");
-                vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+                vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
 
                 vm.collapseOrExpandSections();
 
@@ -335,7 +355,7 @@ describe("RoomListHeaderViewModel", () => {
 
             it("should dispatch RoomListExpandAllSections when collapseSections is 'expand'", () => {
                 const fireSpy = jest.spyOn(defaultDispatcher, "fire");
-                vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+                vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
 
                 // Drive the VM into the "expand" state by simulating all sections collapsed
                 defaultDispatcher.dispatch(
@@ -354,7 +374,7 @@ describe("RoomListHeaderViewModel", () => {
 
         describe("RoomListSectionsCollapseStateChanged handling", () => {
             it("should set collapseSections to 'expand' when collapseSections is collapse", () => {
-                vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+                vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
 
                 defaultDispatcher.dispatch(
                     {
@@ -368,7 +388,7 @@ describe("RoomListHeaderViewModel", () => {
             });
 
             it("should set collapseSections to 'collapse' when collapseSections is expand", () => {
-                vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+                vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
 
                 defaultDispatcher.dispatch(
                     {
@@ -382,7 +402,7 @@ describe("RoomListHeaderViewModel", () => {
             });
 
             it("should set collapseSections to undefined when collapseSections is undefined", () => {
-                vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+                vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
 
                 // First drive it into a non-undefined state
                 defaultDispatcher.dispatch(
@@ -413,7 +433,7 @@ describe("RoomListHeaderViewModel", () => {
             });
             const setValueSpy = jest.spyOn(SettingsStore, "setValue").mockImplementation(jest.fn());
 
-            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: SpaceStore.instance });
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
             expect(vm.getSnapshot().isMessagePreviewEnabled).toBe(true);
 
             vm.toggleMessagePreview();
@@ -421,5 +441,14 @@ describe("RoomListHeaderViewModel", () => {
             expect(setValueSpy).toHaveBeenCalledWith("RoomList.showMessagePreview", null, expect.anything(), false);
             expect(vm.getSnapshot().isMessagePreviewEnabled).toBe(false);
         });
+
+        it("should call nextReleaseAnnouncement and set displaySectionReleaseAnnouncement to false when closeSectionReleaseAnnouncement is called", () => {
+            vm = new RoomListHeaderViewModel({ matrixClient, spaceStore: sdkContext.spaceStore });
+
+            vm.closeSectionReleaseAnnouncement();
+
+            expect(ReleaseAnnouncementStore.instance.nextReleaseAnnouncement).toHaveBeenCalled();
+            expect(vm.getSnapshot().displaySectionReleaseAnnouncement).toBe(false);
+        });
     });
 });
diff --git a/apps/web/test/viewmodels/room-list/RoomListItemViewModel-test.tsx b/apps/web/test/viewmodels/room-list/RoomListItemViewModel-test.ts
similarity index 95%
rename from apps/web/test/viewmodels/room-list/RoomListItemViewModel-test.tsx
rename to apps/web/test/viewmodels/room-list/RoomListItemViewModel-test.ts
index f88848a1e7..87cc7eabc9 100644
--- a/apps/web/test/viewmodels/room-list/RoomListItemViewModel-test.tsx
+++ b/apps/web/test/viewmodels/room-list/RoomListItemViewModel-test.ts
@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import EventEmitter from "events";
+import EventEmitter from "node:events";
 import {
     type MatrixClient,
     type MatrixEvent,
@@ -30,8 +30,9 @@ import { Action } from "../../../src/dispatcher/actions";
 import { CallStore } from "../../../src/stores/CallStore";
 import { CallEvent, type Call } from "../../../src/models/Call";
 import { RoomListItemViewModel } from "../../../src/viewmodels/room-list/RoomListItemViewModel";
-import RoomListStoreV3, { CHATS_TAG } from "../../../src/stores/room-list-v3/RoomListStoreV3";
+import RoomListStoreV3 from "../../../src/stores/room-list-v3/RoomListStoreV3";
 import * as tagRoomModule from "../../../src/utils/room/tagRoom";
+import { CHATS_TAG } from "../../../src/stores/room-list-v3/section";
 
 jest.mock("../../../src/viewmodels/room-list/utils", () => ({
     hasAccessToOptionsMenu: jest.fn().mockReturnValue(true),
@@ -79,8 +80,10 @@ describe("RoomListItemViewModel", () => {
         jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
             if (setting === "RoomList.showMessagePreview") return false;
             if (setting === "RoomList.OrderedCustomSections") return [];
+            if (setting === "RoomList.CustomSectionData") return {};
             return false;
         });
+        jest.spyOn(SettingsStore, "setValue").mockResolvedValue(undefined);
         jest.spyOn(SettingsStore, "watchSetting").mockImplementation(() => "watcher-id");
 
         jest.spyOn(MessagePreviewStore.instance, "getPreviewForRoom").mockResolvedValue(null);
@@ -514,20 +517,6 @@ describe("RoomListItemViewModel", () => {
         });
     });
 
-    describe("canMoveToSection", () => {
-        it.each([
-            [true, true],
-            [false, false],
-        ])("should be %s when feature_room_list_sections is %s", (featureEnabled, expected) => {
-            jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
-                if (setting === "feature_room_list_sections") return featureEnabled;
-                return false;
-            });
-            viewModel = new RoomListItemViewModel({ room, client: matrixClient });
-            expect(viewModel.getSnapshot().canMoveToSection).toBe(expected);
-        });
-    });
-
     describe("Actions", () => {
         it("should dispatch view room action on openRoom", () => {
             viewModel = new RoomListItemViewModel({ room, client: matrixClient });
@@ -636,10 +625,6 @@ describe("RoomListItemViewModel", () => {
         });
 
         it("should include sections from orderedSectionTags excluding CHATS_TAG, favourite, and low priority", () => {
-            jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
-                if (setting === "feature_room_list_sections") return true;
-                return false;
-            });
             viewModel = new RoomListItemViewModel({ room, client: matrixClient });
 
             const sections = viewModel.getSnapshot().sections;
@@ -648,10 +633,7 @@ describe("RoomListItemViewModel", () => {
 
         it("should mark the room current section as selected", () => {
             room.tags = { [customTag]: { order: 0 } };
-            jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
-                if (setting === "feature_room_list_sections") return true;
-                return false;
-            });
+
             viewModel = new RoomListItemViewModel({ room, client: matrixClient });
 
             const sections = viewModel.getSnapshot().sections;
@@ -660,7 +642,6 @@ describe("RoomListItemViewModel", () => {
 
         it("should use custom section name from CustomSectionData", () => {
             jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
-                if (setting === "feature_room_list_sections") return true;
                 if (setting === "RoomList.CustomSectionData")
                     return { [customTag]: { name: "My Custom Section", tag: customTag } };
                 return false;
@@ -677,10 +658,6 @@ describe("RoomListItemViewModel", () => {
                 if (setting === "RoomList.OrderedCustomSections") watchCallback = callback;
                 return "watcher-id";
             });
-            jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
-                if (setting === "feature_room_list_sections") return true;
-                return false;
-            });
 
             viewModel = new RoomListItemViewModel({ room, client: matrixClient });
             expect(viewModel.getSnapshot().sections).toHaveLength(1);
@@ -695,6 +672,36 @@ describe("RoomListItemViewModel", () => {
 
             expect(viewModel.getSnapshot().sections.map((s) => s.tag)).toEqual([]);
         });
+
+        it("should set areSectionsEnabled to true when RoomList.showSections is enabled", () => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
+                if (setting === "RoomList.showSections") return true;
+                return false;
+            });
+
+            viewModel = new RoomListItemViewModel({ room, client: matrixClient });
+            expect(viewModel.getSnapshot().areSectionsEnabled).toBe(true);
+        });
+
+        it("should update areSectionsEnabled when RoomList.showSections setting changes", () => {
+            let watchCallback: CallbackFn<"RoomList.showSections"> = () => {};
+            jest.spyOn(SettingsStore, "watchSetting").mockImplementation((setting, _room, callback) => {
+                if (setting === "RoomList.showSections") watchCallback = callback;
+                return "watcher-id";
+            });
+
+            viewModel = new RoomListItemViewModel({ room, client: matrixClient });
+            expect(viewModel.getSnapshot().areSectionsEnabled).toBe(false);
+
+            // Enable sections
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
+                if (setting === "RoomList.showSections") return true;
+                return false;
+            });
+            watchCallback("RoomList.showSections", null, null as any, null, null);
+
+            expect(viewModel.getSnapshot().areSectionsEnabled).toBe(true);
+        });
     });
 
     describe("Cleanup", () => {
diff --git a/apps/web/test/viewmodels/room-list/RoomListSearchViewModel-test.ts b/apps/web/test/viewmodels/room-list/RoomListSearchViewModel-test.ts
index ac0eb0775a..971ff655e6 100644
--- a/apps/web/test/viewmodels/room-list/RoomListSearchViewModel-test.ts
+++ b/apps/web/test/viewmodels/room-list/RoomListSearchViewModel-test.ts
@@ -13,6 +13,7 @@ import { shouldShowComponent } from "../../../src/customisations/helpers/UICompo
 import defaultDispatcher from "../../../src/dispatcher/dispatcher";
 import { Action } from "../../../src/dispatcher/actions";
 import LegacyCallHandler, { LegacyCallHandlerEvent } from "../../../src/LegacyCallHandler";
+import { TestSDKContext } from "../../unit-tests/TestSDKContext.ts";
 
 jest.mock("../../../src/customisations/helpers/UIComponents", () => ({
     shouldShowComponent: jest.fn(),
@@ -23,9 +24,12 @@ jest.mock("../../../src/PosthogTrackers", () => ({
 }));
 
 describe("RoomListSearchViewModel", () => {
+    const context = new TestSDKContext();
+
     beforeEach(() => {
         mocked(shouldShowComponent).mockReturnValue(true);
-        jest.spyOn(LegacyCallHandler.instance, "getSupportsPstnProtocol").mockReturnValue(false);
+        context._LegacyCallHandler = new LegacyCallHandler(context);
+        jest.spyOn(context._LegacyCallHandler, "getSupportsPstnProtocol").mockReturnValue(false);
     });
 
     afterEach(() => {
@@ -35,35 +39,50 @@ describe("RoomListSearchViewModel", () => {
     describe("snapshot", () => {
         it("should show explore button in Home space when UIComponent.ExploreRooms is enabled", () => {
             mocked(shouldShowComponent).mockReturnValue(true);
-            const vm = new RoomListSearchViewModel({ activeSpace: MetaSpace.Home });
+            const vm = new RoomListSearchViewModel({
+                activeSpace: MetaSpace.Home,
+                legacyCallHandler: context.legacyCallHandler,
+            });
 
             expect(vm.getSnapshot().displayExploreButton).toBe(true);
         });
 
         it("should hide explore button when not in Home space", () => {
             mocked(shouldShowComponent).mockReturnValue(true);
-            const vm = new RoomListSearchViewModel({ activeSpace: MetaSpace.VideoRooms });
+            const vm = new RoomListSearchViewModel({
+                activeSpace: MetaSpace.VideoRooms,
+                legacyCallHandler: context.legacyCallHandler,
+            });
 
             expect(vm.getSnapshot().displayExploreButton).toBe(false);
         });
 
         it("should hide explore button when UIComponent.ExploreRooms is disabled", () => {
             mocked(shouldShowComponent).mockReturnValue(false);
-            const vm = new RoomListSearchViewModel({ activeSpace: MetaSpace.Home });
+            const vm = new RoomListSearchViewModel({
+                activeSpace: MetaSpace.Home,
+                legacyCallHandler: context.legacyCallHandler,
+            });
 
             expect(vm.getSnapshot().displayExploreButton).toBe(false);
         });
 
         it("should show dial button when PSTN protocol is supported", () => {
-            jest.spyOn(LegacyCallHandler.instance, "getSupportsPstnProtocol").mockReturnValue(true);
-            const vm = new RoomListSearchViewModel({ activeSpace: MetaSpace.Home });
+            jest.spyOn(context.legacyCallHandler, "getSupportsPstnProtocol").mockReturnValue(true);
+            const vm = new RoomListSearchViewModel({
+                activeSpace: MetaSpace.Home,
+                legacyCallHandler: context.legacyCallHandler,
+            });
 
             expect(vm.getSnapshot().displayDialButton).toBe(true);
         });
 
         it("should hide dial button when PSTN protocol is not supported", () => {
-            jest.spyOn(LegacyCallHandler.instance, "getSupportsPstnProtocol").mockReturnValue(false);
-            const vm = new RoomListSearchViewModel({ activeSpace: MetaSpace.Home });
+            jest.spyOn(context.legacyCallHandler, "getSupportsPstnProtocol").mockReturnValue(false);
+            const vm = new RoomListSearchViewModel({
+                activeSpace: MetaSpace.Home,
+                legacyCallHandler: context.legacyCallHandler,
+            });
 
             expect(vm.getSnapshot().displayDialButton).toBe(false);
         });
@@ -72,7 +91,10 @@ describe("RoomListSearchViewModel", () => {
     describe("actions", () => {
         it("should fire OpenSpotlight action when onSearchClick is called", () => {
             const fireSpy = jest.spyOn(defaultDispatcher, "fire");
-            const vm = new RoomListSearchViewModel({ activeSpace: MetaSpace.Home });
+            const vm = new RoomListSearchViewModel({
+                activeSpace: MetaSpace.Home,
+                legacyCallHandler: context.legacyCallHandler,
+            });
 
             vm.onSearchClick();
             expect(fireSpy).toHaveBeenCalledWith(Action.OpenSpotlight);
@@ -80,7 +102,10 @@ describe("RoomListSearchViewModel", () => {
 
         it("should fire OpenDialPad action when onDialPadClick is called", () => {
             const fireSpy = jest.spyOn(defaultDispatcher, "fire");
-            const vm = new RoomListSearchViewModel({ activeSpace: MetaSpace.Home });
+            const vm = new RoomListSearchViewModel({
+                activeSpace: MetaSpace.Home,
+                legacyCallHandler: context.legacyCallHandler,
+            });
 
             vm.onDialPadClick();
             expect(fireSpy).toHaveBeenCalledWith(Action.OpenDialPad);
@@ -88,7 +113,10 @@ describe("RoomListSearchViewModel", () => {
 
         it("should fire ViewRoomDirectory action and track interaction when onExploreClick is called", () => {
             const fireSpy = jest.spyOn(defaultDispatcher, "fire");
-            const vm = new RoomListSearchViewModel({ activeSpace: MetaSpace.Home });
+            const vm = new RoomListSearchViewModel({
+                activeSpace: MetaSpace.Home,
+                legacyCallHandler: context.legacyCallHandler,
+            });
 
             const mockEvent = {} as React.MouseEvent<HTMLButtonElement>;
             vm.onExploreClick(mockEvent);
@@ -98,14 +126,17 @@ describe("RoomListSearchViewModel", () => {
     });
 
     it("should update snapshot when PSTN protocol support changes", () => {
-        jest.spyOn(LegacyCallHandler.instance, "getSupportsPstnProtocol").mockReturnValue(false);
-        const vm = new RoomListSearchViewModel({ activeSpace: MetaSpace.Home });
+        jest.spyOn(context.legacyCallHandler, "getSupportsPstnProtocol").mockReturnValue(false);
+        const vm = new RoomListSearchViewModel({
+            activeSpace: MetaSpace.Home,
+            legacyCallHandler: context.legacyCallHandler,
+        });
 
         expect(vm.getSnapshot().displayDialButton).toBe(false);
 
         // Simulate PSTN protocol support change
-        jest.spyOn(LegacyCallHandler.instance, "getSupportsPstnProtocol").mockReturnValue(true);
-        LegacyCallHandler.instance.emit(LegacyCallHandlerEvent.ProtocolSupport);
+        jest.spyOn(context.legacyCallHandler, "getSupportsPstnProtocol").mockReturnValue(true);
+        context.legacyCallHandler.emit(LegacyCallHandlerEvent.ProtocolSupport);
 
         expect(vm.getSnapshot().displayDialButton).toBe(true);
 
diff --git a/apps/web/test/viewmodels/room-list/RoomListSectionHeaderViewModel-test.ts b/apps/web/test/viewmodels/room-list/RoomListSectionHeaderViewModel-test.ts
index 000bbddd61..76fcf14e59 100644
--- a/apps/web/test/viewmodels/room-list/RoomListSectionHeaderViewModel-test.ts
+++ b/apps/web/test/viewmodels/room-list/RoomListSectionHeaderViewModel-test.ts
@@ -6,29 +6,44 @@
  */
 
 import { type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
+import { CallType } from "matrix-js-sdk/src/webrtc/call";
 
 import { RoomListSectionHeaderViewModel } from "../../../src/viewmodels/room-list/RoomListSectionHeaderViewModel";
 import { RoomNotificationState } from "../../../src/stores/notifications/RoomNotificationState";
 import { RoomNotificationStateStore } from "../../../src/stores/notifications/RoomNotificationStateStore";
 import { NotificationStateEvents } from "../../../src/stores/notifications/NotificationState";
+import { CallStore } from "../../../src/stores/CallStore";
+import { type Call } from "../../../src/models/Call";
 import { createTestClient, mkRoom } from "../../test-utils";
 import SettingsStore from "../../../src/settings/SettingsStore";
-import RoomListStoreV3, { CHATS_TAG } from "../../../src/stores/room-list-v3/RoomListStoreV3";
+import { SettingLevel } from "../../../src/settings/SettingLevel";
+import RoomListStoreV3 from "../../../src/stores/room-list-v3/RoomListStoreV3";
 import { DefaultTagID } from "../../../src/stores/room-list-v3/skip-list/tag";
+import { CHATS_TAG, type SectionExpansionState } from "../../../src/stores/room-list-v3/section";
 
 describe("RoomListSectionHeaderViewModel", () => {
     let onToggleExpanded: jest.Mock;
     let matrixClient: MatrixClient;
+    // In-memory backing store shared between the getValue/setValue mocks so that
+    // persisted expansion state round-trips within a test.
+    let sectionExpansionState: SectionExpansionState;
 
     beforeEach(() => {
         onToggleExpanded = jest.fn();
         matrixClient = createTestClient();
+        sectionExpansionState = {};
         jest.spyOn(SettingsStore, "watchSetting").mockReturnValue("watcher-id");
         jest.spyOn(SettingsStore, "unwatchSetting").mockReturnValue(undefined);
         jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
             if (setting === "RoomList.OrderedCustomSections") return [];
+            if (setting === "RoomList.SectionExpansionState") return sectionExpansionState;
             return null;
         });
+        jest.spyOn(SettingsStore, "setValue").mockImplementation(async (setting, _roomId, _level, value) => {
+            if (setting === "RoomList.SectionExpansionState") {
+                sectionExpansionState = value as SectionExpansionState;
+            }
+        });
     });
 
     afterEach(() => {
@@ -96,6 +111,52 @@ describe("RoomListSectionHeaderViewModel", () => {
         expect(vm.isExpanded).toBe(false);
     });
 
+    it("should initialize expanded state from the persisted setting", () => {
+        sectionExpansionState = { "!space:server": { "m.favourite": false } };
+
+        const vm = new RoomListSectionHeaderViewModel({
+            tag: "m.favourite",
+            title: "Favourites",
+            spaceId: "!space:server",
+            onToggleExpanded,
+        });
+
+        expect(vm.getSnapshot().isExpanded).toBe(false);
+    });
+
+    it("should persist the expanded state at the device level on click", () => {
+        const setValue = jest.spyOn(SettingsStore, "setValue");
+        const vm = new RoomListSectionHeaderViewModel({
+            tag: "m.favourite",
+            title: "Favourites",
+            spaceId: "!space:server",
+            onToggleExpanded,
+        });
+
+        vm.onClick();
+
+        expect(setValue).toHaveBeenCalledWith("RoomList.SectionExpansionState", null, SettingLevel.DEVICE, {
+            "!space:server": { "m.favourite": false },
+        });
+        expect(sectionExpansionState).toEqual({ "!space:server": { "m.favourite": false } });
+    });
+
+    it("should persist the expanded state at the device level when set via the setter", () => {
+        const setValue = jest.spyOn(SettingsStore, "setValue");
+        const vm = new RoomListSectionHeaderViewModel({
+            tag: "m.favourite",
+            title: "Favourites",
+            spaceId: "!space:server",
+            onToggleExpanded,
+        });
+
+        vm.isExpanded = false;
+
+        expect(setValue).toHaveBeenCalledWith("RoomList.SectionExpansionState", null, SettingLevel.DEVICE, {
+            "!space:server": { "m.favourite": false },
+        });
+    });
+
     describe("displaySectionMenu", () => {
         it.each([
             [DefaultTagID.Favourite, false],
@@ -113,6 +174,23 @@ describe("RoomListSectionHeaderViewModel", () => {
         });
     });
 
+    describe("canBeReordered", () => {
+        it.each([
+            [DefaultTagID.Favourite, false],
+            [DefaultTagID.LowPriority, false],
+            [CHATS_TAG, true],
+            ["element.io.section.custom", true],
+        ])("should be %s for tag %s", (tag, expected) => {
+            const vm = new RoomListSectionHeaderViewModel({
+                tag,
+                title: "Section",
+                spaceId: "!space:server",
+                onToggleExpanded,
+            });
+            expect(vm.getSnapshot().canBeReordered).toBe(expected);
+        });
+    });
+
     describe("onCustomSectionDataChange", () => {
         let watchCallback: () => void;
 
@@ -153,6 +231,19 @@ describe("RoomListSectionHeaderViewModel", () => {
 
             expect(vm.getSnapshot().title).toBe("My Section");
         });
+
+        it("should not update title when tag is not a custom section tag", () => {
+            const vm = new RoomListSectionHeaderViewModel({
+                tag: "m.favourite",
+                title: "Favourites",
+                spaceId: "!space:server",
+                onToggleExpanded,
+            });
+
+            watchCallback();
+
+            expect(vm.getSnapshot().title).toBe("Favourites");
+        });
     });
 
     describe("editSection", () => {
@@ -216,11 +307,16 @@ describe("RoomListSectionHeaderViewModel", () => {
         let notificationState: RoomNotificationState;
 
         beforeEach(() => {
+            jest.useFakeTimers();
             room = mkRoom(matrixClient, "!room:server");
             notificationState = new RoomNotificationState(room, false);
             jest.spyOn(RoomNotificationStateStore.instance, "getRoomState").mockReturnValue(notificationState);
         });
 
+        afterEach(() => {
+            jest.useRealTimers();
+        });
+
         it("should set isUnread to false when no rooms have notifications", () => {
             const vm = new RoomListSectionHeaderViewModel({
                 tag: "m.favourite",
@@ -293,9 +389,234 @@ describe("RoomListSectionHeaderViewModel", () => {
             jest.spyOn(notificationState, "hasAnyNotificationOrActivity", "get").mockReturnValue(true);
             notificationState.emit(NotificationStateEvents.Update);
 
+            jest.advanceTimersByTime(200);
             expect(vm.getSnapshot().isUnread).toBe(true);
         });
 
+        describe("notification decoration", () => {
+            it("should expose an empty decoration when no room has notifications", () => {
+                const vm = new RoomListSectionHeaderViewModel({
+                    tag: "m.favourite",
+                    title: "Favourites",
+                    spaceId: "!space:server",
+                    onToggleExpanded,
+                });
+                vm.setRooms([room]);
+
+                expect(vm.getSnapshot().notification).toEqual(
+                    expect.objectContaining({
+                        hasAnyNotificationOrActivity: false,
+                        isMention: false,
+                        isNotification: false,
+                        isUnsentMessage: false,
+                        isActivityNotification: false,
+                        count: 0,
+                    }),
+                );
+            });
+
+            it("should not show the activity dot for an activity-only section", () => {
+                jest.spyOn(notificationState, "hasAnyNotificationOrActivity", "get").mockReturnValue(true);
+                jest.spyOn(notificationState, "isActivityNotification", "get").mockReturnValue(true);
+
+                const vm = new RoomListSectionHeaderViewModel({
+                    tag: "m.favourite",
+                    title: "Favourites",
+                    spaceId: "!space:server",
+                    onToggleExpanded,
+                });
+                vm.setRooms([room]);
+
+                // Bold, but no badge to display
+                expect(vm.getSnapshot().isUnread).toBe(true);
+                expect(vm.getSnapshot().notification).toEqual(
+                    expect.objectContaining({
+                        hasAnyNotificationOrActivity: false,
+                        isActivityNotification: false,
+                    }),
+                );
+            });
+
+            it("should merge mentions, notifications and counts across rooms", () => {
+                const room2 = mkRoom(matrixClient, "!room2:server");
+                const notificationState2 = new RoomNotificationState(room2, false);
+
+                jest.spyOn(RoomNotificationStateStore.instance, "getRoomState")
+                    .mockReturnValueOnce(notificationState)
+                    .mockReturnValue(notificationState2);
+
+                jest.spyOn(notificationState, "isMention", "get").mockReturnValue(true);
+                jest.spyOn(notificationState, "count", "get").mockReturnValue(3);
+                jest.spyOn(notificationState, "hasUnreadCount", "get").mockReturnValue(true);
+
+                jest.spyOn(notificationState2, "isNotification", "get").mockReturnValue(true);
+                jest.spyOn(notificationState2, "count", "get").mockReturnValue(9);
+                jest.spyOn(notificationState2, "hasUnreadCount", "get").mockReturnValue(true);
+
+                const vm = new RoomListSectionHeaderViewModel({
+                    tag: "m.favourite",
+                    title: "Favourites",
+                    spaceId: "!space:server",
+                    onToggleExpanded,
+                });
+                vm.setRooms([room, room2]);
+
+                expect(vm.getSnapshot().notification).toEqual(
+                    expect.objectContaining({
+                        hasAnyNotificationOrActivity: true,
+                        isMention: true,
+                        isNotification: true,
+                        hasUnreadCount: true,
+                        count: 12,
+                        isActivityNotification: false,
+                    }),
+                );
+            });
+
+            it("should surface an unsent message from any room", () => {
+                jest.spyOn(notificationState, "isUnsentMessage", "get").mockReturnValue(true);
+
+                const vm = new RoomListSectionHeaderViewModel({
+                    tag: "m.favourite",
+                    title: "Favourites",
+                    spaceId: "!space:server",
+                    onToggleExpanded,
+                });
+                vm.setRooms([room]);
+
+                expect(vm.getSnapshot().notification).toEqual(
+                    expect.objectContaining({
+                        hasAnyNotificationOrActivity: true,
+                        isUnsentMessage: true,
+                    }),
+                );
+            });
+
+            it("should aggregate an invitation from any room", () => {
+                jest.spyOn(notificationState, "invited", "get").mockReturnValue(true);
+
+                const vm = new RoomListSectionHeaderViewModel({
+                    tag: "m.favourite",
+                    title: "Favourites",
+                    spaceId: "!space:server",
+                    onToggleExpanded,
+                });
+                vm.setRooms([room]);
+
+                expect(vm.getSnapshot().notification).toEqual(
+                    expect.objectContaining({
+                        hasAnyNotificationOrActivity: true,
+                        invited: true,
+                    }),
+                );
+            });
+
+            it("should aggregate an active call, preferring video over voice", () => {
+                const room2 = mkRoom(matrixClient, "!room2:server");
+                const notificationState2 = new RoomNotificationState(room2, false);
+
+                jest.spyOn(RoomNotificationStateStore.instance, "getRoomState")
+                    .mockReturnValueOnce(notificationState)
+                    .mockReturnValue(notificationState2);
+
+                const voiceCall = {
+                    participants: new Map([["@a:server", new Set(["DEVICE"])]]),
+                    callType: CallType.Voice,
+                    on: jest.fn(),
+                    off: jest.fn(),
+                } as unknown as Call;
+                const videoCall = {
+                    participants: new Map([["@b:server", new Set(["DEVICE"])]]),
+                    callType: CallType.Video,
+                    on: jest.fn(),
+                    off: jest.fn(),
+                } as unknown as Call;
+                jest.spyOn(CallStore.instance, "getCall").mockImplementation((roomId) =>
+                    roomId === room.roomId ? voiceCall : videoCall,
+                );
+
+                const vm = new RoomListSectionHeaderViewModel({
+                    tag: "m.favourite",
+                    title: "Favourites",
+                    spaceId: "!space:server",
+                    onToggleExpanded,
+                });
+                vm.setRooms([room, room2]);
+
+                expect(vm.getSnapshot().notification).toEqual(
+                    expect.objectContaining({
+                        hasAnyNotificationOrActivity: true,
+                        callType: "video",
+                    }),
+                );
+            });
+
+            it("should ignore a call without participants", () => {
+                const call = {
+                    participants: new Map(),
+                    callType: CallType.Video,
+                    on: jest.fn(),
+                    off: jest.fn(),
+                } as unknown as Call;
+                jest.spyOn(CallStore.instance, "getCall").mockReturnValue(call);
+
+                const vm = new RoomListSectionHeaderViewModel({
+                    tag: "m.favourite",
+                    title: "Favourites",
+                    spaceId: "!space:server",
+                    onToggleExpanded,
+                });
+                vm.setRooms([room]);
+
+                expect(vm.getSnapshot().notification?.callType).toBeUndefined();
+            });
+
+            it("should show a notification without a count badge for a mark-as-unread room", () => {
+                // "Mark as unread" sets level=Notification with count=0 (no real notification events).
+                jest.spyOn(notificationState, "hasAnyNotificationOrActivity", "get").mockReturnValue(true);
+                jest.spyOn(notificationState, "isNotification", "get").mockReturnValue(true);
+                jest.spyOn(notificationState, "count", "get").mockReturnValue(0);
+                jest.spyOn(notificationState, "hasUnreadCount", "get").mockReturnValue(false);
+
+                const vm = new RoomListSectionHeaderViewModel({
+                    tag: "m.favourite",
+                    title: "Favourites",
+                    spaceId: "!space:server",
+                    onToggleExpanded,
+                });
+                vm.setRooms([room]);
+
+                expect(vm.getSnapshot().isUnread).toBe(true);
+                expect(vm.getSnapshot().notification).toEqual(
+                    expect.objectContaining({
+                        hasAnyNotificationOrActivity: true,
+                        isNotification: true,
+                        hasUnreadCount: false,
+                        // The || 1 fallback gives a count of 1 even though no real count exists
+                        count: 1,
+                    }),
+                );
+            });
+
+            it("should update the decoration when a notification state update event fires", () => {
+                const vm = new RoomListSectionHeaderViewModel({
+                    tag: "m.favourite",
+                    title: "Favourites",
+                    spaceId: "!space:server",
+                    onToggleExpanded,
+                });
+                vm.setRooms([room]);
+
+                expect(vm.getSnapshot().notification?.isMention).toBe(false);
+
+                jest.spyOn(notificationState, "isMention", "get").mockReturnValue(true);
+                notificationState.emit(NotificationStateEvents.Update);
+
+                jest.advanceTimersByTime(200);
+                expect(vm.getSnapshot().notification?.isMention).toBe(true);
+            });
+        });
+
         it("should unsubscribe from all notification states on dispose", () => {
             jest.spyOn(notificationState, "off");
 
diff --git a/apps/web/test/viewmodels/room-list/RoomListViewModel-test.tsx b/apps/web/test/viewmodels/room-list/RoomListViewModel-test.ts
similarity index 51%
rename from apps/web/test/viewmodels/room-list/RoomListViewModel-test.tsx
rename to apps/web/test/viewmodels/room-list/RoomListViewModel-test.ts
index c3fc431646..39ba3cd00a 100644
--- a/apps/web/test/viewmodels/room-list/RoomListViewModel-test.tsx
+++ b/apps/web/test/viewmodels/room-list/RoomListViewModel-test.ts
@@ -9,18 +9,42 @@ import { type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
 import { mocked } from "jest-mock";
 import { waitFor } from "jest-matrix-react";
 
-import { createTestClient, flushPromises, flushPromisesWithFakeTimers, mkStubRoom, stubClient } from "../../test-utils";
-import RoomListStoreV3, { CHATS_TAG, RoomListStoreV3Event } from "../../../src/stores/room-list-v3/RoomListStoreV3";
-import SpaceStore from "../../../src/stores/spaces/SpaceStore";
+import {
+    createTestClient,
+    flushPromises,
+    flushPromisesWithFakeTimers,
+    mkStubRoom,
+    stubClient,
+    TestSDKContext,
+} from "../../test-utils";
+import RoomListStoreV3, { RoomListStoreV3Event } from "../../../src/stores/room-list-v3/RoomListStoreV3";
 import { FilterEnum } from "../../../src/stores/room-list-v3/skip-list/filters";
 import dispatcher from "../../../src/dispatcher/dispatcher";
 import { Action } from "../../../src/dispatcher/actions";
-import { SdkContextClass } from "../../../src/contexts/SDKContext";
+import { SDKContextClass } from "../../../src/contexts/SDKContextClass";
 import DMRoomMap from "../../../src/utils/DMRoomMap";
 import { RoomListViewModel } from "../../../src/viewmodels/room-list/RoomListViewModel";
 import { hasCreateRoomRights } from "../../../src/viewmodels/room-list/utils";
 import { DefaultTagID } from "../../../src/stores/room-list-v3/skip-list/tag";
 import SettingsStore from "../../../src/settings/SettingsStore";
+import { tagRoom } from "../../../src/utils/room/tagRoom";
+import { getSectionTagForRoom } from "../../../src/utils/room/getSectionTagForRoom";
+import {
+    CHATS_TAG,
+    CUSTOM_SECTION_TAG_PREFIX,
+    type SectionExpansionState,
+} from "../../../src/stores/room-list-v3/section";
+import { MetaSpace } from "../../../src/stores/spaces";
+import { RoomNotificationStateStore } from "../../../src/stores/notifications/RoomNotificationStateStore";
+import { type RoomNotificationState } from "../../../src/stores/notifications/RoomNotificationState";
+
+jest.mock("../../../src/utils/room/tagRoom", () => ({
+    tagRoom: jest.fn(),
+}));
+
+jest.mock("../../../src/utils/room/getSectionTagForRoom", () => ({
+    getSectionTagForRoom: jest.fn().mockReturnValue(null),
+}));
 
 jest.mock("../../../src/viewmodels/room-list/utils", () => ({
     hasCreateRoomRights: jest.fn().mockReturnValue(false),
@@ -30,13 +54,34 @@ jest.mock("../../../src/viewmodels/room-list/utils", () => ({
 
 describe("RoomListViewModel", () => {
     let matrixClient: MatrixClient;
+    let sdkContext: TestSDKContext;
     let room1: Room;
     let room2: Room;
     let room3: Room;
     let viewModel: RoomListViewModel;
+    // In-memory backing store for the persisted section expansion setting, reset each test so
+    // collapse state does not leak between tests and writes round-trip synchronously.
+    let sectionExpansionState: SectionExpansionState;
 
     beforeEach(() => {
         matrixClient = createTestClient();
+
+        sectionExpansionState = {};
+        const realGetValue = SettingsStore.getValue.bind(SettingsStore);
+        jest.spyOn(SettingsStore, "getValue").mockImplementation((setting, roomId, excludeDefault) => {
+            if (setting === "RoomList.SectionExpansionState") return sectionExpansionState;
+            return realGetValue(setting, roomId, excludeDefault);
+        });
+        const realSetValue = SettingsStore.setValue.bind(SettingsStore);
+        jest.spyOn(SettingsStore, "setValue").mockImplementation(async (setting, roomId, level, value) => {
+            if (setting === "RoomList.SectionExpansionState") {
+                sectionExpansionState = value as SectionExpansionState;
+                return;
+            }
+            return realSetValue(setting, roomId, level, value);
+        });
+        sdkContext = new TestSDKContext();
+        sdkContext._client = matrixClient;
         room1 = mkStubRoom("!room1:server", "Room 1", matrixClient);
         room2 = mkStubRoom("!room2:server", "Room 2", matrixClient);
         room3 = mkStubRoom("!room3:server", "Room 3", matrixClient);
@@ -53,8 +98,8 @@ describe("RoomListViewModel", () => {
         });
 
         jest.spyOn(RoomListStoreV3.instance, "isLoadingRooms", "get").mockReturnValue(false);
-        jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(null);
-        jest.spyOn(SdkContextClass.instance.roomViewStore, "getRoomId").mockReturnValue(null);
+        jest.spyOn(SDKContextClass.instance.spaceStore, "activeSpaceRoom", "get").mockReturnValue(null);
+        jest.spyOn(SDKContextClass.instance.roomViewStore, "getRoomId").mockReturnValue(null);
 
         mocked(hasCreateRoomRights).mockReturnValue(false);
     });
@@ -66,7 +111,11 @@ describe("RoomListViewModel", () => {
 
     describe("Initialization", () => {
         it("should initialize with correct snapshot", () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
             const snapshot = viewModel.getSnapshot();
             expect(snapshot.sections[0].roomIds).toEqual(["!room1:server", "!room2:server", "!room3:server"]);
@@ -83,15 +132,24 @@ describe("RoomListViewModel", () => {
                 sections: [{ tag: CHATS_TAG, rooms: [] }],
             });
 
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
             expect(viewModel.getSnapshot().sections).toEqual([]);
             expect(viewModel.getSnapshot().isRoomListEmpty).toBe(true);
+            expect(viewModel.getSnapshot().isFlatList).toBe(true);
         });
 
         it("should set canCreateRoom based on user rights", () => {
             mocked(hasCreateRoomRights).mockReturnValue(true);
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
             expect(viewModel.getSnapshot().canCreateRoom).toBe(true);
         });
@@ -99,7 +157,11 @@ describe("RoomListViewModel", () => {
 
     describe("Room list updates", () => {
         it("should update room list when ListsUpdate event fires", () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
             const newRoom = mkStubRoom("!room4:server", "Room 4", matrixClient);
             jest.spyOn(RoomListStoreV3.instance, "getSortedRoomsInActiveSpace").mockReturnValue({
@@ -119,7 +181,11 @@ describe("RoomListViewModel", () => {
 
         it("should update loading state when ListsLoaded event fires", () => {
             jest.spyOn(RoomListStoreV3.instance, "isLoadingRooms", "get").mockReturnValue(true);
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
             expect(viewModel.getSnapshot().isLoadingRooms).toBe(true);
 
@@ -130,7 +196,11 @@ describe("RoomListViewModel", () => {
 
         // This test ensures that the room list item vms are preserved when the room list is changing
         it("should keep existing view model when ListsUpdate event fires", () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
             // Create view model for room1
             const room1VM = viewModel.getRoomItemViewModel("!room1:server");
@@ -145,7 +215,11 @@ describe("RoomListViewModel", () => {
 
     describe("Space switching", () => {
         it("should update room list when space changes", () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
             const spaceRoomList = [room1, room2];
 
@@ -154,7 +228,9 @@ describe("RoomListViewModel", () => {
                 sections: [{ tag: CHATS_TAG, rooms: spaceRoomList }],
             });
 
-            jest.spyOn(SpaceStore.instance, "getLastSelectedRoomIdForSpace").mockReturnValue("!room1:server");
+            jest.spyOn(SDKContextClass.instance.spaceStore, "getLastSelectedRoomIdForSpace").mockReturnValue(
+                "!room1:server",
+            );
 
             RoomListStoreV3.instance.emit(RoomListStoreV3Event.ListsUpdate);
 
@@ -163,7 +239,11 @@ describe("RoomListViewModel", () => {
         });
 
         it("should clear view models when space changes", () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
             // Get view models for visible rooms
             const vm1 = viewModel.getRoomItemViewModel("!room1:server")!;
@@ -185,7 +265,11 @@ describe("RoomListViewModel", () => {
         });
 
         it("should clear roomsMap when space changes and repopulate with new rooms", () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
             const newSpaceRoom = mkStubRoom("!spaceroom:server", "Space Room", matrixClient);
 
@@ -193,7 +277,7 @@ describe("RoomListViewModel", () => {
                 spaceId: "!space:server",
                 sections: [{ tag: CHATS_TAG, rooms: [newSpaceRoom] }],
             });
-            jest.spyOn(SpaceStore.instance, "getLastSelectedRoomIdForSpace").mockReturnValue(null);
+            jest.spyOn(SDKContextClass.instance.spaceStore, "getLastSelectedRoomIdForSpace").mockReturnValue(null);
 
             RoomListStoreV3.instance.emit(RoomListStoreV3Event.ListsUpdate);
 
@@ -206,9 +290,13 @@ describe("RoomListViewModel", () => {
 
     describe("Active room tracking", () => {
         it("should update active room index when room is selected", async () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
-            jest.spyOn(SdkContextClass.instance.roomViewStore, "getRoomId").mockReturnValue("!room2:server");
+            jest.spyOn(SDKContextClass.instance.roomViewStore, "getRoomId").mockReturnValue("!room2:server");
 
             dispatcher.dispatch({
                 action: Action.ActiveRoomChanged,
@@ -222,9 +310,13 @@ describe("RoomListViewModel", () => {
         });
 
         it("should return undefined active room index when no room is selected", async () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
-            jest.spyOn(SdkContextClass.instance.roomViewStore, "getRoomId").mockReturnValue(null);
+            jest.spyOn(SDKContextClass.instance.roomViewStore, "getRoomId").mockReturnValue(null);
 
             dispatcher.dispatch({
                 action: Action.ActiveRoomChanged,
@@ -240,10 +332,14 @@ describe("RoomListViewModel", () => {
 
     describe("Sticky room behavior", () => {
         it("should keep selected room at same index when room list updates", async () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
             // Select room at index 1
-            jest.spyOn(SdkContextClass.instance.roomViewStore, "getRoomId").mockReturnValue("!room2:server");
+            jest.spyOn(SDKContextClass.instance.roomViewStore, "getRoomId").mockReturnValue("!room2:server");
             dispatcher.dispatch({
                 action: Action.ActiveRoomChanged,
                 newRoomId: "!room2:server",
@@ -266,10 +362,14 @@ describe("RoomListViewModel", () => {
         });
 
         it("should not apply sticky behavior when user changes rooms", async () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
             // Select room at index 1
-            jest.spyOn(SdkContextClass.instance.roomViewStore, "getRoomId").mockReturnValue("!room2:server");
+            jest.spyOn(SDKContextClass.instance.roomViewStore, "getRoomId").mockReturnValue("!room2:server");
             dispatcher.dispatch({
                 action: Action.ActiveRoomChanged,
                 newRoomId: "!room2:server",
@@ -278,7 +378,7 @@ describe("RoomListViewModel", () => {
             await flushPromises();
 
             // User switches to room3
-            jest.spyOn(SdkContextClass.instance.roomViewStore, "getRoomId").mockReturnValue("!room3:server");
+            jest.spyOn(SDKContextClass.instance.roomViewStore, "getRoomId").mockReturnValue("!room3:server");
             dispatcher.dispatch({
                 action: Action.ActiveRoomChanged,
                 oldRoomId: "!room2:server",
@@ -292,7 +392,11 @@ describe("RoomListViewModel", () => {
 
     describe("Filters", () => {
         it("should toggle filter on", () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
             expect(viewModel.getSnapshot().activeFilterId).toBeUndefined();
 
@@ -309,7 +413,11 @@ describe("RoomListViewModel", () => {
         });
 
         it("should toggle filter off", () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
             // Turn filter on
             jest.spyOn(RoomListStoreV3.instance, "getSortedRoomsInActiveSpace").mockReturnValue({
@@ -335,11 +443,98 @@ describe("RoomListViewModel", () => {
                 "!room3:server",
             ]);
         });
+
+        describe("Favourites and Low Priority filters (RoomList.showSections)", () => {
+            function mockShowSections(showSections: boolean): void {
+                jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
+                    if (setting === "RoomList.showSections") return showSections;
+                    if (setting === "RoomList.CustomSectionData") return {};
+                    if (setting === "RoomList.OrderedCustomSections") return [];
+                    if (setting === "RoomList.SectionExpansionState") return {};
+                    return undefined as any;
+                });
+            }
+
+            it("hides the Favourites and Low Priority filters when sections are enabled", () => {
+                mockShowSections(true);
+                viewModel = new RoomListViewModel({
+                    client: matrixClient,
+                    roomViewStore: sdkContext.roomViewStore,
+                    spaceStore: sdkContext.spaceStore,
+                });
+
+                const { filterIds } = viewModel.getSnapshot();
+                expect(filterIds).not.toContain("favourite");
+                expect(filterIds).not.toContain("low_priority");
+            });
+
+            it("shows the Favourites and Low Priority filters when sections are disabled", () => {
+                mockShowSections(false);
+                viewModel = new RoomListViewModel({
+                    client: matrixClient,
+                    roomViewStore: sdkContext.roomViewStore,
+                    spaceStore: sdkContext.spaceStore,
+                });
+
+                const { filterIds } = viewModel.getSnapshot();
+                expect(filterIds).toContain("favourite");
+                expect(filterIds).toContain("low_priority");
+            });
+
+            it("recomputes the filters and clears the active filter when the setting changes", () => {
+                let showSections = false;
+                let watchCallback: () => void = () => {};
+                jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => {
+                    if (setting === "RoomList.showSections") return showSections;
+                    if (setting === "RoomList.CustomSectionData") return {};
+                    if (setting === "RoomList.OrderedCustomSections") return [];
+                    if (setting === "RoomList.SectionExpansionState") return {};
+                    return undefined as any;
+                });
+                jest.spyOn(SettingsStore, "watchSetting").mockImplementation((setting, _room, callback) => {
+                    if (setting === "RoomList.showSections") watchCallback = callback as () => void;
+                    return "watcher-id";
+                });
+
+                viewModel = new RoomListViewModel({
+                    client: matrixClient,
+                    roomViewStore: sdkContext.roomViewStore,
+                    spaceStore: sdkContext.spaceStore,
+                });
+                expect(viewModel.getSnapshot().filterIds).toContain("favourite");
+
+                // Activate the Favourites filter
+                jest.spyOn(RoomListStoreV3.instance, "getSortedRoomsInActiveSpace").mockReturnValue({
+                    spaceId: "home",
+                    sections: [{ tag: CHATS_TAG, rooms: [room1] }],
+                    filterKeys: [FilterEnum.FavouriteFilter],
+                });
+                viewModel.onToggleFilter("favourite");
+                expect(viewModel.getSnapshot().activeFilterId).toBe("favourite");
+
+                // Enabling sections hides the Favourites filter and resets the active filter
+                showSections = true;
+                jest.spyOn(RoomListStoreV3.instance, "getSortedRoomsInActiveSpace").mockReturnValue({
+                    spaceId: "home",
+                    sections: [{ tag: CHATS_TAG, rooms: [room1, room2, room3] }],
+                });
+                watchCallback();
+
+                const snapshot = viewModel.getSnapshot();
+                expect(snapshot.filterIds).not.toContain("favourite");
+                expect(snapshot.filterIds).not.toContain("low_priority");
+                expect(snapshot.activeFilterId).toBeUndefined();
+            });
+        });
     });
 
     describe("Room item view models", () => {
         it("should create room item view model on demand", () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
             const itemViewModel = viewModel.getRoomItemViewModel("!room1:server");
 
@@ -348,7 +543,11 @@ describe("RoomListViewModel", () => {
         });
 
         it("should reuse existing room item view model", () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
             const itemViewModel1 = viewModel.getRoomItemViewModel("!room1:server");
             const itemViewModel2 = viewModel.getRoomItemViewModel("!room1:server");
@@ -357,13 +556,21 @@ describe("RoomListViewModel", () => {
         });
 
         it("should return undefined for non-existent room", () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
             expect(viewModel.getRoomItemViewModel("!nonexistent:server")).toBeUndefined();
         });
 
         it("should not throw when requesting view model for a room removed from the list but still in roomsMap", () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
             // Normal list update removes room2 from the list
             jest.spyOn(RoomListStoreV3.instance, "getSortedRoomsInActiveSpace").mockReturnValue({
@@ -377,7 +584,11 @@ describe("RoomListViewModel", () => {
         });
 
         it("should return undefined for a room from old space after space change", () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
             const spaceRoom = mkStubRoom("!newroom:server", "New Room", matrixClient);
 
@@ -386,7 +597,7 @@ describe("RoomListViewModel", () => {
                 spaceId: "!space:server",
                 sections: [{ tag: CHATS_TAG, rooms: [spaceRoom] }],
             });
-            jest.spyOn(SpaceStore.instance, "getLastSelectedRoomIdForSpace").mockReturnValue(null);
+            jest.spyOn(SDKContextClass.instance.spaceStore, "getLastSelectedRoomIdForSpace").mockReturnValue(null);
 
             RoomListStoreV3.instance.emit(RoomListStoreV3Event.ListsUpdate);
 
@@ -394,7 +605,11 @@ describe("RoomListViewModel", () => {
         });
 
         it("should recover when roomsMap is stale but roomsResult has the room", () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
             // Manually clear roomsMap to simulate stale cache, but keep roomsResult intact
             (viewModel as any).roomsMap.clear();
@@ -404,7 +619,11 @@ describe("RoomListViewModel", () => {
         });
 
         it("should dispose view models for rooms no longer visible", () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
             const vm1 = viewModel.getRoomItemViewModel("!room1:server")!;
             const vm2 = viewModel.getRoomItemViewModel("!room2:server")!;
@@ -427,7 +646,11 @@ describe("RoomListViewModel", () => {
 
     describe("Room creation", () => {
         it("should dispatch CreateChat action when createChatRoom is called", () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
             const dispatchSpy = jest.spyOn(dispatcher, "fire");
 
@@ -437,7 +660,11 @@ describe("RoomListViewModel", () => {
         });
 
         it("should dispatch CreateRoom action without parent space", () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
             const dispatchSpy = jest.spyOn(dispatcher, "dispatch");
 
@@ -450,9 +677,13 @@ describe("RoomListViewModel", () => {
 
         it("should dispatch CreateRoom action with parent space", () => {
             const spaceRoom = mkStubRoom("!space:server", "Space", matrixClient);
-            jest.spyOn(SpaceStore.instance, "activeSpaceRoom", "get").mockReturnValue(spaceRoom);
+            jest.spyOn(SDKContextClass.instance.spaceStore, "activeSpaceRoom", "get").mockReturnValue(spaceRoom);
 
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
             const dispatchSpy = jest.spyOn(dispatcher, "dispatch");
 
@@ -465,20 +696,6 @@ describe("RoomListViewModel", () => {
         });
     });
 
-    describe("notifyCollapseState", () => {
-        it("should dispatch collapseSections=undefined when feature_room_list_sections is disabled", () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
-
-            const dispatchSpy = jest.spyOn(dispatcher, "dispatch");
-            RoomListStoreV3.instance.emit(RoomListStoreV3Event.ListsUpdate);
-
-            expect(dispatchSpy).toHaveBeenCalledWith({
-                action: Action.RoomListSectionsCollapseStateChanged,
-                collapseSections: undefined,
-            });
-        });
-    });
-
     describe("Keyboard navigation (ViewRoomDelta)", () => {
         beforeEach(() => {
             // stubClient sets up MatrixClientPeg which is needed when ViewRoom action is dispatched
@@ -486,9 +703,13 @@ describe("RoomListViewModel", () => {
         });
 
         it("should navigate to next room when delta is 1", async () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
-            jest.spyOn(SdkContextClass.instance.roomViewStore, "getRoomId").mockReturnValue("!room1:server");
+            jest.spyOn(SDKContextClass.instance.roomViewStore, "getRoomId").mockReturnValue("!room1:server");
 
             const dispatchSpy = jest.spyOn(dispatcher, "dispatch");
 
@@ -509,9 +730,13 @@ describe("RoomListViewModel", () => {
         });
 
         it("should navigate to previous room when delta is -1", async () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
-            jest.spyOn(SdkContextClass.instance.roomViewStore, "getRoomId").mockReturnValue("!room2:server");
+            jest.spyOn(SDKContextClass.instance.roomViewStore, "getRoomId").mockReturnValue("!room2:server");
 
             const dispatchSpy = jest.spyOn(dispatcher, "dispatch");
 
@@ -532,9 +757,13 @@ describe("RoomListViewModel", () => {
         });
 
         it("should wrap around to last room when navigating backwards from first room", async () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
-            jest.spyOn(SdkContextClass.instance.roomViewStore, "getRoomId").mockReturnValue("!room1:server");
+            jest.spyOn(SDKContextClass.instance.roomViewStore, "getRoomId").mockReturnValue("!room1:server");
 
             const dispatchSpy = jest.spyOn(dispatcher, "dispatch");
 
@@ -555,9 +784,13 @@ describe("RoomListViewModel", () => {
         });
 
         it("should not navigate when current room is not found", async () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
-            jest.spyOn(SdkContextClass.instance.roomViewStore, "getRoomId").mockReturnValue("!unknown:server");
+            jest.spyOn(SDKContextClass.instance.roomViewStore, "getRoomId").mockReturnValue("!unknown:server");
 
             const dispatchSpy = jest.spyOn(dispatcher, "dispatch");
             dispatchSpy.mockClear();
@@ -579,9 +812,13 @@ describe("RoomListViewModel", () => {
         });
 
         it("should not navigate when no room is selected", async () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
-            jest.spyOn(SdkContextClass.instance.roomViewStore, "getRoomId").mockReturnValue(null);
+            jest.spyOn(SDKContextClass.instance.roomViewStore, "getRoomId").mockReturnValue(null);
 
             const dispatchSpy = jest.spyOn(dispatcher, "dispatch");
             dispatchSpy.mockClear();
@@ -612,7 +849,11 @@ describe("RoomListViewModel", () => {
         });
 
         it("should dispose all room item view models on dispose", () => {
-            viewModel = new RoomListViewModel({ client: matrixClient });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
 
             const vm1 = viewModel.getRoomItemViewModel("!room1:server")!;
             const vm2 = viewModel.getRoomItemViewModel("!room2:server")!;
@@ -628,19 +869,31 @@ describe("RoomListViewModel", () => {
 
         describe("Toast", () => {
             it("should show toast when SectionCreated event fires", () => {
-                viewModel = new RoomListViewModel({ client: matrixClient });
+                viewModel = new RoomListViewModel({
+                    client: matrixClient,
+                    spaceStore: SDKContextClass.instance.spaceStore,
+                    roomViewStore: SDKContextClass.instance.roomViewStore,
+                });
                 RoomListStoreV3.instance.emit(RoomListStoreV3Event.SectionCreated);
                 expect(viewModel.getSnapshot().toast).toBe("section_created");
             });
 
             it("should show toast when RoomTagged event fires", () => {
-                viewModel = new RoomListViewModel({ client: matrixClient });
+                viewModel = new RoomListViewModel({
+                    client: matrixClient,
+                    spaceStore: SDKContextClass.instance.spaceStore,
+                    roomViewStore: SDKContextClass.instance.roomViewStore,
+                });
                 RoomListStoreV3.instance.emit(RoomListStoreV3Event.RoomTagged);
                 expect(viewModel.getSnapshot().toast).toBe("chat_moved");
             });
 
             it("should clear toast when closeToast is called", () => {
-                viewModel = new RoomListViewModel({ client: matrixClient });
+                viewModel = new RoomListViewModel({
+                    client: matrixClient,
+                    spaceStore: SDKContextClass.instance.spaceStore,
+                    roomViewStore: SDKContextClass.instance.roomViewStore,
+                });
 
                 RoomListStoreV3.instance.emit(RoomListStoreV3Event.SectionCreated);
                 expect(viewModel.getSnapshot().toast).toBe("section_created");
@@ -650,7 +903,11 @@ describe("RoomListViewModel", () => {
             });
 
             it("should auto-close toast after 15 seconds", () => {
-                viewModel = new RoomListViewModel({ client: matrixClient });
+                viewModel = new RoomListViewModel({
+                    client: matrixClient,
+                    spaceStore: SDKContextClass.instance.spaceStore,
+                    roomViewStore: SDKContextClass.instance.roomViewStore,
+                });
 
                 RoomListStoreV3.instance.emit(RoomListStoreV3Event.SectionCreated);
                 expect(viewModel.getSnapshot().toast).toBe("section_created");
@@ -660,7 +917,11 @@ describe("RoomListViewModel", () => {
             });
 
             it("should reset the auto-close timer when a new section is created", () => {
-                viewModel = new RoomListViewModel({ client: matrixClient });
+                viewModel = new RoomListViewModel({
+                    client: matrixClient,
+                    spaceStore: SDKContextClass.instance.spaceStore,
+                    roomViewStore: SDKContextClass.instance.roomViewStore,
+                });
 
                 RoomListStoreV3.instance.emit(RoomListStoreV3Event.SectionCreated);
                 jest.advanceTimersByTime(10 * 1000);
@@ -675,9 +936,49 @@ describe("RoomListViewModel", () => {
                 jest.advanceTimersByTime(5 * 1000);
                 expect(viewModel.getSnapshot().toast).toBeUndefined();
             });
+
+            /** Make only `room3` report an unread count, so it is the unread room below the fold. */
+            const mockRoom3Unread = (): void => {
+                jest.spyOn(RoomNotificationStateStore.instance, "getRoomState").mockImplementation(
+                    (room) => ({ hasUnreadCount: room === room3 }) as unknown as RoomNotificationState,
+                );
+            };
+
+            it("should show the unread-activity toast when an unread room is below the fold", () => {
+                mockRoom3Unread();
+                viewModel = new RoomListViewModel({
+                    client: matrixClient,
+                    spaceStore: SDKContextClass.instance.spaceStore,
+                    roomViewStore: SDKContextClass.instance.roomViewStore,
+                });
+
+                // room1/room2 visible, room3 (unread) scrolled below the fold.
+                viewModel.updateVisibleFold(1);
+
+                expect(viewModel.getSnapshot().toast).toBe("unread_activity");
+            });
+
+            it("should prefer the event toast over the unread-activity toast, restoring it on auto-close", () => {
+                mockRoom3Unread();
+                viewModel = new RoomListViewModel({
+                    client: matrixClient,
+                    spaceStore: SDKContextClass.instance.spaceStore,
+                    roomViewStore: SDKContextClass.instance.roomViewStore,
+                });
+                viewModel.updateVisibleFold(1);
+                expect(viewModel.getSnapshot().toast).toBe("unread_activity");
+
+                // A transient event toast takes precedence over the persistent unread-activity toast…
+                RoomListStoreV3.instance.emit(RoomListStoreV3Event.RoomTagged);
+                expect(viewModel.getSnapshot().toast).toBe("chat_moved");
+
+                // …and once it auto-dismisses, the unread-activity toast returns.
+                jest.advanceTimersByTime(15 * 1000);
+                expect(viewModel.getSnapshot().toast).toBe("unread_activity");
+            });
         });
 
-        describe("Sections (feature_room_list_sections)", () => {
+        describe("Sections", () => {
             let favRoom1: Room;
             let favRoom2: Room;
             let lowPriorityRoom: Room;
@@ -685,11 +986,6 @@ describe("RoomListViewModel", () => {
             let regularRoom2: Room;
 
             beforeEach(() => {
-                jest.spyOn(SettingsStore, "getValue").mockImplementation((setting: string) => {
-                    if (setting === "feature_room_list_sections") return true;
-                    return false;
-                });
-
                 favRoom1 = mkStubRoom("!fav1:server", "Fav 1", matrixClient);
                 favRoom2 = mkStubRoom("!fav2:server", "Fav 2", matrixClient);
                 lowPriorityRoom = mkStubRoom("!low1:server", "Low 1", matrixClient);
@@ -707,7 +1003,11 @@ describe("RoomListViewModel", () => {
             });
 
             it("should initialize with multiple sections", () => {
-                viewModel = new RoomListViewModel({ client: matrixClient });
+                viewModel = new RoomListViewModel({
+                    client: matrixClient,
+                    spaceStore: SDKContextClass.instance.spaceStore,
+                    roomViewStore: SDKContextClass.instance.roomViewStore,
+                });
 
                 const snapshot = viewModel.getSnapshot();
                 expect(snapshot.sections).toHaveLength(3);
@@ -720,7 +1020,11 @@ describe("RoomListViewModel", () => {
             });
 
             it("should not be a flat list when multiple sections exist", () => {
-                viewModel = new RoomListViewModel({ client: matrixClient });
+                viewModel = new RoomListViewModel({
+                    client: matrixClient,
+                    spaceStore: SDKContextClass.instance.spaceStore,
+                    roomViewStore: SDKContextClass.instance.roomViewStore,
+                });
 
                 expect(viewModel.getSnapshot().isFlatList).toBe(false);
             });
@@ -735,15 +1039,43 @@ describe("RoomListViewModel", () => {
                     ],
                 });
 
-                viewModel = new RoomListViewModel({ client: matrixClient });
+                viewModel = new RoomListViewModel({
+                    client: matrixClient,
+                    spaceStore: SDKContextClass.instance.spaceStore,
+                    roomViewStore: SDKContextClass.instance.roomViewStore,
+                });
 
                 expect(viewModel.getSnapshot().isFlatList).toBe(true);
                 expect(viewModel.getSnapshot().sections).toHaveLength(1);
                 expect(viewModel.getSnapshot().sections[0].id).toBe(CHATS_TAG);
             });
 
+            it("should be a flat list when the room list is empty", () => {
+                jest.spyOn(RoomListStoreV3.instance, "getSortedRoomsInActiveSpace").mockReturnValue({
+                    spaceId: "home",
+                    sections: [
+                        { tag: DefaultTagID.Favourite, rooms: [] },
+                        { tag: CHATS_TAG, rooms: [] },
+                        { tag: DefaultTagID.LowPriority, rooms: [] },
+                    ],
+                });
+
+                viewModel = new RoomListViewModel({
+                    client: matrixClient,
+                    spaceStore: SDKContextClass.instance.spaceStore,
+                    roomViewStore: SDKContextClass.instance.roomViewStore,
+                });
+
+                expect(viewModel.getSnapshot().isFlatList).toBe(true);
+                expect(viewModel.getSnapshot().sections).toHaveLength(0);
+            });
+
             it("should exclude favourite and low_priority from filter list", () => {
-                viewModel = new RoomListViewModel({ client: matrixClient });
+                viewModel = new RoomListViewModel({
+                    client: matrixClient,
+                    spaceStore: SDKContextClass.instance.spaceStore,
+                    roomViewStore: SDKContextClass.instance.roomViewStore,
+                });
 
                 const snapshot = viewModel.getSnapshot();
                 expect(snapshot.filterIds).not.toContain("favourite");
@@ -763,7 +1095,11 @@ describe("RoomListViewModel", () => {
                     ],
                 });
 
-                viewModel = new RoomListViewModel({ client: matrixClient });
+                viewModel = new RoomListViewModel({
+                    client: matrixClient,
+                    spaceStore: SDKContextClass.instance.spaceStore,
+                    roomViewStore: SDKContextClass.instance.roomViewStore,
+                });
 
                 const snapshot = viewModel.getSnapshot();
                 expect(snapshot.sections).toHaveLength(1);
@@ -771,7 +1107,11 @@ describe("RoomListViewModel", () => {
             });
 
             it("should create section header view models on demand", () => {
-                viewModel = new RoomListViewModel({ client: matrixClient });
+                viewModel = new RoomListViewModel({
+                    client: matrixClient,
+                    spaceStore: SDKContextClass.instance.spaceStore,
+                    roomViewStore: SDKContextClass.instance.roomViewStore,
+                });
 
                 const headerVM = viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite);
                 expect(headerVM).toBeDefined();
@@ -780,7 +1120,11 @@ describe("RoomListViewModel", () => {
             });
 
             it("should reuse section header view models", () => {
-                viewModel = new RoomListViewModel({ client: matrixClient });
+                viewModel = new RoomListViewModel({
+                    client: matrixClient,
+                    spaceStore: SDKContextClass.instance.spaceStore,
+                    roomViewStore: SDKContextClass.instance.roomViewStore,
+                });
 
                 const headerVM1 = viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite);
                 const headerVM2 = viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite);
@@ -788,7 +1132,11 @@ describe("RoomListViewModel", () => {
             });
 
             it("should hide room IDs when a section is collapsed", () => {
-                viewModel = new RoomListViewModel({ client: matrixClient });
+                viewModel = new RoomListViewModel({
+                    client: matrixClient,
+                    spaceStore: SDKContextClass.instance.spaceStore,
+                    roomViewStore: SDKContextClass.instance.roomViewStore,
+                });
 
                 // Collapse the favourite section
                 const favHeader = viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite);
@@ -807,7 +1155,11 @@ describe("RoomListViewModel", () => {
             });
 
             it("should compute activeRoomIndex relative to visible rooms when a section is collapsed", async () => {
-                viewModel = new RoomListViewModel({ client: matrixClient });
+                viewModel = new RoomListViewModel({
+                    client: matrixClient,
+                    spaceStore: SDKContextClass.instance.spaceStore,
+                    roomViewStore: SDKContextClass.instance.roomViewStore,
+                });
 
                 // Collapse the favourite section (which has 2 rooms: fav1, fav2)
                 const favHeader = viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite);
@@ -815,7 +1167,7 @@ describe("RoomListViewModel", () => {
                 expect(favHeader.isExpanded).toBe(false);
 
                 // Select regularRoom1, which is the first room in the chats section
-                jest.spyOn(SdkContextClass.instance.roomViewStore, "getRoomId").mockReturnValue("!reg1:server");
+                jest.spyOn(SDKContextClass.instance.roomViewStore, "getRoomId").mockReturnValue("!reg1:server");
                 dispatcher.dispatch({
                     action: Action.ActiveRoomChanged,
                     newRoomId: "!reg1:server",
@@ -830,7 +1182,11 @@ describe("RoomListViewModel", () => {
             });
 
             it("should restore room IDs when a section is re-expanded", () => {
-                viewModel = new RoomListViewModel({ client: matrixClient });
+                viewModel = new RoomListViewModel({
+                    client: matrixClient,
+                    spaceStore: SDKContextClass.instance.spaceStore,
+                    roomViewStore: SDKContextClass.instance.roomViewStore,
+                });
 
                 const favHeader = viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite);
 
@@ -845,7 +1201,11 @@ describe("RoomListViewModel", () => {
             });
 
             it("should update sections when room list changes", () => {
-                viewModel = new RoomListViewModel({ client: matrixClient });
+                viewModel = new RoomListViewModel({
+                    client: matrixClient,
+                    spaceStore: SDKContextClass.instance.spaceStore,
+                    roomViewStore: SDKContextClass.instance.roomViewStore,
+                });
 
                 const newFav = mkStubRoom("!fav3:server", "Fav 3", matrixClient);
 
@@ -865,7 +1225,11 @@ describe("RoomListViewModel", () => {
             });
 
             it("should preserve section collapse state across list updates", () => {
-                viewModel = new RoomListViewModel({ client: matrixClient });
+                viewModel = new RoomListViewModel({
+                    client: matrixClient,
+                    spaceStore: SDKContextClass.instance.spaceStore,
+                    roomViewStore: SDKContextClass.instance.roomViewStore,
+                });
 
                 // Collapse favourites
                 const favHeader = viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite);
@@ -880,7 +1244,11 @@ describe("RoomListViewModel", () => {
             });
 
             it("should track section collapse state per space", () => {
-                viewModel = new RoomListViewModel({ client: matrixClient });
+                viewModel = new RoomListViewModel({
+                    client: matrixClient,
+                    spaceStore: SDKContextClass.instance.spaceStore,
+                    roomViewStore: SDKContextClass.instance.roomViewStore,
+                });
 
                 // Collapse favourites in the home space
                 const favHeader = viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite);
@@ -897,7 +1265,7 @@ describe("RoomListViewModel", () => {
                         { tag: DefaultTagID.LowPriority, rooms: [] },
                     ],
                 });
-                jest.spyOn(SpaceStore.instance, "getLastSelectedRoomIdForSpace").mockReturnValue(null);
+                jest.spyOn(SDKContextClass.instance.spaceStore, "getLastSelectedRoomIdForSpace").mockReturnValue(null);
 
                 RoomListStoreV3.instance.emit(RoomListStoreV3Event.ListsUpdate);
 
@@ -935,7 +1303,11 @@ describe("RoomListViewModel", () => {
             });
 
             it("should apply filters across all sections", () => {
-                viewModel = new RoomListViewModel({ client: matrixClient });
+                viewModel = new RoomListViewModel({
+                    client: matrixClient,
+                    spaceStore: SDKContextClass.instance.spaceStore,
+                    roomViewStore: SDKContextClass.instance.roomViewStore,
+                });
 
                 // Only favRoom1 is unread
                 jest.spyOn(RoomListStoreV3.instance, "getSortedRoomsInActiveSpace").mockReturnValue({
@@ -958,36 +1330,92 @@ describe("RoomListViewModel", () => {
                 expect(snapshot.sections[0].roomIds).toEqual(["!fav1:server"]);
             });
 
-            it("should expand collapsed sections that have results when a filter is toggled on", () => {
-                viewModel = new RoomListViewModel({ client: matrixClient });
+            describe("custom section visibility by originating space", () => {
+                const customTag = `${CUSTOM_SECTION_TAG_PREFIX}test-uuid` as const;
 
-                // Collapse the favourite section
-                const favHeader = viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite);
-                favHeader.onClick();
-                expect(favHeader.isExpanded).toBe(false);
-
-                // Toggle a filter that returns rooms in the favourite section
-                jest.spyOn(RoomListStoreV3.instance, "getSortedRoomsInActiveSpace").mockReturnValue({
-                    spaceId: "home",
-                    sections: [
-                        { tag: DefaultTagID.Favourite, rooms: [favRoom1] },
-                        { tag: CHATS_TAG, rooms: [] },
-                        { tag: DefaultTagID.LowPriority, rooms: [] },
-                    ],
-                    filterKeys: [FilterEnum.UnreadFilter],
+                beforeEach(() => {
+                    jest.spyOn(SDKContextClass.instance.spaceStore, "enabledMetaSpaces", "get").mockReturnValue([
+                        MetaSpace.Home,
+                    ]);
+                    jest.spyOn(SDKContextClass.instance.spaceStore, "spacePanelSpaces", "get").mockReturnValue([
+                        mkStubRoom("!space:server", "My Space", matrixClient),
+                    ]);
+                    jest.spyOn(SettingsStore, "getValue").mockImplementation((setting: string) => {
+                        if (setting === "RoomList.CustomSectionData")
+                            return {
+                                [customTag]: { tag: customTag, name: "My Section", spaceId: "!space:server" },
+                            };
+                        return false;
+                    });
                 });
-                viewModel.onToggleFilter("unread");
 
-                // The favourite section should be expanded and its rooms visible
-                expect(favHeader.isExpanded).toBe(true);
-                const snapshot = viewModel.getSnapshot();
-                const favSection = snapshot.sections.find((s) => s.id === DefaultTagID.Favourite);
-                expect(favSection!.roomIds).toEqual(["!fav1:server"]);
+                it("shows an empty custom section when viewing its originating space", () => {
+                    jest.spyOn(SettingsStore, "getValue").mockImplementation((setting: string) => {
+                        if (setting === "RoomList.CustomSectionData")
+                            return { [customTag]: { tag: customTag, name: "My Section", spaceId: MetaSpace.Home } };
+                        return false;
+                    });
+                    jest.spyOn(RoomListStoreV3.instance, "getSortedRoomsInActiveSpace").mockReturnValue({
+                        spaceId: MetaSpace.Home,
+                        sections: [
+                            { tag: customTag, rooms: [] },
+                            { tag: CHATS_TAG, rooms: [regularRoom1] },
+                        ],
+                    });
+
+                    viewModel = new RoomListViewModel({
+                        client: matrixClient,
+                        spaceStore: SDKContextClass.instance.spaceStore,
+                        roomViewStore: SDKContextClass.instance.roomViewStore,
+                    });
+
+                    expect(viewModel.getSnapshot().sections.some((s) => s.id === customTag)).toBe(true);
+                });
+
+                it("hides an empty custom section in a different space", () => {
+                    jest.spyOn(RoomListStoreV3.instance, "getSortedRoomsInActiveSpace").mockReturnValue({
+                        spaceId: MetaSpace.Home,
+                        sections: [
+                            { tag: customTag, rooms: [] },
+                            { tag: CHATS_TAG, rooms: [regularRoom1] },
+                        ],
+                    });
+
+                    viewModel = new RoomListViewModel({
+                        client: matrixClient,
+                        spaceStore: SDKContextClass.instance.spaceStore,
+                        roomViewStore: SDKContextClass.instance.roomViewStore,
+                    });
+
+                    expect(viewModel.getSnapshot().sections.some((s) => s.id === customTag)).toBe(false);
+                });
+
+                it("shows a non-empty custom section regardless of originating space", () => {
+                    jest.spyOn(RoomListStoreV3.instance, "getSortedRoomsInActiveSpace").mockReturnValue({
+                        spaceId: MetaSpace.Home,
+                        sections: [
+                            { tag: customTag, rooms: [regularRoom1] },
+                            { tag: CHATS_TAG, rooms: [regularRoom2] },
+                        ],
+                    });
+
+                    viewModel = new RoomListViewModel({
+                        client: matrixClient,
+                        spaceStore: SDKContextClass.instance.spaceStore,
+                        roomViewStore: SDKContextClass.instance.roomViewStore,
+                    });
+
+                    expect(viewModel.getSnapshot().sections.some((s) => s.id === customTag)).toBe(true);
+                });
             });
 
             describe("Collapse/expand all sections", () => {
                 it("should collapse all sections when Action.RoomListCollapseAllSections is dispatched", async () => {
-                    viewModel = new RoomListViewModel({ client: matrixClient });
+                    viewModel = new RoomListViewModel({
+                        client: matrixClient,
+                        spaceStore: SDKContextClass.instance.spaceStore,
+                        roomViewStore: SDKContextClass.instance.roomViewStore,
+                    });
 
                     const favHeader = viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite);
                     const chatsHeader = viewModel.getSectionHeaderViewModel(CHATS_TAG);
@@ -1005,7 +1433,11 @@ describe("RoomListViewModel", () => {
                 });
 
                 it("should expand all sections when Action.RoomListExpandAllSections is dispatched", async () => {
-                    viewModel = new RoomListViewModel({ client: matrixClient });
+                    viewModel = new RoomListViewModel({
+                        client: matrixClient,
+                        spaceStore: SDKContextClass.instance.spaceStore,
+                        roomViewStore: SDKContextClass.instance.roomViewStore,
+                    });
 
                     // Collapse first
                     const favHeader = viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite);
@@ -1026,7 +1458,11 @@ describe("RoomListViewModel", () => {
 
             describe("notifyCollapseState", () => {
                 it("should dispatch collapseSections=expand when all sections are expanded (default)", () => {
-                    viewModel = new RoomListViewModel({ client: matrixClient });
+                    viewModel = new RoomListViewModel({
+                        client: matrixClient,
+                        spaceStore: SDKContextClass.instance.spaceStore,
+                        roomViewStore: SDKContextClass.instance.roomViewStore,
+                    });
 
                     const dispatchSpy = jest.spyOn(dispatcher, "dispatch");
                     RoomListStoreV3.instance.emit(RoomListStoreV3Event.ListsUpdate);
@@ -1038,7 +1474,11 @@ describe("RoomListViewModel", () => {
                 });
 
                 it("should dispatch collapseSection=collapse when all sections are collapsed", () => {
-                    viewModel = new RoomListViewModel({ client: matrixClient });
+                    viewModel = new RoomListViewModel({
+                        client: matrixClient,
+                        spaceStore: SDKContextClass.instance.spaceStore,
+                        roomViewStore: SDKContextClass.instance.roomViewStore,
+                    });
 
                     // Collapse all sections
                     viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite).isExpanded = false;
@@ -1054,16 +1494,23 @@ describe("RoomListViewModel", () => {
                     });
                 });
 
-                it("should dispatch collapseSection=undefined when it is a flat list", () => {
+                it.each([
+                    { label: "flat list", chatsRooms: true },
+                    { label: "empty room list", chatsRooms: false },
+                ])("should dispatch collapseSection=undefined when it is a $label", ({ chatsRooms }) => {
                     jest.spyOn(RoomListStoreV3.instance, "getSortedRoomsInActiveSpace").mockReturnValue({
                         spaceId: "home",
                         sections: [
                             { tag: DefaultTagID.Favourite, rooms: [] },
-                            { tag: CHATS_TAG, rooms: [regularRoom1] },
+                            { tag: CHATS_TAG, rooms: chatsRooms ? [regularRoom1] : [] },
                             { tag: DefaultTagID.LowPriority, rooms: [] },
                         ],
                     });
-                    viewModel = new RoomListViewModel({ client: matrixClient });
+                    viewModel = new RoomListViewModel({
+                        client: matrixClient,
+                        spaceStore: SDKContextClass.instance.spaceStore,
+                        roomViewStore: SDKContextClass.instance.roomViewStore,
+                    });
 
                     const dispatchSpy = jest.spyOn(dispatcher, "dispatch");
                     RoomListStoreV3.instance.emit(RoomListStoreV3Event.ListsUpdate);
@@ -1077,10 +1524,14 @@ describe("RoomListViewModel", () => {
 
             it("should apply sticky room within the correct section", async () => {
                 stubClient();
-                viewModel = new RoomListViewModel({ client: matrixClient });
+                viewModel = new RoomListViewModel({
+                    client: matrixClient,
+                    spaceStore: SDKContextClass.instance.spaceStore,
+                    roomViewStore: SDKContextClass.instance.roomViewStore,
+                });
 
                 // Select favRoom1 (index 0 globally, index 0 in favourites section)
-                jest.spyOn(SdkContextClass.instance.roomViewStore, "getRoomId").mockReturnValue("!fav1:server");
+                jest.spyOn(SDKContextClass.instance.roomViewStore, "getRoomId").mockReturnValue("!fav1:server");
                 dispatcher.dispatch({
                     action: Action.ActiveRoomChanged,
                     newRoomId: "!fav1:server",
@@ -1106,6 +1557,227 @@ describe("RoomListViewModel", () => {
                 expect(snapshot.sections[0].roomIds[0]).toBe("!fav1:server");
                 expect(snapshot.roomListState.activeRoomIndex).toBe(0);
             });
+
+            describe("Drag and drop", () => {
+                beforeEach(() => {
+                    viewModel = new RoomListViewModel({
+                        client: matrixClient,
+                        spaceStore: SDKContextClass.instance.spaceStore,
+                        roomViewStore: SDKContextClass.instance.roomViewStore,
+                    });
+                    // Ensure section header VMs are created before tests that interact with them
+                    viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite);
+                    viewModel.getSectionHeaderViewModel(CHATS_TAG);
+                    viewModel.getSectionHeaderViewModel(DefaultTagID.LowPriority);
+                });
+
+                it("should delegate changeSectionOrder to RoomListStoreV3.reorderSection", async () => {
+                    const reorderSpy = jest
+                        .spyOn(RoomListStoreV3.instance, "reorderSection")
+                        .mockResolvedValue(undefined);
+
+                    await viewModel.changeSectionOrder(DefaultTagID.Favourite, CHATS_TAG);
+
+                    expect(reorderSpy).toHaveBeenCalledWith(DefaultTagID.Favourite, CHATS_TAG);
+                });
+
+                it("should scroll the moved section back into view after reordering", async () => {
+                    jest.spyOn(RoomListStoreV3.instance, "reorderSection").mockResolvedValue(undefined);
+
+                    await viewModel.changeSectionOrder(DefaultTagID.Favourite, CHATS_TAG);
+                    expect(viewModel.getSnapshot().roomListState.scrollToSectionTag).toBe(DefaultTagID.Favourite);
+                });
+
+                it("should collapse every section on drag start", () => {
+                    expect(viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite).isExpanded).toBe(true);
+
+                    viewModel.onSectionDragStart();
+
+                    expect(viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite).isExpanded).toBe(false);
+                    expect(viewModel.getSectionHeaderViewModel(CHATS_TAG).isExpanded).toBe(false);
+                    expect(viewModel.getSectionHeaderViewModel(DefaultTagID.LowPriority).isExpanded).toBe(false);
+
+                    for (const section of viewModel.getSnapshot().sections) {
+                        expect(section.roomIds).toEqual([]);
+                    }
+                });
+
+                it("should restore the pre-drag expansion state on drag end", () => {
+                    // Collapse Favourite before the drag; other sections remain expanded
+                    viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite).onClick();
+
+                    viewModel.onSectionDragStart();
+                    viewModel.onSectionDragEnd();
+
+                    expect(viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite).isExpanded).toBe(false);
+                    expect(viewModel.getSectionHeaderViewModel(CHATS_TAG).isExpanded).toBe(true);
+                    expect(viewModel.getSectionHeaderViewModel(DefaultTagID.LowPriority).isExpanded).toBe(true);
+
+                    const snapshot = viewModel.getSnapshot();
+                    expect(snapshot.sections.find((s) => s.id === DefaultTagID.Favourite)!.roomIds).toEqual([]);
+                    expect(snapshot.sections.find((s) => s.id === CHATS_TAG)!.roomIds).toEqual([
+                        "!reg1:server",
+                        "!reg2:server",
+                    ]);
+                    expect(snapshot.sections.find((s) => s.id === DefaultTagID.LowPriority)!.roomIds).toEqual([
+                        "!low1:server",
+                    ]);
+                });
+
+                it("should re-snapshot expansion state on each drag start", () => {
+                    // First cycle: Favourite is collapsed before the drag
+                    viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite).onClick();
+                    viewModel.onSectionDragStart();
+                    viewModel.onSectionDragEnd();
+
+                    // Between cycles: collapse CHATS_TAG as well
+                    viewModel.getSectionHeaderViewModel(CHATS_TAG).onClick();
+                    viewModel.onSectionDragStart();
+                    viewModel.onSectionDragEnd();
+
+                    // The second drag end must restore the state captured at the second drag start
+                    // (Favourite collapsed, CHATS_TAG collapsed, LowPriority expanded), not the first cycle's snapshot.
+                    expect(viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite).isExpanded).toBe(false);
+                    expect(viewModel.getSectionHeaderViewModel(CHATS_TAG).isExpanded).toBe(false);
+                    expect(viewModel.getSectionHeaderViewModel(DefaultTagID.LowPriority).isExpanded).toBe(true);
+                });
+
+                it("should be a no-op when drag end is called without drag start", () => {
+                    viewModel.onSectionDragEnd();
+
+                    expect(viewModel.getSectionHeaderViewModel(DefaultTagID.Favourite).isExpanded).toBe(true);
+                    expect(viewModel.getSectionHeaderViewModel(CHATS_TAG).isExpanded).toBe(true);
+                    expect(viewModel.getSectionHeaderViewModel(DefaultTagID.LowPriority).isExpanded).toBe(true);
+
+                    const snapshot = viewModel.getSnapshot();
+                    expect(snapshot.sections.find((s) => s.id === DefaultTagID.Favourite)!.roomIds).toEqual([
+                        "!fav1:server",
+                        "!fav2:server",
+                    ]);
+                    expect(snapshot.sections.find((s) => s.id === CHATS_TAG)!.roomIds).toEqual([
+                        "!reg1:server",
+                        "!reg2:server",
+                    ]);
+                    expect(snapshot.sections.find((s) => s.id === DefaultTagID.LowPriority)!.roomIds).toEqual([
+                        "!low1:server",
+                    ]);
+                });
+            });
+        });
+    });
+
+    describe("changeRoomSection", () => {
+        beforeEach(() => {
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                spaceStore: SDKContextClass.instance.spaceStore,
+                roomViewStore: SDKContextClass.instance.roomViewStore,
+            });
+            mocked(tagRoom).mockClear();
+        });
+
+        it("should call tagRoom with the room and target tag", () => {
+            jest.spyOn(matrixClient, "getRoom").mockReturnValue(room1);
+            mocked(getSectionTagForRoom).mockReturnValue(null);
+
+            viewModel.changeRoomSection(room1.roomId, DefaultTagID.Favourite);
+
+            expect(tagRoom).toHaveBeenCalledWith(room1, DefaultTagID.Favourite);
+        });
+
+        it("should do nothing when the room is not found", () => {
+            jest.spyOn(matrixClient, "getRoom").mockReturnValue(null);
+
+            viewModel.changeRoomSection("!unknown:server", DefaultTagID.Favourite);
+
+            expect(tagRoom).not.toHaveBeenCalled();
+        });
+
+        it("should do nothing when the room is already in the target section", () => {
+            jest.spyOn(matrixClient, "getRoom").mockReturnValue(room1);
+            mocked(getSectionTagForRoom).mockReturnValue(DefaultTagID.Favourite);
+
+            viewModel.changeRoomSection(room1.roomId, DefaultTagID.Favourite);
+
+            expect(tagRoom).not.toHaveBeenCalled();
+        });
+    });
+
+    describe("show_room_tile scroll", () => {
+        beforeEach(() => {
+            // Dispatching ViewRoom is also handled by the global RoomViewStore, which calls
+            // MatrixClientPeg.safeGet(); stubClient sets up the peg so that doesn't throw.
+            stubClient();
+        });
+
+        it("should scroll a room into view in a flat list", async () => {
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                roomViewStore: sdkContext.roomViewStore,
+                spaceStore: sdkContext.spaceStore,
+            });
+            const scrollSpy = jest.fn();
+            viewModel.setScrollToIndex(scrollSpy);
+
+            dispatcher.dispatch({
+                action: Action.ViewRoom,
+                room_id: "!room2:server",
+                show_room_tile: true,
+                metricsTrigger: undefined,
+            });
+
+            // Flat list: entry index == room index.
+            await waitFor(() => expect(scrollSpy).toHaveBeenCalledWith(1));
+        });
+
+        it("should scroll a room into view in a grouped list, accounting for section headers", async () => {
+            const favRoom1 = mkStubRoom("!fav1:server", "Fav 1", matrixClient);
+            const favRoom2 = mkStubRoom("!fav2:server", "Fav 2", matrixClient);
+            const regularRoom1 = mkStubRoom("!reg1:server", "Reg 1", matrixClient);
+            jest.spyOn(RoomListStoreV3.instance, "getSortedRoomsInActiveSpace").mockReturnValue({
+                spaceId: "home",
+                sections: [
+                    { tag: DefaultTagID.Favourite, rooms: [favRoom1, favRoom2] },
+                    { tag: CHATS_TAG, rooms: [regularRoom1] },
+                ],
+            });
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                roomViewStore: sdkContext.roomViewStore,
+                spaceStore: sdkContext.spaceStore,
+            });
+            const scrollSpy = jest.fn();
+            viewModel.setScrollToIndex(scrollSpy);
+
+            dispatcher.dispatch({
+                action: Action.ViewRoom,
+                room_id: "!reg1:server",
+                show_room_tile: true,
+                metricsTrigger: undefined,
+            });
+
+            // Entry space: [Fav header(0), fav1(1), fav2(2), Chats header(3), reg1(4)]
+            await waitFor(() => expect(scrollSpy).toHaveBeenCalledWith(4));
+        });
+
+        it("should not scroll when the room is not in the current list", async () => {
+            viewModel = new RoomListViewModel({
+                client: matrixClient,
+                roomViewStore: sdkContext.roomViewStore,
+                spaceStore: sdkContext.spaceStore,
+            });
+            const scrollSpy = jest.fn();
+            viewModel.setScrollToIndex(scrollSpy);
+
+            dispatcher.dispatch({
+                action: Action.ViewRoom,
+                room_id: "!room3:server",
+                show_room_tile: true,
+                metricsTrigger: undefined,
+            });
+
+            await waitFor(() => expect(scrollSpy).toHaveBeenCalledWith(2));
+            expect(scrollSpy).toHaveBeenCalledTimes(1);
         });
     });
 });
diff --git a/apps/web/test/viewmodels/room/EventTileActionBarViewModel-test.ts b/apps/web/test/viewmodels/room/EventTileActionBarViewModel-test.ts
index 1c7125beb5..10a61b8e58 100644
--- a/apps/web/test/viewmodels/room/EventTileActionBarViewModel-test.ts
+++ b/apps/web/test/viewmodels/room/EventTileActionBarViewModel-test.ts
@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import EventEmitter from "events";
+import EventEmitter from "node:events";
 import { waitFor } from "@testing-library/dom";
 import { mocked } from "jest-mock";
 import {
diff --git a/apps/web/test/viewmodels/room/RoomStatusBar-test.ts b/apps/web/test/viewmodels/room/RoomStatusBar-test.ts
index 9d7cf55a7c..b4119ffddd 100644
--- a/apps/web/test/viewmodels/room/RoomStatusBar-test.ts
+++ b/apps/web/test/viewmodels/room/RoomStatusBar-test.ts
@@ -15,7 +15,7 @@ import {
     EventStatus,
 } from "matrix-js-sdk/src/matrix";
 import { RoomStatusBarState } from "@element-hq/web-shared-components";
-import { type MockedObject } from "jest-mock";
+import { type MockedObject } from "jest-mock-vitest-adapter";
 
 import { mkEvent, mkRoom, stubClient } from "../../test-utils";
 import { RoomStatusBarViewModel } from "../../../src/viewmodels/room/RoomStatusBar";
diff --git a/apps/web/test/viewmodels/room/RoomUploadViewModel-test.tsx b/apps/web/test/viewmodels/room/RoomUploadViewModel-test.tsx
new file mode 100644
index 0000000000..ce17c09c52
--- /dev/null
+++ b/apps/web/test/viewmodels/room/RoomUploadViewModel-test.tsx
@@ -0,0 +1,253 @@
+/*
+ * Copyright (c) 2026 Element Creations 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 { type IEventRelation, type MatrixClient, type Room, RoomEvent } from "matrix-js-sdk/src/matrix";
+import { render } from "jest-matrix-react";
+
+import type { MockedObject } from "jest-mock";
+import { RoomUploadContextProvider, RoomUploadViewModel } from "../../../src/viewmodels/room/RoomUploadViewModel";
+import { getRoomContext, mkEvent, mkStubRoom, stubClient } from "../../test-utils";
+import { TimelineRenderingType } from "../../../src/contexts/RoomContext";
+import defaultDispatcher, { MatrixDispatcher } from "../../../src/dispatcher/dispatcher";
+import ContentMessages from "../../../src/ContentMessages";
+import { ComposerApi } from "../../../src/modules/ComposerApi";
+import type { ComposerInsertFilesPayload } from "../../../src/dispatcher/payloads/ComposerInsertFilePayload";
+import { ScopedRoomContextProvider } from "../../../src/contexts/ScopedRoomContext";
+import { Action } from "../../../src/dispatcher/actions";
+import MatrixClientContext from "../../../src/contexts/MatrixClientContext";
+const sendContentListToRoomSpy = jest.spyOn(ContentMessages.sharedInstance(), "sendContentListToRoom");
+
+describe("RoomUploadViewModel", () => {
+    let client: MockedObject<MatrixClient>;
+    let room: MockedObject<Room>;
+    let dis: MockedObject<MatrixDispatcher>;
+    beforeEach(() => {
+        jest.clearAllMocks();
+        client = stubClient() as MockedObject<MatrixClient>;
+        room = mkStubRoom("!room", undefined, undefined) as MockedObject<Room>;
+        dis = {
+            dispatch: jest.fn(),
+        } as Partial<MatrixDispatcher> as MockedObject<MatrixDispatcher>;
+    });
+    afterAll(() => {
+        jest.restoreAllMocks();
+    });
+
+    it.each([true, false])("handles state when room.maySendMessage = %s", (maySendMessage) => {
+        room.maySendMessage.mockReturnValue(maySendMessage);
+        const vm = new RoomUploadViewModel(
+            room,
+            client,
+            TimelineRenderingType.Room,
+            dis,
+            undefined,
+            undefined,
+            () => {},
+        );
+        expect(vm.getSnapshot().options).toHaveLength(maySendMessage ? 1 : 0);
+        room.maySendMessage.mockReturnValue(!maySendMessage);
+        room.emit(RoomEvent.CurrentStateUpdated, room, null as any, null as any);
+        expect(vm.getSnapshot().options).toHaveLength(maySendMessage ? 0 : 1);
+    });
+
+    it("handles custom upload option", async () => {
+        const compApi = new ComposerApi(new MatrixDispatcher());
+        const replyEv = mkEvent({ type: "fake", content: {}, user: "any", event: true });
+        const vm = new RoomUploadViewModel(
+            room,
+            client,
+            TimelineRenderingType.Room,
+            dis,
+            replyEv,
+            {
+                rel_type: "any_type",
+            },
+            () => {},
+            compApi,
+        );
+        const onSelected = jest.fn();
+        const icon = { myicon: 5 } as any;
+        compApi.addFileUploadOption({
+            type: "org.example.test",
+            label: "My uploader",
+            icon,
+            onSelected,
+        });
+        expect(vm.getSnapshot().options).toContainEqual({ type: "org.example.test", label: "My uploader", icon });
+        vm.onUploadOptionSelected("org.example.test");
+        expect(onSelected).toHaveBeenCalledWith(
+            room.roomId,
+            { view: "room" },
+            {
+                inReplyToEventId: replyEv.getId(),
+                relType: "any_type",
+            },
+        );
+    });
+
+    describe("uploads via input", () => {
+        it("redirected if guest", async () => {
+            client.isGuest.mockReturnValue(true);
+            const vm = new RoomUploadViewModel(
+                room,
+                client,
+                TimelineRenderingType.Room,
+                dis,
+                undefined,
+                undefined,
+                () => {},
+            );
+            await vm.initiateViaInputFiles([] as unknown as FileList);
+            expect(dis.dispatch).toHaveBeenCalledWith({ action: "require_registration" });
+        });
+        it("skips empty files", async () => {
+            const vm = new RoomUploadViewModel(
+                room,
+                client,
+                TimelineRenderingType.Room,
+                dis,
+                undefined,
+                undefined,
+                () => {},
+            );
+            await vm.initiateViaInputFiles([] as unknown as FileList);
+            expect(dis.dispatch).not.toHaveBeenCalled();
+        });
+        it("uploads with correct context", async () => {
+            sendContentListToRoomSpy.mockResolvedValue(undefined);
+            const vm = new RoomUploadViewModel(
+                room,
+                client,
+                TimelineRenderingType.Thread,
+                dis,
+                undefined,
+                undefined,
+                () => {},
+            );
+            const replyEvent = mkEvent({ event: true, type: "anything", user: "anyone", content: {} });
+            vm.setReplyToEvent(replyEvent);
+            const threadRelation: IEventRelation = { key: "foo" };
+            vm.setThreadRelation(threadRelation);
+            const fileList = [
+                {
+                    name: "fake.png",
+                    size: 1024,
+                    type: "image/png",
+                },
+            ] as unknown as FileList;
+            await vm.initiateViaInputFiles(fileList);
+            expect(sendContentListToRoomSpy).toHaveBeenCalledWith(
+                fileList,
+                room.roomId,
+                threadRelation,
+                replyEvent,
+                client,
+                TimelineRenderingType.Thread,
+            );
+        });
+    });
+
+    describe("uploads via data transfer", () => {
+        it("redirected if guest", async () => {
+            client.isGuest.mockReturnValue(true);
+            const vm = new RoomUploadViewModel(
+                room,
+                client,
+                TimelineRenderingType.Room,
+                dis,
+                undefined,
+                undefined,
+                () => {},
+            );
+            await vm.initiateViaDataTransfer({} as DataTransfer);
+            expect(dis.dispatch).toHaveBeenCalledWith({ action: "require_registration" });
+        });
+        it("skips empty files", async () => {
+            const vm = new RoomUploadViewModel(
+                room,
+                client,
+                TimelineRenderingType.Room,
+                dis,
+                undefined,
+                undefined,
+                () => {},
+            );
+            await vm.initiateViaDataTransfer({ files: [] as unknown as FileList } as DataTransfer);
+            expect(dis.dispatch).not.toHaveBeenCalled();
+        });
+        it("uploads with correct context", async () => {
+            sendContentListToRoomSpy.mockResolvedValue(undefined);
+            const vm = new RoomUploadViewModel(
+                room,
+                client,
+                TimelineRenderingType.Thread,
+                dis,
+                undefined,
+                undefined,
+                () => {},
+            );
+            const replyEvent = mkEvent({ event: true, type: "anything", user: "anyone", content: {} });
+            vm.setReplyToEvent(replyEvent);
+            const threadRelation: IEventRelation = { key: "foo" };
+            vm.setThreadRelation(threadRelation);
+            const files = [
+                {
+                    name: "fake.png",
+                    size: 1024,
+                    type: "image/png",
+                },
+            ] as unknown as FileList;
+            await vm.initiateViaDataTransfer({ files } as DataTransfer);
+            expect(sendContentListToRoomSpy).toHaveBeenCalledWith(
+                files,
+                room.roomId,
+                threadRelation,
+                replyEvent,
+                client,
+                TimelineRenderingType.Thread,
+            );
+        });
+    });
+
+    describe("RoomUploadContextProvider", () => {
+        it("uploads when called via module API", async () => {
+            sendContentListToRoomSpy.mockResolvedValue(undefined);
+            render(
+                <MatrixClientContext.Provider value={client}>
+                    <ScopedRoomContextProvider {...getRoomContext(room, {})}>
+                        <RoomUploadContextProvider>
+                            <p>Any child</p>
+                        </RoomUploadContextProvider>
+                    </ScopedRoomContextProvider>
+                </MatrixClientContext.Provider>,
+            );
+            const files = [
+                {
+                    name: "fake.png",
+                    size: 1024,
+                    type: "image/png",
+                },
+            ] as File[];
+            defaultDispatcher.dispatch(
+                {
+                    action: Action.ComposerFileInsert,
+                    files,
+                    timelineRenderingType: TimelineRenderingType.Room,
+                } satisfies ComposerInsertFilesPayload,
+                true,
+            );
+            expect(sendContentListToRoomSpy).toHaveBeenCalledWith(
+                files,
+                room.roomId,
+                undefined,
+                undefined,
+                client,
+                TimelineRenderingType.Room,
+            );
+        });
+    });
+});
diff --git a/apps/web/test/viewmodels/room/ThreadListActionBarViewModel-test.ts b/apps/web/test/viewmodels/room/ThreadListActionBarViewModel-test.ts
new file mode 100644
index 0000000000..64b00aa056
--- /dev/null
+++ b/apps/web/test/viewmodels/room/ThreadListActionBarViewModel-test.ts
@@ -0,0 +1,57 @@
+/*
+ * Copyright 2026 Element Creations 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 { ActionBarAction } from "@element-hq/web-shared-components";
+
+import { ThreadListActionBarViewModel } from "../../../src/viewmodels/room/ThreadListActionBarViewModel";
+
+describe("ThreadListActionBarViewModel", () => {
+    it("builds the thread-list action bar snapshot", () => {
+        const vm = new ThreadListActionBarViewModel({});
+
+        expect(vm.getSnapshot()).toMatchObject({
+            actions: [ActionBarAction.ViewInRoom, ActionBarAction.CopyLink],
+            presentation: "icon",
+            isDownloadEncrypted: false,
+            isDownloadLoading: false,
+            isPinned: false,
+            isQuoteExpanded: false,
+            isThreadReplyAllowed: true,
+        });
+    });
+
+    it("forwards actions to the configured handlers", () => {
+        const onViewInRoomClick = jest.fn();
+        const onCopyLinkClick = jest.fn();
+        const vm = new ThreadListActionBarViewModel({
+            onViewInRoomClick,
+            onCopyLinkClick,
+        });
+        const anchor = document.createElement("button");
+
+        vm.onViewInRoomClick(anchor);
+        vm.onCopyLinkClick(anchor);
+
+        expect(onViewInRoomClick).toHaveBeenCalledWith(anchor);
+        expect(onCopyLinkClick).toHaveBeenCalledWith(anchor);
+    });
+
+    it("uses updated handlers after setProps", () => {
+        const initialOnViewInRoomClick = jest.fn();
+        const nextOnViewInRoomClick = jest.fn();
+        const vm = new ThreadListActionBarViewModel({
+            onViewInRoomClick: initialOnViewInRoomClick,
+        });
+        const anchor = document.createElement("button");
+
+        vm.setProps({ onViewInRoomClick: nextOnViewInRoomClick });
+        vm.onViewInRoomClick(anchor);
+
+        expect(initialOnViewInRoomClick).not.toHaveBeenCalled();
+        expect(nextOnViewInRoomClick).toHaveBeenCalledWith(anchor);
+    });
+});
diff --git a/apps/web/test/viewmodels/room/notification-badge/NotificationBadgeViewModel-test.ts b/apps/web/test/viewmodels/room/notification-badge/NotificationBadgeViewModel-test.ts
new file mode 100644
index 0000000000..2debb3dd8e
--- /dev/null
+++ b/apps/web/test/viewmodels/room/notification-badge/NotificationBadgeViewModel-test.ts
@@ -0,0 +1,118 @@
+/*
+ * Copyright 2026 Element Creations 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 { NotificationBadgeViewModel } from "../../../../src/viewmodels/room/notification-badge/NotificationBadgeViewModel";
+import { NotificationLevel } from "../../../../src/stores/notifications/NotificationLevel";
+
+describe("NotificationBadgeViewModel", () => {
+    it("computes an activity dot snapshot", () => {
+        const vm = new NotificationBadgeViewModel({
+            symbol: null,
+            count: 0,
+            level: NotificationLevel.Activity,
+        });
+
+        expect(vm.getSnapshot()).toMatchObject({
+            shouldRender: true,
+            isVisible: true,
+            symbol: null,
+            isNotification: false,
+            isHighlight: false,
+            isKnocked: false,
+            badgeType: "dot",
+            isClickable: false,
+        });
+    });
+
+    it("hides activity dots when hideIfDot changes and skips unchanged setters", () => {
+        const vm = new NotificationBadgeViewModel({
+            symbol: null,
+            count: 0,
+            level: NotificationLevel.Activity,
+        });
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        vm.setHideIfDot(false);
+        expect(listener).not.toHaveBeenCalled();
+
+        vm.setHideIfDot(true);
+        expect(listener).toHaveBeenCalledTimes(1);
+        expect(vm.getSnapshot().shouldRender).toBe(false);
+
+        vm.setHideIfDot(true);
+        expect(listener).toHaveBeenCalledTimes(1);
+    });
+
+    it("formats counts and maps highlight levels", () => {
+        const vm = new NotificationBadgeViewModel({
+            symbol: null,
+            count: 3,
+            level: NotificationLevel.Notification,
+        });
+
+        vm.setNotificationData({
+            symbol: null,
+            count: 4,
+            level: NotificationLevel.Unsent,
+        });
+
+        expect(vm.getSnapshot()).toMatchObject({
+            shouldRender: true,
+            isVisible: true,
+            symbol: "4",
+            isHighlight: true,
+            badgeType: "badge_2char",
+        });
+    });
+
+    it("hides activity badges when hide bold is enabled", () => {
+        const vm = new NotificationBadgeViewModel({
+            symbol: "",
+            count: 1,
+            level: NotificationLevel.Activity,
+        });
+
+        vm.setHideBold(true);
+
+        expect(vm.getSnapshot().shouldRender).toBe(false);
+    });
+
+    it("updates clickable options without emitting for unchanged values", () => {
+        const onClick = jest.fn();
+        const vm = new NotificationBadgeViewModel({
+            symbol: "!",
+            count: 0,
+            level: NotificationLevel.Highlight,
+            onClick,
+            ariaLabel: "Jump to unread",
+            tabIndex: 0,
+        });
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        vm.setClickOptions({
+            onClick,
+            ariaLabel: "Jump to unread",
+            tabIndex: 0,
+        });
+        expect(listener).not.toHaveBeenCalled();
+
+        vm.setClickOptions({
+            onClick,
+            ariaLabel: "Jump to first unread room",
+            tabIndex: 0,
+        });
+
+        expect(listener).toHaveBeenCalledTimes(1);
+        expect(vm.getSnapshot()).toMatchObject({
+            isClickable: true,
+            ariaLabel: "Jump to first unread room",
+            tabIndex: 0,
+        });
+    });
+});
diff --git a/apps/web/test/viewmodels/room/notification-badge/UnreadNotificationBadgeViewModel-test.ts b/apps/web/test/viewmodels/room/notification-badge/UnreadNotificationBadgeViewModel-test.ts
new file mode 100644
index 0000000000..05b3497cad
--- /dev/null
+++ b/apps/web/test/viewmodels/room/notification-badge/UnreadNotificationBadgeViewModel-test.ts
@@ -0,0 +1,117 @@
+/*
+ * Copyright 2026 Element Creations 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 { NotificationCountType, PendingEventOrdering, Room, RoomEvent } from "matrix-js-sdk/src/matrix";
+
+import type { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { stubClient } from "../../../test-utils/test-utils";
+import { UnreadNotificationBadgeViewModel } from "../../../../src/viewmodels/room/notification-badge/UnreadNotificationBadgeViewModel";
+
+describe("UnreadNotificationBadgeViewModel", () => {
+    let client: MatrixClient;
+    let room: Room;
+    const trackedRoomEvents = [
+        RoomEvent.UnreadNotifications,
+        RoomEvent.Receipt,
+        RoomEvent.Timeline,
+        RoomEvent.Redaction,
+        RoomEvent.LocalEchoUpdated,
+        RoomEvent.MyMembership,
+    ];
+
+    beforeEach(() => {
+        client = stubClient();
+        room = new Room("!room:example.org", client, "@user:example.org", {
+            pendingEventOrdering: PendingEventOrdering.Detached,
+        });
+    });
+
+    function setUnreads(greys: number, reds: number): void {
+        room.setUnreadNotificationCount(NotificationCountType.Total, greys);
+        room.setUnreadNotificationCount(NotificationCountType.Highlight, reds);
+    }
+
+    it("computes the initial snapshot from unread state", () => {
+        setUnreads(12, 0);
+
+        const vm = new UnreadNotificationBadgeViewModel({ room });
+
+        expect(vm.getSnapshot()).toMatchObject({
+            shouldRender: true,
+            isVisible: true,
+            isNotification: true,
+            isHighlight: false,
+            badgeType: "badge_2char",
+            symbol: "12",
+        });
+
+        vm.dispose();
+    });
+
+    it("updates when the room unread state changes", () => {
+        const vm = new UnreadNotificationBadgeViewModel({ room });
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        setUnreads(0, 2);
+
+        expect(vm.getSnapshot()).toMatchObject({
+            isHighlight: true,
+            symbol: "2",
+        });
+        expect(listener).toHaveBeenCalled();
+
+        vm.dispose();
+    });
+
+    it("skips unchanged force-dot setter updates", () => {
+        setUnreads(1, 0);
+        const vm = new UnreadNotificationBadgeViewModel({ room, forceDot: false });
+        const listener = jest.fn();
+        vm.subscribe(listener);
+
+        vm.setForceDot(false);
+
+        expect(listener).not.toHaveBeenCalled();
+
+        vm.setForceDot(true);
+
+        expect(listener).toHaveBeenCalledTimes(1);
+        expect(vm.getSnapshot().badgeType).toBe("dot");
+
+        vm.dispose();
+    });
+
+    it("moves room event listeners when the room changes", () => {
+        const nextRoom = new Room("!next:example.org", client, "@user:example.org", {
+            pendingEventOrdering: PendingEventOrdering.Detached,
+        });
+        const initialRoomListenerCounts = new Map(
+            trackedRoomEvents.map((eventName) => [eventName, room.listenerCount(eventName)]),
+        );
+        const initialNextRoomListenerCounts = new Map(
+            trackedRoomEvents.map((eventName) => [eventName, nextRoom.listenerCount(eventName)]),
+        );
+        const vm = new UnreadNotificationBadgeViewModel({ room });
+
+        for (const eventName of trackedRoomEvents) {
+            expect(room.listenerCount(eventName)).toBe(initialRoomListenerCounts.get(eventName)! + 1);
+        }
+
+        vm.setRoom(nextRoom);
+
+        for (const eventName of trackedRoomEvents) {
+            expect(room.listenerCount(eventName)).toBe(initialRoomListenerCounts.get(eventName));
+            expect(nextRoom.listenerCount(eventName)).toBe(initialNextRoomListenerCounts.get(eventName)! + 1);
+        }
+
+        vm.dispose();
+        for (const eventName of trackedRoomEvents) {
+            expect(nextRoom.listenerCount(eventName)).toBe(initialNextRoomListenerCounts.get(eventName));
+        }
+    });
+});
diff --git a/apps/web/test/viewmodels/structures/ResizerViewModel-test.ts b/apps/web/test/viewmodels/structures/ResizerViewModel-test.ts
deleted file mode 100644
index c913eb6fc3..0000000000
--- a/apps/web/test/viewmodels/structures/ResizerViewModel-test.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-/*
- * Copyright 2026 Element Creations 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 { waitFor } from "jest-matrix-react";
-import { type PanelImperativeHandle } from "@element-hq/web-shared-components";
-import whatInput from "what-input";
-
-import { ResizerViewModel } from "../../../src/viewmodels/structures/ResizerViewModel";
-import SettingsStore from "../../../src/settings/SettingsStore";
-import { SettingLevel } from "../../../src/settings/SettingLevel";
-
-jest.mock("what-input");
-
-describe("LeftPanelResizerViewModel", () => {
-    afterEach(() => {
-        SettingsStore.reset();
-    });
-
-    describe("Initial state is correct", () => {
-        it("should have correct initial state when panel was previously collapsed", () => {
-            SettingsStore.setValue("RoomList.isPanelCollapsed", null, SettingLevel.DEVICE, true);
-            const vm = new ResizerViewModel();
-            expect(vm.getSnapshot()).toStrictEqual({
-                isCollapsed: true,
-                initialSize: 0,
-                isFocusedViaKeyboard: false,
-            });
-        });
-
-        it("should have correct initial state when panel was previously resized", () => {
-            SettingsStore.setValue("RoomList.panelSize", null, SettingLevel.DEVICE, 34);
-            const vm = new ResizerViewModel();
-            expect(vm.getSnapshot()).toStrictEqual({
-                isCollapsed: false,
-                initialSize: 34,
-                isFocusedViaKeyboard: false,
-            });
-        });
-
-        it("should have correct initial state when panel was neither resized nor collapsed", () => {
-            const vm = new ResizerViewModel();
-            expect(vm.getSnapshot()).toStrictEqual({
-                isCollapsed: false,
-                initialSize: undefined,
-                isFocusedViaKeyboard: false,
-            });
-        });
-    });
-
-    it("should update isCollapsed on onLeftPanelResized()", async () => {
-        const vm = new ResizerViewModel();
-        vm.onLeftPanelResize({ inPixels: 100, asPercentage: 6 });
-        await waitFor(() => {
-            expect(vm.getSnapshot().isCollapsed).toStrictEqual(false);
-        });
-        vm.onLeftPanelResize({ inPixels: 0, asPercentage: 6 });
-        await waitFor(() => {
-            expect(vm.getSnapshot().isCollapsed).toStrictEqual(true);
-        });
-    });
-
-    it("should noop on onSeparatorClick() when handle is not yet set", () => {
-        const vm = new ResizerViewModel();
-        expect(() => vm.onSeparatorClick()).not.toThrow();
-    });
-
-    describe("should expand panel on onSeparatorClick()", () => {
-        it("to last non-zero width that the user set", () => {
-            const vm = new ResizerViewModel();
-            SettingsStore.setValue("RoomList.panelSize", null, SettingLevel.DEVICE, 34);
-            const mockHandle = {
-                resize: jest.fn(),
-                isCollapsed: jest.fn().mockReturnValue(true),
-            } as unknown as PanelImperativeHandle;
-            vm.setPanelHandle(mockHandle);
-
-            vm.onSeparatorClick();
-
-            expect(mockHandle.resize).toHaveBeenCalledWith("34%");
-        });
-
-        it("to maximum size of the panel", () => {
-            const vm = new ResizerViewModel();
-            const mockHandle = {
-                resize: jest.fn(),
-                isCollapsed: jest.fn().mockReturnValue(true),
-            } as unknown as PanelImperativeHandle;
-            vm.setPanelHandle(mockHandle);
-
-            vm.onSeparatorClick();
-
-            expect(mockHandle.resize).toHaveBeenCalledWith("100%");
-        });
-    });
-
-    it("should set isFocusedViaKeyboard state correctly", () => {
-        whatInput.ask = jest.fn().mockReturnValue("keyboard");
-        const vm = new ResizerViewModel();
-        vm.onFocus();
-        expect(vm.getSnapshot().isFocusedViaKeyboard).toStrictEqual(true);
-        vm.onBlur();
-        expect(vm.getSnapshot().isFocusedViaKeyboard).toStrictEqual(false);
-    });
-
-    it("should resize to nearest whole number", () => {
-        const vm = new ResizerViewModel();
-        const mockHandle = {
-            resize: jest.fn(),
-        } as unknown as PanelImperativeHandle;
-        vm.setPanelHandle(mockHandle);
-
-        vm.onLeftPanelResized(25.515);
-        expect(mockHandle.resize).toHaveBeenCalledWith("26%");
-    });
-});
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index c470e8a4e4..062ece0938 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -11,19 +11,23 @@
         "target": "es2022",
         "noUnusedLocals": true,
         "sourceMap": false,
-        "outDir": "./lib",
+        "noEmit": true,
         "declaration": true,
         "jsx": "react",
-        "lib": ["es2022", "es2024.promise", "dom", "dom.iterable"],
+        "lib": ["es2022", "es2024.promise", "dom", "dom.iterable", "ESNext.Collection"],
         "strict": true,
         "types": ["node", "modernizr"],
         "paths": {
             "jest-matrix-react": ["./test/test-utils/jest-matrix-react"],
-            "rollup/parseAst": ["../../node_modules/rollup/dist/parseAst"]
-        }
+            "test-utils-rtl": ["./test/test-utils/jest-matrix-react"],
+            "test-utils": ["./test/test-utils"],
+            "test-utils/*": ["./test/test-utils/*"],
+            "jest-mock-vitest-adapter": ["./test/setup/adapter.ts"]
+        },
+        "skipLibCheck": true
     },
     "include": [
-        "../../node_modules/matrix-js-sdk/src/@types/*.d.ts",
+        "./node_modules/matrix-js-sdk/src/@types/*.d.ts",
         "./src/**/*.ts",
         "./src/**/*.tsx",
         "./test/**/*.ts",
diff --git a/apps/web/vitest.config.ts b/apps/web/vitest.config.ts
new file mode 100644
index 0000000000..7b36f631e8
--- /dev/null
+++ b/apps/web/vitest.config.ts
@@ -0,0 +1,72 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { fileURLToPath } from "node:url";
+import { defineProject } from "vitest/config";
+import svgr from "vite-plugin-svgr";
+
+function resolve(specifier: string): string {
+    return fileURLToPath(import.meta.resolve(specifier));
+}
+
+export default defineProject({
+    resolve: {
+        alias: [
+            { find: "test-utils-rtl", replacement: resolve("./test/test-utils/vitest-matrix-react") },
+            { find: "test-utils", replacement: resolve("./test/test-utils") },
+            // Stub out workers as they do not play well under test
+            {
+                find: /.*workers\/(.+)Factory/,
+                replacement: resolve("./__mocks__/workerFactoryMock.js"),
+            },
+            {
+                find: /.*waveWorker\.min\.js$/,
+                replacement: resolve("./__mocks__/empty.js"),
+            },
+            {
+                find: /.*decoderWorker\.min\.js$/,
+                replacement: resolve("./__mocks__/empty.js"),
+            },
+            {
+                find: /.*decoderWorker\.min\.wasm$/,
+                replacement: resolve("./__mocks__/empty.js"),
+            },
+            // Stub this out as we lack AudioWorkletProcessor in the test env
+            {
+                find: "./recorderWorkletFactory",
+                replacement: resolve("./__mocks__/empty.js"),
+            },
+            // Stub out legacy modules so we don't need to build them first
+            {
+                find: "../modules.js",
+                replacement: resolve("./__mocks__/empty.js"),
+            },
+        ],
+    },
+    test: {
+        include: ["src/**/*.test.{ts,tsx}"],
+        environment: "node",
+        pool: "threads",
+        globals: false,
+        setupFiles: ["src/test/setupTests.ts"],
+        environmentOptions: {
+            happyDOM: {
+                url: "http://localhost/",
+            },
+        },
+        snapshotSerializers: [resolve("./src/test/react-use-id-serializer.ts")],
+    },
+    plugins: [
+        svgr({
+            svgrOptions: {
+                ref: true,
+                svgProps: { "role": "presentation", "aria-hidden": "true" },
+                expandProps: "end",
+            },
+        }),
+    ],
+});
diff --git a/apps/web/webpack.config.ts b/apps/web/webpack.config.ts
index 590033593f..1142fd00dd 100644
--- a/apps/web/webpack.config.ts
+++ b/apps/web/webpack.config.ts
@@ -66,9 +66,7 @@ const cssThemes = {
 };
 
 // See docs/customisations.md
-let fileOverrides = {
-    /* {[file: string]: string} */
-};
+let fileOverrides = {/* {[file: string]: string} */};
 try {
     const customisationsFile = fs.readFileSync("./customisations.json", "utf-8");
     fileOverrides = JSON.parse(customisationsFile);
@@ -252,13 +250,8 @@ export default (env: string, argv: Record<string, any>): webpack.Configuration =
                 "@matrix-org/react-sdk-module-api": getPackageRoot("@matrix-org/react-sdk-module-api"),
                 // and matrix-widget-api
                 "matrix-widget-api": getPackageRoot("matrix-widget-api"),
-                "oidc-client-ts": getPackageRoot("oidc-client-ts"),
-
-                // Define a variable so the i18n stuff can load
-                "$webapp": path.resolve(__dirname, "webapp"),
 
                 // Make shared-components imports resolve to EW deps
-                "counterpart": getPackageRoot("counterpart"),
                 "@vector-im/compound-web": getPackageRoot("@vector-im/compound-web", ""),
             },
             fallback: {
@@ -267,6 +260,7 @@ export default (env: string, argv: Record<string, any>): webpack.Configuration =
                 "net": false,
                 "tls": false,
                 "crypto": false,
+                "events": import.meta.resolve("events/"),
 
                 // Polyfill needed by counterpart
                 "util": import.meta.resolve("util/"),
@@ -300,6 +294,12 @@ export default (env: string, argv: Record<string, any>): webpack.Configuration =
                 /highlight\.js[\\/]lib[\\/]languages/,
             ],
             rules: [
+                {
+                    // Match imports containing the ?raw query string
+                    resourceQuery: /raw/,
+                    // Instruct Webpack to emit the file source as a string
+                    type: "asset/source",
+                },
                 {
                     test: /\.js$/,
                     enforce: "pre" as const,
@@ -337,6 +337,7 @@ export default (env: string, argv: Record<string, any>): webpack.Configuration =
                 },
                 {
                     test: /\.css$/,
+                    resourceQuery: { not: [/raw/] },
                     use: [
                         MiniCssExtractPlugin.loader,
                         {
@@ -505,61 +506,54 @@ export default (env: string, argv: Record<string, any>): webpack.Configuration =
                 {
                     test: /\.svg$/,
                     issuer: /\.(js|ts|jsx|tsx|html)$/,
-                    use: [
-                        {
-                            loader: "@svgr/webpack",
-                            options: {
-                                namedExport: "Icon",
-                                svgProps: {
-                                    "role": "presentation",
-                                    "aria-hidden": true,
-                                },
-                                // props set on the svg will override defaults
-                                expandProps: "end",
-                                svgoConfig: {
-                                    plugins: [
-                                        {
-                                            name: "preset-default",
-                                            params: {
-                                                overrides: {
-                                                    removeViewBox: false,
-                                                },
-                                            },
+                    resourceQuery: /react/,
+                    loader: "@svgr/webpack",
+                    options: {
+                        svgProps: {
+                            "role": "presentation",
+                            "aria-hidden": true,
+                        },
+                        // props set on the svg will override defaults
+                        expandProps: "end",
+                        svgoConfig: {
+                            plugins: [
+                                {
+                                    name: "preset-default",
+                                    params: {
+                                        overrides: {
+                                            removeViewBox: false,
                                         },
-                                        // generates a viewbox if missing
-                                        { name: "removeDimensions" },
-                                        // https://github.com/facebook/docusaurus/issues/8297
-                                        { name: "prefixIds" },
-                                    ],
+                                    },
                                 },
-                                /**
-                                 * Forwards the React ref to the root SVG element
-                                 * Useful when using things like `asChild` in
-                                 * radix-ui
-                                 */
-                                ref: true,
-                                esModule: false,
-                                name: "[name].[hash:7].[ext]",
-                                outputPath: getAssetOutputPath,
-                                publicPath: function (url: string, resourcePath: string) {
-                                    const outputPath = getAssetOutputPath(url, resourcePath);
-                                    return toPublicPath(outputPath);
-                                },
-                            },
+                                // generates a viewbox if missing
+                                { name: "removeDimensions" },
+                                // https://github.com/facebook/docusaurus/issues/8297
+                                { name: "prefixIds" },
+                            ],
                         },
-                        {
-                            loader: "file-loader",
-                            options: {
-                                esModule: false,
-                                name: "[name].[hash:7].[ext]",
-                                outputPath: getAssetOutputPath,
-                                publicPath: function (url: string, resourcePath: string) {
-                                    const outputPath = getAssetOutputPath(url, resourcePath);
-                                    return toPublicPath(outputPath);
-                                },
-                            },
+                        /**
+                         * Forwards the React ref to the root SVG element
+                         * Useful when using things like `asChild` in
+                         * radix-ui
+                         */
+                        ref: true,
+                        esModule: false,
+                    },
+                },
+                {
+                    test: /\.svg$/,
+                    issuer: /\.(js|ts|jsx|tsx|html)$/,
+                    resourceQuery: { not: [/raw/, /react/] },
+                    loader: "file-loader",
+                    options: {
+                        esModule: false,
+                        name: "[name].[hash:7].[ext]",
+                        outputPath: getAssetOutputPath,
+                        publicPath: function (url: string, resourcePath: string) {
+                            const outputPath = getAssetOutputPath(url, resourcePath);
+                            return toPublicPath(outputPath);
                         },
-                    ],
+                    },
                 },
                 {
                     test: /\.svg$/,
@@ -619,7 +613,7 @@ export default (env: string, argv: Record<string, any>): webpack.Configuration =
                         },
                     ],
                 },
-            ].filter(Boolean),
+            ],
         },
 
         plugins: [
@@ -758,7 +752,7 @@ export default (env: string, argv: Record<string, any>): webpack.Configuration =
                 retryDelay: 500,
                 maxRetries: 3,
             }),
-        ].filter(Boolean),
+        ],
 
         output: {
             path: path.join(__dirname, "webapp"),
@@ -822,7 +816,7 @@ export default (env: string, argv: Record<string, any>): webpack.Configuration =
  *
  * @param url The adjusted name of the file, such as `warning.1234567.svg`.
  * @param resourcePath The absolute path to the source file with unmodified name.
- * @return The returned paths will look like `img/warning.1234567.svg`.
+ * @returns The returned paths will look like `img/warning.1234567.svg`.
  */
 function getAssetOutputPath(url: string, resourcePath: string): string {
     const isKaTeX = resourcePath.includes("KaTeX");
diff --git a/code_style.md b/code_style.md
index b86df77d1e..a53996f59f 100644
--- a/code_style.md
+++ b/code_style.md
@@ -38,7 +38,7 @@ adjacent to.
 
 Unless otherwise specified, the following applies to all code:
 
-1. Files must be formatted with Prettier.
+1. Files must be formatted with Oxfmt.
 2. 120 character limit per line. Match existing code in the file if it is using a lower guide.
 3. A tab/indentation is 4 spaces.
 4. Newlines are Unix.
@@ -301,8 +301,7 @@ Inheriting all the rules of TypeScript, the following additionally apply:
     - Note: These are deprecated. Prefer Compound typography tokens like `var(--cpd-font-body-md-regular)` for new code.
 7. Use theme color variables like `$primary-content`, `$secondary-content`, `$accent`, `$alert` for colors.
     - Prefer Compound color tokens like `var(--cpd-color-text-primary)` for new code.
-8. Use spacing variables like `$spacing-8`, `$spacing-12`, `$spacing-16` where available.
-    - Prefer Compound spacing tokens like `var(--cpd-space-2x)` for new code.
+8. Use spacing variables like `var(--cpd-space-2x)`, `var(--cpd-space-3x)`, `var(--cpd-space-4x)`.
 
 #### Syntax and formatting
 
diff --git a/developer_guide.md b/developer_guide.md
index c42c6aacfa..4e081cb5b3 100644
--- a/developer_guide.md
+++ b/developer_guide.md
@@ -32,22 +32,26 @@ pnpm install
 popd
 ```
 
-Clone the repo and switch to the `element-web/apps/web` directory:
+Clone the repo and switch to that directory:
 
 ```bash
 git clone https://github.com/element-hq/element-web.git
-cd element-web/apps/web
+cd element-web
 ```
 
-Configure the app by copying `config.sample.json` to `config.json` and
-modifying it. See the [configuration docs](docs/config.md) for details.
-
 Set up your local development link by creating a `.link-config` file with contents like:
 
 ```
-matrix-js-sdk=/path/to/matrix-js-sdk
+matrix-js-sdk=/path/to/matrix-js-sdk=apps/web
 ```
 
+**Note for Windows users**: Your link config path might need escaping. For example, `matrix-js-sdk=C:\\path\\to\\matrix-js-sdk`.
+
+Switch to the `apps/web` directory: `cd apps/web`
+
+Configure the app by copying `config.sample.json` to `config.json` and
+modifying it. See the [configuration docs](docs/config.md) for details.
+
 Finally, build and start Element itself:
 
 ```bash
@@ -55,6 +59,8 @@ pnpm install
 pnpm start
 ```
 
+**Note for Windows users**: `pnpm start` needs to be run from a terminal with bash/shell support.
+
 Wait a few seconds for the initial build to finish; you should see something like:
 
 ```
diff --git a/diff-cover.toml b/diff-cover.toml
new file mode 100644
index 0000000000..fcb7783d75
--- /dev/null
+++ b/diff-cover.toml
@@ -0,0 +1,2 @@
+[tool.diff_cover]
+compare_branch = "origin/develop"
diff --git a/docker-bake.hcl b/docker-bake.hcl
new file mode 100644
index 0000000000..6e764e59d4
--- /dev/null
+++ b/docker-bake.hcl
@@ -0,0 +1,37 @@
+# Builds the Element Web images. Both targets share the `builder` and `element_web` stages,
+# building them together in a single bake invocation compiles the app only once.
+#
+#   docker buildx bake                      # both images, for the local platform
+#   docker buildx bake element-web          # just the base image
+#   PLATFORMS=linux/amd64,linux/arm64 docker buildx bake --push
+
+variable "PLATFORMS" {
+    default = ""
+}
+
+# Populated by docker/metadata-action in CI; empty locally.
+target "docker-metadata-action" {}
+target "docker-metadata-action-modules" {}
+
+target "_common" {
+    context    = "."
+    dockerfile = "apps/web/Dockerfile"
+    platforms  = PLATFORMS == "" ? null : split(",", PLATFORMS)
+}
+
+# The stock image, with no modules bundled.
+target "element-web" {
+    inherits = ["_common", "docker-metadata-action"]
+    target   = "element_web"
+}
+
+# The same image with the released Element modules baked into /modules,
+# where the entrypoint picks them up and adds them to config.json.
+target "element-web-modules" {
+    inherits = ["_common", "docker-metadata-action-modules"]
+    target   = "element_web_modules"
+}
+
+group "default" {
+    targets = ["element-web", "element-web-modules"]
+}
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 86775e8ddd..7af3aa151d 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -1,6 +1,13 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
 import { withMermaid } from "vitepress-plugin-mermaid";
 
-function customPathResolver(href: string, currentPath: string) {
+function customPathResolver(href: string, currentPath: string): string {
     const [link, fragment] = href.split("#", 2);
     if (currentPath === "index.md") {
         if (link.startsWith("./docs/")) {
@@ -137,7 +144,7 @@ export default withMermaid({
                     { text: "Memory profiling", link: "/memory-profiles-and-leaks.md" },
                     { text: "Jitsi", link: "/jitsi-dev.md" },
                     { text: "Feature flags", link: "/feature-flags.md" },
-                    { text: "OIDC and delegated authentication", link: "/oidc.md" },
+                    { text: "OAuth and delegated authentication", link: "/oauth.md" },
                     { text: "Release Process", link: "/release.md" },
                     { text: "MVVM", link: "/MVVM.md" },
                     { text: "Settings", link: "/settings.md" },
@@ -151,7 +158,7 @@ export default withMermaid({
                     { text: "Iconography", link: "/icons" },
                     { text: "Local echo", link: "/local-echo-dev" },
                     { text: "Media", link: "/media-handling" },
-                    { text: "Room List Store", link: "/room-list-store" },
+                    { text: "Room List", link: "/room-list" },
                     { text: "Scrolling", link: "/scrolling" },
                     { text: "Usercontent", link: "/usercontent" },
                     { text: "Widget layouts", link: "/widget-layouts" },
diff --git a/docs/config.md b/docs/config.md
index 046a737447..87a8ad9121 100644
--- a/docs/config.md
+++ b/docs/config.md
@@ -57,6 +57,15 @@ If both `default_server_config` and `default_server_name` are used, Element will
 information using `.well-known`, and if that fails, take `default_server_config` as the homeserver connection
 information.
 
+1. `enable_client_well_known_lookups`: Controls whether Element makes runtime requests to the logged-in user's
+   [`<server_name>/.well-known/matrix/...`](https://spec.matrix.org/latest/client-server-api/#getwell-knownmatrixclient)
+   endpoints (for example, polling for client configuration after login). Set it to `false` to stop Element making these
+   requests, so it only contacts the homeserver base URL; the `well_known` object returned inline in the `/login` response
+   is unaffected. Defaults to `true`.
+   This option covers those runtime requests only; login-time `.well-known` autodiscovery is separate. Setting
+   `default_server_config` with `disable_custom_urls: true` fixes the homeserver and removes the server picker, covering
+   the startup lookup and server selection. It also doesn't cover the legacy password login form (not shown for delegated authentication/OIDC) which performs its own `.well-known` lookup when a full Matrix ID is entered.
+
 ## Labs flags
 
 Labs flags are optional, typically beta or in-development, features that can be turned on or off. The full range of
@@ -298,7 +307,6 @@ The following subproperties are available:
 2. `logo_uri`: Optional URI for the client logo.
 3. `tos_uri`: Optional URI for the client's terms of service.
 4. `policy_uri`: Optional URI for the client's privacy policy.
-5. `contacts`: Optional list of contact emails for the client.
 
 As an example:
 
@@ -308,8 +316,7 @@ As an example:
         "client_uri": "https://example.com",
         "logo_uri": "https://example.com/logo.png",
         "tos_uri": "https://example.com/tos",
-        "policy_uri": "https://example.com/policy",
-        "contacts": ["support@example.com"]
+        "policy_uri": "https://example.com/policy"
     }
 }
 ```
@@ -390,7 +397,12 @@ The VoIP and Jitsi options are:
    at any time without notice.
 6. `element_call`: Optional configuration for native group calls using Element Call, with the following subkeys:
     - `use_exclusively`: A boolean specifying whether Element Call should be used exclusively as the only VoIP stack in
-      the app, removing the ability to start legacy 1:1 calls or Jitsi calls. Defaults to `false`.
+      the app, removing the ability to enable legacy 1:1 calls or Jitsi calls.
+      It is a misconfiguration if its set to true while `element_call.disable` is also true!
+      Defaults to `false`.
+    - `disable`: A boolean flag specifying whether Element Call should be disabled.
+      If `true`, `element_call.use_exclusively` has no effect!
+      Defaults to `false`.
     - `brand`: Optional name for the app. Defaults to `Element Call`. This is
       used throughout the application in various strings/locations.
     - `guest_spa_url`: Optional URL for an Element Call single-page app (SPA),
@@ -596,7 +608,7 @@ Currently, the following UI feature flags are supported:
 }
 ```
 
-Each module URL is loaded using dynamic import (`import()`). The modules are loaded in order after Element Web initializes but before the application fully starts. Modules must be accessible from the browser and should export a compatible module format that works with the [Module API](https://github.com/element-hq/element-modules/tree/main/packages/element-web-module-api).
+Each module URL is loaded using dynamic import (`import()`). The modules are loaded in order after Element Web initializes but before the application fully starts. Modules must be accessible from the browser and should export a compatible module format that works with the [Module API](https://github.com/element-hq/element-web/tree/develop/packages/module-api).
 
 ## Undocumented / developer options
 
diff --git a/docs/deprecated-modules.md b/docs/deprecated-modules.md
index 1391d8883e..9b95ebd5fd 100644
--- a/docs/deprecated-modules.md
+++ b/docs/deprecated-modules.md
@@ -1,7 +1,7 @@
 # Deprecated Module system
 
 > [!CAUTION]
-> DEPRECATED. Use [Element web module api](https://github.com/element-hq/element-modules/tree/main/packages/element-web-module-api) instead.
+> DEPRECATED. Use [Element web module api](https://github.com/element-hq/element-web/tree/develop/packages/module-api) instead.
 
 The module system in Element Web is a way to add or modify functionality of Element Web itself, bundled at compile time
 for the app. This means that modules are loaded as part of the `pnpm build` process but have an effect on user experience
diff --git a/docs/generated/[id].paths.ts b/docs/generated/[id].paths.ts
index 58531ec8bd..e77af1c51d 100644
--- a/docs/generated/[id].paths.ts
+++ b/docs/generated/[id].paths.ts
@@ -1,17 +1,25 @@
-import genWorkflowMermaid from "../../scripts/gen-workflow-mermaid";
-import { dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
+/*
+Copyright 2026 Element Creations Ltd.
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import genWorkflowMermaid from "../../scripts/gen-workflow-mermaid";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { type ResolvedRouteConfig } from "vitepress";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 export default {
-    async paths() {
-        const root = join(__dirname, "..", "..");
+    async paths(): Promise<Partial<ResolvedRouteConfig>[]> {
+        const root = path.join(__dirname, "..", "..");
 
         return [
             {
                 params: { id: "automations" },
-                content: await genWorkflowMermaid([root, join(root, "node_modules", "matrix-js-sdk")]),
+                content: await genWorkflowMermaid([root, path.join(root, "node_modules", "matrix-js-sdk")]),
             },
         ];
     },
diff --git a/docs/img/RoomListStore2.png b/docs/img/RoomListStore2.png
deleted file mode 100644
index 9952d1c910..0000000000
Binary files a/docs/img/RoomListStore2.png and /dev/null differ
diff --git a/docs/install.md b/docs/install.md
index 1829bf0e4a..dcf275f329 100644
--- a/docs/install.md
+++ b/docs/install.md
@@ -66,7 +66,7 @@ on other runtimes may require root privileges. To resolve this, either run the
 image as root (`docker run --user 0`) or, better, change the port that nginx
 listens on via the `ELEMENT_WEB_PORT` environment variable.
 
-[Element Web Modules](https://github.com/element-hq/element-modules/tree/main/packages/element-web-module-api) can be dynamically loaded
+[Element Web Modules](https://github.com/element-hq/element-web/tree/develop/packages/module-api) can be dynamically loaded
 by being made available (e.g. via bind mount) in a directory within `/modules/`.
 The default entrypoint will be index.js in that directory but can be overridden if a package.json file is found with a `main` directive.
 These modules will be presented in a `/modules` subdirectory within the webroot, and automatically added to the config.json `modules` field.
diff --git a/docs/labs.md b/docs/labs.md
index e9786cddfe..79227004c8 100644
--- a/docs/labs.md
+++ b/docs/labs.md
@@ -10,11 +10,6 @@ If a labs features gets more stable, it _may_ be promoted to a beta feature
 **Be warned! Labs features are not finalised, they may be fragile, they may change, they may be
 dropped. Ask in the room if you are unclear about any details here.**
 
-## Submit Abuse Report to Moderators [MSC3215](https://github.com/matrix-org/matrix-doc/pull/3215) support (`feature_report_to_moderators`)
-
-A new version of the "Report" dialog that lets users send abuse reports directly to room moderators,
-if the room supports it.
-
 ## Render LaTeX maths in messages (`feature_latex_maths`)
 
 Enables rendering of LaTeX maths in messages using [KaTeX](https://katex.org/). LaTeX between single dollar-signs is interpreted as inline maths and double dollar-signs as display maths (i.e. centred on its own line).
@@ -86,12 +81,6 @@ Enables support for video rooms that use Element Call rather than Jitsi, and cau
 
 This flag will not have any effect unless `feature_video_rooms` is also enabled.
 
-## New group call experience (`feature_group_calls`) [In Development]
-
-This feature allows users to place native [MSC3401](https://github.com/matrix-org/matrix-spec-proposals/pull/3401) group calls in compatible rooms, using Element Call.
-
-If you're enabling this at the deployment level, you may also want to reference the docs for the `element_call` config section.
-
 ## Disable per-sender encryption for Element Call (`feature_disable_call_per_sender_encryption`)
 
 The default for embedded Element Call in Element Web is per-participant encryption.
@@ -109,10 +98,6 @@ Unreliable in encrypted rooms.
 
 Enables knock feature for rooms. This allows users to ask to join a room.
 
-## New room list (`feature_new_room_list`) [In Development]
-
-Enable the new room list that is currently in development.
-
 ## Exclude insecure devices when sending/receiving messages (`feature_exclude_insecure_devices`)
 
 Do not send or receive messages to/from devices that are not properly verified. Users with unverified devices will not
@@ -138,3 +123,14 @@ Requires [MSC4429](https://github.com/matrix-org/matrix-spec-proposals/pull/4429
 
 **Warning** This feature has options which are not backwards compatible, disabling
 it may have unintended consequences.
+
+## Log in with QR (`feature_login_with_qr`)
+
+Enables logging in to Element Web/Desktop by using Element X to scan a QR code.
+Requires server support, based on the v2024 edition of [MSC4108](https://github.com/matrix-org/matrix-spec-proposals/pull/4108).
+Can only be configured via config.json, as labs flags cannot be set until after login, and are cleared on log out. The UI option is disabled.
+Note, this does not affect the existing `Link new device` flow using the same MSC.
+
+## URL Preview Bundle (MSC4095) (`feature_msc4095_url_preview_bundle`)
+
+Attaches URL preview information generated by the homeserver on messages sent.
diff --git a/docs/native-node-modules.md b/docs/native-node-modules.md
index dac81ede20..a5fbf34ae7 100644
--- a/docs/native-node-modules.md
+++ b/docs/native-node-modules.md
@@ -24,11 +24,11 @@ INDOCKER_SQLCIPHER_BUNDLED=1 pnpm docker:build:native
 ```
 
 The above will build `matrix-seshat` in
-`docker/node_modules/matrix-seshat`. You can then either run `pnpm docker:build`
+`docker/.hak/hakModules/matrix-seshat`. You can then either run `pnpm docker:build`
 to build the app inside docker, or:
 
 ```
-pnpm link docker/node_modules/matrix-seshat
+pnpm link ./docker/.hak/hakModules/matrix-seshat
 ```
 
 ... and build the app with `pnpm build` or run it with `pnpm start`.
@@ -53,7 +53,7 @@ pnpm run build:native
 
 If you need to build for a specific architecture, see [here](#compiling-for-specific-architectures).
 
-## Adding Seshat for search in E2E encrypted rooms
+### Adding Seshat for search in E2E encrypted rooms
 
 Seshat is a native Node module that adds support for local event indexing and
 full text search in E2E encrypted rooms.
@@ -90,7 +90,7 @@ as usual using:
 
     pnpm start
 
-### Statically linking libsqlcipher
+#### Statically linking libsqlcipher
 
 On Windows & macOS we always statically link libsqlcipher for it is not generally available.
 On Linux by default we will use a system package, on debian & ubuntu this is `libsqlcipher0`,
@@ -101,9 +101,9 @@ link sqlcipher, including a static build of OpenSSL.
 More info can be found at https://github.com/matrix-org/seshat/issues/102
 and https://github.com/vector-im/element-web/issues/20926.
 
-## Compiling for specific architectures
+### Compiling for specific architectures
 
-### macOS
+#### macOS
 
 On macOS, you can build universal native modules too:
 
@@ -130,7 +130,7 @@ To bundle a universal build for macOS, run:
 pnpm run build:universal
 ```
 
-### Windows
+#### Windows
 
 If you're on Windows, you can choose to build specifically for 32 or 64 bit:
 
@@ -144,14 +144,14 @@ or
 pnpm run build:64
 ```
 
-### Cross compiling
+#### Cross compiling
 
 Compiling a module for a particular operating system (Linux/macOS/Windows) needs
 to be done on that operating system. Cross-compiling from a host OS for a different
 target OS may be possible, but we don't support this flow with Element dependencies
 at this time.
 
-### Switching between architectures
+#### Switching between architectures
 
 The native module build system keeps the different architectures
 separate, so you can keep native modules for several architectures at the same
diff --git a/docs/oidc.md b/docs/oauth.md
similarity index 52%
rename from docs/oidc.md
rename to docs/oauth.md
index bf10792d0c..ebf930d4f0 100644
--- a/docs/oidc.md
+++ b/docs/oauth.md
@@ -1,13 +1,13 @@
-# OIDC and delegated authentication
+# OAuth2 and delegated authentication
 
 See https://areweoidcyet.com/client-implementation-guide/ for implementation details.
 
-Element Web uses [MSC2965: OIDC provider discovery](https://github.com/matrix-org/matrix-spec-proposals/pull/2965) to discover the configured provider.
-Where a valid MSC2965 configuration is discovered, OIDC native login flow will be the only login option offered.
-Element Web will attempt to [dynamically register](https://openid.net/specs/openid-connect-registration-1_0.html) with the configured OP.
+Element Web uses [/auth_metadata](https://spec.matrix.org/v1.18/client-server-api/#get_matrixclientv1auth_metadata) to discover the configured provider.
+Where a valid configuration is discovered, OAuth2 native login flow will be the only login option offered.
+Element Web will attempt to [dynamically register](https://spec.matrix.org/v1.18/client-server-api/#client-registration) with the configured OP.
 Then, authentication will be completed [as described here](https://areweoidcyet.com/client-implementation-guide/).
 
-#### Statically configured OIDC clients
+#### Statically configured OAuth2 clients
 
 Clients that are already registered with the OP can configure their `client_id` in `config.json`.
 Where static configuration exists for the OP dynamic client registration will not be attempted.
diff --git a/docs/room-list-store.md b/docs/room-list-store.md
deleted file mode 100644
index 4e131ee309..0000000000
--- a/docs/room-list-store.md
+++ /dev/null
@@ -1,165 +0,0 @@
-# Room list sorting
-
-It's so complicated it needs its own README.
-
-![](img/RoomListStore2.png)
-
-Legend:
-
-- Orange = External event.
-- Purple = Deterministic flow.
-- Green = Algorithm definition.
-- Red = Exit condition/point.
-- Blue = Process definition.
-
-## Algorithms involved
-
-There's two main kinds of algorithms involved in the room list store: list ordering and tag sorting.
-Throughout the code an intentional decision has been made to call them the List Algorithm and Sorting
-Algorithm respectively. The list algorithm determines the primary ordering of a given tag whereas the
-tag sorting defines how rooms within that tag get sorted, at the discretion of the list ordering.
-
-Behaviour of the overall room list (sticky rooms, etc) are determined by the generically-named Algorithm
-class. Here is where much of the coordination from the room list store is done to figure out which list
-algorithm to call, instead of having all the logic in the room list store itself.
-
-Tag sorting is effectively the comparator supplied to the list algorithm. This gives the list algorithm
-the power to decide when and how to apply the tag sorting, if at all. For example, the importance algorithm,
-later described in this document, heavily uses the list ordering behaviour to break the tag into categories.
-Each category then gets sorted by the appropriate tag sorting algorithm.
-
-### Tag sorting algorithm: Alphabetical
-
-When used, rooms in a given tag will be sorted alphabetically, where the alphabet's order is a problem
-for the browser. All we do is a simple string comparison and expect the browser to return something
-useful.
-
-### Tag sorting algorithm: Manual
-
-Manual sorting makes use of the `order` property present on all tags for a room, per the
-[Matrix specification](https://matrix.org/docs/spec/client_server/r0.6.0#room-tagging). Smaller values
-of `order` cause rooms to appear closer to the top of the list.
-
-### Tag sorting algorithm: Recent
-
-Rooms get ordered by the timestamp of the most recent useful message. Usefulness is yet another algorithm
-in the room list system which determines whether an event type is capable of bubbling up in the room list.
-Normally events like room messages, stickers, and room security changes will be considered useful enough
-to cause a shift in time.
-
-Note that this is reliant on the event timestamps of the most recent message. Because Matrix is eventually
-consistent this means that from time to time a room might plummet or skyrocket across the tag due to the
-timestamp contained within the event (generated server-side by the sender's server).
-
-### List ordering algorithm: Natural
-
-This is the easiest of the algorithms to understand because it does essentially nothing. It imposes no
-behavioural changes over the tag sorting algorithm and is by far the simplest way to order a room list.
-Historically, it's been the only option in Element and extremely common in most chat applications due to
-its relative deterministic behaviour.
-
-### List ordering algorithm: Importance
-
-On the other end of the spectrum, this is the most complicated algorithm which exists. There's major
-behavioural changes, and the tag sorting algorithm gets selectively applied depending on circumstances.
-
-Each tag which is not manually ordered gets split into 4 sections or "categories". Manually ordered tags
-simply get the manual sorting algorithm applied to them with no further involvement from the importance
-algorithm. There are 4 categories: Red, Grey, Bold, and Idle. Each has their own definition based off
-relative (perceived) importance to the user:
-
-- **Red**: The room has unread mentions waiting for the user.
-- **Grey**: The room has unread notifications waiting for the user. Notifications are simply unread
-  messages which cause a push notification or badge count. Typically, this is the default as rooms get
-  set to 'All Messages'.
-- **Bold**: The room has unread messages waiting for the user. Essentially this is a grey room without
-  a badge/notification count (or 'Mentions Only'/'Muted').
-- **Idle**: No useful (see definition of useful above) activity has occurred in the room since the user
-  last read it.
-
-Conveniently, each tag gets ordered by those categories as presented: red rooms appear above grey, grey
-above bold, etc.
-
-Once the algorithm has determined which rooms belong in which categories, the tag sorting algorithm
-gets applied to each category in a sub-list fashion. This should result in the red rooms (for example)
-being sorted alphabetically amongst each other as well as the grey rooms sorted amongst each other, but
-collectively the tag will be sorted into categories with red being at the top.
-
-## Sticky rooms
-
-When the user visits a room, that room becomes 'sticky' in the list, regardless of ordering algorithm.
-From a code perspective, the underlying algorithm is not aware of a sticky room and instead the base class
-manages which room is sticky. This is to ensure that all algorithms handle it the same.
-
-The sticky flag is simply to say it will not move higher or lower down the list while it is active. For
-example, if using the importance algorithm, the room would naturally become idle once viewed and thus
-would normally fly down the list out of sight. The sticky room concept instead holds it in place, never
-letting it fly down until the user moves to another room.
-
-Only one room can be sticky at a time. Room updates around the sticky room will still hold the sticky
-room in place. The best example of this is the importance algorithm: if the user has 3 red rooms and
-selects the middle room, they will see exactly one room above their selection at all times. If they
-receive another notification which causes the room to move into the topmost position, the room that was
-above the sticky room will move underneath to allow for the new room to take the top slot, maintaining
-the sticky room's position.
-
-Though only applicable to the importance algorithm, the sticky room is not aware of category boundaries
-and thus the user can see a shift in what kinds of rooms move around their selection. An example would
-be the user having 4 red rooms, the user selecting the third room (leaving 2 above it), and then having
-the rooms above it read on another device. This would result in 1 red room and 1 other kind of room
-above the sticky room as it will try to maintain 2 rooms above the sticky room.
-
-An exception for the sticky room placement is when there's suddenly not enough rooms to maintain the placement
-exactly. This typically happens if the user selects a room and leaves enough rooms where it cannot maintain
-the N required rooms above the sticky room. In this case, the sticky room will simply decrease N as needed.
-The N value will never increase while selection remains unchanged: adding a bunch of rooms after having
-put the sticky room in a position where it's had to decrease N will not increase N.
-
-## Responsibilities of the store
-
-The store is responsible for the ordering, upkeep, and tracking of all rooms. The room list component simply gets
-an object containing the tags it needs to worry about and the rooms within. The room list component will
-decide which tags need rendering (as it commonly filters out empty tags in most cases), and will deal with
-all kinds of filtering.
-
-## Filtering
-
-Filters are provided to the store as condition classes and have two major kinds: Prefilters and Runtime.
-
-Prefilters flush out rooms which shouldn't appear to the algorithm implementations. Typically this is
-due to some higher order room list filtering (such as spaces or tags) deliberately exposing a subset of
-rooms to the user. The algorithm implementations will not see a room being prefiltered out.
-
-Runtime filters are used for more dynamic filtering, such as the user filtering by room name. These
-filters are passed along to the algorithm implementations where those implementations decide how and
-when to apply the filter. In practice, the base `Algorithm` class ends up doing the heavy lifting for
-optimization reasons.
-
-The results of runtime filters get cached to avoid needlessly iterating over potentially thousands of
-rooms, as the old room list store does. When a filter condition changes, it emits an update which (in this
-case) the `Algorithm` class will pick up and act accordingly. Typically, this also means filtering a
-minor subset where possible to avoid over-iterating rooms.
-
-All filter conditions are considered "stable" by the consumers, meaning that the consumer does not
-expect a change in the condition unless the condition says it has changed. This is intentional to
-maintain the caching behaviour described above.
-
-One might ask why we don't just use prefilter conditions for everything, and the answer is one of slight
-subtlety: in the cases of prefilters we are knowingly exposing the user to a workspace-style UX where
-room notifications are self-contained within that workspace. Runtime filters tend to not want to affect
-visible notification counts (as it doesn't want the room header to suddenly be confusing to the user as
-they type), and occasionally UX like "found 2/12 rooms" is desirable. If prefiltering were used instead,
-the notification counts would vary while the user was typing and "found 2/12" UX would not be possible.
-
-## Class breakdowns
-
-The `RoomListStore` is the major coordinator of various algorithm implementations, which take care
-of the various `ListAlgorithm` and `SortingAlgorithm` options. The `Algorithm` class is responsible
-for figuring out which tags get which rooms, as Matrix specifies them as a reverse map: tags get
-defined on rooms and are not defined as a collection of rooms (unlike how they are presented to the
-user). Various list-specific utilities are also included, though they are expected to move somewhere
-more general when needed. For example, the `membership` utilities could easily be moved elsewhere
-as needed.
-
-The various bits throughout the room list store should also have jsdoc of some kind to help describe
-what they do and how they work.
diff --git a/docs/room-list.md b/docs/room-list.md
new file mode 100644
index 0000000000..4e788ae6cc
--- /dev/null
+++ b/docs/room-list.md
@@ -0,0 +1,214 @@
+# Room list
+
+The room list is the sorted, filtered list of rooms in the left-hand navigation panel, always
+scoped to the active space. It is a full [MVVM](MVVM.md) feature split across three layers:
+
+- **Model** — `RoomListStoreV3`, the store that keeps every room sorted and answers queries for
+  the rooms in the active space. It lives in
+  [`apps/web/src/stores/room-list-v3/`](https://github.com/element-hq/element-web/tree/develop/apps/web/src/stores/room-list-v3/).
+- **View models** — adapt the store (and other stores) into snapshots for the UI. They live in
+  [`apps/web/src/viewmodels/room-list/`](https://github.com/element-hq/element-web/tree/develop/apps/web/src/viewmodels/room-list/).
+- **Views** — the presentational React components, owned by `@element-hq/web-shared-components`.
+
+## Architecture
+
+```mermaid
+flowchart TD
+    events["Matrix events"] --> store
+    otherStores["Notification / preview / call stores, room events"] --> rlvm
+    otherStores --> itemVM
+    otherStores --> sectionHeaderVM
+
+    subgraph model["Model"]
+        store["RoomListStoreV3(owns the skip list)"]
+    end
+
+    subgraph vms["View models"]
+        rlvm["RoomListViewModel"]
+        itemVM["RoomListItemViewModel"]
+        sectionHeaderVM["RoomListSectionHeaderViewModel"]
+        headerVM["RoomListHeaderViewModel"]
+        searchVM["RoomListSearchViewModel"]
+    end
+
+    subgraph views["Views (Shared components)"]
+        rlview["RoomListView"]
+        virtualizedView["VirtualizedRoomListView"]
+        itemView["RoomListItemView"]
+        sectionHeaderView["RoomListSectionHeaderView"]
+        headerView["RoomListHeaderView"]
+        searchView["RoomListSearchView"]
+    end
+
+    rlvm -->|"consume events"| store
+    rlvm -->|"creates"| itemVM
+    rlvm -->|"creates"| sectionHeaderVM
+    rlview -->|"snapshot"| rlvm
+    rlview -->|"renders"| virtualizedView
+    virtualizedView -->|"renders"| itemView
+    virtualizedView -->|"renders"| sectionHeaderView
+    virtualizedView -->|"snapshot"| rlvm
+    itemView -->|"snapshot"| itemVM
+    sectionHeaderView -->|"snapshot"| sectionHeaderVM
+    headerView -->|"snapshot"| headerVM
+    searchView -->|"snapshot"| searchVM
+```
+
+## Model — the store
+
+`RoomListStoreV3` (the "V3" is the third implementation) is a singleton exposed as
+`RoomListStoreV3.instance`. Unlike the previous implementations, which re-computed lists on
+demand, V3 keeps every room permanently sorted so retrieval is cheap.
+
+**The skip list.** The core data structure is a
+[skip list](https://en.wikipedia.org/wiki/Skip_list): stacked linked lists that keep every room
+permanently sorted, so a room that changes is simply re-inserted into place and the rest of the
+list is untouched. Rooms are wrapped in `RoomNode`s that cache whether the room is in the active
+space and which filters it matches, so reading the list is just an ordered walk that drops the
+nodes outside the space or not matching the requested filters.
+
+**Sorters.** A sorter defines the order of the list. There are three: **Alphabetic** (by room
+name), **Recency** (most recent meaningful activity, with low-priority and muted rooms forced to
+the bottom), and **Unread** (by unread importance). The user's choice is persisted and can be
+changed at runtime, which rebuilds the list.
+
+**Filters.** A filter answers a single yes/no question about a room, and each room's matching
+filters are precomputed on its node. Filters serve two roles: **capability filters** back the
+primary filter chips in the UI (Unread, People, Rooms, Favourites, Mentions, Invites, Low
+Priority), and **section-tag filters** decide which section a room belongs to. Not all of the
+capability filters are offered as chips at all times: while sectioning is enabled, Favourites and
+Low Priority are hidden, since those rooms already have their own sections.
+
+**Sections.** The store groups rooms into named sections (Favourites, Low Priority, Chats, and
+user-created custom sections) using the section-tag filters described above. Sections are a topic
+of their own — see [Sections](#sections) below.
+
+**Spaces and updates.** The list is always scoped to the active space; rather than re-filter on
+every read, each node caches its active-space membership and the store recomputes that flag when
+the space changes. The store listens for the Matrix events that affect ordering or membership
+(receipts, tag changes, account data, push rules, decryption, timeline events, membership) and
+responds by re-inserting or removing the single affected room. Emissions to consumers are
+coalesced with `requestAnimationFrame`, so a burst of updates within a frame collapses into one
+notification.
+
+**Public surface.** This is the seam the view models bind to:
+
+- Events: `ListsUpdate` (lists changed), `ListsLoaded` (initial load done), `SectionCreated`,
+  and `RoomTagged` (a locally-initiated tag change, which drives the "chat moved" toast).
+- `getSortedRoomsInActiveSpace(filterKeys?)` returns the sorted, filtered rooms grouped into
+  sections. Narrower helpers exist too (DM rooms, server-notice rooms, the full sorted list).
+- Section mutators (`createSection` / `editSection` / `removeSection` / `reorderSection`) and
+  `resort`.
+
+Note that **sticky-room behaviour lives in the view model, not the store** — the store itself is
+unaware of a selected room.
+
+## Sections
+
+Sections are the named groups the room list displays. Membership is driven entirely by the Matrix
+`m.tag` account data on each room, so moving a room between sections is just a matter of changing
+its tags:
+
+- **Favourites** and **Low Priority** use the default `m.favourite` and `m.lowpriority` tags and
+  are pinned to the top and bottom of the list respectively.
+- **Chats** is a synthetic catch-all section (tag `chats`) for every room that isn't in any other
+  explicit section.
+- **Custom sections** are user-created. Each is identified by a generated tag of the form
+  `element.io.section.<uuid>`, and a room is placed in it by tagging the room with that tag.
+
+The store keeps an ordered list of section tags — Favourites first, Low Priority last, and the
+custom sections plus Chats reorderable in between (new custom sections are inserted just above
+Chats by default). Custom sections can be created, renamed, removed, and reordered through
+dialogs; that logic lives in [`section.ts`](https://github.com/element-hq/element-web/blob/develop/apps/web/src/stores/room-list-v3/section.ts).
+
+Each custom section also records the space it was created in, which controls the visibility of
+empty sections: an empty custom section is only shown in the space it belongs to, so sections
+created in one space don't clutter unrelated spaces. Legacy sections without a stored space (or
+whose space no longer exists) fall back to the Home meta-space. Note that this visibility rule is
+applied by `RoomListViewModel` when it builds its snapshot, not by the store.
+
+### Flat list mode
+
+When sectioning is turned off, the room list becomes a single flat list instead of a grouped one.
+This is triggered in two places:
+
+- If the `RoomList.showSections` setting is disabled, the store skips sectioning altogether and
+  `getSortedRoomsInActiveSpace()` returns a single `chats` section containing every room in the
+  active space.
+- Even with sectioning enabled, `RoomListViewModel` discards the sections it shouldn't render (the
+  empty ones, and custom sections belonging to another space) and treats what remains as flat
+  (`isFlatList`) if it is nothing at all, or the Chats catch-all on its own — for example when the
+  user has no favourite, low-priority, or custom-tagged rooms.
+
+In flat mode the view renders a `FlatVirtualizedList` (no section headers); otherwise it renders a
+`GroupedVirtualizedList` with headers and section drag-and-drop.
+
+### Settings
+
+Sections are configured entirely through settings:
+
+- **`RoomList.showSections`** — whether sectioning is enabled at all. When off, the list is flat
+  (see above).
+- **`RoomList.CustomSectionData`** (account level) — the custom-section definitions, keyed by tag.
+  Each entry stores the tag, the user-chosen name, and the space the section was created in.
+  Malformed entries are dropped when the data is read.
+- **`RoomList.OrderedCustomSections`** (account level) — the display order of the reorderable
+  sections (the custom sections and Chats). Favourites and Low Priority are not stored here since
+  they are always pinned to the top and bottom.
+- **`RoomList.SectionExpansionState`** (device level) — the expanded/collapsed state of each
+  section, stored per space and then per section tag. Sections default to expanded when no state
+  has been persisted.
+
+The account-level settings sync across a user's devices, while the expansion state is
+device-local so that collapsing a section on one device doesn't affect the others.
+
+## View models
+
+The view models in [`apps/web/src/viewmodels/room-list/`](https://github.com/element-hq/element-web/tree/develop/apps/web/src/viewmodels/room-list/)
+extend `BaseViewModel` and produce immutable snapshots consumed by the views (see [MVVM](MVVM.md)
+for the base pattern).
+
+**`RoomListViewModel`** is the root orchestrator and the **only** view model that subscribes to
+the store's list events and calls `getSortedRoomsInActiveSpace()`. It builds the top-level
+snapshot — whose sections carry only **room IDs**, not room objects — and owns the sticky-room
+logic, the active filter, the toasts, section drag-and-drop, and keyboard navigation. It also
+lazily creates and owns the child view models.
+
+**`RoomListItemViewModel`** (one per room) and **`RoomListSectionHeaderViewModel`** (one per
+section) are created on demand by the root view model. Crucially, they do **not** listen to the
+store's list events; instead they subscribe to fine-grained domain stores directly —
+notification state, message previews, calls, room events and settings — so a single row can
+update independently of the rest of the list. The section header view model draws on a narrower
+set of those, and is _fed_ its set of rooms imperatively by the parent so it can aggregate their
+notification state.
+
+**`RoomListHeaderViewModel`** (the header bar: space title, sort menu, create actions) and
+**`RoomListSearchViewModel`** (the search/dial/explore row) are decoupled siblings of the root
+view model. They do not share state directly; the header view model and the root view model talk
+through the global dispatcher, in both directions — collapse-all-sections, for instance, is
+requested by the header and the resulting state dispatched back to it.
+
+Permission and create-room helpers used by these view models live in
+[`utils.ts`](https://github.com/element-hq/element-web/blob/develop/apps/web/src/viewmodels/room-list/utils.ts).
+
+## Views
+
+The presentational components are owned by `@element-hq/web-shared-components` (developed in
+Storybook); `apps/web` supplies the view models, a `renderAvatar` callback and a key handler for
+landmark navigation, and the shared package owns the rendering. The app-side entry point is
+[`RoomListPanel`](https://github.com/element-hq/element-web/blob/develop/apps/web/src/components/views/rooms/RoomListPanel/RoomListPanel.tsx), which
+composes the search row, the header view, and the room list itself.
+
+The room list proper is `RoomListView`, which renders the filter chips and any toast above a body
+that is a loading skeleton, an empty state, or — in the usual case — `VirtualizedRoomListView`
+(built on [`react-virtuoso`](https://virtuoso.dev/)). Virtualization drives the lazy lifecycle of
+the child view models: as rows scroll into view the list calls back through
+`getRoomItemViewModel(id)` and `getSectionHeaderViewModel(tag)` to obtain the view model for each
+rendered room or header, and reports its visible range so off-screen item view models can be
+disposed. Because each row binds to its own view model, it re-renders on its own data without
+re-rendering the whole list.
+
+The list renders either as a flat list or a grouped list with section headers, depending on the
+`isFlatList` flag in the snapshot (see [Flat list mode](#flat-list-mode)); in the grouped case,
+drag-and-drop is wired back to the root view model, which reorders sections, moves rooms between
+them, and collapses the sections for the duration of a section drag.
diff --git a/docs/translating-dev.md b/docs/translating-dev.md
index 6a7ff397be..c5f4bea75e 100644
--- a/docs/translating-dev.md
+++ b/docs/translating-dev.md
@@ -8,7 +8,7 @@
 
 ## Translating strings vs. marking strings for translation
 
-Translating strings are done with the `_t()` function found in `languageHandler.tsx`.
+Translating strings are done with the `_t()` function found in `languageHandler`.
 It is recommended to call this function wherever you introduce a string constant which should be translated.
 However, translating can not be performed until after the translation system has been initialized.
 Thus, sometimes translation must be performed at a different location in the source code than where the string is introduced.
@@ -45,6 +45,7 @@ We are aiming for a set of common strings to be shared then some more localised
 3. Keys for common accessibility strings must start by `a11y_`. Example: `a11y_hide_password`
 4. Otherwise, try to group keys logically and nest where appropriate, such as `keyboard_` for strings relating to keyboard shortcuts.
 5. Ensure your translation keys do not include `.` or `|` or ` `. Try to balance string length against descriptiveness.
+6. Key names should match the meaning and purpose of the translations as closely as they can. E.g. "button_click_biscuits" -> "Click for biscuits"
 
 ## Adding new strings
 
@@ -53,11 +54,17 @@ We are aiming for a set of common strings to be shared then some more localised
 1. Run `pnpm i18n` to add the keys to `src/i18n/strings/en_EN.json`
 1. Modify the new entries in `src/i18n/strings/en_EN.json` with the English (UK) translations for the added keys.
 
-## Editing existing strings
+## Editing non-English UK existing strings
 
-Edits to existing strings should be performed only via Localazy.
+Edits to existing **non-en_EN** strings should be performed only via Localazy.
 There you can also require all translations to be redone if the meaning of the string has changed significantly.
 
+### Editing English UK (en_EN) strings
+
+Edits to `en_EN.json` **require** a PR, since there is a high chance that a test covers the string in use and may be impacted if it were to change. This also gives us a clean change history.
+
+When changing a string, be careful to rename the key if the meaning changes. For instance, if the key `button_click_biscuits` changed from "Click for biscuits" to "Click for vegetables", then they key should have changed to `button_click_vegetables`.
+
 ## Removing existing strings
 
 You can remove an existing string by removing the key from `en_EN.json`. Do not modify other language json files for this purpose.
diff --git a/knip.ts b/knip.ts
index 9d4fab1d49..d504ed1b7c 100644
--- a/knip.ts
+++ b/knip.ts
@@ -1,36 +1,70 @@
-import { KnipConfig } from "knip";
+/*
+Copyright 2026 Element Creations Ltd.
 
-// Specify this as knip loads config files which may conditionally add reporters, e.g. `@casualbot/jest-sonar-reporter'
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { type KnipConfig } from "knip";
+
+// Specify this as knip loads config files which may conditionally load plugins
 process.env.GITHUB_ACTIONS = "1";
 
 export default {
     workspaces: {
-        "packages/shared-components": {},
+        "packages/shared-components": {
+            entry: ["src/index.ts!", "scripts/**"],
+            project: [
+                "**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx,mdx,pcss}!",
+                "!scripts/**!",
+                "!src/test/**!",
+                "!src/**/test-*!",
+                "!src/**/*-{mock,mocks,snapshot,actions}.*!",
+            ],
+        },
         "packages/playwright-common": {
-            entry: ["src/fixtures/index.ts", "src/testcontainers/index.ts"],
+            entry: ["src/fixtures/index.ts!", "src/testcontainers/index.ts!"],
+            project: [
+                "**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx,pcss}!",
+                "!src/flaky-reporter.ts!",
+                "!src/stale-screenshot-reporter.ts!",
+            ],
             ignoreDependencies: [
                 // Used in playwright-screenshots.sh
                 "wait-on",
             ],
-            ignoreBinaries: ["awk"],
+            ignoreBinaries: ["awk", "printf"],
         },
         "packages/module-api": {},
         "apps/web": {
             entry: [
-                "src/serviceworker/index.ts",
-                "src/workers/*.worker.ts",
-                "src/utils/exportUtils/exportJS.js",
-                "src/vector/localstorage-fix.ts",
+                "src/serviceworker/index.ts!",
+                "src/workers/*.worker.ts!",
+                "src/utils/exportUtils/exportJS.js!",
+                "src/vector/localstorage-fix.ts!",
                 "scripts/**",
                 "playwright/**",
                 "test/**",
                 "res/decoder-ring/**",
                 "res/jitsi_external_api.min.js",
-                "res/themes/*/css/*.pcss",
-            ],
-            ignore: [
+                "res/themes/*/css/*.pcss!",
+                "I18nWebpackPlugin.ts!",
+                "module_system/**!",
                 // Keep for now
-                "src/hooks/useLocalStorageState.ts",
+                "src/hooks/useLocalStorageState.ts!",
+                "src/hooks/useIsReleaseAnnouncementOpen.ts!",
+                "src/components/structures/ReleaseAnnouncement.tsx!",
+                "src/utils/arrays.ts!",
+                "src/utils/EventPresentationContextProvider.tsx!",
+                // This is just an awful side-effect import
+                "src/stores/LifecycleStore.ts!",
+            ],
+            project: [
+                "**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx,pcss}!",
+                "!scripts/**!",
+                "!src/test/**!",
+                "!recorder-worklet-loader.cjs!",
+                "!src/**/*-{mock,mocks,snapshot,actions}.*!",
             ],
             ignoreDependencies: [
                 // False positive
@@ -45,24 +79,47 @@ export default {
                 // dependency so that // we can run `tsc` (since we import the typescript
                 // source of js-sdk, rather than the transpiled and annotated JS like you
                 // would with a normal library).
-                "@types/content-type",
                 "@types/sdp-transform",
             ],
         },
         "apps/desktop": {
-            entry: ["src/preload.cts", "electron-builder.ts", "scripts/**", "hak/**"],
-            project: ["**/*.{js,ts}"],
+            entry: ["src/preload.cts!", "electron-builder.ts!", "scripts/**", "hak/**"],
+            project: ["**/*.{js,ts,pcss}"],
             ignoreDependencies: [
                 // Brought in via hak scripts
                 "matrix-seshat",
             ],
-            ignoreBinaries: ["scripts/in-docker.sh"],
+            ignoreBinaries: [
+                // Used to build seshat (optional)
+                "rustc",
+                // Used by the fetch-package script (optional)
+                "gpg",
+                // Used for the macOS universal builds
+                "lipo",
+            ],
+        },
+        "modules": {
+            project: ["**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx,pcss}!", "!playwright/**!"],
+        },
+        "modules/*": {
+            entry: ["src/index.ts{x,}!"],
+            project: ["**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx,pcss}!", "!src/tests/**!", "!e2e/**!"],
         },
         ".": {
             entry: ["scripts/**", "docs/**"],
         },
     },
+    ignoreDependencies: [
+        // Used by multiple packages, raises a false positive for some reason
+        "events",
+        // Used as a workaround for api-extractor not supporting typescript 7.0
+        "@typescript/old",
+    ],
     ignoreExportsUsedInFile: true,
+    ignoreBinaries: [
+        // Optional for coverage:diff development script
+        "diff-cover",
+    ],
     compilers: {
         pcss: (text: string) =>
             [...text.matchAll(/@import\s+(?:url\()?["']([^"']+)["']\)?[^;]*;/g)]
@@ -76,4 +133,6 @@ export default {
         config: ["playwright.config.ts", "playwright-merge.config.ts"],
     },
     tags: ["-knipignore"],
+    treatConfigHintsAsErrors: true,
+    treatTagHintsAsErrors: true,
 } satisfies KnipConfig;
diff --git a/modules/.dockerignore b/modules/.dockerignore
new file mode 100644
index 0000000000..f83526d133
--- /dev/null
+++ b/modules/.dockerignore
@@ -0,0 +1 @@
+**/node_modules/
\ No newline at end of file
diff --git a/modules/.gitignore b/modules/.gitignore
new file mode 100644
index 0000000000..331ec177d5
--- /dev/null
+++ b/modules/.gitignore
@@ -0,0 +1,13 @@
+lib/
+temp/
+coverage/
+
+/playwright-html-report/
+**/test-results
+**/_results
+# Only commit snapshots from Linux
+**/e2e/snapshots/**/*.png
+**/e2e/snapshots/**/*.yml
+!**/e2e/snapshots/**/*-linux.png
+!**/e2e/snapshots/**/*-linux.aria.yml
+/playwright-report/
diff --git a/modules/README.md b/modules/README.md
new file mode 100644
index 0000000000..46b62e7706
--- /dev/null
+++ b/modules/README.md
@@ -0,0 +1 @@
+Element Web Modules (based on @element-hq/element-web-module-api) which we maintain live here.
diff --git a/modules/banner/README.md b/modules/banner/README.md
new file mode 100644
index 0000000000..6b85fad17a
--- /dev/null
+++ b/modules/banner/README.md
@@ -0,0 +1,64 @@
+# @element-hq/element-web-module-banner
+
+Banner module for Element Web.
+Allows rendering a top bar with slide out left panel menu.
+
+Supports the following configuration options:
+
+| Key           | Type   | Description                                                                                    |
+| ------------- | ------ | ---------------------------------------------------------------------------------------------- |
+| logo_url      | string | URL to the logo to render in the banner                                                        |
+| logo_link_url | string | URL to send the user to when clicking the logo in the banner                                   |
+| title         | string | The title to render next to the logo, falls back to top level `brand` variable if unspecified. |
+| menu          | `Menu` | Data to render in the banner menu                                                              |
+
+The `Menu` type is fulfilled by the following discriminated union:
+
+### Univention menu
+
+| Key     | Type         | Description                                                                                                              |
+| ------- | ------------ | ------------------------------------------------------------------------------------------------------------------------ |
+| type    | "univention" | The type for this menu config                                                                                            |
+| ics_url | string       | URL to the UCS Intercom Service, https://docs.software-univention.de/intercom-service/latest/architecture.html#endpoints |
+
+### Static menu
+
+| Key        | Type         | Description                      |
+| ---------- | ------------ | -------------------------------- |
+| type       | "static"     | The type for this menu config    |
+| categories | `[]Category` | Categories to render in the menu |
+
+The `Category` type is fulfilled by the following interface:
+
+| Key   | Type     | Description                      |
+| ----- | -------- | -------------------------------- |
+| name  | string   | The name of this category        |
+| links | `[]Link` | Links to render in this category |
+
+The `Link` type is fulfilled by the following interface:
+
+| Key      | Type             | Description                             |
+| -------- | ---------------- | --------------------------------------- |
+| icon_uri | string           | URL to the icon to render for this link |
+| name     | string           | The name to render for this link        |
+| link_url | string           | The URL to link to                      |
+| target   | string, optional | The `target` to use for this link       |
+
+### All menus additionally support the following optional keys:
+
+| Key         | Type             | Description                                                               |
+| ----------- | ---------------- | ------------------------------------------------------------------------- |
+| logo_url    | string, optional | URL to the logo to render in the menu, defaults to banner logo if omitted |
+| logo_href   | string, optional | URL to send the user to when clicking the logo in the menu                |
+| logo_height | number, optional | Height of the logo in pixels, defaults to 32 if omitted                   |
+
+## Copyright & License
+
+Copyright (c) 2025 New Vector Ltd
+
+This software is multi licensed by New Vector Ltd (Element). It can be used either:
+
+(1) for free under the terms of the GNU Affero General Public License (as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version); OR
+
+(2) under the terms of a paid-for Element Commercial License agreement between you and Element (the terms of which may vary depending on what you and Element have agreed to).
+Unless required by applicable law or agreed to in writing, software distributed under the Licenses is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the Licenses for the specific language governing permissions and limitations under the Licenses.
diff --git a/modules/banner/e2e/banner.spec.ts b/modules/banner/e2e/banner.spec.ts
new file mode 100644
index 0000000000..ecb8c583e8
--- /dev/null
+++ b/modules/banner/e2e/banner.spec.ts
@@ -0,0 +1,279 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type input } from "zod/mini";
+
+import { test as base, expect } from "../../playwright/element-web-test.ts";
+import { type ConfigSchema } from "../src/config.ts";
+
+const test = base.extend<{
+    // Resolver for when to respond to the navigation.json request
+    navigationJsonResolver: PromiseWithResolvers<void>;
+}>({
+    navigationJsonResolver: async ({}, use) => {
+        await use(Promise.withResolvers<void>());
+    },
+});
+
+test.describe("Banner", () => {
+    test.use({
+        displayName: "Timmy",
+        page: async ({ context, page, moduleDir }, use) => {
+            for (const path of ["logo.svg", "app1.png", "app2.png", "opendesk/"]) {
+                await context.route(`/${path}*`, async (route) => {
+                    const file = new URL(route.request().url()).pathname;
+                    await route.fulfill({ path: `${moduleDir}/e2e/fixture/${file}` });
+                });
+            }
+
+            await page.goto("/");
+            await use(page);
+        },
+    });
+
+    test("should not error if config is missing", async ({ page }) => {
+        await expect(page.getByText("Your Element is misconfigured")).not.toBeVisible();
+        await expect(page.getByText("Errors in module configuration")).not.toBeVisible();
+        // We don't take a screenshot as we don't want to assert Element's styling, only our own
+    });
+
+    test.describe("invalid config", () => {
+        test.use({
+            config: {
+                "io.element.element-web-modules.banner": {
+                    type: "invalid",
+                } as any,
+            },
+        });
+
+        test("should render error", async ({ page }) => {
+            await expect(page.getByText("Your Element is misconfigured")).toBeVisible();
+            await expect(page.getByText("Errors in module configuration")).toBeVisible();
+            // We don't take a screenshot as we don't want to assert Element's styling, only our own
+        });
+    });
+
+    const configs: input<ConfigSchema>[] = [
+        {
+            logo_url: "http://localhost:8080/logo.svg",
+            logo_link_url: "https://example.com/portal",
+            menu: {
+                type: "static",
+                categories: [
+                    {
+                        name: "Applications",
+                        links: [
+                            {
+                                icon_uri: "http://localhost:8080/app1.png",
+                                name: "E-Mail",
+                                link_url: "https://example.com/email",
+                                target: "app1",
+                            },
+                            {
+                                icon_uri: "http://localhost:8080/app2.png",
+                                name: "Riot",
+                                link_url: "https://riot.im/app",
+                                target: "riot-im",
+                            },
+                        ],
+                    },
+                    {
+                        name: "Links",
+                        links: [
+                            {
+                                icon_uri: "http://localhost:8080/app1.png",
+                                name: "Link",
+                                link_url: "https://example.com/link1",
+                            },
+                        ],
+                    },
+                ],
+            },
+        },
+        {
+            logo_url: "http://localhost:8080/opendesk/logomark.svg",
+            logo_link_url: "https://example.com/portal",
+            menu: {
+                type: "univention",
+                logo_url: "http://localhost:8080/opendesk/logofull.svg",
+                ics_url: "http://localhost:8080/ics/",
+            },
+            theme: {
+                triggerBackgroundColorHover: "#571EFA",
+                triggerBackgroundColorPressed: "#4519C2",
+            },
+        },
+    ];
+
+    for (const config of configs) {
+        const type = config.menu.type;
+
+        test.describe(`${type} config`, () => {
+            test.use({
+                config: {
+                    "io.element.element-web-modules.banner": config,
+                },
+            });
+
+            test.beforeEach(async ({ context, moduleDir, navigationJsonResolver }) => {
+                await context.route("http://localhost:8080/ics/navigation.json*", async (route) => {
+                    await navigationJsonResolver.promise;
+                    await route.fulfill({
+                        path: `${moduleDir}/e2e/fixture/navigation.json`,
+                        contentType: "application/json",
+                    });
+                });
+                await context.route("http://localhost:8080/ics/silent", async (route) => {
+                    await route.fulfill({
+                        path: `${moduleDir}/e2e/fixture/silent/index.html`,
+                        contentType: "text/html",
+                    });
+                });
+            });
+
+            test("should render", { tag: ["@screenshot"] }, async ({ page, axe, navigationJsonResolver }) => {
+                await expect(page.getByRole("heading", { name: "Be in your element" })).toBeVisible();
+                await expect(page.getByLabel("Show portal")).toHaveAttribute("href", "https://example.com/portal");
+
+                const nav = page.locator("nav");
+
+                const trigger = page.getByLabel("Show menu");
+                await expect(trigger).toBeVisible();
+
+                // Assert the banner looks as we expect
+                await expect(nav).toMatchAriaSnapshot();
+                await expect(nav).toMatchScreenshot(`${type}_nav.png`);
+
+                // Check hover styles
+                await trigger.hover();
+                await expect(nav).toMatchScreenshot(`${type}_nav_hover.png`);
+
+                await test.step("open menu", async () => {
+                    await trigger.click();
+                    const sidebar = page.getByRole("dialog");
+
+                    if (type === "univention") {
+                        await expect(sidebar).toMatchScreenshot(`${type}_menu_loading.png`);
+                        navigationJsonResolver.resolve();
+                    }
+
+                    const emailApp = page.getByText("E-Mail");
+                    await expect(emailApp).toHaveAttribute("href", "https://example.com/email");
+                    await emailApp.hover();
+
+                    // Assert the sidebar looks as we expect
+                    await expect(axe).toHaveNoViolations();
+                    await expect(sidebar).toMatchAriaSnapshot();
+                    await expect(page).toMatchScreenshot(`${type}_menu.png`, {
+                        // We exclude this as we don't want to assert Element's styling, only our own
+                        css: `
+                            #matrixchat {
+                                opacity: 0;
+                                background: orchid;
+                            }
+                        `,
+                    });
+
+                    // Verify that the #matrixchat root got shrunk to fit rather than exploding the viewport
+                    const bodyBoundingBox = await page.locator("body").boundingBox();
+                    const rootBoundingBox = await page.locator("#matrixchat").boundingBox();
+                    const headerBoundingBox = await page.getByTestId("banner").boundingBox();
+                    expect(rootBoundingBox!.height).toBeLessThan(bodyBoundingBox!.height);
+                    expect(rootBoundingBox!.height + headerBoundingBox!.height).toEqual(bodyBoundingBox!.height);
+                });
+
+                await test.step("close menu", async () => {
+                    await expect(axe).toHaveNoViolations();
+
+                    // Assert it closes by clicking the overlay
+                    await page.getByTestId("dialog-overlay").click();
+                    await expect(page.getByRole("dialog")).not.toBeVisible();
+                });
+            });
+        });
+    }
+
+    test.describe("univention config", () => {
+        test.use({
+            config: {
+                "io.element.element-web-modules.banner": {
+                    logo_url: "http://localhost:8080/opendesk/logomark.svg",
+                    logo_link_url: "https://example.com/portal",
+                    menu: {
+                        type: "univention",
+                        logo_url: "http://localhost:8080/opendesk/logofull.svg",
+                        ics_url: "http://localhost:8080/ics/",
+                    },
+                },
+            },
+        });
+
+        test.beforeEach(async ({ context }) => {
+            await context.route("http://localhost:8080/ics/silent", async (route) => {
+                await route.fulfill({ status: 500 });
+            });
+            await context.route("http://localhost:8080/ics/navigation.json*", async (route) => {
+                await route.fulfill({ status: 500 });
+            });
+        });
+
+        test("should render error", { tag: ["@screenshot"] }, async ({ page, axe }) => {
+            await expect(page.getByRole("heading", { name: "Be in your element" })).toBeVisible();
+            await expect(page.getByLabel("Show portal")).toHaveAttribute("href", "https://example.com/portal");
+
+            const trigger = page.getByLabel("Show menu");
+
+            await trigger.click();
+            const sidebar = page.getByRole("dialog");
+            await expect(sidebar.getByText("Failed to load")).toBeVisible();
+            await expect(sidebar).toMatchScreenshot("univention_error.png");
+            await expect(axe).toHaveNoViolations();
+        });
+    });
+
+    test.describe("static config", () => {
+        test.use({
+            config: {
+                "io.element.element-web-modules.banner": {
+                    logo_url: "https://domain/logo1.png",
+                    logo_link_url: "https://domain",
+                    title: "Title",
+                    menu: {
+                        type: "static",
+                        logo_url: "https://domain/logo2.png",
+                        logo_href: "https://domain/menu-link",
+                        categories: [
+                            {
+                                name: "Category 1",
+                                links: [
+                                    {
+                                        icon_uri: "https://domain/app1/logo.png",
+                                        name: "App 1",
+                                        link_url: "https://domain/app1",
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                },
+            },
+        });
+
+        test("should show a href on the menu logo if one is specified", async ({ page }) => {
+            await expect(page.getByLabel("Show portal")).toHaveAttribute("href", "https://domain");
+
+            const trigger = page.getByLabel("Show menu");
+            await trigger.click();
+
+            const sidebar = page.getByRole("dialog");
+            await expect(sidebar.getByRole("link", { name: "Show portal" })).toHaveAttribute(
+                "href",
+                "https://domain/menu-link",
+            );
+        });
+    });
+});
diff --git a/modules/banner/e2e/fixture/app1.png b/modules/banner/e2e/fixture/app1.png
new file mode 100644
index 0000000000..2c34416b88
Binary files /dev/null and b/modules/banner/e2e/fixture/app1.png differ
diff --git a/modules/banner/e2e/fixture/app2.png b/modules/banner/e2e/fixture/app2.png
new file mode 100644
index 0000000000..ee42954c78
Binary files /dev/null and b/modules/banner/e2e/fixture/app2.png differ
diff --git a/modules/banner/e2e/fixture/logo.svg b/modules/banner/e2e/fixture/logo.svg
new file mode 100644
index 0000000000..90c502cacf
--- /dev/null
+++ b/modules/banner/e2e/fixture/logo.svg
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14576)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+     y="0px"
+     width="789.322px" height="336.807px" viewBox="0 0 789.322 336.807" enable-background="new 0 0 789.322 336.807"
+     xml:space="preserve">
+<path d="M8.876,7.71v321.386h23.13v7.711H0V0h32.006v7.71H8.876z"/>
+    <path d="M97.989,109.594v16.264h0.463c4.338-6.191,9.563-10.998,15.684-14.406c6.117-3.402,13.129-5.11,21.027-5.11
+	c7.588,0,14.521,1.475,20.793,4.415c6.274,2.945,11.038,8.131,14.291,15.567c3.56-5.265,8.4-9.913,14.521-13.94
+	c6.117-4.025,13.358-6.042,21.724-6.042c6.351,0,12.234,0.776,17.66,2.325c5.418,1.549,10.065,4.027,13.938,7.434
+	c3.869,3.41,6.889,7.863,9.062,13.357c2.167,5.504,3.253,12.122,3.253,19.869v80.385h-32.993v-68.074
+	c0-4.025-0.154-7.82-0.465-11.385c-0.313-3.56-1.161-6.656-2.555-9.293c-1.395-2.631-3.45-4.724-6.157-6.274
+	c-2.711-1.543-6.391-2.322-11.037-2.322s-8.403,0.896-11.269,2.671c-2.868,1.784-5.112,4.109-6.737,6.971
+	c-1.626,2.869-2.711,6.12-3.252,9.762c-0.545,3.638-0.814,7.318-0.814,11.035v66.91h-32.991v-67.375c0-3.562-0.081-7.087-0.23-10.57
+	c-0.158-3.487-0.814-6.7-1.978-9.645c-1.162-2.94-3.099-5.304-5.809-7.088c-2.711-1.775-6.699-2.671-11.965-2.671
+	c-1.551,0-3.603,0.349-6.156,1.048c-2.556,0.697-5.036,2.016-7.435,3.949c-2.404,1.938-4.454,4.726-6.158,8.363
+	c-1.705,3.642-2.556,8.402-2.556,14.287v69.701h-32.99V109.594H97.989z"/>
+    <path d="M271.545,127.254c3.405-5.113,7.744-9.215,13.012-12.316c5.264-3.097,11.186-5.303,17.771-6.621
+	c6.582-1.315,13.205-1.976,19.865-1.976c6.042,0,12.158,0.428,18.354,1.277c6.195,0.855,11.85,2.522,16.962,4.997
+	c5.111,2.477,9.292,5.926,12.546,10.338c3.253,4.414,4.879,10.262,4.879,17.543v62.494c0,5.428,0.31,10.611,0.931,15.567
+	c0.615,4.959,1.701,8.676,3.251,11.153h-33.455c-0.621-1.86-1.126-3.755-1.511-5.693c-0.39-1.933-0.661-3.908-0.813-5.923
+	c-5.267,5.422-11.465,9.217-18.585,11.386c-7.127,2.163-14.407,3.251-21.842,3.251c-5.733,0-11.077-0.698-16.033-2.09
+	c-4.958-1.395-9.293-3.562-13.01-6.51c-3.718-2.938-6.622-6.656-8.713-11.147s-3.138-9.84-3.138-16.033
+	c0-6.813,1.199-12.43,3.604-16.84c2.399-4.417,5.495-7.939,9.295-10.575c3.793-2.632,8.129-4.607,13.01-5.923
+	c4.878-1.315,9.795-2.358,14.752-3.137c4.957-0.772,9.835-1.393,14.638-1.857c4.801-0.466,9.062-1.164,12.779-2.093
+	c3.718-0.929,6.658-2.282,8.829-4.065c2.165-1.781,3.172-4.375,3.02-7.785c0-3.56-0.58-6.389-1.742-8.479
+	c-1.161-2.09-2.711-3.719-4.646-4.88c-1.937-1.161-4.183-1.936-6.737-2.325c-2.557-0.382-5.309-0.58-8.248-0.58
+	c-6.506,0-11.617,1.395-15.335,4.183c-3.716,2.788-5.889,7.437-6.506,13.94h-32.991C266.2,138.793,268.133,132.362,271.545,127.254z
+	 M336.714,173.837c-2.09,0.696-4.337,1.275-6.736,1.741c-2.402,0.465-4.918,0.853-7.551,1.161c-2.635,0.313-5.268,0.698-7.899,1.163
+	c-2.48,0.461-4.919,1.086-7.317,1.857c-2.404,0.779-4.495,1.822-6.274,3.138c-1.784,1.317-3.216,2.985-4.3,4.994
+	c-1.085,2.014-1.626,4.571-1.626,7.668c0,2.94,0.541,5.422,1.626,7.431c1.084,2.017,2.558,3.604,4.416,4.765
+	s4.025,1.976,6.507,2.438c2.475,0.466,5.031,0.698,7.665,0.698c6.505,0,11.537-1.082,15.103-3.253
+	c3.561-2.166,6.192-4.762,7.899-7.785c1.702-3.019,2.749-6.072,3.137-9.174c0.384-3.097,0.58-5.576,0.58-7.434V170.93
+	C340.548,172.172,338.806,173.139,336.714,173.837z"/>
+    <path d="M461.826,109.594v22.072h-24.161v59.479c0,5.573,0.928,9.292,2.788,11.149c1.856,1.859,5.576,2.788,11.152,2.788
+	c1.859,0,3.638-0.076,5.343-0.232c1.703-0.152,3.33-0.388,4.878-0.696v25.557c-2.788,0.465-5.887,0.773-9.293,0.931
+	c-3.407,0.149-6.737,0.23-9.99,0.23c-5.111,0-9.953-0.35-14.521-1.048c-4.571-0.695-8.597-2.047-12.081-4.063
+	c-3.486-2.011-6.236-4.88-8.248-8.597c-2.016-3.714-3.021-8.595-3.021-14.639v-70.859h-19.98v-22.072h19.98V73.582h32.992v36.012
+	H461.826z"/>
+    <path d="M508.989,109.594v22.306h0.465c1.546-3.72,3.636-7.163,6.272-10.341c2.634-3.172,5.652-5.885,9.06-8.131
+	c3.405-2.242,7.047-3.985,10.923-5.228c3.868-1.237,7.898-1.859,12.081-1.859c2.168,0,4.566,0.39,7.202,1.163v30.67
+	c-1.551-0.312-3.41-0.584-5.576-0.814c-2.17-0.233-4.26-0.35-6.274-0.35c-6.041,0-11.152,1.01-15.332,3.021
+	c-4.182,2.014-7.55,4.761-10.107,8.247c-2.555,3.487-4.379,7.55-5.462,12.198c-1.083,4.645-1.625,9.682-1.625,15.102v54.133h-32.991
+	V109.594H508.989z"/>
+    <path d="M568.931,91.006V63.823h32.994v27.183H568.931z M601.925,109.594v120.117h-32.994V109.594H601.925z"/>
+    <path d="M619.116,109.594h37.637l21.144,31.365l20.911-31.365h36.476l-39.496,56.226l44.377,63.892h-37.64l-25.093-37.87
+	l-25.094,37.87H615.4l43.213-63.193L619.116,109.594z"/>
+    <path d="M780.444,329.096V7.71h-23.13V0h32.008v336.807h-32.008v-7.711H780.444z"/>
+</svg>
\ No newline at end of file
diff --git a/modules/banner/e2e/fixture/navigation.json b/modules/banner/e2e/fixture/navigation.json
new file mode 100644
index 0000000000..7365ff1371
--- /dev/null
+++ b/modules/banner/e2e/fixture/navigation.json
@@ -0,0 +1,87 @@
+{
+    "categories": [
+        {
+            "identifier": "applications",
+            "display_name": "Anwendungen",
+            "entries": [
+                {
+                    "identifier": "app1",
+                    "display_name": "Portal",
+                    "icon_url": "http://localhost:8080/opendesk/app1.svg",
+                    "link": "https://example.com/app1",
+                    "target": "_blank"
+                },
+                {
+                    "identifier": "app2",
+                    "display_name": "Aufgaben",
+                    "icon_url": "http://localhost:8080/opendesk/app2.svg",
+                    "link": "https://example.com/app2",
+                    "target": "_blank"
+                },
+                {
+                    "identifier": "app3",
+                    "display_name": "Chat",
+                    "icon_url": "http://localhost:8080/opendesk/app3.svg",
+                    "link": "https://example.com/app3",
+                    "target": "_blank"
+                },
+                {
+                    "identifier": "app4",
+                    "display_name": "Dateien",
+                    "icon_url": "http://localhost:8080/opendesk/app4.svg",
+                    "link": "https://example.com/ap4",
+                    "target": "_blank"
+                },
+                {
+                    "identifier": "app5",
+                    "display_name": "E-Mail",
+                    "icon_url": "http://localhost:8080/opendesk/app5.svg",
+                    "link": "https://example.com/email",
+                    "target": "_blank"
+                },
+                {
+                    "identifier": "app6",
+                    "display_name": "Kelender",
+                    "icon_url": "http://localhost:8080/opendesk/app6.svg",
+                    "link": "https://example.com/app6",
+                    "target": "_blank"
+                },
+                {
+                    "identifier": "app7",
+                    "display_name": "Kontakte",
+                    "icon_url": "http://localhost:8080/opendesk/app7.svg",
+                    "link": "https://example.com/app7",
+                    "target": "_blank"
+                },
+                {
+                    "identifier": "app8",
+                    "display_name": "Notizen",
+                    "icon_url": "http://localhost:8080/opendesk/app8.svg",
+                    "link": "https://example.com/app8",
+                    "target": "_blank"
+                },
+                {
+                    "identifier": "app9",
+                    "display_name": "Projekte",
+                    "icon_url": "http://localhost:8080/opendesk/app9.svg",
+                    "link": "https://example.com/app9",
+                    "target": "_blank"
+                },
+                {
+                    "identifier": "app10",
+                    "display_name": "Videokonferenz",
+                    "icon_url": "http://localhost:8080/opendesk/app10.svg",
+                    "link": "https://example.com/app10",
+                    "target": "_blank"
+                },
+                {
+                    "identifier": "app11",
+                    "display_name": "Wiki",
+                    "icon_url": "http://localhost:8080/opendesk/app11.svg",
+                    "link": "https://example.com/app11",
+                    "target": "_blank"
+                }
+            ]
+        }
+    ]
+}
diff --git a/modules/banner/e2e/fixture/opendesk/app1.svg b/modules/banner/e2e/fixture/opendesk/app1.svg
new file mode 100644
index 0000000000..758e28621f
--- /dev/null
+++ b/modules/banner/e2e/fixture/opendesk/app1.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0001 5.96045L6.48535 10.9613V18.4604H10.1625V13.7727H13.8397V18.4604H17.5148V10.9613L12.0001 5.96045Z" fill="#571EFA"/>
+</svg>
diff --git a/modules/banner/e2e/fixture/opendesk/app10.svg b/modules/banner/e2e/fixture/opendesk/app10.svg
new file mode 100644
index 0000000000..147057229c
--- /dev/null
+++ b/modules/banner/e2e/fixture/opendesk/app10.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.8718 7.93982H7.49831C6.61769 7.93982 5.90381 8.6537 5.90381 9.53432V15.9078C5.90381 16.7884 6.61769 17.5023 7.49831 17.5023H13.8718C14.7524 17.5023 15.4663 16.7884 15.4663 15.9078V9.53432C15.4663 8.6537 14.7524 7.93982 13.8718 7.93982Z" fill="#571EFA"/>
+<path d="M20.5666 16.2273C18.6303 16.2273 17.0605 14.6575 17.0605 12.7212C17.0605 10.7848 18.6303 9.21509 20.5666 9.21509V16.2273Z" fill="#341291"/>
+</svg>
diff --git a/modules/banner/e2e/fixture/opendesk/app11.svg b/modules/banner/e2e/fixture/opendesk/app11.svg
new file mode 100644
index 0000000000..d853d42473
--- /dev/null
+++ b/modules/banner/e2e/fixture/opendesk/app11.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.8906 16.7064C14.8906 18.0265 13.8201 19.097 12.5 19.097C11.1799 19.097 10.1094 18.0265 10.1094 16.7064V15.9103H14.8906V16.7064Z" fill="#341291"/>
+<path d="M12.5 6.3457C9.85974 6.3457 7.71875 8.4867 7.71875 11.127C7.71875 12.3526 8.18428 13.4681 8.94442 14.3137H16.0556C16.8157 13.4681 17.2812 12.3526 17.2812 11.127C17.2812 8.4867 15.1403 6.3457 12.5 6.3457Z" fill="#571EFA"/>
+</svg>
diff --git a/modules/banner/e2e/fixture/opendesk/app2.svg b/modules/banner/e2e/fixture/opendesk/app2.svg
new file mode 100644
index 0000000000..a537b52199
--- /dev/null
+++ b/modules/banner/e2e/fixture/opendesk/app2.svg
@@ -0,0 +1,6 @@
+<svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.60352 12.0848C7.92382 12.0848 8.99414 11.0145 8.99414 9.69421C8.99414 8.37391 7.92382 7.30359 6.60352 7.30359C5.28321 7.30359 4.21289 8.37391 4.21289 9.69421C4.21289 11.0145 5.28321 12.0848 6.60352 12.0848Z" fill="#571EFA"/>
+<path d="M20.1509 8.89624H10.5884V10.4907H20.1509V8.89624Z" fill="#341291"/>
+<path d="M6.60352 18.1395C7.92382 18.1395 8.99414 17.0692 8.99414 15.7489C8.99414 14.4286 7.92382 13.3583 6.60352 13.3583C5.28321 13.3583 4.21289 14.4286 4.21289 15.7489C4.21289 17.0692 5.28321 18.1395 6.60352 18.1395Z" fill="#571EFA"/>
+<path d="M20.1509 14.9509H10.5884V16.5454H20.1509V14.9509Z" fill="#341291"/>
+</svg>
diff --git a/modules/banner/e2e/fixture/opendesk/app3.svg b/modules/banner/e2e/fixture/opendesk/app3.svg
new file mode 100644
index 0000000000..90f21f0667
--- /dev/null
+++ b/modules/banner/e2e/fixture/opendesk/app3.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1368 11.1263C14.0161 11.1263 14.7313 10.4134 14.7313 9.53177V7.93727C14.7313 7.05794 14.0183 6.34277 13.1368 6.34277H6.761C5.88167 6.34277 5.1665 7.05569 5.1665 7.93727V14.313L8.35325 11.1263H13.1345H13.1368Z" fill="#341291"/>
+<path d="M18.2373 12.7206H11.8616C10.9823 12.7206 10.2671 13.4335 10.2671 14.3151V15.9096C10.2671 16.7889 10.98 17.5041 11.8616 17.5041H16.6428L19.8296 20.6908V14.3151C19.8296 13.4357 19.1167 12.7206 18.2351 12.7206H18.2373Z" fill="#571EFA"/>
+</svg>
diff --git a/modules/banner/e2e/fixture/opendesk/app4.svg b/modules/banner/e2e/fixture/opendesk/app4.svg
new file mode 100644
index 0000000000..6c78f1bf58
--- /dev/null
+++ b/modules/banner/e2e/fixture/opendesk/app4.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.06592 10.2686H17.2224C18.1017 10.2686 18.8168 10.9837 18.8168 11.863V16.644C18.8168 17.5233 18.1017 18.2384 17.2224 18.2384H7.66034C6.78105 18.2384 6.06592 17.5233 6.06592 16.644V10.2686Z" fill="#571EFA"/>
+<path d="M11.4834 8.67372H6.06592V7.71796C6.06592 6.83642 6.7788 6.12354 7.66034 6.12354H10.2105L11.4856 8.67372H11.4834Z" fill="#341291"/>
+</svg>
diff --git a/modules/banner/e2e/fixture/opendesk/app5.svg b/modules/banner/e2e/fixture/opendesk/app5.svg
new file mode 100644
index 0000000000..90d15399f3
--- /dev/null
+++ b/modules/banner/e2e/fixture/opendesk/app5.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5388 12.7107L18.9609 7.89411C18.6516 7.61951 18.2459 7.45129 17.7982 7.45129H7.2794C6.83411 7.45129 6.42593 7.61951 6.1167 7.89411L12.5388 12.7107Z" fill="#571EFA"/>
+<path d="M14.0008 13.8069L12.5387 14.9028L11.0767 13.8069L5.52539 9.64343V16.2164C5.52539 17.1837 6.3096 17.9704 7.27934 17.9704H17.7981C18.7654 17.9704 19.552 17.1862 19.552 16.2164V9.64343L14.0008 13.8069Z" fill="#341291"/>
+</svg>
diff --git a/modules/banner/e2e/fixture/opendesk/app6.svg b/modules/banner/e2e/fixture/opendesk/app6.svg
new file mode 100644
index 0000000000..dbdba6b547
--- /dev/null
+++ b/modules/banner/e2e/fixture/opendesk/app6.svg
@@ -0,0 +1,7 @@
+<svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.67479 13.6771H4.21289V18.4584H8.67479V13.6771Z" fill="#571EFA"/>
+<path d="M14.7309 13.6771H10.269V18.4584H14.7309V13.6771Z" fill="#571EFA"/>
+<path d="M8.67479 7.30359H4.21289V12.0848H8.67479V7.30359Z" fill="#341291"/>
+<path d="M14.7309 7.30359H10.269V12.0848H14.7309V7.30359Z" fill="#571EFA"/>
+<path d="M20.7876 7.30359H16.3257V12.0848H20.7876V7.30359Z" fill="#571EFA"/>
+</svg>
diff --git a/modules/banner/e2e/fixture/opendesk/app7.svg b/modules/banner/e2e/fixture/opendesk/app7.svg
new file mode 100644
index 0000000000..e88e54cbfe
--- /dev/null
+++ b/modules/banner/e2e/fixture/opendesk/app7.svg
@@ -0,0 +1,6 @@
+<svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.03809 12.4022C9.35839 12.4022 10.4287 11.3319 10.4287 10.0116C10.4287 8.69129 9.35839 7.62097 8.03809 7.62097C6.71778 7.62097 5.64746 8.69129 5.64746 10.0116C5.64746 11.3319 6.71778 12.4022 8.03809 12.4022Z" fill="#571EFA"/>
+<path d="M16.9619 12.4022C18.2822 12.4022 19.3525 11.3319 19.3525 10.0116C19.3525 8.69129 18.2822 7.62097 16.9619 7.62097C15.6416 7.62097 14.5713 8.69129 14.5713 10.0116C14.5713 11.3319 15.6416 12.4022 16.9619 12.4022Z" fill="#341291"/>
+<path d="M4.21289 17.8214C4.21289 15.7097 5.92434 13.996 8.03834 13.996C10.1523 13.996 11.8638 15.7074 11.8638 17.8214H4.21289Z" fill="#571EFA"/>
+<path d="M13.1367 17.8214C13.1367 15.7097 14.8482 13.996 16.9622 13.996C19.0762 13.996 20.7876 15.7074 20.7876 17.8214H13.1367Z" fill="#341291"/>
+</svg>
diff --git a/modules/banner/e2e/fixture/opendesk/app8.svg b/modules/banner/e2e/fixture/opendesk/app8.svg
new file mode 100644
index 0000000000..1658f680ec
--- /dev/null
+++ b/modules/banner/e2e/fixture/opendesk/app8.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.2369 17.5029H6.79199V19.0974H18.2369V17.5029Z" fill="#341291"/>
+<path d="M14.7599 6.78423L15.8867 7.91095C16.5096 8.53391 16.5096 9.54144 15.8867 10.1644L14.6902 11.3608L10.1429 15.9082H6.7627V12.528L11.3101 7.98067L12.5065 6.78423C13.1294 6.16128 14.137 6.16128 14.7599 6.78423Z" fill="#571EFA"/>
+</svg>
diff --git a/modules/banner/e2e/fixture/opendesk/app9.svg b/modules/banner/e2e/fixture/opendesk/app9.svg
new file mode 100644
index 0000000000..590bc7dc27
--- /dev/null
+++ b/modules/banner/e2e/fixture/opendesk/app9.svg
@@ -0,0 +1,5 @@
+<svg width="25" height="26" viewBox="0 0 25 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.12451 19.095L6.12451 6.3457H4.53001L4.53001 19.095H6.12451Z" fill="#571EFA"/>
+<path d="M18.9089 13.5161H12.5354C11.6548 13.5161 10.9409 14.23 10.9409 15.1106V16.7029C10.9409 17.5835 11.6548 18.2974 12.5354 18.2974H18.9089C19.7895 18.2974 20.5034 17.5835 20.5034 16.7029V15.1106C20.5034 14.23 19.7895 13.5161 18.9089 13.5161Z" fill="#571EFA"/>
+<path d="M14.1277 7.1427H9.31276C8.43214 7.1427 7.71826 7.85658 7.71826 8.7372V10.3295C7.71826 11.2101 8.43214 11.924 9.31276 11.924H14.1277C15.0084 11.924 15.7222 11.2101 15.7222 10.3295V8.7372C15.7222 7.85658 15.0084 7.1427 14.1277 7.1427Z" fill="#341291"/>
+</svg>
diff --git a/modules/banner/e2e/fixture/opendesk/logofull.svg b/modules/banner/e2e/fixture/opendesk/logofull.svg
new file mode 100644
index 0000000000..eaadffcfe3
--- /dev/null
+++ b/modules/banner/e2e/fixture/opendesk/logofull.svg
@@ -0,0 +1,13 @@
+<svg width="113" height="31" viewBox="0 0 113 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="101" height="31" fill="white"/>
+<path d="M20.7634 21.3042V21.6881C20.7634 23.3086 19.4467 24.6263 17.8274 24.6263H10.936C9.31669 24.6263 8 23.3086 8 21.6881V14.7914C8 13.1708 9.31669 11.8531 10.936 11.8531H11.3196V21.306H20.7652L20.7634 21.3042Z" fill="#927AFA"/>
+<path d="M20.8913 19.0041H13.6162V10.9555C13.6162 8.20836 15.8497 5.97314 18.5948 5.97314H20.8931C24.0597 5.97314 26.6372 8.55266 26.6372 11.7216V13.2538C26.6372 16.4228 24.0597 19.0023 20.8931 19.0023L20.8913 19.0041ZM16.934 15.6819H20.8913C22.2278 15.6819 23.3157 14.5932 23.3157 13.2556V11.7234C23.3157 10.3859 22.2278 9.29713 20.8913 9.29713H18.593C17.6779 9.29713 16.934 10.0416 16.934 10.9573V15.6837V15.6819Z" fill="#571EFA"/>
+<path d="M36.0164 12.3705C38.6912 12.3705 40.4006 14.3353 40.4006 16.7418C40.4006 19.1482 38.6912 21.1131 36.0164 21.1131C33.3416 21.1131 31.6143 19.1482 31.6143 16.7418C31.6143 14.3353 33.3236 12.3705 36.0164 12.3705ZM36.0164 20.0459C38.0644 20.0459 39.1487 18.5209 39.1487 16.7418C39.1487 14.9626 38.0644 13.4376 36.0164 13.4376C33.9684 13.4376 32.8679 14.9626 32.8679 16.7418C32.8679 18.5209 33.9504 20.0459 36.0164 20.0459Z" fill="black"/>
+<path d="M42.0273 12.5399H43.281V14.6742C43.8736 13.2682 45.1272 12.3705 46.9555 12.3705C49.3096 12.3705 50.9001 14.1496 50.9001 16.758C50.9001 19.3664 49.3096 21.1131 46.9555 21.1131C45.093 21.1131 43.8574 20.1811 43.281 18.8094V24.0279H42.0273V12.5399ZM46.5646 20.0459C48.2577 20.0459 49.6465 18.995 49.6465 16.758C49.6465 14.521 48.2577 13.4376 46.5646 13.4376C44.8715 13.4376 43.3314 14.539 43.3314 16.758C43.3314 18.977 44.8895 20.0459 46.5646 20.0459Z" fill="black"/>
+<path d="M56.2153 12.3706C58.6199 12.3706 60.2284 13.8793 60.2284 16.4535V16.9618H53.4739C53.5243 18.7247 54.4213 20.0785 56.2838 20.0785C57.8238 20.0785 58.7226 19.2655 59.027 18.0109H60.2626C59.9078 19.5016 58.8919 21.1114 56.318 21.1114C53.5927 21.1114 52.2725 19.078 52.2725 16.6211C52.2725 13.91 53.8467 12.3688 56.2171 12.3688L56.2153 12.3706ZM58.991 15.9794C58.8721 14.3354 57.7716 13.4035 56.1973 13.4035C54.7239 13.4035 53.6234 14.3516 53.4883 15.9794H58.991Z" fill="black"/>
+<path d="M61.9883 12.5399H63.2419V14.8779C63.6994 13.3186 64.8846 12.3705 66.7291 12.3705C68.5735 12.3705 69.7425 13.5908 69.7425 15.7936V20.9436H68.4727V15.8946C68.4727 14.1496 67.7954 13.4376 66.3058 13.4376C64.4091 13.4376 63.2419 15.0311 63.2419 17.2844V20.9436H61.9883V12.5399Z" fill="black"/>
+<path d="M71.8589 8.9978H76.2448C77.4859 8.9978 78.581 9.15102 79.5303 9.45566C80.4777 9.7603 81.254 10.3534 81.8574 11.2348C82.4608 12.1163 82.7634 13.3583 82.7634 14.9626C82.7634 16.5669 82.4608 17.8269 81.8574 18.7066C81.254 19.588 80.4777 20.1811 79.5303 20.4857C78.581 20.7904 77.4877 20.9436 76.2448 20.9436H71.8589V8.9978ZM76.2448 18.5552C77.1022 18.5552 77.7885 18.4867 78.3018 18.3515C78.8152 18.2163 79.2331 17.8918 79.5555 17.3763C79.8779 16.8625 80.0382 16.0568 80.0382 14.9626C80.0382 13.8684 79.8743 13.0771 79.5483 12.5561C79.2204 12.037 78.8026 11.7089 78.2946 11.5737C77.7867 11.4385 77.104 11.37 76.2466 11.37H74.5697V18.5552H76.2466H76.2448Z" fill="black"/>
+<path d="M84.5322 14.2759C84.9105 13.6143 85.4346 13.1096 86.1065 12.7599C86.7783 12.4102 87.5493 12.2354 88.4174 12.2354C89.8404 12.2354 90.9518 12.6139 91.7533 13.371C92.5548 14.1281 92.9547 15.1736 92.9547 16.5057V17.2177H86.555C86.6 17.827 86.7928 18.3047 87.1314 18.649C87.47 18.9933 87.9329 19.1663 88.5201 19.1663C89.0281 19.1663 89.4477 19.06 89.781 18.8437C90.1142 18.6292 90.3249 18.3245 90.4168 17.9279H92.9727C92.8376 18.8761 92.3819 19.6458 91.6092 20.2317C90.8365 20.8193 89.8116 21.1131 88.5363 21.1131C87.5997 21.1131 86.7873 20.9239 86.0975 20.5453C85.4094 20.1668 84.8817 19.6386 84.5142 18.9608C84.1468 18.2831 83.9648 17.5043 83.9648 16.6229C83.9648 15.7414 84.154 14.9374 84.5322 14.2759ZM90.4492 15.8261C90.4042 15.2835 90.2042 14.8653 89.8476 14.5715C89.4928 14.2777 89.0317 14.1317 88.4679 14.1317C87.9041 14.1317 87.4664 14.2795 87.1224 14.5715C86.7783 14.8653 86.5838 15.2835 86.5388 15.8261H90.4492Z" fill="black"/>
+<path d="M95.2406 20.2821C94.4949 19.7287 94.1221 18.9157 94.1221 17.8414H96.696C96.696 18.3281 96.8491 18.6868 97.1535 18.9175C97.4579 19.15 97.9262 19.2654 98.5585 19.2654C99.0214 19.2654 99.3564 19.2059 99.5653 19.087C99.7743 18.968 99.8788 18.7787 99.8788 18.5191C99.8788 18.3389 99.8175 18.1911 99.6932 18.0793C99.569 17.9657 99.3708 17.8702 99.1006 17.7909L96.4925 17.0789C95.9161 16.9329 95.4207 16.6697 95.0029 16.2911C94.585 15.9126 94.376 15.3898 94.376 14.7229C94.376 13.9207 94.7057 13.306 95.3667 12.8752C96.0278 12.4462 96.95 12.2317 98.1352 12.2317C99.4447 12.2317 100.466 12.4949 101.199 13.0194C101.932 13.544 102.3 14.3047 102.3 15.2979H99.7257C99.7257 14.4741 99.2015 14.0613 98.1514 14.0613C97.7785 14.0613 97.4849 14.1244 97.2706 14.247C97.0563 14.3714 96.9482 14.5354 96.9482 14.7391C96.9482 15.0888 97.258 15.343 97.8794 15.5016L99.877 15.9937C100.655 16.1866 101.28 16.4822 101.748 16.8842C102.217 17.2844 102.451 17.8468 102.451 18.5696C102.451 19.3952 102.121 20.0243 101.46 20.4587C100.799 20.8932 99.8211 21.1113 98.5224 21.1113C97.0779 21.1113 95.9827 20.8337 95.237 20.2803L95.2406 20.2821Z" fill="black"/>
+<path d="M103.875 8.4895H106.449V15.7071L109.852 12.4029H113L108.751 16.5543L112.984 20.9436H109.852L106.449 17.3511V20.9436H103.875V8.4895Z" fill="black"/>
+</svg>
diff --git a/modules/banner/e2e/fixture/opendesk/logomark.svg b/modules/banner/e2e/fixture/opendesk/logomark.svg
new file mode 100644
index 0000000000..d23f0ec64c
--- /dev/null
+++ b/modules/banner/e2e/fixture/opendesk/logomark.svg
@@ -0,0 +1,4 @@
+<svg width="35" height="36" viewBox="0 0 35 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.6929 25.8326V26.3232C21.6929 28.394 20.0294 30.0778 17.9837 30.0778H9.27732C7.23157 30.0778 5.56812 28.394 5.56812 26.3232V17.5102C5.56812 15.4394 7.23157 13.7556 9.27732 13.7556H9.76201V25.8349H21.6952L21.6929 25.8326Z" fill="#AA98FB"/>
+<path d="M21.8544 22.8933H12.6633V12.6084C12.6633 9.09797 15.4851 6.2417 18.953 6.2417H21.8567C25.8572 6.2417 29.1135 9.53793 29.1135 13.5874V15.5453C29.1135 19.5948 25.8572 22.891 21.8567 22.891L21.8544 22.8933ZM16.855 18.6481H21.8544C23.5429 18.6481 24.9173 17.2568 24.9173 15.5476V13.5897C24.9173 11.8805 23.5429 10.4893 21.8544 10.4893H18.9508C17.7948 10.4893 16.855 11.4406 16.855 12.6107V18.6504V18.6481Z" fill="#571EFA"/>
+</svg>
diff --git a/modules/banner/e2e/fixture/silent/index.html b/modules/banner/e2e/fixture/silent/index.html
new file mode 100644
index 0000000000..969c920d77
--- /dev/null
+++ b/modules/banner/e2e/fixture/silent/index.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Univention Silent Login</title>
+    </head>
+    <body></body>
+</html>
diff --git a/modules/banner/e2e/snapshots/banner.spec.ts/Banner-static-config-should-render-1-linux.aria.yml b/modules/banner/e2e/snapshots/banner.spec.ts/Banner-static-config-should-render-1-linux.aria.yml
new file mode 100644
index 0000000000..602fa03a65
--- /dev/null
+++ b/modules/banner/e2e/snapshots/banner.spec.ts/Banner-static-config-should-render-1-linux.aria.yml
@@ -0,0 +1,6 @@
+- navigation:
+      - button "Show menu":
+            - img
+      - link "Show portal":
+            - /url: https://example.com/portal
+            - img "Portal logo"
diff --git a/modules/banner/e2e/snapshots/banner.spec.ts/Banner-static-config-should-render-2-linux.aria.yml b/modules/banner/e2e/snapshots/banner.spec.ts/Banner-static-config-should-render-2-linux.aria.yml
new file mode 100644
index 0000000000..3ce946d830
--- /dev/null
+++ b/modules/banner/e2e/snapshots/banner.spec.ts/Banner-static-config-should-render-2-linux.aria.yml
@@ -0,0 +1,13 @@
+- dialog "Portal logo Close menu":
+      - heading "Portal logo Close menu" [level=2]:
+            - img "Portal logo"
+            - button "Close menu":
+                  - img
+      - heading "Applications" [level=2]
+      - link "E-Mail":
+            - /url: https://example.com/email
+      - link "Riot":
+            - /url: https://riot.im/app
+      - heading "Links" [level=2]
+      - link "Link":
+            - /url: https://example.com/link1
diff --git a/modules/banner/e2e/snapshots/banner.spec.ts/Banner-univention-config-should-render-1-linux.aria.yml b/modules/banner/e2e/snapshots/banner.spec.ts/Banner-univention-config-should-render-1-linux.aria.yml
new file mode 100644
index 0000000000..602fa03a65
--- /dev/null
+++ b/modules/banner/e2e/snapshots/banner.spec.ts/Banner-univention-config-should-render-1-linux.aria.yml
@@ -0,0 +1,6 @@
+- navigation:
+      - button "Show menu":
+            - img
+      - link "Show portal":
+            - /url: https://example.com/portal
+            - img "Portal logo"
diff --git a/modules/banner/e2e/snapshots/banner.spec.ts/Banner-univention-config-should-render-2-linux.aria.yml b/modules/banner/e2e/snapshots/banner.spec.ts/Banner-univention-config-should-render-2-linux.aria.yml
new file mode 100644
index 0000000000..47446acc17
--- /dev/null
+++ b/modules/banner/e2e/snapshots/banner.spec.ts/Banner-univention-config-should-render-2-linux.aria.yml
@@ -0,0 +1,28 @@
+- dialog "Portal logo Close menu":
+      - heading "Portal logo Close menu" [level=2]:
+            - img "Portal logo"
+            - button "Close menu":
+                  - img
+      - heading "Anwendungen" [level=2]
+      - link "Portal":
+            - /url: https://example.com/app1
+      - link "Aufgaben":
+            - /url: https://example.com/app2
+      - link "Chat":
+            - /url: https://example.com/app3
+      - link "Dateien":
+            - /url: https://example.com/ap4
+      - link "E-Mail":
+            - /url: https://example.com/email
+      - link "Kelender":
+            - /url: https://example.com/app6
+      - link "Kontakte":
+            - /url: https://example.com/app7
+      - link "Notizen":
+            - /url: https://example.com/app8
+      - link "Projekte":
+            - /url: https://example.com/app9
+      - link "Videokonferenz":
+            - /url: https://example.com/app10
+      - link "Wiki":
+            - /url: https://example.com/app11
diff --git a/modules/banner/e2e/snapshots/banner.spec.ts/static-menu-linux.png b/modules/banner/e2e/snapshots/banner.spec.ts/static-menu-linux.png
new file mode 100644
index 0000000000..81982d60c0
Binary files /dev/null and b/modules/banner/e2e/snapshots/banner.spec.ts/static-menu-linux.png differ
diff --git a/modules/banner/e2e/snapshots/banner.spec.ts/static-nav-hover-linux.png b/modules/banner/e2e/snapshots/banner.spec.ts/static-nav-hover-linux.png
new file mode 100644
index 0000000000..dfd945eff1
Binary files /dev/null and b/modules/banner/e2e/snapshots/banner.spec.ts/static-nav-hover-linux.png differ
diff --git a/modules/banner/e2e/snapshots/banner.spec.ts/static-nav-linux.png b/modules/banner/e2e/snapshots/banner.spec.ts/static-nav-linux.png
new file mode 100644
index 0000000000..3f0e72f4e7
Binary files /dev/null and b/modules/banner/e2e/snapshots/banner.spec.ts/static-nav-linux.png differ
diff --git a/modules/banner/e2e/snapshots/banner.spec.ts/univention-error-linux.png b/modules/banner/e2e/snapshots/banner.spec.ts/univention-error-linux.png
new file mode 100644
index 0000000000..141dc9ece0
Binary files /dev/null and b/modules/banner/e2e/snapshots/banner.spec.ts/univention-error-linux.png differ
diff --git a/modules/banner/e2e/snapshots/banner.spec.ts/univention-menu-linux.png b/modules/banner/e2e/snapshots/banner.spec.ts/univention-menu-linux.png
new file mode 100644
index 0000000000..90f47fc897
Binary files /dev/null and b/modules/banner/e2e/snapshots/banner.spec.ts/univention-menu-linux.png differ
diff --git a/modules/banner/e2e/snapshots/banner.spec.ts/univention-menu-loading-linux.png b/modules/banner/e2e/snapshots/banner.spec.ts/univention-menu-loading-linux.png
new file mode 100644
index 0000000000..b6ad990619
Binary files /dev/null and b/modules/banner/e2e/snapshots/banner.spec.ts/univention-menu-loading-linux.png differ
diff --git a/modules/banner/e2e/snapshots/banner.spec.ts/univention-nav-hover-linux.png b/modules/banner/e2e/snapshots/banner.spec.ts/univention-nav-hover-linux.png
new file mode 100644
index 0000000000..01bf1563e1
Binary files /dev/null and b/modules/banner/e2e/snapshots/banner.spec.ts/univention-nav-hover-linux.png differ
diff --git a/modules/banner/e2e/snapshots/banner.spec.ts/univention-nav-linux.png b/modules/banner/e2e/snapshots/banner.spec.ts/univention-nav-linux.png
new file mode 100644
index 0000000000..691c7e6093
Binary files /dev/null and b/modules/banner/e2e/snapshots/banner.spec.ts/univention-nav-linux.png differ
diff --git a/modules/banner/package.json b/modules/banner/package.json
new file mode 100644
index 0000000000..c165405c92
--- /dev/null
+++ b/modules/banner/package.json
@@ -0,0 +1,35 @@
+{
+    "name": "@element-hq/element-web-module-banner",
+    "private": true,
+    "version": "1.0.0",
+    "type": "module",
+    "main": "lib/index.js",
+    "license": "SEE LICENSE IN README.md",
+    "scripts": {
+        "build": "nx build",
+        "lint:types": "nx lint:types"
+    },
+    "devDependencies": {
+        "@arcmantle/vite-plugin-import-css-sheet": "^1.0.12",
+        "@element-hq/element-web-module-api": "workspace:*",
+        "@types/node": "catalog:",
+        "@types/react": "catalog:",
+        "@types/react-dom": "catalog:",
+        "@vitejs/plugin-react": "catalog:",
+        "matrix-web-i18n": "^3.6.0",
+        "matrix-widget-api": "^1.17.0",
+        "react": "catalog:",
+        "typescript": "catalog:",
+        "vite": "catalog:",
+        "vite-plugin-node-polyfills": "catalog:",
+        "vite-plugin-svgr": "catalog:"
+    },
+    "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.6",
+        "@vector-im/compound-design-tokens": "^10.0.0",
+        "@vector-im/compound-web": "^9.0.0",
+        "motion": "^12.4.10",
+        "styled-components": "^6.1.18",
+        "zod": "^4.0.0"
+    }
+}
diff --git a/modules/banner/project.json b/modules/banner/project.json
new file mode 100644
index 0000000000..83c471023e
--- /dev/null
+++ b/modules/banner/project.json
@@ -0,0 +1,21 @@
+{
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "projectType": "library",
+    "targets": {
+        "build": {
+            "cache": true,
+            "command": "vite build",
+            "inputs": ["src"],
+            "outputs": ["{projectRoot}/lib"],
+            "options": { "cwd": "modules/banner" },
+            "dependsOn": ["^build"]
+        },
+        "lint:types": {
+            "command": "tsc --noEmit",
+            "options": {
+                "cwd": "modules/banner"
+            },
+            "dependsOn": ["^build"]
+        }
+    }
+}
diff --git a/modules/banner/src/Banner.tsx b/modules/banner/src/Banner.tsx
new file mode 100644
index 0000000000..112470d4e8
--- /dev/null
+++ b/modules/banner/src/Banner.tsx
@@ -0,0 +1,69 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type FC } from "react";
+import styled from "styled-components";
+import { type Api } from "@element-hq/element-web-module-api";
+import { Heading } from "@vector-im/compound-web";
+
+import { type ModuleConfig } from "./config";
+import UniventionMenu from "./Univention/Menu";
+import Menu from "./Menu";
+import Logo from "./Logo.tsx";
+
+const Root = styled.nav`
+    height: ${({ theme }): string => theme.bannerHeight};
+    background-color: ${({ theme }): string => theme.bannerBackgroundColor};
+    border-bottom: "var(--cpd-border-width-1) solid var(--cpd-color-bg-subtle-primary)";
+    display: flex;
+    gap: var(--cpd-space-3x);
+
+    h1 {
+        align-self: center;
+    }
+`;
+
+const LogoContainer = styled.div`
+    display: flex;
+    padding: var(--cpd-space-3x) 0;
+`;
+
+interface Props {
+    api: Api;
+    logoUrl: string;
+    href: string;
+    menu: ModuleConfig["menu"];
+    title: string;
+}
+
+const Banner: FC<Props> = ({ api, logoUrl, href, menu, title }) => {
+    let menuJsx;
+    switch (menu.type) {
+        case "static": {
+            menuJsx = <Menu api={api} config={menu} fallbackLogoUrl={logoUrl} />;
+            break;
+        }
+        case "univention": {
+            menuJsx = <UniventionMenu api={api} config={menu} fallbackLogoUrl={logoUrl} />;
+            break;
+        }
+    }
+
+    return (
+        <Root>
+            {menuJsx}
+            <LogoContainer>
+                <Logo api={api} src={logoUrl} href={href} height="100%" />
+            </LogoContainer>
+            <Heading size="sm" weight="medium" as="h1">
+                {title}
+            </Heading>
+        </Root>
+    );
+};
+
+export default Banner;
diff --git a/modules/banner/src/Logo.tsx b/modules/banner/src/Logo.tsx
new file mode 100644
index 0000000000..485f5afbbf
--- /dev/null
+++ b/modules/banner/src/Logo.tsx
@@ -0,0 +1,42 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type FC } from "react";
+import styled from "styled-components";
+import { type Api } from "@element-hq/element-web-module-api";
+
+const Anchor = styled.a`
+    display: flex;
+`;
+
+const Image = styled.img<{
+    height?: string;
+}>`
+    align-self: center;
+    height: ${({ height }): string => height ?? "32px"};
+`;
+
+interface Props {
+    api: Api;
+    src: string;
+    height?: string;
+    href?: string;
+}
+
+const Logo: FC<Props> = ({ api, src, href, height }) => {
+    const img = <Image alt={api.i18n.translate("logo_alt")} src={src} height={height} />;
+
+    if (!href) return img;
+
+    return (
+        <Anchor aria-label={api.i18n.translate("logo_link_label")} href={href}>
+            {img}
+        </Anchor>
+    );
+};
+
+export default Logo;
diff --git a/modules/banner/src/Menu.tsx b/modules/banner/src/Menu.tsx
new file mode 100644
index 0000000000..7afb0ca9bd
--- /dev/null
+++ b/modules/banner/src/Menu.tsx
@@ -0,0 +1,271 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type ComponentProps, type FC, type JSX, useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import * as Dialog from "@radix-ui/react-dialog";
+import styled, { useTheme } from "styled-components";
+import { InlineSpinner } from "@vector-im/compound-web";
+import { type Api } from "@element-hq/element-web-module-api";
+
+import { type StaticConfig } from "./config";
+import Logo from "./Logo.tsx";
+import TriggerIcon from "./trigger.svg?react";
+
+const Sidebar = styled(motion.div)`
+    padding: 0 var(--cpd-space-3x) var(--cpd-space-4x);
+    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.1);
+    overflow: auto;
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: ${({ theme }): string => theme.menuWidth};
+    background: ${({ theme }): string => theme.menuBackgroundColor};
+    border-radius: 0 16px 16px 0;
+    font: var(--cpd-font-body-md-regular);
+    letter-spacing: var(--cpd-font-letter-spacing-body-md);
+    font-feature-settings: normal;
+`;
+
+const SidebarHeading = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--cpd-space-5x);
+`;
+
+const Trigger = styled.button`
+    align-items: center;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    background-color: ${({ theme }): string => theme.triggerBackgroundColor};
+    color: ${({ theme }): string => theme.triggerColor};
+    width: ${({ theme }): string => theme.triggerWidth};
+
+    &:hover,
+    &:focus {
+        background-color: ${({ theme }): string => theme.triggerBackgroundColorHover};
+        color: ${({ theme }): string => theme.triggerColorContrast};
+    }
+
+    &:active,
+    &[data-expanded="true"] {
+        background-color: ${({ theme }): string => theme.triggerBackgroundColorPressed};
+        color: ${({ theme }): string => theme.triggerColorContrast};
+    }
+
+    svg {
+        margin: auto;
+    }
+`;
+
+const CloseButton = styled.button`
+    /* Reset button styles */
+    appearance: none;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+
+    height: 32px;
+    width: 32px;
+    cursor: pointer;
+    border-radius: 8px;
+
+    &:hover,
+    &:focus {
+        background-color: ${({ theme }): string => theme.menuButtonBackgroundColorHover};
+    }
+
+    &:active {
+        background-color: ${({ theme }): string => theme.menuButtonBackgroundColorPressed};
+    }
+`;
+
+const CategoryHeading = styled.h2`
+    line-height: var(--cpd-font-line-height-tight);
+    letter-spacing: var(--cpd-font-letter-spacing-heading-lg);
+    font-weight: 700;
+    font-size: 12px;
+    color: ${({ theme }): string => theme.subheadingColor};
+    margin-top: var(--cpd-space-4x);
+    margin-bottom: var(--cpd-space-2x);
+`;
+
+const LinkButton = styled.a`
+    font-size: 14px;
+    color: var(--cpd-color-text-action-primary);
+    font-weight: var(--cpd-font-weight-medium);
+    display: flex;
+    border-radius: 8px;
+    padding: var(--cpd-space-2x);
+    align-items: center;
+
+    &:link {
+        color: var(--cpd-color-text-action-primary);
+    }
+
+    &:hover,
+    &:focus {
+        background-color: ${({ theme }): string => theme.menuButtonBackgroundColorHover};
+    }
+
+    &:active {
+        background-color: ${({ theme }): string => theme.menuButtonBackgroundColorPressed};
+    }
+`;
+
+const LinkLogo = styled.img`
+    height: 24px;
+    width: 24px;
+    border-radius: 4px;
+    border: ${({ theme }): string => `var(--cpd-border-width-1) solid ${theme.menuButtonBackgroundColorPressed}`};
+    background-color: ${({ theme }): string => theme.menuBackgroundColor};
+    margin-right: var(--cpd-space-2x);
+`;
+
+const CentredContainer = styled.div`
+    display: flex;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    text-align: center;
+    font-weight: var(--cpd-font-weight-semibold);
+
+    svg {
+        margin: 0 auto;
+    }
+`;
+
+const Overlay = styled(motion.div)`
+    background-color: rgba(238, 239, 242, 0.5);
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+`;
+
+interface Props {
+    api: Api;
+    config: StaticConfig | Error | null; // null for loading
+    fallbackLogoUrl: string;
+}
+
+const Category: FC<{
+    data: StaticConfig["categories"][number];
+}> = ({ data }) => {
+    return (
+        <div>
+            <CategoryHeading>{data.name}</CategoryHeading>
+            {data.links.map((link) => (
+                <LinkButton key={link.link_url} href={link.link_url} target={link.target ?? "_blank"}>
+                    <LinkLogo src={link.icon_uri} role="presentation" /> {link.name}
+                </LinkButton>
+            ))}
+        </div>
+    );
+};
+
+const Menu: FC<Props> = ({ api, config, fallbackLogoUrl }) => {
+    const theme = useTheme();
+    const width = parseInt(theme.menuWidth.slice(0, -2), 10);
+    const [open, setOpen] = useState(false);
+
+    let content: JSX.Element;
+    const logoProps: Omit<ComponentProps<typeof Logo>, "api"> = {
+        src: fallbackLogoUrl,
+    };
+
+    if (config instanceof Error) {
+        content = <CentredContainer>{api.i18n.translate("univention_error")}</CentredContainer>;
+    } else if (config) {
+        content = (
+            <>
+                {config.categories.map((category) => (
+                    <Category key={category.name} data={category} />
+                ))}
+            </>
+        );
+        if (config.logo_url) {
+            logoProps.src = config.logo_url;
+        }
+        logoProps.height = config.logo_height !== undefined ? `${config.logo_height}px` : undefined;
+        logoProps.href = config.logo_href;
+    } else {
+        content = (
+            <CentredContainer>
+                <InlineSpinner size={32} />
+            </CentredContainer>
+        );
+    }
+
+    return (
+        <Dialog.Root open={open} onOpenChange={setOpen}>
+            <Dialog.Trigger asChild>
+                <Trigger aria-haspopup={true} aria-expanded={open} aria-label={api.i18n.translate("trigger_label")}>
+                    <TriggerIcon />
+                </Trigger>
+            </Dialog.Trigger>
+
+            <AnimatePresence>
+                {open && (
+                    <Dialog.Portal forceMount>
+                        <Dialog.Overlay asChild>
+                            <Overlay
+                                initial={{ opacity: 0 }}
+                                animate={{ opacity: 1 }}
+                                exit={{ opacity: 0 }}
+                                transition={{ duration: 0.3 }}
+                                data-testid="dialog-overlay"
+                            />
+                        </Dialog.Overlay>
+                        <Dialog.Content asChild>
+                            <Sidebar
+                                initial={{ x: -width }}
+                                animate={{ x: 0 }}
+                                exit={{ x: -width }}
+                                transition={{ type: "tween", ease: "easeInOut", duration: 0.3 }}
+                                aria-label={api.i18n.translate("menu_label")}
+                            >
+                                <Dialog.Title>
+                                    <SidebarHeading>
+                                        <Logo {...logoProps} api={api} />
+                                        <Dialog.Close asChild>
+                                            <CloseButton
+                                                aria-label={api.i18n.translate("close_label")}
+                                                onClick={() => setOpen(false)}
+                                            >
+                                                <svg
+                                                    width="20"
+                                                    height="20"
+                                                    viewBox="0 0 20 20"
+                                                    fill="none"
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                    <path
+                                                        d="M7.04167 13.9999L6 12.9583L8.9375 9.99992L6 7.06242L7.04167 6.02075L10 8.95825L12.9375 6.02075L13.9792 7.06242L11.0417 9.99992L13.9792 12.9583L12.9375 13.9999L10 11.0624L7.04167 13.9999Z"
+                                                        fill="currentColor"
+                                                    />
+                                                </svg>
+                                            </CloseButton>
+                                        </Dialog.Close>
+                                    </SidebarHeading>
+                                </Dialog.Title>
+                                {content}
+                            </Sidebar>
+                        </Dialog.Content>
+                    </Dialog.Portal>
+                )}
+            </AnimatePresence>
+        </Dialog.Root>
+    );
+};
+
+export default Menu;
diff --git a/modules/banner/src/Univention/Menu.tsx b/modules/banner/src/Univention/Menu.tsx
new file mode 100644
index 0000000000..c1b9ecc89c
--- /dev/null
+++ b/modules/banner/src/Univention/Menu.tsx
@@ -0,0 +1,54 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type FC, useEffect, useState } from "react";
+import { type Api } from "@element-hq/element-web-module-api";
+
+import { type StaticConfig, type UniventionConfig } from "../config";
+import StaticMenu from "../Menu";
+import { fetchNavigation } from "./navigation";
+import SilentLogin from "./SilentLogin";
+
+interface Props {
+    api: Api;
+    config: UniventionConfig;
+    fallbackLogoUrl: string;
+}
+
+const Menu: FC<Props> = ({ api, config, fallbackLogoUrl }) => {
+    const [loggedIn, setLoggedIn] = useState(false);
+    const [data, setData] = useState<StaticConfig | Error>();
+    const language = api.i18n.language.toLowerCase().startsWith("de") ? "de-DE" : "en";
+
+    useEffect(() => {
+        let discard = false;
+
+        setData(undefined);
+        fetchNavigation(config.ics_url, language)
+            .then((data) => {
+                if (discard) return;
+                setData(data);
+            })
+            .catch((error) => {
+                if (discard) return;
+                setData(error);
+            });
+
+        return (): void => {
+            discard = true;
+        };
+    }, [config, language, loggedIn]);
+
+    return (
+        <>
+            {!loggedIn && <SilentLogin onLoggedIn={setLoggedIn} icsUrl={config.ics_url} />}
+            <StaticMenu api={api} config={data ?? null} fallbackLogoUrl={config.logo_url ?? fallbackLogoUrl} />
+        </>
+    );
+};
+
+export default Menu;
diff --git a/modules/banner/src/Univention/SilentLogin.tsx b/modules/banner/src/Univention/SilentLogin.tsx
new file mode 100644
index 0000000000..0395410136
--- /dev/null
+++ b/modules/banner/src/Univention/SilentLogin.tsx
@@ -0,0 +1,40 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type FC, useEffect } from "react";
+import styled from "styled-components";
+
+const HiddenIFrame = styled.iframe`
+    display: none;
+`;
+
+interface Props {
+    icsUrl: string;
+    onLoggedIn(this: void, success: boolean): void;
+}
+
+const SilentLogin: FC<Props> = ({ onLoggedIn, icsUrl }) => {
+    const url = new URL("silent", icsUrl);
+
+    useEffect(() => {
+        const listener = (event: MessageEvent): void => {
+            if (event.origin === url.origin && typeof event.data === "object" && event.data["loggedIn"] === true) {
+                onLoggedIn(true);
+            }
+        };
+
+        window.addEventListener("message", listener);
+
+        return (): void => {
+            window.removeEventListener("message", listener);
+        };
+    }, [onLoggedIn, url.origin]);
+
+    return <HiddenIFrame src={url.href} />;
+};
+
+export default SilentLogin;
diff --git a/modules/banner/src/Univention/navigation.ts b/modules/banner/src/Univention/navigation.ts
new file mode 100644
index 0000000000..9bc413aa8a
--- /dev/null
+++ b/modules/banner/src/Univention/navigation.ts
@@ -0,0 +1,86 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { z } from "zod/mini";
+
+import { type StaticConfig } from "../config";
+
+/**
+ * Univention Central Navigation API
+ * https://docs.software-univention.de/nubus-kubernetes-customization/1.x/en/api/central-navigation.html
+ */
+const UniventionCentralNavigation = z.object({
+    categories: z.array(
+        z.object({
+            identifier: z.string(),
+            display_name: z.string(),
+            entries: z.array(
+                z.object({
+                    /**
+                     * A unique identifier for the navigation item.
+                     */
+                    identifier: z.string(),
+                    /**
+                     * The URL to the icon in SVG format.
+                     */
+                    icon_url: z.string(),
+                    /**
+                     * The label of the link.
+                     */
+                    display_name: z.string(),
+                    /**
+                     * The destination URL of the link.
+                     */
+                    link: z.string(),
+                    /**
+                     * The browsing context in which the browser opens the link.
+                     * Corresponds to the `target` property of `<a>` tags in HTML.
+                     */
+                    target: z.string(),
+                    /**
+                     * It’s usually empty.
+                     */
+                    keywords: z.optional(z.object({})),
+                }),
+            ),
+        }),
+    ),
+});
+
+type UniventionCentralNavigation = z.infer<typeof UniventionCentralNavigation>;
+
+function navigationToConfig(navigation: UniventionCentralNavigation): StaticConfig {
+    return {
+        type: "static",
+        categories: navigation.categories.map((category) => ({
+            name: category.display_name,
+            links: category.entries.map((entry) => ({
+                icon_uri: entry.icon_url,
+                name: entry.display_name,
+                link_url: entry.link,
+                target: entry.target,
+            })),
+        })),
+    };
+}
+
+export async function fetchNavigation(icsUrl: string, language: string): Promise<StaticConfig> {
+    const url = new URL("navigation.json", icsUrl);
+    url.search = `?language=${language}`;
+
+    const response = await fetch(url, {
+        credentials: "include",
+    });
+
+    if (!response.ok) {
+        throw new Error(`Failed to fetch navigation: ${response.status}`);
+    }
+
+    const data = await response.json();
+    const config = await UniventionCentralNavigation.parseAsync(data);
+    return navigationToConfig(config);
+}
diff --git a/modules/banner/src/config.ts b/modules/banner/src/config.ts
new file mode 100644
index 0000000000..c25770a86f
--- /dev/null
+++ b/modules/banner/src/config.ts
@@ -0,0 +1,127 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { z, type ZodMiniType, type input } from "zod/mini";
+
+import { Theme } from "./theme.ts";
+
+z.config(z.locales.en());
+
+const MenuConfig = z.object({
+    /**
+     * Alternative logo URL to display in the popover menu.
+     * Will use the main logo url if omitted.
+     */
+    logo_url: z.optional(z.url()),
+
+    /**
+     * Height in pixels to use when rendering the logo in the menu, defaults to 32px.
+     * The width will be set automatically to maintain the original aspect ratio.
+     */
+    logo_height: z.optional(z.number()),
+
+    /**
+     * Optional link href for the logo in the menu.
+     */
+    logo_href: z.optional(z.url()),
+});
+
+const StaticConfig = z.extend(MenuConfig, {
+    type: z.literal("static"),
+
+    /**
+     * Categories of links to display in the menu.
+     */
+    categories: z.array(
+        z.object({
+            /**
+             * The category display name
+             */
+            name: z.string(),
+            /**
+             * List of links to display in the category
+             */
+            links: z.array(
+                z.object({
+                    /**
+                     * The URL to the icon.
+                     */
+                    icon_uri: z.url(),
+                    /**
+                     * The label of the link.
+                     */
+                    name: z.string(),
+                    /**
+                     * The destination URL of the link.
+                     */
+                    link_url: z.url(),
+                    /**
+                     * The browsing context in which the browser opens the link.
+                     */
+                    target: z.optional(z.string()),
+                }),
+            ),
+        }),
+    ),
+});
+
+export type StaticConfig = z.infer<typeof StaticConfig>;
+
+const UniventionConfig = z.extend(MenuConfig, {
+    type: z.literal("univention"),
+
+    /**
+     * Base URL to an Intercom Service
+     * https://docs.software-univention.de/intercom-service/latest/architecture.html#endpoints
+     */
+    ics_url: z.url(),
+});
+
+export type UniventionConfig = z.infer<typeof UniventionConfig>;
+
+export const ModuleConfig = z.object({
+    /**
+     * The URL of the portal logo.svg file.
+     * @example `https://example.com/logo.svg`
+     */
+    logo_url: z.url(),
+
+    /**
+     * The URL of the portal.
+     * @example `https://example.com`
+     */
+    logo_link_url: z.url(),
+
+    /**
+     * The title to show to the right of the Logo
+     *
+     * Will fall back to `brand` variable if undefined, can be hidden by setting to the empty string.
+     */
+    title: z.optional(z.string()),
+
+    /**
+     * Configuration for the menu.
+     */
+    menu: z.discriminatedUnion("type", [StaticConfig, UniventionConfig]),
+
+    /**
+     * Theme variable overrides, optional.
+     */
+    theme: z.prefault(Theme, {}),
+});
+
+export type ModuleConfig = z.infer<typeof ModuleConfig>;
+
+export type ConfigSchema = ZodMiniType<z.output<typeof ModuleConfig>, z.input<typeof ModuleConfig>>;
+
+export const CONFIG_KEY = "io.element.element-web-modules.banner";
+
+declare module "@element-hq/element-web-module-api" {
+    export interface Config {
+        [CONFIG_KEY]?: input<ConfigSchema>;
+    }
+}
diff --git a/modules/banner/src/index.test.ts b/modules/banner/src/index.test.ts
new file mode 100644
index 0000000000..41756a6fe6
--- /dev/null
+++ b/modules/banner/src/index.test.ts
@@ -0,0 +1,35 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { describe, expect, it, vi } from "vitest";
+import { type Api } from "@element-hq/element-web-module-api";
+
+import BannerModule from "./index";
+
+const makeApi = (config: unknown): Api => {
+    return {
+        config: {
+            get: vi.fn().mockReturnValue(config),
+        },
+        i18n: {
+            register: vi.fn(),
+        },
+    } as unknown as Api;
+};
+
+describe("BannerModule", () => {
+    describe("load", () => {
+        it("should do nothing if no config present", async () => {
+            const api = makeApi(null);
+
+            const module = new BannerModule(api);
+            await module.load();
+
+            expect(api.i18n.register).not.toHaveBeenCalled();
+        });
+    });
+});
diff --git a/modules/banner/src/index.tsx b/modules/banner/src/index.tsx
new file mode 100644
index 0000000000..4b65373f8c
--- /dev/null
+++ b/modules/banner/src/index.tsx
@@ -0,0 +1,61 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { ThemeProvider } from "styled-components";
+
+import type { Module, Api, ModuleFactory } from "@element-hq/element-web-module-api";
+import Translations from "./translations.json";
+import { ModuleConfig, CONFIG_KEY } from "./config";
+import Banner from "./Banner";
+import { name as ModuleName } from "../package.json";
+import style from "./style.css" with { type: "css" };
+
+class BannerModule implements Module {
+    public static readonly moduleApiVersion = "^1.0.0";
+
+    private config?: ModuleConfig;
+
+    public constructor(private api: Api) {}
+
+    public async load(): Promise<void> {
+        const rawConfig = this.api.config.get(CONFIG_KEY);
+        if (!rawConfig) {
+            console.debug(`No configuration found for module "${ModuleName}", skipping initialization.`);
+            return;
+        }
+
+        document.adoptedStyleSheets.push(style);
+
+        this.api.i18n.register(Translations);
+
+        try {
+            this.config = ModuleConfig.parse(rawConfig);
+        } catch (e) {
+            console.error("Failed to init module", e);
+            throw new Error(`Errors in module configuration for "${ModuleName}"`);
+        }
+
+        const div = document.createElement("div");
+        div.dataset.testid = "banner";
+        this.api.rootNode.before(div);
+
+        const root = this.api.createRoot(div);
+        root.render(
+            <ThemeProvider theme={this.config.theme}>
+                <Banner
+                    api={this.api}
+                    logoUrl={this.config.logo_url}
+                    href={this.config.logo_link_url}
+                    menu={this.config.menu}
+                    title={this.config.title ?? this.api.config.get("brand")}
+                />
+            </ThemeProvider>,
+        );
+    }
+}
+
+export default BannerModule satisfies ModuleFactory;
diff --git a/modules/banner/src/style.css b/modules/banner/src/style.css
new file mode 100644
index 0000000000..29a08db118
--- /dev/null
+++ b/modules/banner/src/style.css
@@ -0,0 +1,17 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+@import "@vector-im/compound-web/dist/style.css" layer(compound-layer);
+
+/* Styles to ensure the banner does not push the app out of the viewport */
+body {
+    display: flex;
+    flex-direction: column;
+}
+#matrixchat {
+    flex: 1;
+}
diff --git a/modules/banner/src/theme.ts b/modules/banner/src/theme.ts
new file mode 100644
index 0000000000..3c715a955b
--- /dev/null
+++ b/modules/banner/src/theme.ts
@@ -0,0 +1,31 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { z } from "zod/mini";
+
+export const Theme = z.object({
+    textColor: z.prefault(z.string(), "var(--cpd-color-text-primary)"),
+    subheadingColor: z.prefault(z.string(), "var(--cpd-color-text-secondary)"),
+    bannerBackgroundColor: z.prefault(z.string(), "var(--cpd-color-bg-canvas-default)"),
+    bannerHeight: z.prefault(z.string(), "60px"),
+    triggerWidth: z.prefault(z.string(), "68px"),
+    triggerBackgroundColor: z.prefault(z.string(), "var(--cpd-color-bg-subtle-secondary)"),
+    triggerBackgroundColorHover: z.prefault(z.string(), "var(--cpd-color-bg-accent-hovered)"),
+    triggerBackgroundColorPressed: z.prefault(z.string(), "var(--cpd-color-bg-accent-pressed)"),
+    triggerColor: z.prefault(z.string(), "var(--cpd-color-icon-primary)"),
+    triggerColorContrast: z.prefault(z.string(), "var(--cpd-color-icon-on-solid-primary)"),
+    menuWidth: z.prefault(z.string(), "320px"),
+    menuBackgroundColor: z.prefault(z.string(), "var(--cpd-color-bg-canvas-default)"),
+    menuButtonBackgroundColorHover: z.prefault(z.string(), "var(--cpd-color-bg-action-secondary-hovered)"),
+    menuButtonBackgroundColorPressed: z.prefault(z.string(), "var(--cpd-color-bg-action-secondary-pressed)"),
+});
+
+export type Theme = z.infer<typeof Theme>;
+
+declare module "styled-components" {
+    export interface DefaultTheme extends Theme {}
+}
diff --git a/modules/banner/src/translations.json b/modules/banner/src/translations.json
new file mode 100644
index 0000000000..be2627e3aa
--- /dev/null
+++ b/modules/banner/src/translations.json
@@ -0,0 +1,26 @@
+{
+    "logo_alt": {
+        "en": "Portal logo",
+        "de": "Portal Logo"
+    },
+    "menu_label": {
+        "en": "Menu",
+        "de": "Menü"
+    },
+    "trigger_label": {
+        "en": "Show menu",
+        "de": "Menü anzeigen"
+    },
+    "close_label": {
+        "en": "Close menu",
+        "de": "Menü schließen"
+    },
+    "logo_link_label": {
+        "en": "Show portal",
+        "de": "Portal anzeigen"
+    },
+    "univention_error": {
+        "en": "Failed to load data from Univention",
+        "de": "Daten konnten nicht von Univention geladen werden"
+    }
+}
diff --git a/modules/banner/src/trigger.svg b/modules/banner/src/trigger.svg
new file mode 100644
index 0000000000..72273ad287
--- /dev/null
+++ b/modules/banner/src/trigger.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.99992 16.6667C4.54159 16.6667 4.14922 16.5035 3.82284 16.1771C3.49645 15.8507 3.33325 15.4584 3.33325 15C3.33325 14.5417 3.49645 14.1493 3.82284 13.823C4.14922 13.4966 4.54159 13.3334 4.99992 13.3334C5.45825 13.3334 5.85061 13.4966 6.177 13.823C6.50339 14.1493 6.66659 14.5417 6.66659 15C6.66659 15.4584 6.50339 15.8507 6.177 16.1771C5.85061 16.5035 5.45825 16.6667 4.99992 16.6667ZM9.99992 16.6667C9.54158 16.6667 9.14922 16.5035 8.82284 16.1771C8.49645 15.8507 8.33325 15.4584 8.33325 15C8.33325 14.5417 8.49645 14.1493 8.82284 13.823C9.14922 13.4966 9.54158 13.3334 9.99992 13.3334C10.4583 13.3334 10.8506 13.4966 11.177 13.823C11.5034 14.1493 11.6666 14.5417 11.6666 15C11.6666 15.4584 11.5034 15.8507 11.177 16.1771C10.8506 16.5035 10.4583 16.6667 9.99992 16.6667ZM14.9999 16.6667C14.5416 16.6667 14.1492 16.5035 13.8228 16.1771C13.4964 15.8507 13.3333 15.4584 13.3333 15C13.3333 14.5417 13.4964 14.1493 13.8228 13.823C14.1492 13.4966 14.5416 13.3334 14.9999 13.3334C15.4583 13.3334 15.8506 13.4966 16.177 13.823C16.5034 14.1493 16.6666 14.5417 16.6666 15C16.6666 15.4584 16.5034 15.8507 16.177 16.1771C15.8506 16.5035 15.4583 16.6667 14.9999 16.6667ZM4.99992 11.6667C4.54159 11.6667 4.14922 11.5035 3.82284 11.1771C3.49645 10.8507 3.33325 10.4584 3.33325 10C3.33325 9.54171 3.49645 9.14935 3.82284 8.82296C4.14922 8.49657 4.54159 8.33337 4.99992 8.33337C5.45825 8.33337 5.85061 8.49657 6.177 8.82296C6.50339 9.14935 6.66659 9.54171 6.66659 10C6.66659 10.4584 6.50339 10.8507 6.177 11.1771C5.85061 11.5035 5.45825 11.6667 4.99992 11.6667ZM9.99992 11.6667C9.54158 11.6667 9.14922 11.5035 8.82284 11.1771C8.49645 10.8507 8.33325 10.4584 8.33325 10C8.33325 9.54171 8.49645 9.14935 8.82284 8.82296C9.14922 8.49657 9.54158 8.33337 9.99992 8.33337C10.4583 8.33337 10.8506 8.49657 11.177 8.82296C11.5034 9.14935 11.6666 9.54171 11.6666 10C11.6666 10.4584 11.5034 10.8507 11.177 11.1771C10.8506 11.5035 10.4583 11.6667 9.99992 11.6667ZM14.9999 11.6667C14.5416 11.6667 14.1492 11.5035 13.8228 11.1771C13.4964 10.8507 13.3333 10.4584 13.3333 10C13.3333 9.54171 13.4964 9.14935 13.8228 8.82296C14.1492 8.49657 14.5416 8.33337 14.9999 8.33337C15.4583 8.33337 15.8506 8.49657 16.177 8.82296C16.5034 9.14935 16.6666 9.54171 16.6666 10C16.6666 10.4584 16.5034 10.8507 16.177 11.1771C15.8506 11.5035 15.4583 11.6667 14.9999 11.6667ZM4.99992 6.66671C4.54159 6.66671 4.14922 6.50351 3.82284 6.17712C3.49645 5.85074 3.33325 5.45837 3.33325 5.00004C3.33325 4.54171 3.49645 4.14935 3.82284 3.82296C4.14922 3.49657 4.54159 3.33337 4.99992 3.33337C5.45825 3.33337 5.85061 3.49657 6.177 3.82296C6.50339 4.14935 6.66659 4.54171 6.66659 5.00004C6.66659 5.45837 6.50339 5.85074 6.177 6.17712C5.85061 6.50351 5.45825 6.66671 4.99992 6.66671ZM9.99992 6.66671C9.54158 6.66671 9.14922 6.50351 8.82284 6.17712C8.49645 5.85074 8.33325 5.45837 8.33325 5.00004C8.33325 4.54171 8.49645 4.14935 8.82284 3.82296C9.14922 3.49657 9.54158 3.33337 9.99992 3.33337C10.4583 3.33337 10.8506 3.49657 11.177 3.82296C11.5034 4.14935 11.6666 4.54171 11.6666 5.00004C11.6666 5.45837 11.5034 5.85074 11.177 6.17712C10.8506 6.50351 10.4583 6.66671 9.99992 6.66671ZM14.9999 6.66671C14.5416 6.66671 14.1492 6.50351 13.8228 6.17712C13.4964 5.85074 13.3333 5.45837 13.3333 5.00004C13.3333 4.54171 13.4964 4.14935 13.8228 3.82296C14.1492 3.49657 14.5416 3.33337 14.9999 3.33337C15.4583 3.33337 15.8506 3.49657 16.177 3.82296C16.5034 4.14935 16.6666 4.54171 16.6666 5.00004C16.6666 5.45837 16.5034 5.85074 16.177 6.17712C15.8506 6.50351 15.4583 6.66671 14.9999 6.66671Z" fill="currentColor" />
+</svg>
\ No newline at end of file
diff --git a/modules/banner/src/vite-env.d.ts b/modules/banner/src/vite-env.d.ts
new file mode 100644
index 0000000000..bfeaf6b7af
--- /dev/null
+++ b/modules/banner/src/vite-env.d.ts
@@ -0,0 +1,9 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/// <reference types="vite-plugin-svgr/client" />
+/// <reference types="@arcmantle/vite-plugin-import-css-sheet/client" />
diff --git a/modules/banner/tsconfig.json b/modules/banner/tsconfig.json
new file mode 100644
index 0000000000..4678d3975a
--- /dev/null
+++ b/modules/banner/tsconfig.json
@@ -0,0 +1,8 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "noEmit": true,
+        "jsx": "react-jsx"
+    },
+    "include": ["src"]
+}
diff --git a/modules/banner/vite.config.ts b/modules/banner/vite.config.ts
new file mode 100644
index 0000000000..bbccf424bf
--- /dev/null
+++ b/modules/banner/vite.config.ts
@@ -0,0 +1,33 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { fileURLToPath } from "node:url";
+import { mergeConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
+import svgr from "vite-plugin-svgr";
+import { importCSSSheet } from "@arcmantle/vite-plugin-import-css-sheet";
+import baseConfig from "@element-hq/element-web-module-api/vite.base.ts";
+
+export default mergeConfig(baseConfig, {
+    build: {
+        lib: {
+            entry: fileURLToPath(import.meta.resolve("./src/index.tsx")),
+            name: "element-web-module-banner",
+            fileName: "index",
+            formats: ["es"],
+        },
+    },
+    plugins: [
+        importCSSSheet(),
+        react(),
+        svgr(),
+        nodePolyfills({
+            include: ["events"],
+        }),
+    ],
+});
diff --git a/modules/banner/vitest.config.ts b/modules/banner/vitest.config.ts
new file mode 100644
index 0000000000..3ef4e022b4
--- /dev/null
+++ b/modules/banner/vitest.config.ts
@@ -0,0 +1,14 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { defineProject } from "vitest/config";
+
+export default defineProject({
+    test: {
+        exclude: ["./e2e/**/*", "./node_modules/**/*"],
+    },
+});
diff --git a/modules/package.json b/modules/package.json
new file mode 100644
index 0000000000..7f18fa985b
--- /dev/null
+++ b/modules/package.json
@@ -0,0 +1,15 @@
+{
+    "name": "element-web-modules",
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "lint:types": "nx lint:types --",
+        "test:playwright": "nx test:playwright --",
+        "test:playwright:open": "nx test:playwright -- --ui",
+        "test:playwright:screenshots": "nx test:playwright:screenshots --"
+    },
+    "devDependencies": {
+        "@element-hq/element-web-playwright-common": "workspace:*"
+    },
+    "private": true
+}
diff --git a/modules/playwright.config.ts b/modules/playwright.config.ts
new file mode 100644
index 0000000000..54827761f9
--- /dev/null
+++ b/modules/playwright.config.ts
@@ -0,0 +1,102 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { defineConfig, devices, type Project } from "@playwright/test";
+import fs, { globSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+import type { Options } from "./playwright/element-web-test.ts";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const chromeProject = {
+    ...devices["Desktop Chrome"],
+    channel: "chromium",
+    permissions: ["clipboard-write", "clipboard-read", "microphone"],
+    launchOptions: {
+        args: ["--use-fake-ui-for-media-stream", "--use-fake-device-for-media-stream", "--mute-audio"],
+    },
+    connectOptions: process.env.PW_TEST_CONNECT_WS_ENDPOINT
+        ? {
+              wsEndpoint: process.env.PW_TEST_CONNECT_WS_ENDPOINT,
+              exposeNetwork: "<loopback>",
+          }
+        : undefined,
+};
+
+/**
+We assume that all modules will have the following directory structure:
+<repo_root>
+└── modules/
+    └── my-module/
+        ├── e2e/
+        │   ├── test-1.spec.ts
+        │   └── test-2.spec.ts
+        └── package.json
+
+The following code maps each such module (my-module in the example above) to a separate
+playwright project.
+ */
+const projects: Project<Options>[] = [];
+
+// Get all the directories that hold playwright tests
+const moduleTestDirectories = globSync("*/e2e", { cwd: __dirname }).map((d) => path.join(__dirname, d));
+
+// Process each directory
+for (const testDirectory of moduleTestDirectories) {
+    // Based on the directory structure, the parent directory of the test directory holds package.json.
+    const moduleDirectory = path.join(testDirectory, "..");
+
+    // Get module name from package.json
+    const packageJson = JSON.parse(fs.readFileSync(path.join(moduleDirectory, "package.json"), "utf-8"));
+    const MODULE_PREFIX = "@element-hq/element-web-module-";
+    const name = packageJson.name.startsWith(MODULE_PREFIX)
+        ? packageJson.name.slice(MODULE_PREFIX.length)
+        : packageJson.name;
+
+    // Create playwright project
+    projects.push({
+        name,
+        use: {
+            ...chromeProject,
+            moduleDir: moduleDirectory,
+        },
+        testDir: testDirectory,
+        snapshotDir: `${testDirectory}/snapshots`,
+        outputDir: `${testDirectory}/_results`,
+    });
+}
+
+const baseURL = process.env["BASE_URL"] ?? "http://localhost:8080";
+
+export default defineConfig<Options>({
+    projects,
+    use: {
+        viewport: { width: 1280, height: 720 },
+        ignoreHTTPSErrors: true,
+        video: "retain-on-failure",
+        baseURL,
+        trace: "on-first-retry",
+    },
+    webServer: {
+        command: process.env.WEBAPP_PATH
+            ? `npx serve -p 8080 -L ${process.env.WEBAPP_PATH}`
+            : "docker run --rm -p 8080:80 ghcr.io/element-hq/element-web:develop",
+        url: `${baseURL}/config.json`,
+        reuseExistingServer: true,
+        timeout: (process.env.CI ? 30 : 120) * 1000,
+    },
+    workers: 1,
+    retries: process.env.CI ? 2 : 0,
+    reporter: process.env.CI
+        ? [["list"], ["blob"], ["github"]]
+        : [["list"], ["html", { outputFolder: "playwright-html-report" }]],
+    // When running the browser in docker, set the platform to `linux` as that is the platform where the browser is running
+    snapshotPathTemplate: `{snapshotDir}/{testFilePath}/{arg}-${process.env.PW_TEST_CONNECT_WS_ENDPOINT ? "linux" : "{platform}"}{ext}`,
+    forbidOnly: !!process.env.CI,
+});
diff --git a/modules/playwright/element-web-test.ts b/modules/playwright/element-web-test.ts
new file mode 100644
index 0000000000..ca8ca83f7e
--- /dev/null
+++ b/modules/playwright/element-web-test.ts
@@ -0,0 +1,35 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { test as base, expect, type TestFixtures } from "@element-hq/element-web-playwright-common";
+
+export interface Options {
+    moduleDir: string;
+    modules: string[];
+}
+
+export const test = base.extend<TestFixtures & Options>({
+    moduleDir: ["", { option: true }],
+    modules: async ({ moduleDir }, use) => {
+        await use([`${moduleDir}/lib/index.js`]);
+    },
+
+    page: async ({ page, modules, config }, use) => {
+        config.modules = [];
+        for (let i = 0; i < modules.length; i++) {
+            const module = `/modules/module-${i}/index.js`;
+            await page.route(module, async (route) => {
+                await route.fulfill({ path: modules[i] });
+            });
+            config.modules.push(module);
+        }
+
+        await use(page);
+    },
+});
+
+export { expect };
diff --git a/modules/project.json b/modules/project.json
new file mode 100644
index 0000000000..4e6fda6f67
--- /dev/null
+++ b/modules/project.json
@@ -0,0 +1,22 @@
+{
+    "$schema": "../node_modules/nx/schemas/project-schema.json",
+    "projectType": "library",
+    "implicitDependencies": ["modules/*"],
+    "targets": {
+        "lint:types": {
+            "command": "tsc --noEmit",
+            "options": { "cwd": "modules" },
+            "dependsOn": ["^build:playwright"]
+        },
+        "test:playwright": {
+            "command": "playwright test",
+            "options": { "cwd": "modules" },
+            "dependsOn": ["^build:playwright", "^build"]
+        },
+        "test:playwright:screenshots": {
+            "command": "playwright-screenshots playwright test --update-snapshots --grep @screenshot",
+            "options": { "cwd": "modules" },
+            "dependsOn": ["^build:playwright", "^build"]
+        }
+    }
+}
diff --git a/modules/restricted-guests/README.md b/modules/restricted-guests/README.md
new file mode 100644
index 0000000000..3a925d018d
--- /dev/null
+++ b/modules/restricted-guests/README.md
@@ -0,0 +1,22 @@
+# @element-hq/element-web-module-restricted-guests
+
+Restricted Guests module for Element Web.
+
+Supports the following configuration options under the configuration key `io.element.element-web-modules.restricted-guests`:
+
+| Key                       | Type    | Description                                                                                                                                     |
+| ------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| guest_user_homeserver_url | string  | URL of the homeserver on which to register the guest, must be running the synapse module.                                                       |
+| guest_user_prefix         | string  | Prefix to apply to all guests registered via the module, defaults to `@guest-`.                                                                 |
+| skip_single_sign_on       | boolean | If true, the user will be forwarded to the login page instead of to the SSO login. This is only required if the home server has no SSO support. |
+
+## Copyright & License
+
+Copyright (c) 2025 New Vector Ltd
+
+This software is multi licensed by New Vector Ltd (Element). It can be used either:
+
+(1) for free under the terms of the GNU Affero General Public License (as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version); OR
+
+(2) under the terms of a paid-for Element Commercial License agreement between you and Element (the terms of which may vary depending on what you and Element have agreed to).
+Unless required by applicable law or agreed to in writing, software distributed under the Licenses is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the Licenses for the specific language governing permissions and limitations under the Licenses.
diff --git a/modules/restricted-guests/e2e/restricted-guests.spec.ts b/modules/restricted-guests/e2e/restricted-guests.spec.ts
new file mode 100644
index 0000000000..da5838520a
--- /dev/null
+++ b/modules/restricted-guests/e2e/restricted-guests.spec.ts
@@ -0,0 +1,320 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import {
+    type MasConfig,
+    type StartedMatrixAuthenticationServiceContainer,
+    type StartedSynapseContainer,
+    type SynapseContainer,
+} from "@element-hq/element-web-playwright-common/lib/testcontainers/index.js";
+import { type Credentials } from "@element-hq/element-web-playwright-common/lib/utils/api";
+import { makePostgres, makeMas } from "@element-hq/element-web-playwright-common/lib/testcontainers/index.js";
+
+import { RestrictedGuestsSynapseContainer, RestrictedGuestsSynapseWithMasContainer } from "./services";
+import { test as subBase, expect } from "../../playwright/element-web-test";
+
+const MAS_CLIENT_ID = "01ARZ3NDEKTSV4RRFFQ69G5FAV";
+const MAS_CLIENT_SECRET = "restricted-guests-secret";
+const MAS_SHARED_SECRET = "restricted-guests-shared-secret";
+const MAS_INTERNAL_URL = "http://guest-mas:8080";
+const GUEST_HOMESERVER_NAME = "guest-homeserver";
+
+const MAS_HTTP_LISTENERS: NonNullable<MasConfig["http"]>["listeners"] = [
+    {
+        name: "web",
+        resources: [
+            { name: "discovery" },
+            { name: "human" },
+            { name: "oauth" },
+            { name: "compat" },
+            { name: "graphql" },
+            { name: "assets" },
+            { name: "adminapi" },
+        ],
+        binds: [
+            {
+                address: "[::]:8080",
+            },
+        ],
+        proxy_protocol: false,
+    },
+    {
+        name: "internal",
+        resources: [
+            {
+                name: "health",
+            },
+        ],
+        binds: [
+            {
+                address: "[::]:8081",
+            },
+        ],
+        proxy_protocol: false,
+    },
+];
+
+const BASE_MAS_CONFIG: Partial<MasConfig> = {
+    http: {
+        listeners: MAS_HTTP_LISTENERS,
+        public_base: "",
+    },
+    policy: {
+        data: {
+            admin_clients: [MAS_CLIENT_ID],
+            client_registration: {
+                allow_insecure_uris: true,
+            },
+        },
+    },
+    clients: [
+        {
+            client_id: MAS_CLIENT_ID,
+            client_auth_method: "client_secret_basic",
+            client_secret: MAS_CLIENT_SECRET,
+        },
+    ],
+};
+
+declare module "@element-hq/element-web-module-api" {
+    export interface Config {
+        embedded_pages?: {
+            login_for_welcome?: boolean;
+        };
+    }
+}
+
+// We do some wacky things here in order to run the test suite against multiple homeserver configurations
+const base = subBase.extend<
+    {
+        testRoomId: string;
+    },
+    {
+        auth: "mas" | "legacy";
+
+        bot: Credentials;
+        guestMas?: StartedMatrixAuthenticationServiceContainer;
+        guestHomeserver: StartedSynapseContainer;
+    }
+>({
+    testRoomId: [
+        async ({ homeserver, bot }, use) => {
+            const { room_id: roomId } = (await homeserver.csApi.request("POST", "/v3/createRoom", bot.accessToken, {
+                name: "Test room",
+                preset: "public_chat",
+                topic: "All about happy hour",
+                initial_state: [
+                    {
+                        // This is required to allow guests to join the room with this Synapse module
+                        type: "m.room.join_rule",
+                        state_key: "",
+                        content: { join_rule: "knock" },
+                    },
+                ],
+            })) as { room_id: string };
+            await use(roomId);
+        },
+        { scope: "test" },
+    ],
+    bot: [
+        async ({ homeserver }, use) => {
+            const bot = await homeserver.registerUser("bot", "pAs5w0rD!", "Bot");
+            await use(bot);
+        },
+        { scope: "worker" },
+    ],
+
+    auth: ["mas", { scope: "worker" }],
+    // Optional MAS on the default homeserver, enabled only when we are testing the non-guest login UX
+    mas: [
+        async ({ logger, network, postgres, auth, synapseConfig }, use) => {
+            if (auth !== "mas" || synapseConfig.allow_guest_access !== false) {
+                return use(undefined);
+            }
+            const container = await makeMas(
+                postgres,
+                network,
+                logger,
+                {
+                    ...BASE_MAS_CONFIG,
+                    matrix: {
+                        kind: "synapse",
+                        homeserver: "homeserver",
+                        endpoint: "http://homeserver:8008",
+                        secret: MAS_SHARED_SECRET,
+                    },
+                },
+                "mas",
+            );
+            await use(container);
+            await container.stop();
+        },
+        { scope: "worker" },
+    ],
+    // Optional MAS on the module homeserver
+    guestMas: [
+        async ({ logger, network, auth }, use) => {
+            if (auth !== "mas") {
+                return use(undefined);
+            }
+
+            // We need a separate postgres so it doesn't fight with the default MAS
+            const postgres = await makePostgres(network, logger, "guest-mas-postgres");
+
+            const container = await makeMas(
+                postgres,
+                network,
+                logger,
+                {
+                    ...BASE_MAS_CONFIG,
+                    matrix: {
+                        kind: "synapse",
+                        homeserver: GUEST_HOMESERVER_NAME,
+                        endpoint: "http://guest-homeserver:8008",
+                        secret: MAS_SHARED_SECRET,
+                    },
+                },
+                "guest-mas",
+            );
+            await use(container);
+            await container.stop();
+            await postgres.stop();
+        },
+        { scope: "worker" },
+    ],
+    // Module homeserver
+    guestHomeserver: [
+        async ({ logger, synapseConfig, network, guestMas }, use) => {
+            let container: SynapseContainer;
+            if (guestMas) {
+                container = new RestrictedGuestsSynapseWithMasContainer({
+                    adminApiBaseUrl: MAS_INTERNAL_URL,
+                    oauthBaseUrl: MAS_INTERNAL_URL,
+                    clientId: MAS_CLIENT_ID,
+                    clientSecret: MAS_CLIENT_SECRET,
+                }).withMatrixAuthenticationService(guestMas);
+            } else {
+                container = new RestrictedGuestsSynapseContainer();
+            }
+
+            const startedContainer = await container
+                .withConfig(synapseConfig)
+                .withConfig({
+                    server_name: GUEST_HOMESERVER_NAME,
+                })
+                .withNetwork(network)
+                .withNetworkAliases(GUEST_HOMESERVER_NAME)
+                .withLogConsumer(logger.getConsumer("guest_homeserver"))
+                .start();
+
+            await use(startedContainer);
+            await startedContainer.stop();
+        },
+        { scope: "worker" },
+    ],
+    displayName: "Tommy",
+    labsFlags: ["feature_ask_to_join"],
+    config: {
+        embedded_pages: {
+            login_for_welcome: true,
+        },
+    },
+});
+
+base.slow();
+for (const auth of ["mas", "legacy"] as const) {
+    for (const guestsEnabled of [true, false]) {
+        const test = base.extend({
+            auth,
+            synapseConfig: {
+                allow_guest_access: guestsEnabled,
+            },
+        });
+
+        test.describe(`Restricted guests auth=${auth} guests=${guestsEnabled}`, () => {
+            test("should not error if config is missing", async ({ page }) => {
+                await page.goto("/");
+                await expect(page.getByText("Your Element is misconfigured")).not.toBeVisible();
+                await expect(page.getByText("Errors in module configuration")).not.toBeVisible();
+            });
+
+            test.describe("with invalid config", () => {
+                test.use({
+                    config: {
+                        "io.element.element-web-modules.restricted-guests": {
+                            hs_url: "foo",
+                        },
+                    },
+                });
+
+                test("should render error", async ({ page }) => {
+                    await page.goto("/");
+                    await expect(page.getByText("Your Element is misconfigured")).toBeVisible();
+                    await expect(page.getByText("Errors in module configuration")).toBeVisible();
+                });
+            });
+
+            test.describe("with valid config", () => {
+                test.beforeEach(async ({ config, guestHomeserver, page, testRoomId }) => {
+                    config["io.element.element-web-modules.restricted-guests"] = {
+                        guest_user_homeserver_url: guestHomeserver.baseUrl,
+                    };
+                    // Go to a room we are not a member of
+                    await page.goto(`/#/room/${testRoomId}`);
+                });
+
+                if (guestsEnabled) {
+                    // The screenshots between the two auth type tests for guests should be identical.
+                    test(
+                        "should show the default room preview bar for logged in users",
+                        { tag: ["@screenshot"] },
+                        async ({ page, user, testRoomId }) => {
+                            // Go to a room we are not a member of
+                            await page.goto(`/#/room/${testRoomId}`);
+                            const button = page.getByRole("button", { name: "Join the discussion" });
+                            await expect(button).toBeVisible();
+                        },
+                    );
+
+                    test(
+                        "should show the module's room preview bar for guests",
+                        { tag: ["@screenshot"] },
+                        async ({ page }) => {
+                            const button = page.getByRole("button", { name: "Join as guest", exact: true });
+                            await expect(button).toBeVisible();
+                            await expect(page.locator(".mx_RoomPreviewBar")).toMatchScreenshot(`preview-bar.png`);
+
+                            await button.click();
+                            const dialog = page.getByRole("dialog");
+                            await expect(dialog).toMatchScreenshot(`dialog.png`);
+
+                            await dialog.getByPlaceholder("Name").fill("Jim");
+                            await dialog.getByRole("button", { name: "Continue as guest" }).click();
+
+                            await expect(page.getByText("Ask to join?")).toBeVisible();
+                        },
+                    );
+                } else {
+                    test("should show the module login ux", { tag: ["@screenshot"] }, async ({ page }) => {
+                        const button = page.getByRole("button", { name: "Join as guest", exact: true });
+                        await expect(button).toBeVisible();
+                        await expect(page.getByRole("main")).toMatchScreenshot(`login-${auth}.png`);
+
+                        await button.click();
+                        const dialog = page.getByRole("dialog");
+                        await expect(dialog).toMatchScreenshot(`dialog-login.png`);
+
+                        await dialog.getByPlaceholder("Name").fill("Jim");
+                        await dialog.getByRole("button", { name: "Continue as guest" }).click();
+
+                        await expect(page.getByText("Join the discussion")).toBeVisible();
+                    });
+                }
+            });
+        });
+    }
+}
diff --git a/modules/restricted-guests/e2e/services.ts b/modules/restricted-guests/e2e/services.ts
new file mode 100644
index 0000000000..5e556b1ebc
--- /dev/null
+++ b/modules/restricted-guests/e2e/services.ts
@@ -0,0 +1,69 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import {
+    type StartedSynapseContainer,
+    SynapseContainer,
+} from "@element-hq/element-web-playwright-common/lib/testcontainers/index.js";
+import { Readable } from "node:stream";
+import { GenericContainer, Wait } from "testcontainers";
+
+// We use the SynapseContainer as a base to have all of its utilities for config setting
+export class RestrictedGuestsSynapseContainer extends SynapseContainer {
+    protected getModuleConfig(): Record<string, unknown> {
+        return {};
+    }
+
+    public override async start(): Promise<StartedSynapseContainer> {
+        // Download the synapse module
+        const initContainer = await new GenericContainer("ghcr.io/element-hq/synapse-guest-module:861f7ee")
+            .withWaitStrategy(Wait.forOneShotStartup())
+            .start();
+        const tarStream = await initContainer.copyArchiveFromContainer(`/src/synapse_guest_module`);
+        await initContainer.stop();
+
+        this.withCopyArchivesToContainer([
+            {
+                tar: Readable.from(tarStream),
+                target: "/",
+            },
+        ]).withEnvironment({
+            PYTHONPATH: "/modules",
+        });
+
+        this.config.modules.push({
+            module: "synapse_guest_module.GuestModule",
+            config: this.getModuleConfig(),
+        });
+
+        return super.start();
+    }
+}
+
+interface RestrictedGuestsMasModuleConfig {
+    adminApiBaseUrl: string;
+    oauthBaseUrl?: string;
+    clientId: string;
+    clientSecret: string;
+}
+
+export class RestrictedGuestsSynapseWithMasContainer extends RestrictedGuestsSynapseContainer {
+    public constructor(private readonly masConfig: RestrictedGuestsMasModuleConfig) {
+        super();
+    }
+
+    protected override getModuleConfig(): Record<string, unknown> {
+        return {
+            mas: {
+                admin_api_base_url: this.masConfig.adminApiBaseUrl,
+                oauth_base_url: this.masConfig.oauthBaseUrl ?? this.masConfig.adminApiBaseUrl,
+                client_id: this.masConfig.clientId,
+                client_secret: this.masConfig.clientSecret,
+            },
+        };
+    }
+}
diff --git a/modules/restricted-guests/e2e/snapshots/restricted-guests.spec.ts/dialog-linux.png b/modules/restricted-guests/e2e/snapshots/restricted-guests.spec.ts/dialog-linux.png
new file mode 100644
index 0000000000..2f8c5f8ca3
Binary files /dev/null and b/modules/restricted-guests/e2e/snapshots/restricted-guests.spec.ts/dialog-linux.png differ
diff --git a/modules/restricted-guests/e2e/snapshots/restricted-guests.spec.ts/dialog-login-linux.png b/modules/restricted-guests/e2e/snapshots/restricted-guests.spec.ts/dialog-login-linux.png
new file mode 100644
index 0000000000..336427c537
Binary files /dev/null and b/modules/restricted-guests/e2e/snapshots/restricted-guests.spec.ts/dialog-login-linux.png differ
diff --git a/modules/restricted-guests/e2e/snapshots/restricted-guests.spec.ts/login-legacy-linux.png b/modules/restricted-guests/e2e/snapshots/restricted-guests.spec.ts/login-legacy-linux.png
new file mode 100644
index 0000000000..e958aa4ea9
Binary files /dev/null and b/modules/restricted-guests/e2e/snapshots/restricted-guests.spec.ts/login-legacy-linux.png differ
diff --git a/modules/restricted-guests/e2e/snapshots/restricted-guests.spec.ts/login-mas-linux.png b/modules/restricted-guests/e2e/snapshots/restricted-guests.spec.ts/login-mas-linux.png
new file mode 100644
index 0000000000..9d5fe7fd60
Binary files /dev/null and b/modules/restricted-guests/e2e/snapshots/restricted-guests.spec.ts/login-mas-linux.png differ
diff --git a/modules/restricted-guests/e2e/snapshots/restricted-guests.spec.ts/preview-bar-linux.png b/modules/restricted-guests/e2e/snapshots/restricted-guests.spec.ts/preview-bar-linux.png
new file mode 100644
index 0000000000..e41a90c749
Binary files /dev/null and b/modules/restricted-guests/e2e/snapshots/restricted-guests.spec.ts/preview-bar-linux.png differ
diff --git a/modules/restricted-guests/package.json b/modules/restricted-guests/package.json
new file mode 100644
index 0000000000..ed225d2244
--- /dev/null
+++ b/modules/restricted-guests/package.json
@@ -0,0 +1,30 @@
+{
+    "name": "@element-hq/element-web-module-restricted-guests",
+    "private": true,
+    "version": "1.0.0",
+    "type": "module",
+    "main": "lib/index.js",
+    "license": "SEE LICENSE IN README.md",
+    "scripts": {
+        "build": "nx build",
+        "lint:types": "nx lint:types"
+    },
+    "devDependencies": {
+        "@arcmantle/vite-plugin-import-css-sheet": "^1.0.12",
+        "@element-hq/element-web-module-api": "workspace:*",
+        "@types/node": "catalog:",
+        "@types/react": "catalog:",
+        "@vitejs/plugin-react": "catalog:",
+        "react": "catalog:",
+        "testcontainers": "^12.0.1",
+        "typescript": "catalog:",
+        "vite": "catalog:",
+        "vite-plugin-node-polyfills": "catalog:"
+    },
+    "dependencies": {
+        "@vector-im/compound-design-tokens": "^10.0.0",
+        "@vector-im/compound-web": "^9.0.0",
+        "styled-components": "^6.1.18",
+        "zod": "^4.0.0"
+    }
+}
diff --git a/modules/restricted-guests/project.json b/modules/restricted-guests/project.json
new file mode 100644
index 0000000000..ea14124b75
--- /dev/null
+++ b/modules/restricted-guests/project.json
@@ -0,0 +1,21 @@
+{
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "projectType": "library",
+    "targets": {
+        "build": {
+            "cache": true,
+            "command": "vite build",
+            "inputs": ["src"],
+            "outputs": ["{projectRoot}/lib"],
+            "options": { "cwd": "modules/restricted-guests" },
+            "dependsOn": ["^build"]
+        },
+        "lint:types": {
+            "command": "tsc --noEmit",
+            "options": {
+                "cwd": "modules/restricted-guests"
+            },
+            "dependsOn": ["^build"]
+        }
+    }
+}
diff --git a/modules/restricted-guests/src/AuthFooter.tsx b/modules/restricted-guests/src/AuthFooter.tsx
new file mode 100644
index 0000000000..be6bf18d34
--- /dev/null
+++ b/modules/restricted-guests/src/AuthFooter.tsx
@@ -0,0 +1,59 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type FC } from "react";
+import { Button } from "@vector-im/compound-web";
+import { type AccountAuthInfo, type Api } from "@element-hq/element-web-module-api";
+import styled from "styled-components";
+
+import { type ModuleConfig } from "./config.ts";
+import RegisterDialog from "./RegisterDialog.tsx";
+
+interface Props {
+    api: Api;
+    config: ModuleConfig;
+    onLoggedIn(this: void, data: AccountAuthInfo): void;
+}
+
+const Container = styled.aside`
+    margin: var(--cpd-space-3x) 0;
+
+    button {
+        width: 100%;
+    }
+`;
+
+const AuthFooter: FC<Props> = ({ api, config, onLoggedIn }) => {
+    const onTryJoin = async (): Promise<void> => {
+        const { finished } = api.openDialog(
+            {
+                title: api.i18n.translate("register_dialog_title"),
+            },
+            RegisterDialog,
+            {
+                api,
+                config,
+            },
+        );
+
+        const { model: accountAuthInfo, ok } = await finished;
+
+        if (ok && accountAuthInfo) {
+            onLoggedIn(accountAuthInfo);
+        }
+    };
+
+    return (
+        <Container>
+            <Button onClick={onTryJoin} size="md" kind="secondary">
+                {api.i18n.translate("join_cta")}
+            </Button>
+        </Container>
+    );
+};
+
+export default AuthFooter;
diff --git a/modules/restricted-guests/src/RegisterDialog.tsx b/modules/restricted-guests/src/RegisterDialog.tsx
new file mode 100644
index 0000000000..1b445df251
--- /dev/null
+++ b/modules/restricted-guests/src/RegisterDialog.tsx
@@ -0,0 +1,99 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type FC, useState, type JSX, type FormEvent } from "react";
+import { type Api, type AccountAuthInfo, type DialogProps } from "@element-hq/element-web-module-api";
+import { Form } from "@vector-im/compound-web";
+import styled from "styled-components";
+
+import { type ModuleConfig } from "./config.ts";
+
+interface RegisterDialogProps extends DialogProps<AccountAuthInfo> {
+    api: Api;
+    config: ModuleConfig;
+    showLoginLink?: boolean;
+}
+
+const enum State {
+    Idle,
+    Busy,
+    Error,
+}
+
+const StyledFormRoot = styled(Form.Root)`
+    font: var(--cpd-font-body-md-regular);
+    letter-spacing: var(--cpd-font-letter-spacing-body-md);
+    font-feature-settings: normal;
+`;
+
+const RegisterDialog: FC<RegisterDialogProps> = ({ api, config, onCancel, onSubmit, showLoginLink }) => {
+    const [username, setUsername] = useState("");
+    const [state, setState] = useState<State>(State.Idle);
+
+    async function trySubmit(ev: FormEvent): Promise<void> {
+        ev.preventDefault();
+        setState(State.Busy);
+
+        try {
+            const homeserverUrl = config.guest_user_homeserver_url;
+
+            const url = new URL("/_synapse/client/register_guest", homeserverUrl);
+
+            const response = await fetch(url, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ displayname: username }),
+            });
+
+            if (response.ok) {
+                const accountAuthInfo = await response.json();
+                onSubmit(accountAuthInfo);
+            }
+        } catch (e) {
+            console.error("Failed to create guest account", e);
+            setState(State.Error);
+        }
+    }
+
+    let message: JSX.Element | undefined;
+    if (state === State.Error) {
+        message = <Form.ErrorMessage>{api.i18n.translate("register_dialog_error")}</Form.ErrorMessage>;
+    } else if (state === State.Busy) {
+        message = <Form.LoadingMessage>{api.i18n.translate("register_dialog_busy")}</Form.LoadingMessage>;
+    }
+
+    const disabled = state !== State.Idle;
+
+    return (
+        <StyledFormRoot onSubmit={trySubmit}>
+            <Form.Field name="name">
+                <Form.Label>{api.i18n.translate("register_dialog_register_username_label")}</Form.Label>
+                <Form.TextControl
+                    disabled={disabled}
+                    value={username}
+                    onChange={(event) => {
+                        setUsername(event.currentTarget.value);
+                    }}
+                    placeholder={api.i18n.translate("register_dialog_field_label")}
+                />
+                {message}
+            </Form.Field>
+
+            {showLoginLink && (
+                <a href={config.skip_single_sign_on ? "/#/login" : "/#/start_sso"} onClick={onCancel}>
+                    {api.i18n.translate("register_dialog_existing_account")}
+                </a>
+            )}
+
+            <Form.Submit disabled={disabled || !username}>
+                {api.i18n.translate("register_dialog_continue_label")}
+            </Form.Submit>
+        </StyledFormRoot>
+    );
+};
+
+export default RegisterDialog;
diff --git a/modules/restricted-guests/src/RoomPreviewBar.tsx b/modules/restricted-guests/src/RoomPreviewBar.tsx
new file mode 100644
index 0000000000..bda49e57c5
--- /dev/null
+++ b/modules/restricted-guests/src/RoomPreviewBar.tsx
@@ -0,0 +1,70 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type FC, type JSX } from "react";
+import { Button } from "@vector-im/compound-web";
+import { type Api } from "@element-hq/element-web-module-api";
+import styled from "styled-components";
+import { useWatchable } from "@element-hq/element-web-module-api";
+
+import { type ModuleConfig } from "./config.ts";
+import RegisterDialog from "./RegisterDialog.tsx";
+
+interface RoomPreviewBarProps {
+    api: Api;
+    config: ModuleConfig;
+    children: JSX.Element;
+    roomId?: string;
+    roomAlias?: string;
+    promptAskToJoin?: boolean;
+}
+
+const Container = styled.aside`
+    margin: auto;
+    font: var(--cpd-font-body-md-regular);
+    letter-spacing: var(--cpd-font-letter-spacing-body-md);
+    font-feature-settings: normal;
+`;
+
+const RoomPreviewBar: FC<RoomPreviewBarProps> = ({ api, config, roomId, roomAlias, promptAskToJoin, children }) => {
+    const profile = useWatchable(api.profile);
+    const isGuest = profile.isGuest;
+
+    if (promptAskToJoin || !isGuest || !(roomId || roomAlias)) return children;
+
+    const onTryJoin = async (): Promise<void> => {
+        const { finished } = api.openDialog(
+            {
+                title: api.i18n.translate("register_dialog_title"),
+            },
+            RegisterDialog,
+            {
+                api,
+                config,
+                showLoginLink: true,
+            },
+        );
+
+        const { model: accountAuthInfo, ok } = await finished;
+
+        if (ok && accountAuthInfo) {
+            await api.overwriteAccountAuth(accountAuthInfo);
+            await api.navigation.toMatrixToLink(`https://matrix.to/#/${roomId ?? roomAlias}`, true);
+        }
+    };
+
+    return (
+        <Container className="mx_RoomPreviewBar">
+            <div className="mx_RoomPreviewBar_message">{api.i18n.translate("join_message")}</div>
+            <div className="mx_RoomPreviewBar_actions">
+                <Button onClick={onTryJoin}>{api.i18n.translate("join_cta")}</Button>
+            </div>
+        </Container>
+    );
+};
+
+export default RoomPreviewBar;
diff --git a/modules/restricted-guests/src/config.ts b/modules/restricted-guests/src/config.ts
new file mode 100644
index 0000000000..c490ba1744
--- /dev/null
+++ b/modules/restricted-guests/src/config.ts
@@ -0,0 +1,47 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { z, type ZodMiniType, type input } from "zod/mini";
+
+z.config(z.locales.en());
+
+export const ModuleConfig = z.object({
+    /**
+     * The URL of the homeserver where the guest users should be registered. This
+     * must have the `synapse-restricted-guests-module` installed.
+     * @example `https://synapse.local`
+     */
+    guest_user_homeserver_url: z.url(),
+
+    /**
+     * The username prefix that identifies guest users.
+     * @defaultValue `@guest-`
+     */
+    guest_user_prefix: z._default(z.string().check(z.regex(/@[a-zA-Z-_1-9]+/)), "@guest-"),
+
+    /**
+     * If true, the user will be forwarded to the login page instead of to the SSO
+     * login. This is only required if the home server has no SSO support.
+     * @defaultValue `false`
+     */
+    skip_single_sign_on: z._default(z.boolean(), false),
+});
+
+export type ModuleConfig = z.infer<typeof ModuleConfig>;
+
+type ConfigSchema = ZodMiniType<z.output<typeof ModuleConfig>, z.input<typeof ModuleConfig>>;
+
+export const CONFIG_KEY = "io.element.element-web-modules.restricted-guests";
+
+declare module "@element-hq/element-web-module-api" {
+    export interface Config {
+        [CONFIG_KEY]?: input<ConfigSchema>;
+        sso_redirect_options?: {
+            immediate?: boolean; // incompatible option
+        };
+    }
+}
diff --git a/modules/restricted-guests/src/index.test.ts b/modules/restricted-guests/src/index.test.ts
new file mode 100644
index 0000000000..7bb1593587
--- /dev/null
+++ b/modules/restricted-guests/src/index.test.ts
@@ -0,0 +1,35 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { describe, expect, it, vi } from "vitest";
+import { type Api } from "@element-hq/element-web-module-api";
+
+import RestrictedGuestsModule from "./index";
+
+const makeApi = (config: unknown): Api => {
+    return {
+        config: {
+            get: vi.fn().mockReturnValue(config),
+        },
+        i18n: {
+            register: vi.fn(),
+        },
+    } as unknown as Api;
+};
+
+describe("RestrictedGuestsModule", () => {
+    describe("load", () => {
+        it("should do nothing if no config present", async () => {
+            const api = makeApi(null);
+
+            const module = new RestrictedGuestsModule(api);
+            await module.load();
+
+            expect(api.i18n.register).not.toHaveBeenCalled();
+        });
+    });
+});
diff --git a/modules/restricted-guests/src/index.tsx b/modules/restricted-guests/src/index.tsx
new file mode 100644
index 0000000000..09b051ba69
--- /dev/null
+++ b/modules/restricted-guests/src/index.tsx
@@ -0,0 +1,88 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import type { Module, Api, ModuleFactory } from "@element-hq/element-web-module-api";
+import Translations from "./translations.json";
+import { ModuleConfig, CONFIG_KEY } from "./config";
+import { name as ModuleName } from "../package.json";
+import RoomPreviewBar from "./RoomPreviewBar.tsx";
+import AuthFooter from "./AuthFooter.tsx";
+import style from "./style.css" with { type: "css" };
+
+const GUEST_INVISIBLE_COMPONENTS = [
+    "UIComponent.sendInvites",
+    "UIComponent.roomCreation",
+    "UIComponent.spaceCreation",
+    "UIComponent.exploreRooms",
+    "UIComponent.roomOptionsMenu",
+    "UIComponent.addIntegrations",
+];
+
+class RestrictedGuestsModule implements Module {
+    public static readonly moduleApiVersion = "^1.0.0";
+
+    private config?: ModuleConfig;
+
+    public constructor(private api: Api) {}
+
+    public async load(): Promise<void> {
+        const rawConfig = this.api.config.get(CONFIG_KEY);
+        if (!rawConfig) {
+            console.debug(`No configuration found for module "${ModuleName}", skipping initialization.`);
+            return;
+        }
+
+        document.adoptedStyleSheets.push(style);
+
+        this.api.i18n.register(Translations);
+
+        try {
+            this.config = ModuleConfig.parse(rawConfig);
+        } catch (e) {
+            console.error("Failed to init module", e);
+            throw new Error(`Errors in module configuration for "${ModuleName}"`);
+        }
+
+        const appConfig = this.api.config.get();
+        if (appConfig.sso_redirect_options?.immediate) {
+            console.warn(`${ModuleName} found incompatible option 'sso_redirect_options.immediate', turning it off.`);
+            appConfig.sso_redirect_options.immediate = false;
+        }
+
+        // Room preview bar customisations (for Matrix guest support)
+        this.api.customComponents.registerRoomPreviewBar((props, OriginalComponent) => (
+            <RoomPreviewBar {...props} api={this.api} config={this.config!}>
+                <OriginalComponent {...props} />
+            </RoomPreviewBar>
+        ));
+        this.api.customisations.registerShouldShowComponent(this.shouldShowComponent);
+
+        // Login component customisations (for no guest support)
+        this.api.customComponents.registerLoginComponent((props, OriginalComponent) => (
+            <OriginalComponent {...props}>
+                <AuthFooter onLoggedIn={props.onLoggedIn} api={this.api} config={this.config!} />
+            </OriginalComponent>
+        ));
+    }
+
+    /**
+     * Returns true, if the `userId` should see the `component`.
+     *
+     * @param component - the name of the component that is checked
+     * @returns true, if the user should see the component
+     */
+    public readonly shouldShowComponent = (component: string): boolean => {
+        const profile = this.api.profile.value;
+        if (this.config && (profile.isGuest || profile.userId?.startsWith(this.config.guest_user_prefix))) {
+            return GUEST_INVISIBLE_COMPONENTS.includes(component);
+        }
+
+        return true;
+    };
+}
+
+export default RestrictedGuestsModule satisfies ModuleFactory;
diff --git a/modules/restricted-guests/src/style.css b/modules/restricted-guests/src/style.css
new file mode 100644
index 0000000000..6d53d1c890
--- /dev/null
+++ b/modules/restricted-guests/src/style.css
@@ -0,0 +1,8 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+@import "@vector-im/compound-web/dist/style.css" layer(compound-layer);
diff --git a/modules/restricted-guests/src/translations.json b/modules/restricted-guests/src/translations.json
new file mode 100644
index 0000000000..315a1e938d
--- /dev/null
+++ b/modules/restricted-guests/src/translations.json
@@ -0,0 +1,38 @@
+{
+    "register_dialog_register_username_label": {
+        "en": "Username",
+        "de": "Benutzername"
+    },
+    "register_dialog_title": {
+        "en": "Request access",
+        "de": "Zugriff anfordern"
+    },
+    "register_dialog_busy": {
+        "en": "Creating your account...",
+        "de": "Erstelle dein Konto..."
+    },
+    "register_dialog_continue_label": {
+        "en": "Continue as guest",
+        "de": "Als Gast fortfahren"
+    },
+    "register_dialog_field_label": {
+        "en": "Name",
+        "de": "Name"
+    },
+    "register_dialog_existing_account": {
+        "en": "I already have an account.",
+        "de": "Ich habe bereits einen Account."
+    },
+    "register_dialog_error": {
+        "en": "The account creation failed.",
+        "de": "Die Anmeldung als Gastnutzer ist fehlgeschlagen."
+    },
+    "join_message": {
+        "en": "Join the room to participate",
+        "de": "Treten Sie dem Raum bei, um teilzunehmen"
+    },
+    "join_cta": {
+        "en": "Join as guest",
+        "de": "Als Gast beitreten"
+    }
+}
diff --git a/modules/restricted-guests/src/vite-env.d.ts b/modules/restricted-guests/src/vite-env.d.ts
new file mode 100644
index 0000000000..c718659504
--- /dev/null
+++ b/modules/restricted-guests/src/vite-env.d.ts
@@ -0,0 +1,8 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/// <reference types="@arcmantle/vite-plugin-import-css-sheet/client" />
diff --git a/modules/restricted-guests/tsconfig.json b/modules/restricted-guests/tsconfig.json
new file mode 100644
index 0000000000..ada1a94c2a
--- /dev/null
+++ b/modules/restricted-guests/tsconfig.json
@@ -0,0 +1,8 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "lib",
+        "jsx": "react-jsx"
+    },
+    "include": ["src"]
+}
diff --git a/modules/restricted-guests/vite.config.ts b/modules/restricted-guests/vite.config.ts
new file mode 100644
index 0000000000..dd6c5b9681
--- /dev/null
+++ b/modules/restricted-guests/vite.config.ts
@@ -0,0 +1,31 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { fileURLToPath } from "node:url";
+import { mergeConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
+import { importCSSSheet } from "@arcmantle/vite-plugin-import-css-sheet";
+import baseConfig from "@element-hq/element-web-module-api/vite.base.ts";
+
+export default mergeConfig(baseConfig, {
+    build: {
+        lib: {
+            entry: fileURLToPath(import.meta.resolve("./src/index.tsx")),
+            name: "element-web-module-restricted-guests",
+            fileName: "index",
+            formats: ["es"],
+        },
+    },
+    plugins: [
+        importCSSSheet(),
+        react(),
+        nodePolyfills({
+            include: ["events"],
+        }),
+    ],
+});
diff --git a/modules/restricted-guests/vitest.config.ts b/modules/restricted-guests/vitest.config.ts
new file mode 100644
index 0000000000..3ef4e022b4
--- /dev/null
+++ b/modules/restricted-guests/vitest.config.ts
@@ -0,0 +1,14 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { defineProject } from "vitest/config";
+
+export default defineProject({
+    test: {
+        exclude: ["./e2e/**/*", "./node_modules/**/*"],
+    },
+});
diff --git a/modules/tsconfig.json b/modules/tsconfig.json
new file mode 100644
index 0000000000..03d3f708a8
--- /dev/null
+++ b/modules/tsconfig.json
@@ -0,0 +1,17 @@
+{
+    "$schema": "http://json.schemastore.org/tsconfig",
+    "compilerOptions": {
+        "target": "es2024",
+        "jsx": "react",
+        "lib": ["ESNext", "es2024", "dom", "dom.iterable"],
+        "types": ["node"],
+        "resolveJsonModule": true,
+        "esModuleInterop": true,
+        "moduleResolution": "bundler",
+        "module": "ESNext",
+        "allowImportingTsExtensions": true,
+        "skipLibCheck": true,
+        "noEmit": true
+    },
+    "include": ["playwright.config.ts", "playwright"]
+}
diff --git a/modules/widget-lifecycle/README.md b/modules/widget-lifecycle/README.md
new file mode 100644
index 0000000000..cfe2569e4e
--- /dev/null
+++ b/modules/widget-lifecycle/README.md
@@ -0,0 +1,63 @@
+# @element-hq/element-web-module-widget-lifecycle
+
+Widget lifecycle module for Element Web.
+
+Supports the following configuration options under the configuration key `io.element.element-web-modules.widget-lifecycle`:
+
+| Key                | Type   | Description                                      |
+| ------------------ | ------ | ------------------------------------------------ |
+| widget_permissions | object | Map of widget URL patterns to approval settings. |
+
+Each widget configuration can use the following options:
+
+- `preload_approved` - if true, the preload dialog is not displayed for this widget.
+- `identity_approved` - if true, requests for an identity token are automatically accepted.
+- `capabilities_approved` - a list of capabilities that should be approved for this widget.
+
+The widget URL and capability strings can use a trailing `*` to match multiple widgets or capabilities.
+This is useful when widgets have multiple routes or capabilities include variable state keys.
+
+## Matching and precedence
+
+- Patterns ending in `*` are matched by prefix; other patterns must match exactly.
+- If multiple rules match, the most specific match wins per field.
+- The capabilities allow-list is not merged across rules; the most specific rule that defines it wins.
+
+## Example configuration (exact match)
+
+```json
+{
+    "io.element.element-web-modules.widget-lifecycle": {
+        "widget_permissions": {
+            "https://widget.example.com/": {
+                "preload_approved": true,
+                "identity_approved": true,
+                "capabilities_approved": [
+                    "org.matrix.msc2931.navigate",
+                    "org.matrix.msc2762.receive.state_event:m.room.power_levels"
+                ]
+            }
+        }
+    }
+}
+```
+
+## Example configuration (wildcards)
+
+```json
+{
+    "io.element.element-web-modules.widget-lifecycle": {
+        "widget_permissions": {
+            "https://widget.example.com/*": {
+                "preload_approved": true,
+                "identity_approved": true,
+                "capabilities_approved": [
+                    "org.matrix.msc2931.navigate",
+                    "org.matrix.msc2762.receive.state_event:m.room.power_levels",
+                    "org.matrix.msc2762.send.state_event:net.custom_event#*"
+                ]
+            }
+        }
+    }
+}
+```
diff --git a/modules/widget-lifecycle/e2e/fixture/widget.html b/modules/widget-lifecycle/e2e/fixture/widget.html
new file mode 100644
index 0000000000..4c293c5c6d
--- /dev/null
+++ b/modules/widget-lifecycle/e2e/fixture/widget.html
@@ -0,0 +1,76 @@
+<!--
+    Minimal fixture widget used by e2e tests to exercise the Matrix Widget API lifecycle:
+      1. Element requests capabilities  → widget declares what it needs
+      2. Element notifies approval      → widget requests an OpenID token
+      3. Element grants the token       → widget resolves the user's Matrix ID and displays it
+
+    The `caps` query parameter controls which capabilities the widget requests (comma-separated).
+    Pass `caps=none` to request none. Defaults to m.room.topic if omitted.
+    The `hsUrl` query parameter is required for the OpenID userinfo lookup in step 3.
+-->
+<!doctype html>
+<html lang="en">
+    <head>
+        <title>Demo Widget</title>
+        <script>
+            const getCapabilities = () => {
+                const caps = new URLSearchParams(window.location.search).get("caps");
+                if (!caps) {
+                    return ["org.matrix.msc2762.receive.state_event:m.room.topic"];
+                }
+                if (caps === "none") return [];
+                return caps
+                    .split(",")
+                    .map((cap) => cap.trim())
+                    .filter(Boolean);
+            };
+
+            let sendEventCount = 0;
+            window.onmessage = async (ev) => {
+                if (ev.data.action === "capabilities") {
+                    // Step 1: Element is asking what capabilities this widget needs.
+                    window.parent.postMessage(
+                        Object.assign(
+                            {
+                                response: {
+                                    capabilities: getCapabilities(),
+                                },
+                            },
+                            ev.data,
+                        ),
+                        "*",
+                    );
+                } else if (ev.data.action === "notify_capabilities") {
+                    // Step 2: Capabilities have been approved. Request an OpenID token
+                    // so we can identify the current user in step 3.
+                    window.parent.postMessage(
+                        {
+                            api: "fromWidget",
+                            widgetId: ev.data.widgetId,
+                            requestId: "widget-" + sendEventCount,
+                            action: "get_openid",
+                            data: {},
+                        },
+                        "*",
+                    );
+                } else if (ev.data.action === "get_openid" && ev.data.response?.state === "allowed") {
+                    // Step 3: Token granted — exchange it for the user's Matrix ID and display it.
+                    // Tests assert on this heading to verify identity was passed through correctly.
+                    const { access_token } = ev.data.response;
+
+                    const hsUrl = new URLSearchParams(window.location.search).get("hsUrl");
+                    const response = await fetch(
+                        `${hsUrl}/_matrix/federation/v1/openid/userinfo?access_token=${access_token}`,
+                    );
+                    const { sub } = await response.json();
+
+                    const titleElement = document.getElementById("title");
+                    titleElement.innerText = `Hello ${sub}!`;
+                }
+            };
+        </script>
+    </head>
+    <body>
+        <h1 id="title">Hello unknown!</h1>
+    </body>
+</html>
diff --git a/modules/widget-lifecycle/e2e/widget-lifecycle.spec.ts b/modules/widget-lifecycle/e2e/widget-lifecycle.spec.ts
new file mode 100644
index 0000000000..d3b55db644
--- /dev/null
+++ b/modules/widget-lifecycle/e2e/widget-lifecycle.spec.ts
@@ -0,0 +1,243 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type SynapseContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers/index.js";
+import { rejectToastIfExists } from "@element-hq/element-web-playwright-common";
+
+import { test, expect } from "../../playwright/element-web-test.ts";
+
+declare module "@element-hq/element-web-module-api" {
+    interface Config {
+        "io.element.element-web-modules.widget-lifecycle": {
+            widget_permissions: {
+                [url: string]: {
+                    preload_approved?: boolean;
+                    identity_approved?: boolean;
+                    capabilities_approved?: string[];
+                };
+            };
+        };
+    }
+}
+
+const WIDGET_URL = "http://localhost:8080/widget.html";
+
+test.use({
+    displayName: "Timmy",
+    synapseConfig: async ({ synapseConfig, _homeserver: homeserver }, use) => {
+        (homeserver as SynapseContainer).withConfigField("listeners[0].resources[0].names", ["client", "openid"]);
+        await use(synapseConfig);
+    },
+    page: async ({ context, page, moduleDir }, use) => {
+        await context.route(`${WIDGET_URL}*`, async (route) => {
+            await route.fulfill({ path: `${moduleDir}/e2e/fixture/widget.html`, contentType: "text/html" });
+        });
+
+        await page.goto("/");
+        await use(page);
+    },
+    bypassCSP: true,
+    launchOptions: {
+        args: ["--disable-web-security"],
+    },
+});
+
+test.describe("Widget Lifecycle", () => {
+    test.describe("trusted widgets", () => {
+        // Configure the module to pre-approve the widget URL for preloading, identity tokens,
+        // and the m.room.topic state event capability.
+        test.use({
+            config: {
+                "io.element.element-web-modules.widget-lifecycle": {
+                    widget_permissions: {
+                        [`${WIDGET_URL}*`]: {
+                            preload_approved: true,
+                            identity_approved: true,
+                            capabilities_approved: ["org.matrix.msc2762.receive.state_event:m.room.topic"],
+                        },
+                    },
+                },
+            },
+        });
+
+        test("auto-approves preload and identity", async ({ page, user, homeserver }, testInfo) => {
+            await rejectToastIfExists(page, "Verify this device");
+
+            // A bot creates a room with the widget pinned to the top panel, then invites the test user.
+            // Because the widget was added by a different user (the bot), Element would normally show a
+            // preload consent dialog before loading it — this test verifies that dialog is skipped.
+            const bot = await homeserver.registerUser(`bot_${testInfo.testId}`, "password", "Bot");
+            const { room_id: roomId } = await homeserver.csApi.request<{ room_id: string }>(
+                "POST",
+                "/v3/createRoom",
+                bot.accessToken,
+                {
+                    name: "Trusted Widget",
+                },
+            );
+            await homeserver.csApi.request<{ event_id: string }>(
+                "PUT",
+                `/v3/rooms/${encodeURIComponent(roomId)}/state/im.vector.modular.widgets/1`,
+                bot.accessToken,
+                {
+                    id: "1",
+                    creatorUserId: bot.userId,
+                    type: "custom",
+                    name: "Trusted Widget",
+                    url: `${WIDGET_URL}?hsUrl=${encodeURIComponent(homeserver.baseUrl)}&caps=org.matrix.msc2762.receive.state_event:m.room.topic`,
+                },
+            );
+            await homeserver.csApi.request(
+                "PUT",
+                `/v3/rooms/${encodeURIComponent(roomId)}/state/io.element.widgets.layout/`,
+                bot.accessToken,
+                {
+                    widgets: {
+                        "1": {
+                            container: "top",
+                        },
+                    },
+                },
+            );
+            await homeserver.csApi.request("POST", `/v3/rooms/${encodeURIComponent(roomId)}/invite`, bot.accessToken, {
+                user_id: user.userId,
+            });
+
+            await page.getByText("Trusted Widget").click();
+            await page.getByRole("button", { name: "Accept" }).click();
+
+            // No preload dialog should appear — the widget loads immediately.
+            await expect(page.getByRole("button", { name: "Continue" })).not.toBeVisible();
+
+            // The widget greets the user by ID, proving the identity token was also auto-approved
+            // and passed to the widget without any consent prompts.
+            await expect(
+                page
+                    .frameLocator('iframe[title="Trusted Widget"]')
+                    .getByRole("heading", { name: `Hello ${user.userId}!` }),
+            ).toBeVisible();
+        });
+
+        test("prompts for capabilities not in the allowlist", async ({ page, user, homeserver }, testInfo) => {
+            await rejectToastIfExists(page, "Verify this device");
+
+            const bot = await homeserver.registerUser(`bot_${testInfo.testId}`, "password", "Bot");
+            const { room_id: roomId } = await homeserver.csApi.request<{ room_id: string }>(
+                "POST",
+                "/v3/createRoom",
+                bot.accessToken,
+                {
+                    name: "Capabilities Widget",
+                },
+            );
+            // The widget requests two capabilities: m.room.topic (in the allowlist) and m.room.name (not in the allowlist).
+            await homeserver.csApi.request<{ event_id: string }>(
+                "PUT",
+                `/v3/rooms/${encodeURIComponent(roomId)}/state/im.vector.modular.widgets/1`,
+                bot.accessToken,
+                {
+                    id: "1",
+                    creatorUserId: bot.userId,
+                    type: "custom",
+                    name: "Capabilities Widget",
+                    url: `${WIDGET_URL}?hsUrl=${encodeURIComponent(homeserver.baseUrl)}&caps=org.matrix.msc2762.receive.state_event:m.room.topic,org.matrix.msc2762.receive.state_event:m.room.name`,
+                },
+            );
+            await homeserver.csApi.request(
+                "PUT",
+                `/v3/rooms/${encodeURIComponent(roomId)}/state/io.element.widgets.layout/`,
+                bot.accessToken,
+                {
+                    widgets: {
+                        "1": {
+                            container: "top",
+                        },
+                    },
+                },
+            );
+            await homeserver.csApi.request("POST", `/v3/rooms/${encodeURIComponent(roomId)}/invite`, bot.accessToken, {
+                user_id: user.userId,
+            });
+
+            await page.getByText("Capabilities Widget").click();
+            await page.getByRole("button", { name: "Accept" }).click();
+
+            // A capabilities approval dialog should appear since m.room.name was not pre-approved.
+            await expect(page.getByRole("button", { name: "Approve" })).toBeVisible();
+        });
+    });
+
+    test.describe("untrusted widgets", () => {
+        // No widget URLs are pre-approved, so all lifecycle prompts should be shown to the user.
+        test.use({
+            config: {
+                "io.element.element-web-modules.widget-lifecycle": {
+                    widget_permissions: {},
+                },
+            },
+        });
+
+        test("shows preload, capabilities, and OpenID dialogs for untrusted widgets", async ({
+            page,
+            user,
+            homeserver,
+        }, testInfo) => {
+            await rejectToastIfExists(page, "Verify this device");
+
+            const bot = await homeserver.registerUser(`bot_${testInfo.testId}`, "password", "Bot");
+            const { room_id: roomId } = await homeserver.csApi.request<{ room_id: string }>(
+                "POST",
+                "/v3/createRoom",
+                bot.accessToken,
+                {
+                    name: "Untrusted Widget",
+                },
+            );
+            await homeserver.csApi.request<{ event_id: string }>(
+                "PUT",
+                `/v3/rooms/${encodeURIComponent(roomId)}/state/im.vector.modular.widgets/1`,
+                bot.accessToken,
+                {
+                    id: "1",
+                    creatorUserId: bot.userId,
+                    type: "custom",
+                    name: "Untrusted Widget",
+                    url: `${WIDGET_URL}?hsUrl=${encodeURIComponent(homeserver.baseUrl)}&caps=org.matrix.msc2762.receive.state_event:m.room.topic`,
+                },
+            );
+            await homeserver.csApi.request(
+                "PUT",
+                `/v3/rooms/${encodeURIComponent(roomId)}/state/io.element.widgets.layout/`,
+                bot.accessToken,
+                {
+                    widgets: {
+                        "1": {
+                            container: "top",
+                        },
+                    },
+                },
+            );
+            await homeserver.csApi.request("POST", `/v3/rooms/${encodeURIComponent(roomId)}/invite`, bot.accessToken, {
+                user_id: user.userId,
+            });
+
+            await page.getByText("Untrusted Widget").click();
+            await page.getByRole("button", { name: "Accept" }).click();
+
+            // 1. Preload consent dialog — shown because the widget was added by another user (the bot).
+            await expect(page.getByRole("button", { name: "Continue" })).toBeVisible();
+            await page.getByRole("button", { name: "Continue" }).click();
+
+            // 2. Capabilities dialog — the widget requests m.room.topic once it loads.
+            await expect(page.getByRole("button", { name: "Approve" })).toBeVisible();
+            await page.getByRole("button", { name: "Approve" }).click();
+
+            // 3. OpenID identity dialog — the widget requests an identity token after capabilities are granted.
+            await expect(page.getByRole("button", { name: "Continue" })).toBeVisible();
+        });
+    });
+});
diff --git a/modules/widget-lifecycle/package.json b/modules/widget-lifecycle/package.json
new file mode 100644
index 0000000000..8abdc4924a
--- /dev/null
+++ b/modules/widget-lifecycle/package.json
@@ -0,0 +1,23 @@
+{
+    "name": "@element-hq/element-web-module-widget-lifecycle",
+    "private": true,
+    "version": "1.0.0",
+    "type": "module",
+    "main": "lib/index.js",
+    "license": "SEE LICENSE IN README.md",
+    "scripts": {
+        "build": "nx build",
+        "lint:types": "nx lint:types",
+        "test:unit": "nx test:unit"
+    },
+    "devDependencies": {
+        "@element-hq/element-web-module-api": "workspace:*",
+        "@types/node": "catalog:",
+        "typescript": "catalog:",
+        "vite": "catalog:",
+        "vitest": "catalog:"
+    },
+    "dependencies": {
+        "zod": "^4.0.0"
+    }
+}
diff --git a/modules/widget-lifecycle/project.json b/modules/widget-lifecycle/project.json
new file mode 100644
index 0000000000..1e166c083d
--- /dev/null
+++ b/modules/widget-lifecycle/project.json
@@ -0,0 +1,25 @@
+{
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "projectType": "library",
+    "targets": {
+        "build": {
+            "cache": true,
+            "command": "vite build",
+            "inputs": ["src"],
+            "outputs": ["{projectRoot}/lib"],
+            "options": { "cwd": "modules/widget-lifecycle" },
+            "dependsOn": ["^build"]
+        },
+        "test:unit": {
+            "command": "vitest run",
+            "options": { "cwd": "modules/widget-lifecycle" }
+        },
+        "lint:types": {
+            "command": "tsc --noEmit",
+            "options": {
+                "cwd": "modules/widget-lifecycle"
+            },
+            "dependsOn": ["^build"]
+        }
+    }
+}
diff --git a/modules/widget-lifecycle/src/WidgetLifecycleModule.test.ts b/modules/widget-lifecycle/src/WidgetLifecycleModule.test.ts
new file mode 100644
index 0000000000..7963102984
--- /dev/null
+++ b/modules/widget-lifecycle/src/WidgetLifecycleModule.test.ts
@@ -0,0 +1,153 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { vi, describe, expect, it } from "vitest";
+
+import WidgetLifecycleModule, { type WidgetLifecycleApiAdapter } from "./WidgetLifecycleModule";
+import type {
+    CapabilitiesApprover,
+    IdentityApprover,
+    PreloadApprover,
+    WidgetDescriptor,
+    Api,
+} from "@element-hq/element-web-module-api";
+
+const createApi = (config: unknown = {}) => {
+    const handlers: {
+        preload?: PreloadApprover;
+        identity?: IdentityApprover;
+        capabilities?: CapabilitiesApprover;
+    } = {};
+
+    const widgetLifecycle: WidgetLifecycleApiAdapter = {
+        registerPreloadApprover: vi.fn((approver) => {
+            handlers.preload = approver;
+        }),
+        registerIdentityApprover: vi.fn((approver) => {
+            handlers.identity = approver;
+        }),
+        registerCapabilitiesApprover: vi.fn((approver) => {
+            handlers.capabilities = approver;
+        }),
+    };
+
+    return {
+        api: {
+            config: {
+                get: () => config,
+            },
+            widgetLifecycle,
+        } as Api,
+        handlers,
+    };
+};
+
+const widget: WidgetDescriptor = {
+    id: "widget-id",
+    templateUrl: "https://example.com/",
+    creatorUserId: "@user-id",
+    type: "com.example.custom",
+    origin: "example.com",
+};
+
+describe("WidgetLifecycleModule", () => {
+    it("does nothing when no config is present", async () => {
+        const { api } = createApi(null);
+
+        const module = new WidgetLifecycleModule(api);
+        await module.load();
+
+        expect(api.widgetLifecycle.registerPreloadApprover).not.toHaveBeenCalled();
+        expect(api.widgetLifecycle.registerIdentityApprover).not.toHaveBeenCalled();
+        expect(api.widgetLifecycle.registerCapabilitiesApprover).not.toHaveBeenCalled();
+    });
+
+    it("approves preload when configured", async () => {
+        const { api, handlers } = createApi({
+            widget_permissions: {
+                "https://example.com/": { preload_approved: true },
+            },
+        });
+
+        const module = new WidgetLifecycleModule(api);
+        await module.load();
+
+        expect(await handlers.preload?.(widget)).toBe(true);
+    });
+
+    it("approves identity when configured", async () => {
+        const { api, handlers } = createApi({
+            widget_permissions: {
+                "https://example.com/": { identity_approved: true },
+            },
+        });
+
+        const module = new WidgetLifecycleModule(api);
+        await module.load();
+
+        expect(await handlers.identity?.(widget)).toBe(true);
+    });
+
+    it("approves configured capabilities", async () => {
+        const { api, handlers } = createApi({
+            widget_permissions: {
+                "https://example.com/": {
+                    capabilities_approved: ["org.matrix.msc2931.navigate"],
+                },
+            },
+        });
+
+        const module = new WidgetLifecycleModule(api);
+        await module.load();
+
+        const approved = await handlers.capabilities?.(
+            widget,
+            new Set(["org.matrix.msc2931.navigate", "org.matrix.msc2762.timeline:*"]),
+        );
+
+        expect(approved).toEqual(new Set(["org.matrix.msc2931.navigate"]));
+    });
+
+    it("returns no approvals when not configured", async () => {
+        const { api, handlers } = createApi({});
+
+        const module = new WidgetLifecycleModule(api);
+        await module.load();
+
+        expect(await handlers.preload?.(widget)).toBe(false);
+        expect(await handlers.identity?.(widget)).toBe(false);
+        expect(await handlers.capabilities?.(widget, new Set(["org.matrix.msc2931.navigate"]))).toBeUndefined();
+    });
+
+    it("returns no approvals when config is missing", async () => {
+        const { api, handlers } = createApi(undefined);
+
+        const module = new WidgetLifecycleModule(api);
+        await module.load();
+
+        expect(await handlers.preload?.(widget)).toBe(false);
+        expect(await handlers.identity?.(widget)).toBe(false);
+        expect(await handlers.capabilities?.(widget, new Set(["org.matrix.msc2931.navigate"]))).toBeUndefined();
+    });
+
+    it("fails closed on invalid config", async () => {
+        const { api, handlers } = createApi({
+            widget_permissions: {
+                "https://example.com/": {
+                    preload_approved: null,
+                },
+            },
+        });
+
+        const module = new WidgetLifecycleModule(api);
+        await module.load();
+
+        expect(await handlers.preload?.(widget)).toBe(false);
+        expect(await handlers.identity?.(widget)).toBe(false);
+        expect(await handlers.capabilities?.(widget, new Set(["org.matrix.msc2931.navigate"]))).toBeUndefined();
+    });
+});
diff --git a/modules/widget-lifecycle/src/WidgetLifecycleModule.ts b/modules/widget-lifecycle/src/WidgetLifecycleModule.ts
new file mode 100644
index 0000000000..28ab258a2a
--- /dev/null
+++ b/modules/widget-lifecycle/src/WidgetLifecycleModule.ts
@@ -0,0 +1,91 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import type { Api, Module, WidgetDescriptor, WidgetLifecycleApi } from "@element-hq/element-web-module-api";
+import { CONFIG_KEY, parseWidgetLifecycleConfig, type WidgetLifecycleModuleConfig } from "./config";
+import { constructWidgetPermissions } from "./utils/constructWidgetPermissions";
+import { matchPattern } from "./utils/matchPattern";
+import { name as ModuleName } from "../package.json";
+
+/**
+ * Subset of {@link WidgetLifecycleApi} used by the module for registration only.
+ * @internal
+ */
+export type WidgetLifecycleApiAdapter = Pick<
+    WidgetLifecycleApi,
+    "registerPreloadApprover" | "registerIdentityApprover" | "registerCapabilitiesApprover"
+>;
+
+type ModuleApi = Pick<Api, "config" | "widgetLifecycle">;
+
+/**
+ * Module that auto-approves widget preloading, identity token requests, and capability
+ * requests based on URL-pattern rules defined in config.json.
+ */
+export default class WidgetLifecycleModule implements Module {
+    public static readonly moduleApiVersion = "^1.10.0";
+
+    private config: WidgetLifecycleModuleConfig = {};
+
+    public constructor(private api: ModuleApi) {}
+
+    public async load(): Promise<void> {
+        const rawConfig = this.api.config.get(CONFIG_KEY);
+        if (!rawConfig) {
+            console.debug(`No configuration found for module "${ModuleName}", skipping initialization.`);
+            return;
+        }
+
+        if (!this.api.widgetLifecycle) {
+            throw new Error(
+                "Widget lifecycle API is not available. Update Element Web to a build that provides widget lifecycle module support.",
+            );
+        }
+
+        try {
+            this.config = parseWidgetLifecycleConfig(rawConfig);
+        } catch (error) {
+            console.error("[WidgetLifecycle] Failed to init module", error);
+            this.config = {};
+        }
+
+        this.api.widgetLifecycle.registerPreloadApprover((widget) => this.preapprovePreload(widget));
+        this.api.widgetLifecycle.registerIdentityApprover((widget) => this.preapproveIdentity(widget));
+        this.api.widgetLifecycle.registerCapabilitiesApprover((widget, requested) =>
+            this.preapproveCapabilities(widget, requested),
+        );
+    }
+
+    private preapprovePreload(widget: WidgetDescriptor): boolean {
+        const configuration = constructWidgetPermissions(this.config, widget.templateUrl);
+        return configuration.preload_approved === true;
+    }
+
+    private preapproveIdentity(widget: WidgetDescriptor): boolean {
+        const configuration = constructWidgetPermissions(this.config, widget.templateUrl);
+        return configuration.identity_approved === true;
+    }
+
+    private preapproveCapabilities(
+        widget: WidgetDescriptor,
+        requestedCapabilities: Set<string>,
+    ): Set<string> | undefined {
+        const configuration = constructWidgetPermissions(this.config, widget.templateUrl);
+        const capabilitiesApproved = configuration.capabilities_approved;
+
+        if (!capabilitiesApproved) return undefined;
+
+        const approvedCapabilities = new Set<string>();
+        for (const requestedCapability of requestedCapabilities) {
+            if (capabilitiesApproved.some((capability) => matchPattern(requestedCapability, capability))) {
+                approvedCapabilities.add(requestedCapability);
+            }
+        }
+
+        return approvedCapabilities.size > 0 ? approvedCapabilities : undefined;
+    }
+}
diff --git a/modules/widget-lifecycle/src/config.test.ts b/modules/widget-lifecycle/src/config.test.ts
new file mode 100644
index 0000000000..c8f345a6a3
--- /dev/null
+++ b/modules/widget-lifecycle/src/config.test.ts
@@ -0,0 +1,88 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { describe, expect, it } from "vitest";
+
+import { parseWidgetLifecycleConfig } from "./config";
+
+describe("parseWidgetLifecycleConfig", () => {
+    it("accepts missing configuration", () => {
+        expect(parseWidgetLifecycleConfig(undefined)).toEqual({});
+    });
+
+    it("accepts empty configuration", () => {
+        expect(parseWidgetLifecycleConfig({})).toEqual({});
+    });
+
+    it("accepts valid configuration", () => {
+        expect(
+            parseWidgetLifecycleConfig({
+                widget_permissions: {
+                    "https://localhost": {
+                        preload_approved: true,
+                        identity_approved: false,
+                        capabilities_approved: [],
+                    },
+                },
+            }),
+        ).toEqual({
+            "https://localhost": {
+                preload_approved: true,
+                identity_approved: false,
+                capabilities_approved: [],
+            },
+        });
+    });
+
+    it("accepts additional properties", () => {
+        expect(
+            parseWidgetLifecycleConfig({
+                widget_permissions: {
+                    "https://localhost": {
+                        preload_approved: true,
+                        identity_approved: false,
+                        capabilities_approved: ["capability"],
+                        additional: "tmp",
+                    },
+                },
+            }),
+        ).toEqual({
+            "https://localhost": {
+                preload_approved: true,
+                identity_approved: false,
+                capabilities_approved: ["capability"],
+                additional: "tmp",
+            },
+        });
+    });
+
+    it.each([
+        { preload_approved: null },
+        { preload_approved: 123 },
+        { identity_approved: null },
+        { identity_approved: 123 },
+        { capabilities_approved: null },
+        { capabilities_approved: 123 },
+        { capabilities_approved: [undefined] },
+        { capabilities_approved: [null] },
+        { capabilities_approved: [123] },
+        { capabilities_approved: [""] },
+    ])("rejects invalid widget configuration %j", (patch) => {
+        expect(() =>
+            parseWidgetLifecycleConfig({
+                widget_permissions: {
+                    "https://localhost": {
+                        preload_approved: true,
+                        identity_approved: false,
+                        capabilities_approved: ["capability"],
+                        ...patch,
+                    },
+                },
+            }),
+        ).toThrow();
+    });
+});
diff --git a/modules/widget-lifecycle/src/config.ts b/modules/widget-lifecycle/src/config.ts
new file mode 100644
index 0000000000..290ae58911
--- /dev/null
+++ b/modules/widget-lifecycle/src/config.ts
@@ -0,0 +1,54 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { z } from "zod/mini";
+
+z.config(z.locales.en());
+
+/** The config.json key under which widget lifecycle module configuration is stored. */
+export const CONFIG_KEY = "io.element.element-web-modules.widget-lifecycle";
+
+const WidgetConfigurationSchema = z.partial(
+    z.looseObject({
+        preload_approved: z.boolean(),
+        identity_approved: z.boolean(),
+        capabilities_approved: z.array(z.string().check(z.minLength(1))),
+    }),
+);
+
+/** Per-widget approval settings: preload, identity, and capabilities. */
+export type WidgetConfiguration = z.infer<typeof WidgetConfigurationSchema>;
+
+const ModuleConfigSchema = z.partial(
+    z.looseObject({
+        widget_permissions: z.record(z.string(), WidgetConfigurationSchema),
+    }),
+);
+
+/** Map from URL patterns to their widget approval configuration. */
+export type WidgetLifecycleModuleConfig = Record<string, WidgetConfiguration>;
+
+declare module "@element-hq/element-web-module-api" {
+    export interface Config {
+        [CONFIG_KEY]?: z.input<typeof ModuleConfigSchema>;
+    }
+}
+
+/**
+ * Parse and validate the widget lifecycle module configuration.
+ * Returns an empty config if the input is falsy; throws on schema violations.
+ */
+export const parseWidgetLifecycleConfig = (value: unknown): WidgetLifecycleModuleConfig => {
+    if (!value) return {};
+
+    const result = ModuleConfigSchema.safeParse(value);
+    if (!result.success) {
+        throw new Error(`Errors in the module configuration for "${CONFIG_KEY}": ${result.error.message}`);
+    }
+
+    return result.data.widget_permissions ?? {};
+};
diff --git a/modules/widget-lifecycle/src/index.ts b/modules/widget-lifecycle/src/index.ts
new file mode 100644
index 0000000000..7cff3faacc
--- /dev/null
+++ b/modules/widget-lifecycle/src/index.ts
@@ -0,0 +1,11 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import type { ModuleFactory } from "@element-hq/element-web-module-api";
+import WidgetLifecycleModule from "./WidgetLifecycleModule";
+
+export default WidgetLifecycleModule satisfies ModuleFactory;
diff --git a/modules/widget-lifecycle/src/utils/constructWidgetPermissions.test.ts b/modules/widget-lifecycle/src/utils/constructWidgetPermissions.test.ts
new file mode 100644
index 0000000000..95ea897dc4
--- /dev/null
+++ b/modules/widget-lifecycle/src/utils/constructWidgetPermissions.test.ts
@@ -0,0 +1,76 @@
+/*
+Copyright 2026 Element Creations Ltd.
+Copyright 2023 Nordeck IT + Consulting GmbH
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { describe, expect, it } from "vitest";
+
+import { constructWidgetPermissions, sortLongestMatchLast } from "./constructWidgetPermissions";
+
+describe("constructWidgetPermissions", () => {
+    it("finds exact match", () => {
+        expect(constructWidgetPermissions({ "https://a.com/": { preload_approved: true } }, "https://a.com/")).toEqual({
+            preload_approved: true,
+        });
+    });
+
+    it("finds prefix match", () => {
+        expect(
+            constructWidgetPermissions({ "https://a.com/*": { preload_approved: true } }, "https://a.com/some"),
+        ).toEqual({ preload_approved: true });
+    });
+
+    it("merges multiple permissions", () => {
+        expect(
+            constructWidgetPermissions(
+                {
+                    "https://b.com/path": {
+                        preload_approved: false,
+                        capabilities_approved: ["org.matrix.msc2762.timeline:*"],
+                    },
+                    "https://b.com/*": {
+                        preload_approved: true,
+                        identity_approved: true,
+                        capabilities_approved: ["org.matrix.msc2931.navigate"],
+                    },
+                },
+                "https://b.com/path",
+            ),
+        ).toEqual({
+            preload_approved: false,
+            identity_approved: true,
+            capabilities_approved: ["org.matrix.msc2762.timeline:*"],
+        });
+    });
+
+    it("skips unknown url", () => {
+        expect(constructWidgetPermissions({ "https://a.com/": { preload_approved: true } }, "https://a.com/x")).toEqual(
+            {},
+        );
+    });
+});
+
+describe("sortLongestMatchLast", () => {
+    it("sorts longest match last", () => {
+        expect(
+            [
+                "org.matrix.msc2762.receive.state_event:*",
+                "org.matrix.msc2762.receive.*",
+                "org.matrix.msc2762.receive.state_event:m.custom*",
+                "org.matrix.msc2762.receive.state_event:m.custom#state_key",
+                "org.matrix.msc2762.receive.state_event:m.custom#*",
+                "*",
+            ].sort(sortLongestMatchLast),
+        ).toEqual([
+            "*",
+            "org.matrix.msc2762.receive.*",
+            "org.matrix.msc2762.receive.state_event:*",
+            "org.matrix.msc2762.receive.state_event:m.custom*",
+            "org.matrix.msc2762.receive.state_event:m.custom#*",
+            "org.matrix.msc2762.receive.state_event:m.custom#state_key",
+        ]);
+    });
+});
diff --git a/modules/widget-lifecycle/src/utils/constructWidgetPermissions.ts b/modules/widget-lifecycle/src/utils/constructWidgetPermissions.ts
new file mode 100644
index 0000000000..07943c1b82
--- /dev/null
+++ b/modules/widget-lifecycle/src/utils/constructWidgetPermissions.ts
@@ -0,0 +1,28 @@
+/*
+Copyright 2026 Element Creations Ltd.
+Copyright 2023 Nordeck IT + Consulting GmbH
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import type { WidgetLifecycleModuleConfig, WidgetConfiguration } from "../config";
+import { matchPattern } from "./matchPattern";
+
+/**
+ * Returns the WidgetConfiguration for a widget.
+ * If multiple WidgetConfigurations match, the most specific match wins per field.
+ */
+export function constructWidgetPermissions(
+    config: WidgetLifecycleModuleConfig,
+    widgetUrl: string,
+): WidgetConfiguration {
+    const widgetPermissionsMatched = Object.keys(config).filter((pattern) => matchPattern(widgetUrl, pattern));
+
+    return widgetPermissionsMatched.sort(sortLongestMatchLast).reduce((prev, key) => ({ ...prev, ...config[key] }), {});
+}
+
+/** Sort strings alphabetically so longer, more-specific patterns are applied last. */
+export function sortLongestMatchLast(a: string, b: string): number {
+    return a.localeCompare(b, "en", { sensitivity: "base" });
+}
diff --git a/modules/widget-lifecycle/src/utils/matchPattern.test.ts b/modules/widget-lifecycle/src/utils/matchPattern.test.ts
new file mode 100644
index 0000000000..af3e32b44e
--- /dev/null
+++ b/modules/widget-lifecycle/src/utils/matchPattern.test.ts
@@ -0,0 +1,35 @@
+/*
+Copyright 2026 Element Creations Ltd.
+Copyright 2023 Nordeck IT + Consulting GmbH
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { describe, expect, it } from "vitest";
+
+import { matchPattern } from "./matchPattern";
+
+describe("matchPattern", () => {
+    it.each([
+        "*",
+        "org.matrix.msc2762.receive.*",
+        "org.matrix.msc2762.receive.state_event:*",
+        "org.matrix.msc2762.receive.state_event:m.custom*",
+        "org.matrix.msc2762.receive.state_event:m.custom#*",
+        "org.matrix.msc2762.receive.state_event:m.custom#state_key",
+        "org.matrix.msc2762.receive.state_event:m.custom#state_key*",
+    ])("matches %s", (pattern) => {
+        expect(matchPattern("org.matrix.msc2762.receive.state_event:m.custom#state_key", pattern)).toBe(true);
+    });
+
+    it.each([
+        "org.matrix.msc2762.receive.state_event:",
+        "org.matrix.msc2762.receive.state_event:m.custom",
+        "org.matrix.msc2762.receive.state_event:m.custom#other_key",
+        "org.matrix.msc2762.receive.*:m.custom#state_key",
+        "org.matrix.msc2762.receive.room_event:m.custom",
+    ])("does not match %s", (pattern) => {
+        expect(matchPattern("org.matrix.msc2762.receive.state_event:m.custom#state_key", pattern)).toBe(false);
+    });
+});
diff --git a/modules/widget-lifecycle/src/utils/matchPattern.ts b/modules/widget-lifecycle/src/utils/matchPattern.ts
new file mode 100644
index 0000000000..8271649291
--- /dev/null
+++ b/modules/widget-lifecycle/src/utils/matchPattern.ts
@@ -0,0 +1,14 @@
+/*
+Copyright 2026 Element Creations Ltd.
+Copyright 2023 Nordeck IT + Consulting GmbH
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/**
+ * Checks if string matches pattern. Pattern can end with '*' to support prefix matching.
+ */
+export function matchPattern(value: string, pattern: string): boolean {
+    return pattern.endsWith("*") ? value.startsWith(pattern.slice(0, pattern.length - 1)) : value === pattern;
+}
diff --git a/modules/widget-lifecycle/tsconfig.json b/modules/widget-lifecycle/tsconfig.json
new file mode 100644
index 0000000000..25392e3cc8
--- /dev/null
+++ b/modules/widget-lifecycle/tsconfig.json
@@ -0,0 +1,7 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "lib"
+    },
+    "include": ["src"]
+}
diff --git a/modules/widget-lifecycle/vite.config.ts b/modules/widget-lifecycle/vite.config.ts
new file mode 100644
index 0000000000..6a88b800ca
--- /dev/null
+++ b/modules/widget-lifecycle/vite.config.ts
@@ -0,0 +1,21 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { fileURLToPath } from "node:url";
+import { mergeConfig } from "vitest/config";
+import baseConfig from "@element-hq/element-web-module-api/vite.base.ts";
+
+export default mergeConfig(baseConfig, {
+    build: {
+        lib: {
+            entry: fileURLToPath(import.meta.resolve("./src/index.ts")),
+            name: "element-web-module-widget-lifecycle",
+            fileName: "index",
+            formats: ["es"],
+        },
+    },
+});
diff --git a/modules/widget-lifecycle/vitest.config.ts b/modules/widget-lifecycle/vitest.config.ts
new file mode 100644
index 0000000000..3ef4e022b4
--- /dev/null
+++ b/modules/widget-lifecycle/vitest.config.ts
@@ -0,0 +1,14 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { defineProject } from "vitest/config";
+
+export default defineProject({
+    test: {
+        exclude: ["./e2e/**/*", "./node_modules/**/*"],
+    },
+});
diff --git a/modules/widget-toggles/README.md b/modules/widget-toggles/README.md
new file mode 100644
index 0000000000..e117e706e2
--- /dev/null
+++ b/modules/widget-toggles/README.md
@@ -0,0 +1,16 @@
+# Widget Toggles Module
+
+Adds room header buttons for widgets in the room.
+
+This module needs to be configured to control what widget types get buttons added for them.
+The following config snippet enables the module and configures it to add buttons for both
+custom and jitsi widgets:
+
+```
+"modules": [
+    "/modules/widget-toggles/lib/index.js"
+],
+"io.element.element-web-modules.widget-toggles": {
+    "types": ["m.custom", "jitsi"]
+}
+```
diff --git a/modules/widget-toggles/e2e/fixture/widget.html b/modules/widget-toggles/e2e/fixture/widget.html
new file mode 100644
index 0000000000..c2c28e414e
--- /dev/null
+++ b/modules/widget-toggles/e2e/fixture/widget.html
@@ -0,0 +1,5 @@
+<html>
+    <body>
+        <h1>This is the content of the widget</h1>
+    </body>
+</html>
diff --git a/modules/widget-toggles/e2e/snapshots/widget-toggles.spec.ts/widget-toggle-button-default-icon-linux.png b/modules/widget-toggles/e2e/snapshots/widget-toggles.spec.ts/widget-toggle-button-default-icon-linux.png
new file mode 100644
index 0000000000..a171d0adc8
Binary files /dev/null and b/modules/widget-toggles/e2e/snapshots/widget-toggles.spec.ts/widget-toggle-button-default-icon-linux.png differ
diff --git a/modules/widget-toggles/e2e/widget-toggles.spec.ts b/modules/widget-toggles/e2e/widget-toggles.spec.ts
new file mode 100644
index 0000000000..7aa94f1f03
--- /dev/null
+++ b/modules/widget-toggles/e2e/widget-toggles.spec.ts
@@ -0,0 +1,186 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-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 { type Credentials } from "@element-hq/element-web-playwright-common/lib/utils/api";
+import { type StartedHomeserverContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers/HomeserverContainer";
+import { type Container } from "@element-hq/element-web-module-api";
+
+import { test as base, expect } from "../../playwright/element-web-test.ts";
+
+const test = base.extend<{
+    // Resolver for when to respond to the navigation.json request
+    navigationJsonResolver: PromiseWithResolvers<void>;
+}>({
+    navigationJsonResolver: async ({}, use) => {
+        await use(Promise.withResolvers<void>());
+    },
+});
+
+const TEST_WIDGET_NAME = "Name of the test widget";
+
+async function makeRoomWithWidgetAndGoTo(
+    homeserver: StartedHomeserverContainer,
+    user: Credentials,
+    page: Page,
+    avatarUrl?: string,
+): Promise<string> {
+    const { room_id: roomId } = await homeserver.csApi.request<{ room_id: string }>(
+        "POST",
+        "/v3/createRoom",
+        user.accessToken,
+        {
+            name: "Come on in we've got widgets",
+        },
+    );
+    await homeserver.csApi.request<{
+        event_id: string;
+    }>("PUT", `/v3/rooms/${encodeURIComponent(roomId)}/state/im.vector.modular.widgets/1`, user.accessToken, {
+        id: "1",
+        creatorUserId: user.userId,
+        type: "m.custom",
+        name: TEST_WIDGET_NAME,
+        url: `http://localhost:8080/widget.html`,
+        avatar_url: avatarUrl,
+    });
+
+    await page.goto(`/#/room/${roomId}`);
+
+    return roomId;
+}
+
+async function moveWidgetToContainer(
+    homeserver: StartedHomeserverContainer,
+    user: Credentials,
+    roomId: string,
+    container: Container,
+): Promise<void> {
+    await homeserver.csApi.request(
+        "PUT",
+        `/v3/user/${encodeURIComponent(user.userId)}/rooms/${encodeURIComponent(roomId)}/account_data/im.vector.web.settings`,
+        user.accessToken,
+        {
+            "Widgets.layout": {
+                widgets: {
+                    "1": { container },
+                },
+            },
+        },
+    );
+}
+
+test.describe("widget-toggles", () => {
+    test.use({
+        displayName: "Timmy",
+        page: async ({ context, page, moduleDir }, use) => {
+            await context.route("http://localhost:8080/widget.html*", async (route) => {
+                await route.fulfill({ path: `${moduleDir}/e2e/fixture/widget.html`, contentType: "text/html" });
+            });
+
+            await context.route("http://localhost:8080/wigeon.png", async (route) => {
+                await route.fulfill({ path: `${moduleDir}/e2e/fixture/wigeon.png`, contentType: "image/png" });
+            });
+
+            await page.goto("/");
+            await use(page);
+        },
+    });
+
+    test("should not error if config is missing", async ({ page }) => {
+        await expect(page.getByText("Your Element is misconfigured")).not.toBeVisible();
+        await expect(page.getByText("Errors in module configuration")).not.toBeVisible();
+        // We don't take a screenshot as we don't want to assert Element's styling, only our own
+    });
+
+    test.describe("with invalid config", () => {
+        test.use({
+            config: {
+                "io.element.element-web-modules.widget-toggles": {
+                    foo: "bar",
+                },
+            },
+        });
+
+        test("should render error", async ({ page }) => {
+            await expect(page.getByText("Your Element is misconfigured")).toBeVisible();
+            await expect(page.getByText("Errors in module configuration")).toBeVisible();
+            // We don't take a screenshot as we don't want to assert Element's styling, only our own
+        });
+    });
+
+    test.describe("with correct config", () => {
+        test.use({
+            config: {
+                "io.element.element-web-modules.widget-toggles": {
+                    types: ["m.custom"],
+                },
+            },
+        });
+
+        test(
+            "should render 'show' button for widget not in top",
+            { tag: ["@screenshot"] },
+            async ({ homeserver, page, user }) => {
+                await makeRoomWithWidgetAndGoTo(homeserver, user, page);
+
+                await expect(page.getByRole("button", { name: "Show " + TEST_WIDGET_NAME })).toBeVisible();
+            },
+        );
+
+        test(
+            "should render 'hide' button for widget in top",
+            { tag: ["@screenshot"] },
+            async ({ homeserver, page, user }) => {
+                const roomId = await makeRoomWithWidgetAndGoTo(homeserver, user, page);
+
+                await moveWidgetToContainer(homeserver, user, roomId, "top");
+
+                await expect(page.getByRole("button", { name: "Hide " + TEST_WIDGET_NAME })).toBeVisible();
+            },
+        );
+
+        test("should move widget to top when 'show' button is clicked", async ({ homeserver, page, user }) => {
+            await makeRoomWithWidgetAndGoTo(homeserver, user, page);
+
+            await page.getByRole("button", { name: "Show " + TEST_WIDGET_NAME }).click();
+            await expect(page.getByRole("button", { name: "Hide " + TEST_WIDGET_NAME })).toBeVisible();
+
+            await expect(page.locator('iframe[title="Name of the test widget"]')).toBeVisible();
+        });
+
+        test("should move widget to left when 'hide' button is clicked", async ({ homeserver, page, user }) => {
+            const roomId = await makeRoomWithWidgetAndGoTo(homeserver, user, page);
+            await moveWidgetToContainer(homeserver, user, roomId, "top");
+
+            await expect(page.locator('iframe[title="Name of the test widget"]')).toBeVisible();
+
+            await page.getByRole("button", { name: "Hide " + TEST_WIDGET_NAME }).click();
+
+            await expect(page.locator('iframe[title="Name of the test widget"]')).not.toBeVisible();
+        });
+
+        test("uses widget icon for button image if present", async ({ homeserver, page, user }) => {
+            await makeRoomWithWidgetAndGoTo(homeserver, user, page, "mxc://fakehomeserver/fake_content_id");
+
+            await expect(
+                page.getByRole("button", { name: "Show " + TEST_WIDGET_NAME }).getByRole("img"),
+            ).toHaveAttribute("src", /\/_matrix\/media\/v3\/download\/fakehomeserver\/fake_content_id$/);
+        });
+
+        test(
+            "uses built in icon for widgets with no avatar",
+            { tag: ["@screenshot"] },
+            async ({ homeserver, page, user }) => {
+                await makeRoomWithWidgetAndGoTo(homeserver, user, page);
+
+                await expect(page.getByRole("button", { name: "Show " + TEST_WIDGET_NAME })).toMatchScreenshot(
+                    "widget-toggle-button-default-icon.png",
+                );
+            },
+        );
+    });
+});
diff --git a/modules/widget-toggles/package.json b/modules/widget-toggles/package.json
new file mode 100644
index 0000000000..9a50c80b8c
--- /dev/null
+++ b/modules/widget-toggles/package.json
@@ -0,0 +1,37 @@
+{
+    "name": "@element-hq/element-web-module-widget-toggle",
+    "private": true,
+    "version": "1.0.0",
+    "type": "module",
+    "main": "lib/index.js",
+    "license": "SEE LICENSE IN README.md",
+    "scripts": {
+        "build": "nx build",
+        "lint:types": "nx lint:types",
+        "test:unit": "nx test:unit"
+    },
+    "devDependencies": {
+        "@arcmantle/vite-plugin-import-css-sheet": "^1.0.12",
+        "@element-hq/element-web-module-api": "workspace:*",
+        "@testing-library/dom": "^10.4.1",
+        "@testing-library/react": "^16.3.2",
+        "@testing-library/user-event": "^14.6.1",
+        "@types/node": "catalog:",
+        "@types/react": "^19",
+        "@vitejs/plugin-react": "catalog:",
+        "@vitest/browser-playwright": "catalog:",
+        "react": "catalog:",
+        "typescript": "catalog:",
+        "vite": "catalog:",
+        "vite-plugin-node-polyfills": "catalog:",
+        "vite-plugin-svgr": "catalog:",
+        "vitest": "catalog:"
+    },
+    "dependencies": {
+        "@vector-im/compound-design-tokens": "^10.0.0",
+        "@vector-im/compound-web": "^9.0.0",
+        "matrix-widget-api": "^1.17.0",
+        "styled-components": "^6.3.11",
+        "zod": "^4.3.6"
+    }
+}
diff --git a/modules/widget-toggles/project.json b/modules/widget-toggles/project.json
new file mode 100644
index 0000000000..5c5854e3a6
--- /dev/null
+++ b/modules/widget-toggles/project.json
@@ -0,0 +1,25 @@
+{
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "projectType": "library",
+    "targets": {
+        "build": {
+            "cache": true,
+            "command": "vite build",
+            "inputs": ["src"],
+            "outputs": ["{projectRoot}/lib"],
+            "options": { "cwd": "modules/widget-toggles" },
+            "dependsOn": ["^build"]
+        },
+        "test:unit": {
+            "command": "vitest run",
+            "options": { "cwd": "modules/widget-toggles" }
+        },
+        "lint:types": {
+            "command": "tsc --noEmit",
+            "options": {
+                "cwd": "modules/widget-toggles"
+            },
+            "dependsOn": ["^build"]
+        }
+    }
+}
diff --git a/modules/widget-toggles/src/config.test.ts b/modules/widget-toggles/src/config.test.ts
new file mode 100644
index 0000000000..1a74765b7b
--- /dev/null
+++ b/modules/widget-toggles/src/config.test.ts
@@ -0,0 +1,43 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { describe, expect, test } from "vitest";
+
+import { WidgetTogglesConfig } from "./config";
+
+describe("WidgetTogglesConfig", () => {
+    test("parses a valid config with an array of widget types", () => {
+        const result = WidgetTogglesConfig.safeParse({ types: ["m.video", "m.audio"] });
+        expect(result.success).toBe(true);
+        if (result.success) {
+            expect(result.data.types).toEqual(["m.video", "m.audio"]);
+        }
+    });
+
+    test("parses a valid config with an empty types array", () => {
+        const result = WidgetTogglesConfig.safeParse({ types: [] });
+        expect(result.success).toBe(true);
+        if (result.success) {
+            expect(result.data.types).toEqual([]);
+        }
+    });
+
+    test("rejects a config missing the types field", () => {
+        const result = WidgetTogglesConfig.safeParse({});
+        expect(result.success).toBe(false);
+    });
+
+    test("rejects a config where types is not an array", () => {
+        const result = WidgetTogglesConfig.safeParse({ types: "m.video" });
+        expect(result.success).toBe(false);
+    });
+
+    test("rejects a config where types contains non-string values", () => {
+        const result = WidgetTogglesConfig.safeParse({ types: [1, 2, 3] });
+        expect(result.success).toBe(false);
+    });
+});
diff --git a/modules/widget-toggles/src/config.ts b/modules/widget-toggles/src/config.ts
new file mode 100644
index 0000000000..2c4bdb9d1a
--- /dev/null
+++ b/modules/widget-toggles/src/config.ts
@@ -0,0 +1,27 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { z, type input } from "zod/mini";
+
+z.config(z.locales.en());
+
+export const WidgetTogglesConfig = z.object({
+    /**
+     * The widget types to show a toggle for.
+     */
+    types: z.array(z.string()),
+});
+
+export type WidgetTogglesConfig = z.infer<typeof WidgetTogglesConfig>;
+
+export const CONFIG_KEY = "io.element.element-web-modules.widget-toggles";
+
+declare module "@element-hq/element-web-module-api" {
+    export interface Config {
+        [CONFIG_KEY]?: input<WidgetTogglesConfig>;
+    }
+}
diff --git a/modules/widget-toggles/src/index.test.ts b/modules/widget-toggles/src/index.test.ts
new file mode 100644
index 0000000000..e6a38bff70
--- /dev/null
+++ b/modules/widget-toggles/src/index.test.ts
@@ -0,0 +1,164 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { render, type RenderResult, screen } from "@testing-library/react";
+import { type Api } from "@element-hq/element-web-module-api";
+import { type IWidget } from "matrix-widget-api";
+
+import WidgetToggleModule from "./index";
+import { CONFIG_KEY, WidgetTogglesConfig } from "./config";
+import { mockWidget, mockWidgetApi } from "./tests/mocks";
+
+const makeApi = (widgets: IWidget[] = []): Api => {
+    const addRoomHeaderButtonCallback = vi.fn();
+    return {
+        config: {
+            get: vi.fn().mockReturnValue({ types: ["m.custom"] }),
+        },
+        extras: {
+            addRoomHeaderButtonCallback,
+        },
+        widget: mockWidgetApi({
+            getWidgetsInRoom: vi.fn().mockReturnValue(widgets),
+        }),
+        i18n: {
+            translate: vi.fn().mockImplementation((key: string) => key),
+        },
+    } as unknown as Api;
+};
+
+vi.mock("../src/config", async () => {
+    return {
+        CONFIG_KEY: "fake_config_key",
+        WidgetTogglesConfig: {
+            parse: vi.fn(),
+        },
+    };
+});
+
+describe("WidgetToggleModule", () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+
+    describe("load", () => {
+        test("reads config using CONFIG_KEY", async () => {
+            const api = makeApi();
+
+            const module = new WidgetToggleModule(api);
+            await module.load();
+
+            expect(api.config.get).toHaveBeenCalledWith(CONFIG_KEY);
+        });
+
+        test("parses config with WidgetTogglesConfig.parse", async () => {
+            const api = makeApi();
+            const rawConfig = { types: ["m.custom"] };
+            (api.config.get as ReturnType<typeof vi.fn>).mockReturnValue(rawConfig);
+
+            const module = new WidgetToggleModule(api);
+            await module.load();
+
+            expect(WidgetTogglesConfig.parse).toHaveBeenCalledWith(rawConfig);
+        });
+
+        test("registers a room header button callback", async () => {
+            const api = makeApi();
+            (WidgetTogglesConfig.parse as ReturnType<typeof vi.fn>).mockReturnValue({ types: ["m.custom"] });
+
+            const module = new WidgetToggleModule(api);
+            await module.load();
+
+            expect(api.extras.addRoomHeaderButtonCallback).toHaveBeenCalledOnce();
+        });
+
+        test("throws error when config parsing fails", async () => {
+            const api = makeApi();
+            (WidgetTogglesConfig.parse as ReturnType<typeof vi.fn>).mockImplementation(() => {
+                throw new Error("Invalid config");
+            });
+
+            const module = new WidgetToggleModule(api);
+            await expect(module.load()).rejects.toThrow("Errors in module configuration for widget toggles module");
+        });
+    });
+
+    describe("room header button callback", () => {
+        const roomId = "!room:example.com";
+
+        const getCallback = async (api: Api): Promise<(roomId: string) => React.JSX.Element | undefined> => {
+            (WidgetTogglesConfig.parse as ReturnType<typeof vi.fn>).mockReturnValue({ types: ["m.custom"] });
+            const module = new WidgetToggleModule(api);
+            await module.load();
+            return (api.extras.addRoomHeaderButtonCallback as ReturnType<typeof vi.fn>).mock.calls[0][0];
+        };
+
+        const mockAndRender = async (api: Api): Promise<RenderResult> => {
+            (api.i18n.translate as ReturnType<typeof vi.fn>).mockImplementation(
+                (key: string, vars?: Record<string, string>) => {
+                    let result = key;
+                    if (vars) {
+                        for (const [k, v] of Object.entries(vars)) {
+                            result = result.replace(`%(${k})s`, v);
+                        }
+                    }
+                    return result;
+                },
+            );
+            const callback = await getCallback(api);
+
+            const result = callback(roomId);
+            expect(result).toBeDefined();
+            return render(result);
+        };
+
+        test("returns undefined when there are no widgets in the room", async () => {
+            const api = makeApi([]);
+            const callback = await getCallback(api);
+
+            const result = callback(roomId);
+            expect(result).toBeUndefined();
+        });
+
+        test("returns undefined when no widgets match the configured types", async () => {
+            const api = makeApi([mockWidget({ type: "m.other" })]);
+            const callback = await getCallback(api);
+
+            const result = callback(roomId);
+            expect(result).toBeUndefined();
+        });
+
+        test("renders WidgetToggle for each matching widget", async () => {
+            const api = makeApi([
+                mockWidget({ id: "w1", type: "m.custom", name: "Widget One" }),
+                mockWidget({ id: "w2", type: "m.custom", name: "Widget Two" }),
+            ]);
+            await mockAndRender(api);
+
+            expect(screen.getAllByRole("button").length).toBe(2);
+        });
+
+        test("does not render WidgetToggle for non-matching widget types", async () => {
+            const api = makeApi([
+                mockWidget({ id: "w1", type: "m.custom", name: "Widget One" }),
+                mockWidget({ id: "w2", type: "m.other", name: "Widget Other" }),
+            ]);
+            await mockAndRender(api);
+
+            expect(screen.getAllByRole("button").length).toBe(1);
+        });
+
+        test("calls getWidgetsInRoom with correct roomId", async () => {
+            const api = makeApi([]);
+            const callback = await getCallback(api);
+
+            callback(roomId);
+            expect(api.widget.getWidgetsInRoom).toHaveBeenCalledWith(roomId);
+        });
+    });
+});
diff --git a/modules/widget-toggles/src/index.tsx b/modules/widget-toggles/src/index.tsx
new file mode 100644
index 0000000000..aadb0519f3
--- /dev/null
+++ b/modules/widget-toggles/src/index.tsx
@@ -0,0 +1,71 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type JSX } from "react";
+import { TooltipProvider } from "@vector-im/compound-web";
+
+import type { Module, Api, ModuleFactory } from "@element-hq/element-web-module-api";
+import { CONFIG_KEY, WidgetTogglesConfig } from "./config";
+import { WidgetToggle } from "./toggle";
+import { name as ModuleName } from "../package.json";
+
+class WidgetToggleModule implements Module {
+    public static readonly moduleApiVersion = "^1.12.0";
+    private config?: WidgetTogglesConfig;
+
+    public constructor(private api: Api) {}
+
+    public async load(): Promise<void> {
+        const rawConfig = this.api.config.get(CONFIG_KEY);
+        if (!rawConfig) {
+            console.debug(`No configuration found for module "${ModuleName}", skipping initialization.`);
+            return;
+        }
+
+        try {
+            this.config = WidgetTogglesConfig.parse(rawConfig);
+        } catch (e) {
+            console.error("Failed to init module", e);
+            throw new Error(`Errors in module configuration for widget toggles module`);
+        }
+
+        this.api.extras.addRoomHeaderButtonCallback((roomId: string) => {
+            const widgets = this.api.widget.getWidgetsInRoom(roomId);
+            const toggleElements: JSX.Element[] = [];
+
+            for (const widget of widgets) {
+                if (this.config?.types.includes(widget.type)) {
+                    toggleElements.push(
+                        <WidgetToggle
+                            app={widget}
+                            roomId={roomId}
+                            widgetApi={this.api.widget}
+                            i18nApi={this.api.i18n}
+                        />,
+                    );
+                }
+            }
+
+            if (toggleElements.length === 0) return undefined;
+
+            // XXX: We shouldn't have to add another TooltipProvider here, it should
+            // be using the one in MatrixChat in Element Web, but thanks to the fact
+            // that contexts are "magically" identified by class, it doesn't pick up the
+            // context because we use a different copy of compound-web. We'll probably
+            // need to fix this at some point, possibly by moving compound's tooltip stuff
+            // out to its own mini-module that can be provided at runtime by Element Web,
+            // unless React make contexts more sensible.
+            // Annoyingly this does actually cause the tooltips to behave a bit weirdly:
+            // there's a delay before the tooltip appears when yo move between these buttons
+            // and the rest of the header buttons, whereas moving between the other header
+            // buttons, the tooltips appear straight away once one has appeared.
+            return <TooltipProvider>{toggleElements}</TooltipProvider>;
+        });
+    }
+}
+
+export default WidgetToggleModule satisfies ModuleFactory;
diff --git a/modules/widget-toggles/src/tests/mocks.ts b/modules/widget-toggles/src/tests/mocks.ts
new file mode 100644
index 0000000000..e37cd67b01
--- /dev/null
+++ b/modules/widget-toggles/src/tests/mocks.ts
@@ -0,0 +1,45 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type I18nApi, type WidgetApi } from "@element-hq/element-web-module-api";
+import { type IWidget } from "matrix-widget-api";
+import { vi } from "vitest";
+
+export function mockWidget(overrides: Partial<IWidget> = {}): IWidget {
+    return {
+        id: "widget-1",
+        creatorUserId: "@user:example.com",
+        type: "m.custom",
+        name: "My Widget",
+        url: "https://example.com",
+        ...overrides,
+    };
+}
+
+export function mockWidgetApi(overrides: Partial<WidgetApi> = {}): WidgetApi {
+    return {
+        getWidgetsInRoom: vi.fn().mockReturnValue([]),
+        getAppAvatarUrl: vi.fn().mockReturnValue(null),
+        isAppInContainer: vi.fn().mockReturnValue(false),
+        moveAppToContainer: vi.fn(),
+        ...overrides,
+    } as unknown as WidgetApi;
+}
+
+export function mockI18nApi(): I18nApi {
+    return {
+        translate: vi.fn().mockImplementation((key: string, vars?: Record<string, string>) => {
+            let result = key;
+            if (vars) {
+                for (const [k, v] of Object.entries(vars)) {
+                    result = result.replace(`%(${k})s`, v);
+                }
+            }
+            return result;
+        }),
+    } as unknown as I18nApi;
+}
diff --git a/modules/widget-toggles/src/tests/setupTests.ts b/modules/widget-toggles/src/tests/setupTests.ts
new file mode 100644
index 0000000000..d7601a1499
--- /dev/null
+++ b/modules/widget-toggles/src/tests/setupTests.ts
@@ -0,0 +1,13 @@
+/*
+Copyright 2026 Element Creations 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 { afterEach } from "vitest";
+import { cleanup } from "@testing-library/react";
+
+afterEach(() => {
+    cleanup();
+});
diff --git a/modules/widget-toggles/src/toggle.test.tsx b/modules/widget-toggles/src/toggle.test.tsx
new file mode 100644
index 0000000000..0adfc9b33f
--- /dev/null
+++ b/modules/widget-toggles/src/toggle.test.tsx
@@ -0,0 +1,82 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { beforeEach, describe, expect, test, type vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { type WidgetApi, type I18nApi } from "@element-hq/element-web-module-api";
+import { type IWidget } from "matrix-widget-api";
+import { type PropsWithChildren } from "react";
+import { TooltipProvider } from "@vector-im/compound-web";
+import userEvent from "@testing-library/user-event";
+
+import { WidgetToggle } from "./toggle";
+import { mockI18nApi, mockWidget, mockWidgetApi } from "./tests/mocks";
+
+const roomId = "!room:example.com";
+
+const wrapper = ({ children }: PropsWithChildren): React.JSX.Element => <TooltipProvider>{children}</TooltipProvider>;
+
+describe("WidgetToggle", () => {
+    let widgetApi: WidgetApi;
+    let i18nApi: I18nApi;
+    let app: IWidget;
+
+    beforeEach(() => {
+        widgetApi = mockWidgetApi();
+        i18nApi = mockI18nApi();
+        app = mockWidget();
+    });
+
+    test("displays avatar image when widget has an avatar URL", () => {
+        (widgetApi.getAppAvatarUrl as ReturnType<typeof vi.fn>).mockReturnValue("https://example.com/avatar.png");
+        render(<WidgetToggle app={app} roomId={roomId} widgetApi={widgetApi} i18nApi={i18nApi} />, { wrapper });
+        const img = screen.getByRole("img", { name: app.name });
+        expect(img).toBeDefined();
+        expect(img.getAttribute("src")).toBe("https://example.com/avatar.png");
+    });
+
+    test("renders the Jitsi avatar for Jitsi widgets", () => {
+        app = mockWidget({ type: "m.jitsi", name: "Jitsi" });
+        render(<WidgetToggle app={app} roomId={roomId} widgetApi={widgetApi} i18nApi={i18nApi} />, { wrapper });
+        const img = screen.getByRole("img", { name: "Jitsi" });
+        expect(img.getAttribute("src")).toMatch(/^data:image\/svg\+xml;base64,/);
+    });
+
+    test("shows 'Show' label when widget is not in container", () => {
+        (widgetApi.isAppInContainer as ReturnType<typeof vi.fn>).mockReturnValue(false);
+        render(<WidgetToggle app={app} roomId={roomId} widgetApi={widgetApi} i18nApi={i18nApi} />, { wrapper });
+        const button = screen.getByRole("button", { name: "Show My Widget" });
+        expect(button).toBeDefined();
+    });
+
+    test("shows 'Hide' label when widget is in container", () => {
+        (widgetApi.isAppInContainer as ReturnType<typeof vi.fn>).mockReturnValue(true);
+        render(<WidgetToggle app={app} roomId={roomId} widgetApi={widgetApi} i18nApi={i18nApi} />, { wrapper });
+        const button = screen.getByRole("button", { name: "Hide My Widget" });
+        expect(button).toBeDefined();
+    });
+
+    test("calls moveAppToContainer with 'top' when widget is not in container and button is clicked", async () => {
+        const user = userEvent.setup();
+
+        (widgetApi.isAppInContainer as ReturnType<typeof vi.fn>).mockReturnValue(false);
+        render(<WidgetToggle app={app} roomId={roomId} widgetApi={widgetApi} i18nApi={i18nApi} />, { wrapper });
+        const button = screen.getByRole("button", { name: "Show My Widget" });
+        await user.click(button);
+        expect(widgetApi.moveAppToContainer).toHaveBeenCalledWith(app, "top", roomId);
+    });
+
+    test("calls moveAppToContainer with 'right' when widget is in container and button is clicked", async () => {
+        const user = userEvent.setup();
+
+        (widgetApi.isAppInContainer as ReturnType<typeof vi.fn>).mockReturnValue(true);
+        render(<WidgetToggle app={app} roomId={roomId} widgetApi={widgetApi} i18nApi={i18nApi} />, { wrapper });
+        const button = screen.getByRole("button", { name: "Hide My Widget" });
+        await user.click(button);
+        expect(widgetApi.moveAppToContainer).toHaveBeenCalledWith(app, "right", roomId);
+    });
+});
diff --git a/modules/widget-toggles/src/toggle.tsx b/modules/widget-toggles/src/toggle.tsx
new file mode 100644
index 0000000000..741904c442
--- /dev/null
+++ b/modules/widget-toggles/src/toggle.tsx
@@ -0,0 +1,93 @@
+/*
+ * Copyright 2024 Nordeck IT + Consulting GmbH
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { type I18nApi, type WidgetApi } from "@element-hq/element-web-module-api";
+import { IconButton, Tooltip } from "@vector-im/compound-web";
+import { type IWidget } from "matrix-widget-api";
+import React, { type JSX } from "react";
+import styled from "styled-components";
+
+type Props = { $isInContainer: boolean };
+
+const Img = styled.img<Props>`
+    border-color: ${(): string => "var(--cpd-color-text-action-accent)"};
+    border-radius: 50%;
+    border-style: solid;
+    border-width: ${({ $isInContainer }): string => ($isInContainer ? "2px" : "0px")};
+    box-sizing: border-box;
+    height: 24px;
+    width: 24px;
+`;
+
+const Svg = styled.svg<Props>`
+    height: 24px;
+    fill: ${({ $isInContainer }): string => ($isInContainer ? "var(--cpd-color-text-action-accent)" : "currentColor")};
+    width: 24px;
+`;
+
+function avatarUrl(app: IWidget, widgetApi: WidgetApi): string | null {
+    if (app.type.match(/jitsi/i)) {
+        return "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgcng9IjQiIGZpbGw9IiM1QUJGRjIiLz4KICAgIDxwYXRoIGQ9Ik0zIDcuODc1QzMgNi44Mzk0NyAzLjgzOTQ3IDYgNC44NzUgNkgxMS4xODc1QzEyLjIyMyA2IDEzLjA2MjUgNi44Mzk0NyAxMy4wNjI1IDcuODc1VjEyLjg3NUMxMy4wNjI1IDEzLjkxMDUgMTIuMjIzIDE0Ljc1IDExLjE4NzUgMTQuNzVINC44NzVDMy44Mzk0NyAxNC43NSAzIDEzLjkxMDUgMyAxMi44NzVWNy44NzVaIiBmaWxsPSJ3aGl0ZSIvPgogICAgPHBhdGggZD0iTTE0LjM3NSA4LjQ0NjQ0TDE2LjEyMDggNy4xMTAzOUMxNi40ODA2IDYuODM1MDIgMTcgNy4wOTE1OCAxNyA3LjU0NDY4VjEzLjAzOTZDMTcgMTMuNTE5OSAxNi40MjUxIDEzLjc2NjkgMTYuMDc2NyAxMy40MzYzTDE0LjM3NSAxMS44MjE0VjguNDQ2NDRaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K";
+    }
+
+    return widgetApi.getAppAvatarUrl(app);
+}
+
+function isInContainer(app: IWidget, widgetApi: WidgetApi, roomId: string): boolean {
+    return widgetApi.isAppInContainer(app, "center", roomId) || widgetApi.isAppInContainer(app, "top", roomId);
+}
+
+type WidgetToggleProps = {
+    app: IWidget;
+    roomId: string;
+    widgetApi: WidgetApi;
+    i18nApi: I18nApi;
+};
+
+export function WidgetToggle({ app, roomId, widgetApi, i18nApi }: WidgetToggleProps): JSX.Element {
+    const appAvatarUrl = avatarUrl(app, widgetApi);
+    const appNameOrType = app.name ?? app.type;
+    const inContainer = isInContainer(app, widgetApi, roomId);
+
+    const label = i18nApi.translate(inContainer ? "Hide %(name)s" : "Show %(name)s", { name: appNameOrType });
+
+    const onClick = React.useCallback(
+        (event: React.MouseEvent<HTMLButtonElement>) => {
+            event.stopPropagation();
+            if (inContainer) {
+                widgetApi.moveAppToContainer(app, "right", roomId);
+            } else {
+                widgetApi.moveAppToContainer(app, "top", roomId);
+            }
+        },
+        [app, inContainer, roomId, widgetApi],
+    );
+
+    return (
+        <Tooltip label={label} key={app.id}>
+            <IconButton aria-label={label} onClick={onClick}>
+                {appAvatarUrl ? (
+                    <Img $isInContainer={inContainer} alt={appNameOrType} src={appAvatarUrl} />
+                ) : (
+                    <Svg $isInContainer={inContainer} role="presentation">
+                        <path d="M16 2h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm4 2.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3ZM16 14h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2Zm.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3ZM4 14h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2Zm.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3Z M8 2H4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Z" />
+                    </Svg>
+                )}
+            </IconButton>
+        </Tooltip>
+    );
+}
diff --git a/modules/widget-toggles/tsconfig.json b/modules/widget-toggles/tsconfig.json
new file mode 100644
index 0000000000..32abda69d7
--- /dev/null
+++ b/modules/widget-toggles/tsconfig.json
@@ -0,0 +1,8 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "jsx": "react-jsx",
+        "noEmit": true
+    },
+    "include": ["src"]
+}
diff --git a/modules/widget-toggles/vite.config.ts b/modules/widget-toggles/vite.config.ts
new file mode 100644
index 0000000000..ee4a75323b
--- /dev/null
+++ b/modules/widget-toggles/vite.config.ts
@@ -0,0 +1,34 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { fileURLToPath } from "node:url";
+import react from "@vitejs/plugin-react";
+import { nodePolyfills } from "vite-plugin-node-polyfills";
+import svgr from "vite-plugin-svgr";
+import { importCSSSheet } from "@arcmantle/vite-plugin-import-css-sheet";
+import { mergeConfig } from "vitest/config";
+import baseConfig from "@element-hq/element-web-module-api/vite.base.ts";
+
+export default mergeConfig(baseConfig, {
+    build: {
+        lib: {
+            entry: fileURLToPath(import.meta.resolve("./src/index.tsx")),
+            name: "element-web-module-widget-toggles",
+            fileName: "index",
+            formats: ["es"],
+        },
+        minify: false,
+    },
+    plugins: [
+        importCSSSheet(),
+        react(),
+        svgr(),
+        nodePolyfills({
+            include: ["events"],
+        }),
+    ],
+});
diff --git a/modules/widget-toggles/vitest.config.ts b/modules/widget-toggles/vitest.config.ts
new file mode 100644
index 0000000000..77c6923a98
--- /dev/null
+++ b/modules/widget-toggles/vitest.config.ts
@@ -0,0 +1,22 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { defineProject } from "vitest/config";
+import { playwright } from "@vitest/browser-playwright";
+
+export default defineProject({
+    test: {
+        exclude: ["./e2e/**/*", "./node_modules/**/*"],
+        browser: {
+            enabled: true,
+            headless: true,
+            provider: playwright({}),
+            instances: [{ browser: "chromium" }],
+        },
+        setupFiles: ["src/tests/setupTests.ts"],
+    },
+});
diff --git a/oxlint.config.ts b/oxlint.config.ts
new file mode 100644
index 0000000000..93eb36835f
--- /dev/null
+++ b/oxlint.config.ts
@@ -0,0 +1,620 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { defineConfig } from "oxlint";
+
+function buildRestrictedPropertiesOptions(
+    properties: string[],
+    message: string,
+): { object?: string; property: string; message: string }[] {
+    return properties.map((prop) => {
+        const [object, property] = prop.split(".");
+        return {
+            object: object === "*" ? undefined : object,
+            property,
+            message,
+        };
+    });
+}
+
+const defaultRestrictedProperties = [
+    { object: "window", property: "setImmediate", message: "Use setTimeout instead" },
+    ...buildRestrictedPropertiesOptions(["React.forwardRef", "*.forwardRef", "forwardRef"], "Use ref props instead."),
+] as const;
+const defaultRestrictedGlobals = [
+    {
+        name: "setImmediate",
+        message: "Use setTimeout instead.",
+    },
+];
+
+export default defineConfig({
+    $schema: "./node_modules/oxlint/configuration_schema.json",
+    plugins: [
+        "eslint",
+        "typescript",
+        "unicorn",
+        "import",
+        "jsdoc",
+        "node",
+        "promise",
+        "vitest",
+        "react",
+        "react-perf",
+        "jsx-a11y",
+    ],
+    jsPlugins: ["eslint-plugin-element-call"],
+    categories: {
+        correctness: "error",
+        perf: "error",
+        suspicious: "error",
+        restriction: "warn",
+    },
+    options: {
+        typeAware: true,
+        reportUnusedDisableDirectives: "warn",
+        maxWarnings: 0,
+        denyWarnings: true,
+    },
+    env: {
+        es6: true,
+    },
+    ignorePatterns: [
+        "**/lib",
+        "**/dist",
+        "**/node_modules",
+        "**/coverage",
+        "apps/web/src/vector/modernizr.cjs",
+        // Legacy skinning file that some people might still have
+        "apps/web/src/component-index.js",
+        // Auto-generated files
+        "apps/web/src/modules.ts",
+        "apps/web/src/modules.js",
+        // Test result files
+        "**/test-results",
+        "**/html-report",
+        // Shared components generated files
+        "/packages/shared-components/dist/",
+        "/packages/shared-components/src/i18n/i18nKeys.d.ts",
+        "/packages/shared-components/typedoc/",
+    ],
+    settings: {
+        "jsdoc": {
+            tagNamePreference: {
+                remark: "remarks",
+                privateRemarks: "privateRemarks",
+                experimental: "experimental",
+                deprecated: "deprecated",
+                typeParam: "typeParam",
+                defaultValue: "defaultValue",
+                packageDocumentation: "packageDocumentation",
+                alpha: "alpha",
+                knipignore: "knipignore",
+                resolves: "resolves",
+            },
+        },
+        "vitest": {
+            typecheck: true,
+        },
+        "jsx-a11y": {
+            components: {
+                Button: "button",
+                IconButton: "button",
+                AccessibleButton: "button",
+                RovingAccessibleButton: "button",
+                ContextMenuButton: "button",
+                ContextMenuTooltipButton: "button",
+            },
+            // polymorphicPropName: "as", // Would be good to enable in the future
+        },
+        "react": {
+            componentWrapperFunctions: ["withMatrixClientHOC"],
+        },
+    },
+    rules: {
+        "no-constant-condition": ["error", { checkLoops: "allExceptWhileTrue" }],
+        "typescript/unbound-method": ["error", { ignoreStatic: true }],
+        "typescript/no-empty-object-type": [
+            "error",
+            {
+                allowInterfaces: "with-single-extends",
+            },
+        ],
+        "prefer-const": ["error", { destructuring: "all" }],
+        "import/first": "error",
+        "new-cap": "error",
+        "typescript/no-unsafe-function-type": "error",
+        "react/rules-of-hooks": "error",
+        "no-extend-native": "error",
+        "no-inner-declarations": "error",
+        "typescript/no-unnecessary-type-constraint": "error",
+        "jsx-filename-extension": ["error", { allow: "as-needed", extensions: ["tsx"] }],
+
+        // Tune restriction ruleset
+        "no-undefined": "off",
+        "typescript/use-unknown-in-catch-callback-variable": "off",
+        "typescript/promise-function-async": "off",
+        "typescript/no-non-null-assertion": "off",
+        "typescript/no-invalid-void-type": "off",
+        "typescript/no-explicit-any": "off",
+        "typescript/no-import-type-side-effects": "off",
+        "typescript/no-dynamic-delete": "off",
+        "typescript/explicit-module-boundary-types": "off",
+        "no-param-reassign": "off",
+        "no-use-before-define": "off",
+        "class-methods-use-this": "off",
+        "no-plusplus": "off",
+        "no-default-export": "off",
+        "no-console": "off",
+        "complexity": "off",
+        "no-void": "off",
+        "no-empty-function": "off",
+        "default-case": "off",
+        "no-implicit-globals": "off",
+        "no-bitwise": "off",
+        "no-empty": "off",
+        "no-eq-null": "off",
+        "promise/catch-or-return": "off",
+        "node/no-process-env": "off", // We enable this for src in overrides
+        "unicorn/no-array-reduce": "off",
+        "unicorn/no-anonymous-default-export": "off",
+        "import/no-relative-parent-imports": "off",
+        "import/unambiguous": "off",
+        "import/no-cycle": "off",
+        "jsdoc/empty-tags": "off",
+        "vitest/require-test-timeout": "off",
+        "react/jsx-no-literals": "off",
+        "react/prefer-function-component": "off",
+        "react/forbid-component-props": "off",
+        "react/no-multi-comp": "off",
+        "react/no-danger": "off",
+        "react/only-export-components": "off",
+        "react/no-react-children": "off",
+        "react/no-clone-element": "off",
+
+        "unicorn/no-instanceof-array": "error",
+        "no-restricted-globals": ["error", ...defaultRestrictedGlobals],
+        "no-restricted-properties": ["error", ...defaultRestrictedProperties],
+        "import/no-duplicates": ["error"],
+
+        "element-call/copyright-header": [
+            "error",
+            "/*\nCopyright %%CURRENT_YEAR%% Element Creations Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE in the repository root for full details.\n*/\n\n",
+        ],
+
+        // Allow the use of underscore to show args are not used.
+        // This is helpful for seeing that a function implements
+        // an interface but won't be using one of it's arguments.
+        "no-unused-vars": ["error", { args: "none", ignoreRestSiblings: true }],
+
+        // Require method signatures to be explicit to help make signature changes more obvious in review
+        "typescript/explicit-function-return-type": [
+            "error",
+            {
+                allowExpressions: true,
+            },
+        ],
+
+        // Prevent invalid non-type re-exports of types, these can cause downstream build failures
+        "typescript/consistent-type-exports": ["error"],
+
+        // Prevent unnecessary runtime dependencies between files
+        "typescript/consistent-type-imports": ["error", { fixStyle: "inline-type-imports" }],
+
+        "jsx-a11y/control-has-associated-label": [
+            "error",
+            {
+                labelAttributes: ["label", "value"],
+                depth: 3,
+            },
+        ],
+
+        // Disable some perf rules
+        "no-await-in-loop": "off",
+
+        // Disable some opinionated rules
+        "unicorn/switch-case-braces": "off",
+        "sort-keys": "off",
+        "typescript/require-array-sort-compare": "off",
+        "no-extra-boolean-cast": "off",
+
+        // These would be nice to enable at some point
+        "unicorn/prefer-set-has": "off",
+        "unicorn/prefer-string-slice": "off",
+        "unicorn/prefer-number-properties": "off",
+        "unicorn/prefer-at": "off",
+        "unicorn/no-new-array": "off",
+        "unicorn/no-array-for-each": "off",
+        "unicorn/explicit-length-check": "off",
+        "unicorn/catch-error-name": "off",
+        "require-unicode-regexp": "off",
+        "typescript/restrict-template-expressions": "off",
+        "typescript/no-redundant-type-constituents": "off",
+        "typescript/no-useless-default-assignment": "off",
+        "typescript/no-duplicate-type-constituents": "off",
+        "typescript/no-floating-promises": "off",
+        "typescript/no-implied-eval": "off",
+        "typescript/no-misused-spread": "off",
+        "promise/valid-params": "off",
+        "react-perf/jsx-no-new-function-as-prop": "off",
+        "react-perf/jsx-no-new-object-as-prop": "off",
+        "react-perf/jsx-no-jsx-as-prop": "off",
+        "jsx-a11y/prefer-tag-over-role": "off",
+        "jsx-a11y/no-autofocus": "off",
+        "react/no-children-prop": "off",
+        "react-perf/jsx-no-new-array-as-prop": "off",
+        "react/no-did-update-set-state": "off",
+        "react/no-did-mount-set-state": "off",
+        "jsx-a11y/no-static-element-interactions": "off",
+        "jsx-a11y/no-noninteractive-element-interactions": "off",
+        "jsx-a11y/media-has-caption": "off",
+        "jsx-a11y/no-noninteractive-element-to-interactive-role": "off",
+        "jsx-a11y/aria-activedescendant-has-tabindex": "off",
+
+        // Rules within `suspicious` we do not yet comply with but probably should
+        "typescript/no-unsafe-type-assertion": "off",
+        "no-shadow": "off",
+        "unicorn/consistent-function-scoping": "off",
+        "typescript/consistent-return": "off",
+        "typescript/no-unsafe-enum-comparison": "off",
+        "typescript/no-unnecessary-type-conversion": "off",
+        "typescript/no-unnecessary-type-parameters": "off",
+        "typescript/no-unnecessary-boolean-literal-compare": "off",
+        "react/no-unstable-nested-components": "off",
+        "unicorn/no-array-sort": "off",
+        "unicorn/no-array-reverse": "off",
+        "unicorn/prefer-add-event-listener": "off",
+        "no-underscore-dangle": "off",
+        "import/no-named-as-default": "off",
+        "import/no-unassigned-import": "off",
+        "import/no-named-as-default-member": "off",
+        "promise/always-return": "off",
+        "preserve-caught-error": "off",
+        "react/react-in-jsx-scope": "off",
+        "unicorn/require-post-message-target-origin": "off",
+    },
+    overrides: [
+        {
+            files: ["apps/web/src/**/*", "{packages,modules}/*/src/**/*"],
+            rules: {
+                "no-restricted-globals": [
+                    "error",
+                    defaultRestrictedGlobals,
+                    {
+                        name: "Buffer",
+                        message: "Buffer is not available in the web.",
+                    },
+                ],
+                "node/no-process-env": "error",
+                "unicorn/prefer-node-protocol": "off",
+            },
+        },
+        {
+            files: ["{packages,apps,modules}/*/src/**/*"],
+            rules: {
+                // Enable this in the future, it has a lot of false positives right now
+                // "react/react-compiler": "error",
+            },
+        },
+        {
+            files: ["packages/shared-components/**/*"],
+            rules: {
+                "no-restricted-imports": [
+                    "error",
+                    {
+                        paths: [
+                            {
+                                name: "react",
+                                importNames: ["act"],
+                                message: "Please use @test-utils instead.",
+                            },
+                            {
+                                name: "@testing-library/react",
+                                message: "Please use @test-utils instead",
+                            },
+                        ],
+                    },
+                ],
+
+                // This would be good to apply globally in the future
+                "react/forbid-elements": [
+                    "error",
+                    {
+                        forbid: [
+                            { element: "h1", message: "Use Compound <Heading> instead" },
+                            { element: "h2", message: "Use Compound <Heading> instead" },
+                            { element: "h3", message: "Use Compound <Heading> instead" },
+                            { element: "h4", message: "Use Compound <Heading> instead" },
+                            { element: "h5", message: "Use Compound <Heading> instead" },
+                            { element: "h6", message: "Use Compound <Heading> instead" },
+                        ],
+                    },
+                ],
+            },
+        },
+        {
+            files: [
+                "apps/desktop/src/**/*",
+                "packages/playwright-common/src/**/*",
+                "**/scripts/**/*",
+                "apps/web/module_system/**/*",
+                "apps/web/webpack.config.ts",
+            ],
+            rules: {
+                "no-restricted-globals": "off",
+                "unicorn/prefer-node-protocol": "error",
+                // These files can use envvars
+                "node/no-process-env": "off",
+                // They do not depend on js-sdk for access to TypedEventEmitter so disable this rule
+                "no-restricted-imports": "off",
+                // They can use process.exit
+                "unicorn/no-process-exit": "off",
+                // They can use top level await
+                "node/no-top-level-await": "off",
+            },
+        },
+        {
+            files: ["apps/web/**/*"],
+            rules: {
+                "no-restricted-properties": [
+                    "error",
+                    ...defaultRestrictedProperties,
+                    ...buildRestrictedPropertiesOptions(
+                        ["window.innerHeight", "window.innerWidth", "window.visualViewport"],
+                        "Use UIStore to access window dimensions instead.",
+                    ),
+                    ...buildRestrictedPropertiesOptions(
+                        ["*.mxcUrlToHttp", "*.getHttpUriForMxc"],
+                        "Use Media helper instead to centralise access for customisation.",
+                    ),
+                ],
+
+                // Ban matrix-js-sdk/src imports in favour of matrix-js-sdk/src/matrix imports to prevent unleashing hell.
+                // Ban compound-design-tokens raw svg imports in favour of their React component counterparts
+                "no-restricted-imports": [
+                    "error",
+                    {
+                        paths: [
+                            {
+                                name: "events",
+                                message: "Please use TypedEventEmitter instead",
+                            },
+                            {
+                                name: "react",
+                                importNames: ["forwardRef"],
+                                message: "Use ref props instead.",
+                            },
+                            {
+                                name: "@testing-library/react",
+                                message: "Please use jest-matrix-react instead",
+                            },
+                            {
+                                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",
+                            },
+                            {
+                                name: "emojibase-regex",
+                                message:
+                                    "This regex doesn't actually test for emoji. See the docs at https://emojibase.dev/docs/regex/ and prefer our own EMOJI_REGEX from HtmlUtils.",
+                            },
+                        ],
+                        patterns: [
+                            {
+                                group: [
+                                    "matrix-js-sdk/src/**",
+                                    "!matrix-js-sdk/src/matrix",
+                                    "!matrix-js-sdk/src/crypto-api",
+                                    "!matrix-js-sdk/src/types",
+                                    "!matrix-js-sdk/src/testing",
+                                    "!matrix-js-sdk/src/utils/**",
+                                    "matrix-js-sdk/src/utils/internal/**",
+                                    "matrix-js-sdk/lib",
+                                    "matrix-js-sdk/lib/",
+                                    "matrix-js-sdk/lib/**",
+                                    // XXX: Temporarily allow these as they are not available via the main export
+                                    "!matrix-js-sdk/src/logger",
+                                    "!matrix-js-sdk/src/errors",
+                                    "!matrix-js-sdk/src/utils",
+                                    "!matrix-js-sdk/src/version-support",
+                                    "!matrix-js-sdk/src/randomstring",
+                                    "!matrix-js-sdk/src/sliding-sync",
+                                    "!matrix-js-sdk/src/browser-index",
+                                    "!matrix-js-sdk/src/feature",
+                                    "!matrix-js-sdk/src/NamespacedValue",
+                                    "!matrix-js-sdk/src/ReEmitter",
+                                    "!matrix-js-sdk/src/event-mapper",
+                                    "!matrix-js-sdk/src/interactive-auth",
+                                    "!matrix-js-sdk/src/secret-storage",
+                                    "!matrix-js-sdk/src/room-hierarchy",
+                                    "!matrix-js-sdk/src/rendezvous",
+                                    "!matrix-js-sdk/src/indexeddb-worker",
+                                    "!matrix-js-sdk/src/pushprocessor",
+                                    "!matrix-js-sdk/src/extensible_events_v1",
+                                    "!matrix-js-sdk/src/extensible_events_v1/PollStartEvent",
+                                    "!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/oidc",
+                                    "!matrix-js-sdk/src/oidc/discovery",
+                                    "!matrix-js-sdk/src/oidc/authorize",
+                                    "!matrix-js-sdk/src/oidc/validate",
+                                    "!matrix-js-sdk/src/oidc/error",
+                                    "!matrix-js-sdk/src/oidc/register",
+                                    "!matrix-js-sdk/src/webrtc",
+                                    "!matrix-js-sdk/src/webrtc/call",
+                                    "!matrix-js-sdk/src/webrtc/callFeed",
+                                    "!matrix-js-sdk/src/webrtc/mediaHandler",
+                                    "!matrix-js-sdk/src/webrtc/callEventTypes",
+                                    "!matrix-js-sdk/src/webrtc/callEventHandler",
+                                    "!matrix-js-sdk/src/webrtc/groupCallEventHandler",
+                                    "!matrix-js-sdk/src/models",
+                                    "!matrix-js-sdk/src/models/read-receipt",
+                                    "!matrix-js-sdk/src/models/relations-container",
+                                    "!matrix-js-sdk/src/models/related-relations",
+                                    "!matrix-js-sdk/src/matrixrtc",
+                                ],
+                                message: "Please use matrix-js-sdk/src/matrix instead",
+                            },
+                            {
+                                group: ["emojibase-regex/emoji*"],
+                                message:
+                                    "This regex doesn't actually test for emoji. See the docs at https://emojibase.dev/docs/regex/ and prefer our own EMOJI_REGEX from HtmlUtils.",
+                            },
+                            {
+                                group: ["@vector-im/compound-design-tokens/icons/*"],
+                                message: "Please use @vector-im/compound-design-tokens/assets/web/icons/* instead",
+                            },
+                            {
+                                group: ["**/packages/shared-components/**", "../packages/shared-components/**"],
+                                message: "Please use @element-hq/web-shared-components",
+                            },
+                        ],
+                    },
+                ],
+            },
+        },
+        {
+            files: [
+                "apps/*/playwright/**/*",
+                "packages/playwright-common/**/*",
+                "modules/*/e2e/**/*",
+                "modules/playwright/**/*",
+            ],
+            rules: {
+                // This is a common pattern for Playwright fixtures
+                "no-empty-pattern": "off",
+                // Playwright has a `use` method for fixtures which confuses this rule
+                "react-hooks/rules-of-hooks": "off",
+            },
+        },
+        {
+            files: [
+                "{packages,apps,modules}/*/src/**/*.{test,stories}.{ts,tsx}",
+                "{packages,apps,modules}/*/src/{tests,test}/*.{ts,tsx}",
+                "{packages,apps,modules}/*/src/**/__mocks__/*.{ts,tsx}",
+                "{packages,apps,modules}/*/{test,playwright,e2e}/**/*",
+                "{packages,apps,modules}/*/playwright.config.ts",
+                "{packages,apps,modules}/*/.storybook/**/*",
+                "{packages,apps,modules}/*/__mocks__/**/*",
+                "packages/playwright-common/src/**/*",
+            ],
+            rules: {
+                // Tests can be linted a little more flexibly
+                // We don't need super strict typing in test utilities
+                "no-import-assign": "off",
+                "no-unsafe-optional-chaining": "off",
+                "typescript/no-empty-object-type": "off",
+                "typescript/unbound-method": "off",
+                "typescript/no-floating-promises": "off",
+                "vitest/require-mock-type-parameters": "off",
+                "vitest/no-disabled-tests": "off",
+                "vitest/no-conditional-expect": "off",
+                "vitest/warn-todo": "off",
+                "vitest/require-to-throw-message": "off",
+                "vitest/prefer-snapshot-hint": "off",
+                "vitest/no-standalone-expect": [
+                    "error",
+                    {
+                        additionalTestBlockFunctions: ["beforeAll", "beforeEach"],
+                    },
+                ],
+                "vitest/expect-expect": [
+                    "error",
+                    {
+                        assertFunctionNames: ["expect*", "*Test", "assert*", "test*Factory"],
+                    },
+                ],
+                "jsdoc/check-tag-names": "off",
+                "typescript/explicit-function-return-type": "off",
+                "typescript/explicit-module-boundary-types": "off",
+                "typescript/explicit-member-accessibility": "off",
+                "no-proto": "off",
+
+                // Disable a11y rules for components in tests
+                "jsx-a11y/role-has-required-aria-props": "off",
+                "react/button-has-type": "off",
+                "jsx-a11y/interactive-supports-focus": "off",
+                "jsx-a11y/no-static-element-interactions": "off",
+                "jsx-a11y/anchor-ambiguous-text": "off",
+                "jsx-a11y/click-events-have-key-events": "off",
+                "jsx-a11y/media-has-caption": "off",
+                "jsx-a11y/no-noninteractive-element-to-interactive-role": "off",
+                "jsx-a11y/role-supports-aria-props": "off",
+
+                "react/jsx-no-constructed-context-values": "off",
+                "react/no-array-index-key": "off",
+                "react/forbid-elements": "off",
+                "typescript/no-extraneous-class": "off",
+                "no-new": "off",
+                "react/iframe-missing-sandbox": "off",
+                "promise/no-promise-in-callback": "off",
+
+                // This would be good to enable in the future
+                "typescript/await-thenable": "off",
+                "promise/no-callback-in-promise": "off",
+
+                // This rule requires strictNullChecks enabled
+                "typescript/no-unnecessary-boolean-literal-compare": "off",
+                "typescript/no-unnecessary-type-assertion": "off",
+            },
+        },
+        {
+            files: ["{packages,apps,modules}/*/src/**/*.stories.{ts,tsx}"],
+            jsPlugins: ["eslint-plugin-element-call", "eslint-plugin-storybook"],
+            rules: {
+                "storybook/meta-satisfies-type": "error",
+                "storybook/default-exports": "error",
+                "storybook/hierarchy-separator": "error",
+                "storybook/no-redundant-story-name": "error",
+                "storybook/no-renderer-packages": "error",
+                "storybook/no-stories-of": "error",
+                "storybook/story-exports": "error",
+                "storybook/use-storybook-expect": "error",
+                "storybook/use-storybook-testing-library": "error",
+                "storybook/no-uninstalled-addons": "error",
+                "jsx-filename-extension": ["error", { allow: "always", extensions: ["tsx"] }],
+            },
+        },
+        {
+            files: ["**/*.{cjs,js}"],
+            rules: {
+                "typescript/no-require-imports": "off",
+                "import/no-commonjs": "off",
+                "unicorn/prefer-module": "off",
+            },
+        },
+        {
+            files: ["apps/web/test/**/*-test.*"],
+            rules: {
+                // Jest is still CommonJS
+                "unicorn/prefer-module": "off",
+            },
+        },
+        {
+            files: ["**/*.d.ts"],
+            rules: {
+                "unicorn/require-module-specifiers": "off",
+            },
+        },
+    ],
+});
diff --git a/package.json b/package.json
index bf0eaf2cce..2091fbf375 100644
--- a/package.json
+++ b/package.json
@@ -13,106 +13,59 @@
         "i18n": "pnpm -r i18n",
         "i18n:sort": "pnpm -r i18n:sort",
         "i18n:lint": "pnpm -r i18n:lint",
-        "lint": "pnpm -r lint:types && pnpm lint:prettier && pnpm -r lint:js && pnpm -r lint:style && pnpm lint:workflows && pnpm lint:knip",
-        "lint:prettier": "prettier --check .",
-        "lint:prettier-fix": "prettier --log-level=warn --write .",
+        "lint": "pnpm -r --workspace-concurrency=1 lint:types && pnpm lint:fmt && pnpm lint:js && pnpm -r lint:style && pnpm lint:workflows && pnpm lint:knip",
+        "lint:fmt": "oxfmt --check",
+        "lint:fmt:fix": "oxfmt",
+        "lint:js": "nx run-many -t lint:prepare -p && oxlint",
+        "lint:js:fix": "oxlint --fix",
         "lint:workflows": "find .github/workflows -type f \\( -iname '*.yaml' -o -iname '*.yml' \\) -print -exec action-validator {} ';'",
-        "lint:knip": "knip",
+        "lint:knip": "knip --no-tag-hints && knip --strict --exclude unlisted,dependencies,binaries",
+        "lint:unused-settings": "node scripts/find-unused-settings.ts",
         "install:git-hooks": "husky",
         "postinstall": "node scripts/pnpm-link.ts && pnpm run -r sane-postinstall",
         "docs:dev": "vitepress dev docs",
         "docs:build": "vitepress build docs",
-        "docs:preview": "vitepress preview docs"
+        "docs:preview": "vitepress preview docs",
+        "test:unit": "nx run-many -t test:unit:prepare -p && vitest run",
+        "coverage:diff": "diff-cover --config-file diff-cover.toml apps/web/coverage/lcov.info packages/shared-components/coverage/lcov.info coverage/lcov.info"
     },
     "devDependencies": {
         "@action-validator/cli": "^0.6.0",
         "@action-validator/core": "^0.6.0",
         "@nx-tools/nx-container": "^7.2.1",
         "@playwright/test": "catalog:",
-        "@types/node": "22",
+        "@types/node": "25",
+        "@typescript/native": "catalog:",
+        "@vitest/coverage-v8": "catalog:",
         "cronstrue": "^3.0.0",
-        "eslint-plugin-matrix-org": "^3.0.0",
+        "eslint-plugin-element-call": "github:element-hq/element-call#livekit&path:/eslint",
+        "eslint-plugin-storybook": "^10.4.6",
         "husky": "^9.0.0",
-        "knip": "6.11.0",
+        "knip": "6.29.0",
         "lint-staged": "^17.0.0",
         "lodash": "^4.17.21",
         "mermaid": "^11.13.0",
         "minimist": "^1.2.6",
-        "nx": "22.7.1",
-        "prettier": "3.8.3",
-        "typescript": "catalog:",
+        "nx": "catalog:",
+        "oxfmt": "0.60.0",
+        "oxlint": "^1.70.0",
+        "oxlint-tsgolint": "^7.0.0",
+        "typescript": "catalog:ts6",
         "vitepress": "^1.6.4",
         "vitepress-plugin-mermaid": "^2.0.17",
+        "vitest": "catalog:",
         "yaml": "^2.3.3"
     },
-    "pnpm": {
-        "onlyBuiltDependencies": [
-            "matrix-js-sdk"
-        ],
-        "ignoredBuiltDependencies": [
-            "@sentry/cli",
-            "nx"
-        ],
-        "patchedDependencies": {
-            "@vector-im/matrix-wysiwyg": "patches/@vector-im__matrix-wysiwyg.patch",
-            "react-blurhash": "patches/react-blurhash.patch",
-            "linkify-html": "patches/linkify-html.patch",
-            "@matrix-org/react-sdk-module-api": "patches/@matrix-org__react-sdk-module-api.patch",
-            "@types/auto-launch": "patches/@types__auto-launch.patch",
-            "@types/mdx": "patches/@types__mdx.patch",
-            "await-lock": "patches/await-lock.patch",
-            "jest-fixed-jsdom": "patches/jest-fixed-jsdom.patch",
-            "jsdom": "patches/jsdom.patch",
-            "rollup": "patches/rollup.patch",
-            "postcss-mixins": "patches/postcss-mixins.patch",
-            "app-builder-lib": "patches/app-builder-lib.patch",
-            "knip": "patches/knip.patch",
-            "plist": "patches/plist.patch"
-        },
-        "peerDependencyRules": {
-            "allowedVersions": {
-                "react": "19",
-                "react-dom": "19",
-                "eslint": "8"
-            }
-        },
-        "allowedDeprecatedVersions": {
-            "eslint": "8",
-            "react-beautiful-dnd": "13"
-        },
-        "overrides": {
-            "pretty-format@30>react-is": "19.2.5",
-            "@types/react": "catalog:",
-            "@types/react-dom": "catalog:",
-            "oidc-client-ts": "3.5.0",
-            "jwt-decode": "4.0.0",
-            "caniuse-lite": "1.0.30001791",
-            "markdown-it": "14.1.1",
-            "testcontainers": "^11.0.0",
-            "matrix-widget-api": "^1.17.0",
-            "qs": "6.15.0",
-            "@types/node": "18.19.130",
-            "config-file-ts": "0.2.8-rc1",
-            "node-abi": "4.29.0",
-            "@types/pg-pool": "2.0.7",
-            "ajv@6.12.6": "6.14.0",
-            "ajv@>=8 <8.18.0": "8.18.0",
-            "axios@>1.0.0 <1.15.0": "1.15.2",
-            "picomatch@>=4.0.0 <4.0.4": "4.0.4",
-            "esbuild@<=0.24.2": "0.27.4",
-            "esbuild@~0.27.0": "0.27.4",
-            "minimatch@>=10.0.0 <10.2.3": ">=10.2.3",
-            "lodash@4.17.23": "4.18.1",
-            "follow-redirects@1.15.11": "1.16.0",
-            "@actions/github@6.0.1": "8.0.1",
-            "dompurify@>=3.0.0 <=3.3.3": "3.4.0",
-            "protobufjs@>=7.0.0 <7.5.5": "7.5.5",
-            "@xmldom/xmldom@0.8.12": "0.8.13"
-        }
-    },
     "engines": {
         "node": ">=22.18"
     },
-    "packageManager": "pnpm@10.33.3+sha512.a19744364a7e248b92657a4ca5973f9354d21caf982579674b1c539f32c7420c47138ad8b1254df07aba9bc782d9b3029e3db34d5dbff974326eb74dac8ff489",
-    "private": true
+    "devEngines": {
+        "packageManager": {
+            "name": "pnpm",
+            "version": "11.20.0",
+            "onFail": "download"
+        }
+    },
+    "private": true,
+    "nx": {}
 }
diff --git a/packages/module-api/Dockerfile b/packages/module-api/Dockerfile
index b57e0700a9..0950c353bb 100644
--- a/packages/module-api/Dockerfile
+++ b/packages/module-api/Dockerfile
@@ -1,6 +1,6 @@
-ARG ELEMENT_VERSION=latest@sha256:f4a81a24d49a9c5b97e02e77a3013ec799873e500e69041078a28be98e4f1280
+ARG ELEMENT_VERSION=latest@sha256:9f9b546280e67e492d56f6e775c449e74356bffb98daaf211abc755276713fad
 
-FROM --platform=$BUILDPLATFORM node:lts-alpine@sha256:d1b3b4da11eefd5941e7f0b9cf17783fc99d9c6fc34884a665f40a06dbdfc94f AS builder
+FROM --platform=$BUILDPLATFORM node:lts-alpine@sha256:f70403e87646dc51b45295f4b8b70cdad0b63d2297c4c9899119b03f7af7a6b3 AS builder
 
 ARG BUILD_CONTEXT
 
diff --git a/packages/module-api/api-extractor.json b/packages/module-api/api-extractor.json
index e945efc023..dd2aafef65 100644
--- a/packages/module-api/api-extractor.json
+++ b/packages/module-api/api-extractor.json
@@ -67,7 +67,7 @@
      *
      *   "bundledPackages": [ "@my-company/*" ],
      */
-    "bundledPackages": [],
+    "bundledPackages": ["shared-types"],
 
     /**
      * Specifies what type of newlines API Extractor should use when writing output files.  By default, the output files
diff --git a/packages/module-api/element-web-module-api.api.md b/packages/module-api/element-web-module-api.api.md
index 097adf064b..d27bdc3315 100644
--- a/packages/module-api/element-web-module-api.api.md
+++ b/packages/module-api/element-web-module-api.api.md
@@ -1,566 +1,618 @@
-## API Report File for "@element-hq/element-web-module-api"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-import { ComponentType } from 'react';
-import { IWidget } from 'matrix-widget-api';
-import { JSX } from 'react';
-import { ModuleApi } from '@matrix-org/react-sdk-module-api';
-import { ReactNode } from 'react';
-import { Root } from 'react-dom/client';
-import { RuntimeModule } from '@matrix-org/react-sdk-module-api';
-
-// @public
-export interface AccountAuthApiExtension {
-    overwriteAccountAuth(accountInfo: AccountAuthInfo): Promise<void>;
-}
-
-// @public
-export interface AccountAuthInfo {
-    accessToken: string;
-    deviceId: string;
-    homeserverUrl: string;
-    refreshToken?: string;
-    userId: string;
-}
-
-// @public
-export interface AccountDataApi {
-    delete(eventType: string): Promise<void>;
-    get(eventType: string): Watchable<unknown>;
-    set(eventType: string, content: unknown): Promise<void>;
-}
-
-// @alpha @deprecated (undocumented)
-export interface AliasCustomisations {
-    // (undocumented)
-    getDisplayAliasForAliasSet?(canonicalAlias: string | null, altAliases: string[]): string | null;
-}
-
-// Warning: (ae-incompatible-release-tags) The symbol "Api" is marked as @public, but its signature references "LegacyModuleApiExtension" which is marked as @alpha
-// Warning: (ae-incompatible-release-tags) The symbol "Api" is marked as @public, but its signature references "LegacyCustomisationsApiExtension" which is marked as @alpha
-//
-// @public
-export interface Api extends LegacyModuleApiExtension, LegacyCustomisationsApiExtension, DialogApiExtension, AccountAuthApiExtension, ProfileApiExtension {
-    // @alpha
-    readonly builtins: BuiltinsApi;
-    readonly client: ClientApi;
-    // @alpha
-    readonly composer: ComposerApi;
-    readonly config: ConfigApi;
-    createRoot(element: Element): Root;
-    // @alpha
-    readonly customComponents: CustomComponentsApi;
-    // @alpha
-    readonly customisations: CustomisationsApi;
-    // @alpha
-    readonly extras: ExtrasApi;
-    readonly i18n: I18nApi;
-    readonly navigation: NavigationApi;
-    readonly rootNode: HTMLElement;
-    readonly stores: StoresApi;
-    // @alpha
-    readonly widget: WidgetApi;
-    // @alpha
-    readonly widgetLifecycle: WidgetLifecycleApi;
-}
-
-// @alpha
-export interface BuiltinsApi {
-    renderNotificationDecoration(roomId: string): React.ReactNode;
-    renderRoomAvatar(roomId: string, size?: string): React.ReactNode;
-    renderRoomView(roomId: string, props?: RoomViewProps): React.ReactNode;
-}
-
-// @alpha
-export type CapabilitiesApprover = (widget: WidgetDescriptor, requestedCapabilities: Set<string>) => MaybePromise<Set<string> | undefined>;
-
-// @alpha @deprecated (undocumented)
-export interface ChatExportCustomisations<ExportFormat, ExportType> {
-    getForceChatExportParameters(): {
-        format?: ExportFormat;
-        range?: ExportType;
-        numberOfMessages?: number;
-        includeAttachments?: boolean;
-        sizeMb?: number;
-    };
-}
-
-// @public
-export interface ClientApi {
-    accountData: AccountDataApi;
-    getRoom: (id: string) => Room | null;
-}
-
-// @alpha @deprecated (undocumented)
-export interface ComponentVisibilityCustomisations {
-    shouldShowComponent?(component: "UIComponent.sendInvites" | "UIComponent.roomCreation" | "UIComponent.spaceCreation" | "UIComponent.exploreRooms" | "UIComponent.addIntegrations" | "UIComponent.filterContainer" | "UIComponent.roomOptionsMenu"): boolean;
-}
-
-// @alpha
-export interface ComposerApi {
-    insertPlaintextIntoComposer(plaintext: string): void;
-}
-
-// @public
-export interface Config {
-    // (undocumented)
-    brand: string;
-}
-
-// @public
-export interface ConfigApi {
-    // (undocumented)
-    get(): Config;
-    // (undocumented)
-    get<K extends keyof Config>(key: K): Config[K];
-    // (undocumented)
-    get<K extends keyof Config = never>(key?: K): Config | Config[K];
-}
-
-// @alpha
-export type Container = "top" | "right" | "center";
-
-// @alpha
-export interface CustomComponentsApi {
-    registerLoginComponent(renderer: CustomLoginRenderFunction): void;
-    registerMessageRenderer(eventTypeOrFilter: string | ((mxEvent: MatrixEvent) => boolean), renderer: CustomMessageRenderFunction, hints?: CustomMessageRenderHints): void;
-    registerRoomPreviewBar(renderer: CustomRoomPreviewBarRenderFunction): void;
-}
-
-// @alpha
-export interface CustomisationsApi {
-    registerShouldShowComponent(fn: (this: void, component: UIComponent) => boolean | void): void;
-}
-
-// @alpha
-export type CustomLoginComponentProps = {
-    serverConfig: CustomLoginComponentPropsServerConfig;
-    fragmentAfterLogin?: string;
-    children?: ReactNode;
-    onLoggedIn(data: AccountAuthInfo): void;
-    onServerConfigChange(config: CustomLoginComponentPropsServerConfig): void;
-};
-
-// @alpha
-export interface CustomLoginComponentPropsServerConfig {
-    hsName: string;
-    hsUrl: string;
-}
-
-// @alpha
-export type CustomLoginRenderFunction = ExtendablePropsRenderFunction<CustomLoginComponentProps>;
-
-// @alpha
-export type CustomMessageComponentProps = {
-    mxEvent: MatrixEvent;
-};
-
-// @alpha
-export type CustomMessageRenderFunction = (
-props: CustomMessageComponentProps,
-originalComponent?: (props?: OriginalMessageComponentProps) => React.JSX.Element) => JSX.Element;
-
-// @alpha
-export type CustomMessageRenderHints = {
-    allowEditingEvent?: boolean;
-    allowDownloadingMedia?: (mxEvent: MatrixEvent) => Promise<boolean>;
-};
-
-// @alpha
-export type CustomRoomPreviewBarComponentProps = {
-    roomId?: string;
-    roomAlias?: string;
-};
-
-// @alpha
-export type CustomRoomPreviewBarRenderFunction = (
-props: CustomRoomPreviewBarComponentProps,
-originalComponent: (props: CustomRoomPreviewBarComponentProps) => JSX.Element) => JSX.Element;
-
-// @public
-export interface DialogApiExtension {
-    openDialog<M, P extends object>(initialOptions: DialogOptions, dialog: ComponentType<P & DialogProps<M>>, props: P): DialogHandle<M>;
-}
-
-// @public
-export type DialogHandle<M> = {
-    finished: Promise<{
-        ok: boolean;
-        model: M | null;
-    }>;
-    close(): void;
-};
-
-// @public
-export interface DialogOptions {
-    title: string;
-}
-
-// @public
-export type DialogProps<M> = {
-    onSubmit(model: M): void;
-    onCancel(): void;
-};
-
-// @alpha @deprecated (undocumented)
-export interface DirectoryCustomisations {
-    // (undocumented)
-    requireCanonicalAliasAccessToPublish?(): boolean;
-}
-
-// @alpha
-export type ExtendablePropsRenderFunction<BaseProps> = <P extends BaseProps>(
-props: P,
-originalComponent: (props: P) => JSX.Element) => JSX.Element;
-
-// @alpha
-export interface ExtrasApi {
-    addRoomHeaderButtonCallback(cb: RoomHeaderButtonsCallback): void;
-    getVisibleRoomBySpaceKey(spaceKey: string, cb: () => string[]): void;
-    setSpacePanelItem(spaceKey: string, props: SpacePanelItemProps): void;
-}
-
-// @public
-export interface I18nApi {
-    humanizeTime(this: void, timeMillis: number): string;
-    get language(): string;
-    register(this: void, translations: Partial<Translations>): void;
-    translate(this: void, key: keyof Translations, variables?: StringVariables): string;
-    translate(this: void, key: keyof Translations, variables: Variables | undefined, tags: Tags): ReactNode;
-}
-
-// @alpha
-export type IdentityApprover = (widget: WidgetDescriptor) => MaybePromise<boolean | undefined>;
-
-// @alpha @deprecated (undocumented)
-export type LegacyCustomisations<T extends object> = (customisations: T) => void;
-
-// @alpha @deprecated (undocumented)
-export interface LegacyCustomisationsApiExtension {
-    // @deprecated (undocumented)
-    readonly _registerLegacyAliasCustomisations: LegacyCustomisations<AliasCustomisations>;
-    // @deprecated (undocumented)
-    readonly _registerLegacyChatExportCustomisations: LegacyCustomisations<ChatExportCustomisations<never, never>>;
-    // @deprecated (undocumented)
-    readonly _registerLegacyComponentVisibilityCustomisations: LegacyCustomisations<ComponentVisibilityCustomisations>;
-    // @deprecated (undocumented)
-    readonly _registerLegacyDirectoryCustomisations: LegacyCustomisations<DirectoryCustomisations>;
-    // @deprecated (undocumented)
-    readonly _registerLegacyLifecycleCustomisations: LegacyCustomisations<LifecycleCustomisations>;
-    // @deprecated (undocumented)
-    readonly _registerLegacyMediaCustomisations: LegacyCustomisations<MediaCustomisations<never, never, never>>;
-    // @deprecated (undocumented)
-    readonly _registerLegacyRoomListCustomisations: LegacyCustomisations<RoomListCustomisations<never>>;
-    // @deprecated (undocumented)
-    readonly _registerLegacyUserIdentifierCustomisations: LegacyCustomisations<UserIdentifierCustomisations>;
-    // @deprecated (undocumented)
-    readonly _registerLegacyWidgetPermissionsCustomisations: LegacyCustomisations<WidgetPermissionsCustomisations<never, never>>;
-    // @deprecated (undocumented)
-    readonly _registerLegacyWidgetVariablesCustomisations: LegacyCustomisations<WidgetVariablesCustomisations>;
-}
-
-// @alpha @deprecated (undocumented)
-export interface LegacyModuleApiExtension {
-    // @deprecated
-    _registerLegacyModule(LegacyModule: RuntimeModuleConstructor): Promise<void>;
-}
-
-// @alpha @deprecated (undocumented)
-export interface LifecycleCustomisations {
-    // (undocumented)
-    onLoggedOutAndStorageCleared?(): void;
-}
-
-// @alpha
-export type LocationRenderFunction = () => JSX.Element;
-
-// @alpha
-export interface MatrixEvent {
-    content: Record<string, unknown>;
-    eventId: string;
-    originServerTs: number;
-    roomId: string;
-    sender: string;
-    stateKey?: string;
-    type: string;
-    unsigned: Record<string, unknown>;
-}
-
-// @public
-export type MaybePromise<T> = T | PromiseLike<T>;
-
-// @alpha @deprecated (undocumented)
-export interface Media {
-    // (undocumented)
-    downloadSource(): Promise<Response>;
-    // (undocumented)
-    getSquareThumbnailHttp(dim: number): string | null;
-    // (undocumented)
-    getThumbnailHttp(width: number, height: number, mode?: "scale" | "crop"): string | null;
-    // (undocumented)
-    getThumbnailOfSourceHttp(width: number, height: number, mode?: "scale" | "crop"): string | null;
-    // (undocumented)
-    readonly hasThumbnail: boolean;
-    // (undocumented)
-    readonly isEncrypted: boolean;
-    // (undocumented)
-    readonly srcHttp: string | null;
-    // (undocumented)
-    readonly srcMxc: string;
-    // (undocumented)
-    readonly thumbnailHttp: string | null;
-    // (undocumented)
-    readonly thumbnailMxc: string | null | undefined;
-}
-
-// @alpha @deprecated (undocumented)
-export interface MediaContructable<PreparedMedia> {
-    // (undocumented)
-    new (prepared: PreparedMedia): Media;
-}
-
-// @alpha @deprecated (undocumented)
-export interface MediaCustomisations<Content, Client, PreparedMedia> {
-    // (undocumented)
-    readonly Media: MediaContructable<PreparedMedia>;
-    // (undocumented)
-    mediaFromContent(content: Content, client?: Client): Media;
-    // (undocumented)
-    mediaFromMxc(mxc?: string, client?: Client): Media;
-}
-
-// @public
-export interface Module {
-    // (undocumented)
-    load(): Promise<void>;
-}
-
-// @public
-export interface ModuleFactory {
-    // (undocumented)
-    new (api: Api): Module;
-    // (undocumented)
-    readonly moduleApiVersion: string;
-    // (undocumented)
-    readonly prototype: Module;
-}
-
-// @public
-export class ModuleIncompatibleError extends Error {
-    constructor(pluginVersion: string);
-}
-
-// @public
-export class ModuleLoader {
-    constructor(api: Api);
-    // Warning: (ae-forgotten-export) The symbol "ModuleExport" needs to be exported by the entry point index.d.ts
-    //
-    // (undocumented)
-    load(moduleExport: ModuleExport): Promise<void>;
-    // (undocumented)
-    start(): Promise<void>;
-}
-
-// @public
-export interface NavigationApi {
-    openRoom(roomIdOrAlias: string, opts?: OpenRoomOptions): void;
-    // @alpha
-    registerLocationRenderer(path: string, renderer: LocationRenderFunction): void;
-    toMatrixToLink(link: string, join?: boolean): Promise<void>;
-}
-
-// @public
-export interface OpenRoomOptions {
-    autoJoin?: boolean;
-    viaServers?: string[];
-}
-
-// @alpha
-export type OriginalMessageComponentProps = {
-    showUrlPreview?: boolean;
-};
-
-// @alpha
-export type PreloadApprover = (widget: WidgetDescriptor) => MaybePromise<boolean | undefined>;
-
-// @public
-export interface Profile {
-    displayName?: string;
-    isGuest?: boolean;
-    userId?: string;
-}
-
-// @public
-export interface ProfileApiExtension {
-    readonly profile: Watchable<Profile>;
-}
-
-// @public
-export interface RichVariables {
-    // (undocumented)
-    [key: string]: SubstitutionValue;
-    // (undocumented)
-    count?: number;
-}
-
-// @public
-export interface Room {
-    getLastActiveTimestamp: () => number;
-    id: string;
-    name: Watchable<string>;
-}
-
-// @alpha
-export type RoomHeaderButtonsCallback = (roomId: string) => JSX.Element | undefined;
-
-// @alpha @deprecated (undocumented)
-export interface RoomListCustomisations<Room> {
-    isRoomVisible?(room: Room): boolean;
-}
-
-// @public
-export interface RoomListStoreApi {
-    getRooms(): Watchable<Room[]>;
-    waitForReady(): Promise<void>;
-}
-
-// @alpha
-export interface RoomViewProps {
-    enableReadReceiptsAndMarkersOnActivity?: boolean;
-    hideComposer?: boolean;
-    hideHeader?: boolean;
-    hidePinnedMessageBanner?: boolean;
-    hideRightPanel?: boolean;
-    hideWidgets?: boolean;
-}
-
-// @alpha @deprecated (undocumented)
-export type RuntimeModuleConstructor = new (api: ModuleApi) => RuntimeModule;
-
-// @alpha
-export interface SpacePanelItemProps {
-    className?: string;
-    icon?: JSX.Element;
-    label: string;
-    onSelected: () => void;
-    style?: React.CSSProperties;
-    tooltip?: string;
-}
-
-// @public
-export interface StoresApi {
-    roomListStore: RoomListStoreApi;
-}
-
-// @public
-export interface StringVariables {
-    // (undocumented)
-    [key: string]: number | string | null | undefined;
-    // (undocumented)
-    count?: number;
-}
-
-// @public
-export type SubstitutionValue = number | string | ReactNode | ((sub: string) => ReactNode);
-
-// @public
-export type Tags = Record<string, SubstitutionValue>;
-
-// @public
-export type Translations = Record<string, {
-    [ietfLanguageTag: string]: string;
-}>;
-
-// @alpha
-export const enum UIComponent {
-    AddIntegrations = "UIComponent.addIntegrations",
-    CreateRooms = "UIComponent.roomCreation",
-    CreateSpaces = "UIComponent.spaceCreation",
-    ExploreRooms = "UIComponent.exploreRooms",
-    FilterContainer = "UIComponent.filterContainer",
-    InviteUsers = "UIComponent.sendInvites",
-    RoomOptionsMenu = "UIComponent.roomOptionsMenu"
-}
-
-// @alpha @deprecated (undocumented)
-export interface UserIdentifierCustomisations {
-    getDisplayUserIdentifier(userId: string, opts: {
-        roomId?: string;
-        withDisplayName?: boolean;
-    }): string | null;
-}
-
-// @public
-export function useWatchable<T>(watchable: Watchable<T>): T;
-
-// @public
-export type Variables = StringVariables | RichVariables;
-
-// @public
-export class Watchable<T> {
-    constructor(currentValue: T);
-    // Warning: (ae-forgotten-export) The symbol "WatchFn" needs to be exported by the entry point index.d.ts
-    //
-    // (undocumented)
-    protected readonly listeners: Set<WatchFn<T>>;
-    protected onFirstWatch(): void;
-    protected onLastWatch(): void;
-    // (undocumented)
-    unwatch(listener: (value: T) => void): void;
-    get value(): T;
-    set value(value: T);
-    // (undocumented)
-    watch(listener: (value: T) => void): void;
-}
-
-// @alpha
-export interface WidgetApi {
-    getAppAvatarUrl(app: IWidget, width?: number, height?: number, resizeMethod?: string): string | null;
-    getWidgetsInRoom(roomId: string): IWidget[];
-    isAppInContainer(app: IWidget, container: Container, roomId: string): boolean;
-    moveAppToContainer(app: IWidget, container: Container, roomId: string): void;
-}
-
-// @alpha
-export type WidgetDescriptor = {
-    id: string;
-    templateUrl: string;
-    creatorUserId: string;
-    type: string;
-    origin: string;
-    roomId?: string;
-};
-
-// @alpha
-export interface WidgetLifecycleApi {
-    registerCapabilitiesApprover(approver: CapabilitiesApprover): void;
-    registerIdentityApprover(approver: IdentityApprover): void;
-    registerPreloadApprover(approver: PreloadApprover): void;
-}
-
-// @alpha @deprecated (undocumented)
-export interface WidgetPermissionsCustomisations<Widget, Capability> {
-    preapproveCapabilities?(widget: Widget, requestedCapabilities: Set<Capability>): Promise<Set<Capability>>;
-}
-
-// @alpha @deprecated (undocumented)
-export interface WidgetVariablesCustomisations {
-    isReady?(): Promise<void>;
-    provideVariables?(): {
-        currentUserId: string;
-        userDisplayName?: string;
-        userHttpAvatarUrl?: string;
-        clientId?: string;
-        clientTheme?: string;
-        clientLanguage?: string;
-        deviceId?: string;
-        baseUrl?: string;
-    };
-}
-
-// (No @packageDocumentation comment for this package)
-
-```
+## API Report File for "@element-hq/element-web-module-api"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { ComponentType } from 'react';
+import { IWidget } from 'matrix-widget-api';
+import { JSX } from 'react';
+import { ModuleApi } from '@matrix-org/react-sdk-module-api';
+import { ReactNode } from 'react';
+import { Root } from 'react-dom/client';
+import { RuntimeModule } from '@matrix-org/react-sdk-module-api';
+import { SVGAttributes } from 'react';
+
+// @public
+export interface AccountAuthApiExtension {
+    overwriteAccountAuth(accountInfo: AccountAuthInfo): Promise<void>;
+}
+
+// @public
+export interface AccountAuthInfo {
+    accessToken: string;
+    deviceId: string;
+    homeserverUrl: string;
+    refreshToken?: string;
+    userId: string;
+}
+
+// @public
+export interface AccountDataApi {
+    delete(eventType: string): Promise<void>;
+    get(eventType: string): Watchable<unknown>;
+    set(eventType: string, content: unknown): Promise<void>;
+}
+
+// @alpha @deprecated (undocumented)
+export interface AliasCustomisations {
+    // (undocumented)
+    getDisplayAliasForAliasSet?(canonicalAlias: string | null, altAliases: string[]): string | null;
+}
+
+// Warning: (ae-incompatible-release-tags) The symbol "Api" is marked as @public, but its signature references "LegacyModuleApiExtension" which is marked as @alpha
+// Warning: (ae-incompatible-release-tags) The symbol "Api" is marked as @public, but its signature references "LegacyCustomisationsApiExtension" which is marked as @alpha
+//
+// @public
+export interface Api extends LegacyModuleApiExtension, LegacyCustomisationsApiExtension, DialogApiExtension, AccountAuthApiExtension, ProfileApiExtension {
+    // @alpha
+    readonly builtins: BuiltinsApi;
+    readonly client: ClientApi;
+    // @alpha
+    readonly composer: ComposerApi;
+    readonly config: ConfigApi;
+    createRoot(element: Element): Root;
+    // @alpha
+    readonly customComponents: CustomComponentsApi;
+    // @alpha
+    readonly customisations: CustomisationsApi;
+    // @alpha
+    readonly extras: ExtrasApi;
+    readonly i18n: I18nApi;
+    readonly navigation: NavigationApi;
+    readonly rootNode: HTMLElement;
+    // @alpha
+    readonly settings: SettingsApi;
+    // @alpha
+    readonly storageHelper: StorageHelperApi;
+    readonly stores: StoresApi;
+    // @alpha
+    readonly widget: WidgetApi;
+    // @alpha
+    readonly widgetLifecycle: WidgetLifecycleApi;
+}
+
+// @alpha
+export interface BuiltinsApi {
+    renderNotificationDecoration(roomId: string): React.ReactNode;
+    renderRoomAvatar(roomId: string, size?: string): React.ReactNode;
+    renderRoomView(roomId: string, props?: RoomViewProps): React.ReactNode;
+}
+
+// @alpha
+export type CapabilitiesApprover = (widget: WidgetDescriptor, requestedCapabilities: Set<string>) => MaybePromise<Set<string> | undefined>;
+
+// @alpha @deprecated (undocumented)
+export interface ChatExportCustomisations<ExportFormat, ExportType> {
+    getForceChatExportParameters(): {
+        format?: ExportFormat;
+        range?: ExportType;
+        numberOfMessages?: number;
+        includeAttachments?: boolean;
+        sizeMb?: number;
+    };
+}
+
+// @public
+export interface ClientApi {
+    accountData: AccountDataApi;
+    getRoom: (id: string) => Room | null;
+}
+
+// @alpha @deprecated (undocumented)
+export interface ComponentVisibilityCustomisations {
+    shouldShowComponent?(component: "UIComponent.sendInvites" | "UIComponent.roomCreation" | "UIComponent.spaceCreation" | "UIComponent.exploreRooms" | "UIComponent.addIntegrations" | "UIComponent.filterContainer" | "UIComponent.roomOptionsMenu"): boolean;
+}
+
+// @alpha
+export interface ComposerApi {
+    addFileUploadOption(option: ComposerApiFileUploadOption): void;
+    insertPlaintextIntoComposer(plaintext: string, view: ComposerApiTarget): void;
+    openFileUploadConfirmation(files: File[], view: ComposerApiTarget): void;
+}
+
+// @alpha
+export type ComposerApiFileUploadOption = {
+    type: string;
+    label: string;
+    icon?: ComponentType<SVGAttributes<SVGElement>>;
+    onSelected: (roomId?: string, view?: ComposerApiTarget, relation?: {
+        inReplyToEventId?: string;
+        relType?: string;
+    }) => Promise<void> | void;
+};
+
+// @alpha
+export type ComposerApiTarget = {
+    view: "room";
+} | {
+    view: "thread";
+};
+
+// Warning: (ae-forgotten-export) The symbol "WebConfigJson" needs to be exported by the entry point index.d.ts
+//
+// @public
+export interface Config extends WebConfigJson {
+    // (undocumented)
+    brand: string;
+}
+
+// @public
+export interface ConfigApi {
+    // (undocumented)
+    get(): Config;
+    // (undocumented)
+    get<K extends keyof Config>(key: K): Config[K];
+    // (undocumented)
+    get<K extends keyof Config = never>(key?: K): Config | Config[K];
+}
+
+// @alpha
+export type Container = "top" | "right" | "center";
+
+// @alpha
+export interface CustomComponentsApi {
+    registerComposerPreview(filterFn: (composerText: string, roomId: string) => boolean, renderer: CustomComposerPreviewRenderFunction): void;
+    registerLoginComponent(renderer: CustomLoginRenderFunction): void;
+    registerMessageRenderer(eventTypeOrFilter: string | ((mxEvent: MatrixEvent) => boolean), renderer: CustomMessageRenderFunction, hints?: CustomMessageRenderHints): void;
+    registerRoomPreviewBar(renderer: CustomRoomPreviewBarRenderFunction): void;
+}
+
+// @alpha
+export type CustomComposerPreviewComponentProps = {
+    text: string;
+    roomId: string;
+    target?: ComposerApiTarget;
+    relation?: {
+        inReplyToEventId?: string;
+        relType?: string;
+    };
+};
+
+// @alpha
+export type CustomComposerPreviewRenderFunction = ExtendablePropsRenderFunction<CustomComposerPreviewComponentProps>;
+
+// @alpha
+export interface CustomisationsApi {
+    registerShouldShowComponent(fn: (this: void, component: UIComponent) => boolean | void): void;
+}
+
+// @alpha
+export type CustomLoginComponentProps = {
+    serverConfig: CustomLoginComponentPropsServerConfig;
+    fragmentAfterLogin?: string;
+    children?: ReactNode;
+    onLoggedIn(this: void, data: AccountAuthInfo): void;
+    onServerConfigChange(this: void, config: CustomLoginComponentPropsServerConfig): void;
+};
+
+// @alpha
+export interface CustomLoginComponentPropsServerConfig {
+    hsName: string;
+    hsUrl: string;
+}
+
+// @alpha
+export type CustomLoginRenderFunction = ExtendablePropsRenderFunction<CustomLoginComponentProps>;
+
+// @alpha
+export type CustomMessageComponentProps = {
+    mxEvent: MatrixEvent;
+};
+
+// @alpha
+export type CustomMessageRenderFunction = (
+props: CustomMessageComponentProps,
+originalComponent?: (props?: OriginalMessageComponentProps) => React.JSX.Element) => JSX.Element;
+
+// @alpha
+export type CustomMessageRenderHints = {
+    allowEditingEvent?: boolean;
+    allowDownloadingMedia?: (mxEvent: MatrixEvent) => Promise<boolean>;
+};
+
+// @alpha
+export type CustomRoomPreviewBarComponentProps = {
+    roomId?: string;
+    roomAlias?: string;
+};
+
+// @alpha
+export type CustomRoomPreviewBarRenderFunction = (
+props: CustomRoomPreviewBarComponentProps,
+originalComponent: (props: CustomRoomPreviewBarComponentProps) => JSX.Element) => JSX.Element;
+
+// @public
+export interface DialogApiExtension {
+    openDialog<M, P extends object>(initialOptions: DialogOptions, dialog: ComponentType<P & DialogProps<M>>, props: P): DialogHandle<M>;
+}
+
+// @public
+export type DialogHandle<M> = {
+    finished: Promise<{
+        ok: boolean;
+        model: M | null;
+    }>;
+    close(this: void): void;
+};
+
+// @public
+export interface DialogOptions {
+    title: string;
+}
+
+// @public
+export type DialogProps<M> = {
+    onSubmit(this: void, model: M): void;
+    onCancel(this: void): void;
+};
+
+// @alpha @deprecated (undocumented)
+export interface DirectoryCustomisations {
+    // (undocumented)
+    requireCanonicalAliasAccessToPublish?(): boolean;
+}
+
+// @alpha
+export type ExtendablePropsRenderFunction<BaseProps> = <P extends BaseProps>(
+props: P,
+originalComponent: (props: P) => JSX.Element) => JSX.Element;
+
+// @alpha
+export interface ExtrasApi {
+    addRoomHeaderButtonCallback(cb: RoomHeaderButtonsCallback): void;
+    getVisibleRoomBySpaceKey(spaceKey: string, cb: () => string[]): void;
+    setSpacePanelItem(spaceKey: string, props: SpacePanelItemProps): void;
+}
+
+// @public
+export interface I18nApi {
+    humanizeTime(this: void, timeMillis: number): string;
+    get language(): string;
+    register(this: void, translations: Partial<Translations>): void;
+    translate(this: void, key: keyof Translations, variables?: StringVariables): string;
+    translate(this: void, key: keyof Translations, variables: Variables | undefined, tags: Tags): ReactNode;
+}
+
+// @alpha
+export type IdentityApprover = (widget: WidgetDescriptor) => MaybePromise<boolean | undefined>;
+
+// @alpha @deprecated (undocumented)
+export type LegacyCustomisations<T extends object> = (customisations: T) => void;
+
+// @alpha @deprecated (undocumented)
+export interface LegacyCustomisationsApiExtension {
+    // @deprecated (undocumented)
+    readonly _registerLegacyAliasCustomisations: LegacyCustomisations<AliasCustomisations>;
+    // @deprecated (undocumented)
+    readonly _registerLegacyChatExportCustomisations: LegacyCustomisations<ChatExportCustomisations<never, never>>;
+    // @deprecated (undocumented)
+    readonly _registerLegacyComponentVisibilityCustomisations: LegacyCustomisations<ComponentVisibilityCustomisations>;
+    // @deprecated (undocumented)
+    readonly _registerLegacyDirectoryCustomisations: LegacyCustomisations<DirectoryCustomisations>;
+    // @deprecated (undocumented)
+    readonly _registerLegacyLifecycleCustomisations: LegacyCustomisations<LifecycleCustomisations>;
+    // @deprecated (undocumented)
+    readonly _registerLegacyMediaCustomisations: LegacyCustomisations<MediaCustomisations<never, never, never>>;
+    // @deprecated (undocumented)
+    readonly _registerLegacyRoomListCustomisations: LegacyCustomisations<RoomListCustomisations<never>>;
+    // @deprecated (undocumented)
+    readonly _registerLegacyUserIdentifierCustomisations: LegacyCustomisations<UserIdentifierCustomisations>;
+    // @deprecated (undocumented)
+    readonly _registerLegacyWidgetPermissionsCustomisations: LegacyCustomisations<WidgetPermissionsCustomisations<never, never>>;
+    // @deprecated (undocumented)
+    readonly _registerLegacyWidgetVariablesCustomisations: LegacyCustomisations<WidgetVariablesCustomisations>;
+}
+
+// @alpha @deprecated (undocumented)
+export interface LegacyModuleApiExtension {
+    // @deprecated
+    _registerLegacyModule(LegacyModule: RuntimeModuleConstructor): Promise<void>;
+}
+
+// @alpha @deprecated (undocumented)
+export interface LifecycleCustomisations {
+    // (undocumented)
+    onLoggedOutAndStorageCleared?(): void;
+}
+
+// @alpha
+export type LocationRenderFunction = () => JSX.Element;
+
+// @alpha
+export interface MatrixEvent {
+    content: Record<string, unknown>;
+    eventId: string;
+    originServerTs: number;
+    roomId: string;
+    sender: string;
+    stateKey?: string;
+    type: string;
+    unsigned: Record<string, unknown>;
+}
+
+// @public
+export type MaybePromise<T> = T | PromiseLike<T>;
+
+// @alpha @deprecated (undocumented)
+export interface Media {
+    // (undocumented)
+    downloadSource(): Promise<Response>;
+    // (undocumented)
+    getSquareThumbnailHttp(dim: number): string | null;
+    // (undocumented)
+    getThumbnailHttp(width: number, height: number, mode?: "scale" | "crop"): string | null;
+    // (undocumented)
+    getThumbnailOfSourceHttp(width: number, height: number, mode?: "scale" | "crop"): string | null;
+    // (undocumented)
+    readonly hasThumbnail: boolean;
+    // (undocumented)
+    readonly isEncrypted: boolean;
+    // (undocumented)
+    readonly srcHttp: string | null;
+    // (undocumented)
+    readonly srcMxc: string;
+    // (undocumented)
+    readonly thumbnailHttp: string | null;
+    // (undocumented)
+    readonly thumbnailMxc: string | null | undefined;
+}
+
+// @alpha @deprecated (undocumented)
+export interface MediaContructable<PreparedMedia> {
+    // (undocumented)
+    new (prepared: PreparedMedia): Media;
+}
+
+// @alpha @deprecated (undocumented)
+export interface MediaCustomisations<Content, Client, PreparedMedia> {
+    // (undocumented)
+    readonly Media: MediaContructable<PreparedMedia>;
+    // (undocumented)
+    mediaFromContent(content: Content, client?: Client): Media;
+    // (undocumented)
+    mediaFromMxc(mxc?: string, client?: Client): Media;
+}
+
+// @public
+export interface Module {
+    // (undocumented)
+    load(): Promise<void>;
+}
+
+// @public
+export interface ModuleFactory {
+    // (undocumented)
+    new (api: Api): Module;
+    // (undocumented)
+    readonly moduleApiVersion: string;
+    // (undocumented)
+    readonly prototype: Module;
+}
+
+// @public
+export class ModuleIncompatibleError extends Error {
+    constructor(pluginVersion: string);
+}
+
+// @public
+export class ModuleLoader {
+    constructor(api: Api);
+    // Warning: (ae-forgotten-export) The symbol "ModuleExport" needs to be exported by the entry point index.d.ts
+    //
+    // (undocumented)
+    load(moduleExport: ModuleExport): Promise<void>;
+    // (undocumented)
+    start(): Promise<void>;
+}
+
+// @public
+export interface NavigationApi {
+    openRoom(roomIdOrAlias: string, opts?: OpenRoomOptions): void;
+    // @alpha
+    registerLocationRenderer(path: string, renderer: LocationRenderFunction): void;
+    toMatrixToLink(link: string, join?: boolean): Promise<void>;
+}
+
+// @public
+export interface OpenRoomOptions {
+    autoJoin?: boolean;
+    viaServers?: string[];
+}
+
+// @alpha
+export type OriginalMessageComponentProps = {
+    showUrlPreview?: boolean;
+};
+
+// @alpha
+export type PreloadApprover = (widget: WidgetDescriptor) => MaybePromise<boolean | undefined>;
+
+// @public
+export interface Profile {
+    displayName?: string;
+    isGuest?: boolean;
+    userId?: string;
+}
+
+// @public
+export interface ProfileApiExtension {
+    readonly profile: Watchable<Profile>;
+}
+
+// @public
+export interface RichVariables {
+    // (undocumented)
+    [key: string]: SubstitutionValue;
+    // (undocumented)
+    count?: number;
+}
+
+// @public
+export interface Room {
+    getLastActiveTimestamp: () => number;
+    id: string;
+    name: Watchable<string>;
+}
+
+// @alpha
+export type RoomHeaderButtonsCallback = (roomId: string) => JSX.Element | undefined;
+
+// @alpha @deprecated (undocumented)
+export interface RoomListCustomisations<Room> {
+    isRoomVisible?(room: Room): boolean;
+}
+
+// @public
+export interface RoomListStoreApi {
+    getRooms(): Watchable<Room[]>;
+    waitForReady(): Promise<void>;
+}
+
+// @alpha
+export interface RoomViewProps {
+    enableReadReceiptsAndMarkersOnActivity?: boolean;
+    hideComposer?: boolean;
+    hideHeader?: boolean;
+    hidePinnedMessageBanner?: boolean;
+    hideRightPanel?: boolean;
+    hideWidgets?: boolean;
+}
+
+// @alpha @deprecated (undocumented)
+export type RuntimeModuleConstructor = new (api: ModuleApi) => RuntimeModule;
+
+// @alpha
+export interface SettingsApi {
+    getValue<T = any>(settingName: string, roomId?: string | null, excludeDefault?: boolean): T | undefined;
+}
+
+// @alpha
+export interface SpacePanelItemProps {
+    className?: string;
+    icon?: JSX.Element;
+    label: string;
+    onSelected: () => void;
+    style?: React.CSSProperties;
+    tooltip?: string;
+}
+
+// @alpha
+export interface StorageHelperApi {
+    getPickleKey(userId: string, deviceId: string): Promise<string | null>;
+}
+
+// @public
+export interface StoresApi {
+    roomListStore: RoomListStoreApi;
+}
+
+// @public
+export interface StringVariables {
+    // (undocumented)
+    [key: string]: number | string | null | undefined;
+    // (undocumented)
+    count?: number;
+}
+
+// @public
+export type SubstitutionValue = number | string | ReactNode | ((sub: string) => ReactNode);
+
+// @public
+export type Tags = Record<string, SubstitutionValue>;
+
+// @public
+export type Translations = Record<string, {
+    [ietfLanguageTag: string]: string;
+}>;
+
+// @alpha
+export const enum UIComponent {
+    AddIntegrations = "UIComponent.addIntegrations",
+    CreateRooms = "UIComponent.roomCreation",
+    CreateSpaces = "UIComponent.spaceCreation",
+    ExploreRooms = "UIComponent.exploreRooms",
+    FilterContainer = "UIComponent.filterContainer",
+    InviteUsers = "UIComponent.sendInvites",
+    RoomOptionsMenu = "UIComponent.roomOptionsMenu"
+}
+
+// @alpha @deprecated (undocumented)
+export interface UserIdentifierCustomisations {
+    getDisplayUserIdentifier(userId: string, opts: {
+        roomId?: string;
+        withDisplayName?: boolean;
+    }): string | null;
+}
+
+// @public
+export function useWatchable<T>(watchable: Watchable<T>): T;
+
+// @public
+export type Variables = StringVariables | RichVariables;
+
+// @public
+export class Watchable<T> {
+    constructor(currentValue: T);
+    // Warning: (ae-forgotten-export) The symbol "WatchFn" needs to be exported by the entry point index.d.ts
+    //
+    // (undocumented)
+    protected readonly listeners: Set<WatchFn<T>>;
+    protected onFirstWatch(): void;
+    protected onLastWatch(): void;
+    // (undocumented)
+    unwatch(listener: (value: T) => void): void;
+    get value(): T;
+    set value(value: T);
+    // (undocumented)
+    watch(listener: (value: T) => void): void;
+}
+
+// @alpha
+export interface WidgetApi {
+    getAppAvatarUrl(app: IWidget, width?: number, height?: number, resizeMethod?: string): string | null;
+    getWidgetsInRoom(roomId: string): IWidget[];
+    isAppInContainer(app: IWidget, container: Container, roomId: string): boolean;
+    moveAppToContainer(app: IWidget, container: Container, roomId: string): void;
+}
+
+// @alpha
+export type WidgetDescriptor = {
+    id: string;
+    templateUrl: string;
+    creatorUserId: string;
+    type: string;
+    origin: string;
+    roomId?: string;
+};
+
+// @alpha
+export interface WidgetLifecycleApi {
+    registerCapabilitiesApprover(approver: CapabilitiesApprover): void;
+    registerIdentityApprover(approver: IdentityApprover): void;
+    registerPreloadApprover(approver: PreloadApprover): void;
+}
+
+// @alpha @deprecated (undocumented)
+export interface WidgetPermissionsCustomisations<Widget, Capability> {
+    preapproveCapabilities?(widget: Widget, requestedCapabilities: Set<Capability>): Promise<Set<Capability>>;
+}
+
+// @alpha @deprecated (undocumented)
+export interface WidgetVariablesCustomisations {
+    isReady?(): Promise<void>;
+    provideVariables?(): {
+        currentUserId: string;
+        userDisplayName?: string;
+        userHttpAvatarUrl?: string;
+        clientId?: string;
+        clientTheme?: string;
+        clientLanguage?: string;
+        deviceId?: string;
+        baseUrl?: string;
+    };
+}
+
+// (No @packageDocumentation comment for this package)
+
+```
diff --git a/packages/module-api/package.json b/packages/module-api/package.json
index 2ec60cc7dc..59033dc4e1 100644
--- a/packages/module-api/package.json
+++ b/packages/module-api/package.json
@@ -1,12 +1,12 @@
 {
     "name": "@element-hq/element-web-module-api",
     "type": "module",
-    "version": "1.13.0",
+    "version": "1.16.0",
     "description": "Module API surface for element-web",
     "repository": {
         "type": "git",
-        "url": "git+https://github.com/element-hq/element-modules.git",
-        "directory": "packages/element-web-module-api"
+        "url": "git+https://github.com/element-hq/element-web.git",
+        "directory": "packages/module-api"
     },
     "author": "element-hq",
     "license": "SEE LICENSE IN README.md",
@@ -19,33 +19,39 @@
             "types": "./lib/element-web-module-api-alpha.d.ts",
             "import": "./lib/element-web-plugin-engine.js",
             "require": "./lib/element-web-plugin-engine.umd.cjs"
+        },
+        "./vite.base.ts": {
+            "types": "./vite.base.ts",
+            "import": "./vite.base.ts"
         }
     },
     "files": [
-        "lib"
+        "lib",
+        "vite.base.ts"
     ],
     "scripts": {
         "prepack": "nx build",
         "lint:types": "nx lint:types",
-        "test:unit": "vitest"
+        "test:unit": "vitest",
+        "coverage": "pnpm test:unit --coverage",
+        "coverage:diff": "diff-cover --config-file ../../diff-cover.toml coverage/lcov.info"
     },
     "devDependencies": {
-        "@element-hq/vite-common": "workspace:*",
         "@matrix-org/react-sdk-module-api": "^2.5.0",
         "@microsoft/api-extractor": "^7.49.1",
-        "@types/node": "^22.10.7",
-        "@types/react": "^19",
-        "@types/react-dom": "^19.0.4",
+        "@types/node": "catalog:ts6",
+        "@types/react": "catalog:",
+        "@types/react-dom": "catalog:",
         "@types/semver": "^7.5.8",
-        "@vitest/coverage-v8": "catalog:",
+        "@typescript/native": "catalog:",
         "matrix-widget-api": "^1.17.0",
         "rollup-plugin-external-globals": "^0.13.0",
         "semver": "^7.6.3",
-        "typescript": "^6.0.0",
-        "unplugin-dts": "1.0.0",
+        "shared-types": "workspace:*",
+        "typescript": "catalog:ts6",
+        "unplugin-dts": "catalog:",
         "vite": "catalog:",
-        "vitest": "catalog:",
-        "vitest-sonar-reporter": "catalog:"
+        "vitest": "catalog:"
     },
     "peerDependencies": {
         "@matrix-org/react-sdk-module-api": "*",
diff --git a/packages/module-api/project.json b/packages/module-api/project.json
index 2b7e0be792..e7979345be 100644
--- a/packages/module-api/project.json
+++ b/packages/module-api/project.json
@@ -5,14 +5,10 @@
     "targets": {
         "build": {
             "cache": true,
-            "executor": "nx:run-commands",
             "inputs": ["src"],
             "outputs": ["{projectRoot}/lib"],
-            "options": {
-                "commands": ["vite build", "api-extractor run"],
-                "parallel": false,
-                "cwd": "packages/module-api"
-            }
+            "command": "vite build",
+            "options": { "cwd": "packages/module-api" }
         },
         "start": {
             "command": "vite build --watch",
diff --git a/packages/module-api/src/@types/global.d.ts b/packages/module-api/src/@types/global.d.ts
index 82ae781eb5..07eea17458 100644
--- a/packages/module-api/src/@types/global.d.ts
+++ b/packages/module-api/src/@types/global.d.ts
@@ -6,7 +6,6 @@ Please see LICENSE files in the repository root for full details.
 */
 
 declare global {
-    // eslint-disable-next-line no-var
     var __VERSION__: string; // injected by vite
 }
 
diff --git a/packages/module-api/src/api/composer.ts b/packages/module-api/src/api/composer.ts
index 6080110992..c37af72fe8 100644
--- a/packages/module-api/src/api/composer.ts
+++ b/packages/module-api/src/api/composer.ts
@@ -5,16 +5,74 @@ 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 ComponentType, type SVGAttributes } from "react";
+
+/**
+ * An option presented to the user for uploading a file.
+ * @alpha Unlikely to change
+ */
+export type ComposerApiFileUploadOption = {
+    /**
+     * An unique string to refer to the type of upload
+     * @example org.example.my_uploader
+     */
+    type: string;
+    /**
+     * Human-readable string used in labelling for the option.
+     */
+    label: string;
+    /**
+     * An icon to attach to the option. If omitted, no icon is shown.
+     */
+    icon?: ComponentType<SVGAttributes<SVGElement>>;
+    /**
+     * Function called when the option is selected.
+     * @param roomId - The room ID of the room in focus.
+     * @param relation - Whether or not a thread and/or reply is in focus.
+     * @returns
+     */
+    onSelected: (
+        roomId?: string,
+        view?: ComposerApiTarget,
+        relation?: {
+            inReplyToEventId?: string;
+            relType?: string;
+        },
+    ) => Promise<void> | void;
+};
+
+/**
+ * When handling composer interactions, this represents the target composer.
+ * @alpha Likely to change. This is intentionally left as an object so it may be extended later.
+ */
+export type ComposerApiTarget = { view: "room" } | { view: "thread" };
+
 /**
  * API to interact with the message composer.
  * @alpha Likely to change
  */
 export interface ComposerApi {
     /**
-     * Insert plaintext into the current composer.
-     * @param plaintext - The plain text to insert
+     * Add a new file upload option for the user.
+     * @throws If another option is already using the same `type`.
+     * @alpha Likely to change
+     */
+    addFileUploadOption(option: ComposerApiFileUploadOption): void;
+    /**
+     * Open the file upload confirmation dialog. This may be used in conjunction
+     * with `addFileUploadOption` to support an alternative file upload kind.
+     * @param files - The files to prompt for
+     * @param view - The target view to send the file into. Defaults to `{ view: "room" }`
      * @returns Returns immediately, does not await action.
      * @alpha Likely to change
      */
-    insertPlaintextIntoComposer(plaintext: string): void;
+    openFileUploadConfirmation(files: File[], view: ComposerApiTarget): void;
+    /**
+     * Insert plaintext into the current composer.
+     * @param plaintext - The plain text to insert
+     * @param view - The target view to insert text into. Defaults to `{ view: "room" }`
+     * @returns Returns immediately, does not await action.
+     * @alpha Likely to change
+     */
+    insertPlaintextIntoComposer(plaintext: string, view: ComposerApiTarget): void;
 }
diff --git a/packages/module-api/src/api/config.ts b/packages/module-api/src/api/config.ts
index 5f708b4983..84e3e4cdb1 100644
--- a/packages/module-api/src/api/config.ts
+++ b/packages/module-api/src/api/config.ts
@@ -5,16 +5,16 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
+import { type WebConfigJson } from "shared-types";
+
 /**
  * The configuration for the application.
  * Should be extended via declaration merging.
  * @public
  */
-export interface Config {
+export interface Config extends WebConfigJson {
     // The branding name of the application
     brand: string;
-    // Other config options are available but not specified in the types as that would make it difficult to change for element-web
-    // they are accessible at runtime all the same, see list at https://github.com/element-hq/element-web/blob/develop/docs/config.md
 }
 
 /**
diff --git a/packages/module-api/src/api/custom-components.ts b/packages/module-api/src/api/custom-components.ts
index 0265c9c63d..5ca2be000f 100644
--- a/packages/module-api/src/api/custom-components.ts
+++ b/packages/module-api/src/api/custom-components.ts
@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 import type { JSX, ReactNode } from "react";
 import type { MatrixEvent } from "../models/event";
 import type { AccountAuthInfo } from "./auth.ts";
+import type { ComposerApiTarget } from "./composer.ts";
 
 /**
  * Properties for all message components.
@@ -128,12 +129,12 @@ export type CustomLoginComponentProps = {
      * Function to complete login
      * @param data - the data to authenticate the user with
      */
-    onLoggedIn(data: AccountAuthInfo): void;
+    onLoggedIn(this: void, data: AccountAuthInfo): void;
     /**
      * Function to change the selected server
      * @param config - new server configuration details
      */
-    onServerConfigChange(config: CustomLoginComponentPropsServerConfig): void;
+    onServerConfigChange(this: void, config: CustomLoginComponentPropsServerConfig): void;
 };
 
 /**
@@ -157,6 +158,38 @@ export type ExtendablePropsRenderFunction<BaseProps> = <P extends BaseProps>(
  */
 export type CustomLoginRenderFunction = ExtendablePropsRenderFunction<CustomLoginComponentProps>;
 
+/**
+ * Properties for composer preview.
+ * @alpha Subject to change.
+ */
+export type CustomComposerPreviewComponentProps = {
+    /**
+     * The plain text currently inside the composer.
+     */
+    text: string;
+    /**
+     * The ID of the room currently in focus.
+     */
+    roomId: string;
+    /**
+     * Details about the target of the composer.
+     */
+    target?: ComposerApiTarget;
+    /**
+     * Details about what relation the user may be responding to.
+     */
+    relation?: {
+        inReplyToEventId?: string;
+        relType?: string;
+    };
+};
+
+/**
+ * Function used to render a composer preview.
+ * @alpha Unlikely to change
+ */
+export type CustomComposerPreviewRenderFunction = ExtendablePropsRenderFunction<CustomComposerPreviewComponentProps>;
+
 /**
  * API for inserting custom components into Element.
  * @alpha Subject to change.
@@ -224,4 +257,29 @@ export interface CustomComponentsApi {
      * ```
      */
     registerLoginComponent(renderer: CustomLoginRenderFunction): void;
+
+    /**
+     * Register a renderer for replacing the preview above the message composer.
+     *
+     * The render function should return a rendered component.
+     *
+     * Multiple render function may be registered, however the first matching result will be used.
+     * If no events match or are registered then the originalComponent is rendered.
+     *
+     * @param filterFn - A filter function to determine if this renderer should be used.
+     * @param renderer - The render function.
+     * @example
+     * ```
+     *  customComponents.registerComposerPreview(
+     *      (composerText) => composerText === "hello!",
+     *      (props, originalComponent) => {
+     *          return <b>You've said hello!</b>;
+     *      }
+     * );
+     * ```
+     */
+    registerComposerPreview(
+        filterFn: (composerText: string, roomId: string) => boolean,
+        renderer: CustomComposerPreviewRenderFunction,
+    ): void;
 }
diff --git a/packages/module-api/src/api/dialog.ts b/packages/module-api/src/api/dialog.ts
index cd9a2c867c..cfbf9da6f4 100644
--- a/packages/module-api/src/api/dialog.ts
+++ b/packages/module-api/src/api/dialog.ts
@@ -30,7 +30,7 @@ export type DialogHandle<M> = {
     /**
      * Method to close the dialog.
      */
-    close(): void;
+    close(this: void): void;
 };
 
 /**
@@ -42,11 +42,11 @@ export type DialogProps<M> = {
      * Callback to submit the dialog.
      * @param model - The model to submit with the dialog. This is typically the data collected.
      */
-    onSubmit(model: M): void;
+    onSubmit(this: void, model: M): void;
     /**
      * Cancel the dialog programmatically.
      */
-    onCancel(): void;
+    onCancel(this: void): void;
 };
 
 /**
diff --git a/packages/module-api/src/api/index.ts b/packages/module-api/src/api/index.ts
index b8716bbbce..151d385e16 100644
--- a/packages/module-api/src/api/index.ts
+++ b/packages/module-api/src/api/index.ts
@@ -24,6 +24,8 @@ import { type WidgetLifecycleApi } from "./widget-lifecycle.ts";
 import { type WidgetApi } from "./widget.ts";
 import { type CustomisationsApi } from "./customisations.ts";
 import { type ComposerApi } from "./composer.ts";
+import { type StorageHelperApi } from "./storage-helper.ts";
+import { type SettingsApi } from "./settings.ts";
 
 /**
  * Module interface for modules to implement.
@@ -166,6 +168,17 @@ export interface Api
      */
     readonly composer: ComposerApi;
 
+    /**
+     * Allows modules to access storage helper functions.
+     * @alpha Subject to change.
+     */
+    readonly storageHelper: StorageHelperApi;
+    /**
+     * Allows modules to read application settings.
+     * @alpha Subject to change.
+     */
+    readonly settings: SettingsApi;
+
     /**
      * Create a ReactDOM root for rendering React components.
      * Exposed to allow modules to avoid needing to bundle their own ReactDOM.
diff --git a/packages/module-api/src/api/legacy-modules.ts b/packages/module-api/src/api/legacy-modules.ts
index baaad96b01..a2418c8aa6 100644
--- a/packages/module-api/src/api/legacy-modules.ts
+++ b/packages/module-api/src/api/legacy-modules.ts
@@ -5,7 +5,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore -- optional interface, will gracefully degrade to `any` if `react-sdk-module-api` isn't installed
 import type { ModuleApi, RuntimeModule } from "@matrix-org/react-sdk-module-api";
 
@@ -19,7 +18,6 @@ export type RuntimeModuleConstructor = new (api: ModuleApi) => RuntimeModule;
  * @alpha
  * @deprecated in favour of the new module API
  */
-/* eslint-disable @typescript-eslint/naming-convention */
 export interface LegacyModuleApiExtension {
     /**
      * Register a legacy module based on \@matrix-org/react-sdk-module-api
diff --git a/packages/module-api/src/api/settings.ts b/packages/module-api/src/api/settings.ts
new file mode 100644
index 0000000000..12f4089511
--- /dev/null
+++ b/packages/module-api/src/api/settings.ts
@@ -0,0 +1,22 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/**
+ * API for reading application settings.
+ * @alpha Subject to change.
+ */
+export interface SettingsApi {
+    /**
+     * Gets the value of a setting, computed across all applicable levels
+     * (device, room, account, config, default, etc.).
+     * @param settingName - The name of the setting to read.
+     * @param roomId - Room ID to read a room-scoped value for, or null/undefined for a
+     * non-room-scoped value.
+     * @param excludeDefault - If true, do not fall back to the setting's default value.
+     */
+    getValue<T = any>(settingName: string, roomId?: string | null, excludeDefault?: boolean): T | undefined;
+}
diff --git a/packages/module-api/src/api/storage-helper.ts b/packages/module-api/src/api/storage-helper.ts
new file mode 100644
index 0000000000..a9487ea762
--- /dev/null
+++ b/packages/module-api/src/api/storage-helper.ts
@@ -0,0 +1,20 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/**
+ * API for accessing functions that help with storing things.
+ * @alpha Subject to change.
+ */
+export interface StorageHelperApi {
+    /**
+     * Gets a previously stored pickle key, used for encrypting crypto data.
+     * @param userId - the user ID for the user that the pickle key is for.
+     * @param deviceId - the device ID that the pickle key is for.
+     * @returns the previously stored pickle key, or null if no pickle key has been stored.
+     */
+    getPickleKey(userId: string, deviceId: string): Promise<string | null>;
+}
diff --git a/packages/module-api/src/index.ts b/packages/module-api/src/index.ts
index b573479549..64dee60878 100644
--- a/packages/module-api/src/index.ts
+++ b/packages/module-api/src/index.ts
@@ -35,5 +35,7 @@ export type * from "./api/widget-lifecycle";
 export type * from "./api/widget";
 export type * from "./api/customisations";
 export { UIComponent } from "./api/customisations";
+export type * from "./api/storage-helper";
+export type * from "./api/settings";
 export * from "./api/watchable";
 export type * from "./utils";
diff --git a/packages/module-api/tsconfig.json b/packages/module-api/tsconfig.json
index 79beeb700d..322d3c502a 100644
--- a/packages/module-api/tsconfig.json
+++ b/packages/module-api/tsconfig.json
@@ -10,7 +10,7 @@
         "module": "es2022",
         "moduleResolution": "bundler",
         "types": [],
-        "outDir": "lib",
+        "noEmit": true,
         "jsx": "react-jsx",
         "declarationMap": true,
         "allowImportingTsExtensions": true
diff --git a/packages/module-api/vite.base.ts b/packages/module-api/vite.base.ts
new file mode 100644
index 0000000000..4be510c587
--- /dev/null
+++ b/packages/module-api/vite.base.ts
@@ -0,0 +1,46 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/**
+ * Base vite config for building Element modules
+ */
+
+import { defineConfig, esmExternalRequirePlugin } from "vite";
+import externalGlobals from "rollup-plugin-external-globals";
+
+export default defineConfig({
+    build: {
+        outDir: "lib",
+        target: "esnext",
+        sourcemap: true,
+        rolldownOptions: {
+            plugins: [
+                esmExternalRequirePlugin({
+                    external: ["react"],
+                }),
+            ],
+            output: {
+                globals: {
+                    // Reuse React from the host app
+                    react: "window.React",
+                },
+            },
+        },
+    },
+    plugins: [
+        externalGlobals({
+            // Reuse React from the host app
+            react: "window.React",
+        }),
+    ],
+    define: {
+        // Use production mode for the build as it is tested against production builds of Element Web,
+        // this is required for React JSX versions to be compatible.
+        "process.env.NODE_ENV": "'production'",
+        "process": { env: { NODE_ENV: "production" } },
+    },
+});
diff --git a/packages/module-api/vite.config.ts b/packages/module-api/vite.config.ts
index 5aa3d1bd19..e465f9319e 100644
--- a/packages/module-api/vite.config.ts
+++ b/packages/module-api/vite.config.ts
@@ -5,45 +5,48 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import { dirname, resolve } from "node:path";
+import path from "node:path";
 import { fileURLToPath } from "node:url";
-import { defineConfig, mergeConfig } from "vitest/config";
+import { defineConfig } from "vitest/config";
 import dts from "unplugin-dts/vite";
 import externalGlobals from "rollup-plugin-external-globals";
-import baseConfig from "@element-hq/vite-common/vite.config";
 
 import packageJson from "./package.json" with { type: "json" };
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
-export default mergeConfig(
-    baseConfig,
-    defineConfig({
-        build: {
-            lib: {
-                entry: resolve(__dirname, "src/index.ts"),
-                name: "element-web-plugin-engine",
-                fileName: "element-web-plugin-engine",
+export default defineConfig({
+    build: {
+        lib: {
+            entry: fileURLToPath(import.meta.resolve("./src/index.ts")),
+            name: "element-web-plugin-engine",
+            fileName: "element-web-plugin-engine",
+        },
+        outDir: "lib",
+        target: "esnext",
+        sourcemap: true,
+    },
+    plugins: [
+        dts({
+            bundleTypes: {
+                configPath: "./api-extractor.json",
+                invokeOptions: {
+                    // Always overwrite element-web-module-api.api.md
+                    localBuild: true,
+                    // oxlint-disable-next-line unicorn/prefer-module
+                    typescriptCompilerFolder: path.resolve(require.resolve("@typescript/old"), "../.."),
+                },
             },
-            outDir: "lib",
-            target: "esnext",
-            sourcemap: true,
-        },
-        plugins: [
-            dts(),
-            externalGlobals({
-                // Reuse React from the host app
-                react: "window.React",
-            }),
-        ],
-        define: {
-            // We cannot use `process.env.npm_package_version` as when building element-web with module-api set to `workspace`
-            // this would contain the version of element-web rather than that of the module-api.
-            __VERSION__: JSON.stringify(packageJson.version),
-            // Use production mode for the build as it is tested against production builds of Element Web,
-            // this is required for React JSX versions to be compatible.
-            process: { env: { NODE_ENV: "production" } },
-        },
-    }),
-    true,
-);
+        }),
+        externalGlobals({
+            // Reuse React from the host app
+            react: "window.React",
+        }),
+    ],
+    define: {
+        // We cannot use `process.env.npm_package_version` as when building element-web with module-api set to `workspace`
+        // this would contain the version of element-web rather than that of the module-api.
+        __VERSION__: JSON.stringify(packageJson.version),
+        // Use production mode for the build as it is tested against production builds of Element Web,
+        // this is required for React JSX versions to be compatible.
+        process: { env: { NODE_ENV: "production" } },
+    },
+});
diff --git a/packages/module-api/vitest.config.ts b/packages/module-api/vitest.config.ts
new file mode 100644
index 0000000000..35df061322
--- /dev/null
+++ b/packages/module-api/vitest.config.ts
@@ -0,0 +1,20 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { defineProject } from "vitest/config";
+
+import viteConfig from "./vite.config";
+
+export default defineProject({
+    test: {
+        environment: "node",
+        pool: "threads",
+        globals: false,
+        include: ["src/**/*.test.{ts,tsx}"],
+    },
+    define: viteConfig.define,
+});
diff --git a/packages/playwright-common/Dockerfile b/packages/playwright-common/Dockerfile
index 6480d62602..4f78434f61 100644
--- a/packages/playwright-common/Dockerfile
+++ b/packages/playwright-common/Dockerfile
@@ -1,3 +1,4 @@
+# Expose the argument for use in FROM
 ARG PLAYWRIGHT_VERSION
 FROM mcr.microsoft.com/playwright:v${PLAYWRIGHT_VERSION}-noble
 # Expose the argument to this build stage
diff --git a/packages/playwright-common/docker-entrypoint.sh b/packages/playwright-common/docker-entrypoint.sh
index b615bf24d6..995cfdfaff 100755
--- a/packages/playwright-common/docker-entrypoint.sh
+++ b/packages/playwright-common/docker-entrypoint.sh
@@ -1,2 +1,7 @@
 #!/bin/bash
-exec /usr/bin/playwright run-server --port "$PORT" --host 0.0.0.0
+
+# --unsafe allows clients to pass CLI flags to chromium for things like disabling
+# subpixel rendering which we need for consistent screenshots. 
+# Better might be to specify them statically here but unfortunately that's not an
+# option.
+exec /usr/bin/playwright run-server --port "$PORT" --host 0.0.0.0 --unsafe
diff --git a/packages/playwright-common/package.json b/packages/playwright-common/package.json
index 6effc87d1d..f452ab0ca9 100644
--- a/packages/playwright-common/package.json
+++ b/packages/playwright-common/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@element-hq/element-web-playwright-common",
     "type": "module",
-    "version": "4.0.0",
+    "version": "6.0.0",
     "license": "SEE LICENSE IN README.md",
     "repository": {
         "type": "git",
@@ -24,16 +24,16 @@
     "devDependencies": {
         "@element-hq/element-web-module-api": "workspace:*",
         "@types/lodash-es": "^4.17.12",
-        "typescript": "^6.0.0"
+        "typescript": "catalog:"
     },
     "dependencies": {
         "@axe-core/playwright": "^4.10.1",
-        "@testcontainers/postgresql": "^11.0.0",
+        "@testcontainers/postgresql": "^12.0.0",
         "glob": "^13.0.5",
         "lodash-es": "^4.17.23",
         "mailpit-api": "^2.0.0",
         "strip-ansi": "^7.1.0",
-        "testcontainers": "^11.0.0",
+        "testcontainers": "^12.0.0",
         "wait-on": "^9.0.4",
         "yaml": "^2.7.0"
     },
diff --git a/packages/playwright-common/project.json b/packages/playwright-common/project.json
index bf6ef190c2..84d3364f49 100644
--- a/packages/playwright-common/project.json
+++ b/packages/playwright-common/project.json
@@ -18,7 +18,7 @@
         },
         "docker:prebuild": {
             "cache": true,
-            "command": "echo PLAYWRIGHT_VERSION=$(pnpm --silent -- playwright --version | awk '{print $2}') > .env.docker:build",
+            "command": "PLAYWRIGHT_VERSION=$(pnpm --silent -- playwright --version | awk '{print $2}') && printf '%s\\n' \"PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION\" \"INPUT_TAGS=\\\"type=ref,event=branch\\ntype=raw,enable={{is_default_branch}},value=$PLAYWRIGHT_VERSION\\\"\" > .env.docker:build",
             "inputs": [{ "runtime": "pnpm --silent -- playwright --version" }],
             "outputs": ["{projectRoot}/.env.docker:build"],
             "options": { "cwd": "packages/playwright-common" }
@@ -32,11 +32,10 @@
                 "platforms": ["linux/amd64", "linux/arm64"],
                 "provenance": "true",
                 "sbom": true,
-                "build-args": ["PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION"],
+                "build-args": ["PLAYWRIGHT_VERSION"],
                 "context": "{projectRoot}",
                 "metadata": {
-                    "images": ["ghcr.io/element-hq/element-web/playwright-server"],
-                    "tags": ["type=ref,event=branch", "type=raw,enable={{is_default_branch}},value=$PLAYWRIGHT_VERSION"]
+                    "images": ["ghcr.io/element-hq/element-web/playwright-server"]
                 }
             }
         }
diff --git a/packages/playwright-common/src/@types/playwright-core.d.ts b/packages/playwright-common/src/@types/playwright-core.d.ts
deleted file mode 100644
index 3db7bb9c4c..0000000000
--- a/packages/playwright-common/src/@types/playwright-core.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
-Copyright 2024-2025 New Vector Ltd.
-Copyright 2024 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-declare module "playwright-core/lib/utils" {
-    // This type is not public in playwright-core utils
-    export function sanitizeForFilePath(filePath: string): string;
-}
diff --git a/packages/playwright-common/src/expect/screenshot.ts b/packages/playwright-common/src/expect/screenshot.ts
index 9936ae982b..55eb21518c 100644
--- a/packages/playwright-common/src/expect/screenshot.ts
+++ b/packages/playwright-common/src/expect/screenshot.ts
@@ -16,14 +16,19 @@ import {
     type PageAssertionsToHaveScreenshotOptions,
     type MatcherReturnType,
 } from "@playwright/test";
-import { sanitizeForFilePath } from "playwright-core/lib/utils";
-import { extname } from "node:path";
+import path from "node:path";
 
 import { ANNOTATION } from "../stale-screenshot-reporter.js";
 
+// Taken from playwright utils, but it's not importable
+function sanitizeForFilePath(s: string): string {
+    // oxlint-disable-next-line no-control-regex
+    return s.replace(/[\x00-\x2C\x2E-\x2F\x3A-\x40\x5B-\x60\x7B-\x7F]+/g, "-");
+}
+
 // Based on https://github.com/microsoft/playwright/blob/2b77ed4d7aafa85a600caa0b0d101b72c8437eeb/packages/playwright/src/util.ts#L206C8-L210C2
 function sanitizeFilePathBeforeExtension(filePath: string): string {
-    const ext = extname(filePath);
+    const ext = path.extname(filePath);
     const base = filePath.substring(0, filePath.length - ext.length);
     return sanitizeForFilePath(base) + ext;
 }
@@ -39,41 +44,54 @@ export type Expectations = {
         name: `${string}.png`,
         options?: ToMatchScreenshotOptions,
     ) => Promise<MatcherReturnType>;
+    toMatchScreenshotDontOverride: (
+        this: ExpectMatcherState,
+        receiver: Page | Locator,
+        name: `${string}.png`,
+        options?: ToMatchScreenshotOptions,
+    ) => Promise<MatcherReturnType>;
+};
+
+const toMatchScreenshot = async (receiver: Page | Locator, name: string, options?: ToMatchScreenshotOptions) => {
+    const testInfo = test.info();
+    if (!testInfo) throw new Error(`toMatchScreenshot() must be called during the test`);
+
+    if (!testInfo.tags.includes("@screenshot")) {
+        throw new Error("toMatchScreenshot() must be used in a test tagged with @screenshot");
+    }
+
+    const page = "page" in receiver ? receiver.page() : receiver;
+
+    let style: ElementHandle<Element> | undefined;
+    if (options?.css) {
+        // We add a custom style tag before taking screenshots
+        style = (await page.addStyleTag({
+            content: options.css,
+        })) as ElementHandle<Element>;
+    }
+
+    const screenshotName = sanitizeFilePathBeforeExtension(name);
+    await baseExpect(receiver).toHaveScreenshot(screenshotName, options);
+
+    await style?.evaluate((tag) => tag.remove());
+
+    testInfo.annotations.push({
+        type: ANNOTATION,
+        description: testInfo.snapshotPath(screenshotName),
+    });
+
+    return { pass: true, message: (): string => "", name: "toMatchScreenshot" };
 };
 
 /**
  * Provides an upgrade to the `toHaveScreenshot` expectation.
  * Unfortunately, we can't just extend the existing `toHaveScreenshot` expectation
+ *
+ * Awfulness: we also provide a copy of the same function under a different name because, for reasons
+ * I couldn't fully say, overriding a function with one of the same name causes the base excpect function
+ * to actually point to the overridden one, causing infinite recursion, so there you go, everything is great.
  */
 export const expect = baseExpect.extend<Expectations>({
-    async toMatchScreenshot(receiver, name, options) {
-        const testInfo = test.info();
-        if (!testInfo) throw new Error(`toMatchScreenshot() must be called during the test`);
-
-        if (!testInfo.tags.includes("@screenshot")) {
-            throw new Error("toMatchScreenshot() must be used in a test tagged with @screenshot");
-        }
-
-        const page = "page" in receiver ? receiver.page() : receiver;
-
-        let style: ElementHandle<Element> | undefined;
-        if (options?.css) {
-            // We add a custom style tag before taking screenshots
-            style = (await page.addStyleTag({
-                content: options.css,
-            })) as ElementHandle<Element>;
-        }
-
-        const screenshotName = sanitizeFilePathBeforeExtension(name);
-        await baseExpect(receiver).toHaveScreenshot(screenshotName, options);
-
-        await style?.evaluate((tag) => tag.remove());
-
-        testInfo.annotations.push({
-            type: ANNOTATION,
-            description: testInfo.snapshotPath(screenshotName),
-        });
-
-        return { pass: true, message: (): string => "", name: "toMatchScreenshot" };
-    },
+    toMatchScreenshot,
+    toMatchScreenshotDontOverride: toMatchScreenshot,
 });
diff --git a/packages/playwright-common/src/fixtures/axe.ts b/packages/playwright-common/src/fixtures/axe.ts
index 6f99b489c0..c2f5c50875 100644
--- a/packages/playwright-common/src/fixtures/axe.ts
+++ b/packages/playwright-common/src/fixtures/axe.ts
@@ -9,14 +9,16 @@ Please see LICENSE files in the repository root for full details.
 import { test as base } from "@playwright/test";
 import { AxeBuilder } from "@axe-core/playwright";
 
-// This fixture is useful for simple component library tests that won't want any extra services like a homeserver, so we
-// explicitly avoid pulling anything more than playwright's base fixtures in.
-export const test = base.extend<{
+export type TestFixtures = {
     /**
      * AxeBuilder instance for the current page
      */
     axe: AxeBuilder;
-}>({
+};
+
+// This fixture is useful for simple component library tests that won't want any extra services like a homeserver, so we
+// explicitly avoid pulling anything more than playwright's base fixtures in.
+export const test = base.extend<TestFixtures>({
     axe: async ({ page }, use) => {
         const builder = new AxeBuilder({ page });
         await use(builder);
diff --git a/packages/playwright-common/src/fixtures/panel.ts b/packages/playwright-common/src/fixtures/panel.ts
new file mode 100644
index 0000000000..9bd8dda75c
--- /dev/null
+++ b/packages/playwright-common/src/fixtures/panel.ts
@@ -0,0 +1,50 @@
+/*
+ * Copyright 2026 Element Creations 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-core";
+import { test as base } from "./services.js";
+
+/**
+ * This is the width the panel by default.
+ * Rounding this number to a whole number would mean updating a whole
+ * bunch of screenshots.
+ */
+const LEFT_PANEL_WIDTH = "368.6875px";
+
+export type TestFixtures = {
+    /**
+     * Whether the left panel should have its width fixed.
+     * This is done because the library that we use for rendering collapsible
+     * panels uses math to calculate the width which can sometimes leads to +/-1px
+     * difference. While this does not matter to the user, it can lead to screenshot
+     * tests failing.
+     * Defaults to true, should be set to false via {@link base.use} when you want to test the collapse
+     * behaviour.
+     */
+    lockLeftPanelWidth: boolean;
+};
+
+export const test = base.extend<TestFixtures>({
+    lockLeftPanelWidth: true,
+    page: async ({ lockLeftPanelWidth, page }, use) => {
+        const listener = async (page: Page) => {
+            try {
+                await page.addStyleTag({
+                    content: `
+                        #left-panel {
+                            flex: 0 0 ${LEFT_PANEL_WIDTH} !important;
+                        }
+                `,
+                });
+            } catch (e) {
+                console.error("Failed to add style tag to stabilize left panel", e);
+            }
+        };
+        if (lockLeftPanelWidth) page.on("load", listener);
+        await use(page);
+        if (lockLeftPanelWidth) page.off("load", listener);
+    },
+});
diff --git a/packages/playwright-common/src/fixtures/services.ts b/packages/playwright-common/src/fixtures/services.ts
index de5e9af680..3dcdf12e21 100644
--- a/packages/playwright-common/src/fixtures/services.ts
+++ b/packages/playwright-common/src/fixtures/services.ts
@@ -84,7 +84,6 @@ export interface Services {
 
 export const test = base.extend<TestFixtures, WorkerOptions & Services>({
     logger: [
-        // eslint-disable-next-line no-empty-pattern
         async ({}, use) => {
             const logger = new Logger();
             await use(logger);
@@ -92,7 +91,6 @@ export const test = base.extend<TestFixtures, WorkerOptions & Services>({
         { scope: "worker" },
     ],
     network: [
-        // eslint-disable-next-line no-empty-pattern
         async ({}, use) => {
             const network = await new Network().start();
             await use(network);
@@ -152,7 +150,6 @@ export const test = base.extend<TestFixtures, WorkerOptions & Services>({
         { scope: "worker" },
     ],
     mas: [
-        // eslint-disable-next-line no-empty-pattern
         async ({}, use) => {
             // we stub the mas fixture to allow `homeserver` to depend on it to ensure
             // when it is specified by `masHomeserver` it is started before the homeserver
diff --git a/packages/playwright-common/src/fixtures/toasts.ts b/packages/playwright-common/src/fixtures/toasts.ts
deleted file mode 100644
index cf6f6c8bb2..0000000000
--- a/packages/playwright-common/src/fixtures/toasts.ts
+++ /dev/null
@@ -1,163 +0,0 @@
-/*
- * Copyright 2026 Element Creations 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 { expect, type Locator, type Page } from "@playwright/test";
-
-// We want to avoid using `mergeTests` in index.ts because it drops useful type
-// information about the fixtures. Instead, we add `services` into our fixture
-// suite by using its `test` as a base, so that there is a linear hierarchy.
-import { test as base } from "./services.js";
-
-// This fixture provides convenient handling of Element Web's toasts.
-export const test = base.extend<{
-    /**
-     * Convenience functions for handling toasts.
-     */
-    toasts: Toasts;
-}>({
-    toasts: async ({ page }, use) => {
-        const toasts = new Toasts(page);
-        await use(toasts);
-    },
-});
-
-class Toasts {
-    public constructor(public readonly page: Page) {}
-
-    /**
-     * Assert that no toasts exist.
-     */
-    public async assertNoToasts(): Promise<void> {
-        await expect(this.page.locator(".mx_Toast_toast")).not.toBeVisible();
-    }
-
-    /**
-     * Return the toast with the supplied title. Fail or return null if it does
-     * not exist.
-     *
-     * If `required` is false, you should supply a relatively short `timeout`
-     * (e.g. 2000, meaning 2 seconds) to prevent your test taking too long.
-     *
-     * @param title - Expected title of the toast.
-     * @param timeout - Time in ms before we give up and decide the toast does
-     *                  not exist. If `required` is true, defaults to `timeout`
-     *                  in `TestConfig.expect`. Otherwise, defaults to 2000 (2
-     *                  seconds).
-     * @param required - If true, fail the test (throw an exception) if the
-     *                   toast is not visible. Otherwise, just return null if
-     *                   the toast is not visible.
-     * @returns the Locator for the matching toast, or null if it is not
-     *          visible. (null will only be returned if `required` is false.)
-     */
-    public async getToast(title: string, timeout?: number, required?: true): Promise<Locator>;
-    public async getToast(title: string, timeout: number | undefined, required: false): Promise<Locator | null>;
-    public async getToast(title: string, timeout?: number, required = true): Promise<Locator | null> {
-        const toast = this.page.locator(".mx_Toast_toast", { hasText: title }).first();
-
-        if (required) {
-            await expect(toast).toBeVisible({ timeout });
-            return toast;
-        } else {
-            // If we don't set a timeout, waitFor will wait forever. Since
-            // required is false, we definitely don't want to wait forever.
-            timeout = timeout ?? 2000;
-
-            try {
-                await toast.waitFor({ state: "visible", timeout });
-                return toast;
-            } catch {
-                return null;
-            }
-        }
-    }
-
-    /**
-     * Accept the toast with the supplied title, or fail if it does not exist.
-     *
-     * Only works if this toast is at the top of the stack of toasts.
-     *
-     * @param title - Expected title of the toast.
-     */
-    public async acceptToast(title: string): Promise<void> {
-        return await clickToastButton(this, title, "primary");
-    }
-
-    /**
-     * Accept the toast with the supplied title, if it exists, or return after 2
-     * seconds if it is not found.
-     *
-     * Only works if this toast is at the top of the stack of toasts.
-     *
-     * @param title - Expected title of the toast.
-     */
-    public async acceptToastIfExists(title: string): Promise<void> {
-        return await clickToastButton(this, title, "primary", 2000, false);
-    }
-
-    /**
-     * Reject the toast with the supplied title, or fail if it does not exist.
-     *
-     * Only works if this toast is at the top of the stack of toasts.
-     *
-     * @param title - Expected title of the toast.
-     */
-    public async rejectToast(title: string): Promise<void> {
-        return await clickToastButton(this, title, "secondary");
-    }
-
-    /**
-     * Reject the toast with the supplied title, if it exists, or return after 2
-     * seconds if it is not found.
-     *
-     * Only works if this toast is at the top of the stack of toasts.
-     *
-     * @param title - Expected title of the toast.
-     */
-    public async rejectToastIfExists(title: string): Promise<void> {
-        return await clickToastButton(this, title, "secondary", 2000, false);
-    }
-}
-
-/**
- * Find the toast with the supplied title and click a button on it.
- *
- * Only works if this toast is at the top of the stack of toasts.
- *
- * If `required` is false, you should supply a relatively short `timeout`
- * (e.g. 2000, meaning 2 seconds) to prevent your test taking too long.
- *
- * @param toasts - A Toasts instance.
- * @param title - Expected title of the toast.
- * @param button - Which button to click on the toast. Allowed values are
- *                 "primary", which will accept the toast, or "secondary",
- *                 which will reject it.
- * @param timeout - Time in ms before we give up and decide the toast does
- *                  not exist. If `required` is true, defaults to `timeout`
- *                  in `TestConfig.expect`. Otherwise, defaults to 2000 (2
- *                  seconds).
- * @param required - If true, fail the test (throw an exception) if the
- *                   toast is not visible. Otherwise, just return after
- *                   `timeout` if the toast is not visible.
- */
-async function clickToastButton(
-    toasts: Toasts,
-    title: string,
-    button: "primary" | "secondary",
-    timeout?: number,
-    required = true,
-): Promise<void> {
-    let toast: Locator | null;
-    if (required) {
-        toast = await toasts.getToast(title, timeout, true);
-    } else {
-        toast = await toasts.getToast(title, timeout, false);
-    }
-
-    if (toast) {
-        await toast.locator(`.mx_Toast_buttons button[data-kind="${button}"]`).click();
-    }
-}
diff --git a/packages/playwright-common/src/fixtures/user.ts b/packages/playwright-common/src/fixtures/user.ts
index 61f8d70105..a981b80797 100644
--- a/packages/playwright-common/src/fixtures/user.ts
+++ b/packages/playwright-common/src/fixtures/user.ts
@@ -10,12 +10,14 @@ import { type Page } from "@playwright/test";
 import { sample, uniqueId } from "lodash-es";
 
 // We want to avoid using `mergeTests` in index.ts because it drops useful type
-// information about the fixtures. Instead, we add `toasts` into our fixture
+// information about the fixtures. Instead, we add `services` into our fixture
 // suite by using its `test` as a base, so that there is a linear hierarchy.
-import { test as base } from "./toasts.js";
+import { test as base } from "./panel.js";
 import { type Credentials } from "../utils/api.js";
 
-/** Adds an initScript to the given page which will populate localStorage appropriately so that Element will use the given credentials. */
+/**
+ * Adds an initScript to the given page which will populate localStorage appropriately so that Element will use the given credentials.
+ */
 export async function populateLocalStorageWithCredentials(page: Page, credentials: Credentials) {
     await page.addInitScript(
         ({ credentials }) => {
@@ -27,6 +29,10 @@ export async function populateLocalStorageWithCredentials(page: Page, credential
             window.localStorage.setItem("mx_has_pickle_key", "false");
             window.localStorage.setItem("mx_has_access_token", "true");
 
+            if (credentials.oauthClientId) {
+                window.localStorage.setItem("mx_oidc_client_id", credentials.oauthClientId);
+            }
+
             window.localStorage.setItem(
                 "mx_local_settings",
                 JSON.stringify({
@@ -41,7 +47,7 @@ export async function populateLocalStorageWithCredentials(page: Page, credential
     );
 }
 
-export const test = base.extend<{
+export interface TestFixtures {
     /**
      * The displayname to use for the user registered in {@link #credentials}.
      *
@@ -71,7 +77,9 @@ export const test = base.extend<{
      * app.
      */
     user: Credentials;
-}>({
+}
+
+export const test = base.extend<TestFixtures>({
     displayName: undefined,
 
     // We don't directly depend upon the `context` fixture, but we do need to make sure that it has been run
diff --git a/packages/playwright-common/src/flaky-reporter.ts b/packages/playwright-common/src/flaky-reporter.ts
index cebfee7702..4602cd9a68 100644
--- a/packages/playwright-common/src/flaky-reporter.ts
+++ b/packages/playwright-common/src/flaky-reporter.ts
@@ -24,6 +24,7 @@ type PaginationLinks = {
     first?: string;
 };
 
+// oxlint-disable-next-line no-control-regex
 const ANSI_COLOUR_REGEX = /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g;
 
 // We see quite a few test flakes which are caused by the app exploding
@@ -39,7 +40,7 @@ class FlakyReporter implements Reporter {
 
     public onTestEnd(test: TestCase): void {
         // Ignores flakes on Dendrite and Pinecone as they have their own flakes we do not track
-        if (["Dendrite", "Pinecone"].includes(test.parent.project()!.name!)) return;
+        if (["Dendrite", "Pinecone"].includes(test.parent.project()!.name)) return;
 
         if (test.outcome() === "flaky") {
             const failures: string[] = [];
@@ -139,7 +140,8 @@ class FlakyReporter implements Reporter {
             console.log(flake);
         }
 
-        const { GITHUB_TOKEN, GITHUB_API_URL, GITHUB_SERVER_URL, GITHUB_REPOSITORY, GITHUB_RUN_ID } = process.env;
+        const { GITHUB_TOKEN, GITHUB_API_URL, GITHUB_SERVER_URL, GITHUB_REPOSITORY, GITHUB_RUN_ID, GITHUB_EVENT_NAME } =
+            process.env;
         if (!GITHUB_TOKEN) return;
 
         const issues = await this.getAllIssues();
@@ -147,13 +149,17 @@ class FlakyReporter implements Reporter {
             const title = ISSUE_TITLE_PREFIX + "`" + flake + "`";
             const existingIssue = issues.find((issue) => issue.title === title);
             const headers = { Authorization: `Bearer ${GITHUB_TOKEN}` };
-            const body = `${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/actions/runs/${GITHUB_RUN_ID}`;
+            let body = `${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/actions/runs/${GITHUB_RUN_ID}`;
+
+            if (GITHUB_EVENT_NAME === "merge_group") {
+                body += " (merge queue run, may be a false positive)";
+            }
 
             const labels = [LABEL, ...results.map((test) => `${LABEL}-${test.parent.project()?.name}`)];
 
             if (existingIssue) {
                 console.log(`Found issue ${existingIssue.number} for ${flake}, adding comment...`);
-                // Ensure that the test is open
+                // Ensure that the issue is open
                 await fetch(existingIssue.url, {
                     method: "PATCH",
                     headers,
diff --git a/packages/playwright-common/src/index.ts b/packages/playwright-common/src/index.ts
index afc92244e4..8fbf36e212 100644
--- a/packages/playwright-common/src/index.ts
+++ b/packages/playwright-common/src/index.ts
@@ -6,13 +6,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import { type Config as BaseConfig } from "@element-hq/element-web-module-api";
+import { type Config } from "@element-hq/element-web-module-api";
 
 import { test as base } from "./fixtures/index.js";
 import { routeConfigJson } from "./utils/config_json.js";
 
 export * from "./utils/config_json.js";
 export * from "./utils/context.js";
+export * from "./utils/release_accouncement.js";
+export * from "./utils/toasts.js";
 
 export { populateLocalStorageWithCredentials } from "./fixtures/user.js";
 
@@ -20,27 +22,11 @@ export { populateLocalStorageWithCredentials } from "./fixtures/user.js";
 // See https://playwright.dev/docs/service-workers-experimental#how-to-enable
 process.env["PW_EXPERIMENTAL_SERVICE_WORKER_NETWORK_EVENTS"] = "1";
 
-// We extend the Module API Config interface so that all modules
-// which use declaration merging will have their config types correctly applied.
-export interface Config extends BaseConfig {
-    default_server_config: {
-        "m.homeserver"?: {
-            base_url: string;
-            server_name?: string;
-        };
-        "m.identity_server"?: {
-            base_url: string;
-            server_name?: string;
-        };
-    };
-    enable_presence_by_hs_url?: Record<string, boolean>;
-    setting_defaults: Record<string, unknown>;
-    map_style_url?: string;
-    features: Record<string, boolean>;
-    modules?: string[];
-}
+export type { Config };
 
 // This is deliberately quite a minimal config.json, so that we can test that the default settings actually work.
+// We use the Module API Config interface so that all modules
+// which use declaration merging will have their config types correctly applied.
 export const CONFIG_JSON: Partial<Config> = {
     default_server_config: {},
 
@@ -66,16 +52,6 @@ export interface TestFixtures {
 
     labsFlags: string[];
     disablePresence: boolean;
-    /**
-     * Whether the left panel should have its width fixed.
-     * This is done because the library that we use for rendering collapsible
-     * panels uses math to calculate the width which can sometimes leads to +/-1px
-     * difference. While this does not matter to the user, it can lead to screenshot
-     * tests failing.
-     * Defaults to true, should be set to false via {@link base.use} when you want to test the collapse
-     * behaviour.
-     */
-    lockLeftPanelWidth: boolean;
 }
 
 export const test = base.extend<TestFixtures>({
@@ -83,18 +59,8 @@ export const test = base.extend<TestFixtures>({
     config: async ({}, use) => use({}),
     labsFlags: async ({}, use) => use([]),
     disablePresence: async ({}, use) => use(false),
-    lockLeftPanelWidth: true,
-    page: async ({ homeserver, context, page, config, labsFlags, disablePresence, lockLeftPanelWidth }, use) => {
+    page: async ({ homeserver, context, page, config, labsFlags, disablePresence }, use) => {
         await routeConfigJson(context, homeserver.baseUrl, config, labsFlags, disablePresence);
-        if (lockLeftPanelWidth) {
-            await page.addStyleTag({
-                content: `
-                        #left-panel {
-                            flex: 0 0 369.6875px !important;
-                        }
-                `,
-            });
-        }
         await use(page);
     },
 });
diff --git a/packages/playwright-common/src/testcontainers/mas-config.ts b/packages/playwright-common/src/testcontainers/mas-config.ts
index 1f3a911ecd..b21481d190 100644
--- a/packages/playwright-common/src/testcontainers/mas-config.ts
+++ b/packages/playwright-common/src/testcontainers/mas-config.ts
@@ -1,3 +1,4 @@
+// oxlint-disable-next-line unicorn/no-abusive-eslint-disable
 /* eslint-disable */
 /**
  * This file was automatically generated by json-schema-to-typescript.
diff --git a/packages/playwright-common/src/testcontainers/mas.ts b/packages/playwright-common/src/testcontainers/mas.ts
index 8e64db59f8..b879ec1f0a 100644
--- a/packages/playwright-common/src/testcontainers/mas.ts
+++ b/packages/playwright-common/src/testcontainers/mas.ts
@@ -139,6 +139,12 @@ const DEFAULT_CONFIG = {
             per_second: 1,
         },
     },
+    clients: [
+        {
+            client_id: "01ARZ3NDEKTSV4RRFFQ69G5FAV",
+            client_auth_method: "none",
+        },
+    ],
 } satisfies MasConfig;
 
 /**
@@ -209,6 +215,7 @@ export class MatrixAuthenticationServiceContainer extends GenericContainer {
             `http://localhost:${port}`,
             this.args,
             this.config.matrix.secret,
+            this.config.clients![0].client_id,
         );
     }
 }
@@ -224,6 +231,7 @@ export class StartedMatrixAuthenticationServiceContainer extends AbstractStarted
         public readonly baseUrl: string,
         private readonly args: string[],
         public readonly sharedSecret: string,
+        public readonly staticClientId: string,
     ) {
         super(container);
     }
diff --git a/packages/playwright-common/src/testcontainers/synapse.ts b/packages/playwright-common/src/testcontainers/synapse.ts
index 65d92c0ab9..795b939046 100644
--- a/packages/playwright-common/src/testcontainers/synapse.ts
+++ b/packages/playwright-common/src/testcontainers/synapse.ts
@@ -25,7 +25,174 @@ import { type StartedMatrixAuthenticationServiceContainer } from "./mas.js";
 import { Api, ClientServerApi, type Verb, type Credentials } from "../utils/api.js";
 import { type StartedMailpitContainer } from "./mailpit.js";
 
-const DEFAULT_CONFIG = {
+/**
+ * Incomplete type describing the configuration for a Synapse homeserver
+ */
+export interface SynapseConfig {
+    server_name: string;
+    public_baseurl: string;
+    pid_file: string;
+    web_client: boolean;
+    soft_file_limit: number;
+    log_config: string;
+    listeners: Array<{
+        port: number;
+        tls: boolean;
+        bind_addresses: string[];
+        type: string;
+        x_forwarded: boolean;
+        resources: Array<{
+            names: string[];
+            compress: boolean;
+        }>;
+    }>;
+    database: {
+        name: string;
+        args: {
+            database: string;
+        };
+    };
+    rc_messages_per_second: number;
+    rc_message_burst_count: number;
+    rc_registration: {
+        per_second: number;
+        burst_count: number;
+    };
+    rc_joins: {
+        local: {
+            per_second: number;
+            burst_count: number;
+        };
+        remote: {
+            per_second: number;
+            burst_count: number;
+        };
+    };
+    rc_joins_per_room: {
+        per_second: number;
+        burst_count: number;
+    };
+    rc_3pid_validation: {
+        per_second: number;
+        burst_count: number;
+    };
+    rc_invites: {
+        per_room: {
+            per_second: number;
+            burst_count: number;
+        };
+        per_user: {
+            per_second: number;
+            burst_count: number;
+        };
+    };
+    rc_login: {
+        address: {
+            per_second: number;
+            burst_count: number;
+        };
+        account: {
+            per_second: number;
+            burst_count: number;
+        };
+        failed_attempts: {
+            per_second: number;
+            burst_count: number;
+        };
+    };
+    rc_room_creation: {
+        per_second: number;
+        burst_count: number;
+    };
+    media_store_path: string;
+    max_upload_size: string;
+    max_image_pixels: string;
+    dynamic_thumbnails: boolean;
+    enable_registration: boolean;
+    enable_registration_without_verification: boolean;
+    disable_msisdn_registration: boolean;
+    registrations_require_3pid: string[];
+    enable_metrics: boolean;
+    report_stats: boolean;
+    registration_shared_secret: string;
+    macaroon_secret_key: string;
+    form_secret: string;
+    signing_key_path: string;
+    trusted_key_servers: never[];
+    password_config: {
+        enabled: boolean;
+    };
+    ui_auth?: {
+        session_timeout: `${number}s`;
+    };
+    background_updates: {
+        min_batch_size: number;
+        sleep_duration_ms: number;
+    };
+    enable_authenticated_media: boolean;
+    email?: {
+        enable_notifs: boolean;
+        smtp_host: string;
+        smtp_port: number;
+        smtp_user: string;
+        smtp_pass: string;
+        require_transport_security: false;
+        notif_from: string;
+        app_name: string;
+        notif_template_html: string;
+        notif_template_text: string;
+        notif_for_new_users: boolean;
+        client_base_url: string;
+    };
+    user_consent?: {
+        template_dir: string;
+        version: string;
+        server_notice_content: Record<string, unknown>;
+        send_server_notice_to_guests: boolean;
+        block_events_error: string;
+        require_at_registration: boolean;
+    };
+    server_notices?: {
+        system_mxid_localpart: string;
+        system_mxid_display_name: string;
+        system_mxid_avatar_url: string;
+        room_name: string;
+    };
+    allow_guest_access: boolean;
+    experimental_features: Record<string, boolean>;
+    matrix_rtc?: {
+        transports: Array<{ type: string; [field: string]: string }>;
+    };
+    oidc_providers: unknown[];
+    serve_server_wellknown: boolean;
+    presence: {
+        enabled: boolean;
+        include_offline_users_on_sync: boolean;
+    };
+    room_list_publication_rules: Array<{ action: string }>;
+    modules: Array<{ module: string; config?: Record<string, unknown> }>;
+    matrix_authentication_service?: {
+        enabled?: boolean;
+        endpoint?: string;
+        secret?: string | null;
+        secret_path?: string | null;
+    };
+    /**
+     * Server-wide retention rules.
+     * @see https://element-hq.github.io/synapse/latest/usage/configuration/config_documentation.html?highlight=retent#retention
+     */
+    retention?: {
+        enabled: boolean;
+        default_policy?: {
+            min_lifetime?: string;
+            max_lifetime?: string;
+        };
+        allowed_lifetime_min?: string;
+        allowed_lifetime_max?: string;
+    };
+}
+
+const DEFAULT_CONFIG: SynapseConfig = {
     server_name: "localhost",
     public_baseurl: "", // set by start method
     pid_file: "/homeserver.pid",
@@ -128,54 +295,15 @@ const DEFAULT_CONFIG = {
     password_config: {
         enabled: true,
     },
-    ui_auth: {},
     background_updates: {
         // Inhibit background updates as this Synapse isn't long-lived
         min_batch_size: 100000,
         sleep_duration_ms: 100000,
     },
     enable_authenticated_media: true,
-    email: undefined as
-        | undefined
-        | {
-              enable_notifs: boolean;
-              smtp_host: string;
-              smtp_port: number;
-              smtp_user: string;
-              smtp_pass: string;
-              require_transport_security: false;
-              notif_from: string;
-              app_name: string;
-              notif_template_html: string;
-              notif_template_text: string;
-              notif_for_new_users: boolean;
-              client_base_url: string;
-          },
-    user_consent: undefined as
-        | undefined
-        | {
-              template_dir: string;
-              version: string;
-              server_notice_content: Record<string, unknown>;
-              send_server_notice_to_guests: boolean;
-              block_events_error: string;
-              require_at_registration: boolean;
-          },
-    server_notices: undefined as
-        | undefined
-        | {
-              system_mxid_localpart: string;
-              system_mxid_display_name: string;
-              system_mxid_avatar_url: string;
-              room_name: string;
-          },
     allow_guest_access: false,
-    experimental_features: {} as Record<string, boolean>,
-    matrix_rtc: undefined as
-        | undefined
-        | {
-              transports: Array<{ type: string; [field: string]: string }>;
-          },
+    experimental_features: {},
+    matrix_rtc: undefined,
     oidc_providers: [],
     serve_server_wellknown: true,
     presence: {
@@ -183,22 +311,9 @@ const DEFAULT_CONFIG = {
         include_offline_users_on_sync: true,
     },
     room_list_publication_rules: [{ action: "allow" }],
-    modules: [] as Array<{ module: string; config?: Record<string, unknown> }>,
-    matrix_authentication_service: undefined as
-        | undefined
-        | {
-              enabled?: boolean;
-              endpoint?: string;
-              secret?: string | null;
-              secret_path?: string | null;
-          },
+    modules: [],
 };
 
-/**
- * Incomplete type describing the configuration for a Synapse homeserver
- */
-export type SynapseConfig = typeof DEFAULT_CONFIG;
-
 /**
  * A Synapse testcontainer
  *
@@ -514,7 +629,7 @@ export class StartedSynapseWithMasContainer extends StartedSynapseContainer {
      */
     public async registerUser(username: string, password: string, displayName?: string): Promise<Credentials> {
         const registered = await this.mas.registerUser(username, password, displayName);
-        return { ...registered, homeserverBaseUrl: this.baseUrl };
+        return { ...registered, homeserverBaseUrl: this.baseUrl, oauthClientId: this.mas.staticClientId };
     }
 
     /**
diff --git a/packages/playwright-common/src/utils/api.ts b/packages/playwright-common/src/utils/api.ts
index 8ce6f2f5dc..7f7641fcb9 100644
--- a/packages/playwright-common/src/utils/api.ts
+++ b/packages/playwright-common/src/utils/api.ts
@@ -74,6 +74,9 @@ export interface Credentials {
     /** The domain part of the user's matrix ID. */
     homeServer: string;
 
+    /** The OAuth2 Client ID used by this client for native OAuth2 sessions **/
+    oauthClientId?: string;
+
     password: string | null; // null for password-less users
     displayName?: string;
     username: string; // the localpart of the userId
diff --git a/packages/playwright-common/src/utils/release_accouncement.ts b/packages/playwright-common/src/utils/release_accouncement.ts
new file mode 100644
index 0000000000..c297ca1362
--- /dev/null
+++ b/packages/playwright-common/src/utils/release_accouncement.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2026 Element Creations 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-core";
+
+/**
+ * Close the release announcement with the given name.
+ * @param page The Playwright page instance.
+ * @param name The name of the release announcement dialog.
+ */
+export async function closeReleaseAnnouncement(page: Page, name: string): Promise<void> {
+    await page.getByRole("dialog", { name }).getByRole("button", { name: "OK" }).click();
+}
diff --git a/packages/playwright-common/src/utils/toasts.ts b/packages/playwright-common/src/utils/toasts.ts
new file mode 100644
index 0000000000..2bd9f0f59c
--- /dev/null
+++ b/packages/playwright-common/src/utils/toasts.ts
@@ -0,0 +1,161 @@
+/*
+ * Copyright 2026 Element Creations 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 { expect, type Locator, type Page } from "@playwright/test";
+
+/**
+ * Assert that no toasts exist.
+ *
+ * @public
+ * @param page - Playwright page we are working with.
+ */
+export async function assertNoToasts(page: Page): Promise<void> {
+    await expect(page.locator(".mx_Toast_toast")).not.toBeVisible();
+}
+
+/**
+ * Find the toast with the supplied title. Fail if it does not exist.
+ *
+ * @public
+ * @param page - Playwright page we are working with.
+ * @param title - Expected title of the toast.
+ * @param timeout - Time in ms before we give up and decide the toast does
+ *                  not exist.
+ * @returns the Locator for the matching toast.
+ */
+export async function getToast(page: Page, title: string, timeout?: number): Promise<Locator> {
+    const toast = page.locator(".mx_Toast_toast", { hasText: title }).first();
+    await expect(toast).toBeVisible({ timeout });
+    return toast;
+}
+
+/**
+ * Find the toast with the supplied title, or return null if not found.
+ *
+ * @public
+ * @param page - Playwright page we are working with.
+ * @param title - Expected title of the toast.
+ * @param timeout - Time in ms before we give up and decide the toast does
+ *                  not exist.
+ * @returns the Locator for the matching toast, or null if it does not exist.
+ */
+export async function getToastIfExists(page: Page, title: string, timeout = 2000): Promise<Locator | null> {
+    const toast = page.locator(".mx_Toast_toast", { hasText: title }).first();
+    try {
+        await toast.waitFor({ state: "visible", timeout });
+        return toast;
+    } catch {
+        return null;
+    }
+}
+
+/**
+ * Accept the toast with the supplied title, or fail if it does not exist.
+ *
+ * Only works if this toast is at the top of the stack of toasts.
+ *
+ * @public
+ * @param page - Playwright page we are working with.
+ * @param title - Expected title of the toast.
+ */
+export async function acceptToast(page: Page, title: string): Promise<void> {
+    await clickToastButton(page, title, "primary");
+}
+
+/**
+ * Accept the toast with the supplied title, if it exists, or return after 2
+ * seconds if it is not found.
+ *
+ * Only works if this toast is at the top of the stack of toasts.
+ *
+ * @public
+ * @param page - Playwright page we are working with.
+ * @param title - Expected title of the toast.
+ *
+ * @returns true if the toast was found and the button was clicked, or false if the toast was not found (always returns true if `required` is true).
+ */
+export async function acceptToastIfExists(page: Page, title: string): Promise<boolean> {
+    return await clickToastButton(page, title, "primary", 2000, false);
+}
+
+/**
+ * Reject the toast with the supplied title, or fail if it does not exist.
+ *
+ * Only works if this toast is at the top of the stack of toasts.
+ *
+ * @public
+ * @param page - Playwright page we are working with.
+ * @param title - Expected title of the toast.
+ */
+export async function rejectToast(page: Page, title: string): Promise<void> {
+    await clickToastButton(page, title, "secondary");
+}
+
+/**
+ * Reject the toast with the supplied title, if it exists, or return after 2
+ * seconds if it is not found.
+ *
+ * Only works if this toast is at the top of the stack of toasts.
+ *
+ * @public
+ * @param page - Playwright page we are working with.
+ * @param title - Expected title of the toast.
+ * @param options.timeout - Time in ms before we give up and decide the toast does not exist.
+ *
+ * @returns true if the toast was found and the button was clicked, or false if the toast was not found (always returns true if `required` is true).
+ */
+export async function rejectToastIfExists(
+    page: Page,
+    title: string,
+    options: { timeout?: number } = {},
+): Promise<boolean> {
+    const { timeout = 2000 } = options;
+    return await clickToastButton(page, title, "secondary", timeout, false);
+}
+
+/**
+ * Find the toast with the supplied title and click a button on it.
+ *
+ * Only works if this toast is at the top of the stack of toasts.
+ *
+ * If `required` is false, you should supply a relatively short `timeout`
+ * (e.g. 2000, meaning 2 seconds) to prevent your test taking too long.
+ *
+ * @param page - Playwright page we are working with.
+ * @param title - Expected title of the toast.
+ * @param button - Which button to click on the toast. Allowed values are
+ *                 "primary", which will accept the toast, or "secondary",
+ *                 which will reject it.
+ * @param timeout - Time in ms before we give up and decide the toast does
+ *                  not exist. If `required` is true, defaults to `timeout`
+ *                  in `TestConfig.expect`. Otherwise, defaults to 2000 (2
+ *                  seconds).
+ * @param required - If true, fail the test (throw an exception) if the
+ *                   toast is not visible. Otherwise, just return after
+ *                   `timeout` if the toast is not visible.
+ * @returns true if the toast was found and the button was clicked, or false if the toast was not found (always returns true if `required` is true).
+ */
+async function clickToastButton(
+    page: Page,
+    title: string,
+    button: "primary" | "secondary",
+    timeout?: number,
+    required = true,
+): Promise<boolean> {
+    let toast: Locator | null;
+    if (required) {
+        toast = await getToast(page, title, timeout);
+    } else {
+        toast = await getToastIfExists(page, title, timeout);
+    }
+
+    if (toast) {
+        await toast.locator(`.mx_Toast_buttons button[data-kind="${button}"]`).click();
+        return true;
+    }
+    return false;
+}
diff --git a/packages/shared-components/.eslintrc.cjs b/packages/shared-components/.eslintrc.cjs
deleted file mode 100644
index 1d1b657fd9..0000000000
--- a/packages/shared-components/.eslintrc.cjs
+++ /dev/null
@@ -1,99 +0,0 @@
-/*
-Copyright 2025 Element Creations 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.
-*/
-
-module.exports = {
-    root: true,
-    plugins: ["matrix-org", "eslint-plugin-react-compiler"],
-    extends: [
-        "plugin:matrix-org/react",
-        "plugin:matrix-org/a11y",
-        "plugin:matrix-org/typescript",
-        "plugin:matrix-org/react",
-        "plugin:storybook/recommended",
-    ],
-    parserOptions: {
-        project: ["./tsconfig.json"],
-        tsconfigRootDir: __dirname,
-    },
-    env: {
-        browser: true,
-        node: true,
-    },
-    rules: {
-        // Bind or arrow functions in props causes performance issues (but we
-        // currently use them in some places).
-        // It's disabled here, but we should using it sparingly.
-        "react/jsx-no-bind": "off",
-        "react/jsx-key": ["error"],
-        "matrix-org/require-copyright-header": "error",
-        "react-compiler/react-compiler": "error",
-        "no-restricted-imports": [
-            "error",
-            {
-                paths: [
-                    {
-                        name: "react",
-                        importNames: ["act"],
-                        message: "Please use @test-utils instead.",
-                    },
-                ],
-            },
-        ],
-
-        "@typescript-eslint/unbound-method": ["error", { ignoreStatic: true }],
-        "@typescript-eslint/explicit-function-return-type": [
-            "error",
-            {
-                allowExpressions: true,
-            },
-        ],
-
-        // We're okay being explicit at the moment
-        // "@typescript-eslint/no-empty-interface": "off",
-        // We'd rather not do this but we do
-        // "@typescript-eslint/ban-ts-comment": "off",
-        // We're okay with assertion errors when we ask for them
-        "@typescript-eslint/no-non-null-assertion": "off",
-        "@typescript-eslint/no-empty-object-type": [
-            "error",
-            {
-                // We do this sometimes to brand interfaces
-                allowInterfaces: "with-single-extends",
-            },
-        ],
-        "storybook/meta-satisfies-type": "error",
-
-        "react/forbid-elements": [
-            "error",
-            {
-                forbid: [
-                    { element: "h1", message: "Use Compound <Heading> instead" },
-                    { element: "h2", message: "Use Compound <Heading> instead" },
-                    { element: "h3", message: "Use Compound <Heading> instead" },
-                    { element: "h4", message: "Use Compound <Heading> instead" },
-                    { element: "h5", message: "Use Compound <Heading> instead" },
-                    { element: "h6", message: "Use Compound <Heading> instead" },
-                ],
-            },
-        ],
-    },
-    overrides: [
-        {
-            files: ["src/**/*.test.{ts,tsx}", "src/**/*.stories.tsx"],
-            rules: {
-                "@typescript-eslint/unbound-method": "off",
-                "@typescript-eslint/no-explicit-any": "off",
-                "react/forbid-elements": "off",
-            },
-        },
-    ],
-    settings: {
-        react: {
-            version: "detect",
-        },
-    },
-};
diff --git a/packages/shared-components/.prettierrc.cjs b/packages/shared-components/.prettierrc.cjs
deleted file mode 100644
index 4954ff865e..0000000000
--- a/packages/shared-components/.prettierrc.cjs
+++ /dev/null
@@ -1,5 +0,0 @@
-// Even though this (at time of writing) is identical Element Web's
-// .prettierrc.js, shared components needs its own because otherwise
-// this refers to element web's copy of eslint-plugin-matrix-org which
-// would require element-web's modules to be installed.
-module.exports = require("eslint-plugin-matrix-org/.prettierrc.js");
diff --git a/packages/shared-components/.storybook/app-web-root.css b/packages/shared-components/.storybook/app-web-root.css
new file mode 100644
index 0000000000..6745bafac1
--- /dev/null
+++ b/packages/shared-components/.storybook/app-web-root.css
@@ -0,0 +1,71 @@
+/*
+Copyright 2026 Element Creations 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.
+*/
+
+/*
+ * Match the app/web shell baseline without importing app/web component styles.
+ * Shared component stories should inherit the same root typography and font
+ * feature settings as the real app, while still owning their component styling.
+ */
+@layer app-web {
+    :root[data-storybook-root-css="app-web"] {
+        [class^="cpd-theme"][class^="cpd-theme"] {
+            --cpd-font-family-sans:
+                "Inter", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Arial", "Helvetica", sans-serif,
+                "Noto Color Emoji";
+        }
+
+        body {
+            font: var(--cpd-font-body-md-regular) !important;
+            letter-spacing: var(--cpd-font-letter-spacing-body-md) !important;
+            font-feature-settings:
+                "kern" 1,
+                "liga" 1,
+                "calt" 1 !important;
+
+            background-color: var(--cpd-color-bg-canvas-default);
+            color: var(--cpd-color-text-primary);
+            border: 0;
+            margin: 0;
+
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+
+        pre,
+        code {
+            font-family:
+                "Fira Code", "Twemoji", "Apple Color Emoji", "Segoe UI Emoji", "Courier", monospace, "Noto Color Emoji";
+            font-size: 100% !important;
+        }
+    }
+
+    /* Username color classes - these are defined in the main app's _common.pcss
+   but need to be available in Storybook for components that use colorClass */
+    .mx_Username_color1 {
+        color: var(--cpd-color-text-decorative-1);
+    }
+
+    .mx_Username_color2 {
+        color: var(--cpd-color-text-decorative-2);
+    }
+
+    .mx_Username_color3 {
+        color: var(--cpd-color-text-decorative-3);
+    }
+
+    .mx_Username_color4 {
+        color: var(--cpd-color-text-decorative-4);
+    }
+
+    .mx_Username_color5 {
+        color: var(--cpd-color-text-decorative-5);
+    }
+
+    .mx_Username_color6 {
+        color: var(--cpd-color-text-decorative-6);
+    }
+}
diff --git a/packages/shared-components/.storybook/languageAddon.tsx b/packages/shared-components/.storybook/languageAddon.tsx
index dcb9d8d814..c2161d6c76 100644
--- a/packages/shared-components/.storybook/languageAddon.tsx
+++ b/packages/shared-components/.storybook/languageAddon.tsx
@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { Addon, types, useGlobals } from "storybook/manager-api";
+import { type Addon, types, useGlobals } from "storybook/manager-api";
 import { WithTooltip, IconButton, TooltipLinkList } from "storybook/internal/components";
 import React from "react";
 import { GlobeIcon } from "@storybook/icons";
@@ -24,6 +24,7 @@ export const languageAddon: Addon = {
     title: "Language Selector",
     type: types.TOOL,
     render: ({ active }) => {
+        // oxlint-disable-next-line react-hooks/rules-of-hooks
         const [globals, updateGlobals] = useGlobals();
         const selectedLanguage = globals.language || "en";
 
diff --git a/packages/shared-components/.storybook/main.ts b/packages/shared-components/.storybook/main.ts
index 60fb388507..ddd677fe6b 100644
--- a/packages/shared-components/.storybook/main.ts
+++ b/packages/shared-components/.storybook/main.ts
@@ -9,15 +9,15 @@ import type { StorybookConfig } from "@storybook/react-vite";
 import fs from "node:fs";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
 import { mergeConfig, normalizePath, type Plugin } from "vite";
-import { dirname, join } from "node:path";
+import path from "node:path";
 import { fileURLToPath } from "node:url";
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const srcRoot = normalizePath(join(__dirname, "..", "src"));
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const srcRoot = normalizePath(path.join(__dirname, "..", "src"));
 const sharedComponentsLayer = "shared-components";
 
 // Get a list of available languages so the language selector can display them at runtime
-const languageFiles = fs.readdirSync(join(__dirname, "..", "src", "i18n", "strings")).map((f) => f.slice(0, -5));
+const languageFiles = fs.readdirSync(path.join(__dirname, "..", "src", "i18n", "strings")).map((f) => f.slice(0, -5));
 
 const languages: Record<string, string> = {};
 for (const lang of languageFiles) {
@@ -35,7 +35,7 @@ for (const lang of languageFiles) {
  * It is needed in projects that use Yarn PnP or are set up within a monorepo.
  */
 function getAbsolutePath(value: string): any {
-    return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
+    return path.dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
 }
 
 function layerSharedComponentCssModules(): Plugin {
@@ -88,7 +88,7 @@ const config: StorybookConfig = {
                     name: "language-middleware",
                     configureServer(server) {
                         server.middlewares.use((req, res, next) => {
-                            if (req.url === "/i18n/languages.json") {
+                            if (req.url?.split("?")[0] === "/i18n/languages.json") {
                                 // Dynamically generate a languages.json file based on what files are available
                                 res.setHeader("Content-Type", "application/json");
                                 res.end(JSON.stringify(languages));
diff --git a/packages/shared-components/.storybook/preview.css b/packages/shared-components/.storybook/preview.css
index eb1772154e..842351b5e0 100644
--- a/packages/shared-components/.storybook/preview.css
+++ b/packages/shared-components/.storybook/preview.css
@@ -9,28 +9,7 @@ Please see LICENSE files in the repository root for full details.
     background: var(--cpd-color-bg-canvas-default);
 }
 
-/* Username color classes - these are defined in the main app's _common.pcss
-   but need to be available in Storybook for components that use colorClass */
-.mx_Username_color1 {
-    color: var(--cpd-color-text-decorative-1);
-}
-
-.mx_Username_color2 {
-    color: var(--cpd-color-text-decorative-2);
-}
-
-.mx_Username_color3 {
-    color: var(--cpd-color-text-decorative-3);
-}
-
-.mx_Username_color4 {
-    color: var(--cpd-color-text-decorative-4);
-}
-
-.mx_Username_color5 {
-    color: var(--cpd-color-text-decorative-5);
-}
-
-.mx_Username_color6 {
-    color: var(--cpd-color-text-decorative-6);
+[class*="blurhash"] > canvas {
+    animation: none !important;
+    opacity: 1 !important;
 }
diff --git a/packages/shared-components/.storybook/preview.tsx b/packages/shared-components/.storybook/preview.tsx
index 07a4bf2621..0b53a02d15 100644
--- a/packages/shared-components/.storybook/preview.tsx
+++ b/packages/shared-components/.storybook/preview.tsx
@@ -12,13 +12,16 @@ import "@fontsource/inter/600.css";
 import "@fontsource/inter/700.css";
 
 import "./compound.css";
+import "./app-web-root.css";
 import "./preview.css";
 import React, { useLayoutEffect } from "react";
 import { TooltipProvider } from "@vector-im/compound-web";
-import type { StoryContext } from "storybook/internal/csf";
 
 import { EventPresentationProvider, type EventDensity, type EventLayout, I18nApi, I18nContext } from "../src";
 import { setLanguage } from "../src/core/i18n/i18n";
+import { type StoryContext } from "storybook/internal/csf";
+import { DragDropProvider } from "@dnd-kit/react";
+import { PointerActivationConstraints, PointerSensor } from "@dnd-kit/dom";
 
 export const globalTypes = {
     theme: {
@@ -47,7 +50,7 @@ export const globalTypes = {
             icon: "component",
             title: "Event layout",
             items: [
-                { title: "Group", value: "group" },
+                { title: "Modern", value: "group" },
                 { title: "Bubble", value: "bubble" },
                 { title: "IRC", value: "irc" },
             ],
@@ -65,30 +68,70 @@ export const globalTypes = {
             ],
         },
     },
+    rootCss: {
+        name: "Root CSS",
+        description: "Global root CSS for component previews",
+        toolbar: {
+            icon: "paintbrush",
+            title: "Root CSS",
+            items: [
+                { title: "Default", value: "storybook" },
+                { title: "Element Web", value: "app-web" },
+            ],
+        },
+    },
     initialGlobals: {
-        theme: "system",
+        theme: "light",
         language: "en",
         eventLayout: "group",
         eventDensity: "default",
+        rootCss: "storybook",
     },
 } satisfies ArgTypes;
 
 const allThemesClasses = globalTypes.theme.toolbar.items.map(({ value }) => `cpd-theme-${value}`);
 
+const RootCssSwitcher: React.FC<{
+    rootCss: string;
+}> = ({ rootCss }) => {
+    useLayoutEffect(() => {
+        if (rootCss === "app-web") {
+            document.documentElement.dataset.storybookRootCss = rootCss;
+        } else {
+            delete document.documentElement.dataset.storybookRootCss;
+        }
+
+        return () => {
+            delete document.documentElement.dataset.storybookRootCss;
+        };
+    }, [rootCss]);
+
+    return null;
+};
+
 const ThemeSwitcher: React.FC<{
     theme: string;
 }> = ({ theme }) => {
     useLayoutEffect(() => {
-        document.documentElement.classList.remove(...allThemesClasses);
+        document.body.classList.remove(...allThemesClasses);
         if (theme !== "system") {
-            document.documentElement.classList.add(`cpd-theme-${theme}`);
+            document.body.classList.add(`cpd-theme-${theme}`);
         }
-        return () => document.documentElement.classList.remove(...allThemesClasses);
+        return () => document.body.classList.remove(...allThemesClasses);
     }, [theme]);
 
     return null;
 };
 
+const withRootCss: Decorator = (Story, context) => {
+    return (
+        <>
+            <RootCssSwitcher rootCss={context.globals.rootCss} />
+            <Story />
+        </>
+    );
+};
+
 const withThemeProvider: Decorator = (Story, context) => {
     return (
         <>
@@ -131,15 +174,44 @@ const withEventPresentationProvider: Decorator = (Story, context) => {
     );
 };
 
-const preview = {
+/**
+ * Wrap all stories in a DragDropProvider that excludes the Accessibility plugin.
+ * dnd-kit's Accessibility plugin adds aria attributes (tabindex, aria-pressed, etc.)
+ * that conflict with the existing ARIA roles used in the room list components.
+ */
+const withDragDropProvider: Decorator = (Story) => {
+    return (
+        <DragDropProvider
+            sensors={[
+                // By default, the PointerSensor activates dragging immediately on pointer down, which interferes with keyboard navigation.
+                // So we start dragging after the pointer has moved by 5 pixels, to allow for click without dragging
+                PointerSensor.configure({
+                    activationConstraints: [new PointerActivationConstraints.Distance({ value: 5 })],
+                }),
+            ]}
+        >
+            <Story />
+        </DragDropProvider>
+    );
+};
+
+const preview: Preview = {
     tags: ["autodocs", "snapshot"],
     initialGlobals: {
-        theme: "system",
+        rootCss: "storybook",
+        theme: "light",
         language: "en",
         eventLayout: "group",
         eventDensity: "default",
     },
-    decorators: [withThemeProvider, withEventPresentationProvider, withTooltipProvider, withI18nProvider],
+    decorators: [
+        withRootCss,
+        withThemeProvider,
+        withEventPresentationProvider,
+        withTooltipProvider,
+        withI18nProvider,
+        withDragDropProvider,
+    ],
     parameters: {
         options: {
             storySort: {
diff --git a/packages/shared-components/.storybook/waitForImages.ts b/packages/shared-components/.storybook/waitForImages.ts
new file mode 100644
index 0000000000..d31efced8c
--- /dev/null
+++ b/packages/shared-components/.storybook/waitForImages.ts
@@ -0,0 +1,37 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+/**
+ * A Storybook `play` helper that waits for every CSS `background-image` inside the
+ * rendered story to finish decoding before the visual-regression snapshot is taken.
+ *
+ * Components such as `LinkPreview` render their thumbnails as CSS `background-image`s
+ * rather than `<img>` elements, so there is no load event for the snapshot machinery
+ * to await. A larger image (e.g. the tall test image) can therefore still be decoding
+ * when the screenshot is captured, producing a non-deterministic placeholder frame.
+ * Decoding the images up-front populates the browser cache so the background paints
+ * synchronously on the next frame.
+ */
+export async function waitForBackgroundImages(root: HTMLElement): Promise<void> {
+    const urls = new Set<string>();
+    for (const el of root.querySelectorAll<HTMLElement>("*")) {
+        const match = /url\(["']?(.+?)["']?\)/.exec(getComputedStyle(el).backgroundImage);
+        if (match) urls.add(match[1]);
+    }
+
+    await Promise.all(
+        [...urls].map(async (src) => {
+            const img = new Image();
+            img.src = src;
+            try {
+                await img.decode();
+            } catch {
+                // Ignore images that fail to decode; the snapshot captures whatever renders.
+            }
+        }),
+    );
+}
diff --git a/packages/shared-components/README.md b/packages/shared-components/README.md
index dfe9805419..72f574edef 100644
--- a/packages/shared-components/README.md
+++ b/packages/shared-components/README.md
@@ -40,6 +40,21 @@ or in CSS file:
 @import url("@element-hq/web-shared-components");
 ```
 
+### Sub-path Imports
+
+Callers running outside the browser DOM (e.g. inside an `AudioWorkletGlobalScope`
+or a worker) can pull in the small standalone `numbers` utility bundle without
+loading the rest of the package bundle, which transitively imports React,
+dnd-kit, and other code that touches `window` / `document`:
+
+```javascript
+import { percentageOf, percentageWithin } from "@element-hq/web-shared-components/numbers";
+```
+
+The sub-path exposes the same functions listed under [Formatting](#formatting)
+and ships as its own ES/CJS bundle in `dist/numbers.{js,umd.cjs}`. Prefer the
+main package entry for everything else.
+
 ### Using Components
 
 There are two kinds of components in this library:
diff --git a/packages/shared-components/__vis__/linux/__baselines__/audio/Clock/Clock.stories.tsx/single-digit-minutes-auto.png b/packages/shared-components/__vis__/linux/__baselines__/audio/Clock/Clock.stories.tsx/single-digit-minutes-auto.png
new file mode 100644
index 0000000000..b10ca2b05e
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/audio/Clock/Clock.stories.tsx/single-digit-minutes-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/audio/PlayPauseButton/PlayPauseButton.stories.tsx/disabled-auto.png b/packages/shared-components/__vis__/linux/__baselines__/audio/PlayPauseButton/PlayPauseButton.stories.tsx/disabled-auto.png
new file mode 100644
index 0000000000..6e5636b92f
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/audio/PlayPauseButton/PlayPauseButton.stories.tsx/disabled-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/audio/PlayPauseButton/PlayPauseButton.stories.tsx/playing-auto.png b/packages/shared-components/__vis__/linux/__baselines__/audio/PlayPauseButton/PlayPauseButton.stories.tsx/playing-auto.png
index 4e432ba9b7..da83cd3ecd 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/audio/PlayPauseButton/PlayPauseButton.stories.tsx/playing-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/audio/PlayPauseButton/PlayPauseButton.stories.tsx/playing-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/core/EmojiPicker/EmojiPicker.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/core/EmojiPicker/EmojiPicker.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..a2d6d5eff5
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/core/EmojiPicker/EmojiPicker.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/core/EmojiPicker/EmojiPicker.stories.tsx/hide-quick-reactions-auto.png b/packages/shared-components/__vis__/linux/__baselines__/core/EmojiPicker/EmojiPicker.stories.tsx/hide-quick-reactions-auto.png
new file mode 100644
index 0000000000..367e184b0e
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/core/EmojiPicker/EmojiPicker.stories.tsx/hide-quick-reactions-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/core/EmojiPicker/EmojiPicker.stories.tsx/with-recents-auto.png b/packages/shared-components/__vis__/linux/__baselines__/core/EmojiPicker/EmojiPicker.stories.tsx/with-recents-auto.png
new file mode 100644
index 0000000000..39f08fc585
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/core/EmojiPicker/EmojiPicker.stories.tsx/with-recents-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/core/EmojiPicker/EmojiPicker.stories.tsx/with-selected-auto.png b/packages/shared-components/__vis__/linux/__baselines__/core/EmojiPicker/EmojiPicker.stories.tsx/with-selected-auto.png
new file mode 100644
index 0000000000..9a60f3edd6
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/core/EmojiPicker/EmojiPicker.stories.tsx/with-selected-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/core/FacePile/FacePileView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/core/FacePile/FacePileView.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..2aa7004c51
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/core/FacePile/FacePileView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/core/MemberAvatar/MemberAvatarView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/core/MemberAvatar/MemberAvatarView.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..b53127dc26
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/core/MemberAvatar/MemberAvatarView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/all-options-auto.png b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/all-options-auto.png
deleted file mode 100644
index 26a942c132..0000000000
Binary files a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/all-options-auto.png and /dev/null differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/condensed-auto.png b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/condensed-auto.png
index 2988063a74..02e3e526dd 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/condensed-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/condensed-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/default-auto.png
index 681b200269..874bddd1c5 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/default-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/guest-auto.png b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/guest-auto.png
index b3cb9de8f8..7d61c64fed 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/guest-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/guest-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/guest-open-auto.png b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/guest-open-auto.png
index 001717f59f..aae28539bf 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/guest-open-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/guest-open-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/longer-name-auto.png b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/longer-name-auto.png
index 7d385dcbd7..3f869333af 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/longer-name-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/longer-name-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/no-avatar-auto.png b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/no-avatar-auto.png
new file mode 100644
index 0000000000..09c7442f32
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/no-avatar-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/open-auto.png b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/open-auto.png
index 8dc8927d92..74fc2eca16 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/open-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/open-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/open-very-long-name-auto.png b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/open-very-long-name-auto.png
new file mode 100644
index 0000000000..fa9c2b4ed3
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/open-very-long-name-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/with-status-auto.png b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/with-status-auto.png
new file mode 100644
index 0000000000..3bacbd9113
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/with-status-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/with-status-open-auto.png b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/with-status-open-auto.png
new file mode 100644
index 0000000000..7087dd0c9c
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/menus/UserMenu/UserMenu.stories.tsx/with-status-open-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/notifications/NotificationBadgeView/NotificationBadgeView.stories.tsx/clickable-auto.png b/packages/shared-components/__vis__/linux/__baselines__/notifications/NotificationBadgeView/NotificationBadgeView.stories.tsx/clickable-auto.png
new file mode 100644
index 0000000000..7aa23cf638
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/notifications/NotificationBadgeView/NotificationBadgeView.stories.tsx/clickable-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/notifications/NotificationBadgeView/NotificationBadgeView.stories.tsx/dot-auto.png b/packages/shared-components/__vis__/linux/__baselines__/notifications/NotificationBadgeView/NotificationBadgeView.stories.tsx/dot-auto.png
new file mode 100644
index 0000000000..d00dcb7348
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/notifications/NotificationBadgeView/NotificationBadgeView.stories.tsx/dot-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/notifications/NotificationBadgeView/NotificationBadgeView.stories.tsx/hidden-auto.png b/packages/shared-components/__vis__/linux/__baselines__/notifications/NotificationBadgeView/NotificationBadgeView.stories.tsx/hidden-auto.png
new file mode 100644
index 0000000000..17fe39394f
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/notifications/NotificationBadgeView/NotificationBadgeView.stories.tsx/hidden-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/notifications/NotificationBadgeView/NotificationBadgeView.stories.tsx/highlight-auto.png b/packages/shared-components/__vis__/linux/__baselines__/notifications/NotificationBadgeView/NotificationBadgeView.stories.tsx/highlight-auto.png
new file mode 100644
index 0000000000..4182c6511a
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/notifications/NotificationBadgeView/NotificationBadgeView.stories.tsx/highlight-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/notifications/NotificationBadgeView/NotificationBadgeView.stories.tsx/knocked-auto.png b/packages/shared-components/__vis__/linux/__baselines__/notifications/NotificationBadgeView/NotificationBadgeView.stories.tsx/knocked-auto.png
new file mode 100644
index 0000000000..d8b0b93f7e
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/notifications/NotificationBadgeView/NotificationBadgeView.stories.tsx/knocked-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/notifications/NotificationBadgeView/NotificationBadgeView.stories.tsx/notification-auto.png b/packages/shared-components/__vis__/linux/__baselines__/notifications/NotificationBadgeView/NotificationBadgeView.stories.tsx/notification-auto.png
new file mode 100644
index 0000000000..7aa23cf638
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/notifications/NotificationBadgeView/NotificationBadgeView.stories.tsx/notification-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/notifications/NotificationBadgeView/NotificationBadgeView.stories.tsx/with-tooltip-auto.png b/packages/shared-components/__vis__/linux/__baselines__/notifications/NotificationBadgeView/NotificationBadgeView.stories.tsx/with-tooltip-auto.png
new file mode 100644
index 0000000000..4182c6511a
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/notifications/NotificationBadgeView/NotificationBadgeView.stories.tsx/with-tooltip-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/hover-1.png b/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/hover-1.png
deleted file mode 100644
index 34149eba6c..0000000000
Binary files a/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/hover-1.png and /dev/null differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/hover-when-collapsed-1.png b/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/hover-when-collapsed-1.png
new file mode 100644
index 0000000000..c2f165daa3
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/hover-when-collapsed-1.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/hover-when-expanded-1.png b/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/hover-when-expanded-1.png
new file mode 100644
index 0000000000..f9188daa98
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/hover-when-expanded-1.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/keyboard-focused-1.png b/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/keyboard-focused-1.png
index 769bf9de51..d79630a5a0 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/keyboard-focused-1.png and b/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/keyboard-focused-1.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/left-panel-expanded-auto.png b/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/left-panel-expanded-auto.png
index adfeaa7f5d..81f90b0ad1 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/left-panel-expanded-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/resize/separator/SeparatorView.stories.tsx/left-panel-expanded-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/collapse-sections-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/collapse-sections-auto.png
index 333171f50e..381aeff689 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/collapse-sections-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/collapse-sections-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/default-auto.png
index 73a0414c77..22066efced 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/default-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/display-section-release-announcement-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/display-section-release-announcement-auto.png
new file mode 100644
index 0000000000..18ad3fe668
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/display-section-release-announcement-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/expand-sections-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/expand-sections-auto.png
new file mode 100644
index 0000000000..f38e9bdf4b
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/expand-sections-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/long-title-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/long-title-auto.png
index 6556f221b8..eb6cabf64a 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/long-title-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/long-title-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/no-compose-menu-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/no-compose-menu-auto.png
index 650888bada..f4316d21a7 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/no-compose-menu-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/no-compose-menu-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/no-space-menu-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/no-space-menu-auto.png
index c161ca198e..c7e90b0a48 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/no-space-menu-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/no-space-menu-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/plus-icon-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/plus-icon-auto.png
deleted file mode 100644
index 58f146e165..0000000000
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/plus-icon-auto.png and /dev/null differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/sections-disabled-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/sections-disabled-auto.png
new file mode 100644
index 0000000000..22066efced
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx/sections-disabled-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx/default-auto.png
index 09c4dac4e4..eaca73c540 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx/default-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx/people-selected-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx/people-selected-auto.png
index 1e6e4d614c..9b548ce1c5 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx/people-selected-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx/people-selected-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListToast/RoomListToast.stories.tsx/chat-moved-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListToast/RoomListToast.stories.tsx/chat-moved-auto.png
index 0d4111e53b..82a8c31235 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListToast/RoomListToast.stories.tsx/chat-moved-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListToast/RoomListToast.stories.tsx/chat-moved-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListToast/RoomListToast.stories.tsx/section-created-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListToast/RoomListToast.stories.tsx/section-created-auto.png
index 977772886a..4129bb1648 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListToast/RoomListToast.stories.tsx/section-created-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListToast/RoomListToast.stories.tsx/section-created-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListToast/RoomListToast.stories.tsx/unread-activity-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListToast/RoomListToast.stories.tsx/unread-activity-auto.png
new file mode 100644
index 0000000000..b9fd480914
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListToast/RoomListToast.stories.tsx/unread-activity-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/default-auto.png
index eb90df57d3..955007c819 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/default-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-auto.png
index e673af207f..034198b0c3 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-favourite-filter-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-favourite-filter-auto.png
deleted file mode 100644
index 10aa503a48..0000000000
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-favourite-filter-auto.png and /dev/null differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-low-priority-filter-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-low-priority-filter-auto.png
deleted file mode 100644
index 488dac68d1..0000000000
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-low-priority-filter-auto.png and /dev/null differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-without-create-permission-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-without-create-permission-auto.png
index 8cb6617e1e..0a33b9bf28 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-without-create-permission-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/empty-without-create-permission-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/large-flat-list-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/large-flat-list-auto.png
index 667be0e5c6..955007c819 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/large-flat-list-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/large-flat-list-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/large-section-list-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/large-section-list-auto.png
index 402b680fcf..b73866777d 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/large-section-list-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/large-section-list-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/loading-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/loading-auto.png
index 921f023c6a..93e56c2eb5 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/loading-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/loading-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/section-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/section-auto.png
index 15159194a0..b11b6874f7 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/section-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/section-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/small-flat-list-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/small-flat-list-auto.png
index df403e6918..e770e80b4d 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/small-flat-list-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/small-flat-list-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/small-section-list-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/small-section-list-auto.png
index df6a0d002b..a45493ebfd 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/small-section-list-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/small-section-list-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/toast-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/toast-auto.png
index 722398dc96..e72940a531 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/toast-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/toast-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/toast-over-sticky-section-1.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/toast-over-sticky-section-1.png
new file mode 100644
index 0000000000..2e9a1b62b7
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/toast-over-sticky-section-1.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/unread-activity-below-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/unread-activity-below-auto.png
new file mode 100644
index 0000000000..8ad05ae614
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/unread-activity-below-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/with-active-filter-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/with-active-filter-auto.png
index b1d5edefd7..2825951b13 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/with-active-filter-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/with-active-filter-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/with-selection-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/with-selection-auto.png
index 0dea042486..a64e06b3d7 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/with-selection-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/RoomListView/RoomListView.stories.tsx/with-selection-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemDragOverlayView/RoomListItemDragOverlayView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemDragOverlayView/RoomListItemDragOverlayView.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..2e5d6c7a1a
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemDragOverlayView/RoomListItemDragOverlayView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/activity-indicator-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.stories.tsx/activity-indicator-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/activity-indicator-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.stories.tsx/activity-indicator-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/invited-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.stories.tsx/invited-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/invited-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.stories.tsx/invited-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/mention-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.stories.tsx/mention-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/mention-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.stories.tsx/mention-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/mention-with-count-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.stories.tsx/mention-with-count-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/mention-with-count-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.stories.tsx/mention-with-count-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/muted-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.stories.tsx/muted-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/muted-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.stories.tsx/muted-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/muted-without-activity-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.stories.tsx/muted-without-activity-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/muted-without-activity-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.stories.tsx/muted-without-activity-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/no-notification-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.stories.tsx/no-notification-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/no-notification-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.stories.tsx/no-notification-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/notification-with-count-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.stories.tsx/notification-with-count-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/notification-with-count-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.stories.tsx/notification-with-count-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/unsent-message-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.stories.tsx/unsent-message-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/unsent-message-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.stories.tsx/unsent-message-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/video-call-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.stories.tsx/video-call-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/video-call-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.stories.tsx/video-call-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/video-call-without-activity-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.stories.tsx/video-call-without-activity-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/video-call-without-activity-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.stories.tsx/video-call-without-activity-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/voice-call-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.stories.tsx/voice-call-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx/voice-call-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.stories.tsx/voice-call-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/bold-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/bold-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/bold-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/bold-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/default-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/default-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/default-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/first-item-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/first-item-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/first-item-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/first-item-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/invitation-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/invitation-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/invitation-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/invitation-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/last-item-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/last-item-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/last-item-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/last-item-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/long-content-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/long-content-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/long-content-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/long-content-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/no-message-preview-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/no-message-preview-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/no-message-preview-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/no-message-preview-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/section-disabled-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/section-disabled-auto.png
new file mode 100644
index 0000000000..c17c835dff
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/section-disabled-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/selected-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/selected-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/selected-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/selected-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/unsent-message-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/unsent-message-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/unsent-message-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/unsent-message-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-hover-menu-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-hover-menu-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-hover-menu-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-hover-menu-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-large-font-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-large-font-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-large-font-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-large-font-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-mention-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-mention-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-mention-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-mention-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-notification-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-notification-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-notification-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-notification-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-user-status-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-user-status-auto.png
new file mode 100644
index 0000000000..fddb8cd7ef
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-user-status-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-video-call-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-video-call-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-video-call-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-video-call-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-voice-call-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-voice-call-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-voice-call-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-voice-call-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-zoom-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-zoom-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-zoom-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/with-zoom-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/without-hover-menu-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/without-hover-menu-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx/without-hover-menu-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx/without-hover-menu-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.stories.tsx/flat-list-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemWrapper.stories.tsx/flat-list-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.stories.tsx/flat-list-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemWrapper.stories.tsx/flat-list-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.stories.tsx/sections-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemWrapper.stories.tsx/sections-auto.png
similarity index 100%
rename from packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.stories.tsx/sections-auto.png
rename to packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemWrapper.stories.tsx/sections-auto.png
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderDragOverlayView/RoomListSectionHeaderDragOverlayView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderDragOverlayView/RoomListSectionHeaderDragOverlayView.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..5346ad54c1
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderDragOverlayView/RoomListSectionHeaderDragOverlayView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/collapsed-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/collapsed-auto.png
index 1a0616cbca..38c9cac030 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/collapsed-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/collapsed-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/default-auto.png
index 0f8bb587a6..ba5808b75c 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/default-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/first-header-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/first-header-auto.png
index 63b3b3bea6..bad1e36687 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/first-header-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/first-header-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/last-header-collapsed-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/last-header-collapsed-auto.png
index 1a0616cbca..38c9cac030 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/last-header-collapsed-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/last-header-collapsed-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/long-title-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/long-title-auto.png
index db8ade7e59..16913c2f3b 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/long-title-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/long-title-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/unread-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/unread-auto.png
index 563c7891d9..ac2e293ab5 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/unread-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/unread-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/with-notification-decoration-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/with-notification-decoration-auto.png
new file mode 100644
index 0000000000..69d727125a
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx/with-notification-decoration-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/VirtualizedRoomListView.stories.tsx/sections-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/VirtualizedRoomListView.stories.tsx/sections-auto.png
index dfda0e57b7..b051fc71aa 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/VirtualizedRoomListView.stories.tsx/sections-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room-list/VirtualizedRoomListView/VirtualizedRoomListView.stories.tsx/sections-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/composer/MessageComposerUrlPreview/MessageComposerUrlPreview.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/composer/MessageComposerUrlPreview/MessageComposerUrlPreview.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..c4ff13650d
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/composer/MessageComposerUrlPreview/MessageComposerUrlPreview.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/composer/MessageComposerUrlPreview/MessageComposerUrlPreview.stories.tsx/with-image-and-loads-of-text-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/composer/MessageComposerUrlPreview/MessageComposerUrlPreview.stories.tsx/with-image-and-loads-of-text-auto.png
new file mode 100644
index 0000000000..9d7f58f556
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/composer/MessageComposerUrlPreview/MessageComposerUrlPreview.stories.tsx/with-image-and-loads-of-text-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/composer/MessageComposerUrlPreview/MessageComposerUrlPreview.stories.tsx/with-image-and-site-icon-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/composer/MessageComposerUrlPreview/MessageComposerUrlPreview.stories.tsx/with-image-and-site-icon-auto.png
new file mode 100644
index 0000000000..2d66770a1e
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/composer/MessageComposerUrlPreview/MessageComposerUrlPreview.stories.tsx/with-image-and-site-icon-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/composer/MessageComposerUrlPreview/MessageComposerUrlPreview.stories.tsx/with-image-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/composer/MessageComposerUrlPreview/MessageComposerUrlPreview.stories.tsx/with-image-auto.png
new file mode 100644
index 0000000000..ee11cf34ea
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/composer/MessageComposerUrlPreview/MessageComposerUrlPreview.stories.tsx/with-image-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/composer/UploadButton/UploadButton.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/composer/UploadButton/UploadButton.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..fb3b0a2aa8
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/composer/UploadButton/UploadButton.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/composer/UploadButton/UploadButton.stories.tsx/with-open-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/composer/UploadButton/UploadButton.stories.tsx/with-open-auto.png
new file mode 100644
index 0000000000..5dbbc8f8b5
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/composer/UploadButton/UploadButton.stories.tsx/with-open-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/DateSeparatorView/DateSeparatorView.stories.tsx/with-jump-to-date-picker-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/DateSeparatorView/DateSeparatorView.stories.tsx/with-jump-to-date-picker-auto.png
index c1092c385f..57890f534b 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/DateSeparatorView/DateSeparatorView.stories.tsx/with-jump-to-date-picker-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/DateSeparatorView/DateSeparatorView.stories.tsx/with-jump-to-date-picker-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/TimelineView/TimelineOverlayButtons.stories.tsx/jump-to-bottom-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/TimelineView/TimelineOverlayButtons.stories.tsx/jump-to-bottom-auto.png
new file mode 100644
index 0000000000..759ad99002
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/TimelineView/TimelineOverlayButtons.stories.tsx/jump-to-bottom-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/TimelineView/TimelineOverlayButtons.stories.tsx/jump-to-bottom-with-highlight-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/TimelineView/TimelineOverlayButtons.stories.tsx/jump-to-bottom-with-highlight-auto.png
new file mode 100644
index 0000000000..39fed9fc25
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/TimelineView/TimelineOverlayButtons.stories.tsx/jump-to-bottom-with-highlight-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/TimelineView/TimelineOverlayButtons.stories.tsx/jump-to-bottom-with-unread-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/TimelineView/TimelineOverlayButtons.stories.tsx/jump-to-bottom-with-unread-auto.png
new file mode 100644
index 0000000000..48be5c1bd1
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/TimelineView/TimelineOverlayButtons.stories.tsx/jump-to-bottom-with-unread-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/TimelineView/TimelineOverlayButtons.stories.tsx/unread-marker-above-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/TimelineView/TimelineOverlayButtons.stories.tsx/unread-marker-above-auto.png
new file mode 100644
index 0000000000..43329bd666
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/TimelineView/TimelineOverlayButtons.stories.tsx/unread-marker-above-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/TimelineView/TimelineOverlayButtons.stories.tsx/unread-marker-below-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/TimelineView/TimelineOverlayButtons.stories.tsx/unread-marker-below-auto.png
new file mode 100644
index 0000000000..7d12fe4b5e
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/TimelineView/TimelineOverlayButtons.stories.tsx/unread-marker-below-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/TimelineView/TimelineView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/TimelineView/TimelineView.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..10224ea1ef
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/TimelineView/TimelineView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/TimelineView/TimelineView.stories.tsx/with-jump-to-bottom-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/TimelineView/TimelineView.stories.tsx/with-jump-to-bottom-auto.png
new file mode 100644
index 0000000000..8d9f3484b0
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/TimelineView/TimelineView.stories.tsx/with-jump-to-bottom-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/TimelineView/TimelineView.stories.tsx/with-unread-marker-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/TimelineView/TimelineView.stories.tsx/with-unread-marker-auto.png
new file mode 100644
index 0000000000..0f78383ddf
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/TimelineView/TimelineView.stories.tsx/with-unread-marker-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfile.stories.tsx/full-example-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfile.stories.tsx/full-example-auto.png
index f016ac3067..12007a7a98 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfile.stories.tsx/full-example-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfile.stories.tsx/full-example-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/E2eMessageSharedIcon/E2eMessageSharedIcon.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/E2eMessageSharedIcon/E2eMessageSharedIcon.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..391b8bda9b
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/E2eMessageSharedIcon/E2eMessageSharedIcon.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.stories.tsx/decryption-failure-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.stories.tsx/decryption-failure-auto.png
new file mode 100644
index 0000000000..5c0b3a949d
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.stories.tsx/decryption-failure-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.stories.tsx/normal-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.stories.tsx/normal-auto.png
new file mode 100644
index 0000000000..391b8bda9b
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.stories.tsx/normal-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.stories.tsx/warning-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.stories.tsx/warning-auto.png
new file mode 100644
index 0000000000..85a6b6770f
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.stories.tsx/warning-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventPreviewView/EventPreviewView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventPreviewView/EventPreviewView.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..b4718dac91
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventPreviewView/EventPreviewView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventPreviewView/EventPreviewView.stories.tsx/hidden-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventPreviewView/EventPreviewView.stories.tsx/hidden-auto.png
new file mode 100644
index 0000000000..17fe39394f
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventPreviewView/EventPreviewView.stories.tsx/hidden-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventPreviewView/EventPreviewView.stories.tsx/with-prefix-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventPreviewView/EventPreviewView.stories.tsx/with-prefix-auto.png
new file mode 100644
index 0000000000..e01c2844b9
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventPreviewView/EventPreviewView.stories.tsx/with-prefix-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventTileView.stories.tsx/file-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventTileView.stories.tsx/file-auto.png
new file mode 100644
index 0000000000..661e95599f
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventTileView.stories.tsx/file-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventTileView.stories.tsx/highlighted-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventTileView.stories.tsx/highlighted-auto.png
new file mode 100644
index 0000000000..bb0b1e2403
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventTileView.stories.tsx/highlighted-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventTileView.stories.tsx/notification-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventTileView.stories.tsx/notification-auto.png
new file mode 100644
index 0000000000..5cccc5ca8f
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventTileView.stories.tsx/notification-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventTileView.stories.tsx/room-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventTileView.stories.tsx/room-auto.png
new file mode 100644
index 0000000000..b7e99845a4
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventTileView.stories.tsx/room-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventTileView.stories.tsx/selected-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventTileView.stories.tsx/selected-auto.png
new file mode 100644
index 0000000000..9ffbbb1f8c
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventTileView.stories.tsx/selected-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventTileView.stories.tsx/thread-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventTileView.stories.tsx/thread-auto.png
new file mode 100644
index 0000000000..90a7b34c46
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventTileView.stories.tsx/thread-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventTileView.stories.tsx/threads-list-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventTileView.stories.tsx/threads-list-auto.png
new file mode 100644
index 0000000000..eff18172a6
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/EventTileView.stories.tsx/threads-list-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/MJitsiWidgetEventView.stories.tsx/ended-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/MJitsiWidgetEventView.stories.tsx/ended-auto.png
new file mode 100644
index 0000000000..ce148ddc96
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/MJitsiWidgetEventView.stories.tsx/ended-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/MJitsiWidgetEventView.stories.tsx/hidden-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/MJitsiWidgetEventView.stories.tsx/hidden-auto.png
new file mode 100644
index 0000000000..17fe39394f
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/MJitsiWidgetEventView.stories.tsx/hidden-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/MJitsiWidgetEventView.stories.tsx/started-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/MJitsiWidgetEventView.stories.tsx/started-auto.png
new file mode 100644
index 0000000000..80ef9c8ef9
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/MJitsiWidgetEventView.stories.tsx/started-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/MJitsiWidgetEventView.stories.tsx/updated-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/MJitsiWidgetEventView.stories.tsx/updated-auto.png
new file mode 100644
index 0000000000..6aa12cc0f7
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/MJitsiWidgetEventView.stories.tsx/updated-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/MJitsiWidgetEventView.stories.tsx/with-timestamp-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/MJitsiWidgetEventView.stories.tsx/with-timestamp-auto.png
new file mode 100644
index 0000000000..f7a924cbe3
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/MJitsiWidgetEventView.stories.tsx/with-timestamp-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/MKeyVerificationRequestView.stories.tsx/received-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/MKeyVerificationRequestView.stories.tsx/received-auto.png
new file mode 100644
index 0000000000..fe9fbd0acd
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/MKeyVerificationRequestView.stories.tsx/received-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/MKeyVerificationRequestView.stories.tsx/sent-by-me-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/MKeyVerificationRequestView.stories.tsx/sent-by-me-auto.png
new file mode 100644
index 0000000000..6bbd8eab9e
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/MKeyVerificationRequestView.stories.tsx/sent-by-me-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/MKeyVerificationRequestView.stories.tsx/with-timestamp-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/MKeyVerificationRequestView.stories.tsx/with-timestamp-auto.png
new file mode 100644
index 0000000000..75662a5a4e
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/MKeyVerificationRequestView.stories.tsx/with-timestamp-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/RoomAvatarEventView/RoomAvatarEventView.stories.tsx/changed-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/RoomAvatarEventView/RoomAvatarEventView.stories.tsx/changed-auto.png
new file mode 100644
index 0000000000..54413bae30
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/RoomAvatarEventView/RoomAvatarEventView.stories.tsx/changed-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/RoomAvatarEventView/RoomAvatarEventView.stories.tsx/removed-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/RoomAvatarEventView/RoomAvatarEventView.stories.tsx/removed-auto.png
new file mode 100644
index 0000000000..3951d681b8
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/RoomAvatarEventView/RoomAvatarEventView.stories.tsx/removed-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.stories.tsx/default-auto.png
index cbd93adc65..9a960d25bd 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.stories.tsx/default-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.stories.tsx/with-link-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.stories.tsx/with-link-auto.png
new file mode 100644
index 0000000000..59f07c05a3
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.stories.tsx/with-link-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummary.stories.tsx/decryption-failure-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummary.stories.tsx/decryption-failure-auto.png
new file mode 100644
index 0000000000..2c8f9a6e79
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummary.stories.tsx/decryption-failure-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummary.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummary.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..8edfaf8d6a
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummary.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummary.stories.tsx/hidden-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummary.stories.tsx/hidden-auto.png
new file mode 100644
index 0000000000..6f86be0c06
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummary.stories.tsx/hidden-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummary.stories.tsx/narrow-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummary.stories.tsx/narrow-auto.png
new file mode 100644
index 0000000000..a2ae0f4dfb
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummary.stories.tsx/narrow-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummary.stories.tsx/with-notification-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummary.stories.tsx/with-notification-auto.png
new file mode 100644
index 0000000000..570595a935
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummary.stories.tsx/with-notification-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx/bubble-layout-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx/bubble-layout-auto.png
index 494ff51eb4..354aa3a808 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx/bubble-layout-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx/bubble-layout-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx/default-auto.png
index 669e4f1ff3..d4ba70c7af 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx/default-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx/without-actions-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx/without-actions-auto.png
index 13bcb57c9a..21df7119bc 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx/without-actions-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx/without-actions-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/article-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/article-auto.png
index bc1cb2b8c4..0c1983fd3b 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/article-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/article-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/default-auto.png
index 491d25b109..e773c6f5ba 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/default-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/social-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/social-auto.png
index 5e1425a4a1..33f68b6f9a 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/social-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/social-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/social-with-image-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/social-with-image-auto.png
index d08a63522c..3e9c274d23 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/social-with-image-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/social-with-image-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-and-description-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-and-description-auto.png
index 24163e48df..52654ac68f 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-and-description-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-and-description-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-auto.png
index e49deb59da..0ae4d86b32 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/title-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/video-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/video-auto.png
index cc9e881493..c3d04a4029 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/video-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/video-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-site-icon-and-description-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-site-icon-and-description-auto.png
index 5c9e98523c..36ac33c42e 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-site-icon-and-description-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-site-icon-and-description-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-site-icon-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-site-icon-auto.png
index 977ae22e42..69626fe5ec 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-site-icon-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-site-icon-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-tall-image-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-tall-image-auto.png
new file mode 100644
index 0000000000..16a0e9c2ba
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-tall-image-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-tooltip-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-tooltip-auto.png
index 3a5c02fbd6..27a4bd9ed9 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-tooltip-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-tooltip-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-very-long-text-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-very-long-text-auto.png
index 7f091ff904..e3d544bab7 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-very-long-text-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx/with-very-long-text-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/default-auto.png
index f69b27920e..8c6ce55e5b 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/default-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/in-bubble-layout-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/in-bubble-layout-auto.png
new file mode 100644
index 0000000000..2c5d5c37e2
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/in-bubble-layout-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/in-bubble-layout-narrow-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/in-bubble-layout-narrow-auto.png
new file mode 100644
index 0000000000..2c5d5c37e2
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/in-bubble-layout-narrow-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-hidden-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-hidden-auto.png
index 11ba4a7144..020d822bd3 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-hidden-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-hidden-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-visible-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-visible-auto.png
index c6c2193bd8..cb1fdc1a61 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-visible-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/multiple-previews-visible-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/with-compact-view-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/with-compact-view-auto.png
index 13b9e67835..ffe18d8fc2 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/with-compact-view-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx/with-compact-view-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/AudioPlayerView/AudioPlayerView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/AudioPlayerView/AudioPlayerView.stories.tsx/default-auto.png
index db8f3f45ed..5065ea7827 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/AudioPlayerView/AudioPlayerView.stories.tsx/default-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/AudioPlayerView/AudioPlayerView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/AudioPlayerView/AudioPlayerView.stories.tsx/has-error-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/AudioPlayerView/AudioPlayerView.stories.tsx/has-error-auto.png
index 9401c14c29..e771b69164 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/AudioPlayerView/AudioPlayerView.stories.tsx/has-error-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/AudioPlayerView/AudioPlayerView.stories.tsx/has-error-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/AudioPlayerView/AudioPlayerView.stories.tsx/no-media-name-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/AudioPlayerView/AudioPlayerView.stories.tsx/no-media-name-auto.png
index dbbb26e314..8178eb3e84 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/AudioPlayerView/AudioPlayerView.stories.tsx/no-media-name-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/AudioPlayerView/AudioPlayerView.stories.tsx/no-media-name-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/AudioPlayerView/AudioPlayerView.stories.tsx/no-size-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/AudioPlayerView/AudioPlayerView.stories.tsx/no-size-auto.png
index 0cd0c7b801..1c6002d524 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/AudioPlayerView/AudioPlayerView.stories.tsx/no-size-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/AudioPlayerView/AudioPlayerView.stories.tsx/no-size-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MFileBodyView/FileBodyView.stories.tsx/audio-info-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MFileBodyView/FileBodyView.stories.tsx/audio-info-auto.png
index 250aa6ae58..cb48427f3a 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MFileBodyView/FileBodyView.stories.tsx/audio-info-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MFileBodyView/FileBodyView.stories.tsx/audio-info-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MFileBodyView/FileBodyView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MFileBodyView/FileBodyView.stories.tsx/default-auto.png
index 68a9b76332..e35c56e138 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MFileBodyView/FileBodyView.stories.tsx/default-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MFileBodyView/FileBodyView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MFileBodyView/FileBodyView.stories.tsx/export-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MFileBodyView/FileBodyView.stories.tsx/export-auto.png
index d6bbab9911..ea784ea575 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MFileBodyView/FileBodyView.stories.tsx/export-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MFileBodyView/FileBodyView.stories.tsx/export-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MFileBodyView/FileBodyView.stories.tsx/invalid-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MFileBodyView/FileBodyView.stories.tsx/invalid-auto.png
index 110dc298de..4825f1ff70 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MFileBodyView/FileBodyView.stories.tsx/invalid-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MFileBodyView/FileBodyView.stories.tsx/invalid-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MFileBodyView/FileBodyView.stories.tsx/long-filename-info-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MFileBodyView/FileBodyView.stories.tsx/long-filename-info-auto.png
index 83a0cc72c3..8ab3d3d209 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MFileBodyView/FileBodyView.stories.tsx/long-filename-info-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MFileBodyView/FileBodyView.stories.tsx/long-filename-info-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MFileBodyView/FileBodyView.stories.tsx/video-info-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MFileBodyView/FileBodyView.stories.tsx/video-info-auto.png
index b044c076cb..5b8eca9587 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MFileBodyView/FileBodyView.stories.tsx/video-info-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MFileBodyView/FileBodyView.stories.tsx/video-info-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/animated-preview-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/animated-preview-auto.png
index 996f5ec6d1..bb67defe4f 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/animated-preview-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/animated-preview-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/default-auto.png
index 62ea65c997..d89ea8ba0e 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/default-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/loading-with-blurhash-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/loading-with-blurhash-auto.png
index 9934c59d57..64733128ce 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/loading-with-blurhash-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/loading-with-blurhash-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/loading-with-spinner-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/loading-with-spinner-auto.png
index 6653fe161a..1a2ca5f66b 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/loading-with-spinner-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/loading-with-spinner-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/with-tooltip-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/with-tooltip-auto.png
index 866d94ddf9..c5958b2c82 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/with-tooltip-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx/with-tooltip-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.stories.tsx/animated-preview-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.stories.tsx/animated-preview-auto.png
new file mode 100644
index 0000000000..ac9f34b7b1
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.stories.tsx/animated-preview-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..ddbe126ba8
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.stories.tsx/loading-with-blurhash-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.stories.tsx/loading-with-blurhash-auto.png
new file mode 100644
index 0000000000..16ea6246ae
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.stories.tsx/loading-with-blurhash-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.stories.tsx/loading-with-spinner-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.stories.tsx/loading-with-spinner-auto.png
new file mode 100644
index 0000000000..0f1746df79
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.stories.tsx/loading-with-spinner-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.stories.tsx/with-banner-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.stories.tsx/with-banner-auto.png
new file mode 100644
index 0000000000..6b0893d537
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.stories.tsx/with-banner-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.stories.tsx/ready-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.stories.tsx/ready-auto.png
index a7dec0f368..fad468be85 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.stories.tsx/ready-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.stories.tsx/ready-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/ViewSourceEventView/ViewSourceEventView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/ViewSourceEventView/ViewSourceEventView.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..6264a92573
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/ViewSourceEventView/ViewSourceEventView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/ViewSourceEventView/ViewSourceEventView.stories.tsx/expanded-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/ViewSourceEventView/ViewSourceEventView.stories.tsx/expanded-auto.png
new file mode 100644
index 0000000000..965add6cf5
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/body/ViewSourceEventView/ViewSourceEventView.stories.tsx/expanded-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..0084a30c99
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.stories.tsx/incoming-video-call-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.stories.tsx/incoming-video-call-auto.png
new file mode 100644
index 0000000000..2074ef2e2b
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.stories.tsx/incoming-video-call-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.stories.tsx/incoming-voice-call-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.stories.tsx/incoming-voice-call-auto.png
new file mode 100644
index 0000000000..f64c33841a
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.stories.tsx/incoming-voice-call-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.stories.tsx/outgoing-video-call-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.stories.tsx/outgoing-video-call-auto.png
new file mode 100644
index 0000000000..c25642b259
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.stories.tsx/outgoing-video-call-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.stories.tsx/outgoing-voice-call-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.stories.tsx/outgoing-voice-call-auto.png
new file mode 100644
index 0000000000..2a67aaf201
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.stories.tsx/outgoing-voice-call-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.stories.tsx/video-call-in-progress-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.stories.tsx/video-call-in-progress-auto.png
new file mode 100644
index 0000000000..0b68335e8b
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.stories.tsx/video-call-in-progress-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.stories.tsx/voice-call-in-progress-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.stories.tsx/voice-call-in-progress-auto.png
new file mode 100644
index 0000000000..b1e3558aa4
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.stories.tsx/voice-call-in-progress-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..aacf440ce8
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.stories.tsx/room-call-ignored-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.stories.tsx/room-call-ignored-auto.png
new file mode 100644
index 0000000000..b83e4dbd4b
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.stories.tsx/room-call-ignored-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.stories.tsx/room-call-joined-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.stories.tsx/room-call-joined-auto.png
new file mode 100644
index 0000000000..638ec1f9db
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.stories.tsx/room-call-joined-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.stories.tsx/room-call-without-other-participants-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.stories.tsx/room-call-without-other-participants-auto.png
new file mode 100644
index 0000000000..943216cf83
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.stories.tsx/room-call-without-other-participants-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..32dbc8d22b
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.stories.tsx/incoming-video-declined-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.stories.tsx/incoming-video-declined-auto.png
new file mode 100644
index 0000000000..af03c8bfb9
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.stories.tsx/incoming-video-declined-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.stories.tsx/incoming-voice-declined-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.stories.tsx/incoming-voice-declined-auto.png
new file mode 100644
index 0000000000..23d6e4af67
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.stories.tsx/incoming-voice-declined-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.stories.tsx/outgoing-video-declined-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.stories.tsx/outgoing-video-declined-auto.png
new file mode 100644
index 0000000000..c26f702f29
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.stories.tsx/outgoing-video-declined-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.stories.tsx/outgoing-voice-declined-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.stories.tsx/outgoing-voice-declined-auto.png
new file mode 100644
index 0000000000..bed6bc35dd
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.stories.tsx/outgoing-voice-declined-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.stories.tsx/video-ended-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.stories.tsx/video-ended-auto.png
new file mode 100644
index 0000000000..b794c3cc36
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.stories.tsx/video-ended-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.stories.tsx/voice-ended-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.stories.tsx/voice-ended-auto.png
new file mode 100644
index 0000000000..32dbc8d22b
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.stories.tsx/voice-ended-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/tombstone/room/RoomTombstoneCallTileView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/tombstone/room/RoomTombstoneCallTileView.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..3b1c0066ee
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/call/tombstone/room/RoomTombstoneCallTileView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/default-auto.png
index 9874621547..56a96f7fac 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/default-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-actions-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-actions-auto.png
index 9b784175af..b9fe307d09 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-actions-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-actions-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-href-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-href-auto.png
index 9b784175af..b9fe307d09 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-href-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-href-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-inhibit-tooltip-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-inhibit-tooltip-auto.png
index 9b784175af..b9fe307d09 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-inhibit-tooltip-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-inhibit-tooltip-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-ts-received-at-auto.png b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-ts-received-at-auto.png
index a08fe65499..0a31698ebb 100644
Binary files a/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-ts-received-at-auto.png and b/packages/shared-components/__vis__/linux/__baselines__/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.stories.tsx/has-ts-received-at-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/status/CustomStatusView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/status/CustomStatusView.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..f2f3b296e3
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/status/CustomStatusView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/status/SetStatusView.stories.tsx/no-status-auto.png b/packages/shared-components/__vis__/linux/__baselines__/status/SetStatusView.stories.tsx/no-status-auto.png
new file mode 100644
index 0000000000..1d1fe0c80f
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/status/SetStatusView.stories.tsx/no-status-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/status/SetStatusView.stories.tsx/open-auto.png b/packages/shared-components/__vis__/linux/__baselines__/status/SetStatusView.stories.tsx/open-auto.png
new file mode 100644
index 0000000000..1d1fe0c80f
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/status/SetStatusView.stories.tsx/open-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/status/SetStatusView.stories.tsx/with-status-auto.png b/packages/shared-components/__vis__/linux/__baselines__/status/SetStatusView.stories.tsx/with-status-auto.png
new file mode 100644
index 0000000000..75eafc84cf
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/status/SetStatusView.stories.tsx/with-status-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/status/StatusTextView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/status/StatusTextView.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..dfcada0746
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/status/StatusTextView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/status/UserStatusIconView.stories.tsx/default-auto.png b/packages/shared-components/__vis__/linux/__baselines__/status/UserStatusIconView.stories.tsx/default-auto.png
new file mode 100644
index 0000000000..26facfe10b
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/status/UserStatusIconView.stories.tsx/default-auto.png differ
diff --git a/packages/shared-components/__vis__/linux/__baselines__/status/UserStatusIconView.stories.tsx/no-status-auto.png b/packages/shared-components/__vis__/linux/__baselines__/status/UserStatusIconView.stories.tsx/no-status-auto.png
new file mode 100644
index 0000000000..17fe39394f
Binary files /dev/null and b/packages/shared-components/__vis__/linux/__baselines__/status/UserStatusIconView.stories.tsx/no-status-auto.png differ
diff --git a/packages/shared-components/package.json b/packages/shared-components/package.json
index 13dda3ba76..5a906f28ac 100644
--- a/packages/shared-components/package.json
+++ b/packages/shared-components/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@element-hq/web-shared-components",
-    "version": "0.0.2",
+    "version": "0.1.2",
     "description": "Shared components for Element",
     "author": "New Vector Ltd.",
     "repository": {
@@ -21,6 +21,16 @@
                 "default": "./dist/element-web-shared-components.js"
             }
         },
+        "./numbers": {
+            "require": {
+                "types": "./dist/numbers.d.ts",
+                "default": "./dist/numbers.umd.cjs"
+            },
+            "import": {
+                "types": "./dist/numbers.d.ts",
+                "default": "./dist/numbers.js"
+            }
+        },
         "./dist/element-web-shared-components.css": {
             "require": "./dist/element-web-shared-components.css",
             "import": "./dist/element-web-shared-components.css"
@@ -37,41 +47,47 @@
     "scripts": {
         "i18n": "matrix-gen-i18n src && pnpm i18n:sort && pnpm i18n:lint",
         "i18n:sort": "matrix-sort-i18n src/i18n/strings/en_EN.json",
-        "i18n:lint": "matrix-i18n-lint && prettier --log-level=silent --write src/i18n/strings/ --ignore-path /dev/null",
+        "i18n:lint": "matrix-i18n-lint && oxfmt src/i18n/strings/",
         "test:unit": "nx test:unit",
         "test:storybook": "nx test:storybook",
         "test:storybook:update": "nx test:storybook:update",
+        "coverage": "pnpm test:unit --coverage",
+        "coverage:diff": "diff-cover --config-file ../../diff-cover.toml coverage/lcov.info",
         "build": "nx build",
         "prepack": "pnpm run build",
         "storybook": "storybook dev -p 6007",
         "build:storybook": "nx storybook",
         "build:doc": "nx typedoc",
-        "lint": "pnpm lint:types && pnpm lint:js",
-        "lint:js": "eslint --max-warnings 0 src",
+        "lint": "pnpm lint:types",
         "lint:types": "nx lint:types"
     },
     "dependencies": {
+        "@dnd-kit/abstract": "^0.5.0",
+        "@dnd-kit/dom": "^0.5.0",
+        "@dnd-kit/react": "^0.5.0",
         "@element-hq/element-web-module-api": "workspace:*",
+        "@matrix-org/emojibase-bindings": "catalog:",
         "@matrix-org/spec": "^1.7.0",
+        "@tanstack/react-virtual": "3.14.8",
         "@vector-im/compound-design-tokens": "catalog:",
         "classnames": "^2.5.1",
         "counterpart": "^0.18.6",
+        "events": "^3.3.0",
         "html-react-parser": "^6.0.0",
-        "linkify-html": "4.3.2",
-        "linkify-react": "4.3.2",
-        "linkify-string": "4.3.2",
-        "linkifyjs": "4.3.2",
+        "linkify-html": "4.3.3",
+        "linkify-react": "4.3.3",
+        "linkify-string": "4.3.3",
+        "linkifyjs": "4.3.3",
         "lodash": "npm:lodash-es@^4.17.21",
         "matrix-web-i18n": "catalog:",
         "react-blurhash": "^0.3.0",
         "react-merge-refs": "^3.0.2",
-        "react-resizable-panels": "4.7.2",
+        "react-resizable-panels": "4.12.2",
         "react-virtuoso": "^4.14.0",
-        "temporal-polyfill": "^0.3.0"
+        "temporal-polyfill": "^1.0.0"
     },
     "devDependencies": {
         "@element-hq/element-web-playwright-common": "workspace:*",
-        "@element-hq/vite-common": "workspace:*",
         "@fetch-mock/vitest": "^0.2.18",
         "@fontsource/inter": "catalog:",
         "@matrix-org/react-sdk-module-api": "^2.5.0",
@@ -83,7 +99,6 @@
         "@storybook/addon-vitest": "^10.1.11",
         "@storybook/icons": "^2.0.0",
         "@storybook/react-vite": "^10.0.7",
-        "@stylistic/eslint-plugin": "^5.7.0",
         "@testing-library/dom": "^10.4.1",
         "@testing-library/react": "^16.3.2",
         "@testing-library/user-event": "^14.6.1",
@@ -91,42 +106,28 @@
         "@types/lodash": "^4.17.20",
         "@types/react": "catalog:",
         "@types/react-dom": "catalog:",
-        "@typescript-eslint/eslint-plugin": "^8.53.1",
-        "@typescript-eslint/parser": "^8.53.1",
+        "@typescript/native": "catalog:",
         "@vector-im/compound-web": "catalog:",
-        "@vitest/browser-playwright": "^4.0.17",
-        "@vitest/coverage-v8": "catalog:",
-        "eslint": "8",
-        "eslint-config-google": "^0.14.0",
-        "eslint-config-prettier": "^10.1.8",
-        "eslint-plugin-deprecate": "^0.9.0",
-        "eslint-plugin-import": "^2.32.0",
-        "eslint-plugin-jsx-a11y": "^6.10.2",
-        "eslint-plugin-matrix-org": "^3.0.0",
-        "eslint-plugin-react": "^7.37.5",
-        "eslint-plugin-react-compiler": "^19.1.0-rc.2",
-        "eslint-plugin-react-hooks": "^7.0.1",
-        "eslint-plugin-storybook": "^10.0.7",
-        "eslint-plugin-unicorn": "^56.0.0",
-        "prettier": "^3.6.2",
+        "@vitejs/plugin-react": "catalog:",
+        "@vitest/browser-playwright": "catalog:",
+        "oxfmt": "0.60.0",
         "storybook": "^10.0.7",
         "storybook-addon-vis": "^4.0.0",
         "typedoc": "^0.28.16",
         "typedoc-plugin-markdown": "^4.9.0",
         "typedoc-plugin-missing-exports": "^4.1.2",
-        "typescript": "catalog:",
-        "unplugin-dts": "1.0.0",
+        "typescript": "catalog:ts6",
+        "unplugin-dts": "catalog:",
         "vite": "catalog:",
-        "vite-plugin-node-polyfills": "^0.26.0",
-        "vitest": "catalog:",
-        "vitest-sonar-reporter": "catalog:"
+        "vite-plugin-node-polyfills": "^0.28.0",
+        "vitest": "catalog:"
     },
     "engines": {
         "node": ">=20.0.0"
     },
-    "packageManager": "pnpm@10.33.3+sha512.a19744364a7e248b92657a4ca5973f9354d21caf982579674b1c539f32c7420c47138ad8b1254df07aba9bc782d9b3029e3db34d5dbff974326eb74dac8ff489",
     "peerDependencies": {
         "@vector-im/compound-web": "^8.3.5 || ^9.0.0",
+        "react-dom": "catalog:",
         "react": "catalog:"
     }
 }
diff --git a/packages/shared-components/project.json b/packages/shared-components/project.json
index 590ee73520..a35c3793e8 100644
--- a/packages/shared-components/project.json
+++ b/packages/shared-components/project.json
@@ -17,15 +17,15 @@
             "continuous": true
         },
         "typedoc": {
-            "cache": "true",
+            "cache": true,
             "command": "typedoc",
-            "inputs": ["src"],
+            "inputs": ["src", "{projectRoot}/typedoc.json"],
             "outputs": ["{projectRoot}/typedoc"],
             "options": { "cwd": "packages/shared-components" },
             "dependsOn": ["^build"]
         },
         "storybook": {
-            "cache": "true",
+            "cache": true,
             "inputs": ["src", "{projectRoot}/.storybook", "{projectRoot}/typedoc"],
             "outputs": ["{projectRoot}/storybook-static"],
             "executor": "nx:run-commands",
diff --git a/packages/shared-components/scripts/storybook-build-i18n.ts b/packages/shared-components/scripts/storybook-build-i18n.ts
index 9fcdd09ef5..677c762666 100644
--- a/packages/shared-components/scripts/storybook-build-i18n.ts
+++ b/packages/shared-components/scripts/storybook-build-i18n.ts
@@ -18,7 +18,7 @@ const I18N_BASE_PATH = "./src/i18n/strings/";
 const I18N_DEST = "storybook-static/i18n/";
 
 // List of languages to include
-const INCLUDE_LANGS = [...new Set([...fs.readdirSync(I18N_BASE_PATH)])]
+const INCLUDE_LANGS = [...new Set(fs.readdirSync(I18N_BASE_PATH))]
     .filter((fn) => fn.endsWith(".json"))
     .map((f) => f.slice(0, -5));
 
diff --git a/packages/shared-components/src/@types/react-syntax-highlighter.d.ts b/packages/shared-components/src/@types/react-syntax-highlighter.d.ts
new file mode 100644
index 0000000000..545cf17b5a
--- /dev/null
+++ b/packages/shared-components/src/@types/react-syntax-highlighter.d.ts
@@ -0,0 +1,9 @@
+/*
+Copyright 2026 Element Creations 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.
+*/
+
+// Temporary workaround until https://github.com/storybookjs/storybook/issues/35539 ships
+declare module "react-syntax-highlighter/dist/esm/prism-light";
diff --git a/packages/shared-components/src/audio/Clock/Clock.stories.tsx b/packages/shared-components/src/audio/Clock/Clock.stories.tsx
index df2fab9ffc..90818e4b65 100644
--- a/packages/shared-components/src/audio/Clock/Clock.stories.tsx
+++ b/packages/shared-components/src/audio/Clock/Clock.stories.tsx
@@ -27,3 +27,10 @@ export const LotOfSeconds: Story = {
         seconds: 99999999999999,
     },
 };
+
+export const SingleDigitMinutes: Story = {
+    args: {
+        seconds: 100,
+        minutesMaxLength: 1,
+    },
+};
diff --git a/packages/shared-components/src/audio/Clock/Clock.test.tsx b/packages/shared-components/src/audio/Clock/Clock.test.tsx
index 9350b7cae3..895f29d3eb 100644
--- a/packages/shared-components/src/audio/Clock/Clock.test.tsx
+++ b/packages/shared-components/src/audio/Clock/Clock.test.tsx
@@ -12,7 +12,7 @@ import { describe, it, expect } from "vitest";
 
 import * as stories from "./Clock.stories.tsx";
 
-const { Default, LotOfSeconds } = composeStories(stories);
+const { Default, LotOfSeconds, SingleDigitMinutes } = composeStories(stories);
 
 describe("Clock", () => {
     it("renders the clock", () => {
@@ -24,4 +24,9 @@ describe("Clock", () => {
         const { container } = render(<LotOfSeconds />);
         expect(container).toMatchSnapshot();
     });
+
+    it("renders the clock with single digit minute", () => {
+        const { container } = render(<SingleDigitMinutes />);
+        expect(container).toMatchSnapshot();
+    });
 });
diff --git a/packages/shared-components/src/audio/Clock/Clock.tsx b/packages/shared-components/src/audio/Clock/Clock.tsx
index 2bbe6e4a01..54b86b85b8 100644
--- a/packages/shared-components/src/audio/Clock/Clock.tsx
+++ b/packages/shared-components/src/audio/Clock/Clock.tsx
@@ -16,6 +16,22 @@ export interface Props extends Pick<HTMLProps<HTMLSpanElement>, "aria-live" | "r
      * The number of seconds to display.
      */
     seconds: number;
+
+    /**
+     * The number of positions to pad the minutes part.
+     *
+     * @example
+     * If minutesMaxLength = 1, the clock will show 5:31 instead of 05:31.
+     */
+    minutesMaxLength?: number;
+
+    /**
+     * The number of positions to pad the hour part.
+     *
+     * @example
+     * If hoursMaxLength = 1, the clock will show 1:05:31 instead of 01:05:31.
+     */
+    hoursMaxLength?: number;
 }
 
 /**
@@ -28,7 +44,7 @@ export interface Props extends Pick<HTMLProps<HTMLSpanElement>, "aria-live" | "r
  * <Clock seconds={125} />
  * ```
  */
-export function Clock({ seconds, className, ...rest }: Props): JSX.Element {
+export function Clock({ seconds, className, minutesMaxLength, hoursMaxLength, ...rest }: Props): JSX.Element {
     // Memoize current second to avoid recalculating the duration when seconds changes slightly (e.g. 1.2 -> 1.3)
     const currentSecond = useMemo(() => Math.floor(seconds), [seconds]);
     const duration = useMemo(() => calculateDuration(currentSecond), [currentSecond]);
@@ -40,7 +56,10 @@ export function Clock({ seconds, className, ...rest }: Props): JSX.Element {
             className={classNames("mx_Clock", className)}
             {...rest}
         >
-            {formatSeconds(seconds)}
+            {formatSeconds(seconds, {
+                minutesMaxLength,
+                hoursMaxLength,
+            })}
         </time>
     );
 }
diff --git a/packages/shared-components/src/audio/Clock/__snapshots__/Clock.test.tsx.snap b/packages/shared-components/src/audio/Clock/__snapshots__/Clock.test.tsx.snap
index e400b9dc5b..ee41a0c843 100644
--- a/packages/shared-components/src/audio/Clock/__snapshots__/Clock.test.tsx.snap
+++ b/packages/shared-components/src/audio/Clock/__snapshots__/Clock.test.tsx.snap
@@ -21,3 +21,14 @@ exports[`Clock > renders the clock with a lot of seconds 1`] = `
   </time>
 </div>
 `;
+
+exports[`Clock > renders the clock with single digit minute 1`] = `
+<div>
+  <time
+    class="mx_Clock"
+    datetime="PT1M40S"
+  >
+    1:40
+  </time>
+</div>
+`;
diff --git a/packages/shared-components/src/audio/Clock/index.tsx b/packages/shared-components/src/audio/Clock/index.ts
similarity index 100%
rename from packages/shared-components/src/audio/Clock/index.tsx
rename to packages/shared-components/src/audio/Clock/index.ts
diff --git a/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.module.css b/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.module.css
index 74315673f1..bcf50ea829 100644
--- a/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.module.css
+++ b/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.module.css
@@ -6,6 +6,22 @@
  */
 
 .button {
+    position: relative;
+    width: 32px;
+    height: 32px;
+    min-width: 32px;
+    min-height: 32px;
     border-radius: 32px;
     background-color: var(--cpd-color-bg-subtle-primary);
+    padding: var(--cpd-space-1-5x);
+    box-sizing: border-box;
+}
+
+.button svg {
+    width: 20px;
+    height: 20px;
+}
+
+.button[disabled] svg {
+    opacity: 0.5;
 }
diff --git a/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.stories.tsx b/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.stories.tsx
index 5bbcfbbf39..d1f1ff97fa 100644
--- a/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.stories.tsx
+++ b/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.stories.tsx
@@ -24,3 +24,4 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 export const Playing: Story = { args: { playing: true } };
+export const Disabled: Story = { args: { disabled: true } };
diff --git a/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.test.tsx b/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.test.tsx
index 57cc2afc8b..4b8b7cbee6 100644
--- a/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.test.tsx
+++ b/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.test.tsx
@@ -14,7 +14,7 @@ import { describe, it, expect } from "vitest";
 
 import * as stories from "./PlayPauseButton.stories.tsx";
 
-const { Default, Playing } = composeStories(stories);
+const { Default, Playing, Disabled } = composeStories(stories);
 
 describe("PlayPauseButton", () => {
     it("renders the button in default state", () => {
@@ -27,6 +27,11 @@ describe("PlayPauseButton", () => {
         expect(container).toMatchSnapshot();
     });
 
+    it("renders the button in disabled state", () => {
+        const { container } = render(<Disabled />);
+        expect(container).toMatchSnapshot();
+    });
+
     it("calls togglePlay when clicked", async () => {
         const user = userEvent.setup();
         const togglePlay = fn();
@@ -35,4 +40,12 @@ describe("PlayPauseButton", () => {
         await user.click(getByRole("button"));
         expect(togglePlay).toHaveBeenCalled();
     });
+
+    it("preserves consumer class names alongside shared styles", () => {
+        const { getByRole } = render(<Default className="custom-play-pause-button" />);
+        const button = getByRole("button");
+
+        expect(button).toHaveClass("custom-play-pause-button");
+        expect(button.className).toContain("PlayPauseButton-module_button");
+    });
 });
diff --git a/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.tsx b/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.tsx
index 529e746b8c..dcff19c438 100644
--- a/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.tsx
+++ b/packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.tsx
@@ -6,6 +6,7 @@
  */
 
 import React, { type HTMLAttributes, type JSX, type MouseEventHandler } from "react";
+import classNames from "classnames";
 import { IconButton } from "@vector-im/compound-web";
 import Play from "@vector-im/compound-design-tokens/assets/web/icons/play-solid";
 import Pause from "@vector-im/compound-design-tokens/assets/web/icons/pause-solid";
@@ -44,6 +45,7 @@ export function PlayPauseButton({
     disabled = false,
     playing = false,
     togglePlay,
+    className,
     ...rest
 }: Readonly<PlayPauseButtonProps>): JSX.Element {
     const { translate: _t } = useI18n();
@@ -56,7 +58,7 @@ export function PlayPauseButton({
             aria-label={label}
             tooltip={label}
             onClick={togglePlay}
-            className={styles.button}
+            className={classNames(styles.button, className)}
             disabled={disabled}
             {...rest}
         >
diff --git a/packages/shared-components/src/audio/PlayPauseButton/__snapshots__/PlayPauseButton.test.tsx.snap b/packages/shared-components/src/audio/PlayPauseButton/__snapshots__/PlayPauseButton.test.tsx.snap
index 5c2d62c558..5c15fc74fd 100644
--- a/packages/shared-components/src/audio/PlayPauseButton/__snapshots__/PlayPauseButton.test.tsx.snap
+++ b/packages/shared-components/src/audio/PlayPauseButton/__snapshots__/PlayPauseButton.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`PlayPauseButton > renders the button in default state 1`] = `
   <button
     aria-disabled="false"
     aria-label="Play"
-    aria-labelledby="_r_0_"
+    aria-labelledby="react-use-id-1"
     class="_icon-button_1215g_8 PlayPauseButton-module_button"
     data-kind="primary"
     role="button"
@@ -32,12 +32,44 @@ exports[`PlayPauseButton > renders the button in default state 1`] = `
 </div>
 `;
 
+exports[`PlayPauseButton > renders the button in disabled state 1`] = `
+<div>
+  <button
+    aria-disabled="true"
+    aria-label="Play"
+    aria-labelledby="react-use-id-1"
+    class="_icon-button_1215g_8 PlayPauseButton-module_button"
+    data-kind="primary"
+    role="button"
+    style="--cpd-icon-button-size: 32px;"
+    tabindex="0"
+  >
+    <div
+      class="_indicator-icon_147l5_17"
+      style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="m8.98 4.677 9.921 5.58c1.36.764 1.36 2.722 0 3.486l-9.92 5.58C7.647 20.073 6 19.11 6 17.58V6.42c0-1.53 1.647-2.493 2.98-1.743"
+        />
+      </svg>
+    </div>
+  </button>
+</div>
+`;
+
 exports[`PlayPauseButton > renders the button in playing state 1`] = `
 <div>
   <button
     aria-disabled="false"
     aria-label="Pause"
-    aria-labelledby="_r_6_"
+    aria-labelledby="react-use-id-1"
     class="_icon-button_1215g_8 PlayPauseButton-module_button"
     data-kind="primary"
     role="button"
diff --git a/packages/shared-components/src/core/AvatarWithDetails/index.tsx b/packages/shared-components/src/core/AvatarWithDetails/index.ts
similarity index 100%
rename from packages/shared-components/src/core/AvatarWithDetails/index.tsx
rename to packages/shared-components/src/core/AvatarWithDetails/index.ts
diff --git a/packages/shared-components/src/core/EmojiPicker/Emoji.tsx b/packages/shared-components/src/core/EmojiPicker/Emoji.tsx
new file mode 100644
index 0000000000..c426876ab1
--- /dev/null
+++ b/packages/shared-components/src/core/EmojiPicker/Emoji.tsx
@@ -0,0 +1,93 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ * Copyright 2020 The Matrix.org Foundation C.I.C.
+ * Copyright 2019 Tulir Asokan <tulir@maunium.net>
+ *
+ * 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, { useCallback } from "react";
+import { type Emoji as IEmoji } from "@matrix-org/emojibase-bindings";
+import classNames from "classnames";
+
+import { RovingButton, type ButtonEvent } from "./RovingButton";
+import styles from "./EmojiPicker.module.css";
+
+interface IProps {
+    /**
+     * The emoji to render.
+     */
+    emoji: IEmoji;
+    /**
+     * Set of which emojis are already selected and should be decorated as such.
+     * If specified, emoji will use a checkbox role with aria-checked set appropriately.
+     */
+    selectedEmojis?: Set<string>;
+    /**
+     * Called when the emoji is clicked.
+     *
+     * @param ev - The button event
+     * @param emoji - The emoji that was clicked
+     */
+    onClick: (ev: ButtonEvent, emoji: IEmoji) => void;
+    /**
+     * Called when the mouse enters the emoji.
+     *
+     * @param emoji - The emoji that the mouse entered
+     */
+    onMouseEnter: (emoji: IEmoji) => void;
+    /**
+     * Called when the mouse leaves the emoji.
+     *
+     * @param emoji - The emoji that the mouse left
+     */
+    onMouseLeave: (emoji: IEmoji) => void;
+    /**
+     * If true, the emoji will be disabled and not clickable.
+     */
+    disabled?: boolean;
+    /**
+     * The id to use for the emoji button.
+     */
+    id?: string;
+    /**
+     * Optional class name to apply to the emoji button.
+     */
+    className?: string;
+}
+
+/**
+ * A single emoji cell rendered in the emoji picker.
+ */
+export const Emoji = React.memo(function Emoji({
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    emoji,
+    selectedEmojis,
+    disabled,
+    id,
+    className,
+}: IProps): React.ReactNode {
+    const isSelected = selectedEmojis?.has(emoji.unicode);
+
+    const onMouseEnterWrapped = useCallback(() => onMouseEnter(emoji), [onMouseEnter, emoji]);
+    const onMouseLeaveWrapped = useCallback(() => onMouseLeave(emoji), [onMouseLeave, emoji]);
+
+    return (
+        <RovingButton
+            id={id}
+            onClick={(ev) => onClick(ev, emoji)}
+            onMouseEnter={onMouseEnterWrapped}
+            onMouseLeave={onMouseLeaveWrapped}
+            className={className}
+            disabled={disabled || undefined}
+            role={selectedEmojis ? "checkbox" : undefined}
+            aria-checked={isSelected}
+            focusOnMouseOver
+        >
+            <div className={classNames(styles.item, { [styles.itemSelected]: isSelected })}>{emoji.unicode}</div>
+        </RovingButton>
+    );
+});
diff --git a/packages/shared-components/src/core/EmojiPicker/EmojiPicker.module.css b/packages/shared-components/src/core/EmojiPicker/EmojiPicker.module.css
new file mode 100644
index 0000000000..3ec00989bf
--- /dev/null
+++ b/packages/shared-components/src/core/EmojiPicker/EmojiPicker.module.css
@@ -0,0 +1,227 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ * Copyright 2019 Tulir Asokan <tulir@maunium.net>
+ *
+ * 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.
+ */
+
+.picker {
+    width: 340px;
+    height: min(450px, 80vh);
+    max-height: 80vh;
+
+    border-radius: 4px;
+
+    display: flex;
+    flex-direction: column;
+}
+
+.body {
+    margin-left: var(--cpd-space-1-5x);
+    flex: 1;
+    overflow-y: scroll;
+}
+
+.header {
+    padding: var(--cpd-space-1x) var(--cpd-space-2x) 0;
+    border-bottom: 1px solid var(--cpd-color-gray-400);
+}
+
+.anchor {
+    border: none;
+    padding: var(--cpd-space-1x) 0;
+    /* We have to explicitly inherit the font as button browser styles are implicitly ignorant */
+    font: inherit;
+    font-size: var(--cpd-font-size-heading-sm);
+    line-height: 1;
+    border-bottom: 2px solid transparent;
+    background-color: transparent;
+    border-radius: 4px 4px 0 0;
+
+    width: 36px;
+    height: 36px;
+
+    color: var(--cpd-color-text-primary);
+    display: inline-block;
+
+    /*
+     * These have 'text' in them because they're emoji, but it doesn't make sense for the user
+     * to be able to select it
+     */
+    user-select: none;
+
+    &:not(:disabled) {
+        cursor: pointer;
+    }
+
+    &:disabled {
+        filter: opacity(0.3);
+    }
+
+    &:not(:disabled):hover {
+        background-color: var(--cpd-color-bg-subtle-primary);
+        border-bottom: 2px solid var(--cpd-color-text-action-accent);
+    }
+}
+
+.anchorSelected {
+    border-bottom: 2px solid var(--cpd-color-text-action-accent);
+}
+
+.search {
+    margin: 8px;
+    border-radius: 4px;
+    border: 1px solid var(--cpd-color-border-interactive-secondary);
+    background-color: var(--cpd-color-bg-canvas-default);
+    display: flex;
+
+    input {
+        flex: 1;
+        border: none;
+        padding: var(--cpd-space-1x) var(--cpd-space-3x);
+        border-radius: 4px 0;
+
+        &::placeholder {
+            color: var(--cpd-color-text-secondary);
+        }
+    }
+
+    button {
+        border: none;
+        background-color: inherit;
+        margin: 0;
+        padding: var(--cpd-space-2x);
+        align-self: center;
+        width: 32px;
+        height: 32px;
+        cursor: pointer;
+
+        svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+
+.searchIcon {
+    width: 18px;
+    margin: var(--cpd-space-2x);
+
+    svg {
+        width: 100%;
+        height: 100%;
+        color: var(--cpd-color-text-primary);
+    }
+}
+
+.category {
+    padding: 0 var(--cpd-space-3x);
+}
+
+.categoryLabel {
+    width: 304px;
+    font: var(--cpd-font-heading-sm-semibold);
+}
+
+.list {
+    padding: 0;
+    margin: 0;
+}
+
+/* A single row of emoji within the grid. Fixed to the width of EMOJIS_PER_ROW
+   cells so the row never wraps, offset to align with the category headers. */
+.row {
+    width: 304px;
+    margin: 0 var(--cpd-space-3x);
+}
+
+.itemWrapper {
+    display: inline-block;
+    list-style: none;
+    width: 38px;
+    cursor: pointer;
+
+    &:focus-within {
+        background-color: var(--cpd-color-bg-subtle-primary);
+    }
+}
+
+.bodyShowHighlight .itemWrapper [tabindex="0"] .item {
+    background-color: var(--cpd-color-bg-subtle-primary);
+}
+
+.item {
+    display: inline-block;
+    font-size: var(--cpd-font-size-heading-sm);
+    padding: 5px;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    text-align: center;
+    border-radius: 4px;
+
+    &:hover {
+        background-color: var(--cpd-color-bg-subtle-primary);
+    }
+}
+
+.itemSelected {
+    color: rgb(0, 0, 0, 0.5);
+    border: 1px solid var(--cpd-color-text-action-accent);
+    padding: var(--cpd-space-1x);
+}
+
+.categoryLabel,
+.previewName {
+    font-size: 1rem;
+    font-weight: var(--cpd-font-weight-semibold);
+    margin: 0;
+}
+
+.footer {
+    border-top: 1px solid var(--cpd-color-gray-400);
+    min-height: 72px;
+    max-height: 72px;
+
+    display: flex;
+    align-items: center;
+}
+
+.previewEmoji {
+    font-size: var(--cpd-font-size-heading-xl);
+    padding: var(--cpd-space-2x) var(--cpd-space-4x);
+}
+
+.previewText {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    flex-direction: column;
+}
+
+.name {
+    text-transform: capitalize;
+}
+
+.shortcode {
+    color: var(--cpd-color-text-secondary);
+    overflow-wrap: break-word;
+    font: var(--cpd-font-body-md-regular);
+
+    &::before,
+    &::after {
+        content: ":";
+    }
+}
+
+.quick {
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.quickHeader .name {
+    margin-right: var(--cpd-space-1x);
+}
diff --git a/packages/shared-components/src/core/EmojiPicker/EmojiPicker.stories.tsx b/packages/shared-components/src/core/EmojiPicker/EmojiPicker.stories.tsx
new file mode 100644
index 0000000000..8f67ddc773
--- /dev/null
+++ b/packages/shared-components/src/core/EmojiPicker/EmojiPicker.stories.tsx
@@ -0,0 +1,53 @@
+/*
+ * Copyright 2026 Element Creations 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 Meta, type StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+
+import { EmojiPicker } from "./EmojiPicker";
+
+const meta = {
+    title: "Core/EmojiPicker",
+    component: EmojiPicker,
+    tags: ["autodocs"],
+    args: {
+        onChoose: fn(() => true),
+        onFinished: fn(),
+        onRecordRecent: fn(),
+    },
+} satisfies Meta<typeof EmojiPicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithRecents: Story = {
+    args: {
+        recentEmojis: ["👍", "🎉", "❤️", "🚀"],
+    },
+};
+
+export const WithSelected: Story = {
+    args: {
+        selectedEmojis: new Set(["😀", "🙂"]),
+    },
+};
+
+export const DisabledEmoji: Story = {
+    // Disable screenshot because it doesn't actually look any different
+    tags: ["!snapshot"],
+    args: {
+        isEmojiDisabled: (unicode: string) => unicode === "😀",
+    },
+};
+
+export const HideQuickReactions: Story = {
+    args: {
+        showQuickReactions: false,
+    },
+};
diff --git a/apps/web/test/unit-tests/components/views/emojipicker/EmojiPicker-test.tsx b/packages/shared-components/src/core/EmojiPicker/EmojiPicker.test.tsx
similarity index 58%
rename from apps/web/test/unit-tests/components/views/emojipicker/EmojiPicker-test.tsx
rename to packages/shared-components/src/core/EmojiPicker/EmojiPicker.test.tsx
index 951e17ce66..9a62177f71 100644
--- a/apps/web/test/unit-tests/components/views/emojipicker/EmojiPicker-test.tsx
+++ b/packages/shared-components/src/core/EmojiPicker/EmojiPicker.test.tsx
@@ -1,185 +1,151 @@
 /*
-Copyright 2024 New Vector Ltd.
-Copyright 2023 The Matrix.org Foundation C.I.C.
+ * Copyright 2026 Element Creations Ltd.
+ * Copyright 2023 The Matrix.org Foundation C.I.C.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
 
-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, { createRef } from "react";
-import { render, waitFor, act } from "jest-matrix-react";
+import React from "react";
+import { DATA_BY_CATEGORY } from "@matrix-org/emojibase-bindings";
 import userEvent from "@testing-library/user-event";
+import { render, waitFor, screen } from "@test-utils";
+import { describe, expect, it, vi } from "vitest";
 
-import EmojiPicker from "../../../../../src/components/views/emojipicker/EmojiPicker";
-import { stubClient } from "../../../../test-utils";
-import SettingsStore from "../../../../../src/settings/SettingsStore";
+import { EmojiPicker, filterEmojis } from "./EmojiPicker";
 
 describe("EmojiPicker", function () {
-    stubClient();
+    // Recent emojis as they would be provided by the app, most used first
+    const RECENT_EMOJIS = ["😀", "🎉", "❤️"];
 
     // Helper to get the currently active emoji's text content from the grid
     const getActiveEmojiText = (container: HTMLElement): string =>
-        container.querySelector('.mx_EmojiPicker_body .mx_EmojiPicker_item_wrapper [tabindex="0"]')?.textContent || "";
+        container.querySelector('[role="gridcell"] [tabindex="0"]')?.textContent || "";
 
-    beforeEach(() => {
-        // Clear recent emojis to prevent test pollution
-        jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName) => {
-            if (settingName === "recent_emoji") return [] as any;
-            return jest.requireActual("../../../../../src/settings/SettingsStore").default.getValue(settingName);
-        });
+    it("should disable the recent category when no recent emojis", () => {
+        render(<EmojiPicker onChoose={() => false} onFinished={vi.fn()} />);
+
+        const recentTab = screen.getByRole("tab", { name: "🕒" });
+        expect(recentTab).toBeDisabled();
     });
 
-    afterEach(() => {
-        jest.restoreAllMocks();
+    it("should select the people category by default when no recent emojis", () => {
+        render(<EmojiPicker onChoose={() => false} onFinished={vi.fn()} />);
+
+        const peopleTab = screen.getByRole("tab", { name: "😀" });
+        expect(peopleTab).toHaveAttribute("aria-selected", "true");
     });
 
-    it("should initialize categories with correct state when no recent emojis", () => {
-        const ref = createRef<EmojiPicker>();
-        render(<EmojiPicker ref={ref} onChoose={(str: string) => false} onFinished={jest.fn()} />);
+    it("should enable and select the recent category when recent emojis are supplied", () => {
+        render(<EmojiPicker onChoose={() => false} onFinished={vi.fn()} recentEmojis={RECENT_EMOJIS} />);
 
-        //@ts-ignore private access
-        const categories = ref.current!.categories;
-
-        // Verify we have all expected categories
-        expect(categories).toHaveLength(9);
-        expect(categories.map((c) => c.id)).toEqual([
-            "recent",
-            "people",
-            "nature",
-            "foods",
-            "activity",
-            "places",
-            "objects",
-            "symbols",
-            "flags",
-        ]);
-
-        // Recent category should be disabled when empty
-        const recentCategory = categories.find((c) => c.id === "recent");
-        expect(recentCategory).toMatchObject({
-            id: "recent",
-            enabled: false,
-            visible: false,
-            firstVisible: false,
-        });
-
-        // People category should be the first visible when no recent emojis
-        const peopleCategory = categories.find((c) => c.id === "people");
-        expect(peopleCategory).toMatchObject({
-            id: "people",
-            enabled: true,
-            visible: true,
-            firstVisible: true,
-        });
-
-        // Other categories should start as not visible and not firstVisible
-        const natureCategory = categories.find((c) => c.id === "nature");
-        expect(natureCategory).toMatchObject({
-            id: "nature",
-            enabled: true,
-            visible: false,
-            firstVisible: false,
-        });
-
-        const flagsCategory = categories.find((c) => c.id === "flags");
-        expect(flagsCategory).toMatchObject({
-            id: "flags",
-            enabled: true,
-            visible: false,
-            firstVisible: false,
-        });
-
-        // All categories should have refs and names
-        categories.forEach((cat) => {
-            expect(cat.ref).toBeTruthy();
-            expect(cat.name).toBeTruthy();
-        });
+        const recentTab = screen.getByRole("tab", { name: "🕒" });
+        expect(recentTab).toBeEnabled();
+        expect(recentTab).toHaveAttribute("aria-selected", "true");
     });
 
-    it("should initialize categories with recent as firstVisible when recent emojis exist", () => {
-        // Mock recent emojis
-        jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName) => {
-            if (settingName === "recent_emoji") return ["😀", "🎉", "❤️"] as any;
-            return jest.requireActual("../../../../../src/settings/SettingsStore").default.getValue(settingName);
+    it("should record recent emoji when onChoose does not return false", async () => {
+        const onChoose = vi.fn(() => true);
+        const onRecordRecent = vi.fn();
+        const { container } = render(
+            <EmojiPicker onChoose={onChoose} onFinished={vi.fn()} onRecordRecent={onRecordRecent} />,
+        );
+
+        await waitFor(() => {
+            expect(container.querySelector('[role="gridcell"]')).toBeInTheDocument();
         });
 
-        const ref = createRef<EmojiPicker>();
-        render(<EmojiPicker ref={ref} onChoose={(str: string) => false} onFinished={jest.fn()} />);
+        await userEvent.click(container.querySelector('[role="gridcell"] [role="button"]')!);
+        expect(onChoose).toHaveBeenCalledWith("😀");
+        expect(onRecordRecent).toHaveBeenCalledWith("😀");
+    });
 
-        //@ts-ignore private access
-        const categories = ref.current!.categories;
+    it("should not record recent emoji when onChoose returns false", async () => {
+        const onRecordRecent = vi.fn();
+        const { container } = render(
+            <EmojiPicker onChoose={() => false} onFinished={vi.fn()} onRecordRecent={onRecordRecent} />,
+        );
 
-        // Recent category should be enabled and firstVisible
-        const recentCategory = categories.find((c) => c.id === "recent");
-        expect(recentCategory).toMatchObject({
-            id: "recent",
-            enabled: true,
-            visible: true,
-            firstVisible: true,
+        await waitFor(() => {
+            expect(container.querySelector('[role="gridcell"]')).toBeInTheDocument();
         });
 
-        // People category should be visible but NOT firstVisible when recent exists
-        const peopleCategory = categories.find((c) => c.id === "people");
-        expect(peopleCategory).toMatchObject({
-            id: "people",
-            enabled: true,
-            visible: true,
-            firstVisible: false,
-        });
+        await userEvent.click(container.querySelector('[role="gridcell"] [role="button"]')!);
+        expect(onRecordRecent).not.toHaveBeenCalled();
     });
 
     it("should not mangle default order after filtering", async () => {
-        const ref = createRef<EmojiPicker>();
-        const { container } = render(
-            <EmojiPicker ref={ref} onChoose={(str: string) => false} onFinished={jest.fn()} />,
+        const { container } = render(<EmojiPicker onChoose={() => false} onFinished={vi.fn()} />);
+
+        // Extract the list of emoji currently visible in the grid
+        const getVisibleEmojis = (): string[] =>
+            Array.from(container.querySelectorAll('[role="gridcell"]')).map((cell) => cell.textContent || "");
+
+        await waitFor(() => {
+            expect(container.querySelector('[role="gridcell"]')).toBeInTheDocument();
+        });
+
+        // Wait for the virtualized rows to settle (out-of-view categories drop
+        // their transient initial rows once measured) before capturing.
+        const beforeEmojis = getVisibleEmojis();
+
+        const input = container.querySelector("input")!;
+
+        // Apply a filter and assert that the visible emoji have changed
+        await userEvent.type(input, "test");
+        await waitFor(() => expect(getVisibleEmojis()).not.toEqual(beforeEmojis));
+
+        // There may be different numbers of emoji before after since virtuoso may
+        // end up rendering more or fewer off screen. Chop any excess off so that it's
+        // just the *order* we're comparing.
+        await userEvent.clear(input);
+        await waitFor(() => {
+            const afterEmojis = getVisibleEmojis();
+            const length = Math.min(beforeEmojis.length, afterEmojis.length);
+            expect(afterEmojis.slice(0, length)).toEqual(beforeEmojis.slice(0, length));
+        });
+    });
+
+    it("should keep the filter applied when recentEmojis prop is changed", async () => {
+        const { container, rerender } = render(
+            <EmojiPicker onChoose={() => false} onFinished={vi.fn()} recentEmojis={[...RECENT_EMOJIS]} />,
         );
 
-        // Record the HTML before filtering
-        const beforeHtml = container.innerHTML;
+        const getVisibleEmojis = (): string[] =>
+            Array.from(container.querySelectorAll('[role="gridcell"]')).map((cell) => cell.textContent || "");
 
-        // Apply a filter and assert that the HTML has changed
-        //@ts-ignore private access
-        act(() => ref.current!.onChangeFilter("test"));
-        expect(beforeHtml).not.toEqual(container.innerHTML);
+        const input = container.querySelector("input")!;
+        await userEvent.type(input, "wave");
+        await waitFor(() => expect(getVisibleEmojis()).toContain("👋"));
+        const filtered = getVisibleEmojis();
 
-        // Clear the filter and assert that the HTML matches what it was before filtering
-        //@ts-ignore private access
-        act(() => ref.current!.onChangeFilter(""));
-        await waitFor(() => expect(beforeHtml).toEqual(container.innerHTML));
+        // add another recently used emoji but it doesn't match the filter, so it should not change what's visible.
+        rerender(<EmojiPicker onChoose={() => false} onFinished={vi.fn()} recentEmojis={["🦡", ...RECENT_EMOJIS]} />);
+
+        expect(input).toHaveValue("wave");
+        expect(getVisibleEmojis()).toEqual(filtered);
     });
 
     it("sort emojis by shortcode and size", function () {
-        const ep = new EmojiPicker({ onChoose: (str: string) => false, onFinished: jest.fn() });
+        const sorted = filterEmojis(DATA_BY_CATEGORY.people, "heart");
 
-        //@ts-ignore private access
-        act(() => ep.onChangeFilter("heart"));
-
-        //@ts-ignore private access
-        expect(ep.memoizedDataByCategory["people"][0].shortcodes[0]).toEqual("heart");
-        //@ts-ignore private access
-        expect(ep.memoizedDataByCategory["people"][1].shortcodes[0]).toEqual("heartbeat");
+        expect(sorted[0].shortcodes[0]).toEqual("heart");
+        expect(sorted[1].shortcodes[0]).toEqual("heartbeat");
     });
 
     it("should allow keyboard navigation using arrow keys", async () => {
-        // mock offsetParent
-        Object.defineProperty(HTMLElement.prototype, "offsetParent", {
-            get() {
-                return this.parentNode;
-            },
-        });
-
-        const onChoose = jest.fn();
-        const onFinished = jest.fn();
+        const onChoose = vi.fn();
+        const onFinished = vi.fn();
         const { container } = render(<EmojiPicker onChoose={onChoose} onFinished={onFinished} />);
 
         const input = container.querySelector("input")!;
-        expect(input).toHaveFocus();
+        await waitFor(() => expect(input).toHaveFocus());
 
         function getEmoji(): string {
             return getActiveEmojiText(container);
         }
 
-        expect(getEmoji()).toEqual("😀");
+        await waitFor(() => expect(getEmoji()).toEqual("😀"));
         // First arrow key press shows highlight without navigating
         await userEvent.keyboard("[ArrowDown]");
         expect(getEmoji()).toEqual("😀");
@@ -189,6 +155,7 @@ describe("EmojiPicker", function () {
         await userEvent.keyboard("[ArrowUp]");
         expect(getEmoji()).toEqual("😀");
         await userEvent.keyboard("Flag");
+        await waitFor(() => expect(getEmoji()).not.toEqual("😀"));
         await userEvent.keyboard("[ArrowRight]");
         await userEvent.keyboard("[ArrowRight]");
         expect(getEmoji()).toEqual("📫️");
@@ -207,19 +174,12 @@ describe("EmojiPicker", function () {
     });
 
     it("should move actual focus when navigating between emojis after Tab", async () => {
-        // mock offsetParent
-        Object.defineProperty(HTMLElement.prototype, "offsetParent", {
-            get() {
-                return this.parentNode;
-            },
-        });
-
-        const onChoose = jest.fn();
-        const onFinished = jest.fn();
+        const onChoose = vi.fn();
+        const onFinished = vi.fn();
         const { container } = render(<EmojiPicker onChoose={onChoose} onFinished={onFinished} />);
 
         const input = container.querySelector("input")!;
-        expect(input).toHaveFocus();
+        await waitFor(() => expect(input).toHaveFocus());
 
         // Wait for emojis to render
         await waitFor(() => {
@@ -272,19 +232,12 @@ describe("EmojiPicker", function () {
     });
 
     it("should not select emoji on Enter press before highlight is shown", async () => {
-        // mock offsetParent
-        Object.defineProperty(HTMLElement.prototype, "offsetParent", {
-            get() {
-                return this.parentNode;
-            },
-        });
-
-        const onChoose = jest.fn();
-        const onFinished = jest.fn();
+        const onChoose = vi.fn();
+        const onFinished = vi.fn();
         const { container } = render(<EmojiPicker onChoose={onChoose} onFinished={onFinished} />);
 
         const input = container.querySelector("input")!;
-        expect(input).toHaveFocus();
+        await waitFor(() => expect(input).toHaveFocus());
 
         // Wait for emojis to render
         await waitFor(() => {
@@ -310,26 +263,19 @@ describe("EmojiPicker", function () {
     });
 
     it("should reset to first emoji when filter is cleared after navigation", async () => {
-        // mock offsetParent
-        Object.defineProperty(HTMLElement.prototype, "offsetParent", {
-            get() {
-                return this.parentNode;
-            },
-        });
-
-        const onChoose = jest.fn();
-        const onFinished = jest.fn();
+        const onChoose = vi.fn();
+        const onFinished = vi.fn();
         const { container } = render(<EmojiPicker onChoose={onChoose} onFinished={onFinished} />);
 
         const input = container.querySelector("input")!;
-        expect(input).toHaveFocus();
+        await waitFor(() => expect(input).toHaveFocus());
 
         function getEmoji(): string {
             return getActiveEmojiText(container);
         }
 
         // Initially on first emoji
-        expect(getEmoji()).toEqual("😀");
+        await waitFor(() => expect(getEmoji()).toEqual("😀"));
 
         // Show highlight with first arrow press
         await userEvent.keyboard("[ArrowDown]");
@@ -365,18 +311,41 @@ describe("EmojiPicker", function () {
         expect(getEmoji()).toEqual("🙂");
     });
 
-    describe("Category keyboard selection", () => {
-        beforeEach(() => {
-            // mock offsetParent
-            Object.defineProperty(HTMLElement.prototype, "offsetParent", {
-                get() {
-                    return this.parentNode;
-                },
-            });
-        });
+    it("should point aria-activedescendant at the active emoji while searching", async () => {
+        const { container } = render(<EmojiPicker onChoose={vi.fn()} onFinished={vi.fn()} />);
 
+        const input = container.querySelector("input")!;
+        await waitFor(() => expect(input).toHaveFocus());
+
+        function getActiveEmoji(): HTMLElement {
+            return container.querySelector<HTMLElement>('[role="gridcell"] [tabindex="0"]')!;
+        }
+
+        // With no query, the input must not claim an active descendant: doing so makes
+        // screen readers read out the first emoji merely on focusing the input.
+        await waitFor(() => expect(getActiveEmoji()).toBeInTheDocument());
+        expect(input).not.toHaveAttribute("aria-activedescendant");
+
+        // Once there's a query, the active emoji must be identified to screen readers,
+        // which requires the emoji cells to have IDs for aria-activedescendant to target.
+        await userEvent.type(input, "te");
+        await waitFor(() => expect(getActiveEmoji().textContent).toEqual("🧑‍🏫"));
+
+        const activeId = getActiveEmoji().id;
+        expect(activeId).not.toEqual("");
+        expect(input).toHaveAttribute("aria-activedescendant", activeId);
+        expect(container.querySelectorAll(`[id="${activeId}"]`)).toHaveLength(1);
+
+        // ...and it must follow the selection as the query changes
+        await userEvent.type(input, "s");
+        await waitFor(() => expect(getActiveEmoji().textContent).toEqual("🧪"));
+        expect(input).toHaveAttribute("aria-activedescendant", getActiveEmoji().id);
+        expect(getActiveEmoji().id).not.toEqual(activeId);
+    });
+
+    describe("Category keyboard selection", () => {
         it("check tabindex for the first category when no recent emojis", async () => {
-            const { container } = render(<EmojiPicker onChoose={jest.fn()} onFinished={jest.fn()} />);
+            const { container } = render(<EmojiPicker onChoose={vi.fn()} onFinished={vi.fn()} />);
 
             await waitFor(() => {
                 expect(container.querySelector('[data-category-id="people"]')).toBeInTheDocument();
@@ -393,13 +362,9 @@ describe("EmojiPicker", function () {
         });
 
         it("check tabindex for recent category when recent emojis exist", async () => {
-            // Mock recent emojis
-            jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName) => {
-                if (settingName === "recent_emoji") return ["😀", "🎉"] as any;
-                return jest.requireActual("../../../../../src/settings/SettingsStore").default.getValue(settingName);
-            });
-
-            const { container } = render(<EmojiPicker onChoose={jest.fn()} onFinished={jest.fn()} />);
+            const { container } = render(
+                <EmojiPicker recentEmojis={RECENT_EMOJIS.slice(0, 2)} onChoose={vi.fn()} onFinished={vi.fn()} />,
+            );
 
             await waitFor(() => {
                 expect(container.querySelector('[data-category-id="recent"]')).toBeInTheDocument();
@@ -416,18 +381,18 @@ describe("EmojiPicker", function () {
         });
 
         it("should update table position when clicking on a different category tab", async () => {
-            const { container } = render(<EmojiPicker onChoose={jest.fn()} onFinished={jest.fn()} />);
+            const { container } = render(<EmojiPicker onChoose={vi.fn()} onFinished={vi.fn()} />);
 
             await waitFor(() => {
                 expect(container.querySelector('[data-category-id="people"]')).toBeInTheDocument();
             });
 
             // Initially, people category should be visible
-            const peopleTab = container.querySelector('[title*="Smileys"]') as HTMLButtonElement;
+            const peopleTab = container.querySelector('[title*="Smileys"]')!;
             expect(peopleTab).toHaveAttribute("tabindex", "0");
 
             // Click on nature category tab
-            const natureTab = container.querySelector('[title*="Animals"]') as HTMLButtonElement;
+            const natureTab = container.querySelector('[title*="Animals"]')!;
             await userEvent.click(natureTab);
 
             // Wait for scroll and visibility update
@@ -438,14 +403,14 @@ describe("EmojiPicker", function () {
         });
 
         it("should navigate between category tabs using arrow keys", async () => {
-            const { container } = render(<EmojiPicker onChoose={jest.fn()} onFinished={jest.fn()} />);
+            const { container } = render(<EmojiPicker onChoose={vi.fn()} onFinished={vi.fn()} />);
 
             await waitFor(() => {
                 expect(container.querySelector('[data-category-id="people"]')).toBeInTheDocument();
             });
 
             // Focus on the category header
-            const peopleTab = container.querySelector('[title*="Smileys"]') as HTMLButtonElement;
+            const peopleTab = container.querySelector<HTMLButtonElement>('[title*="Smileys"]')!;
             peopleTab.focus();
             expect(peopleTab).toHaveFocus();
 
@@ -465,21 +430,21 @@ describe("EmojiPicker", function () {
         });
 
         it("should navigate to first/last category using Home/End keys", async () => {
-            const { container } = render(<EmojiPicker onChoose={jest.fn()} onFinished={jest.fn()} />);
+            const { container } = render(<EmojiPicker onChoose={vi.fn()} onFinished={vi.fn()} />);
 
             await waitFor(() => {
                 expect(container.querySelector('[data-category-id="people"]')).toBeInTheDocument();
             });
 
             // Focus on the category header
-            const peopleTab = container.querySelector('[title*="Smileys"]') as HTMLButtonElement;
+            const peopleTab = container.querySelector<HTMLButtonElement>('[title*="Smileys"]')!;
             peopleTab.focus();
 
             // Press End to jump to last category
             await userEvent.keyboard("[End]");
 
             await waitFor(() => {
-                const flagsTab = container.querySelector('[title*="Flags"]') as HTMLButtonElement;
+                const flagsTab = container.querySelector('[title*="Flags"]')!;
                 expect(flagsTab).toHaveFocus();
             });
 
diff --git a/packages/shared-components/src/core/EmojiPicker/EmojiPicker.tsx b/packages/shared-components/src/core/EmojiPicker/EmojiPicker.tsx
new file mode 100644
index 0000000000..1903a860bc
--- /dev/null
+++ b/packages/shared-components/src/core/EmojiPicker/EmojiPicker.tsx
@@ -0,0 +1,491 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ * Copyright 2020 The Matrix.org Foundation C.I.C.
+ * Copyright 2019 Tulir Asokan <tulir@maunium.net>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type Dispatch, useCallback, useId, useMemo, useRef, useState } from "react";
+import { DATA_BY_CATEGORY, getEmojiFromUnicode, type Emoji as IEmoji } from "@matrix-org/emojibase-bindings";
+import { type ListRange, Virtuoso, type Components, type VirtuosoHandle } from "react-virtuoso";
+import { Heading } from "@vector-im/compound-web";
+import classNames from "classnames";
+
+import { _t, _td } from "../i18n/i18n";
+import { AutoHideScrollbar } from "../utils/Scrollbar";
+import {
+    type IAction as RovingAction,
+    type IState as RovingState,
+    RovingGridIndexProvider,
+    RovingStateActionType,
+    type RovingTabIndexProviderProps,
+} from "../roving";
+import { Tabs } from "./Tabs";
+import { Search } from "./Search";
+import { Preview } from "./Preview";
+import { QuickReactions } from "./QuickReactions";
+import { Emoji } from "./Emoji";
+import { type ButtonEvent } from "./RovingButton";
+import styles from "./EmojiPicker.module.css";
+
+const ZERO_WIDTH_JOINER = "\u200D";
+
+export const EMOJI_HEIGHT = 35;
+export const EMOJIS_PER_ROW = 8;
+
+const CATEGORY_CONFIG: Category[] = [
+    { id: "recent", untranslatedName: _td("emoji|category_frequently_used"), emoji: "🕒" },
+    { id: "people", untranslatedName: _td("emoji|category_smileys_people"), emoji: "😀" },
+    { id: "nature", untranslatedName: _td("emoji|category_animals_nature"), emoji: "🐕" },
+    { id: "foods", untranslatedName: _td("emoji|category_food_drink"), emoji: "🍎" },
+    { id: "activity", untranslatedName: _td("emoji|category_activities"), emoji: "⚽️" },
+    { id: "places", untranslatedName: _td("emoji|category_travel_places"), emoji: "🚗" },
+    { id: "objects", untranslatedName: _td("emoji|category_objects"), emoji: "💡" },
+    { id: "symbols", untranslatedName: _td("emoji|category_symbols"), emoji: "⁉️" },
+    { id: "flags", untranslatedName: _td("emoji|category_flags"), emoji: "🏁" },
+];
+
+export type CategoryKey = keyof typeof DATA_BY_CATEGORY | "recent";
+
+export interface Category {
+    id: CategoryKey;
+    untranslatedName: TranslationKey;
+    // Emoji to show in the header for this category
+    emoji: string;
+}
+
+/**
+ * A single entry in the flat virtual list: either a category header or a row of
+ * emoji. Headers are interleaved with the rows so that they scroll inline with
+ * the content rather than staying pinned to the top.
+ */
+type ListItem = { type: "header"; category: Category } | { type: "row"; emojis: IEmoji[]; categoryId: CategoryKey };
+
+// Stable component identities so Virtuoso does not remount its internals on re-render.
+// The single Virtuoso renders a flat list that mixes category headers and emoji rows.
+// The Item wrapper picks its semantics per entry: a plain block for headers, a grid
+// row for emoji rows.
+const GridList: Components<ListItem>["List"] = ({ ref, ...props }) => {
+    return <div {...props} ref={ref} className={styles.list} role="grid" aria-multiselectable />;
+};
+
+const GridItem: Components<ListItem>["Item"] = ({ item, ...props }) => {
+    // Headers are interleaved with emoji rows as direct children of the role="grid"
+    // list, so they must also be grid rows: a grid may only own rows/rowgroups.
+    if (item.type === "header") {
+        return <div {...props} role="row" />;
+    }
+    return <div {...props} role="row" className={styles.row} />;
+};
+
+const gridComponents = { List: GridList, Item: GridItem };
+
+/**
+ * Props for {@link EmojiPicker}.
+ */
+export interface EmojiPickerProps {
+    /**
+     * Set of which emojis are already selected and should be decorated as such.
+     * If specified, emoji will use a checkbox role with aria-checked set appropriately.
+     */
+    selectedEmojis?: Set<string>;
+    /**
+     * Called when the user chooses an emoji.
+     *
+     * Return `false` to prevent the emoji being recorded as recently used.
+     */
+    onChoose: (unicode: string) => boolean;
+    /**
+     * Called when the picker is done, e.g. an emoji was chosen with Enter.
+     */
+    onFinished: () => void;
+    /**
+     * Returns whether the emoji with the given unicode should be disabled.
+     */
+    isEmojiDisabled?: (unicode: string) => boolean;
+    /**
+     * Recently used emoji (unicode strings, most relevant first) to show in the
+     * "Frequently Used" category. The category is hidden when empty or omitted.
+     */
+    recentEmojis?: string[];
+    /**
+     * Called with the chosen emoji unicode when it should be recorded as
+     * recently used, i.e. when {@link onChoose} did not return `false`.
+     */
+    onRecordRecent?: (unicode: string) => void;
+    /**
+     * Optional action resolver used to map keyboard events to roving actions,
+     * e.g. to apply app-level custom keybindings.
+     *
+     * When omitted, a default mapping based on `KeyboardEvent.key` is used.
+     */
+    getAction?: RovingTabIndexProviderProps["getAction"];
+    /**
+     * Whether to show the quick reactions at the bottom of the picker. Defaults to true.
+     * Previews of emoji are displayed in the same bar as will also be hidden when this is false.
+     */
+    showQuickReactions?: boolean;
+}
+
+/** Convert recent emoji characters to emoji data, removing unknowns and duplicates */
+function resolveRecentEmojis(recentEmojis: string[] | undefined): IEmoji[] {
+    return Array.from(
+        new Set((recentEmojis ?? []).map(getEmojiFromUnicode).filter((emoji): emoji is IEmoji => !!emoji)),
+    );
+}
+
+function emojiMatchesFilter(emoji: IEmoji, filter: string): boolean {
+    // If the query is an emoji containing a variation then strip it to provide more useful matches
+    if (filter.includes(ZERO_WIDTH_JOINER)) {
+        filter = filter.split(ZERO_WIDTH_JOINER, 2)[0];
+    }
+    return (
+        emoji.label.toLowerCase().includes(filter) ||
+        (Array.isArray(emoji.emoticon)
+            ? emoji.emoticon.some((x) => x.includes(filter))
+            : emoji.emoticon?.includes(filter)) ||
+        emoji.shortcodes.some((x) => x.toLowerCase().includes(filter)) ||
+        emoji.unicode.split(ZERO_WIDTH_JOINER).includes(filter)
+    );
+}
+
+/**
+ * Filter the given emoji by the (already lower-cased and trimmed) query and
+ * sort matches so the most relevant shortcodes come first. Returns the input
+ * unchanged when the filter is empty. Never mutates the input array.
+ *
+ * @param emojis - The emoji to filter
+ * @param lcFilter - The lower-cased and trimmed filter string
+ *
+ * @returns The filtered and sorted emoji
+ */
+export function filterEmojis(emojis: IEmoji[], lcFilter: string): IEmoji[] {
+    if (lcFilter === "") return emojis;
+
+    return emojis
+        .filter((emoji) => emojiMatchesFilter(emoji, lcFilter))
+        .sort((a, b) => {
+            const indexA = a.shortcodes[0].indexOf(lcFilter);
+            const indexB = b.shortcodes[0].indexOf(lcFilter);
+
+            // Prioritize emojis containing the filter in its shortcode
+            if (indexA == -1 || indexB == -1) {
+                return indexB - indexA;
+            }
+
+            // If both emojis start with the filter
+            // put the shorter emoji first
+            if (indexA == 0 && indexB == 0) {
+                return a.shortcodes[0].length - b.shortcodes[0].length;
+            }
+
+            // Prioritize emojis starting with the filter
+            return indexA - indexB;
+        });
+}
+
+/**
+ * A searchable emoji picker with categories, quick reactions and keyboard
+ * (roving grid) navigation.
+ */
+export function EmojiPicker({
+    selectedEmojis,
+    onChoose,
+    onFinished,
+    isEmojiDisabled,
+    recentEmojis,
+    onRecordRecent,
+    getAction,
+    showQuickReactions = true,
+}: EmojiPickerProps): React.ReactNode {
+    const [filter, setFilter] = useState("");
+    const [previewEmoji, setPreviewEmoji] = useState<IEmoji | undefined>(undefined);
+    // Track if user has interacted with arrow keys or search
+    const [showHighlight, setShowHighlight] = useState(false);
+    // The scroll container of the picker body, once mounted. The Virtuoso windows
+    // its rows against this shared scroll parent.
+    const [scrollElement, setScrollElement] = useState<HTMLDivElement | null>(null);
+
+    const searchRef = useRef<HTMLInputElement>(null);
+    const virtuosoRef = useRef<VirtuosoHandle>(null);
+
+    const recentlyUsed = useMemo(() => resolveRecentEmojis(recentEmojis), [recentEmojis]);
+
+    const lcFilter = filter.toLowerCase().trim(); // filter is case insensitive
+
+    // Compute emoji to show in each category and which categories are enabled
+    // (ie. non-empty) from the recently used list and the filter.
+    const { dataByCategory, enabledCategories } = useMemo(() => {
+        const dataByCategory = {} as Record<CategoryKey, IEmoji[]>;
+        const enabledCategories: CategoryKey[] = [];
+
+        for (const cat of CATEGORY_CONFIG) {
+            const emojis = filterEmojis(cat.id === "recent" ? recentlyUsed : DATA_BY_CATEGORY[cat.id], lcFilter);
+            dataByCategory[cat.id] = emojis;
+            if (emojis.length > 0) {
+                enabledCategories.push(cat.id);
+            }
+        }
+
+        return { dataByCategory, enabledCategories };
+    }, [lcFilter, recentlyUsed]);
+
+    const [selectedCategory, setSelectedCategory] = useState<CategoryKey>(
+        recentlyUsed.length > 0 ? "recent" : "people",
+    );
+
+    const collectScrollElement = useCallback((ref: HTMLDivElement | null): void => {
+        setScrollElement(ref);
+    }, []);
+
+    // Flatten into a list for virtuoso.
+    const items = useMemo<ListItem[]>(() => {
+        const flat: ListItem[] = [];
+        for (const cat of CATEGORY_CONFIG) {
+            const emojis = dataByCategory[cat.id];
+            if (emojis.length === 0) continue;
+            flat.push({ type: "header", category: cat });
+            for (let i = 0; i < emojis.length; i += EMOJIS_PER_ROW) {
+                flat.push({ type: "row", emojis: emojis.slice(i, i + EMOJIS_PER_ROW), categoryId: cat.id });
+            }
+        }
+        return flat;
+    }, [dataByCategory]);
+
+    const onRangeChanged = useCallback(
+        (range: ListRange): void => {
+            // Collect the categories that own any item within the rendered range. Each
+            // flat-list entry knows its category (headers directly, rows via categoryId),
+            // so a category is visible whenever one of its entries is in range - including
+            // when its header itself has scrolled out of view.
+            const visibleCategoryIds = new Set<CategoryKey>();
+            for (let i = range.startIndex; i <= range.endIndex; i++) {
+                const item = items[i];
+                if (!item) continue;
+                visibleCategoryIds.add(item.type === "header" ? item.category.id : item.categoryId);
+            }
+
+            setSelectedCategory(CATEGORY_CONFIG.find((cat) => visibleCategoryIds.has(cat.id))?.id ?? "people");
+        },
+        [items],
+    );
+
+    // Given a roving emoji button returns the role=gridcell element containing it
+    const getGridcell = useCallback((rovingNode?: Element): Element | undefined => {
+        return rovingNode?.parentElement ?? undefined;
+    }, []);
+
+    // Given a roving emoji button returns the role=row element containing it
+    const getRow = useCallback(
+        (rovingNode?: Element): Element | undefined => {
+            return getGridcell(rovingNode)?.parentElement ?? undefined;
+        },
+        [getGridcell],
+    );
+
+    // Given a role=gridcell node returns the roving emoji button contained within
+    const getRovingNode = useCallback((gridcellNode: Element): HTMLElement | undefined => {
+        const node = gridcellNode.children[0];
+        return node instanceof HTMLElement ? node : undefined;
+    }, []);
+
+    const onKeyDown = useCallback(
+        (ev: React.KeyboardEvent, state: RovingState, dispatch: Dispatch<RovingAction>): void => {
+            if (state.activeNode && ["ArrowDown", "ArrowRight", "ArrowLeft", "ArrowUp"].includes(ev.key)) {
+                // If highlight is not shown yet, show it and reset to first emoji
+                if (!showHighlight) {
+                    setShowHighlight(true);
+                    // Reset to first emoji when showing highlight for the first time (or after it was hidden)
+                    if (state.nodes.length > 0) {
+                        dispatch({
+                            type: RovingStateActionType.SetFocus,
+                            payload: { node: state.nodes[0] },
+                        });
+                    }
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    return;
+                }
+            }
+        },
+        [showHighlight],
+    );
+
+    const shouldMoveFocus = useCallback((): boolean => {
+        // If the search field is active, the grid will still move the selected element but we don't
+        // want it to change the focus because the user trying to type in the field.
+        // NB. This does still break the ability to navigate the text field with left/right arrows
+        // as they change the selected emoji in the grid. This seems… bad, but I'm keeping it how it was.
+        return document.activeElement !== searchRef.current;
+    }, []);
+
+    const onGridNavigation = useCallback(
+        (_ev: React.KeyboardEvent, focusNode: HTMLElement, state: RovingState): void => {
+            if (getRow(state.activeNode) !== getRow(focusNode)) {
+                focusNode.scrollIntoView({
+                    behavior: "auto",
+                    block: "center",
+                    inline: "center",
+                });
+            }
+        },
+        [getRow],
+    );
+
+    const scrollToCategory = useCallback(
+        (category: string): void => {
+            // Find the flat index of the category's header and scroll it to the top.
+            const index = items.findIndex((item) => item.type === "header" && item.category.id === category);
+            if (index >= 0) {
+                virtuosoRef.current?.scrollToIndex({ index, align: "start" });
+            }
+        },
+        [items],
+    );
+
+    const onChangeFilter = useCallback((newFilter: string): void => {
+        setFilter(newFilter);
+        // User has typed a query, show highlight.
+        // If the filter is cleared, hide the highlight again.
+        setShowHighlight(newFilter.trim() !== "");
+    }, []);
+
+    const onEnterFilter = useCallback((): void => {
+        // Only select emoji if highlight is shown
+        if (!showHighlight) return;
+
+        const btn = scrollElement?.querySelector<HTMLElement>('[role="gridcell"] [tabindex="0"]');
+        btn?.click();
+        onFinished();
+    }, [showHighlight, scrollElement, onFinished]);
+
+    const onHoverEmoji = useCallback((emoji: IEmoji): void => {
+        setPreviewEmoji(emoji);
+    }, []);
+
+    const onHoverEmojiEnd = useCallback((): void => {
+        setPreviewEmoji(undefined);
+    }, []);
+
+    const onClickEmoji = useCallback(
+        (ev: ButtonEvent, emoji: IEmoji): void => {
+            if (onChoose(emoji.unicode) !== false) {
+                onRecordRecent?.(emoji.unicode);
+            }
+            if ((ev as React.KeyboardEvent).key === "Enter") {
+                onFinished();
+            }
+        },
+        [onChoose, onRecordRecent, onFinished],
+    );
+
+    // Base for the IDs of the individual emoji cells: the search box points at the
+    // active cell with aria-activedescendant, which requires the cells to have IDs.
+    // It doesn't actually matter what the ID is, provided each is unique, because
+    // the search box queries the roving context for the active element and gets its ID.
+    // (generate a single unique ID and then suffix because hooks can't be called in
+    // a loop).
+    const emojiIdBase = useId();
+
+    const renderItem = useCallback(
+        (_index: number, item: ListItem): React.ReactNode => {
+            if (item.type === "header") {
+                const category = item.category;
+                return (
+                    <div className={styles.category} data-category-id={category.id} role="gridcell">
+                        <Heading as="h2" className={styles.categoryLabel}>
+                            {_t(category.untranslatedName)}
+                        </Heading>
+                    </div>
+                );
+            }
+            return item.emojis.map((emoji) => (
+                <div role="gridcell" className={styles.itemWrapper} key={emoji.hexcode}>
+                    <Emoji
+                        // The category is part of the ID because the same emoji can appear both in
+                        // its own category and in the recently used one.
+                        id={`${emojiIdBase}-${item.categoryId}-${emoji.hexcode}`}
+                        emoji={emoji}
+                        selectedEmojis={selectedEmojis}
+                        onClick={onClickEmoji}
+                        onMouseEnter={onHoverEmoji}
+                        onMouseLeave={onHoverEmojiEnd}
+                        disabled={isEmojiDisabled?.(emoji.unicode)}
+                    />
+                </div>
+            ));
+        },
+        [selectedEmojis, onClickEmoji, onHoverEmoji, onHoverEmojiEnd, isEmojiDisabled, emojiIdBase],
+    );
+
+    const pickerBodyId = useId();
+
+    return (
+        <RovingGridIndexProvider
+            getGridCell={getGridcell}
+            getRow={getRow}
+            getRovingNode={getRovingNode}
+            handleInputFields
+            moveFocus={shouldMoveFocus}
+            onGridNavigation={onGridNavigation}
+            onKeyDown={onKeyDown}
+            getAction={getAction}
+        >
+            {({ onKeyDownHandler }) => (
+                <section
+                    className={styles.picker}
+                    onKeyDown={onKeyDownHandler}
+                    aria-label={_t("emoji_picker|emoji_picker")}
+                >
+                    <Tabs
+                        categories={CATEGORY_CONFIG}
+                        enabledCategories={enabledCategories}
+                        selectedCategory={selectedCategory}
+                        onAnchorClick={scrollToCategory}
+                        pickerBodyId={pickerBodyId}
+                        getAction={getAction}
+                    />
+                    <Search
+                        query={filter}
+                        onChange={onChangeFilter}
+                        onEnter={onEnterFilter}
+                        onKeyDown={onKeyDownHandler}
+                        inputRef={searchRef}
+                        controlsId={pickerBodyId}
+                    />
+                    <AutoHideScrollbar
+                        id={pickerBodyId}
+                        className={classNames(styles.body, {
+                            [styles.bodyShowHighlight]: showHighlight,
+                        })}
+                        wrappedRef={collectScrollElement}
+                    >
+                        {scrollElement && (
+                            <Virtuoso
+                                ref={virtuosoRef}
+                                customScrollParent={scrollElement}
+                                data={items}
+                                defaultItemHeight={EMOJI_HEIGHT}
+                                components={gridComponents}
+                                itemContent={renderItem}
+                                rangeChanged={onRangeChanged}
+                            />
+                        )}
+                    </AutoHideScrollbar>
+                    {showQuickReactions &&
+                        (previewEmoji ? (
+                            <Preview emoji={previewEmoji} />
+                        ) : (
+                            <QuickReactions
+                                onClick={onClickEmoji}
+                                selectedEmojis={selectedEmojis}
+                                getAction={getAction}
+                            />
+                        ))}
+                </section>
+            )}
+        </RovingGridIndexProvider>
+    );
+}
diff --git a/packages/shared-components/src/core/EmojiPicker/Preview.tsx b/packages/shared-components/src/core/EmojiPicker/Preview.tsx
new file mode 100644
index 0000000000..746e174f81
--- /dev/null
+++ b/packages/shared-components/src/core/EmojiPicker/Preview.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ * Copyright 2020 The Matrix.org Foundation C.I.C.
+ * Copyright 2019 Tulir Asokan <tulir@maunium.net>
+ *
+ * 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 { type Emoji } from "@matrix-org/emojibase-bindings";
+import classNames from "classnames";
+
+import styles from "./EmojiPicker.module.css";
+
+interface IProps {
+    /**
+     * The emoji to preview.
+     */
+    emoji: Emoji;
+}
+
+/**
+ * A preview of the selected emoji, showing the emoji itself, its name, and its shortcode.
+ */
+export const Preview: React.FC<IProps> = ({ emoji }) => {
+    const {
+        unicode,
+        label,
+        shortcodes: [shortcode],
+    } = emoji;
+
+    return (
+        <div className={styles.footer}>
+            <div className={styles.previewEmoji}>{unicode}</div>
+            <div className={styles.previewText}>
+                <div className={classNames(styles.name, styles.previewName)}>{label}</div>
+                <div className={styles.shortcode}>{shortcode}</div>
+            </div>
+        </div>
+    );
+};
diff --git a/packages/shared-components/src/core/EmojiPicker/QuickReactions.tsx b/packages/shared-components/src/core/EmojiPicker/QuickReactions.tsx
new file mode 100644
index 0000000000..66f53c2fb3
--- /dev/null
+++ b/packages/shared-components/src/core/EmojiPicker/QuickReactions.tsx
@@ -0,0 +1,90 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ * Copyright 2020 The Matrix.org Foundation C.I.C.
+ * Copyright 2019 Tulir Asokan <tulir@maunium.net>
+ *
+ * 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, { useCallback, useState } from "react";
+import { getEmojiFromUnicode, type Emoji as IEmoji } from "@matrix-org/emojibase-bindings";
+import classNames from "classnames";
+
+import { _t } from "../i18n/i18n";
+import { Toolbar, type RovingTabIndexProviderProps } from "../roving";
+import { Emoji } from "./Emoji";
+import { type ButtonEvent } from "./RovingButton";
+import styles from "./EmojiPicker.module.css";
+import { Heading } from "@vector-im/compound-web";
+
+// NB. This is the variation-selector Heart in Quick Reactions as per the spec)
+const QUICK_REACTIONS = ["👍", "👎", "😄", "🎉", "😕", "❤️", "🚀", "👀"].map((emoji) => {
+    const data = getEmojiFromUnicode(emoji);
+    if (!data) {
+        throw new Error(`Emoji ${emoji} doesn't exist in emojibase`);
+    }
+    return data;
+});
+
+interface IProps {
+    /**
+     * Set of emojis already selected.
+     */
+    selectedEmojis?: Set<string>;
+    /**
+     * Called when an emoji is clicked.
+     *
+     * @param ev - The button event
+     * @param emoji - The emoji that was clicked
+     */
+    onClick: (ev: ButtonEvent, emoji: IEmoji) => void;
+    /**
+     * Optional function to override the default keyboard navigation mapping.
+     * When omitted, a default mapping based on `KeyboardEvent.key` is used.
+     */
+    getAction?: RovingTabIndexProviderProps["getAction"];
+}
+
+/**
+ * A row of quick reaction emojis at the bottom of the emoji picker.
+ */
+export const QuickReactions: React.FC<IProps> = ({ selectedEmojis, onClick, getAction }) => {
+    const [hover, setHover] = useState<IEmoji | undefined>(undefined);
+
+    const onMouseEnter = useCallback((emoji: IEmoji): void => {
+        setHover(emoji);
+    }, []);
+
+    const onMouseLeave = useCallback((): void => {
+        setHover(undefined);
+    }, []);
+
+    return (
+        <section className={classNames(styles.footer, styles.quick, styles.category)}>
+            <Heading as="h2" className={classNames(styles.quickHeader, styles.categoryLabel)}>
+                {!hover ? (
+                    _t("emoji|quick_reactions")
+                ) : (
+                    <React.Fragment>
+                        <span className={styles.name}>{hover.label}</span>
+                        <span className={styles.shortcode}>{hover.shortcodes[0]}</span>
+                    </React.Fragment>
+                )}
+            </Heading>
+            <Toolbar className={styles.list} aria-label={_t("emoji|quick_reactions")} getAction={getAction}>
+                {QUICK_REACTIONS.map((emoji) => (
+                    <Emoji
+                        key={emoji.hexcode}
+                        emoji={emoji}
+                        onClick={onClick}
+                        onMouseEnter={onMouseEnter}
+                        onMouseLeave={onMouseLeave}
+                        selectedEmojis={selectedEmojis}
+                        className={styles.itemWrapper}
+                    />
+                ))}
+            </Toolbar>
+        </section>
+    );
+};
diff --git a/packages/shared-components/src/core/EmojiPicker/RovingButton.tsx b/packages/shared-components/src/core/EmojiPicker/RovingButton.tsx
new file mode 100644
index 0000000000..ba13509661
--- /dev/null
+++ b/packages/shared-components/src/core/EmojiPicker/RovingButton.tsx
@@ -0,0 +1,116 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+
+import { useRovingTabIndex } from "../roving";
+
+/**
+ * An event which can trigger a button activation.
+ */
+export type ButtonEvent = React.MouseEvent | React.KeyboardEvent | React.FormEvent;
+
+interface RovingButtonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onClick"> {
+    /**
+     * Event handler for button activation. Invoked on click, Enter keydown and Space keyup.
+     */
+    onClick(this: void, ev: ButtonEvent): void;
+    /**
+     * Whether the button should be disabled. A disabled button keeps its role and
+     * remains discoverable by keyboard, but is marked `aria-disabled` and does not
+     * invoke `onClick`.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the button should take the active roving tab stop when the mouse
+     * moves over it.
+     */
+    focusOnMouseOver?: boolean;
+}
+
+/**
+ * A minimal button participating in the surrounding roving tabindex group.
+ *
+ * Rendered as a `div` with `role="button"` (overridable) rather than a native
+ * button so that keyboard activation events are observable by the caller:
+ * Enter is consumed on keydown and Space on keyup, mirroring native button
+ * behaviour, without also risking activation of other focusable elements that
+ * might receive focus as a result of the click handler running.
+ */
+export function RovingButton({
+    onClick,
+    disabled,
+    focusOnMouseOver,
+    onFocus,
+    onMouseOver,
+    onKeyDown,
+    onKeyUp,
+    role = "button",
+    children,
+    ...props
+}: RovingButtonProps): JSX.Element {
+    const [onFocusInternal, isActive, ref] = useRovingTabIndex<HTMLDivElement>();
+
+    let behaviourProps: React.HTMLAttributes<HTMLDivElement> = { onKeyDown, onKeyUp };
+    if (disabled) {
+        behaviourProps["aria-disabled"] = true;
+    } else {
+        behaviourProps = {
+            onClick,
+            onKeyDown: (e) => {
+                switch (e.key) {
+                    case "Enter":
+                        e.stopPropagation();
+                        e.preventDefault();
+                        onClick(e);
+                        break;
+                    case " ":
+                        e.stopPropagation();
+                        e.preventDefault();
+                        break;
+                    default:
+                        onKeyDown?.(e);
+                }
+            },
+            onKeyUp: (e) => {
+                switch (e.key) {
+                    case "Enter":
+                        e.stopPropagation();
+                        e.preventDefault();
+                        break;
+                    case " ":
+                        e.stopPropagation();
+                        e.preventDefault();
+                        onClick(e);
+                        break;
+                    default:
+                        onKeyUp?.(e);
+                }
+            },
+        };
+    }
+
+    return (
+        <div
+            {...props}
+            {...behaviourProps}
+            role={role}
+            ref={ref}
+            tabIndex={isActive ? 0 : -1}
+            onFocus={(event) => {
+                onFocusInternal();
+                onFocus?.(event);
+            }}
+            onMouseOver={(event) => {
+                if (focusOnMouseOver) onFocusInternal();
+                onMouseOver?.(event);
+            }}
+        >
+            {children}
+        </div>
+    );
+}
diff --git a/packages/shared-components/src/core/EmojiPicker/Search.tsx b/packages/shared-components/src/core/EmojiPicker/Search.tsx
new file mode 100644
index 0000000000..8c4321a5ae
--- /dev/null
+++ b/packages/shared-components/src/core/EmojiPicker/Search.tsx
@@ -0,0 +1,109 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ * Copyright 2020 The Matrix.org Foundation C.I.C.
+ * Copyright 2019 Tulir Asokan <tulir@maunium.net>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX, useCallback, useContext, useEffect } from "react";
+import { CloseIcon, SearchIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import { _t } from "../i18n/i18n";
+import { RovingTabIndexContext } from "../roving";
+import styles from "./EmojiPicker.module.css";
+
+interface IProps {
+    /**
+     * The current search query.
+     */
+    query: string;
+    /**
+     * Called when the search query changes.
+     *
+     * @param value - The new search query
+     */
+    onChange: (value: string) => void;
+    /**
+     * Called when the Enter key is pressed in the search input.
+     */
+    onEnter: () => void;
+    /**
+     * Called when a key is pressed in the search input.
+     *
+     * @param event - The keyboard event
+     */
+    onKeyDown: (event: React.KeyboardEvent) => void;
+    /**
+     * The id of the element that this search box controls, for aria-controls.
+     */
+    controlsId: string;
+    /**
+     * Ref to the search input, owned by the picker so it can inspect focus.
+     */
+    inputRef: React.RefObject<HTMLInputElement | null>;
+}
+
+/**
+ * The search input at the top of the emoji picker.
+ */
+export const Search: React.FC<IProps> = ({ query, onChange, onEnter, onKeyDown, inputRef, controlsId }) => {
+    const context = useContext(RovingTabIndexContext);
+
+    // This component gets mounted in a number of different places where the autoFocus attribute doesn't
+    // work, so focus the search box manually.
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, [inputRef]);
+
+    const onInputKeyDown = useCallback(
+        (ev: React.KeyboardEvent): void => {
+            if (ev.key === "Enter") {
+                onEnter();
+                ev.stopPropagation();
+                ev.preventDefault();
+            } else {
+                onKeyDown(ev);
+            }
+        },
+        [onEnter, onKeyDown],
+    );
+
+    let rightButton: JSX.Element;
+    if (query) {
+        rightButton = (
+            <button type="button" onClick={() => onChange("")} title={_t("emoji_picker|cancel_search_label")}>
+                <CloseIcon />
+            </button>
+        );
+    } else {
+        rightButton = (
+            <span className={styles.searchIcon}>
+                <SearchIcon />
+            </span>
+        );
+    }
+
+    return (
+        <div className={styles.search}>
+            <input
+                autoFocus
+                type="text"
+                placeholder={_t("action|search")}
+                aria-label={_t("action|search")}
+                value={query}
+                onChange={(ev) => onChange(ev.target.value)}
+                onKeyDown={onInputKeyDown}
+                ref={inputRef}
+                // Setting aria-activedescendant on the input allows screen readers to identify the active emoji.
+                // Setting it when there is not a query causes screen readers to read out the first emoji when focusing the input, and it continually tells you you are in the table vs the input.
+                aria-activedescendant={query ? context.state.activeNode?.id : undefined}
+                aria-controls={controlsId}
+                aria-haspopup="grid"
+                aria-autocomplete="list"
+            />
+            {rightButton}
+        </div>
+    );
+};
diff --git a/packages/shared-components/src/core/EmojiPicker/Tabs.tsx b/packages/shared-components/src/core/EmojiPicker/Tabs.tsx
new file mode 100644
index 0000000000..66effceec2
--- /dev/null
+++ b/packages/shared-components/src/core/EmojiPicker/Tabs.tsx
@@ -0,0 +1,179 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ * Copyright 2020 The Matrix.org Foundation C.I.C.
+ * Copyright 2019 Tulir Asokan <tulir@maunium.net>
+ *
+ * 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, { useCallback, useRef } from "react";
+import classNames from "classnames";
+
+import { _t } from "../i18n/i18n";
+import { RovingAction, type RovingTabIndexProviderProps } from "../roving";
+import { type CategoryKey, type Category } from "./EmojiPicker";
+import styles from "./EmojiPicker.module.css";
+
+interface Props {
+    /**
+     * The categories to display in the tab bar.
+     */
+    categories: Category[];
+    /**
+     * The categories that are enabled and can be selected. Disabled categories will be rendered but not selectable.
+     */
+    enabledCategories: CategoryKey[];
+    /**
+     * The currently selected category.
+     */
+    selectedCategory: CategoryKey;
+    /**
+     * Called when a category tab is clicked.
+     *
+     * @param id - The id of the category that was clicked.
+     */
+    onAnchorClick: (id: CategoryKey) => void;
+    /**
+     * Id of the scrollable picker body that the tabs control (for aria-controls).
+     */
+    pickerBodyId: string;
+    /**
+     * Optional action resolver used to map keyboard events to
+     * {@link RovingAction} values, e.g. to apply app-level custom keybindings.
+     *
+     * When omitted, a default mapping based on `KeyboardEvent.key` is used.
+     */
+    getAction?: RovingTabIndexProviderProps["getAction"];
+}
+
+const getDefaultAction = (ev: React.KeyboardEvent): RovingAction | undefined => {
+    switch (ev.key) {
+        case "ArrowLeft":
+            return RovingAction.ArrowLeft;
+        case "ArrowRight":
+            return RovingAction.ArrowRight;
+        case "Home":
+            return RovingAction.Home;
+        case "End":
+            return RovingAction.End;
+        default:
+            return undefined;
+    }
+};
+
+/**
+ * The tab bar at the top of the emoji picker with a tab for each category.
+ */
+export const Tabs: React.FC<Props> = ({
+    categories,
+    enabledCategories,
+    selectedCategory,
+    onAnchorClick,
+    pickerBodyId,
+    getAction,
+}) => {
+    const findNearestEnabled = useCallback(
+        (index: number, delta: number): number | undefined => {
+            index += categories.length;
+            const cats = [...categories, ...categories, ...categories];
+
+            while (index < cats.length && index >= 0) {
+                if (enabledCategories.includes(cats[index].id)) return index % categories.length;
+                index += delta > 0 ? 1 : -1;
+            }
+        },
+        [categories, enabledCategories],
+    );
+
+    const changeCategoryAbsolute = useCallback(
+        (index: number, delta = 1): void => {
+            const category = categories[findNearestEnabled(index, delta)!];
+            if (category) {
+                onAnchorClick(category.id);
+                tabRefs.current[category.id]?.current?.focus();
+            }
+        },
+        [categories, findNearestEnabled, onAnchorClick],
+    );
+
+    const changeCategoryRelative = useCallback(
+        (delta: number): void => {
+            // Move to the next/previous category using the selected as the current.
+            const current = categories.findIndex((c) => c.id === selectedCategory);
+            changeCategoryAbsolute(current + delta, delta);
+        },
+        [categories, selectedCategory, changeCategoryAbsolute],
+    );
+
+    // Implements ARIA Tabs with Automatic Activation pattern
+    // https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html
+    const onKeyDown = useCallback(
+        (ev: React.KeyboardEvent): void => {
+            let handled = true;
+
+            const action = getAction?.(ev) ?? getDefaultAction(ev);
+            switch (action) {
+                case RovingAction.ArrowLeft:
+                    changeCategoryRelative(-1);
+                    break;
+                case RovingAction.ArrowRight:
+                    changeCategoryRelative(1);
+                    break;
+
+                case RovingAction.Home:
+                    changeCategoryAbsolute(0);
+                    break;
+                case RovingAction.End:
+                    changeCategoryAbsolute(categories.length - 1, -1);
+                    break;
+                default:
+                    handled = false;
+            }
+
+            if (handled) {
+                ev.preventDefault();
+                ev.stopPropagation();
+            }
+        },
+        [getAction, changeCategoryRelative, changeCategoryAbsolute, categories.length],
+    );
+
+    const tabRefs = useRef({} as Record<CategoryKey, React.RefObject<HTMLButtonElement | null>>);
+    if (!tabRefs.current.recent) {
+        for (const category of categories) {
+            tabRefs.current[category.id] = React.createRef<HTMLButtonElement>();
+        }
+    }
+
+    return (
+        <nav className={styles.header} role="tablist" aria-label={_t("emoji|categories")} onKeyDown={onKeyDown}>
+            {categories.map((category) => {
+                const classes = classNames(styles.anchor, {
+                    [styles.anchorSelected]: category.id === selectedCategory,
+                });
+                return (
+                    <button
+                        type="button"
+                        disabled={!enabledCategories.includes(category.id)}
+                        key={category.id}
+                        ref={tabRefs.current[category.id]}
+                        className={classes}
+                        onClick={() => onAnchorClick(category.id)}
+                        title={_t(category.untranslatedName)}
+                        role="tab"
+                        tabIndex={category.id === selectedCategory ? 0 : -1} // roving
+                        aria-selected={category.id === selectedCategory}
+                        // Normally with tabs, this would be the ID of a tabpanel role but this isn't a real
+                        // tab control, it controls a scroller and virtuoso doesn't render sections that are
+                        // off screen so they may not be in the DOM anyway. We point it at the whole scrollable
+                        // region instead.
+                        aria-controls={pickerBodyId}
+                    >
+                        {category.emoji}
+                    </button>
+                );
+            })}
+        </nav>
+    );
+};
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/index.ts b/packages/shared-components/src/core/EmojiPicker/index.ts
similarity index 70%
rename from packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/index.ts
rename to packages/shared-components/src/core/EmojiPicker/index.ts
index a301627949..ffca71ac9b 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/index.ts
+++ b/packages/shared-components/src/core/EmojiPicker/index.ts
@@ -5,4 +5,4 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-export { RoomListItemAccessibilityWrapper } from "./RoomListItemAccessibilityWrapper";
+export { EmojiPicker, type EmojiPickerProps } from "./EmojiPicker";
diff --git a/packages/shared-components/src/core/FacePile/FacePileView.stories.tsx b/packages/shared-components/src/core/FacePile/FacePileView.stories.tsx
new file mode 100644
index 0000000000..962bc131b8
--- /dev/null
+++ b/packages/shared-components/src/core/FacePile/FacePileView.stories.tsx
@@ -0,0 +1,56 @@
+/*
+ * Copyright 2026 Element Creations 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 type { Meta, StoryObj } from "@storybook/react-vite";
+import { type FacePileViewSnapshot, FacePileView } from "./FacePileView";
+import { withViewDocs } from "../../../.storybook/withViewDocs";
+import profileLink1 from "../../../static/profile-pics/profile1.png";
+import profileLink2 from "../../../static/profile-pics/profile2.png";
+import profileLink3 from "../../../static/profile-pics/profile3.png";
+import { MockViewModel, useMockedViewModel } from "../viewmodel";
+import { type MemberAvatarViewSnapshot } from "../MemberAvatar/MemberAvatarView";
+
+const FacePileViewWrapperImpl = (snapshot: FacePileViewSnapshot): React.ReactNode => {
+    const vm = useMockedViewModel(snapshot, {});
+    return <FacePileView vm={vm} />;
+};
+
+const FacePileViewWrapper = withViewDocs(FacePileViewWrapperImpl, FacePileView);
+
+type MockProp = { id: string; name: string; url?: string };
+
+export class MockMemberAvatarViewModel extends MockViewModel<MemberAvatarViewSnapshot> {
+    public constructor({ id, name, url }: MockProp) {
+        super({
+            id,
+            name,
+            size: "20px",
+            title: id,
+            url,
+        });
+    }
+}
+
+const meta = {
+    title: "Core/FacePileView",
+    component: FacePileViewWrapper,
+    tags: ["autodocs"],
+    args: {
+        memberAvatarViewModels: [
+            new MockMemberAvatarViewModel({ id: "@bob:m.org", name: "Bob", url: profileLink1 }),
+            new MockMemberAvatarViewModel({ id: "@riley:m.org", name: "Riley", url: profileLink2 }),
+            new MockMemberAvatarViewModel({ id: "@andi:m.org", name: "Andi", url: profileLink3 }),
+        ],
+    },
+} satisfies Meta<typeof FacePileViewWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/packages/shared-components/src/core/FacePile/FacePileView.tsx b/packages/shared-components/src/core/FacePile/FacePileView.tsx
new file mode 100644
index 0000000000..878f1b320c
--- /dev/null
+++ b/packages/shared-components/src/core/FacePile/FacePileView.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright 2026 Element Creations 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 { AvatarStack } from "@vector-im/compound-web";
+
+import { type MemberAvatarViewModel, MemberAvatarView } from "../MemberAvatar/MemberAvatarView";
+import { useViewModel, type ViewModel } from "../viewmodel";
+
+export interface FacePileViewSnapshot {
+    /**
+     * The sub vms for the member avatars.
+     */
+    memberAvatarViewModels: MemberAvatarViewModel[];
+}
+
+export type FacePileViewModel = ViewModel<FacePileViewSnapshot>;
+
+export interface FacePileViewProps {
+    vm: FacePileViewModel;
+
+    /**
+     * Additional class names for this component.
+     */
+    classNames?: string;
+}
+
+/**
+ * View that renders a face pile view.
+ */
+export function FacePileView(props: FacePileViewProps): React.ReactNode {
+    const { memberAvatarViewModels } = useViewModel(props.vm);
+    if (memberAvatarViewModels.length === 0) return null;
+    return (
+        <AvatarStack className={props.classNames}>
+            {memberAvatarViewModels.map((vm) => (
+                <MemberAvatarView vm={vm} key={vm.getSnapshot().id} />
+            ))}
+        </AvatarStack>
+    );
+}
diff --git a/packages/shared-components/src/core/MemberAvatar/MemberAvatarView.stories.tsx b/packages/shared-components/src/core/MemberAvatar/MemberAvatarView.stories.tsx
new file mode 100644
index 0000000000..952edbd005
--- /dev/null
+++ b/packages/shared-components/src/core/MemberAvatar/MemberAvatarView.stories.tsx
@@ -0,0 +1,44 @@
+/*
+ * Copyright 2026 Element Creations 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 type { Meta, StoryObj } from "@storybook/react-vite";
+import { type MemberAvatarViewSnapshot, MemberAvatarView } from "./MemberAvatarView";
+import { withViewDocs } from "../../../.storybook/withViewDocs";
+import profile from "../../../static/profile-pics/profile3.png";
+import { useMockedViewModel } from "../viewmodel";
+
+const MemberAvatarViewWrapperImpl = (snapshot: MemberAvatarViewSnapshot): React.ReactNode => {
+    const vm = useMockedViewModel(snapshot, {});
+    return <MemberAvatarView vm={vm} />;
+};
+
+const MemberAvatarViewWrapper = withViewDocs(MemberAvatarViewWrapperImpl, MemberAvatarView);
+
+const meta = {
+    title: "Core/MemberAvatarView",
+    component: MemberAvatarViewWrapper,
+    tags: ["autodocs"],
+    argTypes: {
+        url: {
+            control: "text",
+        },
+    },
+    args: {
+        id: "@bob:m.org",
+        name: "Bob",
+        size: "20px",
+        title: "@bob:m.org",
+        url: profile,
+    },
+} satisfies Meta<typeof MemberAvatarViewWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/packages/shared-components/src/core/MemberAvatar/MemberAvatarView.tsx b/packages/shared-components/src/core/MemberAvatar/MemberAvatarView.tsx
new file mode 100644
index 0000000000..b3b541c14c
--- /dev/null
+++ b/packages/shared-components/src/core/MemberAvatar/MemberAvatarView.tsx
@@ -0,0 +1,54 @@
+/*
+ * Copyright 2026 Element Creations 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 { Avatar } from "@vector-im/compound-web";
+
+import { useViewModel, type ViewModel } from "../viewmodel";
+
+export interface MemberAvatarViewSnapshot {
+    /**
+     * The display name of this member.
+     */
+    name: string;
+    /**
+     * The mxid of this member.
+     */
+    id: string;
+    /**
+     * The avatar url.
+     */
+    url?: string;
+    /**
+     * Size of the avatar.
+     */
+    size: string;
+    /**
+     * Title passed to the avatar container (button or span).
+     */
+    title?: string;
+}
+
+export type MemberAvatarViewModel = ViewModel<MemberAvatarViewSnapshot>;
+
+interface MemberAvatarViewProps {
+    vm: MemberAvatarViewModel;
+
+    /**
+     * Additional class names for this component.
+     */
+    classNames?: string;
+}
+
+/**
+ * View for rendering the avatar for a given member.
+ */
+export function MemberAvatarView(props: MemberAvatarViewProps): React.ReactNode {
+    const { name, id, url, size } = useViewModel(props.vm);
+
+    return <Avatar className={props.classNames} name={name} id={id} src={url} size={size} />;
+}
diff --git a/packages/shared-components/src/core/VirtualizedList/FlatVirtualizedList/FlatVirtualizedList.tsx b/packages/shared-components/src/core/VirtualizedList/FlatVirtualizedList/FlatVirtualizedList.tsx
index 7373092a94..e414451149 100644
--- a/packages/shared-components/src/core/VirtualizedList/FlatVirtualizedList/FlatVirtualizedList.tsx
+++ b/packages/shared-components/src/core/VirtualizedList/FlatVirtualizedList/FlatVirtualizedList.tsx
@@ -6,11 +6,16 @@
  */
 
 import React, { type JSX, useCallback } from "react";
-import { Virtuoso } from "react-virtuoso";
+import { Virtuoso, type VirtuosoHandle } from "react-virtuoso";
 
 import { useVirtualizedList, type VirtualizedListContext, type VirtualizedListProps } from "../virtualized-list";
 
 export interface FlatVirtualizedListProps<Item, Context> extends VirtualizedListProps<Item, Context> {
+    /**
+     * Optional ref to the underlying Virtuoso handle, for imperative scrolling.
+     */
+    scrollHandleRef?: React.RefCallback<VirtuosoHandle>;
+
     /**
      * Function that renders each list item as a JSX element.
      * @param index - The index of the item in the list
@@ -35,8 +40,11 @@ export interface FlatVirtualizedListProps<Item, Context> extends VirtualizedList
  * @template Context - The type of additional context data passed to items
  */
 export function FlatVirtualizedList<Item, Context>(props: FlatVirtualizedListProps<Item, Context>): React.ReactElement {
-    const { getItemComponent, ...restProps } = props;
-    const { onFocusForGetItemComponent, ...virtuosoProps } = useVirtualizedList<Item, Context>(restProps);
+    const { getItemComponent, scrollHandleRef, ...restProps } = props;
+    const { onFocusForGetItemComponent, ...virtuosoProps } = useVirtualizedList<Item, Context>(
+        restProps,
+        scrollHandleRef,
+    );
 
     const getItemComponentInternal = useCallback(
         (index: number, item: Item, context: VirtualizedListContext<Context>): JSX.Element =>
diff --git a/packages/shared-components/src/core/VirtualizedList/GroupedVirtualizedList/GroupedVirtualizedList.module.css b/packages/shared-components/src/core/VirtualizedList/GroupedVirtualizedList/GroupedVirtualizedList.module.css
new file mode 100644
index 0000000000..76e35c9988
--- /dev/null
+++ b/packages/shared-components/src/core/VirtualizedList/GroupedVirtualizedList/GroupedVirtualizedList.module.css
@@ -0,0 +1,56 @@
+/*
+Copyright 2026 Element Creations 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.
+*/
+
+/*
+Wrapper that establishes the positioning context for the pinned overlay header.
+It must fill its parent so the virtualized scroller below it keeps its height.
+*/
+.stickyRoot {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    /* Keep the pinned overlay and list content clipped to the panel bounds. */
+    overflow: hidden;
+}
+
+/*
+The pinned "current section" overlay header. It lives OUTSIDE the virtualized item stream so it never
+unmounts, and backstops the cover/reveal done by the sticky header rows (.stickyRow): once a tall
+section's real header row scrolls far enough that the virtualizer unmounts it, this overlay keeps that
+section's header visible at the top. A mounted real header row (z-index 2) sits exactly over it, so
+the hand-off is invisible. It is interactive (click toggles the section, hover highlights), so wheel
+events over it are forwarded to the scroller in JS to keep scrolling working.
+
+Only the relative order of this local 3-layer stack matters — room rows (normal flow) < this overlay
+< real sticky header rows (.stickyRow) — so the values are just 1 and 2, not tied to any global scale.
+*/
+.stickyHeader {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline: 0;
+    z-index: 1;
+    pointer-events: auto;
+}
+
+/*
+Section-header rows pin natively, which is what produces the cover/reveal: `top: 0` sticks each
+header to the scroller's top; z-index above the overlay (1) so a mounted real header covers the
+overlay backstop, and so a stuck header covers the room rows scrolling beneath it. Consecutive stuck
+headers stack in DOM order, so the incoming header covers the current one on scroll-down and the
+top one slides off to reveal the previous on scroll-up. (Room rows stay in normal flow, not sticky.)
+
+The opaque background is essential: every header scrolled past the top stays stuck at top:0, so they
+overlap. Without an opaque fill they show through each other (overlapping text); with it, the current
+(top-most, last-in-DOM) header covers the rest, and sliding it down on scroll-up reveals the previous.
+*/
+.stickyRow {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background: var(--cpd-color-bg-canvas-default);
+}
diff --git a/packages/shared-components/src/core/VirtualizedList/GroupedVirtualizedList/GroupedVirtualizedList.tsx b/packages/shared-components/src/core/VirtualizedList/GroupedVirtualizedList/GroupedVirtualizedList.tsx
index eb183586e2..f3da466cb4 100644
--- a/packages/shared-components/src/core/VirtualizedList/GroupedVirtualizedList/GroupedVirtualizedList.tsx
+++ b/packages/shared-components/src/core/VirtualizedList/GroupedVirtualizedList/GroupedVirtualizedList.tsx
@@ -5,10 +5,42 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { type JSX, useCallback, useMemo } from "react";
-import { Virtuoso, type VirtuosoHandle } from "react-virtuoso";
+import React, {
+    type JSX,
+    type ReactNode,
+    useCallback,
+    useEffect,
+    useLayoutEffect,
+    useMemo,
+    useRef,
+    useState,
+} from "react";
+import { type Components, type ListItem, Virtuoso, type VirtuosoHandle } from "react-virtuoso";
 
 import { useVirtualizedList, type VirtualizedListContext, type VirtualizedListProps } from "../virtualized-list";
+import styles from "./GroupedVirtualizedList.module.css";
+
+/**
+ * Virtuoso row wrapper that makes section-header rows `position: sticky`, so a header pins to the
+ * top and the next one slides up to cover it (and reveals the previous on the way back) — native,
+ * compositor-driven cover/reveal. Room rows render in normal flow. Because Virtuoso unmounts rows
+ * scrolled out of its render window, a tall section's header eventually unmounts and stops sticking;
+ * the pinned overlay (rendered outside the list) backstops that gap.
+ */
+// oxlint-disable-next-line no-restricted-properties
+const StickyRowItem: Components["Item"] = React.forwardRef(function StickyRowItem(
+    // `item` and `context` are Virtuoso-injected props, not DOM attributes — pull them out so they
+    // aren't spread onto the div (`context` would otherwise render as `context="[object Object]"`).
+    { item, context, children, ...props },
+    ref,
+) {
+    const isHeader = item != null && typeof item === "object" && "header" in item;
+    return (
+        <div {...props} ref={ref as React.Ref<HTMLDivElement>} className={isHeader ? styles.stickyRow : undefined}>
+            {children}
+        </div>
+    );
+});
 
 /**
  * A group of items for the grouped virtualized list.
@@ -31,7 +63,9 @@ type NavigationEntry<Header, Item> = { header: Header } | { item: Item };
 
 export interface GroupedVirtualizedListProps<Header, Item, Context> extends Omit<
     VirtualizedListProps<Item, Context>,
-    "items" | "isItemFocusable" | "getItemKey"
+    // `itemsRendered`, `onScroll` and `scrollPaddingTop` are owned internally to drive the pinned
+    // header (see renderStickyHeader) and keep keyboard focus clear of it.
+    "items" | "isItemFocusable" | "getItemKey" | "itemsRendered" | "onScroll" | "scrollPaddingTop"
 > {
     /**
      * Optional ref to the underlying Virtuoso handle, for imperative scrolling.
@@ -104,6 +138,25 @@ export interface GroupedVirtualizedListProps<Header, Item, Context> extends Omit
         onFocus: (item: Item, e: React.FocusEvent) => void,
         groupIndex: number,
     ) => JSX.Element;
+
+    /**
+     * Optional renderer for a "pinned" header that stays fixed at the top of the scroll
+     * viewport, reflecting the group the user is currently scrolled within.
+     *
+     * List rows — including real group headers — are virtualized and unmount once scrolled out
+     * of the render window, so a CSS `position: sticky` header would disappear partway through a
+     * tall group. This header is rendered OUTSIDE the virtualized stream, so it never unmounts.
+     *
+     * The real header rows remain the focusable, accessible elements driving keyboard navigation
+     * and screen-reader output; this overlay must therefore be purely presentational and is
+     * hidden from assistive technology by the caller.
+     *
+     * @param groupIndex - The index of the group currently pinned at the top
+     * @param header - The header data for that group
+     * @param context - The list context, including any additional context data
+     * @returns The presentational pinned header, or `null`/`undefined` to render nothing
+     */
+    renderStickyHeader?: (groupIndex: number, header: Header, context: VirtualizedListContext<Context>) => ReactNode;
 }
 
 /**
@@ -132,16 +185,23 @@ export function GroupedVirtualizedList<Header, Item, Context>(
         getItemKey,
         getHeaderKey,
         scrollHandleRef,
+        renderStickyHeader,
         ...restProps
     } = props;
 
+    // Measured height of the pinned overlay header. Drives both the push animation and the keyboard
+    // scroll padding (so focused items land below the overlay rather than behind it). 0 = no overlay.
+    const [headerHeight, setHeaderHeight] = useState(0);
+
     // Build a flat array interleaving group headers with items.
     // Each entry is either { header } or { item }.
     const flatEntries = useMemo(
         () =>
             groups.flatMap<NavigationEntry<Header, Item>>((group) => [
                 { header: group.header },
-                ...group.items.map<NavigationEntry<Header, Item>>((item) => ({ item })),
+                ...group.items.map<NavigationEntry<Header, Item>>((item) => ({
+                    item,
+                })),
             ]),
         [groups],
     );
@@ -153,6 +213,17 @@ export function GroupedVirtualizedList<Header, Item, Context>(
         [groups],
     );
 
+    // Per-item top padding for keyboard scrolling: reserve the overlay height for room items (so
+    // they land below the pinned header), but 0 for header items — a focused header should land at
+    // the exact top, where the overlay yields to the real (focusable) header.
+    const getScrollPaddingTop = useCallback(
+        (index: number): number => {
+            const entry = flatEntries[index];
+            return entry && "header" in entry ? 0 : headerHeight;
+        },
+        [flatEntries, headerHeight],
+    );
+
     // Wrap getItemKey: dispatch to getHeaderKey or getItemKey based on entry type
     const wrappedGetEntryKey = useCallback(
         (entry: NavigationEntry<Header, Item>): string =>
@@ -167,7 +238,11 @@ export function GroupedVirtualizedList<Header, Item, Context>(
         [isGroupHeaderFocusable, isItemFocusable],
     );
 
-    const { onFocusForGetItemComponent, ...virtuosoProps } = useVirtualizedList<NavigationEntry<Header, Item>, Context>(
+    const {
+        onFocusForGetItemComponent,
+        scrollerRef: hookScrollerRef,
+        ...virtuosoProps
+    } = useVirtualizedList<NavigationEntry<Header, Item>, Context>(
         {
             ...(restProps as Omit<
                 VirtualizedListProps<NavigationEntry<Header, Item>, Context>,
@@ -176,6 +251,8 @@ export function GroupedVirtualizedList<Header, Item, Context>(
             items: flatEntries,
             isItemFocusable: wrappedIsEntryFocusable,
             getItemKey: wrappedGetEntryKey,
+            // Keep keyboard-focused rooms clear of the pinned overlay header (headers get 0; see above).
+            scrollPaddingTop: getScrollPaddingTop,
         },
         scrollHandleRef,
     );
@@ -226,15 +303,119 @@ export function GroupedVirtualizedList<Header, Item, Context>(
         ],
     );
 
+    // --- Pinned ("sticky") header tracking -------------------------------------------------
+    // Work out which section is at the top of the viewport so the overlay can mirror it: find the
+    // top-most rendered item by comparing each item's measured `offset` (from `itemsRendered`)
+    // against the live `scrollTop`, then take that item's group.
+    //
+    // We can't use Virtuoso's reported range for this. It also counts the rows rendered off-screen
+    // above the viewport (`increaseViewportBy`), so its start index sits ~a screenful too high.
+    // Right after you scroll into a new section that start index is still back in the previous
+    // section — so the overlay would keep showing the previous section's header until you'd
+    // scrolled well into the new one.
+    const renderedItemsRef = useRef<{ index: number; offset: number }[]>([]);
+    const overlayRef = useRef<HTMLDivElement>(null);
+    // The scroller element, held as a ref for imperative reads (`scrollTop`, while computing the
+    // pinned header) and writes (wheel forwarding). A ref rather than state because mutating a
+    // *state* value's `scrollTop` trips react-compiler's immutability check, and scroll updates are
+    // driven by Virtuoso's `onScroll` prop — so no effect needs to re-subscribe when it mounts.
+    const scrollerElRef = useRef<HTMLElement | null>(null);
+    const [currentGroupIndex, setCurrentGroupIndex] = useState(0);
+
+    // Recompute which section the overlay backstop should mirror. Runs on every scroll frame, but
+    // it's cheap — it only reads scrollTop + the cached item offsets and updates a single state value.
+    const updateSticky = useCallback((): void => {
+        const scroller = scrollerElRef.current;
+        if (!scroller || flatIndexToGroupIndex.length === 0) return;
+        const scrollTop = scroller.scrollTop;
+        const rendered = renderedItemsRef.current;
+
+        // Find the top-most rendered item: the greatest measured offset that's still at or above the
+        // fold (+1px rounding tolerance). Its group is the section currently at the top.
+        let topIndex = rendered.length ? rendered[0].index : 0;
+        let bestOffset = rendered.length ? rendered[0].offset : 0;
+        for (const item of rendered) {
+            if (item.offset <= scrollTop + 1 && item.offset > bestOffset) {
+                bestOffset = item.offset;
+                topIndex = item.index;
+            }
+        }
+
+        const groupIndex = flatIndexToGroupIndex[topIndex] ?? 0;
+        setCurrentGroupIndex((prev) => (prev === groupIndex ? prev : groupIndex));
+    }, [flatIndexToGroupIndex]);
+
+    // Capture the latest item offsets, then refresh the pinned header.
+    const handleItemsRendered = useCallback(
+        (items: ListItem<NavigationEntry<Header, Item>>[]): void => {
+            renderedItemsRef.current = items.map((item) => ({ index: item.index, offset: item.offset }));
+            updateSticky();
+        },
+        [updateSticky],
+    );
+
+    // Compose the hook's scroller ref so we can also capture the element for imperative use
+    // (reading scrollTop while computing the pinned header, and forwarding wheel events).
+    const handleScrollerRef = useCallback(
+        (element: HTMLElement | Window | null): void => {
+            hookScrollerRef?.(element);
+            scrollerElRef.current = element instanceof HTMLElement ? element : null;
+        },
+        [hookScrollerRef],
+    );
+
+    // The overlay is interactive (so it can be clicked/hovered), which means it would otherwise
+    // swallow wheel scrolling over the header strip. Forward those wheel deltas to the scroller.
+    const handleOverlayWheel = useCallback((e: React.WheelEvent): void => {
+        const el = scrollerElRef.current;
+        if (el) el.scrollTop += e.deltaY * (e.deltaMode === 1 ? 16 : 1);
+    }, []);
+
+    // Measure the pinned header's height (used by the keyboard scroll padding, so a focused room
+    // lands clear of it) whenever it could have changed. setState bails out when unchanged.
+    useLayoutEffect(() => {
+        if (overlayRef.current) setHeaderHeight(overlayRef.current.offsetHeight);
+    }, [currentGroupIndex, groups]);
+
+    // Groups can change (sections added/removed/reordered); re-evaluate against the new layout.
+    useEffect(() => {
+        updateSticky();
+    }, [groups, updateSticky]);
+
+    const stickyGroupIndex = Math.min(currentGroupIndex, groups.length - 1);
+    const stickyHeader =
+        renderStickyHeader && stickyGroupIndex >= 0
+            ? renderStickyHeader(stickyGroupIndex, groups[stickyGroupIndex].header, virtuosoProps.context)
+            : null;
+
     return (
-        <Virtuoso
-            // note that either the container of direct children must be focusable to be axe
-            // compliant, so we leave tabIndex as the default so the container can be focused
-            // (virtuoso wraps the children inside another couple of elements so setting it
-            // on those doesn't seem to work, unfortunately)
-            itemContent={itemContent}
-            data={flatEntries}
-            {...virtuosoProps}
-        />
+        <div className={styles.stickyRoot}>
+            {stickyHeader != null && (
+                <div className={styles.stickyHeader} ref={overlayRef} onWheel={handleOverlayWheel}>
+                    {stickyHeader}
+                </div>
+            )}
+            <Virtuoso
+                // note that either the container of direct children must be focusable to be axe
+                // compliant, so we leave tabIndex as the default so the container can be focused
+                // (virtuoso wraps the children inside another couple of elements so setting it
+                // on those doesn't seem to work, unfortunately)
+                itemContent={itemContent}
+                data={flatEntries}
+                {...virtuosoProps}
+                components={
+                    { Item: StickyRowItem } as Components<
+                        NavigationEntry<Header, Item>,
+                        VirtualizedListContext<Context>
+                    >
+                }
+                scrollerRef={handleScrollerRef}
+                itemsRendered={handleItemsRendered}
+                // Keep the overlay backstop's section current as you scroll. The cover/reveal
+                // animation is native `position: sticky` (.stickyRow), so this only tracks which
+                // section the backstop should mirror.
+                onScroll={updateSticky}
+            />
+        </div>
     );
 }
diff --git a/packages/shared-components/src/core/VirtualizedList/virtualized-list.test.tsx b/packages/shared-components/src/core/VirtualizedList/virtualized-list.test.tsx
index 4cec04a1f5..d677707adf 100644
--- a/packages/shared-components/src/core/VirtualizedList/virtualized-list.test.tsx
+++ b/packages/shared-components/src/core/VirtualizedList/virtualized-list.test.tsx
@@ -52,7 +52,7 @@ function renderItemElement(
     const isFocused = context.tabIndexKey === itemKey;
     return (
         <div className="mx_item" data-testid={`row-${index}`} tabIndex={isFocused ? 0 : -1} role="gridcell">
-            {item === SEPARATOR_ITEM ? "---" : (item as TestItem).name}
+            {item === SEPARATOR_ITEM ? "---" : item.name}
         </div>
     );
 }
@@ -81,7 +81,7 @@ function renderClickableItemElement(
             }}
             onFocus={(e) => onFocus(item, e)}
         >
-            {item === SEPARATOR_ITEM ? "---" : (item as TestItem).name}
+            {item === SEPARATOR_ITEM ? "---" : item.name}
         </div>
     );
 }
@@ -165,6 +165,7 @@ const groupedVariant: ListTestVariant = {
                 <div
                     className="mx_group_header"
                     data-testid={`group-header-${header.id}`}
+                    // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex
                     tabIndex={context.tabIndexKey === header.id ? 0 : -1}
                     onFocus={(e) => onFocus(header, e)}
                 >
@@ -448,7 +449,7 @@ describe.each<ListTestVariant>([flatVariant, groupedVariant])("$name", (variant)
 
             mockIsItemFocusable.mockImplementation((item: TestItemWithSeparator) => {
                 if (item === SEPARATOR_ITEM) return false;
-                return (item as TestItem).isFocusable !== false;
+                return item.isFocusable !== false;
             });
 
             renderListWithHeight({ items: mixedItems });
@@ -476,7 +477,7 @@ describe.each<ListTestVariant>([flatVariant, groupedVariant])("$name", (variant)
 
             mockIsItemFocusable.mockImplementation((item: TestItemWithSeparator) => {
                 if (item === SEPARATOR_ITEM) return false;
-                return (item as TestItem).isFocusable !== false;
+                return item.isFocusable !== false;
             });
 
             renderListWithHeight({ items: mixedItems });
@@ -709,7 +710,7 @@ describe.each<ListTestVariant>([flatVariant, groupedVariant])("$name", (variant)
                             style={{ height: `${ITEM_HEIGHT}px`, display: "block", width: "100%" }}
                             onFocus={(e) => onFocus(item, e)}
                         >
-                            {item === SEPARATOR_ITEM ? "---" : (item as TestItem).name}
+                            {item === SEPARATOR_ITEM ? "---" : item.name}
                         </button>
                     );
                 },
diff --git a/packages/shared-components/src/core/VirtualizedList/virtualized-list.tsx b/packages/shared-components/src/core/VirtualizedList/virtualized-list.ts
similarity index 77%
rename from packages/shared-components/src/core/VirtualizedList/virtualized-list.tsx
rename to packages/shared-components/src/core/VirtualizedList/virtualized-list.ts
index 0eb632f3f1..cb4656e1f6 100644
--- a/packages/shared-components/src/core/VirtualizedList/virtualized-list.tsx
+++ b/packages/shared-components/src/core/VirtualizedList/virtualized-list.ts
@@ -6,7 +6,7 @@
  */
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { type ListRange, type VirtuosoHandle, type VirtuosoProps } from "react-virtuoso";
+import { type CalculateViewLocation, type ListRange, type VirtuosoHandle, type VirtuosoProps } from "react-virtuoso";
 
 /**
  * Keyboard key codes
@@ -68,7 +68,7 @@ export interface VirtualizedListProps<Item, Context> extends Omit<
     /**
      * Function to get the key to use for focusing an item.
      * @param item - The item to get the key for
-     * @return The key to use for focusing the item
+     * @returns The key to use for focusing the item
      */
     getItemKey: (item: Item) => string;
 
@@ -81,6 +81,13 @@ export interface VirtualizedListProps<Item, Context> extends Omit<
      */
     onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
 
+    /**
+     * When true, keyboard navigation (Arrow keys, Home, End, Page Up/Down) is disabled.
+     * All key events are forwarded directly to `onKeyDown` instead.
+     * Use this to prevent the list from scrolling while an item is being dragged via keyboard.
+     */
+    disableKeyboardNavigation?: boolean;
+
     /**
      * Optional total count of items (for virtualization with partial data loading).
      * If provided, this will be used instead of items.length for the total count.
@@ -115,6 +122,17 @@ export interface VirtualizedListProps<Item, Context> extends Omit<
      * @returns The corresponding index in the items array
      */
     mapRangeIndex?: (virtuosoIndex: number) => number;
+
+    /**
+     * Optional space, in pixels, reserved at the top of the scroll viewport — e.g. for a pinned
+     * sticky header that overlays the top of the list. When set, keyboard navigation scrolls
+     * focused items to just below this offset rather than flush to the top, so the focused item
+     * (and its focus ring / hover affordances) is never hidden behind the pinned header.
+     *
+     * Pass a function to vary the reserved space per item index — e.g. return 0 for an item that is
+     * itself the pinned header (so it lands flush at the top) and the header height for the rest.
+     */
+    scrollPaddingTop?: number | ((index: number) => number);
 }
 
 /**
@@ -138,6 +156,28 @@ export interface UseVirtualizedListResult<Item, Context> extends Omit<
     context: VirtualizedListContext<Context>;
 }
 
+/**
+ * Builds a Virtuoso `calculateViewLocation` that keeps `paddingTop` pixels clear at the top of the
+ * viewport (e.g. for a pinned sticky header). It honours the requested alignment and only insets
+ * the cases that would otherwise place the item against the top edge — so a focused item lands just
+ * below the pinned header instead of underneath it. `offset` is negative because Virtuoso adds it to
+ * the computed `scrollTop`, and a smaller scrollTop pushes the item further down the viewport.
+ */
+function reserveTopViewLocation(paddingTop: number): CalculateViewLocation {
+    return ({ itemTop, itemBottom, viewportTop, viewportBottom, locationParams: { align, behavior, ...rest } }) => {
+        if (align === "start" || (align === undefined && itemTop < viewportTop + paddingTop)) {
+            return { ...rest, behavior, align: "start", offset: -paddingTop };
+        }
+        if (align === "end" || (align === undefined && itemBottom > viewportBottom)) {
+            return { ...rest, behavior, align: "end" };
+        }
+        if (align === "center") {
+            return { ...rest, behavior, align: "center" };
+        }
+        return null;
+    };
+}
+
 /**
  * A hook that provides keyboard navigation and focus management for a virtualized list
  * built on top of react-virtuoso.
@@ -164,10 +204,13 @@ export function useVirtualizedList<Item, Context>(
         getItemKey,
         context,
         onKeyDown,
+        disableKeyboardNavigation,
         totalCount,
         rangeChanged,
         mapScrollIndex,
         mapRangeIndex,
+        scrollerRef: externalScrollerRef,
+        scrollPaddingTop,
         ...virtuosoProps
     } = props;
     /** Reference to the Virtuoso component for programmatic scrolling */
@@ -208,14 +251,19 @@ export function useVirtualizedList<Item, Context>(
                 const key = getItemKey(items[clampedIndex]);
                 setTabIndexKey(key);
                 const scrollIndex = mapScrollIndex ? mapScrollIndex(clampedIndex) : clampedIndex;
+                // Reserve space for a pinned header so the focused item isn't hidden behind it.
+                // The reserved amount can vary per item (e.g. 0 for the header that itself pins).
+                const paddingTop =
+                    typeof scrollPaddingTop === "function" ? scrollPaddingTop(clampedIndex) : (scrollPaddingTop ?? 0);
                 virtuosoHandleRef.current?.scrollIntoView({
                     index: scrollIndex,
                     align: align,
                     behavior: "auto",
+                    ...(paddingTop > 0 ? { calculateViewLocation: reserveTopViewLocation(paddingTop) } : {}),
                 });
             }
         },
-        [items, getItemKey, mapScrollIndex],
+        [items, getItemKey, mapScrollIndex, scrollPaddingTop],
     );
 
     /**
@@ -260,6 +308,13 @@ export function useVirtualizedList<Item, Context>(
                 return;
             }
 
+            // When keyboard navigation is disabled (e.g. during a keyboard drag),
+            // forward all events to the parent handler without handling navigation.
+            if (disableKeyboardNavigation) {
+                onKeyDown?.(e);
+                return;
+            }
+
             if (e.code === Key.ARROW_UP && currentIndex !== undefined) {
                 scrollToItem(currentIndex - 1, false);
                 handled = true;
@@ -300,16 +355,31 @@ export function useVirtualizedList<Item, Context>(
                 onKeyDown?.(e);
             }
         },
-        [scrollToIndex, scrollToItem, tabIndexKey, keyToIndexMap, visibleRange, items, onKeyDown],
+        [
+            scrollToIndex,
+            scrollToItem,
+            tabIndexKey,
+            keyToIndexMap,
+            visibleRange,
+            items,
+            onKeyDown,
+            disableKeyboardNavigation,
+        ],
     );
 
     /**
      * Callback ref for the Virtuoso scroller element.
-     * Stores the reference for use in focus management.
+     * Stores the reference for use in focus management, and forwards it to an
+     * optional external scrollerRef provided by the consumer (e.g. to observe
+     * scroll position) since the hook owns the scrollerRef passed to Virtuoso.
      */
-    const scrollerRef = useCallback((element: HTMLElement | Window | null) => {
-        virtuosoDomRef.current = element;
-    }, []);
+    const scrollerRef = useCallback(
+        (element: HTMLElement | Window | null) => {
+            virtuosoDomRef.current = element;
+            externalScrollerRef?.(element);
+        },
+        [externalScrollerRef],
+    );
 
     /**
      * Focus handler passed to each item component.
@@ -389,8 +459,16 @@ export function useVirtualizedList<Item, Context>(
         [handleRef],
     );
 
+    // Key items by id, not position, so react-virtuoso preserves (moves) the existing DOM
+    // node when an item's absolute index shifts — e.g. sections collapsing on drag start removes
+    // the rooms above a header, shifting its index. Without this, Virtuoso's default key is the
+    // index, so the wrapper (and the focused header inside it) remounts, the roving-tabindex effect
+    // refocuses the fresh node, and screen readers re-announce the header mid-drag.
+    const computeItemKey = useCallback((_index: number, item: Item): string => getItemKey(item), [getItemKey]);
+
     return {
         ...virtuosoProps,
+        computeItemKey,
         ref: setRef,
         scrollerRef,
         onKeyDown: keyDownCallback,
diff --git a/packages/shared-components/src/core/i18n/I18nApi.ts b/packages/shared-components/src/core/i18n/I18nApi.ts
index c65abad77a..c2d3691791 100644
--- a/packages/shared-components/src/core/i18n/I18nApi.ts
+++ b/packages/shared-components/src/core/i18n/I18nApi.ts
@@ -31,9 +31,9 @@ export class I18nApi implements II18nApi {
         const langs: Record<string, Record<string, string>> = {};
 
         for (const key in translations) {
-            for (const lang in translations[key as keyof Translations]) {
+            for (const lang in translations[key]) {
                 langs[lang] = langs[lang] || {};
-                langs[lang][key] = translations[key as keyof Translations]![lang];
+                langs[lang][key] = translations[key][lang];
             }
         }
 
@@ -53,7 +53,7 @@ export class I18nApi implements II18nApi {
     public translate(this: void, key: TranslationKey, variables: Variables | undefined, tags: Tags): React.ReactNode;
     public translate(this: void, key: TranslationKey, variables?: Variables, tags?: Tags): React.ReactNode | string {
         if (tags) return _t(key, variables, tags);
-        return _t(key, variables as Variables);
+        return _t(key, variables!);
     }
 
     public humanizeTime = (timeMillis: number): string => humanizeTime(timeMillis, this);
diff --git a/packages/shared-components/src/core/i18n/i18n.tsx b/packages/shared-components/src/core/i18n/i18n.tsx
index aea70f0783..b24559574b 100644
--- a/packages/shared-components/src/core/i18n/i18n.tsx
+++ b/packages/shared-components/src/core/i18n/i18n.tsx
@@ -19,7 +19,7 @@
  * you will end up with literal "<a>" in your output, rather than HTML. Note that you can also use variable
  * substitution to insert React components, but you can't use it to translate text between tags.
  *
- * @return a React <span> component if any non-strings were used in substitutions, otherwise a string
+ * @returns a React <span> component if any non-strings were used in substitutions, otherwise a string
  */
 import React from "react";
 import { KEY_SEPARATOR } from "matrix-web-i18n";
@@ -204,7 +204,7 @@ export function lookupString(key: TranslationKey): string {
  * @param {object} variables Variable substitutions, e.g { foo: 'bar' }
  * @param {object} tags Tag substitutions e.g. { 'a': (sub) => <a>{sub}</a> }
  *
- * @return a React <span> component if any non-strings were used in substitutions
+ * @returns a React <span> component if any non-strings were used in substitutions
  * or translation used a fallback locale, otherwise a string
  */
 // eslint-next-line @typescript-eslint/naming-convention
@@ -243,7 +243,7 @@ export function sanitizeForTranslation(text: string): string {
  * the substitution (e.g. return a React component). In case of a tag replacement, the function receives as
  * the argument the text inside the element corresponding to the tag.
  *
- * @return a React <span> component if any non-strings were used in substitutions, otherwise a string
+ * @returns a React <span> component if any non-strings were used in substitutions, otherwise a string
  */
 export function substitute(text: string, variables?: StringVariables): string;
 export function substitute(text: string, variables?: RichVariables): React.ReactNode;
@@ -277,7 +277,7 @@ export function substitute(text: string, variables?: IVariables, tags?: Tags): s
  * function which will receive as the argument the capture groups defined in the regexp. E.g.
  * { 'Hello (.?) World': (sub) => sub.toUpperCase() }
  *
- * @return a React <span> component if any non-strings were used in substitutions, otherwise a string
+ * @returns a React <span> component if any non-strings were used in substitutions, otherwise a string
  */
 export function replaceByRegexes(text: string, mapping: IVariables): string;
 export function replaceByRegexes(text: string, mapping: Tags): React.ReactNode;
@@ -325,6 +325,7 @@ export function replaceByRegexes(text: string, mapping: IVariables | Tags): stri
 
                 let replaced: SubstitutionValue;
                 // If substitution is a function, call it
+                // oxlint-disable-next-line unicorn/no-instanceof-builtins
                 if (mapping[regexpString] instanceof Function) {
                     replaced = ((mapping as Tags)[regexpString] as (...subs: string[]) => string)(...capturedGroups);
                 } else {
@@ -432,7 +433,8 @@ async function getLanguage(langPath: string): Promise<ICounterpartTranslation> {
 }
 
 export async function getLangsJson(): Promise<Languages> {
-    const url = i18nFolder + "languages.json";
+    const cachebust = Date.now();
+    const url = `${i18nFolder}languages.json?${cachebust}`;
 
     const res = await fetch(url, { method: "GET" });
 
diff --git a/packages/shared-components/src/core/pill-input/Pill/__snapshots__/Pill.test.tsx.snap b/packages/shared-components/src/core/pill-input/Pill/__snapshots__/Pill.test.tsx.snap
index 2757185f08..5a3b75a0d5 100644
--- a/packages/shared-components/src/core/pill-input/Pill/__snapshots__/Pill.test.tsx.snap
+++ b/packages/shared-components/src/core/pill-input/Pill/__snapshots__/Pill.test.tsx.snap
@@ -11,12 +11,12 @@ exports[`Pill > renders the pill 1`] = `
     />
     <span
       class="Pill-module_label"
-      id="_r_0_"
+      id="react-use-id-1"
     >
       Pill
     </span>
     <button
-      aria-describedby="_r_0_"
+      aria-describedby="react-use-id-1"
       aria-label="Delete"
       class="_icon-button_1215g_8 mx_Dialog_nonDialogButton"
       data-kind="primary"
@@ -56,7 +56,7 @@ exports[`Pill > renders the pill without close button 1`] = `
     />
     <span
       class="Pill-module_label"
-      id="_r_1_"
+      id="react-use-id-1"
     >
       Pill
     </span>
diff --git a/packages/shared-components/src/core/rich-list/RichItem/__snapshots__/RichItem.test.tsx.snap b/packages/shared-components/src/core/rich-list/RichItem/__snapshots__/RichItem.test.tsx.snap
index bbe20579e4..cfd9ef253f 100644
--- a/packages/shared-components/src/core/rich-list/RichItem/__snapshots__/RichItem.test.tsx.snap
+++ b/packages/shared-components/src/core/rich-list/RichItem/__snapshots__/RichItem.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`RichItem > renders the item in default state 1`] = `
 <div>
   <ul
     role="listbox"
-    style="color-scheme: unset; forced-color-adjust: unset; math-depth: unset; position: unset; position-anchor: unset; text-size-adjust: unset; appearance: unset; color: unset; font: unset; font-palette: unset; font-synthesis: unset; position-area: unset; text-orientation: unset; text-rendering: unset; text-spacing-trim: unset; -webkit-font-smoothing: unset; -webkit-locale: unset; -webkit-text-orientation: unset; -webkit-writing-mode: unset; writing-mode: unset; zoom: unset; accent-color: unset; place-content: unset; place-items: unset; place-self: unset; alignment-baseline: unset; anchor-name: unset; anchor-scope: unset; animation-composition: unset; animation: unset; animation-trigger: unset; app-region: unset; aspect-ratio: unset; backdrop-filter: unset; backface-visibility: unset; background: unset; background-blend-mode: unset; baseline-shift: unset; baseline-source: unset; block-size: unset; border-block: unset; border: unset; border-radius: unset; border-collapse: unset; border-end-end-radius: unset; border-end-start-radius: unset; border-inline: unset; border-shape: unset; border-start-end-radius: unset; border-start-start-radius: unset; inset: unset; box-decoration-break: unset; box-shadow: unset; box-sizing: unset; break-after: unset; break-before: unset; break-inside: unset; buffered-rendering: unset; caption-side: unset; caret-animation: unset; caret-color: unset; caret-shape: unset; clear: unset; clip: unset; clip-path: unset; clip-rule: unset; color-interpolation: unset; color-interpolation-filters: unset; color-rendering: unset; columns: unset; column-fill: unset; gap: unset; column-rule: unset; column-span: unset; contain: unset; contain-intrinsic-block-size: unset; contain-intrinsic-size: unset; contain-intrinsic-inline-size: unset; container: unset; content: unset; content-visibility: unset; corner-shape: unset; corner-block-end-shape: unset; corner-block-start-shape: unset; counter-increment: unset; counter-reset: unset; counter-set: unset; cursor: unset; cx: unset; cy: unset; d: unset; display: unset; dominant-baseline: unset; dynamic-range-limit: unset; empty-cells: unset; field-sizing: unset; fill: unset; fill-opacity: unset; fill-rule: unset; filter: unset; flex: unset; flex-flow: unset; float: unset; flood-color: unset; flood-opacity: unset; grid: unset; grid-area: unset; height: unset; hyphenate-character: unset; hyphenate-limit-chars: unset; hyphens: unset; image-orientation: unset; image-rendering: unset; initial-letter: unset; inline-size: unset; inset-block: unset; inset-inline: unset; interactivity: unset; interest-delay: unset; interpolate-size: unset; isolation: unset; letter-spacing: unset; lighting-color: unset; line-break: unset; margin-block: unset; margin: unset; margin-inline: unset; marker: unset; mask: unset; mask-type: unset; math-shift: unset; math-style: unset; max-block-size: unset; max-height: unset; max-inline-size: unset; max-width: unset; min-block-size: unset; min-height: unset; min-inline-size: unset; min-width: unset; mix-blend-mode: unset; object-fit: unset; object-position: unset; object-view-box: unset; offset: unset; opacity: unset; order: unset; orphans: unset; outline: unset; outline-offset: unset; overflow-anchor: unset; overflow-block: unset; overflow-clip-margin: unset; overflow-inline: unset; overflow-wrap: unset; overflow: unset; overlay: unset; overscroll-behavior-block: unset; overscroll-behavior-inline: unset; overscroll-behavior: unset; padding-block: unset; padding: unset; padding-inline: unset; page: unset; page-orientation: unset; paint-order: unset; perspective: unset; perspective-origin: unset; pointer-events: unset; position-try: unset; position-visibility: unset; print-color-adjust: unset; quotes: unset; r: unset; reading-flow: unset; reading-order: unset; resize: unset; rotate: unset; ruby-align: unset; ruby-position: unset; rx: unset; ry: unset; scale: unset; scroll-behavior: unset; scroll-initial-target: unset; scroll-margin-block: unset; scroll-margin: unset; scroll-margin-inline: unset; scroll-marker-group: unset; scroll-padding-block: unset; scroll-padding: unset; scroll-padding-inline: unset; scroll-snap-align: unset; scroll-snap-stop: unset; scroll-snap-type: unset; scroll-target-group: unset; scroll-timeline: unset; scrollbar-color: unset; scrollbar-gutter: unset; scrollbar-width: unset; shape-image-threshold: unset; shape-margin: unset; shape-outside: unset; shape-rendering: unset; size: unset; speak: unset; stop-color: unset; stop-opacity: unset; stroke: unset; stroke-dasharray: unset; stroke-dashoffset: unset; stroke-linecap: unset; stroke-linejoin: unset; stroke-miterlimit: unset; stroke-opacity: unset; stroke-width: unset; tab-size: unset; table-layout: unset; text-align: unset; text-align-last: unset; text-anchor: unset; text-autospace: unset; text-box: unset; text-combine-upright: unset; text-decoration: unset; text-decoration-skip-ink: unset; text-emphasis: unset; text-emphasis-position: unset; text-indent: unset; text-justify: unset; text-overflow: unset; text-shadow: unset; text-transform: unset; text-underline-offset: unset; text-underline-position: unset; text-wrap: unset; timeline-scope: unset; timeline-trigger: unset; touch-action: unset; transform: unset; transform-box: unset; transform-origin: unset; transform-style: unset; transition: unset; translate: unset; trigger-scope: unset; user-select: unset; vector-effect: unset; vertical-align: unset; view-timeline: unset; view-transition-class: unset; view-transition-group: unset; view-transition-name: unset; view-transition-scope: unset; visibility: unset; border-spacing: unset; -webkit-box-align: unset; -webkit-box-decoration-break: unset; -webkit-box-direction: unset; -webkit-box-flex: unset; -webkit-box-ordinal-group: unset; -webkit-box-orient: unset; -webkit-box-pack: unset; -webkit-box-reflect: unset; -webkit-line-break: unset; -webkit-line-clamp: unset; -webkit-mask-box-image: unset; -webkit-rtl-ordering: unset; -webkit-ruby-position: unset; -webkit-tap-highlight-color: unset; -webkit-text-combine: unset; -webkit-text-decorations-in-effect: unset; -webkit-text-fill-color: unset; -webkit-text-security: unset; -webkit-text-stroke: unset; -webkit-user-drag: unset; white-space-collapse: unset; widows: unset; width: unset; will-change: unset; word-break: unset; word-spacing: unset; x: unset; y: unset; z-index: unset; list-style: none;"
+    style="color-scheme: unset; forced-color-adjust: unset; math-depth: unset; position: unset; position-anchor: unset; text-size-adjust: unset; appearance: unset; color: unset; font: unset; font-palette: unset; font-synthesis: unset; position-area: unset; text-orientation: unset; text-rendering: unset; text-spacing-trim: unset; -webkit-font-smoothing: unset; -webkit-locale: unset; -webkit-text-orientation: unset; -webkit-writing-mode: unset; writing-mode: unset; zoom: unset; accent-color: unset; place-content: unset; place-items: unset; place-self: unset; alignment-baseline: unset; anchor-name: unset; anchor-scope: unset; animation-composition: unset; animation: unset; animation-trigger: unset; app-region: unset; aspect-ratio: unset; backdrop-filter: unset; backface-visibility: unset; background: unset; background-blend-mode: unset; baseline-shift: unset; baseline-source: unset; block-size: unset; border-block: unset; border: unset; border-radius: unset; border-collapse: unset; border-end-end-radius: unset; border-end-start-radius: unset; border-inline: unset; border-shape: unset; border-start-end-radius: unset; border-start-start-radius: unset; inset: unset; box-decoration-break: unset; box-shadow: unset; box-sizing: unset; break-after: unset; break-before: unset; break-inside: unset; buffered-rendering: unset; caption-side: unset; caret-animation: unset; caret-color: unset; caret-shape: unset; clear: unset; clip: unset; clip-path: unset; clip-rule: unset; color-interpolation: unset; color-interpolation-filters: unset; color-rendering: unset; columns: unset; column-fill: unset; gap: unset; rule-break: unset; rule: unset; rule-inset: unset; rule-visibility-items: unset; column-span: unset; contain: unset; contain-intrinsic-block-size: unset; contain-intrinsic-size: unset; contain-intrinsic-inline-size: unset; container: unset; content: unset; content-visibility: unset; corner-shape: unset; corner-block-end-shape: unset; corner-block-start-shape: unset; counter-increment: unset; counter-reset: unset; counter-set: unset; cursor: unset; cx: unset; cy: unset; d: unset; display: unset; dominant-baseline: unset; dynamic-range-limit: unset; empty-cells: unset; field-sizing: unset; fill: unset; fill-opacity: unset; fill-rule: unset; filter: unset; flex: unset; flex-flow: unset; float: unset; flood-color: unset; flood-opacity: unset; grid: unset; grid-area: unset; height: unset; hyphenate-character: unset; hyphenate-limit-chars: unset; hyphens: unset; image-orientation: unset; image-rendering: unset; initial-letter: unset; inline-size: unset; inset-block: unset; inset-inline: unset; interactivity: unset; interest-delay: unset; interpolate-size: unset; isolation: unset; letter-spacing: unset; lighting-color: unset; line-break: unset; margin-block: unset; margin: unset; margin-inline: unset; marker: unset; mask: unset; mask-type: unset; math-shift: unset; math-style: unset; max-block-size: unset; max-height: unset; max-inline-size: unset; max-width: unset; min-block-size: unset; min-height: unset; min-inline-size: unset; min-width: unset; mix-blend-mode: unset; object-fit: unset; object-position: unset; object-view-box: unset; offset: unset; opacity: unset; order: unset; orphans: unset; outline: unset; outline-offset: unset; overflow-anchor: unset; overflow-block: unset; overflow-clip-margin: unset; overflow-inline: unset; overflow-wrap: unset; overflow: unset; overlay: unset; overscroll-behavior-block: unset; overscroll-behavior-inline: unset; overscroll-behavior: unset; padding-block: unset; padding: unset; padding-inline: unset; page: unset; page-orientation: unset; paint-order: unset; perspective: unset; perspective-origin: unset; pointer-events: unset; position-try: unset; position-visibility: unset; print-color-adjust: unset; quotes: unset; r: unset; reading-flow: unset; reading-order: unset; resize: unset; rotate: unset; ruby-align: unset; ruby-position: unset; rule-overlap: unset; rx: unset; ry: unset; scale: unset; scroll-behavior: unset; scroll-initial-target: unset; scroll-margin-block: unset; scroll-margin: unset; scroll-margin-inline: unset; scroll-marker-group: unset; scroll-padding-block: unset; scroll-padding: unset; scroll-padding-inline: unset; scroll-snap-align: unset; scroll-snap-stop: unset; scroll-snap-type: unset; scroll-target-group: unset; scroll-timeline: unset; scrollbar-color: unset; scrollbar-gutter: unset; scrollbar-width: unset; shape-image-threshold: unset; shape-margin: unset; shape-outside: unset; shape-rendering: unset; size: unset; speak: unset; stop-color: unset; stop-opacity: unset; stroke: unset; stroke-dasharray: unset; stroke-dashoffset: unset; stroke-linecap: unset; stroke-linejoin: unset; stroke-miterlimit: unset; stroke-opacity: unset; stroke-width: unset; tab-size: unset; table-layout: unset; text-align: unset; text-align-last: unset; text-anchor: unset; text-autospace: unset; text-box: unset; text-combine-upright: unset; text-decoration: unset; text-decoration-skip-ink: unset; text-emphasis: unset; text-emphasis-position: unset; text-indent: unset; text-justify: unset; text-overflow: unset; text-shadow: unset; text-transform: unset; text-underline-offset: unset; text-underline-position: unset; text-wrap: unset; timeline-scope: unset; timeline-trigger: unset; touch-action: unset; transform: unset; transform-box: unset; transform-origin: unset; transform-style: unset; transition: unset; translate: unset; trigger-scope: unset; user-select: unset; vector-effect: unset; vertical-align: unset; view-timeline: unset; view-transition-class: unset; view-transition-group: unset; view-transition-name: unset; view-transition-scope: unset; visibility: unset; border-spacing: unset; -webkit-box-align: unset; -webkit-box-decoration-break: unset; -webkit-box-direction: unset; -webkit-box-flex: unset; -webkit-box-ordinal-group: unset; -webkit-box-orient: unset; -webkit-box-pack: unset; -webkit-box-reflect: unset; -webkit-line-break: unset; -webkit-line-clamp: unset; -webkit-mask-box-image: unset; -webkit-rtl-ordering: unset; -webkit-ruby-position: unset; -webkit-tap-highlight-color: unset; -webkit-text-combine: unset; -webkit-text-decorations-in-effect: unset; -webkit-text-fill-color: unset; -webkit-text-security: unset; -webkit-text-stroke: unset; -webkit-user-drag: unset; white-space-collapse: unset; widows: unset; width: unset; will-change: unset; word-break: unset; word-spacing: unset; x: unset; y: unset; z-index: unset; list-style: none;"
   >
     <li
       aria-label="Rich Item Title"
@@ -45,7 +45,7 @@ exports[`RichItem > renders the item in selected state 1`] = `
 <div>
   <ul
     role="listbox"
-    style="color-scheme: unset; forced-color-adjust: unset; math-depth: unset; position: unset; position-anchor: unset; text-size-adjust: unset; appearance: unset; color: unset; font: unset; font-palette: unset; font-synthesis: unset; position-area: unset; text-orientation: unset; text-rendering: unset; text-spacing-trim: unset; -webkit-font-smoothing: unset; -webkit-locale: unset; -webkit-text-orientation: unset; -webkit-writing-mode: unset; writing-mode: unset; zoom: unset; accent-color: unset; place-content: unset; place-items: unset; place-self: unset; alignment-baseline: unset; anchor-name: unset; anchor-scope: unset; animation-composition: unset; animation: unset; animation-trigger: unset; app-region: unset; aspect-ratio: unset; backdrop-filter: unset; backface-visibility: unset; background: unset; background-blend-mode: unset; baseline-shift: unset; baseline-source: unset; block-size: unset; border-block: unset; border: unset; border-radius: unset; border-collapse: unset; border-end-end-radius: unset; border-end-start-radius: unset; border-inline: unset; border-shape: unset; border-start-end-radius: unset; border-start-start-radius: unset; inset: unset; box-decoration-break: unset; box-shadow: unset; box-sizing: unset; break-after: unset; break-before: unset; break-inside: unset; buffered-rendering: unset; caption-side: unset; caret-animation: unset; caret-color: unset; caret-shape: unset; clear: unset; clip: unset; clip-path: unset; clip-rule: unset; color-interpolation: unset; color-interpolation-filters: unset; color-rendering: unset; columns: unset; column-fill: unset; gap: unset; column-rule: unset; column-span: unset; contain: unset; contain-intrinsic-block-size: unset; contain-intrinsic-size: unset; contain-intrinsic-inline-size: unset; container: unset; content: unset; content-visibility: unset; corner-shape: unset; corner-block-end-shape: unset; corner-block-start-shape: unset; counter-increment: unset; counter-reset: unset; counter-set: unset; cursor: unset; cx: unset; cy: unset; d: unset; display: unset; dominant-baseline: unset; dynamic-range-limit: unset; empty-cells: unset; field-sizing: unset; fill: unset; fill-opacity: unset; fill-rule: unset; filter: unset; flex: unset; flex-flow: unset; float: unset; flood-color: unset; flood-opacity: unset; grid: unset; grid-area: unset; height: unset; hyphenate-character: unset; hyphenate-limit-chars: unset; hyphens: unset; image-orientation: unset; image-rendering: unset; initial-letter: unset; inline-size: unset; inset-block: unset; inset-inline: unset; interactivity: unset; interest-delay: unset; interpolate-size: unset; isolation: unset; letter-spacing: unset; lighting-color: unset; line-break: unset; margin-block: unset; margin: unset; margin-inline: unset; marker: unset; mask: unset; mask-type: unset; math-shift: unset; math-style: unset; max-block-size: unset; max-height: unset; max-inline-size: unset; max-width: unset; min-block-size: unset; min-height: unset; min-inline-size: unset; min-width: unset; mix-blend-mode: unset; object-fit: unset; object-position: unset; object-view-box: unset; offset: unset; opacity: unset; order: unset; orphans: unset; outline: unset; outline-offset: unset; overflow-anchor: unset; overflow-block: unset; overflow-clip-margin: unset; overflow-inline: unset; overflow-wrap: unset; overflow: unset; overlay: unset; overscroll-behavior-block: unset; overscroll-behavior-inline: unset; overscroll-behavior: unset; padding-block: unset; padding: unset; padding-inline: unset; page: unset; page-orientation: unset; paint-order: unset; perspective: unset; perspective-origin: unset; pointer-events: unset; position-try: unset; position-visibility: unset; print-color-adjust: unset; quotes: unset; r: unset; reading-flow: unset; reading-order: unset; resize: unset; rotate: unset; ruby-align: unset; ruby-position: unset; rx: unset; ry: unset; scale: unset; scroll-behavior: unset; scroll-initial-target: unset; scroll-margin-block: unset; scroll-margin: unset; scroll-margin-inline: unset; scroll-marker-group: unset; scroll-padding-block: unset; scroll-padding: unset; scroll-padding-inline: unset; scroll-snap-align: unset; scroll-snap-stop: unset; scroll-snap-type: unset; scroll-target-group: unset; scroll-timeline: unset; scrollbar-color: unset; scrollbar-gutter: unset; scrollbar-width: unset; shape-image-threshold: unset; shape-margin: unset; shape-outside: unset; shape-rendering: unset; size: unset; speak: unset; stop-color: unset; stop-opacity: unset; stroke: unset; stroke-dasharray: unset; stroke-dashoffset: unset; stroke-linecap: unset; stroke-linejoin: unset; stroke-miterlimit: unset; stroke-opacity: unset; stroke-width: unset; tab-size: unset; table-layout: unset; text-align: unset; text-align-last: unset; text-anchor: unset; text-autospace: unset; text-box: unset; text-combine-upright: unset; text-decoration: unset; text-decoration-skip-ink: unset; text-emphasis: unset; text-emphasis-position: unset; text-indent: unset; text-justify: unset; text-overflow: unset; text-shadow: unset; text-transform: unset; text-underline-offset: unset; text-underline-position: unset; text-wrap: unset; timeline-scope: unset; timeline-trigger: unset; touch-action: unset; transform: unset; transform-box: unset; transform-origin: unset; transform-style: unset; transition: unset; translate: unset; trigger-scope: unset; user-select: unset; vector-effect: unset; vertical-align: unset; view-timeline: unset; view-transition-class: unset; view-transition-group: unset; view-transition-name: unset; view-transition-scope: unset; visibility: unset; border-spacing: unset; -webkit-box-align: unset; -webkit-box-decoration-break: unset; -webkit-box-direction: unset; -webkit-box-flex: unset; -webkit-box-ordinal-group: unset; -webkit-box-orient: unset; -webkit-box-pack: unset; -webkit-box-reflect: unset; -webkit-line-break: unset; -webkit-line-clamp: unset; -webkit-mask-box-image: unset; -webkit-rtl-ordering: unset; -webkit-ruby-position: unset; -webkit-tap-highlight-color: unset; -webkit-text-combine: unset; -webkit-text-decorations-in-effect: unset; -webkit-text-fill-color: unset; -webkit-text-security: unset; -webkit-text-stroke: unset; -webkit-user-drag: unset; white-space-collapse: unset; widows: unset; width: unset; will-change: unset; word-break: unset; word-spacing: unset; x: unset; y: unset; z-index: unset; list-style: none;"
+    style="color-scheme: unset; forced-color-adjust: unset; math-depth: unset; position: unset; position-anchor: unset; text-size-adjust: unset; appearance: unset; color: unset; font: unset; font-palette: unset; font-synthesis: unset; position-area: unset; text-orientation: unset; text-rendering: unset; text-spacing-trim: unset; -webkit-font-smoothing: unset; -webkit-locale: unset; -webkit-text-orientation: unset; -webkit-writing-mode: unset; writing-mode: unset; zoom: unset; accent-color: unset; place-content: unset; place-items: unset; place-self: unset; alignment-baseline: unset; anchor-name: unset; anchor-scope: unset; animation-composition: unset; animation: unset; animation-trigger: unset; app-region: unset; aspect-ratio: unset; backdrop-filter: unset; backface-visibility: unset; background: unset; background-blend-mode: unset; baseline-shift: unset; baseline-source: unset; block-size: unset; border-block: unset; border: unset; border-radius: unset; border-collapse: unset; border-end-end-radius: unset; border-end-start-radius: unset; border-inline: unset; border-shape: unset; border-start-end-radius: unset; border-start-start-radius: unset; inset: unset; box-decoration-break: unset; box-shadow: unset; box-sizing: unset; break-after: unset; break-before: unset; break-inside: unset; buffered-rendering: unset; caption-side: unset; caret-animation: unset; caret-color: unset; caret-shape: unset; clear: unset; clip: unset; clip-path: unset; clip-rule: unset; color-interpolation: unset; color-interpolation-filters: unset; color-rendering: unset; columns: unset; column-fill: unset; gap: unset; rule-break: unset; rule: unset; rule-inset: unset; rule-visibility-items: unset; column-span: unset; contain: unset; contain-intrinsic-block-size: unset; contain-intrinsic-size: unset; contain-intrinsic-inline-size: unset; container: unset; content: unset; content-visibility: unset; corner-shape: unset; corner-block-end-shape: unset; corner-block-start-shape: unset; counter-increment: unset; counter-reset: unset; counter-set: unset; cursor: unset; cx: unset; cy: unset; d: unset; display: unset; dominant-baseline: unset; dynamic-range-limit: unset; empty-cells: unset; field-sizing: unset; fill: unset; fill-opacity: unset; fill-rule: unset; filter: unset; flex: unset; flex-flow: unset; float: unset; flood-color: unset; flood-opacity: unset; grid: unset; grid-area: unset; height: unset; hyphenate-character: unset; hyphenate-limit-chars: unset; hyphens: unset; image-orientation: unset; image-rendering: unset; initial-letter: unset; inline-size: unset; inset-block: unset; inset-inline: unset; interactivity: unset; interest-delay: unset; interpolate-size: unset; isolation: unset; letter-spacing: unset; lighting-color: unset; line-break: unset; margin-block: unset; margin: unset; margin-inline: unset; marker: unset; mask: unset; mask-type: unset; math-shift: unset; math-style: unset; max-block-size: unset; max-height: unset; max-inline-size: unset; max-width: unset; min-block-size: unset; min-height: unset; min-inline-size: unset; min-width: unset; mix-blend-mode: unset; object-fit: unset; object-position: unset; object-view-box: unset; offset: unset; opacity: unset; order: unset; orphans: unset; outline: unset; outline-offset: unset; overflow-anchor: unset; overflow-block: unset; overflow-clip-margin: unset; overflow-inline: unset; overflow-wrap: unset; overflow: unset; overlay: unset; overscroll-behavior-block: unset; overscroll-behavior-inline: unset; overscroll-behavior: unset; padding-block: unset; padding: unset; padding-inline: unset; page: unset; page-orientation: unset; paint-order: unset; perspective: unset; perspective-origin: unset; pointer-events: unset; position-try: unset; position-visibility: unset; print-color-adjust: unset; quotes: unset; r: unset; reading-flow: unset; reading-order: unset; resize: unset; rotate: unset; ruby-align: unset; ruby-position: unset; rule-overlap: unset; rx: unset; ry: unset; scale: unset; scroll-behavior: unset; scroll-initial-target: unset; scroll-margin-block: unset; scroll-margin: unset; scroll-margin-inline: unset; scroll-marker-group: unset; scroll-padding-block: unset; scroll-padding: unset; scroll-padding-inline: unset; scroll-snap-align: unset; scroll-snap-stop: unset; scroll-snap-type: unset; scroll-target-group: unset; scroll-timeline: unset; scrollbar-color: unset; scrollbar-gutter: unset; scrollbar-width: unset; shape-image-threshold: unset; shape-margin: unset; shape-outside: unset; shape-rendering: unset; size: unset; speak: unset; stop-color: unset; stop-opacity: unset; stroke: unset; stroke-dasharray: unset; stroke-dashoffset: unset; stroke-linecap: unset; stroke-linejoin: unset; stroke-miterlimit: unset; stroke-opacity: unset; stroke-width: unset; tab-size: unset; table-layout: unset; text-align: unset; text-align-last: unset; text-anchor: unset; text-autospace: unset; text-box: unset; text-combine-upright: unset; text-decoration: unset; text-decoration-skip-ink: unset; text-emphasis: unset; text-emphasis-position: unset; text-indent: unset; text-justify: unset; text-overflow: unset; text-shadow: unset; text-transform: unset; text-underline-offset: unset; text-underline-position: unset; text-wrap: unset; timeline-scope: unset; timeline-trigger: unset; touch-action: unset; transform: unset; transform-box: unset; transform-origin: unset; transform-style: unset; transition: unset; translate: unset; trigger-scope: unset; user-select: unset; vector-effect: unset; vertical-align: unset; view-timeline: unset; view-transition-class: unset; view-transition-group: unset; view-transition-name: unset; view-transition-scope: unset; visibility: unset; border-spacing: unset; -webkit-box-align: unset; -webkit-box-decoration-break: unset; -webkit-box-direction: unset; -webkit-box-flex: unset; -webkit-box-ordinal-group: unset; -webkit-box-orient: unset; -webkit-box-pack: unset; -webkit-box-reflect: unset; -webkit-line-break: unset; -webkit-line-clamp: unset; -webkit-mask-box-image: unset; -webkit-rtl-ordering: unset; -webkit-ruby-position: unset; -webkit-tap-highlight-color: unset; -webkit-text-combine: unset; -webkit-text-decorations-in-effect: unset; -webkit-text-fill-color: unset; -webkit-text-security: unset; -webkit-text-stroke: unset; -webkit-user-drag: unset; white-space-collapse: unset; widows: unset; width: unset; will-change: unset; word-break: unset; word-spacing: unset; x: unset; y: unset; z-index: unset; list-style: none;"
   >
     <li
       aria-label="Rich Item Title"
@@ -97,7 +97,7 @@ exports[`RichItem > renders the item without timestamp 1`] = `
 <div>
   <ul
     role="listbox"
-    style="color-scheme: unset; forced-color-adjust: unset; math-depth: unset; position: unset; position-anchor: unset; text-size-adjust: unset; appearance: unset; color: unset; font: unset; font-palette: unset; font-synthesis: unset; position-area: unset; text-orientation: unset; text-rendering: unset; text-spacing-trim: unset; -webkit-font-smoothing: unset; -webkit-locale: unset; -webkit-text-orientation: unset; -webkit-writing-mode: unset; writing-mode: unset; zoom: unset; accent-color: unset; place-content: unset; place-items: unset; place-self: unset; alignment-baseline: unset; anchor-name: unset; anchor-scope: unset; animation-composition: unset; animation: unset; animation-trigger: unset; app-region: unset; aspect-ratio: unset; backdrop-filter: unset; backface-visibility: unset; background: unset; background-blend-mode: unset; baseline-shift: unset; baseline-source: unset; block-size: unset; border-block: unset; border: unset; border-radius: unset; border-collapse: unset; border-end-end-radius: unset; border-end-start-radius: unset; border-inline: unset; border-shape: unset; border-start-end-radius: unset; border-start-start-radius: unset; inset: unset; box-decoration-break: unset; box-shadow: unset; box-sizing: unset; break-after: unset; break-before: unset; break-inside: unset; buffered-rendering: unset; caption-side: unset; caret-animation: unset; caret-color: unset; caret-shape: unset; clear: unset; clip: unset; clip-path: unset; clip-rule: unset; color-interpolation: unset; color-interpolation-filters: unset; color-rendering: unset; columns: unset; column-fill: unset; gap: unset; column-rule: unset; column-span: unset; contain: unset; contain-intrinsic-block-size: unset; contain-intrinsic-size: unset; contain-intrinsic-inline-size: unset; container: unset; content: unset; content-visibility: unset; corner-shape: unset; corner-block-end-shape: unset; corner-block-start-shape: unset; counter-increment: unset; counter-reset: unset; counter-set: unset; cursor: unset; cx: unset; cy: unset; d: unset; display: unset; dominant-baseline: unset; dynamic-range-limit: unset; empty-cells: unset; field-sizing: unset; fill: unset; fill-opacity: unset; fill-rule: unset; filter: unset; flex: unset; flex-flow: unset; float: unset; flood-color: unset; flood-opacity: unset; grid: unset; grid-area: unset; height: unset; hyphenate-character: unset; hyphenate-limit-chars: unset; hyphens: unset; image-orientation: unset; image-rendering: unset; initial-letter: unset; inline-size: unset; inset-block: unset; inset-inline: unset; interactivity: unset; interest-delay: unset; interpolate-size: unset; isolation: unset; letter-spacing: unset; lighting-color: unset; line-break: unset; margin-block: unset; margin: unset; margin-inline: unset; marker: unset; mask: unset; mask-type: unset; math-shift: unset; math-style: unset; max-block-size: unset; max-height: unset; max-inline-size: unset; max-width: unset; min-block-size: unset; min-height: unset; min-inline-size: unset; min-width: unset; mix-blend-mode: unset; object-fit: unset; object-position: unset; object-view-box: unset; offset: unset; opacity: unset; order: unset; orphans: unset; outline: unset; outline-offset: unset; overflow-anchor: unset; overflow-block: unset; overflow-clip-margin: unset; overflow-inline: unset; overflow-wrap: unset; overflow: unset; overlay: unset; overscroll-behavior-block: unset; overscroll-behavior-inline: unset; overscroll-behavior: unset; padding-block: unset; padding: unset; padding-inline: unset; page: unset; page-orientation: unset; paint-order: unset; perspective: unset; perspective-origin: unset; pointer-events: unset; position-try: unset; position-visibility: unset; print-color-adjust: unset; quotes: unset; r: unset; reading-flow: unset; reading-order: unset; resize: unset; rotate: unset; ruby-align: unset; ruby-position: unset; rx: unset; ry: unset; scale: unset; scroll-behavior: unset; scroll-initial-target: unset; scroll-margin-block: unset; scroll-margin: unset; scroll-margin-inline: unset; scroll-marker-group: unset; scroll-padding-block: unset; scroll-padding: unset; scroll-padding-inline: unset; scroll-snap-align: unset; scroll-snap-stop: unset; scroll-snap-type: unset; scroll-target-group: unset; scroll-timeline: unset; scrollbar-color: unset; scrollbar-gutter: unset; scrollbar-width: unset; shape-image-threshold: unset; shape-margin: unset; shape-outside: unset; shape-rendering: unset; size: unset; speak: unset; stop-color: unset; stop-opacity: unset; stroke: unset; stroke-dasharray: unset; stroke-dashoffset: unset; stroke-linecap: unset; stroke-linejoin: unset; stroke-miterlimit: unset; stroke-opacity: unset; stroke-width: unset; tab-size: unset; table-layout: unset; text-align: unset; text-align-last: unset; text-anchor: unset; text-autospace: unset; text-box: unset; text-combine-upright: unset; text-decoration: unset; text-decoration-skip-ink: unset; text-emphasis: unset; text-emphasis-position: unset; text-indent: unset; text-justify: unset; text-overflow: unset; text-shadow: unset; text-transform: unset; text-underline-offset: unset; text-underline-position: unset; text-wrap: unset; timeline-scope: unset; timeline-trigger: unset; touch-action: unset; transform: unset; transform-box: unset; transform-origin: unset; transform-style: unset; transition: unset; translate: unset; trigger-scope: unset; user-select: unset; vector-effect: unset; vertical-align: unset; view-timeline: unset; view-transition-class: unset; view-transition-group: unset; view-transition-name: unset; view-transition-scope: unset; visibility: unset; border-spacing: unset; -webkit-box-align: unset; -webkit-box-decoration-break: unset; -webkit-box-direction: unset; -webkit-box-flex: unset; -webkit-box-ordinal-group: unset; -webkit-box-orient: unset; -webkit-box-pack: unset; -webkit-box-reflect: unset; -webkit-line-break: unset; -webkit-line-clamp: unset; -webkit-mask-box-image: unset; -webkit-rtl-ordering: unset; -webkit-ruby-position: unset; -webkit-tap-highlight-color: unset; -webkit-text-combine: unset; -webkit-text-decorations-in-effect: unset; -webkit-text-fill-color: unset; -webkit-text-security: unset; -webkit-text-stroke: unset; -webkit-user-drag: unset; white-space-collapse: unset; widows: unset; width: unset; will-change: unset; word-break: unset; word-spacing: unset; x: unset; y: unset; z-index: unset; list-style: none;"
+    style="color-scheme: unset; forced-color-adjust: unset; math-depth: unset; position: unset; position-anchor: unset; text-size-adjust: unset; appearance: unset; color: unset; font: unset; font-palette: unset; font-synthesis: unset; position-area: unset; text-orientation: unset; text-rendering: unset; text-spacing-trim: unset; -webkit-font-smoothing: unset; -webkit-locale: unset; -webkit-text-orientation: unset; -webkit-writing-mode: unset; writing-mode: unset; zoom: unset; accent-color: unset; place-content: unset; place-items: unset; place-self: unset; alignment-baseline: unset; anchor-name: unset; anchor-scope: unset; animation-composition: unset; animation: unset; animation-trigger: unset; app-region: unset; aspect-ratio: unset; backdrop-filter: unset; backface-visibility: unset; background: unset; background-blend-mode: unset; baseline-shift: unset; baseline-source: unset; block-size: unset; border-block: unset; border: unset; border-radius: unset; border-collapse: unset; border-end-end-radius: unset; border-end-start-radius: unset; border-inline: unset; border-shape: unset; border-start-end-radius: unset; border-start-start-radius: unset; inset: unset; box-decoration-break: unset; box-shadow: unset; box-sizing: unset; break-after: unset; break-before: unset; break-inside: unset; buffered-rendering: unset; caption-side: unset; caret-animation: unset; caret-color: unset; caret-shape: unset; clear: unset; clip: unset; clip-path: unset; clip-rule: unset; color-interpolation: unset; color-interpolation-filters: unset; color-rendering: unset; columns: unset; column-fill: unset; gap: unset; rule-break: unset; rule: unset; rule-inset: unset; rule-visibility-items: unset; column-span: unset; contain: unset; contain-intrinsic-block-size: unset; contain-intrinsic-size: unset; contain-intrinsic-inline-size: unset; container: unset; content: unset; content-visibility: unset; corner-shape: unset; corner-block-end-shape: unset; corner-block-start-shape: unset; counter-increment: unset; counter-reset: unset; counter-set: unset; cursor: unset; cx: unset; cy: unset; d: unset; display: unset; dominant-baseline: unset; dynamic-range-limit: unset; empty-cells: unset; field-sizing: unset; fill: unset; fill-opacity: unset; fill-rule: unset; filter: unset; flex: unset; flex-flow: unset; float: unset; flood-color: unset; flood-opacity: unset; grid: unset; grid-area: unset; height: unset; hyphenate-character: unset; hyphenate-limit-chars: unset; hyphens: unset; image-orientation: unset; image-rendering: unset; initial-letter: unset; inline-size: unset; inset-block: unset; inset-inline: unset; interactivity: unset; interest-delay: unset; interpolate-size: unset; isolation: unset; letter-spacing: unset; lighting-color: unset; line-break: unset; margin-block: unset; margin: unset; margin-inline: unset; marker: unset; mask: unset; mask-type: unset; math-shift: unset; math-style: unset; max-block-size: unset; max-height: unset; max-inline-size: unset; max-width: unset; min-block-size: unset; min-height: unset; min-inline-size: unset; min-width: unset; mix-blend-mode: unset; object-fit: unset; object-position: unset; object-view-box: unset; offset: unset; opacity: unset; order: unset; orphans: unset; outline: unset; outline-offset: unset; overflow-anchor: unset; overflow-block: unset; overflow-clip-margin: unset; overflow-inline: unset; overflow-wrap: unset; overflow: unset; overlay: unset; overscroll-behavior-block: unset; overscroll-behavior-inline: unset; overscroll-behavior: unset; padding-block: unset; padding: unset; padding-inline: unset; page: unset; page-orientation: unset; paint-order: unset; perspective: unset; perspective-origin: unset; pointer-events: unset; position-try: unset; position-visibility: unset; print-color-adjust: unset; quotes: unset; r: unset; reading-flow: unset; reading-order: unset; resize: unset; rotate: unset; ruby-align: unset; ruby-position: unset; rule-overlap: unset; rx: unset; ry: unset; scale: unset; scroll-behavior: unset; scroll-initial-target: unset; scroll-margin-block: unset; scroll-margin: unset; scroll-margin-inline: unset; scroll-marker-group: unset; scroll-padding-block: unset; scroll-padding: unset; scroll-padding-inline: unset; scroll-snap-align: unset; scroll-snap-stop: unset; scroll-snap-type: unset; scroll-target-group: unset; scroll-timeline: unset; scrollbar-color: unset; scrollbar-gutter: unset; scrollbar-width: unset; shape-image-threshold: unset; shape-margin: unset; shape-outside: unset; shape-rendering: unset; size: unset; speak: unset; stop-color: unset; stop-opacity: unset; stroke: unset; stroke-dasharray: unset; stroke-dashoffset: unset; stroke-linecap: unset; stroke-linejoin: unset; stroke-miterlimit: unset; stroke-opacity: unset; stroke-width: unset; tab-size: unset; table-layout: unset; text-align: unset; text-align-last: unset; text-anchor: unset; text-autospace: unset; text-box: unset; text-combine-upright: unset; text-decoration: unset; text-decoration-skip-ink: unset; text-emphasis: unset; text-emphasis-position: unset; text-indent: unset; text-justify: unset; text-overflow: unset; text-shadow: unset; text-transform: unset; text-underline-offset: unset; text-underline-position: unset; text-wrap: unset; timeline-scope: unset; timeline-trigger: unset; touch-action: unset; transform: unset; transform-box: unset; transform-origin: unset; transform-style: unset; transition: unset; translate: unset; trigger-scope: unset; user-select: unset; vector-effect: unset; vertical-align: unset; view-timeline: unset; view-transition-class: unset; view-transition-group: unset; view-transition-name: unset; view-transition-scope: unset; visibility: unset; border-spacing: unset; -webkit-box-align: unset; -webkit-box-decoration-break: unset; -webkit-box-direction: unset; -webkit-box-flex: unset; -webkit-box-ordinal-group: unset; -webkit-box-orient: unset; -webkit-box-pack: unset; -webkit-box-reflect: unset; -webkit-line-break: unset; -webkit-line-clamp: unset; -webkit-mask-box-image: unset; -webkit-rtl-ordering: unset; -webkit-ruby-position: unset; -webkit-tap-highlight-color: unset; -webkit-text-combine: unset; -webkit-text-decorations-in-effect: unset; -webkit-text-fill-color: unset; -webkit-text-security: unset; -webkit-text-stroke: unset; -webkit-user-drag: unset; white-space-collapse: unset; widows: unset; width: unset; will-change: unset; word-break: unset; word-spacing: unset; x: unset; y: unset; z-index: unset; list-style: none;"
   >
     <li
       aria-label="Rich Item Title"
diff --git a/packages/shared-components/src/core/rich-list/RichList/__snapshots__/RichList.test.tsx.snap b/packages/shared-components/src/core/rich-list/RichList/__snapshots__/RichList.test.tsx.snap
index 3643d11abf..a6290de8c2 100644
--- a/packages/shared-components/src/core/rich-list/RichList/__snapshots__/RichList.test.tsx.snap
+++ b/packages/shared-components/src/core/rich-list/RichList/__snapshots__/RichList.test.tsx.snap
@@ -11,12 +11,12 @@ exports[`RichItem > renders the list 1`] = `
     >
       <span
         class="RichList-module_title"
-        id="_r_0_"
+        id="react-use-id-1"
       >
         Rich List Title
       </span>
       <ul
-        aria-labelledby="_r_0_"
+        aria-labelledby="react-use-id-1"
         class="RichList-module_content"
         role="listbox"
         tabindex="0"
@@ -174,7 +174,7 @@ exports[`RichItem > renders the list with isEmpty=true 1`] = `
     >
       <span
         class="RichList-module_title"
-        id="_r_1_"
+        id="react-use-id-1"
       >
         Rich List Title
       </span>
diff --git a/packages/shared-components/src/core/roving/RovingGridIndex.stories.tsx b/packages/shared-components/src/core/roving/RovingGridIndex.stories.tsx
new file mode 100644
index 0000000000..2a36ec0c61
--- /dev/null
+++ b/packages/shared-components/src/core/roving/RovingGridIndex.stories.tsx
@@ -0,0 +1,281 @@
+/*
+ * Copyright 2026 Element Creations 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, { useState, type JSX } from "react";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { withViewDocs } from "../../../.storybook/withViewDocs";
+import { RovingGridIndexProvider, useRovingTabIndex } from ".";
+
+const gridStyle: React.CSSProperties = {
+    display: "inline-flex",
+    flexDirection: "column",
+    gap: 4,
+    padding: 12,
+    border: "1px solid var(--cpd-color-border-interactive-secondary)",
+    borderRadius: 8,
+};
+
+const containerStyle: React.CSSProperties = {
+    display: "inline-flex",
+    flexDirection: "column",
+    gap: 8,
+    alignItems: "flex-start",
+};
+
+const rowStyle: React.CSSProperties = {
+    display: "flex",
+    gap: 4,
+};
+
+const buttonStyle: React.CSSProperties = {
+    width: 44,
+    height: 36,
+};
+
+const activeCellLabelStyle: React.CSSProperties = {
+    color: "var(--cpd-color-text-secondary)",
+    font: "var(--cpd-font-body-sm-regular)",
+};
+
+const gridLabelStyle: React.CSSProperties = {
+    color: "var(--cpd-color-text-secondary)",
+    font: "var(--cpd-font-body-md-semibold)",
+};
+
+function GridButton({ label }: Readonly<{ label: string }>): JSX.Element {
+    const [onFocus, isActive, ref] = useRovingTabIndex<HTMLButtonElement>();
+
+    return (
+        <button
+            ref={ref}
+            id={`grid-button-${label}`}
+            style={buttonStyle}
+            tabIndex={isActive ? 0 : -1}
+            onFocus={onFocus}
+        >
+            {label}
+        </button>
+    );
+}
+
+function GridRows({ rows }: Readonly<{ rows: string[][] }>): JSX.Element {
+    return (
+        <>
+            {rows.map((row) => (
+                <div role="row" style={rowStyle} key={row.join("|")}>
+                    {row.map((label) => (
+                        <div role="gridcell" key={label}>
+                            <GridButton label={label} />
+                        </div>
+                    ))}
+                </div>
+            ))}
+        </>
+    );
+}
+
+function GridExample({
+    rows,
+    handleHomeEnd,
+    handleInputFields,
+    handleLoop,
+    moveFocus = true,
+    withInput,
+}: Readonly<{
+    rows: string[][];
+    handleHomeEnd?: boolean;
+    handleInputFields?: boolean;
+    handleLoop?: boolean;
+    moveFocus?: React.ComponentProps<typeof RovingGridIndexProvider>["moveFocus"];
+    withInput?: boolean;
+}>): JSX.Element {
+    const [activeLabel, setActiveLabel] = useState(rows[0]?.[0]);
+
+    return (
+        <RovingGridIndexProvider
+            handleHomeEnd={handleHomeEnd}
+            handleInputFields={handleInputFields}
+            handleLoop={handleLoop}
+            moveFocus={moveFocus}
+            onGridNavigation={(_event, target) => setActiveLabel(target.textContent ?? "")}
+        >
+            {({ onKeyDownHandler }) => (
+                <div style={containerStyle}>
+                    {withInput && (
+                        <input
+                            aria-label="Search"
+                            aria-activedescendant={activeLabel ? `grid-button-${activeLabel}` : undefined}
+                            onKeyDown={onKeyDownHandler}
+                            placeholder="Focus stays here; use arrow keys"
+                        />
+                    )}
+                    {withInput && <span style={activeCellLabelStyle}>Active cell: {activeLabel}</span>}
+                    <div
+                        role="grid"
+                        aria-label="Example roving grid"
+                        onKeyDown={onKeyDownHandler}
+                        style={gridStyle}
+                        tabIndex={-1}
+                    >
+                        <GridRows rows={rows} />
+                    </div>
+                </div>
+            )}
+        </RovingGridIndexProvider>
+    );
+}
+
+function MultipleGridExample({
+    grids,
+    handleHomeEnd,
+    handleLoop,
+}: Readonly<{
+    grids: Array<{
+        label: string;
+        rows: string[][];
+    }>;
+    handleHomeEnd?: boolean;
+    handleLoop?: boolean;
+}>): JSX.Element {
+    return (
+        <RovingGridIndexProvider handleHomeEnd={handleHomeEnd} handleLoop={handleLoop}>
+            {({ onKeyDownHandler }) => (
+                <div style={containerStyle}>
+                    {grids.map((grid) => (
+                        <section style={containerStyle} key={grid.label}>
+                            <span id={`grid-label-${grid.label}`} style={gridLabelStyle}>
+                                {grid.label}
+                            </span>
+                            <div
+                                role="grid"
+                                aria-labelledby={`grid-label-${grid.label}`}
+                                onKeyDown={onKeyDownHandler}
+                                style={gridStyle}
+                                tabIndex={-1}
+                            >
+                                <GridRows rows={grid.rows} />
+                            </div>
+                        </section>
+                    ))}
+                </div>
+            )}
+        </RovingGridIndexProvider>
+    );
+}
+
+const RovingGridIndexWrapper = withViewDocs(GridExample, RovingGridIndexProvider);
+
+const meta = {
+    title: "Core/RovingGridIndex",
+    component: RovingGridIndexWrapper,
+    tags: ["autodocs", "skip-test"],
+    args: {
+        rows: [],
+        handleHomeEnd: true,
+        handleLoop: true,
+    },
+    argTypes: {
+        handleHomeEnd: {
+            control: "boolean",
+        },
+        handleInputFields: {
+            control: false,
+            table: {
+                disable: true,
+            },
+        },
+        handleLoop: {
+            control: "boolean",
+        },
+        moveFocus: {
+            control: false,
+            table: {
+                disable: true,
+            },
+        },
+        withInput: {
+            control: false,
+            table: {
+                disable: true,
+            },
+        },
+    },
+} satisfies Meta<typeof RovingGridIndexWrapper>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DefaultGrid: Story = {
+    args: {
+        rows: [
+            ["A1", "A2", "A3", "A4"],
+            ["B1", "B2", "B3", "B4"],
+            ["C1", "C2", "C3", "C4"],
+        ],
+        handleHomeEnd: true,
+    },
+};
+
+export const RaggedRows: Story = {
+    args: {
+        rows: [
+            ["A1", "A2", "A3", "A4"],
+            ["B1", "B2"],
+            ["C1", "C2", "C3"],
+        ],
+        handleHomeEnd: true,
+    },
+};
+
+export const VirtualFocus: Story = {
+    args: {
+        rows: [
+            ["A1", "A2", "A3"],
+            ["B1", "B2", "B3"],
+        ],
+        handleHomeEnd: true,
+        handleInputFields: true,
+        moveFocus: false,
+        withInput: true,
+    },
+};
+
+export const LoopingGrid: Story = {
+    args: {
+        rows: [
+            ["A1", "A2", "A3"],
+            ["B1", "B2", "B3"],
+        ],
+        handleHomeEnd: true,
+        handleLoop: true,
+    },
+};
+
+export const MultipleGrids: StoryObj<typeof MultipleGridExample> = {
+    render: (args) => <MultipleGridExample {...args} />,
+    args: {
+        grids: [
+            {
+                label: "Primary grid",
+                rows: [
+                    ["A1", "A2", "A3"],
+                    ["B1", "B2", "B3"],
+                ],
+            },
+            {
+                label: "Secondary grid",
+                rows: [
+                    ["C1", "C2"],
+                    ["D1", "D2", "D3"],
+                ],
+            },
+        ],
+        handleHomeEnd: true,
+    },
+};
diff --git a/packages/shared-components/src/core/roving/RovingGridIndex.test.tsx b/packages/shared-components/src/core/roving/RovingGridIndex.test.tsx
new file mode 100644
index 0000000000..bba48331e3
--- /dev/null
+++ b/packages/shared-components/src/core/roving/RovingGridIndex.test.tsx
@@ -0,0 +1,308 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type ReactNode } from "react";
+import userEvent from "@testing-library/user-event";
+import { render, screen } from "@test-utils";
+import { describe, expect, it, vi } from "vitest";
+
+import { RovingGridIndexProvider, useRovingTabIndex } from ".";
+
+const offsetParentDescriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "offsetParent");
+if (offsetParentDescriptor?.configurable !== false) {
+    Object.defineProperty(HTMLElement.prototype, "offsetParent", {
+        configurable: true,
+        get() {
+            return this.parentNode;
+        },
+    });
+}
+
+function GridButton({ label }: Readonly<{ label: string }>): React.ReactElement {
+    const [onFocus, isActive, ref] = useRovingTabIndex<HTMLButtonElement>();
+
+    return (
+        <button ref={ref} tabIndex={isActive ? 0 : -1} onFocus={onFocus}>
+            {label}
+        </button>
+    );
+}
+
+function DefaultGrid({
+    rows,
+    props,
+    beforeGrid,
+}: Readonly<{
+    rows: string[][];
+    props?: Partial<React.ComponentProps<typeof RovingGridIndexProvider>>;
+    beforeGrid?: ReactNode;
+}>): React.ReactElement {
+    return (
+        <RovingGridIndexProvider {...props}>
+            {({ onKeyDownHandler }) => (
+                <div>
+                    {beforeGrid &&
+                        React.isValidElement(beforeGrid) &&
+                        React.cloneElement(beforeGrid, {
+                            onKeyDown: onKeyDownHandler,
+                        } as Partial<React.HTMLAttributes<HTMLElement>>)}
+                    <div role="grid" aria-label="Roving grid" onKeyDown={onKeyDownHandler} tabIndex={-1}>
+                        {rows.map((row, rowIndex) => (
+                            <div role="row" key={rowIndex}>
+                                {row.map((label) => (
+                                    <div role="gridcell" key={label}>
+                                        <GridButton label={label} />
+                                    </div>
+                                ))}
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </RovingGridIndexProvider>
+    );
+}
+
+const getButton = (name: string): HTMLButtonElement => screen.getByRole("button", { name });
+
+const expectTabIndexes = (labels: string[], activeLabel: string): void => {
+    for (const label of labels) {
+        expect(getButton(label)).toHaveAttribute("tabindex", label === activeLabel ? "0" : "-1");
+    }
+};
+
+describe("RovingGridIndexProvider", () => {
+    it("moves horizontally through registered grid cells", async () => {
+        const user = userEvent.setup();
+        render(<DefaultGrid rows={[["A1", "A2", "A3"]]} />);
+
+        expectTabIndexes(["A1", "A2", "A3"], "A1");
+
+        await user.tab();
+        expect(getButton("A1")).toHaveFocus();
+
+        await user.keyboard("{ArrowRight}");
+        expect(getButton("A2")).toHaveFocus();
+        expectTabIndexes(["A1", "A2", "A3"], "A2");
+
+        await user.keyboard("{ArrowLeft}");
+        expect(getButton("A1")).toHaveFocus();
+        expectTabIndexes(["A1", "A2", "A3"], "A1");
+    });
+
+    it("moves vertically while preserving the column", async () => {
+        const user = userEvent.setup();
+        render(
+            <DefaultGrid
+                rows={[
+                    ["A1", "A2", "A3"],
+                    ["B1", "B2", "B3"],
+                    ["C1", "C2", "C3"],
+                ]}
+            />,
+        );
+
+        await user.tab();
+        await user.keyboard("{ArrowRight}");
+        expect(getButton("A2")).toHaveFocus();
+
+        await user.keyboard("{ArrowDown}");
+        expect(getButton("B2")).toHaveFocus();
+        expectTabIndexes(["A2", "B2"], "B2");
+
+        await user.keyboard("{ArrowDown}");
+        expect(getButton("C2")).toHaveFocus();
+
+        await user.keyboard("{ArrowUp}");
+        expect(getButton("B2")).toHaveFocus();
+    });
+
+    it("clamps vertical movement for ragged rows", async () => {
+        const user = userEvent.setup();
+        render(
+            <DefaultGrid
+                rows={[
+                    ["A1", "A2", "A3"],
+                    ["B1", "B2"],
+                ]}
+            />,
+        );
+
+        await user.tab();
+        await user.keyboard("{ArrowRight}");
+        await user.keyboard("{ArrowRight}");
+        expect(getButton("A3")).toHaveFocus();
+
+        await user.keyboard("{ArrowDown}");
+        expect(getButton("B2")).toHaveFocus();
+        expectTabIndexes(["A3", "B2"], "B2");
+    });
+
+    it("moves vertically across separate grid containers", async () => {
+        const user = userEvent.setup();
+        render(
+            <RovingGridIndexProvider>
+                {({ onKeyDownHandler }) => (
+                    <>
+                        <div role="grid" aria-label="First roving grid" onKeyDown={onKeyDownHandler} tabIndex={-1}>
+                            <div role="row">
+                                {["A1", "A2", "A3"].map((label) => (
+                                    <div role="gridcell" key={label}>
+                                        <GridButton label={label} />
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                        <div role="grid" aria-label="Second roving grid" onKeyDown={onKeyDownHandler} tabIndex={-1}>
+                            <div role="row">
+                                {["B1", "B2"].map((label) => (
+                                    <div role="gridcell" key={label}>
+                                        <GridButton label={label} />
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </>
+                )}
+            </RovingGridIndexProvider>,
+        );
+
+        await user.tab();
+        await user.keyboard("{ArrowRight}");
+        await user.keyboard("{ArrowRight}");
+        expect(getButton("A3")).toHaveFocus();
+
+        await user.keyboard("{ArrowDown}");
+        expect(getButton("B2")).toHaveFocus();
+    });
+
+    it("keeps the active cell unchanged at grid boundaries", async () => {
+        const user = userEvent.setup();
+        render(<DefaultGrid rows={[["A1", "A2"]]} />);
+
+        await user.tab();
+        await user.keyboard("{ArrowLeft}");
+        expect(getButton("A1")).toHaveFocus();
+        expectTabIndexes(["A1", "A2"], "A1");
+    });
+
+    it("can update active state without moving DOM focus", async () => {
+        const user = userEvent.setup();
+        render(
+            <DefaultGrid
+                rows={[["A1", "A2"]]}
+                props={{ handleInputFields: true, moveFocus: false }}
+                beforeGrid={<input aria-label="Search" />}
+            />,
+        );
+
+        await user.click(screen.getByRole("textbox", { name: "Search" }));
+        expect(screen.getByRole("textbox", { name: "Search" })).toHaveFocus();
+
+        await user.keyboard("{ArrowRight}");
+        expect(screen.getByRole("textbox", { name: "Search" })).toHaveFocus();
+        expectTabIndexes(["A1", "A2"], "A2");
+    });
+
+    it("allows moveFocus to be decided per navigation target", async () => {
+        const user = userEvent.setup();
+        const moveFocus = vi.fn((target: HTMLElement) => target.textContent !== "A2");
+        render(
+            <DefaultGrid
+                rows={[["A1", "A2", "A3"]]}
+                props={{ handleInputFields: true, moveFocus }}
+                beforeGrid={<input aria-label="Search" />}
+            />,
+        );
+
+        await user.click(screen.getByRole("textbox", { name: "Search" }));
+        await user.keyboard("{ArrowRight}");
+
+        expect(moveFocus).toHaveBeenCalledWith(getButton("A2"), expect.anything(), expect.anything());
+        expect(screen.getByRole("textbox", { name: "Search" })).toHaveFocus();
+        expectTabIndexes(["A1", "A2", "A3"], "A2");
+
+        await user.keyboard("{ArrowRight}");
+        expect(getButton("A3")).toHaveFocus();
+    });
+
+    it("keeps native input arrow-key behaviour unless input handling is enabled", async () => {
+        const user = userEvent.setup();
+        render(
+            <DefaultGrid
+                rows={[["A1", "A2"]]}
+                props={{ moveFocus: false }}
+                beforeGrid={<input aria-label="Search" />}
+            />,
+        );
+
+        await user.click(screen.getByRole("textbox", { name: "Search" }));
+        await user.keyboard("{ArrowRight}");
+
+        expect(screen.getByRole("textbox", { name: "Search" })).toHaveFocus();
+        expectTabIndexes(["A1", "A2"], "A1");
+    });
+
+    it("scrolls the target into view when configured", async () => {
+        const user = userEvent.setup();
+        const scrollIntoView = vi.fn();
+        Object.defineProperty(HTMLElement.prototype, "scrollIntoView", {
+            configurable: true,
+            value: scrollIntoView,
+        });
+        render(<DefaultGrid rows={[["A1", "A2"]]} props={{ scrollIntoView: { block: "center" } }} />);
+
+        await user.tab();
+        await user.keyboard("{ArrowRight}");
+
+        expect(scrollIntoView).toHaveBeenCalledWith({ block: "center" });
+    });
+
+    it("supports custom grid markup resolvers", async () => {
+        const user = userEvent.setup();
+        render(
+            <RovingGridIndexProvider
+                getGridCell={(node) => node.closest("[data-grid-cell]") ?? undefined}
+                getRovingNode={(cell) => cell.querySelector("button") ?? undefined}
+            >
+                {({ onKeyDownHandler }) => (
+                    <div role="grid" aria-label="Roving grid" onKeyDown={onKeyDownHandler} tabIndex={-1}>
+                        <div role="row">
+                            <div data-grid-cell>
+                                <span>
+                                    <GridButton label="A1" />
+                                </span>
+                            </div>
+                            <div data-grid-cell>
+                                <span>
+                                    <GridButton label="A2" />
+                                </span>
+                            </div>
+                        </div>
+                        <div role="row">
+                            <div data-grid-cell>
+                                <span>
+                                    <GridButton label="B1" />
+                                </span>
+                            </div>
+                            <div data-grid-cell>
+                                <span>
+                                    <GridButton label="B2" />
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </RovingGridIndexProvider>,
+        );
+
+        await user.tab();
+        await user.keyboard("{ArrowDown}");
+
+        expect(getButton("B1")).toHaveFocus();
+    });
+});
diff --git a/packages/shared-components/src/core/roving/RovingGridIndex.tsx b/packages/shared-components/src/core/roving/RovingGridIndex.tsx
new file mode 100644
index 0000000000..cf93a00aa6
--- /dev/null
+++ b/packages/shared-components/src/core/roving/RovingGridIndex.tsx
@@ -0,0 +1,305 @@
+/*
+ * Copyright 2026 Element Creations 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, { useCallback, type Dispatch, type KeyboardEvent } from "react";
+
+import {
+    checkInputableElement,
+    findNextSiblingElement,
+    findPreviousSiblingElement,
+    type IAction,
+    type IState,
+    RovingAction,
+    RovingStateActionType,
+    RovingTabIndexProvider,
+    type RovingTabIndexProviderProps,
+} from "./RovingTabIndex";
+
+/**
+ * Resolves the grid cell element that contains a registered roving node.
+ *
+ * The default expects the roving node to be a direct child of a `role="gridcell"`
+ * element.
+ */
+export type RovingGridCellResolver = (this: void, rovingNode: Element) => Element | undefined;
+
+/**
+ * Resolves the row element that contains a registered roving node.
+ *
+ * The default expects `rovingNode -> gridcell -> row`, where the row element is
+ * the grid cell's parent.
+ */
+export type RovingGridRowResolver = (this: void, rovingNode: Element) => Element | undefined;
+
+/**
+ * Resolves the registered roving node contained within a grid cell.
+ *
+ * The default expects the roving node to be the first child of the grid cell.
+ */
+export type RovingGridNodeResolver = (this: void, gridCell: Element) => HTMLElement | undefined;
+
+/**
+ * Controls whether grid navigation moves DOM focus to the active cell.
+ *
+ * Pass `false` for composite widgets that keep DOM focus elsewhere and expose
+ * the active grid item through `aria-activedescendant`.
+ */
+export type RovingGridMoveFocus =
+    | boolean
+    | ((this: void, target: HTMLElement, event: KeyboardEvent, state: IState) => boolean);
+
+/**
+ * Props for {@link RovingGridIndexProvider}.
+ */
+export interface RovingGridIndexProviderProps extends Omit<
+    RovingTabIndexProviderProps,
+    "handleUpDown" | "handleLeftRight" | "onKeyDown"
+> {
+    /**
+     * Optional callback invoked before grid handling and before the wrapped
+     * roving provider performs its own keyboard handling.
+     *
+     * Call `preventDefault()` on the event to suppress grid and fallback
+     * roving behaviour.
+     */
+    onKeyDown?(this: void, ev: KeyboardEvent, state: IState, dispatch: Dispatch<IAction>): void;
+    /**
+     * Whether arrow-key grid navigation should move DOM focus.
+     *
+     * Defaults to `true`. When `false`, the provider still updates the active
+     * roving node and tab stop.
+     */
+    moveFocus?: RovingGridMoveFocus;
+    /**
+     * Called after grid navigation resolves a target and updates roving state.
+     */
+    onGridNavigation?(
+        this: void,
+        event: KeyboardEvent,
+        target: HTMLElement,
+        state: IState,
+        dispatch: Dispatch<IAction>,
+    ): void;
+    /**
+     * Resolves the grid cell element for a registered roving node.
+     *
+     * Override this when the roving node is not a direct child of the grid cell.
+     */
+    getGridCell?: RovingGridCellResolver;
+    /**
+     * Resolves the row element for a registered roving node.
+     *
+     * Override this when grid rows are not direct parents of grid cells.
+     */
+    getRow?: RovingGridRowResolver;
+    /**
+     * Resolves the registered roving node inside a grid cell.
+     *
+     * Override this when the focusable element is not the grid cell's first
+     * child.
+     */
+    getRovingNode?: RovingGridNodeResolver;
+}
+
+const defaultGetGridCell: RovingGridCellResolver = (rovingNode) => rovingNode.parentElement ?? undefined;
+
+const defaultGetRovingNode: RovingGridNodeResolver = (gridCell) => {
+    const child = gridCell.children[0];
+    return child instanceof HTMLElement ? child : undefined;
+};
+
+type RovingGridNavigationAction =
+    | RovingAction.ArrowLeft
+    | RovingAction.ArrowRight
+    | RovingAction.ArrowUp
+    | RovingAction.ArrowDown;
+
+const isGridNavigationAction = (action: RovingAction | undefined): action is RovingGridNavigationAction => {
+    return (
+        action === RovingAction.ArrowLeft ||
+        action === RovingAction.ArrowRight ||
+        action === RovingAction.ArrowUp ||
+        action === RovingAction.ArrowDown
+    );
+};
+
+const getHorizontalTarget = (
+    action: RovingAction,
+    state: IState,
+    handleLoop: boolean | undefined,
+): HTMLElement | undefined => {
+    if (!state.activeNode) return undefined;
+
+    const activeIndex = state.nodes.indexOf(state.activeNode);
+    if (activeIndex === -1) return undefined;
+
+    if (action === RovingAction.ArrowLeft) {
+        return findPreviousSiblingElement(state.nodes, activeIndex - 1, handleLoop);
+    }
+
+    if (action === RovingAction.ArrowRight) {
+        return findNextSiblingElement(state.nodes, activeIndex + 1, handleLoop);
+    }
+};
+
+const getVerticalTarget = (
+    action: RovingAction,
+    state: IState,
+    getGridCell: RovingGridCellResolver,
+    getRow: RovingGridRowResolver,
+    getRovingNode: RovingGridNodeResolver,
+): HTMLElement | undefined => {
+    if (!state.activeNode) return undefined;
+
+    const row = getRow(state.activeNode);
+    const gridCell = getGridCell(state.activeNode);
+    if (!row || !gridCell) return undefined;
+
+    const columnIndex = Array.from(row.children).indexOf(gridCell);
+    const activeIndex = state.nodes.indexOf(state.activeNode);
+    if (columnIndex === -1 || activeIndex === -1) return undefined;
+
+    const nextRowProbeIndex =
+        action === RovingAction.ArrowUp
+            ? activeIndex - columnIndex - 1
+            : activeIndex - columnIndex + row.children.length;
+    const nextRow = getRow(state.nodes[nextRowProbeIndex]);
+
+    if (nextRow) {
+        if (!(nextRow instanceof HTMLElement) || nextRow.offsetParent === null || nextRow.children.length === 0) {
+            return undefined;
+        }
+
+        const nextColumnIndex = Math.min(columnIndex, nextRow.children.length - 1);
+        const target = getRovingNode(nextRow.children[nextColumnIndex]);
+        if (target?.offsetParent && state.nodes.includes(target)) {
+            return target;
+        }
+    }
+};
+
+const shouldMoveFocus = (
+    moveFocus: RovingGridMoveFocus | undefined,
+    target: HTMLElement,
+    event: KeyboardEvent,
+    state: IState,
+): boolean => {
+    if (typeof moveFocus === "function") return moveFocus(target, event, state);
+    return moveFocus ?? true;
+};
+
+/**
+ * Provides two-dimensional arrow-key navigation for roving tabindex grids.
+ *
+ * `RovingGridIndexProvider` reuses the same registration state as
+ * {@link RovingTabIndexProvider}. Descendants should still call
+ * {@link useRovingTabIndex}; this provider only changes how arrow keys resolve
+ * the next active node.
+ *
+ * By default, the provider expects each registered roving node to be rendered as
+ * the first child of a `role="gridcell"` element, and each grid cell to be a
+ * direct child of a row element. Override `getGridCell`, `getRow`, and
+ * `getRovingNode` for different markup.
+ */
+export const RovingGridIndexProvider: React.FC<RovingGridIndexProviderProps> = ({
+    children,
+    getAction,
+    getGridCell = defaultGetGridCell,
+    getRow,
+    getRovingNode = defaultGetRovingNode,
+    handleInputFields,
+    handleLoop,
+    moveFocus,
+    onGridNavigation,
+    onKeyDown,
+    scrollIntoView,
+    ...props
+}) => {
+    const resolvedGetRow = useCallback<RovingGridRowResolver>(
+        (rovingNode) => getRow?.(rovingNode) ?? getGridCell(rovingNode)?.parentElement ?? undefined,
+        [getGridCell, getRow],
+    );
+
+    const onGridKeyDown = useCallback(
+        (event: KeyboardEvent, state: IState, dispatch: Dispatch<IAction>): void => {
+            onKeyDown?.(event, state, dispatch);
+            if (event.defaultPrevented) return;
+
+            const action = getAction?.(event) ?? getDefaultGridAction(event);
+            if (!isGridNavigationAction(action) || !state.activeNode) return;
+
+            if (!handleInputFields && event.target instanceof HTMLElement && checkInputableElement(event.target)) {
+                return;
+            }
+
+            const target =
+                action === RovingAction.ArrowUp || action === RovingAction.ArrowDown
+                    ? getVerticalTarget(action, state, getGridCell, resolvedGetRow, getRovingNode)
+                    : getHorizontalTarget(action, state, handleLoop);
+
+            event.preventDefault();
+            event.stopPropagation();
+
+            if (!target) return;
+
+            if (shouldMoveFocus(moveFocus, target, event, state)) {
+                target.focus();
+            }
+
+            dispatch({
+                type: RovingStateActionType.SetFocus,
+                payload: { node: target },
+            });
+
+            if (scrollIntoView) {
+                target.scrollIntoView(scrollIntoView);
+            }
+
+            onGridNavigation?.(event, target, state, dispatch);
+        },
+        [
+            getAction,
+            getGridCell,
+            getRovingNode,
+            handleInputFields,
+            handleLoop,
+            moveFocus,
+            onGridNavigation,
+            onKeyDown,
+            resolvedGetRow,
+            scrollIntoView,
+        ],
+    );
+
+    return (
+        <RovingTabIndexProvider
+            {...props}
+            getAction={getAction}
+            handleInputFields={handleInputFields}
+            handleLoop={handleLoop}
+            onKeyDown={onGridKeyDown}
+            scrollIntoView={scrollIntoView}
+        >
+            {children}
+        </RovingTabIndexProvider>
+    );
+};
+
+const getDefaultGridAction = (ev: KeyboardEvent): RovingAction | undefined => {
+    switch (ev.key) {
+        case "ArrowLeft":
+            return RovingAction.ArrowLeft;
+        case "ArrowUp":
+            return RovingAction.ArrowUp;
+        case "ArrowRight":
+            return RovingAction.ArrowRight;
+        case "ArrowDown":
+            return RovingAction.ArrowDown;
+        default:
+            return undefined;
+    }
+};
diff --git a/packages/shared-components/src/core/roving/RovingTabIndex.stories.tsx b/packages/shared-components/src/core/roving/RovingTabIndex.stories.tsx
new file mode 100644
index 0000000000..90721efceb
--- /dev/null
+++ b/packages/shared-components/src/core/roving/RovingTabIndex.stories.tsx
@@ -0,0 +1,361 @@
+/*
+ * Copyright 2026 Element Creations 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, { useState, type JSX } from "react";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { withViewDocs } from "../../../.storybook/withViewDocs";
+import {
+    checkInputableElement,
+    findNextSiblingElement,
+    findPreviousSiblingElement,
+    type IAction,
+    type IState,
+    RovingAction,
+    RovingStateActionType,
+    RovingTabIndexProvider,
+    useRovingTabIndex,
+} from ".";
+
+const toolbarStyle: React.CSSProperties = {
+    display: "inline-flex",
+    gap: 4,
+    padding: 12,
+    border: "1px solid var(--cpd-color-border-interactive-secondary)",
+    borderRadius: 8,
+};
+
+const containerStyle: React.CSSProperties = {
+    display: "inline-flex",
+    flexDirection: "column",
+    gap: 8,
+    alignItems: "flex-start",
+};
+
+const verticalToolbarStyle: React.CSSProperties = {
+    ...toolbarStyle,
+    flexDirection: "column",
+};
+
+const buttonStyle: React.CSSProperties = {
+    minWidth: 72,
+    height: 36,
+};
+
+const activeLabelStyle: React.CSSProperties = {
+    color: "var(--cpd-color-text-secondary)",
+    font: "var(--cpd-font-body-sm-regular)",
+};
+
+const toolbarLabelStyle: React.CSSProperties = {
+    color: "var(--cpd-color-text-secondary)",
+    font: "var(--cpd-font-body-md-semibold)",
+};
+
+const getAction = (event: React.KeyboardEvent): RovingAction | undefined => {
+    switch (event.key) {
+        case "Home":
+            return RovingAction.Home;
+        case "End":
+            return RovingAction.End;
+        case "ArrowLeft":
+            return RovingAction.ArrowLeft;
+        case "ArrowUp":
+            return RovingAction.ArrowUp;
+        case "ArrowRight":
+            return RovingAction.ArrowRight;
+        case "ArrowDown":
+            return RovingAction.ArrowDown;
+        default:
+            return undefined;
+    }
+};
+
+const getAdjacentNode = (state: IState, backwards: boolean, loop: boolean | undefined): HTMLElement | undefined => {
+    if (!state.activeNode) return undefined;
+
+    const currentIndex = state.nodes.indexOf(state.activeNode);
+    if (currentIndex === -1) return undefined;
+
+    const nextIndex = currentIndex + (backwards ? -1 : 1);
+    return backwards
+        ? findPreviousSiblingElement(state.nodes, nextIndex, loop)
+        : findNextSiblingElement(state.nodes, nextIndex, loop);
+};
+
+const getTargetNode = (
+    event: React.KeyboardEvent,
+    state: IState,
+    {
+        handleHomeEnd,
+        handleLeftRight,
+        handleLoop,
+        handleUpDown,
+    }: Pick<
+        React.ComponentProps<typeof RovingTabIndexProvider>,
+        "handleHomeEnd" | "handleLeftRight" | "handleLoop" | "handleUpDown"
+    >,
+): HTMLElement | undefined => {
+    switch (getAction(event)) {
+        case RovingAction.Home:
+            return handleHomeEnd ? findNextSiblingElement(state.nodes, 0) : undefined;
+        case RovingAction.End:
+            return handleHomeEnd ? findPreviousSiblingElement(state.nodes, state.nodes.length - 1) : undefined;
+        case RovingAction.ArrowRight:
+            return handleLeftRight ? getAdjacentNode(state, false, handleLoop) : undefined;
+        case RovingAction.ArrowDown:
+            return handleUpDown ? getAdjacentNode(state, false, handleLoop) : undefined;
+        case RovingAction.ArrowLeft:
+            return handleLeftRight ? getAdjacentNode(state, true, handleLoop) : undefined;
+        case RovingAction.ArrowUp:
+            return handleUpDown ? getAdjacentNode(state, true, handleLoop) : undefined;
+        default:
+            return undefined;
+    }
+};
+
+function RovingButton({
+    label,
+    onActiveLabelChange,
+}: Readonly<{ label: string; onActiveLabelChange?: (label: string) => void }>): JSX.Element {
+    const [onFocus, isActive, ref] = useRovingTabIndex<HTMLButtonElement>();
+
+    return (
+        <button
+            ref={ref}
+            style={buttonStyle}
+            tabIndex={isActive ? 0 : -1}
+            onFocus={() => {
+                onFocus();
+                onActiveLabelChange?.(label);
+            }}
+        >
+            {label}
+        </button>
+    );
+}
+
+function MultipleToolbarExample({
+    toolbars,
+    handleHomeEnd,
+    handleLeftRight,
+    handleLoop,
+}: Readonly<{
+    toolbars: Array<{
+        label: string;
+        items: string[];
+    }>;
+    handleHomeEnd?: boolean;
+    handleLeftRight?: boolean;
+    handleLoop?: boolean;
+}>): JSX.Element {
+    return (
+        <RovingTabIndexProvider handleHomeEnd={handleHomeEnd} handleLeftRight={handleLeftRight} handleLoop={handleLoop}>
+            {({ onKeyDownHandler }) => (
+                <div style={containerStyle}>
+                    {toolbars.map((toolbar, index) => (
+                        <section style={containerStyle} key={toolbar.label}>
+                            <span id={`toolbar-label-${index}`} style={toolbarLabelStyle}>
+                                {toolbar.label}
+                            </span>
+                            <div
+                                role="toolbar"
+                                aria-labelledby={`toolbar-label-${index}`}
+                                onKeyDown={onKeyDownHandler}
+                                style={toolbarStyle}
+                            >
+                                {toolbar.items.map((label) => (
+                                    <RovingButton key={label} label={label} />
+                                ))}
+                            </div>
+                        </section>
+                    ))}
+                </div>
+            )}
+        </RovingTabIndexProvider>
+    );
+}
+
+function RovingTabIndexExample({
+    labels,
+    handleHomeEnd,
+    handleInputFields,
+    handleLeftRight,
+    handleLoop,
+    handleUpDown,
+    orientation = "horizontal",
+    withInput,
+}: Readonly<{
+    labels: string[];
+    handleHomeEnd?: boolean;
+    handleInputFields?: boolean;
+    handleLeftRight?: boolean;
+    handleLoop?: boolean;
+    handleUpDown?: boolean;
+    orientation?: "horizontal" | "vertical";
+    withInput?: boolean;
+}>): JSX.Element {
+    const [activeLabel, setActiveLabel] = useState(labels[0]);
+    const onKeyDown = (event: React.KeyboardEvent, state: IState, dispatch: React.Dispatch<IAction>): void => {
+        const target = getTargetNode(event, state, { handleHomeEnd, handleLeftRight, handleLoop, handleUpDown });
+        if (!target) return;
+
+        setActiveLabel(target.textContent ?? "");
+
+        if (event.target instanceof HTMLElement && withInput && checkInputableElement(event.target)) {
+            event.preventDefault();
+            event.stopPropagation();
+            dispatch({
+                type: RovingStateActionType.SetFocus,
+                payload: {
+                    node: target,
+                },
+            });
+        }
+    };
+
+    return (
+        <RovingTabIndexProvider
+            handleHomeEnd={handleHomeEnd}
+            handleInputFields={handleInputFields}
+            handleLeftRight={handleLeftRight}
+            handleLoop={handleLoop}
+            handleUpDown={handleUpDown}
+            onKeyDown={onKeyDown}
+        >
+            {({ onKeyDownHandler }) => (
+                <div style={containerStyle}>
+                    {withInput && (
+                        <input
+                            aria-label="Toolbar input"
+                            onKeyDown={onKeyDownHandler}
+                            placeholder="Focus stays here; use arrow keys"
+                        />
+                    )}
+                    {withInput && <span style={activeLabelStyle}>Active item: {activeLabel}</span>}
+                    <div
+                        role="toolbar"
+                        aria-label="Example roving toolbar"
+                        aria-orientation={orientation}
+                        onKeyDown={onKeyDownHandler}
+                        style={orientation === "vertical" ? verticalToolbarStyle : toolbarStyle}
+                    >
+                        {labels.map((label) => (
+                            <RovingButton key={label} label={label} onActiveLabelChange={setActiveLabel} />
+                        ))}
+                    </div>
+                </div>
+            )}
+        </RovingTabIndexProvider>
+    );
+}
+
+const RovingTabIndexWrapper = withViewDocs(RovingTabIndexExample, RovingTabIndexProvider);
+
+const meta = {
+    title: "Core/RovingTabIndex",
+    component: RovingTabIndexWrapper,
+    tags: ["autodocs", "skip-test"],
+    args: {
+        labels: [],
+        handleHomeEnd: true,
+        handleLoop: true,
+        handleLeftRight: true,
+        handleUpDown: true,
+    },
+    argTypes: {
+        handleHomeEnd: {
+            control: "boolean",
+        },
+        handleInputFields: {
+            control: false,
+            table: {
+                disable: true,
+            },
+        },
+        handleLeftRight: {
+            control: "boolean",
+        },
+        handleLoop: {
+            control: "boolean",
+        },
+        handleUpDown: {
+            control: "boolean",
+        },
+        orientation: {
+            control: false,
+            table: {
+                disable: true,
+            },
+        },
+        withInput: {
+            control: false,
+            table: {
+                disable: true,
+            },
+        },
+    },
+} satisfies Meta<typeof RovingTabIndexWrapper>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const HorizontalToolbar: Story = {
+    args: {
+        labels: ["One", "Two", "Three", "Four"],
+        handleHomeEnd: true,
+        handleLeftRight: true,
+    },
+};
+
+export const LoopingToolbar: Story = {
+    args: {
+        labels: ["One", "Two", "Three", "Four"],
+        handleHomeEnd: true,
+        handleLeftRight: true,
+        handleLoop: true,
+    },
+};
+
+export const VerticalToolbar: Story = {
+    args: {
+        labels: ["One", "Two", "Three", "Four"],
+        handleHomeEnd: true,
+        handleLeftRight: false,
+        handleUpDown: true,
+        orientation: "vertical",
+    },
+};
+
+export const WithInput: Story = {
+    args: {
+        labels: ["One", "Two", "Three", "Four"],
+        handleHomeEnd: true,
+        handleLeftRight: true,
+        handleInputFields: false,
+        withInput: true,
+    },
+};
+
+export const MultipleToolbars: StoryObj<typeof MultipleToolbarExample> = {
+    render: (args) => <MultipleToolbarExample {...args} />,
+    args: {
+        toolbars: [
+            {
+                label: "Formatting toolbar",
+                items: ["Bold", "Italic", "Underline"],
+            },
+            {
+                label: "Insert toolbar",
+                items: ["Link", "Image", "Table"],
+            },
+        ],
+        handleHomeEnd: true,
+        handleLeftRight: true,
+    },
+};
diff --git a/packages/shared-components/src/core/roving/RovingTabIndex.test.tsx b/packages/shared-components/src/core/roving/RovingTabIndex.test.tsx
index 82103f4736..a16a1c178b 100644
--- a/packages/shared-components/src/core/roving/RovingTabIndex.test.tsx
+++ b/packages/shared-components/src/core/roving/RovingTabIndex.test.tsx
@@ -7,7 +7,7 @@
 
 import React, { type HTMLAttributes } from "react";
 import userEvent from "@testing-library/user-event";
-import { act, fireEvent, render } from "@test-utils";
+import { act, fireEvent, render, type RenderResult } from "@test-utils";
 import { describe, expect, it, vi } from "vitest";
 
 import {
@@ -25,7 +25,7 @@ const Button = (props: HTMLAttributes<HTMLButtonElement>): React.JSX.Element =>
     return <button {...props} onFocus={onFocus} tabIndex={isActive ? 0 : -1} ref={ref} />;
 };
 
-const checkTabIndexes = (buttons: NodeListOf<HTMLElement>, expectations: number[]): void => {
+const expectTabIndexes = (buttons: NodeListOf<HTMLElement>, expectations: number[]): void => {
     expect([...buttons].map((b) => b.tabIndex)).toStrictEqual(expectations);
 };
 
@@ -38,7 +38,7 @@ const createButtonElement = (text: string): HTMLButtonElement => {
 const renderToolbar = (
     ui: React.ReactNode,
     props: Partial<React.ComponentProps<typeof RovingTabIndexProvider>> = {},
-): ReturnType<typeof render> => {
+): RenderResult => {
     return render(
         <RovingTabIndexProvider {...props}>
             {({ onKeyDownHandler }) => (
@@ -89,16 +89,16 @@ describe("RovingTabIndex", () => {
             </RovingTabIndexProvider>,
         );
 
-        checkTabIndexes(container.querySelectorAll("button"), [0, -1, -1]);
+        expectTabIndexes(container.querySelectorAll("button"), [0, -1, -1]);
 
         act(() => container.querySelectorAll("button")[2].focus());
-        checkTabIndexes(container.querySelectorAll("button"), [-1, -1, 0]);
+        expectTabIndexes(container.querySelectorAll("button"), [-1, -1, 0]);
 
         act(() => container.querySelectorAll("button")[1].focus());
-        checkTabIndexes(container.querySelectorAll("button"), [-1, 0, -1]);
+        expectTabIndexes(container.querySelectorAll("button"), [-1, 0, -1]);
 
         act(() => container.querySelectorAll("button")[1].blur());
-        checkTabIndexes(container.querySelectorAll("button"), [-1, 0, -1]);
+        expectTabIndexes(container.querySelectorAll("button"), [-1, 0, -1]);
 
         rerender(
             <RovingTabIndexProvider>
@@ -112,7 +112,7 @@ describe("RovingTabIndex", () => {
                 )}
             </RovingTabIndexProvider>,
         );
-        checkTabIndexes(container.querySelectorAll("button"), [-1, -1, 0, -1]);
+        expectTabIndexes(container.querySelectorAll("button"), [-1, -1, 0, -1]);
 
         rerender(
             <RovingTabIndexProvider>
@@ -125,7 +125,7 @@ describe("RovingTabIndex", () => {
                 )}
             </RovingTabIndexProvider>,
         );
-        checkTabIndexes(container.querySelectorAll("button"), [-1, -1, 0]);
+        expectTabIndexes(container.querySelectorAll("button"), [-1, -1, 0]);
     });
 
     it("provides a ref to the dom element", () => {
@@ -165,10 +165,10 @@ describe("RovingTabIndex", () => {
             </RovingTabIndexProvider>,
         );
 
-        checkTabIndexes(container.querySelectorAll("button"), [0, -1, -1]);
+        expectTabIndexes(container.querySelectorAll("button"), [0, -1, -1]);
 
         act(() => container.querySelectorAll("button")[2].focus());
-        checkTabIndexes(container.querySelectorAll("button"), [-1, -1, 0]);
+        expectTabIndexes(container.querySelectorAll("button"), [-1, -1, 0]);
     });
 
     describe("reducer functions as expected", () => {
@@ -390,22 +390,22 @@ describe("RovingTabIndex", () => {
             );
 
             act(() => container.querySelectorAll("button")[0].focus());
-            checkTabIndexes(container.querySelectorAll("button"), [0, -1, -1]);
+            expectTabIndexes(container.querySelectorAll("button"), [0, -1, -1]);
 
             await userEvent.keyboard("[ArrowDown]");
-            checkTabIndexes(container.querySelectorAll("button"), [-1, 0, -1]);
+            expectTabIndexes(container.querySelectorAll("button"), [-1, 0, -1]);
 
             await userEvent.keyboard("[ArrowDown]");
-            checkTabIndexes(container.querySelectorAll("button"), [-1, -1, 0]);
+            expectTabIndexes(container.querySelectorAll("button"), [-1, -1, 0]);
 
             await userEvent.keyboard("[ArrowUp]");
-            checkTabIndexes(container.querySelectorAll("button"), [-1, 0, -1]);
+            expectTabIndexes(container.querySelectorAll("button"), [-1, 0, -1]);
 
             await userEvent.keyboard("[ArrowUp]");
-            checkTabIndexes(container.querySelectorAll("button"), [0, -1, -1]);
+            expectTabIndexes(container.querySelectorAll("button"), [0, -1, -1]);
 
             await userEvent.keyboard("[ArrowUp]");
-            checkTabIndexes(container.querySelectorAll("button"), [0, -1, -1]);
+            expectTabIndexes(container.querySelectorAll("button"), [0, -1, -1]);
         });
 
         it("handles left/right arrow keys when handleLeftRight=true", async () => {
@@ -420,10 +420,76 @@ describe("RovingTabIndex", () => {
 
             act(() => container.querySelectorAll("button")[0].focus());
             await userEvent.keyboard("[ArrowRight]");
-            checkTabIndexes(container.querySelectorAll("button"), [-1, 0, -1]);
+            expectTabIndexes(container.querySelectorAll("button"), [-1, 0, -1]);
 
             await userEvent.keyboard("[ArrowLeft]");
-            checkTabIndexes(container.querySelectorAll("button"), [0, -1, -1]);
+            expectTabIndexes(container.querySelectorAll("button"), [0, -1, -1]);
+        });
+
+        it("moves between multiple toolbar containers in one roving group", async () => {
+            const { container } = render(
+                <RovingTabIndexProvider handleLeftRight>
+                    {({ onKeyDownHandler }) => (
+                        <>
+                            <div aria-label="Formatting toolbar" onKeyDown={onKeyDownHandler} role="toolbar">
+                                <Button>Bold</Button>
+                                <Button>Italic</Button>
+                            </div>
+                            <div aria-label="Insert toolbar" onKeyDown={onKeyDownHandler} role="toolbar">
+                                <Button>Link</Button>
+                                <Button>Image</Button>
+                            </div>
+                        </>
+                    )}
+                </RovingTabIndexProvider>,
+            );
+
+            const buttons = container.querySelectorAll("button");
+            act(() => buttons[1].focus());
+            expectTabIndexes(buttons, [-1, 0, -1, -1]);
+
+            await userEvent.keyboard("[ArrowRight]");
+            expect(buttons[2]).toHaveFocus();
+            expectTabIndexes(buttons, [-1, -1, 0, -1]);
+
+            await userEvent.keyboard("[ArrowLeft]");
+            expect(buttons[1]).toHaveFocus();
+            expectTabIndexes(buttons, [-1, 0, -1, -1]);
+        });
+
+        it("handles Home, End, and loop across multiple toolbar containers", async () => {
+            const { container } = render(
+                <RovingTabIndexProvider handleHomeEnd handleLeftRight handleLoop>
+                    {({ onKeyDownHandler }) => (
+                        <>
+                            <div aria-label="Formatting toolbar" onKeyDown={onKeyDownHandler} role="toolbar">
+                                <Button>Bold</Button>
+                                <Button>Italic</Button>
+                            </div>
+                            <div aria-label="Insert toolbar" onKeyDown={onKeyDownHandler} role="toolbar">
+                                <Button>Link</Button>
+                                <Button>Image</Button>
+                            </div>
+                        </>
+                    )}
+                </RovingTabIndexProvider>,
+            );
+
+            const buttons = container.querySelectorAll("button");
+            act(() => buttons[2].focus());
+            expectTabIndexes(buttons, [-1, -1, 0, -1]);
+
+            await userEvent.keyboard("[End]");
+            expect(buttons[3]).toHaveFocus();
+            expectTabIndexes(buttons, [-1, -1, -1, 0]);
+
+            await userEvent.keyboard("[ArrowRight]");
+            expect(buttons[0]).toHaveFocus();
+            expectTabIndexes(buttons, [0, -1, -1, -1]);
+
+            await userEvent.keyboard("[Home]");
+            expect(buttons[0]).toHaveFocus();
+            expectTabIndexes(buttons, [0, -1, -1, -1]);
         });
 
         it("handles Home and End when handleHomeEnd=true", async () => {
@@ -437,13 +503,13 @@ describe("RovingTabIndex", () => {
             );
 
             act(() => container.querySelectorAll("button")[1].focus());
-            checkTabIndexes(container.querySelectorAll("button"), [-1, 0, -1]);
+            expectTabIndexes(container.querySelectorAll("button"), [-1, 0, -1]);
 
             await userEvent.keyboard("[End]");
-            checkTabIndexes(container.querySelectorAll("button"), [-1, -1, 0]);
+            expectTabIndexes(container.querySelectorAll("button"), [-1, -1, 0]);
 
             await userEvent.keyboard("[Home]");
-            checkTabIndexes(container.querySelectorAll("button"), [0, -1, -1]);
+            expectTabIndexes(container.querySelectorAll("button"), [0, -1, -1]);
         });
 
         it("loops when handleLoop=true", async () => {
@@ -458,10 +524,10 @@ describe("RovingTabIndex", () => {
 
             act(() => container.querySelectorAll("button")[2].focus());
             await userEvent.keyboard("[ArrowDown]");
-            checkTabIndexes(container.querySelectorAll("button"), [0, -1, -1]);
+            expectTabIndexes(container.querySelectorAll("button"), [0, -1, -1]);
 
             await userEvent.keyboard("[ArrowUp]");
-            checkTabIndexes(container.querySelectorAll("button"), [-1, -1, 0]);
+            expectTabIndexes(container.querySelectorAll("button"), [-1, -1, 0]);
         });
 
         it("uses a custom getAction mapper", async () => {
@@ -486,7 +552,7 @@ describe("RovingTabIndex", () => {
             await userEvent.keyboard("j");
 
             expect(getAction).toHaveBeenCalled();
-            checkTabIndexes(container.querySelectorAll("button"), [-1, 0, -1]);
+            expectTabIndexes(container.querySelectorAll("button"), [-1, 0, -1]);
         });
 
         it("handles input fields when handleInputFields=true", () => {
@@ -503,7 +569,7 @@ describe("RovingTabIndex", () => {
             const input = getByRole("textbox", { name: "Search input" });
 
             fireEvent.keyDown(input, { key: "ArrowDown" });
-            checkTabIndexes(container.querySelectorAll("button"), [-1, 0]);
+            expectTabIndexes(container.querySelectorAll("button"), [-1, 0]);
         });
 
         it("moves from an input field with Tab when handleInputFields=false", () => {
@@ -517,10 +583,10 @@ describe("RovingTabIndex", () => {
 
             act(() => container.querySelectorAll("button")[0].focus());
             const input = getByRole("textbox", { name: "Search input" });
-            act(() => (input as HTMLElement).focus());
+            act(() => input.focus());
 
             fireEvent.keyDown(input, { key: "Tab" });
-            checkTabIndexes(container.querySelectorAll("button"), [-1, 0]);
+            expectTabIndexes(container.querySelectorAll("button"), [-1, 0]);
         });
 
         it("stops provider processing when onKeyDown prevents default", () => {
@@ -540,7 +606,7 @@ describe("RovingTabIndex", () => {
             fireEvent.keyDown(container.querySelector('[role="toolbar"]')!, { key: "ArrowDown" });
 
             expect(onKeyDown).toHaveBeenCalled();
-            checkTabIndexes(container.querySelectorAll("button"), [0, -1, -1]);
+            expectTabIndexes(container.querySelectorAll("button"), [0, -1, -1]);
         });
 
         it("calls scrollIntoView if specified", async () => {
@@ -554,7 +620,7 @@ describe("RovingTabIndex", () => {
             );
 
             act(() => container.querySelectorAll("button")[0].focus());
-            checkTabIndexes(container.querySelectorAll("button"), [0, -1, -1]);
+            expectTabIndexes(container.querySelectorAll("button"), [0, -1, -1]);
 
             const button = container.querySelectorAll("button")[1];
             const mock = vi.spyOn(button, "scrollIntoView");
diff --git a/packages/shared-components/src/core/roving/RovingTabIndex.tsx b/packages/shared-components/src/core/roving/RovingTabIndex.tsx
index 42055714a3..99637dfb6c 100644
--- a/packages/shared-components/src/core/roving/RovingTabIndex.tsx
+++ b/packages/shared-components/src/core/roving/RovingTabIndex.tsx
@@ -30,8 +30,11 @@ import React, {
  * @param el - The element being evaluated for native input behaviour.
  * @returns `true` when the element should keep its own arrow-key handling.
  */
-export function checkInputableElement(el: HTMLElement): boolean {
-    return el.matches('input:not([type="radio"]):not([type="checkbox"]), textarea, select, [contenteditable=true]');
+export function checkInputableElement(el: EventTarget): boolean {
+    return (
+        el instanceof Element &&
+        el.matches('input:not([type="radio"]):not([type="checkbox"]), textarea, select, [contenteditable=true]')
+    );
 }
 
 /**
@@ -498,7 +501,7 @@ export const RovingTabIndexProvider: React.FC<RovingTabIndexProviderProps> = ({
             const action = getAction(ev);
             // Don't interfere with input default keydown behaviour
             // but allow people to move focus from it with Tab.
-            const isInputTarget = !handleInputFields && checkInputableElement(ev.target as HTMLElement);
+            const isInputTarget = !handleInputFields && checkInputableElement(ev.target);
             const { handled, focusNode } = isInputTarget
                 ? getInputNavigationResult(action, context.state.nodes, context.state.activeNode, ev.shiftKey)
                 : getStandardNavigationResult(
@@ -605,7 +608,6 @@ export const useRovingTabIndex = <T extends HTMLElement>(
         });
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-    // eslint-disable-next-line react-compiler/react-compiler
     const isActive = context.state.activeNode === nodeRef.current;
     return [onFocus, isActive, ref, nodeRef];
 };
diff --git a/packages/shared-components/src/core/roving/RovingTabIndexWrapper.tsx b/packages/shared-components/src/core/roving/RovingTabIndexWrapper.ts
similarity index 100%
rename from packages/shared-components/src/core/roving/RovingTabIndexWrapper.tsx
rename to packages/shared-components/src/core/roving/RovingTabIndexWrapper.ts
diff --git a/packages/shared-components/src/core/roving/Toolbar.tsx b/packages/shared-components/src/core/roving/Toolbar.tsx
new file mode 100644
index 0000000000..82bec14ba0
--- /dev/null
+++ b/packages/shared-components/src/core/roving/Toolbar.tsx
@@ -0,0 +1,83 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ * Copyright 2020 The Matrix.org Foundation C.I.C.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX, type Ref } from "react";
+
+import { RovingAction, RovingTabIndexProvider, type RovingTabIndexProviderProps } from "./RovingTabIndex";
+
+/**
+ * Props for {@link Toolbar}.
+ */
+export interface ToolbarProps extends Omit<React.HTMLProps<HTMLDivElement>, "onKeyDown"> {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Optional action resolver used to map keyboard events to
+     * {@link RovingAction} values, e.g. to apply app-level custom keybindings.
+     *
+     * When omitted, a default mapping based on `KeyboardEvent.key` is used.
+     */
+    getAction?: RovingTabIndexProviderProps["getAction"];
+}
+
+const getDefaultAction = (ev: React.KeyboardEvent): RovingAction | undefined => {
+    switch (ev.key) {
+        case "ArrowUp":
+            return RovingAction.ArrowUp;
+        case "ArrowDown":
+            return RovingAction.ArrowDown;
+        default:
+            return undefined;
+    }
+};
+
+/**
+ * This component implements the Toolbar design pattern from the WAI-ARIA Authoring Practices guidelines.
+ * https://www.w3.org/TR/wai-aria-practices-1.1/#toolbar
+ * All buttons passed in children must use RovingTabIndex to set `onFocus`, `isActive`, `ref`.
+ */
+export const Toolbar = ({ children, ref, getAction, ...props }: ToolbarProps): JSX.Element => {
+    const onKeyDown = (ev: React.KeyboardEvent): void => {
+        const target = ev.target as HTMLElement;
+        // Don't interfere with input default keydown behaviour
+        if (target.tagName === "INPUT") return;
+
+        let handled = true;
+
+        // HOME and END are handled by RovingTabIndexProvider
+        const action = getAction?.(ev) ?? getDefaultAction(ev);
+        switch (action) {
+            case RovingAction.ArrowUp:
+            case RovingAction.ArrowDown:
+                if (target.hasAttribute("aria-haspopup")) {
+                    target.click();
+                }
+                break;
+
+            default:
+                handled = false;
+        }
+
+        if (handled) {
+            ev.preventDefault();
+            ev.stopPropagation();
+        }
+    };
+
+    // We handle both up/down and left/right as is allowed in the above WAI ARIA best practices
+    return (
+        <RovingTabIndexProvider handleHomeEnd handleLeftRight handleUpDown onKeyDown={onKeyDown} getAction={getAction}>
+            {({ onKeyDownHandler }) => (
+                // This may be wrong but seems to work, this is a roving-toolbar, so the focus follows one of the children
+                // oxlint-disable-next-line jsx-a11y/interactive-supports-focus
+                <div {...props} onKeyDown={onKeyDownHandler} role="toolbar" ref={ref}>
+                    {children}
+                </div>
+            )}
+        </RovingTabIndexProvider>
+    );
+};
diff --git a/packages/shared-components/src/core/roving/index.ts b/packages/shared-components/src/core/roving/index.ts
index 3694df73a4..067f9c5670 100644
--- a/packages/shared-components/src/core/roving/index.ts
+++ b/packages/shared-components/src/core/roving/index.ts
@@ -8,6 +8,7 @@
 export {
     checkInputableElement,
     findNextSiblingElement,
+    findPreviousSiblingElement,
     RovingAction,
     RovingStateActionType,
     RovingTabIndexContext,
@@ -15,4 +16,14 @@ export {
     useRovingTabIndex,
 } from "./RovingTabIndex";
 export type { IAction, IContext, IState, RovingTabIndexProviderProps } from "./RovingTabIndex";
+export { RovingGridIndexProvider } from "./RovingGridIndex";
+export type {
+    RovingGridCellResolver,
+    RovingGridIndexProviderProps,
+    RovingGridMoveFocus,
+    RovingGridNodeResolver,
+    RovingGridRowResolver,
+} from "./RovingGridIndex";
 export { RovingTabIndexWrapper } from "./RovingTabIndexWrapper";
+export { Toolbar } from "./Toolbar";
+export type { ToolbarProps } from "./Toolbar";
diff --git a/packages/shared-components/src/core/userStatus.ts b/packages/shared-components/src/core/userStatus.ts
new file mode 100644
index 0000000000..65144bd7d5
--- /dev/null
+++ b/packages/shared-components/src/core/userStatus.ts
@@ -0,0 +1,21 @@
+/*
+Copyright 2026 Element Creations 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.
+*/
+
+/**
+ * A tuple of an emoji and string representing a user's MSC4426 status.
+ * The emoji should be a single grapheme cluster.
+ */
+export interface UserStatus {
+    /**
+     * The emoji representing the user's status. This must be a single grapheme cluster.
+     */
+    emoji: string;
+    /**
+     * The text representing the user's status.
+     */
+    text: string;
+}
diff --git a/packages/shared-components/src/core/utils/Box/Box.tsx b/packages/shared-components/src/core/utils/Box/Box.ts
similarity index 100%
rename from packages/shared-components/src/core/utils/Box/Box.tsx
rename to packages/shared-components/src/core/utils/Box/Box.ts
diff --git a/packages/shared-components/src/core/utils/DateUtils.ts b/packages/shared-components/src/core/utils/DateUtils.ts
index 6df2836d20..2cbcc9c263 100644
--- a/packages/shared-components/src/core/utils/DateUtils.ts
+++ b/packages/shared-components/src/core/utils/DateUtils.ts
@@ -9,16 +9,21 @@
  * Formats a number of seconds into a human-readable string.
  * @param inSeconds
  */
-export function formatSeconds(inSeconds: number): string {
+export function formatSeconds(
+    inSeconds: number,
+    opts?: { hoursMaxLength?: number; minutesMaxLength?: number },
+): string {
     const isNegative = inSeconds < 0;
     inSeconds = Math.abs(inSeconds);
 
     const hours = Math.floor(inSeconds / (60 * 60))
         .toFixed(0)
-        .padStart(2, "0");
+        .padStart(opts?.hoursMaxLength ?? 2, "0");
+
     const minutes = Math.floor((inSeconds % (60 * 60)) / 60)
         .toFixed(0)
-        .padStart(2, "0");
+        .padStart(opts?.minutesMaxLength ?? 2, "0");
+
     const seconds = Math.floor((inSeconds % (60 * 60)) % 60)
         .toFixed(0)
         .padStart(2, "0");
diff --git a/packages/shared-components/src/core/utils/Flex/Flex.tsx b/packages/shared-components/src/core/utils/Flex/Flex.ts
similarity index 95%
rename from packages/shared-components/src/core/utils/Flex/Flex.tsx
rename to packages/shared-components/src/core/utils/Flex/Flex.ts
index 7a7e9a1860..7404bf1874 100644
--- a/packages/shared-components/src/core/utils/Flex/Flex.tsx
+++ b/packages/shared-components/src/core/utils/Flex/Flex.ts
@@ -11,7 +11,6 @@ import React, { type JSX, type ComponentProps, type JSXElementConstructor, useMe
 
 import styles from "./Flex.module.css";
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type FlexProps<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = {
     /**
      * The type of the HTML element
@@ -61,7 +60,6 @@ type FlexProps<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any
 /**
  * A flexbox container helper
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function Flex<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any> = "div">({
     as = "div",
     display = "flex",
diff --git a/packages/shared-components/src/core/utils/LinkedText/LinkedText.test.tsx b/packages/shared-components/src/core/utils/LinkedText/LinkedText.test.tsx
index fb6c8e26f4..46505a05f5 100644
--- a/packages/shared-components/src/core/utils/LinkedText/LinkedText.test.tsx
+++ b/packages/shared-components/src/core/utils/LinkedText/LinkedText.test.tsx
@@ -14,7 +14,7 @@ import userEvent from "@testing-library/user-event";
 import * as stories from "./LinkedText.stories.tsx";
 import { LinkedText } from "./LinkedText.tsx";
 import { LinkifyOptionalSlashProtocols, PERMITTED_URL_SCHEMES } from "../linkify";
-import { LinkedTextContext } from "./LinkedTextContext.tsx";
+import { LinkedTextContext } from "./LinkedTextContext";
 
 const { Default, WithUserId, WithRoomAlias, WithCustomHref, WithCustomUrlTarget } = composeStories(stories);
 
diff --git a/packages/shared-components/src/core/utils/LinkedText/LinkedTextContext.tsx b/packages/shared-components/src/core/utils/LinkedText/LinkedTextContext.ts
similarity index 100%
rename from packages/shared-components/src/core/utils/LinkedText/LinkedTextContext.tsx
rename to packages/shared-components/src/core/utils/LinkedText/LinkedTextContext.ts
diff --git a/packages/shared-components/src/core/utils/Scrollbar/AutoHideScrollbar.module.css b/packages/shared-components/src/core/utils/Scrollbar/AutoHideScrollbar.module.css
new file mode 100644
index 0000000000..b9f6a5843e
--- /dev/null
+++ b/packages/shared-components/src/core/utils/Scrollbar/AutoHideScrollbar.module.css
@@ -0,0 +1,71 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+.scrollbar {
+    overflow-x: hidden;
+    overflow-y: auto;
+    overflow-y: overlay; /* where supported */
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+
+    &::-webkit-scrollbar {
+        background-color: transparent;
+        width: 6px;
+        height: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: transparent;
+    }
+
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+
+    > * {
+        /* also set on first level children in case this scrollbar is used as container */
+        scrollbar-width: thin;
+    }
+}
+
+.scrollbar:hover {
+    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+
+    :global(.cpd-theme-dark) &,
+    :global(.cpd-theme-dark-hc) & {
+        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        border-radius: 3px;
+        background-color: rgba(0, 0, 0, 0.2);
+
+        :global(.cpd-theme-dark) &,
+        :global(.cpd-theme-dark-hc) & {
+            background-color: rgba(255, 255, 255, 0.2);
+        }
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .scrollbar:hover {
+        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+
+        :global(.cpd-theme-light) &,
+        :global(.cpd-theme-light-hc) & {
+            scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            border-radius: 3px;
+            background-color: rgba(255, 255, 255, 0.2);
+
+            :global(.cpd-theme-light) &,
+            :global(.cpd-theme-light-hc) & {
+                background-color: rgba(0, 0, 0, 0.2);
+            }
+        }
+    }
+}
diff --git a/packages/shared-components/src/core/utils/Scrollbar/AutoHideScrollbar.stories.tsx b/packages/shared-components/src/core/utils/Scrollbar/AutoHideScrollbar.stories.tsx
new file mode 100644
index 0000000000..34391c2321
--- /dev/null
+++ b/packages/shared-components/src/core/utils/Scrollbar/AutoHideScrollbar.stories.tsx
@@ -0,0 +1,76 @@
+/*
+ * Copyright 2026 Element Creations 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 type { Meta, StoryObj } from "@storybook/react-vite";
+import { AutoHideScrollbar } from "./AutoHideScrollbar";
+
+const containerStyle: React.CSSProperties = {
+    border: "1px solid",
+    width: "200px",
+    height: "150px",
+};
+
+const meta = {
+    title: "Core/AutoHideScrollbar",
+    component: AutoHideScrollbar,
+    tags: ["autodocs", "skip-test"],
+    args: {
+        as: "div",
+        role: "container",
+        style: containerStyle,
+        children: (
+            <ul>
+                <li>Item 1</li>
+                <li>Item 2</li>
+                <li>Item 3</li>
+                <li>Item 4</li>
+                <li>Item 5</li>
+                <li>Item 6</li>
+                <li>Item 7</li>
+                <li>Item 8</li>
+                <li>Item 9</li>
+            </ul>
+        ),
+    },
+} satisfies Meta<typeof AutoHideScrollbar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const NoOverflowY: Story = {
+    args: {
+        children: (
+            <ul>
+                <li>Item 1</li>
+                <li>Item 2</li>
+                <li>Item 3</li>
+            </ul>
+        ),
+    },
+};
+
+export const NoOverflowX: Story = {
+    args: {
+        children: (
+            <ul>
+                <li>Item 1 with a very long text</li>
+                <li>Item 2 with a very long text</li>
+                <li>Item 3 with a very long text</li>
+                <li>Item 4 with a very long text</li>
+                <li>Item 5 with a very long text</li>
+                <li>Item 6 with a very long text</li>
+                <li>Item 7 with a very long text</li>
+                <li>Item 8 with a very long text</li>
+                <li>Item 9 with a very long text</li>
+            </ul>
+        ),
+    },
+};
diff --git a/packages/shared-components/src/core/utils/Scrollbar/AutoHideScrollbar.test.tsx b/packages/shared-components/src/core/utils/Scrollbar/AutoHideScrollbar.test.tsx
new file mode 100644
index 0000000000..a80b5352d0
--- /dev/null
+++ b/packages/shared-components/src/core/utils/Scrollbar/AutoHideScrollbar.test.tsx
@@ -0,0 +1,141 @@
+/*
+ * Copyright 2026 Element Creations 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 { fireEvent, render, screen, waitFor } from "@test-utils";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { AutoHideScrollbar } from "./AutoHideScrollbar";
+
+class RefUpdateProbe extends React.Component<any, { armed: boolean }> {
+    public state = { armed: false };
+
+    public wrappedRefCalls = 0;
+
+    private readonly wrappedRef = (node: HTMLDivElement | null): void => {
+        this.wrappedRefCalls += 1;
+
+        if (node && !this.state.armed) {
+            this.setState({ armed: true });
+        }
+    };
+
+    public render(): React.ReactNode {
+        return (
+            <>
+                <AutoHideScrollbar data-testid="scrollbar" wrappedRef={this.wrappedRef}>
+                    <div>Item 1</div>
+                </AutoHideScrollbar>
+                <div data-testid="status">{this.state.armed ? "armed" : "idle"}</div>
+            </>
+        );
+    }
+}
+
+describe("AutoHideScrollbar", () => {
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+
+    it("renders children with the default scrollbar props", () => {
+        render(
+            <AutoHideScrollbar data-testid="scrollbar">
+                <div>Item 1</div>
+            </AutoHideScrollbar>,
+        );
+
+        const scrollbar = screen.getByTestId("scrollbar");
+
+        expect(scrollbar).toHaveAttribute("tabindex", "-1");
+        expect(scrollbar.className).toContain("scrollbar");
+        expect(screen.getByText("Item 1")).toBeInTheDocument();
+    });
+
+    it("forwards props to the requested element", () => {
+        render(
+            <AutoHideScrollbar as="section" aria-label="Scrollable content" data-testid="scrollbar">
+                <div>Item 1</div>
+            </AutoHideScrollbar>,
+        );
+
+        const scrollbar = screen.getByTestId("scrollbar");
+
+        expect(scrollbar.tagName).toBe("SECTION");
+        expect(scrollbar).toHaveAttribute("aria-label", "Scrollable content");
+    });
+
+    it("attaches the scroll listener and reports the scroll container ref", async () => {
+        const onScroll = vi.fn<(event: Event) => void>();
+        const wrappedRef = vi.fn<(ref: HTMLDivElement | null) => void>();
+        const addEventListenerSpy = vi.spyOn(HTMLElement.prototype, "addEventListener");
+        const removeEventListenerSpy = vi.spyOn(HTMLElement.prototype, "removeEventListener");
+
+        const { unmount } = render(
+            <AutoHideScrollbar data-testid="scrollbar" onScroll={onScroll} wrappedRef={wrappedRef}>
+                <div style={{ height: 1000 }}>Scrollable content</div>
+            </AutoHideScrollbar>,
+        );
+
+        const scrollbar = screen.getByTestId("scrollbar");
+
+        await waitFor(() => expect(wrappedRef).toHaveBeenCalledWith(scrollbar));
+        expect(addEventListenerSpy).toHaveBeenCalledWith("scroll", onScroll, { passive: true });
+
+        fireEvent.scroll(scrollbar);
+        expect(onScroll).toHaveBeenCalledTimes(1);
+
+        unmount();
+
+        expect(removeEventListenerSpy).toHaveBeenCalledWith("scroll", onScroll);
+        expect(wrappedRef).toHaveBeenLastCalledWith(null);
+
+        fireEvent.scroll(scrollbar);
+        expect(onScroll).toHaveBeenCalledTimes(1);
+    });
+
+    it("provides wrappedRef before parent componentDidMount runs", () => {
+        const calls: Array<string> = [];
+
+        class TimingProbe extends React.Component {
+            private scrollNode: HTMLDivElement | null = null;
+
+            public componentDidMount(): void {
+                calls.push("parent-did-mount");
+                expect(this.scrollNode).not.toBeNull();
+            }
+
+            public render(): React.ReactNode {
+                return (
+                    <AutoHideScrollbar
+                        data-testid="scrollbar"
+                        wrappedRef={(node) => {
+                            calls.push(node ? "wrapped-ref" : "wrapped-ref-null");
+                            this.scrollNode = node;
+                        }}
+                    >
+                        <div>Item 1</div>
+                    </AutoHideScrollbar>
+                );
+            }
+        }
+
+        render(<TimingProbe />);
+
+        expect(calls).toEqual(["wrapped-ref", "parent-did-mount"]);
+        expect(screen.getByTestId("scrollbar")).toBeInTheDocument();
+    });
+
+    it("does not re-enter wrappedRef when the parent rerenders from the callback", async () => {
+        const probeRef = React.createRef<RefUpdateProbe>();
+
+        render(<RefUpdateProbe ref={probeRef} />);
+
+        await waitFor(() => expect(screen.getByTestId("status")).toHaveTextContent("armed"));
+        expect(probeRef.current?.wrappedRefCalls).toBe(1);
+        expect(screen.getByTestId("scrollbar")).toBeInTheDocument();
+    });
+});
diff --git a/packages/shared-components/src/core/utils/Scrollbar/AutoHideScrollbar.ts b/packages/shared-components/src/core/utils/Scrollbar/AutoHideScrollbar.ts
new file mode 100644
index 0000000000..3d89266147
--- /dev/null
+++ b/packages/shared-components/src/core/utils/Scrollbar/AutoHideScrollbar.ts
@@ -0,0 +1,94 @@
+/*
+Copyright 2026 Element Creations 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 classNames from "classnames";
+import React, { type HTMLAttributes, type JSX, type ReactNode, type WheelEvent } from "react";
+
+import styles from "./AutoHideScrollbar.module.css";
+
+type DynamicHtmlElementProps<T extends keyof JSX.IntrinsicElements> =
+    JSX.IntrinsicElements[T] extends HTMLAttributes<object> ? DynamicElementProps<T> : DynamicElementProps<"div">;
+type DynamicElementProps<T extends keyof JSX.IntrinsicElements> = Partial<Omit<JSX.IntrinsicElements[T], "ref">>;
+
+/**
+ * Props for `AutoHideScrollbar`.
+ */
+export type AutoHideScrollbarProps<T extends keyof JSX.IntrinsicElements = "div"> = Omit<
+    DynamicHtmlElementProps<T>,
+    "onScroll"
+> & {
+    /** The type of the HTML element. @default div*/
+    as?: T;
+    /** Additional class names to append to the scrollbar root. */
+    className?: string;
+    /** Inline styles applied to the root element. */
+    style?: React.CSSProperties;
+    /** Tab index override; defaults to `-1`. */
+    tabIndex?: number;
+    /** Receives the mounted scroll container element. */
+    wrappedRef?: (ref: HTMLDivElement | null) => void;
+    /** Native scroll handler attached with a passive listener. */
+    onScroll?: (event: Event) => void;
+    /** Optional wheel handler forwarded to the root element. */
+    onWheel?: (event: WheelEvent) => void;
+    /** Scrollable content rendered inside the container. */
+    children: ReactNode;
+};
+
+/**
+ * Scroll container that hides native scrollbars until hovered.
+ * Any overflow-x is hidden by default.
+ */
+export function AutoHideScrollbar<T extends keyof JSX.IntrinsicElements = "div">(
+    props: AutoHideScrollbarProps<T>,
+): React.ReactNode {
+    const { as = "div" as T, className, onScroll, tabIndex, wrappedRef, children, ...otherProps } = props;
+    const containerRef = React.useRef<HTMLDivElement | null>(null);
+    const wrappedRefRef = React.useRef(wrappedRef);
+    wrappedRefRef.current = wrappedRef;
+
+    const collectContainer = React.useCallback((node: HTMLDivElement | null): void => {
+        containerRef.current = node;
+    }, []);
+
+    React.useLayoutEffect(() => {
+        wrappedRefRef.current?.(containerRef.current);
+
+        return (): void => {
+            wrappedRefRef.current?.(null);
+        };
+    }, []);
+
+    React.useLayoutEffect(() => {
+        const container = containerRef.current;
+
+        if (!container || !onScroll) {
+            return;
+        }
+
+        // Using the passive option to not block the main thread.
+        // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners
+        container.addEventListener("scroll", onScroll, { passive: true });
+
+        return (): void => {
+            container.removeEventListener("scroll", onScroll);
+        };
+    }, [onScroll]);
+
+    return React.createElement(
+        as,
+        {
+            ...otherProps,
+            ref: collectContainer,
+            className: classNames(styles.scrollbar, className),
+            // Firefox sometimes makes this element focusable due to
+            // overflow:scroll;, so force it out of tab order by default.
+            tabIndex: tabIndex ?? -1,
+        },
+        children,
+    );
+}
diff --git a/packages/shared-components/src/core/utils/Scrollbar/index.ts b/packages/shared-components/src/core/utils/Scrollbar/index.ts
new file mode 100644
index 0000000000..7d78b22b7b
--- /dev/null
+++ b/packages/shared-components/src/core/utils/Scrollbar/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+export { AutoHideScrollbar, type AutoHideScrollbarProps } from "./AutoHideScrollbar";
diff --git a/packages/shared-components/src/core/utils/ToastContext.test.tsx b/packages/shared-components/src/core/utils/ToastContext.test.tsx
new file mode 100644
index 0000000000..9ca9475d9c
--- /dev/null
+++ b/packages/shared-components/src/core/utils/ToastContext.test.tsx
@@ -0,0 +1,66 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2024 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { describe, it, expect, vitest } from "vitest";
+import { render } from "@test-utils";
+import { Toast } from "@vector-im/compound-web";
+import React, { type JSX } from "react";
+
+import { ToastContext, ToastRack, useToastContext } from "./ToastContext";
+
+describe("ToastRack", () => {
+    it("should return a toast once one is displayed", () => {
+        const toastRack = new ToastRack();
+        toastRack.displayToast("Hello, world!");
+
+        expect(toastRack.getActiveToast()).toBe("Hello, world!");
+    });
+
+    it("calls update callback when a toast is added", () => {
+        const toastRack = new ToastRack();
+        const updateCallbackFn = vitest.fn();
+        toastRack.setCallback(updateCallbackFn);
+        toastRack.displayToast("Hello, world!");
+
+        expect(updateCallbackFn).toHaveBeenCalled();
+    });
+
+    it("removes toast when remove function is called", () => {
+        const toastRack = new ToastRack();
+        const removeFn = toastRack.displayToast("Hello, world!");
+        expect(toastRack.getActiveToast()).toBe("Hello, world!");
+        removeFn();
+        expect(toastRack.getActiveToast()).toBeUndefined();
+    });
+});
+
+describe("useToastContext", () => {
+    it("should fail if there is no context wrapper", () => {
+        function FailingComponent(): JSX.Element {
+            useToastContext();
+            return <p>Test</p>;
+        }
+        expect(() => render(<FailingComponent />)).toThrow(
+            "Component must be wrapped in <ToastContext.Provider /> to use useToastContext",
+        );
+    });
+    it("should succeed if there is a context wrapper", async () => {
+        function HappyComponent(): JSX.Element {
+            const toaster = useToastContext();
+            return <>{toaster.getActiveToast()}</>;
+        }
+        const rack = new ToastRack();
+        rack.displayToast(<Toast>Toast!</Toast>);
+        const { getByText } = render(
+            <ToastContext value={rack}>
+                <HappyComponent />
+            </ToastContext>,
+        );
+        expect(getByText("Toast!")).toBeVisible();
+    });
+});
diff --git a/apps/web/src/contexts/ToastContext.tsx b/packages/shared-components/src/core/utils/ToastContext.ts
similarity index 82%
rename from apps/web/src/contexts/ToastContext.tsx
rename to packages/shared-components/src/core/utils/ToastContext.ts
index 7382a412dc..4cdf2bc0c4 100644
--- a/apps/web/src/contexts/ToastContext.tsx
+++ b/packages/shared-components/src/core/utils/ToastContext.ts
@@ -1,10 +1,10 @@
 /*
-Copyright 2024 New Vector Ltd.
-Copyright 2024 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
+ * Copyright 2024 New Vector Ltd.
+ * Copyright 2024 The Matrix.org Foundation C.I.C.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
 
 import { type ReactNode, createContext, useCallback, useContext, useEffect, useState, useMemo } from "react";
 
@@ -18,14 +18,18 @@ import { type ReactNode, createContext, useCallback, useContext, useEffect, useS
  * corner of the app, however the name 'toast' as used in this class refers to the component
  * of the same name in compound that it is written to manage.
  */
-export const ToastContext = createContext(null as any);
+export const ToastContext = createContext<ToastRack | null>(null);
 ToastContext.displayName = "ToastContext";
 
 /**
  * Returns the ToastRack in context in order to display toasts
  */
 export function useToastContext(): ToastRack {
-    return useContext(ToastContext);
+    const rack = useContext(ToastContext);
+    if (!rack) {
+        throw new Error("Component must be wrapped in <ToastContext.Provider /> to use useToastContext");
+    }
+    return rack;
 }
 
 /**
diff --git a/packages/shared-components/src/core/utils/applyReplacerOnString.tsx b/packages/shared-components/src/core/utils/applyReplacerOnString.ts
similarity index 87%
rename from packages/shared-components/src/core/utils/applyReplacerOnString.tsx
rename to packages/shared-components/src/core/utils/applyReplacerOnString.ts
index 334ae1fd99..bf5ab31026 100644
--- a/packages/shared-components/src/core/utils/applyReplacerOnString.tsx
+++ b/packages/shared-components/src/core/utils/applyReplacerOnString.ts
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX } from "react";
+import { type JSX } from "react";
 import { Text, type HTMLReactParserOptions } from "html-react-parser";
 
 type Replacer = HTMLReactParserOptions["replace"];
@@ -28,7 +28,7 @@ export function applyReplacerOnString(
     const arr = Array.isArray(input) ? input : [input];
     return arr.map((item, index): JSX.Element => {
         if (typeof item === "string") {
-            return <React.Fragment key={index}>{(replacer(new Text(item), 0) as JSX.Element) || item}</React.Fragment>;
+            return (replacer(new Text(item), 0) as JSX.Element) || item;
         }
         return item;
     });
diff --git a/packages/shared-components/src/core/utils/linkify.test.ts b/packages/shared-components/src/core/utils/linkify.test.ts
index b2fd9903d3..54ee2ddd08 100644
--- a/packages/shared-components/src/core/utils/linkify.test.ts
+++ b/packages/shared-components/src/core/utils/linkify.test.ts
@@ -104,7 +104,6 @@ describe("linkify-matrix", () => {
                     },
                 ]);
             });
-            // eslint-disable-next-line max-len
             it("should properly parse IPs v6 while ignoring dangling comma when without port name as the domain name", () => {
                 const test = char + "username:[1234:5678::abcd]:";
                 expect(isLinkable(test)).toEqual(true);
@@ -122,7 +121,7 @@ describe("linkify-matrix", () => {
             });
         });
         it("properly parses " + char + "_foonetic_xkcd:matrix.org", () => {
-            const test = "" + char + "_foonetic_xkcd:matrix.org";
+            const test = char + "_foonetic_xkcd:matrix.org";
             expect(isLinkable(test)).toEqual(true);
             const found = findLinksInString(test);
             expect(found).toEqual([
@@ -167,7 +166,7 @@ describe("linkify-matrix", () => {
             ]);
         });
         it("accept " + char + "foo:bar.com", () => {
-            const test = "" + char + "foo:bar.com";
+            const test = char + "foo:bar.com";
             expect(isLinkable(test)).toEqual(true);
             const found = findLinksInString(test);
             expect(found).toEqual([
@@ -182,7 +181,7 @@ describe("linkify-matrix", () => {
             ]);
         });
         it("accept " + char + "foo:com (mostly for (TLD|DOMAIN)+ mixing)", () => {
-            const test = "" + char + "foo:com";
+            const test = char + "foo:com";
             expect(isLinkable(test)).toEqual(true);
             const found = findLinksInString(test);
             expect(found).toEqual([
@@ -197,7 +196,7 @@ describe("linkify-matrix", () => {
             ]);
         });
         it("accept repeated TLDs (e.g .org.uk)", () => {
-            const test = "" + char + "foo:bar.org.uk";
+            const test = char + "foo:bar.org.uk";
             expect(isLinkable(test)).toEqual(true);
             const found = findLinksInString(test);
             expect(found).toEqual([
@@ -212,7 +211,7 @@ describe("linkify-matrix", () => {
             ]);
         });
         it("accept hyphens in name " + char + "foo-bar:server.com", () => {
-            const test = "" + char + "foo-bar:server.com";
+            const test = char + "foo-bar:server.com";
             expect(isLinkable(test)).toEqual(true);
             const found = findLinksInString(test);
             expect(found).toEqual([
@@ -227,7 +226,7 @@ describe("linkify-matrix", () => {
             ]);
         });
         it("ignores trailing `:`", () => {
-            const test = "" + char + "foo:bar.com:";
+            const test = char + "foo:bar.com:";
             expect(isLinkable(test)).toEqual(false);
             const found = findLinksInString(test);
             expect(found).toEqual([
@@ -242,7 +241,7 @@ describe("linkify-matrix", () => {
             ]);
         });
         it("accept :NUM (port specifier)", () => {
-            const test = "" + char + "foo:bar.com:2225";
+            const test = char + "foo:bar.com:2225";
             expect(isLinkable(test)).toEqual(true);
             const found = findLinksInString(test);
             expect(found).toEqual([
@@ -257,7 +256,7 @@ describe("linkify-matrix", () => {
             ]);
         });
         it("ignores duplicate :NUM (double port specifier)", () => {
-            const test = "" + char + "foo:bar.com:2225:1234";
+            const test = char + "foo:bar.com:2225:1234";
             expect(isLinkable(test)).toEqual(false);
             const found = findLinksInString(test);
             expect(found).toEqual([
@@ -272,7 +271,7 @@ describe("linkify-matrix", () => {
             ]);
         });
         it("ignores all the trailing :", () => {
-            const test = "" + char + "foo:bar.com::::";
+            const test = char + "foo:bar.com::::";
             expect(isLinkable(test)).toEqual(false);
             const found = findLinksInString(test);
             expect(found).toEqual([
@@ -287,7 +286,7 @@ describe("linkify-matrix", () => {
             ]);
         });
         it("properly parses room alias with dots in name", () => {
-            const test = "" + char + "foo.asdf:bar.com::::";
+            const test = char + "foo.asdf:bar.com::::";
             expect(isLinkable(test)).toEqual(false);
             const found = findLinksInString(test);
             expect(found).toEqual([
@@ -302,7 +301,7 @@ describe("linkify-matrix", () => {
             ]);
         });
         it("does not parse room alias with too many separators", () => {
-            const test = "" + char + "foo:::bar.com";
+            const test = char + "foo:::bar.com";
             expect(isLinkable(test)).toEqual(false);
             const found = findLinksInString(test);
             expect(found).toEqual([
@@ -317,7 +316,7 @@ describe("linkify-matrix", () => {
             ]);
         });
         it("properly parses room alias with hyphen in domain part", () => {
-            const test = "" + char + "foo:bar.com-baz.com";
+            const test = char + "foo:bar.com-baz.com";
             expect(isLinkable(test)).toEqual(true);
             const found = findLinksInString(test);
             expect(found).toEqual([
diff --git a/packages/shared-components/src/core/utils/linkify.ts b/packages/shared-components/src/core/utils/linkify.ts
index c4d5caeea9..d41cb1b1d8 100644
--- a/packages/shared-components/src/core/utils/linkify.ts
+++ b/packages/shared-components/src/core/utils/linkify.ts
@@ -90,13 +90,11 @@ function parseOpaqueIdsToMatrixIds({
     const additionalDomainpartTokens = [HYPHEN];
 
     const matrixToken = linkifyjs.createTokenClass(name, { isLink: true });
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const matrixTokenState = new linkifyjs.State(matrixToken) as any as linkifyjs.State<linkifyjs.MultiToken>; // linkify doesn't appear to type this correctly
 
     const matrixTokenWithPort = linkifyjs.createTokenClass(name, { isLink: true });
     const matrixTokenWithPortState = new linkifyjs.State(
         matrixTokenWithPort,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ) as any as linkifyjs.State<linkifyjs.MultiToken>; // linkify doesn't appear to type this correctly
 
     const initialState = parser.start.tt(token);
@@ -153,7 +151,7 @@ export interface LinkedTextOptions {
  * Generates a linkifyjs options object that is reasonably paired down
  * to just the essentials required for an Element client.
  *
- * @return A `linkifyjs` `Opts` object. Used by `linkifyString` and `linkifyHtml
+ * @returns A `linkifyjs` `Opts` object. Used by `linkifyString` and `linkifyHtml
  * @see {@link linkifyHtml}
  * @see {@link linkifyString}
  */
diff --git a/packages/shared-components/src/core/viewmodel/useCreateAutoDisposedViewModel.ts b/packages/shared-components/src/core/viewmodel/useCreateAutoDisposedViewModel.ts
index a3b4fce3eb..fa32ae6f4f 100644
--- a/packages/shared-components/src/core/viewmodel/useCreateAutoDisposedViewModel.ts
+++ b/packages/shared-components/src/core/viewmodel/useCreateAutoDisposedViewModel.ts
@@ -60,7 +60,6 @@ export function useCreateAutoDisposedViewModel<B extends BaseViewModel<unknown,
          * Or to put it in another way, the only reason to use this hook is to create/dispose the view-model
          * and that is something that should only happen at the start/end of the lifecycle of this component.
          */
-        // eslint-disable-next-line react-compiler/react-compiler
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
diff --git a/packages/shared-components/src/core/viewmodel/useViewModel.ts b/packages/shared-components/src/core/viewmodel/useViewModel.ts
index 9a5a9a8662..ef7b8ec0da 100644
--- a/packages/shared-components/src/core/viewmodel/useViewModel.ts
+++ b/packages/shared-components/src/core/viewmodel/useViewModel.ts
@@ -14,7 +14,7 @@ import { type ViewModel } from "./ViewModel";
  * @param vm The view model to use
  * @returns The current snapshot
  */
-export function useViewModel<T>(vm: ViewModel<T, unknown>): T {
+export function useViewModel<T>(vm: ViewModel<T>): T {
     // We need to pass the same getSnapshot function as getServerSnapshot as this
     // is used when making the HTML chat export.
     return useSyncExternalStore(vm.subscribe, vm.getSnapshot, vm.getSnapshot);
diff --git a/packages/shared-components/src/crypto/SasEmoji/SasEmoji.tsx b/packages/shared-components/src/crypto/SasEmoji/SasEmoji.tsx
index bc9ae90185..4cbcc5e910 100644
--- a/packages/shared-components/src/crypto/SasEmoji/SasEmoji.tsx
+++ b/packages/shared-components/src/crypto/SasEmoji/SasEmoji.tsx
@@ -31,6 +31,7 @@ export function SasEmoji({ emoji, className }: Props): JSX.Element {
     const { language } = useI18n();
 
     const emojiBlocks = emoji.map((emoji, i) => (
+        // oxlint-disable-next-line react/no-array-index-key
         <div className={styles.segment} key={i}>
             <div className={styles.emoji} aria-hidden={true}>
                 {emoji}
diff --git a/packages/shared-components/src/i18n/strings/cs.json b/packages/shared-components/src/i18n/strings/cs.json
index 0b475e803c..a3a2fef498 100644
--- a/packages/shared-components/src/i18n/strings/cs.json
+++ b/packages/shared-components/src/i18n/strings/cs.json
@@ -41,6 +41,9 @@
         "preferences": "Předvolby",
         "state_encryption_enabled": "Experimentální šifrování stavu povoleno"
     },
+    "devtools": {
+        "toggle_event": "přepnout událost"
+    },
     "keyboard": {
         "shift": "Shift"
     },
@@ -48,6 +51,15 @@
         "open_dial_pad": "Otevřít číselník",
         "separator_label": "Kliknutím nebo přetažením rozbalíte"
     },
+    "menus": {
+        "user_menu": {
+            "create_an_account": "Vytvořit účet",
+            "got_an_account": "Máte účet?",
+            "manage_account": "Spravovat účet",
+            "sign_in": "Přihlásit se",
+            "title": "Uživatelská nabídka"
+        }
+    },
     "notifications": {
         "all_messages": "Všechny zprávy",
         "default_settings": "Shoda s výchozím nastavením",
@@ -101,15 +113,14 @@
             "voice_call": "Otevřete místnost %(roomName)s pomocí hlasového hovoru."
         },
         "appearance": "Vzhled",
+        "chat_moved": "Chat byl přesunut",
+        "collapse_all_sections": "Sbalit všechny sekce",
         "collapse_filters": "Sbalit seznam filtrů",
         "empty": {
             "no_chats": "Zatím žádné chaty",
             "no_chats_description": "Začněte tím, že někomu pošlete zprávu nebo vytvoříte místnost",
             "no_chats_description_no_room_rights": "Začněte tím, že někomu napíšete zprávu",
-            "no_favourites": "Zatím nemáte žádné oblíbené chaty",
-            "no_favourites_description": "Chat si můžete přidat do oblíbených v nastavení chatu",
             "no_invites": "Nemáte žádné nepřečtené pozvánky",
-            "no_lowpriority": "Nemáte žádné místnosti s nízkou prioritou",
             "no_mentions": "Nemáte žádné nepřečtené zmínky",
             "no_people": "Zatím s nikým nemáte přímé chaty",
             "no_people_description": "Můžete zrušit výběr filtrů, abyste viděli ostatní chaty",
@@ -119,6 +130,7 @@
             "show_activity": "Zobrazit veškerou aktivitu",
             "show_chats": "Zobrazit všechny chaty"
         },
+        "expand_all_sections": "Rozbalit všechny sekce",
         "expand_filters": "Rozbalit seznam filtrů",
         "filters": {
             "favourite": "Oblíbené",
@@ -148,6 +160,9 @@
         "room_options": "Možnosti místnosti",
         "section_created": "Sekce vytvořena",
         "section_header": {
+            "edit_section": "Upravit sekci",
+            "more_options": "Další možnosti",
+            "remove_section": "Odstranit sekci",
             "toggle": "Přepnout %(section)s sekci",
             "toggle_unread": "Přepnout sekci %(section)s s nepřečtenými místnostmi"
         },
@@ -186,6 +201,14 @@
         "n_minutes_ago": "před %(num)s minutami"
     },
     "timeline": {
+        "call_tile": {
+            "declined": {
+                "call_declined": "Hovor odmítnut",
+                "call_declined_by_us": "Odmítli jste hovor"
+            },
+            "video_call_title": "Videohovor",
+            "voice_call_title": "Hlasový hovor"
+        },
         "decryption_failure": {
             "blocked": "Odesílatel vám zablokoval příjem této zprávy, protože vaše zařízení není ověřeno",
             "historical_event_no_key_backup": "Historické zprávy nejsou na tomto zařízení k dispozici",
@@ -197,6 +220,7 @@
         },
         "download_action_decrypting": "Dešifrování",
         "download_action_downloading": "Stahování",
+        "e2e_state": "Stav koncového šifrování",
         "m.audio": {
             "audio_player": "Audio přehrávač",
             "error_downloading_audio": "Chyba při stahování audia",
@@ -205,6 +229,10 @@
         "m.file": {
             "error_invalid": "Neplatný soubor"
         },
+        "m.room.avatar": {
+            "changed_img": "%(senderDisplayName)s změnil(a) avatar místnosti na <img/>",
+            "removed": "%(senderDisplayName)s odstranil(a) avatar místnosti."
+        },
         "m.room.encryption": {
             "disable_attempt": "Ignorovaný pokus o deaktivaci šifrování",
             "disabled": "Šifrování není povoleno",
@@ -222,10 +250,17 @@
             "label": "Akce zprávy",
             "view_in_room": "Zobrazit v místnosti"
         },
+        "message_shared_by": "%(displayName)s (%(userId)s) sdílel(a) tuto zprávu v době, kdy jste nebyli v místnosti.",
         "message_timestamp_received_at": "Přijato: %(dateTime)s",
         "message_timestamp_sent_at": "Odesláno: %(dateTime)s",
+        "mjolnir": {
+            "message_hidden": "Tohoto uživatele ignorujete, takže jsou jeho zprávy skryté. <a>Přesto zobrazit.</a>"
+        },
+        "pending_moderation": "Zpráva čeká na moderaci",
+        "pending_moderation_reason": "Zpráva čeká na moderaci: %(reason)s",
         "url_preview": {
             "close": "Zavřít náhled",
+            "open_link": "Otevřít odkaz",
             "show_n_more": {
                 "one": "Zobrazit %(count)s další náhled",
                 "few": "Zobrazit %(count)s další náhledy",
@@ -234,6 +269,13 @@
             "view_image": "Zobrazit obrázek"
         }
     },
+    "user_menu": {
+        "link_new_device": "Připojit nové zařízení",
+        "open_feedback": "Zpětná vazba",
+        "open_home": "Domov",
+        "open_security": "Zabezpečení a soukromí",
+        "open_settings": "Všechna nastavení"
+    },
     "widget": {
         "context_menu": {
             "move_left": "Posunout doleva",
diff --git a/packages/shared-components/src/i18n/strings/cy.json b/packages/shared-components/src/i18n/strings/cy.json
index c459c55e97..7737ceb7b9 100644
--- a/packages/shared-components/src/i18n/strings/cy.json
+++ b/packages/shared-components/src/i18n/strings/cy.json
@@ -67,10 +67,7 @@
             "no_chats": "Dim sgyrsiau eto",
             "no_chats_description": "Dechreuwch drwy anfon neges at rywun neu drwy greu ystafell",
             "no_chats_description_no_room_rights": "Dechreuwch drwy anfon neges at rywun",
-            "no_favourites": "Does gennych chi ddim hoff sgyrsiau eto",
-            "no_favourites_description": "Gallwch ychwanegu sgwrs at eich ffefrynnau yn y gosodiadau sgwrsio",
             "no_invites": "Does gennych chi ddim gwahoddiadau heb eu darllen",
-            "no_lowpriority": "Does gennych chi ddim ystafelloedd blaenoriaeth isel",
             "no_mentions": "Does gennych chi ddim crybwylliadau heb eu darllen",
             "no_people": "Does gennych chi ddim sgyrsiau uniongyrchol gydag unrhyw un eto",
             "no_people_description": "Gallwch ddad-ddewis hidlwyr er mwyn gweld eich sgyrsiau eraill",
diff --git a/packages/shared-components/src/i18n/strings/de_DE.json b/packages/shared-components/src/i18n/strings/de_DE.json
index 1983bf5744..b451f510ad 100644
--- a/packages/shared-components/src/i18n/strings/de_DE.json
+++ b/packages/shared-components/src/i18n/strings/de_DE.json
@@ -72,10 +72,7 @@
             "no_chats": "Bisher keine Chats",
             "no_chats_description": "Lege los, indem du jemandem schreibst oder eine Gruppe erstellst",
             "no_chats_description_no_room_rights": "Lege los, indem du jemandem schreibst",
-            "no_favourites": "Du hast noch keine Chats als Favorit markiert",
-            "no_favourites_description": "In den Chat Einstellungen kannst du einen Chat als Favorit markieren",
             "no_invites": "Du hast keine ungelesenen Einladungen",
-            "no_lowpriority": "Du hast keine Chats mit niedriger Priorität.",
             "no_mentions": "Du hast keine ungelesenen Erwähnungen",
             "no_people": "Du hast noch keine Direktnachrichten",
             "no_people_description": "Wähle Filter ab, um Chats zu sehen.",
diff --git a/packages/shared-components/src/i18n/strings/en_EN.json b/packages/shared-components/src/i18n/strings/en_EN.json
index 3bb8915e14..a661272f26 100644
--- a/packages/shared-components/src/i18n/strings/en_EN.json
+++ b/packages/shared-components/src/i18n/strings/en_EN.json
@@ -4,6 +4,7 @@
     },
     "action": {
         "back": "Back",
+        "cancel": "Cancel",
         "click": "Click",
         "close": "Close",
         "collapse": "Collapse",
@@ -28,6 +29,7 @@
         "reply": "Reply",
         "reply_in_thread": "Reply in thread",
         "retry": "Retry",
+        "save": "Save",
         "search": "Search",
         "start_chat": "Start chat",
         "unpin": "Unpin",
@@ -41,6 +43,26 @@
         "preferences": "Preferences",
         "state_encryption_enabled": "Experimental state encryption enabled"
     },
+    "devtools": {
+        "toggle_event": "toggle event"
+    },
+    "emoji": {
+        "categories": "Categories",
+        "category_activities": "Activities",
+        "category_animals_nature": "Animals & Nature",
+        "category_flags": "Flags",
+        "category_food_drink": "Food & Drink",
+        "category_frequently_used": "Frequently Used",
+        "category_objects": "Objects",
+        "category_smileys_people": "Smileys & People",
+        "category_symbols": "Symbols",
+        "category_travel_places": "Travel & Places",
+        "quick_reactions": "Quick Reactions"
+    },
+    "emoji_picker": {
+        "cancel_search_label": "Cancel search",
+        "emoji_picker": "Emoji picker"
+    },
     "keyboard": {
         "shift": "Shift"
     },
@@ -50,6 +72,7 @@
     },
     "menus": {
         "user_menu": {
+            "clear_status": "Clear",
             "create_an_account": "Create an account",
             "got_an_account": "Got an account?",
             "manage_account": "Manage account",
@@ -60,9 +83,16 @@
     "notifications": {
         "all_messages": "All messages",
         "default_settings": "Match default settings",
+        "mark_all_read": "Mark all as read",
         "mentions_keywords": "Mentions and keywords",
+        "message_didnt_send": "Message didn't send. Click for info.",
         "mute_room": "Mute room"
     },
+    "release_announcement": {
+        "room_list_section_close": "Ok",
+        "room_list_section_description": " Group your chats into sections to keep conversations organised and easy to navigate.",
+        "room_list_section_title": "Introducing Sections"
+    },
     "room": {
         "context_menu": {
             "title": "Room options"
@@ -72,9 +102,12 @@
             "shared": "New members see history",
             "world_readable": "Anyone can see history"
         },
+        "jump_read_marker": "Jump to first unread message.",
+        "jump_to_bottom_button": "Scroll to most recent messages",
         "jump_to_date": "Jump to date",
         "jump_to_date_beginning": "The beginning of the room",
         "jump_to_date_prompt": "Pick a date to jump to",
+        "knock_sent": "Request to join sent",
         "pinned_message_badge": "Pinned message",
         "status_bar": {
             "delete_all": "Delete all",
@@ -94,6 +127,17 @@
     "room_list": {
         "a11y": {
             "default": "Open room %(roomName)s",
+            "drag_cancelled": "Dragging cancelled",
+            "drag_end": "%(source)s was dropped on %(target)s",
+            "drag_end_after": "%(source)s was dropped after %(target)s",
+            "drag_end_before": "%(source)s was dropped before %(target)s",
+            "drag_end_original": "%(source)s returned to its original position",
+            "drag_instructions": "Press space to start or to stop dragging, arrow keys to move, and escape to cancel.",
+            "drag_over": "%(source)s is over %(target)s",
+            "drag_over_after": "%(source)s will be dropped after %(target)s",
+            "drag_over_before": "%(source)s will be dropped before %(target)s",
+            "drag_over_original": "%(source)s will return to its original position",
+            "drag_start": "Dragging %(source)s",
             "invitation": "Open room %(roomName)s invitation.",
             "mention": {
                 "one": "Open room %(roomName)s with 1 unread mention.",
@@ -115,10 +159,7 @@
             "no_chats": "No chats yet",
             "no_chats_description": "Get started by messaging someone or by creating a room",
             "no_chats_description_no_room_rights": "Get started by messaging someone",
-            "no_favourites": "You don't have favourite chats yet",
-            "no_favourites_description": "You can add a chat to your favourites in the chat settings",
             "no_invites": "You don't have any unread invites",
-            "no_lowpriority": "You don't have any low priority rooms",
             "no_mentions": "You don't have any unread mentions",
             "no_people": "You don’t have direct chats with anyone yet",
             "no_people_description": "You can deselect filters in order to see your other chats",
@@ -147,7 +188,8 @@
             "low_priority": "Low priority",
             "mark_read": "Mark as read",
             "mark_unread": "Mark as unread",
-            "move_to_section": "Move to"
+            "move_to_section": "Move to",
+            "remove_from_section": "Remove from section"
         },
         "notification_options": "Notification options",
         "open_space_menu": "Open space menu",
@@ -162,7 +204,7 @@
             "more_options": "More options",
             "remove_section": "Remove section",
             "toggle": "Toggle %(section)s section",
-            "toggle_unread": "Toggle %(section)s section with unread room(s)"
+            "toggle_unread": "Toggle %(section)s section with unread rooms"
         },
         "show_message_previews": "Show message previews",
         "sort": "Sort",
@@ -174,6 +216,19 @@
         "space_menu": {
             "home": "Space home",
             "space_settings": "Space settings"
+        },
+        "unread_messages": "Unread messages"
+    },
+    "status": {
+        "set_status": {
+            "away": "Away",
+            "be_right_back": "Be right back",
+            "choose_emoji": "Choose Emoji",
+            "custom": "Custom…",
+            "focus_time": "Focus Time",
+            "in_a_meeting": "In a meeting",
+            "on_the_road": "On the road",
+            "set_status_prompt": "What's your status?"
         }
     },
     "terms": {
@@ -199,6 +254,36 @@
         "n_minutes_ago": "%(num)s minutes ago"
     },
     "timeline": {
+        "call_tile": {
+            "declined": {
+                "call_declined": "Call declined",
+                "call_declined_by_us": "You declined a call"
+            },
+            "ongoing": {
+                "common": {
+                    "call_started_by": "%(startedByDisplayName)s started a call",
+                    "join_button": "Join"
+                },
+                "dm": {
+                    "call_started": "Call started",
+                    "title": "Call in progress"
+                },
+                "room": {
+                    "join_count": {
+                        "one": "%(count)s joined",
+                        "other": "%(count)s joined"
+                    },
+                    "title": "Group call in progress"
+                }
+            },
+            "tombstone": {
+                "room": {
+                    "title": "Group call ended"
+                }
+            },
+            "video_call_title": "Video call",
+            "voice_call_title": "Voice call"
+        },
         "decryption_failure": {
             "blocked": "The sender has blocked you from receiving this message because your device is unverified",
             "historical_event_no_key_backup": "Historical messages are not available on this device",
@@ -210,6 +295,7 @@
         },
         "download_action_decrypting": "Decrypting",
         "download_action_downloading": "Downloading",
+        "e2e_state": "State of the end-to-end encryption",
         "m.audio": {
             "audio_player": "Audio player",
             "error_downloading_audio": "Error downloading audio",
@@ -218,6 +304,10 @@
         "m.file": {
             "error_invalid": "Invalid file"
         },
+        "m.room.avatar": {
+            "changed_img": "%(senderDisplayName)s changed the room avatar to<img/>",
+            "removed": "%(senderDisplayName)s removed the room avatar."
+        },
         "m.room.encryption": {
             "disable_attempt": "Ignored attempt to disable encryption",
             "disabled": "Encryption not enabled",
@@ -235,6 +325,7 @@
             "label": "Message Actions",
             "view_in_room": "View in room"
         },
+        "message_shared_by": "%(displayName)s (%(userId)s) shared this message since you were not in the room when it was sent.",
         "message_timestamp_received_at": "Received at: %(dateTime)s",
         "message_timestamp_sent_at": "Sent at: %(dateTime)s",
         "mjolnir": {
diff --git a/packages/shared-components/src/i18n/strings/et.json b/packages/shared-components/src/i18n/strings/et.json
index a44a98f5f1..765c51428f 100644
--- a/packages/shared-components/src/i18n/strings/et.json
+++ b/packages/shared-components/src/i18n/strings/et.json
@@ -17,6 +17,7 @@
         "invite": "Kutsu",
         "new_conversation": "Uus vestlus",
         "new_room": "Uus jututuba",
+        "new_section": "Uus jaotis",
         "new_video_room": "Uus videotuba",
         "open_menu": "Ava menüü",
         "pause": "Peata",
@@ -40,8 +41,42 @@
         "preferences": "Eelistused",
         "state_encryption_enabled": "Katseline olekusündmuste krüptimine on kasutusel"
     },
+    "devtools": {
+        "toggle_event": "lülita sündmus sisse/välja"
+    },
+    "emoji": {
+        "categories": "Kategooriad",
+        "category_activities": "Tegevused",
+        "category_animals_nature": "Loomad ja loodus",
+        "category_flags": "Lipud",
+        "category_food_drink": "Toit ja jook",
+        "category_frequently_used": "Enamkasutatud",
+        "category_objects": "Esemed",
+        "category_smileys_people": "Vigurnäod ja inimesed",
+        "category_symbols": "Sümbolid",
+        "category_travel_places": "Reisimine ja kohad",
+        "quick_reactions": "Reageeri lennult"
+    },
+    "emoji_picker": {
+        "cancel_search_label": "Katkesta otsing",
+        "emoji_picker": "Emojide valija"
+    },
+    "keyboard": {
+        "shift": "Shift"
+    },
     "left_panel": {
-        "open_dial_pad": "Ava numbriklahvistik"
+        "open_dial_pad": "Ava numbriklahvistik",
+        "separator_label": "Laiendamiseks klõpsa või lohista"
+    },
+    "menus": {
+        "user_menu": {
+            "clear_status": "Tühjenda",
+            "create_an_account": "Loo kasutajakonto",
+            "got_an_account": "Kas sul on kasutajakonto juba olemas?",
+            "manage_account": "Halda kasutajakontot",
+            "sign_in": "Logi sisse",
+            "title": "Kasutajamenüü"
+        }
     },
     "notifications": {
         "all_messages": "Kõik sõnumid",
@@ -49,6 +84,11 @@
         "mentions_keywords": "Mainimised ja märksõnad",
         "mute_room": "Summuta jututuba"
     },
+    "release_announcement": {
+        "room_list_section_close": "Sobib",
+        "room_list_section_description": "Võid omi vestlusi grupeerida jaotiste kaupa ning saad hoida vestlused korrastatuna ja hõlpsasti leitavatena.",
+        "room_list_section_title": "Võtame kasutusele jaotised"
+    },
     "room": {
         "context_menu": {
             "title": "Jututoa eelistused"
@@ -60,6 +100,7 @@
         },
         "jump_to_date": "Vaata kuupäeva",
         "jump_to_date_beginning": "Jututoa algus",
+        "jump_to_date_prompt": "Vali kuupäev, mida soovid vaadata",
         "pinned_message_badge": "Esiletõstetud sõnum",
         "status_bar": {
             "delete_all": "Kustuta kõik",
@@ -79,6 +120,17 @@
     "room_list": {
         "a11y": {
             "default": "Ava jututuba: %(roomName)s",
+            "drag_cancelled": "Lohistamine on katkestatud",
+            "drag_end": "„%(source)s“ lohistati asukohta „%(target)s“",
+            "drag_end_after": "„%(source)s“ lohistati „%(target)s“ asukoha taha",
+            "drag_end_before": "„%(source)s“ lohistati „%(target)s“ asukoha ette",
+            "drag_end_original": "„%(source)s“ lohistati algsesse asukohta",
+            "drag_instructions": "Tühikuklahviga saad alustada lohistamist ja lõpetada seda. Nooleklahvid liigutavad kirjet ja Escape-nupp tühistab kogu tegevuse.",
+            "drag_over": "„%(source)s“ asub „%(target)s“ asukoha kohal",
+            "drag_over_after": "„%(source)s“ lohistatakse „%(target)s“ asukoha taha",
+            "drag_over_before": "„%(source)s“ lohistatakse „%(target)s“ asukoha ette",
+            "drag_over_original": "„%(source)s“ lohistatakse algsesse asukohta",
+            "drag_start": "Lohistan: %(source)s",
             "invitation": "Ava %(roomName)s jututoa kutse.",
             "mention": {
                 "one": "Ava %(roomName)s jututuba ühe lugemata mainimisega.",
@@ -93,15 +145,14 @@
             "voice_call": "Ava %(roomName)s jututuba, kus on pooleli häälkõne"
         },
         "appearance": "Välimus",
+        "chat_moved": "Vestlus on tõstetud mujale",
+        "collapse_all_sections": "Ahenda kõik jaotised",
         "collapse_filters": "Ahenda filtriloendit",
         "empty": {
             "no_chats": "Vestlusi veel ei leidu",
             "no_chats_description": "Alusta sellest, et leia mõni vestluspartner või loo oma jututuba",
             "no_chats_description_no_room_rights": "Alusta sellest, et leia mõni vestluspartner",
-            "no_favourites": "Sa pole veel ühtegi vestlust märkinud lemmikuks",
-            "no_favourites_description": "Vestluse saad märkida lemmikuks tema seadistustest",
             "no_invites": "Sul pole lugemata kutseid",
-            "no_lowpriority": "Sul pole ühtegi vähetähtsat jututuba",
             "no_mentions": "Sul pole lugemata mainimisi",
             "no_people": "Sul pole veel ühtegi otsevestlust kellegagi",
             "no_people_description": "Kõikide oma muude vestluste nägemiseks eemalda otsingufiltrid",
@@ -111,6 +162,7 @@
             "show_activity": "Vaata kõiki tegevusi",
             "show_chats": "Näita kõiki vestlusi"
         },
+        "expand_all_sections": "Laienda kõiki jaotisi",
         "expand_filters": "Laienda filtriloendit",
         "filters": {
             "favourite": "Lemmikud",
@@ -128,7 +180,9 @@
             "leave_room": "Lahku jututoast",
             "low_priority": "Vähetähtis",
             "mark_read": "Märgi loetuks",
-            "mark_unread": "Märgi mitteloetuks"
+            "mark_unread": "Märgi mitteloetuks",
+            "move_to_section": "Tõsta teise jaotisse",
+            "remove_from_section": "Eemalda jaotisest"
         },
         "notification_options": "Teavituste eelistused",
         "open_space_menu": "Ava kogukonna menüü",
@@ -137,8 +191,13 @@
             "more_options": "Täiendavad seadistused"
         },
         "room_options": "Jututoa valikud",
+        "section_created": "Jaotis on loodud",
         "section_header": {
-            "more_options": "Täiendavad valikud"
+            "edit_section": "Muuda jaotist",
+            "more_options": "Täiendavad valikud",
+            "remove_section": "Eemalda jaotis",
+            "toggle": "Lülita %(section)s jaotis sisse/välja",
+            "toggle_unread": "Lülita lugemata jututubadega %(section)s jaotis sisse/välja"
         },
         "show_message_previews": "Näita sõnumite eelvaateid",
         "sort": "Järjesta",
@@ -150,11 +209,25 @@
         "space_menu": {
             "home": "Kogukonna avaleht",
             "space_settings": "Kogukonna seadistused"
+        },
+        "unread_messages": "Lugemata sõnumid"
+    },
+    "status": {
+        "set_status": {
+            "away": "Eemal",
+            "be_right_back": "Tulen kohe tagasi",
+            "focus_time": "Keskendumisaeg",
+            "in_a_meeting": "Koosolekul",
+            "on_the_road": "Olen liikumises",
+            "set_status_prompt": "Mis on sinu olek võrgus?"
         }
     },
     "terms": {
         "tac_button": "Vaata üle kasutustingimused"
     },
+    "threads": {
+        "error_start_thread_existing_relation": "Jutulõnga ei saa luua sõnumist, mis juba on jutulõnga osa"
+    },
     "time": {
         "about_day_ago": "umbes päev tagasi",
         "about_hour_ago": "umbes tund aega tagasi",
@@ -172,6 +245,36 @@
         "n_minutes_ago": "%(num)s minutit tagasi"
     },
     "timeline": {
+        "call_tile": {
+            "declined": {
+                "call_declined": "Osapool jättis kõnele vastamata",
+                "call_declined_by_us": "Sa jätsid kõne vastamata"
+            },
+            "ongoing": {
+                "common": {
+                    "call_started_by": "%(startedByDisplayName)s helistas",
+                    "join_button": "Liitu"
+                },
+                "dm": {
+                    "call_started": "Kõne algas",
+                    "title": "Kõne on pooleli"
+                },
+                "room": {
+                    "join_count": {
+                        "one": "%(count)s liituja",
+                        "other": "%(count)s liitujat"
+                    },
+                    "title": "Rühmakõne on pooleli"
+                }
+            },
+            "tombstone": {
+                "room": {
+                    "title": "Grupikõne on lõppenud"
+                }
+            },
+            "video_call_title": "Videokõne",
+            "voice_call_title": "Häälkõne"
+        },
         "decryption_failure": {
             "blocked": "Kuna sinu seade on verifitseerimata, siis saatja on blokeerinud võimaluse, et sa saaksid selle sõnumi",
             "historical_event_no_key_backup": "Varasemad sõnumid pole selles seadmes loetavad",
@@ -183,6 +286,7 @@
         },
         "download_action_decrypting": "Dekrüptin",
         "download_action_downloading": "Laadin alla",
+        "e2e_state": "Läbiva krüptimise olek",
         "m.audio": {
             "audio_player": "Meediaesitaja",
             "error_downloading_audio": "Helifaili allalaadimine ei õnnestunud",
@@ -191,6 +295,10 @@
         "m.file": {
             "error_invalid": "Vigane fail"
         },
+        "m.room.avatar": {
+            "changed_img": "%(senderDisplayName)s muutis jututoa uueks tunnuspildiks: <img/>",
+            "removed": "%(senderDisplayName)s eemaldas jututoa tunnuspildi."
+        },
         "m.room.encryption": {
             "disable_attempt": "Eirasin katset lõpetada krüptimise kasutamine",
             "disabled": "Krüptimine ei ole kasutusel",
@@ -208,14 +316,31 @@
             "label": "Tegevused sõnumitega",
             "view_in_room": "Vaata jututoas"
         },
+        "message_shared_by": "Kuna sa polnud sõnumi saatmise ajal jututoas, siis %(displayName)s (%(userId)s) jagas seda sõnumit sinuga.",
         "message_timestamp_received_at": "Saabumise aeg: %(dateTime)s",
         "message_timestamp_sent_at": "Saatmise aeg: %(dateTime)s",
+        "mjolnir": {
+            "message_hidden": "Sa eirad seda kasutajat, seega on tema sõnum peidetud. <a>Näita seda ikkagi.</a>"
+        },
+        "pending_moderation": "Sõnum on modereerimise ootel",
+        "pending_moderation_reason": "Sõnum on modereerimise ootel: %(reason)s",
         "url_preview": {
             "close": "Sulge eelvaade",
             "open_link": "Ava link",
+            "show_n_more": {
+                "one": "Näita veel %(count)s muud eelvaadet",
+                "other": "Näita veel %(count)s muud eelvaadet"
+            },
             "view_image": "Vaata pilti"
         }
     },
+    "user_menu": {
+        "link_new_device": "Seosta uus seade",
+        "open_feedback": "Tagasiside",
+        "open_home": "Avaleht",
+        "open_security": "Turvalisus ja privaatsus",
+        "open_settings": "Kõik seadistused"
+    },
     "widget": {
         "context_menu": {
             "move_left": "Liigu vasakule",
diff --git a/packages/shared-components/src/i18n/strings/fi.json b/packages/shared-components/src/i18n/strings/fi.json
index d178b17307..f8d3acd71c 100644
--- a/packages/shared-components/src/i18n/strings/fi.json
+++ b/packages/shared-components/src/i18n/strings/fi.json
@@ -34,5 +34,8 @@
             "error_downloading_audio": "Virhe ääntä ladattaessa",
             "unnamed_audio": "Nimetön ääni"
         }
+    },
+    "user_menu": {
+        "link_new_device": "Yhdistä uusi laite"
     }
 }
diff --git a/packages/shared-components/src/i18n/strings/fr.json b/packages/shared-components/src/i18n/strings/fr.json
index 39cc26d6e7..eb19173d9f 100644
--- a/packages/shared-components/src/i18n/strings/fr.json
+++ b/packages/shared-components/src/i18n/strings/fr.json
@@ -4,6 +4,7 @@
     },
     "action": {
         "back": "Retour",
+        "cancel": "Annuler",
         "click": "Clic",
         "close": "Fermer",
         "collapse": "Réduire",
@@ -28,6 +29,7 @@
         "reply": "Répondre",
         "reply_in_thread": "Répondre dans le fil de discussion",
         "retry": "Réessayer",
+        "save": "Enregistrer",
         "search": "Rechercher",
         "start_chat": "Démarrer une discussion",
         "unpin": "Désépingler",
@@ -41,6 +43,26 @@
         "preferences": "Préférences",
         "state_encryption_enabled": "Chiffrement expérimental de l'état activé"
     },
+    "devtools": {
+        "toggle_event": "afficher/masquer l’évènement"
+    },
+    "emoji": {
+        "categories": "Catégories",
+        "category_activities": "Activités",
+        "category_animals_nature": "Animaux et nature",
+        "category_flags": "Drapeaux",
+        "category_food_drink": "Nourriture et boissons",
+        "category_frequently_used": "Utilisé fréquemment",
+        "category_objects": "Objets",
+        "category_smileys_people": "Émoticônes et personnes",
+        "category_symbols": "Symboles",
+        "category_travel_places": "Voyages & lieux",
+        "quick_reactions": "Réactions rapides"
+    },
+    "emoji_picker": {
+        "cancel_search_label": "Annuler la recherche",
+        "emoji_picker": "Sélecteur d'emoji"
+    },
     "keyboard": {
         "shift": "Maj"
     },
@@ -50,6 +72,7 @@
     },
     "menus": {
         "user_menu": {
+            "clear_status": "Effacer",
             "create_an_account": "Créer un compte",
             "got_an_account": "Tu as un compte ?",
             "manage_account": "Gérer le compte",
@@ -61,8 +84,14 @@
         "all_messages": "Tous les messages",
         "default_settings": "Correspondre aux paramètres par défaut",
         "mentions_keywords": "Mentions et mots-clés",
+        "message_didnt_send": "Le message n’a pas été envoyé. Cliquer pour plus d’info.",
         "mute_room": "Rendre le salon muet"
     },
+    "release_announcement": {
+        "room_list_section_close": "OK",
+        "room_list_section_description": " Regroupez vos discussions en sections afin que les conversations restent organisées et faciles à parcourir.",
+        "room_list_section_title": "Introduction des sections"
+    },
     "room": {
         "context_menu": {
             "title": "Options du salon"
@@ -75,6 +104,7 @@
         "jump_to_date": "Aller à la date",
         "jump_to_date_beginning": "Le début du salon",
         "jump_to_date_prompt": "Choisissez vers quelle date aller",
+        "knock_sent": "Demande d’accès envoyée",
         "pinned_message_badge": "Message épinglé",
         "status_bar": {
             "delete_all": "Tout supprimer",
@@ -94,6 +124,17 @@
     "room_list": {
         "a11y": {
             "default": "Ouvrir salon %(roomName)s",
+            "drag_cancelled": "Glisser-déposer annulé",
+            "drag_end": "%(source)s a été déposé sur %(target)s",
+            "drag_end_after": "%(source)s a été déposé sur %(target)s",
+            "drag_end_before": "%(source)s a été déposé avant %(target)s",
+            "drag_end_original": "%(source)s est revenu à sa position initiale",
+            "drag_instructions": "Appuyer sur la barre Espace pour commencer ou arrêter le glisser-déposer, touches fléchées pour déplacer et Échap pour annuler.",
+            "drag_over": "%(source)s est au dessus de %(target)s",
+            "drag_over_after": "%(source)s sera déposé après %(target)s",
+            "drag_over_before": "%(source)s sera déposé avant %(target)s",
+            "drag_over_original": "%(source)s reprendra sa position initiale.",
+            "drag_start": "Glissé %(source)s",
             "invitation": "Ouvrir l'invitation du salon %(roomName)s.",
             "mention": {
                 "one": "Ouvrir le salon %(roomName)s avec 1 mention non lue.",
@@ -115,10 +156,7 @@
             "no_chats": "Pas encore de discussions",
             "no_chats_description": "Commencez par envoyer un message à quelqu'un ou en créant un salon",
             "no_chats_description_no_room_rights": "Commencez par envoyer un message à quelqu'un",
-            "no_favourites": "Vous n'avez pas encore de discussion favorite",
-            "no_favourites_description": "Vous pouvez ajouter une conversation à vos favoris dans les paramètres de discussion",
             "no_invites": "Vous n'avez aucune invitation non lue",
-            "no_lowpriority": "Vous n'avez aucun salon avec une priorité basse",
             "no_mentions": "Vous n'avez aucune mention non lue",
             "no_people": "Vous n'avez encore de discussions",
             "no_people_description": "Veuillez désélectionner des filtres pour voir vos discussions",
@@ -147,7 +185,8 @@
             "low_priority": "Priorité basse",
             "mark_read": "Marquer comme lu",
             "mark_unread": "Marquer comme non lu",
-            "move_to_section": "Déplacer vers"
+            "move_to_section": "Déplacer vers",
+            "remove_from_section": "Supprimer de la section"
         },
         "notification_options": "Paramètres de notifications",
         "open_space_menu": "Ouvrir le menu de l’espace",
@@ -162,7 +201,7 @@
             "more_options": "Plus d’options",
             "remove_section": "Supprimer la section",
             "toggle": "Afficher/masquer la section %(section)s",
-            "toggle_unread": "Afficher ou masquer la section « %(section)s s » contenant un ou plusieurs salon non lus"
+            "toggle_unread": "Afficher ou masquer la section %(section)s avec des salons non lues"
         },
         "show_message_previews": "Afficher les aperçus des messages",
         "sort": "Trier",
@@ -174,6 +213,19 @@
         "space_menu": {
             "home": "Accueil de l’espace",
             "space_settings": "Paramètres de l'espace"
+        },
+        "unread_messages": "Messages non lus"
+    },
+    "status": {
+        "set_status": {
+            "away": "Absent",
+            "be_right_back": "Je reviens tout de suite",
+            "choose_emoji": "Choisissez un emoji",
+            "custom": "Personnalisé…",
+            "focus_time": "Temps de Concentration",
+            "in_a_meeting": "En réunion",
+            "on_the_road": "Sur la route",
+            "set_status_prompt": "Quel est votre statut ?"
         }
     },
     "terms": {
@@ -199,6 +251,36 @@
         "n_minutes_ago": "il y a %(num)s minutes"
     },
     "timeline": {
+        "call_tile": {
+            "declined": {
+                "call_declined": "Appel refusé",
+                "call_declined_by_us": "Vous avez rejeté un appel"
+            },
+            "ongoing": {
+                "common": {
+                    "call_started_by": "%(startedByDisplayName)s a démarré un appel",
+                    "join_button": "Rejoindre"
+                },
+                "dm": {
+                    "call_started": "Appel démarré",
+                    "title": "Appel en cours"
+                },
+                "room": {
+                    "join_count": {
+                        "one": "%(count)s participant",
+                        "other": "%(count)s participants"
+                    },
+                    "title": "Appel de groupe en cours"
+                }
+            },
+            "tombstone": {
+                "room": {
+                    "title": "L'appel de groupe est terminé"
+                }
+            },
+            "video_call_title": "Appel vidéo",
+            "voice_call_title": "Appel audio"
+        },
         "decryption_failure": {
             "blocked": "L'expéditeur vous a empêché de recevoir ce message car votre appareil n'est pas vérifié",
             "historical_event_no_key_backup": "L'historique des messages n'est pas disponible sur cet appareil",
@@ -210,6 +292,7 @@
         },
         "download_action_decrypting": "Déchiffrement",
         "download_action_downloading": "Téléchargement en cours",
+        "e2e_state": "État du chiffrement de bout en bout",
         "m.audio": {
             "audio_player": "Lecteur audio",
             "error_downloading_audio": "Erreur lors du téléchargement de l’audio",
@@ -218,6 +301,10 @@
         "m.file": {
             "error_invalid": "Fichier invalide"
         },
+        "m.room.avatar": {
+            "changed_img": "%(senderDisplayName)s a changé l'avatar du salon en <img/>",
+            "removed": "%(senderDisplayName)s a supprimé l'avatar du salon."
+        },
         "m.room.encryption": {
             "disable_attempt": "Essai de désactiver le chiffrement ignoré",
             "disabled": "Chiffrement désactivé",
@@ -235,8 +322,14 @@
             "label": "Actions de message",
             "view_in_room": "Voir dans le salon"
         },
+        "message_shared_by": "%(displayName)s(%(userId)s ) a partagé ce message car vous n'étiez pas dans le salon lors de son envoi.",
         "message_timestamp_received_at": "Reçu à : %(dateTime)s",
         "message_timestamp_sent_at": "Envoyé à : %(dateTime)s",
+        "mjolnir": {
+            "message_hidden": "Vous avez ignoré cet utilisateur, son message est donc masqué. <a> Afficher quand même. </a>"
+        },
+        "pending_moderation": "Message en attente de modération",
+        "pending_moderation_reason": "Message en attente de modération : %(reason)s",
         "url_preview": {
             "close": "Fermer l’aperçu",
             "open_link": "Ouvrir le lien",
diff --git a/packages/shared-components/src/i18n/strings/hr.json b/packages/shared-components/src/i18n/strings/hr.json
new file mode 100644
index 0000000000..1514e428a0
--- /dev/null
+++ b/packages/shared-components/src/i18n/strings/hr.json
@@ -0,0 +1,341 @@
+{
+    "a11y": {
+        "seek_bar_label": "Traka za traženje zvuka"
+    },
+    "action": {
+        "back": "Natrag",
+        "click": "Klikni",
+        "close": "Zatvori",
+        "collapse": "Sažmi",
+        "delete": "Izbriši",
+        "dismiss": "Odbaci",
+        "download": "Preuzmi",
+        "edit": "Uredi",
+        "explore_rooms": "Pretražuj sobe",
+        "go": "Idi",
+        "hide": "Sakrij",
+        "invite": "Pozovi",
+        "new_conversation": "Novi razgovor",
+        "new_room": "Nova soba",
+        "new_section": "Novi odjeljak",
+        "new_video_room": "Nova videosoba",
+        "open_menu": "Otvori izbornik",
+        "pause": "Pauziraj",
+        "pin": "Prikvači",
+        "play": "Reproduciraj",
+        "react": "Reagiraj",
+        "remove": "Ukloni",
+        "reply": "Odgovori",
+        "reply_in_thread": "Odgovori u niti",
+        "retry": "Pokušaj ponovno",
+        "search": "Pretraži",
+        "start_chat": "Započni razgovor",
+        "unpin": "Otkvači",
+        "view_source": "Prikaži izvor"
+    },
+    "common": {
+        "attachment": "Privitak",
+        "encryption_enabled": "Šifriranje je omogućeno",
+        "loading": "Učitavanje…",
+        "options": "Mogućnosti",
+        "preferences": "Osobne postavke",
+        "state_encryption_enabled": "Omogućeno je eksperimentalno šifriranje stanja"
+    },
+    "devtools": {
+        "toggle_event": "uključi/isključi događaj"
+    },
+    "keyboard": {
+        "shift": "Shift"
+    },
+    "left_panel": {
+        "open_dial_pad": "Otvori brojčanik",
+        "separator_label": "Kliknite ili povucite za proširivanje"
+    },
+    "menus": {
+        "user_menu": {
+            "clear_status": "Očisti",
+            "create_an_account": "Izradi račun",
+            "got_an_account": "Imate li račun?",
+            "manage_account": "Upravljanje računom",
+            "sign_in": "Prijava",
+            "title": "Korisnički izbornik"
+        }
+    },
+    "notifications": {
+        "all_messages": "Sve poruke",
+        "default_settings": "Uskladi zadane postavke",
+        "mentions_keywords": "Spominjanja i ključne riječi",
+        "mute_room": "Utišaj sobu"
+    },
+    "release_announcement": {
+        "room_list_section_close": "U redu",
+        "room_list_section_description": " Grupirajte svoje razgovore u odjeljke kako biste ih organizirali i olakšali navigaciju.",
+        "room_list_section_title": "Predstavljamo odjeljke"
+    },
+    "room": {
+        "context_menu": {
+            "title": "Mogućnosti soba"
+        },
+        "history_visibility_badge": {
+            "private": "Novi članovi ne vide povijest",
+            "shared": "Novi članovi vide povijest",
+            "world_readable": "Svatko može vidjeti povijest"
+        },
+        "jump_to_date": "Skoči na datum",
+        "jump_to_date_beginning": "Početak sobe",
+        "jump_to_date_prompt": "Odaberite datum na koji ćete skočiti",
+        "pinned_message_badge": "Prikvačena poruka",
+        "status_bar": {
+            "delete_all": "Izbriši sve",
+            "exceeded_resource_limit_description": "Za nastavak korištenja usluge obratite se administratoru usluge.",
+            "exceeded_resource_limit_title": "Vaša poruka nije poslana jer je ovaj matični poslužitelj premašio ograničenje resursa.",
+            "failed_to_create_room_title": "Nije moguće započeti razgovor s ovim korisnikom",
+            "homeserver_blocked_title": "Vaša poruka nije poslana jer je administrator blokirao ovaj matični poslužitelj.",
+            "monthly_user_limit_reached_title": "Vaša poruka nije poslana jer je ovaj matični poslužitelj dosegao mjesečno ograničenje aktivnih korisnika.",
+            "requires_consent_agreement_title": "Ne možete slati poruke dok ne pregledate i ne prihvatite naše uvjete i odredbe.",
+            "retry_all": "Pokušaj sve ponovno",
+            "select_messages_to_retry": "Možete odabrati sve ili pojedinačne poruke za ponovni pokušaj ili brisanje",
+            "server_connectivity_lost_description": "Poslane poruke bit će pohranjene dok se veza ponovno ne uspostavi.",
+            "server_connectivity_lost_title": "Izgubljena je veza s poslužiteljem.",
+            "some_messages_not_sent": "Neke od vaših poruka nisu poslane"
+        }
+    },
+    "room_list": {
+        "a11y": {
+            "default": "Otvori sobu %(roomName)s",
+            "drag_cancelled": "Povlačenje je otkazano",
+            "drag_end": "%(source)s je ispušten na %(target)s",
+            "drag_end_after": "%(source)s je ispušten nakon %(target)s",
+            "drag_end_before": "%(source)s je ispušten prije %(target)s",
+            "drag_end_original": "%(source)s se vratio u prvobitni položaj",
+            "drag_instructions": "Pritisnite razmaknicu za početak ili prekid povlačenja, tipke sa strelicama za pomicanje i Escape za otkazivanje.",
+            "drag_over": "%(source)s je iznad %(target)s",
+            "drag_over_after": "%(source)s će se ispustiti nakon %(target)s",
+            "drag_over_before": "%(source)s će se ispustiti prije %(target)s",
+            "drag_over_original": "%(source)s će se vratiti u svoj prvobitni položaj",
+            "drag_start": "Povlačenje %(source)s",
+            "invitation": "Otvorite pozivnicu za sobu %(roomName)s.",
+            "mention": {
+                "one": "Otvorite sobu %(roomName)s s jednim nepročitanim spominjanjem.",
+                "few": "Otvorite sobu %(roomName)s s %(count)s nepročitana spominjanja.",
+                "other": "Otvorite sobu %(roomName)s s %(count)s nepročitanih spominjanja."
+            },
+            "unread": {
+                "one": "Otvorite sobu %(roomName)s s jednom nepročitanom porukom.",
+                "few": "Otvorite sobu %(roomName)s s %(count)s nepročitane poruke.",
+                "other": "Otvorite sobu %(roomName)s s %(count)s nepročitanih poruka."
+            },
+            "unsent_message": "Otvorite sobu %(roomName)s s porukom koja nije poslana.",
+            "video_call": "Otvorite sobu %(roomName)s i pokrenite videopoziv.",
+            "voice_call": "Otvorite sobu %(roomName)s i pokrenite glasovni poziv."
+        },
+        "appearance": "Izgled",
+        "chat_moved": "Razgovor je premješten",
+        "collapse_all_sections": "Sažmi sve odjeljke",
+        "collapse_filters": "Sažmi popis filtara",
+        "empty": {
+            "no_chats": "Još nema razgovora",
+            "no_chats_description": "Započnite tako da nekome pošaljete poruku ili izradite sobu",
+            "no_chats_description_no_room_rights": "Započnite tako da nekome pošaljete poruku",
+            "no_invites": "Nemate nepročitanih pozivnica",
+            "no_mentions": "Nemate nepročitanih spominjanja",
+            "no_people": "Još nemate izravne razgovore ni s kim",
+            "no_people_description": "Možete poništiti odabir filtara kako biste vidjeli ostale razgovore",
+            "no_rooms": "Još niste ni u jednoj sobi",
+            "no_rooms_description": "Možete poništiti odabir filtara kako biste vidjeli ostale razgovore",
+            "no_unread": "Čestitamo! Nemate nepročitanih poruka",
+            "show_activity": "Prikaži sve aktivnosti",
+            "show_chats": "Prikaži sve razgovore"
+        },
+        "expand_all_sections": "Proširi sve odjeljke",
+        "expand_filters": "Proširi popis filtara",
+        "filters": {
+            "favourite": "Favoriti",
+            "invites": "Pozivnice",
+            "low_priority": "Niski prioritet",
+            "mentions": "Spominjanja",
+            "people": "Osobe",
+            "rooms": "Sobe",
+            "unread": "Nepročitano"
+        },
+        "list_title": "Popis soba",
+        "more_options": {
+            "copy_link": "Kopiraj poveznicu na sobu",
+            "favourited": "Označeno kao favorit",
+            "leave_room": "Napusti sobu",
+            "low_priority": "Niski prioritet",
+            "mark_read": "Označi kao pročitano",
+            "mark_unread": "Označi kao nepročitano",
+            "move_to_section": "Premjesti u",
+            "remove_from_section": "Ukloni iz odjeljka"
+        },
+        "notification_options": "Mogućnosti obavijesti",
+        "open_space_menu": "Otvori izbornik prostora",
+        "primary_filters": "Filtri popisa soba",
+        "room": {
+            "more_options": "Više mogućnosti"
+        },
+        "room_options": "Mogućnosti soba",
+        "section_created": "Odjeljak je izrađen",
+        "section_header": {
+            "edit_section": "Uredi odjeljak",
+            "more_options": "Više mogućnosti",
+            "remove_section": "Ukloni odjeljak",
+            "toggle": "Uključi/isključi odjeljak %(section)s",
+            "toggle_unread": "Uključi/isključi odjeljak %(section)s s nepročitanim sobama"
+        },
+        "show_message_previews": "Prikaži pretpreglede poruka",
+        "sort": "Razvrstaj",
+        "sort_type": {
+            "activity": "Najnovija aktivnost",
+            "atoz": "A – Z",
+            "unread_first": "Prvo nepročitano"
+        },
+        "space_menu": {
+            "home": "Početna stranica prostora",
+            "space_settings": "Postavke prostora"
+        },
+        "unread_messages": "Nepročitane poruke"
+    },
+    "status": {
+        "set_status": {
+            "away": "Odsutan/na",
+            "be_right_back": "Odmah se vraćam",
+            "focus_time": "Vrijeme za fokusiranje",
+            "in_a_meeting": "Na sastanku",
+            "on_the_road": "Na putu",
+            "set_status_prompt": "Kakav je tvoj status?"
+        }
+    },
+    "terms": {
+        "tac_button": "Pregledajte uvjete i odredbe"
+    },
+    "threads": {
+        "error_start_thread_existing_relation": "Nije moguće stvoriti nit iz događaja s postojećom povezanosti"
+    },
+    "time": {
+        "about_day_ago": "prije otprilike jednog dana",
+        "about_hour_ago": "prije otprilike sat vremena",
+        "about_minute_ago": "prije otprilike minutu",
+        "few_seconds_ago": "prije nekoliko sekunda",
+        "in_about_day": "otprilike za jedan dan",
+        "in_about_hour": "otprilike za sat vremena",
+        "in_about_minute": "otprilike za minutu",
+        "in_few_seconds": "za nekoliko sekunda",
+        "in_n_days": "%(num)s dana od sada",
+        "in_n_hours": "%(num)s sati od sada",
+        "in_n_minutes": "%(num)s minuta od sada",
+        "n_days_ago": "prije %(num)s dana",
+        "n_hours_ago": "prije %(num)s sati",
+        "n_minutes_ago": "prije %(num)s minuta"
+    },
+    "timeline": {
+        "call_tile": {
+            "declined": {
+                "call_declined": "Poziv je odbijen",
+                "call_declined_by_us": "Odbili ste poziv"
+            },
+            "ongoing": {
+                "common": {
+                    "call_started_by": "%(startedByDisplayName)s započeo/la je poziv",
+                    "join_button": "Pridruži se"
+                },
+                "dm": {
+                    "call_started": "Poziv je započeo",
+                    "title": "Poziv je u tijeku"
+                },
+                "room": {
+                    "join_count": {
+                        "one": "%(count)s se pridružio",
+                        "few": "%(count)s su se pridružila",
+                        "other": "%(count)s se pridružilo"
+                    },
+                    "title": "Grupni poziv je u tijeku"
+                }
+            },
+            "tombstone": {
+                "room": {
+                    "title": "Grupni poziv je završen"
+                }
+            },
+            "video_call_title": "Videopoziv",
+            "voice_call_title": "Glasovni poziv"
+        },
+        "decryption_failure": {
+            "blocked": "Pošiljatelj je blokirao primanje ove poruke jer vaš uređaj nije potvrđen",
+            "historical_event_no_key_backup": "Prijašnje poruke nisu dostupne na ovom uređaju",
+            "historical_event_unverified_device": "Trebate potvrditi ovaj uređaj kako biste mogli pristupiti prijašnjim porukama",
+            "historical_event_user_not_joined": "Nemate pristup ovoj poruci",
+            "sender_identity_previously_verified": "Pošiljateljev potvrđeni identitet je poništen",
+            "sender_unsigned_device": "Poslano s nesigurnog uređaja.",
+            "unable_to_decrypt": "Nije moguće dešifrirati poruku"
+        },
+        "download_action_decrypting": "Dešifriranje",
+        "download_action_downloading": "Preuzimanje",
+        "e2e_state": "Stanje sveobuhvatnog šifriranja",
+        "m.audio": {
+            "audio_player": "Reproduktor zvučnih sadržaja",
+            "error_downloading_audio": "Pogreška pri preuzimanju zvučnog zapisa",
+            "unnamed_audio": "Neimenovani zvučni zapis"
+        },
+        "m.file": {
+            "error_invalid": "Nevažeća datoteka"
+        },
+        "m.room.avatar": {
+            "changed_img": "%(senderDisplayName)s je promijenio/la avatar sobe u <img/>",
+            "removed": "%(senderDisplayName)s uklonio/la je avatar sobe."
+        },
+        "m.room.encryption": {
+            "disable_attempt": "Ignorirani pokušaj onemogućavanja šifriranja",
+            "disabled": "Šifriranje nije omogućeno",
+            "enabled": "Poruke u ovoj sobi sveobuhvatno su šifrirane. Kada se osobe pridruže, možete ih potvrditi u njihovu profilu, tako da samo dodirnete njihovu profilnu sliku.",
+            "enabled_dm": "Ovdje su poruke sveobuhvatno šifrirane. Potvrdite %(displayName)s u njihovu profilu – dodirnite njihovu profilnu sliku.",
+            "enabled_local": "Poruke u ovom razgovoru bit će sveobuhvatno šifrirane.",
+            "parameters_changed": "Neki parametri šifriranja su promijenjeni.",
+            "state_enabled": "Poruke i događaji u ovoj sobi sveobuhvatno su šifrirani. Kada se osobe pridruže, možete ih potvrditi u njihovu profilu, tako da samo dodirnete njihovu profilnu sliku.",
+            "unsupported": "Šifriranje kojim se koristi ova soba nije podržano."
+        },
+        "mab": {
+            "collapse_reply_chain": "Sažmi navode",
+            "copy_link_thread": "Kopiraj poveznicu u nit",
+            "expand_reply_chain": "Proširi navode",
+            "label": "Radnje s porukama",
+            "view_in_room": "Pregled u sobi"
+        },
+        "message_shared_by": "%(displayName)s (%(userId)s) podijelio/la je ovu poruku jer niste bili u sobi kada je poslana.",
+        "message_timestamp_received_at": "Primljeno u: %(dateTime)s",
+        "message_timestamp_sent_at": "Poslano u: %(dateTime)s",
+        "mjolnir": {
+            "message_hidden": "Ignorirali ste ovog korisnika, pa je njegova poruka skrivena.<a> Svejedno prikaži.</a>"
+        },
+        "pending_moderation": "Poruka čeka moderiranje",
+        "pending_moderation_reason": "Poruka čeka moderiranje: %(reason)s",
+        "url_preview": {
+            "close": "Zatvori pretpregled",
+            "open_link": "Otvori poveznicu",
+            "show_n_more": {
+                "one": "Prikaži %(count)s drugi pregled",
+                "few": "Prikaži %(count)s druga pregleda",
+                "other": "Prikaži %(count)s drugih pregleda"
+            },
+            "view_image": "Prikaži sliku"
+        }
+    },
+    "user_menu": {
+        "link_new_device": "Poveži novi uređaj",
+        "open_feedback": "Povratne informacije",
+        "open_home": "Početna stranica",
+        "open_security": "Sigurnost i privatnost",
+        "open_settings": "Sve postavke"
+    },
+    "widget": {
+        "context_menu": {
+            "move_left": "Premjesti ulijevo",
+            "move_right": "Premjesti udesno",
+            "remove": "Ukloni za sve",
+            "revoke": "Poništi dopuštenja",
+            "screenshot": "Fotografiraj",
+            "start_audio_stream": "Pokreni strujanje zvučnog sadržaja"
+        }
+    }
+}
diff --git a/packages/shared-components/src/i18n/strings/hu.json b/packages/shared-components/src/i18n/strings/hu.json
index 530d3c6e54..12ffe94bcc 100644
--- a/packages/shared-components/src/i18n/strings/hu.json
+++ b/packages/shared-components/src/i18n/strings/hu.json
@@ -5,6 +5,7 @@
     "action": {
         "back": "Vissza",
         "click": "Kattintson",
+        "close": "Bezárás",
         "collapse": "Összecsukás",
         "delete": "Törlés",
         "dismiss": "Eltüntetés",
@@ -16,6 +17,7 @@
         "invite": "Meghívás",
         "new_conversation": "Új beszélgetés",
         "new_room": "Új szoba",
+        "new_section": "Új szakasz",
         "new_video_room": "Új videószoba",
         "open_menu": "Menü megnyitása",
         "pause": "Szünet",
@@ -34,10 +36,14 @@
     "common": {
         "attachment": "Melléklet",
         "encryption_enabled": "Titkosítás engedélyezve",
+        "loading": "Betöltés…",
         "options": "Beállítások",
         "preferences": "Beállítások",
         "state_encryption_enabled": "Kísérleti állapottitkosítás engedélyezve"
     },
+    "devtools": {
+        "toggle_event": "esemény be/ki"
+    },
     "keyboard": {
         "shift": "Shift"
     },
@@ -45,12 +51,27 @@
         "open_dial_pad": "Számlap megnyitása",
         "separator_label": "Kattintson vagy húzza az egérrel a kibontáshoz"
     },
+    "menus": {
+        "user_menu": {
+            "clear_status": "Törlés",
+            "create_an_account": "Fiók létrehozása",
+            "got_an_account": "Van már fiókja?",
+            "manage_account": "Fiók kezelése",
+            "sign_in": "Bejelentkezés",
+            "title": "Felhasználói menü"
+        }
+    },
     "notifications": {
         "all_messages": "Összes üzenet",
         "default_settings": "Alapértelmezett beállításoknak megfelelően",
         "mentions_keywords": "Említések és kulcsszavak",
         "mute_room": "Szoba némítása"
     },
+    "release_announcement": {
+        "room_list_section_close": "Rendben",
+        "room_list_section_description": " Csoportosítsa szakaszokba a csevegéseit, hogy a beszélgetések rendezettek és könnyen áttekinthetők legyenek.",
+        "room_list_section_title": "Szakaszok bemutatása"
+    },
     "room": {
         "context_menu": {
             "title": "Szobabeállítások"
@@ -82,6 +103,17 @@
     "room_list": {
         "a11y": {
             "default": "%(roomName)s szoba megnyitása",
+            "drag_cancelled": "Húzás megszakítva",
+            "drag_end": "A(z) %(source)s ide lett dobva: %(target)s",
+            "drag_end_after": "A(z) %(source)s a(z) %(target)s után lett dobva",
+            "drag_end_before": "A(z) %(source)s a(z) %(target)s elé lett dobva",
+            "drag_end_original": "A(z) %(source)s visszakerült az eredeti helyére",
+            "drag_instructions": "A húzás megkezdéséhez vagy leállításához nyomja meg a Szóköz billentyűt, a mozgatáshoz használja a nyílgombokat, a megszakításhoz pedig az Escape billentyűt.",
+            "drag_over": "A(z) %(source)s efölött van: %(target)s",
+            "drag_over_after": "A(z) %(source)s a(z) %(target)s mögé lesz dobva",
+            "drag_over_before": "A(z) %(source)s a(z) %(target)s elé lesz dobva",
+            "drag_over_original": "A(z) %(source)s visszakerül az eredeti helyére",
+            "drag_start": "A(z) %(source)s húzása",
             "invitation": "%(roomName)s szoba meghívásának megnyitása.",
             "mention": {
                 "one": "%(roomName)s szoba megnyitása 1 megemlítéssel.",
@@ -96,15 +128,14 @@
             "voice_call": "Szoba megnyitása hanghívással itt: %(roomName)s"
         },
         "appearance": "Megjelenítés",
+        "chat_moved": "Csevegés áthelyezve",
+        "collapse_all_sections": "Az összes szakasz összecsukása",
         "collapse_filters": "Szűrőlista összecsukása",
         "empty": {
             "no_chats": "Még nincsenek csevegések",
             "no_chats_description": "Kezdje azzal, hogy üzenetet küld valakinek, vagy létrehoz egy szobát",
             "no_chats_description_no_room_rights": "Kezdje azzal, hogy üzenetet küld valakinek",
-            "no_favourites": "Még nincs kedvenc csevegése",
-            "no_favourites_description": "A csevegési beállításokban adhat hozzá csevegést a kedvencekhez",
             "no_invites": "Nincs olvasatlan meghívója",
-            "no_lowpriority": "Nincs alacsony prioritású szobája",
             "no_mentions": "Nincs olvasatlan említése",
             "no_people": "Még nincs közvetlen csevegése senkivel",
             "no_people_description": "Kikapcsolhatja a szűrőket a többi csevegés megtekintéséhez",
@@ -114,6 +145,7 @@
             "show_activity": "Összes tevékenység megtekintése",
             "show_chats": "Összes csevegés megjelenítése"
         },
+        "expand_all_sections": "Az összes szakasz kibontása",
         "expand_filters": "Szűrőlista kibontása",
         "filters": {
             "favourite": "Kedvencek",
@@ -131,7 +163,9 @@
             "leave_room": "Szoba elhagyása",
             "low_priority": "Alacsony prioritás",
             "mark_read": "Megjelölés olvasottként",
-            "mark_unread": "Megjelölés olvasatlanként"
+            "mark_unread": "Megjelölés olvasatlanként",
+            "move_to_section": "Áthelyezés ide:",
+            "remove_from_section": "Eltávolítás a szakaszból"
         },
         "notification_options": "Értesítési beállítások",
         "open_space_menu": "Tér menü megnyitása",
@@ -140,8 +174,13 @@
             "more_options": "További lehetőségek"
         },
         "room_options": "Szobabeállítások",
+        "section_created": "Szakasz létrehozva",
         "section_header": {
-            "toggle": "%(section)s szakasz be/ki"
+            "edit_section": "Szakasz szerkesztése",
+            "more_options": "További beállítások",
+            "remove_section": "Szakasz eltávolítása",
+            "toggle": "%(section)s szakasz be/ki",
+            "toggle_unread": "Olvasatlan szobákat tartalmazó %(section)s szakasz be/ki"
         },
         "show_message_previews": "Üzenetelőnézetek megjelenítése",
         "sort": "Rendezés",
@@ -153,7 +192,8 @@
         "space_menu": {
             "home": "Kezdő tér",
             "space_settings": "Térbeállítások"
-        }
+        },
+        "unread_messages": "Olvasatlan üzenetek"
     },
     "terms": {
         "tac_button": "Általános Szerződési Feltételek elolvasása"
@@ -178,6 +218,14 @@
         "n_minutes_ago": "%(num)s perccel ezelőtt"
     },
     "timeline": {
+        "call_tile": {
+            "declined": {
+                "call_declined": "Hívás elutasítva",
+                "call_declined_by_us": "Elutasított egy hívást"
+            },
+            "video_call_title": "Videóhívás",
+            "voice_call_title": "Hanghívás"
+        },
         "decryption_failure": {
             "blocked": "A feladó megakadályozta, hogy megkapja ezt az üzenetet, mert az eszköze nincs ellenőrizve.",
             "historical_event_no_key_backup": "A korábbi üzenetek nem érhetők el ezen az eszközön",
@@ -189,6 +237,7 @@
         },
         "download_action_decrypting": "Visszafejtés",
         "download_action_downloading": "Letöltés",
+        "e2e_state": "A végpontok közti titkosítás állapota",
         "m.audio": {
             "audio_player": "Hanglejátszó",
             "error_downloading_audio": "Hiba a hang letöltésekor",
@@ -197,6 +246,10 @@
         "m.file": {
             "error_invalid": "Érvénytelen fájl"
         },
+        "m.room.avatar": {
+            "changed_img": "%(senderDisplayName)s erre változtatta a szoba profilképét: <img/>",
+            "removed": "%(senderDisplayName)s törölte a szoba profilképét."
+        },
         "m.room.encryption": {
             "disable_attempt": "A titkosítás kikapcsolására tett kísérlet figyelmen kívül lett hagyva",
             "disabled": "Titkosítás nincs engedélyezve",
@@ -214,10 +267,17 @@
             "label": "Üzenetműveletek",
             "view_in_room": "Megjelenítés a szobában"
         },
+        "message_shared_by": "%(displayName)s (%(userId)s) megosztotta ezt az üzenetet, mivel nem volt a szobában, amikor elküldték.",
         "message_timestamp_received_at": "Érkezett: %(dateTime)s",
         "message_timestamp_sent_at": "Elküldve: %(dateTime)s",
+        "mjolnir": {
+            "message_hidden": "Mellőzte ezt a felhasználót, így az üzenete rejtve van. <a>Megjelenítés mindenképp.</a>"
+        },
+        "pending_moderation": "Moderálásra váró üzenet",
+        "pending_moderation_reason": "Moderálásra váró üzenet: %(reason)s",
         "url_preview": {
             "close": "Előnézet bezárása",
+            "open_link": "Hivatkozás megnyitása",
             "show_n_more": {
                 "one": "%(count)s további előnézet megjelenítése",
                 "other": "%(count)s további előnézet megjelenítése"
@@ -225,6 +285,13 @@
             "view_image": "Kép megtekintése"
         }
     },
+    "user_menu": {
+        "link_new_device": "Új eszköz összekapcsolása",
+        "open_feedback": "Visszajelzés",
+        "open_home": "Kezdőlap",
+        "open_security": "Biztonság és adatvédelem",
+        "open_settings": "Összes beállítás"
+    },
     "widget": {
         "context_menu": {
             "move_left": "Mozgatás balra",
diff --git a/packages/shared-components/src/i18n/strings/ko.json b/packages/shared-components/src/i18n/strings/ko.json
index 012eee6e23..4c6b46a73b 100644
--- a/packages/shared-components/src/i18n/strings/ko.json
+++ b/packages/shared-components/src/i18n/strings/ko.json
@@ -5,6 +5,7 @@
     "action": {
         "back": "돌아가기",
         "click": "클릭",
+        "close": "닫기",
         "collapse": "접기",
         "delete": "삭제",
         "dismiss": "버리기",
@@ -16,6 +17,7 @@
         "invite": "초대",
         "new_conversation": "새로운 대화",
         "new_room": "새로운 방",
+        "new_section": "새로운 섹션",
         "new_video_room": "새로운 비디오룸",
         "open_menu": "메뉴 열기",
         "pause": "일시중지",
@@ -34,10 +36,14 @@
     "common": {
         "attachment": "첨부 파일",
         "encryption_enabled": "암호화 활성화됨",
+        "loading": "로딩 중…",
         "options": "옵션",
         "preferences": "환경설정",
         "state_encryption_enabled": "실험적 상태 암호화가 활성화되었습니다."
     },
+    "devtools": {
+        "toggle_event": "이벤트 토글"
+    },
     "keyboard": {
         "shift": "전환"
     },
@@ -45,6 +51,15 @@
         "open_dial_pad": "다이얼 패드 열기",
         "separator_label": "클릭하거나 드래그하여 확대"
     },
+    "menus": {
+        "user_menu": {
+            "create_an_account": "계정 만들기",
+            "got_an_account": "계정이 있으신가요?",
+            "manage_account": "계정 관리",
+            "sign_in": "로그인",
+            "title": "사용자 메뉴"
+        }
+    },
     "notifications": {
         "all_messages": "모든 메시지",
         "default_settings": "기본 설정 따르기",
@@ -94,15 +109,14 @@
             "voice_call": "%(roomName)s 대화방에서 음성 통화 시작"
         },
         "appearance": "모양",
+        "chat_moved": "채팅이 이동되었습니다",
+        "collapse_all_sections": "모든 섹션 접기",
         "collapse_filters": "필터 목록 접기",
         "empty": {
             "no_chats": "아직 채팅이 없습니다.",
             "no_chats_description": "메시지를 보내거나 방을 만들어 활동을 시작해 보세요.",
             "no_chats_description_no_room_rights": "메시지를 보내 대화를 시작해 보세요.",
-            "no_favourites": "아직 즐겨찾는 채팅방이 없습니다.",
-            "no_favourites_description": "채팅 설정에서 대화를 즐겨찾기에 추가할 수 있습니다.",
             "no_invites": "읽지 않은 초대장이 없습니다",
-            "no_lowpriority": "우선순위가 낮은 방이 없습니다.",
             "no_mentions": "읽지 않은 멘션이 없습니다.",
             "no_people": "아직 대화 중인 상대가 없습니다.",
             "no_people_description": "다른 채팅을 확인하려면 적용된 필터를 해제해 주세요.",
@@ -112,6 +126,7 @@
             "show_activity": "모든 활동 보기",
             "show_chats": "모든 채팅 보기"
         },
+        "expand_all_sections": "모든 섹션 펼치기",
         "expand_filters": "필터 목록 펼치기",
         "filters": {
             "favourite": "즐겨찾기",
@@ -129,7 +144,8 @@
             "leave_room": "방 떠나기",
             "low_priority": "우선순위 낮음",
             "mark_read": "읽음으로 표시",
-            "mark_unread": "읽지 않음으로 표시"
+            "mark_unread": "읽지 않음으로 표시",
+            "move_to_section": "이동"
         },
         "notification_options": "알림 옵션",
         "open_space_menu": "스페이스 메뉴 열기",
@@ -138,8 +154,13 @@
             "more_options": "옵션 더보기"
         },
         "room_options": "채팅방 옵션",
+        "section_created": "섹션 생성됨",
         "section_header": {
-            "toggle": "%(section)s 섹션 전환"
+            "edit_section": "섹션 편집",
+            "more_options": "옵션 더보기",
+            "remove_section": "섹션 제거",
+            "toggle": "%(section)s 섹션 전환",
+            "toggle_unread": "읽지 않은 방이 있는 %(section)s 섹션 접기/펼치기"
         },
         "show_message_previews": "메시지 미리보기 표시",
         "sort": "정렬",
@@ -176,6 +197,14 @@
         "n_minutes_ago": "%(num)s분 전"
     },
     "timeline": {
+        "call_tile": {
+            "declined": {
+                "call_declined": "통화 거절",
+                "call_declined_by_us": "통화를 거절하셨습니다"
+            },
+            "video_call_title": "영상 통화",
+            "voice_call_title": "음성 통화"
+        },
         "decryption_failure": {
             "blocked": "발신자가 귀하의 기기가 인증되지 않았기 때문에 이 메시지를 수신하지 못하도록 차단했습니다.",
             "historical_event_no_key_backup": "이 기기에서는 이전 메시지를 볼 수 없습니다.",
@@ -187,6 +216,7 @@
         },
         "download_action_decrypting": "복호화 중",
         "download_action_downloading": "다운로드 중",
+        "e2e_state": "종단 간 암호화 현황",
         "m.audio": {
             "audio_player": "오디오 플레이어",
             "error_downloading_audio": "오디오 다운로드 중 오류 발생",
@@ -195,6 +225,10 @@
         "m.file": {
             "error_invalid": "잘못된 파일입니다."
         },
+        "m.room.avatar": {
+            "changed_img": "%(senderDisplayName)s님이 방 아바타를 <img/>으로 변경했습니다.",
+            "removed": "%(senderDisplayName)s님이 방 아바타를 삭제했습니다."
+        },
         "m.room.encryption": {
             "disable_attempt": "암호화를 비활성화하려는 시도가 무시되었습니다.",
             "disabled": "암호화가 활성화되지 않았습니다",
@@ -212,16 +246,30 @@
             "label": "메시지 작업",
             "view_in_room": "대화방에서 보기"
         },
+        "message_shared_by": "이 메시지가 전송될 당시 대화방에 계시지 않았기 때문에, %(displayName)s(%(userId)s)님이 이 메시지를 공유했습니다.",
         "message_timestamp_received_at": "수신 시간: %(dateTime)s",
         "message_timestamp_sent_at": "발송 시간: %(dateTime)s",
+        "mjolnir": {
+            "message_hidden": "이 사용자를 무시했습니다. 사용자의 메시지는 숨겨집니다. <a>무시하고 보이기.</a>"
+        },
+        "pending_moderation": "검토 대기 중인 메시지",
+        "pending_moderation_reason": "검토 대기 중인 메시지: %(reason)s",
         "url_preview": {
             "close": "미리보기 닫기",
+            "open_link": "링크 열기",
             "show_n_more": {
                 "other": "외 %(count)s개의 미리보기 더 보기"
             },
             "view_image": "이미지 보기"
         }
     },
+    "user_menu": {
+        "link_new_device": "새 기기 연결",
+        "open_feedback": "피드백",
+        "open_home": "홈",
+        "open_security": "보안 및 개인정보 보호",
+        "open_settings": "모든 설정"
+    },
     "widget": {
         "context_menu": {
             "move_left": "왼쪽으로 이동",
diff --git a/packages/shared-components/src/i18n/strings/nb_NO.json b/packages/shared-components/src/i18n/strings/nb_NO.json
index f75da57c4a..ccba2331c4 100644
--- a/packages/shared-components/src/i18n/strings/nb_NO.json
+++ b/packages/shared-components/src/i18n/strings/nb_NO.json
@@ -75,10 +75,7 @@
             "no_chats": "Ingen chat ennå",
             "no_chats_description": "Kom i gang ved å sende meldinger til noen eller ved å opprette et rom",
             "no_chats_description_no_room_rights": "Kom i gang med å sende meldinger til noen",
-            "no_favourites": "Du har ikke noen favorittchatter ennå.",
-            "no_favourites_description": "Du kan legge til en chat til dine favoritter i chat-innstillingene",
             "no_invites": "Du har ingen uleste invitasjoner",
-            "no_lowpriority": "Du har ingen rom med lav prioritet",
             "no_mentions": "Du har ingen uleste omtaler",
             "no_people": "Du har ikke direkte chatter med noen ennå",
             "no_people_description": "Du kan fjerne filtrene for å se de andre chatene dine",
diff --git a/packages/shared-components/src/i18n/strings/pl.json b/packages/shared-components/src/i18n/strings/pl.json
index 3f4bf32573..f38f092c58 100644
--- a/packages/shared-components/src/i18n/strings/pl.json
+++ b/packages/shared-components/src/i18n/strings/pl.json
@@ -3,18 +3,57 @@
         "seek_bar_label": "Pasek wyszukiwania audio"
     },
     "action": {
+        "back": "Wróć",
+        "click": "Kliknij",
+        "close": "Zamknij",
+        "collapse": "Zwiń",
         "delete": "Usuń",
-        "dismiss": "Pomiń",
+        "dismiss": "Zamknij",
+        "download": "Pobierz",
+        "edit": "Edytuj",
         "explore_rooms": "Przeglądaj pokoje",
+        "go": "Przejdź",
+        "hide": "Ukryj",
+        "invite": "Zaproś",
+        "new_conversation": "Nowa rozmowa",
+        "new_room": "Nowy pokój",
+        "new_section": "Nowa sekcja",
+        "new_video_room": "Nowy pokój wideo",
+        "open_menu": "Otwórz menu",
         "pause": "Wstrzymaj",
+        "pin": "Przypnij",
         "play": "Odtwórz",
-        "search": "Szukaj"
+        "react": "Dodaj reakcję",
+        "remove": "Usuń",
+        "reply": "Odpowiedz",
+        "reply_in_thread": "Odpowiedz w wątku",
+        "retry": "Ponów",
+        "search": "Szukaj",
+        "start_chat": "Rozpocznij czat",
+        "unpin": "Odepnij",
+        "view_source": "Wyświetl źródło"
+    },
+    "common": {
+        "attachment": "Załącznik",
+        "encryption_enabled": "Szyfrowanie włączone",
+        "loading": "Wczytywanie…",
+        "options": "Opcje",
+        "preferences": "Preferencje",
+        "state_encryption_enabled": "Eksperymentalne szyfrowanie włączone"
+    },
+    "devtools": {
+        "toggle_event": "przełącz zdarzenie"
+    },
+    "keyboard": {
+        "shift": "Shift"
     },
     "left_panel": {
-        "open_dial_pad": "Otwórz klawiaturę numeryczną"
+        "open_dial_pad": "Otwórz klawiaturę numeryczną",
+        "separator_label": "Kliknij lub przeciągnij, aby rozwinąć"
     },
     "menus": {
         "user_menu": {
+            "clear_status": "Wyczyść",
             "create_an_account": "Utwórz konto",
             "got_an_account": "Masz już konto?",
             "manage_account": "Zarządzaj kontem",
@@ -22,16 +61,158 @@
             "title": "Menu użytkownika"
         }
     },
+    "notifications": {
+        "all_messages": "Wszystkie wiadomości",
+        "default_settings": "Dopasuj do ustawień domyślnych",
+        "mentions_keywords": "Wzmianki i słowa kluczowe",
+        "mute_room": "Wycisz pokój"
+    },
+    "release_announcement": {
+        "room_list_section_close": "Ok",
+        "room_list_section_description": "Grupuj swoje czaty w sekcje, aby zachować porządek i ułatwić nawigację.",
+        "room_list_section_title": "Przedstawiamy sekcje"
+    },
+    "room": {
+        "context_menu": {
+            "title": "Ustawienia pokoju"
+        },
+        "history_visibility_badge": {
+            "private": "Nowi członkowie nie widzą historii",
+            "shared": "Nowi członkowie widzą historię",
+            "world_readable": "Każdy może zobaczyć historię"
+        },
+        "jump_to_date": "Przeskocz do daty",
+        "jump_to_date_beginning": "Początek pokoju",
+        "jump_to_date_prompt": "Wybierz datę, do której przeskoczyć",
+        "pinned_message_badge": "Przypięta wiadomość",
+        "status_bar": {
+            "delete_all": "Usuń wszystkie",
+            "exceeded_resource_limit_description": "Skontaktuj się ze swoim administratorem, aby móc dalej korzystać z usługi.",
+            "exceeded_resource_limit_title": "Wiadomość nie została wysłana, ponieważ serwer domowy przekroczył swój limit zasobów.",
+            "failed_to_create_room_title": "Nie udało się rozpocząć czatu z tym użytkownikiem",
+            "homeserver_blocked_title": "Wiadomość nie została wysłana, ponieważ serwer domowy został zablokowany przez swojego administratora.",
+            "monthly_user_limit_reached_title": "Wiadomość nie została wysłana, ponieważ serwer domowy osiągnął miesięczny limit aktywnych użytkowników.",
+            "requires_consent_agreement_title": "Nie możesz wysłać żadnej wiadomości, dopóki nie zapoznasz się oraz nie zaakceptujesz naszych obowiązujących zasad.",
+            "retry_all": "Ponów wszystkie",
+            "select_messages_to_retry": "Zaznacz wszystkie lub pojedyncze wiadomości do ponowienia lub usunięcia",
+            "server_connectivity_lost_description": "Wysłane wiadomości będą przechowywane aż do momentu odzyskania połączenia.",
+            "server_connectivity_lost_title": "Utracono połączenie z serwerem.",
+            "some_messages_not_sent": "Niektóre z Twoich wiadomości nie zostały wysłane"
+        }
+    },
     "room_list": {
+        "a11y": {
+            "default": "Otwórz pokój %(roomName)s",
+            "drag_cancelled": "Przeciąganie anulowane",
+            "drag_end": "%(source)s został upuszczony na %(target)s",
+            "drag_end_after": "%(source)s został upuszczony po %(target)s",
+            "drag_end_before": "%(source)s został upuszczony przed %(target)s",
+            "drag_end_original": "%(source)s wrócił do pierwotnego położenia",
+            "drag_instructions": "Kliknij spację, aby rozpocząć przeciąganie, klawisze strzałek do poruszania się i klawisz Esc, by anulować.",
+            "drag_over": "%(source)s jest na %(target)s",
+            "drag_over_after": "%(source)s zostanie upuszczony po %(target)s",
+            "drag_over_before": "%(source)s zostanie upuszczony przed %(target)s",
+            "drag_over_original": "%(source)s wróci do pierwotnej pozycji",
+            "drag_start": "Przeciąganie %(source)s",
+            "invitation": "Otwórz zaproszenie pokoju %(roomName)s.",
+            "mention": {
+                "one": "Otwórz pokój %(roomName)s z 1 nieprzeczytaną wzmianką.",
+                "few": "Otwórz pokój %(roomName)s z %(count)s nieprzeczytanymi wzmiankami.",
+                "many": "Otwórz pokój %(roomName)s z %(count)s nieprzeczytanymi wzmiankami."
+            },
+            "unread": {
+                "one": "Otwórz pokój %(roomName)s z 1 nieprzeczytaną wiadomością.",
+                "few": "Otwórz pokój %(roomName)s z %(count)s nieprzeczytanymi wiadomościami.",
+                "many": "Otwórz pokój %(roomName)s z %(count)s nieprzeczytanymi wiadomościami."
+            },
+            "unsent_message": "Otwórz pokój %(roomName)s z niewysłaną wiadomością.",
+            "video_call": "Otwórz pokój %(roomName)s za pomocą połączenia wideo.",
+            "voice_call": "Otwórz pokój %(roomName)s za pomocą połączenia głosowego."
+        },
+        "appearance": "Wygląd",
         "chat_moved": "Czat przeniesiony",
         "collapse_all_sections": "Zwiń wszystkie sekcje",
+        "collapse_filters": "Zwiń listę filtrów",
+        "empty": {
+            "no_chats": "Nie ma jeszcze żadnych czatów",
+            "no_chats_description": "Zacznij od wysłania wiadomości lub utworzenia pokoju",
+            "no_chats_description_no_room_rights": "Zacznij od wysłania komuś wiadomości",
+            "no_invites": "Nie masz żadnych nieprzeczytanych zaproszeń",
+            "no_mentions": "Nie masz żadnych nieprzeczytanych wzmianek",
+            "no_people": "Nie prowadzisz jeszcze z nikim czatów prywatnych",
+            "no_people_description": "Wyczyść filtry, aby zobaczyć pozostałe czaty",
+            "no_rooms": "Nie jesteś jeszcze w żadnym pokoju",
+            "no_rooms_description": "Wyczyść filtry, aby zobaczyć pozostałe czaty",
+            "no_unread": "Gratulacje! Nie masz żadnych nieprzeczytanych wiadomości.",
+            "show_activity": "Zobacz całą aktywność",
+            "show_chats": "Pokaż wszystkie czaty"
+        },
         "expand_all_sections": "Rozwiń wszystkie sekcje",
+        "expand_filters": "Rozwiń listę filtrów",
+        "filters": {
+            "favourite": "Ulubione",
+            "invites": "Zaproszenia",
+            "low_priority": "Niski priorytet",
+            "mentions": "Wzmianki",
+            "people": "Osoby",
+            "rooms": "Pokoje",
+            "unread": "Nieprzeczytane"
+        },
+        "list_title": "Lista pokojów",
+        "more_options": {
+            "copy_link": "Kopiuj link do pokoju",
+            "favourited": "Ulubione",
+            "leave_room": "Opuść pokój",
+            "low_priority": "Niski priorytet",
+            "mark_read": "Oznacz jako przeczytane",
+            "mark_unread": "Oznacz jako nieprzeczytane",
+            "move_to_section": "Przenieś do",
+            "remove_from_section": "Usuń z sekcji"
+        },
+        "notification_options": "Opcje powiadomień",
+        "open_space_menu": "Otwórz menu przestrzeni",
+        "primary_filters": "Filtry listy pomieszczeń",
+        "room": {
+            "more_options": "Więcej opcji"
+        },
+        "room_options": "Opcje pokoju",
+        "section_created": "Sekcja utworzona",
         "section_header": {
             "edit_section": "Edytuj sekcję",
             "more_options": "Więcej opcji",
-            "remove_section": "Usuń sekcję"
+            "remove_section": "Usuń sekcję",
+            "toggle": "Przełącz sekcję %(section)s",
+            "toggle_unread": "Przełącz sekcję %(section)s z nieprzeczytanymi pokojami"
+        },
+        "show_message_previews": "Pokaż podglądy wiadomości",
+        "sort": "Sortuj",
+        "sort_type": {
+            "activity": "Ostatnia aktywność",
+            "atoz": "A-Z",
+            "unread_first": "Najpierw nieprzeczytane"
+        },
+        "space_menu": {
+            "home": "Strona główna przestrzeni",
+            "space_settings": "Ustawienia przestrzeni"
+        },
+        "unread_messages": "Nieprzeczytane wiadomości"
+    },
+    "status": {
+        "set_status": {
+            "away": "Z dala od urządzenia",
+            "be_right_back": "Zaraz wracam",
+            "focus_time": "W trakcie skupienia",
+            "in_a_meeting": "Na spotkaniu",
+            "on_the_road": "W trasie",
+            "set_status_prompt": "Jaki jest twój status?"
         }
     },
+    "terms": {
+        "tac_button": "Przejrzyj warunki użytkowania"
+    },
+    "threads": {
+        "error_start_thread_existing_relation": "Nie można utworzyć wątku z wydarzenia z istniejącą relacją"
+    },
     "time": {
         "about_day_ago": "około dzień temu",
         "about_hour_ago": "około godziny temu",
@@ -49,25 +230,112 @@
         "n_minutes_ago": "%(num)s minut temu"
     },
     "timeline": {
+        "call_tile": {
+            "declined": {
+                "call_declined": "Połączenie odrzucone",
+                "call_declined_by_us": "Odrzuciłeś połączenie"
+            },
+            "ongoing": {
+                "common": {
+                    "call_started_by": "%(startedByDisplayName)s rozpoczął rozmowę",
+                    "join_button": "Dołącz"
+                },
+                "dm": {
+                    "call_started": "Rozmowa rozpoczęta",
+                    "title": "Trwa połączenie"
+                },
+                "room": {
+                    "join_count": {
+                        "one": "%(count)s dołączył",
+                        "few": "%(count)s dołączyło",
+                        "many": "%(count)s dołączyło"
+                    },
+                    "title": "Trwa połączenie grupowe"
+                }
+            },
+            "tombstone": {
+                "room": {
+                    "title": "Połączenie grupowe zakończone"
+                }
+            },
+            "video_call_title": "Połączenie wideo",
+            "voice_call_title": "Połączenie głosowe"
+        },
+        "decryption_failure": {
+            "blocked": "Nadawca zablokował Ci możliwość otrzymania tej wiadomości, ponieważ Twoje urządzenie nie zostało zweryfikowane",
+            "historical_event_no_key_backup": "Historia wiadomości nie jest dostępna na tym urządzeniu",
+            "historical_event_unverified_device": "Musisz zweryfikować to urządzenie, aby uzyskać dostęp do historii wiadomości",
+            "historical_event_user_not_joined": "Nie masz dostępu do tej wiadomości",
+            "sender_identity_previously_verified": "Zweryfikowana tożsamość cyfrowa nadawcy została zresetowana",
+            "sender_unsigned_device": "Wysłano z niezabezpieczonego urządzenia.",
+            "unable_to_decrypt": "Nie można odszyfrować wiadomości"
+        },
+        "download_action_decrypting": "Rozszyfrowuję",
+        "download_action_downloading": "Pobieranie",
+        "e2e_state": "Stan szyfrowania end-to-end",
         "m.audio": {
             "audio_player": "Odtwarzacz audio",
             "error_downloading_audio": "Wystąpił błąd w trakcie pobierania audio",
             "unnamed_audio": "Audio bez nazwy"
         },
+        "m.file": {
+            "error_invalid": "Nieprawidłowy plik"
+        },
+        "m.room.avatar": {
+            "changed_img": "%(senderDisplayName)s zmienił awatar pokoju na <img/>",
+            "removed": "%(senderDisplayName)s usunął awatar pokoju."
+        },
+        "m.room.encryption": {
+            "disable_attempt": "Zignorowano próbę wyłączenia szyfrowania",
+            "disabled": "Nie włączono szyfrowania",
+            "enabled": "Wiadomości w tym pokoju są szyfrowane end-to-end. Możesz zweryfikować osoby, które dołączą klikając na ich zdjęcie profilowe.",
+            "enabled_dm": "Wiadomości tutaj są szyfrowane end-to-end. Aby zweryfikować profil %(displayName)s - kliknij na zdjęcie profilowe.",
+            "enabled_local": "Wiadomości na tym czacie będą szyfrowane end-to-end.",
+            "parameters_changed": "Niektóre parametry szyfrowania zostały zmienione.",
+            "state_enabled": "Wiadomości i zdarzenia stanowe w tym pokoju są szyfrowane end-to-end. Gdy ktoś dołączy, możesz go zweryfikować klikając na jego zdjęcie profilowe.",
+            "unsupported": "Szyfrowanie wykorzystywane przez ten pokój nie jest obsługiwane."
+        },
+        "mab": {
+            "collapse_reply_chain": "Zwiń cytaty",
+            "copy_link_thread": "Kopiuj link do wątku",
+            "expand_reply_chain": "Rozwiń cytaty",
+            "label": "Działania na wiadomościach",
+            "view_in_room": "Wyświetl w pokoju"
+        },
+        "message_shared_by": "%(displayName)s (%(userId)s) udostępnił tę wiadomość, kiedy nie było Cię w pokoju, gdy została wysłana.",
+        "message_timestamp_received_at": "Odebrano: %(dateTime)s",
+        "message_timestamp_sent_at": "Wysłano: %(dateTime)s",
         "mjolnir": {
             "message_hidden": "Zignorowałeś tego użytkownika, więc jego wiadomość jest ukryta.<a> Pokaż mimo to.</a>"
         },
         "pending_moderation": "Wiadomość oczekuje na moderację",
         "pending_moderation_reason": "Wiadomość oczekuje na moderację: %(reason)s",
         "url_preview": {
-            "open_link": "Otwórz link"
+            "close": "Zamknij podgląd",
+            "open_link": "Otwórz link",
+            "show_n_more": {
+                "one": "Pokaż %(count)s inny podgląd",
+                "few": "Pokaż %(count)s inne podglądy",
+                "many": "Pokaż %(count)s innych podglądów"
+            },
+            "view_image": "Wyświetl obraz"
         }
     },
     "user_menu": {
         "link_new_device": "Powiąż nowe urządzenie",
-        "open_feedback": "Feedback",
+        "open_feedback": "Opinia użytkownika",
         "open_home": "Strona główna",
         "open_security": "Bezpieczeństwo i prywatność",
         "open_settings": "Wszystkie ustawienia"
+    },
+    "widget": {
+        "context_menu": {
+            "move_left": "Przenieś w lewo",
+            "move_right": "Przenieś w prawo",
+            "remove": "Usuń dla wszystkich",
+            "revoke": "Odbierz uprawnienia",
+            "screenshot": "Zrób zdjęcie",
+            "start_audio_stream": "Rozpocznij transmisję audio"
+        }
     }
 }
diff --git a/packages/shared-components/src/i18n/strings/ru.json b/packages/shared-components/src/i18n/strings/ru.json
index fa4fb4a7e8..8889fbc985 100644
--- a/packages/shared-components/src/i18n/strings/ru.json
+++ b/packages/shared-components/src/i18n/strings/ru.json
@@ -37,12 +37,18 @@
         "attachment": "Вложение",
         "encryption_enabled": "Шифрование включено",
         "loading": "Загрузка…",
+        "options": "Опции",
         "preferences": "Настройки",
         "state_encryption_enabled": "Экспериментальное шифрование включено"
     },
     "left_panel": {
         "open_dial_pad": "Открыть панель набора номера"
     },
+    "menus": {
+        "user_menu": {
+            "create_an_account": "Создать учетную запись"
+        }
+    },
     "notifications": {
         "all_messages": "Все сообщения",
         "default_settings": "Соответствует настройкам по умолчанию",
@@ -98,10 +104,7 @@
             "no_chats": "Пока нет чатов",
             "no_chats_description": "Начните с отправки сообщения или создания комнаты",
             "no_chats_description_no_room_rights": "Начните переписку с отправки сообщения",
-            "no_favourites": "У вас пока нет избранных чатов",
-            "no_favourites_description": "Вы можете добавить чат в избранное в настройках чата",
             "no_invites": "У вас нет непросмотренных приглашений",
-            "no_lowpriority": "У вас нет комнат с низким приориетом",
             "no_mentions": "У вас нет непрочитанных упоминаний",
             "no_people": "У вас нет личных чатов",
             "no_people_description": "Вы можете убрать фильтры, чтобы просмотреть свои чаты",
diff --git a/packages/shared-components/src/i18n/strings/uk.json b/packages/shared-components/src/i18n/strings/uk.json
index 9470ff2299..e50892d3ed 100644
--- a/packages/shared-components/src/i18n/strings/uk.json
+++ b/packages/shared-components/src/i18n/strings/uk.json
@@ -3,53 +3,218 @@
         "seek_bar_label": "Панель гортання аудіо"
     },
     "action": {
+        "back": "Назад",
+        "click": "Натисніть",
+        "close": "Закрити",
+        "collapse": "Згорнути",
         "delete": "Видалити",
         "dismiss": "Відхилити",
+        "download": "Завантажити",
         "edit": "Змінити",
         "explore_rooms": "Каталог кімнат",
+        "go": "Далі",
+        "hide": "Сховати",
         "invite": "Запросити",
         "new_conversation": "Нова розмова",
         "new_room": "Нова кімната",
+        "new_section": "Новий розділ",
         "new_video_room": "Нова відеокімната",
         "open_menu": "Відкрити меню",
         "pause": "Призупинити",
+        "pin": "Закріпити",
         "play": "Відтворити",
+        "react": "Відреагувати",
         "remove": "Вилучити",
+        "reply": "Відповісти",
+        "reply_in_thread": "Відповісти в гілці",
         "retry": "Повторити спробу",
         "search": "Пошук",
-        "start_chat": "Розпочати бесіду"
+        "start_chat": "Розпочати бесіду",
+        "unpin": "Відкріпити",
+        "view_source": "Переглянути джерело"
     },
     "common": {
-        "preferences": "Налаштування"
+        "attachment": "Вкладення",
+        "encryption_enabled": "Шифрування ввімкнено",
+        "loading": "Завантаження…",
+        "options": "Параметри",
+        "preferences": "Налаштування",
+        "state_encryption_enabled": "Увімкнено експериментальне шифрування стану"
+    },
+    "emoji": {
+        "categories": "Категорії",
+        "category_activities": "Діяльність",
+        "category_animals_nature": "Тварини та природа",
+        "category_flags": "Прапори",
+        "category_food_drink": "Їжа та напої",
+        "category_frequently_used": "Часто використовувані",
+        "category_objects": "Об'єкти",
+        "category_smileys_people": "Смайлики та люди",
+        "category_symbols": "Символи",
+        "category_travel_places": "Подорожі та місця",
+        "quick_reactions": "Швидкі реакції"
+    },
+    "emoji_picker": {
+        "cancel_search_label": "Скасувати пошук",
+        "emoji_picker": "Панель емоджі"
+    },
+    "keyboard": {
+        "shift": "Shift"
     },
     "left_panel": {
         "open_dial_pad": "Відкрити номеронабирач"
     },
+    "menus": {
+        "user_menu": {
+            "clear_status": "Очистити",
+            "create_an_account": "Створити обліковий запис",
+            "got_an_account": "Маєте обліковий запис?",
+            "manage_account": "Керувати обліковим записом",
+            "sign_in": "Увійти",
+            "title": "Меню користувача"
+        }
+    },
+    "notifications": {
+        "all_messages": "Усі повідомлення",
+        "default_settings": "Згідно з усталеними налаштуваннями",
+        "mentions_keywords": "Згадки та ключові слова",
+        "mute_room": "Вимкнути сповіщення кімнати"
+    },
+    "release_announcement": {
+        "room_list_section_close": "ОК",
+        "room_list_section_description": "Об’єднуйте свої бесіди в розділи, щоб упорядкувати розмови та полегшити навігацію.",
+        "room_list_section_title": "Представляємо розділи"
+    },
     "room": {
         "context_menu": {
             "title": "Параметри кімнати"
         },
+        "history_visibility_badge": {
+            "private": "Нові учасники не бачать історії",
+            "shared": "Нові учасники бачать історію",
+            "world_readable": "Будь-хто може бачити історію"
+        },
+        "jump_to_date": "Перейти до дати",
+        "jump_to_date_beginning": "Початок кімнати",
+        "jump_to_date_prompt": "Виберіть до якої дати перейти",
+        "pinned_message_badge": "Закріплене повідомлення",
         "status_bar": {
             "delete_all": "Видалити все",
-            "server_connectivity_lost_title": "Втрачено зв'язок з сервером."
+            "exceeded_resource_limit_description": "Щоб продовжити користуватися сервісом, зверніться до його адміністратора.",
+            "exceeded_resource_limit_title": "Ваше повідомлення не надіслано, оскільки цей домашній сервер перевищив ліміт ресурсів.",
+            "failed_to_create_room_title": "Не вдалося розпочати бесіду з цим користувачем",
+            "homeserver_blocked_title": "Ваше повідомлення не надіслано, оскільки цей домашній сервер заблокований його адміністратором.",
+            "monthly_user_limit_reached_title": "Ваше повідомлення не надіслано, оскільки цей домашній сервер досяг свого місячного ліміту активних користувачів.",
+            "requires_consent_agreement_title": "Ви не можете надсилати повідомлень, доки не переглянете та не погодитесь з нашими умовами та положеннями.",
+            "retry_all": "Спробувати все ще раз",
+            "select_messages_to_retry": "Ви можете вибрати всі або окремі повідомлення, щоб повторити спробу або видалити",
+            "server_connectivity_lost_description": "Надіслані повідомлення зберігатимуться, доки ваше з’єднання не відновиться.",
+            "server_connectivity_lost_title": "Втрачено зв'язок із сервером.",
+            "some_messages_not_sent": "Деякі з ваших повідомлень не надіслано"
         }
     },
     "room_list": {
+        "a11y": {
+            "default": "Відкрити кімнату %(roomName)s",
+            "drag_cancelled": "Перетягування скасовано",
+            "drag_end_original": "%(source)s повернено у вихідне положення",
+            "invitation": "Відкрити запрошення кімнати %(roomName)s.",
+            "mention": {
+                "one": "Відкрити кімнату %(roomName)s з 1 непрочитаною згадкою.",
+                "few": "Відкрити кімнату %(roomName)s з %(count)s непрочитаними згадками.",
+                "many": "Відкрити кімнату %(roomName)s з %(count)s непрочитаними згадками."
+            },
+            "unread": {
+                "one": "Відкрити кімнату %(roomName)s з 1 непрочитаним повідомленням.",
+                "few": "Відкрити кімнату %(roomName)s з %(count)s непрочитаними повідомленнями.",
+                "many": "Відкрити кімнату %(roomName)s з %(count)s непрочитаними повідомленнями."
+            },
+            "unsent_message": "Відкрити кімнату %(roomName)s з ненадісланим повідомленням.",
+            "video_call": "Відкрити кімнату %(roomName)s за допомогою відеовиклику.",
+            "voice_call": "Відкрити кімнату %(roomName)s за допомогою голосового виклику."
+        },
         "appearance": "Вигляд",
+        "chat_moved": "Бесіду переміщено",
+        "collapse_all_sections": "Згорнути всі розділи",
+        "collapse_filters": "Згорнути список фільтрів",
+        "empty": {
+            "no_chats": "Ще немає бесід",
+            "no_chats_description": "Почніть користування, надіславши комусь повідомлення або створивши кімнату",
+            "no_chats_description_no_room_rights": "Розпочніть користування, написавши комусь повідомлення",
+            "no_invites": "У вас немає непрочитаних запрошень",
+            "no_mentions": "У вас немає непрочитаних згадок",
+            "no_people": "У вас ще немає особистих бесід",
+            "no_people_description": "Ви можете очистити фільтри, щоб побачити інші ваші бесіди",
+            "no_rooms": "Ви ще не долучилися до жодної кімнати",
+            "no_rooms_description": "Ви можете очистити фільтри, щоб побачити інші ваші бесіди",
+            "no_unread": "Вітаємо! У вас немає непрочитаних повідомлень",
+            "show_activity": "Переглянути всю діяльність",
+            "show_chats": "Показати всі бесіди"
+        },
+        "expand_all_sections": "Розгорнути всі розділи",
+        "expand_filters": "Розгорнути список фільтрів",
+        "filters": {
+            "favourite": "Обране",
+            "invites": "Запрошення",
+            "low_priority": "Неважливі",
+            "mentions": "Згадки",
+            "people": "Люди",
+            "rooms": "Кімнати",
+            "unread": "Непрочитані"
+        },
+        "list_title": "Список кімнат",
+        "more_options": {
+            "copy_link": "Копіювати посилання на кімнату",
+            "favourited": "Додано до обраного",
+            "leave_room": "Вийти з кімнати",
+            "low_priority": "Неважливі",
+            "mark_read": "Позначити прочитаним",
+            "mark_unread": "Позначити непрочитаним",
+            "move_to_section": "Перемістити до",
+            "remove_from_section": "Вилучити з розділу"
+        },
+        "notification_options": "Параметри сповіщень",
         "open_space_menu": "Відкрити меню простору",
+        "primary_filters": "Фільтри списку кімнат",
+        "room": {
+            "more_options": "Додаткові параметри"
+        },
         "room_options": "Параметри кімнати",
+        "section_created": "Розділ створено",
+        "section_header": {
+            "edit_section": "Змінити розділ",
+            "more_options": "Додаткові параметри",
+            "remove_section": "Вилучити розділ"
+        },
         "show_message_previews": "Показати попередній перегляд повідомлень",
         "sort": "Сортувати",
         "sort_type": {
-            "activity": "Діяльність",
+            "activity": "Останні дії",
             "atoz": "А-Я",
             "unread_first": "Спочатку непрочитані"
         },
         "space_menu": {
             "home": "Домівка простору",
             "space_settings": "Налаштування простору"
+        },
+        "unread_messages": "Непрочитані повідомлення"
+    },
+    "status": {
+        "set_status": {
+            "away": "Не на місці",
+            "be_right_back": "Зараз повернуся",
+            "focus_time": "Зосереджений(а)",
+            "in_a_meeting": "На зустрічі",
+            "on_the_road": "У дорозі",
+            "set_status_prompt": "Який ваш статус?"
         }
     },
+    "terms": {
+        "tac_button": "Перегляньте умови та положення"
+    },
+    "threads": {
+        "error_start_thread_existing_relation": "Неможливо створити тему на основі події, яка вже має зв’язок"
+    },
     "time": {
         "about_day_ago": "близько доби тому",
         "about_hour_ago": "близько години тому",
@@ -67,19 +232,112 @@
         "n_minutes_ago": "%(num)s хвилин тому"
     },
     "timeline": {
+        "call_tile": {
+            "declined": {
+                "call_declined": "Виклик відхилено",
+                "call_declined_by_us": "Ви відхилили виклик"
+            },
+            "ongoing": {
+                "common": {
+                    "call_started_by": "%(startedByDisplayName)s розпочинає виклик",
+                    "join_button": "Приєднатися"
+                },
+                "dm": {
+                    "call_started": "Виклик розпочато",
+                    "title": "Виклик триває"
+                },
+                "room": {
+                    "join_count": {
+                        "one": "%(count)s приєднується",
+                        "few": "%(count)s приєдналися",
+                        "many": "%(count)s приєдналися"
+                    },
+                    "title": "Триває груповий виклик"
+                }
+            },
+            "tombstone": {
+                "room": {
+                    "title": "Груповий виклик завершено"
+                }
+            },
+            "video_call_title": "Відеовиклик",
+            "voice_call_title": "Голосовий виклик"
+        },
+        "decryption_failure": {
+            "blocked": "Відправник заблокував вам отримання цього повідомлення, оскільки ваш пристрій не звірено",
+            "historical_event_no_key_backup": "Історія повідомлень недоступна на цьому пристрої",
+            "historical_event_unverified_device": "Щоб отримати доступ до історії повідомлень, потрібно звірити цей пристрій",
+            "historical_event_user_not_joined": "Ви не маєте доступу до цього повідомлення",
+            "sender_identity_previously_verified": "Звірена цифрова ідентичність відправника була скинута",
+            "sender_unsigned_device": "Надіслано з незахищеного пристрою.",
+            "unable_to_decrypt": "Не вдалося розшифрувати повідомлення"
+        },
+        "download_action_decrypting": "Розшифрування",
+        "download_action_downloading": "Завантаження",
+        "e2e_state": "Стан наскрізного шифрування",
         "m.audio": {
             "audio_player": "Звуковий програвач",
             "error_downloading_audio": "Помилка завантаження аудіо",
             "unnamed_audio": "Аудіо без назви"
+        },
+        "m.file": {
+            "error_invalid": "Недійсний файл"
+        },
+        "m.room.avatar": {
+            "changed_img": "%(senderDisplayName)s змінює аватар кімнати на <img/>",
+            "removed": "%(senderDisplayName)s вилучає аватар кімнати."
+        },
+        "m.room.encryption": {
+            "disable_attempt": "Знехтувана спроба вимкнути шифрування",
+            "disabled": "Шифрування не ввімкнено",
+            "enabled": "Повідомлення в цій кімнаті наскрізно зашифровані. Коли люди приєднуються, ви можете звірити їх у їхньому профілі, просто торкнувшись зображення профілю.",
+            "enabled_dm": "Повідомлення тут наскрізно зашифровані. Звірте %(displayName)s у їхньому профілі — торкніться їхнього зображення профілю.",
+            "enabled_local": "Повідомлення в цій бесіді будуть захищені наскрізним шифруванням.",
+            "parameters_changed": "Деякі параметри шифрування змінилися.",
+            "state_enabled": "Повідомлення та події стану в цій кімнаті захищені наскрізним шифруванням. Коли люди приєднуються, ви можете звірити їх у їхньому профілі, просто торкнувшись їхнього зображення профілю.",
+            "unsupported": "Шифрування, яке використовується в цій кімнаті, не підтримується."
+        },
+        "mab": {
+            "collapse_reply_chain": "Згорнути цитовані",
+            "copy_link_thread": "Копіювати посилання на гілку",
+            "expand_reply_chain": "Розгорнути цитовані",
+            "label": "Дії з повідомленням",
+            "view_in_room": "Переглянути в кімнаті"
+        },
+        "message_shared_by": "%(displayName)s (%(userId)s) поділилися цим повідомленням, оскільки вас не було в кімнаті, коли його надіслали.",
+        "message_timestamp_received_at": "Отримано: %(dateTime)s",
+        "message_timestamp_sent_at": "Надіслано: %(dateTime)s",
+        "mjolnir": {
+            "message_hidden": "Ви ігноруєте цього користувача, тож його повідомлення приховано. <a>Усе одно показати.</a>"
+        },
+        "pending_moderation": "Повідомлення очікує модерування",
+        "pending_moderation_reason": "Повідомлення очікує модерування: %(reason)s",
+        "url_preview": {
+            "close": "Закрити попередній перегляд",
+            "open_link": "Відкрити посилання",
+            "show_n_more": {
+                "one": "Показати ще %(count)s попередній перегляд",
+                "few": "Показати ще %(count)s попередні перегляди",
+                "many": "Показати ще %(count)s попередні перегляди"
+            },
+            "view_image": "Переглянути зображення"
         }
     },
+    "user_menu": {
+        "link_new_device": "Зв’язати новий пристрій",
+        "open_feedback": "Відгук",
+        "open_home": "Головна",
+        "open_security": "Безпека та приватність",
+        "open_settings": "Усі налаштування"
+    },
     "widget": {
         "context_menu": {
             "move_left": "Перемістити вліво",
             "move_right": "Перемістити вправо",
             "remove": "Вилучити для всіх",
             "revoke": "Відкликати дозволи",
-            "screenshot": "Зробити знімок"
+            "screenshot": "Зробити знімок",
+            "start_audio_stream": "Розпочати аудіотрансляцію"
         }
     }
 }
diff --git a/packages/shared-components/src/i18n/strings/zh_Hans.json b/packages/shared-components/src/i18n/strings/zh_Hans.json
index 4729e5d0e6..181f571a8f 100644
--- a/packages/shared-components/src/i18n/strings/zh_Hans.json
+++ b/packages/shared-components/src/i18n/strings/zh_Hans.json
@@ -4,6 +4,7 @@
     },
     "action": {
         "back": "返回",
+        "cancel": "取消",
         "click": "点击",
         "close": "关闭",
         "collapse": "折叠",
@@ -28,6 +29,7 @@
         "reply": "回复",
         "reply_in_thread": "在消息列中回复",
         "retry": "重试",
+        "save": "保存",
         "search": "搜索",
         "start_chat": "开始聊天",
         "unpin": "取消置顶",
@@ -41,12 +43,30 @@
         "preferences": "偏好",
         "state_encryption_enabled": "实验性的状态加密已启用"
     },
+    "emoji": {
+        "categories": "类别",
+        "category_activities": "节假日",
+        "category_animals_nature": "动物和自然",
+        "category_flags": "旗帜",
+        "category_food_drink": "饮食",
+        "category_frequently_used": "经常使用",
+        "category_objects": "日常物品",
+        "category_smileys_people": "表情和人物",
+        "category_symbols": "符号",
+        "category_travel_places": "文旅景点",
+        "quick_reactions": "快速反应"
+    },
+    "emoji_picker": {
+        "cancel_search_label": "取消搜索",
+        "emoji_picker": "Emoji 选择器"
+    },
     "left_panel": {
         "open_dial_pad": "打开拨号键盘",
         "separator_label": "点击或拖动以展开"
     },
     "menus": {
         "user_menu": {
+            "clear_status": "清除",
             "create_an_account": "创建账户",
             "got_an_account": "已有账户？",
             "manage_account": "管理账户",
@@ -58,8 +78,14 @@
         "all_messages": "所有消息",
         "default_settings": "跟随系统设置",
         "mentions_keywords": "提及与关键词",
+        "message_didnt_send": "消息未发送。点击以获取信息。",
         "mute_room": "静默房间"
     },
+    "release_announcement": {
+        "room_list_section_close": "确定",
+        "room_list_section_description": "分组聊天以便保持对话井然有序并方便浏览。",
+        "room_list_section_title": "“区域”功能已推出"
+    },
     "room": {
         "context_menu": {
             "title": "房间选项"
@@ -72,6 +98,7 @@
         "jump_to_date": "跳转到日期",
         "jump_to_date_beginning": "房间的开头",
         "jump_to_date_prompt": "选择日期以跳转",
+        "knock_sent": "已发送加入申请",
         "pinned_message_badge": "已被置顶的消息",
         "status_bar": {
             "delete_all": "全部删除",
@@ -89,6 +116,30 @@
         }
     },
     "room_list": {
+        "a11y": {
+            "default": "打开房间 %(roomName)s",
+            "drag_cancelled": "拖动已取消",
+            "drag_end": "%(source)s 已被拖动到 %(target)s 之上",
+            "drag_end_after": "%(source)s 已被拖动到 %(target)s 之后",
+            "drag_end_before": "%(source)s 已被拖动到 %(target)s 之前",
+            "drag_end_original": "%(source)s 已恢复到其原始位置",
+            "drag_instructions": "按空格键开始或停止拖动，按方向键移动，按 Esc 键取消。",
+            "drag_over": "%(source)s 位于 %(target)s 之上",
+            "drag_over_after": "%(source)s 将被拖动到 %(target)s 之后",
+            "drag_over_before": "%(source)s 将被拖动到 %(target)s 之前",
+            "drag_over_original": "%(source)s 将恢复到其原始位置",
+            "drag_start": "正在拖动 %(source)s",
+            "invitation": "打开房间 %(roomName)s 的邀请。",
+            "mention": {
+                "other": "打开包含 %(count)s 个未读提及的房间：%(roomName)s。"
+            },
+            "unread": {
+                "other": "打开包含 %(count)s 个未读消息的房间：%(roomName)s。"
+            },
+            "unsent_message": "打开包含尚未发送的消息的房间：%(roomName)s",
+            "video_call": "以视频通话方式打开房间 %(roomName)s。",
+            "voice_call": "以语音通话方式打开房间 %(roomName)s。"
+        },
         "appearance": "外观",
         "chat_moved": "聊天已移动",
         "collapse_all_sections": "折叠所有区域",
@@ -97,10 +148,7 @@
             "no_chats": "暂无聊天",
             "no_chats_description": "首先向人们发送消息或创建房间。",
             "no_chats_description_no_room_rights": "开始向某人发送消息",
-            "no_favourites": "你还没有收藏聊天",
-            "no_favourites_description": "你可以在聊天设置中将聊天添加到收藏夹",
             "no_invites": "你没有任何未读邀请",
-            "no_lowpriority": "你没有任何低优先级房间",
             "no_mentions": "你没有任何未读提及",
             "no_people": "你尚未与任何人私聊",
             "no_people_description": "你可以取消选择筛选条件，以便查看其它聊天记录",
@@ -129,7 +177,8 @@
             "low_priority": "低优先级",
             "mark_read": "设为已读",
             "mark_unread": "设为未读",
-            "move_to_section": "移动到"
+            "move_to_section": "移动到",
+            "remove_from_section": "从区域中移除"
         },
         "notification_options": "通知选项",
         "open_space_menu": "打开空间菜单",
@@ -150,11 +199,25 @@
         "sort": "排序",
         "sort_type": {
             "activity": "活动",
+            "atoz": "A-Z",
             "unread_first": "未读优先"
         },
         "space_menu": {
             "home": "空间主页",
             "space_settings": "空间设置"
+        },
+        "unread_messages": "未读消息"
+    },
+    "status": {
+        "set_status": {
+            "away": "离开",
+            "be_right_back": "马上回来",
+            "choose_emoji": "选择 Emoji",
+            "custom": "自定义…",
+            "focus_time": "专注时间",
+            "in_a_meeting": "正在开会",
+            "on_the_road": "在路上",
+            "set_status_prompt": "你的当前状态？"
         }
     },
     "terms": {
@@ -180,6 +243,35 @@
         "n_minutes_ago": "%(num)s分钟前"
     },
     "timeline": {
+        "call_tile": {
+            "declined": {
+                "call_declined": "通话已被拒接",
+                "call_declined_by_us": "你已拒接来电"
+            },
+            "ongoing": {
+                "common": {
+                    "call_started_by": "%(startedByDisplayName)s 已开始通话",
+                    "join_button": "加入"
+                },
+                "dm": {
+                    "call_started": "通话已开始",
+                    "title": "通话进行中"
+                },
+                "room": {
+                    "join_count": {
+                        "other": "%(count)s 人已加入"
+                    },
+                    "title": "群组通话进行中"
+                }
+            },
+            "tombstone": {
+                "room": {
+                    "title": "群组通话已结束"
+                }
+            },
+            "video_call_title": "视频通话",
+            "voice_call_title": "语音通话"
+        },
         "decryption_failure": {
             "blocked": "由于你的设备未经验证，发件人已阻止你接收此消息。",
             "historical_event_no_key_backup": "消息历史在此设备上不可用",
@@ -191,6 +283,7 @@
         },
         "download_action_decrypting": "正在解密",
         "download_action_downloading": "正在下载",
+        "e2e_state": "端到端加密状态",
         "m.audio": {
             "audio_player": "音频播放器",
             "error_downloading_audio": "下载音频时出错",
@@ -199,6 +292,10 @@
         "m.file": {
             "error_invalid": "无效文件"
         },
+        "m.room.avatar": {
+            "changed_img": "%(senderDisplayName)s 将房间头像更改为 <img/>",
+            "removed": "%(senderDisplayName)s 已移除房间头像。"
+        },
         "m.room.encryption": {
             "disable_attempt": "已忽略尝试禁用加密",
             "disabled": "加密未启用",
@@ -216,6 +313,7 @@
             "label": "消息操作",
             "view_in_room": "在房间中查看"
         },
+        "message_shared_by": "由于此消息在发送时你不位于此房间，%(displayName)s（%(userId)s）共享了此消息。",
         "message_timestamp_received_at": "接收于 %(dateTime)s",
         "message_timestamp_sent_at": "发送于 %(dateTime)s",
         "mjolnir": {
diff --git a/packages/shared-components/src/index.ts b/packages/shared-components/src/index.ts
index 7e69cd9369..2abd8c1bcc 100644
--- a/packages/shared-components/src/index.ts
+++ b/packages/shared-components/src/index.ts
@@ -11,10 +11,16 @@ export * from "./audio/Clock";
 export * from "./audio/PlayPauseButton";
 export * from "./audio/SeekBar";
 export * from "./core/AvatarWithDetails";
+export * from "./core/MemberAvatar/MemberAvatarView.tsx";
+export * from "./core/EmojiPicker";
+export * from "./core/FacePile/FacePileView.tsx";
 export * from "./core/roving";
 export * from "./room/composer/Banner";
+export * from "./room/composer/UploadButton";
+export * from "./room/composer/MessageComposerUrlPreview/index.ts";
 export * from "./crypto/SasEmoji";
 export * from "./menus/UserMenu";
+export * from "./notifications/NotificationBadgeView";
 export * from "./room/timeline/ReadMarker";
 export * from "./room/timeline/EventPresentation";
 export * from "./room/timeline/event-tile/body/EventContentBodyView";
@@ -23,10 +29,12 @@ export * from "./room/timeline/event-tile/body/HiddenMediaPlaceholder";
 export * from "./room/timeline/event-tile/body/RedactedBodyView";
 export * from "./room/timeline/event-tile/body/MFileBodyView";
 export * from "./room/timeline/event-tile/body/MImageBodyView";
+export * from "./room/timeline/event-tile/body/MImageReplyBodyView";
 export * from "./room/timeline/event-tile/body/MjolnirBodyView";
 export * from "./room/timeline/event-tile/body/MVideoBodyView";
 export * from "./room/timeline/event-tile/body/TextualBodyView";
 export * from "./room/timeline/event-tile/body/UnknownBodyView";
+export * from "./room/timeline/event-tile/body/ViewSourceEventView";
 export * from "./room/timeline/event-tile/EventTileView/TileErrorView";
 export * from "./core/pill-input/Pill";
 export * from "./core/pill-input/PillInput";
@@ -36,15 +44,25 @@ export * from "./room/HistoryVisibilityBadge";
 export * from "./room/right-panel/WidgetContextMenuView";
 export * from "./room/timeline/DateSeparatorView";
 export * from "./room/timeline/TimelineSeparator";
+export * from "./room/timeline/TimelineView";
 export * from "./room/timeline/event-tile/actions/ActionBarView";
 export * from "./room/timeline/event-tile/EventTileView/DisambiguatedProfile";
+export * from "./room/timeline/event-tile/EventTileView/E2eMessageSharedIcon";
+export * from "./room/timeline/event-tile/EventTileView/E2ePadlock";
 export * from "./room/timeline/event-tile/EventTileView/EncryptionEventView";
+export * from "./room/timeline/event-tile/EventTileView/EventPreviewView";
+export * from "./room/timeline/event-tile/EventTileView";
+export * from "./room/timeline/event-tile/call";
 export * from "./room/timeline/event-tile/EventTileView/EventTileBubble";
+export * from "./room/timeline/event-tile/EventTileView/MJitsiWidgetEventView";
+export * from "./room/timeline/event-tile/EventTileView/MKeyVerificationRequestView";
 export * from "./room/timeline/event-tile/EventTileView/PinnedMessageBadge";
+export * from "./room/timeline/event-tile/EventTileView/RoomAvatarEventView";
 export * from "./room/timeline/event-tile/EventTileView/TextualEventView";
 export * from "./room/timeline/event-tile/body/AudioPlayerView";
 export * from "./room/timeline/event-tile/body/DecryptionFailureBodyView";
 export * from "./room/timeline/event-tile/body/MediaBody";
+export * from "./room/timeline/event-tile/EventTileView/ThreadSummary";
 export * from "./room/timeline/event-tile/reactions/ReactionsRow";
 export * from "./room/timeline/event-tile/reactions/ReactionsRowButton";
 export * from "./room/timeline/event-tile/reactions/ReactionsRowButtonTooltip";
@@ -55,14 +73,15 @@ export * from "./core/rich-list/RichList";
 export * from "./room-list/RoomListHeaderView";
 export * from "./room-list/RoomListSearchView";
 export * from "./room-list/RoomListView";
-export * from "./room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView";
+export * from "./room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView";
 export * from "./room-list/RoomListPrimaryFilters";
 export * from "./room-list/VirtualizedRoomListView";
 export * from "./room-list/VirtualizedRoomListView/RoomListSectionHeaderView";
-export * from "./room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper";
+export * from "./room-list/VirtualizedRoomListView/RoomListItemWrapper";
 export * from "./core/utils/Box";
 export * from "./core/utils/Flex";
 export * from "./core/utils/LinkedText";
+export * from "./core/utils/Scrollbar";
 export * from "./core/VirtualizedList";
 export * from "./resize";
 
@@ -73,7 +92,12 @@ export * from "./core/utils/humanize";
 export * from "./core/utils/DateUtils";
 export * from "./core/utils/numbers";
 export * from "./core/utils/FormattingUtils";
+export * from "./core/utils/ToastContext";
 export * from "./core/i18n/I18nApi";
 export * from "./core/utils/linkify";
+export type * from "./core/userStatus.ts";
+export * from "./status/SetStatusView";
+export * from "./status/StatusTextView";
+export * from "./status/UserStatusIconView";
 // MVVM
 export * from "./core/viewmodel";
diff --git a/packages/shared-components/src/menus/UserMenu/UserMenu.module.css b/packages/shared-components/src/menus/UserMenu/UserMenu.module.css
index fa3321114a..a518d18e96 100644
--- a/packages/shared-components/src/menus/UserMenu/UserMenu.module.css
+++ b/packages/shared-components/src/menus/UserMenu/UserMenu.module.css
@@ -5,6 +5,13 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
+.wrapper {
+    display: flex;
+    align-items: center;
+    margin-top: var(--cpd-space-3x);
+    margin-bottom: var(--cpd-space-4x);
+}
+
 .container {
     /* As per design, seperator should span whole width. */
     div[role="separator"] {
@@ -14,13 +21,17 @@
     /* Override menu defaults */
     padding-block: 0 !important;
     section.profile {
-        margin: var(--cpd-space-8x) var(--cpd-space-6x);
-        margin-bottom: var(--cpd-space-3x);
+        margin-left: var(--cpd-space-6x);
+        margin-right: var(--cpd-space-6x);
         display: flex;
         flex-direction: column;
         gap: var(--cpd-space-2x);
         > * {
             margin: auto;
+            max-width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            overflow-wrap: break-word;
         }
 
         .displayname {
@@ -28,11 +39,23 @@
             text-align: center;
         }
 
+        .userId {
+            color: var(--cpd-color-text-secondary);
+            text-align: center;
+        }
+
         .createAccount {
             margin-top: var(--cpd-space-1x);
             margin-bottom: var(--cpd-space-2x);
         }
     }
+    .profilePrimary {
+        margin-top: var(--cpd-space-8x);
+        margin-bottom: var(--cpd-space-3x);
+    }
+    .profileSecondary {
+        margin-bottom: var(--cpd-space-4x);
+    }
     section.actions {
         margin: var(--cpd-space-2x) 0;
         margin-bottom: var(--cpd-space-3x);
@@ -47,9 +70,33 @@
     }
 }
 
+.avatarWrapper {
+    position: relative;
+    display: inline-flex;
+    overflow: visible;
+}
+
+.iconStatusEmoji {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    line-height: 1;
+    /* bottom edges aligned with the avatar */
+    bottom: 0;
+    /* center of circle on the right edge of the avatar */
+    right: -10px;
+    background-color: var(--cpd-color-bg-canvas-default);
+}
+
 .triggerButton {
     border: none;
     background: none;
+    padding: 0;
     display: flex;
     color: var(--cpd-color-body-primary);
     cursor: pointer;
@@ -63,7 +110,14 @@
         overflow: hidden;
         text-wrap: nowrap;
     }
-    margin-top: var(--cpd-space-3x);
-    margin-bottom: var(--cpd-space-4x);
     margin-left: var(--cpd-space-3x);
+    margin-right: var(--cpd-space-2x);
+    padding-inline-start: var(--cpd-space-1-5x);
+}
+
+.displayName {
+    max-width: 175px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
diff --git a/packages/shared-components/src/menus/UserMenu/UserMenu.stories.tsx b/packages/shared-components/src/menus/UserMenu/UserMenu.stories.tsx
index 2a5b809ce1..d206b560ff 100644
--- a/packages/shared-components/src/menus/UserMenu/UserMenu.stories.tsx
+++ b/packages/shared-components/src/menus/UserMenu/UserMenu.stories.tsx
@@ -11,8 +11,14 @@ import { fn } from "storybook/test";
 
 import { UserMenuView, type UserMenuViewSnapshot, type UserMenuViewActions } from "./UserMenu";
 import avatarUrl from "../../../static/element.png";
-import { useMockedViewModel } from "../../core/viewmodel";
+import { MockViewModel, useMockedViewModel } from "../../core/viewmodel";
 import { withViewDocs } from "../../../.storybook/withViewDocs";
+import { type SetStatusViewSnapshot } from "../..";
+
+class MockSetStatusViewModel extends MockViewModel<SetStatusViewSnapshot> {
+    public setStatus = fn();
+    public clearStatus = fn();
+}
 
 const UserMenuWrapperImpl = (snapshot: UserMenuViewSnapshot): JSX.Element => {
     const vm = useMockedViewModel<UserMenuViewSnapshot, UserMenuViewActions>(snapshot, {
@@ -24,7 +30,9 @@ const UserMenuWrapperImpl = (snapshot: UserMenuViewSnapshot): JSX.Element => {
         openHomePage: fn(),
         openSecurity: fn(),
         openSettings: fn(),
+        clearStatus: fn(),
     });
+
     return <UserMenuView vm={vm} />;
 };
 
@@ -59,14 +67,34 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+    args: {
+        setStatusViewModel: new MockSetStatusViewModel({}),
+    },
+};
 
 export const LongerName: Story = {
     args: {
         displayName: "Sally Sanderson with a longer name",
+        setStatusViewModel: new MockSetStatusViewModel({}),
     },
 };
 
+// Rules needed for any story where the menu is open, for the reasons
+// given in each rule.
+const MENU_OPEN_A11Y_RULES = [
+    {
+        // Menu contains a header which is invalid
+        id: "aria-required-children",
+        enabled: false,
+    },
+    {
+        // Menu pops open by default
+        id: "aria-hidden-focus",
+        enabled: false,
+    },
+];
+
 export const Open: Story = {
     args: {
         open: true,
@@ -74,6 +102,7 @@ export const Open: Story = {
         userId: "@person-name:homeserver.com",
         expanded: true,
         showAvatar: true,
+        setStatusViewModel: new MockSetStatusViewModel({}),
     },
     parameters: {
         a11y: {
@@ -83,18 +112,28 @@ export const Open: Story = {
              * to learn more.
              */
             config: {
-                rules: [
-                    {
-                        // Menu contains a header which is invalid
-                        id: "aria-required-children",
-                        enabled: false,
-                    },
-                    {
-                        // Menu pops open by default
-                        id: "aria-hidden-focus",
-                        enabled: false,
-                    },
-                ],
+                rules: MENU_OPEN_A11Y_RULES,
+            },
+        },
+    },
+    // Only used for playwright tests for the menu.
+    // Steals focus if actually opened on the storybook page
+    tags: ["!dev", "!autodocs"],
+};
+
+export const OpenVeryLongName: Story = {
+    args: {
+        open: true,
+        displayName: "Sally Sanderandersonanonanonabibblybobblywooblywobblynobblynom with a name with a very long word",
+        userId: "@person-whose-username-some-might-consider-to-be-a-little-overly-long-although-thats-their-choice-and-we-must-respect-it:homeserver.com",
+        expanded: true,
+        showAvatar: true,
+        setStatusViewModel: new MockSetStatusViewModel({}),
+    },
+    parameters: {
+        a11y: {
+            config: {
+                rules: MENU_OPEN_A11Y_RULES,
             },
         },
     },
@@ -107,15 +146,30 @@ export const Condensed: Story = {
     args: {
         displayName: "Sally Sanderson with a longer name",
         expanded: false,
+        setStatusViewModel: new MockSetStatusViewModel({}),
     },
 };
 
+export const NoAvatar: Story = {
+    args: {
+        displayName: "Sally Sanderson",
+        userId: "@person-name:homeserver.com",
+        expanded: true,
+        open: true,
+        showAvatar: false,
+        setStatusViewModel: new MockSetStatusViewModel({}),
+    },
+    parameters: Open.parameters,
+};
+
 export const Guest: Story = {
     args: {
         displayName: "Guest",
         userId: "@guest:attendees.example.org",
         manageAccountHref: undefined,
         showAvatar: false,
+        setStatusViewModel: new MockSetStatusViewModel({}),
+        showUserStatus: false,
         actions: {
             createAccount: true,
             signIn: true,
@@ -139,18 +193,7 @@ export const GuestOpen: Story = {
              * to learn more.
              */
             config: {
-                rules: [
-                    {
-                        // Menu contains a header which is invalid
-                        id: "aria-required-children",
-                        enabled: false,
-                    },
-                    {
-                        // Menu pops open by default
-                        id: "aria-hidden-focus",
-                        enabled: false,
-                    },
-                ],
+                rules: MENU_OPEN_A11Y_RULES,
             },
         },
     },
@@ -159,20 +202,35 @@ export const GuestOpen: Story = {
     tags: ["!dev", "!autodocs"],
 };
 
-export const AllOptions: Story = {
+export const WithStatus: Story = {
     args: {
-        displayName: "Alice",
-        userId: "@alice:example.org",
-        manageAccountHref: "#",
-        showAvatar: true,
-        actions: {
-            createAccount: true,
-            signIn: true,
-            linkNewDevice: true,
-            openSecurity: true,
-            openHomePage: true,
-            openFeedback: true,
-            openSettings: true,
-        } satisfies Record<keyof UserMenuViewSnapshot["actions"], true>,
+        userStatus: {
+            emoji: "🐹",
+            text: "On the wheel",
+        },
+        setStatusViewModel: new MockSetStatusViewModel({}),
+    },
+};
+
+export const WithStatusOpen: Story = {
+    args: {
+        open: true,
+        userStatus: {
+            emoji: "🐹",
+            text: "On the wheel",
+        },
+        setStatusViewModel: new MockSetStatusViewModel({
+            userStatus: {
+                emoji: "🐹",
+                text: "On the wheel",
+            },
+        }),
+    },
+    parameters: {
+        a11y: {
+            config: {
+                rules: MENU_OPEN_A11Y_RULES,
+            },
+        },
     },
 };
diff --git a/packages/shared-components/src/menus/UserMenu/UserMenu.test.tsx b/packages/shared-components/src/menus/UserMenu/UserMenu.test.tsx
index e8539ed76a..822e77f582 100644
--- a/packages/shared-components/src/menus/UserMenu/UserMenu.test.tsx
+++ b/packages/shared-components/src/menus/UserMenu/UserMenu.test.tsx
@@ -13,7 +13,7 @@ import userEvent from "@testing-library/user-event";
 
 import * as stories from "./UserMenu.stories.tsx";
 
-const { Default, LongerName, Condensed, Guest } = composeStories(stories);
+const { Default, LongerName, Condensed, Guest, Open, NoAvatar, WithStatus, WithStatusOpen } = composeStories(stories);
 
 describe("UserMenu", () => {
     it("renders a button", async () => {
@@ -28,6 +28,10 @@ describe("UserMenu", () => {
         const { container } = render(<Condensed />);
         expect(container).toMatchSnapshot();
     });
+    it("renders the status emoji when set", async () => {
+        const { container } = render(<WithStatus />);
+        expect(container).toMatchSnapshot();
+    });
     it("renders a menu", async () => {
         const { baseElement, getByRole } = render(<Default />);
         await userEvent.click(getByRole("button"));
@@ -38,4 +42,16 @@ describe("UserMenu", () => {
         await userEvent.click(getByRole("button"));
         expect(baseElement).toMatchSnapshot();
     });
+    it("renders an open menu", async () => {
+        const { baseElement } = render(<Open />);
+        expect(baseElement).toMatchSnapshot();
+    });
+    it("renders a menu without an avatar", async () => {
+        const { baseElement } = render(<NoAvatar />);
+        expect(baseElement).toMatchSnapshot();
+    });
+    it("renders an open menu with user status", async () => {
+        const { container } = render(<WithStatusOpen />);
+        expect(container).toMatchSnapshot();
+    });
 });
diff --git a/packages/shared-components/src/menus/UserMenu/UserMenu.tsx b/packages/shared-components/src/menus/UserMenu/UserMenu.tsx
index 3389cba8f8..b3375a9e5a 100644
--- a/packages/shared-components/src/menus/UserMenu/UserMenu.tsx
+++ b/packages/shared-components/src/menus/UserMenu/UserMenu.tsx
@@ -20,6 +20,8 @@ import classNames from "classnames";
 import styles from "./UserMenu.module.css";
 import { useViewModel, type ViewModel } from "../../core/viewmodel";
 import { useI18n } from "../../core/i18n/i18nContext";
+import { type UserStatus } from "../../core/userStatus";
+import { SetStatusView, type SetStatusViewModel } from "../../status/SetStatusView";
 
 export interface UserMenuViewSnapshot {
     /**
@@ -50,6 +52,20 @@ export interface UserMenuViewSnapshot {
      * Account management URL if the user is using OIDC.
      */
     manageAccountHref?: string;
+    /**
+     * The user status to display, or undefined for no icon / status.
+     */
+    userStatus?: UserStatus;
+    /**
+     * Whether to show UI for user status.
+     * Temporary while user status is in labs.
+     * Default: true
+     */
+    showUserStatus?: boolean;
+    /**
+     * ViewModel for the set status view.
+     */
+    setStatusViewModel: SetStatusViewModel;
     /**
      * A set of actions that the user can perform from the menu.
      */
@@ -97,91 +113,134 @@ export declare interface UserMenuViewActions {
      * Called to open the settings dialog.
      */
     openSettings: () => void;
+    /**
+     * Called when the user clicks the button to clear their status.
+     */
+    clearStatus: () => void;
 }
 
 export type UserMenuViewProps = {
     vm: ViewModel<UserMenuViewSnapshot, UserMenuViewActions>;
     /**
-     * Class name for the container
+     * Class name for the wrapper
      */
     className?: string;
 };
 
 export function UserMenuView({ vm, className }: UserMenuViewProps): JSX.Element {
-    const { userId, displayName, avatarUrl, expanded, open, manageAccountHref, actions, showAvatar } = useViewModel(vm);
+    const {
+        userId,
+        displayName,
+        avatarUrl,
+        expanded,
+        open,
+        manageAccountHref,
+        actions,
+        showAvatar,
+        userStatus,
+        setStatusViewModel,
+        showUserStatus = true,
+    } = useViewModel(vm);
     const { translate: _t } = useI18n();
     const trigger = (
-        <button className={classNames(styles.triggerButton, className)} aria-label={_t("menus|user_menu|title")}>
-            <Avatar id={userId} name={displayName} type="round" size="36px" src={avatarUrl} />
+        <button className={styles.triggerButton} aria-label={_t("menus|user_menu|title")} type="button">
+            <div className={styles.avatarWrapper}>
+                <Avatar id={userId} name={displayName} type="round" size="36px" src={avatarUrl} />
+                {userStatus && (
+                    <Text as="div" className={styles.iconStatusEmoji}>
+                        {userStatus.emoji}
+                    </Text>
+                )}
+            </div>
+        </button>
+    );
+
+    // The menu should appear to the right of the avatar, over the displayname if the menu is expanded,
+    // so the display name goes outside the menu block in a wrapper.
+    return (
+        <div className={classNames(styles.wrapper, className)}>
+            <Menu
+                open={open}
+                showTitle={false}
+                title={_t("menus|user_menu|title")}
+                trigger={trigger}
+                onOpenChange={vm.setOpen}
+                align="start"
+                side="right"
+                className={styles.container}
+            >
+                <section className={classNames(styles.profile, styles.profilePrimary)}>
+                    {showAvatar && <Avatar id={userId} name={displayName} type="round" size="64px" src={avatarUrl} />}
+                    <Text className={styles.displayname} type="body" size="lg" weight="semibold" as="span">
+                        {displayName}
+                    </Text>
+                    {showUserStatus && <SetStatusView vm={setStatusViewModel} />}
+                </section>
+                <section className={classNames(styles.profile, styles.profileSecondary)}>
+                    <Text data-testid="userId" size="md" as="span" type="body" className={styles.userId}>
+                        {userId}
+                    </Text>
+                    {manageAccountHref && (
+                        <Button as="a" size="md" kind="tertiary" href={manageAccountHref} Icon={PopOutIcon}>
+                            {_t("menus|user_menu|manage_account")}
+                        </Button>
+                    )}
+                    {actions.createAccount && (
+                        <Button
+                            className={styles.createAccount}
+                            size="md"
+                            as="button"
+                            kind="primary"
+                            onClick={vm.createAccount}
+                        >
+                            {_t("menus|user_menu|create_an_account")}
+                        </Button>
+                    )}
+                    {actions.signIn && (
+                        <Text as="span" weight="medium">
+                            {_t("menus|user_menu|got_an_account")}
+                            <Link as="button" onClick={vm.signIn}>
+                                {_t("menus|user_menu|sign_in")}
+                            </Link>
+                        </Text>
+                    )}
+                </section>
+                <Separator />
+                <section className={styles.actions}>
+                    {actions.openHomePage && (
+                        <MenuItem Icon={HomeIcon} label={_t("user_menu|open_home")} onSelect={vm.openHomePage} />
+                    )}
+                    {actions.linkNewDevice && (
+                        <MenuItem
+                            Icon={DevicesIcon}
+                            label={_t("user_menu|link_new_device")}
+                            onSelect={vm.linkNewDevice}
+                        />
+                    )}
+                    {actions.openSecurity && (
+                        <MenuItem Icon={LockIcon} label={_t("user_menu|open_security")} onSelect={vm.openSecurity} />
+                    )}
+                    {actions.openFeedback && (
+                        <MenuItem
+                            Icon={ChatProblemIcon}
+                            label={_t("user_menu|open_feedback")}
+                            onSelect={vm.openFeedback}
+                        />
+                    )}
+                    {actions.openSettings && (
+                        <MenuItem
+                            Icon={SettingsIcon}
+                            label={_t("user_menu|open_settings")}
+                            onSelect={vm.openSettings}
+                        />
+                    )}
+                </section>
+            </Menu>
             {expanded && (
-                <Text type="heading" size="sm" as="span" weight="semibold">
+                <Text type="heading" size="sm" as="span" weight="semibold" className={styles.displayName}>
                     {displayName}
                 </Text>
             )}
-        </button>
-    );
-    return (
-        <Menu
-            open={open}
-            showTitle={false}
-            title={_t("menus|user_menu|title")}
-            trigger={trigger}
-            onOpenChange={vm.setOpen}
-            align="start"
-            side="bottom"
-            className={styles.container}
-        >
-            <section className={styles.profile}>
-                {showAvatar && <Avatar id={userId} name={displayName} type="round" size="88px" src={avatarUrl} />}
-                <Text className={styles.displayname} type="heading" size="md" weight="semibold" as="span">
-                    {displayName}
-                </Text>
-                <Text data-testid="userId" size="md" as="span" type="body">
-                    {userId}
-                </Text>
-                {manageAccountHref && (
-                    <Button as="a" size="md" kind="tertiary" href={manageAccountHref} Icon={PopOutIcon}>
-                        {_t("menus|user_menu|manage_account")}
-                    </Button>
-                )}
-                {actions.createAccount && (
-                    <Button
-                        className={styles.createAccount}
-                        size="md"
-                        as="button"
-                        kind="primary"
-                        onClick={vm.createAccount}
-                    >
-                        {_t("menus|user_menu|create_an_account")}
-                    </Button>
-                )}
-                {actions.signIn && (
-                    <Text as="span" weight="medium">
-                        {_t("menus|user_menu|got_an_account")}
-                        <Link as="button" onClick={vm.signIn}>
-                            {_t("menus|user_menu|sign_in")}
-                        </Link>
-                    </Text>
-                )}
-            </section>
-            <Separator />
-            <section className={styles.actions}>
-                {actions.openHomePage && (
-                    <MenuItem Icon={HomeIcon} label={_t("user_menu|open_home")} onSelect={vm.openHomePage} />
-                )}
-                {actions.linkNewDevice && (
-                    <MenuItem Icon={DevicesIcon} label={_t("user_menu|link_new_device")} onSelect={vm.linkNewDevice} />
-                )}
-                {actions.openSecurity && (
-                    <MenuItem Icon={LockIcon} label={_t("user_menu|open_security")} onSelect={vm.openSecurity} />
-                )}
-                {actions.openFeedback && (
-                    <MenuItem Icon={ChatProblemIcon} label={_t("user_menu|open_feedback")} onSelect={vm.openFeedback} />
-                )}
-                {actions.openSettings && (
-                    <MenuItem Icon={SettingsIcon} label={_t("user_menu|open_settings")} onSelect={vm.openSettings} />
-                )}
-            </section>
-        </Menu>
+        </div>
     );
 }
diff --git a/packages/shared-components/src/menus/UserMenu/__snapshots__/UserMenu.test.tsx.snap b/packages/shared-components/src/menus/UserMenu/__snapshots__/UserMenu.test.tsx.snap
index 91e00d35fd..60c55bd9cb 100644
--- a/packages/shared-components/src/menus/UserMenu/__snapshots__/UserMenu.test.tsx.snap
+++ b/packages/shared-components/src/menus/UserMenu/__snapshots__/UserMenu.test.tsx.snap
@@ -2,79 +2,95 @@
 
 exports[`UserMenu > renders a button 1`] = `
 <div>
-  <button
-    aria-expanded="false"
-    aria-haspopup="menu"
-    aria-label="User menu"
-    class="UserMenu-module_triggerButton"
-    data-state="closed"
-    id="radix-_r_0_"
-    type="button"
+  <div
+    class="UserMenu-module_wrapper"
   >
-    <span
-      aria-label="@person-name:homeserver.com"
-      class="_avatar_va14e_8"
-      data-color="1"
-      data-type="round"
-      role="img"
-      style="--cpd-avatar-size: 36px;"
+    <button
+      aria-expanded="false"
+      aria-haspopup="menu"
+      aria-label="User menu"
+      class="UserMenu-module_triggerButton"
+      data-state="closed"
+      id="radix-react-use-id-1"
+      type="button"
     >
-      <img
-        alt=""
-        class="_image_va14e_43"
-        data-type="round"
-        height="36px"
-        loading="lazy"
-        referrerpolicy="no-referrer"
-        src="/static/element.png"
-        width="36px"
-      />
-    </span>
+      <div
+        class="UserMenu-module_avatarWrapper"
+      >
+        <span
+          aria-label="@person-name:homeserver.com"
+          class="_avatar_va14e_8"
+          data-color="1"
+          data-type="round"
+          role="img"
+          style="--cpd-avatar-size: 36px;"
+        >
+          <img
+            alt=""
+            class="_image_va14e_43"
+            data-type="round"
+            height="36px"
+            loading="lazy"
+            referrerpolicy="no-referrer"
+            src="/static/element.png"
+            width="36px"
+          />
+        </span>
+      </div>
+    </button>
     <span
-      class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 UserMenu-module_displayName"
     >
       Sally Sanderson
     </span>
-  </button>
+  </div>
 </div>
 `;
 
 exports[`UserMenu > renders a button with a longer name 1`] = `
 <div>
-  <button
-    aria-expanded="false"
-    aria-haspopup="menu"
-    aria-label="User menu"
-    class="UserMenu-module_triggerButton"
-    data-state="closed"
-    id="radix-_r_2_"
-    type="button"
+  <div
+    class="UserMenu-module_wrapper"
   >
-    <span
-      aria-label="@person-name:homeserver.com"
-      class="_avatar_va14e_8"
-      data-color="1"
-      data-type="round"
-      role="img"
-      style="--cpd-avatar-size: 36px;"
+    <button
+      aria-expanded="false"
+      aria-haspopup="menu"
+      aria-label="User menu"
+      class="UserMenu-module_triggerButton"
+      data-state="closed"
+      id="radix-react-use-id-1"
+      type="button"
     >
-      <img
-        alt=""
-        class="_image_va14e_43"
-        data-type="round"
-        height="36px"
-        loading="lazy"
-        referrerpolicy="no-referrer"
-        src="/static/element.png"
-        width="36px"
-      />
-    </span>
+      <div
+        class="UserMenu-module_avatarWrapper"
+      >
+        <span
+          aria-label="@person-name:homeserver.com"
+          class="_avatar_va14e_8"
+          data-color="1"
+          data-type="round"
+          role="img"
+          style="--cpd-avatar-size: 36px;"
+        >
+          <img
+            alt=""
+            class="_image_va14e_43"
+            data-type="round"
+            height="36px"
+            loading="lazy"
+            referrerpolicy="no-referrer"
+            src="/static/element.png"
+            width="36px"
+          />
+        </span>
+      </div>
+    </button>
     <span
-      class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+      class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 UserMenu-module_displayName"
     >
       Sally Sanderson with a longer name
     </span>
-  </button>
+  </div>
 </div>
 `;
 
@@ -85,40 +101,48 @@ exports[`UserMenu > renders a guest menu 1`] = `
 
 
   <div>
-    <button
-      aria-expanded="false"
-      aria-haspopup="menu"
-      aria-label="User menu"
-      class="UserMenu-module_triggerButton"
-      data-state="closed"
-      id="radix-_r_8_"
-      type="button"
+    <div
+      class="UserMenu-module_wrapper"
     >
-      <span
-        aria-label="@guest:attendees.example.org"
-        class="_avatar_va14e_8"
-        data-color="4"
-        data-type="round"
-        role="img"
-        style="--cpd-avatar-size: 36px;"
+      <button
+        aria-expanded="false"
+        aria-haspopup="menu"
+        aria-label="User menu"
+        class="UserMenu-module_triggerButton"
+        data-state="closed"
+        id="radix-react-use-id-1"
+        type="button"
       >
-        <img
-          alt=""
-          class="_image_va14e_43"
-          data-type="round"
-          height="36px"
-          loading="lazy"
-          referrerpolicy="no-referrer"
-          src="/static/element.png"
-          width="36px"
-        />
-      </span>
+        <div
+          class="UserMenu-module_avatarWrapper"
+        >
+          <span
+            aria-label="@guest:attendees.example.org"
+            class="_avatar_va14e_8"
+            data-color="4"
+            data-type="round"
+            role="img"
+            style="--cpd-avatar-size: 36px;"
+          >
+            <img
+              alt=""
+              class="_image_va14e_43"
+              data-type="round"
+              height="36px"
+              loading="lazy"
+              referrerpolicy="no-referrer"
+              src="/static/element.png"
+              width="36px"
+            />
+          </span>
+        </div>
+      </button>
       <span
-        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 UserMenu-module_displayName"
       >
         Guest
       </span>
-    </button>
+    </div>
   </div>
 </body>
 `;
@@ -130,74 +154,1155 @@ exports[`UserMenu > renders a menu 1`] = `
 
 
   <div>
+    <div
+      class="UserMenu-module_wrapper"
+    >
+      <button
+        aria-expanded="false"
+        aria-haspopup="menu"
+        aria-label="User menu"
+        class="UserMenu-module_triggerButton"
+        data-state="closed"
+        id="radix-react-use-id-1"
+        type="button"
+      >
+        <div
+          class="UserMenu-module_avatarWrapper"
+        >
+          <span
+            aria-label="@person-name:homeserver.com"
+            class="_avatar_va14e_8"
+            data-color="1"
+            data-type="round"
+            role="img"
+            style="--cpd-avatar-size: 36px;"
+          >
+            <img
+              alt=""
+              class="_image_va14e_43"
+              data-type="round"
+              height="36px"
+              loading="lazy"
+              referrerpolicy="no-referrer"
+              src="/static/element.png"
+              width="36px"
+            />
+          </span>
+        </div>
+      </button>
+      <span
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 UserMenu-module_displayName"
+      >
+        Sally Sanderson
+      </span>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`UserMenu > renders a menu without an avatar 1`] = `
+<body
+  data-scroll-locked="1"
+  style="pointer-events: none;"
+>
+  <span
+    aria-hidden="true"
+    data-aria-hidden="true"
+    data-radix-focus-guard=""
+    style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
+    tabindex="0"
+  />
+  
+  
+
+
+  <div
+    aria-hidden="true"
+    data-aria-hidden="true"
+  >
+    <div
+      class="UserMenu-module_wrapper"
+    >
+      <button
+        aria-controls="radix-react-use-id-1"
+        aria-expanded="true"
+        aria-haspopup="menu"
+        aria-label="User menu"
+        class="UserMenu-module_triggerButton"
+        data-state="open"
+        id="radix-react-use-id-2"
+        type="button"
+      >
+        <div
+          class="UserMenu-module_avatarWrapper"
+        >
+          <span
+            aria-label="@person-name:homeserver.com"
+            class="_avatar_va14e_8"
+            data-color="1"
+            data-type="round"
+            role="img"
+            style="--cpd-avatar-size: 36px;"
+          >
+            <img
+              alt=""
+              class="_image_va14e_43"
+              data-type="round"
+              height="36px"
+              loading="lazy"
+              referrerpolicy="no-referrer"
+              src="/static/element.png"
+              width="36px"
+            />
+          </span>
+        </div>
+      </button>
+      <span
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 UserMenu-module_displayName"
+      >
+        Sally Sanderson
+      </span>
+    </div>
+  </div>
+  <div
+    data-radix-popper-content-wrapper=""
+    dir="ltr"
+    style="position: fixed; left: 0px; top: 0px; transform: translate(0px, -200%); min-width: max-content; --radix-popper-transform-origin: ; z-index: auto;"
+  >
+    <div
+      aria-label="User menu"
+      aria-labelledby="radix-react-use-id-2"
+      aria-orientation="vertical"
+      class="UserMenu-module_container _menu_so651_8"
+      data-align="start"
+      data-orientation="vertical"
+      data-radix-menu-content=""
+      data-side="right"
+      data-state="open"
+      dir="ltr"
+      id="radix-react-use-id-1"
+      role="menu"
+      style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: auto ease 0s 1 normal none running none; pointer-events: auto;"
+      tabindex="-1"
+    >
+      <section
+        class="UserMenu-module_profile UserMenu-module_profilePrimary"
+      >
+        <span
+          class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 UserMenu-module_displayname"
+        >
+          Sally Sanderson
+        </span>
+        <div
+          aria-invalid="false"
+          class="_container_1xtut_8"
+        >
+          <div
+            class="SetStatusView-module_setStatusContainer"
+          >
+            <a
+              aria-controls="react-use-id-3"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-label="What's your status?"
+              class="_link_13esb_8 SetStatusView-module_setStatusTrigger"
+              data-kind="primary"
+              data-size="md"
+              rel="noreferrer noopener"
+              role="combobox"
+            >
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M15.536 15.536a1 1 0 0 0-1.415-1.415 3 3 0 0 1-2.12.879 3 3 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
+                />
+                <path
+                  d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0"
+                />
+              </svg>
+              <span
+                class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60"
+              >
+                What's your status?
+              </span>
+            </a>
+          </div>
+          <div
+            class="_content_1xtut_62"
+          >
+            <ul
+              class="_content_1xtut_62"
+              id="react-use-id-3"
+              role="listbox"
+            >
+              <li
+                aria-selected="false"
+                role="option"
+                tabindex="0"
+              >
+                <span>
+                  <span
+                    class="SetStatusView-module_dropdownEmoji"
+                  >
+                    💬
+                  </span>
+                  <span>
+                    In a meeting
+                  </span>
+                </span>
+                 
+              </li>
+              <li
+                aria-selected="false"
+                role="option"
+                tabindex="0"
+              >
+                <span>
+                  <span
+                    class="SetStatusView-module_dropdownEmoji"
+                  >
+                    💡
+                  </span>
+                  <span>
+                    Focus Time
+                  </span>
+                </span>
+                 
+              </li>
+              <li
+                aria-selected="false"
+                role="option"
+                tabindex="0"
+              >
+                <span>
+                  <span
+                    class="SetStatusView-module_dropdownEmoji"
+                  >
+                    🚙
+                  </span>
+                  <span>
+                    On the road
+                  </span>
+                </span>
+                 
+              </li>
+              <li
+                aria-selected="false"
+                role="option"
+                tabindex="0"
+              >
+                <span>
+                  <span
+                    class="SetStatusView-module_dropdownEmoji"
+                  >
+                    ☕️
+                  </span>
+                  <span>
+                    Be right back
+                  </span>
+                </span>
+                 
+              </li>
+              <li
+                aria-selected="false"
+                role="option"
+                tabindex="0"
+              >
+                <span>
+                  <span
+                    class="SetStatusView-module_dropdownEmoji"
+                  >
+                    🌴
+                  </span>
+                  <span>
+                    Away
+                  </span>
+                </span>
+                 
+              </li>
+              <li
+                aria-selected="false"
+                role="option"
+                tabindex="0"
+              >
+                <span>
+                  <span
+                    class="SetStatusView-module_dropdownEmoji"
+                  >
+                    ✍️
+                  </span>
+                  <span>
+                    Custom…
+                  </span>
+                </span>
+                 
+              </li>
+            </ul>
+          </div>
+        </div>
+      </section>
+      <section
+        class="UserMenu-module_profile UserMenu-module_profileSecondary"
+      >
+        <span
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 UserMenu-module_userId"
+          data-testid="userId"
+        >
+          @person-name:homeserver.com
+        </span>
+        <a
+          class="_button_1nw83_8 _has-icon_1nw83_60"
+          data-kind="tertiary"
+          data-size="md"
+          href="#"
+          role="link"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5 3h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2"
+            />
+            <path
+              d="M15 3h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L17.586 5H15a1 1 0 1 1 0-2"
+            />
+          </svg>
+          Manage account
+        </a>
+      </section>
+      <div
+        class="_separator_13qwf_8"
+        data-kind="primary"
+        data-orientation="horizontal"
+        role="separator"
+      />
+      <section
+        class="UserMenu-module_actions"
+      >
+        <button
+          class="_item_bym9p_8 _interactive_bym9p_26"
+          data-kind="primary"
+          data-orientation="vertical"
+          data-radix-collection-item=""
+          role="menuitem"
+          tabindex="-1"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_bym9p_51"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M3.5 20q-.625 0-1.062-.437A1.45 1.45 0 0 1 2 18.5q0-.625.438-1.062A1.45 1.45 0 0 1 3.5 17H4V6q0-.824.588-1.412A1.93 1.93 0 0 1 6 4h14q.424 0 .712.287Q21 4.576 21 5t-.288.713A.97.97 0 0 1 20 6H6v11h4.5q.624 0 1.063.438.437.437.437 1.062t-.437 1.063A1.45 1.45 0 0 1 10.5 20zM15 20a.97.97 0 0 1-.713-.288A.97.97 0 0 1 14 19V9q0-.424.287-.713A.97.97 0 0 1 15 8h6q.424 0 .712.287Q22 8.576 22 9v10q0 .424-.288.712A.97.97 0 0 1 21 20zm1-3h4v-7h-4z"
+            />
+          </svg>
+          <span
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
+          >
+            Link new device
+          </span>
+          <svg
+            aria-hidden="true"
+            class="_nav-hint_bym9p_60"
+            fill="currentColor"
+            height="24"
+            viewBox="8 0 8 24"
+            width="8"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+            />
+          </svg>
+        </button>
+        <button
+          class="_item_bym9p_8 _interactive_bym9p_26"
+          data-kind="primary"
+          data-orientation="vertical"
+          data-radix-collection-item=""
+          role="menuitem"
+          tabindex="-1"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_bym9p_51"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6 22q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412A1.93 1.93 0 0 1 6 8h1V6q0-2.075 1.463-3.537Q9.926 1 12 1q2.075 0 3.537 1.463Q17 3.925 17 6v2h1q.824 0 1.413.588Q20 9.175 20 10v10q0 .824-.587 1.413A1.93 1.93 0 0 1 18 22zm0-2h12V10H6zM9 8h6V6q0-1.25-.875-2.125A2.9 2.9 0 0 0 12 3q-1.25 0-2.125.875A2.9 2.9 0 0 0 9 6z"
+            />
+          </svg>
+          <span
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
+          >
+            Security & Privacy
+          </span>
+          <svg
+            aria-hidden="true"
+            class="_nav-hint_bym9p_60"
+            fill="currentColor"
+            height="24"
+            viewBox="8 0 8 24"
+            width="8"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+            />
+          </svg>
+        </button>
+        <button
+          class="_item_bym9p_8 _interactive_bym9p_26"
+          data-kind="primary"
+          data-orientation="vertical"
+          data-radix-collection-item=""
+          role="menuitem"
+          tabindex="-1"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_bym9p_51"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12.713 16.713A.97.97 0 0 1 12 17a.97.97 0 0 1-.713-.288A.97.97 0 0 1 11 16q0-.424.287-.713A.97.97 0 0 1 12 15q.424 0 .713.287.287.288.287.713 0 .424-.287.712m0-3.999A.97.97 0 0 1 12 13a.97.97 0 0 1-.713-.287A.97.97 0 0 1 11 12V8q0-.424.287-.713A.97.97 0 0 1 12 7q.424 0 .713.287Q13 7.576 13 8v4q0 .424-.287.713"
+            />
+            <path
+              d="M2.95 16.3a10.2 10.2 0 0 1-.712-2.1A10.2 10.2 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22q-1.125 0-2.2-.238a10.2 10.2 0 0 1-2.1-.712L2.75 22.5a.94.94 0 0 1-1-.25.94.94 0 0 1-.25-1zm4.2 2.8a1 1 0 0 1 .275-.062q.15-.013.275-.013.225 0 .438.038.212.036.412.137a7.4 7.4 0 0 0 1.675.6Q11.1 20 12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12q0 .9.2 1.775t.6 1.675q.176.325.188.688t-.088.712l-.95 3.2z"
+            />
+          </svg>
+          <span
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
+          >
+            Feedback
+          </span>
+          <svg
+            aria-hidden="true"
+            class="_nav-hint_bym9p_60"
+            fill="currentColor"
+            height="24"
+            viewBox="8 0 8 24"
+            width="8"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+            />
+          </svg>
+        </button>
+        <button
+          class="_item_bym9p_8 _interactive_bym9p_26"
+          data-kind="primary"
+          data-orientation="vertical"
+          data-radix-collection-item=""
+          role="menuitem"
+          tabindex="-1"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_bym9p_51"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0m-2 0a2 2 0 1 0-4 0 2 2 0 0 0 4 0"
+            />
+            <path
+              d="M11.312 2h1.376A2.31 2.31 0 0 1 15 4.312v.247l.002.003c.01.014.031.033.064.047.03.013.056.013.07.01h.002l.177-.177a2.31 2.31 0 0 1 3.27 0l.973.974a2.31 2.31 0 0 1 0 3.269l-.177.177v.003a.13.13 0 0 0 .01.07.15.15 0 0 0 .047.063l.003.002h.247A2.31 2.31 0 0 1 22 11.312v1.376A2.31 2.31 0 0 1 19.688 15h-.247l-.003.002a.15.15 0 0 0-.047.064.13.13 0 0 0-.01.07v.002l.177.177a2.31 2.31 0 0 1 0 3.27l-.974.973a2.31 2.31 0 0 1-3.269 0l-.177-.177h-.003a.13.13 0 0 0-.07.01.15.15 0 0 0-.063.047l-.002.003v.247A2.31 2.31 0 0 1 12.688 22h-1.376A2.31 2.31 0 0 1 9 19.688v-.247l-.002-.003a.15.15 0 0 0-.064-.047.13.13 0 0 0-.07-.01h-.002l-.177.177a2.31 2.31 0 0 1-3.27 0l-.973-.974a2.31 2.31 0 0 1 0-3.269l.177-.177v-.003a.14.14 0 0 0-.01-.07.15.15 0 0 0-.047-.063L4.559 15h-.247A2.31 2.31 0 0 1 2 12.688v-1.376A2.31 2.31 0 0 1 4.312 9h.247l.003-.002a.15.15 0 0 0 .047-.064.14.14 0 0 0 .01-.07v-.002l-.177-.177a2.31 2.31 0 0 1 0-3.27l.974-.973a2.31 2.31 0 0 1 3.269 0l.177.177h.003a.14.14 0 0 0 .07-.01.15.15 0 0 0 .063-.047L9 4.559v-.247A2.31 2.31 0 0 1 11.312 2M11 4.312v.257c0 .893-.59 1.593-1.299 1.887-.716.297-1.622.21-2.248-.418l-.182-.182a.31.31 0 0 0-.441 0l-.974.974a.31.31 0 0 0 0 .44l.182.183c.627.626.715 1.531.418 2.248C6.162 10.41 5.462 11 4.569 11h-.257a.31.31 0 0 0-.312.312v1.376c0 .172.14.312.312.312h.257c.893 0 1.593.59 1.887 1.299.297.716.21 1.622-.418 2.248l-.182.182a.31.31 0 0 0 0 .441l.974.973a.31.31 0 0 0 .44 0l.183-.181c.626-.627 1.532-.715 2.248-.418.709.294 1.299.994 1.299 1.887v.257c0 .172.14.312.312.312h1.376c.172 0 .312-.14.312-.312v-.257c0-.893.59-1.593 1.299-1.887.716-.297 1.622-.21 2.249.418l.181.181c.122.122.32.122.441 0l.973-.973a.31.31 0 0 0 0-.44l-.181-.183c-.627-.626-.715-1.532-.418-2.248.294-.709.994-1.299 1.887-1.299h.257c.172 0 .312-.14.312-.312v-1.376a.31.31 0 0 0-.312-.312h-.257c-.893 0-1.593-.59-1.887-1.299-.297-.717-.21-1.622.418-2.248l.181-.182a.31.31 0 0 0 0-.441l-.973-.974a.31.31 0 0 0-.44 0l-.183.182c-.626.627-1.532.715-2.248.418C13.59 6.162 13 5.462 13 4.569v-.257A.31.31 0 0 0 12.688 4h-1.376a.31.31 0 0 0-.312.312"
+            />
+          </svg>
+          <span
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
+          >
+            All settings
+          </span>
+          <svg
+            aria-hidden="true"
+            class="_nav-hint_bym9p_60"
+            fill="currentColor"
+            height="24"
+            viewBox="8 0 8 24"
+            width="8"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+            />
+          </svg>
+        </button>
+      </section>
+    </div>
+  </div>
+  <span
+    aria-hidden="true"
+    data-aria-hidden="true"
+    data-radix-focus-guard=""
+    style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
+    tabindex="0"
+  />
+</body>
+`;
+
+exports[`UserMenu > renders an open menu 1`] = `
+<body
+  data-scroll-locked="1"
+  style="pointer-events: none;"
+>
+  <span
+    aria-hidden="true"
+    data-aria-hidden="true"
+    data-radix-focus-guard=""
+    style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
+    tabindex="0"
+  />
+  
+  
+
+
+  <div
+    aria-hidden="true"
+    data-aria-hidden="true"
+  >
+    <div
+      class="UserMenu-module_wrapper"
+    >
+      <button
+        aria-controls="radix-react-use-id-1"
+        aria-expanded="true"
+        aria-haspopup="menu"
+        aria-label="User menu"
+        class="UserMenu-module_triggerButton"
+        data-state="open"
+        id="radix-react-use-id-2"
+        type="button"
+      >
+        <div
+          class="UserMenu-module_avatarWrapper"
+        >
+          <span
+            aria-label="@person-name:homeserver.com"
+            class="_avatar_va14e_8"
+            data-color="1"
+            data-type="round"
+            role="img"
+            style="--cpd-avatar-size: 36px;"
+          >
+            <img
+              alt=""
+              class="_image_va14e_43"
+              data-type="round"
+              height="36px"
+              loading="lazy"
+              referrerpolicy="no-referrer"
+              src="/static/element.png"
+              width="36px"
+            />
+          </span>
+        </div>
+      </button>
+      <span
+        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 UserMenu-module_displayName"
+      >
+        Sally Sanderson with a longer name
+      </span>
+    </div>
+  </div>
+  <div
+    data-radix-popper-content-wrapper=""
+    dir="ltr"
+    style="position: fixed; left: 0px; top: 0px; transform: translate(0px, -200%); min-width: max-content; --radix-popper-transform-origin: ; z-index: auto;"
+  >
+    <div
+      aria-label="User menu"
+      aria-labelledby="radix-react-use-id-2"
+      aria-orientation="vertical"
+      class="UserMenu-module_container _menu_so651_8"
+      data-align="start"
+      data-orientation="vertical"
+      data-radix-menu-content=""
+      data-side="right"
+      data-state="open"
+      dir="ltr"
+      id="radix-react-use-id-1"
+      role="menu"
+      style="outline: none; --radix-dropdown-menu-content-transform-origin: var(--radix-popper-transform-origin); --radix-dropdown-menu-content-available-width: var(--radix-popper-available-width); --radix-dropdown-menu-content-available-height: var(--radix-popper-available-height); --radix-dropdown-menu-trigger-width: var(--radix-popper-anchor-width); --radix-dropdown-menu-trigger-height: var(--radix-popper-anchor-height); animation: auto ease 0s 1 normal none running none; pointer-events: auto;"
+      tabindex="-1"
+    >
+      <section
+        class="UserMenu-module_profile UserMenu-module_profilePrimary"
+      >
+        <span
+          aria-label="@person-name:homeserver.com"
+          class="_avatar_va14e_8"
+          data-color="1"
+          data-type="round"
+          role="img"
+          style="--cpd-avatar-size: 64px;"
+        >
+          <img
+            alt=""
+            class="_image_va14e_43"
+            data-type="round"
+            height="64px"
+            loading="lazy"
+            referrerpolicy="no-referrer"
+            src="/static/element.png"
+            width="64px"
+          />
+        </span>
+        <span
+          class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 UserMenu-module_displayname"
+        >
+          Sally Sanderson with a longer name
+        </span>
+        <div
+          aria-invalid="false"
+          class="_container_1xtut_8"
+        >
+          <div
+            class="SetStatusView-module_setStatusContainer"
+          >
+            <a
+              aria-controls="react-use-id-3"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-label="What's your status?"
+              class="_link_13esb_8 SetStatusView-module_setStatusTrigger"
+              data-kind="primary"
+              data-size="md"
+              rel="noreferrer noopener"
+              role="combobox"
+            >
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M15.536 15.536a1 1 0 0 0-1.415-1.415 3 3 0 0 1-2.12.879 3 3 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A5 5 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464M10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
+                />
+                <path
+                  d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0"
+                />
+              </svg>
+              <span
+                class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60"
+              >
+                What's your status?
+              </span>
+            </a>
+          </div>
+          <div
+            class="_content_1xtut_62"
+          >
+            <ul
+              class="_content_1xtut_62"
+              id="react-use-id-3"
+              role="listbox"
+            >
+              <li
+                aria-selected="false"
+                role="option"
+                tabindex="0"
+              >
+                <span>
+                  <span
+                    class="SetStatusView-module_dropdownEmoji"
+                  >
+                    💬
+                  </span>
+                  <span>
+                    In a meeting
+                  </span>
+                </span>
+                 
+              </li>
+              <li
+                aria-selected="false"
+                role="option"
+                tabindex="0"
+              >
+                <span>
+                  <span
+                    class="SetStatusView-module_dropdownEmoji"
+                  >
+                    💡
+                  </span>
+                  <span>
+                    Focus Time
+                  </span>
+                </span>
+                 
+              </li>
+              <li
+                aria-selected="false"
+                role="option"
+                tabindex="0"
+              >
+                <span>
+                  <span
+                    class="SetStatusView-module_dropdownEmoji"
+                  >
+                    🚙
+                  </span>
+                  <span>
+                    On the road
+                  </span>
+                </span>
+                 
+              </li>
+              <li
+                aria-selected="false"
+                role="option"
+                tabindex="0"
+              >
+                <span>
+                  <span
+                    class="SetStatusView-module_dropdownEmoji"
+                  >
+                    ☕️
+                  </span>
+                  <span>
+                    Be right back
+                  </span>
+                </span>
+                 
+              </li>
+              <li
+                aria-selected="false"
+                role="option"
+                tabindex="0"
+              >
+                <span>
+                  <span
+                    class="SetStatusView-module_dropdownEmoji"
+                  >
+                    🌴
+                  </span>
+                  <span>
+                    Away
+                  </span>
+                </span>
+                 
+              </li>
+              <li
+                aria-selected="false"
+                role="option"
+                tabindex="0"
+              >
+                <span>
+                  <span
+                    class="SetStatusView-module_dropdownEmoji"
+                  >
+                    ✍️
+                  </span>
+                  <span>
+                    Custom…
+                  </span>
+                </span>
+                 
+              </li>
+            </ul>
+          </div>
+        </div>
+      </section>
+      <section
+        class="UserMenu-module_profile UserMenu-module_profileSecondary"
+      >
+        <span
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 UserMenu-module_userId"
+          data-testid="userId"
+        >
+          @person-name:homeserver.com
+        </span>
+        <a
+          class="_button_1nw83_8 _has-icon_1nw83_60"
+          data-kind="tertiary"
+          data-size="md"
+          href="#"
+          role="link"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M5 3h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2"
+            />
+            <path
+              d="M15 3h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L17.586 5H15a1 1 0 1 1 0-2"
+            />
+          </svg>
+          Manage account
+        </a>
+      </section>
+      <div
+        class="_separator_13qwf_8"
+        data-kind="primary"
+        data-orientation="horizontal"
+        role="separator"
+      />
+      <section
+        class="UserMenu-module_actions"
+      >
+        <button
+          class="_item_bym9p_8 _interactive_bym9p_26"
+          data-kind="primary"
+          data-orientation="vertical"
+          data-radix-collection-item=""
+          role="menuitem"
+          tabindex="-1"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_bym9p_51"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M3.5 20q-.625 0-1.062-.437A1.45 1.45 0 0 1 2 18.5q0-.625.438-1.062A1.45 1.45 0 0 1 3.5 17H4V6q0-.824.588-1.412A1.93 1.93 0 0 1 6 4h14q.424 0 .712.287Q21 4.576 21 5t-.288.713A.97.97 0 0 1 20 6H6v11h4.5q.624 0 1.063.438.437.437.437 1.062t-.437 1.063A1.45 1.45 0 0 1 10.5 20zM15 20a.97.97 0 0 1-.713-.288A.97.97 0 0 1 14 19V9q0-.424.287-.713A.97.97 0 0 1 15 8h6q.424 0 .712.287Q22 8.576 22 9v10q0 .424-.288.712A.97.97 0 0 1 21 20zm1-3h4v-7h-4z"
+            />
+          </svg>
+          <span
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
+          >
+            Link new device
+          </span>
+          <svg
+            aria-hidden="true"
+            class="_nav-hint_bym9p_60"
+            fill="currentColor"
+            height="24"
+            viewBox="8 0 8 24"
+            width="8"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+            />
+          </svg>
+        </button>
+        <button
+          class="_item_bym9p_8 _interactive_bym9p_26"
+          data-kind="primary"
+          data-orientation="vertical"
+          data-radix-collection-item=""
+          role="menuitem"
+          tabindex="-1"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_bym9p_51"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6 22q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412A1.93 1.93 0 0 1 6 8h1V6q0-2.075 1.463-3.537Q9.926 1 12 1q2.075 0 3.537 1.463Q17 3.925 17 6v2h1q.824 0 1.413.588Q20 9.175 20 10v10q0 .824-.587 1.413A1.93 1.93 0 0 1 18 22zm0-2h12V10H6zM9 8h6V6q0-1.25-.875-2.125A2.9 2.9 0 0 0 12 3q-1.25 0-2.125.875A2.9 2.9 0 0 0 9 6z"
+            />
+          </svg>
+          <span
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
+          >
+            Security & Privacy
+          </span>
+          <svg
+            aria-hidden="true"
+            class="_nav-hint_bym9p_60"
+            fill="currentColor"
+            height="24"
+            viewBox="8 0 8 24"
+            width="8"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+            />
+          </svg>
+        </button>
+        <button
+          class="_item_bym9p_8 _interactive_bym9p_26"
+          data-kind="primary"
+          data-orientation="vertical"
+          data-radix-collection-item=""
+          role="menuitem"
+          tabindex="-1"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_bym9p_51"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12.713 16.713A.97.97 0 0 1 12 17a.97.97 0 0 1-.713-.288A.97.97 0 0 1 11 16q0-.424.287-.713A.97.97 0 0 1 12 15q.424 0 .713.287.287.288.287.713 0 .424-.287.712m0-3.999A.97.97 0 0 1 12 13a.97.97 0 0 1-.713-.287A.97.97 0 0 1 11 12V8q0-.424.287-.713A.97.97 0 0 1 12 7q.424 0 .713.287Q13 7.576 13 8v4q0 .424-.287.713"
+            />
+            <path
+              d="M2.95 16.3a10.2 10.2 0 0 1-.712-2.1A10.2 10.2 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22q-1.125 0-2.2-.238a10.2 10.2 0 0 1-2.1-.712L2.75 22.5a.94.94 0 0 1-1-.25.94.94 0 0 1-.25-1zm4.2 2.8a1 1 0 0 1 .275-.062q.15-.013.275-.013.225 0 .438.038.212.036.412.137a7.4 7.4 0 0 0 1.675.6Q11.1 20 12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12q0 .9.2 1.775t.6 1.675q.176.325.188.688t-.088.712l-.95 3.2z"
+            />
+          </svg>
+          <span
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
+          >
+            Feedback
+          </span>
+          <svg
+            aria-hidden="true"
+            class="_nav-hint_bym9p_60"
+            fill="currentColor"
+            height="24"
+            viewBox="8 0 8 24"
+            width="8"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+            />
+          </svg>
+        </button>
+        <button
+          class="_item_bym9p_8 _interactive_bym9p_26"
+          data-kind="primary"
+          data-orientation="vertical"
+          data-radix-collection-item=""
+          role="menuitem"
+          tabindex="-1"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_bym9p_51"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0m-2 0a2 2 0 1 0-4 0 2 2 0 0 0 4 0"
+            />
+            <path
+              d="M11.312 2h1.376A2.31 2.31 0 0 1 15 4.312v.247l.002.003c.01.014.031.033.064.047.03.013.056.013.07.01h.002l.177-.177a2.31 2.31 0 0 1 3.27 0l.973.974a2.31 2.31 0 0 1 0 3.269l-.177.177v.003a.13.13 0 0 0 .01.07.15.15 0 0 0 .047.063l.003.002h.247A2.31 2.31 0 0 1 22 11.312v1.376A2.31 2.31 0 0 1 19.688 15h-.247l-.003.002a.15.15 0 0 0-.047.064.13.13 0 0 0-.01.07v.002l.177.177a2.31 2.31 0 0 1 0 3.27l-.974.973a2.31 2.31 0 0 1-3.269 0l-.177-.177h-.003a.13.13 0 0 0-.07.01.15.15 0 0 0-.063.047l-.002.003v.247A2.31 2.31 0 0 1 12.688 22h-1.376A2.31 2.31 0 0 1 9 19.688v-.247l-.002-.003a.15.15 0 0 0-.064-.047.13.13 0 0 0-.07-.01h-.002l-.177.177a2.31 2.31 0 0 1-3.27 0l-.973-.974a2.31 2.31 0 0 1 0-3.269l.177-.177v-.003a.14.14 0 0 0-.01-.07.15.15 0 0 0-.047-.063L4.559 15h-.247A2.31 2.31 0 0 1 2 12.688v-1.376A2.31 2.31 0 0 1 4.312 9h.247l.003-.002a.15.15 0 0 0 .047-.064.14.14 0 0 0 .01-.07v-.002l-.177-.177a2.31 2.31 0 0 1 0-3.27l.974-.973a2.31 2.31 0 0 1 3.269 0l.177.177h.003a.14.14 0 0 0 .07-.01.15.15 0 0 0 .063-.047L9 4.559v-.247A2.31 2.31 0 0 1 11.312 2M11 4.312v.257c0 .893-.59 1.593-1.299 1.887-.716.297-1.622.21-2.248-.418l-.182-.182a.31.31 0 0 0-.441 0l-.974.974a.31.31 0 0 0 0 .44l.182.183c.627.626.715 1.531.418 2.248C6.162 10.41 5.462 11 4.569 11h-.257a.31.31 0 0 0-.312.312v1.376c0 .172.14.312.312.312h.257c.893 0 1.593.59 1.887 1.299.297.716.21 1.622-.418 2.248l-.182.182a.31.31 0 0 0 0 .441l.974.973a.31.31 0 0 0 .44 0l.183-.181c.626-.627 1.532-.715 2.248-.418.709.294 1.299.994 1.299 1.887v.257c0 .172.14.312.312.312h1.376c.172 0 .312-.14.312-.312v-.257c0-.893.59-1.593 1.299-1.887.716-.297 1.622-.21 2.249.418l.181.181c.122.122.32.122.441 0l.973-.973a.31.31 0 0 0 0-.44l-.181-.183c-.627-.626-.715-1.532-.418-2.248.294-.709.994-1.299 1.887-1.299h.257c.172 0 .312-.14.312-.312v-1.376a.31.31 0 0 0-.312-.312h-.257c-.893 0-1.593-.59-1.887-1.299-.297-.717-.21-1.622.418-2.248l.181-.182a.31.31 0 0 0 0-.441l-.973-.974a.31.31 0 0 0-.44 0l-.183.182c-.626.627-1.532.715-2.248.418C13.59 6.162 13 5.462 13 4.569v-.257A.31.31 0 0 0 12.688 4h-1.376a.31.31 0 0 0-.312.312"
+            />
+          </svg>
+          <span
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_bym9p_35"
+          >
+            All settings
+          </span>
+          <svg
+            aria-hidden="true"
+            class="_nav-hint_bym9p_60"
+            fill="currentColor"
+            height="24"
+            viewBox="8 0 8 24"
+            width="8"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+            />
+          </svg>
+        </button>
+      </section>
+    </div>
+  </div>
+  <span
+    aria-hidden="true"
+    data-aria-hidden="true"
+    data-radix-focus-guard=""
+    style="outline: none; opacity: 0; position: fixed; pointer-events: none;"
+    tabindex="0"
+  />
+</body>
+`;
+
+exports[`UserMenu > renders an open menu with user status 1`] = `
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+>
+  <div
+    class="UserMenu-module_wrapper"
+  >
+    <button
+      aria-controls="radix-react-use-id-1"
+      aria-expanded="true"
+      aria-haspopup="menu"
+      aria-label="User menu"
+      class="UserMenu-module_triggerButton"
+      data-state="open"
+      id="radix-react-use-id-2"
+      type="button"
+    >
+      <div
+        class="UserMenu-module_avatarWrapper"
+      >
+        <span
+          aria-label="@person-name:homeserver.com"
+          class="_avatar_va14e_8"
+          data-color="1"
+          data-type="round"
+          role="img"
+          style="--cpd-avatar-size: 36px;"
+        >
+          <img
+            alt=""
+            class="_image_va14e_43"
+            data-type="round"
+            height="36px"
+            loading="lazy"
+            referrerpolicy="no-referrer"
+            src="/static/element.png"
+            width="36px"
+          />
+        </span>
+        <div
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 UserMenu-module_iconStatusEmoji"
+        >
+          🐹
+        </div>
+      </div>
+    </button>
+    <span
+      class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 UserMenu-module_displayName"
+    >
+      Sally Sanderson
+    </span>
+  </div>
+</div>
+`;
+
+exports[`UserMenu > renders condensed view 1`] = `
+<div>
+  <div
+    class="UserMenu-module_wrapper"
+  >
     <button
       aria-expanded="false"
       aria-haspopup="menu"
       aria-label="User menu"
       class="UserMenu-module_triggerButton"
       data-state="closed"
-      id="radix-_r_6_"
+      id="radix-react-use-id-1"
       type="button"
     >
-      <span
-        aria-label="@person-name:homeserver.com"
-        class="_avatar_va14e_8"
-        data-color="1"
-        data-type="round"
-        role="img"
-        style="--cpd-avatar-size: 36px;"
+      <div
+        class="UserMenu-module_avatarWrapper"
       >
-        <img
-          alt=""
-          class="_image_va14e_43"
+        <span
+          aria-label="@person-name:homeserver.com"
+          class="_avatar_va14e_8"
+          data-color="1"
           data-type="round"
-          height="36px"
-          loading="lazy"
-          referrerpolicy="no-referrer"
-          src="/static/element.png"
-          width="36px"
-        />
-      </span>
-      <span
-        class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
-      >
-        Sally Sanderson
-      </span>
+          role="img"
+          style="--cpd-avatar-size: 36px;"
+        >
+          <img
+            alt=""
+            class="_image_va14e_43"
+            data-type="round"
+            height="36px"
+            loading="lazy"
+            referrerpolicy="no-referrer"
+            src="/static/element.png"
+            width="36px"
+          />
+        </span>
+      </div>
     </button>
   </div>
-</body>
+</div>
 `;
 
-exports[`UserMenu > renders condensed view 1`] = `
+exports[`UserMenu > renders the status emoji when set 1`] = `
 <div>
-  <button
-    aria-expanded="false"
-    aria-haspopup="menu"
-    aria-label="User menu"
-    class="UserMenu-module_triggerButton"
-    data-state="closed"
-    id="radix-_r_4_"
-    type="button"
+  <div
+    class="UserMenu-module_wrapper"
   >
+    <button
+      aria-expanded="false"
+      aria-haspopup="menu"
+      aria-label="User menu"
+      class="UserMenu-module_triggerButton"
+      data-state="closed"
+      id="radix-react-use-id-1"
+      type="button"
+    >
+      <div
+        class="UserMenu-module_avatarWrapper"
+      >
+        <span
+          aria-label="@person-name:homeserver.com"
+          class="_avatar_va14e_8"
+          data-color="1"
+          data-type="round"
+          role="img"
+          style="--cpd-avatar-size: 36px;"
+        >
+          <img
+            alt=""
+            class="_image_va14e_43"
+            data-type="round"
+            height="36px"
+            loading="lazy"
+            referrerpolicy="no-referrer"
+            src="/static/element.png"
+            width="36px"
+          />
+        </span>
+        <div
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 UserMenu-module_iconStatusEmoji"
+        >
+          🐹
+        </div>
+      </div>
+    </button>
     <span
-      aria-label="@person-name:homeserver.com"
-      class="_avatar_va14e_8"
-      data-color="1"
-      data-type="round"
-      role="img"
-      style="--cpd-avatar-size: 36px;"
+      class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93 UserMenu-module_displayName"
     >
-      <img
-        alt=""
-        class="_image_va14e_43"
-        data-type="round"
-        height="36px"
-        loading="lazy"
-        referrerpolicy="no-referrer"
-        src="/static/element.png"
-        width="36px"
-      />
+      Sally Sanderson
     </span>
-  </button>
+  </div>
 </div>
 `;
diff --git a/packages/shared-components/src/notifications/NotificationBadgeView/NotificationBadgeView.module.css b/packages/shared-components/src/notifications/NotificationBadgeView/NotificationBadgeView.module.css
new file mode 100644
index 0000000000..a7e72b0b27
--- /dev/null
+++ b/packages/shared-components/src/notifications/NotificationBadgeView/NotificationBadgeView.module.css
@@ -0,0 +1,74 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+.notificationBadge {
+    /* App-side badge borders should sit outside the fixed badge size. */
+    box-sizing: content-box;
+    padding: 0;
+    border: 0;
+    font: inherit;
+}
+
+.notificationBadge:not(.visible) {
+    display: none;
+}
+
+.notificationBadge.visible {
+    background-color: var(--roomtile-default-badge-bg-color, var(--cpd-color-icon-secondary));
+    color: var(--cpd-color-text-on-solid-primary);
+    outline: 1px solid transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+button.notificationBadge {
+    cursor: pointer;
+}
+
+.notificationBadge.visible.dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 8px;
+    background-color: var(--cpd-color-icon-primary);
+}
+
+.notificationBadge.visible.dot .count {
+    display: none;
+}
+
+.notificationBadge.visible.dot.notification {
+    background-color: var(--cpd-color-icon-success-primary);
+}
+
+.notificationBadge.visible.highlight {
+    background-color: var(--cpd-color-icon-critical-primary);
+}
+
+.notificationBadge.visible > svg {
+    width: 16px;
+    height: 16px;
+}
+
+.notificationBadge.visible.badge2Char {
+    width: 1rem;
+    height: 1rem;
+    border-radius: 1rem;
+}
+
+.notificationBadge.visible.badge3Char {
+    width: 1.625rem;
+    height: 1rem;
+    border-radius: 1rem;
+}
+
+.notificationBadge.visible .count {
+    font-size: 0.625rem;
+    line-height: 0.875rem;
+    font-weight: var(--cpd-font-weight-semibold);
+    color: var(--cpd-color-text-on-solid-primary);
+}
diff --git a/packages/shared-components/src/notifications/NotificationBadgeView/NotificationBadgeView.stories.tsx b/packages/shared-components/src/notifications/NotificationBadgeView/NotificationBadgeView.stories.tsx
new file mode 100644
index 0000000000..97b0082759
--- /dev/null
+++ b/packages/shared-components/src/notifications/NotificationBadgeView/NotificationBadgeView.stories.tsx
@@ -0,0 +1,98 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+import { fn } from "storybook/test";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useMockedViewModel } from "../../core/viewmodel";
+import { withViewDocs } from "../../../.storybook/withViewDocs";
+import {
+    NotificationBadgeView,
+    type NotificationBadgeViewActions,
+    type NotificationBadgeViewSnapshot,
+} from "./NotificationBadgeView";
+
+type WrapperProps = NotificationBadgeViewSnapshot & NotificationBadgeViewActions;
+
+const NotificationBadgeViewWrapperImpl = ({ onClick, ...snapshotProps }: WrapperProps): JSX.Element => {
+    const vm = useMockedViewModel(snapshotProps, {
+        onClick: onClick ?? fn(),
+    });
+
+    return <NotificationBadgeView vm={vm} />;
+};
+
+const NotificationBadgeViewWrapper = withViewDocs(NotificationBadgeViewWrapperImpl, NotificationBadgeView);
+
+const meta = {
+    title: "Notifications/NotificationBadgeView",
+    component: NotificationBadgeViewWrapper,
+    tags: ["autodocs"],
+    args: {
+        shouldRender: true,
+        isVisible: true,
+        isNotification: false,
+        isHighlight: false,
+        isKnocked: false,
+        badgeType: "badge_2char",
+        symbol: "3",
+        isClickable: false,
+        ariaLabel: undefined,
+        tabIndex: undefined,
+        showUnsentTooltip: false,
+    },
+} satisfies Meta<typeof NotificationBadgeViewWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Notification: Story = {};
+
+export const Dot: Story = {
+    args: {
+        badgeType: "dot",
+        symbol: null,
+        isNotification: true,
+    },
+};
+
+export const Highlight: Story = {
+    args: {
+        isHighlight: true,
+        symbol: "!",
+    },
+};
+
+export const Knocked: Story = {
+    args: {
+        isKnocked: true,
+        symbol: "!",
+    },
+};
+
+export const Clickable: Story = {
+    args: {
+        isClickable: true,
+        ariaLabel: "Jump to first unread room",
+        tabIndex: 0,
+    },
+};
+
+export const WithTooltip: Story = {
+    args: {
+        isHighlight: true,
+        symbol: "!",
+        showUnsentTooltip: true,
+    },
+};
+
+export const Hidden: Story = {
+    args: {
+        shouldRender: false,
+    },
+};
diff --git a/packages/shared-components/src/notifications/NotificationBadgeView/NotificationBadgeView.test.tsx b/packages/shared-components/src/notifications/NotificationBadgeView/NotificationBadgeView.test.tsx
new file mode 100644
index 0000000000..35f8753631
--- /dev/null
+++ b/packages/shared-components/src/notifications/NotificationBadgeView/NotificationBadgeView.test.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright 2026 Element Creations 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 { render, screen } from "@test-utils";
+import { composeStories } from "@storybook/react-vite";
+import React from "react";
+import { describe, expect, it } from "vitest";
+
+import * as stories from "./NotificationBadgeView.stories";
+
+const { Notification, Dot, Knocked, Hidden } = composeStories(stories);
+
+describe("NotificationBadgeView", () => {
+    it("renders the default notification badge", () => {
+        const { container } = render(<Notification />);
+
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders a dot badge", () => {
+        render(<Dot />);
+
+        expect(screen.getByTestId("notification-badge")).toHaveAttribute("data-badge-type", "dot");
+    });
+
+    it("renders a knocked badge icon", () => {
+        render(<Knocked />);
+
+        expect(screen.getByLabelText("Request to join sent")).toBeInTheDocument();
+    });
+
+    it("does not render when hidden", () => {
+        const { container } = render(<Hidden />);
+
+        expect(container.firstChild).toBeNull();
+    });
+});
diff --git a/packages/shared-components/src/notifications/NotificationBadgeView/NotificationBadgeView.tsx b/packages/shared-components/src/notifications/NotificationBadgeView/NotificationBadgeView.tsx
new file mode 100644
index 0000000000..4cec043510
--- /dev/null
+++ b/packages/shared-components/src/notifications/NotificationBadgeView/NotificationBadgeView.tsx
@@ -0,0 +1,151 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX, type MouseEventHandler } from "react";
+import classNames from "classnames";
+import { AskToJoinIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Tooltip } from "@vector-im/compound-web";
+
+import { type ViewModel, useViewModel } from "../../core/viewmodel";
+import { useI18n } from "../../core/i18n/i18nContext";
+import styles from "./NotificationBadgeView.module.css";
+
+export type NotificationBadgeType = "dot" | "badge_2char" | "badge_3char";
+
+export interface NotificationBadgeViewSnapshot {
+    /**
+     * Controls whether the badge root should render.
+     */
+    shouldRender: boolean;
+    /**
+     * Controls whether the badge receives the visible styling class.
+     */
+    isVisible: boolean;
+    /**
+     * Marks the badge as a regular notification.
+     */
+    isNotification: boolean;
+    /**
+     * Marks the badge as a highlight notification.
+     */
+    isHighlight: boolean;
+    /**
+     * Marks the badge as representing a knock request.
+     */
+    isKnocked: boolean;
+    /**
+     * Controls the visual badge shape.
+     */
+    badgeType: NotificationBadgeType;
+    /**
+     * Display text for non-knock badges.
+     */
+    symbol: string | null;
+    /**
+     * Whether to render the badge as an interactive control.
+     */
+    isClickable: boolean;
+    /**
+     * Accessible label for clickable badges.
+     */
+    ariaLabel?: string;
+    /**
+     * Tab index for clickable badges.
+     */
+    tabIndex?: number;
+    /**
+     * Whether to show the unsent-message tooltip.
+     */
+    showUnsentTooltip: boolean;
+}
+
+export interface NotificationBadgeViewActions {
+    /**
+     * Called when an interactive badge is activated.
+     */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+
+export type NotificationBadgeViewModel = ViewModel<NotificationBadgeViewSnapshot> & NotificationBadgeViewActions;
+
+interface NotificationBadgeViewProps {
+    vm: NotificationBadgeViewModel;
+    className?: string;
+}
+
+export function NotificationBadgeView({ vm, className }: Readonly<NotificationBadgeViewProps>): JSX.Element {
+    const { translate: _t } = useI18n();
+    const {
+        shouldRender,
+        isVisible,
+        isNotification,
+        isHighlight,
+        isKnocked,
+        badgeType,
+        symbol,
+        isClickable,
+        ariaLabel,
+        tabIndex,
+        showUnsentTooltip,
+    } = useViewModel(vm);
+
+    if (!shouldRender) {
+        return <></>;
+    }
+
+    const classes = classNames(className, styles.notificationBadge, {
+        [styles.visible]: isVisible,
+        [styles.notification]: isNotification,
+        [styles.highlight]: isHighlight,
+        [styles.dot]: badgeType === "dot",
+        [styles.badge2Char]: badgeType === "badge_2char",
+        [styles.badge3Char]: badgeType === "badge_3char",
+        // Badges with text should always use light colors.
+        "cpd-theme-light": badgeType !== "dot",
+    });
+    const notificationLevel = isHighlight ? "highlight" : isNotification ? "notification" : undefined;
+
+    const content = isKnocked ? (
+        <AskToJoinIcon aria-label={_t("room|knock_sent")} />
+    ) : (
+        <span className={styles.count}>{symbol}</span>
+    );
+
+    const badge = isClickable ? (
+        <button
+            type="button"
+            data-testid="notification-badge"
+            data-badge-type={badgeType}
+            data-notification-level={notificationLevel}
+            className={classes}
+            aria-label={ariaLabel}
+            tabIndex={tabIndex}
+            onClick={vm.onClick}
+        >
+            {content}
+        </button>
+    ) : (
+        <div
+            data-testid="notification-badge"
+            data-badge-type={badgeType}
+            data-notification-level={notificationLevel}
+            className={classes}
+        >
+            {content}
+        </div>
+    );
+
+    if (showUnsentTooltip) {
+        return (
+            <Tooltip label={_t("notifications|message_didnt_send")} placement="right">
+                {badge}
+            </Tooltip>
+        );
+    }
+
+    return badge;
+}
diff --git a/packages/shared-components/src/notifications/NotificationBadgeView/__snapshots__/NotificationBadgeView.test.tsx.snap b/packages/shared-components/src/notifications/NotificationBadgeView/__snapshots__/NotificationBadgeView.test.tsx.snap
new file mode 100644
index 0000000000..2f5ce14acc
--- /dev/null
+++ b/packages/shared-components/src/notifications/NotificationBadgeView/__snapshots__/NotificationBadgeView.test.tsx.snap
@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`NotificationBadgeView > renders the default notification badge 1`] = `
+<div>
+  <div
+    class="NotificationBadgeView-module_notificationBadge NotificationBadgeView-module_visible NotificationBadgeView-module_badge2Char cpd-theme-light"
+    data-badge-type="badge_2char"
+    data-testid="notification-badge"
+  >
+    <span
+      class="NotificationBadgeView-module_count"
+    >
+      3
+    </span>
+  </div>
+</div>
+`;
diff --git a/packages/shared-components/src/notifications/NotificationBadgeView/index.ts b/packages/shared-components/src/notifications/NotificationBadgeView/index.ts
new file mode 100644
index 0000000000..1b1f91cca7
--- /dev/null
+++ b/packages/shared-components/src/notifications/NotificationBadgeView/index.ts
@@ -0,0 +1,14 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+export {
+    NotificationBadgeView,
+    type NotificationBadgeType,
+    type NotificationBadgeViewActions,
+    type NotificationBadgeViewModel,
+    type NotificationBadgeViewSnapshot,
+} from "./NotificationBadgeView";
diff --git a/packages/shared-components/src/resize/group/__snapshots__/GroupView.test.tsx.snap b/packages/shared-components/src/resize/group/__snapshots__/GroupView.test.tsx.snap
index a432029dd7..99a3aa2cc5 100644
--- a/packages/shared-components/src/resize/group/__snapshots__/GroupView.test.tsx.snap
+++ b/packages/shared-components/src/resize/group/__snapshots__/GroupView.test.tsx.snap
@@ -7,14 +7,14 @@ exports[`<GroupView /> > renders Default story 1`] = `
   >
     <div
       data-group="true"
-      data-testid="_r_0_"
-      id="_r_0_"
+      data-testid="react-use-id-1"
+      id="react-use-id-1"
       style="height: 100%; width: 100%; overflow: hidden; display: flex; flex-flow: row; touch-action: pan-y;"
     >
       <div
         data-panel="true"
-        data-testid="_r_1_"
-        id="_r_1_"
+        data-testid="react-use-id-2"
+        id="react-use-id-2"
         style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 50 1 0px; overflow: visible;"
       >
         <div
@@ -29,22 +29,22 @@ exports[`<GroupView /> > renders Default story 1`] = `
         </div>
       </div>
       <div
-        aria-controls="_r_1_"
+        aria-controls="react-use-id-2"
         aria-orientation="vertical"
         aria-valuemax="96.618"
         aria-valuemin="48.309"
         aria-valuenow="50"
         data-separator="inactive"
-        data-testid="_r_2_"
-        id="_r_2_"
+        data-testid="react-use-id-3"
+        id="react-use-id-3"
         role="separator"
         style="flex: 0 0 auto; touch-action: none;"
         tabindex="0"
       />
       <div
         data-panel="true"
-        data-testid="_r_3_"
-        id="_r_3_"
+        data-testid="react-use-id-4"
+        id="react-use-id-4"
         style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 50 1 0px; overflow: visible;"
       >
         <div
diff --git a/packages/shared-components/src/resize/index.ts b/packages/shared-components/src/resize/index.ts
index 7030fbe0fe..00a2b96250 100644
--- a/packages/shared-components/src/resize/index.ts
+++ b/packages/shared-components/src/resize/index.ts
@@ -27,11 +27,6 @@ export interface ResizerViewSnapshot {
      * This is the initial size of the panel if available; should be interpreted as percentage.
      */
     initialSize?: number;
-    /**
-     * Whether the separator is currently focused by navigating
-     * to it using keyboard input.
-     */
-    isFocusedViaKeyboard: boolean;
 }
 
 /**
diff --git a/packages/shared-components/src/resize/panel/LeftResizablePanelView.stories.tsx b/packages/shared-components/src/resize/panel/LeftResizablePanelView.stories.tsx
index b3badd97be..96d2048e86 100644
--- a/packages/shared-components/src/resize/panel/LeftResizablePanelView.stories.tsx
+++ b/packages/shared-components/src/resize/panel/LeftResizablePanelView.stories.tsx
@@ -41,14 +41,9 @@ const meta = {
     component: LeftResizablePanelViewWrapper,
     // This is a structural component, so nothing to visually test.
     tags: ["autodocs", "!snapshot"],
-    argTypes: {
-        // This snapshot state is not relevant for this View.
-        isFocusedViaKeyboard: { table: { disable: true } },
-    },
     args: {
         initialSize: 20,
         isCollapsed: false,
-        isFocusedViaKeyboard: false,
         onLeftPanelResize: fn(),
         setPanelHandle: fn(),
     },
diff --git a/packages/shared-components/src/resize/panel/LeftResizablePanelView.tsx b/packages/shared-components/src/resize/panel/LeftResizablePanelView.tsx
index b2ab2fb62e..9b3ac2fe7e 100644
--- a/packages/shared-components/src/resize/panel/LeftResizablePanelView.tsx
+++ b/packages/shared-components/src/resize/panel/LeftResizablePanelView.tsx
@@ -66,6 +66,7 @@ export function LeftResizablePanelView({
             defaultSize={defaultSize}
             onResize={vm.onLeftPanelResize}
             panelRef={setPanelRef}
+            groupResizeBehavior="preserve-pixel-size"
         >
             {children}
         </Panel>
diff --git a/packages/shared-components/src/resize/panel/__snapshots__/LeftResizablePanelView.test.tsx.snap b/packages/shared-components/src/resize/panel/__snapshots__/LeftResizablePanelView.test.tsx.snap
index df9befde86..fa685fba15 100644
--- a/packages/shared-components/src/resize/panel/__snapshots__/LeftResizablePanelView.test.tsx.snap
+++ b/packages/shared-components/src/resize/panel/__snapshots__/LeftResizablePanelView.test.tsx.snap
@@ -7,8 +7,8 @@ exports[`<LeftResizablePanelView /> > renders Default story 1`] = `
   >
     <div
       data-group="true"
-      data-testid="_r_0_"
-      id="_r_0_"
+      data-testid="react-use-id-1"
+      id="react-use-id-1"
       style="height: 100%; width: 100%; overflow: hidden; display: flex; flex-flow: row; touch-action: pan-y;"
     >
       <div
@@ -35,16 +35,16 @@ exports[`<LeftResizablePanelView /> > renders Default story 1`] = `
         aria-valuemin="0"
         aria-valuenow="0"
         data-separator="inactive"
-        data-testid="_r_2_"
-        id="_r_2_"
+        data-testid="react-use-id-2"
+        id="react-use-id-2"
         role="separator"
         style="flex: 0 0 auto; touch-action: none;"
         tabindex="0"
       />
       <div
         data-panel="true"
-        data-testid="_r_3_"
-        id="_r_3_"
+        data-testid="react-use-id-3"
+        id="react-use-id-3"
         style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 100 1 0px; overflow: visible;"
       >
         <div
diff --git a/packages/shared-components/src/resize/separator/SeparatorView.module.css b/packages/shared-components/src/resize/separator/SeparatorView.module.css
index 17eaae0fce..413e731147 100644
--- a/packages/shared-components/src/resize/separator/SeparatorView.module.css
+++ b/packages/shared-components/src/resize/separator/SeparatorView.module.css
@@ -6,21 +6,83 @@
  */
 
 .separator {
-    /* Hide the separator by default */
-    display: none;
     /* Necessary to avoid weird focus outlines (doubled on one side, absent on one side etc...) */
     outline-offset: -2px;
+
+    /* We set the separator container to relative so that the child container (activeSeparatorContainer)
+    can be absolutely positioned */
+    position: relative;
+
+    display: flex;
+    justify-content: center;
 }
 
-.separator[data-separator="hover"],
+/* When type=border, we just render a 1px border */
+.separator[data-separator-type="border"] {
+    /*
+    We reserve 1px of space even though the actual separator is absolute positioned.
+    This keeps the panel looking the same as when the border was part of the panel.
+    */
+    width: 1px;
+
+    /* We can disable the browser focus ring since we show a thicker separator on focus */
+    outline: none;
+
+    .activeSeparatorContainer {
+        .activeSeparator {
+            width: 0px;
+            border-right: 1px solid var(--cpd-color-bg-subtle-primary);
+            outline: none;
+        }
+    }
+}
+
+/* When type=bar, we render the 12px separator */
+.separator[data-separator-type="bar"] {
+    width: 12px;
+    display: flex;
+    align-items: center;
+    border-right: 1px solid var(--cpd-color-bg-subtle-primary);
+}
+
+.separator[data-separator-type="bar"][data-separator="hover"],
 .separator:focus-visible {
     background: var(--cpd-color-bg-action-tertiary-hovered);
 }
 
-.visible {
-    /* Show the separator when the left panel is collapsed */
+/* When type=border and the user hovers/focuses the separator, we make the separator thicker */
+.separator[data-separator-type="border"]:is(
+    [data-separator="hover"],
+    [data-separator="active"],
+    [data-separator="focus"]
+),
+.separator[data-separator-type="border"]:focus-visible {
+    .activeSeparatorContainer {
+        .activeSeparator {
+            width: 0px;
+            border-right: 2px solid var(--cpd-color-border-interactive-secondary);
+            outline: none;
+        }
+    }
+}
+
+/* Container for the separator when the left panel is expanded */
+.activeSeparatorContainer {
     display: flex;
-    align-items: center;
-    width: 12px;
-    border-right: 1px solid var(--cpd-color-bg-subtle-primary);
+    justify-content: center;
+
+    /*
+    By making this container absolutely positioned an wide enough to cover the entire hit region,
+    we're able to intercept all the pointer events.
+    Without this, we'd only capture the events within a narrow 2px/1px border.
+    */
+    position: absolute;
+    width: 10px;
+    z-index: 100;
+    height: 100%;
+
+    .activeSeparator {
+        /* Fade in/ fade out the border */
+        transition: border 0.15s ease-in-out 0.3s;
+    }
 }
diff --git a/packages/shared-components/src/resize/separator/SeparatorView.stories.tsx b/packages/shared-components/src/resize/separator/SeparatorView.stories.tsx
index a3366c591e..d5a3e5f0a7 100644
--- a/packages/shared-components/src/resize/separator/SeparatorView.stories.tsx
+++ b/packages/shared-components/src/resize/separator/SeparatorView.stories.tsx
@@ -16,8 +16,14 @@ import { Flex } from "../../core/utils/Flex";
 
 type SeparatorViewProps = ResizerViewSnapshot & SeparatorViewActions;
 
-const Wrapper = ({ onFocus, onBlur, onSeparatorClick, ...snapshot }: SeparatorViewProps): JSX.Element => {
-    const vm = useMockedViewModel(snapshot, { onFocus, onBlur, onSeparatorClick });
+const Wrapper = ({
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    onDoubleClick,
+    ...snapshot
+}: SeparatorViewProps): JSX.Element => {
+    const vm = useMockedViewModel(snapshot, { onPointerDown, onPointerMove, onPointerUp, onDoubleClick });
     return <SeparatorView className="Separator" vm={vm} />;
 };
 
@@ -28,11 +34,11 @@ const meta = {
     component: SeparatorViewWrapper,
     tags: ["autodocs"],
     args: {
-        onFocus: fn(),
-        onBlur: fn(),
-        onSeparatorClick: fn(),
+        onPointerUp: fn(),
+        onPointerMove: fn(),
+        onPointerDown: fn(),
+        onDoubleClick: fn(),
         isCollapsed: true,
-        isFocusedViaKeyboard: false,
     },
     parameters: {
         design: {
@@ -109,16 +115,17 @@ export const KeyboardFocused: Story = {
     decorators: [(Story) => commonDecorator(Story)],
     args: {
         isCollapsed: false,
-        isFocusedViaKeyboard: true,
     },
     play: async ({ canvas, canvasElement }) => {
         const separator = canvas.getByRole("separator");
         separator.focus();
+        // Wait for animations to finish
+        await new Promise((r) => setTimeout(r, 500));
         await expect(canvasElement).toMatchImageSnapshot();
     },
 };
 
-export const Hover: Story = {
+export const HoverWhenCollapsed: Story = {
     // We'll manually take a screenshot for this story
     tags: ["autodocs", "!snapshot"],
     decorators: [
@@ -150,3 +157,47 @@ export const Hover: Story = {
         await expect(canvasElement).toMatchImageSnapshot();
     },
 };
+
+export const HoverWhenExpanded: Story = {
+    // We'll manually take a screenshot for this story
+    tags: ["autodocs", "!snapshot"],
+    args: {
+        isCollapsed: false,
+    },
+    decorators: [
+        (Story) => (
+            <div
+                style={{
+                    height: "600px",
+                }}
+            >
+                <ResizableGroup>
+                    <div
+                        style={{
+                            height: "600px",
+                            width: "200px",
+                        }}
+                    />
+                    <Panel collapsible defaultSize="0" minSize="200px" maxSize="400px">
+                        <Flex tabIndex={0} align="center" justify="center">
+                            LEFT CONTENT
+                        </Flex>
+                    </Panel>
+                    <Story />
+                    <Panel>
+                        <Flex align="center" justify="center">
+                            MAIN CONTENT
+                        </Flex>
+                    </Panel>
+                </ResizableGroup>
+            </div>
+        ),
+    ],
+    play: async ({ canvas, canvasElement }) => {
+        const separator = canvas.getByRole("separator");
+        separator.dataset.separator = "hover";
+        // Wait for animations to finish
+        await new Promise((r) => setTimeout(r, 500));
+        await expect(canvasElement).toMatchImageSnapshot();
+    },
+};
diff --git a/packages/shared-components/src/resize/separator/SeparatorView.test.tsx b/packages/shared-components/src/resize/separator/SeparatorView.test.tsx
index 1887acbb57..fc6ea14191 100644
--- a/packages/shared-components/src/resize/separator/SeparatorView.test.tsx
+++ b/packages/shared-components/src/resize/separator/SeparatorView.test.tsx
@@ -15,15 +15,16 @@ import * as stories from "./SeparatorView.stories";
 import { BaseViewModel } from "../../core/viewmodel";
 import { ResizableGroup, Panel, type ResizerViewSnapshot, SeparatorView, type SeparatorViewActions } from "..";
 
-const { Default, LeftPanelExpanded, KeyboardFocused } = composeStories(stories);
+const { Default, LeftPanelExpanded, KeyboardFocused, HoverWhenCollapsed, HoverWhenExpanded } = composeStories(stories);
 
 class MockViewModel extends BaseViewModel<ResizerViewSnapshot, unknown> implements SeparatorViewActions {
     public constructor(snapshot: ResizerViewSnapshot) {
         super(undefined, snapshot);
     }
-    public onBlur: () => void = vi.fn();
-    public onFocus: () => void = vi.fn();
-    public onSeparatorClick: () => void = vi.fn();
+    public onPointerUp: () => void = vi.fn();
+    public onPointerMove: () => void = vi.fn();
+    public onPointerDown: () => void = vi.fn();
+    public onDoubleClick: () => void = vi.fn();
 }
 
 function renderPanel(initialSnapshot?: Partial<ResizerViewSnapshot>): MockViewModel {
@@ -55,19 +56,28 @@ describe("<SeparatorView />", () => {
         expect(container).toMatchSnapshot();
     });
 
-    it("should call onSeparatorClick() when clicked", async () => {
+    it("renders HoverWhenCollapsed story", () => {
+        const { container } = render(<HoverWhenCollapsed />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders HoverWhenExpanded story", () => {
+        const { container } = render(<HoverWhenExpanded />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("should call onPointerDown and onPointerUp on pointer events", async () => {
         const vm = renderPanel();
         const separator = screen.getByRole("separator");
         await userEvent.click(separator);
-        expect(vm.onSeparatorClick).toHaveBeenCalledOnce();
+        expect(vm.onPointerDown).toHaveBeenCalledOnce();
+        expect(vm.onPointerUp).toHaveBeenCalledOnce();
     });
 
-    it("should call onFocus and onBlur when receiving/loosing focus", async () => {
+    it("should call onDoubleClick on double click", async () => {
         const vm = renderPanel();
         const separator = screen.getByRole("separator");
-        separator.focus();
-        expect(vm.onFocus).toHaveBeenCalled();
-        separator.blur();
-        expect(vm.onBlur).toHaveBeenCalled();
+        await userEvent.dblClick(separator);
+        expect(vm.onDoubleClick).toHaveBeenCalledOnce();
     });
 });
diff --git a/packages/shared-components/src/resize/separator/SeparatorView.tsx b/packages/shared-components/src/resize/separator/SeparatorView.tsx
index c77c38764a..ae45c58e90 100644
--- a/packages/shared-components/src/resize/separator/SeparatorView.tsx
+++ b/packages/shared-components/src/resize/separator/SeparatorView.tsx
@@ -18,19 +18,26 @@ import { useI18n } from "../../core/i18n/i18nContext";
 
 export interface SeparatorViewActions {
     /**
-     * onClick handler for the separator.
+     * onPointerUp handler for separator.
      */
-    onSeparatorClick: () => void;
+    onPointerUp: () => void;
 
     /**
-     * onFocus handler for the separator.
+     * onPointerMove handler for separator. Takes the event so that how far the pointer has travelled
+     * since it went down can be measured.
      */
-    onFocus: () => void;
+    onPointerMove: (event: React.PointerEvent) => void;
 
     /**
-     * onBlur handler for the separator.
+     * onPointerDown handler for separator. Takes the event so that where the pointer went down can be
+     * measured from.
      */
-    onBlur: () => void;
+    onPointerDown: (event: React.PointerEvent) => void;
+
+    /**
+     * onDoubleClick handler for the separator.
+     */
+    onDoubleClick: () => void;
 }
 
 interface Props {
@@ -43,30 +50,51 @@ interface Props {
  */
 export function SeparatorView({ vm, className }: Props): React.ReactNode {
     const { translate: _t } = useI18n();
-    const { isCollapsed, isFocusedViaKeyboard } = useViewModel(vm);
+    const { isCollapsed } = useViewModel(vm);
 
-    const classes = classNames(styles.separator, className, {
-        [styles.visible]: isCollapsed || isFocusedViaKeyboard,
-    });
+    /**
+     * There are two types of separator:
+     * - bar: This shows a thick bar separator with a resize icon in the middle; shown when the panel is collapsed.
+     * - border: This is just a thin separator; shown when the panel is expanded.
+     */
+    const type = isCollapsed ? "bar" : "border";
+
+    const barContent = (
+        <Tooltip description={_t("left_panel|separator_label")} placement="right">
+            <DragIcon
+                width="20px"
+                height="12px"
+                // Without a custom view-box, this svg would scale incorrectly and would appear tiny within the separator.
+                // See https://github.com/element-hq/compound/issues/242
+                viewBox="3.999704360961914 8.999704360961914 16.000295639038086 6.000591278076172"
+                transform="rotate(90)"
+            />
+        </Tooltip>
+    );
+
+    /**
+     * This border is:
+     * - a 1px border that separates the left panel and main content.
+     * - a 2px border when the panel is expanded and the user is interacting with the separator.
+     */
+    const border = (
+        <div className={styles.activeSeparatorContainer}>
+            <div className={styles.activeSeparator} />
+        </div>
+    );
 
     return (
         <Separator
-            className={classes}
-            onClick={vm.onSeparatorClick}
-            onFocus={vm.onFocus}
-            onBlur={vm.onBlur}
+            className={classNames(styles.separator, className)}
+            onPointerUp={vm.onPointerUp}
+            onPointerMove={vm.onPointerMove}
+            onPointerDown={vm.onPointerDown}
             aria-label={_t("left_panel|separator_label")}
+            data-separator-type={type}
+            onDoubleClick={vm.onDoubleClick}
+            disableDoubleClick
         >
-            <Tooltip description={_t("left_panel|separator_label")} placement="right">
-                <DragIcon
-                    width="20px"
-                    height="12px"
-                    // Without a custom view-box, this svg would scale incorrectly and would appear tiny within the separator.
-                    // See https://github.com/element-hq/compound/issues/242
-                    viewBox="3.999704360961914 8.999704360961914 16.000295639038086 6.000591278076172"
-                    transform="rotate(90)"
-                />
-            </Tooltip>
+            {type === "bar" ? barContent : border}
         </Separator>
     );
 }
diff --git a/packages/shared-components/src/resize/separator/__snapshots__/SeparatorView.test.tsx.snap b/packages/shared-components/src/resize/separator/__snapshots__/SeparatorView.test.tsx.snap
index 57116cb717..6ad257d117 100644
--- a/packages/shared-components/src/resize/separator/__snapshots__/SeparatorView.test.tsx.snap
+++ b/packages/shared-components/src/resize/separator/__snapshots__/SeparatorView.test.tsx.snap
@@ -7,14 +7,14 @@ exports[`<SeparatorView /> > renders Default story 1`] = `
   >
     <div
       data-group="true"
-      data-testid="_r_0_"
-      id="_r_0_"
+      data-testid="react-use-id-1"
+      id="react-use-id-1"
       style="height: 100%; width: 100%; overflow: hidden; display: flex; flex-flow: row; touch-action: pan-y;"
     >
       <div
         data-panel="true"
-        data-testid="_r_1_"
-        id="_r_1_"
+        data-testid="react-use-id-2"
+        id="react-use-id-2"
         style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 0 1 0px; overflow: visible;"
       >
         <div
@@ -30,16 +30,17 @@ exports[`<SeparatorView /> > renders Default story 1`] = `
         </div>
       </div>
       <div
-        aria-controls="_r_1_"
+        aria-controls="react-use-id-2"
         aria-label="Click or drag to expand"
         aria-orientation="vertical"
         aria-valuemax="99.502"
         aria-valuemin="0"
         aria-valuenow="0"
-        class="SeparatorView-module_separator Separator SeparatorView-module_visible"
+        class="SeparatorView-module_separator Separator"
         data-separator="inactive"
-        data-testid="_r_2_"
-        id="_r_2_"
+        data-separator-type="bar"
+        data-testid="react-use-id-3"
+        id="react-use-id-3"
         role="separator"
         style="flex: 0 0 auto; touch-action: none;"
         tabindex="0"
@@ -59,8 +60,166 @@ exports[`<SeparatorView /> > renders Default story 1`] = `
       </div>
       <div
         data-panel="true"
-        data-testid="_r_7_"
-        id="_r_7_"
+        data-testid="react-use-id-4"
+        id="react-use-id-4"
+        style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 100 1 0px; overflow: visible;"
+      >
+        <div
+          style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
+        >
+          <div
+            class="Flex-module_flex"
+            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+          >
+            MAIN CONTENT
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<SeparatorView /> > renders HoverWhenCollapsed story 1`] = `
+<div>
+  <div
+    style="height: 600px;"
+  >
+    <div
+      data-group="true"
+      data-testid="react-use-id-1"
+      id="react-use-id-1"
+      style="height: 100%; width: 100%; overflow: hidden; display: flex; flex-flow: row; touch-action: pan-y;"
+    >
+      <div
+        data-panel="true"
+        data-testid="react-use-id-2"
+        id="react-use-id-2"
+        style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 0 1 0px; overflow: visible;"
+      >
+        <div
+          style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
+        >
+          <div
+            class="Flex-module_flex"
+            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+            tabindex="0"
+          >
+            LEFT CONTENT
+          </div>
+        </div>
+      </div>
+      <div
+        aria-controls="react-use-id-2"
+        aria-label="Click or drag to expand"
+        aria-orientation="vertical"
+        aria-valuemax="99.502"
+        aria-valuemin="0"
+        aria-valuenow="0"
+        class="SeparatorView-module_separator Separator"
+        data-separator="inactive"
+        data-separator-type="bar"
+        data-testid="react-use-id-3"
+        id="react-use-id-3"
+        role="separator"
+        style="flex: 0 0 auto; touch-action: none;"
+        tabindex="0"
+      >
+        <svg
+          fill="currentColor"
+          height="12px"
+          transform="rotate(90)"
+          viewBox="3.999704360961914 8.999704360961914 16.000295639038086 6.000591278076172"
+          width="20px"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M5 15a.97.97 0 0 1-.713-.287A.97.97 0 0 1 4 14q0-.424.287-.713A.97.97 0 0 1 5 13h14q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 19 15zm0-4a.97.97 0 0 1-.713-.287A.97.97 0 0 1 4 10q0-.424.287-.713A.97.97 0 0 1 5 9h14q.424 0 .712.287Q20 9.576 20 10t-.288.713A.97.97 0 0 1 19 11z"
+          />
+        </svg>
+      </div>
+      <div
+        data-panel="true"
+        data-testid="react-use-id-4"
+        id="react-use-id-4"
+        style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 100 1 0px; overflow: visible;"
+      >
+        <div
+          style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
+        >
+          <div
+            class="Flex-module_flex"
+            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+          >
+            MAIN CONTENT
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<SeparatorView /> > renders HoverWhenExpanded story 1`] = `
+<div>
+  <div
+    style="height: 600px;"
+  >
+    <div
+      data-group="true"
+      data-testid="react-use-id-1"
+      id="react-use-id-1"
+      style="height: 100%; width: 100%; overflow: hidden; display: flex; flex-flow: row; touch-action: pan-y;"
+    >
+      <div
+        style="height: 600px; width: 200px;"
+      />
+      <div
+        data-panel="true"
+        data-testid="react-use-id-2"
+        id="react-use-id-2"
+        style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 0 1 0px; overflow: visible;"
+      >
+        <div
+          style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
+        >
+          <div
+            class="Flex-module_flex"
+            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+            tabindex="0"
+          >
+            LEFT CONTENT
+          </div>
+        </div>
+      </div>
+      <div
+        aria-controls="react-use-id-2"
+        aria-label="Click or drag to expand"
+        aria-orientation="vertical"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        aria-valuenow="0"
+        class="SeparatorView-module_separator Separator"
+        data-separator="inactive"
+        data-separator-type="border"
+        data-testid="react-use-id-3"
+        id="react-use-id-3"
+        role="separator"
+        style="flex: 0 0 auto; touch-action: none;"
+        tabindex="0"
+      >
+        <div
+          class="SeparatorView-module_activeSeparatorContainer"
+        >
+          <div
+            class="SeparatorView-module_activeSeparator"
+          />
+        </div>
+      </div>
+      <div
+        data-panel="true"
+        data-testid="react-use-id-4"
+        id="react-use-id-4"
         style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 100 1 0px; overflow: visible;"
       >
         <div
@@ -86,15 +245,15 @@ exports[`<SeparatorView /> > renders KeyboardFocused story 1`] = `
   >
     <div
       data-group="true"
-      data-testid="_r_g_"
-      id="_r_g_"
+      data-testid="react-use-id-1"
+      id="react-use-id-1"
       style="height: 100%; width: 100%; overflow: hidden; display: flex; flex-flow: row; touch-action: pan-y;"
     >
       <div
         data-panel="true"
-        data-testid="_r_h_"
-        id="_r_h_"
-        style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 49.751 1 0px; overflow: visible;"
+        data-testid="react-use-id-2"
+        id="react-use-id-2"
+        style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 48.426 1 0px; overflow: visible;"
       >
         <div
           style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
@@ -109,38 +268,34 @@ exports[`<SeparatorView /> > renders KeyboardFocused story 1`] = `
         </div>
       </div>
       <div
-        aria-controls="_r_h_"
+        aria-controls="react-use-id-2"
         aria-label="Click or drag to expand"
         aria-orientation="vertical"
-        aria-valuemax="99.502"
+        aria-valuemax="96.852"
         aria-valuemin="0"
-        aria-valuenow="49.751"
-        class="SeparatorView-module_separator Separator SeparatorView-module_visible"
+        aria-valuenow="48.426"
+        class="SeparatorView-module_separator Separator"
         data-separator="inactive"
-        data-testid="_r_i_"
-        id="_r_i_"
+        data-separator-type="border"
+        data-testid="react-use-id-3"
+        id="react-use-id-3"
         role="separator"
         style="flex: 0 0 auto; touch-action: none;"
         tabindex="0"
       >
-        <svg
-          fill="currentColor"
-          height="12px"
-          transform="rotate(90)"
-          viewBox="3.999704360961914 8.999704360961914 16.000295639038086 6.000591278076172"
-          width="20px"
-          xmlns="http://www.w3.org/2000/svg"
+        <div
+          class="SeparatorView-module_activeSeparatorContainer"
         >
-          <path
-            d="M5 15a.97.97 0 0 1-.713-.287A.97.97 0 0 1 4 14q0-.424.287-.713A.97.97 0 0 1 5 13h14q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 19 15zm0-4a.97.97 0 0 1-.713-.287A.97.97 0 0 1 4 10q0-.424.287-.713A.97.97 0 0 1 5 9h14q.424 0 .712.287Q20 9.576 20 10t-.288.713A.97.97 0 0 1 19 11z"
+          <div
+            class="SeparatorView-module_activeSeparator"
           />
-        </svg>
+        </div>
       </div>
       <div
         data-panel="true"
-        data-testid="_r_n_"
-        id="_r_n_"
-        style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 50.249 1 0px; overflow: visible;"
+        data-testid="react-use-id-4"
+        id="react-use-id-4"
+        style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 51.574 1 0px; overflow: visible;"
       >
         <div
           style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
@@ -165,15 +320,15 @@ exports[`<SeparatorView /> > renders LeftPanelExpanded story 1`] = `
   >
     <div
       data-group="true"
-      data-testid="_r_8_"
-      id="_r_8_"
+      data-testid="react-use-id-1"
+      id="react-use-id-1"
       style="height: 100%; width: 100%; overflow: hidden; display: flex; flex-flow: row; touch-action: pan-y;"
     >
       <div
         data-panel="true"
-        data-testid="_r_9_"
-        id="_r_9_"
-        style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 48.309 1 0px; overflow: visible;"
+        data-testid="react-use-id-2"
+        id="react-use-id-2"
+        style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 48.426 1 0px; overflow: visible;"
       >
         <div
           style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
@@ -188,34 +343,34 @@ exports[`<SeparatorView /> > renders LeftPanelExpanded story 1`] = `
         </div>
       </div>
       <div
+        aria-controls="react-use-id-2"
         aria-label="Click or drag to expand"
         aria-orientation="vertical"
+        aria-valuemax="96.852"
+        aria-valuemin="0"
+        aria-valuenow="48.426"
         class="SeparatorView-module_separator Separator"
         data-separator="inactive"
-        data-testid="_r_a_"
-        id="_r_a_"
+        data-separator-type="border"
+        data-testid="react-use-id-3"
+        id="react-use-id-3"
         role="separator"
         style="flex: 0 0 auto; touch-action: none;"
         tabindex="0"
       >
-        <svg
-          fill="currentColor"
-          height="12px"
-          transform="rotate(90)"
-          viewBox="3.999704360961914 8.999704360961914 16.000295639038086 6.000591278076172"
-          width="20px"
-          xmlns="http://www.w3.org/2000/svg"
+        <div
+          class="SeparatorView-module_activeSeparatorContainer"
         >
-          <path
-            d="M5 15a.97.97 0 0 1-.713-.287A.97.97 0 0 1 4 14q0-.424.287-.713A.97.97 0 0 1 5 13h14q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 19 15zm0-4a.97.97 0 0 1-.713-.287A.97.97 0 0 1 4 10q0-.424.287-.713A.97.97 0 0 1 5 9h14q.424 0 .712.287Q20 9.576 20 10t-.288.713A.97.97 0 0 1 19 11z"
+          <div
+            class="SeparatorView-module_activeSeparator"
           />
-        </svg>
+        </div>
       </div>
       <div
         data-panel="true"
-        data-testid="_r_f_"
-        id="_r_f_"
-        style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 51.691 1 0px; overflow: visible;"
+        data-testid="react-use-id-4"
+        id="react-use-id-4"
+        style="min-height: 0px; max-height: 100%; height: auto; min-width: 0px; max-width: 100%; width: auto; border: 0px; padding: 0px; margin: 0px; display: flex; flex: 51.574 1 0px; overflow: visible;"
       >
         <div
           style="max-height: 100%; max-width: 100%; flex-grow: 1; overflow: auto; touch-action: pan-y;"
diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx
index d622503c1d..fd92c92ea4 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.stories.tsx
@@ -32,6 +32,7 @@ const RoomListHeaderViewWrapperImpl = ({
     toggleMessagePreview,
     createSection,
     collapseOrExpandSections,
+    closeSectionReleaseAnnouncement,
     ...rest
 }: RoomListHeaderProps): JSX.Element => {
     const vm = useMockedViewModel(rest, {
@@ -46,6 +47,7 @@ const RoomListHeaderViewWrapperImpl = ({
         toggleMessagePreview,
         createSection,
         collapseOrExpandSections,
+        closeSectionReleaseAnnouncement,
     });
     return <RoomListHeaderView vm={vm} />;
 };
@@ -68,6 +70,7 @@ const meta = {
         toggleMessagePreview: fn(),
         createSection: fn(),
         collapseOrExpandSections: fn(),
+        closeSectionReleaseAnnouncement: fn(),
     },
     parameters: {
         design: {
@@ -88,12 +91,6 @@ export const NoSpaceMenu: Story = {
     },
 };
 
-export const NoComposeMenu: Story = {
-    args: {
-        displayComposeMenu: false,
-    },
-};
-
 export const LongTitle: Story = {
     decorators: [
         (Story) => (
@@ -107,14 +104,55 @@ export const LongTitle: Story = {
     },
 };
 
-export const PlusIcon: Story = {
-    args: {
-        useComposeIcon: false,
-    },
-};
-
 export const CollapseSections: Story = {
     args: {
         collapseSections: "collapse",
     },
 };
+
+export const ExpandSections: Story = {
+    args: {
+        collapseSections: "expand",
+    },
+};
+
+export const DisplaySectionReleaseAnnouncement: Story = {
+    decorators: [
+        (Story) => (
+            <div style={{ width: "300px" }}>
+                <Story />
+            </div>
+        ),
+    ],
+    args: {
+        displaySectionReleaseAnnouncement: true,
+    },
+    parameters: {
+        a11y: {
+            config: {
+                rules: [
+                    {
+                        // compound-web's ReleaseAnnouncement renders its header as <h3>,
+                        // which jumps from RoomListHeaderView's <h1> ("Rooms").
+                        id: "heading-order",
+                        enabled: false,
+                    },
+                ],
+            },
+        },
+    },
+};
+
+export const SectionsDisabled: Story = {
+    args: {
+        areSectionsEnabled: false,
+    },
+};
+
+export const NoComposeMenu: Story = {
+    args: {
+        canCreateRoom: false,
+        canCreateVideoRoom: false,
+        areSectionsEnabled: false,
+    },
+};
diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.test.tsx b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.test.tsx
index d6ce1e9e3f..7c13b5c4ed 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.test.tsx
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.test.tsx
@@ -12,7 +12,7 @@ import React from "react";
 
 import * as stories from "./RoomListHeaderView.stories";
 
-const { Default, NoComposeMenu, NoSpaceMenu, CollapseSections } = composeStories(stories);
+const { Default, NoSpaceMenu, CollapseSections, ExpandSections } = composeStories(stories);
 
 describe("RoomListHeaderView", () => {
     it("renders the default state", () => {
@@ -20,13 +20,18 @@ describe("RoomListHeaderView", () => {
         expect(container).toMatchSnapshot();
     });
 
-    it("renders without compose menu", () => {
-        const { container } = render(<NoComposeMenu />);
+    it("renders without space menu", () => {
+        const { container } = render(<NoSpaceMenu />);
         expect(container).toMatchSnapshot();
     });
 
-    it("renders without space menu", () => {
-        const { container } = render(<NoSpaceMenu />);
+    it("renders collapse button", () => {
+        const { container } = render(<CollapseSections />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders expand button", () => {
+        const { container } = render(<ExpandSections />);
         expect(container).toMatchSnapshot();
     });
 
diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.tsx b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.tsx
index d68fd25b0e..45af90aeb6 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.tsx
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.tsx
@@ -7,9 +7,7 @@
 
 import React, { type JSX } from "react";
 import { IconButton, H1 } from "@vector-im/compound-web";
-import ComposeIcon from "@vector-im/compound-design-tokens/assets/web/icons/compose";
-import PlusIcon from "@vector-im/compound-design-tokens/assets/web/icons/plus";
-import CollapseAllIcon from "@vector-im/compound-design-tokens/assets/web/icons/collapse-all";
+import { CollapseAllIcon, ExpandAllIcon, ChatIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { type ViewModel, useViewModel } from "../../core/viewmodel";
 import { Flex } from "../../core/utils/Flex";
@@ -32,11 +30,6 @@ export interface RoomListHeaderViewSnapshot {
      * The title of the room list
      */
     title: string;
-    /**
-     * Whether to display the compose menu
-     * True if the user can create rooms
-     */
-    displayComposeMenu: boolean;
     /**
      * Whether to display the space menu
      * True if there is an active space
@@ -67,19 +60,19 @@ export interface RoomListHeaderViewSnapshot {
      */
     isMessagePreviewEnabled: boolean;
     /**
-     * Whether the user can create sections in the room list.
+     * Whether sections are enabled in the room list.
      */
-    canCreateSection: boolean;
-    /**
-     * Whether to use the compose icon instead of the create icon.
-     */
-    useComposeIcon: boolean;
+    areSectionsEnabled: boolean;
     /**
      * If "collapse", an icon to collapse all sections is shown.
      * If "expand", an icon to expand all sections is shown.
      * If undefined, no  icon are shown.
      */
     collapseSections?: CollapseSectionsOption;
+    /**
+     *  Whether to display the section release announcement
+     */
+    displaySectionReleaseAnnouncement: boolean;
 }
 
 export interface RoomListHeaderViewActions {
@@ -127,6 +120,10 @@ export interface RoomListHeaderViewActions {
      * Collapse or expand all sections in the room list depending on the current state.
      */
     collapseOrExpandSections: () => void;
+    /**
+     * Close the section release announcement
+     */
+    closeSectionReleaseAnnouncement: () => void;
 }
 
 /**
@@ -152,7 +149,9 @@ interface RoomListHeaderViewProps {
  */
 export function RoomListHeaderView({ vm }: Readonly<RoomListHeaderViewProps>): JSX.Element {
     const { translate: _t } = useI18n();
-    const { title, displaySpaceMenu, displayComposeMenu, useComposeIcon, collapseSections } = useViewModel(vm);
+    const { title, displaySpaceMenu, collapseSections, areSectionsEnabled, canCreateRoom, canCreateVideoRoom } =
+        useViewModel(vm);
+    const canOnlyStartChat = !areSectionsEnabled && !canCreateRoom && !canCreateVideoRoom;
 
     return (
         <Flex
@@ -171,7 +170,7 @@ export function RoomListHeaderView({ vm }: Readonly<RoomListHeaderViewProps>): J
                 </Flex>
                 <Flex align="center" gap="var(--cpd-space-2x)">
                     <OptionMenuView vm={vm} />
-                    {collapseSections && (
+                    {areSectionsEnabled && collapseSections && (
                         <IconButton
                             size="28px"
                             style={{ padding: "4px" }}
@@ -182,27 +181,25 @@ export function RoomListHeaderView({ vm }: Readonly<RoomListHeaderViewProps>): J
                                     : _t("room_list|expand_all_sections")
                             }
                         >
-                            <CollapseAllIcon color="var(--cpd-color-icon-secondary)" aria-hidden />
-                        </IconButton>
-                    )}
-
-                    {/* If we don't display the compose menu, it means that the user can only send DM */}
-                    {displayComposeMenu ? (
-                        <ComposeMenuView vm={vm} />
-                    ) : (
-                        <IconButton
-                            size="28px"
-                            style={{ padding: "4px" }}
-                            onClick={(e) => vm.createChatRoom(e.nativeEvent)}
-                            tooltip={_t("action|new_conversation")}
-                        >
-                            {useComposeIcon ? (
-                                <ComposeIcon color="var(--cpd-color-icon-secondary)" aria-hidden />
+                            {collapseSections === "collapse" ? (
+                                <CollapseAllIcon color="var(--cpd-color-icon-secondary)" aria-hidden />
                             ) : (
-                                <PlusIcon color="var(--cpd-color-icon-secondary)" aria-hidden />
+                                <ExpandAllIcon color="var(--cpd-color-icon-secondary)" aria-hidden />
                             )}
                         </IconButton>
                     )}
+                    {canOnlyStartChat ? (
+                        <IconButton
+                            size="28px"
+                            style={{ padding: "4px" }} // Work around miscalculated padding on 28px button: https://github.com/element-hq/compound/issues/409
+                            onClick={(e) => vm.createChatRoom(e.nativeEvent)}
+                            tooltip={_t("action|start_chat")}
+                        >
+                            <ChatIcon color="var(--cpd-color-icon-secondary)" aria-hidden />
+                        </IconButton>
+                    ) : (
+                        <ComposeMenuView vm={vm} />
+                    )}
                 </Flex>
             </Flex>
         </Flex>
diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/__snapshots__/RoomListHeaderView.test.tsx.snap b/packages/shared-components/src/room-list/RoomListHeaderView/__snapshots__/RoomListHeaderView.test.tsx.snap
index 6608b5b3f3..68e8085b7e 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/__snapshots__/RoomListHeaderView.test.tsx.snap
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/__snapshots__/RoomListHeaderView.test.tsx.snap
@@ -1,5 +1,317 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`RoomListHeaderView > renders collapse button 1`] = `
+<div>
+  <header
+    aria-label="Room options"
+    class="Flex-module_flex RoomListHeaderView-module_header"
+    data-testid="room-list-header"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: end; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+  >
+    <div
+      class="Flex-module_flex RoomListHeaderView-module_container"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+    >
+      <div
+        class="Flex-module_flex RoomListHeaderView-module_title"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+      >
+        <h1
+          class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+          title="Rooms"
+        >
+          Rooms
+        </h1>
+        <button
+          aria-disabled="false"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="Open space menu"
+          class="_icon-button_1215g_8 SpaceMenuView-module_button"
+          data-kind="primary"
+          data-state="closed"
+          id="radix-react-use-id-1"
+          role="button"
+          style="--cpd-icon-button-size: 24px; padding: 2px;"
+          tabindex="0"
+          type="button"
+        >
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
+      <div
+        class="Flex-module_flex"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+      >
+        <button
+          aria-disabled="false"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="Room Options"
+          aria-labelledby="react-use-id-2"
+          class="_icon-button_1215g_8"
+          data-kind="primary"
+          data-state="closed"
+          id="radix-react-use-id-3"
+          role="button"
+          style="--cpd-icon-button-size: 28px; padding: 4px;"
+          tabindex="0"
+          type="button"
+        >
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+              />
+            </svg>
+          </div>
+        </button>
+        <button
+          aria-labelledby="react-use-id-4"
+          class="_icon-button_1215g_8"
+          data-kind="primary"
+          role="button"
+          style="--cpd-icon-button-size: 28px; padding: 4px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              aria-hidden="true"
+              color="var(--cpd-color-icon-secondary)"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m12 16.975-3.9 3.9a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275.95.95 0 0 1-.275-.7q0-.425.275-.7l3.875-3.875q.575-.575 1.425-.575t1.425.575l3.875 3.875a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275zm0-9.8 3.9-3.9A.95.95 0 0 1 16.6 3q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7L13.425 8.55q-.575.575-1.425.575t-1.425-.575L6.7 4.675a.95.95 0 0 1-.275-.7q0-.425.275-.7A.95.95 0 0 1 7.4 3q.425 0 .7.275z"
+              />
+            </svg>
+          </div>
+        </button>
+        <button
+          aria-disabled="false"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-labelledby="react-use-id-5"
+          class="_icon-button_1215g_8"
+          data-kind="primary"
+          data-state="closed"
+          id="radix-react-use-id-6"
+          role="button"
+          style="--cpd-icon-button-size: 28px; padding: 4px;"
+          tabindex="0"
+          type="button"
+        >
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              aria-hidden="true"
+              color="var(--cpd-color-icon-secondary)"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M11 13H6a.97.97 0 0 1-.713-.287A.97.97 0 0 1 5 12q0-.424.287-.713A.97.97 0 0 1 6 11h5V6q0-.424.287-.713A.97.97 0 0 1 12 5q.424 0 .713.287Q13 5.576 13 6v5h5q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 18 13h-5v5q0 .424-.287.712A.97.97 0 0 1 12 19a.97.97 0 0 1-.713-.288A.97.97 0 0 1 11 18z"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
+    </div>
+  </header>
+</div>
+`;
+
+exports[`RoomListHeaderView > renders expand button 1`] = `
+<div>
+  <header
+    aria-label="Room options"
+    class="Flex-module_flex RoomListHeaderView-module_header"
+    data-testid="room-list-header"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: end; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+  >
+    <div
+      class="Flex-module_flex RoomListHeaderView-module_container"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+    >
+      <div
+        class="Flex-module_flex RoomListHeaderView-module_title"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+      >
+        <h1
+          class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
+          title="Rooms"
+        >
+          Rooms
+        </h1>
+        <button
+          aria-disabled="false"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="Open space menu"
+          class="_icon-button_1215g_8 SpaceMenuView-module_button"
+          data-kind="primary"
+          data-state="closed"
+          id="radix-react-use-id-1"
+          role="button"
+          style="--cpd-icon-button-size: 24px; padding: 2px;"
+          tabindex="0"
+          type="button"
+        >
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
+      <div
+        class="Flex-module_flex"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+      >
+        <button
+          aria-disabled="false"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="Room Options"
+          aria-labelledby="react-use-id-2"
+          class="_icon-button_1215g_8"
+          data-kind="primary"
+          data-state="closed"
+          id="radix-react-use-id-3"
+          role="button"
+          style="--cpd-icon-button-size: 28px; padding: 4px;"
+          tabindex="0"
+          type="button"
+        >
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+              />
+            </svg>
+          </div>
+        </button>
+        <button
+          aria-labelledby="react-use-id-4"
+          class="_icon-button_1215g_8"
+          data-kind="primary"
+          role="button"
+          style="--cpd-icon-button-size: 28px; padding: 4px;"
+          tabindex="0"
+        >
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              aria-hidden="true"
+              color="var(--cpd-color-icon-secondary)"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="m12 19.2 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-3.875 3.875q-.575.575-1.425.575t-1.425-.575L6.7 16.7a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275zm0-14.25-3.9 3.9a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275.95.95 0 0 1-.275-.7q0-.425.275-.7l3.875-3.875Q11.15 3 12 3t1.425.575L17.3 7.45a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275z"
+              />
+            </svg>
+          </div>
+        </button>
+        <button
+          aria-disabled="false"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-labelledby="react-use-id-5"
+          class="_icon-button_1215g_8"
+          data-kind="primary"
+          data-state="closed"
+          id="radix-react-use-id-6"
+          role="button"
+          style="--cpd-icon-button-size: 28px; padding: 4px;"
+          tabindex="0"
+          type="button"
+        >
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
+          >
+            <svg
+              aria-hidden="true"
+              color="var(--cpd-color-icon-secondary)"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M11 13H6a.97.97 0 0 1-.713-.287A.97.97 0 0 1 5 12q0-.424.287-.713A.97.97 0 0 1 6 11h5V6q0-.424.287-.713A.97.97 0 0 1 12 5q.424 0 .713.287Q13 5.576 13 6v5h5q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 18 13h-5v5q0 .424-.287.712A.97.97 0 0 1 12 19a.97.97 0 0 1-.713-.288A.97.97 0 0 1 11 18z"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
+    </div>
+  </header>
+</div>
+`;
+
 exports[`RoomListHeaderView > renders the default state 1`] = `
 <div>
   <header
@@ -30,7 +342,7 @@ exports[`RoomListHeaderView > renders the default state 1`] = `
           class="_icon-button_1215g_8 SpaceMenuView-module_button"
           data-kind="primary"
           data-state="closed"
-          id="radix-_r_0_"
+          id="radix-react-use-id-1"
           role="button"
           style="--cpd-icon-button-size: 24px; padding: 2px;"
           tabindex="0"
@@ -63,11 +375,11 @@ exports[`RoomListHeaderView > renders the default state 1`] = `
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="Room Options"
-          aria-labelledby="_r_4_"
+          aria-labelledby="react-use-id-2"
           class="_icon-button_1215g_8"
           data-kind="primary"
           data-state="closed"
-          id="radix-_r_2_"
+          id="radix-react-use-id-3"
           role="button"
           style="--cpd-icon-button-size: 28px; padding: 4px;"
           tabindex="0"
@@ -94,11 +406,11 @@ exports[`RoomListHeaderView > renders the default state 1`] = `
           aria-disabled="false"
           aria-expanded="false"
           aria-haspopup="menu"
-          aria-labelledby="_r_b_"
+          aria-labelledby="react-use-id-4"
           class="_icon-button_1215g_8"
           data-kind="primary"
           data-state="closed"
-          id="radix-_r_9_"
+          id="radix-react-use-id-5"
           role="button"
           style="--cpd-icon-button-size: 28px; padding: 4px;"
           tabindex="0"
@@ -118,140 +430,7 @@ exports[`RoomListHeaderView > renders the default state 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                clip-rule="evenodd"
-                d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
-                fill-rule="evenodd"
-              />
-              <path
-                d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
-              />
-            </svg>
-          </div>
-        </button>
-      </div>
-    </div>
-  </header>
-</div>
-`;
-
-exports[`RoomListHeaderView > renders without compose menu 1`] = `
-<div>
-  <header
-    aria-label="Room options"
-    class="Flex-module_flex RoomListHeaderView-module_header"
-    data-testid="room-list-header"
-    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: end; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
-  >
-    <div
-      class="Flex-module_flex RoomListHeaderView-module_container"
-      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-    >
-      <div
-        class="Flex-module_flex RoomListHeaderView-module_title"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-      >
-        <h1
-          class="_typography_6v6n8_153 _font-heading-sm-semibold_6v6n8_93"
-          title="Rooms"
-        >
-          Rooms
-        </h1>
-        <button
-          aria-disabled="false"
-          aria-expanded="false"
-          aria-haspopup="menu"
-          aria-label="Open space menu"
-          class="_icon-button_1215g_8 SpaceMenuView-module_button"
-          data-kind="primary"
-          data-state="closed"
-          id="radix-_r_i_"
-          role="button"
-          style="--cpd-icon-button-size: 24px; padding: 2px;"
-          tabindex="0"
-          type="button"
-        >
-          <div
-            class="_indicator-icon_147l5_17"
-            style="--cpd-icon-button-size: 100%;"
-          >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-              />
-            </svg>
-          </div>
-        </button>
-      </div>
-      <div
-        class="Flex-module_flex"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-      >
-        <button
-          aria-disabled="false"
-          aria-expanded="false"
-          aria-haspopup="menu"
-          aria-label="Room Options"
-          aria-labelledby="_r_m_"
-          class="_icon-button_1215g_8"
-          data-kind="primary"
-          data-state="closed"
-          id="radix-_r_k_"
-          role="button"
-          style="--cpd-icon-button-size: 28px; padding: 4px;"
-          tabindex="0"
-          type="button"
-        >
-          <div
-            class="_indicator-icon_147l5_17"
-            style="--cpd-icon-button-size: 100%;"
-          >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-              />
-            </svg>
-          </div>
-        </button>
-        <button
-          aria-labelledby="_r_r_"
-          class="_icon-button_1215g_8"
-          data-kind="primary"
-          role="button"
-          style="--cpd-icon-button-size: 28px; padding: 4px;"
-          tabindex="0"
-        >
-          <div
-            class="_indicator-icon_147l5_17"
-            style="--cpd-icon-button-size: 100%;"
-          >
-            <svg
-              aria-hidden="true"
-              color="var(--cpd-color-icon-secondary)"
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
-                fill-rule="evenodd"
-              />
-              <path
-                d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+                d="M11 13H6a.97.97 0 0 1-.713-.287A.97.97 0 0 1 5 12q0-.424.287-.713A.97.97 0 0 1 6 11h5V6q0-.424.287-.713A.97.97 0 0 1 12 5q.424 0 .713.287Q13 5.576 13 6v5h5q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 18 13h-5v5q0 .424-.287.712A.97.97 0 0 1 12 19a.97.97 0 0 1-.713-.288A.97.97 0 0 1 11 18z"
               />
             </svg>
           </div>
@@ -294,11 +473,11 @@ exports[`RoomListHeaderView > renders without space menu 1`] = `
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="Room Options"
-          aria-labelledby="_r_14_"
+          aria-labelledby="react-use-id-1"
           class="_icon-button_1215g_8"
           data-kind="primary"
           data-state="closed"
-          id="radix-_r_12_"
+          id="radix-react-use-id-2"
           role="button"
           style="--cpd-icon-button-size: 28px; padding: 4px;"
           tabindex="0"
@@ -325,11 +504,11 @@ exports[`RoomListHeaderView > renders without space menu 1`] = `
           aria-disabled="false"
           aria-expanded="false"
           aria-haspopup="menu"
-          aria-labelledby="_r_1b_"
+          aria-labelledby="react-use-id-3"
           class="_icon-button_1215g_8"
           data-kind="primary"
           data-state="closed"
-          id="radix-_r_19_"
+          id="radix-react-use-id-4"
           role="button"
           style="--cpd-icon-button-size: 28px; padding: 4px;"
           tabindex="0"
@@ -349,12 +528,7 @@ exports[`RoomListHeaderView > renders without space menu 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                clip-rule="evenodd"
-                d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
-                fill-rule="evenodd"
-              />
-              <path
-                d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+                d="M11 13H6a.97.97 0 0 1-.713-.287A.97.97 0 0 1 5 12q0-.424.287-.713A.97.97 0 0 1 6 11h5V6q0-.424.287-.713A.97.97 0 0 1 12 5q.424 0 .713.287Q13 5.576 13 6v5h5q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 18 13h-5v5q0 .424-.287.712A.97.97 0 0 1 12 19a.97.97 0 0 1-.713-.288A.97.97 0 0 1 11 18z"
               />
             </svg>
           </div>
diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/default-snapshot.ts b/packages/shared-components/src/room-list/RoomListHeaderView/default-snapshot.ts
index 41887e8ed4..5bfbc44093 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/default-snapshot.ts
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/default-snapshot.ts
@@ -9,7 +9,6 @@ import { type RoomListHeaderViewSnapshot } from "./RoomListHeaderView";
 
 export const defaultSnapshot: RoomListHeaderViewSnapshot = {
     title: "Rooms",
-    displayComposeMenu: true,
     displaySpaceMenu: true,
     canCreateRoom: true,
     canCreateVideoRoom: true,
@@ -17,6 +16,6 @@ export const defaultSnapshot: RoomListHeaderViewSnapshot = {
     canAccessSpaceSettings: true,
     activeSortOption: "recent",
     isMessagePreviewEnabled: true,
-    useComposeIcon: true,
-    canCreateSection: true,
+    displaySectionReleaseAnnouncement: false,
+    areSectionsEnabled: true,
 };
diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/menu/ComposeMenuView.tsx b/packages/shared-components/src/room-list/RoomListHeaderView/menu/ComposeMenuView.tsx
index 3803c23fcf..0292d9c9bb 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/menu/ComposeMenuView.tsx
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/menu/ComposeMenuView.tsx
@@ -6,8 +6,7 @@
  */
 
 import React, { useState, type JSX } from "react";
-import { IconButton, Menu, MenuItem } from "@vector-im/compound-web";
-import ComposeIcon from "@vector-im/compound-design-tokens/assets/web/icons/compose";
+import { IconButton, Menu, MenuItem, ReleaseAnnouncement } from "@vector-im/compound-web";
 import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call";
 import ChatIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat";
 import RoomIcon from "@vector-im/compound-design-tokens/assets/web/icons/room";
@@ -37,7 +36,29 @@ interface ComposeMenuViewProps {
 export function ComposeMenuView({ vm }: ComposeMenuViewProps): JSX.Element {
     const { translate: _t } = useI18n();
     const [open, setOpen] = useState(false);
-    const { canCreateRoom, canCreateVideoRoom, canCreateSection, useComposeIcon } = useViewModel(vm);
+    const { canCreateRoom, canCreateVideoRoom, displaySectionReleaseAnnouncement, areSectionsEnabled } =
+        useViewModel(vm);
+
+    // 28px button with a 20px icon
+    const button = (
+        <IconButton size="28px" style={{ padding: "4px" }} tooltip={_t("action|new_conversation")}>
+            <PlusIcon color="var(--cpd-color-icon-secondary)" aria-hidden />
+        </IconButton>
+    );
+
+    if (displaySectionReleaseAnnouncement) {
+        return (
+            <ReleaseAnnouncement
+                open={displaySectionReleaseAnnouncement}
+                onClick={vm.closeSectionReleaseAnnouncement}
+                header={_t("release_announcement|room_list_section_title")}
+                description={_t("release_announcement|room_list_section_description")}
+                closeLabel={_t("release_announcement|room_list_section_close")}
+            >
+                {button}
+            </ReleaseAnnouncement>
+        );
+    }
 
     return (
         <Menu
@@ -46,16 +67,7 @@ export function ComposeMenuView({ vm }: ComposeMenuViewProps): JSX.Element {
             showTitle={false}
             title={_t("action|open_menu")}
             align="start"
-            trigger={
-                // 28px button with a 20px icon
-                <IconButton size="28px" style={{ padding: "4px" }} tooltip={_t("action|new_conversation")}>
-                    {useComposeIcon ? (
-                        <ComposeIcon color="var(--cpd-color-icon-secondary)" aria-hidden />
-                    ) : (
-                        <PlusIcon color="var(--cpd-color-icon-secondary)" aria-hidden />
-                    )}
-                </IconButton>
-            }
+            trigger={button}
         >
             <MenuItem Icon={ChatIcon} label={_t("action|start_chat")} onSelect={vm.createChatRoom} hideChevron />
             {canCreateRoom && (
@@ -69,7 +81,7 @@ export function ComposeMenuView({ vm }: ComposeMenuViewProps): JSX.Element {
                     hideChevron
                 />
             )}
-            {canCreateSection && (
+            {areSectionsEnabled && (
                 <MenuItem Icon={SectionIcon} label={_t("action|new_section")} onSelect={vm.createSection} hideChevron />
             )}
         </Menu>
diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/ComposeMenuView.test.tsx.snap b/packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/ComposeMenuView.test.tsx.snap
index 2f43a667bc..5ba0d2b6ea 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/ComposeMenuView.test.tsx.snap
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/ComposeMenuView.test.tsx.snap
@@ -6,11 +6,11 @@ exports[`<ComposeMenuView /> > should match snapshot 1`] = `
     aria-disabled="false"
     aria-expanded="false"
     aria-haspopup="menu"
-    aria-labelledby="_r_2_"
+    aria-labelledby="react-use-id-1"
     class="_icon-button_1215g_8"
     data-kind="primary"
     data-state="closed"
-    id="radix-_r_0_"
+    id="radix-react-use-id-2"
     role="button"
     style="--cpd-icon-button-size: 28px; padding: 4px;"
     tabindex="0"
@@ -30,12 +30,7 @@ exports[`<ComposeMenuView /> > should match snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          clip-rule="evenodd"
-          d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
-          fill-rule="evenodd"
-        />
-        <path
-          d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+          d="M11 13H6a.97.97 0 0 1-.713-.287A.97.97 0 0 1 5 12q0-.424.287-.713A.97.97 0 0 1 6 11h5V6q0-.424.287-.713A.97.97 0 0 1 12 5q.424 0 .713.287Q13 5.576 13 6v5h5q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 18 13h-5v5q0 .424-.287.712A.97.97 0 0 1 12 19a.97.97 0 0 1-.713-.288A.97.97 0 0 1 11 18z"
         />
       </svg>
     </div>
diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/OptionMenuView.test.tsx.snap b/packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/OptionMenuView.test.tsx.snap
index 3733795dca..57c72ad9f7 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/OptionMenuView.test.tsx.snap
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/OptionMenuView.test.tsx.snap
@@ -7,11 +7,11 @@ exports[`<OptionMenuView /> > should match snapshot 1`] = `
     aria-expanded="false"
     aria-haspopup="menu"
     aria-label="Room Options"
-    aria-labelledby="_r_2_"
+    aria-labelledby="react-use-id-1"
     class="_icon-button_1215g_8"
     data-kind="primary"
     data-state="closed"
-    id="radix-_r_0_"
+    id="radix-react-use-id-2"
     role="button"
     style="--cpd-icon-button-size: 28px; padding: 4px;"
     tabindex="0"
diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/SpaceMenuView.test.tsx.snap b/packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/SpaceMenuView.test.tsx.snap
index 562e2eb278..664134cccf 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/SpaceMenuView.test.tsx.snap
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/menu/__snapshots__/SpaceMenuView.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`<SpaceMenuView /> > should match snapshot 1`] = `
     class="_icon-button_1215g_8 SpaceMenuView-module_button"
     data-kind="primary"
     data-state="closed"
-    id="radix-_r_0_"
+    id="radix-react-use-id-1"
     role="button"
     style="--cpd-icon-button-size: 24px; padding: 2px;"
     tabindex="0"
diff --git a/packages/shared-components/src/room-list/RoomListHeaderView/test-utils.ts b/packages/shared-components/src/room-list/RoomListHeaderView/test-utils.ts
index 70c51c45c8..4f534cc4ae 100644
--- a/packages/shared-components/src/room-list/RoomListHeaderView/test-utils.ts
+++ b/packages/shared-components/src/room-list/RoomListHeaderView/test-utils.ts
@@ -25,6 +25,7 @@ export class MockedViewModel extends MockViewModel<RoomListHeaderViewSnapshot> i
     public toggleMessagePreview = vi.fn<() => void>();
     public createSection = vi.fn<() => void>();
     public collapseOrExpandSections = vi.fn<() => void>();
+    public closeSectionReleaseAnnouncement = vi.fn<() => void>();
 }
 
 export { defaultSnapshot } from "./default-snapshot";
diff --git a/packages/shared-components/src/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx b/packages/shared-components/src/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx
index cba4514419..e2d9adfa0a 100644
--- a/packages/shared-components/src/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx
+++ b/packages/shared-components/src/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.stories.tsx
@@ -31,7 +31,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // All available filter IDs
-const allFilterIds: FilterId[] = ["unread", "people", "rooms", "favourite", "mentions", "invites", "low_priority"];
+const allFilterIds: FilterId[] = ["unread", "people", "rooms", "mentions", "invites"];
 
 // Subset of filters for narrow container tests
 const fewFilterIds: FilterId[] = ["people", "rooms", "unread"];
diff --git a/packages/shared-components/src/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.tsx b/packages/shared-components/src/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.tsx
index 5b325156b5..51cc951dd4 100644
--- a/packages/shared-components/src/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.tsx
+++ b/packages/shared-components/src/room-list/RoomListPrimaryFilters/RoomListPrimaryFilters.tsx
@@ -102,8 +102,11 @@ export const RoomListPrimaryFilters = memo(function RoomListPrimaryFilters({
             >
                 {visibleFilterIds.map((filterId, index) => (
                     <ChatFilter
+                        // oxlint-disable-next-line react/no-array-index-key
                         key={`${filterId}-${index}`}
                         role="option"
+                        tabIndex={0}
+                        aria-selected={filterId === activeFilterId}
                         selected={filterId === activeFilterId}
                         onClick={() => onToggleFilter(filterId)}
                     >
diff --git a/packages/shared-components/src/room-list/RoomListPrimaryFilters/__snapshots__/RoomListPrimaryFilters.test.tsx.snap b/packages/shared-components/src/room-list/RoomListPrimaryFilters/__snapshots__/RoomListPrimaryFilters.test.tsx.snap
index f4f6fa8b0f..cb705761a1 100644
--- a/packages/shared-components/src/room-list/RoomListPrimaryFilters/__snapshots__/RoomListPrimaryFilters.test.tsx.snap
+++ b/packages/shared-components/src/room-list/RoomListPrimaryFilters/__snapshots__/RoomListPrimaryFilters.test.tsx.snap
@@ -7,37 +7,10 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders Default story
     data-testid="primary-filters"
     style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
   >
-    <button
-      aria-controls="_r_0_"
-      aria-expanded="false"
-      aria-label="Expand filter list"
-      class="_icon-button_1215g_8 RoomListPrimaryFilters-module_iconButton"
-      data-kind="secondary"
-      role="button"
-      style="--cpd-icon-button-size: 28px;"
-      tabindex="0"
-    >
-      <div
-        class="_indicator-icon_147l5_17"
-        style="--cpd-icon-button-size: 100%;"
-      >
-        <svg
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-          />
-        </svg>
-      </div>
-    </button>
     <div
       aria-label="Room list filters"
       class="Flex-module_flex RoomListPrimaryFilters-module_list"
-      id="_r_0_"
+      id="react-use-id-1"
       role="listbox"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
     >
@@ -68,15 +41,6 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders Default story
       >
         Rooms
       </button>
-      <button
-        aria-hidden="false"
-        aria-selected="false"
-        class="_chat-filter_5qdp0_8"
-        role="option"
-        tabindex="0"
-      >
-        Favourites
-      </button>
       <button
         aria-hidden="false"
         aria-selected="false"
@@ -95,15 +59,6 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders Default story
       >
         Invites
       </button>
-      <button
-        aria-hidden="true"
-        aria-selected="false"
-        class="_chat-filter_5qdp0_8 wrapping"
-        role="option"
-        tabindex="0"
-      >
-        Low priority
-      </button>
     </div>
   </div>
 </div>
@@ -120,7 +75,7 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders NarrowContaine
       style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <button
-        aria-controls="_r_3_"
+        aria-controls="react-use-id-1"
         aria-expanded="false"
         aria-label="Expand filter list"
         class="_icon-button_1215g_8 RoomListPrimaryFilters-module_iconButton"
@@ -149,7 +104,7 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders NarrowContaine
       <div
         aria-label="Room list filters"
         class="Flex-module_flex RoomListPrimaryFilters-module_list"
-        id="_r_3_"
+        id="react-use-id-1"
         role="listbox"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
       >
@@ -197,7 +152,7 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders NarrowWithActi
       style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
     >
       <button
-        aria-controls="_r_4_"
+        aria-controls="react-use-id-1"
         aria-expanded="false"
         aria-label="Expand filter list"
         class="_icon-button_1215g_8 RoomListPrimaryFilters-module_iconButton"
@@ -226,7 +181,7 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders NarrowWithActi
       <div
         aria-label="Room list filters"
         class="Flex-module_flex RoomListPrimaryFilters-module_list"
-        id="_r_4_"
+        id="react-use-id-1"
         role="listbox"
         style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
       >
@@ -270,7 +225,7 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders NoFilters stor
     <div
       aria-label="Room list filters"
       class="Flex-module_flex RoomListPrimaryFilters-module_list"
-      id="_r_2_"
+      id="react-use-id-1"
       role="listbox"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
     />
@@ -285,37 +240,10 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders PeopleSelected
     data-testid="primary-filters"
     style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
   >
-    <button
-      aria-controls="_r_1_"
-      aria-expanded="false"
-      aria-label="Expand filter list"
-      class="_icon-button_1215g_8 RoomListPrimaryFilters-module_iconButton"
-      data-kind="secondary"
-      role="button"
-      style="--cpd-icon-button-size: 28px;"
-      tabindex="0"
-    >
-      <div
-        class="_indicator-icon_147l5_17"
-        style="--cpd-icon-button-size: 100%;"
-      >
-        <svg
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M12 14.95q-.2 0-.375-.062a.9.9 0 0 1-.325-.213l-4.6-4.6a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l3.9 3.9 3.9-3.9a.95.95 0 0 1 .7-.275q.425 0 .7.275a.95.95 0 0 1 .275.7.95.95 0 0 1-.275.7l-4.6 4.6q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-          />
-        </svg>
-      </div>
-    </button>
     <div
       aria-label="Room list filters"
       class="Flex-module_flex RoomListPrimaryFilters-module_list"
-      id="_r_1_"
+      id="react-use-id-1"
       role="listbox"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
     >
@@ -346,15 +274,6 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders PeopleSelected
       >
         Rooms
       </button>
-      <button
-        aria-hidden="false"
-        aria-selected="false"
-        class="_chat-filter_5qdp0_8"
-        role="option"
-        tabindex="0"
-      >
-        Favourites
-      </button>
       <button
         aria-hidden="false"
         aria-selected="false"
@@ -373,15 +292,6 @@ exports[`<RoomListPrimaryFilters /> stories > snapshots > renders PeopleSelected
       >
         Invites
       </button>
-      <button
-        aria-hidden="true"
-        aria-selected="false"
-        class="_chat-filter_5qdp0_8 wrapping"
-        role="option"
-        tabindex="0"
-      >
-        Low priority
-      </button>
     </div>
   </div>
 </div>
diff --git a/packages/shared-components/src/room-list/RoomListPrimaryFilters/index.tsx b/packages/shared-components/src/room-list/RoomListPrimaryFilters/index.ts
similarity index 100%
rename from packages/shared-components/src/room-list/RoomListPrimaryFilters/index.tsx
rename to packages/shared-components/src/room-list/RoomListPrimaryFilters/index.ts
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListEmptyStateView.tsx b/packages/shared-components/src/room-list/RoomListView/RoomListEmptyStateView.tsx
index a8660d8235..c96151574e 100644
--- a/packages/shared-components/src/room-list/RoomListView/RoomListEmptyStateView.tsx
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListEmptyStateView.tsx
@@ -64,13 +64,6 @@ export const RoomListEmptyStateView: React.FC<RoomListEmptyStateViewProps> = ({
 
     // Handle different filter cases based on filter ID
     switch (snapshot.activeFilterId) {
-        case "favourite":
-            return (
-                <GenericPlaceholder
-                    title={_t("room_list|empty|no_favourites")}
-                    description={_t("room_list|empty|no_favourites_description")}
-                />
-            );
         case "people":
             return (
                 <GenericPlaceholder
@@ -109,14 +102,6 @@ export const RoomListEmptyStateView: React.FC<RoomListEmptyStateViewProps> = ({
                     onAction={() => vm.onToggleFilter(snapshot.activeFilterId!)}
                 />
             );
-        case "low_priority":
-            return (
-                <ActionPlaceholder
-                    title={_t("room_list|empty|no_lowpriority")}
-                    action={_t("room_list|empty|show_activity")}
-                    onAction={() => vm.onToggleFilter(snapshot.activeFilterId!)}
-                />
-            );
         default:
             return (
                 <GenericPlaceholder
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.module.css b/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.module.css
index 288ec1000e..0844a1add7 100644
--- a/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.module.css
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.module.css
@@ -12,4 +12,6 @@
     right: var(--cpd-space-3x);
     width: fit-content;
     margin: 0 auto;
+    /* Put the toast over the sticky headers  */
+    z-index: 3;
 }
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.stories.tsx b/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.stories.tsx
index c5c6530eee..83edd40979 100644
--- a/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.stories.tsx
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.stories.tsx
@@ -18,11 +18,12 @@ const meta = {
     args: {
         type: "section_created",
         onClose: fn(),
+        onClick: fn(),
     },
     argTypes: {
         type: {
             control: "select",
-            options: ["section_created"],
+            options: ["section_created", "chat_moved", "unread_activity"],
         },
     },
     decorators: [
@@ -32,6 +33,12 @@ const meta = {
             </div>
         ),
     ],
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/qurBlLqjf3mRNpyZ1ffamm/ER-213---Sections?node-id=1233-22137&t=ftTEpAma7PgRaaqB-4",
+        },
+    },
 } satisfies Meta<typeof RoomListToast>;
 
 export default meta;
@@ -44,3 +51,9 @@ export const ChatMoved: Story = {
         type: "chat_moved",
     },
 };
+
+export const UnreadActivity: Story = {
+    args: {
+        type: "unread_activity",
+    },
+};
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.test.tsx b/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.test.tsx
index e9f4303e52..7aa39162e0 100644
--- a/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.test.tsx
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.test.tsx
@@ -13,7 +13,7 @@ import userEvent from "@testing-library/user-event";
 
 import * as stories from "./RoomListToast.stories";
 
-const { SectionCreated, ChatMoved } = composeStories(stories);
+const { SectionCreated, ChatMoved, UnreadActivity } = composeStories(stories);
 
 describe("<RoomListToast />", () => {
     it("renders SectionCreated story", () => {
@@ -26,6 +26,11 @@ describe("<RoomListToast />", () => {
         expect(container).toMatchSnapshot();
     });
 
+    it("renders UnreadActivity story", () => {
+        const { container } = render(<UnreadActivity />);
+        expect(container).toMatchSnapshot();
+    });
+
     it("calls onClose when the close button is clicked", async () => {
         const user = userEvent.setup();
         render(<SectionCreated />);
@@ -33,4 +38,11 @@ describe("<RoomListToast />", () => {
         await user.click(closeButton);
         expect(SectionCreated.args.onClose).toHaveBeenCalled();
     });
+
+    it("calls onClick when the unread-activity toast is clicked", async () => {
+        const user = userEvent.setup();
+        render(<UnreadActivity />);
+        await user.click(screen.getByRole("button", { name: "Unread messages" }));
+        expect(UnreadActivity.args.onClick).toHaveBeenCalled();
+    });
 });
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.tsx b/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.tsx
index e46b000fd4..ebdedeb3e9 100644
--- a/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.tsx
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListToast/RoomListToast.tsx
@@ -5,46 +5,62 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { type ComponentType, type JSX, type MouseEventHandler } from "react";
+import React, { type JSX, type MouseEventHandler } from "react";
 import { Toast } from "@vector-im/compound-web";
-import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
+import ArrowDownIcon from "@vector-im/compound-design-tokens/assets/web/icons/arrow-down";
 
 import styles from "./RoomListToast.module.css";
 import { useI18n } from "../../../core/i18n/i18nContext";
 
-export type ToastType = "section_created" | "chat_moved";
+export type ToastType =
+    // Transient, auto-dismissing event toasts with a close button.
+    | "section_created"
+    | "chat_moved"
+    // Persistent, clickable toast surfacing unread activity below the visible area.
+    | "unread_activity";
 
 interface RoomListToastProps {
     /** The type of toast to display */
     type: ToastType;
-    /** Callback when the close button is clicked */
+    /** Callback when the close button is clicked (event toasts: "section_created", "chat_moved") */
     onClose: MouseEventHandler<HTMLButtonElement>;
+    /** Callback when the toast itself is clicked ("unread_activity") */
+    onClick: MouseEventHandler<HTMLButtonElement>;
 }
 
 /**
- * A toast component used for displaying temporary messages in the room list view.
+ * A toast component used for displaying messages in the room list view.
+ *
+ * The room list shows at most one toast at a time; which one (and the precedence between
+ * transient event toasts and the persistent unread-activity toast) is decided by the view
+ * model, so the view simply renders whichever {@link ToastType} it is given:
+ *
+ * - "section_created" / "chat_moved": transient event notifications with a close button.
+ * - "unread_activity": a persistent, clickable toast that jumps to the next unread room
+ *   below the visible area of the list.
  *
  * @example
  * ```tsx
- *   <RoomListToast type="section_created" onClose={onCloseHandler} />
+ *   <RoomListToast type="section_created" onClose={onCloseHandler} onClick={onClickHandler} />
  * ```
  */
-export function RoomListToast({ type, onClose }: Readonly<RoomListToastProps>): JSX.Element {
+export function RoomListToast({ type, onClose, onClick }: Readonly<RoomListToastProps>): JSX.Element {
     const { translate: _t } = useI18n();
 
-    let content: { text: string; icon: ComponentType<React.SVGAttributes<SVGElement>> };
-    switch (type) {
-        case "section_created":
-            content = { text: _t("room_list|section_created"), icon: CheckIcon };
-            break;
-        case "chat_moved":
-            content = { text: _t("room_list|chat_moved"), icon: CheckIcon };
-            break;
+    // The unread-activity toast is clickable as a whole (it scrolls to the unread room) rather
+    // than closeable, so it uses the clickable Toast variant with a leading arrow-down icon.
+    if (type === "unread_activity") {
+        return (
+            <Toast className={styles.toast} Icon={ArrowDownIcon} onClick={onClick}>
+                {_t("room_list|unread_messages")}
+            </Toast>
+        );
     }
 
+    const text = type === "section_created" ? _t("room_list|section_created") : _t("room_list|chat_moved");
     return (
-        <Toast className={styles.toast} Icon={content.icon} onClose={onClose} tooltip={_t("action|close")}>
-            {content.text}
+        <Toast className={styles.toast} onClose={onClose} tooltip={_t("action|close")}>
+            {text}
         </Toast>
     );
 }
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListToast/__snapshots__/RoomListToast.test.tsx.snap b/packages/shared-components/src/room-list/RoomListView/RoomListToast/__snapshots__/RoomListToast.test.tsx.snap
index 05d35de67a..6e1bc733a7 100644
--- a/packages/shared-components/src/room-list/RoomListView/RoomListToast/__snapshots__/RoomListToast.test.tsx.snap
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListToast/__snapshots__/RoomListToast.test.tsx.snap
@@ -6,29 +6,16 @@ exports[`<RoomListToast /> > renders ChatMoved story 1`] = `
     style="position: relative; width: 320px; height: 100px; background-color: grey;"
   >
     <div
-      class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _toast-container_1ysb3_8 RoomListToast-module_toast _has-close_1ysb3_30"
+      class="_toast-container_1jkz7_8 RoomListToast-module_toast _has-close_1jkz7_59"
     >
       <div
-        class="_content_1ysb3_34"
+        class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _content_1jkz7_68"
       >
-        <svg
-          aria-hidden="true"
-          class="_icon_1ysb3_26"
-          fill="currentColor"
-          height="20"
-          viewBox="0 0 24 24"
-          width="20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-          />
-        </svg>
         Chat moved
       </div>
       <button
-        aria-labelledby="_r_6_"
-        class="_icon-button_1215g_8 _close_1ysb3_41 _no-background_1215g_42"
+        aria-labelledby="react-use-id-1"
+        class="_icon-button_1215g_8 _close_1jkz7_75 _no-background_1215g_42"
         data-kind="secondary"
         role="button"
         style="--cpd-icon-button-size: 24px;"
@@ -62,29 +49,16 @@ exports[`<RoomListToast /> > renders SectionCreated story 1`] = `
     style="position: relative; width: 320px; height: 100px; background-color: grey;"
   >
     <div
-      class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _toast-container_1ysb3_8 RoomListToast-module_toast _has-close_1ysb3_30"
+      class="_toast-container_1jkz7_8 RoomListToast-module_toast _has-close_1jkz7_59"
     >
       <div
-        class="_content_1ysb3_34"
+        class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _content_1jkz7_68"
       >
-        <svg
-          aria-hidden="true"
-          class="_icon_1ysb3_26"
-          fill="currentColor"
-          height="20"
-          viewBox="0 0 24 24"
-          width="20"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-          />
-        </svg>
         Section created
       </div>
       <button
-        aria-labelledby="_r_0_"
-        class="_icon-button_1215g_8 _close_1ysb3_41 _no-background_1215g_42"
+        aria-labelledby="react-use-id-1"
+        class="_icon-button_1215g_8 _close_1jkz7_75 _no-background_1215g_42"
         data-kind="secondary"
         role="button"
         style="--cpd-icon-button-size: 24px;"
@@ -111,3 +85,35 @@ exports[`<RoomListToast /> > renders SectionCreated story 1`] = `
   </div>
 </div>
 `;
+
+exports[`<RoomListToast /> > renders UnreadActivity story 1`] = `
+<div>
+  <div
+    style="position: relative; width: 320px; height: 100px; background-color: grey;"
+  >
+    <button
+      class="_toast-container_1jkz7_8 _clickable_1jkz7_33 RoomListToast-module_toast"
+      type="button"
+    >
+      <div
+        class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _content_1jkz7_68"
+      >
+        <svg
+          aria-hidden="true"
+          class="_icon_1jkz7_55"
+          fill="currentColor"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 4.5a1 1 0 0 1 1 1v10.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 1 1 1.414-1.414L11 16.086V5.5a1 1 0 0 1 1-1"
+          />
+        </svg>
+        Unread messages
+      </div>
+    </button>
+  </div>
+</div>
+`;
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListView.module.css b/packages/shared-components/src/room-list/RoomListView/RoomListView.module.css
index c20d3006bf..05b2bcb4a0 100644
--- a/packages/shared-components/src/room-list/RoomListView/RoomListView.module.css
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListView.module.css
@@ -9,3 +9,10 @@
     position: relative;
     flex: 1;
 }
+
+.scrollbar {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    width: 100%;
+}
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListView.stories.tsx b/packages/shared-components/src/room-list/RoomListView/RoomListView.stories.tsx
index dfdab19c92..82f350e0c6 100644
--- a/packages/shared-components/src/room-list/RoomListView/RoomListView.stories.tsx
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListView.stories.tsx
@@ -6,12 +6,12 @@
  */
 
 import React, { type JSX } from "react";
-import { fn } from "storybook/test";
+import { expect, fn, waitFor } from "storybook/test";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import type { FilterId } from "../RoomListPrimaryFilters";
 import { RoomListView, type RoomListViewSnapshot, type RoomListViewActions } from "./RoomListView";
-import type { Room } from "../VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView";
+import type { Room } from "../VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView";
 import { useMockedViewModel } from "../../core/viewmodel";
 import { withViewDocs } from "../../../.storybook/withViewDocs";
 import {
@@ -28,7 +28,7 @@ import {
 type RoomListViewProps = RoomListViewSnapshot &
     RoomListViewActions & { renderAvatar: (room: Room) => React.ReactElement };
 
-const mockFilterIds: FilterId[] = ["unread", "people", "rooms", "favourite"];
+const mockFilterIds: FilterId[] = ["unread", "people", "rooms"];
 
 // Wrapper component that creates a mocked ViewModel
 const RoomListViewWrapperImpl = ({
@@ -38,8 +38,15 @@ const RoomListViewWrapperImpl = ({
     getRoomItemViewModel,
     getSectionHeaderViewModel,
     updateVisibleRooms,
+    updateVisibleFold,
     renderAvatar: renderAvatarProp,
     closeToast,
+    scrollToUnreadActivity,
+    setScrollToIndex,
+    changeRoomSection,
+    changeSectionOrder,
+    onSectionDragStart,
+    onSectionDragEnd,
     ...rest
 }: RoomListViewProps): JSX.Element => {
     const vm = useMockedViewModel(rest, {
@@ -49,7 +56,14 @@ const RoomListViewWrapperImpl = ({
         getRoomItemViewModel,
         getSectionHeaderViewModel,
         updateVisibleRooms,
+        updateVisibleFold,
         closeToast,
+        scrollToUnreadActivity,
+        setScrollToIndex,
+        changeRoomSection,
+        changeSectionOrder,
+        onSectionDragStart,
+        onSectionDragEnd,
     });
     return <RoomListView vm={vm} renderAvatar={renderAvatarProp} />;
 };
@@ -98,10 +112,17 @@ const meta = {
         getRoomItemViewModel: createGetRoomItemViewModel(mockRoomIds),
         getSectionHeaderViewModel: createGetSectionHeaderViewModel(mockSections.map((section) => section.id)),
         updateVisibleRooms: fn(),
+        updateVisibleFold: fn(),
         renderAvatar,
         isFlatList: true,
         toast: undefined,
         closeToast: fn(),
+        scrollToUnreadActivity: fn(),
+        setScrollToIndex: fn(),
+        changeRoomSection: fn(),
+        changeSectionOrder: fn(),
+        onSectionDragStart: fn(),
+        onSectionDragEnd: fn(),
     },
     parameters: {
         design: {
@@ -143,12 +164,12 @@ export const EmptyWithoutCreatePermission: Story = {
 
 export const WithActiveFilter: Story = {
     args: {
-        filterIds: ["unread", "people", "rooms", "favourite"],
-        activeFilterId: "favourite",
+        filterIds: ["unread", "people", "rooms"],
+        activeFilterId: "people",
         roomListState: {
             activeRoomIndex: undefined,
             spaceId: "!space:server",
-            filterKeys: ["favourites"],
+            filterKeys: ["people"],
         },
     },
 };
@@ -163,14 +184,6 @@ export const WithSelection: Story = {
     },
 };
 
-export const EmptyFavouriteFilter: Story = {
-    args: {
-        isRoomListEmpty: true,
-        filterIds: ["favourite", "people"],
-        activeFilterId: "favourite",
-    },
-};
-
 export const EmptyPeopleFilter: Story = {
     args: {
         isRoomListEmpty: true,
@@ -212,14 +225,6 @@ export const EmptyMentionsFilter: Story = {
     },
 };
 
-export const EmptyLowPriorityFilter: Story = {
-    args: {
-        isRoomListEmpty: true,
-        filterIds: ["low_priority", "people"],
-        activeFilterId: "low_priority",
-    },
-};
-
 export const SmallFlatList: Story = {
     args: {
         sections: mockSmallListSections,
@@ -255,3 +260,39 @@ export const Toast: Story = {
         toast: "section_created",
     },
 };
+
+export const UnreadActivityBelow: Story = {
+    args: {
+        toast: "unread_activity",
+    },
+};
+
+export const ToastOverStickySection: Story = {
+    tags: ["autodocs", "!snapshot"],
+    args: {
+        isFlatList: false,
+        toast: "unread_activity",
+    },
+    play: async ({ canvas, canvasElement }) => {
+        // Wait for the virtualized list to mount its rows before scrolling.
+        await canvas.findByRole("button", { name: "Toggle Favourites section" });
+        const scroller = canvasElement.querySelector<HTMLElement>('[role="treegrid"]')!;
+
+        // Scroll to the end of the list so the last section header ("Low-priority") gets mounted.
+        scroller.scrollTop = scroller.scrollHeight;
+        await canvas.findByRole("button", { name: "Toggle Low-priority section" });
+
+        // Scroll until the header row sits just above the bottom edge of the viewport, overlapping the toast.
+        const bottomOffset = 28;
+        await waitFor(() => {
+            const header = canvas.getByRole("button", { name: "Toggle Low-priority section" });
+            const gap = scroller.getBoundingClientRect().bottom - header.getBoundingClientRect().bottom;
+            if (Math.abs(gap - bottomOffset) > 1) {
+                scroller.scrollTop -= gap - bottomOffset;
+                throw new Error(`Header is not parked over the toast yet (gap: ${gap}px)`);
+            }
+        });
+
+        await expect(canvasElement).toMatchImageSnapshot();
+    },
+};
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListView.test.tsx b/packages/shared-components/src/room-list/RoomListView/RoomListView.test.tsx
index 5d84e05d05..a2c21b6462 100644
--- a/packages/shared-components/src/room-list/RoomListView/RoomListView.test.tsx
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListView.test.tsx
@@ -10,10 +10,16 @@ import { render, screen } from "@test-utils";
 import userEvent from "@testing-library/user-event";
 import { VirtuosoMockContext } from "react-virtuoso";
 import { composeStories } from "@storybook/react-vite";
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 
 import * as stories from "./RoomListView.stories";
 
+// Stable UUIDs so snapshots don't change between runs.
+let uuidCounter = 0;
+vi.spyOn(crypto, "randomUUID").mockImplementation(
+    () => `00000000-0000-0000-0000-${String(++uuidCounter).padStart(12, "0")}` as ReturnType<typeof crypto.randomUUID>,
+);
+
 const {
     Default,
     Loading,
@@ -24,13 +30,11 @@ const {
     LargeFlatList,
     SmallSectionList,
     LargeSectionList,
-    EmptyFavouriteFilter,
     EmptyPeopleFilter,
     EmptyRoomsFilter,
     EmptyUnreadFilter,
     EmptyInvitesFilter,
     EmptyMentionsFilter,
-    EmptyLowPriorityFilter,
     Toast,
 } = composeStories(stories);
 
@@ -90,11 +94,6 @@ describe("<RoomListView />", () => {
         expect(container).toMatchSnapshot();
     });
 
-    it("renders EmptyFavouriteFilter story", () => {
-        const { container } = renderWithMockContext(<EmptyFavouriteFilter />);
-        expect(container).toMatchSnapshot();
-    });
-
     it("renders EmptyPeopleFilter story", () => {
         const { container } = renderWithMockContext(<EmptyPeopleFilter />);
         expect(container).toMatchSnapshot();
@@ -120,11 +119,6 @@ describe("<RoomListView />", () => {
         expect(container).toMatchSnapshot();
     });
 
-    it("renders EmptyLowPriorityFilter story", () => {
-        const { container } = renderWithMockContext(<EmptyLowPriorityFilter />);
-        expect(container).toMatchSnapshot();
-    });
-
     it("renders Toast story", () => {
         const { container } = renderWithMockContext(<Toast />);
         expect(container).toMatchSnapshot();
@@ -184,21 +178,12 @@ describe("<RoomListView />", () => {
         expect(EmptyMentionsFilter.args.onToggleFilter).toHaveBeenCalled();
     });
 
-    it("should call onToggleFilter when See all activity is clicked in low priority empty state", async () => {
-        const user = userEvent.setup();
-        renderWithMockContext(<EmptyLowPriorityFilter />);
-
-        await user.click(screen.getByRole("button", { name: "See all activity" }));
-
-        expect(EmptyLowPriorityFilter.args.onToggleFilter).toHaveBeenCalled();
-    });
-
     it("should call closeToast when close button is clicked on toast", async () => {
         const user = userEvent.setup();
         renderWithMockContext(<Toast />);
 
         await user.click(screen.getByRole("button", { name: "Close" }));
 
-        expect(EmptyLowPriorityFilter.args.closeToast).toHaveBeenCalled();
+        expect(Toast.args.closeToast).toHaveBeenCalled();
     });
 });
diff --git a/packages/shared-components/src/room-list/RoomListView/RoomListView.tsx b/packages/shared-components/src/room-list/RoomListView/RoomListView.tsx
index 3cace4b400..e515197ed3 100644
--- a/packages/shared-components/src/room-list/RoomListView/RoomListView.tsx
+++ b/packages/shared-components/src/room-list/RoomListView/RoomListView.tsx
@@ -12,14 +12,12 @@ import { RoomListPrimaryFilters, type FilterId } from "../RoomListPrimaryFilters
 import { RoomListLoadingSkeleton } from "./RoomListLoadingSkeleton";
 import { RoomListEmptyStateView } from "./RoomListEmptyStateView";
 import { VirtualizedRoomListView, type RoomListViewState } from "../VirtualizedRoomListView";
-import {
-    type Room,
-    type RoomListItemViewModel,
-} from "../VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView";
+import { type Room, type RoomListItemViewModel } from "../VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView";
 import { type RoomListSectionHeaderViewModel } from "../VirtualizedRoomListView/RoomListSectionHeaderView";
 import { type ToastType, RoomListToast } from "./RoomListToast";
 import styles from "./RoomListView.module.css";
 import { Flex } from "../../core/utils/Flex";
+import { AutoHideScrollbar } from "../../core/utils/Scrollbar";
 
 export type RoomListSection = {
     /** Unique identifier for the section */
@@ -52,7 +50,11 @@ export type RoomListViewSnapshot = {
     canCreateRoom?: boolean;
     /** Whether the room list is displayed as a flat list */
     isFlatList: boolean;
-    /** Optional toast to display */
+    /**
+     * The single toast to display (if any). The view model owns which toast wins when more
+     * than one applies (e.g. a transient "chat_moved" event toast takes precedence over the
+     * persistent "unread_activity" toast), so the view just renders whatever it is given.
+     */
     toast?: ToastType;
 };
 
@@ -71,12 +73,37 @@ export interface RoomListViewActions {
      * Allow undefined to be returned if we don't have a view model for the room. In this case the room will not be rendered.
      */
     getRoomItemViewModel: (roomId: string) => RoomListItemViewModel | undefined;
-    /** Called when the visible range changes (virtualization API) */
+    /**
+     * Called when the rendered range changes (virtualization API). Indices are in room-index
+     * space (section header entries excluded): startIndex is inclusive, endIndex exclusive.
+     */
     updateVisibleRooms: (startIndex: number, endIndex: number) => void;
+    /**
+     * Called when the last genuinely-visible item index changes (excluding the rendered
+     * overscan buffer), used to decide whether unread activity is below the fold.
+     */
+    updateVisibleFold: (visibleEndIndex: number) => void;
     /** Get view model for a specific section header (virtualization API) */
     getSectionHeaderViewModel: (sectionId: string) => RoomListSectionHeaderViewModel;
     /** Called to close the toast message */
     closeToast: () => void;
+    /** Called to scroll the next unread room below the visible area of the list into view */
+    scrollToUnreadActivity: () => void;
+    /**
+     * Registers (or, with `undefined`, clears) the imperative scroll handler the view model
+     * uses to scroll a virtualized item index into view. The view owns the scroll handle, so
+     * it provides this on mount; the view model calls it in response to user actions such as
+     * clicking the "unread activity" toast.
+     */
+    setScrollToIndex: (scrollToIndex: ((index: number) => void) | undefined) => void;
+    /** Called to change the section of a room */
+    changeRoomSection: (roomId: string, tag: string) => void;
+    /** Called to change the order of sections */
+    changeSectionOrder: (sourceTag: string, targetTag: string) => void;
+    /** Called when a section drag starts — collapses all sections */
+    onSectionDragStart: () => void;
+    /** Called when a section drag ends (drop or cancel) — restores expansion states */
+    onSectionDragEnd: () => void;
 }
 
 /**
@@ -121,8 +148,16 @@ export const RoomListView: React.FC<RoomListViewProps> = ({ vm, renderAvatar, on
                 />
             </div>
             <Flex direction="column" className={styles.list}>
-                {listBody}
-                {snapshot.toast && <RoomListToast type={snapshot.toast} onClose={vm.closeToast} />}
+                <AutoHideScrollbar className={styles.scrollbar}>
+                    {listBody}
+                    {snapshot.toast && (
+                        <RoomListToast
+                            type={snapshot.toast}
+                            onClose={vm.closeToast}
+                            onClick={vm.scrollToUnreadActivity}
+                        />
+                    )}
+                </AutoHideScrollbar>
             </Flex>
         </>
     );
diff --git a/packages/shared-components/src/room-list/RoomListView/__snapshots__/RoomListView.test.tsx.snap b/packages/shared-components/src/room-list/RoomListView/__snapshots__/RoomListView.test.tsx.snap
index 9534fa1080..23fad55e27 100644
--- a/packages/shared-components/src/room-list/RoomListView/__snapshots__/RoomListView.test.tsx.snap
+++ b/packages/shared-components/src/room-list/RoomListView/__snapshots__/RoomListView.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<RoomListView /> > renders Default story 1`] = `
         <div
           aria-label="Room list filters"
           class="Flex-module_flex RoomListPrimaryFilters-module_list"
-          id="_r_0_"
+          id="react-use-id-1"
           role="listbox"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
         >
@@ -45,15 +45,6 @@ exports[`<RoomListView /> > renders Default story 1`] = `
           >
             Rooms
           </button>
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            Favourites
-          </button>
         </div>
       </div>
     </div>
@@ -62,8367 +53,41 @@ exports[`<RoomListView /> > renders Default story 1`] = `
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
     >
       <div
-        aria-label="Room list"
-        class="VirtualizedRoomListView-module_roomList"
-        data-testid="room-list"
-        data-virtuoso-scroller="true"
-        role="listbox"
-        style="height: 100%; outline: none; overflow-y: auto; position: relative;"
-        tabindex="0"
+        class="AutoHideScrollbar-module_scrollbar RoomListView-module_scrollbar"
+        tabindex="-1"
       >
         <div
-          data-viewport-type="element"
-          style="height: 100%; position: absolute; top: 0px; width: 100%;"
+          aria-label="Room list"
+          class="VirtualizedRoomListView-module_roomList"
+          data-testid="room-list"
+          data-virtuoso-scroller="true"
+          role="listbox"
+          style="height: 100%; outline: none; overflow-y: auto; position: relative;"
+          tabindex="0"
         >
           <div
-            data-testid="virtuoso-item-list"
-            style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
+            data-viewport-type="element"
+            style="height: 100%; position: absolute; top: 0px; width: 100%;"
           >
             <div
-              data-index="0"
-              data-item-index="0"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room General"
-                aria-posinset="1"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold RoomListItemView-module_firstItem"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="General avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    GE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="General"
-                      >
-                        General
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in General"
-                      >
-                        Last message in General
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_3_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_a_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_8_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    >
-                      <div
-                        class="Flex-module_flex"
-                        data-testid="notification-decoration"
-                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                          />
-                        </svg>
-                        <div
-                          class="_unread-counter_1147r_8"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="1"
-              data-item-index="1"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Random"
-                aria-posinset="2"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Random avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    RA
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Random"
-                      >
-                        Random
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_h_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_f_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_o_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_m_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="2"
-              data-item-index="2"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Engineering"
-                aria-posinset="3"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Engineering avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    EN
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Engineering"
-                      >
-                        Engineering
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Engineering"
-                      >
-                        Last message in Engineering
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_v_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_t_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_16_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_14_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="3"
-              data-item-index="3"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Design"
-                aria-posinset="4"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Design avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    DE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Design"
-                      >
-                        Design
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1d_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1b_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1k_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1i_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="4"
-              data-item-index="4"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Product"
-                aria-posinset="5"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Product avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    PR
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Product"
-                      >
-                        Product
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Product"
-                      >
-                        Last message in Product
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1r_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1p_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_22_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_20_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="5"
-              data-item-index="5"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Marketing with 5 unread mentions."
-                aria-posinset="6"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Marketing avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    MA
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Marketing"
-                      >
-                        Marketing
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_29_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_27_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_2g_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_2e_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    >
-                      <div
-                        class="Flex-module_flex"
-                        data-testid="notification-decoration"
-                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                          />
-                        </svg>
-                        <span
-                          class="_unread-counter_1147r_8"
-                        >
-                          5
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="6"
-              data-item-index="6"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Sales"
-                aria-posinset="7"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Sales avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    SA
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Sales"
-                      >
-                        Sales
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Sales"
-                      >
-                        Last message in Sales
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_2n_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_2l_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_2u_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_2s_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="7"
-              data-item-index="7"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Support"
-                aria-posinset="8"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Support avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    SU
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Support"
-                      >
-                        Support
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_35_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_33_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_3c_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_3a_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="8"
-              data-item-index="8"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Announcements"
-                aria-posinset="9"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Announcements avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    AN
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Announcements"
-                      >
-                        Announcements
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Announcements"
-                      >
-                        Last message in Announcements
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_3j_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_3h_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_3q_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_3o_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="9"
-              data-item-index="9"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Off-topic"
-                aria-posinset="10"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Off-topic avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    OF
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Off-topic"
-                      >
-                        Off-topic
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_41_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_3v_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_48_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_46_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="10"
-              data-item-index="10"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Team Alpha with 10 unread mentions."
-                aria-posinset="11"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Team Alpha avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    TE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Team Alpha"
-                      >
-                        Team Alpha
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Team Alpha"
-                      >
-                        Last message in Team Alpha
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_4f_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_4d_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_4m_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_4k_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    >
-                      <div
-                        class="Flex-module_flex"
-                        data-testid="notification-decoration"
-                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                          />
-                        </svg>
-                        <span
-                          class="_unread-counter_1147r_8"
-                        >
-                          10
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="11"
-              data-item-index="11"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Team Beta"
-                aria-posinset="12"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Team Beta avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    TE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Team Beta"
-                      >
-                        Team Beta
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_4t_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_4r_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_54_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_52_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="12"
-              data-item-index="12"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Project X"
-                aria-posinset="13"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Project X avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    PR
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Project X"
-                      >
-                        Project X
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Project X"
-                      >
-                        Last message in Project X
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_5b_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_59_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_5i_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_5g_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="13"
-              data-item-index="13"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Project Y"
-                aria-posinset="14"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Project Y avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    PR
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Project Y"
-                      >
-                        Project Y
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_5p_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_5n_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_60_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_5u_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="14"
-              data-item-index="14"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Water Cooler"
-                aria-posinset="15"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Water Cooler avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    WA
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Water Cooler"
-                      >
-                        Water Cooler
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Water Cooler"
-                      >
-                        Last message in Water Cooler
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_67_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_65_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_6e_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_6c_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="15"
-              data-item-index="15"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Feedback with 15 unread mentions."
-                aria-posinset="16"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Feedback avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    FE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Feedback"
-                      >
-                        Feedback
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_6l_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_6j_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_6s_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_6q_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    >
-                      <div
-                        class="Flex-module_flex"
-                        data-testid="notification-decoration"
-                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                          />
-                        </svg>
-                        <span
-                          class="_unread-counter_1147r_8"
-                        >
-                          15
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="16"
-              data-item-index="16"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Ideas"
-                aria-posinset="17"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Ideas avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    ID
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Ideas"
-                      >
-                        Ideas
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Ideas"
-                      >
-                        Last message in Ideas
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_73_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_71_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_7a_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_78_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="17"
-              data-item-index="17"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Bugs"
-                aria-posinset="18"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Bugs avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    BU
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Bugs"
-                      >
-                        Bugs
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_7h_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_7f_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_7o_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_7m_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="18"
-              data-item-index="18"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Features"
-                aria-posinset="19"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Features avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    FE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Features"
-                      >
-                        Features
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Features"
-                      >
-                        Last message in Features
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_7v_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_7t_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_86_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_84_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="19"
-              data-item-index="19"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Releases"
-                aria-posinset="20"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_lastItem"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Releases avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    RE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Releases"
-                      >
-                        Releases
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_8d_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_8b_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_8k_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_8i_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<RoomListView /> > renders Empty story 1`] = `
-<div>
-  <div
-    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
-  >
-    <div>
-      <div
-        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
-        data-testid="primary-filters"
-        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-      >
-        <div
-          aria-label="Room list filters"
-          class="Flex-module_flex RoomListPrimaryFilters-module_list"
-          id="_r_a2_"
-          role="listbox"
-          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
-        >
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            Unreads
-          </button>
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            People
-          </button>
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            Rooms
-          </button>
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            Favourites
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="Flex-module_flex RoomListView-module_list"
-      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
-    >
-      <div
-        class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
-        data-testid="empty-room-list"
-        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-      >
-        <span
-          class="RoomListEmptyStateView-module_title"
-        >
-          No chats yet
-        </span>
-        <span
-          class="RoomListEmptyStateView-module_description"
-        >
-          Get started by messaging someone or by creating a room
-        </span>
-        <div
-          class="Flex-module_flex RoomListEmptyStateView-module_defaultPlaceholder"
-          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
-        >
-          <button
-            class="_button_1nw83_8 _has-icon_1nw83_60"
-            data-kind="secondary"
-            data-size="md"
-            role="button"
-            tabindex="0"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="20"
-              viewBox="0 0 24 24"
-              width="20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="m1.5 21.25 1.45-4.95a10.2 10.2 0 0 1-.712-2.1A10.2 10.2 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22q-1.125 0-2.2-.238a10.2 10.2 0 0 1-2.1-.712L2.75 22.5a.94.94 0 0 1-1-.25.94.94 0 0 1-.25-1m2.45-1.2 3.2-.95a1 1 0 0 1 .275-.062q.15-.013.275-.013.225 0 .438.038.212.036.412.137a7.4 7.4 0 0 0 1.675.6Q11.1 20 12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12q0 .9.2 1.775t.6 1.675q.176.325.188.688t-.088.712z"
-              />
-            </svg>
-            Start chat
-          </button>
-          <button
-            class="_button_1nw83_8 _has-icon_1nw83_60"
-            data-kind="secondary"
-            data-size="md"
-            role="button"
-            tabindex="0"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="20"
-              viewBox="0 0 24 24"
-              width="20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="m8.566 17-.944 4.094q-.086.406-.372.656t-.687.25q-.543 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.801-3.5H3.158q-.572 0-.916-.484a1.27 1.27 0 0 1-.2-1.078 1.12 1.12 0 0 1 1.116-.938H6.85l1.145-5h-3.12q-.57 0-.915-.484a1.27 1.27 0 0 1-.2-1.078A1.12 1.12 0 0 1 4.875 7h3.691l.945-4.094q.085-.406.372-.656.286-.25.686-.25.544 0 .887.469.345.468.2 1.031l-.8 3.5h4.578l.944-4.094q.085-.406.372-.656.286-.25.687-.25.543 0 .887.469t.2 1.031L17.723 7h3.119q.573 0 .916.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937H17.15l-1.145 5h3.12q.57 0 .915.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937h-3.691l-.944 4.094q-.087.406-.373.656t-.686.25q-.544 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.8-3.5zm.573-2.5h4.578l1.144-5h-4.578z"
-              />
-            </svg>
-            New room
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<RoomListView /> > renders EmptyFavouriteFilter story 1`] = `
-<div>
-  <div
-    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
-  >
-    <div>
-      <div
-        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
-        data-testid="primary-filters"
-        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-      >
-        <div
-          aria-label="Room list filters"
-          class="Flex-module_flex RoomListPrimaryFilters-module_list"
-          id="_r_1q9_"
-          role="listbox"
-          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
-        >
-          <button
-            aria-hidden="false"
-            aria-selected="true"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            Favourites
-          </button>
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            People
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="Flex-module_flex RoomListView-module_list"
-      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
-    >
-      <div
-        class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
-        data-testid="empty-room-list"
-        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-      >
-        <span
-          class="RoomListEmptyStateView-module_title"
-        >
-          You don't have favourite chats yet
-        </span>
-        <span
-          class="RoomListEmptyStateView-module_description"
-        >
-          You can add a chat to your favourites in the chat settings
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<RoomListView /> > renders EmptyInvitesFilter story 1`] = `
-<div>
-  <div
-    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
-  >
-    <div>
-      <div
-        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
-        data-testid="primary-filters"
-        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-      >
-        <div
-          aria-label="Room list filters"
-          class="Flex-module_flex RoomListPrimaryFilters-module_list"
-          id="_r_1qd_"
-          role="listbox"
-          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
-        >
-          <button
-            aria-hidden="false"
-            aria-selected="true"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            Invites
-          </button>
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            People
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="Flex-module_flex RoomListView-module_list"
-      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
-    >
-      <div
-        class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
-        data-testid="empty-room-list"
-        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-      >
-        <span
-          class="RoomListEmptyStateView-module_title"
-        >
-          You don't have any unread invites
-        </span>
-        <button
-          class="_button_1nw83_8"
-          data-kind="tertiary"
-          data-size="lg"
-          role="button"
-          tabindex="0"
-        >
-          See all activity
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<RoomListView /> > renders EmptyLowPriorityFilter story 1`] = `
-<div>
-  <div
-    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
-  >
-    <div>
-      <div
-        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
-        data-testid="primary-filters"
-        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-      >
-        <div
-          aria-label="Room list filters"
-          class="Flex-module_flex RoomListPrimaryFilters-module_list"
-          id="_r_1qf_"
-          role="listbox"
-          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
-        >
-          <button
-            aria-hidden="false"
-            aria-selected="true"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            Low priority
-          </button>
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            People
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="Flex-module_flex RoomListView-module_list"
-      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
-    >
-      <div
-        class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
-        data-testid="empty-room-list"
-        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-      >
-        <span
-          class="RoomListEmptyStateView-module_title"
-        >
-          You don't have any low priority rooms
-        </span>
-        <button
-          class="_button_1nw83_8"
-          data-kind="tertiary"
-          data-size="lg"
-          role="button"
-          tabindex="0"
-        >
-          See all activity
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<RoomListView /> > renders EmptyMentionsFilter story 1`] = `
-<div>
-  <div
-    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
-  >
-    <div>
-      <div
-        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
-        data-testid="primary-filters"
-        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-      >
-        <div
-          aria-label="Room list filters"
-          class="Flex-module_flex RoomListPrimaryFilters-module_list"
-          id="_r_1qe_"
-          role="listbox"
-          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
-        >
-          <button
-            aria-hidden="false"
-            aria-selected="true"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            Mentions
-          </button>
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            People
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="Flex-module_flex RoomListView-module_list"
-      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
-    >
-      <div
-        class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
-        data-testid="empty-room-list"
-        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-      >
-        <span
-          class="RoomListEmptyStateView-module_title"
-        >
-          You don't have any unread mentions
-        </span>
-        <button
-          class="_button_1nw83_8"
-          data-kind="tertiary"
-          data-size="lg"
-          role="button"
-          tabindex="0"
-        >
-          See all activity
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<RoomListView /> > renders EmptyPeopleFilter story 1`] = `
-<div>
-  <div
-    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
-  >
-    <div>
-      <div
-        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
-        data-testid="primary-filters"
-        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-      >
-        <div
-          aria-label="Room list filters"
-          class="Flex-module_flex RoomListPrimaryFilters-module_list"
-          id="_r_1qa_"
-          role="listbox"
-          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
-        >
-          <button
-            aria-hidden="false"
-            aria-selected="true"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            People
-          </button>
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            Rooms
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="Flex-module_flex RoomListView-module_list"
-      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
-    >
-      <div
-        class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
-        data-testid="empty-room-list"
-        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-      >
-        <span
-          class="RoomListEmptyStateView-module_title"
-        >
-          You don’t have direct chats with anyone yet
-        </span>
-        <span
-          class="RoomListEmptyStateView-module_description"
-        >
-          You can deselect filters in order to see your other chats
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<RoomListView /> > renders EmptyRoomsFilter story 1`] = `
-<div>
-  <div
-    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
-  >
-    <div>
-      <div
-        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
-        data-testid="primary-filters"
-        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-      >
-        <div
-          aria-label="Room list filters"
-          class="Flex-module_flex RoomListPrimaryFilters-module_list"
-          id="_r_1qb_"
-          role="listbox"
-          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
-        >
-          <button
-            aria-hidden="false"
-            aria-selected="true"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            Rooms
-          </button>
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            People
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="Flex-module_flex RoomListView-module_list"
-      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
-    >
-      <div
-        class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
-        data-testid="empty-room-list"
-        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-      >
-        <span
-          class="RoomListEmptyStateView-module_title"
-        >
-          You’re not in any room yet
-        </span>
-        <span
-          class="RoomListEmptyStateView-module_description"
-        >
-          You can deselect filters in order to see your other chats
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<RoomListView /> > renders EmptyUnreadFilter story 1`] = `
-<div>
-  <div
-    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
-  >
-    <div>
-      <div
-        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
-        data-testid="primary-filters"
-        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-      >
-        <div
-          aria-label="Room list filters"
-          class="Flex-module_flex RoomListPrimaryFilters-module_list"
-          id="_r_1qc_"
-          role="listbox"
-          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
-        >
-          <button
-            aria-hidden="false"
-            aria-selected="true"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            Unreads
-          </button>
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            People
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="Flex-module_flex RoomListView-module_list"
-      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
-    >
-      <div
-        class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
-        data-testid="empty-room-list"
-        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-      >
-        <span
-          class="RoomListEmptyStateView-module_title"
-        >
-          Congrats! You don’t have any unread messages
-        </span>
-        <button
-          class="_button_1nw83_8"
-          data-kind="tertiary"
-          data-size="lg"
-          role="button"
-          tabindex="0"
-        >
-          Show all chats
-        </button>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<RoomListView /> > renders EmptyWithoutCreatePermission story 1`] = `
-<div>
-  <div
-    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
-  >
-    <div>
-      <div
-        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
-        data-testid="primary-filters"
-        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-      >
-        <div
-          aria-label="Room list filters"
-          class="Flex-module_flex RoomListPrimaryFilters-module_list"
-          id="_r_a3_"
-          role="listbox"
-          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
-        >
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            Unreads
-          </button>
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            People
-          </button>
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            Rooms
-          </button>
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            Favourites
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="Flex-module_flex RoomListView-module_list"
-      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
-    >
-      <div
-        class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
-        data-testid="empty-room-list"
-        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-      >
-        <span
-          class="RoomListEmptyStateView-module_title"
-        >
-          No chats yet
-        </span>
-        <span
-          class="RoomListEmptyStateView-module_description"
-        >
-          Get started by messaging someone
-        </span>
-        <div
-          class="Flex-module_flex RoomListEmptyStateView-module_defaultPlaceholder"
-          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
-        >
-          <button
-            class="_button_1nw83_8 _has-icon_1nw83_60"
-            data-kind="secondary"
-            data-size="md"
-            role="button"
-            tabindex="0"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="20"
-              viewBox="0 0 24 24"
-              width="20"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="m1.5 21.25 1.45-4.95a10.2 10.2 0 0 1-.712-2.1A10.2 10.2 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22q-1.125 0-2.2-.238a10.2 10.2 0 0 1-2.1-.712L2.75 22.5a.94.94 0 0 1-1-.25.94.94 0 0 1-.25-1m2.45-1.2 3.2-.95a1 1 0 0 1 .275-.062q.15-.013.275-.013.225 0 .438.038.212.036.412.137a7.4 7.4 0 0 0 1.675.6Q11.1 20 12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12q0 .9.2 1.775t.6 1.675q.176.325.188.688t-.088.712z"
-              />
-            </svg>
-            Start chat
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
-<div>
-  <div
-    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
-  >
-    <div>
-      <div
-        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
-        data-testid="primary-filters"
-        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-      >
-        <div
-          aria-label="Room list filters"
-          class="Flex-module_flex RoomListPrimaryFilters-module_list"
-          id="_r_l6_"
-          role="listbox"
-          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
-        >
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            Unreads
-          </button>
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            People
-          </button>
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            Rooms
-          </button>
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            Favourites
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="Flex-module_flex RoomListView-module_list"
-      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
-    >
-      <div
-        aria-label="Room list"
-        class="VirtualizedRoomListView-module_roomList"
-        data-testid="room-list"
-        data-virtuoso-scroller="true"
-        role="listbox"
-        style="height: 100%; outline: none; overflow-y: auto; position: relative;"
-        tabindex="0"
-      >
-        <div
-          data-viewport-type="element"
-          style="height: 100%; position: absolute; top: 0px; width: 100%;"
-        >
-          <div
-            data-testid="virtuoso-item-list"
-            style="box-sizing: border-box; margin-top: 0px; padding-bottom: 3276px; padding-top: 0px;"
-          >
-            <div
-              data-index="0"
-              data-item-index="0"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room General"
-                aria-posinset="1"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold RoomListItemView-module_firstItem"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="General avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    GE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="General"
-                      >
-                        General
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in General"
-                      >
-                        Last message in General
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_l9_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_l7_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_lg_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_le_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    >
-                      <div
-                        class="Flex-module_flex"
-                        data-testid="notification-decoration"
-                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                          />
-                        </svg>
-                        <div
-                          class="_unread-counter_1147r_8"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="1"
-              data-item-index="1"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Random"
-                aria-posinset="2"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Random avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    RA
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Random"
-                      >
-                        Random
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_ln_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_ll_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_lu_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_ls_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="2"
-              data-item-index="2"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Engineering"
-                aria-posinset="3"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Engineering avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    EN
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Engineering"
-                      >
-                        Engineering
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Engineering"
-                      >
-                        Last message in Engineering
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_m5_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_m3_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_mc_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_ma_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="3"
-              data-item-index="3"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Design"
-                aria-posinset="4"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Design avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    DE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Design"
-                      >
-                        Design
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_mj_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_mh_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_mq_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_mo_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="4"
-              data-item-index="4"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Product"
-                aria-posinset="5"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Product avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    PR
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Product"
-                      >
-                        Product
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Product"
-                      >
-                        Last message in Product
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_n1_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_mv_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_n8_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_n6_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="5"
-              data-item-index="5"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Marketing with 5 unread mentions."
-                aria-posinset="6"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Marketing avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    MA
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Marketing"
-                      >
-                        Marketing
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_nf_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_nd_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_nm_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_nk_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    >
-                      <div
-                        class="Flex-module_flex"
-                        data-testid="notification-decoration"
-                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                          />
-                        </svg>
-                        <span
-                          class="_unread-counter_1147r_8"
-                        >
-                          5
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="6"
-              data-item-index="6"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Sales"
-                aria-posinset="7"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Sales avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    SA
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Sales"
-                      >
-                        Sales
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Sales"
-                      >
-                        Last message in Sales
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_nt_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_nr_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_o4_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_o2_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="7"
-              data-item-index="7"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Support"
-                aria-posinset="8"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Support avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    SU
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Support"
-                      >
-                        Support
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_ob_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_o9_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_oi_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_og_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="8"
-              data-item-index="8"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Announcements"
-                aria-posinset="9"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Announcements avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    AN
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Announcements"
-                      >
-                        Announcements
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Announcements"
-                      >
-                        Last message in Announcements
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_op_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_on_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_p0_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_ou_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="9"
-              data-item-index="9"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Off-topic"
-                aria-posinset="10"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Off-topic avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    OF
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Off-topic"
-                      >
-                        Off-topic
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_p7_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_p5_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_pe_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_pc_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="10"
-              data-item-index="10"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Team Alpha with 10 unread mentions."
-                aria-posinset="11"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Team Alpha avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    TE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Team Alpha"
-                      >
-                        Team Alpha
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Team Alpha"
-                      >
-                        Last message in Team Alpha
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_pl_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_pj_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_ps_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_pq_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    >
-                      <div
-                        class="Flex-module_flex"
-                        data-testid="notification-decoration"
-                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                          />
-                        </svg>
-                        <span
-                          class="_unread-counter_1147r_8"
-                        >
-                          10
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="11"
-              data-item-index="11"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Team Beta"
-                aria-posinset="12"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Team Beta avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    TE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Team Beta"
-                      >
-                        Team Beta
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_q3_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_q1_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_qa_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_q8_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="12"
-              data-item-index="12"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Project X"
-                aria-posinset="13"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Project X avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    PR
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Project X"
-                      >
-                        Project X
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Project X"
-                      >
-                        Last message in Project X
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_qh_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_qf_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_qo_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_qm_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="13"
-              data-item-index="13"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Project Y"
-                aria-posinset="14"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Project Y avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    PR
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Project Y"
-                      >
-                        Project Y
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_qv_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_qt_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_r6_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_r4_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="14"
-              data-item-index="14"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Water Cooler"
-                aria-posinset="15"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Water Cooler avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    WA
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Water Cooler"
-                      >
-                        Water Cooler
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Water Cooler"
-                      >
-                        Last message in Water Cooler
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_rd_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_rb_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_rk_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_ri_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="15"
-              data-item-index="15"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Feedback with 15 unread mentions."
-                aria-posinset="16"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Feedback avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    FE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Feedback"
-                      >
-                        Feedback
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_rr_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_rp_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_s2_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_s0_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    >
-                      <div
-                        class="Flex-module_flex"
-                        data-testid="notification-decoration"
-                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                          />
-                        </svg>
-                        <span
-                          class="_unread-counter_1147r_8"
-                        >
-                          15
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="16"
-              data-item-index="16"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Ideas"
-                aria-posinset="17"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Ideas avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    ID
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Ideas"
-                      >
-                        Ideas
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Ideas"
-                      >
-                        Last message in Ideas
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_s9_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_s7_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_sg_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_se_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="17"
-              data-item-index="17"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Bugs"
-                aria-posinset="18"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Bugs avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    BU
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Bugs"
-                      >
-                        Bugs
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_sn_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_sl_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_su_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_ss_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="18"
-              data-item-index="18"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Features"
-                aria-posinset="19"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Features avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    FE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Features"
-                      >
-                        Features
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Features"
-                      >
-                        Last message in Features
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_t5_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_t3_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_tc_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_ta_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="19"
-              data-item-index="19"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Releases"
-                aria-posinset="20"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Releases avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    RE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Releases"
-                      >
-                        Releases
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_tj_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_th_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_tq_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_to_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="20"
-              data-item-index="20"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room General with 20 unread mentions."
-                aria-posinset="21"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="General avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    GE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="General"
-                      >
-                        General
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in General"
-                      >
-                        Last message in General
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_u1_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_tv_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_u8_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_u6_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    >
-                      <div
-                        class="Flex-module_flex"
-                        data-testid="notification-decoration"
-                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                          />
-                        </svg>
-                        <span
-                          class="_unread-counter_1147r_8"
-                        >
-                          20
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="21"
-              data-item-index="21"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Random"
-                aria-posinset="22"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Random avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    RA
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Random"
-                      >
-                        Random
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_uf_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_ud_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_um_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_uk_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="22"
-              data-item-index="22"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Engineering"
-                aria-posinset="23"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Engineering avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    EN
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Engineering"
-                      >
-                        Engineering
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Engineering"
-                      >
-                        Last message in Engineering
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_ut_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_ur_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_v4_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_v2_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="23"
-              data-item-index="23"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Design"
-                aria-posinset="24"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Design avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    DE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Design"
-                      >
-                        Design
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_vb_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_v9_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_vi_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_vg_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="24"
-              data-item-index="24"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Product"
-                aria-posinset="25"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Product avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    PR
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Product"
-                      >
-                        Product
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Product"
-                      >
-                        Last message in Product
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_vp_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_vn_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_100_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_vu_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="25"
-              data-item-index="25"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Marketing with 25 unread mentions."
-                aria-posinset="26"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Marketing avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    MA
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Marketing"
-                      >
-                        Marketing
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_107_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_105_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_10e_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_10c_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    >
-                      <div
-                        class="Flex-module_flex"
-                        data-testid="notification-decoration"
-                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                          />
-                        </svg>
-                        <span
-                          class="_unread-counter_1147r_8"
-                        >
-                          25
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="26"
-              data-item-index="26"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Sales"
-                aria-posinset="27"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Sales avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    SA
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Sales"
-                      >
-                        Sales
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Sales"
-                      >
-                        Last message in Sales
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_10l_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_10j_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_10s_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_10q_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="27"
-              data-item-index="27"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Support"
-                aria-posinset="28"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Support avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    SU
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Support"
-                      >
-                        Support
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_113_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_111_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_11a_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_118_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="28"
-              data-item-index="28"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Announcements"
-                aria-posinset="29"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Announcements avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    AN
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Announcements"
-                      >
-                        Announcements
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Announcements"
-                      >
-                        Last message in Announcements
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_11h_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_11f_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_11o_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_11m_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="29"
-              data-item-index="29"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Off-topic"
-                aria-posinset="30"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Off-topic avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    OF
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Off-topic"
-                      >
-                        Off-topic
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_11v_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_11t_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_126_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_124_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="30"
-              data-item-index="30"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Team Alpha with 30 unread mentions."
-                aria-posinset="31"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Team Alpha avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    TE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Team Alpha"
-                      >
-                        Team Alpha
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Team Alpha"
-                      >
-                        Last message in Team Alpha
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_12d_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_12b_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_12k_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_12i_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    >
-                      <div
-                        class="Flex-module_flex"
-                        data-testid="notification-decoration"
-                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                          />
-                        </svg>
-                        <span
-                          class="_unread-counter_1147r_8"
-                        >
-                          30
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="31"
-              data-item-index="31"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Team Beta"
-                aria-posinset="32"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Team Beta avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    TE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Team Beta"
-                      >
-                        Team Beta
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_12r_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_12p_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_132_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_130_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="32"
-              data-item-index="32"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Project X"
-                aria-posinset="33"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Project X avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    PR
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Project X"
-                      >
-                        Project X
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Project X"
-                      >
-                        Last message in Project X
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_139_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_137_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_13g_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_13e_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="33"
-              data-item-index="33"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Project Y"
-                aria-posinset="34"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Project Y avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    PR
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Project Y"
-                      >
-                        Project Y
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_13n_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_13l_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_13u_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_13s_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="34"
-              data-item-index="34"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Water Cooler"
-                aria-posinset="35"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Water Cooler avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    WA
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Water Cooler"
-                      >
-                        Water Cooler
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Water Cooler"
-                      >
-                        Last message in Water Cooler
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_145_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_143_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_14c_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_14a_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="35"
-              data-item-index="35"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Feedback with 35 unread mentions."
-                aria-posinset="36"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Feedback avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    FE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Feedback"
-                      >
-                        Feedback
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_14j_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_14h_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_14q_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_14o_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    >
-                      <div
-                        class="Flex-module_flex"
-                        data-testid="notification-decoration"
-                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                          />
-                        </svg>
-                        <span
-                          class="_unread-counter_1147r_8"
-                        >
-                          35
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="36"
-              data-item-index="36"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Ideas"
-                aria-posinset="37"
-                aria-selected="false"
-                aria-setsize="100"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Ideas avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    ID
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Ideas"
-                      >
-                        Ideas
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Ideas"
-                      >
-                        Last message in Ideas
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_151_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_14v_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_158_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_156_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
-<div>
-  <div
-    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
-  >
-    <div>
-      <div
-        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
-        data-testid="primary-filters"
-        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-      >
-        <div
-          aria-label="Room list filters"
-          class="Flex-module_flex RoomListPrimaryFilters-module_list"
-          id="_r_18o_"
-          role="listbox"
-          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
-        >
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            Unreads
-          </button>
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            People
-          </button>
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            Rooms
-          </button>
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            Favourites
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="Flex-module_flex RoomListView-module_list"
-      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
-    >
-      <div
-        aria-label="Room list"
-        aria-rowcount="103"
-        class="VirtualizedRoomListView-module_roomList"
-        data-testid="room-list"
-        data-virtuoso-scroller="true"
-        role="treegrid"
-        style="height: 100%; outline: none; overflow-y: auto; position: relative;"
-        tabindex="0"
-      >
-        <div
-          data-viewport-type="element"
-          style="height: 100%; position: absolute; top: 0px; width: 100%;"
-        >
-          <div
-            data-testid="virtuoso-item-list"
-            style="box-sizing: border-box; margin-top: 0px; padding-bottom: 3432px; padding-top: 0px;"
-          >
-            <div
-              data-index="0"
-              data-item-index="0"
-              data-known-size="52"
-              style="overflow-anchor: none;"
+              data-testid="virtuoso-item-list"
+              style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
             >
               <div
-                aria-expanded="true"
-                aria-level="1"
-                aria-posinset="1"
-                aria-rowindex="1"
-                aria-setsize="23"
-                role="row"
-              >
-                <button
-                  aria-expanded="true"
-                  aria-label="Toggle Favourites section"
-                  class="RoomListSectionHeaderView-module_header RoomListSectionHeaderView-module_firstHeader"
-                  role="gridcell"
-                  tabindex="-1"
-                  type="button"
-                >
-                  <div
-                    class="Flex-module_flex RoomListSectionHeaderView-module_container"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="Flex-module_flex"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
-                    >
-                      <svg
-                        class="RoomListSectionHeaderView-module_chevron"
-                        fill="var(--cpd-color-icon-secondary)"
-                        height="24px"
-                        viewBox="0 0 24 24"
-                        width="24px"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
-                        />
-                      </svg>
-                      <span
-                        class="RoomListSectionHeaderView-module_title"
-                      >
-                        Favourites
-                      </span>
-                    </div>
-                  </div>
-                </button>
-              </div>
-            </div>
-            <div
-              data-index="1"
-              data-item-index="1"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <div
-                aria-level="2"
-                aria-posinset="1"
-                aria-rowindex="1"
-                role="row"
+                data-index="0"
+                data-item-index="0"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room General"
+                  aria-posinset="1"
                   aria-selected="false"
-                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold RoomListItemView-module_firstItem"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -8468,11 +133,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_18r_"
+                          aria-labelledby="react-use-id-2"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_18p_"
+                          id="radix-react-use-id-3"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -8500,11 +165,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_192_"
+                          aria-labelledby="react-use-id-4"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_190_"
+                          id="radix-react-use-id-5"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -8557,26 +222,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="2"
-              data-item-index="2"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="2"
-                aria-rowindex="2"
-                role="row"
+                data-index="1"
+                data-item-index="1"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Random"
+                  aria-posinset="2"
                   aria-selected="false"
+                  aria-setsize="20"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -8616,11 +276,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_199_"
+                          aria-labelledby="react-use-id-6"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_197_"
+                          id="radix-react-use-id-7"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -8648,11 +308,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_19g_"
+                          aria-labelledby="react-use-id-8"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_19e_"
+                          id="radix-react-use-id-9"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -8684,26 +344,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="3"
-              data-item-index="3"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="3"
-                aria-rowindex="3"
-                role="row"
+                data-index="2"
+                data-item-index="2"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Engineering"
+                  aria-posinset="3"
                   aria-selected="false"
+                  aria-setsize="20"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -8749,11 +404,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_19n_"
+                          aria-labelledby="react-use-id-10"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_19l_"
+                          id="radix-react-use-id-11"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -8781,11 +436,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_19u_"
+                          aria-labelledby="react-use-id-12"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_19s_"
+                          id="radix-react-use-id-13"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -8817,26 +472,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="4"
-              data-item-index="4"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="4"
-                aria-rowindex="4"
-                role="row"
+                data-index="3"
+                data-item-index="3"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Design"
+                  aria-posinset="4"
                   aria-selected="false"
+                  aria-setsize="20"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -8876,11 +526,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1a5_"
+                          aria-labelledby="react-use-id-14"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1a3_"
+                          id="radix-react-use-id-15"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -8908,11 +558,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1ac_"
+                          aria-labelledby="react-use-id-16"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1aa_"
+                          id="radix-react-use-id-17"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -8944,26 +594,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="5"
-              data-item-index="5"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="5"
-                aria-rowindex="5"
-                role="row"
+                data-index="4"
+                data-item-index="4"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Product"
+                  aria-posinset="5"
                   aria-selected="false"
+                  aria-setsize="20"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -9009,11 +654,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1aj_"
+                          aria-labelledby="react-use-id-18"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1ah_"
+                          id="radix-react-use-id-19"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -9041,11 +686,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1aq_"
+                          aria-labelledby="react-use-id-20"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1ao_"
+                          id="radix-react-use-id-21"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -9077,26 +722,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="6"
-              data-item-index="6"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="6"
-                aria-rowindex="6"
-                role="row"
+                data-index="5"
+                data-item-index="5"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Marketing with 5 unread mentions."
+                  aria-posinset="6"
                   aria-selected="false"
+                  aria-setsize="20"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -9136,11 +776,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1b1_"
+                          aria-labelledby="react-use-id-22"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1av_"
+                          id="radix-react-use-id-23"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -9168,11 +808,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1b8_"
+                          aria-labelledby="react-use-id-24"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1b6_"
+                          id="radix-react-use-id-25"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -9227,26 +867,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="7"
-              data-item-index="7"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="7"
-                aria-rowindex="7"
-                role="row"
+                data-index="6"
+                data-item-index="6"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Sales"
+                  aria-posinset="7"
                   aria-selected="false"
+                  aria-setsize="20"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -9292,11 +927,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1bf_"
+                          aria-labelledby="react-use-id-26"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1bd_"
+                          id="radix-react-use-id-27"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -9324,11 +959,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1bm_"
+                          aria-labelledby="react-use-id-28"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1bk_"
+                          id="radix-react-use-id-29"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -9360,26 +995,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="8"
-              data-item-index="8"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="8"
-                aria-rowindex="8"
-                role="row"
+                data-index="7"
+                data-item-index="7"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Support"
+                  aria-posinset="8"
                   aria-selected="false"
+                  aria-setsize="20"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -9419,11 +1049,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1bt_"
+                          aria-labelledby="react-use-id-30"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1br_"
+                          id="radix-react-use-id-31"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -9451,11 +1081,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1c4_"
+                          aria-labelledby="react-use-id-32"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1c2_"
+                          id="radix-react-use-id-33"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -9487,26 +1117,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="9"
-              data-item-index="9"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="9"
-                aria-rowindex="9"
-                role="row"
+                data-index="8"
+                data-item-index="8"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Announcements"
+                  aria-posinset="9"
                   aria-selected="false"
+                  aria-setsize="20"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -9552,11 +1177,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1cb_"
+                          aria-labelledby="react-use-id-34"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1c9_"
+                          id="radix-react-use-id-35"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -9584,11 +1209,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1ci_"
+                          aria-labelledby="react-use-id-36"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1cg_"
+                          id="radix-react-use-id-37"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -9620,26 +1245,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="10"
-              data-item-index="10"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="10"
-                aria-rowindex="10"
-                role="row"
+                data-index="9"
+                data-item-index="9"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Off-topic"
+                  aria-posinset="10"
                   aria-selected="false"
+                  aria-setsize="20"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -9679,11 +1299,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1cp_"
+                          aria-labelledby="react-use-id-38"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1cn_"
+                          id="radix-react-use-id-39"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -9711,11 +1331,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1d0_"
+                          aria-labelledby="react-use-id-40"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1cu_"
+                          id="radix-react-use-id-41"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -9747,26 +1367,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="11"
-              data-item-index="11"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="11"
-                aria-rowindex="11"
-                role="row"
+                data-index="10"
+                data-item-index="10"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Team Alpha with 10 unread mentions."
+                  aria-posinset="11"
                   aria-selected="false"
+                  aria-setsize="20"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -9812,11 +1427,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1d7_"
+                          aria-labelledby="react-use-id-42"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1d5_"
+                          id="radix-react-use-id-43"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -9844,11 +1459,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1de_"
+                          aria-labelledby="react-use-id-44"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1dc_"
+                          id="radix-react-use-id-45"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -9903,26 +1518,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="12"
-              data-item-index="12"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="12"
-                aria-rowindex="12"
-                role="row"
+                data-index="11"
+                data-item-index="11"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Team Beta"
+                  aria-posinset="12"
                   aria-selected="false"
+                  aria-setsize="20"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -9962,11 +1572,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1dl_"
+                          aria-labelledby="react-use-id-46"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1dj_"
+                          id="radix-react-use-id-47"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -9994,11 +1604,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1ds_"
+                          aria-labelledby="react-use-id-48"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1dq_"
+                          id="radix-react-use-id-49"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -10030,26 +1640,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="13"
-              data-item-index="13"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="13"
-                aria-rowindex="13"
-                role="row"
+                data-index="12"
+                data-item-index="12"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Project X"
+                  aria-posinset="13"
                   aria-selected="false"
+                  aria-setsize="20"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -10095,11 +1700,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1e3_"
+                          aria-labelledby="react-use-id-50"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1e1_"
+                          id="radix-react-use-id-51"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -10127,11 +1732,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1ea_"
+                          aria-labelledby="react-use-id-52"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1e8_"
+                          id="radix-react-use-id-53"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -10163,26 +1768,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="14"
-              data-item-index="14"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="14"
-                aria-rowindex="14"
-                role="row"
+                data-index="13"
+                data-item-index="13"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Project Y"
+                  aria-posinset="14"
                   aria-selected="false"
+                  aria-setsize="20"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -10222,11 +1822,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1eh_"
+                          aria-labelledby="react-use-id-54"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1ef_"
+                          id="radix-react-use-id-55"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -10254,11 +1854,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1eo_"
+                          aria-labelledby="react-use-id-56"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1em_"
+                          id="radix-react-use-id-57"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -10290,26 +1890,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="15"
-              data-item-index="15"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="15"
-                aria-rowindex="15"
-                role="row"
+                data-index="14"
+                data-item-index="14"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Water Cooler"
+                  aria-posinset="15"
                   aria-selected="false"
+                  aria-setsize="20"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -10355,11 +1950,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1ev_"
+                          aria-labelledby="react-use-id-58"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1et_"
+                          id="radix-react-use-id-59"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -10387,11 +1982,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1f6_"
+                          aria-labelledby="react-use-id-60"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1f4_"
+                          id="radix-react-use-id-61"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -10423,26 +2018,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="16"
-              data-item-index="16"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="16"
-                aria-rowindex="16"
-                role="row"
+                data-index="15"
+                data-item-index="15"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Feedback with 15 unread mentions."
+                  aria-posinset="16"
                   aria-selected="false"
+                  aria-setsize="20"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -10482,11 +2072,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1fd_"
+                          aria-labelledby="react-use-id-62"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1fb_"
+                          id="radix-react-use-id-63"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -10514,11 +2104,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1fk_"
+                          aria-labelledby="react-use-id-64"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1fi_"
+                          id="radix-react-use-id-65"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -10573,26 +2163,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="17"
-              data-item-index="17"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="17"
-                aria-rowindex="17"
-                role="row"
+                data-index="16"
+                data-item-index="16"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Ideas"
+                  aria-posinset="17"
                   aria-selected="false"
+                  aria-setsize="20"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -10638,11 +2223,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1fr_"
+                          aria-labelledby="react-use-id-66"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1fp_"
+                          id="radix-react-use-id-67"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -10670,11 +2255,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1g2_"
+                          aria-labelledby="react-use-id-68"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1g0_"
+                          id="radix-react-use-id-69"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -10706,26 +2291,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="18"
-              data-item-index="18"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="18"
-                aria-rowindex="18"
-                role="row"
+                data-index="17"
+                data-item-index="17"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Bugs"
+                  aria-posinset="18"
                   aria-selected="false"
+                  aria-setsize="20"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -10765,11 +2345,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1g9_"
+                          aria-labelledby="react-use-id-70"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1g7_"
+                          id="radix-react-use-id-71"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -10797,11 +2377,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1gg_"
+                          aria-labelledby="react-use-id-72"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1ge_"
+                          id="radix-react-use-id-73"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -10833,26 +2413,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="19"
-              data-item-index="19"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="19"
-                aria-rowindex="19"
-                role="row"
+                data-index="18"
+                data-item-index="18"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Features"
+                  aria-posinset="19"
                   aria-selected="false"
+                  aria-setsize="20"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -10898,11 +2473,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1gn_"
+                          aria-labelledby="react-use-id-74"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1gl_"
+                          id="radix-react-use-id-75"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -10930,11 +2505,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1gu_"
+                          aria-labelledby="react-use-id-76"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1gs_"
+                          id="radix-react-use-id-77"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -10966,26 +2541,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="20"
-              data-item-index="20"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="20"
-                aria-rowindex="20"
-                role="row"
+                data-index="19"
+                data-item-index="19"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Releases"
+                  aria-posinset="20"
                   aria-selected="false"
-                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_lastItem"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -11025,11 +2595,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1h5_"
+                          aria-labelledby="react-use-id-78"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1h3_"
+                          id="radix-react-use-id-79"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -11057,11 +2627,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1hc_"
+                          aria-labelledby="react-use-id-80"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1ha_"
+                          id="radix-react-use-id-81"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -11094,25 +2664,688 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                 </button>
               </div>
             </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<RoomListView /> > renders Empty story 1`] = `
+<div>
+  <div
+    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
+  >
+    <div>
+      <div
+        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
+        data-testid="primary-filters"
+        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <div
+          aria-label="Room list filters"
+          class="Flex-module_flex RoomListPrimaryFilters-module_list"
+          id="react-use-id-1"
+          role="listbox"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+        >
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Unreads
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            People
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Rooms
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="Flex-module_flex RoomListView-module_list"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+    >
+      <div
+        class="AutoHideScrollbar-module_scrollbar RoomListView-module_scrollbar"
+        tabindex="-1"
+      >
+        <div
+          class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
+          data-testid="empty-room-list"
+          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+        >
+          <span
+            class="RoomListEmptyStateView-module_title"
+          >
+            No chats yet
+          </span>
+          <span
+            class="RoomListEmptyStateView-module_description"
+          >
+            Get started by messaging someone or by creating a room
+          </span>
+          <div
+            class="Flex-module_flex RoomListEmptyStateView-module_defaultPlaceholder"
+            style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
+          >
+            <button
+              class="_button_1nw83_8 _has-icon_1nw83_60"
+              data-kind="secondary"
+              data-size="md"
+              role="button"
+              tabindex="0"
+            >
+              <svg
+                aria-hidden="true"
+                fill="currentColor"
+                height="20"
+                viewBox="0 0 24 24"
+                width="20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="m1.5 21.25 1.45-4.95a10.2 10.2 0 0 1-.712-2.1A10.2 10.2 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22q-1.125 0-2.2-.238a10.2 10.2 0 0 1-2.1-.712L2.75 22.5a.94.94 0 0 1-1-.25.94.94 0 0 1-.25-1m2.45-1.2 3.2-.95a1 1 0 0 1 .275-.062q.15-.013.275-.013.225 0 .438.038.212.036.412.137a7.4 7.4 0 0 0 1.675.6Q11.1 20 12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12q0 .9.2 1.775t.6 1.675q.176.325.188.688t-.088.712z"
+                />
+              </svg>
+              Start chat
+            </button>
+            <button
+              class="_button_1nw83_8 _has-icon_1nw83_60"
+              data-kind="secondary"
+              data-size="md"
+              role="button"
+              tabindex="0"
+            >
+              <svg
+                aria-hidden="true"
+                fill="currentColor"
+                height="20"
+                viewBox="0 0 24 24"
+                width="20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="m8.566 17-.944 4.094q-.086.406-.372.656t-.687.25q-.543 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.801-3.5H3.158q-.572 0-.916-.484a1.27 1.27 0 0 1-.2-1.078 1.12 1.12 0 0 1 1.116-.938H6.85l1.145-5h-3.12q-.57 0-.915-.484a1.27 1.27 0 0 1-.2-1.078A1.12 1.12 0 0 1 4.875 7h3.691l.945-4.094q.085-.406.372-.656.286-.25.686-.25.544 0 .887.469.345.468.2 1.031l-.8 3.5h4.578l.944-4.094q.085-.406.372-.656.286-.25.687-.25.543 0 .887.469t.2 1.031L17.723 7h3.119q.573 0 .916.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937H17.15l-1.145 5h3.12q.57 0 .915.484.343.485.2 1.079a1.12 1.12 0 0 1-1.116.937h-3.691l-.944 4.094q-.087.406-.373.656t-.686.25q-.544 0-.887-.469a1.18 1.18 0 0 1-.2-1.031l.8-3.5zm.573-2.5h4.578l1.144-5h-4.578z"
+                />
+              </svg>
+              New room
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<RoomListView /> > renders EmptyInvitesFilter story 1`] = `
+<div>
+  <div
+    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
+  >
+    <div>
+      <div
+        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
+        data-testid="primary-filters"
+        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <div
+          aria-label="Room list filters"
+          class="Flex-module_flex RoomListPrimaryFilters-module_list"
+          id="react-use-id-1"
+          role="listbox"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+        >
+          <button
+            aria-hidden="false"
+            aria-selected="true"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Invites
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            People
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="Flex-module_flex RoomListView-module_list"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+    >
+      <div
+        class="AutoHideScrollbar-module_scrollbar RoomListView-module_scrollbar"
+        tabindex="-1"
+      >
+        <div
+          class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
+          data-testid="empty-room-list"
+          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+        >
+          <span
+            class="RoomListEmptyStateView-module_title"
+          >
+            You don't have any unread invites
+          </span>
+          <button
+            class="_button_1nw83_8"
+            data-kind="tertiary"
+            data-size="lg"
+            role="button"
+            tabindex="0"
+          >
+            See all activity
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<RoomListView /> > renders EmptyMentionsFilter story 1`] = `
+<div>
+  <div
+    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
+  >
+    <div>
+      <div
+        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
+        data-testid="primary-filters"
+        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <div
+          aria-label="Room list filters"
+          class="Flex-module_flex RoomListPrimaryFilters-module_list"
+          id="react-use-id-1"
+          role="listbox"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+        >
+          <button
+            aria-hidden="false"
+            aria-selected="true"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Mentions
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            People
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="Flex-module_flex RoomListView-module_list"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+    >
+      <div
+        class="AutoHideScrollbar-module_scrollbar RoomListView-module_scrollbar"
+        tabindex="-1"
+      >
+        <div
+          class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
+          data-testid="empty-room-list"
+          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+        >
+          <span
+            class="RoomListEmptyStateView-module_title"
+          >
+            You don't have any unread mentions
+          </span>
+          <button
+            class="_button_1nw83_8"
+            data-kind="tertiary"
+            data-size="lg"
+            role="button"
+            tabindex="0"
+          >
+            See all activity
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<RoomListView /> > renders EmptyPeopleFilter story 1`] = `
+<div>
+  <div
+    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
+  >
+    <div>
+      <div
+        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
+        data-testid="primary-filters"
+        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <div
+          aria-label="Room list filters"
+          class="Flex-module_flex RoomListPrimaryFilters-module_list"
+          id="react-use-id-1"
+          role="listbox"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+        >
+          <button
+            aria-hidden="false"
+            aria-selected="true"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            People
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Rooms
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="Flex-module_flex RoomListView-module_list"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+    >
+      <div
+        class="AutoHideScrollbar-module_scrollbar RoomListView-module_scrollbar"
+        tabindex="-1"
+      >
+        <div
+          class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
+          data-testid="empty-room-list"
+          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+        >
+          <span
+            class="RoomListEmptyStateView-module_title"
+          >
+            You don’t have direct chats with anyone yet
+          </span>
+          <span
+            class="RoomListEmptyStateView-module_description"
+          >
+            You can deselect filters in order to see your other chats
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<RoomListView /> > renders EmptyRoomsFilter story 1`] = `
+<div>
+  <div
+    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
+  >
+    <div>
+      <div
+        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
+        data-testid="primary-filters"
+        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <div
+          aria-label="Room list filters"
+          class="Flex-module_flex RoomListPrimaryFilters-module_list"
+          id="react-use-id-1"
+          role="listbox"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+        >
+          <button
+            aria-hidden="false"
+            aria-selected="true"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Rooms
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            People
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="Flex-module_flex RoomListView-module_list"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+    >
+      <div
+        class="AutoHideScrollbar-module_scrollbar RoomListView-module_scrollbar"
+        tabindex="-1"
+      >
+        <div
+          class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
+          data-testid="empty-room-list"
+          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+        >
+          <span
+            class="RoomListEmptyStateView-module_title"
+          >
+            You’re not in any room yet
+          </span>
+          <span
+            class="RoomListEmptyStateView-module_description"
+          >
+            You can deselect filters in order to see your other chats
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<RoomListView /> > renders EmptyUnreadFilter story 1`] = `
+<div>
+  <div
+    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
+  >
+    <div>
+      <div
+        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
+        data-testid="primary-filters"
+        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <div
+          aria-label="Room list filters"
+          class="Flex-module_flex RoomListPrimaryFilters-module_list"
+          id="react-use-id-1"
+          role="listbox"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+        >
+          <button
+            aria-hidden="false"
+            aria-selected="true"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Unreads
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            People
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="Flex-module_flex RoomListView-module_list"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+    >
+      <div
+        class="AutoHideScrollbar-module_scrollbar RoomListView-module_scrollbar"
+        tabindex="-1"
+      >
+        <div
+          class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
+          data-testid="empty-room-list"
+          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+        >
+          <span
+            class="RoomListEmptyStateView-module_title"
+          >
+            Congrats! You don’t have any unread messages
+          </span>
+          <button
+            class="_button_1nw83_8"
+            data-kind="tertiary"
+            data-size="lg"
+            role="button"
+            tabindex="0"
+          >
+            Show all chats
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<RoomListView /> > renders EmptyWithoutCreatePermission story 1`] = `
+<div>
+  <div
+    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
+  >
+    <div>
+      <div
+        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
+        data-testid="primary-filters"
+        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <div
+          aria-label="Room list filters"
+          class="Flex-module_flex RoomListPrimaryFilters-module_list"
+          id="react-use-id-1"
+          role="listbox"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+        >
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Unreads
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            People
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Rooms
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="Flex-module_flex RoomListView-module_list"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+    >
+      <div
+        class="AutoHideScrollbar-module_scrollbar RoomListView-module_scrollbar"
+        tabindex="-1"
+      >
+        <div
+          class="Flex-module_flex RoomListEmptyStateView-module_genericPlaceholder"
+          data-testid="empty-room-list"
+          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: stretch; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+        >
+          <span
+            class="RoomListEmptyStateView-module_title"
+          >
+            No chats yet
+          </span>
+          <span
+            class="RoomListEmptyStateView-module_description"
+          >
+            Get started by messaging someone
+          </span>
+          <div
+            class="Flex-module_flex RoomListEmptyStateView-module_defaultPlaceholder"
+            style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-4x); --mx-flex-wrap: nowrap;"
+          >
+            <button
+              class="_button_1nw83_8 _has-icon_1nw83_60"
+              data-kind="secondary"
+              data-size="md"
+              role="button"
+              tabindex="0"
+            >
+              <svg
+                aria-hidden="true"
+                fill="currentColor"
+                height="20"
+                viewBox="0 0 24 24"
+                width="20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="m1.5 21.25 1.45-4.95a10.2 10.2 0 0 1-.712-2.1A10.2 10.2 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22q-1.125 0-2.2-.238a10.2 10.2 0 0 1-2.1-.712L2.75 22.5a.94.94 0 0 1-1-.25.94.94 0 0 1-.25-1m2.45-1.2 3.2-.95a1 1 0 0 1 .275-.062q.15-.013.275-.013.225 0 .438.038.212.036.412.137a7.4 7.4 0 0 0 1.675.6Q11.1 20 12 20q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4 6.325 6.325 4 12q0 .9.2 1.775t.6 1.675q.176.325.188.688t-.088.712z"
+                />
+              </svg>
+              Start chat
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<RoomListView /> > renders LargeFlatList story 1`] = `
+<div>
+  <div
+    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
+  >
+    <div>
+      <div
+        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
+        data-testid="primary-filters"
+        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <div
+          aria-label="Room list filters"
+          class="Flex-module_flex RoomListPrimaryFilters-module_list"
+          id="react-use-id-1"
+          role="listbox"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+        >
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Unreads
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            People
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Rooms
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="Flex-module_flex RoomListView-module_list"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+    >
+      <div
+        class="AutoHideScrollbar-module_scrollbar RoomListView-module_scrollbar"
+        tabindex="-1"
+      >
+        <div
+          aria-label="Room list"
+          class="VirtualizedRoomListView-module_roomList"
+          data-testid="room-list"
+          data-virtuoso-scroller="true"
+          role="listbox"
+          style="height: 100%; outline: none; overflow-y: auto; position: relative;"
+          tabindex="0"
+        >
+          <div
+            data-viewport-type="element"
+            style="height: 100%; position: absolute; top: 0px; width: 100%;"
+          >
             <div
-              data-index="21"
-              data-item-index="21"
-              data-known-size="52"
-              style="overflow-anchor: none;"
+              data-testid="virtuoso-item-list"
+              style="box-sizing: border-box; margin-top: 0px; padding-bottom: 3276px; padding-top: 0px;"
             >
               <div
-                aria-level="2"
-                aria-posinset="21"
-                aria-rowindex="21"
-                role="row"
+                data-index="0"
+                data-item-index="0"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
-                  aria-label="Open room General with 20 unread mentions."
+                  aria-label="Open room General"
+                  aria-posinset="1"
                   aria-selected="false"
-                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  aria-setsize="100"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold RoomListItemView-module_firstItem"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -11158,11 +3391,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1hj_"
+                          aria-labelledby="react-use-id-2"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1hh_"
+                          id="radix-react-use-id-3"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -11190,11 +3423,2601 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1hq_"
+                          aria-labelledby="react-use-id-4"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1ho_"
+                          id="radix-react-use-id-5"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      >
+                        <div
+                          class="Flex-module_flex"
+                          data-testid="notification-decoration"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                        >
+                          <svg
+                            fill="var(--cpd-color-icon-accent-primary)"
+                            height="20px"
+                            viewBox="0 0 24 24"
+                            width="20px"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                            />
+                          </svg>
+                          <div
+                            class="_unread-counter_1147r_8"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="1"
+                data-item-index="1"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Random"
+                  aria-posinset="2"
+                  aria-selected="false"
+                  aria-setsize="100"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Random avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      RA
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Random"
+                        >
+                          Random
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-6"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-7"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-8"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-9"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="2"
+                data-item-index="2"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Engineering"
+                  aria-posinset="3"
+                  aria-selected="false"
+                  aria-setsize="100"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Engineering avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      EN
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Engineering"
+                        >
+                          Engineering
+                        </div>
+                        <div
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Engineering"
+                        >
+                          Last message in Engineering
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-10"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-11"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-12"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-13"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="3"
+                data-item-index="3"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Design"
+                  aria-posinset="4"
+                  aria-selected="false"
+                  aria-setsize="100"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Design avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      DE
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Design"
+                        >
+                          Design
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-14"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-15"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-16"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-17"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="4"
+                data-item-index="4"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Product"
+                  aria-posinset="5"
+                  aria-selected="false"
+                  aria-setsize="100"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Product avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      PR
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Product"
+                        >
+                          Product
+                        </div>
+                        <div
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Product"
+                        >
+                          Last message in Product
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-18"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-19"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-20"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-21"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="5"
+                data-item-index="5"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Marketing with 5 unread mentions."
+                  aria-posinset="6"
+                  aria-selected="false"
+                  aria-setsize="100"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Marketing avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      MA
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Marketing"
+                        >
+                          Marketing
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-22"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-23"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-24"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-25"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      >
+                        <div
+                          class="Flex-module_flex"
+                          data-testid="notification-decoration"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                        >
+                          <svg
+                            fill="var(--cpd-color-icon-accent-primary)"
+                            height="20px"
+                            viewBox="0 0 24 24"
+                            width="20px"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                            />
+                          </svg>
+                          <span
+                            class="_unread-counter_1147r_8"
+                          >
+                            5
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="6"
+                data-item-index="6"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Sales"
+                  aria-posinset="7"
+                  aria-selected="false"
+                  aria-setsize="100"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Sales avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      SA
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Sales"
+                        >
+                          Sales
+                        </div>
+                        <div
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Sales"
+                        >
+                          Last message in Sales
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-26"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-27"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-28"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-29"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="7"
+                data-item-index="7"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Support"
+                  aria-posinset="8"
+                  aria-selected="false"
+                  aria-setsize="100"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Support avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      SU
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Support"
+                        >
+                          Support
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-30"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-31"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-32"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-33"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="8"
+                data-item-index="8"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Announcements"
+                  aria-posinset="9"
+                  aria-selected="false"
+                  aria-setsize="100"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Announcements avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      AN
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Announcements"
+                        >
+                          Announcements
+                        </div>
+                        <div
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Announcements"
+                        >
+                          Last message in Announcements
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-34"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-35"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-36"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-37"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="9"
+                data-item-index="9"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Off-topic"
+                  aria-posinset="10"
+                  aria-selected="false"
+                  aria-setsize="100"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Off-topic avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      OF
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Off-topic"
+                        >
+                          Off-topic
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-38"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-39"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-40"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-41"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="10"
+                data-item-index="10"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Team Alpha with 10 unread mentions."
+                  aria-posinset="11"
+                  aria-selected="false"
+                  aria-setsize="100"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Team Alpha avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      TE
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Team Alpha"
+                        >
+                          Team Alpha
+                        </div>
+                        <div
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Team Alpha"
+                        >
+                          Last message in Team Alpha
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-42"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-43"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-44"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-45"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      >
+                        <div
+                          class="Flex-module_flex"
+                          data-testid="notification-decoration"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                        >
+                          <svg
+                            fill="var(--cpd-color-icon-accent-primary)"
+                            height="20px"
+                            viewBox="0 0 24 24"
+                            width="20px"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                            />
+                          </svg>
+                          <span
+                            class="_unread-counter_1147r_8"
+                          >
+                            10
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="11"
+                data-item-index="11"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Team Beta"
+                  aria-posinset="12"
+                  aria-selected="false"
+                  aria-setsize="100"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Team Beta avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      TE
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Team Beta"
+                        >
+                          Team Beta
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-46"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-47"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-48"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-49"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="12"
+                data-item-index="12"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Project X"
+                  aria-posinset="13"
+                  aria-selected="false"
+                  aria-setsize="100"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Project X avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      PR
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Project X"
+                        >
+                          Project X
+                        </div>
+                        <div
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Project X"
+                        >
+                          Last message in Project X
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-50"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-51"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-52"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-53"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="13"
+                data-item-index="13"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Project Y"
+                  aria-posinset="14"
+                  aria-selected="false"
+                  aria-setsize="100"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Project Y avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      PR
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Project Y"
+                        >
+                          Project Y
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-54"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-55"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-56"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-57"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="14"
+                data-item-index="14"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Water Cooler"
+                  aria-posinset="15"
+                  aria-selected="false"
+                  aria-setsize="100"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Water Cooler avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      WA
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Water Cooler"
+                        >
+                          Water Cooler
+                        </div>
+                        <div
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Water Cooler"
+                        >
+                          Last message in Water Cooler
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-58"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-59"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-60"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-61"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="15"
+                data-item-index="15"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Feedback with 15 unread mentions."
+                  aria-posinset="16"
+                  aria-selected="false"
+                  aria-setsize="100"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Feedback avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      FE
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Feedback"
+                        >
+                          Feedback
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-62"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-63"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-64"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-65"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      >
+                        <div
+                          class="Flex-module_flex"
+                          data-testid="notification-decoration"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                        >
+                          <svg
+                            fill="var(--cpd-color-icon-accent-primary)"
+                            height="20px"
+                            viewBox="0 0 24 24"
+                            width="20px"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                            />
+                          </svg>
+                          <span
+                            class="_unread-counter_1147r_8"
+                          >
+                            15
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="16"
+                data-item-index="16"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Ideas"
+                  aria-posinset="17"
+                  aria-selected="false"
+                  aria-setsize="100"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Ideas avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      ID
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Ideas"
+                        >
+                          Ideas
+                        </div>
+                        <div
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Ideas"
+                        >
+                          Last message in Ideas
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-66"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-67"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-68"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-69"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="17"
+                data-item-index="17"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Bugs"
+                  aria-posinset="18"
+                  aria-selected="false"
+                  aria-setsize="100"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Bugs avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      BU
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Bugs"
+                        >
+                          Bugs
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-70"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-71"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-72"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-73"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="18"
+                data-item-index="18"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Features"
+                  aria-posinset="19"
+                  aria-selected="false"
+                  aria-setsize="100"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Features avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      FE
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Features"
+                        >
+                          Features
+                        </div>
+                        <div
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Features"
+                        >
+                          Last message in Features
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-74"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-75"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-76"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-77"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="19"
+                data-item-index="19"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Releases"
+                  aria-posinset="20"
+                  aria-selected="false"
+                  aria-setsize="100"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Releases avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      RE
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Releases"
+                        >
+                          Releases
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-78"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-79"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-80"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-81"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="20"
+                data-item-index="20"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room General with 20 unread mentions."
+                  aria-posinset="21"
+                  aria-selected="false"
+                  aria-setsize="100"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="General avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      GE
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="General"
+                        >
+                          General
+                        </div>
+                        <div
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in General"
+                        >
+                          Last message in General
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-82"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-83"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-84"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-85"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -11249,26 +6072,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="22"
-              data-item-index="22"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="22"
-                aria-rowindex="22"
-                role="row"
+                data-index="21"
+                data-item-index="21"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Random"
+                  aria-posinset="22"
                   aria-selected="false"
+                  aria-setsize="100"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -11308,11 +6126,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1i1_"
+                          aria-labelledby="react-use-id-86"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1hv_"
+                          id="radix-react-use-id-87"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -11340,11 +6158,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1i8_"
+                          aria-labelledby="react-use-id-88"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1i6_"
+                          id="radix-react-use-id-89"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -11376,26 +6194,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="23"
-              data-item-index="23"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="23"
-                aria-rowindex="23"
-                role="row"
+                data-index="22"
+                data-item-index="22"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Engineering"
+                  aria-posinset="23"
                   aria-selected="false"
+                  aria-setsize="100"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -11441,11 +6254,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1if_"
+                          aria-labelledby="react-use-id-90"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1id_"
+                          id="radix-react-use-id-91"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -11473,11 +6286,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1im_"
+                          aria-labelledby="react-use-id-92"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1ik_"
+                          id="radix-react-use-id-93"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -11509,78 +6322,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="24"
-              data-item-index="24"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-expanded="true"
-                aria-level="1"
-                aria-posinset="2"
-                aria-rowindex="25"
-                aria-setsize="29"
-                role="row"
-              >
-                <button
-                  aria-expanded="true"
-                  aria-label="Toggle Chats section"
-                  class="RoomListSectionHeaderView-module_header"
-                  role="gridcell"
-                  tabindex="-1"
-                  type="button"
-                >
-                  <div
-                    class="Flex-module_flex RoomListSectionHeaderView-module_container"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="Flex-module_flex"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
-                    >
-                      <svg
-                        class="RoomListSectionHeaderView-module_chevron"
-                        fill="var(--cpd-color-icon-secondary)"
-                        height="24px"
-                        viewBox="0 0 24 24"
-                        width="24px"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
-                        />
-                      </svg>
-                      <span
-                        class="RoomListSectionHeaderView-module_title"
-                      >
-                        Chats
-                      </span>
-                    </div>
-                  </div>
-                </button>
-              </div>
-            </div>
-            <div
-              data-index="25"
-              data-item-index="25"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <div
-                aria-level="2"
-                aria-posinset="1"
-                aria-rowindex="24"
-                role="row"
+                data-index="23"
+                data-item-index="23"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Design"
+                  aria-posinset="24"
                   aria-selected="false"
+                  aria-setsize="100"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -11620,11 +6376,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1it_"
+                          aria-labelledby="react-use-id-94"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1ir_"
+                          id="radix-react-use-id-95"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -11652,11 +6408,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1j4_"
+                          aria-labelledby="react-use-id-96"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1j2_"
+                          id="radix-react-use-id-97"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -11688,26 +6444,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="26"
-              data-item-index="26"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="2"
-                aria-rowindex="25"
-                role="row"
+                data-index="24"
+                data-item-index="24"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Product"
+                  aria-posinset="25"
                   aria-selected="false"
+                  aria-setsize="100"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -11753,11 +6504,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1jb_"
+                          aria-labelledby="react-use-id-98"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1j9_"
+                          id="radix-react-use-id-99"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -11785,11 +6536,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1ji_"
+                          aria-labelledby="react-use-id-100"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1jg_"
+                          id="radix-react-use-id-101"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -11821,26 +6572,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="27"
-              data-item-index="27"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="3"
-                aria-rowindex="26"
-                role="row"
+                data-index="25"
+                data-item-index="25"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Marketing with 25 unread mentions."
+                  aria-posinset="26"
                   aria-selected="false"
+                  aria-setsize="100"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -11880,11 +6626,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1jp_"
+                          aria-labelledby="react-use-id-102"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1jn_"
+                          id="radix-react-use-id-103"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -11912,11 +6658,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1k0_"
+                          aria-labelledby="react-use-id-104"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1ju_"
+                          id="radix-react-use-id-105"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -11971,26 +6717,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="28"
-              data-item-index="28"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="4"
-                aria-rowindex="27"
-                role="row"
+                data-index="26"
+                data-item-index="26"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Sales"
+                  aria-posinset="27"
                   aria-selected="false"
+                  aria-setsize="100"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -12036,11 +6777,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1k7_"
+                          aria-labelledby="react-use-id-106"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1k5_"
+                          id="radix-react-use-id-107"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -12068,11 +6809,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1ke_"
+                          aria-labelledby="react-use-id-108"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1kc_"
+                          id="radix-react-use-id-109"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -12104,26 +6845,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="29"
-              data-item-index="29"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="5"
-                aria-rowindex="28"
-                role="row"
+                data-index="27"
+                data-item-index="27"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Support"
+                  aria-posinset="28"
                   aria-selected="false"
+                  aria-setsize="100"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -12163,11 +6899,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1kl_"
+                          aria-labelledby="react-use-id-110"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1kj_"
+                          id="radix-react-use-id-111"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -12195,11 +6931,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1ks_"
+                          aria-labelledby="react-use-id-112"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1kq_"
+                          id="radix-react-use-id-113"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -12231,26 +6967,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="30"
-              data-item-index="30"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="6"
-                aria-rowindex="29"
-                role="row"
+                data-index="28"
+                data-item-index="28"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Announcements"
+                  aria-posinset="29"
                   aria-selected="false"
+                  aria-setsize="100"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -12296,11 +7027,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1l3_"
+                          aria-labelledby="react-use-id-114"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1l1_"
+                          id="radix-react-use-id-115"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -12328,11 +7059,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1la_"
+                          aria-labelledby="react-use-id-116"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1l8_"
+                          id="radix-react-use-id-117"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -12364,26 +7095,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="31"
-              data-item-index="31"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="7"
-                aria-rowindex="30"
-                role="row"
+                data-index="29"
+                data-item-index="29"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Off-topic"
+                  aria-posinset="30"
                   aria-selected="false"
+                  aria-setsize="100"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -12423,11 +7149,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1lh_"
+                          aria-labelledby="react-use-id-118"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1lf_"
+                          id="radix-react-use-id-119"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -12455,11 +7181,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1lo_"
+                          aria-labelledby="react-use-id-120"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1lm_"
+                          id="radix-react-use-id-121"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -12491,26 +7217,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="32"
-              data-item-index="32"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="8"
-                aria-rowindex="31"
-                role="row"
+                data-index="30"
+                data-item-index="30"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Team Alpha with 30 unread mentions."
+                  aria-posinset="31"
                   aria-selected="false"
+                  aria-setsize="100"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -12556,11 +7277,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1lv_"
+                          aria-labelledby="react-use-id-122"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1lt_"
+                          id="radix-react-use-id-123"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -12588,11 +7309,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1m6_"
+                          aria-labelledby="react-use-id-124"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1m4_"
+                          id="radix-react-use-id-125"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -12647,26 +7368,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="33"
-              data-item-index="33"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="9"
-                aria-rowindex="32"
-                role="row"
+                data-index="31"
+                data-item-index="31"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Team Beta"
+                  aria-posinset="32"
                   aria-selected="false"
+                  aria-setsize="100"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -12706,11 +7422,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1md_"
+                          aria-labelledby="react-use-id-126"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1mb_"
+                          id="radix-react-use-id-127"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -12738,11 +7454,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1mk_"
+                          aria-labelledby="react-use-id-128"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1mi_"
+                          id="radix-react-use-id-129"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -12774,26 +7490,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="34"
-              data-item-index="34"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="10"
-                aria-rowindex="33"
-                role="row"
+                data-index="32"
+                data-item-index="32"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Project X"
+                  aria-posinset="33"
                   aria-selected="false"
+                  aria-setsize="100"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -12839,11 +7550,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1mr_"
+                          aria-labelledby="react-use-id-130"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1mp_"
+                          id="radix-react-use-id-131"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -12871,11 +7582,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1n2_"
+                          aria-labelledby="react-use-id-132"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1n0_"
+                          id="radix-react-use-id-133"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -12907,26 +7618,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="35"
-              data-item-index="35"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="11"
-                aria-rowindex="34"
-                role="row"
+                data-index="33"
+                data-item-index="33"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Project Y"
+                  aria-posinset="34"
                   aria-selected="false"
+                  aria-setsize="100"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -12966,11 +7672,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1n9_"
+                          aria-labelledby="react-use-id-134"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1n7_"
+                          id="radix-react-use-id-135"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -12998,11 +7704,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1ng_"
+                          aria-labelledby="react-use-id-136"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1ne_"
+                          id="radix-react-use-id-137"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -13034,26 +7740,21 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="36"
-              data-item-index="36"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="12"
-                aria-rowindex="35"
-                role="row"
+                data-index="34"
+                data-item-index="34"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Water Cooler"
+                  aria-posinset="35"
                   aria-selected="false"
+                  aria-setsize="100"
                   class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -13099,11 +7800,11 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_1nn_"
+                          aria-labelledby="react-use-id-138"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1nl_"
+                          id="radix-react-use-id-139"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -13131,11 +7832,284 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_1nu_"
+                          aria-labelledby="react-use-id-140"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_1ns_"
+                          id="radix-react-use-id-141"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="35"
+                data-item-index="35"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Feedback with 35 unread mentions."
+                  aria-posinset="36"
+                  aria-selected="false"
+                  aria-setsize="100"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Feedback avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      FE
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Feedback"
+                        >
+                          Feedback
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-142"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-143"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-144"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-145"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      >
+                        <div
+                          class="Flex-module_flex"
+                          data-testid="notification-decoration"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                        >
+                          <svg
+                            fill="var(--cpd-color-icon-accent-primary)"
+                            height="20px"
+                            viewBox="0 0 24 24"
+                            width="20px"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                            />
+                          </svg>
+                          <span
+                            class="_unread-counter_1147r_8"
+                          >
+                            35
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="36"
+                data-item-index="36"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Ideas"
+                  aria-posinset="37"
+                  aria-selected="false"
+                  aria-setsize="100"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Ideas avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      ID
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Ideas"
+                        >
+                          Ideas
+                        </div>
+                        <div
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Ideas"
+                        >
+                          Last message in Ideas
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-146"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-147"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-148"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-149"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -13176,7 +8150,7 @@ exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
 </div>
 `;
 
-exports[`<RoomListView /> > renders Loading story 1`] = `
+exports[`<RoomListView /> > renders LargeSectionList story 1`] = `
 <div>
   <div
     style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
@@ -13190,7 +8164,7 @@ exports[`<RoomListView /> > renders Loading story 1`] = `
         <div
           aria-label="Room list filters"
           class="Flex-module_flex RoomListPrimaryFilters-module_list"
-          id="_r_a1_"
+          id="react-use-id-1"
           role="listbox"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
         >
@@ -13221,6 +8195,5080 @@ exports[`<RoomListView /> > renders Loading story 1`] = `
           >
             Rooms
           </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="Flex-module_flex RoomListView-module_list"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+    >
+      <div
+        class="AutoHideScrollbar-module_scrollbar RoomListView-module_scrollbar"
+        tabindex="-1"
+      >
+        <div
+          data-dnd-overlay="true"
+        />
+        <div
+          class="GroupedVirtualizedList-module_stickyRoot"
+        >
+          <div
+            class="GroupedVirtualizedList-module_stickyHeader"
+          >
+            <div
+              aria-hidden="true"
+              class="RoomListSectionHeaderView-module_stickyBackground"
+            >
+              <button
+                aria-expanded="true"
+                class="RoomListSectionHeaderView-module_header RoomListSectionHeaderView-module_firstHeader"
+                tabindex="-1"
+                type="button"
+              >
+                <div
+                  class="Flex-module_flex RoomListSectionHeaderView-module_container"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                >
+                  <div
+                    class="Flex-module_flex"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
+                  >
+                    <svg
+                      class="RoomListSectionHeaderView-module_chevron"
+                      fill="var(--cpd-color-icon-secondary)"
+                      height="24px"
+                      viewBox="0 0 24 24"
+                      width="24px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+                      />
+                    </svg>
+                    <span
+                      class="RoomListSectionHeaderView-module_title"
+                    >
+                      Favourites
+                    </span>
+                  </div>
+                </div>
+              </button>
+            </div>
+          </div>
+          <div
+            aria-label="Room list"
+            aria-rowcount="103"
+            class="VirtualizedRoomListView-module_roomList"
+            data-testid="room-list"
+            data-virtuoso-scroller="true"
+            role="treegrid"
+            style="height: 100%; outline: none; overflow-y: auto; position: relative;"
+            tabindex="0"
+          >
+            <div
+              data-viewport-type="element"
+              style="height: 100%; position: absolute; top: 0px; width: 100%;"
+            >
+              <div
+                data-testid="virtuoso-item-list"
+                style="box-sizing: border-box; margin-top: 0px; padding-bottom: 3432px; padding-top: 0px;"
+              >
+                <div
+                  class="GroupedVirtualizedList-module_stickyRow"
+                  data-index="0"
+                  data-item-index="0"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-expanded="true"
+                    aria-level="1"
+                    aria-posinset="1"
+                    aria-rowindex="1"
+                    aria-setsize="23"
+                    role="row"
+                  >
+                    <div
+                      aria-expanded="true"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-expanded="true"
+                        aria-label="Toggle Favourites section"
+                        class="RoomListSectionHeaderView-module_header RoomListSectionHeaderView-module_firstHeader"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListSectionHeaderView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            class="Flex-module_flex"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
+                          >
+                            <svg
+                              class="RoomListSectionHeaderView-module_chevron"
+                              fill="var(--cpd-color-icon-secondary)"
+                              height="24px"
+                              viewBox="0 0 24 24"
+                              width="24px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+                              />
+                            </svg>
+                            <span
+                              class="RoomListSectionHeaderView-module_title"
+                            >
+                              Favourites
+                            </span>
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="1"
+                  data-item-index="1"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="1"
+                    aria-rowindex="1"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room General"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="General avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            GE
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="General"
+                              >
+                                General
+                              </div>
+                              <div
+                                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                                title="Last message in General"
+                              >
+                                Last message in General
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-2"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-3"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-4"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-5"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            >
+                              <div
+                                class="Flex-module_flex"
+                                data-testid="notification-decoration"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                              >
+                                <svg
+                                  fill="var(--cpd-color-icon-accent-primary)"
+                                  height="20px"
+                                  viewBox="0 0 24 24"
+                                  width="20px"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <path
+                                    d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                                  />
+                                </svg>
+                                <div
+                                  class="_unread-counter_1147r_8"
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="2"
+                  data-item-index="2"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="2"
+                    aria-rowindex="2"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Random"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Random avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            RA
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Random"
+                              >
+                                Random
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-6"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-7"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-8"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-9"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="3"
+                  data-item-index="3"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="3"
+                    aria-rowindex="3"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Engineering"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Engineering avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            EN
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Engineering"
+                              >
+                                Engineering
+                              </div>
+                              <div
+                                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                                title="Last message in Engineering"
+                              >
+                                Last message in Engineering
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-10"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-11"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-12"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-13"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="4"
+                  data-item-index="4"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="4"
+                    aria-rowindex="4"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Design"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Design avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            DE
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Design"
+                              >
+                                Design
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-14"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-15"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-16"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-17"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="5"
+                  data-item-index="5"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="5"
+                    aria-rowindex="5"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Product"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Product avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            PR
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Product"
+                              >
+                                Product
+                              </div>
+                              <div
+                                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                                title="Last message in Product"
+                              >
+                                Last message in Product
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-18"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-19"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-20"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-21"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="6"
+                  data-item-index="6"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="6"
+                    aria-rowindex="6"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Marketing with 5 unread mentions."
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Marketing avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            MA
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Marketing"
+                              >
+                                Marketing
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-22"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-23"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-24"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-25"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            >
+                              <div
+                                class="Flex-module_flex"
+                                data-testid="notification-decoration"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                              >
+                                <svg
+                                  fill="var(--cpd-color-icon-accent-primary)"
+                                  height="20px"
+                                  viewBox="0 0 24 24"
+                                  width="20px"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <path
+                                    d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                                  />
+                                </svg>
+                                <span
+                                  class="_unread-counter_1147r_8"
+                                >
+                                  5
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="7"
+                  data-item-index="7"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="7"
+                    aria-rowindex="7"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Sales"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Sales avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            SA
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Sales"
+                              >
+                                Sales
+                              </div>
+                              <div
+                                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                                title="Last message in Sales"
+                              >
+                                Last message in Sales
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-26"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-27"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-28"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-29"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="8"
+                  data-item-index="8"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="8"
+                    aria-rowindex="8"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Support"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Support avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            SU
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Support"
+                              >
+                                Support
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-30"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-31"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-32"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-33"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="9"
+                  data-item-index="9"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="9"
+                    aria-rowindex="9"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Announcements"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Announcements avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            AN
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Announcements"
+                              >
+                                Announcements
+                              </div>
+                              <div
+                                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                                title="Last message in Announcements"
+                              >
+                                Last message in Announcements
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-34"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-35"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-36"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-37"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="10"
+                  data-item-index="10"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="10"
+                    aria-rowindex="10"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Off-topic"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Off-topic avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            OF
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Off-topic"
+                              >
+                                Off-topic
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-38"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-39"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-40"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-41"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="11"
+                  data-item-index="11"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="11"
+                    aria-rowindex="11"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Team Alpha with 10 unread mentions."
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Team Alpha avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            TE
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Team Alpha"
+                              >
+                                Team Alpha
+                              </div>
+                              <div
+                                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                                title="Last message in Team Alpha"
+                              >
+                                Last message in Team Alpha
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-42"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-43"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-44"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-45"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            >
+                              <div
+                                class="Flex-module_flex"
+                                data-testid="notification-decoration"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                              >
+                                <svg
+                                  fill="var(--cpd-color-icon-accent-primary)"
+                                  height="20px"
+                                  viewBox="0 0 24 24"
+                                  width="20px"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <path
+                                    d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                                  />
+                                </svg>
+                                <span
+                                  class="_unread-counter_1147r_8"
+                                >
+                                  10
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="12"
+                  data-item-index="12"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="12"
+                    aria-rowindex="12"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Team Beta"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Team Beta avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            TE
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Team Beta"
+                              >
+                                Team Beta
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-46"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-47"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-48"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-49"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="13"
+                  data-item-index="13"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="13"
+                    aria-rowindex="13"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Project X"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Project X avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            PR
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Project X"
+                              >
+                                Project X
+                              </div>
+                              <div
+                                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                                title="Last message in Project X"
+                              >
+                                Last message in Project X
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-50"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-51"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-52"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-53"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="14"
+                  data-item-index="14"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="14"
+                    aria-rowindex="14"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Project Y"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Project Y avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            PR
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Project Y"
+                              >
+                                Project Y
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-54"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-55"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-56"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-57"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="15"
+                  data-item-index="15"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="15"
+                    aria-rowindex="15"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Water Cooler"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Water Cooler avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            WA
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Water Cooler"
+                              >
+                                Water Cooler
+                              </div>
+                              <div
+                                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                                title="Last message in Water Cooler"
+                              >
+                                Last message in Water Cooler
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-58"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-59"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-60"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-61"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="16"
+                  data-item-index="16"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="16"
+                    aria-rowindex="16"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Feedback with 15 unread mentions."
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Feedback avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            FE
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Feedback"
+                              >
+                                Feedback
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-62"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-63"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-64"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-65"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            >
+                              <div
+                                class="Flex-module_flex"
+                                data-testid="notification-decoration"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                              >
+                                <svg
+                                  fill="var(--cpd-color-icon-accent-primary)"
+                                  height="20px"
+                                  viewBox="0 0 24 24"
+                                  width="20px"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <path
+                                    d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                                  />
+                                </svg>
+                                <span
+                                  class="_unread-counter_1147r_8"
+                                >
+                                  15
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="17"
+                  data-item-index="17"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="17"
+                    aria-rowindex="17"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Ideas"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Ideas avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            ID
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Ideas"
+                              >
+                                Ideas
+                              </div>
+                              <div
+                                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                                title="Last message in Ideas"
+                              >
+                                Last message in Ideas
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-66"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-67"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-68"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-69"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="18"
+                  data-item-index="18"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="18"
+                    aria-rowindex="18"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Bugs"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Bugs avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            BU
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Bugs"
+                              >
+                                Bugs
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-70"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-71"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-72"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-73"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="19"
+                  data-item-index="19"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="19"
+                    aria-rowindex="19"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Features"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Features avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            FE
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Features"
+                              >
+                                Features
+                              </div>
+                              <div
+                                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                                title="Last message in Features"
+                              >
+                                Last message in Features
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-74"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-75"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-76"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-77"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="20"
+                  data-item-index="20"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="20"
+                    aria-rowindex="20"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Releases"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Releases avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            RE
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Releases"
+                              >
+                                Releases
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-78"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-79"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-80"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-81"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="21"
+                  data-item-index="21"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="21"
+                    aria-rowindex="21"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room General with 20 unread mentions."
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="General avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            GE
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="General"
+                              >
+                                General
+                              </div>
+                              <div
+                                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                                title="Last message in General"
+                              >
+                                Last message in General
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-82"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-83"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-84"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-85"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            >
+                              <div
+                                class="Flex-module_flex"
+                                data-testid="notification-decoration"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                              >
+                                <svg
+                                  fill="var(--cpd-color-icon-accent-primary)"
+                                  height="20px"
+                                  viewBox="0 0 24 24"
+                                  width="20px"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <path
+                                    d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                                  />
+                                </svg>
+                                <span
+                                  class="_unread-counter_1147r_8"
+                                >
+                                  20
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="22"
+                  data-item-index="22"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="22"
+                    aria-rowindex="22"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Random"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Random avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            RA
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Random"
+                              >
+                                Random
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-86"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-87"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-88"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-89"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="23"
+                  data-item-index="23"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="23"
+                    aria-rowindex="23"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Engineering"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Engineering avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            EN
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Engineering"
+                              >
+                                Engineering
+                              </div>
+                              <div
+                                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                                title="Last message in Engineering"
+                              >
+                                Last message in Engineering
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-90"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-91"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-92"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-93"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="GroupedVirtualizedList-module_stickyRow"
+                  data-index="24"
+                  data-item-index="24"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-expanded="true"
+                    aria-level="1"
+                    aria-posinset="2"
+                    aria-rowindex="25"
+                    aria-setsize="29"
+                    role="row"
+                  >
+                    <div
+                      aria-expanded="true"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-expanded="true"
+                        aria-label="Toggle Chats section"
+                        class="RoomListSectionHeaderView-module_header"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListSectionHeaderView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            class="Flex-module_flex"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
+                          >
+                            <svg
+                              class="RoomListSectionHeaderView-module_chevron"
+                              fill="var(--cpd-color-icon-secondary)"
+                              height="24px"
+                              viewBox="0 0 24 24"
+                              width="24px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+                              />
+                            </svg>
+                            <span
+                              class="RoomListSectionHeaderView-module_title"
+                            >
+                              Chats
+                            </span>
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="25"
+                  data-item-index="25"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="1"
+                    aria-rowindex="24"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Design"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Design avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            DE
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Design"
+                              >
+                                Design
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-94"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-95"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-96"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-97"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="26"
+                  data-item-index="26"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="2"
+                    aria-rowindex="25"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Product"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Product avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            PR
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Product"
+                              >
+                                Product
+                              </div>
+                              <div
+                                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                                title="Last message in Product"
+                              >
+                                Last message in Product
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-98"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-99"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-100"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-101"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="27"
+                  data-item-index="27"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="3"
+                    aria-rowindex="26"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Marketing with 25 unread mentions."
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Marketing avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            MA
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Marketing"
+                              >
+                                Marketing
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-102"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-103"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-104"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-105"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            >
+                              <div
+                                class="Flex-module_flex"
+                                data-testid="notification-decoration"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                              >
+                                <svg
+                                  fill="var(--cpd-color-icon-accent-primary)"
+                                  height="20px"
+                                  viewBox="0 0 24 24"
+                                  width="20px"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <path
+                                    d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                                  />
+                                </svg>
+                                <span
+                                  class="_unread-counter_1147r_8"
+                                >
+                                  25
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="28"
+                  data-item-index="28"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="4"
+                    aria-rowindex="27"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Sales"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Sales avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            SA
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Sales"
+                              >
+                                Sales
+                              </div>
+                              <div
+                                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                                title="Last message in Sales"
+                              >
+                                Last message in Sales
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-106"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-107"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-108"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-109"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="29"
+                  data-item-index="29"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="5"
+                    aria-rowindex="28"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Support"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Support avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            SU
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Support"
+                              >
+                                Support
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-110"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-111"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-112"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-113"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="30"
+                  data-item-index="30"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="6"
+                    aria-rowindex="29"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Announcements"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Announcements avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            AN
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Announcements"
+                              >
+                                Announcements
+                              </div>
+                              <div
+                                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                                title="Last message in Announcements"
+                              >
+                                Last message in Announcements
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-114"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-115"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-116"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-117"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="31"
+                  data-item-index="31"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="7"
+                    aria-rowindex="30"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Off-topic"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Off-topic avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            OF
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Off-topic"
+                              >
+                                Off-topic
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-118"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-119"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-120"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-121"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="32"
+                  data-item-index="32"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="8"
+                    aria-rowindex="31"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Team Alpha with 30 unread mentions."
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Team Alpha avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            TE
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Team Alpha"
+                              >
+                                Team Alpha
+                              </div>
+                              <div
+                                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                                title="Last message in Team Alpha"
+                              >
+                                Last message in Team Alpha
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-122"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-123"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-124"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-125"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            >
+                              <div
+                                class="Flex-module_flex"
+                                data-testid="notification-decoration"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                              >
+                                <svg
+                                  fill="var(--cpd-color-icon-accent-primary)"
+                                  height="20px"
+                                  viewBox="0 0 24 24"
+                                  width="20px"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <path
+                                    d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                                  />
+                                </svg>
+                                <span
+                                  class="_unread-counter_1147r_8"
+                                >
+                                  30
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="33"
+                  data-item-index="33"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="9"
+                    aria-rowindex="32"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Team Beta"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Team Beta avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            TE
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Team Beta"
+                              >
+                                Team Beta
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-126"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-127"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-128"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-129"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="34"
+                  data-item-index="34"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="10"
+                    aria-rowindex="33"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Project X"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Project X avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            PR
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Project X"
+                              >
+                                Project X
+                              </div>
+                              <div
+                                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                                title="Last message in Project X"
+                              >
+                                Last message in Project X
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-130"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-131"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-132"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-133"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="35"
+                  data-item-index="35"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="11"
+                    aria-rowindex="34"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Project Y"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Project Y avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            PR
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Project Y"
+                              >
+                                Project Y
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-134"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-135"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-136"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-137"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="36"
+                  data-item-index="36"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="12"
+                    aria-rowindex="35"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000006"
+                        aria-haspopup="menu"
+                        aria-label="Open room Water Cooler"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Water Cooler avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            WA
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Water Cooler"
+                              >
+                                Water Cooler
+                              </div>
+                              <div
+                                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                                title="Last message in Water Cooler"
+                              >
+                                Last message in Water Cooler
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-138"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-139"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-140"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-141"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<RoomListView /> > renders Loading story 1`] = `
+<div>
+  <div
+    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
+  >
+    <div>
+      <div
+        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
+        data-testid="primary-filters"
+        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <div
+          aria-label="Room list filters"
+          class="Flex-module_flex RoomListPrimaryFilters-module_list"
+          id="react-use-id-1"
+          role="listbox"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+        >
           <button
             aria-hidden="false"
             aria-selected="false"
@@ -13228,7 +13276,25 @@ exports[`<RoomListView /> > renders Loading story 1`] = `
             role="option"
             tabindex="0"
           >
-            Favourites
+            Unreads
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            People
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Rooms
           </button>
         </div>
       </div>
@@ -13238,8 +13304,13 @@ exports[`<RoomListView /> > renders Loading story 1`] = `
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
     >
       <div
-        class="RoomListLoadingSkeleton-module_skeleton"
-      />
+        class="AutoHideScrollbar-module_scrollbar RoomListView-module_scrollbar"
+        tabindex="-1"
+      >
+        <div
+          class="RoomListLoadingSkeleton-module_skeleton"
+        />
+      </div>
     </div>
   </div>
 </div>
@@ -13259,7 +13330,7 @@ exports[`<RoomListView /> > renders SmallFlatList story 1`] = `
         <div
           aria-label="Room list filters"
           class="Flex-module_flex RoomListPrimaryFilters-module_list"
-          id="_r_k5_"
+          id="react-use-id-1"
           role="listbox"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
         >
@@ -13290,15 +13361,6 @@ exports[`<RoomListView /> > renders SmallFlatList story 1`] = `
           >
             Rooms
           </button>
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            Favourites
-          </button>
         </div>
       </div>
     </div>
@@ -13307,451 +13369,41 @@ exports[`<RoomListView /> > renders SmallFlatList story 1`] = `
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
     >
       <div
-        aria-label="Room list"
-        class="VirtualizedRoomListView-module_roomList"
-        data-testid="room-list"
-        data-virtuoso-scroller="true"
-        role="listbox"
-        style="height: 100%; outline: none; overflow-y: auto; position: relative;"
-        tabindex="0"
+        class="AutoHideScrollbar-module_scrollbar RoomListView-module_scrollbar"
+        tabindex="-1"
       >
         <div
-          data-viewport-type="element"
-          style="height: 100%; position: absolute; top: 0px; width: 100%;"
-        >
-          <div
-            data-testid="virtuoso-item-list"
-            style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
-          >
-            <div
-              data-index="0"
-              data-item-index="0"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room General"
-                aria-posinset="1"
-                aria-selected="false"
-                aria-setsize="2"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold RoomListItemView-module_firstItem"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="General avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    GE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="General"
-                      >
-                        General
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in General"
-                      >
-                        Last message in General
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_k8_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_k6_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_kf_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_kd_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    >
-                      <div
-                        class="Flex-module_flex"
-                        data-testid="notification-decoration"
-                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                          />
-                        </svg>
-                        <div
-                          class="_unread-counter_1147r_8"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="1"
-              data-item-index="1"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Random"
-                aria-posinset="2"
-                aria-selected="false"
-                aria-setsize="2"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_lastItem"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Random avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    RA
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Random"
-                      >
-                        Random
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_km_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_kk_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_kt_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_kr_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
-<div>
-  <div
-    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
-  >
-    <div>
-      <div
-        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
-        data-testid="primary-filters"
-        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-      >
-        <div
-          aria-label="Room list filters"
-          class="Flex-module_flex RoomListPrimaryFilters-module_list"
-          id="_r_17n_"
+          aria-label="Room list"
+          class="VirtualizedRoomListView-module_roomList"
+          data-testid="room-list"
+          data-virtuoso-scroller="true"
           role="listbox"
-          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
-        >
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            Unreads
-          </button>
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            People
-          </button>
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            Rooms
-          </button>
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            Favourites
-          </button>
-        </div>
-      </div>
-    </div>
-    <div
-      class="Flex-module_flex RoomListView-module_list"
-      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
-    >
-      <div
-        aria-label="Room list"
-        aria-rowcount="4"
-        class="VirtualizedRoomListView-module_roomList"
-        data-testid="room-list"
-        data-virtuoso-scroller="true"
-        role="treegrid"
-        style="height: 100%; outline: none; overflow-y: auto; position: relative;"
-        tabindex="0"
-      >
-        <div
-          data-viewport-type="element"
-          style="height: 100%; position: absolute; top: 0px; width: 100%;"
+          style="height: 100%; outline: none; overflow-y: auto; position: relative;"
+          tabindex="0"
         >
           <div
-            data-testid="virtuoso-item-list"
-            style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
+            data-viewport-type="element"
+            style="height: 100%; position: absolute; top: 0px; width: 100%;"
           >
             <div
-              data-index="0"
-              data-item-index="0"
-              data-known-size="52"
-              style="overflow-anchor: none;"
+              data-testid="virtuoso-item-list"
+              style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
             >
               <div
-                aria-expanded="true"
-                aria-level="1"
-                aria-posinset="1"
-                aria-rowindex="1"
-                aria-setsize="2"
-                role="row"
-              >
-                <button
-                  aria-expanded="true"
-                  aria-label="Toggle Favourites section"
-                  class="RoomListSectionHeaderView-module_header RoomListSectionHeaderView-module_firstHeader"
-                  role="gridcell"
-                  tabindex="-1"
-                  type="button"
-                >
-                  <div
-                    class="Flex-module_flex RoomListSectionHeaderView-module_container"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="Flex-module_flex"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
-                    >
-                      <svg
-                        class="RoomListSectionHeaderView-module_chevron"
-                        fill="var(--cpd-color-icon-secondary)"
-                        height="24px"
-                        viewBox="0 0 24 24"
-                        width="24px"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
-                        />
-                      </svg>
-                      <span
-                        class="RoomListSectionHeaderView-module_title"
-                      >
-                        Favourites
-                      </span>
-                    </div>
-                  </div>
-                </button>
-              </div>
-            </div>
-            <div
-              data-index="1"
-              data-item-index="1"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <div
-                aria-level="2"
-                aria-posinset="1"
-                aria-rowindex="1"
-                role="row"
+                data-index="0"
+                data-item-index="0"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room General"
+                  aria-posinset="1"
                   aria-selected="false"
-                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                  aria-setsize="2"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold RoomListItemView-module_firstItem"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -13797,11 +13449,11 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_17q_"
+                          aria-labelledby="react-use-id-2"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_17o_"
+                          id="radix-react-use-id-3"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -13829,11 +13481,11 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_181_"
+                          aria-labelledby="react-use-id-4"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_17v_"
+                          id="radix-react-use-id-5"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -13886,26 +13538,21 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
                   </div>
                 </button>
               </div>
-            </div>
-            <div
-              data-index="2"
-              data-item-index="2"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
               <div
-                aria-level="2"
-                aria-posinset="2"
-                aria-rowindex="2"
-                role="row"
+                data-index="1"
+                data-item-index="1"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
                 <button
                   aria-haspopup="menu"
                   aria-label="Open room Random"
+                  aria-posinset="2"
                   aria-selected="false"
-                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  aria-setsize="2"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_lastItem"
                   data-state="closed"
-                  role="gridcell"
+                  role="option"
                   style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   tabindex="-1"
                   type="button"
@@ -13945,11 +13592,11 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="More Options"
-                          aria-labelledby="_r_188_"
+                          aria-labelledby="react-use-id-6"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_186_"
+                          id="radix-react-use-id-7"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -13977,11 +13624,11 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
                           aria-expanded="false"
                           aria-haspopup="menu"
                           aria-label="Notification options"
-                          aria-labelledby="_r_18f_"
+                          aria-labelledby="react-use-id-8"
                           class="_icon-button_1215g_8"
                           data-kind="primary"
                           data-state="closed"
-                          id="radix-_r_18d_"
+                          id="radix-react-use-id-9"
                           role="button"
                           style="--cpd-icon-button-size: 24px; padding: 2px;"
                           tabindex="0"
@@ -14014,56 +13661,542 @@ exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
                 </button>
               </div>
             </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<RoomListView /> > renders SmallSectionList story 1`] = `
+<div>
+  <div
+    style="width: 320px; height: 600px; border: 1px solid var(--cpd-color-border-interactive-primary); display: flex; flex-direction: column; resize: horizontal; overflow: auto; min-width: 250px; max-width: 800px;"
+  >
+    <div>
+      <div
+        class="Flex-module_flex RoomListPrimaryFilters-module_roomListPrimaryFilters"
+        data-testid="primary-filters"
+        style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+      >
+        <div
+          aria-label="Room list filters"
+          class="Flex-module_flex RoomListPrimaryFilters-module_list"
+          id="react-use-id-1"
+          role="listbox"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
+        >
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Unreads
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            People
+          </button>
+          <button
+            aria-hidden="false"
+            aria-selected="false"
+            class="_chat-filter_5qdp0_8"
+            role="option"
+            tabindex="0"
+          >
+            Rooms
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      class="Flex-module_flex RoomListView-module_list"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+    >
+      <div
+        class="AutoHideScrollbar-module_scrollbar RoomListView-module_scrollbar"
+        tabindex="-1"
+      >
+        <div
+          data-dnd-overlay="true"
+        />
+        <div
+          class="GroupedVirtualizedList-module_stickyRoot"
+        >
+          <div
+            class="GroupedVirtualizedList-module_stickyHeader"
+          >
             <div
-              data-index="3"
-              data-item-index="3"
-              data-known-size="52"
-              style="overflow-anchor: none;"
+              aria-hidden="true"
+              class="RoomListSectionHeaderView-module_stickyBackground"
             >
-              <div
+              <button
                 aria-expanded="true"
-                aria-level="1"
-                aria-posinset="2"
-                aria-rowindex="4"
-                aria-setsize="0"
-                role="row"
+                class="RoomListSectionHeaderView-module_header RoomListSectionHeaderView-module_firstHeader"
+                tabindex="-1"
+                type="button"
               >
-                <button
-                  aria-expanded="true"
-                  aria-label="Toggle Chats section"
-                  class="RoomListSectionHeaderView-module_header"
-                  role="gridcell"
-                  tabindex="-1"
-                  type="button"
+                <div
+                  class="Flex-module_flex RoomListSectionHeaderView-module_container"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                 >
                   <div
-                    class="Flex-module_flex RoomListSectionHeaderView-module_container"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    class="Flex-module_flex"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
+                  >
+                    <svg
+                      class="RoomListSectionHeaderView-module_chevron"
+                      fill="var(--cpd-color-icon-secondary)"
+                      height="24px"
+                      viewBox="0 0 24 24"
+                      width="24px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+                      />
+                    </svg>
+                    <span
+                      class="RoomListSectionHeaderView-module_title"
+                    >
+                      Favourites
+                    </span>
+                  </div>
+                </div>
+              </button>
+            </div>
+          </div>
+          <div
+            aria-label="Room list"
+            aria-rowcount="4"
+            class="VirtualizedRoomListView-module_roomList"
+            data-testid="room-list"
+            data-virtuoso-scroller="true"
+            role="treegrid"
+            style="height: 100%; outline: none; overflow-y: auto; position: relative;"
+            tabindex="0"
+          >
+            <div
+              data-viewport-type="element"
+              style="height: 100%; position: absolute; top: 0px; width: 100%;"
+            >
+              <div
+                data-testid="virtuoso-item-list"
+                style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
+              >
+                <div
+                  class="GroupedVirtualizedList-module_stickyRow"
+                  data-index="0"
+                  data-item-index="0"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-expanded="true"
+                    aria-level="1"
+                    aria-posinset="1"
+                    aria-rowindex="1"
+                    aria-setsize="2"
+                    role="row"
                   >
                     <div
-                      class="Flex-module_flex"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
+                      aria-expanded="true"
+                      role="gridcell"
                     >
-                      <svg
-                        class="RoomListSectionHeaderView-module_chevron"
-                        fill="var(--cpd-color-icon-secondary)"
-                        height="24px"
-                        viewBox="0 0 24 24"
-                        width="24px"
-                        xmlns="http://www.w3.org/2000/svg"
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000003"
+                        aria-expanded="true"
+                        aria-label="Toggle Favourites section"
+                        class="RoomListSectionHeaderView-module_header RoomListSectionHeaderView-module_firstHeader"
+                        tabindex="-1"
+                        type="button"
                       >
-                        <path
-                          d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
-                        />
-                      </svg>
-                      <span
-                        class="RoomListSectionHeaderView-module_title"
-                      >
-                        Chats
-                      </span>
+                        <div
+                          class="Flex-module_flex RoomListSectionHeaderView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            class="Flex-module_flex"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
+                          >
+                            <svg
+                              class="RoomListSectionHeaderView-module_chevron"
+                              fill="var(--cpd-color-icon-secondary)"
+                              height="24px"
+                              viewBox="0 0 24 24"
+                              width="24px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+                              />
+                            </svg>
+                            <span
+                              class="RoomListSectionHeaderView-module_title"
+                            >
+                              Favourites
+                            </span>
+                          </div>
+                        </div>
+                      </button>
                     </div>
                   </div>
-                </button>
+                </div>
+                <div
+                  data-index="1"
+                  data-item-index="1"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="1"
+                    aria-rowindex="1"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000003"
+                        aria-haspopup="menu"
+                        aria-label="Open room General"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="General avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            GE
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="General"
+                              >
+                                General
+                              </div>
+                              <div
+                                class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                                title="Last message in General"
+                              >
+                                Last message in General
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-2"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-3"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-4"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-5"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            >
+                              <div
+                                class="Flex-module_flex"
+                                data-testid="notification-decoration"
+                                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                              >
+                                <svg
+                                  fill="var(--cpd-color-icon-accent-primary)"
+                                  height="20px"
+                                  viewBox="0 0 24 24"
+                                  width="20px"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <path
+                                    d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                                  />
+                                </svg>
+                                <div
+                                  class="_unread-counter_1147r_8"
+                                />
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  data-index="2"
+                  data-item-index="2"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-level="2"
+                    aria-posinset="2"
+                    aria-rowindex="2"
+                    role="row"
+                  >
+                    <div
+                      aria-selected="false"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000003"
+                        aria-haspopup="menu"
+                        aria-label="Open room Random"
+                        class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                        data-state="closed"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListItemView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            aria-label="Random avatar"
+                            role="img"
+                            style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                          >
+                            RA
+                          </div>
+                          <div
+                            class="Flex-module_flex RoomListItemView-module_content"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                          >
+                            <div
+                              class="RoomListItemView-module_ellipsis"
+                            >
+                              <div
+                                class="RoomListItemView-module_roomName"
+                                data-testid="room-name"
+                                title="Random"
+                              >
+                                Random
+                              </div>
+                            </div>
+                            <div
+                              class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="More Options"
+                                aria-labelledby="react-use-id-6"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-7"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                              <button
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-haspopup="menu"
+                                aria-label="Notification options"
+                                aria-labelledby="react-use-id-8"
+                                class="_icon-button_1215g_8"
+                                data-kind="primary"
+                                data-state="closed"
+                                id="radix-react-use-id-9"
+                                role="button"
+                                style="--cpd-icon-button-size: 24px; padding: 2px;"
+                                tabindex="0"
+                                type="button"
+                              >
+                                <div
+                                  class="_indicator-icon_147l5_17"
+                                  style="--cpd-icon-button-size: 100%;"
+                                >
+                                  <svg
+                                    fill="currentColor"
+                                    height="1em"
+                                    viewBox="0 0 24 24"
+                                    width="1em"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                                    />
+                                  </svg>
+                                </div>
+                              </button>
+                            </div>
+                            <div
+                              aria-hidden="true"
+                              class="RoomListItemView-module_notificationDecoration"
+                            />
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="GroupedVirtualizedList-module_stickyRow"
+                  data-index="3"
+                  data-item-index="3"
+                  data-known-size="52"
+                  style="overflow-anchor: none;"
+                >
+                  <div
+                    aria-expanded="true"
+                    aria-level="1"
+                    aria-posinset="2"
+                    aria-rowindex="4"
+                    aria-setsize="0"
+                    role="row"
+                  >
+                    <div
+                      aria-expanded="true"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-describedby="00000000-0000-0000-0000-000000000003"
+                        aria-expanded="true"
+                        aria-label="Toggle Chats section"
+                        class="RoomListSectionHeaderView-module_header"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        <div
+                          class="Flex-module_flex RoomListSectionHeaderView-module_container"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                        >
+                          <div
+                            class="Flex-module_flex"
+                            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
+                          >
+                            <svg
+                              class="RoomListSectionHeaderView-module_chevron"
+                              fill="var(--cpd-color-icon-secondary)"
+                              height="24px"
+                              viewBox="0 0 24 24"
+                              width="24px"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+                              />
+                            </svg>
+                            <span
+                              class="RoomListSectionHeaderView-module_title"
+                            >
+                              Chats
+                            </span>
+                          </div>
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -14088,7 +14221,7 @@ exports[`<RoomListView /> > renders Toast story 1`] = `
         <div
           aria-label="Room list filters"
           class="Flex-module_flex RoomListPrimaryFilters-module_list"
-          id="_r_1qg_"
+          id="react-use-id-1"
           role="listbox"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
         >
@@ -14119,15 +14252,6 @@ exports[`<RoomListView /> > renders Toast story 1`] = `
           >
             Rooms
           </button>
-          <button
-            aria-hidden="false"
-            aria-selected="false"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            Favourites
-          </button>
         </div>
       </div>
     </div>
@@ -14136,2661 +14260,2653 @@ exports[`<RoomListView /> > renders Toast story 1`] = `
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
     >
       <div
-        aria-label="Room list"
-        class="VirtualizedRoomListView-module_roomList"
-        data-testid="room-list"
-        data-virtuoso-scroller="true"
-        role="listbox"
-        style="height: 100%; outline: none; overflow-y: auto; position: relative;"
-        tabindex="0"
+        class="AutoHideScrollbar-module_scrollbar RoomListView-module_scrollbar"
+        tabindex="-1"
       >
         <div
-          data-viewport-type="element"
-          style="height: 100%; position: absolute; top: 0px; width: 100%;"
-        >
-          <div
-            data-testid="virtuoso-item-list"
-            style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
-          >
-            <div
-              data-index="0"
-              data-item-index="0"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room General"
-                aria-posinset="1"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold RoomListItemView-module_firstItem"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="General avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    GE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="General"
-                      >
-                        General
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in General"
-                      >
-                        Last message in General
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1qo_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1qm_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1qv_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1qt_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    >
-                      <div
-                        class="Flex-module_flex"
-                        data-testid="notification-decoration"
-                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                          />
-                        </svg>
-                        <div
-                          class="_unread-counter_1147r_8"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="1"
-              data-item-index="1"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Random"
-                aria-posinset="2"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Random avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    RA
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Random"
-                      >
-                        Random
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1r6_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1r4_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1rd_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1rb_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="2"
-              data-item-index="2"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Engineering"
-                aria-posinset="3"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Engineering avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    EN
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Engineering"
-                      >
-                        Engineering
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Engineering"
-                      >
-                        Last message in Engineering
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1rk_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1ri_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1rr_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1rp_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="3"
-              data-item-index="3"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Design"
-                aria-posinset="4"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Design avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    DE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Design"
-                      >
-                        Design
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1s2_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1s0_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1s9_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1s7_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="4"
-              data-item-index="4"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Product"
-                aria-posinset="5"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Product avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    PR
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Product"
-                      >
-                        Product
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Product"
-                      >
-                        Last message in Product
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1sg_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1se_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1sn_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1sl_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="5"
-              data-item-index="5"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Marketing with 5 unread mentions."
-                aria-posinset="6"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Marketing avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    MA
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Marketing"
-                      >
-                        Marketing
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1su_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1ss_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1t5_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1t3_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    >
-                      <div
-                        class="Flex-module_flex"
-                        data-testid="notification-decoration"
-                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                          />
-                        </svg>
-                        <span
-                          class="_unread-counter_1147r_8"
-                        >
-                          5
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="6"
-              data-item-index="6"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Sales"
-                aria-posinset="7"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Sales avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    SA
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Sales"
-                      >
-                        Sales
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Sales"
-                      >
-                        Last message in Sales
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1tc_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1ta_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1tj_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1th_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="7"
-              data-item-index="7"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Support"
-                aria-posinset="8"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Support avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    SU
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Support"
-                      >
-                        Support
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1tq_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1to_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1u1_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1tv_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="8"
-              data-item-index="8"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Announcements"
-                aria-posinset="9"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Announcements avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    AN
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Announcements"
-                      >
-                        Announcements
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Announcements"
-                      >
-                        Last message in Announcements
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1u8_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1u6_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1uf_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1ud_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="9"
-              data-item-index="9"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Off-topic"
-                aria-posinset="10"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Off-topic avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    OF
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Off-topic"
-                      >
-                        Off-topic
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1um_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1uk_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1ut_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1ur_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="10"
-              data-item-index="10"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Team Alpha with 10 unread mentions."
-                aria-posinset="11"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Team Alpha avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    TE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Team Alpha"
-                      >
-                        Team Alpha
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Team Alpha"
-                      >
-                        Last message in Team Alpha
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1v4_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1v2_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1vb_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1v9_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    >
-                      <div
-                        class="Flex-module_flex"
-                        data-testid="notification-decoration"
-                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                          />
-                        </svg>
-                        <span
-                          class="_unread-counter_1147r_8"
-                        >
-                          10
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="11"
-              data-item-index="11"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Team Beta"
-                aria-posinset="12"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Team Beta avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    TE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Team Beta"
-                      >
-                        Team Beta
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_1vi_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1vg_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_1vp_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1vn_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="12"
-              data-item-index="12"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Project X"
-                aria-posinset="13"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Project X avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    PR
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Project X"
-                      >
-                        Project X
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Project X"
-                      >
-                        Last message in Project X
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_200_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_1vu_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_207_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_205_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="13"
-              data-item-index="13"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Project Y"
-                aria-posinset="14"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Project Y avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    PR
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Project Y"
-                      >
-                        Project Y
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_20e_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_20c_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_20l_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_20j_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="14"
-              data-item-index="14"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Water Cooler"
-                aria-posinset="15"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Water Cooler avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    WA
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Water Cooler"
-                      >
-                        Water Cooler
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Water Cooler"
-                      >
-                        Last message in Water Cooler
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_20s_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_20q_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_213_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_211_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="15"
-              data-item-index="15"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Feedback with 15 unread mentions."
-                aria-posinset="16"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Feedback avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    FE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Feedback"
-                      >
-                        Feedback
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_21a_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_218_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_21h_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_21f_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    >
-                      <div
-                        class="Flex-module_flex"
-                        data-testid="notification-decoration"
-                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                          />
-                        </svg>
-                        <span
-                          class="_unread-counter_1147r_8"
-                        >
-                          15
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="16"
-              data-item-index="16"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Ideas"
-                aria-posinset="17"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Ideas avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    ID
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Ideas"
-                      >
-                        Ideas
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Ideas"
-                      >
-                        Last message in Ideas
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_21o_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_21m_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_21v_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_21t_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="17"
-              data-item-index="17"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Bugs"
-                aria-posinset="18"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Bugs avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    BU
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Bugs"
-                      >
-                        Bugs
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_226_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_224_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_22d_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_22b_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="18"
-              data-item-index="18"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Features"
-                aria-posinset="19"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Features avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    FE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Features"
-                      >
-                        Features
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Features"
-                      >
-                        Last message in Features
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_22k_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_22i_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_22r_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_22p_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="19"
-              data-item-index="19"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Releases"
-                aria-posinset="20"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_lastItem"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
-              >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                >
-                  <div
-                    aria-label="Releases avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    RE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
-                  >
-                    <div
-                      class="RoomListItemView-module_ellipsis"
-                    >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Releases"
-                      >
-                        Releases
-                      </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_232_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_230_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_239_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_237_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
-                  </div>
-                </div>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _toast-container_1ysb3_8 RoomListToast-module_toast _has-close_1ysb3_30"
-      >
-        <div
-          class="_content_1ysb3_34"
-        >
-          <svg
-            aria-hidden="true"
-            class="_icon_1ysb3_26"
-            fill="currentColor"
-            height="20"
-            viewBox="0 0 24 24"
-            width="20"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M9.55 17.575q-.2 0-.375-.062a.9.9 0 0 1-.325-.213L4.55 13q-.274-.274-.262-.713.012-.437.287-.712a.95.95 0 0 1 .7-.275q.425 0 .7.275L9.55 15.15l8.475-8.475q.274-.275.713-.275.437 0 .712.275.275.274.275.713 0 .437-.275.712l-9.2 9.2q-.15.15-.325.212a1.1 1.1 0 0 1-.375.063"
-            />
-          </svg>
-          Section created
-        </div>
-        <button
-          aria-labelledby="_r_1qh_"
-          class="_icon-button_1215g_8 _close_1ysb3_41 _no-background_1215g_42"
-          data-kind="secondary"
-          role="button"
-          style="--cpd-icon-button-size: 24px;"
+          aria-label="Room list"
+          class="VirtualizedRoomListView-module_roomList"
+          data-testid="room-list"
+          data-virtuoso-scroller="true"
+          role="listbox"
+          style="height: 100%; outline: none; overflow-y: auto; position: relative;"
           tabindex="0"
         >
           <div
-            class="_indicator-icon_147l5_17"
-            style="--cpd-icon-button-size: 100%;"
+            data-viewport-type="element"
+            style="height: 100%; position: absolute; top: 0px; width: 100%;"
           >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              data-testid="virtuoso-item-list"
+              style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
             >
-              <path
-                d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
-              />
-            </svg>
+              <div
+                data-index="0"
+                data-item-index="0"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room General"
+                  aria-posinset="1"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold RoomListItemView-module_firstItem"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="General avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      GE
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="General"
+                        >
+                          General
+                        </div>
+                        <div
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in General"
+                        >
+                          Last message in General
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-2"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-3"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-4"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-5"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      >
+                        <div
+                          class="Flex-module_flex"
+                          data-testid="notification-decoration"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                        >
+                          <svg
+                            fill="var(--cpd-color-icon-accent-primary)"
+                            height="20px"
+                            viewBox="0 0 24 24"
+                            width="20px"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                            />
+                          </svg>
+                          <div
+                            class="_unread-counter_1147r_8"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="1"
+                data-item-index="1"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Random"
+                  aria-posinset="2"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Random avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      RA
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Random"
+                        >
+                          Random
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-6"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-7"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-8"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-9"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="2"
+                data-item-index="2"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Engineering"
+                  aria-posinset="3"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Engineering avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      EN
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Engineering"
+                        >
+                          Engineering
+                        </div>
+                        <div
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Engineering"
+                        >
+                          Last message in Engineering
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-10"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-11"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-12"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-13"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="3"
+                data-item-index="3"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Design"
+                  aria-posinset="4"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Design avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      DE
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Design"
+                        >
+                          Design
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-14"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-15"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-16"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-17"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="4"
+                data-item-index="4"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Product"
+                  aria-posinset="5"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Product avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      PR
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Product"
+                        >
+                          Product
+                        </div>
+                        <div
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Product"
+                        >
+                          Last message in Product
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-18"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-19"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-20"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-21"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="5"
+                data-item-index="5"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Marketing with 5 unread mentions."
+                  aria-posinset="6"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Marketing avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      MA
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Marketing"
+                        >
+                          Marketing
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-22"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-23"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-24"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-25"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      >
+                        <div
+                          class="Flex-module_flex"
+                          data-testid="notification-decoration"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                        >
+                          <svg
+                            fill="var(--cpd-color-icon-accent-primary)"
+                            height="20px"
+                            viewBox="0 0 24 24"
+                            width="20px"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                            />
+                          </svg>
+                          <span
+                            class="_unread-counter_1147r_8"
+                          >
+                            5
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="6"
+                data-item-index="6"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Sales"
+                  aria-posinset="7"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Sales avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      SA
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Sales"
+                        >
+                          Sales
+                        </div>
+                        <div
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Sales"
+                        >
+                          Last message in Sales
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-26"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-27"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-28"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-29"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="7"
+                data-item-index="7"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Support"
+                  aria-posinset="8"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Support avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      SU
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Support"
+                        >
+                          Support
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-30"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-31"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-32"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-33"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="8"
+                data-item-index="8"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Announcements"
+                  aria-posinset="9"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Announcements avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      AN
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Announcements"
+                        >
+                          Announcements
+                        </div>
+                        <div
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Announcements"
+                        >
+                          Last message in Announcements
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-34"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-35"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-36"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-37"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="9"
+                data-item-index="9"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Off-topic"
+                  aria-posinset="10"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Off-topic avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      OF
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Off-topic"
+                        >
+                          Off-topic
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-38"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-39"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-40"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-41"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="10"
+                data-item-index="10"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Team Alpha with 10 unread mentions."
+                  aria-posinset="11"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Team Alpha avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      TE
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Team Alpha"
+                        >
+                          Team Alpha
+                        </div>
+                        <div
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Team Alpha"
+                        >
+                          Last message in Team Alpha
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-42"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-43"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-44"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-45"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      >
+                        <div
+                          class="Flex-module_flex"
+                          data-testid="notification-decoration"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                        >
+                          <svg
+                            fill="var(--cpd-color-icon-accent-primary)"
+                            height="20px"
+                            viewBox="0 0 24 24"
+                            width="20px"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                            />
+                          </svg>
+                          <span
+                            class="_unread-counter_1147r_8"
+                          >
+                            10
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="11"
+                data-item-index="11"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Team Beta"
+                  aria-posinset="12"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Team Beta avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      TE
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Team Beta"
+                        >
+                          Team Beta
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-46"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-47"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-48"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-49"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="12"
+                data-item-index="12"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Project X"
+                  aria-posinset="13"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Project X avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      PR
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Project X"
+                        >
+                          Project X
+                        </div>
+                        <div
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Project X"
+                        >
+                          Last message in Project X
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-50"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-51"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-52"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-53"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="13"
+                data-item-index="13"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Project Y"
+                  aria-posinset="14"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Project Y avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      PR
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Project Y"
+                        >
+                          Project Y
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-54"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-55"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-56"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-57"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="14"
+                data-item-index="14"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Water Cooler"
+                  aria-posinset="15"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Water Cooler avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      WA
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Water Cooler"
+                        >
+                          Water Cooler
+                        </div>
+                        <div
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Water Cooler"
+                        >
+                          Last message in Water Cooler
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-58"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-59"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-60"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-61"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="15"
+                data-item-index="15"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Feedback with 15 unread mentions."
+                  aria-posinset="16"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Feedback avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      FE
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Feedback"
+                        >
+                          Feedback
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-62"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-63"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-64"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-65"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      >
+                        <div
+                          class="Flex-module_flex"
+                          data-testid="notification-decoration"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                        >
+                          <svg
+                            fill="var(--cpd-color-icon-accent-primary)"
+                            height="20px"
+                            viewBox="0 0 24 24"
+                            width="20px"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                            />
+                          </svg>
+                          <span
+                            class="_unread-counter_1147r_8"
+                          >
+                            15
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="16"
+                data-item-index="16"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Ideas"
+                  aria-posinset="17"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Ideas avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      ID
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Ideas"
+                        >
+                          Ideas
+                        </div>
+                        <div
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Ideas"
+                        >
+                          Last message in Ideas
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-66"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-67"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-68"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-69"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="17"
+                data-item-index="17"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Bugs"
+                  aria-posinset="18"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Bugs avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      BU
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Bugs"
+                        >
+                          Bugs
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-70"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-71"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-72"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-73"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="18"
+                data-item-index="18"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Features"
+                  aria-posinset="19"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Features avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      FE
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Features"
+                        >
+                          Features
+                        </div>
+                        <div
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Features"
+                        >
+                          Last message in Features
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-74"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-75"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-76"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-77"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+              <div
+                data-index="19"
+                data-item-index="19"
+                data-known-size="52"
+                style="overflow-anchor: none;"
+              >
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Releases"
+                  aria-posinset="20"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_lastItem"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
+                >
+                  <div
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  >
+                    <div
+                      aria-label="Releases avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      RE
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    >
+                      <div
+                        class="RoomListItemView-module_ellipsis"
+                      >
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Releases"
+                        >
+                          Releases
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-78"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-79"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-80"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-81"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
+                    </div>
+                  </div>
+                </button>
+              </div>
+            </div>
           </div>
-        </button>
+        </div>
+        <div
+          class="_toast-container_1jkz7_8 RoomListToast-module_toast _has-close_1jkz7_59"
+        >
+          <div
+            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41 _content_1jkz7_68"
+          >
+            Section created
+          </div>
+          <button
+            aria-labelledby="react-use-id-82"
+            class="_icon-button_1215g_8 _close_1jkz7_75 _no-background_1215g_42"
+            data-kind="secondary"
+            role="button"
+            style="--cpd-icon-button-size: 24px;"
+            tabindex="0"
+          >
+            <div
+              class="_indicator-icon_147l5_17"
+              style="--cpd-icon-button-size: 100%;"
+            >
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+                />
+              </svg>
+            </div>
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -16811,7 +16927,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
         <div
           aria-label="Room list filters"
           class="Flex-module_flex RoomListPrimaryFilters-module_list"
-          id="_r_a4_"
+          id="react-use-id-1"
           role="listbox"
           style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: wrap;"
         >
@@ -16826,7 +16942,7 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
           </button>
           <button
             aria-hidden="false"
-            aria-selected="false"
+            aria-selected="true"
             class="_chat-filter_5qdp0_8"
             role="option"
             tabindex="0"
@@ -16842,15 +16958,6 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
           >
             Rooms
           </button>
-          <button
-            aria-hidden="false"
-            aria-selected="true"
-            class="_chat-filter_5qdp0_8"
-            role="option"
-            tabindex="0"
-          >
-            Favourites
-          </button>
         </div>
       </div>
     </div>
@@ -16859,2611 +16966,2616 @@ exports[`<RoomListView /> > renders WithActiveFilter story 1`] = `
       style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
     >
       <div
-        aria-label="Room list"
-        class="VirtualizedRoomListView-module_roomList"
-        data-testid="room-list"
-        data-virtuoso-scroller="true"
-        role="listbox"
-        style="height: 100%; outline: none; overflow-y: auto; position: relative;"
-        tabindex="0"
+        class="AutoHideScrollbar-module_scrollbar RoomListView-module_scrollbar"
+        tabindex="-1"
       >
         <div
-          data-viewport-type="element"
-          style="height: 100%; position: absolute; top: 0px; width: 100%;"
+          aria-label="Room list"
+          class="VirtualizedRoomListView-module_roomList"
+          data-testid="room-list"
+          data-virtuoso-scroller="true"
+          role="listbox"
+          style="height: 100%; outline: none; overflow-y: auto; position: relative;"
+          tabindex="0"
         >
           <div
-            data-testid="virtuoso-item-list"
-            style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
+            data-viewport-type="element"
+            style="height: 100%; position: absolute; top: 0px; width: 100%;"
           >
             <div
-              data-index="0"
-              data-item-index="0"
-              data-known-size="52"
-              style="overflow-anchor: none;"
+              data-testid="virtuoso-item-list"
+              style="box-sizing: border-box; margin-top: 0px; padding-bottom: 0px; padding-top: 0px;"
             >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room General"
-                aria-posinset="1"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold RoomListItemView-module_firstItem"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
+              <div
+                data-index="0"
+                data-item-index="0"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room General"
+                  aria-posinset="1"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold RoomListItemView-module_firstItem"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="General avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    GE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="RoomListItemView-module_ellipsis"
+                      aria-label="General avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="General"
-                      >
-                        General
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in General"
-                      >
-                        Last message in General
-                      </div>
+                      GE
                     </div>
                     <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_a7_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_a5_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="General"
+                        >
+                          General
+                        </div>
+                        <div
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in General"
+                        >
+                          Last message in General
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-2"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-3"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-4"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-5"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      >
+                        <div
+                          class="Flex-module_flex"
+                          data-testid="notification-decoration"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                         >
                           <svg
-                            fill="currentColor"
-                            height="1em"
+                            fill="var(--cpd-color-icon-accent-primary)"
+                            height="20px"
                             viewBox="0 0 24 24"
-                            width="1em"
+                            width="20px"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                             />
                           </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_ae_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_ac_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    >
-                      <div
-                        class="Flex-module_flex"
-                        data-testid="notification-decoration"
-                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
+                          <div
+                            class="_unread-counter_1147r_8"
                           />
-                        </svg>
-                        <div
-                          class="_unread-counter_1147r_8"
-                        />
+                        </div>
                       </div>
                     </div>
                   </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="1"
-              data-item-index="1"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Random"
-                aria-posinset="2"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
+                </button>
+              </div>
+              <div
+                data-index="1"
+                data-item-index="1"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Random"
+                  aria-posinset="2"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Random avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    RA
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="RoomListItemView-module_ellipsis"
+                      aria-label="Random avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      RA
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                     >
                       <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Random"
+                        class="RoomListItemView-module_ellipsis"
                       >
-                        Random
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Random"
+                        >
+                          Random
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_al_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_aj_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                       >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-6"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-7"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_as_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_aq_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-8"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-9"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="2"
-              data-item-index="2"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Engineering"
-                aria-posinset="3"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
+                </button>
+              </div>
+              <div
+                data-index="2"
+                data-item-index="2"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Engineering"
+                  aria-posinset="3"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Engineering avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    EN
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="RoomListItemView-module_ellipsis"
+                      aria-label="Engineering avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Engineering"
-                      >
-                        Engineering
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Engineering"
-                      >
-                        Last message in Engineering
-                      </div>
+                      EN
                     </div>
                     <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_b3_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_b1_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Engineering"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
+                          Engineering
                         </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_ba_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_b8_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Engineering"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                          Last message in Engineering
                         </div>
-                      </button>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-10"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-11"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-12"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-13"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="3"
-              data-item-index="3"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Design"
-                aria-posinset="4"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
+                </button>
+              </div>
+              <div
+                data-index="3"
+                data-item-index="3"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Design"
+                  aria-posinset="4"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Design avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    DE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="RoomListItemView-module_ellipsis"
+                      aria-label="Design avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      DE
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                     >
                       <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Design"
+                        class="RoomListItemView-module_ellipsis"
                       >
-                        Design
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Design"
+                        >
+                          Design
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_bh_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_bf_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                       >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-14"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-15"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_bo_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_bm_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-16"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-17"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="4"
-              data-item-index="4"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Product"
-                aria-posinset="5"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
+                </button>
+              </div>
+              <div
+                data-index="4"
+                data-item-index="4"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Product"
+                  aria-posinset="5"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Product avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    PR
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="RoomListItemView-module_ellipsis"
+                      aria-label="Product avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Product"
-                      >
-                        Product
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Product"
-                      >
-                        Last message in Product
-                      </div>
+                      PR
                     </div>
                     <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_bv_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_bt_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Product"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
+                          Product
                         </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_c6_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_c4_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Product"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                          Last message in Product
                         </div>
-                      </button>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-18"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-19"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-20"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-21"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="5"
-              data-item-index="5"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Marketing with 5 unread mentions."
-                aria-posinset="6"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
+                </button>
+              </div>
+              <div
+                data-index="5"
+                data-item-index="5"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Marketing with 5 unread mentions."
+                  aria-posinset="6"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Marketing avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    MA
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="RoomListItemView-module_ellipsis"
+                      aria-label="Marketing avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Marketing"
-                      >
-                        Marketing
-                      </div>
+                      MA
                     </div>
                     <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_cd_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_cb_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Marketing"
+                        >
+                          Marketing
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-22"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-23"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-24"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-25"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      >
+                        <div
+                          class="Flex-module_flex"
+                          data-testid="notification-decoration"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                         >
                           <svg
-                            fill="currentColor"
-                            height="1em"
+                            fill="var(--cpd-color-icon-accent-primary)"
+                            height="20px"
                             viewBox="0 0 24 24"
-                            width="1em"
+                            width="20px"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                             />
                           </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_ck_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_ci_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <span
+                            class="_unread-counter_1147r_8"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                            5
+                          </span>
                         </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    >
-                      <div
-                        class="Flex-module_flex"
-                        data-testid="notification-decoration"
-                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                          />
-                        </svg>
-                        <span
-                          class="_unread-counter_1147r_8"
-                        >
-                          5
-                        </span>
                       </div>
                     </div>
                   </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="6"
-              data-item-index="6"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Sales"
-                aria-posinset="7"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
+                </button>
+              </div>
+              <div
+                data-index="6"
+                data-item-index="6"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Sales"
+                  aria-posinset="7"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Sales avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    SA
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="RoomListItemView-module_ellipsis"
+                      aria-label="Sales avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Sales"
-                      >
-                        Sales
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Sales"
-                      >
-                        Last message in Sales
-                      </div>
+                      SA
                     </div>
                     <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_cr_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_cp_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Sales"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
+                          Sales
                         </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_d2_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_d0_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Sales"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                          Last message in Sales
                         </div>
-                      </button>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-26"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-27"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-28"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-29"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="7"
-              data-item-index="7"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Support"
-                aria-posinset="8"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
+                </button>
+              </div>
+              <div
+                data-index="7"
+                data-item-index="7"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Support"
+                  aria-posinset="8"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Support avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    SU
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="RoomListItemView-module_ellipsis"
+                      aria-label="Support avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      SU
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                     >
                       <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Support"
+                        class="RoomListItemView-module_ellipsis"
                       >
-                        Support
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Support"
+                        >
+                          Support
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_d9_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_d7_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                       >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-30"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-31"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_dg_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_de_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-32"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-33"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="8"
-              data-item-index="8"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Announcements"
-                aria-posinset="9"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
+                </button>
+              </div>
+              <div
+                data-index="8"
+                data-item-index="8"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Announcements"
+                  aria-posinset="9"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Announcements avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    AN
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="RoomListItemView-module_ellipsis"
+                      aria-label="Announcements avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Announcements"
-                      >
-                        Announcements
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Announcements"
-                      >
-                        Last message in Announcements
-                      </div>
+                      AN
                     </div>
                     <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_dn_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_dl_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Announcements"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
+                          Announcements
                         </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_du_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_ds_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Announcements"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                          Last message in Announcements
                         </div>
-                      </button>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-34"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-35"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-36"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-37"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="9"
-              data-item-index="9"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Off-topic"
-                aria-posinset="10"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
+                </button>
+              </div>
+              <div
+                data-index="9"
+                data-item-index="9"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Off-topic"
+                  aria-posinset="10"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Off-topic avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    OF
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="RoomListItemView-module_ellipsis"
+                      aria-label="Off-topic avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      OF
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                     >
                       <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Off-topic"
+                        class="RoomListItemView-module_ellipsis"
                       >
-                        Off-topic
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Off-topic"
+                        >
+                          Off-topic
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_e5_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_e3_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                       >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-38"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-39"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_ec_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_ea_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-40"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-41"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="10"
-              data-item-index="10"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Team Alpha with 10 unread mentions."
-                aria-posinset="11"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
+                </button>
+              </div>
+              <div
+                data-index="10"
+                data-item-index="10"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Team Alpha with 10 unread mentions."
+                  aria-posinset="11"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Team Alpha avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    TE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="RoomListItemView-module_ellipsis"
+                      aria-label="Team Alpha avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Team Alpha"
-                      >
-                        Team Alpha
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Team Alpha"
-                      >
-                        Last message in Team Alpha
-                      </div>
+                      TE
                     </div>
                     <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_ej_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_eh_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Team Alpha"
+                        >
+                          Team Alpha
+                        </div>
+                        <div
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Team Alpha"
+                        >
+                          Last message in Team Alpha
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-42"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-43"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-44"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-45"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      >
+                        <div
+                          class="Flex-module_flex"
+                          data-testid="notification-decoration"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                         >
                           <svg
-                            fill="currentColor"
-                            height="1em"
+                            fill="var(--cpd-color-icon-accent-primary)"
+                            height="20px"
                             viewBox="0 0 24 24"
-                            width="1em"
+                            width="20px"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                             />
                           </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_eq_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_eo_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <span
+                            class="_unread-counter_1147r_8"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                            10
+                          </span>
                         </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    >
-                      <div
-                        class="Flex-module_flex"
-                        data-testid="notification-decoration"
-                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                          />
-                        </svg>
-                        <span
-                          class="_unread-counter_1147r_8"
-                        >
-                          10
-                        </span>
                       </div>
                     </div>
                   </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="11"
-              data-item-index="11"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Team Beta"
-                aria-posinset="12"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
+                </button>
+              </div>
+              <div
+                data-index="11"
+                data-item-index="11"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Team Beta"
+                  aria-posinset="12"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Team Beta avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    TE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="RoomListItemView-module_ellipsis"
+                      aria-label="Team Beta avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      TE
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                     >
                       <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Team Beta"
+                        class="RoomListItemView-module_ellipsis"
                       >
-                        Team Beta
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Team Beta"
+                        >
+                          Team Beta
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_f1_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_ev_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                       >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-46"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-47"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_f8_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_f6_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-48"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-49"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="12"
-              data-item-index="12"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Project X"
-                aria-posinset="13"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
+                </button>
+              </div>
+              <div
+                data-index="12"
+                data-item-index="12"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Project X"
+                  aria-posinset="13"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Project X avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    PR
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="RoomListItemView-module_ellipsis"
+                      aria-label="Project X avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Project X"
-                      >
-                        Project X
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Project X"
-                      >
-                        Last message in Project X
-                      </div>
+                      PR
                     </div>
                     <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_ff_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_fd_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Project X"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
+                          Project X
                         </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_fm_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_fk_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Project X"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                          Last message in Project X
                         </div>
-                      </button>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-50"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-51"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-52"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-53"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="13"
-              data-item-index="13"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Project Y"
-                aria-posinset="14"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
+                </button>
+              </div>
+              <div
+                data-index="13"
+                data-item-index="13"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Project Y"
+                  aria-posinset="14"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Project Y avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    PR
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="RoomListItemView-module_ellipsis"
+                      aria-label="Project Y avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      PR
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                     >
                       <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Project Y"
+                        class="RoomListItemView-module_ellipsis"
                       >
-                        Project Y
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Project Y"
+                        >
+                          Project Y
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_ft_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_fr_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                       >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-54"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-55"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_g4_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_g2_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-56"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-57"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="14"
-              data-item-index="14"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Water Cooler"
-                aria-posinset="15"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
+                </button>
+              </div>
+              <div
+                data-index="14"
+                data-item-index="14"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Water Cooler"
+                  aria-posinset="15"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Water Cooler avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    WA
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="RoomListItemView-module_ellipsis"
+                      aria-label="Water Cooler avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Water Cooler"
-                      >
-                        Water Cooler
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Water Cooler"
-                      >
-                        Last message in Water Cooler
-                      </div>
+                      WA
                     </div>
                     <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_gb_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_g9_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Water Cooler"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
+                          Water Cooler
                         </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_gi_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_gg_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Water Cooler"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                          Last message in Water Cooler
                         </div>
-                      </button>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-58"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-59"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-60"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-61"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="15"
-              data-item-index="15"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Feedback with 15 unread mentions."
-                aria-posinset="16"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
+                </button>
+              </div>
+              <div
+                data-index="15"
+                data-item-index="15"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Feedback with 15 unread mentions."
+                  aria-posinset="16"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Feedback avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    FE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="RoomListItemView-module_ellipsis"
+                      aria-label="Feedback avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Feedback"
-                      >
-                        Feedback
-                      </div>
+                      FE
                     </div>
                     <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_gp_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_gn_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Feedback"
+                        >
+                          Feedback
+                        </div>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-62"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-63"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-64"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-65"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      >
+                        <div
+                          class="Flex-module_flex"
+                          data-testid="notification-decoration"
+                          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                         >
                           <svg
-                            fill="currentColor"
-                            height="1em"
+                            fill="var(--cpd-color-icon-accent-primary)"
+                            height="20px"
                             viewBox="0 0 24 24"
-                            width="1em"
+                            width="20px"
                             xmlns="http://www.w3.org/2000/svg"
                           >
                             <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
                             />
                           </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_h0_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_gu_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
-                        >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <span
+                            class="_unread-counter_1147r_8"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                            15
+                          </span>
                         </div>
-                      </button>
-                    </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    >
-                      <div
-                        class="Flex-module_flex"
-                        data-testid="notification-decoration"
-                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                      >
-                        <svg
-                          fill="var(--cpd-color-icon-accent-primary)"
-                          height="20px"
-                          viewBox="0 0 24 24"
-                          width="20px"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M12 4a8 8 0 1 0 0 16 1 1 0 1 1 0 2C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10v1.5a3.5 3.5 0 0 1-6.396 1.966A5 5 0 1 1 17 12v1.5a1.5 1.5 0 0 0 3 0V12a8 8 0 0 0-8-8m3 8a3 3 0 1 0-6 0 3 3 0 0 0 6 0"
-                          />
-                        </svg>
-                        <span
-                          class="_unread-counter_1147r_8"
-                        >
-                          15
-                        </span>
                       </div>
                     </div>
                   </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="16"
-              data-item-index="16"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Ideas"
-                aria-posinset="17"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
+                </button>
+              </div>
+              <div
+                data-index="16"
+                data-item-index="16"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Ideas"
+                  aria-posinset="17"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Ideas avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    ID
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="RoomListItemView-module_ellipsis"
+                      aria-label="Ideas avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Ideas"
-                      >
-                        Ideas
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Ideas"
-                      >
-                        Last message in Ideas
-                      </div>
+                      ID
                     </div>
                     <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_h7_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_h5_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Ideas"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
+                          Ideas
                         </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_he_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_hc_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Ideas"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                          Last message in Ideas
                         </div>
-                      </button>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-66"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-67"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-68"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-69"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="17"
-              data-item-index="17"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Bugs"
-                aria-posinset="18"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
+                </button>
+              </div>
+              <div
+                data-index="17"
+                data-item-index="17"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Bugs"
+                  aria-posinset="18"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Bugs avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    BU
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="RoomListItemView-module_ellipsis"
+                      aria-label="Bugs avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      BU
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                     >
                       <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Bugs"
+                        class="RoomListItemView-module_ellipsis"
                       >
-                        Bugs
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Bugs"
+                        >
+                          Bugs
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_hl_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_hj_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                       >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-70"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-71"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_hs_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_hq_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-72"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-73"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="18"
-              data-item-index="18"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Features"
-                aria-posinset="19"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
+                </button>
+              </div>
+              <div
+                data-index="18"
+                data-item-index="18"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Features"
+                  aria-posinset="19"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_bold"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Features avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    FE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="RoomListItemView-module_ellipsis"
+                      aria-label="Features avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
                     >
-                      <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Features"
-                      >
-                        Features
-                      </div>
-                      <div
-                        class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
-                        title="Last message in Features"
-                      >
-                        Last message in Features
-                      </div>
+                      FE
                     </div>
                     <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                     >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_i3_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_i1_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="RoomListItemView-module_ellipsis"
                       >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Features"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
+                          Features
                         </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_ia_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_i8_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
                         <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                          class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31 RoomListItemView-module_ellipsis"
+                          title="Last message in Features"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
+                          Last message in Features
                         </div>
-                      </button>
+                      </div>
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
+                      >
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-74"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-75"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-76"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-77"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
+                        >
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
+                          >
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
-            </div>
-            <div
-              data-index="19"
-              data-item-index="19"
-              data-known-size="52"
-              style="overflow-anchor: none;"
-            >
-              <button
-                aria-haspopup="menu"
-                aria-label="Open room Releases"
-                aria-posinset="20"
-                aria-selected="false"
-                aria-setsize="20"
-                class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_lastItem"
-                data-state="closed"
-                role="option"
-                style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
-                tabindex="-1"
-                type="button"
+                </button>
+              </div>
+              <div
+                data-index="19"
+                data-item-index="19"
+                data-known-size="52"
+                style="overflow-anchor: none;"
               >
-                <div
-                  class="Flex-module_flex RoomListItemView-module_container"
-                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                <button
+                  aria-haspopup="menu"
+                  aria-label="Open room Releases"
+                  aria-posinset="20"
+                  aria-selected="false"
+                  aria-setsize="20"
+                  class="Flex-module_flex RoomListItemView-module_roomListItem mx_RoomListItemView RoomListItemView-module_lastItem"
+                  data-state="closed"
+                  role="option"
+                  style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: stretch; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+                  tabindex="-1"
+                  type="button"
                 >
                   <div
-                    aria-label="Releases avatar"
-                    role="img"
-                    style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
-                  >
-                    RE
-                  </div>
-                  <div
-                    class="Flex-module_flex RoomListItemView-module_content"
-                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+                    class="Flex-module_flex RoomListItemView-module_container"
+                    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
                   >
                     <div
-                      class="RoomListItemView-module_ellipsis"
+                      aria-label="Releases avatar"
+                      role="img"
+                      style="width: 32px; height: 32px; border-radius: 50%; background-color: rgb(11, 127, 103); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;"
+                    >
+                      RE
+                    </div>
+                    <div
+                      class="Flex-module_flex RoomListItemView-module_content"
+                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
                     >
                       <div
-                        class="RoomListItemView-module_roomName"
-                        data-testid="room-name"
-                        title="Releases"
+                        class="RoomListItemView-module_ellipsis"
                       >
-                        Releases
+                        <div
+                          class="RoomListItemView-module_roomName"
+                          data-testid="room-name"
+                          title="Releases"
+                        >
+                          Releases
+                        </div>
                       </div>
-                    </div>
-                    <div
-                      class="Flex-module_flex RoomListItemView-module_hoverMenu"
-                      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
-                    >
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="More Options"
-                        aria-labelledby="_r_ih_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_if_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
+                      <div
+                        class="Flex-module_flex RoomListItemView-module_hoverMenu"
+                        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
                       >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="More Options"
+                          aria-labelledby="react-use-id-78"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-79"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-                            />
-                          </svg>
-                        </div>
-                      </button>
-                      <button
-                        aria-disabled="false"
-                        aria-expanded="false"
-                        aria-haspopup="menu"
-                        aria-label="Notification options"
-                        aria-labelledby="_r_io_"
-                        class="_icon-button_1215g_8"
-                        data-kind="primary"
-                        data-state="closed"
-                        id="radix-_r_im_"
-                        role="button"
-                        style="--cpd-icon-button-size: 24px; padding: 2px;"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <div
-                          class="_indicator-icon_147l5_17"
-                          style="--cpd-icon-button-size: 100%;"
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                        <button
+                          aria-disabled="false"
+                          aria-expanded="false"
+                          aria-haspopup="menu"
+                          aria-label="Notification options"
+                          aria-labelledby="react-use-id-80"
+                          class="_icon-button_1215g_8"
+                          data-kind="primary"
+                          data-state="closed"
+                          id="radix-react-use-id-81"
+                          role="button"
+                          style="--cpd-icon-button-size: 24px; padding: 2px;"
+                          tabindex="0"
+                          type="button"
                         >
-                          <svg
-                            fill="currentColor"
-                            height="1em"
-                            viewBox="0 0 24 24"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
+                          <div
+                            class="_indicator-icon_147l5_17"
+                            style="--cpd-icon-button-size: 100%;"
                           >
-                            <path
-                              d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
-                            />
-                          </svg>
-                        </div>
-                      </button>
+                            <svg
+                              fill="currentColor"
+                              height="1em"
+                              viewBox="0 0 24 24"
+                              width="1em"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M20.293 17.293c.63.63.184 1.707-.707 1.707H4.414c-.89 0-1.337-1.077-.707-1.707L5 16v-6s0-7 7-7 7 7 7 7v6zM12 22a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2"
+                              />
+                            </svg>
+                          </div>
+                        </button>
+                      </div>
+                      <div
+                        aria-hidden="true"
+                        class="RoomListItemView-module_notificationDecoration"
+                      />
                     </div>
-                    <div
-                      aria-hidden="true"
-                      class="RoomListItemView-module_notificationDecoration"
-                    />
                   </div>
-                </div>
-              </button>
+                </button>
+              </div>
             </div>
           </div>
         </div>
diff --git a/packages/shared-components/src/room-list/RoomListView/index.tsx b/packages/shared-components/src/room-list/RoomListView/index.ts
similarity index 87%
rename from packages/shared-components/src/room-list/RoomListView/index.tsx
rename to packages/shared-components/src/room-list/RoomListView/index.ts
index 9b7ee15528..bae5b686b6 100644
--- a/packages/shared-components/src/room-list/RoomListView/index.tsx
+++ b/packages/shared-components/src/room-list/RoomListView/index.ts
@@ -16,5 +16,5 @@ export type {
 export { RoomListLoadingSkeleton } from "./RoomListLoadingSkeleton";
 export { RoomListEmptyStateView } from "./RoomListEmptyStateView";
 export type { RoomListEmptyStateViewProps } from "./RoomListEmptyStateView";
-export * from "../VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView";
+export * from "../VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView";
 export * from "./RoomListToast";
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListAccessibilityPlugin.test.ts b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListAccessibilityPlugin.test.ts
new file mode 100644
index 0000000000..70057f1642
--- /dev/null
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListAccessibilityPlugin.test.ts
@@ -0,0 +1,437 @@
+/*
+ * Copyright 2026 Element Creations 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 { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { renderHook } from "@test-utils";
+
+import {
+    type A11yData,
+    type DragAnnouncementGetter,
+    RoomListAccessibilityPlugin,
+    type RoomListAccessibilityOptions,
+    useRoomListAccessibilityPlugin,
+} from "./RoomListAccessibilityPlugin";
+import { I18nContext } from "../../core/i18n/i18nContext";
+import { I18nApi } from "../../core/i18n/I18nApi";
+import type { RoomListViewModel } from "../RoomListView";
+
+// ---------------------------------------------------------------------------
+// Minimal mock manager compatible with the @dnd-kit/abstract Plugin base class
+// ---------------------------------------------------------------------------
+
+type EventHandler = (event: unknown) => void;
+
+function createMockManager(): {
+    monitor: { addEventListener: ReturnType<typeof vi.fn> };
+    registry: {
+        draggables: { readonly value: IterableIterator<{ handle: HTMLElement | null; element: HTMLElement | null }> };
+    };
+    dispatch: (eventName: string, event: unknown) => void;
+    draggableElements: { handle: HTMLElement | null; element: HTMLElement | null }[];
+} {
+    const listeners = new Map<string, EventHandler[]>();
+
+    const monitor = {
+        addEventListener: vi.fn((eventName: string, handler: EventHandler) => {
+            if (!listeners.has(eventName)) listeners.set(eventName, []);
+            listeners.get(eventName)!.push(handler);
+            return vi.fn(() => {
+                const fns = listeners.get(eventName);
+                if (fns) {
+                    const idx = fns.indexOf(handler);
+                    if (idx >= 0) fns.splice(idx, 1);
+                }
+            });
+        }),
+    };
+
+    // A list of fake draggable objects the effect iterates over.
+    const draggableElements: { handle: HTMLElement | null; element: HTMLElement | null }[] = [];
+
+    const registry = {
+        draggables: {
+            // Plain (non-reactive) getter – the effect runs once on construction.
+            get value() {
+                return draggableElements.values();
+            },
+        },
+    };
+
+    /** Trigger a monitor event on all registered handlers. */
+    const dispatch = (eventName: string, event: unknown): void => {
+        listeners.get(eventName)?.forEach((fn) => fn(event));
+    };
+
+    return { monitor, registry, dispatch, draggableElements };
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function createPlugin(
+    manager: ReturnType<typeof createMockManager>,
+    options?: RoomListAccessibilityOptions,
+): RoomListAccessibilityPlugin {
+    // RoomListAccessibilityPlugin extends Plugin<DragDropManager> from @dnd-kit/abstract.
+    // The base class only requires manager.monitor and manager.registry to exist, which our
+    // mock satisfies.
+    return new RoomListAccessibilityPlugin(manager as never, options);
+}
+
+function getLiveRegion(): HTMLElement | null {
+    return document.querySelector<HTMLElement>("[role='status'][aria-live='polite']");
+}
+
+function getAssertiveRegion(): HTMLElement | null {
+    return document.querySelector<HTMLElement>("[role='alert'][aria-live='assertive']");
+}
+
+function getInstructions(): HTMLElement | null {
+    return document.querySelector<HTMLElement>("[style*='display: none']");
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe("RoomListAccessibilityPlugin", () => {
+    let manager: ReturnType<typeof createMockManager>;
+
+    beforeEach(() => {
+        manager = createMockManager();
+    });
+
+    afterEach(() => {
+        // Clean up any DOM nodes left behind by tests that don't call destroy().
+        getLiveRegion()?.remove();
+        getAssertiveRegion()?.remove();
+        getInstructions()?.remove();
+    });
+
+    describe("construction", () => {
+        it("appends a polite aria-live region to the document body", () => {
+            const plugin = createPlugin(manager);
+
+            const region = getLiveRegion();
+            expect(region).not.toBeNull();
+            expect(region).toBeInTheDocument();
+            expect(region).toHaveAttribute("role", "status");
+            expect(region).toHaveAttribute("aria-live", "polite");
+            expect(region).toHaveAttribute("aria-atomic", "true");
+
+            plugin.destroy();
+        });
+
+        it("appends an assertive aria-live region to the document body", () => {
+            const plugin = createPlugin(manager);
+
+            const region = getAssertiveRegion();
+            expect(region).not.toBeNull();
+            expect(region).toBeInTheDocument();
+            expect(region).toHaveAttribute("role", "alert");
+            expect(region).toHaveAttribute("aria-live", "assertive");
+            expect(region).toHaveAttribute("aria-atomic", "true");
+
+            plugin.destroy();
+        });
+
+        it("appends a hidden instructions element when the instructions option is provided", () => {
+            const plugin = createPlugin(manager, { instructions: "Press Space to drag" });
+
+            const el = getInstructions();
+            expect(el).not.toBeNull();
+            expect(el).toBeInTheDocument();
+            expect(el?.textContent).toBe("Press Space to drag");
+            expect(el?.style.display).toBe("none");
+
+            plugin.destroy();
+        });
+
+        it("does not append an instructions element when the option is omitted", () => {
+            const plugin = createPlugin(manager);
+            expect(getInstructions()).toBeNull();
+            plugin.destroy();
+        });
+
+        it("adds aria-describedby pointing to the instructions element on existing draggables", () => {
+            const button = document.createElement("button");
+            button.setAttribute("aria-label", "Toggle Favourites section");
+            document.body.append(button);
+
+            manager.draggableElements.push({ handle: button, element: button });
+
+            const plugin = createPlugin(manager, { instructions: "Press Space to drag" });
+
+            // The ID is a generated UUID — verify the button points to the instructions element.
+            const instructionsId = button.getAttribute("aria-describedby");
+            expect(instructionsId).toBeTruthy();
+            expect(document.getElementById(instructionsId!)).toBe(getInstructions());
+
+            button.remove();
+            plugin.destroy();
+        });
+
+        it("does not overwrite an existing aria-describedby on a draggable", () => {
+            const button = document.createElement("button");
+            button.setAttribute("aria-describedby", "my-existing-id");
+            document.body.append(button);
+
+            manager.draggableElements.push({ handle: button, element: button });
+
+            const plugin = createPlugin(manager, { instructions: "Press Space to drag" });
+
+            expect(button).toHaveAttribute("aria-describedby", "my-existing-id");
+
+            button.remove();
+            plugin.destroy();
+        });
+    });
+
+    describe("dragstart and dragover announcements", () => {
+        it("writes a dragstart message to the live region", () => {
+            const plugin = createPlugin(manager, {
+                announcements: { dragstart: () => "Dragging Favourites" },
+            });
+
+            manager.dispatch("dragstart", {});
+
+            expect(getLiveRegion()?.textContent).toBe("Dragging Favourites");
+
+            plugin.destroy();
+        });
+
+        it("writes a dragover message to the live region", () => {
+            const plugin = createPlugin(manager, {
+                announcements: { dragover: () => "Dragging Favourites over Low Priority" },
+            });
+
+            manager.dispatch("dragover", {});
+
+            expect(getLiveRegion()?.textContent).toBe("Dragging Favourites over Low Priority");
+
+            plugin.destroy();
+        });
+
+        it("does not update the live region when the getter returns undefined", () => {
+            const plugin = createPlugin(manager, {
+                announcements: { dragstart: () => undefined },
+            });
+
+            manager.dispatch("dragstart", {});
+
+            expect(getLiveRegion()?.textContent).toBe("");
+
+            plugin.destroy();
+        });
+
+        it("does not update the live region when the message is the same as the current text", () => {
+            const get = vi.fn(() => "Dragging Favourites");
+            const plugin = createPlugin(manager, {
+                announcements: { dragstart: get },
+            });
+
+            manager.dispatch("dragstart", {});
+            manager.dispatch("dragstart", {});
+
+            // The getter was called twice but the live region text is set only once (dedup).
+            expect(get).toHaveBeenCalledTimes(2);
+            expect(getLiveRegion()?.textContent).toBe("Dragging Favourites");
+
+            plugin.destroy();
+        });
+
+        it("passes the raw dnd-kit event to the announcement getter", () => {
+            const getter = vi.fn(() => "Dragging Favourites");
+            const plugin = createPlugin(manager, {
+                announcements: { dragstart: getter },
+            });
+
+            const fakeEvent = { operation: { source: { id: "fav" } } };
+            manager.dispatch("dragstart", fakeEvent);
+
+            expect(getter).toHaveBeenCalledWith(fakeEvent);
+
+            plugin.destroy();
+        });
+    });
+
+    describe("dragend announcement", () => {
+        it("announces the drop message in the assertive live region", () => {
+            const plugin = createPlugin(manager, {
+                announcements: { dragend: () => "Favourites was dropped on Low Priority" },
+            });
+
+            manager.dispatch("dragend", { operation: { source: { id: "favourites" } } });
+
+            // The drop is announced in the assertive region: focus stays on the source element so
+            // there is no focus change to read, and an assertive region reliably announces on Chrome.
+            expect(getAssertiveRegion()?.textContent).toBe("Favourites was dropped on Low Priority");
+
+            plugin.destroy();
+        });
+
+        it("re-announces an identical message by clearing the region first", () => {
+            const plugin = createPlugin(manager, {
+                announcements: { dragend: () => "Dropped" },
+            });
+
+            manager.dispatch("dragend", { operation: { source: { id: "favourites" } } });
+            expect(getAssertiveRegion()?.textContent).toBe("Dropped");
+
+            // The same text set twice must still end up in the region (clear-then-set forces a change).
+            manager.dispatch("dragend", { operation: { source: { id: "favourites" } } });
+            expect(getAssertiveRegion()?.textContent).toBe("Dropped");
+
+            plugin.destroy();
+        });
+
+        it("does not announce when the getter returns undefined", () => {
+            const plugin = createPlugin(manager, {
+                announcements: { dragend: () => undefined },
+            });
+
+            manager.dispatch("dragend", { operation: { source: { id: "favourites" } } });
+
+            // Both live regions stay empty.
+            expect(getLiveRegion()?.textContent).toBe("");
+            expect(getAssertiveRegion()?.textContent).toBe("");
+
+            plugin.destroy();
+        });
+    });
+
+    describe("destroy", () => {
+        it("removes the live region from the document", () => {
+            const plugin = createPlugin(manager);
+            expect(getLiveRegion()).not.toBeNull();
+
+            plugin.destroy();
+
+            expect(getLiveRegion()).toBeNull();
+        });
+
+        it("removes the assertive live region from the document", () => {
+            const plugin = createPlugin(manager);
+            expect(getAssertiveRegion()).not.toBeNull();
+
+            plugin.destroy();
+
+            expect(getAssertiveRegion()).toBeNull();
+        });
+
+        it("removes the instructions element from the document", () => {
+            const plugin = createPlugin(manager, { instructions: "Press Space to drag" });
+            expect(getInstructions()).not.toBeNull();
+
+            plugin.destroy();
+
+            expect(getInstructions()).toBeNull();
+        });
+
+        it("calls the unsubscribe functions returned by monitor.addEventListener", () => {
+            // Capture the unsubscribe function spy that the mock returns.
+            let unsubscribeSpy: ReturnType<typeof vi.fn> | undefined;
+            manager.monitor.addEventListener.mockImplementation((_eventName: string, _handler: EventHandler) => {
+                unsubscribeSpy = vi.fn();
+                return unsubscribeSpy as unknown as ReturnType<typeof vi.fn<() => void>>;
+            });
+
+            const plugin = createPlugin(manager, {
+                announcements: { dragstart: () => "Dragging" },
+            });
+
+            plugin.destroy();
+
+            expect(unsubscribeSpy).toHaveBeenCalled();
+        });
+    });
+
+    describe("useRoomListAccessibilityPlugin announcements", () => {
+        const SECTION_TITLES: Record<string, string> = {
+            work: "Work",
+            fun: "Fun",
+        };
+        const ROOM_NAMES: Record<string, string> = {
+            "!room:server": "My Room",
+        };
+
+        function createMockVm(): RoomListViewModel {
+            return {
+                getSectionHeaderViewModel: (id: string) => ({
+                    getSnapshot: () => ({ title: SECTION_TITLES[id] ?? id }),
+                }),
+                getRoomItemViewModel: (id: string) => ({
+                    getSnapshot: () => ({ name: ROOM_NAMES[id] }),
+                }),
+            } as unknown as RoomListViewModel;
+        }
+
+        /** Render the hook and return the announcement getters it configures on the plugin. */
+        function getAnnouncements(
+            vm: RoomListViewModel,
+        ): Partial<Record<"dragstart" | "dragover" | "dragend", DragAnnouncementGetter>> {
+            const wrapper = ({ children }: { children: React.ReactNode }): React.ReactNode =>
+                React.createElement(I18nContext.Provider, { value: new I18nApi() }, children);
+            const { result } = renderHook(() => useRoomListAccessibilityPlugin(vm), { wrapper });
+
+            const descriptor = result.current([]).find(
+                (
+                    plugin,
+                ): plugin is {
+                    plugin: typeof RoomListAccessibilityPlugin;
+                    options: RoomListAccessibilityOptions;
+                } => typeof plugin === "object" && plugin.plugin === RoomListAccessibilityPlugin,
+            );
+            return descriptor!.options.announcements!;
+        }
+
+        const sectionSource = (id: string, index: number): A11yData["operation"]["source"] =>
+            ({ id, data: { type: "section", index } }) as A11yData["operation"]["source"];
+        const sectionTarget = (id: string, index: number): A11yData["operation"]["target"] =>
+            ({ id, data: { type: "section", index } }) as A11yData["operation"]["target"];
+
+        it("announces a section will return to its original position when dragged over a non-droppable area", () => {
+            const { dragover } = getAnnouncements(createMockVm());
+            const message = dragover!({
+                operation: { source: sectionSource("work", 1), target: null },
+                canceled: false,
+            });
+            expect(message).toBe("Work will return to its original position");
+        });
+
+        it("announces a section returned to its original position when dropped on a non-droppable area", () => {
+            const { dragend } = getAnnouncements(createMockVm());
+            const message = dragend!({
+                operation: { source: sectionSource("work", 1), target: null },
+                canceled: false,
+            });
+            expect(message).toBe("Work returned to its original position");
+        });
+
+        it("still announces the before/after target when a section is dragged over another section", () => {
+            const { dragover, dragend } = getAnnouncements(createMockVm());
+            // Source index 2 dropped onto target index 1 → dropped before the target.
+            const event: A11yData = {
+                operation: { source: sectionSource("fun", 2), target: sectionTarget("work", 1) },
+                canceled: false,
+            };
+            expect(dragover!(event)).toBe("Fun will be dropped before Work");
+            expect(dragend!(event)).toBe("Fun was dropped before Work");
+        });
+
+        it("announces cancellation even when there is no target", () => {
+            const { dragend } = getAnnouncements(createMockVm());
+            const message = dragend!({
+                operation: { source: sectionSource("work", 1), target: null },
+                canceled: true,
+            });
+            expect(message).toBe("Dragging cancelled");
+        });
+    });
+});
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListAccessibilityPlugin.ts b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListAccessibilityPlugin.ts
new file mode 100644
index 0000000000..8abc896786
--- /dev/null
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListAccessibilityPlugin.ts
@@ -0,0 +1,276 @@
+/*
+ * Copyright 2026 Element Creations 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 { useCallback, useMemo } from "react";
+import { configure, Plugin, type Plugins } from "@dnd-kit/abstract";
+import { Accessibility, type Draggable, type DragDropManager, type Droppable } from "@dnd-kit/dom";
+
+import { useI18n } from "../../core/i18n/i18nContext";
+import { isSectionDragData, type RoomListDragData } from "./dragAndDrop";
+import type { RoomListViewModel } from "../RoomListView";
+
+type Manager = DragDropManager;
+
+/** Shape of the dnd-kit monitor event passed to the announcement getters. */
+export type A11yData = {
+    operation: {
+        source: Draggable<RoomListDragData> | null;
+        target: Droppable<RoomListDragData> | null;
+    };
+    canceled: boolean;
+};
+
+/**
+ * Produces the screen-reader announcement for a drag lifecycle event, or `undefined`
+ * to stay silent. The event exposes `operation.source`, `operation.target` and (on
+ * `dragend`) `canceled`.
+ */
+export type DragAnnouncementGetter = (event: A11yData) => string | undefined;
+
+/**
+ * Options for {@link RoomListAccessibilityPlugin}.
+ *
+ * All fields are optional so the options type stays assignable to dnd-kit's generic
+ * `PluginOptions`.
+ */
+export interface RoomListAccessibilityOptions {
+    /** Announcement to emit for each drag lifecycle event. */
+    announcements?: Partial<Record<"dragstart" | "dragover" | "dragend", DragAnnouncementGetter>>;
+    /**
+     * Keyboard drag instructions read out when a draggable receives focus, wired to each
+     * draggable via `aria-describedby`.
+     */
+    instructions?: string;
+}
+
+/**
+ * Create the visually-hidden `aria-live` region used to announce drag progress.
+ *
+ * @param politeness - `"polite"` for progress (start/over) updates, `"assertive"` for the terminal
+ *   drop/cancel confirmation so it interrupts any pending progress chatter and is announced reliably.
+ */
+function createLiveRegion(id: string, politeness: "polite" | "assertive" = "polite"): HTMLDivElement {
+    const element = document.createElement("div");
+    element.id = id;
+    element.setAttribute("role", politeness === "assertive" ? "alert" : "status");
+    element.setAttribute("aria-live", politeness);
+    element.setAttribute("aria-atomic", "true");
+    Object.assign(element.style, {
+        position: "fixed",
+        width: "1px",
+        height: "1px",
+        margin: "-1px",
+        border: "0",
+        padding: "0",
+        overflow: "hidden",
+        clip: "rect(0 0 0 0)",
+        clipPath: "inset(100%)",
+        whiteSpace: "nowrap",
+    });
+    return element;
+}
+
+/**
+ * Create the hidden element holding the keyboard drag instructions. Only referenced via
+ * `aria-describedby` (never announced), so `display: none` is enough to hide it.
+ */
+function createInstructions(id: string, text: string): HTMLDivElement {
+    const element = document.createElement("div");
+    element.id = id;
+    element.style.display = "none";
+    element.textContent = text;
+    return element;
+}
+
+/**
+ * A dnd-kit plugin that manages the room list's drag-and-drop accessibility:
+ * - announces drag progress to screen readers via an `aria-live` region, and
+ * - exposes the keyboard drag instructions, wiring them to every draggable through
+ *   `aria-describedby`.
+ *
+ * This is a deliberately reduced replacement for dnd-kit's built-in `Accessibility`
+ * plugin. The built-in plugin also reflects `aria-pressed`/`aria-grabbed` onto the
+ * draggable `<button>`, which VoiceOver reads as "selected" the instant a keyboard drag
+ * starts. We filter the built-in plugin out (see VirtualizedRoomListView) and use this
+ * instead: it never mutates the draggable's pressed/grabbed ARIA state.
+ */
+export class RoomListAccessibilityPlugin extends Plugin<Manager, RoomListAccessibilityOptions> {
+    private liveRegion: HTMLDivElement;
+    private assertiveRegion: HTMLDivElement;
+    private instructions?: HTMLDivElement;
+    private readonly unsubscribers: Array<() => void> = [];
+
+    public constructor(manager: Manager, options?: RoomListAccessibilityOptions) {
+        super(manager, options);
+
+        const liveRegionId = crypto.randomUUID();
+        const assertiveRegionId = crypto.randomUUID();
+        const instructionsId = crypto.randomUUID();
+
+        // Create the live regions up front so they exist in the DOM before any text change,
+        // which assistive technologies require to reliably announce the first message.
+        this.liveRegion = createLiveRegion(liveRegionId);
+        this.assertiveRegion = createLiveRegion(assertiveRegionId, "assertive");
+        document.body.append(this.liveRegion, this.assertiveRegion);
+
+        const announcements = options?.announcements ?? {};
+        for (const [eventName, getAnnouncement] of Object.entries(announcements)) {
+            if (!getAnnouncement) continue;
+            let unsubscribe: () => void;
+            if (eventName === "dragend") {
+                unsubscribe = manager.monitor.addEventListener("dragend", (event) => {
+                    const a11yEvent = event as unknown as A11yData;
+                    const message = getAnnouncement(a11yEvent);
+                    // On drop the source element stays focused (focus never actually moves), so we need to announce the drop confirmation in the assertive region to ensure it is read.
+                    this.announceAssertive(message);
+                });
+            } else {
+                unsubscribe = manager.monitor.addEventListener(eventName as "dragstart", (event) => {
+                    this.announce(getAnnouncement(event as unknown as A11yData));
+                });
+            }
+            this.unsubscribers.push(unsubscribe);
+        }
+
+        if (options?.instructions) {
+            this.instructions = createInstructions(instructionsId, options.instructions);
+            document.body.append(this.instructions);
+
+            // Point every draggable at the instructions via aria-describedby. The effect re-runs
+            // as draggables register/unregister (the list is virtualized), so newly mounted items
+            // get described too. We never touch aria-pressed/aria-grabbed here.
+            this.registerEffect(() => {
+                if (!this.instructions) return;
+                for (const draggable of this.manager.registry.draggables.value) {
+                    const activator = draggable.handle ?? draggable.element;
+                    if (activator && !activator.hasAttribute("aria-describedby")) {
+                        activator.setAttribute("aria-describedby", instructionsId);
+                    }
+                }
+            });
+        }
+    }
+
+    private announce(message: string | undefined): void {
+        if (!message || this.liveRegion.textContent === message) return;
+        this.liveRegion.textContent = message;
+    }
+
+    /**
+     * Announce a terminal message (drop confirmation / cancellation) in the assertive live region.
+     *
+     * Unlike the polite progress region, the drop happens with focus parked on the source element
+     * and no focus change to trigger a re-read, so an assertive region is required for Chrome to
+     * announce it. It also interrupts any still-pending "… will be dropped …" progress chatter.
+     */
+    private announceAssertive(message: string | undefined): void {
+        if (!message) return;
+        // Always re-set (clearing first) so an identical message still re-announces, and so the
+        // assertive region reliably fires even right after a polite progress update.
+        this.assertiveRegion.textContent = "";
+        this.assertiveRegion.textContent = message;
+    }
+
+    public destroy(): void {
+        super.destroy();
+        for (const unsubscribe of this.unsubscribers) unsubscribe();
+        this.unsubscribers.length = 0;
+        this.liveRegion.remove();
+        this.assertiveRegion.remove();
+        this.instructions?.remove();
+    }
+}
+
+/**
+ * Configures {@link RoomListAccessibilityPlugin} for the room list and returns a `plugins`
+ * callback for `DragDropProvider`.
+ *
+ * It swaps dnd-kit's built-in Accessibility plugin (which adds the `aria-pressed` that
+ * VoiceOver reads as "selected") for {@link RoomListAccessibilityPlugin}, supplying it with
+ * localized announcements derived from the room list view model. The result is memoized so
+ * the plugin descriptor stays stable across renders and the plugin isn't torn down and
+ * recreated.
+ */
+export function useRoomListAccessibilityPlugin(
+    vm: RoomListViewModel,
+): (defaults: Plugins<Manager>) => Plugins<Manager> {
+    const { translate: _t } = useI18n();
+
+    // Get the display name of a draggable source: the section title for a section, or the
+    // room name for a room. Returns undefined if the source can't be resolved.
+    const getDragSourceName = useCallback(
+        (source: Draggable<RoomListDragData>): string | undefined => {
+            if (isSectionDragData(source.data)) {
+                return vm.getSectionHeaderViewModel(source.id as string).getSnapshot().title;
+            }
+            return vm.getRoomItemViewModel(source.id as string)?.getSnapshot().name;
+        },
+        [vm],
+    );
+
+    const announcements = useMemo(
+        () => ({
+            dragstart: ({ operation: { source } }: A11yData) => {
+                if (!source) return;
+                const sourceName = getDragSourceName(source);
+                if (sourceName === undefined) return;
+                return _t("room_list|a11y|drag_start", { source: sourceName });
+            },
+            dragover: ({ operation: { source, target } }: A11yData) => {
+                if (!source) return;
+                const sourceName = getDragSourceName(source);
+                if (sourceName === undefined) return;
+                // A section dragged over a non-droppable area (favourites/low-priority or its own original slot) has no target and snaps back to where it started.
+                if (isSectionDragData(source.data) && !target) {
+                    return _t("room_list|a11y|drag_over_original", { source: sourceName });
+                }
+                if (!target) return;
+                const targetTitle = vm.getSectionHeaderViewModel(target.id as string).getSnapshot().title;
+                if (isSectionDragData(source.data) && isSectionDragData(target.data)) {
+                    const droppedBefore = source.data.index > target.data.index;
+
+                    return droppedBefore
+                        ? _t("room_list|a11y|drag_over_before", { source: sourceName, target: targetTitle })
+                        : _t("room_list|a11y|drag_over_after", { source: sourceName, target: targetTitle });
+                }
+                return _t("room_list|a11y|drag_over", { source: sourceName, target: targetTitle });
+            },
+            dragend: ({ operation: { source, target }, canceled }: A11yData) => {
+                if (!source) return;
+                if (canceled) return _t("room_list|a11y|drag_cancelled");
+                const sourceName = getDragSourceName(source);
+                if (sourceName === undefined) return;
+                // A section dragged over a non-droppable area (favourites/low-priority or its own original slot) has no target and snaps back to where it started.
+                if (isSectionDragData(source.data) && !target) {
+                    return _t("room_list|a11y|drag_end_original", { source: sourceName });
+                }
+
+                if (!target) return;
+                const targetTitle = vm.getSectionHeaderViewModel(target.id as string).getSnapshot().title;
+                if (isSectionDragData(source.data) && isSectionDragData(target.data)) {
+                    const droppedBefore = source.data.index > target.data.index;
+                    return droppedBefore
+                        ? _t("room_list|a11y|drag_end_before", { source: sourceName, target: targetTitle })
+                        : _t("room_list|a11y|drag_end_after", { source: sourceName, target: targetTitle });
+                }
+                return _t("room_list|a11y|drag_end", { source: sourceName, target: targetTitle });
+            },
+        }),
+        [vm, _t, getDragSourceName],
+    );
+
+    const instructions = _t("room_list|a11y|drag_instructions");
+
+    return useCallback(
+        (defaults) => [
+            // remove the built-in Accessibility plugin
+            ...defaults.filter((plugin) => plugin !== Accessibility),
+            configure(RoomListAccessibilityPlugin, { announcements, instructions }),
+        ],
+        [announcements, instructions],
+    );
+}
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.tsx
deleted file mode 100644
index 5158c70997..0000000000
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
- * Copyright 2026 Element Creations 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, { memo, type JSX } from "react";
-
-import { RoomListItemView, type RoomListItemViewProps } from "./RoomListItemView";
-import { getItemAccessibleProps } from "../../../core/VirtualizedList";
-
-export interface RoomListItemAccessibilityWrapperPros extends RoomListItemViewProps {
-    /** Index of this room in the list */
-    roomIndex: number;
-    /** Index of this room in its section */
-    roomIndexInSection: number;
-    /** Total number of rooms in the list */
-    roomCount: number;
-    /** Whether the room list is displayed as a flat list */
-    isInFlatList: boolean;
-}
-
-/**
- * Wrapper around RoomListItemView that adds accessibility props based on the room's position in the list and whether the list is flat or grouped.
- * In a flat list, each item gets listbox item props. In a grouped list, each item gets treegrid cell props.
- *
- * @example
- * ``
- * <RoomListItemAccessibilityWrapper
- *   roomIndex={0}
- *   roomIndexInSection={0}
- *   roomCount={10}
- *   isInFlatList={true}
- *   {...otherRoomListItemViewProps}
- * />
- * ```
- */
-export const RoomListItemAccessibilityWrapper = memo(function RoomListItemAccessibilityWrapper({
-    roomIndex,
-    roomCount,
-    roomIndexInSection,
-    isInFlatList,
-    ...rest
-}: RoomListItemAccessibilityWrapperPros): JSX.Element {
-    const itemA11yProps = isInFlatList ? getItemAccessibleProps("listbox", roomIndex, roomCount) : { role: "gridcell" };
-    const item = <RoomListItemView {...rest} {...itemA11yProps} />;
-
-    if (isInFlatList) return item;
-    return <div {...getItemAccessibleProps("treegrid", roomIndex, roomIndexInSection)}>{item}</div>;
-});
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemDragOverlayView/RoomListItemDragOverlayView.module.css b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemDragOverlayView/RoomListItemDragOverlayView.module.css
new file mode 100644
index 0000000000..fec3b1f608
--- /dev/null
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemDragOverlayView/RoomListItemDragOverlayView.module.css
@@ -0,0 +1,11 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+.dragOverlay {
+    --padding-top: 0px;
+    --padding-bottom: 0px;
+}
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemDragOverlayView/RoomListItemDragOverlayView.stories.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemDragOverlayView/RoomListItemDragOverlayView.stories.tsx
new file mode 100644
index 0000000000..d84a7a6d42
--- /dev/null
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemDragOverlayView/RoomListItemDragOverlayView.stories.tsx
@@ -0,0 +1,83 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+    type Room,
+    type RoomListItemViewActions,
+    type RoomListItemViewSnapshot,
+} from "../RoomListItemWrapper/RoomListItemView";
+import { RoomListItemDragOverlayView } from "./RoomListItemDragOverlayView";
+import { useMockedViewModel } from "../../../core/viewmodel";
+import { withViewDocs } from "../../../../.storybook/withViewDocs";
+import { defaultSnapshot } from "../RoomListItemWrapper/RoomListItemView/default-snapshot";
+import { mockedActions } from "../RoomListItemWrapper/RoomListItemView/mocked-actions";
+import { renderAvatar } from "../../story-mocks";
+
+type RoomListItemDragOverlayProps = RoomListItemViewSnapshot &
+    RoomListItemViewActions & {
+        renderAvatar: (room: Room) => React.ReactElement;
+    };
+
+const RoomListItemDragOverlayWrapperImpl = ({
+    onOpenRoom,
+    onMarkAsRead,
+    onMarkAsUnread,
+    onToggleFavorite,
+    onToggleLowPriority,
+    onInvite,
+    onCopyRoomLink,
+    onLeaveRoom,
+    onSetRoomNotifState,
+    onCreateSection,
+    onToggleSection,
+    onRemoveFromSection,
+    renderAvatar: renderAvatarProp,
+    ...rest
+}: RoomListItemDragOverlayProps): JSX.Element => {
+    const vm = useMockedViewModel(rest, {
+        onOpenRoom,
+        onMarkAsRead,
+        onMarkAsUnread,
+        onToggleFavorite,
+        onToggleLowPriority,
+        onInvite,
+        onCopyRoomLink,
+        onLeaveRoom,
+        onSetRoomNotifState,
+        onCreateSection,
+        onToggleSection,
+        onRemoveFromSection,
+    });
+    return <RoomListItemDragOverlayView vm={vm} renderAvatar={renderAvatarProp} />;
+};
+const RoomListItemDragOverlayWrapper = withViewDocs(RoomListItemDragOverlayWrapperImpl, RoomListItemDragOverlayView);
+
+const meta = {
+    title: "Room List/RoomListItemDragOverlayView",
+    component: RoomListItemDragOverlayWrapper,
+    tags: ["autodocs"],
+    decorators: [
+        (Story) => (
+            <div style={{ width: "320px", padding: "8px" }}>
+                <Story />
+            </div>
+        ),
+    ],
+    args: {
+        ...defaultSnapshot,
+        ...mockedActions,
+        renderAvatar,
+    },
+} satisfies Meta<typeof RoomListItemDragOverlayWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemDragOverlayView/RoomListItemDragOverlayView.test.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemDragOverlayView/RoomListItemDragOverlayView.test.tsx
new file mode 100644
index 0000000000..863fed8b13
--- /dev/null
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemDragOverlayView/RoomListItemDragOverlayView.test.tsx
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2026 Element Creations 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 { render, screen } from "@test-utils";
+import { composeStories } from "@storybook/react-vite";
+import { describe, it, expect } from "vitest";
+
+import * as stories from "./RoomListItemDragOverlayView.stories";
+import { defaultSnapshot } from "../RoomListItemWrapper/RoomListItemView/default-snapshot";
+
+const { Default } = composeStories(stories);
+
+describe("<RoomListItemDragOverlayView />", () => {
+    it("renders the room name from the view model", () => {
+        render(<Default />);
+        expect(screen.getByTestId("room-name")).toHaveTextContent(defaultSnapshot.name);
+    });
+});
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemDragOverlayView/RoomListItemDragOverlayView.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemDragOverlayView/RoomListItemDragOverlayView.tsx
new file mode 100644
index 0000000000..391aebb394
--- /dev/null
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemDragOverlayView/RoomListItemDragOverlayView.tsx
@@ -0,0 +1,50 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX, memo, type ReactNode } from "react";
+import classNames from "classnames";
+
+import { Flex } from "../../../core/utils/Flex";
+import { type Room, RoomListItemContent, type RoomListItemViewModel } from "../RoomListItemWrapper/RoomListItemView";
+import roomListItemStyles from "../RoomListItemWrapper/RoomListItemView/RoomListItemView.module.css";
+import styles from "./RoomListItemDragOverlayView.module.css";
+
+/**
+ * Props for {@link RoomListItemDragOverlayView}.
+ */
+export interface RoomListItemDragOverlayViewProps {
+    /** The room item view model — same one used by the real list item */
+    vm: RoomListItemViewModel;
+    /** Function to render the room avatar */
+    renderAvatar: (room: Room) => ReactNode;
+}
+
+/**
+ * Visual clone of a room list item rendered inside the dnd drag overlay.
+ *
+ * Reuses {@link RoomListItemContent} for the inner layout and adds the outer
+ * wrapper styles that the live list item normally provides (height, width,
+ * typography), so the floating clone matches a real item.
+ */
+export const RoomListItemDragOverlayView = memo(function RoomListItemDragOverlayView({
+    vm,
+    renderAvatar,
+}: RoomListItemDragOverlayViewProps): JSX.Element {
+    return (
+        // Purely a visual clone that follows the drag. Hide it from the accessibility tree so the
+        // dragged room isn't duplicated (the real, still-focused item already exposes it, and drag
+        // feedback is narrated via the dnd live-region announcements).
+        <Flex
+            aria-hidden={true}
+            className={classNames(roomListItemStyles.roomListItem, styles.dragOverlay)}
+            gap="var(--cpd-space-3x)"
+            align="stretch"
+        >
+            <RoomListItemContent vm={vm} renderAvatar={renderAvatar} isDragging={true} />
+        </Flex>
+    );
+});
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemDragOverlayView/index.ts b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemDragOverlayView/index.ts
new file mode 100644
index 0000000000..0e0b212f74
--- /dev/null
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemDragOverlayView/index.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+export { RoomListItemDragOverlayView } from "./RoomListItemDragOverlayView";
+export type { RoomListItemDragOverlayViewProps } from "./RoomListItemDragOverlayView";
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.stories.tsx
similarity index 100%
rename from packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.stories.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.stories.tsx
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.test.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.test.tsx
similarity index 100%
rename from packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.test.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.test.tsx
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.tsx
similarity index 100%
rename from packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/NotificationDecoration.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/NotificationDecoration.tsx
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemContent.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemContent.tsx
new file mode 100644
index 0000000000..86eb92da46
--- /dev/null
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemContent.tsx
@@ -0,0 +1,130 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX, memo, type ReactNode } from "react";
+import { Text, Tooltip } from "@vector-im/compound-web";
+import classNames from "classnames";
+
+import { Flex } from "../../../../core/utils/Flex";
+import { useViewModel } from "../../../../core/viewmodel";
+import { NotificationDecoration } from "./NotificationDecoration";
+import { RoomListItemHoverMenu } from "./RoomListItemHoverMenu";
+import { type Room, type RoomListItemViewModel } from "./RoomListItemView";
+import styles from "./RoomListItemView.module.css";
+
+/**
+ * Props for {@link RoomListItemContent}.
+ */
+export interface RoomListItemContentProps {
+    /** The room item view model */
+    vm: RoomListItemViewModel;
+    /** Function to render the room avatar */
+    renderAvatar: (room: Room) => ReactNode;
+    /** Whether the item is being dragged */
+    isDragging?: boolean;
+}
+
+/**
+ * The inner content of a room list item: avatar, room name, message preview,
+ * hover menu and notification decoration. Used both inside the full
+ * {@link RoomListItemView} and inside the drag overlay.
+ */
+
+// ThreadNet-Fork: Initialen als Avatar-Ersatz fuer Call-Teilnehmer ohne Bild.
+// Lag frueher in RoomListItemView.tsx - Upstream hat den Inhalt beim Umbau in
+// diese Komponente ausgelagert (v1.12.26), der Helfer zieht mit um.
+function getInitials(displayName: string): string {
+    return displayName
+        .trim()
+        .split(/\s+/)
+        .slice(0, 2)
+        .map((word) => word.charAt(0).toUpperCase())
+        .join("");
+}
+
+export const RoomListItemContent = memo(function RoomListItemContent({
+    vm,
+    renderAvatar,
+    isDragging = false,
+}: RoomListItemContentProps): JSX.Element {
+    const item = useViewModel(vm);
+
+    return (
+        <Flex
+            className={classNames(styles.container, {
+                [styles.dragging]: isDragging,
+            })}
+            gap="var(--cpd-space-3x)"
+            align="center"
+        >
+            {renderAvatar(item.room)}
+            <Flex className={styles.content} gap="var(--cpd-space-2x)" align="center" justify="space-between">
+                {/* We truncate the room name when too long. Title here is to show the full name on hover */}
+                <div className={styles.ellipsis}>
+                    <div className={styles.roomName} title={item.name} data-testid="room-name">
+                        {item.name}
+                        {item.userStatus && (
+                            <Tooltip description={item.userStatus.text}>
+                                <Text as="span" className={styles.userStatusEmoji}>
+                                    {item.userStatus.emoji}
+                                </Text>
+                            </Tooltip>
+                        )}
+                    </div>
+                    {item.callParticipants?.length ? (
+                        <ul className={styles.callParticipants} aria-label="Call participants">
+                            {item.callParticipants.map((participant) => (
+                                <li key={participant.userId} className={styles.callParticipant}>
+                                    <span className={styles.callParticipantAvatar}>
+                                        {participant.avatarUrl ? (
+                                            <img src={participant.avatarUrl} alt="" />
+                                        ) : (
+                                            <span>{getInitials(participant.displayName)}</span>
+                                        )}
+                                    </span>
+                                    <Text as="span" size="xs" className={styles.callParticipantName} title={participant.displayName}>
+                                        {participant.displayName}
+                                    </Text>
+                                </li>
+                            ))}
+                        </ul>
+                    ) : item.messagePreview && (
+                        <Text as="div" size="sm" className={styles.ellipsis} title={item.messagePreview}>
+                            {item.messagePreview}
+                        </Text>
+                    )}
+                </div>
+                {(item.showMoreOptionsMenu || item.showNotificationMenu) && (
+                    <RoomListItemHoverMenu
+                        showMoreOptionsMenu={item.showMoreOptionsMenu}
+                        showNotificationMenu={item.showNotificationMenu}
+                        vm={vm}
+                    />
+                )}
+
+                    {item.messagePreview && (
+                        <Text as="div" size="sm" className={styles.ellipsis} title={item.messagePreview}>
+                            {item.messagePreview}
+                        </Text>
+                    )}
+                </div>
+                {!isDragging && (item.showMoreOptionsMenu || item.showNotificationMenu) && (
+                    <RoomListItemHoverMenu
+                        showMoreOptionsMenu={item.showMoreOptionsMenu}
+                        showNotificationMenu={item.showNotificationMenu}
+                        vm={vm}
+                    />
+                )}
+
+                {/* aria-hidden because we summarise the unread count/notification status in a11yLabel */}
+                <div className={styles.notificationDecoration} aria-hidden={true}>
+                    <NotificationDecoration {...item.notification} />
+                </div>
+            </Flex>
+        </Flex>
+    );
+});
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemContextMenu.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemContextMenu.tsx
similarity index 100%
rename from packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemContextMenu.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemContextMenu.tsx
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemHoverMenu.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemHoverMenu.tsx
similarity index 100%
rename from packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemHoverMenu.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemHoverMenu.tsx
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.module.css b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.module.css
new file mode 100644
index 0000000000..8956cab580
--- /dev/null
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.module.css
@@ -0,0 +1,14 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+.sectionLabel {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 200px;
+    color: var(--cpd-color-text-primary);
+}
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.test.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.test.tsx
similarity index 93%
rename from packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.test.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.test.tsx
index a6d657b2a5..0b641fb146 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.test.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.test.tsx
@@ -8,28 +8,15 @@
 import React, { type JSX } from "react";
 import { render, screen } from "@test-utils";
 import userEvent from "@testing-library/user-event";
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect } from "vitest";
 
 import { RoomListItemMoreOptionsMenu, MoreOptionContent } from "./RoomListItemMoreOptionsMenu";
 import { useMockedViewModel } from "../../../../core/viewmodel";
 import type { RoomListItemViewSnapshot } from "./RoomListItemView";
 import { defaultSnapshot } from "./default-snapshot";
+import { mockedActions as mockCallbacks } from "./mocked-actions";
 
 describe("<RoomListItemMoreOptionsMenu />", () => {
-    const mockCallbacks = {
-        onOpenRoom: vi.fn(),
-        onMarkAsRead: vi.fn(),
-        onMarkAsUnread: vi.fn(),
-        onToggleFavorite: vi.fn(),
-        onToggleLowPriority: vi.fn(),
-        onInvite: vi.fn(),
-        onCopyRoomLink: vi.fn(),
-        onLeaveRoom: vi.fn(),
-        onSetRoomNotifState: vi.fn(),
-        onCreateSection: vi.fn(),
-        onToggleSection: vi.fn(),
-    };
-
     const renderMenu = (overrides: Partial<RoomListItemViewSnapshot> = {}): ReturnType<typeof render> => {
         const TestComponent = (): JSX.Element => {
             const vm = useMockedViewModel(
@@ -242,6 +229,20 @@ describe("<RoomListItemMoreOptionsMenu />", () => {
         expect(mockCallbacks.onCreateSection).toHaveBeenCalled();
     });
 
+    it("should call onRemoveFromSection when Remove from section is clicked", async () => {
+        const user = userEvent.setup();
+        const TestComponent = (): JSX.Element => {
+            const vm = useMockedViewModel({ ...defaultSnapshot, isInSection: true }, mockCallbacks);
+            return <MoreOptionContent vm={vm} />;
+        };
+        render(<TestComponent />);
+
+        const removeFromSection = screen.getByRole("menuitem", { name: "Remove from section" });
+        await user.click(removeFromSection);
+
+        expect(mockCallbacks.onRemoveFromSection).toHaveBeenCalled();
+    });
+
     it("should render section items in move to section submenu", () => {
         const sections = [
             { tag: "m.favourite", name: "Favourites", isSelected: false },
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.tsx
similarity index 70%
rename from packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.tsx
index 00690a445b..bc286ce6e2 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemMoreOptionsMenu.tsx
@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { useState, type JSX } from "react";
+import React, { useMemo, useState, type JSX } from "react";
 import { IconButton, Menu, MenuItem, Separator, SubMenu, ToggleMenuItem } from "@vector-im/compound-web";
 import {
     MarkAsReadIcon,
@@ -18,11 +18,13 @@ import {
     OverflowHorizontalIcon,
     ArrowRightIcon,
     CheckIcon,
+    MinusIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import { _t } from "../../../../core/i18n/i18n";
 import { useViewModel, type ViewModel } from "../../../../core/viewmodel";
 import type { RoomListItemViewSnapshot, RoomListItemViewActions } from "./RoomListItemView";
+import styles from "./RoomListItemMoreOptionsMenu.module.css";
 
 /**
  * View model type for room list item
@@ -73,8 +75,9 @@ interface MoreOptionContentProps {
 
 export function MoreOptionContent({ vm }: MoreOptionContentProps): JSX.Element {
     const snapshot = useViewModel(vm);
+    const hasSections = snapshot.sections.length > 0;
+    const isInSection = useMemo(() => snapshot.sections.some((section) => section.isSelected), [snapshot.sections]);
     return (
-        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         <div onKeyDown={(e) => e.stopPropagation()}>
             {snapshot.canMarkAsRead && (
                 <MenuItem
@@ -127,33 +130,45 @@ export function MoreOptionContent({ vm }: MoreOptionContentProps): JSX.Element {
                     hideChevron={true}
                 />
             )}
-            {snapshot.canMoveToSection && (
-                <SubMenu
-                    trigger={
+            {snapshot.areSectionsEnabled && (
+                <>
+                    <SubMenu
+                        trigger={
+                            <MenuItem
+                                Icon={ArrowRightIcon}
+                                label={_t("room_list|more_options|move_to_section")}
+                                onSelect={null}
+                            />
+                        }
+                    >
+                        {snapshot.sections.map((section) => (
+                            <MenuItem
+                                key={section.tag}
+                                label={section.name}
+                                labelProps={{ className: styles.sectionLabel }}
+                                onSelect={() => vm.onToggleSection(section.tag)}
+                                onClick={(evt) => evt.stopPropagation()}
+                                hideChevron={true}
+                                aria-checked={section.isSelected}
+                            >
+                                {section.isSelected && (
+                                    <CheckIcon color="var(--cpd-color-icon-tertiary)" width="24px" height="24px" />
+                                )}
+                            </MenuItem>
+                        ))}
+                        {hasSections && <Separator />}
+                        <MenuItem label={_t("action|new_section")} onSelect={vm.onCreateSection} hideChevron={true} />
+                    </SubMenu>
+                    {isInSection && (
                         <MenuItem
-                            Icon={ArrowRightIcon}
-                            label={_t("room_list|more_options|move_to_section")}
-                            onSelect={null}
-                        />
-                    }
-                >
-                    {snapshot.sections.map((section) => (
-                        <MenuItem
-                            key={section.tag}
-                            label={section.name}
-                            onSelect={() => vm.onToggleSection(section.tag)}
+                            Icon={MinusIcon}
+                            label={_t("room_list|more_options|remove_from_section")}
+                            onSelect={vm.onRemoveFromSection}
                             onClick={(evt) => evt.stopPropagation()}
                             hideChevron={true}
-                            aria-checked={section.isSelected}
-                        >
-                            {section.isSelected && (
-                                <CheckIcon color="var(--cpd-color-icon-tertiary)" width="24px" height="24px" />
-                            )}
-                        </MenuItem>
-                    ))}
-                    <Separator />
-                    <MenuItem label={_t("action|new_section")} onSelect={vm.onCreateSection} hideChevron={true} />
-                </SubMenu>
+                        />
+                    )}
+                </>
             )}
             <Separator />
             <MenuItem
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemNotificationMenu.test.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemNotificationMenu.test.tsx
similarity index 93%
rename from packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemNotificationMenu.test.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemNotificationMenu.test.tsx
index f7fb857077..8aa389a1c0 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemNotificationMenu.test.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemNotificationMenu.test.tsx
@@ -8,29 +8,16 @@
 import React, { type JSX } from "react";
 import { render, screen } from "@test-utils";
 import userEvent from "@testing-library/user-event";
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect } from "vitest";
 
 import { RoomListItemNotificationMenu } from "./RoomListItemNotificationMenu";
 import { RoomNotifState } from "./RoomNotifs";
 import { useMockedViewModel } from "../../../../core/viewmodel";
 import type { RoomListItemViewSnapshot } from "./RoomListItemView";
 import { defaultSnapshot } from "./default-snapshot";
+import { mockedActions as mockCallbacks } from "./mocked-actions";
 
 describe("<RoomListItemNotificationMenu />", () => {
-    const mockCallbacks = {
-        onOpenRoom: vi.fn(),
-        onMarkAsRead: vi.fn(),
-        onMarkAsUnread: vi.fn(),
-        onToggleFavorite: vi.fn(),
-        onToggleLowPriority: vi.fn(),
-        onInvite: vi.fn(),
-        onCopyRoomLink: vi.fn(),
-        onLeaveRoom: vi.fn(),
-        onSetRoomNotifState: vi.fn(),
-        onCreateSection: vi.fn(),
-        onToggleSection: vi.fn(),
-    };
-
     const renderMenu = (roomNotifState: RoomNotifState = RoomNotifState.AllMessages): ReturnType<typeof render> => {
         const TestComponent = (): JSX.Element => {
             const vm = useMockedViewModel(
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemNotificationMenu.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemNotificationMenu.tsx
similarity index 98%
rename from packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemNotificationMenu.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemNotificationMenu.tsx
index 35aee35eaf..0225031c17 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemNotificationMenu.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemNotificationMenu.tsx
@@ -59,7 +59,6 @@ export function RoomListItemNotificationMenu({ vm }: RoomListItemNotificationMen
                 </IconButton>
             }
         >
-            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
             <div
                 // We don't want keyboard navigation events to bubble up to the ListView changing the focused item
                 onKeyDown={(e) => e.stopPropagation()}
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.module.css b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.module.css
similarity index 84%
rename from packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.module.css
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.module.css
index ca4f74408f..0118637248 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.module.css
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.module.css
@@ -36,7 +36,10 @@
 
 /* Show hover menu and background on hover/focus/menu-open states */
 .roomListItem:hover,
-.roomListItem:focus-visible,
+/* keyboardActive is toggled in JS for keyboard focus only (see RoomListItemView), and kept while
+   focus is on the hover-menu buttons so they stay reachable by Tab — without revealing the menu on
+   mouse-focused or selected rows the way :focus-within would */
+.roomListItem.keyboardActive,
 /* When the context menu is opened */
 .roomListItem[data-state="open"],
 /* When the options and notifications menu are opened */
@@ -70,6 +73,16 @@
     min-width: 0;
 }
 
+.dragging {
+    outline: 1px solid var(--cpd-color-border-interactive-hovered);
+    background-color: color-mix(in srgb, var(--cpd-color-bg-action-tertiary-hovered) 95%, transparent);
+    color: var(--cpd-color-text-primary);
+}
+
+.dragSource .container {
+    opacity: 0.6;
+}
+
 .content {
     flex: 1;
     min-width: 0;
@@ -86,6 +99,13 @@
     text-overflow: ellipsis;
 }
 
+.roomName {
+    /* Allow the room name to shrink and truncate when displayed next to the user status emoji */
+    min-width: 0;
+}
+
+.userStatusEmoji {
+    padding-left: var(--cpd-space-1-5x);
 .callParticipants {
     display: flex;
     flex-direction: column;
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx
similarity index 94%
rename from packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx
index 21bf2806d2..129df0a710 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.stories.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.stories.tsx
@@ -9,8 +9,12 @@ import React, { type JSX, useEffect } from "react";
 import { fn } from "storybook/test";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import type { Room } from "./RoomListItemView";
-import { RoomListItemView, type RoomListItemViewSnapshot, type RoomListItemViewActions } from "./RoomListItemView";
+import {
+    type Room,
+    RoomListItemView,
+    type RoomListItemViewSnapshot,
+    type RoomListItemViewActions,
+} from "./RoomListItemView";
 import { useMockedViewModel } from "../../../../core/viewmodel";
 import { withViewDocs } from "../../../../../.storybook/withViewDocs";
 import { defaultSnapshot } from "./default-snapshot";
@@ -40,6 +44,7 @@ const RoomListItemWrapperImpl = ({
     onSetRoomNotifState,
     onCreateSection,
     onToggleSection,
+    onRemoveFromSection,
     isSelected,
     isFocused,
     onFocus,
@@ -60,6 +65,7 @@ const RoomListItemWrapperImpl = ({
         onSetRoomNotifState,
         onCreateSection,
         onToggleSection,
+        onRemoveFromSection,
     });
     return (
         <RoomListItemView
@@ -306,3 +312,18 @@ export const LastItem: Story = {
         isSelected: true,
     },
 };
+
+export const SectionDisabled: Story = {
+    args: {
+        areSectionsEnabled: false,
+    },
+};
+
+export const WithUserStatus: Story = {
+    args: {
+        userStatus: {
+            emoji: "🌭",
+            text: "Hot",
+        },
+    },
+};
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.test.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.test.tsx
similarity index 84%
rename from packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.test.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.test.tsx
index 646e114de3..db239a9c4c 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.test.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.test.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from "react";
-import { render, screen } from "@test-utils";
+import { render, screen, waitFor } from "@test-utils";
 import userEvent from "@testing-library/user-event";
 import { composeStories } from "@storybook/react-vite";
 import { describe, it, expect } from "vitest";
@@ -132,4 +132,19 @@ describe("<RoomListItemView />", () => {
         const { container } = render(<WithoutHoverMenu />);
         expect(container.querySelector('[aria-label="More Options"]')).toBeNull();
     });
+
+    it("reveals the hover menu on keyboard focus and clears it when focus leaves", async () => {
+        // isFocused focuses the row via the keyboard on mount, so the hover menu is revealed.
+        const { container } = render(<WithHoverMenu isFocused={true} />);
+        const option = screen.getByRole("option");
+        const moreButton = container.querySelector('[aria-label="More Options"]');
+
+        expect(option.className).toMatch(/keyboardActive/);
+        expect(moreButton).toBeVisible();
+
+        // Focus leaving the row hides the menu again.
+        option.blur();
+        await waitFor(() => expect(option.className).not.toMatch(/keyboardActive/));
+        expect(moreButton).not.toBeVisible();
+    });
 });
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.tsx
similarity index 67%
rename from packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.tsx
index 47e77b87e5..277f280647 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomListItemView.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomListItemView.tsx
@@ -5,17 +5,18 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { type JSX, memo, useEffect, useRef, type ReactNode } from "react";
+import React, { type JSX, memo, useEffect, useRef, useState, type ReactNode, type Ref } from "react";
 import classNames from "classnames";
-import { Text } from "@vector-im/compound-web";
+import { useMergeRefs } from "react-merge-refs";
 
 import { Flex } from "../../../../core/utils/Flex";
-import { NotificationDecoration, type NotificationDecorationData } from "./NotificationDecoration";
-import { RoomListItemHoverMenu } from "./RoomListItemHoverMenu";
+import { type NotificationDecorationData } from "./NotificationDecoration";
 import { RoomListItemContextMenu } from "./RoomListItemContextMenu";
+import { RoomListItemContent } from "./RoomListItemContent";
 import { type RoomNotifState } from "./RoomNotifs";
 import styles from "./RoomListItemView.module.css";
 import { useViewModel, type ViewModel } from "../../../../core/viewmodel";
+import { type UserStatus } from "../../../../core/userStatus";
 import { _t } from "../../../../core/i18n/i18n";
 
 /**
@@ -83,6 +84,8 @@ export interface RoomListItemViewSnapshot {
     messagePreview?: string;
     /** Optional call participants currently in the room's live call. */
     callParticipants?: CallParticipant[];
+    /** The MSC4426 user status of the other user in a DM room, if any */
+    userStatus?: UserStatus;
     /** Notification decoration data */
     notification: NotificationDecorationData;
     /** Whether the more options menu should be shown */
@@ -103,10 +106,10 @@ export interface RoomListItemViewSnapshot {
     canMarkAsUnread: boolean;
     /** The room's notification state */
     roomNotifState: RoomNotifState;
-    /** Whether the room can be moved to a section */
-    canMoveToSection: boolean;
     /** Available sections the room can be assigned to */
     sections: Section[];
+    /** Whether sections are enabled in the room list */
+    areSectionsEnabled: boolean;
 }
 
 /**
@@ -136,6 +139,8 @@ export interface RoomListItemViewActions {
     onCreateSection: () => void;
     /** Called when toggling a room's membership in a section */
     onToggleSection: (tag: string) => void;
+    /** Called when removing the room from a section */
+    onRemoveFromSection: () => void;
 }
 
 /**
@@ -161,6 +166,9 @@ export interface RoomListItemViewProps extends Omit<React.HTMLAttributes<HTMLBut
     isLastItem: boolean;
     /** Function to render the room avatar */
     renderAvatar: (room: Room) => ReactNode;
+    /** Whether this item is the source of an active drag operation */
+    isDragSource?: boolean;
+    ref?: Ref<Element>;
 }
 
 /**
@@ -184,17 +192,46 @@ export const RoomListItemView = memo(function RoomListItemView({
     isFirstItem,
     isLastItem,
     renderAvatar,
+    isDragSource = false,
+    ref,
     ...props
 }: RoomListItemViewProps): JSX.Element {
-    const ref = useRef<HTMLButtonElement>(null);
+    const internalRef = useRef<HTMLButtonElement>(null);
+    const mergedRef = useMergeRefs([ref, internalRef]);
     const item = useViewModel(vm);
 
+    // Reveal the hover menu when the row is focused via the keyboard (not the mouse), and keep it
+    // revealed while focus moves onto the menu buttons so they stay reachable by Tab. A pure CSS
+    // :focus-visible rule can't do the latter: it drops the instant focus leaves the row for a child,
+    // hiding the menu mid-Tab and dropping focus to <body>. A :focus-within rule reveals it for mouse
+    // focus too, which clutters selected/clicked rows. So we mark keyboard focus in JS (using the
+    // browser's own :focus-visible determination) and keep it set until focus leaves the row entirely.
+    const [keyboardActive, setKeyboardActive] = useState(false);
+
     useEffect(() => {
         if (isFocused) {
-            ref.current?.focus({ preventScroll: true, focusVisible: true } as FocusOptions);
+            internalRef.current?.focus({ preventScroll: true });
         }
     }, [isFocused]);
 
+    const onItemFocus = (e: React.FocusEvent<HTMLButtonElement>): void => {
+        onFocus(item.id, e);
+        // Only when focus enters the row from outside via the keyboard.
+        if (!e.currentTarget.contains(e.relatedTarget) && e.currentTarget.matches(":focus-visible")) {
+            setKeyboardActive(true);
+        }
+    };
+
+    const onItemBlur = (e: React.FocusEvent<HTMLButtonElement>): void => {
+        // Keep it revealed while focus is on a child menu button, and while one of the menus is open
+        // (focus is then in the portaled popover, outside the row). The latter means that when the
+        // menu closes with Escape, the trigger is still revealed, so the popover's own focus
+        // restoration lands on it instead of dropping to <body>. Clear once focus leaves for good.
+        if (!e.currentTarget.contains(e.relatedTarget) && !e.currentTarget.querySelector('[data-state="open"]')) {
+            setKeyboardActive(false);
+        }
+    };
+
     // Generate a11y label from notification state and room name
     const a11yLabel = getA11yLabel(item.name, item.notification);
 
@@ -202,69 +239,28 @@ export const RoomListItemView = memo(function RoomListItemView({
         <RoomListItemContextMenu vm={vm}>
             <Flex
                 as="button"
-                ref={ref}
+                ref={mergedRef}
                 className={classNames(styles.roomListItem, "mx_RoomListItemView", {
+                    [styles.keyboardActive]: keyboardActive,
                     [styles.selected]: isSelected,
                     [styles.bold]: item.isBold,
                     [styles.firstItem]: isFirstItem,
                     [styles.lastItem]: isLastItem,
+                    [styles.dragSource]: isDragSource,
                     mx_RoomListItemView_selected: isSelected,
                 })}
                 gap="var(--cpd-space-3x)"
                 align="stretch"
                 type="button"
-                aria-selected={isSelected}
                 aria-label={a11yLabel}
                 onClick={vm.onOpenRoom}
-                onFocus={(e: React.FocusEvent<HTMLButtonElement>) => onFocus(item.id, e)}
+                onFocus={onItemFocus}
+                onBlur={onItemBlur}
                 tabIndex={isFocused ? 0 : -1}
+                aria-selected={props.role === "option" ? isSelected : undefined}
                 {...props}
             >
-                <Flex className={styles.container} gap="var(--cpd-space-3x)" align="center">
-                    {renderAvatar(item.room)}
-                    <Flex className={styles.content} gap="var(--cpd-space-2x)" align="center" justify="space-between">
-                        {/* We truncate the room name when too long. Title here is to show the full name on hover */}
-                        <div className={styles.ellipsis}>
-                            <div className={styles.roomName} title={item.name} data-testid="room-name">
-                                {item.name}
-                            </div>
-                            {item.callParticipants?.length ? (
-                                <ul className={styles.callParticipants} aria-label="Call participants">
-                                    {item.callParticipants.map((participant) => (
-                                        <li key={participant.userId} className={styles.callParticipant}>
-                                            <span className={styles.callParticipantAvatar}>
-                                                {participant.avatarUrl ? (
-                                                    <img src={participant.avatarUrl} alt="" />
-                                                ) : (
-                                                    <span>{getInitials(participant.displayName)}</span>
-                                                )}
-                                            </span>
-                                            <Text as="span" size="xs" className={styles.callParticipantName} title={participant.displayName}>
-                                                {participant.displayName}
-                                            </Text>
-                                        </li>
-                                    ))}
-                                </ul>
-                            ) : item.messagePreview && (
-                                <Text as="div" size="sm" className={styles.ellipsis} title={item.messagePreview}>
-                                    {item.messagePreview}
-                                </Text>
-                            )}
-                        </div>
-                        {(item.showMoreOptionsMenu || item.showNotificationMenu) && (
-                            <RoomListItemHoverMenu
-                                showMoreOptionsMenu={item.showMoreOptionsMenu}
-                                showNotificationMenu={item.showNotificationMenu}
-                                vm={vm}
-                            />
-                        )}
-
-                        {/* aria-hidden because we summarise the unread count/notification status in a11yLabel */}
-                        <div className={styles.notificationDecoration} aria-hidden={true}>
-                            <NotificationDecoration {...item.notification} />
-                        </div>
-                    </Flex>
-                </Flex>
+                <RoomListItemContent vm={vm} renderAvatar={renderAvatar} />
             </Flex>
         </RoomListItemContextMenu>
     );
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomNotifs.ts b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomNotifs.ts
similarity index 100%
rename from packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/RoomNotifs.ts
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/RoomNotifs.ts
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/__snapshots__/NotificationDecoration.test.tsx.snap b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/__snapshots__/NotificationDecoration.test.tsx.snap
similarity index 100%
rename from packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/__snapshots__/NotificationDecoration.test.tsx.snap
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/__snapshots__/NotificationDecoration.test.tsx.snap
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap
similarity index 96%
rename from packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap
index f2a160fb7e..353ce9c7c4 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/__snapshots__/RoomListItemView.test.tsx.snap
@@ -59,11 +59,11 @@ exports[`<RoomListItemView /> > renders Bold story 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="More Options"
-              aria-labelledby="_r_12_"
+              aria-labelledby="react-use-id-1"
               class="_icon-button_1215g_8"
               data-kind="primary"
               data-state="closed"
-              id="radix-_r_10_"
+              id="radix-react-use-id-2"
               role="button"
               style="--cpd-icon-button-size: 24px; padding: 2px;"
               tabindex="0"
@@ -91,11 +91,11 @@ exports[`<RoomListItemView /> > renders Bold story 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="Notification options"
-              aria-labelledby="_r_19_"
+              aria-labelledby="react-use-id-3"
               class="_icon-button_1215g_8"
               data-kind="primary"
               data-state="closed"
-              id="radix-_r_17_"
+              id="radix-react-use-id-4"
               role="button"
               style="--cpd-icon-button-size: 24px; padding: 2px;"
               tabindex="0"
@@ -189,11 +189,11 @@ exports[`<RoomListItemView /> > renders Default story 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="More Options"
-              aria-labelledby="_r_2_"
+              aria-labelledby="react-use-id-1"
               class="_icon-button_1215g_8"
               data-kind="primary"
               data-state="closed"
-              id="radix-_r_0_"
+              id="radix-react-use-id-2"
               role="button"
               style="--cpd-icon-button-size: 24px; padding: 2px;"
               tabindex="0"
@@ -221,11 +221,11 @@ exports[`<RoomListItemView /> > renders Default story 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="Notification options"
-              aria-labelledby="_r_9_"
+              aria-labelledby="react-use-id-3"
               class="_icon-button_1215g_8"
               data-kind="primary"
               data-state="closed"
-              id="radix-_r_7_"
+              id="radix-react-use-id-4"
               role="button"
               style="--cpd-icon-button-size: 24px; padding: 2px;"
               tabindex="0"
@@ -319,11 +319,11 @@ exports[`<RoomListItemView /> > renders Invitation story 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="More Options"
-              aria-labelledby="_r_3i_"
+              aria-labelledby="react-use-id-1"
               class="_icon-button_1215g_8"
               data-kind="primary"
               data-state="closed"
-              id="radix-_r_3g_"
+              id="radix-react-use-id-2"
               role="button"
               style="--cpd-icon-button-size: 24px; padding: 2px;"
               tabindex="0"
@@ -351,11 +351,11 @@ exports[`<RoomListItemView /> > renders Invitation story 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="Notification options"
-              aria-labelledby="_r_3p_"
+              aria-labelledby="react-use-id-3"
               class="_icon-button_1215g_8"
               data-kind="primary"
               data-state="closed"
-              id="radix-_r_3n_"
+              id="radix-react-use-id-4"
               role="button"
               style="--cpd-icon-button-size: 24px; padding: 2px;"
               tabindex="0"
@@ -461,11 +461,11 @@ exports[`<RoomListItemView /> > renders NoMessagePreview story 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="More Options"
-              aria-labelledby="_r_4i_"
+              aria-labelledby="react-use-id-1"
               class="_icon-button_1215g_8"
               data-kind="primary"
               data-state="closed"
-              id="radix-_r_4g_"
+              id="radix-react-use-id-2"
               role="button"
               style="--cpd-icon-button-size: 24px; padding: 2px;"
               tabindex="0"
@@ -493,11 +493,11 @@ exports[`<RoomListItemView /> > renders NoMessagePreview story 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="Notification options"
-              aria-labelledby="_r_4p_"
+              aria-labelledby="react-use-id-3"
               class="_icon-button_1215g_8"
               data-kind="primary"
               data-state="closed"
-              id="radix-_r_4n_"
+              id="radix-react-use-id-4"
               role="button"
               style="--cpd-icon-button-size: 24px; padding: 2px;"
               tabindex="0"
@@ -591,11 +591,11 @@ exports[`<RoomListItemView /> > renders Selected story 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="More Options"
-              aria-labelledby="_r_i_"
+              aria-labelledby="react-use-id-1"
               class="_icon-button_1215g_8"
               data-kind="primary"
               data-state="closed"
-              id="radix-_r_g_"
+              id="radix-react-use-id-2"
               role="button"
               style="--cpd-icon-button-size: 24px; padding: 2px;"
               tabindex="0"
@@ -623,11 +623,11 @@ exports[`<RoomListItemView /> > renders Selected story 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="Notification options"
-              aria-labelledby="_r_p_"
+              aria-labelledby="react-use-id-3"
               class="_icon-button_1215g_8"
               data-kind="primary"
               data-state="closed"
-              id="radix-_r_n_"
+              id="radix-react-use-id-4"
               role="button"
               style="--cpd-icon-button-size: 24px; padding: 2px;"
               tabindex="0"
@@ -721,11 +721,11 @@ exports[`<RoomListItemView /> > renders UnsentMessage story 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="More Options"
-              aria-labelledby="_r_42_"
+              aria-labelledby="react-use-id-1"
               class="_icon-button_1215g_8"
               data-kind="primary"
               data-state="closed"
-              id="radix-_r_40_"
+              id="radix-react-use-id-2"
               role="button"
               style="--cpd-icon-button-size: 24px; padding: 2px;"
               tabindex="0"
@@ -753,11 +753,11 @@ exports[`<RoomListItemView /> > renders UnsentMessage story 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="Notification options"
-              aria-labelledby="_r_49_"
+              aria-labelledby="react-use-id-3"
               class="_icon-button_1215g_8"
               data-kind="primary"
               data-state="closed"
-              id="radix-_r_47_"
+              id="radix-react-use-id-4"
               role="button"
               style="--cpd-icon-button-size: 24px; padding: 2px;"
               tabindex="0"
@@ -869,11 +869,11 @@ exports[`<RoomListItemView /> > renders WithHoverMenu story 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="More Options"
-              aria-labelledby="_r_52_"
+              aria-labelledby="react-use-id-1"
               class="_icon-button_1215g_8"
               data-kind="primary"
               data-state="closed"
-              id="radix-_r_50_"
+              id="radix-react-use-id-2"
               role="button"
               style="--cpd-icon-button-size: 24px; padding: 2px;"
               tabindex="0"
@@ -901,11 +901,11 @@ exports[`<RoomListItemView /> > renders WithHoverMenu story 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="Notification options"
-              aria-labelledby="_r_59_"
+              aria-labelledby="react-use-id-3"
               class="_icon-button_1215g_8"
               data-kind="primary"
               data-state="closed"
-              id="radix-_r_57_"
+              id="radix-react-use-id-4"
               role="button"
               style="--cpd-icon-button-size: 24px; padding: 2px;"
               tabindex="0"
@@ -999,11 +999,11 @@ exports[`<RoomListItemView /> > renders WithMention story 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="More Options"
-              aria-labelledby="_r_22_"
+              aria-labelledby="react-use-id-1"
               class="_icon-button_1215g_8"
               data-kind="primary"
               data-state="closed"
-              id="radix-_r_20_"
+              id="radix-react-use-id-2"
               role="button"
               style="--cpd-icon-button-size: 24px; padding: 2px;"
               tabindex="0"
@@ -1031,11 +1031,11 @@ exports[`<RoomListItemView /> > renders WithMention story 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="Notification options"
-              aria-labelledby="_r_29_"
+              aria-labelledby="react-use-id-3"
               class="_icon-button_1215g_8"
               data-kind="primary"
               data-state="closed"
-              id="radix-_r_27_"
+              id="radix-react-use-id-4"
               role="button"
               style="--cpd-icon-button-size: 24px; padding: 2px;"
               tabindex="0"
@@ -1152,11 +1152,11 @@ exports[`<RoomListItemView /> > renders WithNotification story 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="More Options"
-              aria-labelledby="_r_1i_"
+              aria-labelledby="react-use-id-1"
               class="_icon-button_1215g_8"
               data-kind="primary"
               data-state="closed"
-              id="radix-_r_1g_"
+              id="radix-react-use-id-2"
               role="button"
               style="--cpd-icon-button-size: 24px; padding: 2px;"
               tabindex="0"
@@ -1184,11 +1184,11 @@ exports[`<RoomListItemView /> > renders WithNotification story 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="Notification options"
-              aria-labelledby="_r_1p_"
+              aria-labelledby="react-use-id-3"
               class="_icon-button_1215g_8"
               data-kind="primary"
               data-state="closed"
-              id="radix-_r_1n_"
+              id="radix-react-use-id-4"
               role="button"
               style="--cpd-icon-button-size: 24px; padding: 2px;"
               tabindex="0"
@@ -1294,11 +1294,11 @@ exports[`<RoomListItemView /> > renders WithVideoCall story 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="More Options"
-              aria-labelledby="_r_32_"
+              aria-labelledby="react-use-id-1"
               class="_icon-button_1215g_8"
               data-kind="primary"
               data-state="closed"
-              id="radix-_r_30_"
+              id="radix-react-use-id-2"
               role="button"
               style="--cpd-icon-button-size: 24px; padding: 2px;"
               tabindex="0"
@@ -1326,11 +1326,11 @@ exports[`<RoomListItemView /> > renders WithVideoCall story 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="Notification options"
-              aria-labelledby="_r_39_"
+              aria-labelledby="react-use-id-3"
               class="_icon-button_1215g_8"
               data-kind="primary"
               data-state="closed"
-              id="radix-_r_37_"
+              id="radix-react-use-id-4"
               role="button"
               style="--cpd-icon-button-size: 24px; padding: 2px;"
               tabindex="0"
@@ -1442,11 +1442,11 @@ exports[`<RoomListItemView /> > renders WithVoiceCall story 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="More Options"
-              aria-labelledby="_r_2i_"
+              aria-labelledby="react-use-id-1"
               class="_icon-button_1215g_8"
               data-kind="primary"
               data-state="closed"
-              id="radix-_r_2g_"
+              id="radix-react-use-id-2"
               role="button"
               style="--cpd-icon-button-size: 24px; padding: 2px;"
               tabindex="0"
@@ -1474,11 +1474,11 @@ exports[`<RoomListItemView /> > renders WithVoiceCall story 1`] = `
               aria-expanded="false"
               aria-haspopup="menu"
               aria-label="Notification options"
-              aria-labelledby="_r_2p_"
+              aria-labelledby="react-use-id-3"
               class="_icon-button_1215g_8"
               data-kind="primary"
               data-state="closed"
-              id="radix-_r_2n_"
+              id="radix-react-use-id-4"
               role="button"
               style="--cpd-icon-button-size: 24px; padding: 2px;"
               tabindex="0"
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/default-snapshot.ts b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/default-snapshot.ts
similarity index 93%
rename from packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/default-snapshot.ts
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/default-snapshot.ts
index bf0cb0189e..30ac314b1b 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/default-snapshot.ts
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/default-snapshot.ts
@@ -36,7 +36,6 @@ export const defaultSnapshot: RoomListItemViewSnapshot = {
     canMarkAsRead: false,
     canMarkAsUnread: true,
     roomNotifState: RoomNotifState.AllMessages,
-    canMoveToSection: true,
     sections: [
         {
             tag: "m.favourite",
@@ -45,7 +44,7 @@ export const defaultSnapshot: RoomListItemViewSnapshot = {
         },
         {
             tag: "element.io.section.work",
-            name: "Work",
+            name: "Work with a very long name that should be truncated",
             isSelected: true,
         },
         {
@@ -54,4 +53,5 @@ export const defaultSnapshot: RoomListItemViewSnapshot = {
             isSelected: false,
         },
     ],
+    areSectionsEnabled: true,
 };
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/index.ts b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/index.ts
similarity index 90%
rename from packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/index.ts
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/index.ts
index 72f2f98119..9d9b6595d6 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/index.ts
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/index.ts
@@ -14,6 +14,8 @@ export type {
     RoomListItemViewProps,
     Section,
 } from "./RoomListItemView";
+export { RoomListItemContent } from "./RoomListItemContent";
+export type { RoomListItemContentProps } from "./RoomListItemContent";
 export { RoomListItemNotificationMenu } from "./RoomListItemNotificationMenu";
 export type { RoomListItemNotificationMenuProps } from "./RoomListItemNotificationMenu";
 export { RoomListItemMoreOptionsMenu, MoreOptionContent } from "./RoomListItemMoreOptionsMenu";
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/mocked-actions.ts b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/mocked-actions.ts
similarity index 95%
rename from packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/mocked-actions.ts
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/mocked-actions.ts
index 8e79c52cc5..846f433440 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView/mocked-actions.ts
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView/mocked-actions.ts
@@ -21,4 +21,5 @@ export const mockedActions: RoomListItemViewActions = {
     onSetRoomNotifState: fn(),
     onCreateSection: fn(),
     onToggleSection: fn(),
+    onRemoveFromSection: fn(),
 };
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.stories.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemWrapper.stories.tsx
similarity index 85%
rename from packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.stories.tsx
rename to packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemWrapper.stories.tsx
index bd70fb4d1b..d93815e663 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemAccessibilityWrapper.stories.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemWrapper.stories.tsx
@@ -9,12 +9,12 @@ import React from "react";
 import { fn } from "storybook/test";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { RoomListItemAccessibilityWrapper } from "./RoomListItemAccessibilityWrapper";
+import { RoomListItemWrapper } from "./RoomListItemWrapper";
 import { createMockRoomItemViewModel, renderAvatar } from "../../story-mocks";
 
 const meta = {
-    title: "Room List/RoomListItemAccessibilityWrapper",
-    component: RoomListItemAccessibilityWrapper,
+    title: "Room List/RoomListItemWrapper",
+    component: RoomListItemWrapper,
     tags: ["autodocs"],
     args: {
         roomIndex: 0,
@@ -35,7 +35,7 @@ const meta = {
             </div>
         ),
     ],
-} satisfies Meta<typeof RoomListItemAccessibilityWrapper>;
+} satisfies Meta<typeof RoomListItemWrapper>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemWrapper.test.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemWrapper.test.tsx
new file mode 100644
index 0000000000..0f91775c2f
--- /dev/null
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemWrapper.test.tsx
@@ -0,0 +1,59 @@
+/*
+ * Copyright 2026 Element Creations 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 { render, screen } from "@test-utils";
+import userEvent from "@testing-library/user-event";
+import { composeStories } from "@storybook/react-vite";
+import { describe, it, expect, vi } from "vitest";
+
+import * as stories from "./RoomListItemWrapper.stories";
+
+const { Sections } = composeStories(stories);
+
+describe("<RoomListItemWrapper /> keyboard re-dispatch", () => {
+    it("ArrowLeft on the first room of a section re-dispatches as ArrowUp", async () => {
+        const user = userEvent.setup();
+        const onKeyDown = vi.fn();
+        render(
+            <div onKeyDown={onKeyDown}>
+                <Sections roomIndexInSection={0} isFocused={true} />
+            </div>,
+        );
+
+        // Make sure the room's button is focused before sending the key event.
+        const button = screen.getByRole("button", { name: /Room name/ });
+        button.focus();
+
+        await user.keyboard("{ArrowLeft}");
+
+        const arrowUpEvents = onKeyDown.mock.calls.filter(([event]) => event.code === "ArrowUp");
+        expect(arrowUpEvents).toHaveLength(1);
+    });
+
+    it("ArrowLeft on a non-first room of a section does NOT re-dispatch", async () => {
+        const user = userEvent.setup();
+        const onKeyDown = vi.fn();
+        render(
+            <div onKeyDown={onKeyDown}>
+                <Sections roomIndexInSection={2} isFocused={true} />
+            </div>,
+        );
+
+        const button = screen.getByRole("button", { name: /Room name/ });
+        button.focus();
+
+        await user.keyboard("{ArrowLeft}");
+
+        const arrowUpEvents = onKeyDown.mock.calls.filter(([event]) => event.code === "ArrowUp");
+        expect(arrowUpEvents).toHaveLength(0);
+
+        // The original ArrowLeft event should still bubble (the handler is a no-op for non-first items).
+        const arrowLeftEvents = onKeyDown.mock.calls.filter(([event]) => event.code === "ArrowLeft");
+        expect(arrowLeftEvents.length).toBeGreaterThan(0);
+    });
+});
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemWrapper.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemWrapper.tsx
new file mode 100644
index 0000000000..f07e45ad80
--- /dev/null
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/RoomListItemWrapper.tsx
@@ -0,0 +1,89 @@
+/*
+ * Copyright 2026 Element Creations 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, { memo, type JSX } from "react";
+import { useDraggable } from "@dnd-kit/react";
+import { Feedback } from "@dnd-kit/dom";
+import { RestrictToVerticalAxis } from "@dnd-kit/abstract/modifiers";
+import { useMergeRefs } from "react-merge-refs";
+
+import { RoomListItemView, type RoomListItemViewProps } from "./RoomListItemView";
+import { getItemAccessibleProps } from "../../../core/VirtualizedList";
+import { useViewModel } from "../../../core/viewmodel";
+import { type RoomDragData } from "../dragAndDrop";
+
+export interface RoomListItemWrapperProps extends RoomListItemViewProps {
+    /** Index of this room in the list */
+    roomIndex: number;
+    /** Index of this room in its section */
+    roomIndexInSection: number;
+    /** Total number of rooms in the list */
+    roomCount: number;
+    /** Whether the room list is displayed as a flat list */
+    isInFlatList: boolean;
+}
+
+/**
+ * Wraps RoomListItemView with the correct accessibility and drag-and-drop props
+ * based on whether the list is flat (listbox) or grouped (treegrid).
+ */
+export const RoomListItemWrapper = memo(function RoomListItemWrapper({
+    roomIndex,
+    roomCount,
+    roomIndexInSection,
+    isInFlatList,
+    ...rest
+}: RoomListItemWrapperProps): JSX.Element {
+    if (isInFlatList) {
+        return <RoomListItemView {...rest} {...getItemAccessibleProps("listbox", roomIndex, roomCount)} />;
+    }
+
+    const isFirstInSection = roomIndexInSection === 0;
+    return (
+        <div {...getItemAccessibleProps("treegrid", roomIndex, roomIndexInSection)}>
+            <div role="gridcell" aria-selected={rest.isSelected}>
+                <DraggableWrapper
+                    {...rest}
+                    onKeyDown={(e) => {
+                        if (e.code === "ArrowLeft" && isFirstInSection) {
+                            // Move focus to the section header
+                            e.preventDefault();
+                            e.stopPropagation();
+                            e.currentTarget.dispatchEvent(
+                                new KeyboardEvent("keydown", {
+                                    code: "ArrowUp",
+                                    key: "ArrowUp",
+                                    bubbles: true,
+                                }),
+                            );
+                        }
+                    }}
+                />
+            </div>
+        </div>
+    );
+});
+
+/**
+ * Wraps RoomListItemView with the drag-and-drop functionality. This is only used for treegrid mode, as flat list items are not draggable.
+ */
+function DraggableWrapper(props: RoomListItemViewProps): JSX.Element {
+    const item = useViewModel(props.vm);
+    const {
+        ref: draggableRef,
+        handleRef,
+        isDragSource,
+    } = useDraggable<RoomDragData>({
+        id: item.id,
+        data: { type: "room" },
+        // We clone the item in the dnd overlay to avoid putting a hole in the list
+        plugins: [Feedback.configure({ feedback: "clone" })],
+        modifiers: [RestrictToVerticalAxis],
+    });
+    const dndRef = useMergeRefs([draggableRef, handleRef]);
+    return <RoomListItemView {...props} ref={dndRef} isDragSource={isDragSource} />;
+}
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/index.ts b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/index.ts
new file mode 100644
index 0000000000..4d02469b76
--- /dev/null
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListItemWrapper/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+export { RoomListItemWrapper } from "./RoomListItemWrapper";
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderDragOverlayView/RoomListSectionHeaderDragOverlayView.module.css b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderDragOverlayView/RoomListSectionHeaderDragOverlayView.module.css
new file mode 100644
index 0000000000..b4fb0d2c02
--- /dev/null
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderDragOverlayView/RoomListSectionHeaderDragOverlayView.module.css
@@ -0,0 +1,11 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+.dragOverlay {
+    padding-top: 0px;
+    padding-bottom: 0px;
+}
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderDragOverlayView/RoomListSectionHeaderDragOverlayView.stories.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderDragOverlayView/RoomListSectionHeaderDragOverlayView.stories.tsx
new file mode 100644
index 0000000000..30a71a4671
--- /dev/null
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderDragOverlayView/RoomListSectionHeaderDragOverlayView.stories.tsx
@@ -0,0 +1,63 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+import { fn } from "storybook/test";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+    type RoomListSectionHeaderViewSnapshot,
+    type RoomListSectionHeaderActions,
+} from "../RoomListSectionHeaderView";
+import { RoomListSectionHeaderDragOverlayView } from "./RoomListSectionHeaderDragOverlayView";
+import { useMockedViewModel } from "../../../core/viewmodel";
+import { withViewDocs } from "../../../../.storybook/withViewDocs";
+
+type RoomListSectionHeaderDragOverlayProps = RoomListSectionHeaderViewSnapshot & RoomListSectionHeaderActions;
+
+const RoomListSectionHeaderDragOverlayWrapperImpl = ({
+    onClick,
+    editSection,
+    removeSection,
+    ...rest
+}: RoomListSectionHeaderDragOverlayProps): JSX.Element => {
+    const vm = useMockedViewModel(rest, { onClick, editSection, removeSection });
+    return <RoomListSectionHeaderDragOverlayView vm={vm} />;
+};
+const RoomListSectionHeaderDragOverlayWrapper = withViewDocs(
+    RoomListSectionHeaderDragOverlayWrapperImpl,
+    RoomListSectionHeaderDragOverlayView,
+);
+
+const meta = {
+    title: "Room List/RoomListSectionHeaderDragOverlayView",
+    component: RoomListSectionHeaderDragOverlayWrapper,
+    tags: ["autodocs"],
+    decorators: [
+        (Story) => (
+            <div style={{ width: "320px", padding: "8px" }}>
+                <Story />
+            </div>
+        ),
+    ],
+    args: {
+        id: "element.io.section.abc123",
+        title: "Work",
+        isExpanded: true,
+        isUnread: false,
+        displaySectionMenu: true,
+        canBeReordered: true,
+        onClick: fn(),
+        editSection: fn(),
+        removeSection: fn(),
+    },
+} satisfies Meta<typeof RoomListSectionHeaderDragOverlayWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderDragOverlayView/RoomListSectionHeaderDragOverlayView.test.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderDragOverlayView/RoomListSectionHeaderDragOverlayView.test.tsx
new file mode 100644
index 0000000000..c5bd2fec58
--- /dev/null
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderDragOverlayView/RoomListSectionHeaderDragOverlayView.test.tsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright 2026 Element Creations 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 { render } from "@test-utils";
+import { composeStories } from "@storybook/react-vite";
+import { describe, it, expect } from "vitest";
+
+import * as stories from "./RoomListSectionHeaderDragOverlayView.stories";
+
+const { Default } = composeStories(stories);
+
+describe("<RoomListSectionHeaderDragOverlayView /> stories", () => {
+    it("renders Default story", () => {
+        const { container } = render(<Default />);
+        expect(container).toMatchSnapshot();
+    });
+});
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderDragOverlayView/RoomListSectionHeaderDragOverlayView.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderDragOverlayView/RoomListSectionHeaderDragOverlayView.tsx
new file mode 100644
index 0000000000..ceddbf15ed
--- /dev/null
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderDragOverlayView/RoomListSectionHeaderDragOverlayView.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright 2026 Element Creations 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, { memo, type JSX } from "react";
+import classNames from "classnames";
+
+import { type RoomListSectionHeaderViewModel } from "../RoomListSectionHeaderView";
+import { RoomListSectionHeaderContent } from "../RoomListSectionHeaderView/RoomListSectionHeaderContent";
+import headerStyles from "../RoomListSectionHeaderView/RoomListSectionHeaderView.module.css";
+import styles from "./RoomListSectionHeaderDragOverlayView.module.css";
+
+/**
+ * Props for {@link RoomListSectionHeaderDragOverlayView}.
+ */
+export interface RoomListSectionHeaderDragOverlayViewProps {
+    /** The section header view model — same one used by the real section header */
+    vm: RoomListSectionHeaderViewModel;
+}
+
+/**
+ * Visual clone of a section header rendered inside the dnd drag overlay.
+ *
+ * Reuses {@link RoomListSectionHeaderContent} for the inner layout so the
+ * floating clone matches a real section header.
+ */
+export const RoomListSectionHeaderDragOverlayView = memo(function RoomListSectionHeaderDragOverlayView({
+    vm,
+}: RoomListSectionHeaderDragOverlayViewProps): JSX.Element {
+    return (
+        // Purely a visual clone that follows the drag. Hide it from the accessibility tree so the
+        // dragged section's title isn't duplicated (the real, still-focused header already exposes
+        // it, and drag feedback is narrated via the dnd live-region announcements).
+        <div aria-hidden={true} className={classNames(headerStyles.header, styles.dragOverlay)}>
+            <RoomListSectionHeaderContent vm={vm} isDragging={true} />
+        </div>
+    );
+});
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderDragOverlayView/__snapshots__/RoomListSectionHeaderDragOverlayView.test.tsx.snap b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderDragOverlayView/__snapshots__/RoomListSectionHeaderDragOverlayView.test.tsx.snap
new file mode 100644
index 0000000000..46bb3a2f53
--- /dev/null
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderDragOverlayView/__snapshots__/RoomListSectionHeaderDragOverlayView.test.tsx.snap
@@ -0,0 +1,42 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<RoomListSectionHeaderDragOverlayView /> stories > renders Default story 1`] = `
+<div>
+  <div
+    style="width: 320px; padding: 8px;"
+  >
+    <div
+      aria-hidden="true"
+      class="RoomListSectionHeaderView-module_header RoomListSectionHeaderDragOverlayView-module_dragOverlay"
+    >
+      <div
+        class="Flex-module_flex RoomListSectionHeaderView-module_container RoomListSectionHeaderView-module_dragging"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+      >
+        <div
+          class="Flex-module_flex"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
+        >
+          <svg
+            class="RoomListSectionHeaderView-module_chevron"
+            fill="var(--cpd-color-icon-secondary)"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+            />
+          </svg>
+          <span
+            class="RoomListSectionHeaderView-module_title"
+          >
+            Work
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderDragOverlayView/index.ts b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderDragOverlayView/index.ts
new file mode 100644
index 0000000000..5c32eb9564
--- /dev/null
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderDragOverlayView/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+export { RoomListSectionHeaderDragOverlayView } from "./RoomListSectionHeaderDragOverlayView";
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderContent.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderContent.tsx
new file mode 100644
index 0000000000..ccc09f8645
--- /dev/null
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderContent.tsx
@@ -0,0 +1,116 @@
+/*
+ * Copyright 2026 Element Creations 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, { memo, type JSX, useState } from "react";
+import ChevronRightIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-right";
+import classNames from "classnames";
+import { IconButton, Menu, MenuItem } from "@vector-im/compound-web";
+import { OverflowHorizontalIcon, EditIcon, DeleteIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import { useViewModel } from "../../../core/viewmodel";
+import { _t } from "../../../core/i18n/i18n";
+import { Flex } from "../../../core/utils/Flex";
+import { type RoomListSectionHeaderViewModel } from "./RoomListSectionHeaderView";
+import styles from "./RoomListSectionHeaderView.module.css";
+import { NotificationDecoration } from "../RoomListItemWrapper/RoomListItemView";
+
+/**
+ * Props for {@link RoomListSectionHeaderContent}.
+ */
+export interface RoomListSectionHeaderContentProps {
+    /** The section header view model */
+    vm: RoomListSectionHeaderViewModel;
+    /** Whether the section header is being dragged — hides the interactive menu when true */
+    isDragging?: boolean;
+}
+
+/**
+ * The inner content of a section header: chevron, title, and menu (or static menu icon when dragging).
+ * Used both inside the full {@link RoomListSectionHeaderView} and inside the drag overlay.
+ */
+export const RoomListSectionHeaderContent = memo(function RoomListSectionHeaderContent({
+    vm,
+    isDragging = false,
+}: RoomListSectionHeaderContentProps): JSX.Element {
+    const { title, displaySectionMenu, notification, isExpanded } = useViewModel(vm);
+    return (
+        <Flex
+            className={classNames(styles.container, {
+                [styles.dragging]: isDragging,
+            })}
+            align="center"
+            justify="space-between"
+            gap="var(--cpd-space-2x)"
+        >
+            <Flex align="center" gap="var(--cpd-space-0-5x)">
+                <ChevronRightIcon
+                    className={styles.chevron}
+                    width="24px"
+                    height="24px"
+                    fill="var(--cpd-color-icon-secondary)"
+                />
+                <span className={styles.title}>{title}</span>
+            </Flex>
+            {!isExpanded && notification && (
+                <div className={styles.notificationDecoration} aria-hidden={true}>
+                    <NotificationDecoration {...notification} />
+                </div>
+            )}
+            {displaySectionMenu && !isDragging && <MenuComponent vm={vm} />}
+        </Flex>
+    );
+});
+
+interface MenuComponentProps {
+    vm: RoomListSectionHeaderViewModel;
+}
+
+function MenuComponent({ vm }: MenuComponentProps): JSX.Element {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <Menu
+            open={open}
+            onOpenChange={setOpen}
+            title={_t("room_list|section_header|more_options")}
+            showTitle={false}
+            align="start"
+            trigger={
+                <IconButton
+                    className={styles.menu}
+                    tooltip={_t("room_list|section_header|more_options")}
+                    aria-label={_t("room_list|section_header|more_options")}
+                    size="24px"
+                    style={{ padding: "2px" }}
+                    color="var(--cpd-color-icon-primary)"
+                >
+                    <OverflowHorizontalIcon fill="var(--cpd-color-icon-primary)" />
+                </IconButton>
+            }
+        >
+            <div
+                // We don't want keyboard navigation events to bubble up to the ListView changing the focused item
+                onKeyDown={(e) => e.stopPropagation()}
+            >
+                <MenuItem
+                    hideChevron={true}
+                    Icon={EditIcon}
+                    label={_t("room_list|section_header|edit_section")}
+                    onSelect={() => vm.editSection()}
+                    onClick={(evt) => evt.stopPropagation()}
+                />
+                <MenuItem
+                    hideChevron={true}
+                    Icon={DeleteIcon}
+                    label={_t("room_list|section_header|remove_section")}
+                    onSelect={() => vm.removeSection()}
+                    onClick={(evt) => evt.stopPropagation()}
+                />
+            </div>
+        </Menu>
+    );
+}
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.module.css b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.module.css
index d587c8014f..147d64f5c0 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.module.css
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.module.css
@@ -13,13 +13,16 @@
 
     width: 100%;
     cursor: pointer;
-    font: var(--cpd-font-body-md-regular);
+    font: var(--cpd-font-body-sm-regular);
+    letter-spacing: var(--cpd-font-letter-spacing-body-sm);
     color: var(--cpd-color-text-secondary);
     padding: var(--cpd-space-1x) 0;
-    background-color: var(--cpd-color-bg-canvas-default);
 
     &:hover,
-    &:focus-visible,
+    /* keyboardActive is toggled in JS for keyboard focus only (see RoomListSectionHeaderView), and
+       kept while focus is on the menu button so it stays reachable by Tab — without revealing the
+       menu on a mouse-focused header the way :focus-within would */
+    &.keyboardActive,
     &:has(button[data-state="open"]) {
         color: var(--cpd-color-text-primary);
 
@@ -34,6 +37,12 @@
         .menu {
             display: initial;
         }
+
+        /* When a menu is present and revealed on hover, hide the decoration to avoid clutter.
+           Default sections have no menu, so their decoration stays visible on hover. */
+        .notificationDecoration {
+            display: none;
+        }
     }
 
     .chevron {
@@ -52,13 +61,20 @@
         }
     }
 
+    /* A focused header can be scrolled flush to the scroller's top edge (where it pins), so the
+       default outline would be clipped by overflow:auto. Inset it so the focus ring stays visible. */
+    &:focus-visible {
+        outline-offset: -2px;
+    }
+
     &.unread {
-        font: var(--cpd-font-body-md-semibold);
+        font: var(--cpd-font-body-sm-semibold);
         color: var(--cpd-color-text-primary);
     }
 }
 
 .container {
+    position: relative;
     margin: 0 var(--cpd-space-3x);
     padding: var(--cpd-space-1-5x) var(--cpd-space-2x) var(--cpd-space-1-5x) var(--cpd-space-1x);
     border-radius: 8px;
@@ -87,6 +103,67 @@
     padding-bottom: 0;
 }
 
+.dropTarget .container {
+    box-shadow: inset 0 0 0 2px var(--cpd-color-border-accent-primary);
+}
+
+.dropTargetBottom .container::after,
+.dropTargetTop .container::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background-color: var(--cpd-color-border-accent-primary);
+}
+
+.dropTargetBottom .container::after {
+    bottom: 0;
+}
+
+.dropTargetTop .container::before {
+    top: 0;
+}
+
 .menu {
     display: none;
 }
+
+.dragging {
+    outline: 1px solid var(--cpd-color-border-interactive-hovered);
+    background-color: color-mix(in srgb, var(--cpd-color-bg-action-tertiary-hovered) 95%, transparent);
+    color: var(--cpd-color-text-primary);
+}
+
+.dragSource .container {
+    opacity: 0.6;
+}
+
+/*
+Opaque backing for the pinned "current section" overlay header. The list rows scroll underneath it,
+so it must obscure them. The header button stays full width (so its pill aligns with the real header
+rows), while the opaque fill is painted by the pseudo-element below.
+*/
+.stickyBackground {
+    position: relative;
+    width: 100%;
+}
+
+/*
+The opaque fill. It stops short of the inline-end edge by the same gutter the room/header pills
+already leave clear (--cpd-space-3x), so the scroller's scrollbar — which floats in that gutter —
+stays visible instead of being covered by the pinned overlay. It's a separate inset layer (rather
+than a plain `background` on .stickyBackground) precisely so it can stop short of that gutter.
+
+An absolutely-positioned element paints ABOVE its statically-positioned siblings by default, so
+`z-index: -1` is needed to drop this fill behind the header's text/chevron/menu. It still covers the
+scrolling rows beneath because the overlay wrapper (.stickyHeader) owns the stacking context.
+*/
+.stickyBackground::before {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    inset-inline: 0 var(--cpd-space-3x);
+    z-index: -1;
+    background: var(--cpd-color-bg-canvas-default);
+}
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx
index c4455dc036..e98d33bf76 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.stories.tsx
@@ -7,6 +7,8 @@
 
 import React, { type JSX } from "react";
 import { fn } from "storybook/test";
+import { DragDropProvider } from "@dnd-kit/react";
+import { PointerActivationConstraints, PointerSensor } from "@dnd-kit/dom";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import {
@@ -59,7 +61,19 @@ const meta = {
         isExpanded: true,
         isFocused: false,
         isUnread: false,
+        notification: {
+            hasAnyNotificationOrActivity: false,
+            isUnsentMessage: false,
+            invited: false,
+            isMention: false,
+            isActivityNotification: false,
+            isNotification: false,
+            hasUnreadCount: false,
+            count: 0,
+            muted: false,
+        },
         displaySectionMenu: true,
+        canBeReordered: true,
         onClick: fn(),
         onFocus: fn(),
         editSection: fn(),
@@ -71,9 +85,17 @@ const meta = {
     },
     decorators: [
         (Story) => (
-            <div role="treegrid" style={{ width: "320px" }}>
-                <Story />
-            </div>
+            <DragDropProvider
+                sensors={[
+                    PointerSensor.configure({
+                        activationConstraints: [new PointerActivationConstraints.Distance({ value: 5 })],
+                    }),
+                ]}
+            >
+                <div role="treegrid" style={{ width: "320px" }}>
+                    <Story />
+                </div>
+            </DragDropProvider>
         ),
     ],
     parameters: {
@@ -119,3 +141,22 @@ export const Unread: Story = {
         isUnread: true,
     },
 };
+
+export const WithNotificationDecoration: Story = {
+    args: {
+        isUnread: true,
+        notification: {
+            hasAnyNotificationOrActivity: true,
+            isUnsentMessage: true,
+            invited: true,
+            isMention: true,
+            isActivityNotification: false,
+            isNotification: true,
+            hasUnreadCount: true,
+            count: 12,
+            muted: false,
+            callType: "video",
+        },
+        isExpanded: false,
+    },
+};
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.test.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.test.tsx
index 6ab7bcd236..7eb81bc605 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.test.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.test.tsx
@@ -6,16 +6,24 @@
  */
 
 import React from "react";
-import { render } from "@test-utils";
+import { render, screen, waitFor } from "@test-utils";
 import { composeStories } from "@storybook/react-vite";
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, type Mock, afterEach, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 
 import * as stories from "./RoomListSectionHeaderView.stories";
 
-const { Default } = composeStories(stories);
+const { Default, Collapsed } = composeStories(stories);
+
+const HEADER_NAME = "Toggle Favourites section";
 
 describe("<RoomListSectionHeaderView /> stories", () => {
+    afterEach(() => {
+        // Storybook's fn() mocks aren't reset by vi.clearAllMocks; clear them by hand.
+        (Default.args.onClick as Mock).mockClear();
+        (Collapsed.args.onClick as Mock).mockClear();
+    });
+
     it("renders Default story", () => {
         const { container } = render(<Default />);
         expect(container).toMatchSnapshot();
@@ -24,9 +32,73 @@ describe("<RoomListSectionHeaderView /> stories", () => {
     it("should call onClick when the header is clicked", async () => {
         const user = userEvent.setup();
 
-        const { getByRole } = render(<Default />);
-        const button = getByRole("gridcell", { name: "Toggle Favourites section" });
+        render(<Default />);
+        const button = screen.getByRole("button", { name: HEADER_NAME });
         await user.click(button);
         expect(Default.args.onClick).toHaveBeenCalled();
     });
+
+    it("focuses the button when isFocused is true", () => {
+        render(<Default isFocused={true} />);
+        const button = screen.getByRole("button", { name: HEADER_NAME });
+        expect(document.activeElement).toBe(button);
+    });
+
+    it("reveals the section menu on keyboard focus and clears it when focus leaves", async () => {
+        // isFocused focuses the header via the keyboard on mount, so the menu is revealed.
+        render(<Default isFocused={true} />);
+        const button = screen.getByRole("button", { name: HEADER_NAME });
+        expect(button.className).toMatch(/keyboardActive/);
+
+        // Focus leaving the header hides the menu again.
+        button.blur();
+        await waitFor(() => expect(button.className).not.toMatch(/keyboardActive/));
+    });
+
+    it("expands a collapsed section on ArrowRight", async () => {
+        const user = userEvent.setup();
+        render(<Collapsed isFocused={true} />);
+        await user.keyboard("{ArrowRight}");
+        expect(Collapsed.args.onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not call onClick on ArrowRight when already expanded", async () => {
+        const user = userEvent.setup();
+        render(<Default isFocused={true} />);
+        await user.keyboard("{ArrowRight}");
+        expect(Default.args.onClick).not.toHaveBeenCalled();
+    });
+
+    it("collapses an expanded section on ArrowLeft", async () => {
+        const user = userEvent.setup();
+        render(<Default isFocused={true} />);
+        await user.keyboard("{ArrowLeft}");
+        expect(Default.args.onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not call onClick on ArrowLeft when already collapsed", async () => {
+        const user = userEvent.setup();
+        render(<Collapsed isFocused={true} />);
+        await user.keyboard("{ArrowLeft}");
+        expect(Collapsed.args.onClick).not.toHaveBeenCalled();
+    });
+
+    it("ArrowRight on an expanded section re-dispatches as ArrowDown", async () => {
+        const user = userEvent.setup();
+        const onKeyDown = vi.fn();
+        render(
+            <div onKeyDown={onKeyDown}>
+                <Default isFocused={true} />
+            </div>,
+        );
+        await user.keyboard("{ArrowRight}");
+
+        // The re-dispatched ArrowDown should bubble up to the parent listener.
+        const arrowDownEvents = onKeyDown.mock.calls.filter(([event]) => event.code === "ArrowDown");
+        expect(arrowDownEvents).toHaveLength(1);
+
+        // The original ArrowRight handler called preventDefault/stopPropagation, so
+        // it should not have called onClick (which is reserved for the toggle branch).
+        expect(Default.args.onClick).not.toHaveBeenCalled();
+    });
 });
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.tsx
index 50b92c8112..bf1784f707 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListSectionHeaderView.tsx
@@ -5,18 +5,20 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { memo, type JSX, type FocusEvent, type MouseEventHandler, useState } from "react";
-import ChevronRightIcon from "@vector-im/compound-design-tokens/assets/web/icons/chevron-right";
+import React, { memo, type JSX, type FocusEvent, useEffect, useRef, useState } from "react";
 import classNames from "classnames";
-import { IconButton, Menu, MenuItem } from "@vector-im/compound-web";
-import { OverflowHorizontalIcon, EditIcon, DeleteIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { useDraggable, useDragOperation, useDroppable } from "@dnd-kit/react";
+import { useMergeRefs } from "react-merge-refs";
+import { Feedback } from "@dnd-kit/dom";
+import { RestrictToVerticalAxis } from "@dnd-kit/abstract/modifiers";
 
 import { useViewModel, type ViewModel } from "../../../core/viewmodel";
 import styles from "./RoomListSectionHeaderView.module.css";
-import { Flex } from "../../../core/utils/Flex";
 import { useI18n } from "../../../core/i18n/i18nContext";
 import { getGroupHeaderAccessibleProps } from "../../../core/VirtualizedList";
-import { _t } from "../../../core/i18n/i18n";
+import { RoomListSectionHeaderContent } from "./RoomListSectionHeaderContent";
+import { isSectionDragData, type RoomListDragData, type SectionDragData } from "../dragAndDrop";
+import { type NotificationDecorationData } from "../RoomListItemWrapper/RoomListItemView/NotificationDecoration";
 
 /**
  * The observable state snapshot for a room list section header.
@@ -30,16 +32,20 @@ export interface RoomListSectionHeaderViewSnapshot {
     isExpanded: boolean;
     /** Whether the section is unread (has any unread rooms) */
     isUnread: boolean;
+    /** The merged notification decoration aggregating the notifications of the rooms in the section */
+    notification?: NotificationDecorationData;
     /** Wether to display the section menu  */
     displaySectionMenu: boolean;
+    /** Whether the section can be reordered via drag-and-drop  */
+    canBeReordered: boolean;
 }
 
 /**
  * Actions that can be performed on a room list section header.
  */
 export interface RoomListSectionHeaderActions {
-    /** Handler invoked when the section header is clicked (toggles expand/collapse). */
-    onClick: MouseEventHandler<HTMLButtonElement>;
+    /** Handler invoked when the section header is clicked or keyboard-toggled (toggles expand/collapse). */
+    onClick: () => void;
     /** Handler invoked when the edit section button is clicked  */
     editSection: () => void;
     /** Handler invoked when the remove section button is clicked  */
@@ -100,102 +106,140 @@ export const RoomListSectionHeaderView = memo(function RoomListSectionHeaderView
     roomCountInSection,
 }: Readonly<RoomListSectionHeaderViewProps>): JSX.Element {
     const { translate: _t } = useI18n();
-    const { id, title, isExpanded, isUnread, displaySectionMenu } = useViewModel(vm);
+    const { id, title, isExpanded, isUnread, canBeReordered } = useViewModel(vm);
     const isLastSection = sectionIndex === sectionCount - 1;
 
+    const {
+        ref: draggableRef,
+        handleRef,
+        isDragSource,
+    } = useDraggable<SectionDragData>({
+        id,
+        data: { type: "section", index: sectionIndex },
+        plugins: [Feedback.configure({ feedback: "clone" })],
+        modifiers: [RestrictToVerticalAxis],
+        disabled: !canBeReordered,
+    });
+
+    const { source } = useDragOperation<RoomListDragData>();
+    const draggedData = source?.data;
+    const isDraggingSectionSource = isSectionDragData(draggedData);
+
+    // Keep the droppable enabled so rooms can still be dropped on default sections
+    // (Favourite / Low Priority). Only disable it for section drags on non-reorderable
+    // headers so they can't be used as reorder targets.
+    const { ref: droppableRef, isDropTarget } = useDroppable<SectionDragData>({
+        id,
+        data: { type: "section", index: sectionIndex },
+        disabled: isDragSource || (isDraggingSectionSource && !canBeReordered),
+    });
+
+    const isDraggingRoom = isDropTarget && draggedData?.type === "room";
+    const isDraggingSection = isDropTarget && isDraggingSectionSource;
+
+    const sourceSectionIndex = isSectionDragData(draggedData) ? draggedData.index : -1;
+    const isSourceAbove = isDraggingSection && sourceSectionIndex > sectionIndex;
+    const hasBottomBorder = isDraggingSection && !isSourceAbove;
+    const hasTopBorder = isDraggingSection && isSourceAbove;
+
+    // Keep the last expanded state we rendered while NOT dragging.
+    const lastExpandedRef = useRef(isExpanded);
+    if (!isDragSource) {
+        lastExpandedRef.current = isExpanded;
+    }
+    // While this header is the drag source, freeze aria-expanded at its pre-drag value. Section
+    // drag start collapses every section, flipping this focused header's aria-expanded true→false;
+    // announcing that state change is a second, redundant screen-reader announcement on top of the
+    // dnd "Dragging X" live-region announcement. The collapse is still reflected visually.
+    const ariaExpanded = isDragSource ? lastExpandedRef.current : isExpanded;
+
+    const internalRef = useRef<HTMLButtonElement>(null);
+    // Only wire up draggable refs when the section can be dragged. Otherwise dndkit will put incorrect and misleading a11y attributes
+    // on the default section (aka aria-disabled=true and aria-draggable=false)
+    const buttonRef = useMergeRefs([
+        ...(canBeReordered ? [draggableRef, handleRef] : []),
+        droppableRef,
+        internalRef,
+    ]) as React.Ref<HTMLButtonElement>;
+
+    useEffect(() => {
+        if (isFocused) {
+            internalRef.current?.focus({ preventScroll: true });
+        }
+    }, [isFocused]);
+
+    // Reveal the menu only on keyboard focus (not mouse), kept while focus is on the menu button so
+    // it stays reachable by Tab. See RoomListItemView for the full rationale.
+    const [keyboardActive, setKeyboardActive] = useState(false);
+
+    const onHeaderFocus = (e: React.FocusEvent<HTMLButtonElement>): void => {
+        onFocus(id, e);
+        if (!e.currentTarget.contains(e.relatedTarget) && e.currentTarget.matches(":focus-visible")) {
+            setKeyboardActive(true);
+        }
+    };
+
+    const onHeaderBlur = (e: React.FocusEvent<HTMLButtonElement>): void => {
+        // Keep it revealed while focus is on the menu button, and while the menu is open (focus is
+        // then in the portaled popover, outside the header). That way closing with Escape restores
+        // focus to the still-revealed trigger instead of dropping to <body>. Clear once focus leaves.
+        if (!e.currentTarget.contains(e.relatedTarget) && !e.currentTarget.querySelector('[data-state="open"]')) {
+            setKeyboardActive(false);
+        }
+    };
+
     return (
         <div
-            aria-expanded={isExpanded}
+            aria-expanded={ariaExpanded}
             {...getGroupHeaderAccessibleProps(indexInList, sectionIndex, roomCountInSection)}
         >
-            <button
-                type="button"
-                role="gridcell"
-                className={classNames(styles.header, {
-                    [styles.firstHeader]: sectionIndex === 0,
-                    // If the section is collapsed and it's the last one
-                    [styles.lastHeader]: !isExpanded && isLastSection,
-                    [styles.unread]: isUnread,
-                })}
-                onClick={vm.onClick}
-                aria-expanded={isExpanded}
-                onFocus={(e) => onFocus(id, e)}
-                tabIndex={isFocused ? 0 : -1}
-                aria-label={
-                    isUnread
-                        ? _t("room_list|section_header|toggle_unread", { section: title })
-                        : _t("room_list|section_header|toggle", { section: title })
-                }
-            >
-                <Flex className={styles.container} align="center" justify="space-between" gap="var(--cpd-space-2x)">
-                    <Flex align="center" gap="var(--cpd-space-0-5x)">
-                        <ChevronRightIcon
-                            className={styles.chevron}
-                            width="24px"
-                            height="24px"
-                            fill="var(--cpd-color-icon-secondary)"
-                        />
-                        <span className={styles.title}>{title}</span>
-                    </Flex>
-                    {displaySectionMenu && <MenuComponent vm={vm} />}
-                </Flex>
-            </button>
+            <div role="gridcell" aria-expanded={ariaExpanded}>
+                <button
+                    ref={buttonRef}
+                    type="button"
+                    className={classNames(styles.header, {
+                        [styles.keyboardActive]: keyboardActive,
+                        [styles.firstHeader]: sectionIndex === 0,
+                        // If the section is collapsed and it's the last one
+                        [styles.lastHeader]: !isExpanded && isLastSection,
+                        [styles.unread]: isUnread,
+                        [styles.dragSource]: isDragSource,
+                        [styles.dropTarget]: isDraggingRoom,
+                        [styles.dropTargetBottom]: hasBottomBorder,
+                        [styles.dropTargetTop]: hasTopBorder,
+                    })}
+                    onClick={() => !isDragSource && vm.onClick()}
+                    onKeyDown={(e) => {
+                        if ((e.code === "ArrowRight" && !isExpanded) || (e.code === "ArrowLeft" && isExpanded)) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            vm.onClick();
+                        } else if (e.code === "ArrowRight" && isExpanded && roomCountInSection > 0) {
+                            // Move focus to the first room in the section
+                            e.preventDefault();
+                            e.stopPropagation();
+                            e.currentTarget.dispatchEvent(
+                                new KeyboardEvent("keydown", {
+                                    code: "ArrowDown",
+                                    key: "ArrowDown",
+                                    bubbles: true,
+                                }),
+                            );
+                        }
+                    }}
+                    aria-expanded={ariaExpanded}
+                    onFocus={onHeaderFocus}
+                    onBlur={onHeaderBlur}
+                    tabIndex={isFocused ? 0 : -1}
+                    aria-label={
+                        isUnread
+                            ? _t("room_list|section_header|toggle_unread", { section: title })
+                            : _t("room_list|section_header|toggle", { section: title })
+                    }
+                >
+                    <RoomListSectionHeaderContent vm={vm} />
+                </button>
+            </div>
         </div>
     );
 });
-
-interface MenuComponentProps {
-    vm: RoomListSectionHeaderViewModel;
-}
-
-/**
- *
- * Menu component for the section header.
- */
-
-function MenuComponent({ vm }: MenuComponentProps): JSX.Element {
-    const [open, setOpen] = useState(false);
-
-    return (
-        <Menu
-            open={open}
-            onOpenChange={setOpen}
-            title={_t("room_list|section_header|more_options")}
-            showTitle={false}
-            align="start"
-            trigger={
-                <IconButton
-                    className={styles.menu}
-                    tooltip={_t("room_list|section_header|more_options")}
-                    aria-label={_t("room_list|section_header|more_options")}
-                    size="24px"
-                    style={{ padding: "2px" }}
-                    color="var(--cpd-color-icon-primary)"
-                >
-                    <OverflowHorizontalIcon fill="var(--cpd-color-icon-primary)" />
-                </IconButton>
-            }
-        >
-            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
-            <div
-                // We don't want keyboard navigation events to bubble up to the ListView changing the focused item
-                onKeyDown={(e) => e.stopPropagation()}
-            >
-                <MenuItem
-                    hideChevron={true}
-                    Icon={EditIcon}
-                    label={_t("room_list|section_header|edit_section")}
-                    onSelect={() => vm.editSection()}
-                    onClick={(evt) => evt.stopPropagation()}
-                />
-                <MenuItem
-                    hideChevron={true}
-                    Icon={DeleteIcon}
-                    label={_t("room_list|section_header|remove_section")}
-                    onSelect={() => vm.removeSection()}
-                    onClick={(evt) => evt.stopPropagation()}
-                />
-            </div>
-        </Menu>
-    );
-}
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListStickySectionHeaderView.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListStickySectionHeaderView.tsx
new file mode 100644
index 0000000000..9e67b43a83
--- /dev/null
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/RoomListStickySectionHeaderView.tsx
@@ -0,0 +1,60 @@
+/*
+ * Copyright 2026 Element Creations 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, { memo, type JSX } from "react";
+import classNames from "classnames";
+
+import { useViewModel } from "../../../core/viewmodel";
+import styles from "./RoomListSectionHeaderView.module.css";
+import { type RoomListSectionHeaderViewModel } from "./RoomListSectionHeaderView";
+import { RoomListSectionHeaderContent } from "./RoomListSectionHeaderContent";
+
+/**
+ * Props for {@link RoomListStickySectionHeaderView}.
+ */
+export interface RoomListStickySectionHeaderViewProps {
+    /** The view model for the section currently pinned at the top of the list. */
+    vm: RoomListSectionHeaderViewModel;
+    /** Whether this is the first section, so it can sit flush with the top edge like the real header. */
+    isFirst: boolean;
+}
+
+/**
+ * A clone of {@link RoomListSectionHeaderView} used as the pinned "current section" overlay at the
+ * top of the virtualized room list.
+ *
+ * It is mouse-interactive — clicking toggles the section and hovering highlights it — but it is
+ * hidden from assistive technology (`aria-hidden`) and removed from the tab order (`tabIndex={-1}`).
+ * The real header rows inside the list remain the focusable, keyboard-navigable, screen-reader
+ * elements, so the overlay is a mouse convenience that never duplicates anything for AT. It reuses
+ * {@link RoomListSectionHeaderContent} so the chevron, title, notification decoration and section
+ * menu stay identical to the real header; it only omits the real header's drag-and-drop wiring.
+ */
+export const RoomListStickySectionHeaderView = memo(function RoomListStickySectionHeaderView({
+    vm,
+    isFirst,
+}: Readonly<RoomListStickySectionHeaderViewProps>): JSX.Element {
+    const { isExpanded, isUnread } = useViewModel(vm);
+
+    return (
+        <div className={styles.stickyBackground} aria-hidden={true}>
+            {/* `aria-expanded` is reused only to drive the chevron rotation via the shared CSS. */}
+            <button
+                type="button"
+                className={classNames(styles.header, {
+                    [styles.firstHeader]: isFirst,
+                    [styles.unread]: isUnread,
+                })}
+                aria-expanded={isExpanded}
+                onClick={vm.onClick}
+                tabIndex={-1}
+            >
+                <RoomListSectionHeaderContent vm={vm} />
+            </button>
+        </div>
+    );
+});
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/__snapshots__/RoomListSectionHeaderView.test.tsx.snap b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/__snapshots__/RoomListSectionHeaderView.test.tsx.snap
index c2eb9d9708..7b83023b0f 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/__snapshots__/RoomListSectionHeaderView.test.tsx.snap
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/__snapshots__/RoomListSectionHeaderView.test.tsx.snap
@@ -14,75 +14,79 @@ exports[`<RoomListSectionHeaderView /> stories > renders Default story 1`] = `
       aria-setsize="5"
       role="row"
     >
-      <button
+      <div
         aria-expanded="true"
-        aria-label="Toggle Favourites section"
-        class="RoomListSectionHeaderView-module_header"
         role="gridcell"
-        tabindex="-1"
-        type="button"
       >
-        <div
-          class="Flex-module_flex RoomListSectionHeaderView-module_container"
-          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+        <button
+          aria-expanded="true"
+          aria-label="Toggle Favourites section"
+          class="RoomListSectionHeaderView-module_header"
+          tabindex="-1"
+          type="button"
         >
           <div
-            class="Flex-module_flex"
-            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
-          >
-            <svg
-              class="RoomListSectionHeaderView-module_chevron"
-              fill="var(--cpd-color-icon-secondary)"
-              height="24px"
-              viewBox="0 0 24 24"
-              width="24px"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
-              />
-            </svg>
-            <span
-              class="RoomListSectionHeaderView-module_title"
-            >
-              Favourites
-            </span>
-          </div>
-          <button
-            aria-disabled="false"
-            aria-expanded="false"
-            aria-haspopup="menu"
-            aria-label="More options"
-            aria-labelledby="_r_2_"
-            class="_icon-button_1215g_8 RoomListSectionHeaderView-module_menu"
-            color="var(--cpd-color-icon-primary)"
-            data-kind="primary"
-            data-state="closed"
-            id="radix-_r_0_"
-            role="button"
-            style="--cpd-icon-button-size: 24px; padding: 2px;"
-            tabindex="0"
-            type="button"
+            class="Flex-module_flex RoomListSectionHeaderView-module_container"
+            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: space-between; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
           >
             <div
-              class="_indicator-icon_147l5_17"
-              style="--cpd-icon-button-size: 100%;"
+              class="Flex-module_flex"
+              style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-0-5x); --mx-flex-wrap: nowrap;"
             >
               <svg
-                fill="var(--cpd-color-icon-primary)"
-                height="1em"
+                class="RoomListSectionHeaderView-module_chevron"
+                fill="var(--cpd-color-icon-secondary)"
+                height="24px"
                 viewBox="0 0 24 24"
-                width="1em"
+                width="24px"
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                  d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
                 />
               </svg>
+              <span
+                class="RoomListSectionHeaderView-module_title"
+              >
+                Favourites
+              </span>
             </div>
-          </button>
-        </div>
-      </button>
+            <button
+              aria-disabled="false"
+              aria-expanded="false"
+              aria-haspopup="menu"
+              aria-label="More options"
+              aria-labelledby="react-use-id-1"
+              class="_icon-button_1215g_8 RoomListSectionHeaderView-module_menu"
+              color="var(--cpd-color-icon-primary)"
+              data-kind="primary"
+              data-state="closed"
+              id="radix-react-use-id-2"
+              role="button"
+              style="--cpd-icon-button-size: 24px; padding: 2px;"
+              tabindex="0"
+              type="button"
+            >
+              <div
+                class="_indicator-icon_147l5_17"
+                style="--cpd-icon-button-size: 100%;"
+              >
+                <svg
+                  fill="var(--cpd-color-icon-primary)"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+                  />
+                </svg>
+              </div>
+            </button>
+          </div>
+        </button>
+      </div>
     </div>
   </div>
 </div>
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/index.ts b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/index.ts
index 29d15c98bb..eef4eac089 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/index.ts
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/RoomListSectionHeaderView/index.ts
@@ -6,8 +6,12 @@
  */
 
 export { RoomListSectionHeaderView } from "./RoomListSectionHeaderView";
+export { RoomListSectionHeaderContent } from "./RoomListSectionHeaderContent";
+export type { RoomListSectionHeaderContentProps } from "./RoomListSectionHeaderContent";
 export type {
     RoomListSectionHeaderViewModel,
     RoomListSectionHeaderViewSnapshot,
     RoomListSectionHeaderActions,
 } from "./RoomListSectionHeaderView";
+export { RoomListStickySectionHeaderView } from "./RoomListStickySectionHeaderView";
+export type { RoomListStickySectionHeaderViewProps } from "./RoomListStickySectionHeaderView";
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.stories.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.stories.tsx
index b1c312cee0..17716a0a13 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.stories.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.stories.tsx
@@ -9,7 +9,7 @@ import React, { type JSX } from "react";
 import { fn } from "storybook/test";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import type { Room } from "./RoomListItemAccessibilityWrapper/RoomListItemView";
+import type { Room } from "./RoomListItemWrapper/RoomListItemView";
 import { VirtualizedRoomListView, type RoomListViewState } from "./VirtualizedRoomListView";
 import type { RoomListViewSnapshot, RoomListViewActions } from "../RoomListView";
 import { useMockedViewModel } from "../../core/viewmodel";
@@ -34,8 +34,15 @@ const RoomListWrapperImpl = ({
     getRoomItemViewModel,
     getSectionHeaderViewModel,
     updateVisibleRooms,
+    updateVisibleFold,
     closeToast,
+    scrollToUnreadActivity,
+    setScrollToIndex,
     renderAvatar: renderAvatarProp,
+    changeRoomSection,
+    changeSectionOrder,
+    onSectionDragStart,
+    onSectionDragEnd,
     ...rest
 }: RoomListStoryProps): JSX.Element => {
     const vm = useMockedViewModel(rest, {
@@ -45,7 +52,14 @@ const RoomListWrapperImpl = ({
         getRoomItemViewModel,
         getSectionHeaderViewModel,
         updateVisibleRooms,
+        updateVisibleFold,
         closeToast,
+        scrollToUnreadActivity,
+        setScrollToIndex,
+        changeRoomSection,
+        changeSectionOrder,
+        onSectionDragStart,
+        onSectionDragEnd,
     });
 
     return (
@@ -82,9 +96,16 @@ const meta = {
         getRoomItemViewModel: createGetRoomItemViewModel(mock10RoomsIds),
         getSectionHeaderViewModel: createGetSectionHeaderViewModel(mock10RoomsSections.map((section) => section.id)),
         updateVisibleRooms: fn(),
+        updateVisibleFold: fn(),
         renderAvatar,
         isFlatList: true,
         closeToast: fn(),
+        scrollToUnreadActivity: fn(),
+        setScrollToIndex: fn(),
+        changeRoomSection: fn(),
+        changeSectionOrder: fn(),
+        onSectionDragStart: fn(),
+        onSectionDragEnd: fn(),
     },
     parameters: {
         design: {
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.test.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.test.tsx
index f37302a129..995081d006 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.test.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.test.tsx
@@ -6,12 +6,14 @@
  */
 
 import React from "react";
-import { render, screen, fireEvent } from "@test-utils";
+import { render, screen, fireEvent, waitFor } from "@test-utils";
 import { VirtuosoMockContext } from "react-virtuoso";
 import { composeStories } from "@storybook/react-vite";
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, beforeEach } from "vitest";
+import userEvent from "@testing-library/user-event";
 
 import * as stories from "./VirtualizedRoomListView.stories";
+import { KEYBOARD_DRAG_OFFSET } from "./VirtualizedRoomListView";
 
 const { Default, Sections } = composeStories(stories);
 
@@ -65,6 +67,184 @@ describe("<VirtualizedRoomListView />", () => {
         expect(Default.args.updateVisibleRooms).toHaveBeenCalled();
     });
 
+    describe("updateVisibleRooms range reporting", () => {
+        beforeEach(() => {
+            (Default.args.updateVisibleRooms as any).mockClear?.();
+            (Sections.args.updateVisibleRooms as any).mockClear?.();
+        });
+
+        it("reports an exclusive end bound in flat mode", () => {
+            renderWithMockContext(<Default />);
+            // 10 rooms, all rendered by the mock viewport: Virtuoso reports the inclusive
+            // range [0, 9], which must reach the view model as the exclusive window [0, 10).
+            expect(Default.args.updateVisibleRooms).toHaveBeenLastCalledWith(0, 10);
+        });
+
+        it("maps entry-space indices to room indices in grouped mode", () => {
+            renderWithMockContext(<Sections />);
+            // 13 entries (3 section headers + 10 rooms) are all rendered: Virtuoso reports the
+            // inclusive entry range [0, 12], which must map back to the room window [0, 10).
+            expect(Sections.args.updateVisibleRooms).toHaveBeenLastCalledWith(0, 10);
+        });
+    });
+
+    describe("drag and drop", () => {
+        beforeEach(() => {
+            // Storybook fn() spies are shared across tests; vi.clearAllMocks() may not
+            // reach them, so explicitly reset call history for the spies under test.
+            (Sections.args.changeRoomSection as any).mockClear?.();
+            (Sections.args.changeSectionOrder as any).mockClear?.();
+            (Sections.args.onSectionDragStart as any).mockClear?.();
+            (Sections.args.onSectionDragEnd as any).mockClear?.();
+        });
+
+        it("should call changeRoomSection when drag ends successfully", async () => {
+            // KeyboardSensor: Space=start, each ArrowDown moves the drag position by
+            // KEYBOARD_DRAG_OFFSET px, Space=drop. We need to travel ~150px down from "General"
+            // (room 0) so the drag position enters the target section header's droppable area;
+            // derive the keypress count from the offset so this stays correct if the offset changes.
+            const presses = Math.round(150 / KEYBOARD_DRAG_OFFSET);
+            const user = userEvent.setup();
+            renderWithMockContext(<Sections />);
+
+            const roomButton = await screen.findByRole("button", { name: "Open room General" });
+            roomButton.focus();
+
+            await user.keyboard(" "); // start drag
+
+            for (let i = 0; i < presses; i++) {
+                await user.keyboard("{ArrowDown}");
+            }
+
+            await user.keyboard(" "); // drop onto current target
+
+            await waitFor(() => {
+                expect(Sections.args.changeRoomSection).toHaveBeenCalledWith("!room0:server", "low-priority");
+            });
+        });
+
+        it("does not reflect aria-pressed onto draggable room items or section headers", async () => {
+            // dnd-kit's built-in Accessibility plugin reflects aria-pressed onto the draggable
+            // <button>, which VoiceOver reads as "selected" when a keyboard drag starts. We drop
+            // that plugin, so the attribute must never appear (before or during a drag).
+            const user = userEvent.setup();
+            renderWithMockContext(<Sections />);
+
+            const roomButton = await screen.findByRole("button", { name: "Open room General" });
+            const sectionHeader = await screen.findByLabelText("Toggle Favourites section");
+            expect(roomButton).not.toHaveAttribute("aria-pressed");
+            expect(sectionHeader).not.toHaveAttribute("aria-pressed");
+
+            roomButton.focus();
+            await user.keyboard(" "); // start drag
+            expect(roomButton).not.toHaveAttribute("aria-pressed");
+            await user.keyboard("{Escape}"); // cancel drag
+        });
+
+        it("announces drag progress in a live region", async () => {
+            const user = userEvent.setup();
+            renderWithMockContext(<Sections />);
+
+            const status = screen.getByRole("status");
+            expect(status).toHaveTextContent("");
+
+            const roomButton = await screen.findByRole("button", { name: "Open room General" });
+            roomButton.focus();
+
+            await user.keyboard(" "); // start drag
+            await waitFor(() => expect(status).toHaveTextContent("Dragging General"));
+
+            await user.keyboard("{Escape}"); // cancel
+        });
+
+        it("exposes keyboard drag instructions referenced by draggable items", async () => {
+            renderWithMockContext(<Sections />);
+
+            // The plugin creates a hidden instructions element and wires draggables to it.
+            const instructions = screen.getByText(
+                "Press space to start or to stop dragging, arrow keys to move, and escape to cancel.",
+            );
+            const roomButton = await screen.findByRole("button", { name: "Open room General" });
+            await waitFor(() => expect(roomButton).toHaveAttribute("aria-describedby", instructions.id));
+        });
+
+        it("should reorder sections via keyboard", async () => {
+            // KeyboardSensor: Space=start, each ArrowDown moves the drag position by
+            // KEYBOARD_DRAG_OFFSET px, Space=drop. We need to travel ~200px down from the
+            // "Favourites" section header to land on the "low-priority" section header — a valid
+            // section reorder; derive the keypress count from the offset so this stays correct
+            // if the offset changes.
+            const presses = Math.round(200 / KEYBOARD_DRAG_OFFSET);
+            const user = userEvent.setup();
+            renderWithMockContext(<Sections />);
+
+            const favouritesHeader = await screen.findByLabelText("Toggle Favourites section");
+            favouritesHeader.focus();
+
+            await user.keyboard(" "); // start drag
+
+            for (let i = 0; i < presses; i++) {
+                await user.keyboard("{ArrowDown}");
+            }
+
+            await user.keyboard(" "); // drop
+
+            await waitFor(() => {
+                expect(Sections.args.changeSectionOrder).toHaveBeenCalledWith("favourites", "low-priority");
+            });
+            expect(Sections.args.onSectionDragStart).toHaveBeenCalled();
+            expect(Sections.args.onSectionDragEnd).toHaveBeenCalled();
+        });
+    });
+
+    describe("pointer drag activation", () => {
+        beforeEach(() => {
+            (Sections.args.changeRoomSection as any).mockClear?.();
+        });
+
+        it("does not start a drag when a finger moves (touch scrolling the list)", async () => {
+            // For touch, dragging only activates after a 250ms hold; moving the finger first aborts
+            // it so the list scrolls instead of dragging a room. Simulate a finger press that moves
+            // immediately (as when scrolling) and assert no drag ever starts.
+            const user = userEvent.setup();
+            renderWithMockContext(<Sections />);
+
+            const status = screen.getByRole("status");
+            const roomButton = await screen.findByRole("button", { name: "Open room General" });
+
+            await user.pointer([
+                { keys: "[TouchA>]", target: roomButton, coords: { x: 20, y: 20 } },
+                { pointerName: "TouchA", coords: { x: 20, y: 140 } },
+                { keys: "[/TouchA]" },
+            ]);
+
+            expect(status).toHaveTextContent("");
+            expect(Sections.args.changeRoomSection).not.toHaveBeenCalled();
+        });
+
+        it("starts a drag when the mouse moves past the activation distance", async () => {
+            // For mouse, dragging activates as soon as the pointer moves past 5px, so the same
+            // press-and-move gesture that scrolls on touch drags the room into another section.
+            const user = userEvent.setup();
+            renderWithMockContext(<Sections />);
+
+            const status = screen.getByRole("status");
+            const roomButton = await screen.findByRole("button", { name: "Open room General" });
+
+            await user.pointer([
+                { keys: "[MouseLeft>]", target: roomButton, coords: { x: 20, y: 20 } },
+                { coords: { x: 20, y: 140 } },
+            ]);
+
+            // The drag has activated: the live region reflects the ongoing drag.
+            await waitFor(() => expect(status).toHaveTextContent("General"));
+
+            await user.pointer({ keys: "[/MouseLeft]" }); // release to drop
+
+            await waitFor(() => expect(Sections.args.changeRoomSection).toHaveBeenCalled());
+        });
+    });
+
     describe("scrollToSectionTag", () => {
         it("skips scroll when scrollToSectionTag does not match any section", () => {
             const roomListState = {
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx
index 2cf7ce76c7..13ae53f6bd 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/VirtualizedRoomListView.tsx
@@ -5,23 +5,30 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { useCallback, useLayoutEffect, useMemo, useRef, type JSX, type ReactNode } from "react";
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, type JSX, type ReactNode } from "react";
 import { type ScrollIntoViewLocation, type VirtuosoHandle } from "react-virtuoso";
 import { isEqual } from "lodash";
+import { DragDropProvider, DragOverlay, useDragOperation } from "@dnd-kit/react";
+import { KeyboardSensor, PointerActivationConstraints, PointerSensor } from "@dnd-kit/dom";
 
-import { type Room } from "./RoomListItemAccessibilityWrapper/RoomListItemView";
+import { type Room } from "./RoomListItemWrapper/RoomListItemView";
 import { useViewModel } from "../../core/viewmodel";
-import { _t } from "../../core/i18n/i18n";
 import {
     FlatVirtualizedList,
     getContainerAccessibleProps,
     type VirtualizedListContext,
+    GroupedVirtualizedList,
+    type GroupedVirtualizedListProps,
 } from "../../core/VirtualizedList";
 import type { RoomListViewSnapshot, RoomListViewModel } from "../RoomListView";
-import { GroupedVirtualizedList } from "../../core/VirtualizedList";
-import { RoomListSectionHeaderView } from "./RoomListSectionHeaderView";
-import { RoomListItemAccessibilityWrapper } from "./RoomListItemAccessibilityWrapper";
+import { RoomListSectionHeaderView, RoomListStickySectionHeaderView } from "./RoomListSectionHeaderView";
+import { RoomListSectionHeaderDragOverlayView } from "./RoomListSectionHeaderDragOverlayView";
+import { RoomListItemWrapper } from "./RoomListItemWrapper";
+import { RoomListItemDragOverlayView } from "./RoomListItemDragOverlayView";
+import { isSectionDragData, type RoomListDragData } from "./dragAndDrop";
+import { useRoomListAccessibilityPlugin } from "./RoomListAccessibilityPlugin";
 import styles from "./VirtualizedRoomListView.module.css";
+import { useI18n } from "../../core/i18n/i18nContext";
 
 /**
  * Filter key type - opaque string type for filter identifiers
@@ -66,6 +73,11 @@ export interface VirtualizedRoomListViewProps {
 /** Height of a single room list item in pixels (44px item + 8px padding bottom) */
 const ROOM_LIST_ITEM_HEIGHT = 52;
 
+/**
+ * Number of pixels the keyboard sensor moves the dragged element per arrow keypress.
+ */
+export const KEYBOARD_DRAG_OFFSET = 17;
+
 /**
  * Type for context used in ListView
  */
@@ -109,6 +121,7 @@ const EXTENDED_VIEWPORT_HEIGHT = 25 * ROOM_LIST_ITEM_HEIGHT;
  * ```
  */
 export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: VirtualizedRoomListViewProps): JSX.Element {
+    const { translate: _t } = useI18n();
     const snapshot = useViewModel(vm);
     const { roomListState, sections, isFlatList } = snapshot;
     const activeRoomIndex = roomListState.activeRoomIndex;
@@ -119,6 +132,102 @@ export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: Virtual
     const setVirtuosoHandle = useCallback((handle: VirtuosoHandle | null) => {
         virtuosoHandleRef.current = handle;
     }, []);
+
+    // --- "Unread activity" toast fold tracking ---
+    // Virtuoso renders a large overscan buffer (EXTENDED_VIEWPORT_HEIGHT) below the
+    // visible area, so its reported range extends well past the actual fold. To show
+    // the toast as soon as an unread room scrolls just below the fold (rather than only
+    // once it leaves the overscan buffer), we measure the genuinely-visible last item
+    // from the scroller geometry and report it separately to the view model.
+    const foldScrollerRef = useRef<HTMLElement | null>(null);
+    const foldObserverRef = useRef<IntersectionObserver | null>(null);
+    // Observed item elements → whether each is currently on screen (intersecting). The keys
+    // are what we've asked the observer to watch; the values are their latest visibility.
+    const itemVisibilityRef = useRef<Map<Element, boolean>>(new Map());
+    const foldSyncRafRef = useRef<number | null>(null);
+    const lastReportedFoldIndex = useRef<number>(-1);
+
+    // Report the highest-index currently-visible item as the fold. Indices are read from
+    // each element's live data-item-index attribute (rather than a captured value) because
+    // Virtuoso recycles/reorders item DOM nodes as the list scrolls.
+    const reportFold = useCallback(() => {
+        let fold = -1;
+        for (const [el, isVisible] of itemVisibilityRef.current) {
+            if (!isVisible) continue;
+            const index = Number((el as HTMLElement).dataset.itemIndex);
+            if (Number.isFinite(index) && index > fold) fold = index;
+        }
+        if (fold !== lastReportedFoldIndex.current) {
+            lastReportedFoldIndex.current = fold;
+            vm.updateVisibleFold(fold);
+        }
+    }, [vm]);
+
+    // IntersectionObserver callback: track which item elements are genuinely on screen
+    // (excluding the overscan buffer). Fires as the user scrolls or the viewport resizes,
+    // with no per-frame layout reads.
+    const onItemIntersection = useCallback(
+        (entries: IntersectionObserverEntry[]) => {
+            for (const entry of entries) {
+                itemVisibilityRef.current.set(entry.target, entry.isIntersecting);
+            }
+            reportFold();
+        },
+        [reportFold],
+    );
+
+    // Observe newly-rendered item elements and release ones Virtuoso has recycled out of the
+    // DOM. The observer itself handles visibility as the user scrolls/resizes, so this only
+    // needs running when the rendered set changes (rangeChanged) or on first attach.
+    const syncObservedItems = useCallback(() => {
+        const scroller = foldScrollerRef.current;
+        const observer = foldObserverRef.current;
+        if (!scroller || !observer) return;
+        const current = new Set<Element>(scroller.querySelectorAll("[data-item-index]"));
+        for (const el of current) {
+            if (!itemVisibilityRef.current.has(el)) {
+                observer.observe(el);
+                itemVisibilityRef.current.set(el, false); // observed, not yet known visible
+            }
+        }
+        for (const el of itemVisibilityRef.current.keys()) {
+            if (!current.has(el)) {
+                observer.unobserve(el);
+                itemVisibilityRef.current.delete(el);
+            }
+        }
+        reportFold();
+    }, [reportFold]);
+
+    const scheduleSyncObservedItems = useCallback(() => {
+        if (foldSyncRafRef.current !== null) return;
+        foldSyncRafRef.current = requestAnimationFrame(() => {
+            foldSyncRafRef.current = null;
+            syncObservedItems();
+        });
+    }, [syncObservedItems]);
+
+    // Callback ref for Virtuoso's scroller element: (re)create an IntersectionObserver rooted
+    // at it. The initial sync is covered by the rangeChanged Virtuoso fires on mount.
+    const setScroller = useCallback(
+        (element: HTMLElement | Window | null) => {
+            foldObserverRef.current?.disconnect();
+            foldObserverRef.current = null;
+            itemVisibilityRef.current.clear();
+            lastReportedFoldIndex.current = -1;
+            if (foldSyncRafRef.current !== null) {
+                cancelAnimationFrame(foldSyncRafRef.current);
+                foldSyncRafRef.current = null;
+            }
+            const scroller = element instanceof HTMLElement ? element : null;
+            foldScrollerRef.current = scroller;
+            if (scroller) {
+                foldObserverRef.current = new IntersectionObserver(onItemIntersection, { root: scroller });
+                scheduleSyncObservedItems();
+            }
+        },
+        [onItemIntersection, scheduleSyncObservedItems],
+    );
     const roomIds = useMemo(() => sections.flatMap((section) => section.roomIds), [sections]);
     const roomCount = roomIds.length;
     const sectionCount = sections.length;
@@ -133,17 +242,69 @@ export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: Virtual
         [sections],
     );
 
+    // In a grouped list, Virtuoso's range counts section headers as entries, so entry indices
+    // don't match room indices. This maps an inclusive entry range to a [start, end) room-index
+    // range. A header entry maps to the section boundary: "from this section's first room" as a
+    // start, "up to the previous section's last room" as an end.
+    const mapEntryRangeToRoomRange = useCallback(
+        (startEntry: number, endEntry: number): [start: number, endExclusive: number] => {
+            let start: number | undefined;
+            let end: number | undefined;
+            let headerEntry = 0; // entry index of the current section's header
+            let roomsBefore = 0; // number of rooms in the sections above the current one
+            for (const section of sections) {
+                // Last entry of this section: the header entry followed by one entry per room
+                const lastEntry = headerEntry + section.roomIds.length;
+
+                // The range starts in this section: on the header (-1 clamped to the first room)
+                // or on one of its rooms
+                if (start === undefined && startEntry <= lastEntry) {
+                    start = roomsBefore + Math.max(0, startEntry - headerEntry - 1);
+                }
+
+                // The range ends in this section: on the header (0 rooms of this section
+                // included) or on one of its rooms (exclusive bound, hence no -1)
+                if (end === undefined && endEntry <= lastEntry) {
+                    end = roomsBefore + Math.max(0, endEntry - headerEntry);
+                }
+
+                // Both bounds found, no need to look at the remaining sections
+                if (start !== undefined && end !== undefined) break;
+
+                // Move to the next section
+                headerEntry = lastEntry + 1;
+                roomsBefore += section.roomIds.length;
+            }
+            // The range can transiently point past the sections when the list shrinks before
+            // Virtuoso reports the new range; fall back to the widest valid window.
+            return [start ?? 0, end ?? roomsBefore];
+        },
+        [sections],
+    );
+
     /**
      * Callback when the visible range changes
      * Notifies the view model which rooms are visible
      */
     const rangeChanged = useCallback(
         (range: { startIndex: number; endIndex: number }) => {
-            vm.updateVisibleRooms(range.startIndex, range.endIndex);
+            // Virtuoso's endIndex is inclusive; updateVisibleRooms takes an exclusive end.
+            if (isFlatList) {
+                vm.updateVisibleRooms(range.startIndex, range.endIndex + 1);
+            } else {
+                const [start, end] = mapEntryRangeToRoomRange(range.startIndex, range.endIndex);
+                vm.updateVisibleRooms(start, end);
+            }
+            // The rendered set changed; (un)observe items so the fold stays accurate.
+            scheduleSyncObservedItems();
         },
-        [vm],
+        [vm, scheduleSyncObservedItems, isFlatList, mapEntryRangeToRoomRange],
     );
 
+    // Builds the accessibility plugin (live-region announcements) for keyboard/pointer drags,
+    // replacing dnd-kit's built-in Accessibility plugin.
+    const a11yPlugins = useRoomListAccessibilityPlugin(vm);
+
     /**
      * Get the item component for a specific index
      * Gets the room's view model and passes it to RoomListItemView
@@ -181,7 +342,7 @@ export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: Virtual
             const isLastItem = Boolean((isFlatList || isInLastSection) && index === roomCount - 1);
 
             return (
-                <RoomListItemAccessibilityWrapper
+                <RoomListItemWrapper
                     key={roomId}
                     vm={roomItemVM}
                     renderAvatar={renderAvatar}
@@ -261,6 +422,8 @@ export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: Virtual
 
             return (
                 <RoomListSectionHeaderView
+                    // Stable key per section avoids a @dnd-kit registration race when a new section is inserted.
+                    key={headerId}
                     vm={sectionHeaderVM}
                     isFocused={isFocused}
                     onFocus={onFocus}
@@ -274,6 +437,19 @@ export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: Virtual
         [],
     );
 
+    /**
+     * Render the pinned "current section" overlay header for the grouped list.
+     * Presentational only — the real header rows in the list stay the accessible, focusable
+     * controls. See {@link RoomListStickySectionHeaderView}.
+     */
+    const renderStickyHeader = useCallback(
+        (groupIndex: number, headerId: string, context: VirtualizedListContext<Context>): ReactNode => {
+            const sectionHeaderVM = context.context.vm.getSectionHeaderViewModel(headerId);
+            return <RoomListStickySectionHeaderView key={headerId} vm={sectionHeaderVM} isFirst={groupIndex === 0} />;
+        },
+        [],
+    );
+
     /**
      * Get the key for a room item
      * Since we're using virtualization, items are always room ID strings
@@ -315,7 +491,10 @@ export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: Virtual
      */
     const scrollIntoViewOnChange = useCallback(
         (params: {
-            context: VirtualizedListContext<{ spaceId: string; filterKeys: FilterKey[] | undefined }>;
+            context: VirtualizedListContext<{
+                spaceId: string;
+                filterKeys: FilterKey[] | undefined;
+            }>;
         }): ScrollIntoViewLocation | null | undefined | false => {
             const { spaceId, filterKeys } = params.context.context;
             const shouldScrollIndexIntoView =
@@ -342,9 +521,24 @@ export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: Virtual
         const sectionIndex = sections.findIndex((s) => s.id === scrollToSectionTag);
         if (sectionIndex === -1) return;
         const flatIndex = sections.slice(0, sectionIndex).reduce((acc, s) => acc + s.roomIds.length + 1, 0);
-        virtuosoHandleRef.current?.scrollIntoView({ index: flatIndex, align: "start", behavior: "auto" });
+        virtuosoHandleRef.current?.scrollIntoView({
+            index: flatIndex,
+            align: "start",
+            behavior: "auto",
+        });
     }, [scrollToSectionTag, sections]);
 
+    // Give the view model an imperative handle to scroll an item index into view (e.g. when the
+    // user clicks the "unread activity" toast, which is rendered by a sibling component). The view
+    // owns the scroll handle, so it registers the function here rather than the model pushing
+    // scroll requests through its snapshot.
+    useEffect(() => {
+        vm.setScrollToIndex((index) =>
+            virtuosoHandleRef.current?.scrollIntoView({ index, align: "center", behavior: "auto" }),
+        );
+        return () => vm.setScrollToIndex(undefined);
+    }, [vm]);
+
     const isItemFocusable = useCallback(() => true, []);
     const isGroupHeaderFocusable = useCallback(() => true, []);
     const increaseViewportBy = useMemo(
@@ -366,9 +560,10 @@ export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: Virtual
         getItemKey,
         isItemFocusable,
         rangeChanged,
+        "scrollerRef": setScroller,
         onKeyDown,
         increaseViewportBy,
-        className: styles.roomList,
+        "className": styles.roomList,
     };
 
     if (isFlatList) {
@@ -376,6 +571,7 @@ export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: Virtual
             <FlatVirtualizedList
                 {...commonProps}
                 {...getContainerAccessibleProps("listbox")}
+                scrollHandleRef={setVirtuosoHandle}
                 items={roomIds}
                 getItemComponent={getItemComponentForFlatList}
             />
@@ -383,15 +579,106 @@ export function VirtualizedRoomListView({ vm, renderAvatar, onKeyDown }: Virtual
     }
 
     return (
-        <GroupedVirtualizedList<string, string, Context>
-            {...commonProps}
-            {...getContainerAccessibleProps("treegrid", totalCount)}
-            scrollHandleRef={setVirtuosoHandle}
-            groups={groups}
-            getHeaderKey={getHeaderKey}
-            getGroupHeaderComponent={getGroupHeaderComponent}
-            getItemComponent={getItemComponentForGroupedList}
-            isGroupHeaderFocusable={isGroupHeaderFocusable}
-        />
+        <DragDropProvider<RoomListDragData>
+            onDragStart={(event) => {
+                const { source } = event.operation;
+                // Changing the state of sections (collapsed/expanded) while dragging a section header causes a double readback for the a11y announcement.
+                if (isSectionDragData(source?.data)) {
+                    vm.onSectionDragStart();
+                }
+            }}
+            onDragEnd={(event) => {
+                const { source, target } = event.operation;
+                if (isSectionDragData(source?.data)) {
+                    vm.onSectionDragEnd();
+                }
+                if (event.canceled || !source || !target) return;
+                if (isSectionDragData(source.data)) {
+                    vm.changeSectionOrder(String(source.id), String(target.id));
+                } else {
+                    vm.changeRoomSection(String(source.id), String(target.id));
+                }
+            }}
+            sensors={[
+                // By default, PointerSensor activates dragging immediately on mouse pointer down, which interferes
+                // with clicking a room and keyboard navigation, so for mouse/pen we require a small drag distance
+                // before a drag starts (allowing a plain click without dragging).
+                // For touch, a Delay constraint that aborts the drag if the finger moves before the delay elapses is used to avoid accidental drags when scrolling the list with a finger.
+                PointerSensor.configure({
+                    activationConstraints(event) {
+                        if (event.pointerType === "touch") {
+                            return [new PointerActivationConstraints.Delay({ value: 250, tolerance: 5 })];
+                        }
+                        return [new PointerActivationConstraints.Distance({ value: 5 })];
+                    },
+                }),
+                // By default, the KeyboardSensor uses both space and enter to start dragging, which interferes with the keyboard enter shortcut to open a room.
+                KeyboardSensor.configure({
+                    // The default 10px-per-keypress offset makes keyboard dragging feel sluggish.
+                    offset: KEYBOARD_DRAG_OFFSET,
+                    keyboardCodes: {
+                        start: ["Space"],
+                        cancel: ["Escape"],
+                        end: ["Space"],
+                        up: ["ArrowUp"],
+                        down: ["ArrowDown"],
+                        left: ["ArrowLeft"],
+                        right: ["ArrowRight"],
+                    },
+                }),
+            ]}
+            plugins={a11yPlugins}
+        >
+            <DragOverlay dropAnimation={null}>
+                <DragOverlayContent vm={vm} renderAvatar={renderAvatar} />
+            </DragOverlay>
+            <GroupedRoomList
+                {...commonProps}
+                {...getContainerAccessibleProps("treegrid", totalCount)}
+                scrollHandleRef={setVirtuosoHandle}
+                groups={groups}
+                getHeaderKey={getHeaderKey}
+                getGroupHeaderComponent={getGroupHeaderComponent}
+                getItemComponent={getItemComponentForGroupedList}
+                isGroupHeaderFocusable={isGroupHeaderFocusable}
+                renderStickyHeader={renderStickyHeader}
+            />
+        </DragDropProvider>
     );
 }
+
+/**
+ * Inner component rendered inside DragDropProvider that renders the grouped virtualized list.
+ * Uses useDragOperation to detect active keyboard drags and disable the list's own keyboard
+ * navigation shortcuts while a drag is in progress, preventing unwanted list scrolling.
+ */
+function GroupedRoomList(props: GroupedVirtualizedListProps<string, string, Context>): JSX.Element {
+    const { source } = useDragOperation<RoomListDragData>();
+
+    return <GroupedVirtualizedList<string, string, Context> {...props} disableKeyboardNavigation={source !== null} />;
+}
+
+interface DragOverlayContentProps {
+    /**  The room list view model */
+    vm: RoomListViewModel;
+    /** Function to render the room avatar */
+    renderAvatar: (room: Room) => ReactNode;
+}
+
+/**
+ * Component rendered in the drag overlay when dragging a room item. Renders a copy of the dragged item to avoid dragging the actual element out of virtualization.
+ */
+function DragOverlayContent({ vm, renderAvatar }: DragOverlayContentProps): JSX.Element | null {
+    const { source } = useDragOperation<RoomListDragData>();
+    if (!source) return null;
+
+    if (isSectionDragData(source.data)) {
+        const sectionHeaderVM = vm.getSectionHeaderViewModel(String(source.id));
+        return <RoomListSectionHeaderDragOverlayView vm={sectionHeaderVM} />;
+    }
+
+    const itemVm = vm.getRoomItemViewModel(String(source.id));
+    if (!itemVm) return null;
+
+    return <RoomListItemDragOverlayView vm={itemVm} renderAvatar={renderAvatar} />;
+}
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap b/packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap
index 03e092feff..14c320cfb2 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/__snapshots__/VirtualizedRoomListView.test.tsx.snap
@@ -85,11 +85,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         aria-expanded="false"
                         aria-haspopup="menu"
                         aria-label="More Options"
-                        aria-labelledby="_r_2_"
+                        aria-labelledby="react-use-id-1"
                         class="_icon-button_1215g_8"
                         data-kind="primary"
                         data-state="closed"
-                        id="radix-_r_0_"
+                        id="radix-react-use-id-2"
                         role="button"
                         style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
@@ -117,11 +117,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         aria-expanded="false"
                         aria-haspopup="menu"
                         aria-label="Notification options"
-                        aria-labelledby="_r_9_"
+                        aria-labelledby="react-use-id-3"
                         class="_icon-button_1215g_8"
                         data-kind="primary"
                         data-state="closed"
-                        id="radix-_r_7_"
+                        id="radix-react-use-id-4"
                         role="button"
                         style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
@@ -228,11 +228,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         aria-expanded="false"
                         aria-haspopup="menu"
                         aria-label="More Options"
-                        aria-labelledby="_r_g_"
+                        aria-labelledby="react-use-id-5"
                         class="_icon-button_1215g_8"
                         data-kind="primary"
                         data-state="closed"
-                        id="radix-_r_e_"
+                        id="radix-react-use-id-6"
                         role="button"
                         style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
@@ -260,11 +260,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         aria-expanded="false"
                         aria-haspopup="menu"
                         aria-label="Notification options"
-                        aria-labelledby="_r_n_"
+                        aria-labelledby="react-use-id-7"
                         class="_icon-button_1215g_8"
                         data-kind="primary"
                         data-state="closed"
-                        id="radix-_r_l_"
+                        id="radix-react-use-id-8"
                         role="button"
                         style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
@@ -356,11 +356,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         aria-expanded="false"
                         aria-haspopup="menu"
                         aria-label="More Options"
-                        aria-labelledby="_r_u_"
+                        aria-labelledby="react-use-id-9"
                         class="_icon-button_1215g_8"
                         data-kind="primary"
                         data-state="closed"
-                        id="radix-_r_s_"
+                        id="radix-react-use-id-10"
                         role="button"
                         style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
@@ -388,11 +388,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         aria-expanded="false"
                         aria-haspopup="menu"
                         aria-label="Notification options"
-                        aria-labelledby="_r_15_"
+                        aria-labelledby="react-use-id-11"
                         class="_icon-button_1215g_8"
                         data-kind="primary"
                         data-state="closed"
-                        id="radix-_r_13_"
+                        id="radix-react-use-id-12"
                         role="button"
                         style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
@@ -478,11 +478,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         aria-expanded="false"
                         aria-haspopup="menu"
                         aria-label="More Options"
-                        aria-labelledby="_r_1c_"
+                        aria-labelledby="react-use-id-13"
                         class="_icon-button_1215g_8"
                         data-kind="primary"
                         data-state="closed"
-                        id="radix-_r_1a_"
+                        id="radix-react-use-id-14"
                         role="button"
                         style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
@@ -510,11 +510,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         aria-expanded="false"
                         aria-haspopup="menu"
                         aria-label="Notification options"
-                        aria-labelledby="_r_1j_"
+                        aria-labelledby="react-use-id-15"
                         class="_icon-button_1215g_8"
                         data-kind="primary"
                         data-state="closed"
-                        id="radix-_r_1h_"
+                        id="radix-react-use-id-16"
                         role="button"
                         style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
@@ -606,11 +606,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         aria-expanded="false"
                         aria-haspopup="menu"
                         aria-label="More Options"
-                        aria-labelledby="_r_1q_"
+                        aria-labelledby="react-use-id-17"
                         class="_icon-button_1215g_8"
                         data-kind="primary"
                         data-state="closed"
-                        id="radix-_r_1o_"
+                        id="radix-react-use-id-18"
                         role="button"
                         style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
@@ -638,11 +638,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         aria-expanded="false"
                         aria-haspopup="menu"
                         aria-label="Notification options"
-                        aria-labelledby="_r_21_"
+                        aria-labelledby="react-use-id-19"
                         class="_icon-button_1215g_8"
                         data-kind="primary"
                         data-state="closed"
-                        id="radix-_r_1v_"
+                        id="radix-react-use-id-20"
                         role="button"
                         style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
@@ -728,11 +728,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         aria-expanded="false"
                         aria-haspopup="menu"
                         aria-label="More Options"
-                        aria-labelledby="_r_28_"
+                        aria-labelledby="react-use-id-21"
                         class="_icon-button_1215g_8"
                         data-kind="primary"
                         data-state="closed"
-                        id="radix-_r_26_"
+                        id="radix-react-use-id-22"
                         role="button"
                         style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
@@ -760,11 +760,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         aria-expanded="false"
                         aria-haspopup="menu"
                         aria-label="Notification options"
-                        aria-labelledby="_r_2f_"
+                        aria-labelledby="react-use-id-23"
                         class="_icon-button_1215g_8"
                         data-kind="primary"
                         data-state="closed"
-                        id="radix-_r_2d_"
+                        id="radix-react-use-id-24"
                         role="button"
                         style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
@@ -879,11 +879,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         aria-expanded="false"
                         aria-haspopup="menu"
                         aria-label="More Options"
-                        aria-labelledby="_r_2m_"
+                        aria-labelledby="react-use-id-25"
                         class="_icon-button_1215g_8"
                         data-kind="primary"
                         data-state="closed"
-                        id="radix-_r_2k_"
+                        id="radix-react-use-id-26"
                         role="button"
                         style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
@@ -911,11 +911,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         aria-expanded="false"
                         aria-haspopup="menu"
                         aria-label="Notification options"
-                        aria-labelledby="_r_2t_"
+                        aria-labelledby="react-use-id-27"
                         class="_icon-button_1215g_8"
                         data-kind="primary"
                         data-state="closed"
-                        id="radix-_r_2r_"
+                        id="radix-react-use-id-28"
                         role="button"
                         style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
@@ -1001,11 +1001,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         aria-expanded="false"
                         aria-haspopup="menu"
                         aria-label="More Options"
-                        aria-labelledby="_r_34_"
+                        aria-labelledby="react-use-id-29"
                         class="_icon-button_1215g_8"
                         data-kind="primary"
                         data-state="closed"
-                        id="radix-_r_32_"
+                        id="radix-react-use-id-30"
                         role="button"
                         style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
@@ -1033,11 +1033,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         aria-expanded="false"
                         aria-haspopup="menu"
                         aria-label="Notification options"
-                        aria-labelledby="_r_3b_"
+                        aria-labelledby="react-use-id-31"
                         class="_icon-button_1215g_8"
                         data-kind="primary"
                         data-state="closed"
-                        id="radix-_r_39_"
+                        id="radix-react-use-id-32"
                         role="button"
                         style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
@@ -1129,11 +1129,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         aria-expanded="false"
                         aria-haspopup="menu"
                         aria-label="More Options"
-                        aria-labelledby="_r_3i_"
+                        aria-labelledby="react-use-id-33"
                         class="_icon-button_1215g_8"
                         data-kind="primary"
                         data-state="closed"
-                        id="radix-_r_3g_"
+                        id="radix-react-use-id-34"
                         role="button"
                         style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
@@ -1161,11 +1161,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         aria-expanded="false"
                         aria-haspopup="menu"
                         aria-label="Notification options"
-                        aria-labelledby="_r_3p_"
+                        aria-labelledby="react-use-id-35"
                         class="_icon-button_1215g_8"
                         data-kind="primary"
                         data-state="closed"
-                        id="radix-_r_3n_"
+                        id="radix-react-use-id-36"
                         role="button"
                         style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
@@ -1251,11 +1251,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         aria-expanded="false"
                         aria-haspopup="menu"
                         aria-label="More Options"
-                        aria-labelledby="_r_40_"
+                        aria-labelledby="react-use-id-37"
                         class="_icon-button_1215g_8"
                         data-kind="primary"
                         data-state="closed"
-                        id="radix-_r_3u_"
+                        id="radix-react-use-id-38"
                         role="button"
                         style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
@@ -1283,11 +1283,11 @@ exports[`<VirtualizedRoomListView /> > renders Default story 1`] = `
                         aria-expanded="false"
                         aria-haspopup="menu"
                         aria-label="Notification options"
-                        aria-labelledby="_r_47_"
+                        aria-labelledby="react-use-id-39"
                         class="_icon-button_1215g_8"
                         data-kind="primary"
                         data-state="closed"
-                        id="radix-_r_45_"
+                        id="radix-react-use-id-40"
                         role="button"
                         style="--cpd-icon-button-size: 24px; padding: 2px;"
                         tabindex="0"
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/dragAndDrop.ts b/packages/shared-components/src/room-list/VirtualizedRoomListView/dragAndDrop.ts
new file mode 100644
index 0000000000..41aa1c26d0
--- /dev/null
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/dragAndDrop.ts
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+/** Drag payload for a section header. */
+export type SectionDragData = { type: "section"; index: number };
+/** Drag payload for a room item. */
+export type RoomDragData = { type: "room" };
+/** Discriminated union of all drag payloads in the room list. */
+export type RoomListDragData = SectionDragData | RoomDragData;
+
+/**
+ * Type guard: true when the drag source is a section header. Narrows to {@link SectionDragData}.
+ */
+export function isSectionDragData(data: RoomListDragData | undefined): data is SectionDragData {
+    return data?.type === "section";
+}
diff --git a/packages/shared-components/src/room-list/VirtualizedRoomListView/index.ts b/packages/shared-components/src/room-list/VirtualizedRoomListView/index.ts
index fc310f6cb5..9becdbf111 100644
--- a/packages/shared-components/src/room-list/VirtualizedRoomListView/index.ts
+++ b/packages/shared-components/src/room-list/VirtualizedRoomListView/index.ts
@@ -8,4 +8,5 @@
 export { VirtualizedRoomListView } from "./VirtualizedRoomListView";
 export type { VirtualizedRoomListViewProps, RoomListViewState, FilterKey } from "./VirtualizedRoomListView";
 export * from "./RoomListSectionHeaderView";
-export * from "./RoomListItemAccessibilityWrapper";
+export * from "./RoomListItemWrapper";
+export * from "./RoomListItemDragOverlayView";
diff --git a/packages/shared-components/src/room-list/story-mocks.tsx b/packages/shared-components/src/room-list/story-mocks.tsx
index 5d2e615859..4004fea224 100644
--- a/packages/shared-components/src/room-list/story-mocks.tsx
+++ b/packages/shared-components/src/room-list/story-mocks.tsx
@@ -13,7 +13,7 @@ import {
     type RoomListItemViewModel,
     type RoomListItemViewSnapshot,
     RoomNotifState,
-} from "./VirtualizedRoomListView/RoomListItemAccessibilityWrapper/RoomListItemView";
+} from "./VirtualizedRoomListView/RoomListItemWrapper/RoomListItemView";
 import { type RoomListSectionHeaderViewModel } from "./VirtualizedRoomListView/RoomListSectionHeaderView";
 import { MockViewModel } from "../core/viewmodel";
 
@@ -46,7 +46,6 @@ export const mockAvatar = (name: string): React.ReactElement => (
  */
 export const renderAvatar = (room: Room): React.ReactElement => {
     // Cast to any to access properties - in real usage, the room object from the SDK will have these
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return mockAvatar((room as any)?.name || "Room");
 };
 
@@ -105,8 +104,8 @@ export const createMockRoomSnapshot = (id: string, name: string, index: number):
     canMarkAsRead: false,
     canMarkAsUnread: true,
     roomNotifState: RoomNotifState.AllMessages,
-    canMoveToSection: true,
     sections: [],
+    areSectionsEnabled: true,
 });
 
 export function createMockRoomItemViewModel(roomId: string, name: string, index: number): RoomListItemViewModel {
@@ -125,6 +124,7 @@ export function createMockRoomItemViewModel(roomId: string, name: string, index:
         onSetRoomNotifState: fn(),
         onCreateSection: fn(),
         onToggleSection: fn(),
+        onRemoveFromSection: fn(),
     };
 }
 
@@ -150,6 +150,9 @@ export const createGetSectionHeaderViewModel = (
             id: sectionId,
             title: sectionId[0].toUpperCase() + sectionId.slice(1),
             isExpanded: true,
+            isUnread: false,
+            displaySectionMenu: false,
+            canBeReordered: true,
         };
         const vm = new MockViewModel(snapshot) as unknown as RoomListSectionHeaderViewModel;
         Object.assign(vm, {
diff --git a/packages/shared-components/src/room/HistoryVisibilityBadge/HistoryVisibilityBadge.test.tsx b/packages/shared-components/src/room/HistoryVisibilityBadge/HistoryVisibilityBadge.test.tsx
index 6b8ea1c398..2531daf96b 100644
--- a/packages/shared-components/src/room/HistoryVisibilityBadge/HistoryVisibilityBadge.test.tsx
+++ b/packages/shared-components/src/room/HistoryVisibilityBadge/HistoryVisibilityBadge.test.tsx
@@ -7,7 +7,7 @@
 
 import React from "react";
 import { describe, expect, it } from "vitest";
-import { render } from "@testing-library/react";
+import { render } from "@test-utils";
 
 import { HistoryVisibilityBadge } from "./HistoryVisibilityBadge.tsx";
 
diff --git a/packages/shared-components/src/room/RoomStatusBar/__snapshots__/RoomStatusBarView.test.tsx.snap b/packages/shared-components/src/room/RoomStatusBar/__snapshots__/RoomStatusBarView.test.tsx.snap
index 9299e7203e..3847326ceb 100644
--- a/packages/shared-components/src/room/RoomStatusBar/__snapshots__/RoomStatusBarView.test.tsx.snap
+++ b/packages/shared-components/src/room/RoomStatusBar/__snapshots__/RoomStatusBarView.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`RoomStatusBarView > renders connection lost 1`] = `
 <div>
   <div
-    aria-labelledby="_r_0_"
+    aria-labelledby="react-use-id-1"
     class="Banner-module_banner"
     data-type="critical"
     role="status"
@@ -32,7 +32,7 @@ exports[`RoomStatusBarView > renders connection lost 1`] = `
       >
         <p
           class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 RoomStatusBarView-module_title"
-          id="_r_0_"
+          id="react-use-id-1"
         >
           Connectivity to the server has been lost.
         </p>
@@ -53,7 +53,7 @@ exports[`RoomStatusBarView > renders connection lost 1`] = `
 exports[`RoomStatusBarView > renders consent link 1`] = `
 <div>
   <div
-    aria-labelledby="_r_2_"
+    aria-labelledby="react-use-id-1"
     class="Banner-module_banner"
     data-type="critical"
     role="status"
@@ -82,7 +82,7 @@ exports[`RoomStatusBarView > renders consent link 1`] = `
       >
         <p
           class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 RoomStatusBarView-module_title"
-          id="_r_2_"
+          id="react-use-id-1"
         >
           You can't send any messages until you review and agree to our terms and conditions.
         </p>
@@ -111,7 +111,7 @@ exports[`RoomStatusBarView > renders consent link 1`] = `
 exports[`RoomStatusBarView > renders local room error 1`] = `
 <div>
   <div
-    aria-labelledby="_r_6_"
+    aria-labelledby="react-use-id-1"
     class="Banner-module_banner"
     data-type="critical"
     role="status"
@@ -137,7 +137,7 @@ exports[`RoomStatusBarView > renders local room error 1`] = `
     >
       <p
         class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 RoomStatusBarView-module_title"
-        id="_r_6_"
+        id="react-use-id-1"
       >
         Could not start a chat with this user
       </p>
@@ -174,7 +174,7 @@ exports[`RoomStatusBarView > renders local room error 1`] = `
 exports[`RoomStatusBarView > renders resource limit error 1`] = `
 <div>
   <div
-    aria-labelledby="_r_1_"
+    aria-labelledby="react-use-id-1"
     class="Banner-module_banner"
     data-type="critical"
     role="status"
@@ -203,7 +203,7 @@ exports[`RoomStatusBarView > renders resource limit error 1`] = `
       >
         <p
           class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 RoomStatusBarView-module_title"
-          id="_r_1_"
+          id="react-use-id-1"
         >
           Your message wasn't sent because this homeserver has been blocked by its administrator.
         </p>
@@ -237,7 +237,7 @@ exports[`RoomStatusBarView > renders resource limit error 1`] = `
 exports[`RoomStatusBarView > renders unsent messages 1`] = `
 <div>
   <div
-    aria-labelledby="_r_3_"
+    aria-labelledby="react-use-id-1"
     class="Banner-module_banner"
     data-type="critical"
     role="status"
@@ -266,7 +266,7 @@ exports[`RoomStatusBarView > renders unsent messages 1`] = `
       >
         <p
           class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 RoomStatusBarView-module_title"
-          id="_r_3_"
+          id="react-use-id-1"
         >
           Some of your messages have not been sent
         </p>
@@ -330,7 +330,7 @@ exports[`RoomStatusBarView > renders unsent messages 1`] = `
 exports[`RoomStatusBarView > renders unsent messages and deletes all 1`] = `
 <div>
   <div
-    aria-labelledby="_r_4_"
+    aria-labelledby="react-use-id-1"
     class="Banner-module_banner"
     data-type="critical"
     role="status"
@@ -359,7 +359,7 @@ exports[`RoomStatusBarView > renders unsent messages and deletes all 1`] = `
       >
         <p
           class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 RoomStatusBarView-module_title"
-          id="_r_4_"
+          id="react-use-id-1"
         >
           Some of your messages have not been sent
         </p>
@@ -423,7 +423,7 @@ exports[`RoomStatusBarView > renders unsent messages and deletes all 1`] = `
 exports[`RoomStatusBarView > renders unsent messages and resends all 1`] = `
 <div>
   <div
-    aria-labelledby="_r_5_"
+    aria-labelledby="react-use-id-1"
     class="Banner-module_banner"
     data-type="critical"
     role="status"
@@ -452,7 +452,7 @@ exports[`RoomStatusBarView > renders unsent messages and resends all 1`] = `
       >
         <p
           class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 RoomStatusBarView-module_title"
-          id="_r_5_"
+          id="react-use-id-1"
         >
           Some of your messages have not been sent
         </p>
diff --git a/packages/shared-components/src/room/WidgetPip/WidgetPipView.tsx b/packages/shared-components/src/room/WidgetPip/WidgetPipView.tsx
index da0e3c5256..8454b89209 100644
--- a/packages/shared-components/src/room/WidgetPip/WidgetPipView.tsx
+++ b/packages/shared-components/src/room/WidgetPip/WidgetPipView.tsx
@@ -19,7 +19,7 @@ export interface WidgetPipViewActions {
      * The view model will handle navigating back to the associated room.
      * @param ev The mouse event that triggered the back click.
      */
-    onBackClick: (ev: React.MouseEvent<Element, MouseEvent>) => void;
+    onBackClick: (ev: React.MouseEvent) => void;
     /**
      * The view model exposes the `<PersistentApp />` component via this action.
      * `PersistentApp` is not available in shared components.
@@ -34,7 +34,7 @@ export interface WidgetPipViewActions {
      * Action that needs to be called when the pip view starts to get dragged.
      * @param ev The mouse event that triggered the drag start.
      */
-    onStartMoving: (ev: React.MouseEvent<Element, MouseEvent>) => void;
+    onStartMoving: (ev: React.MouseEvent) => void;
 }
 
 export interface WidgetPipViewSnapshot {
@@ -86,7 +86,6 @@ export const WidgetPipView: FC<WidgetPipViewProps> = ({ vm, RoomAvatar }) => {
         // if the user interacts with a mouse. Hence there is no use in providing an accessible alternative.
         // In the future we might consider introducing alternative shortcuts for moving the PiP around
         // with the keyboard.
-        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
         <div data-testid="widget-pip-container" className={styles.container} onMouseDown={vm.onStartMoving}>
             <div className={styles.header}>
                 <IconButton
diff --git a/packages/shared-components/src/room/WidgetPip/__snapshots__/WidgetPipView.test.tsx.snap b/packages/shared-components/src/room/WidgetPip/__snapshots__/WidgetPipView.test.tsx.snap
index f2b891c026..1bfa4fc50b 100644
--- a/packages/shared-components/src/room/WidgetPip/__snapshots__/WidgetPipView.test.tsx.snap
+++ b/packages/shared-components/src/room/WidgetPip/__snapshots__/WidgetPipView.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`WidgetPipView > detects back click action 1`] = `
       class="WidgetPipView-module_header"
     >
       <button
-        aria-labelledby="_r_6_"
+        aria-labelledby="react-use-id-1"
         class="_icon-button_1215g_8"
         data-kind="secondary"
         data-testid="base-card-back-button"
@@ -61,7 +61,7 @@ exports[`WidgetPipView > detects double click triggers back 1`] = `
       class="WidgetPipView-module_header"
     >
       <button
-        aria-labelledby="_r_c_"
+        aria-labelledby="react-use-id-1"
         class="_icon-button_1215g_8"
         data-kind="secondary"
         data-testid="base-card-back-button"
@@ -112,7 +112,7 @@ exports[`WidgetPipView > detects on mouse down for drag 1`] = `
       class="WidgetPipView-module_header"
     >
       <button
-        aria-labelledby="_r_i_"
+        aria-labelledby="react-use-id-1"
         class="_icon-button_1215g_8"
         data-kind="secondary"
         data-testid="base-card-back-button"
@@ -163,7 +163,7 @@ exports[`WidgetPipView > renders with gray widget 1`] = `
       class="WidgetPipView-module_header"
     >
       <button
-        aria-labelledby="_r_0_"
+        aria-labelledby="react-use-id-1"
         class="_icon-button_1215g_8"
         data-kind="secondary"
         data-testid="base-card-back-button"
diff --git a/packages/shared-components/src/room/composer/MessageComposerUrlPreview/MessageComposerUrlPreview.module.css b/packages/shared-components/src/room/composer/MessageComposerUrlPreview/MessageComposerUrlPreview.module.css
new file mode 100644
index 0000000000..4db55d85e0
--- /dev/null
+++ b/packages/shared-components/src/room/composer/MessageComposerUrlPreview/MessageComposerUrlPreview.module.css
@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2025 Element Creations 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.
+ */
+
+.container {
+    container-type: inline-size;
+    container-name: banner;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--cpd-space-4x);
+    padding: var(--cpd-space-3x) var(--cpd-space-4x);
+    border-top: 1px solid var(--cpd-color-gray-400);
+
+    > div {
+        display: flex;
+        gap: var(--cpd-space-4x);
+        align-items: center;
+    }
+
+    .text {
+        display: flex;
+        flex-direction: column;
+        > a {
+            color: var(--cpd-color-text-action-accent);
+            font-weight: 400;
+            font-size: 13px;
+        }
+        > .description {
+            margin: 0;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 1;
+            line-clamp: 1;
+            overflow: hidden;
+            /* Cap the max width of a line so it doesn't go on forever. */
+            max-width: 40em;
+        }
+    }
+}
+
+.image {
+    width: 40px;
+    height: 40px;
+    border-radius: 6px;
+    object-fit: scale-down;
+}
diff --git a/packages/shared-components/src/room/composer/MessageComposerUrlPreview/MessageComposerUrlPreview.stories.tsx b/packages/shared-components/src/room/composer/MessageComposerUrlPreview/MessageComposerUrlPreview.stories.tsx
new file mode 100644
index 0000000000..f32e835e03
--- /dev/null
+++ b/packages/shared-components/src/room/composer/MessageComposerUrlPreview/MessageComposerUrlPreview.stories.tsx
@@ -0,0 +1,121 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+
+import type { Meta, StoryFn } from "@storybook/react-vite";
+import siteIconFile from "../../../../static/element.png";
+import imagePreviewFile from "../../../../static/wideImage.png";
+import { MessageComposerUrlPreviewView, type MessageComposerUrlPreviewSnapshot } from "./MessageComposerUrlPreview";
+import { useMockedViewModel } from "../../../core/viewmodel";
+import { LinkedTextContext } from "../../../core/utils/LinkedText";
+import { withViewDocs } from "../../../../.storybook/withViewDocs";
+
+type MessageComposerUrlPreviewWrapperProps = MessageComposerUrlPreviewSnapshot;
+
+const MessageComposerUrlPreviewViewWrapperImpl = ({
+    ...rest
+}: MessageComposerUrlPreviewWrapperProps): JSX.Element | null => {
+    const vm = useMockedViewModel(rest, {});
+    return (
+        <LinkedTextContext.Provider value={{}}>
+            <MessageComposerUrlPreviewView vm={vm} />
+        </LinkedTextContext.Provider>
+    );
+};
+
+const MessageComposerUrlPreviewViewWrapper = withViewDocs(
+    MessageComposerUrlPreviewViewWrapperImpl,
+    MessageComposerUrlPreviewView,
+);
+
+export default {
+    title: "Composer/MessageComposerUrlPreview",
+    component: MessageComposerUrlPreviewViewWrapper,
+    tags: ["autodocs"],
+    args: {},
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/sI9A2kV2K4xeiyqJsL7Ey3/Link-Previews?node-id=243-8476&t=NNrkR2fxEeVenjbU-0",
+        },
+    },
+} satisfies Meta<typeof MessageComposerUrlPreviewViewWrapper>;
+
+const Template: StoryFn<typeof MessageComposerUrlPreviewViewWrapper> = (args) => (
+    <MessageComposerUrlPreviewViewWrapper {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    previews: [
+        {
+            title: "A simple title",
+            description: "A simple description",
+            link: "https://matrix.org",
+            siteName: "matrix.org",
+            showTooltipOnLink: false,
+        },
+    ],
+};
+
+export const WithImage = Template.bind({});
+WithImage.args = {
+    previews: [
+        {
+            ...Default.args.previews![0]!,
+            image: {
+                imageThumb: imagePreviewFile,
+                imageFull: imagePreviewFile,
+                alt: "The element logo",
+                playable: false,
+                mxcImageFull: "mxc://server/file",
+            },
+        },
+    ],
+};
+export const WithImageAndSiteIcon = Template.bind({});
+WithImageAndSiteIcon.args = {
+    previews: [
+        {
+            ...Default.args.previews![0]!,
+            siteIcon: siteIconFile,
+            image: {
+                imageThumb: imagePreviewFile,
+                imageFull: imagePreviewFile,
+                alt: "The element logo",
+                playable: false,
+                mxcImageFull: "mxc://server/file",
+            },
+        },
+    ],
+};
+
+export const WithImageAndLoadsOfText = Template.bind({});
+WithImageAndLoadsOfText.args = {
+    previews: [
+        {
+            ...Default.args.previews![0]!,
+            description: `Molestiae aliquam quos possimus molestiae id sit nulla rerum. Sunt cumque illum alias. Illo ipsa ut iure quia nulla magnam repellat.
+
+    Esse velit corporis sapiente temporibus quia ipsam. Pariatur est rem veritatis. Inventore sit consequatur odio ipsa error non assumenda. Est eum ex dignissimos voluptatibus voluptatem delectus modi. Nisi quia eius ea quibusdam. Aut eveniet maxime non.
+
+    Impedit qui minus soluta cupiditate. Illo blanditiis sint et dolores rem consequuntur rerum ut. Delectus tempore dolorem veritatis odit enim ut dolores. Sit quae rerum explicabo consequatur tenetur. Labore in doloremque libero.
+
+    Incidunt ut ea quae nobis. Reiciendis inventore quas qui eum voluptatem ex et qui. Adipisci quibusdam dolores hic inventore et suscipit cupiditate consequuntur.
+
+    Temporibus similique sint quo. Omnis tempora quidem explicabo in quidem magnam quia. Aut sunt accusantium ut et ut laborum debitis in. Enim nihil sit consectetur facilis quidem voluptatem. Quod impedit odit veritatis est laudantium tempore sit labore. Atque minima aliquam nostrum et.`,
+            image: {
+                imageThumb: imagePreviewFile,
+                imageFull: imagePreviewFile,
+                alt: "The element logo",
+                playable: false,
+                mxcImageFull: "mxc://server/file",
+            },
+        },
+    ],
+};
diff --git a/packages/shared-components/src/room/composer/MessageComposerUrlPreview/MessageComposerUrlPreview.test.tsx b/packages/shared-components/src/room/composer/MessageComposerUrlPreview/MessageComposerUrlPreview.test.tsx
new file mode 100644
index 0000000000..fc4022b2f8
--- /dev/null
+++ b/packages/shared-components/src/room/composer/MessageComposerUrlPreview/MessageComposerUrlPreview.test.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2026 Element Creations 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 { render } from "@test-utils";
+import { composeStories } from "@storybook/react-vite";
+import { describe, it, expect } from "vitest";
+import React from "react";
+
+import * as stories from "./MessageComposerUrlPreview.stories.tsx";
+
+const { Default, WithImage } = composeStories(stories);
+
+describe("MessageComposerUrlPreview", () => {
+    it("renders a preview", () => {
+        const { container } = render(<Default />);
+        expect(container).toMatchSnapshot();
+    });
+    it("renders a preview with an image", () => {
+        const { container } = render(<WithImage />);
+        expect(container).toMatchSnapshot();
+    });
+});
diff --git a/packages/shared-components/src/room/composer/MessageComposerUrlPreview/MessageComposerUrlPreview.tsx b/packages/shared-components/src/room/composer/MessageComposerUrlPreview/MessageComposerUrlPreview.tsx
new file mode 100644
index 0000000000..4312cad8c2
--- /dev/null
+++ b/packages/shared-components/src/room/composer/MessageComposerUrlPreview/MessageComposerUrlPreview.tsx
@@ -0,0 +1,64 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+import { Text } from "@vector-im/compound-web";
+import classNames from "classnames";
+
+import { type UrlPreview } from "../../timeline/event-tile/UrlPreviewGroupView";
+import styles from "./MessageComposerUrlPreview.module.css";
+import { LinkSiteName, LinkTitle } from "../../timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview";
+import { useViewModel, type ViewModel } from "../../../core/viewmodel";
+
+/** Snapshot data for rendering a URL preview attached to the composer. */
+export interface MessageComposerUrlPreviewSnapshot {
+    /** URL preview to render. */
+    previews: UrlPreview[];
+    /** Content of the composer when the snapshot is computed */
+    content: string;
+}
+
+/** Props for MessageComposerUrlPreviewView. */
+export interface MessageComposerUrlPreviewProps {
+    /**
+     * The view model for the component.
+     */
+    vm: ViewModel<MessageComposerUrlPreviewSnapshot>;
+    /**
+     * Extra CSS classes to apply to the component.
+     */
+    className?: string;
+}
+
+/**
+ * MessageComposerUrlPreviewView renders a preview of all previewable URLs above the messasge composer.
+ */
+export function MessageComposerUrlPreviewView({ vm, className }: MessageComposerUrlPreviewProps): JSX.Element | null {
+    const { previews } = useViewModel(vm);
+    if (previews.length === 0) {
+        return null;
+    }
+
+    // Show only the first preview to revert back to previous behaviour
+    // But have previews fetch all URL previews in the message text
+    const previewViews = previews.slice(0, 1).map((preview) => (
+        <div key={preview.link} className={classNames(className, styles.container)}>
+            <div>
+                {preview?.image?.imageThumb && (
+                    <img className={styles.image} src={preview.image?.imageThumb} alt={preview.image.alt} />
+                )}
+                <div className={styles.text}>
+                    <LinkSiteName {...preview} />
+                    <LinkTitle {...preview} />
+                    <Text className={styles.description}>{preview?.description}</Text>
+                </div>
+            </div>
+        </div>
+    ));
+
+    return <>{previewViews}</>;
+}
diff --git a/packages/shared-components/src/room/composer/MessageComposerUrlPreview/__snapshots__/MessageComposerUrlPreview.test.tsx.snap b/packages/shared-components/src/room/composer/MessageComposerUrlPreview/__snapshots__/MessageComposerUrlPreview.test.tsx.snap
new file mode 100644
index 0000000000..3872de585c
--- /dev/null
+++ b/packages/shared-components/src/room/composer/MessageComposerUrlPreview/__snapshots__/MessageComposerUrlPreview.test.tsx.snap
@@ -0,0 +1,80 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MessageComposerUrlPreview > renders a preview 1`] = `
+<div>
+  <div
+    class="MessageComposerUrlPreview-module_container"
+  >
+    <div>
+      <div
+        class="MessageComposerUrlPreview-module_text"
+      >
+        <div
+          class="LinkPreview-module_siteName"
+        >
+          <span
+            class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
+          >
+            matrix.org
+          </span>
+        </div>
+        <a
+          class="_typography_6v6n8_153 _font-body-md-semibold_6v6n8_55 LinkPreview-module_title"
+          href="https://matrix.org"
+          rel="noreferrer noopener"
+          target="_blank"
+        >
+          A simple title
+        </a>
+        <p
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 MessageComposerUrlPreview-module_description"
+        >
+          A simple description
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`MessageComposerUrlPreview > renders a preview with an image 1`] = `
+<div>
+  <div
+    class="MessageComposerUrlPreview-module_container"
+  >
+    <div>
+      <img
+        alt="The element logo"
+        class="MessageComposerUrlPreview-module_image"
+        src="/static/wideImage.png"
+      />
+      <div
+        class="MessageComposerUrlPreview-module_text"
+      >
+        <div
+          class="LinkPreview-module_siteName"
+        >
+          <span
+            class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
+          >
+            matrix.org
+          </span>
+        </div>
+        <a
+          class="_typography_6v6n8_153 _font-body-md-semibold_6v6n8_55 LinkPreview-module_title"
+          href="https://matrix.org"
+          rel="noreferrer noopener"
+          target="_blank"
+        >
+          A simple title
+        </a>
+        <p
+          class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 MessageComposerUrlPreview-module_description"
+        >
+          A simple description
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/shared-components/src/room/composer/MessageComposerUrlPreview/index.ts b/packages/shared-components/src/room/composer/MessageComposerUrlPreview/index.ts
new file mode 100644
index 0000000000..b1d28063ff
--- /dev/null
+++ b/packages/shared-components/src/room/composer/MessageComposerUrlPreview/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+export * from "./MessageComposerUrlPreview";
diff --git a/packages/shared-components/src/room/composer/UploadButton/UploadButton.stories.tsx b/packages/shared-components/src/room/composer/UploadButton/UploadButton.stories.tsx
new file mode 100644
index 0000000000..fd32e8702f
--- /dev/null
+++ b/packages/shared-components/src/room/composer/UploadButton/UploadButton.stories.tsx
@@ -0,0 +1,93 @@
+/*
+ * Copyright (c) 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+import { type StoryObj, type Meta } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { AttachmentIcon, ReactionIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import { UploadButton, type UploadButtonViewActions, type UploadButtonViewSnapshot } from "./UploadButton";
+import { useMockedViewModel } from "../../../core/viewmodel";
+import { withViewDocs } from "../../../../.storybook/withViewDocs";
+
+const UploadButtonWrapperImpl = ({
+    onUploadOptionSelected,
+    defaultOpen,
+    ...rest
+}: UploadButtonViewSnapshot & UploadButtonViewActions & { defaultOpen: boolean }): JSX.Element => {
+    const vm = useMockedViewModel(rest, {
+        onUploadOptionSelected,
+    });
+    return <UploadButton defaultOpen={defaultOpen} vm={vm} />;
+};
+
+const UploadButtonWrapper = withViewDocs(UploadButtonWrapperImpl, UploadButton);
+
+const meta = {
+    title: "Room/UploadButton",
+    component: UploadButtonWrapper,
+    tags: ["autodocs"],
+    args: {
+        defaultOpen: false,
+        onUploadOptionSelected: fn(),
+        options: [
+            {
+                type: "local",
+                label: "Attachment",
+                icon: AttachmentIcon,
+            },
+            {
+                label: "Fun Button",
+                icon: ReactionIcon,
+                type: "fun",
+            },
+        ],
+    },
+} satisfies Meta<typeof UploadButtonWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithOneOption: Story = {
+    // No visible difference
+    tags: ["skip-test"],
+    args: {
+        options: [
+            {
+                type: "local",
+                label: "Attachment",
+                icon: AttachmentIcon,
+            },
+        ],
+    },
+};
+
+export const WithOpen: Story = {
+    args: {
+        defaultOpen: true,
+    },
+    parameters: {
+        a11y: {
+            config: {
+                rules: [
+                    {
+                        // Menu contains a header which is invalid
+                        id: "aria-required-children",
+                        enabled: false,
+                    },
+                    {
+                        // Menu pops open by default
+                        id: "aria-hidden-focus",
+                        enabled: false,
+                    },
+                ],
+            },
+        },
+    },
+};
diff --git a/packages/shared-components/src/room/composer/UploadButton/UploadButton.test.tsx b/packages/shared-components/src/room/composer/UploadButton/UploadButton.test.tsx
new file mode 100644
index 0000000000..8781a58ba2
--- /dev/null
+++ b/packages/shared-components/src/room/composer/UploadButton/UploadButton.test.tsx
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2026 Element Creations 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 { render, screen } from "@test-utils";
+import { describe, it, expect } from "vitest";
+import { composeStories } from "@storybook/react-vite";
+import { userEvent } from "vitest/browser";
+import { fn } from "storybook/test";
+
+import * as stories from "./UploadButton.stories.tsx";
+
+const { Default, WithOneOption } = composeStories(stories);
+
+describe("UploadButton", () => {
+    it("renders a default button", () => {
+        const { container } = render(<Default />);
+        expect(container).toMatchSnapshot();
+    });
+    it("will provide one option when only one is available", async () => {
+        userEvent.setup();
+        const onUploadOptionSelected = fn();
+        const { getByRole } = render(<WithOneOption onUploadOptionSelected={onUploadOptionSelected} />);
+        await userEvent.click(getByRole("button", { name: "Attachment" }));
+        expect(onUploadOptionSelected).toHaveBeenCalledWith("local");
+    });
+    it("can open the menu and select an option", async () => {
+        const onUploadOptionSelected = fn();
+        const { container, getByRole } = render(<Default onUploadOptionSelected={onUploadOptionSelected} />);
+        await userEvent.click(getByRole("button", { name: "Attachment" }));
+        expect(container).toMatchSnapshot();
+        await userEvent.click(screen.getByRole("menuitem", { name: "Fun Button" }));
+        expect(onUploadOptionSelected).toHaveBeenCalledWith("fun");
+    });
+    it("can ctrl click to get the first option", async () => {
+        userEvent.setup();
+        const onUploadOptionSelected = fn();
+        const { getByRole } = render(<Default onUploadOptionSelected={onUploadOptionSelected} />);
+        await userEvent.keyboard("[ControlLeft>]");
+        await userEvent.click(getByRole("button", { name: "Attachment" }));
+        expect(onUploadOptionSelected).toHaveBeenCalledWith("local");
+    });
+});
diff --git a/packages/shared-components/src/room/composer/UploadButton/UploadButton.tsx b/packages/shared-components/src/room/composer/UploadButton/UploadButton.tsx
new file mode 100644
index 0000000000..bc488e3aa8
--- /dev/null
+++ b/packages/shared-components/src/room/composer/UploadButton/UploadButton.tsx
@@ -0,0 +1,112 @@
+/*
+ * Copyright (c) 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, {
+    type ReactElement,
+    type PropsWithChildren,
+    useState,
+    type ComponentProps,
+    type SVGAttributes,
+    type ComponentType,
+    useCallback,
+    type MouseEventHandler,
+} from "react";
+import { IconButton, Menu, MenuItem } from "@vector-im/compound-web";
+import { AttachmentIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import { useI18n } from "../../../core/i18n/i18nContext";
+import { useViewModel, type ViewModel } from "../../../core/viewmodel";
+
+export interface UploadButtonViewSnapshot {
+    options: { type: string; label: string; icon?: ComponentType<SVGAttributes<SVGElement>> }[];
+}
+
+export interface UploadButtonViewActions {
+    onUploadOptionSelected(this: void, type: string): void;
+}
+
+/**
+ * A composer button to initiate uploading files. The button may also be
+ * Ctrl+Clicked to pick the first option automatically.
+ *
+ * @example
+ * ```tsx
+ *   <UploadButton vm={} />
+ * ```
+ */
+export function UploadButton({
+    vm,
+    defaultOpen = false,
+    ...rootButtonProps
+}: PropsWithChildren<
+    { vm: ViewModel<UploadButtonViewSnapshot, UploadButtonViewActions>; defaultOpen?: boolean } & ComponentProps<
+        typeof IconButton
+    >
+>): ReactElement {
+    const i18n = useI18n();
+    const [open, setOpen] = useState(defaultOpen);
+    const { options } = useViewModel(vm);
+
+    // Ctrl+click is a shortcut to selecting the first item.
+    const onMenuClick: MouseEventHandler<HTMLButtonElement> = useCallback(
+        (ev) => {
+            if (!ev.ctrlKey) {
+                return;
+            }
+            ev.preventDefault();
+            ev.stopPropagation();
+            vm.onUploadOptionSelected(options[0].type);
+        },
+        [options, vm],
+    );
+    if (options.length === 1) {
+        const { label, icon: Icon } = options[0];
+        return (
+            <IconButton
+                size="26px"
+                {...rootButtonProps}
+                tooltip={label}
+                aria-label={label}
+                onClick={() => vm.onUploadOptionSelected(options[0].type)}
+            >
+                {Icon ? <Icon /> : <AttachmentIcon />}
+            </IconButton>
+        );
+    }
+
+    const trigger = (
+        <IconButton
+            {...rootButtonProps}
+            size="26px"
+            tooltip={i18n.translate("common|attachment")}
+            onClick={onMenuClick}
+            title={i18n.translate("common|attachment")}
+        >
+            <AttachmentIcon />
+        </IconButton>
+    );
+
+    return (
+        <Menu
+            side="top"
+            title={i18n.translate("common|attachment")}
+            showTitle={false}
+            trigger={trigger}
+            open={open}
+            onOpenChange={(o) => setOpen(o)}
+        >
+            {options.map((o) => (
+                <MenuItem
+                    key={o.label}
+                    label={o.label}
+                    Icon={o.icon}
+                    onSelect={() => vm.onUploadOptionSelected(o.type)}
+                />
+            ))}
+        </Menu>
+    );
+}
diff --git a/packages/shared-components/src/room/composer/UploadButton/__snapshots__/UploadButton.test.tsx.snap b/packages/shared-components/src/room/composer/UploadButton/__snapshots__/UploadButton.test.tsx.snap
new file mode 100644
index 0000000000..860dea2756
--- /dev/null
+++ b/packages/shared-components/src/room/composer/UploadButton/__snapshots__/UploadButton.test.tsx.snap
@@ -0,0 +1,79 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`UploadButton > can open the menu and select an option 1`] = `
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+>
+  <button
+    aria-controls="radix-react-use-id-1"
+    aria-disabled="false"
+    aria-expanded="true"
+    aria-haspopup="menu"
+    aria-labelledby="react-use-id-2"
+    class="_icon-button_1215g_8"
+    data-kind="primary"
+    data-state="open"
+    id="radix-react-use-id-3"
+    role="button"
+    style="--cpd-icon-button-size: 26px;"
+    tabindex="0"
+    title="Attachment"
+    type="button"
+  >
+    <div
+      class="_indicator-icon_147l5_17"
+      style="--cpd-icon-button-size: 100%;"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
+        />
+      </svg>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`UploadButton > renders a default button 1`] = `
+<div>
+  <button
+    aria-disabled="false"
+    aria-expanded="false"
+    aria-haspopup="menu"
+    aria-labelledby="react-use-id-1"
+    class="_icon-button_1215g_8"
+    data-kind="primary"
+    data-state="closed"
+    id="radix-react-use-id-2"
+    role="button"
+    style="--cpd-icon-button-size: 26px;"
+    tabindex="0"
+    title="Attachment"
+    type="button"
+  >
+    <div
+      class="_indicator-icon_147l5_17"
+      style="--cpd-icon-button-size: 100%;"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M11.5 22q-2.3 0-3.9-1.6T6 16.5V6q0-1.65 1.175-2.825T10 2t2.825 1.175T14 6v9.5q0 1.05-.725 1.775T11.5 18t-1.775-.725T9 15.5V6.75A.73.73 0 0 1 9.75 6a.73.73 0 0 1 .75.75v8.75q0 .424.287.712.288.288.713.288.424 0 .713-.288a.97.97 0 0 0 .287-.712V6q0-1.05-.725-1.775T10 3.5t-1.775.725T7.5 6v10.5q0 1.65 1.175 2.825T11.5 20.5t2.825-1.175T15.5 16.5V6.75a.73.73 0 0 1 .75-.75.73.73 0 0 1 .75.75v9.75q0 2.3-1.6 3.9T11.5 22"
+        />
+      </svg>
+    </div>
+  </button>
+</div>
+`;
diff --git a/packages/shared-components/src/room/composer/UploadButton/index.ts b/packages/shared-components/src/room/composer/UploadButton/index.ts
new file mode 100644
index 0000000000..2bbcd04eaa
--- /dev/null
+++ b/packages/shared-components/src/room/composer/UploadButton/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright (c) 2026 Element Creations 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.
+ */
+
+export * from "./UploadButton";
diff --git a/packages/shared-components/src/room/right-panel/WidgetContextMenuView/__snapshots__/WidgetContextMenuView.test.tsx.snap b/packages/shared-components/src/room/right-panel/WidgetContextMenuView/__snapshots__/WidgetContextMenuView.test.tsx.snap
index f60036c561..1241161dfa 100644
--- a/packages/shared-components/src/room/right-panel/WidgetContextMenuView/__snapshots__/WidgetContextMenuView.test.tsx.snap
+++ b/packages/shared-components/src/room/right-panel/WidgetContextMenuView/__snapshots__/WidgetContextMenuView.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`<WidgetContextMenuView /> > renders widget contextmenu with all options
   data-aria-hidden="true"
 >
   <button
-    aria-controls="radix-_r_1_"
+    aria-controls="radix-react-use-id-1"
     aria-disabled="false"
     aria-expanded="true"
     aria-haspopup="menu"
@@ -14,7 +14,7 @@ exports[`<WidgetContextMenuView /> > renders widget contextmenu with all options
     class="_icon-button_1215g_8"
     data-kind="primary"
     data-state="open"
-    id="radix-_r_0_"
+    id="radix-react-use-id-2"
     inert=""
     role="button"
     style="--cpd-icon-button-size: 24px;"
@@ -47,7 +47,7 @@ exports[`<WidgetContextMenuView /> > renders widget contextmenu without only bas
   data-aria-hidden="true"
 >
   <button
-    aria-controls="radix-_r_b_"
+    aria-controls="radix-react-use-id-1"
     aria-disabled="false"
     aria-expanded="true"
     aria-haspopup="menu"
@@ -55,7 +55,7 @@ exports[`<WidgetContextMenuView /> > renders widget contextmenu without only bas
     class="_icon-button_1215g_8"
     data-kind="primary"
     data-state="open"
-    id="radix-_r_a_"
+    id="radix-react-use-id-2"
     inert=""
     role="button"
     style="--cpd-icon-button-size: 24px;"
diff --git a/packages/shared-components/src/room/timeline/DateSeparatorView/DateSeparatorView.test.tsx b/packages/shared-components/src/room/timeline/DateSeparatorView/DateSeparatorView.test.tsx
index b21f1efecc..83eff4e179 100644
--- a/packages/shared-components/src/room/timeline/DateSeparatorView/DateSeparatorView.test.tsx
+++ b/packages/shared-components/src/room/timeline/DateSeparatorView/DateSeparatorView.test.tsx
@@ -5,11 +5,10 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { render, screen } from "@test-utils";
+import { render, screen, waitFor } from "@test-utils";
 import { composeStories } from "@storybook/react-vite";
 import React, { createRef } from "react";
 import { describe, it, expect } from "vitest";
-import { waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import { BaseViewModel } from "../../../core/viewmodel/BaseViewModel";
diff --git a/packages/shared-components/src/room/timeline/DateSeparatorView/__snapshots__/DateSeparatorView.test.tsx.snap b/packages/shared-components/src/room/timeline/DateSeparatorView/__snapshots__/DateSeparatorView.test.tsx.snap
index 1be2cc2e0e..0c87e7f34b 100644
--- a/packages/shared-components/src/room/timeline/DateSeparatorView/__snapshots__/DateSeparatorView.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/DateSeparatorView/__snapshots__/DateSeparatorView.test.tsx.snap
@@ -100,7 +100,7 @@ exports[`DateSeparatorView > renders with jump to date picker story 1`] = `
       role="none"
     />
     <div
-      aria-controls="radix-_r_1_"
+      aria-controls="radix-react-use-id-1"
       aria-expanded="true"
       aria-haspopup="menu"
       aria-label="Jump to date"
@@ -108,7 +108,7 @@ exports[`DateSeparatorView > renders with jump to date picker story 1`] = `
       class="Flex-module_flex DateSeparatorView-module_content"
       data-state="open"
       data-testid="jump-to-date-separator-button"
-      id="radix-_r_0_"
+      id="radix-react-use-id-2"
       role="button"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
       tabindex="0"
diff --git a/packages/shared-components/src/room/timeline/EventPresentation/EventPresentation.types.ts b/packages/shared-components/src/room/timeline/EventPresentation/EventPresentation.types.ts
new file mode 100644
index 0000000000..dff7d2c141
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/EventPresentation/EventPresentation.types.ts
@@ -0,0 +1,12 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+/** Event tile layout selected by the host surface. */
+export type EventLayout = "group" | "bubble" | "irc";
+
+/** Density variant applied within an event layout. */
+export type EventDensity = "default" | "compact";
diff --git a/packages/shared-components/src/room/timeline/EventPresentation/EventPresentationContext.tsx b/packages/shared-components/src/room/timeline/EventPresentation/EventPresentationContext.ts
similarity index 69%
rename from packages/shared-components/src/room/timeline/EventPresentation/EventPresentationContext.tsx
rename to packages/shared-components/src/room/timeline/EventPresentation/EventPresentationContext.ts
index 3d6f6935bf..c570c547ec 100644
--- a/packages/shared-components/src/room/timeline/EventPresentation/EventPresentationContext.tsx
+++ b/packages/shared-components/src/room/timeline/EventPresentation/EventPresentationContext.ts
@@ -7,11 +7,7 @@
 
 import { createContext, useContext } from "react";
 
-/** Event tile layout selected by the host surface. */
-export type EventLayout = "group" | "bubble" | "irc";
-
-/** Density variant applied within an event layout. */
-export type EventDensity = "default" | "compact";
+import type { EventDensity, EventLayout } from "./EventPresentation.types";
 
 /** Presentation settings that shared event/timeline components can adapt to. */
 export interface EventPresentation {
@@ -37,3 +33,20 @@ export const EventPresentationProvider = EventPresentationContext.Provider;
 export function useEventPresentation(): EventPresentation {
     return useContext(EventPresentationContext);
 }
+
+/** Returns the current event presentation settings attributes.
+ *
+ *  "data-event-layout": "group" | "bubble" | "irc"
+ *  "data-event-density": "default" | "compact"
+ */
+export function useEventPresentationAttributes(): {
+    "data-event-layout": EventLayout;
+    "data-event-density": EventDensity;
+} {
+    const { layout, density } = useEventPresentation();
+
+    return {
+        "data-event-layout": layout,
+        "data-event-density": density,
+    };
+}
diff --git a/packages/shared-components/src/room/timeline/EventPresentation/index.ts b/packages/shared-components/src/room/timeline/EventPresentation/index.ts
index cd21c7593b..122c2beb59 100644
--- a/packages/shared-components/src/room/timeline/EventPresentation/index.ts
+++ b/packages/shared-components/src/room/timeline/EventPresentation/index.ts
@@ -9,7 +9,6 @@ export {
     DEFAULT_EVENT_PRESENTATION,
     EventPresentationProvider,
     useEventPresentation,
-    type EventDensity,
-    type EventLayout,
     type EventPresentation,
 } from "./EventPresentationContext";
+export type { EventDensity, EventLayout } from "./EventPresentation.types";
diff --git a/packages/shared-components/src/room/timeline/ReadMarker/index.tsx b/packages/shared-components/src/room/timeline/ReadMarker/index.ts
similarity index 100%
rename from packages/shared-components/src/room/timeline/ReadMarker/index.tsx
rename to packages/shared-components/src/room/timeline/ReadMarker/index.ts
diff --git a/packages/shared-components/src/room/timeline/TimelineView/.gitkeep b/packages/shared-components/src/room/timeline/TimelineView/.gitkeep
deleted file mode 100644
index 8b13789179..0000000000
--- a/packages/shared-components/src/room/timeline/TimelineView/.gitkeep
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/packages/shared-components/src/room/timeline/TimelineView/TimelineOverlayButtons.module.css b/packages/shared-components/src/room/timeline/TimelineView/TimelineOverlayButtons.module.css
new file mode 100644
index 0000000000..cf3b19ba26
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/TimelineView/TimelineOverlayButtons.module.css
@@ -0,0 +1,201 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+/**
+ * Overlay layer — absolutely fills the timeline so buttons can be positioned at
+ * the top or bottom without affecting list layout.
+ * Children use their own absolute positioning to match the legacy components.
+ */
+.overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 1000;
+}
+
+/* ── Top unread bar — matches legacy TopUnreadMessagesBar ────────── */
+
+.topUnreadBar {
+    position: absolute;
+    top: var(--cpd-space-6x);
+    right: var(--cpd-space-6x);
+    width: 38px;
+    pointer-events: all;
+}
+
+.topUnreadBar::after {
+    content: "";
+    position: absolute;
+    top: -8px;
+    left: 11px;
+    width: 4px;
+    height: 4px;
+    border-radius: 16px;
+    background-color: var(--cpd-color-bg-canvas-default);
+    border: 6px solid var(--cpd-color-icon-accent-tertiary);
+    pointer-events: none;
+}
+
+.topUnreadBarScrollUp {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 38px;
+    width: 38px;
+    border-radius: 19px;
+    box-sizing: border-box;
+    background: var(--cpd-color-bg-canvas-default);
+    border: 1.3px solid var(--cpd-color-icon-tertiary);
+    cursor: pointer;
+}
+
+.topUnreadBarScrollUp svg {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    color: var(--cpd-color-icon-tertiary);
+}
+
+.topUnreadBarMarkAsRead {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    background: var(--cpd-color-bg-canvas-default);
+    border: 1.3px solid var(--cpd-color-icon-tertiary);
+    border-radius: 10px;
+    margin: 5px auto;
+    cursor: pointer;
+}
+
+.topUnreadBarMarkAsRead svg {
+    width: 12px;
+    height: 12px;
+    flex-shrink: 0;
+    color: var(--cpd-color-icon-tertiary);
+}
+
+/* ── Below unread bar — marker is below viewport; appears at top-right ── */
+
+.belowUnreadBar {
+    position: absolute;
+    top: var(--cpd-space-6x);
+    right: var(--cpd-space-6x);
+    width: 38px;
+    pointer-events: all;
+}
+
+/* Green dot just below the chevron button (bottom edge at 38px), hinting the marker is downward */
+.belowUnreadBar::after {
+    content: "";
+    position: absolute;
+    top: 30px;
+    left: 11px;
+    width: 4px;
+    height: 4px;
+    border-radius: 16px;
+    background-color: var(--cpd-color-bg-canvas-default);
+    border: 6px solid var(--cpd-color-icon-accent-tertiary);
+    pointer-events: none;
+}
+
+.belowUnreadBarScrollDown {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 38px;
+    width: 38px;
+    border-radius: 19px;
+    box-sizing: border-box;
+    background: var(--cpd-color-bg-canvas-default);
+    border: 1.3px solid var(--cpd-color-icon-tertiary);
+    cursor: pointer;
+}
+
+.belowUnreadBarScrollDown svg {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    color: var(--cpd-color-icon-tertiary);
+}
+
+.belowUnreadBarMarkAsRead {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    background: var(--cpd-color-bg-canvas-default);
+    border: 1.3px solid var(--cpd-color-icon-tertiary);
+    border-radius: 10px;
+    /* dot centre is at top: 38px, radius 8px → extends to 46px; add 4px visual gap → 50px - 38px = 12px margin */
+    margin: var(--cpd-space-3x) auto 0;
+    cursor: pointer;
+}
+
+.belowUnreadBarMarkAsRead svg {
+    width: 12px;
+    height: 12px;
+    flex-shrink: 0;
+    color: var(--cpd-color-icon-tertiary);
+}
+
+/* ── Jump-to-bottom button — matches legacy JumpToBottomButton ───── */
+
+.jumpToBottom {
+    position: absolute;
+    /* 12 because height is 50 but button is only 38 = 12+(50-38) = 24 */
+    bottom: var(--cpd-space-3x);
+    right: var(--cpd-space-6x);
+    width: 38px;
+    /* give it a fixed height so the badge doesn't make */
+    /* it taller and pop upwards when visible */
+    height: 50px;
+    text-align: center;
+    pointer-events: none;
+}
+
+.jumpToBottomBadge {
+    position: relative;
+    top: -12px;
+    border-radius: 16px;
+    font-weight: bold;
+    font-size: 12px;
+    line-height: 14px;
+    text-align: center;
+    display: inline-block;
+    padding: 0 var(--cpd-space-1x);
+    color: var(--cpd-color-text-on-solid-primary);
+    background-color: var(--cpd-color-icon-secondary);
+}
+
+.highlight .jumpToBottomBadge {
+    background-color: var(--cpd-color-icon-critical-primary);
+}
+
+.jumpToBottomScrollDown {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    box-sizing: border-box;
+    background: var(--cpd-color-bg-canvas-default);
+    border: 1.3px solid var(--cpd-color-icon-tertiary);
+    cursor: pointer;
+    pointer-events: all;
+}
+
+.jumpToBottomScrollDown svg {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    color: var(--cpd-color-icon-tertiary);
+}
diff --git a/packages/shared-components/src/room/timeline/TimelineView/TimelineOverlayButtons.stories.tsx b/packages/shared-components/src/room/timeline/TimelineView/TimelineOverlayButtons.stories.tsx
new file mode 100644
index 0000000000..daf46a51b4
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/TimelineView/TimelineOverlayButtons.stories.tsx
@@ -0,0 +1,104 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+import { fn } from "storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { TimelineOverlayButtons } from "./TimelineOverlayButtons";
+import type { ImmediateScroll, TimelineViewActions, TimelineViewSnapshot } from "./types";
+
+// The overlay takes an already-split snapshot + actions (not a ViewModel), so the
+// story flattens them into props — this lets interaction tests override a single
+// action (e.g. onJumpToLive) without rebuilding the whole object.
+type OverlayStoryProps = TimelineViewSnapshot & TimelineViewActions & { scrollNow: ImmediateScroll };
+
+const TimelineOverlayButtonsWrapper = ({
+    onStartReached,
+    onEndReached,
+    onAnchorReached,
+    onVisibleRangeChanged,
+    onAtBottomStateChange,
+    onJumpToReadMarker,
+    onMarkAllAsRead,
+    onJumpToLive,
+    scrollNow,
+    ...snapshot
+}: OverlayStoryProps): JSX.Element => {
+    const vm: TimelineViewActions = {
+        onStartReached,
+        onEndReached,
+        onAnchorReached,
+        onVisibleRangeChanged,
+        onAtBottomStateChange,
+        onJumpToReadMarker,
+        onMarkAllAsRead,
+        onJumpToLive,
+    };
+    return <TimelineOverlayButtons snapshot={snapshot} vm={vm} scrollNow={scrollNow} />;
+};
+
+const meta = {
+    title: "Timeline/TimelineOverlayButtons",
+    component: TimelineOverlayButtonsWrapper,
+    tags: ["autodocs"],
+    args: {
+        // Snapshot defaults: scrolled up off the live end so the jump-to-bottom shows.
+        items: [],
+        atLiveEnd: false,
+        pendingAnchor: null,
+        highlightedEventId: null,
+        isAtBottom: false,
+        canJumpToReadMarker: false,
+        numUnreadMessages: 0,
+        hasHighlights: false,
+        // Actions.
+        onStartReached: fn(),
+        onEndReached: fn(),
+        onAnchorReached: fn(),
+        onVisibleRangeChanged: fn(),
+        onAtBottomStateChange: fn(),
+        onJumpToReadMarker: fn(),
+        onMarkAllAsRead: fn(),
+        onJumpToLive: fn(),
+        scrollNow: fn(),
+    },
+    // The overlay absolutely fills its positioned parent; give it a sized box to sit in.
+    decorators: [
+        (Story) => (
+            <div style={{ position: "relative", width: "360px", height: "260px", border: "1px solid #ccc" }}>
+                <Story />
+            </div>
+        ),
+    ],
+} satisfies Meta<typeof TimelineOverlayButtonsWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Scrolled up off the live end: the jump-to-bottom button, no unread. */
+export const JumpToBottom: Story = {};
+
+/** Jump-to-bottom carrying an unread-message badge. */
+export const JumpToBottomWithUnread: Story = {
+    args: { numUnreadMessages: 5 },
+};
+
+/** Jump-to-bottom with the highlight (mention/keyword) colouring. */
+export const JumpToBottomWithHighlight: Story = {
+    args: { numUnreadMessages: 3, hasHighlights: true },
+};
+
+/** Read marker sits above the viewport: scroll-up + mark-as-read bar (top-right). */
+export const UnreadMarkerAbove: Story = {
+    args: { atLiveEnd: true, isAtBottom: true, canJumpToReadMarker: "above" },
+};
+
+/** Read marker sits below the viewport: scroll-down + mark-as-read bar. */
+export const UnreadMarkerBelow: Story = {
+    args: { atLiveEnd: true, isAtBottom: true, canJumpToReadMarker: "below" },
+};
diff --git a/packages/shared-components/src/room/timeline/TimelineView/TimelineOverlayButtons.test.tsx b/packages/shared-components/src/room/timeline/TimelineView/TimelineOverlayButtons.test.tsx
new file mode 100644
index 0000000000..4496f5fb24
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/TimelineView/TimelineOverlayButtons.test.tsx
@@ -0,0 +1,179 @@
+/*
+ * Copyright 2026 Element Creations 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 { render, screen } from "@test-utils";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi } from "vitest";
+
+import { TimelineOverlayButtons } from "./TimelineOverlayButtons";
+import type { TimelineViewActions, TimelineViewSnapshot } from "./types";
+
+const baseSnapshot: TimelineViewSnapshot = {
+    items: [],
+    atLiveEnd: true,
+    pendingAnchor: null,
+    highlightedEventId: null,
+    isAtBottom: true,
+    canJumpToReadMarker: false,
+    numUnreadMessages: 0,
+    hasHighlights: false,
+};
+
+// vi.fn() carries a constructable signature that trips assignability to the
+// action method types, so cast the record of spies to the interface.
+function makeActions(): TimelineViewActions {
+    return {
+        onStartReached: vi.fn(),
+        onEndReached: vi.fn(),
+        onAnchorReached: vi.fn(),
+        onVisibleRangeChanged: vi.fn(),
+        onAtBottomStateChange: vi.fn(),
+        onJumpToReadMarker: vi.fn(),
+        onMarkAllAsRead: vi.fn(),
+        onJumpToLive: vi.fn(),
+    } as unknown as TimelineViewActions;
+}
+
+// The jump controls must be exposed to AT/keyboard (the overlay is not aria-hidden),
+// so plain role queries (which exclude hidden elements) are expected to find them.
+const button = (name: string): HTMLElement => screen.getByRole("button", { name });
+const queryButton = (name: string): HTMLElement | null => screen.queryByRole("button", { name });
+
+const JUMP_TO_BOTTOM = "Scroll to most recent messages";
+const JUMP_READ_MARKER = "Jump to first unread message.";
+const MARK_ALL_READ = "Mark all as read";
+
+describe("<TimelineOverlayButtons />", () => {
+    it("renders no buttons at the live bottom with no read marker", () => {
+        const actions = makeActions();
+        render(<TimelineOverlayButtons snapshot={baseSnapshot} vm={actions} scrollNow={vi.fn()} />);
+
+        expect(queryButton(JUMP_TO_BOTTOM)).toBeNull();
+        expect(queryButton(JUMP_READ_MARKER)).toBeNull();
+        expect(queryButton(MARK_ALL_READ)).toBeNull();
+    });
+
+    describe("jump-to-bottom button", () => {
+        it("shows when not at the live end", () => {
+            render(
+                <TimelineOverlayButtons
+                    snapshot={{ ...baseSnapshot, atLiveEnd: false }}
+                    vm={makeActions()}
+                    scrollNow={vi.fn()}
+                />,
+            );
+            expect(button(JUMP_TO_BOTTOM)).toBeInTheDocument();
+        });
+
+        it("shows when at the live end but scrolled up off the bottom", () => {
+            render(
+                <TimelineOverlayButtons
+                    snapshot={{ ...baseSnapshot, atLiveEnd: true, isAtBottom: false }}
+                    vm={makeActions()}
+                    scrollNow={vi.fn()}
+                />,
+            );
+            expect(button(JUMP_TO_BOTTOM)).toBeInTheDocument();
+        });
+
+        it("calls onJumpToLive with the imperative scroll handle when clicked", async () => {
+            const user = userEvent.setup();
+            const actions = makeActions();
+            const scrollNow = vi.fn();
+            render(
+                <TimelineOverlayButtons
+                    snapshot={{ ...baseSnapshot, isAtBottom: false }}
+                    vm={actions}
+                    scrollNow={scrollNow}
+                />,
+            );
+
+            await user.click(button(JUMP_TO_BOTTOM));
+
+            expect(actions.onJumpToLive).toHaveBeenCalledWith(scrollNow);
+        });
+
+        it("renders the unread badge count", () => {
+            render(
+                <TimelineOverlayButtons
+                    snapshot={{ ...baseSnapshot, isAtBottom: false, numUnreadMessages: 7 }}
+                    vm={makeActions()}
+                    scrollNow={vi.fn()}
+                />,
+            );
+            expect(screen.getByText("7")).toBeInTheDocument();
+        });
+
+        it("omits the badge when there are no unread messages", () => {
+            render(
+                <TimelineOverlayButtons
+                    snapshot={{ ...baseSnapshot, isAtBottom: false, numUnreadMessages: 0 }}
+                    vm={makeActions()}
+                    scrollNow={vi.fn()}
+                />,
+            );
+            expect(screen.queryByText("0")).toBeNull();
+        });
+
+        it("applies the highlight style when there are highlight messages", () => {
+            const { container } = render(
+                <TimelineOverlayButtons
+                    snapshot={{ ...baseSnapshot, isAtBottom: false, numUnreadMessages: 1, hasHighlights: true }}
+                    vm={makeActions()}
+                    scrollNow={vi.fn()}
+                />,
+            );
+            expect(container.querySelector('[class*="highlight"]')).not.toBeNull();
+        });
+    });
+
+    describe("unread bar", () => {
+        it("shows scroll-up and mark-as-read when the marker is above the viewport", () => {
+            render(
+                <TimelineOverlayButtons
+                    snapshot={{ ...baseSnapshot, canJumpToReadMarker: "above" }}
+                    vm={makeActions()}
+                    scrollNow={vi.fn()}
+                />,
+            );
+            expect(button(JUMP_READ_MARKER)).toBeInTheDocument();
+            expect(button(MARK_ALL_READ)).toBeInTheDocument();
+        });
+
+        it("shows the bar when the marker is below the viewport", () => {
+            render(
+                <TimelineOverlayButtons
+                    snapshot={{ ...baseSnapshot, canJumpToReadMarker: "below" }}
+                    vm={makeActions()}
+                    scrollNow={vi.fn()}
+                />,
+            );
+            expect(button(JUMP_READ_MARKER)).toBeInTheDocument();
+            expect(button(MARK_ALL_READ)).toBeInTheDocument();
+        });
+
+        it("calls onJumpToReadMarker with the scroll handle and onMarkAllAsRead on click", async () => {
+            const user = userEvent.setup();
+            const actions = makeActions();
+            const scrollNow = vi.fn();
+            render(
+                <TimelineOverlayButtons
+                    snapshot={{ ...baseSnapshot, canJumpToReadMarker: "above" }}
+                    vm={actions}
+                    scrollNow={scrollNow}
+                />,
+            );
+
+            await user.click(button(JUMP_READ_MARKER));
+            expect(actions.onJumpToReadMarker).toHaveBeenCalledWith(scrollNow);
+
+            await user.click(button(MARK_ALL_READ));
+            expect(actions.onMarkAllAsRead).toHaveBeenCalledTimes(1);
+        });
+    });
+});
diff --git a/packages/shared-components/src/room/timeline/TimelineView/TimelineOverlayButtons.tsx b/packages/shared-components/src/room/timeline/TimelineView/TimelineOverlayButtons.tsx
new file mode 100644
index 0000000000..33ba9fd047
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/TimelineView/TimelineOverlayButtons.tsx
@@ -0,0 +1,117 @@
+/*
+ * Copyright 2026 Element Creations 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, { useCallback, type JSX } from "react";
+import classNames from "classnames";
+import { Tooltip } from "@vector-im/compound-web";
+import { ChevronUpIcon, ChevronDownIcon, CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import { useI18n } from "../../../core/i18n/i18nContext";
+import type { ImmediateScroll, TimelineViewActions, TimelineViewSnapshot } from "./types";
+import styles from "./TimelineOverlayButtons.module.css";
+
+interface TimelineOverlayButtonsProps {
+    snapshot: TimelineViewSnapshot;
+    vm: TimelineViewActions;
+    /** Imperative scroll-to-anchor handle from the parent View; the VM invokes it
+     * when the target is already loaded, else falls back to a pendingAnchor load. */
+    scrollNow: ImmediateScroll;
+}
+
+/**
+ * Absolutely-positioned overlay on top of the timeline list:
+ * - **Unread bar** — shown when `canJumpToReadMarker` is `"above"`/`"below"`; a
+ *   scroll-to-marker + mark-as-read pair at the top-right.
+ * - **Jump-to-bottom** (bottom-right) — shown when not at the live bottom, with an
+ *   optional unread badge and highlight colouring.
+ */
+export function TimelineOverlayButtons({ snapshot, vm, scrollNow }: TimelineOverlayButtonsProps): JSX.Element {
+    const { translate: _t } = useI18n();
+
+    const readMarkerDirection = snapshot.canJumpToReadMarker;
+    const showJumpToBottom = !snapshot.atLiveEnd || !snapshot.isAtBottom;
+
+    const onJumpToReadMarkerClick = useCallback(() => vm.onJumpToReadMarker(scrollNow), [vm, scrollNow]);
+    const onJumpToLiveClick = useCallback(() => vm.onJumpToLive(scrollNow), [vm, scrollNow]);
+
+    return (
+        // Non-interactive layer (pointer-events:none) so clicks fall through to the list;
+        // only the buttons re-enable them. Must NOT be aria-hidden — these are AT-reachable.
+        <div className={styles.overlay}>
+            {/* Top unread bar — marker is above the viewport */}
+            {readMarkerDirection === "above" && (
+                <div className={styles.topUnreadBar}>
+                    <Tooltip description={_t("room|jump_read_marker")} placement="left">
+                        <button
+                            className={styles.topUnreadBarScrollUp}
+                            aria-label={_t("room|jump_read_marker")}
+                            onClick={onJumpToReadMarkerClick}
+                            type="button"
+                        >
+                            <ChevronUpIcon />
+                        </button>
+                    </Tooltip>
+                    <Tooltip description={_t("notifications|mark_all_read")} placement="left">
+                        <button
+                            className={styles.topUnreadBarMarkAsRead}
+                            aria-label={_t("notifications|mark_all_read")}
+                            onClick={() => vm.onMarkAllAsRead()}
+                            type="button"
+                        >
+                            <CloseIcon />
+                        </button>
+                    </Tooltip>
+                </div>
+            )}
+
+            {/* Unread bar — marker is below the viewport; sits at top-right like the above bar */}
+            {readMarkerDirection === "below" && (
+                <div className={styles.belowUnreadBar}>
+                    <Tooltip description={_t("room|jump_read_marker")} placement="left">
+                        <button
+                            className={styles.belowUnreadBarScrollDown}
+                            aria-label={_t("room|jump_read_marker")}
+                            onClick={onJumpToReadMarkerClick}
+                            type="button"
+                        >
+                            <ChevronDownIcon />
+                        </button>
+                    </Tooltip>
+                    <Tooltip description={_t("notifications|mark_all_read")} placement="left">
+                        <button
+                            className={styles.belowUnreadBarMarkAsRead}
+                            aria-label={_t("notifications|mark_all_read")}
+                            onClick={() => vm.onMarkAllAsRead()}
+                            type="button"
+                        >
+                            <CloseIcon />
+                        </button>
+                    </Tooltip>
+                </div>
+            )}
+
+            {/* Jump-to-bottom button — matches legacy JumpToBottomButton */}
+            {showJumpToBottom && (
+                <div className={classNames(styles.jumpToBottom, { [styles.highlight]: snapshot.hasHighlights })}>
+                    <Tooltip description={_t("room|jump_to_bottom_button")} placement="left">
+                        <button
+                            className={styles.jumpToBottomScrollDown}
+                            aria-label={_t("room|jump_to_bottom_button")}
+                            onClick={onJumpToLiveClick}
+                            type="button"
+                        >
+                            <ChevronDownIcon />
+                        </button>
+                    </Tooltip>
+                    {snapshot.numUnreadMessages > 0 && (
+                        <div className={styles.jumpToBottomBadge}>{snapshot.numUnreadMessages}</div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/packages/shared-components/src/room/timeline/TimelineView/TimelineView.module.css b/packages/shared-components/src/room/timeline/TimelineView/TimelineView.module.css
new file mode 100644
index 0000000000..1b4dd5829f
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/TimelineView/TimelineView.module.css
@@ -0,0 +1,57 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+.root {
+    height: 100%;
+    width: 100%;
+    position: relative;
+}
+
+.scroller {
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    /* Turn off the browser's own scroll anchoring. It would try to hold the scroll position
+       when content changes, which conflicts with TanStack doing the same job in JS. */
+    overflow-anchor: none;
+}
+
+/* Applied during the first load. The list is laid out and scrolled into position, but kept
+   hidden (a spinner shows instead) so the user does not watch it shuffle into place. */
+.hidden {
+    visibility: hidden;
+}
+
+.list {
+    width: 100%;
+    position: relative;
+    list-style: none;
+    margin: 0;
+}
+
+/* Rows are positioned absolutely, stacked by TanStack rather than by normal document flow.
+   TanStack writes each row's transform and the container's height straight to the DOM (the
+   directDomUpdates option), so never set transform or height here — it would be overwritten
+   or fight with what TanStack writes. */
+.tile {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    overflow-anchor: none;
+    list-style: none;
+}
+
+/* Holds the spinner shown in the middle of the panel while the timeline is still hidden. */
+.cover {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
diff --git a/packages/shared-components/src/room/timeline/TimelineView/TimelineView.stories.tsx b/packages/shared-components/src/room/timeline/TimelineView/TimelineView.stories.tsx
new file mode 100644
index 0000000000..0331cdc977
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/TimelineView/TimelineView.stories.tsx
@@ -0,0 +1,152 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+import { fn, expect, waitFor } from "storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { TimelineView } from "./TimelineView";
+import type { TimelineItem, TimelineViewActions, TimelineViewSnapshot } from "./types";
+import { useMockedViewModel } from "../../../core/viewmodel";
+import { withViewDocs } from "../../../../.storybook/withViewDocs";
+
+// A handful of deterministic, fixed-height message rows so the virtualizer lays
+// out predictably for the visual snapshot (no avatars/media to decode).
+const SENDERS = ["Alice", "Bob", "Carol"];
+const LINES = [
+    "Morning! Did the deploy go out?",
+    "Yep, green across the board.",
+    "Nice. I'll close the ticket then.",
+    "One flaky test on CI, re-running.",
+    "Passed on the second go.",
+    "Great, merging now.",
+];
+const mockEvents = Array.from({ length: 12 }, (_, i) => ({
+    key: `evt-${i}`,
+    sender: SENDERS[i % SENDERS.length],
+    body: LINES[i % LINES.length],
+}));
+const mockContent = new Map(mockEvents.map((e) => [e.key, e]));
+
+const mockItems: TimelineItem[] = mockEvents.map((e) => ({
+    key: e.key,
+    kind: "event",
+    continuation: false,
+    lastInSection: true,
+}));
+
+const renderItem = (item: TimelineItem): React.ReactNode => {
+    const content = mockContent.get(item.key);
+    if (!content) return null;
+    return (
+        <div style={{ padding: "6px 12px", minHeight: "44px", boxSizing: "border-box" }}>
+            <div style={{ fontWeight: 600, fontSize: "13px", color: "var(--cpd-color-text-primary)" }}>
+                {content.sender}
+            </div>
+            <div style={{ fontSize: "14px", color: "var(--cpd-color-text-primary)" }}>{content.body}</div>
+        </div>
+    );
+};
+
+type TimelineStoryProps = TimelineViewSnapshot & TimelineViewActions;
+
+const TimelineViewWrapperImpl = ({
+    onStartReached,
+    onEndReached,
+    onAnchorReached,
+    onVisibleRangeChanged,
+    onAtBottomStateChange,
+    onJumpToReadMarker,
+    onMarkAllAsRead,
+    onJumpToLive,
+    ...snapshot
+}: TimelineStoryProps): JSX.Element => {
+    const vm = useMockedViewModel(snapshot, {
+        onStartReached,
+        onEndReached,
+        onAnchorReached,
+        onVisibleRangeChanged,
+        onAtBottomStateChange,
+        onJumpToReadMarker,
+        onMarkAllAsRead,
+        onJumpToLive,
+    });
+    return (
+        <div style={{ height: "400px", border: "1px solid #ccc" }}>
+            <TimelineView vm={vm} renderItem={renderItem} />
+        </div>
+    );
+};
+const TimelineViewWrapper = withViewDocs(TimelineViewWrapperImpl, TimelineView);
+
+// The timeline lays out hidden behind a cover and reveals once the anchor settles
+// (a couple of animation frames). Wait for that before the snapshot is captured.
+const waitForReveal: NonNullable<StoryObj["play"]> = async ({ canvasElement }) => {
+    const scroller = canvasElement.querySelector<HTMLElement>('[data-testid="timeline-scroller"]');
+    await waitFor(() => expect(scroller).toBeVisible());
+};
+
+const meta = {
+    title: "Timeline/TimelineView",
+    component: TimelineViewWrapper,
+    tags: ["autodocs"],
+    args: {
+        items: mockItems,
+        atLiveEnd: true,
+        pendingAnchor: null,
+        highlightedEventId: null,
+        isAtBottom: true,
+        canJumpToReadMarker: false,
+        numUnreadMessages: 0,
+        hasHighlights: false,
+        onStartReached: fn(),
+        onEndReached: fn(),
+        onAnchorReached: fn(),
+        onVisibleRangeChanged: fn(),
+        onAtBottomStateChange: fn(),
+        onJumpToReadMarker: fn(),
+        onMarkAllAsRead: fn(),
+        onJumpToLive: fn(),
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: "420px" }}>
+                <Story />
+            </div>
+        ),
+    ],
+    play: waitForReveal,
+    // The virtualizer measures real DOM and reveals over a couple of frames; allow a
+    // little more pixel slack than the global default to absorb sub-pixel layout jitter.
+    parameters: {
+        snapshot: {
+            failureThreshold: 30,
+        },
+    },
+} satisfies Meta<typeof TimelineViewWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** A live timeline pinned to the bottom — no overlay controls. */
+export const Default: Story = {};
+
+/** Scrolled up off the live end, with unread messages: the jump-to-bottom badge shows. */
+export const WithJumpToBottom: Story = {
+    args: {
+        atLiveEnd: false,
+        isAtBottom: false,
+        numUnreadMessages: 3,
+    },
+};
+
+/** A read marker above the viewport surfaces the unread bar. */
+export const WithUnreadMarker: Story = {
+    args: {
+        canJumpToReadMarker: "above",
+    },
+};
diff --git a/packages/shared-components/src/room/timeline/TimelineView/TimelineView.test.tsx b/packages/shared-components/src/room/timeline/TimelineView/TimelineView.test.tsx
new file mode 100644
index 0000000000..a0f6f7dc94
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/TimelineView/TimelineView.test.tsx
@@ -0,0 +1,169 @@
+/*
+ * Copyright 2026 Element Creations 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 { act, render, screen, waitFor, type RenderResult } from "@test-utils";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi } from "vitest";
+
+import { TimelineView } from "./TimelineView";
+import type { TimelineItem, TimelineViewModel, TimelineViewSnapshot } from "./types";
+
+const baseSnapshot: TimelineViewSnapshot = {
+    items: [],
+    atLiveEnd: true,
+    pendingAnchor: null,
+    highlightedEventId: null,
+    isAtBottom: true,
+    canJumpToReadMarker: false,
+    numUnreadMessages: 0,
+    hasHighlights: false,
+};
+
+function eventItems(count: number, offset = 0): TimelineItem[] {
+    return Array.from({ length: count }, (_, i) => ({
+        key: `evt-${offset + i}`,
+        kind: "event" as const,
+        continuation: false,
+        lastInSection: true,
+    }));
+}
+
+type Actions = {
+    onStartReached: ReturnType<typeof vi.fn>;
+    onEndReached: ReturnType<typeof vi.fn>;
+    onAnchorReached: ReturnType<typeof vi.fn>;
+    onVisibleRangeChanged: ReturnType<typeof vi.fn>;
+    onAtBottomStateChange: ReturnType<typeof vi.fn>;
+    onJumpToReadMarker: ReturnType<typeof vi.fn>;
+    onMarkAllAsRead: ReturnType<typeof vi.fn>;
+    onJumpToLive: ReturnType<typeof vi.fn>;
+};
+
+interface FakeVm {
+    vm: TimelineViewModel;
+    actions: Actions;
+    /** Push a new snapshot and notify subscribers (wrapped in act). */
+    update: (patch: Partial<TimelineViewSnapshot>) => void;
+}
+
+function makeFakeVm(initial: Partial<TimelineViewSnapshot> = {}): FakeVm {
+    let snapshot: TimelineViewSnapshot = { ...baseSnapshot, ...initial };
+    const listeners = new Set<() => void>();
+    const actions: Actions = {
+        onStartReached: vi.fn(),
+        onEndReached: vi.fn(),
+        onAnchorReached: vi.fn(),
+        onVisibleRangeChanged: vi.fn(),
+        onAtBottomStateChange: vi.fn(),
+        onJumpToReadMarker: vi.fn(),
+        onMarkAllAsRead: vi.fn(),
+        onJumpToLive: vi.fn(),
+    };
+    // vi.fn() carries a constructable signature that trips assignability to the
+    // ViewModel's action method types, so cast the assembled object.
+    const vm = {
+        getSnapshot: () => snapshot,
+        subscribe: (listener: () => void) => {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+        ...actions,
+    } as unknown as TimelineViewModel;
+    const update = (patch: Partial<TimelineViewSnapshot>): void => {
+        act(() => {
+            snapshot = { ...snapshot, ...patch };
+            listeners.forEach((l) => l());
+        });
+    };
+    return { vm, actions, update };
+}
+
+// Each row is a fixed 40px so the virtualizer measures a deterministic layout.
+const ROW_HEIGHT = 40;
+const renderItem = (item: TimelineItem): React.ReactNode => (
+    <div data-testid={`row-${item.key}`} style={{ height: ROW_HEIGHT }}>
+        {item.key}
+    </div>
+);
+
+// Fixed-height viewport: the TimelineView is height:100%, so its parent must size it.
+const VIEWPORT_HEIGHT = 300;
+function renderTimeline(vm: TimelineViewModel): RenderResult {
+    return render(
+        <div style={{ height: VIEWPORT_HEIGHT, width: 320 }}>
+            <TimelineView vm={vm} renderItem={renderItem} />
+        </div>,
+    );
+}
+
+describe("<TimelineView />", () => {
+    it("renders each item via the renderItem callback", async () => {
+        const { vm } = makeFakeVm({ items: eventItems(5) });
+        renderTimeline(vm);
+
+        expect(await screen.findByTestId("row-evt-0")).toBeInTheDocument();
+        expect(screen.getByTestId("row-evt-4")).toBeInTheDocument();
+    });
+
+    it("stays hidden behind the cover then reveals after the anchor settles", async () => {
+        // A list taller than the viewport so there is a real scroll offset to settle on.
+        const { vm, actions } = makeFakeVm({ items: eventItems(30) });
+        renderTimeline(vm);
+
+        const scroller = screen.getByTestId("timeline-scroller");
+        // Cover is up initially: the scroller is hidden and the anchor hasn't settled.
+        expect(scroller).toHaveStyle({ visibility: "hidden" });
+        expect(actions.onAnchorReached).not.toHaveBeenCalled();
+
+        await waitFor(() => expect(actions.onAnchorReached).toHaveBeenCalledTimes(1), { timeout: 5000 });
+        await waitFor(() => expect(scroller).toHaveStyle({ visibility: "visible" }));
+    });
+
+    it("reports the visible range and at-bottom state once live", async () => {
+        const { vm, actions } = makeFakeVm({ items: eventItems(30) });
+        renderTimeline(vm);
+
+        await waitFor(() => expect(actions.onAnchorReached).toHaveBeenCalled(), { timeout: 5000 });
+        await waitFor(() => expect(actions.onVisibleRangeChanged).toHaveBeenCalled());
+        await waitFor(() => expect(actions.onAtBottomStateChange).toHaveBeenCalled());
+
+        // Indices are 0-based into the items array.
+        const [start, end] = actions.onVisibleRangeChanged.mock.calls.at(-1)!;
+        expect(start).toBeGreaterThanOrEqual(0);
+        expect(end).toBeGreaterThan(start);
+    });
+
+    it("re-renders when the view model pushes a new snapshot", async () => {
+        const { vm, update } = makeFakeVm({ items: eventItems(5) });
+        renderTimeline(vm);
+        await screen.findByTestId("row-evt-0");
+
+        update({ items: eventItems(6) });
+
+        expect(await screen.findByTestId("row-evt-5")).toBeInTheDocument();
+    });
+
+    it("shows the jump-to-bottom control once revealed when scrolled off the bottom", async () => {
+        const { vm, actions } = makeFakeVm({ items: eventItems(30), isAtBottom: false });
+        renderTimeline(vm);
+
+        const jumpToBottom = await screen.findByRole(
+            "button",
+            { name: "Scroll to most recent messages" },
+            { timeout: 5000 },
+        );
+
+        const user = userEvent.setup();
+        await user.click(jumpToBottom);
+        expect(actions.onJumpToLive).toHaveBeenCalledTimes(1);
+        // The View hands the VM its imperative scroll handle.
+        expect(actions.onJumpToLive.mock.calls[0][0]).toBeTypeOf("function");
+    });
+});
diff --git a/packages/shared-components/src/room/timeline/TimelineView/TimelineView.tsx b/packages/shared-components/src/room/timeline/TimelineView/TimelineView.tsx
new file mode 100644
index 0000000000..30a5936ee7
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/TimelineView/TimelineView.tsx
@@ -0,0 +1,402 @@
+/*
+ * Copyright 2026 Element Creations 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, { useCallback, useEffect, useLayoutEffect, useRef, useState, type JSX } from "react";
+import classNames from "classnames";
+import { useVirtualizer, type VirtualItem, type Virtualizer } from "@tanstack/react-virtual";
+import { InlineSpinner } from "@vector-im/compound-web";
+
+import { useViewModel } from "../../../core/viewmodel/useViewModel";
+import type { AnchorAlign, ImmediateScroll, TimelineItem, TimelineViewProps } from "./types";
+import { BACKWARD_LOADING_KEY, FORWARD_LOADING_KEY } from "./types";
+import { TimelineOverlayButtons } from "./TimelineOverlayButtons";
+import styles from "./TimelineView.module.css";
+
+/**
+ * Renders the room timeline: a scrollable list of messages.
+ *
+ * The list is virtualised — only the rows currently on screen (plus a few just outside it)
+ * exist in the DOM, so a room with thousands of messages stays fast. TanStack Virtual does
+ * that work; we drive it from `RoomTimelineViewModel`, which supplies the rows to show and
+ * is told in return what the user can see.
+ *
+ * The hard part of a chat timeline is holding the scroll position steady while the list
+ * changes underneath the reader. Rows appear at the top when older history loads, get
+ * removed when the loaded window is trimmed, and loading spinners come and go. Each of
+ * those shifts everything below it, which without care makes the message someone is
+ * reading jump away mid-sentence. How each case is handled:
+ *
+ *  - **Older history arrives at the top.** `anchorTo: "end"` makes TanStack remember which
+ *    row the user is looking at and, once the new rows are inserted above it, adjust the
+ *    scroll position by the height that was added so that row stays exactly where it was
+ *    on screen. It does this before the browser paints, so the shift is never visible.
+ *
+ *    `isValidAnchorItem` stops it picking a loading spinner as that remembered row: the
+ *    spinner is replaced by the messages it was waiting for, so afterwards there is no
+ *    such row left to line up against and the timeline would lurch to the top instead.
+ *
+ *  - **New messages arrive at the bottom.** `followOnAppend` scrolls down to keep them in
+ *    view, but only when we are already at the live end and not jumping somewhere else.
+ *
+ *  - **Reaching either end**, which is the cue to load more, is worked out from which rows
+ *    are currently rendered. TanStack has no "you reached the top/bottom" callback.
+ *
+ *  - **Jumping to a particular message** looks up how far down that message sits and
+ *    scrolls straight to that position. We avoid TanStack's `scrollToIndex`, which keeps
+ *    steering towards a row *number*: if history loads while it is doing that, every row
+ *    shifts down and it follows the wrong one to the top. See `offsetForKey`.
+ *
+ * `directDomUpdates: true` lets TanStack position rows by writing to the DOM itself rather
+ * than going through a React render, so measuring a row and moving it happen in the same
+ * frame (splitting them across two caused a visible stutter). React still re-renders when
+ * the set of visible rows changes.
+ *
+ * Known gap: `overscan` counts rows rather than pixels, so how far it actually reaches
+ * beyond the viewport varies with how tall those rows happen to be.
+ */
+
+/** Seed height for not-yet-measured rows; kept near a typical chat row so the
+ * estimate→measured correction stays small. TanStack caches real heights by key thereafter. */
+const ESTIMATED_ITEM_HEIGHT = 48;
+/** Rows rendered beyond the visible range each side — a COUNT, not px; ~16 ≈ a screenful. */
+const OVERSCAN = 16;
+/** px from the list bottom still counted as "at the bottom". */
+const AT_BOTTOM_THRESHOLD_PX = 4;
+/**
+ * How long we are willing to keep the timeline hidden on first load, in milliseconds.
+ *
+ * A spinner covers the list while it scrolls to the message it should start at, because that
+ * scroll is neither instant nor nice to watch: rows are still being measured, so the user
+ * would see blank white space where messages have not been placed yet, and would watch rows
+ * resize as their content finishes arriving — URL previews appearing, polls decrypting. We
+ * drop the cover as soon as the target row settles at the position it was aiming for.
+ *
+ * That content can keep changing height for a while, which shifts the target underneath the
+ * scroll, so settling sometimes takes longer than expected — and occasionally never quite
+ * completes, for instance when the requested alignment would need more content below it than
+ * the room has, and the browser clamps the scroll short of it. This is the point at which we
+ * stop waiting and show the timeline anyway: a slightly unsettled timeline beats an endless
+ * spinner.
+ */
+const REVEAL_TIMEOUT_MS = 1000;
+
+/**
+ * How far the view has got through its first load:
+ *  - "init"    — nothing rendered yet; waiting for the first batch of messages.
+ *  - "placing" — rows are laid out but still hidden while we scroll to the right spot.
+ *  - "live"    — the timeline is visible and the user is in control of scrolling.
+ */
+type Phase = "init" | "placing" | "live";
+
+export function TimelineView({ vm, renderItem }: TimelineViewProps): JSX.Element {
+    const snapshot = useViewModel(vm);
+
+    // The effects and callbacks below run outside React's render — from scroll events and
+    // animation frames — so they cannot use the `snapshot` variable captured when this
+    // function last ran, as it may be out of date by then. These refs always hold the
+    // latest values for them to read.
+    const snapshotRef = useRef(snapshot);
+    snapshotRef.current = snapshot;
+
+    // Loading spinners are ordinary entries in this list (kind: "loading") rather than
+    // something floating on top of it. That way each spinner occupies real space in the
+    // scroll area, so showing or hiding one is just another change to the list that the
+    // scroll anchoring described above already knows how to absorb.
+    const items = snapshot.items;
+    const itemsRef = useRef(items);
+    itemsRef.current = items;
+
+    const scrollerRef = useRef<HTMLDivElement | null>(null);
+
+    // On the first load we lay the rows out, scroll to the message we should start at, and
+    // only then show the result. Otherwise the user would watch the list shuffle around as
+    // rows are measured and the scroll position corrected. A spinner covers the gap. This
+    // happens once per room, as the panel is recreated when the room changes.
+    const [revealed, setRevealed] = useState(false);
+    const revealedRef = useRef(false);
+
+    // Gives each row a stable identity (its event id). TanStack uses these to recognise the
+    // same row from one update to the next, which is what makes the scroll anchoring
+    // possible at all. It also compares the first row's key between renders to spot when
+    // rows have been added or removed at the top, so this must always read the current list.
+    const getItemKey = useCallback((index: number): string => items[index]?.key ?? String(index), [items]);
+
+    // Refuses loading spinners as the row the scroll position is anchored to; see the note
+    // on `isValidAnchorItem` in the file comment above for why anchoring to one breaks.
+    //
+    // This tests the row's key rather than its position in the list. When rows are added or
+    // removed, TanStack is still working from the positions as they were before the change
+    // while `items` already reflects it, so looking a row up by position here would check
+    // the wrong one. The spinner keys are shared with the view model, in types.ts.
+    const isValidAnchorItem = useCallback(
+        (item: VirtualItem): boolean => item.key !== BACKWARD_LOADING_KEY && item.key !== FORWARD_LOADING_KEY,
+        [],
+    );
+
+    // ─── State used by the scroll reporting below ──────────────────────────────
+    const phaseRef = useRef<Phase>("init");
+    // We only want to tell the view model about things that have actually changed, so these
+    // hold the last values we sent and repeats are skipped.
+    const lastVisibleRangeRef = useRef<{ start: number; end: number } | null>(null);
+    const lastAtBottomRef = useRef<boolean | null>(null);
+    // For the "reached the top/bottom" reports we remember a short description of the
+    // situation we last reported, in the form "<number of rows>:<row index>", and clear it
+    // whenever we move away from that end. This stops us reporting over and over while
+    // sitting still at the end, while still reporting again once more history has loaded
+    // and the user scrolls further into it.
+    const startEdgeTokenRef = useRef("");
+    const endEdgeTokenRef = useRef("");
+
+    // Tells the view model what the user can currently see: which rows are on screen,
+    // whether we are at the bottom, and whether either end of the loaded messages has been
+    // reached (the cue for it to load more). TanStack calls this whenever it updates —
+    // on scroll, after measuring a row, or when the set of visible rows changes.
+    //
+    // This only reads state, it never scrolls. It stays quiet until the first load has
+    // finished and while we are scrolling to a message the view model asked for, because
+    // until then the scroll position reflects our own automatic placement rather than
+    // anything the user did.
+    const reportVisibleState = useCallback(
+        (v: Virtualizer<HTMLDivElement, Element>): void => {
+            if (phaseRef.current !== "live" || snapshotRef.current.pendingAnchor !== null) return;
+            const itemCount = itemsRef.current.length;
+            const visibleRange = v.range;
+
+            // Which rows are on screen, given as positions in the items array.
+            if (
+                visibleRange &&
+                (lastVisibleRangeRef.current?.start !== visibleRange.startIndex ||
+                    lastVisibleRangeRef.current?.end !== visibleRange.endIndex)
+            ) {
+                lastVisibleRangeRef.current = { start: visibleRange.startIndex, end: visibleRange.endIndex };
+                vm.onVisibleRangeChanged(visibleRange.startIndex, visibleRange.endIndex);
+            }
+
+            // Are we scrolled to the bottom? Worked out from figures TanStack already holds
+            // (how far we have scrolled, the viewport height, the total height) rather than
+            // measuring the DOM, which would force the browser to redo layout on every call.
+            const scrollOffset = v.scrollOffset ?? 0;
+            const viewportHeight = v.scrollRect?.height ?? 0;
+            const totalSize = v.getTotalSize();
+            const atBottom = viewportHeight > 0 && scrollOffset + viewportHeight >= totalSize - AT_BOTTOM_THRESHOLD_PX;
+            if (atBottom !== lastAtBottomRef.current) {
+                lastAtBottomRef.current = atBottom;
+                vm.onAtBottomStateChange(atBottom);
+            }
+
+            // Have we reached either end of the loaded messages? True once the very first or
+            // very last row is among those being rendered, which tells the view model it may
+            // need to load more history in that direction.
+            const renderedItems = v.getVirtualItems();
+            const firstRenderedIndex = renderedItems.length ? renderedItems[0].index : -1;
+            const lastRenderedIndex = renderedItems.length ? renderedItems[renderedItems.length - 1].index : -1;
+            if (firstRenderedIndex === 0) {
+                const token = `${itemCount}:${visibleRange ? visibleRange.startIndex : 0}`;
+                if (startEdgeTokenRef.current !== token) {
+                    startEdgeTokenRef.current = token;
+                    vm.onStartReached();
+                }
+            } else {
+                startEdgeTokenRef.current = "";
+            }
+            if (itemCount > 0 && lastRenderedIndex === itemCount - 1) {
+                const token = `${itemCount}:${visibleRange ? visibleRange.endIndex : 0}`;
+                if (endEdgeTokenRef.current !== token) {
+                    endEdgeTokenRef.current = token;
+                    vm.onEndReached();
+                }
+            } else {
+                endEdgeTokenRef.current = "";
+            }
+        },
+        [vm],
+    );
+
+    const virtualizer = useVirtualizer({
+        count: items.length,
+        getScrollElement: () => scrollerRef.current,
+        // Only consulted for rows that have not been measured yet. TanStack measures each
+        // row as it renders and remembers the result by key, reusing it as rows are added,
+        // trimmed or reloaded, so we do not need a size cache of our own.
+        estimateSize: () => ESTIMATED_ITEM_HEIGHT,
+        getItemKey,
+        overscan: OVERSCAN,
+        // Keep whatever the user is looking at visually still when rows are added or
+        // removed, correcting the scroll position before the browser paints. This is the
+        // main thing stopping the timeline jumping; see the file comment for how it works.
+        anchorTo: "end",
+        // ...but never hold onto a loading spinner as that reference row (see above). This
+        // option comes from our @tanstack/virtual-core patch and is pending upstream.
+        isValidAnchorItem,
+        // Scroll down to follow newly arrived messages, but only when we are at the live end
+        // of the timeline and are not part-way through jumping somewhere else.
+        followOnAppend: snapshot.atLiveEnd && snapshot.pendingAnchor === null,
+        // Let TanStack place rows by writing to the DOM directly instead of re-rendering.
+        // Because of this, never set transform or height on a row in JSX below — it would
+        // fight with what TanStack writes.
+        directDomUpdates: true,
+        // Called on every TanStack update; we use it to report what is on screen upwards.
+        onChange: reportVisibleState,
+    });
+
+    // Works out how far down the list we would have to scroll, in pixels, to bring the row
+    // with `targetKey` into view — `align` saying whether it should end up at the top,
+    // the middle or the bottom of the viewport. Returns null if that message is not among
+    // the ones currently loaded, in which case the caller cannot scroll to it yet.
+    //
+    // Callers hand the result to `scrollToOffset`, which simply scrolls to a fixed pixel
+    // position. We deliberately do not use `scrollToIndex`: that keeps steering towards a
+    // row *number* as rows are measured, so if older history loads while it is still
+    // adjusting, every row shifts down and it follows the wrong one up to the top.
+    const offsetForKey = useCallback(
+        (targetKey: string | null, align: AnchorAlign): number | null => {
+            const idx = targetKey ? itemsRef.current.findIndex((i) => i.key === targetKey) : -1;
+            if (idx < 0) return null;
+            const info = virtualizer.getOffsetForIndex(idx, align);
+            return info ? info[0] : null;
+        },
+        [virtualizer],
+    );
+    // ─── First load: scroll to the starting message while hidden, then reveal ──
+    // Runs once, as soon as the first batch of messages arrives.
+    // Holds the pending animation frame from the settle loop below, so it can be cancelled
+    // if the panel goes away while that loop is still running — switching room part-way
+    // through the first load, for example. Without this the callback would carry on and
+    // update state on a component that no longer exists, and call a disposed view model.
+    const coldRafRef = useRef<number | undefined>(undefined);
+    useEffect(() => {
+        return () => {
+            if (coldRafRef.current !== undefined) cancelAnimationFrame(coldRafRef.current);
+        };
+    }, []);
+    useLayoutEffect(() => {
+        if (phaseRef.current !== "init" || items.length === 0) return;
+        // Move out of "init" immediately, so that if more messages arrive while we are
+        // still placing this effect runs again but returns here rather than starting over.
+        phaseRef.current = "placing";
+        // Start at the message the view model asked for. If it did not ask for one, or that
+        // message is not in the batch we were given, start at the newest message instead.
+        const anchor = snapshotRef.current.pendingAnchor;
+        const list = itemsRef.current;
+        let idx = anchor ? list.findIndex((i) => i.key === anchor.targetKey) : -1;
+        if (idx < 0) idx = list.length - 1;
+        const align: AnchorAlign = anchor?.align ?? "end";
+        // Let TanStack carry out this scroll: it keeps correcting the target as rows are
+        // measured and their real heights become known. We must not set the scroll position
+        // ourselves as well — two things moving the viewport at once end up fighting.
+        if (idx >= 0) virtualizer.scrollToIndex(idx, { align, behavior: "auto" });
+        // Now watch each frame until that row actually reaches the position it was heading
+        // for, and reveal the timeline once it has. requestAnimationFrame passes the frame's
+        // timestamp, so we can measure how long we have been waiting in real time and give up
+        let startedAt: number | undefined;
+        const tick = (now: number): void => {
+            startedAt ??= now;
+            const info = virtualizer.getOffsetForIndex(idx, align);
+            const offset = virtualizer.scrollOffset ?? 0;
+            const landed = info !== undefined && Math.abs(info[0] - offset) <= 1.5;
+            if (landed || now - startedAt >= REVEAL_TIMEOUT_MS) {
+                phaseRef.current = "live";
+                if (!revealedRef.current) {
+                    revealedRef.current = true;
+                    setRevealed(true);
+                }
+                vm.onAnchorReached();
+                return;
+            }
+            coldRafRef.current = requestAnimationFrame(tick);
+        };
+        coldRafRef.current = requestAnimationFrame(tick);
+    }, [items.length, virtualizer, vm]);
+
+    // ─── Later jumps: scroll to a message the view model has asked for ─────────
+    // Once the first load is done, the view model can ask us to jump somewhere by setting
+    // `pendingAnchor`. This is used by "jump to the latest message" and "jump to the first
+    // unread message" when the target was not already loaded, so it had to be fetched and
+    // the timeline rebuilt around it first.
+    //
+    // This effect runs after every render, so it acts as soon as those messages appear, and
+    // it scrolls before the browser paints so the jump is never seen as a scrolling motion.
+    // `lastPlacedAnchorKeyRef` records which message we last jumped to, so that later
+    // renders do not repeat the same jump and fight the user's own scrolling.
+    const lastPlacedAnchorKeyRef = useRef<string | null>(null);
+    useLayoutEffect(() => {
+        if (phaseRef.current !== "live") return;
+        const anchor = snapshotRef.current.pendingAnchor;
+        if (!anchor) {
+            lastPlacedAnchorKeyRef.current = null;
+            return;
+        }
+        if (lastPlacedAnchorKeyRef.current !== anchor.targetKey) {
+            const target = offsetForKey(anchor.targetKey, anchor.align);
+            if (target !== null) {
+                virtualizer.scrollToOffset(target);
+                lastPlacedAnchorKeyRef.current = anchor.targetKey;
+                vm.onAnchorReached();
+            }
+        }
+    });
+
+    // Handed to the overlay buttons, and through them to the view model, so it can scroll
+    // us straight away when the message it wants is already loaded — no fetch needed, and
+    // no round trip through `pendingAnchor` above.
+    const scrollNow = useCallback<ImmediateScroll>(
+        (anchor) => {
+            const target = offsetForKey(anchor.targetKey, anchor.align);
+            if (target !== null) virtualizer.scrollToOffset(target);
+        },
+        [offsetForKey, virtualizer],
+    );
+
+    const virtualItems = virtualizer.getVirtualItems();
+
+    return (
+        <div className={styles.root}>
+            <div
+                ref={scrollerRef}
+                data-testid="timeline-scroller"
+                // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                tabIndex={0}
+                className={classNames(styles.scroller, { [styles.hidden]: !revealed })}
+            >
+                {/* An <ol> of <li> rows, so screen readers announce this as a list of messages
+                    and can say how many there are. The role="list" is stated explicitly even
+                    though an <ol> already is one: Safari with VoiceOver stops treating a list
+                    as a list once list-style is set to none, which our CSS does. The old
+                    ScrollPanel does the same thing for the same reason. */}
+                {/* eslint-disable jsx-a11y/no-redundant-roles -- see comment above */}
+                <ol
+                    ref={virtualizer.containerRef}
+                    className={classNames("mx_TimelineView_list", styles.list)}
+                    role="list"
+                >
+                    {/* eslint-enable jsx-a11y/no-redundant-roles */}
+                    {virtualItems.map((vi) => {
+                        const item: TimelineItem | undefined = items[vi.index];
+                        if (!item) return null;
+                        return (
+                            <li
+                                key={vi.key}
+                                className={classNames("mx_TimelineView_tile", styles.tile)}
+                                data-index={vi.index}
+                                data-key={item.key}
+                                ref={virtualizer.measureElement}
+                            >
+                                {renderItem(item)}
+                            </li>
+                        );
+                    })}
+                </ol>
+            </div>
+            {!revealed && (
+                <div className={styles.cover}>
+                    <InlineSpinner size={32} />
+                </div>
+            )}
+            {revealed && <TimelineOverlayButtons snapshot={snapshot} vm={vm} scrollNow={scrollNow} />}
+        </div>
+    );
+}
diff --git a/packages/shared-components/src/room/timeline/TimelineView/index.ts b/packages/shared-components/src/room/timeline/TimelineView/index.ts
new file mode 100644
index 0000000000..c005db20ce
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/TimelineView/index.ts
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+export { TimelineView } from "./TimelineView";
+export { BACKWARD_LOADING_KEY, FORWARD_LOADING_KEY } from "./types";
+export type {
+    TimelineItem,
+    TimelineItemKind,
+    TimelineViewSnapshot,
+    TimelineViewActions,
+    TimelineViewModel,
+    TimelineViewProps,
+    NavigationAnchor,
+    AnchorAlign,
+    ImmediateScroll,
+} from "./types";
diff --git a/packages/shared-components/src/room/timeline/TimelineView/types.ts b/packages/shared-components/src/room/timeline/TimelineView/types.ts
new file mode 100644
index 0000000000..6a4b54989d
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/TimelineView/types.ts
@@ -0,0 +1,201 @@
+/*
+ * Copyright 2026 Element Creations 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 { ReactNode } from "react";
+import type { ViewModel } from "../../../core/viewmodel/ViewModel";
+
+// ─── Timeline item: one renderable row ─────────────────────────────
+
+/** Discriminated union of every row kind the timeline can render. */
+export type TimelineItemKind = "event" | "date-separator" | "read-marker" | "loading" | "gap";
+
+export interface EventTimelineItem {
+    key: string;
+    kind: "event";
+    /** Whether this event continues unbroken from the previous sender (suppresses avatar/name). */
+    continuation: boolean;
+    /**
+     * Whether this event closes its continuation group (next event has a different
+     * sender / a gap / a separator, or it is the last). Rounds the group's closing
+     * corner — border-radius only, so it is recomputed every build, never cached.
+     */
+    lastInSection: boolean;
+}
+
+export interface DateSeparatorTimelineItem {
+    key: string;
+    kind: "date-separator";
+    label: string;
+}
+
+export interface ReadMarkerTimelineItem {
+    key: string;
+    kind: "read-marker";
+}
+
+export interface LoadingTimelineItem {
+    key: string;
+    kind: "loading";
+}
+
+export interface GapTimelineItem {
+    key: string;
+    kind: "gap";
+}
+
+export type TimelineItem =
+    | EventTimelineItem
+    | DateSeparatorTimelineItem
+    | ReadMarkerTimelineItem
+    | LoadingTimelineItem
+    | GapTimelineItem;
+
+/**
+ * Stable keys for the edge loading spinners. The ViewModel assigns one of these as the
+ * `key` of a `kind:"loading"` item; the View matches them to keep scroll anchoring off a
+ * spinner (whose key vanishes when the loaded batch replaces it). Shared here so the two
+ * sides can't drift.
+ */
+export const BACKWARD_LOADING_KEY = "backward-loading";
+export const FORWARD_LOADING_KEY = "forward-loading";
+
+// ─── Navigation anchor ─────────────────────────────────────────────
+
+/** Where in the viewport to place the target when scrolling to an anchor. */
+export type AnchorAlign = "start" | "center" | "end";
+
+export interface NavigationAnchor {
+    /** The `TimelineItem.key` to scroll to. */
+    targetKey: string;
+    /** Where in the viewport to place the target. */
+    align: AnchorAlign;
+}
+
+/**
+ * Imperative scroll-to-anchor handle the View hands to ViewModel actions, to scroll
+ * without waiting for a data update. The VM invokes it only when the target is already
+ * in the loaded window; otherwise it sets `pendingAnchor` and lets a load() drive the
+ * scroll. Must be called synchronously inside the action — the View's closure captures
+ * the current items snapshot to resolve the target.
+ */
+export type ImmediateScroll = (anchor: NavigationAnchor) => void;
+
+// ─── Timeline view model contract ──────────────────────────────────
+
+export interface TimelineViewSnapshot {
+    /** The ordered list of items to render. */
+    items: TimelineItem[];
+
+    /**
+     * True when the timeline window has reached the live end — i.e. there are
+     * no more forward events to paginate to. Used to gate follow-on-append so
+     * that the view only auto-scrolls to the bottom when we are actually
+     * viewing the live end of the room.
+     */
+    atLiveEnd: boolean;
+
+    /**
+     * Placement target for the current load. The View scrolls it into place on mount
+     * and re-asserts it on later loads without remounting. While set, follow-on-append
+     * is disabled (this also keeps a cold-loading list pinned to the anchor rather than
+     * snapping to the bottom). Cleared when the View reports {@link TimelineViewActions.onAnchorReached}.
+     */
+    pendingAnchor: NavigationAnchor | null;
+
+    /**
+     * The event ID that should be visually highlighted (e.g. permalink target).
+     * Unlike `pendingAnchor`, this is not cleared after scrolling — it persists
+     * so the event tile stays highlighted.
+     */
+    highlightedEventId: string | null;
+
+    /** True when the list is scrolled to the bottom (within a 4px threshold). */
+    isAtBottom: boolean;
+
+    /**
+     * Whether a read-marker is visible above (`"above"`) or below (`"below"`) the
+     * current viewport, or not reachable/applicable (`false`).
+     * - `"above"` — marker is above the viewport (or above the loaded window).
+     * - `"below"` — marker is below the viewport but within the loaded window.
+     * Controls visibility and direction of the "Jump to unread" / "Mark as read" bar.
+     */
+    canJumpToReadMarker: "above" | "below" | false;
+
+    /**
+     * Number of new messages that have arrived since the user last scrolled
+     * to the live bottom. Reset to zero when the user reaches the live bottom.
+     * Used as the badge count on the "Jump to bottom" button.
+     */
+    numUnreadMessages: number;
+
+    /**
+     * True when at least one of the new-since-leaving-bottom messages is a
+     * highlight (mention / keyword). Drives the highlight style on the
+     * "Jump to bottom" button.
+     */
+    hasHighlights: boolean;
+}
+
+export interface TimelineViewActions {
+    /** Called when the view reaches the start; VM decides whether to paginate. */
+    onStartReached(): void;
+
+    /** Called when the view reaches the end; VM decides whether to paginate. */
+    onEndReached(): void;
+
+    /**
+     * Report that the anchor placement has settled (the target has stabilised in
+     * the visible range). The VM clears `pendingAnchor`, re-enabling
+     * follow-on-append and normal scroll-position tracking.
+     */
+    onAnchorReached(): void;
+
+    /**
+     * Called on every visible-range change; the VM tracks the bottommost visible event
+     * for scroll-position persistence. Indices are 0-based into the items array.
+     */
+    onVisibleRangeChanged(startIndex: number, endIndex: number): void;
+
+    /** Called when the at-bottom state changes; VM uses this to decide whether to clear the saved scroll position on dispose. */
+    onAtBottomStateChange(atBottom: boolean): void;
+
+    /**
+     * Scroll to the read-marker item (jump to unread messages).
+     *
+     * `scrollNow` is invoked synchronously when the marker is already in the
+     * loaded window (no data update needed). Otherwise the VM triggers a load
+     * at the marker and the scroll happens via `pendingAnchor` after the load.
+     */
+    onJumpToReadMarker(scrollNow: ImmediateScroll): void;
+
+    /** Mark all currently-visible messages as read, clearing the read marker. */
+    onMarkAllAsRead(): void;
+
+    /**
+     * Navigate to the live end of the timeline.
+     *
+     * `scrollNow` is invoked synchronously when the window already reaches
+     * the live end (no data update needed). Otherwise the VM reloads the
+     * timeline window at the live end and the scroll happens via
+     * `pendingAnchor` after the load.
+     */
+    onJumpToLive(scrollNow: ImmediateScroll): void;
+}
+
+export type TimelineViewModel = ViewModel<TimelineViewSnapshot, TimelineViewActions>;
+
+// ─── Shared timeline view props ────────────────────────────────────
+
+export interface TimelineViewProps {
+    vm: TimelineViewModel;
+
+    /**
+     * Render callback for each timeline item.
+     * The shared container calls this for every visible item.
+     */
+    renderItem: (item: TimelineItem) => ReactNode;
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfileView.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfileView.tsx
index f7a3a2b62a..6af6bd2162 100644
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfileView.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/DisambiguatedProfileView.tsx
@@ -91,7 +91,7 @@ interface DisambiguatedProfileViewProps {
 export function DisambiguatedProfileView({ vm, className }: Readonly<DisambiguatedProfileViewProps>): JSX.Element {
     const { displayName, colorClass, displayIdentifier, title, emphasizeDisplayName, userStatus } = useViewModel(vm);
 
-    const userStatusEmoji = userStatus && [...new Intl.Segmenter().segment(userStatus.emoji)][0]?.segment;
+    const userStatusEmoji = userStatus && userStatus.emoji;
 
     const displayNameClasses = classNames(colorClass, {
         [styles.disambiguatedProfile_displayName]: emphasizeDisplayName,
@@ -120,19 +120,23 @@ export function DisambiguatedProfileView({ vm, className }: Readonly<Disambiguat
             <span className={displayNameClasses} dir="auto">
                 {displayName}
             </span>
+            {userStatus && (
+                <Tooltip description={userStatus.text}>
+                    <Text
+                        as="span"
+                        size="md"
+                        className={classNames("mx_DisambiguatedProfile_userStatus", styles.userStatus)}
+                    >
+                        {userStatusEmoji}
+                    </Text>
+                </Tooltip>
+            )}
             {/* mx_DisambiguatedProfile_mxid is required for PCSS selectors like .mx_MemberTileView .mx_DisambiguatedProfile_mxid */}
             {displayIdentifier && (
                 <span className={classNames("mx_DisambiguatedProfile_mxid", styles.disambiguatedProfile_mxid)}>
                     {displayIdentifier}
                 </span>
             )}
-            {userStatus && (
-                <Tooltip description={userStatus.text}>
-                    <Text as="span" size="md" className={styles.userStatus}>
-                        {userStatusEmoji}
-                    </Text>
-                </Tooltip>
-            )}
         </div>
     );
 }
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/__snapshots__/DisambiguatedProfile.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/__snapshots__/DisambiguatedProfile.test.tsx.snap
index 9d4c1fc3d6..087c41314a 100644
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/__snapshots__/DisambiguatedProfile.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/__snapshots__/DisambiguatedProfile.test.tsx.snap
@@ -31,16 +31,16 @@ exports[`DisambiguatedProfileView > renders the full example 1`] = `
     >
       Eve
     </span>
+    <span
+      class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 mx_DisambiguatedProfile_userStatus DisambiguatedProfile-module_userStatus"
+    >
+      🏝️
+    </span>
     <span
       class="mx_DisambiguatedProfile_mxid DisambiguatedProfile-module_disambiguatedProfile_mxid"
     >
       @eve:matrix.org
     </span>
-    <span
-      class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 DisambiguatedProfile-module_userStatus"
-    >
-      🏝️
-    </span>
   </div>
 </div>
 `;
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/index.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/index.ts
similarity index 100%
rename from packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/index.tsx
rename to packages/shared-components/src/room/timeline/event-tile/EventTileView/DisambiguatedProfile/index.ts
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2eMessageSharedIcon/E2eMessageSharedIcon.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2eMessageSharedIcon/E2eMessageSharedIcon.stories.tsx
new file mode 100644
index 0000000000..a4dc6a6550
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2eMessageSharedIcon/E2eMessageSharedIcon.stories.tsx
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useMockedViewModel } from "../../../../../core/viewmodel";
+import { withViewDocs } from "../../../../../../.storybook/withViewDocs";
+import { E2eMessageSharedIconView, type E2eMessageSharedIconViewSnapshot } from "./E2eMessageSharedIconView";
+
+type E2eMessageSharedIconProps = E2eMessageSharedIconViewSnapshot & { className?: string };
+
+const E2eMessageSharedIconViewWrapperImpl = ({ className, ...rest }: E2eMessageSharedIconProps): JSX.Element => {
+    const vm = useMockedViewModel(rest, {});
+
+    return <E2eMessageSharedIconView vm={vm} className={className} />;
+};
+const E2eMessageSharedIconViewWrapper = withViewDocs(E2eMessageSharedIconViewWrapperImpl, E2eMessageSharedIconView);
+
+const meta = {
+    title: "Timeline/Timeline Event/E2eMessageSharedIconView",
+    component: E2eMessageSharedIconViewWrapper,
+    tags: ["autodocs"],
+    args: {
+        displayName: "Bob",
+        userId: "@bob:example.com",
+        className: "",
+    },
+} satisfies Meta<typeof E2eMessageSharedIconViewWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const UnknownUser: Story = {
+    tags: ["skip-test"],
+    args: {
+        displayName: "@bob:example.com",
+        userId: "@bob:example.com",
+    },
+};
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2eMessageSharedIcon/E2eMessageSharedIcon.test.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2eMessageSharedIcon/E2eMessageSharedIcon.test.tsx
new file mode 100644
index 0000000000..9f743bd020
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2eMessageSharedIcon/E2eMessageSharedIcon.test.tsx
@@ -0,0 +1,54 @@
+/*
+ * Copyright 2026 Element Creations 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 { composeStories } from "@storybook/react-vite";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@test-utils";
+
+import { MockViewModel } from "../../../../../core/viewmodel";
+import {
+    E2eMessageSharedIconView,
+    type E2eMessageSharedIconViewModel,
+    type E2eMessageSharedIconViewSnapshot,
+} from "./E2eMessageSharedIconView";
+import * as stories from "./E2eMessageSharedIcon.stories";
+
+const { Default, UnknownUser } = composeStories(stories);
+
+describe("E2eMessageSharedIconView", () => {
+    it("renders the default shared-message icon", () => {
+        const { container } = render(<Default />);
+
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders an unknown user tooltip state", () => {
+        const { container } = render(<UnknownUser />);
+
+        expect(container).toMatchSnapshot();
+    });
+
+    it("applies a custom className to the icon container", () => {
+        const vm = new MockViewModel<E2eMessageSharedIconViewSnapshot>({
+            displayName: "Bob",
+            userId: "@bob:example.com",
+        }) as E2eMessageSharedIconViewModel;
+
+        render(<E2eMessageSharedIconView vm={vm} className="custom-shared-icon" />);
+
+        expect(screen.getByTestId("e2e-padlock")).toHaveClass("custom-shared-icon");
+    });
+
+    it("uses the shared translation for the icon accessible name", () => {
+        render(<Default />);
+
+        expect(screen.getByTestId("e2e-padlock")).toHaveAccessibleName(
+            "Bob (@bob:example.com) shared this message since you were not in the room when it was sent.",
+        );
+    });
+});
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2eMessageSharedIcon/E2eMessageSharedIconView.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2eMessageSharedIcon/E2eMessageSharedIconView.tsx
new file mode 100644
index 0000000000..7b21f61e41
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2eMessageSharedIcon/E2eMessageSharedIconView.tsx
@@ -0,0 +1,49 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+
+import { _t } from "../../../../../core/i18n/i18n";
+import { type ViewModel, useViewModel } from "../../../../../core/viewmodel";
+import { E2ePadlock, E2ePadlockIcon } from "../E2ePadlock";
+
+export interface E2eMessageSharedIconViewSnapshot {
+    /**
+     * Display name for the user who shared keys for the message.
+     */
+    displayName: string;
+    /**
+     * User ID for the user who shared keys for the message.
+     */
+    userId: string;
+}
+
+export type E2eMessageSharedIconViewModel = ViewModel<E2eMessageSharedIconViewSnapshot>;
+
+interface E2eMessageSharedIconViewProps {
+    /**
+     * ViewModel providing the localized tooltip.
+     */
+    vm: E2eMessageSharedIconViewModel;
+    /**
+     * Optional CSS class name applied to the icon container.
+     */
+    className?: string;
+}
+
+/**
+ * Renders the end-to-end encryption icon used for messages whose keys were
+ * shared by another room member.
+ */
+export function E2eMessageSharedIconView({ vm, className }: Readonly<E2eMessageSharedIconViewProps>): JSX.Element {
+    const { displayName, userId } = useViewModel(vm);
+    // We always disambiguate the user, since we need to prevent users from forging a disambiguation, and
+    // the ToolTip component doesn't support putting styling inside a label.
+    const tooltip = _t("timeline|message_shared_by", { displayName, userId });
+
+    return <E2ePadlock className={className} icon={E2ePadlockIcon.Normal} title={tooltip} />;
+}
diff --git a/apps/web/test/unit-tests/components/views/rooms/EventTile/__snapshots__/E2eMessageSharedIcon-test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2eMessageSharedIcon/__snapshots__/E2eMessageSharedIcon.test.tsx.snap
similarity index 78%
rename from apps/web/test/unit-tests/components/views/rooms/EventTile/__snapshots__/E2eMessageSharedIcon-test.tsx.snap
rename to packages/shared-components/src/room/timeline/event-tile/EventTileView/E2eMessageSharedIcon/__snapshots__/E2eMessageSharedIcon.test.tsx.snap
index f5108aad36..2bfb63d23a 100644
--- a/apps/web/test/unit-tests/components/views/rooms/EventTile/__snapshots__/E2eMessageSharedIcon-test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2eMessageSharedIcon/__snapshots__/E2eMessageSharedIcon.test.tsx.snap
@@ -1,16 +1,16 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`E2eMessageSharedIcon renders correctly for a known user 1`] = `
+exports[`E2eMessageSharedIconView > renders an unknown user tooltip state 1`] = `
 <div>
   <div
     aria-label="State of the end-to-end encryption"
-    aria-labelledby="_r_0_"
-    class="mx_EventTile_e2eIcon"
+    aria-labelledby="react-use-id-1"
+    class="E2ePadlock-module_e2ePadlock E2ePadlock-module_normal"
     data-testid="e2e-padlock"
+    role="img"
     tabindex="0"
   >
     <svg
-      color="var(--cpd-color-icon-tertiary)"
       fill="currentColor"
       height="1em"
       viewBox="0 0 24 24"
@@ -30,17 +30,17 @@ exports[`E2eMessageSharedIcon renders correctly for a known user 1`] = `
 </div>
 `;
 
-exports[`E2eMessageSharedIcon renders correctly for an unknown user 1`] = `
+exports[`E2eMessageSharedIconView > renders the default shared-message icon 1`] = `
 <div>
   <div
     aria-label="State of the end-to-end encryption"
-    aria-labelledby="_r_6_"
-    class="mx_EventTile_e2eIcon"
+    aria-labelledby="react-use-id-1"
+    class="E2ePadlock-module_e2ePadlock E2ePadlock-module_normal"
     data-testid="e2e-padlock"
+    role="img"
     tabindex="0"
   >
     <svg
-      color="var(--cpd-color-icon-tertiary)"
       fill="currentColor"
       height="1em"
       viewBox="0 0 24 24"
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2eMessageSharedIcon/index.ts b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2eMessageSharedIcon/index.ts
new file mode 100644
index 0000000000..496a42da2a
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2eMessageSharedIcon/index.ts
@@ -0,0 +1,12 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+export {
+    E2eMessageSharedIconView,
+    type E2eMessageSharedIconViewModel,
+    type E2eMessageSharedIconViewSnapshot,
+} from "./E2eMessageSharedIconView";
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.module.css b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.module.css
new file mode 100644
index 0000000000..4a5b1821d0
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.module.css
@@ -0,0 +1,28 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+.e2ePadlock {
+    position: relative;
+    width: 14px;
+    height: 14px;
+    display: block;
+
+    svg {
+        height: inherit;
+        width: inherit;
+        display: block;
+    }
+}
+
+.normal,
+.decryptionFailure {
+    color: var(--cpd-color-icon-tertiary);
+}
+
+.warning {
+    color: var(--cpd-color-icon-critical-primary);
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.stories.tsx
new file mode 100644
index 0000000000..1cc00f68fd
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.stories.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright 2026 Element Creations 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 { Meta, StoryObj } from "@storybook/react-vite";
+import { E2ePadlock, E2ePadlockIcon } from "./E2ePadlock";
+
+const meta = {
+    title: "Timeline/Timeline Event/E2ePadlock",
+    component: E2ePadlock,
+    tags: ["autodocs"],
+    argTypes: {
+        icon: {
+            options: Object.values(E2ePadlockIcon),
+            control: { type: "select" },
+        },
+    },
+    args: {
+        icon: E2ePadlockIcon.Normal,
+        title: "The authenticity of this message could not be guaranteed",
+        className: "",
+    },
+} satisfies Meta<typeof E2ePadlock>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Normal: Story = {};
+
+export const Warning: Story = {
+    args: {
+        icon: E2ePadlockIcon.Warning,
+        title: "This message was sent unencrypted",
+    },
+};
+
+export const DecryptionFailure: Story = {
+    args: {
+        icon: E2ePadlockIcon.DecryptionFailure,
+        title: "Unable to decrypt message",
+    },
+};
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.test.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.test.tsx
new file mode 100644
index 0000000000..43e0bf89ec
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.test.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright 2026 Element Creations 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 { composeStories } from "@storybook/react-vite";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@test-utils";
+
+import { E2ePadlock, E2ePadlockIcon } from "./E2ePadlock";
+import * as stories from "./E2ePadlock.stories";
+
+const { Normal, Warning, DecryptionFailure } = composeStories(stories);
+
+describe("E2ePadlock", () => {
+    it("renders a 'Normal' icon", () => {
+        const { container } = render(<Normal />);
+
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders a 'Warning' icon", () => {
+        const { container } = render(<Warning />);
+
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders a 'DecryptionFailure' icon", () => {
+        const { container } = render(<DecryptionFailure />);
+
+        expect(container).toMatchSnapshot();
+    });
+
+    it("applies a custom className to the icon container", () => {
+        render(<E2ePadlock icon={E2ePadlockIcon.Normal} title="Test tooltip" className="custom-e2e-padlock" />);
+
+        expect(screen.getByTestId("e2e-padlock")).toHaveClass("custom-e2e-padlock");
+    });
+});
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.tsx
new file mode 100644
index 0000000000..3596a6286c
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/E2ePadlock.tsx
@@ -0,0 +1,81 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ * Copyright 2025 Vector Creations Ltd.
+ * Copyright 2024 New Vector Ltd.
+ * Copyright 2015-2023 The Matrix.org Foundation C.I.C.
+ * Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+import classNames from "classnames";
+import { ErrorSolidIcon, InfoIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Tooltip } from "@vector-im/compound-web";
+
+import { _t } from "../../../../../core/i18n/i18n";
+import styles from "./E2ePadlock.module.css";
+
+/**
+ * The icon to display in an {@link E2ePadlock}.
+ */
+export enum E2ePadlockIcon {
+    /** Compound Info icon in grey */
+    Normal = "normal",
+
+    /** Compound ErrorSolid icon in red */
+    Warning = "warning",
+
+    /** Compound ErrorSolid icon in grey */
+    DecryptionFailure = "decryption_failure",
+}
+
+export interface E2ePadlockProps {
+    /** The icon to display. */
+    icon: E2ePadlockIcon;
+
+    /** The tooltip for the icon, displayed on hover. */
+    title: string;
+
+    /** Optional CSS class name applied to the icon container. */
+    className?: string;
+}
+
+const icons: Record<E2ePadlockIcon, JSX.Element> = {
+    [E2ePadlockIcon.Normal]: <InfoIcon />,
+    [E2ePadlockIcon.Warning]: <ErrorSolidIcon />,
+    [E2ePadlockIcon.DecryptionFailure]: <ErrorSolidIcon />,
+};
+
+const iconClasses: Record<E2ePadlockIcon, string> = {
+    [E2ePadlockIcon.Normal]: styles.normal,
+    [E2ePadlockIcon.Warning]: styles.warning,
+    [E2ePadlockIcon.DecryptionFailure]: styles.decryptionFailure,
+};
+
+/**
+ * A small icon with tooltip, used in the left margin of an event tile to
+ * indicate a problem with an encrypted event.
+ *
+ * The icon is rendered with `data-testid="e2e-padlock"`.
+ */
+export function E2ePadlock({ icon, title, className }: Readonly<E2ePadlockProps>): JSX.Element {
+    // We specify isTriggerInteractive=true and make the div interactive manually as a workaround for
+    // https://github.com/element-hq/compound/issues/294
+    return (
+        <Tooltip label={title} isTriggerInteractive={true}>
+            <div
+                data-testid="e2e-padlock"
+                className={classNames(styles.e2ePadlock, iconClasses[icon], className)}
+                role="img"
+                // This is only tab indexed to act as a tooltip trigger
+                // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                tabIndex={0}
+                aria-label={_t("timeline|e2e_state")}
+            >
+                {icons[icon]}
+            </div>
+        </Tooltip>
+    );
+}
diff --git a/apps/web/test/unit-tests/components/views/rooms/EventTile/__snapshots__/E2ePadlock-test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/__snapshots__/E2ePadlock.test.tsx.snap
similarity index 80%
rename from apps/web/test/unit-tests/components/views/rooms/EventTile/__snapshots__/E2ePadlock-test.tsx.snap
rename to packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/__snapshots__/E2ePadlock.test.tsx.snap
index b723bb868f..6b7ca2ebe7 100644
--- a/apps/web/test/unit-tests/components/views/rooms/EventTile/__snapshots__/E2ePadlock-test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/__snapshots__/E2ePadlock.test.tsx.snap
@@ -1,16 +1,16 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`E2ePadlock renders a 'DecryptionFailure' icon 1`] = `
-<DocumentFragment>
+exports[`E2ePadlock > renders a 'DecryptionFailure' icon 1`] = `
+<div>
   <div
     aria-label="State of the end-to-end encryption"
-    aria-labelledby="_r_c_"
-    class="mx_EventTile_e2eIcon"
+    aria-labelledby="react-use-id-1"
+    class="E2ePadlock-module_e2ePadlock E2ePadlock-module_decryptionFailure"
     data-testid="e2e-padlock"
+    role="img"
     tabindex="0"
   >
     <svg
-      color="var(--cpd-color-icon-tertiary)"
       fill="currentColor"
       height="1em"
       viewBox="0 0 24 24"
@@ -22,20 +22,20 @@ exports[`E2ePadlock renders a 'DecryptionFailure' icon 1`] = `
       />
     </svg>
   </div>
-</DocumentFragment>
+</div>
 `;
 
-exports[`E2ePadlock renders a 'Normal' icon 1`] = `
-<DocumentFragment>
+exports[`E2ePadlock > renders a 'Normal' icon 1`] = `
+<div>
   <div
     aria-label="State of the end-to-end encryption"
-    aria-labelledby="_r_0_"
-    class="mx_EventTile_e2eIcon"
+    aria-labelledby="react-use-id-1"
+    class="E2ePadlock-module_e2ePadlock E2ePadlock-module_normal"
     data-testid="e2e-padlock"
+    role="img"
     tabindex="0"
   >
     <svg
-      color="var(--cpd-color-icon-tertiary)"
       fill="currentColor"
       height="1em"
       viewBox="0 0 24 24"
@@ -52,20 +52,20 @@ exports[`E2ePadlock renders a 'Normal' icon 1`] = `
       />
     </svg>
   </div>
-</DocumentFragment>
+</div>
 `;
 
-exports[`E2ePadlock renders a 'Warning' icon 1`] = `
-<DocumentFragment>
+exports[`E2ePadlock > renders a 'Warning' icon 1`] = `
+<div>
   <div
     aria-label="State of the end-to-end encryption"
-    aria-labelledby="_r_6_"
-    class="mx_EventTile_e2eIcon"
+    aria-labelledby="react-use-id-1"
+    class="E2ePadlock-module_e2ePadlock E2ePadlock-module_warning"
     data-testid="e2e-padlock"
+    role="img"
     tabindex="0"
   >
     <svg
-      color="var(--cpd-color-icon-critical-primary)"
       fill="currentColor"
       height="1em"
       viewBox="0 0 24 24"
@@ -77,5 +77,5 @@ exports[`E2ePadlock renders a 'Warning' icon 1`] = `
       />
     </svg>
   </div>
-</DocumentFragment>
+</div>
 `;
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/index.ts b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/index.ts
new file mode 100644
index 0000000000..0de4f64659
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/E2ePadlock/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+export { E2ePadlock, E2ePadlockIcon, type E2ePadlockProps } from "./E2ePadlock";
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/EncryptionEventView/EncryptionEventView.module.css b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EncryptionEventView/EncryptionEventView.module.css
index 32161e4df9..988fb197ba 100644
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/EncryptionEventView/EncryptionEventView.module.css
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EncryptionEventView/EncryptionEventView.module.css
@@ -6,7 +6,7 @@
  */
 
 .content svg[data-state="supported"] {
-    color: inherit;
+    color: var(--cpd-color-icon-primary);
 }
 
 .content svg[data-state="unsupported"] {
diff --git a/apps/web/res/css/views/rooms/_EventPreview.pcss b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventPreviewView/EventPreviewView.module.css
similarity index 60%
rename from apps/web/res/css/views/rooms/_EventPreview.pcss
rename to packages/shared-components/src/room/timeline/event-tile/EventTileView/EventPreviewView/EventPreviewView.module.css
index 6999810abf..2a1f346dbf 100644
--- a/apps/web/res/css/views/rooms/_EventPreview.pcss
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventPreviewView/EventPreviewView.module.css
@@ -1,18 +1,17 @@
 /*
- * Copyright 2024 New Vector Ltd.
- * Copyright 2024 The Matrix.org Foundation C.I.C.
+ * Copyright 2026 Element Creations Ltd.
  *
  * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
  * Please see LICENSE files in the repository root for full details.
  */
 
-.mx_EventPreview {
+.eventPreview {
     font: var(--cpd-font-body-sm-regular);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+}
 
-    .mx_EventPreview_prefix {
-        font: var(--cpd-font-body-sm-semibold);
-    }
+.eventPreview strong {
+    font: var(--cpd-font-body-sm-semibold);
 }
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventPreviewView/EventPreviewView.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventPreviewView/EventPreviewView.stories.tsx
new file mode 100644
index 0000000000..583ad09675
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventPreviewView/EventPreviewView.stories.tsx
@@ -0,0 +1,58 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useMockedViewModel } from "../../../../../core/viewmodel";
+import { withViewDocs } from "../../../../../../.storybook/withViewDocs";
+import { EventPreviewView, type EventPreviewViewSnapshot } from "./EventPreviewView";
+
+type WrapperProps = EventPreviewViewSnapshot & {
+    className?: string;
+};
+
+const EventPreviewViewWrapperImpl = ({ className, ...snapshotProps }: WrapperProps): JSX.Element => {
+    const vm = useMockedViewModel(snapshotProps, {});
+
+    return <EventPreviewView vm={vm} className={className} />;
+};
+
+const EventPreviewViewWrapper = withViewDocs(EventPreviewViewWrapperImpl, EventPreviewView);
+
+const meta = {
+    title: "Timeline/EventTile/EventPreviewView",
+    component: EventPreviewViewWrapper,
+    tags: ["autodocs"],
+    args: {
+        isVisible: true,
+        previewContent: "A short text message preview",
+        previewTooltip: "A short text message preview",
+    },
+} satisfies Meta<typeof EventPreviewViewWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithPrefix: Story = {
+    args: {
+        previewContent: (
+            <>
+                <strong>Image:</strong> city-map.png
+            </>
+        ),
+        previewTooltip: undefined,
+    },
+};
+
+export const Hidden: Story = {
+    args: {
+        isVisible: false,
+    },
+};
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventPreviewView/EventPreviewView.test.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventPreviewView/EventPreviewView.test.tsx
new file mode 100644
index 0000000000..87c472e8d5
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventPreviewView/EventPreviewView.test.tsx
@@ -0,0 +1,50 @@
+/*
+ * Copyright 2026 Element Creations 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 { composeStories } from "@storybook/react-vite";
+import { render, screen } from "@test-utils";
+import { describe, expect, it } from "vitest";
+
+import { MockViewModel } from "../../../../../core/viewmodel";
+import { EventPreviewView, type EventPreviewViewModel, type EventPreviewViewSnapshot } from "./EventPreviewView";
+import * as stories from "./EventPreviewView.stories";
+
+const { Default, WithPrefix, Hidden } = composeStories(stories);
+
+describe("EventPreviewView", () => {
+    it("renders the default event preview", () => {
+        const { container } = render(<Default />);
+
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders a prefixed event preview", () => {
+        const { container } = render(<WithPrefix />);
+
+        expect(container).toMatchSnapshot();
+    });
+
+    it("does not render when hidden", () => {
+        render(<Hidden />);
+
+        expect(screen.queryByText("A short text message preview")).not.toBeInTheDocument();
+    });
+
+    it("applies custom span props without using native title tooltips", () => {
+        const vm = new MockViewModel<EventPreviewViewSnapshot>({
+            isVisible: true,
+            previewContent: "Preview text",
+            previewTooltip: "Preview text",
+        }) as EventPreviewViewModel;
+
+        render(<EventPreviewView vm={vm} className="custom-preview" data-testid="event-preview" />);
+
+        expect(screen.getByTestId("event-preview")).toHaveClass("mx_EventPreview", "custom-preview");
+        expect(screen.getByTestId("event-preview")).not.toHaveAttribute("title");
+    });
+});
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventPreviewView/EventPreviewView.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventPreviewView/EventPreviewView.tsx
new file mode 100644
index 0000000000..3da9ce161d
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventPreviewView/EventPreviewView.tsx
@@ -0,0 +1,60 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type ComponentPropsWithoutRef, type JSX, type ReactNode } from "react";
+import classNames from "classnames";
+import { Tooltip } from "@vector-im/compound-web";
+
+import { type ViewModel, useViewModel } from "../../../../../core/viewmodel";
+import styles from "./EventPreviewView.module.css";
+
+export interface EventPreviewViewSnapshot {
+    /**
+     * Controls whether the preview should render.
+     */
+    isVisible: boolean;
+    /**
+     * Rendered preview content.
+     */
+    previewContent?: ReactNode;
+    /**
+     * Optional styled tooltip text for the preview content.
+     */
+    previewTooltip?: string;
+}
+
+export type EventPreviewViewModel = ViewModel<EventPreviewViewSnapshot>;
+
+type EventPreviewViewProps = Omit<ComponentPropsWithoutRef<"span">, "children" | "title"> & {
+    /**
+     * The view model for the event preview.
+     */
+    vm: EventPreviewViewModel;
+};
+
+/**
+ * Renders a compact preview of an event.
+ */
+export function EventPreviewView({ vm, className, ...props }: Readonly<EventPreviewViewProps>): JSX.Element {
+    const { isVisible, previewContent, previewTooltip } = useViewModel(vm);
+
+    if (!isVisible || !previewContent) {
+        return <></>;
+    }
+
+    const preview = (
+        <span {...props} className={classNames("mx_EventPreview", styles.eventPreview, className)}>
+            {previewContent}
+        </span>
+    );
+
+    if (!previewTooltip) {
+        return preview;
+    }
+
+    return <Tooltip description={previewTooltip}>{preview}</Tooltip>;
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventPreviewView/__snapshots__/EventPreviewView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventPreviewView/__snapshots__/EventPreviewView.test.tsx.snap
new file mode 100644
index 0000000000..13681011a0
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventPreviewView/__snapshots__/EventPreviewView.test.tsx.snap
@@ -0,0 +1,24 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`EventPreviewView > renders a prefixed event preview 1`] = `
+<div>
+  <span
+    class="mx_EventPreview EventPreviewView-module_eventPreview"
+  >
+    <strong>
+      Image:
+    </strong>
+     city-map.png
+  </span>
+</div>
+`;
+
+exports[`EventPreviewView > renders the default event preview 1`] = `
+<div>
+  <span
+    class="mx_EventPreview EventPreviewView-module_eventPreview"
+  >
+    A short text message preview
+  </span>
+</div>
+`;
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventPreviewView/index.ts b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventPreviewView/index.ts
new file mode 100644
index 0000000000..58f422d4e1
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventPreviewView/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+export { EventPreviewView, type EventPreviewViewModel, type EventPreviewViewSnapshot } from "./EventPreviewView";
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventTileView.module.css b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventTileView.module.css
new file mode 100644
index 0000000000..e39297987e
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventTileView.module.css
@@ -0,0 +1,783 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+/* Shared root and slot-boundary baseline. */
+.root {
+    /* Group geometry. */
+    --event-tile-group-gutter: 64px;
+    --event-tile-group-line-spacing-block-start: 1px;
+    --event-tile-group-line-spacing-block-end: 3px;
+    --event-tile-group-line-height: 22px;
+
+    /* IRC geometry. */
+    --event-tile-irc-line-height: 18px;
+    --event-tile-irc-name-width: 80px;
+    --event-tile-irc-icon-width: 14px;
+    --event-tile-irc-timestamp-width: 48px;
+    --event-tile-irc-right-padding: 5px;
+
+    /* Bubble geometry. */
+    --event-tile-bubble-corner-radius: 12px;
+    --event-tile-bubble-gap: 5px;
+    --event-tile-bubble-gutter: 11px;
+    --event-tile-bubble-other-background: var(--cpd-color-gray-300, #e9edf2);
+    --event-tile-bubble-self-background: var(--cpd-color-green-300, #d8f5ed);
+
+    /* Shared preview, action-bar, bubble, and interaction values. */
+    --event-tile-preview-offset: 48px;
+    --event-tile-action-bar-size: 28px;
+    --event-tile-action-bar-margin: 3px;
+    --event-tile-action-bar-offset: 8px;
+    --event-tile-state-hover-background: var(--cpd-color-bg-subtle-secondary, #e9edf2);
+    --event-tile-state-highlight-background: var(--cpd-color-yellow-200, #fff8e3);
+    --event-tile-state-selected-background: var(--cpd-color-bg-subtle-secondary, #e9edf2);
+    --event-tile-state-marker-width: 4px;
+    --event-tile-state-marker-color: var(--cpd-color-bg-action-primary-rest, #0dbd8b);
+
+    position: relative;
+    flex-shrink: 0;
+    max-width: 100%;
+    clear: both;
+    padding-top: 18px;
+
+    &.stateContinuation {
+        padding-top: 0;
+    }
+}
+
+.line {
+    position: relative;
+    min-width: 0;
+}
+
+/* Slot wrappers are the public styling boundary. The supplied content may be
+   a component, fragment, or multiple elements and does not need to forward
+   layout props. */
+.slotActionBar,
+.slotAvatar,
+.slotBody,
+.slotContextMenu,
+.slotFooter,
+.slotNotificationBadge,
+.slotNotificationRoomLabel,
+.slotPadlock,
+.slotReceipt,
+.slotReplyChain,
+.slotSender,
+.slotThreadInfo,
+.slotTimestamp {
+    min-width: 0;
+}
+
+.slotContextMenu {
+    z-index: 1;
+}
+
+/* Shared structural containers. */
+.senderDetails {
+    display: flex;
+    align-items: flex-start;
+}
+
+.details {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--cpd-space-2x, 8px);
+}
+
+/* The shell owns the action-bar boundary. The action-bar contents own their controls.
+   Presence of the slot is the render/show signal supplied by the host. */
+.slotActionBar {
+    position: absolute;
+    z-index: 10;
+    inset-block-start: calc(
+        -1 *
+            (var(--event-tile-action-bar-size) + 2 *
+                (var(--event-tile-action-bar-margin) + var(--cpd-border-width-1, 1px)))
+    );
+    inset-inline-end: var(--event-tile-action-bar-offset);
+    user-select: none;
+}
+
+/* Group layout. */
+.root.layoutGroup {
+    &:hover .line,
+    &:focus-within .line {
+        background-color: var(--event-tile-state-hover-background);
+    }
+
+    &.stateHighlighted .line {
+        background-color: var(--event-tile-state-highlight-background);
+    }
+
+    &.stateSelected .line,
+    &.stateEditing .line {
+        background-color: var(--event-tile-state-selected-background);
+    }
+
+    &.stateSelected .line::before,
+    &.stateEditing .line::before {
+        content: "";
+        position: absolute;
+        z-index: 0;
+        inset-block: 0;
+        inset-inline-start: 0;
+        width: var(--event-tile-state-marker-width);
+        border-start-start-radius: inherit;
+        border-end-start-radius: inherit;
+        background: var(--event-tile-state-marker-color);
+        pointer-events: none;
+    }
+
+    .line {
+        padding-block: var(--event-tile-group-line-spacing-block-start) var(--event-tile-group-line-spacing-block-end);
+        padding-inline-start: var(--event-tile-group-gutter);
+        margin-inline-end: 80px;
+        min-height: 14px;
+        border-radius: 8px;
+        line-height: var(--event-tile-group-line-height);
+    }
+
+    .slotSender {
+        display: flex;
+        align-items: center;
+        max-width: calc(100% - var(--event-tile-group-gutter));
+        margin-inline-start: var(--event-tile-group-gutter);
+        min-height: 26px;
+        line-height: 20px;
+    }
+
+    .slotAvatar {
+        position: absolute;
+        z-index: 9;
+        inset-block-start: 14px;
+        inset-inline-start: var(--cpd-space-2x, 8px);
+    }
+
+    .slotTimestamp {
+        position: absolute;
+        inset-inline-start: 0;
+        width: var(--MessageTimestamp-width, 46px);
+        text-align: center;
+    }
+
+    .slotPadlock {
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline-start: 44px;
+        height: var(--event-tile-group-line-height);
+        margin: 1px;
+    }
+
+    .slotThreadInfo {
+        margin-inline-start: var(--event-tile-group-gutter);
+    }
+
+    .slotReplyChain {
+        margin-inline-start: 0;
+        margin-bottom: var(--cpd-space-2x, 8px);
+    }
+
+    .slotFooter {
+        margin: var(--cpd-space-1x, 4px) 0 var(--cpd-space-1x, 4px) var(--event-tile-group-gutter);
+    }
+
+    .slotReceipt {
+        margin-inline-end: 10px;
+        float: inline-end;
+        position: relative;
+        inset-block-start: calc(-1 * (var(--event-tile-group-line-height) + 3px));
+        width: 90px;
+        height: 1px;
+        text-align: end;
+        overflow: visible;
+    }
+
+    &.stateContinuation .line {
+        clear: both;
+    }
+}
+
+/* IRC layout. */
+.root.layoutIrc {
+    display: flex;
+    align-items: flex-start;
+    padding-top: 0;
+    line-height: var(--event-tile-irc-line-height);
+
+    &:hover .line,
+    &:focus-within .line {
+        background-color: var(--event-tile-state-hover-background);
+    }
+
+    &.stateHighlighted .line {
+        background-color: var(--event-tile-state-highlight-background);
+    }
+
+    &.stateSelected .line,
+    &.stateEditing .line {
+        background-color: var(--event-tile-state-selected-background);
+    }
+
+    &.stateSelected .line::before,
+    &.stateEditing .line::before {
+        content: "";
+        position: absolute;
+        z-index: 0;
+        inset-block: 0;
+        inset-inline-start: 0;
+        width: var(--event-tile-state-marker-width);
+        background: var(--event-tile-state-marker-color);
+        pointer-events: none;
+    }
+
+    > .slotActionBar,
+    > .slotAvatar,
+    > .slotBody,
+    > .slotContextMenu,
+    > .slotFooter,
+    > .slotNotificationBadge,
+    > .slotNotificationRoomLabel,
+    > .slotPadlock,
+    > .slotReceipt,
+    > .slotReplyChain,
+    > .slotSender,
+    > .slotThreadInfo,
+    > .slotTimestamp,
+    > .line {
+        margin-inline-end: var(--event-tile-irc-right-padding);
+    }
+
+    .slotTimestamp {
+        min-width: var(--event-tile-irc-timestamp-width);
+        flex-shrink: 0;
+        text-align: end;
+    }
+
+    .slotAvatar {
+        display: flex;
+        align-items: center;
+        flex: 0 0 var(--event-tile-irc-icon-width);
+        position: relative;
+        width: var(--event-tile-irc-icon-width);
+        height: var(--event-tile-irc-line-height);
+    }
+
+    .slotSender {
+        flex-shrink: 0;
+        width: var(--event-tile-irc-name-width);
+        margin-inline-end: 0;
+    }
+
+    .slotPadlock,
+    .slotFooter,
+    .slotThreadInfo,
+    .slotReceipt {
+        flex-shrink: 0;
+    }
+
+    .slotPadlock {
+        position: absolute;
+    }
+
+    .line {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        flex-shrink: 1;
+        padding-block: 1px;
+    }
+
+    .slotReplyChain {
+        margin: 0;
+    }
+
+    .slotFooter {
+        margin-block: var(--cpd-space-1-5x, 6px);
+    }
+}
+
+/* Bubble layout. */
+.root.layoutBubble {
+    max-width: unset;
+    margin-inline: var(--EventTile_bubble-margin-inline-start, 49px) var(--EventTile_bubble-margin-inline-end, 60px);
+    padding-top: 0;
+
+    &::before {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        inset: -1px calc(-1 * var(--EventTile_bubble-margin-inline-end, 60px)) -1px
+            calc(-1 * var(--EventTile_bubble-margin-inline-start, 49px));
+        border-radius: 4px;
+        pointer-events: none;
+    }
+
+    /* Bubble geometry and slot placement. */
+    .line {
+        display: flex;
+        flex-direction: column;
+        gap: var(--event-tile-bubble-gap);
+        width: fit-content;
+        max-width: 70%;
+        margin-block: 0;
+        margin-inline: -9px -12px;
+        border-radius: var(--event-tile-bubble-corner-radius) var(--event-tile-bubble-corner-radius) 0 0;
+        line-height: 18px;
+        padding: calc(var(--event-tile-bubble-gutter) - 1px);
+        padding-inline-end: 60px;
+        background: var(--event-tile-bubble-other-background);
+        border-end-end-radius: var(--event-tile-bubble-corner-radius);
+    }
+
+    .slotAvatar {
+        position: absolute;
+        z-index: 9;
+        inset-block-start: 6px;
+        inset-inline-start: -36px;
+        line-height: 0;
+        border: 4px solid var(--cpd-color-bg-canvas-default, #fff);
+        border-radius: 50%;
+    }
+
+    .slotAvatar > * {
+        border-radius: 50%;
+        box-shadow: 0 0 0 3px var(--cpd-color-bg-canvas-default, #fff);
+    }
+
+    .slotSender,
+    .line {
+        width: fit-content;
+        max-width: 70%;
+        line-height: 18px;
+    }
+
+    .slotSender {
+        position: relative;
+        inset-block-start: -2px;
+        inset-inline-start: 2px;
+        font-size: 15px;
+        white-space: normal;
+    }
+
+    .slotTimestamp {
+        position: absolute;
+        z-index: 3;
+        inset-block-end: 0;
+        inset-inline-end: 0;
+        padding: 4px 8px;
+    }
+
+    > .slotReceipt {
+        position: absolute;
+        z-index: 1;
+        inset-block-end: -3px;
+        inset-inline-end: -78px;
+    }
+
+    .slotPadlock {
+        flex-shrink: 0;
+        height: calc(18px + 2px);
+    }
+
+    .slotActionBar {
+        inset-block-start: -28px;
+        inset-inline-start: calc(
+            100% - var(--event-tile-action-bar-size) - 2 * (var(--event-tile-action-bar-margin) + 1px)
+        );
+        inset-inline-end: auto;
+    }
+
+    .slotFooter {
+        display: flex;
+        align-items: center;
+        margin-block: var(--cpd-space-1-5x, 6px);
+        margin-inline: -9px -12px;
+    }
+
+    .slotThreadInfo {
+        margin-inline-start: -11px;
+        margin-inline-end: auto;
+    }
+
+    .slotReplyChain,
+    .slotThreadInfo {
+        clear: both;
+    }
+
+    /* Own-event modifiers. */
+    &.stateOwnEvent .slotSender {
+        display: none;
+    }
+
+    &.stateOwnEvent .line {
+        border-end-start-radius: var(--event-tile-bubble-corner-radius);
+        border-end-end-radius: 0;
+        background: var(--event-tile-bubble-self-background);
+        margin-inline-start: auto;
+    }
+
+    &.stateOwnEvent .slotAvatar {
+        inset-block-start: -19px;
+        inset-inline-start: auto;
+        inset-inline-end: -38px;
+    }
+
+    &.stateOwnEvent .slotActionBar {
+        inset-block-start: -28px;
+        inset-inline-start: auto;
+        inset-inline-end: 0;
+    }
+
+    &.stateOwnEvent .slotFooter {
+        justify-content: flex-end;
+    }
+
+    &.stateOwnEvent .slotThreadInfo {
+        margin-inline-start: auto;
+        margin-inline-end: -11px;
+    }
+
+    /* Interaction state. */
+    &.stateSelected .line::before {
+        content: "";
+        position: absolute;
+        z-index: 0;
+        inset-block: 0;
+        inset-inline-start: 0;
+        width: var(--event-tile-state-marker-width);
+        border-start-start-radius: inherit;
+        border-end-start-radius: inherit;
+        background: var(--event-tile-state-marker-color);
+        pointer-events: none;
+    }
+
+    &:hover::before,
+    &.stateSelected::before {
+        background: var(--event-tile-state-hover-background);
+    }
+
+    &.stateHighlighted::before {
+        background: var(--event-tile-state-highlight-background);
+    }
+
+    &:hover .slotAvatar {
+        border-color: var(--event-tile-state-hover-background);
+    }
+
+    &.stateHighlighted .slotAvatar {
+        border-color: var(--event-tile-state-highlight-background);
+    }
+
+    &:hover .slotAvatar > *,
+    &.stateSelected .slotAvatar > * {
+        box-shadow: 0 0 0 3px var(--event-tile-state-hover-background);
+    }
+
+    &.stateHighlighted .slotAvatar > * {
+        box-shadow: 0 0 0 3px var(--event-tile-state-highlight-background);
+    }
+
+    /* Section state. */
+    &.stateContinuation {
+        margin-top: 2px;
+    }
+
+    &.stateContinuation .line {
+        border-start-start-radius: 0;
+    }
+
+    &.stateContinuation.stateOwnEvent .line {
+        border-start-start-radius: var(--event-tile-bubble-corner-radius);
+        border-start-end-radius: 0;
+    }
+
+    &.stateLastInSection {
+        margin-bottom: 24px;
+    }
+
+    &.stateLastInSection .line {
+        border-end-start-radius: var(--event-tile-bubble-corner-radius);
+    }
+
+    &.stateLastInSection.stateOwnEvent .line {
+        border-end-start-radius: 0;
+        border-end-end-radius: var(--event-tile-bubble-corner-radius);
+    }
+}
+
+/* ThreadView adds a narrower group timeline around EventTile. */
+.root.shapeThread {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding-top: 0;
+
+    &.layoutGroup {
+        .senderDetails {
+            align-items: center;
+            gap: var(--cpd-space-4x, 16px);
+            padding-inline-start: var(--cpd-space-2x, 8px);
+        }
+
+        .senderDetails .slotAvatar {
+            /* ThreadView keeps the avatar in the sender-details flex row. */
+            position: relative;
+            inset: auto;
+        }
+
+        .senderDetails .slotSender {
+            margin-inline-start: 0;
+            max-width: 100%;
+            min-height: 0;
+            line-height: normal;
+        }
+
+        .line {
+            padding-block: 2px;
+            padding-inline-start: 56px;
+            margin-inline-end: 8px;
+        }
+
+        .slotTimestamp {
+            /* ThreadView aligns this with the event content, not the bottom of
+               the line's flex/content flow. */
+            inset-block-start: 2px;
+        }
+
+        .slotFooter {
+            margin-inline-start: 56px;
+            margin-inline-end: 8px;
+        }
+    }
+}
+
+/* ThreadsList layout. */
+.root.shapeThreadsList {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    margin-block: 13px;
+    padding: 8px;
+    border-radius: 8px;
+
+    &:hover {
+        background-color: var(--cpd-color-bg-subtle-primary, #f0f1f2);
+    }
+
+    &::after {
+        content: "";
+        position: absolute;
+        inset: auto -8px -13px 56px;
+        height: 1px;
+    }
+
+    &:last-child::after {
+        content: unset;
+    }
+
+    &:first-child {
+        margin-top: 0;
+    }
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    .details {
+        width: calc(100% - var(--event-tile-preview-offset));
+        margin-inline-start: var(--event-tile-preview-offset);
+        overflow: hidden;
+    }
+
+    .slotSender {
+        /* In preview tiles the sender is a metadata-row profile, not the
+           group-layout sender above the event line. */
+        display: inline-flex;
+        align-items: center;
+        flex: 1;
+        max-width: 100%;
+        min-height: 0;
+        margin-inline-start: 0;
+        line-height: normal;
+    }
+
+    .slotAvatar {
+        position: absolute;
+        inset: 8px auto auto 8px;
+    }
+
+    .line {
+        width: 100%;
+        box-sizing: border-box;
+        padding-inline-start: var(--event-tile-preview-offset);
+        padding-bottom: 0;
+    }
+
+    .slotThreadInfo {
+        /* The preview is inside the padded line in this mode; it does not use
+           the group-layout thread-summary gutter. */
+        margin-inline-start: 0;
+    }
+
+    .slotTimestamp {
+        display: block;
+        font-size: 12px;
+        overflow: hidden;
+        margin-inline-start: auto;
+        align-self: flex-start;
+        position: initial;
+        inset: auto;
+        width: unset;
+        text-align: initial;
+        text-overflow: ellipsis;
+    }
+
+    &.layoutGroup:hover .line {
+        background-color: inherit;
+        box-shadow: none;
+    }
+}
+
+/* Notification layout. */
+.root.shapeNotification {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    margin-block: 13px;
+    padding: 8px;
+    border-radius: 8px;
+
+    &:hover {
+        background-color: var(--cpd-color-bg-subtle-primary, #f0f1f2);
+    }
+
+    &::after {
+        content: "";
+        position: absolute;
+        inset: auto -8px -13px 56px;
+        height: 1px;
+    }
+
+    &:last-child::after {
+        content: unset;
+    }
+
+    &:first-child {
+        margin-top: 0;
+    }
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    .details {
+        width: calc(100% - var(--event-tile-preview-offset));
+        margin-inline-start: var(--event-tile-preview-offset);
+        overflow: hidden;
+    }
+
+    .slotSender {
+        /* In preview tiles the sender is a metadata-row profile, not the
+           group-layout sender above the event line. */
+        display: inline-flex;
+        align-items: center;
+        flex: 1;
+        max-width: 100%;
+        min-height: 0;
+        margin-inline-start: 0;
+        line-height: normal;
+    }
+
+    .slotAvatar {
+        position: absolute;
+        inset: 8px auto auto 8px;
+    }
+
+    .line {
+        width: 100%;
+        box-sizing: border-box;
+        padding-inline-start: var(--event-tile-preview-offset);
+        padding-bottom: 0;
+    }
+
+    .slotThreadInfo {
+        /* The preview is inside the padded line in these modes; it does not use
+           the group-layout thread-summary gutter. */
+        margin-inline-start: 0;
+    }
+
+    .slotTimestamp {
+        display: block;
+        font-size: 12px;
+        overflow: hidden;
+        margin-inline-start: auto;
+        align-self: flex-start;
+        position: initial;
+        inset: auto;
+        width: unset;
+        text-align: initial;
+        text-overflow: ellipsis;
+    }
+
+    &.layoutGroup:hover .line {
+        background-color: inherit;
+        box-shadow: none;
+    }
+}
+
+/* File panel layout. The application File branch does not apply a timeline
+   layout class, so explicitly reset the group-layout defaults owned by this
+   shared shell. */
+.root.shapeFile {
+    padding-top: 0;
+    overflow-wrap: anywhere;
+
+    .senderDetailsLink {
+        display: block;
+        margin-bottom: var(--cpd-space-1x, 4px);
+        text-decoration: none;
+    }
+
+    .senderDetails {
+        display: flex;
+        align-items: center;
+        gap: var(--cpd-space-2x, 8px);
+        margin-top: -2px;
+    }
+
+    .senderDetails .slotAvatar {
+        position: relative;
+        inset: auto;
+        flex: 0 0 auto;
+    }
+
+    .senderDetails .slotSender {
+        display: inline-flex;
+        align-items: center;
+        max-width: 100%;
+        min-height: 0;
+        margin-inline-start: 0;
+        line-height: normal;
+    }
+
+    .senderDetails .slotTimestamp {
+        position: initial;
+        inset: auto;
+        width: unset;
+        margin-inline-start: auto;
+        text-align: initial;
+    }
+
+    .line {
+        margin-inline-end: 0;
+        padding: 0;
+        border-radius: 0;
+    }
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventTileView.stories.module.css b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventTileView.stories.module.css
new file mode 100644
index 0000000000..8ea63a9de1
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventTileView.stories.module.css
@@ -0,0 +1,259 @@
+/* Story-only timeline context. The hierarchy mirrors RoomView/ScrollPanel. */
+
+.storySurface {
+    width: min(100%, 680px);
+    min-height: 220px;
+    margin: 0;
+    padding: 24px;
+    list-style: none;
+    background: var(--cpd-color-bg-canvas-default, #fff);
+    color: var(--cpd-color-text-primary, #17191c);
+}
+
+.debugFrame {
+    position: relative;
+}
+
+/* Keep the bubble hover layer above the Storybook surface while keeping it
+   behind the tile content. */
+.storyEventTile.storyLayoutBubble {
+    isolation: isolate;
+}
+
+[data-story-hovered="true"] {
+    outline: 1px dashed var(--cpd-color-border-focused, #5e7cff);
+    outline-offset: 2px;
+}
+
+.debugTooltip {
+    position: fixed;
+    z-index: 1000;
+    inset-block-end: 12px;
+    inset-inline-start: 12px;
+    max-width: min(80vw, 360px);
+    padding: 4px 8px;
+    border: 1px solid var(--cpd-color-border-subtle, #c9ced4);
+    border-radius: 4px;
+    color: var(--cpd-color-text-primary, #17191c);
+    background: var(--cpd-color-bg-canvas-default, #fff);
+    box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
+    font:
+        12px/1.3 ui-monospace,
+        SFMono-Regular,
+        Consolas,
+        monospace;
+    pointer-events: none;
+}
+
+.timeline,
+.scrollPanel,
+.messageListWrapper {
+    display: flex;
+    min-width: 0;
+    width: 100%;
+    flex-direction: column;
+}
+
+.messageListWrapper {
+    position: relative;
+    justify-content: flex-end;
+}
+
+.messageList {
+    display: flex;
+    min-width: 0;
+    width: 100%;
+    flex-direction: column;
+    justify-content: flex-end;
+    box-sizing: border-box;
+    margin: 0;
+    padding: var(--RoomView_MessageList-padding, 18px);
+    list-style: none;
+}
+
+.messageList > li {
+    clear: both;
+}
+
+/* Let the story-only slot labels escape the notification metadata row. */
+.detailsContainer {
+    overflow: visible !important;
+}
+
+.line {
+    /* Marker class used by state stories to style the shared line slot. */
+}
+
+.threadListInfo {
+    display: flex;
+    position: relative;
+    align-items: center;
+    margin-top: var(--cpd-space-2x, 8px);
+    font: var(--cpd-font-body-sm-regular);
+}
+
+.threadListIcon {
+    display: inline-block;
+    flex: 0 0 18px;
+    width: 18px;
+    height: 18px;
+    color: var(--cpd-color-icon-secondary, #626a73);
+}
+
+.threadListReplies {
+    position: relative;
+    padding: 0 var(--cpd-space-3x, 12px) 0 var(--cpd-space-2x, 8px);
+    color: var(--cpd-color-text-secondary, #626a73);
+    font-weight: var(--cpd-font-weight-semibold, 600);
+    white-space: nowrap;
+}
+
+/* Match the application IRC profile treatment without adding application
+   selectors to the shared EventTileView stylesheet. */
+.ircSender {
+    width: var(--event-tile-irc-name-width, 80px);
+    margin-inline-end: 0;
+    overflow: hidden;
+    text-align: start;
+}
+
+.ircSender :global(.mx_DisambiguatedProfile_displayName) {
+    display: inline-block;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: start;
+}
+
+.ircSender :global(.mx_DisambiguatedProfile_mxid) {
+    visibility: collapse;
+    margin-inline-start: 0;
+    padding-inline: 5px;
+}
+
+.replyAuthor,
+.roomLabel {
+    display: inline-flex;
+    align-items: center;
+    color: var(--cpd-color-text-secondary, #626a73);
+    font-size: 12px;
+}
+
+.notificationDot {
+    display: block;
+    flex: 0 0 8px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: var(--cpd-color-icon-success-primary, #0d9f6e);
+}
+
+.receiptAvatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: content-box;
+    position: absolute;
+    top: 0;
+    width: 14px;
+    height: 14px;
+    border: 1px solid var(--cpd-color-bg-canvas-default, #fff);
+    border-radius: 50%;
+    color: #fff;
+    background: #526b89;
+    font-size: 8px;
+    line-height: 14px;
+    font-weight: 700;
+}
+
+.receiptAvatar:first-child {
+    inset-inline-start: 0;
+    z-index: 1;
+}
+
+.receiptAvatar + .receiptAvatar {
+    inset-inline-start: 10px;
+    background: #7e5c96;
+}
+
+.readReceiptGroup {
+    position: relative;
+    display: inline-block;
+    z-index: 1;
+    user-select: none;
+}
+
+.readReceiptButton {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: stretch;
+    height: 16px;
+    padding: 4px;
+    border: 0;
+    border-radius: 6px;
+    background: transparent;
+    box-sizing: content-box;
+    appearance: none;
+    margin: 0;
+    font: inherit;
+    line-height: inherit;
+    cursor: pointer;
+}
+
+.readReceiptButton:hover {
+    background: var(--cpd-color-bg-subtle-primary, #f0f1f2);
+}
+
+.readReceiptContainer {
+    position: relative;
+    display: block;
+    width: 24px;
+    height: 100%;
+}
+
+.body {
+    max-width: 560px;
+    padding-block: 4px;
+    line-height: 1.45;
+}
+
+.replyChain {
+    display: grid;
+    gap: 2px;
+    max-width: 520px;
+    margin: 0;
+    padding-inline-start: 10px;
+    border-inline-start: 2px solid var(--username-color, #617b9b);
+    border-radius: 2px;
+    color: var(--cpd-color-text-secondary, #626a73);
+    font-size: 13px;
+}
+
+.replyAuthor {
+    font-weight: 600;
+}
+
+.storyReactions {
+    display: flex;
+}
+
+.storyEventTile.storyOwnEvent.storyLayoutBubble .storyReactions {
+    justify-content: flex-end;
+}
+
+.storyEventTile.storyOwnEvent.storyLayoutBubble .storyReactions > :last-child {
+    order: -1;
+}
+
+.contextMenu {
+    display: none;
+}
+
+.messageList[data-event-density="compact"] {
+    padding-block: 8px;
+}
+
+.messageList[data-event-density="compact"] .body {
+    padding-block: 2px;
+    line-height: 1.3;
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventTileView.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventTileView.stories.tsx
new file mode 100644
index 0000000000..9997d61057
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventTileView.stories.tsx
@@ -0,0 +1,657 @@
+/*
+ * Copyright 2026 Element Creations 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 classNames from "classnames";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { Avatar } from "@vector-im/compound-web";
+import { ThreadsIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import { useMockedViewModel } from "../../../../core/viewmodel";
+import { useEventPresentation } from "../../EventPresentation";
+import { withViewDocs } from "../../../../../.storybook/withViewDocs";
+import { EventTileView, type EventTileViewProps } from "./index";
+import { E2ePadlock, E2ePadlockIcon } from "./E2ePadlock";
+import { DisambiguatedProfileView } from "./DisambiguatedProfile";
+import { ActionBarAction, ActionBarView } from "../actions/ActionBarView";
+import { MessageTimestampView } from "../timestamp/MessageTimestampView";
+import { ReactionsRowView } from "../reactions/ReactionsRow";
+import { ReactionsRowButtonView } from "../reactions/ReactionsRowButton";
+import { type ReactionsRowButtonTooltipViewModel } from "../reactions/ReactionsRowButtonTooltip";
+import {
+    ThreadSummaryView,
+    ThreadMessagePreviewView,
+    type ThreadMessagePreviewViewSnapshot,
+} from "./ThreadSummary/ThreadSummaryView";
+import styles from "./EventTileView.stories.module.css";
+
+type StoryBoundary = HTMLElement;
+const eventTileSlotTestIdPrefix = "event-tile-slot-";
+
+const getBoundaryLabel = (boundary: StoryBoundary): string => {
+    const storyBoundary = boundary.dataset.storyBoundary;
+    if (storyBoundary) return storyBoundary;
+
+    const testId = boundary.dataset.testid;
+    if (testId?.startsWith(eventTileSlotTestIdPrefix)) {
+        return `EventTileView.slots.${testId.slice(eventTileSlotTestIdPrefix.length)}`;
+    }
+
+    if (boundary.classList.contains("storyEventTile")) return "EventTileView";
+    return "EventTileView.line";
+};
+
+const getBoundary = (target: EventTarget | null, root: HTMLElement): StoryBoundary | null => {
+    if (!(target instanceof HTMLElement)) return null;
+
+    const boundary = target.closest<StoryBoundary>(
+        `[data-story-boundary], [data-testid^="${eventTileSlotTestIdPrefix}"], .storyEventTile, .storyEventLine`,
+    );
+    return boundary && root.contains(boundary) ? boundary : null;
+};
+
+const StoryDebugFrame = ({ children }: React.PropsWithChildren): React.ReactElement => {
+    const frameRef = React.useRef<HTMLDivElement>(null);
+    const activeBoundaryRef = React.useRef<StoryBoundary | null>(null);
+    const [activeBoundary, setActiveBoundary] = React.useState<StoryBoundary | null>(null);
+
+    const clearActiveBoundary = (): void => {
+        activeBoundaryRef.current?.removeAttribute("data-story-hovered");
+        activeBoundaryRef.current = null;
+        setActiveBoundary(null);
+    };
+
+    const updateActiveBoundary = (event: React.PointerEvent<HTMLDivElement>): void => {
+        const frame = frameRef.current;
+        if (!frame) return;
+
+        const boundary = getBoundary(event.target, frame);
+        if (boundary === activeBoundaryRef.current) return;
+
+        activeBoundaryRef.current?.removeAttribute("data-story-hovered");
+        boundary?.setAttribute("data-story-hovered", "true");
+        activeBoundaryRef.current = boundary;
+        setActiveBoundary(boundary);
+    };
+
+    React.useEffect(() => {
+        return () => activeBoundaryRef.current?.removeAttribute("data-story-hovered");
+    }, []);
+
+    return (
+        <div
+            ref={frameRef}
+            className={styles.debugFrame}
+            onPointerMove={updateActiveBoundary}
+            onPointerLeave={clearActiveBoundary}
+        >
+            {children}
+            {activeBoundary && <output className={styles.debugTooltip}>{getBoundaryLabel(activeBoundary)}</output>}
+        </div>
+    );
+};
+
+const StoryAvatar = ({
+    room = false,
+    label = "A",
+    size = "30px",
+    className,
+}: {
+    room?: boolean;
+    label?: string;
+    size?: string;
+    className?: string;
+}): React.ReactElement => (
+    <Avatar
+        id={room ? "!story-room:example.org" : `@${label.toLowerCase()}:example.org`}
+        name={getStoryAvatarName(room, label)}
+        type="round"
+        size={size}
+        className={className}
+        aria-label={room ? "Story room avatar" : `${label} avatar`}
+    />
+);
+
+function getStoryAvatarName(room: boolean, label: string): string {
+    if (room) return "Story room";
+    if (label === "A") return "Alice Example";
+    return "Bob Example";
+}
+
+const StorySender = ({
+    name = "Alex Example",
+    id = "@alex:example.org",
+    className,
+}: {
+    name?: string;
+    id?: string;
+    className?: string;
+}): React.ReactElement => {
+    const vm = useMockedViewModel({ displayName: name, displayIdentifier: id, emphasizeDisplayName: true }, {});
+    return <DisambiguatedProfileView vm={vm} className={className} />;
+};
+
+const createStorySender = (
+    isOwnEvent: boolean,
+    layout: EventTileViewProps["root"]["layout"],
+    showSenderAndAvatar: boolean,
+): React.ReactElement | undefined => {
+    if (!showSenderAndAvatar) return undefined;
+
+    const name = isOwnEvent ? "Alice" : "Bob";
+    const id = isOwnEvent ? "@alice:example.org" : "@bob:example.org";
+    const className = layout === "irc" ? styles.ircSender : undefined;
+    return <StorySender name={name} id={id} className={className} />;
+};
+
+const createStoryAvatar = (
+    isOwnEvent: boolean,
+    layout: EventTileViewProps["root"]["layout"],
+    showSenderAndAvatar: boolean,
+): React.ReactElement | undefined => {
+    if (!showSenderAndAvatar) return undefined;
+
+    const label = isOwnEvent ? "A" : "B";
+    const size = layout === "irc" ? "14px" : "30px";
+    return <StoryAvatar label={label} size={size} />;
+};
+
+const StoryTimestamp = ({
+    className,
+    visible = true,
+}: {
+    className?: string;
+    visible?: boolean;
+}): React.ReactElement | null => {
+    const vm = useMockedViewModel(
+        { ts: "12:34", tsSentAt: "Tuesday, 4 August 2026 at 12:34", inhibitTooltip: true },
+        {},
+    );
+    return visible ? <MessageTimestampView vm={vm} className={className} /> : null;
+};
+const StoryBody = (): React.ReactElement => (
+    <div className={styles.body}>
+        <div>Here is a realistic event tile body with enough text to show the available width.</div>
+        <div>This second line makes wrapping and vertical rhythm visible in Storybook.</div>
+    </div>
+);
+const StoryReplyChain = (): React.ReactElement => (
+    <blockquote className={styles.replyChain}>
+        <span className={styles.replyAuthor}>Taylor Example</span>
+        <span>Earlier message quoted in this reply.</span>
+    </blockquote>
+);
+const StoryActionBar = (): React.ReactElement | null => {
+    const vm = useMockedViewModel(
+        {
+            actions: [ActionBarAction.React, ActionBarAction.Reply, ActionBarAction.Options],
+            presentation: "icon" as const,
+            isDownloadEncrypted: false,
+            isDownloadLoading: false,
+            isPinned: false,
+            isQuoteExpanded: false,
+            isThreadReplyAllowed: true,
+        },
+        { onReactionsClick: fn(), onReplyClick: fn(), onOptionsClick: fn() },
+    );
+    return <ActionBarView vm={vm} />;
+};
+
+const useStoryReactionTooltipVm = (caption: string): ReactionsRowButtonTooltipViewModel =>
+    useMockedViewModel({ formattedSenders: "Alice Example and Bob Example", caption }, {});
+
+const StoryFooter = (): React.ReactElement => {
+    const vm = useMockedViewModel(
+        {
+            ariaLabel: "Reactions",
+            isVisible: true,
+            showAddReactionButton: true,
+            addReactionButtonLabel: "Add reaction",
+            addReactionButtonVisible: true,
+        },
+        { onAddReactionClick: fn(), onAddReactionContextMenu: fn() },
+    );
+    const thumbsUpVm = useMockedViewModel(
+        {
+            "content": "👍",
+            "count": 2,
+            "isSelected": false,
+            "aria-label": "Thumbs up, 2 reactions",
+            "tooltipVm": useStoryReactionTooltipVm("Thumbs up"),
+        },
+        { onClick: fn() },
+    );
+    const heartVm = useMockedViewModel(
+        {
+            "content": "❤️",
+            "count": 1,
+            "isSelected": true,
+            "aria-label": "Red heart, 1 reaction",
+            "tooltipVm": useStoryReactionTooltipVm("Red heart"),
+        },
+        { onClick: fn() },
+    );
+    return (
+        <ReactionsRowView vm={vm} className={styles.storyReactions}>
+            <ReactionsRowButtonView vm={thumbsUpVm} />
+            <ReactionsRowButtonView vm={heartVm} />
+        </ReactionsRowView>
+    );
+};
+const storyThreadPreview: ThreadMessagePreviewViewSnapshot = {
+    isVisible: true,
+    avatar: {
+        id: "@alice:example.org",
+        name: "Alice Example",
+        label: "Alice Example avatar",
+    },
+    showDisplayName: true,
+    senderName: "Alice Example",
+    previewContent: "Can you review the draft?",
+    previewTooltip: "Can you review the draft?",
+};
+
+const StoryThreadInfo = (): React.ReactElement => {
+    const previewVm = useMockedViewModel(storyThreadPreview, {});
+    const threadSummaryVm = useMockedViewModel(
+        {
+            isVisible: true,
+            replyCountLabel: "3 replies",
+            openThreadLabel: "Open thread",
+            notificationIndicator: undefined,
+            narrow: false,
+            previewVm,
+        },
+        { onClick: fn() },
+    );
+
+    return <ThreadSummaryView vm={threadSummaryVm} />;
+};
+
+/** The ThreadsList view uses the compact inline replies preview, not ThreadSummaryView. */
+const StoryThreadListInfo = (): React.ReactElement => {
+    const previewVm = useMockedViewModel(storyThreadPreview, {});
+
+    return (
+        <div className={styles.threadListInfo}>
+            <ThreadsIcon className={styles.threadListIcon} />
+            <span className={styles.threadListReplies}>3</span>
+            <ThreadMessagePreviewView vm={previewVm} />
+        </div>
+    );
+};
+const StoryReceipt = (): React.ReactElement => (
+    <span className={styles.receipt}>
+        <span className={styles.readReceiptGroup}>
+            <button type="button" className={styles.readReceiptButton} aria-label="Read by Alex and Taylor">
+                <span className={styles.readReceiptContainer} aria-hidden="true">
+                    <span className={styles.receiptAvatar}>T</span>
+                    <span className={styles.receiptAvatar}>A</span>
+                </span>
+            </button>
+        </span>
+    </span>
+);
+const StoryPadlock = (): React.ReactElement => <E2ePadlock icon={E2ePadlockIcon.Normal} title="End-to-end encrypted" />;
+const StoryContextMenu = (): React.ReactElement => <span className={styles.contextMenu}>⋯</span>;
+
+const TimelineStoryFrame = ({
+    density,
+    layout,
+    children,
+}: React.PropsWithChildren<{ density: string; layout: string }>): React.ReactElement => (
+    <StoryDebugFrame>
+        <div className={styles.storySurface} data-story-boundary="Timeline">
+            <div className={styles.timeline} data-story-boundary="RoomView.timeline" data-event-layout={layout}>
+                <div className={styles.scrollPanel} data-story-boundary="ScrollPanel">
+                    <div className={styles.messageListWrapper} data-story-boundary="messageListWrapper">
+                        <ol
+                            className={styles.messageList}
+                            data-story-boundary="RoomView.MessageList"
+                            data-event-density={density}
+                        >
+                            {children}
+                        </ol>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </StoryDebugFrame>
+);
+
+const baseRoot: EventTileViewProps["root"] = {
+    id: "event-tile-story-line",
+    ariaLive: "off",
+    scrollToken: "event-tile-story",
+    permalink: "https://example.org/event-tile-story",
+    eventId: "$event-tile-story",
+    layout: "group",
+    shape: "Room",
+    state: { isOwnEvent: false, hasReply: true },
+};
+
+const roomSlots: EventTileViewProps["slots"] = {
+    sender: <StorySender />,
+    avatar: <StoryAvatar />,
+    body: <StoryBody />,
+    timestamp: <StoryTimestamp />,
+    padlock: <StoryPadlock />,
+    replyChain: <StoryReplyChain />,
+    actionBar: <StoryActionBar />,
+    footer: <StoryFooter />,
+    threadInfo: <StoryThreadInfo />,
+    receipt: <StoryReceipt />,
+    contextMenu: <StoryContextMenu />,
+};
+
+type EventTileStoryProps = Omit<EventTileViewProps, "root"> & {
+    shape: EventTileViewProps["root"]["shape"];
+    state?: Partial<EventTileViewProps["root"]["state"]>;
+    roomMessages?: "boundaries" | "alice";
+};
+
+const createStoryTimestamp = (
+    layout: EventTileViewProps["root"]["layout"],
+    isLast: boolean,
+    showActionBar: boolean,
+): React.ReactElement | undefined => {
+    const showTimestamp = layout === "irc" || isLast || showActionBar;
+    return showTimestamp ? <StoryTimestamp visible={showTimestamp} /> : undefined;
+};
+
+const createRoomStorySlots = ({
+    isOwnEvent,
+    slots,
+    sender,
+    avatar,
+    timestamp,
+    showActionBar,
+}: {
+    isOwnEvent: boolean;
+    slots: EventTileViewProps["slots"];
+    sender?: React.ReactNode;
+    avatar?: React.ReactNode;
+    timestamp?: React.ReactNode;
+    showActionBar: boolean;
+}): EventTileViewProps["slots"] => {
+    const baseSlots = isOwnEvent ? slots : { body: slots.body };
+    return {
+        ...baseSlots,
+        sender,
+        avatar,
+        timestamp,
+        actionBar: showActionBar ? slots.actionBar : undefined,
+    };
+};
+
+const createPreviewStorySlots = ({
+    shape,
+    slots,
+    showActionBar,
+}: {
+    shape: EventTileViewProps["root"]["shape"];
+    slots: EventTileViewProps["slots"];
+    showActionBar: boolean;
+}): EventTileViewProps["slots"] => {
+    const threadInfo = shape === "Thread" ? undefined : slots.threadInfo;
+    return {
+        ...slots,
+        actionBar: showActionBar ? slots.actionBar : undefined,
+        // The application Thread rendering branch places no thread-info slot.
+        threadInfo,
+    };
+};
+
+function EventTileViewStoryContent({
+    shape,
+    state,
+    roomMessages = "boundaries",
+    ...props
+}: EventTileStoryProps): React.ReactElement {
+    const { layout, density } = useEventPresentation();
+    const [tileInteractions, setTileInteractions] = React.useState<
+        Record<string, { hovered: boolean; focused: boolean }>
+    >({});
+
+    const updateTileInteraction = (suffix: string, update: Partial<{ hovered: boolean; focused: boolean }>): void => {
+        setTileInteractions((current) => ({
+            ...current,
+            [suffix]: {
+                ...(current[suffix] ?? { hovered: false, focused: false }),
+                ...update,
+            },
+        }));
+    };
+
+    const renderTile = (
+        isOwnEvent: boolean,
+        suffix: string,
+        boundaryState: Partial<EventTileViewProps["root"]["state"]> = {},
+        isLast = false,
+    ): React.ReactElement => {
+        const tileState = { ...boundaryState, ...state };
+        const interaction = tileInteractions[suffix] ?? { hovered: false, focused: false };
+        const showActionBar = interaction.hovered || interaction.focused;
+        const timestamp = createStoryTimestamp(layout, isLast, showActionBar);
+        const showSenderAndAvatar = layout === "irc" || !tileState.continuation;
+        const sender = createStorySender(isOwnEvent, layout, showSenderAndAvatar);
+        const avatar = createStoryAvatar(isOwnEvent, layout, showSenderAndAvatar);
+        const slots =
+            shape === "Room"
+                ? createRoomStorySlots({
+                      isOwnEvent,
+                      slots: props.slots,
+                      sender,
+                      avatar,
+                      timestamp,
+                      showActionBar,
+                  })
+                : createPreviewStorySlots({ shape, slots: props.slots, showActionBar });
+
+        return (
+            <EventTileView
+                key={suffix}
+                {...props}
+                classNames={{
+                    ...props.classNames,
+                    root: classNames(
+                        props.classNames?.root,
+                        "storyEventTile",
+                        styles.storyEventTile,
+                        isOwnEvent && styles.storyOwnEvent,
+                        layout === "bubble" && styles.storyLayoutBubble,
+                    ),
+                    line: classNames(props.classNames?.line, "storyEventLine"),
+                }}
+                slots={slots}
+                root={{
+                    ...baseRoot,
+                    id: `${baseRoot.id}-${suffix}`,
+                    scrollToken: `${baseRoot.scrollToken}-${suffix}`,
+                    eventId: `${baseRoot.eventId}-${suffix}`,
+                    layout,
+                    shape,
+                    state: {
+                        ...baseRoot.state,
+                        ...tileState,
+                        isOwnEvent,
+                    },
+                }}
+                onMouseEnter={(event) => {
+                    props.onMouseEnter?.(event);
+                    updateTileInteraction(suffix, { hovered: true });
+                }}
+                onMouseLeave={(event) => {
+                    props.onMouseLeave?.(event);
+                    updateTileInteraction(suffix, { hovered: false });
+                }}
+                onFocus={(event) => {
+                    props.onFocus?.(event);
+                    updateTileInteraction(suffix, { focused: true });
+                }}
+                onBlur={(event) => {
+                    props.onBlur?.(event);
+                    if (!(event.relatedTarget instanceof Node) || !event.currentTarget.contains(event.relatedTarget)) {
+                        updateTileInteraction(suffix, { focused: false });
+                    }
+                }}
+            />
+        );
+    };
+
+    const renderRoomTiles = (): React.ReactNode => {
+        if (roomMessages === "alice") {
+            return renderTile(true, "alice-single", { continuation: false, lastInSection: true }, true);
+        }
+
+        return (
+            <>
+                {renderTile(false, "bob-first", { continuation: false, lastInSection: false })}
+                {renderTile(false, "bob-middle", { continuation: true, lastInSection: false })}
+                {renderTile(false, "bob-last", { continuation: true, lastInSection: true })}
+                {renderTile(true, "alice-single", { continuation: false, lastInSection: true }, true)}
+            </>
+        );
+    };
+
+    const tiles = shape === "Room" ? renderRoomTiles() : renderTile(false, "event");
+
+    return (
+        <TimelineStoryFrame density={density} layout={layout}>
+            {tiles}
+        </TimelineStoryFrame>
+    );
+}
+
+const EventTileViewStoryImpl = (props: EventTileStoryProps): React.ReactElement => (
+    <EventTileViewStoryContent {...props} />
+);
+
+const EventTileViewStory = withViewDocs(EventTileViewStoryImpl, EventTileView);
+
+const eventTileStoryDefaults = {
+    classNames: { details: styles.detailsContainer, line: styles.line },
+    onClick: fn(),
+    onContextMenu: fn(),
+    onPermalinkClick: fn(),
+    onPermalinkContextMenu: fn(),
+    slots: roomSlots,
+};
+
+const meta = {
+    title: "Timeline/EventTileView",
+    component: EventTileViewStory,
+    tags: ["autodocs"],
+    render: (args) => <EventTileViewStory {...args} />,
+    argTypes: {
+        shape: {
+            control: "select",
+            options: ["Room", "Thread", "ThreadsList", "File", "Notification", "Search", "Pinned"],
+        },
+        classNames: { table: { disable: true } },
+        state: {
+            control: "object",
+        },
+        onMouseEnter: { table: { disable: true } },
+        onMouseLeave: { table: { disable: true } },
+        onFocus: { table: { disable: true } },
+        onBlur: { table: { disable: true } },
+        onClick: { table: { disable: true } },
+        onContextMenu: { table: { disable: true } },
+        onPermalinkClick: { table: { disable: true } },
+        onPermalinkContextMenu: { table: { disable: true } },
+        refs: { table: { disable: true } },
+        slots: { table: { category: "Slots" } },
+    },
+    args: {
+        shape: "Room",
+        state: {},
+        ...eventTileStoryDefaults,
+    },
+} satisfies Meta<typeof EventTileViewStory>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Room: Story = {};
+
+export const ThreadsList: Story = {
+    args: {
+        shape: "ThreadsList",
+        slots: {
+            sender: <StorySender />,
+            avatar: <StoryAvatar />,
+            body: <StoryBody />,
+            timestamp: <StoryTimestamp />,
+            notificationBadge: <span className={styles.notificationDot} aria-hidden="true" />,
+            threadInfo: <StoryThreadListInfo />,
+            actionBar: <StoryActionBar />,
+        },
+    },
+};
+
+export const Thread: Story = {
+    args: {
+        shape: "Thread",
+    },
+};
+
+export const Notification: Story = {
+    args: {
+        shape: "Notification",
+        slots: {
+            sender: <StorySender />,
+            body: <StoryBody />,
+            timestamp: <StoryTimestamp />,
+            roomAvatar: <StoryAvatar room size="28px" />,
+            notificationRoomLabel: <span className={styles.roomLabel}>in Example room</span>,
+            notificationBadge: <span className={styles.notificationDot} aria-hidden="true" />,
+            threadInfo: <StoryThreadListInfo />,
+            receipt: <StoryReceipt />,
+        },
+    },
+};
+
+export const File: Story = {
+    args: {
+        shape: "File",
+        slots: {
+            sender: <StorySender />,
+            avatar: <StoryAvatar />,
+            timestamp: <StoryTimestamp />,
+            body: <StoryBody />,
+            contextMenu: <StoryContextMenu />,
+        },
+    },
+};
+
+export const Highlighted: Story = {
+    args: {
+        shape: "Thread",
+        state: { highlighted: true },
+        slots: {
+            sender: <StorySender />,
+            avatar: <StoryAvatar />,
+            timestamp: <StoryTimestamp />,
+            body: <StoryBody />,
+        },
+    },
+};
+
+export const Selected: Story = {
+    args: {
+        shape: "Thread",
+        state: { selected: true },
+        slots: {
+            sender: <StorySender />,
+            avatar: <StoryAvatar />,
+            timestamp: <StoryTimestamp />,
+            body: <StoryBody />,
+        },
+    },
+};
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventTileView.test.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventTileView.test.tsx
new file mode 100644
index 0000000000..a99abc5995
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventTileView.test.tsx
@@ -0,0 +1,520 @@
+/*
+ * Copyright 2026 Element Creations 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, { createRef } from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { fireEvent, render } from "@test-utils";
+import { EventTileView, type EventTileViewClassNames, type EventTileViewProps } from "./index";
+import styles from "./EventTileView.module.css";
+
+const renderState: EventTileViewProps["root"] = {
+    id: "event-line-1",
+    ariaLive: "off",
+    scrollToken: "event-1",
+    permalink: "https://example.org/event-1",
+    eventId: "$event-1",
+    layout: "group",
+    shape: "Room",
+    state: {
+        isOwnEvent: true,
+        hasReply: true,
+    },
+};
+
+function createProps(overrides: Partial<EventTileViewProps> = {}): EventTileViewProps {
+    return {
+        root: renderState,
+        classNames: {
+            root: "custom-root",
+            line: "custom-line",
+            slotContextMenu: "custom-context-menu",
+        },
+        slots: {
+            body: <span data-testid="body">Body</span>,
+            contextMenu: <span data-testid="context-menu">Context menu</span>,
+        },
+        ...overrides,
+    };
+}
+
+/**
+ * Styling hooks consumed by the web application's EventTile PCSS.
+ *
+ * Keep these names in this test until the application styling is migrated to
+ * shared-component selectors. The shared shell must preserve them alongside
+ * its own module classes.
+ */
+const applicationStylingClasses = {
+    root: "mx_EventTile",
+    line: "mx_EventTile_line",
+    details: "mx_EventTile_details",
+    slotAvatar: "mx_EventTile_avatar",
+    senderDetails: "mx_EventTile_senderDetails",
+    senderDetailsLink: "mx_EventTile_senderDetailsLink",
+    slotBody: "mx_EventTile_body",
+    slotNotificationRoomLabel: "mx_EventTile_truncated",
+    slotNotificationBadge: "mx_NotificationBadge",
+    slotSender: "mx_DisambiguatedProfile",
+    slotTimestamp: "mx_MessageTimestamp",
+    slotPadlock: "mx_EventTile_e2eIcon",
+    slotReplyChain: "mx_EventTile_reply",
+    slotActionBar: "mx_MessageActionBar",
+    slotFooter: "mx_EventTile_footer",
+    slotThreadInfo: "mx_ThreadSummary",
+    slotReceipt: "mx_ReadReceiptGroup_container",
+} satisfies Partial<EventTileViewClassNames>;
+
+const applicationSlotClassNames: Record<string, keyof typeof applicationStylingClasses> = {
+    avatar: "slotAvatar",
+    sender: "slotSender",
+    body: "slotBody",
+    timestamp: "slotTimestamp",
+    padlock: "slotPadlock",
+    replyChain: "slotReplyChain",
+    actionBar: "slotActionBar",
+    footer: "slotFooter",
+    threadInfo: "slotThreadInfo",
+    receipt: "slotReceipt",
+};
+
+const slotClasses: Record<string, string> = {
+    avatar: styles.slotAvatar,
+    sender: styles.slotSender,
+    body: styles.slotBody,
+    contextMenu: styles.slotContextMenu,
+    replyChain: styles.slotReplyChain,
+    actionBar: styles.slotActionBar,
+    timestamp: styles.slotTimestamp,
+    padlock: styles.slotPadlock,
+    footer: styles.slotFooter,
+    threadInfo: styles.slotThreadInfo,
+    receipt: styles.slotReceipt,
+    roomAvatar: styles.slotAvatar,
+    notificationRoomLabel: styles.slotNotificationRoomLabel,
+    notificationBadge: styles.slotNotificationBadge,
+};
+
+function createStylingContractSlots(): EventTileViewProps["slots"] {
+    const slot = (name: string): React.ReactElement => <span data-testid={`styling-contract-${name}`}>{name}</span>;
+
+    return {
+        avatar: slot("avatar"),
+        sender: slot("sender"),
+        body: slot("body"),
+        timestamp: slot("timestamp"),
+        padlock: slot("padlock"),
+        replyChain: slot("replyChain"),
+        actionBar: slot("actionBar"),
+        footer: slot("footer"),
+        threadInfo: slot("threadInfo"),
+        receipt: slot("receipt"),
+        roomAvatar: slot("room-avatar"),
+        notificationRoomLabel: slot("notificationRoomLabel"),
+        notificationBadge: slot("notificationBadge"),
+        contextMenu: slot("contextMenu"),
+    };
+}
+
+describe("EventTileView", () => {
+    it("renders the common root and line structure", () => {
+        const { container, getByTestId } = render(<EventTileView {...createProps()} />);
+        const root = container.firstElementChild;
+        const line = getByTestId("body").closest(".custom-line");
+        const contextMenu = getByTestId("context-menu").parentElement;
+
+        expect(root).toHaveClass("custom-root");
+        expect(root).toHaveAttribute("aria-live", "off");
+        expect(root).toHaveAttribute("aria-atomic", "true");
+        expect(root).toHaveAttribute("data-scroll-tokens", "event-1");
+        expect(root).toHaveAttribute("data-event-id", "$event-1");
+        expect(root).toHaveClass(styles.layoutGroup);
+        expect(root).toHaveClass(styles.stateOwnEvent);
+        expect(line).toHaveClass("custom-line");
+        expect(line).toHaveAttribute("id", "event-line-1");
+        expect(getByTestId("context-menu")).toBeInTheDocument();
+        expect(contextMenu).toHaveClass("custom-context-menu");
+        expect(contextMenu).toHaveAttribute("data-testid", "event-tile-slot-contextMenu");
+    });
+
+    it("exposes shell state through application-neutral state classes", () => {
+        const { container } = render(
+            <EventTileView
+                {...createProps({
+                    root: {
+                        ...renderState,
+                        state: {
+                            ...renderState.state,
+                            highlighted: true,
+                            selected: true,
+                            editing: true,
+                            continuation: true,
+                            lastInSection: true,
+                        },
+                    },
+                })}
+            />,
+        );
+        const root = container.firstElementChild!;
+
+        expect(root).toHaveClass(styles.stateHighlighted);
+        expect(root).toHaveClass(styles.stateSelected);
+        expect(root).toHaveClass(styles.stateEditing);
+        expect(root).toHaveClass(styles.stateContinuation);
+        expect(root).toHaveClass(styles.stateLastInSection);
+    });
+
+    it("preserves the application styling contract across rendering modes", () => {
+        const group = render(
+            <EventTileView
+                {...createProps({
+                    classNames: applicationStylingClasses,
+                    slots: createStylingContractSlots(),
+                })}
+            />,
+        );
+        const groupRoot = group.container.firstElementChild!;
+
+        expect(groupRoot).toHaveClass(applicationStylingClasses.root);
+        expect(
+            group.getByTestId("styling-contract-body").closest(`.${applicationStylingClasses.line}`),
+        ).toBeInTheDocument();
+
+        for (const slot of [
+            "sender",
+            "avatar",
+            "body",
+            "timestamp",
+            "padlock",
+            "replyChain",
+            "actionBar",
+            "footer",
+            "threadInfo",
+            "receipt",
+        ]) {
+            expect(
+                group.getByTestId(`styling-contract-${slot}`).closest('[data-testid^="event-tile-slot-"]'),
+            ).toHaveClass(applicationStylingClasses[applicationSlotClassNames[slot]]);
+            expect(
+                group.getByTestId(`styling-contract-${slot}`).closest('[data-testid^="event-tile-slot-"]'),
+            ).toHaveClass(slotClasses[slot]);
+            expect(
+                group.getByTestId(`styling-contract-${slot}`).closest('[data-testid^="event-tile-slot-"]'),
+            ).toHaveAttribute("data-testid", `event-tile-slot-${slot}`);
+        }
+
+        const thread = render(
+            <EventTileView
+                {...createProps({
+                    classNames: applicationStylingClasses,
+                    root: { ...renderState, shape: "Thread" },
+                    slots: createStylingContractSlots(),
+                })}
+            />,
+        );
+        expect(thread.container.querySelector(".mx_EventTile_senderDetails")).toHaveClass(
+            applicationStylingClasses.senderDetails,
+        );
+
+        const preview = render(
+            <EventTileView
+                {...createProps({
+                    classNames: applicationStylingClasses,
+                    root: { ...renderState, shape: "Notification" },
+                    slots: createStylingContractSlots(),
+                })}
+            />,
+        );
+        expect(preview.container.querySelector(".mx_EventTile_details")).toHaveClass(applicationStylingClasses.details);
+        expect(preview.getByTestId("styling-contract-notificationRoomLabel").parentElement).toHaveClass(
+            applicationStylingClasses.slotNotificationRoomLabel,
+        );
+        expect(preview.getByTestId("styling-contract-notificationBadge").parentElement).toHaveClass(
+            applicationStylingClasses.slotNotificationBadge,
+        );
+        expect(preview.getByTestId("styling-contract-room-avatar").parentElement).toHaveClass(
+            applicationStylingClasses.slotAvatar,
+        );
+
+        const file = render(
+            <EventTileView
+                {...createProps({
+                    classNames: applicationStylingClasses,
+                    root: { ...renderState, shape: "File" },
+                    slots: createStylingContractSlots(),
+                })}
+            />,
+        );
+        expect(file.container.querySelector(".mx_EventTile_senderDetailsLink")).toHaveClass(
+            applicationStylingClasses.senderDetailsLink,
+        );
+    });
+
+    it("renders the thread layout in the original slot order", () => {
+        const { container, getByTestId } = render(
+            <EventTileView
+                {...createProps({
+                    classNames: {
+                        senderDetails: "legacy-sender-details",
+                    },
+                    root: {
+                        ...renderState,
+                        shape: "Thread",
+                    },
+                    slots: {
+                        avatar: <span data-testid="avatar">Avatar</span>,
+                        sender: <span data-testid="sender">Sender</span>,
+                        replyChain: <span data-testid="reply-chain">Reply chain</span>,
+                        body: <span data-testid="body">Body</span>,
+                        actionBar: <span data-testid="action-bar">Action bar</span>,
+                        timestamp: <span data-testid="timestamp">Timestamp</span>,
+                        receipt: <span data-testid="receipt">Receipt</span>,
+                        footer: <span data-testid="footer">Footer</span>,
+                    },
+                })}
+            />,
+        );
+        const root = container.firstElementChild!;
+        const senderDetails = getByTestId("avatar").parentElement?.parentElement;
+        const line = getByTestId("body").parentElement?.parentElement;
+
+        if (!senderDetails || !line) {
+            throw new Error("Expected EventTile thread layout elements to be present");
+        }
+
+        expect(senderDetails).toContainElement(getByTestId("sender"));
+        expect(senderDetails).toHaveClass("legacy-sender-details");
+        expect(senderDetails).toBe(root.firstElementChild);
+        expect(line).toContainElement(getByTestId("reply-chain"));
+        expect(line).toContainElement(getByTestId("action-bar"));
+        expect(line).toContainElement(getByTestId("timestamp"));
+        expect(line).toContainElement(getByTestId("receipt"));
+        expect(getByTestId("footer").parentElement?.parentElement).toBe(root);
+    });
+
+    it.each(["Notification", "ThreadsList"] as const)("renders the %s preview layout", (shape) => {
+        const { container, getByTestId, queryByTestId } = render(
+            <EventTileView
+                {...createProps({
+                    classNames: {
+                        details: "legacy-details",
+                        slotAvatar: "legacy-avatar",
+                        slotActionBar: "legacy-thread-action-bar",
+                    },
+                    root: {
+                        ...renderState,
+                        shape,
+                    },
+                    slots: {
+                        sender: <span data-testid="sender">Sender</span>,
+                        notificationRoomLabel:
+                            shape === "Notification" ? <span data-testid="room-label">Room</span> : undefined,
+                        timestamp: <span data-testid="timestamp">Timestamp</span>,
+                        notificationBadge: <span data-testid="badge">Badge</span>,
+                        roomAvatar: <span data-testid="room-avatar">Room avatar</span>,
+                        avatar: <span data-testid="avatar">Avatar</span>,
+                        body: <span data-testid="body">Body</span>,
+                        threadInfo: <span data-testid="thread-info">Thread info</span>,
+                        actionBar: <span data-testid="action-bar">Action bar</span>,
+                        receipt: <span data-testid="receipt">Receipt</span>,
+                    },
+                })}
+            />,
+        );
+        const root = container.firstElementChild!;
+        const details = getByTestId("sender").parentElement?.parentElement;
+        const line = getByTestId("body").parentElement?.parentElement;
+
+        if (!details || !line) {
+            throw new Error(`Expected EventTile ${shape} layout elements to be present`);
+        }
+
+        expect(root).toHaveAttribute("tabindex", "-1");
+        expect(root).toHaveClass(shape === "Notification" ? styles.shapeNotification : styles.shapeThreadsList);
+        expect(details).toContainElement(getByTestId("timestamp"));
+        expect(details).toHaveClass("legacy-details");
+        expect(details).toContainElement(getByTestId("badge"));
+        expect(line).toContainElement(getByTestId("thread-info"));
+        expect(getByTestId("receipt").parentElement?.parentElement).toBe(root);
+
+        if (shape === "Notification") {
+            const avatar = getByTestId("room-avatar").parentElement!;
+            expect(avatar.parentElement).toBe(root);
+            expect(avatar).toHaveClass("legacy-avatar");
+            expect(queryByTestId("action-bar")).not.toBeInTheDocument();
+        } else {
+            const avatar = getByTestId("avatar").parentElement!;
+            const actionBar = getByTestId("action-bar").parentElement!;
+            expect(avatar.parentElement).toBe(root);
+            expect(actionBar.parentElement).toBe(root);
+            expect(actionBar).toHaveClass("legacy-thread-action-bar");
+            expect(queryByTestId("room-avatar")).not.toBeInTheDocument();
+        }
+    });
+
+    it("renders the file layout with permalink interactions", () => {
+        const onPermalinkClick = vi.fn((event: React.MouseEvent<HTMLAnchorElement>) => {
+            event.preventDefault();
+        });
+        const onPermalinkContextMenu = vi.fn();
+        const { container, getByTestId } = render(
+            <EventTileView
+                {...createProps({
+                    root: { ...renderState, shape: "File" },
+                    classNames: {
+                        senderDetails: "legacy-sender-details",
+                        senderDetailsLink: "legacy-sender-details-link",
+                    },
+                    onPermalinkClick,
+                    onPermalinkContextMenu,
+                    slots: {
+                        avatar: <span data-testid="avatar">Avatar</span>,
+                        sender: <span data-testid="sender">Sender</span>,
+                        timestamp: <span data-testid="timestamp">Timestamp</span>,
+                        body: <span data-testid="body">Body</span>,
+                    },
+                })}
+            />,
+        );
+        const root = container.firstElementChild!;
+        const link = getByTestId("sender").closest("a");
+        const senderDetails = getByTestId("sender").closest(".legacy-sender-details");
+
+        expect(root).toHaveClass(styles.shapeFile);
+
+        if (!link) {
+            throw new Error("Expected sender details link");
+        }
+        if (!senderDetails) {
+            throw new Error("Expected sender details container");
+        }
+
+        expect(link).toHaveAttribute("href", renderState.permalink);
+        expect(link).toHaveClass("legacy-sender-details-link");
+        expect(senderDetails).toHaveClass("legacy-sender-details");
+        expect(senderDetails).toContainElement(getByTestId("timestamp"));
+        expect(getByTestId("body").closest("#event-line-1")).toBe(root.lastElementChild);
+
+        fireEvent.click(link);
+        fireEvent.contextMenu(senderDetails);
+        expect(onPermalinkClick).toHaveBeenCalledOnce();
+        expect(onPermalinkContextMenu).toHaveBeenCalledOnce();
+    });
+
+    it("falls back to a safe file permalink", () => {
+        const { getByTestId } = render(
+            <EventTileView
+                {...createProps({
+                    root: { ...renderState, permalink: undefined, shape: "File" },
+                })}
+            />,
+        );
+
+        expect(getByTestId("body").closest("#event-line-1")?.previousElementSibling).toHaveAttribute("href", "#");
+    });
+
+    it.each(["group", "irc"] as const)("renders the %s timeline layout", (layout) => {
+        const { container, getByTestId } = render(
+            <EventTileView
+                {...createProps({
+                    root: { ...renderState, layout },
+                    slots: {
+                        sender: <span data-testid="sender">Sender</span>,
+                        avatar: <span data-testid="avatar">Avatar</span>,
+                        timestamp: <span data-testid="timestamp">Timestamp</span>,
+                        padlock: <span data-testid="padlock">Padlock</span>,
+                        replyChain: <span data-testid="reply-chain">Reply chain</span>,
+                        body: <span data-testid="body">Body</span>,
+                        actionBar: <span data-testid="action-bar">Action bar</span>,
+                        footer: <span data-testid="footer">Footer</span>,
+                        threadInfo: <span data-testid="thread-info">Thread info</span>,
+                        receipt: <span data-testid="receipt">Receipt</span>,
+                        contextMenu: <span data-testid="context-menu">Context menu</span>,
+                    },
+                })}
+            />,
+        );
+        const root = container.firstElementChild!;
+        const line = getByTestId("body").parentElement?.parentElement;
+
+        if (!line) {
+            throw new Error(`Expected EventTile ${layout} layout line to be present`);
+        }
+
+        expect(root).toHaveAttribute("tabindex", "-1");
+        expect(root).toHaveClass(layout === "irc" ? styles.layoutIrc : styles.layoutGroup);
+        expect(line).toContainElement(getByTestId("reply-chain"));
+        expect(line).toContainElement(getByTestId("action-bar"));
+
+        if (layout === "irc") {
+            expect(root.children[0]).toContainElement(getByTestId("padlock"));
+            expect(root.children[1]).toContainElement(getByTestId("timestamp"));
+            expect(root.children[2]).toContainElement(getByTestId("avatar"));
+            expect(root.children[3]).toContainElement(getByTestId("sender"));
+            expect(root.children[4]).toBe(line);
+            expect(root.children[5]).toContainElement(getByTestId("receipt"));
+            expect(getByTestId("padlock").parentElement?.parentElement).toBe(root);
+            expect(getByTestId("footer").parentElement?.parentElement).toBe(line);
+            expect(getByTestId("thread-info").parentElement?.parentElement).toBe(line);
+        } else {
+            expect(getByTestId("timestamp").parentElement?.parentElement).toBe(line);
+            expect(getByTestId("padlock").parentElement?.parentElement).toBe(line);
+            expect(getByTestId("footer").parentElement?.parentElement).toBe(root);
+            expect(getByTestId("thread-info").parentElement?.parentElement).toBe(root);
+        }
+
+        expect(getByTestId("receipt").parentElement?.parentElement).toBe(root);
+    });
+
+    it("forwards root and line interactions", () => {
+        const onClick = vi.fn();
+        const onContextMenu = vi.fn();
+        const { container, getByTestId } = render(<EventTileView {...createProps({ onClick, onContextMenu })} />);
+
+        fireEvent.click(container.firstElementChild!);
+        fireEvent.contextMenu(getByTestId("body").parentElement!);
+
+        expect(onClick).not.toHaveBeenCalled();
+        expect(onContextMenu).toHaveBeenCalledOnce();
+
+        const { container: previewContainer } = render(
+            <EventTileView
+                {...createProps({
+                    root: { ...renderState, shape: "Notification" },
+                    onClick,
+                })}
+            />,
+        );
+        fireEvent.click(previewContainer.firstElementChild!);
+        expect(onClick).toHaveBeenCalledOnce();
+    });
+
+    it("does not attach a context menu handler to preview lines", () => {
+        const onContextMenu = vi.fn();
+        const { getByTestId } = render(
+            <EventTileView
+                {...createProps({
+                    root: { ...renderState, shape: "Notification" },
+                    onContextMenu,
+                })}
+            />,
+        );
+
+        fireEvent.contextMenu(getByTestId("body").parentElement!);
+        expect(onContextMenu).not.toHaveBeenCalled();
+    });
+
+    it("forwards the root ref and supports a custom root element", () => {
+        const rootRef = createRef<HTMLElement>();
+        const { container } = render(
+            <EventTileView {...createProps({ root: { ...renderState, as: "article" }, refs: { root: rootRef } })} />,
+        );
+
+        expect(container.firstElementChild?.tagName).toBe("ARTICLE");
+        expect(rootRef.current).toBe(container.firstElementChild);
+    });
+});
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventTileView.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventTileView.tsx
new file mode 100644
index 0000000000..fe1685f72f
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventTileView.tsx
@@ -0,0 +1,234 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+import classNames from "classnames";
+
+import type { EventTileViewClassNames, EventTileViewProps, EventTileViewSlots } from "./EventTileView.types";
+import styles from "./EventTileView.module.css";
+
+type EventTileSlotName = keyof EventTileViewSlots;
+
+/**
+ * Renders the common EventTile root and event-line structure.
+ *
+ * Rendering-mode branches own the timeline-specific slot placement. The
+ * application supplies render-ready content; this component owns the shared
+ * structure, slot boundaries, placement classes, and root behavior.
+ */
+export function EventTileView({
+    root,
+    slots,
+    classNames: classNameOverrides,
+    refs,
+    onMouseEnter,
+    onMouseLeave,
+    onFocus,
+    onBlur,
+    onClick,
+    onContextMenu,
+    onPermalinkClick,
+    onPermalinkContextMenu,
+}: Readonly<EventTileViewProps>): JSX.Element {
+    const Root = root.as ?? "li";
+
+    const renderSlot = (slotName: EventTileSlotName, content: React.ReactNode = slots[slotName]): React.ReactNode => {
+        if (content === null || content === undefined || typeof content === "boolean") return null;
+
+        const slotConfig: Record<EventTileSlotName, { style: string; className: keyof EventTileViewClassNames }> = {
+            avatar: { style: styles.slotAvatar, className: "slotAvatar" },
+            sender: { style: styles.slotSender, className: "slotSender" },
+            body: { style: styles.slotBody, className: "slotBody" },
+            timestamp: { style: styles.slotTimestamp, className: "slotTimestamp" },
+            padlock: { style: styles.slotPadlock, className: "slotPadlock" },
+            replyChain: { style: styles.slotReplyChain, className: "slotReplyChain" },
+            actionBar: { style: styles.slotActionBar, className: "slotActionBar" },
+            footer: { style: styles.slotFooter, className: "slotFooter" },
+            threadInfo: { style: styles.slotThreadInfo, className: "slotThreadInfo" },
+            receipt: { style: styles.slotReceipt, className: "slotReceipt" },
+            roomAvatar: { style: styles.slotAvatar, className: "slotAvatar" },
+            notificationRoomLabel: { style: styles.slotNotificationRoomLabel, className: "slotNotificationRoomLabel" },
+            notificationBadge: { style: styles.slotNotificationBadge, className: "slotNotificationBadge" },
+            contextMenu: { style: styles.slotContextMenu, className: "slotContextMenu" },
+        };
+
+        const { style, className } = slotConfig[slotName];
+
+        return (
+            <div
+                key={slotName}
+                data-testid={`event-tile-slot-${slotName}`}
+                className={classNames(style, classNameOverrides?.[className])}
+            >
+                {content}
+            </div>
+        );
+    };
+
+    const renderSlots = (...slotNames: EventTileSlotName[]): React.ReactNode =>
+        slotNames.map((slotName) => renderSlot(slotName));
+
+    const renderRoot = (
+        children: React.ReactNode,
+        rootClickHandler: React.MouseEventHandler<HTMLElement> | undefined,
+        rootTabIndex?: number,
+    ): JSX.Element => (
+        <Root
+            ref={refs?.root}
+            className={classNames(styles.root, classNameOverrides?.root, {
+                [styles.stateOwnEvent]: root.state.isOwnEvent,
+                [styles.stateHighlighted]: root.state?.highlighted,
+                [styles.stateSelected]: root.state?.selected,
+                [styles.stateEditing]: root.state?.editing,
+                [styles.stateContinuation]: root.state?.continuation,
+                [styles.stateLastInSection]: root.state?.lastInSection,
+                [styles.layoutGroup]: root.layout === "group",
+                [styles.layoutBubble]: root.layout === "bubble",
+                [styles.layoutIrc]: root.layout === "irc",
+                [styles.shapeThread]: root.shape === "Thread",
+                [styles.shapeThreadsList]: root.shape === "ThreadsList",
+                [styles.shapeFile]: root.shape === "File",
+                [styles.shapeNotification]: root.shape === "Notification",
+            })}
+            aria-live={root.ariaLive}
+            aria-atomic={true}
+            data-scroll-tokens={root.scrollToken}
+            data-event-id={root.eventId}
+            tabIndex={rootTabIndex}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            onClick={rootClickHandler}
+        >
+            {children}
+        </Root>
+    );
+
+    // Thread view: sender details, line content, then footer.
+    if (root.shape === "Thread") {
+        return renderRoot(
+            <>
+                <div className={classNames(styles.senderDetails, classNameOverrides?.senderDetails)}>
+                    {renderSlots("avatar", "sender")}
+                </div>
+                <div
+                    id={root.id}
+                    className={classNames(styles.line, classNameOverrides?.line)}
+                    onContextMenu={onContextMenu}
+                >
+                    {renderSlots("contextMenu", "replyChain", "body", "actionBar", "timestamp", "receipt")}
+                </div>
+                {renderSlot("footer")}
+            </>,
+            undefined,
+        );
+    }
+
+    // Notification view: metadata, room avatar, and preview content.
+    if (root.shape === "Notification") {
+        return renderRoot(
+            <>
+                <div className={classNames(styles.details, classNameOverrides?.details)}>
+                    {renderSlots("sender", "notificationRoomLabel", "timestamp", "notificationBadge")}
+                </div>
+                {slots.roomAvatar ? renderSlot("roomAvatar") : renderSlot("avatar")}
+                <div className={classNames(styles.line, classNameOverrides?.line)} id={root.id}>
+                    {renderSlots("body", "threadInfo")}
+                </div>
+                {renderSlot("receipt")}
+            </>,
+            onClick,
+            -1,
+        );
+    }
+
+    // ThreadsList view: metadata, avatar, preview content, and action bar.
+    if (root.shape === "ThreadsList") {
+        return renderRoot(
+            <>
+                <div className={classNames(styles.details, classNameOverrides?.details)}>
+                    {renderSlots("sender", "notificationRoomLabel", "timestamp", "notificationBadge")}
+                </div>
+                {renderSlot("avatar")}
+                <div className={classNames(styles.line, classNameOverrides?.line)} id={root.id}>
+                    {renderSlots("body", "threadInfo")}
+                </div>
+                {renderSlot("actionBar")}
+                {renderSlot("receipt")}
+            </>,
+            onClick,
+            -1,
+        );
+    }
+
+    // File view: permalink-wrapped sender details followed by the file body.
+    if (root.shape === "File") {
+        return renderRoot(
+            <>
+                <a
+                    className={classNames(styles.senderDetailsLink, classNameOverrides?.senderDetailsLink)}
+                    href={root.permalink ?? "#"}
+                    onClick={onPermalinkClick}
+                >
+                    <div
+                        className={classNames(styles.senderDetails, classNameOverrides?.senderDetails)}
+                        onContextMenu={onPermalinkContextMenu}
+                    >
+                        {renderSlots("avatar", "sender", "timestamp")}
+                    </div>
+                </a>
+                <div
+                    id={root.id}
+                    className={classNames(styles.line, classNameOverrides?.line)}
+                    onContextMenu={onContextMenu}
+                >
+                    {renderSlots("contextMenu", "body")}
+                </div>
+            </>,
+            undefined,
+        );
+    }
+
+    // Default shape: Pinned, Room, Search
+
+    // IRC layout: the leading metadata slots precede the line content.
+    if (root.layout === "irc") {
+        return renderRoot(
+            <>
+                {renderSlots("padlock", "timestamp", "avatar", "sender")}
+                <div
+                    id={root.id}
+                    className={classNames(styles.line, classNameOverrides?.line)}
+                    onContextMenu={onContextMenu}
+                >
+                    {renderSlots("contextMenu", "replyChain", "body", "actionBar", "footer", "threadInfo")}
+                </div>
+                {renderSlot("receipt")}
+            </>,
+            undefined,
+            -1,
+        );
+    }
+
+    // Group and bubble layouts: sender details precede the line content.
+    return renderRoot(
+        <>
+            {renderSlots("sender", "avatar")}
+            <div
+                id={root.id}
+                className={classNames(styles.line, classNameOverrides?.line)}
+                onContextMenu={onContextMenu}
+            >
+                {renderSlots("contextMenu", "timestamp", "padlock", "replyChain", "body", "actionBar")}
+            </div>
+            {renderSlots("footer", "threadInfo", "receipt")}
+        </>,
+        undefined,
+        -1,
+    );
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventTileView.types.ts b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventTileView.types.ts
new file mode 100644
index 0000000000..b2b5c723d5
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/EventTileView.types.ts
@@ -0,0 +1,145 @@
+/*
+ * Copyright 2026 Element Creations 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 React from "react";
+
+import type { EventLayout } from "../../EventPresentation/EventPresentation.types";
+
+/** Timeline rendering modes supported by the EventTile shell. */
+export type EventTileRenderingMode = "Room" | "Thread" | "ThreadsList" | "File" | "Notification" | "Search" | "Pinned";
+
+/** Conditional state used to derive EventTile root classes. */
+export interface EventTileViewRootState {
+    /** Whether the event belongs to the current user. */
+    isOwnEvent: boolean;
+    /** Whether EventTile renders a reply chain. */
+    hasReply: boolean;
+    /** Whether the event is highlighted by search or navigation. */
+    highlighted?: boolean;
+    /** Whether the event is selected. */
+    selected?: boolean;
+    /** Whether the event is currently being edited. */
+    editing?: boolean;
+    /** Whether the event continues the previous event block. */
+    continuation?: boolean;
+    /** Whether this is the last event in a section. */
+    lastInSection?: boolean;
+}
+
+/** Complete root state consumed by EventTileView. */
+export interface EventTileViewRoot {
+    /** Stable unique id for the component instance. */
+    id: string;
+    /** Element used for the EventTile root. Defaults to `li`. */
+    as?: React.ElementType;
+    /** Optional aria-live value for the root element. */
+    ariaLive?: "off";
+    /** Stable event scroll token. */
+    scrollToken?: string;
+    /** Optional permalink used by sender details. */
+    permalink?: string;
+    /** Optional event identifier exposed through `data-event-id`. */
+    eventId?: string;
+    /** Configured tile layout. */
+    layout: EventLayout;
+    /** Timeline rendering mode. */
+    shape: EventTileRenderingMode;
+    /** Conditional state classes and styling state. */
+    state: EventTileViewRootState;
+}
+
+/** Optional application CSS class overrides for shell-owned structural elements and slot boundaries. */
+export interface EventTileViewClassNames {
+    root?: string;
+    line?: string;
+    details?: string;
+    senderDetails?: string;
+    senderDetailsLink?: string;
+    slotActionBar?: string;
+    slotAvatar?: string;
+    slotBody?: string;
+    slotContextMenu?: string;
+    slotFooter?: string;
+    slotNotificationRoomLabel?: string;
+    slotNotificationBadge?: string;
+    slotPadlock?: string;
+    slotReceipt?: string;
+    slotReplyChain?: string;
+    slotSender?: string;
+    slotThreadInfo?: string;
+    slotTimestamp?: string;
+}
+
+/** Render-ready children supplied by the application integration layer. */
+export interface EventTileViewSlots {
+    /** Sender avatar for the current rendering mode. */
+    avatar?: React.ReactNode;
+    /** Sender profile/details. */
+    sender?: React.ReactNode;
+    /** Main event body. */
+    body: React.ReactNode;
+    /** Timestamp rendered by the shell according to the current layout. */
+    timestamp?: React.ReactNode;
+    /** Padlock rendered by the shell according to the current layout. */
+    padlock?: React.ReactNode;
+    /** Reply chain rendered above the event body. */
+    replyChain?: React.ReactNode;
+    /** Action bar rendered by the shell according to the current rendering mode. */
+    actionBar?: React.ReactNode;
+    /** Event footer rendered by the shell according to the current layout. */
+    footer?: React.ReactNode;
+    /** Thread information rendered by the shell according to the current layout. */
+    threadInfo?: React.ReactNode;
+    /** Read receipt or send-state indicator. */
+    receipt?: React.ReactNode;
+    /** Room avatar used by notification tiles. */
+    roomAvatar?: React.ReactNode;
+    /** Notification room-name label. */
+    notificationRoomLabel?: React.ReactNode;
+    /** Unread notification badge. */
+    notificationBadge?: React.ReactNode;
+    /** Context menu rendered inside the event line. */
+    contextMenu?: React.ReactNode;
+}
+
+/** DOM refs supplied by the application integration layer. */
+export interface EventTileViewRefs {
+    /** Ref attached to the root element. */
+    root?: React.Ref<HTMLElement>;
+}
+
+/** DOM handlers supplied by the application integration layer. */
+export interface EventTileViewHandlers {
+    /** Root hover start. */
+    onMouseEnter?: React.MouseEventHandler<HTMLElement>;
+    /** Root hover end. */
+    onMouseLeave?: React.MouseEventHandler<HTMLElement>;
+    /** Root focus entry. */
+    onFocus?: React.FocusEventHandler<HTMLElement>;
+    /** Root focus exit. */
+    onBlur?: React.FocusEventHandler<HTMLElement>;
+    /** Event click. */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** Event context menu. */
+    onContextMenu?: React.MouseEventHandler<HTMLElement>;
+    /** Permalink click. */
+    onPermalinkClick?: React.MouseEventHandler<HTMLAnchorElement>;
+    /** Permalink context menu. */
+    onPermalinkContextMenu?: React.MouseEventHandler<HTMLElement>;
+}
+
+/** Props for the shared EventTile shell. */
+export interface EventTileViewProps extends EventTileViewHandlers {
+    /** Pure root render state. */
+    root: EventTileViewRoot;
+    /** Optional application CSS class overrides for shell-owned elements. */
+    classNames?: EventTileViewClassNames;
+    /** Render-ready children supplied by the application layer. Each slot is rendered inside a named shell boundary. */
+    slots: EventTileViewSlots;
+    /** DOM refs supplied by the application layer. */
+    refs?: EventTileViewRefs;
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/MJitsiWidgetEventView.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/MJitsiWidgetEventView.stories.tsx
new file mode 100644
index 0000000000..1fa6b3d5db
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/MJitsiWidgetEventView.stories.tsx
@@ -0,0 +1,73 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useMockedViewModel } from "../../../../../core/viewmodel";
+import { withViewDocs } from "../../../../../../.storybook/withViewDocs";
+import { MJitsiWidgetEventView, type MJitsiWidgetEventViewSnapshot } from "./MJitsiWidgetEventView";
+
+type MJitsiWidgetEventViewProps = MJitsiWidgetEventViewSnapshot & {
+    className?: string;
+};
+
+const MJitsiWidgetEventViewWrapperImpl = ({
+    className,
+    ...snapshot
+}: MJitsiWidgetEventViewProps): JSX.Element | null => {
+    const vm = useMockedViewModel(snapshot, {});
+
+    return <MJitsiWidgetEventView vm={vm} className={className} />;
+};
+
+const MJitsiWidgetEventViewWrapper = withViewDocs(MJitsiWidgetEventViewWrapperImpl, MJitsiWidgetEventView);
+
+const meta = {
+    title: "Timeline/Timeline Event/MJitsiWidgetEventView",
+    component: MJitsiWidgetEventViewWrapper,
+    tags: ["autodocs"],
+    args: {
+        isVisible: true,
+        title: "Video conference started by Alice",
+        subtitle: "Join the conference at the top of this room",
+        className: "",
+    },
+} satisfies Meta<typeof MJitsiWidgetEventViewWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Started: Story = {};
+
+export const Updated: Story = {
+    args: {
+        title: "Video conference updated by Alice",
+        subtitle: "Join the conference from the room information card on the right",
+    },
+};
+
+export const Ended: Story = {
+    args: {
+        title: "Video conference ended by Alice",
+        subtitle: null,
+    },
+};
+
+export const Hidden: Story = {
+    args: {
+        isVisible: false,
+        title: "",
+        subtitle: null,
+    },
+};
+
+export const WithTimestamp: Story = {
+    args: {
+        timestamp: <span>14:56</span>,
+    },
+};
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/MJitsiWidgetEventView.test.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/MJitsiWidgetEventView.test.tsx
new file mode 100644
index 0000000000..7879ba7942
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/MJitsiWidgetEventView.test.tsx
@@ -0,0 +1,82 @@
+/*
+ * Copyright 2026 Element Creations 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 { composeStories } from "@storybook/react-vite";
+import { render, screen } from "@test-utils";
+import React from "react";
+import { describe, expect, it } from "vitest";
+
+import { MockViewModel } from "../../../../../core/viewmodel";
+import { MJitsiWidgetEventView } from "./MJitsiWidgetEventView";
+import * as stories from "./MJitsiWidgetEventView.stories";
+
+const { Started, Updated, Ended, Hidden, WithTimestamp } = composeStories(stories);
+
+describe("MJitsiWidgetEventView", () => {
+    it("renders the Started story", () => {
+        const { container } = render(<Started />);
+
+        expect(container).toMatchSnapshot();
+        expect(screen.getByText("Video conference started by Alice")).toBeInTheDocument();
+        expect(screen.getByText("Join the conference at the top of this room")).toBeInTheDocument();
+    });
+
+    it("renders the Updated story", () => {
+        const { container } = render(<Updated />);
+
+        expect(container).toMatchSnapshot();
+        expect(screen.getByText("Video conference updated by Alice")).toBeInTheDocument();
+        expect(screen.getByText("Join the conference from the room information card on the right")).toBeInTheDocument();
+    });
+
+    it("renders the Ended story without a subtitle", () => {
+        const { container } = render(<Ended />);
+
+        expect(container).toMatchSnapshot();
+        expect(screen.getByText("Video conference ended by Alice")).toBeInTheDocument();
+        expect(screen.queryByText(/Join the conference/)).not.toBeInTheDocument();
+    });
+
+    it("renders nothing when hidden", () => {
+        const { container } = render(<Hidden />);
+
+        expect(container).toMatchSnapshot();
+        expect(screen.queryByText(/Video conference/)).not.toBeInTheDocument();
+    });
+
+    it("renders a timestamp", () => {
+        const { container } = render(<WithTimestamp />);
+
+        expect(container).toMatchSnapshot();
+        expect(screen.getByText("14:56")).toBeInTheDocument();
+    });
+
+    it("applies a custom className to the root element", () => {
+        const vm = new MockViewModel({
+            isVisible: true,
+            title: "Video conference started by Alice",
+            subtitle: null,
+        });
+        const { container } = render(<MJitsiWidgetEventView vm={vm} className="custom-jitsi" />);
+
+        expect(container.firstChild).toHaveClass("custom-jitsi");
+    });
+
+    it("forwards the provided ref to the root element", () => {
+        const ref = React.createRef<HTMLDivElement>() as React.RefObject<HTMLDivElement>;
+        const vm = new MockViewModel({
+            isVisible: true,
+            title: "Video conference started by Alice",
+            subtitle: null,
+        });
+
+        render(<MJitsiWidgetEventView vm={vm} ref={ref} />);
+
+        expect(ref.current).toBeInstanceOf(HTMLDivElement);
+        expect(ref.current).toHaveTextContent("Video conference started by Alice");
+    });
+});
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/MJitsiWidgetEventView.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/MJitsiWidgetEventView.tsx
new file mode 100644
index 0000000000..1728d4b8c0
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/MJitsiWidgetEventView.tsx
@@ -0,0 +1,73 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+import { VideoCallSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import { type ViewModel, useViewModel } from "../../../../../core/viewmodel";
+import { EventTileBubble } from "../EventTileBubble";
+
+export interface MJitsiWidgetEventViewSnapshot {
+    /**
+     * Whether the event has enough context to render.
+     */
+    isVisible: boolean;
+    /**
+     * Main title text for the Jitsi widget event.
+     */
+    title: string;
+    /**
+     * Optional join prompt shown below the title.
+     */
+    subtitle: string | null;
+    /**
+     * Optional timestamp element rendered in the EventTileBubble footer slot.
+     */
+    timestamp?: JSX.Element;
+}
+
+export type MJitsiWidgetEventViewModel = ViewModel<MJitsiWidgetEventViewSnapshot>;
+
+export interface MJitsiWidgetEventViewProps {
+    /**
+     * ViewModel providing the current Jitsi widget event snapshot.
+     */
+    vm: MJitsiWidgetEventViewModel;
+    /**
+     * Optional CSS classes passed through to EventTileBubble.
+     */
+    className?: string;
+    /**
+     * Optional Ref forwarded to the root DOM element.
+     */
+    ref?: React.RefObject<HTMLDivElement>;
+}
+
+/**
+ * Renders a timeline bubble describing a Jitsi widget state event.
+ */
+export function MJitsiWidgetEventView({
+    vm,
+    className,
+    ref,
+}: Readonly<MJitsiWidgetEventViewProps>): JSX.Element | null {
+    const { isVisible, title, subtitle, timestamp } = useViewModel(vm);
+
+    if (!isVisible) return null;
+
+    return (
+        <EventTileBubble
+            icon={<VideoCallSolidIcon color="var(--cpd-color-icon-primary)" />}
+            className={className}
+            title={title}
+            subtitle={subtitle || undefined}
+            ref={ref}
+        >
+            {timestamp}
+        </EventTileBubble>
+    );
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/__snapshots__/MJitsiWidgetEventView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/__snapshots__/MJitsiWidgetEventView.test.tsx.snap
new file mode 100644
index 0000000000..e4437f78d5
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/__snapshots__/MJitsiWidgetEventView.test.tsx.snap
@@ -0,0 +1,125 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MJitsiWidgetEventView > renders a timestamp 1`] = `
+<div>
+  <div
+    class="EventTileBubble-module_container"
+  >
+    <svg
+      color="var(--cpd-color-icon-primary)"
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
+      />
+    </svg>
+    <div
+      class="EventTileBubble-module_title"
+    >
+      Video conference started by Alice
+    </div>
+    <div
+      class="EventTileBubble-module_subtitle"
+    >
+      Join the conference at the top of this room
+    </div>
+    <span>
+      14:56
+    </span>
+  </div>
+</div>
+`;
+
+exports[`MJitsiWidgetEventView > renders nothing when hidden 1`] = `<div />`;
+
+exports[`MJitsiWidgetEventView > renders the Ended story without a subtitle 1`] = `
+<div>
+  <div
+    class="EventTileBubble-module_container"
+  >
+    <svg
+      color="var(--cpd-color-icon-primary)"
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
+      />
+    </svg>
+    <div
+      class="EventTileBubble-module_title"
+    >
+      Video conference ended by Alice
+    </div>
+  </div>
+</div>
+`;
+
+exports[`MJitsiWidgetEventView > renders the Started story 1`] = `
+<div>
+  <div
+    class="EventTileBubble-module_container"
+  >
+    <svg
+      color="var(--cpd-color-icon-primary)"
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
+      />
+    </svg>
+    <div
+      class="EventTileBubble-module_title"
+    >
+      Video conference started by Alice
+    </div>
+    <div
+      class="EventTileBubble-module_subtitle"
+    >
+      Join the conference at the top of this room
+    </div>
+  </div>
+</div>
+`;
+
+exports[`MJitsiWidgetEventView > renders the Updated story 1`] = `
+<div>
+  <div
+    class="EventTileBubble-module_container"
+  >
+    <svg
+      color="var(--cpd-color-icon-primary)"
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
+      />
+    </svg>
+    <div
+      class="EventTileBubble-module_title"
+    >
+      Video conference updated by Alice
+    </div>
+    <div
+      class="EventTileBubble-module_subtitle"
+    >
+      Join the conference from the room information card on the right
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/index.ts b/packages/shared-components/src/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/index.ts
new file mode 100644
index 0000000000..5566a78512
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/MJitsiWidgetEventView/index.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+export {
+    MJitsiWidgetEventView,
+    type MJitsiWidgetEventViewProps,
+    type MJitsiWidgetEventViewSnapshot,
+    type MJitsiWidgetEventViewModel,
+} from "./MJitsiWidgetEventView";
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/MKeyVerificationRequestView.module.css b/packages/shared-components/src/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/MKeyVerificationRequestView.module.css
new file mode 100644
index 0000000000..5c3342207b
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/MKeyVerificationRequestView.module.css
@@ -0,0 +1,12 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+.content {
+    svg {
+        color: var(--cpd-color-icon-primary);
+    }
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/MKeyVerificationRequestView.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/MKeyVerificationRequestView.stories.tsx
new file mode 100644
index 0000000000..8a181b3c6d
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/MKeyVerificationRequestView.stories.tsx
@@ -0,0 +1,60 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useMockedViewModel } from "../../../../../core/viewmodel";
+import { withViewDocs } from "../../../../../../.storybook/withViewDocs";
+import { MKeyVerificationRequestView, type MKeyVerificationRequestViewSnapshot } from "./MKeyVerificationRequestView";
+
+type MKeyVerificationRequestViewProps = MKeyVerificationRequestViewSnapshot & {
+    className?: string;
+};
+
+const MKeyVerificationRequestViewWrapperImpl = ({
+    className,
+    ...snapshot
+}: MKeyVerificationRequestViewProps): JSX.Element => {
+    const vm = useMockedViewModel(snapshot, {});
+
+    return <MKeyVerificationRequestView vm={vm} className={className} />;
+};
+
+const MKeyVerificationRequestViewWrapper = withViewDocs(
+    MKeyVerificationRequestViewWrapperImpl,
+    MKeyVerificationRequestView,
+);
+
+const meta = {
+    title: "Timeline/Timeline Event/MKeyVerificationRequestView",
+    component: MKeyVerificationRequestViewWrapper,
+    tags: ["autodocs"],
+    args: {
+        title: "Alice wants to verify",
+        subtitle: "Alice (@alice:example.org)",
+        className: "",
+    },
+} satisfies Meta<typeof MKeyVerificationRequestViewWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Received: Story = {};
+
+export const SentByMe: Story = {
+    args: {
+        title: "You sent a verification request",
+        subtitle: "Bob (@bob:example.org)",
+    },
+};
+
+export const WithTimestamp: Story = {
+    args: {
+        timestamp: <span>14:56</span>,
+    },
+};
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/MKeyVerificationRequestView.test.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/MKeyVerificationRequestView.test.tsx
new file mode 100644
index 0000000000..c61a00b138
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/MKeyVerificationRequestView.test.tsx
@@ -0,0 +1,65 @@
+/*
+ * Copyright 2026 Element Creations 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 { composeStories } from "@storybook/react-vite";
+import { render, screen } from "@test-utils";
+import React from "react";
+import { describe, expect, it } from "vitest";
+
+import { MockViewModel } from "../../../../../core/viewmodel";
+import { MKeyVerificationRequestView } from "./MKeyVerificationRequestView";
+import * as stories from "./MKeyVerificationRequestView.stories";
+
+const { Received, SentByMe, WithTimestamp } = composeStories(stories);
+
+describe("MKeyVerificationRequestView", () => {
+    it("renders the Received story", () => {
+        const { container } = render(<Received />);
+
+        expect(container).toMatchSnapshot();
+        expect(screen.getByText("Alice wants to verify")).toBeInTheDocument();
+        expect(screen.getByText("Alice (@alice:example.org)")).toBeInTheDocument();
+    });
+
+    it("renders the SentByMe story", () => {
+        const { container } = render(<SentByMe />);
+
+        expect(container).toMatchSnapshot();
+        expect(screen.getByText("You sent a verification request")).toBeInTheDocument();
+        expect(screen.getByText("Bob (@bob:example.org)")).toBeInTheDocument();
+    });
+
+    it("renders a timestamp", () => {
+        const { container } = render(<WithTimestamp />);
+
+        expect(container).toMatchSnapshot();
+        expect(screen.getByText("14:56")).toBeInTheDocument();
+    });
+
+    it("applies a custom className to the root element", () => {
+        const vm = new MockViewModel({
+            title: "Alice wants to verify",
+            subtitle: "Alice (@alice:example.org)",
+        });
+        const { container } = render(<MKeyVerificationRequestView vm={vm} className="custom-verification" />);
+
+        expect(container.firstChild).toHaveClass("custom-verification");
+    });
+
+    it("forwards the provided ref to the root element", () => {
+        const ref = React.createRef<HTMLDivElement>() as React.RefObject<HTMLDivElement>;
+        const vm = new MockViewModel({
+            title: "Alice wants to verify",
+            subtitle: "Alice (@alice:example.org)",
+        });
+
+        render(<MKeyVerificationRequestView vm={vm} ref={ref} />);
+
+        expect(ref.current).toBeInstanceOf(HTMLDivElement);
+        expect(ref.current).toHaveTextContent("Alice wants to verify");
+    });
+});
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/MKeyVerificationRequestView.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/MKeyVerificationRequestView.tsx
new file mode 100644
index 0000000000..6814883e91
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/MKeyVerificationRequestView.tsx
@@ -0,0 +1,69 @@
+/*
+ * Copyright 2026 Element Creations 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 classNames from "classnames";
+import React, { type JSX } from "react";
+import { LockSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import { type ViewModel, useViewModel } from "../../../../../core/viewmodel";
+import { EventTileBubble } from "../EventTileBubble";
+import styles from "./MKeyVerificationRequestView.module.css";
+
+export interface MKeyVerificationRequestViewSnapshot {
+    /**
+     * Main title text for the verification request.
+     */
+    title: string;
+    /**
+     * Label for the other user involved in the request.
+     */
+    subtitle: string;
+    /**
+     * Optional timestamp element rendered in the EventTileBubble footer slot.
+     */
+    timestamp?: JSX.Element;
+}
+
+export type MKeyVerificationRequestViewModel = ViewModel<MKeyVerificationRequestViewSnapshot>;
+
+export interface MKeyVerificationRequestViewProps {
+    /**
+     * ViewModel providing the current verification request snapshot.
+     */
+    vm: MKeyVerificationRequestViewModel;
+    /**
+     * Optional CSS classes passed through to EventTileBubble.
+     */
+    className?: string;
+    /**
+     * Optional Ref forwarded to the root DOM element.
+     */
+    ref?: React.RefObject<HTMLDivElement>;
+}
+
+/**
+ * Renders a timeline bubble describing a key verification request message.
+ */
+export function MKeyVerificationRequestView({
+    vm,
+    className,
+    ref,
+}: Readonly<MKeyVerificationRequestViewProps>): JSX.Element {
+    const { title, subtitle, timestamp } = useViewModel(vm);
+
+    return (
+        <EventTileBubble
+            icon={<LockSolidIcon />}
+            className={classNames(styles.content, className)}
+            title={title}
+            subtitle={subtitle}
+            ref={ref}
+        >
+            {timestamp}
+        </EventTileBubble>
+    );
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/__snapshots__/MKeyVerificationRequestView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/__snapshots__/MKeyVerificationRequestView.test.tsx.snap
new file mode 100644
index 0000000000..2ca016919d
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/__snapshots__/MKeyVerificationRequestView.test.tsx.snap
@@ -0,0 +1,94 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MKeyVerificationRequestView > renders a timestamp 1`] = `
+<div>
+  <div
+    class="EventTileBubble-module_container MKeyVerificationRequestView-module_content"
+  >
+    <svg
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 22q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412A1.93 1.93 0 0 1 6 8h1V6q0-2.075 1.463-3.537Q9.926 1 12 1q2.075 0 3.537 1.463Q17 3.925 17 6v2h1q.824 0 1.413.588Q20 9.175 20 10v10q0 .824-.587 1.413A1.93 1.93 0 0 1 18 22zM9 8h6V6q0-1.25-.875-2.125A2.9 2.9 0 0 0 12 3q-1.25 0-2.125.875A2.9 2.9 0 0 0 9 6z"
+      />
+    </svg>
+    <div
+      class="EventTileBubble-module_title"
+    >
+      Alice wants to verify
+    </div>
+    <div
+      class="EventTileBubble-module_subtitle"
+    >
+      Alice (@alice:example.org)
+    </div>
+    <span>
+      14:56
+    </span>
+  </div>
+</div>
+`;
+
+exports[`MKeyVerificationRequestView > renders the Received story 1`] = `
+<div>
+  <div
+    class="EventTileBubble-module_container MKeyVerificationRequestView-module_content"
+  >
+    <svg
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 22q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412A1.93 1.93 0 0 1 6 8h1V6q0-2.075 1.463-3.537Q9.926 1 12 1q2.075 0 3.537 1.463Q17 3.925 17 6v2h1q.824 0 1.413.588Q20 9.175 20 10v10q0 .824-.587 1.413A1.93 1.93 0 0 1 18 22zM9 8h6V6q0-1.25-.875-2.125A2.9 2.9 0 0 0 12 3q-1.25 0-2.125.875A2.9 2.9 0 0 0 9 6z"
+      />
+    </svg>
+    <div
+      class="EventTileBubble-module_title"
+    >
+      Alice wants to verify
+    </div>
+    <div
+      class="EventTileBubble-module_subtitle"
+    >
+      Alice (@alice:example.org)
+    </div>
+  </div>
+</div>
+`;
+
+exports[`MKeyVerificationRequestView > renders the SentByMe story 1`] = `
+<div>
+  <div
+    class="EventTileBubble-module_container MKeyVerificationRequestView-module_content"
+  >
+    <svg
+      fill="currentColor"
+      height="1em"
+      viewBox="0 0 24 24"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 22q-.824 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412A1.93 1.93 0 0 1 6 8h1V6q0-2.075 1.463-3.537Q9.926 1 12 1q2.075 0 3.537 1.463Q17 3.925 17 6v2h1q.824 0 1.413.588Q20 9.175 20 10v10q0 .824-.587 1.413A1.93 1.93 0 0 1 18 22zM9 8h6V6q0-1.25-.875-2.125A2.9 2.9 0 0 0 12 3q-1.25 0-2.125.875A2.9 2.9 0 0 0 9 6z"
+      />
+    </svg>
+    <div
+      class="EventTileBubble-module_title"
+    >
+      You sent a verification request
+    </div>
+    <div
+      class="EventTileBubble-module_subtitle"
+    >
+      Bob (@bob:example.org)
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/index.ts b/packages/shared-components/src/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/index.ts
new file mode 100644
index 0000000000..641da39c23
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/MKeyVerificationRequestView/index.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+export {
+    MKeyVerificationRequestView,
+    type MKeyVerificationRequestViewProps,
+    type MKeyVerificationRequestViewSnapshot,
+    type MKeyVerificationRequestViewModel,
+} from "./MKeyVerificationRequestView";
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/PinnedMessageBadge/index.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/PinnedMessageBadge/index.ts
similarity index 100%
rename from packages/shared-components/src/room/timeline/event-tile/EventTileView/PinnedMessageBadge/index.tsx
rename to packages/shared-components/src/room/timeline/event-tile/EventTileView/PinnedMessageBadge/index.ts
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/RoomAvatarEventView/RoomAvatarEventView.module.css b/packages/shared-components/src/room/timeline/event-tile/EventTileView/RoomAvatarEventView/RoomAvatarEventView.module.css
new file mode 100644
index 0000000000..24fcda18d0
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/RoomAvatarEventView/RoomAvatarEventView.module.css
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+.textualEvent {
+    font-size: var(--cpd-font-size-body-sm);
+    line-height: normal;
+    overflow-y: hidden;
+    color: var(--cpd-color-text-secondary);
+}
+
+.textualEvent[data-event-layout="irc"] {
+    padding: 1px 0;
+    display: inline-block;
+    line-height: 1.125rem;
+}
+
+.avatarButton {
+    display: inline;
+    position: relative;
+    top: 3px;
+    margin-inline-start: 0.25em;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    cursor: pointer;
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/RoomAvatarEventView/RoomAvatarEventView.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/RoomAvatarEventView/RoomAvatarEventView.stories.tsx
new file mode 100644
index 0000000000..121ce86b0f
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/RoomAvatarEventView/RoomAvatarEventView.stories.tsx
@@ -0,0 +1,79 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+import { fn } from "storybook/test";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useMockedViewModel } from "../../../../../core/viewmodel";
+import { withViewDocs } from "../../../../../../.storybook/withViewDocs";
+import {
+    RoomAvatarEventView,
+    type RoomAvatarEventViewActions,
+    type RoomAvatarEventViewSnapshot,
+} from "./RoomAvatarEventView";
+
+type RoomAvatarEventViewStoryProps = RoomAvatarEventViewSnapshot &
+    RoomAvatarEventViewActions & {
+        className?: string;
+    };
+
+const RoomAvatarEventViewWrapperImpl = ({
+    onAvatarClick,
+    className,
+    ...snapshot
+}: RoomAvatarEventViewStoryProps): JSX.Element => {
+    const vm = useMockedViewModel(snapshot, { onAvatarClick });
+
+    return (
+        <RoomAvatarEventView
+            vm={vm}
+            className={className}
+            renderAvatar={() => (
+                <span
+                    aria-hidden="true"
+                    style={{
+                        display: "inline-block",
+                        width: 14,
+                        height: 14,
+                        borderRadius: "50%",
+                        background: "#0dbd8b",
+                    }}
+                />
+            )}
+        />
+    );
+};
+
+const RoomAvatarEventViewWrapper = withViewDocs(RoomAvatarEventViewWrapperImpl, RoomAvatarEventView);
+
+const meta = {
+    title: "Timeline/Timeline Event/RoomAvatarEventView",
+    component: RoomAvatarEventViewWrapper,
+    tags: ["autodocs"],
+    args: {
+        senderDisplayName: "Alice",
+        roomName: "General",
+        avatarUrl: "mxc://example.org/avatar",
+        lightboxLabel: "Alice changed the avatar for General",
+        isRemoved: false,
+        onAvatarClick: fn(),
+        className: "",
+    },
+} satisfies Meta<typeof RoomAvatarEventViewWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Changed: Story = {};
+
+export const Removed: Story = {
+    args: {
+        avatarUrl: undefined,
+        isRemoved: true,
+    },
+};
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/RoomAvatarEventView/RoomAvatarEventView.test.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/RoomAvatarEventView/RoomAvatarEventView.test.tsx
new file mode 100644
index 0000000000..cf6ed28741
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/RoomAvatarEventView/RoomAvatarEventView.test.tsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright 2026 Element Creations 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 { composeStories } from "@storybook/react-vite";
+import { render } from "@test-utils";
+import React from "react";
+import { describe, expect, it } from "vitest";
+
+import * as stories from "./RoomAvatarEventView.stories.tsx";
+
+const { Changed, Removed } = composeStories(stories);
+
+describe("RoomAvatarEventView", () => {
+    it("renders a changed room avatar event", () => {
+        const { container } = render(<Changed />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders a removed room avatar event", () => {
+        const { container } = render(<Removed />);
+        expect(container).toMatchSnapshot();
+    });
+});
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/RoomAvatarEventView/RoomAvatarEventView.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/RoomAvatarEventView/RoomAvatarEventView.tsx
new file mode 100644
index 0000000000..4fc54cc80c
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/RoomAvatarEventView/RoomAvatarEventView.tsx
@@ -0,0 +1,109 @@
+/*
+ * Copyright 2026 Element Creations 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 classNames from "classnames";
+import React, { type JSX, type ReactNode, type Ref } from "react";
+
+import { useI18n } from "../../../../../core/i18n/i18nContext";
+import { type ViewModel, useViewModel } from "../../../../../core/viewmodel";
+import { useEventPresentationAttributes } from "../../../EventPresentation/EventPresentationContext";
+import styles from "./RoomAvatarEventView.module.css";
+
+export interface RoomAvatarEventViewSnapshot {
+    /**
+     * Display name for the event sender.
+     */
+    senderDisplayName: string;
+    /**
+     * Room name at the time the avatar event is rendered.
+     */
+    roomName: string;
+    /**
+     * MXC URL from the avatar event content.
+     */
+    avatarUrl?: string;
+    /**
+     * Accessible label for opening the avatar preview.
+     */
+    lightboxLabel: string;
+    /**
+     * Whether this event removed the room avatar.
+     */
+    isRemoved: boolean;
+}
+
+export interface RoomAvatarEventViewActions {
+    /**
+     * Invoked when the user opens the avatar image.
+     */
+    onAvatarClick(this: void): void;
+}
+
+export type RoomAvatarEventViewModel = ViewModel<RoomAvatarEventViewSnapshot, RoomAvatarEventViewActions>;
+
+export interface RoomAvatarEventViewProps {
+    /**
+     * ViewModel providing room avatar event state and actions.
+     */
+    vm: RoomAvatarEventViewModel;
+    /**
+     * Renders the avatar thumbnail using the host application's avatar implementation.
+     */
+    renderAvatar(snapshot: RoomAvatarEventViewSnapshot): ReactNode;
+    /**
+     * Optional CSS class names applied to the root element.
+     */
+    className?: string;
+    /**
+     * Optional ref forwarded to the root element.
+     */
+    ref?: Ref<HTMLElement>;
+}
+
+/**
+ * Renders a room avatar state event.
+ */
+export function RoomAvatarEventView({
+    vm,
+    renderAvatar,
+    className,
+    ref,
+}: Readonly<RoomAvatarEventViewProps>): JSX.Element {
+    const snapshot = useViewModel(vm);
+    const _t = useI18n().translate;
+    const eventPresentationAttributes = useEventPresentationAttributes();
+    const classes = classNames(styles.textualEvent, className);
+
+    if (snapshot.isRemoved) {
+        return (
+            <div className={classes} ref={ref as Ref<HTMLDivElement>} {...eventPresentationAttributes}>
+                {_t("timeline|m.room.avatar|removed", { senderDisplayName: snapshot.senderDisplayName })}
+            </div>
+        );
+    }
+
+    return (
+        <span className={classes} ref={ref} {...eventPresentationAttributes}>
+            {_t(
+                "timeline|m.room.avatar|changed_img",
+                { senderDisplayName: snapshot.senderDisplayName },
+                {
+                    img: () => (
+                        <button
+                            type="button"
+                            className={styles.avatarButton}
+                            onClick={vm.onAvatarClick}
+                            aria-label={snapshot.lightboxLabel}
+                        >
+                            {renderAvatar(snapshot)}
+                        </button>
+                    ),
+                },
+            )}
+        </span>
+    );
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/RoomAvatarEventView/__snapshots__/RoomAvatarEventView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/EventTileView/RoomAvatarEventView/__snapshots__/RoomAvatarEventView.test.tsx.snap
new file mode 100644
index 0000000000..82fc07b6ba
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/RoomAvatarEventView/__snapshots__/RoomAvatarEventView.test.tsx.snap
@@ -0,0 +1,37 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`RoomAvatarEventView > renders a changed room avatar event 1`] = `
+<div>
+  <span
+    class="RoomAvatarEventView-module_textualEvent"
+    data-event-density="default"
+    data-event-layout="group"
+  >
+    <span>
+      Alice changed the room avatar to
+      <button
+        aria-label="Alice changed the avatar for General"
+        class="RoomAvatarEventView-module_avatarButton"
+        type="button"
+      >
+        <span
+          aria-hidden="true"
+          style="display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: rgb(13, 189, 139);"
+        />
+      </button>
+    </span>
+  </span>
+</div>
+`;
+
+exports[`RoomAvatarEventView > renders a removed room avatar event 1`] = `
+<div>
+  <div
+    class="RoomAvatarEventView-module_textualEvent"
+    data-event-density="default"
+    data-event-layout="group"
+  >
+    Alice removed the room avatar.
+  </div>
+</div>
+`;
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/RoomAvatarEventView/index.ts b/packages/shared-components/src/room/timeline/event-tile/EventTileView/RoomAvatarEventView/index.ts
new file mode 100644
index 0000000000..d2d6eb2aae
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/RoomAvatarEventView/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+export * from "./RoomAvatarEventView";
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.module.css b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.module.css
new file mode 100644
index 0000000000..8e74f81589
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.module.css
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+.textualEvent {
+    font-size: var(--cpd-font-size-body-sm);
+    line-height: normal;
+
+    overflow-y: hidden;
+    color: var(--cpd-color-text-secondary);
+
+    a {
+        cursor: pointer;
+        color: var(--cpd-color-text-action-accent);
+    }
+}
+
+.textualEvent[data-event-layout="irc"] {
+    padding: 1px 0; /* add a 1px padding top and bottom because our larger emoji font otherwise gets cropped by anti-zalgo */
+    display: inline-block;
+    line-height: 1.125rem; /* $font-18px equivalent of the legacy --irc-line-height */
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.stories.tsx
index bd6e76fef4..62a83b8819 100644
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.stories.tsx
@@ -6,6 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type Meta, type StoryObj } from "@storybook/react-vite";
+import React from "react";
 
 import { TextualEventView as TextualEventComponent } from "./TextualEventView";
 import { MockViewModel } from "../../../../../core/viewmodel/MockViewModel";
@@ -23,3 +24,16 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
+
+export const WithLink: Story = {
+    args: {
+        vm: new MockViewModel({
+            content: (
+                <>
+                    <span>Dummy [🤒] textual event text </span>
+                    <a href="~">with link</a>
+                </>
+            ),
+        }),
+    },
+};
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.test.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.test.tsx
index 3a508df56b..6d7f5ce755 100644
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.test.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.test.tsx
@@ -12,11 +12,16 @@ import { describe, it, expect } from "vitest";
 
 import * as stories from "./TextualEventView.stories.tsx";
 
-const { Default } = composeStories(stories);
+const { Default, WithLink } = composeStories(stories);
 
 describe("TextualEventView", () => {
     it("renders a textual event", () => {
         const { container } = render(<Default />);
         expect(container).toMatchSnapshot();
     });
+
+    it("renders a textual event with link", () => {
+        const { container } = render(<WithLink />);
+        expect(container).toMatchSnapshot();
+    });
 });
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.tsx
index f22c0e5edd..b9e9d1e5c9 100644
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/TextualEventView.tsx
@@ -6,15 +6,22 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type ReactNode, type JSX } from "react";
+import classNames from "classnames";
 
 import { type ViewModel, useViewModel } from "../../../../../core/viewmodel";
+import styles from "./TextualEventView.module.css";
+import { useEventPresentationAttributes } from "../../../EventPresentation/EventPresentationContext";
 
 export type TextualEventViewSnapshot = {
     content: string | ReactNode;
 };
 
 export interface Props {
+    /** The view model for the tile error fallback. */
     vm: ViewModel<TextualEventViewSnapshot>;
+
+    /** Optional host-level class names. */
+    className?: string;
 }
 
 /**
@@ -23,7 +30,12 @@ export interface Props {
  * This view is used for simple informational timeline entries where the
  * content is already prepared by the view model.
  */
-export function TextualEventView({ vm }: Props): JSX.Element {
+export function TextualEventView({ vm, className }: Readonly<Props>): JSX.Element {
+    const eventPresentationAttributes = useEventPresentationAttributes();
     const snapshot = useViewModel(vm);
-    return <div className="mx_TextualEvent">{snapshot.content}</div>;
+    return (
+        <div className={classNames(styles.textualEvent, className)} {...eventPresentationAttributes}>
+            {snapshot.content}
+        </div>
+    );
 }
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/__snapshots__/TextualEventView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/__snapshots__/TextualEventView.test.tsx.snap
index 7f0a0ff90c..79ae9ad3ec 100644
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/__snapshots__/TextualEventView.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TextualEventView/__snapshots__/TextualEventView.test.tsx.snap
@@ -3,9 +3,30 @@
 exports[`TextualEventView > renders a textual event 1`] = `
 <div>
   <div
-    class="mx_TextualEvent"
+    class="TextualEventView-module_textualEvent"
+    data-event-density="default"
+    data-event-layout="group"
   >
     Dummy textual event text
   </div>
 </div>
 `;
+
+exports[`TextualEventView > renders a textual event with link 1`] = `
+<div>
+  <div
+    class="TextualEventView-module_textualEvent"
+    data-event-density="default"
+    data-event-layout="group"
+  >
+    <span>
+      Dummy [🤒] textual event text 
+    </span>
+    <a
+      href="~"
+    >
+      with link
+    </a>
+  </div>
+</div>
+`;
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummary.module.css b/packages/shared-components/src/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummary.module.css
new file mode 100644
index 0000000000..f04a3167b8
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummary.module.css
@@ -0,0 +1,121 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+.threadSummary,
+.content {
+    color: var(--cpd-color-text-secondary);
+}
+
+.threadSummary {
+    margin-top: var(--cpd-space-2x);
+    min-width: 267px;
+    max-width: min(calc(100% - var(--EventTile_group_line-spacing-inline-start, 0px)), 600px);
+    width: fit-content;
+    height: 40px;
+    position: relative;
+    background-color: var(--cpd-color-bg-subtle-secondary);
+    padding-inline: var(--cpd-space-3x) var(--cpd-space-4x);
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    border-radius: 8px;
+    box-sizing: border-box;
+    clear: both;
+    overflow: hidden;
+    border: 1px solid var(--cpd-color-bg-subtle-secondary);
+    font: var(--cpd-font-body-sm-regular);
+    appearance: none;
+    cursor: pointer;
+    text-align: start;
+}
+
+.threadSummary:hover,
+.threadSummary:focus {
+    border-color: var(--cpd-color-border-interactive-secondary);
+}
+
+.threadSummary:hover .chevron,
+.threadSummary:focus .chevron {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+.sender,
+.content {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.content {
+    font: var(--cpd-font-body-sm-regular);
+}
+
+.sender {
+    font-weight: var(--cpd-font-weight-semibold);
+}
+
+.content strong {
+    font: var(--cpd-font-body-sm-semibold);
+}
+
+.threadSummary .repliesAmount,
+.threadSummary .sender,
+.threadSummary .content {
+    line-height: var(--EventTile_ThreadSummary-line-height, 24px);
+}
+
+.threadSummary .content {
+    margin-left: var(--cpd-space-1x);
+    flex: 1;
+}
+
+.repliesAmount {
+    color: var(--cpd-color-text-secondary);
+    font-weight: var(--cpd-font-weight-semibold);
+    white-space: nowrap;
+    position: relative;
+    padding: 0 var(--cpd-space-3x) 0 var(--cpd-space-2x);
+}
+
+.avatar {
+    margin-inline-end: var(--cpd-space-2x);
+    flex-shrink: 0;
+}
+
+.threadIcon {
+    flex-shrink: 0;
+}
+
+.chevron {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 60px;
+    box-sizing: border-box;
+    background: linear-gradient(270deg, var(--cpd-color-bg-canvas-default) 50%, transparent 100%);
+    opacity: 0;
+    transform: translateX(60px);
+    transition: all 0.1s ease-in-out;
+}
+
+.chevron svg {
+    position: absolute;
+    top: 50%;
+    right: var(--cpd-space-1x);
+    transform: translateY(-50%);
+    width: 24px;
+    height: 24px;
+    color: var(--cpd-color-text-secondary);
+}
+
+.narrow {
+    min-width: initial;
+    max-width: 100%;
+    width: initial;
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummary.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummary.stories.tsx
new file mode 100644
index 0000000000..511b506172
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummary.stories.tsx
@@ -0,0 +1,106 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+import { fn } from "storybook/test";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useMockedViewModel } from "../../../../../core/viewmodel";
+import { withViewDocs } from "../../../../../../.storybook/withViewDocs";
+import {
+    ThreadSummaryView,
+    type ThreadMessagePreviewViewSnapshot,
+    type ThreadSummaryViewActions,
+    type ThreadSummaryViewSnapshot,
+} from "./ThreadSummaryView";
+
+type WrapperProps = Omit<ThreadSummaryViewSnapshot, "previewVm"> &
+    Partial<ThreadSummaryViewActions> & {
+        preview: ThreadMessagePreviewViewSnapshot;
+    };
+
+const ThreadSummaryViewWrapperImpl = ({ onClick, preview, ...snapshotProps }: Readonly<WrapperProps>): JSX.Element => {
+    const previewVm = useMockedViewModel(preview, {});
+    const vm = useMockedViewModel(
+        {
+            ...snapshotProps,
+            previewVm,
+        },
+        {
+            onClick: onClick ?? fn(),
+        },
+    );
+
+    return <ThreadSummaryView vm={vm} />;
+};
+
+const ThreadSummaryViewWrapper = withViewDocs(ThreadSummaryViewWrapperImpl, ThreadSummaryView);
+
+const defaultPreview: ThreadMessagePreviewViewSnapshot = {
+    isVisible: true,
+    avatar: {
+        id: "@alice:example.org",
+        name: "Alice",
+        label: "User avatar",
+    },
+    showDisplayName: true,
+    senderName: "Alice",
+    previewContent: "Can you review the draft?",
+    previewTooltip: "Can you review the draft?",
+};
+
+const meta = {
+    title: "Timeline/Timeline Event/ThreadSummary",
+    component: ThreadSummaryViewWrapper,
+    tags: ["autodocs"],
+    args: {
+        isVisible: true,
+        replyCountLabel: "3 replies",
+        openThreadLabel: "Open thread",
+        notificationIndicator: undefined,
+        narrow: false,
+        preview: defaultPreview,
+    },
+} satisfies Meta<typeof ThreadSummaryViewWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Narrow: Story = {
+    args: {
+        replyCountLabel: "3",
+        narrow: true,
+        preview: {
+            ...defaultPreview,
+            showDisplayName: false,
+        },
+    },
+};
+
+export const WithNotification: Story = {
+    args: {
+        notificationIndicator: "critical",
+    },
+};
+
+export const DecryptionFailure: Story = {
+    args: {
+        preview: {
+            ...defaultPreview,
+            previewContent: "Unable to decrypt message",
+            previewTooltip: "Unable to decrypt message",
+        },
+    },
+};
+
+export const Hidden: Story = {
+    args: {
+        isVisible: false,
+    },
+};
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummary.test.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummary.test.tsx
new file mode 100644
index 0000000000..6d4e742f8f
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummary.test.tsx
@@ -0,0 +1,80 @@
+/*
+ * Copyright 2026 Element Creations 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 { composeStories } from "@storybook/react-vite";
+import { render, screen } from "@test-utils";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { MockViewModel } from "../../../../../core/viewmodel";
+import {
+    ThreadSummaryView,
+    type ThreadMessagePreviewViewSnapshot,
+    type ThreadSummaryViewActions,
+    type ThreadSummaryViewModel,
+    type ThreadSummaryViewSnapshot,
+} from "./ThreadSummaryView";
+import * as stories from "./ThreadSummary.stories";
+
+const { Default, Narrow, WithNotification, DecryptionFailure, Hidden } = composeStories(stories);
+
+describe("ThreadSummaryView", () => {
+    it("renders the default thread summary", () => {
+        const { container } = render(<Default />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders the narrow thread summary", () => {
+        const { container } = render(<Narrow />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders a notification indicator", () => {
+        const { container } = render(<WithNotification />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders a decryption failure preview", () => {
+        const { container } = render(<DecryptionFailure />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("does not render when hidden", () => {
+        render(<Hidden />);
+        expect(screen.queryByRole("button", { name: "Open thread" })).not.toBeInTheDocument();
+    });
+
+    it("invokes the click action", async () => {
+        const user = userEvent.setup();
+        const onClick = vi.fn();
+        const previewVm = new MockViewModel<ThreadMessagePreviewViewSnapshot>({
+            isVisible: true,
+            showDisplayName: false,
+            previewContent: "Latest reply",
+        });
+        const vm = new (class extends MockViewModel<ThreadSummaryViewSnapshot> implements ThreadSummaryViewActions {
+            public constructor() {
+                super({
+                    isVisible: true,
+                    replyCountLabel: "1 reply",
+                    openThreadLabel: "Open thread",
+                    narrow: false,
+                    previewVm,
+                });
+            }
+
+            public onClick = onClick;
+        })() as ThreadSummaryViewModel;
+
+        render(<ThreadSummaryView vm={vm} />);
+
+        await user.click(screen.getByRole("button", { name: "Open thread" }));
+
+        expect(onClick).toHaveBeenCalledTimes(1);
+    });
+});
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummaryView.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummaryView.tsx
new file mode 100644
index 0000000000..d4fe7bf2fe
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/ThreadSummary/ThreadSummaryView.tsx
@@ -0,0 +1,184 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ * Copyright 2024 New Vector Ltd.
+ * Copyright 2022 The Matrix.org Foundation C.I.C.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type ComponentPropsWithoutRef, type JSX, type MouseEventHandler, type ReactNode } from "react";
+import { Avatar, IndicatorIcon, Tooltip } from "@vector-im/compound-web";
+import { ChevronRightIcon, ThreadsSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import { type ViewModel, useViewModel } from "../../../../../core/viewmodel";
+import styles from "./ThreadSummary.module.css";
+
+export type ThreadSummaryNotificationIndicator = ComponentPropsWithoutRef<typeof IndicatorIcon>["indicator"];
+
+export interface ThreadMessagePreviewAvatar {
+    /**
+     * Optional class name supplied by the app for integration styling.
+     */
+    className?: string;
+    /**
+     * Stable id used for avatar colour hashing.
+     */
+    id: string;
+    /**
+     * Name used by the avatar fallback.
+     */
+    name: string;
+    /**
+     * Optional avatar image URL.
+     */
+    src?: string;
+    /**
+     * Accessible label for the avatar.
+     */
+    label: string;
+    /**
+     * Optional tooltip/title text for the avatar image.
+     */
+    title?: string;
+}
+
+export interface ThreadMessagePreviewViewSnapshot {
+    /**
+     * Controls whether the preview should render.
+     */
+    isVisible: boolean;
+    /**
+     * Sender avatar data.
+     */
+    avatar?: ThreadMessagePreviewAvatar;
+    /**
+     * Whether to render the sender display name.
+     */
+    showDisplayName: boolean;
+    /**
+     * Sender display name.
+     */
+    senderName?: string;
+    /**
+     * Rendered preview content.
+     */
+    previewContent?: ReactNode;
+    /**
+     * Optional styled tooltip text for the preview content.
+     */
+    previewTooltip?: string;
+}
+
+export type ThreadMessagePreviewViewModel = ViewModel<ThreadMessagePreviewViewSnapshot>;
+
+export interface ThreadSummaryViewSnapshot {
+    /**
+     * Controls whether the summary should render.
+     */
+    isVisible: boolean;
+    /**
+     * Text for the reply count section.
+     */
+    replyCountLabel: string;
+    /**
+     * Accessible label for opening the thread.
+     */
+    openThreadLabel: string;
+    /**
+     * Notification indicator shown on the thread icon.
+     */
+    notificationIndicator?: ThreadSummaryNotificationIndicator;
+    /**
+     * Whether the summary is being rendered in the narrow timeline layout.
+     */
+    narrow: boolean;
+    /**
+     * View model for the last-message preview.
+     */
+    previewVm: ThreadMessagePreviewViewModel;
+}
+
+export interface ThreadSummaryViewActions {
+    /**
+     * Invoked when the user opens the thread.
+     */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+
+export type ThreadSummaryViewModel = ViewModel<ThreadSummaryViewSnapshot, ThreadSummaryViewActions>;
+
+type ThreadSummaryViewProps = Omit<ComponentPropsWithoutRef<"button">, "aria-label" | "onClick"> & {
+    /**
+     * The view model for the thread summary.
+     */
+    vm: ThreadSummaryViewModel;
+};
+
+interface ThreadMessagePreviewViewProps {
+    /**
+     * The view model for the thread message preview.
+     */
+    vm: ThreadMessagePreviewViewModel;
+}
+
+export function ThreadMessagePreviewView({ vm }: Readonly<ThreadMessagePreviewViewProps>): JSX.Element {
+    const { isVisible, avatar, showDisplayName, senderName, previewContent, previewTooltip } = useViewModel(vm);
+
+    if (!isVisible || !previewContent) {
+        return <></>;
+    }
+
+    const content = <span className={styles.content}>{previewContent}</span>;
+    const avatarClassName = avatar?.className ? `${styles.avatar} ${avatar.className}` : styles.avatar;
+
+    return (
+        <>
+            {avatar && (
+                <Avatar
+                    id={avatar.id}
+                    name={avatar.name}
+                    src={avatar.src}
+                    title={avatar.title}
+                    aria-label={avatar.label}
+                    type="round"
+                    size="24px"
+                    className={avatarClassName}
+                />
+            )}
+            {showDisplayName && senderName && <div className={styles.sender}>{senderName}</div>}
+            {previewTooltip ? <Tooltip description={previewTooltip}>{content}</Tooltip> : content}
+        </>
+    );
+}
+
+export function ThreadSummaryView({
+    vm,
+    className,
+    type = "button",
+    ...props
+}: Readonly<ThreadSummaryViewProps>): JSX.Element {
+    const { isVisible, replyCountLabel, openThreadLabel, notificationIndicator, narrow, previewVm } = useViewModel(vm);
+
+    if (!isVisible) {
+        return <></>;
+    }
+
+    const buttonClassName = [styles.threadSummary, className, narrow ? styles.narrow : undefined]
+        .filter(Boolean)
+        .join(" ");
+
+    return (
+        // oxlint-disable-next-line react/button-has-type
+        <button {...props} type={type} className={buttonClassName} onClick={vm.onClick} aria-label={openThreadLabel}>
+            <IndicatorIcon size="24px" indicator={notificationIndicator} className={styles.threadIcon}>
+                <ThreadsSolidIcon />
+            </IndicatorIcon>
+            <span className={styles.repliesAmount}>{replyCountLabel}</span>
+            <ThreadMessagePreviewView vm={previewVm} />
+            <div className={styles.chevron}>
+                <ChevronRightIcon />
+            </div>
+        </button>
+    );
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/ThreadSummary/__snapshots__/ThreadSummary.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/EventTileView/ThreadSummary/__snapshots__/ThreadSummary.test.tsx.snap
new file mode 100644
index 0000000000..4cc93e529e
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/ThreadSummary/__snapshots__/ThreadSummary.test.tsx.snap
@@ -0,0 +1,265 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ThreadSummaryView > renders a decryption failure preview 1`] = `
+<div>
+  <button
+    aria-label="Open thread"
+    class="ThreadSummary-module_threadSummary"
+    type="button"
+  >
+    <div
+      class="_indicator-icon_147l5_17 ThreadSummary-module_threadIcon"
+      style="--cpd-icon-button-size: 24px;"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
+        />
+      </svg>
+    </div>
+    <span
+      class="ThreadSummary-module_repliesAmount"
+    >
+      3 replies
+    </span>
+    <span
+      aria-label="User avatar"
+      class="_avatar_va14e_8 ThreadSummary-module_avatar _avatar-imageless_va14e_55"
+      data-color="3"
+      data-type="round"
+      role="img"
+      style="--cpd-avatar-size: 24px;"
+    >
+      A
+    </span>
+    <div
+      class="ThreadSummary-module_sender"
+    >
+      Alice
+    </div>
+    <span
+      class="ThreadSummary-module_content"
+    >
+      Unable to decrypt message
+    </span>
+    <div
+      class="ThreadSummary-module_chevron"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+        />
+      </svg>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`ThreadSummaryView > renders a notification indicator 1`] = `
+<div>
+  <button
+    aria-label="Open thread"
+    class="ThreadSummary-module_threadSummary"
+    type="button"
+  >
+    <div
+      class="_indicator-icon_147l5_17 ThreadSummary-module_threadIcon"
+      data-indicator="critical"
+      style="--cpd-icon-button-size: 24px;"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
+        />
+      </svg>
+    </div>
+    <span
+      class="ThreadSummary-module_repliesAmount"
+    >
+      3 replies
+    </span>
+    <span
+      aria-label="User avatar"
+      class="_avatar_va14e_8 ThreadSummary-module_avatar _avatar-imageless_va14e_55"
+      data-color="3"
+      data-type="round"
+      role="img"
+      style="--cpd-avatar-size: 24px;"
+    >
+      A
+    </span>
+    <div
+      class="ThreadSummary-module_sender"
+    >
+      Alice
+    </div>
+    <span
+      class="ThreadSummary-module_content"
+    >
+      Can you review the draft?
+    </span>
+    <div
+      class="ThreadSummary-module_chevron"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+        />
+      </svg>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`ThreadSummaryView > renders the default thread summary 1`] = `
+<div>
+  <button
+    aria-label="Open thread"
+    class="ThreadSummary-module_threadSummary"
+    type="button"
+  >
+    <div
+      class="_indicator-icon_147l5_17 ThreadSummary-module_threadIcon"
+      style="--cpd-icon-button-size: 24px;"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
+        />
+      </svg>
+    </div>
+    <span
+      class="ThreadSummary-module_repliesAmount"
+    >
+      3 replies
+    </span>
+    <span
+      aria-label="User avatar"
+      class="_avatar_va14e_8 ThreadSummary-module_avatar _avatar-imageless_va14e_55"
+      data-color="3"
+      data-type="round"
+      role="img"
+      style="--cpd-avatar-size: 24px;"
+    >
+      A
+    </span>
+    <div
+      class="ThreadSummary-module_sender"
+    >
+      Alice
+    </div>
+    <span
+      class="ThreadSummary-module_content"
+    >
+      Can you review the draft?
+    </span>
+    <div
+      class="ThreadSummary-module_chevron"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+        />
+      </svg>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`ThreadSummaryView > renders the narrow thread summary 1`] = `
+<div>
+  <button
+    aria-label="Open thread"
+    class="ThreadSummary-module_threadSummary ThreadSummary-module_narrow"
+    type="button"
+  >
+    <div
+      class="_indicator-icon_147l5_17 ThreadSummary-module_threadIcon"
+      style="--cpd-icon-button-size: 24px;"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
+        />
+      </svg>
+    </div>
+    <span
+      class="ThreadSummary-module_repliesAmount"
+    >
+      3
+    </span>
+    <span
+      aria-label="User avatar"
+      class="_avatar_va14e_8 ThreadSummary-module_avatar _avatar-imageless_va14e_55"
+      data-color="3"
+      data-type="round"
+      role="img"
+      style="--cpd-avatar-size: 24px;"
+    >
+      A
+    </span>
+    <span
+      class="ThreadSummary-module_content"
+    >
+      Can you review the draft?
+    </span>
+    <div
+      class="ThreadSummary-module_chevron"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+        />
+      </svg>
+    </div>
+  </button>
+</div>
+`;
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/ThreadSummary/index.ts b/packages/shared-components/src/room/timeline/event-tile/EventTileView/ThreadSummary/index.ts
new file mode 100644
index 0000000000..914bd0a222
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/ThreadSummary/index.ts
@@ -0,0 +1,18 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+export {
+    ThreadMessagePreviewView,
+    ThreadSummaryView,
+    type ThreadMessagePreviewAvatar,
+    type ThreadMessagePreviewViewModel,
+    type ThreadMessagePreviewViewSnapshot,
+    type ThreadSummaryNotificationIndicator,
+    type ThreadSummaryViewActions,
+    type ThreadSummaryViewModel,
+    type ThreadSummaryViewSnapshot,
+} from "./ThreadSummaryView";
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.module.css b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.module.css
index 3a18833f7c..7e0226ed4b 100644
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.module.css
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.module.css
@@ -1,38 +1,42 @@
 .tileErrorView {
-    color: var(--cpd-color-text-critical-primary);
+    font-size: var(--cpd-font-size-body-sm);
+
+    color: var(--cpd-color-text-secondary);
     list-style: none;
     text-align: center;
+
+    .line {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+        gap: var(--cpd-space-2x);
+    }
+
+    .message {
+        padding: var(--cpd-space-1x) var(--cpd-space-4x);
+    }
+
+    .viewSourceButton {
+        appearance: none;
+        padding: 0;
+        border: 0;
+        background: none;
+        color: var(--cpd-color-text-action-primary);
+        cursor: pointer;
+        font: inherit;
+        text-decoration: underline;
+    }
+
+    .viewSourceButton:focus-visible {
+        outline: 2px solid var(--cpd-color-border-focused);
+        outline-offset: 2px;
+        border-radius: var(--cpd-space-1x);
+    }
 }
 
-.line {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    gap: var(--cpd-space-2x);
-}
-
-.bubble .line {
-    flex-direction: column;
-}
-
-.message {
-    padding: var(--cpd-space-1x) var(--cpd-space-4x);
-}
-
-.viewSourceButton {
-    appearance: none;
-    padding: 0;
-    border: 0;
-    background: none;
-    color: var(--cpd-color-text-action-primary);
-    cursor: pointer;
-    font: inherit;
-    text-decoration: underline;
-}
-
-.viewSourceButton:focus-visible {
-    outline: 2px solid var(--cpd-color-border-focused);
-    outline-offset: 2px;
-    border-radius: var(--cpd-space-1x);
+.tileErrorView[data-event-layout="bubble"] {
+    .line {
+        flex-direction: column;
+    }
 }
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx
index e7999477c4..db60b2ed4f 100644
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.stories.tsx
@@ -11,7 +11,6 @@ import { fn } from "storybook/test";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { withViewDocs } from "../../../../../../.storybook/withViewDocs";
 import { useMockedViewModel } from "../../../../../core/viewmodel";
-import { EventPresentationProvider } from "../../../EventPresentation";
 import { TileErrorView, type TileErrorViewActions, type TileErrorViewSnapshot } from "./TileErrorView";
 
 type WrapperProps = TileErrorViewSnapshot &
@@ -59,13 +58,9 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {};
 
 export const BubbleLayout: Story = {
-    decorators: [
-        (Story): JSX.Element => (
-            <EventPresentationProvider value={{ layout: "bubble", density: "default" }}>
-                <Story />
-            </EventPresentationProvider>
-        ),
-    ],
+    globals: {
+        eventLayout: "bubble",
+    },
 };
 
 export const WithoutActions: Story = {
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.test.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.test.tsx
index 9d21d641f1..58c6526690 100644
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.test.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.test.tsx
@@ -29,7 +29,9 @@ describe("TileErrorView", () => {
     });
 
     it("renders the bubble layout variant", () => {
-        const { container } = render(<BubbleLayout />);
+        const { container } = render(<BubbleLayout />, {
+            presentation: { layout: "bubble" },
+        });
         expect(container).toMatchSnapshot();
     });
 
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.tsx
index 6c3b019af9..873669e415 100644
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/TileErrorView.tsx
@@ -10,8 +10,8 @@ import classNames from "classnames";
 import { Button } from "@vector-im/compound-web";
 
 import { type ViewModel, useViewModel } from "../../../../../core/viewmodel";
-import { useEventPresentation } from "../../../EventPresentation";
 import styles from "./TileErrorView.module.css";
+import { useEventPresentationAttributes } from "../../../EventPresentation/EventPresentationContext";
 
 /** Snapshot data for rendering an event tile error fallback. */
 export interface TileErrorViewSnapshot {
@@ -55,14 +55,11 @@ interface TileErrorViewProps {
  * actions when their labels are provided.
  */
 export function TileErrorView({ vm, className }: Readonly<TileErrorViewProps>): JSX.Element {
-    const { layout } = useEventPresentation();
+    const eventPresentationAttributes = useEventPresentationAttributes();
     const { message, eventType, bugReportCtaLabel, viewSourceCtaLabel } = useViewModel(vm);
 
     return (
-        <li
-            className={classNames(styles.tileErrorView, className, { [styles.bubble]: layout === "bubble" })}
-            data-layout={layout}
-        >
+        <li className={classNames(styles.tileErrorView, className)} {...eventPresentationAttributes}>
             <div className={styles.line} role="status">
                 <span className={styles.message}>
                     {message}
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/__snapshots__/TileErrorView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/__snapshots__/TileErrorView.test.tsx.snap
index 61ebdbcc07..d45ebe3332 100644
--- a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/__snapshots__/TileErrorView.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/__snapshots__/TileErrorView.test.tsx.snap
@@ -4,8 +4,9 @@ exports[`TileErrorView > renders the bubble layout variant 1`] = `
 <div>
   <ul>
     <li
-      class="TileErrorView-module_tileErrorView TileErrorView-module_bubble"
-      data-layout="bubble"
+      class="TileErrorView-module_tileErrorView"
+      data-event-density="default"
+      data-event-layout="bubble"
     >
       <div
         class="TileErrorView-module_line"
@@ -43,7 +44,8 @@ exports[`TileErrorView > renders the default tile error state 1`] = `
   <ul>
     <li
       class="TileErrorView-module_tileErrorView"
-      data-layout="group"
+      data-event-density="default"
+      data-event-layout="group"
     >
       <div
         class="TileErrorView-module_line"
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/index.tsx b/packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/index.ts
similarity index 100%
rename from packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/index.tsx
rename to packages/shared-components/src/room/timeline/event-tile/EventTileView/TileErrorView/index.ts
diff --git a/packages/shared-components/src/room/timeline/event-tile/EventTileView/index.ts b/packages/shared-components/src/room/timeline/event-tile/EventTileView/index.ts
new file mode 100644
index 0000000000..d6ace3c8ea
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/EventTileView/index.ts
@@ -0,0 +1,18 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+export { EventTileView } from "./EventTileView";
+export type {
+    EventTileViewClassNames,
+    EventTileRenderingMode,
+    EventTileViewHandlers,
+    EventTileViewProps,
+    EventTileViewRefs,
+    EventTileViewRoot,
+    EventTileViewRootState,
+    EventTileViewSlots,
+} from "./EventTileView.types";
diff --git a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css
index 73b6becb41..1ed1c10f69 100644
--- a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.module.css
@@ -6,43 +6,69 @@
  */
 
 button.preview {
-    background: #fff;
+    background-color: #fff;
 }
 
-.preview {
+.containerCollapsed {
+    max-width: 100%;
     display: flex;
-    position: relative;
-    width: 100%;
-    height: 200px;
-    background-size: cover;
-    background-position: center;
-    border: none;
-    padding: 0;
-    > img {
-        width: 100%;
-        object-fit: cover;
+    border: 1px solid var(--cpd-color-border-interactive-secondary);
+    border-radius: 12px;
+    /* Get radius from cpd */
+    flex-direction: row;
+    color: var(--cpd-color-text-secondary);
+    overflow: clip;
+    gap: 8px;
+    padding: var(--cpd-space-3x) var(--cpd-space-4x);
+
+    background: var(--cpd-color-bg-subtle-secondary);
+
+    .textContent {
+        display: flex;
+        flex-direction: column;
     }
-    .playButton[data-kind="primary"] {
-        padding: 0;
-        width: 50px;
-        height: 50px;
-        margin: auto;
-        background: var(--cpd-color-text-on-solid-primary);
-        > svg {
-            margin: auto;
-            border-radius: 50px;
-            color: var(--cpd-color-icon-primary);
+
+    .preview {
+        flex-shrink: 0;
+        aspect-ratio: 1;
+        height: 2.7em;
+
+        button {
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            border-radius: 8px;
+            border: none;
+            height: 100%;
+            aspect-ratio: 1;
         }
     }
+
+    .siteName span {
+        line-height: 135%;
+    }
+
+    .title,
+    .siteName > span {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        line-clamp: 1;
+        overflow: hidden;
+        min-width: 0;
+    }
 }
 
-.container {
-    max-width: 478px;
+.containerExpanded {
+    box-sizing: border-box;
+    max-width: 100%;
+    width: 478px;
     display: flex;
-    border: 1px solid var(--cpd-color-bg-subtle-secondary);
-    border-radius: 12px; /* Get radius from cpd */
+    border: 1px solid var(--cpd-color-border-interactive-secondary);
+    border-radius: 12px;
+    /* Get radius from cpd */
     flex-direction: column;
-    color: var(--cpd-color-gray-900);
+    color: var(--cpd-color-text-secondary);
     overflow: clip;
 
     background: var(--cpd-color-bg-subtle-secondary);
@@ -67,9 +93,11 @@ button.preview {
 
     .textContent {
         padding: var(--cpd-space-3x) var(--cpd-space-4x);
+
         &.inline {
             padding: 0;
         }
+
         display: flex;
         flex-direction: column;
         gap: var(--cpd-space-1x);
@@ -78,46 +106,74 @@ button.preview {
     .caption {
         display: inline-flex;
         flex-direction: column;
-        min-width: 0; /* Prevent blowout */
+        min-width: 0;
+        /* Prevent blowout */
     }
+
     .caption {
         flex: 1;
-        overflow: hidden; /* cause it to wrap rather than clip */
-    }
-
-    .title,
-    .description {
-        display: inline-block;
-        -webkit-box-orient: vertical;
         overflow: hidden;
-        white-space: normal;
+        /* cause it to wrap rather than clip */
     }
 
-    .title {
-        display: inline-block;
-        line-clamp: 2;
-        -webkit-line-clamp: 2;
-        color: var(--cpd-color-text-primary);
-        text-decoration-line: none;
-    }
+    .preview {
+        display: flex;
+        position: relative;
+        max-width: 100%;
+        width: 478px;
+        height: 200px;
+        background-size: cover;
+        background-position: center;
+        border: none;
+        padding: 0;
 
-    .description {
-        margin: 0;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        line-clamp: 2;
-        overflow: hidden;
+        .playButton[data-kind="primary"] {
+            padding: 0;
+            width: 50px;
+            height: 50px;
+            margin: auto;
+            background: var(--cpd-color-text-on-solid-primary);
+
+            > svg {
+                margin: auto;
+                border-radius: 50px;
+                color: var(--cpd-color-icon-primary);
+            }
+        }
     }
 
     .siteName {
         margin-top: var(--cpd-space-1x);
-        vertical-align: middle;
-        display: flex;
-        gap: var(--cpd-space-1-5x);
-        > * {
-            /* Center everything */
-            margin: auto 0;
-        }
+    }
+
+    .title,
+    .description {
+        line-clamp: 2;
+        -webkit-line-clamp: 2;
     }
 }
+
+.siteName {
+    vertical-align: middle;
+    display: flex;
+    gap: var(--cpd-space-1-5x);
+
+    > * {
+        /* Center everything */
+        margin: auto 0;
+    }
+}
+
+.title,
+.description {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    white-space: normal;
+    margin: 0;
+}
+
+.title {
+    color: var(--cpd-color-text-primary);
+    text-decoration-line: none;
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx
index 9e117bb39f..21a530a63b 100644
--- a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.stories.tsx
@@ -11,8 +11,10 @@ import { fn } from "storybook/test";
 import type { Meta, StoryFn } from "@storybook/react-vite";
 import { LinkPreview } from "./LinkPreview";
 import { LinkedTextContext } from "../../../../../core/utils/LinkedText";
+import { waitForBackgroundImages } from "../../../../../../.storybook/waitForImages";
 import imageFile from "../../../../../../static/element.png";
 import imageFileWide from "../../../../../../static/wideImage.png";
+import imageFileTall from "../../../../../../static/tallImage.png";
 
 export default {
     title: "EventTiles/LinkPreview",
@@ -21,6 +23,9 @@ export default {
     args: {
         onImageClick: fn(),
     },
+    play: async ({ canvasElement }) => {
+        await waitForBackgroundImages(canvasElement);
+    },
     argTypes: {
         siteName: {
             control: "text",
@@ -56,6 +61,7 @@ Default.args = {
         imageFull: imageFile,
         alt: "Element logo",
         playable: false,
+        mxcImageFull: "mxc://server/file",
     },
 };
 
@@ -111,6 +117,7 @@ Article.args = {
         imageFull: imageFileWide,
         alt: "A dog",
         playable: false,
+        mxcImageFull: "mxc://server/file",
     },
 };
 
@@ -126,6 +133,7 @@ Video.args = {
         imageFull: imageFileWide,
         alt: "A dog",
         playable: true,
+        mxcImageFull: "mxc://server/file",
     },
 };
 
@@ -150,6 +158,7 @@ SocialWithImage.args = {
         imageFull: imageFileWide,
         alt: "A dog",
         playable: false,
+        mxcImageFull: "mxc://server/file",
     },
 };
 
@@ -165,5 +174,21 @@ WithVeryLongText.args = {
         imageFull: imageFile,
         alt: "Element logo",
         playable: false,
+        mxcImageFull: "mxc://server/file",
+    },
+};
+
+export const WithTallImage = Template.bind({});
+WithTallImage.args = {
+    title: "A simple title",
+    description: "A simple description",
+    link: "https://matrix.org",
+    siteName: "Site name",
+    image: {
+        imageThumb: imageFileTall,
+        imageFull: imageFileTall,
+        alt: "Element logo",
+        playable: false,
+        mxcImageFull: "mxc://server/file",
     },
 };
diff --git a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx
index ba5f50bcec..686bc2a297 100644
--- a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/LinkPreview.tsx
@@ -5,7 +5,7 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { type MouseEventHandler, type JSX, useCallback } from "react";
+import React, { type JSX } from "react";
 import { Tooltip, Text, Avatar, Button } from "@vector-im/compound-web";
 import PlaySolidIcon from "@vector-im/compound-design-tokens/assets/web/icons/play-solid";
 import classNames from "classnames";
@@ -19,9 +19,9 @@ export interface LinkPreviewActions {
     onImageClick: () => void;
 }
 
-export type LinkPreviewProps = UrlPreview & LinkPreviewActions;
+export type LinkPreviewProps = UrlPreview & LinkPreviewActions & { collapsed: boolean };
 
-function LinkTitle({
+export function LinkTitle({
     title,
     showTooltipOnLink,
     link,
@@ -44,7 +44,7 @@ function LinkTitle({
     return showTooltipOnLink ? <Tooltip label={caption}>{anchor}</Tooltip> : anchor;
 }
 
-function LinkSiteName({ siteIcon, siteName }: { siteIcon?: string; siteName: string }): JSX.Element {
+export function LinkSiteName({ siteIcon, siteName }: { siteIcon?: string; siteName: string }): JSX.Element {
     return (
         <div className={styles.siteName}>
             {siteIcon && <Avatar size="16px" name={siteName} id={siteName} src={siteIcon} />}
@@ -66,7 +66,7 @@ function LinkPreviewInline({
     link,
 }: Omit<LinkPreviewProps, "image" | "description" | "author" | "onImageClick">): JSX.Element {
     return (
-        <div className={classNames(styles.container, styles.inline)}>
+        <div className={classNames(styles.containerExpanded, styles.inline)}>
             {siteIcon && (
                 <div className={styles.siteAvatar}>
                     <Avatar type="square" size="48px" name={title} id={title} src={siteIcon} />
@@ -84,21 +84,58 @@ function LinkPreviewInline({
  * LinkPreview renders a single preview component for a single link on an event. It is usually rendered as part of
  * a `UrlPreviewGroupView`.
  */
-export function LinkPreview({ onImageClick, ...preview }: LinkPreviewProps): JSX.Element {
+export function LinkPreview(props: LinkPreviewProps): JSX.Element {
+    if (props.collapsed) {
+        return <LinkPreviewCollapsed {...props} />;
+    } else {
+        return <LinkPreviewExpanded {...props} />;
+    }
+}
+
+function createImageClickHandler({ onImageClick, ...preview }: LinkPreviewProps): React.MouseEventHandler {
+    return (ev) => {
+        if (ev.button != 0 || ev.metaKey) return;
+        ev.preventDefault();
+
+        if (!preview.image?.imageFull) {
+            return;
+        }
+        onImageClick();
+    };
+}
+
+export function LinkPreviewCollapsed(preview: LinkPreviewProps): JSX.Element {
     const { translate: _t } = useI18n();
+    let img: JSX.Element | undefined;
 
-    const onImageClickHandler = useCallback<MouseEventHandler>(
-        (ev) => {
-            if (ev.button != 0 || ev.metaKey) return;
-            ev.preventDefault();
+    if (preview.image && !preview.image.playable) {
+        img = (
+            <div className={styles.preview}>
+                <button
+                    type="button"
+                    style={{
+                        backgroundImage: `url('${preview.image.imageThumb}')`,
+                    }}
+                    onClick={createImageClickHandler(preview)}
+                    aria-label={_t("timeline|url_preview|view_image")}
+                />
+            </div>
+        );
+    }
 
-            if (!preview.image?.imageFull) {
-                return;
-            }
-            onImageClick();
-        },
-        [preview.image?.imageFull, onImageClick],
+    return (
+        <div className={styles.containerCollapsed}>
+            {img}
+            <div className={styles.textContent}>
+                <LinkTitle title={preview.title} showTooltipOnLink={preview.showTooltipOnLink} link={preview.link} />
+                {preview.siteName && <LinkSiteName siteName={preview.siteName} />}
+            </div>
+        </div>
     );
+}
+
+export function LinkPreviewExpanded(preview: LinkPreviewProps): JSX.Element {
+    const { translate: _t } = useI18n();
 
     if (!preview.image && !preview.author && !preview.description) {
         return <LinkPreviewInline {...preview} />;
@@ -135,18 +172,20 @@ export function LinkPreview({ onImageClick, ...preview }: LinkPreviewProps): JSX
             // Otherwise, the preview can be clicked on.
             img = (
                 <button
+                    style={{
+                        backgroundImage: `url('${preview.image.imageThumb}')`,
+                    }}
                     className={styles.preview}
-                    onClick={onImageClickHandler}
+                    onClick={createImageClickHandler(preview)}
                     aria-label={_t("timeline|url_preview|view_image")}
-                >
-                    <img src={preview.image.imageThumb} alt={preview.image.alt} title={preview.image.alt} />
-                </button>
+                    type="button"
+                />
             );
         }
     }
 
     return (
-        <div className={styles.container}>
+        <div className={styles.containerExpanded}>
             {img}
             <div className={styles.textContent}>
                 {preview.author && (
diff --git a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/__snapshots__/LinkPreview.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/__snapshots__/LinkPreview.test.tsx.snap
index 833d60f581..e63f1951bb 100644
--- a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/__snapshots__/LinkPreview.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/LinkPreview/__snapshots__/LinkPreview.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`LinkPreview > renders a playable preview that can be opened with a click 1`] = `
 <div>
   <div
-    class="LinkPreview-module_container"
+    class="LinkPreview-module_containerExpanded"
   >
     <div
       class="LinkPreview-module_preview"
@@ -66,18 +66,14 @@ exports[`LinkPreview > renders a playable preview that can be opened with a clic
 exports[`LinkPreview > renders a preview 1`] = `
 <div>
   <div
-    class="LinkPreview-module_container"
+    class="LinkPreview-module_containerExpanded"
   >
     <button
       aria-label="View image"
       class="LinkPreview-module_preview"
-    >
-      <img
-        alt="Element logo"
-        src="/static/element.png"
-        title="Element logo"
-      />
-    </button>
+      style="background-image: url("/static/element.png");"
+      type="button"
+    />
     <div
       class="LinkPreview-module_textContent"
     >
@@ -111,7 +107,7 @@ exports[`LinkPreview > renders a preview 1`] = `
 exports[`LinkPreview > renders a preview with just a title 1`] = `
 <div>
   <div
-    class="LinkPreview-module_container LinkPreview-module_inline"
+    class="LinkPreview-module_containerExpanded LinkPreview-module_inline"
   >
     <div
       class="LinkPreview-module_textContent LinkPreview-module_inline"
@@ -141,7 +137,7 @@ exports[`LinkPreview > renders a preview with just a title 1`] = `
 exports[`LinkPreview > renders a preview with just a title and description 1`] = `
 <div>
   <div
-    class="LinkPreview-module_container"
+    class="LinkPreview-module_containerExpanded"
   >
     <div
       class="LinkPreview-module_textContent"
diff --git a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.module.css b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.module.css
index f2be88b333..0d40aee220 100644
--- a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.module.css
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.module.css
@@ -5,29 +5,38 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-.previewGroup {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: var(--cpd-space-4x);
-    margin-bottom: var(--cpd-space-4x);
-
-    &.compactLayout {
-        gap: var(--cpd-space-2x);
-        margin-bottom: var(--cpd-space-2x);
-    }
-
-    .toggleButton[data-kind="tertiary"] {
-        margin-left: auto;
-        margin-right: auto;
-        text-decoration: none;
-        color: var(--cpd-color-icon-accent-primary);
-        font-weight: var(--cpd-font-weight-regular);
-    }
+.hideButton {
+    position: absolute;
+    top: var(--cpd-space-2x);
+    right: var(--cpd-space-2x);
+    z-index: 1;
 }
 
 .wrapper {
     margin-top: var(--cpd-space-4x);
-    display: flex;
-    flex-direction: row;
+    position: relative;
+    width: fit-content;
+    max-width: 100%;
+
+    .previewGroup {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-4x);
+        margin-bottom: var(--cpd-space-4x);
+
+        .toggleButton[data-kind="tertiary"] {
+            margin-left: auto;
+            margin-right: auto;
+            text-decoration: none;
+            color: var(--cpd-color-icon-accent-primary);
+            font-weight: var(--cpd-font-weight-regular);
+        }
+    }
+}
+
+.wrapper[data-event-density="compact"] {
+    .previewGroup {
+        gap: var(--cpd-space-2x);
+        margin-bottom: var(--cpd-space-2x);
+    }
 }
diff --git a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx
index 47b997f68e..4cf61dfb72 100644
--- a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.stories.tsx
@@ -10,7 +10,7 @@ import { fn } from "storybook/test";
 
 import imageFile from "../../../../../static/element.png";
 import tallImageFile from "../../../../../static/tallImage.png";
-import type { Meta, StoryFn } from "@storybook/react-vite";
+import type { Decorator, Meta, StoryFn } from "@storybook/react-vite";
 import {
     UrlPreviewGroupView,
     type UrlPreviewGroupViewActions,
@@ -19,7 +19,7 @@ import {
 import { useMockedViewModel } from "../../../../core/viewmodel";
 import { LinkedTextContext } from "../../../../core/utils/LinkedText";
 import { withViewDocs } from "../../../../../.storybook/withViewDocs";
-import { EventPresentationProvider } from "../../EventPresentation";
+import { waitForBackgroundImages } from "../../../../../.storybook/waitForImages";
 
 type UrlPreviewGroupViewProps = UrlPreviewGroupViewSnapshot & UrlPreviewGroupViewActions;
 
@@ -43,6 +43,27 @@ const UrlPreviewGroupViewWrapperImpl = ({
 
 const UrlPreviewGroupViewWrapper = withViewDocs(UrlPreviewGroupViewWrapperImpl, UrlPreviewGroupView);
 
+/**
+ * Mimics the CSS context of .mx_EventTile_line (bubble layout) + TextualBodyView.root that
+ * surrounds UrlPreviewGroupView in the real app.
+ */
+const withBubbleLayoutContext: Decorator = (Story) => (
+    <div
+        style={{
+            display: "flex",
+            width: "fit-content",
+            maxWidth: "70%",
+            padding: "9px 60px 9px 9px",
+            background: "var(--cpd-color-bg-subtle-primary)",
+            borderRadius: "12px",
+        }}
+    >
+        <div style={{ overflowX: "hidden", overflowY: "hidden", maxWidth: "100%" }}>
+            <Story />
+        </div>
+    </div>
+);
+
 export default {
     title: "Timeline/Timeline Event/UrlPreviewGroupView",
     component: UrlPreviewGroupViewWrapper,
@@ -52,6 +73,9 @@ export default {
         onImageClick: fn(),
         onTogglePreviewLimit: fn(),
     },
+    play: async ({ canvasElement }) => {
+        await waitForBackgroundImages(canvasElement);
+    },
     parameters: {
         design: {
             type: "figma",
@@ -76,6 +100,7 @@ Default.args = {
                 imageFull: imageFile,
                 alt: "The element logo",
                 playable: false,
+                mxcImageFull: "mxc://server/file",
             },
         },
     ],
@@ -103,6 +128,7 @@ MultiplePreviewsVisible.args = {
                 imageFull: imageFile,
                 alt: "The element logo",
                 playable: false,
+                mxcImageFull: "mxc://server/file",
             },
         },
         // These images should appear the same size despite having different dimensions.
@@ -117,6 +143,7 @@ MultiplePreviewsVisible.args = {
                 imageFull: tallImageFile,
                 alt: "A dog",
                 playable: false,
+                mxcImageFull: "mxc://server/file",
             },
         },
         {
@@ -130,6 +157,7 @@ MultiplePreviewsVisible.args = {
                 imageFull: imageFile,
                 alt: "The element logo",
                 playable: false,
+                mxcImageFull: "mxc://server/file",
             },
         },
     ],
@@ -142,10 +170,29 @@ export const WithCompactView = Template.bind({});
 WithCompactView.args = {
     ...MultiplePreviewsVisible.args,
 };
-WithCompactView.decorators = [
-    (Story): JSX.Element => (
-        <EventPresentationProvider value={{ layout: "group", density: "compact" }}>
-            <Story />
-        </EventPresentationProvider>
-    ),
-];
+WithCompactView.globals = {
+    eventDensity: "compact",
+};
+
+// Testing that within the bubble layout, we still scale appropriately.
+
+export const InBubbleLayout = Default.bind({});
+InBubbleLayout.args = {
+    ...Default.args,
+};
+InBubbleLayout.globals = { eventLayout: "bubble" };
+// Purely for testing that bubbles have not regressed
+InBubbleLayout.tags = ["!autodocs"];
+InBubbleLayout.decorators = [withBubbleLayoutContext];
+
+export const InBubbleLayoutNarrow = Default.bind({});
+InBubbleLayoutNarrow.args = {
+    ...InBubbleLayout.args,
+};
+InBubbleLayoutNarrow.globals = { ...InBubbleLayout.globals };
+InBubbleLayoutNarrow.decorators = [...InBubbleLayout.decorators];
+InBubbleLayoutNarrow.parameters = {
+    initialGlobals: {
+        viewport: { value: "mobile1", isRotated: false },
+    },
+};
diff --git a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.test.tsx b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.test.tsx
index 4f96f33341..0885d88cb4 100644
--- a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.test.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.test.tsx
@@ -28,7 +28,9 @@ describe("UrlPreviewGroupView", () => {
         expect(container).toMatchSnapshot();
     });
     it("renders with compact density", () => {
-        const { container } = render(<WithCompactView />);
+        const { container } = render(<WithCompactView />, {
+            presentation: { density: "compact" },
+        });
         expect(container).toMatchSnapshot();
     });
 });
diff --git a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.tsx b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.tsx
index 8d5eb5a481..12285921fa 100644
--- a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/UrlPreviewGroupView.tsx
@@ -12,10 +12,10 @@ import classNames from "classnames";
 
 import { useViewModel, type ViewModel } from "../../../../core/viewmodel";
 import { useI18n } from "../../../../core/i18n/i18nContext";
-import { useEventPresentation } from "../../EventPresentation";
 import type { UrlPreview } from "./types";
 import { LinkPreview } from "./LinkPreview";
 import styles from "./UrlPreviewGroupView.module.css";
+import { useEventPresentationAttributes } from "../../EventPresentation/EventPresentationContext";
 
 /** Snapshot data for rendering URL previews attached to an event. */
 export interface UrlPreviewGroupViewSnapshot {
@@ -54,6 +54,22 @@ export interface UrlPreviewGroupViewActions {
 /** View model contract for the URL preview group view. */
 export type UrlPreviewGroupViewModel = ViewModel<UrlPreviewGroupViewSnapshot, UrlPreviewGroupViewActions>;
 
+function HideButton({ onHideClick }: { onHideClick: UrlPreviewGroupViewActions["onHideClick"] }): JSX.Element {
+    const { translate: _t } = useI18n();
+    return (
+        <div className={styles.hideButton}>
+            <IconButton
+                kind="secondary"
+                size="28px"
+                onClick={onHideClick}
+                aria-label={_t("timeline|url_preview|close")}
+            >
+                <CloseIcon />
+            </IconButton>
+        </div>
+    );
+}
+
 /**
  * Renders the URL preview group attached to a single event.
  *
@@ -62,7 +78,7 @@ export type UrlPreviewGroupViewModel = ViewModel<UrlPreviewGroupViewSnapshot, Ur
  */
 export function UrlPreviewGroupView({ vm, className }: UrlPreviewGroupViewProps): JSX.Element | null {
     const { translate: _t } = useI18n();
-    const { density } = useEventPresentation();
+    const eventPresentationAttributes = useEventPresentationAttributes();
     const { previews, totalPreviewCount, previewsLimited, overPreviewLimit } = useViewModel(vm);
     if (previews.length === 0) {
         return null;
@@ -80,21 +96,20 @@ export function UrlPreviewGroupView({ vm, className }: UrlPreviewGroupViewProps)
     }
 
     return (
-        <div className={classNames(className, styles.wrapper)}>
-            <div className={classNames(styles.previewGroup, density === "compact" && styles.compactLayout)}>
-                {previews.map((preview) => (
-                    <LinkPreview key={preview.link} onImageClick={() => vm.onImageClick(preview)} {...preview} />
+        <div className={classNames(className, styles.wrapper)} {...eventPresentationAttributes}>
+            <HideButton onHideClick={vm.onHideClick} />
+            <div className={styles.previewGroup}>
+                {previews.map((preview, i) => (
+                    <LinkPreview
+                        key={preview.link}
+                        onImageClick={() => vm.onImageClick(preview)}
+                        {...preview}
+                        image={preview.image}
+                        collapsed={i !== 0}
+                    />
                 ))}
                 {toggleButton}
             </div>
-            <IconButton
-                kind="secondary"
-                size="28px"
-                onClick={vm.onHideClick}
-                aria-label={_t("timeline|url_preview|close")}
-            >
-                <CloseIcon />
-            </IconButton>
         </div>
     );
 }
diff --git a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/__snapshots__/UrlPreviewGroupView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/__snapshots__/UrlPreviewGroupView.test.tsx.snap
index 2b6fb99206..551b0b193f 100644
--- a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/__snapshots__/UrlPreviewGroupView.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/__snapshots__/UrlPreviewGroupView.test.tsx.snap
@@ -4,23 +4,50 @@ exports[`UrlPreviewGroupView > renders a single preview 1`] = `
 <div>
   <div
     class="UrlPreviewGroupView-module_wrapper"
+    data-event-density="default"
+    data-event-layout="group"
   >
+    <div
+      class="UrlPreviewGroupView-module_hideButton"
+    >
+      <button
+        aria-label="Close preview"
+        class="_icon-button_1215g_8"
+        data-kind="secondary"
+        role="button"
+        style="--cpd-icon-button-size: 28px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_147l5_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
     <div
       class="UrlPreviewGroupView-module_previewGroup"
     >
       <div
-        class="LinkPreview-module_container"
+        class="LinkPreview-module_containerExpanded"
       >
         <button
           aria-label="View image"
           class="LinkPreview-module_preview"
-        >
-          <img
-            alt="The element logo"
-            src="/static/element.png"
-            title="The element logo"
-          />
-        </button>
+          style="background-image: url("/static/element.png");"
+          type="button"
+        />
         <div
           class="LinkPreview-module_textContent"
         >
@@ -49,31 +76,6 @@ exports[`UrlPreviewGroupView > renders a single preview 1`] = `
         </div>
       </div>
     </div>
-    <button
-      aria-label="Close preview"
-      class="_icon-button_1215g_8"
-      data-kind="secondary"
-      role="button"
-      style="--cpd-icon-button-size: 28px;"
-      tabindex="0"
-    >
-      <div
-        class="_indicator-icon_147l5_17"
-        style="--cpd-icon-button-size: 100%;"
-      >
-        <svg
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
-          />
-        </svg>
-      </div>
-    </button>
   </div>
 </div>
 `;
@@ -82,23 +84,50 @@ exports[`UrlPreviewGroupView > renders multiple previews 1`] = `
 <div>
   <div
     class="UrlPreviewGroupView-module_wrapper"
+    data-event-density="default"
+    data-event-layout="group"
   >
+    <div
+      class="UrlPreviewGroupView-module_hideButton"
+    >
+      <button
+        aria-label="Close preview"
+        class="_icon-button_1215g_8"
+        data-kind="secondary"
+        role="button"
+        style="--cpd-icon-button-size: 28px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_147l5_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
     <div
       class="UrlPreviewGroupView-module_previewGroup"
     >
       <div
-        class="LinkPreview-module_container"
+        class="LinkPreview-module_containerExpanded"
       >
         <button
           aria-label="View image"
           class="LinkPreview-module_preview"
-        >
-          <img
-            alt="The element logo"
-            src="/static/element.png"
-            title="The element logo"
-          />
-        </button>
+          style="background-image: url("/static/element.png");"
+          type="button"
+        />
         <div
           class="LinkPreview-module_textContent"
         >
@@ -127,18 +156,17 @@ exports[`UrlPreviewGroupView > renders multiple previews 1`] = `
         </div>
       </div>
       <div
-        class="LinkPreview-module_container"
+        class="LinkPreview-module_containerCollapsed"
       >
-        <button
-          aria-label="View image"
+        <div
           class="LinkPreview-module_preview"
         >
-          <img
-            alt="A dog"
-            src="/static/tallImage.png"
-            title="A dog"
+          <button
+            aria-label="View image"
+            style="background-image: url("/static/tallImage.png");"
+            type="button"
           />
-        </button>
+        </div>
         <div
           class="LinkPreview-module_textContent"
         >
@@ -150,11 +178,6 @@ exports[`UrlPreviewGroupView > renders multiple previews 1`] = `
           >
             Two
           </a>
-          <p
-            class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container LinkPreview-module_description"
-          >
-            This one has a taller image which should crop nicely.
-          </p>
           <div
             class="LinkPreview-module_siteName"
           >
@@ -167,18 +190,17 @@ exports[`UrlPreviewGroupView > renders multiple previews 1`] = `
         </div>
       </div>
       <div
-        class="LinkPreview-module_container"
+        class="LinkPreview-module_containerCollapsed"
       >
-        <button
-          aria-label="View image"
+        <div
           class="LinkPreview-module_preview"
         >
-          <img
-            alt="The element logo"
-            src="/static/element.png"
-            title="The element logo"
+          <button
+            aria-label="View image"
+            style="background-image: url("/static/element.png");"
+            type="button"
           />
-        </button>
+        </div>
         <div
           class="LinkPreview-module_textContent"
         >
@@ -190,11 +212,6 @@ exports[`UrlPreviewGroupView > renders multiple previews 1`] = `
           >
             Three
           </a>
-          <p
-            class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container LinkPreview-module_description"
-          >
-            One more description
-          </p>
           <div
             class="LinkPreview-module_siteName"
           >
@@ -216,31 +233,6 @@ exports[`UrlPreviewGroupView > renders multiple previews 1`] = `
         Collapse
       </button>
     </div>
-    <button
-      aria-label="Close preview"
-      class="_icon-button_1215g_8"
-      data-kind="secondary"
-      role="button"
-      style="--cpd-icon-button-size: 28px;"
-      tabindex="0"
-    >
-      <div
-        class="_indicator-icon_147l5_17"
-        style="--cpd-icon-button-size: 100%;"
-      >
-        <svg
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
-          />
-        </svg>
-      </div>
-    </button>
   </div>
 </div>
 `;
@@ -249,23 +241,50 @@ exports[`UrlPreviewGroupView > renders multiple previews which are hidden 1`] =
 <div>
   <div
     class="UrlPreviewGroupView-module_wrapper"
+    data-event-density="default"
+    data-event-layout="group"
   >
+    <div
+      class="UrlPreviewGroupView-module_hideButton"
+    >
+      <button
+        aria-label="Close preview"
+        class="_icon-button_1215g_8"
+        data-kind="secondary"
+        role="button"
+        style="--cpd-icon-button-size: 28px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_147l5_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
     <div
       class="UrlPreviewGroupView-module_previewGroup"
     >
       <div
-        class="LinkPreview-module_container"
+        class="LinkPreview-module_containerExpanded"
       >
         <button
           aria-label="View image"
           class="LinkPreview-module_preview"
-        >
-          <img
-            alt="The element logo"
-            src="/static/element.png"
-            title="The element logo"
-          />
-        </button>
+          style="background-image: url("/static/element.png");"
+          type="button"
+        />
         <div
           class="LinkPreview-module_textContent"
         >
@@ -303,31 +322,6 @@ exports[`UrlPreviewGroupView > renders multiple previews which are hidden 1`] =
         Show 9 other previews
       </button>
     </div>
-    <button
-      aria-label="Close preview"
-      class="_icon-button_1215g_8"
-      data-kind="secondary"
-      role="button"
-      style="--cpd-icon-button-size: 28px;"
-      tabindex="0"
-    >
-      <div
-        class="_indicator-icon_147l5_17"
-        style="--cpd-icon-button-size: 100%;"
-      >
-        <svg
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
-          />
-        </svg>
-      </div>
-    </button>
   </div>
 </div>
 `;
@@ -336,23 +330,50 @@ exports[`UrlPreviewGroupView > renders with compact density 1`] = `
 <div>
   <div
     class="UrlPreviewGroupView-module_wrapper"
+    data-event-density="compact"
+    data-event-layout="group"
   >
     <div
-      class="UrlPreviewGroupView-module_previewGroup UrlPreviewGroupView-module_compactLayout"
+      class="UrlPreviewGroupView-module_hideButton"
+    >
+      <button
+        aria-label="Close preview"
+        class="_icon-button_1215g_8"
+        data-kind="secondary"
+        role="button"
+        style="--cpd-icon-button-size: 28px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_147l5_17"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
+            />
+          </svg>
+        </div>
+      </button>
+    </div>
+    <div
+      class="UrlPreviewGroupView-module_previewGroup"
     >
       <div
-        class="LinkPreview-module_container"
+        class="LinkPreview-module_containerExpanded"
       >
         <button
           aria-label="View image"
           class="LinkPreview-module_preview"
-        >
-          <img
-            alt="The element logo"
-            src="/static/element.png"
-            title="The element logo"
-          />
-        </button>
+          style="background-image: url("/static/element.png");"
+          type="button"
+        />
         <div
           class="LinkPreview-module_textContent"
         >
@@ -381,18 +402,17 @@ exports[`UrlPreviewGroupView > renders with compact density 1`] = `
         </div>
       </div>
       <div
-        class="LinkPreview-module_container"
+        class="LinkPreview-module_containerCollapsed"
       >
-        <button
-          aria-label="View image"
+        <div
           class="LinkPreview-module_preview"
         >
-          <img
-            alt="A dog"
-            src="/static/tallImage.png"
-            title="A dog"
+          <button
+            aria-label="View image"
+            style="background-image: url("/static/tallImage.png");"
+            type="button"
           />
-        </button>
+        </div>
         <div
           class="LinkPreview-module_textContent"
         >
@@ -404,11 +424,6 @@ exports[`UrlPreviewGroupView > renders with compact density 1`] = `
           >
             Two
           </a>
-          <p
-            class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container LinkPreview-module_description"
-          >
-            This one has a taller image which should crop nicely.
-          </p>
           <div
             class="LinkPreview-module_siteName"
           >
@@ -421,18 +436,17 @@ exports[`UrlPreviewGroupView > renders with compact density 1`] = `
         </div>
       </div>
       <div
-        class="LinkPreview-module_container"
+        class="LinkPreview-module_containerCollapsed"
       >
-        <button
-          aria-label="View image"
+        <div
           class="LinkPreview-module_preview"
         >
-          <img
-            alt="The element logo"
-            src="/static/element.png"
-            title="The element logo"
+          <button
+            aria-label="View image"
+            style="background-image: url("/static/element.png");"
+            type="button"
           />
-        </button>
+        </div>
         <div
           class="LinkPreview-module_textContent"
         >
@@ -444,11 +458,6 @@ exports[`UrlPreviewGroupView > renders with compact density 1`] = `
           >
             Three
           </a>
-          <p
-            class="_typography_6v6n8_153 _font-body-md-regular_6v6n8_50 LinkedText-module_container LinkPreview-module_description"
-          >
-            One more description
-          </p>
           <div
             class="LinkPreview-module_siteName"
           >
@@ -470,31 +479,6 @@ exports[`UrlPreviewGroupView > renders with compact density 1`] = `
         Collapse
       </button>
     </div>
-    <button
-      aria-label="Close preview"
-      class="_icon-button_1215g_8"
-      data-kind="secondary"
-      role="button"
-      style="--cpd-icon-button-size: 28px;"
-      tabindex="0"
-    >
-      <div
-        class="_indicator-icon_147l5_17"
-        style="--cpd-icon-button-size: 100%;"
-      >
-        <svg
-          fill="currentColor"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
-          />
-        </svg>
-      </div>
-    </button>
   </div>
 </div>
 `;
diff --git a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/types.ts b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/types.ts
index 8d26743987..aa5f5a554e 100644
--- a/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/types.ts
+++ b/packages/shared-components/src/room/timeline/event-tile/UrlPreviewGroupView/types.ts
@@ -22,6 +22,10 @@ export interface UrlPreview {
      * The site name to be displayed alongside the title.
      */
     siteName: string;
+    /**
+     * The og:url value of the page, could be different from link
+     */
+    ogUrl?: string;
     /**
      * The HTTP URI of the the sites icon.
      */
@@ -42,6 +46,14 @@ export interface UrlPreview {
          * The HTTP URI of the full image.
          */
         imageFull: string;
+        /**
+         * The mxc:// URI of the full image.
+         */
+        mxcImageFull: string;
+        /**
+         * The type/subtype of the image format
+         */
+        imageType?: string;
         /**
          * File size in bytes.
          */
diff --git a/packages/shared-components/src/room/timeline/event-tile/actions/ActionBarView/ActionBarView.tsx b/packages/shared-components/src/room/timeline/event-tile/actions/ActionBarView/ActionBarView.tsx
index e6de27a38d..e2d2039a0c 100644
--- a/packages/shared-components/src/room/timeline/event-tile/actions/ActionBarView/ActionBarView.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/actions/ActionBarView/ActionBarView.tsx
@@ -376,6 +376,8 @@ export function ActionBarView({ vm, className }: Readonly<ActionBarViewProps>):
     return (
         <RovingTabIndexProvider key={rovingProviderKey} handleLeftRight handleHomeEnd handleLoop>
             {({ onKeyDownHandler }) => (
+                // This may be wrong but seems to work, this is a roving-toolbar, so the focus follows one of the children
+                // oxlint-disable-next-line jsx-a11y/interactive-supports-focus
                 <Flex
                     display="inline-flex"
                     direction="row"
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/AudioPlayerView/AudioPlayerView.module.css b/packages/shared-components/src/room/timeline/event-tile/body/AudioPlayerView/AudioPlayerView.module.css
index 1842cc90a1..905719eedf 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/AudioPlayerView/AudioPlayerView.module.css
+++ b/packages/shared-components/src/room/timeline/event-tile/body/AudioPlayerView/AudioPlayerView.module.css
@@ -7,7 +7,6 @@
 
 .audioPlayer {
     padding: var(--cpd-space-4x) var(--cpd-space-3x) var(--cpd-space-3x) var(--cpd-space-3x);
-    border-radius: 8px;
 }
 
 .mediaInfo {
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/AudioPlayerView/__snapshots__/AudioPlayerView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/body/AudioPlayerView/__snapshots__/AudioPlayerView.test.tsx.snap
index a024c42b5f..0bafc52fd7 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/AudioPlayerView/__snapshots__/AudioPlayerView.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/body/AudioPlayerView/__snapshots__/AudioPlayerView.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`AudioPlayerView > renders the audio player in default state 1`] = `
       <button
         aria-disabled="false"
         aria-label="Play"
-        aria-labelledby="_r_0_"
+        aria-labelledby="react-use-id-1"
         class="_icon-button_1215g_8 PlayPauseButton-module_button"
         data-kind="primary"
         role="button"
@@ -106,7 +106,7 @@ exports[`AudioPlayerView > renders the audio player in error state 1`] = `
       <button
         aria-disabled="false"
         aria-label="Play"
-        aria-labelledby="_r_i_"
+        aria-labelledby="react-use-id-1"
         class="_icon-button_1215g_8 PlayPauseButton-module_button"
         data-kind="primary"
         role="button"
@@ -202,7 +202,7 @@ exports[`AudioPlayerView > renders the audio player without media name 1`] = `
       <button
         aria-disabled="false"
         aria-label="Play"
-        aria-labelledby="_r_6_"
+        aria-labelledby="react-use-id-1"
         class="_icon-button_1215g_8 PlayPauseButton-module_button"
         data-kind="primary"
         role="button"
@@ -293,7 +293,7 @@ exports[`AudioPlayerView > renders the audio player without size 1`] = `
       <button
         aria-disabled="false"
         aria-label="Play"
-        aria-labelledby="_r_c_"
+        aria-labelledby="react-use-id-1"
         class="_icon-button_1215g_8 PlayPauseButton-module_button"
         data-kind="primary"
         role="button"
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/DecryptionFailureBodyView/index.tsx b/packages/shared-components/src/room/timeline/event-tile/body/DecryptionFailureBodyView/index.ts
similarity index 100%
rename from packages/shared-components/src/room/timeline/event-tile/body/DecryptionFailureBodyView/index.tsx
rename to packages/shared-components/src/room/timeline/event-tile/body/DecryptionFailureBodyView/index.ts
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/EventContentBodyView/index.tsx b/packages/shared-components/src/room/timeline/event-tile/body/EventContentBodyView/index.ts
similarity index 100%
rename from packages/shared-components/src/room/timeline/event-tile/body/EventContentBodyView/index.tsx
rename to packages/shared-components/src/room/timeline/event-tile/body/EventContentBodyView/index.ts
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/HiddenBodyView/index.tsx b/packages/shared-components/src/room/timeline/event-tile/body/HiddenBodyView/index.ts
similarity index 100%
rename from packages/shared-components/src/room/timeline/event-tile/body/HiddenBodyView/index.tsx
rename to packages/shared-components/src/room/timeline/event-tile/body/HiddenBodyView/index.ts
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/HiddenMediaPlaceholder/index.tsx b/packages/shared-components/src/room/timeline/event-tile/body/HiddenMediaPlaceholder/index.ts
similarity index 100%
rename from packages/shared-components/src/room/timeline/event-tile/body/HiddenMediaPlaceholder/index.tsx
rename to packages/shared-components/src/room/timeline/event-tile/body/HiddenMediaPlaceholder/index.ts
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MFileBodyView/FileBodyView.module.css b/packages/shared-components/src/room/timeline/event-tile/body/MFileBodyView/FileBodyView.module.css
index 52434c133d..1f13afb53f 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/MFileBodyView/FileBodyView.module.css
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MFileBodyView/FileBodyView.module.css
@@ -39,6 +39,9 @@
             width: 16px;
             height: 16px;
             padding: var(--cpd-space-2x);
+            color: var(--cpd-color-text-secondary);
+            background-color: var(--cpd-color-bg-subtle-primary);
+            border-radius: 20px;
         }
 
         & span {
@@ -57,6 +60,7 @@
 
 .content [data-type="download"] {
     align-items: center;
+    height: var(--cpd-space-9x);
 
     & iframe {
         margin: 0;
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MFileBodyView/FileBodyView.tsx b/packages/shared-components/src/room/timeline/event-tile/body/MFileBodyView/FileBodyView.tsx
index f13753d6e4..5bf6d242e6 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/MFileBodyView/FileBodyView.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MFileBodyView/FileBodyView.tsx
@@ -257,6 +257,7 @@ export function FileBodyView({ vm, refIFrame, refLink, className }: Readonly<Fil
                                  * We'll use it to learn how the download button
                                  * would have been styled if it was rendered inline.
                                  * this violates multiple eslint rules so ignore it completely */}
+                                {/* oxlint-disable-next-line jsx-a11y/control-has-associated-label */}
                                 <Button size="md" kind="secondary" Icon={DownloadIcon} as="a" ref={refLink} />
                             </div>
                             {/*
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MFileBodyView/index.tsx b/packages/shared-components/src/room/timeline/event-tile/body/MFileBodyView/index.ts
similarity index 100%
rename from packages/shared-components/src/room/timeline/event-tile/body/MFileBodyView/index.tsx
rename to packages/shared-components/src/room/timeline/event-tile/body/MFileBodyView/index.ts
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.module.css b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.module.css
index 05d56d3987..dd5d82ad31 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.module.css
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.module.css
@@ -23,7 +23,7 @@
     position: relative;
     overflow: hidden;
     contain: paint;
-    border-radius: var(--MBody-border-radius);
+    border-radius: 8px;
 }
 
 .placeholder {
@@ -70,7 +70,7 @@
     max-width: min(100%, 350px);
     overflow: hidden;
     padding: var(--cpd-space-1x);
-    border-radius: var(--MBody-border-radius);
+    border-radius: 8px;
     background-color: rgb(0 0 0 / 0.6);
     color: #fff;
     text-overflow: ellipsis;
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx
index cddb6575b3..285f804a08 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.stories.tsx
@@ -19,7 +19,6 @@ import {
     type ImageBodyViewSnapshot,
 } from "./ImageBodyView";
 import imageSrc from "../../../../../../static/image-body/install-spinner.png";
-import thumbnailSrc from "../../../../../../static/image-body/install-spinner.png";
 import animatedGifSrc from "../../../../../../static/image-body/install-spinner.gif";
 const demoBlurhash = "LEHV6nWB2yk8pyo0adR*.7kCMdnj";
 const imageBodyViewStateOptions = [ImageBodyViewState.ERROR, ImageBodyViewState.HIDDEN, ImageBodyViewState.READY];
@@ -29,6 +28,8 @@ const imageBodyViewPlaceholderOptions = [
     ImageBodyViewPlaceholder.BLURHASH,
 ];
 
+const thumbnailSrc = imageSrc;
+
 type ImageBodyViewProps = ImageBodyViewSnapshot &
     ImageBodyViewActions & {
         className?: string;
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.test.tsx b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.test.tsx
index 2eaeeba41f..f1d0b26eb5 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.test.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.test.tsx
@@ -112,6 +112,38 @@ describe("ImageBodyView", () => {
         expect(onLinkClick).toHaveBeenCalledTimes(1);
     });
 
+    it("merges supplied class names with module classes", () => {
+        const vm = new TestImageBodyViewModel({
+            state: ImageBodyViewState.READY,
+            alt: "Custom class image",
+            src: "https://example.org/full.png",
+            thumbnailSrc: "https://example.org/thumb.png",
+            maxWidth: 320,
+            maxHeight: 240,
+            aspectRatio: "4 / 3",
+        });
+
+        const { container } = render(
+            <ImageBodyView
+                vm={vm}
+                className="customRoot"
+                containerClassName="customContainer"
+                imageClassName="customImage"
+            />,
+        );
+
+        const rootClassName = container.querySelector(".customRoot")?.className;
+        const containerClassName = container.querySelector(".customContainer")?.className;
+        const imageClassName = screen.getByRole("img", { name: "Custom class image" }).className;
+
+        expect(rootClassName).toContain("customRoot");
+        expect(rootClassName).not.toBe("customRoot");
+        expect(containerClassName).toContain("customContainer");
+        expect(containerClassName).not.toBe("customContainer");
+        expect(imageClassName).toContain("customImage");
+        expect(imageClassName).not.toBe("customImage");
+    });
+
     it("swaps to the full source on hover for animated previews", async () => {
         const user = userEvent.setup();
         const vm = new TestImageBodyViewModel({
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.tsx b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.tsx
index 7a4ea96acb..d18701eb93 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/ImageBodyView.tsx
@@ -12,6 +12,7 @@ import React, {
     type MouseEventHandler,
     type PropsWithChildren,
     type ReactEventHandler,
+    type Ref,
     useState,
 } from "react";
 import classNames from "classnames";
@@ -148,6 +149,18 @@ interface ImageBodyViewProps {
      * Optional host CSS class.
      */
     className?: string;
+    /**
+     * Optional CSS class applied to the media frame container.
+     */
+    containerClassName?: string;
+    /**
+     * Optional CSS class applied to the rendered image element.
+     */
+    imageClassName?: string;
+    /**
+     * Optional ref to the rendered image element.
+     */
+    imageRef?: Ref<HTMLImageElement>;
     /**
      * Optional supplemental content rendered after the media frame.
      */
@@ -202,7 +215,14 @@ function renderPlaceholder({
  * </ImageBodyView>
  * ```
  */
-export function ImageBodyView({ vm, className, children }: Readonly<ImageBodyViewProps>): JSX.Element {
+export function ImageBodyView({
+    vm,
+    className,
+    containerClassName,
+    imageClassName,
+    imageRef,
+    children,
+}: Readonly<ImageBodyViewProps>): JSX.Element {
     const { translate: _t } = useI18n();
     const {
         state,
@@ -230,6 +250,8 @@ export function ImageBodyView({ vm, className, children }: Readonly<ImageBodyVie
     const hoverOrFocus = hover || focus;
 
     const rootClassName = classNames(className, styles.root);
+    const resolvedContainerClassName = classNames(containerClassName, styles.thumbnailContainer);
+    const resolvedImageClassName = classNames(imageClassName, styles.image);
 
     if (state === ImageBodyViewState.ERROR) {
         return (
@@ -281,9 +303,10 @@ export function ImageBodyView({ vm, className, children }: Readonly<ImageBodyVie
             </div>
         ) : resolvedImageSrc ? (
             <img
-                className={styles.image}
+                className={resolvedImageClassName}
                 src={resolvedImageSrc}
                 alt={alt}
+                ref={imageRef}
                 onError={vm.onImageError}
                 onLoad={vm.onImageLoad}
                 onMouseEnter={(): void => setHover(true)}
@@ -302,7 +325,7 @@ export function ImageBodyView({ vm, className, children }: Readonly<ImageBodyVie
         ) : null;
 
     let frame = (
-        <div className={styles.thumbnailContainer} style={containerStyle}>
+        <div className={resolvedContainerClassName} style={containerStyle}>
             {showPlaceholder && (
                 <div
                     className={classNames(styles.placeholder, {
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/index.tsx b/packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/index.ts
similarity index 100%
rename from packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/index.tsx
rename to packages/shared-components/src/room/timeline/event-tile/body/MImageBodyView/index.ts
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.module.css b/packages/shared-components/src/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.module.css
new file mode 100644
index 0000000000..52dcbe4dd1
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.module.css
@@ -0,0 +1,98 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+.root {
+    display: flex;
+    column-gap: 4px;
+}
+
+.measureImage {
+    display: none;
+}
+
+.thumbnailContainer {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    contain: paint;
+    border-radius: var(--MBody-border-radius);
+}
+
+.placeholder {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    background-color: var(--cpd-color-bg-canvas-default);
+}
+
+.spinner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    flex: 1;
+}
+
+.blurhash > canvas {
+    animation: blurhashPulse 1.75s infinite cubic-bezier(0.4, 0, 0.6, 1);
+}
+
+.mediaContent {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.image {
+    display: block;
+    height: 100%;
+    width: 100%;
+}
+
+.banner {
+    position: absolute;
+    bottom: 4px;
+    left: 4px;
+    padding: 4px;
+    border-radius: var(--MBody-border-radius);
+    font-size: 0.9375rem;
+    user-select: none;
+    pointer-events: none;
+    max-width: min(100%, 350px);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    background-color: rgb(0, 0, 0, 0.6);
+    color: #ffffff;
+}
+
+.gifLabel {
+    position: absolute;
+    display: block;
+    top: 0px;
+    left: 14px;
+    padding: 5px;
+    border-radius: 5px;
+    background: rgba(0, 0, 0, 0.7);
+    border: 2px solid rgba(0, 0, 0, 0.2);
+    color: #ffffff;
+    pointer-events: none;
+}
+
+@keyframes blurhashPulse {
+    0%,
+    100% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.65;
+    }
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.stories.tsx
new file mode 100644
index 0000000000..15bf8205c6
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.stories.tsx
@@ -0,0 +1,92 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type ReactNode } from "react";
+import { expect, userEvent, within } from "storybook/test";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { withViewDocs } from "../../../../../../.storybook/withViewDocs";
+import { ImageReplyBodyView, ImageReplyBodyViewPlaceholder, type ImageReplyBodyViewProps } from "./ImageReplyBodyView";
+import imageSrc from "../../../../../../static/image-body/install-spinner.png";
+
+const demoBlurhash = "LEHV6nWB2yk8pyo0adR*.7kCMdnj";
+
+type ImageReplyBodyViewWrapperProps = Omit<ImageReplyBodyViewProps, "aspectRatio"> & {
+    aspectRatio?: string;
+};
+
+const ImageReplyBodyViewWrapperImpl = (props: ImageReplyBodyViewWrapperProps): ReactNode => (
+    <ImageReplyBodyView {...props} />
+);
+
+const ImageReplyBodyViewWrapper = withViewDocs(ImageReplyBodyViewWrapperImpl, ImageReplyBodyView);
+
+const meta = {
+    title: "Timeline/Timeline Body/ImageReplyBodyView",
+    component: ImageReplyBodyViewWrapper,
+    tags: ["autodocs"],
+    args: {
+        className: "",
+        src: imageSrc,
+        thumbnailSrc: imageSrc,
+        alt: "Reply preview",
+        maxWidth: 57,
+        maxHeight: 44,
+        aspectRatio: "57 / 43.95",
+        placeholder: ImageReplyBodyViewPlaceholder.NONE,
+        blurhash: demoBlurhash,
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ maxWidth: 220 }}>
+                <Story />
+            </div>
+        ),
+    ],
+} satisfies Meta<typeof ImageReplyBodyViewWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithBanner: Story = {
+    args: {
+        bannerLabel: "image.png",
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.hover(canvas.getByRole("img", { name: "Reply preview" }));
+        await expect(canvas.findByText("image.png")).resolves.toBeInTheDocument();
+    },
+};
+
+export const LoadingWithSpinner: Story = {
+    args: {
+        placeholder: ImageReplyBodyViewPlaceholder.SPINNER,
+    },
+};
+
+export const LoadingWithBlurhash: Story = {
+    args: {
+        placeholder: ImageReplyBodyViewPlaceholder.BLURHASH,
+    },
+    // The blurhash <canvas> rasterizes to one of two ~33px-apart variants per run;
+    // tolerate that benign jitter rather than flake against the strict 3px default.
+    parameters: {
+        snapshot: {
+            failureThreshold: 100,
+        },
+    },
+};
+
+export const AnimatedPreview: Story = {
+    args: {
+        showAnimatedContentOnHover: true,
+        gifLabel: "GIF",
+    },
+};
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.test.tsx b/packages/shared-components/src/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.test.tsx
new file mode 100644
index 0000000000..74c3b5de0f
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.test.tsx
@@ -0,0 +1,164 @@
+/*
+ * Copyright 2026 Element Creations 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 { composeStories } from "@storybook/react-vite";
+import { fireEvent, render, screen } from "@test-utils";
+import React from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { ImageReplyBodyView, ImageReplyBodyViewPlaceholder } from "./ImageReplyBodyView";
+import * as stories from "./ImageReplyBodyView.stories";
+
+const { Default, WithBanner, LoadingWithSpinner, LoadingWithBlurhash, AnimatedPreview } = composeStories(stories);
+
+describe("ImageReplyBodyView", () => {
+    it.each([
+        ["default", Default],
+        ["with-banner", WithBanner],
+        ["loading-with-spinner", LoadingWithSpinner],
+        ["loading-with-blurhash", LoadingWithBlurhash],
+        ["animated-preview", AnimatedPreview],
+    ])("matches snapshot for %s story", (_name, Story) => {
+        const { container } = render(<Story />);
+
+        expect(container).toMatchSnapshot();
+    });
+
+    it("applies a custom className to the root element", () => {
+        render(
+            <ImageReplyBodyView
+                className="custom-reply-body"
+                src="https://example.org/image.png"
+                alt="Reply preview"
+                maxWidth={58}
+                maxHeight={44}
+                aspectRatio="4 / 3"
+            />,
+        );
+
+        expect(screen.getByRole("img", { name: "Reply preview" }).closest(".custom-reply-body")).not.toBeNull();
+    });
+
+    it("renders a hidden measuring image when dimensions are not known yet", () => {
+        const onImageLoad = vi.fn();
+
+        const { container } = render(
+            <ImageReplyBodyView src="https://example.org/image.png" alt="Reply preview" onImageLoad={onImageLoad} />,
+        );
+
+        const image = container.querySelector("img");
+        expect(image).toHaveAttribute("alt", "Reply preview");
+        expect(image).toHaveStyle({ display: "none" });
+
+        fireEvent.load(image!);
+        expect(onImageLoad).toHaveBeenCalledTimes(1);
+    });
+
+    it("renders an empty root when no image source is available", () => {
+        const { container } = render(<ImageReplyBodyView className="empty-reply-body" />);
+
+        expect(container.querySelector(".empty-reply-body")).not.toBeNull();
+        expect(screen.queryByRole("img")).not.toBeInTheDocument();
+    });
+
+    it("does not render the measuring image when dimensions and visible media are unavailable", () => {
+        const { container } = render(
+            <ImageReplyBodyView src="https://example.org/image.png" alt="Reply preview" showImage={false} />,
+        );
+
+        expect(container.querySelector("img")).toBeNull();
+    });
+
+    it("swaps animated preview content and overlays on hover", () => {
+        render(
+            <ImageReplyBodyView
+                src="https://example.org/full.gif"
+                thumbnailSrc="https://example.org/thumb.png"
+                alt="Animated reply preview"
+                maxWidth={58}
+                maxHeight={44}
+                aspectRatio="4 / 3"
+                showAnimatedContentOnHover
+                gifLabel="GIF"
+                bannerLabel="animated.gif"
+            />,
+        );
+
+        const image = screen.getByRole("img", { name: "Animated reply preview" });
+        expect(image).toHaveAttribute("src", "https://example.org/thumb.png");
+        expect(screen.getByText("GIF")).toBeInTheDocument();
+        expect(screen.queryByText("animated.gif")).not.toBeInTheDocument();
+
+        fireEvent.mouseEnter(image);
+        expect(image).toHaveAttribute("src", "https://example.org/full.gif");
+        expect(screen.queryByText("GIF")).not.toBeInTheDocument();
+        expect(screen.getByText("animated.gif")).toBeInTheDocument();
+
+        fireEvent.mouseLeave(image);
+        expect(image).toHaveAttribute("src", "https://example.org/thumb.png");
+        expect(screen.getByText("GIF")).toBeInTheDocument();
+        expect(screen.queryByText("animated.gif")).not.toBeInTheDocument();
+    });
+
+    it("invokes visible image load and error handlers", () => {
+        const onImageLoad = vi.fn();
+        const onImageError = vi.fn();
+
+        render(
+            <ImageReplyBodyView
+                src="https://example.org/image.png"
+                alt="Reply preview"
+                maxWidth={58}
+                maxHeight={44}
+                aspectRatio="4 / 3"
+                onImageLoad={onImageLoad}
+                onImageError={onImageError}
+            />,
+        );
+
+        const image = screen.getByRole("img", { name: "Reply preview" });
+        fireEvent.load(image);
+        fireEvent.error(image);
+
+        expect(onImageLoad).toHaveBeenCalledTimes(1);
+        expect(onImageError).toHaveBeenCalledTimes(1);
+    });
+
+    it("falls back to a spinner when the blurhash placeholder has no hash", () => {
+        render(
+            <ImageReplyBodyView
+                src="https://example.org/image.png"
+                alt="Reply preview"
+                maxWidth={58}
+                maxHeight={44}
+                aspectRatio="4 / 3"
+                placeholder={ImageReplyBodyViewPlaceholder.BLURHASH}
+            />,
+        );
+
+        expect(screen.getByRole("progressbar")).toBeInTheDocument();
+    });
+
+    it("uses explicit width sizing for SVG images", () => {
+        render(
+            <ImageReplyBodyView
+                src="https://example.org/image.svg"
+                alt="SVG reply preview"
+                maxWidth={58}
+                maxHeight={44}
+                aspectRatio="4 / 3"
+                isSvg
+            />,
+        );
+
+        expect(screen.getByRole("img", { name: "SVG reply preview" }).parentElement).toHaveStyle({
+            width: "58px",
+            maxWidth: "58px",
+            maxHeight: "44px",
+        });
+    });
+});
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.tsx b/packages/shared-components/src/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.tsx
new file mode 100644
index 0000000000..0ff18f2e48
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MImageReplyBodyView/ImageReplyBodyView.tsx
@@ -0,0 +1,229 @@
+/*
+ * Copyright 2026 Element Creations 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 classNames from "classnames";
+import React, { type CSSProperties, type JSX, type ReactEventHandler, type Ref, useState } from "react";
+import { Blurhash } from "react-blurhash";
+import { InlineSpinner } from "@vector-im/compound-web";
+
+import { useI18n } from "../../../../../core/i18n/i18nContext";
+import styles from "./ImageReplyBodyView.module.css";
+
+export const enum ImageReplyBodyViewPlaceholder {
+    NONE = "NONE",
+    SPINNER = "SPINNER",
+    BLURHASH = "BLURHASH",
+}
+
+export interface ImageReplyBodyViewProps {
+    /**
+     * CSS class names applied to the root element.
+     */
+    className?: string;
+    /**
+     * Ref to the rendered image element.
+     */
+    imageRef?: Ref<HTMLImageElement>;
+    /**
+     * Full-resolution image source.
+     */
+    src?: string;
+    /**
+     * Thumbnail/static preview image source.
+     */
+    thumbnailSrc?: string;
+    /**
+     * Image alt text.
+     */
+    alt?: string;
+    /**
+     * Maximum rendered width for the media frame.
+     */
+    maxWidth?: number;
+    /**
+     * Maximum rendered height for the media frame.
+     */
+    maxHeight?: number;
+    /**
+     * Aspect ratio reserved for the media frame.
+     */
+    aspectRatio?: CSSProperties["aspectRatio"];
+    /**
+     * Whether the displayed image is an SVG and should therefore use explicit width sizing.
+     */
+    isSvg?: boolean;
+    /**
+     * Which placeholder to render over the image frame.
+     */
+    placeholder?: ImageReplyBodyViewPlaceholder;
+    /**
+     * Blurhash string used when `placeholder` is `BLURHASH`.
+     */
+    blurhash?: string;
+    /**
+     * Whether hovering the preview should swap to the full-resolution image.
+     */
+    showAnimatedContentOnHover?: boolean;
+    /**
+     * Whether the image element should be rendered inside the reserved media frame.
+     */
+    showImage?: boolean;
+    /**
+     * Optional badge shown for animated images when not hovered.
+     */
+    gifLabel?: string;
+    /**
+     * Optional overlay banner shown while hovered.
+     */
+    bannerLabel?: string;
+    /**
+     * Invoked when the rendered image loads.
+     */
+    onImageLoad?: ReactEventHandler<HTMLImageElement>;
+    /**
+     * Invoked when the rendered image fails to load.
+     */
+    onImageError?: ReactEventHandler<HTMLImageElement>;
+}
+
+function renderPlaceholder({
+    placeholder,
+    blurhash,
+    maxWidth,
+    maxHeight,
+    loadingLabel,
+}: Pick<ImageReplyBodyViewProps, "placeholder" | "blurhash" | "maxWidth" | "maxHeight"> & {
+    loadingLabel: string;
+}): JSX.Element | null {
+    switch (placeholder) {
+        case ImageReplyBodyViewPlaceholder.BLURHASH:
+            if (!blurhash) {
+                return (
+                    <div className={styles.spinner}>
+                        <InlineSpinner size={32} aria-label={loadingLabel} role="progressbar" />
+                    </div>
+                );
+            }
+
+            return (
+                <Blurhash className={styles.blurhash} hash={blurhash} width={maxWidth ?? 58} height={maxHeight ?? 44} />
+            );
+
+        case ImageReplyBodyViewPlaceholder.SPINNER:
+            return (
+                <div className={styles.spinner}>
+                    <InlineSpinner size={32} aria-label={loadingLabel} role="progressbar" />
+                </div>
+            );
+
+        case ImageReplyBodyViewPlaceholder.NONE:
+        default:
+            return null;
+    }
+}
+
+/**
+ * Presentational wrapper for the compact image preview used inside reply tiles.
+ */
+export function ImageReplyBodyView({
+    className,
+    imageRef,
+    src,
+    thumbnailSrc,
+    alt,
+    maxWidth,
+    maxHeight,
+    aspectRatio,
+    isSvg,
+    placeholder = ImageReplyBodyViewPlaceholder.NONE,
+    blurhash,
+    showAnimatedContentOnHover,
+    showImage = true,
+    gifLabel,
+    bannerLabel,
+    onImageLoad,
+    onImageError,
+}: Readonly<ImageReplyBodyViewProps>): JSX.Element {
+    const { translate: _t } = useI18n();
+    const [hover, setHover] = useState(false);
+    const resolvedThumbnailSrc = thumbnailSrc ?? src;
+    const resolvedImageSrc = hover && showAnimatedContentOnHover && src ? src : resolvedThumbnailSrc;
+
+    if (!resolvedImageSrc) {
+        return <div className={classNames(styles.root, className)} />;
+    }
+
+    if (maxWidth === undefined || maxHeight === undefined || aspectRatio === undefined) {
+        if (!showImage) {
+            return <div className={classNames(styles.root, className)} />;
+        }
+
+        return (
+            <div className={classNames(styles.root, className)}>
+                <img
+                    className={styles.measureImage}
+                    src={resolvedImageSrc}
+                    ref={imageRef}
+                    alt={alt}
+                    onError={onImageError}
+                    onLoad={onImageLoad}
+                />
+            </div>
+        );
+    }
+
+    const containerStyle: CSSProperties = {
+        maxWidth,
+        maxHeight,
+        aspectRatio,
+    };
+    const mediaStyle: CSSProperties = isSvg
+        ? {
+              width: maxWidth,
+              maxWidth,
+              maxHeight,
+          }
+        : {
+              width: "100%",
+              height: "100%",
+              maxWidth,
+              maxHeight,
+          };
+
+    const placeholderNode = renderPlaceholder({
+        placeholder,
+        blurhash,
+        maxWidth,
+        maxHeight,
+        loadingLabel: _t("common|loading"),
+    });
+
+    return (
+        <div className={classNames(styles.root, className)}>
+            <div className={styles.thumbnailContainer} style={containerStyle}>
+                {placeholderNode && <div className={styles.placeholder}>{placeholderNode}</div>}
+
+                <div className={styles.mediaContent} style={mediaStyle}>
+                    {showImage ? (
+                        <img
+                            className={styles.image}
+                            src={resolvedImageSrc}
+                            ref={imageRef}
+                            alt={alt}
+                            onError={onImageError}
+                            onLoad={onImageLoad}
+                            onMouseEnter={(): void => setHover(true)}
+                            onMouseLeave={(): void => setHover(false)}
+                        />
+                    ) : null}
+                    {gifLabel && !hover ? <p className={styles.gifLabel}>{gifLabel}</p> : null}
+                    {bannerLabel && hover ? <span className={styles.banner}>{bannerLabel}</span> : null}
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MImageReplyBodyView/__snapshots__/ImageReplyBodyView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/body/MImageReplyBodyView/__snapshots__/ImageReplyBodyView.test.tsx.snap
new file mode 100644
index 0000000000..858f34ad2e
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MImageReplyBodyView/__snapshots__/ImageReplyBodyView.test.tsx.snap
@@ -0,0 +1,185 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ImageReplyBodyView > matches snapshot for animated-preview story 1`] = `
+<div>
+  <div
+    style="max-width: 220px;"
+  >
+    <div
+      class="ImageReplyBodyView-module_root"
+    >
+      <div
+        class="ImageReplyBodyView-module_thumbnailContainer"
+        style="max-width: 57px; max-height: 44px; aspect-ratio: 57 / 43.95;"
+      >
+        <div
+          class="ImageReplyBodyView-module_mediaContent"
+          style="width: 100%; height: 100%; max-width: 57px; max-height: 44px;"
+        >
+          <img
+            alt="Reply preview"
+            class="ImageReplyBodyView-module_image"
+            src="/static/image-body/install-spinner.png"
+          />
+          <p
+            class="ImageReplyBodyView-module_gifLabel"
+          >
+            GIF
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ImageReplyBodyView > matches snapshot for default story 1`] = `
+<div>
+  <div
+    style="max-width: 220px;"
+  >
+    <div
+      class="ImageReplyBodyView-module_root"
+    >
+      <div
+        class="ImageReplyBodyView-module_thumbnailContainer"
+        style="max-width: 57px; max-height: 44px; aspect-ratio: 57 / 43.95;"
+      >
+        <div
+          class="ImageReplyBodyView-module_mediaContent"
+          style="width: 100%; height: 100%; max-width: 57px; max-height: 44px;"
+        >
+          <img
+            alt="Reply preview"
+            class="ImageReplyBodyView-module_image"
+            src="/static/image-body/install-spinner.png"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ImageReplyBodyView > matches snapshot for loading-with-blurhash story 1`] = `
+<div>
+  <div
+    style="max-width: 220px;"
+  >
+    <div
+      class="ImageReplyBodyView-module_root"
+    >
+      <div
+        class="ImageReplyBodyView-module_thumbnailContainer"
+        style="max-width: 57px; max-height: 44px; aspect-ratio: 57 / 43.95;"
+      >
+        <div
+          class="ImageReplyBodyView-module_placeholder"
+        >
+          <div
+            class="ImageReplyBodyView-module_blurhash"
+            style="display: inline-block; height: 44px; width: 57px; position: relative;"
+          >
+            <canvas
+              height="32"
+              style="position: absolute; inset: 0px; width: 100%; height: 100%;"
+              width="32"
+            />
+          </div>
+        </div>
+        <div
+          class="ImageReplyBodyView-module_mediaContent"
+          style="width: 100%; height: 100%; max-width: 57px; max-height: 44px;"
+        >
+          <img
+            alt="Reply preview"
+            class="ImageReplyBodyView-module_image"
+            src="/static/image-body/install-spinner.png"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ImageReplyBodyView > matches snapshot for loading-with-spinner story 1`] = `
+<div>
+  <div
+    style="max-width: 220px;"
+  >
+    <div
+      class="ImageReplyBodyView-module_root"
+    >
+      <div
+        class="ImageReplyBodyView-module_thumbnailContainer"
+        style="max-width: 57px; max-height: 44px; aspect-ratio: 57 / 43.95;"
+      >
+        <div
+          class="ImageReplyBodyView-module_placeholder"
+        >
+          <div
+            class="ImageReplyBodyView-module_spinner"
+          >
+            <svg
+              aria-label="Loading…"
+              class="_icon_1855a_18"
+              fill="currentColor"
+              height="1em"
+              role="progressbar"
+              style="width: 32px; height: 32px;"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </div>
+        </div>
+        <div
+          class="ImageReplyBodyView-module_mediaContent"
+          style="width: 100%; height: 100%; max-width: 57px; max-height: 44px;"
+        >
+          <img
+            alt="Reply preview"
+            class="ImageReplyBodyView-module_image"
+            src="/static/image-body/install-spinner.png"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`ImageReplyBodyView > matches snapshot for with-banner story 1`] = `
+<div>
+  <div
+    style="max-width: 220px;"
+  >
+    <div
+      class="ImageReplyBodyView-module_root"
+    >
+      <div
+        class="ImageReplyBodyView-module_thumbnailContainer"
+        style="max-width: 57px; max-height: 44px; aspect-ratio: 57 / 43.95;"
+      >
+        <div
+          class="ImageReplyBodyView-module_mediaContent"
+          style="width: 100%; height: 100%; max-width: 57px; max-height: 44px;"
+        >
+          <img
+            alt="Reply preview"
+            class="ImageReplyBodyView-module_image"
+            src="/static/image-body/install-spinner.png"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MImageReplyBodyView/index.ts b/packages/shared-components/src/room/timeline/event-tile/body/MImageReplyBodyView/index.ts
new file mode 100644
index 0000000000..e76209c905
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MImageReplyBodyView/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+export { ImageReplyBodyView, ImageReplyBodyViewPlaceholder, type ImageReplyBodyViewProps } from "./ImageReplyBodyView";
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.module.css b/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.module.css
index 878514d7cd..2ba89040f2 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.module.css
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.module.css
@@ -4,10 +4,11 @@
 
 .container {
     overflow: hidden;
-    border-radius: var(--MBody-border-radius);
+    border-radius: 8px;
 }
 
 .video {
+    position: relative;
     display: block;
     width: 100%;
     height: 100%;
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.test.tsx b/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.test.tsx
index 69883e0739..f4d1eba2a0 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.test.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.test.tsx
@@ -112,6 +112,7 @@ describe("VideoBodyView", () => {
         );
 
         const video = screen.getByLabelText("Product demo video") as HTMLVideoElement;
+        expect(video).toHaveStyle({ position: "relative" });
         expect(video).toHaveAttribute("src", "https://example.org/demo.mp4");
         expect(video).toHaveAttribute("poster", "https://example.org/demo-poster.jpg");
         expect(video).toHaveAttribute("preload", "none");
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.tsx b/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.tsx
index 8b1fc95164..a09af81073 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/VideoBodyView.tsx
@@ -210,7 +210,6 @@ export function VideoBodyView({
         <span className={rootClassName}>
             <div className={resolvedContainerClassName} style={containerStyle} data-video-body-mask-target="">
                 {/* Captions will be supplied from app-side data once the VM wiring is in place. */}
-                {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
                 <video
                     className={styles.video}
                     ref={videoRef}
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/index.tsx b/packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/index.ts
similarity index 100%
rename from packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/index.tsx
rename to packages/shared-components/src/room/timeline/event-tile/body/MVideoBodyView/index.ts
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MediaBody/MediaBody.module.css b/packages/shared-components/src/room/timeline/event-tile/body/MediaBody/MediaBody.module.css
index 02f5810713..5ff54eb2e6 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/MediaBody/MediaBody.module.css
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MediaBody/MediaBody.module.css
@@ -6,12 +6,13 @@
  */
 
 .mediaBody {
+    color: var(--cpd-color-text-secondary);
     background-color: var(--cpd-color-bg-subtle-secondary);
-    border-radius: 12px;
+    border-radius: 8px;
     max-width: 243px; /* use max-width instead of width so it fits within right panels */
 
-    font: var(--cpd-font-body-md-regular);
-    color: var(--cpd-color-text-secondary);
-
     padding: var(--cpd-space-1-5x) var(--cpd-space-3x);
+
+    font: var(--cpd-font-body-md-regular);
+    line-height: var(--cpd-font-size-heading-md);
 }
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MediaBody/index.tsx b/packages/shared-components/src/room/timeline/event-tile/body/MediaBody/index.ts
similarity index 100%
rename from packages/shared-components/src/room/timeline/event-tile/body/MediaBody/index.tsx
rename to packages/shared-components/src/room/timeline/event-tile/body/MediaBody/index.ts
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/MjolnirBodyView.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/MjolnirBodyView.stories.tsx
index 860584cb87..90bee47272 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/MjolnirBodyView.stories.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/MjolnirBodyView.stories.tsx
@@ -18,8 +18,8 @@ type MjolnirBodyViewProps = MjolnirBodyViewSnapshot &
         className?: string;
     };
 
-const MjolnirBodyViewWrapperImpl = ({ onAllowClick, className, ...snapshot }: MjolnirBodyViewProps): JSX.Element => {
-    const vm = useMockedViewModel(snapshot, { onAllowClick });
+const MjolnirBodyViewWrapperImpl = ({ onAllow, className, ...snapshot }: MjolnirBodyViewProps): JSX.Element => {
+    const vm = useMockedViewModel(snapshot, { onAllow });
 
     return <MjolnirBodyView vm={vm} className={className} />;
 };
@@ -31,7 +31,7 @@ const meta = {
     component: MjolnirBodyViewWrapper,
     tags: ["autodocs"],
     args: {
-        onAllowClick: fn(),
+        onAllow: fn(),
         className: "",
     },
 } satisfies Meta<typeof MjolnirBodyViewWrapper>;
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/MjolnirBodyView.test.tsx b/packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/MjolnirBodyView.test.tsx
index f74b2fe112..597b97a910 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/MjolnirBodyView.test.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/MjolnirBodyView.test.tsx
@@ -25,7 +25,7 @@ const { Default } = composeStories(stories);
 class TestMjolnirBodyViewModel extends MockViewModel<MjolnirBodyViewSnapshot> implements MjolnirBodyViewActions {
     public constructor(
         snapshot: MjolnirBodyViewSnapshot,
-        public onAllowClick: MjolnirBodyViewActions["onAllowClick"],
+        public onAllow: MjolnirBodyViewActions["onAllow"],
     ) {
         super(snapshot);
     }
@@ -42,14 +42,15 @@ describe("MjolnirBodyView", () => {
 
     it("invokes the allow action", async () => {
         const user = userEvent.setup();
-        const onAllowClick = vi.fn();
-        const vm = new TestMjolnirBodyViewModel({}, onAllowClick) as MjolnirBodyViewModel;
+        const onAllow = vi.fn();
+        const vm = new TestMjolnirBodyViewModel({}, onAllow) as MjolnirBodyViewModel;
 
         render(<MjolnirBodyView vm={vm} />);
 
         await user.click(screen.getByRole("button", { name: "Show anyways." }));
 
-        expect(onAllowClick).toHaveBeenCalledTimes(1);
+        expect(onAllow).toHaveBeenCalledTimes(1);
+        expect(onAllow).toHaveBeenCalledWith();
     });
 
     it("applies a custom className to the root element", () => {
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/MjolnirBodyView.tsx b/packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/MjolnirBodyView.tsx
index b0995d5647..7a793b4926 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/MjolnirBodyView.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/MjolnirBodyView.tsx
@@ -6,7 +6,7 @@
  */
 
 import classNames from "classnames";
-import React, { type JSX, type MouseEventHandler, type Ref } from "react";
+import React, { type JSX, type Ref } from "react";
 
 import { type ViewModel, useViewModel } from "../../../../../core/viewmodel";
 import { useI18n } from "../../../../../core/i18n/i18nContext";
@@ -18,7 +18,7 @@ export interface MjolnirBodyViewActions {
     /**
      * Invoked when the user chooses to show the hidden message.
      */
-    onAllowClick: MouseEventHandler<HTMLButtonElement>;
+    onAllow: () => void;
 }
 
 export type MjolnirBodyViewModel = ViewModel<MjolnirBodyViewSnapshot, MjolnirBodyViewActions>;
@@ -53,7 +53,15 @@ export function MjolnirBodyView({ vm, className, ref }: Readonly<MjolnirBodyView
                     {},
                     {
                         a: (sub) => (
-                            <button type="button" className={styles.allowButton} onClick={vm.onAllowClick}>
+                            <button
+                                type="button"
+                                className={styles.allowButton}
+                                onClick={(event) => {
+                                    event.preventDefault();
+                                    event.stopPropagation();
+                                    vm.onAllow();
+                                }}
+                            >
                                 {sub}
                             </button>
                         ),
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/index.tsx b/packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/index.ts
similarity index 100%
rename from packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/index.tsx
rename to packages/shared-components/src/room/timeline/event-tile/body/MjolnirBodyView/index.ts
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/RedactedBodyView/index.tsx b/packages/shared-components/src/room/timeline/event-tile/body/RedactedBodyView/index.ts
similarity index 100%
rename from packages/shared-components/src/room/timeline/event-tile/body/RedactedBodyView/index.tsx
rename to packages/shared-components/src/room/timeline/event-tile/body/RedactedBodyView/index.ts
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBody.module.css b/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBody.module.css
index fe64ec04a4..61c7e55216 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBody.module.css
+++ b/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBody.module.css
@@ -46,7 +46,9 @@
     background: none;
     border: none;
     height: max-content;
-    padding: 0;
+    /* Keep the inward focus ring off the text while preserving the legacy 9px text gap. */
+    margin-inline-start: calc(9px - var(--cpd-space-0-5x));
+    padding: 0 var(--cpd-space-0-5x);
     cursor: pointer;
     font-family: inherit;
     font-weight: inherit;
@@ -85,8 +87,10 @@
     text-align: inherit;
 }
 
-.editedMarker:focus-visible,
-.bodyAction:focus-visible,
+.editedMarker:focus-visible {
+    border-radius: var(--cpd-space-0-5x);
+}
+
 .emoteSender:focus-visible {
     outline: 2px solid var(--cpd-color-border-focused);
     outline-offset: 2px;
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBodyView.tsx b/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBodyView.tsx
index e4d0c022aa..e2f11b4aff 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBodyView.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/TextualBodyView.tsx
@@ -255,14 +255,16 @@ export function TextualBodyView({
             [styles.annotatedInline]: kind === TextualBodyViewKind.EMOTE,
         });
 
+        // Reply quotes need to tweak this wrapper so long edited messages still clamp nicely.
+        // Keep this hook stable so app CSS doesn't have to reach into CSS-module class names.
         renderedBody =
             kind === TextualBodyViewKind.EMOTE ? (
-                <span dir="auto" className={annotatedClasses}>
+                <span dir="auto" className={annotatedClasses} data-textual-body-annotation-wrapper="">
                     {renderedBody}
                     {markers}
                 </span>
             ) : (
-                <div dir="auto" className={annotatedClasses}>
+                <div dir="auto" className={annotatedClasses} data-textual-body-annotation-wrapper="">
                     {renderedBody}
                     {markers}
                 </div>
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/__snapshots__/TextualBody.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/__snapshots__/TextualBody.test.tsx.snap
index e33064185f..fcbc847049 100644
--- a/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/__snapshots__/TextualBody.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/__snapshots__/TextualBody.test.tsx.snap
@@ -33,6 +33,7 @@ exports[`TextualBodyView > renders emote messages with annotations 1`] = `
      
     <span
       class="TextualBody-module_annotated TextualBody-module_annotatedInline"
+      data-textual-body-annotation-wrapper=""
       dir="auto"
     >
       <span>
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/index.tsx b/packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/index.ts
similarity index 100%
rename from packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/index.tsx
rename to packages/shared-components/src/room/timeline/event-tile/body/TextualBodyView/index.ts
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/UnknownBodyView/index.tsx b/packages/shared-components/src/room/timeline/event-tile/body/UnknownBodyView/index.ts
similarity index 100%
rename from packages/shared-components/src/room/timeline/event-tile/body/UnknownBodyView/index.tsx
rename to packages/shared-components/src/room/timeline/event-tile/body/UnknownBodyView/index.ts
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/ViewSourceEventView/ViewSourceEventView.module.css b/packages/shared-components/src/room/timeline/event-tile/body/ViewSourceEventView/ViewSourceEventView.module.css
new file mode 100644
index 0000000000..4789691b5f
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/body/ViewSourceEventView/ViewSourceEventView.module.css
@@ -0,0 +1,64 @@
+/*
+Copyright 2026 Element Creations Ltd.
+Copyright 2024 New Vector Ltd.
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+.content {
+    display: flex;
+    color: var(--cpd-color-text-secondary);
+    font-size: var(--cpd-font-size-body-xs);
+    width: 100%;
+    line-height: normal;
+}
+
+.source {
+    flex: 1;
+    overflow-inline: auto;
+}
+
+pre.source {
+    line-height: 1.2;
+    margin: 3.5px 0;
+}
+
+.toggle {
+    --ViewSourceEvent_toggle-size: 16px;
+
+    appearance: none;
+    border: 0;
+    padding: 0;
+    background: none;
+    color: var(--cpd-color-icon-accent-primary);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    visibility: hidden;
+    width: var(--ViewSourceEvent_toggle-size);
+    min-width: var(--ViewSourceEvent_toggle-size);
+    height: var(--ViewSourceEvent_toggle-size);
+}
+
+.content:hover .toggle,
+.toggle:focus-visible {
+    visibility: visible;
+}
+
+.toggle:focus-visible {
+    outline: 2px solid var(--cpd-color-border-focused);
+    outline-offset: 2px;
+    border-radius: var(--cpd-space-1x);
+}
+
+.toggle svg {
+    width: var(--ViewSourceEvent_toggle-size);
+    height: var(--ViewSourceEvent_toggle-size);
+}
+
+.expanded .toggle {
+    align-self: flex-end;
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/ViewSourceEventView/ViewSourceEventView.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/body/ViewSourceEventView/ViewSourceEventView.stories.tsx
new file mode 100644
index 0000000000..2e248660d3
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/body/ViewSourceEventView/ViewSourceEventView.stories.tsx
@@ -0,0 +1,77 @@
+/*
+Copyright 2026 Element Creations Ltd.
+Copyright 2024 New Vector Ltd.
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { type JSX } from "react";
+import { fn } from "storybook/test";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useMockedViewModel } from "../../../../../core/viewmodel";
+import { withViewDocs } from "../../../../../../.storybook/withViewDocs";
+import {
+    ViewSourceEventView,
+    type ViewSourceEventViewActions,
+    type ViewSourceEventViewSnapshot,
+} from "./ViewSourceEventView";
+
+type ViewSourceEventViewProps = ViewSourceEventViewSnapshot &
+    ViewSourceEventViewActions & {
+        className?: string;
+        expandedClassName?: string;
+    };
+
+const source = JSON.stringify(
+    {
+        type: "m.room.message",
+        sender: "@alice:example.org",
+        content: {
+            msgtype: "m.text",
+            body: "Hello",
+        },
+    },
+    null,
+    4,
+);
+
+const ViewSourceEventViewWrapperImpl = ({
+    onToggle,
+    className,
+    expandedClassName,
+    ...snapshot
+}: ViewSourceEventViewProps): JSX.Element => {
+    const vm = useMockedViewModel(snapshot, { onToggle });
+
+    return <ViewSourceEventView vm={vm} className={className} expandedClassName={expandedClassName} />;
+};
+
+const ViewSourceEventViewWrapper = withViewDocs(ViewSourceEventViewWrapperImpl, ViewSourceEventView);
+
+const meta = {
+    title: "Timeline/Timeline Event/ViewSourceEventView",
+    component: ViewSourceEventViewWrapper,
+    tags: ["autodocs"],
+    args: {
+        expanded: false,
+        preview: '{ "type": m.room.message }',
+        source,
+        onToggle: fn(),
+        className: "",
+        expandedClassName: "",
+    },
+} satisfies Meta<typeof ViewSourceEventViewWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Expanded: Story = {
+    args: {
+        expanded: true,
+    },
+};
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/ViewSourceEventView/ViewSourceEventView.test.tsx b/packages/shared-components/src/room/timeline/event-tile/body/ViewSourceEventView/ViewSourceEventView.test.tsx
new file mode 100644
index 0000000000..0b75718aa5
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/body/ViewSourceEventView/ViewSourceEventView.test.tsx
@@ -0,0 +1,107 @@
+/*
+Copyright 2026 Element Creations Ltd.
+Copyright 2024 New Vector Ltd.
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { composeStories } from "@storybook/react-vite";
+import { fireEvent, render, screen } from "@test-utils";
+import React from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { MockViewModel } from "../../../../../core/viewmodel";
+import {
+    ViewSourceEventView,
+    type ViewSourceEventViewActions,
+    type ViewSourceEventViewModel,
+    type ViewSourceEventViewSnapshot,
+} from "./ViewSourceEventView";
+import * as stories from "./ViewSourceEventView.stories";
+
+const { Default, Expanded } = composeStories(stories);
+
+class TestViewSourceEventViewModel
+    extends MockViewModel<ViewSourceEventViewSnapshot>
+    implements ViewSourceEventViewActions
+{
+    public constructor(
+        snapshot: ViewSourceEventViewSnapshot,
+        public onToggle: ViewSourceEventViewActions["onToggle"],
+    ) {
+        super(snapshot);
+    }
+}
+
+const createVm = (
+    snapshot: Partial<ViewSourceEventViewSnapshot> = {},
+    onToggle: ViewSourceEventViewActions["onToggle"] = vi.fn(),
+): ViewSourceEventViewModel =>
+    new TestViewSourceEventViewModel(
+        {
+            expanded: false,
+            preview: '{ "type": m.room.message }',
+            source: '{\n    "type": "m.room.message"\n}',
+            ...snapshot,
+        },
+        onToggle,
+    ) as ViewSourceEventViewModel;
+
+describe("ViewSourceEventView", () => {
+    const getToggleButton = (container: HTMLElement): HTMLButtonElement => {
+        const button = container.querySelector<HTMLButtonElement>('button[aria-label="toggle event"]');
+
+        if (!button) {
+            throw new Error("Expected view source toggle button to be rendered");
+        }
+
+        return button;
+    };
+
+    it("renders the default story", () => {
+        const { container } = render(<Default />);
+
+        expect(container).toMatchSnapshot();
+        expect(screen.getByText('{ "type": m.room.message }')).toBeInTheDocument();
+        expect(getToggleButton(container)).toBeInTheDocument();
+    });
+
+    it("renders the expanded story", () => {
+        const { container } = render(<Expanded />);
+
+        expect(container).toMatchSnapshot();
+        expect(screen.getByText(/"sender": "@alice:example\.org"/)).toBeInTheDocument();
+    });
+
+    it("invokes the toggle action", () => {
+        const onToggle = vi.fn();
+        const vm = createVm({}, onToggle);
+
+        const { container } = render(<ViewSourceEventView vm={vm} />);
+
+        fireEvent.click(getToggleButton(container));
+
+        expect(onToggle).toHaveBeenCalledTimes(1);
+    });
+
+    it("applies custom class names to the root element", () => {
+        const vm = createVm({ expanded: true });
+
+        const { container } = render(
+            <ViewSourceEventView vm={vm} className="custom-source" expandedClassName="custom-expanded" />,
+        );
+
+        expect(container.firstChild).toHaveClass("custom-source", "custom-expanded");
+    });
+
+    it("forwards the provided ref to the root span", () => {
+        const ref = React.createRef<HTMLSpanElement>();
+        const vm = createVm();
+
+        render(<ViewSourceEventView vm={vm} ref={ref} />);
+
+        expect(ref.current).toBeInstanceOf(HTMLSpanElement);
+    });
+});
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/ViewSourceEventView/ViewSourceEventView.tsx b/packages/shared-components/src/room/timeline/event-tile/body/ViewSourceEventView/ViewSourceEventView.tsx
new file mode 100644
index 0000000000..b0809be9d5
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/body/ViewSourceEventView/ViewSourceEventView.tsx
@@ -0,0 +1,98 @@
+/*
+Copyright 2026 Element Creations Ltd.
+Copyright 2024 New Vector Ltd.
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { type JSX, type MouseEventHandler, type Ref } from "react";
+import classNames from "classnames";
+import { CollapseIcon, ExpandIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Tooltip } from "@vector-im/compound-web";
+
+import { type ViewModel, useViewModel } from "../../../../../core/viewmodel";
+import { useI18n } from "../../../../../core/i18n/i18nContext";
+import styles from "./ViewSourceEventView.module.css";
+
+export interface ViewSourceEventViewSnapshot {
+    /**
+     * Whether the full event source is visible.
+     */
+    expanded: boolean;
+    /**
+     * Collapsed one-line event summary.
+     */
+    preview: string;
+    /**
+     * Pretty-printed event source.
+     */
+    source: string;
+}
+
+export interface ViewSourceEventViewActions {
+    /**
+     * Invoked when the user expands or collapses the event source.
+     */
+    onToggle: MouseEventHandler<HTMLButtonElement>;
+}
+
+export type ViewSourceEventViewModel = ViewModel<ViewSourceEventViewSnapshot, ViewSourceEventViewActions>;
+
+interface ViewSourceEventViewProps {
+    /**
+     * ViewModel providing the event source snapshot and actions.
+     */
+    vm: ViewSourceEventViewModel;
+    /**
+     * Optional CSS class names applied to the root element.
+     */
+    className?: string;
+    /**
+     * Optional CSS class name applied to the root element while expanded.
+     */
+    expandedClassName?: string;
+    /**
+     * Optional ref forwarded to the root element.
+     */
+    ref?: Ref<HTMLSpanElement>;
+}
+
+/**
+ * Renders a collapsible event source preview for hidden timeline events.
+ */
+export function ViewSourceEventView({
+    vm,
+    className,
+    expandedClassName,
+    ref,
+}: Readonly<ViewSourceEventViewProps>): JSX.Element {
+    const { expanded, preview, source } = useViewModel(vm);
+    const _t = useI18n().translate;
+    const toggleLabel = _t("devtools|toggle_event");
+
+    const classes = classNames(
+        styles.content,
+        className,
+        {
+            [styles.expanded]: expanded,
+        },
+        expanded && expandedClassName,
+    );
+
+    return (
+        <span className={classes} ref={ref}>
+            {expanded ? (
+                <pre className={styles.source}>{source}</pre>
+            ) : (
+                <code className={styles.source}>{preview}</code>
+            )}
+            <Tooltip description={toggleLabel} placement="top">
+                <button type="button" aria-label={toggleLabel} className={styles.toggle} onClick={vm.onToggle}>
+                    {expanded ? <CollapseIcon /> : <ExpandIcon />}
+                </button>
+            </Tooltip>
+        </span>
+    );
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/body/ViewSourceEventView/__snapshots__/ViewSourceEventView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/body/ViewSourceEventView/__snapshots__/ViewSourceEventView.test.tsx.snap
new file mode 100644
index 0000000000..79703e7c36
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/body/ViewSourceEventView/__snapshots__/ViewSourceEventView.test.tsx.snap
@@ -0,0 +1,70 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ViewSourceEventView > renders the default story 1`] = `
+<div>
+  <span
+    class="ViewSourceEventView-module_content"
+  >
+    <code
+      class="ViewSourceEventView-module_source"
+    >
+      { "type": m.room.message }
+    </code>
+    <button
+      aria-label="toggle event"
+      class="ViewSourceEventView-module_toggle"
+      type="button"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M21 3.997a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 20 3h-8a1 1 0 1 0 0 2h5.586L5 17.586V12a1 1 0 1 0-2 0v8.003a1 1 0 0 0 .29.702l.005.004c.18.18.43.291.705.291h8a1 1 0 1 0 0-2H6.414L19 6.414V12a1 1 0 1 0 2 0z"
+        />
+      </svg>
+    </button>
+  </span>
+</div>
+`;
+
+exports[`ViewSourceEventView > renders the expanded story 1`] = `
+<div>
+  <span
+    class="ViewSourceEventView-module_content ViewSourceEventView-module_expanded"
+  >
+    <pre
+      class="ViewSourceEventView-module_source"
+    >
+      {
+    "type": "m.room.message",
+    "sender": "@alice:example.org",
+    "content": {
+        "msgtype": "m.text",
+        "body": "Hello"
+    }
+}
+    </pre>
+    <button
+      aria-label="toggle event"
+      class="ViewSourceEventView-module_toggle"
+      type="button"
+    >
+      <svg
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 11.034a1 1 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0zm0 1.963a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0z"
+        />
+      </svg>
+    </button>
+  </span>
+</div>
+`;
diff --git a/apps/web/res/css/views/messages/_RoomAvatarEvent.pcss b/packages/shared-components/src/room/timeline/event-tile/body/ViewSourceEventView/index.ts
similarity index 60%
rename from apps/web/res/css/views/messages/_RoomAvatarEvent.pcss
rename to packages/shared-components/src/room/timeline/event-tile/body/ViewSourceEventView/index.ts
index 340c5a87bd..6c642b4d93 100644
--- a/apps/web/res/css/views/messages/_RoomAvatarEvent.pcss
+++ b/packages/shared-components/src/room/timeline/event-tile/body/ViewSourceEventView/index.ts
@@ -1,13 +1,10 @@
 /*
+Copyright 2026 Element Creations Ltd.
 Copyright 2024 New Vector Ltd.
-Copyright 2017 Vector Creations Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-.mx_RoomAvatarEvent_avatar {
-    display: inline;
-    position: relative;
-    top: 3px;
-}
+export * from "./ViewSourceEventView";
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/RootCallTileView.tsx b/packages/shared-components/src/room/timeline/event-tile/call/RootCallTileView.tsx
new file mode 100644
index 0000000000..0d880f9e20
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/RootCallTileView.tsx
@@ -0,0 +1,55 @@
+/*
+ * Copyright 2026 Element Creations 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 { useViewModel, type ViewModel } from "../../../../core/viewmodel";
+import { RoomOngoingCallTileView, type RoomCallStartedTileViewModel } from "./ongoing/room/RoomOngoingCallTileView";
+import { DmOngoingCallTileView, type DmOngoingCallTileViewModel } from "./ongoing/dm/DmOngoingCallTileView";
+import {
+    RoomTombstoneCallTileView,
+    type RoomTombstoneCallTileViewModel,
+} from "./tombstone/room/RoomTombstoneCallTileView";
+import { DmTombstoneCallTileView, type DmTombstoneCallTileViewModel } from "./tombstone/dm/DmTombstoneCallTileView";
+
+/**
+ * Map from tile type to view model.
+ */
+interface TileTypeToViewModelMap {
+    "ongoing-call-room": RoomCallStartedTileViewModel;
+    "ongoing-call-dm": DmOngoingCallTileViewModel;
+    "tombstone-call-room": RoomTombstoneCallTileViewModel;
+    "tombstone-call-dm": DmTombstoneCallTileViewModel;
+}
+
+export interface RootCallTileViewSnapshot<Type extends keyof TileTypeToViewModelMap = keyof TileTypeToViewModelMap> {
+    tileType: Type;
+    tileViewModel: TileTypeToViewModelMap[Type];
+}
+
+export type RootCallTileViewModel = ViewModel<RootCallTileViewSnapshot>;
+
+interface Props {
+    vm: RootCallTileViewModel;
+}
+
+/**
+ * Root view for a call tile in the timeline.
+ */
+export function RootCallTileView({ vm }: Props): React.ReactNode {
+    const { tileType, tileViewModel } = useViewModel(vm);
+    switch (tileType) {
+        case "ongoing-call-room":
+            return <RoomOngoingCallTileView vm={tileViewModel as TileTypeToViewModelMap["ongoing-call-room"]} />;
+        case "ongoing-call-dm":
+            return <DmOngoingCallTileView vm={tileViewModel as TileTypeToViewModelMap["ongoing-call-dm"]} />;
+        case "tombstone-call-room":
+            return <RoomTombstoneCallTileView vm={tileViewModel as TileTypeToViewModelMap["tombstone-call-room"]} />;
+        case "tombstone-call-dm":
+            return <DmTombstoneCallTileView vm={tileViewModel as TileTypeToViewModelMap["tombstone-call-dm"]} />;
+    }
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/common.ts b/packages/shared-components/src/room/timeline/event-tile/call/common.ts
new file mode 100644
index 0000000000..d5b25a7957
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/common.ts
@@ -0,0 +1,28 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+/**
+ * Represents whether a call is a voice call or video call.
+ */
+export const enum CallType {
+    /**
+     * This is a voice call.
+     */
+    Voice = "voice",
+    /**
+     * This is a video call.
+     */
+    Video = "video",
+}
+
+/**
+ * Whether the call is incoming or outgoing.
+ */
+export const enum CallDirection {
+    Incoming = "Incoming",
+    Outgoing = "Outgoing",
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/index.ts b/packages/shared-components/src/room/timeline/event-tile/call/index.ts
new file mode 100644
index 0000000000..5ed5bb3989
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/index.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+export * from "./tombstone/room/RoomTombstoneCallTileView";
+export * from "./tombstone/dm/DmTombstoneCallTileView";
+export type * from "./ongoing/common";
+export * from "./ongoing/room/RoomOngoingCallTileView";
+export * from "./ongoing/components/Duration/DurationView";
+export * from "./ongoing/dm/DmOngoingCallTileView";
+export * from "./RootCallTileView";
+export * from "./common";
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/ongoing/call-mocks.ts b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/call-mocks.ts
new file mode 100644
index 0000000000..1b32b6d8e0
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/call-mocks.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2026 Element Creations 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 FacePileViewSnapshot } from "../../../../../core/FacePile/FacePileView";
+import { type MemberAvatarViewSnapshot } from "../../../../../core/MemberAvatar/MemberAvatarView";
+import { MockViewModel } from "../../../../../core/viewmodel";
+
+type MockProp = { id: string; name: string; url?: string };
+
+export class MockMemberAvatarViewModel extends MockViewModel<MemberAvatarViewSnapshot> {
+    public constructor({ id, name, url }: MockProp) {
+        super({
+            id,
+            name,
+            size: "20px",
+            title: id,
+            url,
+        });
+    }
+}
+
+export class MockFacePileViewModel extends MockViewModel<FacePileViewSnapshot> {
+    public constructor(items: MockProp[]) {
+        const memberAvatarViewModels = items.slice(0, 3).map((item) => new MockMemberAvatarViewModel(item));
+        super({ memberAvatarViewModels });
+    }
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/ongoing/common.module.css b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/common.module.css
new file mode 100644
index 0000000000..0fba861e05
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/common.module.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+.title {
+    font: var(--cpd-font-body-md-semibold);
+    color: var(--cpd-color-text-primary);
+    /* This height is from the figma design */
+    min-height: 23px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 100%;
+}
+
+.content {
+    flex: 1;
+    overflow: hidden;
+    /* Width specified to allow the children to overflow and render with ellipsis */
+    min-width: 47px;
+}
+
+.avatar {
+    min-width: 20px;
+}
+
+.facepile {
+    min-width: fit-content;
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/ongoing/common.ts b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/common.ts
new file mode 100644
index 0000000000..0b5cbe3149
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/common.ts
@@ -0,0 +1,67 @@
+/*
+ * Copyright 2026 Element Creations 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 FacePileViewModel } from "../../../../../core/FacePile/FacePileView";
+import { type MemberAvatarViewModel } from "../../../../../core/MemberAvatar/MemberAvatarView";
+import { type ViewModel } from "../../../../../core/viewmodel";
+import { type CallDirection } from "../common";
+import { type DurationViewModel } from "./components/Duration/DurationView";
+
+/**
+ * This snapshot type contains state used by both RoomOngoingCallTileView and
+ * DmOngoingCallTileView.
+ */
+export interface CommonOngoingCallTileViewSnapshot {
+    /**
+     * The display name of whoever started this call.
+     */
+    startedByDisplayName: string;
+
+    /**
+     * Vm for rendering the duration of this call.
+     */
+    durationViewModel?: DurationViewModel;
+
+    /**
+     * Avatar vm for the user who started this call.
+     */
+    memberAvatarViewModel: MemberAvatarViewModel;
+
+    /**
+     * Face pile view-model for the participants on this call.
+     */
+    facePileViewModel: FacePileViewModel;
+
+    /**
+     * Whether this is an incoming or outgoing call.
+     */
+    callDirection: CallDirection;
+
+    /**
+     * Whether our user has joined this call.
+     */
+    isJoined: boolean;
+
+    /**
+     * Whether our user can join this call or not.
+     */
+    isJoinable: boolean;
+
+    /**
+     * Whether this call has participants other than who started the call.
+     */
+    callHasOtherParticipants: boolean;
+}
+
+export interface CommonOngoingCallTileViewAction {
+    /**
+     * Join this call
+     */
+    join: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export type CallStartedTileFooViewModel = ViewModel<CommonOngoingCallTileViewSnapshot>;
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/CallIcon/CallIcon.module.css b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/CallIcon/CallIcon.module.css
new file mode 100644
index 0000000000..316ca33407
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/CallIcon/CallIcon.module.css
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+.container {
+    min-width: 36px;
+    height: 36px;
+    border-radius: var(--cpd-space-2x);
+    background-color: var(--cpd-color-bg-subtle-secondary);
+}
+
+.icon {
+    color: var(--cpd-color-icon-primary);
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/CallIcon/CallIcon.tsx b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/CallIcon/CallIcon.tsx
new file mode 100644
index 0000000000..fa124e012e
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/CallIcon/CallIcon.tsx
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2026 Element Creations 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 type { CallType } from "../../../common";
+import { Flex } from "../../../../../../../core/utils/Flex";
+import styles from "./CallIcon.module.css";
+import { Icon } from "../Icon/Icon";
+
+interface Props {
+    /**
+     * The type of call.
+     */
+    callType: CallType;
+}
+
+/**
+ * Common call icon component that is used by ongoing call tiles.
+ */
+export function CallIcon(props: Props): React.ReactNode {
+    return (
+        <Flex align="center" justify="center" className={styles.container}>
+            <Icon classNames={styles.icon} callType={props.callType} height={20} width={20} />
+        </Flex>
+    );
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/Duration/DurationView.module.css b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/Duration/DurationView.module.css
new file mode 100644
index 0000000000..37a84a3f8c
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/Duration/DurationView.module.css
@@ -0,0 +1,12 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+.container {
+    font: var(--cpd-font-body-xs-regular);
+    color: var(--cpd-color-text-secondary);
+    min-width: 30px;
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/Duration/DurationView.tsx b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/Duration/DurationView.tsx
new file mode 100644
index 0000000000..b7183346e4
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/Duration/DurationView.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright 2026 Element Creations 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 classNames from "classnames";
+
+import styles from "./DurationView.module.css";
+import { useViewModel, type ViewModel } from "../../../../../../../core/viewmodel";
+import { Clock } from "../../../../../../../audio/Clock";
+
+export interface DurationViewSnapshot {
+    /**
+     * The number of seconds that this call has been ongoing for.
+     */
+    duration: number;
+}
+
+export type DurationViewModel = ViewModel<DurationViewSnapshot>;
+
+interface Props {
+    vm: DurationViewModel;
+
+    /**
+     * Additional class names for this component.
+     */
+    classNames?: string;
+}
+
+/**
+ * View to show the duration of the call.
+ */
+export function DurationView(props: Props): React.ReactNode {
+    const { duration } = useViewModel(props.vm);
+    const classes = classNames(styles.container, props.classNames);
+
+    return (
+        <div className={classes}>
+            (<Clock seconds={duration} minutesMaxLength={1} className={classes} />)
+        </div>
+    );
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/Icon/Icon.tsx b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/Icon/Icon.tsx
new file mode 100644
index 0000000000..a5b59213cb
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/Icon/Icon.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type ComponentType, type SVGAttributes } from "react";
+import { VideoCallSolidIcon, VoiceCallSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import { CallType } from "../../../common";
+
+interface Props extends SVGAttributes<SVGGElement> {
+    /**
+     * The type of this call i.e voice or video.
+     */
+    callType: CallType;
+    /**
+     * The extra class names to add to the icon.
+     */
+    classNames?: string;
+    /**
+     * Height of the icon
+     */
+    height: number;
+    /**
+     * Width of the icon
+     */
+    width: number;
+}
+
+/**
+ * Component that renders the correct svg icon based on call type.
+ */
+export const Icon: ComponentType<Props> = ({ callType, classNames, height, width, ...rest }: Props) => {
+    switch (callType) {
+        case CallType.Video:
+            return <VideoCallSolidIcon className={classNames} width={width} height={height} {...rest} />;
+        case CallType.Voice:
+            return <VoiceCallSolidIcon className={classNames} width={width} height={height} {...rest} />;
+    }
+};
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/JoinButton/JoinButton.tsx b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/JoinButton/JoinButton.tsx
new file mode 100644
index 0000000000..05aa637cf6
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/JoinButton/JoinButton.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2026 Element Creations 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 { Button } from "@vector-im/compound-web";
+import React, { type ComponentProps, type SVGAttributes } from "react";
+
+import { Icon } from "../Icon/Icon";
+import type { CallType } from "../../../common";
+import { useI18n } from "../../../../../../../core/i18n/i18nContext";
+
+interface Props extends ComponentProps<typeof Button> {
+    join: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    callType: CallType;
+}
+
+function withIcon(callType: CallType) {
+    return function ButtonIcon(props: SVGAttributes<SVGGElement>) {
+        return <Icon callType={callType} {...props} height={20} width={20} />;
+    };
+}
+
+/**
+ * Join button used by all ongoing call tiles.
+ */
+export function JoinButton({ join, callType, ...rest }: Props): React.ReactNode {
+    const { translate: _t } = useI18n();
+    return (
+        <Button onClick={join} Icon={withIcon(callType)} size="md" {...rest}>
+            {_t("timeline|call_tile|ongoing|common|join_button")}
+        </Button>
+    );
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/TileContainer/TileContainer.module.css b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/TileContainer/TileContainer.module.css
new file mode 100644
index 0000000000..bad1b36547
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/TileContainer/TileContainer.module.css
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+.container {
+    min-height: 70px;
+    padding: var(--cpd-space-3x);
+    border: solid 1px var(--cpd-color-border-interactive-primary);
+    border-radius: var(--cpd-space-2x);
+    box-sizing: border-box;
+    width: 100%;
+    /* All call tiles have a 10px margin at the top and bottom */
+    margin: 10px 0;
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/TileContainer/TileContainer.tsx b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/TileContainer/TileContainer.tsx
new file mode 100644
index 0000000000..3b2a968100
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/components/TileContainer/TileContainer.tsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright 2026 Element Creations 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 styles from "./TileContainer.module.css";
+import { Flex } from "../../../../../../../core/utils/Flex";
+
+/**
+ * Common container inside which all ongoing call tiles render.
+ */
+export function TileContainer({ children }: React.PropsWithChildren): React.ReactNode {
+    return (
+        <Flex direction="row" align="center" className={styles.container}>
+            {children}
+        </Flex>
+    );
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.stories.tsx
new file mode 100644
index 0000000000..0aee39a93b
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.stories.tsx
@@ -0,0 +1,118 @@
+/*
+ * Copyright 2026 Element Creations 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 type { Meta, StoryObj } from "@storybook/react-vite";
+import { type DmOngoingCallTileViewSnapshot, DmOngoingCallTileView } from "./DmOngoingCallTileView";
+import { MockViewModel, useMockedViewModel } from "../../../../../../core/viewmodel";
+import { withViewDocs } from "../../../../../../../.storybook/withViewDocs";
+import { type CommonOngoingCallTileViewAction } from "../common";
+import { CallDirection, CallType } from "../../common";
+import profileLink1 from "../../../../../../../static/profile-pics/profile1.png";
+import profileLink2 from "../../../../../../../static/profile-pics/profile2.png";
+import { MockFacePileViewModel, MockMemberAvatarViewModel } from "../call-mocks";
+
+const DmOngoingCallTileViewWrapperImpl = ({
+    join,
+    ...rest
+}: DmOngoingCallTileViewSnapshot & CommonOngoingCallTileViewAction): React.ReactNode => {
+    const vm = useMockedViewModel(rest, { join });
+    return <DmOngoingCallTileView vm={vm} />;
+};
+
+const DmOngoingCallTileViewWrapper = withViewDocs(DmOngoingCallTileViewWrapperImpl, DmOngoingCallTileView);
+
+const meta = {
+    title: "Timeline/Timeline Event/Call/Ongoing/DmOngoingCallTileView",
+    component: DmOngoingCallTileViewWrapper,
+    tags: ["autodocs"],
+    argTypes: {
+        callDirection: {
+            options: [CallDirection.Incoming, CallDirection.Outgoing],
+            control: { type: "radio" },
+        },
+        callType: {
+            options: [CallType.Voice, CallType.Video],
+            control: { type: "radio" },
+        },
+    },
+    args: {
+        callDirection: CallDirection.Incoming,
+        startedByDisplayName: "Bob",
+        durationViewModel: new MockViewModel({ duration: 100 }),
+        isJoinable: true,
+        isJoined: false,
+        join: () => {},
+        memberAvatarViewModel: new MockMemberAvatarViewModel({ id: "@bob:m.org", name: "Bob", url: profileLink1 }),
+        facePileViewModel: new MockFacePileViewModel([
+            { id: "@bob:m.org", name: "Bob", url: profileLink1 },
+            { id: "@riley:m.org", name: "Riley", url: profileLink2 },
+        ]),
+        callType: CallType.Voice,
+        callHasOtherParticipants: false,
+    },
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?node-id=11217-3901&t=OvT1LOc5wH4kXt0a-4",
+        },
+        visOptions: {
+            mask: [".duration"],
+        },
+    },
+} satisfies Meta<typeof DmOngoingCallTileViewWrapper>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const IncomingVoiceCall: Story = {
+    args: {
+        callDirection: CallDirection.Incoming,
+        callType: CallType.Voice,
+    },
+};
+
+export const IncomingVideoCall: Story = {
+    args: {
+        callDirection: CallDirection.Incoming,
+        callType: CallType.Video,
+    },
+};
+
+export const OutgoingVoiceCall: Story = {
+    args: {
+        callDirection: CallDirection.Outgoing,
+        callType: CallType.Voice,
+    },
+};
+
+export const OutgoingVideoCall: Story = {
+    args: {
+        callDirection: CallDirection.Outgoing,
+        callType: CallType.Video,
+    },
+};
+
+export const VoiceCallInProgress: Story = {
+    args: {
+        callType: CallType.Voice,
+        isJoined: true,
+        callHasOtherParticipants: true,
+    },
+};
+
+export const VideoCallInProgress: Story = {
+    args: {
+        callType: CallType.Video,
+        isJoined: true,
+        callHasOtherParticipants: true,
+    },
+};
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.test.tsx b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.test.tsx
new file mode 100644
index 0000000000..e98e298fef
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.test.tsx
@@ -0,0 +1,56 @@
+/*
+ * Copyright 2026 Element Creations 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 { composeStories } from "@storybook/react-vite";
+import { describe, expect, it } from "vitest";
+import React from "react";
+import { render } from "@test-utils";
+
+import * as Stories from "./DmOngoingCallTileView.stories";
+
+const {
+    IncomingVideoCall,
+    IncomingVoiceCall,
+    OutgoingVideoCall,
+    OutgoingVoiceCall,
+    VideoCallInProgress,
+    VoiceCallInProgress,
+} = composeStories(Stories);
+
+describe("DmOngoingCallTileView", () => {
+    describe("renders the tile", () => {
+        it("IncomingVideoCall", () => {
+            const { container } = render(<IncomingVideoCall />);
+            expect(container).toMatchSnapshot();
+        });
+
+        it("IncomingVoiceCall", () => {
+            const { container } = render(<IncomingVoiceCall />);
+            expect(container).toMatchSnapshot();
+        });
+
+        it("OutgoingVideoCall", () => {
+            const { container } = render(<OutgoingVideoCall />);
+            expect(container).toMatchSnapshot();
+        });
+
+        it("OutgoingVoiceCall", () => {
+            const { container } = render(<OutgoingVoiceCall />);
+            expect(container).toMatchSnapshot();
+        });
+
+        it("VoiceCallInProgress", () => {
+            const { container } = render(<VoiceCallInProgress />);
+            expect(container).toMatchSnapshot();
+        });
+
+        it("VideoCallInProgress", () => {
+            const { container } = render(<VideoCallInProgress />);
+            expect(container).toMatchSnapshot();
+        });
+    });
+});
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.tsx b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.tsx
new file mode 100644
index 0000000000..ffb8ddaa01
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/dm/DmOngoingCallTileView.tsx
@@ -0,0 +1,97 @@
+/*
+ * Copyright 2026 Element Creations 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 { useViewModel, type ViewModel } from "../../../../../../core/viewmodel";
+import { TileContainer } from "../components/TileContainer/TileContainer";
+import { CallIcon } from "../components/CallIcon/CallIcon";
+import { CallDirection, type CallType } from "../../common";
+import { Flex } from "../../../../../../core/utils/Flex";
+import commonStyles from "../common.module.css";
+import { JoinButton } from "../components/JoinButton/JoinButton";
+import { DurationView } from "../components/Duration/DurationView";
+import { MemberAvatarView } from "../../../../../../core/MemberAvatar/MemberAvatarView";
+import { type CommonOngoingCallTileViewSnapshot, type CommonOngoingCallTileViewAction } from "../common";
+import { FacePileView } from "../../../../../../core/FacePile/FacePileView";
+import { useI18n } from "../../../../../../core/i18n/i18nContext";
+
+export interface DmOngoingCallTileViewSnapshot extends CommonOngoingCallTileViewSnapshot {
+    callType: CallType;
+}
+
+export type DmOngoingCallTileViewModel = ViewModel<DmOngoingCallTileViewSnapshot> & CommonOngoingCallTileViewAction;
+
+interface Props {
+    vm: DmOngoingCallTileViewModel;
+}
+
+/**
+ * View that renders the tile content for an ongoing call in a DM.
+ */
+export function DmOngoingCallTileView(props: Props): React.ReactNode {
+    const snapshot = useViewModel(props.vm);
+    const { callType, callDirection, isJoinable, isJoined, durationViewModel } = snapshot;
+    let content: React.ReactNode;
+    if (snapshot.callHasOtherParticipants) {
+        content = <CallJoinedContent snapshot={snapshot} />;
+    } else if (callDirection === CallDirection.Incoming) {
+        content = <IncomingCallContent snapshot={snapshot} />;
+    } else {
+        content = <OutgoingCallContent snapshot={snapshot} />;
+    }
+    return (
+        <TileContainer>
+            <Flex align="center" gap="var(--cpd-space-3x)" className={commonStyles.content}>
+                <CallIcon callType={callType} />
+                <Flex gap="6px" align="center" className={commonStyles.content}>
+                    {content}
+                </Flex>
+                <Flex align="center" gap="var(--cpd-space-3x)" wrap="wrap-reverse">
+                    {durationViewModel && <DurationView classNames="duration" vm={durationViewModel} />}
+                    {!isJoined && (
+                        <JoinButton disabled={!isJoinable} callType={callType} join={(ev) => props.vm.join(ev)} />
+                    )}
+                </Flex>
+            </Flex>
+        </TileContainer>
+    );
+}
+
+function IncomingCallContent({ snapshot }: { snapshot: DmOngoingCallTileViewSnapshot }): React.ReactNode {
+    const { translate: _t } = useI18n();
+    return (
+        <>
+            <MemberAvatarView classNames={commonStyles.avatar} vm={snapshot.memberAvatarViewModel} />
+            <div className={commonStyles.title}>
+                {_t("timeline|call_tile|ongoing|common|call_started_by", {
+                    startedByDisplayName: snapshot.startedByDisplayName,
+                })}
+            </div>
+        </>
+    );
+}
+
+function OutgoingCallContent({ snapshot }: { snapshot: DmOngoingCallTileViewSnapshot }): React.ReactNode {
+    const { translate: _t } = useI18n();
+    return (
+        <>
+            <MemberAvatarView classNames={commonStyles.avatar} vm={snapshot.memberAvatarViewModel} />
+            <div className={commonStyles.title}>{_t("timeline|call_tile|ongoing|dm|call_started")}</div>
+        </>
+    );
+}
+
+function CallJoinedContent({ snapshot }: { snapshot: DmOngoingCallTileViewSnapshot }): React.ReactNode {
+    const { translate: _t } = useI18n();
+    return (
+        <>
+            <FacePileView classNames={commonStyles.facepile} vm={snapshot.facePileViewModel} />
+            <div className={commonStyles.title}>{_t("timeline|call_tile|ongoing|dm|title")}</div>
+        </>
+    );
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/ongoing/dm/__snapshots__/DmOngoingCallTileView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/dm/__snapshots__/DmOngoingCallTileView.test.tsx.snap
new file mode 100644
index 0000000000..17735a29a7
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/dm/__snapshots__/DmOngoingCallTileView.test.tsx.snap
@@ -0,0 +1,603 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DmOngoingCallTileView > renders the tile > IncomingVideoCall 1`] = `
+<div>
+  <div
+    class="Flex-module_flex TileContainer-module_container"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+  >
+    <div
+      class="Flex-module_flex common-module_content"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+    >
+      <div
+        class="Flex-module_flex CallIcon-module_container"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+      >
+        <svg
+          class="CallIcon-module_icon"
+          fill="currentColor"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
+          />
+        </svg>
+      </div>
+      <div
+        class="Flex-module_flex common-module_content"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 6px; --mx-flex-wrap: nowrap;"
+      >
+        <span
+          aria-label="@bob:m.org"
+          class="_avatar_va14e_8 common-module_avatar"
+          data-color="1"
+          data-type="round"
+          role="img"
+          style="--cpd-avatar-size: 20px;"
+        >
+          <img
+            alt=""
+            class="_image_va14e_43"
+            data-type="round"
+            height="20px"
+            loading="lazy"
+            referrerpolicy="no-referrer"
+            src="/static/profile-pics/profile1.png"
+            width="20px"
+          />
+        </span>
+        <div
+          class="common-module_title"
+        >
+          Bob started a call
+        </div>
+      </div>
+      <div
+        class="Flex-module_flex"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: wrap-reverse;"
+      >
+        <div
+          class="DurationView-module_container duration"
+        >
+          (
+          <time
+            class="mx_Clock DurationView-module_container duration"
+            datetime="PT1M40S"
+          >
+            1:40
+          </time>
+          )
+        </div>
+        <button
+          aria-disabled="false"
+          class="_button_1nw83_8 _has-icon_1nw83_60"
+          data-kind="primary"
+          data-size="md"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
+            />
+          </svg>
+          Join
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DmOngoingCallTileView > renders the tile > IncomingVoiceCall 1`] = `
+<div>
+  <div
+    class="Flex-module_flex TileContainer-module_container"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+  >
+    <div
+      class="Flex-module_flex common-module_content"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+    >
+      <div
+        class="Flex-module_flex CallIcon-module_container"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+      >
+        <svg
+          class="CallIcon-module_icon"
+          fill="currentColor"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
+          />
+        </svg>
+      </div>
+      <div
+        class="Flex-module_flex common-module_content"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 6px; --mx-flex-wrap: nowrap;"
+      >
+        <span
+          aria-label="@bob:m.org"
+          class="_avatar_va14e_8 common-module_avatar"
+          data-color="1"
+          data-type="round"
+          role="img"
+          style="--cpd-avatar-size: 20px;"
+        >
+          <img
+            alt=""
+            class="_image_va14e_43"
+            data-type="round"
+            height="20px"
+            loading="lazy"
+            referrerpolicy="no-referrer"
+            src="/static/profile-pics/profile1.png"
+            width="20px"
+          />
+        </span>
+        <div
+          class="common-module_title"
+        >
+          Bob started a call
+        </div>
+      </div>
+      <div
+        class="Flex-module_flex"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: wrap-reverse;"
+      >
+        <div
+          class="DurationView-module_container duration"
+        >
+          (
+          <time
+            class="mx_Clock DurationView-module_container duration"
+            datetime="PT1M40S"
+          >
+            1:40
+          </time>
+          )
+        </div>
+        <button
+          aria-disabled="false"
+          class="_button_1nw83_8 _has-icon_1nw83_60"
+          data-kind="primary"
+          data-size="md"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
+            />
+          </svg>
+          Join
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DmOngoingCallTileView > renders the tile > OutgoingVideoCall 1`] = `
+<div>
+  <div
+    class="Flex-module_flex TileContainer-module_container"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+  >
+    <div
+      class="Flex-module_flex common-module_content"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+    >
+      <div
+        class="Flex-module_flex CallIcon-module_container"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+      >
+        <svg
+          class="CallIcon-module_icon"
+          fill="currentColor"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
+          />
+        </svg>
+      </div>
+      <div
+        class="Flex-module_flex common-module_content"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 6px; --mx-flex-wrap: nowrap;"
+      >
+        <span
+          aria-label="@bob:m.org"
+          class="_avatar_va14e_8 common-module_avatar"
+          data-color="1"
+          data-type="round"
+          role="img"
+          style="--cpd-avatar-size: 20px;"
+        >
+          <img
+            alt=""
+            class="_image_va14e_43"
+            data-type="round"
+            height="20px"
+            loading="lazy"
+            referrerpolicy="no-referrer"
+            src="/static/profile-pics/profile1.png"
+            width="20px"
+          />
+        </span>
+        <div
+          class="common-module_title"
+        >
+          Call started
+        </div>
+      </div>
+      <div
+        class="Flex-module_flex"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: wrap-reverse;"
+      >
+        <div
+          class="DurationView-module_container duration"
+        >
+          (
+          <time
+            class="mx_Clock DurationView-module_container duration"
+            datetime="PT1M40S"
+          >
+            1:40
+          </time>
+          )
+        </div>
+        <button
+          aria-disabled="false"
+          class="_button_1nw83_8 _has-icon_1nw83_60"
+          data-kind="primary"
+          data-size="md"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
+            />
+          </svg>
+          Join
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DmOngoingCallTileView > renders the tile > OutgoingVoiceCall 1`] = `
+<div>
+  <div
+    class="Flex-module_flex TileContainer-module_container"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+  >
+    <div
+      class="Flex-module_flex common-module_content"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+    >
+      <div
+        class="Flex-module_flex CallIcon-module_container"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+      >
+        <svg
+          class="CallIcon-module_icon"
+          fill="currentColor"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
+          />
+        </svg>
+      </div>
+      <div
+        class="Flex-module_flex common-module_content"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 6px; --mx-flex-wrap: nowrap;"
+      >
+        <span
+          aria-label="@bob:m.org"
+          class="_avatar_va14e_8 common-module_avatar"
+          data-color="1"
+          data-type="round"
+          role="img"
+          style="--cpd-avatar-size: 20px;"
+        >
+          <img
+            alt=""
+            class="_image_va14e_43"
+            data-type="round"
+            height="20px"
+            loading="lazy"
+            referrerpolicy="no-referrer"
+            src="/static/profile-pics/profile1.png"
+            width="20px"
+          />
+        </span>
+        <div
+          class="common-module_title"
+        >
+          Call started
+        </div>
+      </div>
+      <div
+        class="Flex-module_flex"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: wrap-reverse;"
+      >
+        <div
+          class="DurationView-module_container duration"
+        >
+          (
+          <time
+            class="mx_Clock DurationView-module_container duration"
+            datetime="PT1M40S"
+          >
+            1:40
+          </time>
+          )
+        </div>
+        <button
+          aria-disabled="false"
+          class="_button_1nw83_8 _has-icon_1nw83_60"
+          data-kind="primary"
+          data-size="md"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
+            />
+          </svg>
+          Join
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DmOngoingCallTileView > renders the tile > VideoCallInProgress 1`] = `
+<div>
+  <div
+    class="Flex-module_flex TileContainer-module_container"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+  >
+    <div
+      class="Flex-module_flex common-module_content"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+    >
+      <div
+        class="Flex-module_flex CallIcon-module_container"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+      >
+        <svg
+          class="CallIcon-module_icon"
+          fill="currentColor"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
+          />
+        </svg>
+      </div>
+      <div
+        class="Flex-module_flex common-module_content"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 6px; --mx-flex-wrap: nowrap;"
+      >
+        <div
+          class="_stacked-avatars_va14e_109 common-module_facepile"
+        >
+          <span
+            aria-label="@bob:m.org"
+            class="_avatar_va14e_8"
+            data-color="1"
+            data-type="round"
+            role="img"
+            style="--cpd-avatar-size: 20px;"
+          >
+            <img
+              alt=""
+              class="_image_va14e_43"
+              data-type="round"
+              height="20px"
+              loading="lazy"
+              referrerpolicy="no-referrer"
+              src="/static/profile-pics/profile1.png"
+              width="20px"
+            />
+          </span>
+          <span
+            aria-label="@riley:m.org"
+            class="_avatar_va14e_8"
+            data-color="3"
+            data-type="round"
+            role="img"
+            style="--cpd-avatar-size: 20px;"
+          >
+            <img
+              alt=""
+              class="_image_va14e_43"
+              data-type="round"
+              height="20px"
+              loading="lazy"
+              referrerpolicy="no-referrer"
+              src="/static/profile-pics/profile2.png"
+              width="20px"
+            />
+          </span>
+        </div>
+        <div
+          class="common-module_title"
+        >
+          Call in progress
+        </div>
+      </div>
+      <div
+        class="Flex-module_flex"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: wrap-reverse;"
+      >
+        <div
+          class="DurationView-module_container duration"
+        >
+          (
+          <time
+            class="mx_Clock DurationView-module_container duration"
+            datetime="PT1M40S"
+          >
+            1:40
+          </time>
+          )
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DmOngoingCallTileView > renders the tile > VoiceCallInProgress 1`] = `
+<div>
+  <div
+    class="Flex-module_flex TileContainer-module_container"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+  >
+    <div
+      class="Flex-module_flex common-module_content"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+    >
+      <div
+        class="Flex-module_flex CallIcon-module_container"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+      >
+        <svg
+          class="CallIcon-module_icon"
+          fill="currentColor"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
+          />
+        </svg>
+      </div>
+      <div
+        class="Flex-module_flex common-module_content"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 6px; --mx-flex-wrap: nowrap;"
+      >
+        <div
+          class="_stacked-avatars_va14e_109 common-module_facepile"
+        >
+          <span
+            aria-label="@bob:m.org"
+            class="_avatar_va14e_8"
+            data-color="1"
+            data-type="round"
+            role="img"
+            style="--cpd-avatar-size: 20px;"
+          >
+            <img
+              alt=""
+              class="_image_va14e_43"
+              data-type="round"
+              height="20px"
+              loading="lazy"
+              referrerpolicy="no-referrer"
+              src="/static/profile-pics/profile1.png"
+              width="20px"
+            />
+          </span>
+          <span
+            aria-label="@riley:m.org"
+            class="_avatar_va14e_8"
+            data-color="3"
+            data-type="round"
+            role="img"
+            style="--cpd-avatar-size: 20px;"
+          >
+            <img
+              alt=""
+              class="_image_va14e_43"
+              data-type="round"
+              height="20px"
+              loading="lazy"
+              referrerpolicy="no-referrer"
+              src="/static/profile-pics/profile2.png"
+              width="20px"
+            />
+          </span>
+        </div>
+        <div
+          class="common-module_title"
+        >
+          Call in progress
+        </div>
+      </div>
+      <div
+        class="Flex-module_flex"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: wrap-reverse;"
+      >
+        <div
+          class="DurationView-module_container duration"
+        >
+          (
+          <time
+            class="mx_Clock DurationView-module_container duration"
+            datetime="PT1M40S"
+          >
+            1:40
+          </time>
+          )
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.module.css b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.module.css
new file mode 100644
index 0000000000..7c98a0efbb
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.module.css
@@ -0,0 +1,20 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+.subContainer {
+    /* This height is from the figma design */
+    min-height: 23px;
+    width: 100%;
+    font: var(--cpd-font-body-md-regular);
+    color: var(--cpd-color-text-secondary);
+}
+
+.startedTextContainer {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.stories.tsx
new file mode 100644
index 0000000000..83ecbb7ef5
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.stories.tsx
@@ -0,0 +1,97 @@
+/*
+ * Copyright 2026 Element Creations 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 type { Meta, StoryObj } from "@storybook/react-vite";
+import { type RoomOngoingCallTileViewSnapshot, RoomOngoingCallTileView } from "./RoomOngoingCallTileView";
+import { MockViewModel, useMockedViewModel } from "../../../../../../core/viewmodel";
+import { withViewDocs } from "../../../../../../../.storybook/withViewDocs";
+import { type CommonOngoingCallTileViewAction } from "../common";
+import { CallDirection } from "../../common";
+import profileLink1 from "../../../../../../../static/profile-pics/profile1.png";
+import profileLink2 from "../../../../../../../static/profile-pics/profile2.png";
+import profileLink3 from "../../../../../../../static/profile-pics/profile3.png";
+import { MockFacePileViewModel, MockMemberAvatarViewModel } from "../call-mocks";
+
+const RoomOngoingCallTileViewWrapperImpl = ({
+    join,
+    ...rest
+}: RoomOngoingCallTileViewSnapshot & CommonOngoingCallTileViewAction): React.ReactNode => {
+    const vm = useMockedViewModel(rest, { join });
+    return <RoomOngoingCallTileView vm={vm} />;
+};
+
+const RoomOngoingCallTileViewWrapper = withViewDocs(RoomOngoingCallTileViewWrapperImpl, RoomOngoingCallTileView);
+
+const meta = {
+    title: "Timeline/Timeline Event/Call/Ongoing/RoomOngoingCallTileView",
+    component: RoomOngoingCallTileViewWrapper,
+    tags: ["autodocs"],
+    argTypes: {
+        callDirection: {
+            options: [CallDirection.Incoming, CallDirection.Outgoing],
+            control: { type: "radio" },
+        },
+        isCallIgnored: {
+            control: { type: "boolean" },
+        },
+    },
+    args: {
+        callDirection: CallDirection.Incoming,
+        startedByDisplayName: "Bob",
+        durationViewModel: new MockViewModel({ duration: 100 }),
+        isCallIgnored: false,
+        totalParticipants: 8,
+        callHasOtherParticipants: true,
+        isJoinable: true,
+        isJoined: false,
+        join: () => {},
+        memberAvatarViewModel: new MockMemberAvatarViewModel({ id: "@bob:m.org", name: "Bob", url: profileLink1 }),
+        facePileViewModel: new MockFacePileViewModel([
+            { id: "@bob:m.org", name: "Bob", url: profileLink1 },
+            { id: "@riley:m.org", name: "Riley", url: profileLink2 },
+            { id: "@andi:m.org", name: "Andi", url: profileLink3 },
+            { id: "@foo1:m.org", name: "Foo 1" },
+            { id: "@foo2:m.org", name: "Foo 2" },
+            { id: "@foo3:m.org", name: "Foo 3" },
+            { id: "@foo4:m.org", name: "Foo 4" },
+            { id: "@foo5:m.org", name: "Foo 5" },
+        ]),
+    },
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?node-id=11217-3901&t=OvT1LOc5wH4kXt0a-4",
+        },
+    },
+} satisfies Meta<typeof RoomOngoingCallTileViewWrapper>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const RoomCallWithoutOtherParticipants: Story = {
+    args: {
+        callHasOtherParticipants: false,
+        totalParticipants: 1,
+    },
+};
+
+export const RoomCallIgnored: Story = {
+    args: {
+        isCallIgnored: true,
+    },
+};
+
+export const RoomCallJoined: Story = {
+    args: {
+        isJoined: true,
+    },
+};
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.test.tsx b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.test.tsx
new file mode 100644
index 0000000000..9359c4c0bc
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.test.tsx
@@ -0,0 +1,34 @@
+/*
+ * Copyright 2026 Element Creations 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 { composeStories } from "@storybook/react-vite";
+import { describe, expect, it } from "vitest";
+import React from "react";
+import { render } from "@test-utils";
+
+import * as Stories from "./RoomOngoingCallTileView.stories";
+
+const { RoomCallIgnored, RoomCallJoined, RoomCallWithoutOtherParticipants } = composeStories(Stories);
+
+describe("RoomOngoingCallTileView", () => {
+    describe("renders the tile", () => {
+        it("RoomCallIgnored", () => {
+            const { container } = render(<RoomCallIgnored />);
+            expect(container).toMatchSnapshot();
+        });
+
+        it("RoomCallJoined", () => {
+            const { container } = render(<RoomCallJoined />);
+            expect(container).toMatchSnapshot();
+        });
+
+        it("RoomCallWithoutOtherParticipants", () => {
+            const { container } = render(<RoomCallWithoutOtherParticipants />);
+            expect(container).toMatchSnapshot();
+        });
+    });
+});
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.tsx b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.tsx
new file mode 100644
index 0000000000..4f7ea61d71
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/room/RoomOngoingCallTileView.tsx
@@ -0,0 +1,108 @@
+/*
+ * Copyright 2026 Element Creations 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 { useViewModel, type ViewModel } from "../../../../../../core/viewmodel";
+import { TileContainer } from "../components/TileContainer/TileContainer";
+import { CallIcon } from "../components/CallIcon/CallIcon";
+import { CallType } from "../../common";
+import { Flex } from "../../../../../../core/utils/Flex";
+import commonStyles from "../common.module.css";
+import styles from "./RoomOngoingCallTileView.module.css";
+import { JoinButton } from "../components/JoinButton/JoinButton";
+import { DurationView } from "../components/Duration/DurationView";
+import { MemberAvatarView } from "../../../../../../core/MemberAvatar/MemberAvatarView";
+import { FacePileView } from "../../../../../../core/FacePile/FacePileView";
+import type { CommonOngoingCallTileViewAction, CommonOngoingCallTileViewSnapshot } from "../common";
+import { useI18n } from "../../../../../../core/i18n/i18nContext";
+
+export interface RoomOngoingCallTileViewSnapshot extends CommonOngoingCallTileViewSnapshot {
+    /**
+     * The total number of participants in this call.
+     */
+    totalParticipants: number;
+
+    /**
+     * Whether the user ignored this call.
+     */
+    isCallIgnored?: boolean;
+}
+
+export type RoomCallStartedTileViewModel = ViewModel<RoomOngoingCallTileViewSnapshot> & CommonOngoingCallTileViewAction;
+
+interface Props {
+    vm: RoomCallStartedTileViewModel;
+}
+
+/**
+ * View that renders the tile content for an ongoing call in a room.
+ */
+export function RoomOngoingCallTileView(props: Props): React.ReactNode {
+    const snapshot = useViewModel(props.vm);
+    const { isJoinable, isJoined, isCallIgnored, callHasOtherParticipants, durationViewModel } = snapshot;
+    const { translate: _t } = useI18n();
+    return (
+        <TileContainer>
+            <Flex align="center" gap="var(--cpd-space-3x)" className={commonStyles.content}>
+                <CallIcon callType={CallType.Video} />
+                <Flex direction="column" className={commonStyles.content}>
+                    <div className={commonStyles.title}>{_t("timeline|call_tile|ongoing|room|title")}</div>
+
+                    {callHasOtherParticipants || isCallIgnored ? (
+                        <CallJoinedOrIgnoredContent snapshot={snapshot} />
+                    ) : (
+                        <CallStartedContent snapshot={snapshot} />
+                    )}
+                </Flex>
+                <Flex align="center" gap="var(--cpd-space-3x)" wrap="wrap-reverse">
+                    {durationViewModel && <DurationView classNames="duration" vm={durationViewModel} />}
+                    {!isJoined && (
+                        <JoinButton
+                            callType={CallType.Video}
+                            disabled={!isJoinable}
+                            join={(event) => {
+                                props.vm.join(event);
+                            }}
+                        />
+                    )}
+                </Flex>
+            </Flex>
+        </TileContainer>
+    );
+}
+
+/**
+ * This is the content of the tile when the call has participants other than who started the call or
+ * the call was ignored (by clicking decline button on the toast).
+ */
+function CallJoinedOrIgnoredContent({ snapshot }: { snapshot: RoomOngoingCallTileViewSnapshot }): React.ReactNode {
+    const { facePileViewModel, totalParticipants: count } = snapshot;
+    const { translate: _t } = useI18n();
+    return (
+        <Flex className={styles.subContainer} gap="6px" align="center">
+            <FacePileView classNames={commonStyles.facepile} vm={facePileViewModel} />
+            {_t("timeline|call_tile|ongoing|room|join_count", { count })}
+        </Flex>
+    );
+}
+
+/**
+ * This is the content of the tile when the call has just started.
+ */
+function CallStartedContent({ snapshot }: { snapshot: RoomOngoingCallTileViewSnapshot }): React.ReactNode {
+    const { memberAvatarViewModel, startedByDisplayName } = snapshot;
+    const { translate: _t } = useI18n();
+    return (
+        <Flex className={styles.subContainer} gap="6px" align="center">
+            <MemberAvatarView classNames={commonStyles.avatar} vm={memberAvatarViewModel} />
+            <div className={styles.startedTextContainer}>
+                {_t("timeline|call_tile|ongoing|common|call_started_by", { startedByDisplayName })}
+            </div>
+        </Flex>
+    );
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/ongoing/room/__snapshots__/RoomOngoingCallTileView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/room/__snapshots__/RoomOngoingCallTileView.test.tsx.snap
new file mode 100644
index 0000000000..e0ac849d58
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/ongoing/room/__snapshots__/RoomOngoingCallTileView.test.tsx.snap
@@ -0,0 +1,385 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`RoomOngoingCallTileView > renders the tile > RoomCallIgnored 1`] = `
+<div>
+  <div
+    class="Flex-module_flex TileContainer-module_container"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+  >
+    <div
+      class="Flex-module_flex common-module_content"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+    >
+      <div
+        class="Flex-module_flex CallIcon-module_container"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+      >
+        <svg
+          class="CallIcon-module_icon"
+          fill="currentColor"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
+          />
+        </svg>
+      </div>
+      <div
+        class="Flex-module_flex common-module_content"
+        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+      >
+        <div
+          class="common-module_title"
+        >
+          Group call in progress
+        </div>
+        <div
+          class="Flex-module_flex RoomOngoingCallTileView-module_subContainer"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 6px; --mx-flex-wrap: nowrap;"
+        >
+          <div
+            class="_stacked-avatars_va14e_109 common-module_facepile"
+          >
+            <span
+              aria-label="@bob:m.org"
+              class="_avatar_va14e_8"
+              data-color="1"
+              data-type="round"
+              role="img"
+              style="--cpd-avatar-size: 20px;"
+            >
+              <img
+                alt=""
+                class="_image_va14e_43"
+                data-type="round"
+                height="20px"
+                loading="lazy"
+                referrerpolicy="no-referrer"
+                src="/static/profile-pics/profile1.png"
+                width="20px"
+              />
+            </span>
+            <span
+              aria-label="@riley:m.org"
+              class="_avatar_va14e_8"
+              data-color="3"
+              data-type="round"
+              role="img"
+              style="--cpd-avatar-size: 20px;"
+            >
+              <img
+                alt=""
+                class="_image_va14e_43"
+                data-type="round"
+                height="20px"
+                loading="lazy"
+                referrerpolicy="no-referrer"
+                src="/static/profile-pics/profile2.png"
+                width="20px"
+              />
+            </span>
+            <span
+              aria-label="@andi:m.org"
+              class="_avatar_va14e_8"
+              data-color="4"
+              data-type="round"
+              role="img"
+              style="--cpd-avatar-size: 20px;"
+            >
+              <img
+                alt=""
+                class="_image_va14e_43"
+                data-type="round"
+                height="20px"
+                loading="lazy"
+                referrerpolicy="no-referrer"
+                src="/static/profile-pics/profile3.png"
+                width="20px"
+              />
+            </span>
+          </div>
+          8 joined
+        </div>
+      </div>
+      <div
+        class="Flex-module_flex"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: wrap-reverse;"
+      >
+        <div
+          class="DurationView-module_container duration"
+        >
+          (
+          <time
+            class="mx_Clock DurationView-module_container duration"
+            datetime="PT1M40S"
+          >
+            1:40
+          </time>
+          )
+        </div>
+        <button
+          aria-disabled="false"
+          class="_button_1nw83_8 _has-icon_1nw83_60"
+          data-kind="primary"
+          data-size="md"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
+            />
+          </svg>
+          Join
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`RoomOngoingCallTileView > renders the tile > RoomCallJoined 1`] = `
+<div>
+  <div
+    class="Flex-module_flex TileContainer-module_container"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+  >
+    <div
+      class="Flex-module_flex common-module_content"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+    >
+      <div
+        class="Flex-module_flex CallIcon-module_container"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+      >
+        <svg
+          class="CallIcon-module_icon"
+          fill="currentColor"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
+          />
+        </svg>
+      </div>
+      <div
+        class="Flex-module_flex common-module_content"
+        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+      >
+        <div
+          class="common-module_title"
+        >
+          Group call in progress
+        </div>
+        <div
+          class="Flex-module_flex RoomOngoingCallTileView-module_subContainer"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 6px; --mx-flex-wrap: nowrap;"
+        >
+          <div
+            class="_stacked-avatars_va14e_109 common-module_facepile"
+          >
+            <span
+              aria-label="@bob:m.org"
+              class="_avatar_va14e_8"
+              data-color="1"
+              data-type="round"
+              role="img"
+              style="--cpd-avatar-size: 20px;"
+            >
+              <img
+                alt=""
+                class="_image_va14e_43"
+                data-type="round"
+                height="20px"
+                loading="lazy"
+                referrerpolicy="no-referrer"
+                src="/static/profile-pics/profile1.png"
+                width="20px"
+              />
+            </span>
+            <span
+              aria-label="@riley:m.org"
+              class="_avatar_va14e_8"
+              data-color="3"
+              data-type="round"
+              role="img"
+              style="--cpd-avatar-size: 20px;"
+            >
+              <img
+                alt=""
+                class="_image_va14e_43"
+                data-type="round"
+                height="20px"
+                loading="lazy"
+                referrerpolicy="no-referrer"
+                src="/static/profile-pics/profile2.png"
+                width="20px"
+              />
+            </span>
+            <span
+              aria-label="@andi:m.org"
+              class="_avatar_va14e_8"
+              data-color="4"
+              data-type="round"
+              role="img"
+              style="--cpd-avatar-size: 20px;"
+            >
+              <img
+                alt=""
+                class="_image_va14e_43"
+                data-type="round"
+                height="20px"
+                loading="lazy"
+                referrerpolicy="no-referrer"
+                src="/static/profile-pics/profile3.png"
+                width="20px"
+              />
+            </span>
+          </div>
+          8 joined
+        </div>
+      </div>
+      <div
+        class="Flex-module_flex"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: wrap-reverse;"
+      >
+        <div
+          class="DurationView-module_container duration"
+        >
+          (
+          <time
+            class="mx_Clock DurationView-module_container duration"
+            datetime="PT1M40S"
+          >
+            1:40
+          </time>
+          )
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`RoomOngoingCallTileView > renders the tile > RoomCallWithoutOtherParticipants 1`] = `
+<div>
+  <div
+    class="Flex-module_flex TileContainer-module_container"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+  >
+    <div
+      class="Flex-module_flex common-module_content"
+      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
+    >
+      <div
+        class="Flex-module_flex CallIcon-module_container"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: center; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+      >
+        <svg
+          class="CallIcon-module_icon"
+          fill="currentColor"
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
+          />
+        </svg>
+      </div>
+      <div
+        class="Flex-module_flex common-module_content"
+        style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+      >
+        <div
+          class="common-module_title"
+        >
+          Group call in progress
+        </div>
+        <div
+          class="Flex-module_flex RoomOngoingCallTileView-module_subContainer"
+          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: 6px; --mx-flex-wrap: nowrap;"
+        >
+          <span
+            aria-label="@bob:m.org"
+            class="_avatar_va14e_8 common-module_avatar"
+            data-color="1"
+            data-type="round"
+            role="img"
+            style="--cpd-avatar-size: 20px;"
+          >
+            <img
+              alt=""
+              class="_image_va14e_43"
+              data-type="round"
+              height="20px"
+              loading="lazy"
+              referrerpolicy="no-referrer"
+              src="/static/profile-pics/profile1.png"
+              width="20px"
+            />
+          </span>
+          <div
+            class="RoomOngoingCallTileView-module_startedTextContainer"
+          >
+            Bob started a call
+          </div>
+        </div>
+      </div>
+      <div
+        class="Flex-module_flex"
+        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: wrap-reverse;"
+      >
+        <div
+          class="DurationView-module_container duration"
+        >
+          (
+          <time
+            class="mx_Clock DurationView-module_container duration"
+            datetime="PT1M40S"
+          >
+            1:40
+          </time>
+          )
+        </div>
+        <button
+          aria-disabled="false"
+          class="_button_1nw83_8 _has-icon_1nw83_60"
+          data-kind="primary"
+          data-size="md"
+          role="button"
+          tabindex="0"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="20"
+            viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
+            />
+          </svg>
+          Join
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/tombstone/common.module.css b/packages/shared-components/src/room/timeline/event-tile/call/tombstone/common.module.css
new file mode 100644
index 0000000000..800ca5adc4
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/tombstone/common.module.css
@@ -0,0 +1,32 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+.container {
+    /* This is the height of the tile as per design */
+    min-height: 39px;
+    width: 100%;
+    border: 1px solid var(--cpd-color-border-interactive-secondary);
+    border-radius: var(--cpd-space-2x);
+    padding: var(--cpd-space-2x) var(--cpd-space-3x);
+    box-sizing: border-box;
+    /* All call tiles have a 10px margin at the top and bottom */
+    margin: 10px 0;
+}
+
+.title {
+    font: var(--cpd-font-body-md-semibold);
+    flex: 1;
+}
+
+.time {
+    font: var(--cpd-font-body-xs-regular);
+    color: var(--cpd-color-text-secondary);
+}
+
+.icon {
+    color: var(--cpd-color-icon-secondary);
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.stories.tsx
new file mode 100644
index 0000000000..06c691503b
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.stories.tsx
@@ -0,0 +1,102 @@
+/*
+ * Copyright 2026 Element Creations 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 type { Meta, StoryObj } from "@storybook/react-vite";
+import { DmTombstoneCallTileView, type DmTombstoneCallTileViewSnapshot } from "./DmTombstoneCallTileView";
+import { useMockedViewModel } from "../../../../../../core/viewmodel";
+import { withViewDocs } from "../../../../../../../.storybook/withViewDocs";
+import { CallDirection, CallType } from "../../common";
+
+const RoomTombstoneCallTileViewWrapperImpl = (snapshot: DmTombstoneCallTileViewSnapshot): React.ReactNode => {
+    const vm = useMockedViewModel(snapshot, {});
+    return <DmTombstoneCallTileView vm={vm} />;
+};
+
+const RoomTombstoneCallTileViewWrapper = withViewDocs(RoomTombstoneCallTileViewWrapperImpl, DmTombstoneCallTileView);
+
+const meta = {
+    title: "Timeline/Timeline Event/Call/Tombstone/DmTombstoneCallTileView",
+    component: RoomTombstoneCallTileViewWrapper,
+    tags: ["autodocs"],
+    argTypes: {
+        timestamp: {
+            control: { type: "text" },
+        },
+        callDirection: {
+            options: [CallDirection.Incoming, CallDirection.Outgoing],
+            control: { type: "radio" },
+        },
+
+        type: {
+            options: [CallType.Voice, CallType.Video],
+            control: { type: "radio" },
+        },
+    },
+    args: {
+        timestamp: "12:36",
+        callDirection: CallDirection.Incoming,
+        isCallDeclined: false,
+        type: CallType.Voice,
+    },
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?node-id=11217-3905&t=iEfhUcFrV01fQeyQ-4",
+        },
+    },
+} satisfies Meta<typeof RoomTombstoneCallTileViewWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const VoiceEnded: Story = {
+    args: {
+        type: CallType.Voice,
+    },
+};
+
+export const VideoEnded: Story = {
+    args: {
+        type: CallType.Video,
+    },
+};
+
+export const IncomingVoiceDeclined: Story = {
+    args: {
+        type: CallType.Voice,
+        callDirection: CallDirection.Incoming,
+        isCallDeclined: true,
+    },
+};
+
+export const IncomingVideoDeclined: Story = {
+    args: {
+        type: CallType.Video,
+        callDirection: CallDirection.Incoming,
+        isCallDeclined: true,
+    },
+};
+
+export const OutgoingVoiceDeclined: Story = {
+    args: {
+        type: CallType.Voice,
+        callDirection: CallDirection.Outgoing,
+        isCallDeclined: true,
+    },
+};
+
+export const OutgoingVideoDeclined: Story = {
+    args: {
+        type: CallType.Video,
+        callDirection: CallDirection.Outgoing,
+        isCallDeclined: true,
+    },
+};
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.test.tsx b/packages/shared-components/src/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.test.tsx
new file mode 100644
index 0000000000..083b022354
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.test.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright 2026 Element Creations 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 { composeStories } from "@storybook/react-vite";
+import { describe, expect, it } from "vitest";
+import React from "react";
+import { render } from "@test-utils";
+
+import * as Stories from "./DmTombstoneCallTileView.stories";
+
+const { IncomingVideoDeclined, OutgoingVideoDeclined, VideoEnded, VoiceEnded } = composeStories(Stories);
+
+describe("DmTombstoneCallTileView", () => {
+    describe("renders the tile", () => {
+        it("IncomingVideoDeclined", () => {
+            const { container } = render(<IncomingVideoDeclined />);
+            expect(container).toMatchSnapshot();
+        });
+
+        it("OutgoingVideoDeclined", () => {
+            const { container } = render(<OutgoingVideoDeclined />);
+            expect(container).toMatchSnapshot();
+        });
+
+        it("VideoEnded", () => {
+            const { container } = render(<VideoEnded />);
+            expect(container).toMatchSnapshot();
+        });
+
+        it("VoiceEnded", () => {
+            const { container } = render(<VoiceEnded />);
+            expect(container).toMatchSnapshot();
+        });
+    });
+});
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.tsx b/packages/shared-components/src/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.tsx
new file mode 100644
index 0000000000..0ee38f97d9
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/tombstone/dm/DmTombstoneCallTileView.tsx
@@ -0,0 +1,96 @@
+/*
+ * Copyright 2026 Element Creations 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 {
+    VideoCallSolidIcon,
+    VideoCallDeclinedSolidIcon,
+    VoiceCallDeclinedSolidIcon,
+    VoiceCallSolidIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
+import classnames from "classnames";
+
+import { useViewModel, type ViewModel } from "../../../../../../core/viewmodel";
+import { Flex } from "../../../../../../core/utils/Flex";
+import styles from "../common.module.css";
+import { useI18n } from "../../../../../../core/i18n/i18nContext";
+import { CallDirection, CallType } from "../../common";
+import { type RoomTombstoneCallTileViewSnapshot } from "../room/RoomTombstoneCallTileView";
+
+export interface DmTombstoneCallTileViewSnapshot extends RoomTombstoneCallTileViewSnapshot {
+    /**
+     * What type of call this tile needs to render for.
+     */
+    type: CallType;
+
+    /**
+     * Whether this is an incoming or outgoing call.
+     */
+    callDirection: CallDirection;
+
+    /**
+     * Whether this call was declined.
+     */
+    isCallDeclined: boolean;
+}
+
+export type DmTombstoneCallTileViewModel = ViewModel<DmTombstoneCallTileViewSnapshot>;
+
+export interface DmTombstoneCallTileViewProps {
+    vm: DmTombstoneCallTileViewModel;
+
+    /**
+     * Additional class names for this component.
+     */
+    className?: string;
+}
+
+function getIcon(type: CallType, isCallDeclined: boolean): React.ReactNode {
+    const VideoIcon = isCallDeclined ? VideoCallDeclinedSolidIcon : VideoCallSolidIcon;
+    const VoiceIcon = isCallDeclined ? VoiceCallDeclinedSolidIcon : VoiceCallSolidIcon;
+    switch (type) {
+        case CallType.Video:
+            return <VideoIcon className={styles.icon} width={20} height={20} />;
+        case CallType.Voice:
+            return <VoiceIcon className={styles.icon} width={20} height={20} />;
+    }
+}
+
+/**
+ * Renders the tombstone content for a tile in a DM.
+ */
+export function DmTombstoneCallTileView({ vm, className }: DmTombstoneCallTileViewProps): React.ReactNode {
+    const snapshot = useViewModel(vm);
+    const { type, timestamp, isCallDeclined } = snapshot;
+    const classNames = classnames(className, styles.container);
+    return (
+        <Flex className={classNames} align="center" gap="var(--cpd-space-2x)">
+            {getIcon(type, isCallDeclined)}
+            <div className={styles.title}>
+                {isCallDeclined ? <DeclinedContent snapshot={snapshot} /> : <NormalContent snapshot={snapshot} />}
+            </div>
+
+            <div className={styles.time}>{timestamp}</div>
+        </Flex>
+    );
+}
+
+function NormalContent(props: { snapshot: DmTombstoneCallTileViewSnapshot }): React.ReactNode {
+    const { type } = props.snapshot;
+    const { translate: _t } = useI18n();
+    return type === CallType.Voice
+        ? _t("timeline|call_tile|voice_call_title")
+        : _t("timeline|call_tile|video_call_title");
+}
+
+function DeclinedContent(props: { snapshot: DmTombstoneCallTileViewSnapshot }): React.ReactNode {
+    const { callDirection } = props.snapshot;
+    const { translate: _t } = useI18n();
+    return callDirection === CallDirection.Incoming
+        ? _t("timeline|call_tile|declined|call_declined_by_us")
+        : _t("timeline|call_tile|declined|call_declined");
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/tombstone/dm/__snapshots__/DmTombstoneCallTileView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/call/tombstone/dm/__snapshots__/DmTombstoneCallTileView.test.tsx.snap
new file mode 100644
index 0000000000..f69892bb48
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/tombstone/dm/__snapshots__/DmTombstoneCallTileView.test.tsx.snap
@@ -0,0 +1,129 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DmTombstoneCallTileView > renders the tile > IncomingVideoDeclined 1`] = `
+<div>
+  <div
+    class="Flex-module_flex common-module_container"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+  >
+    <svg
+      class="common-module_icon"
+      fill="currentColor"
+      height="20"
+      viewBox="0 0 24 24"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2 8a4 4 0 0 1 4-4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4zm10.828 6.828q.3-.3.3-.707 0-.405-.3-.707L11.414 12l1.414-1.414q.3-.3.3-.707t-.3-.707-.707-.301q-.405 0-.707.3L10 10.587 8.586 9.172q-.3-.3-.707-.301-.407 0-.707.3t-.3.708q0 .405.3.707L8.586 12l-1.414 1.414q-.3.3-.3.707t.3.707.707.3q.405 0 .707-.3L10 13.414l1.414 1.414q.3.3.707.3t.707-.3"
+      />
+    </svg>
+    <div
+      class="common-module_title"
+    >
+      You declined a call
+    </div>
+    <div
+      class="common-module_time"
+    >
+      12:36
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DmTombstoneCallTileView > renders the tile > OutgoingVideoDeclined 1`] = `
+<div>
+  <div
+    class="Flex-module_flex common-module_container"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+  >
+    <svg
+      class="common-module_icon"
+      fill="currentColor"
+      height="20"
+      viewBox="0 0 24 24"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2 8a4 4 0 0 1 4-4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4zm10.828 6.828q.3-.3.3-.707 0-.405-.3-.707L11.414 12l1.414-1.414q.3-.3.3-.707t-.3-.707-.707-.301q-.405 0-.707.3L10 10.587 8.586 9.172q-.3-.3-.707-.301-.407 0-.707.3t-.3.708q0 .405.3.707L8.586 12l-1.414 1.414q-.3.3-.3.707t.3.707.707.3q.405 0 .707-.3L10 13.414l1.414 1.414q.3.3.707.3t.707-.3"
+      />
+    </svg>
+    <div
+      class="common-module_title"
+    >
+      Call declined
+    </div>
+    <div
+      class="common-module_time"
+    >
+      12:36
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DmTombstoneCallTileView > renders the tile > VideoEnded 1`] = `
+<div>
+  <div
+    class="Flex-module_flex common-module_container"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+  >
+    <svg
+      class="common-module_icon"
+      fill="currentColor"
+      height="20"
+      viewBox="0 0 24 24"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
+      />
+    </svg>
+    <div
+      class="common-module_title"
+    >
+      Video call
+    </div>
+    <div
+      class="common-module_time"
+    >
+      12:36
+    </div>
+  </div>
+</div>
+`;
+
+exports[`DmTombstoneCallTileView > renders the tile > VoiceEnded 1`] = `
+<div>
+  <div
+    class="Flex-module_flex common-module_container"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+  >
+    <svg
+      class="common-module_icon"
+      fill="currentColor"
+      height="20"
+      viewBox="0 0 24 24"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
+      />
+    </svg>
+    <div
+      class="common-module_title"
+    >
+      Voice call
+    </div>
+    <div
+      class="common-module_time"
+    >
+      12:36
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/tombstone/room/RoomTombstoneCallTileView.stories.tsx b/packages/shared-components/src/room/timeline/event-tile/call/tombstone/room/RoomTombstoneCallTileView.stories.tsx
new file mode 100644
index 0000000000..94807886f8
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/tombstone/room/RoomTombstoneCallTileView.stories.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright 2026 Element Creations 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 type { Meta, StoryObj } from "@storybook/react-vite";
+import { RoomTombstoneCallTileView, type RoomTombstoneCallTileViewSnapshot } from "./RoomTombstoneCallTileView";
+import { useMockedViewModel } from "../../../../../../core/viewmodel";
+import { withViewDocs } from "../../../../../../../.storybook/withViewDocs";
+
+const RoomTombstoneCallTileViewWrapperImpl = ({ ...rest }: RoomTombstoneCallTileViewSnapshot): React.ReactNode => {
+    const vm = useMockedViewModel(rest, {});
+    return <RoomTombstoneCallTileView vm={vm} />;
+};
+
+const RoomTombstoneCallTileViewWrapper = withViewDocs(RoomTombstoneCallTileViewWrapperImpl, RoomTombstoneCallTileView);
+
+const meta = {
+    title: "Timeline/Timeline Event/Call/Tombstone/RoomTombstoneCallTileView",
+    component: RoomTombstoneCallTileViewWrapper,
+    tags: ["autodocs"],
+    argTypes: {
+        timestamp: {
+            control: { type: "text" },
+        },
+    },
+    args: {
+        timestamp: "12:36",
+    },
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?node-id=11217-3902&t=oRWAGiwV5pUV4OFF-4",
+        },
+    },
+} satisfies Meta<typeof RoomTombstoneCallTileViewWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/tombstone/room/RoomTombstoneCallTileView.test.tsx b/packages/shared-components/src/room/timeline/event-tile/call/tombstone/room/RoomTombstoneCallTileView.test.tsx
new file mode 100644
index 0000000000..3d3bbfc1cd
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/tombstone/room/RoomTombstoneCallTileView.test.tsx
@@ -0,0 +1,22 @@
+/*
+ * Copyright 2026 Element Creations 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 { composeStories } from "@storybook/react-vite";
+import { describe, expect, it } from "vitest";
+import React from "react";
+import { render } from "@test-utils";
+
+import * as Stories from "./RoomTombstoneCallTileView.stories";
+
+const { Default } = composeStories(Stories);
+
+describe("RoomTombstoneCallTileView", () => {
+    it("renders the tile", () => {
+        const { container } = render(<Default />);
+        expect(container).toMatchSnapshot();
+    });
+});
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/tombstone/room/RoomTombstoneCallTileView.tsx b/packages/shared-components/src/room/timeline/event-tile/call/tombstone/room/RoomTombstoneCallTileView.tsx
new file mode 100644
index 0000000000..063b5414dc
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/tombstone/room/RoomTombstoneCallTileView.tsx
@@ -0,0 +1,49 @@
+/*
+ * Copyright 2026 Element Creations 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 { VideoCallDeclinedSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import classnames from "classnames";
+
+import { useViewModel, type ViewModel } from "../../../../../../core/viewmodel";
+import { Flex } from "../../../../../../core/utils/Flex";
+import styles from "../common.module.css";
+import { useI18n } from "../../../../../../core/i18n/i18nContext";
+
+export type RoomTombstoneCallTileViewSnapshot = {
+    /**
+     * Time when this call was started.
+     */
+    timestamp: string;
+};
+
+export type RoomTombstoneCallTileViewModel = ViewModel<RoomTombstoneCallTileViewSnapshot>;
+
+export interface CallStartedTileViewProps {
+    vm: RoomTombstoneCallTileViewModel;
+
+    /**
+     * Additional class names for this component.
+     */
+    className?: string;
+}
+
+/**
+ * Renders the tombstone content for a call in a room.
+ */
+export function RoomTombstoneCallTileView({ vm, className }: CallStartedTileViewProps): React.ReactNode {
+    const { translate: _t } = useI18n();
+    const { timestamp } = useViewModel(vm);
+    const classNames = classnames(className, styles.container);
+    return (
+        <Flex className={classNames} align="center" gap="var(--cpd-space-2x)">
+            <VideoCallDeclinedSolidIcon className={styles.icon} width={20} height={20} />
+            <div className={styles.title}>{_t("timeline|call_tile|tombstone|room|title")}</div>
+            <div className={styles.time}>{timestamp}</div>
+        </Flex>
+    );
+}
diff --git a/packages/shared-components/src/room/timeline/event-tile/call/tombstone/room/__snapshots__/RoomTombstoneCallTileView.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/call/tombstone/room/__snapshots__/RoomTombstoneCallTileView.test.tsx.snap
new file mode 100644
index 0000000000..44e3034915
--- /dev/null
+++ b/packages/shared-components/src/room/timeline/event-tile/call/tombstone/room/__snapshots__/RoomTombstoneCallTileView.test.tsx.snap
@@ -0,0 +1,33 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`RoomTombstoneCallTileView > renders the tile 1`] = `
+<div>
+  <div
+    class="Flex-module_flex common-module_container"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+  >
+    <svg
+      class="common-module_icon"
+      fill="currentColor"
+      height="20"
+      viewBox="0 0 24 24"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2 8a4 4 0 0 1 4-4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4zm10.828 6.828q.3-.3.3-.707 0-.405-.3-.707L11.414 12l1.414-1.414q.3-.3.3-.707t-.3-.707-.707-.301q-.405 0-.707.3L10 10.587 8.586 9.172q-.3-.3-.707-.301-.407 0-.707.3t-.3.708q0 .405.3.707L8.586 12l-1.414 1.414q-.3.3-.3.707t.3.707.707.3q.405 0 .707-.3L10 13.414l1.414 1.414q.3.3.707.3t.707-.3"
+      />
+    </svg>
+    <div
+      class="common-module_title"
+    >
+      Group call ended
+    </div>
+    <div
+      class="common-module_time"
+    >
+      12:36
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRow/index.tsx b/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRow/index.ts
similarity index 100%
rename from packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRow/index.tsx
rename to packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRow/index.ts
diff --git a/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButton/index.tsx b/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButton/index.ts
similarity index 100%
rename from packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButton/index.tsx
rename to packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButton/index.ts
diff --git a/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButtonTooltip/__snapshots__/ReactionsRowButtonTooltip.test.tsx.snap b/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButtonTooltip/__snapshots__/ReactionsRowButtonTooltip.test.tsx.snap
index 4940b975dd..f86ea59c47 100644
--- a/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButtonTooltip/__snapshots__/ReactionsRowButtonTooltip.test.tsx.snap
+++ b/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButtonTooltip/__snapshots__/ReactionsRowButtonTooltip.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ReactionsRowButtonTooltip > renders the tooltip with formatted senders and caption 1`] = `
 <div>
   <button
-    aria-describedby="_r_2_"
+    aria-describedby="react-use-id-1"
   >
     👍 3
   </button>
@@ -13,7 +13,7 @@ exports[`ReactionsRowButtonTooltip > renders the tooltip with formatted senders
 exports[`ReactionsRowButtonTooltip > renders the tooltip with many senders 1`] = `
 <div>
   <button
-    aria-describedby="_r_8_"
+    aria-describedby="react-use-id-1"
   >
     ❤️ 8
   </button>
diff --git a/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButtonTooltip/index.tsx b/packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButtonTooltip/index.ts
similarity index 100%
rename from packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButtonTooltip/index.tsx
rename to packages/shared-components/src/room/timeline/event-tile/reactions/ReactionsRowButtonTooltip/index.ts
diff --git a/packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.module.css b/packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.module.css
index e00b9f0678..284695c861 100644
--- a/packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.module.css
+++ b/packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.module.css
@@ -7,7 +7,7 @@
 
 .content {
     color: var(--cpd-color-text-secondary); /* override anchor color */
-    font-size: var(--cpd-font-size-body-xs);
+    font-size: 0.625rem; /* There is no Compound equivalent to $font-10px */
     font-variant-numeric: tabular-nums;
     display: inline-block;
     white-space: nowrap;
diff --git a/packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.tsx b/packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.tsx
index 0d978ca3d8..228ac28b6c 100644
--- a/packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.tsx
+++ b/packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/MessageTimestampView.tsx
@@ -53,7 +53,7 @@ export interface MessageTimestampViewActions {
  * The view model for the message timestamp.
  *
  * Snapshot data describes timestamp content and rendering behavior, while
- * container styling is supplied via component props.
+ * host layout and placement styling is supplied via component props.
  */
 export type MessageTimestampViewModel = ViewModel<MessageTimestampViewSnapshot> & MessageTimestampViewActions;
 
@@ -74,11 +74,11 @@ interface MessageTimestampViewProps {
  * The view model provides the timestamp values and display options. The component
  * can render as a link when `href` is set, and can show both sent-at and received-at
  * times in the tooltip when `tsReceivedAt` is provided. Use `className` for
- * host-level styling.
+ * host-level layout and placement styling.
  *
  * @example
  * ```tsx
- * <MessageTimestampView vm={messageTimestampViewModel} className="mx_MessageTimestamp" />
+ * <MessageTimestampView vm={messageTimestampViewModel} />
  * ```
  */
 export function MessageTimestampView({ vm, className }: Readonly<MessageTimestampViewProps>): JSX.Element {
diff --git a/packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/index.tsx b/packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/index.ts
similarity index 100%
rename from packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/index.tsx
rename to packages/shared-components/src/room/timeline/event-tile/timestamp/MessageTimestampView/index.ts
diff --git a/packages/shared-components/src/status/CustomStatusView.module.css b/packages/shared-components/src/status/CustomStatusView.module.css
new file mode 100644
index 0000000000..f0d759c28b
--- /dev/null
+++ b/packages/shared-components/src/status/CustomStatusView.module.css
@@ -0,0 +1,53 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+.customStatus {
+    display: flex;
+    width: 100%;
+    flex-direction: row !important;
+    align-items: center;
+    gap: var(--cpd-space-2x);
+    /* Match the 28px tall box the trigger/pill float in so nothing shifts vertically */
+    min-height: 28px;
+}
+
+.emojiButton {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    padding: 0;
+    border: 1px solid var(--cpd-color-border-interactive-secondary);
+    border-radius: var(--cpd-radius-pill-effect);
+    background: var(--cpd-color-bg-canvas-default);
+    font-size: var(--cpd-font-size-heading-sm);
+    line-height: 1;
+    cursor: pointer;
+
+    &:hover,
+    &.selected {
+        background: var(--cpd-color-bg-subtle-secondary);
+        border-color: var(--cpd-color-border-interactive-hover);
+    }
+}
+
+.textField {
+    min-width: 0;
+    flex-grow: 1;
+}
+
+.action {
+    flex-shrink: 0;
+    cursor: pointer;
+}
+
+/* The picker sizes itself (340x450); drop the menu's default padding so it fills the popover */
+.pickerMenu {
+    padding: 0;
+}
diff --git a/packages/shared-components/src/status/CustomStatusView.stories.tsx b/packages/shared-components/src/status/CustomStatusView.stories.tsx
new file mode 100644
index 0000000000..ecd76b0abf
--- /dev/null
+++ b/packages/shared-components/src/status/CustomStatusView.stories.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright 2026 Element Creations 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 Meta, type StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+
+import { CustomStatusView } from "./CustomStatusView";
+
+const meta = {
+    title: "Status/CustomStatusView",
+    component: CustomStatusView,
+    tags: ["autodocs"],
+    args: {
+        onSave: fn(),
+        onCancel: fn(),
+    },
+} satisfies Meta<typeof CustomStatusView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/packages/shared-components/src/status/CustomStatusView.test.tsx b/packages/shared-components/src/status/CustomStatusView.test.tsx
new file mode 100644
index 0000000000..c041dfdda5
--- /dev/null
+++ b/packages/shared-components/src/status/CustomStatusView.test.tsx
@@ -0,0 +1,76 @@
+/*
+ * Copyright 2026 Element Creations 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 { describe, expect, it, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { render, screen, waitFor } from "@test-utils";
+
+import { CustomStatusView } from "./CustomStatusView";
+
+describe("CustomStatusView", () => {
+    it("shows the default emoji and a Cancel link while the text is empty", () => {
+        render(<CustomStatusView onSave={vi.fn()} onCancel={vi.fn()} />);
+        expect(screen.getByRole("textbox")).toHaveValue("");
+        expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
+        expect(screen.queryByRole("button", { name: "Save" })).not.toBeInTheDocument();
+    });
+
+    it("calls onCancel when the link is clicked with empty text", async () => {
+        const onCancel = vi.fn();
+        const onSave = vi.fn();
+        render(<CustomStatusView onCancel={onCancel} onSave={onSave} />);
+
+        await userEvent.click(screen.getByRole("button", { name: "Cancel" }));
+        expect(onCancel).toHaveBeenCalledTimes(1);
+        expect(onSave).not.toHaveBeenCalled();
+    });
+
+    it("toggles the link to Save and commits the status once text is entered", async () => {
+        const onCancel = vi.fn();
+        const onSave = vi.fn();
+        render(<CustomStatusView onCancel={onCancel} onSave={onSave} />);
+
+        await userEvent.type(screen.getByRole("textbox"), "In a meeting");
+        const save = await screen.findByRole("button", { name: "Save" });
+        await userEvent.click(save);
+
+        expect(onSave).toHaveBeenCalledWith({ emoji: "😄", text: "In a meeting" });
+        expect(onCancel).not.toHaveBeenCalled();
+    });
+
+    it("trims whitespace and ignores whitespace-only text", async () => {
+        const onCancel = vi.fn();
+        const onSave = vi.fn();
+        render(<CustomStatusView onCancel={onCancel} onSave={onSave} />);
+
+        await userEvent.type(screen.getByRole("textbox"), "   ");
+        // Still a Cancel link, as the trimmed text is empty
+        await userEvent.click(screen.getByRole("button", { name: "Cancel" }));
+        expect(onCancel).toHaveBeenCalledTimes(1);
+        expect(onSave).not.toHaveBeenCalled();
+    });
+
+    it("lets the user pick an emoji from the picker popover", async () => {
+        const onSave = vi.fn();
+        render(<CustomStatusView onSave={onSave} onCancel={vi.fn()} />);
+
+        await userEvent.click(screen.getByRole("button", { name: "Choose Emoji" }));
+        await waitFor(() => expect(screen.getByLabelText("Emoji picker")).toBeInTheDocument());
+
+        await userEvent.click(await screen.findByText("😇"));
+
+        // Picker closes and the trigger now shows the chosen emoji
+        await waitFor(() => expect(screen.queryByTestId("mx_EmojiPicker")).not.toBeInTheDocument());
+        expect(screen.getByRole("button", { name: "Choose Emoji" })).toHaveTextContent("😇");
+
+        await userEvent.type(screen.getByRole("textbox", { name: "What's your status?" }), "Angelic");
+        await userEvent.click(await screen.findByRole("button", { name: "Save" }));
+
+        expect(onSave).toHaveBeenCalledWith({ emoji: "😇", text: "Angelic" });
+    });
+});
diff --git a/packages/shared-components/src/status/CustomStatusView.tsx b/packages/shared-components/src/status/CustomStatusView.tsx
new file mode 100644
index 0000000000..9616bf3792
--- /dev/null
+++ b/packages/shared-components/src/status/CustomStatusView.tsx
@@ -0,0 +1,128 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX, useCallback, useState } from "react";
+import { Field, Link, Menu, Root, TextControl } from "@vector-im/compound-web";
+
+import { _t, type UserStatus } from "..";
+import { EmojiPicker } from "../core/EmojiPicker";
+import styles from "./CustomStatusView.module.css";
+import classNames from "classnames";
+
+/**
+ * The emoji shown on the picker trigger before the user has chosen one.
+ */
+const DEFAULT_EMOJI = "😄";
+
+export interface CustomStatusViewProps {
+    /**
+     * Called when the user commits a custom status, i.e. clicks "Save" with
+     * non-empty text.
+     */
+    onSave: (status: UserStatus) => void;
+    /**
+     * Called when the user dismisses the editor without saving, i.e. clicks
+     * "Cancel" while the text is empty.
+     */
+    onCancel: () => void;
+}
+
+/**
+ * Editor for composing a custom user status text and choosing an emoji.
+ */
+export function CustomStatusView({ onSave, onCancel }: CustomStatusViewProps): JSX.Element {
+    const [emoji, setEmoji] = useState(DEFAULT_EMOJI);
+    const [text, setText] = useState("");
+    const [pickerOpen, setPickerOpen] = useState(false);
+
+    const trimmed = text.trim();
+
+    const onChooseEmoji = useCallback((unicode: string): boolean => {
+        setEmoji(unicode);
+        setPickerOpen(false);
+        // Don't record custom-status emoji as recently used composer reactions.
+        return false;
+    }, []);
+
+    const commit = useCallback(() => {
+        if (trimmed) {
+            onSave({ emoji, text: trimmed });
+        } else {
+            onCancel();
+        }
+    }, [trimmed, emoji, onSave, onCancel]);
+
+    const onActionKeyDown = useCallback(
+        (ev: React.KeyboardEvent<HTMLAnchorElement>) => {
+            if (ev.key === "Enter" || ev.key === " ") {
+                ev.preventDefault();
+                commit();
+            }
+        },
+        [commit],
+    );
+
+    const onSubmit = useCallback(
+        (ev: React.FormEvent<HTMLFormElement>) => {
+            ev.preventDefault();
+            // Only commit on submit (e.g. Enter) when there is something to save;
+            // an empty submit shouldn't silently cancel the editor.
+            if (trimmed) {
+                onSave({ emoji, text: trimmed });
+            }
+        },
+        [trimmed, emoji, onSave],
+    );
+
+    return (
+        <Root className={styles.customStatus} onSubmit={onSubmit}>
+            <Menu
+                open={pickerOpen}
+                onOpenChange={setPickerOpen}
+                title={_t("status|set_status|choose_emoji")}
+                showTitle={false}
+                align="start"
+                className={styles.pickerMenu}
+                trigger={
+                    <button
+                        type="button"
+                        className={classNames(styles.emojiButton, { [styles.selected]: pickerOpen })}
+                        aria-label={_t("status|set_status|choose_emoji")}
+                    >
+                        {emoji}
+                    </button>
+                }
+            >
+                <EmojiPicker
+                    onChoose={onChooseEmoji}
+                    onFinished={() => setPickerOpen(false)}
+                    showQuickReactions={false}
+                />
+            </Menu>
+            <Field name="custom-status" className={styles.textField}>
+                <TextControl
+                    value={text}
+                    onChange={(ev) => setText(ev.currentTarget.value)}
+                    placeholder={_t("status|set_status|set_status_prompt")}
+                    aria-label={_t("status|set_status|set_status_prompt")}
+                    autoFocus
+                />
+            </Field>
+            <Link
+                kind="primary"
+                size="md"
+                role="button"
+                tabIndex={0}
+                className={styles.action}
+                onClick={commit}
+                onKeyDown={onActionKeyDown}
+            >
+                {trimmed ? _t("action|save") : _t("action|cancel")}
+            </Link>
+        </Root>
+    );
+}
diff --git a/packages/shared-components/src/status/SetStatusView.module.css b/packages/shared-components/src/status/SetStatusView.module.css
new file mode 100644
index 0000000000..7c830a404c
--- /dev/null
+++ b/packages/shared-components/src/status/SetStatusView.module.css
@@ -0,0 +1,36 @@
+/*
+Copyright 2026 Element Creations 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.
+*/
+
+.setStatusContainer {
+    /* Floats in a 28px tall box so it doesn't visually shift when it changes to the pill */
+    min-height: 28px;
+}
+
+.setStatusTrigger {
+    text-decoration: underline solid;
+    display: flex;
+    align-items: center;
+    width: fit-content;
+
+    svg {
+        width: 20px;
+        height: 20px;
+        margin-right: var(--cpd-space-1-5x);
+    }
+}
+
+.menuItem {
+    place-items: start;
+    gap: var(--cpd-space-1x);
+    color: var(--cpd-color-text-secondary);
+    font-weight: var(--cpd-font-weight-medium);
+    font-size: var(--cpd-font-size-body-md);
+}
+
+.dropdownEmoji {
+    margin-right: var(--cpd-space-1-5x);
+}
diff --git a/packages/shared-components/src/status/SetStatusView.stories.tsx b/packages/shared-components/src/status/SetStatusView.stories.tsx
new file mode 100644
index 0000000000..f063da4d39
--- /dev/null
+++ b/packages/shared-components/src/status/SetStatusView.stories.tsx
@@ -0,0 +1,74 @@
+/*
+ * Copyright 2026 Element Creations 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 Meta, type StoryObj } from "@storybook/react-vite";
+import React, { type JSX } from "react";
+import { fn } from "storybook/test";
+
+import { SetStatusView, type SetStatusViewActions, type SetStatusViewSnapshot } from "./SetStatusView";
+import { useMockedViewModel } from "../core/viewmodel";
+import { withViewDocs } from "../../.storybook/withViewDocs";
+
+const SetStatusViewWrapperImpl = ({
+    setStatus,
+    clearStatus,
+    ...snapshot
+}: SetStatusViewSnapshot & SetStatusViewActions): JSX.Element => {
+    const vm = useMockedViewModel<SetStatusViewSnapshot, SetStatusViewActions>(snapshot, {
+        setStatus,
+        clearStatus,
+    });
+    return <SetStatusView vm={vm} />;
+};
+
+const SetStatusViewWrapper = withViewDocs(SetStatusViewWrapperImpl, SetStatusView);
+
+const meta = {
+    title: "Status/SetStatusView",
+    component: SetStatusViewWrapper,
+    tags: ["autodocs"],
+    args: {
+        setStatus: fn(),
+        clearStatus: fn(),
+    },
+} satisfies Meta<typeof SetStatusViewWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const NoStatus: Story = {};
+
+export const WithStatus: Story = {
+    args: {
+        userStatus: { emoji: "🦩", text: "Flamboyant" },
+    },
+};
+
+// Rules needed for any story where the menu is open.
+const MENU_OPEN_A11Y_RULES = [
+    {
+        // Menu contains a header which is invalid
+        id: "aria-required-children",
+        enabled: false,
+    },
+    {
+        // Menu pops open by default
+        id: "aria-hidden-focus",
+        enabled: false,
+    },
+];
+
+export const Open: Story = {
+    parameters: {
+        a11y: {
+            config: {
+                rules: MENU_OPEN_A11Y_RULES,
+            },
+        },
+    },
+    tags: ["!dev", "!autodocs"],
+};
diff --git a/packages/shared-components/src/status/SetStatusView.test.tsx b/packages/shared-components/src/status/SetStatusView.test.tsx
new file mode 100644
index 0000000000..ef98343b36
--- /dev/null
+++ b/packages/shared-components/src/status/SetStatusView.test.tsx
@@ -0,0 +1,71 @@
+/*
+ * Copyright 2026 Element Creations 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 { describe, expect, it, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { render, screen } from "@test-utils";
+
+import { SetStatusView, type SetStatusViewActions, type SetStatusViewSnapshot } from "./SetStatusView";
+import { MockViewModel } from "../core/viewmodel/MockViewModel";
+
+class SetStatusViewModel extends MockViewModel<SetStatusViewSnapshot> implements SetStatusViewActions {
+    public setStatus = vi.fn();
+    public clearStatus = vi.fn();
+}
+
+/**
+ * Open the dropdown and pick the "Custom…" entry, leaving it ready to enter a
+ * custom status / pick an emoji.
+ */
+async function openCustomEditor(): Promise<void> {
+    await userEvent.click(screen.getByRole("combobox"));
+    await userEvent.click(screen.getByRole("option", { name: "✍️Custom…" }));
+}
+
+describe("SetStatusView", () => {
+    it("lets the user type a custom status", async () => {
+        const vm = new SetStatusViewModel({});
+        render(<SetStatusView vm={vm} />);
+
+        await openCustomEditor();
+
+        await userEvent.type(screen.getByRole("textbox", { name: "What's your status?" }), "Happy");
+        await userEvent.click(await screen.findByRole("button", { name: "Save" }));
+
+        expect(vm.setStatus).toHaveBeenCalledWith({ emoji: "😄", text: "Happy" });
+    });
+
+    it("sets a custom status with an emoji chosen from the picker", async () => {
+        const vm = new SetStatusViewModel({});
+        render(<SetStatusView vm={vm} />);
+
+        await openCustomEditor();
+
+        await userEvent.click(screen.getByRole("button", { name: "Choose Emoji" }));
+        // Pick from the always-rendered quick reactions row
+        await userEvent.click(await screen.findByText("🤩"));
+
+        await userEvent.type(screen.getByRole("textbox", { name: "What's your status?" }), "Starstruck");
+        await userEvent.click(await screen.findByRole("button", { name: "Save" }));
+
+        expect(vm.setStatus).toHaveBeenCalledWith({ emoji: "🤩", text: "Starstruck" });
+    });
+
+    it("returns to the set status prompt if the custom editor is cancelled", async () => {
+        const vm = new SetStatusViewModel({});
+        render(<SetStatusView vm={vm} />);
+
+        await openCustomEditor();
+
+        await userEvent.click(screen.getByRole("button", { name: "Cancel" }));
+
+        expect(vm.setStatus).not.toHaveBeenCalled();
+        expect(screen.getByRole("combobox")).toBeInTheDocument();
+        expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
+    });
+});
diff --git a/packages/shared-components/src/status/SetStatusView.tsx b/packages/shared-components/src/status/SetStatusView.tsx
new file mode 100644
index 0000000000..d87b84dc09
--- /dev/null
+++ b/packages/shared-components/src/status/SetStatusView.tsx
@@ -0,0 +1,145 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React, { type JSX, useState, useCallback } from "react";
+import { Dropdown, type DropdownTriggerProps, Link, Text } from "@vector-im/compound-web";
+import { ReactionIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import { _t, _td, type UserStatus } from "..";
+import { useViewModel, type ViewModel } from "../core/viewmodel";
+import { StatusPillView } from "./StatusPillView";
+import { CustomStatusView } from "./CustomStatusView";
+import styles from "./SetStatusView.module.css";
+
+const STATUSES = {
+    in_a_meeting: { emoji: "💬", textKey: _td("status|set_status|in_a_meeting") },
+    focus_time: { emoji: "💡", textKey: _td("status|set_status|focus_time") },
+    on_the_road: { emoji: "🚙", textKey: _td("status|set_status|on_the_road") },
+    be_right_back: { emoji: "☕️", textKey: _td("status|set_status|be_right_back") },
+    away: { emoji: "🌴", textKey: _td("status|set_status|away") },
+    custom: { emoji: "✍️", textKey: _td("status|set_status|custom") },
+};
+type StatusValue = keyof typeof STATUSES;
+// No need to keep recompyuting this, it won't change
+const STATUS_KEYS = Object.keys(STATUSES) as StatusValue[];
+
+export interface SetStatusViewSnapshot {
+    /**
+     * The current user status, or undefined if no status is set.
+     */
+    userStatus?: UserStatus;
+}
+
+export interface SetStatusViewActions {
+    /**
+     * Called when the user clicks to start setting a status.
+     *
+     * If falsy, the default dropdown will open for the user to choose a status.
+     */
+    onSetStatusClick?: () => void;
+
+    /**
+     * Called when the user selects a preset status from the dropdown.
+     */
+    setStatus: (status: UserStatus) => void;
+
+    /**
+     * Called when the user clears their current status.
+     */
+    clearStatus: () => void;
+}
+
+export type SetStatusViewModel = ViewModel<SetStatusViewSnapshot, SetStatusViewActions>;
+
+export type SetStatusViewProps = {
+    vm: SetStatusViewModel;
+};
+
+function StatusOption({ value }: { value: StatusValue }): React.ReactNode {
+    return (
+        <>
+            <span className={styles.dropdownEmoji}>{STATUSES[value].emoji}</span>
+            <span>{_t(STATUSES[value].textKey)}</span>
+        </>
+    );
+}
+
+export function SetStatusView({ vm }: SetStatusViewProps): JSX.Element {
+    const { userStatus } = useViewModel(vm);
+    const [customMode, setCustomMode] = useState(false);
+
+    const renderItem = useCallback((value: StatusValue | null): React.ReactNode => {
+        if (value === null) return null;
+
+        return <StatusOption value={value} />;
+    }, []);
+
+    if (userStatus) {
+        return <StatusPillView status={userStatus} clearStatus={vm.clearStatus} />;
+    }
+
+    if (customMode) {
+        return (
+            <CustomStatusView
+                onSave={(status) => {
+                    setCustomMode(false);
+                    vm.setStatus(status);
+                }}
+                onCancel={() => setCustomMode(false)}
+            />
+        );
+    }
+
+    const renderTrigger = (props: DropdownTriggerProps): JSX.Element => {
+        const trigger = (
+            <div className={styles.setStatusContainer}>
+                <Link
+                    className={styles.setStatusTrigger}
+                    aria-label={_t("status|set_status|set_status_prompt")}
+                    {...props}
+                >
+                    <ReactionIcon />
+                    <Text as="span" type="body" size="md" weight="medium">
+                        {_t("status|set_status|set_status_prompt")}
+                    </Text>
+                </Link>
+            </div>
+        );
+
+        return trigger;
+    };
+
+    const onValueChange = (value: StatusValue): void => {
+        if (value === "custom") {
+            setCustomMode(true);
+            return;
+        }
+
+        const status = STATUSES[value];
+
+        if (!status) {
+            return;
+        }
+
+        vm.setStatus({
+            emoji: status.emoji,
+            text: _t(status.textKey),
+        });
+    };
+
+    return vm.onSetStatusClick ? (
+        renderTrigger({ onClick: vm.onSetStatusClick })
+    ) : (
+        <Dropdown<StatusValue>
+            values={STATUS_KEYS}
+            label={null}
+            trigger={renderTrigger}
+            onValueChange={onValueChange}
+            renderItem={renderItem}
+        />
+    );
+}
diff --git a/packages/shared-components/src/status/StatusPillView.module.css b/packages/shared-components/src/status/StatusPillView.module.css
new file mode 100644
index 0000000000..0d347c06f5
--- /dev/null
+++ b/packages/shared-components/src/status/StatusPillView.module.css
@@ -0,0 +1,35 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+.statusPill {
+    border-radius: 30px;
+    background: var(--cpd-color-bg-subtle-secondary);
+    display: inline-flex;
+    /* Disables filling to available width if we're in a flex container */
+    align-self: flex-start;
+    align-items: center;
+    padding-inline-start: var(--cpd-space-2x);
+    gap: 6px;
+    white-space: nowrap;
+    overflow: hidden;
+    max-width: 100%;
+
+    .menuStatusEmoji {
+        flex-shrink: 0;
+    }
+
+    .menuStatusText {
+        overflow: hidden;
+        min-width: 0;
+        text-overflow: ellipsis;
+    }
+
+    span {
+        font: var(--cpd-font-body-md-medium);
+        color: var(--cpd-color-text-secondary);
+    }
+}
diff --git a/packages/shared-components/src/status/StatusPillView.tsx b/packages/shared-components/src/status/StatusPillView.tsx
new file mode 100644
index 0000000000..bbab0b85f4
--- /dev/null
+++ b/packages/shared-components/src/status/StatusPillView.tsx
@@ -0,0 +1,44 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX, type Ref, type HTMLAttributes } from "react";
+import { IconButton, Text } from "@vector-im/compound-web";
+import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import { _t, type UserStatus } from "..";
+import styles from "./StatusPillView.module.css";
+
+/**
+ * Displays a user's status message in a pill format with a button that can be used
+ * to clear the status.
+ */
+export const StatusPillView: React.FC<
+    {
+        status: UserStatus;
+        clearStatus: () => void;
+        ref?: Ref<HTMLDivElement>;
+    } & HTMLAttributes<HTMLDivElement>
+> = ({ status, clearStatus, ref, ...props }): JSX.Element => {
+    return (
+        <div ref={ref} {...props} className={styles.statusPill}>
+            <Text as="span" className={styles.menuStatusEmoji}>
+                {status.emoji}
+            </Text>
+            <Text as="span" className={styles.menuStatusText}>
+                {status.text}
+            </Text>
+            <IconButton
+                onClick={clearStatus}
+                aria-label={_t("menus|user_menu|clear_status")}
+                tooltip={_t("menus|user_menu|clear_status")}
+                size="28px"
+            >
+                <CloseIcon />
+            </IconButton>
+        </div>
+    );
+};
diff --git a/packages/shared-components/src/status/StatusTextView.module.css b/packages/shared-components/src/status/StatusTextView.module.css
new file mode 100644
index 0000000000..7b584b4f5c
--- /dev/null
+++ b/packages/shared-components/src/status/StatusTextView.module.css
@@ -0,0 +1,25 @@
+/*
+ * Copyright 2026 Element Creations 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.
+ */
+
+.statusText {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cpd-space-1x);
+    max-width: 100%;
+
+    span {
+        font: var(--cpd-font-body-md-medium);
+        color: var(--cpd-color-text-secondary);
+    }
+
+    .menuStatusText {
+        overflow: hidden;
+        min-width: 0;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}
diff --git a/packages/shared-components/src/status/StatusTextView.stories.tsx b/packages/shared-components/src/status/StatusTextView.stories.tsx
new file mode 100644
index 0000000000..c6613b83b6
--- /dev/null
+++ b/packages/shared-components/src/status/StatusTextView.stories.tsx
@@ -0,0 +1,24 @@
+/*
+ * Copyright 2026 Element Creations 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 Meta, type StoryObj } from "@storybook/react-vite";
+
+import { StatusTextView } from "./StatusTextView";
+
+const meta = {
+    title: "Status/StatusTextView",
+    component: StatusTextView,
+    tags: ["autodocs"],
+    args: {
+        status: { emoji: "🦩", text: "Flamboyant" },
+    },
+} satisfies Meta<typeof StatusTextView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/packages/shared-components/src/status/StatusTextView.test.tsx b/packages/shared-components/src/status/StatusTextView.test.tsx
new file mode 100644
index 0000000000..b3d380fcaf
--- /dev/null
+++ b/packages/shared-components/src/status/StatusTextView.test.tsx
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2026 Element Creations 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 { composeStories } from "@storybook/react-vite";
+import React from "react";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@test-utils";
+
+import * as stories from "./StatusTextView.stories";
+
+const { Default } = composeStories(stories);
+
+describe("StatusTextView", () => {
+    it("should display the status text and emoji", () => {
+        render(<Default />);
+        expect(screen.getByText("Flamboyant")).toBeInTheDocument();
+        expect(screen.getByText("🦩")).toBeInTheDocument();
+    });
+});
diff --git a/packages/shared-components/src/status/StatusTextView.tsx b/packages/shared-components/src/status/StatusTextView.tsx
new file mode 100644
index 0000000000..b5e86abbdd
--- /dev/null
+++ b/packages/shared-components/src/status/StatusTextView.tsx
@@ -0,0 +1,33 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX, type FC } from "react";
+import { Text } from "@vector-im/compound-web";
+
+import { type UserStatus } from "..";
+import styles from "./StatusTextView.module.css";
+
+/**
+ * Displays a user's status message and emoji in simple text format
+ */
+export const StatusTextView: FC<
+    {
+        status: UserStatus;
+        ref?: React.Ref<HTMLDivElement>;
+    } & React.HTMLAttributes<HTMLDivElement>
+> = function StatusTextView({ status, ref, ...props }): JSX.Element {
+    return (
+        <div ref={ref} {...props} className={styles.statusText}>
+            <Text as="span" className={styles.menuStatusEmoji}>
+                {status.emoji}
+            </Text>
+            <Text as="span" className={styles.menuStatusText}>
+                {status.text}
+            </Text>
+        </div>
+    );
+};
diff --git a/packages/shared-components/src/status/UserStatusIconView.stories.tsx b/packages/shared-components/src/status/UserStatusIconView.stories.tsx
new file mode 100644
index 0000000000..30d9538873
--- /dev/null
+++ b/packages/shared-components/src/status/UserStatusIconView.stories.tsx
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2026 Element Creations 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 Meta, type StoryObj } from "@storybook/react-vite";
+
+import { UserStatusIconView, type UserStatusIconViewModel } from "./UserStatusIconView";
+import { MockViewModel } from "../core/viewmodel/MockViewModel";
+
+const meta = {
+    title: "Status/UserStatusIconView",
+    component: UserStatusIconView,
+    tags: ["autodocs"],
+    args: {
+        vm: new MockViewModel({ status: { emoji: "🐎", text: "on a horse" } }) as UserStatusIconViewModel,
+    },
+} satisfies Meta<typeof UserStatusIconView>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const NoStatus: Story = {
+    args: {
+        vm: new MockViewModel({ status: undefined }) as UserStatusIconViewModel,
+    },
+};
diff --git a/packages/shared-components/src/status/UserStatusIconView.test.tsx b/packages/shared-components/src/status/UserStatusIconView.test.tsx
new file mode 100644
index 0000000000..5e04cb1c1c
--- /dev/null
+++ b/packages/shared-components/src/status/UserStatusIconView.test.tsx
@@ -0,0 +1,37 @@
+/*
+ * Copyright 2026 Element Creations 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 { composeStories } from "@storybook/react-vite";
+import React from "react";
+import { describe, expect, it } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { render, screen, waitFor } from "@test-utils";
+
+import * as stories from "./UserStatusIconView.stories";
+
+const { Default, NoStatus } = composeStories(stories);
+
+describe("UserStatusIconView", () => {
+    it("renders nothing when the user has no status", () => {
+        const { container } = render(<NoStatus />);
+        expect(container).toBeEmptyDOMElement();
+    });
+
+    it("renders the status emoji", () => {
+        render(<Default />);
+        expect(screen.getByText("🐎")).toBeInTheDocument();
+    });
+
+    it("shows the status text in a tooltip on hover", async () => {
+        render(<Default />);
+
+        await userEvent.hover(screen.getByText("🐎"));
+        await waitFor(() => {
+            expect(screen.getByRole("tooltip")).toHaveTextContent("on a horse");
+        });
+    });
+});
diff --git a/packages/shared-components/src/status/UserStatusIconView.tsx b/packages/shared-components/src/status/UserStatusIconView.tsx
new file mode 100644
index 0000000000..6b1d724022
--- /dev/null
+++ b/packages/shared-components/src/status/UserStatusIconView.tsx
@@ -0,0 +1,48 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+import { Text, Tooltip } from "@vector-im/compound-web";
+
+import { type ViewModel, useViewModel } from "../core/viewmodel";
+import { type UserStatus } from "..";
+
+/**
+ * Snapshot for the UserStatusIconView.
+ */
+export interface UserStatusIconViewSnapshot {
+    /**
+     * The user's status, or undefined if not available.
+     */
+    status?: UserStatus;
+}
+
+/**
+ * The view model for UserStatusIconView.
+ */
+export type UserStatusIconViewModel = ViewModel<UserStatusIconViewSnapshot>;
+
+interface UserStatusIconViewProps {
+    /**
+     * The view model for the user status icon.
+     */
+    vm: UserStatusIconViewModel;
+}
+
+/**
+ * Displays the MSC4426 status emoji for a user, e.g. after their display name
+ * in the user mention autocomplete. Renders nothing if the user has no status.
+ */
+export function UserStatusIconView({ vm }: Readonly<UserStatusIconViewProps>): JSX.Element | null {
+    const { status } = useViewModel(vm);
+    if (!status) return null;
+    return (
+        <Tooltip description={status.text}>
+            <Text as="span">{status.emoji}</Text>
+        </Tooltip>
+    );
+}
diff --git a/packages/shared-components/src/test/setupTests.ts b/packages/shared-components/src/test/setupTests.ts
index 614dd85da3..ee0ead997e 100644
--- a/packages/shared-components/src/test/setupTests.ts
+++ b/packages/shared-components/src/test/setupTests.ts
@@ -7,14 +7,51 @@ Please see LICENSE files in the repository root for full details.
 
 import fetchMock from "@fetch-mock/vitest";
 import { cleanup } from "@test-utils";
-import { afterEach } from "vitest";
+import { afterEach, expect } from "vitest";
 
 import { setLanguage } from "../../src/core/i18n/i18n";
 import en from "../i18n/strings/en_EN.json";
 
+const REACT_USE_ID = /_r_[a-z0-9]+_/g;
+
+function normaliseReactUseIds(snapshot: string): string {
+    // React useId values can vary between runs and make snapshots flaky:
+    // https://github.com/element-hq/element-web/issues/31765
+    // Avoid running the regex for DOM snapshots without React useId output.
+    if (!snapshot.includes("_r_")) return snapshot;
+
+    const ids = new Map<string, string>();
+    let nextId = 1;
+
+    return snapshot.replace(REACT_USE_ID, (id) => {
+        let replacement = ids.get(id);
+        if (!replacement) {
+            replacement = `react-use-id-${nextId++}`;
+            ids.set(id, replacement);
+        }
+        return replacement;
+    });
+}
+
+// Prevent this serializer from recursively matching the same DOM node when it calls serialize().
+let isSerializingDomSnapshot = false;
+
+expect.addSnapshotSerializer({
+    test: (value: unknown): value is Element | DocumentFragment =>
+        !isSerializingDomSnapshot && (value instanceof Element || value instanceof DocumentFragment),
+    print: (value: unknown, serialize: (value: unknown) => string): string => {
+        isSerializingDomSnapshot = true;
+        try {
+            return normaliseReactUseIds(serialize(value));
+        } finally {
+            isSerializingDomSnapshot = false;
+        }
+    },
+});
+
 function setupLanguageMock(): void {
     fetchMock
-        .get("end:/i18n/languages.json", {
+        .get("include:/i18n/languages.json?", {
             en: "en_EN.json",
         })
         .get("end:en_EN.json", en);
diff --git a/packages/shared-components/src/test/utils/index.tsx b/packages/shared-components/src/test/utils/index.tsx
index bcbd0820da..decdd02b21 100644
--- a/packages/shared-components/src/test/utils/index.tsx
+++ b/packages/shared-components/src/test/utils/index.tsx
@@ -16,33 +16,52 @@ import React, { type ReactElement } from "react";
 import { render, type RenderOptions } from "@testing-library/react";
 import { TooltipProvider } from "@vector-im/compound-web";
 
-import { I18nApi, I18nContext } from "../..";
+import {
+    DEFAULT_EVENT_PRESENTATION,
+    EventPresentationProvider,
+    I18nApi,
+    I18nContext,
+    type EventPresentation,
+} from "../..";
 
-const wrapWithTooltipProvider = (Wrapper: RenderOptions["wrapper"]) => {
+type SharedRenderOptions = RenderOptions & {
+    presentation?: Partial<EventPresentation>;
+};
+
+const i18nApi = new I18nApi();
+
+const wrapWithTooltipProvider = (Wrapper: RenderOptions["wrapper"], presentation?: Partial<EventPresentation>) => {
     return ({ children }: { children: React.ReactNode }) => {
+        const resolvedPresentation: EventPresentation | undefined = presentation
+            ? { ...DEFAULT_EVENT_PRESENTATION, ...presentation }
+            : undefined;
+        const content = resolvedPresentation ? (
+            <EventPresentationProvider value={resolvedPresentation}>
+                <TooltipProvider>{children}</TooltipProvider>
+            </EventPresentationProvider>
+        ) : (
+            <TooltipProvider>{children}</TooltipProvider>
+        );
+
         if (Wrapper) {
             return (
-                <I18nContext.Provider value={new I18nApi()}>
-                    <Wrapper>
-                        <TooltipProvider>{children}</TooltipProvider>
-                    </Wrapper>
+                <I18nContext.Provider value={i18nApi}>
+                    <Wrapper>{content}</Wrapper>
                 </I18nContext.Provider>
             );
         } else {
-            return (
-                <I18nContext.Provider value={new I18nApi()}>
-                    <TooltipProvider>{children}</TooltipProvider>
-                </I18nContext.Provider>
-            );
+            return <I18nContext.Provider value={i18nApi}>{content}</I18nContext.Provider>;
         }
     };
 };
 
-const customRender = (ui: ReactElement, options: RenderOptions = {}): ReturnType<typeof render> => {
+const customRender = (ui: ReactElement, options: SharedRenderOptions = {}): ReturnType<typeof render> => {
+    const { presentation, wrapper, ...renderOptions } = options;
+
     return render(ui, {
-        ...options,
-        wrapper: wrapWithTooltipProvider(options?.wrapper) as RenderOptions["wrapper"],
-    }) as ReturnType<typeof render>;
+        ...renderOptions,
+        wrapper: wrapWithTooltipProvider(wrapper, presentation) as RenderOptions["wrapper"],
+    });
 };
 
 // eslint-disable-next-line no-restricted-imports
diff --git a/packages/shared-components/static/profile-pics/profile1.png b/packages/shared-components/static/profile-pics/profile1.png
new file mode 100644
index 0000000000..94c52f3f83
Binary files /dev/null and b/packages/shared-components/static/profile-pics/profile1.png differ
diff --git a/packages/shared-components/static/profile-pics/profile2.png b/packages/shared-components/static/profile-pics/profile2.png
new file mode 100644
index 0000000000..bb43ae7ca2
Binary files /dev/null and b/packages/shared-components/static/profile-pics/profile2.png differ
diff --git a/packages/shared-components/static/profile-pics/profile3.png b/packages/shared-components/static/profile-pics/profile3.png
new file mode 100644
index 0000000000..95c0611008
Binary files /dev/null and b/packages/shared-components/static/profile-pics/profile3.png differ
diff --git a/packages/shared-components/tsconfig.json b/packages/shared-components/tsconfig.json
index 2691b1f20c..1915d5b02e 100644
--- a/packages/shared-components/tsconfig.json
+++ b/packages/shared-components/tsconfig.json
@@ -18,7 +18,8 @@
         "strict": true,
         "paths": {
             "@test-utils": ["./src/test/utils/index"]
-        }
+        },
+        "noEmit": true
     },
     "include": ["./src/**/*.ts", "./src/**/*.tsx", ".storybook/*.ts", ".storybook/*.tsx"],
     "references": [{ "path": "./tsconfig.node.json" }]
diff --git a/packages/shared-components/tsconfig.node.json b/packages/shared-components/tsconfig.node.json
index 7d4eb224bc..a34d2442f3 100644
--- a/packages/shared-components/tsconfig.node.json
+++ b/packages/shared-components/tsconfig.node.json
@@ -7,7 +7,8 @@
         "esModuleInterop": true,
         "strict": true,
         "types": [],
-        "allowSyntheticDefaultImports": true
+        "allowSyntheticDefaultImports": true,
+        "skipLibCheck": true
     },
-    "include": ["vite.config.ts", "vitest.config.ts"]
+    "include": ["vite.config.ts", "vitest.config.ts", "../../vitest.config.ts"]
 }
diff --git a/packages/shared-components/typedoc.json b/packages/shared-components/typedoc.json
index 2f4402584a..c8c0921561 100644
--- a/packages/shared-components/typedoc.json
+++ b/packages/shared-components/typedoc.json
@@ -22,6 +22,9 @@
         },
         "react-virtuoso": {
             "*": "https://virtuoso.dev/"
+        },
+        "linkifyjs": {
+            "*": "https://linkify.js.org/docs/"
         }
     }
 }
diff --git a/packages/shared-components/vite.config.ts b/packages/shared-components/vite.config.ts
index 116689e645..8652e26902 100644
--- a/packages/shared-components/vite.config.ts
+++ b/packages/shared-components/vite.config.ts
@@ -6,33 +6,41 @@
  *
  */
 
-import { readFileSync, writeFileSync } from "node:fs";
-import { dirname, resolve } from "node:path";
+import { existsSync, readFileSync, renameSync, writeFileSync } from "node:fs";
 import { fileURLToPath } from "node:url";
 import { defineConfig, esmExternalRequirePlugin, type Plugin } from "vite";
 import dts from "unplugin-dts/vite";
+import react from "@vitejs/plugin-react";
+import path from "node:path";
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
 const cssLayerOrder = "@layer compound-tokens, compound-web, shared-components, app-web;";
 const sharedComponentsLayer = "shared-components";
 
+const cssAssetFileName = "element-web-shared-components.css";
+
 function layerCssAssets(): Plugin {
     return {
         name: "element-web-shared-components-css-layer",
-        writeBundle(_options, bundle): void {
-            for (const asset of Object.values(bundle)) {
-                if (asset.type !== "asset" || asset.fileName !== "element-web-shared-components.css") {
-                    continue;
-                }
+        // Rename + layer-wrap the emitted CSS file. With multi-entry lib mode,
+        // vite/rolldown derives CSS filenames from the unscoped package name (dropping
+        // the `element-` prefix), so we rename on disk to keep the path stable for
+        // consumers importing `@element-hq/web-shared-components/.../*.css`.
+        writeBundle(options): void {
+            const outDir = options.dir ?? fileURLToPath(import.meta.resolve("./dist"));
+            const expectedPath = path.resolve(outDir, cssAssetFileName);
+            const renamedFromPath = path.resolve(outDir, "web-shared-components.css");
 
-                const cssPath = resolve(__dirname, "dist", asset.fileName);
-                const source = readFileSync(cssPath, "utf-8");
-                if (source.startsWith(cssLayerOrder)) {
-                    continue;
-                }
-
-                writeFileSync(cssPath, `${cssLayerOrder}\n@layer ${sharedComponentsLayer} {\n${source}\n}\n`);
+            if (existsSync(renamedFromPath)) {
+                renameSync(renamedFromPath, expectedPath);
             }
+
+            // No CSS emitted in this build (e.g. storybook's vite build doesn't produce
+            // the library CSS bundle), or already renamed and layered on a prior pass.
+            if (!existsSync(expectedPath)) return;
+
+            const source = readFileSync(expectedPath, "utf-8");
+            if (source.startsWith(cssLayerOrder)) return;
+            writeFileSync(expectedPath, `${cssLayerOrder}\n@layer ${sharedComponentsLayer} {\n${source}\n}\n`);
         },
     };
 }
@@ -40,16 +48,27 @@ function layerCssAssets(): Plugin {
 export default defineConfig({
     build: {
         lib: {
-            entry: resolve(__dirname, "src/index.ts"),
+            // Two entries: the main bundle and a standalone `numbers` utility that callers
+            // running outside the browser DOM (e.g. AudioWorkletGlobalScope) can import without
+            // pulling in the rest of the package — which transitively loads dnd-kit and
+            // other window/document-dependent code.
+            entry: {
+                "element-web-shared-components": fileURLToPath(import.meta.resolve("./src/index.ts")),
+                "numbers": fileURLToPath(import.meta.resolve("./src/core/utils/numbers.ts")),
+            },
             name: "Element Web Shared Components",
-            // the proper extensions will be added
-            fileName: "element-web-shared-components",
+            // Multi-entry mode needs both formats explicit; UMD doesn't support multi-entry
+            // (single global), so we ship ES + CJS and use the `.umd.cjs` extension for CJS
+            // to keep the existing package.json `require` paths working.
+            formats: ["es", "cjs"],
+            fileName: (format, entryName) => `${entryName}.${format === "es" ? "js" : "umd.cjs"}`,
         },
         outDir: "dist",
         rolldownOptions: {
             // make sure to externalize deps that shouldn't be bundled
             // into your library
             external: [
+                "@matrix-org/emojibase-bindings",
                 "@vector-im/compound-design-tokens",
                 "@vector-im/compound-web",
                 "react-virtuoso",
@@ -65,6 +84,7 @@ export default defineConfig({
                 // for externalized deps
                 globals: {
                     "react": "react",
+                    "@matrix-org/emojibase-bindings": "matrixEmojibaseBindings",
                     "@vector-im/compound-design-tokens": "compoundDesignTokens",
                     "@vector-im/compound-web": "compoundWeb",
                     "react-virtuoso": "reactVirtuoso",
@@ -74,9 +94,16 @@ export default defineConfig({
         },
     },
     plugins: [
+        react(),
         layerCssAssets(),
         dts({
-            bundleTypes: true,
+            bundleTypes: {
+                invokeOptions: {
+                    localBuild: !!process.env.CI,
+                    // oxlint-disable-next-line unicorn/prefer-module
+                    typescriptCompilerFolder: path.resolve(require.resolve("@typescript/old"), "../.."),
+                },
+            },
             include: ["src/**/*.{ts,tsx}"],
             exclude: ["src/**/*.test.{ts,tsx}", "src/**/*.stories.{ts,tsx}"],
             copyDtsFiles: false,
diff --git a/packages/shared-components/vitest.config.ts b/packages/shared-components/vitest.config.ts
index 7000986700..e1ad7fcdac 100644
--- a/packages/shared-components/vitest.config.ts
+++ b/packages/shared-components/vitest.config.ts
@@ -5,17 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import { defineConfig, mergeConfig } from "vitest/config";
-import path from "node:path";
+import { defineConfig } from "vitest/config";
 import { fileURLToPath } from "node:url";
 import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
 import { storybookVis } from "storybook-addon-vis/vitest-plugin";
-import { playwright, PlaywrightProviderOptions } from "@vitest/browser-playwright";
+import { playwright, type PlaywrightProviderOptions } from "@vitest/browser-playwright";
 import { nodePolyfills } from "vite-plugin-node-polyfills";
 
-import baseConfig from "@element-hq/vite-common/vite.config";
-
-const dirname = typeof __dirname !== "undefined" ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+import rootConfig from "../../vitest.config";
+import react from "@vitejs/plugin-react";
 
 const commonContextOptions: PlaywrightProviderOptions["contextOptions"] = {
     reducedMotion: "reduce",
@@ -30,94 +28,112 @@ const commonLaunchOptions = {
     args: ["--font-render-hinting=none", "--disable-font-subpixel-positioning", "--disable-lcd-text"],
 };
 
-export default mergeConfig(
-    baseConfig,
-    defineConfig({
-        test: {
-            coverage: {
-                exclude: ["src/**/*.stories.tsx"],
-            },
-            projects: [
-                {
-                    extends: true,
-                    plugins: [
-                        // The plugin will run tests for the stories defined in your Storybook config
-                        // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-                        storybookTest({
-                            configDir: path.join(dirname, ".storybook"),
-                            storybookScript: "storybook --ci",
-                            tags: {
-                                exclude: ["skip-test"],
-                            },
-                        }),
-                        storybookVis({
-                            // 3px of difference allowed before marking as failed
-                            failureThreshold: 3,
-                            // When running in CI=1 mode, set the platform to `linux` as that is the platform where the browser-in-docker is running
-                            snapshotRootDir: ({ ci, platform }) => `__vis__/${ci ? "linux" : platform}`,
-                        }),
-                    ],
-                    test: {
-                        name: "storybook",
-                        browser: {
-                            enabled: true,
-                            headless: true,
-                            provider: playwright({
-                                contextOptions: commonContextOptions,
-                                launchOptions: commonLaunchOptions,
-                                connectOptions: process.env.PW_TEST_CONNECT_WS_ENDPOINT
-                                    ? {
-                                          wsEndpoint: process.env.PW_TEST_CONNECT_WS_ENDPOINT,
-                                          exposeNetwork: "<loopback>",
-                                      }
-                                    : undefined,
-                            }),
-                            instances: [{ browser: "chromium" }],
+export default defineConfig({
+    test: {
+        coverage: {
+            exclude: ["src/**/*.stories.tsx"],
+            provider: "v8",
+            include: ["src/**/*.{ts,tsx}"],
+            reporter: [["lcov", { projectRoot: "../../" }]],
+        },
+        reporters: rootConfig.test?.reporters,
+        onConsoleLog(log: string): boolean | void {
+            // Suppress the i18n language-loading log; it fires on every
+            // setLanguage() call in setup and adds noise to test output.
+            if (log.startsWith("Loading language from")) return false;
+        },
+        environment: "node",
+        pool: "threads",
+        globals: false,
+        projects: [
+            {
+                extends: true,
+                plugins: [
+                    // The plugin will run tests for the stories defined in your Storybook config
+                    // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+                    storybookTest({
+                        configDir: "./.storybook",
+                        storybookScript: "storybook --ci",
+                        tags: {
+                            exclude: ["skip-test"],
                         },
-                        setupFiles: [".storybook/vitest.setup.ts"],
+                    }),
+                    storybookVis({
+                        // 3px of difference allowed before marking as failed
+                        failureThreshold: 3,
+                        // When running in CI=1 mode, set the platform to `linux` as that is the platform where the browser-in-docker is running
+                        snapshotRootDir: ({ ci, platform }) => `__vis__/${ci ? "linux" : platform}`,
+                    }),
+                ],
+                test: {
+                    name: "storybook",
+                    browser: {
+                        enabled: true,
+                        headless: true,
+                        provider: playwright({
+                            contextOptions: commonContextOptions,
+                            launchOptions: commonLaunchOptions,
+                            connectOptions: process.env.PW_TEST_CONNECT_WS_ENDPOINT
+                                ? {
+                                      wsEndpoint: process.env.PW_TEST_CONNECT_WS_ENDPOINT,
+                                      exposeNetwork: "<loopback>",
+                                  }
+                                : undefined,
+                        }),
+                        instances: [{ browser: "chromium" }],
+                    },
+                    setupFiles: [".storybook/vitest.setup.ts"],
+                },
+            },
+            {
+                extends: true,
+                // as any is workaround for https://github.com/davidmyersdev/vite-plugin-node-polyfills/issues/150
+                plugins: [nodePolyfills({ include: ["util"], globals: { global: false } }) as any],
+                test: {
+                    name: "unit",
+                    browser: {
+                        enabled: true,
+                        headless: true,
+                        provider: playwright({
+                            // These tests don't actually take screenshots (at least at time of writing)
+                            // but let's pass these options everywhere for consistency
+                            contextOptions: commonContextOptions,
+                            launchOptions: commonLaunchOptions,
+                        }),
+                        instances: [{ browser: "chromium" }],
+                    },
+                    setupFiles: ["src/test/setupTests.ts"],
+                },
+                css: {
+                    modules: {
+                        // Stabilise snapshots while keeping names distinct across CSS modules.
+                        generateScopedName: "[name]_[local]",
                     },
                 },
-                {
-                    extends: true,
-                    // as any is workaround for https://github.com/davidmyersdev/vite-plugin-node-polyfills/issues/150
-                    plugins: [nodePolyfills({ include: ["util"], globals: { global: false } }) as any],
-                    test: {
-                        name: "unit",
-                        browser: {
-                            enabled: true,
-                            headless: true,
-                            provider: playwright({
-                                // These tests don't actually take screenshots (at least at time of writing)
-                                // but let's pass these options everywhere for consistency
-                                contextOptions: commonContextOptions,
-                                launchOptions: commonLaunchOptions,
-                            }),
-                            instances: [{ browser: "chromium" }],
-                        },
-                        setupFiles: ["src/test/setupTests.ts"],
-                    },
-                    css: {
-                        modules: {
-                            // Stabilise snapshots while keeping names distinct across CSS modules.
-                            generateScopedName: "[name]_[local]",
-                        },
-                    },
-                },
-            ],
-        },
-        optimizeDeps: {
-            include: [
-                "vite-plugin-node-polyfills/shims/buffer",
-                "vite-plugin-node-polyfills/shims/process",
-                "@vector-im/compound-design-tokens/assets/web/icons",
-                "storybook/preview-api",
-            ],
-        },
-        resolve: {
-            alias: {
-                "@test-utils": path.resolve(__dirname, "./src/test/utils/index.tsx"),
             },
+        ],
+    },
+    optimizeDeps: {
+        include: [
+            "vite-plugin-node-polyfills/shims/buffer",
+            "vite-plugin-node-polyfills/shims/process",
+            "@vector-im/compound-design-tokens/assets/web/icons",
+            "storybook/preview-api",
+            // The room-list view pulls in a heavy dnd-kit + react-virtuoso graph. If these are left to
+            // runtime discovery, the browser-mode dep optimizer can re-bundle mid-run and reload the page,
+            // which fails the in-flight setupTests.ts import for the room-list unit suites. Pre-bundle the
+            // whole graph up front so the optimizer never needs to re-run while tests are loading.
+            "@dnd-kit/abstract",
+            "@dnd-kit/abstract/modifiers",
+            "@dnd-kit/dom",
+            "@dnd-kit/react",
+            "react-virtuoso",
+        ],
+    },
+    resolve: {
+        alias: {
+            "@test-utils": fileURLToPath(import.meta.resolve("./src/test/utils/index.tsx")),
         },
-    }),
-    true,
-);
+    },
+    plugins: [react()],
+});
diff --git a/packages/shared-types/lib/config.json.d.ts b/packages/shared-types/lib/config.json.d.ts
new file mode 100644
index 0000000000..a05dd19a9c
--- /dev/null
+++ b/packages/shared-types/lib/config.json.d.ts
@@ -0,0 +1,226 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { DeepPartial } from "./utils";
+import { ClientWellKnown } from "./matrix";
+
+// Convention decision: All config options are lower_snake_case
+// see docs/config.md for non-developer docs
+
+/**
+ * Type describing the `config.json` format for Element Web
+ * All fields are optional here, consumers should validate that fields are present before assuming otherwise
+ */
+export interface WebConfigJson {
+    // dev note: while true that this is arbitrary JSON, it's valuable to enforce that all
+    // config options are documented for "find all usages" sort of searching.
+
+    // Properties of this interface are roughly grouped by their subject matter, such as
+    // "instance customisation", "login stuff", "branding", etc. Use blank lines to denote
+    // a logical separation of properties, but keep similar ones near each other.
+
+    // Exactly one of the following must be supplied
+    default_server_config?: DeepPartial<Pick<ClientWellKnown, "m.homeserver" | "m.identity_server">>;
+    default_server_name?: string; // domain to do well-known lookup on
+    default_hs_url?: string; // http url
+
+    default_is_url?: string; // used in combination with default_hs_url, but for the identity server
+
+    fallback_hs_url?: string;
+
+    disable_custom_urls?: boolean;
+    disable_guests?: boolean;
+    disable_login_language_selector?: boolean;
+    disable_3pid_login?: boolean;
+
+    /**
+     * Whether the app may make runtime requests to the user's `<server_name>/.well-known/matrix/...`
+     * endpoints (such as the post-login client well-known poll). Set to false to disable these, so the app
+     * only contacts the homeserver base URL. Does not affect the `well_known` returned inline in the
+     * `/login` response. Defaults to true.
+     */
+    enable_client_well_known_lookups?: boolean;
+
+    brand?: string;
+    branding?: {
+        welcome_background_url?: string | string[]; // chosen at random if array
+        logo_link_url?: string;
+        auth_header_logo_url?: string;
+        auth_footer_links?: { text: string; url: string }[];
+    };
+
+    force_verification?: boolean; // if true, users must verify new logins
+
+    map_style_url?: string; // for location-shared maps
+
+    embedded_pages?: {
+        welcome_url?: string;
+        home_url?: string;
+        login_for_welcome?: boolean;
+    };
+
+    permalink_prefix?: string;
+
+    desktop_builds?: {
+        available?: boolean;
+        logo?: string; // url
+        url?: string; // download url
+        url_macos?: string;
+        url_win64?: string;
+        url_win64arm?: string;
+        url_linux?: string;
+    };
+    mobile_builds?: {
+        ios?: string; // download url
+        android?: string; // download url
+        fdroid?: string; // download url
+    };
+
+    mobile_guide_toast?: boolean;
+    mobile_guide_app_variant?: "element" | "element-classic" | "element-pro";
+
+    default_theme?: "light" | "dark" | string; // custom themes are strings
+    default_country_code?: string; // ISO 3166 alpha2 country code
+    default_federate?: boolean;
+    default_device_display_name?: string; // for device naming on login+registration
+
+    setting_defaults?: Record<string, any>; // <SettingName, Value>
+
+    integrations_ui_url?: string;
+    integrations_rest_url?: string;
+    integrations_widgets_urls?: string[];
+    default_widget_container_height?: number; // height in pixels
+
+    show_labs_settings?: boolean;
+    features?: Record<string, boolean>; // <FeatureName, EnabledBool>
+
+    /**
+     * Bug report endpoint URL. "local" means the logs should not be uploaded.
+     * Omission disables bug reporting
+     */
+    bug_report_endpoint_url?: string;
+    sentry?: {
+        dsn?: string;
+        environment?: string; // "production", etc
+    };
+
+    widget_build_url?: string; // url called to replace jitsi/call widget creation
+    widget_build_url_ignore_dm?: boolean;
+    audio_stream_url?: string;
+    jitsi?: {
+        preferred_domain?: string;
+    };
+    jitsi_widget?: {
+        skip_built_in_welcome_screen?: boolean;
+    };
+    voip?: {
+        obey_asserted_identity?: boolean; // MSC3086
+    };
+    element_call?: {
+        guest_spa_url?: string;
+        brand?: string;
+        use_exclusively?: boolean;
+        disable?: boolean;
+    };
+
+    logout_redirect_url?: string;
+
+    sso_redirect_options?: {
+        immediate?: boolean;
+        on_welcome_page?: boolean;
+        on_login_page?: boolean;
+    };
+
+    custom_translations_url?: string;
+
+    report_event?: {
+        admin_message_md?: string; // message for how to contact the server owner when reporting an event
+    };
+
+    room_directory?: {
+        servers?: string[];
+    };
+
+    posthog?: {
+        project_api_key?: string;
+        api_host?: string; // hostname
+    };
+    analytics_owner?: string; // defaults to `brand`
+    privacy_policy_url?: string; // location for cookie policy
+
+    enable_presence_by_hs_url?: Record<string, boolean>; // <HomeserverName, Enabled>
+
+    terms_and_conditions_links?: { url: string; text: string }[];
+    help_url?: string;
+    help_encryption_url?: string;
+    help_key_storage_url?: string;
+
+    latex_maths_delims?: {
+        inline?: {
+            left?: string;
+            right?: string;
+            pattern?: {
+                tex?: string;
+                latex?: string;
+            };
+        };
+        display?: {
+            left?: string;
+            right?: string;
+            pattern?: {
+                tex?: string;
+                latex?: string;
+            };
+        };
+    };
+
+    sync_timeline_limit?: number;
+    dangerously_allow_unsafe_and_insecure_passwords?: boolean; // developer option
+
+    user_notice?: {
+        title?: string;
+        description?: string;
+        show_once?: boolean;
+    };
+
+    feedback?: {
+        existing_issues_url?: string;
+        new_issue_url?: string;
+    };
+
+    /**
+     * Configuration for OIDC issuers where a static client_id has been issued for the app.
+     * Otherwise dynamic client registration is attempted.
+     * The issuer URL must have a trailing `/`.
+     * OPTIONAL
+     */
+    oidc_static_clients?: {
+        [issuer: string]: { client_id: string };
+    };
+
+    /**
+     * Configuration for OIDC dynamic registration where a static OIDC client is not configured.
+     */
+    oidc_metadata?: {
+        client_uri?: string;
+        logo_uri?: string;
+        tos_uri?: string;
+        policy_uri?: string;
+        contacts?: string[];
+    };
+
+    modules?: string[];
+}
+
+/**
+ * Type describing the `config.json` format for Element Desktop, a superset of Element Web's config.
+ * All fields are optional here, consumers should validate that fields are present before assuming otherwise
+ */
+export interface DesktopConfigJson extends WebConfigJson {
+    web_base_url?: string;
+    update_base_url?: string;
+}
diff --git a/packages/shared-types/lib/index.d.ts b/packages/shared-types/lib/index.d.ts
new file mode 100644
index 0000000000..d07922b4ab
--- /dev/null
+++ b/packages/shared-types/lib/index.d.ts
@@ -0,0 +1,11 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+export type * from "./config.json.d.ts";
+export type * from "./utils.d.ts";
+export type * from "./matrix.d.ts";
+export type * from "./json.d.ts";
diff --git a/packages/shared-types/lib/index.js b/packages/shared-types/lib/index.js
new file mode 100644
index 0000000000..1be6a73d8c
--- /dev/null
+++ b/packages/shared-types/lib/index.js
@@ -0,0 +1 @@
+// Dummy file to make Node happy to import `shared-types` lib.
diff --git a/apps/web/src/@types/json.ts b/packages/shared-types/lib/json.d.ts
similarity index 57%
rename from apps/web/src/@types/json.ts
rename to packages/shared-types/lib/json.d.ts
index 33af49a19f..cf7255954a 100644
--- a/apps/web/src/@types/json.ts
+++ b/packages/shared-types/lib/json.d.ts
@@ -1,13 +1,20 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2026 Element Creations 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.
 */
 
+/** Type representing a valid JSON value */
 export type JsonValue = null | string | number | boolean;
+
+/** Type representing a valid JSON array */
 export type JsonArray = Array<JsonValue | JsonObject | JsonArray>;
+
+/** Type representing a valid JSON object */
 export interface JsonObject {
     [key: string]: JsonObject | JsonArray | JsonValue;
 }
-export type Json = JsonArray | JsonObject;
+
+/** Type representing a valid JSON document */
+export type JsonDocument = JsonArray | JsonObject;
diff --git a/packages/shared-types/lib/matrix.d.ts b/packages/shared-types/lib/matrix.d.ts
new file mode 100644
index 0000000000..609f62a0dd
--- /dev/null
+++ b/packages/shared-types/lib/matrix.d.ts
@@ -0,0 +1,43 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { JsonDocument } from "./json";
+
+/**
+ * As specified by https://spec.matrix.org/latest/client-server-api/#getwell-knownmatrixclient
+ */
+export type ClientWellKnown = {
+    /**
+     * Used by clients to discover homeserver information.
+     */
+    "m.homeserver": {
+        /**
+         * The base URL for the homeserver for client-server connections.
+         */
+        base_url: string;
+        /**
+         * This field is not part of the spec but supported by Element Web's config.json
+         * @deprecated - we should figure out whether we want to keep this or not.
+         */
+        server_name?: string;
+    };
+    /**
+     * Used by clients to discover identity server information.
+     */
+    "m.identity_server"?: {
+        /**
+         * The base URL for the identity server for client-server connections.
+         */
+        base_url: string;
+    };
+} & {
+    /**
+     * Other properties
+     * Application-dependent keys using Java package naming convention.
+     */
+    [key: string]: JsonDocument;
+};
diff --git a/packages/shared-types/lib/utils.d.ts b/packages/shared-types/lib/utils.d.ts
new file mode 100644
index 0000000000..e68cf0bfba
--- /dev/null
+++ b/packages/shared-types/lib/utils.d.ts
@@ -0,0 +1,83 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+/**
+ * Returns a union type of the keys of the Input type whose names start with the given string Str.
+ */
+export type KeysStartingWith<Input extends object, Str extends string> = {
+    [P in keyof Input]: P extends `${Str}${infer _X}` ? P : never; // we don't use _X
+}[keyof Input];
+
+/**
+ * Makes fields of T and its object children optional if they are defined in D.
+ * Useful for generating the input type for a given function if it applies an object of defaults.
+ */
+export type Defaultize<P, D> = P extends any
+    ? string extends keyof P
+        ? P
+        : Pick<P, Exclude<keyof P, keyof D>> &
+              Partial<Pick<P, Extract<keyof P, keyof D>>> &
+              Partial<Pick<D, Exclude<keyof D, keyof P>>>
+    : never;
+
+/**
+ * Makes fields of T and its object children non-optional if they are defined in D.
+ * Useful for generating a type which allows you to know which fields will be defined once you apply default values.
+ */
+export type ResolveDefaults<T, D> = {
+    [K in keyof T as K extends keyof D ? K : never]-?: SafeIndex<D, K> extends object
+        ? NonNullable<T[K]> extends any[]
+            ? NonNullable<T[K]>
+            : NonNullable<T[K]> extends object
+              ? ResolveDefaults<NonNullable<T[K]>, SafeIndex<D, K>>
+              : NonNullable<T[K]>
+        : NonNullable<T[K]>;
+} & {
+    [K in keyof T as K extends keyof D ? never : K]: T[K];
+} & {};
+
+type SafeIndex<D, K> = K extends keyof D ? D[K] : never;
+
+/**
+ * Applies the `readonly` modifier to all fields of T and its object children.
+ */
+export type DeepReadonly<T> = T extends (infer R)[]
+    ? DeepReadonlyArray<R>
+    : T extends Function
+      ? T
+      : T extends object
+        ? DeepReadonlyObject<T>
+        : T;
+
+interface DeepReadonlyArray<T> extends ReadonlyArray<DeepReadonly<T>> {}
+
+type DeepReadonlyObject<T> = {
+    readonly [P in keyof T]: DeepReadonly<T[P]>;
+};
+
+/**
+ * Like `Partial` but requires at least one property to be present.
+ */
+export type AtLeastOne<T, U = { [K in keyof T]: Pick<T, K> }> = Partial<T> & U[keyof U];
+
+/**
+ * Returns a union type of the keys of the input Object type whose values are assignable to the given Item type.
+ * Based on https://stackoverflow.com/a/57862073
+ */
+export type Assignable<Object, Item> = {
+    [Key in keyof Object]: Object[Key] extends Item ? Key : never;
+}[keyof Object];
+
+/**
+ * Like `Partial` but for applied to all nested objects.
+ * Based on https://dev.to/perennialautodidact/adventures-in-typescript-deeppartial-2f2a
+ */
+export type DeepPartial<T> = T extends object
+    ? {
+          [P in keyof T]?: DeepPartial<T[P]>;
+      }
+    : T;
diff --git a/packages/shared-types/package.json b/packages/shared-types/package.json
new file mode 100644
index 0000000000..6fd62d3c30
--- /dev/null
+++ b/packages/shared-types/package.json
@@ -0,0 +1,20 @@
+{
+    "name": "shared-types",
+    "type": "module",
+    "version": "0.0.0",
+    "private": true,
+    "description": "Shared types for Element Web & Desktop",
+    "author": "element-hq",
+    "license": "SEE LICENSE IN README.md",
+    "main": "./lib/index.js",
+    "types": "./lib/index.d.ts",
+    "files": [
+        "lib"
+    ],
+    "scripts": {
+        "lint:types": "tsc --noEmit"
+    },
+    "devDependencies": {
+        "typescript": "catalog:"
+    }
+}
diff --git a/packages/shared-types/tsconfig.json b/packages/shared-types/tsconfig.json
new file mode 100644
index 0000000000..b58ee71b24
--- /dev/null
+++ b/packages/shared-types/tsconfig.json
@@ -0,0 +1,13 @@
+{
+    "$schema": "http://json.schemastore.org/tsconfig",
+    "compilerOptions": {
+        "rootDir": "./lib",
+        "target": "esnext",
+        "lib": ["es2024"],
+        "strict": true,
+        "types": [],
+        "allowImportingTsExtensions": true,
+        "noEmit": true
+    },
+    "include": ["lib"]
+}
diff --git a/packages/vite-common/package.json b/packages/vite-common/package.json
deleted file mode 100644
index 4a335ac0e7..0000000000
--- a/packages/vite-common/package.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-    "name": "@element-hq/vite-common",
-    "private": true,
-    "version": "0.0.0",
-    "type": "module",
-    "scripts": {
-        "lint:types": "tsc --noEmit"
-    },
-    "dependencies": {
-        "vitest": "catalog:"
-    },
-    "devDependencies": {
-        "typescript": "catalog:"
-    },
-    "peerDependencies": {
-        "@vitest/coverage-v8": "catalog:",
-        "vitest-sonar-reporter": "catalog:"
-    }
-}
diff --git a/packages/vite-common/tsconfig.json b/packages/vite-common/tsconfig.json
deleted file mode 100644
index e540b512a3..0000000000
--- a/packages/vite-common/tsconfig.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-    "compilerOptions": {
-        "target": "ESNext",
-        "module": "esnext",
-        "moduleResolution": "bundler",
-        "strict": true
-    },
-    "include": ["vite.config.ts"]
-}
diff --git a/patches/@arcmantle__vite-plugin-import-css-sheet.patch b/patches/@arcmantle__vite-plugin-import-css-sheet.patch
new file mode 100644
index 0000000000..477223146d
--- /dev/null
+++ b/patches/@arcmantle__vite-plugin-import-css-sheet.patch
@@ -0,0 +1,10 @@
+diff --git a/client.d.ts b/client.d.ts
+index d884a7e4491d62031b7df17250957084c4b3f70e..bf2a78c177e14109c062d09cd35884470ef7ebf0 100644
+--- a/client.d.ts
++++ b/client.d.ts
+@@ -1,3 +1,4 @@
+ declare module '*.css' {
+-	export default styles as CSSStyleSheet;
++	const styles: CSSStyleSheet;
++	export default styles;
+ }
diff --git a/patches/@tanstack__virtual-core@3.17.6.patch b/patches/@tanstack__virtual-core@3.17.6.patch
new file mode 100644
index 0000000000..2604e074b5
--- /dev/null
+++ b/patches/@tanstack__virtual-core@3.17.6.patch
@@ -0,0 +1,47 @@
+diff --git a/dist/esm/index.d.ts b/dist/esm/index.d.ts
+index 387489bd25c9ebcf6afd97df5e741706fbdec65d..0e9961bb69b411824ba91f56694774e801d599c4 100644
+--- a/dist/esm/index.d.ts
++++ b/dist/esm/index.d.ts
+@@ -78,6 +78,12 @@ export interface VirtualizerOptions<TScrollElement extends Element | Window, TIt
+     initialMeasurementsCache?: Array<VirtualItem>;
+     lanes?: number;
+     anchorTo?: ScrollAnchor;
++    /**
++     * With `anchorTo: "end"`, reject an item as the scroll anchor (e.g. a transient
++     * placeholder/sentinel row whose key does not survive the update); anchoring
++     * steps inward to the nearest accepted item. Element-web patch, pending upstream.
++     */
++    isValidAnchorItem?: (item: VirtualItem) => boolean;
+     followOnAppend?: FollowOnAppend;
+     scrollEndThreshold?: number;
+     isScrollingResetDelay?: number;
+diff --git a/dist/esm/index.js b/dist/esm/index.js
+index 00fd4a4b0a0049193f8862c2604cb76013d605d5..37c058b25d30f42f82617d9cc4c2831bc0b13704 100644
+--- a/dist/esm/index.js
++++ b/dist/esm/index.js
+@@ -295,7 +295,24 @@ class Virtualizer {
+         const didEdgeKeysChange = didCountChange || prevCount > 0 && nextCount > 0 && (merged.getItemKey(0) !== prevFirstKey || merged.getItemKey(nextCount - 1) !== prevLastKey);
+         if (didEdgeKeysChange) {
+           edgeKeysChanged = true;
+-          const item = prevCount > 0 ? this.getVirtualItemForOffset(this.getScrollOffset()) ?? measurements[0] : null;
++          let item = prevCount > 0 ? this.getVirtualItemForOffset(this.getScrollOffset()) ?? measurements[0] : null;
++          // With anchorTo: "end" the scroll is re-pinned by the key of the item
++          // under the current offset. If the consumer rejects that item as an
++          // anchor via isValidAnchorItem — e.g. a transient placeholder/sentinel
++          // row (loading spinner, "load more", skeleton) whose key does not
++          // survive the update — re-pinning by its key would fail and the
++          // prepend would go uncompensated (the list jumps to the edge). Such
++          // rows only sit at the extreme edges, so step one index inward to the
++          // nearest accepted item, whose key persists across the update.
++          const isValidAnchorItem = merged.isValidAnchorItem;
++          if (item && isValidAnchorItem && !isValidAnchorItem(item)) {
++            const step = item.index === 0 ? 1 : -1;
++            let i = item.index;
++            while (i >= 0 && i < measurements.length && measurements[i] && !isValidAnchorItem(measurements[i])) {
++              i += step;
++            }
++            item = measurements[i] ?? item;
++          }
+           if (item) {
+             anchor = [item.key, this.getScrollOffset() - item.start];
+           }
diff --git a/patches/@types__mdx.patch b/patches/@types__mdx.patch
deleted file mode 100644
index e76b61afd9..0000000000
--- a/patches/@types__mdx.patch
+++ /dev/null
@@ -1,46 +0,0 @@
-diff --git a/types.d.ts b/types.d.ts
-index 498bb694de2e6a62f14d3fe998dc538aff920fc6..ab288cdf8ca228fc8daaff2c5fb84ce665b40812 100644
---- a/types.d.ts
-+++ b/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 React.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]>;
-     }
-     & {
-         /**
diff --git a/patches/app-builder-lib.patch b/patches/app-builder-lib.patch
deleted file mode 100644
index 043f97d468..0000000000
--- a/patches/app-builder-lib.patch
+++ /dev/null
@@ -1,27 +0,0 @@
-diff --git a/out/node-module-collector/moduleManager.js b/out/node-module-collector/moduleManager.js
-index f483d9387a3270afc884b8478f19dd2825477a04..a718d92825b4813bc27eb10775a70d8e0731fcf7 100644
---- a/out/node-module-collector/moduleManager.js
-+++ b/out/node-module-collector/moduleManager.js
-@@ -5,6 +5,7 @@ const builder_util_1 = require("builder-util");
- const fs = require("fs-extra");
- const path = require("path");
- const semver = require("semver");
-+const searchModule = require("../electron/search-module");
- var LogMessageByKey;
- (function (LogMessageByKey) {
-     LogMessageByKey["PKG_DUPLICATE_REF"] = "duplicate dependency references";
-@@ -115,8 +116,12 @@ class ModuleManager {
-                 return { packageDir: path.dirname(direct), packageJson: json };
-             }
-         }
--        // 2) upward hoisted search, then 3) downward non-hoisted search
--        return (await this.upwardSearch(parentDir, pkgName, requiredRange)) || (await this.downwardSearch(parentDir, pkgName, requiredRange)) || null;
-+        // 2) upward hoisted search, then 3) downward non-hoisted search, then 4) downward from workspace root
-+        const workspaceRoot = await searchModule.getProjectRootPath(parentDir);
-+        return (await this.upwardSearch(parentDir, pkgName, requiredRange)) ||
-+            (await this.downwardSearch(parentDir, pkgName, requiredRange)) ||
-+            (await this.downwardSearch(workspaceRoot, pkgName, requiredRange)) ||
-+            null;
-     }
-     semverSatisfies(found, range) {
-         if ((0, builder_util_1.isEmptyOrSpaces)(range) || range === "*") {
diff --git a/patches/rollup.patch b/patches/rollup.patch
deleted file mode 100644
index 0690a6ab9b..0000000000
--- a/patches/rollup.patch
+++ /dev/null
@@ -1,14 +0,0 @@
-diff --git a/dist/rollup.d.ts b/dist/rollup.d.ts
-index 799df4a69cc0d7ac26c3357c8c2bd3f68365d609..67a6e48c65324f62a6724732f90ad0a776fa7ef5 100644
---- a/dist/rollup.d.ts
-+++ b/dist/rollup.d.ts
-@@ -160,6 +160,9 @@ export interface MinimalPluginContext {
- 	warn: LoggingFunction;
- }
- 
-+// Temporary until https://github.com/getsentry/sentry-javascript-bundler-plugins/pull/870 is released
-+export type AcornNode = unknown;
-+
- export interface EmittedAsset {
- 	fileName?: string | undefined;
- 	name?: string | undefined;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4bb45cf479..da0c1988e0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,125 +1,327 @@
+---
+lockfileVersion: '9.0'
+
+importers:
+
+  .:
+    configDependencies: {}
+    packageManagerDependencies:
+      '@pnpm/exe':
+        specifier: 11.20.0
+        version: 11.20.0
+      pnpm:
+        specifier: 11.20.0
+        version: 11.20.0
+
+packages:
+
+  '@pnpm/exe@11.20.0':
+    resolution: {integrity: sha512-6ZiImENLhgpKifw3CltPmwSMhFLgSeEsNjJQvxFs5uu0mjqH6Rq6f7FDA1J7lBPOerxctUstMu3n+KA2qrWRlA==}
+    hasBin: true
+
+  '@pnpm/linux-arm64@11.20.0':
+    resolution: {integrity: sha512-yrly8s9sGVKaHyO1soLP1z12YmOKOM0wNnVsKAEfeOoPsFkuf+3116kb4ysDlY8PZ5xJ9KDv+UXgDNOew7c7RA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@pnpm/linux-x64@11.20.0':
+    resolution: {integrity: sha512-B97xRRGMktHsPzIpEgK1BuCUtO3mwUTMpVW9fV+BoY/giCCoJvgTvZTqyY8gTKSNmiPrp7Twwn5Em0r04k2fAw==}
+    cpu: [x64]
+    os: [linux]
+
+  '@pnpm/linuxstatic-arm64@11.20.0':
+    resolution: {integrity: sha512-pdgQdxExyVLPNedhXH6RFHYCabXzfA4gU21JFWa+aXVSKI49QA817FzfjLed+hlHL+JMH7HQZvooqw3VdvLTzQ==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@pnpm/linuxstatic-x64@11.20.0':
+    resolution: {integrity: sha512-n1pyBbXenYQJFi8nQ5Z0h4eUd9CTzbVFfnhODqYl27xqRxu8yODx5NzpCBfCczczcedCUU9NPq9McH0KtK7gyA==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@pnpm/macos-arm64@11.20.0':
+    resolution: {integrity: sha512-tGuwiSQWvNxKEnABtAWWLhoL3ACE6DKZstYRNjMIFouNZqHy8PsQGFnBMoKiSqtGEx7EQ7sLa+bpJsb7y6bXoA==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@pnpm/win-arm64@11.20.0':
+    resolution: {integrity: sha512-F4GacJqJaRDxgkpUsfefRcMC6jgrjYUnhDc/mfPPUvWUe3ioLm5LSdjyvtTbbIs8d/nojMQyV9H1PS1w7pFshg==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@pnpm/win-x64@11.20.0':
+    resolution: {integrity: sha512-0Db1+7D7TtvYT0ecBRhkaD8YSMcVyiArOtWqvm0UrIu8l7wWx9FgP/8NKbpg9qKHi00UxsLd03AVPl9hx2BzSw==}
+    cpu: [x64]
+    os: [win32]
+
+  '@reflink/reflink-darwin-arm64@0.1.19':
+    resolution: {integrity: sha512-ruy44Lpepdk1FqDz38vExBY/PVUsjxZA+chd9wozjUH9JjuDT/HEaQYA6wYN9mf041l0yLVar6BCZuWABJvHSA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@reflink/reflink-darwin-x64@0.1.19':
+    resolution: {integrity: sha512-By85MSWrMZa+c26TcnAy8SDk0sTUkYlNnwknSchkhHpGXOtjNDUOxJE9oByBnGbeuIE1PiQsxDG3Ud+IVV9yuA==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@reflink/reflink-linux-arm64-gnu@0.1.19':
+    resolution: {integrity: sha512-7P+er8+rP9iNeN+bfmccM4hTAaLP6PQJPKWSA4iSk2bNvo6KU6RyPgYeHxXmzNKzPVRcypZQTpFgstHam6maVg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@reflink/reflink-linux-arm64-musl@0.1.19':
+    resolution: {integrity: sha512-37iO/Dp6m5DDaC2sf3zPtx/hl9FV3Xze4xoYidrxxS9bgP3S8ALroxRK6xBG/1TtfXKTvolvp+IjrUU6ujIGmA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@reflink/reflink-linux-x64-gnu@0.1.19':
+    resolution: {integrity: sha512-jbI8jvuYCaA3MVUdu8vLoLAFqC+iNMpiSuLbxlAgg7x3K5bsS8nOpTRnkLF7vISJ+rVR8W+7ThXlXlUQ93ulkw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@reflink/reflink-linux-x64-musl@0.1.19':
+    resolution: {integrity: sha512-e9FBWDe+lv7QKAwtKOt6A2W/fyy/aEEfr0g6j/hWzvQcrzHCsz07BNQYlNOjTfeytrtLU7k449H1PI95jA4OjQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@reflink/reflink-win32-arm64-msvc@0.1.19':
+    resolution: {integrity: sha512-09PxnVIQcd+UOn4WAW73WU6PXL7DwGS6wPlkMhMg2zlHHG65F3vHepOw06HFCq+N42qkaNAc8AKIabWvtk6cIQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@reflink/reflink-win32-x64-msvc@0.1.19':
+    resolution: {integrity: sha512-E//yT4ni2SyhwP8JRjVGWr3cbnhWDiPLgnQ66qqaanjjnMiu3O/2tjCPQXlcGc/DEYofpDc9fvhv6tALQsMV9w==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@reflink/reflink@0.1.19':
+    resolution: {integrity: sha512-DmCG8GzysnCZ15bres3N5AHCmwBwYgp0As6xjhQ47rAUTUXxJiK+lLUxaGsX3hd/30qUpVElh05PbGuxRPgJwA==}
+    engines: {node: '>= 10'}
+
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  pnpm@11.20.0:
+    resolution: {integrity: sha512-mm8zCpW2ZEbqCI+vFSFAWooB8H/ecSTMmVjf7VLUu0NnN+ZbCPhfN7Rvy6N1CSVYrFEmK4FoRLIvY0Bu0Wa/7g==}
+    engines: {node: '>=22.13'}
+    hasBin: true
+
+snapshots:
+
+  '@pnpm/exe@11.20.0':
+    dependencies:
+      '@reflink/reflink': 0.1.19
+      detect-libc: 2.1.2
+    optionalDependencies:
+      '@pnpm/linux-arm64': 11.20.0
+      '@pnpm/linux-x64': 11.20.0
+      '@pnpm/linuxstatic-arm64': 11.20.0
+      '@pnpm/linuxstatic-x64': 11.20.0
+      '@pnpm/macos-arm64': 11.20.0
+      '@pnpm/win-arm64': 11.20.0
+      '@pnpm/win-x64': 11.20.0
+
+  '@pnpm/linux-arm64@11.20.0':
+    optional: true
+
+  '@pnpm/linux-x64@11.20.0':
+    optional: true
+
+  '@pnpm/linuxstatic-arm64@11.20.0':
+    optional: true
+
+  '@pnpm/linuxstatic-x64@11.20.0':
+    optional: true
+
+  '@pnpm/macos-arm64@11.20.0':
+    optional: true
+
+  '@pnpm/win-arm64@11.20.0':
+    optional: true
+
+  '@pnpm/win-x64@11.20.0':
+    optional: true
+
+  '@reflink/reflink-darwin-arm64@0.1.19':
+    optional: true
+
+  '@reflink/reflink-darwin-x64@0.1.19':
+    optional: true
+
+  '@reflink/reflink-linux-arm64-gnu@0.1.19':
+    optional: true
+
+  '@reflink/reflink-linux-arm64-musl@0.1.19':
+    optional: true
+
+  '@reflink/reflink-linux-x64-gnu@0.1.19':
+    optional: true
+
+  '@reflink/reflink-linux-x64-musl@0.1.19':
+    optional: true
+
+  '@reflink/reflink-win32-arm64-msvc@0.1.19':
+    optional: true
+
+  '@reflink/reflink-win32-x64-msvc@0.1.19':
+    optional: true
+
+  '@reflink/reflink@0.1.19':
+    optionalDependencies:
+      '@reflink/reflink-darwin-arm64': 0.1.19
+      '@reflink/reflink-darwin-x64': 0.1.19
+      '@reflink/reflink-linux-arm64-gnu': 0.1.19
+      '@reflink/reflink-linux-arm64-musl': 0.1.19
+      '@reflink/reflink-linux-x64-gnu': 0.1.19
+      '@reflink/reflink-linux-x64-musl': 0.1.19
+      '@reflink/reflink-win32-arm64-msvc': 0.1.19
+      '@reflink/reflink-win32-x64-msvc': 0.1.19
+
+  detect-libc@2.1.2: {}
+
+  pnpm@11.20.0: {}
+
+---
 lockfileVersion: '9.0'
 
 settings:
   autoInstallPeers: true
+  dedupePeers: true
   excludeLinksFromLockfile: false
 
 catalogs:
   default:
     '@fontsource/inter':
-      specifier: 5.2.8
-      version: 5.2.8
+      specifier: 5.3.0
+      version: 5.3.0
+    '@matrix-org/emojibase-bindings':
+      specifier: 1.5.0
+      version: 1.5.0
     '@playwright/test':
-      specifier: 1.59.1
-      version: 1.59.1
+      specifier: 1.61.1
+      version: 1.61.1
+    '@typescript/native':
+      specifier: npm:typescript@7.0.2
+      version: 7.0.2
     '@vector-im/compound-design-tokens':
-      specifier: 10.1.1
-      version: 10.1.1
+      specifier: 10.2.1
+      version: 10.2.1
     '@vector-im/compound-web':
-      specifier: 9.3.0
-      version: 9.3.0
+      specifier: 10.0.1
+      version: 10.0.1
+    '@vitejs/plugin-react':
+      specifier: 6.0.5
+      version: 6.0.5
+    '@vitest/browser-playwright':
+      specifier: 4.1.10
+      version: 4.1.10
     '@vitest/coverage-v8':
-      specifier: 4.1.5
-      version: 4.1.5
+      specifier: 4.1.10
+      version: 4.1.10
+    '@vitest/spy':
+      specifier: 4.1.10
+      version: 4.1.10
     matrix-web-i18n:
       specifier: 3.6.0
       version: 3.6.0
     playwright-core:
-      specifier: 1.59.1
-      version: 1.59.1
+      specifier: 1.61.1
+      version: 1.61.1
     react:
       specifier: ^19.0.0
-      version: 19.2.6
+      version: 19.2.8
     react-dom:
       specifier: ^19.0.0
-      version: 19.2.6
+      version: 19.2.8
     typescript:
-      specifier: 6.0.3
-      version: 6.0.3
+      specifier: 7.0.2
+      version: 7.0.2
+    unplugin-dts:
+      specifier: 1.0.1
+      version: 1.0.1
     vite:
-      specifier: 8.0.10
-      version: 8.0.10
+      specifier: 8.2.0
+      version: 8.2.0
+    vite-plugin-node-polyfills:
+      specifier: 0.28.0
+      version: 0.28.0
+    vite-plugin-svgr:
+      specifier: 5.2.0
+      version: 5.2.0
     vitest:
-      specifier: 4.1.5
-      version: 4.1.5
-    vitest-sonar-reporter:
-      specifier: 3.0.0
-      version: 3.0.0
+      specifier: 4.1.10
+      version: 4.1.10
+  ts6:
+    typescript:
+      specifier: npm:@typescript/typescript6@6.0.2
+      version: 6.0.2
 
 overrides:
-  pretty-format@30>react-is: 19.2.5
+  pretty-format@30>react-is: 19.2.8
   '@types/react': ^19.2.10
   '@types/react-dom': ^19.2.3
-  oidc-client-ts: 3.5.0
-  jwt-decode: 4.0.0
-  caniuse-lite: 1.0.30001791
-  markdown-it: 14.1.1
-  testcontainers: ^11.0.0
-  matrix-widget-api: ^1.17.0
-  qs: 6.15.0
-  '@types/node': 18.19.130
+  caniuse-lite: 1.0.30001806
+  matrix-widget-api: ^1.18.0
+  '@types/node': 25.9.3
   config-file-ts: 0.2.8-rc1
-  node-abi: 4.29.0
-  '@types/pg-pool': 2.0.7
-  ajv@6.12.6: 6.14.0
-  ajv@>=8 <8.18.0: 8.18.0
-  axios@>1.0.0 <1.15.0: 1.15.2
-  picomatch@>=4.0.0 <4.0.4: 4.0.4
-  esbuild@<=0.24.2: 0.27.4
-  esbuild@~0.27.0: 0.27.4
-  minimatch@>=10.0.0 <10.2.3: '>=10.2.3'
-  lodash@4.17.23: 4.18.1
-  follow-redirects@1.15.11: 1.16.0
-  '@actions/github@6.0.1': 8.0.1
-  dompurify@>=3.0.0 <=3.3.3: 3.4.0
-  protobufjs@>=7.0.0 <7.5.5: 7.5.5
-  '@xmldom/xmldom@0.8.12': 0.8.13
+  node-abi: 4.33.0
+  markdown-it: ^14.3.0
+  axios@>1.0.0 <=1.16.1: ^1.16.1
+  esbuild@<=0.27.4: 0.27.4
+  brace-expansion@>=1 <1.1.18: ^1.1.18
+  brace-expansion@>=2 <2.1.4: ^2.1.4
+  brace-expansion@>=5 <=5.0.5: ^5.0.9
+  ip-address@>=10 <10.1.1: ^10.3.1
+  yaml@>=2 <2.8.3: ^2.8.4
+  protobufjs@7 <7.5.8: ^7.6.5
+  '@protobufjs/utf8@1 <1.1.1': ^1.1.1
+  undici@6 <6.28.0: ^6.28.0
+  undici@7 <7.28.0: ^7.29.0
+  undici@8 <8.9.0: ^8.9.0
+  vitepress>vite: ^6.4.3
+  dompurify@3 <=3.4.11: ^3.4.12
+  body-parser@2 <2.3.0: ^2.3.0
+  nx: 23.1.1
+  tar@7 <=7.5.20: ^7.5.21
+  svgo@3 <3.3.4: ^3.3.4
+  svgo@4 <4.0.2: ^4.0.2
+  fast-uri@3 <3.1.5: ^3.1.5
+  unplugin-dts>typescript: npm:@typescript/typescript6@6.0.2
+  '@microsoft/api-extractor>typescript': npm:@typescript/typescript6@6.0.2
+  '@arcmantle/vite-plugin-import-css-sheet>typescript': npm:@typescript/typescript6@6.0.2
+  react-docgen-typescript>typescript: npm:@typescript/typescript6@6.0.2
 
-packageExtensionsChecksum: sha256-EMEi1vcyzQthk7O/0AcntvnHgJaKCoFBlzp6iX/qNYk=
+packageExtensionsChecksum: sha256-kCJccFy7l6HmjcpzmxV958fHndI9zZq246f1ttgkURI=
 
 patchedDependencies:
-  '@matrix-org/react-sdk-module-api':
-    hash: 016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96
-    path: patches/@matrix-org__react-sdk-module-api.patch
-  '@types/auto-launch':
-    hash: b60dc9846a11a1684ce52c55493f29ea398d3dc44b88f66ab44e9843d6c01538
-    path: patches/@types__auto-launch.patch
-  '@types/mdx':
-    hash: c209882c533714d2dcbf4cf397002125ea83677ef152eff403386611cd0f0d3a
-    path: patches/@types__mdx.patch
-  '@vector-im/matrix-wysiwyg':
-    hash: 7bdf6150f2905bc2f055a6bcaa7b9d78fa7ffde82e800bcc454ac7b0096bd65e
-    path: patches/@vector-im__matrix-wysiwyg.patch
-  app-builder-lib:
-    hash: 2dfb3fcdfe573cca6c248cecf63ddea5c8fa0276859695fba6c9664d0ff285d6
-    path: patches/app-builder-lib.patch
-  await-lock:
-    hash: b767a571946a4f8710ac54b1a7bec8a7c1570f9b85d75922392fae20d0578964
-    path: patches/await-lock.patch
-  jest-fixed-jsdom:
-    hash: b4bc876eca343b57d231c1cf9817ddb13ff04503ece7794d1690f342f6289ad3
-    path: patches/jest-fixed-jsdom.patch
-  jsdom:
-    hash: 040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f
-    path: patches/jsdom.patch
-  knip:
-    hash: 9ee905cce2466e391db69dfcea905b0fe2502afd935d1dc6a6ac94ffe2855c28
-    path: patches/knip.patch
-  linkify-html:
-    hash: 1761c1eabe25d9fae83f74f27a20b3d24515840a4a8747bb04828df46bcfdea2
-    path: patches/linkify-html.patch
-  plist:
-    hash: 7a3c35087f0ab2a8efbac9e2899990f07d61e2b3e41d8d962ef0bdb0786e1af7
-    path: patches/plist.patch
-  postcss-mixins:
-    hash: 30fc882486b610a1c252340c87a99f1030c50e698a3c57c837eff7232e29d6d0
-    path: patches/postcss-mixins.patch
-  react-blurhash:
-    hash: 58bc7f075478017ce27bcc252e8509876390db106246bd5b0a7446642cc4b505
-    path: patches/react-blurhash.patch
-  rollup:
-    hash: 603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8
-    path: patches/rollup.patch
+  '@arcmantle/vite-plugin-import-css-sheet': 8019aa9feca17db6bab3483612b4150c911d70b58fddc52bf2d7258a1484a747
+  '@matrix-org/react-sdk-module-api': 016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96
+  '@tanstack/virtual-core@3.17.6': 9db9d80c4fe7a7a9911643522aef9bc9359075570c38f3d847ff75ed635d921c
+  '@types/auto-launch': b60dc9846a11a1684ce52c55493f29ea398d3dc44b88f66ab44e9843d6c01538
+  '@vector-im/matrix-wysiwyg': 7bdf6150f2905bc2f055a6bcaa7b9d78fa7ffde82e800bcc454ac7b0096bd65e
+  await-lock: b767a571946a4f8710ac54b1a7bec8a7c1570f9b85d75922392fae20d0578964
+  jest-fixed-jsdom: b4bc876eca343b57d231c1cf9817ddb13ff04503ece7794d1690f342f6289ad3
+  jsdom: 040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f
+  knip: 9ee905cce2466e391db69dfcea905b0fe2502afd935d1dc6a6ac94ffe2855c28
+  linkify-html: 1761c1eabe25d9fae83f74f27a20b3d24515840a4a8747bb04828df46bcfdea2
+  plist: 7a3c35087f0ab2a8efbac9e2899990f07d61e2b3e41d8d962ef0bdb0786e1af7
+  postcss-mixins: 30fc882486b610a1c252340c87a99f1030c50e698a3c57c837eff7232e29d6d0
+  react-blurhash: 58bc7f075478017ce27bcc252e8509876390db106246bd5b0a7446642cc4b505
 
 importers:
 
@@ -133,61 +335,79 @@ importers:
         version: 0.6.0
       '@nx-tools/nx-container':
         specifier: ^7.2.1
-        version: 7.2.3(@nx/devkit@22.6.5(nx@22.7.1))(@nx/js@22.6.5(@babel/traverse@7.29.0)(nx@22.7.1))(dotenv@17.4.2)(nx@22.7.1)(tslib@2.8.1)
+        version: 7.3.0(@nx/devkit@22.6.5)(@nx/js@22.6.5)(dotenv@17.4.2)(nx@23.1.1)(tslib@2.8.1)
       '@playwright/test':
         specifier: 'catalog:'
-        version: 1.59.1
+        version: 1.61.1
       '@types/node':
-        specifier: 18.19.130
-        version: 18.19.130
+        specifier: 25.9.3
+        version: 25.9.3
+      '@typescript/native':
+        specifier: 'catalog:'
+        version: typescript@7.0.2
+      '@vitest/coverage-v8':
+        specifier: 'catalog:'
+        version: 4.1.10(@vitest/browser@4.1.10)(vitest@4.1.10)
       cronstrue:
         specifier: ^3.0.0
-        version: 3.14.0
-      eslint-plugin-matrix-org:
-        specifier: ^3.0.0
-        version: 3.0.0(ada405a187c98c376554188eb28e4a55)
+        version: 3.24.0
+      eslint-plugin-element-call:
+        specifier: github:element-hq/element-call#livekit&path:/eslint
+        version: https://codeload.github.com/element-hq/element-call/tar.gz/2d64cf4b308c770118dbbdb914af332e5baa7702#path:/eslint
+      eslint-plugin-storybook:
+        specifier: ^10.4.6
+        version: 10.5.5(@typescript/typescript6@6.0.2)(eslint@8.57.1)(storybook@10.5.5)(supports-color@7.2.0)
       husky:
         specifier: ^9.0.0
         version: 9.1.7
       knip:
-        specifier: 6.11.0
-        version: 6.11.0(patch_hash=9ee905cce2466e391db69dfcea905b0fe2502afd935d1dc6a6ac94ffe2855c28)(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+        specifier: 6.29.0
+        version: 6.29.0(patch_hash=9ee905cce2466e391db69dfcea905b0fe2502afd935d1dc6a6ac94ffe2855c28)
       lint-staged:
         specifier: ^17.0.0
-        version: 17.0.2
+        version: 17.2.0
       lodash:
-        specifier: 4.18.1
+        specifier: ^4.17.21
         version: 4.18.1
       mermaid:
         specifier: ^11.13.0
-        version: 11.14.0
+        version: 11.16.0
       minimist:
         specifier: ^1.2.6
         version: 1.2.8
       nx:
-        specifier: 22.7.1
-        version: 22.7.1
-      prettier:
-        specifier: 3.8.3
-        version: 3.8.3
+        specifier: 23.1.1
+        version: 23.1.1
+      oxfmt:
+        specifier: 0.60.0
+        version: 0.60.0
+      oxlint:
+        specifier: ^1.70.0
+        version: 1.75.0(oxlint-tsgolint@7.0.2001)
+      oxlint-tsgolint:
+        specifier: ^7.0.0
+        version: 7.0.2001
       typescript:
-        specifier: 'catalog:'
-        version: 6.0.3
+        specifier: catalog:ts6
+        version: '@typescript/typescript6@6.0.2'
       vitepress:
         specifier: ^1.6.4
-        version: 1.6.4(@algolia/client-search@5.50.0)(@types/node@18.19.130)(@types/react@19.2.14)(axios@1.15.2)(jwt-decode@4.0.0)(lightningcss@1.32.0)(postcss@8.5.14)(qrcode@1.5.4)(search-insights@2.17.3)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(typescript@6.0.3)
+        version: 1.6.4(@algolia/client-search@5.50.0)(@types/node@25.9.3)(@types/react@19.2.18)(@typescript/typescript6@6.0.2)(axios@1.19.0)(jiti@2.7.0)(lightningcss@1.33.0)(postcss@8.5.25)(qrcode@1.5.4)(react@19.2.8)(search-insights@2.17.3)(sugarss@5.0.1)(terser@5.49.0)(yaml@2.9.0)
       vitepress-plugin-mermaid:
         specifier: ^2.0.17
-        version: 2.0.17(mermaid@11.14.0)(vitepress@1.6.4(@algolia/client-search@5.50.0)(@types/node@18.19.130)(@types/react@19.2.14)(axios@1.15.2)(jwt-decode@4.0.0)(lightningcss@1.32.0)(postcss@8.5.14)(qrcode@1.5.4)(search-insights@2.17.3)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(typescript@6.0.3))
+        version: 2.0.17(mermaid@11.16.0)(vitepress@1.6.4)
+      vitest:
+        specifier: 'catalog:'
+        version: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(happy-dom@20.11.1)(jsdom@26.1.0)(vite@8.2.0)
       yaml:
-        specifier: ^2.3.3
-        version: 2.8.4
+        specifier: ^2.8.4
+        version: 2.9.0
 
   apps/desktop:
     dependencies:
       '@sentry/electron':
         specifier: ^7.0.0
-        version: 7.13.0
+        version: 7.16.0(@opentelemetry/core@2.10.0)(supports-color@10.2.2)
       auto-launch:
         specifier: ^5.0.5
         version: 5.0.6
@@ -205,35 +425,29 @@ importers:
         version: 1.2.8
       png-to-ico:
         specifier: ^3.0.0
-        version: 3.0.1
+        version: 3.0.2
       uuid:
         specifier: ^14.0.0
-        version: 14.0.0
+        version: 14.0.1
     devDependencies:
       '@babel/core':
         specifier: ^7.18.10
-        version: 7.29.0
+        version: 7.29.7(supports-color@10.2.2)
       '@babel/preset-env':
         specifier: ^7.18.10
-        version: 7.29.5(@babel/core@7.29.0)
+        version: 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
       '@babel/preset-typescript':
         specifier: ^7.18.6
-        version: 7.28.5(@babel/core@7.29.0)
+        version: 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
       '@electron/asar':
-        specifier: 4.2.0
-        version: 4.2.0
+        specifier: 4.2.1
+        version: 4.2.1
       '@electron/fuses':
         specifier: ^2.1.1
-        version: 2.1.1
-      '@element-hq/vite-common':
-        specifier: workspace:*
-        version: link:../../packages/vite-common
+        version: 2.1.3
       '@playwright/test':
         specifier: 'catalog:'
-        version: 1.59.1
-      '@stylistic/eslint-plugin':
-        specifier: ^5.0.0
-        version: 5.10.0(eslint@8.57.1)
+        version: 1.61.1
       '@types/auto-launch':
         specifier: ^5.0.1
         version: 5.0.5(patch_hash=b60dc9846a11a1684ce52c55493f29ea398d3dc44b88f66ab44e9843d6c01538)
@@ -244,23 +458,17 @@ importers:
         specifier: ^1.2.1
         version: 1.2.5
       '@types/node':
-        specifier: 18.19.130
-        version: 18.19.130
+        specifier: 25.9.3
+        version: 25.9.3
       '@types/pacote':
         specifier: ^11.1.1
         version: 11.1.8
-      '@typescript-eslint/eslint-plugin':
-        specifier: ^8.0.0
-        version: 8.59.2(@typescript-eslint/parser@8.59.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)(typescript@6.0.3)
-      '@typescript-eslint/parser':
-        specifier: ^8.0.0
-        version: 8.59.2(eslint@8.57.1)(typescript@6.0.3)
-      '@vitest/coverage-v8':
+      '@typescript/native':
         specifier: 'catalog:'
-        version: 4.1.5(@vitest/browser@4.1.5)(vitest@4.1.5)
+        version: typescript@7.0.2
       app-builder-lib:
-        specifier: 26.9.1
-        version: 26.9.1(patch_hash=2dfb3fcdfe573cca6c248cecf63ddea5c8fa0276859695fba6c9664d0ff285d6)(dmg-builder@26.9.1)(electron-builder-squirrel-windows@26.9.1)
+        specifier: 26.15.3
+        version: 26.15.3(dmg-builder@26.15.3)(electron-builder-squirrel-windows@26.15.3)(supports-color@10.2.2)
       chokidar:
         specifier: ^5.0.0
         version: 5.0.0
@@ -268,77 +476,53 @@ importers:
         specifier: ^2.0.0
         version: 2.1.2
       electron:
-        specifier: 42.0.0
-        version: 42.0.0
+        specifier: 43.2.0
+        version: 43.2.0(supports-color@10.2.2)
       electron-builder:
-        specifier: 26.9.1
-        version: 26.9.1(electron-builder-squirrel-windows@26.9.1)
+        specifier: 26.15.3
+        version: 26.15.3(electron-builder-squirrel-windows@26.15.3)(supports-color@10.2.2)
       electron-builder-squirrel-windows:
-        specifier: 26.9.1
-        version: 26.9.1(dmg-builder@26.9.1)
+        specifier: 26.15.3
+        version: 26.15.3(dmg-builder@26.15.3)(supports-color@10.2.2)
       electron-devtools-installer:
         specifier: ^4.0.0
         version: 4.0.0
-      eslint:
-        specifier: ^8.26.0
-        version: 8.57.1
-      eslint-config-google:
-        specifier: ^0.14.0
-        version: 0.14.0(eslint@8.57.1)
-      eslint-config-prettier:
-        specifier: ^10.0.0
-        version: 10.1.8(eslint@8.57.1)
-      eslint-plugin-import:
-        specifier: ^2.25.4
-        version: 2.32.0(@typescript-eslint/parser@8.59.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)
-      eslint-plugin-matrix-org:
-        specifier: ^3.0.0
-        version: 3.0.0(ada405a187c98c376554188eb28e4a55)
-      eslint-plugin-n:
-        specifier: ^17.12.0
-        version: 17.24.0(eslint@8.57.1)(typescript@6.0.3)
-      eslint-plugin-unicorn:
-        specifier: ^56.0.0
-        version: 56.0.1(eslint@8.57.1)
       glob:
         specifier: ^13.0.0
         version: 13.0.6
       matrix-web-i18n:
         specifier: 'catalog:'
-        version: 3.6.0
+        version: 3.6.0(supports-color@10.2.2)
       memfs:
         specifier: ^4.57.2
-        version: 4.57.2(tslib@2.8.1)
+        version: 4.64.0(tslib@2.8.1)
       mkdirp:
         specifier: ^3.0.0
         version: 3.0.1
       pacote:
-        specifier: ^21.0.0
-        version: 21.5.0
-      prettier:
-        specifier: ^3.0.0
-        version: 3.8.3
+        specifier: ^22.0.0
+        version: 22.0.0(supports-color@10.2.2)
       rimraf:
         specifier: ^6.0.0
         version: 6.1.3
+      shared-types:
+        specifier: workspace:*
+        version: link:../../packages/shared-types
       tar:
-        specifier: ^7.5.8
-        version: 7.5.13
+        specifier: ^7.5.21
+        version: 7.5.22
       typescript:
-        specifier: 6.0.3
-        version: 6.0.3
+        specifier: catalog:ts6
+        version: '@typescript/typescript6@6.0.2'
       vitest:
         specifier: 'catalog:'
-        version: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.5)(@vitest/coverage-v8@4.1.5)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))
-      vitest-sonar-reporter:
-        specifier: 'catalog:'
-        version: 3.0.0(vitest@4.1.5)
+        version: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(happy-dom@20.11.1)(jsdom@26.1.0)(vite@8.2.0)
 
   apps/web:
     dependencies:
       '@babel/runtime':
         specifier: ^7.12.5
-        version: 7.29.2
+        version: 7.29.7
       '@element-hq/element-web-module-api':
         specifier: workspace:*
         version: link:../../packages/module-api
@@ -347,46 +531,46 @@ importers:
         version: link:../../packages/shared-components
       '@fontsource/fira-code':
         specifier: ^5
-        version: 5.2.7
+        version: 5.3.0
       '@fontsource/inter':
         specifier: 'catalog:'
-        version: 5.2.8
+        version: 5.3.0
       '@formatjs/intl-segmenter':
         specifier: ^12.0.0
-        version: 12.2.4
+        version: 12.2.13
       '@matrix-org/analytics-events':
-        specifier: ^0.33.0
-        version: 0.33.2
+        specifier: ^0.37.0
+        version: 0.37.0
       '@matrix-org/emojibase-bindings':
-        specifier: ^1.5.0
+        specifier: 'catalog:'
         version: 1.5.0
       '@matrix-org/react-sdk-module-api':
         specifier: ^2.4.0
-        version: 2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.6)
+        version: 2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.8)
       '@sentry/browser':
         specifier: ^10.0.0
-        version: 10.51.0
+        version: 10.68.0
       '@types/png-chunks-extract':
         specifier: ^1.0.2
         version: 1.0.2
       '@vector-im/compound-design-tokens':
         specifier: 'catalog:'
-        version: 10.1.1(@types/react@19.2.14)(react@19.2.6)
+        version: 10.2.1(@types/react@19.2.18)(react@19.2.8)
       '@vector-im/compound-web':
         specifier: 'catalog:'
-        version: 9.3.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vector-im/compound-design-tokens@10.1.1(@types/react@19.2.14)(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+        version: 10.0.1(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.3)(@types/react@19.2.18)(@vector-im/compound-design-tokens@10.2.1)(react-dom@19.2.8)(react@19.2.8)
       '@vector-im/matrix-wysiwyg':
         specifier: 2.40.0
-        version: 2.40.0(patch_hash=7bdf6150f2905bc2f055a6bcaa7b9d78fa7ffde82e800bcc454ac7b0096bd65e)(react@19.2.6)
+        version: 2.40.0(patch_hash=7bdf6150f2905bc2f055a6bcaa7b9d78fa7ffde82e800bcc454ac7b0096bd65e)(react@19.2.8)
       '@zxcvbn-ts/core':
-        specifier: ^3.0.4
-        version: 3.0.4
+        specifier: ^4.0.0
+        version: 4.1.2
       '@zxcvbn-ts/language-common':
-        specifier: ^3.0.4
-        version: 3.0.4
+        specifier: ^4.0.0
+        version: 4.1.3
       '@zxcvbn-ts/language-en':
-        specifier: ^3.0.2
-        version: 3.0.2
+        specifier: ^4.0.0
+        version: 4.1.1
       await-lock:
         specifier: ^3.0.0
         version: 3.0.0(patch_hash=b767a571946a4f8710ac54b1a7bec8a7c1570f9b85d75922392fae20d0578964)
@@ -398,7 +582,7 @@ importers:
         version: 2.0.5
       browserslist:
         specifier: ^4.23.2
-        version: 4.28.2
+        version: 4.28.7
       classnames:
         specifier: ^2.2.6
         version: 2.5.1
@@ -423,12 +607,15 @@ importers:
       escape-html:
         specifier: ^1.0.3
         version: 1.0.3
+      events:
+        specifier: ^3.3.0
+        version: 3.3.0
       file-saver:
         specifier: ^2.0.5
         version: 2.0.5
       filesize:
-        specifier: 11.0.17
-        version: 11.0.17
+        specifier: 11.0.22
+        version: 11.0.22
       github-markdown-css:
         specifier: ^5.5.1
         version: 5.9.0
@@ -443,13 +630,10 @@ importers:
         version: 2.6.0
       html-react-parser:
         specifier: ^6.0.0
-        version: 6.0.1(@types/react@19.2.14)(react@19.2.6)
+        version: 6.1.5(@types/react@19.2.18)(react@19.2.8)
       is-ip:
         specifier: ^5.0.0
         version: 5.0.1
-      js-xxhash:
-        specifier: ^5.0.0
-        version: 5.0.1
       jsrsasign:
         specifier: ^11.0.0
         version: 11.1.3
@@ -457,8 +641,8 @@ importers:
         specifier: ^3.7.0
         version: 3.10.1
       katex:
-        specifier: ^0.16.0
-        version: 0.16.45
+        specifier: ^0.18.0
+        version: 0.18.1
       lodash:
         specifier: npm:lodash-es@4.18.1
         version: lodash-es@4.18.1
@@ -469,59 +653,56 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       matrix-js-sdk:
-        specifier: github:matrix-org/matrix-js-sdk#d19cb751da8bbdc75c19db751fff25f21761d23a
-        version: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/d19cb751da8bbdc75c19db751fff25f21761d23a
+        specifier: 42.2.0
+        version: 42.2.0
       matrix-widget-api:
-        specifier: ^1.17.0
-        version: 1.17.0
+        specifier: ^1.18.0
+        version: 1.18.0
       memoize-one:
         specifier: ^6.0.0
         version: 6.0.0
       mime:
         specifier: ^4.0.4
         version: 4.1.0
-      oidc-client-ts:
-        specifier: 3.5.0
-        version: 3.5.0
       opus-recorder:
         specifier: ^8.0.3
         version: 8.0.5
       pako:
-        specifier: ^2.0.3
-        version: 2.1.0
+        specifier: ^3.0.0
+        version: 3.0.1
       png-chunks-extract:
         specifier: ^1.0.0
         version: 1.0.0
       posthog-js:
-        specifier: 1.372.8
-        version: 1.372.8
+        specifier: 1.407.2
+        version: 1.407.2
       qrcode:
         specifier: 1.5.4
         version: 1.5.4
       re-resizable:
         specifier: 6.11.2
-        version: 6.11.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+        version: 6.11.2(react-dom@19.2.8)(react@19.2.8)
       react:
         specifier: 'catalog:'
-        version: 19.2.6
+        version: 19.2.8
       react-beautiful-dnd:
         specifier: ^13.1.0
-        version: 13.1.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+        version: 13.1.1(react-dom@19.2.8)(react@19.2.8)
       react-blurhash:
         specifier: ^0.3.0
-        version: 0.3.0(patch_hash=58bc7f075478017ce27bcc252e8509876390db106246bd5b0a7446642cc4b505)(blurhash@2.0.5)(react@19.2.6)
+        version: 0.3.0(patch_hash=58bc7f075478017ce27bcc252e8509876390db106246bd5b0a7446642cc4b505)(blurhash@2.0.5)(react@19.2.8)
       react-dom:
         specifier: 'catalog:'
-        version: 19.2.6(react@19.2.6)
+        version: 19.2.8(react@19.2.8)
       react-focus-lock:
         specifier: ^2.5.1
-        version: 2.13.7(@types/react@19.2.14)(react@19.2.6)
+        version: 2.13.7(@types/react@19.2.18)(react@19.2.8)
       react-string-replace:
         specifier: ^2.0.0
         version: 2.0.1
       react-transition-group:
         specifier: ^4.4.1
-        version: 4.4.5(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+        version: 4.4.5(react-dom@19.2.8)(react@19.2.8)
       rfc4648:
         specifier: ^1.4.0
         version: 1.5.4
@@ -529,8 +710,8 @@ importers:
         specifier: ^1.6.3
         version: 1.6.4
       sanitize-html:
-        specifier: 2.17.3
-        version: 2.17.3
+        specifier: 2.17.6
+        version: 2.17.6
       tar-js:
         specifier: ^0.3.0
         version: 0.3.0
@@ -543,55 +724,49 @@ importers:
     devDependencies:
       '@babel/core':
         specifier: ^7.12.10
-        version: 7.29.0
-      '@babel/eslint-parser':
-        specifier: ^7.12.10
-        version: 7.28.6(@babel/core@7.29.0)(eslint@8.57.1)
-      '@babel/eslint-plugin':
-        specifier: ^7.12.10
-        version: 7.27.1(@babel/eslint-parser@7.28.6(@babel/core@7.29.0)(eslint@8.57.1))(eslint@8.57.1)
+        version: 7.29.7(supports-color@10.2.2)
       '@babel/plugin-proposal-decorators':
         specifier: ^7.25.9
-        version: 7.29.0(@babel/core@7.29.0)
+        version: 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
       '@babel/plugin-proposal-export-default-from':
         specifier: ^7.12.1
-        version: 7.27.1(@babel/core@7.29.0)
+        version: 7.29.7(@babel/core@7.29.7)
       '@babel/plugin-syntax-dynamic-import':
         specifier: ^7.8.3
-        version: 7.8.3(@babel/core@7.29.0)
+        version: 7.8.3(@babel/core@7.29.7)
       '@babel/plugin-transform-class-properties':
         specifier: ^7.12.1
-        version: 7.28.6(@babel/core@7.29.0)
+        version: 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
       '@babel/plugin-transform-class-static-block':
         specifier: ^7.26.0
-        version: 7.28.6(@babel/core@7.29.0)
+        version: 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
       '@babel/plugin-transform-logical-assignment-operators':
         specifier: ^7.20.7
-        version: 7.28.6(@babel/core@7.29.0)
+        version: 7.29.7(@babel/core@7.29.7)
       '@babel/plugin-transform-nullish-coalescing-operator':
         specifier: ^7.12.1
-        version: 7.28.6(@babel/core@7.29.0)
+        version: 7.29.7(@babel/core@7.29.7)
       '@babel/plugin-transform-numeric-separator':
         specifier: ^7.12.7
-        version: 7.28.6(@babel/core@7.29.0)
+        version: 7.29.7(@babel/core@7.29.7)
       '@babel/plugin-transform-object-rest-spread':
         specifier: ^7.12.1
-        version: 7.28.6(@babel/core@7.29.0)
+        version: 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
       '@babel/plugin-transform-optional-chaining':
         specifier: ^7.12.7
-        version: 7.28.6(@babel/core@7.29.0)
+        version: 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
       '@babel/plugin-transform-runtime':
         specifier: ^7.12.10
-        version: 7.29.0(@babel/core@7.29.0)
+        version: 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
       '@babel/preset-env':
         specifier: ^7.12.11
-        version: 7.29.5(@babel/core@7.29.0)
+        version: 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
       '@babel/preset-react':
         specifier: ^7.12.10
-        version: 7.28.5(@babel/core@7.29.0)
+        version: 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
       '@babel/preset-typescript':
         specifier: ^7.12.7
-        version: 7.28.5(@babel/core@7.29.0)
+        version: 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
       '@casualbot/jest-sonar-reporter':
         specifier: 2.7.0
         version: 2.7.0
@@ -600,49 +775,46 @@ importers:
         version: link:../../packages/playwright-common
       '@fetch-mock/jest':
         specifier: ^0.2.20
-        version: 0.2.20(@jest/globals@30.3.0)(jest@30.3.0(@types/node@18.19.130)(babel-plugin-macros@3.1.0))
+        version: 0.2.20(@jest/globals@30.4.1)(jest@30.4.2)
+      '@fetch-mock/vitest':
+        specifier: ^0.2.18
+        version: 0.2.18(vitest@4.1.10)
       '@jest/globals':
         specifier: ^30.2.0
-        version: 30.3.0
+        version: 30.4.1(supports-color@10.2.2)
       '@peculiar/webcrypto':
         specifier: ^1.4.3
         version: 1.7.1
       '@playwright/test':
         specifier: 'catalog:'
-        version: 1.59.1
+        version: 1.61.1
       '@principalstudio/html-webpack-inject-preload':
         specifier: ^1.2.7
-        version: 1.2.7(html-webpack-plugin@5.6.7(webpack@5.106.2))(webpack@5.106.2)
+        version: 1.2.7(html-webpack-plugin@5.6.8)(webpack@5.109.2)
       '@sentry/webpack-plugin':
         specifier: ^5.0.0
-        version: 5.2.1(encoding@0.1.13)(webpack@5.106.2)
+        version: 5.4.0(rollup@4.60.1)(supports-color@10.2.2)(webpack@5.109.2)
       '@sorb/threadnet-call-embedded':
         specifier: 0.19.2-threadnet.12
         version: 0.19.2-threadnet.12
-      '@stylistic/eslint-plugin':
-        specifier: ^5.0.0
-        version: 5.10.0(eslint@8.57.1)
       '@svgr/webpack':
         specifier: ^8.0.0
-        version: 8.1.0(typescript@6.0.3)
+        version: 8.1.0(@typescript/typescript6@6.0.2)(supports-color@10.2.2)
       '@testing-library/dom':
         specifier: ^10.4.0
         version: 10.4.1
       '@testing-library/jest-dom':
-        specifier: ^6.4.8
-        version: 6.9.1
+        specifier: ^7.0.0
+        version: 7.0.0(@testing-library/dom@10.4.1)
       '@testing-library/react':
         specifier: ^16.0.0
-        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
       '@testing-library/user-event':
         specifier: ^14.5.2
         version: 14.6.1(@testing-library/dom@10.4.1)
       '@types/commonmark':
         specifier: ^0.27.4
         version: 0.27.10
-      '@types/content-type':
-        specifier: ^1.1.9
-        version: 1.1.9
       '@types/css-tree':
         specifier: ^2.3.8
         version: 2.3.11
@@ -677,11 +849,8 @@ importers:
         specifier: ^3.5.3
         version: 3.5.6
       '@types/node':
-        specifier: 18.19.130
-        version: 18.19.130
-      '@types/pako':
-        specifier: ^2.0.0
-        version: 2.0.4
+        specifier: 25.9.3
+        version: 25.9.3
       '@types/postcss-import':
         specifier: ^14.0.3
         version: 14.0.3
@@ -690,22 +859,22 @@ importers:
         version: 1.5.6
       '@types/react':
         specifier: ^19.2.10
-        version: 19.2.14
+        version: 19.2.18
       '@types/react-beautiful-dnd':
         specifier: ^13.0.0
         version: 13.1.8
       '@types/react-dom':
         specifier: ^19.2.3
-        version: 19.2.3(@types/react@19.2.14)
+        version: 19.2.3(@types/react@19.2.18)
       '@types/react-transition-group':
         specifier: ^4.4.0
-        version: 4.4.12(@types/react@19.2.14)
+        version: 4.4.12(@types/react@19.2.18)
       '@types/sanitize-html':
         specifier: 2.16.1
         version: 2.16.1
       '@types/sdp-transform':
-        specifier: ^2.4.10
-        version: 2.15.0
+        specifier: ^3.0.0
+        version: 3.0.0
       '@types/semver':
         specifier: ^7.5.8
         version: 7.7.1
@@ -715,102 +884,69 @@ importers:
       '@types/ua-parser-js':
         specifier: ^0.7.36
         version: 0.7.39
-      '@typescript-eslint/eslint-plugin':
-        specifier: ^8.19.0
-        version: 8.59.2(@typescript-eslint/parser@8.59.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)(typescript@6.0.3)
-      '@typescript-eslint/parser':
-        specifier: ^8.19.0
-        version: 8.59.2(eslint@8.57.1)(typescript@6.0.3)
+      '@typescript/native':
+        specifier: 'catalog:'
+        version: typescript@7.0.2
+      '@vitest/spy':
+        specifier: 'catalog:'
+        version: 4.1.10
       babel-jest:
         specifier: ^30.0.0
-        version: 30.3.0(@babel/core@7.29.0)
+        version: 30.4.1(@babel/core@7.29.7)(supports-color@10.2.2)
       babel-loader:
         specifier: ^10.0.0
-        version: 10.1.1(@babel/core@7.29.0)(webpack@5.106.2)
+        version: 10.1.1(@babel/core@7.29.7)(webpack@5.109.2)
       babel-plugin-jsx-remove-data-test-id:
         specifier: ^3.0.0
-        version: 3.0.0(@babel/core@7.29.0)
+        version: 3.0.0(@babel/core@7.29.7)
       blob-polyfill:
         specifier: ^9.0.0
         version: 9.0.20240710
       copy-webpack-plugin:
         specifier: ^14.0.0
-        version: 14.0.0(webpack@5.106.2)
+        version: 14.0.0(webpack@5.109.2)
       css-loader:
         specifier: ^7.0.0
-        version: 7.1.4(webpack@5.106.2)
+        version: 7.1.4(webpack@5.109.2)
       css-minimizer-webpack-plugin:
         specifier: ^8.0.0
-        version: 8.0.0(lightningcss@1.32.0)(webpack@5.106.2)
+        version: 8.0.0(clean-css@5.3.3)(csso@5.0.5)(esbuild@0.27.4)(lightningcss@1.33.0)(webpack@5.109.2)
       dotenv:
         specifier: ^17.0.0
         version: 17.4.2
-      eslint:
-        specifier: 8.57.1
-        version: 8.57.1
-      eslint-config-google:
-        specifier: ^0.14.0
-        version: 0.14.0(eslint@8.57.1)
-      eslint-config-prettier:
-        specifier: ^10.0.0
-        version: 10.1.8(eslint@8.57.1)
-      eslint-plugin-deprecate:
-        specifier: 0.9.0
-        version: 0.9.0(eslint@8.57.1)
-      eslint-plugin-import:
-        specifier: ^2.25.4
-        version: 2.32.0(@typescript-eslint/parser@8.59.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)
-      eslint-plugin-jest:
-        specifier: ^29.0.0
-        version: 29.15.2(@typescript-eslint/eslint-plugin@8.59.2(@typescript-eslint/parser@8.59.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)(jest@30.3.0(@types/node@18.19.130)(babel-plugin-macros@3.1.0))(typescript@6.0.3)
-      eslint-plugin-jsx-a11y:
-        specifier: ^6.5.1
-        version: 6.10.2(eslint@8.57.1)
-      eslint-plugin-matrix-org:
-        specifier: ^3.0.0
-        version: 3.0.0(ada405a187c98c376554188eb28e4a55)
-      eslint-plugin-react:
-        specifier: ^7.28.0
-        version: 7.37.5(eslint@8.57.1)
-      eslint-plugin-react-compiler:
-        specifier: ^19.0.0-beta-df7b47d-20241124
-        version: 19.0.0-beta-ebf51a3-20250411(eslint@8.57.1)
-      eslint-plugin-react-hooks:
-        specifier: ^7.0.0
-        version: 7.1.1(eslint@8.57.1)
-      eslint-plugin-unicorn:
-        specifier: ^56.0.0
-        version: 56.0.1(eslint@8.57.1)
       express:
         specifier: ^5.0.0
-        version: 5.2.1
+        version: 5.2.1(supports-color@10.2.2)
       fake-indexeddb:
         specifier: ^6.0.0
         version: 6.2.5
       file-loader:
         specifier: ^6.0.0
-        version: 6.2.0(webpack@5.106.2)
+        version: 6.2.0(webpack@5.109.2)
+      happy-dom:
+        specifier: ^20.10.2
+        version: 20.11.1
       html-webpack-plugin:
         specifier: ^5.5.3
-        version: 5.6.7(webpack@5.106.2)
+        version: 5.6.8(webpack@5.109.2)
       identity-obj-proxy:
         specifier: ^3.0.0
         version: 3.0.0
       jest:
         specifier: ^30.0.0
-        version: 30.3.0(@types/node@18.19.130)(babel-plugin-macros@3.1.0)
+        version: 30.4.2(@types/node@25.9.3)(babel-plugin-macros@3.1.0)(supports-color@10.2.2)
       jest-canvas-mock:
         specifier: ^2.5.2
-        version: 2.5.2
+        version: 2.5.8
       jest-environment-jsdom:
         specifier: ^30.2.0
-        version: 30.3.0
+        version: 30.4.1(supports-color@10.2.2)
       jest-fixed-jsdom:
         specifier: ^0.0.11
-        version: 0.0.11(patch_hash=b4bc876eca343b57d231c1cf9817ddb13ff04503ece7794d1690f342f6289ad3)(jest-environment-jsdom@30.3.0)
+        version: 0.0.11(patch_hash=b4bc876eca343b57d231c1cf9817ddb13ff04503ece7794d1690f342f6289ad3)(jest-environment-jsdom@30.4.1)
       jest-mock:
         specifier: ^30.0.0
-        version: 30.3.0
+        version: 30.4.1
       jest-raw-loader:
         specifier: ^1.0.1
         version: 1.0.1
@@ -819,179 +955,384 @@ importers:
         version: 1.4.0
       matrix-web-i18n:
         specifier: 'catalog:'
-        version: 3.6.0
+        version: 3.6.0(supports-color@10.2.2)
       mini-css-extract-plugin:
         specifier: 2.10.2
-        version: 2.10.2(webpack@5.106.2)
+        version: 2.10.2(webpack@5.109.2)
       modernizr:
         specifier: ^3.12.0
         version: 3.13.1
+      oxfmt:
+        specifier: 0.60.0
+        version: 0.60.0
       playwright-core:
         specifier: 'catalog:'
-        version: 1.59.1
+        version: 1.61.1
       postcss:
-        specifier: 8.5.14
-        version: 8.5.14
+        specifier: 8.5.25
+        version: 8.5.25
       postcss-easings:
         specifier: 4.0.0
-        version: 4.0.0(postcss@8.5.14)
+        version: 4.0.0(postcss@8.5.25)
       postcss-hexrgba:
         specifier: 2.1.0
-        version: 2.1.0(postcss@8.5.14)
+        version: 2.1.0(postcss@8.5.25)
       postcss-import:
         specifier: 16.1.1
-        version: 16.1.1(postcss@8.5.14)
+        version: 16.1.1(postcss@8.5.25)
       postcss-loader:
         specifier: 8.2.1
-        version: 8.2.1(postcss@8.5.14)(typescript@6.0.3)(webpack@5.106.2)
+        version: 8.2.1(@typescript/typescript6@6.0.2)(postcss@8.5.25)(webpack@5.109.2)
       postcss-mixins:
         specifier: 12.1.2
-        version: 12.1.2(patch_hash=30fc882486b610a1c252340c87a99f1030c50e698a3c57c837eff7232e29d6d0)(postcss@8.5.14)
+        version: 12.1.2(patch_hash=30fc882486b610a1c252340c87a99f1030c50e698a3c57c837eff7232e29d6d0)(postcss@8.5.25)
       postcss-nested:
-        specifier: 7.0.2
-        version: 7.0.2(postcss@8.5.14)
+        specifier: 8.0.1
+        version: 8.0.1(postcss@8.5.25)
       postcss-preset-env:
-        specifier: 11.2.1
-        version: 11.2.1(postcss@8.5.14)
+        specifier: 11.3.2
+        version: 11.3.2(postcss@8.5.25)
       postcss-scss:
         specifier: 4.0.9
-        version: 4.0.9(postcss@8.5.14)
+        version: 4.0.9(postcss@8.5.25)
       postcss-simple-vars:
         specifier: 7.0.1
-        version: 7.0.1(postcss@8.5.14)
-      prettier:
-        specifier: 3.8.3
-        version: 3.8.3
+        version: 7.0.1(postcss@8.5.25)
       process:
         specifier: ^0.11.10
         version: 0.11.10
-      raw-loader:
-        specifier: ^4.0.2
-        version: 4.0.2(webpack@5.106.2)
       semver:
         specifier: ^7.5.2
-        version: 7.7.4
+        version: 7.8.5
+      shared-types:
+        specifier: workspace:*
+        version: link:../../packages/shared-types
       source-map-loader:
         specifier: ^5.0.0
-        version: 5.0.0(webpack@5.106.2)
+        version: 5.0.0(webpack@5.109.2)
       stylelint:
         specifier: ^17.0.0
-        version: 17.11.0(typescript@6.0.3)
+        version: 17.14.1(@typescript/typescript6@6.0.2)(supports-color@10.2.2)
       stylelint-config-standard:
         specifier: ^40.0.0
-        version: 40.0.0(stylelint@17.11.0(typescript@6.0.3))
+        version: 40.0.0(stylelint@17.14.1)
       stylelint-scss:
         specifier: ^7.0.0
-        version: 7.0.0(stylelint@17.11.0(typescript@6.0.3))
+        version: 7.2.0(stylelint@17.14.1)
       stylelint-value-no-unknown-custom-properties:
         specifier: ^6.0.1
-        version: 6.1.1(stylelint@17.11.0(typescript@6.0.3))
+        version: 6.1.1(stylelint@17.14.1)
       terser-webpack-plugin:
         specifier: ^5.3.9
-        version: 5.5.0(webpack@5.106.2)
+        version: 5.6.1(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack@5.109.2)
       testcontainers:
-        specifier: ^11.0.0
-        version: 11.14.0
+        specifier: ^12.0.0
+        version: 12.0.4(supports-color@10.2.2)
       typescript:
-        specifier: 'catalog:'
-        version: 6.0.3
+        specifier: catalog:ts6
+        version: '@typescript/typescript6@6.0.2'
       util:
         specifier: ^0.12.5
         version: 0.12.5
+      vite-plugin-svgr:
+        specifier: 'catalog:'
+        version: 5.2.0(@typescript/typescript6@6.0.2)(rollup@4.60.1)(supports-color@10.2.2)(vite@8.2.0)
+      vitest:
+        specifier: 'catalog:'
+        version: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(happy-dom@20.11.1)(jsdom@26.1.0)(vite@8.2.0)
+      vitest-canvas-mock:
+        specifier: ^1.1.4
+        version: 1.1.4(vitest@4.1.10)
       web-streams-polyfill:
         specifier: ^4.0.0
-        version: 4.2.0
+        version: 4.3.0
       webpack:
         specifier: ^5.89.0
-        version: 5.106.2(webpack-cli@7.0.2)
+        version: 5.109.2(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack-cli@7.2.2)
       webpack-bundle-analyzer:
         specifier: ^5.0.0
-        version: 5.3.0
+        version: 5.3.1
       webpack-cli:
         specifier: ^7.0.0
-        version: 7.0.2(webpack-bundle-analyzer@5.3.0)(webpack-dev-server@5.2.3)(webpack@5.106.2)
+        version: 7.2.2(js-yaml@4.3.1)(json5@2.2.3)(webpack-bundle-analyzer@5.3.1)(webpack-dev-server@6.0.0)(webpack@5.109.2)
       webpack-dev-server:
-        specifier: ^5.0.0
-        version: 5.2.3(tslib@2.8.1)(webpack-cli@7.0.2)(webpack@5.106.2)
+        specifier: ^6.0.0
+        version: 6.0.0(supports-color@10.2.2)(tslib@2.8.1)(webpack-cli@7.2.2)(webpack@5.109.2)
       webpack-retry-chunk-load-plugin:
         specifier: ^3.1.1
-        version: 3.1.1(webpack@5.106.2)
+        version: 3.1.1(webpack@5.109.2)
       webpack-version-file-plugin:
         specifier: ^0.5.0
-        version: 0.5.0(webpack@5.106.2)
+        version: 0.5.0(webpack@5.109.2)
       yaml:
-        specifier: ^2.3.3
-        version: 2.8.4
+        specifier: ^2.8.4
+        version: 2.9.0
+
+  modules:
+    devDependencies:
+      '@element-hq/element-web-playwright-common':
+        specifier: workspace:*
+        version: link:../packages/playwright-common
+
+  modules/banner:
+    dependencies:
+      '@radix-ui/react-dialog':
+        specifier: ^1.1.6
+        version: 1.1.23(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@vector-im/compound-design-tokens':
+        specifier: ^10.0.0
+        version: 10.2.1(@types/react@19.2.18)(react@19.2.8)
+      '@vector-im/compound-web':
+        specifier: ^9.0.0
+        version: 9.9.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.3)(@types/react@19.2.18)(@vector-im/compound-design-tokens@10.2.1)(react-dom@19.2.8)(react@19.2.8)
+      motion:
+        specifier: ^12.4.10
+        version: 12.42.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.8)(react@19.2.8)
+      styled-components:
+        specifier: ^6.1.18
+        version: 6.4.4(react-dom@19.2.8)(react@19.2.8)
+      zod:
+        specifier: ^4.0.0
+        version: 4.4.3
+    devDependencies:
+      '@arcmantle/vite-plugin-import-css-sheet':
+        specifier: ^1.0.12
+        version: 1.0.14(patch_hash=8019aa9feca17db6bab3483612b4150c911d70b58fddc52bf2d7258a1484a747)
+      '@element-hq/element-web-module-api':
+        specifier: workspace:*
+        version: link:../../packages/module-api
+      '@types/node':
+        specifier: 25.9.3
+        version: 25.9.3
+      '@types/react':
+        specifier: ^19.2.10
+        version: 19.2.18
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.18)
+      '@vitejs/plugin-react':
+        specifier: 'catalog:'
+        version: 6.0.5(vite@8.2.0)
+      matrix-web-i18n:
+        specifier: ^3.6.0
+        version: 3.6.0(supports-color@10.2.2)
+      matrix-widget-api:
+        specifier: ^1.18.0
+        version: 1.18.0
+      react:
+        specifier: 'catalog:'
+        version: 19.2.8
+      typescript:
+        specifier: 'catalog:'
+        version: 7.0.2
+      vite:
+        specifier: 'catalog:'
+        version: 8.2.0(@types/node@25.9.3)(esbuild@0.27.4)(jiti@2.7.0)(sugarss@5.0.1)(terser@5.49.0)(yaml@2.9.0)
+      vite-plugin-node-polyfills:
+        specifier: 'catalog:'
+        version: 0.28.0(rollup@4.60.1)(vite@8.2.0)
+      vite-plugin-svgr:
+        specifier: 'catalog:'
+        version: 5.2.0(rollup@4.60.1)(supports-color@10.2.2)(typescript@7.0.2)(vite@8.2.0)
+
+  modules/restricted-guests:
+    dependencies:
+      '@vector-im/compound-design-tokens':
+        specifier: ^10.0.0
+        version: 10.2.1(@types/react@19.2.18)(react@19.2.8)
+      '@vector-im/compound-web':
+        specifier: ^9.0.0
+        version: 9.9.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.3)(@types/react@19.2.18)(@vector-im/compound-design-tokens@10.2.1)(react-dom@19.2.8)(react@19.2.8)
+      styled-components:
+        specifier: ^6.1.18
+        version: 6.4.4(react-dom@19.2.8)(react@19.2.8)
+      zod:
+        specifier: ^4.0.0
+        version: 4.4.3
+    devDependencies:
+      '@arcmantle/vite-plugin-import-css-sheet':
+        specifier: ^1.0.12
+        version: 1.0.14(patch_hash=8019aa9feca17db6bab3483612b4150c911d70b58fddc52bf2d7258a1484a747)
+      '@element-hq/element-web-module-api':
+        specifier: workspace:*
+        version: link:../../packages/module-api
+      '@types/node':
+        specifier: 25.9.3
+        version: 25.9.3
+      '@types/react':
+        specifier: ^19.2.10
+        version: 19.2.18
+      '@vitejs/plugin-react':
+        specifier: 'catalog:'
+        version: 6.0.5(vite@8.2.0)
+      react:
+        specifier: 'catalog:'
+        version: 19.2.8
+      testcontainers:
+        specifier: ^12.0.1
+        version: 12.0.4(supports-color@10.2.2)
+      typescript:
+        specifier: 'catalog:'
+        version: 7.0.2
+      vite:
+        specifier: 'catalog:'
+        version: 8.2.0(@types/node@25.9.3)(esbuild@0.27.4)(jiti@2.7.0)(sugarss@5.0.1)(terser@5.49.0)(yaml@2.9.0)
+      vite-plugin-node-polyfills:
+        specifier: 'catalog:'
+        version: 0.28.0(rollup@4.60.1)(vite@8.2.0)
+
+  modules/widget-lifecycle:
+    dependencies:
+      zod:
+        specifier: ^4.0.0
+        version: 4.4.3
+    devDependencies:
+      '@element-hq/element-web-module-api':
+        specifier: workspace:*
+        version: link:../../packages/module-api
+      '@types/node':
+        specifier: 25.9.3
+        version: 25.9.3
+      typescript:
+        specifier: 'catalog:'
+        version: 7.0.2
+      vite:
+        specifier: 'catalog:'
+        version: 8.2.0(@types/node@25.9.3)(esbuild@0.27.4)(jiti@2.7.0)(sugarss@5.0.1)(terser@5.49.0)(yaml@2.9.0)
+      vitest:
+        specifier: 'catalog:'
+        version: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(happy-dom@20.11.1)(jsdom@26.1.0)(vite@8.2.0)
+
+  modules/widget-toggles:
+    dependencies:
+      '@vector-im/compound-design-tokens':
+        specifier: ^10.0.0
+        version: 10.2.1(@types/react@19.2.18)(react@19.2.8)
+      '@vector-im/compound-web':
+        specifier: ^9.0.0
+        version: 9.9.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.3)(@types/react@19.2.18)(@vector-im/compound-design-tokens@10.2.1)(react-dom@19.2.8)(react@19.2.8)
+      matrix-widget-api:
+        specifier: ^1.18.0
+        version: 1.18.0
+      styled-components:
+        specifier: ^6.3.11
+        version: 6.4.4(react-dom@19.2.8)(react@19.2.8)
+      zod:
+        specifier: ^4.3.6
+        version: 4.4.3
+    devDependencies:
+      '@arcmantle/vite-plugin-import-css-sheet':
+        specifier: ^1.0.12
+        version: 1.0.14(patch_hash=8019aa9feca17db6bab3483612b4150c911d70b58fddc52bf2d7258a1484a747)
+      '@element-hq/element-web-module-api':
+        specifier: workspace:*
+        version: link:../../packages/module-api
+      '@testing-library/dom':
+        specifier: ^10.4.1
+        version: 10.4.1
+      '@testing-library/react':
+        specifier: ^16.3.2
+        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@testing-library/user-event':
+        specifier: ^14.6.1
+        version: 14.6.1(@testing-library/dom@10.4.1)
+      '@types/node':
+        specifier: 25.9.3
+        version: 25.9.3
+      '@types/react':
+        specifier: ^19.2.10
+        version: 19.2.18
+      '@vitejs/plugin-react':
+        specifier: 'catalog:'
+        version: 6.0.5(vite@8.2.0)
+      '@vitest/browser-playwright':
+        specifier: 'catalog:'
+        version: 4.1.10(playwright@1.61.1)(vite@8.2.0)(vitest@4.1.10)
+      react:
+        specifier: 'catalog:'
+        version: 19.2.8
+      typescript:
+        specifier: 'catalog:'
+        version: 7.0.2
+      vite:
+        specifier: 'catalog:'
+        version: 8.2.0(@types/node@25.9.3)(esbuild@0.27.4)(jiti@2.7.0)(sugarss@5.0.1)(terser@5.49.0)(yaml@2.9.0)
+      vite-plugin-node-polyfills:
+        specifier: 'catalog:'
+        version: 0.28.0(rollup@4.60.1)(vite@8.2.0)
+      vite-plugin-svgr:
+        specifier: 'catalog:'
+        version: 5.2.0(rollup@4.60.1)(supports-color@7.2.0)(typescript@7.0.2)(vite@8.2.0)
+      vitest:
+        specifier: 'catalog:'
+        version: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(happy-dom@20.11.1)(jsdom@26.1.0)(vite@8.2.0)
 
   packages/module-api:
     dependencies:
       matrix-web-i18n:
         specifier: '*'
-        version: 3.6.0
+        version: 3.6.0(supports-color@10.2.2)
       react:
         specifier: ^19
-        version: 19.2.6
+        version: 19.2.8
     devDependencies:
-      '@element-hq/vite-common':
-        specifier: workspace:*
-        version: link:../vite-common
       '@matrix-org/react-sdk-module-api':
         specifier: ^2.5.0
-        version: 2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.6)
+        version: 2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.8)
       '@microsoft/api-extractor':
         specifier: ^7.49.1
-        version: 7.58.7(@types/node@18.19.130)
+        version: 7.58.12(@types/node@25.9.3)
       '@types/node':
-        specifier: 18.19.130
-        version: 18.19.130
+        specifier: 25.9.3
+        version: 25.9.3
       '@types/react':
         specifier: ^19.2.10
-        version: 19.2.14
+        version: 19.2.18
       '@types/react-dom':
         specifier: ^19.2.3
-        version: 19.2.3(@types/react@19.2.14)
+        version: 19.2.3(@types/react@19.2.18)
       '@types/semver':
         specifier: ^7.5.8
         version: 7.7.1
-      '@vitest/coverage-v8':
+      '@typescript/native':
         specifier: 'catalog:'
-        version: 4.1.5(@vitest/browser@4.1.5)(vitest@4.1.5)
+        version: typescript@7.0.2
       matrix-widget-api:
-        specifier: ^1.17.0
-        version: 1.17.0
+        specifier: ^1.18.0
+        version: 1.18.0
       rollup-plugin-external-globals:
         specifier: ^0.13.0
-        version: 0.13.0(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))
+        version: 0.13.0(rollup@4.60.1)
       semver:
         specifier: ^7.6.3
-        version: 7.7.4
+        version: 7.8.5
+      shared-types:
+        specifier: workspace:*
+        version: link:../shared-types
       typescript:
-        specifier: ^6.0.0
-        version: 6.0.3
+        specifier: catalog:ts6
+        version: '@typescript/typescript6@6.0.2'
       unplugin-dts:
-        specifier: 1.0.0
-        version: 1.0.0(@microsoft/api-extractor@7.58.7(@types/node@18.19.130))(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(typescript@6.0.3)(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(webpack@5.106.2(esbuild@0.27.4))
+        specifier: 'catalog:'
+        version: 1.0.1(@microsoft/api-extractor@7.58.12)(@typescript/typescript6@6.0.2)(esbuild@0.27.4)(rolldown@1.2.2)(rollup@4.60.1)(supports-color@10.2.2)(vite@8.2.0)(webpack@5.109.2)
       vite:
         specifier: 'catalog:'
-        version: 8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4)
+        version: 8.2.0(@types/node@25.9.3)(esbuild@0.27.4)(jiti@2.7.0)(sugarss@5.0.1)(terser@5.49.0)(yaml@2.9.0)
       vitest:
         specifier: 'catalog:'
-        version: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.5)(@vitest/coverage-v8@4.1.5)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))
-      vitest-sonar-reporter:
-        specifier: 'catalog:'
-        version: 3.0.0(vitest@4.1.5)
+        version: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(happy-dom@20.11.1)(jsdom@26.1.0)(vite@8.2.0)
 
   packages/playwright-common:
     dependencies:
       '@axe-core/playwright':
         specifier: ^4.10.1
-        version: 4.11.3(playwright-core@1.59.1)
+        version: 4.12.1(playwright-core@1.61.1)
       '@playwright/test':
         specifier: 'catalog:'
-        version: 1.59.1
+        version: 1.61.1
       '@testcontainers/postgresql':
-        specifier: ^11.0.0
-        version: 11.14.0
+        specifier: ^12.0.0
+        version: 12.0.4(supports-color@10.2.2)
       glob:
         specifier: ^13.0.5
         version: 13.0.6
@@ -1000,22 +1341,22 @@ importers:
         version: 4.18.1
       mailpit-api:
         specifier: ^2.0.0
-        version: 2.0.0
+        version: 2.1.0
       playwright-core:
         specifier: 'catalog:'
-        version: 1.59.1
+        version: 1.61.1
       strip-ansi:
         specifier: ^7.1.0
         version: 7.2.0
       testcontainers:
-        specifier: ^11.0.0
-        version: 11.14.0
+        specifier: ^12.0.0
+        version: 12.0.4(supports-color@10.2.2)
       wait-on:
         specifier: ^9.0.4
-        version: 9.0.5
+        version: 9.1.0(debug@4.4.3)(supports-color@10.2.2)
       yaml:
-        specifier: ^2.7.0
-        version: 2.8.4
+        specifier: ^2.8.4
+        version: 2.9.0
     devDependencies:
       '@element-hq/element-web-module-api':
         specifier: workspace:*
@@ -1024,114 +1365,129 @@ importers:
         specifier: ^4.17.12
         version: 4.17.12
       typescript:
-        specifier: ^6.0.0
-        version: 6.0.3
+        specifier: 'catalog:'
+        version: 7.0.2
 
   packages/shared-components:
     dependencies:
+      '@dnd-kit/abstract':
+        specifier: ^0.5.0
+        version: 0.5.0
+      '@dnd-kit/dom':
+        specifier: ^0.5.0
+        version: 0.5.0
+      '@dnd-kit/react':
+        specifier: ^0.5.0
+        version: 0.5.0(react-dom@19.2.8)(react@19.2.8)
       '@element-hq/element-web-module-api':
         specifier: workspace:*
         version: link:../module-api
+      '@matrix-org/emojibase-bindings':
+        specifier: 'catalog:'
+        version: 1.5.0
       '@matrix-org/spec':
         specifier: ^1.7.0
         version: 1.16.0
+      '@tanstack/react-virtual':
+        specifier: 3.14.8
+        version: 3.14.8(react-dom@19.2.8)(react@19.2.8)
       '@vector-im/compound-design-tokens':
         specifier: 'catalog:'
-        version: 10.1.1(@types/react@19.2.14)(react@19.2.6)
+        version: 10.2.1(@types/react@19.2.18)(react@19.2.8)
       classnames:
         specifier: ^2.5.1
         version: 2.5.1
       counterpart:
         specifier: ^0.18.6
         version: 0.18.6
+      events:
+        specifier: ^3.3.0
+        version: 3.3.0
       html-react-parser:
         specifier: ^6.0.0
-        version: 6.0.1(@types/react@19.2.14)(react@19.2.6)
+        version: 6.1.5(@types/react@19.2.18)(react@19.2.8)
       linkify-html:
-        specifier: 4.3.2
-        version: 4.3.2(patch_hash=1761c1eabe25d9fae83f74f27a20b3d24515840a4a8747bb04828df46bcfdea2)(linkifyjs@4.3.2)
+        specifier: 4.3.3
+        version: 4.3.3(patch_hash=1761c1eabe25d9fae83f74f27a20b3d24515840a4a8747bb04828df46bcfdea2)(linkifyjs@4.3.3)
       linkify-react:
-        specifier: 4.3.2
-        version: 4.3.2(linkifyjs@4.3.2)(react@19.2.6)
+        specifier: 4.3.3
+        version: 4.3.3(linkifyjs@4.3.3)(react@19.2.8)
       linkify-string:
-        specifier: 4.3.2
-        version: 4.3.2(linkifyjs@4.3.2)
+        specifier: 4.3.3
+        version: 4.3.3(linkifyjs@4.3.3)
       linkifyjs:
-        specifier: 4.3.2
-        version: 4.3.2
+        specifier: 4.3.3
+        version: 4.3.3
       lodash:
         specifier: npm:lodash-es@^4.17.21
         version: lodash-es@4.18.1
       matrix-web-i18n:
         specifier: 'catalog:'
-        version: 3.6.0
+        version: 3.6.0(supports-color@10.2.2)
       react:
         specifier: 'catalog:'
-        version: 19.2.6
+        version: 19.2.8
       react-blurhash:
         specifier: ^0.3.0
-        version: 0.3.0(patch_hash=58bc7f075478017ce27bcc252e8509876390db106246bd5b0a7446642cc4b505)(blurhash@2.0.5)(react@19.2.6)
+        version: 0.3.0(patch_hash=58bc7f075478017ce27bcc252e8509876390db106246bd5b0a7446642cc4b505)(blurhash@2.0.5)(react@19.2.8)
+      react-dom:
+        specifier: 'catalog:'
+        version: 19.2.8(react@19.2.8)
       react-merge-refs:
         specifier: ^3.0.2
-        version: 3.0.2(react@19.2.6)
+        version: 3.0.2(react@19.2.8)
       react-resizable-panels:
-        specifier: 4.7.2
-        version: 4.7.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+        specifier: 4.12.2
+        version: 4.12.2(react-dom@19.2.8)(react@19.2.8)
       react-virtuoso:
         specifier: ^4.14.0
-        version: 4.18.5(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+        version: 4.18.11(react-dom@19.2.8)(react@19.2.8)
       temporal-polyfill:
-        specifier: ^0.3.0
-        version: 0.3.2
+        specifier: ^1.0.0
+        version: 1.0.1
     devDependencies:
       '@element-hq/element-web-playwright-common':
         specifier: workspace:*
         version: link:../playwright-common
-      '@element-hq/vite-common':
-        specifier: workspace:*
-        version: link:../vite-common
       '@fetch-mock/vitest':
         specifier: ^0.2.18
-        version: 0.2.18(vitest@4.1.5)
+        version: 0.2.18(vitest@4.1.10)
       '@fontsource/inter':
         specifier: 'catalog:'
-        version: 5.2.8
+        version: 5.3.0
       '@matrix-org/react-sdk-module-api':
         specifier: ^2.5.0
-        version: 2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.6)
+        version: 2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.8)
       '@microsoft/api-extractor':
         specifier: ^7.56.0
-        version: 7.58.7(@types/node@18.19.130)
+        version: 7.58.12(@types/node@25.9.3)
       '@playwright/test':
         specifier: 'catalog:'
-        version: 1.59.1
+        version: 1.61.1
       '@storybook/addon-a11y':
         specifier: ^10.0.7
-        version: 10.3.6(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))
+        version: 10.5.5(storybook@10.5.5)
       '@storybook/addon-designs':
         specifier: ^11.0.1
-        version: 11.1.3(@storybook/addon-docs@10.3.6(@types/react@19.2.14)(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(webpack@5.106.2(esbuild@0.27.4)))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))
+        version: 11.1.4(@storybook/addon-docs@10.5.5)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)(storybook@10.5.5)
       '@storybook/addon-docs':
         specifier: ^10.0.7
-        version: 10.3.6(@types/react@19.2.14)(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(webpack@5.106.2(esbuild@0.27.4))
+        version: 10.5.5(@types/react-dom@19.2.3)(@types/react@19.2.18)(esbuild@0.27.4)(rollup@4.60.1)(storybook@10.5.5)(vite@8.2.0)(webpack@5.109.2)
       '@storybook/addon-vitest':
         specifier: ^10.1.11
-        version: 10.3.6(@vitest/browser-playwright@4.1.5)(@vitest/browser@4.1.5)(@vitest/runner@4.1.5)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vitest@4.1.5)
+        version: 10.5.5(@vitest/browser-playwright@4.1.10)(@vitest/browser@4.1.10)(@vitest/runner@4.1.10)(react@19.2.8)(storybook@10.5.5)(vitest@4.1.10)
       '@storybook/icons':
         specifier: ^2.0.0
-        version: 2.0.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+        version: 2.1.0(react@19.2.8)
       '@storybook/react-vite':
         specifier: ^10.0.7
-        version: 10.3.6(esbuild@0.27.4)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(typescript@6.0.3)(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(webpack@5.106.2(esbuild@0.27.4))
-      '@stylistic/eslint-plugin':
-        specifier: ^5.7.0
-        version: 5.10.0(eslint@8.57.1)
+        version: 10.5.5(@types/react-dom@19.2.3)(@types/react@19.2.18)(@typescript/typescript6@6.0.2)(esbuild@0.27.4)(react-dom@19.2.8)(react@19.2.8)(rollup@4.60.1)(storybook@10.5.5)(supports-color@10.2.2)(vite@8.2.0)(webpack@5.109.2)
       '@testing-library/dom':
         specifier: ^10.4.1
         version: 10.4.1
       '@testing-library/react':
         specifier: ^16.3.2
-        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
       '@testing-library/user-event':
         specifier: ^14.6.1
         version: 14.6.1(@testing-library/dom@10.4.1)
@@ -1143,119 +1499,64 @@ importers:
         version: 4.17.24
       '@types/react':
         specifier: ^19.2.10
-        version: 19.2.14
+        version: 19.2.18
       '@types/react-dom':
         specifier: ^19.2.3
-        version: 19.2.3(@types/react@19.2.14)
-      '@typescript-eslint/eslint-plugin':
-        specifier: ^8.53.1
-        version: 8.59.2(@typescript-eslint/parser@8.59.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)(typescript@6.0.3)
-      '@typescript-eslint/parser':
-        specifier: ^8.53.1
-        version: 8.59.2(eslint@8.57.1)(typescript@6.0.3)
+        version: 19.2.3(@types/react@19.2.18)
+      '@typescript/native':
+        specifier: 'catalog:'
+        version: typescript@7.0.2
       '@vector-im/compound-web':
         specifier: 'catalog:'
-        version: 9.3.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vector-im/compound-design-tokens@10.1.1(@types/react@19.2.14)(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@vitest/browser-playwright':
-        specifier: ^4.0.17
-        version: 4.1.5(playwright@1.59.1)(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(vitest@4.1.5)
-      '@vitest/coverage-v8':
+        version: 10.0.1(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.3)(@types/react@19.2.18)(@vector-im/compound-design-tokens@10.2.1)(react-dom@19.2.8)(react@19.2.8)
+      '@vitejs/plugin-react':
         specifier: 'catalog:'
-        version: 4.1.5(@vitest/browser@4.1.5)(vitest@4.1.5)
-      eslint:
-        specifier: '8'
-        version: 8.57.1
-      eslint-config-google:
-        specifier: ^0.14.0
-        version: 0.14.0(eslint@8.57.1)
-      eslint-config-prettier:
-        specifier: ^10.1.8
-        version: 10.1.8(eslint@8.57.1)
-      eslint-plugin-deprecate:
-        specifier: ^0.9.0
-        version: 0.9.0(eslint@8.57.1)
-      eslint-plugin-import:
-        specifier: ^2.32.0
-        version: 2.32.0(@typescript-eslint/parser@8.59.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)
-      eslint-plugin-jsx-a11y:
-        specifier: ^6.10.2
-        version: 6.10.2(eslint@8.57.1)
-      eslint-plugin-matrix-org:
-        specifier: ^3.0.0
-        version: 3.0.0(ada405a187c98c376554188eb28e4a55)
-      eslint-plugin-react:
-        specifier: ^7.37.5
-        version: 7.37.5(eslint@8.57.1)
-      eslint-plugin-react-compiler:
-        specifier: ^19.1.0-rc.2
-        version: 19.1.0-rc.2(eslint@8.57.1)
-      eslint-plugin-react-hooks:
-        specifier: ^7.0.1
-        version: 7.1.1(eslint@8.57.1)
-      eslint-plugin-storybook:
-        specifier: ^10.0.7
-        version: 10.3.6(eslint@8.57.1)(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(typescript@6.0.3)
-      eslint-plugin-unicorn:
-        specifier: ^56.0.0
-        version: 56.0.1(eslint@8.57.1)
-      prettier:
-        specifier: ^3.6.2
-        version: 3.8.3
+        version: 6.0.5(vite@8.2.0)
+      '@vitest/browser-playwright':
+        specifier: 'catalog:'
+        version: 4.1.10(playwright@1.61.1)(vite@8.2.0)(vitest@4.1.10)
+      oxfmt:
+        specifier: 0.60.0
+        version: 0.60.0
       storybook:
         specifier: ^10.0.7
-        version: 10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+        version: 10.5.5(@types/react@19.2.18)(prettier@2.8.8)(react@19.2.8)
       storybook-addon-vis:
         specifier: ^4.0.0
-        version: 4.2.2(@storybook/addon-vitest@10.3.6(@vitest/browser-playwright@4.1.5)(@vitest/browser@4.1.5)(@vitest/runner@4.1.5)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vitest@4.1.5))(@vitest/browser-playwright@4.1.5)(@vitest/browser@4.1.5)(babel-plugin-macros@3.1.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(typescript@6.0.3)(vitest@4.1.5)
+        version: 4.2.3(@storybook/addon-vitest@10.5.5)(@typescript/typescript6@6.0.2)(@vitest/browser-playwright@4.1.10)(@vitest/browser@4.1.10)(babel-plugin-macros@3.1.0)(react@19.2.8)(storybook@10.5.5)(vitest@4.1.10)
       typedoc:
         specifier: ^0.28.16
-        version: 0.28.19(typescript@6.0.3)
+        version: 0.28.20(@typescript/typescript6@6.0.2)
       typedoc-plugin-markdown:
         specifier: ^4.9.0
-        version: 4.11.0(typedoc@0.28.19(typescript@6.0.3))
+        version: 4.12.0(typedoc@0.28.20)
       typedoc-plugin-missing-exports:
         specifier: ^4.1.2
-        version: 4.1.3(typedoc@0.28.19(typescript@6.0.3))
+        version: 4.1.4(typedoc@0.28.20)
       typescript:
-        specifier: 'catalog:'
-        version: 6.0.3
+        specifier: catalog:ts6
+        version: '@typescript/typescript6@6.0.2'
       unplugin-dts:
-        specifier: 1.0.0
-        version: 1.0.0(@microsoft/api-extractor@7.58.7(@types/node@18.19.130))(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(typescript@6.0.3)(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(webpack@5.106.2(esbuild@0.27.4))
+        specifier: 'catalog:'
+        version: 1.0.1(@microsoft/api-extractor@7.58.12)(@typescript/typescript6@6.0.2)(esbuild@0.27.4)(rolldown@1.2.2)(rollup@4.60.1)(supports-color@10.2.2)(vite@8.2.0)(webpack@5.109.2)
       vite:
         specifier: 'catalog:'
-        version: 8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4)
+        version: 8.2.0(@types/node@25.9.3)(esbuild@0.27.4)(jiti@2.7.0)(sugarss@5.0.1)(terser@5.49.0)(yaml@2.9.0)
       vite-plugin-node-polyfills:
-        specifier: ^0.26.0
-        version: 0.26.0(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))
+        specifier: ^0.28.0
+        version: 0.28.0(rollup@4.60.1)(vite@8.2.0)
       vitest:
         specifier: 'catalog:'
-        version: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.5)(@vitest/coverage-v8@4.1.5)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))
-      vitest-sonar-reporter:
-        specifier: 'catalog:'
-        version: 3.0.0(vitest@4.1.5)
+        version: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(happy-dom@20.11.1)(jsdom@26.1.0)(vite@8.2.0)
 
-  packages/vite-common:
-    dependencies:
-      '@vitest/coverage-v8':
-        specifier: 'catalog:'
-        version: 4.1.5(@vitest/browser@4.1.5)(vitest@4.1.5)
-      vitest:
-        specifier: 'catalog:'
-        version: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.5)(@vitest/coverage-v8@4.1.5)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))
-      vitest-sonar-reporter:
-        specifier: 'catalog:'
-        version: 3.0.0(vitest@4.1.5)
+  packages/shared-types:
     devDependencies:
       typescript:
         specifier: 'catalog:'
-        version: 6.0.3
+        version: 7.0.2
 
 packages:
 
-  7zip-bin@5.2.0:
-    resolution: {integrity: sha512-ukTPVhqG4jNzMro2qA9HSCSSVJN3aN7tlb+hfqYCt3ER0yWroeA2VR38MNrOHLQ/cVj+DaIMad0kFCtWWowh/A==}
-
   '@action-validator/cli@0.6.0':
     resolution: {integrity: sha512-Z8TYOK4GqUIpI0UuspUJPB6dhr0niTumhwI5iiZVqFRXm4u05bZawnFKltpvoFUfJg9mHbbIBlleqsRJAgl53Q==}
     hasBin: true
@@ -1356,60 +1657,61 @@ packages:
   '@antfu/install-pkg@1.1.0':
     resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
 
+  '@apm-js-collab/code-transformer-bundler-plugins@0.7.3':
+    resolution: {integrity: sha512-qNbPwuMZ8f5ZuGj/ttPeB7a6C/S1bB6tNYaEL5vNiRKydSAxa4AU0gxCWgaP4fVju+AuwhcumSFjrEcGF9Dv7Q==}
+    engines: {node: '>=18.0.0'}
+
+  '@apm-js-collab/code-transformer@0.18.1':
+    resolution: {integrity: sha512-u1Hb6bHjWtkSpiprwVP6YaHC1DTN4RAU3zYkUDUe7WMnJwdyU1pwTL9dFKiSJB9IiLue/EQovmyx6xhU7FFtAQ==}
+    hasBin: true
+
+  '@apm-js-collab/tracing-hooks@0.13.0':
+    resolution: {integrity: sha512-mTvWz9rnQwx1U3h0XPTHaX7bgfkpipLLTQyjlC2cdhQpQEuoLT0AGzoydeoq2NxfEVv6fWOOETcSbb2nptleyw==}
+
+  '@arcmantle/vite-plugin-import-css-sheet@1.0.14':
+    resolution: {integrity: sha512-vDobFhMGZtHk7phye58k+aS3oAwINS7CSoB5K9CL088xHf3H0TS66wdSfv64z/m0l1Q4edf2z2Nuq1pIS5YfdQ==}
+    engines: {node: '>=22'}
+
   '@asamuzakjp/css-color@3.2.0':
     resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==}
 
-  '@axe-core/playwright@4.11.3':
-    resolution: {integrity: sha512-h/kfksv4F0cVIDlKpT4700OehdRgpvuVskuQ2nb7/JmtWUXpe9ftHAPtwyXGvVSsa6SJ64A9ER7Zrzc/sIvC4w==}
+  '@axe-core/playwright@4.12.1':
+    resolution: {integrity: sha512-rMd7xriptqKpP+w5265i4Hdkv2X5kbu6uiBi/B2I7uf3hieRBM3qDCfaKPtxfiYb2mKXfF+yLODJwIx+Jv1GDw==}
     peerDependencies:
       playwright-core: '>= 1.0.0'
 
-  '@babel/code-frame@7.29.0':
-    resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
+  '@babel/code-frame@7.29.7':
+    resolution: {integrity: sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/compat-data@7.29.3':
-    resolution: {integrity: sha512-LIVqM46zQWZhj17qA8wb4nW/ixr2y1Nw+r1etiAWgRM6U1IqP+LNhL1yg440jYZR72jCWcWbLWzIosH+uP1fqg==}
+  '@babel/compat-data@7.29.7':
+    resolution: {integrity: sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/core@7.29.0':
-    resolution: {integrity: sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==}
+  '@babel/core@7.29.7':
+    resolution: {integrity: sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/eslint-parser@7.28.6':
-    resolution: {integrity: sha512-QGmsKi2PBO/MHSQk+AAgA9R6OHQr+VqnniFE0eMWZcVcfBZoA2dKn2hUsl3Csg/Plt9opRUWdY7//VXsrIlEiA==}
-    engines: {node: ^10.13.0 || ^12.13.0 || >=14.0.0}
-    peerDependencies:
-      '@babel/core': ^7.11.0
-      eslint: ^7.5.0 || ^8.0.0 || ^9.0.0
-
-  '@babel/eslint-plugin@7.27.1':
-    resolution: {integrity: sha512-vOG/EipZbIAcREK6XI4JRO3B3uZr70/KIhsrNLO9RXcgLMaW0sTsBpNeTpQUyelB0HsbWd45NIsuTgD3mqr/Og==}
-    engines: {node: ^10.13.0 || ^12.13.0 || >=14.0.0}
-    peerDependencies:
-      '@babel/eslint-parser': ^7.11.0
-      eslint: ^7.5.0 || ^8.0.0 || ^9.0.0
-
-  '@babel/generator@7.29.1':
-    resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==}
+  '@babel/generator@7.29.8':
+    resolution: {integrity: sha512-gZbepsdh3WDtgZKWL+vTPh71LSBrm/Y4/QDZBVCcYfmeTEEuoOYwlSy+G1StfJg+/Zy550u/3TATbm7qDbbMtg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-annotate-as-pure@7.27.3':
-    resolution: {integrity: sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==}
+  '@babel/helper-annotate-as-pure@7.29.7':
+    resolution: {integrity: sha512-OoK6239jHPuSQOoS0kfTVKn0b/rVTk0seKq4Gd2UMLtmOVLjDC0ki3e+c90Trqv2gMfvJFqkiljrr568+qddiw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-compilation-targets@7.28.6':
-    resolution: {integrity: sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==}
+  '@babel/helper-compilation-targets@7.29.7':
+    resolution: {integrity: sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-create-class-features-plugin@7.28.6':
-    resolution: {integrity: sha512-dTOdvsjnG3xNT9Y0AUg1wAl38y+4Rl4sf9caSQZOXdNqVn+H+HbbJ4IyyHaIqNR6SW9oJpA/RuRjsjCw2IdIow==}
+  '@babel/helper-create-class-features-plugin@7.29.7':
+    resolution: {integrity: sha512-IY3ZD9Tmooqr3TUhc3DUWxiuo8xx1DWLhd5M7hQ+ZWJamqM2BbalrBJb2MisSLoYorOj75U03qULCxQTY9r3hg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-create-regexp-features-plugin@7.28.5':
-    resolution: {integrity: sha512-N1EhvLtHzOvj7QQOUCCS3NrPJP8c5W6ZXCHDn7Yialuy1iu4r5EmIYkXlKNqT99Ciw+W0mDqWoR6HWMZlFP3hw==}
+  '@babel/helper-create-regexp-features-plugin@7.29.7':
+    resolution: {integrity: sha512-907Uymvqgg1dwUA+7IGwFAOSYzQOuzPXKNJ1yxzwPffzkYFg2q2eHi1fIOs6sXkG9NbIUMunnUlkYsfRFNvomg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
@@ -1419,128 +1721,121 @@ packages:
     peerDependencies:
       '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0
 
-  '@babel/helper-globals@7.28.0':
-    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
+  '@babel/helper-globals@7.29.7':
+    resolution: {integrity: sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-member-expression-to-functions@7.28.5':
-    resolution: {integrity: sha512-cwM7SBRZcPCLgl8a7cY0soT1SptSzAlMH39vwiRpOQkJlh53r5hdHwLSCZpQdVLT39sZt+CRpNwYG4Y2v77atg==}
+  '@babel/helper-member-expression-to-functions@7.29.7':
+    resolution: {integrity: sha512-j+7JYmk1JYDtACIGj0QJqqWZjoUpMoEikQGADMaHgCMCSDqd2+P32rfcibUNrGOMWrlzK1WJBdxrB3JJQZwWtg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-module-imports@7.28.6':
-    resolution: {integrity: sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==}
+  '@babel/helper-module-imports@7.29.7':
+    resolution: {integrity: sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-module-transforms@7.28.6':
-    resolution: {integrity: sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==}
+  '@babel/helper-module-transforms@7.29.7':
+    resolution: {integrity: sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-optimise-call-expression@7.27.1':
-    resolution: {integrity: sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==}
+  '@babel/helper-optimise-call-expression@7.29.7':
+    resolution: {integrity: sha512-+kmGVjcT9RGYzoDwdwEqEvGgKe3BYq+O1iGzjFubaNgZHwYHP6lsF2Yghf4kEuv9BV7tYDZ913aBW9am6YKong==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-plugin-utils@7.28.6':
-    resolution: {integrity: sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==}
+  '@babel/helper-plugin-utils@7.29.7':
+    resolution: {integrity: sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-remap-async-to-generator@7.27.1':
-    resolution: {integrity: sha512-7fiA521aVw8lSPeI4ZOD3vRFkoqkJcS+z4hFo82bFSH/2tNd6eJ5qCVMS5OzDmZh/kaHQeBaeyxK6wljcPtveA==}
+  '@babel/helper-remap-async-to-generator@7.29.7':
+    resolution: {integrity: sha512-16AMiW26DbXWBbr3B8wNozKM0ydMLB892vaOaJW/fPJdnT8vJk5sdkQcU/isqUxyCE0cEoa8wZOcbgDuC4b6Og==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-replace-supers@7.28.6':
-    resolution: {integrity: sha512-mq8e+laIk94/yFec3DxSjCRD2Z0TAjhVbEJY3UQrlwVo15Lmt7C2wAUbK4bjnTs4APkwsYLTahXRraQXhb1WCg==}
+  '@babel/helper-replace-supers@7.29.7':
+    resolution: {integrity: sha512-atfGXWSeCiF4DnKZIfmJfQRkSw9b9gNNXR1kqKjbhG4pGYCOnkp8OcTB8E3NXjBu8NpheSnOeNKz8KT7UNFTmQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
-    resolution: {integrity: sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==}
+  '@babel/helper-skip-transparent-expression-wrappers@7.29.7':
+    resolution: {integrity: sha512-brcMGQaVzIeUb+6/bs1Av0f8YuNNjKY2JyvfRCsFuFsdKccEQ5Ges2y74D74NZ1Rz8lKJ9ksJkfqwQFJ/iNEyQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-string-parser@7.27.1':
-    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+  '@babel/helper-string-parser@7.29.7':
+    resolution: {integrity: sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-identifier@7.28.5':
-    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
+  '@babel/helper-validator-identifier@7.29.7':
+    resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-validator-option@7.27.1':
-    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
+  '@babel/helper-validator-option@7.29.7':
+    resolution: {integrity: sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-wrap-function@7.28.6':
-    resolution: {integrity: sha512-z+PwLziMNBeSQJonizz2AGnndLsP2DeGHIxDAn+wdHOGuo4Fo1x1HBPPXeE9TAOPHNNWQKCSlA2VZyYyyibDnQ==}
+  '@babel/helper-wrap-function@7.29.7':
+    resolution: {integrity: sha512-iES0Skag9ERIF68aXadpO6dbXa03mNWK3sEqJaMnLNs/eC3l0lkImdfoy6Y09/SfkpawdAB4RjQ7PVA7TcVGdw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helpers@7.28.6':
-    resolution: {integrity: sha512-xOBvwq86HHdB7WUDTfKfT/Vuxh7gElQ+Sfti2Cy6yIWNW05P8iUslOVcZ4/sKbE+/jQaukQAdz/gf3724kYdqw==}
+  '@babel/helpers@7.29.7':
+    resolution: {integrity: sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/parser@7.29.2':
-    resolution: {integrity: sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==}
+  '@babel/parser@7.29.8':
+    resolution: {integrity: sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
-  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.28.5':
-    resolution: {integrity: sha512-87GDMS3tsmMSi/3bWOte1UblL+YUTFMV8SZPZ2eSEL17s74Cw/l63rR6NmGVKMYW2GYi85nE+/d6Hw5N0bEk2Q==}
+  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.29.7':
+    resolution: {integrity: sha512-j8SrR0zLZrRsC09DlszEx8FpMiwukKffYXMK0d5LmOglO7vGG6sz/BR/20yHqWH+Lnn31JTt2PE3hIWNgM2J6w==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.27.1':
-    resolution: {integrity: sha512-qNeq3bCKnGgLkEXUuFry6dPlGfCdQNZbn7yUAPCInwAJHMU7THJfrBSozkcWq5sNM6RcF3S8XyQL2A52KNR9IA==}
+  '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.29.7':
+    resolution: {integrity: sha512-r8j8escF+U2FUHo0KOhPUdMzUO+jp9fInva6+ACVAF3Y97Ev+5iNZwiqTghmzNeWwDkOPlYuTcfb1vDaoZKmAQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.27.1':
-    resolution: {integrity: sha512-g4L7OYun04N1WyqMNjldFwlfPCLVkgB54A/YCXICZYBsvJJE3kByKv9c9+R/nAfmIfjl2rKYLNyMHboYbZaWaA==}
+  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.29.7':
+    resolution: {integrity: sha512-GE1TFSiuFeGsCxmYXZl8HwoPrVlwe4rHPFE8weieGKZqnDORK+Ar3vgWMgW+AOxQ6/2TgLSKx9p6W7O4rC6qgQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/plugin-bugfix-safari-rest-destructuring-rhs-array@7.29.3':
-    resolution: {integrity: sha512-SRS46DFR4HqzUzCVgi90/xMoL+zeBDBvWdKYXSEzh79kXswNFEglUpMKxR04//dPqwYXWUBJ3mpUd933ru9Kmg==}
+  '@babel/plugin-bugfix-safari-rest-destructuring-rhs-array@7.29.7':
+    resolution: {integrity: sha512-oBNVCvnO5tND+xSopWvV8WNGfpTfgP4Zr/YXXSj8zfmcPktp5Ku/aZlsIowgSD4fjmgHn6sGmB9APVsU5zOdhA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.27.1':
-    resolution: {integrity: sha512-oO02gcONcD5O1iTLi/6frMJBIwWEHceWGSGqrpCmEL8nogiS6J9PBlE48CaK20/Jx1LuRml9aDftLgdjXT8+Cw==}
+  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.29.7':
+    resolution: {integrity: sha512-QQt9qKHZ2sg/kivaLr7lnQr8HVrQDdBNSfCsTjiDxRuX/K5ORyKq+Bu8Xr0cDE3Dfkv0cw28Ve0EKyKMvulkOw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.13.0
 
-  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.28.6':
-    resolution: {integrity: sha512-a0aBScVTlNaiUe35UtfxAN7A/tehvvG4/ByO6+46VPKTRSlfnAFsgKy0FUh+qAkQrDTmhDkT+IBOKlOoMUxQ0g==}
+  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.29.7':
+    resolution: {integrity: sha512-pn6QacGLgvCcwc+syUhKE/qSjV2D1IHDB84RNxWYSt1mW3K/SCtjinZ2p0cETJxAWBjPy3K/1lHwG5BjjPxNlw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/plugin-proposal-decorators@7.29.0':
-    resolution: {integrity: sha512-CVBVv3VY/XRMxRYq5dwr2DS7/MvqPm23cOCjbwNnVrfOqcWlnefua1uUs0sjdKOGjvPUG633o07uWzJq4oI6dA==}
+  '@babel/plugin-proposal-decorators@7.29.7':
+    resolution: {integrity: sha512-EtU0Hi3GvrTqD56xKmZvV/uCXK2ZbwVNPNLAquVItcAZpUhkXwWlo3Fmj0c2LxgSf2I8IDULeAepwNP1OefLXg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-proposal-export-default-from@7.27.1':
-    resolution: {integrity: sha512-hjlsMBl1aJc5lp8MoCDEZCiYzlgdRAShOjAfRw6X+GlpLpUPU7c3XNLsKFZbQk/1cRzBlJ7CXg3xJAJMrFa1Uw==}
+  '@babel/plugin-proposal-export-default-from@7.29.7':
+    resolution: {integrity: sha512-p+G5BNXDcy3bOXplhY4HybQ1GxH3i2Tppmdm/3epyRu2VgJJZuUlZ61MqRTg582Q7ZLBdP7fePYvsumSEkMxcQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-proposal-private-methods@7.18.6':
-    resolution: {integrity: sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==}
-    engines: {node: '>=6.9.0'}
-    deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
   '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2':
     resolution: {integrity: sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==}
     engines: {node: '>=6.9.0'}
@@ -1568,8 +1863,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-decorators@7.28.6':
-    resolution: {integrity: sha512-71EYI0ONURHJBL4rSFXnITXqXrrY8q4P0q006DPfN+Rk+ASM+++IBXem/ruokgBZR8YNEWZ8R6B+rCb8VcUTqA==}
+  '@babel/plugin-syntax-decorators@7.29.7':
+    resolution: {integrity: sha512-9MTTLbF39X6sqM92JPEsoI7++26hjZvzkxKZy64aMhWLH2mPkJ/Q3AV4QLmls3R14FpSpkOwQQfUh962JGQxxg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -1579,14 +1874,14 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-import-assertions@7.28.6':
-    resolution: {integrity: sha512-pSJUpFHdx9z5nqTSirOCMtYVP2wFgoWhP0p3g8ONK/4IHhLIBd0B9NYqAvIUAhq+OkhO4VM1tENCt0cjlsNShw==}
+  '@babel/plugin-syntax-import-assertions@7.29.7':
+    resolution: {integrity: sha512-/An1OCBN93thpBAGyfsK2pcf0jvju1SAtKkL2Ny++B5Sy6sqgzXDQH1cZxWbF96Wuk+bn41MDA9bLd4VVAw6rw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-import-attributes@7.28.6':
-    resolution: {integrity: sha512-jiLC0ma9XkQT3TKJ9uYvlakm66Pamywo+qwL+oL8HJOvc6TWdZXVfhqJr8CCzbSGUAbDOzlGHJC1U+vRfLQDvw==}
+  '@babel/plugin-syntax-import-attributes@7.29.7':
+    resolution: {integrity: sha512-zGYcYfq/WmZ4V+kBIXQon9dSSc8ircGZqw9ZaNhhGj9nZkeBu1jHLBDQqYYi5WA9uawvA2sIMbry2nCFhf5Djg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -1601,8 +1896,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-jsx@7.28.6':
-    resolution: {integrity: sha512-wgEmr06G6sIpqr8YDwA2dSRTE3bJ+V0IfpzfSY3Lfgd7YWOaAdlykvJi13ZKBt8cZHfgH1IXN+CL656W3uUa4w==}
+  '@babel/plugin-syntax-jsx@7.29.7':
+    resolution: {integrity: sha512-TSu8+mHCoEaaCDEZ0I3+6mvTBYR4PCxQwf2z9/r5Tbztv6NaLR3B9thGTTxX2WGuGHJqRiAbKPeGTJ5XWXVg6A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -1649,8 +1944,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-syntax-typescript@7.28.6':
-    resolution: {integrity: sha512-+nDNmQye7nlnuuHDboPbGm00Vqg3oO8niRRL27/4LYHUsHYh0zJ1xWOz0uRwNFmM1Avzk8wZbc6rdiYhomzv/A==}
+  '@babel/plugin-syntax-typescript@7.29.7':
+    resolution: {integrity: sha512-ngr+82Sh0xMz25TPCZi+nC2iTzjfCdWS2ONXTp/PtSCHCgaCNBpdMqgvJ2ccdLlClVZ7sisIgB914j/JFe+RZA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -1661,236 +1956,236 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/plugin-transform-arrow-functions@7.27.1':
-    resolution: {integrity: sha512-8Z4TGic6xW70FKThA5HYEKKyBpOOsucTOD1DjU3fZxDg+K3zBJcXMFnt/4yQiZnf5+MiOMSXQ9PaEK/Ilh1DeA==}
+  '@babel/plugin-transform-arrow-functions@7.29.7':
+    resolution: {integrity: sha512-N7zArUXWzAMzm+/N0uPBeVB3Fam5lMxtUwMmDK5f/IBBS7a7p1qeUoxd/6CckXoxUdgsntq1Dh8xNW06maZbDQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-async-generator-functions@7.29.0':
-    resolution: {integrity: sha512-va0VdWro4zlBr2JsXC+ofCPB2iG12wPtVGTWFx2WLDOM3nYQZZIGP82qku2eW/JR83sD+k2k+CsNtyEbUqhU6w==}
+  '@babel/plugin-transform-async-generator-functions@7.29.7':
+    resolution: {integrity: sha512-d98gXZkgswvkyohMBABkhm3GeXhYj8psWfwQ2C7gtfrKGTykQa/iOIi+JJhwMjPlZ6Vm2XN+DCf3Es1EoG4ZLA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-async-to-generator@7.28.6':
-    resolution: {integrity: sha512-ilTRcmbuXjsMmcZ3HASTe4caH5Tpo93PkTxF9oG2VZsSWsahydmcEHhix9Ik122RcTnZnUzPbmux4wh1swfv7g==}
+  '@babel/plugin-transform-async-to-generator@7.29.7':
+    resolution: {integrity: sha512-pcUb2SS+RMo9TWVBwKGI5ShtoG7R+zBsFmCKDa6fe8c+hPr3XJlZgoE5j6i8W7gDjhyvy+85vmYexanvXh3d1w==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-block-scoped-functions@7.27.1':
-    resolution: {integrity: sha512-cnqkuOtZLapWYZUYM5rVIdv1nXYuFVIltZ6ZJ7nIj585QsjKM5dhL2Fu/lICXZ1OyIAFc7Qy+bvDAtTXqGrlhg==}
+  '@babel/plugin-transform-block-scoped-functions@7.29.7':
+    resolution: {integrity: sha512-cUSmjh72N+rN4PrkFlN1dJwNCwjVp5d38/CQrEsFggkD10UiFlBFgdH3tv5dNsLuHY+3S8db2xCHjhZcv5WgvA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-block-scoping@7.28.6':
-    resolution: {integrity: sha512-tt/7wOtBmwHPNMPu7ax4pdPz6shjFrmHDghvNC+FG9Qvj7D6mJcoRQIF5dy4njmxR941l6rgtvfSB2zX3VlUIw==}
+  '@babel/plugin-transform-block-scoping@7.29.7':
+    resolution: {integrity: sha512-ONyr4+AZhKh8yKWInVxU9AXA9EbsyeLcL6V0dJy6M2/62vuvpGm29zzuymbTpdc451GEpDIdAyPLP3r+P61yKQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-class-properties@7.28.6':
-    resolution: {integrity: sha512-dY2wS3I2G7D697VHndN91TJr8/AAfXQNt5ynCTI/MpxMsSzHp+52uNivYT5wCPax3whc47DR8Ba7cmlQMg24bw==}
+  '@babel/plugin-transform-class-properties@7.29.7':
+    resolution: {integrity: sha512-GtcpjFvanPfzNQi3eTitsCqtRRmmqzpy/A+yhTR1HaZo1Ly3EA8ZXxlPyHdR8/IuRMYc3E4wdGBewB2QKQjAaA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-class-static-block@7.28.6':
-    resolution: {integrity: sha512-rfQ++ghVwTWTqQ7w8qyDxL1XGihjBss4CmTgGRCTAC9RIbhVpyp4fOeZtta0Lbf+dTNIVJer6ych2ibHwkZqsQ==}
+  '@babel/plugin-transform-class-static-block@7.29.7':
+    resolution: {integrity: sha512-kibJgmEdX2iMwsHY2tSZNDgj8PwIlCQz7FK9KuGKO8zsuoUwSEhoNnNVp/emKWrbY4HeO6kkXfdMqRKKKXBm2A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.12.0
 
-  '@babel/plugin-transform-classes@7.28.6':
-    resolution: {integrity: sha512-EF5KONAqC5zAqT783iMGuM2ZtmEBy+mJMOKl2BCvPZ2lVrwvXnB6o+OBWCS+CoeCCpVRF2sA2RBKUxvT8tQT5Q==}
+  '@babel/plugin-transform-classes@7.29.7':
+    resolution: {integrity: sha512-qV0OGGBVacduzQHE649JyCneOFI/maT+YKsO+K4Yi3xv2wTPNjM/W2o2gdzMwEAZz7fXNTHAe0NcSg30bIN69g==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-computed-properties@7.28.6':
-    resolution: {integrity: sha512-bcc3k0ijhHbc2lEfpFHgx7eYw9KNXqOerKWfzbxEHUGKnS3sz9C4CNL9OiFN1297bDNfUiSO7DaLzbvHQQQ1BQ==}
+  '@babel/plugin-transform-computed-properties@7.29.7':
+    resolution: {integrity: sha512-RK7/IyU5phpuCdBAuig5VkzG/EnbDaui5SQGdU9BFrHdV+mV4cUjLMQ9lJDjLNtWHsqtiefpGZUXQP2BiTYMsA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-destructuring@7.28.5':
-    resolution: {integrity: sha512-Kl9Bc6D0zTUcFUvkNuQh4eGXPKKNDOJQXVyyM4ZAQPMveniJdxi8XMJwLo+xSoW3MIq81bD33lcUe9kZpl0MCw==}
+  '@babel/plugin-transform-destructuring@7.29.7':
+    resolution: {integrity: sha512-iPX8aD6H9zV5s7ZsqTdNocPN/MGQ5sSMnElKrktxjJRMnB2jN/1p2+R7GkfD6CAYoVFqy5A4XnSIUeGgJzIWpg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-dotall-regex@7.28.6':
-    resolution: {integrity: sha512-SljjowuNKB7q5Oayv4FoPzeB74g3QgLt8IVJw9ADvWy3QnUb/01aw8I4AVv8wYnPvQz2GDDZ/g3GhcNyDBI4Bg==}
+  '@babel/plugin-transform-dotall-regex@7.29.7':
+    resolution: {integrity: sha512-3qc18hsD2RdZiyJNDNc7HQpv6xbncwh8FYtxNFFzclSyh/trPD9KkVR9BDECUjDLvb7yJVF15GfYUuC+LMkkiQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-duplicate-keys@7.27.1':
-    resolution: {integrity: sha512-MTyJk98sHvSs+cvZ4nOauwTTG1JeonDjSGvGGUNHreGQns+Mpt6WX/dVzWBHgg+dYZhkC4X+zTDfkTU+Vy9y7Q==}
+  '@babel/plugin-transform-duplicate-keys@7.29.7':
+    resolution: {integrity: sha512-6IvRRriEMqnBwD6chtxdLpMYCHWEzN+oL5cyQtjykya19UgzbmKhxmhZgKC/LHxS2nYr9Q/qYPZ5Lr6jOL9+yQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.29.0':
-    resolution: {integrity: sha512-zBPcW2lFGxdiD8PUnPwJjag2J9otbcLQzvbiOzDxpYXyCuYX9agOwMPGn1prVH0a4qzhCKu24rlH4c1f7yA8rw==}
+  '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.29.7':
+    resolution: {integrity: sha512-2wiIyo2BjtgU7HufSeDnL9L2O7zr8jmhFKuSr65VpRkUiRKRNpb0mdlk56+XPPKoIrfHqzbMuglDvZun0RISsA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/plugin-transform-dynamic-import@7.27.1':
-    resolution: {integrity: sha512-MHzkWQcEmjzzVW9j2q8LGjwGWpG2mjwaaB0BNQwst3FIjqsg8Ct/mIZlvSPJvfi9y2AC8mi/ktxbFVL9pZ1I4A==}
+  '@babel/plugin-transform-dynamic-import@7.29.7':
+    resolution: {integrity: sha512-giOlEm/EFjfjr+te9NsdjkUo2v4f8rS/SXPumRVHAtbNcyNlvtREkU1dZzaIDclNpnaVhlCqRdFKhJBjBikzLg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-explicit-resource-management@7.28.6':
-    resolution: {integrity: sha512-Iao5Konzx2b6g7EPqTy40UZbcdXE126tTxVFr/nAIj+WItNxjKSYTEw3RC+A2/ZetmdJsgueL1KhaMCQHkLPIg==}
+  '@babel/plugin-transform-explicit-resource-management@7.29.7':
+    resolution: {integrity: sha512-Rstj7coNz8sE+7Ju7ihpHLI564lsK5pUpNNlvptCIC/16E/S5hbl6n3kESPKdNRmqEWlpn5xpS5Q2dvXBsySLw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-exponentiation-operator@7.28.6':
-    resolution: {integrity: sha512-WitabqiGjV/vJ0aPOLSFfNY1u9U3R7W36B03r5I2KoNix+a3sOhJ3pKFB3R5It9/UiK78NiO0KE9P21cMhlPkw==}
+  '@babel/plugin-transform-exponentiation-operator@7.29.7':
+    resolution: {integrity: sha512-zFpMOTLZBdW5LfObqcSbL6kefg4R4eLdmvS0wbN9M6D5Mym/sKm9toOoWyVOa+xDjvCnuWcHls2YonXwHvH3CQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-export-namespace-from@7.27.1':
-    resolution: {integrity: sha512-tQvHWSZ3/jH2xuq/vZDy0jNn+ZdXJeM8gHvX4lnJmsc3+50yPlWdZXIc5ay+umX+2/tJIqHqiEqcJvxlmIvRvQ==}
+  '@babel/plugin-transform-export-namespace-from@7.29.7':
+    resolution: {integrity: sha512-24B2nOy2TeJSMheqwPD4DDQOV/elLSIlKxjZt4i05H5AgdPdWR3n18HnNrcJ+j76WJd9gbwb9jPjNYUy6RautA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-for-of@7.27.1':
-    resolution: {integrity: sha512-BfbWFFEJFQzLCQ5N8VocnCtA8J1CLkNTe2Ms2wocj75dd6VpiqS5Z5quTYcUoo4Yq+DN0rtikODccuv7RU81sw==}
+  '@babel/plugin-transform-for-of@7.29.7':
+    resolution: {integrity: sha512-zeSIHh0+E1Um1WJRXCFlHQYu2ieJNdivLLjlBEp+dIBu3S51n+SZZmIXjxnItw6pz56Cn+KvK68BIBVsxq2JiQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-function-name@7.27.1':
-    resolution: {integrity: sha512-1bQeydJF9Nr1eBCMMbC+hdwmRlsv5XYOMu03YSWFwNs0HsAmtSxxF1fyuYPqemVldVyFmlCU7w8UE14LupUSZQ==}
+  '@babel/plugin-transform-function-name@7.29.7':
+    resolution: {integrity: sha512-otRWaHXE6fbAGkePvaj/kvs3HsqXfPhlnzwSOlnFgbqCPMd975dW+4wZ00WFBt+/YlBGcJwNrARQTOJOb4ZrIg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-json-strings@7.28.6':
-    resolution: {integrity: sha512-Nr+hEN+0geQkzhbdgQVPoqr47lZbm+5fCUmO70722xJZd0Mvb59+33QLImGj6F+DkK3xgDi1YVysP8whD6FQAw==}
+  '@babel/plugin-transform-json-strings@7.29.7':
+    resolution: {integrity: sha512-RRnE2+eon1rJAq8MnoF1b5kTpY1vU88twHcvcKMrsqP/jxIRqDVs9iJB5fqPuqyeFAW0wJo4MlUIPpQCq/aRsg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-literals@7.27.1':
-    resolution: {integrity: sha512-0HCFSepIpLTkLcsi86GG3mTUzxV5jpmbv97hTETW3yzrAij8aqlD36toB1D0daVFJM8NK6GvKO0gslVQmm+zZA==}
+  '@babel/plugin-transform-literals@7.29.7':
+    resolution: {integrity: sha512-DZ/oLP21ZuWx1vKqnoNv6/tvEK48AQOBRai40CX9dTjGluvT/YZCyY3rryDtyUqCEoyNroy5KKPwX2iQCiRvyw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-logical-assignment-operators@7.28.6':
-    resolution: {integrity: sha512-+anKKair6gpi8VsM/95kmomGNMD0eLz1NQ8+Pfw5sAwWH9fGYXT50E55ZpV0pHUHWf6IUTWPM+f/7AAff+wr9A==}
+  '@babel/plugin-transform-logical-assignment-operators@7.29.7':
+    resolution: {integrity: sha512-A0H91hh6W8MFRkp5TqJmMr39jzGD1A1E1Ysiv2O06Sfbhkapm+XyIzxWCEh5kqwOZ1/8QZ0dY3SeQ7XBqfJd5Q==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-member-expression-literals@7.27.1':
-    resolution: {integrity: sha512-hqoBX4dcZ1I33jCSWcXrP+1Ku7kdqXf1oeah7ooKOIiAdKQ+uqftgCFNOSzA5AMS2XIHEYeGFg4cKRCdpxzVOQ==}
+  '@babel/plugin-transform-member-expression-literals@7.29.7':
+    resolution: {integrity: sha512-hl1kwFZCCiDyfH25Xmco9jTrkPgnS9pmOzSG7W5I4SaGbLeqKv417hcU2RKmaxoPEgsoJh7ZPOrnPGq99bHoUg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-modules-amd@7.27.1':
-    resolution: {integrity: sha512-iCsytMg/N9/oFq6n+gFTvUYDZQOMK5kEdeYxmxt91fcJGycfxVP9CnrxoliM0oumFERba2i8ZtwRUCMhvP1LnA==}
+  '@babel/plugin-transform-modules-amd@7.29.7':
+    resolution: {integrity: sha512-fxtQoH3m5ywUSIfaH0FGCzWu4McsYon5bD3K4XnskC7f+OyQMj7rsOMi4NvvmJ83WwBAg4UCe+ov4VZlqEvyew==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-modules-commonjs@7.28.6':
-    resolution: {integrity: sha512-jppVbf8IV9iWWwWTQIxJMAJCWBuuKx71475wHwYytrRGQ2CWiDvYlADQno3tcYpS/T2UUWFQp3nVtYfK/YBQrA==}
+  '@babel/plugin-transform-modules-commonjs@7.29.7':
+    resolution: {integrity: sha512-j0vCldybPC5b5dwCQOJ21uKtHzt7hxLygJTg9eF1ScfaikEDNfzn94XoW5Fi+seBR0nCyL23xaBFFkq7dTM8XQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-modules-systemjs@7.29.4':
-    resolution: {integrity: sha512-N7QmZ0xRZfjHOfZeQLJjwgX2zS9pdGHSVl/cjSGlo4dXMqvurfxXDMKY4RqEKzPozV78VMcd0lxyG13mlbKc4w==}
+  '@babel/plugin-transform-modules-systemjs@7.29.7':
+    resolution: {integrity: sha512-TM2ZcQLoG2/y4HODiStCo10DibYhWhGWAwVv+EQKmG/7GFl0N+AAmUiXOMKM+aiJ9XBJ9AHVZBvTzMnJ2sM3cQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-modules-umd@7.27.1':
-    resolution: {integrity: sha512-iQBE/xC5BV1OxJbp6WG7jq9IWiD+xxlZhLrdwpPkTX3ydmXdvoCpyfJN7acaIBZaOqTfr76pgzqBJflNbeRK+w==}
+  '@babel/plugin-transform-modules-umd@7.29.7':
+    resolution: {integrity: sha512-B4UkaTK3QpgCwJnrxKfMPKdo92CN7OKXAlpAAnM3UPu0Q0lCCk57ylA9AJbRy2v8dDKOPAAWcoR6CMyeoHwRCA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-named-capturing-groups-regex@7.29.0':
-    resolution: {integrity: sha512-1CZQA5KNAD6ZYQLPw7oi5ewtDNxH/2vuCh+6SmvgDfhumForvs8a1o9n0UrEoBD8HU4djO2yWngTQlXl1NDVEQ==}
+  '@babel/plugin-transform-named-capturing-groups-regex@7.29.7':
+    resolution: {integrity: sha512-vuFoLwr4qnv2xbZ16SQd6uPcH5FNrLHhk/Jzo++0XJFcaDsr4gjJVg6j398oMHiC+83k/GiBzviwF5KBJkPUtQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/plugin-transform-new-target@7.27.1':
-    resolution: {integrity: sha512-f6PiYeqXQ05lYq3TIfIDu/MtliKUbNwkGApPUvyo6+tc7uaR4cPjPe7DFPr15Uyycg2lZU6btZ575CuQoYh7MQ==}
+  '@babel/plugin-transform-new-target@7.29.7':
+    resolution: {integrity: sha512-fEo41GmsOUhOBlw8ioo6zvjX5Xc2Lqkzlyfqbpsk3eB6TReV18uhxZ0esfEokVbY2+PVJAQHNKxER6lGrzNd3A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-nullish-coalescing-operator@7.28.6':
-    resolution: {integrity: sha512-3wKbRgmzYbw24mDJXT7N+ADXw8BC/imU9yo9c9X9NKaLF1fW+e5H1U5QjMUBe4Qo4Ox/o++IyUkl1sVCLgevKg==}
+  '@babel/plugin-transform-nullish-coalescing-operator@7.29.7':
+    resolution: {integrity: sha512-idmp1dFaekP9GbcMvG24Kvw2BfhFZjHnNJCkV4WuIY4PskJzwI3f1N5OdgYke38T7rftO6ERulFRn2cFeZwRkg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-numeric-separator@7.28.6':
-    resolution: {integrity: sha512-SJR8hPynj8outz+SlStQSwvziMN4+Bq99it4tMIf5/Caq+3iOc0JtKyse8puvyXkk3eFRIA5ID/XfunGgO5i6w==}
+  '@babel/plugin-transform-numeric-separator@7.29.7':
+    resolution: {integrity: sha512-zR7fv/z14OjgHl4AgRtkDBvBMhIzCxqV/qN/2BCRC7LjFwvuzjYe7gDWxC4Wl/SNsLM6SE1IWvRPYMgSJaUvNw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-object-rest-spread@7.28.6':
-    resolution: {integrity: sha512-5rh+JR4JBC4pGkXLAcYdLHZjXudVxWMXbB6u6+E9lRL5TrGVbHt1TjxGbZ8CkmYw9zjkB7jutzOROArsqtncEA==}
+  '@babel/plugin-transform-object-rest-spread@7.29.7':
+    resolution: {integrity: sha512-Ld98jn4c0smUywL57m7SgsHq3OpThOa6LqZJif3G6jYOovPleoFhVrBJ1WegRApSFB2wu4+RelAj9AC9G08Z4A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-object-super@7.27.1':
-    resolution: {integrity: sha512-SFy8S9plRPbIcxlJ8A6mT/CxFdJx/c04JEctz4jf8YZaVS2px34j7NXRrlGlHkN/M2gnpL37ZpGRGVFLd3l8Ng==}
+  '@babel/plugin-transform-object-super@7.29.7':
+    resolution: {integrity: sha512-Ea/diGcw0twB5IlZPO5sgET6fJsLJqPABqTuFWIR+iMPGPZJkATEIWx0wa+aEQ5UY1CBQyP/gkAiLEqn1vBiQA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-optional-catch-binding@7.28.6':
-    resolution: {integrity: sha512-R8ja/Pyrv0OGAvAXQhSTmWyPJPml+0TMqXlO5w+AsMEiwb2fg3WkOvob7UxFSL3OIttFSGSRFKQsOhJ/X6HQdQ==}
+  '@babel/plugin-transform-optional-catch-binding@7.29.7':
+    resolution: {integrity: sha512-sLsyndxK2VwX6yNUOakMb7Sh553ZTe/vVM1XJ+9Z5aW1ytsc8xOIwmyk05NNjN60vkc5/KqoTH6hB4V41LJhng==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-optional-chaining@7.28.6':
-    resolution: {integrity: sha512-A4zobikRGJTsX9uqVFdafzGkqD30t26ck2LmOzAuLL8b2x6k3TIqRiT2xVvA9fNmFeTX484VpsdgmKNA0bS23w==}
+  '@babel/plugin-transform-optional-chaining@7.29.7':
+    resolution: {integrity: sha512-6GM1dhvK3gNODkXcEcMCOLEDCLSoZ/sBbro2Ax8HURyasQ4NshagQixkRFdh5niI6E4gmA/jYI/4aT7rRos3ZQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-parameters@7.27.7':
-    resolution: {integrity: sha512-qBkYTYCb76RRxUM6CcZA5KRu8K4SM8ajzVeUgVdMVO9NN9uI/GaVmBg/WKJJGnNokV9SY8FxNOVWGXzqzUidBg==}
+  '@babel/plugin-transform-parameters@7.29.7':
+    resolution: {integrity: sha512-ZDOBqV/qLYJI0YElr8DcENEyARsFQeESqWXH6gZlghYXuPPjvweuDhP4VyEi4BlUBlLRFZVjxoZDMjxhLW766g==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-private-methods@7.28.6':
-    resolution: {integrity: sha512-piiuapX9CRv7+0st8lmuUlRSmX6mBcVeNQ1b4AYzJxfCMuBfB0vBXDiGSmm03pKJw1v6cZ8KSeM+oUnM6yAExg==}
+  '@babel/plugin-transform-private-methods@7.29.7':
+    resolution: {integrity: sha512-/6Rz4DK1ETDEM/bWHsPHcaEe7ZaT1EqSXjtSP/L0DijOYuaUhiRiOKcwpZ8P7zR4xXEHc2ITdiCgBm9Tpyv9ug==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-private-property-in-object@7.28.6':
-    resolution: {integrity: sha512-b97jvNSOb5+ehyQmBpmhOCiUC5oVK4PMnpRvO7+ymFBoqYjeDHIU9jnrNUuwHOiL9RpGDoKBpSViarV+BU+eVA==}
+  '@babel/plugin-transform-private-property-in-object@7.29.7':
+    resolution: {integrity: sha512-+BNo06dnrzdNNqCm1X6YUaVv0DKk8Q+JYcoZfOkLhYWNCXzlwTSRq8zGWayT1csjcpNXV9CQTBRRbmTLZac5cA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-property-literals@7.27.1':
-    resolution: {integrity: sha512-oThy3BCuCha8kDZ8ZkgOg2exvPYUlprMukKQXI1r1pJ47NCvxfkEy8vK+r/hT9nF0Aa4H1WUPZZjHTFtAhGfmQ==}
+  '@babel/plugin-transform-property-literals@7.29.7':
+    resolution: {integrity: sha512-bOMRLQuI0A5ZqHq3OWJ89/rXpJ/NJrbVhXiP4zwPGMs6kpcVsuTUNjwoE30K0Qm3mf48a/TnRYYD6vPNqcg6jA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -1901,116 +2196,116 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-react-display-name@7.28.0':
-    resolution: {integrity: sha512-D6Eujc2zMxKjfa4Zxl4GHMsmhKKZ9VpcqIchJLvwTxad9zWIYulwYItBovpDOoNLISpcZSXoDJ5gaGbQUDqViA==}
+  '@babel/plugin-transform-react-display-name@7.29.7':
+    resolution: {integrity: sha512-+1wdDMGNb4UPeY3Q4L5yLiYe6TXPXubs4NjrgRFw13hPRLJfEMw2Q5OXkee6/IfdqePIeW4Jjwe3aBh7SdKz4Q==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-react-jsx-development@7.27.1':
-    resolution: {integrity: sha512-ykDdF5yI4f1WrAolLqeF3hmYU12j9ntLQl/AOG1HAS21jxyg1Q0/J/tpREuYLfatGdGmXp/3yS0ZA76kOlVq9Q==}
+  '@babel/plugin-transform-react-jsx-development@7.29.7':
+    resolution: {integrity: sha512-Xfy3UVMF04+ypnFbkhvfqtmvwfe92qwQdbGZVonhE+6v35GzlofmOnA1szaZqzb9xYWr0nl1e5EMmzi0DNON1g==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-react-jsx@7.28.6':
-    resolution: {integrity: sha512-61bxqhiRfAACulXSLd/GxqmAedUSrRZIu/cbaT18T1CetkTmtDN15it7i80ru4DVqRK1WMxQhXs+Lf9kajm5Ow==}
+  '@babel/plugin-transform-react-jsx@7.29.7':
+    resolution: {integrity: sha512-WsZulLVBUHXVj2cUcPVx6UE21TpalB6bHbSFErKT0Ib++ax24jjXe73FqlWvdylFOjiuPHYi6VCcgRad1ItN+A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-react-pure-annotations@7.27.1':
-    resolution: {integrity: sha512-JfuinvDOsD9FVMTHpzA/pBLisxpv1aSf+OIV8lgH3MuWrks19R27e6a6DipIg4aX1Zm9Wpb04p8wljfKrVSnPA==}
+  '@babel/plugin-transform-react-pure-annotations@7.29.7':
+    resolution: {integrity: sha512-H5E+HBgDpr6Q5t+Aj11tL7XkIui1jhbIoArVQnqjgXo5/3YxkN7ZEBcWF4RQlB0T4rrxJQbXS6kiFV6B7XTqUA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-regenerator@7.29.0':
-    resolution: {integrity: sha512-FijqlqMA7DmRdg/aINBSs04y8XNTYw/lr1gJ2WsmBnnaNw1iS43EPkJW+zK7z65auG3AWRFXWj+NcTQwYptUog==}
+  '@babel/plugin-transform-regenerator@7.29.7':
+    resolution: {integrity: sha512-rNNFV0DBAJp988xW2DOntfDoYn1eR8GGF5AT5vYc+rjyfaQkM242c9tZUHHPe7KYaiJizXPWhQTzzdbXySyhBw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-regexp-modifiers@7.28.6':
-    resolution: {integrity: sha512-QGWAepm9qxpaIs7UM9FvUSnCGlb8Ua1RhyM4/veAxLwt3gMat/LSGrZixyuj4I6+Kn9iwvqCyPTtbdxanYoWYg==}
+  '@babel/plugin-transform-regexp-modifiers@7.29.7':
+    resolution: {integrity: sha512-mB5Fs0VWrJ42ZCmc8114v60qetdaUVNkj9PmSZRmanCZM3S9hm0CFRLjRmYIsuXav14l2jvZ+4T8iiCGnhj3nQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/plugin-transform-reserved-words@7.27.1':
-    resolution: {integrity: sha512-V2ABPHIJX4kC7HegLkYoDpfg9PVmuWy/i6vUM5eGK22bx4YVFD3M5F0QQnWQoDs6AGsUWTVOopBiMFQgHaSkVw==}
+  '@babel/plugin-transform-reserved-words@7.29.7':
+    resolution: {integrity: sha512-5+YhdpVgmfSmwZyLMftfaiffLRMHjzIRHFHHLdibcSyJm2pasMrKHrO3Ptrt2DRshjvpgjEJJ1zVW14WPq/6QA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-runtime@7.29.0':
-    resolution: {integrity: sha512-jlaRT5dJtMaMCV6fAuLbsQMSwz/QkvaHOHOSXRitGGwSpR1blCY4KUKoyP2tYO8vJcqYe8cEj96cqSztv3uF9w==}
+  '@babel/plugin-transform-runtime@7.29.7':
+    resolution: {integrity: sha512-xmAscdE/AsqRW7vutbPNoUmu/nF5SrLKPs7aoJgEjo35lLKA/Bc0i2rMv/hr1+Y0o1bQCiVtith3u2vdgRL39Q==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-shorthand-properties@7.27.1':
-    resolution: {integrity: sha512-N/wH1vcn4oYawbJ13Y/FxcQrWk63jhfNa7jef0ih7PHSIHX2LB7GWE1rkPrOnka9kwMxb6hMl19p7lidA+EHmQ==}
+  '@babel/plugin-transform-shorthand-properties@7.29.7':
+    resolution: {integrity: sha512-I+WYbGBAiCn7nA6xBrlgPH+MB7HWb4u8pv5S0Pv7OtwNvIFvCCb24YlttKEeUFVurfBCEaOTnuhlqsb7f0Z5Dg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-spread@7.28.6':
-    resolution: {integrity: sha512-9U4QObUC0FtJl05AsUcodau/RWDytrU6uKgkxu09mLR9HLDAtUMoPuuskm5huQsoktmsYpI+bGmq+iapDcriKA==}
+  '@babel/plugin-transform-spread@7.29.7':
+    resolution: {integrity: sha512-/u5K1QWada7tbYNqTjMh96718g9NTwh9tfPJMsSmVsQwGT447FskV+KcfeXkXq2GWki4EM/MuTdmBec+hOuVTQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-sticky-regex@7.27.1':
-    resolution: {integrity: sha512-lhInBO5bi/Kowe2/aLdBAawijx+q1pQzicSgnkB6dUPc1+RC8QmJHKf2OjvU+NZWitguJHEaEmbV6VWEouT58g==}
+  '@babel/plugin-transform-sticky-regex@7.29.7':
+    resolution: {integrity: sha512-BCHzNYJGe9l7EpwwDBN/ztlL2NYFFq8hp9ddjtUEM9f2O7S7kKV/lL6Fwo7IF7NSkYhPK2vO+86nIGltA90MsA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-template-literals@7.27.1':
-    resolution: {integrity: sha512-fBJKiV7F2DxZUkg5EtHKXQdbsbURW3DZKQUWphDum0uRP6eHGGa/He9mc0mypL680pb+e/lDIthRohlv8NCHkg==}
+  '@babel/plugin-transform-template-literals@7.29.7':
+    resolution: {integrity: sha512-NCSEJ4sLFU2gqAub45HYh4fus2yQ36rr6ei6vpU7NdoJqCpxvEG8E6eJpscGyXP3VHD2Ny+fSXr04k1hoUrFqA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-typeof-symbol@7.27.1':
-    resolution: {integrity: sha512-RiSILC+nRJM7FY5srIyc4/fGIwUhyDuuBSdWn4y6yT6gm652DpCHZjIipgn6B7MQ1ITOUnAKWixEUjQRIBIcLw==}
+  '@babel/plugin-transform-typeof-symbol@7.29.7':
+    resolution: {integrity: sha512-223mNGoTkBiTEWFoK+Q6Go3tueMRclO8vxxxxquNCYuNI4jWOofFKJRRDu6SDrB8Sgo1UEGW9T4GAQ8ZyRso1A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-typescript@7.28.6':
-    resolution: {integrity: sha512-0YWL2RFxOqEm9Efk5PvreamxPME8OyY0wM5wh5lHjF+VtVhdneCWGzZeSqzOfiobVqQaNCd2z0tQvnI9DaPWPw==}
+  '@babel/plugin-transform-typescript@7.29.7':
+    resolution: {integrity: sha512-jK52h8LaLc7JarhQV2ofeFMts4H7vnOXnqZNA6fYglBTZewRBE51KWt3BUltW1P+KoPsYkHoJeXePuz4zo2LMw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-unicode-escapes@7.27.1':
-    resolution: {integrity: sha512-Ysg4v6AmF26k9vpfFuTZg8HRfVWzsh1kVfowA23y9j/Gu6dOuahdUVhkLqpObp3JIv27MLSii6noRnuKN8H0Mg==}
+  '@babel/plugin-transform-unicode-escapes@7.29.7':
+    resolution: {integrity: sha512-jCfXxSjf94lf4E0hKE0AByxF6F3/pVFqRdUUNkDJhsY0m1ZKjnN6ZYyMeHNpzflxb/0q5b7t3p+BE+SLF1WOtA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-unicode-property-regex@7.28.6':
-    resolution: {integrity: sha512-4Wlbdl/sIZjzi/8St0evF0gEZrgOswVO6aOzqxh1kDZOl9WmLrHq2HtGhnOJZmHZYKP8WZ1MDLCt5DAWwRo57A==}
+  '@babel/plugin-transform-unicode-property-regex@7.29.7':
+    resolution: {integrity: sha512-OgZ+zoAJgZLUCunsTRQ5LAjOywDv5zzZ2/hQ5aMw1pGXyY2rtE8/chXYUmu3AlVHKpm10KEdG9aMwbI/K76ZGw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-unicode-regex@7.27.1':
-    resolution: {integrity: sha512-xvINq24TRojDuyt6JGtHmkVkrfVV3FPT16uytxImLeBZqW3/H52yN+kM1MGuyPkIQxrzKwPHs5U/MP3qKyzkGw==}
+  '@babel/plugin-transform-unicode-regex@7.29.7':
+    resolution: {integrity: sha512-7D/x/23/d/3VqZ0QA+LGbZMlGwZjztBygSWWWsfTPoQ1oQ6Q1P6Mr3d0kk42XabyUVw+fha3LqdRsFqeKqvCyA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-unicode-sets-regex@7.28.6':
-    resolution: {integrity: sha512-/wHc/paTUmsDYN7SZkpWxogTOBNnlx7nBQYfy6JJlCT7G3mVhltk3e++N7zV0XfgGsrqBxd4rJQt9H16I21Y1Q==}
+  '@babel/plugin-transform-unicode-sets-regex@7.29.7':
+    resolution: {integrity: sha512-BLOhLht9DOJwIxlmp91wHvkXv1lguuHS3/FwUO8HL1H0u8s4hR1gASVFyilu9iGtcTRYqjTZmlsFFeQletntEg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/preset-env@7.29.5':
-    resolution: {integrity: sha512-/69t2aEzGKHD76DyLbHysF/QH2LJOB8iFnYO37unDTKBTubzcMRv0f3H5EiN1Q6ajOd/eB7dAInF0qdFVS06kA==}
+  '@babel/preset-env@7.29.7':
+    resolution: {integrity: sha512-GYzX36n1nsciIb0uyH0GHwxwtNwPQIcpxSeiVLDtG/B7jB5xXgchnmL1f/jCX5o+pwnaDBtO60ONSJhEBJfxYA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -2020,35 +2315,35 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0 || ^8.0.0-0 <8.0.0
 
-  '@babel/preset-react@7.28.5':
-    resolution: {integrity: sha512-Z3J8vhRq7CeLjdC58jLv4lnZ5RKFUJWqH5emvxmv9Hv3BD1T9R/Im713R4MTKwvFaV74ejZ3sM01LyEKk4ugNQ==}
+  '@babel/preset-react@7.29.7':
+    resolution: {integrity: sha512-C+PV1TFUPTmBQGoPBL8j2QmLpZ117YTCwxIZeJOM96GbYMFSc7/pOXU5lVykwnZxyTqQxRsvoRk6f2FktZgGHA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/preset-typescript@7.28.5':
-    resolution: {integrity: sha512-+bQy5WOI2V6LJZpPVxY+yp66XdZ2yifu0Mc1aP5CQKgjn4QM5IN2i5fAZ4xKop47pr8rpVhiAeu+nDQa12C8+g==}
+  '@babel/preset-typescript@7.29.7':
+    resolution: {integrity: sha512-/Foi8vKY2EVbed/1eZx0gJEEwHAIxogrySI7rULcRIvhZzbvoE/b5qG5Ghc0WKAFKOHA9SD1x7RsFlOYdutIiQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/runtime@7.29.2':
-    resolution: {integrity: sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==}
+  '@babel/runtime@7.29.7':
+    resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
     engines: {node: '>=6.9.0'}
 
   '@babel/runtime@8.0.0':
     resolution: {integrity: sha512-sL6cvO2IfkSu/iU+zs2S/w01B7A8V7suXSIKEN4hPFFdZoiPGxrj5pAG0lCaqLWiEIrjKzdznIWuaLcxPR53qw==}
 
-  '@babel/template@7.28.6':
-    resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
+  '@babel/template@7.29.7':
+    resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/traverse@7.29.0':
-    resolution: {integrity: sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==}
+  '@babel/traverse@7.29.8':
+    resolution: {integrity: sha512-I5z7H3bf/41ktsNVLtpN0wAa336HkqIHQ5BuPLEhTkt1jVSyZpeNKIzTgEWmlxjdg81R0IgUCcaE+Ok3NvrfZg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@7.29.0':
-    resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
+  '@babel/types@7.29.8':
+    resolution: {integrity: sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==}
     engines: {node: '>=6.9.0'}
 
   '@balena/dockerignore@1.0.2':
@@ -2070,30 +2365,18 @@ packages:
   '@braintree/sanitize-url@7.1.2':
     resolution: {integrity: sha512-jigsZK+sMF/cuiB7sERuo9V7N9jx+dhmHHnQyDSVdpZwVutaBu7WvNYqMDLSgFgfB30n452TP3vjDAvFC973mA==}
 
-  '@cacheable/memory@2.0.8':
-    resolution: {integrity: sha512-FvEb29x5wVwu/Kf93IWwsOOEuhHh6dYCJF3vcKLzXc0KXIW181AOzv6ceT4ZpBHDvAfG60eqb+ekmrnLHIy+jw==}
+  '@cacheable/memory@2.2.0':
+    resolution: {integrity: sha512-CTLKqLItRCEixEAewD3/j9DB3/o96gpTPD4eJ1v+DGOlxZRZncRQkGYqqnAGCscYd6RNeXfGeiuCphsPtqyIfQ==}
 
-  '@cacheable/utils@2.4.1':
-    resolution: {integrity: sha512-eiFgzCbIneyMlLOmNG4g9xzF7Hv3Mga4LjxjcSC/ues6VYq2+gUbQI8JqNuw/ZM8tJIeIaBGpswAsqV2V7ApgA==}
+  '@cacheable/utils@2.5.0':
+    resolution: {integrity: sha512-buipgOVDkkPXNR5+xBpDw7Zk2n1EvU7qBJCNUcL7rhQ//kfpOXPAvQ511Os0vpLYJ1pZnvudNytkQt2hst3wqA==}
 
   '@casualbot/jest-sonar-reporter@2.7.0':
     resolution: {integrity: sha512-rm991pr7o+0MsHNY3t+2km+QVZ77m/rtZabt7xVp8k32zz6alhRtpueqhgTL7gTLLU0DRxJdIeAr+TfTxFtEVg==}
     engines: {node: '>=14.0.0'}
 
-  '@chevrotain/cst-dts-gen@12.0.0':
-    resolution: {integrity: sha512-fSL4KXjTl7cDgf0B5Rip9Q05BOrYvkJV/RrBTE/bKDN096E4hN/ySpcBK5B24T76dlQ2i32Zc3PAE27jFnFrKg==}
-
-  '@chevrotain/gast@12.0.0':
-    resolution: {integrity: sha512-1ne/m3XsIT8aEdrvT33so0GUC+wkctpUPK6zU9IlOyJLUbR0rg4G7ZiApiJbggpgPir9ERy3FRjT6T7lpgetnQ==}
-
-  '@chevrotain/regexp-to-ast@12.0.0':
-    resolution: {integrity: sha512-p+EW9MaJwgaHguhoqwOtx/FwuGr+DnNn857sXWOi/mClXIkPGl3rn7hGNWvo31HA3vyeQxjqe+H36yZJwYU8cA==}
-
-  '@chevrotain/types@12.0.0':
-    resolution: {integrity: sha512-S+04vjFQKeuYw0/eW3U52LkAHQsB1ASxsPGsLPUyQgrZ2iNNibQrsidruDzjEX2JYfespXMG0eZmXlhA6z7nWA==}
-
-  '@chevrotain/utils@12.0.0':
-    resolution: {integrity: sha512-lB59uJoaGIfOOL9knQqQRfhl9g7x8/wqFkp13zTdkRu1huG9kg6IJs1O8hqj9rs6h7orGxHJUKb+mX3rPbWGhA==}
+  '@chevrotain/types@11.1.2':
+    resolution: {integrity: sha512-U+HFai5+zmJCkK86QsaJtoITlboZHBqrVketcO2ROv865xfCMSFpELQoz1GkX5GzME8pTa+3kbKrZHQtI0gdbw==}
 
   '@csstools/cascade-layer-name-parser@3.0.0':
     resolution: {integrity: sha512-/3iksyevwRfSJx5yH0RkcrcYXwuhMQx3Juqf40t97PeEy2/Mz2TItZ/z/216qpe4GgOyFBP8MKIwVvytzHmfIQ==}
@@ -2106,8 +2389,8 @@ packages:
     resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
     engines: {node: '>=18'}
 
-  '@csstools/color-helpers@6.0.2':
-    resolution: {integrity: sha512-LMGQLS9EuADloEFkcTBR3BwV/CGHV7zyDxVRtVDTwdI2Ca4it0CCVTT9wCkxSgokjE5Ho41hEPgb8OEUwoXr6Q==}
+  '@csstools/color-helpers@6.1.0':
+    resolution: {integrity: sha512-064IFJdjTfUqnjpCVpMOdbr8FLQBhinbZj6yRv2An2E41O/pLEXqfFRWqGq/SxlE5PEUYTlvWsG2r8MswAVvkg==}
     engines: {node: '>=20.19.0'}
 
   '@csstools/css-calc@2.1.4':
@@ -2117,8 +2400,8 @@ packages:
       '@csstools/css-parser-algorithms': ^3.0.5
       '@csstools/css-tokenizer': ^3.0.4
 
-  '@csstools/css-calc@3.2.0':
-    resolution: {integrity: sha512-bR9e6o2BDB12jzN/gIbjHa5wLJ4UjD1CB9pM7ehlc0ddk6EBz+yYS1EV2MF55/HUxrHcB/hehAyt5vhsA3hx7w==}
+  '@csstools/css-calc@3.3.0':
+    resolution: {integrity: sha512-c5ihYsPkdG6JCkU2zTMm4+k6r7RXuGxtWYhu5DHMIiF1FHzrfmHL5so11AoFpUv/tu61xfcmT4AmKoFfMPoqdQ==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       '@csstools/css-parser-algorithms': ^4.0.0
@@ -2131,8 +2414,8 @@ packages:
       '@csstools/css-parser-algorithms': ^3.0.5
       '@csstools/css-tokenizer': ^3.0.4
 
-  '@csstools/css-color-parser@4.1.0':
-    resolution: {integrity: sha512-U0KhLYmy2GVj6q4T3WaAe6NPuFYCPQoE3b0dRGxejWDgcPp8TP7S5rVdM5ZrFaqu4N67X8YaPBw14dQSYx3IyQ==}
+  '@csstools/css-color-parser@4.1.9':
+    resolution: {integrity: sha512-paQcIaOO53Rk5+YrBaBjm/SgrV4INImjo2BT1DtQRYr+XeTRbeAYlS+jxXp9drqvKmtFnWRJKIalDLhZZDu42A==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       '@csstools/css-parser-algorithms': ^4.0.0
@@ -2150,8 +2433,8 @@ packages:
     peerDependencies:
       '@csstools/css-tokenizer': ^4.0.0
 
-  '@csstools/css-syntax-patches-for-csstree@1.1.3':
-    resolution: {integrity: sha512-SH60bMfrRCJF3morcdk57WklujF4Jr/EsQUzqkarfHXEFcAR1gg7fS/chAE922Sehgzc1/+Tz5H3Ypa1HiEKrg==}
+  '@csstools/css-syntax-patches-for-csstree@1.1.7':
+    resolution: {integrity: sha512-fQ+05118eQS1cofO3aJpB5efgpBZMvIzwr/sbC8kDLVA5XLG8q1kJV5yzrUAI1f7lvhPnm8fgIjzFB8/O/5Dig==}
     peerDependencies:
       css-tree: ^3.2.1
     peerDependenciesMeta:
@@ -2173,8 +2456,8 @@ packages:
       '@csstools/css-parser-algorithms': ^4.0.0
       '@csstools/css-tokenizer': ^4.0.0
 
-  '@csstools/postcss-alpha-function@2.0.4':
-    resolution: {integrity: sha512-fti7+GybzvfMrv5TSU6x8rWtXWOth5nLefT5w5AKJ3F3T0bZoxlRqajF0ZUgTtnytfMd4dQ8n5UiaNmsjFA65A==}
+  '@csstools/postcss-alpha-function@2.0.7':
+    resolution: {integrity: sha512-ueQMpNJfsIUqyOd38Kjc3c7rTaXDLKn0qr9krteAFx3fsSuawXQePAQ02AI5+RbMpdibv+Mfcs4d0AUl/SULsQ==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
@@ -2185,44 +2468,50 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-color-function-display-p3-linear@2.0.3':
-    resolution: {integrity: sha512-u8QNV2TKOxG6cqK4ZrJkpctnxdrwdNTMrkyokmCi+iuLpJegOraA0cqC7HoxF2tHhxjuXc+BxwY/Qd62SwvanQ==}
+  '@csstools/postcss-color-function-display-p3-linear@2.0.6':
+    resolution: {integrity: sha512-65C1CF/d9/ULr7dwmE5TBrRYZVa5sWLZX7mlR7WcBl1YwSYA8ntOvAhEEZmq8B2rBgosrOjZcDLnvFQuGaoRcA==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-color-function@5.0.3':
-    resolution: {integrity: sha512-BiBukIeQ7rPjx9A//9+qgJugBjX6FY9eWiojbnfIJCPulWrl8J07rCgQbFkloTXena+a6Aw5xa25weU+3MA75A==}
+  '@csstools/postcss-color-function@5.0.6':
+    resolution: {integrity: sha512-CHWuCfTg7afbSFMgVajmF1WU/bJ1rGBKGCj3L3tolDXZpQG2ZCQRu10ozfk1I10By9aRqQ43FTnAiDwBnbC+Hg==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-color-mix-function@4.0.3':
-    resolution: {integrity: sha512-M8ju3iqHRXtW1/5HYuOmi9WFR5rGGFgqkPh+kXkv/eG56oYK/WYtTeIwJgdcro7lRwjlo4Ut8xqbV3Iovkwfrw==}
+  '@csstools/postcss-color-mix-function@4.0.6':
+    resolution: {integrity: sha512-gWXS+Qx4GnIq4lRvBcabAcGF5IBkfcbZ7uoUvQw/3+JYDQVkD8SoKIFRoYhwKAOm+zTDJRYLMsjxWieBh9xOZw==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-color-mix-variadic-function-arguments@2.0.3':
-    resolution: {integrity: sha512-tL46UyFjIjz7mDywoPOe/JgOpvMic0rsTUfdMBB1OHrUcCtE8MQpBILzYl/cAOtinJGu+ZQLuDhqTgTBOoeg3g==}
+  '@csstools/postcss-color-mix-variadic-function-arguments@2.0.6':
+    resolution: {integrity: sha512-+bL0RlSDLM/02Z2JgxMK2AIas8IIL4fQkFsjETmMIXFSmOH+iRx1YEKyMbc3SogmiR8zJ41Eid7Q8+bxj7+2Dg==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-content-alt-text@3.0.0':
-    resolution: {integrity: sha512-OHa+4aCcrJtHpPWB3zptScHwpS1TUbeLR4uO0ntIz0Su/zw9SoWkVu+tDMSySSAsNtNSI3kut4fTliFwIsrHxA==}
+  '@csstools/postcss-container-rule-prelude-list@1.0.1':
+    resolution: {integrity: sha512-c5qlevVGKHU+zDbVoUGSZl1Mw7Vl1gVRKv6cdIYnaoyM+9Ou23Ian0H5Gr2ZF+lsDWovPK03hOSAbkw6HS8aTg==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-contrast-color-function@3.0.3':
-    resolution: {integrity: sha512-YcohXq+/hfYeobKirg3oXGivDaaTfOPv568bE3jYQCn9ILpFz+RgyJR/kF7ZWh5560TTlTjeCqF4ZmVsj2zwnw==}
+  '@csstools/postcss-content-alt-text@3.0.2':
+    resolution: {integrity: sha512-LUT1eKBzb71pmky0ke2OHJHdcqHl1vtl++qzJei5FioMVWDzxVApElTZsoFwbqV8Et+UmxzieOuhwomuyRullw==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-exponential-functions@3.0.2':
-    resolution: {integrity: sha512-WDrfdFJXF4M67+wniEGr/5XVzsmn1rt2lL1YAlTfE7x7XDlRstTc5e+HuFoGv6jkiMWTwPsiADJaLwsnGC3UjQ==}
+  '@csstools/postcss-contrast-color-function@3.0.6':
+    resolution: {integrity: sha512-7H+LLv2+A5q/l9TdWLnLB7ZgMT92aOVImzVpYSHg9pCEHSeskbqssn05rKb+ysouRM8rbg649Q2g2kIKFqLYvQ==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-exponential-functions@3.0.3':
+    resolution: {integrity: sha512-mB/NoeHLBHh0LZiVSrFdRDA/NxSfmg4tSN9117IJH9bdC2BzSTVgc82h3Gu/sdBXay6kDH2sA7fbkTigMiEi2A==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
@@ -2239,26 +2528,32 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-gamut-mapping@3.0.3':
-    resolution: {integrity: sha512-3v5ZvcVuynhFh5qCJX2LIJ9Iry8/SvxfOEj6vDngNxbH/3OKTZBFLgK+DgLuIbsP1DLA9LLH3Rn7jmRxXgEDLA==}
+  '@csstools/postcss-gamut-mapping@3.0.6':
+    resolution: {integrity: sha512-lopCMFvN6ohy33lLmOY46matUrpL1ymVGOyebflzMb44pXoGy+f27glXCXz0PfQmfv8On3a8eVTIQfkX7nf6gQ==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-gradients-interpolation-method@6.0.3':
-    resolution: {integrity: sha512-wrRIaRv1dkq30a8nvYWtSAf41bwCl+sVzLBKGnqeOwk81aSktKN3NattJpkiPyoOtEoFqChisl3WH3Csj/rOsw==}
+  '@csstools/postcss-gradients-interpolation-method@6.0.6':
+    resolution: {integrity: sha512-n23eZrwg8/XT6Ml42AAMd1PqRSm1LlrcGL+cbflpjL84xVZcWsXtHeKVzufg2uxICGnB4/t/iGa4XnOfySusEA==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-hwb-function@5.0.3':
-    resolution: {integrity: sha512-bHz0uc/PBg2wJEAlGinUf494nMyuXsVKH/fExc2xGkvL6WHOKlxzx/lkn+2AVCQACtWBLVRCBDgDnkYr4RSC9w==}
+  '@csstools/postcss-hwb-function@5.0.6':
+    resolution: {integrity: sha512-KO1PBdiyzsxVOnripQbdMF8jXlBym3CtwEWHGQWfjRB2Q7BIU6sE9GGv2OrgG3TyqPOz5BgAwackYlYlVeHWvA==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-ic-unit@5.0.0':
-    resolution: {integrity: sha512-/ws5d6c4uKqfM9zIL3ugcGI+3fvZEOOkJHNzAyTAGJIdZ+aSL9BVPNlHGV4QzmL0vqBSCOdU3+rhcMEj3+KzYw==}
+  '@csstools/postcss-ic-unit@5.0.2':
+    resolution: {integrity: sha512-1Wcp0ACoGKImCL9mYm6EIdqtT2JuJoeFp/06Efa6pRT0y3elLgF3jYer+c3+qUoBhV/2uDKtfWrCwAkHJ0CB9w==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      postcss: ^8.4
+
+  '@csstools/postcss-image-function@1.0.1':
+    resolution: {integrity: sha512-6V7+8npoBxVgO3JbIdKqI6eo1NAIQtO0oNSfLSgH439WYB43/kM+GneG4elkgglRo1ppgVhjXxmNqhI+K4pEzg==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
@@ -2275,8 +2570,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-light-dark-function@3.0.0':
-    resolution: {integrity: sha512-s++V5/hYazeRUCYIn2lsBVzUsxdeC46gtwpgW6lu5U/GlPOS5UTDT14kkEyPgXmFbCvaWLREqV7YTMJq1K3G6w==}
+  '@csstools/postcss-light-dark-function@3.0.2':
+    resolution: {integrity: sha512-Fu6si5QhRrT5lP7nmXxfowR8zNkYrqoolsWOZxPZBZpVTdoEKazN6v+K53vPcy1EM4Mlj6tSaEjMu4gAwC8yqw==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
@@ -2311,8 +2606,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-media-minmax@3.0.2':
-    resolution: {integrity: sha512-+ABxs2ZhJDhy+B9PJg7pgkGq6/d3XPXsWl7+6yZfAk4b2ba6aQ1h2AiTn04XwS6rpMpZEF3tONli/ubfu4y8AQ==}
+  '@csstools/postcss-media-minmax@3.0.3':
+    resolution: {integrity: sha512-ch1tNS+1QayiHTGsyc53zv3AzrSd0zigjbkfLxoeuzzJyn32+P3V7em3u5vLVnqLMzBbEZK//GI13EVTIPRdDA==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
@@ -2341,8 +2636,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-oklab-function@5.0.3':
-    resolution: {integrity: sha512-vTMgJFMwMt9gnPvhKaDnMR7E/h9Nb+rPUv825SY5VUo4PWj+w0OH/N2NqgvjYeubaA3BVckbKDlvADATRpD4Hw==}
+  '@csstools/postcss-oklab-function@5.0.6':
+    resolution: {integrity: sha512-6yZ+OySSaBybv12OfgKFBgCK1Se2mBbhh9eIDbUdWGHJUXZPQoLbtPj8S6Wg0lqe0nTqKgY/l8Ir9lHrm2TUBQ==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
@@ -2353,8 +2648,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-progressive-custom-properties@5.0.0':
-    resolution: {integrity: sha512-NsJoZ89rxmDrUsITf8QIk5w+lQZQ8Xw5K6cLFG+cfiffsLYHb3zcbOOrHLetGl1WIhjWWQ4Cr8MMrg46Q+oACg==}
+  '@csstools/postcss-progressive-custom-properties@5.1.1':
+    resolution: {integrity: sha512-b9+lusgVDTHXRBgYKE9s0RKUyEn6Q/knmMDmYmSrkZjtpb0Nd71pBtgVMf9tSpOIb0K8hyzeyy6JyKFqg5rBJw==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
@@ -2365,14 +2660,14 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-random-function@3.0.2':
-    resolution: {integrity: sha512-iQ3vfX1LIqRXX7P1/ol45EpJ5CTWdQCAfdpTlHlsRPU4jMQeepmeNjQ0F60bj8RWTS1RkJ318fzzq4mUlyZ7hA==}
+  '@csstools/postcss-random-function@3.0.3':
+    resolution: {integrity: sha512-0EScyKxscGonwpi30Hj9DEAr0X8D2eDhOqqayQXE91gIqGli9UT+deLYqoogZLOy5GT+ncqltMqztc/q+0UkhA==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-relative-color-syntax@4.0.3':
-    resolution: {integrity: sha512-SZSImz4KufmLi0dRwYivWXlza+7HF84SRApY8R48SyWgn+f0gDvmCn7D2Ie4CED7qU0JJK+YfCUC1HVlaQ10dg==}
+  '@csstools/postcss-relative-color-syntax@4.0.6':
+    resolution: {integrity: sha512-4SUC+qfJE/8sV62oo/fcxNKSBgiSVqE8c7f9TBwvNY3WnD0YHJyEM3eIjXn1CxbMNl7gR6uBVuLuJB3xgr/O1w==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
@@ -2383,14 +2678,14 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-sign-functions@2.0.2':
-    resolution: {integrity: sha512-vOxkkMCMVnyaj7CW03uKR2R/zhJaCrptsXlm31HgI/dqC1lSIGnmu5W7N68x23XwcSgc8fE/fg0jKj4x1XFH4w==}
+  '@csstools/postcss-sign-functions@2.0.3':
+    resolution: {integrity: sha512-2BCPwlpeQweTC/8S8oQFYhYD5kxYkiroLf3AUJV2kVoKkSZ+4WM4rSwySXlKrqXL8HfCryAwVrJg7B0jr/RnOw==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-stepped-value-functions@5.0.2':
-    resolution: {integrity: sha512-4PtqkRoBcMSxZG00gcDv+nq7cxVUua+Yd7TmG16qzJjdolyICHkx1RfhNL5mKSnWOLxUnk/IdxAoWN+KU7E/ng==}
+  '@csstools/postcss-stepped-value-functions@5.0.3':
+    resolution: {integrity: sha512-nXMFQBz5Pi2LLG02iqm2k+scrqwtqJT9ta/gN8S79oBZ23M0E7O3wDJ20//3z5Q6HU5e+K0n+SmmxN6iWtbm6w==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
@@ -2407,14 +2702,14 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-text-decoration-shorthand@5.0.3':
-    resolution: {integrity: sha512-62fjggvIM1YYfDJPcErMUDkEZB6CByG8neTJqexnZe1hRBgCjD4dnXDLoCSSurjs1LzjBq6irFDpDaOvDZfrlw==}
+  '@csstools/postcss-text-decoration-shorthand@5.0.4':
+    resolution: {integrity: sha512-LHQL1a0CW0j3oBEivwgp1Gqv+VUppWpEyedM9GBzE6yIT6tnZqY9v0ADX1jO6IptTZTdrnBwM+dveDIuUP+pTA==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/postcss-trigonometric-functions@5.0.2':
-    resolution: {integrity: sha512-hRansZmQk1HH11WGUNlWy8H/DCB9Wy6zDbRcyBfF2UUP+V2fubK+qwmq0q6LIDje5gRzxlKyWhgFYxPy1ohivA==}
+  '@csstools/postcss-trigonometric-functions@5.0.3':
+    resolution: {integrity: sha512-p9LTvLj+DFpl5RHbG/X9QGwg7BoMOBsRBZqsUAKKVvCw7MRCsk1P1llTUR/MW5nyZ4IsjFGDtDwTTj1reJjxvg==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
@@ -2425,8 +2720,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  '@csstools/selector-resolve-nested@4.0.0':
-    resolution: {integrity: sha512-9vAPxmp+Dx3wQBIUwc1v7Mdisw1kbbaGqXUM8QLTgWg7SoPGYtXBsMXvsFs/0Bn5yoFhcktzxNZGNaUt0VjgjA==}
+  '@csstools/selector-resolve-nested@4.0.1':
+    resolution: {integrity: sha512-j3vdQu0XwLME5qOTWxm8cnmvsf423R2YL6DbKklCHZwkDm7UdKNu6RPlw4REIJhSlKBICY3B70/7QZdicLqZgg==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss-selector-parser: ^7.1.1
@@ -2443,18 +2738,35 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  '@develar/schema-utils@2.6.5':
-    resolution: {integrity: sha512-0cp4PsWQ/9avqTVMCtZ+GirikIA36ikvjtHweU4/j8yLtgObI0+JUPhYFScgwlteveGB1rt3Cm8UhN04XayDig==}
-    engines: {node: '>= 8.9.0'}
-
   '@discoveryjs/json-ext@0.6.3':
     resolution: {integrity: sha512-4B4OijXeVNOPZlYA2oEwWOTkzyltLao+xbotHQeqN++Rv27Y6s818+n2Qkp8q+Fxhn0t/5lA5X1Mxktud8eayQ==}
     engines: {node: '>=14.17.0'}
 
-  '@discoveryjs/json-ext@1.0.0':
-    resolution: {integrity: sha512-dDlz3W405VMFO4w5kIP9DOmELBcvFQGmLoKSdIRstBDubKFYwaNHV1NnlzMCQpXQFGWVALmeMORAuiLx18AvZQ==}
+  '@discoveryjs/json-ext@1.1.0':
+    resolution: {integrity: sha512-Xc3VhU02wqZ1HvHRJUwL09HkZSTvidqY5Ya0NXBSYOxAp+Ln9dcJr9fySI+CkONzP3PekQo9WdzCv0PGER/mOA==}
     engines: {node: '>=14.17.0'}
 
+  '@dnd-kit/abstract@0.5.0':
+    resolution: {integrity: sha512-hi13iMJgjPX/KDYVKg5VeDIhmYiV6buc9bAX+tCLYf4QdyYjPbsXjn2sPo6m7fQ6SGJBEFgHJ2PemeKDUbwBaA==}
+
+  '@dnd-kit/collision@0.5.0':
+    resolution: {integrity: sha512-xUqRn3lS7oqLkT0AnnHS/STh/Czvwe1UapZFYiLbsUGxopMsQd4teaPCzPouOThoMdGEe+dHWjfqJl6t9iG4mQ==}
+
+  '@dnd-kit/dom@0.5.0':
+    resolution: {integrity: sha512-f2xFJp5SYQ8EW/Fbtaa8iBb66hpkWc7qa8vU826KW11/tb44sH+AisZnGtwOOTWTQ0GraqBDr5ixTErww+eKXw==}
+
+  '@dnd-kit/geometry@0.5.0':
+    resolution: {integrity: sha512-ubHQS1CiSDH8ssYH2xG5BnpwPSFP1tStXXjug7/Ba6qnQdu/EUH47l6QXKIksQnnanfVfDf0aGeevRxgZlj28A==}
+
+  '@dnd-kit/react@0.5.0':
+    resolution: {integrity: sha512-abQPLI8lmfVE+v/n+pqy5WFxrw6T2Yg0UQZsL78dp5DKci7dKTVDjvLWqvass+XTFtzJmsZEjk1NdqE6xG8Jiw==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+
+  '@dnd-kit/state@0.5.0':
+    resolution: {integrity: sha512-y7XbabQqjF58Lk8YmDQuR8l6QjN+Kh4qlGEjUvHuIeasLk1QP+9L5diXS98VMxQIivyMmUtX2//f+3N7qPJX4w==}
+
   '@docsearch/css@3.8.2':
     resolution: {integrity: sha512-y05ayQFyUmCXze79+56v/4HpycYF3uFqB78pLPrSV5ZKAlDuIAAJNhaRi8tTdRNXh05yxX/TyNnzD6LwSM89vQ==}
 
@@ -2478,13 +2790,17 @@ packages:
       search-insights:
         optional: true
 
+  '@electron-internal/extract-zip@1.0.3':
+    resolution: {integrity: sha512-OjKpjB7gohtEjZiq6nDx1egqjZJhGPN1iFOIED+NFhB/MMkXw/XRcHjh1DGXKT5z2W9eW7Jy2UKU3gpjvusFTQ==}
+    engines: {node: '>=22.12.0'}
+
   '@electron/asar@3.4.1':
     resolution: {integrity: sha512-i4/rNPRS84t0vSRa2HorerGRXWyF4vThfHesw0dmcWHp+cspK743UanA0suA5Q5y8kzY2y6YKrvbIUn69BCAiA==}
     engines: {node: '>=10.12.0'}
     hasBin: true
 
-  '@electron/asar@4.2.0':
-    resolution: {integrity: sha512-npW1NW5yy8EB9XY/vEw9sUdgmq0sJEhmSBb6bqyFOAw1CSkrhvAvO6QWlW8CdIMo8VN1lkdF345l/MeW0LrY0Q==}
+  '@electron/asar@4.2.1':
+    resolution: {integrity: sha512-rGyEe7iy52zxiWuihV/h/AqQrFkx7YnUUJKW1bdufVDHCzIMP/XDrDI/NOzv/LLtzt3NduAzNa475WRmRnmswQ==}
     engines: {node: '>=22.12.0'}
     hasBin: true
 
@@ -2492,8 +2808,8 @@ packages:
     resolution: {integrity: sha512-zx0EIq78WlY/lBb1uXlziZmDZI4ubcCXIMJ4uGjXzZW0nS19TjSPeXPAjzzTmKQlJUZm0SbmZhPKP7tuQ1SsEw==}
     hasBin: true
 
-  '@electron/fuses@2.1.1':
-    resolution: {integrity: sha512-38ho27/mtUV/LpsZ1LCDJUomKBBSUZDk/qBH4FNNtoN5fmnkmWDcIp5pm1Kv3InqhRjKZKs7Jzx+wWZNMArHrA==}
+  '@electron/fuses@2.1.3':
+    resolution: {integrity: sha512-LoKJUXNiJ4JM8IIrUltSHI+8pkogaGj5wmJx81jE/Wk3g2w1/kfMbTEKNoY5kitGE8hiC12h32R/1SlywFtxXg==}
     engines: {node: '>=22.12.0'}
     hasBin: true
 
@@ -2514,8 +2830,8 @@ packages:
     engines: {node: '>=12.0.0'}
     hasBin: true
 
-  '@electron/rebuild@4.0.3':
-    resolution: {integrity: sha512-u9vpTHRMkOYCs/1FLiSVAFZ7FbjsXK+bQuzviJZa+lG7BHZl1nz52/IcGvwa3sk80/fc3llutBkbCq10Vh8WQA==}
+  '@electron/rebuild@4.0.4':
+    resolution: {integrity: sha512-Rzc39XPdk/+/wBG8MfwAHohXflep0ITUfulb6Rgz3R0NeSB1noE+E9/M/cb8ftCAiyDD9PPhLuuWgE1GaInbKg==}
     engines: {node: '>=22.12.0'}
     hasBin: true
 
@@ -2531,21 +2847,42 @@ packages:
   '@emnapi/core@1.10.0':
     resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==}
 
+  '@emnapi/core@1.11.2':
+    resolution: {integrity: sha512-TC8MkTuZUtcTSiFeuC0ksCh9QIJ5+F21MvZ4Wn4ORfYaFJ/0dsiudv5tVkejgwZlwQ39jL9WWDe2lz8x0WglOA==}
+
   '@emnapi/core@1.4.5':
     resolution: {integrity: sha512-XsLw1dEOpkSX/WucdqUhPWP7hDxSvZiY+fsUC14h+FtQ2Ifni4znbBt8punRX+Uj2JG/uDb8nEHVKvrVlvdZ5Q==}
 
+  '@emnapi/core@1.9.2':
+    resolution: {integrity: sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==}
+
   '@emnapi/runtime@1.10.0':
     resolution: {integrity: sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==}
 
+  '@emnapi/runtime@1.11.2':
+    resolution: {integrity: sha512-kyOl3X0DuTiT1h2ft8r2fYO8JYtU9a9Xis/zBSiGArNaagCOWx90N1k2wxp18czFDH+OgcWGb5ZP/XMt3dcyPA==}
+
   '@emnapi/runtime@1.4.5':
     resolution: {integrity: sha512-++LApOtY0pEEz1zrd9vy1/zXVaVJJ/EbAF3u0fXIzPJEDtnITsBGbbK0EkM72amhl/R5b+5xx0Y/QhcVOpuulg==}
 
+  '@emnapi/runtime@1.9.2':
+    resolution: {integrity: sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==}
+
   '@emnapi/wasi-threads@1.0.4':
     resolution: {integrity: sha512-PJR+bOmMOPH8AtcTGAyYNiuJ3/Fcoj2XN/gBEWzDIKh254XO+mM9XoXHk5GNEhodxeMznbg7BlRojVbKN+gC6g==}
 
   '@emnapi/wasi-threads@1.2.1':
     resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
 
+  '@emnapi/wasi-threads@1.2.2':
+    resolution: {integrity: sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==}
+
+  '@emotion/is-prop-valid@1.4.0':
+    resolution: {integrity: sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==}
+
+  '@emotion/memoize@0.9.0':
+    resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==}
+
   '@esbuild/aix-ppc64@0.27.4':
     resolution: {integrity: sha512-cQPwL2mp2nSmHHJlCyoXgHGhbEPMrEEU5xhkcy3Hs/O7nGZqEpZ2sUtLaL9MORLtDfRvVl2/3PAuEkYZH0Ty8Q==}
     engines: {node: '>=18'}
@@ -2702,8 +3039,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@eslint-community/eslint-utils@4.9.1':
-    resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
+  '@eslint-community/eslint-utils@4.10.1':
+    resolution: {integrity: sha512-cuadcxVFE8sDK6iWJbs8Sn0av2Nrh2QSGQhVlBW9AaAHqHwjWsZHT8LJ4hFGPh7ASBV2deFdM7H/DPjulmh8rg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
@@ -2720,11 +3057,6 @@ packages:
     resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  '@fastify/otel@0.18.0':
-    resolution: {integrity: sha512-3TASCATfw+ctICSb4ymrv7iCm0qJ0N9CarB+CZ7zIJ7KqNbwI5JjyDL1/sxoC0ccTO1Zyd1iQ+oqncPg5FJXaA==}
-    peerDependencies:
-      '@opentelemetry/api': ^1.9.0
-
   '@fetch-mock/jest@0.2.20':
     resolution: {integrity: sha512-DGX2bhBInodaWPMV3+UZ530aVM3wDj16sAPjFzkrwb0JwNWIQK07CNbYprQ3Tmd2ixDJeaNx2E0aNb+hRb8FFA==}
     engines: {node: '>=18.11.0'}
@@ -2746,14 +3078,14 @@ packages:
     peerDependencies:
       react: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  '@floating-ui/core@1.7.4':
-    resolution: {integrity: sha512-C3HlIdsBxszvm5McXlB8PeOEWfBhcGBTZGkGlWc2U0KFY5IwG5OQEuQ8rq52DZmcHDlPLd+YFBK+cZcytwIFWg==}
+  '@floating-ui/core@1.8.0':
+    resolution: {integrity: sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==}
 
-  '@floating-ui/dom@1.7.5':
-    resolution: {integrity: sha512-N0bD2kIPInNHUHehXhMke1rBGs1dwqvC9O9KYMyyjK7iXt7GAhnro7UlcuYcGdS/yYOlq0MAVgrow8IbWJwyqg==}
+  '@floating-ui/dom@1.8.0':
+    resolution: {integrity: sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==}
 
-  '@floating-ui/react-dom@2.1.7':
-    resolution: {integrity: sha512-0tLRojf/1Go2JgEVm+3Frg9A3IW8bJgKgdO0BN5RkF//ufuz2joZM63Npau2ff3J6lUVYgDSNzNkR+aH3IVfjg==}
+  '@floating-ui/react-dom@2.1.9':
+    resolution: {integrity: sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2764,26 +3096,26 @@ packages:
       react: '>=17.0.0'
       react-dom: '>=17.0.0'
 
-  '@floating-ui/utils@0.2.10':
-    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+  '@floating-ui/utils@0.2.12':
+    resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==}
 
-  '@fontsource/fira-code@5.2.7':
-    resolution: {integrity: sha512-tnB9NNund9TwIym8/7DMJe573nlPEQb+fKUV5GL8TBYXjIhDvL0D7mgmNVNQUPhXp+R7RylQeiBdkA4EbOHPGQ==}
+  '@fontsource/fira-code@5.3.0':
+    resolution: {integrity: sha512-EJL968RJRkakubAj/coU8pSUaeTE5UNoRjtzAr6kGiSZ3jWuN8/AKWHwym/PFUaQL1q7IL/H+EXs4358YhrTBQ==}
 
   '@fontsource/inconsolata@5.2.8':
     resolution: {integrity: sha512-lIZW+WOZYpUH91g9r6rYYhfTmptF3YPPM54ZOs8IYVeeL4SeiAu4tfj7mdr8llYEq31DLYgi6JtGIJa192gB0Q==}
 
-  '@fontsource/inter@5.2.8':
-    resolution: {integrity: sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg==}
+  '@fontsource/inter@5.3.0':
+    resolution: {integrity: sha512-RofMylZmjlJEfELXeNHFWBRcSs75rGU/6bV2S2jfnvv/3rPXPGe0LgUJTklcHZ9lM4OZmAVFhcJPnACfb91A3g==}
 
-  '@formatjs/fast-memoize@3.1.3':
-    resolution: {integrity: sha512-Ocd1vPuD68rW6BJDuAOtnnc1GPeVepY5kZXML1psGVFQ+1Q8CfkftT3Tnam+Mxx97Pz08jIEDCotl/GV+Naccg==}
+  '@formatjs/fast-memoize@3.1.7':
+    resolution: {integrity: sha512-zXfhLpvA6T7+efdt9JLbBwZ00tT7NsBMDVnDu8rpHeNNv8KfRZAMo2gkG0k9lK/Nzc//3kJ9pImsfuJxk3KhUA==}
 
-  '@formatjs/intl-localematcher@0.8.5':
-    resolution: {integrity: sha512-TEW/NR367c3PcQ2AXfkNig9jC740+qbkM0LgKl7UCE7Xtv7C5Uk1mvlu86MjQZBmscUai8HSWjcEETpwaVvJ6A==}
+  '@formatjs/intl-localematcher@0.8.13':
+    resolution: {integrity: sha512-kHEAFOkeJSPNi7c5PaKaRjxcBrJwzzt81ifUu+8uve1EDW/VJl83KsxmqgqNZLzcFEhSliZGvx3+pk/RH0IOmg==}
 
-  '@formatjs/intl-segmenter@12.2.4':
-    resolution: {integrity: sha512-vlGohuIFmkVR0o/p/IbgxjcWXy03kyHg70hj/OUR1S/VBOtHpzjJDP1hoK5k2ssMwR953+wPvc0xbqifKoMayA==}
+  '@formatjs/intl-segmenter@12.2.13':
+    resolution: {integrity: sha512-jhxNn6FnvlIOYzn+VG4xRjcLRrLHlDGoRd723YuwdsNHZRvvcC4qvnh5xC5udSv0CiwbBKnPY3OzDNni2NxqIw==}
 
   '@gar/promise-retry@1.0.3':
     resolution: {integrity: sha512-GmzA9ckNokPypTg10pgpeHNQe7ph+iIKKmhKu3Ob9ANkswreCx7R3cKmY781K8QK3AqVL3xVh9A42JvIAbkkSA==}
@@ -2792,8 +3124,8 @@ packages:
   '@gerrit0/mini-shiki@3.23.0':
     resolution: {integrity: sha512-bEMORlG0cqdjVyCEuU0cDQbORWX+kYCeo0kV1lbxF5bt4r7SID2l9bqsxJEM0zndaxpOUT7riCyIVEuqq/Ynxg==}
 
-  '@grpc/grpc-js@1.14.3':
-    resolution: {integrity: sha512-Iq8QQQ/7X3Sac15oB6p0FmUg/klxQvXLeileoqrTRGJYLV+/9tubbr9ipz0GKHjmXVsgFPo/+W+2cA8eNcR+XA==}
+  '@grpc/grpc-js@1.14.4':
+    resolution: {integrity: sha512-k9Dj3DV/itK9D06Y8f190Qgop7/Ui+D0njFV3LHMPwPT75DpXLQohE9Wmz0QElrJnzsjB7KPWiKJbOl7IPDArQ==}
     engines: {node: '>=12.10.0'}
 
   '@grpc/proto-loader@0.7.15':
@@ -2801,8 +3133,8 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
-  '@grpc/proto-loader@0.8.0':
-    resolution: {integrity: sha512-rc1hOQtjIWGxcxpb9aHAfLpIctjEnsDehj0DAiVfBlmT84uvR0uUtN2hEi/ecvWVjXUGf5qPF4qEgiLOx1YIMQ==}
+  '@grpc/proto-loader@0.8.1':
+    resolution: {integrity: sha512-wtF6h+DY6M3YaDBPAmvuuA6jV8Sif9MjtOI5euKFWRgCDl5PeDpPsHR9u2l6St5ceY8AZgoNDww5+HvEsXFsGg==}
     engines: {node: '>=6'}
     hasBin: true
 
@@ -2819,8 +3151,8 @@ packages:
   '@hapi/pinpoint@2.0.1':
     resolution: {integrity: sha512-EKQmr16tM8s16vTT3cA5L0kZZcTMU5DUOZTuvpnY738m+jyP3JIUj+Mm1xc1rsLkGBQ/gVnfKYPwOmPg1tUR4Q==}
 
-  '@hapi/tlds@1.1.6':
-    resolution: {integrity: sha512-xdi7A/4NZokvV0ewovme3aUO5kQhW9pQ2YD1hRqZGhhSi5rBv4usHYidVocXSi9eihYsznZxLtAiEYYUL6VBGw==}
+  '@hapi/tlds@1.1.7':
+    resolution: {integrity: sha512-MgNjRwy9Ti92yVAixLmDc8dd1bJIKwO9qlWCfFQRwRmUEDPQHYn4G6hwPFvFGUTzAa0FsS+inMjLin7GnyBRhA==}
     engines: {node: '>=14.0.0'}
 
   '@hapi/topo@6.0.2':
@@ -2845,8 +3177,8 @@ packages:
   '@iconify/types@2.0.0':
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
 
-  '@iconify/utils@3.1.0':
-    resolution: {integrity: sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw==}
+  '@iconify/utils@3.1.3':
+    resolution: {integrity: sha512-LPKOXPn/zV+zis1oOfGWogaXVpqUybF3ZS6SCZIsz8vg0ivVp9+fVqyYB7xq0aiST/VhUQYGO1qo6uoYSiEJqw==}
 
   '@isaacs/cliui@8.0.2':
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
@@ -2864,12 +3196,12 @@ packages:
     resolution: {integrity: sha512-+Sg6GCR/wy1oSmQDFq4LQDAhm3ETKnorxN+y5nbLULOR3P0c14f2Wurzj3/xqPXtasLFfHd5iRFQ7AJt4KH2cw==}
     engines: {node: '>=8'}
 
-  '@jest/console@30.3.0':
-    resolution: {integrity: sha512-PAwCvFJ4696XP2qZj+LAn1BWjZaJ6RjG6c7/lkMaUJnkyMS34ucuIsfqYvfskVNvUI27R/u4P1HMYFnlVXG/Ww==}
+  '@jest/console@30.4.1':
+    resolution: {integrity: sha512-v3bhyxUh9Hgmo5p6hAOXe14/R3ZxZDOsvHleh4B07z3m/x4/ngPUXEm9XwK4sF4u+f+P2ORb0Ge+MgpaqRMVDA==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  '@jest/core@30.3.0':
-    resolution: {integrity: sha512-U5mVPsBxLSO6xYbf+tgkymLx+iAhvZX43/xI1+ej2ZOPnPdkdO1CzDmFKh2mZBn2s4XZixszHeQnzp1gm/DIxw==}
+  '@jest/core@30.4.2':
+    resolution: {integrity: sha512-TZJA6cPJUFxoWhxaLo8t0VX/MZX2wPWr0uIDvLSHIvN4gu9h02vSzqI2kBADG1ExqQlC+cY09xKMSreivvrChQ==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
     peerDependencies:
       node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
@@ -2881,16 +3213,12 @@ packages:
     resolution: {integrity: sha512-n5H8QLDJ47QqbCNn5SuFjCRDrOLEZ0h8vAHCK5RL9Ls7Xa8AQLa/YxAc9UjFqoEDM48muwtBGjtMY5cr0PLDCw==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  '@jest/diff-sequences@30.3.0':
-    resolution: {integrity: sha512-cG51MVnLq1ecVUaQ3fr6YuuAOitHK1S4WUJHnsPFE/quQr33ADUx1FfrTCpMCRxvy0Yr9BThKpDjSlcTi91tMA==}
-    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
-
   '@jest/diff-sequences@30.4.0':
     resolution: {integrity: sha512-zOpzlfUs45l6u7jm39qr87JCHUDsaeCtvL+kQe/Vn9jSnRB4/5IPXISm0h9I1vZW/o00Kn4UTJ2MOlhnUGwv3g==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  '@jest/environment-jsdom-abstract@30.3.0':
-    resolution: {integrity: sha512-0hNFs5N6We3DMCwobzI0ydhkY10sT1tZSC0AAiy+0g2Dt/qEWgrcV5BrMxPczhe41cxW4qm6X+jqZaUdpZIajA==}
+  '@jest/environment-jsdom-abstract@30.4.1':
+    resolution: {integrity: sha512-dSlKrqug3siYNHVnjwIldShY12wAH3spwRltO/+8VOjg0X+xEq7vOs3DbBs4LRKsu7OH+NUb9kuZUNBF9Ho3TA==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
     peerDependencies:
       canvas: ^3.0.0
@@ -2899,36 +3227,36 @@ packages:
       canvas:
         optional: true
 
-  '@jest/environment@30.3.0':
-    resolution: {integrity: sha512-SlLSF4Be735yQXyh2+mctBOzNDx5s5uLv88/j8Qn1wH679PDcwy67+YdADn8NJnGjzlXtN62asGH/T4vWOkfaw==}
+  '@jest/environment@30.4.1':
+    resolution: {integrity: sha512-AK9yNRqgKxiabqMoe4oW+3/TSSeV8vkdC7BGaxZdU0AFXfOpofTLqdru2GXKZghP3sdgwE9XXpnVwfZ8JnFV4w==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  '@jest/expect-utils@30.3.0':
-    resolution: {integrity: sha512-j0+W5iQQ8hBh7tHZkTQv3q2Fh/M7Je72cIsYqC4OaktgtO7v1So9UTjp6uPBHIaB6beoF/RRsCgMJKvti0wADA==}
+  '@jest/expect-utils@30.4.1':
+    resolution: {integrity: sha512-ZBn5CglH8fBsQsvs4VWNzD4aWfUYks+IdOOQU3MEK71ol/BcVm+P+rtb1KpiFBpSWSCE27uOahyyf1vfqOVbcQ==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  '@jest/expect@30.3.0':
-    resolution: {integrity: sha512-76Nlh4xJxk2D/9URCn3wFi98d2hb19uWE1idLsTt2ywhvdOldbw3S570hBgn25P4ICUZ/cBjybrBex2g17IDbg==}
+  '@jest/expect@30.4.1':
+    resolution: {integrity: sha512-ginrj6TMgh2GshLUGCjO94Ptx9HhdZA/I6A9iUfyeLKFtdAjnKzHDgzgP9HYQgbxM1lbXScQ2eUBz2lGeVDPWA==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  '@jest/fake-timers@30.3.0':
-    resolution: {integrity: sha512-WUQDs8SOP9URStX1DzhD425CqbN/HxUYCTwVrT8sTVBfMvFqYt/s61EK5T05qnHu0po6RitXIvP9otZxYDzTGQ==}
+  '@jest/fake-timers@30.4.1':
+    resolution: {integrity: sha512-iW5umdmfPeWzehrVhugFQZqCchSCud5S1l2YT0O9ZhjRR0ExclANDZkiSBwzqtnlOn0J1JXvO+HZ6rkuyOVOgQ==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
   '@jest/get-type@30.1.0':
     resolution: {integrity: sha512-eMbZE2hUnx1WV0pmURZY9XoXPkUYjpc55mb0CrhtdWLtzMQPFvu/rZkTLZFTsdaVQa+Tr4eWAteqcUzoawq/uA==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  '@jest/globals@30.3.0':
-    resolution: {integrity: sha512-+owLCBBdfpgL3HU+BD5etr1SvbXpSitJK0is1kiYjJxAAJggYMRQz5hSdd5pq1sSggfxPbw2ld71pt4x5wwViA==}
+  '@jest/globals@30.4.1':
+    resolution: {integrity: sha512-ZbuY4cmXC8DkxYjfvT2DbcHWL2T6vmsMhXCDcmTB2T0y0gaezBI77ufq5ZAIdcRkYZ7NEQEDg1xFeKbxUJ5v5Q==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  '@jest/pattern@30.0.1':
-    resolution: {integrity: sha512-gWp7NfQW27LaBQz3TITS8L7ZCQ0TLvtmI//4OwlQRx4rnWxcPNIYjxZpDcN4+UlGxgm3jS5QPz8IPTCkb59wZA==}
+  '@jest/pattern@30.4.0':
+    resolution: {integrity: sha512-RAWn3+f9u8BsHijKJ71uHcFp6vmyEt6VvoWXkl6hKF3qVIuWNmudVjg12DlBPGup/frIl5UcUlH5HfEuvHpEXg==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  '@jest/reporters@30.3.0':
-    resolution: {integrity: sha512-a09z89S+PkQnL055bVj8+pe2Caed2PBOaczHcXCykW5ngxX9EWx/1uAwncxc/HiU0oZqfwseMjyhxgRjS49qPw==}
+  '@jest/reporters@30.4.1':
+    resolution: {integrity: sha512-/SnkPCzEQpUaBH81kjdEdDdo2WZl5hxw+BmLDGWjRkm8o7XlhjwsU36cqwe5PGBE5WYpBvDzRSdXx9rbGuJtNA==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
     peerDependencies:
       node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
@@ -2936,36 +3264,32 @@ packages:
       node-notifier:
         optional: true
 
-  '@jest/schemas@30.0.5':
-    resolution: {integrity: sha512-DmdYgtezMkh3cpU8/1uyXakv3tJRcmcXxBOcO0tbaozPwpmh4YMsnWrQm9ZmZMfa5ocbxzbFk6O4bDPEc/iAnA==}
-    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
-
   '@jest/schemas@30.4.1':
     resolution: {integrity: sha512-i6b4qw5qnP8c5FEeBJg/uZQ4ddrkN6Ca8qISJh0pr7a5hfn3h3v5x60BEbOC7OYAGZNMs1LfFLwnW2CuK8F57Q==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  '@jest/snapshot-utils@30.3.0':
-    resolution: {integrity: sha512-ORbRN9sf5PP82v3FXNSwmO1OTDR2vzR2YTaR+E3VkSBZ8zadQE6IqYdYEeFH1NIkeB2HIGdF02dapb6K0Mj05g==}
+  '@jest/snapshot-utils@30.4.1':
+    resolution: {integrity: sha512-ObY4ljvQ95mt6iwKtVLetR/4yXiAgl3H4nJxhztr0MTjrN97TwDYrnCp/kF60Ec9HdhkWTHSu+Hg05aXfngpOA==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
   '@jest/source-map@30.0.1':
     resolution: {integrity: sha512-MIRWMUUR3sdbP36oyNyhbThLHyJ2eEDClPCiHVbrYAe5g3CHRArIVpBw7cdSB5fr+ofSfIb2Tnsw8iEHL0PYQg==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  '@jest/test-result@30.3.0':
-    resolution: {integrity: sha512-e/52nJGuD74AKTSe0P4y5wFRlaXP0qmrS17rqOMHeSwm278VyNyXE3gFO/4DTGF9w+65ra3lo3VKj0LBrzmgdQ==}
+  '@jest/test-result@30.4.1':
+    resolution: {integrity: sha512-/ZG7pgEiOmmWkN9TplKbOu4id2N5lh7FHwRwlkgBVAzGdRH+OkkQ8wX/kIxg4zmd3ZQvAL1RwL2yWsvNYYECTw==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  '@jest/test-sequencer@30.3.0':
-    resolution: {integrity: sha512-dgbWy9b8QDlQeRZcv7LNF+/jFiiYHTKho1xirauZ7kVwY7avjFF6uTT0RqlgudB5OuIPagFdVtfFMosjVbk1eA==}
+  '@jest/test-sequencer@30.4.1':
+    resolution: {integrity: sha512-PeYE+4td5rKjoRPxztObrXU+H8hsjZfxKMXOcmrr34JerSyB/ROOxbbicz8B7A5j9R9VayDnVPvBmedqCsFCdw==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  '@jest/transform@30.3.0':
-    resolution: {integrity: sha512-TLKY33fSLVd/lKB2YI1pH69ijyUblO/BQvCj566YvnwuzoTNr648iE0j22vRvVNk2HsPwByPxATg3MleS3gf5A==}
+  '@jest/transform@30.4.1':
+    resolution: {integrity: sha512-Wz0LyktlTvRefoymh+n64hQ84KNXsRGcwdoZ8CSa0Ea+fgYcHZlnk+hDP7v2MS7il2bQ5uTEIxf4/NNfhMN4KQ==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  '@jest/types@30.3.0':
-    resolution: {integrity: sha512-JHm87k7bA33hpBngtU8h6UBub/fqqA9uXfw+21j5Hmk7ooPHlboRNxHq0JcMtC+n8VJGP1mcfnD3Mk+XKe1oSw==}
+  '@jest/types@30.4.1':
+    resolution: {integrity: sha512-f1x/vJXIfjOlEmejYpbkbgw1gOqpPECwMvMEtBqe47j7H2Hg8h8w3o3ikhSXq3MI15kg+oQ0exWO0uCtTNJLoQ==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
   '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0':
@@ -3005,8 +3329,8 @@ packages:
     peerDependencies:
       tslib: '2'
 
-  '@jsonjoy.com/base64@17.65.0':
-    resolution: {integrity: sha512-Xrh7Fm/M0QAYpekSgmskdZYnFdSGnsxJ/tHaolA4bNwWdG9i65S8m83Meh7FOxyJyQAdo4d4J97NOomBLEfkDQ==}
+  '@jsonjoy.com/base64@17.67.0':
+    resolution: {integrity: sha512-5SEsJGsm15aP8TQGkDfJvz9axgPwAEm98S5DxOuYe8e1EbfajcDmgeXXzccEjh+mLnjqEKrkBdjHWS5vFNwDdw==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
@@ -3017,8 +3341,8 @@ packages:
     peerDependencies:
       tslib: '2'
 
-  '@jsonjoy.com/buffers@17.65.0':
-    resolution: {integrity: sha512-eBrIXd0/Ld3p9lpDDlMaMn6IEfWqtHMD+z61u0JrIiPzsV1r7m6xDZFRxJyvIFTEO+SWdYF9EiQbXZGd8BzPfA==}
+  '@jsonjoy.com/buffers@17.67.0':
+    resolution: {integrity: sha512-tfExRpYxBvi32vPs9ZHaTjSP4fHAfzSmcahOfNxtvGHcyJel+aibkPlGeBB+7AoC6hL7lXIE++8okecBxx7lcw==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
@@ -3029,56 +3353,56 @@ packages:
     peerDependencies:
       tslib: '2'
 
-  '@jsonjoy.com/codegen@17.65.0':
-    resolution: {integrity: sha512-7MXcRYe7n3BG+fo3jicvjB0+6ypl2Y/bQp79Sp7KeSiiCgLqw4Oled6chVv07/xLVTdo3qa1CD0VCCnPaw+RGA==}
+  '@jsonjoy.com/codegen@17.67.0':
+    resolution: {integrity: sha512-idnkUplROpdBOV0HMcwhsCUS5TRUi9poagdGs70A6S4ux9+/aPuKbh8+UYRTLYQHtXvAdNfQWXDqZEx5k4Dj2Q==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
 
-  '@jsonjoy.com/fs-core@4.57.2':
-    resolution: {integrity: sha512-SVjwklkpIV5wrynpYtuYnfYH1QF4/nDuLBX7VXdb+3miglcAgBVZb/5y0cOsehRV/9Vb+3UqhkMq3/NR3ztdkQ==}
+  '@jsonjoy.com/fs-core@4.64.0':
+    resolution: {integrity: sha512-zs2TAq7Six5jgMuoMNjpspAvOP3mhtgq/k1UyQodEzCtQi/N83y2/y+zcvnZSGp/Rxq96DBN+bValOBQAyn/ew==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
 
-  '@jsonjoy.com/fs-fsa@4.57.2':
-    resolution: {integrity: sha512-fhO8+iR2I+OCw668ISDJdn1aArc9zx033sWejIyzQ8RBeXa9bDSaUeA3ix0poYOfrj1KdOzytmYNv2/uLDfV6g==}
+  '@jsonjoy.com/fs-fsa@4.64.0':
+    resolution: {integrity: sha512-nMWOVbkLFyEgmXZih3wyvxA9XpgyyqyfrINMHvEFqhi7uqfRl7c9ERJt6yX7vgMPrB9Uo+OJO+Spa0cFzPD01w==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
 
-  '@jsonjoy.com/fs-node-builtins@4.57.2':
-    resolution: {integrity: sha512-xhiegylRmhw43Ki2HO1ZBL7DQ5ja/qpRsL29VtQ2xuUHiuDGbgf2uD4p9Qd8hJI5P6RCtGYD50IXHXVq/Ocjcg==}
+  '@jsonjoy.com/fs-node-builtins@4.64.0':
+    resolution: {integrity: sha512-/o7WRFhUWaM/fOrslwLZGnzn4RmRILykn+lAL+mNObqqRNw+CQSiij6hpCeZ+C7buhdoVo7go/OYqzaSUfDYmA==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
 
-  '@jsonjoy.com/fs-node-to-fsa@4.57.2':
-    resolution: {integrity: sha512-18LmWTSONhoAPW+IWRuf8w/+zRolPFGPeGwMxlAhhfY11EKzX+5XHDBPAw67dBF5dxDErHJbl40U+3IXSDRXSQ==}
+  '@jsonjoy.com/fs-node-to-fsa@4.64.0':
+    resolution: {integrity: sha512-WDD9WVs0hb7UAEKTgZW2f66WDrbj7gIIWwpP3spbLyXa0rghtUaFTB8L4gdR3ZCWwiKIsj38/CNijpVmpnuPUw==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
 
-  '@jsonjoy.com/fs-node-utils@4.57.2':
-    resolution: {integrity: sha512-rsPSJgekz43IlNbLyAM/Ab+ouYLWGp5DDBfYBNNEqDaSpsbXfthBn29Q4muFA9L0F+Z3mKo+CWlgSCXrf+mOyQ==}
+  '@jsonjoy.com/fs-node-utils@4.64.0':
+    resolution: {integrity: sha512-k5Indsx9hWW9xSF7Y6oSKKwtCUNhzZxadub3owhIlitc+iMRVlPPdX2duTKQWBL3qNWpXya8jykgaaWpheeS4w==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
 
-  '@jsonjoy.com/fs-node@4.57.2':
-    resolution: {integrity: sha512-nX2AdL6cOFwLdju9G4/nbRnYevmCJbh7N7hvR3gGm97Cs60uEjyd0rpR+YBS7cTg175zzl22pGKXR5USaQMvKg==}
+  '@jsonjoy.com/fs-node@4.64.0':
+    resolution: {integrity: sha512-dO+NNkODbUli4uV42bcNrrLvq5rE7SNpdZ5TNd0dtbLsAaNK3MDiIC9lUi+brboGoIjW6vd2fB1qao60nrk5xA==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
 
-  '@jsonjoy.com/fs-print@4.57.2':
-    resolution: {integrity: sha512-wK9NSow48i4DbDl9F1CQE5TqnyZOJ04elU3WFG5aJ76p+YxO/ulyBBQvKsessPxdo381Bc2pcEoyPujMOhcRqQ==}
+  '@jsonjoy.com/fs-print@4.64.0':
+    resolution: {integrity: sha512-PHZFccchvkhWrwPWHjmVAhbC3vSHCtyZvlZfJJ3ho2bnzl450hXri6/8e6pbkWdH+SkmLXNml0sV8e5HDAfxKw==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
 
-  '@jsonjoy.com/fs-snapshot@4.57.2':
-    resolution: {integrity: sha512-GdduDZuoP5V/QCgJkx9+BZ6SC0EZ/smXAdTS7PfMqgMTGXLlt/bH/FqMYaqB9JmLf05sJPtO0XRbAwwkEEPbVw==}
+  '@jsonjoy.com/fs-snapshot@4.64.0':
+    resolution: {integrity: sha512-oM7UDeL83q6NBzzsfKAsYKXKVXlykKFqqOLh4xZZKAzzROTlInkPbc6LTDGThEOnPiFiUzA7tYziHG9xavd76Q==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
@@ -3089,8 +3413,8 @@ packages:
     peerDependencies:
       tslib: '2'
 
-  '@jsonjoy.com/json-pack@17.65.0':
-    resolution: {integrity: sha512-e0SG/6qUCnVhHa0rjDJHgnXnbsacooHVqQHxspjvlYQSkHm+66wkHw6Gql+3u/WxI/b1VsOdUi0M+fOtkgKGdQ==}
+  '@jsonjoy.com/json-pack@17.67.0':
+    resolution: {integrity: sha512-t0ejURcGaZsn1ClbJ/3kFqSOjlryd92eQY465IYrezsXmPcfHPE/av4twRSxf6WE+TkZgLY+71vCZbiIiFKA/w==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
@@ -3101,8 +3425,8 @@ packages:
     peerDependencies:
       tslib: '2'
 
-  '@jsonjoy.com/json-pointer@17.65.0':
-    resolution: {integrity: sha512-uhTe+XhlIZpWOxgPcnO+iSCDgKKBpwkDVTyYiXX9VayGV8HSFVJM67M6pUE71zdnXF1W0Da21AvnhlmdwYPpow==}
+  '@jsonjoy.com/json-pointer@17.67.0':
+    resolution: {integrity: sha512-+iqOFInH+QZGmSuaybBUNdh7yvNrXvqR+h3wjXm0N/3JK1EyyFAeGJvqnmQL61d1ARLlk/wJdFKSL+LHJ1eaUA==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
@@ -3113,8 +3437,8 @@ packages:
     peerDependencies:
       tslib: '2'
 
-  '@jsonjoy.com/util@17.65.0':
-    resolution: {integrity: sha512-cWiEHZccQORf96q2y6zU3wDeIVPeidmGqd9cNKJRYoVHTV0S1eHPy5JTbHpMnGfDvtvujQwQozOqgO9ABu6h0w==}
+  '@jsonjoy.com/util@17.67.0':
+    resolution: {integrity: sha512-6+8xBaz1rLSohlGh68D1pdw3AwDi9xydm8QNlAFkvnavCJYSze+pxoW2VKP8p308jtlMRLs5NTHfPlZLd4w7ew==}
     engines: {node: '>=10.0'}
     peerDependencies:
       tslib: '2'
@@ -3186,8 +3510,8 @@ packages:
   '@maplibre/vt-pbf@4.3.0':
     resolution: {integrity: sha512-jIvp8F5hQCcreqOOpEt42TJMUlsrEcpf/kI1T2v85YrQRV6PPXUcEXUg5karKtH6oh47XJZ4kHu56pUkOuqA7w==}
 
-  '@matrix-org/analytics-events@0.33.2':
-    resolution: {integrity: sha512-tkEpKa6m5FicrP2ftuVX+Ln/CQfQASFJ0HUoJE9ZbqJhtcmLADd9tn9UhWUP3dzZgafkTZnFIg5FUshLvuj8vQ==}
+  '@matrix-org/analytics-events@0.37.0':
+    resolution: {integrity: sha512-lHFX5dEPqKCXChLoNh919JaYjW6jUcyGEZNUSaazD1wNVUiL8SbDo9wd9sFlJOFpedZgLnhhlaBh1OSjKvvJ9w==}
 
   '@matrix-org/emojibase-bindings@1.5.0':
     resolution: {integrity: sha512-+W9/ow2Z3iQa7ZOF698PBhwNcgGkn36B5Sr8VDPx8N8CH7+Uw+7TrtbtKPZVdgf4m/THmgmfX40jS5YDBsLaYg==}
@@ -3213,14 +3537,14 @@ packages:
   '@mermaid-js/mermaid-mindmap@9.3.0':
     resolution: {integrity: sha512-IhtYSVBBRYviH1Ehu8gk69pMDF8DSRqXBRDMWrEfHoaMruHeaP2DXA3PBnuwsMaCdPQhlUUcy/7DBLAEIXvCAw==}
 
-  '@mermaid-js/parser@1.1.0':
-    resolution: {integrity: sha512-gxK9ZX2+Fex5zu8LhRQoMeMPEHbc73UKZ0FQ54YrQtUxE1VVhMwzeNtKRPAu5aXks4FasbMe4xB4bWrmq6Jlxw==}
+  '@mermaid-js/parser@1.2.0':
+    resolution: {integrity: sha512-oYPyv8A4As1yH5Bx+04iQEQxXuIQDe0GKCNSRgao6z8AM9jixXIfP0vsppRLvGf+nKIOb9/LdpWA4YuJiVvESA==}
 
-  '@microsoft/api-extractor-model@7.33.8':
-    resolution: {integrity: sha512-aIcoQggPyer3B6Ze3usz0YWC/oBwUHfRH5ETUsr+oT2BRA6SfTJl7IKPcPZkX4UR+PohowzW4uMxsvjrn8vm+w==}
+  '@microsoft/api-extractor-model@7.33.10':
+    resolution: {integrity: sha512-uPUK17xGxeQ3av6TN7awp+dTTSTvx8fZC0XFL1gyt7hFapYuxND3XLXH8vkmI7UjfW92oogzFAFqHSifmJROaw==}
 
-  '@microsoft/api-extractor@7.58.7':
-    resolution: {integrity: sha512-yK6OycD46gIzLRpj6ueVUWPk1ACSpkN1LBo05gY1qPTylbWyUCanXfH7+VgkI5LJrJoRSQR5F04XuCffCXLOBw==}
+  '@microsoft/api-extractor@7.58.12':
+    resolution: {integrity: sha512-VNpgC/1LaroLbn+UKmwDYspq+9r3EHyj4vJ3qUy/g8vB0rKt+1Wgs7WFj/JGpgxhG8SNyXs1XwYwe7nqkk8IDg==}
     hasBin: true
 
   '@microsoft/tsdoc-config@0.18.1':
@@ -3229,25 +3553,23 @@ packages:
   '@microsoft/tsdoc@0.16.0':
     resolution: {integrity: sha512-xgAyonlVVS+q7Vc7qLW0UrJU7rSFcETRWsqdXZtjzRU8dF+6CkozTK4V4y1LwOX7j8r/vHphjDeMeGI4tNGeGA==}
 
-  '@napi-rs/wasm-runtime@0.2.12':
-    resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
-
   '@napi-rs/wasm-runtime@0.2.4':
     resolution: {integrity: sha512-9zESzOO5aDByvhIAsOy9TbpZ0Ur2AJbUI7UT73kcUTS2mxAMHOBaa1st/jAymNoCtvrit99kkzT1FZuXVcgfIQ==}
 
-  '@napi-rs/wasm-runtime@1.1.4':
-    resolution: {integrity: sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==}
+  '@napi-rs/wasm-runtime@1.1.6':
+    resolution: {integrity: sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg==}
     peerDependencies:
       '@emnapi/core': ^1.7.1
       '@emnapi/runtime': ^1.7.1
 
-  '@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1':
-    resolution: {integrity: sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==}
-
   '@noble/hashes@1.4.0':
     resolution: {integrity: sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==}
     engines: {node: '>= 16'}
 
+  '@noble/hashes@2.2.0':
+    resolution: {integrity: sha512-IYqDGiTXab6FniAgnSdZwgWbomxpy9FtYvLKs7wCUs2a8RkITG+DFGO1DM9cr+E3/RgADRpFjrKVaJ1z6sjtEg==}
+    engines: {node: '>= 20.19.0'}
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -3260,85 +3582,89 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
-  '@npmcli/agent@3.0.0':
-    resolution: {integrity: sha512-S79NdEgDQd/NGCay6TCoVzXSj74skRZIKJcpJjC5lOq34SZzyI6MqtiiWoiVWoVrTcGjNeC4ipbh1VIHlpfF5Q==}
-    engines: {node: ^18.17.0 || >=20.5.0}
-
   '@npmcli/agent@4.0.0':
     resolution: {integrity: sha512-kAQTcEN9E8ERLVg5AsGwLNoFb+oEG6engbqAU2P43gD4JEIkNGMHdVQ096FsOAAYpZPB0RSt0zgInKIAS1l5QA==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
-  '@npmcli/fs@4.0.0':
-    resolution: {integrity: sha512-/xGlezI6xfGO9NwuJlnwz/K14qD1kCSAGtacBHnGzeAIuJGazcp45KP5NuyARXoKb7cwulAGWVsbeSxdG/cb0Q==}
-    engines: {node: ^18.17.0 || >=20.5.0}
+  '@npmcli/agent@5.0.1':
+    resolution: {integrity: sha512-PsOUeQRpNOGH+Iks/YPY8AXtttvGVqNqKIo/Cp2LhI0jpeqW32JP14yYRym+OsTg+roH4Avw281YwHMp8X8L2Q==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
 
   '@npmcli/fs@5.0.0':
     resolution: {integrity: sha512-7OsC1gNORBEawOa5+j2pXN9vsicaIOH5cPXxoR6fJOmH6/EXpJB2CajXOu1fPRFun2m1lktEFX11+P89hqO/og==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
-  '@npmcli/git@7.0.2':
-    resolution: {integrity: sha512-oeolHDjExNAJAnlYP2qzNjMX/Xi9bmu78C9dIGr4xjobrSKbuMYCph8lTzn4vnW3NjIqVmw/f8BCfouqyJXlRg==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  '@npmcli/fs@6.0.0':
+    resolution: {integrity: sha512-AheOs4swKka/XLtht6xxJDPezlQ7K2IYQ9Y8lST4JLDjnralnWuMM9AE2CdVcgQJ5omrXhsRzM7F7aYmeZBvKQ==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
 
-  '@npmcli/installed-package-contents@4.0.0':
-    resolution: {integrity: sha512-yNyAdkBxB72gtZ4GrwXCM0ZUedo9nIbOMKfGjt6Cu6DXf0p8y1PViZAKDC8q8kv/fufx0WTjRBdSlyrvnP7hmA==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  '@npmcli/git@8.0.0':
+    resolution: {integrity: sha512-5P1oo+TbxZNAiiMBtpzHA8QyEGh5D69LYLexNWJEDXLdxnAZvT/SLitGJBXxjtCE4ftAcFOS/Tu2185MeIjooQ==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
+
+  '@npmcli/installed-package-contents@5.0.0':
+    resolution: {integrity: sha512-6Ay12sf2Lh7U1ifvnS1mq7TZFeh/rXHMXye+kV7jQrANIubaoVcleeh4HdFumxhsRYwm9OaHycB5lYmSwGrcIQ==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
     hasBin: true
 
-  '@npmcli/node-gyp@5.0.0':
-    resolution: {integrity: sha512-uuG5HZFXLfyFKqg8QypsmgLQW7smiRjVc45bqD/ofZZcR/uxEjgQU8qDPv0s9TEeMUiAAU/GC5bR6++UdTirIQ==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  '@npmcli/node-gyp@6.0.0':
+    resolution: {integrity: sha512-MFakpea4pcZNlHSTbMi15HK8RY8zl2UpgDtxhZCWOer+KRN3x7HFIMk/fKpOMgR55L4LIcA2qn8IHeyABhIFtw==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
 
-  '@npmcli/package-json@7.0.5':
-    resolution: {integrity: sha512-iVuTlG3ORq2iaVa1IWUxAO/jIp77tUKBhoMjuzYW2kL4MLN1bi/ofqkZ7D7OOwh8coAx1/S2ge0rMdGv8sLSOQ==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  '@npmcli/package-json@8.0.0':
+    resolution: {integrity: sha512-agNZzYQ18MR0wKp3Emg1q5QbcC8CXigYp3Z3CvB0Sax9Ge9aF4cVyyuSG+5SbACSrZUKTvMjVULWiE1RJA38wg==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
 
-  '@npmcli/promise-spawn@9.0.1':
-    resolution: {integrity: sha512-OLUaoqBuyxeTqUvjA3FZFiXUfYC1alp3Sa99gW3EUDz3tZ3CbXDdcZ7qWKBzicrJleIgucoWamWH1saAmH/l2Q==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  '@npmcli/promise-spawn@10.0.0':
+    resolution: {integrity: sha512-llZkSzeTsimFx64U+ThT2xQM2uEce8GIQUYvxgbB6ZFvBhV2LP9LeJJb3HT+syG0uCFLsTCHjV9SfC0WNU1vtA==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
 
   '@npmcli/redact@4.0.0':
     resolution: {integrity: sha512-gOBg5YHMfZy+TfHArfVogwgfBeQnKbbGo3pSUyK/gSI0AVu+pEiDVcKlQb0D8Mg1LNRZILZ6XG8I5dJ4KuAd9Q==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
-  '@npmcli/run-script@10.0.4':
-    resolution: {integrity: sha512-mGUWr1uMnf0le2TwfOZY4SFxZGXGfm4Jtay/nwAa2FLNAKXUoUwaGwBMNH36UHPtinWfTSJ3nqFQr0091CxVGg==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  '@npmcli/redact@5.0.0':
+    resolution: {integrity: sha512-3zcN5Q3yEmeyxXBzqB6fXPQFzYa2ROsGFSr69W0ArXIAGJqxl/aFECOVPD2kbkYPm0U/EHxFKgclK3UA9WQg5A==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
 
-  '@nx-tools/ci-context@7.2.3':
-    resolution: {integrity: sha512-/gXQgnMoRH06T3/g4V7wHc2ziMj55pxh+YbBWfD9cf41nbYrzjYmev0wmHDAKQ1aedU0uQzH4kZFirUi6W6WFQ==}
+  '@npmcli/run-script@11.0.0':
+    resolution: {integrity: sha512-leBRl6F5F0TvWut8m1/aZcMTUHi2vXjKeMJ/Ik1lW7Q7Yy16Dhtkklu+cEqQww1p1NeLnUNzV3+uwpzqRcy9vw==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
+
+  '@nx-tools/ci-context@7.3.0':
+    resolution: {integrity: sha512-RkLjAqrtIw2qmhBWYy+8iojLNNsX56r1lx1PY+RjKFI/nqrT8NP9zhy8gC3kxZKTb+fDjwKQZVcKukj0Rd+0iw==}
     engines: {node: '>=20.19.0 <21 || >=22.12.0 <23 || >=24.0.0'}
     peerDependencies:
       tslib: ^2.6.0
 
-  '@nx-tools/container-metadata@7.2.3':
-    resolution: {integrity: sha512-EM4FVAUnUPErn1WHUA2ghU1AXfP+HYMqeug8s1hOntDAMuc4Dkcy1BXNEVRttc2ENeTWsqofQ75Vf36ch/K8HA==}
+  '@nx-tools/container-metadata@7.3.0':
+    resolution: {integrity: sha512-6EE5OCXmAZBkOw8zP5/xn/mcajJTUePC9pPRrqcROq+U8TTY/T9fgo7hUmHHIgJNRRDvOOKskaJg/VjkjyMaKQ==}
     engines: {node: '>=20.19.0 <21 || >=22.12.0 <23 || >=24.0.0'}
     peerDependencies:
-      '@nx/devkit': '>=18.0.0 <23.0.0'
+      '@nx/devkit': '>=18.0.0 <24.0.0'
       tslib: ^2.6.0
 
-  '@nx-tools/core@7.2.3':
-    resolution: {integrity: sha512-6Qai8op2xRDyzyPYNIO6jSIwbTqlZAOdf8IgsNHSrADjZr32s8FLtsCiDoD6MsXfNADHdMPr2Yv2OcCHzl6c+A==}
+  '@nx-tools/core@7.3.0':
+    resolution: {integrity: sha512-s5amDLPNqRSsZrqQ/E3p3XyQIYZhV3yRrQpelM0qKOxdMi9oEi4MfetqXCHm4qhu7DrE5hLO2ky8Cq1l3a/5TA==}
     engines: {node: '>=20.19.0 <21 || >=22.12.0 <23 || >=24.0.0'}
     peerDependencies:
-      '@nx/devkit': '>=18.0.0 <23.0.0'
+      '@nx/devkit': '>=18.0.0 <24.0.0'
       tslib: ^2.6.0
 
-  '@nx-tools/nx-container@7.2.3':
-    resolution: {integrity: sha512-imyGKV4juDtcZQuxoDpwJA7zvxBO8SptzsuanFghGRKnhQPL4kNQ+g2kAX8al0xG4Q4GrMbbk99sMLv5SGQbkg==}
+  '@nx-tools/nx-container@7.3.0':
+    resolution: {integrity: sha512-D2aWI5PIG7Kl9ZtXHL0RY7WYFNP9n6TrgITl/ujrQkaif7eWhCE76HVMIRZDqm7h2iHceElW4ylMPQG1Wbu7bQ==}
     engines: {node: '>=20.19.0 <21 || >=22.12.0 <23 || >=24.0.0'}
     peerDependencies:
-      '@nx/devkit': '>=18.0.0 <23.0.0'
-      '@nx/js': '>=18.0.0 <23.0.0'
+      '@nx/devkit': '>=18.0.0 <24.0.0'
+      '@nx/js': '>=18.0.0 <24.0.0'
       dotenv: '>=16.0.0'
-      nx: '>=18.0.0 <23.0.0'
+      nx: 23.1.1
       tslib: ^2.6.0
 
   '@nx/devkit@22.6.5':
     resolution: {integrity: sha512-9kvAI+kk2pfEXLqS8OyjI9XvWmp+Gdn7jPfxDAz8BOqxMyPy3p5hYl+jc4TIsLOWunAFl8azqrcYsHzEpaWCIA==}
     peerDependencies:
-      nx: '>= 21 <= 23 || ^22.0.0-0'
+      nx: 23.1.1
 
   '@nx/js@22.6.5':
     resolution: {integrity: sha512-bmikz6qaBHfuAgsqPB/TfLIKfvI4g+EKIRAiU2FHnEtVWOKDAmSQXHFwE3rMS49jl2JLgxkdNjZHpg4g/OLy0g==}
@@ -3348,111 +3674,57 @@ packages:
       verdaccio:
         optional: true
 
-  '@nx/nx-darwin-arm64@22.6.5':
-    resolution: {integrity: sha512-qT77Omkg5xQuL2+pDbneX2tI+XW5ZeayMylu7UUgK8OhTrAkJLKjpuYRH4xT5XBipxbDtlxmO3aLS3Ib1pKzJQ==}
+  '@nx/nx-darwin-arm64@23.1.1':
+    resolution: {integrity: sha512-Rq/RXLX5uIvJQfb6kuUgEirquT5ARaAgQyNaMZVnOPAL5wuxaDvQag8WX/WUCIgbUKZuGkclJwM7Vlnvtn3bdg==}
     cpu: [arm64]
     os: [darwin]
 
-  '@nx/nx-darwin-arm64@22.7.1':
-    resolution: {integrity: sha512-m00ZmBn39VUgb0Ahhu5iY6D56ETdXjDbVnOz0XF3DacJrcLtq9sZ+cg1bj6PshqtvRWVg+zJRrZBU6vL7hGuFQ==}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@nx/nx-darwin-x64@22.6.5':
-    resolution: {integrity: sha512-9jICxb7vfJ56y/7Yuh3b/n1QJqWxO9xnXKYEs6SO8xPoW/KomVckILGc1C6RQSs6/3ixVJC7k1Dh1wm5tKPFrg==}
+  '@nx/nx-darwin-x64@23.1.1':
+    resolution: {integrity: sha512-doWaPLPd6yUas3FhQJqMAScupCsToeTedK4RRWm700VhHoVdBTN4ejIBRBfoiT/SPAwY6EOHb8uFDJhGo7geMg==}
     cpu: [x64]
     os: [darwin]
 
-  '@nx/nx-darwin-x64@22.7.1':
-    resolution: {integrity: sha512-DmD8Qow+Yt7Yrmjlz1AsfiwxW+0kRzg+6MY70+d7qChtD2bTzvA/k0ut8SMy+CxU3kxgUbKhGOtml5JDXoX2ww==}
-    cpu: [x64]
-    os: [darwin]
-
-  '@nx/nx-freebsd-x64@22.6.5':
-    resolution: {integrity: sha512-6B1wEKpqz5dI3AGMqttAVnA6M3DB/besAtuGyQiymK9ROlta1iuWgCcIYwcCQyhLn2Rx7vqj447KKcgCa8HlVw==}
+  '@nx/nx-freebsd-x64@23.1.1':
+    resolution: {integrity: sha512-9rDZKBPGuX8mid11RimJ2ENqDYZpPZhrqTlI9q/VnqcPLq0Bw/8AhqCKhBVlfNqJjbi4OsRQYDK7UkqIlcfThg==}
     cpu: [x64]
     os: [freebsd]
 
-  '@nx/nx-freebsd-x64@22.7.1':
-    resolution: {integrity: sha512-HboVrUCHcuYTXtuX3dMyRszP7JO90ZVBLWgnmaM7jUM7jnllZjmezUMtpNHfN1GQbVFafJf/NBShDWsu9LuaUA==}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@nx/nx-linux-arm-gnueabihf@22.6.5':
-    resolution: {integrity: sha512-xV50B8mnDPboct7JkAHftajI02s+8FszA8WTzhore+YGR+lEKHTLpucwGEaQuMlSdLplH7pQix4B4uK5pcMhZw==}
+  '@nx/nx-linux-arm-gnueabihf@23.1.1':
+    resolution: {integrity: sha512-NDR5X2HiD6WU3JEaDJmOLteIGIFqjrjkzoFWrQke2Y1oCRYu+UyFdPeaMVUyAs5OyUx4U+SD+eBQPTCNbWmazA==}
     cpu: [arm]
     os: [linux]
 
-  '@nx/nx-linux-arm-gnueabihf@22.7.1':
-    resolution: {integrity: sha512-5Gm8Y7L8WXMLUjHhiy1eqGz5/PiRw1YLanFg5audBNkZvH6Jkwzdpoz0dbeKjwMDHz4NmniUV1s76Th8VLWmiQ==}
-    cpu: [arm]
-    os: [linux]
-
-  '@nx/nx-linux-arm64-gnu@22.6.5':
-    resolution: {integrity: sha512-2JkWuMGj+HpW6oPAvU5VdAx1afTnEbiM10Y3YOrl3fipWV4BiP5VDx762QTrfCraP4hl6yqTgvTe7F9xaby+jQ==}
+  '@nx/nx-linux-arm64-gnu@23.1.1':
+    resolution: {integrity: sha512-tWDHJII8+aHweTzHelf5dGM6qGNmHbAPhCc3jrtrM0uE+UD/wt2Dpq7H3086Iyia9M9jGM9sYpuD/6W6WAFAMA==}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@nx/nx-linux-arm64-gnu@22.7.1':
-    resolution: {integrity: sha512-GdgPYMfbijBRFJs1absL/9QdSNLsTAGdyKykDf9CaVxEMZ92VB+pncpX9Vn/ZBCSeeWTLF+bSK3UM5v+loIObQ==}
-    cpu: [arm64]
-    os: [linux]
-    libc: [glibc]
-
-  '@nx/nx-linux-arm64-musl@22.6.5':
-    resolution: {integrity: sha512-Z/zMqFClnEyqDXouJKEPoWVhMQIif5F0YuECWBYjd3ZLwQsXGTItoh+6Wm3XF/nGMA2uLOHyTq/X7iFXQY3RzA==}
+  '@nx/nx-linux-arm64-musl@23.1.1':
+    resolution: {integrity: sha512-t7iVMZ7Cj3LmPcfaYt9KOkojpuC5XRmtZ/0G+NBMA2GuRhCVbzpOgUCob0nQMV2TrTwn5oAWJeDc4xLni+oteg==}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@nx/nx-linux-arm64-musl@22.7.1':
-    resolution: {integrity: sha512-HyBgPtY1hyNTk8683nt7F29jh3lVdS/zul9vS0NgKeCSoYL3GRM3nLoTPynoHUxyVP/tWYOE3ymvnk92qYwL4Q==}
-    cpu: [arm64]
-    os: [linux]
-    libc: [musl]
-
-  '@nx/nx-linux-x64-gnu@22.6.5':
-    resolution: {integrity: sha512-FlotSyqNnaXSn0K+yWw+hRdYBwusABrPgKLyixfJIYRzsy+xPKN6pON6vZfqGwzuWF/9mEGReRz+iM8PiW0XSg==}
+  '@nx/nx-linux-x64-gnu@23.1.1':
+    resolution: {integrity: sha512-stuCayctOt/4AFvxKYgGTPluUc0HW7DcyTz9yeTMl/zj0+FENEr8RCTjInD0Q5qVGzYphma6SssVSh432w5agw==}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@nx/nx-linux-x64-gnu@22.7.1':
-    resolution: {integrity: sha512-bQBgRiEsanNvKcDOjVAUPjvcp0iDLofYYUL2af2iuCDxreLOej+J6MeA5bWTLNly5ly1d4voKGTqa+OsouVyLg==}
-    cpu: [x64]
-    os: [linux]
-    libc: [glibc]
-
-  '@nx/nx-linux-x64-musl@22.6.5':
-    resolution: {integrity: sha512-RVOe2qcwhoIx6mxQURPjUfAW5SEOmT2gdhewvdcvX9ICq1hj5B2VarmkhTg0qroO7xiyqOqwq26mCzoV2I3NgQ==}
+  '@nx/nx-linux-x64-musl@23.1.1':
+    resolution: {integrity: sha512-cZSUqGV+iHda39W91BNKSysSu6OFfR6M4ViQBcMtbwq3ce19gDr2f23MqGZEQZtaD/eSQ9UNEhx09nhrdYxWDg==}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@nx/nx-linux-x64-musl@22.7.1':
-    resolution: {integrity: sha512-gcco2GjcAztF/fRcAgFxtWxrWDnQdNmPaAN9FTt1+qQ9RUSLvdL8bQxKx4Kd9N9T+gXPlrWhMkBkKbbV09+X1Q==}
-    cpu: [x64]
-    os: [linux]
-    libc: [musl]
-
-  '@nx/nx-win32-arm64-msvc@22.6.5':
-    resolution: {integrity: sha512-ZqurqI8VuYnsr2Kn4K4t+Gx6j/BZdf6qz/6Tv4A7XQQ6oNYVQgTqoNEFj+CCkVaIe6aIdCWpousFLqs+ZgBqYQ==}
+  '@nx/nx-win32-arm64-msvc@23.1.1':
+    resolution: {integrity: sha512-iDlYbFHgTYV5lg1ypEt+LAj86o/uyy6vR0ha5pcUs4FqXzQgy14lOeyRod/EZs9Er3DIyJlEi/rpEvaP99/Hag==}
     cpu: [arm64]
     os: [win32]
 
-  '@nx/nx-win32-arm64-msvc@22.7.1':
-    resolution: {integrity: sha512-IT9oEn0YQ83iPH7666aoPyTRsUzBIBJdBLMXeLX4I60fHPXWhUSGpfiLtIsgU2OfeOVb9hU9idwNh1wc4u9rWQ==}
-    cpu: [arm64]
-    os: [win32]
-
-  '@nx/nx-win32-x64-msvc@22.6.5':
-    resolution: {integrity: sha512-i2QFBJIuaYg9BHxrrnBV4O7W9rVL2k0pSIdk/rRp3EYJEU93iUng+qbZiY9wh1xvmXuUCE2G7TRd+8/SG/RFKg==}
-    cpu: [x64]
-    os: [win32]
-
-  '@nx/nx-win32-x64-msvc@22.7.1':
-    resolution: {integrity: sha512-P2zeSKXVH2Eiwsb8UfP2rMMS7//cHWpiO4M9zt6q0c4lI/hN1vXBciRKVWruGk9ZrWLHuhaMAhG94+MJtzKuRQ==}
+  '@nx/nx-win32-x64-msvc@23.1.1':
+    resolution: {integrity: sha512-UD21AHWJ2PEA+PuANPCt+lj3kYpAzYNq+bm4VCbrt3KZd7zDPas0ns85UIhfrhsNiSmYzjWz2/JDk2S3cA6lGw==}
     cpu: [x64]
     os: [win32]
 
@@ -3497,380 +3769,305 @@ packages:
     resolution: {integrity: sha512-KMQIfq5sOPpkQYajXHwnhjCC0slzCNScLHs9JafXc4RAJI+9f+jNDlBNaIMTvazOPLgb4BnlhGJOTbnN0wIjPw==}
     engines: {node: '>= 20'}
 
-  '@octokit/request@10.0.8':
-    resolution: {integrity: sha512-SJZNwY9pur9Agf7l87ywFi14W+Hd9Jg6Ifivsd33+/bGUQIjNujdFiXII2/qSlN2ybqUHfp5xpekMEjIBTjlSw==}
+  '@octokit/request@10.0.10':
+    resolution: {integrity: sha512-KxNC2pTqqhszMNrf12ZRd4PonRgyJdsM4F/jySiddQK+DsRcfBtUvqn8t7UsyZhnRJHvX46OohDt5N3VqIWC2w==}
     engines: {node: '>= 20'}
 
   '@octokit/types@16.0.0':
     resolution: {integrity: sha512-sKq+9r1Mm4efXW1FCk7hFSeJo4QKreL/tTbR0rz/qx/r1Oa2VV83LTA/H/MuCOX7uCIJmQVRKBcbmWoySjAnSg==}
 
-  '@opentelemetry/api-logs@0.207.0':
-    resolution: {integrity: sha512-lAb0jQRVyleQQGiuuvCOTDVspc14nx6XJjP4FspJ1sNARo3Regq4ZZbrc3rN4b1TYSuUCvgH+UXUPug4SLOqEQ==}
-    engines: {node: '>=8.0.0'}
-
-  '@opentelemetry/api-logs@0.208.0':
-    resolution: {integrity: sha512-CjruKY9V6NMssL/T1kAFgzosF1v9o6oeN+aX5JB/C/xPNtmgIJqcXHG7fA82Ou1zCpWGl4lROQUKwUNE1pMCyg==}
-    engines: {node: '>=8.0.0'}
-
-  '@opentelemetry/api-logs@0.212.0':
-    resolution: {integrity: sha512-TEEVrLbNROUkYY51sBJGk7lO/OLjuepch8+hmpM6ffMJQ2z/KVCjdHuCFX6fJj8OkJP2zckPjrJzQtXU3IAsFg==}
-    engines: {node: '>=8.0.0'}
-
-  '@opentelemetry/api-logs@0.214.0':
-    resolution: {integrity: sha512-40lSJeqYO8Uz2Yj7u94/SJWE/wONa7rmMKjI1ZcIjgf3MHNHv1OZUCrCETGuaRF62d5pQD1wKIW+L4lmSMTzZA==}
+  '@opentelemetry/api-logs@0.220.0':
+    resolution: {integrity: sha512-CmVa4ImJ+ynfrPMNaAXHET6Bhb44SwzmfyVJFq9ni2jgXJR/l7C6gfVFddNmHP+ZOkP9cf4f9DBe68qVLTHc9w==}
     engines: {node: '>=8.0.0'}
 
   '@opentelemetry/api@1.9.1':
     resolution: {integrity: sha512-gLyJlPHPZYdAk1JENA9LeHejZe1Ti77/pTeFm/nMXmQH/HFZlcS/O2XJB+L8fkbrNSqhdtlvjBVjxwUYanNH5Q==}
     engines: {node: '>=8.0.0'}
 
-  '@opentelemetry/core@2.2.0':
-    resolution: {integrity: sha512-FuabnnUm8LflnieVxs6eP7Z383hgQU4W1e3KJS6aOG3RxWxcHyBxH8fDMHNgu/gFx/M2jvTOW/4/PHhLz6bjWw==}
+  '@opentelemetry/core@2.10.0':
+    resolution: {integrity: sha512-/wNZ8twnEQQA4HoHu22+vcsdru6pWPWxW+7w+FlxT6Id7PE/WIbZmVKkte+PF72e0F2dnImFeHD2syyE1Mw6MQ==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': '>=1.0.0 <1.10.0'
 
-  '@opentelemetry/core@2.6.1':
-    resolution: {integrity: sha512-8xHSGWpJP9wBxgBpnqGL0R3PbdWQndL1Qp50qrg71+B28zK5OQmUgcDKLJgzyAAV38t4tOyLMGDD60LneR5W8g==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.10.0'
-
-  '@opentelemetry/core@2.7.1':
-    resolution: {integrity: sha512-QAqIj32AtK6+pEVNG7EOVxHdE06RP+FM5qpiEJ4RtDcFIqKUZHYhl7/7UY5efhwmwNAg7j8QbJVBLxMerc0+gw==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': '>=1.0.0 <1.10.0'
-
-  '@opentelemetry/exporter-logs-otlp-http@0.208.0':
-    resolution: {integrity: sha512-jOv40Bs9jy9bZVLo/i8FwUiuCvbjWDI+ZW13wimJm4LjnlwJxGgB+N/VWOZUTpM+ah/awXeQqKdNlpLf2EjvYg==}
+  '@opentelemetry/instrumentation@0.220.0':
+    resolution: {integrity: sha512-xQx3E2WxP1mDvKzxLxX+CTCtNLa560YJZ3087qYHerl2YmiKpv7AH+dAy7vmx+eVrZ5BwhfWUAVoKOoxCNHcpw==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': ^1.3.0
 
-  '@opentelemetry/instrumentation-amqplib@0.61.0':
-    resolution: {integrity: sha512-mCKoyTGfRNisge4br0NpOFSy2Z1NnEW8hbCJdUDdJFHrPqVzc4IIBPA/vX0U+LUcQqrQvJX+HMIU0dbDRe0i0Q==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-connect@0.57.0':
-    resolution: {integrity: sha512-FMEBChnI4FLN5TE9DHwfH7QpNir1JzXno1uz/TAucVdLCyrG0jTrKIcNHt/i30A0M2AunNBCkcd8Ei26dIPKdg==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-dataloader@0.31.0':
-    resolution: {integrity: sha512-f654tZFQXS5YeLDNb9KySrwtg7SnqZN119FauD7acBoTzuLduaiGTNz88ixcVSOOMGZ+EjJu/RFtx5klObC95g==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-fs@0.33.0':
-    resolution: {integrity: sha512-sCZWXGalQ01wr3tAhSR9ucqFJ0phidpAle6/17HVjD6gN8FLmZMK/8sKxdXYHy3PbnlV1P4zeiSVFNKpbFMNLA==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-generic-pool@0.57.0':
-    resolution: {integrity: sha512-orhmlaK+ZIW9hKU+nHTbXrCSXZcH83AescTqmpamHRobRmYSQwRbD0a1odc0yAzuzOtxYiHiXAnpnIpaSSY7Ow==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-graphql@0.62.0':
-    resolution: {integrity: sha512-3YNuLVPUxafXkH1jBAbGsKNsP3XVzcFDhCDCE3OqBwCwShlqQbLMRMFh1T/d5jaVZiGVmSsfof+ICKD2iOV8xg==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-hapi@0.60.0':
-    resolution: {integrity: sha512-aNljZKYrEa7obLAxd1bCEDxF7kzCLGXTuTJZ8lMR9rIVEjmuKBXN1gfqpm/OB//Zc2zP4iIve1jBp7sr3mQV6w==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-http@0.214.0':
-    resolution: {integrity: sha512-FlkDhZDRjDJDcO2LcSCtjRpkal1NJ8y0fBqBhTvfAR3JSYY2jAIj1kSS5IjmEBt4c3aWv+u/lqLuoCDrrKCSKg==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-ioredis@0.62.0':
-    resolution: {integrity: sha512-ZYt//zcPve8qklaZX+5Z4MkU7UpEkFRrxsf2cnaKYBitqDnsCN69CPAuuMOX6NYdW2rG9sFy7V/QWtBlP5XiNQ==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-kafkajs@0.23.0':
-    resolution: {integrity: sha512-4K+nVo+zI+aDz0Z85SObwbdixIbzS9moIuKJaYsdlzcHYnKOPtB7ya8r8Ezivy/GVIBHiKJVq4tv+BEkgOMLaQ==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-knex@0.58.0':
-    resolution: {integrity: sha512-Hc/o8fSsaWxZ8r1Yw4rNDLwTpUopTf4X32y4W6UhlHmW8Wizz8wfhgOKIelSeqFVTKBBPIDUOsQWuIMxBmu8Bw==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-koa@0.62.0':
-    resolution: {integrity: sha512-uVip0VuGUQXZ+vFxkKxAUNq8qNl+VFlyHDh/U6IQ8COOEDfbEchdaHnpFrMYF3psZRUuoSIgb7xOeXj00RdwDA==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.9.0
-
-  '@opentelemetry/instrumentation-lru-memoizer@0.58.0':
-    resolution: {integrity: sha512-6grM3TdMyHzlGY1cUA+mwoPueB1F3dYKgKtZIH6jOFXqfHAByyLTc+6PFjGM9tKh52CFBJaDwodNlL/Td39z7Q==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-mongodb@0.67.0':
-    resolution: {integrity: sha512-1WJp5N1lYfHq2IhECOTewFs5Tf2NfUOwQRqs/rZdXKTezArMlucxgzAaqcgp3A3YREXopXTpXHsxZTGHjNhMdQ==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-mongoose@0.60.0':
-    resolution: {integrity: sha512-8BahAZpKsOoc+lrZGb7Ofn4g3z8qtp5IxDfvAVpKXsEheQN7ONMH5djT5ihy6yf8yyeQJGS0gXFfpEAEeEHqQg==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-mysql2@0.60.0':
-    resolution: {integrity: sha512-m/5d3bxQALllCzezYDk/6vajh0tj5OijMMvOZGr+qN1NMXm1dzMNwyJ0gNZW7Fo3YFRyj/jJMxIw+W7d525dlw==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-mysql@0.60.0':
-    resolution: {integrity: sha512-08pO8GFPEIz2zquKDGteBZDNmwketdgH8hTe9rVYgW9kCJXq1Psj3wPQGx+VaX4ZJKCfPeoLMYup9+cxHvZyVQ==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-pg@0.66.0':
-    resolution: {integrity: sha512-KxfLGXBb7k2ueaPJfq2GXBDXBly8P+SpR/4Mj410hhNgmQF3sCqwXvUBQxZQkDAmsdBAoenM+yV1LhtsMRamcA==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-redis@0.62.0':
-    resolution: {integrity: sha512-y3pPpot7WzR/8JtHcYlTYsyY8g+pbFhAqbwAuG5bLPnR6v6pt1rQc0DpH0OlGP/9CZbWBP+Zhwp9yFoygf/ZXQ==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-tedious@0.33.0':
-    resolution: {integrity: sha512-Q6WQwAD01MMTub31GlejoiFACYNw26J426wyjvU7by7fDIr2nZXNW4vhTGs7i7F0TnXBO3xN688g1tdUgYwJ5w==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation@0.207.0':
-    resolution: {integrity: sha512-y6eeli9+TLKnznrR8AZlQMSJT7wILpXH+6EYq5Vf/4Ao+huI7EedxQHwRgVUOMLFbe7VFDvHJrX9/f4lcwnJsA==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation@0.212.0':
-    resolution: {integrity: sha512-IyXmpNnifNouMOe0I/gX7ENfv2ZCNdYTF0FpCsoBcpbIHzk81Ww9rQTYTnvghszCg7qGrIhNvWC8dhEifgX9Jg==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation@0.214.0':
-    resolution: {integrity: sha512-MHqEX5Dk59cqVah5LiARMACku7jXSVk9iVDWOea4x3cr7VfdByeDCURK6o1lntT1JS/Tsovw01UJrBhN3/uC5w==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/otlp-exporter-base@0.208.0':
-    resolution: {integrity: sha512-gMd39gIfVb2OgxldxUtOwGJYSH8P1kVFFlJLuut32L6KgUC4gl1dMhn+YC2mGn0bDOiQYSk/uHOdSjuKp58vvA==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/otlp-transformer@0.208.0':
-    resolution: {integrity: sha512-DCFPY8C6lAQHUNkzcNT9R+qYExvsk6C5Bto2pbNxgicpcSWbe2WHShLxkOxIdNcBiYPdVHv/e7vH7K6TI+C+fQ==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/redis-common@0.38.3':
-    resolution: {integrity: sha512-VCghU1JYs/4gP6Gqf/xro9MEsZ7LrMv2uONVsaESKL38ZOB9BqnI98FfS23wjMnHlpuE+TTaWSoAVNpTwYXzjw==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-
-  '@opentelemetry/resources@2.2.0':
-    resolution: {integrity: sha512-1pNQf/JazQTMA0BiO5NINUzH0cbLbbl7mntLa4aJNmCCXSj0q03T5ZXXL0zw4G55TjdL9Tz32cznGClf+8zr5A==}
+  '@opentelemetry/resources@2.10.0':
+    resolution: {integrity: sha512-q6MMm2zhggzsHVNbabYwut+a6nbuQQe3URUoxaojM/8K1IBfwwPzvxIjNi2/lI1TFe+fMHMW9MWhrtDLEXEnkA==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': '>=1.3.0 <1.10.0'
 
-  '@opentelemetry/resources@2.7.1':
-    resolution: {integrity: sha512-DeT6KKolmC4e/dRQvMQ/RwlnzhaqeiFOXY5ngoOPJ07GgVVKxZOg9EcrNZb5aTzUn+iCrJldAgOfQm1O/QfPAQ==}
+  '@opentelemetry/sdk-trace-base@2.10.0':
+    resolution: {integrity: sha512-GuYQQT7QD2EeO8lcZLRQzcbOyhqAzL+6WWTKTU9mSUBYBazkEDl+VrQcXQhbB08OWM9anD1aHleVadzulpOaUQ==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': '>=1.3.0 <1.10.0'
 
-  '@opentelemetry/sdk-logs@0.208.0':
-    resolution: {integrity: sha512-QlAyL1jRpOeaqx7/leG1vJMp84g0xKP6gJmfELBpnI4O/9xPX+Hu5m1POk9Kl+veNkyth5t19hRlN6tNY1sjbA==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': '>=1.4.0 <1.10.0'
-
-  '@opentelemetry/sdk-metrics@2.2.0':
-    resolution: {integrity: sha512-G5KYP6+VJMZzpGipQw7Giif48h6SGQ2PFKEYCybeXJsOCB4fp8azqMAAzE5lnnHK3ZVwYQrgmFbsUJO/zOnwGw==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': '>=1.9.0 <1.10.0'
-
-  '@opentelemetry/sdk-trace-base@2.2.0':
-    resolution: {integrity: sha512-xWQgL0Bmctsalg6PaXExmzdedSp3gyKV8mQBwK/j9VGdCDu2fmXIb2gAehBKbkXCpJ4HPkgv3QfoJWRT4dHWbw==}
+  '@opentelemetry/sdk-trace@2.10.0':
+    resolution: {integrity: sha512-MfQGq3GRmTh5fM/y+OjaO0vj6+luCB1XO2gfXCalKCfgKw0eHL++sm75DNweC6ohlp+aFvACqeE0fYayqdRaoQ==}
     engines: {node: ^18.19.0 || >=20.6.0}
     peerDependencies:
       '@opentelemetry/api': '>=1.3.0 <1.10.0'
 
-  '@opentelemetry/sdk-trace-base@2.7.1':
-    resolution: {integrity: sha512-NAYIlsF8MPUsKqJMiDQJTMPOmlbawC1Iz/omMLygZ1C9am8fTKYjTaI+OZM+WTY3t3Glo0wnOg/6/pac6RGPPw==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': '>=1.3.0 <1.10.0'
-
-  '@opentelemetry/semantic-conventions@1.40.0':
-    resolution: {integrity: sha512-cifvXDhcqMwwTlTK04GBNeIe7yyo28Mfby85QXFe1Yk8nmi36Ab/5UQwptOx84SsoGNRg+EVSjwzfSZMy6pmlw==}
+  '@opentelemetry/semantic-conventions@1.43.0':
+    resolution: {integrity: sha512-eSYWTm620tTk45EKSedaUL8MFYI8hW164hIXsgIHyxu3VobUB3fFCu5t0hQby6OoWRPsG1KkKUG2M5UadiLiVg==}
     engines: {node: '>=14'}
 
-  '@opentelemetry/sql-common@0.41.2':
-    resolution: {integrity: sha512-4mhWm3Z8z+i508zQJ7r6Xi7y4mmoJpdvH0fZPFRkWrdp5fq7hhZ2HhYokEOLkfqSMgPR4Z9EyB3DBkbKGOqZiQ==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.1.0
-
-  '@oxc-parser/binding-android-arm-eabi@0.128.0':
-    resolution: {integrity: sha512-aca6ZvzmCBUGOANQRiRQRZuRKYI3ENhcit6GisnknOOmcezfQc7xJ4dxlPU7MV7mOvrC7RNR1u3LAD7xyaiCxA==}
+  '@oxc-parser/binding-android-arm-eabi@0.127.0':
+    resolution: {integrity: sha512-0LC7ye4hvqbIKxAzThzvswgHLFu2AURKzYLeSVvLdu2TBOYWQDmHnTqPLeA597BcUCxiLqLsS4CJ5uoI5WYWCQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [android]
 
-  '@oxc-parser/binding-android-arm64@0.128.0':
-    resolution: {integrity: sha512-BbeDmuohoJ7Rz/it5wnkj69i/OsCPS3Z51nLEzwO/Y6YshtC4JU+15oNwhY8v4LRKRYclRc7ggOikwrsJ/eOEQ==}
+  '@oxc-parser/binding-android-arm-eabi@0.140.0':
+    resolution: {integrity: sha512-ZfjDZ422mo7eo3b3VltqNsV9kmv1qt/sPEAMSl64iOSwhVfd0eIZ9LB79Mbs1xYXJnk7WSROwzBCKDIiVxPTvQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxc-parser/binding-android-arm64@0.127.0':
+    resolution: {integrity: sha512-b5jtVTH6AU5CJXHNdj7Jj9IEiR9yVjjnwHzPJhGyHGPdcsZSzBCkS9GBbV33niRMvKthDwQRFRJfI4a+k4PvYg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@oxc-parser/binding-darwin-arm64@0.128.0':
-    resolution: {integrity: sha512-tRUHPt80417QmvNpoSslJT1VY8NUbWdrWR+L14Zn+RbOTcaqB8E6PYE/ZGN8jjWBzqporiA/H4MfO50ew/NCNA==}
+  '@oxc-parser/binding-android-arm64@0.140.0':
+    resolution: {integrity: sha512-Ia8jSvikUX6Sf+Ht+KOCUF/k1HpR0VlmqIYymubmWDebOEGtsyliHDR6JxsZ4IX3/c/GbrB1uh09aVGQv/LQmQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-parser/binding-darwin-arm64@0.127.0':
+    resolution: {integrity: sha512-obCE8B7ISKkJidjlhv9xRGJPOSDG2Yu6PRga9Ruaz35uintHxbp1Ki/Yc71wx4rj3Edrm0a1kzG1TAwit0wFpg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@oxc-parser/binding-darwin-x64@0.128.0':
-    resolution: {integrity: sha512-rWI2Hb1Nt3U/vKsjyNvZzDC8i/l144U20DKjhzaTmwIhIiSRGeroPWWiImwypmKLqrw8GuIixbWJkpGWLbkzrQ==}
+  '@oxc-parser/binding-darwin-arm64@0.140.0':
+    resolution: {integrity: sha512-G6VK0nK61pH0d0mBjUqSZbVxGqqO5uzeginLDQj+gOO6ObfJjXRwgkD/ol0w1INcnFeAb6YGGO7qc3ueGHaycQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-parser/binding-darwin-x64@0.127.0':
+    resolution: {integrity: sha512-JL6Xb5IwPQT8rUzlpsX7E+AgfcdNklXNPFp8pjCQQ5MQOQo5rtEB2ui+3Hgg9Sn7Y9Egj6YOLLiHhLpdAe12Aw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@oxc-parser/binding-freebsd-x64@0.128.0':
-    resolution: {integrity: sha512-hhpdVMaNCLgQxjgNPeeFzSeJMmZPc5lKfv0NGSI3egZq9EdnEGqeC8JsYsQjK7PoQgbvZ17xlj0SO5ziH5Obkg==}
+  '@oxc-parser/binding-darwin-x64@0.140.0':
+    resolution: {integrity: sha512-HazBOuZzd2pO1C2uMmp8Gv7mhzMHqKSKDS1OZfcLEvpIcgA+48J92HEtNanVHDIzRD9PRPCV6aS6fkZIWOVl8Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-parser/binding-freebsd-x64@0.127.0':
+    resolution: {integrity: sha512-SDQ/3MQFw58fqQz3Z1PhSKFF3JoCF4gmlNjziDm8X02tTahCw0qJbd7FGPDKw1i4VTBZene9JPyC3mHtSvi+wA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@oxc-parser/binding-linux-arm-gnueabihf@0.128.0':
-    resolution: {integrity: sha512-093zNw0zZ/e/obML+rhlSdmnzR0mVZluPcAkxunEc5E3F0yBVsFn24Y1ILfsEte11Ud041qn/gp2OJ1jxNqUng==}
+  '@oxc-parser/binding-freebsd-x64@0.140.0':
+    resolution: {integrity: sha512-9hSUU+HmTUyOe4JzMHxNGgLWNY7rrO+6ShicZwImNJacEAACDMIkuEQQkvXSL+WJN50jaNtLYJv8s4OcBdpyUQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.127.0':
+    resolution: {integrity: sha512-Av+D1MIqzV0YMGPT9we2SIZaMKD7Cxs4CvXSx/yxaWHewZjYEjScpOf5igc8IILASViw4WTnjlwUdI1KzVtDHQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxc-parser/binding-linux-arm-musleabihf@0.128.0':
-    resolution: {integrity: sha512-fq7DmKmfC+dvD97IXrgbph6Jzwe0EDu+PYMofmzZ6fv5X1k9vtaqLpDGMuICO9MmUnyKAQmVl+wIv2RNy4Dz8g==}
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.140.0':
+    resolution: {integrity: sha512-RAEuQsYtS0KcDFqN0ABTjyyNlokS91JeuDuoW9tEbG0JTbRNXnpQUdbYc/16JoA6Z/2ALbNrE3KmxtqDiuIjCQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@oxc-parser/binding-linux-arm64-gnu@0.128.0':
-    resolution: {integrity: sha512-Xvm48jJah8TlIrURIjNOP/gNiGe6aKvCB+r06VliflFo8Kq7VOLE8PxtgShJzZIqubrgdMdYfvuPPozn7F6MbQ==}
+  '@oxc-parser/binding-linux-arm-musleabihf@0.127.0':
+    resolution: {integrity: sha512-Cs2fdJ8cPpFdeebj6p4dag8A4+56hPvZ0AhQQzlaLswGz1tz7bXt1nETLeorrM9+AMcWFFkqxcXwDGfTVidY8g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm-musleabihf@0.140.0':
+    resolution: {integrity: sha512-c4CkHvPvqfojouredJ0w3e6+jiBq0SbFyhH61kr/zPb/7XsaYTNKQ54vmlSsopfdQbNDX40ZeK9Abs2Qet6wcw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-parser/binding-linux-arm64-gnu@0.127.0':
+    resolution: {integrity: sha512-qdOfTcT6SY8gsJrrV92uyEUyjqMGPpIB5JZUG6QN5dukYd+7/j0kX6MwK1DgQj39jtUYixxPiaRUiEN1+0CXgQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-parser/binding-linux-arm64-musl@0.128.0':
-    resolution: {integrity: sha512-M7iwBGmYJTx+pKOYFjI0buop4gJvlmcVzFGaXPt21DKpQkbQZG1f63Yg7LloIYT/t9yLxCw0Lhfx/RFlAlMSjA==}
+  '@oxc-parser/binding-linux-arm64-gnu@0.140.0':
+    resolution: {integrity: sha512-yrjmLj8ixPB25yqvPGr28meGjb+keed7m1GqqY/0uqkhZIoT4t9zmfwUgFEtC33C7dtE+UQ7TU0IaVxf97SWJg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-arm64-musl@0.127.0':
+    resolution: {integrity: sha512-EoTCZneNFU/P2qrpEM+RHmQwt+CvDkyGESG6qhr7KaegXLZwePfbrkCDfAk8/rhxbDUVGsZILX+2tqPzFtoFWA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@oxc-parser/binding-linux-ppc64-gnu@0.128.0':
-    resolution: {integrity: sha512-21LGNIZb1Pcfk5/EGsqabrxv4yqQOWis1407JJrClS7XpFCrbvr74YAB1V+m54cYbwvO6UWwQqS4WecxiyfCRg==}
+  '@oxc-parser/binding-linux-arm64-musl@0.140.0':
+    resolution: {integrity: sha512-ggGMQTN8Agwxp2WiLMpdY671dt0qTDJWiWlJeig3HnUwTnerRl0J2JdGVghWBeDcss2D9S2V2Js6dZHEiVabVA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-linux-ppc64-gnu@0.127.0':
+    resolution: {integrity: sha512-zALjmZYgxFLHjXeudcDF0xFGNydTAtkAeXAr2EuC17ywCyFxcmQra4w0BMde0Yi/re4Bi4iwEoEXtYN7l6eBLQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-parser/binding-linux-riscv64-gnu@0.128.0':
-    resolution: {integrity: sha512-gyHjOTFpg9bTTYjxPmQirvufb89+VdZwVfcMtAUyPr6F5H8ZswvCQshK4qOW+Q+2Xyb33hduRgY/eFHJQjU/vQ==}
+  '@oxc-parser/binding-linux-ppc64-gnu@0.140.0':
+    resolution: {integrity: sha512-IgTs8xYAFgAUGNmR65tIqjlJ8vKgrfXzC515e9goSdfMyKQV4aJpd2pUUudU4u51G64H0/DSEJEXKOraxm9ZCA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.127.0':
+    resolution: {integrity: sha512-fPP8M6zQLS7Jz7o9d5ArUSuAuSK3e+WCYVrCpdzeCOejidtZExJ9tjhDrAd3HEPqARBCPmdpqxESPFqy44vkBQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-parser/binding-linux-riscv64-musl@0.128.0':
-    resolution: {integrity: sha512-X6Q2oKUrP5GyDd2xniuEBLk6aFQCZ97W2+aVXGgJXdjx5t4/oFuA9ri0wLOUrBIX+qdSuK581snMBio4z910eA==}
+  '@oxc-parser/binding-linux-riscv64-gnu@0.140.0':
+    resolution: {integrity: sha512-A1x+PMWZmSGaFVOx2YeNTFau8uD+QO14/vLP4GrcuvUPs3+nBkUOjy9Lus86ftHsDojjYMbvBelmKc3F7Rv08g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-riscv64-musl@0.127.0':
+    resolution: {integrity: sha512-7IcC4Ao02oGpfnjt+X/oF4U2mllo2qoSkw5xxiXNKL9MCTsTiAC6616beOuehdxGcnz1bRoPC1RQ2f1GQDdN+g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
     libc: [musl]
 
-  '@oxc-parser/binding-linux-s390x-gnu@0.128.0':
-    resolution: {integrity: sha512-BdzTmqxfxoYkpgokoLaSnOX6T+R3/goL42klre2tnG+kHbG2TXS0VN+P5BPofH1axdKOHy5ei4ENZrjmCOt2lA==}
+  '@oxc-parser/binding-linux-riscv64-musl@0.140.0':
+    resolution: {integrity: sha512-zBqpfRo2myWPrPo5xUjeZqlnPXPXsX8BcWtWff66/eGRQdbPjhzPgXa/F+AtxT2afUViPxbuDlwscMKzQ5tg+g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.127.0':
+    resolution: {integrity: sha512-pbXIhiNFHoqWeqDNLiJ9JkpHz1IM9k4DXa66x+1GTWMG7iLxtkXgE53iiuKSXwmk3zIYmaPVfBvgcAhS583K4Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-parser/binding-linux-x64-gnu@0.128.0':
-    resolution: {integrity: sha512-OO1nW2Q7sSYYvJZpDHdvyFSdRaVcQqRijZSSmWVMqFxPYy8cEF45zJ9fcdIYuzIT3jYq6YRhEFm/VMWNWhE22Q==}
+  '@oxc-parser/binding-linux-s390x-gnu@0.140.0':
+    resolution: {integrity: sha512-2M1DPm/8w9I//YzFlFC9qXw+r2tJFh5CYwRlYTq2vUJQS7qoQftEDeCZ8EnN7KHtvSiXvYj8mZI5pR7DpXmcEw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-x64-gnu@0.127.0':
+    resolution: {integrity: sha512-MYCguB9RvBvlSd6gbuNI7QwiLoCCAlGnlRJFPrzLI6U1/9wkC/WK6LtBAUln55H1Ctqw45PWmqrobKoMhsYQzQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-parser/binding-linux-x64-musl@0.128.0':
-    resolution: {integrity: sha512-4NehAe404MRdoZVS9DW8C5XbJwbXIc/KfVlYdpi5vE4081zc9Y0YzKVqyOYj/Puye7/Do+ohaONBFWlEHYl9hw==}
+  '@oxc-parser/binding-linux-x64-gnu@0.140.0':
+    resolution: {integrity: sha512-8aRDbZ/U/jO8N7go1MO72jtbpb4uswV8d7vOkMvt/BPgZiyEYvl1VIWK4ESxZZhnJ4tqwVldgX7dNiP/eB1Jdg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxc-parser/binding-linux-x64-musl@0.127.0':
+    resolution: {integrity: sha512-5eY0B/bxf1xIUxb4NOTvOI3KWtBQfPWYyKAzgcrCt0mDibSZygVpO1Pz8bkeiSZ5Jj9+M09dkggG3H8I5d0Uyg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@oxc-parser/binding-openharmony-arm64@0.128.0':
-    resolution: {integrity: sha512-kVbqgW9xLL8bh8oc7aYOJilRKXE5G33+tE0jan+duo/9OriaFRpijcCwT2waWs2oqYROYq0GlE7/p3ywoshVeg==}
+  '@oxc-parser/binding-linux-x64-musl@0.140.0':
+    resolution: {integrity: sha512-xRqpeI8U2sQQS1W5BMWRyMTxtagkuLG2dEWruet5lFsWHTvBth11/TpSaJatHdqVVwHN0q3uuoS9zRsGinq8hg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxc-parser/binding-openharmony-arm64@0.127.0':
+    resolution: {integrity: sha512-Gld0ajrFTUXNtdw20fVBuTQx66FA75nIVg+//pPfR3sXkuABB4mTBhl3r9JNzrJpgW//qiwxf0nWXUWGJSL3UQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@oxc-parser/binding-wasm32-wasi@0.128.0':
-    resolution: {integrity: sha512-L38ojghJYHmgiz6fJd7jwLB/ESDBpB02NdFxh+smqVM6P2anCEvHn0jhaSrt5eVNR1Ak8+moOeftUlofeyvniA==}
+  '@oxc-parser/binding-openharmony-arm64@0.140.0':
+    resolution: {integrity: sha512-GbGRe26MqAKciFRvXeHNQJ6VAHYs9R4miP89sEAncysM3n+f4lnyLWgsa9kklJNpfnxdq2yRoNYHFqwBckVimw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxc-parser/binding-wasm32-wasi@0.127.0':
+    resolution: {integrity: sha512-T6KVD7rhLzFlwGRXMnxUFfkCZD8FHnb968wVXW1mXzgRFc5RNXOBY2mPPDZ77x5Ln76ltLMgtPg0cOkU1NSrEQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [wasm32]
 
-  '@oxc-parser/binding-win32-arm64-msvc@0.128.0':
-    resolution: {integrity: sha512-xgvO35GyHBtjlQ5AEpaYr7Rll1rvY7zqIhT6ty8E3ezBW2J1SFLjIDEvI/tcgDg6oaseDAqVcM+jU1HuCekgZw==}
+  '@oxc-parser/binding-wasm32-wasi@0.140.0':
+    resolution: {integrity: sha512-vFiC1hqys+hkX1GnQkIoiTQJNiUm43Z0lO35ETKXTw0YtpW7+cN58YRRXFAQQ+TgpkIi3lrhcxdlnqz+Oi3ptQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [wasm32]
+
+  '@oxc-parser/binding-win32-arm64-msvc@0.127.0':
+    resolution: {integrity: sha512-Ujvw4X+LD1CCGULcsQcvb4YNVoBGqt+JHgNNzGGaCImELiZLk477ifUH53gIbE7EKd933NdTi25JWEr9K2HwXw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@oxc-parser/binding-win32-ia32-msvc@0.128.0':
-    resolution: {integrity: sha512-OY+3eM2SN72prHKRB22mPz8o5A/7dJ+f5DFLBVvggyZhEaNDAH9IB+ElMjmOkOIwf5MDCUAowCK7pAncNxzpBA==}
+  '@oxc-parser/binding-win32-arm64-msvc@0.140.0':
+    resolution: {integrity: sha512-fGSQldwEYKhM+H8uLt76Op8hh5+FYaR6lvvQ1Txw3Mhn86DyQXLcI0fi1EkFlTK7F+46OCk/j0AJMzZQm6g5Xg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-parser/binding-win32-ia32-msvc@0.127.0':
+    resolution: {integrity: sha512-0cwxKO7KHQQQfo4Uf4B2SQrhgm+cJaP9OvFFhx52Tkg4bezsacu83GB2/In5bC415Ueeym+kXdnge/57rbSfTw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ia32]
     os: [win32]
 
-  '@oxc-parser/binding-win32-x64-msvc@0.128.0':
-    resolution: {integrity: sha512-NE9ny+cPUCCObXa0IKLfj0tCdPd7pe/dz9ZpkxpUOymB3miNeMPybdlYYTBSGJUalMWeBM85/4JcCErCNTqOXw==}
+  '@oxc-parser/binding-win32-ia32-msvc@0.140.0':
+    resolution: {integrity: sha512-sDS2Bai+g3ZWYwfZqmosiSuFDBcVnZ3Ta6pszzsiJoLMqsJEWKcxXXbGa7b7yXr++W2lQNPb3ZRJ8czseqL7RA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxc-parser/binding-win32-x64-msvc@0.127.0':
+    resolution: {integrity: sha512-rOrnSQSCbhI2kowr9XxE7m9a8oQXnBHjnS6j95LxxAnEZ0+Fz20WlRXG4ondQb+ejjt2KOsa65sE6++L6kUd+w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@oxc-parser/binding-win32-x64-msvc@0.140.0':
+    resolution: {integrity: sha512-kHbE1zWyb5OQgJA6/5P4WjiuB01sYdQwtZnSSyE58FQEXDAMnyeeq4vj7KgN75i5SlBzOs8A5MrtlD3gOlDKqQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
@@ -3878,146 +4075,418 @@ packages:
   '@oxc-project/types@0.127.0':
     resolution: {integrity: sha512-aIYXQBo4lCbO4z0R3FHeucQHpF46l2LbMdxRvqvuRuW2OxdnSkcng5B8+K12spgLDj93rtN3+J2Vac/TIO+ciQ==}
 
-  '@oxc-project/types@0.128.0':
-    resolution: {integrity: sha512-huv1Y/LzBJkBVHt3OlC7u0zHBW9qXf1FdD7sGmc1rXc2P1mTwHssYv7jyGx5KAACSCH+9B3Bhn6Z9luHRvf7pQ==}
+  '@oxc-project/types@0.140.0':
+    resolution: {integrity: sha512-h5LUOzGArYemnW1NMz/DuuQhBi96J6JL2Bk8zE4kvqxB5Sg3jxmCiH4uyOWHDkiKSt5vWlG4FIwCR/DbstcNRQ==}
 
-  '@oxc-resolver/binding-android-arm-eabi@11.19.1':
-    resolution: {integrity: sha512-aUs47y+xyXHUKlbhqHUjBABjvycq6YSD7bpxSW7vplUmdzAlJ93yXY6ZR0c1o1x5A/QKbENCvs3+NlY8IpIVzg==}
+  '@oxc-project/types@0.142.0':
+    resolution: {integrity: sha512-7W+2q5AKQVU36fkaryontrHn3YDt1RyUYXatw9i5H8ocYe2sPKSFB6eS8WNPeRKiN1qAWWZUPm7gwFzJGrccqQ==}
+
+  '@oxc-resolver/binding-android-arm-eabi@11.24.2':
+    resolution: {integrity: sha512-y09e0L0SRI2OA2tUIrjBgoV3eH5hvUKXNkJqXmNo5V2WxIjyC7I7aJfRLMEVpA8yi95f90gFDvO0VMgrDw+vwA==}
     cpu: [arm]
     os: [android]
 
-  '@oxc-resolver/binding-android-arm64@11.19.1':
-    resolution: {integrity: sha512-oolbkRX+m7Pq2LNjr/kKgYeC7bRDMVTWPgxBGMjSpZi/+UskVo4jsMU3MLheZV55jL6c3rNelPl4oD60ggYmqA==}
+  '@oxc-resolver/binding-android-arm64@11.24.2':
+    resolution: {integrity: sha512-cl4icWaZFnLdg8m6qtnh5rBMuGbxc/ptStFHLeCNwr+2cZjkjNwQu/jYRS0CHlnPecOJMpuS5M6/BH+0J/YkEg==}
     cpu: [arm64]
     os: [android]
 
-  '@oxc-resolver/binding-darwin-arm64@11.19.1':
-    resolution: {integrity: sha512-nUC6d2i3R5B12sUW4O646qD5cnMXf2oBGPLIIeaRfU9doJRORAbE2SGv4eW6rMqhD+G7nf2Y8TTJTLiiO3Q/dQ==}
+  '@oxc-resolver/binding-darwin-arm64@11.24.2':
+    resolution: {integrity: sha512-At29QEMF6HajbQvgY8K6OXnHD1x9rad74xBEfmCB6ZqCGsdq75aK7tOYcTbOanMy8qdIBrfL3SMr3p/lfSlb9w==}
     cpu: [arm64]
     os: [darwin]
 
-  '@oxc-resolver/binding-darwin-x64@11.19.1':
-    resolution: {integrity: sha512-cV50vE5+uAgNcFa3QY1JOeKDSkM/9ReIcc/9wn4TavhW/itkDGrXhw9jaKnkQnGbjJ198Yh5nbX/Gr2mr4Z5jQ==}
+  '@oxc-resolver/binding-darwin-x64@11.24.2':
+    resolution: {integrity: sha512-A5Kqr1EUj4oIL5CF4WRssq/o5P0Y11cwoFouMRmQ7YnC/A8V93nv1nb7aSU8HwcgmXropjLNkVTl4MN87cu28Q==}
     cpu: [x64]
     os: [darwin]
 
-  '@oxc-resolver/binding-freebsd-x64@11.19.1':
-    resolution: {integrity: sha512-xZOQiYGFxtk48PBKff+Zwoym7ScPAIVp4c14lfLxizO2LTTTJe5sx9vQNGrBymrf/vatSPNMD4FgsaaRigPkqw==}
+  '@oxc-resolver/binding-freebsd-x64@11.24.2':
+    resolution: {integrity: sha512-R5xkRBRRz7ceH/P5Jrc6G7FmdUdgpLYyESFAUDVTNQ9K0sGPxcp4ljiwEwEqsvNcQ4sYbMRrWcHHBCu7ksAJVw==}
     cpu: [x64]
     os: [freebsd]
 
-  '@oxc-resolver/binding-linux-arm-gnueabihf@11.19.1':
-    resolution: {integrity: sha512-lXZYWAC6kaGe/ky2su94e9jN9t6M0/6c+GrSlCqL//XO1cxi5lpAhnJYdyrKfm0ZEr/c7RNyAx3P7FSBcBd5+A==}
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.24.2':
+    resolution: {integrity: sha512-k/RuYL4L/R58IBn3wT5ma3Wh4k62bp1eYCFRWCmMsasUOqL+H6sW0VGFadEzKWXFFlz+2uIMoeMk9ySSZJHgbg==}
     cpu: [arm]
     os: [linux]
 
-  '@oxc-resolver/binding-linux-arm-musleabihf@11.19.1':
-    resolution: {integrity: sha512-veG1kKsuK5+t2IsO9q0DErYVSw2azvCVvWHnfTOS73WE0STdLLB7Q1bB9WR+yHPQM76ASkFyRbogWo1GR1+WbQ==}
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.24.2':
+    resolution: {integrity: sha512-bnHAak3ujYfH5pKk4NieFNbvYvernfoQDgwLddbZ3OtMYrem87/qjlA+u+aKG0oZcqSLGCful/6/CEA+aeAgaA==}
     cpu: [arm]
     os: [linux]
 
-  '@oxc-resolver/binding-linux-arm64-gnu@11.19.1':
-    resolution: {integrity: sha512-heV2+jmXyYnUrpUXSPugqWDRpnsQcDm2AX4wzTuvgdlZfoNYO0O3W2AVpJYaDn9AG4JdM6Kxom8+foE7/BcSig==}
+  '@oxc-resolver/binding-linux-arm64-gnu@11.24.2':
+    resolution: {integrity: sha512-vDT3KHgzYp47gmtNOqL2VNhCyl5Zv643eyxm//A68J8DeUGXrvD1pZFiaT4jSfe+RInfnn1R2yVHye4enx6RnA==}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-resolver/binding-linux-arm64-musl@11.19.1':
-    resolution: {integrity: sha512-jvo2Pjs1c9KPxMuMPIeQsgu0mOJF9rEb3y3TdpsrqwxRM+AN6/nDDwv45n5ZrUnQMsdBy5gIabioMKnQfWo9ew==}
+  '@oxc-resolver/binding-linux-arm64-musl@11.24.2':
+    resolution: {integrity: sha512-+kMlQvbzfyEYtu5FcjE4p+ttBLpKW4d/AsAsuE69BxV6V4twZJeIQZFfD8gh/wqglY0MkPSezWXQH0jBV13MUw==}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@oxc-resolver/binding-linux-ppc64-gnu@11.19.1':
-    resolution: {integrity: sha512-vLmdNxWCdN7Uo5suays6A/+ywBby2PWBBPXctWPg5V0+eVuzsJxgAn6MMB4mPlshskYbppjpN2Zg83ArHze9gQ==}
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.24.2':
+    resolution: {integrity: sha512-shjfMhmZ3gq9fv/w7bi3PnZlgOPG+2QAOFf0BJF0EgBSIGZ6PMLN2zbGEblTUYB/NKVDRyYhE2ff3dJ1QqNPkA==}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-resolver/binding-linux-riscv64-gnu@11.19.1':
-    resolution: {integrity: sha512-/b+WgR+VTSBxzgOhDO7TlMXC1ufPIMR6Vj1zN+/x+MnyXGW7prTLzU9eW85Aj7Th7CCEG9ArCbTeqxCzFWdg2w==}
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.24.2':
+    resolution: {integrity: sha512-zGelwFR5oRo+b69k8Lrzun86DyUHzfKN6cnjbR9l7Z7NIRznOE/2ZvPa1IUKqAL2PzAXOdwkfVqNvO1H2RlpAw==}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-resolver/binding-linux-riscv64-musl@11.19.1':
-    resolution: {integrity: sha512-YlRdeWb9j42p29ROh+h4eg/OQ3dTJlpHSa+84pUM9+p6i3djtPz1q55yLJhgW9XfDch7FN1pQ/Vd6YP+xfRIuw==}
+  '@oxc-resolver/binding-linux-riscv64-musl@11.24.2':
+    resolution: {integrity: sha512-qxZ1SWCXJY0eyhAlP6Lmo9F2Nrtx7EkYj9oCgL8apDPCwXwCEDA2U697bbT81JIc2IrVjxO4KX6WU2N+oN9Z4w==}
     cpu: [riscv64]
     os: [linux]
     libc: [musl]
 
-  '@oxc-resolver/binding-linux-s390x-gnu@11.19.1':
-    resolution: {integrity: sha512-EDpafVOQWF8/MJynsjOGFThcqhRHy417sRyLfQmeiamJ8qVhSKAn2Dn2VVKUGCjVB9C46VGjhNo7nOPUi1x6uA==}
+  '@oxc-resolver/binding-linux-s390x-gnu@11.24.2':
+    resolution: {integrity: sha512-sGCecF3cx2DFlH4t/z7ApnOnXqN48p5p5mlHDEnHTAukQa2P+qMVE4CwyWE9W+q/m3QJ7kKfGrIjax31f44oFQ==}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-resolver/binding-linux-x64-gnu@11.19.1':
-    resolution: {integrity: sha512-NxjZe+rqWhr+RT8/Ik+5ptA3oz7tUw361Wa5RWQXKnfqwSSHdHyrw6IdcTfYuml9dM856AlKWZIUXDmA9kkiBQ==}
+  '@oxc-resolver/binding-linux-x64-gnu@11.24.2':
+    resolution: {integrity: sha512-k/VlMMcSzMlahb3/fENM4rTlsJ0s3fFROA0KXPBmKggqmTSaE383sl8F3KCOXPLmVsYfW6hCitMhXCEtNeZxxg==}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@oxc-resolver/binding-linux-x64-musl@11.19.1':
-    resolution: {integrity: sha512-cM/hQwsO3ReJg5kR+SpI69DMfvNCp+A/eVR4b4YClE5bVZwz8rh2Nh05InhwI5HR/9cArbEkzMjcKgTHS6UaNw==}
+  '@oxc-resolver/binding-linux-x64-musl@11.24.2':
+    resolution: {integrity: sha512-8hbnZyNi97b/8wapYaIF9+t9GmZKBW2vunaOc3h9HGJptH7b7XpvZqOTBSm/MpTjr7H497BlgOaSfLUdhmy2bw==}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@oxc-resolver/binding-openharmony-arm64@11.19.1':
-    resolution: {integrity: sha512-QF080IowFB0+9Rh6RcD19bdgh49BpQHUW5TajG1qvWHvmrQznTZZjYlgE2ltLXyKY+qs4F/v5xuX1XS7Is+3qA==}
+  '@oxc-resolver/binding-openharmony-arm64@11.24.2':
+    resolution: {integrity: sha512-MvyGik3a6pVgZ0t/kWlbmFxFLmXQJwgLsY2eYFHLpy0wGwRbfzeIGgDwQ3kXqE30z+kSXennRkCrT7TUvkptNg==}
     cpu: [arm64]
     os: [openharmony]
 
-  '@oxc-resolver/binding-wasm32-wasi@11.19.1':
-    resolution: {integrity: sha512-w8UCKhX826cP/ZLokXDS6+milN8y4X7zidsAttEdWlVoamTNf6lhBJldaWr3ukTDiye7s4HRcuPEPOXNC432Vg==}
+  '@oxc-resolver/binding-wasm32-wasi@11.24.2':
+    resolution: {integrity: sha512-vHcssMPwO08RTvj/c0iOBz90attxyG3wQJ0dTcyEQK43LRpcdLWZlV5feBhv6Isn6ahbQIzHbCgfa81+RiML0Q==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
-  '@oxc-resolver/binding-win32-arm64-msvc@11.19.1':
-    resolution: {integrity: sha512-nJ4AsUVZrVKwnU/QRdzPCCrO0TrabBqgJ8pJhXITdZGYOV28TIYystV1VFLbQ7DtAcaBHpocT5/ZJnF78YJPtQ==}
+  '@oxc-resolver/binding-win32-arm64-msvc@11.24.2':
+    resolution: {integrity: sha512-uokJqro2iBqkFvJdKQLP7d8/BUmFwESQFVmIJUQKj1Xn1a/LysJoe1vmeECLF5b3jsV8CAL5sEMJXX6SdK9Nhg==}
     cpu: [arm64]
     os: [win32]
 
-  '@oxc-resolver/binding-win32-ia32-msvc@11.19.1':
-    resolution: {integrity: sha512-EW+ND5q2Tl+a3pH81l1QbfgbF3HmqgwLfDfVithRFheac8OTcnbXt/JxqD2GbDkb7xYEqy1zNaVFRr3oeG8npA==}
-    cpu: [ia32]
-    os: [win32]
-
-  '@oxc-resolver/binding-win32-x64-msvc@11.19.1':
-    resolution: {integrity: sha512-6hIU3RQu45B+VNTY4Ru8ppFwjVS/S5qwYyGhBotmjxfEKk41I2DlGtRfGJndZ5+6lneE2pwloqunlOyZuX/XAw==}
+  '@oxc-resolver/binding-win32-x64-msvc@11.24.2':
+    resolution: {integrity: sha512-UqGPmo56KDfLlfXFAFIrNflHT8tFxWGEivWg3Zeyp4Uy2NlKN1FGPr6/BxcLGG3+kZ6Wp14g5Uj+n71boqZfiw==}
     cpu: [x64]
     os: [win32]
 
-  '@peculiar/asn1-cms@2.6.0':
-    resolution: {integrity: sha512-2uZqP+ggSncESeUF/9Su8rWqGclEfEiz1SyU02WX5fUONFfkjzS2Z/F1Li0ofSmf4JqYXIOdCAZqIXAIBAT1OA==}
+  '@oxfmt/binding-android-arm-eabi@0.60.0':
+    resolution: {integrity: sha512-1q4q4Jc8FlOMVojEisyFAVyl8h1yawNv6phjgmhGVEDeyeOdsSnSr9x0+D4mOnEKvpO5L4mxKZ/DP9X6U3A/Mw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
 
-  '@peculiar/asn1-csr@2.6.0':
-    resolution: {integrity: sha512-BeWIu5VpTIhfRysfEp73SGbwjjoLL/JWXhJ/9mo4vXnz3tRGm+NGm3KNcRzQ9VMVqwYS2RHlolz21svzRXIHPQ==}
+  '@oxfmt/binding-android-arm64@0.60.0':
+    resolution: {integrity: sha512-tD41I6nCt9k8SQXft0CSjjU9jg6SwG7uMu7PxodSEHXl+GDW0868oy6tTtoJkyUze8YKFgTpz/k5LuPUnFiGLw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
 
-  '@peculiar/asn1-ecc@2.6.0':
-    resolution: {integrity: sha512-FF3LMGq6SfAOwUG2sKpPXblibn6XnEIKa+SryvUl5Pik+WR9rmRA3OCiwz8R3lVXnYnyRkSZsSLdml8H3UiOcw==}
+  '@oxfmt/binding-darwin-arm64@0.60.0':
+    resolution: {integrity: sha512-TTpzPug96Zxdyb46KvTyIUQDdsqbumXh2TKG9C23PCT0kF7JkW56Z/quPuG9rqOFKQIi1gpRNZ7DX18LwxXPnw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
 
-  '@peculiar/asn1-pfx@2.6.0':
-    resolution: {integrity: sha512-rtUvtf+tyKGgokHHmZzeUojRZJYPxoD/jaN1+VAB4kKR7tXrnDCA/RAWXAIhMJJC+7W27IIRGe9djvxKgsldCQ==}
+  '@oxfmt/binding-darwin-x64@0.60.0':
+    resolution: {integrity: sha512-CnOoWgQ7L+JL/YQaRJ+NyATciSfcftncm7y3kqyte1cGtFEGnStaCd1TAyrinkfQ7nRBfHrTs1/vTwUJr3WF2Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
 
-  '@peculiar/asn1-pkcs8@2.6.0':
-    resolution: {integrity: sha512-KyQ4D8G/NrS7Fw3XCJrngxmjwO/3htnA0lL9gDICvEQ+GJ+EPFqldcJQTwPIdvx98Tua+WjkdKHSC0/Km7T+lA==}
+  '@oxfmt/binding-freebsd-x64@0.60.0':
+    resolution: {integrity: sha512-ychJo7S3hZxdO6eDZ9zM6F2lM9fpJS3EKS5CAUSWyprdLYxTu4gbaUKV/VBPTcMJwQa2Bpo+643y3OJ537pihA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
 
-  '@peculiar/asn1-pkcs9@2.6.0':
-    resolution: {integrity: sha512-b78OQ6OciW0aqZxdzliXGYHASeCvvw5caqidbpQRYW2mBtXIX2WhofNXTEe7NyxTb0P6J62kAAWLwn0HuMF1Fw==}
+  '@oxfmt/binding-linux-arm-gnueabihf@0.60.0':
+    resolution: {integrity: sha512-36IH5o55T2Fx7E0feDttt+mifxN6yk9pWv4KfhAIsP0dFnUq27331OwbpOsZdoXF9soOLWm7mQUz5+UUmyec4g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
 
-  '@peculiar/asn1-rsa@2.6.0':
-    resolution: {integrity: sha512-Nu4C19tsrTsCp9fDrH+sdcOKoVfdfoQQ7S3VqjJU6vedR7tY3RLkQ5oguOIB3zFW33USDUuYZnPEQYySlgha4w==}
+  '@oxfmt/binding-linux-arm-musleabihf@0.60.0':
+    resolution: {integrity: sha512-G1Ve7lAa6sFBolVI2LWHfEAqy0YKh4vnioH8uYO9kAEdgM7mR40IksIx9/Zk4+vbYew/sGa4J9Q4tZ3n9gXDHA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
 
-  '@peculiar/asn1-schema@2.7.0':
-    resolution: {integrity: sha512-W8ZfWzLmQnrcky+eh3tni4IozMdqBDiHWU0N+vve/UGjMaUs8c0L7A2oEdkBXS8rTpWDpK/aoI3DG/L/hxmxPg==}
+  '@oxfmt/binding-linux-arm64-gnu@0.60.0':
+    resolution: {integrity: sha512-LTQdRBf6uzj/h7Xk6lKzbGD2hrF/fK4YI9LIN1c0509tPUn8wRa3mCmrFQpEWJPLYGFrLFFMTYW1Ljj6VqW2Hw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
 
-  '@peculiar/asn1-x509-attr@2.6.0':
-    resolution: {integrity: sha512-MuIAXFX3/dc8gmoZBkwJWxUWOSvG4MMDntXhrOZpJVMkYX+MYc/rUAU2uJOved9iJEoiUx7//3D8oG83a78UJA==}
+  '@oxfmt/binding-linux-arm64-musl@0.60.0':
+    resolution: {integrity: sha512-2JMo3XPxMPx3hiqddSZYyaH+fKJm6cz0u8n1naYjP/CdOQOZW34i8lKBUfmbWiuFvd6KoYXLmhAyBuvojsYS7Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
 
-  '@peculiar/asn1-x509@2.6.0':
-    resolution: {integrity: sha512-uzYbPEpoQiBoTq0/+jZtpM6Gq6zADBx+JNFP3yqRgziWBxQ/Dt/HcuvRfm9zJTPdRcBqPNdaRHTVwpyiq6iNMA==}
+  '@oxfmt/binding-linux-ppc64-gnu@0.60.0':
+    resolution: {integrity: sha512-L3C+nBD13lr306tr/PjM3RMll+BVqgFrIgUyoeHuai5oueJrRLgO3j+GO5/Cbhtkf5PSlHYTI1JY7iqBd1qa6A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxfmt/binding-linux-riscv64-gnu@0.60.0':
+    resolution: {integrity: sha512-M4MsmvqlxFiPtSRGyBYQSZxchEf463AOyd+Dh4/9xDpjWBsRtDUTDMFN5EdHinjVK1/eDJQ8MLpcYjpYayaCnA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxfmt/binding-linux-riscv64-musl@0.60.0':
+    resolution: {integrity: sha512-OH+9UskYuxRB+GxqdGkVN8f5UpwhqG8YscNo1wl8+KJ62cd7wZdGga6iGLJIf8kibF1WBwvlfDUx3cez/VXwFg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxfmt/binding-linux-s390x-gnu@0.60.0':
+    resolution: {integrity: sha512-y7AAFutt9wFWBFOAn6+BHaV39usZmcr3YYH2385f+NHgPNpIF9HpqKp0jgUxPaUOCyG3oaX5VhJduL1Nw164rw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxfmt/binding-linux-x64-gnu@0.60.0':
+    resolution: {integrity: sha512-yKZ9+CXAI+1RO5nH/4Z/9M6DAsfOzd5bw/gtWk81KB4mpalMaRRSXfouc5/tHxazDmBek55HNPepNYBgaCew0Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxfmt/binding-linux-x64-musl@0.60.0':
+    resolution: {integrity: sha512-bCUGaF6hJOYnQzLJdHLZbvGsOd5oSvGAyJhPAKum2uyLYUuXmP8vqg690DWi2hqcnIoYpqSqCrjzE5aiUAgwQg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxfmt/binding-openharmony-arm64@0.60.0':
+    resolution: {integrity: sha512-GrUeZOvzP30ExxfCuQiyofuUGI+OmvAgFwOO5w5p9mGPlxcyuqI+6Sy9fAKFFfLQrqKYWFgc5sYA2Unj/29nPg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxfmt/binding-win32-arm64-msvc@0.60.0':
+    resolution: {integrity: sha512-WD4Q954kUl2TDJV/6q7UnE2rlKk047kXLJsr4bJ2mXRaAqNXcmV3nwKUsGCc3mz/jYDBnXtJEaBErJEybK8iQQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxfmt/binding-win32-ia32-msvc@0.60.0':
+    resolution: {integrity: sha512-HqDekjr8JXzVDUP1YthDZ1Y3CBEcuZT4WX3B+1kaxj8CvZA8Y2YhcEsXqoSop3tVsgjACxjnFQFDkBo0r/jq1Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxfmt/binding-win32-x64-msvc@0.60.0':
+    resolution: {integrity: sha512-tz78yhmGPKboTMHCHSaUqXK8JrmoSejgDcWeqAtg2s07ZGKQ3rH5Jn8NuXPGNG33CDbY2e9NoQWXIVEmKO21Rw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@oxlint-tsgolint/darwin-arm64@7.0.2001':
+    resolution: {integrity: sha512-CUJEdbSZ54+Xy9OXqOhWLTKZKV0BBiV7C2i/ygyVmXtkUNXx5YCzN8DpSSshTAKktoL7S+tnQ/ftFG/i7X896w==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxlint-tsgolint/darwin-x64@7.0.2001':
+    resolution: {integrity: sha512-pXfBb5BqONCcgrXQNUZWXgiYmRSWJzd97S8i41VVOh6ut0tyo+cJ5FKFpczDHxiVNfj/3e7c9B4MtztNdpIVCw==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxlint-tsgolint/linux-arm64@7.0.2001':
+    resolution: {integrity: sha512-roP7zujb/QDPzDwEKsFFpzNHHy91/Y7oX9vQXk78ekyZtcQj1QXDIMH33gjDdHBfRl4K9pZ36xhRgrP4Zr+R8A==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxlint-tsgolint/linux-x64@7.0.2001':
+    resolution: {integrity: sha512-UDezNqdECVmngu2TPnjaS1YoAmcTaBoI5lV9vk3VahBxoi+I5r9k3iJTT7qZoYWOXTD/7T7bNcwRgrocR6BscQ==}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxlint-tsgolint/win32-arm64@7.0.2001':
+    resolution: {integrity: sha512-uJZhqB6pdXLuN+AD1F5082byyQti/NPmJA77GtcFlmT2HzRelqbNls3SaIqxpjdFgvSBF9g0yOKGBkGFg7kX8Q==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxlint-tsgolint/win32-x64@7.0.2001':
+    resolution: {integrity: sha512-FkDRm8hx9OwzGQqyWG1tO5QrTLRApff9DzSgpz9QZau37BR8d1VYKOxMLGf6shPZntJFoTwIIJYT68VndYDCog==}
+    cpu: [x64]
+    os: [win32]
+
+  '@oxlint/binding-android-arm-eabi@1.75.0':
+    resolution: {integrity: sha512-lutovtFzJqlRaqpZrCqSSGaHZzl9nIxxpjLzhSRLunN6dCLylj0uzlCyQGaQDIys7rrv8kVXiFO+R4Zpn0bX7g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxlint/binding-android-arm64@1.75.0':
+    resolution: {integrity: sha512-hXI0hDgHkw4w5nfru72aG7y+2iQJmC4waH/KV6H/hbgA6yAP5jYNx0P9yug15Hs0tWl/+mda3Jjn/2gmDT48tw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxlint/binding-darwin-arm64@1.75.0':
+    resolution: {integrity: sha512-D91BWbK/dMYfCcrghspPIuKs2D9LF4Z/OabVSQjw1AO6PWxArD7teDA48bm0ySFqWDaPVqmQRl5GMWNglTXyrQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxlint/binding-darwin-x64@1.75.0':
+    resolution: {integrity: sha512-02mpwzf12BonZ6PT0TuQoomvEh2kVl2WGBIKWezCyToIS+rYkQZ6GXnARBAl9A4Ovm2V+Xe7M4KretyqmmcnJQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxlint/binding-freebsd-x64@1.75.0':
+    resolution: {integrity: sha512-qZJgLnDaBsiL5YESx2t/TZ8eXkL9fEkKoXEdzegROhlz9A0lgyGnZ0dAzJrh7LJAHQl2K9RdRueN2s/9N7+odg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxlint/binding-linux-arm-gnueabihf@1.75.0':
+    resolution: {integrity: sha512-7XlaWA5BJD3XpCfrEqjEe6Zseeb14S7QGa304XfwKignRaKQ+eIj775BQ7nIslggWickl4IsPUFqJ+/gAyNHVg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxlint/binding-linux-arm-musleabihf@1.75.0':
+    resolution: {integrity: sha512-av6Tpv8yrcMMMOadOqENBhlsLRcGFXXwoQ0hzHhsmS9FJ4Wioy8we427GbcMe2XTxmL2e60T67H1Dyr3up+tAA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxlint/binding-linux-arm64-gnu@1.75.0':
+    resolution: {integrity: sha512-WcUhd8fHT5plrA14lANevl+hOl815mVI5t2hU21oFWrZKFXIVV/Sr4rWQV0NzSvzBupbMLNc5ErEA6Ehxh5jMg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-arm64-musl@1.75.0':
+    resolution: {integrity: sha512-UWzp5wRHFe/ESO3+eEaxXsTkYTGLYjnTsi/I5neEacXSItQ6WNleapfOAeA4x2b8nyhJ4uQxqvtv9pHv8kWJtQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-linux-ppc64-gnu@1.75.0':
+    resolution: {integrity: sha512-XEVRwGMLKCUKrvhLAz4F6AIh8MJrQVdSZtAmPpRZt9tGPsUnamPOcl3dS/ZQzJnar/Ymgc//+xho0L60Emzuxg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-riscv64-gnu@1.75.0':
+    resolution: {integrity: sha512-mAG4DUXqfLC8cTjMD2kt3jDmVzFREYtDyeLNdLdsCcBc4Zbl2EMuiFektGBilQwkNjYnMvCqJs55U+Hyb+b+jw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-riscv64-musl@1.75.0':
+    resolution: {integrity: sha512-95hrAvriAlI+pekSomTFIn0+bawMDlDwTNVmdjsFusTHyL2JWh7TWvRNG/Lkim72uN8OiCcO9wcaC6omLP5E3w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-linux-s390x-gnu@1.75.0':
+    resolution: {integrity: sha512-4b6f2+FrtruAESrCqIKcrarzfrSx+wk2QNcp+RT91/Prc+pMQMAfyZ1rG1c3tFQNl8Bc616tx40uNXyxNBRPbQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-x64-gnu@1.75.0':
+    resolution: {integrity: sha512-nshAhrUvXFUWOvqQ2soIw7HFNWvpvEV4o0cYSqPtzLiPF5gKyYTDOOTJ6Rn8g8K/iGvPIrbDA4v8+5MvnjJrrg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@oxlint/binding-linux-x64-musl@1.75.0':
+    resolution: {integrity: sha512-e4jNxLKnxLC6sYBQRxrI2pgIIxnmMtF8U/VwNYcjTT/CLS+spH624cYVnj07bTKwaEWT37/e025isOs6j/0xqA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@oxlint/binding-openharmony-arm64@1.75.0':
+    resolution: {integrity: sha512-hZ2lH+1qLf/DiEP9UWuQTK2JWj/BgvMB4jhIV4SmNU1wfEiYYX4TynQyAZXx0j9X4qRYizAL042SKaV+8ynh4w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxlint/binding-win32-arm64-msvc@1.75.0':
+    resolution: {integrity: sha512-Ilj6PNzGDS3bCU0MSJH7Msh0NhH+T/mRp2shwg+q+GHeVlPwP5LEboW96aW+3kVKFk6zYZy1Xi5pZkqZh6X8KQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxlint/binding-win32-ia32-msvc@1.75.0':
+    resolution: {integrity: sha512-QVit2nOEOiPhkmsrksPSkoGCdnZRNkspt8fwoYyP09te1VEbnSj4LAxua4rc8FKTmWkySVe05j8iz9GXYfF1AQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxlint/binding-win32-x64-msvc@1.75.0':
+    resolution: {integrity: sha512-DSxnNkBUAYARPwJtR12Ig3deWr8w0H997xP6jy33i+e0SyYJw8FKuz4+cZtpmPEhQmvlPJE3X/2vNxDmLkd/rA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@peculiar/asn1-cms@2.8.0':
+    resolution: {integrity: sha512-NgekZOrSJFSBFLFoLfwePguAWAx7z1+f2TEsWFUMyiqqfntZ4+S/S5hzqME3q4pCA0iOsFKdwiQ35dwY24eVqA==}
+
+  '@peculiar/asn1-csr@2.8.0':
+    resolution: {integrity: sha512-akbF8+uvleHs8sejNPQxwmVFuInAg6FMNHOwMILXfP518YfFJwdR3jr6oNUPOaEJfuEhn/vkNOCIT6ASUd4mbg==}
+
+  '@peculiar/asn1-ecc@2.8.0':
+    resolution: {integrity: sha512-ohwlk+u9Rv2NOAY1c6MfHj45ATVF8R1DUN/WCgABiRtLi2ZftlZWZX7KvpAbU8v9xPcmoILfELeEABj/rn18AQ==}
+
+  '@peculiar/asn1-pfx@2.8.0':
+    resolution: {integrity: sha512-5yof1ytoB++RQtaFbqSUJ8pxDJtZT6vbVqZ8XoJ61ph7UjNVvfFwAilnCodqkNsAodpy13gDhoxZXw00pghnyg==}
+
+  '@peculiar/asn1-pkcs8@2.8.0':
+    resolution: {integrity: sha512-qAKXtLpBEw9LqhKpjw3ajZSXlBur+ipW+y2ivVBQAG6F6qRx94yO+1ZR4mvw+YaCfKSaOzLeYEzsPaBp4SJELA==}
+
+  '@peculiar/asn1-pkcs9@2.8.0':
+    resolution: {integrity: sha512-b5nDWCnkV60+cQ141D6sVVwK9nz64R5n3zSVnklGd+ECdkW2Ol3U1a6yYFlalpSOaD557yuJB64A+q42jG7lUQ==}
+
+  '@peculiar/asn1-rsa@2.8.0':
+    resolution: {integrity: sha512-zHEUlCqB2mk7x2lxDwHHJy7hWZOPdGHVlsmITWKB5/PbQo61atbu9PJ/0r9dQNMwFzbKPXZ8uK8/91eUhRznSg==}
+
+  '@peculiar/asn1-schema@2.8.0':
+    resolution: {integrity: sha512-7YT0U/ze0tF2QOBbE15gKZwy5tvgGyLRiRHLzhlbOpf7BT032oBSd0haZqXn5W6l26WLlu3dyxzjM+2638/z2Q==}
+
+  '@peculiar/asn1-x509-attr@2.8.0':
+    resolution: {integrity: sha512-tHjkfS/qhMnmrlB2J9NhflQlQ7In3khO3CfmVrriOlpTeErY9ZIKOso1hQ5JQiyrJ7ShvqVPk7E5fQmbclkSKA==}
+
+  '@peculiar/asn1-x509@2.8.0':
+    resolution: {integrity: sha512-N0CMuhWUzsWEVq6F1q9X6+VKUnWzSW+cSVg+aPaGGwDdbFoFWTYgin5MHwXgpWd6y9COMBxnfy/Qc+Xc7F0Zwg==}
 
   '@peculiar/json-schema@1.1.12':
     resolution: {integrity: sha512-coUfuoMeIB7B8/NMekxaDzLhaYmp0HZNPEjYRm9goRou8UZIC3z21s0sL9AWoCw4EG876QyO3kYrc61WNF9B/w==}
@@ -4042,19 +4511,25 @@ packages:
     resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
 
-  '@playwright/test@1.59.1':
-    resolution: {integrity: sha512-PG6q63nQg5c9rIi4/Z5lR5IVF7yU5MqmKaPOe0HSc0O2cX1fPi96sUQu5j7eo4gKCkB2AnNGoWt7y4/Xx3Kcqg==}
+  '@playwright/test@1.61.1':
+    resolution: {integrity: sha512-8nKv6+0RJSL9FE4jYOEGXnPeM/Hg12qZpmqzZjRh3qM0Y7c3z1mrOTfFLids72RDQYVh9WpLEfR5WdpNX4fkig==}
     engines: {node: '>=18'}
     hasBin: true
 
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
-  '@posthog/core@1.28.2':
-    resolution: {integrity: sha512-Dii3pxDheG1WioztvV/MqHQMnb16jSFrl2HkDR1T5yf5/R7lPqJCFYt+eXkEdp/oAv/PD+1joyG6Ap/2quFmtQ==}
+  '@posthog/browser-common@0.2.3':
+    resolution: {integrity: sha512-LJOUcBLLjFOqw6ZZsjrCuojliJHFU/GYeOV88T+lXyePXJQnxFzuAouDtwwHFHtoaaOjfQ0OvDMR7J468Nkomw==}
 
-  '@posthog/types@1.372.8':
-    resolution: {integrity: sha512-ALpfCnWsMSM9Cw/6kyLPVpd81ZReEdZwmDxOi+DTJuIo7wDxBiu2cAsjOuA6D/AL22v7HOJrHsmBAPAWqS5X7Q==}
+  '@posthog/core@1.45.1':
+    resolution: {integrity: sha512-tLtvzomavb2PPWdGYKsusyIzIeL2Px47v348Smibkay7sMy/83TyPk+Ptsp2NdeOgJsbuwSxWkR2+XA0aSCAaA==}
+
+  '@posthog/types@1.398.0':
+    resolution: {integrity: sha512-sJMkl4k+u8yS/0fjHsKqE9xTdsAh30a2WvgChiptellnVoE0e8QJKFgqOMD2sk8FaEArPdeFklAhXvmENAt3Sg==}
+
+  '@preact/signals-core@1.14.2':
+    resolution: {integrity: sha512-RZHdBj9ZF4n40Rp4jS052EHHjBWf96P9oNdXPfhQTovCuWY9iQn3Gq+gOTJSgBO9A/JBuPfMOWsSX/lIU9Pc/A==}
 
   '@principalstudio/html-webpack-inject-preload@1.2.7':
     resolution: {integrity: sha512-KJKkiKG63ugBjf8U0e9jUcI9CLPTFIsxXplEDE0oi3mPpxd90X9SJovo3W2l7yh/ARKIYXhQq8fSXUN7M29TzQ==}
@@ -4063,44 +4538,39 @@ packages:
       html-webpack-plugin: ^4.0.0 || ^5.0.0
       webpack: ^4.0.0 || ^5.0.0
 
-  '@prisma/instrumentation@7.6.0':
-    resolution: {integrity: sha512-ZPW2gRiwpPzEfgeZgaekhqXrbW+Y2RJKHVqUmlhZhKzRNCcvR6DykzylDrynpArKKRQtLxoZy36fK7U0p3pdgQ==}
-    peerDependencies:
-      '@opentelemetry/api': ^1.8
-
   '@protobufjs/aspromise@1.1.2':
     resolution: {integrity: sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==}
 
   '@protobufjs/base64@1.1.2':
     resolution: {integrity: sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==}
 
-  '@protobufjs/codegen@2.0.4':
-    resolution: {integrity: sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==}
+  '@protobufjs/codegen@2.0.5':
+    resolution: {integrity: sha512-zgXFLzW3Ap33e6d0Wlj4MGIm6Ce8O89n/apUaGNB/jx+hw+ruWEp7EwGUshdLKVRCxZW12fp9r40E1mQrf/34g==}
 
-  '@protobufjs/eventemitter@1.1.0':
-    resolution: {integrity: sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==}
+  '@protobufjs/eventemitter@1.1.1':
+    resolution: {integrity: sha512-vW1GmwMZNnL+gMRaovlh9yZX74kc+TTU3FObkkurpMaRtBfLP3ldjS9KQWlwZgraRE0+dheEEoAxdzcJQ8eXZg==}
 
-  '@protobufjs/fetch@1.1.0':
-    resolution: {integrity: sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==}
+  '@protobufjs/fetch@1.1.1':
+    resolution: {integrity: sha512-GpptLrs57adMSuHi3VNj0mAF8dwh36LMaYF6XyJ6JMWlVsc+t42tm1HSEDmOs3A8fC9yyeisgLhsTVQokOZ0zw==}
 
   '@protobufjs/float@1.0.2':
     resolution: {integrity: sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==}
 
-  '@protobufjs/inquire@1.1.0':
-    resolution: {integrity: sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==}
-
   '@protobufjs/path@1.1.2':
     resolution: {integrity: sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==}
 
   '@protobufjs/pool@1.1.0':
     resolution: {integrity: sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==}
 
-  '@protobufjs/utf8@1.1.0':
-    resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==}
+  '@protobufjs/utf8@1.1.1':
+    resolution: {integrity: sha512-oOAWABowe8EAbMyWKM0tYDKi8Yaox52D+HWZhAIJqQXbqe0xI/GV7FhLWqlEKreMkfDjshR5FKgi3mnle0h6Eg==}
 
   '@radix-ui/primitive@1.1.3':
     resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
 
+  '@radix-ui/primitive@1.1.7':
+    resolution: {integrity: sha512-rqWnm76nYT8HoNNqEjpgJ7Pw/DrBj5iBTrmEPo6HTX5+VJyBNOqTdv4g89G63HuR5g0AaENoAcH7Is5fF2kZ8Q==}
+
   '@radix-ui/react-arrow@1.1.7':
     resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
     peerDependencies:
@@ -4136,6 +4606,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-compose-refs@1.1.5':
+    resolution: {integrity: sha512-+48PbAAbq3didjJxa+OaWY2ZwgAKsNiRGyeHKszblZMQ+kcpd9pAaT11cMkGEie0vsOi3QdeTE6d5Fe3Gn61kA==}
+    peerDependencies:
+      '@types/react': ^19.2.10
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-context-menu@2.2.16':
     resolution: {integrity: sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww==}
     peerDependencies:
@@ -4167,8 +4646,17 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-dialog@1.1.15':
-    resolution: {integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==}
+  '@radix-ui/react-context@1.2.2':
+    resolution: {integrity: sha512-RHCUGwKHDr0hDGg4X7ma4JG4/+12qxw8rkh5QKdDldlCvtja6nUx1Ef/8HVrJze81lEsgLQlqjzjGNHantgnQA==}
+    peerDependencies:
+      '@types/react': ^19.2.10
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dialog@1.1.23':
+    resolution: {integrity: sha512-Ksw4WeROkO4rC9k/onilX/Ao2Cr1ku1unMNH+XSCcP4jSXYu7HDsg9n4ojMjVb22XpYjAQ9qfrFlVbru1vXDUA==}
     peerDependencies:
       '@types/react': ^19.2.10
       '@types/react-dom': ^19.2.3
@@ -4202,6 +4690,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-dismissable-layer@1.1.19':
+    resolution: {integrity: sha512-8g4pfOL9HoKKLWGiypT+dphVqjFfmcXO5GBnhsG6zI+lxAx/8feQpr+1LSN8Re3hiZ+XkLNS4O9ztK11/LzQ6w==}
+    peerDependencies:
+      '@types/react': ^19.2.10
+      '@types/react-dom': ^19.2.3
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-dropdown-menu@2.1.16':
     resolution: {integrity: sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==}
     peerDependencies:
@@ -4224,6 +4725,28 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-focus-guards@1.1.6':
+    resolution: {integrity: sha512-RNOJjfZMTyBM6xYmV3IVGXkPjIhcBAuv48POevAXwrGJhkWZ9p1rFoIS1JFooPuT193AZmRsCPhpoVJxx6OPoQ==}
+    peerDependencies:
+      '@types/react': ^19.2.10
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-focus-scope@1.1.16':
+    resolution: {integrity: sha512-wmRZ2WWLvmt6KHy2rNPOdPUjwq5xOHY02+m+udwJTn0aNIox/rkskAvJTyTLGhPK6KgrUjlJUJpgmx/+wFiFIQ==}
+    peerDependencies:
+      '@types/react': ^19.2.10
+      '@types/react-dom': ^19.2.3
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-focus-scope@1.1.7':
     resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
     peerDependencies:
@@ -4259,6 +4782,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-id@1.1.4':
+    resolution: {integrity: sha512-TMQp2llA+RYn7JcjnrMnz7wN4pcVttPZnRZo52PLQsoLVKzNlVwUeHmfePgTgRluXFvlD3GD5g5MOVVTJCO0qA==}
+    peerDependencies:
+      '@types/react': ^19.2.10
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-label@2.1.7':
     resolution: {integrity: sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==}
     peerDependencies:
@@ -4298,6 +4830,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-portal@1.1.17':
+    resolution: {integrity: sha512-vKQLcWypUnwZVvfV7UkGahH2g6ySe8M8R+zYBwPrv5byZ9QAW6cQVvNKo7GgmD+p8aYb6D9JBuvy8/WhOno2wQ==}
+    peerDependencies:
+      '@types/react': ^19.2.10
+      '@types/react-dom': ^19.2.3
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-portal@1.1.9':
     resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
     peerDependencies:
@@ -4311,6 +4856,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-presence@1.1.10':
+    resolution: {integrity: sha512-3wyzCQ6+ubRA+D4uv9m95JYLXxmOHp05qjrkjeA7uKHHtjpPggQzc6DAb0URl7j67oR0K2foO4ip27TiX037Bw==}
+    peerDependencies:
+      '@types/react': ^19.2.10
+      '@types/react-dom': ^19.2.3
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-presence@1.1.5':
     resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
     peerDependencies:
@@ -4324,6 +4882,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-primitive@2.1.10':
+    resolution: {integrity: sha512-MucOnzh6hR5mid6VpkbglRAMYMjKLqRnGBbjXkzjK52fuQDd1qbkx78a5P40mkcnVXJdEVxm26E9OPAiUq7nBg==}
+    peerDependencies:
+      '@types/react': ^19.2.10
+      '@types/react-dom': ^19.2.3
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-primitive@2.1.3':
     resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
     peerDependencies:
@@ -4407,6 +4978,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-slot@1.3.3':
+    resolution: {integrity: sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q==}
+    peerDependencies:
+      '@types/react': ^19.2.10
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-callback-ref@1.1.1':
     resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
     peerDependencies:
@@ -4416,6 +4996,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-callback-ref@1.1.4':
+    resolution: {integrity: sha512-R6OUY2e2fA6Yn6s+VSx5KBV6Nx8LQEhu+cz7LCej18rQ1HLyg9PSC9jP/ZNx0o6FAIK9c0F1kHylzSxKsdlkrQ==}
+    peerDependencies:
+      '@types/react': ^19.2.10
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-controllable-state@1.2.2':
     resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
     peerDependencies:
@@ -4425,6 +5014,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-controllable-state@1.2.6':
+    resolution: {integrity: sha512-uEQJGT97ZA/TgP/Hydw47lHu+/vQj6z/0jA+WeTbK1o9Rx45GImjpD0tc3W5ad3D6XTSR6e1yEO0FvGq6WQfVQ==}
+    peerDependencies:
+      '@types/react': ^19.2.10
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-effect-event@0.0.2':
     resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
     peerDependencies:
@@ -4434,6 +5032,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-effect-event@0.0.5':
+    resolution: {integrity: sha512-7cshFL8HGS/7HEiHH+9kL9HBwp2sa9yX18Knwek6KYWmXwM7pegMgta2AXMQKI+rq3JnfSj9x8wYqFMTdG1Jgg==}
+    peerDependencies:
+      '@types/react': ^19.2.10
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-escape-keydown@1.1.1':
     resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
     peerDependencies:
@@ -4452,6 +5059,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-layout-effect@1.1.4':
+    resolution: {integrity: sha512-K20DkRkUwDnxEYMBPcg3Y6voLkEy5p5QQmszZgLngKKiC7dzBR/aEuK3w1qlx2JWDUNH6FluahYdgR3BP+QbYw==}
+    peerDependencies:
+      '@types/react': ^19.2.10
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-rect@1.1.1':
     resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
     peerDependencies:
@@ -4473,110 +5089,105 @@ packages:
   '@radix-ui/rect@1.1.1':
     resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
 
-  '@renovatebot/pep440@4.2.1':
-    resolution: {integrity: sha512-2FK1hF93Fuf1laSdfiEmJvSJPVIDHEUTz68D3Fi9s0IZrrpaEcj6pTFBTbYvsgC5du4ogrtf5re7yMMvrKNgkw==}
-    engines: {node: ^20.9.0 || ^22.11.0 || ^24, pnpm: ^10.0.0}
+  '@renovatebot/pep440@4.2.4':
+    resolution: {integrity: sha512-r+Pwj9ud/5QOOHoSsD7mWzU0Qkj105UPOyPwihGAtbNCl9pqnWkEDNRM5an63QvsFsS9tt+X3o+npT3AKBiTVg==}
+    engines: {node: ^20.9.0 || ^22.11.0 || ^24, pnpm: '>=10.0.0'}
 
   '@repobuddy/test@1.0.1':
     resolution: {integrity: sha512-eNXZ6Cfs18EGQtPS/H68E0GQyQeB+al5sPcMgb70553CE0vs5Y7jDdO8Csgk/CHiuPy/rCKdN33OvvkSiGaG+A==}
 
-  '@rolldown/binding-android-arm64@1.0.0-rc.17':
-    resolution: {integrity: sha512-s70pVGhw4zqGeFnXWvAzJDlvxhlRollagdCCKRgOsgUOH3N1l0LIxf83AtGzmb5SiVM4Hjl5HyarMRfdfj3DaQ==}
+  '@rolldown/binding-android-arm64@1.2.2':
+    resolution: {integrity: sha512-l7x215OGvo1s52JWmR8U/DAVzEDWBCIbTm28aeJV/WDTSHgcKXaZTuBT0hJMs5NggilfJTW3clZVvd24yfKJxA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@rolldown/binding-darwin-arm64@1.0.0-rc.17':
-    resolution: {integrity: sha512-4ksWc9n0mhlZpZ9PMZgTGjeOPRu8MB1Z3Tz0Mo02eWfWCHMW1zN82Qz/pL/rC+yQa+8ZnutMF0JjJe7PjwasYw==}
+  '@rolldown/binding-darwin-arm64@1.2.2':
+    resolution: {integrity: sha512-9u9Xv6c1AJZT0FfwH5vrMG5Jjcwhc1MlyrPu0XfTqkzsmqfks2M6W/o5XwAJgVVN/jHpqqngC1WevHKKTIUtIA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@rolldown/binding-darwin-x64@1.0.0-rc.17':
-    resolution: {integrity: sha512-SUSDOI6WwUVNcWxd02QEBjLdY1VPHvlEkw6T/8nYG322iYWCTxRb1vzk4E+mWWYehTp7ERibq54LSJGjmouOsw==}
+  '@rolldown/binding-darwin-x64@1.2.2':
+    resolution: {integrity: sha512-9W1mbGZAfW3oqd85bhBkmpyHCCzL1TeG/zFFP3vg7b0rlly8cxOcre5nXwz+LHazCwac2MNWgPdPCHndABjpWQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@rolldown/binding-freebsd-x64@1.0.0-rc.17':
-    resolution: {integrity: sha512-hwnz3nw9dbJ05EDO/PvcjaaewqqDy7Y1rn1UO81l8iIK1GjenME75dl16ajbvSSMfv66WXSRCYKIqfgq2KCfxw==}
+  '@rolldown/binding-freebsd-x64@1.2.2':
+    resolution: {integrity: sha512-0p1lhiCSCyaerFwtrdZQUx7NqGk6LQnaRKWX7tFQqwQgvX0rjM15cIkm3pax1UpEakK14C4mOxx/jSqCBdBRqQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.17':
-    resolution: {integrity: sha512-IS+W7epTcwANmFSQFrS1SivEXHtl1JtuQA9wlxrZTcNi6mx+FDOYrakGevvvTwgj2JvWiK8B29/qD9BELZPyXQ==}
+  '@rolldown/binding-linux-arm-gnueabihf@1.2.2':
+    resolution: {integrity: sha512-e+cOJXrJ2L3zx6YzqPg+f6Wbk3V1cKB8bOhbaYdVYN3DdquzNdRAmrbETz1qnt5yp/c7JNlNjmITiA2cVneQ7w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.17':
-    resolution: {integrity: sha512-e6usGaHKW5BMNZOymS1UcEYGowQMWcgZ71Z17Sl/h2+ZziNJ1a9n3Zvcz6LdRyIW5572wBCTH/Z+bKuZouGk9Q==}
+  '@rolldown/binding-linux-arm64-gnu@1.2.2':
+    resolution: {integrity: sha512-JsSMsj6sNat/MuhG5fnBD7QgbtpHKVe30x5/bAVirDHdhoQRXJkF6xc0Jqk8O4fiCUQAzMOoH9wZi3m60c8wtg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.17':
-    resolution: {integrity: sha512-b/CgbwAJpmrRLp02RPfhbudf5tZnN9nsPWK82znefso832etkem8H7FSZwxrOI9djcdTP7U6YfNhbRnh7djErg==}
+  '@rolldown/binding-linux-arm64-musl@1.2.2':
+    resolution: {integrity: sha512-B5G/zJdHaoJn9vD50eGHWkiWfmq8Uhi3IiLPJTzmZTrAalk1bztUikSXo0qga18ibE0IXboyeMUnhPjhAJ45wQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.17':
-    resolution: {integrity: sha512-4EII1iNGRUN5WwGbF/kOh/EIkoDN9HsupgLQoXfY+D1oyJm7/F4t5PYU5n8SWZgG0FEwakyM8pGgwcBYruGTlA==}
+  '@rolldown/binding-linux-ppc64-gnu@1.2.2':
+    resolution: {integrity: sha512-6mC/awzKka8W6EoekjegpfGkjz8jXWDX63pqu/HYVpyKtZfu65Jsh4QAH3Kej3CAv/c1oGX7psTmFEbr0mDxLA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.17':
-    resolution: {integrity: sha512-AH8oq3XqQo4IibpVXvPeLDI5pzkpYn0WiZAfT05kFzoJ6tQNzwRdDYQ45M8I/gslbodRZwW8uxLhbSBbkv96rA==}
+  '@rolldown/binding-linux-s390x-gnu@1.2.2':
+    resolution: {integrity: sha512-412MX9fJLdA1IK28EZnc8jYv2HRTleOZgfLQumJ5zy7OeJLZlg/CETwFaXjNmGVxG51cFHpKLqb5LKvBC+HsHA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.17':
-    resolution: {integrity: sha512-cLnjV3xfo7KslbU41Z7z8BH/E1y5mzUYzAqih1d1MDaIGZRCMqTijqLv76/P7fyHuvUcfGsIpqCdddbxLLK9rA==}
+  '@rolldown/binding-linux-x64-gnu@1.2.2':
+    resolution: {integrity: sha512-Q/+HI/ToJafZ1iCqGgVQXUEkIjufHCTF0gBQ2a5o3cg7GJ2h0qyq3nvvSmU+bGda2/7ygXpTY4TM6gO9OhQ0ZA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@rolldown/binding-linux-x64-musl@1.0.0-rc.17':
-    resolution: {integrity: sha512-0phclDw1spsL7dUB37sIARuis2tAgomCJXAHZlpt8PXZ4Ba0dRP1e+66lsRqrfhISeN9bEGNjQs+T/Fbd7oYGw==}
+  '@rolldown/binding-linux-x64-musl@1.2.2':
+    resolution: {integrity: sha512-ZKp/w41n6wCvxzxQHtQSbuphfX3Y4cCvbjkKHusrLx4lh+JWLTU7StSltO/DKARISzbj368d+qUaCjI8K2wzXw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@rolldown/binding-openharmony-arm64@1.0.0-rc.17':
-    resolution: {integrity: sha512-0ag/hEgXOwgw4t8QyQvUCxvEg+V0KBcA6YuOx9g0r02MprutRF5dyljgm3EmR02O292UX7UeS6HzWHAl6KgyhA==}
+  '@rolldown/binding-openharmony-arm64@1.2.2':
+    resolution: {integrity: sha512-pxE6xD4KS3eAROkKK5yrhB9/3+vhlhVGMvlQLbdpzrBGDbKrnzx3RLwPaHvasLo6jgaiBLn7e04Df9C4tYhjmA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-rc.17':
-    resolution: {integrity: sha512-LEXei6vo0E5wTGwpkJ4KoT3OZJRnglwldt5ziLzOlc6qqb55z4tWNq2A+PFqCJuvWWdP53CVhG1Z9NtToDPJrA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [wasm32]
-
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.17':
-    resolution: {integrity: sha512-gUmyzBl3SPMa6hrqFUth9sVfcLBlYsbMzBx5PlexMroZStgzGqlZ26pYG89rBb45Mnia+oil6YAIFeEWGWhoZA==}
+  '@rolldown/binding-win32-arm64-msvc@1.2.2':
+    resolution: {integrity: sha512-4MqEue5re+xIZzAWsB8sj0P1kqZySWqIuN4t6QaIO/YA6SFwySOLruvWQFzfmqk8LBK2P30KCSJwf6mJCZZ5/A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.17':
-    resolution: {integrity: sha512-3hkiolcUAvPB9FLb3UZdfjVVNWherN1f/skkGWJP/fgSQhYUZpSIRr0/I8ZK9TkF3F7kxvJAk0+IcKvPHk9qQg==}
+  '@rolldown/binding-win32-x64-msvc@1.2.2':
+    resolution: {integrity: sha512-NweNxxD0Nf9t8v7kodun45Ijp3EIwYY+uydPP6qBEYvfBqhIjN6dZMzlQja3tqX/aLs3F3Uz+AxDpKgRhpOZQg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
 
-  '@rolldown/pluginutils@1.0.0-rc.17':
-    resolution: {integrity: sha512-n8iosDOt6Ig1UhJ2AYqoIhHWh/isz0xpicHTzpKBeotdVsTEcxsSA/i3EVM7gQAj0rU27OLAxCjzlj15IWY7bg==}
+  '@rolldown/pluginutils@1.0.1':
+    resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
 
   '@rollup/plugin-inject@5.0.5':
     resolution: {integrity: sha512-2+DEJbNBoPROPkgTDNe8/1YXWcqxbN5DTjASVIOx8HS+pITXushyNiBV56RB08zuptzz8gT3YfkqriTBVycepg==}
@@ -4587,8 +5198,8 @@ packages:
       rollup:
         optional: true
 
-  '@rollup/pluginutils@5.3.0':
-    resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
+  '@rollup/pluginutils@5.4.0':
+    resolution: {integrity: sha512-MfPp06CjRLfXQ3wY0R8vJDYBy/MvVcc9OulEfR0B8Iv9ko+GCNaRZ+EpJYFl27LhKsZK0o420sYCRHCjfCgeUg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
@@ -4734,13 +5345,10 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@rtsao/scc@1.1.0':
-    resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
-
-  '@rushstack/node-core-library@5.23.1':
-    resolution: {integrity: sha512-wlKmIKIYCKuCASbITvOxLZXepPbwXvrv7S6ig6XNWFchSyhL/E2txmVXspHY49Wu2dzf7nI27a2k/yV5BA3EiA==}
+  '@rushstack/node-core-library@5.23.3':
+    resolution: {integrity: sha512-f6uuza7Um65bwsIJgf0MRs7IPA5IG+A+zs1AYGQvpZmLjtTGdfHowhQw4kwF0pPhJCrU4UHNhK8Qa6tLygYZCA==}
     peerDependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
     peerDependenciesMeta:
       '@types/node':
         optional: true
@@ -4748,7 +5356,7 @@ packages:
   '@rushstack/problem-matcher@0.2.1':
     resolution: {integrity: sha512-gulfhBs6n+I5b7DvjKRfhMGyUejtSgOHTclF/eONr8hcgF1APEDjhxIsfdUYYMzC3rvLwGluqLjbwCFZ8nxrog==}
     peerDependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
     peerDependenciesMeta:
       '@types/node':
         optional: true
@@ -4756,135 +5364,135 @@ packages:
   '@rushstack/rig-package@0.7.3':
     resolution: {integrity: sha512-aAA518n6wxxjCfnTAOjQnm7ngNE0FVHxHAw2pxKlIhxrMn0XQjGcXKF0oKWpjBgJOmsaJpVob/v+zr3zxgPWuA==}
 
-  '@rushstack/terminal@0.24.0':
-    resolution: {integrity: sha512-8ZQS4MMaGsv27EXCBiH7WMPkRZrffeDoIevs6z9TM5dzqiY6+Hn4evfK/G+gvgBTjfvfkHIZPQQmalmI2sM4TQ==}
+  '@rushstack/terminal@0.24.2':
+    resolution: {integrity: sha512-KB7PpvzDyKMw/RGU3TxOwxTs3OwZ4gq6+WHlTJN/JfQH4ezliNtWIqver78jTaAJyz/ZAAlJGH7a/M1WyFLFSw==}
     peerDependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
     peerDependenciesMeta:
       '@types/node':
         optional: true
 
-  '@rushstack/ts-command-line@5.3.9':
-    resolution: {integrity: sha512-GIHqU+sRGQ3LGWAZu1O+9Yh++qwtyNIIGuNbcWHJjBTm2qRez0cwINUHZ+pQLR8UuzZDcMajrDaNbUYoaL/XtQ==}
+  '@rushstack/ts-command-line@5.3.12':
+    resolution: {integrity: sha512-Vg2n24arSf7JvUNga2DMHYTbxnVq9L5OtVCp4Gfr8YC/kmL/bmdR8FQhGcpMzMYNY9Vdw3+TaimG11Sf+z1Tpw==}
 
-  '@sentry-internal/browser-utils@10.50.0':
-    resolution: {integrity: sha512-42bxyRTxnCmYlWnvz4CxikuQNanw8UNma2WJrtxJ0f1MAJV2GhQGSHDLnA+lvFlmiz6qct3pfen/NXGyOTegTA==}
+  '@sentry/browser-utils@10.67.0':
+    resolution: {integrity: sha512-HUzaf0xAnPAB+OHBkD7N1Py+CTbD5InHulQ/pdhX4JctWtxuwD8odMD1LzdPnW8J6gVHlDVvcVBR8mXMZYSLSw==}
     engines: {node: '>=18'}
 
-  '@sentry-internal/browser-utils@10.51.0':
-    resolution: {integrity: sha512-lNKBS4P7RUvf1niojXQWe9bU3gnBUCbST4Dj0pSiyat1N96cXVyHkeE+uGxowD0RrVWhs+kGHiVX3FcmRWF6sA==}
+  '@sentry/browser-utils@10.68.0':
+    resolution: {integrity: sha512-be8VtdjCngKc77cstJeV+gO15iH+blyXpBDk8yOehmtX4BkFO33mfTMNCWVR2LA0oOxjIHWRAhf77fIUEhzxPg==}
     engines: {node: '>=18'}
 
-  '@sentry-internal/feedback@10.50.0':
-    resolution: {integrity: sha512-0k9XZF0wn86f77mIO2U3gNNyDZooy139CnEanRzHinrN106vVzvBZ6TUEQoHtoO1fqQxr+nWWVrqV/PXUqk47w==}
+  '@sentry/browser@10.67.0':
+    resolution: {integrity: sha512-/ZhsAvte4rYhg0A0RtSFFgAgXhyMOfQIeOAfMfptN+X6IVSYOfkA9jtrP+Ej4+6vlaUFWRir1HweF56y63dEEA==}
     engines: {node: '>=18'}
 
-  '@sentry-internal/feedback@10.51.0':
-    resolution: {integrity: sha512-bCM95bcpphx28e6aU0bwRLxOgwosYsdNzezM1sM0pVOkb0TB3hDFRamramVDK+/Hp1o8qmRxS4c5w/A7YBZGkA==}
+  '@sentry/browser@10.68.0':
+    resolution: {integrity: sha512-8xVgk7oG2lajXnbXF6a7H1xMZ/U6icqSldHGzQu1+bajfrK8Gan9ULG/Xsj1VM1LlNeK6/7znDJ3u1jgvIwznw==}
     engines: {node: '>=18'}
 
-  '@sentry-internal/replay-canvas@10.50.0':
-    resolution: {integrity: sha512-jx6RKBmcJSWdI92qDGS/sBv1w+7Cww879Z/moX7bw7ipHa/Ts3iDcB3rgZwvhmi17U+mvYsbJeL2DXkPo3TjPw==}
-    engines: {node: '>=18'}
-
-  '@sentry-internal/replay-canvas@10.51.0':
-    resolution: {integrity: sha512-8PW1Pp+Yl3lPwYqhBCr5SgkuhDanu9ZLzUqD2bPKL/ElqbM2eDVIWxq4z4ZzePrmZa6IcCjTv6sVQJ7Z4dLyLA==}
-    engines: {node: '>=18'}
-
-  '@sentry-internal/replay@10.50.0':
-    resolution: {integrity: sha512-51FYNfnvVLAWw1rrEWPFfwHuMRb9mkVCFGA4J9/un7SpeGBsQDziGB0Di4fsCxI7+EdSBpfLHPF0csKtCCw0oQ==}
-    engines: {node: '>=18'}
-
-  '@sentry-internal/replay@10.51.0':
-    resolution: {integrity: sha512-jCpI5HXSwK6ZT2HX70+mDRciAocHzSiDk4DTgvzV69Wvd+Ei5WLgE+d39eaEPsm8lUC0Ydntb5sJIB6uG9D4bw==}
-    engines: {node: '>=18'}
-
-  '@sentry/babel-plugin-component-annotate@5.2.1':
-    resolution: {integrity: sha512-QQ9AL5EXIbSK26ObLVtiU6l3tCUdpGSJ/6VwDkPhC3qvtoksSlcoU9Yzm7XC0NBcvu1N2abL5R7gckKGZ4JewQ==}
+  '@sentry/bundler-plugins@10.65.0':
+    resolution: {integrity: sha512-AYgv31l4wY/CwYAD/2Og59RT+TNjvhatcLOrEe5tFOpi9VcPAQ4xfPZIM6fXYGawofT52p6LhUECNSfNkNnc7Q==}
     engines: {node: '>= 18'}
+    peerDependencies:
+      rollup: '>=3.2.0'
+      webpack: '>=5.0.0'
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+      webpack:
+        optional: true
 
-  '@sentry/browser@10.50.0':
-    resolution: {integrity: sha512-1f6rAvET6myiTaSeYqvaaBwvq1LfxqWjAPIoAW/NVC9bPMkeEcuvgDajHrnZMrBeWoJ81NMyoLkyX+iOc7MoFA==}
-    engines: {node: '>=18'}
-
-  '@sentry/browser@10.51.0':
-    resolution: {integrity: sha512-Zdc0sKfenxUtW/OGhtJ7xHFN44bXR7YqxJ1zBDzlZfW0nTbeTTUZBq9z5NUw6qdS0Vs/i3V4qzAKTbRKWfqSEA==}
-    engines: {node: '>=18'}
-
-  '@sentry/bundler-plugin-core@5.2.1':
-    resolution: {integrity: sha512-uXb+TOZKXxm2STsP3iR70Jh/yYHwlHOvql7w/bUVYgDyiB/1Mv0D6oNGS0kelsgBsBwCq3ngyJYlyNy3oM1pPw==}
-    engines: {node: '>= 18'}
-
-  '@sentry/cli-darwin@2.58.5':
-    resolution: {integrity: sha512-lYrNzenZFJftfwSya7gwrHGxtE+Kob/e1sr9lmHMFOd4utDlmq0XFDllmdZAMf21fxcPRI1GL28ejZ3bId01fQ==}
+  '@sentry/cli-darwin@2.58.6':
+    resolution: {integrity: sha512-udAVvcyfNa0R+95GvPz/+43/N3TC0TYKdkQ7D7jhPSzbcMc7l2fxRNN5yB3UpCA5fWFnW4toeaqwDBhb/Wh3LA==}
     engines: {node: '>=10'}
     os: [darwin]
 
-  '@sentry/cli-linux-arm64@2.58.5':
-    resolution: {integrity: sha512-/4gywFeBqRB6tR/iGMRAJ3HRqY6Z7Yp4l8ZCbl0TDLAfHNxu7schEw4tSnm2/Hh9eNMiOVy4z58uzAWlZXAYBQ==}
+  '@sentry/cli-linux-arm64@2.58.6':
+    resolution: {integrity: sha512-q8mEcNNmeXMy5i+jWT30TVpH7LcP4HD21CD5XRSPAd/a912HF6EpK0ybf/1USO14WOhoXbAGi9txwaWabSe33g==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux, freebsd, android]
 
-  '@sentry/cli-linux-arm@2.58.5':
-    resolution: {integrity: sha512-KtHweSIomYL4WVDrBrYSYJricKAAzxUgX86kc6OnlikbyOhoK6Fy8Vs6vwd52P6dvWPjgrMpUYjW2M5pYXQDUw==}
+  '@sentry/cli-linux-arm@2.58.6':
+    resolution: {integrity: sha512-pD0LAt5PcUzAinBwvDqc66x9+2CabHEv486yP0gRjWO7SakbaxmfVq/EXd8VLq/Tzi39LAu422UYK1lpW3MILw==}
     engines: {node: '>=10'}
     cpu: [arm]
     os: [linux, freebsd, android]
 
-  '@sentry/cli-linux-i686@2.58.5':
-    resolution: {integrity: sha512-G7261dkmyxqlMdyvyP06b+RTIVzp1gZNgglj5UksxSouSUqRd/46W/2pQeOMPhloDYo9yLtCN2YFb3Mw4aUsWw==}
+  '@sentry/cli-linux-i686@2.58.6':
+    resolution: {integrity: sha512-q8vNJi1eOV/4vxAFWBsEwLHoSYapaZHIf4j76KJGJXFKTkEbsjCOOsKbwUIBTQQhRgV4DFWh3ryfsPS/que4Kg==}
     engines: {node: '>=10'}
     cpu: [x86, ia32]
     os: [linux, freebsd, android]
 
-  '@sentry/cli-linux-x64@2.58.5':
-    resolution: {integrity: sha512-rP04494RSmt86xChkQ+ecBNRYSPbyXc4u0IA7R7N1pSLCyO74e5w5Al+LnAq35cMfVbZgz5Sm0iGLjyiUu4I1g==}
+  '@sentry/cli-linux-x64@2.58.6':
+    resolution: {integrity: sha512-DZu956Mhi3ZRjTBe1WdbGV46ldVbA8d2rgp/fh51GsI25zjBHah4wZnPTSzpc+YqxU6pJpg579B/r3jrIK530Q==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux, freebsd, android]
 
-  '@sentry/cli-win32-arm64@2.58.5':
-    resolution: {integrity: sha512-AOJ2nCXlQL1KBaCzv38m3i2VmSHNurUpm7xVKd6yAHX+ZoVBI8VT0EgvwmtJR2TY2N2hNCC7UrgRmdUsQ152bA==}
+  '@sentry/cli-win32-arm64@2.58.6':
+    resolution: {integrity: sha512-nj0Ff/kmAB73EPDhR8B4O9r+NUHK5GkPCkGWC+kXVemqAJWL5jcJ5KdxG0l/S0z6RoEoltID8/43/B+TaMlT7A==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [win32]
 
-  '@sentry/cli-win32-i686@2.58.5':
-    resolution: {integrity: sha512-EsuboLSOnlrN7MMPJ1eFvfMDm+BnzOaSWl8eYhNo8W/BIrmNgpRUdBwnWn9Q2UOjJj5ZopukmsiMYtU/D7ml9g==}
+  '@sentry/cli-win32-i686@2.58.6':
+    resolution: {integrity: sha512-WNZiDzPbgsEMQWq4avsQ391v/xWKJDIWWWo9GYl+N/w5qcYKkoDW7wQG7T9FasI6ENn68phChTOAPXXxbfAdOg==}
     engines: {node: '>=10'}
     cpu: [x86, ia32]
     os: [win32]
 
-  '@sentry/cli-win32-x64@2.58.5':
-    resolution: {integrity: sha512-IZf+XIMiQwj+5NzqbOQfywlOitmCV424Vtf9c+ep61AaVScUFD1TSrQbOcJJv5xGxhlxNOMNgMeZhdexdzrKZg==}
+  '@sentry/cli-win32-x64@2.58.6':
+    resolution: {integrity: sha512-R35WJ17oF4D2eqI1DR2sQQqr0fjRTt5xoP16WrTu91XM2lndRMFsnjh+/GttbxapLCBNlrjzia99MJ0PZHZpgA==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [win32]
 
-  '@sentry/cli@2.58.5':
-    resolution: {integrity: sha512-tavJ7yGUZV+z3Ct2/ZB6mg339i08sAk6HDkgqmSRuQEu2iLS5sl9HIvuXfM6xjv8fwlgFOSy++WNABNAcGHUbg==}
+  '@sentry/cli@2.58.6':
+    resolution: {integrity: sha512-baBcNPLLfUi9WuL+Tpri9BFaAdvugZIKelC5X0tt0Zdy+K0K+PCVSrnNmwMWU/HyaF/SEv6b6UHnXIdqanBlcg==}
     engines: {node: '>= 10'}
     hasBin: true
 
-  '@sentry/core@10.50.0':
-    resolution: {integrity: sha512-J4A+vzUO3adl0TkFCjaN1+4miamrjHiEIYuLHiuu1lmAjq5WIVw32ObvAh4yMwNtxyaEMosTrrh5M6f12XSJFg==}
+  '@sentry/conventions@0.15.1':
+    resolution: {integrity: sha512-ZLP8bRdMON3prWE2tJyImuYscCxdcJeIPIhrOs/rgyFm3C1nCh1B6gdvPj3AZ5zW08oSFFCsq7T+tYEW3h8MNA==}
+    engines: {node: '>=14'}
+
+  '@sentry/conventions@0.16.0':
+    resolution: {integrity: sha512-fO9PLmHdVURcSPUpWCItWAtgKiMwGdJHbovoSEyLplX5sxs2ugvI4CBPTrkkgqhObnZOD0CnWBKDzSVQYBKEyQ==}
+    engines: {node: '>=14'}
+
+  '@sentry/core@10.65.0':
+    resolution: {integrity: sha512-3aqtmM5NgNGo45BNaaBzi0LPQZAw//NEL4HKS5fXm12pJMa4KEkze8DEKnkTEIrGnWaOJKamecHKlnNg/Mqf/Q==}
     engines: {node: '>=18'}
 
-  '@sentry/core@10.51.0':
-    resolution: {integrity: sha512-Y45V/YXvVLEXmOdkbD1oG1gkRWFi9guCEGg3PlIlIpRjAbZUrvLGgjRJIc1E7XpSzmOnWbs5BbUxMv4PDaPj2w==}
+  '@sentry/core@10.67.0':
+    resolution: {integrity: sha512-b6U3pJ8AUvN9aouq0vl+VZI8KT8RslBsfGMFuNwRr313zOmdmFJBZqTiUw9VGgJ2jGKxLO9alm9rlxBfX4hf+w==}
     engines: {node: '>=18'}
 
-  '@sentry/electron@7.13.0':
-    resolution: {integrity: sha512-zW/1c9fKafCZsvhRRp9mIDH9bSvzBiIUwoN087zDDHc0vatVsqqai8nUk0bUewwYZY4Inia7r5w+kPWi8LXZzg==}
+  '@sentry/core@10.68.0':
+    resolution: {integrity: sha512-5Amhx8ltVz7vb1bRGyf3c4J69/iHW8R/H+SJxTRILHlsSOBrnVVc/IQEYDC6PTRdRdZ3x2u7RVjxZi2Mhe525g==}
+    engines: {node: '>=18'}
+
+  '@sentry/electron@7.16.0':
+    resolution: {integrity: sha512-GgnsAGynr1IKfakRuW5AGlxQsIZi0cFUyzcn9ekrYy1cIyb85piVLN5u7W9pXzSzKopaGrxXBWubPBSRagyXjA==}
     peerDependencies:
-      '@sentry/node-native': 10.50.0
+      '@sentry/node-native': 10.67.0
     peerDependenciesMeta:
       '@sentry/node-native':
         optional: true
 
-  '@sentry/node-core@10.50.0':
-    resolution: {integrity: sha512-Eb1BYf4Lc7ZYmdX3acKP6SgyGikrBA370gbGHaWI5jRu7G7vig8sIu1ghPmY5AlvqBPOetado7GniXr6fAXbTw==}
+  '@sentry/feedback@10.67.0':
+    resolution: {integrity: sha512-I4ML2/SF3enwikb6ZSoRiqolQrx0zSzTSnUgwCmugICF/jpHW0th1pCray9R+t1Zzibw/Dpj4t/DNXaSDRa2MA==}
+    engines: {node: '>=18'}
+
+  '@sentry/feedback@10.68.0':
+    resolution: {integrity: sha512-XbdcXiBnpC3vgw46eHOPeD/ZQ+XzluP75ubdUcaPDW02hCh2nsdXiwjZ2DBImbpvIpTbJgjHf/sIlHWvcZJ2Mg==}
+    engines: {node: '>=18'}
+
+  '@sentry/node-core@10.67.0':
+    resolution: {integrity: sha512-dBHHRwZyan1pOnFJ+sNBvR8TkXbZAfZU/jpxmALS3JZ2/8AGR7cQKL+b7SleKuJ7iUDZyklN3Nqi0i5JkcA+HA==}
     engines: {node: '>=18'}
     peerDependencies:
       '@opentelemetry/api': ^1.9.0
@@ -4892,7 +5500,6 @@ packages:
       '@opentelemetry/exporter-trace-otlp-http': '>=0.57.0 <1'
       '@opentelemetry/instrumentation': '>=0.57.1 <1'
       '@opentelemetry/sdk-trace-base': ^1.30.1 || ^2.1.0
-      '@opentelemetry/semantic-conventions': ^1.39.0
     peerDependenciesMeta:
       '@opentelemetry/api':
         optional: true
@@ -4904,24 +5511,41 @@ packages:
         optional: true
       '@opentelemetry/sdk-trace-base':
         optional: true
-      '@opentelemetry/semantic-conventions':
-        optional: true
 
-  '@sentry/node@10.50.0':
-    resolution: {integrity: sha512-TvwzFQu8MGKzMQ2/tqxcNzFA8UG2kKTB+GDmA4uOzx3+GT849YZRRSJzEXCmYhk1teVd2fbmgqyYY2nyLF5a+Q==}
+  '@sentry/node@10.67.0':
+    resolution: {integrity: sha512-SFKpZGqOCEFSmP93NdDP6ikZp4NS7A/JR8+2ofK3jF6Y9Vyox7pX0pxdOnPLpFcPtMybMahfWqSAWJvsFs4RmA==}
     engines: {node: '>=18'}
 
-  '@sentry/opentelemetry@10.50.0':
-    resolution: {integrity: sha512-axn3pgDPveGdaMUC0abMCmFN7ux2pA5ebPufCef4lMIsyg7BBQvaEJ+vE19wjstMaBCAJGsdZlL3eeP2rtgRMw==}
+  '@sentry/opentelemetry@10.67.0':
+    resolution: {integrity: sha512-oLTOrAK1rOqmYRktOJZwz37B1seXPx1W2FTMVtzTVNjMFA/LZwGzePeZzhUOgzZgfLHixMd/ceWtGqoxAndcjQ==}
     engines: {node: '>=18'}
     peerDependencies:
       '@opentelemetry/api': ^1.9.0
       '@opentelemetry/core': ^1.30.1 || ^2.1.0
       '@opentelemetry/sdk-trace-base': ^1.30.1 || ^2.1.0
-      '@opentelemetry/semantic-conventions': ^1.39.0
 
-  '@sentry/webpack-plugin@5.2.1':
-    resolution: {integrity: sha512-ZGxwCkszFHdk9N11XIbAyTTsJsGUKHMYEXMRLUwPLi+iKi+b+YuXLBg7rlxe6Nd3M0i7xWy3gz6jcW7jeqEfIw==}
+  '@sentry/replay-canvas@10.67.0':
+    resolution: {integrity: sha512-neNA4T6MFtZzMdKYetiR+LZd9BNSd0q2szMn0wk+A15PqHE/IN7a34V6JZc9rCtmzB0wldh0eWGOBb49MSNKjA==}
+    engines: {node: '>=18'}
+
+  '@sentry/replay-canvas@10.68.0':
+    resolution: {integrity: sha512-HusYcr+He+ohnUDHunYrc5St6vdDnBXpUAndnT5ReyUMVSCiWKfY3paXowU/0787HwYfxdcpZgwC5u79+XbEIg==}
+    engines: {node: '>=18'}
+
+  '@sentry/replay@10.67.0':
+    resolution: {integrity: sha512-nkEUgPCR82EcyJkCf3XCE9H0R5KisCqyCAaSGxe7NpAoQbvASHx4MUNgXVAn+D0M494gvPZh6lFH7JgzqTcSqQ==}
+    engines: {node: '>=18'}
+
+  '@sentry/replay@10.68.0':
+    resolution: {integrity: sha512-ZoG2n16vbkx4GWSCnLIqUUN9xlUmccQFbQ2US2rhruQeHTUnHl/ukr8NHOQXZaEbwKyMkX9bEMwfmZHJm+wSTQ==}
+    engines: {node: '>=18'}
+
+  '@sentry/server-utils@10.67.0':
+    resolution: {integrity: sha512-GQ9t+RSTx5s3b/aZrLFuL4nrwPLMah5NiZk5cjxJmgmOSgm3nMdO8gdqCedDch5B13F3YsxtaQYjSJnzLz8M5A==}
+    engines: {node: '>=18'}
+
+  '@sentry/webpack-plugin@5.4.0':
+    resolution: {integrity: sha512-J3a0BvUZ75Qxy+v/Ap3Hx4ZEcSjlPHZ/jDtxdRhXQCyNeEb8xq0uUBTI9VLtGk2eNeNucOxOEJ5ngqdNjnEH/A==}
     engines: {node: '>= 18'}
     peerDependencies:
       webpack: '>=5.0.0'
@@ -4962,29 +5586,29 @@ packages:
   '@shikijs/vscode-textmate@10.0.2':
     resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
 
-  '@sigstore/bundle@4.0.0':
-    resolution: {integrity: sha512-NwCl5Y0V6Di0NexvkTqdoVfmjTaQwoLM236r89KEojGmq/jMls8S+zb7yOwAPdXvbwfKDlP+lmXgAL4vKSQT+A==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  '@sigstore/bundle@5.0.0':
+    resolution: {integrity: sha512-wefjygudENbzbQMks1t5u34EP0fFoD0XvaEP7DOUP/sXKvogzEJYFw5E6pegGyp3onGWzVEYKVa3bNZWyTYX+A==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
 
-  '@sigstore/core@3.2.0':
-    resolution: {integrity: sha512-kxHrDQ9YgfrWUSXU0cjsQGv8JykOFZQ9ErNKbFPWzk3Hgpwu8x2hHrQ9IdA8yl+j9RTLTC3sAF3Tdq1IQCP4oA==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  '@sigstore/core@4.0.0':
+    resolution: {integrity: sha512-uFGJpKiMCKXV+61jsxQ0ECfr0wjDP+8qnT6pgfsOXbIk0j/KPfBSp2Dks/YcNcT/S4e3P267JKPL6gAwygJRuw==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
 
   '@sigstore/protobuf-specs@0.5.0':
     resolution: {integrity: sha512-MM8XIwUjN2bwvCg1QvrMtbBmpcSHrkhFSCu1D11NyPvDQ25HEc4oG5/OcQfd/Tlf/OxmKWERDj0zGE23jQaMwA==}
     engines: {node: ^18.17.0 || >=20.5.0}
 
-  '@sigstore/sign@4.1.1':
-    resolution: {integrity: sha512-Hf4xglukg0XXQ2RiD5vSoLjdPe8OBUPA8XeVjUObheuDcWdYWrnH/BNmxZCzkAy68MzmNCxXLeurJvs6hcP2OQ==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  '@sigstore/sign@5.0.0':
+    resolution: {integrity: sha512-DSFivqz9/i5AkwZ5fq0YdjaJlc4o1WeS2Zffon0kqtChx0vy4W9NOjkEet9bF2vkzOufX72eVH8kZBIGtcBp1w==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
 
-  '@sigstore/tuf@4.0.2':
-    resolution: {integrity: sha512-TCAzTy0xzdP79EnxSjq9KQ3eaR7+FmudLC6eRKknVKZbV7ZNlGLClAAQb/HMNJ5n2OBNk2GT1tEmU0xuPr+SLQ==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  '@sigstore/tuf@5.0.0':
+    resolution: {integrity: sha512-Zyqg9tcHps3uRAlKHLNmsW4ohsUZAjb9G+31r7lg0ICh/JOcadzmJsIRdjKljlRHpaR0K4aJ2kXXIdywdcdMlA==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
 
-  '@sigstore/verify@3.1.0':
-    resolution: {integrity: sha512-mNe0Iigql08YupSOGv197YdHpPPr+EzDZmfCgMc7RPNaZTw5aLN01nBl6CHJOh3BGtnMIj83EeN4butBchc8Ag==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  '@sigstore/verify@4.0.0':
+    resolution: {integrity: sha512-yYQTYQkjkdp69M5f+XGOhX45RvgCwh0cz6r++hGRHi7G/NVPmIK7ISxY73fM5WVerIiYe/ZbVlMu47dDodBP6A==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
 
   '@sinclair/typebox@0.34.49':
     resolution: {integrity: sha512-brySQQs7Jtn0joV8Xh9ZV/hZb9Ozb0pmazDIASBkYKCjXrXU3mpcFahmK/z4YDhGkQvP9mWJbVyahdtU5wQA+A==}
@@ -5000,8 +5624,8 @@ packages:
   '@sinonjs/commons@3.0.1':
     resolution: {integrity: sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==}
 
-  '@sinonjs/fake-timers@15.1.1':
-    resolution: {integrity: sha512-cO5W33JgAPbOh07tvZjUOJ7oWhtaqGHiZw+11DPbyqh2kHTBc3eF/CjJDeQ4205RLQsX6rxCuYOroFQwl7JDRw==}
+  '@sinonjs/fake-timers@15.4.0':
+    resolution: {integrity: sha512-DsG+8/LscQIQg68J6Ef3dv10u6nVyetYn923s3/sus5eaGfTo1of5WMZSLf0UJc9KDuKPilPH0UDJCjvNbDNCA==}
 
   '@sorb/threadnet-call-embedded@0.19.2-threadnet.12':
     resolution: {integrity: sha512-0x9nzkzGXFFVsXXI3LvLdWNXmjzJFsijh29yVXwrtFv/FQXgzwY8BttyMCCFHnEkp4VXtu7KeQfRCEzJB7rdIQ==, tarball: https://rohana.axion1337.de/api/packages/sorb/npm/%40sorb%2Fthreadnet-call-embedded/-/0.19.2-threadnet.12/threadnet-call-embedded-0.19.2-threadnet.12.tgz}
@@ -5009,18 +5633,18 @@ packages:
   '@standard-schema/spec@1.1.0':
     resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
-  '@storybook/addon-a11y@10.3.6':
-    resolution: {integrity: sha512-cbwXIT5CeHZ9AFbTKQ6YB7Ct6TAl/kKOgALbvzzVtFfRvm51JYygGaiJaB7PbPWn9wgJP2olJcFt+erlEc6cRw==}
+  '@storybook/addon-a11y@10.5.5':
+    resolution: {integrity: sha512-nsMnSRe7pzepXIkUUqI/rL7sp8juXOluyypU4Dz0UuYHhw/cKaxfzuO+3WJN5EtEr/gcnKYb4awxH/duPGavUw==}
     peerDependencies:
-      storybook: ^10.3.6
+      storybook: ^10.5.5
 
-  '@storybook/addon-designs@11.1.3':
-    resolution: {integrity: sha512-AK+ij478Y6S16TCNPwm7H90OipVe2wZApOlHjC6qDvMW61zyd4yP1icrRtjehSadw5SCoz8HcAmIYfQCOY6E4A==}
+  '@storybook/addon-designs@11.1.4':
+    resolution: {integrity: sha512-4NWq8iiCbAODyfbMXKlOmMcz+xLcfIKzxC0UMdWq2M4W9SkTwzX7qr/m+2+a0dqddAaZvOZ9zfIrZa5suHC1ow==}
     peerDependencies:
-      '@storybook/addon-docs': ^10.0.0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0
+      '@storybook/addon-docs': ^0.0.0-0 || ^10.0.0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0 || ^10.5.0-0 || ^10.6.0-0
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      storybook: ^10.0.0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0
+      storybook: ^0.0.0-0 || ^10.0.0 || ^10.0.0-0 || ^10.1.0-0 || ^10.2.0-0 || ^10.5.0-0 || ^10.6.0-0
     peerDependenciesMeta:
       '@storybook/addon-docs':
         optional: true
@@ -5029,18 +5653,22 @@ packages:
       react-dom:
         optional: true
 
-  '@storybook/addon-docs@10.3.6':
-    resolution: {integrity: sha512-TvIdADVPtauxW0LzXIpIv7X6GxwetorhyNh+6+7MHC27XSBCWVxxRUwL63YeLlHTuXsIk0quG3b1xgwVRzWOJA==}
+  '@storybook/addon-docs@10.5.5':
+    resolution: {integrity: sha512-0YpKlimS4XE0kQ8Maa5coeefQxdyDrBHg1wOP3WTPuBe4FolFSCDveR0ge2+vuUBk+fZfn2+l+3Q2jmAWaRGDg==}
     peerDependencies:
-      storybook: ^10.3.6
+      '@types/react': ^19.2.10
+      storybook: ^10.5.5
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
 
-  '@storybook/addon-vitest@10.3.6':
-    resolution: {integrity: sha512-HXj7RrPJY+xzoNjL+xZu2oLw1fI5BA87Noh1NAXMPuECHR5R5fuRM/tTsJuIGXHFMO06FjSi/rekDIfCj1fL4w==}
+  '@storybook/addon-vitest@10.5.5':
+    resolution: {integrity: sha512-Ymq9ErkSkYiIDuqpJ2+hE5GCQ5J6TCLOWhutqArvwaeAO+HAibM82XNExpJ1/kvPqk9y961GDPkv2W15I88JIw==}
     peerDependencies:
       '@vitest/browser': ^3.0.0 || ^4.0.0
       '@vitest/browser-playwright': ^4.0.0
       '@vitest/runner': ^3.0.0 || ^4.0.0
-      storybook: ^10.3.6
+      storybook: ^10.5.5
       vitest: ^3.0.0 || ^4.0.0
     peerDependenciesMeta:
       '@vitest/browser':
@@ -5052,18 +5680,18 @@ packages:
       vitest:
         optional: true
 
-  '@storybook/builder-vite@10.3.6':
-    resolution: {integrity: sha512-gpvR/sE4BcrFtmQZ+Ker7zD23oQzoVeqD9nF6cK6yzY+Q0svJXyX2EPmFG4y+EwygD5/vNzDpP84gGMut8VRwg==}
+  '@storybook/builder-vite@10.5.5':
+    resolution: {integrity: sha512-dQoJ7gUl8y0z5rV9cE0mz6qTBNmN9R4GOLIZk98rJ8CwduNJOb9eGZXusDzzvnYcp8TnNkqDtyx4tXQSUDInPQ==}
     peerDependencies:
-      storybook: ^10.3.6
+      storybook: ^10.5.5
       vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  '@storybook/csf-plugin@10.3.6':
-    resolution: {integrity: sha512-9kBf7VRdRqTSIYo+rPtVn5yjYYyK8kP2QhEYx3oiXvfwy4RexmbJnhk/tXa/lNiTqukA1TqaWQ2+5MqF4fu6YQ==}
+  '@storybook/csf-plugin@10.5.5':
+    resolution: {integrity: sha512-/euibhRFqklYCZqUseokojmfYcQpXshVY2QmA1qCuxMz9SzVFD3iSTw+aFLTxpsJGGdcZJk8fnm/rEthLzZ9jA==}
     peerDependencies:
       esbuild: 0.27.4
       rollup: '*'
-      storybook: ^10.3.6
+      storybook: ^10.5.5
       vite: '*'
       webpack: '*'
     peerDependenciesMeta:
@@ -5079,43 +5707,53 @@ packages:
   '@storybook/global@5.0.0':
     resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==}
 
-  '@storybook/icons@2.0.2':
-    resolution: {integrity: sha512-KZBCpXsshAIjczYNXR/rlxEtCUX/eAbpFNwKi8bcOomrLA4t/SyPz5RF+lVPO2oZBUE4sAkt43mfJUevQDSEEw==}
+  '@storybook/icons@2.1.0':
+    resolution: {integrity: sha512-Fxh9vYpX9bQqFeHRiY8h2ApeRGDzRSMLwJwNZ/AIRqnyOKHxRKL+yFe+ctEkVJmuptRE9u1Hrn8ZZNHyfDKKNg==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  '@storybook/react-dom-shim@10.3.6':
-    resolution: {integrity: sha512-/Tu1gPu+Fw+zOnAGmxRmOD30FX3a04LxcTAKflEtdpmtIMVR5bA3qpjy+f5YhoyDCecbXyKmL1OeIU2FIIZHqQ==}
+  '@storybook/react-dom-shim@10.5.5':
+    resolution: {integrity: sha512-PIk7N3LLrZIxfNxmkvmQN1d5UQ70XEedT8n0GhBiXnM6XL09xPGB8n8TZXeJBRYluKhDQcAyQeT0/OZmcDVQJg==}
     peerDependencies:
+      '@types/react': ^19.2.10
+      '@types/react-dom': ^19.2.3
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      storybook: ^10.3.6
+      storybook: ^10.5.5
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
 
-  '@storybook/react-vite@10.3.6':
-    resolution: {integrity: sha512-tySQRc+8q7V2NkylQMNJjDV8zXy6tkxb8oDqw/DIhHhI9Xn77MTKVZ8Cihbo5NMm7HYTB6xDKr6wqdSMgdufYQ==}
+  '@storybook/react-vite@10.5.5':
+    resolution: {integrity: sha512-Uy7VV72kVSkw6aDTAPQupXUeZX5LF6e4zqNvTZ+36qxsXAkaFgw7HPEm7L1tsaRfiV+s9anU7UvX47tfJpYGuQ==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      storybook: ^10.3.6
-      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
-
-  '@storybook/react@10.3.6':
-    resolution: {integrity: sha512-oZQZ6xayWe5IdHmFUTL0TL8rX/gpNNh9gWhT2vzW5eeUvlkVG/RBKdsja6Ndrk2s1D9vcnwiI6r6CNXy3IEEmg==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      storybook: ^10.3.6
+      storybook: ^10.5.5
       typescript: '>= 4.9.x'
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
     peerDependenciesMeta:
       typescript:
         optional: true
 
-  '@stylistic/eslint-plugin@5.10.0':
-    resolution: {integrity: sha512-nPK52ZHvot8Ju/0A4ucSX1dcPV2/1clx0kLcH5wDmrE4naKso7TUC/voUyU1O9OTKTrR6MYip6LP0ogEMQ9jPQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+  '@storybook/react@10.5.5':
+    resolution: {integrity: sha512-T2Xj0ey7a9RHU6coYLC0L5lhjcdyhLCs9wNv15FvHvgmrRobkynEV72kq5vGW8tFkahNWI1X9+GZPQ6r8Nm38w==}
     peerDependencies:
-      eslint: ^9.0.0 || ^10.0.0
+      '@types/react': ^19.2.10
+      '@types/react-dom': ^19.2.3
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      storybook: ^10.5.5
+      typescript: '>= 4.9.x'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+      typescript:
+        optional: true
 
   '@svgr/babel-plugin-add-jsx-attribute@8.0.0':
     resolution: {integrity: sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==}
@@ -5199,8 +5837,17 @@ packages:
     resolution: {integrity: sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==}
     engines: {node: '>=10'}
 
-  '@testcontainers/postgresql@11.14.0':
-    resolution: {integrity: sha512-wYbJn8GRTj8qfqzfVubxioYWlHJU/ImIjuzPwyy9C5Qfo6g3GLduPZAj+BifvqTZjgT3gd4gFVLCPhBji7dc1w==}
+  '@tanstack/react-virtual@3.14.8':
+    resolution: {integrity: sha512-O39GJQpAYEJcIu3uN1//YtmhjSEOyw75vg9CKCatBDPiD5hKtZQoJHfferyrB/LdOD3UWaoMLWtdEjarwIwdDw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@tanstack/virtual-core@3.17.6':
+    resolution: {integrity: sha512-h0/Ebo18CkOrChlQIhNtQkM5ySUnh/GumQ/D1st3hG2HWUPEF+ILUc2k29UtivCi/9G7w7G3/f7Xyd5cCFbKBw==}
+
+  '@testcontainers/postgresql@12.0.4':
+    resolution: {integrity: sha512-a/pLU6j5lpKKAlUTPwqweqMGhOSjgTSb6HBX69TOrXn32ifU37nnQDmNFTj8ddOAw+BQL9oTRkeOxVbZkqhgZA==}
 
   '@testing-library/dom@10.4.1':
     resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
@@ -5210,6 +5857,12 @@ packages:
     resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==}
     engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
 
+  '@testing-library/jest-dom@7.0.0':
+    resolution: {integrity: sha512-HKAH9C6mBo5yBG6yRO5i43L2iisencAo5z+o5P/saHUoY+miC5ivXRxHBJcFyB5ypPNxHJdK3BoF/3O4DIptMg==}
+    engines: {node: '>=22', npm: '>=6', yarn: '>=1'}
+    peerDependencies:
+      '@testing-library/dom': '>=10 <11'
+
   '@testing-library/react@16.3.2':
     resolution: {integrity: sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==}
     engines: {node: '>=18'}
@@ -5235,12 +5888,12 @@ packages:
     resolution: {integrity: sha512-yVtV8zsdo8qFHe+/3kw81dSLyF7D576A5cCFCi4X7B39tWT7SekaEFUnvnWJHz+9qO7qJTah1JbrDjWKqFtdWA==}
     engines: {node: ^16.14.0 || >=18.0.0}
 
-  '@tufjs/models@4.1.0':
-    resolution: {integrity: sha512-Y8cK9aggNRsqJVaKUlEYs4s7CvQ1b1ta2DVPyAimb0I2qhzjNk+A+mxvll/klL0RlfuIUei8BF7YWiua4kQqww==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  '@tufjs/models@5.0.0':
+    resolution: {integrity: sha512-U4mVcdFGOi6pt8n38LdWZp67Svn7ppnU1Pj8SGOVaBi1X4gm+G4ztQlLfkoJbKSHfjA6WeaiJp2A4V83AJF6nQ==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
 
-  '@tybys/wasm-util@0.10.1':
-    resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
+  '@tybys/wasm-util@0.10.3':
+    resolution: {integrity: sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==}
 
   '@tybys/wasm-util@0.9.0':
     resolution: {integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==}
@@ -5287,9 +5940,6 @@ packages:
   '@types/connect@3.4.38':
     resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
 
-  '@types/content-type@1.1.9':
-    resolution: {integrity: sha512-Hq9IMnfekuOCsEmYl4QX2HBrT+XsfXiupfrLLY8Dcf3Puf4BkBOxSbWYTITSOQAhJoYPBez+b4MJRpIYL65z8A==}
-
   '@types/counterpart@0.18.4':
     resolution: {integrity: sha512-aqBg5oAGo/qh/+wxUfuMadDu2WO0MEWOblyzwaM1Ske2xilUxBfgPqapAFVAfrVTDMVwa0UMarzGot8m64IAzA==}
 
@@ -5410,12 +6060,6 @@ packages:
   '@types/escape-html@1.0.4':
     resolution: {integrity: sha512-qZ72SFTgUAZ5a7Tj6kf2SHLetiH5S6f8G5frB2SPQ3EyF02kxdyBFf4Tz4banE3xCgGnKgWLt//a6VuYHKYJTg==}
 
-  '@types/eslint-scope@3.7.7':
-    resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==}
-
-  '@types/eslint@9.6.1':
-    resolution: {integrity: sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==}
-
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
@@ -5425,15 +6069,9 @@ packages:
   '@types/events@3.0.3':
     resolution: {integrity: sha512-trOc4AAUThEz9hapPtSd7wf5tiQKvTtu5b371UxXdTuqzIh0ArcRspRP0i0Viu+LXstIQ1z96t1nsPxT9ol01g==}
 
-  '@types/express-serve-static-core@4.19.8':
-    resolution: {integrity: sha512-02S5fmqeoKzVZCHPZid4b8JH2eM5HzQLZWN2FohQEy/0eXTq8VXZfSN6Pcr3F6N9R/vNrj7cpgbhjie6m/1tCA==}
-
   '@types/express-serve-static-core@5.1.1':
     resolution: {integrity: sha512-v4zIMr/cX7/d2BpAEX3KNKL/JrT1s43s96lLvvdTmza1oEvDudCqK9aF/djc/SWgy8Yh0h30TZx5VpzqFCxk5A==}
 
-  '@types/express@4.17.25':
-    resolution: {integrity: sha512-dVd04UKsfpINUnK0yBoYHDF3xu7xVH4BuDotC/xGuycx4CgbP48X/KF/586bcObxT0HENHXEU8Nqtu6NR+eKhw==}
-
   '@types/express@5.0.6':
     resolution: {integrity: sha512-sKYVuV7Sv9fbPIt/442koC7+IIwK5olP1KWeD88e/idgoJqDm3JV/YUiPwkoKK92ylff2MGxSz1CSjsXelx0YA==}
 
@@ -5466,9 +6104,6 @@ packages:
   '@types/http-errors@2.0.5':
     resolution: {integrity: sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg==}
 
-  '@types/http-proxy@1.17.17':
-    resolution: {integrity: sha512-ED6LB+Z1AVylNTu7hdzuBqOgMnvG/ld6wGCG8wFnAzKX5uyW2K3WD52v0gnLCTK/VLpXtKckgWuyScYK6cSPaw==}
-
   '@types/istanbul-lib-coverage@2.0.6':
     resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==}
 
@@ -5490,9 +6125,6 @@ packages:
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
-  '@types/json5@0.0.29':
-    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
-
   '@types/jsrsasign@10.5.15':
     resolution: {integrity: sha512-3stUTaSRtN09PPzVWR6aySD9gNnuymz+WviNHoTb85dKu+BjaV4uBbWWGykBBJkfwPtcNZVfTn2lbX00U+yhpQ==}
 
@@ -5517,11 +6149,8 @@ packages:
   '@types/mdurl@2.0.0':
     resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
 
-  '@types/mdx@2.0.13':
-    resolution: {integrity: sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==}
-
-  '@types/mime@1.3.5':
-    resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==}
+  '@types/mdx@2.0.14':
+    resolution: {integrity: sha512-T48PeuJtvLosNTPVhfnIp3i/n3a4g4Bad7YCq5k64D4u7NwDrAotikQ+5+sjtUvBmxCMlbo3dVL+C2dP0rWHzg==}
 
   '@types/minimist@1.2.5':
     resolution: {integrity: sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==}
@@ -5532,17 +6161,11 @@ packages:
   '@types/ms@2.1.0':
     resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
 
-  '@types/mysql@2.15.27':
-    resolution: {integrity: sha512-YfWiV16IY0OeBfBCk8+hXKmdTKrKlwKN1MNKAPBu5JYxLwBEZl7QzeEpGnlZb3VMGJrrGmB84gXiH+ofs/TezA==}
-
   '@types/node-fetch@2.6.13':
     resolution: {integrity: sha512-QGpRVpzSaUs30JBSGPjOg4Uveu384erbHBoT1zeONvyCfwQxIkUshLAOqN/k9EjGviPRmWTTe6aH2qySWKTVSw==}
 
-  '@types/node@18.19.130':
-    resolution: {integrity: sha512-GRaXQx6jGfL8sKfaIDD6OupbIHBr9jv7Jnaml9tB7l4v068PAOXqfcujMMo5PhbIs6ggR1XODELqahT2R8v0fg==}
-
-  '@types/normalize-package-data@2.4.4':
-    resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
+  '@types/node@25.9.3':
+    resolution: {integrity: sha512-603BddQMv3pUcr4U2dhujk83N2tTDVr/34wII2B6bJy6g+8WD6yUb11jszNs0gdi4PesVWl7ABt8nYMVpnLUcg==}
 
   '@types/npm-package-arg@6.1.4':
     resolution: {integrity: sha512-vDgdbMy2QXHnAruzlv68pUtXCjmqUk3WrBAsRboRovsOmxbfn/WiYCjmecyKjGztnMps5dWp4Uq2prp+Ilo17Q==}
@@ -5556,24 +6179,12 @@ packages:
   '@types/pacote@11.1.8':
     resolution: {integrity: sha512-/XLR0VoTh2JEO0jJg1q/e6Rh9bxjBq9vorJuQmtT7rRrXSiWz7e7NsvXVYJQ0i8JxMlBMPPYDTnrRe7MZRFA8Q==}
 
-  '@types/pako@2.0.4':
-    resolution: {integrity: sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==}
-
   '@types/parse-json@4.0.2':
     resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
 
-  '@types/pg-pool@2.0.7':
-    resolution: {integrity: sha512-U4CwmGVQcbEuqpyju8/ptOKg6gEC+Tqsvj2xS9o1g71bUh8twxnC6ZL5rZKCsGN0iyH0CwgUyc9VR5owNQF9Ng==}
-
-  '@types/pg@8.15.6':
-    resolution: {integrity: sha512-NoaMtzhxOrubeL/7UZuNTrejB4MPAJ0RpxZqXQf2qXuVlTPuG6Y8p4u9dKRaue4yjmC7ZhzVO2/Yyyn25znrPQ==}
-
   '@types/picomatch@4.0.2':
     resolution: {integrity: sha512-qHHxQ+P9PysNEGbALT8f8YOSHW0KJu6l2xU8DYY0fu/EmGxXdVnuTLvFUvBgPJMSqXq29SYHveejeAha+4AYgA==}
 
-  '@types/plist@3.0.5':
-    resolution: {integrity: sha512-E6OCaRmAe4WDmWNsL/9RMqdkkzDCY1etutkflWk4c+AcjDU07Pcz1fQwTX0TQz+Pxqn9i4L1TU3UFpjnrcDgxA==}
-
   '@types/png-chunks-extract@1.0.2':
     resolution: {integrity: sha512-z6djfFIbrrddtunoMJBOPlyZrnmeuG1kkvHUNi2QfpOb+JMMLuLliHHTmMyRi7k7LiTAut0HbdGCF6ibDtQAHQ==}
 
@@ -5583,8 +6194,8 @@ packages:
   '@types/qrcode@1.5.6':
     resolution: {integrity: sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==}
 
-  '@types/qs@6.14.0':
-    resolution: {integrity: sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==}
+  '@types/qs@6.15.1':
+    resolution: {integrity: sha512-GZHUBZR9hckSUhrxmp1nG6NwdpM9fCunJwyThLW1X3AyHgd9IlHb6VANpQQqDr2o/qQp6McZ3y/IA2rVzKzSbw==}
 
   '@types/range-parser@1.2.7':
     resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
@@ -5605,8 +6216,8 @@ packages:
     peerDependencies:
       '@types/react': ^19.2.10
 
-  '@types/react@19.2.14':
-    resolution: {integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==}
+  '@types/react@19.2.18':
+    resolution: {integrity: sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==}
 
   '@types/resolve@1.20.6':
     resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==}
@@ -5614,14 +6225,11 @@ packages:
   '@types/responselike@1.0.3':
     resolution: {integrity: sha512-H/+L+UkTV33uf49PH5pCAUBVPNj2nDBXTN+qS1dOwyyg24l3CcicicCA7ca+HMvJBZcFgl5r8e+RR6elsb4Lyw==}
 
-  '@types/retry@0.12.2':
-    resolution: {integrity: sha512-XISRgDJ2Tc5q4TRqvgJtzsRkFYNJzZrhTdtMoGVBttwzzQJkPnS3WWTFc7kuDRoPtPakl+T+OfdEUjYJj7Jbow==}
-
   '@types/sanitize-html@2.16.1':
     resolution: {integrity: sha512-n9wjs8bCOTyN/ynwD8s/nTcTreIHB1vf31vhLMGqUPNHaweKC4/fAl4Dj+hUlCTKYgm4P3k83fmiFfzkZ6sgMA==}
 
-  '@types/sdp-transform@2.15.0':
-    resolution: {integrity: sha512-ikIFF0EaYt/2XetIYYVeMj6SB52oVXFasJUXDzWHgzNJS5ep2Pbsu7f8f3Za+dEie8HQtt3Zr9mHYBpWT0XgxQ==}
+  '@types/sdp-transform@3.0.0':
+    resolution: {integrity: sha512-TLwbrRILH3mwnrXgjZLb2LXursBR/dnumGgFWKm8Jw3nTJCAN0g80pvS4KVpXHz4DpYtne762lcXin9GmShGbg==}
 
   '@types/seedrandom@3.0.8':
     resolution: {integrity: sha512-TY1eezMU2zH2ozQoAFAQFOPpvP15g+ZgSfTZt31AUUH/Rxtnz3H+A/Sv1Snw2/amp//omibc+AEkTaA8KUeOLQ==}
@@ -5629,24 +6237,15 @@ packages:
   '@types/semver@7.7.1':
     resolution: {integrity: sha512-FmgJfu+MOcQ370SD0ev7EI8TlCAfKYU+B4m5T3yXc1CiRN94g/SZPtsCkk506aUDtlMnFZvasDwHHUcZUEaYuA==}
 
-  '@types/send@0.17.6':
-    resolution: {integrity: sha512-Uqt8rPBE8SY0RK8JB1EzVOIZ32uqy8HwdxCnoCOsYrvnswqmFZ/k+9Ikidlk/ImhsdvBsloHbAlewb2IEBV/Og==}
-
   '@types/send@1.2.1':
     resolution: {integrity: sha512-arsCikDvlU99zl1g69TcAB3mzZPpxgw0UQnaHeC1Nwb015xp8bknZv5rIfri9xTOcMuaVgvabfIRA7PSZVuZIQ==}
 
   '@types/serve-index@1.9.4':
     resolution: {integrity: sha512-qLpGZ/c2fhSs5gnYsQxtDEq3Oy8SXPClIXkW5ghvAvsNuVSA8k+gCONcUCS/UjLEYvYps+e8uBtfgXgvhwfNug==}
 
-  '@types/serve-static@1.15.10':
-    resolution: {integrity: sha512-tRs1dB+g8Itk72rlSI2ZrW6vZg0YrLI81iQSTkMmOqnqCaNr/8Ek4VwWcN5vZgCYWbg/JJSGBlUaYGAOP73qBw==}
-
   '@types/serve-static@2.2.0':
     resolution: {integrity: sha512-8mam4H1NHLtu7nmtalF7eyBH14QyOASmcxHhSfEoRyr0nP/YdoesEtU+uSRvMe96TW/HPTtkoKqQLl53N7UXMQ==}
 
-  '@types/sockjs@0.3.36':
-    resolution: {integrity: sha512-MK9V6NzAS1+Ud7JV9lJLFqW85VbC9dq3LmwZCuBe4wBDgKC0Kj/jd8Xl+nSviU+Qc3+m7umHHyHg//2KSa0a0Q==}
-
   '@types/ssh2-streams@0.1.13':
     resolution: {integrity: sha512-faHyY3brO9oLEA0QlcO8N2wT7R0+1sHWZvQ+y3rMLwdY1ZyS1z0W3t65j9PqT4HmQ6ALzNe7RZlNuCNE0wBSWA==}
 
@@ -5668,9 +6267,6 @@ packages:
   '@types/tar-js@0.3.5':
     resolution: {integrity: sha512-resGa1LAQLXI1tKDWnggDn7+o6fL4dZo7a8FcQKctBzC937UYp9iogiQonLElYduhzBarUUsMe/ntx/++xYgAA==}
 
-  '@types/tedious@4.0.14':
-    resolution: {integrity: sha512-KHPsfX/FoVbUGbyYvk1q9MMQHLPeRZhRJZdO45Q4YjvFkv4hMNghCWTvy7rdKessBsmtz4euWCWAB6/tVpI1Iw==}
-
   '@types/tough-cookie@4.0.5':
     resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==}
 
@@ -5683,12 +6279,12 @@ packages:
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
-  '@types/verror@1.10.11':
-    resolution: {integrity: sha512-RlDm9K7+o5stv0Co8i8ZRGxDbrTxhJtgjqjFyVh/tXQyl/rYtTKlnTvZ88oSTeYREWurwx20Js4kTuKCsFkUtg==}
-
   '@types/web-bluetooth@0.0.21':
     resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
 
+  '@types/whatwg-mimetype@3.0.2':
+    resolution: {integrity: sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA==}
+
   '@types/ws@8.18.1':
     resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==}
 
@@ -5698,180 +6294,295 @@ packages:
   '@types/yargs@17.0.35':
     resolution: {integrity: sha512-qUHkeCyQFxMXg79wQfTtfndEC+N9ZZg76HJftDJp+qH2tV7Gj4OJi7l+PiWwJ+pWtW8GwSmqsDj/oymhrTWXjg==}
 
-  '@types/yauzl@2.10.3':
-    resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
-
-  '@typescript-eslint/eslint-plugin@8.59.2':
-    resolution: {integrity: sha512-j/bwmkBvHUtPNxzuWe5z6BEk3q54YRyGlBXkSsmfoih7zNrBvl5A9A98anlp/7JbyZcWIJ8KXo/3Tq/DjFLtuQ==}
+  '@typescript-eslint/project-service@8.66.0':
+    resolution: {integrity: sha512-7MthGPTt4BP69lSryqpqq8HQqxuzynssckL/jyDyk3+TNMQ3y2jFWkptCrktWvBrP+EH787Nl5N5Qpw7WZg+5g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^8.59.2
-      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/parser@8.59.2':
-    resolution: {integrity: sha512-plR3pp6D+SSUn1HM7xvSkx12/DhoHInI2YF35KAcVFNZvlC0gtrWqx7Qq1oH2Ssgi0vlFRCTbP+DZc7B9+TtsQ==}
+  '@typescript-eslint/scope-manager@8.66.0':
+    resolution: {integrity: sha512-8TGcH25j9zqJ/IULB/ppyhRvxA8QYfFEZ7nfbg6/BN9spDgb8fPWQXlE5l8TWBL50EtUx007uZ1o9VOwrq2/9g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/tsconfig-utils@8.66.0':
+    resolution: {integrity: sha512-9D5gLYZG4rOjcoag8MQ/fWI8WqA9wcPDyOGyWtWFhvM1lHRbliqUSPIY5J3zqCU1tvSwzXxnnjhQhz5Ne7mJ4g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/types@8.66.0':
+    resolution: {integrity: sha512-H6gcYaSDOyvL3AD/jHUtUFo2jqGgn/F6nuyuZSu0QTesxL+cP4dQoIMrODRofuJC09g64+WgZ6tE19Y1N2YIFQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/typescript-estree@8.66.0':
+    resolution: {integrity: sha512-8/x4INiiQb10jGgXYD7116/zQ+OL84ZIFn0za68wwFHCanT/VLbBEroWht8RV8fn0/ZCAoazHLQgwUC0UQcDfg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/utils@8.66.0':
+    resolution: {integrity: sha512-jasearZPolBw5NJNYGMwxzHMF83niVWmMU1VdHzG1CyfI2VS7f7nZltnKtHcg20hW+7Uo5GfK4MeDPoU3qI8EA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/project-service@8.59.2':
-    resolution: {integrity: sha512-+2hqvEkeyf/0FBor67duF0Ll7Ot8jyKzDQOSrxazF/danillRq2DwR9dLptsXpoZQqxE1UisSmoZewrlPas9Vw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.1.0'
-
-  '@typescript-eslint/scope-manager@8.59.2':
-    resolution: {integrity: sha512-JzfyEpEtOU89CcFSwyNS3mu4MLvLSXqnmX05+aKBDM+TdR5jzcGOEBwxwGNxrEQ7p/z6kK2WyioCGBf2zZBnvg==}
+  '@typescript-eslint/visitor-keys@8.66.0':
+    resolution: {integrity: sha512-dkKR8q+lKciskj1Y3vthHktl+3cMLWGyVUP23bRiPZ5O9BRT++4EqDDV+TVeIKBL1VXVEqrJlz8MYbcnvJcAlg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/tsconfig-utils@8.59.2':
-    resolution: {integrity: sha512-BKK4alN7oi4C/zv4VqHQ+uRU+lTa6JGIZ7s1juw7b3RHo9OfKB+bKX3u0iVZetdsUCBBkSbdWbarJbmN0fTeSw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.1.0'
+  '@typescript/typescript-aix-ppc64@7.0.2':
+    resolution: {integrity: sha512-MTKKkWB7p/0E9xi1d1tHtZ5PiLkGEMIq88pK2CubZjOsLtYTLqhgIgi6zepFa+9GHZ6h05NMCkQxGKiPXMxXtQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [ppc64]
+    os: [aix]
 
-  '@typescript-eslint/type-utils@8.59.2':
-    resolution: {integrity: sha512-nhqaj1nmTdVVl/BP5omXNRGO38jn5iosis2vbdmupF2txCf8ylWT8lx+JlvMYYVqzGVKtjojUFoQ3JRWK+mfzQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      typescript: '>=4.8.4 <6.1.0'
-
-  '@typescript-eslint/types@8.59.2':
-    resolution: {integrity: sha512-e82GVOE8Ps3E++Egvb6Y3Dw0S10u8NkQ9KXmtRhCWJJ8kDhOJTvtMAWnFL16kB1583goCWXsr0NieKCZMs2/0Q==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/typescript-estree@8.59.2':
-    resolution: {integrity: sha512-o0XPGNwcWw+FIwStOWn+BwBuEmL6QXP0rsvAFg7ET1dey1Nr6Wb1ac8p5HEsK0ygO/6mUxlk+YWQD9xcb/nnXg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      typescript: '>=4.8.4 <6.1.0'
-
-  '@typescript-eslint/utils@8.59.2':
-    resolution: {integrity: sha512-Juw3EinkXqjaffxz6roowvV7GZT/kET5vSKKZT6upl5TXdWkLkYmNPXwDDL2Vkt2DPn0nODIS4egC/0AGxKo/Q==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      typescript: '>=4.8.4 <6.1.0'
-
-  '@typescript-eslint/visitor-keys@8.59.2':
-    resolution: {integrity: sha512-NwjLUnGy8/Zfx23fl50tRC8rYaYnM52xNRYFAXvmiil9yh1+K6aRVQMnzW6gQB/1DLgWt977lYQn7C+wtgXZiA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@ungap/structured-clone@1.3.0':
-    resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
-    deprecated: Potential CWE-502 - Update to 1.3.1 or higher
-
-  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
-    resolution: {integrity: sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==}
-    cpu: [arm]
-    os: [android]
-
-  '@unrs/resolver-binding-android-arm64@1.11.1':
-    resolution: {integrity: sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==}
-    cpu: [arm64]
-    os: [android]
-
-  '@unrs/resolver-binding-darwin-arm64@1.11.1':
-    resolution: {integrity: sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==}
+  '@typescript/typescript-darwin-arm64@7.0.2':
+    resolution: {integrity: sha512-gowzar9MwS/aRWp6f3a4KUqzRjAZjOsmGNCM6LcTgXum+dBfgsBVMN+AgvOCCbguXyick6LJhpBszxMebJ8syA==}
+    engines: {node: '>=16.20.0'}
     cpu: [arm64]
     os: [darwin]
 
-  '@unrs/resolver-binding-darwin-x64@1.11.1':
-    resolution: {integrity: sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==}
+  '@typescript/typescript-darwin-x64@7.0.2':
+    resolution: {integrity: sha512-SZ9xZInqApNlNGc9s0W1VSsktYSOe9cFqNOIqmN1Gs8SmkjKZYFt017G4VwPxASInODuAdbTW7sXiFUf893RgA==}
+    engines: {node: '>=16.20.0'}
     cpu: [x64]
     os: [darwin]
 
-  '@unrs/resolver-binding-freebsd-x64@1.11.1':
-    resolution: {integrity: sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==}
+  '@typescript/typescript-freebsd-arm64@7.0.2':
+    resolution: {integrity: sha512-W5NH4y/J0plIIS5b2xvTEkU7JFxyqdMAOgf+Ilhl0vHQXKO5dZoxd+C/jEtq56c4F3wk71RB4BMRQ2XdI+bwYQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@typescript/typescript-freebsd-x64@7.0.2':
+    resolution: {integrity: sha512-UMGDx5sTpzNw3WiPebH7l90IWfJggEd+egHt/q6p7/Cm3zqoV7VxkGXt+3DxPIw8CcmvAB0j3sVVfbhX+M4Tpw==}
+    engines: {node: '>=16.20.0'}
     cpu: [x64]
     os: [freebsd]
 
-  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
-    resolution: {integrity: sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==}
+  '@typescript/typescript-linux-arm64@7.0.2':
+    resolution: {integrity: sha512-Qh4eU4/y3yDjnfjjyPYihMj5/ODIlmt+Bzu17OI+fiSRDW57QmU5SiN63exPRNJPKUzcc1INa1NXdrJ+MqHjUQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@typescript/typescript-linux-arm@7.0.2':
+    resolution: {integrity: sha512-gffT3xPz9sR7j/YJExkyPntrI0P2EP9XbOyWzth2/Gs0RstK+90RBcO0ncXoXy/beYll1SXw846Nf2zdnEz0QQ==}
+    engines: {node: '>=16.20.0'}
     cpu: [arm]
     os: [linux]
 
-  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
-    resolution: {integrity: sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==}
+  '@typescript/typescript-linux-loong64@7.0.2':
+    resolution: {integrity: sha512-uEHck9i8hoAzXPiYRib1O7miOnz23SxIeVl6F4LXox+qov1K35jHcEW6VHKvZI+pyvl7fZEP4MCU5LYvIq1GuQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@typescript/typescript-linux-mips64el@7.0.2':
+    resolution: {integrity: sha512-R4KvAMnE43W5Qeqb0Ly56O3mWMWIAgsMyz36DCaycd5nbg/9kzm0liw3JocfRqyJY0KPmzFjbswozXyW0DnIYA==}
+    engines: {node: '>=16.20.0'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@typescript/typescript-linux-ppc64@7.0.2':
+    resolution: {integrity: sha512-DORx5b3sd/4S7eayxm4FQv+A7CrkUIGRaHiwI8oiHTAI1fAPWhF4J0vAlkC8biAlHSVVwxMQ3tjZ2/DVbnQiiA==}
+    engines: {node: '>=16.20.0'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@typescript/typescript-linux-riscv64@7.0.2':
+    resolution: {integrity: sha512-wf0jqEDOjrPRnKwYRyyJDRo11KMbvMFrU+q4zqKyChODBzvlkbhNQfKvLxQCcwTpdDaXSHZTVuh0JoCrKCUMHQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@typescript/typescript-linux-s390x@7.0.2':
+    resolution: {integrity: sha512-IkwJc3L7yhytWd/ewjyxNDfOmswCm9GWMJT/ue/dU4aZNbwZeYAetq42VyLmsmSjvoX7z74X6ZaYCtzAr0EuGw==}
+    engines: {node: '>=16.20.0'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@typescript/typescript-linux-x64@7.0.2':
+    resolution: {integrity: sha512-EYdf2cNg7rgCWJnxCdJ+F3V39O8ihb37eHAu1LK8oAFizgTQbPOK7zHHXbPt8rX24COqODXeI3sIf0fCXG7H/A==}
+    engines: {node: '>=16.20.0'}
+    cpu: [x64]
+    os: [linux]
+
+  '@typescript/typescript-netbsd-arm64@7.0.2':
+    resolution: {integrity: sha512-+polYF4MF04aPpO5FTkHran9yUQDSXqy5GiSDKpsll5jy3l3+g9QLhpf39T+ePtefhXLOGrLl0QIjkQP6VnelA==}
+    engines: {node: '>=16.20.0'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@typescript/typescript-netbsd-x64@7.0.2':
+    resolution: {integrity: sha512-8YIT0EHM/3dq10ZOVF/A7pc/YSMtbcecct4rWtexrnSCHOPcpC2KTLXfTCR6vDpnSiY12heNb1GiN/wu+T/FyA==}
+    engines: {node: '>=16.20.0'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@typescript/typescript-openbsd-arm64@7.0.2':
+    resolution: {integrity: sha512-APT8+ClYnuYm1u9+kgGXoMj2VzWzcymwh2gNSQVySHfkRDGOTVkoWLjCmOQSaO+PoqQ57B0flRp9SA+7GnnkzQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@typescript/typescript-openbsd-x64@7.0.2':
+    resolution: {integrity: sha512-yX7s+Q0Dln0Dt9tEzZsAjXXR/+ytBM7AlglaqyeMPxQszJ1JhlJdZ6jLA+IzldHtflX81em7lDao1xXu+aRRkg==}
+    engines: {node: '>=16.20.0'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@typescript/typescript-sunos-x64@7.0.2':
+    resolution: {integrity: sha512-dLJDGaLZ1D4HPQn62u1n8mBDkJREwMsAkCdkwd4Ieqw+x3TUyTsqY0YiBCtE6H6OzzgGk3iuZ3vFWRS+E8/d1g==}
+    engines: {node: '>=16.20.0'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@typescript/typescript-win32-arm64@7.0.2':
+    resolution: {integrity: sha512-Gyl1Vy6OsWesLzmq+EP0Fb7b4Nid5232AvcA2SFcdYreldpNtYFFofPjnt62y9hQy7VTaZp65ICJjuAQRaVcIQ==}
+    engines: {node: '>=16.20.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@typescript/typescript-win32-x64@7.0.2':
+    resolution: {integrity: sha512-0BQ3HkAHHlKLSp1qRvf3SUhGpGsDuhB/jgFw75guyqbxJqEaS0Cw/VFO8i2nHglJUzQCRtMMR/IBAKE3ETMC4g==}
+    engines: {node: '>=16.20.0'}
+    cpu: [x64]
+    os: [win32]
+
+  '@typescript/typescript6@6.0.2':
+    resolution: {integrity: sha512-mbCddXd+jm7hfx7w2YU64/Av4/NqqeG3GoRZgxPcgoTxYjhrcfJRw9ULch71SS4G+Q3bOXFhRvPqjguN0Hyp5w==}
+    hasBin: true
+
+  '@ungap/structured-clone@1.3.3':
+    resolution: {integrity: sha512-60YRaenCQcVjYEKOcG824+DRGGIQ3VKErcBoAEDJZz5bKIs2ZG+X/H9Nk+Q6EVkwJk5QNApxbrc5QtBSwtrXAg==}
+
+  '@unrs/resolver-binding-android-arm-eabi@1.12.2':
+    resolution: {integrity: sha512-g5T90pqg1bo/7mytQx6F4iBNC0Wsh9cu+z9veDbFjc7HjpesJFWD7QMS0NGStXM075+7dJPPVvBbpZlnrdpi/w==}
+    cpu: [arm]
+    os: [android]
+
+  '@unrs/resolver-binding-android-arm64@1.12.2':
+    resolution: {integrity: sha512-YGCRZv/9GLhwmz6mYDeTsm/92BAyR28l6c2ReweVW5pWgfsitWLY8upvfRlGdoyD8HjeTHSYJWyZGD4KJA/nFQ==}
+    cpu: [arm64]
+    os: [android]
+
+  '@unrs/resolver-binding-darwin-arm64@1.12.2':
+    resolution: {integrity: sha512-u9DiNT1auQMO20A9SyTuG3wUgQWB9Z7KjAg0uFuCDR1FsAY8A0CG2S6JpHS1xwm/w1G08bjXZDcyOCjv1WAm2w==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@unrs/resolver-binding-darwin-x64@1.12.2':
+    resolution: {integrity: sha512-f7rPLi/T1HVKZu/u6t87lroib16n8vrSzcyxI7lg4BGO9UF26KhQL44sd9eOUgrTYhvRXtWOIZT5PejdPyJfUA==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@unrs/resolver-binding-freebsd-x64@1.12.2':
+    resolution: {integrity: sha512-BpcOjWCJub6nRZUS2zA20pmLvjtqAtGejETaIyRLiZiQf++cbrjltLA5NN/xaXfqeOBOSlMFbemIl5/S5tljmg==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@unrs/resolver-binding-linux-arm-gnueabihf@1.12.2':
+    resolution: {integrity: sha512-vZTDvdSISZjJx66OzJqtsOhzifbqRjbmI1Mnu49fQDwog5GtDI4QidRiEAYbZCRj9C8YZEW+3ZjqsyS9GR4k2A==}
     cpu: [arm]
     os: [linux]
 
-  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
-    resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
+  '@unrs/resolver-binding-linux-arm-musleabihf@1.12.2':
+    resolution: {integrity: sha512-BiPI+IrIlwcW4nLLMM21+B1dFPzd55yAVgVGrdgDjNef+ch03GdxrcyaIz8X9SsQirh/kCQ7mviyWlMxdh2D7g==}
+    cpu: [arm]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm64-gnu@1.12.2':
+    resolution: {integrity: sha512-zJc0H99FEPoFfSrNpa91HYfxzfAJCr502oxNK1cfdC9hlaFI43RT+JFCann9JUgZmLzzntChHyn13Sgn9ljHNg==}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
-    resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
+  '@unrs/resolver-binding-linux-arm64-musl@1.12.2':
+    resolution: {integrity: sha512-KQ3Lki6l+Pz1k/eBipN41ES+YUK30beLGb9YqcB1O542cyLCNE6GaxrfcY3T6EezmGGk84wb5XyO9loTM9tkcA==}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
-    resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
+  '@unrs/resolver-binding-linux-loong64-gnu@1.12.2':
+    resolution: {integrity: sha512-3SJGEh1DborhG6pyxvhPzCT4bbSIVihsvgJc13P1bHG7KLdNDaF9T3gsTwFc7Jw/5Y5/iWOjkEx7Zy0NvCGX3Q==}
+    cpu: [loong64]
+    os: [linux]
+    libc: [glibc]
+
+  '@unrs/resolver-binding-linux-loong64-musl@1.12.2':
+    resolution: {integrity: sha512-jiuG/Obbel7uw1PwHNFfrkiKhLAF6mnyZ6aWlOAVN9WqKm8v0OFGnciJIHu8+CMvXLQ8AD51LPzAoUfT21D5Ew==}
+    cpu: [loong64]
+    os: [linux]
+    libc: [musl]
+
+  '@unrs/resolver-binding-linux-ppc64-gnu@1.12.2':
+    resolution: {integrity: sha512-q7xRvVpmcfeL+LlZg8Pbbo6QaTZwDU5BaGZbwfhkEsXJn3Was8xYfE0RBH266xZt0rM6B7i8xAYIvjthuUIWHg==}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
-    resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
+  '@unrs/resolver-binding-linux-riscv64-gnu@1.12.2':
+    resolution: {integrity: sha512-0CVdx6lcnT3Q9inOH8tsMIOJ6ImndllMjqJHg8RLVdB7Vq4SfkEXl9mCSsVNuNA4MCYycRicCUxPCabVHJRr6A==}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
-  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
-    resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
+  '@unrs/resolver-binding-linux-riscv64-musl@1.12.2':
+    resolution: {integrity: sha512-iOwlRo9vnp6R6ohHQS11n0NnfdXx/omhkocmIfaPRpQhKZ+3BDMkkdRVh53qjkFkpPddf+FETA28NwGN7l5l+w==}
     cpu: [riscv64]
     os: [linux]
     libc: [musl]
 
-  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
-    resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
+  '@unrs/resolver-binding-linux-s390x-gnu@1.12.2':
+    resolution: {integrity: sha512-HYJtLfXq94q8iZNFT1lknx258wlkkWhZeUXJRqzKBBUJ00CvZ+N33zgbCqimLjsyw5Va6uUxhVa12mI+kaveEw==}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
-    resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
+  '@unrs/resolver-binding-linux-x64-gnu@1.12.2':
+    resolution: {integrity: sha512-mPsUhunKKDih5O96Y6enDQyHc1SqBPlY1E/SfMWDM3EdJ95Z9CArPeCVwCCqbP45ljvivdEk8Fxn+SIb1rDAJQ==}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
-    resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
+  '@unrs/resolver-binding-linux-x64-musl@1.12.2':
+    resolution: {integrity: sha512-azrt6+5ydLd8Vt210AAFis/lZevSfPw93EJRIJG+xPu4WCJ8K0kppCTpMyLPcKT7H15M4Jnt2tMp5bOvCkRC6A==}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
-    resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
+  '@unrs/resolver-binding-openharmony-arm64@1.12.2':
+    resolution: {integrity: sha512-YZ9hP4O0X9PQb8eO980qmLNGH4zT3I9+SZTdt0Pr0YyuGQhYKoOZkV02VzrzyOZJ5xIJ3UFIenKkUkGg8GjgWQ==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@unrs/resolver-binding-wasm32-wasi@1.12.2':
+    resolution: {integrity: sha512-tYFDIkMxSflfEc/h92ZWNsZlHSwgimbNHSO3PL2JWQHfCuC2q316jMyYU9TIWZsFK2bQwyK5VAdYgn8ygPj69A==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
-  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
-    resolution: {integrity: sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==}
+  '@unrs/resolver-binding-win32-arm64-msvc@1.12.2':
+    resolution: {integrity: sha512-qzNyg3xL0VPQmCaUh+N5jSitce6k+uCBfMDesWRnlULOZaqUkaJ0ybdT+UqlAWJoQjuqfIU/0Ptx9bteN4D82g==}
     cpu: [arm64]
     os: [win32]
 
-  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
-    resolution: {integrity: sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==}
+  '@unrs/resolver-binding-win32-ia32-msvc@1.12.2':
+    resolution: {integrity: sha512-WD9sY00OfpHVGfsnHZoA8jVT+esS/Bg8z8jzxp5BnDCjjwsuKsPQrzswwpFy4J1AUJbXPRfkpcX0mXrzeXW79g==}
     cpu: [ia32]
     os: [win32]
 
-  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
-    resolution: {integrity: sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==}
+  '@unrs/resolver-binding-win32-x64-msvc@1.12.2':
+    resolution: {integrity: sha512-nAB74NfSNKknqQ1RrYj6uz8FcXEomu/MATJZxh/x+BArzN2U3JbOYC0APYzUIGhVY3m5hRxA8VPNdPBoG8txlA==}
     cpu: [x64]
     os: [win32]
 
   '@upsetjs/venn.js@2.0.0':
     resolution: {integrity: sha512-WbBhLrooyePuQ1VZxrJjtLvTc4NVfpOyKx0sKqioq9bX1C1m7Jgykkn8gLrtwumBioXIqam8DLxp88Adbue6Hw==}
 
-  '@vector-im/compound-design-tokens@10.1.1':
-    resolution: {integrity: sha512-f2rdTilbPeOjrX7Mh9iTPcp5VergY7JLLWzKVjwMvpT0wtoFKwn59D1hwX2QInpiG70QTCxEdQFYLxQKvJQ74Q==}
+  '@vector-im/compound-design-tokens@10.2.1':
+    resolution: {integrity: sha512-N8to81u7qVYRgQiMr8Fr1mM+s6ZHRsiGpXLFJiHTP4YDyc7vXW6MBUVuUaUGFcbmxq76lqPaZt2AsnD2barn6Q==}
     peerDependencies:
       '@types/react': ^19.2.10
       react: ^17 || ^18 || ^19.0.0
@@ -5881,8 +6592,20 @@ packages:
       react:
         optional: true
 
-  '@vector-im/compound-web@9.3.0':
-    resolution: {integrity: sha512-Elu4Uw8RbfP6JaudQYkVibALYT6qpwubqfKhteTxIPWBWzSYM+P5T+B1uX+ra+grNcXwXUt2xfMxpqYQsAHgYA==}
+  '@vector-im/compound-web@10.0.1':
+    resolution: {integrity: sha512-CT3aGMalPSf53o3JUbBF7EA10Rfp+auftIuBwOUSna+hfZ/zPxGLTFcuCuOJ7L8hrzijM+V4I8L0PUkfyOczpg==}
+    peerDependencies:
+      '@fontsource/inconsolata': ^5
+      '@fontsource/inter': ^5
+      '@types/react': ^19.2.10
+      '@vector-im/compound-design-tokens': '>=1.6.1 <11.0.0'
+      react: ^18 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@vector-im/compound-web@9.9.0':
+    resolution: {integrity: sha512-GjAEhzB/mt9MA7Y1ySe6/AlW26vodDu4hvTi1ThB5rTrt4KAiHMpvk+T56KV5Lwo0VvBxAyHMtm/IY5tkyH12A==}
     peerDependencies:
       '@fontsource/inconsolata': ^5
       '@fontsource/inter': ^5
@@ -5900,6 +6623,19 @@ packages:
     bundledDependencies:
       - '@vector-im/matrix-wysiwyg-wasm'
 
+  '@vitejs/plugin-react@6.0.5':
+    resolution: {integrity: sha512-BOVzne/NL162sMdResB25mUv+vWMF5NoAjNf09TeGlE7ZpszZWSD3winycicLJw72yeVsoCn/2kOhEuCvEShMA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      '@rolldown/plugin-babel': ^0.1.7 || ^0.2.0
+      babel-plugin-react-compiler: ^1.0.0
+      vite: ^8.0.0
+    peerDependenciesMeta:
+      '@rolldown/plugin-babel':
+        optional: true
+      babel-plugin-react-compiler:
+        optional: true
+
   '@vitejs/plugin-vue@5.2.4':
     resolution: {integrity: sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -5907,22 +6643,22 @@ packages:
       vite: ^5.0.0 || ^6.0.0
       vue: ^3.2.25
 
-  '@vitest/browser-playwright@4.1.5':
-    resolution: {integrity: sha512-CWy0lBQJq97nionyJJdnaU4961IXTl43a7UCu5nHy51IoKxAt6PVIJLo+76rVl7KOOgcWHNkG4kbJu/pW7knvA==}
+  '@vitest/browser-playwright@4.1.10':
+    resolution: {integrity: sha512-nMoXGEiRpT7m3W7NsbvrM2aKNwiNHZf+zEpUCvMteGjZFvfT96Q9fh7QyB98dvDWXiKvrLxA7bJ1mCOOv+JQPw==}
     peerDependencies:
       playwright: '*'
-      vitest: 4.1.5
+      vitest: 4.1.10
 
-  '@vitest/browser@4.1.5':
-    resolution: {integrity: sha512-iCDGI8c4yg+xmjUg2VsygdAUSIIB4x5Rht/P68OXy1hPELKXHDkzh87lkuTcdYmemRChDkEpB426MmDjzC0ziA==}
+  '@vitest/browser@4.1.10':
+    resolution: {integrity: sha512-UDwuWGwXj646CBx/bQHOaJSX7np0I8JL/UKQYa1e4QrVHH8VdWtx8eaOuf8sy0ShwDgR6NjJAsp5eF6vjF6qng==}
     peerDependencies:
-      vitest: 4.1.5
+      vitest: 4.1.10
 
-  '@vitest/coverage-v8@4.1.5':
-    resolution: {integrity: sha512-38C0/Ddb7HcRG0Z4/DUem8x57d2p9jYgp18mkaYswEOQBGsI1CG4f/hjm0ZCeaJfWhSZ4k7jgs29V1Zom7Ki9A==}
+  '@vitest/coverage-v8@4.1.10':
+    resolution: {integrity: sha512-IM49HmthevbgAO4anp1hwtoT9wYe59w0LR00gr+eagHE+ZJ5lK4sLPeO0ubgoJcwLk6dehU3R24N+FbEEKDc8g==}
     peerDependencies:
-      '@vitest/browser': 4.1.5
-      vitest: 4.1.5
+      '@vitest/browser': 4.1.10
+      vitest: 4.1.10
     peerDependenciesMeta:
       '@vitest/browser':
         optional: true
@@ -5930,11 +6666,11 @@ packages:
   '@vitest/expect@3.2.4':
     resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
 
-  '@vitest/expect@4.1.5':
-    resolution: {integrity: sha512-PWBaRY5JoKuRnHlUHfpV/KohFylaDZTupcXN1H9vYryNLOnitSw60Mw9IAE2r67NbwwzBw/Cc/8q9BK3kIX8Kw==}
+  '@vitest/expect@4.1.10':
+    resolution: {integrity: sha512-YsCn+qAk1GWjQOWFEsEcL2gNQ0zmVmQu3T03qP6UyjhtmdtwtbuI+DASn/7iQB3HGTXkdBwGddzxPlmiql5vlA==}
 
-  '@vitest/mocker@4.1.5':
-    resolution: {integrity: sha512-/x2EmFC4mT4NNzqvC3fmesuV97w5FC903KPmey4gsnJiMQ3Be1IlDKVaDaG8iqaLFHqJ2FVEkxZk5VmeLjIItw==}
+  '@vitest/mocker@4.1.10':
+    resolution: {integrity: sha512-v0xaezt+DKEmKfaxg133ldzADrwLGd7Ze1MfQQTYfvs8OqZIwbxyxaYURivwV7sWy5fqn3rH5uOrSp07bp44Ow==}
     peerDependencies:
       msw: ^2.4.9
       vite: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -5947,26 +6683,26 @@ packages:
   '@vitest/pretty-format@3.2.4':
     resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==}
 
-  '@vitest/pretty-format@4.1.5':
-    resolution: {integrity: sha512-7I3q6l5qr03dVfMX2wCo9FxwSJbPdwKjy2uu/YPpU3wfHvIL4QHwVRp57OfGrDFeUJ8/8QdfBKIV12FTtLn00g==}
+  '@vitest/pretty-format@4.1.10':
+    resolution: {integrity: sha512-W1HsjSH4MXQ9YfmmhLAoIYf1HRfekQCGngeIgcei6MP5QQGWUe0gkopdZQaVCFO+JDJMrAJGwa5pRpNpvy4P8Q==}
 
-  '@vitest/runner@4.1.5':
-    resolution: {integrity: sha512-2D+o7Pr82IEO46YPpoA/YU0neeyr6FTerQb5Ro7BUnBuv6NQtT/kmVnczngiMEBhzgqz2UZYl5gArejsyERDSQ==}
+  '@vitest/runner@4.1.10':
+    resolution: {integrity: sha512-IKI6kpIH+LmpROplyLwBBaCfMgOZOMsygVa6BARD6ahA04VRuJSa6OaVG7kRvSEMD870Vd91rSSw0eegtWyLGg==}
 
-  '@vitest/snapshot@4.1.5':
-    resolution: {integrity: sha512-zypXEt4KH/XgKGPUz4eC2AvErYx0My5hfL8oDb1HzGFpEk1P62bxSohdyOmvz+d9UJwanI68MKwr2EquOaOgMQ==}
+  '@vitest/snapshot@4.1.10':
+    resolution: {integrity: sha512-xRkfOT1qpTAi/Ti4Y1LtfRc3kEuqxGw59eN2jN9pRWMtS/XDevekhcFSqvQqjUNGksfjMJu3Y+oJ+4Ypn2OaJw==}
 
   '@vitest/spy@3.2.4':
     resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
 
-  '@vitest/spy@4.1.5':
-    resolution: {integrity: sha512-2lNOsh6+R2Idnf1TCZqSwYlKN2E/iDlD8sgU59kYVl+OMDmvldO1VDk39smRfpUNwYpNRVn3w4YfuC7KfbBnkQ==}
+  '@vitest/spy@4.1.10':
+    resolution: {integrity: sha512-PLf/Ugvoq5wO/b4rwYCR1h2PSIdXz7wnkQFMiUpLdtM7l6pqVFcQIBEHyT1+l+cj7mNwAfZHzqXqDyjvOuwbDw==}
 
   '@vitest/utils@3.2.4':
     resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
 
-  '@vitest/utils@4.1.5':
-    resolution: {integrity: sha512-76wdkrmfXfqGjueGgnb45ITPyUi1ycZ4IHgC2bhPDUfWHklY/q3MdLOAB+TF1e6xfl8NxNY0ZYaPCFNWSsw3Ug==}
+  '@vitest/utils@4.1.10':
+    resolution: {integrity: sha512-fy9am/HWxbaGt/Sawrp90vt6Y6jQwf1RX77cz3uwoJwJVMli/e1IEwRPnMNJ7vKfPTwo0diXifkpPvwH9v7nGA==}
 
   '@volar/language-core@2.4.28':
     resolution: {integrity: sha512-w4qhIJ8ZSitgLAkVay6AbcnC7gP3glYM3fYwKV3srj8m494E3xtrCv6E+bWviiK/8hs6e6t1ij1s2Endql7vzQ==}
@@ -5976,6 +6712,11 @@ packages:
 
   '@volar/typescript@2.4.28':
     resolution: {integrity: sha512-Ja6yvWrbis2QtN4ClAKreeUZPVYMARDYZl9LMEv1iQ1QdepB6wn0jTRxA9MftYmYa4DQ4k/DaSZpFPUfxl8giw==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
 
   '@vue/compiler-core@3.5.31':
     resolution: {integrity: sha512-k/ueL14aNIEy5Onf0OVzR8kiqF/WThgLdFhxwa4e/KF/0qe38IwIdofoSWBTvvxQOesaz6riAFAUaYjoF9fLLQ==}
@@ -6022,13 +6763,13 @@ packages:
     resolution: {integrity: sha512-fbGYivgK5uBTRt7p5F3zy6VrETlV9RtZjBqd1/HxGdjdckBgBM4ugP8LHpjolqTj14TXTxSK1ZfgPbHYyGuH7g==}
     peerDependencies:
       async-validator: ^4
-      axios: 1.15.2
+      axios: ^1.16.1
       change-case: ^5
       drauu: ^0.4
       focus-trap: ^7
       fuse.js: ^7
       idb-keyval: ^6
-      jwt-decode: 4.0.0
+      jwt-decode: ^4
       nprogress: ^0.2
       qrcode: ^1.5
       sortablejs: ^1
@@ -6116,6 +6857,7 @@ packages:
   '@xmldom/xmldom@0.8.13':
     resolution: {integrity: sha512-KRYzxepc14G/CEpEGc3Yn+JKaAeT63smlDr+vjB8jRfgTBBI9wRj/nkQEO+ucV8p8I9bfKLWp37uHgFrbntPvw==}
     engines: {node: '>=10.0.0'}
+    deprecated: this version has critical issues, please update to the latest version
 
   '@xtuc/ieee754@1.2.0':
     resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
@@ -6126,31 +6868,30 @@ packages:
   '@yarnpkg/lockfile@1.1.0':
     resolution: {integrity: sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==}
 
-  '@yarnpkg/parsers@3.0.2':
-    resolution: {integrity: sha512-/HcYgtUSiJiot/XWGLOlGxPYUG65+/31V8oqk17vZLW1xlCoR4PampyePljOxY2n8/3jz9+tIFzICsyGujJZoA==}
-    engines: {node: '>=18.12.0'}
-
   '@zkochan/js-yaml@0.0.7':
     resolution: {integrity: sha512-nrUSn7hzt7J6JWgWGz78ZYI8wj+gdIJdk0Ynjpp8l+trkn58Uqsf6RYrYkEK+3X18EX+TNdtJI0WxAtc+L84SQ==}
     hasBin: true
 
-  '@zxcvbn-ts/core@3.0.4':
-    resolution: {integrity: sha512-aQeiT0F09FuJaAqNrxynlAwZ2mW/1MdXakKWNmGM1Qp/VaY6CnB/GfnMS2T8gB2231Esp1/maCWd8vTG4OuShw==}
+  '@zxcvbn-ts/core@4.1.2':
+    resolution: {integrity: sha512-RQmxWB3AMI+HGQErQdUv6Aq32aQhp6xOxrfgCP0+T9MsLZoP3xtLHuT8O8VojsUxdmQVZfJlYkYb1A0wOwIS+Q==}
 
-  '@zxcvbn-ts/language-common@3.0.4':
-    resolution: {integrity: sha512-viSNNnRYtc7ULXzxrQIVUNwHAPSXRtoIwy/Tq4XQQdIknBzw4vz36lQLF6mvhMlTIlpjoN/Z1GFu/fwiAlUSsw==}
+  '@zxcvbn-ts/dictionary-compression@3.0.1':
+    resolution: {integrity: sha512-p3KyPzxGc3vWSap5hHA6SllbUCmh7s+NtpGyC3qEWrxYJT9t9TUAzjPm48Okipo+UUyPQfDlIvTcs9JRShBFiQ==}
 
-  '@zxcvbn-ts/language-en@3.0.2':
-    resolution: {integrity: sha512-Zp+zL+I6Un2Bj0tRXNs6VUBq3Djt+hwTwUz4dkt2qgsQz47U0/XthZ4ULrT/RxjwJRl5LwiaKOOZeOtmixHnjg==}
+  '@zxcvbn-ts/language-common@4.1.3':
+    resolution: {integrity: sha512-g2bg4skmlJG9aJqC/nWziZzgYpSe/f3rKeGobrkdFiOrfZVFqqzUgC6BUQWuX54Sua9j0Jxxt+1bf4f/Mal1Kg==}
 
-  abbrev@3.0.1:
-    resolution: {integrity: sha512-AO2ac6pjRB3SJmGJo+v5/aK6Omggp6fsLrs6wN9bd35ulu4cCwaAU9+7ZhXjeqHVkaHThLuzH0nZr0YpCDhygg==}
-    engines: {node: ^18.17.0 || >=20.5.0}
+  '@zxcvbn-ts/language-en@4.1.1':
+    resolution: {integrity: sha512-6UdzuBd3Uex8TKubohcn+uXRVAH34Zjs2eCfT4hQVo9zeTy7AkQRQfdV4OnHR5hQfW/XBrK/AGTZk7VBWh7wwQ==}
 
   abbrev@4.0.0:
     resolution: {integrity: sha512-a1wflyaL0tHtJSmLSOVybYhy22vRih4eduhhrkcjgrWGnRfrZtovJ2FRjxuTtkkj47O/baf0R86QU5OuYpz8fA==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
+  abbrev@5.0.0:
+    resolution: {integrity: sha512-/XrFJgzQQQHpti1raDJC6m4ws6aNktmjBlhk8Fdlk7LwCEuDoieEJJY9OFHjfiFJFFRM2tK+Ky/IsfbbmlMu1w==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
+
   abort-controller@3.0.0:
     resolution: {integrity: sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==}
     engines: {node: '>=6.5'}
@@ -6163,17 +6904,6 @@ packages:
     resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
     engines: {node: '>= 0.6'}
 
-  acorn-import-attributes@1.9.5:
-    resolution: {integrity: sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==}
-    peerDependencies:
-      acorn: ^8
-
-  acorn-import-phases@1.0.4:
-    resolution: {integrity: sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==}
-    engines: {node: '>=10.13.0'}
-    peerDependencies:
-      acorn: ^8.14.0
-
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -6183,8 +6913,8 @@ packages:
     resolution: {integrity: sha512-HEHNfbars9v4pgpW6SO1KSPkfoS0xVOM/9UzkJltjlsHZmJasxg8aXkuZa7SMf8vKGIBhpUsPluQSqhJFCqebw==}
     engines: {node: '>=0.4.0'}
 
-  acorn@8.16.0:
-    resolution: {integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==}
+  acorn@8.18.0:
+    resolution: {integrity: sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==}
     engines: {node: '>=0.4.0'}
     hasBin: true
 
@@ -6200,10 +6930,14 @@ packages:
     resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
     engines: {node: '>= 14'}
 
+  agent-base@9.0.0:
+    resolution: {integrity: sha512-TQf59BsZnytt8GdJKLPfUZ54g/iaUL2OWDSFCCvMOhsHduDQxO8xC4PNeyIkVcA5KwL2phPSv0douC0fgWzmnA==}
+    engines: {node: '>= 20'}
+
   ajv-draft-04@1.0.0:
     resolution: {integrity: sha512-mv00Te6nmYbRp5DCwclxtt7yV/joXJPGS7nM+97GdxvuttCOfgI3K4U25zboyeX0O+myI8ERluxQe5wljMmVIw==}
     peerDependencies:
-      ajv: 8.18.0
+      ajv: ^8.5.0
     peerDependenciesMeta:
       ajv:
         optional: true
@@ -6211,7 +6945,7 @@ packages:
   ajv-formats@2.1.1:
     resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
     peerDependencies:
-      ajv: 8.18.0
+      ajv: ^8.0.0
     peerDependenciesMeta:
       ajv:
         optional: true
@@ -6219,7 +6953,7 @@ packages:
   ajv-formats@3.0.1:
     resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
     peerDependencies:
-      ajv: 8.18.0
+      ajv: ^8.0.0
     peerDependenciesMeta:
       ajv:
         optional: true
@@ -6227,19 +6961,22 @@ packages:
   ajv-keywords@3.5.2:
     resolution: {integrity: sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==}
     peerDependencies:
-      ajv: 6.14.0
+      ajv: ^6.9.1
 
   ajv-keywords@5.1.0:
     resolution: {integrity: sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==}
     peerDependencies:
-      ajv: 8.18.0
+      ajv: ^8.8.2
 
-  ajv@6.14.0:
-    resolution: {integrity: sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==}
+  ajv@6.15.0:
+    resolution: {integrity: sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==}
 
   ajv@8.18.0:
     resolution: {integrity: sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==}
 
+  ajv@8.20.0:
+    resolution: {integrity: sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==}
+
   algoliasearch@5.50.0:
     resolution: {integrity: sha512-yE5I83Q2s8euVou8Y3feXK08wyZInJWLYXgWO6Xti9jBUEZAGUahyeQ7wSZWkifLWVnQVKEz5RAmBlXG5nqxog==}
     engines: {node: '>= 14.0.0'}
@@ -6255,10 +6992,6 @@ packages:
     resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
     engines: {node: '>=8'}
 
-  ansi-escapes@7.3.0:
-    resolution: {integrity: sha512-BvU8nYgGQBxcmMuEeUEmNTvrMVjJNSH7RgW24vXexN4Ven6qCvy4TntnvlnwnMLTVlcRQQdbRY8NKnaIoeWDNg==}
-    engines: {node: '>=18'}
-
   ansi-html-community@0.0.8:
     resolution: {integrity: sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==}
     engines: {'0': node >= 0.8.0}
@@ -6288,15 +7021,12 @@ packages:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
-  app-builder-bin@5.0.0-alpha.12:
-    resolution: {integrity: sha512-j87o0j6LqPL3QRr8yid6c+Tt5gC7xNfYo6uQIQkorAC6MpeayVMZrEDzKmJJ/Hlv7EnOQpaRm53k6ktDYZyB6w==}
-
-  app-builder-lib@26.9.1:
-    resolution: {integrity: sha512-/b9NA7fUablchSKEeGfUrwkJL9JI4xEMZWlbNn1YLV0WUtkkOQNz0LBo8tUIK0GSD+KVo+Kxzlv71459PRIqOA==}
+  app-builder-lib@26.15.3:
+    resolution: {integrity: sha512-2VnyWkqsP5v5XbBhL3tD5Syx8iNPBYsoU7kY4S2fz7wg8Rj/nztWKCUzGKaFRTv0Xwf3/H058CR1Kvtd/3lRow==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
-      dmg-builder: 26.9.1
-      electron-builder-squirrel-windows: 26.9.1
+      dmg-builder: 26.15.3
+      electron-builder-squirrel-windows: 26.15.3
 
   applescript@1.0.0:
     resolution: {integrity: sha512-yvtNHdWvtbYEiIazXAdp/NY+BBb65/DAseqlNiJQjOx9DynuzOYDbVLBJvuc0ve0VL9x6B3OHF6eH52y9hCBtQ==}
@@ -6326,41 +7056,6 @@ packages:
     resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
     engines: {node: '>= 0.4'}
 
-  array-buffer-byte-length@1.0.2:
-    resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
-    engines: {node: '>= 0.4'}
-
-  array-flatten@1.1.1:
-    resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
-
-  array-includes@3.1.9:
-    resolution: {integrity: sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==}
-    engines: {node: '>= 0.4'}
-
-  array.prototype.findlast@1.2.5:
-    resolution: {integrity: sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==}
-    engines: {node: '>= 0.4'}
-
-  array.prototype.findlastindex@1.2.6:
-    resolution: {integrity: sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==}
-    engines: {node: '>= 0.4'}
-
-  array.prototype.flat@1.3.3:
-    resolution: {integrity: sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==}
-    engines: {node: '>= 0.4'}
-
-  array.prototype.flatmap@1.3.3:
-    resolution: {integrity: sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==}
-    engines: {node: '>= 0.4'}
-
-  array.prototype.tosorted@1.1.4:
-    resolution: {integrity: sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==}
-    engines: {node: '>= 0.4'}
-
-  arraybuffer.prototype.slice@1.0.4:
-    resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
-    engines: {node: '>= 0.4'}
-
   asn1.js@4.10.1:
     resolution: {integrity: sha512-p32cOF5q0Zqs9uBiONKYLm6BClCoBCM5O9JfeUSlnQLBTxYdTK+pW+nXflm8UkKd2UYlEbYz5qEi0JuZR9ckSw==}
 
@@ -6371,10 +7066,6 @@ packages:
     resolution: {integrity: sha512-S2s3aOytiKdFRdulw2qPE51MzjzVOisppcVv7jVFR+Kw0kxwvFrDcYA0h7Ndqbmj0HkMIXYWaoj7fli8kgx1eg==}
     engines: {node: '>=12.0.0'}
 
-  assert-plus@1.0.0:
-    resolution: {integrity: sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==}
-    engines: {node: '>=0.8'}
-
   assert@2.1.0:
     resolution: {integrity: sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==}
 
@@ -6382,9 +7073,6 @@ packages:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
 
-  ast-types-flow@0.0.8:
-    resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
-
   ast-types@0.16.1:
     resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
     engines: {node: '>=4'}
@@ -6396,14 +7084,14 @@ packages:
     resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
     engines: {node: '>=8'}
 
+  astring@1.9.0:
+    resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==}
+    hasBin: true
+
   async-exit-hook@2.0.1:
     resolution: {integrity: sha512-NW2cX8m1Q7KPA7a5M2ULQeZ2wR5qI5PAbw5L0UOMxdioVk9PMZ0h1TmyZEkPYrCvYjDlFICusOu1dlEKAAeXBw==}
     engines: {node: '>=0.12.0'}
 
-  async-function@1.0.0:
-    resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
-    engines: {node: '>= 0.4'}
-
   async-lock@1.4.1:
     resolution: {integrity: sha512-Az2ZTpuytrtqENulXwO3GGv1Bztugx6TT37NIo7imr/Qo0gsYiGtSdBa2B6fsXhTpVZDNfu1Qn3pk531e3q+nQ==}
 
@@ -6424,8 +7112,8 @@ packages:
     resolution: {integrity: sha512-OgxiAm4q9EBf9EeXdPBiVNENaWE3jUZofwrhAkWjHDYGezu1k3FRZHU8V2FBxGuSJOHzKmTJEd0G7L7/0xDGFA==}
     engines: {node: '>=4.0.0'}
 
-  autoprefixer@10.4.24:
-    resolution: {integrity: sha512-uHZg7N9ULTVbutaIsDRoUkoS8/h3bdsmVJYZ5l3wv8Cp/6UIIoRDm90hZ+BwxUj/hGBEzLxdHNSKuFpn8WOyZw==}
+  autoprefixer@10.5.0:
+    resolution: {integrity: sha512-FMhOoZV4+qR6aTUALKX2rEqGG+oyATvwBt9IIzVR5rMa2HRWPkxf+P+PAJLD1I/H5/II+HuZcBJYEFBpq39ong==}
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
     peerDependencies:
@@ -6438,30 +7126,29 @@ packages:
   await-lock@3.0.0:
     resolution: {integrity: sha512-eO6fLiSnrJrMdjWMNK8zbVRXPs2TKJg78iKZd9wDpN3na5tcoV6EoeiOlMgk2QaAQ1gIrK1YuMsJHXWqz89tSA==}
 
-  axe-core@4.11.4:
-    resolution: {integrity: sha512-KunSNx+TVpkAw/6ULfhnx+HWRecjqZGTOyquAoWHYLRSdK1tB5Ihce1ZW+UY3fj33bYAFWPu7W/GRSmmrCGuxA==}
+  aws4@1.13.2:
+    resolution: {integrity: sha512-lHe62zvbTB5eEABUVi/AwVh0ZKY9rMMDhmm+eeyuuUQbQ3+J+fONVQOZyj+DdrvD4BY33uYniyRJ4UJIaSKAfw==}
+
+  axe-core@4.12.1:
+    resolution: {integrity: sha512-s7iGf5GaVMxEG0ENN9x+xTr7GFZCb1ZP/1uATUpCEK2X78nDB3RwbtFCo9pGAf9ru+VwoQ464DkaLEeRM08wJA==}
     engines: {node: '>=4'}
 
-  axios@1.15.0:
-    resolution: {integrity: sha512-wWyJDlAatxk30ZJer+GeCWS209sA42X+N5jU2jy6oHTp7ufw8uzUTVFBX9+wTfAlhiJXGS0Bq7X6efruWjuK9Q==}
+  axios@1.18.1:
+    resolution: {integrity: sha512-3nTvFlvpn9Zu/RkHUqtc7/+al4UpRW5az71ap5zccp6e8RAYEzhMTecX8Dz1wWDYrPpUoB1HAQEGEAEvUr7S9g==}
 
-  axios@1.15.2:
-    resolution: {integrity: sha512-wLrXxPtcrPTsNlJmKjkPnNPK2Ihe0hn0wGSaTEiHRPxwjvJwT3hKmXF4dpqxmPO9SoNb2FsYXj/xEo0gHN+D5A==}
+  axios@1.19.0:
+    resolution: {integrity: sha512-ht/iuYZXEjFxLH/Hkezgd7m6JKlHHXEUSneaDz8uZe1Gj5QZtCnpyDsckvAiEnT89OEbCLmnte4R4sn7P0EKFw==}
 
-  axobject-query@4.1.0:
-    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
-    engines: {node: '>= 0.4'}
-
-  b4a@1.8.0:
-    resolution: {integrity: sha512-qRuSmNSkGQaHwNbM7J78Wwy+ghLEYF1zNrSeMxj4Kgw6y33O3mXcQ6Ie9fRvfU/YnxWkOchPXbaLb73TkIsfdg==}
+  b4a@1.8.1:
+    resolution: {integrity: sha512-aiqre1Nr0B/6DgE2N5vwTc+2/oQZ4Wh1t4NznYY4E00y8LCt6NqdRv81so00oo27D8MVKTpUa/MwUUtBLXCoDw==}
     peerDependencies:
       react-native-b4a: '*'
     peerDependenciesMeta:
       react-native-b4a:
         optional: true
 
-  babel-jest@30.3.0:
-    resolution: {integrity: sha512-gRpauEU2KRrCox5Z296aeVHR4jQ98BCnu0IO332D/xpHNOsIH/bgSRk9k6GbKIbBw8vFeN6ctuu6tV8WOyVfYQ==}
+  babel-jest@30.4.1:
+    resolution: {integrity: sha512-fATAbM8piYxkiXQp3RBXmZHxZVNJZAVXXfyeyCN2Tida3+qJ8ea9UxhiJ2y4fLO90ZImKt6k9FlcH2+rLkJGhw==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
     peerDependencies:
       '@babel/core': ^7.11.0 || ^8.0.0-0
@@ -6488,8 +7175,8 @@ packages:
     resolution: {integrity: sha512-D8Z6Qm8jCvVXtIRkBnqNHX0zJ37rQcFJ9u8WOS6tkYOsRdHBzypCstaxWiu5ZIlqQtviRYbgnRLSoCEvjqcqbA==}
     engines: {node: '>=12'}
 
-  babel-plugin-jest-hoist@30.3.0:
-    resolution: {integrity: sha512-+TRkByhsws6sfPjVaitzadk1I0F5sPvOVUH5tyTSzhePpsGIVrdeunHSw/C36QeocS95OOk8lunc4rlu5Anwsg==}
+  babel-plugin-jest-hoist@30.4.0:
+    resolution: {integrity: sha512-9EdtWM/sSfXLOGLwSn+GS6pIXyBnL07/8gyJlwFXjWy4DxMOyItqyUT29d4lQiS380EZwYlX7/At4PgBS+m2aA==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
   babel-plugin-jsx-remove-data-test-id@3.0.0:
@@ -6535,8 +7222,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0 || ^8.0.0-0
 
-  babel-preset-jest@30.3.0:
-    resolution: {integrity: sha512-6ZcUbWHC+dMz2vfzdNwi87Z1gQsLNK2uLuK1Q89R11xdvejcivlYYwDlEv0FHX3VwEXpbBQ9uufB/MUNpZGfhQ==}
+  babel-preset-jest@30.4.0:
+    resolution: {integrity: sha512-lBY4jxsNmCnSiu7kquw8ZC9F4+XLMOKypT3RnNHPvU2Kpd4W0xaPuLr5ZkRyOsvLYAY4yaW1ZwTW4xB7NIiZzg==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
     peerDependencies:
       '@babel/core': ^7.11.0 || ^8.0.0-beta.1
@@ -6552,16 +7239,16 @@ packages:
     resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
     engines: {node: 18 || 20 || >=22}
 
-  bare-events@2.8.2:
-    resolution: {integrity: sha512-riJjyv1/mHLIPX4RwiK+oW9/4c3TEUeORHKefKAKnZ5kyslbN+HXowtbaVEqt4IMUB7OXlfixcs6gsFeo/jhiQ==}
+  bare-events@2.9.1:
+    resolution: {integrity: sha512-Z0oHEHAFDZkffN8Qc39zNZjQlMDkPJRyyyZieU1VH7u8c5S+qHZ2S8ixdKIAxEjfHO7FJxXmJWgteOghVanIsg==}
     peerDependencies:
       bare-abort-controller: '*'
     peerDependenciesMeta:
       bare-abort-controller:
         optional: true
 
-  bare-fs@4.7.0:
-    resolution: {integrity: sha512-xzqKsCFxAek9aezYhjJuJRXBIaYlg/0OGDTZp+T8eYmYMlm66cs6cYko02drIyjN2CBbi+I6L7YfXyqpqtKRXA==}
+  bare-fs@4.7.3:
+    resolution: {integrity: sha512-xRgplks8SvcKkdlv2M6Z2LZmRsmqd+x0nXXGXeMEjwdibj1HSDrlnqBRLeYdMvsgCox7Bq0e+DHwfczOfsn6IA==}
     engines: {bare: '>=1.16.0'}
     peerDependencies:
       bare-buffer: '*'
@@ -6569,15 +7256,15 @@ packages:
       bare-buffer:
         optional: true
 
-  bare-os@3.8.7:
-    resolution: {integrity: sha512-G4Gr1UsGeEy2qtDTZwL7JFLo2wapUarz7iTMcYcMFdS89AIQuBoyjgXZz0Utv7uHs3xA9LckhVbeBi8lEQrC+w==}
+  bare-os@3.9.3:
+    resolution: {integrity: sha512-fF4Q7QsyKVF5Rj0qvI8BgUNjqzC2JvQlpTaPLjVJVxYVUX5Zr9un+y3w1HmA4nNKdFmRBT8z/WmrjvXzXVerKQ==}
     engines: {bare: '>=1.14.0'}
 
-  bare-path@3.0.0:
-    resolution: {integrity: sha512-tyfW2cQcB5NN8Saijrhqn0Zh7AnFNsnczRcuWODH0eYAXBsJ5gVxAUuNr7tsHSC6IZ77cA0SitzT+s47kot8Mw==}
+  bare-path@3.0.1:
+    resolution: {integrity: sha512-ghj2DSK/2e99a1anTVPCV4m4YIYtrbXhfM7V3D7XZLOTsybnYyaJloymGqssQc8l/or0UoDyRtNQkmkEF/ysgQ==}
 
-  bare-stream@2.13.0:
-    resolution: {integrity: sha512-3zAJRZMDFGjdn+RVnNpF9kuELw+0Fl3lpndM4NcEOhb9zwtSo/deETfuIwMSE5BXanA0FrN1qVjffGwAg2Y7EA==}
+  bare-stream@2.13.3:
+    resolution: {integrity: sha512-Kc+brLqvEqGkjyfiwJmImAOqLZL7OsoLKuavx+hJjgVV3nLTOjloJyPMFxjUPerGGHrNH0fLU06jjykMLWrERQ==}
     peerDependencies:
       bare-abort-controller: '*'
       bare-buffer: '*'
@@ -6590,8 +7277,8 @@ packages:
       bare-events:
         optional: true
 
-  bare-url@2.4.0:
-    resolution: {integrity: sha512-NSTU5WN+fy/L0DDenfE8SXQna4voXuW0FHM7wH8i3/q9khUSchfPbPezO4zSFMnDGIf9YE+mt/RWhZgNRKRIXA==}
+  bare-url@2.4.5:
+    resolution: {integrity: sha512-K+y9xF1tN+CdPu4qWwr0QiK1Al07eFPGYK5M2pDXcmHdMdgC/tT/bpmMe1hrmRHaidKLkXrC+cRNYf3XVDUhSQ==}
 
   base-x@5.0.1:
     resolution: {integrity: sha512-M7uio8Zt++eg3jPj+rHMfCC+IuygQHHCOU+IYsVtik6FWjuYpVt/+MRKcgsAMHh8mMFAwnB+Bs+mTrFiXjMzKg==}
@@ -6603,8 +7290,8 @@ packages:
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
-  baseline-browser-mapping@2.10.16:
-    resolution: {integrity: sha512-Lyf3aK28zpsD1yQMiiHD4RvVb6UdMoo8xzG2XzFIfR9luPzOpcBlAsT/qfB1XWS1bxWT+UtE4WmQgsp297FYOA==}
+  baseline-browser-mapping@2.11.4:
+    resolution: {integrity: sha512-s4+sLr9mZ/CyqeRritFeYV/Zx73OAtmaHn6kkBS1XRoJn1hrg3xIDUcpicAEX68tkcIN0iBCgti31C8zxtkhsQ==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
@@ -6620,10 +7307,6 @@ packages:
   big.js@5.2.2:
     resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
 
-  binary-extensions@2.3.0:
-    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
-    engines: {node: '>=8'}
-
   birpc@2.9.0:
     resolution: {integrity: sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==}
 
@@ -6637,6 +7320,9 @@ packages:
     resolution: {integrity: sha512-BdnPWo2OpYhlvuP2fRzJBdioMCkm7Zp0HCf8NJgF5Mbyqy7VQ/CnTiVWMMyq4EZCBHwj0Kq6098gW2/3RsZsrA==}
     engines: {node: '>=12'}
 
+  bluebird@3.7.2:
+    resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==}
+
   blurhash@2.0.5:
     resolution: {integrity: sha512-cRygWd7kGBQO3VEhPiTgq4Wc43ctsM+o46urrmPOiuAe+07fzlSB9OJVdpgDL0jPqXUVQ9ht7aq7kxOeJHRK+w==}
 
@@ -6646,16 +7332,12 @@ packages:
   bn.js@5.2.3:
     resolution: {integrity: sha512-EAcmnPkxpntVL+DS7bO1zhcZNvCkxqtkd0ZY53h06GNQ3DEkkGZ/gKgmDv6DdZQGj9BgfSPKtJJ7Dp1GPP8f7w==}
 
-  body-parser@1.20.4:
-    resolution: {integrity: sha512-ZTgYYLMOXY9qKU/57FAo8F+HA2dGX7bqGc71txDRC1rS4frdFI5R7NhluHxH6M0YItAP0sHB4uqAOcYKxO6uGA==}
-    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
-
-  body-parser@2.2.2:
-    resolution: {integrity: sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==}
+  body-parser@2.3.0:
+    resolution: {integrity: sha512-2cGmJupaNgg+QUwVLAucDuWuoMZ6EX9iHDRswZ5lsNYEmwPaRknMPCLZz07yTzVq/83p4o/wzbDZbBrTvGGTIw==}
     engines: {node: '>=18'}
 
-  bonjour-service@1.3.0:
-    resolution: {integrity: sha512-3YuAUiSkWykd+2Azjgyxei8OWf8thdn8AITIog2M4UICzoqfjlqr64WIjEXZllf/W6vK1goqleSR6brGomxQqA==}
+  bonjour-service@1.4.2:
+    resolution: {integrity: sha512-lMskhnsW70yWHr4PhPeh2rvaIkLSaDpp+nmtbXBZaNKTXwxL73QOkW6HhbzqTImXjevn9TreGT4GACGBCGP9nQ==}
 
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
@@ -6664,19 +7346,19 @@ packages:
     resolution: {integrity: sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw==}
     deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
 
-  brace-expansion@1.1.13:
-    resolution: {integrity: sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w==}
+  brace-expansion@1.1.18:
+    resolution: {integrity: sha512-Edep/X9fGqVNmzKBVsDYIOtD+z1tuezV70LBjdCst9Tqu76lsnvRiZ6oTic1n+/BIwX6QDGAO94PN4N2SADvtw==}
 
-  brace-expansion@2.1.0:
-    resolution: {integrity: sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==}
+  brace-expansion@2.1.4:
+    resolution: {integrity: sha512-hGfVzPxthbf3+2yjg/RBs60cB0FhqBS/zvdV/4wn4/BmN0bNMMHPc4V/BbFieqf1TKAGGAHnY4eSjajCl0f2Xg==}
 
-  brace-expansion@5.0.2:
-    resolution: {integrity: sha512-Pdk8c9poy+YhOgVWw1JNN22/HcivgKWwpxKq04M/jTmHyCZn12WPJebZxdjSa5TmBqISrUSgNYU3eRORljfCCw==}
+  brace-expansion@5.0.8:
+    resolution: {integrity: sha512-JZyDyq3D4AUifKTPOB7DELf6XsB3WdPuNxCtob1vFXPsSXhdAiHBWJ/tJ8HAc9aH84BK+5JFZLNkJKx3G9kzQg==}
     engines: {node: 20 || >=22}
 
-  brace-expansion@5.0.6:
-    resolution: {integrity: sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==}
-    engines: {node: 18 || 20 || >=22}
+  brace-expansion@5.0.9:
+    resolution: {integrity: sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg==}
+    engines: {node: 20 || >=22}
 
   braces@3.0.3:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
@@ -6708,8 +7390,8 @@ packages:
   browserify-zlib@0.2.0:
     resolution: {integrity: sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==}
 
-  browserslist@4.28.2:
-    resolution: {integrity: sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==}
+  browserslist@4.28.7:
+    resolution: {integrity: sha512-JxV13hNrFxqjOc8alRbq9dK1MM79NEXYpma2B2J4wAtpWS5zIEIKqWPGCl7N4o7Uc7B7itylh7SuDujATRyyTw==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
@@ -6719,9 +7401,6 @@ packages:
   bser@2.1.1:
     resolution: {integrity: sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==}
 
-  buffer-crc32@0.2.13:
-    resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
-
   buffer-crc32@1.0.0:
     resolution: {integrity: sha512-Db1SbgBS/fg/392AblrMJk97KggmvYhr4pB5ZIMTWtaivCPMWLkmb7m21cJvpvgK+J3nsU2CmmixNBZx4vFj/w==}
     engines: {node: '>=8.0.0'}
@@ -6729,6 +7408,10 @@ packages:
   buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
 
+  buffer-image-size@0.6.4:
+    resolution: {integrity: sha512-nEh+kZOPY1w+gcCMobZ6ETUp9WfibndnosbpwB1iJk/8Gt5ZF2bhS6+B6bPYz424KtwsR6Rflc3tCz1/ghX2dQ==}
+    engines: {node: '>=4.0'}
+
   buffer-xor@1.0.3:
     resolution: {integrity: sha512-571s0T7nZWK6vB67HI5dyUF7wXiNcfaPPPTl6zYCNApANjIvYJTg7hlud/+cJpdAhS7dVzqMLmfhfHR3rAcOjQ==}
 
@@ -6742,16 +7425,13 @@ packages:
     resolution: {integrity: sha512-lHblz4ahamxpTmnsk+MNTRWsjYKv965MwOrSJyeD588rR3Jcu7swE+0wN5F+PbL5cjgu/9ObkhfzEPuofEMwLA==}
     engines: {node: '>=10.0.0'}
 
-  builder-util-runtime@9.6.0:
-    resolution: {integrity: sha512-k9V5I18PXLepLZ8jVmPzsH+gVCVZ+9aMVLyCZ0ZLOkT2KSyiBblDCCN8WxDbjOpfLGNHZqqJPBmW0HYeqxlgkQ==}
+  builder-util-runtime@9.7.0:
+    resolution: {integrity: sha512-g/kR520giAFYkSXTzcmF3kqQq7wi8F6N6SzeDgZrqTBN+VHdmgWOyTdD1yD7AATDId/yXLvuP34CxW46/BwCdw==}
     engines: {node: '>=12.0.0'}
 
-  builder-util@26.9.0:
-    resolution: {integrity: sha512-+eocmbdisnyb40B9nAp/KREfYLXvGagxV50KZv/Zh4aflsr1fdY9Qxs6QG1Jtx1vH5d5NQ3hIcemUi4RSlFK/Q==}
-
-  builtin-modules@3.3.0:
-    resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
-    engines: {node: '>=6'}
+  builder-util@26.15.3:
+    resolution: {integrity: sha512-q2hn7Mbo2nFNkVekPiHFx6Nfo3hURmES3tfBn+k5Pqxl2RkmP3QGqZUhH/q9Pch/4G05NRhPjDlVj1O8q4Txvw==}
+    engines: {node: '>=14.0.0'}
 
   builtin-status-codes@3.0.0:
     resolution: {integrity: sha512-HpGFw18DgFWlncDfjTa2rcQ4W88O1mC8e8yZ2AvQY5KDaktSTwo+KRf6nHK6FRI5FyRyb/5T6+TSxfP7QyGsmQ==}
@@ -6772,14 +7452,14 @@ packages:
     resolution: {integrity: sha512-U1Z/ob71V/bXfVABvNr/Kumf5VyeQRBEm6Txb0PQ6S7V5GpBM3w4Cbqz/xPDicR5tN0uvDifng8C+5qECeGwyQ==}
     engines: {node: '>=6.0.0'}
 
-  cacache@19.0.1:
-    resolution: {integrity: sha512-hdsUxulXCi5STId78vRVYEtDAjq99ICAUktLTeTYsLoTE6Z8dS0c8pWNCxwdrk9YfJeobDZc2Y186hD/5ZQgFQ==}
-    engines: {node: ^18.17.0 || >=20.5.0}
-
   cacache@20.0.4:
     resolution: {integrity: sha512-M3Lab8NPYlZU2exsL3bMVvMrMqgwCnMWfdZbK28bn3pK6APT/Te/I8hjRPNu1uwORY9a1eEQoifXbKPQMfMTOA==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
+  cacache@21.0.1:
+    resolution: {integrity: sha512-pTwz/uj3Jyp6WXdJ6fWhR+7LVxVs6RyroQSn7KJwHsSxXuyGSp0pcMVcwSwTpCFq1X2YG8QBe0W+vN+cr0SwzA==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
+
   cacheable-lookup@5.0.4:
     resolution: {integrity: sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA==}
     engines: {node: '>=10.6.0'}
@@ -6788,8 +7468,8 @@ packages:
     resolution: {integrity: sha512-v+p6ongsrp0yTGbJXjgxPow2+DL93DASP4kXCDKb8/bwRtt9OEF3whggkkDkGNzgcWy2XaF4a8nZglC7uElscg==}
     engines: {node: '>=8'}
 
-  cacheable@2.3.5:
-    resolution: {integrity: sha512-EQfaKe09tl615iNvq/TBRWTFf1AKJNXYQSsMx0Z3EI0nA+pVsVPS8wJhnRlkbdacKPh1d0qVIhwTc2zsQNFEEg==}
+  cacheable@2.5.0:
+    resolution: {integrity: sha512-60cyAOytib/OzBw1JNSoSV/boK1AtHryDIjvVBk7XbN4ugfkM3+Sry7fEjNgPMGgOjuaZPAp8ruZ0Cxafwyq9g==}
 
   call-bind-apply-helpers@1.0.2:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
@@ -6825,8 +7505,8 @@ packages:
   caniuse-api@3.0.0:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
 
-  caniuse-lite@1.0.30001791:
-    resolution: {integrity: sha512-yk0l/YSrOnFZk3UROpDLQD9+kC1l4meK/wed583AXrzoarMGJcbRi2Q4RaUYbKxYAsZ8sWmaSa/DsLmdBeI1vQ==}
+  caniuse-lite@1.0.30001806:
+    resolution: {integrity: sha512-72Cuvd95zbSYPKq6Fhg8eDJRlzgWDf7/mtoZv6Qe/DYNCEBdNxoA3+rZAU2ZhGCpZlns3EssFavaZomckT5Uuw==}
 
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@@ -6861,19 +7541,6 @@ packages:
     resolution: {integrity: sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==}
     engines: {node: '>= 16'}
 
-  chevrotain-allstar@0.4.1:
-    resolution: {integrity: sha512-PvVJm3oGqrveUVW2Vt/eZGeiAIsJszYweUcYwcskg9e+IubNYKKD+rHHem7A6XVO22eDAL+inxNIGAzZ/VIWlA==}
-    peerDependencies:
-      chevrotain: ^12.0.0
-
-  chevrotain@12.0.0:
-    resolution: {integrity: sha512-csJvb+6kEiQaqo1woTdSAuOWdN0WTLIydkKrBnS+V5gZz0oqBrp4kQ35519QgK6TpBThiG3V1vNSHlIkv4AglQ==}
-    engines: {node: '>=22.0.0'}
-
-  chokidar@3.6.0:
-    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
-    engines: {node: '>= 8.10.0'}
-
   chokidar@5.0.0:
     resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
     engines: {node: '>= 20.19.0'}
@@ -6914,30 +7581,14 @@ packages:
     resolution: {integrity: sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==}
     engines: {node: '>= 10.0'}
 
-  clean-regexp@1.0.0:
-    resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
-    engines: {node: '>=4'}
-
   cli-cursor@3.1.0:
     resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
     engines: {node: '>=8'}
 
-  cli-cursor@5.0.0:
-    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
-    engines: {node: '>=18'}
-
   cli-spinners@2.6.1:
     resolution: {integrity: sha512-x/5fWmGMnbKQAaNwN+UZlV79qBLM9JFnJuJ03gIi5whrob0xV0ofNVHy9DhwGdsMJQc2OKv0oGmLzvaqvAVv+g==}
     engines: {node: '>=6'}
 
-  cli-truncate@2.1.0:
-    resolution: {integrity: sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==}
-    engines: {node: '>=8'}
-
-  cli-truncate@5.2.0:
-    resolution: {integrity: sha512-xRwvIOMGrfOAnM1JYtqQImuaNtDEv9v6oIYAs4LIHwTiKee8uwvIi363igssOC0O5U04i4AlENs79LQLu9tEMw==}
-    engines: {node: '>=20'}
-
   cliui@6.0.0:
     resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
 
@@ -6977,9 +7628,6 @@ packages:
   colord@2.9.3:
     resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
 
-  colorette@2.0.20:
-    resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
-
   columnify@1.6.0:
     resolution: {integrity: sha512-lomjuFZKfM6MSAnV9aCZC9sc0qGbmZdfygNv+nCpqVkSKdCxCklLtd16O0EILGkImHw9ZpHkAnHaB+8Zxq5W6Q==}
     engines: {node: '>=8.0.0'}
@@ -6995,10 +7643,6 @@ packages:
     resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
     engines: {node: '>=16'}
 
-  commander@13.1.0:
-    resolution: {integrity: sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==}
-    engines: {node: '>=18'}
-
   commander@14.0.3:
     resolution: {integrity: sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==}
     engines: {node: '>=20'}
@@ -7068,10 +7712,6 @@ packages:
   constants-browserify@1.0.0:
     resolution: {integrity: sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==}
 
-  content-disposition@0.5.4:
-    resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
-    engines: {node: '>= 0.6'}
-
   content-disposition@1.0.1:
     resolution: {integrity: sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q==}
     engines: {node: '>=18'}
@@ -7091,9 +7731,6 @@ packages:
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
-  cookie-signature@1.0.7:
-    resolution: {integrity: sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==}
-
   cookie-signature@1.2.2:
     resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
     engines: {node: '>=6.6.0'}
@@ -7115,11 +7752,8 @@ packages:
   core-js-compat@3.49.0:
     resolution: {integrity: sha512-VQXt1jr9cBz03b331DFDCCP90b3fanciLkgiOoy8SBHy06gNf+vQ1A3WFLqG7I8TipYIKeYK9wxd0tUrvHcOZA==}
 
-  core-js@3.48.0:
-    resolution: {integrity: sha512-zpEHTy1fjTMZCKLHUZoVeylt9XrzaIN2rbPXEt0k+q7JE5CkCZdo6bNq55bn24a69CH7ErAVLKijxJja4fw+UQ==}
-
-  core-util-is@1.0.2:
-    resolution: {integrity: sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==}
+  core-js@3.49.0:
+    resolution: {integrity: sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg==}
 
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
@@ -7143,8 +7777,8 @@ packages:
       typescript:
         optional: true
 
-  cosmiconfig@9.0.1:
-    resolution: {integrity: sha512-hr4ihw+DBqcvrsEDioRO31Z17x71pUYoNe/4h6Z0wB72p7MU7/9gH8Q3s12NFhHPfYBBOV3qyfUxmr/Yn3shnQ==}
+  cosmiconfig@9.0.2:
+    resolution: {integrity: sha512-gtTZxTDau1wL7Y7zifc2dd8jHSK/k6BTx/2Xp/BpdlAdnlYWFVt7qhJqgwi7637yRwRQ3qL4ZidbB4I8tA5VOg==}
     engines: {node: '>=14'}
     peerDependencies:
       typescript: '>=4.9.5'
@@ -7172,9 +7806,6 @@ packages:
     resolution: {integrity: sha512-piICUB6ei4IlTv1+653yq5+KoqfBYmj9bw6LqXoOneTMDXk5nM1qt12mFW1caG3LlJXEKW1Bp0WggEmIfQB34g==}
     engines: {node: '>= 14'}
 
-  crc@3.8.0:
-    resolution: {integrity: sha512-iX3mfgcTMIq3ZKLIsVFAbv7+Mc10kxabAGQb8HvjA1o3T1PIYprbakQ65d3I+2HGHt6nSKkM9PYjgoJO2KcFBQ==}
-
   create-ecdh@4.0.4:
     resolution: {integrity: sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==}
 
@@ -7187,8 +7818,8 @@ packages:
   create-require@1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
 
-  cronstrue@3.14.0:
-    resolution: {integrity: sha512-XnW4vuK/jPJjmTyDWiej1Zq36Od7ITwxaV2O1pzHZuyMVvdy7NAvyvIBzybt+idqSpfqYuoDG7uf/ocGtJVWxA==}
+  cronstrue@3.24.0:
+    resolution: {integrity: sha512-t/Ji3Ur2c/pzhIAWNwC0ftl3JAE4dLfCjAdZoTZXmPDZwcispnS1PaMcMS4OmIIXyIVouAz+yw+mfQiE3hz5OQ==}
     hasBin: true
 
   cross-dirname@0.1.0:
@@ -7295,8 +7926,8 @@ packages:
   css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
 
-  cssdb@8.8.0:
-    resolution: {integrity: sha512-QbLeyz2Bgso1iRlh7IpWk6OKa3lLNGXsujVjDMPl9rOZpxKeiG69icLpbLCFxeURwmcdIfZqQyhlooKJYM4f8Q==}
+  cssdb@8.9.0:
+    resolution: {integrity: sha512-J8jOU/hLjaXcO1LldOLraJSQpfLXRKof0I7mtbRyOy2AAXgqst0x9rlgi2qXeD6d0ou3ZLqcPAMqYVbpCbrxEw==}
 
   cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
@@ -7351,8 +7982,8 @@ packages:
     peerDependencies:
       cytoscape: ^3.2.0
 
-  cytoscape@3.33.2:
-    resolution: {integrity: sha512-sj4HXd3DokGhzZAdjDejGvTPLqlt84vNFN8m7bGsOzDY5DyVcxIb2ejIXat2Iy7HxWhdT/N1oKyheJ5YdpsGuw==}
+  cytoscape@3.34.0:
+    resolution: {integrity: sha512-62rNSrioXw93uliKFBwjukeQyeWwH2PqDrTac31r2P6464u3AUvTk0xS4LVvT251g7IgkFunrI48ZEZGjywSOg==}
     engines: {node: '>=0.10'}
 
   d3-array@2.12.1:
@@ -7497,30 +8128,15 @@ packages:
   dagre-d3-es@7.0.14:
     resolution: {integrity: sha512-P4rFMVq9ESWqmOgK+dlXvOtLwYg0i7u0HBGJER0LZDJT2VHIPAMZ/riPxqJceWMStH5+E61QxFra9kIS3AqdMg==}
 
-  damerau-levenshtein@1.0.8:
-    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
-
   data-urls@5.0.0:
     resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
     engines: {node: '>=18'}
 
-  data-view-buffer@1.0.2:
-    resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
-    engines: {node: '>= 0.4'}
-
-  data-view-byte-length@1.0.2:
-    resolution: {integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==}
-    engines: {node: '>= 0.4'}
-
-  data-view-byte-offset@1.0.1:
-    resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
-    engines: {node: '>= 0.4'}
-
   date-names@0.1.13:
     resolution: {integrity: sha512-IxxoeD9tdx8pXVcmqaRlPvrXIsSrSrIZzfzlOkm9u+hyzKp5Wk/odt9O/gd7Ockzy8n/WHeEpTVJ2bF3mMV4LA==}
 
-  dayjs@1.11.20:
-    resolution: {integrity: sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ==}
+  dayjs@1.11.21:
+    resolution: {integrity: sha512-98IT+HOahAisibz/yjKbzuOBwYcjJ7BCLPzARyHiyEBmRz4fatF+KPJszEHXsGYjUG234aH/cOjW1wwTbKUZlA==}
 
   debounce-fn@6.0.0:
     resolution: {integrity: sha512-rBMW+F2TXryBwB54Q0d8drNEI+TfoS9JpNTAoVpukbWEhjXQq4rySFYLaqXMFXwdv61Zb2OHtj5bviSoimqxRQ==}
@@ -7534,14 +8150,6 @@ packages:
       supports-color:
         optional: true
 
-  debug@3.2.7:
-    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-
   debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
     engines: {node: '>=6.0'}
@@ -7581,10 +8189,18 @@ packages:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
 
+  default-browser-id@5.0.0:
+    resolution: {integrity: sha512-A6p/pu/6fyBcA1TRz/GqWYPViplrftcW2gZC9q79ngNCKAeR/X3gcEdXQHl4KNXV+3wgIJ1CPkJQ3IHM6lcsyA==}
+    engines: {node: '>=18'}
+
   default-browser-id@5.0.1:
     resolution: {integrity: sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==}
     engines: {node: '>=18'}
 
+  default-browser@5.2.1:
+    resolution: {integrity: sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==}
+    engines: {node: '>=18'}
+
   default-browser@5.5.0:
     resolution: {integrity: sha512-H9LMLr5zwIbSxrmvikGuI/5KGhZ8E2zH3stkMgM5LpOWDutGM2JZaj460Udnf1a+946zc7YBgrqEWwbk7zHvGw==}
     engines: {node: '>=18'}
@@ -7600,10 +8216,6 @@ packages:
     resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
     engines: {node: '>= 0.4'}
 
-  define-lazy-prop@2.0.0:
-    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
-    engines: {node: '>=8'}
-
   define-lazy-prop@3.0.0:
     resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
     engines: {node: '>=12'}
@@ -7634,10 +8246,6 @@ packages:
   des.js@1.1.0:
     resolution: {integrity: sha512-r17GxjhUCjSRy8aiJpr8/UadFIzMzJGexI3Nmz4ADi9LYSFx4gTBp80+NaX/YsXWWLhpZ7v/v/ubEc/bCNfKwg==}
 
-  destroy@1.2.0:
-    resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
-    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
-
   detect-libc@2.1.2:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
@@ -7679,14 +8287,8 @@ packages:
   dir-compare@4.2.0:
     resolution: {integrity: sha512-2xMCmOoMrdQIPHdsTawECdNPwlVFB9zGcz3kuhmBO6U3oU+UQjsue0i8ayLKpgBcm+hcXPMVSGUN9d+pvJ6+VQ==}
 
-  dmg-builder@26.9.1:
-    resolution: {integrity: sha512-9o6jEwYrDJBXZzWBz7gOMVFM8S7ra7t5bYwEoqx5ZWLUS/4z6cboXqHOly/AJ9jkVKqT+Z3BdXkvBuJvotHiYw==}
-
-  dmg-license@1.0.11:
-    resolution: {integrity: sha512-ZdzmqwKmECOWJpqefloC5OJy1+WZBBse5+MR88z9g9Zn4VY+WYUkAyojmhzJckH5YbbZGcYIuGAkY5/Ys5OM2Q==}
-    engines: {node: '>=8'}
-    os: [darwin]
-    hasBin: true
+  dmg-builder@26.15.3:
+    resolution: {integrity: sha512-O3zJUFUYHJKgzPqioHxfxzBzlSC1eXCSr79gMSBKBP5AgjjpmrydMsMLotEg9fAJF36vdUncb+4ndRNxoPdlSQ==}
 
   dns-packet@5.6.1:
     resolution: {integrity: sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==}
@@ -7700,13 +8302,9 @@ packages:
     resolution: {integrity: sha512-XJgGhoR/CLpqshm4d3L7rzH6t8NgDFUIIpztYlLHIApeJjMZKYJMz2zxPsYxnejq5h3ELYSw/RBsi3t5h7gNTA==}
     engines: {node: '>= 8.0'}
 
-  dockerode@4.0.10:
-    resolution: {integrity: sha512-8L/P9JynLBiG7/coiA4FlQXegHltRqS0a+KqI44P1zgQh8QLHTg7FKOwhkBgSJwZTeHsq30WRoVFLuwkfK0YFg==}
-    engines: {node: '>= 8.0'}
-
-  doctrine@2.1.0:
-    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
-    engines: {node: '>=0.10.0'}
+  dockerode@5.0.1:
+    resolution: {integrity: sha512-avsq/xk4YPIrn0CgleX5bjT9Y8IT1p9PxrNQ++RBQ2WEyFfHCTDsT9kmyxz+H/axnjAwg8wJWEIuPGOUuNupiA==}
+    engines: {node: '>= 14.17'}
 
   doctrine@3.0.0:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
@@ -7757,8 +8355,8 @@ packages:
     resolution: {integrity: sha512-gYzvtM72ZtxQO0T048kd6HWSbbGCNOUwcnfQ01cqIJ4X2IYKFFHZ5mKvrQETcFXxsRObZulDaKmy//R7TPtsBg==}
     engines: {node: '>=20.19.0'}
 
-  dompurify@3.4.0:
-    resolution: {integrity: sha512-nolgK9JcaUXMSmW+j1yaSvaEaoXYHwWyGJlkoCTghc97KgGDDSnpoU/PlEnw63Ah+TGKFOyY+X5LnxaWbCSfXg==}
+  dompurify@3.4.12:
+    resolution: {integrity: sha512-zQvGet8Z2sWbQhCmfFz/T5QWH2oBmjnqK3qvOjaqaNLrLEF912WamU+ohnTp0TCep/MFVHpdJuCZEdFOdTnEFg==}
 
   domutils@2.8.0:
     resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
@@ -7801,6 +8399,9 @@ packages:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
 
+  duplexer2@0.1.4:
+    resolution: {integrity: sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==}
+
   earcut@3.0.2:
     resolution: {integrity: sha512-X7hshQbLyMJ/3RPhyObLARM2sNxxmRALLKx1+NVFFnQ9gKzmCrxm9+uLIAdBcvc8FNLpctqlQ2V6AE92Ol9UDQ==}
 
@@ -7820,26 +8421,26 @@ packages:
     engines: {node: '>=0.12.18'}
     hasBin: true
 
-  electron-builder-squirrel-windows@26.9.1:
-    resolution: {integrity: sha512-mz3b6Fj1yQ7NGffz5hhHUZ4Y8vJhluSjjYi+UjqCdF3AKbIsFoi85xdUFc0aJ4c7dh05h7hHKqeiGkKb5BEalQ==}
+  electron-builder-squirrel-windows@26.15.3:
+    resolution: {integrity: sha512-Jc19XPV9y9+2bAdZPkXuVNGNIEFBq9poHC61l8Kv6FdK7DRG3+Ic0rerC0DXOaeHNz8yW0fg/JnF8GQROOF5MA==}
 
-  electron-builder@26.9.1:
-    resolution: {integrity: sha512-BJMGeX4zUf/p2aMv8+GuLJFo4NaUo+8OTNTAW7DtQb6GGHmp6Y9gd6L+sRfDaI8IfYyBqEu3euvwC/DHrlGTPg==}
+  electron-builder@26.15.3:
+    resolution: {integrity: sha512-a1KM5heqS3gQCZzizXEI8RjJy3QVogULPdeSknt76uLDpBIW/HDGsMg/XgP0riP6PI9COsRvFITKKGDqA8fJxA==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
   electron-devtools-installer@4.0.0:
     resolution: {integrity: sha512-9Tntu/jtfSn0n6N/ZI6IdvRqXpDyLQiDuuIbsBI+dL+1Ef7C8J2JwByw58P3TJiNeuqyV3ZkphpNWuZK5iSY2w==}
 
-  electron-publish@26.9.0:
-    resolution: {integrity: sha512-gsy+U7JfDuD1lPOrCXeECDQoUsWjFah3s1Fv3pqKnjdJuKYDDvGdvC74kLHVG6nl5G0uQ7YN0eftCQ4rUmhvVw==}
+  electron-publish@26.15.3:
+    resolution: {integrity: sha512-g/2bn8YTavY4cuS5F+jOS7zmZbXXBV8KZ8yHKfJjFPoKtzBqrpCdNPxBd3tqdBwP7BVd0lGzf7Bk2s0KesWZ4Q==}
 
   electron-store@11.0.2:
     resolution: {integrity: sha512-4VkNRdN+BImL2KcCi41WvAYbh6zLX5AUTi4so68yPqiItjbgTjqpEnGAqasgnG+lB6GuAyUltKwVopp6Uv+gwQ==}
     engines: {node: '>=20'}
 
-  electron-to-chromium@1.5.332:
-    resolution: {integrity: sha512-7OOtytmh/rINMLwaFTbcMVvYXO3AUm029X0LcyfYk0B557RlPkdpTpnH9+htMlfu5dKwOmT0+Zs2Aw+lnn6TeQ==}
+  electron-to-chromium@1.5.396:
+    resolution: {integrity: sha512-yHiw2Y3C3H9U6TMbOfoWK/BPreiOPXRfTWPBwQBoZG6/8TB6eOPnsy5oaRYuatR7Fw2SJ4kKforgufeo7fq0EQ==}
 
   electron-window-state@5.0.3:
     resolution: {integrity: sha512-1mNTwCfkolXl3kMf50yW3vE2lZj0y92P/HYWFBrb+v2S/pCka5mdwN3cagKm458A7NjndSwijynXgcLWRodsVg==}
@@ -7849,8 +8450,8 @@ packages:
     resolution: {integrity: sha512-bO3y10YikuUwUuDUQRM4KfwNkKhnpVO7IPdbsrejwN9/AABJzzTQ4GeHwyzNSrVO+tEH3/Np255a3sVZpZDjvg==}
     engines: {node: '>=8.0.0'}
 
-  electron@42.0.0:
-    resolution: {integrity: sha512-in5jnW/Ywy3Rh3FPr4MR80exPEkywKYAmDJRZ/gIKlr8VXEi3zXgiAZbf0Si7KRccHTF2y8euVMRz7M6HqTjMA==}
+  electron@43.2.0:
+    resolution: {integrity: sha512-80zvrgG7ZRXD+tD0IyLvrnN9n+veSxadMRsMaC9wKKP3iUbtC7rGM8+dVuCmOb0Rrwwv8ESW4awnUZh9Hbp1fA==}
     engines: {node: '>= 22.12.0'}
     hasBin: true
 
@@ -7864,9 +8465,6 @@ packages:
   emoji-regex-xs@1.0.0:
     resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
 
-  emoji-regex@10.6.0:
-    resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
-
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
@@ -7897,14 +8495,11 @@ packages:
     resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
     engines: {node: '>= 0.8'}
 
-  encoding@0.1.13:
-    resolution: {integrity: sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==}
-
   end-of-stream@1.4.5:
     resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
 
-  enhanced-resolve@5.20.1:
-    resolution: {integrity: sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==}
+  enhanced-resolve@5.24.5:
+    resolution: {integrity: sha512-L1l8TNvomm6UVW5B253AGxQagSQr+vGwhMlrrfRS2qmhx46AMpMVJKQYLvWYbysTMY8VoicOvzHzoHMbyzB+4A==}
     engines: {node: '>=10.13.0'}
 
   enquirer@2.3.6:
@@ -7947,20 +8542,12 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  environment@1.1.0:
-    resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==}
-    engines: {node: '>=18'}
-
   err-code@2.0.3:
     resolution: {integrity: sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==}
 
   error-ex@1.3.4:
     resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
 
-  es-abstract@1.24.1:
-    resolution: {integrity: sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==}
-    engines: {node: '>= 0.4'}
-
   es-define-property@1.0.1:
     resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
     engines: {node: '>= 0.4'}
@@ -7969,12 +8556,8 @@ packages:
     resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
     engines: {node: '>= 0.4'}
 
-  es-iterator-helpers@1.2.2:
-    resolution: {integrity: sha512-BrUQ0cPTB/IwXj23HtwHjS9n7O4h9FX94b4xc5zlTHxeLgTAdzYUDyy6KdExAl9lbN5rtfe44xpjpmj9grxs5w==}
-    engines: {node: '>= 0.4'}
-
-  es-module-lexer@2.0.0:
-    resolution: {integrity: sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==}
+  es-module-lexer@2.3.1:
+    resolution: {integrity: sha512-shc1dbU90Yl/xq1QrC7QRtfcwURZuVRfPhZbDoldJ1cn1gzDvBaBWlv0eFolj5+0znnPJz5TXLxsN77X/12KTA==}
 
   es-object-atoms@1.1.1:
     resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
@@ -7984,13 +8567,8 @@ packages:
     resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
     engines: {node: '>= 0.4'}
 
-  es-shim-unscopables@1.1.0:
-    resolution: {integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==}
-    engines: {node: '>= 0.4'}
-
-  es-to-primitive@1.3.0:
-    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
-    engines: {node: '>= 0.4'}
+  es-toolkit@1.49.0:
+    resolution: {integrity: sha512-G5iZ6Pc/FNRY/soKZHC+TxGDD83rHUDXxzaWhGCX44vAv/tMs56WMusnm/KMNK+luUPsgA9U28cGr4RDlSzL2g==}
 
   es6-error@4.1.1:
     resolution: {integrity: sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==}
@@ -8023,159 +8601,15 @@ packages:
     resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==}
     engines: {node: '>=12'}
 
-  eslint-compat-utils@0.5.1:
-    resolution: {integrity: sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==}
-    engines: {node: '>=12'}
-    peerDependencies:
-      eslint: '>=6.0.0'
+  eslint-plugin-element-call@https://codeload.github.com/element-hq/element-call/tar.gz/2d64cf4b308c770118dbbdb914af332e5baa7702#path:/eslint:
+    resolution: {gitHosted: true, integrity: sha512-qGDBRFWHo6ZDWGjFah9vXP4xgqQ/IxFuuUJ2ge7NHP+q/rzzve9RY4aIvMb3XVM3QokXWJw9FKyNAxFRV+d8tg==, path: /eslint, tarball: https://codeload.github.com/element-hq/element-call/tar.gz/2d64cf4b308c770118dbbdb914af332e5baa7702}
+    version: 0.0.0
 
-  eslint-config-google@0.14.0:
-    resolution: {integrity: sha512-WsbX4WbjuMvTdeVL6+J3rK1RGhCTqjsFjX7UMSMgZiyxxaNLkoJENbrGExzERFeoTpGw3F3FypTiWAP9ZXzkEw==}
-    engines: {node: '>=0.10.0'}
-    peerDependencies:
-      eslint: '>=5.16.0'
-
-  eslint-config-prettier@10.1.8:
-    resolution: {integrity: sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==}
-    hasBin: true
-    peerDependencies:
-      eslint: '>=7.0.0'
-
-  eslint-import-resolver-node@0.3.9:
-    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
-
-  eslint-module-utils@2.12.1:
-    resolution: {integrity: sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint:
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
-
-  eslint-plugin-deprecate@0.9.0:
-    resolution: {integrity: sha512-M4rP6pRQcvM/LxafQ0PzNKYkfuDn06pOW2uRB2e2WFJiE2KvQqFspxo2Rta3ee6NatHzqDQ4q8UPnaxGMtn5Zw==}
-    engines: {node: '>=18.18.0'}
-    peerDependencies:
-      eslint: ^8.0.0 || ^9.0.0
-
-  eslint-plugin-es-x@7.8.0:
-    resolution: {integrity: sha512-7Ds8+wAAoV3T+LAKeu39Y5BzXCrGKrcISfgKEqTS4BDN8SFEDQd0S43jiQ8vIa3wUKD07qitZdfzlenSi8/0qQ==}
-    engines: {node: ^14.18.0 || >=16.0.0}
+  eslint-plugin-storybook@10.5.5:
+    resolution: {integrity: sha512-xGCrddoZ8pMmwc7M5mp+habWbvqBjRuyGVTJ6RpavpoAP6NBUfGSRXHuBs7cHRDpDSuErYeDiEo4XHTonRp68g==}
     peerDependencies:
       eslint: '>=8'
-
-  eslint-plugin-import@2.32.0:
-    resolution: {integrity: sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-
-  eslint-plugin-jest@29.15.2:
-    resolution: {integrity: sha512-kEN4r9RZl1xcsb4arGq89LrcVdOUFII/JSCwtTPJyv16mDwmPrcuEQwpxqZHeINvcsd7oK5O/rhdGlxFRaZwvQ==}
-    engines: {node: ^20.12.0 || ^22.0.0 || >=24.0.0}
-    peerDependencies:
-      '@typescript-eslint/eslint-plugin': ^8.0.0
-      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
-      jest: '*'
-      typescript: '>=4.8.4 <7.0.0'
-    peerDependenciesMeta:
-      '@typescript-eslint/eslint-plugin':
-        optional: true
-      jest:
-        optional: true
-      typescript:
-        optional: true
-
-  eslint-plugin-jsx-a11y@6.10.2:
-    resolution: {integrity: sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9
-
-  eslint-plugin-matrix-org@3.0.0:
-    resolution: {integrity: sha512-xOPMeyLxOgoB2SsPhJmIc+drorZmXozSBo3X9whk/62DvbVpJcnththOCGx8ljYScADLb+baNOeN+wKZqwkldw==}
-    peerDependencies:
-      '@babel/core': '*'
-      '@babel/eslint-parser': '*'
-      '@babel/eslint-plugin': '*'
-      '@stylistic/eslint-plugin': '*'
-      '@typescript-eslint/eslint-plugin': '*'
-      '@typescript-eslint/parser': '*'
-      eslint: <9
-      eslint-config-google: '*'
-      eslint-config-prettier: '*'
-      eslint-plugin-deprecate: '*'
-      eslint-plugin-import: '*'
-      eslint-plugin-jest: '*'
-      eslint-plugin-jsx-a11y: '*'
-      eslint-plugin-react: '*'
-      eslint-plugin-react-hooks: '*'
-      eslint-plugin-unicorn: <57
-      prettier: '*'
-      typescript: '*'
-
-  eslint-plugin-n@17.24.0:
-    resolution: {integrity: sha512-/gC7/KAYmfNnPNOb3eu8vw+TdVnV0zhdQwexsw6FLXbhzroVj20vRn2qL8lDWDGnAQ2J8DhdfvXxX9EoxvERvw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    peerDependencies:
-      eslint: '>=8.23.0'
-
-  eslint-plugin-react-compiler@19.0.0-beta-ebf51a3-20250411:
-    resolution: {integrity: sha512-R7ncuwbCPFAoeMlS56DGGSJFxmRtlWafYH/iWyep5Ks0RaPqTCL4k5gA87axUBBcITsaIgUGkbqAxDxl8Xfm5A==}
-    engines: {node: ^14.17.0 || ^16.0.0 || >= 18.0.0}
-    peerDependencies:
-      eslint: '>=7'
-
-  eslint-plugin-react-compiler@19.1.0-rc.2:
-    resolution: {integrity: sha512-oKalwDGcD+RX9mf3NEO4zOoUMeLvjSvcbbEOpquzmzqEEM2MQdp7/FY/Hx9NzmUwFzH1W9SKTz5fihfMldpEYw==}
-    engines: {node: ^14.17.0 || ^16.0.0 || >= 18.0.0}
-    peerDependencies:
-      eslint: '>=7'
-
-  eslint-plugin-react-hooks@7.1.1:
-    resolution: {integrity: sha512-f2I7Gw6JbvCexzIInuSbZpfdQ44D7iqdWX01FKLvrPgqxoE7oMj8clOfto8U6vYiz4yd5oKu39rRSVOe1zRu0g==}
-    engines: {node: '>=18'}
-    peerDependencies:
-      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0 || ^10.0.0
-
-  eslint-plugin-react@7.37.5:
-    resolution: {integrity: sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
-
-  eslint-plugin-storybook@10.3.6:
-    resolution: {integrity: sha512-8udrL+Rmp5LFaZvgRe4J226X1MYls25bWCyHuzR5X8s2qbFTryX+wKC+o/0Ato4A1AvwnDg8OOMPc6yWJ9JpcA==}
-    peerDependencies:
-      eslint: '>=8'
-      storybook: ^10.3.6
-
-  eslint-plugin-unicorn@56.0.1:
-    resolution: {integrity: sha512-FwVV0Uwf8XPfVnKSGpMg7NtlZh0G0gBarCaFcMUOoqPxXryxdYxTRRv4kH6B9TFCVIrjRXG+emcxIk2ayZilog==}
-    engines: {node: '>=18.18'}
-    peerDependencies:
-      eslint: '>=8.56.0'
-
-  eslint-rule-composer@0.3.0:
-    resolution: {integrity: sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg==}
-    engines: {node: '>=4.0.0'}
+      storybook: ^10.5.5
 
   eslint-scope@5.1.1:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
@@ -8185,18 +8619,10 @@ packages:
     resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  eslint-visitor-keys@2.1.0:
-    resolution: {integrity: sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==}
-    engines: {node: '>=10'}
-
   eslint-visitor-keys@3.4.3:
     resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  eslint-visitor-keys@4.2.1:
-    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   eslint-visitor-keys@5.0.1:
     resolution: {integrity: sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
@@ -8207,10 +8633,6 @@ packages:
     deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
     hasBin: true
 
-  espree@10.4.0:
-    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   espree@9.6.1:
     resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -8254,12 +8676,6 @@ packages:
     resolution: {integrity: sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==}
     engines: {node: '>=6'}
 
-  eventemitter3@4.0.7:
-    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
-
-  eventemitter3@5.0.4:
-    resolution: {integrity: sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==}
-
   events-universal@1.0.1:
     resolution: {integrity: sha512-LUd5euvbMLpwOF8m6ivPCbhQeSiYVNb8Vs0fQ8QjXo0JTkEHpz8pxdQf0gStltaPpw0Cca8b39KxvK9cfKRiAw==}
 
@@ -8285,17 +8701,13 @@ packages:
     resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
     engines: {node: '>=12.0.0'}
 
-  expect@30.3.0:
-    resolution: {integrity: sha512-1zQrciTiQfRdo7qJM1uG4navm8DayFa2TgCSRlzUyNkhcJ6XUZF3hjnpkyr3VhAqPH7i/9GkG7Tv5abz6fqz0Q==}
+  expect@30.4.1:
+    resolution: {integrity: sha512-PMARsyh/JtqC20HoGqlFcIlQAyqUtW4PlI1rup1uhYJtKuwAjbvWi3GQMAn+STdHum/dk8xrKfUM1+5SAwpolA==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
   exponential-backoff@3.1.3:
     resolution: {integrity: sha512-ZgEeZXj30q+I0EN+CbSSpIyPaJ5HVQD18Z1m+u1FXbAeT94mr1zw50q4q6jiiC447Nl/YTcIYSAftiGqetwXCA==}
 
-  express@4.22.1:
-    resolution: {integrity: sha512-F2X8g9P1X7uCPZMA3MVf9wcTqlyNp7IhH5qPCI0izhaOIYXaW9L535tGA3qmjRzpH+bZczqq7hVKxTR4NWnu+g==}
-    engines: {node: '>= 0.10.0'}
-
   express@5.2.1:
     resolution: {integrity: sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==}
     engines: {node: '>= 18'}
@@ -8306,22 +8718,10 @@ packages:
   extend@3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
 
-  extract-zip@2.0.1:
-    resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==}
-    engines: {node: '>= 10.17.0'}
-    hasBin: true
-
-  extsprintf@1.4.1:
-    resolution: {integrity: sha512-Wrk35e8ydCKDj/ArClo1VrPVmN8zph5V4AtHwIuHhvMXsKf73UT3BOD+azBIW+3wOJ4FhEH7zyaJCFvChjYvMA==}
-    engines: {'0': node >=0.6.0}
-
   fake-indexeddb@6.2.5:
     resolution: {integrity: sha512-CGnyrvbhPlWYMngksqrSSUT1BAVP49dZocrHuK0SvtR0D5TMs5wP0o3j7jexDJW01KSadjBp1M/71o/KR3nD1w==}
     engines: {node: '>=18'}
 
-  fast-content-type-parse@3.0.0:
-    resolution: {integrity: sha512-ZvLdcY8P+N8mGQJahJV5G4U88CSvT1rP8ApL6uETe88MBXrBHAkZlSEySdUlyztF7ccb+Znos3TFqaepHxdhBg==}
-
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -8338,8 +8738,8 @@ packages:
   fast-levenshtein@2.0.6:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
 
-  fast-uri@3.1.2:
-    resolution: {integrity: sha512-rVjf7ArG3LTk+FS6Yw81V1DLuZl1bRbNrev6Tmd/9RaroeeRRJhAt7jg/6YFxbvAQXUCavSoZhPPj6oOx+5KjQ==}
+  fast-uri@3.1.5:
+    resolution: {integrity: sha512-gHwA1O9LDIcKunMKhObS/HimwtehO1nPUECKAu5TpKgaO19fcWEl4bliWe1jWxVFvIXztJjjQ4L8XQ1EU9f7Jw==}
 
   fastest-levenshtein@1.0.16:
     resolution: {integrity: sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==}
@@ -8348,24 +8748,17 @@ packages:
   fastq@1.20.1:
     resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
 
-  faye-websocket@0.11.4:
-    resolution: {integrity: sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==}
-    engines: {node: '>=0.8.0'}
-
   fb-watchman@2.0.2:
     resolution: {integrity: sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==}
 
   fd-package-json@2.0.0:
     resolution: {integrity: sha512-jKmm9YtsNXN789RS/0mSzOC1NUq9mkVd65vbSSVsKdjGvYXBuE4oWe2QOEoFeRmJg+lPuZxpmrfFclNhoRMneQ==}
 
-  fd-slicer@1.1.0:
-    resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
-
   fdir@6.5.0:
     resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
-      picomatch: 4.0.4
+      picomatch: ^3 || ^4
     peerDependenciesMeta:
       picomatch:
         optional: true
@@ -8381,8 +8774,8 @@ packages:
     resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
     engines: {node: '>=8'}
 
-  file-entry-cache@11.1.3:
-    resolution: {integrity: sha512-oMbq0PD6VIiIwMF6LIa7MEwd/l9huKwmqRKXqmrkqIZv8CvRbfowL+L0ryAl8h//HfAS0zS+4SbYoRyAoA6BJA==}
+  file-entry-cache@11.1.5:
+    resolution: {integrity: sha512-+PFTHITI08JIGhnNpGNI8T8inUpgZfk3GNEqfT9R2zZV2iFXg3CvqzSl/uEhs7TSGujYRELEANyDvS8Fj7+S7Q==}
 
   file-entry-cache@6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
@@ -8403,18 +8796,14 @@ packages:
   filelist@1.0.4:
     resolution: {integrity: sha512-w1cEuf3S+DrLCQL7ET6kz+gmlJdbq9J7yXCSjK/OZCPA+qEN1WyF4ZAf0YYJa4/shHJra2t/d/r8SV4Ji+x+8Q==}
 
-  filesize@11.0.17:
-    resolution: {integrity: sha512-oHLTvMLw6imZUl1se/RBQrFlyy50nXce4sU7yGR6Qc0JgCwqnfiFsAnEwotdGmfKLD7SArGUk2/5STU0k8LOBQ==}
+  filesize@11.0.22:
+    resolution: {integrity: sha512-RlCVs9CY+oSsRnNZn95J9vDXjNjOwddKyTFjOYtA4yxYVIxBnwiVVGJX+TFhsmu3uUf81JDGyijtYL9xgawlTw==}
     engines: {node: '>= 10.8.0'}
 
   fill-range@7.1.1:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
-  finalhandler@1.3.2:
-    resolution: {integrity: sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==}
-    engines: {node: '>= 0.8'}
-
   finalhandler@2.1.1:
     resolution: {integrity: sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==}
     engines: {node: '>= 18.0.0'}
@@ -8431,15 +8820,15 @@ packages:
     resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
     engines: {node: ^10.12.0 || >=12.0.0}
 
-  flat-cache@6.1.22:
-    resolution: {integrity: sha512-N2dnzVJIphnNsjHcrxGW7DePckJ6haPrSFqpsBUhHYgwtKGVq4JrBGielEGD2fCVnsGm1zlBVZ8wGhkyuetgug==}
+  flat-cache@6.1.23:
+    resolution: {integrity: sha512-f++BY9pTk+983xK1FLzlLpmM0i0z+jHmx3QESGkURMXujQZz1k5wzwX6hjnQ8goaD0B+sYnDK1yZ6MTyZfUaqA==}
 
   flat@5.0.2:
     resolution: {integrity: sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==}
     hasBin: true
 
-  flatted@3.4.2:
-    resolution: {integrity: sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==}
+  flatted@3.4.4:
+    resolution: {integrity: sha512-5+ybhBZANEJxaH3X5evAFatUxLfEHSr7n6kYJ+1Qd0mUqr4eu9gIf6GDbWHf8RJijHrjjO8G+la14SlL2SeS1Q==}
 
   focus-lock@1.3.6:
     resolution: {integrity: sha512-Ik/6OCk9RQQ0T5Xw+hKNLWrjSMtv51dD4GRmJjbD5a58TIEpI5a5iXagKVl3Z5UuyslMCA8Xwnu76jQob62Yhg==}
@@ -8468,8 +8857,8 @@ packages:
     resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
     engines: {node: '>=14'}
 
-  form-data@4.0.5:
-    resolution: {integrity: sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==}
+  form-data@4.0.6:
+    resolution: {integrity: sha512-vKatAh4SlVfgbv+YtmhiRjhEMJsYpsG1Y2rMQtR+SVSbytsSD1YGzDIcrAJmdFec88u/+VoGmxnl+80gL1tRCQ==}
     engines: {node: '>= 6'}
 
   formatly@0.3.0:
@@ -8477,9 +8866,6 @@ packages:
     engines: {node: '>=18.3.0'}
     hasBin: true
 
-  forwarded-parse@2.1.2:
-    resolution: {integrity: sha512-alTFZZQDKMporBH77856pXgzhEzaUVmLCDk+egLgIgHst3Tpndzz8MnKe+GzRJRfvVdn69HhpW7cmXzvtLvJAw==}
-
   forwarded@0.2.0:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
     engines: {node: '>= 0.6'}
@@ -8487,17 +8873,24 @@ packages:
   fraction.js@5.3.4:
     resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
 
-  fresh@0.5.2:
-    resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
-    engines: {node: '>= 0.6'}
+  framer-motion@12.42.2:
+    resolution: {integrity: sha512-5XY9luDiu0oHfHBjpDthFMh0ES+122w6p/papSJBweMkO8Sn+PW2QaEgRblQBpWFnuvZS5qvarpt/hO2pjGmnw==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
 
   fresh@2.0.0:
     resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
     engines: {node: '>= 0.8'}
 
-  front-matter@4.0.2:
-    resolution: {integrity: sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==}
-
   fs-constants@1.0.0:
     resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
 
@@ -8505,8 +8898,12 @@ packages:
     resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
     engines: {node: '>=12'}
 
-  fs-extra@11.3.5:
-    resolution: {integrity: sha512-eKpRKAovdpZtR1WopLHxlBWvAgPny3c4gX1G5Jhwmmw4XJj0ifSD5qB5TOo8hmA0wlRKDAOAhEE1yVPgs6Fgcg==}
+  fs-extra@11.3.6:
+    resolution: {integrity: sha512-w8ZNZr2mKIc7qeNaQ9AVPT1+iFaI+Avd4xudVOvdDJ8VytREi1Ft5Ih7hd9jjehod8vAM5GMsfQ/TpPf4EyoEA==}
+    engines: {node: '>=14.14'}
+
+  fs-extra@11.4.0:
+    resolution: {integrity: sha512-EQsFzMUJkCKGr1ePqlYADkIUmHW1s3ZXr5Yqy6wbGrfUCphpl2maM/kyOIRA2HpP3AaFQTZXD4ldjek+nccddA==}
     engines: {node: '>=14.14'}
 
   fs-extra@7.0.1:
@@ -8548,13 +8945,6 @@ packages:
     resolution: {integrity: sha512-0NVVC0TaP7dSTvn1yMiy6d6Q8gifzbvQafO46RtLG/kHJUBNd+pVRGOBoK44wNBvtSPUJRfdVvkFdD3p0xvyZg==}
     engines: {node: '>=14.16'}
 
-  function.prototype.name@1.1.8:
-    resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
-    engines: {node: '>= 0.4'}
-
-  functions-have-names@1.2.3:
-    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
-
   generator-function@2.0.1:
     resolution: {integrity: sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==}
     engines: {node: '>= 0.4'}
@@ -8583,9 +8973,9 @@ packages:
     resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
     engines: {node: '>=8.0.0'}
 
-  get-port@7.2.0:
-    resolution: {integrity: sha512-afP4W205ONCuMoPBqcR6PSXnzX35KTcJygfJfcp+QY+uwm3p20p1YczWXhlICIzGMCxYBQcySEcOgsJcrkyobg==}
-    engines: {node: '>=16'}
+  get-port@5.1.1:
+    resolution: {integrity: sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==}
+    engines: {node: '>=8'}
 
   get-proto@1.0.1:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
@@ -8599,10 +8989,6 @@ packages:
     resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
     engines: {node: '>=10'}
 
-  get-symbol-description@1.1.0:
-    resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
-    engines: {node: '>= 0.4'}
-
   get-tsconfig@4.14.0:
     resolution: {integrity: sha512-yTb+8DXzDREzgvYmh6s9vHsSVCHeC0G3PI5bEXNBHtmshPnO+S5O7qgLEOn0I5QvMy6kpZN8K1NKGyilLb93wA==}
 
@@ -8659,24 +9045,17 @@ packages:
     resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
     engines: {node: '>=8'}
 
-  globals@15.15.0:
-    resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
-    engines: {node: '>=18'}
-
   globalthis@1.0.4:
     resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
     engines: {node: '>= 0.4'}
 
-  globby@16.2.0:
-    resolution: {integrity: sha512-QrJia2qDf5BB/V6HYlDTs0I0lBahyjLzpGQg3KT7FnCdTonAyPy2RtY802m2k4ALx6Dp752f82WsOczEVr3l6Q==}
+  globby@16.2.2:
+    resolution: {integrity: sha512-NLvV9ubZ6NDsJaOpKPy3cQeJpKi9DcWiyCiFUpJPA0YihRqiE6RWaLUmgNNPr8MgPpLZjnBjSmou7uZBRJv9wA==}
     engines: {node: '>=20'}
 
   globjoin@0.1.4:
     resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==}
 
-  globrex@0.1.2:
-    resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
-
   gopd@1.2.0:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
@@ -8694,21 +9073,18 @@ packages:
   hachure-fill@0.5.2:
     resolution: {integrity: sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==}
 
-  handle-thing@2.0.1:
-    resolution: {integrity: sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==}
-
   handlebars@4.7.9:
     resolution: {integrity: sha512-4E71E0rpOaQuJR2A3xDZ+GM1HyWYv1clR58tC8emQNeQe3RH7MAzSbat+V0wG78LQBo6m6bzSG/L4pBuCsgnUQ==}
     engines: {node: '>=0.4.7'}
     hasBin: true
 
+  happy-dom@20.11.1:
+    resolution: {integrity: sha512-XSt8tMzbW9ymE7687xztkO1ckR7qJNQ3LywY9vlYGhGi3zXrGBHuUo2Cl1ztZaICW+1eAGdkLbj6iwVqDT33kg==}
+    engines: {node: '>=20.0.0'}
+
   harmony-reflect@1.6.2:
     resolution: {integrity: sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==}
 
-  has-bigints@1.1.0:
-    resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
-    engines: {node: '>= 0.4'}
-
   has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
@@ -8720,10 +9096,6 @@ packages:
   has-property-descriptors@1.0.2:
     resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
 
-  has-proto@1.2.0:
-    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
-    engines: {node: '>= 0.4'}
-
   has-symbols@1.1.0:
     resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
     engines: {node: '>= 0.4'}
@@ -8747,12 +9119,8 @@ packages:
     resolution: {integrity: sha512-iZyKG96/JwPz1N55vj2Ie2vXbhu440zfUfJvSwEqEbeLluk7NnapfGqa7LH0mOsnDxTF85Mx8/dyR6HfqcbmbQ==}
     engines: {node: '>=20'}
 
-  hasown@2.0.2:
-    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
-    engines: {node: '>= 0.4'}
-
-  hasown@2.0.3:
-    resolution: {integrity: sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==}
+  hasown@2.0.4:
+    resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
     engines: {node: '>= 0.4'}
 
   hast-util-to-html@9.0.5:
@@ -8765,12 +9133,6 @@ packages:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
-  hermes-estree@0.25.1:
-    resolution: {integrity: sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==}
-
-  hermes-parser@0.25.1:
-    resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
-
   highlight.js@11.11.1:
     resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
     engines: {node: '>=12.0.0'}
@@ -8790,22 +9152,16 @@ packages:
   hookified@2.2.0:
     resolution: {integrity: sha512-p/LgFzRN5FeoD3DLS6bkUapeye6E4SI6yJs6KetENd18S+FBthqYq2amJUWpt5z0EQwwHemidjY5OqJGEKm5uA==}
 
-  hosted-git-info@2.8.9:
-    resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
+  hosted-git-info@10.1.1:
+    resolution: {integrity: sha512-DeOnSPAvOndYKfw075gt8yZzQ7S2hNztw34zBTfhIzLhmBTswIBg5/y+pqu/VD5cYWm5goAFTusDmUEmKZ0PEQ==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
 
   hosted-git-info@4.1.0:
     resolution: {integrity: sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==}
     engines: {node: '>=10'}
 
-  hosted-git-info@9.0.2:
-    resolution: {integrity: sha512-M422h7o/BR3rmCQ8UHi7cyyMqKltdP9Uo+J2fXK+RSAY+wTcKOIRyhTuKv4qn+DJf3g+PL890AzId5KZpX+CBg==}
-    engines: {node: ^20.17.0 || >=22.9.0}
-
-  hpack.js@2.1.6:
-    resolution: {integrity: sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==}
-
-  html-dom-parser@7.0.1:
-    resolution: {integrity: sha512-loRBDTCY/05/jAC63J1X9ID+xjRucmpLkIcQO0IRbOubBo5ucnpUpyXXob9UMXOskMZlu7KPsDP/2KOMelzJNA==}
+  html-dom-parser@8.0.0:
+    resolution: {integrity: sha512-cWLJ8mt930VceOzVfY/J+T1ou9v3ENT0BgWqy5aEZjdFp37TYLXULjX8u0vD2rBpFAkK5IofOPl0y4Gq0QLIyA==}
 
   html-encoding-sniffer@4.0.0:
     resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
@@ -8825,8 +9181,8 @@ packages:
     engines: {node: '>=12'}
     hasBin: true
 
-  html-react-parser@6.0.1:
-    resolution: {integrity: sha512-tIie2HSIk2Ct1tdupjd/DhBjskxN/NL5J4ncbUnk2smBr5UIfpPpitUo0imGfBM0BlOL7ac8RcqEwne1jXTcsQ==}
+  html-react-parser@6.1.5:
+    resolution: {integrity: sha512-jhdRR0fSkdkVlAmDIk5lS+IMSjCgFSfe+nI69DUwaxkWOgid2mk7RhoYxsQ7B6hzCghAI5YPz2B1jbskHhbaLg==}
     peerDependencies:
       '@types/react': ^19.2.10
       react: 0.14 || 15 || 16 || 17 || 18 || 19
@@ -8841,11 +9197,11 @@ packages:
   html-void-elements@3.0.0:
     resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
 
-  html-webpack-plugin@5.6.7:
-    resolution: {integrity: sha512-md+vXtdCAe60s1k6AU3dUyMJnDxUyQAwfwPKoLisvgUF1IXjtlLsk2se54+qfL9Mdm26bbwvjJybpNx48NKRLw==}
+  html-webpack-plugin@5.6.8:
+    resolution: {integrity: sha512-MZmKQcTnhEh1SPSyMiEytIeDZDUoBZVorNHivQGXMASHf/BSGGOrKa2xQ5bGx3TCe1n109ecCt+cpww7wwWhKA==}
     engines: {node: '>=10.13.0'}
     peerDependencies:
-      '@rspack/core': 0.x || 1.x
+      '@rspack/core': 0.x || 1.x || 2.x
       webpack: ^5.20.0
     peerDependenciesMeta:
       '@rspack/core':
@@ -8866,9 +9222,6 @@ packages:
   http-cache-semantics@4.2.0:
     resolution: {integrity: sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==}
 
-  http-deceiver@1.2.7:
-    resolution: {integrity: sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==}
-
   http-errors@1.8.1:
     resolution: {integrity: sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==}
     engines: {node: '>= 0.6'}
@@ -8877,25 +9230,17 @@ packages:
     resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
     engines: {node: '>= 0.8'}
 
-  http-parser-js@0.5.10:
-    resolution: {integrity: sha512-Pysuw9XpUq5dVc/2SMHpuTY01RFl8fttgcyunjL7eEMhGM3cI4eOmiCycJDVCo/7O7ClfQD3SaI6ftDzqOXYMA==}
-
   http-proxy-agent@7.0.2:
     resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
 
-  http-proxy-middleware@2.0.9:
-    resolution: {integrity: sha512-c1IyJYLYppU574+YI7R4QyX2ystMtVXZwIdzazUIPIJsHuWNd+mho2j+bKoHftndicGj9yh+xjd+l0yj7VeT1Q==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      '@types/express': ^4.17.13
-    peerDependenciesMeta:
-      '@types/express':
-        optional: true
+  http-proxy-agent@9.1.0:
+    resolution: {integrity: sha512-2NxoveTT58mjYT4n3RPTEfCZGLMbidoO8XEieXfpSYxu+PQJ1qpx4ypwH6N+uF9twBPIvRRgvkvW5HUTYWENig==}
+    engines: {node: '>= 20'}
 
-  http-proxy@1.18.1:
-    resolution: {integrity: sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==}
-    engines: {node: '>=8.0.0'}
+  http-proxy-middleware@4.2.0:
+    resolution: {integrity: sha512-ZA+oNOoM+GLoFTIzhkJptVQov73Srep2LBqhF8hG8CIPKO3nam1jonXVQ/QUH8RbwsmaaVz2SOJdzBNBHNtKbw==}
+    engines: {node: ^22.15.0 || ^24.0.0 || >=26.0.0}
 
   http2-wrapper@1.0.3:
     resolution: {integrity: sha512-V+23sDMr12Wnz7iTcDeJr3O6AIxlnvT/bmaAAAP/Xda35C90p9599p0F1eHR/N1KILWSoWVAiOMFjBBXaXSMxg==}
@@ -8912,6 +9257,13 @@ packages:
     resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
     engines: {node: '>= 14'}
 
+  https-proxy-agent@9.1.0:
+    resolution: {integrity: sha512-ag87y7cJJ9/3+GxFr8Oy4O5faDsGRGnBGsJj/YjOSsSx/5eadKLYTMPlzuR6obgoCDDm0abAAZitXXQkMOPSpA==}
+    engines: {node: '>= 20'}
+
+  httpxy@0.5.4:
+    resolution: {integrity: sha512-URfeibL0kTH6VuIxxaJDXWQWEk8fKr+9L8MGv6CuAiNy0fGnoVhWbXBvJR1mkdsvCDUxvhX9cW60k2AhtH5s6w==}
+
   human-signals@2.1.0:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
     engines: {node: '>=10.17.0'}
@@ -8925,21 +9277,12 @@ packages:
     resolution: {integrity: sha512-Y93lCzHYgGWdrJ66yIktxiaGULYc6oGiABxhcO5AufBeOyoIdZF7bIfLaOrbM0iGIOXQQgxxRrFEnb+Y6w1n4A==}
     engines: {node: '>=10.18'}
 
-  iconv-corefoundation@1.1.7:
-    resolution: {integrity: sha512-T10qvkw0zz4wnm560lOEg0PovVqUXuOFhhHAkixw8/sycy7TJt7v/RrkEKEQnAw2viPSJu6iAkErxnzR0g8PpQ==}
-    engines: {node: ^8.11.2 || >=10}
-    os: [darwin]
-
-  iconv-lite@0.4.24:
-    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
-    engines: {node: '>=0.10.0'}
-
   iconv-lite@0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
 
-  iconv-lite@0.7.2:
-    resolution: {integrity: sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==}
+  iconv-lite@0.7.3:
+    resolution: {integrity: sha512-IKXpvIzjnC9XTAUbVBcMfGS0EPaIXtW6v+zr+RRp+hqULEpo0owZax6wyRwPOJbWbzjYspQwusTsfVr0ifh4uQ==}
     engines: {node: '>=0.10.0'}
 
   icss-utils@5.1.0:
@@ -8955,9 +9298,9 @@ packages:
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
-  ignore-walk@8.0.0:
-    resolution: {integrity: sha512-FCeMZT4NiRQGh+YkeKMtWrOmBgWjHjMJ26WQWrRQyoyzqevdaGSakUaJW5xQYmjLlUVk2qUnCjYVBax9EKKg8A==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  ignore-walk@9.0.0:
+    resolution: {integrity: sha512-tCBEZV2z2FNpIDl2vrhiWzIHzs4qOAuIDEO85eS02vZ3L1U3P56qpPL8GuGGAijDktAEaq2swMkO/Fmbo7YmfQ==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
 
   ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
@@ -8967,6 +9310,10 @@ packages:
     resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
     engines: {node: '>= 4'}
 
+  ignore@7.0.6:
+    resolution: {integrity: sha512-BAg6QkE8W+TuQLrrw0Ugr7HegXduRuuj8/ti2kSOc+jz1dmx8/WNcjr6XGnq5YpDWxFwwaavqD0+jIUOKelTsw==}
+    engines: {node: '>= 4'}
+
   immediate@3.0.6:
     resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
 
@@ -8974,11 +9321,8 @@ packages:
     resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
     engines: {node: '>=6'}
 
-  import-in-the-middle@2.0.6:
-    resolution: {integrity: sha512-3vZV3jX0XRFW3EJDTwzWoZa+RH1b8eTTx6YOCjglrLyPuepwoBti1k3L2dKwdCUrnVEfc5CuRuGstaC/uQJJaw==}
-
-  import-in-the-middle@3.0.1:
-    resolution: {integrity: sha512-pYkiyXVL2Mf3pozdlDGV6NAObxQx13Ae8knZk1UJRJ6uRW/ZRmTGHlQYtrsSl7ubuE5F8CD1z+s1n4RHNuTtuA==}
+  import-in-the-middle@3.3.2:
+    resolution: {integrity: sha512-jTd2FfOgOWOdgjkHuk/1Ms8VKFXkPs15ymYBETw1sAOrO/dY3XeGVRWir9qBbw7pXr0T2eTFwfCZ+N02HmiNGA==}
     engines: {node: '>=18'}
 
   import-lazy@4.0.0:
@@ -9014,16 +9358,12 @@ packages:
   ini@1.3.8:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
 
-  ini@6.0.0:
-    resolution: {integrity: sha512-IBTdIkzZNOpqm7q3dRqJvMaldXjDHWkEDfrwGEQTs5eaQMWV+djAhR+wahyNNMAa+qpbDUhBMVt4ZKNwpPm7xQ==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  ini@7.0.0:
+    resolution: {integrity: sha512-ifK0CgjALofS5bkrcTy4RaQ9Vx2Knf/eLeIO+NaswQEpH1UblrtTSCIvN71qQDMq0PeQ/SSPojvEJp9vvvfr+w==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
 
-  inline-style-parser@0.2.7:
-    resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==}
-
-  internal-slot@1.1.0:
-    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
-    engines: {node: '>= 0.4'}
+  inline-style-parser@0.2.9:
+    resolution: {integrity: sha512-IttN8BqKLxzUrnTqHI+/hwAJQItBAUjdoHERCDv+oOuX48VP6bzW8+QjOXSfoevzq3YrYAwX1uLHp8TqO9yIeg==}
 
   internmap@1.0.1:
     resolution: {integrity: sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==}
@@ -9036,8 +9376,8 @@ packages:
     resolution: {integrity: sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==}
     engines: {node: '>=10.13.0'}
 
-  ip-address@10.1.0:
-    resolution: {integrity: sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q==}
+  ip-address@10.4.0:
+    resolution: {integrity: sha512-oSK96Grm3aP6OrS263xVxbNDGVL7rzBtYdpGqlDG8iQdoenDoTs/nkki+DflYbAEE8Xl6o5YxhxlrKvI3nqKXQ==}
     engines: {node: '>= 12'}
 
   ip-regex@5.0.0:
@@ -9048,45 +9388,21 @@ packages:
     resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
     engines: {node: '>= 0.10'}
 
-  ipaddr.js@2.3.0:
-    resolution: {integrity: sha512-Zv/pA+ciVFbCSBBjGfaKUya/CcGmUHzTydLMaTwrUUEM2DIEO3iZvueGxmacvmN50fGpGVKeTXpb2LcYQxeVdg==}
+  ipaddr.js@2.4.0:
+    resolution: {integrity: sha512-9VGk3HGanVE6JoZXHiCpnGy5X0jYDnN4EA4lntFPj+1vIWlFhIylq2CrrCOJH9EAhc5CYhq18F2Av2tgoAPsYQ==}
     engines: {node: '>= 10'}
 
   is-arguments@1.2.0:
     resolution: {integrity: sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==}
     engines: {node: '>= 0.4'}
 
-  is-array-buffer@3.0.5:
-    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
-    engines: {node: '>= 0.4'}
-
   is-arrayish@0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
 
-  is-async-function@2.1.1:
-    resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
-    engines: {node: '>= 0.4'}
-
-  is-bigint@1.1.0:
-    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
-    engines: {node: '>= 0.4'}
-
-  is-binary-path@2.1.0:
-    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
-    engines: {node: '>=8'}
-
-  is-boolean-object@1.2.2:
-    resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
-    engines: {node: '>= 0.4'}
-
   is-buffer@2.0.5:
     resolution: {integrity: sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==}
     engines: {node: '>=4'}
 
-  is-builtin-module@3.2.1:
-    resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
-    engines: {node: '>=6'}
-
   is-callable@1.2.7:
     resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
     engines: {node: '>= 0.4'}
@@ -9099,19 +9415,6 @@ packages:
     resolution: {integrity: sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==}
     engines: {node: '>= 0.4'}
 
-  is-data-view@1.0.2:
-    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
-    engines: {node: '>= 0.4'}
-
-  is-date-object@1.1.0:
-    resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
-    engines: {node: '>= 0.4'}
-
-  is-docker@2.2.1:
-    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
-    engines: {node: '>=8'}
-    hasBin: true
-
   is-docker@3.0.0:
     resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -9121,18 +9424,10 @@ packages:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
 
-  is-finalizationregistry@1.1.1:
-    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
-    engines: {node: '>= 0.4'}
-
   is-fullwidth-code-point@3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
 
-  is-fullwidth-code-point@5.1.0:
-    resolution: {integrity: sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==}
-    engines: {node: '>=18'}
-
   is-generator-fn@2.1.0:
     resolution: {integrity: sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==}
     engines: {node: '>=6'}
@@ -9145,6 +9440,10 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
+  is-in-ssh@1.0.0:
+    resolution: {integrity: sha512-jYa6Q9rH90kR1vKB6NM7qqd1mge3Fx4Dhw5TVlK1MUBqhEOuCagrEHMevNuCcbECmXZ0ThXkRm+Ymr51HwEPAw==}
+    engines: {node: '>=20'}
+
   is-inside-container@1.0.0:
     resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
     engines: {node: '>=14.16'}
@@ -9158,26 +9457,14 @@ packages:
     resolution: {integrity: sha512-FCsGHdlrOnZQcp0+XT5a+pYowf33itBalCl+7ovNXC/7o5BhIpG14M3OrpPPdBSIQJCm+0M5+9mO7S9VVTTCFw==}
     engines: {node: '>=14.16'}
 
-  is-map@2.0.3:
-    resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
-    engines: {node: '>= 0.4'}
-
   is-nan@1.3.2:
     resolution: {integrity: sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==}
     engines: {node: '>= 0.4'}
 
-  is-negative-zero@2.0.3:
-    resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
-    engines: {node: '>= 0.4'}
-
-  is-network-error@1.3.0:
-    resolution: {integrity: sha512-6oIwpsgRfnDiyEDLMay/GqCl3HoAtH5+RUKW29gYkL0QA+ipzpDLA16yQs7/RHCSu+BwgbJaOUqa4A99qNVQVw==}
+  is-network-error@1.3.2:
+    resolution: {integrity: sha512-PhBY86zaxNZUuWP6h13Vu5oFe0XY6/UlKzQnYFELzGVHygP3MxmvTfYSG7GN3aIab/iWudSMgjSnG9Dq+nHrgA==}
     engines: {node: '>=16'}
 
-  is-number-object@1.1.1:
-    resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
-    engines: {node: '>= 0.4'}
-
   is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
@@ -9190,9 +9477,9 @@ packages:
     resolution: {integrity: sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==}
     engines: {node: '>=12'}
 
-  is-plain-obj@3.0.0:
-    resolution: {integrity: sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==}
-    engines: {node: '>=10'}
+  is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
 
   is-plain-object@2.0.4:
     resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==}
@@ -9219,26 +9506,10 @@ packages:
     resolution: {integrity: sha512-rbku49cWloU5bSMI+zaRaXdQHXnthP6DZ/vLnfdSKyL4zUzuWnomtOEiZZOd+ioQ+avFo/qau3KPTc7Fjy1uPA==}
     engines: {node: '>=12'}
 
-  is-set@2.0.3:
-    resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
-    engines: {node: '>= 0.4'}
-
-  is-shared-array-buffer@1.0.4:
-    resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
-    engines: {node: '>= 0.4'}
-
   is-stream@2.0.1:
     resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
     engines: {node: '>=8'}
 
-  is-string@1.1.1:
-    resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
-    engines: {node: '>= 0.4'}
-
-  is-symbol@1.1.1:
-    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
-    engines: {node: '>= 0.4'}
-
   is-typed-array@1.1.15:
     resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
     engines: {node: '>= 0.4'}
@@ -9247,25 +9518,13 @@ packages:
     resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==}
     engines: {node: '>=10'}
 
-  is-weakmap@2.0.2:
-    resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
-    engines: {node: '>= 0.4'}
-
-  is-weakref@1.1.1:
-    resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
-    engines: {node: '>= 0.4'}
-
-  is-weakset@2.0.4:
-    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
-    engines: {node: '>= 0.4'}
-
   is-what@5.5.0:
     resolution: {integrity: sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==}
     engines: {node: '>=18'}
 
-  is-wsl@2.2.0:
-    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
-    engines: {node: '>=8'}
+  is-wsl@3.1.0:
+    resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==}
+    engines: {node: '>=16'}
 
   is-wsl@3.1.1:
     resolution: {integrity: sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==}
@@ -9324,10 +9583,6 @@ packages:
     resolution: {integrity: sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==}
     engines: {node: '>=8'}
 
-  iterator.prototype@1.1.5:
-    resolution: {integrity: sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==}
-    engines: {node: '>= 0.4'}
-
   jackspeak@3.4.3:
     resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
@@ -9336,19 +9591,19 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  jest-canvas-mock@2.5.2:
-    resolution: {integrity: sha512-vgnpPupjOL6+L5oJXzxTxFrlGEIbHdZqFU+LFNdtLxZ3lRDCl17FlTMM7IatoRQkrcyOTMlDinjUguqmQ6bR2A==}
+  jest-canvas-mock@2.5.8:
+    resolution: {integrity: sha512-RUZRaFHCnLjg0/UAodCai5PTsa7kQI1rUXE5wsQu9f2315dh2YSN7/i3fObTycs7PO09DLSiGXiJTALYIw2yuw==}
 
-  jest-changed-files@30.3.0:
-    resolution: {integrity: sha512-B/7Cny6cV5At6M25EWDgf9S617lHivamL8vl6KEpJqkStauzcG4e+WPfDgMMF+H4FVH4A2PLRyvgDJan4441QA==}
+  jest-changed-files@30.4.1:
+    resolution: {integrity: sha512-IuctmYrxi21iOSOaIXpJWalHyPAsVv0GeBHKDn8C1CA4W5htHn7INL+wdnL4Bo0+olEndvAFkmb++tIQJG+vvg==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  jest-circus@30.3.0:
-    resolution: {integrity: sha512-PyXq5szeSfR/4f1lYqCmmQjh0vqDkURUYi9N6whnHjlRz4IUQfMcXkGLeEoiJtxtyPqgUaUUfyQlApXWBSN1RA==}
+  jest-circus@30.4.2:
+    resolution: {integrity: sha512-rvHH7VlY6LgbJXJTQ87GW62g1FntOtbhh0zT+v04kC+pgL6aBKyYINXxWukCpj3dcIBMw5/XUbtDS9dU9JTXeQ==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  jest-cli@30.3.0:
-    resolution: {integrity: sha512-l6Tqx+j1fDXJEW5bqYykDQQ7mQg+9mhWXtnj+tQZrTWYHyHoi6Be8HPumDSA+UiX2/2buEgjA58iJzdj146uCw==}
+  jest-cli@30.4.2:
+    resolution: {integrity: sha512-jfA2ocvVHMXS2QijrJ0d31ektP+d/W0T5RpcTX2Pq+3sVqHlsXVCM2+FmwpL+bdY8OfHpIg9xMxLF17Zg0U49Q==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
     hasBin: true
     peerDependencies:
@@ -9357,11 +9612,11 @@ packages:
       node-notifier:
         optional: true
 
-  jest-config@30.3.0:
-    resolution: {integrity: sha512-WPMAkMAtNDY9P/oKObtsRG/6KTrhtgPJoBTmk20uDn4Uy6/3EJnnaZJre/FMT1KVRx8cve1r7/FlMIOfRVWL4w==}
+  jest-config@30.4.2:
+    resolution: {integrity: sha512-rNHAShJQqQwFNoL0hbf3BphSBOWnpOUAKvidLS/AjNVLPfoj5mSf4jQMfW3cYOs6hXeZC7nF7mDHaBnbxELOzg==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
     peerDependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
       esbuild-register: '>=3.4.0'
       ts-node: '>=9.0.0'
     peerDependenciesMeta:
@@ -9372,24 +9627,20 @@ packages:
       ts-node:
         optional: true
 
-  jest-diff@30.3.0:
-    resolution: {integrity: sha512-n3q4PDQjS4LrKxfWB3Z5KNk1XjXtZTBwQp71OP0Jo03Z6V60x++K5L8k6ZrW8MY8pOFylZvHM0zsjS1RqlHJZQ==}
-    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
-
   jest-diff@30.4.1:
     resolution: {integrity: sha512-CRpFK0RtLriVDGcPPAnR6HMVI8bSR2jnUIgralhauzYQZIb4RH9AtEInTuQr65LmmGggGcRT6HIASxwqsVsmlA==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  jest-docblock@30.2.0:
-    resolution: {integrity: sha512-tR/FFgZKS1CXluOQzZvNH3+0z9jXr3ldGSD8bhyuxvlVUwbeLOGynkunvlTMxchC5urrKndYiwCFC0DLVjpOCA==}
+  jest-docblock@30.4.0:
+    resolution: {integrity: sha512-ZPMabUZCx5MpbZ2eBYSvZ0J8fvo3dR9oM+eeUpb3aKNQFuS2tu3Duw1TNlMoP8k3WQgKGJuhcMFvwcVuq6T7oA==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  jest-each@30.3.0:
-    resolution: {integrity: sha512-V8eMndg/aZ+3LnCJgSm13IxS5XSBM22QSZc9BtPK8Dek6pm+hfUNfwBdvsB3d342bo1q7wnSkC38zjX259qZNA==}
+  jest-each@30.4.1:
+    resolution: {integrity: sha512-/8MJbH6fuj48TstjrMf+u/pd06Qezz5xOXvZA6442heNOWr8bdeoGZX2d9fCn028CoMgYmroH9//zky5GfyYmA==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  jest-environment-jsdom@30.3.0:
-    resolution: {integrity: sha512-RLEOJy6ip1lpw0yqJ8tB3i88FC7VBz7i00Zvl2qF71IdxjS98gC9/0SPWYIBVXHm5hgCYK0PAlSlnHGGy9RoMg==}
+  jest-environment-jsdom@30.4.1:
+    resolution: {integrity: sha512-o3nfaN4zej7qgk2X0j8Jhq/S9nAVKs2xK3QeQxeHVvpkEPxaA1yxDGydR+iVI7zPy7Cp62Aq2h3Ja46QvfWHGA==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
     peerDependencies:
       canvas: ^3.0.0
@@ -9397,8 +9648,8 @@ packages:
       canvas:
         optional: true
 
-  jest-environment-node@30.3.0:
-    resolution: {integrity: sha512-4i6HItw/JSiJVsC5q0hnKIe/hbYfZLVG9YJ/0pU9Hz2n/9qZe3Rhn5s5CUZA5ORZlcdT/vmAXRMyONXJwPrmYQ==}
+  jest-environment-node@30.4.1:
+    resolution: {integrity: sha512-4FZYVOk85hz2AyT6BbarKy9u37g6DbrDyCdFhsnDdXqyrueYQvB+0zO4f/kqLCRD0BsPRXPMNJeQwihKZV8naw==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
   jest-fixed-jsdom@0.0.11:
@@ -9407,24 +9658,24 @@ packages:
     peerDependencies:
       jest-environment-jsdom: '>=28.0.0'
 
-  jest-haste-map@30.3.0:
-    resolution: {integrity: sha512-mMi2oqG4KRU0R9QEtscl87JzMXfUhbKaFqOxmjb2CKcbHcUGFrJCBWHmnTiUqi6JcnzoBlO4rWfpdl2k/RfLCA==}
+  jest-haste-map@30.4.1:
+    resolution: {integrity: sha512-rFrcONd8jeFsyw+Z9CrScJgglRf2+NFmNam8dKu7n+SoHqNYT47mn0DdEcVUZJpvh7Iz6/si7f7yUH7GJHVgnw==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  jest-leak-detector@30.3.0:
-    resolution: {integrity: sha512-cuKmUUGIjfXZAiGJ7TbEMx0bcqNdPPI6P1V+7aF+m/FUJqFDxkFR4JqkTu8ZOiU5AaX/x0hZ20KaaIPXQzbMGQ==}
+  jest-leak-detector@30.4.1:
+    resolution: {integrity: sha512-IpmyiioeHxiWDhesHnUFmOxcTzwCwKpgACgWajtAP+nYQXiY7DakTxB6Bx9JFiRMljr0AX1PvnQdaU1KFoz6NQ==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  jest-matcher-utils@30.3.0:
-    resolution: {integrity: sha512-HEtc9uFQgaUHkC7nLSlQL3Tph4Pjxt/yiPvkIrrDCt9jhoLIgxaubo1G+CFOnmHYMxHwwdaSN7mkIFs6ZK8OhA==}
+  jest-matcher-utils@30.4.1:
+    resolution: {integrity: sha512-zvYfX5CaeEkFrrLS9suWe9rvJrm9J1Iv3ua8kIBv9GEPzcnsfBf0bob37la7s67fs0nlBC3EuvkOLnXQKxtx4A==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  jest-message-util@30.3.0:
-    resolution: {integrity: sha512-Z/j4Bo+4ySJ+JPJN3b2Qbl9hDq3VrXmnjjGEWD/x0BCXeOXPTV1iZYYzl2X8c1MaCOL+ewMyNBcm88sboE6YWw==}
+  jest-message-util@30.4.1:
+    resolution: {integrity: sha512-kwCKIvq0MCW1HzLoGola9Te6JUdzgV0loyKJ3Qghrkz9i5/RRIHsL95BMQc2HBBhlBKC4j22K9p11TGHH8RBpQ==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  jest-mock@30.3.0:
-    resolution: {integrity: sha512-OTzICK8CpE+t4ndhKrwlIdbM6Pn8j00lvmSmq5ejiO+KxukbLjgOflKWMn3KE34EZdQm5RqTuKj+5RIEniYhog==}
+  jest-mock@30.4.1:
+    resolution: {integrity: sha512-/i8SVb8/NSB7RfNi8gfqu8gxLV23KaL5EpAttyb9iz8qWRIqXRLflycz/32wXsYkOnaUlx8NAKnJYtpsmXUmfw==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
   jest-pnp-resolver@1.2.3:
@@ -9439,52 +9690,52 @@ packages:
   jest-raw-loader@1.0.1:
     resolution: {integrity: sha512-g9oaAjeC4/rIJk1Wd3RxVbOfMizowM7LSjEJqa4R9qDX0OjQNABXOhH+GaznUp+DjTGVPi2vPPbQXyX87DOnYg==}
 
-  jest-regex-util@30.0.1:
-    resolution: {integrity: sha512-jHEQgBXAgc+Gh4g0p3bCevgRCVRkB4VB70zhoAE48gxeSr1hfUOsM/C2WoJgVL7Eyg//hudYENbm3Ne+/dRVVA==}
+  jest-regex-util@30.4.0:
+    resolution: {integrity: sha512-mWlvLviKIgIQ8VCuM1xRdD0TWp3zlzionlmDBjuXVBs+VkmXq6FgW9T4Emr7oGz/Rk6feDCGyiugolcQEyp3mg==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  jest-resolve-dependencies@30.3.0:
-    resolution: {integrity: sha512-9ev8s3YN6Hsyz9LV75XUwkCVFlwPbaFn6Wp75qnI0wzAINYWY8Fb3+6y59Rwd3QaS3kKXffHXsZMziMavfz/nw==}
+  jest-resolve-dependencies@30.4.2:
+    resolution: {integrity: sha512-gDiVh1I+GxYzz9oXlyw+1wv6VOYX1WYxMOfjsA3iGKePV2oxmbHhwxfkALxNxYy1ciw6APWwkW2zZONwP97aEQ==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  jest-resolve@30.3.0:
-    resolution: {integrity: sha512-NRtTAHQlpd15F9rUR36jqwelbrDV/dY4vzNte3S2kxCKUJRYNd5/6nTSbYiak1VX5g8IoFF23Uj5TURkUW8O5g==}
+  jest-resolve@30.4.1:
+    resolution: {integrity: sha512-Zry8Yq/yJcNAZ7dJ5F2heic8AheXvbFZ7XI5V+h28nrYZ7Qoyy4dItq8OodjnYD270mvX+ZudmrNV9cysqhW5Q==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  jest-runner@30.3.0:
-    resolution: {integrity: sha512-gDv6C9LGKWDPLia9TSzZwf4h3kMQCqyTpq+95PODnTRDO0g9os48XIYYkS6D236vjpBir2fF63YmJFtqkS5Duw==}
+  jest-runner@30.4.2:
+    resolution: {integrity: sha512-2dw0PslVYXxffXGpLo+Ejad+KcI1Qkjn7f4X4619gf21oCUmL+SPfjqIa/losUem3yEOvfNZe/F1HWUcNpODcg==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  jest-runtime@30.3.0:
-    resolution: {integrity: sha512-CgC+hIBJbuh78HEffkhNKcbXAytQViplcl8xupqeIWyKQF50kCQA8J7GeJCkjisC6hpnC9Muf8jV5RdtdFbGng==}
+  jest-runtime@30.4.2:
+    resolution: {integrity: sha512-3/5e8iPz2k/VLqlr8DgTftYyLUv8Su3FkCAO2/Od81UsUTpSxOrS6O5x5KkoQwyUjmpYyDJKeyAvg2T2nvpNkQ==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  jest-snapshot@30.3.0:
-    resolution: {integrity: sha512-f14c7atpb4O2DeNhwcvS810Y63wEn8O1HqK/luJ4F6M4NjvxmAKQwBUWjbExUtMxWJQ0wVgmCKymeJK6NZMnfQ==}
+  jest-snapshot@30.4.1:
+    resolution: {integrity: sha512-tEOkkfOMppUyeiHwjZswOQ3lcnoTnws/q5FnGIaeIh/jmoU0ZlgMYRR8sTlTj+nNGCoJ0RDq6SfxGxCsyMTPmw==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  jest-util@30.3.0:
-    resolution: {integrity: sha512-/jZDa00a3Sz7rdyu55NLrQCIrbyIkbBxareejQI315f/i8HjYN+ZWsDLLpoQSiUIEIyZF/R8fDg3BmB8AtHttg==}
+  jest-util@30.4.1:
+    resolution: {integrity: sha512-vjQb1sACEiv13DKJMDToJpzVW0joCsIQrmbg0fi7CyOOt+g9jTuQl2A216pWRBYhOVt53XbL/2LbMKg1BECWOw==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  jest-validate@30.3.0:
-    resolution: {integrity: sha512-I/xzC8h5G+SHCb2P2gWkJYrNiTbeL47KvKeW5EzplkyxzBRBw1ssSHlI/jXec0ukH2q7x2zAWQm7015iusg62Q==}
+  jest-validate@30.4.1:
+    resolution: {integrity: sha512-PDWi4SOwLnwqNDfHZjOcsEFyZ4fc/2W2gVL3DEoyqnB6jCQMLRtfBong8s6omIw3lI0HWOus12xfnFmQtjW3fw==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  jest-watcher@30.3.0:
-    resolution: {integrity: sha512-PJ1d9ThtTR8aMiBWUdcownq9mDdLXsQzJayTk4kmaBRHKvwNQn+ANveuhEBUyNI2hR1TVhvQ8D5kHubbzBHR/w==}
+  jest-watcher@30.4.1:
+    resolution: {integrity: sha512-/l9UonmvCwjHH7d2h3iAwIloLc1H0S8mJZ/LNK3i86hqwPAz8otUJjP9MfYtz9Tt77Su5FD2xGjZn8d31IZHlw==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
   jest-worker@27.5.1:
     resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
     engines: {node: '>= 10.13.0'}
 
-  jest-worker@30.3.0:
-    resolution: {integrity: sha512-DrCKkaQwHexjRUFTmPzs7sHQe0TSj9nvDALKGdwmK5mW9v7j90BudWirKAJHt3QQ9Dhrg1F7DogPzhChppkJpQ==}
+  jest-worker@30.4.1:
+    resolution: {integrity: sha512-SHynN/q/QD++iNyvMdy+WMmbCGk8jIsNcRxycXbWubSOhvo6T+j2afcfUSl+3hYsiBebOTo0cT7c2H7CXugu1g==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  jest@30.3.0:
-    resolution: {integrity: sha512-AkXIIFcaazymvey2i/+F94XRnM6TsVLZDhBMLsd1Sf/W0wzsvvpjeyUrCZD6HGG4SDYPgDJDBKeiJTBb10WzMg==}
+  jest@30.4.2:
+    resolution: {integrity: sha512-Yi1jqNC/Oq0N4hBgNH/YvBpP1P57QqundgytzYqy3yqAa7NZPNjSoi4SGbRAXDMdBzNE6xBCi5U7RgfrvMEUVQ==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
     hasBin: true
     peerDependencies:
@@ -9493,15 +9744,15 @@ packages:
       node-notifier:
         optional: true
 
-  jiti@2.6.1:
-    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+  jiti@2.7.0:
+    resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
     hasBin: true
 
   jju@1.4.0:
     resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
 
-  joi@18.1.2:
-    resolution: {integrity: sha512-rF5MAmps5esSlhCA+N1b6IYHDw9j/btzGaqfgie522jS02Ju/HXBxamlXVlKEHAxoMKQL77HWI8jlqWsFuekZA==}
+  joi@18.2.3:
+    resolution: {integrity: sha512-N5A3KTWQpPWT4ExxxPlUx7WmykGXRzhNidWhV41d6Abu9YfI2NyWCJuxdPnslJCPWtbRpSVOWSnSS6GakLM/Rg==}
     engines: {node: '>= 20'}
 
   js-tokens@10.0.0:
@@ -9510,16 +9761,12 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
-  js-xxhash@5.0.1:
-    resolution: {integrity: sha512-OGuTCR9wqYqF2FrhjtGb6fx8Rm1jzhdpUEsY2sLkXbNYLzOS+XWcYT4KTUL7vnaRTmBuGuVpW1AK2zzxjgZXGg==}
-    engines: {node: '>=20.0.0'}
-
-  js-yaml@3.14.2:
-    resolution: {integrity: sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==}
+  js-yaml@3.15.1:
+    resolution: {integrity: sha512-S99WuO3HlhO3XN41EtYUNl9zzXjoJx7QvmipxsJVxtCBT0YHEFy+iOJhjSvrmV12nYhWpZaM8lPHkJm0yUMbag==}
     hasBin: true
 
-  js-yaml@4.1.1:
-    resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
+  js-yaml@4.3.1:
+    resolution: {integrity: sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==}
     hasBin: true
 
   jsdom@26.1.0:
@@ -9531,10 +9778,6 @@ packages:
       canvas:
         optional: true
 
-  jsesc@0.5.0:
-    resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==}
-    hasBin: true
-
   jsesc@3.1.0:
     resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
     engines: {node: '>=6'}
@@ -9546,9 +9789,9 @@ packages:
   json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
 
-  json-parse-even-better-errors@5.0.0:
-    resolution: {integrity: sha512-ZF1nxZ28VhQouRWhUcVlUIN3qwSgPuswK05s/HIaoetAoE/9tngVmCHjSxmSQPav1nd+lPtTL0YZ/2AFdR/iYQ==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  json-parse-even-better-errors@6.0.0:
+    resolution: {integrity: sha512-2/8adwnK1/+Fdjyts4r6wSpfANWw8zdNhU9U/Llk59c6O+DjSisPWPykwoL8gZmocP9Dy64S7oie2g+Mia123A==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
 
   json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
@@ -9571,10 +9814,6 @@ packages:
   json-with-bigint@3.5.8:
     resolution: {integrity: sha512-eq/4KP6K34kwa7TcFdtvnftvHCD9KvHOGGICWwMFc4dOOKF5t4iYqnfLK8otCRCRv06FXOzGGyqE8h8ElMvvdw==}
 
-  json5@1.0.2:
-    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
-    hasBin: true
-
   json5@2.2.3:
     resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
     engines: {node: '>=6'}
@@ -9583,6 +9822,9 @@ packages:
   jsonc-parser@3.2.0:
     resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
 
+  jsonc-parser@3.3.1:
+    resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==}
+
   jsonfile@4.0.0:
     resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
 
@@ -9598,20 +9840,17 @@ packages:
 
   jsrsasign@11.1.3:
     resolution: {integrity: sha512-nPnK5D/4lv0Dwr7TlzrKtAd8JlLZwFTqTUUB3NQCbtdobcRcohGFxjbPySDVh74iWUudcCsapYT6OxoyhJLhhA==}
-
-  jsx-ast-utils@3.3.5:
-    resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
-    engines: {node: '>=4.0'}
+    deprecated: This package is no longer maintained.
 
   jszip@3.10.1:
     resolution: {integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==}
 
-  jwt-decode@4.0.0:
-    resolution: {integrity: sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==}
-    engines: {node: '>=18'}
+  katex@0.16.47:
+    resolution: {integrity: sha512-Eeo8Ys1doU1z+x8AZsPpQu+p/QcZBI5PeOo7QGQdy2x2m0MU/hYagBbGOmXwr5KVbEfVuWv9LpnQWeehogurjg==}
+    hasBin: true
 
-  katex@0.16.45:
-    resolution: {integrity: sha512-pQpZbdBu7wCTmQUh7ufPmLr0pFoObnGUoL/yhtwJDgmmQpbkg/0HSVti25Fu4rmd1oCR6NGWe9vqTWuWv3GcNA==}
+  katex@0.18.1:
+    resolution: {integrity: sha512-Td8GCYSxDAoMhHOlKmCFMJ/hz5qlAAb71n66Dryw9nfCVfumLo7nhuotbvKom/XPADmrYC3O5QR71EPq4DarJQ==}
     hasBin: true
 
   kdbush@4.0.2:
@@ -9630,8 +9869,8 @@ packages:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}
 
-  knip@6.11.0:
-    resolution: {integrity: sha512-84PTlN8Q5smLpTbzs8smTVh8PMbTDXtw0tFksXq/m6auGFC/KSzJykKFmnYh3As38kiWDkoDBvdTTyKk5M1TAQ==}
+  knip@6.29.0:
+    resolution: {integrity: sha512-A3kXqSBky1tWBAqiU9srdtu0Larhzkuyor0aD/gg+ToiqyBncCCs2Q60sLsxmcKhV0OsKss9LV0hMPpwLv711Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
@@ -9641,19 +9880,11 @@ packages:
   kolorist@1.8.0:
     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
 
-  langium@4.2.2:
-    resolution: {integrity: sha512-JUshTRAfHI4/MF9dH2WupvjSXyn8JBuUEWazB8ZVJUtXutT0doDlAv1XKbZ1Pb5sMexa8FF4CFBc0iiul7gbUQ==}
-    engines: {node: '>=20.10.0', npm: '>=10.2.3'}
+  launch-editor@2.14.1:
+    resolution: {integrity: sha512-QWBrQsMpH7gPr965dsKD/3cKWiNoTjpATQf++Xq63N6sKRGMwlVXz41O1IZTMfZQgBctD/K5Zt06+/I6pP6+HA==}
 
-  language-subtag-registry@0.3.23:
-    resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
-
-  language-tags@1.0.9:
-    resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
-    engines: {node: '>=0.10'}
-
-  launch-editor@2.12.0:
-    resolution: {integrity: sha512-giOHXoOtifjdHqUamwKq6c49GzBdLjvxrd2D+Q4V6uOHopJv7p9VJxikDsQ/CBXZbEITgUqSVHXLTG3VhPP1Dg==}
+  launder@1.7.1:
+    resolution: {integrity: sha512-mU6WRz5EusL9ZZuiZ5SO4Y6C0P9PAUR9iwdb6bzj4KDihm28DiHFw+/yk9DBH4f+Pv1wuzQ4e2jV3oQ7mkIqvw==}
 
   layout-base@1.0.2:
     resolution: {integrity: sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==}
@@ -9679,78 +9910,78 @@ packages:
   lie@3.3.0:
     resolution: {integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==}
 
-  lightningcss-android-arm64@1.32.0:
-    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
+  lightningcss-android-arm64@1.33.0:
+    resolution: {integrity: sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [android]
 
-  lightningcss-darwin-arm64@1.32.0:
-    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
+  lightningcss-darwin-arm64@1.33.0:
+    resolution: {integrity: sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [darwin]
 
-  lightningcss-darwin-x64@1.32.0:
-    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
+  lightningcss-darwin-x64@1.33.0:
+    resolution: {integrity: sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [darwin]
 
-  lightningcss-freebsd-x64@1.32.0:
-    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
+  lightningcss-freebsd-x64@1.33.0:
+    resolution: {integrity: sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [freebsd]
 
-  lightningcss-linux-arm-gnueabihf@1.32.0:
-    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
+  lightningcss-linux-arm-gnueabihf@1.33.0:
+    resolution: {integrity: sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm]
     os: [linux]
 
-  lightningcss-linux-arm64-gnu@1.32.0:
-    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
+  lightningcss-linux-arm64-gnu@1.33.0:
+    resolution: {integrity: sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  lightningcss-linux-arm64-musl@1.32.0:
-    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
+  lightningcss-linux-arm64-musl@1.33.0:
+    resolution: {integrity: sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  lightningcss-linux-x64-gnu@1.32.0:
-    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
+  lightningcss-linux-x64-gnu@1.33.0:
+    resolution: {integrity: sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  lightningcss-linux-x64-musl@1.32.0:
-    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
+  lightningcss-linux-x64-musl@1.33.0:
+    resolution: {integrity: sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  lightningcss-win32-arm64-msvc@1.32.0:
-    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
+  lightningcss-win32-arm64-msvc@1.33.0:
+    resolution: {integrity: sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [win32]
 
-  lightningcss-win32-x64-msvc@1.32.0:
-    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
+  lightningcss-win32-x64-msvc@1.33.0:
+    resolution: {integrity: sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [win32]
 
-  lightningcss@1.32.0:
-    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
+  lightningcss@1.33.0:
+    resolution: {integrity: sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==}
     engines: {node: '>= 12.0.0'}
 
   lilconfig@3.1.3:
@@ -9764,41 +9995,33 @@ packages:
     resolution: {integrity: sha512-cNOjgCnLB+FnvWWtyRTzmB3POJ+cXxTA81LoW7u8JdmhfXzriropYwpjShnz1QLLWsQwY7nIxoDmcPTwphDK9w==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
-  linkify-html@4.3.2:
-    resolution: {integrity: sha512-RozNgrfSFrNQlprJSZIN7lF+ZVPj5Pz8POQcu1PYGAUhL9tKtvtWcOXOmlXjuGGEWHtC6gt6Q2U4+VUq9ELmng==}
+  linkify-html@4.3.3:
+    resolution: {integrity: sha512-VQH0xk8QilyWvRNQqyervP/zfe/KqE1bXB5NcwWoz8Oj9Yz5hWM0VvXs9vkLy7NlTao1jrmM1cqQv8rTmerctg==}
     peerDependencies:
-      linkifyjs: ^4.0.0
+      linkifyjs: '==4.3.3'
 
-  linkify-it@5.0.0:
-    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
+  linkify-it@5.0.2:
+    resolution: {integrity: sha512-ONTm2jCMAVZjgQa/Fy1kScXsuOoF5NPTsoFBdE1KVIZ2vAh/r9+Bqo+0jINCBYnavTPQZz38QzFTme79ENoN3Q==}
 
-  linkify-react@4.3.2:
-    resolution: {integrity: sha512-mi744h1hf+WDsr+paJgSBBgYNLMWNSHyM9V9LVUo03RidNGdw1VpI7Twnt+K3pEh3nIzB4xiiAgZxpd61ItKpQ==}
+  linkify-react@4.3.3:
+    resolution: {integrity: sha512-bMWuN1YJ3hyDyojk4hzUugecN2RsTuibKAQBplUT2o+3uK33THdRL2qD0Zf3ibCXuBLBCyOE6Uj/S/1cY48Ygw==}
     peerDependencies:
-      linkifyjs: ^4.0.0
+      linkifyjs: '==4.3.3'
       react: '>= 15.0.0'
 
-  linkify-string@4.3.2:
-    resolution: {integrity: sha512-JqBuQpSa+CSj2tskIII70SKOjPfjXwDFyjRRNFTrlg76gp2nap36xeRj/cWaXxukqBNrxM+L07XyKRsUtH/DpQ==}
+  linkify-string@4.3.3:
+    resolution: {integrity: sha512-k8BwpKz6t4jigzoi5hKUbji0M4kUqhQ7LXIKFRxb2VvG5m0+4YSck+VFLhOxxeiuVu3pLDuSVNRq9+IQKroFIw==}
     peerDependencies:
-      linkifyjs: ^4.0.0
+      linkifyjs: '==4.3.3'
 
-  linkifyjs@4.3.2:
-    resolution: {integrity: sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==}
+  linkifyjs@4.3.3:
+    resolution: {integrity: sha512-P8aEP5U/D1/IlTY2OeYsErdwh9bGuLE30NcXtKEjgdHcahveQoQwM2yZNsioQHsWFz0P7KKudisbrzCgR0sDHg==}
 
-  lint-staged@17.0.2:
-    resolution: {integrity: sha512-Rbr6rdmbCn1fIDHBZpn0madg0hEkdlh+QwajnL3Qq0ZUq/icAJfLGj9BVBajAXi7657ZzKQ7kobGP9S5XOHYRw==}
+  lint-staged@17.2.0:
+    resolution: {integrity: sha512-FchGnFe4i4B1C/a35SPU9bNGPEHSC1+1iV0plLjzBmKVe9klZrlRfSgK6Cw4VeHyqOXbJUXP0vON61uRftNQ0A==}
     engines: {node: '>=22.22.1'}
     hasBin: true
 
-  listr2@10.2.1:
-    resolution: {integrity: sha512-7I5knELsJKTUjXG+A6BkKAiGkW1i25fNa/xlUl9hFtk15WbE9jndA89xu5FzQKrY5llajE1hfZZFMILXkDHk/Q==}
-    engines: {node: '>=22.13.0'}
-
-  loader-runner@4.3.1:
-    resolution: {integrity: sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==}
-    engines: {node: '>=6.11.5'}
-
   loader-utils@2.0.4:
     resolution: {integrity: sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==}
     engines: {node: '>=8.9.0'}
@@ -9843,10 +10066,6 @@ packages:
     resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
     engines: {node: '>=10'}
 
-  log-update@6.1.0:
-    resolution: {integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==}
-    engines: {node: '>=18'}
-
   loglevel@1.9.2:
     resolution: {integrity: sha512-HgMmCqIJSAKqo68l0rS2AanEWfkxaZ5wNiEFb5ggm08lDs9Xl2KxBlX3PTcaD2chBM1gXAYf491/M2Rv8Jwayg==}
     engines: {node: '>= 0.6.0'}
@@ -9895,22 +10114,22 @@ packages:
   magicast@0.5.2:
     resolution: {integrity: sha512-E3ZJh4J3S9KfwdjZhe2afj6R9lGIN5Pher1pF39UGrXRqq/VDaGVIGN13BjHd2u8B61hArAGOnso7nBOouW3TQ==}
 
-  mailpit-api@2.0.0:
-    resolution: {integrity: sha512-zK68B0CRVZaJS1PaX7omFhKUKSLp4JMMpAUTRYbCmcrgJ9nguIh4sS+RRUyFeW1nykDNH8PVlRz/WSXsq9ZqlQ==}
+  mailpit-api@2.1.0:
+    resolution: {integrity: sha512-ZZG5ShQS2E5QH9p1xeD2U2sfahKEEgRvtzIlJXsLUtLSUbYjmxPeuvciwayj0oxA+hn85xzIEt1v8FsXtwqKCA==}
     engines: {node: '>=18.0.0'}
 
   make-dir@4.0.0:
     resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
     engines: {node: '>=10'}
 
-  make-fetch-happen@14.0.3:
-    resolution: {integrity: sha512-QMjGbFTP0blj97EeidG5hk/QhKQ3T4ICckQGLgz38QF7Vgbk6e6FTARN8KhKxyBbWn8R0HU+bnw8aSoFPD4qtQ==}
-    engines: {node: ^18.17.0 || >=20.5.0}
-
   make-fetch-happen@15.0.5:
     resolution: {integrity: sha512-uCbIa8jWWmQZt4dSnEStkVC6gdakiinAm4PiGsywIkguF0eWMdcjDz0ECYhUolFU3pFLOev9VNPCEygydXnddg==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
+  make-fetch-happen@16.0.1:
+    resolution: {integrity: sha512-uUv1yxHzaKVVEPfcFeGSNov/Cehjv08ovlY8ImTljgL7Q+SiA0dAYLQ6SYVa2kkKqNj4Y3aZEI7xv2teadie0A==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
+
   makeerror@1.0.12:
     resolution: {integrity: sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==}
 
@@ -9921,8 +10140,8 @@ packages:
   mark.js@8.11.1:
     resolution: {integrity: sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==}
 
-  markdown-it@14.1.1:
-    resolution: {integrity: sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==}
+  markdown-it@14.3.0:
+    resolution: {integrity: sha512-RCEsPjR+sr0x+AuYp601tKTkgFG4YEPLCzHST3cQ/fhlJkqAkz1L2/Qbp1j9qw5SBwQHFBoW8+hoN5xssOF0Tw==}
     hasBin: true
 
   marked@16.4.2:
@@ -9948,17 +10167,16 @@ packages:
   matrix-events-sdk@0.0.1:
     resolution: {integrity: sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==}
 
-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/d19cb751da8bbdc75c19db751fff25f21761d23a:
-    resolution: {tarball: https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/d19cb751da8bbdc75c19db751fff25f21761d23a}
-    version: 41.9.0
+  matrix-js-sdk@42.2.0:
+    resolution: {integrity: sha512-XlW++tv4BvWE3WrC9K0yZE5CMfZZnKFoZQkYZPxmtb5n/F4sZo6t7G7u59Llx455xGxnrdx1FxFd3tmhkGH8Mw==}
     engines: {node: '>=22.0.0'}
 
   matrix-web-i18n@3.6.0:
     resolution: {integrity: sha512-oY4YZCU8OqDZzmCiJpo8XrATa7XNOB5oFyIpE7O0jjaIEeu6LnQrHmm/fpsYkPUENVzGJm1YdoOtvcBrQx+h2g==}
     hasBin: true
 
-  matrix-widget-api@1.17.0:
-    resolution: {integrity: sha512-5FHoo3iEP3Bdlv5jsYPWOqj+pGdFQNLWnJLiB0V7Ygne7bb+Gsj3ibyFyHWC6BVw+Z+tSW4ljHpO17I9TwStwQ==}
+  matrix-widget-api@1.18.0:
+    resolution: {integrity: sha512-4T2f2koWmx05p1BLcT/9YGGGPSXpPT+PA4Oap/5fjhXsWPxMGJiGL97YpANMYLKsnE1sScYFeuyxIgdc1Qo+Ew==}
 
   md5.js@1.3.5:
     resolution: {integrity: sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==}
@@ -9981,16 +10199,12 @@ packages:
   mdurl@2.0.0:
     resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
 
-  media-typer@0.3.0:
-    resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
-    engines: {node: '>= 0.6'}
-
   media-typer@1.1.0:
     resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
     engines: {node: '>= 0.8'}
 
-  memfs@4.57.2:
-    resolution: {integrity: sha512-2nWzSsJzrukurSDna4Z0WywuScK4Id3tSKejgu74u8KCdW4uNrseKRSIDg75C6Yw5ZRqBe0F0EtMNlTbUq8bAQ==}
+  memfs@4.64.0:
+    resolution: {integrity: sha512-Kw72fgY7Wn+sD8KmtNWSafl1dz0UvAsE/PHs3YVfLiaZuA3HxNm9sRLqAu0ATiBGJvME1PxZXbBZPv5GycDeAw==}
     peerDependencies:
       tslib: '2'
 
@@ -10008,9 +10222,6 @@ packages:
     resolution: {integrity: sha512-EDYo6VlmtnumlcBCbh1gLJ//9jvM/ndXHfVXIFrZVr6fGcwTUyCTFNTLCKuY3ffbK8L/+3Mzqnd58RojiZqHVw==}
     engines: {node: '>=20'}
 
-  merge-descriptors@1.0.3:
-    resolution: {integrity: sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==}
-
   merge-descriptors@2.0.0:
     resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
     engines: {node: '>=18'}
@@ -10022,12 +10233,12 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
-  mermaid@11.14.0:
-    resolution: {integrity: sha512-GSGloRsBs+JINmmhl0JDwjpuezCsHB4WGI4NASHxL3fHo3o/BRXTxhDLKnln8/Q0lRFRyDdEjmk1/d5Sn1Xz8g==}
+  meriyah@6.1.4:
+    resolution: {integrity: sha512-Sz8FzjzI0kN13GK/6MVEsVzMZEPvOhnmmI1lU5+/1cGOiK3QUahntrNNtdVeihrO7t9JpoH75iMNXg6R6uWflQ==}
+    engines: {node: '>=18.0.0'}
 
-  methods@1.1.2:
-    resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
-    engines: {node: '>= 0.6'}
+  mermaid@11.16.0:
+    resolution: {integrity: sha512-Zvm3kbstgdpvIJPPItlL7fppIZ3kibvc1oZIGxdvk9t6UFz6flv+Jw7FtRGKwfcI8OckmH04LqG6LlS6X4B1pA==}
 
   micromark-util-character@2.1.1:
     resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
@@ -10068,11 +10279,6 @@ packages:
     resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==}
     engines: {node: '>=18'}
 
-  mime@1.6.0:
-    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
-    engines: {node: '>=4'}
-    hasBin: true
-
   mime@2.6.0:
     resolution: {integrity: sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==}
     engines: {node: '>=4.0.0'}
@@ -10127,6 +10333,10 @@ packages:
     resolution: {integrity: sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg==}
     engines: {node: 18 || 20 || >=22}
 
+  minimatch@10.2.6:
+    resolution: {integrity: sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==}
+    engines: {node: 18 || 20 || >=22}
+
   minimatch@3.1.5:
     resolution: {integrity: sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==}
 
@@ -10141,18 +10351,61 @@ packages:
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
+  minimizer-webpack-plugin@5.6.1:
+    resolution: {integrity: sha512-DoeAZz8Q1C1znwsUzej1fdoi4jCf7/+Em27ouLqfK/+3m8G+D7yDhUwrc3CNhjSzGUN1kn7Iv4sWmjflQHenpw==}
+    engines: {node: '>= 10.13.0'}
+    peerDependencies:
+      '@minify-html/node': '*'
+      '@swc/core': '*'
+      '@swc/css': '*'
+      '@swc/html': '*'
+      clean-css: '*'
+      cssnano: '*'
+      csso: '*'
+      esbuild: '*'
+      html-minifier-terser: '*'
+      lightningcss: '*'
+      postcss: '*'
+      uglify-js: '*'
+      webpack: ^5.1.0
+    peerDependenciesMeta:
+      '@minify-html/node':
+        optional: true
+      '@swc/core':
+        optional: true
+      '@swc/css':
+        optional: true
+      '@swc/html':
+        optional: true
+      clean-css:
+        optional: true
+      cssnano:
+        optional: true
+      csso:
+        optional: true
+      esbuild:
+        optional: true
+      html-minifier-terser:
+        optional: true
+      lightningcss:
+        optional: true
+      postcss:
+        optional: true
+      uglify-js:
+        optional: true
+
   minipass-collect@2.0.1:
     resolution: {integrity: sha512-D7V8PO9oaz7PWGLbCACuI1qEOsq7UKfLotx/C0Aet43fCUB/wfQ7DYeq2oR/svFJGYDHPr38SHATeaj/ZoKHKw==}
     engines: {node: '>=16 || 14 >=14.17'}
 
-  minipass-fetch@4.0.1:
-    resolution: {integrity: sha512-j7U11C5HXigVuutxebFadoYBbd7VSdZWggSe64NVdvWNBqGAiXPL2QVCehjmw7lY1oF9gOllYbORh+hiNgfPgQ==}
-    engines: {node: ^18.17.0 || >=20.5.0}
-
   minipass-fetch@5.0.2:
     resolution: {integrity: sha512-2d0q2a8eCi2IRg/IGubCNRJoYbA1+YPXAzQVRFmB45gdGZafyivnZ5YSEfo3JikbjGxOdntGFvBQGqaSMXlAFQ==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
+  minipass-fetch@6.0.0:
+    resolution: {integrity: sha512-AWI8bKapGmgx/J0E6IGYSKj8TiHebZkmKWSs8raPSw8KXwgEAJ+Bw3+LSdXHR6T/RHKAWCOYk2MiLrYluaUU6w==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
+
   minipass-flush@1.0.5:
     resolution: {integrity: sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==}
     engines: {node: '>= 8'}
@@ -10161,10 +10414,6 @@ packages:
     resolution: {integrity: sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==}
     engines: {node: '>=8'}
 
-  minipass-sized@1.0.3:
-    resolution: {integrity: sha512-MbkQQ2CTiBMlA2Dm/5cY+9SWFEN8pzzOXi6rlM5Xxq0Yqbda5ZQy9sU75a673FE9ZK0Zsbr6Y5iP6u9nktfg2g==}
-    engines: {node: '>=8'}
-
   minipass-sized@2.0.0:
     resolution: {integrity: sha512-zSsHhto5BcUVM2m1LurnXY6M//cGhVaegT71OfOXoprxT6o780GZd792ea6FfrQkuU4usHZIUczAQMRUE2plzA==}
     engines: {node: '>=8'}
@@ -10224,6 +10473,26 @@ packages:
   moo-color@1.0.3:
     resolution: {integrity: sha512-i/+ZKXMDf6aqYtBhuOcej71YSlbjT3wCO/4H1j8rPvxDJEifdwgg5MaFyu6iYAT8GBZJg2z0dkgK4YMzvURALQ==}
 
+  motion-dom@12.42.2:
+    resolution: {integrity: sha512-5gIMWLp/PycBtJRJWRgjxke5n8dlvkSn2DrYW+tr3XcqAZY1xZh6BJyooJXCM8wdfM7wfMjkBJNLge1CKPUIRA==}
+
+  motion-utils@12.39.0:
+    resolution: {integrity: sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==}
+
+  motion@12.42.2:
+    resolution: {integrity: sha512-Atvv11yUKIid41cVrRBDVX5m8tF8kNpExRSlbpt6APClhDjtwQssgFHhQzejxw7/7YYbjHSPKBVbHo05BuJT5Q==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   mrmime@2.0.1:
     resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
     engines: {node: '>=10'}
@@ -10241,11 +10510,11 @@ packages:
   murmurhash-js@1.0.0:
     resolution: {integrity: sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==}
 
-  nan@2.26.2:
-    resolution: {integrity: sha512-0tTvBTYkt3tdGw22nrAy50x7gpbGCCFH3AFcyS5WiUu7Eu4vWlri1woE6qHBSfy11vksDqkiwjOnlR7WV8G1Hw==}
+  nan@2.28.0:
+    resolution: {integrity: sha512-fTsDz99OTq2sVePhGdp4qQhggZFtKr64ZNVyVajRKtMOkJxYekplBh577PiJB12v/D3s2E5cGtOI45LWp6rnLQ==}
 
-  nanoid@3.3.11:
-    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+  nanoid@3.3.16:
+    resolution: {integrity: sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
@@ -10275,13 +10544,10 @@ packages:
   no-case@3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
 
-  node-abi@4.29.0:
-    resolution: {integrity: sha512-bGc7hHz6lrdpMqH3XqfiHc5PKzEhjgUj6OLpTXynkLi9JZKyMByI/tdpm4Liu6O2BjtE1lakBWXjOQS1EnSQLQ==}
+  node-abi@4.33.0:
+    resolution: {integrity: sha512-vLBWCKb+7LWsX+TbfzWOkw0W81m377tyx3hOweBTjO43CXZnRGS1/JPWs20fr0PgZyDXk6ROYrylsEycK8raDA==}
     engines: {node: '>=22.12.0'}
 
-  node-addon-api@1.7.2:
-    resolution: {integrity: sha512-ibPK3iA+vaY1eEjESkQkM0BbCqFOaZMiXRTtdB0u7b4djtY6JnsjvPdUHVMg6xQt3B8fpTTWHI9A+ADjM9frzg==}
-
   node-api-version@0.2.1:
     resolution: {integrity: sha512-2xP/IGGMmmSQpI1+O/k72jF/ykvZ89JeuKX3TLJAYPDVLUalrshrLHkeVcCCZqG/eEa635cr8IBYzgnDvM2O8Q==}
 
@@ -10294,21 +10560,22 @@ packages:
       encoding:
         optional: true
 
-  node-gyp@11.5.0:
-    resolution: {integrity: sha512-ra7Kvlhxn5V9Slyus0ygMa2h+UqExPqUIkfk7Pc8QTLT956JLSy51uWFwHtIYy0vI8cB4BDhc/S03+880My/LQ==}
-    engines: {node: ^18.17.0 || >=20.5.0}
-    hasBin: true
-
   node-gyp@12.2.0:
     resolution: {integrity: sha512-q23WdzrQv48KozXlr0U1v9dwO/k59NHeSzn6loGcasyf0UnSrtzs8kRxM+mfwJSf0DkX0s43hcqgnSO4/VNthQ==}
     engines: {node: ^20.17.0 || >=22.9.0}
     hasBin: true
 
+  node-gyp@13.0.0:
+    resolution: {integrity: sha512-FYYyBDWdc+kzoyPd5PqHUgM9DGs1C/Z4jxBZAOnA2GRUVXPivKRREq5q+VVPXVr9aGVqGMaMqyFHbviy/yb7Hg==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
+    hasBin: true
+
   node-int64@0.4.0:
     resolution: {integrity: sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==}
 
-  node-releases@2.0.37:
-    resolution: {integrity: sha512-1h5gKZCF+pO/o3Iqt5Jp7wc9rH3eJJ0+nh/CIoiRwjRxde/hAHyLPXYN4V3CqKAbiZPSeJFSWHmJsbkicta0Eg==}
+  node-releases@2.0.51:
+    resolution: {integrity: sha512-wRNIrw4DmVLKQlbgOMdkMx27Wrpzes2hh5Jtbi2bjPd+4wJstWIqP5A+lscnqbm0xxmT5Bpg8Lec5ItEBwx6BQ==}
+    engines: {node: '>=18'}
 
   node-stdlib-browser@1.3.1:
     resolution: {integrity: sha512-X75ZN8DCLftGM5iKwoYLA3rjnrAEs97MkzvSd4q2746Tgpg8b8XWiBGiBG4ZpgcAqBgtgPHTiAc8ZMCvZuikDw==}
@@ -10317,9 +10584,9 @@ packages:
   non-layered-tidy-tree-layout@2.0.2:
     resolution: {integrity: sha512-gkXMxRzUH+PB0ax9dUN0yYF0S25BqeAYqhgMaLUFmpXLEk7Fcu8f4emJuOAY0V8kjDICxROIKsTAKsV/v355xw==}
 
-  nopt@8.1.0:
-    resolution: {integrity: sha512-ieGu42u/Qsa4TFktmaKEwM6MQH0pOWnaB3htzh0JRtx84+Mebc0cbZYN5bC+6WTZ4+77xrL9Pn5m7CV6VIkV7A==}
-    engines: {node: ^18.17.0 || >=20.5.0}
+  nopt@10.0.1:
+    resolution: {integrity: sha512-df3sBr/6ax9hSGuC3CspvLlbnX8cP5L5nZwXF8cGN8l0zSWR6BvzmQ6jPUKjvo6+/xdpkNvEcucBNUdBeeV13g==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
     hasBin: true
 
   nopt@9.0.0:
@@ -10327,9 +10594,6 @@ packages:
     engines: {node: ^20.17.0 || >=22.9.0}
     hasBin: true
 
-  normalize-package-data@2.5.0:
-    resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
-
   normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
@@ -10338,33 +10602,33 @@ packages:
     resolution: {integrity: sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==}
     engines: {node: '>=10'}
 
-  npm-bundled@5.0.0:
-    resolution: {integrity: sha512-JLSpbzh6UUXIEoqPsYBvVNVmyrjVZ1fzEFbqxKkTJQkWBO3xFzFT+KDnSKQWwOQNbuWRwt5LSD6HOTLGIWzfrw==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  npm-bundled@6.0.0:
+    resolution: {integrity: sha512-EqdodKEW6pYM+dPxA66TZQfMEqVDiuzjDM9edSjuPI1mXUbUJwVxkgqMZSJvs8RTXz2CGq8HUol/AffTZX5g8w==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
 
-  npm-install-checks@8.0.0:
-    resolution: {integrity: sha512-ScAUdMpyzkbpxoNekQ3tNRdFI8SJ86wgKZSQZdUxT+bj0wVFpsEMWnkXP0twVe1gJyNF5apBWDJhhIbgrIViRA==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  npm-install-checks@9.0.0:
+    resolution: {integrity: sha512-t05Izcgi7p15cpldqoiXYpjzlkTTvBw33sgjmL/JjcvtV0ydbm2O4iEXO8A6smqComu5FAQhUas86HTMQ6Z1Uw==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
 
-  npm-normalize-package-bin@5.0.0:
-    resolution: {integrity: sha512-CJi3OS4JLsNMmr2u07OJlhcrPxCeOeP/4xq67aWNai6TNWWbTrlNDgl8NcFKVlcBKp18GPj+EzbNIgrBfZhsag==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  npm-normalize-package-bin@6.0.0:
+    resolution: {integrity: sha512-tdt4aFn9QamlhdN3HV2D2ccpBwO5/fyjjbXUxYA6uBjyekMZcZvDq0aSj9t5Jo+tih6AYFnt/cuIRn9013e0Uw==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
 
-  npm-package-arg@13.0.2:
-    resolution: {integrity: sha512-IciCE3SY3uE84Ld8WZU23gAPPV9rIYod4F+rc+vJ7h7cwAJt9Vk6TVsK60ry7Uj3SRS3bqRRIGuTp9YVlk6WNA==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  npm-package-arg@14.0.0:
+    resolution: {integrity: sha512-69XQh3k+dtGa1p+7RaR57IuG3rCko96xr/nUfN4yDYBXbTYICiWcOpsFKLN2GtGE9cyIljE+f1exnaYt9MvM+Q==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
 
-  npm-packlist@10.0.4:
-    resolution: {integrity: sha512-uMW73iajD8hiH4ZBxEV3HC+eTnppIqwakjOYuvgddnalIw2lJguKviK1pcUJDlIWm1wSJkchpDZDSVVsZEYRng==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  npm-packlist@11.2.0:
+    resolution: {integrity: sha512-TEuN5ZCDBmJ2kcoW7IgRRt3P09sL9mAC5gg1FWQcJVkEdIuAAgy1e459JahGKAjScLqqSodAJtYJ578kQGY+Ng==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
 
-  npm-pick-manifest@11.0.3:
-    resolution: {integrity: sha512-buzyCfeoGY/PxKqmBqn1IUJrZnUi1VVJTdSSRPGI60tJdUhUoSQFhs0zycJokDdOznQentgrpf8LayEHyyYlqQ==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  npm-pick-manifest@12.0.0:
+    resolution: {integrity: sha512-8Fs3YLrnNOhrCdPNZy18MzNgVC58LTDAFzq1FdZO/p3BHeCC/coz+t4F5Pxabys8HJpyTUorMea26GkXsb4J/Q==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
 
-  npm-registry-fetch@19.1.1:
-    resolution: {integrity: sha512-TakBap6OM1w0H73VZVDf44iFXsOS3h+L4wVMXmbWOQroZgFhMch0juN6XSzBNlD965yIKvWg2dfu7NSiaYLxtw==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  npm-registry-fetch@20.0.1:
+    resolution: {integrity: sha512-vzc1svxw/kw1IRjFsLi6gaxe1Olqm88V0tIfu2u5raL0b1gChe6ZEXNkyUlKxUC7s/egt5NxZHkbY18tMKKLfQ==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
 
   npm-run-path@4.0.1:
     resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
@@ -10376,20 +10640,8 @@ packages:
   nwsapi@2.2.23:
     resolution: {integrity: sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==}
 
-  nx@22.6.5:
-    resolution: {integrity: sha512-VRKhDAt684dXNSz9MNjE7MekkCfQF41P2PSx5jEWQjDEP1Z4jFZbyeygWs5ZyOroG7/n0MoWAJTe6ftvIcBOAg==}
-    hasBin: true
-    peerDependencies:
-      '@swc-node/register': ^1.11.1
-      '@swc/core': ^1.15.8
-    peerDependenciesMeta:
-      '@swc-node/register':
-        optional: true
-      '@swc/core':
-        optional: true
-
-  nx@22.7.1:
-    resolution: {integrity: sha512-SadJUQY57MiwRIetm9rhZhdpFeOe1Csib2Vg9C423Pw/h0fZE14qUo6+OBby9vLh5QCkRfRZ0WaHkeO5q6yNtA==}
+  nx@23.1.1:
+    resolution: {integrity: sha512-oDdW2JgVllgfyyN6OqlRzeABw0QrlXdxyl9rtOUMMXQzlkpYA1RTs8jinJCe6QSo7aEn0dZ+Ar7dd09hMudBsg==}
     hasBin: true
     peerDependencies:
       '@swc-node/register': ^1.11.1
@@ -10420,32 +10672,9 @@ packages:
     resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
     engines: {node: '>= 0.4'}
 
-  object.entries@1.1.9:
-    resolution: {integrity: sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==}
-    engines: {node: '>= 0.4'}
-
-  object.fromentries@2.0.8:
-    resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==}
-    engines: {node: '>= 0.4'}
-
-  object.groupby@1.0.3:
-    resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==}
-    engines: {node: '>= 0.4'}
-
-  object.values@1.2.1:
-    resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
-    engines: {node: '>= 0.4'}
-
-  obuf@1.1.2:
-    resolution: {integrity: sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==}
-
   obug@2.1.1:
     resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==}
 
-  oidc-client-ts@3.5.0:
-    resolution: {integrity: sha512-l2q8l9CTCTOlbX+AnK4p3M+4CEpKpyQhle6blQkdFhm0IsBqsxm15bYaSa11G7pWdsYr6epdsRZxJpCyCRbT8A==}
-    engines: {node: '>=18'}
-
   on-finished@2.4.1:
     resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
     engines: {node: '>= 0.8'}
@@ -10461,20 +10690,20 @@ packages:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
     engines: {node: '>=6'}
 
-  onetime@7.0.0:
-    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
-    engines: {node: '>=18'}
-
   oniguruma-to-es@3.1.1:
     resolution: {integrity: sha512-bUH8SDvPkH3ho3dvwJwfonjlQ4R80vjyvrU8YpxuROddv55vAEJrTuCuCVUhhsHbtlD9tGGbaNApGQckXhS8iQ==}
 
+  open@10.1.0:
+    resolution: {integrity: sha512-mnkeQ1qP5Ue2wd+aivTD3NHd/lZ96Lu0jgf0pwktLPtx6cTZiH7tyeGRRHs0zX0rbrahXPnXlUnbeXyaBBuIaw==}
+    engines: {node: '>=18'}
+
   open@10.2.0:
     resolution: {integrity: sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==}
     engines: {node: '>=18'}
 
-  open@8.4.2:
-    resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
-    engines: {node: '>=12'}
+  open@11.0.0:
+    resolution: {integrity: sha512-smsWv2LzFjP03xmvFoJ331ss6h+jixfA4UUV/Bsiyuu4YJPfN+FIQGOIiv4w9/+MoHkfkJ22UIaQWRVFRfH6Vw==}
+    engines: {node: '>=20'}
 
   opener@1.5.2:
     resolution: {integrity: sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==}
@@ -10487,23 +10716,53 @@ packages:
   opus-recorder@8.0.5:
     resolution: {integrity: sha512-tBRXc9Btds7i3bVfA7d5rekAlyOcfsivt5vSIXHxRV1Oa+s6iXFW8omZ0Lm3ABWotVcEyKt96iIIUcgbV07YOw==}
 
-  ora@5.3.0:
-    resolution: {integrity: sha512-zAKMgGXUim0Jyd6CXK9lraBnD3H5yPGBPPOkC23a2BG6hsm4Zu6OQSjQuEtV0BHDf4aKHcUFvJiGRrFuW3MG8g==}
+  ora@5.4.1:
+    resolution: {integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==}
     engines: {node: '>=10'}
 
   os-browserify@0.3.0:
     resolution: {integrity: sha512-gjcpUc3clBf9+210TRaDWbf+rZZZEshZ+DlXMRCeAjp0xhTrnQsKHypIy1J3d5hKdUzj69t708EHtU8P6bUn0A==}
 
-  own-keys@1.0.1:
-    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
-    engines: {node: '>= 0.4'}
-
-  oxc-parser@0.128.0:
-    resolution: {integrity: sha512-XkOw3eiIxAgQ19WRew/Bq9wc5Ga/guaWIzDBzq80z1PyuDNGvWBpPby9k6YGwV8A8uMw+Nlq3xqlzuDYmUFYUw==}
+  oxc-parser@0.127.0:
+    resolution: {integrity: sha512-bkgD4qHlN7WxLdX8bLXdaU54TtQtAIg/ZBAfm0aje/mo3MRDo3P0hZSgr4U7O3xfX+fQmR5AP04JS/TGcZLcFA==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
-  oxc-resolver@11.19.1:
-    resolution: {integrity: sha512-qE/CIg/spwrTBFt5aKmwe3ifeDdLfA2NESN30E42X/lII5ClF8V7Wt6WIJhcGZjp0/Q+nQ+9vgxGk//xZNX2hg==}
+  oxc-parser@0.140.0:
+    resolution: {integrity: sha512-h6QFWd6lBMfjESqgQ27GjzrSDb0qbznp7VDQqp2zvgsrWut4vcchyMIzOVXvGQ2GMZgKw9RWrFNWv9WqGL0p7Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
+  oxc-resolver@11.24.2:
+    resolution: {integrity: sha512-FY91FiDBj7ls5MsFS9jN3tjz2o0/zsdSsymlakySaBwVJZorHhkWyICLZMKxlu1R9vYo+sd3z1jwb4J8x7bNDw==}
+
+  oxfmt@0.60.0:
+    resolution: {integrity: sha512-fViX6i+gJuZWY+jI/fnR6WRbRj70GZ9RlCd30MygJrHTUNc4DxvKHWw8vBjMjffv3PgU5qWDR0AzmojQByqaZA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      svelte: ^5.0.0
+      vite-plus: '*'
+    peerDependenciesMeta:
+      svelte:
+        optional: true
+      vite-plus:
+        optional: true
+
+  oxlint-tsgolint@7.0.2001:
+    resolution: {integrity: sha512-KjK/XLcXr1DSyonKhsuFqJRiuKqcyG9j3LJ8nkOsrLzGvodBPqzHOKauy10asLMDI0sUpvb+1sxlzff3udZvfg==}
+    hasBin: true
+
+  oxlint@1.75.0:
+    resolution: {integrity: sha512-m9WzjRcRYA/uqIZDa9tclrieoPJ/ln1QYTKdFx6NUOs8uY5DiHlIwRQoCrHT6OM6O3ww3l2skY5gO7G7ZphE7g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      oxlint-tsgolint: '>=7.0.2001'
+      vite-plus: '*'
+    peerDependenciesMeta:
+      oxlint-tsgolint:
+        optional: true
+      vite-plus:
+        optional: true
 
   p-cancelable@2.1.1:
     resolution: {integrity: sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==}
@@ -10529,10 +10788,6 @@ packages:
     resolution: {integrity: sha512-tkAQEw8ysMzmkhgw8k+1U/iPhWNhykKnSk4Rd5zLoPJCuJaGRPo6YposrZgaxHKzDHdDWWZvE/Sk7hsL2X/CpQ==}
     engines: {node: '>=18'}
 
-  p-retry@6.2.1:
-    resolution: {integrity: sha512-hEt02O4hUct5wtwg4H4KcWgDdm+l1bOaEy/hWzd8xtXB9BqxTWBBhb+2ImAtH4Cv4rPjV76xN3Zumqk3k3AhhQ==}
-    engines: {node: '>=16.17'}
-
   p-retry@8.0.0:
     resolution: {integrity: sha512-kFVqH1HxOHp8LupNsOys7bSV09VYTRLxarH/mokO4Rqhk6wGi70E0jh4VzvVGXfEVNggHoHLAMWsQqHyU1Ey9A==}
     engines: {node: '>=22'}
@@ -10547,16 +10802,16 @@ packages:
   package-manager-detector@1.6.0:
     resolution: {integrity: sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==}
 
-  pacote@21.5.0:
-    resolution: {integrity: sha512-VtZ0SB8mb5Tzw3dXDfVAIjhyVKUHZkS/ZH9/5mpKenwC9sFOXNI0JI7kEF7IMkwOnsWMFrvAZHzx1T5fmrp9FQ==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  pacote@22.0.0:
+    resolution: {integrity: sha512-++VqeOZeL03uGM2MFLk96jGCSt1owBGkyFKoPr+trwNlZhCpjN2RrvwYxt8nTbs1wNMqSFYurq0TafVWkAIHig==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
     hasBin: true
 
   pako@1.0.11:
     resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
 
-  pako@2.1.0:
-    resolution: {integrity: sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==}
+  pako@3.0.1:
+    resolution: {integrity: sha512-GupotUUI0mlhugKjUs4bjOwLt3nrehy9Ys2dxC0GtgVef5cnKggkDMmf2bq2poCCuVXopWPmqsc9VDT2iJUy+w==}
 
   param-case@3.0.4:
     resolution: {integrity: sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==}
@@ -10615,9 +10870,6 @@ packages:
     resolution: {integrity: sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==}
     engines: {node: 18 || 20 || >=22}
 
-  path-to-regexp@0.1.13:
-    resolution: {integrity: sha512-A/AGNMFN3c8bOlvV9RreMdrv7jsmF9XIfDeCd87+I8RNg6s78BhJxMu69NEMHBSJFxKidViTEdruRwEk/WIKqA==}
-
   path-to-regexp@8.4.2:
     resolution: {integrity: sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==}
 
@@ -10644,23 +10896,9 @@ packages:
     resolution: {integrity: sha512-eRWB5LBz7PpDu4PUlwT0PhnQfTQJlDDdPa35urV4Osrm0t0AqQFGn+UIkU3klZvwJ8KPO3VbBFsXquA6p6kqZw==}
     engines: {node: '>=12', npm: '>=6'}
 
-  pend@1.2.0:
-    resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
-
   perfect-debounce@1.0.0:
     resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
 
-  pg-int8@1.0.1:
-    resolution: {integrity: sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==}
-    engines: {node: '>=4.0.0'}
-
-  pg-protocol@1.13.0:
-    resolution: {integrity: sha512-zzdvXfS6v89r6v7OcFCHfHlyG/wvry1ALxZo4LqgUoy7W9xhBDMaqOuMiF3qEV45VqsN6rdlcehHrfDtlCPc8w==}
-
-  pg-types@2.2.0:
-    resolution: {integrity: sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==}
-    engines: {node: '>=4'}
-
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -10672,6 +10910,10 @@ packages:
     resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
     engines: {node: '>=12'}
 
+  picomatch@4.0.5:
+    resolution: {integrity: sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==}
+    engines: {node: '>=12'}
+
   pify@2.3.0:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
@@ -10680,8 +10922,8 @@ packages:
     resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
     engines: {node: '>= 6'}
 
-  pixelmatch@7.1.0:
-    resolution: {integrity: sha512-1wrVzJ2STrpmONHKBy228LM1b84msXDUoAzVEl0R8Mz4Ce6EPr+IVtxm8+yvrqLYMHswREkjYFaMxnyGnaY3Ng==}
+  pixelmatch@7.2.0:
+    resolution: {integrity: sha512-xhcb4yHu9sM/G7foGzoLtXYcC0zHEaOXXjRKhGup0fw78Nf2Tkiapv4EQyMzrbcmQPsllAI7DbFY2UT7PlI9Pg==}
     hasBin: true
 
   pkg-dir@4.2.0:
@@ -10698,17 +10940,17 @@ packages:
   pkg-types@2.3.0:
     resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
 
-  pkijs@3.3.3:
-    resolution: {integrity: sha512-+KD8hJtqQMYoTuL1bbGOqxb4z+nZkTAwVdNtWwe8Tc2xNbEmdJYIYoc6Qt0uF55e6YW6KuTHw1DjQ18gMhzepw==}
+  pkijs@3.4.0:
+    resolution: {integrity: sha512-emEcLuomt2j03vxD54giVB4SxTjnsqkU692xZOZXHDVoYyypEm+b3jpiTcc+Cf+myooc+/Ly0z01jqeNHVgJGw==}
     engines: {node: '>=16.0.0'}
 
-  playwright-core@1.59.1:
-    resolution: {integrity: sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==}
+  playwright-core@1.61.1:
+    resolution: {integrity: sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==}
     engines: {node: '>=18'}
     hasBin: true
 
-  playwright@1.59.1:
-    resolution: {integrity: sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==}
+  playwright@1.61.1:
+    resolution: {integrity: sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -10716,18 +10958,14 @@ packages:
     resolution: {integrity: sha512-uysumyrvkUX0rX/dEVqt8gC3sTBzd4zoWfLeS29nb53imdaXVvLINYXTI2GNqzaMuvacNx4uJQ8+b3zXR0pkgQ==}
     engines: {node: '>=10.4.0'}
 
-  pluralize@8.0.0:
-    resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
-    engines: {node: '>=4'}
-
   pluralizers@0.1.7:
     resolution: {integrity: sha512-mw6AejUiCaMQ6uPN9ObjJDTnR5AnBSmnHHy3uVTbxrSFSxO5scfwpTs8Dxyb6T2v7GSulhvOq+pm9y+hXUvtOA==}
 
   png-chunks-extract@1.0.0:
     resolution: {integrity: sha512-ZiVwF5EJ0DNZyzAqld8BP1qyJBaGOFaq9zl579qfbkcmOwWLLO4I9L8i2O4j3HkI6/35i0nKG2n+dZplxiT89Q==}
 
-  png-to-ico@3.0.1:
-    resolution: {integrity: sha512-S8BOAoaGd9gT5uaemQ62arIY3Jzco7Uc7LwUTqRyqJDTsKqOAiyfyN4dSdT0D+Zf8XvgztgpRbM5wnQd7EgYwg==}
+  png-to-ico@3.0.2:
+    resolution: {integrity: sha512-36vvp3/YF7LPYkUEOj08/WgB1wI63qW391YfOhOWckgOtGkarr9+EhPBimcCmRP7fJaG4EaXQhTTaQ8qqdj8aA==}
     engines: {node: '>=20'}
     hasBin: true
 
@@ -10767,8 +11005,8 @@ packages:
     peerDependencies:
       postcss: ^8.4.6
 
-  postcss-color-functional-notation@8.0.3:
-    resolution: {integrity: sha512-MyaFK+3PusD7F2+qlMDP6+zfSgHWP17AtmvHQs44W3+Qbb39VptVDVRJ4Lf7gHSVffW5ekEy/XrsZ0S0t34hrA==}
+  postcss-color-functional-notation@8.0.6:
+    resolution: {integrity: sha512-JwHsQNb/zzjRN/RFdhWWb3bk6WiNs7KW85+vYtLP1YVL6MgPQn/2qNMgFrjD8Ymg+wfP3XlwtSrYUI+K4zPvHA==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
@@ -10845,8 +11083,8 @@ packages:
     peerDependencies:
       postcss: ^8.4.32
 
-  postcss-double-position-gradients@7.0.0:
-    resolution: {integrity: sha512-Msr/dxj8Os7KLJE5Hdhvprwm3K5Zrh1KTY0eFN3ngPKNkej/Usy4BM9JQmqE6CLAkDpHoQVsi4snbL72CPt6qg==}
+  postcss-double-position-gradients@7.0.2:
+    resolution: {integrity: sha512-X62YBNOxoCVvoUpV3uxdg5h86nbzJwF0ogLrgHUL73YsX8FJ5pGeOxRuaUcqhHxQ4wcoKY+O55lJAyCGsxZLJA==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
@@ -10903,8 +11141,8 @@ packages:
     peerDependencies:
       postcss: ^8.4.21
 
-  postcss-lab-function@8.0.3:
-    resolution: {integrity: sha512-rUa27RLVXjMn1aDkHEt5dRsK80+bAACPr8w5Ow0BkIlfH6gEk0Mh1I0REkYhtp4UhKFw1HLEk3AzvKBi6BGOqw==}
+  postcss-lab-function@8.0.6:
+    resolution: {integrity: sha512-zFU65d+uKFTdkvJWPpEMgRwY0gh7RN5FD4aWfLxbeXeAkITSpODG6nH2GKAdbnA4jWjyPac1lw8osw+1ATMcWg==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
@@ -10997,9 +11235,9 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
 
-  postcss-nested@7.0.2:
-    resolution: {integrity: sha512-5osppouFc0VR9/VYzYxO03VaDa3e8F23Kfd6/9qcZTUI8P58GIYlArOET2Wq0ywSl2o2PjELhYOFI4W7l5QHKw==}
-    engines: {node: '>=18.0'}
+  postcss-nested@8.0.1:
+    resolution: {integrity: sha512-PvSIwDVh1NTw939iu4FBK+oeZfSm0cbErFAjXCTPiStammzobBNE2SiQNezy8Xp+Oud2uLXaLpTauv3UdxWjbQ==}
+    engines: {node: ^22.0.0 || ^24.0.0 || >= 26.0.0}
     peerDependencies:
       postcss: ^8.2.14
 
@@ -11092,8 +11330,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  postcss-preset-env@11.2.1:
-    resolution: {integrity: sha512-dqL7WR5wg9yP/+6pTHIsIeIpK6XVghJDE4/r4ZSdr5ExrbLiN5x78gly0Xs0MLGbHy2oT3WWNfbxowmnw9BurQ==}
+  postcss-preset-env@11.3.2:
+    resolution: {integrity: sha512-O7aA42UBH/89RkGy1YXgJqb+LxZ2+zvR8bHn9qyYcYc+lOo4g9TuIpb75nZT1tN77Bd6pX3DMZ+eYohS4MfKQg==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       postcss: ^8.4
@@ -11142,8 +11380,8 @@ packages:
     peerDependencies:
       postcss: ^8.4
 
-  postcss-selector-parser@7.1.1:
-    resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
+  postcss-selector-parser@7.1.4:
+    resolution: {integrity: sha512-HeP7D2wyhkR+XaK6v4W8oRF62Dsz4flyuczALJp61GckGm42u1saSSJ/0auvcBqxs3jMRFEcPK34At/0JBKdOg==}
     engines: {node: '>=4'}
 
   postcss-simple-vars@7.0.1:
@@ -11167,28 +11405,12 @@ packages:
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
-  postcss@8.5.14:
-    resolution: {integrity: sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg==}
+  postcss@8.5.25:
+    resolution: {integrity: sha512-DTPx3RWSSnWyzLxQnlH0rJP+EW5ekl16ZU4/psbIhA0e53kJfdgaN5vKM+xP7yJtXVu+nfdVFmlgFDEKAe4Pyw==}
     engines: {node: ^10 || ^12 || >=14}
 
-  postgres-array@2.0.0:
-    resolution: {integrity: sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==}
-    engines: {node: '>=4'}
-
-  postgres-bytea@1.0.1:
-    resolution: {integrity: sha512-5+5HqXnsZPE65IJZSMkZtURARZelel2oXUEO8rH83VS/hxH5vv1uHquPg5wZs8yMAfdv971IU+kcPUczi7NVBQ==}
-    engines: {node: '>=0.10.0'}
-
-  postgres-date@1.0.7:
-    resolution: {integrity: sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==}
-    engines: {node: '>=0.10.0'}
-
-  postgres-interval@1.2.0:
-    resolution: {integrity: sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==}
-    engines: {node: '>=0.10.0'}
-
-  posthog-js@1.372.8:
-    resolution: {integrity: sha512-NAFWVScFGnU5jgGNLkrY/UnGH82uULs9RsJ/f26LkLn1l0MOZfq+/z+2RaOOQQX4NHruIVuxqz3J/50bgRG68A==}
+  posthog-js@1.407.2:
+    resolution: {integrity: sha512-5deTvXopn+NJWEmCUw8Ix/ms3cv2+60WJ73Vgbvu2wSkZY/FIj2uqAgCnq7IewGpGC+tH7CAbPYFzH6hw8eW1w==}
 
   postject@1.0.0-alpha.6:
     resolution: {integrity: sha512-b9Eb8h2eVqNE8edvKdwqkrY6O7kAwmI8kcnBv1NScolYJbo59XUF0noFq+lxbC1yN20bmC0WBEbDC5H/7ASb0A==}
@@ -11198,8 +11420,12 @@ packages:
   potpack@2.1.0:
     resolution: {integrity: sha512-pcaShQc1Shq0y+E7GqJqvZj8DTthWV1KeHGdi0Z6IAin2Oi3JnLCOfwnCo84qc+HAp52wT9nK9H7FAJp5a44GQ==}
 
-  preact@10.28.3:
-    resolution: {integrity: sha512-tCmoRkPQLpBeWzpmbhryairGnhW9tKV6c6gr/w+RhoRoKEJwsjzipwp//1oCpGPOchvSLaAPlpcJi9MwMmoPyA==}
+  powershell-utils@0.1.0:
+    resolution: {integrity: sha512-dM0jVuXJPsDN6DvRpea484tCUaMiXWjuCn++HGTqUWzGDjv5tZkEZldAJ/UMlqRYGFrD/etByo4/xOuC/snX2A==}
+    engines: {node: '>=20'}
+
+  preact@10.29.3:
+    resolution: {integrity: sha512-D9NL1GAnJZhc3RndVs4gDdxEeU9TcHgywMrhhOsnpdlvFjdbx0gAsLUnH6JEhlJH5giL7Tx5biWPUSEXE/HPzw==}
 
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
@@ -11210,11 +11436,6 @@ packages:
     engines: {node: '>=10.13.0'}
     hasBin: true
 
-  prettier@3.8.3:
-    resolution: {integrity: sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==}
-    engines: {node: '>=14'}
-    hasBin: true
-
   pretty-error@4.0.0:
     resolution: {integrity: sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==}
 
@@ -11222,22 +11443,18 @@ packages:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
 
-  pretty-format@30.3.0:
-    resolution: {integrity: sha512-oG4T3wCbfeuvljnyAzhBvpN45E8iOTXCU/TD3zXW80HA3dQ4ahdqMkWGiPWZvjpQwlbyHrPTWUAqUzGzv4l1JQ==}
-    engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
-
   pretty-format@30.4.1:
     resolution: {integrity: sha512-K6KiKMHTL4jjX4u3Kir2EW07nRfcqVTXIImx50wbjHQTcZPgg+gjVeNTIT3l3L1Rd4UefxfogquC9J37SoFyyw==}
     engines: {node: ^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0}
 
-  proc-log@5.0.0:
-    resolution: {integrity: sha512-Azwzvl90HaF0aCz1JrDdXQykFakSSNPaPoiZ9fm5qJIMHioDZEi7OAdRwSm6rSoPtY3Qutnm3L7ogmg3dc+wbQ==}
-    engines: {node: ^18.17.0 || >=20.5.0}
-
   proc-log@6.1.0:
     resolution: {integrity: sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
+  proc-log@7.0.0:
+    resolution: {integrity: sha512-FYgfaA69XZ93zaXLoMNQ+ViDXGGBgR8aLh03txzcFhV+9xOXx7+8DLCULrKKpR9+GsH9ZfHm82aSUPpozX0Ztg==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
+
   process-nextick-args@2.0.1:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
 
@@ -11269,8 +11486,8 @@ packages:
   property-information@7.1.0:
     resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
 
-  protobufjs@7.5.5:
-    resolution: {integrity: sha512-3wY1AxV+VBNW8Yypfd1yQY9pXnqTAN+KwQxL8iYm3/BjKYMNg4i0owhEe26PWDOMaIrzeeF98Lqd5NGz4omiIg==}
+  protobufjs@7.6.5:
+    resolution: {integrity: sha512-/FPD0nUc9jH6rfFjji9IBqOz4pcSE3CsT1m7Ep6Mdb0LxSUMj8hgl6GomOvZzpNpAqqGaXA0P3VSrZLFzIhQrw==}
     engines: {node: '>=12.0.0'}
 
   protocol-buffers-schema@3.6.1:
@@ -11280,6 +11497,15 @@ packages:
     resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
     engines: {node: '>= 0.10'}
 
+  proxy-agent-negotiate@1.1.0:
+    resolution: {integrity: sha512-N8IBcM3UgCVzz2L2Lqv8DVntDnnC8/hiV4nEDUPkqq72TPUgYWjQc+bdZlBPZK9LzPAvOY//gAt0S0DApoOXWQ==}
+    engines: {node: '>= 20'}
+    peerDependencies:
+      kerberos: ^2.0.0
+    peerDependenciesMeta:
+      kerberos:
+        optional: true
+
   proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
 
@@ -11323,8 +11549,8 @@ packages:
     engines: {node: '>=10.13.0'}
     hasBin: true
 
-  qs@6.15.0:
-    resolution: {integrity: sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==}
+  qs@6.15.3:
+    resolution: {integrity: sha512-O9gl3zCl5h5blw1KGUzQKhA5oUXSl8rwUIM5o0S3nCXMliSvy5Dzx7/DJcI+SwgICv+IneSZwhBh1oSyEHA71A==}
     engines: {node: '>=0.6'}
 
   quansync@0.2.11:
@@ -11356,24 +11582,14 @@ packages:
   randomfill@1.0.4:
     resolution: {integrity: sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==}
 
-  range-parser@1.2.1:
-    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
+  range-parser@1.3.0:
+    resolution: {integrity: sha512-hek2mFQpPuI4E1BBKrSto+BU3e3x4xuarsbiwr3+lf7p44juvFMV0XFWQAP3xUyqXA4RrXLIoaSUGbSt056ZMw==}
     engines: {node: '>= 0.6'}
 
-  raw-body@2.5.3:
-    resolution: {integrity: sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==}
-    engines: {node: '>= 0.8'}
-
   raw-body@3.0.2:
     resolution: {integrity: sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==}
     engines: {node: '>= 0.10'}
 
-  raw-loader@4.0.2:
-    resolution: {integrity: sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==}
-    engines: {node: '>= 10.13.0'}
-    peerDependencies:
-      webpack: ^4.0.0 || ^5.0.0
-
   re-resizable@6.11.2:
     resolution: {integrity: sha512-2xI2P3OHs5qw7K0Ud1aLILK6MQxW50TcO+DetD9eIV58j84TqYeHoZcL9H4GXFXXIh7afhH8mv5iUCXII7OW7A==}
     peerDependencies:
@@ -11407,10 +11623,10 @@ packages:
     resolution: {integrity: sha512-aEZ9qP+/M+58x2qgfSFEWH1BxLyHe5+qkLNJOZQb5iGS017jpbRnoKhNRrXPeA6RfBrZO5wZrT9DMC1UqE1f1w==}
     engines: {node: ^20.9.0 || >=22}
 
-  react-dom@19.2.6:
-    resolution: {integrity: sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g==}
+  react-dom@19.2.8:
+    resolution: {integrity: sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==}
     peerDependencies:
-      react: ^19.2.6
+      react: ^19.2.8
 
   react-focus-lock@2.13.7:
     resolution: {integrity: sha512-20lpZHEQrXPb+pp1tzd4ULL6DyO5D2KnR0G69tTDdydrmNhU7pdFmbQUYVyHUgp+xN29IuFR0PVuhOmvaZL9Og==}
@@ -11430,11 +11646,8 @@ packages:
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
-  react-is@19.2.5:
-    resolution: {integrity: sha512-Dn0t8IQhCmeIT3wu+Apm1/YVsJXsGWi6k4sPdnBIdqMVtHtv0IGi6dcpNpNkNac0zB2uUAqNX3MHzN8c+z2rwQ==}
-
-  react-is@19.2.6:
-    resolution: {integrity: sha512-XjBR15BhXuylgWGuslhDKqlSayuqvqBX91BP8pauG8kd1zY8kotkNWbXksTCNRarse4kuGbe2kIY05ARtwNIvw==}
+  react-is@19.2.8:
+    resolution: {integrity: sha512-s5un28nYxKJw5gvUHyW5PCC28CvBqLu9r3cWgzHT4Vo/5fqqkFcdRYsGcKf50WMPpjjFZS5d76fn3YCo2njKwQ==}
 
   react-merge-refs@3.0.2:
     resolution: {integrity: sha512-MSZAfwFfdbEvwkKWP5EI5chuLYnNUxNS7vyS0i1Jp+wtd8J4Ga2ddzhaE68aMol2Z4vCnRM/oGOo1a3V75UPlw==}
@@ -11479,8 +11692,8 @@ packages:
       '@types/react':
         optional: true
 
-  react-resizable-panels@4.7.2:
-    resolution: {integrity: sha512-1L2vyeBG96hp7N6x6rzYXJ8EjYiDiffMsqj3cd+T9aOKwscvuyCn2CuZ5q3PoUSTIJUM6Q5DgXH1bdDe6uvh2w==}
+  react-resizable-panels@4.12.2:
+    resolution: {integrity: sha512-NwY5LCo4WrxVvDh0xoMML6EMLPONP/8ckKcIdpnojxexoatZdjLiRqLJQjQK5CPkd4SYiB/2M5BVrjZBQtOO7Q==}
     peerDependencies:
       react: ^18.0.0 || ^19.0.0
       react-dom: ^18.0.0 || ^19.0.0
@@ -11504,14 +11717,14 @@ packages:
       react: '>=16.6.0'
       react-dom: '>=16.6.0'
 
-  react-virtuoso@4.18.5:
-    resolution: {integrity: sha512-QDyNjyNEuurZG67SOmzYyxEkQYSyGmAMixOI6M15L/Q4CF39EgG+88y6DgZRo0q7rmy0HPx3Fj90I8/tPdnRCQ==}
+  react-virtuoso@4.18.11:
+    resolution: {integrity: sha512-Qeeq9vqa5seCxACvzbQTUeq3s2/Bu+VlwOMF0jfy3E/ZKHLiXWwJpXBhv2rckqYkvm1XRVFLCBMCmqCU8JNEJg==}
     peerDependencies:
       react: '>=16 || >=17 || >= 18 || >= 19'
       react-dom: '>=16 || >=17 || >= 18 || >=19'
 
-  react@19.2.6:
-    resolution: {integrity: sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q==}
+  react@19.2.8:
+    resolution: {integrity: sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==}
     engines: {node: '>=0.10.0'}
 
   read-binary-file-arch@1.0.6:
@@ -11521,14 +11734,6 @@ packages:
   read-cache@1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
 
-  read-pkg-up@7.0.1:
-    resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
-    engines: {node: '>=8'}
-
-  read-pkg@5.2.0:
-    resolution: {integrity: sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==}
-    engines: {node: '>=8'}
-
   readable-stream@2.3.8:
     resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
 
@@ -11543,16 +11748,12 @@ packages:
   readdir-glob@1.1.3:
     resolution: {integrity: sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==}
 
-  readdirp@3.6.0:
-    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
-    engines: {node: '>=8.10.0'}
-
   readdirp@5.0.0:
     resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
     engines: {node: '>= 20.19.0'}
 
-  recast@0.23.11:
-    resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
+  recast@0.23.12:
+    resolution: {integrity: sha512-dEWRjcINDu/F4l2dYx57ugBtD7HV9KXESyxhzw/MqWLeglJrsjJKqACPyUPg+6AF8mIgm+Zi0dZ3ACoIg+QtpA==}
     engines: {node: '>= 4'}
 
   rechoir@0.8.0:
@@ -11572,10 +11773,6 @@ packages:
   reflect-metadata@0.2.2:
     resolution: {integrity: sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==}
 
-  reflect.getprototypeof@1.0.10:
-    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
-    engines: {node: '>= 0.4'}
-
   regenerate-unicode-properties@10.2.2:
     resolution: {integrity: sha512-m03P+zhBeQd1RGnYxrGyDAPpWX/epKirLrp8e3qevZdVkKtnCrjjWczIbYc8+xd6vcTStVlqfycTx1KR4LOr0g==}
     engines: {node: '>=4'}
@@ -11592,14 +11789,6 @@ packages:
   regex@6.1.0:
     resolution: {integrity: sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==}
 
-  regexp-tree@0.1.27:
-    resolution: {integrity: sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==}
-    hasBin: true
-
-  regexp.prototype.flags@1.5.4:
-    resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
-    engines: {node: '>= 0.4'}
-
   regexparam@3.0.0:
     resolution: {integrity: sha512-RSYAtP31mvYLkAHrOlh25pCNQ5hWnT106VukGaaFfuJrZFkGRX5GhUAdPqpSDXxOhA2c4akmRuplv1mRqnBn6Q==}
     engines: {node: '>=8'}
@@ -11611,10 +11800,6 @@ packages:
   regjsgen@0.8.0:
     resolution: {integrity: sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==}
 
-  regjsparser@0.10.0:
-    resolution: {integrity: sha512-qx+xQGZVsy55CH0a1hiVwHmqjLryfh7wQyF5HO07XJ9f7dQMY/gPQHhlyDkIzJKC+x2fUCpCcUODUUUFrm7SHA==}
-    hasBin: true
-
   regjsparser@0.13.0:
     resolution: {integrity: sha512-NZQZdC5wOE/H3UT28fVGL+ikOZcEzfMGk/c3iN9UGxzWHMa1op7274oyiUVrAG4B2EuFhus8SvkaYnhvW92p9Q==}
     hasBin: true
@@ -11646,9 +11831,6 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
-  requires-port@1.0.0:
-    resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
-
   resedit@1.7.2:
     resolution: {integrity: sha512-vHjcY2MlAITJhC0eRD/Vv8Vlgmu9Sd3LX9zZvtGzU5ZImdTN3+d6e/4mnTyV8vEbyf1sgNIrWxhWlrys52OkEA==}
     engines: {node: '>=12', npm: '>=6'}
@@ -11683,10 +11865,6 @@ packages:
     engines: {node: '>= 0.4'}
     hasBin: true
 
-  resolve@2.0.0-next.5:
-    resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
-    hasBin: true
-
   responselike@2.0.1:
     resolution: {integrity: sha512-4gl03wn3hj1HP3yzgdI7d3lCkF95F21Pz4BPGvKHinyQzALR5CapwC8yIi0Rh58DEMQ/SguC03wFj2k0M/mHhw==}
 
@@ -11694,18 +11872,10 @@ packages:
     resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
     engines: {node: '>=8'}
 
-  restore-cursor@5.1.0:
-    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
-    engines: {node: '>=18'}
-
   retry@0.12.0:
     resolution: {integrity: sha512-9LkiTwjUh6rT555DtE9rTX+BKByPfrMzEAtnlEtdEwr3Nkffwiihqe2bWADg+OQRjt9gl6ICdmB/ZFDCGAtSow==}
     engines: {node: '>= 4'}
 
-  retry@0.13.1:
-    resolution: {integrity: sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==}
-    engines: {node: '>= 4'}
-
   reusify@1.1.0:
     resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
@@ -11742,8 +11912,8 @@ packages:
   robust-predicates@3.0.3:
     resolution: {integrity: sha512-NS3levdsRIUOmiJ8FZWCP7LG3QpJyrs/TE0Zpf1yvZu8cAJJ6QMW92H1c7kWpdIHo8RvmLxN/o2JXTKHp74lUA==}
 
-  rolldown@1.0.0-rc.17:
-    resolution: {integrity: sha512-ZrT53oAKrtA4+YtBWPQbtPOxIbVDbxT0orcYERKd63VJTF13zPcgXTvD4843L8pcsI7M6MErt8QtON6lrB9tyA==}
+  rolldown@1.2.2:
+    resolution: {integrity: sha512-opwpo1tQBAcpSUJDt94B7hhLNGOKjCdE//XXjeLrnx9b83bjnw45tXdg1b09yEw/VLFBJGZpwRULMmOZo7ol+A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
@@ -11767,6 +11937,10 @@ packages:
   rrweb-cssom@0.8.0:
     resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
 
+  run-applescript@7.0.0:
+    resolution: {integrity: sha512-9by4Ij99JUr/MCFBUkDKLWK3G9HVXmabKz9U5MlIAIuvuzkiOicRYs8XJLxX+xahD+mLiiCYDqF9dKAgtzKP1A==}
+    engines: {node: '>=18'}
+
   run-applescript@7.1.0:
     resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
     engines: {node: '>=18'}
@@ -11780,20 +11954,12 @@ packages:
   rxjs@7.8.2:
     resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
 
-  safe-array-concat@1.1.3:
-    resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
-    engines: {node: '>=0.4'}
-
   safe-buffer@5.1.2:
     resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
 
   safe-buffer@5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
 
-  safe-push-apply@1.0.0:
-    resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
-    engines: {node: '>= 0.4'}
-
   safe-regex-test@1.1.0:
     resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
     engines: {node: '>= 0.4'}
@@ -11804,8 +11970,9 @@ packages:
   sanitize-filename@1.6.4:
     resolution: {integrity: sha512-9ZyI08PsvdQl2r/bBIGubpVdR3RR9sY6RDiWFPreA21C/EFlQhmgo20UZlNjZMMZNubusLhAQozkA0Od5J21Eg==}
 
-  sanitize-html@2.17.3:
-    resolution: {integrity: sha512-Kn4srCAo2+wZyvCNKCSyB2g8RQ8IkX/gQs2uqoSRNu5t9I2qvUyAVvRDiFUVAiX3N3PNuwStY0eNr+ooBHVWEg==}
+  sanitize-html@2.17.6:
+    resolution: {integrity: sha512-M4bo9tfv1yfhQZZKkc6dL07ALrGJtfvNOuhX3hU9AVPR/uPQ+nKOJBqTYc7LfMQblTW04mtSWDJWEyLvygJsLA==}
+    engines: {node: '>=22.12.0'}
 
   sax@1.6.0:
     resolution: {integrity: sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA==}
@@ -11836,13 +12003,13 @@ packages:
   seedrandom@3.0.5:
     resolution: {integrity: sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==}
 
-  select-hose@2.0.0:
-    resolution: {integrity: sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==}
-
   selfsigned@5.5.0:
     resolution: {integrity: sha512-ftnu3TW4+3eBfLRFnDEkzGxSF/10BJBkaLJuBHZX0kiPS7bRdlpZGu6YGt4KngMkdTwJE6MbjavFpqHvqVt+Ew==}
     engines: {node: '>=18'}
 
+  semifies@1.0.0:
+    resolution: {integrity: sha512-xXR3KGeoxTNWPD4aBvL5NUpMTT7WMANr3EWnaS190QVkY52lqqcVRD7Q05UVbBhiWDGWMlJEUam9m7uFFGVScw==}
+
   semver-compare@1.0.0:
     resolution: {integrity: sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==}
 
@@ -11859,9 +12026,15 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  send@0.19.2:
-    resolution: {integrity: sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==}
-    engines: {node: '>= 0.8.0'}
+  semver@7.8.4:
+    resolution: {integrity: sha512-rUCObTnP32Q08R2uuIrt7r9PlEonuTmtuXYcW6s5kjdlj3xbnwe+21yXptAUYcMAABLkYYTtnmzb3w3EDZfueA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  semver@7.8.5:
+    resolution: {integrity: sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==}
+    engines: {node: '>=10'}
+    hasBin: true
 
   send@1.2.1:
     resolution: {integrity: sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==}
@@ -11879,10 +12052,6 @@ packages:
     resolution: {integrity: sha512-KDj11HScOaLmrPxl70KYNW1PksP4Nb/CLL2yvC+Qd2kHMPEEpfc4Re2e4FOay+bC/+XQl/7zAcWON3JVo5v3KQ==}
     engines: {node: '>= 0.8.0'}
 
-  serve-static@1.16.3:
-    resolution: {integrity: sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==}
-    engines: {node: '>= 0.8.0'}
-
   serve-static@2.2.1:
     resolution: {integrity: sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==}
     engines: {node: '>= 18'}
@@ -11894,14 +12063,6 @@ packages:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
 
-  set-function-name@2.0.2:
-    resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
-    engines: {node: '>= 0.4'}
-
-  set-proto@1.0.0:
-    resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
-    engines: {node: '>= 0.4'}
-
   setimmediate@1.0.5:
     resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
 
@@ -11925,15 +12086,15 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
-  shell-quote@1.8.3:
-    resolution: {integrity: sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==}
+  shell-quote@1.9.0:
+    resolution: {integrity: sha512-Iov+JwFv/2HcTpcwNMKd8+IWNb8tboQJNQTkAY/LLVK7gGH9jy+LGkVqPxfekHl+yMmiqXszdGWXgkfml7hjqA==}
     engines: {node: '>= 0.4'}
 
   shiki@2.5.0:
     resolution: {integrity: sha512-mI//trrsaiCIPsja5CNfsyNOqgAZUb6VpJA+340toL42UpzQlXpwRV9nch69X6gaUxrr9kaOOa6e3y3uAkGFxQ==}
 
-  side-channel-list@1.0.0:
-    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
+  side-channel-list@1.0.1:
+    resolution: {integrity: sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==}
     engines: {node: '>= 0.4'}
 
   side-channel-map@1.0.1:
@@ -11944,8 +12105,8 @@ packages:
     resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
     engines: {node: '>= 0.4'}
 
-  side-channel@1.1.0:
-    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+  side-channel@1.1.1:
+    resolution: {integrity: sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==}
     engines: {node: '>= 0.4'}
 
   siginfo@2.0.0:
@@ -11958,9 +12119,9 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
-  sigstore@4.1.0:
-    resolution: {integrity: sha512-/fUgUhYghuLzVT/gaJoeVehLCgZiUxPCPMcyVNY0lIf/cTCz58K/WTI7PefDarXxp9nUKpEwg1yyz3eSBMTtgA==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  sigstore@5.0.0:
+    resolution: {integrity: sha512-hJqJfoG/e4qFQaauQL00c6J6FrHLBGKtkFvW3JbTSIEFOhLrSjdSM/gWd/yUOfYo/gsERehTXGC1VZWX+9X4Dg==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
 
   simple-update-notifier@2.0.0:
     resolution: {integrity: sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==}
@@ -11978,22 +12139,10 @@ packages:
     resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
     engines: {node: '>=14.16'}
 
-  slice-ansi@3.0.0:
-    resolution: {integrity: sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==}
-    engines: {node: '>=8'}
-
   slice-ansi@4.0.0:
     resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==}
     engines: {node: '>=10'}
 
-  slice-ansi@7.1.2:
-    resolution: {integrity: sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==}
-    engines: {node: '>=18'}
-
-  slice-ansi@8.0.0:
-    resolution: {integrity: sha512-stxByr12oeeOyY2BlviTNQlYV5xOj47GirPr4yA1hE9JCtxfQN0+tVbkxwCtYDQWhEKWFHsEK48ORg5jrouCAg==}
-    engines: {node: '>=20'}
-
   smart-buffer@4.2.0:
     resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
     engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
@@ -12002,11 +12151,16 @@ packages:
     resolution: {integrity: sha512-dWUG8F5sIIARXih1DTaQAX4SsiTXhInKf1buxdY9DIg4ZYPZK5nGM1VRIYmEbDbsHt7USo99xSLFu5Q1IqTmsg==}
     engines: {node: '>= 18'}
 
+  smol-toml@1.7.1:
+    resolution: {integrity: sha512-PPlsspAZ4jbMBu5DMFhfUGDQLu/vrL4SyBROVS37x8ynnVmFIs1VPBz1Co8Xks3TvpIaZXmU85y4DrQ+UyVFoQ==}
+    engines: {node: '>= 18'}
+
   snake-case@3.0.4:
     resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==}
 
-  sockjs@0.3.24:
-    resolution: {integrity: sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==}
+  socks-proxy-agent@10.1.0:
+    resolution: {integrity: sha512-WlMj/67cEJ6MDI1OcsnjuYKDNDoyPCCYZ249kuuXPiMDw9F8PXkVaQ7YWu3siTydfQ/4BEZcvGzu+aYvz7dDCQ==}
+    engines: {node: '>= 20'}
 
   socks-proxy-agent@8.0.5:
     resolution: {integrity: sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==}
@@ -12042,28 +12196,15 @@ packages:
   space-separated-tokens@2.0.2:
     resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
 
-  spdx-correct@3.2.0:
-    resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
-
   spdx-exceptions@2.5.0:
     resolution: {integrity: sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==}
 
-  spdx-expression-parse@3.0.1:
-    resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
-
   spdx-expression-parse@4.0.0:
     resolution: {integrity: sha512-Clya5JIij/7C6bRR22+tnGXbc4VKlibKSVj2iHvVeX5iMW7s1SIQlqu699JkODJJIhh/pUu8L0/VLh8xflD+LQ==}
 
   spdx-license-ids@3.0.22:
     resolution: {integrity: sha512-4PRT4nh1EImPbt2jASOKHX7PB7I+e4IWNLvkKFDxNhJlfjbYlleYQh285Z/3mPTHSAK/AvdMmw5BNNuYH8ShgQ==}
 
-  spdy-transport@3.0.0:
-    resolution: {integrity: sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==}
-
-  spdy@4.0.2:
-    resolution: {integrity: sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==}
-    engines: {node: '>=6.0.0'}
-
   speakingurl@14.0.1:
     resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
     engines: {node: '>=0.10.0'}
@@ -12087,14 +12228,14 @@ packages:
   ssim.js@3.5.0:
     resolution: {integrity: sha512-Aj6Jl2z6oDmgYFFbQqK7fght19bXdOxY7Tj03nF+03M9gCBAjeIiO8/PlEGMfKDwYpw4q6iBqVq2YuREorGg/g==}
 
-  ssri@12.0.0:
-    resolution: {integrity: sha512-S7iGNosepx9RadX82oimUkvr0Ct7IjJbEbs4mJcTxst8um95J3sDYU1RBEOvdu6oL1Wek2ODI5i4MAw+dZ6cAQ==}
-    engines: {node: ^18.17.0 || >=20.5.0}
-
   ssri@13.0.1:
     resolution: {integrity: sha512-QUiRf1+u9wPTL/76GTYlKttDEBWV1ga9ZXW8BG6kfdeyyM8LGPix9gROyg9V2+P0xNyF3X2Go526xKFdMZrHSQ==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
+  ssri@14.0.0:
+    resolution: {integrity: sha512-jQxKI0yx0ZnTKrqjKkLDV2DXkBQn3k49JVmVqDGcDwKDtGDbImD/GXsq04KD0VVzCQQ9wZJYal3RwR1GzWTSow==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
+
   stack-utils@2.0.6:
     resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
     engines: {node: '>=10'}
@@ -12120,25 +12261,24 @@ packages:
   std-env@4.1.0:
     resolution: {integrity: sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==}
 
-  stop-iteration-iterator@1.1.0:
-    resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
-    engines: {node: '>= 0.4'}
-
-  storybook-addon-vis@4.2.2:
-    resolution: {integrity: sha512-ipe1ws+0PXmCZBJ7JgZEOTpNkpevHRs8a/dwXv+fS4Cd3bu+6xyPgV4F2kvdRhUGsatLu1aJbgI0jdH8/aY+jA==}
+  storybook-addon-vis@4.2.3:
+    resolution: {integrity: sha512-G3uZf9f1uNUWXrreuR6szz/Bs0X8PLh0Hz/VrBdhxjTIBrraAi7u1hY/2+BQtCP86lUlHPSKpYxB/Por0MLBXA==}
     peerDependencies:
       '@storybook/addon-vitest': ^10.1.10
       '@vitest/browser': ^4
       storybook: ^10.1.10
       vitest: ^4
 
-  storybook@10.3.6:
-    resolution: {integrity: sha512-vbSz7g/1rGMC1uAULqMZjALkIuLu2QABqfhRYhyr/11kzyesi+vAmwyJLukZP1FfecxGOgMwOh6GS0YsGpHAvQ==}
+  storybook@10.5.5:
+    resolution: {integrity: sha512-UscBIBJDloUeqntukHOhP1a5W/vouePDJbzPSxj466WK801FZtzQiMffMtkjzJiWSuj20wfaYlB2QQKh9aOYAg==}
     hasBin: true
     peerDependencies:
+      '@types/react': ^19.2.10
       prettier: ^2 || ^3
-      vite-plus: ^0.1.15
+      vite-plus: ^0.1.15 || ^0.2.0
     peerDependenciesMeta:
+      '@types/react':
+        optional: true
       prettier:
         optional: true
       vite-plus:
@@ -12150,8 +12290,8 @@ packages:
   stream-http@3.2.0:
     resolution: {integrity: sha512-Oq1bLqisTyK3TSCXpPbT4sdeYNdmyZJv1LxpEm2vu1ZhK89kSE5YXwZc3cWk0MagGaKriBh9mCFbVGtO+vY29A==}
 
-  streamx@2.25.0:
-    resolution: {integrity: sha512-0nQuG6jf1w+wddNEEXCF4nTg3LtufWINB5eFEN+5TNZW7KWJp6x87+JFL43vaAUPyCfH1wID+mNVyW6OHtFamg==}
+  streamx@2.28.0:
+    resolution: {integrity: sha512-1Yowhzjf0ivGMrTIkY9hav5TxobO9qIVqUE41fiCGMGgc3CLlf4MY+9AHmZqBWgDTue0fY9zWjYFVyf6Diuobw==}
 
   string-argv@0.3.2:
     resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
@@ -12169,37 +12309,10 @@ packages:
     resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
     engines: {node: '>=12'}
 
-  string-width@7.2.0:
-    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
-    engines: {node: '>=18'}
-
-  string-width@8.2.1:
-    resolution: {integrity: sha512-IIaP0g3iy9Cyy18w3M9YcaDudujEAVHKt3a3QJg1+sr/oX96TbaGUubG0hJyCjCBThFH+tFpcIyoUHUn1ogaLA==}
+  string-width@8.2.2:
+    resolution: {integrity: sha512-GaPUh5gfdrYzqeVNZvUfT23vYYxXzKYidUcnMtJg/3rxRV63EFZy3k6xfKlmfeJD0176lnUV/Usr3XcwSvFzpg==}
     engines: {node: '>=20'}
 
-  string.prototype.includes@2.0.1:
-    resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
-    engines: {node: '>= 0.4'}
-
-  string.prototype.matchall@4.0.12:
-    resolution: {integrity: sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==}
-    engines: {node: '>= 0.4'}
-
-  string.prototype.repeat@1.0.0:
-    resolution: {integrity: sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==}
-
-  string.prototype.trim@1.2.10:
-    resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
-    engines: {node: '>= 0.4'}
-
-  string.prototype.trimend@1.0.9:
-    resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
-    engines: {node: '>= 0.4'}
-
-  string.prototype.trimstart@1.0.8:
-    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
-    engines: {node: '>= 0.4'}
-
   string_decoder@1.1.1:
     resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
 
@@ -12251,11 +12364,27 @@ packages:
   stubborn-utils@1.0.2:
     resolution: {integrity: sha512-zOh9jPYI+xrNOyisSelgym4tolKTJCQd5GBhK0+0xJvcYDcwlOoxF/rnFKQ2KRZknXSG9jWAp66fwP6AxN9STg==}
 
-  style-to-js@1.1.21:
-    resolution: {integrity: sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==}
+  style-to-js@2.0.2:
+    resolution: {integrity: sha512-ctgbFvvi406Jvhi/s6TJtX6XYYCCTg6POgsL+SLmrl2RHFgwulepqtYPrtKuEmT8kmyk/+fxfNzuhRLO4zsASg==}
 
-  style-to-object@1.0.14:
-    resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==}
+  style-to-object@2.0.2:
+    resolution: {integrity: sha512-QmbXPUylqU80HAgTOJeEOdbA40W9KtxmjMhQy+tq+b8F2aoh3aQLuy82hh2jm2qsC9hR9eI0+eQidTMydKcqRA==}
+
+  styled-components@6.4.4:
+    resolution: {integrity: sha512-tJk5CmKUPMDoTsZQ8m0hHInBk9HFKUPSusqmbBuefDX+yUbMBWea2Ob/wdXFyHW8XZqXkprJscysAdKeGWNqlA==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      css-to-react-native: '>= 3.2.0'
+      react: '>= 16.8.0'
+      react-dom: '>= 16.8.0'
+      react-native: '>= 0.68.0'
+    peerDependenciesMeta:
+      css-to-react-native:
+        optional: true
+      react-dom:
+        optional: true
+      react-native:
+        optional: true
 
   stylehacks@7.0.7:
     resolution: {integrity: sha512-bJkD0JkEtbRrMFtwgpJyBbFIwfDDONQ1Ov3sDLZQP8HuJ73kBOyx66H4bOcAbVWmnfLdvQ0AJwXxOMkpujcO6g==}
@@ -12275,8 +12404,8 @@ packages:
     peerDependencies:
       stylelint: ^17.0.0
 
-  stylelint-scss@7.0.0:
-    resolution: {integrity: sha512-H88kCC+6Vtzj76NsC8rv6x/LW8slBzIbyeSjsKVlS+4qaEJoDrcJR4L+8JdrR2ORdTscrBzYWiiT2jq6leYR1Q==}
+  stylelint-scss@7.2.0:
+    resolution: {integrity: sha512-6E79Bachv0Iz0gqRUZgdqdXCsiq26DWBWIBNHYtjTmAp3wJu6cp/I37VfW7BPntmh2puF3bY09XWl4HZGrLhzw==}
     engines: {node: '>=20.19.0'}
     peerDependencies:
       stylelint: ^16.8.2 || ^17.0.0
@@ -12287,14 +12416,17 @@ packages:
     peerDependencies:
       stylelint: '>=16'
 
-  stylelint@17.11.0:
-    resolution: {integrity: sha512-/3czzmbF9XdGWvReDF3Ex4R23Ajolo7j8RB2bFNEqk6Ht356nlpVV+G5bG2Qt8AW1ofJzXztBRDnAtd7cgowWA==}
+  stylelint@17.14.1:
+    resolution: {integrity: sha512-xVQwyiuxALUBNB2fBe0tmNemg9KqLtdj3T64mioFDar79B2cU8LIyz+3KL6LdiHs9NkeNfwxpKSaIVOY8f112g==}
     engines: {node: '>=20.19.0'}
     hasBin: true
 
   stylis@4.3.6:
     resolution: {integrity: sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==}
 
+  stylis@4.4.0:
+    resolution: {integrity: sha512-5Z9ZpRzfuH6l/UAvCPAPUo3665Nk2wLaZU3x+TLHKVzIz33+sbJqbtrYoC3KD4/uVOr2Zp+L0LySezP9OHV9yA==}
+
   sugarss@5.0.1:
     resolution: {integrity: sha512-ctS5RYCBVvPoZAnzIaX5QSShK8ZiZxD5HUqSxlusvEMC+QZQIPCPOIJg6aceFX+K2rf4+SH89eu++h1Zmsr2nw==}
     engines: {node: '>=18.0'}
@@ -12328,8 +12460,8 @@ packages:
     resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
     engines: {node: '>=10'}
 
-  supports-hyperlinks@4.4.0:
-    resolution: {integrity: sha512-UKbpT93hN5Nr9go5UY7bopIB9YQlMz9nm/ct4IXt/irb5YRkn9WaqrOBJGZ5Pwvsd5FQzSVeYlGdXoCAPQZrPg==}
+  supports-hyperlinks@4.5.0:
+    resolution: {integrity: sha512-ZW2OvfeCXrNTbLakPUzjQG922EeGCOteFSVoek5DKStTh898wf7zgtuFlzQN8HfZCxC3Eh02yJVrRW51hADf+w==}
     engines: {node: '>=20'}
 
   supports-preserve-symlinks-flag@1.0.0:
@@ -12342,13 +12474,13 @@ packages:
   svg-tags@1.0.0:
     resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
 
-  svgo@3.3.3:
-    resolution: {integrity: sha512-+wn7I4p7YgJhHs38k2TNjy1vCfPIfLIJWR5MnCStsN8WuuTcBnRKcMHQLMM2ijxGZmDoZwNv8ipl5aTTen62ng==}
+  svgo@3.3.4:
+    resolution: {integrity: sha512-GsNRis4e8jxn2Y9ENz/8lbJ93CstG8svtMnuRaHbiF2LTJ5tK0/q3t/URPq9Zc7zVWBJnNnJMIp6bevK7bSmNg==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
-  svgo@4.0.1:
-    resolution: {integrity: sha512-XDpWUOPC6FEibaLzjfe0ucaV0YrOjYotGJO1WpF0Zd+n6ZGEQUsSugaoLq9QkEZtAfQIxT42UChcssDVPP3+/w==}
+  svgo@4.0.2:
+    resolution: {integrity: sha512-ekx94z1rRc5LDi6oSUaeRnYhd0UOJxdtQCL2rF8xpWxD3TPAsISWOrxezqGovqS38GRZOdpDfvQe3ts6F7nsng==}
     engines: {node: '>=16'}
     hasBin: true
 
@@ -12370,15 +12502,15 @@ packages:
     resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
     engines: {node: '>=20'}
 
-  tapable@2.3.2:
-    resolution: {integrity: sha512-1MOpMXuhGzGL5TTCZFItxCc0AARf1EZFQkGqMm7ERKj8+Hgr5oLvJOVFcC+lRmR8hCe2S3jC4T5D7Vg/d7/fhA==}
+  tapable@2.3.3:
+    resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
     engines: {node: '>=6'}
 
-  tar-fs@2.1.4:
-    resolution: {integrity: sha512-mDAjwmZdh7LTT6pNleZ05Yt65HC3E+NiQzl672vQG38jIrehtJk/J3mNwIg+vShQPcLF/LV7CMnDW6vjj6sfYQ==}
+  tar-fs@2.1.5:
+    resolution: {integrity: sha512-OboTd8mmMhZDNPV+UjQcK9yKAatXu2aJ+r1w4im1Otd4M4fl2hwvdoXUxIYHFTHWK/3y3FarBP70v3vwmGlOxw==}
 
-  tar-fs@3.1.2:
-    resolution: {integrity: sha512-QGxxTxxyleAdyM3kpFs14ymbYmNFrfY+pHj7Z8FgtbZ7w2//VAgLMac7sT6nRpIHjppXO2AwwEOg0bPFVRcmXw==}
+  tar-fs@3.1.3:
+    resolution: {integrity: sha512-/hU4AXnIdZu+Gvl1pk0oI5f5HxWsCJRtY2aFaJdk9VvyL48DWU6iU5WAIPG+wIi1YvWA6eTJvIviP/tMAZZNwQ==}
 
   tar-js@0.3.0:
     resolution: {integrity: sha512-9uqP2hJUZNKRkwPDe5nXxXdzo6w+BFBPq9x/tyi5/U/DneuSesO/HMb0y5TeWpfcv49YDJTs7SrrZeeu8ZHWDA==}
@@ -12387,11 +12519,11 @@ packages:
     resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
     engines: {node: '>=6'}
 
-  tar-stream@3.1.8:
-    resolution: {integrity: sha512-U6QpVRyCGHva435KoNWy9PRoi2IFYCgtEhq9nmrPPpbRacPs9IH4aJ3gbrFC8dPcXvdSZ4XXfXT5Fshbp2MtlQ==}
+  tar-stream@3.2.0:
+    resolution: {integrity: sha512-ojzvCvVaNp6aOTFmG7jaRD0meowIAuPc3cMMhSgKiVWws1GyHbGd/xvnyuRKcKlMpt3qvxx6r0hreCNITP9hIg==}
 
-  tar@7.5.13:
-    resolution: {integrity: sha512-tOG/7GyXpFevhXVh8jOPJrmtRpOTsYqUIkVdVooZYJS/z8WhfQUX8RJILmeuJNinGAMSu1veBr4asSHFt5/hng==}
+  tar@7.5.22:
+    resolution: {integrity: sha512-MFO/QzvtAOmJbkhOaCTvbGcFN9L9b+JunIsDwaKljSOdcLMea3NJ1k9Usz/rjdfSXTq4dfzfeS7W4p4YOAAHeA==}
     engines: {node: '>=18'}
 
   teex@1.0.1:
@@ -12404,30 +12536,60 @@ packages:
     resolution: {integrity: sha512-yYrrsWnrXMcdsnu/7YMYAofM1ktpL5By7vZhf15CrXijWWrEYZks5AXBudalfSWJLlnen/QUJUB5aoB0kqZUGA==}
     engines: {node: '>=6.0.0'}
 
-  temporal-polyfill@0.3.2:
-    resolution: {integrity: sha512-TzHthD/heRK947GNiSu3Y5gSPpeUDH34+LESnfsq8bqpFhsB79HFBX8+Z834IVX68P3EUyRPZK5bL/1fh437Eg==}
+  temporal-polyfill@1.0.1:
+    resolution: {integrity: sha512-N2SoI9olnW7BUsU8RosDphZQl9s+WJ8O7PoJMFCr/e5/1rFkVI4GNOWaSeySG+UoP04foPYsnLWbJmbXOiShZg==}
 
-  temporal-spec@0.3.1:
-    resolution: {integrity: sha512-B4TUhezh9knfSIMwt7RVggApDRJZo73uZdj8AacL2mZ8RP5KtLianh2MXxL06GN9ESYiIsiuoLQhgVfwe55Yhw==}
+  temporal-spec@1.0.0:
+    resolution: {integrity: sha512-00Ahj1e1ifaERTMOIIGpOCdOo9IEk2m6GGSMedsn9a2SIsGLdOTbmME1Htv6IM82b6VHrzSUTIVc7YHy6hdhFQ==}
 
-  terser-webpack-plugin@5.5.0:
-    resolution: {integrity: sha512-UYhptBwhWvfIjKd/UuFo6D8uq9xpGLDK+z8EDsj/zWhrTaH34cKEbrkMKfV5YWqGBvAYA3tlzZbs2R+qYrbQJA==}
+  temporal-utils@1.0.1:
+    resolution: {integrity: sha512-HAixuesxFQIUaQk3ptX2jhfO/FsOkgVkDDMawvp6n/fkB1q6BKfs3lURw9I+pK/2e2e/q/vrLrxmeqauBoyGMQ==}
+
+  terser-webpack-plugin@5.6.1:
+    resolution: {integrity: sha512-201R5j+sJpK8nFWwKVyNfZot8FaJbLZDq5evriVzbV1wDtSXDjRUDRfJzHpAaxFDMEhsZL1QkeqM61wgsS3KaQ==}
     engines: {node: '>= 10.13.0'}
     peerDependencies:
+      '@minify-html/node': '*'
       '@swc/core': '*'
+      '@swc/css': '*'
+      '@swc/html': '*'
+      clean-css: '*'
+      cssnano: '*'
+      csso: '*'
       esbuild: '*'
+      html-minifier-terser: '*'
+      lightningcss: '*'
+      postcss: '*'
       uglify-js: '*'
       webpack: ^5.1.0
     peerDependenciesMeta:
+      '@minify-html/node':
+        optional: true
       '@swc/core':
         optional: true
+      '@swc/css':
+        optional: true
+      '@swc/html':
+        optional: true
+      clean-css:
+        optional: true
+      cssnano:
+        optional: true
+      csso:
+        optional: true
       esbuild:
         optional: true
+      html-minifier-terser:
+        optional: true
+      lightningcss:
+        optional: true
+      postcss:
+        optional: true
       uglify-js:
         optional: true
 
-  terser@5.47.1:
-    resolution: {integrity: sha512-tPbLXTI6ohPASb/1YViL428oEHu6/qv1OxqYnfaonVCFHqx4+wCd95pHrQWsL5X4pl90CTyW9piSAsS2L0VoMw==}
+  terser@5.49.0:
+    resolution: {integrity: sha512-SNiDnXyHSrxVcIOtVbULzcTmniUiwcV7Nwdyj1twVubeTmbjoa8p69KKDpfkdoOavuM4/GRm1+ykI8qqnavHoA==}
     engines: {node: '>=10'}
     hasBin: true
 
@@ -12438,8 +12600,8 @@ packages:
     resolution: {integrity: sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==}
     engines: {node: '>=8'}
 
-  testcontainers@11.14.0:
-    resolution: {integrity: sha512-r9pniwv/iwzyHaI7gwAvAm4Y+IvjJg3vBWdjrUCaDMc2AXIr4jKbq7jJO18Mw2ybs73pZy1Aj7p/4RVBGMRWjg==}
+  testcontainers@12.0.4:
+    resolution: {integrity: sha512-QIR/8xF1+F/26cIM+9B4yyxNTbKJxAv3hygZyhPRgZ8Q2AhlPZjDdpXRuk16V37X4bgJRI3hXFhoEICMBA7Adg==}
 
   text-decoder@1.2.7:
     resolution: {integrity: sha512-vlLytXkeP4xvEq2otHeJfSQIRyWxo/oZGEbXrtEEF9Hnmrdly59sUbzZ/QgyWuLYHctCHxFF4tRQZNQ9k60ExQ==}
@@ -12447,8 +12609,8 @@ packages:
   text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
 
-  thingies@2.5.0:
-    resolution: {integrity: sha512-s+2Bwztg6PhWUD7XMfeYm5qliDdSiZm7M7n8KjTkIsm3l/2lgVRc2/Gx/v+ZX8lT4FMA+i8aQvhcWylldc+ZNw==}
+  thingies@2.6.0:
+    resolution: {integrity: sha512-rMHRjmlFLM1R96UYPvpmnc3LYtdFrT33JIB7L9hetGue1qAPfn1N2LJeEjxUSidu1Iku+haLZXDuEXUHNGO/lg==}
     engines: {node: '>=10.18'}
     peerDependencies:
       tslib: ^2
@@ -12473,18 +12635,18 @@ packages:
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
-  tinyexec@1.1.1:
-    resolution: {integrity: sha512-VKS/ZaQhhkKFMANmAOhhXVoIfBXblQxGX1myCQ2faQrfmobMftXeJPcZGp0gS07ocvGJWDLZGyOZDadDBqYIJg==}
+  tinyexec@1.2.4:
+    resolution: {integrity: sha512-SHf/r48b7vOrjve9PxJo3MN5v5yuyjHvdUcrQffT3WXMUfnGmHDVbC4k3sHJaJTgZCwpUplIaAo5ANtMyp3YHg==}
     engines: {node: '>=18'}
 
-  tinyexec@1.1.2:
-    resolution: {integrity: sha512-dAqSqE/RabpBKI8+h26GfLq6Vb3JVXs30XYQjdMjaj/c2tS8IYYMbIzP599KtRj7c57/wYApb3QjgRgXmrCukA==}
-    engines: {node: '>=18'}
-
-  tinyglobby@0.2.16:
-    resolution: {integrity: sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==}
+  tinyglobby@0.2.17:
+    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
     engines: {node: '>=12.0.0'}
 
+  tinypool@2.1.0:
+    resolution: {integrity: sha512-Pugqs6M0m7Lv1I7FtxN4aoyToKg1C4tu+/381vH35y8oENM/Ai7f7C4StcoK4/+BSw9ebcS8jRiVrORFKCALLw==}
+    engines: {node: ^20.0.0 || >=22.0.0}
+
   tinyqueue@3.0.0:
     resolution: {integrity: sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==}
 
@@ -12510,12 +12672,8 @@ packages:
   tmp-promise@3.0.3:
     resolution: {integrity: sha512-RwM7MoPojPxsOBYnyd2hy0bxtIlVrihNs9pj5SUvY8Zz1sQcQG2tG1hSr8PDxfgEB8RNKDhqbIlroIarSNDNsQ==}
 
-  tmp@0.2.4:
-    resolution: {integrity: sha512-UdiSoX6ypifLmrfQ/XfiawN6hkjSBpCjhKxxZcWlUUmoXLaCKQU0bx4HF/tdDK2uzRuchf1txGvrWBzYREssoQ==}
-    engines: {node: '>=14.14'}
-
-  tmp@0.2.5:
-    resolution: {integrity: sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==}
+  tmp@0.2.7:
+    resolution: {integrity: sha512-e0votIpp4Uo2AJYSzVHV6xCcawuiez3DzqDAbrTc3YxBkplN6e+dM13ZeIcZnDg/QpSuU2zfZ3rzwY8ukEnaXw==}
     engines: {node: '>=14.14'}
 
   tmpl@1.0.5:
@@ -12554,10 +12712,6 @@ packages:
     peerDependencies:
       tslib: '2'
 
-  tree-kill@1.2.2:
-    resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
-    hasBin: true
-
   trim-lines@3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
 
@@ -12570,18 +12724,10 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4'
 
-  ts-declaration-location@1.0.7:
-    resolution: {integrity: sha512-EDyGAwH1gO0Ausm9gV6T2nUvBgXT5kGoCMJPllOaooZ+4VvJiKBdZE7wK18N1deEowhcUptS+5GXZK8U/fvpwA==}
-    peerDependencies:
-      typescript: '>=4.0.0'
-
-  ts-dedent@2.2.0:
-    resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
+  ts-dedent@2.3.0:
+    resolution: {integrity: sha512-JfJeIHke7y2egdGGgRAvpCwYFUsHlM2gPcrVOxFkznt/4uzQ7HFmvE63iFHVLBJNDuyDOQgijDK/tXH/f6Msjg==}
     engines: {node: '>=6.10'}
 
-  tsconfig-paths@3.15.0:
-    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
-
   tsconfig-paths@4.2.0:
     resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
     engines: {node: '>=6'}
@@ -12592,11 +12738,6 @@ packages:
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
-  tsx@4.21.0:
-    resolution: {integrity: sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==}
-    engines: {node: '>=18.0.0'}
-    hasBin: true
-
   tsyringe@4.10.0:
     resolution: {integrity: sha512-axr3IdNuVIxnaK5XGEUFTu3YmAQ6lllgrvqfEoR16g/HGnYY/6We4oWENtAnzK6/LpJ2ur9PAb80RBt7/U4ugw==}
     engines: {node: '>= 6.0.0'}
@@ -12604,9 +12745,9 @@ packages:
   tty-browserify@0.0.1:
     resolution: {integrity: sha512-C3TaO7K81YvjCgQH9Q1S3R3P3BtN3RIM8n+OvX4il1K1zgE8ZhI0op7kClgkxtutIE8hQrcrHBXvIheqKUUCxw==}
 
-  tuf-js@4.1.0:
-    resolution: {integrity: sha512-50QV99kCKH5P/Vs4E2Gzp7BopNV+KzTXqWeaxrfu5IQJBOULRsTIS9seSsOVT8ZnGXzCyx55nYWAi4qJzpZKEQ==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  tuf-js@6.0.0:
+    resolution: {integrity: sha512-zlJVOIO68hmgo1//X4ENEcTGfuOTAtDPi8PsTsG+FyxD85E/ww1ZnwBbWo/yCEExGpI+Kilg7Z3qCdHX2BoJTQ==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
 
   tunnel@0.0.6:
     resolution: {integrity: sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==}
@@ -12635,25 +12776,13 @@ packages:
     resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
     engines: {node: '>=10'}
 
-  type-fest@0.6.0:
-    resolution: {integrity: sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==}
-    engines: {node: '>=8'}
-
-  type-fest@0.8.1:
-    resolution: {integrity: sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==}
-    engines: {node: '>=8'}
-
   type-fest@5.5.0:
     resolution: {integrity: sha512-PlBfpQwiUvGViBNX84Yxwjsdhd1TUlXr6zjX7eoirtCPIr08NAmxwa+fcYBTeRQxHo9YC9wwF3m9i700sHma8g==}
     engines: {node: '>=20'}
 
-  type-is@1.6.18:
-    resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
-    engines: {node: '>= 0.6'}
-
-  type-is@2.0.1:
-    resolution: {integrity: sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==}
-    engines: {node: '>= 0.6'}
+  type-is@2.1.0:
+    resolution: {integrity: sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA==}
+    engines: {node: '>= 18'}
 
   type-plus@8.0.0-beta.8:
     resolution: {integrity: sha512-egrpXQq2tV0abCf99+n4SCD/stT76qEwPBI1q7BqiVUe5pHWc+bm4vsOiNR84SmZTv4SoEl9UOZUdkEbS3POdw==}
@@ -12664,46 +12793,34 @@ packages:
     resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
     engines: {node: '>= 0.4'}
 
-  typed-array-byte-length@1.0.3:
-    resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
-    engines: {node: '>= 0.4'}
-
-  typed-array-byte-offset@1.0.4:
-    resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
-    engines: {node: '>= 0.4'}
-
-  typed-array-length@1.0.7:
-    resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
-    engines: {node: '>= 0.4'}
-
-  typedoc-plugin-markdown@4.11.0:
-    resolution: {integrity: sha512-2iunh2ALyfyh204OF7h2u0kuQ84xB3jFZtFyUr01nThJkLvR8oGGSSDlyt2gyO4kXhvUxDcVbO0y43+qX+wFbw==}
+  typedoc-plugin-markdown@4.12.0:
+    resolution: {integrity: sha512-eJDEMAfxCmede22c/Jw7d0FA13ggAQv+KkwQYKYCdqI02cin6Rc9QRwbG/7XvvHWinuFejySnZVUWDtvGk3Vbg==}
     engines: {node: '>= 18'}
     peerDependencies:
       typedoc: 0.28.x
 
-  typedoc-plugin-missing-exports@4.1.3:
-    resolution: {integrity: sha512-tgrlnwzXbqMP2/3BaZk0atddPsD7UnpCoeQ0cUCtk624gODT1bLYOLBEJLXQyVmbnP8HZCMhHpRiR+rxSdZqhg==}
+  typedoc-plugin-missing-exports@4.1.4:
+    resolution: {integrity: sha512-tIay6z6MRb/4+mfWgKNPR6qEM5rz9S8rTiz0JWmSb/66A6AlZIl9q+1lAFygj4n8GHH1fsqKYQNt9JbNcuE0Uw==}
     peerDependencies:
       typedoc: ^0.28.1
 
-  typedoc@0.28.19:
-    resolution: {integrity: sha512-wKh+lhdmMFivMlc6vRRcMGXeGEHGU2g8a2CkPTJjJlwRf1iXbimWIPcFolCqe4E0d/FRtGszpIrsp3WLpDB8Pw==}
+  typedoc@0.28.20:
+    resolution: {integrity: sha512-uSKqkh8Cr48vllnEy+jdaAgOeR6Y+QCBW7usgUsKj7gJEfR7stw9U/fE49LBnj2tPRKPY0c0EBJSWe9Appmplg==}
     engines: {node: '>= 18', pnpm: '>= 10'}
     hasBin: true
     peerDependencies:
       typescript: 5.0.x || 5.1.x || 5.2.x || 5.3.x || 5.4.x || 5.5.x || 5.6.x || 5.7.x || 5.8.x || 5.9.x || 6.0.x
 
-  typescript@5.9.3:
-    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
-    engines: {node: '>=14.17'}
-    hasBin: true
-
   typescript@6.0.3:
     resolution: {integrity: sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==}
     engines: {node: '>=14.17'}
     hasBin: true
 
+  typescript@7.0.2:
+    resolution: {integrity: sha512-8FYau96o3NKOhbjKi/qNvG/W5jhzxkbdm5sj9AbZ/5T5sWqn3hJgLfGx27sRKZWTvyzCP8dLRBTf5tBTSRVUNA==}
+    engines: {node: '>=16.20.0'}
+    hasBin: true
+
   ua-parser-js@1.0.40:
     resolution: {integrity: sha512-z6PJ8Lml+v3ichVojCiB8toQJBuwR42ySM4ezjXIqXK3M0HczmKQ3LF4rhU55PfD99KEEXQG6yb7iOMyvYuHew==}
     hasBin: true
@@ -12723,28 +12840,28 @@ packages:
     resolution: {integrity: sha512-rvKSBiC5zqCCiDZ9kAOszZcDvdAHwwIKJG33Ykj43OKcWsnmcBRL09YTU4nOeHZ8Y2a7l1MgTd08SBe9A8Qj6A==}
     engines: {node: '>=18'}
 
-  unbash@3.0.0:
-    resolution: {integrity: sha512-FeFPZ/WFT0mbRCuydiZzpPFlrYN8ZUpphQKoq4EeElVIYjYyGzPMxQR/simUwCOJIyVhpFk4RbtyO7RuMpMnHA==}
+  unbash@4.0.4:
+    resolution: {integrity: sha512-60m9IVGbavD6jholbxt0jVBXZkEB/HsMZq7Tyaghseve2/Sf0zQRAIfWsD34sde+DKP2tBxJS2wP88ZM0D1FhA==}
     engines: {node: '>=14'}
 
-  unbox-primitive@1.1.0:
-    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
-    engines: {node: '>= 0.4'}
-
   underscore@1.13.8:
     resolution: {integrity: sha512-DXtD3ZtEQzc7M8m4cXotyHR+FAS18C64asBYY5vqZexfYryNNnDc02W4hKg3rdQuqOYas1jkseX0+nZXjTXnvQ==}
 
-  undici-types@5.26.5:
-    resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==}
+  undici-types@7.24.6:
+    resolution: {integrity: sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==}
 
-  undici@6.25.0:
-    resolution: {integrity: sha512-ZgpWDC5gmNiuY9CnLVXEH8rl50xhRCuLNA97fAUnKi8RRuV4E6KG31pDTsLVUKnohJE0I3XDrTeEydAXRw47xg==}
+  undici@6.28.0:
+    resolution: {integrity: sha512-LIY910g9TI13YS95lrMFrs8Rm/u/irgHeTWoKCoteeJ04CUJ92eEfj0rVn+7VKMPBpUPiUoBKfhNyLI23EE/KA==}
     engines: {node: '>=18.17'}
 
-  undici@7.25.0:
-    resolution: {integrity: sha512-xXnp4kTyor2Zq+J1FfPI6Eq3ew5h6Vl0F/8d9XU5zZQf1tX9s2Su1/3PiMmUANFULpmksxkClamIZcaUqryHsQ==}
+  undici@7.29.0:
+    resolution: {integrity: sha512-IDxfleLmmbSskfWSUATiN1nfn2rDuvnMOqb5CWR92iIfojA0Ud+ulOAAEQ57LPr9rWmsreUyf5lwyao+7GNNVw==}
     engines: {node: '>=20.18.1'}
 
+  undici@8.10.0:
+    resolution: {integrity: sha512-HvltHd7avK13QIw/oLe4qoOLyoVSoafqJ2jYOrtMRBkbYT31eiBQ8O0ehRKZiEZCMEyLFQNIADpgCWC5fALvYQ==}
+    engines: {node: '>=22.19.0'}
+
   unhomoglyph@1.0.6:
     resolution: {integrity: sha512-7uvcWI3hWshSADBu4JpnyYbTVc7YlhF5GDW/oPD5AxIxl34k4wXR3WDkPnzLxkN32LiTCTKMQLtKVZiwki3zGg==}
 
@@ -12768,14 +12885,6 @@ packages:
     resolution: {integrity: sha512-wH590V9VNgYH9g3lH9wWjTrUoKsjLF6sGLjhR4sH1LWpLmCOH0Zf7PukhDA8BiS7KHe4oPNkcTHqYkj7SOGUOw==}
     engines: {node: '>=20'}
 
-  unique-filename@4.0.0:
-    resolution: {integrity: sha512-XSnEewXmQ+veP7xX2dS5Q4yZAvO40cBN2MWkJ7D/6sW4Dg6wYBNwM1Vrnz1FhH5AdeLIlUXRI9e28z1YZi71NQ==}
-    engines: {node: ^18.17.0 || >=20.5.0}
-
-  unique-slug@5.0.0:
-    resolution: {integrity: sha512-9OdaqO5kwqR+1kVgHAhsp5vPNU0hnxRa26rBFNfNgM7M6pNtgzeBn3s/xbyCQL3dcjzOatcef6UUHpB/6MaETg==}
-    engines: {node: ^18.17.0 || >=20.5.0}
-
   unist-util-is@6.0.1:
     resolution: {integrity: sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==}
 
@@ -12810,8 +12919,8 @@ packages:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
 
-  unplugin-dts@1.0.0:
-    resolution: {integrity: sha512-qz+U1lCscwq+t8Mkaxy5Esa7IQ5wWV18b4mnioOXSdnPaNiJ0+qgE3I+KL6UkXYZWxxGo2qdGone8LEQ52Sfkw==}
+  unplugin-dts@1.0.1:
+    resolution: {integrity: sha512-EdJZxdWP4Tm/xhe58/zAge3Tu0OKDYygm8rucRrcCZ4XzgA31jexUKhaJuEMddOPBDs9ONnq6vwigbjeBqkfuw==}
     peerDependencies:
       '@microsoft/api-extractor': '>=7'
       '@rspack/core': ^1
@@ -12844,8 +12953,8 @@ packages:
     resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==}
     engines: {node: '>=18.12.0'}
 
-  unrs-resolver@1.11.1:
-    resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==}
+  unrs-resolver@1.12.2:
+    resolution: {integrity: sha512-dmlRxBJJayXjqTwC+JtF1HhJmgf3ftQ3YejFcZrf4+KKtJv0qDsK1pjqaaVjG7wJ5NJ6UVP1OqRMQ71Z4C3rxQ==}
 
   untildify@3.0.3:
     resolution: {integrity: sha512-iSk/J8efr8uPT/Z4eSUywnqyrQU7DSdMfdqK4iWEaUVVmcP5JcnpRqmVMwcwcnmI1ATFNgC5V90u09tBynNFKA==}
@@ -12854,6 +12963,9 @@ packages:
   unzip-crx-3@0.2.0:
     resolution: {integrity: sha512-0+JiUq/z7faJ6oifVB5nSwt589v1KCduqIJupNVDoWSXZtWDmjDGO3RAEOvwJ07w90aoXoP4enKsR7ecMrJtWQ==}
 
+  unzipper@0.12.3:
+    resolution: {integrity: sha512-PZ8hTS+AqcGxsaQntl3IRBw65QrBI6lxzqDEL7IAo/XCEqRTKGfOX56Vea5TH9SZczRVxuzk1re04z/YjuYCJA==}
+
   update-browserslist-db@1.2.3:
     resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
     hasBin: true
@@ -12909,38 +13021,17 @@ packages:
   utila@0.4.0:
     resolution: {integrity: sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==}
 
-  utils-merge@1.0.1:
-    resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
-    engines: {node: '>= 0.4.0'}
-
-  uuid@10.0.0:
-    resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==}
-    deprecated: uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).
-    hasBin: true
-
-  uuid@11.1.0:
-    resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
-    hasBin: true
-
-  uuid@14.0.0:
-    resolution: {integrity: sha512-Qo+uWgilfSmAhXCMav1uYFynlQO7fMFiMVZsQqZRMIXp0O7rR7qjkj+cPvBHLgBqi960QCoo/PH2/6ZtVqKvrg==}
-    hasBin: true
-
-  uuid@8.3.2:
-    resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
-    deprecated: uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).
+  uuid@14.0.1:
+    resolution: {integrity: sha512-6ZxzVpzDXDa3bJWaHilVayA+BH/1zmxCJoVgvmqJnid/gPoKHxUrS/aC/T6LGQtNHT+XHG9fXPJB4d+IrU30Ew==}
     hasBin: true
 
   v8-to-istanbul@9.3.0:
     resolution: {integrity: sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==}
     engines: {node: '>=10.12.0'}
 
-  validate-npm-package-license@3.0.4:
-    resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
-
-  validate-npm-package-name@7.0.2:
-    resolution: {integrity: sha512-hVDIBwsRruT73PbK7uP5ebUt+ezEtCmzZz3F59BSr2F6OVFnJ/6h8liuvdLrQ88Xmnk6/+xGGuq+pG9WwTuy3A==}
-    engines: {node: ^20.17.0 || >=22.9.0}
+  validate-npm-package-name@8.0.0:
+    resolution: {integrity: sha512-SCv6OOV6Xj2/3cXy3dGmADluJTNcL3o7hZAglNPTe+WYuEuvxgJzxPrSDLZhF+CwyQOubqgecjMmTJGMVLWjYQ==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
 
   vary@1.1.2:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
@@ -12952,37 +13043,43 @@ packages:
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
       react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
 
-  verror@1.10.1:
-    resolution: {integrity: sha512-veufcmxri4e3XSrT0xwfUR7kguIkaxBeosDg00yDWhk49wdwkSUrvvsm7nc75e1PUyvIeZj6nS8VQRYz2/S4Xg==}
-    engines: {node: '>=0.6.0'}
-
   vfile-message@4.0.3:
     resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
 
   vfile@6.0.3:
     resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
 
-  vite-plugin-node-polyfills@0.26.0:
-    resolution: {integrity: sha512-BAe5YzJf368XGev02hDvioidx4uVH8dqEJlG73bjQSxM26/AQnGcKFomq9n3vGq5yqpSHKN4h1XQNxx9l98mBg==}
+  vite-plugin-node-polyfills@0.28.0:
+    resolution: {integrity: sha512-NXct/ci2ef4fRyCfTb8fk2HmR80Rv7icLd+cRH41TnUugDzdKMFKqFPpZYCFUInZMMem9bkLv5pkq02+7Xu7+w==}
     peerDependencies:
       vite: ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  vite@5.4.21:
-    resolution: {integrity: sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==}
-    engines: {node: ^18.0.0 || >=20.0.0}
+  vite-plugin-svgr@5.2.0:
+    resolution: {integrity: sha512-qj2eAKF8C6PZWemVTvQA0xgQIcP1hHU6Buh7fl6BhvayWwnuxE+z417miKxeDvRWbDrupQ1oK99hfxElopJ3sQ==}
+    peerDependencies:
+      vite: '>=3.0.0'
+
+  vite@6.4.3:
+    resolution: {integrity: sha512-NTKlcQjlAK7MlQoyb6LgaqHc8sso/pVyUJYWMws3jg21uTJw/LddqIFPcPqP6PzpgbIcZyKI85sFE4HBrQDA8A==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
     peerDependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
+      jiti: '>=1.21.0'
       less: '*'
       lightningcss: ^1.21.0
       sass: '*'
       sass-embedded: '*'
       stylus: '*'
       sugarss: '*'
-      terser: ^5.4.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.8.4
     peerDependenciesMeta:
       '@types/node':
         optional: true
+      jiti:
+        optional: true
       less:
         optional: true
       lightningcss:
@@ -12997,14 +13094,18 @@ packages:
         optional: true
       terser:
         optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
 
-  vite@8.0.10:
-    resolution: {integrity: sha512-rZuUu9j6J5uotLDs+cAA4O5H4K1SfPliUlQwqa6YEwSrWDZzP4rhm00oJR5snMewjxF5V/K3D4kctsUTsIU9Mw==}
+  vite@8.2.0:
+    resolution: {integrity: sha512-pn+CFpM0lwDeKwmOq1ZaBK/9sjorZcgqxki6MbY/jPEVd9vichIlmlD4HmQ5wdP5EgqQCFRaACBxMC7uEGc6lQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
-      '@types/node': 18.19.130
-      '@vitejs/devtools': ^0.1.0
+      '@types/node': 25.9.3
+      '@vitejs/devtools': ^0.4.0
       esbuild: 0.27.4
       jiti: '>=1.21.0'
       less: ^4.0.0
@@ -13014,7 +13115,7 @@ packages:
       sugarss: ^5.0.0
       terser: ^5.16.0
       tsx: ^4.8.1
-      yaml: ^2.4.2
+      yaml: ^2.8.4
     peerDependenciesMeta:
       '@types/node':
         optional: true
@@ -13059,8 +13160,13 @@ packages:
       postcss:
         optional: true
 
-  vitest-plugin-vis@5.1.0:
-    resolution: {integrity: sha512-PItAJLSQOG050axiFx4oo75El08EQosvbBjsl6K5EXqwU7keW++f6cdN+CVHOPY8H/nCWl96WIWLVqY2M1vcqA==}
+  vitest-canvas-mock@1.1.4:
+    resolution: {integrity: sha512-4boWHY+STwAxGl1+uwakNNoQky5EjPLC8HuponXNoAscYyT1h/F7RUvTkl4IyF/MiWr3V8Q626je3Iel3eArqA==}
+    peerDependencies:
+      vitest: ^3.0.0 || ^4.0.0
+
+  vitest-plugin-vis@5.1.1:
+    resolution: {integrity: sha512-A/MEvQhDpNAj/5b53GiN139glgWUe0Qh5cDupm25G+06FA/2K85bd3tK+Hi4fTaolNbL5WiLNgnQ8dOL+kC7Pw==}
     peerDependencies:
       '@vitest/browser': ^4
       '@vitest/browser-playwright': ^4
@@ -13072,26 +13178,20 @@ packages:
       '@vitest/browser-webdriverio':
         optional: true
 
-  vitest-sonar-reporter@3.0.0:
-    resolution: {integrity: sha512-QRT5m9Z/3Kt0WVDVcFHm5LC9Ba89yDP4twlX2QUAJ9PdqfJBkLAh/kXj7m6U3i0k6GxnIEiwCc295bmAYokmZg==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    peerDependencies:
-      vitest: '>=3'
-
-  vitest@4.1.5:
-    resolution: {integrity: sha512-9Xx1v3/ih3m9hN+SbfkUyy0JAs72ap3r7joc87XL6jwF0jGg6mFBvQ1SrwaX+h8BlkX6Hz9shdd1uo6AF+ZGpg==}
+  vitest@4.1.10:
+    resolution: {integrity: sha512-R9jUTe5S4Qb0HCd4TNqpC7oGcrMssMRGXLW80ubjWsW9VH5GF8y1Y0SFLY9AbqSk6nt0PnOx4H4WNJYZ13GUPw==}
     engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
       '@opentelemetry/api': ^1.9.0
-      '@types/node': 18.19.130
-      '@vitest/browser-playwright': 4.1.5
-      '@vitest/browser-preview': 4.1.5
-      '@vitest/browser-webdriverio': 4.1.5
-      '@vitest/coverage-istanbul': 4.1.5
-      '@vitest/coverage-v8': 4.1.5
-      '@vitest/ui': 4.1.5
+      '@types/node': 25.9.3
+      '@vitest/browser-playwright': 4.1.10
+      '@vitest/browser-preview': 4.1.10
+      '@vitest/browser-webdriverio': 4.1.10
+      '@vitest/coverage-istanbul': 4.1.10
+      '@vitest/coverage-v8': 4.1.10
+      '@vitest/ui': 4.1.10
       happy-dom: '*'
       jsdom: '*'
       vite: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -13122,23 +13222,6 @@ packages:
   vm-browserify@1.1.2:
     resolution: {integrity: sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==}
 
-  vscode-jsonrpc@8.2.0:
-    resolution: {integrity: sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==}
-    engines: {node: '>=14.0.0'}
-
-  vscode-languageserver-protocol@3.17.5:
-    resolution: {integrity: sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==}
-
-  vscode-languageserver-textdocument@1.0.12:
-    resolution: {integrity: sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA==}
-
-  vscode-languageserver-types@3.17.5:
-    resolution: {integrity: sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg==}
-
-  vscode-languageserver@9.0.1:
-    resolution: {integrity: sha512-woByF3PDpkHFUreUa7Hos7+pUWdeWMXRd26+ZX2A8cFx6v/JPTtd4/uN0/jB6XQHYaOlHbio03NTHCqrgG5n7g==}
-    hasBin: true
-
   vscode-uri@3.1.0:
     resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
 
@@ -13154,8 +13237,8 @@ packages:
     resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
     engines: {node: '>=18'}
 
-  wait-on@9.0.5:
-    resolution: {integrity: sha512-qgnbHDfDTRIp73ANEJNRW/7kn8CrDUcvZz18xotJQku/P4saTGkbIzvnMZebPmVvVNUiRq1qWAPyqCH+W4H8KA==}
+  wait-on@9.1.0:
+    resolution: {integrity: sha512-PymrLXHLBM1Ju/Xspb2ADUhbPSMvbnuNvy/mN2hWtpbJ3da0h3Ky1LqwKPG5QSVR57liyO0iUpfipYl/s5qNvA==}
     engines: {node: '>=20.0.0'}
     hasBin: true
 
@@ -13169,22 +13252,19 @@ packages:
   walker@1.0.8:
     resolution: {integrity: sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==}
 
-  watchpack@2.5.1:
-    resolution: {integrity: sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==}
+  watchpack@2.5.2:
+    resolution: {integrity: sha512-6i/00NBjP4yGPs+caKSyRfpTF/8Torsu0MOW3mMzIbhgISFder8i7xbqgHlLMwJrdiN8ndBV3UA1/AfzPSr+jg==}
     engines: {node: '>=10.13.0'}
 
-  wbuf@1.7.3:
-    resolution: {integrity: sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==}
-
   wcwidth@1.0.1:
     resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
 
-  web-streams-polyfill@4.2.0:
-    resolution: {integrity: sha512-0rYDzGOh9EZpig92umN5g5D/9A1Kff7k0/mzPSSCY8jEQeYkgRMoY7LhbXtUCWzLCMX0TUE9aoHkjFNB7D9pfA==}
+  web-streams-polyfill@4.3.0:
+    resolution: {integrity: sha512-/Gnggvj9oSrEvJbDyyPtAnxBt5fGQM2iWOKQNu7ie1OxDgK40iZpyV3TKaRiEzVj1oA1UxKnEy9XPXh6PW3eVw==}
     engines: {node: '>= 8'}
 
-  web-vitals@5.1.0:
-    resolution: {integrity: sha512-ArI3kx5jI0atlTtmV0fWU3fjpLmq/nD3Zr1iFFlJLaqa5wLBkUSzINwBPySCX/8jRyjlmy1Volw1kz1g9XE4Jg==}
+  web-vitals@5.3.0:
+    resolution: {integrity: sha512-q6LWsLatGYZp5VGBIOvbTj6JBV2nOmC8KvWztXBmwJcfFAzhwKwbOxhUH306XY3CcaZDUlSmSuNPBsCn0bFu+g==}
 
   webcrypto-core@1.9.2:
     resolution: {integrity: sha512-gsXecm82UQNlTBURJGuqOWy1Ww08S3kZUcr3aOJS02Pk0xLtkfeUAVC0u0xhgdonFme80edSJUIJyuvL/7250Q==}
@@ -13196,40 +13276,49 @@ packages:
     resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
     engines: {node: '>=12'}
 
-  webpack-bundle-analyzer@5.3.0:
-    resolution: {integrity: sha512-PEhAoqiJ+47d0uLMx/+zo5XOvaU+Vk6N2ZLht7H3n09QLy/fhyvqGNwjdRUHJDgMN8crBR2ZwVHkIswT3Xuawg==}
+  webpack-bundle-analyzer@5.3.1:
+    resolution: {integrity: sha512-wP2EusncRGL1tZyMHC/umLkjPdYMkTL9nPEKh8G8dkYCJ9TyF6xnXFqjhdqmv5J900irN/g0P5jMvLT22krEXQ==}
     engines: {node: '>= 20.9.0'}
     hasBin: true
 
-  webpack-cli@7.0.2:
-    resolution: {integrity: sha512-dB0R4T+C/8YuvM+fabdvil6QE44/ChDXikV5lOOkrUeCkW5hTJv2pGLE3keh+D5hjYw8icBaJkZzpFoaHV4T+g==}
+  webpack-cli@7.2.2:
+    resolution: {integrity: sha512-lD0pALneslq8FfV+rwvm1BMW0AFAJrHHhNupAGN4asYjMvqrtRsenU4iKpiBo09gS4ntMxKGUxl9jhTEzVt0oA==}
     engines: {node: '>=20.9.0'}
     hasBin: true
     peerDependencies:
+      js-yaml: ^4.0.0 || ^5.0.0
+      json5: ^2.2.3
+      toml: ^3.0.0 || ^4.0.0
       webpack: ^5.101.0
       webpack-bundle-analyzer: ^4.0.0 || ^5.0.0
-      webpack-dev-server: ^5.0.0
+      webpack-dev-server: ^5.0.0 || ^6.0.0
     peerDependenciesMeta:
+      js-yaml:
+        optional: true
+      json5:
+        optional: true
+      toml:
+        optional: true
       webpack-bundle-analyzer:
         optional: true
       webpack-dev-server:
         optional: true
 
-  webpack-dev-middleware@7.4.5:
-    resolution: {integrity: sha512-uxQ6YqGdE4hgDKNf7hUiPXOdtkXvBJXrfEGYSx7P7LC8hnUYGK70X6xQXUvXeNyBDDcsiQXpG2m3G9vxowaEuA==}
-    engines: {node: '>= 18.12.0'}
+  webpack-dev-middleware@8.0.3:
+    resolution: {integrity: sha512-zWrde9VZDiRaFuWsjHO40wm9LxxtXEk8DdzFXdU7eU5ZpiANnZZDBbZgN3guxbEoKqUHd9YupBmynyioz42nkA==}
+    engines: {node: '>= 20.9.0'}
     peerDependencies:
-      webpack: ^5.0.0
+      webpack: ^5.101.0
     peerDependenciesMeta:
       webpack:
         optional: true
 
-  webpack-dev-server@5.2.3:
-    resolution: {integrity: sha512-9Gyu2F7+bg4Vv+pjbovuYDhHX+mqdqITykfzdM9UyKqKHlsE5aAjRhR+oOEfXW5vBeu8tarzlJFIZva4ZjAdrQ==}
-    engines: {node: '>= 18.12.0'}
+  webpack-dev-server@6.0.0:
+    resolution: {integrity: sha512-q9SD4ItOGhZLeU6EGT10caDZdHjF50Pz1DtkRZZOPsfluMXOkacWKKOtSBSLVkPqKiF67eFUC0rI88U/tSFPEw==}
+    engines: {node: '>= 22.15.0'}
     hasBin: true
     peerDependencies:
-      webpack: ^5.0.0
+      webpack: ^5.101.0
       webpack-cli: '*'
     peerDependenciesMeta:
       webpack:
@@ -13246,8 +13335,8 @@ packages:
     peerDependencies:
       webpack: '>=5.0.0'
 
-  webpack-sources@3.3.4:
-    resolution: {integrity: sha512-7tP1PdV4vF+lYPnkMR0jMY5/la2ub5Fc/8VQrrU+lXkiM6C4TjVfGw7iKfyhnTQOsD+6Q/iKw0eFciziRgD58Q==}
+  webpack-sources@3.5.1:
+    resolution: {integrity: sha512-jyuiGJdtvY434z5bUZrjz67v76/ePNvFZTp9Mdz29IlH4+GPsgyGjiv0fKI+M7BdkU6ADjulUcKAd3tUK3WlEw==}
     engines: {node: '>=10.13.0'}
 
   webpack-version-file-plugin@0.5.0:
@@ -13258,8 +13347,8 @@ packages:
   webpack-virtual-modules@0.6.2:
     resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
 
-  webpack@5.106.2:
-    resolution: {integrity: sha512-wGN3qcrBQIFmQ/c0AiOAQBvrZ5lmY8vbbMv4Mxfgzqd/B6+9pXtLo73WuS1dSGXM5QYY3hZnIbvx+K1xxe6FyA==}
+  webpack@5.109.2:
+    resolution: {integrity: sha512-U9/cvLzxObKNEZ9+TtdqrHM5/9z3lgl2c+c4BzbqGxFQvQvBAq87yql5A8pQ+rrMbS496MZJeF5enVBndIy2hw==}
     engines: {node: '>=10.13.0'}
     hasBin: true
     peerDependencies:
@@ -13268,14 +13357,6 @@ packages:
       webpack-cli:
         optional: true
 
-  websocket-driver@0.7.4:
-    resolution: {integrity: sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==}
-    engines: {node: '>=0.8.0'}
-
-  websocket-extensions@0.1.4:
-    resolution: {integrity: sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==}
-    engines: {node: '>=0.8.0'}
-
   what-input@5.2.12:
     resolution: {integrity: sha512-3yrSa7nGSXGJS6wZeSkO6VNm95pB1mZ9i3wFzC1hhY7mn4/afue/MvXz04OXNdBC8bfo4AB4RRd3Dem9jXM58Q==}
 
@@ -13284,6 +13365,10 @@ packages:
     engines: {node: '>=18'}
     deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation
 
+  whatwg-mimetype@3.0.0:
+    resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
+    engines: {node: '>=12'}
+
   whatwg-mimetype@4.0.0:
     resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
     engines: {node: '>=18'}
@@ -13298,18 +13383,6 @@ packages:
   when-exit@2.1.5:
     resolution: {integrity: sha512-VGkKJ564kzt6Ms1dbgPP/yuIoQCrsFAnRbptpC5wOEsDaNsbCB2bnfnaA8i/vRs5tjUSEOtIuvl9/MyVsvQZCg==}
 
-  which-boxed-primitive@1.1.1:
-    resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
-    engines: {node: '>= 0.4'}
-
-  which-builtin-type@1.2.1:
-    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
-    engines: {node: '>= 0.4'}
-
-  which-collection@1.0.2:
-    resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
-    engines: {node: '>= 0.4'}
-
   which-module@2.0.1:
     resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
 
@@ -13326,6 +13399,11 @@ packages:
     engines: {node: '>= 8'}
     hasBin: true
 
+  which@3.0.1:
+    resolution: {integrity: sha512-XA1b62dzQzLfaEOSQFTCOd5KFf/1VSzZo7/7TUjnya6u0vGGKzU96UQBZTAThCb2j4/xjBAyii1OhRLJEivHvg==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+    hasBin: true
+
   which@5.0.0:
     resolution: {integrity: sha512-JEdGzHwwkrbWoGOlIHqQ5gtprKGOenpDHpxE9zVR1bWbOtYRyPPHMe9FaP6x61CmNaTThSkb0DAJte5jD+DmzQ==}
     engines: {node: ^18.17.0 || >=20.5.0}
@@ -13336,6 +13414,11 @@ packages:
     engines: {node: ^20.17.0 || >=22.9.0}
     hasBin: true
 
+  which@7.0.0:
+    resolution: {integrity: sha512-RancgH2dmbLdHl6LRhEqvklWMgl/Hdnun0Y90KhBOLkMefg8Qa7/Zel8Sm+8HEcP6DEjzsWzpkuBQEZok58isA==}
+    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
+    hasBin: true
+
   why-is-node-running@2.3.0:
     resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
     engines: {node: '>=8'}
@@ -13354,10 +13437,6 @@ packages:
   wordwrap@1.0.0:
     resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
 
-  wrap-ansi@10.0.0:
-    resolution: {integrity: sha512-SGcvg80f0wUy2/fXES19feHMz8E0JoXv2uNgHOu4Dgi2OrCy1lqwFYEJz1BLbDI0exjPMe/ZdzZ/YpGECBG/aQ==}
-    engines: {node: '>=20'}
-
   wrap-ansi@6.2.0:
     resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
     engines: {node: '>=8'}
@@ -13370,10 +13449,6 @@ packages:
     resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
     engines: {node: '>=12'}
 
-  wrap-ansi@9.0.2:
-    resolution: {integrity: sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==}
-    engines: {node: '>=18'}
-
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
@@ -13385,8 +13460,8 @@ packages:
     resolution: {integrity: sha512-OTIk8iR8/aCRWBqvxrzxR0hgxWpnYBblY1S5hDWBQfk/VFmJwzmJgQFN3WsoUKHISv2eAwe+PpbUzyL1CKTLXg==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
-  ws@8.20.0:
-    resolution: {integrity: sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA==}
+  ws@8.21.1:
+    resolution: {integrity: sha512-+0NTnW77fFN/DjQi6k/Sq/Yvk4Sgajw7urW8V+asjXnRgDs9gyGkdb7EzgfhA4goXsRIZKE28fzIXBHEzhuiWw==}
     engines: {node: '>=10.0.0'}
     peerDependencies:
       bufferutil: ^4.0.1
@@ -13401,6 +13476,10 @@ packages:
     resolution: {integrity: sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==}
     engines: {node: '>=18'}
 
+  wsl-utils@0.3.1:
+    resolution: {integrity: sha512-g/eziiSUNBSsdDJtCLB8bdYEUMj4jR7AGeUo96p/3dTafgjHhpF4RiCFPiRILwjQoDXx5MqkBr4fwWtR3Ky4Wg==}
+    engines: {node: '>=20'}
+
   xml-name-validator@5.0.0:
     resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
     engines: {node: '>=18'}
@@ -13446,13 +13525,8 @@ packages:
     resolution: {integrity: sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==}
     engines: {node: '>= 6'}
 
-  yaml@2.8.0:
-    resolution: {integrity: sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==}
-    engines: {node: '>= 14.6'}
-    hasBin: true
-
-  yaml@2.8.4:
-    resolution: {integrity: sha512-ml/JPOj9fOQK8RNnWojA67GbZ0ApXAUlN2UQclwv2eVgTgn7O9gg9o7paZWKMp4g0H3nTLtS9LVzhkpOFIKzog==}
+  yaml@2.9.0:
+    resolution: {integrity: sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==}
     engines: {node: '>= 14.6'}
     hasBin: true
 
@@ -13472,8 +13546,9 @@ packages:
     resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
     engines: {node: '>=12'}
 
-  yauzl@2.10.0:
-    resolution: {integrity: sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==}
+  yargs@17.7.3:
+    resolution: {integrity: sha512-GZtjxm/J/4TSxuL3FNYjCmLktBTnIw/rVmKSIyKeYAZpmJB2ig9VauCC5xsa82GNKVKDAqpOn3KVzNt0zmrU0g==}
+    engines: {node: '>=12'}
 
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
@@ -13483,31 +13558,14 @@ packages:
     resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
     engines: {node: '>= 14'}
 
-  zod-validation-error@3.5.4:
-    resolution: {integrity: sha512-+hEiRIiPobgyuFlEojnqjJnhFvg4r/i3cqgcm67eehZf/WBaK3g6cD02YU9mtdVxZjv8CzCA9n/Rhrs3yAAvAw==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      zod: ^3.24.4
-
-  zod-validation-error@4.0.2:
-    resolution: {integrity: sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==}
-    engines: {node: '>=18.0.0'}
-    peerDependencies:
-      zod: ^3.25.0 || ^4.0.0
-
-  zod@3.25.76:
-    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
-
-  zod@4.3.6:
-    resolution: {integrity: sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==}
+  zod@4.4.3:
+    resolution: {integrity: sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==}
 
   zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
 
 snapshots:
 
-  7zip-bin@5.2.0: {}
-
   '@action-validator/cli@0.6.0(@action-validator/core@0.6.0)':
     dependencies:
       '@action-validator/core': 0.6.0
@@ -13521,14 +13579,14 @@ snapshots:
       '@octokit/core': 7.0.6
       '@octokit/plugin-paginate-rest': 14.0.0(@octokit/core@7.0.6)
       '@octokit/plugin-rest-endpoint-methods': 17.0.0(@octokit/core@7.0.6)
-      '@octokit/request': 10.0.8
+      '@octokit/request': 10.0.10
       '@octokit/request-error': 7.1.0
-      undici: 6.25.0
+      undici: 6.28.0
 
   '@actions/http-client@3.0.2':
     dependencies:
       tunnel: 0.0.6
-      undici: 6.25.0
+      undici: 6.28.0
 
   '@actions/io@1.1.3': {}
 
@@ -13649,891 +13707,1328 @@ snapshots:
   '@antfu/install-pkg@1.1.0':
     dependencies:
       package-manager-detector: 1.6.0
-      tinyexec: 1.1.2
+      tinyexec: 1.2.4
+
+  '@apm-js-collab/code-transformer-bundler-plugins@0.7.3':
+    dependencies:
+      '@apm-js-collab/code-transformer': 0.18.1
+      es-module-lexer: 2.3.1
+      magic-string: 0.30.21
+      module-details-from-path: 1.0.4
+
+  '@apm-js-collab/code-transformer@0.18.1':
+    dependencies:
+      '@types/estree': 1.0.9
+      astring: 1.9.0
+      esquery: 1.7.0
+      meriyah: 6.1.4
+      semifies: 1.0.0
+      source-map: 0.6.1
+
+  '@apm-js-collab/tracing-hooks@0.13.0(supports-color@10.2.2)':
+    dependencies:
+      '@apm-js-collab/code-transformer': 0.18.1
+      debug: 4.4.3(supports-color@10.2.2)
+      module-details-from-path: 1.0.4
+    transitivePeerDependencies:
+      - supports-color
+
+  '@arcmantle/vite-plugin-import-css-sheet@1.0.14(patch_hash=8019aa9feca17db6bab3483612b4150c911d70b58fddc52bf2d7258a1484a747)':
+    dependencies:
+      lightningcss: 1.33.0
+      typescript: '@typescript/typescript6@6.0.2'
 
   '@asamuzakjp/css-color@3.2.0':
     dependencies:
-      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
-      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5)(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5)(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
       lru-cache: 10.4.3
 
-  '@axe-core/playwright@4.11.3(playwright-core@1.59.1)':
+  '@axe-core/playwright@4.12.1(playwright-core@1.61.1)':
     dependencies:
-      axe-core: 4.11.4
-      playwright-core: 1.59.1
+      axe-core: 4.12.1
+      playwright-core: 1.61.1
 
-  '@babel/code-frame@7.29.0':
+  '@babel/code-frame@7.29.7':
     dependencies:
-      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/helper-validator-identifier': 7.29.7
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
-  '@babel/compat-data@7.29.3': {}
+  '@babel/compat-data@7.29.7': {}
 
-  '@babel/core@7.29.0':
+  '@babel/core@7.29.7(supports-color@10.2.2)':
     dependencies:
-      '@babel/code-frame': 7.29.0
-      '@babel/generator': 7.29.1
-      '@babel/helper-compilation-targets': 7.28.6
-      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0)
-      '@babel/helpers': 7.28.6
-      '@babel/parser': 7.29.2
-      '@babel/template': 7.28.6
-      '@babel/traverse': 7.29.0
-      '@babel/types': 7.29.0
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.8
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/helpers': 7.29.7
+      '@babel/parser': 7.29.8
+      '@babel/template': 7.29.7
+      '@babel/traverse': 7.29.8(supports-color@10.2.2)
+      '@babel/types': 7.29.8
       '@jridgewell/remapping': 2.3.5
       convert-source-map: 2.0.0
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@10.2.2)
       gensync: 1.0.0-beta.2
       json5: 2.2.3
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/eslint-parser@7.28.6(@babel/core@7.29.0)(eslint@8.57.1)':
+  '@babel/core@7.29.7(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@nicolo-ribaudo/eslint-scope-5-internals': 5.1.1-v1
-      eslint: 8.57.1
-      eslint-visitor-keys: 2.1.0
-      semver: 6.3.1
-
-  '@babel/eslint-plugin@7.27.1(@babel/eslint-parser@7.28.6(@babel/core@7.29.0)(eslint@8.57.1))(eslint@8.57.1)':
-    dependencies:
-      '@babel/eslint-parser': 7.28.6(@babel/core@7.29.0)(eslint@8.57.1)
-      eslint: 8.57.1
-      eslint-rule-composer: 0.3.0
-
-  '@babel/generator@7.29.1':
-    dependencies:
-      '@babel/parser': 7.29.2
-      '@babel/types': 7.29.0
-      '@jridgewell/gen-mapping': 0.3.13
-      '@jridgewell/trace-mapping': 0.3.31
-      jsesc: 3.1.0
-
-  '@babel/helper-annotate-as-pure@7.27.3':
-    dependencies:
-      '@babel/types': 7.29.0
-
-  '@babel/helper-compilation-targets@7.28.6':
-    dependencies:
-      '@babel/compat-data': 7.29.3
-      '@babel/helper-validator-option': 7.27.1
-      browserslist: 4.28.2
-      lru-cache: 5.1.1
-      semver: 6.3.1
-
-  '@babel/helper-create-class-features-plugin@7.28.6(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-member-expression-to-functions': 7.28.5
-      '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/helper-replace-supers': 7.28.6(@babel/core@7.29.0)
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/traverse': 7.29.0
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.8
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/helpers': 7.29.7
+      '@babel/parser': 7.29.8
+      '@babel/template': 7.29.7
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
+      '@babel/types': 7.29.8
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3(supports-color@7.2.0)
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-create-regexp-features-plugin@7.28.5(@babel/core@7.29.0)':
+  '@babel/generator@7.29.8':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/parser': 7.29.8
+      '@babel/types': 7.29.8
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  '@babel/helper-annotate-as-pure@7.29.7':
+    dependencies:
+      '@babel/types': 7.29.8
+
+  '@babel/helper-compilation-targets@7.29.7':
+    dependencies:
+      '@babel/compat-data': 7.29.7
+      '@babel/helper-validator-option': 7.29.7
+      browserslist: 4.28.7
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-create-class-features-plugin@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-member-expression-to-functions': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-optimise-call-expression': 7.29.7
+      '@babel/helper-replace-supers': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7(supports-color@10.2.2)
+      '@babel/traverse': 7.29.8(supports-color@10.2.2)
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-create-class-features-plugin@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-member-expression-to-functions': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-optimise-call-expression': 7.29.7
+      '@babel/helper-replace-supers': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7(supports-color@7.2.0)
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-create-regexp-features-plugin@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-annotate-as-pure': 7.29.7
       regexpu-core: 6.4.0
       semver: 6.3.1
 
-  '@babel/helper-define-polyfill-provider@0.6.8(@babel/core@7.29.0)':
+  '@babel/helper-define-polyfill-provider@0.6.8(@babel/core@7.29.7)(supports-color@10.2.2)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-compilation-targets': 7.28.6
-      '@babel/helper-plugin-utils': 7.28.6
-      debug: 4.4.3
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      debug: 4.4.3(supports-color@10.2.2)
       lodash.debounce: 4.0.8
       resolve: 1.22.12
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-globals@7.28.0': {}
-
-  '@babel/helper-member-expression-to-functions@7.28.5':
+  '@babel/helper-define-polyfill-provider@0.6.8(@babel/core@7.29.7)(supports-color@7.2.0)':
     dependencies:
-      '@babel/traverse': 7.29.0
-      '@babel/types': 7.29.0
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      debug: 4.4.3(supports-color@7.2.0)
+      lodash.debounce: 4.0.8
+      resolve: 1.22.12
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-imports@7.28.6':
+  '@babel/helper-globals@7.29.7': {}
+
+  '@babel/helper-member-expression-to-functions@7.29.7(supports-color@10.2.2)':
     dependencies:
-      '@babel/traverse': 7.29.0
-      '@babel/types': 7.29.0
+      '@babel/traverse': 7.29.8(supports-color@10.2.2)
+      '@babel/types': 7.29.8
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-transforms@7.28.6(@babel/core@7.29.0)':
+  '@babel/helper-member-expression-to-functions@7.29.7(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-module-imports': 7.28.6
-      '@babel/helper-validator-identifier': 7.28.5
-      '@babel/traverse': 7.29.0
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
+      '@babel/types': 7.29.8
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-optimise-call-expression@7.27.1':
+  '@babel/helper-module-imports@7.29.7(supports-color@10.2.2)':
     dependencies:
-      '@babel/types': 7.29.0
-
-  '@babel/helper-plugin-utils@7.28.6': {}
-
-  '@babel/helper-remap-async-to-generator@7.27.1(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-wrap-function': 7.28.6
-      '@babel/traverse': 7.29.0
+      '@babel/traverse': 7.29.8(supports-color@10.2.2)
+      '@babel/types': 7.29.8
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-replace-supers@7.28.6(@babel/core@7.29.0)':
+  '@babel/helper-module-imports@7.29.7(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-member-expression-to-functions': 7.28.5
-      '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/traverse': 7.29.0
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
+      '@babel/types': 7.29.8
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
+  '@babel/helper-module-transforms@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
     dependencies:
-      '@babel/traverse': 7.29.0
-      '@babel/types': 7.29.0
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-module-imports': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-validator-identifier': 7.29.7
+      '@babel/traverse': 7.29.8(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-string-parser@7.27.1': {}
-
-  '@babel/helper-validator-identifier@7.28.5': {}
-
-  '@babel/helper-validator-option@7.27.1': {}
-
-  '@babel/helper-wrap-function@7.28.6':
+  '@babel/helper-module-transforms@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
     dependencies:
-      '@babel/template': 7.28.6
-      '@babel/traverse': 7.29.0
-      '@babel/types': 7.29.0
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-module-imports': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-validator-identifier': 7.29.7
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helpers@7.28.6':
+  '@babel/helper-optimise-call-expression@7.29.7':
     dependencies:
-      '@babel/template': 7.28.6
-      '@babel/types': 7.29.0
+      '@babel/types': 7.29.8
 
-  '@babel/parser@7.29.2':
-    dependencies:
-      '@babel/types': 7.29.0
+  '@babel/helper-plugin-utils@7.29.7': {}
 
-  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.28.5(@babel/core@7.29.0)':
+  '@babel/helper-remap-async-to-generator@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/traverse': 7.29.0
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-wrap-function': 7.29.7(supports-color@10.2.2)
+      '@babel/traverse': 7.29.8(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.27.1(@babel/core@7.29.0)':
+  '@babel/helper-remap-async-to-generator@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.27.1(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-bugfix-safari-rest-destructuring-rhs-array@7.29.3(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-wrap-function': 7.29.7(supports-color@7.2.0)
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.27.1(@babel/core@7.29.0)':
+  '@babel/helper-replace-supers@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/plugin-transform-optional-chaining': 7.28.6(@babel/core@7.29.0)
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-member-expression-to-functions': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-optimise-call-expression': 7.29.7
+      '@babel/traverse': 7.29.8(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.28.6(@babel/core@7.29.0)':
+  '@babel/helper-replace-supers@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/traverse': 7.29.0
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-member-expression-to-functions': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-optimise-call-expression': 7.29.7
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-proposal-decorators@7.29.0(@babel/core@7.29.0)':
+  '@babel/helper-skip-transparent-expression-wrappers@7.29.7(supports-color@10.2.2)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.29.0)
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/plugin-syntax-decorators': 7.28.6(@babel/core@7.29.0)
+      '@babel/traverse': 7.29.8(supports-color@10.2.2)
+      '@babel/types': 7.29.8
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-proposal-export-default-from@7.27.1(@babel/core@7.29.0)':
+  '@babel/helper-skip-transparent-expression-wrappers@7.29.7(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-proposal-private-methods@7.18.6(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.29.0)
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
+      '@babel/types': 7.29.8
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
+  '@babel/helper-string-parser@7.29.7': {}
 
-  '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
+  '@babel/helper-validator-identifier@7.29.7': {}
 
-  '@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
+  '@babel/helper-validator-option@7.29.7': {}
 
-  '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.29.0)':
+  '@babel/helper-wrap-function@7.29.7(supports-color@10.2.2)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-syntax-decorators@7.28.6(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-syntax-import-assertions@7.28.6(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-syntax-import-attributes@7.28.6(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.29.0)
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-transform-arrow-functions@7.27.1(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-transform-async-generator-functions@7.29.0(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-remap-async-to-generator': 7.27.1(@babel/core@7.29.0)
-      '@babel/traverse': 7.29.0
+      '@babel/template': 7.29.7
+      '@babel/traverse': 7.29.8(supports-color@10.2.2)
+      '@babel/types': 7.29.8
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-async-to-generator@7.28.6(@babel/core@7.29.0)':
+  '@babel/helper-wrap-function@7.29.7(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-module-imports': 7.28.6
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-remap-async-to-generator': 7.27.1(@babel/core@7.29.0)
+      '@babel/template': 7.29.7
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
+      '@babel/types': 7.29.8
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-block-scoped-functions@7.27.1(@babel/core@7.29.0)':
+  '@babel/helpers@7.29.7':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.8
 
-  '@babel/plugin-transform-block-scoping@7.28.6(@babel/core@7.29.0)':
+  '@babel/parser@7.29.8':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/types': 7.29.8
 
-  '@babel/plugin-transform-class-properties@7.28.6(@babel/core@7.29.0)':
+  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.29.0)
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/traverse': 7.29.8(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-class-static-block@7.28.6(@babel/core@7.29.0)':
+  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.29.0)
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-classes@7.28.6(@babel/core@7.29.0)':
+  '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.29.7(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-compilation-targets': 7.28.6
-      '@babel/helper-globals': 7.28.0
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-replace-supers': 7.28.6(@babel/core@7.29.0)
-      '@babel/traverse': 7.29.0
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-bugfix-safari-rest-destructuring-rhs-array@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-computed-properties@7.28.6(@babel/core@7.29.0)':
+  '@babel/plugin-bugfix-safari-rest-destructuring-rhs-array@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/template': 7.28.6
-
-  '@babel/plugin-transform-destructuring@7.28.5(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/traverse': 7.29.0
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-dotall-regex@7.28.6(@babel/core@7.29.0)':
+  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.29.0)
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-transform-duplicate-keys@7.27.1(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.29.0(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.29.0)
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-transform-dynamic-import@7.27.1(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-transform-explicit-resource-management@7.28.6(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.29.0)
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7(supports-color@10.2.2)
+      '@babel/plugin-transform-optional-chaining': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-exponentiation-operator@7.28.6(@babel/core@7.29.0)':
+  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-transform-export-namespace-from@7.27.1(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-transform-for-of@7.27.1(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7(supports-color@7.2.0)
+      '@babel/plugin-transform-optional-chaining': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-function-name@7.27.1(@babel/core@7.29.0)':
+  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-compilation-targets': 7.28.6
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/traverse': 7.29.0
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/traverse': 7.29.8(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-json-strings@7.28.6(@babel/core@7.29.0)':
+  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-transform-literals@7.27.1(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-transform-logical-assignment-operators@7.28.6(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-transform-member-expression-literals@7.27.1(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-transform-modules-amd@7.27.1(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0)
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-modules-commonjs@7.28.6(@babel/core@7.29.0)':
+  '@babel/plugin-proposal-decorators@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0)
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/plugin-syntax-decorators': 7.29.7(@babel/core@7.29.7)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-modules-systemjs@7.29.4(@babel/core@7.29.0)':
+  '@babel/plugin-proposal-decorators@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0)
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-validator-identifier': 7.28.5
-      '@babel/traverse': 7.29.0
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/plugin-syntax-decorators': 7.29.7(@babel/core@7.29.7)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-modules-umd@7.27.1(@babel/core@7.29.0)':
+  '@babel/plugin-proposal-export-default-from@7.29.7(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0)
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+
+  '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-decorators@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-import-assertions@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-import-attributes@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-jsx@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-typescript@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-create-regexp-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-arrow-functions@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-async-generator-functions@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-remap-async-to-generator': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/traverse': 7.29.8(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-named-capturing-groups-regex@7.29.0(@babel/core@7.29.0)':
+  '@babel/plugin-transform-async-generator-functions@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.29.0)
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-transform-new-target@7.27.1(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-transform-nullish-coalescing-operator@7.28.6(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-transform-numeric-separator@7.28.6(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-transform-object-rest-spread@7.28.6(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-compilation-targets': 7.28.6
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.29.0)
-      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.29.0)
-      '@babel/traverse': 7.29.0
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-remap-async-to-generator': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-object-super@7.27.1(@babel/core@7.29.0)':
+  '@babel/plugin-transform-async-to-generator@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-replace-supers': 7.28.6(@babel/core@7.29.0)
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-module-imports': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-remap-async-to-generator': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-optional-catch-binding@7.28.6(@babel/core@7.29.0)':
+  '@babel/plugin-transform-async-to-generator@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-transform-optional-chaining@7.28.6(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-module-imports': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-remap-async-to-generator': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-parameters@7.27.7(@babel/core@7.29.0)':
+  '@babel/plugin-transform-block-scoped-functions@7.29.7(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-private-methods@7.28.6(@babel/core@7.29.0)':
+  '@babel/plugin-transform-block-scoping@7.29.7(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.29.0)
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-class-properties@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-private-property-in-object@7.28.6(@babel/core@7.29.0)':
+  '@babel/plugin-transform-class-properties@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.29.0)
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-property-literals@7.27.1(@babel/core@7.29.0)':
+  '@babel/plugin-transform-class-static-block@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-transform-react-constant-elements@7.27.1(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-transform-react-display-name@7.28.0(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-transform-react-jsx-development@7.27.1(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/plugin-transform-react-jsx': 7.28.6(@babel/core@7.29.0)
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-react-jsx@7.28.6(@babel/core@7.29.0)':
+  '@babel/plugin-transform-class-static-block@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-module-imports': 7.28.6
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.29.0)
-      '@babel/types': 7.29.0
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-react-pure-annotations@7.27.1(@babel/core@7.29.0)':
+  '@babel/plugin-transform-classes@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-globals': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-replace-supers': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/traverse': 7.29.8(supports-color@10.2.2)
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-transform-regenerator@7.29.0(@babel/core@7.29.0)':
+  '@babel/plugin-transform-classes@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-globals': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-replace-supers': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-transform-regexp-modifiers@7.28.6(@babel/core@7.29.0)':
+  '@babel/plugin-transform-computed-properties@7.29.7(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.29.0)
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/template': 7.29.7
 
-  '@babel/plugin-transform-reserved-words@7.27.1(@babel/core@7.29.0)':
+  '@babel/plugin-transform-destructuring@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/traverse': 7.29.8(supports-color@10.2.2)
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-transform-runtime@7.29.0(@babel/core@7.29.0)':
+  '@babel/plugin-transform-destructuring@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-module-imports': 7.28.6
-      '@babel/helper-plugin-utils': 7.28.6
-      babel-plugin-polyfill-corejs2: 0.4.17(@babel/core@7.29.0)
-      babel-plugin-polyfill-corejs3: 0.13.0(@babel/core@7.29.0)
-      babel-plugin-polyfill-regenerator: 0.6.8(@babel/core@7.29.0)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-dotall-regex@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-create-regexp-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-duplicate-keys@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-create-regexp-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-dynamic-import@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-explicit-resource-management@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/plugin-transform-destructuring': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-explicit-resource-management@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/plugin-transform-destructuring': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-exponentiation-operator@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-export-namespace-from@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-for-of@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7(supports-color@10.2.2)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-for-of@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7(supports-color@7.2.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-function-name@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/traverse': 7.29.8(supports-color@10.2.2)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-function-name@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-json-strings@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-literals@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-logical-assignment-operators@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-member-expression-literals@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-modules-amd@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-modules-amd@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-modules-commonjs@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-modules-commonjs@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-modules-systemjs@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+      '@babel/traverse': 7.29.8(supports-color@10.2.2)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-modules-systemjs@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-modules-umd@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-modules-umd@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-named-capturing-groups-regex@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-create-regexp-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-new-target@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-nullish-coalescing-operator@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-numeric-separator@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-object-rest-spread@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/plugin-transform-destructuring': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-transform-parameters': 7.29.7(@babel/core@7.29.7)
+      '@babel/traverse': 7.29.8(supports-color@10.2.2)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-object-rest-spread@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/plugin-transform-destructuring': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-transform-parameters': 7.29.7(@babel/core@7.29.7)
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-object-super@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-replace-supers': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-object-super@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-replace-supers': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-optional-catch-binding@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-optional-chaining@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7(supports-color@10.2.2)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-optional-chaining@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7(supports-color@7.2.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-parameters@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-private-methods@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-private-methods@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-private-property-in-object@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-private-property-in-object@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-property-literals@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-react-constant-elements@7.27.1(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-react-display-name@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-react-jsx-development@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/plugin-transform-react-jsx': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-react-jsx@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-module-imports': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.7)
+      '@babel/types': 7.29.8
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-react-pure-annotations@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-regenerator@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-regexp-modifiers@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-create-regexp-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-reserved-words@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-runtime@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-module-imports': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+      babel-plugin-polyfill-corejs2: 0.4.17(@babel/core@7.29.7)(supports-color@10.2.2)
+      babel-plugin-polyfill-corejs3: 0.13.0(@babel/core@7.29.7)(supports-color@10.2.2)
+      babel-plugin-polyfill-regenerator: 0.6.8(@babel/core@7.29.7)(supports-color@10.2.2)
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-shorthand-properties@7.27.1(@babel/core@7.29.0)':
+  '@babel/plugin-transform-runtime@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-transform-spread@7.28.6(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-module-imports': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
+      babel-plugin-polyfill-corejs2: 0.4.17(@babel/core@7.29.7)(supports-color@7.2.0)
+      babel-plugin-polyfill-corejs3: 0.13.0(@babel/core@7.29.7)(supports-color@7.2.0)
+      babel-plugin-polyfill-regenerator: 0.6.8(@babel/core@7.29.7)(supports-color@7.2.0)
+      semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-sticky-regex@7.27.1(@babel/core@7.29.0)':
+  '@babel/plugin-transform-shorthand-properties@7.29.7(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-template-literals@7.27.1(@babel/core@7.29.0)':
+  '@babel/plugin-transform-spread@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-transform-typeof-symbol@7.27.1(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-
-  '@babel/plugin-transform-typescript@7.28.6(@babel/core@7.29.0)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.29.0)
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/plugin-syntax-typescript': 7.28.6(@babel/core@7.29.0)
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-unicode-escapes@7.27.1(@babel/core@7.29.0)':
+  '@babel/plugin-transform-spread@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7(supports-color@7.2.0)
+    transitivePeerDependencies:
+      - supports-color
 
-  '@babel/plugin-transform-unicode-property-regex@7.28.6(@babel/core@7.29.0)':
+  '@babel/plugin-transform-sticky-regex@7.29.7(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.29.0)
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-unicode-regex@7.27.1(@babel/core@7.29.0)':
+  '@babel/plugin-transform-template-literals@7.29.7(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.29.0)
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-unicode-sets-regex@7.28.6(@babel/core@7.29.0)':
+  '@babel/plugin-transform-typeof-symbol@7.29.7(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.29.0)
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/preset-env@7.29.5(@babel/core@7.29.0)':
+  '@babel/plugin-transform-typescript@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
     dependencies:
-      '@babel/compat-data': 7.29.3
-      '@babel/core': 7.29.0
-      '@babel/helper-compilation-targets': 7.28.6
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-validator-option': 7.27.1
-      '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.28.5(@babel/core@7.29.0)
-      '@babel/plugin-bugfix-safari-class-field-initializer-scope': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-bugfix-safari-rest-destructuring-rhs-array': 7.29.3(@babel/core@7.29.0)
-      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.29.0)
-      '@babel/plugin-syntax-import-assertions': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-syntax-import-attributes': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-async-generator-functions': 7.29.0(@babel/core@7.29.0)
-      '@babel/plugin-transform-async-to-generator': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-block-scoped-functions': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-block-scoping': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-class-properties': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-class-static-block': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-classes': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-computed-properties': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.29.0)
-      '@babel/plugin-transform-dotall-regex': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-duplicate-keys': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-duplicate-named-capturing-groups-regex': 7.29.0(@babel/core@7.29.0)
-      '@babel/plugin-transform-dynamic-import': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-explicit-resource-management': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-exponentiation-operator': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-export-namespace-from': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-function-name': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-json-strings': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-literals': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-logical-assignment-operators': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-member-expression-literals': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-modules-amd': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-modules-commonjs': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-modules-systemjs': 7.29.4(@babel/core@7.29.0)
-      '@babel/plugin-transform-modules-umd': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-named-capturing-groups-regex': 7.29.0(@babel/core@7.29.0)
-      '@babel/plugin-transform-new-target': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-nullish-coalescing-operator': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-numeric-separator': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-object-rest-spread': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-object-super': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-optional-catch-binding': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-optional-chaining': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.29.0)
-      '@babel/plugin-transform-private-methods': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-private-property-in-object': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-property-literals': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-regenerator': 7.29.0(@babel/core@7.29.0)
-      '@babel/plugin-transform-regexp-modifiers': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-reserved-words': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-spread': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-sticky-regex': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-template-literals': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-typeof-symbol': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-unicode-escapes': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-unicode-property-regex': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-unicode-sets-regex': 7.28.6(@babel/core@7.29.0)
-      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.29.0)
-      babel-plugin-polyfill-corejs2: 0.4.17(@babel/core@7.29.0)
-      babel-plugin-polyfill-corejs3: 0.14.2(@babel/core@7.29.0)
-      babel-plugin-polyfill-regenerator: 0.6.8(@babel/core@7.29.0)
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7(supports-color@10.2.2)
+      '@babel/plugin-syntax-typescript': 7.29.7(@babel/core@7.29.7)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-typescript@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-create-class-features-plugin': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-skip-transparent-expression-wrappers': 7.29.7(supports-color@7.2.0)
+      '@babel/plugin-syntax-typescript': 7.29.7(@babel/core@7.29.7)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-unicode-escapes@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-unicode-property-regex@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-create-regexp-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-unicode-regex@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-create-regexp-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/plugin-transform-unicode-sets-regex@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-create-regexp-features-plugin': 7.29.7(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.29.7
+
+  '@babel/preset-env@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
+    dependencies:
+      '@babel/compat-data': 7.29.7
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-validator-option': 7.29.7
+      '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-bugfix-safari-class-field-initializer-scope': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-bugfix-safari-rest-destructuring-rhs-array': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.29.7)
+      '@babel/plugin-syntax-import-assertions': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-syntax-import-attributes': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-arrow-functions': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-async-generator-functions': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-transform-async-to-generator': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-transform-block-scoped-functions': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-block-scoping': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-class-properties': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-transform-class-static-block': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-transform-classes': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-transform-computed-properties': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-destructuring': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-transform-dotall-regex': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-duplicate-keys': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-duplicate-named-capturing-groups-regex': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-dynamic-import': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-explicit-resource-management': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-transform-exponentiation-operator': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-export-namespace-from': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-for-of': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-transform-function-name': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-transform-json-strings': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-literals': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-logical-assignment-operators': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-member-expression-literals': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-modules-amd': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-transform-modules-commonjs': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-transform-modules-systemjs': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-transform-modules-umd': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-new-target': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-numeric-separator': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-object-rest-spread': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-transform-object-super': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-transform-optional-catch-binding': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-optional-chaining': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-transform-parameters': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-private-methods': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-transform-private-property-in-object': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-transform-property-literals': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-regenerator': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-regexp-modifiers': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-reserved-words': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-shorthand-properties': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-spread': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-transform-sticky-regex': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-template-literals': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-typeof-symbol': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-unicode-escapes': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-unicode-property-regex': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-unicode-regex': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-unicode-sets-regex': 7.29.7(@babel/core@7.29.7)
+      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.29.7)
+      babel-plugin-polyfill-corejs2: 0.4.17(@babel/core@7.29.7)(supports-color@10.2.2)
+      babel-plugin-polyfill-corejs3: 0.14.2(@babel/core@7.29.7)(supports-color@10.2.2)
+      babel-plugin-polyfill-regenerator: 0.6.8(@babel/core@7.29.7)(supports-color@10.2.2)
       core-js-compat: 3.49.0
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.29.0)':
+  '@babel/preset-env@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/types': 7.29.0
+      '@babel/compat-data': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-validator-option': 7.29.7
+      '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-bugfix-safari-class-field-initializer-scope': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-bugfix-safari-rest-destructuring-rhs-array': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.29.7)
+      '@babel/plugin-syntax-import-assertions': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-syntax-import-attributes': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-arrow-functions': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-async-generator-functions': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-transform-async-to-generator': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-transform-block-scoped-functions': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-block-scoping': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-class-properties': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-transform-class-static-block': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-transform-classes': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-transform-computed-properties': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-destructuring': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-transform-dotall-regex': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-duplicate-keys': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-duplicate-named-capturing-groups-regex': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-dynamic-import': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-explicit-resource-management': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-transform-exponentiation-operator': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-export-namespace-from': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-for-of': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-transform-function-name': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-transform-json-strings': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-literals': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-logical-assignment-operators': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-member-expression-literals': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-modules-amd': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-transform-modules-commonjs': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-transform-modules-systemjs': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-transform-modules-umd': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-new-target': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-numeric-separator': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-object-rest-spread': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-transform-object-super': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-transform-optional-catch-binding': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-optional-chaining': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-transform-parameters': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-private-methods': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-transform-private-property-in-object': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-transform-property-literals': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-regenerator': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-regexp-modifiers': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-reserved-words': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-shorthand-properties': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-spread': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-transform-sticky-regex': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-template-literals': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-typeof-symbol': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-unicode-escapes': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-unicode-property-regex': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-unicode-regex': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-unicode-sets-regex': 7.29.7(@babel/core@7.29.7)
+      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.29.7)
+      babel-plugin-polyfill-corejs2: 0.4.17(@babel/core@7.29.7)(supports-color@7.2.0)
+      babel-plugin-polyfill-corejs3: 0.14.2(@babel/core@7.29.7)(supports-color@7.2.0)
+      babel-plugin-polyfill-regenerator: 0.6.8(@babel/core@7.29.7)(supports-color@7.2.0)
+      core-js-compat: 3.49.0
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/types': 7.29.8
       esutils: 2.0.3
 
-  '@babel/preset-react@7.28.5(@babel/core@7.29.0)':
+  '@babel/preset-react@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-validator-option': 7.27.1
-      '@babel/plugin-transform-react-display-name': 7.28.0(@babel/core@7.29.0)
-      '@babel/plugin-transform-react-jsx': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-react-jsx-development': 7.27.1(@babel/core@7.29.0)
-      '@babel/plugin-transform-react-pure-annotations': 7.27.1(@babel/core@7.29.0)
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-validator-option': 7.29.7
+      '@babel/plugin-transform-react-display-name': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-react-jsx': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-transform-react-jsx-development': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-transform-react-pure-annotations': 7.29.7(@babel/core@7.29.7)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/preset-typescript@7.28.5(@babel/core@7.29.0)':
+  '@babel/preset-typescript@7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-validator-option': 7.27.1
-      '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-modules-commonjs': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-typescript': 7.28.6(@babel/core@7.29.0)
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-validator-option': 7.29.7
+      '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-modules-commonjs': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/plugin-transform-typescript': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/runtime@7.29.2': {}
+  '@babel/preset-typescript@7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/helper-validator-option': 7.29.7
+      '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-modules-commonjs': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-transform-typescript': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/runtime@7.29.7': {}
 
   '@babel/runtime@8.0.0': {}
 
-  '@babel/template@7.28.6':
+  '@babel/template@7.29.7':
     dependencies:
-      '@babel/code-frame': 7.29.0
-      '@babel/parser': 7.29.2
-      '@babel/types': 7.29.0
+      '@babel/code-frame': 7.29.7
+      '@babel/parser': 7.29.8
+      '@babel/types': 7.29.8
 
-  '@babel/traverse@7.29.0':
+  '@babel/traverse@7.29.8(supports-color@10.2.2)':
     dependencies:
-      '@babel/code-frame': 7.29.0
-      '@babel/generator': 7.29.1
-      '@babel/helper-globals': 7.28.0
-      '@babel/parser': 7.29.2
-      '@babel/template': 7.28.6
-      '@babel/types': 7.29.0
-      debug: 4.4.3
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.8
+      '@babel/helper-globals': 7.29.7
+      '@babel/parser': 7.29.8
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.8
+      debug: 4.4.3(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/types@7.29.0':
+  '@babel/traverse@7.29.8(supports-color@7.2.0)':
     dependencies:
-      '@babel/helper-string-parser': 7.27.1
-      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.8
+      '@babel/helper-globals': 7.29.7
+      '@babel/parser': 7.29.8
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.8
+      debug: 4.4.3(supports-color@7.2.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.29.8':
+    dependencies:
+      '@babel/helper-string-parser': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
 
   '@balena/dockerignore@1.0.2': {}
 
@@ -14548,14 +15043,14 @@ snapshots:
 
   '@braintree/sanitize-url@7.1.2': {}
 
-  '@cacheable/memory@2.0.8':
+  '@cacheable/memory@2.2.0':
     dependencies:
-      '@cacheable/utils': 2.4.1
+      '@cacheable/utils': 2.5.0
       '@keyv/bigmap': 1.3.1(keyv@5.6.0)
       hookified: 1.15.1
       keyv: 5.6.0
 
-  '@cacheable/utils@2.4.1':
+  '@cacheable/utils@2.5.0':
     dependencies:
       hashery: 1.5.1
       keyv: 5.6.0
@@ -14565,51 +15060,38 @@ snapshots:
       mkdirp: 1.0.4
       xml: 1.0.1
 
-  '@chevrotain/cst-dts-gen@12.0.0':
-    dependencies:
-      '@chevrotain/gast': 12.0.0
-      '@chevrotain/types': 12.0.0
+  '@chevrotain/types@11.1.2': {}
 
-  '@chevrotain/gast@12.0.0':
-    dependencies:
-      '@chevrotain/types': 12.0.0
-
-  '@chevrotain/regexp-to-ast@12.0.0': {}
-
-  '@chevrotain/types@12.0.0': {}
-
-  '@chevrotain/utils@12.0.0': {}
-
-  '@csstools/cascade-layer-name-parser@3.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+  '@csstools/cascade-layer-name-parser@3.0.0(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
 
   '@csstools/color-helpers@5.1.0': {}
 
-  '@csstools/color-helpers@6.0.2': {}
+  '@csstools/color-helpers@6.1.0': {}
 
-  '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+  '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5)(@csstools/css-tokenizer@3.0.4)':
     dependencies:
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
 
-  '@csstools/css-calc@3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+  '@csstools/css-calc@3.3.0(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
 
-  '@csstools/css-color-parser@3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+  '@csstools/css-color-parser@3.1.0(@csstools/css-parser-algorithms@3.0.5)(@csstools/css-tokenizer@3.0.4)':
     dependencies:
       '@csstools/color-helpers': 5.1.0
-      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5)(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
       '@csstools/css-tokenizer': 3.0.4
 
-  '@csstools/css-color-parser@4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+  '@csstools/css-color-parser@4.1.9(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)':
     dependencies:
-      '@csstools/color-helpers': 6.0.2
-      '@csstools/css-calc': 3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/color-helpers': 6.1.0
+      '@csstools/css-calc': 3.3.0(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
 
@@ -14621,7 +15103,7 @@ snapshots:
     dependencies:
       '@csstools/css-tokenizer': 4.0.0
 
-  '@csstools/css-syntax-patches-for-csstree@1.1.3(css-tree@3.2.1)':
+  '@csstools/css-syntax-patches-for-csstree@1.1.7(css-tree@3.2.1)':
     optionalDependencies:
       css-tree: 3.2.1
 
@@ -14629,316 +15111,364 @@ snapshots:
 
   '@csstools/css-tokenizer@4.0.0': {}
 
-  '@csstools/media-query-list-parser@5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+  '@csstools/media-query-list-parser@5.0.0(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
 
-  '@csstools/postcss-alpha-function@2.0.4(postcss@8.5.14)':
+  '@csstools/postcss-alpha-function@2.0.7(postcss@8.5.25)':
     dependencies:
-      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.9(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.14)
-      '@csstools/utilities': 3.0.0(postcss@8.5.14)
-      postcss: 8.5.14
+      '@csstools/postcss-progressive-custom-properties': 5.1.1(postcss@8.5.25)
+      '@csstools/utilities': 3.0.0(postcss@8.5.25)
+      postcss: 8.5.25
 
-  '@csstools/postcss-cascade-layers@6.0.0(postcss@8.5.14)':
+  '@csstools/postcss-cascade-layers@6.0.0(postcss@8.5.25)':
     dependencies:
-      '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.1)
-      postcss: 8.5.14
-      postcss-selector-parser: 7.1.1
+      '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.4)
+      postcss: 8.5.25
+      postcss-selector-parser: 7.1.4
 
-  '@csstools/postcss-color-function-display-p3-linear@2.0.3(postcss@8.5.14)':
+  '@csstools/postcss-color-function-display-p3-linear@2.0.6(postcss@8.5.25)':
     dependencies:
-      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.9(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.14)
-      '@csstools/utilities': 3.0.0(postcss@8.5.14)
-      postcss: 8.5.14
+      '@csstools/postcss-progressive-custom-properties': 5.1.1(postcss@8.5.25)
+      '@csstools/utilities': 3.0.0(postcss@8.5.25)
+      postcss: 8.5.25
 
-  '@csstools/postcss-color-function@5.0.3(postcss@8.5.14)':
+  '@csstools/postcss-color-function@5.0.6(postcss@8.5.25)':
     dependencies:
-      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.9(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.14)
-      '@csstools/utilities': 3.0.0(postcss@8.5.14)
-      postcss: 8.5.14
+      '@csstools/postcss-progressive-custom-properties': 5.1.1(postcss@8.5.25)
+      '@csstools/utilities': 3.0.0(postcss@8.5.25)
+      postcss: 8.5.25
 
-  '@csstools/postcss-color-mix-function@4.0.3(postcss@8.5.14)':
+  '@csstools/postcss-color-mix-function@4.0.6(postcss@8.5.25)':
     dependencies:
-      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.9(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.14)
-      '@csstools/utilities': 3.0.0(postcss@8.5.14)
-      postcss: 8.5.14
+      '@csstools/postcss-progressive-custom-properties': 5.1.1(postcss@8.5.25)
+      '@csstools/utilities': 3.0.0(postcss@8.5.25)
+      postcss: 8.5.25
 
-  '@csstools/postcss-color-mix-variadic-function-arguments@2.0.3(postcss@8.5.14)':
+  '@csstools/postcss-color-mix-variadic-function-arguments@2.0.6(postcss@8.5.25)':
     dependencies:
-      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.9(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.14)
-      '@csstools/utilities': 3.0.0(postcss@8.5.14)
-      postcss: 8.5.14
+      '@csstools/postcss-progressive-custom-properties': 5.1.1(postcss@8.5.25)
+      '@csstools/utilities': 3.0.0(postcss@8.5.25)
+      postcss: 8.5.25
 
-  '@csstools/postcss-content-alt-text@3.0.0(postcss@8.5.14)':
+  '@csstools/postcss-container-rule-prelude-list@1.0.1(postcss@8.5.25)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.14)
-      '@csstools/utilities': 3.0.0(postcss@8.5.14)
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  '@csstools/postcss-contrast-color-function@3.0.3(postcss@8.5.14)':
+  '@csstools/postcss-content-alt-text@3.0.2(postcss@8.5.25)':
     dependencies:
-      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.14)
-      '@csstools/utilities': 3.0.0(postcss@8.5.14)
-      postcss: 8.5.14
+      '@csstools/postcss-progressive-custom-properties': 5.1.1(postcss@8.5.25)
+      '@csstools/utilities': 3.0.0(postcss@8.5.25)
+      postcss: 8.5.25
 
-  '@csstools/postcss-exponential-functions@3.0.2(postcss@8.5.14)':
+  '@csstools/postcss-contrast-color-function@3.0.6(postcss@8.5.25)':
     dependencies:
-      '@csstools/css-calc': 3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.9(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.14
+      '@csstools/postcss-progressive-custom-properties': 5.1.1(postcss@8.5.25)
+      '@csstools/utilities': 3.0.0(postcss@8.5.25)
+      postcss: 8.5.25
 
-  '@csstools/postcss-font-format-keywords@5.0.0(postcss@8.5.14)':
+  '@csstools/postcss-exponential-functions@3.0.3(postcss@8.5.25)':
     dependencies:
-      '@csstools/utilities': 3.0.0(postcss@8.5.14)
-      postcss: 8.5.14
+      '@csstools/css-calc': 3.3.0(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+      postcss: 8.5.25
+
+  '@csstools/postcss-font-format-keywords@5.0.0(postcss@8.5.25)':
+    dependencies:
+      '@csstools/utilities': 3.0.0(postcss@8.5.25)
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-font-width-property@1.0.0(postcss@8.5.14)':
+  '@csstools/postcss-font-width-property@1.0.0(postcss@8.5.25)':
     dependencies:
-      '@csstools/utilities': 3.0.0(postcss@8.5.14)
-      postcss: 8.5.14
+      '@csstools/utilities': 3.0.0(postcss@8.5.25)
+      postcss: 8.5.25
 
-  '@csstools/postcss-gamut-mapping@3.0.3(postcss@8.5.14)':
+  '@csstools/postcss-gamut-mapping@3.0.6(postcss@8.5.25)':
     dependencies:
-      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.9(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  '@csstools/postcss-gradients-interpolation-method@6.0.3(postcss@8.5.14)':
+  '@csstools/postcss-gradients-interpolation-method@6.0.6(postcss@8.5.25)':
     dependencies:
-      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.9(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.14)
-      '@csstools/utilities': 3.0.0(postcss@8.5.14)
-      postcss: 8.5.14
+      '@csstools/postcss-progressive-custom-properties': 5.1.1(postcss@8.5.25)
+      '@csstools/utilities': 3.0.0(postcss@8.5.25)
+      postcss: 8.5.25
 
-  '@csstools/postcss-hwb-function@5.0.3(postcss@8.5.14)':
+  '@csstools/postcss-hwb-function@5.0.6(postcss@8.5.25)':
     dependencies:
-      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.9(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.14)
-      '@csstools/utilities': 3.0.0(postcss@8.5.14)
-      postcss: 8.5.14
+      '@csstools/postcss-progressive-custom-properties': 5.1.1(postcss@8.5.25)
+      '@csstools/utilities': 3.0.0(postcss@8.5.25)
+      postcss: 8.5.25
 
-  '@csstools/postcss-ic-unit@5.0.0(postcss@8.5.14)':
+  '@csstools/postcss-ic-unit@5.0.2(postcss@8.5.25)':
     dependencies:
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.14)
-      '@csstools/utilities': 3.0.0(postcss@8.5.14)
-      postcss: 8.5.14
+      '@csstools/postcss-progressive-custom-properties': 5.1.1(postcss@8.5.25)
+      '@csstools/utilities': 3.0.0(postcss@8.5.25)
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-initial@3.0.0(postcss@8.5.14)':
-    dependencies:
-      postcss: 8.5.14
-
-  '@csstools/postcss-is-pseudo-class@6.0.0(postcss@8.5.14)':
-    dependencies:
-      '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.1)
-      postcss: 8.5.14
-      postcss-selector-parser: 7.1.1
-
-  '@csstools/postcss-light-dark-function@3.0.0(postcss@8.5.14)':
+  '@csstools/postcss-image-function@1.0.1(postcss@8.5.25)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.14)
-      '@csstools/utilities': 3.0.0(postcss@8.5.14)
-      postcss: 8.5.14
+      '@csstools/postcss-progressive-custom-properties': 5.1.1(postcss@8.5.25)
+      '@csstools/utilities': 3.0.0(postcss@8.5.25)
+      postcss: 8.5.25
 
-  '@csstools/postcss-logical-float-and-clear@4.0.0(postcss@8.5.14)':
+  '@csstools/postcss-initial@3.0.0(postcss@8.5.25)':
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  '@csstools/postcss-logical-overflow@3.0.0(postcss@8.5.14)':
+  '@csstools/postcss-is-pseudo-class@6.0.0(postcss@8.5.25)':
     dependencies:
-      postcss: 8.5.14
+      '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.4)
+      postcss: 8.5.25
+      postcss-selector-parser: 7.1.4
 
-  '@csstools/postcss-logical-overscroll-behavior@3.0.0(postcss@8.5.14)':
+  '@csstools/postcss-light-dark-function@3.0.2(postcss@8.5.25)':
     dependencies:
-      postcss: 8.5.14
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+      '@csstools/postcss-progressive-custom-properties': 5.1.1(postcss@8.5.25)
+      '@csstools/utilities': 3.0.0(postcss@8.5.25)
+      postcss: 8.5.25
 
-  '@csstools/postcss-logical-resize@4.0.0(postcss@8.5.14)':
+  '@csstools/postcss-logical-float-and-clear@4.0.0(postcss@8.5.25)':
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
+
+  '@csstools/postcss-logical-overflow@3.0.0(postcss@8.5.25)':
+    dependencies:
+      postcss: 8.5.25
+
+  '@csstools/postcss-logical-overscroll-behavior@3.0.0(postcss@8.5.25)':
+    dependencies:
+      postcss: 8.5.25
+
+  '@csstools/postcss-logical-resize@4.0.0(postcss@8.5.25)':
+    dependencies:
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-logical-viewport-units@4.0.0(postcss@8.5.14)':
+  '@csstools/postcss-logical-viewport-units@4.0.0(postcss@8.5.25)':
     dependencies:
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/utilities': 3.0.0(postcss@8.5.14)
-      postcss: 8.5.14
+      '@csstools/utilities': 3.0.0(postcss@8.5.25)
+      postcss: 8.5.25
 
-  '@csstools/postcss-media-minmax@3.0.2(postcss@8.5.14)':
+  '@csstools/postcss-media-minmax@3.0.3(postcss@8.5.25)':
     dependencies:
-      '@csstools/css-calc': 3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-calc': 3.3.0(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
-      postcss: 8.5.14
+      '@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
+      postcss: 8.5.25
 
-  '@csstools/postcss-media-queries-aspect-ratio-number-values@4.0.0(postcss@8.5.14)':
+  '@csstools/postcss-media-queries-aspect-ratio-number-values@4.0.0(postcss@8.5.25)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
-      postcss: 8.5.14
+      '@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
+      postcss: 8.5.25
 
-  '@csstools/postcss-mixins@1.0.0(postcss@8.5.14)':
+  '@csstools/postcss-mixins@1.0.0(postcss@8.5.25)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  '@csstools/postcss-nested-calc@5.0.0(postcss@8.5.14)':
+  '@csstools/postcss-nested-calc@5.0.0(postcss@8.5.25)':
     dependencies:
-      '@csstools/utilities': 3.0.0(postcss@8.5.14)
-      postcss: 8.5.14
+      '@csstools/utilities': 3.0.0(postcss@8.5.25)
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-normalize-display-values@5.0.1(postcss@8.5.14)':
+  '@csstools/postcss-normalize-display-values@5.0.1(postcss@8.5.25)':
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-oklab-function@5.0.3(postcss@8.5.14)':
+  '@csstools/postcss-oklab-function@5.0.6(postcss@8.5.25)':
     dependencies:
-      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.9(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.14)
-      '@csstools/utilities': 3.0.0(postcss@8.5.14)
-      postcss: 8.5.14
+      '@csstools/postcss-progressive-custom-properties': 5.1.1(postcss@8.5.25)
+      '@csstools/utilities': 3.0.0(postcss@8.5.25)
+      postcss: 8.5.25
 
-  '@csstools/postcss-position-area-property@2.0.0(postcss@8.5.14)':
+  '@csstools/postcss-position-area-property@2.0.0(postcss@8.5.25)':
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  '@csstools/postcss-progressive-custom-properties@5.0.0(postcss@8.5.14)':
+  '@csstools/postcss-progressive-custom-properties@5.1.1(postcss@8.5.25)':
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-property-rule-prelude-list@2.0.0(postcss@8.5.14)':
+  '@csstools/postcss-property-rule-prelude-list@2.0.0(postcss@8.5.25)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  '@csstools/postcss-random-function@3.0.2(postcss@8.5.14)':
+  '@csstools/postcss-random-function@3.0.3(postcss@8.5.25)':
     dependencies:
-      '@csstools/css-calc': 3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-calc': 3.3.0(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  '@csstools/postcss-relative-color-syntax@4.0.3(postcss@8.5.14)':
+  '@csstools/postcss-relative-color-syntax@4.0.6(postcss@8.5.25)':
     dependencies:
-      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.9(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.14)
-      '@csstools/utilities': 3.0.0(postcss@8.5.14)
-      postcss: 8.5.14
+      '@csstools/postcss-progressive-custom-properties': 5.1.1(postcss@8.5.25)
+      '@csstools/utilities': 3.0.0(postcss@8.5.25)
+      postcss: 8.5.25
 
-  '@csstools/postcss-scope-pseudo-class@5.0.0(postcss@8.5.14)':
+  '@csstools/postcss-scope-pseudo-class@5.0.0(postcss@8.5.25)':
     dependencies:
-      postcss: 8.5.14
-      postcss-selector-parser: 7.1.1
+      postcss: 8.5.25
+      postcss-selector-parser: 7.1.4
 
-  '@csstools/postcss-sign-functions@2.0.2(postcss@8.5.14)':
+  '@csstools/postcss-sign-functions@2.0.3(postcss@8.5.25)':
     dependencies:
-      '@csstools/css-calc': 3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-calc': 3.3.0(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  '@csstools/postcss-stepped-value-functions@5.0.2(postcss@8.5.14)':
+  '@csstools/postcss-stepped-value-functions@5.0.3(postcss@8.5.25)':
     dependencies:
-      '@csstools/css-calc': 3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-calc': 3.3.0(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  '@csstools/postcss-syntax-descriptor-syntax-production@2.0.0(postcss@8.5.14)':
+  '@csstools/postcss-syntax-descriptor-syntax-production@2.0.0(postcss@8.5.25)':
     dependencies:
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  '@csstools/postcss-system-ui-font-family@2.0.0(postcss@8.5.14)':
+  '@csstools/postcss-system-ui-font-family@2.0.0(postcss@8.5.25)':
     dependencies:
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  '@csstools/postcss-text-decoration-shorthand@5.0.3(postcss@8.5.14)':
+  '@csstools/postcss-text-decoration-shorthand@5.0.4(postcss@8.5.25)':
     dependencies:
-      '@csstools/color-helpers': 6.0.2
-      postcss: 8.5.14
+      '@csstools/color-helpers': 6.1.0
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  '@csstools/postcss-trigonometric-functions@5.0.2(postcss@8.5.14)':
+  '@csstools/postcss-trigonometric-functions@5.0.3(postcss@8.5.25)':
     dependencies:
-      '@csstools/css-calc': 3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-calc': 3.3.0(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  '@csstools/postcss-unset-value@5.0.0(postcss@8.5.14)':
+  '@csstools/postcss-unset-value@5.0.0(postcss@8.5.25)':
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  '@csstools/selector-resolve-nested@4.0.0(postcss-selector-parser@7.1.1)':
+  '@csstools/selector-resolve-nested@4.0.1(postcss-selector-parser@7.1.4)':
     dependencies:
-      postcss-selector-parser: 7.1.1
+      postcss-selector-parser: 7.1.4
 
-  '@csstools/selector-specificity@6.0.0(postcss-selector-parser@7.1.1)':
+  '@csstools/selector-specificity@6.0.0(postcss-selector-parser@7.1.4)':
     dependencies:
-      postcss-selector-parser: 7.1.1
+      postcss-selector-parser: 7.1.4
 
-  '@csstools/utilities@3.0.0(postcss@8.5.14)':
+  '@csstools/utilities@3.0.0(postcss@8.5.25)':
     dependencies:
-      postcss: 8.5.14
-
-  '@develar/schema-utils@2.6.5':
-    dependencies:
-      ajv: 6.14.0
-      ajv-keywords: 3.5.2(ajv@6.14.0)
+      postcss: 8.5.25
 
   '@discoveryjs/json-ext@0.6.3': {}
 
-  '@discoveryjs/json-ext@1.0.0': {}
+  '@discoveryjs/json-ext@1.1.0': {}
+
+  '@dnd-kit/abstract@0.5.0':
+    dependencies:
+      '@dnd-kit/geometry': 0.5.0
+      '@dnd-kit/state': 0.5.0
+      tslib: 2.8.1
+
+  '@dnd-kit/collision@0.5.0':
+    dependencies:
+      '@dnd-kit/abstract': 0.5.0
+      '@dnd-kit/geometry': 0.5.0
+      tslib: 2.8.1
+
+  '@dnd-kit/dom@0.5.0':
+    dependencies:
+      '@dnd-kit/abstract': 0.5.0
+      '@dnd-kit/collision': 0.5.0
+      '@dnd-kit/geometry': 0.5.0
+      '@dnd-kit/state': 0.5.0
+      tslib: 2.8.1
+
+  '@dnd-kit/geometry@0.5.0':
+    dependencies:
+      '@dnd-kit/state': 0.5.0
+      tslib: 2.8.1
+
+  '@dnd-kit/react@0.5.0(react-dom@19.2.8)(react@19.2.8)':
+    dependencies:
+      '@dnd-kit/abstract': 0.5.0
+      '@dnd-kit/dom': 0.5.0
+      '@dnd-kit/state': 0.5.0
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      tslib: 2.8.1
+
+  '@dnd-kit/state@0.5.0':
+    dependencies:
+      '@preact/signals-core': 1.14.2
+      tslib: 2.8.1
 
   '@docsearch/css@3.8.2': {}
 
-  '@docsearch/js@3.8.2(@algolia/client-search@5.50.0)(@types/react@19.2.14)(search-insights@2.17.3)':
+  '@docsearch/js@3.8.2(@algolia/client-search@5.50.0)(@types/react@19.2.18)(react@19.2.8)(search-insights@2.17.3)':
     dependencies:
-      '@docsearch/react': 3.8.2(@algolia/client-search@5.50.0)(@types/react@19.2.14)(search-insights@2.17.3)
-      preact: 10.28.3
+      '@docsearch/react': 3.8.2(@algolia/client-search@5.50.0)(@types/react@19.2.18)(react@19.2.8)(search-insights@2.17.3)
+      preact: 10.29.3
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/react'
@@ -14946,29 +15476,31 @@ snapshots:
       - react-dom
       - search-insights
 
-  '@docsearch/react@3.8.2(@algolia/client-search@5.50.0)(@types/react@19.2.14)(search-insights@2.17.3)':
+  '@docsearch/react@3.8.2(@algolia/client-search@5.50.0)(@types/react@19.2.18)(react@19.2.8)(search-insights@2.17.3)':
     dependencies:
       '@algolia/autocomplete-core': 1.17.7(@algolia/client-search@5.50.0)(algoliasearch@5.50.0)(search-insights@2.17.3)
       '@algolia/autocomplete-preset-algolia': 1.17.7(@algolia/client-search@5.50.0)(algoliasearch@5.50.0)
       '@docsearch/css': 3.8.2
       algoliasearch: 5.50.0
     optionalDependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
+      react: 19.2.8
       search-insights: 2.17.3
     transitivePeerDependencies:
       - '@algolia/client-search'
 
+  '@electron-internal/extract-zip@1.0.3': {}
+
   '@electron/asar@3.4.1':
     dependencies:
       commander: 5.1.0
       glob: 7.2.3
       minimatch: 3.1.5
 
-  '@electron/asar@4.2.0':
+  '@electron/asar@4.2.1':
     dependencies:
-      commander: 13.1.0
       glob: 13.0.6
-      minimatch: 10.2.5
+      minimatch: 10.2.6
 
   '@electron/fuses@1.8.0':
     dependencies:
@@ -14976,47 +15508,47 @@ snapshots:
       fs-extra: 9.1.0
       minimist: 1.2.8
 
-  '@electron/fuses@2.1.1': {}
+  '@electron/fuses@2.1.3': {}
 
-  '@electron/get@3.1.0':
+  '@electron/get@3.1.0(supports-color@10.2.2)':
     dependencies:
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@10.2.2)
       env-paths: 2.2.1
       fs-extra: 8.1.0
       got: 11.8.6
       progress: 2.0.3
       semver: 6.3.1
-      sumchecker: 3.0.1
+      sumchecker: 3.0.1(supports-color@10.2.2)
     optionalDependencies:
       global-agent: 3.0.0
     transitivePeerDependencies:
       - supports-color
 
-  '@electron/get@5.0.0':
+  '@electron/get@5.0.0(supports-color@10.2.2)':
     dependencies:
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@10.2.2)
       env-paths: 3.0.0
       graceful-fs: 4.2.11
       progress: 2.0.3
-      semver: 7.7.4
-      sumchecker: 3.0.1
+      semver: 7.8.5
+      sumchecker: 3.0.1(supports-color@10.2.2)
     optionalDependencies:
-      undici: 7.25.0
+      undici: 7.29.0
     transitivePeerDependencies:
       - supports-color
 
-  '@electron/notarize@2.5.0':
+  '@electron/notarize@2.5.0(supports-color@10.2.2)':
     dependencies:
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@10.2.2)
       fs-extra: 9.1.0
       promise-retry: 2.0.1
     transitivePeerDependencies:
       - supports-color
 
-  '@electron/osx-sign@1.3.3':
+  '@electron/osx-sign@1.3.3(supports-color@10.2.2)':
     dependencies:
       compare-version: 0.1.2
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@10.2.2)
       fs-extra: 10.1.0
       isbinaryfile: 4.0.10
       minimist: 1.2.8
@@ -15024,41 +15556,34 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@electron/rebuild@4.0.3':
+  '@electron/rebuild@4.0.4(supports-color@10.2.2)':
     dependencies:
       '@malept/cross-spawn-promise': 2.0.0
-      debug: 4.4.3
-      detect-libc: 2.1.2
-      got: 11.8.6
-      graceful-fs: 4.2.11
-      node-abi: 4.29.0
+      debug: 4.4.3(supports-color@10.2.2)
+      node-abi: 4.33.0
       node-api-version: 0.2.1
-      node-gyp: 11.5.0
-      ora: 5.3.0
-      read-binary-file-arch: 1.0.6
-      semver: 7.7.4
-      tar: 7.5.13
-      yargs: 17.7.2
+      node-gyp: 12.2.0(supports-color@10.2.2)
+      read-binary-file-arch: 1.0.6(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@electron/universal@2.0.3':
+  '@electron/universal@2.0.3(supports-color@10.2.2)':
     dependencies:
       '@electron/asar': 3.4.1
       '@malept/cross-spawn-promise': 2.0.0
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@10.2.2)
       dir-compare: 4.2.0
-      fs-extra: 11.3.5
+      fs-extra: 11.4.0
       minimatch: 9.0.9
       plist: 3.1.0(patch_hash=7a3c35087f0ab2a8efbac9e2899990f07d61e2b3e41d8d962ef0bdb0786e1af7)
     transitivePeerDependencies:
       - supports-color
 
-  '@electron/windows-sign@1.2.2':
+  '@electron/windows-sign@1.2.2(supports-color@10.2.2)':
     dependencies:
       cross-dirname: 0.1.0
-      debug: 4.4.3
-      fs-extra: 11.3.5
+      debug: 4.4.3(supports-color@10.2.2)
+      fs-extra: 11.4.0
       minimist: 1.2.8
       postject: 1.0.0-alpha.6
     transitivePeerDependencies:
@@ -15069,20 +15594,42 @@ snapshots:
     dependencies:
       '@emnapi/wasi-threads': 1.2.1
       tslib: 2.8.1
+    optional: true
+
+  '@emnapi/core@1.11.2':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.2
+      tslib: 2.8.1
 
   '@emnapi/core@1.4.5':
     dependencies:
       '@emnapi/wasi-threads': 1.0.4
       tslib: 2.8.1
 
+  '@emnapi/core@1.9.2':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.1
+      tslib: 2.8.1
+    optional: true
+
   '@emnapi/runtime@1.10.0':
     dependencies:
       tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.11.2':
+    dependencies:
+      tslib: 2.8.1
 
   '@emnapi/runtime@1.4.5':
     dependencies:
       tslib: 2.8.1
 
+  '@emnapi/runtime@1.9.2':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
   '@emnapi/wasi-threads@1.0.4':
     dependencies:
       tslib: 2.8.1
@@ -15090,6 +15637,17 @@ snapshots:
   '@emnapi/wasi-threads@1.2.1':
     dependencies:
       tslib: 2.8.1
+    optional: true
+
+  '@emnapi/wasi-threads@1.2.2':
+    dependencies:
+      tslib: 2.8.1
+
+  '@emotion/is-prop-valid@1.4.0':
+    dependencies:
+      '@emotion/memoize': 0.9.0
+
+  '@emotion/memoize@0.9.0': {}
 
   '@esbuild/aix-ppc64@0.27.4':
     optional: true
@@ -15169,22 +15727,22 @@ snapshots:
   '@esbuild/win32-x64@0.27.4':
     optional: true
 
-  '@eslint-community/eslint-utils@4.9.1(eslint@8.57.1)':
+  '@eslint-community/eslint-utils@4.10.1(eslint@8.57.1)':
     dependencies:
-      eslint: 8.57.1
+      eslint: 8.57.1(supports-color@7.2.0)
       eslint-visitor-keys: 3.4.3
 
   '@eslint-community/regexpp@4.12.2': {}
 
-  '@eslint/eslintrc@2.1.4':
+  '@eslint/eslintrc@2.1.4(supports-color@7.2.0)':
     dependencies:
-      ajv: 6.14.0
-      debug: 4.4.3
+      ajv: 6.15.0
+      debug: 4.4.3(supports-color@7.2.0)
       espree: 9.6.1
       globals: 13.24.0
       ignore: 5.3.2
       import-fresh: 3.3.1
-      js-yaml: 4.1.1
+      js-yaml: 4.3.1
       minimatch: 3.1.5
       strip-json-comments: 3.1.1
     transitivePeerDependencies:
@@ -15192,77 +15750,67 @@ snapshots:
 
   '@eslint/js@8.57.1': {}
 
-  '@fastify/otel@0.18.0(@opentelemetry/api@1.9.1)':
+  '@fetch-mock/jest@0.2.20(@jest/globals@30.4.1)(jest@30.4.2)':
     dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/core': 2.7.1(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation': 0.212.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/semantic-conventions': 1.40.0
-      minimatch: 10.2.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@fetch-mock/jest@0.2.20(@jest/globals@30.3.0)(jest@30.3.0(@types/node@18.19.130)(babel-plugin-macros@3.1.0))':
-    dependencies:
-      '@jest/globals': 30.3.0
+      '@jest/globals': 30.4.1(supports-color@10.2.2)
       fetch-mock: 12.6.0
-      jest: 30.3.0(@types/node@18.19.130)(babel-plugin-macros@3.1.0)
+      jest: 30.4.2(@types/node@25.9.3)(babel-plugin-macros@3.1.0)(supports-color@10.2.2)
 
-  '@fetch-mock/vitest@0.2.18(vitest@4.1.5)':
+  '@fetch-mock/vitest@0.2.18(vitest@4.1.10)':
     dependencies:
       fetch-mock: 12.6.0
-      vitest: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.5)(@vitest/coverage-v8@4.1.5)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))
+      vitest: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(happy-dom@20.11.1)(jsdom@26.1.0)(vite@8.2.0)
 
   '@figspec/components@2.1.0': {}
 
-  '@figspec/react@2.0.1(@types/react@19.2.14)(react@19.2.6)':
+  '@figspec/react@2.0.1(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
       '@figspec/components': 2.1.0
-      '@lit-labs/react': 2.1.3(@types/react@19.2.14)
-      react: 19.2.6
+      '@lit-labs/react': 2.1.3(@types/react@19.2.18)
+      react: 19.2.8
     transitivePeerDependencies:
       - '@types/react'
 
-  '@floating-ui/core@1.7.4':
+  '@floating-ui/core@1.8.0':
     dependencies:
-      '@floating-ui/utils': 0.2.10
+      '@floating-ui/utils': 0.2.12
 
-  '@floating-ui/dom@1.7.5':
+  '@floating-ui/dom@1.8.0':
     dependencies:
-      '@floating-ui/core': 1.7.4
-      '@floating-ui/utils': 0.2.10
+      '@floating-ui/core': 1.8.0
+      '@floating-ui/utils': 0.2.12
 
-  '@floating-ui/react-dom@2.1.7(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@floating-ui/react-dom@2.1.9(react-dom@19.2.8)(react@19.2.8)':
     dependencies:
-      '@floating-ui/dom': 1.7.5
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
+      '@floating-ui/dom': 1.8.0
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
 
-  '@floating-ui/react@0.27.17(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@floating-ui/react@0.27.17(react-dom@19.2.8)(react@19.2.8)':
     dependencies:
-      '@floating-ui/react-dom': 2.1.7(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@floating-ui/utils': 0.2.10
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
+      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8)(react@19.2.8)
+      '@floating-ui/utils': 0.2.12
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
       tabbable: 6.4.0
 
-  '@floating-ui/utils@0.2.10': {}
+  '@floating-ui/utils@0.2.12': {}
 
-  '@fontsource/fira-code@5.2.7': {}
+  '@fontsource/fira-code@5.3.0': {}
 
   '@fontsource/inconsolata@5.2.8': {}
 
-  '@fontsource/inter@5.2.8': {}
+  '@fontsource/inter@5.3.0': {}
 
-  '@formatjs/fast-memoize@3.1.3': {}
+  '@formatjs/fast-memoize@3.1.7': {}
 
-  '@formatjs/intl-localematcher@0.8.5':
+  '@formatjs/intl-localematcher@0.8.13':
     dependencies:
-      '@formatjs/fast-memoize': 3.1.3
+      '@formatjs/fast-memoize': 3.1.7
 
-  '@formatjs/intl-segmenter@12.2.4':
+  '@formatjs/intl-segmenter@12.2.13':
     dependencies:
-      '@formatjs/intl-localematcher': 0.8.5
+      '@formatjs/intl-localematcher': 0.8.13
 
   '@gar/promise-retry@1.0.3': {}
 
@@ -15274,24 +15822,24 @@ snapshots:
       '@shikijs/types': 3.23.0
       '@shikijs/vscode-textmate': 10.0.2
 
-  '@grpc/grpc-js@1.14.3':
+  '@grpc/grpc-js@1.14.4':
     dependencies:
-      '@grpc/proto-loader': 0.8.0
+      '@grpc/proto-loader': 0.8.1
       '@js-sdsl/ordered-map': 4.4.2
 
   '@grpc/proto-loader@0.7.15':
     dependencies:
       lodash.camelcase: 4.3.0
       long: 5.3.2
-      protobufjs: 7.5.5
-      yargs: 17.7.2
+      protobufjs: 7.6.5
+      yargs: 17.7.3
 
-  '@grpc/proto-loader@0.8.0':
+  '@grpc/proto-loader@0.8.1':
     dependencies:
       lodash.camelcase: 4.3.0
       long: 5.3.2
-      protobufjs: 7.5.5
-      yargs: 17.7.2
+      protobufjs: 7.6.5
+      yargs: 17.7.3
 
   '@hapi/address@5.1.1':
     dependencies:
@@ -15303,16 +15851,16 @@ snapshots:
 
   '@hapi/pinpoint@2.0.1': {}
 
-  '@hapi/tlds@1.1.6': {}
+  '@hapi/tlds@1.1.7': {}
 
   '@hapi/topo@6.0.2':
     dependencies:
       '@hapi/hoek': 11.0.7
 
-  '@humanwhocodes/config-array@0.13.0':
+  '@humanwhocodes/config-array@0.13.0(supports-color@7.2.0)':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@7.2.0)
       minimatch: 3.1.5
     transitivePeerDependencies:
       - supports-color
@@ -15327,11 +15875,11 @@ snapshots:
 
   '@iconify/types@2.0.0': {}
 
-  '@iconify/utils@3.1.0':
+  '@iconify/utils@3.1.3':
     dependencies:
       '@antfu/install-pkg': 1.1.0
       '@iconify/types': 2.0.0
-      mlly: 1.8.2
+      import-meta-resolve: 4.2.0
 
   '@isaacs/cliui@8.0.2':
     dependencies:
@@ -15351,48 +15899,49 @@ snapshots:
       camelcase: 5.3.1
       find-up: 4.1.0
       get-package-type: 0.1.0
-      js-yaml: 3.14.2
+      js-yaml: 3.15.1
       resolve-from: 5.0.0
 
   '@istanbuljs/schema@0.1.6': {}
 
-  '@jest/console@30.3.0':
+  '@jest/console@30.4.1':
     dependencies:
-      '@jest/types': 30.3.0
-      '@types/node': 18.19.130
+      '@jest/types': 30.4.1
+      '@types/node': 25.9.3
       chalk: 4.1.2
-      jest-message-util: 30.3.0
-      jest-util: 30.3.0
+      jest-message-util: 30.4.1
+      jest-util: 30.4.1
       slash: 3.0.0
 
-  '@jest/core@30.3.0(babel-plugin-macros@3.1.0)':
+  '@jest/core@30.4.2(babel-plugin-macros@3.1.0)(supports-color@10.2.2)':
     dependencies:
-      '@jest/console': 30.3.0
-      '@jest/pattern': 30.0.1
-      '@jest/reporters': 30.3.0
-      '@jest/test-result': 30.3.0
-      '@jest/transform': 30.3.0
-      '@jest/types': 30.3.0
-      '@types/node': 18.19.130
+      '@jest/console': 30.4.1
+      '@jest/pattern': 30.4.0
+      '@jest/reporters': 30.4.1(supports-color@10.2.2)
+      '@jest/test-result': 30.4.1
+      '@jest/transform': 30.4.1(supports-color@10.2.2)
+      '@jest/types': 30.4.1
+      '@types/node': 25.9.3
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       ci-info: 4.4.0
       exit-x: 0.2.2
+      fast-json-stable-stringify: 2.1.0
       graceful-fs: 4.2.11
-      jest-changed-files: 30.3.0
-      jest-config: 30.3.0(@types/node@18.19.130)(babel-plugin-macros@3.1.0)
-      jest-haste-map: 30.3.0
-      jest-message-util: 30.3.0
-      jest-regex-util: 30.0.1
-      jest-resolve: 30.3.0
-      jest-resolve-dependencies: 30.3.0
-      jest-runner: 30.3.0
-      jest-runtime: 30.3.0
-      jest-snapshot: 30.3.0
-      jest-util: 30.3.0
-      jest-validate: 30.3.0
-      jest-watcher: 30.3.0
-      pretty-format: 30.3.0
+      jest-changed-files: 30.4.1
+      jest-config: 30.4.2(@types/node@25.9.3)(babel-plugin-macros@3.1.0)(supports-color@10.2.2)
+      jest-haste-map: 30.4.1
+      jest-message-util: 30.4.1
+      jest-regex-util: 30.4.0
+      jest-resolve: 30.4.1
+      jest-resolve-dependencies: 30.4.2(supports-color@10.2.2)
+      jest-runner: 30.4.2(supports-color@10.2.2)
+      jest-runtime: 30.4.2(supports-color@10.2.2)
+      jest-snapshot: 30.4.1(supports-color@10.2.2)
+      jest-util: 30.4.1
+      jest-validate: 30.4.1
+      jest-watcher: 30.4.1
+      pretty-format: 30.4.1
       slash: 3.0.0
     transitivePeerDependencies:
       - babel-plugin-macros
@@ -15402,103 +15951,97 @@ snapshots:
 
   '@jest/diff-sequences@30.0.1': {}
 
-  '@jest/diff-sequences@30.3.0': {}
-
   '@jest/diff-sequences@30.4.0': {}
 
-  '@jest/environment-jsdom-abstract@30.3.0(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))':
+  '@jest/environment-jsdom-abstract@30.4.1(jsdom@26.1.0)':
     dependencies:
-      '@jest/environment': 30.3.0
-      '@jest/fake-timers': 30.3.0
-      '@jest/types': 30.3.0
+      '@jest/environment': 30.4.1
+      '@jest/fake-timers': 30.4.1
+      '@jest/types': 30.4.1
       '@types/jsdom': 21.1.7
-      '@types/node': 18.19.130
-      jest-mock: 30.3.0
-      jest-util: 30.3.0
-      jsdom: 26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f)
+      '@types/node': 25.9.3
+      jest-mock: 30.4.1
+      jest-util: 30.4.1
+      jsdom: 26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f)(supports-color@10.2.2)
 
-  '@jest/environment@30.3.0':
+  '@jest/environment@30.4.1':
     dependencies:
-      '@jest/fake-timers': 30.3.0
-      '@jest/types': 30.3.0
-      '@types/node': 18.19.130
-      jest-mock: 30.3.0
+      '@jest/fake-timers': 30.4.1
+      '@jest/types': 30.4.1
+      '@types/node': 25.9.3
+      jest-mock: 30.4.1
 
-  '@jest/expect-utils@30.3.0':
+  '@jest/expect-utils@30.4.1':
     dependencies:
       '@jest/get-type': 30.1.0
 
-  '@jest/expect@30.3.0':
+  '@jest/expect@30.4.1(supports-color@10.2.2)':
     dependencies:
-      expect: 30.3.0
-      jest-snapshot: 30.3.0
+      expect: 30.4.1
+      jest-snapshot: 30.4.1(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@jest/fake-timers@30.3.0':
+  '@jest/fake-timers@30.4.1':
     dependencies:
-      '@jest/types': 30.3.0
-      '@sinonjs/fake-timers': 15.1.1
-      '@types/node': 18.19.130
-      jest-message-util: 30.3.0
-      jest-mock: 30.3.0
-      jest-util: 30.3.0
+      '@jest/types': 30.4.1
+      '@sinonjs/fake-timers': 15.4.0
+      '@types/node': 25.9.3
+      jest-message-util: 30.4.1
+      jest-mock: 30.4.1
+      jest-util: 30.4.1
 
   '@jest/get-type@30.1.0': {}
 
-  '@jest/globals@30.3.0':
+  '@jest/globals@30.4.1(supports-color@10.2.2)':
     dependencies:
-      '@jest/environment': 30.3.0
-      '@jest/expect': 30.3.0
-      '@jest/types': 30.3.0
-      jest-mock: 30.3.0
+      '@jest/environment': 30.4.1
+      '@jest/expect': 30.4.1(supports-color@10.2.2)
+      '@jest/types': 30.4.1
+      jest-mock: 30.4.1
     transitivePeerDependencies:
       - supports-color
 
-  '@jest/pattern@30.0.1':
+  '@jest/pattern@30.4.0':
     dependencies:
-      '@types/node': 18.19.130
-      jest-regex-util: 30.0.1
+      '@types/node': 25.9.3
+      jest-regex-util: 30.4.0
 
-  '@jest/reporters@30.3.0':
+  '@jest/reporters@30.4.1(supports-color@10.2.2)':
     dependencies:
       '@bcoe/v8-coverage': 0.2.3
-      '@jest/console': 30.3.0
-      '@jest/test-result': 30.3.0
-      '@jest/transform': 30.3.0
-      '@jest/types': 30.3.0
+      '@jest/console': 30.4.1
+      '@jest/test-result': 30.4.1
+      '@jest/transform': 30.4.1(supports-color@10.2.2)
+      '@jest/types': 30.4.1
       '@jridgewell/trace-mapping': 0.3.31
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
       chalk: 4.1.2
       collect-v8-coverage: 1.0.3
       exit-x: 0.2.2
       glob: 10.5.0
       graceful-fs: 4.2.11
       istanbul-lib-coverage: 3.2.2
-      istanbul-lib-instrument: 6.0.3
+      istanbul-lib-instrument: 6.0.3(supports-color@10.2.2)
       istanbul-lib-report: 3.0.1
-      istanbul-lib-source-maps: 5.0.6
+      istanbul-lib-source-maps: 5.0.6(supports-color@10.2.2)
       istanbul-reports: 3.2.0
-      jest-message-util: 30.3.0
-      jest-util: 30.3.0
-      jest-worker: 30.3.0
+      jest-message-util: 30.4.1
+      jest-util: 30.4.1
+      jest-worker: 30.4.1
       slash: 3.0.0
       string-length: 4.0.2
       v8-to-istanbul: 9.3.0
     transitivePeerDependencies:
       - supports-color
 
-  '@jest/schemas@30.0.5':
-    dependencies:
-      '@sinclair/typebox': 0.34.49
-
   '@jest/schemas@30.4.1':
     dependencies:
       '@sinclair/typebox': 0.34.49
 
-  '@jest/snapshot-utils@30.3.0':
+  '@jest/snapshot-utils@30.4.1':
     dependencies:
-      '@jest/types': 30.3.0
+      '@jest/types': 30.4.1
       chalk: 4.1.2
       graceful-fs: 4.2.11
       natural-compare: 1.4.0
@@ -15509,56 +16052,56 @@ snapshots:
       callsites: 3.1.0
       graceful-fs: 4.2.11
 
-  '@jest/test-result@30.3.0':
+  '@jest/test-result@30.4.1':
     dependencies:
-      '@jest/console': 30.3.0
-      '@jest/types': 30.3.0
+      '@jest/console': 30.4.1
+      '@jest/types': 30.4.1
       '@types/istanbul-lib-coverage': 2.0.6
       collect-v8-coverage: 1.0.3
 
-  '@jest/test-sequencer@30.3.0':
+  '@jest/test-sequencer@30.4.1':
     dependencies:
-      '@jest/test-result': 30.3.0
+      '@jest/test-result': 30.4.1
       graceful-fs: 4.2.11
-      jest-haste-map: 30.3.0
+      jest-haste-map: 30.4.1
       slash: 3.0.0
 
-  '@jest/transform@30.3.0':
+  '@jest/transform@30.4.1(supports-color@10.2.2)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@jest/types': 30.3.0
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@jest/types': 30.4.1
       '@jridgewell/trace-mapping': 0.3.31
-      babel-plugin-istanbul: 7.0.1
+      babel-plugin-istanbul: 7.0.1(supports-color@10.2.2)
       chalk: 4.1.2
       convert-source-map: 2.0.0
       fast-json-stable-stringify: 2.1.0
       graceful-fs: 4.2.11
-      jest-haste-map: 30.3.0
-      jest-regex-util: 30.0.1
-      jest-util: 30.3.0
+      jest-haste-map: 30.4.1
+      jest-regex-util: 30.4.0
+      jest-util: 30.4.1
       pirates: 4.0.7
       slash: 3.0.0
       write-file-atomic: 5.0.1
     transitivePeerDependencies:
       - supports-color
 
-  '@jest/types@30.3.0':
+  '@jest/types@30.4.1':
     dependencies:
-      '@jest/pattern': 30.0.1
-      '@jest/schemas': 30.0.5
+      '@jest/pattern': 30.4.0
+      '@jest/schemas': 30.4.1
       '@types/istanbul-lib-coverage': 2.0.6
       '@types/istanbul-reports': 3.0.4
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
       '@types/yargs': 17.0.35
       chalk: 4.1.2
 
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0(typescript@6.0.3)(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))':
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0(@typescript/typescript6@6.0.2)(vite@8.2.0)':
     dependencies:
       glob: 13.0.6
-      react-docgen-typescript: 2.4.0(typescript@6.0.3)
-      vite: 8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4)
+      react-docgen-typescript: 2.4.0(@typescript/typescript6@6.0.2)
+      vite: 8.2.0(@types/node@25.9.3)(esbuild@0.27.4)(jiti@2.7.0)(sugarss@5.0.1)(terser@5.49.0)(yaml@2.9.0)
     optionalDependencies:
-      typescript: 6.0.3
+      typescript: '@typescript/typescript6@6.0.2'
 
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
@@ -15590,7 +16133,7 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@jsonjoy.com/base64@17.65.0(tslib@2.8.1)':
+  '@jsonjoy.com/base64@17.67.0(tslib@2.8.1)':
     dependencies:
       tslib: 2.8.1
 
@@ -15598,7 +16141,7 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@jsonjoy.com/buffers@17.65.0(tslib@2.8.1)':
+  '@jsonjoy.com/buffers@17.67.0(tslib@2.8.1)':
     dependencies:
       tslib: 2.8.1
 
@@ -15606,64 +16149,65 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@jsonjoy.com/codegen@17.65.0(tslib@2.8.1)':
+  '@jsonjoy.com/codegen@17.67.0(tslib@2.8.1)':
     dependencies:
       tslib: 2.8.1
 
-  '@jsonjoy.com/fs-core@4.57.2(tslib@2.8.1)':
+  '@jsonjoy.com/fs-core@4.64.0(tslib@2.8.1)':
     dependencies:
-      '@jsonjoy.com/fs-node-builtins': 4.57.2(tslib@2.8.1)
-      '@jsonjoy.com/fs-node-utils': 4.57.2(tslib@2.8.1)
-      thingies: 2.5.0(tslib@2.8.1)
+      '@jsonjoy.com/fs-node-builtins': 4.64.0(tslib@2.8.1)
+      '@jsonjoy.com/fs-node-utils': 4.64.0(tslib@2.8.1)
+      thingies: 2.6.0(tslib@2.8.1)
       tslib: 2.8.1
 
-  '@jsonjoy.com/fs-fsa@4.57.2(tslib@2.8.1)':
+  '@jsonjoy.com/fs-fsa@4.64.0(tslib@2.8.1)':
     dependencies:
-      '@jsonjoy.com/fs-core': 4.57.2(tslib@2.8.1)
-      '@jsonjoy.com/fs-node-builtins': 4.57.2(tslib@2.8.1)
-      '@jsonjoy.com/fs-node-utils': 4.57.2(tslib@2.8.1)
-      thingies: 2.5.0(tslib@2.8.1)
+      '@jsonjoy.com/fs-core': 4.64.0(tslib@2.8.1)
+      '@jsonjoy.com/fs-node-builtins': 4.64.0(tslib@2.8.1)
+      '@jsonjoy.com/fs-node-utils': 4.64.0(tslib@2.8.1)
+      thingies: 2.6.0(tslib@2.8.1)
       tslib: 2.8.1
 
-  '@jsonjoy.com/fs-node-builtins@4.57.2(tslib@2.8.1)':
+  '@jsonjoy.com/fs-node-builtins@4.64.0(tslib@2.8.1)':
     dependencies:
       tslib: 2.8.1
 
-  '@jsonjoy.com/fs-node-to-fsa@4.57.2(tslib@2.8.1)':
+  '@jsonjoy.com/fs-node-to-fsa@4.64.0(tslib@2.8.1)':
     dependencies:
-      '@jsonjoy.com/fs-fsa': 4.57.2(tslib@2.8.1)
-      '@jsonjoy.com/fs-node-builtins': 4.57.2(tslib@2.8.1)
-      '@jsonjoy.com/fs-node-utils': 4.57.2(tslib@2.8.1)
+      '@jsonjoy.com/fs-fsa': 4.64.0(tslib@2.8.1)
+      '@jsonjoy.com/fs-node-builtins': 4.64.0(tslib@2.8.1)
+      '@jsonjoy.com/fs-node-utils': 4.64.0(tslib@2.8.1)
       tslib: 2.8.1
 
-  '@jsonjoy.com/fs-node-utils@4.57.2(tslib@2.8.1)':
+  '@jsonjoy.com/fs-node-utils@4.64.0(tslib@2.8.1)':
     dependencies:
-      '@jsonjoy.com/fs-node-builtins': 4.57.2(tslib@2.8.1)
-      tslib: 2.8.1
-
-  '@jsonjoy.com/fs-node@4.57.2(tslib@2.8.1)':
-    dependencies:
-      '@jsonjoy.com/fs-core': 4.57.2(tslib@2.8.1)
-      '@jsonjoy.com/fs-node-builtins': 4.57.2(tslib@2.8.1)
-      '@jsonjoy.com/fs-node-utils': 4.57.2(tslib@2.8.1)
-      '@jsonjoy.com/fs-print': 4.57.2(tslib@2.8.1)
-      '@jsonjoy.com/fs-snapshot': 4.57.2(tslib@2.8.1)
+      '@jsonjoy.com/fs-node-builtins': 4.64.0(tslib@2.8.1)
       glob-to-regex.js: 1.2.0(tslib@2.8.1)
-      thingies: 2.5.0(tslib@2.8.1)
       tslib: 2.8.1
 
-  '@jsonjoy.com/fs-print@4.57.2(tslib@2.8.1)':
+  '@jsonjoy.com/fs-node@4.64.0(tslib@2.8.1)':
     dependencies:
-      '@jsonjoy.com/fs-node-utils': 4.57.2(tslib@2.8.1)
+      '@jsonjoy.com/fs-core': 4.64.0(tslib@2.8.1)
+      '@jsonjoy.com/fs-node-builtins': 4.64.0(tslib@2.8.1)
+      '@jsonjoy.com/fs-node-utils': 4.64.0(tslib@2.8.1)
+      '@jsonjoy.com/fs-print': 4.64.0(tslib@2.8.1)
+      '@jsonjoy.com/fs-snapshot': 4.64.0(tslib@2.8.1)
+      glob-to-regex.js: 1.2.0(tslib@2.8.1)
+      thingies: 2.6.0(tslib@2.8.1)
+      tslib: 2.8.1
+
+  '@jsonjoy.com/fs-print@4.64.0(tslib@2.8.1)':
+    dependencies:
+      '@jsonjoy.com/fs-node-utils': 4.64.0(tslib@2.8.1)
       tree-dump: 1.1.0(tslib@2.8.1)
       tslib: 2.8.1
 
-  '@jsonjoy.com/fs-snapshot@4.57.2(tslib@2.8.1)':
+  '@jsonjoy.com/fs-snapshot@4.64.0(tslib@2.8.1)':
     dependencies:
-      '@jsonjoy.com/buffers': 17.65.0(tslib@2.8.1)
-      '@jsonjoy.com/fs-node-utils': 4.57.2(tslib@2.8.1)
-      '@jsonjoy.com/json-pack': 17.65.0(tslib@2.8.1)
-      '@jsonjoy.com/util': 17.65.0(tslib@2.8.1)
+      '@jsonjoy.com/buffers': 17.67.0(tslib@2.8.1)
+      '@jsonjoy.com/fs-node-utils': 4.64.0(tslib@2.8.1)
+      '@jsonjoy.com/json-pack': 17.67.0(tslib@2.8.1)
+      '@jsonjoy.com/util': 17.67.0(tslib@2.8.1)
       tslib: 2.8.1
 
   '@jsonjoy.com/json-pack@1.21.0(tslib@2.8.1)':
@@ -15674,19 +16218,19 @@ snapshots:
       '@jsonjoy.com/json-pointer': 1.0.2(tslib@2.8.1)
       '@jsonjoy.com/util': 1.9.0(tslib@2.8.1)
       hyperdyperid: 1.2.0
-      thingies: 2.5.0(tslib@2.8.1)
+      thingies: 2.6.0(tslib@2.8.1)
       tree-dump: 1.1.0(tslib@2.8.1)
       tslib: 2.8.1
 
-  '@jsonjoy.com/json-pack@17.65.0(tslib@2.8.1)':
+  '@jsonjoy.com/json-pack@17.67.0(tslib@2.8.1)':
     dependencies:
-      '@jsonjoy.com/base64': 17.65.0(tslib@2.8.1)
-      '@jsonjoy.com/buffers': 17.65.0(tslib@2.8.1)
-      '@jsonjoy.com/codegen': 17.65.0(tslib@2.8.1)
-      '@jsonjoy.com/json-pointer': 17.65.0(tslib@2.8.1)
-      '@jsonjoy.com/util': 17.65.0(tslib@2.8.1)
+      '@jsonjoy.com/base64': 17.67.0(tslib@2.8.1)
+      '@jsonjoy.com/buffers': 17.67.0(tslib@2.8.1)
+      '@jsonjoy.com/codegen': 17.67.0(tslib@2.8.1)
+      '@jsonjoy.com/json-pointer': 17.67.0(tslib@2.8.1)
+      '@jsonjoy.com/util': 17.67.0(tslib@2.8.1)
       hyperdyperid: 1.2.0
-      thingies: 2.5.0(tslib@2.8.1)
+      thingies: 2.6.0(tslib@2.8.1)
       tree-dump: 1.1.0(tslib@2.8.1)
       tslib: 2.8.1
 
@@ -15696,9 +16240,9 @@ snapshots:
       '@jsonjoy.com/util': 1.9.0(tslib@2.8.1)
       tslib: 2.8.1
 
-  '@jsonjoy.com/json-pointer@17.65.0(tslib@2.8.1)':
+  '@jsonjoy.com/json-pointer@17.67.0(tslib@2.8.1)':
     dependencies:
-      '@jsonjoy.com/util': 17.65.0(tslib@2.8.1)
+      '@jsonjoy.com/util': 17.67.0(tslib@2.8.1)
       tslib: 2.8.1
 
   '@jsonjoy.com/util@1.9.0(tslib@2.8.1)':
@@ -15707,10 +16251,10 @@ snapshots:
       '@jsonjoy.com/codegen': 1.0.0(tslib@2.8.1)
       tslib: 2.8.1
 
-  '@jsonjoy.com/util@17.65.0(tslib@2.8.1)':
+  '@jsonjoy.com/util@17.67.0(tslib@2.8.1)':
     dependencies:
-      '@jsonjoy.com/buffers': 17.65.0(tslib@2.8.1)
-      '@jsonjoy.com/codegen': 17.65.0(tslib@2.8.1)
+      '@jsonjoy.com/buffers': 17.67.0(tslib@2.8.1)
+      '@jsonjoy.com/codegen': 17.67.0(tslib@2.8.1)
       tslib: 2.8.1
 
   '@keyv/bigmap@1.3.1(keyv@5.6.0)':
@@ -15721,31 +16265,31 @@ snapshots:
 
   '@keyv/serialize@1.1.1': {}
 
-  '@kwsites/file-exists@1.1.1':
+  '@kwsites/file-exists@1.1.1(supports-color@10.2.2)':
     dependencies:
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
   '@leichtgewicht/ip-codec@2.0.5': {}
 
-  '@lit-labs/react@2.1.3(@types/react@19.2.14)':
+  '@lit-labs/react@2.1.3(@types/react@19.2.18)':
     dependencies:
-      '@lit/react': 1.0.8(@types/react@19.2.14)
+      '@lit/react': 1.0.8(@types/react@19.2.18)
     transitivePeerDependencies:
       - '@types/react'
 
-  '@lit/react@1.0.8(@types/react@19.2.14)':
+  '@lit/react@1.0.8(@types/react@19.2.18)':
     dependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
 
   '@malept/cross-spawn-promise@2.0.0':
     dependencies:
       cross-spawn: 7.0.6
 
-  '@malept/flatpak-bundler@0.4.0':
+  '@malept/flatpak-bundler@0.4.0(supports-color@10.2.2)':
     dependencies:
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@10.2.2)
       fs-extra: 9.1.0
       lodash: 4.18.1
       tmp-promise: 3.0.3
@@ -15797,7 +16341,7 @@ snapshots:
       pbf: 4.0.1
       supercluster: 8.0.1
 
-  '@matrix-org/analytics-events@0.33.2': {}
+  '@matrix-org/analytics-events@0.37.0': {}
 
   '@matrix-org/emojibase-bindings@1.5.0':
     dependencies:
@@ -15806,57 +16350,57 @@ snapshots:
 
   '@matrix-org/matrix-sdk-crypto-wasm@18.4.0': {}
 
-  '@matrix-org/react-sdk-module-api@2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.6)':
+  '@matrix-org/react-sdk-module-api@2.5.0(patch_hash=016146c9cc96e6363609d2b2ac0896ccef567882eb1d73b75a77b8a30929de96)(react@19.2.8)':
     dependencies:
-      '@babel/runtime': 7.29.2
-      react: 19.2.6
+      '@babel/runtime': 7.29.7
+      react: 19.2.8
 
   '@matrix-org/spec@1.16.0': {}
 
-  '@mdx-js/react@3.1.1(@types/react@19.2.14)(react@19.2.6)':
+  '@mdx-js/react@3.1.1(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
-      '@types/mdx': 2.0.13(patch_hash=c209882c533714d2dcbf4cf397002125ea83677ef152eff403386611cd0f0d3a)
-      '@types/react': 19.2.14
-      react: 19.2.6
+      '@types/mdx': 2.0.14
+      '@types/react': 19.2.18
+      react: 19.2.8
 
   '@mermaid-js/mermaid-mindmap@9.3.0':
     dependencies:
       '@braintree/sanitize-url': 6.0.4
-      cytoscape: 3.33.2
-      cytoscape-cose-bilkent: 4.1.0(cytoscape@3.33.2)
-      cytoscape-fcose: 2.2.0(cytoscape@3.33.2)
+      cytoscape: 3.34.0
+      cytoscape-cose-bilkent: 4.1.0(cytoscape@3.34.0)
+      cytoscape-fcose: 2.2.0(cytoscape@3.34.0)
       d3: 7.9.0
       khroma: 2.1.0
       non-layered-tidy-tree-layout: 2.0.2
     optional: true
 
-  '@mermaid-js/parser@1.1.0':
+  '@mermaid-js/parser@1.2.0':
     dependencies:
-      langium: 4.2.2
+      '@chevrotain/types': 11.1.2
 
-  '@microsoft/api-extractor-model@7.33.8(@types/node@18.19.130)':
+  '@microsoft/api-extractor-model@7.33.10(@types/node@25.9.3)':
     dependencies:
       '@microsoft/tsdoc': 0.16.0
       '@microsoft/tsdoc-config': 0.18.1
-      '@rushstack/node-core-library': 5.23.1(@types/node@18.19.130)
+      '@rushstack/node-core-library': 5.23.3(@types/node@25.9.3)
     transitivePeerDependencies:
       - '@types/node'
 
-  '@microsoft/api-extractor@7.58.7(@types/node@18.19.130)':
+  '@microsoft/api-extractor@7.58.12(@types/node@25.9.3)':
     dependencies:
-      '@microsoft/api-extractor-model': 7.33.8(@types/node@18.19.130)
+      '@microsoft/api-extractor-model': 7.33.10(@types/node@25.9.3)
       '@microsoft/tsdoc': 0.16.0
       '@microsoft/tsdoc-config': 0.18.1
-      '@rushstack/node-core-library': 5.23.1(@types/node@18.19.130)
+      '@rushstack/node-core-library': 5.23.3(@types/node@25.9.3)
       '@rushstack/rig-package': 0.7.3
-      '@rushstack/terminal': 0.24.0(@types/node@18.19.130)
-      '@rushstack/ts-command-line': 5.3.9(@types/node@18.19.130)
+      '@rushstack/terminal': 0.24.2(@types/node@25.9.3)
+      '@rushstack/ts-command-line': 5.3.12(@types/node@25.9.3)
       diff: 8.0.4
       minimatch: 10.2.3
       resolve: 1.22.12
       semver: 7.7.4
       source-map: 0.6.1
-      typescript: 5.9.3
+      typescript: '@typescript/typescript6@6.0.2'
     transitivePeerDependencies:
       - '@types/node'
 
@@ -15869,32 +16413,37 @@ snapshots:
 
   '@microsoft/tsdoc@0.16.0': {}
 
-  '@napi-rs/wasm-runtime@0.2.12':
-    dependencies:
-      '@emnapi/core': 1.10.0
-      '@emnapi/runtime': 1.10.0
-      '@tybys/wasm-util': 0.10.1
-    optional: true
-
   '@napi-rs/wasm-runtime@0.2.4':
     dependencies:
-      '@emnapi/core': 1.10.0
-      '@emnapi/runtime': 1.10.0
+      '@emnapi/core': 1.11.2
+      '@emnapi/runtime': 1.11.2
       '@tybys/wasm-util': 0.9.0
 
-  '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
+  '@napi-rs/wasm-runtime@1.1.6(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
     dependencies:
       '@emnapi/core': 1.10.0
       '@emnapi/runtime': 1.10.0
-      '@tybys/wasm-util': 0.10.1
+      '@tybys/wasm-util': 0.10.3
     optional: true
 
-  '@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1':
+  '@napi-rs/wasm-runtime@1.1.6(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)':
     dependencies:
-      eslint-scope: 5.1.1
+      '@emnapi/core': 1.11.2
+      '@emnapi/runtime': 1.11.2
+      '@tybys/wasm-util': 0.10.3
+    optional: true
+
+  '@napi-rs/wasm-runtime@1.1.6(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)':
+    dependencies:
+      '@emnapi/core': 1.9.2
+      '@emnapi/runtime': 1.9.2
+      '@tybys/wasm-util': 0.10.3
+    optional: true
 
   '@noble/hashes@1.4.0': {}
 
+  '@noble/hashes@2.2.0': {}
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -15907,82 +16456,83 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.20.1
 
-  '@npmcli/agent@3.0.0':
+  '@npmcli/agent@4.0.0(supports-color@10.2.2)':
     dependencies:
       agent-base: 7.1.4
-      http-proxy-agent: 7.0.2
-      https-proxy-agent: 7.0.6
-      lru-cache: 10.4.3
-      socks-proxy-agent: 8.0.5
-    transitivePeerDependencies:
-      - supports-color
-
-  '@npmcli/agent@4.0.0':
-    dependencies:
-      agent-base: 7.1.4
-      http-proxy-agent: 7.0.2
-      https-proxy-agent: 7.0.6
+      http-proxy-agent: 7.0.2(supports-color@10.2.2)
+      https-proxy-agent: 7.0.6(supports-color@10.2.2)
       lru-cache: 11.2.6
-      socks-proxy-agent: 8.0.5
+      socks-proxy-agent: 8.0.5(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@npmcli/fs@4.0.0':
+  '@npmcli/agent@5.0.1(supports-color@10.2.2)':
     dependencies:
-      semver: 7.7.4
+      agent-base: 9.0.0
+      http-proxy-agent: 9.1.0(supports-color@10.2.2)
+      https-proxy-agent: 9.1.0(supports-color@10.2.2)
+      lru-cache: 11.2.6
+      socks-proxy-agent: 10.1.0(supports-color@10.2.2)
+    transitivePeerDependencies:
+      - kerberos
+      - supports-color
 
   '@npmcli/fs@5.0.0':
     dependencies:
-      semver: 7.7.4
+      semver: 7.8.5
 
-  '@npmcli/git@7.0.2':
+  '@npmcli/fs@6.0.0':
+    dependencies:
+      semver: 7.8.5
+
+  '@npmcli/git@8.0.0':
     dependencies:
       '@gar/promise-retry': 1.0.3
-      '@npmcli/promise-spawn': 9.0.1
-      ini: 6.0.0
+      '@npmcli/promise-spawn': 10.0.0
+      ini: 7.0.0
       lru-cache: 11.2.6
-      npm-pick-manifest: 11.0.3
-      proc-log: 6.1.0
-      semver: 7.7.4
-      which: 6.0.1
+      npm-pick-manifest: 12.0.0
+      proc-log: 7.0.0
+      semver: 7.8.5
+      which: 7.0.0
 
-  '@npmcli/installed-package-contents@4.0.0':
+  '@npmcli/installed-package-contents@5.0.0':
     dependencies:
-      npm-bundled: 5.0.0
-      npm-normalize-package-bin: 5.0.0
+      npm-bundled: 6.0.0
+      npm-normalize-package-bin: 6.0.0
 
-  '@npmcli/node-gyp@5.0.0': {}
+  '@npmcli/node-gyp@6.0.0': {}
 
-  '@npmcli/package-json@7.0.5':
+  '@npmcli/package-json@8.0.0':
     dependencies:
-      '@npmcli/git': 7.0.2
+      '@npmcli/git': 8.0.0
       glob: 13.0.6
-      hosted-git-info: 9.0.2
-      json-parse-even-better-errors: 5.0.0
-      proc-log: 6.1.0
-      semver: 7.7.4
+      hosted-git-info: 10.1.1
+      json-parse-even-better-errors: 6.0.0
+      proc-log: 7.0.0
+      semver: 7.8.5
       spdx-expression-parse: 4.0.0
 
-  '@npmcli/promise-spawn@9.0.1':
+  '@npmcli/promise-spawn@10.0.0':
     dependencies:
-      which: 6.0.1
+      which: 7.0.0
 
   '@npmcli/redact@4.0.0': {}
 
-  '@npmcli/run-script@10.0.4':
-    dependencies:
-      '@npmcli/node-gyp': 5.0.0
-      '@npmcli/package-json': 7.0.5
-      '@npmcli/promise-spawn': 9.0.1
-      node-gyp: 12.2.0
-      proc-log: 6.1.0
-    transitivePeerDependencies:
-      - supports-color
+  '@npmcli/redact@5.0.0': {}
 
-  '@nx-tools/ci-context@7.2.3(@nx/devkit@22.6.5(nx@22.7.1))(tslib@2.8.1)':
+  '@npmcli/run-script@11.0.0':
+    dependencies:
+      '@npmcli/node-gyp': 6.0.0
+      '@npmcli/package-json': 8.0.0
+      '@npmcli/promise-spawn': 10.0.0
+      node-gyp: 13.0.0
+      proc-log: 7.0.0
+
+  '@nx-tools/ci-context@7.3.0(@nx/devkit@22.6.5)(tslib@2.8.1)':
     dependencies:
       '@actions/github': 9.1.1
-      '@nx-tools/core': 7.2.3(@nx/devkit@22.6.5(nx@22.7.1))(tslib@2.8.1)
+      '@nx-tools/core': 7.3.0(@nx/devkit@22.6.5)(tslib@2.8.1)
       '@octokit/openapi-types': 22.2.0
       properties-file: 3.7.0
       std-env: 3.10.0
@@ -15990,175 +16540,132 @@ snapshots:
     transitivePeerDependencies:
       - '@nx/devkit'
 
-  '@nx-tools/container-metadata@7.2.3(@nx/devkit@22.6.5(nx@22.7.1))(tslib@2.8.1)':
+  '@nx-tools/container-metadata@7.3.0(@nx/devkit@22.6.5)(tslib@2.8.1)':
     dependencies:
-      '@nx-tools/ci-context': 7.2.3(@nx/devkit@22.6.5(nx@22.7.1))(tslib@2.8.1)
-      '@nx-tools/core': 7.2.3(@nx/devkit@22.6.5(nx@22.7.1))(tslib@2.8.1)
-      '@nx/devkit': 22.6.5(nx@22.7.1)
-      '@renovatebot/pep440': 4.2.1
+      '@nx-tools/ci-context': 7.3.0(@nx/devkit@22.6.5)(tslib@2.8.1)
+      '@nx-tools/core': 7.3.0(@nx/devkit@22.6.5)(tslib@2.8.1)
+      '@nx/devkit': 22.6.5(nx@23.1.1)
+      '@renovatebot/pep440': 4.2.4
       csv-parse: 5.6.0
       handlebars: 4.7.9
       moment-timezone: 0.6.2
-      semver: 7.7.4
+      semver: 7.8.5
       tslib: 2.8.1
 
-  '@nx-tools/core@7.2.3(@nx/devkit@22.6.5(nx@22.7.1))(tslib@2.8.1)':
+  '@nx-tools/core@7.3.0(@nx/devkit@22.6.5)(tslib@2.8.1)':
     dependencies:
       '@actions/io': 1.1.3
-      '@nx/devkit': 22.6.5(nx@22.7.1)
+      '@nx/devkit': 22.6.5(nx@23.1.1)
       csv-parse: 5.6.0
       std-env: 3.10.0
-      tinyexec: 1.1.1
+      tinyexec: 1.2.4
       tinyrainbow: 3.1.0
       tslib: 2.8.1
 
-  '@nx-tools/nx-container@7.2.3(@nx/devkit@22.6.5(nx@22.7.1))(@nx/js@22.6.5(@babel/traverse@7.29.0)(nx@22.7.1))(dotenv@17.4.2)(nx@22.7.1)(tslib@2.8.1)':
+  '@nx-tools/nx-container@7.3.0(@nx/devkit@22.6.5)(@nx/js@22.6.5)(dotenv@17.4.2)(nx@23.1.1)(tslib@2.8.1)':
     dependencies:
-      '@nx-tools/container-metadata': 7.2.3(@nx/devkit@22.6.5(nx@22.7.1))(tslib@2.8.1)
-      '@nx-tools/core': 7.2.3(@nx/devkit@22.6.5(nx@22.7.1))(tslib@2.8.1)
-      '@nx/devkit': 22.6.5(nx@22.7.1)
-      '@nx/js': 22.6.5(@babel/traverse@7.29.0)(nx@22.7.1)
+      '@nx-tools/container-metadata': 7.3.0(@nx/devkit@22.6.5)(tslib@2.8.1)
+      '@nx-tools/core': 7.3.0(@nx/devkit@22.6.5)(tslib@2.8.1)
+      '@nx/devkit': 22.6.5(nx@23.1.1)
+      '@nx/js': 22.6.5(@babel/traverse@7.29.8)(nx@23.1.1)(supports-color@7.2.0)
       csv-parse: 5.6.0
       dotenv: 17.4.2
       handlebars: 4.7.9
-      nx: 22.7.1
-      semver: 7.7.4
-      tmp: 0.2.5
+      nx: 23.1.1
+      semver: 7.8.5
+      tmp: 0.2.7
       tslib: 2.8.1
 
-  '@nx/devkit@22.6.5(nx@22.6.5)':
+  '@nx/devkit@22.6.5(nx@23.1.1)':
     dependencies:
       '@zkochan/js-yaml': 0.0.7
       ejs: 5.0.1
       enquirer: 2.3.6
       minimatch: 10.2.4
-      nx: 22.6.5
-      semver: 7.7.4
+      nx: 23.1.1
+      semver: 7.8.5
       tslib: 2.8.1
       yargs-parser: 21.1.1
 
-  '@nx/devkit@22.6.5(nx@22.7.1)':
+  '@nx/js@22.6.5(@babel/traverse@7.29.8)(nx@23.1.1)(supports-color@7.2.0)':
     dependencies:
-      '@zkochan/js-yaml': 0.0.7
-      ejs: 5.0.1
-      enquirer: 2.3.6
-      minimatch: 10.2.4
-      nx: 22.7.1
-      semver: 7.7.4
-      tslib: 2.8.1
-      yargs-parser: 21.1.1
-
-  '@nx/js@22.6.5(@babel/traverse@7.29.0)(nx@22.7.1)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/plugin-proposal-decorators': 7.29.0(@babel/core@7.29.0)
-      '@babel/plugin-transform-class-properties': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-transform-runtime': 7.29.0(@babel/core@7.29.0)
-      '@babel/preset-env': 7.29.5(@babel/core@7.29.0)
-      '@babel/preset-typescript': 7.28.5(@babel/core@7.29.0)
-      '@babel/runtime': 7.29.2
-      '@nx/devkit': 22.6.5(nx@22.7.1)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/plugin-proposal-decorators': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-transform-class-properties': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/plugin-transform-runtime': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/preset-env': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/preset-typescript': 7.29.7(@babel/core@7.29.7)(supports-color@7.2.0)
+      '@babel/runtime': 7.29.7
+      '@nx/devkit': 22.6.5(nx@23.1.1)
       '@nx/workspace': 22.6.5
       '@zkochan/js-yaml': 0.0.7
-      babel-plugin-const-enum: 1.2.0(@babel/core@7.29.0)
+      babel-plugin-const-enum: 1.2.0(@babel/core@7.29.7)(supports-color@7.2.0)
       babel-plugin-macros: 3.1.0
-      babel-plugin-transform-typescript-metadata: 0.3.2(@babel/core@7.29.0)(@babel/traverse@7.29.0)
+      babel-plugin-transform-typescript-metadata: 0.3.2(@babel/core@7.29.7)(@babel/traverse@7.29.8)
       chalk: 4.1.2
       columnify: 1.6.0
-      detect-port: 1.6.1
+      detect-port: 1.6.1(supports-color@7.2.0)
       ignore: 5.3.2
       js-tokens: 4.0.0
       jsonc-parser: 3.2.0
       npm-run-path: 4.0.1
       picocolors: 1.1.1
       picomatch: 4.0.4
-      semver: 7.7.4
+      semver: 7.8.5
       source-map-support: 0.5.19
-      tinyglobby: 0.2.16
+      tinyglobby: 0.2.17
       tslib: 2.8.1
     transitivePeerDependencies:
       - '@babel/traverse'
       - '@swc-node/register'
       - '@swc/core'
-      - debug
       - nx
       - supports-color
 
-  '@nx/nx-darwin-arm64@22.6.5':
+  '@nx/nx-darwin-arm64@23.1.1':
     optional: true
 
-  '@nx/nx-darwin-arm64@22.7.1':
+  '@nx/nx-darwin-x64@23.1.1':
     optional: true
 
-  '@nx/nx-darwin-x64@22.6.5':
+  '@nx/nx-freebsd-x64@23.1.1':
     optional: true
 
-  '@nx/nx-darwin-x64@22.7.1':
+  '@nx/nx-linux-arm-gnueabihf@23.1.1':
     optional: true
 
-  '@nx/nx-freebsd-x64@22.6.5':
+  '@nx/nx-linux-arm64-gnu@23.1.1':
     optional: true
 
-  '@nx/nx-freebsd-x64@22.7.1':
+  '@nx/nx-linux-arm64-musl@23.1.1':
     optional: true
 
-  '@nx/nx-linux-arm-gnueabihf@22.6.5':
+  '@nx/nx-linux-x64-gnu@23.1.1':
     optional: true
 
-  '@nx/nx-linux-arm-gnueabihf@22.7.1':
+  '@nx/nx-linux-x64-musl@23.1.1':
     optional: true
 
-  '@nx/nx-linux-arm64-gnu@22.6.5':
+  '@nx/nx-win32-arm64-msvc@23.1.1':
     optional: true
 
-  '@nx/nx-linux-arm64-gnu@22.7.1':
-    optional: true
-
-  '@nx/nx-linux-arm64-musl@22.6.5':
-    optional: true
-
-  '@nx/nx-linux-arm64-musl@22.7.1':
-    optional: true
-
-  '@nx/nx-linux-x64-gnu@22.6.5':
-    optional: true
-
-  '@nx/nx-linux-x64-gnu@22.7.1':
-    optional: true
-
-  '@nx/nx-linux-x64-musl@22.6.5':
-    optional: true
-
-  '@nx/nx-linux-x64-musl@22.7.1':
-    optional: true
-
-  '@nx/nx-win32-arm64-msvc@22.6.5':
-    optional: true
-
-  '@nx/nx-win32-arm64-msvc@22.7.1':
-    optional: true
-
-  '@nx/nx-win32-x64-msvc@22.6.5':
-    optional: true
-
-  '@nx/nx-win32-x64-msvc@22.7.1':
+  '@nx/nx-win32-x64-msvc@23.1.1':
     optional: true
 
   '@nx/workspace@22.6.5':
     dependencies:
-      '@nx/devkit': 22.6.5(nx@22.6.5)
+      '@nx/devkit': 22.6.5(nx@23.1.1)
       '@zkochan/js-yaml': 0.0.7
       chalk: 4.1.2
       enquirer: 2.3.6
-      nx: 22.6.5
+      nx: 23.1.1
       picomatch: 4.0.4
-      semver: 7.7.4
+      semver: 7.8.5
       tslib: 2.8.1
       yargs-parser: 21.1.1
     transitivePeerDependencies:
       - '@swc-node/register'
       - '@swc/core'
-      - debug
 
   '@octokit/auth-token@6.0.0': {}
 
@@ -16166,7 +16673,7 @@ snapshots:
     dependencies:
       '@octokit/auth-token': 6.0.0
       '@octokit/graphql': 9.0.3
-      '@octokit/request': 10.0.8
+      '@octokit/request': 10.0.10
       '@octokit/request-error': 7.1.0
       '@octokit/types': 16.0.0
       before-after-hook: 4.0.0
@@ -16179,7 +16686,7 @@ snapshots:
 
   '@octokit/graphql@9.0.3':
     dependencies:
-      '@octokit/request': 10.0.8
+      '@octokit/request': 10.0.10
       '@octokit/types': 16.0.0
       universal-user-agent: 7.0.3
 
@@ -16201,12 +16708,12 @@ snapshots:
     dependencies:
       '@octokit/types': 16.0.0
 
-  '@octokit/request@10.0.8':
+  '@octokit/request@10.0.10':
     dependencies:
       '@octokit/endpoint': 11.0.3
       '@octokit/request-error': 7.1.0
       '@octokit/types': 16.0.0
-      fast-content-type-parse: 3.0.0
+      content-type: 2.0.0
       json-with-bigint: 3.5.8
       universal-user-agent: 7.0.3
 
@@ -16214,520 +16721,450 @@ snapshots:
     dependencies:
       '@octokit/openapi-types': 27.0.0
 
-  '@opentelemetry/api-logs@0.207.0':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-
-  '@opentelemetry/api-logs@0.208.0':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-
-  '@opentelemetry/api-logs@0.212.0':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-
-  '@opentelemetry/api-logs@0.214.0':
+  '@opentelemetry/api-logs@0.220.0':
     dependencies:
       '@opentelemetry/api': 1.9.1
 
   '@opentelemetry/api@1.9.1': {}
 
-  '@opentelemetry/core@2.2.0(@opentelemetry/api@1.9.1)':
+  '@opentelemetry/core@2.10.0(@opentelemetry/api@1.9.1)':
     dependencies:
       '@opentelemetry/api': 1.9.1
-      '@opentelemetry/semantic-conventions': 1.40.0
+      '@opentelemetry/semantic-conventions': 1.43.0
 
-  '@opentelemetry/core@2.6.1(@opentelemetry/api@1.9.1)':
+  '@opentelemetry/instrumentation@0.220.0(@opentelemetry/api@1.9.1)(supports-color@10.2.2)':
     dependencies:
       '@opentelemetry/api': 1.9.1
-      '@opentelemetry/semantic-conventions': 1.40.0
-
-  '@opentelemetry/core@2.7.1(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/semantic-conventions': 1.40.0
-
-  '@opentelemetry/exporter-logs-otlp-http@0.208.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/api-logs': 0.208.0
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/otlp-exporter-base': 0.208.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/otlp-transformer': 0.208.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/sdk-logs': 0.208.0(@opentelemetry/api@1.9.1)
-
-  '@opentelemetry/instrumentation-amqplib@0.61.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/core': 2.7.1(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/semantic-conventions': 1.40.0
+      '@opentelemetry/api-logs': 0.220.0
+      import-in-the-middle: 3.3.2
+      require-in-the-middle: 8.0.1(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-connect@0.57.0(@opentelemetry/api@1.9.1)':
+  '@opentelemetry/resources@2.10.0(@opentelemetry/api@1.9.1)':
     dependencies:
       '@opentelemetry/api': 1.9.1
-      '@opentelemetry/core': 2.7.1(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/semantic-conventions': 1.40.0
-      '@types/connect': 3.4.38
-    transitivePeerDependencies:
-      - supports-color
+      '@opentelemetry/core': 2.10.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.43.0
 
-  '@opentelemetry/instrumentation-dataloader@0.31.0(@opentelemetry/api@1.9.1)':
+  '@opentelemetry/sdk-trace-base@2.10.0(@opentelemetry/api@1.9.1)':
     dependencies:
       '@opentelemetry/api': 1.9.1
-      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
-    transitivePeerDependencies:
-      - supports-color
+      '@opentelemetry/core': 2.10.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resources': 2.10.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/sdk-trace': 2.10.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.43.0
 
-  '@opentelemetry/instrumentation-fs@0.33.0(@opentelemetry/api@1.9.1)':
+  '@opentelemetry/sdk-trace@2.10.0(@opentelemetry/api@1.9.1)':
     dependencies:
       '@opentelemetry/api': 1.9.1
-      '@opentelemetry/core': 2.7.1(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
-    transitivePeerDependencies:
-      - supports-color
+      '@opentelemetry/core': 2.10.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/resources': 2.10.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/semantic-conventions': 1.43.0
 
-  '@opentelemetry/instrumentation-generic-pool@0.57.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
-    transitivePeerDependencies:
-      - supports-color
+  '@opentelemetry/semantic-conventions@1.43.0': {}
 
-  '@opentelemetry/instrumentation-graphql@0.62.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-hapi@0.60.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/core': 2.7.1(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/semantic-conventions': 1.40.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-http@0.214.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/core': 2.6.1(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/semantic-conventions': 1.40.0
-      forwarded-parse: 2.1.2
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-ioredis@0.62.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/redis-common': 0.38.3
-      '@opentelemetry/semantic-conventions': 1.40.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-kafkajs@0.23.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/semantic-conventions': 1.40.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-knex@0.58.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/semantic-conventions': 1.40.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-koa@0.62.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/core': 2.7.1(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/semantic-conventions': 1.40.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-lru-memoizer@0.58.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-mongodb@0.67.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/semantic-conventions': 1.40.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-mongoose@0.60.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/core': 2.7.1(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/semantic-conventions': 1.40.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-mysql2@0.60.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/semantic-conventions': 1.40.0
-      '@opentelemetry/sql-common': 0.41.2(@opentelemetry/api@1.9.1)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-mysql@0.60.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/semantic-conventions': 1.40.0
-      '@types/mysql': 2.15.27
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-pg@0.66.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/core': 2.7.1(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/semantic-conventions': 1.40.0
-      '@opentelemetry/sql-common': 0.41.2(@opentelemetry/api@1.9.1)
-      '@types/pg': 8.15.6
-      '@types/pg-pool': 2.0.7
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-redis@0.62.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/redis-common': 0.38.3
-      '@opentelemetry/semantic-conventions': 1.40.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation-tedious@0.33.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/semantic-conventions': 1.40.0
-      '@types/tedious': 4.0.14
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation@0.207.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/api-logs': 0.207.0
-      import-in-the-middle: 2.0.6
-      require-in-the-middle: 8.0.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation@0.212.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/api-logs': 0.212.0
-      import-in-the-middle: 2.0.6
-      require-in-the-middle: 8.0.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/instrumentation@0.214.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/api-logs': 0.214.0
-      import-in-the-middle: 3.0.1
-      require-in-the-middle: 8.0.1
-    transitivePeerDependencies:
-      - supports-color
-
-  '@opentelemetry/otlp-exporter-base@0.208.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/otlp-transformer': 0.208.0(@opentelemetry/api@1.9.1)
-
-  '@opentelemetry/otlp-transformer@0.208.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/api-logs': 0.208.0
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/resources': 2.2.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/sdk-logs': 0.208.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/sdk-metrics': 2.2.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/sdk-trace-base': 2.2.0(@opentelemetry/api@1.9.1)
-      protobufjs: 7.5.5
-
-  '@opentelemetry/redis-common@0.38.3': {}
-
-  '@opentelemetry/resources@2.2.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/semantic-conventions': 1.40.0
-
-  '@opentelemetry/resources@2.7.1(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/core': 2.7.1(@opentelemetry/api@1.9.1)
-      '@opentelemetry/semantic-conventions': 1.40.0
-
-  '@opentelemetry/sdk-logs@0.208.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/api-logs': 0.208.0
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/resources': 2.2.0(@opentelemetry/api@1.9.1)
-
-  '@opentelemetry/sdk-metrics@2.2.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/resources': 2.2.0(@opentelemetry/api@1.9.1)
-
-  '@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/resources': 2.2.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/semantic-conventions': 1.40.0
-
-  '@opentelemetry/sdk-trace-base@2.7.1(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/core': 2.7.1(@opentelemetry/api@1.9.1)
-      '@opentelemetry/resources': 2.7.1(@opentelemetry/api@1.9.1)
-      '@opentelemetry/semantic-conventions': 1.40.0
-
-  '@opentelemetry/semantic-conventions@1.40.0': {}
-
-  '@opentelemetry/sql-common@0.41.2(@opentelemetry/api@1.9.1)':
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/core': 2.7.1(@opentelemetry/api@1.9.1)
-
-  '@oxc-parser/binding-android-arm-eabi@0.128.0':
+  '@oxc-parser/binding-android-arm-eabi@0.127.0':
     optional: true
 
-  '@oxc-parser/binding-android-arm64@0.128.0':
+  '@oxc-parser/binding-android-arm-eabi@0.140.0':
     optional: true
 
-  '@oxc-parser/binding-darwin-arm64@0.128.0':
+  '@oxc-parser/binding-android-arm64@0.127.0':
     optional: true
 
-  '@oxc-parser/binding-darwin-x64@0.128.0':
+  '@oxc-parser/binding-android-arm64@0.140.0':
     optional: true
 
-  '@oxc-parser/binding-freebsd-x64@0.128.0':
+  '@oxc-parser/binding-darwin-arm64@0.127.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm-gnueabihf@0.128.0':
+  '@oxc-parser/binding-darwin-arm64@0.140.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm-musleabihf@0.128.0':
+  '@oxc-parser/binding-darwin-x64@0.127.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm64-gnu@0.128.0':
+  '@oxc-parser/binding-darwin-x64@0.140.0':
     optional: true
 
-  '@oxc-parser/binding-linux-arm64-musl@0.128.0':
+  '@oxc-parser/binding-freebsd-x64@0.127.0':
     optional: true
 
-  '@oxc-parser/binding-linux-ppc64-gnu@0.128.0':
+  '@oxc-parser/binding-freebsd-x64@0.140.0':
     optional: true
 
-  '@oxc-parser/binding-linux-riscv64-gnu@0.128.0':
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.127.0':
     optional: true
 
-  '@oxc-parser/binding-linux-riscv64-musl@0.128.0':
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.140.0':
     optional: true
 
-  '@oxc-parser/binding-linux-s390x-gnu@0.128.0':
+  '@oxc-parser/binding-linux-arm-musleabihf@0.127.0':
     optional: true
 
-  '@oxc-parser/binding-linux-x64-gnu@0.128.0':
+  '@oxc-parser/binding-linux-arm-musleabihf@0.140.0':
     optional: true
 
-  '@oxc-parser/binding-linux-x64-musl@0.128.0':
+  '@oxc-parser/binding-linux-arm64-gnu@0.127.0':
     optional: true
 
-  '@oxc-parser/binding-openharmony-arm64@0.128.0':
+  '@oxc-parser/binding-linux-arm64-gnu@0.140.0':
     optional: true
 
-  '@oxc-parser/binding-wasm32-wasi@0.128.0':
+  '@oxc-parser/binding-linux-arm64-musl@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-arm64-musl@0.140.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-ppc64-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-ppc64-gnu@0.140.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-riscv64-gnu@0.140.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-riscv64-musl@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-riscv64-musl@0.140.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-s390x-gnu@0.140.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-gnu@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-gnu@0.140.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-musl@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-linux-x64-musl@0.140.0':
+    optional: true
+
+  '@oxc-parser/binding-openharmony-arm64@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-openharmony-arm64@0.140.0':
+    optional: true
+
+  '@oxc-parser/binding-wasm32-wasi@0.127.0':
     dependencies:
-      '@emnapi/core': 1.10.0
-      '@emnapi/runtime': 1.10.0
-      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+      '@emnapi/core': 1.9.2
+      '@emnapi/runtime': 1.9.2
+      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
     optional: true
 
-  '@oxc-parser/binding-win32-arm64-msvc@0.128.0':
+  '@oxc-parser/binding-wasm32-wasi@0.140.0':
+    dependencies:
+      '@emnapi/core': 1.11.2
+      '@emnapi/runtime': 1.11.2
+      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)
     optional: true
 
-  '@oxc-parser/binding-win32-ia32-msvc@0.128.0':
+  '@oxc-parser/binding-win32-arm64-msvc@0.127.0':
     optional: true
 
-  '@oxc-parser/binding-win32-x64-msvc@0.128.0':
+  '@oxc-parser/binding-win32-arm64-msvc@0.140.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-ia32-msvc@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-ia32-msvc@0.140.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-x64-msvc@0.127.0':
+    optional: true
+
+  '@oxc-parser/binding-win32-x64-msvc@0.140.0':
     optional: true
 
   '@oxc-project/types@0.127.0': {}
 
-  '@oxc-project/types@0.128.0': {}
+  '@oxc-project/types@0.140.0': {}
 
-  '@oxc-resolver/binding-android-arm-eabi@11.19.1':
+  '@oxc-project/types@0.142.0': {}
+
+  '@oxc-resolver/binding-android-arm-eabi@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-android-arm64@11.19.1':
+  '@oxc-resolver/binding-android-arm64@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-darwin-arm64@11.19.1':
+  '@oxc-resolver/binding-darwin-arm64@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-darwin-x64@11.19.1':
+  '@oxc-resolver/binding-darwin-x64@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-freebsd-x64@11.19.1':
+  '@oxc-resolver/binding-freebsd-x64@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-linux-arm-gnueabihf@11.19.1':
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-linux-arm-musleabihf@11.19.1':
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-linux-arm64-gnu@11.19.1':
+  '@oxc-resolver/binding-linux-arm64-gnu@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-linux-arm64-musl@11.19.1':
+  '@oxc-resolver/binding-linux-arm64-musl@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-linux-ppc64-gnu@11.19.1':
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-linux-riscv64-gnu@11.19.1':
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-linux-riscv64-musl@11.19.1':
+  '@oxc-resolver/binding-linux-riscv64-musl@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-linux-s390x-gnu@11.19.1':
+  '@oxc-resolver/binding-linux-s390x-gnu@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-linux-x64-gnu@11.19.1':
+  '@oxc-resolver/binding-linux-x64-gnu@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-linux-x64-musl@11.19.1':
+  '@oxc-resolver/binding-linux-x64-musl@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-openharmony-arm64@11.19.1':
+  '@oxc-resolver/binding-openharmony-arm64@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-wasm32-wasi@11.19.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
+  '@oxc-resolver/binding-wasm32-wasi@11.24.2':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
-    transitivePeerDependencies:
-      - '@emnapi/core'
-      - '@emnapi/runtime'
+      '@emnapi/core': 1.11.2
+      '@emnapi/runtime': 1.11.2
+      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)
     optional: true
 
-  '@oxc-resolver/binding-win32-arm64-msvc@11.19.1':
+  '@oxc-resolver/binding-win32-arm64-msvc@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-win32-ia32-msvc@11.19.1':
+  '@oxc-resolver/binding-win32-x64-msvc@11.24.2':
     optional: true
 
-  '@oxc-resolver/binding-win32-x64-msvc@11.19.1':
+  '@oxfmt/binding-android-arm-eabi@0.60.0':
     optional: true
 
-  '@peculiar/asn1-cms@2.6.0':
+  '@oxfmt/binding-android-arm64@0.60.0':
+    optional: true
+
+  '@oxfmt/binding-darwin-arm64@0.60.0':
+    optional: true
+
+  '@oxfmt/binding-darwin-x64@0.60.0':
+    optional: true
+
+  '@oxfmt/binding-freebsd-x64@0.60.0':
+    optional: true
+
+  '@oxfmt/binding-linux-arm-gnueabihf@0.60.0':
+    optional: true
+
+  '@oxfmt/binding-linux-arm-musleabihf@0.60.0':
+    optional: true
+
+  '@oxfmt/binding-linux-arm64-gnu@0.60.0':
+    optional: true
+
+  '@oxfmt/binding-linux-arm64-musl@0.60.0':
+    optional: true
+
+  '@oxfmt/binding-linux-ppc64-gnu@0.60.0':
+    optional: true
+
+  '@oxfmt/binding-linux-riscv64-gnu@0.60.0':
+    optional: true
+
+  '@oxfmt/binding-linux-riscv64-musl@0.60.0':
+    optional: true
+
+  '@oxfmt/binding-linux-s390x-gnu@0.60.0':
+    optional: true
+
+  '@oxfmt/binding-linux-x64-gnu@0.60.0':
+    optional: true
+
+  '@oxfmt/binding-linux-x64-musl@0.60.0':
+    optional: true
+
+  '@oxfmt/binding-openharmony-arm64@0.60.0':
+    optional: true
+
+  '@oxfmt/binding-win32-arm64-msvc@0.60.0':
+    optional: true
+
+  '@oxfmt/binding-win32-ia32-msvc@0.60.0':
+    optional: true
+
+  '@oxfmt/binding-win32-x64-msvc@0.60.0':
+    optional: true
+
+  '@oxlint-tsgolint/darwin-arm64@7.0.2001':
+    optional: true
+
+  '@oxlint-tsgolint/darwin-x64@7.0.2001':
+    optional: true
+
+  '@oxlint-tsgolint/linux-arm64@7.0.2001':
+    optional: true
+
+  '@oxlint-tsgolint/linux-x64@7.0.2001':
+    optional: true
+
+  '@oxlint-tsgolint/win32-arm64@7.0.2001':
+    optional: true
+
+  '@oxlint-tsgolint/win32-x64@7.0.2001':
+    optional: true
+
+  '@oxlint/binding-android-arm-eabi@1.75.0':
+    optional: true
+
+  '@oxlint/binding-android-arm64@1.75.0':
+    optional: true
+
+  '@oxlint/binding-darwin-arm64@1.75.0':
+    optional: true
+
+  '@oxlint/binding-darwin-x64@1.75.0':
+    optional: true
+
+  '@oxlint/binding-freebsd-x64@1.75.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm-gnueabihf@1.75.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm-musleabihf@1.75.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm64-gnu@1.75.0':
+    optional: true
+
+  '@oxlint/binding-linux-arm64-musl@1.75.0':
+    optional: true
+
+  '@oxlint/binding-linux-ppc64-gnu@1.75.0':
+    optional: true
+
+  '@oxlint/binding-linux-riscv64-gnu@1.75.0':
+    optional: true
+
+  '@oxlint/binding-linux-riscv64-musl@1.75.0':
+    optional: true
+
+  '@oxlint/binding-linux-s390x-gnu@1.75.0':
+    optional: true
+
+  '@oxlint/binding-linux-x64-gnu@1.75.0':
+    optional: true
+
+  '@oxlint/binding-linux-x64-musl@1.75.0':
+    optional: true
+
+  '@oxlint/binding-openharmony-arm64@1.75.0':
+    optional: true
+
+  '@oxlint/binding-win32-arm64-msvc@1.75.0':
+    optional: true
+
+  '@oxlint/binding-win32-ia32-msvc@1.75.0':
+    optional: true
+
+  '@oxlint/binding-win32-x64-msvc@1.75.0':
+    optional: true
+
+  '@peculiar/asn1-cms@2.8.0':
     dependencies:
-      '@peculiar/asn1-schema': 2.7.0
-      '@peculiar/asn1-x509': 2.6.0
-      '@peculiar/asn1-x509-attr': 2.6.0
+      '@peculiar/asn1-schema': 2.8.0
+      '@peculiar/asn1-x509': 2.8.0
+      '@peculiar/asn1-x509-attr': 2.8.0
       asn1js: 3.0.10
       tslib: 2.8.1
 
-  '@peculiar/asn1-csr@2.6.0':
+  '@peculiar/asn1-csr@2.8.0':
     dependencies:
-      '@peculiar/asn1-schema': 2.7.0
-      '@peculiar/asn1-x509': 2.6.0
+      '@peculiar/asn1-schema': 2.8.0
+      '@peculiar/asn1-x509': 2.8.0
       asn1js: 3.0.10
       tslib: 2.8.1
 
-  '@peculiar/asn1-ecc@2.6.0':
+  '@peculiar/asn1-ecc@2.8.0':
     dependencies:
-      '@peculiar/asn1-schema': 2.7.0
-      '@peculiar/asn1-x509': 2.6.0
+      '@peculiar/asn1-schema': 2.8.0
+      '@peculiar/asn1-x509': 2.8.0
       asn1js: 3.0.10
       tslib: 2.8.1
 
-  '@peculiar/asn1-pfx@2.6.0':
+  '@peculiar/asn1-pfx@2.8.0':
     dependencies:
-      '@peculiar/asn1-cms': 2.6.0
-      '@peculiar/asn1-pkcs8': 2.6.0
-      '@peculiar/asn1-rsa': 2.6.0
-      '@peculiar/asn1-schema': 2.7.0
+      '@peculiar/asn1-cms': 2.8.0
+      '@peculiar/asn1-pkcs8': 2.8.0
+      '@peculiar/asn1-rsa': 2.8.0
+      '@peculiar/asn1-schema': 2.8.0
       asn1js: 3.0.10
       tslib: 2.8.1
 
-  '@peculiar/asn1-pkcs8@2.6.0':
+  '@peculiar/asn1-pkcs8@2.8.0':
     dependencies:
-      '@peculiar/asn1-schema': 2.7.0
-      '@peculiar/asn1-x509': 2.6.0
+      '@peculiar/asn1-schema': 2.8.0
+      '@peculiar/asn1-x509': 2.8.0
       asn1js: 3.0.10
       tslib: 2.8.1
 
-  '@peculiar/asn1-pkcs9@2.6.0':
+  '@peculiar/asn1-pkcs9@2.8.0':
     dependencies:
-      '@peculiar/asn1-cms': 2.6.0
-      '@peculiar/asn1-pfx': 2.6.0
-      '@peculiar/asn1-pkcs8': 2.6.0
-      '@peculiar/asn1-schema': 2.7.0
-      '@peculiar/asn1-x509': 2.6.0
-      '@peculiar/asn1-x509-attr': 2.6.0
+      '@peculiar/asn1-cms': 2.8.0
+      '@peculiar/asn1-pfx': 2.8.0
+      '@peculiar/asn1-pkcs8': 2.8.0
+      '@peculiar/asn1-schema': 2.8.0
+      '@peculiar/asn1-x509': 2.8.0
+      '@peculiar/asn1-x509-attr': 2.8.0
       asn1js: 3.0.10
       tslib: 2.8.1
 
-  '@peculiar/asn1-rsa@2.6.0':
+  '@peculiar/asn1-rsa@2.8.0':
     dependencies:
-      '@peculiar/asn1-schema': 2.7.0
-      '@peculiar/asn1-x509': 2.6.0
+      '@peculiar/asn1-schema': 2.8.0
+      '@peculiar/asn1-x509': 2.8.0
       asn1js: 3.0.10
       tslib: 2.8.1
 
-  '@peculiar/asn1-schema@2.7.0':
+  '@peculiar/asn1-schema@2.8.0':
     dependencies:
       '@peculiar/utils': 2.0.3
       asn1js: 3.0.10
       tslib: 2.8.1
 
-  '@peculiar/asn1-x509-attr@2.6.0':
+  '@peculiar/asn1-x509-attr@2.8.0':
     dependencies:
-      '@peculiar/asn1-schema': 2.7.0
-      '@peculiar/asn1-x509': 2.6.0
+      '@peculiar/asn1-schema': 2.8.0
+      '@peculiar/asn1-x509': 2.8.0
       asn1js: 3.0.10
       tslib: 2.8.1
 
-  '@peculiar/asn1-x509@2.6.0':
+  '@peculiar/asn1-x509@2.8.0':
     dependencies:
-      '@peculiar/asn1-schema': 2.7.0
+      '@peculiar/asn1-schema': 2.8.0
+      '@peculiar/utils': 2.0.3
       asn1js: 3.0.10
-      pvtsutils: 1.3.6
       tslib: 2.8.1
 
   '@peculiar/json-schema@1.1.12':
@@ -16740,7 +17177,7 @@ snapshots:
 
   '@peculiar/webcrypto@1.7.1':
     dependencies:
-      '@peculiar/asn1-schema': 2.7.0
+      '@peculiar/asn1-schema': 2.8.0
       '@peculiar/json-schema': 1.1.12
       '@peculiar/utils': 2.0.3
       tslib: 2.8.1
@@ -16748,13 +17185,13 @@ snapshots:
 
   '@peculiar/x509@1.14.3':
     dependencies:
-      '@peculiar/asn1-cms': 2.6.0
-      '@peculiar/asn1-csr': 2.6.0
-      '@peculiar/asn1-ecc': 2.6.0
-      '@peculiar/asn1-pkcs9': 2.6.0
-      '@peculiar/asn1-rsa': 2.6.0
-      '@peculiar/asn1-schema': 2.7.0
-      '@peculiar/asn1-x509': 2.6.0
+      '@peculiar/asn1-cms': 2.8.0
+      '@peculiar/asn1-csr': 2.8.0
+      '@peculiar/asn1-ecc': 2.8.0
+      '@peculiar/asn1-pkcs9': 2.8.0
+      '@peculiar/asn1-rsa': 2.8.0
+      '@peculiar/asn1-schema': 2.8.0
+      '@peculiar/asn1-x509': 2.8.0
       pvtsutils: 1.3.6
       reflect-metadata: 0.2.2
       tslib: 2.8.1
@@ -16765,463 +17202,568 @@ snapshots:
 
   '@pkgr/core@0.2.9': {}
 
-  '@playwright/test@1.59.1':
+  '@playwright/test@1.61.1':
     dependencies:
-      playwright: 1.59.1
+      playwright: 1.61.1
 
   '@polka/url@1.0.0-next.29': {}
 
-  '@posthog/core@1.28.2':
+  '@posthog/browser-common@0.2.3':
     dependencies:
-      '@posthog/types': 1.372.8
+      '@posthog/core': 1.45.1
+      '@posthog/types': 1.398.0
 
-  '@posthog/types@1.372.8': {}
-
-  '@principalstudio/html-webpack-inject-preload@1.2.7(html-webpack-plugin@5.6.7(webpack@5.106.2))(webpack@5.106.2)':
+  '@posthog/core@1.45.1':
     dependencies:
-      html-webpack-plugin: 5.6.7(webpack@5.106.2)
-      webpack: 5.106.2(webpack-cli@7.0.2)
+      '@posthog/types': 1.398.0
 
-  '@prisma/instrumentation@7.6.0(@opentelemetry/api@1.9.1)':
+  '@posthog/types@1.398.0': {}
+
+  '@preact/signals-core@1.14.2': {}
+
+  '@principalstudio/html-webpack-inject-preload@1.2.7(html-webpack-plugin@5.6.8)(webpack@5.109.2)':
     dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/instrumentation': 0.207.0(@opentelemetry/api@1.9.1)
-    transitivePeerDependencies:
-      - supports-color
+      html-webpack-plugin: 5.6.8(webpack@5.109.2)
+      webpack: 5.109.2(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack-cli@7.2.2)
 
   '@protobufjs/aspromise@1.1.2': {}
 
   '@protobufjs/base64@1.1.2': {}
 
-  '@protobufjs/codegen@2.0.4': {}
+  '@protobufjs/codegen@2.0.5': {}
 
-  '@protobufjs/eventemitter@1.1.0': {}
+  '@protobufjs/eventemitter@1.1.1': {}
 
-  '@protobufjs/fetch@1.1.0':
+  '@protobufjs/fetch@1.1.1':
     dependencies:
       '@protobufjs/aspromise': 1.1.2
-      '@protobufjs/inquire': 1.1.0
 
   '@protobufjs/float@1.0.2': {}
 
-  '@protobufjs/inquire@1.1.0': {}
-
   '@protobufjs/path@1.1.2': {}
 
   '@protobufjs/pool@1.1.0': {}
 
-  '@protobufjs/utf8@1.1.0': {}
+  '@protobufjs/utf8@1.1.1': {}
 
   '@radix-ui/primitive@1.1.3': {}
 
-  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
-    optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+  '@radix-ui/primitive@1.1.7': {}
 
-  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.6)
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.3(@types/react@19.2.18)
 
-  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.14)(react@19.2.6)':
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)':
     dependencies:
-      react: 19.2.6
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.3(@types/react@19.2.18)
 
-  '@radix-ui/react-context-menu@2.2.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-compose-refs@1.1.5(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-context-menu@2.2.16(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.6)
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.3(@types/react@19.2.18)
 
-  '@radix-ui/react-context@1.1.2(@types/react@19.2.14)(react@19.2.6)':
+  '@radix-ui/react-context@1.1.2(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
-      react: 19.2.6
+      react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-context@1.1.3(@types/react@19.2.14)(react@19.2.6)':
+  '@radix-ui/react-context@1.1.3(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
-      react: 19.2.6
+      react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-dialog@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@radix-ui/react-context@1.2.2(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-dialog@1.1.23(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
       aria-hidden: 1.2.6
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
-      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-remove-scroll: 2.7.2(@types/react@19.2.18)(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.3(@types/react@19.2.18)
 
-  '@radix-ui/react-direction@1.1.1(@types/react@19.2.14)(react@19.2.6)':
+  '@radix-ui/react-direction@1.1.1(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
-      react: 19.2.6
+      react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.14)(react@19.2.6)
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.3(@types/react@19.2.18)
 
-  '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@radix-ui/react-dismissable-layer@1.1.19(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.3(@types/react@19.2.18)
+
+  '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.6)
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.3(@types/react@19.2.18)
 
-  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.14)(react@19.2.6)':
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
-      react: 19.2.6
+      react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@radix-ui/react-focus-guards@1.1.6(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.6)
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
+      react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-form@0.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@radix-ui/react-focus-scope@1.1.16(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.3(@types/react@19.2.18)
+
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.3(@types/react@19.2.18)
+
+  '@radix-ui/react-form@0.1.8(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-label': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-label': 2.1.7(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.3(@types/react@19.2.18)
 
-  '@radix-ui/react-id@1.1.1(@types/react@19.2.14)(react@19.2.6)':
+  '@radix-ui/react-id@1.1.1(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.6)
-      react: 19.2.6
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-label@2.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@radix-ui/react-id@1.1.4(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@radix-ui/react-label@2.1.7(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.3(@types/react@19.2.18)
+
+  '@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.18)(react@19.2.8)
       aria-hidden: 1.2.6
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
-      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-remove-scroll: 2.7.2(@types/react@19.2.18)(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.3(@types/react@19.2.18)
 
-  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)':
     dependencies:
-      '@floating-ui/react-dom': 2.1.7(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.6)
+      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.18)(react@19.2.8)
       '@radix-ui/rect': 1.1.1
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.3(@types/react@19.2.18)
 
-  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@radix-ui/react-portal@1.1.17(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.6)
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.3(@types/react@19.2.18)
 
-  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.6)
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.3(@types/react@19.2.18)
 
-  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@radix-ui/react-presence@1.1.10(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.6)
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.3(@types/react@19.2.18)
 
-  '@radix-ui/react-primitive@2.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.14)(react@19.2.6)
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.3(@types/react@19.2.18)
 
-  '@radix-ui/react-progress@1.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@radix-ui/react-primitive@2.1.10(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-context': 1.1.3(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.3(@types/react@19.2.18)
 
-  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.3(@types/react@19.2.18)
+
+  '@radix-ui/react-primitive@2.1.4(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.3(@types/react@19.2.18)
+
+  '@radix-ui/react-progress@1.1.8(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.3(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.3(@types/react@19.2.18)
+
+  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.6)
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.3(@types/react@19.2.18)
 
-  '@radix-ui/react-separator@1.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@radix-ui/react-separator@1.1.8(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.3(@types/react@19.2.18)
 
-  '@radix-ui/react-slot@1.2.3(@types/react@19.2.14)(react@19.2.6)':
+  '@radix-ui/react-slot@1.2.3(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.6)
-      react: 19.2.6
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-slot@1.2.4(@types/react@19.2.14)(react@19.2.6)':
+  '@radix-ui/react-slot@1.2.4(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.6)
-      react: 19.2.6
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.14)(react@19.2.6)':
+  '@radix-ui/react-slot@1.3.3(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
-      react: 19.2.6
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.14)(react@19.2.6)':
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.14)(react@19.2.6)
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.6)
-      react: 19.2.6
+      react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.14)(react@19.2.6)':
+  '@radix-ui/react-use-callback-ref@1.1.4(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.6)
-      react: 19.2.6
+      react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.14)(react@19.2.6)':
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.6)
-      react: 19.2.6
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.14)(react@19.2.6)':
+  '@radix-ui/react-use-controllable-state@1.2.6(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
-      react: 19.2.6
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.8)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.14)(react@19.2.6)':
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-use-effect-event@0.0.5(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-use-layout-effect@1.1.4(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
       '@radix-ui/rect': 1.1.1
-      react: 19.2.6
+      react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
 
-  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.14)(react@19.2.6)':
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.18)(react@19.2.8)':
     dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.6)
-      react: 19.2.6
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.18)(react@19.2.8)
+      react: 19.2.8
     optionalDependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
 
   '@radix-ui/rect@1.1.1': {}
 
-  '@renovatebot/pep440@4.2.1': {}
+  '@renovatebot/pep440@4.2.4': {}
 
   '@repobuddy/test@1.0.1': {}
 
-  '@rolldown/binding-android-arm64@1.0.0-rc.17':
+  '@rolldown/binding-android-arm64@1.2.2':
     optional: true
 
-  '@rolldown/binding-darwin-arm64@1.0.0-rc.17':
+  '@rolldown/binding-darwin-arm64@1.2.2':
     optional: true
 
-  '@rolldown/binding-darwin-x64@1.0.0-rc.17':
+  '@rolldown/binding-darwin-x64@1.2.2':
     optional: true
 
-  '@rolldown/binding-freebsd-x64@1.0.0-rc.17':
+  '@rolldown/binding-freebsd-x64@1.2.2':
     optional: true
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.17':
+  '@rolldown/binding-linux-arm-gnueabihf@1.2.2':
     optional: true
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.17':
+  '@rolldown/binding-linux-arm64-gnu@1.2.2':
     optional: true
 
-  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.17':
+  '@rolldown/binding-linux-arm64-musl@1.2.2':
     optional: true
 
-  '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.17':
+  '@rolldown/binding-linux-ppc64-gnu@1.2.2':
     optional: true
 
-  '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.17':
+  '@rolldown/binding-linux-s390x-gnu@1.2.2':
     optional: true
 
-  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.17':
+  '@rolldown/binding-linux-x64-gnu@1.2.2':
     optional: true
 
-  '@rolldown/binding-linux-x64-musl@1.0.0-rc.17':
+  '@rolldown/binding-linux-x64-musl@1.2.2':
     optional: true
 
-  '@rolldown/binding-openharmony-arm64@1.0.0-rc.17':
+  '@rolldown/binding-openharmony-arm64@1.2.2':
     optional: true
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-rc.17':
+  '@rolldown/binding-win32-arm64-msvc@1.2.2':
+    optional: true
+
+  '@rolldown/binding-win32-x64-msvc@1.2.2':
+    optional: true
+
+  '@rolldown/pluginutils@1.0.1': {}
+
+  '@rollup/plugin-inject@5.0.5(rollup@4.60.1)':
     dependencies:
-      '@emnapi/core': 1.10.0
-      '@emnapi/runtime': 1.10.0
-      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
-    optional: true
-
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.17':
-    optional: true
-
-  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.17':
-    optional: true
-
-  '@rolldown/pluginutils@1.0.0-rc.17': {}
-
-  '@rollup/plugin-inject@5.0.5(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))':
-    dependencies:
-      '@rollup/pluginutils': 5.3.0(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))
+      '@rollup/pluginutils': 5.4.0(rollup@4.60.1)
       estree-walker: 2.0.2
       magic-string: 0.30.21
     optionalDependencies:
-      rollup: 4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8)
+      rollup: 4.60.1
 
-  '@rollup/pluginutils@5.3.0(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))':
+  '@rollup/pluginutils@5.4.0(rollup@4.60.1)':
     dependencies:
       '@types/estree': 1.0.9
       estree-walker: 2.0.2
-      picomatch: 4.0.4
+      picomatch: 4.0.5
     optionalDependencies:
-      rollup: 4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8)
+      rollup: 4.60.1
 
   '@rollup/rollup-android-arm-eabi@4.60.1':
     optional: true
@@ -17298,234 +17840,239 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.60.1':
     optional: true
 
-  '@rtsao/scc@1.1.0': {}
-
-  '@rushstack/node-core-library@5.23.1(@types/node@18.19.130)':
+  '@rushstack/node-core-library@5.23.3(@types/node@25.9.3)':
     dependencies:
-      ajv: 8.18.0
-      ajv-draft-04: 1.0.0(ajv@8.18.0)
-      ajv-formats: 3.0.1(ajv@8.18.0)
-      fs-extra: 11.3.5
+      ajv: 8.20.0
+      ajv-draft-04: 1.0.0(ajv@8.20.0)
+      ajv-formats: 3.0.1(ajv@8.20.0)
+      fs-extra: 11.3.6
       import-lazy: 4.0.0
       jju: 1.4.0
       resolve: 1.22.12
       semver: 7.7.4
     optionalDependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
 
-  '@rushstack/problem-matcher@0.2.1(@types/node@18.19.130)':
+  '@rushstack/problem-matcher@0.2.1(@types/node@25.9.3)':
     optionalDependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
 
   '@rushstack/rig-package@0.7.3':
     dependencies:
       jju: 1.4.0
       resolve: 1.22.12
 
-  '@rushstack/terminal@0.24.0(@types/node@18.19.130)':
+  '@rushstack/terminal@0.24.2(@types/node@25.9.3)':
     dependencies:
-      '@rushstack/node-core-library': 5.23.1(@types/node@18.19.130)
-      '@rushstack/problem-matcher': 0.2.1(@types/node@18.19.130)
+      '@rushstack/node-core-library': 5.23.3(@types/node@25.9.3)
+      '@rushstack/problem-matcher': 0.2.1(@types/node@25.9.3)
       supports-color: 8.1.1
     optionalDependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
 
-  '@rushstack/ts-command-line@5.3.9(@types/node@18.19.130)':
+  '@rushstack/ts-command-line@5.3.12(@types/node@25.9.3)':
     dependencies:
-      '@rushstack/terminal': 0.24.0(@types/node@18.19.130)
+      '@rushstack/terminal': 0.24.2(@types/node@25.9.3)
       '@types/argparse': 1.0.38
       argparse: 1.0.10
       string-argv: 0.3.2
     transitivePeerDependencies:
       - '@types/node'
 
-  '@sentry-internal/browser-utils@10.50.0':
+  '@sentry/browser-utils@10.67.0':
     dependencies:
-      '@sentry/core': 10.50.0
+      '@sentry/conventions': 0.16.0
+      '@sentry/core': 10.67.0
 
-  '@sentry-internal/browser-utils@10.51.0':
+  '@sentry/browser-utils@10.68.0':
     dependencies:
-      '@sentry/core': 10.51.0
+      '@sentry/conventions': 0.16.0
+      '@sentry/core': 10.68.0
 
-  '@sentry-internal/feedback@10.50.0':
+  '@sentry/browser@10.67.0':
     dependencies:
-      '@sentry/core': 10.50.0
+      '@sentry/browser-utils': 10.67.0
+      '@sentry/conventions': 0.16.0
+      '@sentry/core': 10.67.0
+      '@sentry/feedback': 10.67.0
+      '@sentry/replay': 10.67.0
+      '@sentry/replay-canvas': 10.67.0
 
-  '@sentry-internal/feedback@10.51.0':
+  '@sentry/browser@10.68.0':
     dependencies:
-      '@sentry/core': 10.51.0
+      '@sentry/browser-utils': 10.68.0
+      '@sentry/conventions': 0.16.0
+      '@sentry/core': 10.68.0
+      '@sentry/feedback': 10.68.0
+      '@sentry/replay': 10.68.0
+      '@sentry/replay-canvas': 10.68.0
 
-  '@sentry-internal/replay-canvas@10.50.0':
+  '@sentry/bundler-plugins@10.65.0(rollup@4.60.1)(supports-color@10.2.2)(webpack@5.109.2)':
     dependencies:
-      '@sentry-internal/replay': 10.50.0
-      '@sentry/core': 10.50.0
-
-  '@sentry-internal/replay-canvas@10.51.0':
-    dependencies:
-      '@sentry-internal/replay': 10.51.0
-      '@sentry/core': 10.51.0
-
-  '@sentry-internal/replay@10.50.0':
-    dependencies:
-      '@sentry-internal/browser-utils': 10.50.0
-      '@sentry/core': 10.50.0
-
-  '@sentry-internal/replay@10.51.0':
-    dependencies:
-      '@sentry-internal/browser-utils': 10.51.0
-      '@sentry/core': 10.51.0
-
-  '@sentry/babel-plugin-component-annotate@5.2.1': {}
-
-  '@sentry/browser@10.50.0':
-    dependencies:
-      '@sentry-internal/browser-utils': 10.50.0
-      '@sentry-internal/feedback': 10.50.0
-      '@sentry-internal/replay': 10.50.0
-      '@sentry-internal/replay-canvas': 10.50.0
-      '@sentry/core': 10.50.0
-
-  '@sentry/browser@10.51.0':
-    dependencies:
-      '@sentry-internal/browser-utils': 10.51.0
-      '@sentry-internal/feedback': 10.51.0
-      '@sentry-internal/replay': 10.51.0
-      '@sentry-internal/replay-canvas': 10.51.0
-      '@sentry/core': 10.51.0
-
-  '@sentry/bundler-plugin-core@5.2.1(encoding@0.1.13)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@sentry/babel-plugin-component-annotate': 5.2.1
-      '@sentry/cli': 2.58.5(encoding@0.1.13)
-      dotenv: 16.6.1
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@sentry/cli': 2.58.6(supports-color@10.2.2)
+      '@sentry/core': 10.65.0
+      dotenv: 17.4.2
       find-up: 5.0.0
       glob: 13.0.6
       magic-string: 0.30.21
+    optionalDependencies:
+      rollup: 4.60.1
+      webpack: 5.109.2(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack-cli@7.2.2)
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  '@sentry/cli-darwin@2.58.5':
+  '@sentry/cli-darwin@2.58.6':
     optional: true
 
-  '@sentry/cli-linux-arm64@2.58.5':
+  '@sentry/cli-linux-arm64@2.58.6':
     optional: true
 
-  '@sentry/cli-linux-arm@2.58.5':
+  '@sentry/cli-linux-arm@2.58.6':
     optional: true
 
-  '@sentry/cli-linux-i686@2.58.5':
+  '@sentry/cli-linux-i686@2.58.6':
     optional: true
 
-  '@sentry/cli-linux-x64@2.58.5':
+  '@sentry/cli-linux-x64@2.58.6':
     optional: true
 
-  '@sentry/cli-win32-arm64@2.58.5':
+  '@sentry/cli-win32-arm64@2.58.6':
     optional: true
 
-  '@sentry/cli-win32-i686@2.58.5':
+  '@sentry/cli-win32-i686@2.58.6':
     optional: true
 
-  '@sentry/cli-win32-x64@2.58.5':
+  '@sentry/cli-win32-x64@2.58.6':
     optional: true
 
-  '@sentry/cli@2.58.5(encoding@0.1.13)':
+  '@sentry/cli@2.58.6(supports-color@10.2.2)':
     dependencies:
-      https-proxy-agent: 5.0.1
-      node-fetch: 2.7.0(encoding@0.1.13)
+      https-proxy-agent: 5.0.1(supports-color@10.2.2)
+      node-fetch: 2.7.0
       progress: 2.0.3
       proxy-from-env: 1.1.0
       which: 2.0.2
     optionalDependencies:
-      '@sentry/cli-darwin': 2.58.5
-      '@sentry/cli-linux-arm': 2.58.5
-      '@sentry/cli-linux-arm64': 2.58.5
-      '@sentry/cli-linux-i686': 2.58.5
-      '@sentry/cli-linux-x64': 2.58.5
-      '@sentry/cli-win32-arm64': 2.58.5
-      '@sentry/cli-win32-i686': 2.58.5
-      '@sentry/cli-win32-x64': 2.58.5
+      '@sentry/cli-darwin': 2.58.6
+      '@sentry/cli-linux-arm': 2.58.6
+      '@sentry/cli-linux-arm64': 2.58.6
+      '@sentry/cli-linux-i686': 2.58.6
+      '@sentry/cli-linux-x64': 2.58.6
+      '@sentry/cli-win32-arm64': 2.58.6
+      '@sentry/cli-win32-i686': 2.58.6
+      '@sentry/cli-win32-x64': 2.58.6
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  '@sentry/core@10.50.0': {}
+  '@sentry/conventions@0.15.1': {}
 
-  '@sentry/core@10.51.0': {}
+  '@sentry/conventions@0.16.0': {}
 
-  '@sentry/electron@7.13.0':
+  '@sentry/core@10.65.0':
     dependencies:
-      '@sentry/browser': 10.50.0
-      '@sentry/core': 10.50.0
-      '@sentry/node': 10.50.0
+      '@sentry/conventions': 0.15.1
+
+  '@sentry/core@10.67.0':
+    dependencies:
+      '@sentry/conventions': 0.16.0
+
+  '@sentry/core@10.68.0':
+    dependencies:
+      '@sentry/conventions': 0.16.0
+
+  '@sentry/electron@7.16.0(@opentelemetry/core@2.10.0)(supports-color@10.2.2)':
+    dependencies:
+      '@sentry/browser': 10.67.0
+      '@sentry/core': 10.67.0
+      '@sentry/node': 10.67.0(@opentelemetry/core@2.10.0)(supports-color@10.2.2)
     transitivePeerDependencies:
+      - '@opentelemetry/core'
       - '@opentelemetry/exporter-trace-otlp-http'
       - supports-color
 
-  '@sentry/node-core@10.50.0(@opentelemetry/api@1.9.1)(@opentelemetry/core@2.7.1(@opentelemetry/api@1.9.1))(@opentelemetry/instrumentation@0.214.0(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.7.1(@opentelemetry/api@1.9.1))(@opentelemetry/semantic-conventions@1.40.0)':
+  '@sentry/feedback@10.67.0':
     dependencies:
-      '@sentry/core': 10.50.0
-      '@sentry/opentelemetry': 10.50.0(@opentelemetry/api@1.9.1)(@opentelemetry/core@2.7.1(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.7.1(@opentelemetry/api@1.9.1))(@opentelemetry/semantic-conventions@1.40.0)
-      import-in-the-middle: 3.0.1
+      '@sentry/core': 10.67.0
+
+  '@sentry/feedback@10.68.0':
+    dependencies:
+      '@sentry/core': 10.68.0
+
+  '@sentry/node-core@10.67.0(@opentelemetry/api@1.9.1)(@opentelemetry/core@2.10.0)(@opentelemetry/instrumentation@0.220.0)(@opentelemetry/sdk-trace-base@2.10.0)':
+    dependencies:
+      '@sentry/conventions': 0.16.0
+      '@sentry/core': 10.67.0
+      '@sentry/opentelemetry': 10.67.0(@opentelemetry/api@1.9.1)(@opentelemetry/core@2.10.0)(@opentelemetry/sdk-trace-base@2.10.0)
+      import-in-the-middle: 3.3.2
     optionalDependencies:
       '@opentelemetry/api': 1.9.1
-      '@opentelemetry/core': 2.7.1(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/sdk-trace-base': 2.7.1(@opentelemetry/api@1.9.1)
-      '@opentelemetry/semantic-conventions': 1.40.0
+      '@opentelemetry/core': 2.10.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/instrumentation': 0.220.0(@opentelemetry/api@1.9.1)(supports-color@10.2.2)
+      '@opentelemetry/sdk-trace-base': 2.10.0(@opentelemetry/api@1.9.1)
 
-  '@sentry/node@10.50.0':
+  '@sentry/node@10.67.0(@opentelemetry/core@2.10.0)(supports-color@10.2.2)':
     dependencies:
-      '@fastify/otel': 0.18.0(@opentelemetry/api@1.9.1)
       '@opentelemetry/api': 1.9.1
-      '@opentelemetry/core': 2.7.1(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation': 0.214.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation-amqplib': 0.61.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation-connect': 0.57.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation-dataloader': 0.31.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation-fs': 0.33.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation-generic-pool': 0.57.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation-graphql': 0.62.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation-hapi': 0.60.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation-http': 0.214.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation-ioredis': 0.62.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation-kafkajs': 0.23.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation-knex': 0.58.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation-koa': 0.62.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation-lru-memoizer': 0.58.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation-mongodb': 0.67.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation-mongoose': 0.60.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation-mysql': 0.60.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation-mysql2': 0.60.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation-pg': 0.66.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation-redis': 0.62.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/instrumentation-tedious': 0.33.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/sdk-trace-base': 2.7.1(@opentelemetry/api@1.9.1)
-      '@opentelemetry/semantic-conventions': 1.40.0
-      '@prisma/instrumentation': 7.6.0(@opentelemetry/api@1.9.1)
-      '@sentry/core': 10.50.0
-      '@sentry/node-core': 10.50.0(@opentelemetry/api@1.9.1)(@opentelemetry/core@2.7.1(@opentelemetry/api@1.9.1))(@opentelemetry/instrumentation@0.214.0(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.7.1(@opentelemetry/api@1.9.1))(@opentelemetry/semantic-conventions@1.40.0)
-      '@sentry/opentelemetry': 10.50.0(@opentelemetry/api@1.9.1)(@opentelemetry/core@2.7.1(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.7.1(@opentelemetry/api@1.9.1))(@opentelemetry/semantic-conventions@1.40.0)
-      import-in-the-middle: 3.0.1
+      '@opentelemetry/instrumentation': 0.220.0(@opentelemetry/api@1.9.1)(supports-color@10.2.2)
+      '@opentelemetry/sdk-trace-base': 2.10.0(@opentelemetry/api@1.9.1)
+      '@sentry/conventions': 0.16.0
+      '@sentry/core': 10.67.0
+      '@sentry/node-core': 10.67.0(@opentelemetry/api@1.9.1)(@opentelemetry/core@2.10.0)(@opentelemetry/instrumentation@0.220.0)(@opentelemetry/sdk-trace-base@2.10.0)
+      '@sentry/opentelemetry': 10.67.0(@opentelemetry/api@1.9.1)(@opentelemetry/core@2.10.0)(@opentelemetry/sdk-trace-base@2.10.0)
+      '@sentry/server-utils': 10.67.0(supports-color@10.2.2)
+      import-in-the-middle: 3.3.2
     transitivePeerDependencies:
+      - '@opentelemetry/core'
       - '@opentelemetry/exporter-trace-otlp-http'
       - supports-color
 
-  '@sentry/opentelemetry@10.50.0(@opentelemetry/api@1.9.1)(@opentelemetry/core@2.7.1(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.7.1(@opentelemetry/api@1.9.1))(@opentelemetry/semantic-conventions@1.40.0)':
+  '@sentry/opentelemetry@10.67.0(@opentelemetry/api@1.9.1)(@opentelemetry/core@2.10.0)(@opentelemetry/sdk-trace-base@2.10.0)':
     dependencies:
       '@opentelemetry/api': 1.9.1
-      '@opentelemetry/core': 2.7.1(@opentelemetry/api@1.9.1)
-      '@opentelemetry/sdk-trace-base': 2.7.1(@opentelemetry/api@1.9.1)
-      '@opentelemetry/semantic-conventions': 1.40.0
-      '@sentry/core': 10.50.0
+      '@opentelemetry/core': 2.10.0(@opentelemetry/api@1.9.1)
+      '@opentelemetry/sdk-trace-base': 2.10.0(@opentelemetry/api@1.9.1)
+      '@sentry/conventions': 0.16.0
+      '@sentry/core': 10.67.0
 
-  '@sentry/webpack-plugin@5.2.1(encoding@0.1.13)(webpack@5.106.2)':
+  '@sentry/replay-canvas@10.67.0':
     dependencies:
-      '@sentry/bundler-plugin-core': 5.2.1(encoding@0.1.13)
-      webpack: 5.106.2(webpack-cli@7.0.2)
+      '@sentry/core': 10.67.0
+      '@sentry/replay': 10.67.0
+
+  '@sentry/replay-canvas@10.68.0':
+    dependencies:
+      '@sentry/core': 10.68.0
+      '@sentry/replay': 10.68.0
+
+  '@sentry/replay@10.67.0':
+    dependencies:
+      '@sentry/browser-utils': 10.67.0
+      '@sentry/core': 10.67.0
+
+  '@sentry/replay@10.68.0':
+    dependencies:
+      '@sentry/browser-utils': 10.68.0
+      '@sentry/core': 10.68.0
+
+  '@sentry/server-utils@10.67.0(supports-color@10.2.2)':
+    dependencies:
+      '@apm-js-collab/code-transformer-bundler-plugins': 0.7.3
+      '@apm-js-collab/tracing-hooks': 0.13.0(supports-color@10.2.2)
+      '@sentry/conventions': 0.16.0
+      '@sentry/core': 10.67.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@sentry/webpack-plugin@5.4.0(rollup@4.60.1)(supports-color@10.2.2)(webpack@5.109.2)':
+    dependencies:
+      '@sentry/bundler-plugins': 10.65.0(rollup@4.60.1)(supports-color@10.2.2)(webpack@5.109.2)
+      webpack: 5.109.2(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack-cli@7.2.2)
     transitivePeerDependencies:
       - encoding
+      - rollup
       - supports-color
 
   '@shikijs/core@2.5.0':
@@ -17586,36 +18133,37 @@ snapshots:
 
   '@shikijs/vscode-textmate@10.0.2': {}
 
-  '@sigstore/bundle@4.0.0':
+  '@sigstore/bundle@5.0.0':
     dependencies:
       '@sigstore/protobuf-specs': 0.5.0
 
-  '@sigstore/core@3.2.0': {}
+  '@sigstore/core@4.0.0': {}
 
   '@sigstore/protobuf-specs@0.5.0': {}
 
-  '@sigstore/sign@4.1.1':
+  '@sigstore/sign@5.0.0(supports-color@10.2.2)':
     dependencies:
       '@gar/promise-retry': 1.0.3
-      '@sigstore/bundle': 4.0.0
-      '@sigstore/core': 3.2.0
+      '@sigstore/bundle': 5.0.0
+      '@sigstore/core': 4.0.0
       '@sigstore/protobuf-specs': 0.5.0
-      make-fetch-happen: 15.0.5
-      proc-log: 6.1.0
+      make-fetch-happen: 16.0.1(supports-color@10.2.2)
+      proc-log: 7.0.0
+    transitivePeerDependencies:
+      - kerberos
+      - supports-color
+
+  '@sigstore/tuf@5.0.0(supports-color@10.2.2)':
+    dependencies:
+      '@sigstore/protobuf-specs': 0.5.0
+      tuf-js: 6.0.0(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@sigstore/tuf@4.0.2':
+  '@sigstore/verify@4.0.0':
     dependencies:
-      '@sigstore/protobuf-specs': 0.5.0
-      tuf-js: 4.1.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@sigstore/verify@3.1.0':
-    dependencies:
-      '@sigstore/bundle': 4.0.0
-      '@sigstore/core': 3.2.0
+      '@sigstore/bundle': 5.0.0
+      '@sigstore/core': 4.0.0
       '@sigstore/protobuf-specs': 0.5.0
 
   '@sinclair/typebox@0.34.49': {}
@@ -17628,7 +18176,7 @@ snapshots:
     dependencies:
       type-detect: 4.0.8
 
-  '@sinonjs/fake-timers@15.1.1':
+  '@sinonjs/fake-timers@15.4.0':
     dependencies:
       '@sinonjs/commons': 3.0.1
 
@@ -17636,184 +18184,204 @@ snapshots:
 
   '@standard-schema/spec@1.1.0': {}
 
-  '@storybook/addon-a11y@10.3.6(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))':
+  '@storybook/addon-a11y@10.5.5(storybook@10.5.5)':
     dependencies:
       '@storybook/global': 5.0.0
-      axe-core: 4.11.4
-      storybook: 10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      axe-core: 4.12.1
+      storybook: 10.5.5(@types/react@19.2.18)(prettier@2.8.8)(react@19.2.8)
 
-  '@storybook/addon-designs@11.1.3(@storybook/addon-docs@10.3.6(@types/react@19.2.14)(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(webpack@5.106.2(esbuild@0.27.4)))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))':
+  '@storybook/addon-designs@11.1.4(@storybook/addon-docs@10.5.5)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)(storybook@10.5.5)':
     dependencies:
-      '@figspec/react': 2.0.1(@types/react@19.2.14)(react@19.2.6)
-      storybook: 10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@figspec/react': 2.0.1(@types/react@19.2.18)(react@19.2.8)
+      storybook: 10.5.5(@types/react@19.2.18)(prettier@2.8.8)(react@19.2.8)
     optionalDependencies:
-      '@storybook/addon-docs': 10.3.6(@types/react@19.2.14)(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(webpack@5.106.2(esbuild@0.27.4))
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
+      '@storybook/addon-docs': 10.5.5(@types/react-dom@19.2.3)(@types/react@19.2.18)(esbuild@0.27.4)(rollup@4.60.1)(storybook@10.5.5)(vite@8.2.0)(webpack@5.109.2)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
     transitivePeerDependencies:
       - '@types/react'
 
-  '@storybook/addon-docs@10.3.6(@types/react@19.2.14)(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(webpack@5.106.2(esbuild@0.27.4))':
+  '@storybook/addon-docs@10.5.5(@types/react-dom@19.2.3)(@types/react@19.2.18)(esbuild@0.27.4)(rollup@4.60.1)(storybook@10.5.5)(vite@8.2.0)(webpack@5.109.2)':
     dependencies:
-      '@mdx-js/react': 3.1.1(@types/react@19.2.14)(react@19.2.6)
-      '@storybook/csf-plugin': 10.3.6(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(webpack@5.106.2(esbuild@0.27.4))
-      '@storybook/icons': 2.0.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@storybook/react-dom-shim': 10.3.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
-      storybook: 10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      ts-dedent: 2.2.0
+      '@mdx-js/react': 3.1.1(@types/react@19.2.18)(react@19.2.8)
+      '@storybook/csf-plugin': 10.5.5(esbuild@0.27.4)(rollup@4.60.1)(storybook@10.5.5)(vite@8.2.0)(webpack@5.109.2)
+      '@storybook/icons': 2.1.0(react@19.2.8)
+      '@storybook/react-dom-shim': 10.5.5(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)(storybook@10.5.5)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      storybook: 10.5.5(@types/react@19.2.18)(prettier@2.8.8)(react@19.2.8)
+      ts-dedent: 2.3.0
+    optionalDependencies:
+      '@types/react': 19.2.18
     transitivePeerDependencies:
-      - '@types/react'
+      - '@types/react-dom'
       - esbuild
       - rollup
       - vite
       - webpack
 
-  '@storybook/addon-vitest@10.3.6(@vitest/browser-playwright@4.1.5)(@vitest/browser@4.1.5)(@vitest/runner@4.1.5)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vitest@4.1.5)':
+  '@storybook/addon-vitest@10.5.5(@vitest/browser-playwright@4.1.10)(@vitest/browser@4.1.10)(@vitest/runner@4.1.10)(react@19.2.8)(storybook@10.5.5)(vitest@4.1.10)':
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/icons': 2.0.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      storybook: 10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@storybook/icons': 2.1.0(react@19.2.8)
+      storybook: 10.5.5(@types/react@19.2.18)(prettier@2.8.8)(react@19.2.8)
     optionalDependencies:
-      '@vitest/browser': 4.1.5(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(vitest@4.1.5)
-      '@vitest/browser-playwright': 4.1.5(playwright@1.59.1)(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(vitest@4.1.5)
-      '@vitest/runner': 4.1.5
-      vitest: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.5)(@vitest/coverage-v8@4.1.5)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))
+      '@vitest/browser': 4.1.10(vite@8.2.0)(vitest@4.1.10)
+      '@vitest/browser-playwright': 4.1.10(playwright@1.61.1)(vite@8.2.0)(vitest@4.1.10)
+      '@vitest/runner': 4.1.10
+      vitest: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(happy-dom@20.11.1)(jsdom@26.1.0)(vite@8.2.0)
     transitivePeerDependencies:
       - react
-      - react-dom
 
-  '@storybook/builder-vite@10.3.6(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(webpack@5.106.2(esbuild@0.27.4))':
+  '@storybook/builder-vite@10.5.5(esbuild@0.27.4)(rollup@4.60.1)(storybook@10.5.5)(vite@8.2.0)(webpack@5.109.2)':
     dependencies:
-      '@storybook/csf-plugin': 10.3.6(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(webpack@5.106.2(esbuild@0.27.4))
-      storybook: 10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      ts-dedent: 2.2.0
-      vite: 8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4)
+      '@storybook/csf-plugin': 10.5.5(esbuild@0.27.4)(rollup@4.60.1)(storybook@10.5.5)(vite@8.2.0)(webpack@5.109.2)
+      storybook: 10.5.5(@types/react@19.2.18)(prettier@2.8.8)(react@19.2.8)
+      ts-dedent: 2.3.0
+      vite: 8.2.0(@types/node@25.9.3)(esbuild@0.27.4)(jiti@2.7.0)(sugarss@5.0.1)(terser@5.49.0)(yaml@2.9.0)
     transitivePeerDependencies:
       - esbuild
       - rollup
       - webpack
 
-  '@storybook/csf-plugin@10.3.6(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(webpack@5.106.2(esbuild@0.27.4))':
+  '@storybook/csf-plugin@10.5.5(esbuild@0.27.4)(rollup@4.60.1)(storybook@10.5.5)(vite@8.2.0)(webpack@5.109.2)':
     dependencies:
-      storybook: 10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      storybook: 10.5.5(@types/react@19.2.18)(prettier@2.8.8)(react@19.2.8)
       unplugin: 2.3.11
     optionalDependencies:
       esbuild: 0.27.4
-      rollup: 4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8)
-      vite: 8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4)
-      webpack: 5.106.2(esbuild@0.27.4)
+      rollup: 4.60.1
+      vite: 8.2.0(@types/node@25.9.3)(esbuild@0.27.4)(jiti@2.7.0)(sugarss@5.0.1)(terser@5.49.0)(yaml@2.9.0)
+      webpack: 5.109.2(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack-cli@7.2.2)
 
   '@storybook/global@5.0.0': {}
 
-  '@storybook/icons@2.0.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@storybook/icons@2.1.0(react@19.2.8)':
     dependencies:
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
+      react: 19.2.8
 
-  '@storybook/react-dom-shim@10.3.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))':
+  '@storybook/react-dom-shim@10.5.5(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)(storybook@10.5.5)':
     dependencies:
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
-      storybook: 10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      storybook: 10.5.5(@types/react@19.2.18)(prettier@2.8.8)(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.3(@types/react@19.2.18)
 
-  '@storybook/react-vite@10.3.6(esbuild@0.27.4)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(typescript@6.0.3)(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(webpack@5.106.2(esbuild@0.27.4))':
+  '@storybook/react-vite@10.5.5(@types/react-dom@19.2.3)(@types/react@19.2.18)(@typescript/typescript6@6.0.2)(esbuild@0.27.4)(react-dom@19.2.8)(react@19.2.8)(rollup@4.60.1)(storybook@10.5.5)(supports-color@10.2.2)(vite@8.2.0)(webpack@5.109.2)':
     dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.7.0(typescript@6.0.3)(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))
-      '@rollup/pluginutils': 5.3.0(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))
-      '@storybook/builder-vite': 10.3.6(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(webpack@5.106.2(esbuild@0.27.4))
-      '@storybook/react': 10.3.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(typescript@6.0.3)
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.7.0(@typescript/typescript6@6.0.2)(vite@8.2.0)
+      '@rollup/pluginutils': 5.4.0(rollup@4.60.1)
+      '@storybook/builder-vite': 10.5.5(esbuild@0.27.4)(rollup@4.60.1)(storybook@10.5.5)(vite@8.2.0)(webpack@5.109.2)
+      '@storybook/react': 10.5.5(@types/react-dom@19.2.3)(@types/react@19.2.18)(@typescript/typescript6@6.0.2)(react-dom@19.2.8)(react@19.2.8)(storybook@10.5.5)(supports-color@10.2.2)
       empathic: 2.0.1
       magic-string: 0.30.21
-      react: 19.2.6
-      react-docgen: 8.0.3
-      react-dom: 19.2.6(react@19.2.6)
+      react: 19.2.8
+      react-docgen: 8.0.3(supports-color@10.2.2)
+      react-dom: 19.2.8(react@19.2.8)
       resolve: 1.22.12
-      storybook: 10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      storybook: 10.5.5(@types/react@19.2.18)(prettier@2.8.8)(react@19.2.8)
       tsconfig-paths: 4.2.0
-      vite: 8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4)
+      vite: 8.2.0(@types/node@25.9.3)(esbuild@0.27.4)(jiti@2.7.0)(sugarss@5.0.1)(terser@5.49.0)(yaml@2.9.0)
+    optionalDependencies:
+      typescript: '@typescript/typescript6@6.0.2'
     transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
       - esbuild
       - rollup
       - supports-color
-      - typescript
       - webpack
 
-  '@storybook/react@10.3.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(typescript@6.0.3)':
+  '@storybook/react@10.5.5(@types/react-dom@19.2.3)(@types/react@19.2.18)(@typescript/typescript6@6.0.2)(react-dom@19.2.8)(react@19.2.8)(storybook@10.5.5)(supports-color@10.2.2)':
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/react-dom-shim': 10.3.6(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))
-      react: 19.2.6
-      react-docgen: 8.0.3
-      react-docgen-typescript: 2.4.0(typescript@6.0.3)
-      react-dom: 19.2.6(react@19.2.6)
-      storybook: 10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@storybook/react-dom-shim': 10.5.5(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)(storybook@10.5.5)
+      react: 19.2.8
+      react-docgen: 8.0.3(supports-color@10.2.2)
+      react-docgen-typescript: 2.4.0(@typescript/typescript6@6.0.2)
+      react-dom: 19.2.8(react@19.2.8)
+      storybook: 10.5.5(@types/react@19.2.18)(prettier@2.8.8)(react@19.2.8)
     optionalDependencies:
-      typescript: 6.0.3
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.3(@types/react@19.2.18)
+      typescript: '@typescript/typescript6@6.0.2'
     transitivePeerDependencies:
       - supports-color
 
-  '@stylistic/eslint-plugin@5.10.0(eslint@8.57.1)':
+  '@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.29.7)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@8.57.1)
-      '@typescript-eslint/types': 8.59.2
-      eslint: 8.57.1
-      eslint-visitor-keys: 4.2.1
-      espree: 10.4.0
-      estraverse: 5.3.0
-      picomatch: 4.0.4
+      '@babel/core': 7.29.7(supports-color@10.2.2)
 
-  '@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.29.0)':
+  '@svgr/babel-plugin-remove-jsx-attribute@8.0.0(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.29.7(supports-color@10.2.2)
 
-  '@svgr/babel-plugin-remove-jsx-attribute@8.0.0(@babel/core@7.29.0)':
+  '@svgr/babel-plugin-remove-jsx-empty-expression@8.0.0(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.29.7(supports-color@10.2.2)
 
-  '@svgr/babel-plugin-remove-jsx-empty-expression@8.0.0(@babel/core@7.29.0)':
+  '@svgr/babel-plugin-replace-jsx-attribute-value@8.0.0(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.29.7(supports-color@10.2.2)
 
-  '@svgr/babel-plugin-replace-jsx-attribute-value@8.0.0(@babel/core@7.29.0)':
+  '@svgr/babel-plugin-svg-dynamic-title@8.0.0(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.29.7(supports-color@10.2.2)
 
-  '@svgr/babel-plugin-svg-dynamic-title@8.0.0(@babel/core@7.29.0)':
+  '@svgr/babel-plugin-svg-em-dimensions@8.0.0(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.29.7(supports-color@10.2.2)
 
-  '@svgr/babel-plugin-svg-em-dimensions@8.0.0(@babel/core@7.29.0)':
+  '@svgr/babel-plugin-transform-react-native-svg@8.1.0(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.29.7(supports-color@10.2.2)
 
-  '@svgr/babel-plugin-transform-react-native-svg@8.1.0(@babel/core@7.29.0)':
+  '@svgr/babel-plugin-transform-svg-component@8.0.0(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.29.7(supports-color@10.2.2)
 
-  '@svgr/babel-plugin-transform-svg-component@8.0.0(@babel/core@7.29.0)':
+  '@svgr/babel-preset@8.1.0(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@svgr/babel-plugin-add-jsx-attribute': 8.0.0(@babel/core@7.29.7)
+      '@svgr/babel-plugin-remove-jsx-attribute': 8.0.0(@babel/core@7.29.7)
+      '@svgr/babel-plugin-remove-jsx-empty-expression': 8.0.0(@babel/core@7.29.7)
+      '@svgr/babel-plugin-replace-jsx-attribute-value': 8.0.0(@babel/core@7.29.7)
+      '@svgr/babel-plugin-svg-dynamic-title': 8.0.0(@babel/core@7.29.7)
+      '@svgr/babel-plugin-svg-em-dimensions': 8.0.0(@babel/core@7.29.7)
+      '@svgr/babel-plugin-transform-react-native-svg': 8.1.0(@babel/core@7.29.7)
+      '@svgr/babel-plugin-transform-svg-component': 8.0.0(@babel/core@7.29.7)
 
-  '@svgr/babel-preset@8.1.0(@babel/core@7.29.0)':
+  '@svgr/core@8.1.0(@typescript/typescript6@6.0.2)(supports-color@10.2.2)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@svgr/babel-plugin-add-jsx-attribute': 8.0.0(@babel/core@7.29.0)
-      '@svgr/babel-plugin-remove-jsx-attribute': 8.0.0(@babel/core@7.29.0)
-      '@svgr/babel-plugin-remove-jsx-empty-expression': 8.0.0(@babel/core@7.29.0)
-      '@svgr/babel-plugin-replace-jsx-attribute-value': 8.0.0(@babel/core@7.29.0)
-      '@svgr/babel-plugin-svg-dynamic-title': 8.0.0(@babel/core@7.29.0)
-      '@svgr/babel-plugin-svg-em-dimensions': 8.0.0(@babel/core@7.29.0)
-      '@svgr/babel-plugin-transform-react-native-svg': 8.1.0(@babel/core@7.29.0)
-      '@svgr/babel-plugin-transform-svg-component': 8.0.0(@babel/core@7.29.0)
-
-  '@svgr/core@8.1.0(typescript@6.0.3)':
-    dependencies:
-      '@babel/core': 7.29.0
-      '@svgr/babel-preset': 8.1.0(@babel/core@7.29.0)
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@svgr/babel-preset': 8.1.0(@babel/core@7.29.7)
       camelcase: 6.3.0
-      cosmiconfig: 8.3.6(typescript@6.0.3)
+      cosmiconfig: 8.3.6(@typescript/typescript6@6.0.2)
+      snake-case: 3.0.4
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  '@svgr/core@8.1.0(supports-color@10.2.2)(typescript@7.0.2)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@svgr/babel-preset': 8.1.0(@babel/core@7.29.7)
+      camelcase: 6.3.0
+      cosmiconfig: 8.3.6(typescript@7.0.2)
+      snake-case: 3.0.4
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  '@svgr/core@8.1.0(supports-color@7.2.0)(typescript@7.0.2)':
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@svgr/babel-preset': 8.1.0(@babel/core@7.29.7)
+      camelcase: 6.3.0
+      cosmiconfig: 8.3.6(typescript@7.0.2)
       snake-case: 3.0.4
     transitivePeerDependencies:
       - supports-color
@@ -17821,38 +18389,48 @@ snapshots:
 
   '@svgr/hast-util-to-babel-ast@8.0.0':
     dependencies:
-      '@babel/types': 7.29.0
+      '@babel/types': 7.29.8
       entities: 4.5.0
 
-  '@svgr/plugin-jsx@8.1.0(@svgr/core@8.1.0(typescript@6.0.3))':
+  '@svgr/plugin-jsx@8.1.0(@svgr/core@8.1.0)(supports-color@10.2.2)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@svgr/babel-preset': 8.1.0(@babel/core@7.29.0)
-      '@svgr/core': 8.1.0(typescript@6.0.3)
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@svgr/babel-preset': 8.1.0(@babel/core@7.29.7)
+      '@svgr/core': 8.1.0(@typescript/typescript6@6.0.2)(supports-color@10.2.2)
       '@svgr/hast-util-to-babel-ast': 8.0.0
       svg-parser: 2.0.4
     transitivePeerDependencies:
       - supports-color
 
-  '@svgr/plugin-svgo@8.1.0(@svgr/core@8.1.0(typescript@6.0.3))(typescript@6.0.3)':
+  '@svgr/plugin-jsx@8.1.0(@svgr/core@8.1.0)(supports-color@7.2.0)':
     dependencies:
-      '@svgr/core': 8.1.0(typescript@6.0.3)
-      cosmiconfig: 8.3.6(typescript@6.0.3)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@svgr/babel-preset': 8.1.0(@babel/core@7.29.7)
+      '@svgr/core': 8.1.0(supports-color@7.2.0)(typescript@7.0.2)
+      '@svgr/hast-util-to-babel-ast': 8.0.0
+      svg-parser: 2.0.4
+    transitivePeerDependencies:
+      - supports-color
+
+  '@svgr/plugin-svgo@8.1.0(@svgr/core@8.1.0)(@typescript/typescript6@6.0.2)':
+    dependencies:
+      '@svgr/core': 8.1.0(@typescript/typescript6@6.0.2)(supports-color@10.2.2)
+      cosmiconfig: 8.3.6(@typescript/typescript6@6.0.2)
       deepmerge: 4.3.1
-      svgo: 3.3.3
+      svgo: 3.3.4
     transitivePeerDependencies:
       - typescript
 
-  '@svgr/webpack@8.1.0(typescript@6.0.3)':
+  '@svgr/webpack@8.1.0(@typescript/typescript6@6.0.2)(supports-color@10.2.2)':
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/plugin-transform-react-constant-elements': 7.27.1(@babel/core@7.29.0)
-      '@babel/preset-env': 7.29.5(@babel/core@7.29.0)
-      '@babel/preset-react': 7.28.5(@babel/core@7.29.0)
-      '@babel/preset-typescript': 7.28.5(@babel/core@7.29.0)
-      '@svgr/core': 8.1.0(typescript@6.0.3)
-      '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(typescript@6.0.3))
-      '@svgr/plugin-svgo': 8.1.0(@svgr/core@8.1.0(typescript@6.0.3))(typescript@6.0.3)
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/plugin-transform-react-constant-elements': 7.27.1(@babel/core@7.29.7)
+      '@babel/preset-env': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/preset-react': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@babel/preset-typescript': 7.29.7(@babel/core@7.29.7)(supports-color@10.2.2)
+      '@svgr/core': 8.1.0(@typescript/typescript6@6.0.2)(supports-color@10.2.2)
+      '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0)(supports-color@10.2.2)
+      '@svgr/plugin-svgo': 8.1.0(@svgr/core@8.1.0)(@typescript/typescript6@6.0.2)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -17861,9 +18439,17 @@ snapshots:
     dependencies:
       defer-to-connect: 2.0.1
 
-  '@testcontainers/postgresql@11.14.0':
+  '@tanstack/react-virtual@3.14.8(react-dom@19.2.8)(react@19.2.8)':
     dependencies:
-      testcontainers: 11.14.0
+      '@tanstack/virtual-core': 3.17.6(patch_hash=9db9d80c4fe7a7a9911643522aef9bc9359075570c38f3d847ff75ed635d921c)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
+  '@tanstack/virtual-core@3.17.6(patch_hash=9db9d80c4fe7a7a9911643522aef9bc9359075570c38f3d847ff75ed635d921c)': {}
+
+  '@testcontainers/postgresql@12.0.4(supports-color@10.2.2)':
+    dependencies:
+      testcontainers: 12.0.4(supports-color@10.2.2)
     transitivePeerDependencies:
       - bare-abort-controller
       - bare-buffer
@@ -17872,8 +18458,8 @@ snapshots:
 
   '@testing-library/dom@10.4.1':
     dependencies:
-      '@babel/code-frame': 7.29.0
-      '@babel/runtime': 7.29.2
+      '@babel/code-frame': 7.29.7
+      '@babel/runtime': 7.29.7
       '@types/aria-query': 5.0.4
       aria-query: 5.3.0
       dom-accessibility-api: 0.5.16
@@ -17890,15 +18476,25 @@ snapshots:
       picocolors: 1.1.1
       redent: 3.0.0
 
-  '@testing-library/react@16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@testing-library/jest-dom@7.0.0(@testing-library/dom@10.4.1)':
     dependencies:
-      '@babel/runtime': 7.29.2
+      '@adobe/css-tools': 4.4.4
       '@testing-library/dom': 10.4.1
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
+      aria-query: 5.3.2
+      css.escape: 1.5.1
+      dom-accessibility-api: 0.6.3
+      picocolors: 1.1.1
+      redent: 3.0.0
+
+  '@testing-library/react@16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@testing-library/dom': 10.4.1
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.14
-      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+      '@types/react': 19.2.18
+      '@types/react-dom': 19.2.3(@types/react@19.2.18)
 
   '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)':
     dependencies:
@@ -17906,12 +18502,12 @@ snapshots:
 
   '@tufjs/canonical-json@2.0.0': {}
 
-  '@tufjs/models@4.1.0':
+  '@tufjs/models@5.0.0':
     dependencies:
       '@tufjs/canonical-json': 2.0.0
-      minimatch: 10.2.5
+      minimatch: 10.2.6
 
-  '@tybys/wasm-util@0.10.1':
+  '@tybys/wasm-util@0.10.3':
     dependencies:
       tslib: 2.8.1
     optional: true
@@ -17928,39 +18524,39 @@ snapshots:
 
   '@types/babel__core@7.20.5':
     dependencies:
-      '@babel/parser': 7.29.2
-      '@babel/types': 7.29.0
+      '@babel/parser': 7.29.8
+      '@babel/types': 7.29.8
       '@types/babel__generator': 7.27.0
       '@types/babel__template': 7.4.4
       '@types/babel__traverse': 7.28.0
 
   '@types/babel__generator@7.27.0':
     dependencies:
-      '@babel/types': 7.29.0
+      '@babel/types': 7.29.8
 
   '@types/babel__template@7.4.4':
     dependencies:
-      '@babel/parser': 7.29.2
-      '@babel/types': 7.29.0
+      '@babel/parser': 7.29.8
+      '@babel/types': 7.29.8
 
   '@types/babel__traverse@7.28.0':
     dependencies:
-      '@babel/types': 7.29.0
+      '@babel/types': 7.29.8
 
   '@types/body-parser@1.19.6':
     dependencies:
       '@types/connect': 3.4.38
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
 
   '@types/bonjour@3.5.13':
     dependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
 
   '@types/cacheable-request@6.0.3':
     dependencies:
       '@types/http-cache-semantics': 4.2.0
       '@types/keyv': 3.1.4
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
       '@types/responselike': 1.0.3
 
   '@types/chai@5.2.3':
@@ -17973,13 +18569,11 @@ snapshots:
   '@types/connect-history-api-fallback@1.5.4':
     dependencies:
       '@types/express-serve-static-core': 5.1.1
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
 
   '@types/connect@3.4.38':
     dependencies:
-      '@types/node': 18.19.130
-
-  '@types/content-type@1.1.9': {}
+      '@types/node': 25.9.3
 
   '@types/counterpart@0.18.4': {}
 
@@ -18112,56 +18706,32 @@ snapshots:
 
   '@types/docker-modem@3.0.6':
     dependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
       '@types/ssh2': 1.15.5
 
   '@types/dockerode@4.0.1':
     dependencies:
       '@types/docker-modem': 3.0.6
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
       '@types/ssh2': 1.15.5
 
   '@types/doctrine@0.0.9': {}
 
   '@types/escape-html@1.0.4': {}
 
-  '@types/eslint-scope@3.7.7':
-    dependencies:
-      '@types/eslint': 9.6.1
-      '@types/estree': 1.0.9
-
-  '@types/eslint@9.6.1':
-    dependencies:
-      '@types/estree': 1.0.9
-      '@types/json-schema': 7.0.15
-
   '@types/estree@1.0.8': {}
 
   '@types/estree@1.0.9': {}
 
   '@types/events@3.0.3': {}
 
-  '@types/express-serve-static-core@4.19.8':
-    dependencies:
-      '@types/node': 18.19.130
-      '@types/qs': 6.14.0
-      '@types/range-parser': 1.2.7
-      '@types/send': 1.2.1
-
   '@types/express-serve-static-core@5.1.1':
     dependencies:
-      '@types/node': 18.19.130
-      '@types/qs': 6.14.0
+      '@types/node': 25.9.3
+      '@types/qs': 6.15.1
       '@types/range-parser': 1.2.7
       '@types/send': 1.2.1
 
-  '@types/express@4.17.25':
-    dependencies:
-      '@types/body-parser': 1.19.6
-      '@types/express-serve-static-core': 4.19.8
-      '@types/qs': 6.14.0
-      '@types/serve-static': 1.15.10
-
   '@types/express@5.0.6':
     dependencies:
       '@types/body-parser': 1.19.6
@@ -18172,7 +18742,7 @@ snapshots:
 
   '@types/fs-extra@9.0.13':
     dependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
 
   '@types/geojson@7946.0.16': {}
 
@@ -18182,9 +18752,9 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.3
 
-  '@types/hoist-non-react-statics@3.3.7(@types/react@19.2.14)':
+  '@types/hoist-non-react-statics@3.3.7(@types/react@19.2.18)':
     dependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
       hoist-non-react-statics: 3.3.2
 
   '@types/html-minifier-terser@6.1.0': {}
@@ -18193,10 +18763,6 @@ snapshots:
 
   '@types/http-errors@2.0.5': {}
 
-  '@types/http-proxy@1.17.17':
-    dependencies:
-      '@types/node': 18.19.130
-
   '@types/istanbul-lib-coverage@2.0.6': {}
 
   '@types/istanbul-lib-report@3.0.3':
@@ -18209,26 +18775,24 @@ snapshots:
 
   '@types/jest@30.0.0':
     dependencies:
-      expect: 30.3.0
+      expect: 30.4.1
       pretty-format: 30.4.1
 
   '@types/jitsi-meet@2.0.5': {}
 
   '@types/jsdom@21.1.7':
     dependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
       '@types/tough-cookie': 4.0.5
       parse5: 7.3.0
 
   '@types/json-schema@7.0.15': {}
 
-  '@types/json5@0.0.29': {}
-
   '@types/jsrsasign@10.5.15': {}
 
   '@types/keyv@3.1.4':
     dependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
 
   '@types/linkify-it@5.0.0': {}
 
@@ -18249,9 +18813,7 @@ snapshots:
 
   '@types/mdurl@2.0.0': {}
 
-  '@types/mdx@2.0.13(patch_hash=c209882c533714d2dcbf4cf397002125ea83677ef152eff403386611cd0f0d3a)': {}
-
-  '@types/mime@1.3.5': {}
+  '@types/mdx@2.0.14': {}
 
   '@types/minimist@1.2.5': {}
 
@@ -18259,26 +18821,20 @@ snapshots:
 
   '@types/ms@2.1.0': {}
 
-  '@types/mysql@2.15.27':
-    dependencies:
-      '@types/node': 18.19.130
-
   '@types/node-fetch@2.6.13':
     dependencies:
-      '@types/node': 18.19.130
-      form-data: 4.0.5
+      '@types/node': 25.9.3
+      form-data: 4.0.6
 
-  '@types/node@18.19.130':
+  '@types/node@25.9.3':
     dependencies:
-      undici-types: 5.26.5
-
-  '@types/normalize-package-data@2.4.4': {}
+      undici-types: 7.24.6
 
   '@types/npm-package-arg@6.1.4': {}
 
   '@types/npm-registry-fetch@8.0.9':
     dependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
       '@types/node-fetch': 2.6.13
       '@types/npm-package-arg': 6.1.4
       '@types/npmlog': 7.0.0
@@ -18286,71 +18842,53 @@ snapshots:
 
   '@types/npmlog@7.0.0':
     dependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
 
   '@types/pacote@11.1.8':
     dependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
       '@types/npm-registry-fetch': 8.0.9
       '@types/npmlog': 7.0.0
       '@types/ssri': 7.1.5
 
-  '@types/pako@2.0.4': {}
-
   '@types/parse-json@4.0.2': {}
 
-  '@types/pg-pool@2.0.7':
-    dependencies:
-      '@types/pg': 8.15.6
-
-  '@types/pg@8.15.6':
-    dependencies:
-      '@types/node': 18.19.130
-      pg-protocol: 1.13.0
-      pg-types: 2.2.0
-
   '@types/picomatch@4.0.2': {}
 
-  '@types/plist@3.0.5':
-    dependencies:
-      '@types/node': 18.19.130
-      xmlbuilder: 15.1.1
-    optional: true
-
   '@types/png-chunks-extract@1.0.2': {}
 
   '@types/postcss-import@14.0.3':
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
 
   '@types/qrcode@1.5.6':
     dependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
 
-  '@types/qs@6.14.0': {}
+  '@types/qs@6.15.1': {}
 
   '@types/range-parser@1.2.7': {}
 
   '@types/react-beautiful-dnd@13.1.8':
     dependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
 
-  '@types/react-dom@19.2.3(@types/react@19.2.14)':
+  '@types/react-dom@19.2.3(@types/react@19.2.18)':
     dependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
 
   '@types/react-redux@7.1.34':
     dependencies:
-      '@types/hoist-non-react-statics': 3.3.7(@types/react@19.2.14)
-      '@types/react': 19.2.14
+      '@types/hoist-non-react-statics': 3.3.7(@types/react@19.2.18)
+      '@types/react': 19.2.18
       hoist-non-react-statics: 3.3.2
       redux: 4.2.1
 
-  '@types/react-transition-group@4.4.12(@types/react@19.2.14)':
+  '@types/react-transition-group@4.4.12(@types/react@19.2.18)':
     dependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
 
-  '@types/react@19.2.14':
+  '@types/react@19.2.18':
     dependencies:
       csstype: 3.2.3
 
@@ -18358,64 +18896,47 @@ snapshots:
 
   '@types/responselike@1.0.3':
     dependencies:
-      '@types/node': 18.19.130
-
-  '@types/retry@0.12.2': {}
+      '@types/node': 25.9.3
 
   '@types/sanitize-html@2.16.1':
     dependencies:
       htmlparser2: 10.1.0
 
-  '@types/sdp-transform@2.15.0': {}
+  '@types/sdp-transform@3.0.0': {}
 
   '@types/seedrandom@3.0.8': {}
 
   '@types/semver@7.7.1': {}
 
-  '@types/send@0.17.6':
-    dependencies:
-      '@types/mime': 1.3.5
-      '@types/node': 18.19.130
-
   '@types/send@1.2.1':
     dependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
 
   '@types/serve-index@1.9.4':
     dependencies:
       '@types/express': 5.0.6
 
-  '@types/serve-static@1.15.10':
-    dependencies:
-      '@types/http-errors': 2.0.5
-      '@types/node': 18.19.130
-      '@types/send': 0.17.6
-
   '@types/serve-static@2.2.0':
     dependencies:
       '@types/http-errors': 2.0.5
-      '@types/node': 18.19.130
-
-  '@types/sockjs@0.3.36':
-    dependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
 
   '@types/ssh2-streams@0.1.13':
     dependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
 
   '@types/ssh2@0.5.52':
     dependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
       '@types/ssh2-streams': 0.1.13
 
   '@types/ssh2@1.15.5':
     dependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
 
   '@types/ssri@7.1.5':
     dependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
 
   '@types/stack-utils@2.0.3': {}
 
@@ -18425,10 +18946,6 @@ snapshots:
 
   '@types/tar-js@0.3.5': {}
 
-  '@types/tedious@4.0.14':
-    dependencies:
-      '@types/node': 18.19.130
-
   '@types/tough-cookie@4.0.5': {}
 
   '@types/trusted-types@2.0.7':
@@ -18438,14 +18955,13 @@ snapshots:
 
   '@types/unist@3.0.3': {}
 
-  '@types/verror@1.10.11':
-    optional: true
-
   '@types/web-bluetooth@0.0.21': {}
 
+  '@types/whatwg-mimetype@3.0.2': {}
+
   '@types/ws@8.18.1':
     dependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
 
   '@types/yargs-parser@21.0.3': {}
 
@@ -18453,161 +18969,191 @@ snapshots:
     dependencies:
       '@types/yargs-parser': 21.0.3
 
-  '@types/yauzl@2.10.3':
+  '@typescript-eslint/project-service@8.66.0(@typescript/typescript6@6.0.2)(supports-color@7.2.0)':
     dependencies:
-      '@types/node': 18.19.130
-    optional: true
-
-  '@typescript-eslint/eslint-plugin@8.59.2(@typescript-eslint/parser@8.59.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)(typescript@6.0.3)':
-    dependencies:
-      '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.59.2(eslint@8.57.1)(typescript@6.0.3)
-      '@typescript-eslint/scope-manager': 8.59.2
-      '@typescript-eslint/type-utils': 8.59.2(eslint@8.57.1)(typescript@6.0.3)
-      '@typescript-eslint/utils': 8.59.2(eslint@8.57.1)(typescript@6.0.3)
-      '@typescript-eslint/visitor-keys': 8.59.2
-      eslint: 8.57.1
-      ignore: 7.0.5
-      natural-compare: 1.4.0
-      ts-api-utils: 2.5.0(typescript@6.0.3)
-      typescript: 6.0.3
+      '@typescript-eslint/tsconfig-utils': 8.66.0(@typescript/typescript6@6.0.2)
+      '@typescript-eslint/types': 8.66.0
+      debug: 4.4.3(supports-color@7.2.0)
+      typescript: '@typescript/typescript6@6.0.2'
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.59.2(eslint@8.57.1)(typescript@6.0.3)':
+  '@typescript-eslint/scope-manager@8.66.0':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.59.2
-      '@typescript-eslint/types': 8.59.2
-      '@typescript-eslint/typescript-estree': 8.59.2(typescript@6.0.3)
-      '@typescript-eslint/visitor-keys': 8.59.2
-      debug: 4.4.3
-      eslint: 8.57.1
-      typescript: 6.0.3
+      '@typescript-eslint/types': 8.66.0
+      '@typescript-eslint/visitor-keys': 8.66.0
+
+  '@typescript-eslint/tsconfig-utils@8.66.0(@typescript/typescript6@6.0.2)':
+    dependencies:
+      typescript: '@typescript/typescript6@6.0.2'
+
+  '@typescript-eslint/types@8.66.0': {}
+
+  '@typescript-eslint/typescript-estree@8.66.0(@typescript/typescript6@6.0.2)(supports-color@7.2.0)':
+    dependencies:
+      '@typescript-eslint/project-service': 8.66.0(@typescript/typescript6@6.0.2)(supports-color@7.2.0)
+      '@typescript-eslint/tsconfig-utils': 8.66.0(@typescript/typescript6@6.0.2)
+      '@typescript-eslint/types': 8.66.0
+      '@typescript-eslint/visitor-keys': 8.66.0
+      debug: 4.4.3(supports-color@7.2.0)
+      minimatch: 10.2.6
+      semver: 7.8.5
+      tinyglobby: 0.2.17
+      ts-api-utils: 2.5.0(@typescript/typescript6@6.0.2)
+      typescript: '@typescript/typescript6@6.0.2'
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.59.2(typescript@6.0.3)':
+  '@typescript-eslint/utils@8.66.0(@typescript/typescript6@6.0.2)(eslint@8.57.1)(supports-color@7.2.0)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.59.2(typescript@6.0.3)
-      '@typescript-eslint/types': 8.59.2
-      debug: 4.4.3
-      typescript: 6.0.3
+      '@eslint-community/eslint-utils': 4.10.1(eslint@8.57.1)
+      '@typescript-eslint/scope-manager': 8.66.0
+      '@typescript-eslint/types': 8.66.0
+      '@typescript-eslint/typescript-estree': 8.66.0(@typescript/typescript6@6.0.2)(supports-color@7.2.0)
+      eslint: 8.57.1(supports-color@7.2.0)
+      typescript: '@typescript/typescript6@6.0.2'
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@8.59.2':
+  '@typescript-eslint/visitor-keys@8.66.0':
     dependencies:
-      '@typescript-eslint/types': 8.59.2
-      '@typescript-eslint/visitor-keys': 8.59.2
-
-  '@typescript-eslint/tsconfig-utils@8.59.2(typescript@6.0.3)':
-    dependencies:
-      typescript: 6.0.3
-
-  '@typescript-eslint/type-utils@8.59.2(eslint@8.57.1)(typescript@6.0.3)':
-    dependencies:
-      '@typescript-eslint/types': 8.59.2
-      '@typescript-eslint/typescript-estree': 8.59.2(typescript@6.0.3)
-      '@typescript-eslint/utils': 8.59.2(eslint@8.57.1)(typescript@6.0.3)
-      debug: 4.4.3
-      eslint: 8.57.1
-      ts-api-utils: 2.5.0(typescript@6.0.3)
-      typescript: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/types@8.59.2': {}
-
-  '@typescript-eslint/typescript-estree@8.59.2(typescript@6.0.3)':
-    dependencies:
-      '@typescript-eslint/project-service': 8.59.2(typescript@6.0.3)
-      '@typescript-eslint/tsconfig-utils': 8.59.2(typescript@6.0.3)
-      '@typescript-eslint/types': 8.59.2
-      '@typescript-eslint/visitor-keys': 8.59.2
-      debug: 4.4.3
-      minimatch: 10.2.5
-      semver: 7.7.4
-      tinyglobby: 0.2.16
-      ts-api-utils: 2.5.0(typescript@6.0.3)
-      typescript: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/utils@8.59.2(eslint@8.57.1)(typescript@6.0.3)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@8.57.1)
-      '@typescript-eslint/scope-manager': 8.59.2
-      '@typescript-eslint/types': 8.59.2
-      '@typescript-eslint/typescript-estree': 8.59.2(typescript@6.0.3)
-      eslint: 8.57.1
-      typescript: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@typescript-eslint/visitor-keys@8.59.2':
-    dependencies:
-      '@typescript-eslint/types': 8.59.2
+      '@typescript-eslint/types': 8.66.0
       eslint-visitor-keys: 5.0.1
 
-  '@ungap/structured-clone@1.3.0': {}
-
-  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
+  '@typescript/typescript-aix-ppc64@7.0.2':
     optional: true
 
-  '@unrs/resolver-binding-android-arm64@1.11.1':
+  '@typescript/typescript-darwin-arm64@7.0.2':
     optional: true
 
-  '@unrs/resolver-binding-darwin-arm64@1.11.1':
+  '@typescript/typescript-darwin-x64@7.0.2':
     optional: true
 
-  '@unrs/resolver-binding-darwin-x64@1.11.1':
+  '@typescript/typescript-freebsd-arm64@7.0.2':
     optional: true
 
-  '@unrs/resolver-binding-freebsd-x64@1.11.1':
+  '@typescript/typescript-freebsd-x64@7.0.2':
     optional: true
 
-  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
+  '@typescript/typescript-linux-arm64@7.0.2':
     optional: true
 
-  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
+  '@typescript/typescript-linux-arm@7.0.2':
     optional: true
 
-  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
+  '@typescript/typescript-linux-loong64@7.0.2':
     optional: true
 
-  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
+  '@typescript/typescript-linux-mips64el@7.0.2':
     optional: true
 
-  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
+  '@typescript/typescript-linux-ppc64@7.0.2':
     optional: true
 
-  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
+  '@typescript/typescript-linux-riscv64@7.0.2':
     optional: true
 
-  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
+  '@typescript/typescript-linux-s390x@7.0.2':
     optional: true
 
-  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
+  '@typescript/typescript-linux-x64@7.0.2':
     optional: true
 
-  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
+  '@typescript/typescript-netbsd-arm64@7.0.2':
     optional: true
 
-  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
+  '@typescript/typescript-netbsd-x64@7.0.2':
     optional: true
 
-  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
+  '@typescript/typescript-openbsd-arm64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-openbsd-x64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-sunos-x64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-win32-arm64@7.0.2':
+    optional: true
+
+  '@typescript/typescript-win32-x64@7.0.2':
+    optional: true
+
+  '@typescript/typescript6@6.0.2':
     dependencies:
-      '@napi-rs/wasm-runtime': 0.2.12
+      '@typescript/old': typescript@6.0.3
+
+  '@ungap/structured-clone@1.3.3': {}
+
+  '@unrs/resolver-binding-android-arm-eabi@1.12.2':
     optional: true
 
-  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
+  '@unrs/resolver-binding-android-arm64@1.12.2':
     optional: true
 
-  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
+  '@unrs/resolver-binding-darwin-arm64@1.12.2':
     optional: true
 
-  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
+  '@unrs/resolver-binding-darwin-x64@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-freebsd-x64@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm-gnueabihf@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm-musleabihf@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm64-gnu@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm64-musl@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-loong64-gnu@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-loong64-musl@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-ppc64-gnu@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-riscv64-gnu@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-riscv64-musl@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-s390x-gnu@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-x64-gnu@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-linux-x64-musl@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-openharmony-arm64@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-wasm32-wasi@1.12.2':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@napi-rs/wasm-runtime': 1.1.6(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+    optional: true
+
+  '@unrs/resolver-binding-win32-arm64-msvc@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-win32-ia32-msvc@1.12.2':
+    optional: true
+
+  '@unrs/resolver-binding-win32-x64-msvc@1.12.2':
     optional: true
 
   '@upsetjs/venn.js@2.0.0':
@@ -18615,75 +19161,103 @@ snapshots:
       d3-selection: 3.0.0
       d3-transition: 3.0.1(d3-selection@3.0.0)
 
-  '@vector-im/compound-design-tokens@10.1.1(@types/react@19.2.14)(react@19.2.6)':
+  '@vector-im/compound-design-tokens@10.2.1(@types/react@19.2.18)(react@19.2.8)':
     optionalDependencies:
-      '@types/react': 19.2.14
-      react: 19.2.6
+      '@types/react': 19.2.18
+      react: 19.2.8
 
-  '@vector-im/compound-web@9.3.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(@vector-im/compound-design-tokens@10.1.1(@types/react@19.2.14)(react@19.2.6))(react-dom@19.2.6(react@19.2.6))(react@19.2.6)':
+  '@vector-im/compound-web@10.0.1(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.3)(@types/react@19.2.18)(@vector-im/compound-design-tokens@10.2.1)(react-dom@19.2.8)(react@19.2.8)':
     dependencies:
-      '@floating-ui/react': 0.27.17(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@floating-ui/react': 0.27.17(react-dom@19.2.8)(react@19.2.8)
+      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8)(react@19.2.8)
       '@fontsource/inconsolata': 5.2.8
-      '@fontsource/inter': 5.2.8
-      '@radix-ui/react-context-menu': 2.2.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-dropdown-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-form': 0.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-progress': 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-separator': 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.14)(react@19.2.6)
-      '@vector-im/compound-design-tokens': 10.1.1(@types/react@19.2.14)(react@19.2.6)
+      '@fontsource/inter': 5.3.0
+      '@radix-ui/react-context-menu': 2.2.16(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-dropdown-menu': 2.1.16(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-form': 0.1.8(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-progress': 1.1.8(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-separator': 1.1.8(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      '@vector-im/compound-design-tokens': 10.2.1(@types/react@19.2.18)(react@19.2.8)
       classnames: 2.5.1
-      react: 19.2.6
-      vaul: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.8
+      vaul: 1.1.2(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
     transitivePeerDependencies:
       - '@types/react-dom'
       - react-dom
 
-  '@vector-im/matrix-wysiwyg@2.40.0(patch_hash=7bdf6150f2905bc2f055a6bcaa7b9d78fa7ffde82e800bcc454ac7b0096bd65e)(react@19.2.6)':
+  '@vector-im/compound-web@9.9.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.3.0)(@types/react-dom@19.2.3)(@types/react@19.2.18)(@vector-im/compound-design-tokens@10.2.1)(react-dom@19.2.8)(react@19.2.8)':
     dependencies:
-      react: 19.2.6
+      '@floating-ui/react': 0.27.17(react-dom@19.2.8)(react@19.2.8)
+      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.8)(react@19.2.8)
+      '@fontsource/inconsolata': 5.2.8
+      '@fontsource/inter': 5.3.0
+      '@radix-ui/react-context-menu': 2.2.16(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-dropdown-menu': 2.1.16(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-form': 0.1.8(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-progress': 1.1.8(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-separator': 1.1.8(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      '@vector-im/compound-design-tokens': 10.2.1(@types/react@19.2.18)(react@19.2.8)
+      classnames: 2.5.1
+      react: 19.2.8
+      vaul: 1.1.2(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+    optionalDependencies:
+      '@types/react': 19.2.18
+    transitivePeerDependencies:
+      - '@types/react-dom'
+      - react-dom
 
-  '@vitejs/plugin-vue@5.2.4(vite@5.4.21(@types/node@18.19.130)(lightningcss@1.32.0)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1))(vue@3.5.31(typescript@6.0.3))':
+  '@vector-im/matrix-wysiwyg@2.40.0(patch_hash=7bdf6150f2905bc2f055a6bcaa7b9d78fa7ffde82e800bcc454ac7b0096bd65e)(react@19.2.8)':
     dependencies:
-      vite: 5.4.21(@types/node@18.19.130)(lightningcss@1.32.0)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)
-      vue: 3.5.31(typescript@6.0.3)
+      react: 19.2.8
 
-  '@vitest/browser-playwright@4.1.5(playwright@1.59.1)(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(vitest@4.1.5)':
+  '@vitejs/plugin-react@6.0.5(vite@8.2.0)':
     dependencies:
-      '@vitest/browser': 4.1.5(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(vitest@4.1.5)
-      '@vitest/mocker': 4.1.5(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))
-      playwright: 1.59.1
+      '@rolldown/pluginutils': 1.0.1
+      vite: 8.2.0(@types/node@25.9.3)(esbuild@0.27.4)(jiti@2.7.0)(sugarss@5.0.1)(terser@5.49.0)(yaml@2.9.0)
+
+  '@vitejs/plugin-vue@5.2.4(vite@6.4.3)(vue@3.5.31)':
+    dependencies:
+      vite: 6.4.3(@types/node@25.9.3)(jiti@2.7.0)(lightningcss@1.33.0)(sugarss@5.0.1)(terser@5.49.0)(yaml@2.9.0)
+      vue: 3.5.31(@typescript/typescript6@6.0.2)
+
+  '@vitest/browser-playwright@4.1.10(playwright@1.61.1)(vite@8.2.0)(vitest@4.1.10)':
+    dependencies:
+      '@vitest/browser': 4.1.10(vite@8.2.0)(vitest@4.1.10)
+      '@vitest/mocker': 4.1.10(vite@8.2.0)
+      playwright: 1.61.1
       tinyrainbow: 3.1.0
-      vitest: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.5)(@vitest/coverage-v8@4.1.5)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))
+      vitest: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(happy-dom@20.11.1)(jsdom@26.1.0)(vite@8.2.0)
     transitivePeerDependencies:
       - bufferutil
       - msw
       - utf-8-validate
       - vite
 
-  '@vitest/browser@4.1.5(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(vitest@4.1.5)':
+  '@vitest/browser@4.1.10(vite@8.2.0)(vitest@4.1.10)':
     dependencies:
       '@blazediff/core': 1.9.1
-      '@vitest/mocker': 4.1.5(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))
-      '@vitest/utils': 4.1.5
+      '@vitest/mocker': 4.1.10(vite@8.2.0)
+      '@vitest/utils': 4.1.10
       magic-string: 0.30.21
       pngjs: 7.0.0
       sirv: 3.0.2
       tinyrainbow: 3.1.0
-      vitest: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.5)(@vitest/coverage-v8@4.1.5)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))
-      ws: 8.20.0
+      vitest: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(happy-dom@20.11.1)(jsdom@26.1.0)(vite@8.2.0)
+      ws: 8.21.1
     transitivePeerDependencies:
       - bufferutil
       - msw
       - utf-8-validate
       - vite
 
-  '@vitest/coverage-v8@4.1.5(@vitest/browser@4.1.5)(vitest@4.1.5)':
+  '@vitest/coverage-v8@4.1.10(@vitest/browser@4.1.10)(vitest@4.1.10)':
     dependencies:
       '@bcoe/v8-coverage': 1.0.2
-      '@vitest/utils': 4.1.5
+      '@vitest/utils': 4.1.10
       ast-v8-to-istanbul: 1.0.0
       istanbul-lib-coverage: 3.2.2
       istanbul-lib-report: 3.0.1
@@ -18692,9 +19266,9 @@ snapshots:
       obug: 2.1.1
       std-env: 4.1.0
       tinyrainbow: 3.1.0
-      vitest: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.5)(@vitest/coverage-v8@4.1.5)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))
+      vitest: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(happy-dom@20.11.1)(jsdom@26.1.0)(vite@8.2.0)
     optionalDependencies:
-      '@vitest/browser': 4.1.5(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(vitest@4.1.5)
+      '@vitest/browser': 4.1.10(vite@8.2.0)(vitest@4.1.10)
 
   '@vitest/expect@3.2.4':
     dependencies:
@@ -18704,40 +19278,40 @@ snapshots:
       chai: 5.3.3
       tinyrainbow: 2.0.0
 
-  '@vitest/expect@4.1.5':
+  '@vitest/expect@4.1.10':
     dependencies:
       '@standard-schema/spec': 1.1.0
       '@types/chai': 5.2.3
-      '@vitest/spy': 4.1.5
-      '@vitest/utils': 4.1.5
+      '@vitest/spy': 4.1.10
+      '@vitest/utils': 4.1.10
       chai: 6.2.2
       tinyrainbow: 3.1.0
 
-  '@vitest/mocker@4.1.5(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))':
+  '@vitest/mocker@4.1.10(vite@8.2.0)':
     dependencies:
-      '@vitest/spy': 4.1.5
+      '@vitest/spy': 4.1.10
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4)
+      vite: 8.2.0(@types/node@25.9.3)(esbuild@0.27.4)(jiti@2.7.0)(sugarss@5.0.1)(terser@5.49.0)(yaml@2.9.0)
 
   '@vitest/pretty-format@3.2.4':
     dependencies:
       tinyrainbow: 2.0.0
 
-  '@vitest/pretty-format@4.1.5':
+  '@vitest/pretty-format@4.1.10':
     dependencies:
       tinyrainbow: 3.1.0
 
-  '@vitest/runner@4.1.5':
+  '@vitest/runner@4.1.10':
     dependencies:
-      '@vitest/utils': 4.1.5
+      '@vitest/utils': 4.1.10
       pathe: 2.0.3
 
-  '@vitest/snapshot@4.1.5':
+  '@vitest/snapshot@4.1.10':
     dependencies:
-      '@vitest/pretty-format': 4.1.5
-      '@vitest/utils': 4.1.5
+      '@vitest/pretty-format': 4.1.10
+      '@vitest/utils': 4.1.10
       magic-string: 0.30.21
       pathe: 2.0.3
 
@@ -18745,7 +19319,7 @@ snapshots:
     dependencies:
       tinyspy: 4.0.4
 
-  '@vitest/spy@4.1.5': {}
+  '@vitest/spy@4.1.10': {}
 
   '@vitest/utils@3.2.4':
     dependencies:
@@ -18753,9 +19327,9 @@ snapshots:
       loupe: 3.2.1
       tinyrainbow: 2.0.0
 
-  '@vitest/utils@4.1.5':
+  '@vitest/utils@4.1.10':
     dependencies:
-      '@vitest/pretty-format': 4.1.5
+      '@vitest/pretty-format': 4.1.10
       convert-source-map: 2.0.0
       tinyrainbow: 3.1.0
 
@@ -18765,15 +19339,17 @@ snapshots:
 
   '@volar/source-map@2.4.28': {}
 
-  '@volar/typescript@2.4.28':
+  '@volar/typescript@2.4.28(@typescript/typescript6@6.0.2)':
     dependencies:
       '@volar/language-core': 2.4.28
       path-browserify: 1.0.1
       vscode-uri: 3.1.0
+    optionalDependencies:
+      typescript: '@typescript/typescript6@6.0.2'
 
   '@vue/compiler-core@3.5.31':
     dependencies:
-      '@babel/parser': 7.29.2
+      '@babel/parser': 7.29.8
       '@vue/shared': 3.5.31
       entities: 7.0.1
       estree-walker: 2.0.2
@@ -18786,14 +19362,14 @@ snapshots:
 
   '@vue/compiler-sfc@3.5.31':
     dependencies:
-      '@babel/parser': 7.29.2
+      '@babel/parser': 7.29.8
       '@vue/compiler-core': 3.5.31
       '@vue/compiler-dom': 3.5.31
       '@vue/compiler-ssr': 3.5.31
       '@vue/shared': 3.5.31
       estree-walker: 2.0.2
       magic-string: 0.30.21
-      postcss: 8.5.14
+      postcss: 8.5.25
       source-map-js: 1.2.1
 
   '@vue/compiler-ssr@3.5.31':
@@ -18835,41 +19411,40 @@ snapshots:
       '@vue/shared': 3.5.31
       csstype: 3.2.3
 
-  '@vue/server-renderer@3.5.31(vue@3.5.31(typescript@6.0.3))':
+  '@vue/server-renderer@3.5.31(vue@3.5.31)':
     dependencies:
       '@vue/compiler-ssr': 3.5.31
       '@vue/shared': 3.5.31
-      vue: 3.5.31(typescript@6.0.3)
+      vue: 3.5.31(@typescript/typescript6@6.0.2)
 
   '@vue/shared@3.5.31': {}
 
-  '@vueuse/core@12.8.2(typescript@6.0.3)':
+  '@vueuse/core@12.8.2(@typescript/typescript6@6.0.2)':
     dependencies:
       '@types/web-bluetooth': 0.0.21
       '@vueuse/metadata': 12.8.2
-      '@vueuse/shared': 12.8.2(typescript@6.0.3)
-      vue: 3.5.31(typescript@6.0.3)
+      '@vueuse/shared': 12.8.2(@typescript/typescript6@6.0.2)
+      vue: 3.5.31(@typescript/typescript6@6.0.2)
     transitivePeerDependencies:
       - typescript
 
-  '@vueuse/integrations@12.8.2(axios@1.15.2)(focus-trap@7.8.0)(jwt-decode@4.0.0)(qrcode@1.5.4)(typescript@6.0.3)':
+  '@vueuse/integrations@12.8.2(@typescript/typescript6@6.0.2)(axios@1.19.0)(focus-trap@7.8.0)(qrcode@1.5.4)':
     dependencies:
-      '@vueuse/core': 12.8.2(typescript@6.0.3)
-      '@vueuse/shared': 12.8.2(typescript@6.0.3)
-      vue: 3.5.31(typescript@6.0.3)
+      '@vueuse/core': 12.8.2(@typescript/typescript6@6.0.2)
+      '@vueuse/shared': 12.8.2(@typescript/typescript6@6.0.2)
+      vue: 3.5.31(@typescript/typescript6@6.0.2)
     optionalDependencies:
-      axios: 1.15.2
+      axios: 1.19.0(debug@4.4.3)(supports-color@7.2.0)
       focus-trap: 7.8.0
-      jwt-decode: 4.0.0
       qrcode: 1.5.4
     transitivePeerDependencies:
       - typescript
 
   '@vueuse/metadata@12.8.2': {}
 
-  '@vueuse/shared@12.8.2(typescript@6.0.3)':
+  '@vueuse/shared@12.8.2(@typescript/typescript6@6.0.2)':
     dependencies:
-      vue: 3.5.31(typescript@6.0.3)
+      vue: 3.5.31(@typescript/typescript6@6.0.2)
     transitivePeerDependencies:
       - typescript
 
@@ -18959,27 +19534,28 @@ snapshots:
 
   '@yarnpkg/lockfile@1.1.0': {}
 
-  '@yarnpkg/parsers@3.0.2':
-    dependencies:
-      js-yaml: 3.14.2
-      tslib: 2.8.1
-
   '@zkochan/js-yaml@0.0.7':
     dependencies:
       argparse: 2.0.1
 
-  '@zxcvbn-ts/core@3.0.4':
+  '@zxcvbn-ts/core@4.1.2':
     dependencies:
       fastest-levenshtein: 1.0.16
 
-  '@zxcvbn-ts/language-common@3.0.4': {}
+  '@zxcvbn-ts/dictionary-compression@3.0.1': {}
 
-  '@zxcvbn-ts/language-en@3.0.2': {}
+  '@zxcvbn-ts/language-common@4.1.3':
+    dependencies:
+      '@zxcvbn-ts/dictionary-compression': 3.0.1
 
-  abbrev@3.0.1: {}
+  '@zxcvbn-ts/language-en@4.1.1':
+    dependencies:
+      '@zxcvbn-ts/dictionary-compression': 3.0.1
 
   abbrev@4.0.0: {}
 
+  abbrev@5.0.0: {}
+
   abort-controller@3.0.0:
     dependencies:
       event-target-shim: 5.0.1
@@ -18994,56 +19570,56 @@ snapshots:
       mime-types: 3.0.2
       negotiator: 1.0.0
 
-  acorn-import-attributes@1.9.5(acorn@8.16.0):
+  acorn-jsx@5.3.2(acorn@8.18.0):
     dependencies:
-      acorn: 8.16.0
-
-  acorn-import-phases@1.0.4(acorn@8.16.0):
-    dependencies:
-      acorn: 8.16.0
-
-  acorn-jsx@5.3.2(acorn@8.16.0):
-    dependencies:
-      acorn: 8.16.0
+      acorn: 8.18.0
 
   acorn-walk@8.3.5:
     dependencies:
-      acorn: 8.16.0
+      acorn: 8.18.0
 
-  acorn@8.16.0: {}
+  acorn@8.18.0: {}
 
   address@1.2.2: {}
 
-  agent-base@6.0.2:
+  agent-base@6.0.2(supports-color@10.2.2):
     dependencies:
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@10.2.2)
+    transitivePeerDependencies:
+      - supports-color
+
+  agent-base@6.0.2(supports-color@7.2.0):
+    dependencies:
+      debug: 4.4.3(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
   agent-base@7.1.4: {}
 
-  ajv-draft-04@1.0.0(ajv@8.18.0):
-    optionalDependencies:
-      ajv: 8.18.0
+  agent-base@9.0.0: {}
 
-  ajv-formats@2.1.1(ajv@8.18.0):
+  ajv-draft-04@1.0.0(ajv@8.20.0):
     optionalDependencies:
-      ajv: 8.18.0
+      ajv: 8.20.0
 
-  ajv-formats@3.0.1(ajv@8.18.0):
+  ajv-formats@2.1.1(ajv@8.20.0):
     optionalDependencies:
-      ajv: 8.18.0
+      ajv: 8.20.0
 
-  ajv-keywords@3.5.2(ajv@6.14.0):
+  ajv-formats@3.0.1(ajv@8.20.0):
+    optionalDependencies:
+      ajv: 8.20.0
+
+  ajv-keywords@3.5.2(ajv@6.15.0):
     dependencies:
-      ajv: 6.14.0
+      ajv: 6.15.0
 
-  ajv-keywords@5.1.0(ajv@8.18.0):
+  ajv-keywords@5.1.0(ajv@8.20.0):
     dependencies:
-      ajv: 8.18.0
+      ajv: 8.20.0
       fast-deep-equal: 3.1.3
 
-  ajv@6.14.0:
+  ajv@6.15.0:
     dependencies:
       fast-deep-equal: 3.1.3
       fast-json-stable-stringify: 2.1.0
@@ -19053,7 +19629,14 @@ snapshots:
   ajv@8.18.0:
     dependencies:
       fast-deep-equal: 3.1.3
-      fast-uri: 3.1.2
+      fast-uri: 3.1.5
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+
+  ajv@8.20.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.1.5
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
 
@@ -19082,10 +19665,6 @@ snapshots:
     dependencies:
       type-fest: 0.21.3
 
-  ansi-escapes@7.3.0:
-    dependencies:
-      environment: 1.1.0
-
   ansi-html-community@0.0.8: {}
 
   ansi-regex@5.0.1: {}
@@ -19105,47 +19684,50 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.2
 
-  app-builder-bin@5.0.0-alpha.12: {}
-
-  app-builder-lib@26.9.1(patch_hash=2dfb3fcdfe573cca6c248cecf63ddea5c8fa0276859695fba6c9664d0ff285d6)(dmg-builder@26.9.1)(electron-builder-squirrel-windows@26.9.1):
+  app-builder-lib@26.15.3(dmg-builder@26.15.3)(electron-builder-squirrel-windows@26.15.3)(supports-color@10.2.2):
     dependencies:
-      '@develar/schema-utils': 2.6.5
       '@electron/asar': 3.4.1
       '@electron/fuses': 1.8.0
-      '@electron/get': 3.1.0
-      '@electron/notarize': 2.5.0
-      '@electron/osx-sign': 1.3.3
-      '@electron/rebuild': 4.0.3
-      '@electron/universal': 2.0.3
-      '@malept/flatpak-bundler': 0.4.0
+      '@electron/get': 3.1.0(supports-color@10.2.2)
+      '@electron/notarize': 2.5.0(supports-color@10.2.2)
+      '@electron/osx-sign': 1.3.3(supports-color@10.2.2)
+      '@electron/rebuild': 4.0.4(supports-color@10.2.2)
+      '@electron/universal': 2.0.3(supports-color@10.2.2)
+      '@malept/flatpak-bundler': 0.4.0(supports-color@10.2.2)
+      '@noble/hashes': 2.2.0
+      '@peculiar/webcrypto': 1.7.1
       '@types/fs-extra': 9.0.13
+      ajv: 8.20.0
+      asn1js: 3.0.10
       async-exit-hook: 2.0.1
-      builder-util: 26.9.0
-      builder-util-runtime: 9.6.0
+      builder-util: 26.15.3(supports-color@10.2.2)
+      builder-util-runtime: 9.7.0(supports-color@10.2.2)
       chromium-pickle-js: 0.2.0
       ci-info: 4.3.1
-      debug: 4.4.3
-      dmg-builder: 26.9.1(electron-builder-squirrel-windows@26.9.1)
+      debug: 4.4.3(supports-color@10.2.2)
+      dmg-builder: 26.15.3(electron-builder-squirrel-windows@26.15.3)(supports-color@10.2.2)
       dotenv: 16.6.1
       dotenv-expand: 11.0.7
       ejs: 3.1.10
-      electron-builder-squirrel-windows: 26.9.1(dmg-builder@26.9.1)
-      electron-publish: 26.9.0
+      electron-builder-squirrel-windows: 26.15.3(dmg-builder@26.15.3)(supports-color@10.2.2)
+      electron-publish: 26.15.3(supports-color@10.2.2)
       fs-extra: 10.1.0
       hosted-git-info: 4.1.0
       isbinaryfile: 5.0.7
-      jiti: 2.6.1
-      js-yaml: 4.1.1
+      jiti: 2.7.0
+      js-yaml: 4.3.1
       json5: 2.2.3
       lazy-val: 1.0.5
-      minimatch: 10.2.5
+      minimatch: 10.2.6
+      pkijs: 3.4.0
       plist: 3.1.0(patch_hash=7a3c35087f0ab2a8efbac9e2899990f07d61e2b3e41d8d962ef0bdb0786e1af7)
       proper-lockfile: 4.1.2
       resedit: 1.7.2
       semver: 7.7.4
-      tar: 7.5.13
+      tar: 7.5.22
       temp-file: 3.4.0
       tiny-async-pool: 1.3.0
+      unzipper: 0.12.3
       which: 5.0.0
     transitivePeerDependencies:
       - supports-color
@@ -19169,7 +19751,7 @@ snapshots:
       buffer-crc32: 1.0.0
       readable-stream: 4.7.0
       readdir-glob: 1.1.3
-      tar-stream: 3.1.8
+      tar-stream: 3.2.0
       zip-stream: 6.0.1
     transitivePeerDependencies:
       - bare-abort-controller
@@ -19192,75 +19774,6 @@ snapshots:
 
   aria-query@5.3.2: {}
 
-  array-buffer-byte-length@1.0.2:
-    dependencies:
-      call-bound: 1.0.4
-      is-array-buffer: 3.0.5
-
-  array-flatten@1.1.1: {}
-
-  array-includes@3.1.9:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-abstract: 1.24.1
-      es-object-atoms: 1.1.1
-      get-intrinsic: 1.3.0
-      is-string: 1.1.1
-      math-intrinsics: 1.1.0
-
-  array.prototype.findlast@1.2.5:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.1
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      es-shim-unscopables: 1.1.0
-
-  array.prototype.findlastindex@1.2.6:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-abstract: 1.24.1
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      es-shim-unscopables: 1.1.0
-
-  array.prototype.flat@1.3.3:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.1
-      es-shim-unscopables: 1.1.0
-
-  array.prototype.flatmap@1.3.3:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.1
-      es-shim-unscopables: 1.1.0
-
-  array.prototype.tosorted@1.1.4:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.1
-      es-errors: 1.3.0
-      es-shim-unscopables: 1.1.0
-
-  arraybuffer.prototype.slice@1.0.4:
-    dependencies:
-      array-buffer-byte-length: 1.0.2
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.1
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-      is-array-buffer: 3.0.5
-
   asn1.js@4.10.1:
     dependencies:
       bn.js: 4.12.3
@@ -19277,9 +19790,6 @@ snapshots:
       pvutils: 1.1.5
       tslib: 2.8.1
 
-  assert-plus@1.0.0:
-    optional: true
-
   assert@2.1.0:
     dependencies:
       call-bind: 1.0.8
@@ -19290,8 +19800,6 @@ snapshots:
 
   assertion-error@2.0.1: {}
 
-  ast-types-flow@0.0.8: {}
-
   ast-types@0.16.1:
     dependencies:
       tslib: 2.8.1
@@ -19304,9 +19812,9 @@ snapshots:
 
   astral-regex@2.0.0: {}
 
-  async-exit-hook@2.0.1: {}
+  astring@1.9.0: {}
 
-  async-function@1.0.0: {}
+  async-exit-hook@2.0.1: {}
 
   async-lock@1.4.1: {}
 
@@ -19329,13 +19837,13 @@ snapshots:
       untildify: 3.0.3
       winreg: 1.2.4
 
-  autoprefixer@10.4.24(postcss@8.5.14):
+  autoprefixer@10.5.0(postcss@8.5.25):
     dependencies:
-      browserslist: 4.28.2
-      caniuse-lite: 1.0.30001791
+      browserslist: 4.28.7
+      caniuse-lite: 1.0.30001806
       fraction.js: 5.3.4
       picocolors: 1.1.1
-      postcss: 8.5.14
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
   available-typed-arrays@1.0.7:
@@ -19344,144 +19852,191 @@ snapshots:
 
   await-lock@3.0.0(patch_hash=b767a571946a4f8710ac54b1a7bec8a7c1570f9b85d75922392fae20d0578964): {}
 
-  axe-core@4.11.4: {}
+  aws4@1.13.2: {}
 
-  axios@1.15.0:
+  axe-core@4.12.1: {}
+
+  axios@1.18.1(debug@4.4.3)(supports-color@7.2.0):
     dependencies:
-      follow-redirects: 1.16.0
-      form-data: 4.0.5
+      follow-redirects: 1.16.0(debug@4.4.3)
+      form-data: 4.0.6
+      https-proxy-agent: 5.0.1(supports-color@7.2.0)
       proxy-from-env: 2.1.0
     transitivePeerDependencies:
       - debug
+      - supports-color
 
-  axios@1.15.2:
+  axios@1.19.0(debug@4.4.3)(supports-color@10.2.2):
     dependencies:
-      follow-redirects: 1.16.0
-      form-data: 4.0.5
+      follow-redirects: 1.16.0(debug@4.4.3)
+      form-data: 4.0.6
+      https-proxy-agent: 5.0.1(supports-color@10.2.2)
       proxy-from-env: 2.1.0
     transitivePeerDependencies:
       - debug
+      - supports-color
 
-  axobject-query@4.1.0: {}
-
-  b4a@1.8.0: {}
-
-  babel-jest@30.3.0(@babel/core@7.29.0):
+  axios@1.19.0(debug@4.4.3)(supports-color@7.2.0):
     dependencies:
-      '@babel/core': 7.29.0
-      '@jest/transform': 30.3.0
+      follow-redirects: 1.16.0(debug@4.4.3)
+      form-data: 4.0.6
+      https-proxy-agent: 5.0.1(supports-color@7.2.0)
+      proxy-from-env: 2.1.0
+    transitivePeerDependencies:
+      - debug
+      - supports-color
+    optional: true
+
+  b4a@1.8.1: {}
+
+  babel-jest@30.4.1(@babel/core@7.29.7)(supports-color@10.2.2):
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@jest/transform': 30.4.1(supports-color@10.2.2)
       '@types/babel__core': 7.20.5
-      babel-plugin-istanbul: 7.0.1
-      babel-preset-jest: 30.3.0(@babel/core@7.29.0)
+      babel-plugin-istanbul: 7.0.1(supports-color@10.2.2)
+      babel-preset-jest: 30.4.0(@babel/core@7.29.7)
       chalk: 4.1.2
       graceful-fs: 4.2.11
       slash: 3.0.0
     transitivePeerDependencies:
       - supports-color
 
-  babel-loader@10.1.1(@babel/core@7.29.0)(webpack@5.106.2):
+  babel-loader@10.1.1(@babel/core@7.29.7)(webpack@5.109.2):
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.29.7(supports-color@10.2.2)
       find-up: 5.0.0
     optionalDependencies:
-      webpack: 5.106.2(webpack-cli@7.0.2)
+      webpack: 5.109.2(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack-cli@7.2.2)
 
-  babel-plugin-const-enum@1.2.0(@babel/core@7.29.0):
+  babel-plugin-const-enum@1.2.0(@babel/core@7.29.7)(supports-color@7.2.0):
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/plugin-syntax-typescript': 7.28.6(@babel/core@7.29.0)
-      '@babel/traverse': 7.29.0
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/plugin-syntax-typescript': 7.29.7(@babel/core@7.29.7)
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-istanbul@7.0.1:
+  babel-plugin-istanbul@7.0.1(supports-color@10.2.2):
     dependencies:
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/helper-plugin-utils': 7.29.7
       '@istanbuljs/load-nyc-config': 1.1.0
       '@istanbuljs/schema': 0.1.6
-      istanbul-lib-instrument: 6.0.3
+      istanbul-lib-instrument: 6.0.3(supports-color@10.2.2)
       test-exclude: 6.0.0
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-jest-hoist@30.3.0:
+  babel-plugin-jest-hoist@30.4.0:
     dependencies:
       '@types/babel__core': 7.20.5
 
-  babel-plugin-jsx-remove-data-test-id@3.0.0(@babel/core@7.29.0):
+  babel-plugin-jsx-remove-data-test-id@3.0.0(@babel/core@7.29.7):
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.29.7(supports-color@10.2.2)
 
   babel-plugin-macros@3.1.0:
     dependencies:
-      '@babel/runtime': 7.29.2
+      '@babel/runtime': 7.29.7
       cosmiconfig: 7.1.0
       resolve: 1.22.12
 
-  babel-plugin-polyfill-corejs2@0.4.17(@babel/core@7.29.0):
+  babel-plugin-polyfill-corejs2@0.4.17(@babel/core@7.29.7)(supports-color@10.2.2):
     dependencies:
-      '@babel/compat-data': 7.29.3
-      '@babel/core': 7.29.0
-      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.0)
+      '@babel/compat-data': 7.29.7
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.7)(supports-color@10.2.2)
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-corejs3@0.13.0(@babel/core@7.29.0):
+  babel-plugin-polyfill-corejs2@0.4.17(@babel/core@7.29.7)(supports-color@7.2.0):
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.0)
+      '@babel/compat-data': 7.29.7
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.7)(supports-color@7.2.0)
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  babel-plugin-polyfill-corejs3@0.13.0(@babel/core@7.29.7)(supports-color@10.2.2):
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.7)(supports-color@10.2.2)
       core-js-compat: 3.49.0
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-corejs3@0.14.2(@babel/core@7.29.0):
+  babel-plugin-polyfill-corejs3@0.13.0(@babel/core@7.29.7)(supports-color@7.2.0):
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.0)
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.7)(supports-color@7.2.0)
       core-js-compat: 3.49.0
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-regenerator@0.6.8(@babel/core@7.29.0):
+  babel-plugin-polyfill-corejs3@0.14.2(@babel/core@7.29.7)(supports-color@10.2.2):
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.0)
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.7)(supports-color@10.2.2)
+      core-js-compat: 3.49.0
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-transform-typescript-metadata@0.3.2(@babel/core@7.29.0)(@babel/traverse@7.29.0):
+  babel-plugin-polyfill-corejs3@0.14.2(@babel/core@7.29.7)(supports-color@7.2.0):
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.7)(supports-color@7.2.0)
+      core-js-compat: 3.49.0
+    transitivePeerDependencies:
+      - supports-color
+
+  babel-plugin-polyfill-regenerator@0.6.8(@babel/core@7.29.7)(supports-color@10.2.2):
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.7)(supports-color@10.2.2)
+    transitivePeerDependencies:
+      - supports-color
+
+  babel-plugin-polyfill-regenerator@0.6.8(@babel/core@7.29.7)(supports-color@7.2.0):
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-define-polyfill-provider': 0.6.8(@babel/core@7.29.7)(supports-color@7.2.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  babel-plugin-transform-typescript-metadata@0.3.2(@babel/core@7.29.7)(@babel/traverse@7.29.8):
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@7.2.0)
+      '@babel/helper-plugin-utils': 7.29.7
     optionalDependencies:
-      '@babel/traverse': 7.29.0
+      '@babel/traverse': 7.29.8(supports-color@7.2.0)
 
-  babel-preset-current-node-syntax@1.2.0(@babel/core@7.29.0):
+  babel-preset-current-node-syntax@1.2.0(@babel/core@7.29.7):
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.29.0)
-      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.29.0)
-      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.29.0)
-      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.29.0)
-      '@babel/plugin-syntax-import-attributes': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.29.0)
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.29.0)
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.29.0)
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.29.0)
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.29.0)
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.29.0)
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.29.0)
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.29.0)
-      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.29.0)
-      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.29.0)
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.29.7)
+      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.29.7)
+      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.29.7)
+      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.29.7)
+      '@babel/plugin-syntax-import-attributes': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.29.7)
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.29.7)
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.29.7)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.29.7)
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.29.7)
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.29.7)
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.29.7)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.29.7)
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.29.7)
+      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.29.7)
 
-  babel-preset-jest@30.3.0(@babel/core@7.29.0):
+  babel-preset-jest@30.4.0(@babel/core@7.29.7):
     dependencies:
-      '@babel/core': 7.29.0
-      babel-plugin-jest-hoist: 30.3.0
-      babel-preset-current-node-syntax: 1.2.0(@babel/core@7.29.0)
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      babel-plugin-jest-hoist: 30.4.0
+      babel-preset-current-node-syntax: 1.2.0(@babel/core@7.29.7)
 
   balanced-match@1.0.2: {}
 
@@ -19489,37 +20044,38 @@ snapshots:
 
   balanced-match@4.0.4: {}
 
-  bare-events@2.8.2: {}
+  bare-events@2.9.1: {}
 
-  bare-fs@4.7.0:
+  bare-fs@4.7.3:
     dependencies:
-      bare-events: 2.8.2
-      bare-path: 3.0.0
-      bare-stream: 2.13.0(bare-events@2.8.2)
-      bare-url: 2.4.0
+      bare-events: 2.9.1
+      bare-path: 3.0.1
+      bare-stream: 2.13.3(bare-events@2.9.1)
+      bare-url: 2.4.5
       fast-fifo: 1.3.2
     transitivePeerDependencies:
       - bare-abort-controller
       - react-native-b4a
 
-  bare-os@3.8.7: {}
+  bare-os@3.9.3: {}
 
-  bare-path@3.0.0:
+  bare-path@3.0.1:
     dependencies:
-      bare-os: 3.8.7
+      bare-os: 3.9.3
 
-  bare-stream@2.13.0(bare-events@2.8.2):
+  bare-stream@2.13.3(bare-events@2.9.1):
     dependencies:
-      streamx: 2.25.0
+      b4a: 1.8.1
+      streamx: 2.28.0
       teex: 1.0.1
     optionalDependencies:
-      bare-events: 2.8.2
+      bare-events: 2.9.1
     transitivePeerDependencies:
       - react-native-b4a
 
-  bare-url@2.4.0:
+  bare-url@2.4.5:
     dependencies:
-      bare-path: 3.0.0
+      bare-path: 3.0.1
 
   base-x@5.0.1: {}
 
@@ -19527,7 +20083,7 @@ snapshots:
 
   base64-js@1.5.1: {}
 
-  baseline-browser-mapping@2.10.16: {}
+  baseline-browser-mapping@2.11.4: {}
 
   batch@0.6.1: {}
 
@@ -19539,8 +20095,6 @@ snapshots:
 
   big.js@5.2.2: {}
 
-  binary-extensions@2.3.0: {}
-
   birpc@2.9.0: {}
 
   bl@4.1.0:
@@ -19562,44 +20116,29 @@ snapshots:
       seedrandom: 3.0.5
       xxhashjs: 0.2.2
 
+  bluebird@3.7.2: {}
+
   blurhash@2.0.5: {}
 
   bn.js@4.12.3: {}
 
   bn.js@5.2.3: {}
 
-  body-parser@1.20.4:
+  body-parser@2.3.0(supports-color@10.2.2):
     dependencies:
       bytes: 3.1.2
-      content-type: 1.0.5
-      debug: 2.6.9
-      depd: 2.0.0
-      destroy: 1.2.0
+      content-type: 2.0.0
+      debug: 4.4.3(supports-color@10.2.2)
       http-errors: 2.0.1
-      iconv-lite: 0.4.24
+      iconv-lite: 0.7.3
       on-finished: 2.4.1
-      qs: 6.15.0
-      raw-body: 2.5.3
-      type-is: 1.6.18
-      unpipe: 1.0.0
-    transitivePeerDependencies:
-      - supports-color
-
-  body-parser@2.2.2:
-    dependencies:
-      bytes: 3.1.2
-      content-type: 1.0.5
-      debug: 4.4.3
-      http-errors: 2.0.1
-      iconv-lite: 0.7.2
-      on-finished: 2.4.1
-      qs: 6.15.0
+      qs: 6.15.3
       raw-body: 3.0.2
-      type-is: 2.0.1
+      type-is: 2.1.0
     transitivePeerDependencies:
       - supports-color
 
-  bonjour-service@1.3.0:
+  bonjour-service@1.4.2:
     dependencies:
       fast-deep-equal: 3.1.3
       multicast-dns: 7.2.5
@@ -19609,20 +20148,20 @@ snapshots:
   boolean@3.2.0:
     optional: true
 
-  brace-expansion@1.1.13:
+  brace-expansion@1.1.18:
     dependencies:
       balanced-match: 1.0.2
       concat-map: 0.0.1
 
-  brace-expansion@2.1.0:
+  brace-expansion@2.1.4:
     dependencies:
       balanced-match: 1.0.2
 
-  brace-expansion@5.0.2:
+  brace-expansion@5.0.8:
     dependencies:
       balanced-match: 4.0.4
 
-  brace-expansion@5.0.6:
+  brace-expansion@5.0.9:
     dependencies:
       balanced-match: 4.0.4
 
@@ -19680,13 +20219,13 @@ snapshots:
     dependencies:
       pako: 1.0.11
 
-  browserslist@4.28.2:
+  browserslist@4.28.7:
     dependencies:
-      baseline-browser-mapping: 2.10.16
-      caniuse-lite: 1.0.30001791
-      electron-to-chromium: 1.5.332
-      node-releases: 2.0.37
-      update-browserslist-db: 1.2.3(browserslist@4.28.2)
+      baseline-browser-mapping: 2.11.4
+      caniuse-lite: 1.0.30001806
+      electron-to-chromium: 1.5.396
+      node-releases: 2.0.51
+      update-browserslist-db: 1.2.3(browserslist@4.28.7)
 
   bs58@6.0.0:
     dependencies:
@@ -19696,12 +20235,14 @@ snapshots:
     dependencies:
       node-int64: 0.4.0
 
-  buffer-crc32@0.2.13: {}
-
   buffer-crc32@1.0.0: {}
 
   buffer-from@1.1.2: {}
 
+  buffer-image-size@0.6.4:
+    dependencies:
+      '@types/node': 25.9.3
+
   buffer-xor@1.0.3: {}
 
   buffer@5.7.1:
@@ -19717,26 +20258,24 @@ snapshots:
   buildcheck@0.0.7:
     optional: true
 
-  builder-util-runtime@9.6.0:
+  builder-util-runtime@9.7.0(supports-color@10.2.2):
     dependencies:
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@10.2.2)
       sax: 1.6.0
     transitivePeerDependencies:
       - supports-color
 
-  builder-util@26.9.0:
+  builder-util@26.15.3(supports-color@10.2.2):
     dependencies:
-      7zip-bin: 5.2.0
       '@types/debug': 4.1.13
-      app-builder-bin: 5.0.0-alpha.12
-      builder-util-runtime: 9.6.0
+      builder-util-runtime: 9.7.0(supports-color@10.2.2)
       chalk: 4.1.2
       cross-spawn: 7.0.6
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@10.2.2)
       fs-extra: 10.1.0
-      http-proxy-agent: 7.0.2
-      https-proxy-agent: 7.0.6
-      js-yaml: 4.1.1
+      http-proxy-agent: 7.0.2(supports-color@10.2.2)
+      https-proxy-agent: 7.0.6(supports-color@10.2.2)
+      js-yaml: 4.3.1
       sanitize-filename: 1.6.4
       source-map-support: 0.5.21
       stat-mode: 1.0.0
@@ -19745,8 +20284,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  builtin-modules@3.3.0: {}
-
   builtin-status-codes@3.0.0: {}
 
   bundle-name@4.1.0:
@@ -19759,21 +20296,6 @@ snapshots:
 
   bytestreamjs@2.0.1: {}
 
-  cacache@19.0.1:
-    dependencies:
-      '@npmcli/fs': 4.0.0
-      fs-minipass: 3.0.3
-      glob: 10.5.0
-      lru-cache: 10.4.3
-      minipass: 7.1.3
-      minipass-collect: 2.0.1
-      minipass-flush: 1.0.5
-      minipass-pipeline: 1.2.4
-      p-map: 7.0.4
-      ssri: 12.0.0
-      tar: 7.5.13
-      unique-filename: 4.0.0
-
   cacache@20.0.4:
     dependencies:
       '@npmcli/fs': 5.0.0
@@ -19787,6 +20309,19 @@ snapshots:
       p-map: 7.0.4
       ssri: 13.0.1
 
+  cacache@21.0.1:
+    dependencies:
+      '@npmcli/fs': 6.0.0
+      fs-minipass: 3.0.3
+      glob: 13.0.6
+      lru-cache: 11.2.6
+      minipass: 7.1.3
+      minipass-collect: 2.0.1
+      minipass-flush: 1.0.5
+      minipass-pipeline: 1.2.4
+      p-map: 7.0.4
+      ssri: 14.0.0
+
   cacheable-lookup@5.0.4: {}
 
   cacheable-request@7.0.4:
@@ -19799,10 +20334,10 @@ snapshots:
       normalize-url: 6.1.0
       responselike: 2.0.1
 
-  cacheable@2.3.5:
+  cacheable@2.5.0:
     dependencies:
-      '@cacheable/memory': 2.0.8
-      '@cacheable/utils': 2.4.1
+      '@cacheable/memory': 2.2.0
+      '@cacheable/utils': 2.5.0
       hookified: 1.15.1
       keyv: 5.6.0
       qified: 0.10.1
@@ -19839,12 +20374,12 @@ snapshots:
 
   caniuse-api@3.0.0:
     dependencies:
-      browserslist: 4.28.2
-      caniuse-lite: 1.0.30001791
+      browserslist: 4.28.7
+      caniuse-lite: 1.0.30001806
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
 
-  caniuse-lite@1.0.30001791: {}
+  caniuse-lite@1.0.30001806: {}
 
   ccount@2.0.1: {}
 
@@ -19873,31 +20408,6 @@ snapshots:
 
   check-error@2.1.3: {}
 
-  chevrotain-allstar@0.4.1(chevrotain@12.0.0):
-    dependencies:
-      chevrotain: 12.0.0
-      lodash-es: 4.18.1
-
-  chevrotain@12.0.0:
-    dependencies:
-      '@chevrotain/cst-dts-gen': 12.0.0
-      '@chevrotain/gast': 12.0.0
-      '@chevrotain/regexp-to-ast': 12.0.0
-      '@chevrotain/types': 12.0.0
-      '@chevrotain/utils': 12.0.0
-
-  chokidar@3.6.0:
-    dependencies:
-      anymatch: 3.1.3
-      braces: 3.0.3
-      glob-parent: 5.1.2
-      is-binary-path: 2.1.0
-      is-glob: 4.0.3
-      normalize-path: 3.0.0
-      readdirp: 3.6.0
-    optionalDependencies:
-      fsevents: 2.3.3
-
   chokidar@5.0.0:
     dependencies:
       readdirp: 5.0.0
@@ -19928,31 +20438,12 @@ snapshots:
     dependencies:
       source-map: 0.6.1
 
-  clean-regexp@1.0.0:
-    dependencies:
-      escape-string-regexp: 1.0.5
-
   cli-cursor@3.1.0:
     dependencies:
       restore-cursor: 3.1.0
 
-  cli-cursor@5.0.0:
-    dependencies:
-      restore-cursor: 5.1.0
-
   cli-spinners@2.6.1: {}
 
-  cli-truncate@2.1.0:
-    dependencies:
-      slice-ansi: 3.0.0
-      string-width: 4.2.3
-    optional: true
-
-  cli-truncate@5.2.0:
-    dependencies:
-      slice-ansi: 8.0.0
-      string-width: 8.2.1
-
   cliui@6.0.0:
     dependencies:
       string-width: 4.2.3
@@ -19993,8 +20484,6 @@ snapshots:
 
   colord@2.9.3: {}
 
-  colorette@2.0.20: {}
-
   columnify@1.6.0:
     dependencies:
       strip-ansi: 6.0.1
@@ -20008,8 +20497,6 @@ snapshots:
 
   commander@11.1.0: {}
 
-  commander@13.1.0: {}
-
   commander@14.0.3: {}
 
   commander@2.20.3: {}
@@ -20045,11 +20532,11 @@ snapshots:
     dependencies:
       mime-db: 1.54.0
 
-  compression@1.8.1:
+  compression@1.8.1(supports-color@10.2.2):
     dependencies:
       bytes: 3.1.2
       compressible: 2.0.18
-      debug: 2.6.9
+      debug: 2.6.9(supports-color@10.2.2)
       negotiator: 0.6.4
       on-headers: 1.1.0
       safe-buffer: 5.2.1
@@ -20061,14 +20548,14 @@ snapshots:
 
   conf@15.1.0:
     dependencies:
-      ajv: 8.18.0
-      ajv-formats: 3.0.1(ajv@8.18.0)
+      ajv: 8.20.0
+      ajv-formats: 3.0.1(ajv@8.20.0)
       atomically: 2.1.1
       debounce-fn: 6.0.0
       dot-prop: 10.1.0
       env-paths: 3.0.0
       json-schema-typed: 8.0.2
-      semver: 7.7.4
+      semver: 7.8.5
       uint8array-extras: 1.5.0
 
   confbox@0.1.8: {}
@@ -20081,10 +20568,6 @@ snapshots:
 
   constants-browserify@1.0.0: {}
 
-  content-disposition@0.5.4:
-    dependencies:
-      safe-buffer: 5.2.1
-
   content-disposition@1.0.1: {}
 
   content-type@1.0.5: {}
@@ -20095,8 +20578,6 @@ snapshots:
 
   convert-source-map@2.0.0: {}
 
-  cookie-signature@1.0.7: {}
-
   cookie-signature@1.2.2: {}
 
   cookie@0.7.2: {}
@@ -20105,23 +20586,20 @@ snapshots:
     dependencies:
       is-what: 5.5.0
 
-  copy-webpack-plugin@14.0.0(webpack@5.106.2):
+  copy-webpack-plugin@14.0.0(webpack@5.109.2):
     dependencies:
       glob-parent: 6.0.2
       normalize-path: 3.0.0
       schema-utils: 4.3.3
       serialize-javascript: 7.0.5
-      tinyglobby: 0.2.16
-      webpack: 5.106.2(webpack-cli@7.0.2)
+      tinyglobby: 0.2.17
+      webpack: 5.109.2(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack-cli@7.2.2)
 
   core-js-compat@3.49.0:
     dependencies:
-      browserslist: 4.28.2
+      browserslist: 4.28.7
 
-  core-js@3.48.0: {}
-
-  core-util-is@1.0.2:
-    optional: true
+  core-js@3.49.0: {}
 
   core-util-is@1.0.3: {}
 
@@ -20141,23 +20619,32 @@ snapshots:
       path-type: 4.0.0
       yaml: 1.10.3
 
-  cosmiconfig@8.3.6(typescript@6.0.3):
+  cosmiconfig@8.3.6(@typescript/typescript6@6.0.2):
     dependencies:
       import-fresh: 3.3.1
-      js-yaml: 4.1.1
+      js-yaml: 4.3.1
       parse-json: 5.2.0
       path-type: 4.0.0
     optionalDependencies:
-      typescript: 6.0.3
+      typescript: '@typescript/typescript6@6.0.2'
 
-  cosmiconfig@9.0.1(typescript@6.0.3):
+  cosmiconfig@8.3.6(typescript@7.0.2):
+    dependencies:
+      import-fresh: 3.3.1
+      js-yaml: 4.3.1
+      parse-json: 5.2.0
+      path-type: 4.0.0
+    optionalDependencies:
+      typescript: 7.0.2
+
+  cosmiconfig@9.0.2(@typescript/typescript6@6.0.2):
     dependencies:
       env-paths: 2.2.1
       import-fresh: 3.3.1
-      js-yaml: 4.1.1
+      js-yaml: 4.3.1
       parse-json: 5.2.0
     optionalDependencies:
-      typescript: 6.0.3
+      typescript: '@typescript/typescript6@6.0.2'
 
   counterpart@0.18.6:
     dependencies:
@@ -20170,7 +20657,7 @@ snapshots:
   cpu-features@0.0.10:
     dependencies:
       buildcheck: 0.0.7
-      nan: 2.26.2
+      nan: 2.28.0
     optional: true
 
   crc-32@0.3.0: {}
@@ -20182,11 +20669,6 @@ snapshots:
       crc-32: 1.2.2
       readable-stream: 4.7.0
 
-  crc@3.8.0:
-    dependencies:
-      buffer: 5.7.1
-    optional: true
-
   create-ecdh@4.0.4:
     dependencies:
       bn.js: 4.12.3
@@ -20211,7 +20693,7 @@ snapshots:
 
   create-require@1.1.1: {}
 
-  cronstrue@3.14.0: {}
+  cronstrue@3.24.0: {}
 
   cross-dirname@0.1.0:
     optional: true
@@ -20237,56 +20719,59 @@ snapshots:
       randombytes: 2.1.0
       randomfill: 1.0.4
 
-  css-blank-pseudo@8.0.1(postcss@8.5.14):
+  css-blank-pseudo@8.0.1(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
-      postcss-selector-parser: 7.1.1
+      postcss: 8.5.25
+      postcss-selector-parser: 7.1.4
 
   css-box-model@1.2.1:
     dependencies:
       tiny-invariant: 1.3.3
 
-  css-declaration-sorter@7.3.1(postcss@8.5.14):
+  css-declaration-sorter@7.3.1(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
 
   css-functions-list@3.3.3: {}
 
-  css-has-pseudo@8.0.0(postcss@8.5.14):
+  css-has-pseudo@8.0.0(postcss@8.5.25):
     dependencies:
-      '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.1)
-      postcss: 8.5.14
-      postcss-selector-parser: 7.1.1
+      '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.4)
+      postcss: 8.5.25
+      postcss-selector-parser: 7.1.4
       postcss-value-parser: 4.2.0
 
-  css-loader@7.1.4(webpack@5.106.2):
+  css-loader@7.1.4(webpack@5.109.2):
     dependencies:
-      icss-utils: 5.1.0(postcss@8.5.14)
-      postcss: 8.5.14
-      postcss-modules-extract-imports: 3.1.0(postcss@8.5.14)
-      postcss-modules-local-by-default: 4.2.0(postcss@8.5.14)
-      postcss-modules-scope: 3.2.1(postcss@8.5.14)
-      postcss-modules-values: 4.0.0(postcss@8.5.14)
+      icss-utils: 5.1.0(postcss@8.5.25)
+      postcss: 8.5.25
+      postcss-modules-extract-imports: 3.1.0(postcss@8.5.25)
+      postcss-modules-local-by-default: 4.2.0(postcss@8.5.25)
+      postcss-modules-scope: 3.2.1(postcss@8.5.25)
+      postcss-modules-values: 4.0.0(postcss@8.5.25)
       postcss-value-parser: 4.2.0
-      semver: 7.7.4
+      semver: 7.8.5
     optionalDependencies:
-      webpack: 5.106.2(webpack-cli@7.0.2)
+      webpack: 5.109.2(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack-cli@7.2.2)
 
-  css-minimizer-webpack-plugin@8.0.0(lightningcss@1.32.0)(webpack@5.106.2):
+  css-minimizer-webpack-plugin@8.0.0(clean-css@5.3.3)(csso@5.0.5)(esbuild@0.27.4)(lightningcss@1.33.0)(webpack@5.109.2):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
-      cssnano: 7.1.2(postcss@8.5.14)
-      jest-worker: 30.3.0
-      postcss: 8.5.14
+      cssnano: 7.1.2(postcss@8.5.25)
+      jest-worker: 30.4.1
+      postcss: 8.5.25
       schema-utils: 4.3.3
       serialize-javascript: 7.0.5
-      webpack: 5.106.2(webpack-cli@7.0.2)
+      webpack: 5.109.2(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack-cli@7.2.2)
     optionalDependencies:
-      lightningcss: 1.32.0
+      clean-css: 5.3.3
+      csso: 5.0.5
+      esbuild: 0.27.4
+      lightningcss: 1.33.0
 
-  css-prefers-color-scheme@11.0.0(postcss@8.5.14):
+  css-prefers-color-scheme@11.0.0(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
 
   css-select@4.3.0:
     dependencies:
@@ -20323,55 +20808,55 @@ snapshots:
 
   css.escape@1.5.1: {}
 
-  cssdb@8.8.0: {}
+  cssdb@8.9.0: {}
 
   cssesc@3.0.0: {}
 
   cssfontparser@1.2.1: {}
 
-  cssnano-preset-default@7.0.10(postcss@8.5.14):
+  cssnano-preset-default@7.0.10(postcss@8.5.25):
     dependencies:
-      browserslist: 4.28.2
-      css-declaration-sorter: 7.3.1(postcss@8.5.14)
-      cssnano-utils: 5.0.1(postcss@8.5.14)
-      postcss: 8.5.14
-      postcss-calc: 10.1.1(postcss@8.5.14)
-      postcss-colormin: 7.0.5(postcss@8.5.14)
-      postcss-convert-values: 7.0.8(postcss@8.5.14)
-      postcss-discard-comments: 7.0.5(postcss@8.5.14)
-      postcss-discard-duplicates: 7.0.2(postcss@8.5.14)
-      postcss-discard-empty: 7.0.1(postcss@8.5.14)
-      postcss-discard-overridden: 7.0.1(postcss@8.5.14)
-      postcss-merge-longhand: 7.0.5(postcss@8.5.14)
-      postcss-merge-rules: 7.0.7(postcss@8.5.14)
-      postcss-minify-font-values: 7.0.1(postcss@8.5.14)
-      postcss-minify-gradients: 7.0.1(postcss@8.5.14)
-      postcss-minify-params: 7.0.5(postcss@8.5.14)
-      postcss-minify-selectors: 7.0.5(postcss@8.5.14)
-      postcss-normalize-charset: 7.0.1(postcss@8.5.14)
-      postcss-normalize-display-values: 7.0.1(postcss@8.5.14)
-      postcss-normalize-positions: 7.0.1(postcss@8.5.14)
-      postcss-normalize-repeat-style: 7.0.1(postcss@8.5.14)
-      postcss-normalize-string: 7.0.1(postcss@8.5.14)
-      postcss-normalize-timing-functions: 7.0.1(postcss@8.5.14)
-      postcss-normalize-unicode: 7.0.5(postcss@8.5.14)
-      postcss-normalize-url: 7.0.1(postcss@8.5.14)
-      postcss-normalize-whitespace: 7.0.1(postcss@8.5.14)
-      postcss-ordered-values: 7.0.2(postcss@8.5.14)
-      postcss-reduce-initial: 7.0.5(postcss@8.5.14)
-      postcss-reduce-transforms: 7.0.1(postcss@8.5.14)
-      postcss-svgo: 7.1.0(postcss@8.5.14)
-      postcss-unique-selectors: 7.0.4(postcss@8.5.14)
+      browserslist: 4.28.7
+      css-declaration-sorter: 7.3.1(postcss@8.5.25)
+      cssnano-utils: 5.0.1(postcss@8.5.25)
+      postcss: 8.5.25
+      postcss-calc: 10.1.1(postcss@8.5.25)
+      postcss-colormin: 7.0.5(postcss@8.5.25)
+      postcss-convert-values: 7.0.8(postcss@8.5.25)
+      postcss-discard-comments: 7.0.5(postcss@8.5.25)
+      postcss-discard-duplicates: 7.0.2(postcss@8.5.25)
+      postcss-discard-empty: 7.0.1(postcss@8.5.25)
+      postcss-discard-overridden: 7.0.1(postcss@8.5.25)
+      postcss-merge-longhand: 7.0.5(postcss@8.5.25)
+      postcss-merge-rules: 7.0.7(postcss@8.5.25)
+      postcss-minify-font-values: 7.0.1(postcss@8.5.25)
+      postcss-minify-gradients: 7.0.1(postcss@8.5.25)
+      postcss-minify-params: 7.0.5(postcss@8.5.25)
+      postcss-minify-selectors: 7.0.5(postcss@8.5.25)
+      postcss-normalize-charset: 7.0.1(postcss@8.5.25)
+      postcss-normalize-display-values: 7.0.1(postcss@8.5.25)
+      postcss-normalize-positions: 7.0.1(postcss@8.5.25)
+      postcss-normalize-repeat-style: 7.0.1(postcss@8.5.25)
+      postcss-normalize-string: 7.0.1(postcss@8.5.25)
+      postcss-normalize-timing-functions: 7.0.1(postcss@8.5.25)
+      postcss-normalize-unicode: 7.0.5(postcss@8.5.25)
+      postcss-normalize-url: 7.0.1(postcss@8.5.25)
+      postcss-normalize-whitespace: 7.0.1(postcss@8.5.25)
+      postcss-ordered-values: 7.0.2(postcss@8.5.25)
+      postcss-reduce-initial: 7.0.5(postcss@8.5.25)
+      postcss-reduce-transforms: 7.0.1(postcss@8.5.25)
+      postcss-svgo: 7.1.0(postcss@8.5.25)
+      postcss-unique-selectors: 7.0.4(postcss@8.5.25)
 
-  cssnano-utils@5.0.1(postcss@8.5.14):
+  cssnano-utils@5.0.1(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  cssnano@7.1.2(postcss@8.5.14):
+  cssnano@7.1.2(postcss@8.5.25):
     dependencies:
-      cssnano-preset-default: 7.0.10(postcss@8.5.14)
+      cssnano-preset-default: 7.0.10(postcss@8.5.25)
       lilconfig: 3.1.3
-      postcss: 8.5.14
+      postcss: 8.5.25
 
   csso@5.0.5:
     dependencies:
@@ -20388,17 +20873,17 @@ snapshots:
 
   cuint@0.2.2: {}
 
-  cytoscape-cose-bilkent@4.1.0(cytoscape@3.33.2):
+  cytoscape-cose-bilkent@4.1.0(cytoscape@3.34.0):
     dependencies:
       cose-base: 1.0.3
-      cytoscape: 3.33.2
+      cytoscape: 3.34.0
 
-  cytoscape-fcose@2.2.0(cytoscape@3.33.2):
+  cytoscape-fcose@2.2.0(cytoscape@3.34.0):
     dependencies:
       cose-base: 2.2.0
-      cytoscape: 3.33.2
+      cytoscape: 3.34.0
 
-  cytoscape@3.33.2: {}
+  cytoscape@3.34.0: {}
 
   d3-array@2.12.1:
     dependencies:
@@ -20572,50 +21057,36 @@ snapshots:
       d3: 7.9.0
       lodash-es: 4.18.1
 
-  damerau-levenshtein@1.0.8: {}
-
   data-urls@5.0.0:
     dependencies:
       whatwg-mimetype: 4.0.0
       whatwg-url: 14.2.0
 
-  data-view-buffer@1.0.2:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      is-data-view: 1.0.2
-
-  data-view-byte-length@1.0.2:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      is-data-view: 1.0.2
-
-  data-view-byte-offset@1.0.1:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      is-data-view: 1.0.2
-
   date-names@0.1.13: {}
 
-  dayjs@1.11.20: {}
+  dayjs@1.11.21: {}
 
   debounce-fn@6.0.0:
     dependencies:
       mimic-function: 5.0.1
 
-  debug@2.6.9:
+  debug@2.6.9(supports-color@10.2.2):
     dependencies:
       ms: 2.0.0
+    optionalDependencies:
+      supports-color: 10.2.2
 
-  debug@3.2.7:
+  debug@4.4.3(supports-color@10.2.2):
     dependencies:
       ms: 2.1.3
+    optionalDependencies:
+      supports-color: 10.2.2
 
-  debug@4.4.3:
+  debug@4.4.3(supports-color@7.2.0):
     dependencies:
       ms: 2.1.3
+    optionalDependencies:
+      supports-color: 7.2.0
 
   decamelize@1.2.0: {}
 
@@ -20635,8 +21106,15 @@ snapshots:
 
   deepmerge@4.3.1: {}
 
+  default-browser-id@5.0.0: {}
+
   default-browser-id@5.0.1: {}
 
+  default-browser@5.2.1:
+    dependencies:
+      bundle-name: 4.1.0
+      default-browser-id: 5.0.1
+
   default-browser@5.5.0:
     dependencies:
       bundle-name: 4.1.0
@@ -20654,8 +21132,6 @@ snapshots:
       es-errors: 1.3.0
       gopd: 1.2.0
 
-  define-lazy-prop@2.0.0: {}
-
   define-lazy-prop@3.0.0: {}
 
   define-properties@1.2.1:
@@ -20681,20 +21157,19 @@ snapshots:
       inherits: 2.0.4
       minimalistic-assert: 1.0.1
 
-  destroy@1.2.0: {}
-
   detect-libc@2.1.2: {}
 
   detect-newline@3.1.0: {}
 
   detect-node-es@1.1.0: {}
 
-  detect-node@2.1.0: {}
+  detect-node@2.1.0:
+    optional: true
 
-  detect-port@1.6.1:
+  detect-port@1.6.1(supports-color@7.2.0):
     dependencies:
       address: 1.2.2
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -20721,64 +21196,44 @@ snapshots:
       minimatch: 3.1.5
       p-limit: 3.1.0
 
-  dmg-builder@26.9.1(electron-builder-squirrel-windows@26.9.1):
+  dmg-builder@26.15.3(electron-builder-squirrel-windows@26.15.3)(supports-color@10.2.2):
     dependencies:
-      app-builder-lib: 26.9.1(patch_hash=2dfb3fcdfe573cca6c248cecf63ddea5c8fa0276859695fba6c9664d0ff285d6)(dmg-builder@26.9.1)(electron-builder-squirrel-windows@26.9.1)
-      builder-util: 26.9.0
+      app-builder-lib: 26.15.3(dmg-builder@26.15.3)(electron-builder-squirrel-windows@26.15.3)(supports-color@10.2.2)
+      builder-util: 26.15.3(supports-color@10.2.2)
       fs-extra: 10.1.0
-      iconv-lite: 0.6.3
-      js-yaml: 4.1.1
-    optionalDependencies:
-      dmg-license: 1.0.11
+      js-yaml: 4.3.1
     transitivePeerDependencies:
       - electron-builder-squirrel-windows
       - supports-color
 
-  dmg-license@1.0.11:
-    dependencies:
-      '@types/plist': 3.0.5
-      '@types/verror': 1.10.11
-      ajv: 6.14.0
-      crc: 3.8.0
-      iconv-corefoundation: 1.1.7
-      plist: 3.1.0(patch_hash=7a3c35087f0ab2a8efbac9e2899990f07d61e2b3e41d8d962ef0bdb0786e1af7)
-      smart-buffer: 4.2.0
-      verror: 1.10.1
-    optional: true
-
   dns-packet@5.6.1:
     dependencies:
       '@leichtgewicht/ip-codec': 2.0.5
 
   docker-compose@1.4.2:
     dependencies:
-      yaml: 2.8.4
+      yaml: 2.9.0
 
-  docker-modem@5.0.7:
+  docker-modem@5.0.7(supports-color@10.2.2):
     dependencies:
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@10.2.2)
       readable-stream: 3.6.2
       split-ca: 1.0.1
       ssh2: 1.17.0
     transitivePeerDependencies:
       - supports-color
 
-  dockerode@4.0.10:
+  dockerode@5.0.1(supports-color@10.2.2):
     dependencies:
       '@balena/dockerignore': 1.0.2
-      '@grpc/grpc-js': 1.14.3
+      '@grpc/grpc-js': 1.14.4
       '@grpc/proto-loader': 0.7.15
-      docker-modem: 5.0.7
-      protobufjs: 7.5.5
-      tar-fs: 2.1.4
-      uuid: 10.0.0
+      docker-modem: 5.0.7(supports-color@10.2.2)
+      protobufjs: 7.6.5
+      tar-fs: 2.1.5
     transitivePeerDependencies:
       - supports-color
 
-  doctrine@2.1.0:
-    dependencies:
-      esutils: 2.0.3
-
   doctrine@3.0.0:
     dependencies:
       esutils: 2.0.3
@@ -20793,7 +21248,7 @@ snapshots:
 
   dom-helpers@5.2.1:
     dependencies:
-      '@babel/runtime': 7.29.2
+      '@babel/runtime': 7.29.7
       csstype: 3.2.3
 
   dom-serializer@1.4.1:
@@ -20832,7 +21287,7 @@ snapshots:
     dependencies:
       domelementtype: 3.0.0
 
-  dompurify@3.4.0:
+  dompurify@3.4.12:
     optionalDependencies:
       '@types/trusted-types': 2.0.7
 
@@ -20883,6 +21338,10 @@ snapshots:
       es-errors: 1.3.0
       gopd: 1.2.0
 
+  duplexer2@0.1.4:
+    dependencies:
+      readable-stream: 2.3.8
+
   earcut@3.0.2: {}
 
   eastasianwidth@0.2.0: {}
@@ -20895,27 +21354,27 @@ snapshots:
 
   ejs@5.0.1: {}
 
-  electron-builder-squirrel-windows@26.9.1(dmg-builder@26.9.1):
+  electron-builder-squirrel-windows@26.15.3(dmg-builder@26.15.3)(supports-color@10.2.2):
     dependencies:
-      app-builder-lib: 26.9.1(patch_hash=2dfb3fcdfe573cca6c248cecf63ddea5c8fa0276859695fba6c9664d0ff285d6)(dmg-builder@26.9.1)(electron-builder-squirrel-windows@26.9.1)
-      builder-util: 26.9.0
-      electron-winstaller: 5.4.0
+      app-builder-lib: 26.15.3(dmg-builder@26.15.3)(electron-builder-squirrel-windows@26.15.3)(supports-color@10.2.2)
+      builder-util: 26.15.3(supports-color@10.2.2)
+      electron-winstaller: 5.4.0(supports-color@10.2.2)
     transitivePeerDependencies:
       - dmg-builder
       - supports-color
 
-  electron-builder@26.9.1(electron-builder-squirrel-windows@26.9.1):
+  electron-builder@26.15.3(electron-builder-squirrel-windows@26.15.3)(supports-color@10.2.2):
     dependencies:
-      app-builder-lib: 26.9.1(patch_hash=2dfb3fcdfe573cca6c248cecf63ddea5c8fa0276859695fba6c9664d0ff285d6)(dmg-builder@26.9.1)(electron-builder-squirrel-windows@26.9.1)
-      builder-util: 26.9.0
-      builder-util-runtime: 9.6.0
+      app-builder-lib: 26.15.3(dmg-builder@26.15.3)(electron-builder-squirrel-windows@26.15.3)(supports-color@10.2.2)
+      builder-util: 26.15.3(supports-color@10.2.2)
+      builder-util-runtime: 9.7.0(supports-color@10.2.2)
       chalk: 4.1.2
       ci-info: 4.4.0
-      dmg-builder: 26.9.1(electron-builder-squirrel-windows@26.9.1)
+      dmg-builder: 26.15.3(electron-builder-squirrel-windows@26.15.3)(supports-color@10.2.2)
       fs-extra: 10.1.0
       lazy-val: 1.0.5
       simple-update-notifier: 2.0.0
-      yargs: 17.7.2
+      yargs: 17.7.3
     transitivePeerDependencies:
       - electron-builder-squirrel-windows
       - supports-color
@@ -20924,13 +21383,14 @@ snapshots:
     dependencies:
       unzip-crx-3: 0.2.0
 
-  electron-publish@26.9.0:
+  electron-publish@26.15.3(supports-color@10.2.2):
     dependencies:
       '@types/fs-extra': 9.0.13
-      builder-util: 26.9.0
-      builder-util-runtime: 9.6.0
+      aws4: 1.13.2
+      builder-util: 26.15.3(supports-color@10.2.2)
+      builder-util-runtime: 9.7.0(supports-color@10.2.2)
       chalk: 4.1.2
-      form-data: 4.0.5
+      form-data: 4.0.6
       fs-extra: 10.1.0
       lazy-val: 1.0.5
       mime: 2.6.0
@@ -20942,30 +21402,30 @@ snapshots:
       conf: 15.1.0
       type-fest: 5.5.0
 
-  electron-to-chromium@1.5.332: {}
+  electron-to-chromium@1.5.396: {}
 
   electron-window-state@5.0.3:
     dependencies:
       jsonfile: 4.0.0
       mkdirp: 0.5.6
 
-  electron-winstaller@5.4.0:
+  electron-winstaller@5.4.0(supports-color@10.2.2):
     dependencies:
       '@electron/asar': 3.4.1
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@10.2.2)
       fs-extra: 7.0.1
       lodash: 4.18.1
       temp: 0.9.4
     optionalDependencies:
-      '@electron/windows-sign': 1.2.2
+      '@electron/windows-sign': 1.2.2(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
-  electron@42.0.0:
+  electron@43.2.0(supports-color@10.2.2):
     dependencies:
-      '@electron/get': 5.0.0
-      '@types/node': 18.19.130
-      extract-zip: 2.0.1
+      '@electron-internal/extract-zip': 1.0.3
+      '@electron/get': 5.0.0(supports-color@10.2.2)
+      '@types/node': 25.9.3
     transitivePeerDependencies:
       - supports-color
 
@@ -20983,8 +21443,6 @@ snapshots:
 
   emoji-regex-xs@1.0.0: {}
 
-  emoji-regex@10.6.0: {}
-
   emoji-regex@8.0.0: {}
 
   emoji-regex@9.2.2: {}
@@ -21003,19 +21461,14 @@ snapshots:
 
   encodeurl@2.0.0: {}
 
-  encoding@0.1.13:
-    dependencies:
-      iconv-lite: 0.6.3
-    optional: true
-
   end-of-stream@1.4.5:
     dependencies:
       once: 1.4.0
 
-  enhanced-resolve@5.20.1:
+  enhanced-resolve@5.24.5:
     dependencies:
       graceful-fs: 4.2.11
-      tapable: 2.3.2
+      tapable: 2.3.3
 
   enquirer@2.3.6:
     dependencies:
@@ -21039,95 +21492,17 @@ snapshots:
 
   envinfo@7.21.0: {}
 
-  environment@1.1.0: {}
-
   err-code@2.0.3: {}
 
   error-ex@1.3.4:
     dependencies:
       is-arrayish: 0.2.1
 
-  es-abstract@1.24.1:
-    dependencies:
-      array-buffer-byte-length: 1.0.2
-      arraybuffer.prototype.slice: 1.0.4
-      available-typed-arrays: 1.0.7
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      data-view-buffer: 1.0.2
-      data-view-byte-length: 1.0.2
-      data-view-byte-offset: 1.0.1
-      es-define-property: 1.0.1
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      es-set-tostringtag: 2.1.0
-      es-to-primitive: 1.3.0
-      function.prototype.name: 1.1.8
-      get-intrinsic: 1.3.0
-      get-proto: 1.0.1
-      get-symbol-description: 1.1.0
-      globalthis: 1.0.4
-      gopd: 1.2.0
-      has-property-descriptors: 1.0.2
-      has-proto: 1.2.0
-      has-symbols: 1.1.0
-      hasown: 2.0.3
-      internal-slot: 1.1.0
-      is-array-buffer: 3.0.5
-      is-callable: 1.2.7
-      is-data-view: 1.0.2
-      is-negative-zero: 2.0.3
-      is-regex: 1.2.1
-      is-set: 2.0.3
-      is-shared-array-buffer: 1.0.4
-      is-string: 1.1.1
-      is-typed-array: 1.1.15
-      is-weakref: 1.1.1
-      math-intrinsics: 1.1.0
-      object-inspect: 1.13.4
-      object-keys: 1.1.1
-      object.assign: 4.1.7
-      own-keys: 1.0.1
-      regexp.prototype.flags: 1.5.4
-      safe-array-concat: 1.1.3
-      safe-push-apply: 1.0.0
-      safe-regex-test: 1.1.0
-      set-proto: 1.0.0
-      stop-iteration-iterator: 1.1.0
-      string.prototype.trim: 1.2.10
-      string.prototype.trimend: 1.0.9
-      string.prototype.trimstart: 1.0.8
-      typed-array-buffer: 1.0.3
-      typed-array-byte-length: 1.0.3
-      typed-array-byte-offset: 1.0.4
-      typed-array-length: 1.0.7
-      unbox-primitive: 1.1.0
-      which-typed-array: 1.1.20
-
   es-define-property@1.0.1: {}
 
   es-errors@1.3.0: {}
 
-  es-iterator-helpers@1.2.2:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-abstract: 1.24.1
-      es-errors: 1.3.0
-      es-set-tostringtag: 2.1.0
-      function-bind: 1.1.2
-      get-intrinsic: 1.3.0
-      globalthis: 1.0.4
-      gopd: 1.2.0
-      has-property-descriptors: 1.0.2
-      has-proto: 1.2.0
-      has-symbols: 1.1.0
-      internal-slot: 1.1.0
-      iterator.prototype: 1.1.5
-      safe-array-concat: 1.1.3
-
-  es-module-lexer@2.0.0: {}
+  es-module-lexer@2.3.1: {}
 
   es-object-atoms@1.1.1:
     dependencies:
@@ -21138,17 +21513,9 @@ snapshots:
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
       has-tostringtag: 1.0.2
-      hasown: 2.0.3
+      hasown: 2.0.4
 
-  es-shim-unscopables@1.1.0:
-    dependencies:
-      hasown: 2.0.3
-
-  es-to-primitive@1.3.0:
-    dependencies:
-      is-callable: 1.2.7
-      is-date-object: 1.1.0
-      is-symbol: 1.1.1
+  es-toolkit@1.49.0: {}
 
   es6-error@4.1.1:
     optional: true
@@ -21194,231 +21561,18 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-compat-utils@0.5.1(eslint@8.57.1):
-    dependencies:
-      eslint: 8.57.1
-      semver: 7.7.4
+  eslint-plugin-element-call@https://codeload.github.com/element-hq/element-call/tar.gz/2d64cf4b308c770118dbbdb914af332e5baa7702#path:/eslint: {}
 
-  eslint-config-google@0.14.0(eslint@8.57.1):
+  eslint-plugin-storybook@10.5.5(@typescript/typescript6@6.0.2)(eslint@8.57.1)(storybook@10.5.5)(supports-color@7.2.0):
     dependencies:
-      eslint: 8.57.1
-
-  eslint-config-prettier@10.1.8(eslint@8.57.1):
-    dependencies:
-      eslint: 8.57.1
-
-  eslint-import-resolver-node@0.3.9:
-    dependencies:
-      debug: 3.2.7
-      is-core-module: 2.16.2
-      resolve: 1.22.12
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.59.2(eslint@8.57.1)(typescript@6.0.3))(eslint-import-resolver-node@0.3.9)(eslint@8.57.1):
-    dependencies:
-      debug: 3.2.7
-    optionalDependencies:
-      '@typescript-eslint/parser': 8.59.2(eslint@8.57.1)(typescript@6.0.3)
-      eslint: 8.57.1
-      eslint-import-resolver-node: 0.3.9
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-plugin-deprecate@0.9.0(eslint@8.57.1):
-    dependencies:
-      eslint: 8.57.1
-
-  eslint-plugin-es-x@7.8.0(eslint@8.57.1):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@8.57.1)
-      '@eslint-community/regexpp': 4.12.2
-      eslint: 8.57.1
-      eslint-compat-utils: 0.5.1(eslint@8.57.1)
-
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.59.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1):
-    dependencies:
-      '@rtsao/scc': 1.1.0
-      array-includes: 3.1.9
-      array.prototype.findlastindex: 1.2.6
-      array.prototype.flat: 1.3.3
-      array.prototype.flatmap: 1.3.3
-      debug: 3.2.7
-      doctrine: 2.1.0
-      eslint: 8.57.1
-      eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.59.2(eslint@8.57.1)(typescript@6.0.3))(eslint-import-resolver-node@0.3.9)(eslint@8.57.1)
-      hasown: 2.0.3
-      is-core-module: 2.16.2
-      is-glob: 4.0.3
-      minimatch: 3.1.5
-      object.fromentries: 2.0.8
-      object.groupby: 1.0.3
-      object.values: 1.2.1
-      semver: 6.3.1
-      string.prototype.trimend: 1.0.9
-      tsconfig-paths: 3.15.0
-    optionalDependencies:
-      '@typescript-eslint/parser': 8.59.2(eslint@8.57.1)(typescript@6.0.3)
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
-
-  eslint-plugin-jest@29.15.2(@typescript-eslint/eslint-plugin@8.59.2(@typescript-eslint/parser@8.59.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)(jest@30.3.0(@types/node@18.19.130)(babel-plugin-macros@3.1.0))(typescript@6.0.3):
-    dependencies:
-      '@typescript-eslint/utils': 8.59.2(eslint@8.57.1)(typescript@6.0.3)
-      eslint: 8.57.1
-    optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.59.2(@typescript-eslint/parser@8.59.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)(typescript@6.0.3)
-      jest: 30.3.0(@types/node@18.19.130)(babel-plugin-macros@3.1.0)
-      typescript: 6.0.3
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-plugin-jsx-a11y@6.10.2(eslint@8.57.1):
-    dependencies:
-      aria-query: 5.3.2
-      array-includes: 3.1.9
-      array.prototype.flatmap: 1.3.3
-      ast-types-flow: 0.0.8
-      axe-core: 4.11.4
-      axobject-query: 4.1.0
-      damerau-levenshtein: 1.0.8
-      emoji-regex: 9.2.2
-      eslint: 8.57.1
-      hasown: 2.0.3
-      jsx-ast-utils: 3.3.5
-      language-tags: 1.0.9
-      minimatch: 3.1.5
-      object.fromentries: 2.0.8
-      safe-regex-test: 1.1.0
-      string.prototype.includes: 2.0.1
-
-  eslint-plugin-matrix-org@3.0.0(ada405a187c98c376554188eb28e4a55):
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/eslint-parser': 7.28.6(@babel/core@7.29.0)(eslint@8.57.1)
-      '@babel/eslint-plugin': 7.27.1(@babel/eslint-parser@7.28.6(@babel/core@7.29.0)(eslint@8.57.1))(eslint@8.57.1)
-      '@stylistic/eslint-plugin': 5.10.0(eslint@8.57.1)
-      '@typescript-eslint/eslint-plugin': 8.59.2(@typescript-eslint/parser@8.59.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)(typescript@6.0.3)
-      '@typescript-eslint/parser': 8.59.2(eslint@8.57.1)(typescript@6.0.3)
-      eslint: 8.57.1
-      eslint-config-google: 0.14.0(eslint@8.57.1)
-      eslint-config-prettier: 10.1.8(eslint@8.57.1)
-      eslint-plugin-deprecate: 0.9.0(eslint@8.57.1)
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.59.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)
-      eslint-plugin-jest: 29.15.2(@typescript-eslint/eslint-plugin@8.59.2(@typescript-eslint/parser@8.59.2(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)(typescript@6.0.3))(eslint@8.57.1)(jest@30.3.0(@types/node@18.19.130)(babel-plugin-macros@3.1.0))(typescript@6.0.3)
-      eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
-      eslint-plugin-react: 7.37.5(eslint@8.57.1)
-      eslint-plugin-react-hooks: 7.1.1(eslint@8.57.1)
-      eslint-plugin-unicorn: 56.0.1(eslint@8.57.1)
-      prettier: 3.8.3
-      typescript: 6.0.3
-
-  eslint-plugin-n@17.24.0(eslint@8.57.1)(typescript@6.0.3):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@8.57.1)
-      enhanced-resolve: 5.20.1
-      eslint: 8.57.1
-      eslint-plugin-es-x: 7.8.0(eslint@8.57.1)
-      get-tsconfig: 4.14.0
-      globals: 15.15.0
-      globrex: 0.1.2
-      ignore: 5.3.2
-      semver: 7.7.4
-      ts-declaration-location: 1.0.7(typescript@6.0.3)
-    transitivePeerDependencies:
-      - typescript
-
-  eslint-plugin-react-compiler@19.0.0-beta-ebf51a3-20250411(eslint@8.57.1):
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/parser': 7.29.2
-      '@babel/plugin-proposal-private-methods': 7.18.6(@babel/core@7.29.0)
-      eslint: 8.57.1
-      hermes-parser: 0.25.1
-      zod: 3.25.76
-      zod-validation-error: 3.5.4(zod@3.25.76)
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-plugin-react-compiler@19.1.0-rc.2(eslint@8.57.1):
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/parser': 7.29.2
-      '@babel/plugin-proposal-private-methods': 7.18.6(@babel/core@7.29.0)
-      eslint: 8.57.1
-      hermes-parser: 0.25.1
-      zod: 3.25.76
-      zod-validation-error: 3.5.4(zod@3.25.76)
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-plugin-react-hooks@7.1.1(eslint@8.57.1):
-    dependencies:
-      '@babel/core': 7.29.0
-      '@babel/parser': 7.29.2
-      eslint: 8.57.1
-      hermes-parser: 0.25.1
-      zod: 4.3.6
-      zod-validation-error: 4.0.2(zod@4.3.6)
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint-plugin-react@7.37.5(eslint@8.57.1):
-    dependencies:
-      array-includes: 3.1.9
-      array.prototype.findlast: 1.2.5
-      array.prototype.flatmap: 1.3.3
-      array.prototype.tosorted: 1.1.4
-      doctrine: 2.1.0
-      es-iterator-helpers: 1.2.2
-      eslint: 8.57.1
-      estraverse: 5.3.0
-      hasown: 2.0.3
-      jsx-ast-utils: 3.3.5
-      minimatch: 3.1.5
-      object.entries: 1.1.9
-      object.fromentries: 2.0.8
-      object.values: 1.2.1
-      prop-types: 15.8.1
-      resolve: 2.0.0-next.5
-      semver: 6.3.1
-      string.prototype.matchall: 4.0.12
-      string.prototype.repeat: 1.0.0
-
-  eslint-plugin-storybook@10.3.6(eslint@8.57.1)(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(typescript@6.0.3):
-    dependencies:
-      '@typescript-eslint/utils': 8.59.2(eslint@8.57.1)(typescript@6.0.3)
-      eslint: 8.57.1
-      storybook: 10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@typescript-eslint/types': 8.66.0
+      '@typescript-eslint/utils': 8.66.0(@typescript/typescript6@6.0.2)(eslint@8.57.1)(supports-color@7.2.0)
+      eslint: 8.57.1(supports-color@7.2.0)
+      storybook: 10.5.5(@types/react@19.2.18)(prettier@2.8.8)(react@19.2.8)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-unicorn@56.0.1(eslint@8.57.1):
-    dependencies:
-      '@babel/helper-validator-identifier': 7.28.5
-      '@eslint-community/eslint-utils': 4.9.1(eslint@8.57.1)
-      ci-info: 4.4.0
-      clean-regexp: 1.0.0
-      core-js-compat: 3.49.0
-      eslint: 8.57.1
-      esquery: 1.7.0
-      globals: 15.15.0
-      indent-string: 4.0.0
-      is-builtin-module: 3.2.1
-      jsesc: 3.1.0
-      pluralize: 8.0.0
-      read-pkg-up: 7.0.1
-      regexp-tree: 0.1.27
-      regjsparser: 0.10.0
-      semver: 7.7.4
-      strip-indent: 3.0.0
-
-  eslint-rule-composer@0.3.0: {}
-
   eslint-scope@5.1.1:
     dependencies:
       esrecurse: 4.3.0
@@ -21429,28 +21583,24 @@ snapshots:
       esrecurse: 4.3.0
       estraverse: 5.3.0
 
-  eslint-visitor-keys@2.1.0: {}
-
   eslint-visitor-keys@3.4.3: {}
 
-  eslint-visitor-keys@4.2.1: {}
-
   eslint-visitor-keys@5.0.1: {}
 
-  eslint@8.57.1:
+  eslint@8.57.1(supports-color@7.2.0):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@8.57.1)
+      '@eslint-community/eslint-utils': 4.10.1(eslint@8.57.1)
       '@eslint-community/regexpp': 4.12.2
-      '@eslint/eslintrc': 2.1.4
+      '@eslint/eslintrc': 2.1.4(supports-color@7.2.0)
       '@eslint/js': 8.57.1
-      '@humanwhocodes/config-array': 0.13.0
+      '@humanwhocodes/config-array': 0.13.0(supports-color@7.2.0)
       '@humanwhocodes/module-importer': 1.0.1
       '@nodelib/fs.walk': 1.2.8
-      '@ungap/structured-clone': 1.3.0
-      ajv: 6.14.0
+      '@ungap/structured-clone': 1.3.3
+      ajv: 6.15.0
       chalk: 4.1.2
       cross-spawn: 7.0.6
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@7.2.0)
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.2.2
@@ -21468,7 +21618,7 @@ snapshots:
       imurmurhash: 0.1.4
       is-glob: 4.0.3
       is-path-inside: 3.0.3
-      js-yaml: 4.1.1
+      js-yaml: 4.3.1
       json-stable-stringify-without-jsonify: 1.0.1
       levn: 0.4.1
       lodash.merge: 4.6.2
@@ -21480,16 +21630,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  espree@10.4.0:
-    dependencies:
-      acorn: 8.16.0
-      acorn-jsx: 5.3.2(acorn@8.16.0)
-      eslint-visitor-keys: 4.2.1
-
   espree@9.6.1:
     dependencies:
-      acorn: 8.16.0
-      acorn-jsx: 5.3.2(acorn@8.16.0)
+      acorn: 8.18.0
+      acorn-jsx: 5.3.2(acorn@8.18.0)
       eslint-visitor-keys: 3.4.3
 
   esprima@4.0.1: {}
@@ -21518,13 +21662,9 @@ snapshots:
 
   event-target-shim@5.0.1: {}
 
-  eventemitter3@4.0.7: {}
-
-  eventemitter3@5.0.4: {}
-
   events-universal@1.0.1:
     dependencies:
-      bare-events: 2.8.2
+      bare-events: 2.9.1
     transitivePeerDependencies:
       - bare-abort-controller
 
@@ -21555,67 +21695,31 @@ snapshots:
 
   expect-type@1.3.0: {}
 
-  expect@30.3.0:
+  expect@30.4.1:
     dependencies:
-      '@jest/expect-utils': 30.3.0
+      '@jest/expect-utils': 30.4.1
       '@jest/get-type': 30.1.0
-      jest-matcher-utils: 30.3.0
-      jest-message-util: 30.3.0
-      jest-mock: 30.3.0
-      jest-util: 30.3.0
+      jest-matcher-utils: 30.4.1
+      jest-message-util: 30.4.1
+      jest-mock: 30.4.1
+      jest-util: 30.4.1
 
   exponential-backoff@3.1.3: {}
 
-  express@4.22.1:
-    dependencies:
-      accepts: 1.3.8
-      array-flatten: 1.1.1
-      body-parser: 1.20.4
-      content-disposition: 0.5.4
-      content-type: 1.0.5
-      cookie: 0.7.2
-      cookie-signature: 1.0.7
-      debug: 2.6.9
-      depd: 2.0.0
-      encodeurl: 2.0.0
-      escape-html: 1.0.3
-      etag: 1.8.1
-      finalhandler: 1.3.2
-      fresh: 0.5.2
-      http-errors: 2.0.1
-      merge-descriptors: 1.0.3
-      methods: 1.1.2
-      on-finished: 2.4.1
-      parseurl: 1.3.3
-      path-to-regexp: 0.1.13
-      proxy-addr: 2.0.7
-      qs: 6.15.0
-      range-parser: 1.2.1
-      safe-buffer: 5.2.1
-      send: 0.19.2
-      serve-static: 1.16.3
-      setprototypeof: 1.2.0
-      statuses: 2.0.2
-      type-is: 1.6.18
-      utils-merge: 1.0.1
-      vary: 1.1.2
-    transitivePeerDependencies:
-      - supports-color
-
-  express@5.2.1:
+  express@5.2.1(supports-color@10.2.2):
     dependencies:
       accepts: 2.0.0
-      body-parser: 2.2.2
+      body-parser: 2.3.0(supports-color@10.2.2)
       content-disposition: 1.0.1
       content-type: 1.0.5
       cookie: 0.7.2
       cookie-signature: 1.2.2
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@10.2.2)
       depd: 2.0.0
       encodeurl: 2.0.0
       escape-html: 1.0.3
       etag: 1.8.1
-      finalhandler: 2.1.1
+      finalhandler: 2.1.1(supports-color@10.2.2)
       fresh: 2.0.0
       http-errors: 2.0.1
       merge-descriptors: 2.0.0
@@ -21624,13 +21728,13 @@ snapshots:
       once: 1.4.0
       parseurl: 1.3.3
       proxy-addr: 2.0.7
-      qs: 6.15.0
-      range-parser: 1.2.1
-      router: 2.2.0
-      send: 1.2.1
-      serve-static: 2.2.1
+      qs: 6.15.3
+      range-parser: 1.3.0
+      router: 2.2.0(supports-color@10.2.2)
+      send: 1.2.1(supports-color@10.2.2)
+      serve-static: 2.2.1(supports-color@10.2.2)
       statuses: 2.0.2
-      type-is: 2.0.1
+      type-is: 2.1.0
       vary: 1.1.2
     transitivePeerDependencies:
       - supports-color
@@ -21639,23 +21743,8 @@ snapshots:
 
   extend@3.0.2: {}
 
-  extract-zip@2.0.1:
-    dependencies:
-      debug: 4.4.3
-      get-stream: 5.2.0
-      yauzl: 2.10.0
-    optionalDependencies:
-      '@types/yauzl': 2.10.3
-    transitivePeerDependencies:
-      - supports-color
-
-  extsprintf@1.4.1:
-    optional: true
-
   fake-indexeddb@6.2.5: {}
 
-  fast-content-type-parse@3.0.0: {}
-
   fast-deep-equal@3.1.3: {}
 
   fast-fifo@1.3.2: {}
@@ -21672,7 +21761,7 @@ snapshots:
 
   fast-levenshtein@2.0.6: {}
 
-  fast-uri@3.1.2: {}
+  fast-uri@3.1.5: {}
 
   fastest-levenshtein@1.0.16: {}
 
@@ -21680,10 +21769,6 @@ snapshots:
     dependencies:
       reusify: 1.1.0
 
-  faye-websocket@0.11.4:
-    dependencies:
-      websocket-driver: 0.7.4
-
   fb-watchman@2.0.2:
     dependencies:
       bser: 2.1.1
@@ -21692,15 +21777,11 @@ snapshots:
     dependencies:
       walk-up-path: 4.0.0
 
-  fd-slicer@1.1.0:
-    dependencies:
-      pend: 1.2.0
-
-  fdir@6.5.0(picomatch@4.0.4):
+  fdir@6.5.0(picomatch@4.0.5):
     dependencies:
       '@types/picomatch': 4.0.2
     optionalDependencies:
-      picomatch: 4.0.4
+      picomatch: 4.0.5
 
   fetch-mock@12.6.0:
     dependencies:
@@ -21715,19 +21796,19 @@ snapshots:
     dependencies:
       escape-string-regexp: 1.0.5
 
-  file-entry-cache@11.1.3:
+  file-entry-cache@11.1.5:
     dependencies:
-      flat-cache: 6.1.22
+      flat-cache: 6.1.23
 
   file-entry-cache@6.0.1:
     dependencies:
       flat-cache: 3.2.0
 
-  file-loader@6.2.0(webpack@5.106.2):
+  file-loader@6.2.0(webpack@5.109.2):
     dependencies:
       loader-utils: 2.0.4
       schema-utils: 3.3.0
-      webpack: 5.106.2(webpack-cli@7.0.2)
+      webpack: 5.109.2(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack-cli@7.2.2)
 
   file-saver@2.0.5: {}
 
@@ -21737,27 +21818,15 @@ snapshots:
     dependencies:
       minimatch: 5.1.9
 
-  filesize@11.0.17: {}
+  filesize@11.0.22: {}
 
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
 
-  finalhandler@1.3.2:
+  finalhandler@2.1.1(supports-color@10.2.2):
     dependencies:
-      debug: 2.6.9
-      encodeurl: 2.0.0
-      escape-html: 1.0.3
-      on-finished: 2.4.1
-      parseurl: 1.3.3
-      statuses: 2.0.2
-      unpipe: 1.0.0
-    transitivePeerDependencies:
-      - supports-color
-
-  finalhandler@2.1.1:
-    dependencies:
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@10.2.2)
       encodeurl: 2.0.0
       escape-html: 1.0.3
       on-finished: 2.4.1
@@ -21778,19 +21847,19 @@ snapshots:
 
   flat-cache@3.2.0:
     dependencies:
-      flatted: 3.4.2
+      flatted: 3.4.4
       keyv: 4.5.4
       rimraf: 3.0.2
 
-  flat-cache@6.1.22:
+  flat-cache@6.1.23:
     dependencies:
-      cacheable: 2.3.5
-      flatted: 3.4.2
+      cacheable: 2.5.0
+      flatted: 3.4.4
       hookified: 1.15.1
 
   flat@5.0.2: {}
 
-  flatted@3.4.2: {}
+  flatted@3.4.4: {}
 
   focus-lock@1.3.6:
     dependencies:
@@ -21800,7 +21869,9 @@ snapshots:
     dependencies:
       tabbable: 6.4.0
 
-  follow-redirects@1.16.0: {}
+  follow-redirects@1.16.0(debug@4.4.3):
+    optionalDependencies:
+      debug: 4.4.3(supports-color@7.2.0)
 
   for-each@0.3.5:
     dependencies:
@@ -21813,32 +21884,34 @@ snapshots:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
-  form-data@4.0.5:
+  form-data@4.0.6:
     dependencies:
       asynckit: 0.4.0
       combined-stream: 1.0.8
       es-set-tostringtag: 2.1.0
-      hasown: 2.0.3
+      hasown: 2.0.4
       mime-types: 2.1.35
 
   formatly@0.3.0:
     dependencies:
       fd-package-json: 2.0.0
 
-  forwarded-parse@2.1.2: {}
-
   forwarded@0.2.0: {}
 
   fraction.js@5.3.4: {}
 
-  fresh@0.5.2: {}
+  framer-motion@12.42.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.8)(react@19.2.8):
+    dependencies:
+      motion-dom: 12.42.2
+      motion-utils: 12.39.0
+      tslib: 2.8.1
+    optionalDependencies:
+      '@emotion/is-prop-valid': 1.4.0
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
 
   fresh@2.0.0: {}
 
-  front-matter@4.0.2:
-    dependencies:
-      js-yaml: 3.14.2
-
   fs-constants@1.0.0: {}
 
   fs-extra@10.1.0:
@@ -21847,7 +21920,13 @@ snapshots:
       jsonfile: 6.2.1
       universalify: 2.0.1
 
-  fs-extra@11.3.5:
+  fs-extra@11.3.6:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.1
+      universalify: 2.0.1
+
+  fs-extra@11.4.0:
     dependencies:
       graceful-fs: 4.2.11
       jsonfile: 6.2.1
@@ -21890,17 +21969,6 @@ snapshots:
 
   function-timeout@0.1.1: {}
 
-  function.prototype.name@1.1.8:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      functions-have-names: 1.2.3
-      hasown: 2.0.3
-      is-callable: 1.2.7
-
-  functions-have-names@1.2.3: {}
-
   generator-function@2.0.1: {}
 
   gensync@1.0.0-beta.2: {}
@@ -21919,14 +21987,14 @@ snapshots:
       get-proto: 1.0.1
       gopd: 1.2.0
       has-symbols: 1.1.0
-      hasown: 2.0.3
+      hasown: 2.0.4
       math-intrinsics: 1.1.0
 
   get-nonce@1.0.1: {}
 
   get-package-type@0.1.0: {}
 
-  get-port@7.2.0: {}
+  get-port@5.1.1: {}
 
   get-proto@1.0.1:
     dependencies:
@@ -21939,12 +22007,6 @@ snapshots:
 
   get-stream@6.0.1: {}
 
-  get-symbol-description@1.1.0:
-    dependencies:
-      call-bound: 1.0.4
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-
   get-tsconfig@4.14.0:
     dependencies:
       resolve-pkg-maps: 1.0.0
@@ -21978,7 +22040,7 @@ snapshots:
 
   glob@13.0.6:
     dependencies:
-      minimatch: 10.2.5
+      minimatch: 10.2.6
       minipass: 7.1.3
       path-scurry: 2.0.2
 
@@ -21997,7 +22059,7 @@ snapshots:
       es6-error: 4.1.1
       matcher: 3.0.0
       roarr: 2.15.4
-      semver: 7.7.4
+      semver: 7.8.5
       serialize-error: 7.0.1
     optional: true
 
@@ -22015,26 +22077,23 @@ snapshots:
     dependencies:
       type-fest: 0.20.2
 
-  globals@15.15.0: {}
-
   globalthis@1.0.4:
     dependencies:
       define-properties: 1.2.1
       gopd: 1.2.0
+    optional: true
 
-  globby@16.2.0:
+  globby@16.2.2:
     dependencies:
       '@sindresorhus/merge-streams': 4.0.0
       fast-glob: 3.3.3
-      ignore: 7.0.5
+      ignore: 7.0.6
       is-path-inside: 4.0.0
       slash: 5.1.0
       unicorn-magic: 0.4.0
 
   globjoin@0.1.4: {}
 
-  globrex@0.1.2: {}
-
   gopd@1.2.0: {}
 
   got@11.8.6:
@@ -22057,8 +22116,6 @@ snapshots:
 
   hachure-fill@0.5.2: {}
 
-  handle-thing@2.0.1: {}
-
   handlebars@4.7.9:
     dependencies:
       minimist: 1.2.8
@@ -22068,9 +22125,20 @@ snapshots:
     optionalDependencies:
       uglify-js: 3.19.3
 
-  harmony-reflect@1.6.2: {}
+  happy-dom@20.11.1:
+    dependencies:
+      '@types/node': 25.9.3
+      '@types/whatwg-mimetype': 3.0.2
+      '@types/ws': 8.18.1
+      buffer-image-size: 0.6.4
+      entities: 7.0.1
+      whatwg-mimetype: 3.0.0
+      ws: 8.21.1
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
 
-  has-bigints@1.1.0: {}
+  harmony-reflect@1.6.2: {}
 
   has-flag@4.0.0: {}
 
@@ -22080,10 +22148,6 @@ snapshots:
     dependencies:
       es-define-property: 1.0.1
 
-  has-proto@1.2.0:
-    dependencies:
-      dunder-proto: 1.0.1
-
   has-symbols@1.1.0: {}
 
   has-tostringtag@1.0.2:
@@ -22111,11 +22175,7 @@ snapshots:
     dependencies:
       hookified: 1.15.1
 
-  hasown@2.0.2:
-    dependencies:
-      function-bind: 1.1.2
-
-  hasown@2.0.3:
+  hasown@2.0.4:
     dependencies:
       function-bind: 1.1.2
 
@@ -22139,12 +22199,6 @@ snapshots:
 
   he@1.2.0: {}
 
-  hermes-estree@0.25.1: {}
-
-  hermes-parser@0.25.1:
-    dependencies:
-      hermes-estree: 0.25.1
-
   highlight.js@11.11.1: {}
 
   hmac-drbg@1.0.1:
@@ -22163,24 +22217,15 @@ snapshots:
 
   hookified@2.2.0: {}
 
-  hosted-git-info@2.8.9: {}
+  hosted-git-info@10.1.1:
+    dependencies:
+      lru-cache: 11.2.6
 
   hosted-git-info@4.1.0:
     dependencies:
       lru-cache: 6.0.0
 
-  hosted-git-info@9.0.2:
-    dependencies:
-      lru-cache: 11.2.6
-
-  hpack.js@2.1.6:
-    dependencies:
-      inherits: 2.0.4
-      obuf: 1.1.2
-      readable-stream: 2.3.8
-      wbuf: 1.7.3
-
-  html-dom-parser@7.0.1:
+  html-dom-parser@8.0.0:
     dependencies:
       domhandler: 6.0.1
       htmlparser2: 12.0.0
@@ -22203,31 +22248,31 @@ snapshots:
       he: 1.2.0
       param-case: 3.0.4
       relateurl: 0.2.7
-      terser: 5.47.1
+      terser: 5.49.0
 
-  html-react-parser@6.0.1(@types/react@19.2.14)(react@19.2.6):
+  html-react-parser@6.1.5(@types/react@19.2.18)(react@19.2.8):
     dependencies:
       domhandler: 6.0.1
-      html-dom-parser: 7.0.1
-      react: 19.2.6
+      html-dom-parser: 8.0.0
+      react: 19.2.8
       react-property: 2.0.2
-      style-to-js: 1.1.21
+      style-to-js: 2.0.2
     optionalDependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
 
   html-tags@5.1.0: {}
 
   html-void-elements@3.0.0: {}
 
-  html-webpack-plugin@5.6.7(webpack@5.106.2):
+  html-webpack-plugin@5.6.8(webpack@5.109.2):
     dependencies:
       '@types/html-minifier-terser': 6.1.0
       html-minifier-terser: 6.1.0
       lodash: 4.18.1
       pretty-error: 4.0.0
-      tapable: 2.3.2
+      tapable: 2.3.3
     optionalDependencies:
-      webpack: 5.106.2(webpack-cli@7.0.2)
+      webpack: 5.109.2(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack-cli@7.2.2)
 
   htmlparser2@10.1.0:
     dependencies:
@@ -22252,8 +22297,6 @@ snapshots:
 
   http-cache-semantics@4.2.0: {}
 
-  http-deceiver@1.2.7: {}
-
   http-errors@1.8.1:
     dependencies:
       depd: 1.1.2
@@ -22270,34 +22313,39 @@ snapshots:
       statuses: 2.0.2
       toidentifier: 1.0.1
 
-  http-parser-js@0.5.10: {}
-
-  http-proxy-agent@7.0.2:
+  http-proxy-agent@7.0.2(supports-color@10.2.2):
     dependencies:
       agent-base: 7.1.4
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
-  http-proxy-middleware@2.0.9(@types/express@4.17.25):
+  http-proxy-agent@7.0.2(supports-color@7.2.0):
     dependencies:
-      '@types/http-proxy': 1.17.17
-      http-proxy: 1.18.1
-      is-glob: 4.0.3
-      is-plain-obj: 3.0.0
-      micromatch: 4.0.8
-    optionalDependencies:
-      '@types/express': 4.17.25
+      agent-base: 7.1.4
+      debug: 4.4.3(supports-color@7.2.0)
     transitivePeerDependencies:
-      - debug
+      - supports-color
+    optional: true
 
-  http-proxy@1.18.1:
+  http-proxy-agent@9.1.0(supports-color@10.2.2):
     dependencies:
-      eventemitter3: 4.0.7
-      follow-redirects: 1.16.0
-      requires-port: 1.0.0
+      agent-base: 9.0.0
+      debug: 4.4.3(supports-color@10.2.2)
+      proxy-agent-negotiate: 1.1.0
     transitivePeerDependencies:
-      - debug
+      - kerberos
+      - supports-color
+
+  http-proxy-middleware@4.2.0(supports-color@10.2.2):
+    dependencies:
+      debug: 4.4.3(supports-color@10.2.2)
+      httpxy: 0.5.4
+      is-glob: 4.0.3
+      is-plain-obj: 4.1.0
+      micromatch: 4.0.8
+    transitivePeerDependencies:
+      - supports-color
 
   http2-wrapper@1.0.3:
     dependencies:
@@ -22306,47 +22354,63 @@ snapshots:
 
   https-browserify@1.0.0: {}
 
-  https-proxy-agent@5.0.1:
+  https-proxy-agent@5.0.1(supports-color@10.2.2):
     dependencies:
-      agent-base: 6.0.2
-      debug: 4.4.3
+      agent-base: 6.0.2(supports-color@10.2.2)
+      debug: 4.4.3(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
-  https-proxy-agent@7.0.6:
+  https-proxy-agent@5.0.1(supports-color@7.2.0):
     dependencies:
-      agent-base: 7.1.4
-      debug: 4.4.3
+      agent-base: 6.0.2(supports-color@7.2.0)
+      debug: 4.4.3(supports-color@7.2.0)
     transitivePeerDependencies:
       - supports-color
 
+  https-proxy-agent@7.0.6(supports-color@10.2.2):
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3(supports-color@10.2.2)
+    transitivePeerDependencies:
+      - supports-color
+
+  https-proxy-agent@7.0.6(supports-color@7.2.0):
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3(supports-color@7.2.0)
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
+  https-proxy-agent@9.1.0(supports-color@10.2.2):
+    dependencies:
+      agent-base: 9.0.0
+      debug: 4.4.3(supports-color@10.2.2)
+      proxy-agent-negotiate: 1.1.0
+    transitivePeerDependencies:
+      - kerberos
+      - supports-color
+
+  httpxy@0.5.4: {}
+
   human-signals@2.1.0: {}
 
   husky@9.1.7: {}
 
   hyperdyperid@1.2.0: {}
 
-  iconv-corefoundation@1.1.7:
-    dependencies:
-      cli-truncate: 2.1.0
-      node-addon-api: 1.7.2
-    optional: true
-
-  iconv-lite@0.4.24:
-    dependencies:
-      safer-buffer: 2.1.2
-
   iconv-lite@0.6.3:
     dependencies:
       safer-buffer: 2.1.2
 
-  iconv-lite@0.7.2:
+  iconv-lite@0.7.3:
     dependencies:
       safer-buffer: 2.1.2
 
-  icss-utils@5.1.0(postcss@8.5.14):
+  icss-utils@5.1.0(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
 
   identity-obj-proxy@3.0.0:
     dependencies:
@@ -22354,14 +22418,16 @@ snapshots:
 
   ieee754@1.2.1: {}
 
-  ignore-walk@8.0.0:
+  ignore-walk@9.0.0:
     dependencies:
-      minimatch: 10.2.5
+      minimatch: 10.2.6
 
   ignore@5.3.2: {}
 
   ignore@7.0.5: {}
 
+  ignore@7.0.6: {}
+
   immediate@3.0.6: {}
 
   import-fresh@3.3.1:
@@ -22369,18 +22435,10 @@ snapshots:
       parent-module: 1.0.1
       resolve-from: 4.0.0
 
-  import-in-the-middle@2.0.6:
+  import-in-the-middle@3.3.2:
     dependencies:
-      acorn: 8.16.0
-      acorn-import-attributes: 1.9.5(acorn@8.16.0)
-      cjs-module-lexer: 2.2.0
-      module-details-from-path: 1.0.4
-
-  import-in-the-middle@3.0.1:
-    dependencies:
-      acorn: 8.16.0
-      acorn-import-attributes: 1.9.5(acorn@8.16.0)
       cjs-module-lexer: 2.2.0
+      es-module-lexer: 2.3.1
       module-details-from-path: 1.0.4
 
   import-lazy@4.0.0: {}
@@ -22407,15 +22465,9 @@ snapshots:
 
   ini@1.3.8: {}
 
-  ini@6.0.0: {}
+  ini@7.0.0: {}
 
-  inline-style-parser@0.2.7: {}
-
-  internal-slot@1.1.0:
-    dependencies:
-      es-errors: 1.3.0
-      hasown: 2.0.3
-      side-channel: 1.1.0
+  inline-style-parser@0.2.9: {}
 
   internmap@1.0.1: {}
 
@@ -22423,54 +22475,23 @@ snapshots:
 
   interpret@3.1.1: {}
 
-  ip-address@10.1.0: {}
+  ip-address@10.4.0: {}
 
   ip-regex@5.0.0: {}
 
   ipaddr.js@1.9.1: {}
 
-  ipaddr.js@2.3.0: {}
+  ipaddr.js@2.4.0: {}
 
   is-arguments@1.2.0:
     dependencies:
       call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
-  is-array-buffer@3.0.5:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      get-intrinsic: 1.3.0
-
   is-arrayish@0.2.1: {}
 
-  is-async-function@2.1.1:
-    dependencies:
-      async-function: 1.0.0
-      call-bound: 1.0.4
-      get-proto: 1.0.1
-      has-tostringtag: 1.0.2
-      safe-regex-test: 1.1.0
-
-  is-bigint@1.1.0:
-    dependencies:
-      has-bigints: 1.1.0
-
-  is-binary-path@2.1.0:
-    dependencies:
-      binary-extensions: 2.3.0
-
-  is-boolean-object@1.2.2:
-    dependencies:
-      call-bound: 1.0.4
-      has-tostringtag: 1.0.2
-
   is-buffer@2.0.5: {}
 
-  is-builtin-module@3.2.1:
-    dependencies:
-      builtin-modules: 3.3.0
-
   is-callable@1.2.7: {}
 
   is-ci@4.1.0:
@@ -22479,35 +22500,14 @@ snapshots:
 
   is-core-module@2.16.2:
     dependencies:
-      hasown: 2.0.3
-
-  is-data-view@1.0.2:
-    dependencies:
-      call-bound: 1.0.4
-      get-intrinsic: 1.3.0
-      is-typed-array: 1.1.15
-
-  is-date-object@1.1.0:
-    dependencies:
-      call-bound: 1.0.4
-      has-tostringtag: 1.0.2
-
-  is-docker@2.2.1: {}
+      hasown: 2.0.4
 
   is-docker@3.0.0: {}
 
   is-extglob@2.1.1: {}
 
-  is-finalizationregistry@1.1.1:
-    dependencies:
-      call-bound: 1.0.4
-
   is-fullwidth-code-point@3.0.0: {}
 
-  is-fullwidth-code-point@5.1.0:
-    dependencies:
-      get-east-asian-width: 1.6.0
-
   is-generator-fn@2.1.0: {}
 
   is-generator-function@1.1.2:
@@ -22522,6 +22522,8 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
+  is-in-ssh@1.0.0: {}
+
   is-inside-container@1.0.0:
     dependencies:
       is-docker: 3.0.0
@@ -22533,21 +22535,12 @@ snapshots:
       ip-regex: 5.0.0
       super-regex: 0.2.0
 
-  is-map@2.0.3: {}
-
   is-nan@1.3.2:
     dependencies:
       call-bind: 1.0.8
       define-properties: 1.2.1
 
-  is-negative-zero@2.0.3: {}
-
-  is-network-error@1.3.0: {}
-
-  is-number-object@1.1.1:
-    dependencies:
-      call-bound: 1.0.4
-      has-tostringtag: 1.0.2
+  is-network-error@1.3.2: {}
 
   is-number@7.0.0: {}
 
@@ -22555,7 +22548,7 @@ snapshots:
 
   is-path-inside@4.0.0: {}
 
-  is-plain-obj@3.0.0: {}
+  is-plain-obj@4.1.0: {}
 
   is-plain-object@2.0.4:
     dependencies:
@@ -22576,51 +22569,23 @@ snapshots:
       call-bound: 1.0.4
       gopd: 1.2.0
       has-tostringtag: 1.0.2
-      hasown: 2.0.3
+      hasown: 2.0.4
 
   is-regexp@3.1.0: {}
 
-  is-set@2.0.3: {}
-
-  is-shared-array-buffer@1.0.4:
-    dependencies:
-      call-bound: 1.0.4
-
   is-stream@2.0.1: {}
 
-  is-string@1.1.1:
-    dependencies:
-      call-bound: 1.0.4
-      has-tostringtag: 1.0.2
-
-  is-symbol@1.1.1:
-    dependencies:
-      call-bound: 1.0.4
-      has-symbols: 1.1.0
-      safe-regex-test: 1.1.0
-
   is-typed-array@1.1.15:
     dependencies:
       which-typed-array: 1.1.20
 
   is-unicode-supported@0.1.0: {}
 
-  is-weakmap@2.0.2: {}
-
-  is-weakref@1.1.1:
-    dependencies:
-      call-bound: 1.0.4
-
-  is-weakset@2.0.4:
-    dependencies:
-      call-bound: 1.0.4
-      get-intrinsic: 1.3.0
-
   is-what@5.5.0: {}
 
-  is-wsl@2.2.0:
+  is-wsl@3.1.0:
     dependencies:
-      is-docker: 2.2.1
+      is-inside-container: 1.0.0
 
   is-wsl@3.1.1:
     dependencies:
@@ -22646,13 +22611,13 @@ snapshots:
 
   istanbul-lib-coverage@3.2.2: {}
 
-  istanbul-lib-instrument@6.0.3:
+  istanbul-lib-instrument@6.0.3(supports-color@10.2.2):
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/parser': 7.29.2
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/parser': 7.29.8
       '@istanbuljs/schema': 0.1.6
       istanbul-lib-coverage: 3.2.2
-      semver: 7.7.4
+      semver: 7.8.5
     transitivePeerDependencies:
       - supports-color
 
@@ -22662,10 +22627,10 @@ snapshots:
       make-dir: 4.0.0
       supports-color: 7.2.0
 
-  istanbul-lib-source-maps@5.0.6:
+  istanbul-lib-source-maps@5.0.6(supports-color@10.2.2):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@10.2.2)
       istanbul-lib-coverage: 3.2.2
     transitivePeerDependencies:
       - supports-color
@@ -22675,15 +22640,6 @@ snapshots:
       html-escaper: 2.0.2
       istanbul-lib-report: 3.0.1
 
-  iterator.prototype@1.1.5:
-    dependencies:
-      define-data-property: 1.1.4
-      es-object-atoms: 1.1.1
-      get-intrinsic: 1.3.0
-      get-proto: 1.0.1
-      has-symbols: 1.1.0
-      set-function-name: 2.0.2
-
   jackspeak@3.4.3:
     dependencies:
       '@isaacs/cliui': 8.0.2
@@ -22696,36 +22652,36 @@ snapshots:
       filelist: 1.0.4
       picocolors: 1.1.1
 
-  jest-canvas-mock@2.5.2:
+  jest-canvas-mock@2.5.8:
     dependencies:
       cssfontparser: 1.2.1
       moo-color: 1.0.3
 
-  jest-changed-files@30.3.0:
+  jest-changed-files@30.4.1:
     dependencies:
       execa: 5.1.1
-      jest-util: 30.3.0
+      jest-util: 30.4.1
       p-limit: 3.1.0
 
-  jest-circus@30.3.0(babel-plugin-macros@3.1.0):
+  jest-circus@30.4.2(babel-plugin-macros@3.1.0)(supports-color@10.2.2):
     dependencies:
-      '@jest/environment': 30.3.0
-      '@jest/expect': 30.3.0
-      '@jest/test-result': 30.3.0
-      '@jest/types': 30.3.0
-      '@types/node': 18.19.130
+      '@jest/environment': 30.4.1
+      '@jest/expect': 30.4.1(supports-color@10.2.2)
+      '@jest/test-result': 30.4.1
+      '@jest/types': 30.4.1
+      '@types/node': 25.9.3
       chalk: 4.1.2
       co: 4.6.0
       dedent: 1.7.2(babel-plugin-macros@3.1.0)
       is-generator-fn: 2.1.0
-      jest-each: 30.3.0
-      jest-matcher-utils: 30.3.0
-      jest-message-util: 30.3.0
-      jest-runtime: 30.3.0
-      jest-snapshot: 30.3.0
-      jest-util: 30.3.0
+      jest-each: 30.4.1
+      jest-matcher-utils: 30.4.1
+      jest-message-util: 30.4.1
+      jest-runtime: 30.4.2(supports-color@10.2.2)
+      jest-snapshot: 30.4.1(supports-color@10.2.2)
+      jest-util: 30.4.1
       p-limit: 3.1.0
-      pretty-format: 30.3.0
+      pretty-format: 30.4.1
       pure-rand: 7.0.1
       slash: 3.0.0
       stack-utils: 2.0.6
@@ -22733,18 +22689,18 @@ snapshots:
       - babel-plugin-macros
       - supports-color
 
-  jest-cli@30.3.0(@types/node@18.19.130)(babel-plugin-macros@3.1.0):
+  jest-cli@30.4.2(@types/node@25.9.3)(babel-plugin-macros@3.1.0)(supports-color@10.2.2):
     dependencies:
-      '@jest/core': 30.3.0(babel-plugin-macros@3.1.0)
-      '@jest/test-result': 30.3.0
-      '@jest/types': 30.3.0
+      '@jest/core': 30.4.2(babel-plugin-macros@3.1.0)(supports-color@10.2.2)
+      '@jest/test-result': 30.4.1
+      '@jest/types': 30.4.1
       chalk: 4.1.2
       exit-x: 0.2.2
       import-local: 3.2.0
-      jest-config: 30.3.0(@types/node@18.19.130)(babel-plugin-macros@3.1.0)
-      jest-util: 30.3.0
-      jest-validate: 30.3.0
-      yargs: 17.7.2
+      jest-config: 30.4.2(@types/node@25.9.3)(babel-plugin-macros@3.1.0)(supports-color@10.2.2)
+      jest-util: 30.4.1
+      jest-validate: 30.4.1
+      yargs: 17.7.3
     transitivePeerDependencies:
       - '@types/node'
       - babel-plugin-macros
@@ -22752,44 +22708,37 @@ snapshots:
       - supports-color
       - ts-node
 
-  jest-config@30.3.0(@types/node@18.19.130)(babel-plugin-macros@3.1.0):
+  jest-config@30.4.2(@types/node@25.9.3)(babel-plugin-macros@3.1.0)(supports-color@10.2.2):
     dependencies:
-      '@babel/core': 7.29.0
+      '@babel/core': 7.29.7(supports-color@10.2.2)
       '@jest/get-type': 30.1.0
-      '@jest/pattern': 30.0.1
-      '@jest/test-sequencer': 30.3.0
-      '@jest/types': 30.3.0
-      babel-jest: 30.3.0(@babel/core@7.29.0)
+      '@jest/pattern': 30.4.0
+      '@jest/test-sequencer': 30.4.1
+      '@jest/types': 30.4.1
+      babel-jest: 30.4.1(@babel/core@7.29.7)(supports-color@10.2.2)
       chalk: 4.1.2
       ci-info: 4.4.0
       deepmerge: 4.3.1
       glob: 10.5.0
       graceful-fs: 4.2.11
-      jest-circus: 30.3.0(babel-plugin-macros@3.1.0)
-      jest-docblock: 30.2.0
-      jest-environment-node: 30.3.0
-      jest-regex-util: 30.0.1
-      jest-resolve: 30.3.0
-      jest-runner: 30.3.0
-      jest-util: 30.3.0
-      jest-validate: 30.3.0
+      jest-circus: 30.4.2(babel-plugin-macros@3.1.0)(supports-color@10.2.2)
+      jest-docblock: 30.4.0
+      jest-environment-node: 30.4.1
+      jest-regex-util: 30.4.0
+      jest-resolve: 30.4.1
+      jest-runner: 30.4.2(supports-color@10.2.2)
+      jest-util: 30.4.1
+      jest-validate: 30.4.1
       parse-json: 5.2.0
-      pretty-format: 30.3.0
+      pretty-format: 30.4.1
       slash: 3.0.0
       strip-json-comments: 3.1.1
     optionalDependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
     transitivePeerDependencies:
       - babel-plugin-macros
       - supports-color
 
-  jest-diff@30.3.0:
-    dependencies:
-      '@jest/diff-sequences': 30.3.0
-      '@jest/get-type': 30.1.0
-      chalk: 4.1.2
-      pretty-format: 30.3.0
-
   jest-diff@30.4.1:
     dependencies:
       '@jest/diff-sequences': 30.4.0
@@ -22797,242 +22746,243 @@ snapshots:
       chalk: 4.1.2
       pretty-format: 30.4.1
 
-  jest-docblock@30.2.0:
+  jest-docblock@30.4.0:
     dependencies:
       detect-newline: 3.1.0
 
-  jest-each@30.3.0:
+  jest-each@30.4.1:
     dependencies:
       '@jest/get-type': 30.1.0
-      '@jest/types': 30.3.0
+      '@jest/types': 30.4.1
       chalk: 4.1.2
-      jest-util: 30.3.0
-      pretty-format: 30.3.0
+      jest-util: 30.4.1
+      pretty-format: 30.4.1
 
-  jest-environment-jsdom@30.3.0:
+  jest-environment-jsdom@30.4.1(supports-color@10.2.2):
     dependencies:
-      '@jest/environment': 30.3.0
-      '@jest/environment-jsdom-abstract': 30.3.0(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))
-      jsdom: 26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f)
+      '@jest/environment': 30.4.1
+      '@jest/environment-jsdom-abstract': 30.4.1(jsdom@26.1.0)
+      jsdom: 26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f)(supports-color@10.2.2)
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - utf-8-validate
 
-  jest-environment-node@30.3.0:
+  jest-environment-node@30.4.1:
     dependencies:
-      '@jest/environment': 30.3.0
-      '@jest/fake-timers': 30.3.0
-      '@jest/types': 30.3.0
-      '@types/node': 18.19.130
-      jest-mock: 30.3.0
-      jest-util: 30.3.0
-      jest-validate: 30.3.0
+      '@jest/environment': 30.4.1
+      '@jest/fake-timers': 30.4.1
+      '@jest/types': 30.4.1
+      '@types/node': 25.9.3
+      jest-mock: 30.4.1
+      jest-util: 30.4.1
+      jest-validate: 30.4.1
 
-  jest-fixed-jsdom@0.0.11(patch_hash=b4bc876eca343b57d231c1cf9817ddb13ff04503ece7794d1690f342f6289ad3)(jest-environment-jsdom@30.3.0):
+  jest-fixed-jsdom@0.0.11(patch_hash=b4bc876eca343b57d231c1cf9817ddb13ff04503ece7794d1690f342f6289ad3)(jest-environment-jsdom@30.4.1):
     dependencies:
-      jest-environment-jsdom: 30.3.0
+      jest-environment-jsdom: 30.4.1(supports-color@10.2.2)
 
-  jest-haste-map@30.3.0:
+  jest-haste-map@30.4.1:
     dependencies:
-      '@jest/types': 30.3.0
-      '@types/node': 18.19.130
+      '@jest/types': 30.4.1
+      '@types/node': 25.9.3
       anymatch: 3.1.3
       fb-watchman: 2.0.2
       graceful-fs: 4.2.11
-      jest-regex-util: 30.0.1
-      jest-util: 30.3.0
-      jest-worker: 30.3.0
-      picomatch: 4.0.4
+      jest-regex-util: 30.4.0
+      jest-util: 30.4.1
+      jest-worker: 30.4.1
+      picomatch: 4.0.5
       walker: 1.0.8
     optionalDependencies:
       fsevents: 2.3.3
 
-  jest-leak-detector@30.3.0:
+  jest-leak-detector@30.4.1:
     dependencies:
       '@jest/get-type': 30.1.0
-      pretty-format: 30.3.0
+      pretty-format: 30.4.1
 
-  jest-matcher-utils@30.3.0:
+  jest-matcher-utils@30.4.1:
     dependencies:
       '@jest/get-type': 30.1.0
       chalk: 4.1.2
-      jest-diff: 30.3.0
-      pretty-format: 30.3.0
+      jest-diff: 30.4.1
+      pretty-format: 30.4.1
 
-  jest-message-util@30.3.0:
+  jest-message-util@30.4.1:
     dependencies:
-      '@babel/code-frame': 7.29.0
-      '@jest/types': 30.3.0
+      '@babel/code-frame': 7.29.7
+      '@jest/types': 30.4.1
       '@types/stack-utils': 2.0.3
       chalk: 4.1.2
       graceful-fs: 4.2.11
-      picomatch: 4.0.4
-      pretty-format: 30.3.0
+      jest-util: 30.4.1
+      picomatch: 4.0.5
+      pretty-format: 30.4.1
       slash: 3.0.0
       stack-utils: 2.0.6
 
-  jest-mock@30.3.0:
+  jest-mock@30.4.1:
     dependencies:
-      '@jest/types': 30.3.0
-      '@types/node': 18.19.130
-      jest-util: 30.3.0
+      '@jest/types': 30.4.1
+      '@types/node': 25.9.3
+      jest-util: 30.4.1
 
-  jest-pnp-resolver@1.2.3(jest-resolve@30.3.0):
+  jest-pnp-resolver@1.2.3(jest-resolve@30.4.1):
     optionalDependencies:
-      jest-resolve: 30.3.0
+      jest-resolve: 30.4.1
 
   jest-raw-loader@1.0.1: {}
 
-  jest-regex-util@30.0.1: {}
+  jest-regex-util@30.4.0: {}
 
-  jest-resolve-dependencies@30.3.0:
+  jest-resolve-dependencies@30.4.2(supports-color@10.2.2):
     dependencies:
-      jest-regex-util: 30.0.1
-      jest-snapshot: 30.3.0
+      jest-regex-util: 30.4.0
+      jest-snapshot: 30.4.1(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
-  jest-resolve@30.3.0:
+  jest-resolve@30.4.1:
     dependencies:
       chalk: 4.1.2
       graceful-fs: 4.2.11
-      jest-haste-map: 30.3.0
-      jest-pnp-resolver: 1.2.3(jest-resolve@30.3.0)
-      jest-util: 30.3.0
-      jest-validate: 30.3.0
+      jest-haste-map: 30.4.1
+      jest-pnp-resolver: 1.2.3(jest-resolve@30.4.1)
+      jest-util: 30.4.1
+      jest-validate: 30.4.1
       slash: 3.0.0
-      unrs-resolver: 1.11.1
+      unrs-resolver: 1.12.2
 
-  jest-runner@30.3.0:
+  jest-runner@30.4.2(supports-color@10.2.2):
     dependencies:
-      '@jest/console': 30.3.0
-      '@jest/environment': 30.3.0
-      '@jest/test-result': 30.3.0
-      '@jest/transform': 30.3.0
-      '@jest/types': 30.3.0
-      '@types/node': 18.19.130
+      '@jest/console': 30.4.1
+      '@jest/environment': 30.4.1
+      '@jest/test-result': 30.4.1
+      '@jest/transform': 30.4.1(supports-color@10.2.2)
+      '@jest/types': 30.4.1
+      '@types/node': 25.9.3
       chalk: 4.1.2
       emittery: 0.13.1
       exit-x: 0.2.2
       graceful-fs: 4.2.11
-      jest-docblock: 30.2.0
-      jest-environment-node: 30.3.0
-      jest-haste-map: 30.3.0
-      jest-leak-detector: 30.3.0
-      jest-message-util: 30.3.0
-      jest-resolve: 30.3.0
-      jest-runtime: 30.3.0
-      jest-util: 30.3.0
-      jest-watcher: 30.3.0
-      jest-worker: 30.3.0
+      jest-docblock: 30.4.0
+      jest-environment-node: 30.4.1
+      jest-haste-map: 30.4.1
+      jest-leak-detector: 30.4.1
+      jest-message-util: 30.4.1
+      jest-resolve: 30.4.1
+      jest-runtime: 30.4.2(supports-color@10.2.2)
+      jest-util: 30.4.1
+      jest-watcher: 30.4.1
+      jest-worker: 30.4.1
       p-limit: 3.1.0
       source-map-support: 0.5.13
     transitivePeerDependencies:
       - supports-color
 
-  jest-runtime@30.3.0:
+  jest-runtime@30.4.2(supports-color@10.2.2):
     dependencies:
-      '@jest/environment': 30.3.0
-      '@jest/fake-timers': 30.3.0
-      '@jest/globals': 30.3.0
+      '@jest/environment': 30.4.1
+      '@jest/fake-timers': 30.4.1
+      '@jest/globals': 30.4.1(supports-color@10.2.2)
       '@jest/source-map': 30.0.1
-      '@jest/test-result': 30.3.0
-      '@jest/transform': 30.3.0
-      '@jest/types': 30.3.0
-      '@types/node': 18.19.130
+      '@jest/test-result': 30.4.1
+      '@jest/transform': 30.4.1(supports-color@10.2.2)
+      '@jest/types': 30.4.1
+      '@types/node': 25.9.3
       chalk: 4.1.2
       cjs-module-lexer: 2.2.0
       collect-v8-coverage: 1.0.3
       glob: 10.5.0
       graceful-fs: 4.2.11
-      jest-haste-map: 30.3.0
-      jest-message-util: 30.3.0
-      jest-mock: 30.3.0
-      jest-regex-util: 30.0.1
-      jest-resolve: 30.3.0
-      jest-snapshot: 30.3.0
-      jest-util: 30.3.0
+      jest-haste-map: 30.4.1
+      jest-message-util: 30.4.1
+      jest-mock: 30.4.1
+      jest-regex-util: 30.4.0
+      jest-resolve: 30.4.1
+      jest-snapshot: 30.4.1(supports-color@10.2.2)
+      jest-util: 30.4.1
       slash: 3.0.0
       strip-bom: 4.0.0
     transitivePeerDependencies:
       - supports-color
 
-  jest-snapshot@30.3.0:
+  jest-snapshot@30.4.1(supports-color@10.2.2):
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/generator': 7.29.1
-      '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.29.0)
-      '@babel/plugin-syntax-typescript': 7.28.6(@babel/core@7.29.0)
-      '@babel/types': 7.29.0
-      '@jest/expect-utils': 30.3.0
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/generator': 7.29.8
+      '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-syntax-typescript': 7.29.7(@babel/core@7.29.7)
+      '@babel/types': 7.29.8
+      '@jest/expect-utils': 30.4.1
       '@jest/get-type': 30.1.0
-      '@jest/snapshot-utils': 30.3.0
-      '@jest/transform': 30.3.0
-      '@jest/types': 30.3.0
-      babel-preset-current-node-syntax: 1.2.0(@babel/core@7.29.0)
+      '@jest/snapshot-utils': 30.4.1
+      '@jest/transform': 30.4.1(supports-color@10.2.2)
+      '@jest/types': 30.4.1
+      babel-preset-current-node-syntax: 1.2.0(@babel/core@7.29.7)
       chalk: 4.1.2
-      expect: 30.3.0
+      expect: 30.4.1
       graceful-fs: 4.2.11
-      jest-diff: 30.3.0
-      jest-matcher-utils: 30.3.0
-      jest-message-util: 30.3.0
-      jest-util: 30.3.0
-      pretty-format: 30.3.0
-      semver: 7.7.4
+      jest-diff: 30.4.1
+      jest-matcher-utils: 30.4.1
+      jest-message-util: 30.4.1
+      jest-util: 30.4.1
+      pretty-format: 30.4.1
+      semver: 7.8.5
       synckit: 0.11.12
     transitivePeerDependencies:
       - supports-color
 
-  jest-util@30.3.0:
+  jest-util@30.4.1:
     dependencies:
-      '@jest/types': 30.3.0
-      '@types/node': 18.19.130
+      '@jest/types': 30.4.1
+      '@types/node': 25.9.3
       chalk: 4.1.2
       ci-info: 4.4.0
       graceful-fs: 4.2.11
-      picomatch: 4.0.4
+      picomatch: 4.0.5
 
-  jest-validate@30.3.0:
+  jest-validate@30.4.1:
     dependencies:
       '@jest/get-type': 30.1.0
-      '@jest/types': 30.3.0
+      '@jest/types': 30.4.1
       camelcase: 6.3.0
       chalk: 4.1.2
       leven: 3.1.0
-      pretty-format: 30.3.0
+      pretty-format: 30.4.1
 
-  jest-watcher@30.3.0:
+  jest-watcher@30.4.1:
     dependencies:
-      '@jest/test-result': 30.3.0
-      '@jest/types': 30.3.0
-      '@types/node': 18.19.130
+      '@jest/test-result': 30.4.1
+      '@jest/types': 30.4.1
+      '@types/node': 25.9.3
       ansi-escapes: 4.3.2
       chalk: 4.1.2
       emittery: 0.13.1
-      jest-util: 30.3.0
+      jest-util: 30.4.1
       string-length: 4.0.2
 
   jest-worker@27.5.1:
     dependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
-  jest-worker@30.3.0:
+  jest-worker@30.4.1:
     dependencies:
-      '@types/node': 18.19.130
-      '@ungap/structured-clone': 1.3.0
-      jest-util: 30.3.0
+      '@types/node': 25.9.3
+      '@ungap/structured-clone': 1.3.3
+      jest-util: 30.4.1
       merge-stream: 2.0.0
       supports-color: 8.1.1
 
-  jest@30.3.0(@types/node@18.19.130)(babel-plugin-macros@3.1.0):
+  jest@30.4.2(@types/node@25.9.3)(babel-plugin-macros@3.1.0)(supports-color@10.2.2):
     dependencies:
-      '@jest/core': 30.3.0(babel-plugin-macros@3.1.0)
-      '@jest/types': 30.3.0
+      '@jest/core': 30.4.2(babel-plugin-macros@3.1.0)(supports-color@10.2.2)
+      '@jest/types': 30.4.1
       import-local: 3.2.0
-      jest-cli: 30.3.0(@types/node@18.19.130)(babel-plugin-macros@3.1.0)
+      jest-cli: 30.4.2(@types/node@25.9.3)(babel-plugin-macros@3.1.0)(supports-color@10.2.2)
     transitivePeerDependencies:
       - '@types/node'
       - babel-plugin-macros
@@ -23040,17 +22990,17 @@ snapshots:
       - supports-color
       - ts-node
 
-  jiti@2.6.1: {}
+  jiti@2.7.0: {}
 
   jju@1.4.0: {}
 
-  joi@18.1.2:
+  joi@18.2.3:
     dependencies:
       '@hapi/address': 5.1.1
       '@hapi/formula': 3.0.2
       '@hapi/hoek': 11.0.7
       '@hapi/pinpoint': 2.0.1
-      '@hapi/tlds': 1.1.6
+      '@hapi/tlds': 1.1.7
       '@hapi/topo': 6.0.2
       '@standard-schema/spec': 1.1.0
 
@@ -23058,25 +23008,23 @@ snapshots:
 
   js-tokens@4.0.0: {}
 
-  js-xxhash@5.0.1: {}
-
-  js-yaml@3.14.2:
+  js-yaml@3.15.1:
     dependencies:
       argparse: 1.0.10
       esprima: 4.0.1
 
-  js-yaml@4.1.1:
+  js-yaml@4.3.1:
     dependencies:
       argparse: 2.0.1
 
-  jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f):
+  jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f)(supports-color@10.2.2):
     dependencies:
       cssstyle: 4.6.0
       data-urls: 5.0.0
       decimal.js: 10.6.0
       html-encoding-sniffer: 4.0.0
-      http-proxy-agent: 7.0.2
-      https-proxy-agent: 7.0.6
+      http-proxy-agent: 7.0.2(supports-color@10.2.2)
+      https-proxy-agent: 7.0.6(supports-color@10.2.2)
       is-potential-custom-element-name: 1.0.1
       nwsapi: 2.2.23
       parse5: 7.3.0
@@ -23089,14 +23037,40 @@ snapshots:
       whatwg-encoding: 3.1.1
       whatwg-mimetype: 4.0.0
       whatwg-url: 14.2.0
-      ws: 8.20.0
+      ws: 8.21.1
       xml-name-validator: 5.0.0
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - utf-8-validate
 
-  jsesc@0.5.0: {}
+  jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f)(supports-color@7.2.0):
+    dependencies:
+      cssstyle: 4.6.0
+      data-urls: 5.0.0
+      decimal.js: 10.6.0
+      html-encoding-sniffer: 4.0.0
+      http-proxy-agent: 7.0.2(supports-color@7.2.0)
+      https-proxy-agent: 7.0.6(supports-color@7.2.0)
+      is-potential-custom-element-name: 1.0.1
+      nwsapi: 2.2.23
+      parse5: 7.3.0
+      rrweb-cssom: 0.8.0
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 5.1.2
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 3.1.1
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
+      ws: 8.21.1
+      xml-name-validator: 5.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    optional: true
 
   jsesc@3.1.0: {}
 
@@ -23104,7 +23078,7 @@ snapshots:
 
   json-parse-even-better-errors@2.3.1: {}
 
-  json-parse-even-better-errors@5.0.0: {}
+  json-parse-even-better-errors@6.0.0: {}
 
   json-schema-traverse@0.4.1: {}
 
@@ -23121,14 +23095,12 @@ snapshots:
 
   json-with-bigint@3.5.8: {}
 
-  json5@1.0.2:
-    dependencies:
-      minimist: 1.2.8
-
   json5@2.2.3: {}
 
   jsonc-parser@3.2.0: {}
 
+  jsonc-parser@3.3.1: {}
+
   jsonfile@4.0.0:
     optionalDependencies:
       graceful-fs: 4.2.11
@@ -23145,13 +23117,6 @@ snapshots:
 
   jsrsasign@11.1.3: {}
 
-  jsx-ast-utils@3.3.5:
-    dependencies:
-      array-includes: 3.1.9
-      array.prototype.flat: 1.3.3
-      object.assign: 4.1.7
-      object.values: 1.2.1
-
   jszip@3.10.1:
     dependencies:
       lie: 3.3.0
@@ -23159,9 +23124,11 @@ snapshots:
       readable-stream: 2.3.8
       setimmediate: 1.0.5
 
-  jwt-decode@4.0.0: {}
+  katex@0.16.47:
+    dependencies:
+      commander: 8.3.0
 
-  katex@0.16.45:
+  katex@0.18.1:
     dependencies:
       commander: 8.3.0
 
@@ -23179,49 +23146,34 @@ snapshots:
 
   kind-of@6.0.3: {}
 
-  knip@6.11.0(patch_hash=9ee905cce2466e391db69dfcea905b0fe2502afd935d1dc6a6ac94ffe2855c28)(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0):
+  knip@6.29.0(patch_hash=9ee905cce2466e391db69dfcea905b0fe2502afd935d1dc6a6ac94ffe2855c28):
     dependencies:
-      fdir: 6.5.0(picomatch@4.0.4)
+      fdir: 6.5.0(picomatch@4.0.5)
       formatly: 0.3.0
       get-tsconfig: 4.14.0
-      jiti: 2.6.1
-      minimist: 1.2.8
-      oxc-parser: 0.128.0
-      oxc-resolver: 11.19.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
-      picomatch: 4.0.4
-      smol-toml: 1.6.1
+      jiti: 2.7.0
+      oxc-parser: 0.140.0
+      oxc-resolver: 11.24.2
+      picomatch: 4.0.5
+      smol-toml: 1.7.1
       strip-json-comments: 5.0.3
-      tinyglobby: 0.2.16
-      unbash: 3.0.0
-      yaml: 2.8.4
-      zod: 4.3.6
-    transitivePeerDependencies:
-      - '@emnapi/core'
-      - '@emnapi/runtime'
+      tinyglobby: 0.2.17
+      unbash: 4.0.4
+      yaml: 2.9.0
+      zod: 4.4.3
 
   known-css-properties@0.37.0: {}
 
   kolorist@1.8.0: {}
 
-  langium@4.2.2:
-    dependencies:
-      '@chevrotain/regexp-to-ast': 12.0.0
-      chevrotain: 12.0.0
-      chevrotain-allstar: 0.4.1(chevrotain@12.0.0)
-      vscode-languageserver: 9.0.1
-      vscode-languageserver-textdocument: 1.0.12
-      vscode-uri: 3.1.0
-
-  language-subtag-registry@0.3.23: {}
-
-  language-tags@1.0.9:
-    dependencies:
-      language-subtag-registry: 0.3.23
-
-  launch-editor@2.12.0:
+  launch-editor@2.14.1:
     dependencies:
       picocolors: 1.1.1
-      shell-quote: 1.8.3
+      shell-quote: 1.9.0
+
+  launder@1.7.1:
+    dependencies:
+      dayjs: 1.11.21
 
   layout-base@1.0.2: {}
 
@@ -23244,54 +23196,54 @@ snapshots:
     dependencies:
       immediate: 3.0.6
 
-  lightningcss-android-arm64@1.32.0:
+  lightningcss-android-arm64@1.33.0:
     optional: true
 
-  lightningcss-darwin-arm64@1.32.0:
+  lightningcss-darwin-arm64@1.33.0:
     optional: true
 
-  lightningcss-darwin-x64@1.32.0:
+  lightningcss-darwin-x64@1.33.0:
     optional: true
 
-  lightningcss-freebsd-x64@1.32.0:
+  lightningcss-freebsd-x64@1.33.0:
     optional: true
 
-  lightningcss-linux-arm-gnueabihf@1.32.0:
+  lightningcss-linux-arm-gnueabihf@1.33.0:
     optional: true
 
-  lightningcss-linux-arm64-gnu@1.32.0:
+  lightningcss-linux-arm64-gnu@1.33.0:
     optional: true
 
-  lightningcss-linux-arm64-musl@1.32.0:
+  lightningcss-linux-arm64-musl@1.33.0:
     optional: true
 
-  lightningcss-linux-x64-gnu@1.32.0:
+  lightningcss-linux-x64-gnu@1.33.0:
     optional: true
 
-  lightningcss-linux-x64-musl@1.32.0:
+  lightningcss-linux-x64-musl@1.33.0:
     optional: true
 
-  lightningcss-win32-arm64-msvc@1.32.0:
+  lightningcss-win32-arm64-msvc@1.33.0:
     optional: true
 
-  lightningcss-win32-x64-msvc@1.32.0:
+  lightningcss-win32-x64-msvc@1.33.0:
     optional: true
 
-  lightningcss@1.32.0:
+  lightningcss@1.33.0:
     dependencies:
       detect-libc: 2.1.2
     optionalDependencies:
-      lightningcss-android-arm64: 1.32.0
-      lightningcss-darwin-arm64: 1.32.0
-      lightningcss-darwin-x64: 1.32.0
-      lightningcss-freebsd-x64: 1.32.0
-      lightningcss-linux-arm-gnueabihf: 1.32.0
-      lightningcss-linux-arm64-gnu: 1.32.0
-      lightningcss-linux-arm64-musl: 1.32.0
-      lightningcss-linux-x64-gnu: 1.32.0
-      lightningcss-linux-x64-musl: 1.32.0
-      lightningcss-win32-arm64-msvc: 1.32.0
-      lightningcss-win32-x64-msvc: 1.32.0
+      lightningcss-android-arm64: 1.33.0
+      lightningcss-darwin-arm64: 1.33.0
+      lightningcss-darwin-x64: 1.33.0
+      lightningcss-freebsd-x64: 1.33.0
+      lightningcss-linux-arm-gnueabihf: 1.33.0
+      lightningcss-linux-arm64-gnu: 1.33.0
+      lightningcss-linux-arm64-musl: 1.33.0
+      lightningcss-linux-x64-gnu: 1.33.0
+      lightningcss-linux-x64-musl: 1.33.0
+      lightningcss-win32-arm64-msvc: 1.33.0
+      lightningcss-win32-x64-msvc: 1.33.0
 
   lilconfig@3.1.3: {}
 
@@ -23299,43 +23251,32 @@ snapshots:
 
   lines-and-columns@2.0.3: {}
 
-  linkify-html@4.3.2(patch_hash=1761c1eabe25d9fae83f74f27a20b3d24515840a4a8747bb04828df46bcfdea2)(linkifyjs@4.3.2):
+  linkify-html@4.3.3(patch_hash=1761c1eabe25d9fae83f74f27a20b3d24515840a4a8747bb04828df46bcfdea2)(linkifyjs@4.3.3):
     dependencies:
-      linkifyjs: 4.3.2
+      linkifyjs: 4.3.3
 
-  linkify-it@5.0.0:
+  linkify-it@5.0.2:
     dependencies:
       uc.micro: 2.1.0
 
-  linkify-react@4.3.2(linkifyjs@4.3.2)(react@19.2.6):
+  linkify-react@4.3.3(linkifyjs@4.3.3)(react@19.2.8):
     dependencies:
-      linkifyjs: 4.3.2
-      react: 19.2.6
+      linkifyjs: 4.3.3
+      react: 19.2.8
 
-  linkify-string@4.3.2(linkifyjs@4.3.2):
+  linkify-string@4.3.3(linkifyjs@4.3.3):
     dependencies:
-      linkifyjs: 4.3.2
+      linkifyjs: 4.3.3
 
-  linkifyjs@4.3.2: {}
+  linkifyjs@4.3.3: {}
 
-  lint-staged@17.0.2:
+  lint-staged@17.2.0:
     dependencies:
-      listr2: 10.2.1
-      picomatch: 4.0.4
+      picomatch: 4.0.5
       string-argv: 0.3.2
-      tinyexec: 1.1.2
+      tinyexec: 1.2.4
     optionalDependencies:
-      yaml: 2.8.4
-
-  listr2@10.2.1:
-    dependencies:
-      cli-truncate: 5.2.0
-      eventemitter3: 5.0.4
-      log-update: 6.1.0
-      rfdc: 1.4.1
-      wrap-ansi: 10.0.0
-
-  loader-runner@4.3.1: {}
+      yaml: 2.9.0
 
   loader-utils@2.0.4:
     dependencies:
@@ -23378,14 +23319,6 @@ snapshots:
       chalk: 4.1.2
       is-unicode-supported: 0.1.0
 
-  log-update@6.1.0:
-    dependencies:
-      ansi-escapes: 7.3.0
-      cli-cursor: 5.0.0
-      slice-ansi: 7.1.2
-      strip-ansi: 7.2.0
-      wrap-ansi: 9.0.2
-
   loglevel@1.9.2: {}
 
   long@5.3.2: {}
@@ -23424,36 +23357,20 @@ snapshots:
 
   magicast@0.5.2:
     dependencies:
-      '@babel/parser': 7.29.2
-      '@babel/types': 7.29.0
+      '@babel/parser': 7.29.8
+      '@babel/types': 7.29.8
       source-map-js: 1.2.1
 
-  mailpit-api@2.0.0: {}
+  mailpit-api@2.1.0: {}
 
   make-dir@4.0.0:
     dependencies:
-      semver: 7.7.4
+      semver: 7.8.5
 
-  make-fetch-happen@14.0.3:
-    dependencies:
-      '@npmcli/agent': 3.0.0
-      cacache: 19.0.1
-      http-cache-semantics: 4.2.0
-      minipass: 7.1.3
-      minipass-fetch: 4.0.1
-      minipass-flush: 1.0.5
-      minipass-pipeline: 1.2.4
-      negotiator: 1.0.0
-      proc-log: 5.0.0
-      promise-retry: 2.0.1
-      ssri: 12.0.0
-    transitivePeerDependencies:
-      - supports-color
-
-  make-fetch-happen@15.0.5:
+  make-fetch-happen@15.0.5(supports-color@10.2.2):
     dependencies:
       '@gar/promise-retry': 1.0.3
-      '@npmcli/agent': 4.0.0
+      '@npmcli/agent': 4.0.0(supports-color@10.2.2)
       '@npmcli/redact': 4.0.0
       cacache: 20.0.4
       http-cache-semantics: 4.2.0
@@ -23467,6 +23384,24 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  make-fetch-happen@16.0.1(supports-color@10.2.2):
+    dependencies:
+      '@gar/promise-retry': 1.0.3
+      '@npmcli/agent': 5.0.1(supports-color@10.2.2)
+      '@npmcli/redact': 5.0.0
+      cacache: 21.0.1
+      http-cache-semantics: 4.2.0
+      minipass: 7.1.3
+      minipass-fetch: 6.0.0
+      minipass-flush: 1.0.5
+      minipass-pipeline: 1.2.4
+      negotiator: 1.0.0
+      proc-log: 7.0.0
+      ssri: 14.0.0
+    transitivePeerDependencies:
+      - kerberos
+      - supports-color
+
   makeerror@1.0.12:
     dependencies:
       tmpl: 1.0.5
@@ -23495,11 +23430,11 @@ snapshots:
 
   mark.js@8.11.1: {}
 
-  markdown-it@14.1.1:
+  markdown-it@14.3.0:
     dependencies:
       argparse: 2.0.1
       entities: 4.5.0
-      linkify-it: 5.0.0
+      linkify-it: 5.0.2
       mdurl: 2.0.0
       punycode.js: 2.3.1
       uc.micro: 2.1.0
@@ -23519,33 +23454,31 @@ snapshots:
 
   matrix-events-sdk@0.0.1: {}
 
-  matrix-js-sdk@https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/d19cb751da8bbdc75c19db751fff25f21761d23a:
+  matrix-js-sdk@42.2.0:
     dependencies:
       '@babel/runtime': 8.0.0
       '@matrix-org/matrix-sdk-crypto-wasm': 18.4.0
       another-json: 0.2.0
       bs58: 6.0.0
       content-type: 2.0.0
-      jwt-decode: 4.0.0
       loglevel: 1.9.2
       matrix-events-sdk: 0.0.1
-      matrix-widget-api: 1.17.0
-      oidc-client-ts: 3.5.0
+      matrix-widget-api: 1.18.0
       p-retry: 8.0.0
       sdp-transform: 3.0.0
       unhomoglyph: 1.0.6
 
-  matrix-web-i18n@3.6.0:
+  matrix-web-i18n@3.6.0(supports-color@10.2.2):
     dependencies:
-      '@babel/parser': 7.29.2
-      '@babel/traverse': 7.29.0
+      '@babel/parser': 7.29.8
+      '@babel/traverse': 7.29.8(supports-color@10.2.2)
       lodash: 4.18.1
       minimist: 1.2.8
       walk: 2.3.15
     transitivePeerDependencies:
       - supports-color
 
-  matrix-widget-api@1.17.0:
+  matrix-widget-api@1.18.0:
     dependencies:
       '@types/events': 3.0.3
       events: 3.3.0
@@ -23560,7 +23493,7 @@ snapshots:
     dependencies:
       '@types/hast': 3.0.4
       '@types/mdast': 4.0.4
-      '@ungap/structured-clone': 1.3.0
+      '@ungap/structured-clone': 1.3.3
       devlop: 1.1.0
       micromark-util-sanitize-uri: 2.0.1
       trim-lines: 3.0.1
@@ -23578,24 +23511,22 @@ snapshots:
 
   mdurl@2.0.0: {}
 
-  media-typer@0.3.0: {}
-
   media-typer@1.1.0: {}
 
-  memfs@4.57.2(tslib@2.8.1):
+  memfs@4.64.0(tslib@2.8.1):
     dependencies:
-      '@jsonjoy.com/fs-core': 4.57.2(tslib@2.8.1)
-      '@jsonjoy.com/fs-fsa': 4.57.2(tslib@2.8.1)
-      '@jsonjoy.com/fs-node': 4.57.2(tslib@2.8.1)
-      '@jsonjoy.com/fs-node-builtins': 4.57.2(tslib@2.8.1)
-      '@jsonjoy.com/fs-node-to-fsa': 4.57.2(tslib@2.8.1)
-      '@jsonjoy.com/fs-node-utils': 4.57.2(tslib@2.8.1)
-      '@jsonjoy.com/fs-print': 4.57.2(tslib@2.8.1)
-      '@jsonjoy.com/fs-snapshot': 4.57.2(tslib@2.8.1)
+      '@jsonjoy.com/fs-core': 4.64.0(tslib@2.8.1)
+      '@jsonjoy.com/fs-fsa': 4.64.0(tslib@2.8.1)
+      '@jsonjoy.com/fs-node': 4.64.0(tslib@2.8.1)
+      '@jsonjoy.com/fs-node-builtins': 4.64.0(tslib@2.8.1)
+      '@jsonjoy.com/fs-node-to-fsa': 4.64.0(tslib@2.8.1)
+      '@jsonjoy.com/fs-node-utils': 4.64.0(tslib@2.8.1)
+      '@jsonjoy.com/fs-print': 4.64.0(tslib@2.8.1)
+      '@jsonjoy.com/fs-snapshot': 4.64.0(tslib@2.8.1)
       '@jsonjoy.com/json-pack': 1.21.0(tslib@2.8.1)
       '@jsonjoy.com/util': 1.9.0(tslib@2.8.1)
       glob-to-regex.js: 1.2.0(tslib@2.8.1)
-      thingies: 2.5.0(tslib@2.8.1)
+      thingies: 2.6.0(tslib@2.8.1)
       tree-dump: 1.1.0(tslib@2.8.1)
       tslib: 2.8.1
 
@@ -23609,39 +23540,37 @@ snapshots:
 
   meow@14.1.0: {}
 
-  merge-descriptors@1.0.3: {}
-
   merge-descriptors@2.0.0: {}
 
   merge-stream@2.0.0: {}
 
   merge2@1.4.1: {}
 
-  mermaid@11.14.0:
+  meriyah@6.1.4: {}
+
+  mermaid@11.16.0:
     dependencies:
       '@braintree/sanitize-url': 7.1.2
-      '@iconify/utils': 3.1.0
-      '@mermaid-js/parser': 1.1.0
+      '@iconify/utils': 3.1.3
+      '@mermaid-js/parser': 1.2.0
       '@types/d3': 7.4.3
       '@upsetjs/venn.js': 2.0.0
-      cytoscape: 3.33.2
-      cytoscape-cose-bilkent: 4.1.0(cytoscape@3.33.2)
-      cytoscape-fcose: 2.2.0(cytoscape@3.33.2)
+      cytoscape: 3.34.0
+      cytoscape-cose-bilkent: 4.1.0(cytoscape@3.34.0)
+      cytoscape-fcose: 2.2.0(cytoscape@3.34.0)
       d3: 7.9.0
       d3-sankey: 0.12.3
       dagre-d3-es: 7.0.14
-      dayjs: 1.11.20
-      dompurify: 3.4.0
-      katex: 0.16.45
+      dayjs: 1.11.21
+      dompurify: 3.4.12
+      es-toolkit: 1.49.0
+      katex: 0.16.47
       khroma: 2.1.0
-      lodash-es: 4.18.1
       marked: 16.4.2
       roughjs: 4.6.6
-      stylis: 4.3.6
-      ts-dedent: 2.2.0
-      uuid: 11.1.0
-
-  methods@1.1.2: {}
+      stylis: 4.4.0
+      ts-dedent: 2.3.0
+      uuid: 14.0.1
 
   micromark-util-character@2.1.1:
     dependencies:
@@ -23682,8 +23611,6 @@ snapshots:
     dependencies:
       mime-db: 1.54.0
 
-  mime@1.6.0: {}
-
   mime@2.6.0: {}
 
   mime@4.1.0: {}
@@ -23698,11 +23625,11 @@ snapshots:
 
   min-indent@1.0.1: {}
 
-  mini-css-extract-plugin@2.10.2(webpack@5.106.2):
+  mini-css-extract-plugin@2.10.2(webpack@5.109.2):
     dependencies:
       schema-utils: 4.3.3
-      tapable: 2.3.2
-      webpack: 5.106.2(webpack-cli@7.0.2)
+      tapable: 2.3.3
+      webpack: 5.109.2(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack-cli@7.2.2)
 
   minimalistic-assert@1.0.1: {}
 
@@ -23710,49 +23637,70 @@ snapshots:
 
   minimatch@10.2.3:
     dependencies:
-      brace-expansion: 5.0.6
+      brace-expansion: 5.0.9
 
   minimatch@10.2.4:
     dependencies:
-      brace-expansion: 5.0.6
+      brace-expansion: 5.0.9
 
   minimatch@10.2.5:
     dependencies:
-      brace-expansion: 5.0.6
+      brace-expansion: 5.0.9
+
+  minimatch@10.2.6:
+    dependencies:
+      brace-expansion: 5.0.9
 
   minimatch@3.1.5:
     dependencies:
-      brace-expansion: 1.1.13
+      brace-expansion: 1.1.18
 
   minimatch@5.1.9:
     dependencies:
-      brace-expansion: 2.1.0
+      brace-expansion: 2.1.4
 
   minimatch@9.0.9:
     dependencies:
-      brace-expansion: 2.1.0
+      brace-expansion: 2.1.4
 
   minimist@1.2.8: {}
 
+  minimizer-webpack-plugin@5.6.1(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack@5.109.2):
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      jest-worker: 27.5.1
+      schema-utils: 4.3.3
+      terser: 5.49.0
+      webpack: 5.109.2(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack-cli@7.2.2)
+    optionalDependencies:
+      clean-css: 5.3.3
+      cssnano: 7.1.2(postcss@8.5.25)
+      csso: 5.0.5
+      esbuild: 0.27.4
+      html-minifier-terser: 6.1.0
+      lightningcss: 1.33.0
+      postcss: 8.5.25
+      uglify-js: 3.19.3
+
   minipass-collect@2.0.1:
     dependencies:
       minipass: 7.1.3
 
-  minipass-fetch@4.0.1:
-    dependencies:
-      minipass: 7.1.3
-      minipass-sized: 1.0.3
-      minizlib: 3.1.0
-    optionalDependencies:
-      encoding: 0.1.13
-
   minipass-fetch@5.0.2:
     dependencies:
       minipass: 7.1.3
       minipass-sized: 2.0.0
       minizlib: 3.1.0
     optionalDependencies:
-      iconv-lite: 0.7.2
+      iconv-lite: 0.7.3
+
+  minipass-fetch@6.0.0:
+    dependencies:
+      minipass: 7.1.3
+      minipass-sized: 2.0.0
+      minizlib: 3.1.0
+    optionalDependencies:
+      iconv-lite: 0.7.3
 
   minipass-flush@1.0.5:
     dependencies:
@@ -23762,10 +23710,6 @@ snapshots:
     dependencies:
       minipass: 3.3.6
 
-  minipass-sized@1.0.3:
-    dependencies:
-      minipass: 3.3.6
-
   minipass-sized@2.0.0:
     dependencies:
       minipass: 7.1.3
@@ -23796,7 +23740,7 @@ snapshots:
 
   mlly@1.8.2:
     dependencies:
-      acorn: 8.16.0
+      acorn: 8.18.0
       pathe: 2.0.3
       pkg-types: 1.3.1
       ufo: 1.6.3
@@ -23806,7 +23750,7 @@ snapshots:
       doctrine: 3.0.0
       file: 0.2.2
       lodash: 4.18.1
-      markdown-it: 14.1.1
+      markdown-it: 14.3.0
       mkdirp: 0.5.6
       requirejs: 2.3.8
       yargs: 15.4.1
@@ -23823,6 +23767,21 @@ snapshots:
     dependencies:
       color-name: 1.1.4
 
+  motion-dom@12.42.2:
+    dependencies:
+      motion-utils: 12.39.0
+
+  motion-utils@12.39.0: {}
+
+  motion@12.42.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.8)(react@19.2.8):
+    dependencies:
+      framer-motion: 12.42.2(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.8)(react@19.2.8)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@emotion/is-prop-valid': 1.4.0
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
   mrmime@2.0.1: {}
 
   ms@2.0.0: {}
@@ -23836,10 +23795,10 @@ snapshots:
 
   murmurhash-js@1.0.0: {}
 
-  nan@2.26.2:
+  nan@2.28.0:
     optional: true
 
-  nanoid@3.3.11: {}
+  nanoid@3.3.16: {}
 
   napi-postinstall@0.3.4: {}
 
@@ -23858,56 +23817,49 @@ snapshots:
       lower-case: 2.0.2
       tslib: 2.8.1
 
-  node-abi@4.29.0:
+  node-abi@4.33.0:
     dependencies:
-      semver: 7.7.4
-
-  node-addon-api@1.7.2:
-    optional: true
+      semver: 7.8.5
 
   node-api-version@0.2.1:
     dependencies:
-      semver: 7.7.4
+      semver: 7.8.5
 
-  node-fetch@2.7.0(encoding@0.1.13):
+  node-fetch@2.7.0:
     dependencies:
       whatwg-url: 5.0.0
-    optionalDependencies:
-      encoding: 0.1.13
 
-  node-gyp@11.5.0:
+  node-gyp@12.2.0(supports-color@10.2.2):
     dependencies:
       env-paths: 2.2.1
       exponential-backoff: 3.1.3
       graceful-fs: 4.2.11
-      make-fetch-happen: 14.0.3
-      nopt: 8.1.0
-      proc-log: 5.0.0
-      semver: 7.7.4
-      tar: 7.5.13
-      tinyglobby: 0.2.16
-      which: 5.0.0
-    transitivePeerDependencies:
-      - supports-color
-
-  node-gyp@12.2.0:
-    dependencies:
-      env-paths: 2.2.1
-      exponential-backoff: 3.1.3
-      graceful-fs: 4.2.11
-      make-fetch-happen: 15.0.5
+      make-fetch-happen: 15.0.5(supports-color@10.2.2)
       nopt: 9.0.0
       proc-log: 6.1.0
-      semver: 7.7.4
-      tar: 7.5.13
-      tinyglobby: 0.2.16
+      semver: 7.8.5
+      tar: 7.5.22
+      tinyglobby: 0.2.17
       which: 6.0.1
     transitivePeerDependencies:
       - supports-color
 
+  node-gyp@13.0.0:
+    dependencies:
+      env-paths: 2.2.1
+      exponential-backoff: 3.1.3
+      graceful-fs: 4.2.11
+      nopt: 10.0.1
+      proc-log: 7.0.0
+      semver: 7.8.5
+      tar: 7.5.22
+      tinyglobby: 0.2.17
+      undici: 6.28.0
+      which: 7.0.0
+
   node-int64@0.4.0: {}
 
-  node-releases@2.0.37: {}
+  node-releases@2.0.51: {}
 
   node-stdlib-browser@1.3.1:
     dependencies:
@@ -23942,65 +23894,60 @@ snapshots:
   non-layered-tidy-tree-layout@2.0.2:
     optional: true
 
-  nopt@8.1.0:
+  nopt@10.0.1:
     dependencies:
-      abbrev: 3.0.1
+      abbrev: 5.0.0
 
   nopt@9.0.0:
     dependencies:
       abbrev: 4.0.0
 
-  normalize-package-data@2.5.0:
-    dependencies:
-      hosted-git-info: 2.8.9
-      resolve: 1.22.12
-      semver: 5.7.2
-      validate-npm-package-license: 3.0.4
-
   normalize-path@3.0.0: {}
 
   normalize-url@6.1.0: {}
 
-  npm-bundled@5.0.0:
+  npm-bundled@6.0.0:
     dependencies:
-      npm-normalize-package-bin: 5.0.0
+      npm-normalize-package-bin: 6.0.0
 
-  npm-install-checks@8.0.0:
+  npm-install-checks@9.0.0:
     dependencies:
-      semver: 7.7.4
+      semver: 7.8.5
 
-  npm-normalize-package-bin@5.0.0: {}
+  npm-normalize-package-bin@6.0.0: {}
 
-  npm-package-arg@13.0.2:
+  npm-package-arg@14.0.0:
     dependencies:
-      hosted-git-info: 9.0.2
-      proc-log: 6.1.0
-      semver: 7.7.4
-      validate-npm-package-name: 7.0.2
+      hosted-git-info: 10.1.1
+      proc-log: 7.0.0
+      semver: 7.8.5
+      validate-npm-package-name: 8.0.0
 
-  npm-packlist@10.0.4:
+  npm-packlist@11.2.0:
     dependencies:
-      ignore-walk: 8.0.0
-      proc-log: 6.1.0
+      glob: 13.0.6
+      ignore-walk: 9.0.0
+      proc-log: 7.0.0
 
-  npm-pick-manifest@11.0.3:
+  npm-pick-manifest@12.0.0:
     dependencies:
-      npm-install-checks: 8.0.0
-      npm-normalize-package-bin: 5.0.0
-      npm-package-arg: 13.0.2
-      semver: 7.7.4
+      npm-install-checks: 9.0.0
+      npm-normalize-package-bin: 6.0.0
+      npm-package-arg: 14.0.0
+      semver: 7.8.5
 
-  npm-registry-fetch@19.1.1:
+  npm-registry-fetch@20.0.1(supports-color@10.2.2):
     dependencies:
-      '@npmcli/redact': 4.0.0
+      '@npmcli/redact': 5.0.0
       jsonparse: 1.3.1
-      make-fetch-happen: 15.0.5
+      make-fetch-happen: 16.0.1(supports-color@10.2.2)
       minipass: 7.1.3
-      minipass-fetch: 5.0.2
+      minipass-fetch: 6.0.0
       minizlib: 3.1.0
-      npm-package-arg: 13.0.2
-      proc-log: 6.1.0
+      npm-package-arg: 14.0.0
+      proc-log: 7.0.0
     transitivePeerDependencies:
+      - kerberos
       - supports-color
 
   npm-run-path@4.0.1:
@@ -24013,59 +23960,7 @@ snapshots:
 
   nwsapi@2.2.23: {}
 
-  nx@22.6.5:
-    dependencies:
-      '@napi-rs/wasm-runtime': 0.2.4
-      '@yarnpkg/lockfile': 1.1.0
-      '@yarnpkg/parsers': 3.0.2
-      '@zkochan/js-yaml': 0.0.7
-      axios: 1.15.0
-      cli-cursor: 3.1.0
-      cli-spinners: 2.6.1
-      cliui: 8.0.1
-      dotenv: 16.4.7
-      dotenv-expand: 11.0.7
-      ejs: 5.0.1
-      enquirer: 2.3.6
-      figures: 3.2.0
-      flat: 5.0.2
-      front-matter: 4.0.2
-      ignore: 7.0.5
-      jest-diff: 30.4.1
-      jsonc-parser: 3.2.0
-      lines-and-columns: 2.0.3
-      minimatch: 10.2.4
-      npm-run-path: 4.0.1
-      open: 8.4.2
-      ora: 5.3.0
-      picocolors: 1.1.1
-      resolve.exports: 2.0.3
-      semver: 7.7.4
-      smol-toml: 1.6.1
-      string-width: 4.2.3
-      tar-stream: 2.2.0
-      tmp: 0.2.5
-      tree-kill: 1.2.2
-      tsconfig-paths: 4.2.0
-      tslib: 2.8.1
-      yaml: 2.8.4
-      yargs: 17.7.2
-      yargs-parser: 21.1.1
-    optionalDependencies:
-      '@nx/nx-darwin-arm64': 22.6.5
-      '@nx/nx-darwin-x64': 22.6.5
-      '@nx/nx-freebsd-x64': 22.6.5
-      '@nx/nx-linux-arm-gnueabihf': 22.6.5
-      '@nx/nx-linux-arm64-gnu': 22.6.5
-      '@nx/nx-linux-arm64-musl': 22.6.5
-      '@nx/nx-linux-x64-gnu': 22.6.5
-      '@nx/nx-linux-x64-musl': 22.6.5
-      '@nx/nx-win32-arm64-msvc': 22.6.5
-      '@nx/nx-win32-x64-msvc': 22.6.5
-    transitivePeerDependencies:
-      - debug
-
-  nx@22.7.1:
+  nx@23.1.1:
     dependencies:
       '@emnapi/core': 1.4.5
       '@emnapi/runtime': 1.4.5
@@ -24075,17 +23970,19 @@ snapshots:
       '@tybys/wasm-util': 0.9.0
       '@yarnpkg/lockfile': 1.1.0
       '@zkochan/js-yaml': 0.0.7
+      agent-base: 6.0.2(supports-color@7.2.0)
       ansi-colors: 4.1.3
       ansi-regex: 5.0.1
       ansi-styles: 4.3.0
       argparse: 2.0.1
       asynckit: 0.4.0
-      axios: 1.15.0
+      axios: 1.18.1(debug@4.4.3)(supports-color@7.2.0)
       balanced-match: 4.0.3
       base64-js: 1.5.1
       bl: 4.1.0
-      brace-expansion: 5.0.2
+      brace-expansion: 5.0.8
       buffer: 5.7.1
+      bundle-name: 4.1.0
       call-bind-apply-helpers: 1.0.2
       chalk: 4.1.2
       cli-cursor: 3.1.0
@@ -24095,8 +23992,11 @@ snapshots:
       color-convert: 2.0.1
       color-name: 1.1.4
       combined-stream: 1.0.8
+      debug: 4.4.3(supports-color@7.2.0)
+      default-browser: 5.2.1
+      default-browser-id: 5.0.0
       defaults: 1.0.4
-      define-lazy-prop: 2.0.0
+      define-lazy-prop: 3.0.0
       delayed-stream: 1.0.0
       dotenv: 16.4.7
       dotenv-expand: 12.0.3
@@ -24113,8 +24013,8 @@ snapshots:
       escape-string-regexp: 1.0.5
       figures: 3.2.0
       flat: 5.0.2
-      follow-redirects: 1.16.0
-      form-data: 4.0.5
+      follow-redirects: 1.16.0(debug@4.4.3)
+      form-data: 4.0.6
       fs-constants: 1.0.0
       function-bind: 1.1.2
       get-caller-file: 2.0.5
@@ -24124,30 +24024,34 @@ snapshots:
       has-flag: 4.0.0
       has-symbols: 1.1.0
       has-tostringtag: 1.0.2
-      hasown: 2.0.2
+      hasown: 2.0.4
+      https-proxy-agent: 5.0.1(supports-color@7.2.0)
       ieee754: 1.2.1
       ignore: 7.0.5
       inherits: 2.0.4
-      is-docker: 2.2.1
+      is-docker: 3.0.0
       is-fullwidth-code-point: 3.0.0
+      is-inside-container: 1.0.0
       is-interactive: 1.0.0
       is-unicode-supported: 0.1.0
-      is-wsl: 2.2.0
+      is-wsl: 3.1.0
+      isexe: 2.0.0
       json5: 2.2.3
-      jsonc-parser: 3.2.0
+      jsonc-parser: 3.3.1
       lines-and-columns: 2.0.3
       log-symbols: 4.1.0
       math-intrinsics: 1.1.0
       mime-db: 1.52.0
       mime-types: 2.1.35
       mimic-fn: 2.1.0
-      minimatch: 10.2.4
+      minimatch: 10.2.5
       minimist: 1.2.8
+      ms: 2.1.3
       npm-run-path: 4.0.1
       once: 1.4.0
       onetime: 5.1.2
-      open: 8.4.2
-      ora: 5.3.0
+      open: 10.1.0
+      ora: 5.4.1
       path-key: 3.1.1
       picocolors: 1.1.1
       proxy-from-env: 2.1.0
@@ -24155,8 +24059,9 @@ snapshots:
       require-directory: 2.1.1
       resolve.exports: 2.0.3
       restore-cursor: 3.1.0
+      run-applescript: 7.0.0
       safe-buffer: 5.2.1
-      semver: 7.7.4
+      semver: 7.8.4
       signal-exit: 3.0.7
       smol-toml: 1.6.1
       string-width: 4.2.3
@@ -24165,31 +24070,29 @@ snapshots:
       strip-bom: 3.0.0
       supports-color: 7.2.0
       tar-stream: 2.2.0
-      tmp: 0.2.4
-      tree-kill: 1.2.2
+      tmp: 0.2.7
       tsconfig-paths: 4.2.0
       tslib: 2.8.1
       util-deprecate: 1.0.2
       wcwidth: 1.0.1
+      which: 3.0.1
       wrap-ansi: 7.0.0
       wrappy: 1.0.2
       y18n: 5.0.8
-      yaml: 2.8.0
+      yaml: 2.9.0
       yargs: 17.7.2
       yargs-parser: 21.1.1
     optionalDependencies:
-      '@nx/nx-darwin-arm64': 22.7.1
-      '@nx/nx-darwin-x64': 22.7.1
-      '@nx/nx-freebsd-x64': 22.7.1
-      '@nx/nx-linux-arm-gnueabihf': 22.7.1
-      '@nx/nx-linux-arm64-gnu': 22.7.1
-      '@nx/nx-linux-arm64-musl': 22.7.1
-      '@nx/nx-linux-x64-gnu': 22.7.1
-      '@nx/nx-linux-x64-musl': 22.7.1
-      '@nx/nx-win32-arm64-msvc': 22.7.1
-      '@nx/nx-win32-x64-msvc': 22.7.1
-    transitivePeerDependencies:
-      - debug
+      '@nx/nx-darwin-arm64': 23.1.1
+      '@nx/nx-darwin-x64': 23.1.1
+      '@nx/nx-freebsd-x64': 23.1.1
+      '@nx/nx-linux-arm-gnueabihf': 23.1.1
+      '@nx/nx-linux-arm64-gnu': 23.1.1
+      '@nx/nx-linux-arm64-musl': 23.1.1
+      '@nx/nx-linux-x64-gnu': 23.1.1
+      '@nx/nx-linux-x64-musl': 23.1.1
+      '@nx/nx-win32-arm64-msvc': 23.1.1
+      '@nx/nx-win32-x64-msvc': 23.1.1
 
   object-assign@4.1.1: {}
 
@@ -24211,41 +24114,8 @@ snapshots:
       has-symbols: 1.1.0
       object-keys: 1.1.1
 
-  object.entries@1.1.9:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-object-atoms: 1.1.1
-
-  object.fromentries@2.0.8:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.1
-      es-object-atoms: 1.1.1
-
-  object.groupby@1.0.3:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.1
-
-  object.values@1.2.1:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-object-atoms: 1.1.1
-
-  obuf@1.1.2: {}
-
   obug@2.1.1: {}
 
-  oidc-client-ts@3.5.0:
-    dependencies:
-      jwt-decode: 4.0.0
-
   on-finished@2.4.1:
     dependencies:
       ee-first: 1.1.1
@@ -24260,16 +24130,19 @@ snapshots:
     dependencies:
       mimic-fn: 2.1.0
 
-  onetime@7.0.0:
-    dependencies:
-      mimic-function: 5.0.1
-
   oniguruma-to-es@3.1.1:
     dependencies:
       emoji-regex-xs: 1.0.0
       regex: 6.1.0
       regex-recursion: 6.0.2
 
+  open@10.1.0:
+    dependencies:
+      default-browser: 5.5.0
+      define-lazy-prop: 3.0.0
+      is-inside-container: 1.0.0
+      is-wsl: 3.1.1
+
   open@10.2.0:
     dependencies:
       default-browser: 5.5.0
@@ -24277,11 +24150,14 @@ snapshots:
       is-inside-container: 1.0.0
       wsl-utils: 0.1.0
 
-  open@8.4.2:
+  open@11.0.0:
     dependencies:
-      define-lazy-prop: 2.0.0
-      is-docker: 2.2.1
-      is-wsl: 2.2.0
+      default-browser: 5.5.0
+      define-lazy-prop: 3.0.0
+      is-in-ssh: 1.0.0
+      is-inside-container: 1.0.0
+      powershell-utils: 0.1.0
+      wsl-utils: 0.3.1
 
   opener@1.5.2: {}
 
@@ -24296,75 +24172,147 @@ snapshots:
 
   opus-recorder@8.0.5: {}
 
-  ora@5.3.0:
+  ora@5.4.1:
     dependencies:
       bl: 4.1.0
       chalk: 4.1.2
       cli-cursor: 3.1.0
       cli-spinners: 2.6.1
       is-interactive: 1.0.0
+      is-unicode-supported: 0.1.0
       log-symbols: 4.1.0
       strip-ansi: 6.0.1
       wcwidth: 1.0.1
 
   os-browserify@0.3.0: {}
 
-  own-keys@1.0.1:
+  oxc-parser@0.127.0:
     dependencies:
-      get-intrinsic: 1.3.0
-      object-keys: 1.1.1
-      safe-push-apply: 1.0.0
+      '@oxc-project/types': 0.127.0
+    optionalDependencies:
+      '@oxc-parser/binding-android-arm-eabi': 0.127.0
+      '@oxc-parser/binding-android-arm64': 0.127.0
+      '@oxc-parser/binding-darwin-arm64': 0.127.0
+      '@oxc-parser/binding-darwin-x64': 0.127.0
+      '@oxc-parser/binding-freebsd-x64': 0.127.0
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.127.0
+      '@oxc-parser/binding-linux-arm-musleabihf': 0.127.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.127.0
+      '@oxc-parser/binding-linux-ppc64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-riscv64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-riscv64-musl': 0.127.0
+      '@oxc-parser/binding-linux-s390x-gnu': 0.127.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-x64-musl': 0.127.0
+      '@oxc-parser/binding-openharmony-arm64': 0.127.0
+      '@oxc-parser/binding-wasm32-wasi': 0.127.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.127.0
+      '@oxc-parser/binding-win32-ia32-msvc': 0.127.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.127.0
 
-  oxc-parser@0.128.0:
+  oxc-parser@0.140.0:
     dependencies:
-      '@oxc-project/types': 0.128.0
+      '@oxc-project/types': 0.140.0
     optionalDependencies:
-      '@oxc-parser/binding-android-arm-eabi': 0.128.0
-      '@oxc-parser/binding-android-arm64': 0.128.0
-      '@oxc-parser/binding-darwin-arm64': 0.128.0
-      '@oxc-parser/binding-darwin-x64': 0.128.0
-      '@oxc-parser/binding-freebsd-x64': 0.128.0
-      '@oxc-parser/binding-linux-arm-gnueabihf': 0.128.0
-      '@oxc-parser/binding-linux-arm-musleabihf': 0.128.0
-      '@oxc-parser/binding-linux-arm64-gnu': 0.128.0
-      '@oxc-parser/binding-linux-arm64-musl': 0.128.0
-      '@oxc-parser/binding-linux-ppc64-gnu': 0.128.0
-      '@oxc-parser/binding-linux-riscv64-gnu': 0.128.0
-      '@oxc-parser/binding-linux-riscv64-musl': 0.128.0
-      '@oxc-parser/binding-linux-s390x-gnu': 0.128.0
-      '@oxc-parser/binding-linux-x64-gnu': 0.128.0
-      '@oxc-parser/binding-linux-x64-musl': 0.128.0
-      '@oxc-parser/binding-openharmony-arm64': 0.128.0
-      '@oxc-parser/binding-wasm32-wasi': 0.128.0
-      '@oxc-parser/binding-win32-arm64-msvc': 0.128.0
-      '@oxc-parser/binding-win32-ia32-msvc': 0.128.0
-      '@oxc-parser/binding-win32-x64-msvc': 0.128.0
+      '@oxc-parser/binding-android-arm-eabi': 0.140.0
+      '@oxc-parser/binding-android-arm64': 0.140.0
+      '@oxc-parser/binding-darwin-arm64': 0.140.0
+      '@oxc-parser/binding-darwin-x64': 0.140.0
+      '@oxc-parser/binding-freebsd-x64': 0.140.0
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.140.0
+      '@oxc-parser/binding-linux-arm-musleabihf': 0.140.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.140.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.140.0
+      '@oxc-parser/binding-linux-ppc64-gnu': 0.140.0
+      '@oxc-parser/binding-linux-riscv64-gnu': 0.140.0
+      '@oxc-parser/binding-linux-riscv64-musl': 0.140.0
+      '@oxc-parser/binding-linux-s390x-gnu': 0.140.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.140.0
+      '@oxc-parser/binding-linux-x64-musl': 0.140.0
+      '@oxc-parser/binding-openharmony-arm64': 0.140.0
+      '@oxc-parser/binding-wasm32-wasi': 0.140.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.140.0
+      '@oxc-parser/binding-win32-ia32-msvc': 0.140.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.140.0
 
-  oxc-resolver@11.19.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0):
+  oxc-resolver@11.24.2:
     optionalDependencies:
-      '@oxc-resolver/binding-android-arm-eabi': 11.19.1
-      '@oxc-resolver/binding-android-arm64': 11.19.1
-      '@oxc-resolver/binding-darwin-arm64': 11.19.1
-      '@oxc-resolver/binding-darwin-x64': 11.19.1
-      '@oxc-resolver/binding-freebsd-x64': 11.19.1
-      '@oxc-resolver/binding-linux-arm-gnueabihf': 11.19.1
-      '@oxc-resolver/binding-linux-arm-musleabihf': 11.19.1
-      '@oxc-resolver/binding-linux-arm64-gnu': 11.19.1
-      '@oxc-resolver/binding-linux-arm64-musl': 11.19.1
-      '@oxc-resolver/binding-linux-ppc64-gnu': 11.19.1
-      '@oxc-resolver/binding-linux-riscv64-gnu': 11.19.1
-      '@oxc-resolver/binding-linux-riscv64-musl': 11.19.1
-      '@oxc-resolver/binding-linux-s390x-gnu': 11.19.1
-      '@oxc-resolver/binding-linux-x64-gnu': 11.19.1
-      '@oxc-resolver/binding-linux-x64-musl': 11.19.1
-      '@oxc-resolver/binding-openharmony-arm64': 11.19.1
-      '@oxc-resolver/binding-wasm32-wasi': 11.19.1(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
-      '@oxc-resolver/binding-win32-arm64-msvc': 11.19.1
-      '@oxc-resolver/binding-win32-ia32-msvc': 11.19.1
-      '@oxc-resolver/binding-win32-x64-msvc': 11.19.1
-    transitivePeerDependencies:
-      - '@emnapi/core'
-      - '@emnapi/runtime'
+      '@oxc-resolver/binding-android-arm-eabi': 11.24.2
+      '@oxc-resolver/binding-android-arm64': 11.24.2
+      '@oxc-resolver/binding-darwin-arm64': 11.24.2
+      '@oxc-resolver/binding-darwin-x64': 11.24.2
+      '@oxc-resolver/binding-freebsd-x64': 11.24.2
+      '@oxc-resolver/binding-linux-arm-gnueabihf': 11.24.2
+      '@oxc-resolver/binding-linux-arm-musleabihf': 11.24.2
+      '@oxc-resolver/binding-linux-arm64-gnu': 11.24.2
+      '@oxc-resolver/binding-linux-arm64-musl': 11.24.2
+      '@oxc-resolver/binding-linux-ppc64-gnu': 11.24.2
+      '@oxc-resolver/binding-linux-riscv64-gnu': 11.24.2
+      '@oxc-resolver/binding-linux-riscv64-musl': 11.24.2
+      '@oxc-resolver/binding-linux-s390x-gnu': 11.24.2
+      '@oxc-resolver/binding-linux-x64-gnu': 11.24.2
+      '@oxc-resolver/binding-linux-x64-musl': 11.24.2
+      '@oxc-resolver/binding-openharmony-arm64': 11.24.2
+      '@oxc-resolver/binding-wasm32-wasi': 11.24.2
+      '@oxc-resolver/binding-win32-arm64-msvc': 11.24.2
+      '@oxc-resolver/binding-win32-x64-msvc': 11.24.2
+
+  oxfmt@0.60.0:
+    dependencies:
+      tinypool: 2.1.0
+    optionalDependencies:
+      '@oxfmt/binding-android-arm-eabi': 0.60.0
+      '@oxfmt/binding-android-arm64': 0.60.0
+      '@oxfmt/binding-darwin-arm64': 0.60.0
+      '@oxfmt/binding-darwin-x64': 0.60.0
+      '@oxfmt/binding-freebsd-x64': 0.60.0
+      '@oxfmt/binding-linux-arm-gnueabihf': 0.60.0
+      '@oxfmt/binding-linux-arm-musleabihf': 0.60.0
+      '@oxfmt/binding-linux-arm64-gnu': 0.60.0
+      '@oxfmt/binding-linux-arm64-musl': 0.60.0
+      '@oxfmt/binding-linux-ppc64-gnu': 0.60.0
+      '@oxfmt/binding-linux-riscv64-gnu': 0.60.0
+      '@oxfmt/binding-linux-riscv64-musl': 0.60.0
+      '@oxfmt/binding-linux-s390x-gnu': 0.60.0
+      '@oxfmt/binding-linux-x64-gnu': 0.60.0
+      '@oxfmt/binding-linux-x64-musl': 0.60.0
+      '@oxfmt/binding-openharmony-arm64': 0.60.0
+      '@oxfmt/binding-win32-arm64-msvc': 0.60.0
+      '@oxfmt/binding-win32-ia32-msvc': 0.60.0
+      '@oxfmt/binding-win32-x64-msvc': 0.60.0
+
+  oxlint-tsgolint@7.0.2001:
+    optionalDependencies:
+      '@oxlint-tsgolint/darwin-arm64': 7.0.2001
+      '@oxlint-tsgolint/darwin-x64': 7.0.2001
+      '@oxlint-tsgolint/linux-arm64': 7.0.2001
+      '@oxlint-tsgolint/linux-x64': 7.0.2001
+      '@oxlint-tsgolint/win32-arm64': 7.0.2001
+      '@oxlint-tsgolint/win32-x64': 7.0.2001
+
+  oxlint@1.75.0(oxlint-tsgolint@7.0.2001):
+    optionalDependencies:
+      '@oxlint/binding-android-arm-eabi': 1.75.0
+      '@oxlint/binding-android-arm64': 1.75.0
+      '@oxlint/binding-darwin-arm64': 1.75.0
+      '@oxlint/binding-darwin-x64': 1.75.0
+      '@oxlint/binding-freebsd-x64': 1.75.0
+      '@oxlint/binding-linux-arm-gnueabihf': 1.75.0
+      '@oxlint/binding-linux-arm-musleabihf': 1.75.0
+      '@oxlint/binding-linux-arm64-gnu': 1.75.0
+      '@oxlint/binding-linux-arm64-musl': 1.75.0
+      '@oxlint/binding-linux-ppc64-gnu': 1.75.0
+      '@oxlint/binding-linux-riscv64-gnu': 1.75.0
+      '@oxlint/binding-linux-riscv64-musl': 1.75.0
+      '@oxlint/binding-linux-s390x-gnu': 1.75.0
+      '@oxlint/binding-linux-x64-gnu': 1.75.0
+      '@oxlint/binding-linux-x64-musl': 1.75.0
+      '@oxlint/binding-openharmony-arm64': 1.75.0
+      '@oxlint/binding-win32-arm64-msvc': 1.75.0
+      '@oxlint/binding-win32-ia32-msvc': 1.75.0
+      '@oxlint/binding-win32-x64-msvc': 1.75.0
+      oxlint-tsgolint: 7.0.2001
 
   p-cancelable@2.1.1: {}
 
@@ -24386,15 +24334,9 @@ snapshots:
 
   p-map@7.0.4: {}
 
-  p-retry@6.2.1:
-    dependencies:
-      '@types/retry': 0.12.2
-      is-network-error: 1.3.0
-      retry: 0.13.1
-
   p-retry@8.0.0:
     dependencies:
-      is-network-error: 1.3.0
+      is-network-error: 1.3.2
 
   p-try@2.2.0: {}
 
@@ -24402,31 +24344,32 @@ snapshots:
 
   package-manager-detector@1.6.0: {}
 
-  pacote@21.5.0:
+  pacote@22.0.0(supports-color@10.2.2):
     dependencies:
       '@gar/promise-retry': 1.0.3
-      '@npmcli/git': 7.0.2
-      '@npmcli/installed-package-contents': 4.0.0
-      '@npmcli/package-json': 7.0.5
-      '@npmcli/promise-spawn': 9.0.1
-      '@npmcli/run-script': 10.0.4
-      cacache: 20.0.4
+      '@npmcli/git': 8.0.0
+      '@npmcli/installed-package-contents': 5.0.0
+      '@npmcli/package-json': 8.0.0
+      '@npmcli/promise-spawn': 10.0.0
+      '@npmcli/run-script': 11.0.0
+      cacache: 21.0.1
       fs-minipass: 3.0.3
       minipass: 7.1.3
-      npm-package-arg: 13.0.2
-      npm-packlist: 10.0.4
-      npm-pick-manifest: 11.0.3
-      npm-registry-fetch: 19.1.1
-      proc-log: 6.1.0
-      sigstore: 4.1.0
-      ssri: 13.0.1
-      tar: 7.5.13
+      npm-package-arg: 14.0.0
+      npm-packlist: 11.2.0
+      npm-pick-manifest: 12.0.0
+      npm-registry-fetch: 20.0.1(supports-color@10.2.2)
+      proc-log: 7.0.0
+      sigstore: 5.0.0(supports-color@10.2.2)
+      ssri: 14.0.0
+      tar: 7.5.22
     transitivePeerDependencies:
+      - kerberos
       - supports-color
 
   pako@1.0.11: {}
 
-  pako@2.1.0: {}
+  pako@3.0.1: {}
 
   param-case@3.0.4:
     dependencies:
@@ -24447,7 +24390,7 @@ snapshots:
 
   parse-json@5.2.0:
     dependencies:
-      '@babel/code-frame': 7.29.0
+      '@babel/code-frame': 7.29.7
       error-ex: 1.3.4
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
@@ -24487,8 +24430,6 @@ snapshots:
       lru-cache: 11.2.6
       minipass: 7.1.3
 
-  path-to-regexp@0.1.13: {}
-
   path-to-regexp@8.4.2: {}
 
   path-type@4.0.0: {}
@@ -24512,33 +24453,21 @@ snapshots:
 
   pe-library@0.4.1: {}
 
-  pend@1.2.0: {}
-
   perfect-debounce@1.0.0: {}
 
-  pg-int8@1.0.1: {}
-
-  pg-protocol@1.13.0: {}
-
-  pg-types@2.2.0:
-    dependencies:
-      pg-int8: 1.0.1
-      postgres-array: 2.0.0
-      postgres-bytea: 1.0.1
-      postgres-date: 1.0.7
-      postgres-interval: 1.2.0
-
   picocolors@1.1.1: {}
 
   picomatch@2.3.2: {}
 
   picomatch@4.0.4: {}
 
+  picomatch@4.0.5: {}
+
   pify@2.3.0: {}
 
   pirates@4.0.7: {}
 
-  pixelmatch@7.1.0:
+  pixelmatch@7.2.0:
     dependencies:
       pngjs: 7.0.0
 
@@ -24562,7 +24491,7 @@ snapshots:
       exsolve: 1.0.8
       pathe: 2.0.3
 
-  pkijs@3.3.3:
+  pkijs@3.4.0:
     dependencies:
       '@noble/hashes': 1.4.0
       asn1js: 3.0.10
@@ -24571,11 +24500,11 @@ snapshots:
       pvutils: 1.1.5
       tslib: 2.8.1
 
-  playwright-core@1.59.1: {}
+  playwright-core@1.61.1: {}
 
-  playwright@1.59.1:
+  playwright@1.61.1:
     dependencies:
-      playwright-core: 1.59.1
+      playwright-core: 1.61.1
     optionalDependencies:
       fsevents: 2.3.2
 
@@ -24585,17 +24514,15 @@ snapshots:
       base64-js: 1.5.1
       xmlbuilder: 15.1.1
 
-  pluralize@8.0.0: {}
-
   pluralizers@0.1.7: {}
 
   png-chunks-extract@1.0.0:
     dependencies:
       crc-32: 0.3.0
 
-  png-to-ico@3.0.1:
+  png-to-ico@3.0.2:
     dependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
       minimist: 1.2.8
       pngjs: 7.0.0
 
@@ -24612,498 +24539,486 @@ snapshots:
 
   possible-typed-array-names@1.1.0: {}
 
-  postcss-attribute-case-insensitive@8.0.0(postcss@8.5.14):
+  postcss-attribute-case-insensitive@8.0.0(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
-      postcss-selector-parser: 7.1.1
+      postcss: 8.5.25
+      postcss-selector-parser: 7.1.4
 
-  postcss-calc@10.1.1(postcss@8.5.14):
+  postcss-calc@10.1.1(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
-      postcss-selector-parser: 7.1.1
+      postcss: 8.5.25
+      postcss-selector-parser: 7.1.4
       postcss-value-parser: 4.2.0
 
-  postcss-clamp@4.1.0(postcss@8.5.14):
+  postcss-clamp@4.1.0(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  postcss-color-functional-notation@8.0.3(postcss@8.5.14):
+  postcss-color-functional-notation@8.0.6(postcss@8.5.25):
     dependencies:
-      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.9(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.14)
-      '@csstools/utilities': 3.0.0(postcss@8.5.14)
-      postcss: 8.5.14
+      '@csstools/postcss-progressive-custom-properties': 5.1.1(postcss@8.5.25)
+      '@csstools/utilities': 3.0.0(postcss@8.5.25)
+      postcss: 8.5.25
 
-  postcss-color-hex-alpha@11.0.0(postcss@8.5.14):
+  postcss-color-hex-alpha@11.0.0(postcss@8.5.25):
     dependencies:
-      '@csstools/utilities': 3.0.0(postcss@8.5.14)
-      postcss: 8.5.14
+      '@csstools/utilities': 3.0.0(postcss@8.5.25)
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  postcss-color-rebeccapurple@11.0.0(postcss@8.5.14):
+  postcss-color-rebeccapurple@11.0.0(postcss@8.5.25):
     dependencies:
-      '@csstools/utilities': 3.0.0(postcss@8.5.14)
-      postcss: 8.5.14
+      '@csstools/utilities': 3.0.0(postcss@8.5.25)
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  postcss-colormin@7.0.5(postcss@8.5.14):
+  postcss-colormin@7.0.5(postcss@8.5.25):
     dependencies:
-      browserslist: 4.28.2
+      browserslist: 4.28.7
       caniuse-api: 3.0.0
       colord: 2.9.3
-      postcss: 8.5.14
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  postcss-convert-values@7.0.8(postcss@8.5.14):
+  postcss-convert-values@7.0.8(postcss@8.5.25):
     dependencies:
-      browserslist: 4.28.2
-      postcss: 8.5.14
+      browserslist: 4.28.7
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  postcss-custom-media@12.0.1(postcss@8.5.14):
+  postcss-custom-media@12.0.1(postcss@8.5.25):
     dependencies:
-      '@csstools/cascade-layer-name-parser': 3.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/cascade-layer-name-parser': 3.0.0(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
-      postcss: 8.5.14
+      '@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
+      postcss: 8.5.25
 
-  postcss-custom-properties@15.0.1(postcss@8.5.14):
+  postcss-custom-properties@15.0.1(postcss@8.5.25):
     dependencies:
-      '@csstools/cascade-layer-name-parser': 3.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/cascade-layer-name-parser': 3.0.0(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/utilities': 3.0.0(postcss@8.5.14)
-      postcss: 8.5.14
+      '@csstools/utilities': 3.0.0(postcss@8.5.25)
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  postcss-custom-selectors@9.0.1(postcss@8.5.14):
+  postcss-custom-selectors@9.0.1(postcss@8.5.25):
     dependencies:
-      '@csstools/cascade-layer-name-parser': 3.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/cascade-layer-name-parser': 3.0.0(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      postcss: 8.5.14
-      postcss-selector-parser: 7.1.1
+      postcss: 8.5.25
+      postcss-selector-parser: 7.1.4
 
-  postcss-dir-pseudo-class@10.0.0(postcss@8.5.14):
+  postcss-dir-pseudo-class@10.0.0(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
-      postcss-selector-parser: 7.1.1
+      postcss: 8.5.25
+      postcss-selector-parser: 7.1.4
 
-  postcss-discard-comments@7.0.5(postcss@8.5.14):
+  postcss-discard-comments@7.0.5(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
-      postcss-selector-parser: 7.1.1
+      postcss: 8.5.25
+      postcss-selector-parser: 7.1.4
 
-  postcss-discard-duplicates@7.0.2(postcss@8.5.14):
+  postcss-discard-duplicates@7.0.2(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  postcss-discard-empty@7.0.1(postcss@8.5.14):
+  postcss-discard-empty@7.0.1(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  postcss-discard-overridden@7.0.1(postcss@8.5.14):
+  postcss-discard-overridden@7.0.1(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  postcss-double-position-gradients@7.0.0(postcss@8.5.14):
+  postcss-double-position-gradients@7.0.2(postcss@8.5.25):
     dependencies:
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.14)
-      '@csstools/utilities': 3.0.0(postcss@8.5.14)
-      postcss: 8.5.14
+      '@csstools/postcss-progressive-custom-properties': 5.1.1(postcss@8.5.25)
+      '@csstools/utilities': 3.0.0(postcss@8.5.25)
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  postcss-easings@4.0.0(postcss@8.5.14):
+  postcss-easings@4.0.0(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  postcss-focus-visible@11.0.0(postcss@8.5.14):
+  postcss-focus-visible@11.0.0(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
-      postcss-selector-parser: 7.1.1
+      postcss: 8.5.25
+      postcss-selector-parser: 7.1.4
 
-  postcss-focus-within@10.0.0(postcss@8.5.14):
+  postcss-focus-within@10.0.0(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
-      postcss-selector-parser: 7.1.1
+      postcss: 8.5.25
+      postcss-selector-parser: 7.1.4
 
-  postcss-font-variant@5.0.0(postcss@8.5.14):
+  postcss-font-variant@5.0.0(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  postcss-gap-properties@7.0.0(postcss@8.5.14):
+  postcss-gap-properties@7.0.0(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  postcss-hexrgba@2.1.0(postcss@8.5.14):
+  postcss-hexrgba@2.1.0(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  postcss-image-set-function@8.0.0(postcss@8.5.14):
+  postcss-image-set-function@8.0.0(postcss@8.5.25):
     dependencies:
-      '@csstools/utilities': 3.0.0(postcss@8.5.14)
-      postcss: 8.5.14
+      '@csstools/utilities': 3.0.0(postcss@8.5.25)
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  postcss-import@16.1.1(postcss@8.5.14):
+  postcss-import@16.1.1(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.12
 
-  postcss-js@4.1.0(postcss@8.5.14):
+  postcss-js@4.1.0(postcss@8.5.25):
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  postcss-lab-function@8.0.3(postcss@8.5.14):
+  postcss-lab-function@8.0.6(postcss@8.5.25):
     dependencies:
-      '@csstools/css-color-parser': 4.1.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.9(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.14)
-      '@csstools/utilities': 3.0.0(postcss@8.5.14)
-      postcss: 8.5.14
+      '@csstools/postcss-progressive-custom-properties': 5.1.1(postcss@8.5.25)
+      '@csstools/utilities': 3.0.0(postcss@8.5.25)
+      postcss: 8.5.25
 
-  postcss-loader@8.2.1(postcss@8.5.14)(typescript@6.0.3)(webpack@5.106.2):
+  postcss-loader@8.2.1(@typescript/typescript6@6.0.2)(postcss@8.5.25)(webpack@5.109.2):
     dependencies:
-      cosmiconfig: 9.0.1(typescript@6.0.3)
-      jiti: 2.6.1
-      postcss: 8.5.14
-      semver: 7.7.4
+      cosmiconfig: 9.0.2(@typescript/typescript6@6.0.2)
+      jiti: 2.7.0
+      postcss: 8.5.25
+      semver: 7.8.5
     optionalDependencies:
-      webpack: 5.106.2(webpack-cli@7.0.2)
+      webpack: 5.109.2(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack-cli@7.2.2)
     transitivePeerDependencies:
       - typescript
 
-  postcss-logical@9.0.0(postcss@8.5.14):
+  postcss-logical@9.0.0(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
   postcss-media-query-parser@0.2.3: {}
 
-  postcss-merge-longhand@7.0.5(postcss@8.5.14):
+  postcss-merge-longhand@7.0.5(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
-      stylehacks: 7.0.7(postcss@8.5.14)
+      stylehacks: 7.0.7(postcss@8.5.25)
 
-  postcss-merge-rules@7.0.7(postcss@8.5.14):
+  postcss-merge-rules@7.0.7(postcss@8.5.25):
     dependencies:
-      browserslist: 4.28.2
+      browserslist: 4.28.7
       caniuse-api: 3.0.0
-      cssnano-utils: 5.0.1(postcss@8.5.14)
-      postcss: 8.5.14
-      postcss-selector-parser: 7.1.1
+      cssnano-utils: 5.0.1(postcss@8.5.25)
+      postcss: 8.5.25
+      postcss-selector-parser: 7.1.4
 
-  postcss-minify-font-values@7.0.1(postcss@8.5.14):
+  postcss-minify-font-values@7.0.1(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  postcss-minify-gradients@7.0.1(postcss@8.5.14):
+  postcss-minify-gradients@7.0.1(postcss@8.5.25):
     dependencies:
       colord: 2.9.3
-      cssnano-utils: 5.0.1(postcss@8.5.14)
-      postcss: 8.5.14
+      cssnano-utils: 5.0.1(postcss@8.5.25)
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  postcss-minify-params@7.0.5(postcss@8.5.14):
+  postcss-minify-params@7.0.5(postcss@8.5.25):
     dependencies:
-      browserslist: 4.28.2
-      cssnano-utils: 5.0.1(postcss@8.5.14)
-      postcss: 8.5.14
+      browserslist: 4.28.7
+      cssnano-utils: 5.0.1(postcss@8.5.25)
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  postcss-minify-selectors@7.0.5(postcss@8.5.14):
+  postcss-minify-selectors@7.0.5(postcss@8.5.25):
     dependencies:
       cssesc: 3.0.0
-      postcss: 8.5.14
-      postcss-selector-parser: 7.1.1
+      postcss: 8.5.25
+      postcss-selector-parser: 7.1.4
 
-  postcss-mixins@12.1.2(patch_hash=30fc882486b610a1c252340c87a99f1030c50e698a3c57c837eff7232e29d6d0)(postcss@8.5.14):
+  postcss-mixins@12.1.2(patch_hash=30fc882486b610a1c252340c87a99f1030c50e698a3c57c837eff7232e29d6d0)(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
-      postcss-js: 4.1.0(postcss@8.5.14)
-      postcss-simple-vars: 7.0.1(postcss@8.5.14)
-      sugarss: 5.0.1(postcss@8.5.14)
-      tinyglobby: 0.2.16
+      postcss: 8.5.25
+      postcss-js: 4.1.0(postcss@8.5.25)
+      postcss-simple-vars: 7.0.1(postcss@8.5.25)
+      sugarss: 5.0.1(postcss@8.5.25)
+      tinyglobby: 0.2.17
 
-  postcss-modules-extract-imports@3.1.0(postcss@8.5.14):
+  postcss-modules-extract-imports@3.1.0(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  postcss-modules-local-by-default@4.2.0(postcss@8.5.14):
+  postcss-modules-local-by-default@4.2.0(postcss@8.5.25):
     dependencies:
-      icss-utils: 5.1.0(postcss@8.5.14)
-      postcss: 8.5.14
-      postcss-selector-parser: 7.1.1
+      icss-utils: 5.1.0(postcss@8.5.25)
+      postcss: 8.5.25
+      postcss-selector-parser: 7.1.4
       postcss-value-parser: 4.2.0
 
-  postcss-modules-scope@3.2.1(postcss@8.5.14):
+  postcss-modules-scope@3.2.1(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
-      postcss-selector-parser: 7.1.1
+      postcss: 8.5.25
+      postcss-selector-parser: 7.1.4
 
-  postcss-modules-values@4.0.0(postcss@8.5.14):
+  postcss-modules-values@4.0.0(postcss@8.5.25):
     dependencies:
-      icss-utils: 5.1.0(postcss@8.5.14)
-      postcss: 8.5.14
+      icss-utils: 5.1.0(postcss@8.5.25)
+      postcss: 8.5.25
 
-  postcss-nested@7.0.2(postcss@8.5.14):
+  postcss-nested@8.0.1(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
-      postcss-selector-parser: 7.1.1
+      postcss: 8.5.25
+      postcss-selector-parser: 7.1.4
 
-  postcss-nesting@14.0.0(postcss@8.5.14):
+  postcss-nesting@14.0.0(postcss@8.5.25):
     dependencies:
-      '@csstools/selector-resolve-nested': 4.0.0(postcss-selector-parser@7.1.1)
-      '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.1)
-      postcss: 8.5.14
-      postcss-selector-parser: 7.1.1
+      '@csstools/selector-resolve-nested': 4.0.1(postcss-selector-parser@7.1.4)
+      '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.4)
+      postcss: 8.5.25
+      postcss-selector-parser: 7.1.4
 
-  postcss-normalize-charset@7.0.1(postcss@8.5.14):
+  postcss-normalize-charset@7.0.1(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  postcss-normalize-display-values@7.0.1(postcss@8.5.14):
+  postcss-normalize-display-values@7.0.1(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-positions@7.0.1(postcss@8.5.14):
+  postcss-normalize-positions@7.0.1(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-repeat-style@7.0.1(postcss@8.5.14):
+  postcss-normalize-repeat-style@7.0.1(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-string@7.0.1(postcss@8.5.14):
+  postcss-normalize-string@7.0.1(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-timing-functions@7.0.1(postcss@8.5.14):
+  postcss-normalize-timing-functions@7.0.1(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-unicode@7.0.5(postcss@8.5.14):
+  postcss-normalize-unicode@7.0.5(postcss@8.5.25):
     dependencies:
-      browserslist: 4.28.2
-      postcss: 8.5.14
+      browserslist: 4.28.7
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-url@7.0.1(postcss@8.5.14):
+  postcss-normalize-url@7.0.1(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  postcss-normalize-whitespace@7.0.1(postcss@8.5.14):
+  postcss-normalize-whitespace@7.0.1(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  postcss-opacity-percentage@3.0.0(postcss@8.5.14):
+  postcss-opacity-percentage@3.0.0(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  postcss-ordered-values@7.0.2(postcss@8.5.14):
+  postcss-ordered-values@7.0.2(postcss@8.5.25):
     dependencies:
-      cssnano-utils: 5.0.1(postcss@8.5.14)
-      postcss: 8.5.14
+      cssnano-utils: 5.0.1(postcss@8.5.25)
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  postcss-overflow-shorthand@7.0.0(postcss@8.5.14):
+  postcss-overflow-shorthand@7.0.0(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  postcss-page-break@3.0.4(postcss@8.5.14):
+  postcss-page-break@3.0.4(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  postcss-place@11.0.0(postcss@8.5.14):
+  postcss-place@11.0.0(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  postcss-preset-env@11.2.1(postcss@8.5.14):
+  postcss-preset-env@11.3.2(postcss@8.5.25):
     dependencies:
-      '@csstools/postcss-alpha-function': 2.0.4(postcss@8.5.14)
-      '@csstools/postcss-cascade-layers': 6.0.0(postcss@8.5.14)
-      '@csstools/postcss-color-function': 5.0.3(postcss@8.5.14)
-      '@csstools/postcss-color-function-display-p3-linear': 2.0.3(postcss@8.5.14)
-      '@csstools/postcss-color-mix-function': 4.0.3(postcss@8.5.14)
-      '@csstools/postcss-color-mix-variadic-function-arguments': 2.0.3(postcss@8.5.14)
-      '@csstools/postcss-content-alt-text': 3.0.0(postcss@8.5.14)
-      '@csstools/postcss-contrast-color-function': 3.0.3(postcss@8.5.14)
-      '@csstools/postcss-exponential-functions': 3.0.2(postcss@8.5.14)
-      '@csstools/postcss-font-format-keywords': 5.0.0(postcss@8.5.14)
-      '@csstools/postcss-font-width-property': 1.0.0(postcss@8.5.14)
-      '@csstools/postcss-gamut-mapping': 3.0.3(postcss@8.5.14)
-      '@csstools/postcss-gradients-interpolation-method': 6.0.3(postcss@8.5.14)
-      '@csstools/postcss-hwb-function': 5.0.3(postcss@8.5.14)
-      '@csstools/postcss-ic-unit': 5.0.0(postcss@8.5.14)
-      '@csstools/postcss-initial': 3.0.0(postcss@8.5.14)
-      '@csstools/postcss-is-pseudo-class': 6.0.0(postcss@8.5.14)
-      '@csstools/postcss-light-dark-function': 3.0.0(postcss@8.5.14)
-      '@csstools/postcss-logical-float-and-clear': 4.0.0(postcss@8.5.14)
-      '@csstools/postcss-logical-overflow': 3.0.0(postcss@8.5.14)
-      '@csstools/postcss-logical-overscroll-behavior': 3.0.0(postcss@8.5.14)
-      '@csstools/postcss-logical-resize': 4.0.0(postcss@8.5.14)
-      '@csstools/postcss-logical-viewport-units': 4.0.0(postcss@8.5.14)
-      '@csstools/postcss-media-minmax': 3.0.2(postcss@8.5.14)
-      '@csstools/postcss-media-queries-aspect-ratio-number-values': 4.0.0(postcss@8.5.14)
-      '@csstools/postcss-mixins': 1.0.0(postcss@8.5.14)
-      '@csstools/postcss-nested-calc': 5.0.0(postcss@8.5.14)
-      '@csstools/postcss-normalize-display-values': 5.0.1(postcss@8.5.14)
-      '@csstools/postcss-oklab-function': 5.0.3(postcss@8.5.14)
-      '@csstools/postcss-position-area-property': 2.0.0(postcss@8.5.14)
-      '@csstools/postcss-progressive-custom-properties': 5.0.0(postcss@8.5.14)
-      '@csstools/postcss-property-rule-prelude-list': 2.0.0(postcss@8.5.14)
-      '@csstools/postcss-random-function': 3.0.2(postcss@8.5.14)
-      '@csstools/postcss-relative-color-syntax': 4.0.3(postcss@8.5.14)
-      '@csstools/postcss-scope-pseudo-class': 5.0.0(postcss@8.5.14)
-      '@csstools/postcss-sign-functions': 2.0.2(postcss@8.5.14)
-      '@csstools/postcss-stepped-value-functions': 5.0.2(postcss@8.5.14)
-      '@csstools/postcss-syntax-descriptor-syntax-production': 2.0.0(postcss@8.5.14)
-      '@csstools/postcss-system-ui-font-family': 2.0.0(postcss@8.5.14)
-      '@csstools/postcss-text-decoration-shorthand': 5.0.3(postcss@8.5.14)
-      '@csstools/postcss-trigonometric-functions': 5.0.2(postcss@8.5.14)
-      '@csstools/postcss-unset-value': 5.0.0(postcss@8.5.14)
-      autoprefixer: 10.4.24(postcss@8.5.14)
-      browserslist: 4.28.2
-      css-blank-pseudo: 8.0.1(postcss@8.5.14)
-      css-has-pseudo: 8.0.0(postcss@8.5.14)
-      css-prefers-color-scheme: 11.0.0(postcss@8.5.14)
-      cssdb: 8.8.0
-      postcss: 8.5.14
-      postcss-attribute-case-insensitive: 8.0.0(postcss@8.5.14)
-      postcss-clamp: 4.1.0(postcss@8.5.14)
-      postcss-color-functional-notation: 8.0.3(postcss@8.5.14)
-      postcss-color-hex-alpha: 11.0.0(postcss@8.5.14)
-      postcss-color-rebeccapurple: 11.0.0(postcss@8.5.14)
-      postcss-custom-media: 12.0.1(postcss@8.5.14)
-      postcss-custom-properties: 15.0.1(postcss@8.5.14)
-      postcss-custom-selectors: 9.0.1(postcss@8.5.14)
-      postcss-dir-pseudo-class: 10.0.0(postcss@8.5.14)
-      postcss-double-position-gradients: 7.0.0(postcss@8.5.14)
-      postcss-focus-visible: 11.0.0(postcss@8.5.14)
-      postcss-focus-within: 10.0.0(postcss@8.5.14)
-      postcss-font-variant: 5.0.0(postcss@8.5.14)
-      postcss-gap-properties: 7.0.0(postcss@8.5.14)
-      postcss-image-set-function: 8.0.0(postcss@8.5.14)
-      postcss-lab-function: 8.0.3(postcss@8.5.14)
-      postcss-logical: 9.0.0(postcss@8.5.14)
-      postcss-nesting: 14.0.0(postcss@8.5.14)
-      postcss-opacity-percentage: 3.0.0(postcss@8.5.14)
-      postcss-overflow-shorthand: 7.0.0(postcss@8.5.14)
-      postcss-page-break: 3.0.4(postcss@8.5.14)
-      postcss-place: 11.0.0(postcss@8.5.14)
-      postcss-pseudo-class-any-link: 11.0.0(postcss@8.5.14)
-      postcss-replace-overflow-wrap: 4.0.0(postcss@8.5.14)
-      postcss-selector-not: 9.0.0(postcss@8.5.14)
+      '@csstools/postcss-alpha-function': 2.0.7(postcss@8.5.25)
+      '@csstools/postcss-cascade-layers': 6.0.0(postcss@8.5.25)
+      '@csstools/postcss-color-function': 5.0.6(postcss@8.5.25)
+      '@csstools/postcss-color-function-display-p3-linear': 2.0.6(postcss@8.5.25)
+      '@csstools/postcss-color-mix-function': 4.0.6(postcss@8.5.25)
+      '@csstools/postcss-color-mix-variadic-function-arguments': 2.0.6(postcss@8.5.25)
+      '@csstools/postcss-container-rule-prelude-list': 1.0.1(postcss@8.5.25)
+      '@csstools/postcss-content-alt-text': 3.0.2(postcss@8.5.25)
+      '@csstools/postcss-contrast-color-function': 3.0.6(postcss@8.5.25)
+      '@csstools/postcss-exponential-functions': 3.0.3(postcss@8.5.25)
+      '@csstools/postcss-font-format-keywords': 5.0.0(postcss@8.5.25)
+      '@csstools/postcss-font-width-property': 1.0.0(postcss@8.5.25)
+      '@csstools/postcss-gamut-mapping': 3.0.6(postcss@8.5.25)
+      '@csstools/postcss-gradients-interpolation-method': 6.0.6(postcss@8.5.25)
+      '@csstools/postcss-hwb-function': 5.0.6(postcss@8.5.25)
+      '@csstools/postcss-ic-unit': 5.0.2(postcss@8.5.25)
+      '@csstools/postcss-image-function': 1.0.1(postcss@8.5.25)
+      '@csstools/postcss-initial': 3.0.0(postcss@8.5.25)
+      '@csstools/postcss-is-pseudo-class': 6.0.0(postcss@8.5.25)
+      '@csstools/postcss-light-dark-function': 3.0.2(postcss@8.5.25)
+      '@csstools/postcss-logical-float-and-clear': 4.0.0(postcss@8.5.25)
+      '@csstools/postcss-logical-overflow': 3.0.0(postcss@8.5.25)
+      '@csstools/postcss-logical-overscroll-behavior': 3.0.0(postcss@8.5.25)
+      '@csstools/postcss-logical-resize': 4.0.0(postcss@8.5.25)
+      '@csstools/postcss-logical-viewport-units': 4.0.0(postcss@8.5.25)
+      '@csstools/postcss-media-minmax': 3.0.3(postcss@8.5.25)
+      '@csstools/postcss-media-queries-aspect-ratio-number-values': 4.0.0(postcss@8.5.25)
+      '@csstools/postcss-mixins': 1.0.0(postcss@8.5.25)
+      '@csstools/postcss-nested-calc': 5.0.0(postcss@8.5.25)
+      '@csstools/postcss-normalize-display-values': 5.0.1(postcss@8.5.25)
+      '@csstools/postcss-oklab-function': 5.0.6(postcss@8.5.25)
+      '@csstools/postcss-position-area-property': 2.0.0(postcss@8.5.25)
+      '@csstools/postcss-progressive-custom-properties': 5.1.1(postcss@8.5.25)
+      '@csstools/postcss-property-rule-prelude-list': 2.0.0(postcss@8.5.25)
+      '@csstools/postcss-random-function': 3.0.3(postcss@8.5.25)
+      '@csstools/postcss-relative-color-syntax': 4.0.6(postcss@8.5.25)
+      '@csstools/postcss-scope-pseudo-class': 5.0.0(postcss@8.5.25)
+      '@csstools/postcss-sign-functions': 2.0.3(postcss@8.5.25)
+      '@csstools/postcss-stepped-value-functions': 5.0.3(postcss@8.5.25)
+      '@csstools/postcss-syntax-descriptor-syntax-production': 2.0.0(postcss@8.5.25)
+      '@csstools/postcss-system-ui-font-family': 2.0.0(postcss@8.5.25)
+      '@csstools/postcss-text-decoration-shorthand': 5.0.4(postcss@8.5.25)
+      '@csstools/postcss-trigonometric-functions': 5.0.3(postcss@8.5.25)
+      '@csstools/postcss-unset-value': 5.0.0(postcss@8.5.25)
+      autoprefixer: 10.5.0(postcss@8.5.25)
+      browserslist: 4.28.7
+      css-blank-pseudo: 8.0.1(postcss@8.5.25)
+      css-has-pseudo: 8.0.0(postcss@8.5.25)
+      css-prefers-color-scheme: 11.0.0(postcss@8.5.25)
+      cssdb: 8.9.0
+      postcss: 8.5.25
+      postcss-attribute-case-insensitive: 8.0.0(postcss@8.5.25)
+      postcss-clamp: 4.1.0(postcss@8.5.25)
+      postcss-color-functional-notation: 8.0.6(postcss@8.5.25)
+      postcss-color-hex-alpha: 11.0.0(postcss@8.5.25)
+      postcss-color-rebeccapurple: 11.0.0(postcss@8.5.25)
+      postcss-custom-media: 12.0.1(postcss@8.5.25)
+      postcss-custom-properties: 15.0.1(postcss@8.5.25)
+      postcss-custom-selectors: 9.0.1(postcss@8.5.25)
+      postcss-dir-pseudo-class: 10.0.0(postcss@8.5.25)
+      postcss-double-position-gradients: 7.0.2(postcss@8.5.25)
+      postcss-focus-visible: 11.0.0(postcss@8.5.25)
+      postcss-focus-within: 10.0.0(postcss@8.5.25)
+      postcss-font-variant: 5.0.0(postcss@8.5.25)
+      postcss-gap-properties: 7.0.0(postcss@8.5.25)
+      postcss-image-set-function: 8.0.0(postcss@8.5.25)
+      postcss-lab-function: 8.0.6(postcss@8.5.25)
+      postcss-logical: 9.0.0(postcss@8.5.25)
+      postcss-nesting: 14.0.0(postcss@8.5.25)
+      postcss-opacity-percentage: 3.0.0(postcss@8.5.25)
+      postcss-overflow-shorthand: 7.0.0(postcss@8.5.25)
+      postcss-page-break: 3.0.4(postcss@8.5.25)
+      postcss-place: 11.0.0(postcss@8.5.25)
+      postcss-pseudo-class-any-link: 11.0.0(postcss@8.5.25)
+      postcss-replace-overflow-wrap: 4.0.0(postcss@8.5.25)
+      postcss-selector-not: 9.0.0(postcss@8.5.25)
 
-  postcss-pseudo-class-any-link@11.0.0(postcss@8.5.14):
+  postcss-pseudo-class-any-link@11.0.0(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
-      postcss-selector-parser: 7.1.1
+      postcss: 8.5.25
+      postcss-selector-parser: 7.1.4
 
-  postcss-reduce-initial@7.0.5(postcss@8.5.14):
+  postcss-reduce-initial@7.0.5(postcss@8.5.25):
     dependencies:
-      browserslist: 4.28.2
+      browserslist: 4.28.7
       caniuse-api: 3.0.0
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  postcss-reduce-transforms@7.0.1(postcss@8.5.14):
+  postcss-reduce-transforms@7.0.1(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
 
-  postcss-replace-overflow-wrap@4.0.0(postcss@8.5.14):
+  postcss-replace-overflow-wrap@4.0.0(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
 
   postcss-resolve-nested-selector@0.1.6: {}
 
-  postcss-safe-parser@7.0.1(postcss@8.5.14):
+  postcss-safe-parser@7.0.1(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  postcss-scss@4.0.9(postcss@8.5.14):
+  postcss-scss@4.0.9(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  postcss-selector-not@9.0.0(postcss@8.5.14):
+  postcss-selector-not@9.0.0(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
-      postcss-selector-parser: 7.1.1
+      postcss: 8.5.25
+      postcss-selector-parser: 7.1.4
 
-  postcss-selector-parser@7.1.1:
+  postcss-selector-parser@7.1.4:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
-  postcss-simple-vars@7.0.1(postcss@8.5.14):
+  postcss-simple-vars@7.0.1(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
 
-  postcss-svgo@7.1.0(postcss@8.5.14):
+  postcss-svgo@7.1.0(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
       postcss-value-parser: 4.2.0
-      svgo: 4.0.1
+      svgo: 4.0.2
 
-  postcss-unique-selectors@7.0.4(postcss@8.5.14):
+  postcss-unique-selectors@7.0.4(postcss@8.5.25):
     dependencies:
-      postcss: 8.5.14
-      postcss-selector-parser: 7.1.1
+      postcss: 8.5.25
+      postcss-selector-parser: 7.1.4
 
   postcss-value-parser@4.2.0: {}
 
-  postcss@8.5.14:
+  postcss@8.5.25:
     dependencies:
-      nanoid: 3.3.11
+      nanoid: 3.3.16
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  postgres-array@2.0.0: {}
-
-  postgres-bytea@1.0.1: {}
-
-  postgres-date@1.0.7: {}
-
-  postgres-interval@1.2.0:
+  posthog-js@1.407.2:
     dependencies:
-      xtend: 4.0.2
-
-  posthog-js@1.372.8:
-    dependencies:
-      '@opentelemetry/api': 1.9.1
-      '@opentelemetry/api-logs': 0.208.0
-      '@opentelemetry/exporter-logs-otlp-http': 0.208.0(@opentelemetry/api@1.9.1)
-      '@opentelemetry/resources': 2.7.1(@opentelemetry/api@1.9.1)
-      '@opentelemetry/sdk-logs': 0.208.0(@opentelemetry/api@1.9.1)
-      '@posthog/core': 1.28.2
-      '@posthog/types': 1.372.8
-      core-js: 3.48.0
-      dompurify: 3.4.0
+      '@posthog/browser-common': 0.2.3
+      '@posthog/core': 1.45.1
+      '@posthog/types': 1.398.0
+      core-js: 3.49.0
+      dompurify: 3.4.12
       fflate: 0.4.8
-      preact: 10.28.3
+      preact: 10.29.3
       query-selector-shadow-dom: 1.0.1
-      web-vitals: 5.1.0
+      web-vitals: 5.3.0
 
   postject@1.0.0-alpha.6:
     dependencies:
@@ -25112,14 +25027,14 @@ snapshots:
 
   potpack@2.1.0: {}
 
-  preact@10.28.3: {}
+  powershell-utils@0.1.0: {}
+
+  preact@10.29.3: {}
 
   prelude-ls@1.2.1: {}
 
   prettier@2.8.8: {}
 
-  prettier@3.8.3: {}
-
   pretty-error@4.0.0:
     dependencies:
       lodash: 4.18.1
@@ -25131,23 +25046,17 @@ snapshots:
       ansi-styles: 5.2.0
       react-is: 17.0.2
 
-  pretty-format@30.3.0:
-    dependencies:
-      '@jest/schemas': 30.0.5
-      ansi-styles: 5.2.0
-      react-is: 19.2.5
-
   pretty-format@30.4.1:
     dependencies:
       '@jest/schemas': 30.4.1
       ansi-styles: 5.2.0
       react-is-18: react-is@18.3.1
-      react-is-19: react-is@19.2.6
-
-  proc-log@5.0.0: {}
+      react-is-19: react-is@19.2.8
 
   proc-log@6.1.0: {}
 
+  proc-log@7.0.0: {}
+
   process-nextick-args@2.0.1: {}
 
   process@0.11.10: {}
@@ -25173,28 +25082,27 @@ snapshots:
 
   properties-file@3.7.0: {}
 
-  properties-reader@3.0.1:
+  properties-reader@3.0.1(supports-color@10.2.2):
     dependencies:
-      '@kwsites/file-exists': 1.1.1
+      '@kwsites/file-exists': 1.1.1(supports-color@10.2.2)
       mkdirp: 3.0.1
     transitivePeerDependencies:
       - supports-color
 
   property-information@7.1.0: {}
 
-  protobufjs@7.5.5:
+  protobufjs@7.6.5:
     dependencies:
       '@protobufjs/aspromise': 1.1.2
       '@protobufjs/base64': 1.1.2
-      '@protobufjs/codegen': 2.0.4
-      '@protobufjs/eventemitter': 1.1.0
-      '@protobufjs/fetch': 1.1.0
+      '@protobufjs/codegen': 2.0.5
+      '@protobufjs/eventemitter': 1.1.1
+      '@protobufjs/fetch': 1.1.1
       '@protobufjs/float': 1.0.2
-      '@protobufjs/inquire': 1.1.0
       '@protobufjs/path': 1.1.2
       '@protobufjs/pool': 1.1.0
-      '@protobufjs/utf8': 1.1.0
-      '@types/node': 18.19.130
+      '@protobufjs/utf8': 1.1.1
+      '@types/node': 25.9.3
       long: 5.3.2
 
   protocol-buffers-schema@3.6.1: {}
@@ -25204,6 +25112,8 @@ snapshots:
       forwarded: 0.2.0
       ipaddr.js: 1.9.1
 
+  proxy-agent-negotiate@1.1.0: {}
+
   proxy-from-env@1.1.0: {}
 
   proxy-from-env@2.1.0: {}
@@ -25246,9 +25156,10 @@ snapshots:
       pngjs: 5.0.0
       yargs: 15.4.1
 
-  qs@6.15.0:
+  qs@6.15.3:
     dependencies:
-      side-channel: 1.1.0
+      es-define-property: 1.0.1
+      side-channel: 1.1.1
 
   quansync@0.2.11: {}
 
@@ -25273,66 +25184,53 @@ snapshots:
       randombytes: 2.1.0
       safe-buffer: 5.2.1
 
-  range-parser@1.2.1: {}
-
-  raw-body@2.5.3:
-    dependencies:
-      bytes: 3.1.2
-      http-errors: 2.0.1
-      iconv-lite: 0.4.24
-      unpipe: 1.0.0
+  range-parser@1.3.0: {}
 
   raw-body@3.0.2:
     dependencies:
       bytes: 3.1.2
       http-errors: 2.0.1
-      iconv-lite: 0.7.2
+      iconv-lite: 0.7.3
       unpipe: 1.0.0
 
-  raw-loader@4.0.2(webpack@5.106.2):
+  re-resizable@6.11.2(react-dom@19.2.8)(react@19.2.8):
     dependencies:
-      loader-utils: 2.0.4
-      schema-utils: 3.3.0
-      webpack: 5.106.2(webpack-cli@7.0.2)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
 
-  re-resizable@6.11.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
+  react-beautiful-dnd@13.1.1(react-dom@19.2.8)(react@19.2.8):
     dependencies:
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
-
-  react-beautiful-dnd@13.1.1(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
-    dependencies:
-      '@babel/runtime': 7.29.2
+      '@babel/runtime': 7.29.7
       css-box-model: 1.2.1
       memoize-one: 5.2.1
       raf-schd: 4.0.3
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
-      react-redux: 7.2.9(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-redux: 7.2.9(react-dom@19.2.8)(react@19.2.8)
       redux: 4.2.1
-      use-memo-one: 1.1.3(react@19.2.6)
+      use-memo-one: 1.1.3(react@19.2.8)
     transitivePeerDependencies:
       - react-native
 
-  react-blurhash@0.3.0(patch_hash=58bc7f075478017ce27bcc252e8509876390db106246bd5b0a7446642cc4b505)(blurhash@2.0.5)(react@19.2.6):
+  react-blurhash@0.3.0(patch_hash=58bc7f075478017ce27bcc252e8509876390db106246bd5b0a7446642cc4b505)(blurhash@2.0.5)(react@19.2.8):
     dependencies:
       blurhash: 2.0.5
-      react: 19.2.6
+      react: 19.2.8
 
-  react-clientside-effect@1.2.8(react@19.2.6):
+  react-clientside-effect@1.2.8(react@19.2.8):
     dependencies:
-      '@babel/runtime': 7.29.2
-      react: 19.2.6
+      '@babel/runtime': 7.29.7
+      react: 19.2.8
 
-  react-docgen-typescript@2.4.0(typescript@6.0.3):
+  react-docgen-typescript@2.4.0(@typescript/typescript6@6.0.2):
     dependencies:
-      typescript: 6.0.3
+      typescript: '@typescript/typescript6@6.0.2'
 
-  react-docgen@8.0.3:
+  react-docgen@8.0.3(supports-color@10.2.2):
     dependencies:
-      '@babel/core': 7.29.0
-      '@babel/traverse': 7.29.0
-      '@babel/types': 7.29.0
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/traverse': 7.29.8(supports-color@10.2.2)
+      '@babel/types': 7.29.8
       '@types/babel__core': 7.20.5
       '@types/babel__traverse': 7.28.0
       '@types/doctrine': 0.0.9
@@ -25343,22 +25241,22 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  react-dom@19.2.6(react@19.2.6):
+  react-dom@19.2.8(react@19.2.8):
     dependencies:
-      react: 19.2.6
+      react: 19.2.8
       scheduler: 0.27.0
 
-  react-focus-lock@2.13.7(@types/react@19.2.14)(react@19.2.6):
+  react-focus-lock@2.13.7(@types/react@19.2.18)(react@19.2.8):
     dependencies:
-      '@babel/runtime': 7.29.2
+      '@babel/runtime': 7.29.7
       focus-lock: 1.3.6
       prop-types: 15.8.1
-      react: 19.2.6
-      react-clientside-effect: 1.2.8(react@19.2.6)
-      use-callback-ref: 1.3.3(@types/react@19.2.14)(react@19.2.6)
-      use-sidecar: 1.1.3(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.8
+      react-clientside-effect: 1.2.8(react@19.2.8)
+      use-callback-ref: 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      use-sidecar: 1.1.3(@types/react@19.2.18)(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
 
   react-is@16.13.1: {}
 
@@ -25366,81 +25264,79 @@ snapshots:
 
   react-is@18.3.1: {}
 
-  react-is@19.2.5: {}
+  react-is@19.2.8: {}
 
-  react-is@19.2.6: {}
-
-  react-merge-refs@3.0.2(react@19.2.6):
+  react-merge-refs@3.0.2(react@19.2.8):
     optionalDependencies:
-      react: 19.2.6
+      react: 19.2.8
 
   react-property@2.0.2: {}
 
-  react-redux@7.2.9(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
+  react-redux@7.2.9(react-dom@19.2.8)(react@19.2.8):
     dependencies:
-      '@babel/runtime': 7.29.2
+      '@babel/runtime': 7.29.7
       '@types/react-redux': 7.1.34
       hoist-non-react-statics: 3.3.2
       loose-envify: 1.4.0
       prop-types: 15.8.1
-      react: 19.2.6
+      react: 19.2.8
       react-is: 17.0.2
     optionalDependencies:
-      react-dom: 19.2.6(react@19.2.6)
+      react-dom: 19.2.8(react@19.2.8)
 
-  react-remove-scroll-bar@2.3.8(@types/react@19.2.14)(react@19.2.6):
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.18)(react@19.2.8):
     dependencies:
-      react: 19.2.6
-      react-style-singleton: 2.2.3(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.8
+      react-style-singleton: 2.2.3(@types/react@19.2.18)(react@19.2.8)
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
 
-  react-remove-scroll@2.7.2(@types/react@19.2.14)(react@19.2.6):
+  react-remove-scroll@2.7.2(@types/react@19.2.18)(react@19.2.8):
     dependencies:
-      react: 19.2.6
-      react-remove-scroll-bar: 2.3.8(@types/react@19.2.14)(react@19.2.6)
-      react-style-singleton: 2.2.3(@types/react@19.2.14)(react@19.2.6)
+      react: 19.2.8
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.18)(react@19.2.8)
+      react-style-singleton: 2.2.3(@types/react@19.2.18)(react@19.2.8)
       tslib: 2.8.1
-      use-callback-ref: 1.3.3(@types/react@19.2.14)(react@19.2.6)
-      use-sidecar: 1.1.3(@types/react@19.2.14)(react@19.2.6)
+      use-callback-ref: 1.3.3(@types/react@19.2.18)(react@19.2.8)
+      use-sidecar: 1.1.3(@types/react@19.2.18)(react@19.2.8)
     optionalDependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
 
-  react-resizable-panels@4.7.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
+  react-resizable-panels@4.12.2(react-dom@19.2.8)(react@19.2.8):
     dependencies:
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
 
   react-string-replace@2.0.1: {}
 
-  react-style-singleton@2.2.3(@types/react@19.2.14)(react@19.2.6):
+  react-style-singleton@2.2.3(@types/react@19.2.18)(react@19.2.8):
     dependencies:
       get-nonce: 1.0.1
-      react: 19.2.6
+      react: 19.2.8
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
 
-  react-transition-group@4.4.5(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
+  react-transition-group@4.4.5(react-dom@19.2.8)(react@19.2.8):
     dependencies:
-      '@babel/runtime': 7.29.2
+      '@babel/runtime': 7.29.7
       dom-helpers: 5.2.1
       loose-envify: 1.4.0
       prop-types: 15.8.1
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
 
-  react-virtuoso@4.18.5(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
+  react-virtuoso@4.18.11(react-dom@19.2.8)(react@19.2.8):
     dependencies:
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
 
-  react@19.2.6: {}
+  react@19.2.8: {}
 
-  read-binary-file-arch@1.0.6:
+  read-binary-file-arch@1.0.6(supports-color@10.2.2):
     dependencies:
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
@@ -25448,19 +25344,6 @@ snapshots:
     dependencies:
       pify: 2.3.0
 
-  read-pkg-up@7.0.1:
-    dependencies:
-      find-up: 4.1.0
-      read-pkg: 5.2.0
-      type-fest: 0.8.1
-
-  read-pkg@5.2.0:
-    dependencies:
-      '@types/normalize-package-data': 2.4.4
-      normalize-package-data: 2.5.0
-      parse-json: 5.2.0
-      type-fest: 0.6.0
-
   readable-stream@2.3.8:
     dependencies:
       core-util-is: 1.0.3
@@ -25489,13 +25372,9 @@ snapshots:
     dependencies:
       minimatch: 5.1.9
 
-  readdirp@3.6.0:
-    dependencies:
-      picomatch: 2.3.2
-
   readdirp@5.0.0: {}
 
-  recast@0.23.11:
+  recast@0.23.12:
     dependencies:
       ast-types: 0.16.1
       esprima: 4.0.1
@@ -25514,23 +25393,12 @@ snapshots:
 
   redux@4.2.1:
     dependencies:
-      '@babel/runtime': 7.29.2
+      '@babel/runtime': 7.29.7
 
   reflect-metadata@0.1.14: {}
 
   reflect-metadata@0.2.2: {}
 
-  reflect.getprototypeof@1.0.10:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.1
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      get-intrinsic: 1.3.0
-      get-proto: 1.0.1
-      which-builtin-type: 1.2.1
-
   regenerate-unicode-properties@10.2.2:
     dependencies:
       regenerate: 1.4.2
@@ -25547,17 +25415,6 @@ snapshots:
     dependencies:
       regex-utilities: 2.3.0
 
-  regexp-tree@0.1.27: {}
-
-  regexp.prototype.flags@1.5.4:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-errors: 1.3.0
-      get-proto: 1.0.1
-      gopd: 1.2.0
-      set-function-name: 2.0.2
-
   regexparam@3.0.0: {}
 
   regexpu-core@6.4.0:
@@ -25571,10 +25428,6 @@ snapshots:
 
   regjsgen@0.8.0: {}
 
-  regjsparser@0.10.0:
-    dependencies:
-      jsesc: 0.5.0
-
   regjsparser@0.13.0:
     dependencies:
       jsesc: 3.1.0
@@ -25593,9 +25446,9 @@ snapshots:
 
   require-from-string@2.0.2: {}
 
-  require-in-the-middle@8.0.1:
+  require-in-the-middle@8.0.1(supports-color@10.2.2):
     dependencies:
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@10.2.2)
       module-details-from-path: 1.0.4
     transitivePeerDependencies:
       - supports-color
@@ -25604,8 +25457,6 @@ snapshots:
 
   requirejs@2.3.8: {}
 
-  requires-port@1.0.0: {}
-
   resedit@1.7.2:
     dependencies:
       pe-library: 0.4.1
@@ -25635,12 +25486,6 @@ snapshots:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
-  resolve@2.0.0-next.5:
-    dependencies:
-      is-core-module: 2.16.2
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-
   responselike@2.0.1:
     dependencies:
       lowercase-keys: 2.0.0
@@ -25650,15 +25495,8 @@ snapshots:
       onetime: 5.1.2
       signal-exit: 3.0.7
 
-  restore-cursor@5.1.0:
-    dependencies:
-      onetime: 7.0.0
-      signal-exit: 4.1.0
-
   retry@0.12.0: {}
 
-  retry@0.13.1: {}
-
   reusify@1.1.0: {}
 
   rfc4648@1.5.4: {}
@@ -25695,36 +25533,35 @@ snapshots:
 
   robust-predicates@3.0.3: {}
 
-  rolldown@1.0.0-rc.17:
+  rolldown@1.2.2:
     dependencies:
-      '@oxc-project/types': 0.127.0
-      '@rolldown/pluginutils': 1.0.0-rc.17
+      '@oxc-project/types': 0.142.0
+      '@rolldown/pluginutils': 1.0.1
     optionalDependencies:
-      '@rolldown/binding-android-arm64': 1.0.0-rc.17
-      '@rolldown/binding-darwin-arm64': 1.0.0-rc.17
-      '@rolldown/binding-darwin-x64': 1.0.0-rc.17
-      '@rolldown/binding-freebsd-x64': 1.0.0-rc.17
-      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-rc.17
-      '@rolldown/binding-linux-arm64-gnu': 1.0.0-rc.17
-      '@rolldown/binding-linux-arm64-musl': 1.0.0-rc.17
-      '@rolldown/binding-linux-ppc64-gnu': 1.0.0-rc.17
-      '@rolldown/binding-linux-s390x-gnu': 1.0.0-rc.17
-      '@rolldown/binding-linux-x64-gnu': 1.0.0-rc.17
-      '@rolldown/binding-linux-x64-musl': 1.0.0-rc.17
-      '@rolldown/binding-openharmony-arm64': 1.0.0-rc.17
-      '@rolldown/binding-wasm32-wasi': 1.0.0-rc.17
-      '@rolldown/binding-win32-arm64-msvc': 1.0.0-rc.17
-      '@rolldown/binding-win32-x64-msvc': 1.0.0-rc.17
+      '@rolldown/binding-android-arm64': 1.2.2
+      '@rolldown/binding-darwin-arm64': 1.2.2
+      '@rolldown/binding-darwin-x64': 1.2.2
+      '@rolldown/binding-freebsd-x64': 1.2.2
+      '@rolldown/binding-linux-arm-gnueabihf': 1.2.2
+      '@rolldown/binding-linux-arm64-gnu': 1.2.2
+      '@rolldown/binding-linux-arm64-musl': 1.2.2
+      '@rolldown/binding-linux-ppc64-gnu': 1.2.2
+      '@rolldown/binding-linux-s390x-gnu': 1.2.2
+      '@rolldown/binding-linux-x64-gnu': 1.2.2
+      '@rolldown/binding-linux-x64-musl': 1.2.2
+      '@rolldown/binding-openharmony-arm64': 1.2.2
+      '@rolldown/binding-win32-arm64-msvc': 1.2.2
+      '@rolldown/binding-win32-x64-msvc': 1.2.2
 
-  rollup-plugin-external-globals@0.13.0(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8)):
+  rollup-plugin-external-globals@0.13.0(rollup@4.60.1):
     dependencies:
-      '@rollup/pluginutils': 5.3.0(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))
+      '@rollup/pluginutils': 5.4.0(rollup@4.60.1)
       estree-walker: 3.0.3
       is-reference: 3.0.3
       magic-string: 0.30.21
-      rollup: 4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8)
+      rollup: 4.60.1
 
-  rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8):
+  rollup@4.60.1:
     dependencies:
       '@types/estree': 1.0.8
     optionalDependencies:
@@ -25762,9 +25599,9 @@ snapshots:
       points-on-curve: 0.2.0
       points-on-path: 0.2.1
 
-  router@2.2.0:
+  router@2.2.0(supports-color@10.2.2):
     dependencies:
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@10.2.2)
       depd: 2.0.0
       is-promise: 4.0.0
       parseurl: 1.3.3
@@ -25774,6 +25611,8 @@ snapshots:
 
   rrweb-cssom@0.8.0: {}
 
+  run-applescript@7.0.0: {}
+
   run-applescript@7.1.0: {}
 
   run-parallel@1.2.0:
@@ -25786,23 +25625,10 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  safe-array-concat@1.1.3:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      get-intrinsic: 1.3.0
-      has-symbols: 1.1.0
-      isarray: 2.0.5
-
   safe-buffer@5.1.2: {}
 
   safe-buffer@5.2.1: {}
 
-  safe-push-apply@1.0.0:
-    dependencies:
-      es-errors: 1.3.0
-      isarray: 2.0.5
-
   safe-regex-test@1.1.0:
     dependencies:
       call-bound: 1.0.4
@@ -25815,14 +25641,15 @@ snapshots:
     dependencies:
       truncate-utf8-bytes: 1.0.2
 
-  sanitize-html@2.17.3:
+  sanitize-html@2.17.6:
     dependencies:
       deepmerge: 4.3.1
       escape-string-regexp: 4.0.0
-      htmlparser2: 10.1.0
+      htmlparser2: 12.0.0
       is-plain-object: 5.0.0
+      launder: 1.7.1
       parse-srcset: 1.0.2
-      postcss: 8.5.14
+      postcss: 8.5.25
 
   sax@1.6.0: {}
 
@@ -25835,15 +25662,15 @@ snapshots:
   schema-utils@3.3.0:
     dependencies:
       '@types/json-schema': 7.0.15
-      ajv: 6.14.0
-      ajv-keywords: 3.5.2(ajv@6.14.0)
+      ajv: 6.15.0
+      ajv-keywords: 3.5.2(ajv@6.15.0)
 
   schema-utils@4.3.3:
     dependencies:
       '@types/json-schema': 7.0.15
-      ajv: 8.18.0
-      ajv-formats: 2.1.1(ajv@8.18.0)
-      ajv-keywords: 5.1.0(ajv@8.18.0)
+      ajv: 8.20.0
+      ajv-formats: 2.1.1(ajv@8.20.0)
+      ajv-keywords: 5.1.0(ajv@8.20.0)
 
   sdp-transform@3.0.0: {}
 
@@ -25851,12 +25678,12 @@ snapshots:
 
   seedrandom@3.0.5: {}
 
-  select-hose@2.0.0: {}
-
   selfsigned@5.5.0:
     dependencies:
       '@peculiar/x509': 1.14.3
-      pkijs: 3.3.3
+      pkijs: 3.4.0
+
+  semifies@1.0.0: {}
 
   semver-compare@1.0.0:
     optional: true
@@ -25867,27 +25694,13 @@ snapshots:
 
   semver@7.7.4: {}
 
-  send@0.19.2:
-    dependencies:
-      debug: 2.6.9
-      depd: 2.0.0
-      destroy: 1.2.0
-      encodeurl: 2.0.0
-      escape-html: 1.0.3
-      etag: 1.8.1
-      fresh: 0.5.2
-      http-errors: 2.0.1
-      mime: 1.6.0
-      ms: 2.1.3
-      on-finished: 2.4.1
-      range-parser: 1.2.1
-      statuses: 2.0.2
-    transitivePeerDependencies:
-      - supports-color
+  semver@7.8.4: {}
 
-  send@1.2.1:
+  semver@7.8.5: {}
+
+  send@1.2.1(supports-color@10.2.2):
     dependencies:
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@10.2.2)
       encodeurl: 2.0.0
       escape-html: 1.0.3
       etag: 1.8.1
@@ -25896,7 +25709,7 @@ snapshots:
       mime-types: 3.0.2
       ms: 2.1.3
       on-finished: 2.4.1
-      range-parser: 1.2.1
+      range-parser: 1.3.0
       statuses: 2.0.2
     transitivePeerDependencies:
       - supports-color
@@ -25908,11 +25721,11 @@ snapshots:
 
   serialize-javascript@7.0.5: {}
 
-  serve-index@1.9.2:
+  serve-index@1.9.2(supports-color@10.2.2):
     dependencies:
       accepts: 1.3.8
       batch: 0.6.1
-      debug: 2.6.9
+      debug: 2.6.9(supports-color@10.2.2)
       escape-html: 1.0.3
       http-errors: 1.8.1
       mime-types: 2.1.35
@@ -25920,21 +25733,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  serve-static@1.16.3:
+  serve-static@2.2.1(supports-color@10.2.2):
     dependencies:
       encodeurl: 2.0.0
       escape-html: 1.0.3
       parseurl: 1.3.3
-      send: 0.19.2
-    transitivePeerDependencies:
-      - supports-color
-
-  serve-static@2.2.1:
-    dependencies:
-      encodeurl: 2.0.0
-      escape-html: 1.0.3
-      parseurl: 1.3.3
-      send: 1.2.1
+      send: 1.2.1(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
@@ -25949,19 +25753,6 @@ snapshots:
       gopd: 1.2.0
       has-property-descriptors: 1.0.2
 
-  set-function-name@2.0.2:
-    dependencies:
-      define-data-property: 1.1.4
-      es-errors: 1.3.0
-      functions-have-names: 1.2.3
-      has-property-descriptors: 1.0.2
-
-  set-proto@1.0.0:
-    dependencies:
-      dunder-proto: 1.0.1
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-
   setimmediate@1.0.5: {}
 
   setprototypeof@1.2.0: {}
@@ -25982,7 +25773,7 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
-  shell-quote@1.8.3: {}
+  shell-quote@1.9.0: {}
 
   shiki@2.5.0:
     dependencies:
@@ -25995,7 +25786,7 @@ snapshots:
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
 
-  side-channel-list@1.0.0:
+  side-channel-list@1.0.1:
     dependencies:
       es-errors: 1.3.0
       object-inspect: 1.13.4
@@ -26015,11 +25806,11 @@ snapshots:
       object-inspect: 1.13.4
       side-channel-map: 1.0.1
 
-  side-channel@1.1.0:
+  side-channel@1.1.1:
     dependencies:
       es-errors: 1.3.0
       object-inspect: 1.13.4
-      side-channel-list: 1.0.0
+      side-channel-list: 1.0.1
       side-channel-map: 1.0.1
       side-channel-weakmap: 1.0.2
 
@@ -26029,20 +25820,21 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
-  sigstore@4.1.0:
+  sigstore@5.0.0(supports-color@10.2.2):
     dependencies:
-      '@sigstore/bundle': 4.0.0
-      '@sigstore/core': 3.2.0
+      '@sigstore/bundle': 5.0.0
+      '@sigstore/core': 4.0.0
       '@sigstore/protobuf-specs': 0.5.0
-      '@sigstore/sign': 4.1.1
-      '@sigstore/tuf': 4.0.2
-      '@sigstore/verify': 3.1.0
+      '@sigstore/sign': 5.0.0(supports-color@10.2.2)
+      '@sigstore/tuf': 5.0.0(supports-color@10.2.2)
+      '@sigstore/verify': 4.0.0
     transitivePeerDependencies:
+      - kerberos
       - supports-color
 
   simple-update-notifier@2.0.0:
     dependencies:
-      semver: 7.7.4
+      semver: 7.8.5
 
   sirv@3.0.2:
     dependencies:
@@ -26054,64 +25846,51 @@ snapshots:
 
   slash@5.1.0: {}
 
-  slice-ansi@3.0.0:
-    dependencies:
-      ansi-styles: 4.3.0
-      astral-regex: 2.0.0
-      is-fullwidth-code-point: 3.0.0
-    optional: true
-
   slice-ansi@4.0.0:
     dependencies:
       ansi-styles: 4.3.0
       astral-regex: 2.0.0
       is-fullwidth-code-point: 3.0.0
 
-  slice-ansi@7.1.2:
-    dependencies:
-      ansi-styles: 6.2.3
-      is-fullwidth-code-point: 5.1.0
-
-  slice-ansi@8.0.0:
-    dependencies:
-      ansi-styles: 6.2.3
-      is-fullwidth-code-point: 5.1.0
-
   smart-buffer@4.2.0: {}
 
   smol-toml@1.6.1: {}
 
+  smol-toml@1.7.1: {}
+
   snake-case@3.0.4:
     dependencies:
       dot-case: 3.0.4
       tslib: 2.8.1
 
-  sockjs@0.3.24:
+  socks-proxy-agent@10.1.0(supports-color@10.2.2):
     dependencies:
-      faye-websocket: 0.11.4
-      uuid: 8.3.2
-      websocket-driver: 0.7.4
+      agent-base: 9.0.0
+      debug: 4.4.3(supports-color@10.2.2)
+      socks: 2.8.7
+    transitivePeerDependencies:
+      - supports-color
 
-  socks-proxy-agent@8.0.5:
+  socks-proxy-agent@8.0.5(supports-color@10.2.2):
     dependencies:
       agent-base: 7.1.4
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@10.2.2)
       socks: 2.8.7
     transitivePeerDependencies:
       - supports-color
 
   socks@2.8.7:
     dependencies:
-      ip-address: 10.1.0
+      ip-address: 10.4.0
       smart-buffer: 4.2.0
 
   source-map-js@1.2.1: {}
 
-  source-map-loader@5.0.0(webpack@5.106.2):
+  source-map-loader@5.0.0(webpack@5.109.2):
     dependencies:
       iconv-lite: 0.6.3
       source-map-js: 1.2.1
-      webpack: 5.106.2(webpack-cli@7.0.2)
+      webpack: 5.109.2(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack-cli@7.2.2)
 
   source-map-support@0.5.13:
     dependencies:
@@ -26132,18 +25911,8 @@ snapshots:
 
   space-separated-tokens@2.0.2: {}
 
-  spdx-correct@3.2.0:
-    dependencies:
-      spdx-expression-parse: 3.0.1
-      spdx-license-ids: 3.0.22
-
   spdx-exceptions@2.5.0: {}
 
-  spdx-expression-parse@3.0.1:
-    dependencies:
-      spdx-exceptions: 2.5.0
-      spdx-license-ids: 3.0.22
-
   spdx-expression-parse@4.0.0:
     dependencies:
       spdx-exceptions: 2.5.0
@@ -26151,27 +25920,6 @@ snapshots:
 
   spdx-license-ids@3.0.22: {}
 
-  spdy-transport@3.0.0:
-    dependencies:
-      debug: 4.4.3
-      detect-node: 2.1.0
-      hpack.js: 2.1.6
-      obuf: 1.1.2
-      readable-stream: 3.6.2
-      wbuf: 1.7.3
-    transitivePeerDependencies:
-      - supports-color
-
-  spdy@4.0.2:
-    dependencies:
-      debug: 4.4.3
-      handle-thing: 2.0.1
-      http-deceiver: 1.2.7
-      select-hose: 2.0.0
-      spdy-transport: 3.0.0
-    transitivePeerDependencies:
-      - supports-color
-
   speakingurl@14.0.1: {}
 
   split-ca@1.0.1: {}
@@ -26191,15 +25939,15 @@ snapshots:
       bcrypt-pbkdf: 1.0.2
     optionalDependencies:
       cpu-features: 0.0.10
-      nan: 2.26.2
+      nan: 2.28.0
 
   ssim.js@3.5.0: {}
 
-  ssri@12.0.0:
+  ssri@13.0.1:
     dependencies:
       minipass: 7.1.3
 
-  ssri@13.0.1:
+  ssri@14.0.0:
     dependencies:
       minipass: 7.1.3
 
@@ -26219,55 +25967,52 @@ snapshots:
 
   std-env@4.1.0: {}
 
-  stop-iteration-iterator@1.1.0:
-    dependencies:
-      es-errors: 1.3.0
-      internal-slot: 1.1.0
-
-  storybook-addon-vis@4.2.2(@storybook/addon-vitest@10.3.6(@vitest/browser-playwright@4.1.5)(@vitest/browser@4.1.5)(@vitest/runner@4.1.5)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vitest@4.1.5))(@vitest/browser-playwright@4.1.5)(@vitest/browser@4.1.5)(babel-plugin-macros@3.1.0)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(typescript@6.0.3)(vitest@4.1.5):
+  storybook-addon-vis@4.2.3(@storybook/addon-vitest@10.5.5)(@typescript/typescript6@6.0.2)(@vitest/browser-playwright@4.1.10)(@vitest/browser@4.1.10)(babel-plugin-macros@3.1.0)(react@19.2.8)(storybook@10.5.5)(vitest@4.1.10):
     dependencies:
       '@repobuddy/test': 1.0.1
-      '@storybook/addon-vitest': 10.3.6(@vitest/browser-playwright@4.1.5)(@vitest/browser@4.1.5)(@vitest/runner@4.1.5)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(vitest@4.1.5)
-      '@storybook/icons': 2.0.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      '@vitest/browser': 4.1.5(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(vitest@4.1.5)
+      '@storybook/addon-vitest': 10.5.5(@vitest/browser-playwright@4.1.10)(@vitest/browser@4.1.10)(@vitest/runner@4.1.10)(react@19.2.8)(storybook@10.5.5)(vitest@4.1.10)
+      '@storybook/icons': 2.1.0(react@19.2.8)
+      '@vitest/browser': 4.1.10(vite@8.2.0)(vitest@4.1.10)
       glob: 13.0.6
       is-ci: 4.1.0
       memoize: 11.0.0
       pathe: 2.0.3
-      storybook: 10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      type-plus: 8.0.0-beta.8(typescript@6.0.3)
-      vitest: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.5)(@vitest/coverage-v8@4.1.5)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))
-      vitest-plugin-vis: 5.1.0(@vitest/browser-playwright@4.1.5)(@vitest/browser@4.1.5)(babel-plugin-macros@3.1.0)(typescript@6.0.3)(vitest@4.1.5)
+      storybook: 10.5.5(@types/react@19.2.18)(prettier@2.8.8)(react@19.2.8)
+      type-plus: 8.0.0-beta.8(@typescript/typescript6@6.0.2)
+      vitest: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(happy-dom@20.11.1)(jsdom@26.1.0)(vite@8.2.0)
+      vitest-plugin-vis: 5.1.1(@typescript/typescript6@6.0.2)(@vitest/browser-playwright@4.1.10)(@vitest/browser@4.1.10)(babel-plugin-macros@3.1.0)(vitest@4.1.10)
     transitivePeerDependencies:
       - '@vitest/browser-playwright'
       - '@vitest/browser-webdriverio'
       - babel-plugin-macros
       - react
-      - react-dom
       - typescript
 
-  storybook@10.3.6(@testing-library/dom@10.4.1)(prettier@3.8.3)(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
+  storybook@10.5.5(@types/react@19.2.18)(prettier@2.8.8)(react@19.2.8):
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/icons': 2.0.2(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
+      '@storybook/icons': 2.1.0(react@19.2.8)
+      '@testing-library/dom': 10.4.1
       '@testing-library/jest-dom': 6.9.1
       '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.1)
       '@vitest/expect': 3.2.4
       '@vitest/spy': 3.2.4
       '@webcontainer/env': 1.1.1
       esbuild: 0.27.4
+      jsonc-parser: 3.3.1
       open: 10.2.0
-      recast: 0.23.11
-      semver: 7.7.4
-      use-sync-external-store: 1.6.0(react@19.2.6)
-      ws: 8.20.0
+      oxc-parser: 0.127.0
+      oxc-resolver: 11.24.2
+      recast: 0.23.12
+      semver: 7.8.5
+      use-sync-external-store: 1.6.0(react@19.2.8)
+      ws: 8.21.1
     optionalDependencies:
-      prettier: 3.8.3
+      '@types/react': 19.2.18
+      prettier: 2.8.8
     transitivePeerDependencies:
-      - '@testing-library/dom'
       - bufferutil
       - react
-      - react-dom
       - utf-8-validate
 
   stream-browserify@3.0.0:
@@ -26282,7 +26027,7 @@ snapshots:
       readable-stream: 3.6.2
       xtend: 4.0.2
 
-  streamx@2.25.0:
+  streamx@2.28.0:
     dependencies:
       events-universal: 1.0.1
       fast-fifo: 1.3.2
@@ -26310,67 +26055,11 @@ snapshots:
       emoji-regex: 9.2.2
       strip-ansi: 7.2.0
 
-  string-width@7.2.0:
-    dependencies:
-      emoji-regex: 10.6.0
-      get-east-asian-width: 1.6.0
-      strip-ansi: 7.2.0
-
-  string-width@8.2.1:
+  string-width@8.2.2:
     dependencies:
       get-east-asian-width: 1.6.0
       strip-ansi: 7.2.0
 
-  string.prototype.includes@2.0.1:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-abstract: 1.24.1
-
-  string.prototype.matchall@4.0.12:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-abstract: 1.24.1
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      get-intrinsic: 1.3.0
-      gopd: 1.2.0
-      has-symbols: 1.1.0
-      internal-slot: 1.1.0
-      regexp.prototype.flags: 1.5.4
-      set-function-name: 2.0.2
-      side-channel: 1.1.0
-
-  string.prototype.repeat@1.0.0:
-    dependencies:
-      define-properties: 1.2.1
-      es-abstract: 1.24.1
-
-  string.prototype.trim@1.2.10:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-data-property: 1.1.4
-      define-properties: 1.2.1
-      es-abstract: 1.24.1
-      es-object-atoms: 1.1.1
-      has-property-descriptors: 1.0.2
-
-  string.prototype.trimend@1.0.9:
-    dependencies:
-      call-bind: 1.0.8
-      call-bound: 1.0.4
-      define-properties: 1.2.1
-      es-object-atoms: 1.1.1
-
-  string.prototype.trimstart@1.0.8:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-      es-object-atoms: 1.1.1
-
   string_decoder@1.1.1:
     dependencies:
       safe-buffer: 5.1.2
@@ -26414,82 +26103,93 @@ snapshots:
 
   stubborn-utils@1.0.2: {}
 
-  style-to-js@1.1.21:
+  style-to-js@2.0.2:
     dependencies:
-      style-to-object: 1.0.14
+      style-to-object: 2.0.2
 
-  style-to-object@1.0.14:
+  style-to-object@2.0.2:
     dependencies:
-      inline-style-parser: 0.2.7
+      inline-style-parser: 0.2.9
 
-  stylehacks@7.0.7(postcss@8.5.14):
+  styled-components@6.4.4(react-dom@19.2.8)(react@19.2.8):
     dependencies:
-      browserslist: 4.28.2
-      postcss: 8.5.14
-      postcss-selector-parser: 7.1.1
+      '@emotion/is-prop-valid': 1.4.0
+      csstype: 3.2.3
+      react: 19.2.8
+      stylis: 4.3.6
+    optionalDependencies:
+      react-dom: 19.2.8(react@19.2.8)
 
-  stylelint-config-recommended@18.0.0(stylelint@17.11.0(typescript@6.0.3)):
+  stylehacks@7.0.7(postcss@8.5.25):
     dependencies:
-      stylelint: 17.11.0(typescript@6.0.3)
+      browserslist: 4.28.7
+      postcss: 8.5.25
+      postcss-selector-parser: 7.1.4
 
-  stylelint-config-standard@40.0.0(stylelint@17.11.0(typescript@6.0.3)):
+  stylelint-config-recommended@18.0.0(stylelint@17.14.1):
     dependencies:
-      stylelint: 17.11.0(typescript@6.0.3)
-      stylelint-config-recommended: 18.0.0(stylelint@17.11.0(typescript@6.0.3))
+      stylelint: 17.14.1(@typescript/typescript6@6.0.2)(supports-color@10.2.2)
 
-  stylelint-scss@7.0.0(stylelint@17.11.0(typescript@6.0.3)):
+  stylelint-config-standard@40.0.0(stylelint@17.14.1):
     dependencies:
+      stylelint: 17.14.1(@typescript/typescript6@6.0.2)(supports-color@10.2.2)
+      stylelint-config-recommended: 18.0.0(stylelint@17.14.1)
+
+  stylelint-scss@7.2.0(stylelint@17.14.1):
+    dependencies:
+      '@csstools/css-calc': 3.3.0(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-syntax-patches-for-csstree': 1.1.7(css-tree@3.2.1)
+      '@csstools/css-tokenizer': 4.0.0
       css-tree: 3.2.1
       is-plain-object: 5.0.0
       known-css-properties: 0.37.0
-      mdn-data: 2.27.1
       postcss-media-query-parser: 0.2.3
       postcss-resolve-nested-selector: 0.1.6
-      postcss-selector-parser: 7.1.1
+      postcss-selector-parser: 7.1.4
       postcss-value-parser: 4.2.0
-      stylelint: 17.11.0(typescript@6.0.3)
+      stylelint: 17.14.1(@typescript/typescript6@6.0.2)(supports-color@10.2.2)
 
-  stylelint-value-no-unknown-custom-properties@6.1.1(stylelint@17.11.0(typescript@6.0.3)):
+  stylelint-value-no-unknown-custom-properties@6.1.1(stylelint@17.14.1):
     dependencies:
       postcss-value-parser: 4.2.0
       resolve: 1.22.12
-      stylelint: 17.11.0(typescript@6.0.3)
+      stylelint: 17.14.1(@typescript/typescript6@6.0.2)(supports-color@10.2.2)
 
-  stylelint@17.11.0(typescript@6.0.3):
+  stylelint@17.14.1(@typescript/typescript6@6.0.2)(supports-color@10.2.2):
     dependencies:
-      '@csstools/css-calc': 3.2.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-calc': 3.3.0(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
       '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
-      '@csstools/css-syntax-patches-for-csstree': 1.1.3(css-tree@3.2.1)
+      '@csstools/css-syntax-patches-for-csstree': 1.1.7(css-tree@3.2.1)
       '@csstools/css-tokenizer': 4.0.0
-      '@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
-      '@csstools/selector-resolve-nested': 4.0.0(postcss-selector-parser@7.1.1)
-      '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.1)
+      '@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0)(@csstools/css-tokenizer@4.0.0)
+      '@csstools/selector-resolve-nested': 4.0.1(postcss-selector-parser@7.1.4)
+      '@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.4)
       colord: 2.9.3
-      cosmiconfig: 9.0.1(typescript@6.0.3)
+      cosmiconfig: 9.0.2(@typescript/typescript6@6.0.2)
       css-functions-list: 3.3.3
       css-tree: 3.2.1
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@10.2.2)
       fast-glob: 3.3.3
       fastest-levenshtein: 1.0.16
-      file-entry-cache: 11.1.3
+      file-entry-cache: 11.1.5
       global-modules: 2.0.0
-      globby: 16.2.0
+      globby: 16.2.2
       globjoin: 0.1.4
       html-tags: 5.1.0
-      ignore: 7.0.5
+      ignore: 7.0.6
       import-meta-resolve: 4.2.0
-      is-plain-object: 5.0.0
       mathml-tag-names: 4.0.0
       meow: 14.1.0
       micromatch: 4.0.8
       normalize-path: 3.0.0
       picocolors: 1.1.1
-      postcss: 8.5.14
-      postcss-safe-parser: 7.0.1(postcss@8.5.14)
-      postcss-selector-parser: 7.1.1
+      postcss: 8.5.25
+      postcss-safe-parser: 7.0.1(postcss@8.5.25)
+      postcss-selector-parser: 7.1.4
       postcss-value-parser: 4.2.0
-      string-width: 8.2.1
-      supports-hyperlinks: 4.4.0
+      string-width: 8.2.2
+      supports-hyperlinks: 4.5.0
       svg-tags: 1.0.0
       table: 6.9.0
       write-file-atomic: 7.0.1
@@ -26499,13 +26199,15 @@ snapshots:
 
   stylis@4.3.6: {}
 
-  sugarss@5.0.1(postcss@8.5.14):
-    dependencies:
-      postcss: 8.5.14
+  stylis@4.4.0: {}
 
-  sumchecker@3.0.1:
+  sugarss@5.0.1(postcss@8.5.25):
     dependencies:
-      debug: 4.4.3
+      postcss: 8.5.25
+
+  sumchecker@3.0.1(supports-color@10.2.2):
+    dependencies:
+      debug: 4.4.3(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
@@ -26533,7 +26235,7 @@ snapshots:
     dependencies:
       has-flag: 4.0.0
 
-  supports-hyperlinks@4.4.0:
+  supports-hyperlinks@4.5.0:
     dependencies:
       has-flag: 5.0.1
       supports-color: 10.2.2
@@ -26544,7 +26246,7 @@ snapshots:
 
   svg-tags@1.0.0: {}
 
-  svgo@3.3.3:
+  svgo@3.3.4:
     dependencies:
       commander: 7.2.0
       css-select: 5.2.2
@@ -26554,7 +26256,7 @@ snapshots:
       picocolors: 1.1.1
       sax: 1.6.0
 
-  svgo@4.0.1:
+  svgo@4.0.2:
     dependencies:
       commander: 11.1.0
       css-select: 5.2.2
@@ -26574,7 +26276,7 @@ snapshots:
 
   table@6.9.0:
     dependencies:
-      ajv: 8.18.0
+      ajv: 8.20.0
       lodash.truncate: 4.4.2
       slice-ansi: 4.0.0
       string-width: 4.2.3
@@ -26582,22 +26284,22 @@ snapshots:
 
   tagged-tag@1.0.0: {}
 
-  tapable@2.3.2: {}
+  tapable@2.3.3: {}
 
-  tar-fs@2.1.4:
+  tar-fs@2.1.5:
     dependencies:
       chownr: 1.1.4
       mkdirp-classic: 0.5.3
       pump: 3.0.4
       tar-stream: 2.2.0
 
-  tar-fs@3.1.2:
+  tar-fs@3.1.3:
     dependencies:
       pump: 3.0.4
-      tar-stream: 3.1.8
+      tar-stream: 3.2.0
     optionalDependencies:
-      bare-fs: 4.7.0
-      bare-path: 3.0.0
+      bare-fs: 4.7.3
+      bare-path: 3.0.1
     transitivePeerDependencies:
       - bare-abort-controller
       - bare-buffer
@@ -26613,18 +26315,18 @@ snapshots:
       inherits: 2.0.4
       readable-stream: 3.6.2
 
-  tar-stream@3.1.8:
+  tar-stream@3.2.0:
     dependencies:
-      b4a: 1.8.0
-      bare-fs: 4.7.0
+      b4a: 1.8.1
+      bare-fs: 4.7.3
       fast-fifo: 1.3.2
-      streamx: 2.25.0
+      streamx: 2.28.0
     transitivePeerDependencies:
       - bare-abort-controller
       - bare-buffer
       - react-native-b4a
 
-  tar@7.5.13:
+  tar@7.5.22:
     dependencies:
       '@isaacs/fs-minipass': 4.0.1
       chownr: 3.0.0
@@ -26634,7 +26336,7 @@ snapshots:
 
   teex@1.0.1:
     dependencies:
-      streamx: 2.25.0
+      streamx: 2.28.0
     transitivePeerDependencies:
       - bare-abort-controller
       - react-native-b4a
@@ -26649,41 +26351,42 @@ snapshots:
       mkdirp: 0.5.6
       rimraf: 2.6.3
 
-  temporal-polyfill@0.3.2:
+  temporal-polyfill@1.0.1:
     dependencies:
-      temporal-spec: 0.3.1
+      temporal-spec: 1.0.0
+      temporal-utils: 1.0.1
 
-  temporal-spec@0.3.1: {}
+  temporal-spec@1.0.0: {}
 
-  terser-webpack-plugin@5.5.0(esbuild@0.27.4)(webpack@5.106.2(esbuild@0.27.4)):
+  temporal-utils@1.0.1: {}
+
+  terser-webpack-plugin@5.6.1(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack@5.109.2):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
       jest-worker: 27.5.1
       schema-utils: 4.3.3
-      terser: 5.47.1
-      webpack: 5.106.2(esbuild@0.27.4)
+      terser: 5.49.0
+      webpack: 5.109.2(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack-cli@7.2.2)
     optionalDependencies:
+      clean-css: 5.3.3
+      cssnano: 7.1.2(postcss@8.5.25)
+      csso: 5.0.5
       esbuild: 0.27.4
-    optional: true
+      html-minifier-terser: 6.1.0
+      lightningcss: 1.33.0
+      postcss: 8.5.25
+      uglify-js: 3.19.3
 
-  terser-webpack-plugin@5.5.0(webpack@5.106.2):
-    dependencies:
-      '@jridgewell/trace-mapping': 0.3.31
-      jest-worker: 27.5.1
-      schema-utils: 4.3.3
-      terser: 5.47.1
-      webpack: 5.106.2(webpack-cli@7.0.2)
-
-  terser@5.47.1:
+  terser@5.49.0:
     dependencies:
       '@jridgewell/source-map': 0.3.11
-      acorn: 8.16.0
+      acorn: 8.18.0
       commander: 2.20.3
       source-map-support: 0.5.21
 
   tersify@3.12.1:
     dependencies:
-      acorn: 8.16.0
+      acorn: 8.18.0
       is-buffer: 2.0.5
       unpartial: 1.0.5
 
@@ -26693,23 +26396,23 @@ snapshots:
       glob: 7.2.3
       minimatch: 3.1.5
 
-  testcontainers@11.14.0:
+  testcontainers@12.0.4(supports-color@10.2.2):
     dependencies:
       '@balena/dockerignore': 1.0.2
       '@types/dockerode': 4.0.1
       archiver: 7.0.1
       async-lock: 1.4.1
       byline: 5.0.0
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@10.2.2)
       docker-compose: 1.4.2
-      dockerode: 4.0.10
-      get-port: 7.2.0
+      dockerode: 5.0.1(supports-color@10.2.2)
+      get-port: 5.1.1
       proper-lockfile: 4.1.2
-      properties-reader: 3.0.1
+      properties-reader: 3.0.1(supports-color@10.2.2)
       ssh-remote-port-forward: 1.0.4
-      tar-fs: 3.1.2
-      tmp: 0.2.5
-      undici: 7.25.0
+      tar-fs: 3.1.3
+      tmp: 0.2.7
+      undici: 8.10.0
     transitivePeerDependencies:
       - bare-abort-controller
       - bare-buffer
@@ -26718,13 +26421,13 @@ snapshots:
 
   text-decoder@1.2.7:
     dependencies:
-      b4a: 1.8.0
+      b4a: 1.8.1
     transitivePeerDependencies:
       - react-native-b4a
 
   text-table@0.2.0: {}
 
-  thingies@2.5.0(tslib@2.8.1):
+  thingies@2.6.0(tslib@2.8.1):
     dependencies:
       tslib: 2.8.1
 
@@ -26746,14 +26449,14 @@ snapshots:
 
   tinybench@2.9.0: {}
 
-  tinyexec@1.1.1: {}
+  tinyexec@1.2.4: {}
 
-  tinyexec@1.1.2: {}
-
-  tinyglobby@0.2.16:
+  tinyglobby@0.2.17:
     dependencies:
-      fdir: 6.5.0(picomatch@4.0.4)
-      picomatch: 4.0.4
+      fdir: 6.5.0(picomatch@4.0.5)
+      picomatch: 4.0.5
+
+  tinypool@2.1.0: {}
 
   tinyqueue@3.0.0: {}
 
@@ -26771,11 +26474,9 @@ snapshots:
 
   tmp-promise@3.0.3:
     dependencies:
-      tmp: 0.2.5
+      tmp: 0.2.7
 
-  tmp@0.2.4: {}
-
-  tmp@0.2.5: {}
+  tmp@0.2.7: {}
 
   tmpl@1.0.5: {}
 
@@ -26807,31 +26508,17 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  tree-kill@1.2.2: {}
-
   trim-lines@3.0.1: {}
 
   truncate-utf8-bytes@1.0.2:
     dependencies:
       utf8-byte-length: 1.0.5
 
-  ts-api-utils@2.5.0(typescript@6.0.3):
+  ts-api-utils@2.5.0(@typescript/typescript6@6.0.2):
     dependencies:
-      typescript: 6.0.3
+      typescript: '@typescript/typescript6@6.0.2'
 
-  ts-declaration-location@1.0.7(typescript@6.0.3):
-    dependencies:
-      picomatch: 4.0.4
-      typescript: 6.0.3
-
-  ts-dedent@2.2.0: {}
-
-  tsconfig-paths@3.15.0:
-    dependencies:
-      '@types/json5': 0.0.29
-      json5: 1.0.2
-      minimist: 1.2.8
-      strip-bom: 3.0.0
+  ts-dedent@2.3.0: {}
 
   tsconfig-paths@4.2.0:
     dependencies:
@@ -26843,25 +26530,17 @@ snapshots:
 
   tslib@2.8.1: {}
 
-  tsx@4.21.0:
-    dependencies:
-      esbuild: 0.27.4
-      get-tsconfig: 4.14.0
-    optionalDependencies:
-      fsevents: 2.3.3
-    optional: true
-
   tsyringe@4.10.0:
     dependencies:
       tslib: 1.14.1
 
   tty-browserify@0.0.1: {}
 
-  tuf-js@4.1.0:
+  tuf-js@6.0.0(supports-color@10.2.2):
     dependencies:
-      '@tufjs/models': 4.1.0
-      debug: 4.4.3
-      make-fetch-happen: 15.0.5
+      '@gar/promise-retry': 1.0.3
+      '@tufjs/models': 5.0.0
+      debug: 4.4.3(supports-color@10.2.2)
     transitivePeerDependencies:
       - supports-color
 
@@ -26882,29 +26561,20 @@ snapshots:
 
   type-fest@0.21.3: {}
 
-  type-fest@0.6.0: {}
-
-  type-fest@0.8.1: {}
-
   type-fest@5.5.0:
     dependencies:
       tagged-tag: 1.0.0
 
-  type-is@1.6.18:
+  type-is@2.1.0:
     dependencies:
-      media-typer: 0.3.0
-      mime-types: 2.1.35
-
-  type-is@2.0.1:
-    dependencies:
-      content-type: 1.0.5
+      content-type: 2.0.0
       media-typer: 1.1.0
       mime-types: 3.0.2
 
-  type-plus@8.0.0-beta.8(typescript@6.0.3):
+  type-plus@8.0.0-beta.8(@typescript/typescript6@6.0.2):
     dependencies:
       tersify: 3.12.1
-      typescript: 6.0.3
+      typescript: '@typescript/typescript6@6.0.2'
       unpartial: 1.0.5
 
   typed-array-buffer@1.0.3:
@@ -26913,54 +26583,48 @@ snapshots:
       es-errors: 1.3.0
       is-typed-array: 1.1.15
 
-  typed-array-byte-length@1.0.3:
+  typedoc-plugin-markdown@4.12.0(typedoc@0.28.20):
     dependencies:
-      call-bind: 1.0.8
-      for-each: 0.3.5
-      gopd: 1.2.0
-      has-proto: 1.2.0
-      is-typed-array: 1.1.15
+      typedoc: 0.28.20(@typescript/typescript6@6.0.2)
 
-  typed-array-byte-offset@1.0.4:
+  typedoc-plugin-missing-exports@4.1.4(typedoc@0.28.20):
     dependencies:
-      available-typed-arrays: 1.0.7
-      call-bind: 1.0.8
-      for-each: 0.3.5
-      gopd: 1.2.0
-      has-proto: 1.2.0
-      is-typed-array: 1.1.15
-      reflect.getprototypeof: 1.0.10
+      typedoc: 0.28.20(@typescript/typescript6@6.0.2)
 
-  typed-array-length@1.0.7:
-    dependencies:
-      call-bind: 1.0.8
-      for-each: 0.3.5
-      gopd: 1.2.0
-      is-typed-array: 1.1.15
-      possible-typed-array-names: 1.1.0
-      reflect.getprototypeof: 1.0.10
-
-  typedoc-plugin-markdown@4.11.0(typedoc@0.28.19(typescript@6.0.3)):
-    dependencies:
-      typedoc: 0.28.19(typescript@6.0.3)
-
-  typedoc-plugin-missing-exports@4.1.3(typedoc@0.28.19(typescript@6.0.3)):
-    dependencies:
-      typedoc: 0.28.19(typescript@6.0.3)
-
-  typedoc@0.28.19(typescript@6.0.3):
+  typedoc@0.28.20(@typescript/typescript6@6.0.2):
     dependencies:
       '@gerrit0/mini-shiki': 3.23.0
       lunr: 2.3.9
-      markdown-it: 14.1.1
-      minimatch: 10.2.5
-      typescript: 6.0.3
-      yaml: 2.8.4
-
-  typescript@5.9.3: {}
+      markdown-it: 14.3.0
+      minimatch: 10.2.6
+      typescript: '@typescript/typescript6@6.0.2'
+      yaml: 2.9.0
 
   typescript@6.0.3: {}
 
+  typescript@7.0.2:
+    optionalDependencies:
+      '@typescript/typescript-aix-ppc64': 7.0.2
+      '@typescript/typescript-darwin-arm64': 7.0.2
+      '@typescript/typescript-darwin-x64': 7.0.2
+      '@typescript/typescript-freebsd-arm64': 7.0.2
+      '@typescript/typescript-freebsd-x64': 7.0.2
+      '@typescript/typescript-linux-arm': 7.0.2
+      '@typescript/typescript-linux-arm64': 7.0.2
+      '@typescript/typescript-linux-loong64': 7.0.2
+      '@typescript/typescript-linux-mips64el': 7.0.2
+      '@typescript/typescript-linux-ppc64': 7.0.2
+      '@typescript/typescript-linux-riscv64': 7.0.2
+      '@typescript/typescript-linux-s390x': 7.0.2
+      '@typescript/typescript-linux-x64': 7.0.2
+      '@typescript/typescript-netbsd-arm64': 7.0.2
+      '@typescript/typescript-netbsd-x64': 7.0.2
+      '@typescript/typescript-openbsd-arm64': 7.0.2
+      '@typescript/typescript-openbsd-x64': 7.0.2
+      '@typescript/typescript-sunos-x64': 7.0.2
+      '@typescript/typescript-win32-arm64': 7.0.2
+      '@typescript/typescript-win32-x64': 7.0.2
+
   ua-parser-js@1.0.40: {}
 
   uc.micro@2.1.0: {}
@@ -26972,22 +26636,18 @@ snapshots:
 
   uint8array-extras@1.5.0: {}
 
-  unbash@3.0.0: {}
-
-  unbox-primitive@1.1.0:
-    dependencies:
-      call-bound: 1.0.4
-      has-bigints: 1.1.0
-      has-symbols: 1.1.0
-      which-boxed-primitive: 1.1.1
+  unbash@4.0.4: {}
 
   underscore@1.13.8: {}
 
-  undici-types@5.26.5: {}
+  undici-types@7.24.6: {}
 
-  undici@6.25.0: {}
+  undici@6.28.0: {}
 
-  undici@7.25.0: {}
+  undici@7.29.0:
+    optional: true
+
+  undici@8.10.0: {}
 
   unhomoglyph@1.0.6: {}
 
@@ -27004,14 +26664,6 @@ snapshots:
 
   unicorn-magic@0.4.0: {}
 
-  unique-filename@4.0.0:
-    dependencies:
-      unique-slug: 5.0.0
-
-  unique-slug@5.0.0:
-    dependencies:
-      imurmurhash: 0.1.4
-
   unist-util-is@6.0.1:
     dependencies:
       '@types/unist': 3.0.3
@@ -27045,56 +26697,60 @@ snapshots:
 
   unpipe@1.0.0: {}
 
-  unplugin-dts@1.0.0(@microsoft/api-extractor@7.58.7(@types/node@18.19.130))(esbuild@0.27.4)(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(typescript@6.0.3)(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(webpack@5.106.2(esbuild@0.27.4)):
+  unplugin-dts@1.0.1(@microsoft/api-extractor@7.58.12)(@typescript/typescript6@6.0.2)(esbuild@0.27.4)(rolldown@1.2.2)(rollup@4.60.1)(supports-color@10.2.2)(vite@8.2.0)(webpack@5.109.2):
     dependencies:
-      '@rollup/pluginutils': 5.3.0(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))
-      '@volar/typescript': 2.4.28
+      '@rollup/pluginutils': 5.4.0(rollup@4.60.1)
+      '@volar/typescript': 2.4.28(@typescript/typescript6@6.0.2)
       compare-versions: 6.1.1
-      debug: 4.4.3
+      debug: 4.4.3(supports-color@10.2.2)
       kolorist: 1.8.0
       local-pkg: 1.1.2
       magic-string: 0.30.21
-      typescript: 6.0.3
+      typescript: '@typescript/typescript6@6.0.2'
       unplugin: 2.3.11
     optionalDependencies:
-      '@microsoft/api-extractor': 7.58.7(@types/node@18.19.130)
+      '@microsoft/api-extractor': 7.58.12(@types/node@25.9.3)
       esbuild: 0.27.4
-      rollup: 4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8)
-      vite: 8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4)
-      webpack: 5.106.2(esbuild@0.27.4)
+      rolldown: 1.2.2
+      rollup: 4.60.1
+      vite: 8.2.0(@types/node@25.9.3)(esbuild@0.27.4)(jiti@2.7.0)(sugarss@5.0.1)(terser@5.49.0)(yaml@2.9.0)
+      webpack: 5.109.2(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack-cli@7.2.2)
     transitivePeerDependencies:
       - supports-color
 
   unplugin@2.3.11:
     dependencies:
       '@jridgewell/remapping': 2.3.5
-      acorn: 8.16.0
-      picomatch: 4.0.4
+      acorn: 8.18.0
+      picomatch: 4.0.5
       webpack-virtual-modules: 0.6.2
 
-  unrs-resolver@1.11.1:
+  unrs-resolver@1.12.2:
     dependencies:
       napi-postinstall: 0.3.4
     optionalDependencies:
-      '@unrs/resolver-binding-android-arm-eabi': 1.11.1
-      '@unrs/resolver-binding-android-arm64': 1.11.1
-      '@unrs/resolver-binding-darwin-arm64': 1.11.1
-      '@unrs/resolver-binding-darwin-x64': 1.11.1
-      '@unrs/resolver-binding-freebsd-x64': 1.11.1
-      '@unrs/resolver-binding-linux-arm-gnueabihf': 1.11.1
-      '@unrs/resolver-binding-linux-arm-musleabihf': 1.11.1
-      '@unrs/resolver-binding-linux-arm64-gnu': 1.11.1
-      '@unrs/resolver-binding-linux-arm64-musl': 1.11.1
-      '@unrs/resolver-binding-linux-ppc64-gnu': 1.11.1
-      '@unrs/resolver-binding-linux-riscv64-gnu': 1.11.1
-      '@unrs/resolver-binding-linux-riscv64-musl': 1.11.1
-      '@unrs/resolver-binding-linux-s390x-gnu': 1.11.1
-      '@unrs/resolver-binding-linux-x64-gnu': 1.11.1
-      '@unrs/resolver-binding-linux-x64-musl': 1.11.1
-      '@unrs/resolver-binding-wasm32-wasi': 1.11.1
-      '@unrs/resolver-binding-win32-arm64-msvc': 1.11.1
-      '@unrs/resolver-binding-win32-ia32-msvc': 1.11.1
-      '@unrs/resolver-binding-win32-x64-msvc': 1.11.1
+      '@unrs/resolver-binding-android-arm-eabi': 1.12.2
+      '@unrs/resolver-binding-android-arm64': 1.12.2
+      '@unrs/resolver-binding-darwin-arm64': 1.12.2
+      '@unrs/resolver-binding-darwin-x64': 1.12.2
+      '@unrs/resolver-binding-freebsd-x64': 1.12.2
+      '@unrs/resolver-binding-linux-arm-gnueabihf': 1.12.2
+      '@unrs/resolver-binding-linux-arm-musleabihf': 1.12.2
+      '@unrs/resolver-binding-linux-arm64-gnu': 1.12.2
+      '@unrs/resolver-binding-linux-arm64-musl': 1.12.2
+      '@unrs/resolver-binding-linux-loong64-gnu': 1.12.2
+      '@unrs/resolver-binding-linux-loong64-musl': 1.12.2
+      '@unrs/resolver-binding-linux-ppc64-gnu': 1.12.2
+      '@unrs/resolver-binding-linux-riscv64-gnu': 1.12.2
+      '@unrs/resolver-binding-linux-riscv64-musl': 1.12.2
+      '@unrs/resolver-binding-linux-s390x-gnu': 1.12.2
+      '@unrs/resolver-binding-linux-x64-gnu': 1.12.2
+      '@unrs/resolver-binding-linux-x64-musl': 1.12.2
+      '@unrs/resolver-binding-openharmony-arm64': 1.12.2
+      '@unrs/resolver-binding-wasm32-wasi': 1.12.2
+      '@unrs/resolver-binding-win32-arm64-msvc': 1.12.2
+      '@unrs/resolver-binding-win32-ia32-msvc': 1.12.2
+      '@unrs/resolver-binding-win32-x64-msvc': 1.12.2
 
   untildify@3.0.3: {}
 
@@ -27104,9 +26760,17 @@ snapshots:
       mkdirp: 0.5.6
       yaku: 0.16.7
 
-  update-browserslist-db@1.2.3(browserslist@4.28.2):
+  unzipper@0.12.3:
     dependencies:
-      browserslist: 4.28.2
+      bluebird: 3.7.2
+      duplexer2: 0.1.4
+      fs-extra: 11.4.0
+      graceful-fs: 4.2.11
+      node-int64: 0.4.0
+
+  update-browserslist-db@1.2.3(browserslist@4.28.7):
+    dependencies:
+      browserslist: 4.28.7
       escalade: 3.2.0
       picocolors: 1.1.1
 
@@ -27117,30 +26781,30 @@ snapshots:
   url@0.11.4:
     dependencies:
       punycode: 1.4.1
-      qs: 6.15.0
+      qs: 6.15.3
 
-  use-callback-ref@1.3.3(@types/react@19.2.14)(react@19.2.6):
+  use-callback-ref@1.3.3(@types/react@19.2.18)(react@19.2.8):
     dependencies:
-      react: 19.2.6
+      react: 19.2.8
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
 
-  use-memo-one@1.1.3(react@19.2.6):
+  use-memo-one@1.1.3(react@19.2.8):
     dependencies:
-      react: 19.2.6
+      react: 19.2.8
 
-  use-sidecar@1.1.3(@types/react@19.2.14)(react@19.2.6):
+  use-sidecar@1.1.3(@types/react@19.2.18)(react@19.2.8):
     dependencies:
       detect-node-es: 1.1.0
-      react: 19.2.6
+      react: 19.2.8
       tslib: 2.8.1
     optionalDependencies:
-      '@types/react': 19.2.14
+      '@types/react': 19.2.18
 
-  use-sync-external-store@1.6.0(react@19.2.6):
+  use-sync-external-store@1.6.0(react@19.2.8):
     dependencies:
-      react: 19.2.6
+      react: 19.2.8
 
   utf8-byte-length@1.0.5: {}
 
@@ -27156,15 +26820,7 @@ snapshots:
 
   utila@0.4.0: {}
 
-  utils-merge@1.0.1: {}
-
-  uuid@10.0.0: {}
-
-  uuid@11.1.0: {}
-
-  uuid@14.0.0: {}
-
-  uuid@8.3.2: {}
+  uuid@14.0.1: {}
 
   v8-to-istanbul@9.3.0:
     dependencies:
@@ -27172,31 +26828,19 @@ snapshots:
       '@types/istanbul-lib-coverage': 2.0.6
       convert-source-map: 2.0.0
 
-  validate-npm-package-license@3.0.4:
-    dependencies:
-      spdx-correct: 3.2.0
-      spdx-expression-parse: 3.0.1
-
-  validate-npm-package-name@7.0.2: {}
+  validate-npm-package-name@8.0.0: {}
 
   vary@1.1.2: {}
 
-  vaul@1.1.2(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6):
+  vaul@1.1.2(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8):
     dependencies:
-      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
-      react: 19.2.6
-      react-dom: 19.2.6(react@19.2.6)
+      '@radix-ui/react-dialog': 1.1.23(@types/react-dom@19.2.3)(@types/react@19.2.18)(react-dom@19.2.8)(react@19.2.8)
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
     transitivePeerDependencies:
       - '@types/react'
       - '@types/react-dom'
 
-  verror@1.10.1:
-    dependencies:
-      assert-plus: 1.0.0
-      core-util-is: 1.0.2
-      extsprintf: 1.4.1
-    optional: true
-
   vfile-message@4.0.3:
     dependencies:
       '@types/unist': 3.0.3
@@ -27207,72 +26851,109 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
 
-  vite-plugin-node-polyfills@0.26.0(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4)):
+  vite-plugin-node-polyfills@0.28.0(rollup@4.60.1)(vite@8.2.0):
     dependencies:
-      '@rollup/plugin-inject': 5.0.5(rollup@4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8))
+      '@rollup/plugin-inject': 5.0.5(rollup@4.60.1)
       node-stdlib-browser: 1.3.1
-      vite: 8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4)
+      vite: 8.2.0(@types/node@25.9.3)(esbuild@0.27.4)(jiti@2.7.0)(sugarss@5.0.1)(terser@5.49.0)(yaml@2.9.0)
     transitivePeerDependencies:
       - rollup
 
-  vite@5.4.21(@types/node@18.19.130)(lightningcss@1.32.0)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1):
+  vite-plugin-svgr@5.2.0(@typescript/typescript6@6.0.2)(rollup@4.60.1)(supports-color@10.2.2)(vite@8.2.0):
+    dependencies:
+      '@rollup/pluginutils': 5.4.0(rollup@4.60.1)
+      '@svgr/core': 8.1.0(@typescript/typescript6@6.0.2)(supports-color@10.2.2)
+      '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0)(supports-color@10.2.2)
+      vite: 8.2.0(@types/node@25.9.3)(esbuild@0.27.4)(jiti@2.7.0)(sugarss@5.0.1)(terser@5.49.0)(yaml@2.9.0)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+      - typescript
+
+  vite-plugin-svgr@5.2.0(rollup@4.60.1)(supports-color@10.2.2)(typescript@7.0.2)(vite@8.2.0):
+    dependencies:
+      '@rollup/pluginutils': 5.4.0(rollup@4.60.1)
+      '@svgr/core': 8.1.0(supports-color@10.2.2)(typescript@7.0.2)
+      '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0)(supports-color@10.2.2)
+      vite: 8.2.0(@types/node@25.9.3)(esbuild@0.27.4)(jiti@2.7.0)(sugarss@5.0.1)(terser@5.49.0)(yaml@2.9.0)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+      - typescript
+
+  vite-plugin-svgr@5.2.0(rollup@4.60.1)(supports-color@7.2.0)(typescript@7.0.2)(vite@8.2.0):
+    dependencies:
+      '@rollup/pluginutils': 5.4.0(rollup@4.60.1)
+      '@svgr/core': 8.1.0(supports-color@7.2.0)(typescript@7.0.2)
+      '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0)(supports-color@7.2.0)
+      vite: 8.2.0(@types/node@25.9.3)(esbuild@0.27.4)(jiti@2.7.0)(sugarss@5.0.1)(terser@5.49.0)(yaml@2.9.0)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+      - typescript
+
+  vite@6.4.3(@types/node@25.9.3)(jiti@2.7.0)(lightningcss@1.33.0)(sugarss@5.0.1)(terser@5.49.0)(yaml@2.9.0):
     dependencies:
       esbuild: 0.27.4
-      postcss: 8.5.14
-      rollup: 4.60.1(patch_hash=603340e49399c6044e41a3998891667387d5ec1acbd38d4e5862f2ba3ef58de8)
+      fdir: 6.5.0(picomatch@4.0.5)
+      picomatch: 4.0.5
+      postcss: 8.5.25
+      rollup: 4.60.1
+      tinyglobby: 0.2.17
     optionalDependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
       fsevents: 2.3.3
-      lightningcss: 1.32.0
-      sugarss: 5.0.1(postcss@8.5.14)
-      terser: 5.47.1
+      jiti: 2.7.0
+      lightningcss: 1.33.0
+      sugarss: 5.0.1(postcss@8.5.25)
+      terser: 5.49.0
+      yaml: 2.9.0
 
-  vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4):
+  vite@8.2.0(@types/node@25.9.3)(esbuild@0.27.4)(jiti@2.7.0)(sugarss@5.0.1)(terser@5.49.0)(yaml@2.9.0):
     dependencies:
-      lightningcss: 1.32.0
-      picomatch: 4.0.4
-      postcss: 8.5.14
-      rolldown: 1.0.0-rc.17
-      tinyglobby: 0.2.16
+      lightningcss: 1.33.0
+      picomatch: 4.0.5
+      postcss: 8.5.25
+      rolldown: 1.2.2
+      tinyglobby: 0.2.17
     optionalDependencies:
-      '@types/node': 18.19.130
+      '@types/node': 25.9.3
       esbuild: 0.27.4
       fsevents: 2.3.3
-      jiti: 2.6.1
-      sugarss: 5.0.1(postcss@8.5.14)
-      terser: 5.47.1
-      tsx: 4.21.0
-      yaml: 2.8.4
+      jiti: 2.7.0
+      sugarss: 5.0.1(postcss@8.5.25)
+      terser: 5.49.0
+      yaml: 2.9.0
 
-  vitepress-plugin-mermaid@2.0.17(mermaid@11.14.0)(vitepress@1.6.4(@algolia/client-search@5.50.0)(@types/node@18.19.130)(@types/react@19.2.14)(axios@1.15.2)(jwt-decode@4.0.0)(lightningcss@1.32.0)(postcss@8.5.14)(qrcode@1.5.4)(search-insights@2.17.3)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(typescript@6.0.3)):
+  vitepress-plugin-mermaid@2.0.17(mermaid@11.16.0)(vitepress@1.6.4):
     dependencies:
-      mermaid: 11.14.0
-      vitepress: 1.6.4(@algolia/client-search@5.50.0)(@types/node@18.19.130)(@types/react@19.2.14)(axios@1.15.2)(jwt-decode@4.0.0)(lightningcss@1.32.0)(postcss@8.5.14)(qrcode@1.5.4)(search-insights@2.17.3)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(typescript@6.0.3)
+      mermaid: 11.16.0
+      vitepress: 1.6.4(@algolia/client-search@5.50.0)(@types/node@25.9.3)(@types/react@19.2.18)(@typescript/typescript6@6.0.2)(axios@1.19.0)(jiti@2.7.0)(lightningcss@1.33.0)(postcss@8.5.25)(qrcode@1.5.4)(react@19.2.8)(search-insights@2.17.3)(sugarss@5.0.1)(terser@5.49.0)(yaml@2.9.0)
     optionalDependencies:
       '@mermaid-js/mermaid-mindmap': 9.3.0
 
-  vitepress@1.6.4(@algolia/client-search@5.50.0)(@types/node@18.19.130)(@types/react@19.2.14)(axios@1.15.2)(jwt-decode@4.0.0)(lightningcss@1.32.0)(postcss@8.5.14)(qrcode@1.5.4)(search-insights@2.17.3)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(typescript@6.0.3):
+  vitepress@1.6.4(@algolia/client-search@5.50.0)(@types/node@25.9.3)(@types/react@19.2.18)(@typescript/typescript6@6.0.2)(axios@1.19.0)(jiti@2.7.0)(lightningcss@1.33.0)(postcss@8.5.25)(qrcode@1.5.4)(react@19.2.8)(search-insights@2.17.3)(sugarss@5.0.1)(terser@5.49.0)(yaml@2.9.0):
     dependencies:
       '@docsearch/css': 3.8.2
-      '@docsearch/js': 3.8.2(@algolia/client-search@5.50.0)(@types/react@19.2.14)(search-insights@2.17.3)
+      '@docsearch/js': 3.8.2(@algolia/client-search@5.50.0)(@types/react@19.2.18)(react@19.2.8)(search-insights@2.17.3)
       '@iconify-json/simple-icons': 1.2.75
       '@shikijs/core': 2.5.0
       '@shikijs/transformers': 2.5.0
       '@shikijs/types': 2.5.0
       '@types/markdown-it': 14.1.2
-      '@vitejs/plugin-vue': 5.2.4(vite@5.4.21(@types/node@18.19.130)(lightningcss@1.32.0)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1))(vue@3.5.31(typescript@6.0.3))
+      '@vitejs/plugin-vue': 5.2.4(vite@6.4.3)(vue@3.5.31)
       '@vue/devtools-api': 7.7.9
       '@vue/shared': 3.5.31
-      '@vueuse/core': 12.8.2(typescript@6.0.3)
-      '@vueuse/integrations': 12.8.2(axios@1.15.2)(focus-trap@7.8.0)(jwt-decode@4.0.0)(qrcode@1.5.4)(typescript@6.0.3)
+      '@vueuse/core': 12.8.2(@typescript/typescript6@6.0.2)
+      '@vueuse/integrations': 12.8.2(@typescript/typescript6@6.0.2)(axios@1.19.0)(focus-trap@7.8.0)(qrcode@1.5.4)
       focus-trap: 7.8.0
       mark.js: 8.11.1
       minisearch: 7.2.0
       shiki: 2.5.0
-      vite: 5.4.21(@types/node@18.19.130)(lightningcss@1.32.0)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)
-      vue: 3.5.31(typescript@6.0.3)
+      vite: 6.4.3(@types/node@25.9.3)(jiti@2.7.0)(lightningcss@1.33.0)(sugarss@5.0.1)(terser@5.49.0)(yaml@2.9.0)
+      vue: 3.5.31(@typescript/typescript6@6.0.2)
     optionalDependencies:
-      postcss: 8.5.14
+      postcss: 8.5.25
     transitivePeerDependencies:
       - '@algolia/client-search'
       - '@types/node'
@@ -27283,6 +26964,7 @@ snapshots:
       - drauu
       - fuse.js
       - idb-keyval
+      - jiti
       - jwt-decode
       - less
       - lightningcss
@@ -27297,106 +26979,97 @@ snapshots:
       - stylus
       - sugarss
       - terser
+      - tsx
       - typescript
       - universal-cookie
+      - yaml
 
-  vitest-plugin-vis@5.1.0(@vitest/browser-playwright@4.1.5)(@vitest/browser@4.1.5)(babel-plugin-macros@3.1.0)(typescript@6.0.3)(vitest@4.1.5):
+  vitest-canvas-mock@1.1.4(vitest@4.1.10):
     dependencies:
-      '@vitest/browser': 4.1.5(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(vitest@4.1.5)
+      cssfontparser: 1.2.1
+      moo-color: 1.0.3
+      vitest: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(happy-dom@20.11.1)(jsdom@26.1.0)(vite@8.2.0)
+
+  vitest-plugin-vis@5.1.1(@typescript/typescript6@6.0.2)(@vitest/browser-playwright@4.1.10)(@vitest/browser@4.1.10)(babel-plugin-macros@3.1.0)(vitest@4.1.10):
+    dependencies:
+      '@vitest/browser': 4.1.10(vite@8.2.0)(vitest@4.1.10)
       dedent: 1.7.2(babel-plugin-macros@3.1.0)
       glob: 13.0.6
       is-ci: 4.1.0
       mkdirp: 3.0.1
       pathe: 2.0.3
-      pixelmatch: 7.1.0
+      pixelmatch: 7.2.0
       pngjs: 7.0.0
       rimraf: 6.1.3
       ssim.js: 3.5.0
-      type-plus: 8.0.0-beta.8(typescript@6.0.3)
-      vitest: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.5)(@vitest/coverage-v8@4.1.5)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))
+      type-plus: 8.0.0-beta.8(@typescript/typescript6@6.0.2)
+      vitest: 4.1.10(@opentelemetry/api@1.9.1)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(happy-dom@20.11.1)(jsdom@26.1.0)(vite@8.2.0)
     optionalDependencies:
-      '@vitest/browser-playwright': 4.1.5(playwright@1.59.1)(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(vitest@4.1.5)
+      '@vitest/browser-playwright': 4.1.10(playwright@1.61.1)(vite@8.2.0)(vitest@4.1.10)
     transitivePeerDependencies:
       - babel-plugin-macros
       - typescript
 
-  vitest-sonar-reporter@3.0.0(vitest@4.1.5):
+  vitest@4.1.10(@opentelemetry/api@1.9.1)(@types/node@25.9.3)(@vitest/browser-playwright@4.1.10)(@vitest/coverage-v8@4.1.10)(happy-dom@20.11.1)(jsdom@26.1.0)(vite@8.2.0):
     dependencies:
-      vitest: 4.1.5(@opentelemetry/api@1.9.1)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.5)(@vitest/coverage-v8@4.1.5)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))
-
-  vitest@4.1.5(@opentelemetry/api@1.9.1)(@types/node@18.19.130)(@vitest/browser-playwright@4.1.5)(@vitest/coverage-v8@4.1.5)(jsdom@26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f))(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4)):
-    dependencies:
-      '@vitest/expect': 4.1.5
-      '@vitest/mocker': 4.1.5(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))
-      '@vitest/pretty-format': 4.1.5
-      '@vitest/runner': 4.1.5
-      '@vitest/snapshot': 4.1.5
-      '@vitest/spy': 4.1.5
-      '@vitest/utils': 4.1.5
-      es-module-lexer: 2.0.0
+      '@vitest/expect': 4.1.10
+      '@vitest/mocker': 4.1.10(vite@8.2.0)
+      '@vitest/pretty-format': 4.1.10
+      '@vitest/runner': 4.1.10
+      '@vitest/snapshot': 4.1.10
+      '@vitest/spy': 4.1.10
+      '@vitest/utils': 4.1.10
+      es-module-lexer: 2.3.1
       expect-type: 1.3.0
       magic-string: 0.30.21
       obug: 2.1.1
       pathe: 2.0.3
-      picomatch: 4.0.4
+      picomatch: 4.0.5
       std-env: 4.1.0
       tinybench: 2.9.0
-      tinyexec: 1.1.2
-      tinyglobby: 0.2.16
+      tinyexec: 1.2.4
+      tinyglobby: 0.2.17
       tinyrainbow: 3.1.0
-      vite: 8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4)
+      vite: 8.2.0(@types/node@25.9.3)(esbuild@0.27.4)(jiti@2.7.0)(sugarss@5.0.1)(terser@5.49.0)(yaml@2.9.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@opentelemetry/api': 1.9.1
-      '@types/node': 18.19.130
-      '@vitest/browser-playwright': 4.1.5(playwright@1.59.1)(vite@8.0.10(@types/node@18.19.130)(esbuild@0.27.4)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.14))(terser@5.47.1)(tsx@4.21.0)(yaml@2.8.4))(vitest@4.1.5)
-      '@vitest/coverage-v8': 4.1.5(@vitest/browser@4.1.5)(vitest@4.1.5)
-      jsdom: 26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f)
+      '@types/node': 25.9.3
+      '@vitest/browser-playwright': 4.1.10(playwright@1.61.1)(vite@8.2.0)(vitest@4.1.10)
+      '@vitest/coverage-v8': 4.1.10(@vitest/browser@4.1.10)(vitest@4.1.10)
+      happy-dom: 20.11.1
+      jsdom: 26.1.0(patch_hash=040623e87b1c8b676c2a705513c0276c0704dd1b23fc3a1bb77cde8128b64b5f)(supports-color@7.2.0)
     transitivePeerDependencies:
       - msw
 
   vm-browserify@1.1.2: {}
 
-  vscode-jsonrpc@8.2.0: {}
-
-  vscode-languageserver-protocol@3.17.5:
-    dependencies:
-      vscode-jsonrpc: 8.2.0
-      vscode-languageserver-types: 3.17.5
-
-  vscode-languageserver-textdocument@1.0.12: {}
-
-  vscode-languageserver-types@3.17.5: {}
-
-  vscode-languageserver@9.0.1:
-    dependencies:
-      vscode-languageserver-protocol: 3.17.5
-
   vscode-uri@3.1.0: {}
 
-  vue@3.5.31(typescript@6.0.3):
+  vue@3.5.31(@typescript/typescript6@6.0.2):
     dependencies:
       '@vue/compiler-dom': 3.5.31
       '@vue/compiler-sfc': 3.5.31
       '@vue/runtime-dom': 3.5.31
-      '@vue/server-renderer': 3.5.31(vue@3.5.31(typescript@6.0.3))
+      '@vue/server-renderer': 3.5.31(vue@3.5.31)
       '@vue/shared': 3.5.31
     optionalDependencies:
-      typescript: 6.0.3
+      typescript: '@typescript/typescript6@6.0.2'
 
   w3c-xmlserializer@5.0.0:
     dependencies:
       xml-name-validator: 5.0.0
 
-  wait-on@9.0.5:
+  wait-on@9.1.0(debug@4.4.3)(supports-color@10.2.2):
     dependencies:
-      axios: 1.15.2
-      joi: 18.1.2
+      axios: 1.19.0(debug@4.4.3)(supports-color@10.2.2)
+      joi: 18.2.3
       lodash: 4.18.1
       minimist: 1.2.8
       rxjs: 7.8.2
     transitivePeerDependencies:
       - debug
+      - supports-color
 
   walk-up-path@4.0.0: {}
 
@@ -27408,26 +27081,21 @@ snapshots:
     dependencies:
       makeerror: 1.0.12
 
-  watchpack@2.5.1:
+  watchpack@2.5.2:
     dependencies:
-      glob-to-regexp: 0.4.1
       graceful-fs: 4.2.11
 
-  wbuf@1.7.3:
-    dependencies:
-      minimalistic-assert: 1.0.1
-
   wcwidth@1.0.1:
     dependencies:
       defaults: 1.0.4
 
-  web-streams-polyfill@4.2.0: {}
+  web-streams-polyfill@4.3.0: {}
 
-  web-vitals@5.1.0: {}
+  web-vitals@5.3.0: {}
 
   webcrypto-core@1.9.2:
     dependencies:
-      '@peculiar/asn1-schema': 2.7.0
+      '@peculiar/asn1-schema': 2.8.0
       '@peculiar/json-schema': 1.1.12
       '@peculiar/utils': 2.0.3
       asn1js: 3.0.10
@@ -27437,10 +27105,10 @@ snapshots:
 
   webidl-conversions@7.0.0: {}
 
-  webpack-bundle-analyzer@5.3.0:
+  webpack-bundle-analyzer@5.3.1:
     dependencies:
       '@discoveryjs/json-ext': 0.6.3
-      acorn: 8.16.0
+      acorn: 8.18.0
       acorn-walk: 8.3.5
       commander: 14.0.3
       escape-string-regexp: 5.0.0
@@ -27448,76 +27116,72 @@ snapshots:
       opener: 1.5.2
       picocolors: 1.1.1
       sirv: 3.0.2
-      ws: 8.20.0
+      ws: 8.21.1
     transitivePeerDependencies:
       - bufferutil
       - utf-8-validate
 
-  webpack-cli@7.0.2(webpack-bundle-analyzer@5.3.0)(webpack-dev-server@5.2.3)(webpack@5.106.2):
+  webpack-cli@7.2.2(js-yaml@4.3.1)(json5@2.2.3)(webpack-bundle-analyzer@5.3.1)(webpack-dev-server@6.0.0)(webpack@5.109.2):
     dependencies:
-      '@discoveryjs/json-ext': 1.0.0
+      '@discoveryjs/json-ext': 1.1.0
       commander: 14.0.3
       cross-spawn: 7.0.6
       envinfo: 7.21.0
-      fastest-levenshtein: 1.0.16
       import-local: 3.2.0
       interpret: 3.1.1
       rechoir: 0.8.0
-      webpack: 5.106.2(webpack-cli@7.0.2)
+      webpack: 5.109.2(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack-cli@7.2.2)
       webpack-merge: 6.0.1
     optionalDependencies:
-      webpack-bundle-analyzer: 5.3.0
-      webpack-dev-server: 5.2.3(tslib@2.8.1)(webpack-cli@7.0.2)(webpack@5.106.2)
+      js-yaml: 4.3.1
+      json5: 2.2.3
+      webpack-bundle-analyzer: 5.3.1
+      webpack-dev-server: 6.0.0(supports-color@10.2.2)(tslib@2.8.1)(webpack-cli@7.2.2)(webpack@5.109.2)
 
-  webpack-dev-middleware@7.4.5(tslib@2.8.1)(webpack@5.106.2):
+  webpack-dev-middleware@8.0.3(tslib@2.8.1)(webpack@5.109.2):
     dependencies:
-      colorette: 2.0.20
-      memfs: 4.57.2(tslib@2.8.1)
+      memfs: 4.64.0(tslib@2.8.1)
       mime-types: 3.0.2
       on-finished: 2.4.1
-      range-parser: 1.2.1
+      range-parser: 1.3.0
       schema-utils: 4.3.3
     optionalDependencies:
-      webpack: 5.106.2(webpack-cli@7.0.2)
+      webpack: 5.109.2(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack-cli@7.2.2)
     transitivePeerDependencies:
       - tslib
 
-  webpack-dev-server@5.2.3(tslib@2.8.1)(webpack-cli@7.0.2)(webpack@5.106.2):
+  webpack-dev-server@6.0.0(supports-color@10.2.2)(tslib@2.8.1)(webpack-cli@7.2.2)(webpack@5.109.2):
     dependencies:
       '@types/bonjour': 3.5.13
       '@types/connect-history-api-fallback': 1.5.4
-      '@types/express': 4.17.25
-      '@types/express-serve-static-core': 4.19.8
+      '@types/express': 5.0.6
+      '@types/express-serve-static-core': 5.1.1
       '@types/serve-index': 1.9.4
-      '@types/serve-static': 1.15.10
-      '@types/sockjs': 0.3.36
+      '@types/serve-static': 2.2.0
       '@types/ws': 8.18.1
       ansi-html-community: 0.0.8
-      bonjour-service: 1.3.0
-      chokidar: 3.6.0
-      colorette: 2.0.20
-      compression: 1.8.1
+      bonjour-service: 1.4.2
+      chokidar: 5.0.0
+      compression: 1.8.1(supports-color@10.2.2)
       connect-history-api-fallback: 2.0.0
-      express: 4.22.1
+      express: 5.2.1(supports-color@10.2.2)
       graceful-fs: 4.2.11
-      http-proxy-middleware: 2.0.9(@types/express@4.17.25)
-      ipaddr.js: 2.3.0
-      launch-editor: 2.12.0
-      open: 10.2.0
-      p-retry: 6.2.1
+      http-proxy-middleware: 4.2.0(supports-color@10.2.2)
+      ipaddr.js: 2.4.0
+      launch-editor: 2.14.1
+      open: 11.0.0
+      p-retry: 8.0.0
       schema-utils: 4.3.3
       selfsigned: 5.5.0
-      serve-index: 1.9.2
-      sockjs: 0.3.24
-      spdy: 4.0.2
-      webpack-dev-middleware: 7.4.5(tslib@2.8.1)(webpack@5.106.2)
-      ws: 8.20.0
+      serve-index: 1.9.2(supports-color@10.2.2)
+      tinyglobby: 0.2.17
+      webpack-dev-middleware: 8.0.3(tslib@2.8.1)(webpack@5.109.2)
+      ws: 8.21.1
     optionalDependencies:
-      webpack: 5.106.2(webpack-cli@7.0.2)
-      webpack-cli: 7.0.2(webpack-bundle-analyzer@5.3.0)(webpack-dev-server@5.2.3)(webpack@5.106.2)
+      webpack: 5.109.2(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack-cli@7.2.2)
+      webpack-cli: 7.2.2(js-yaml@4.3.1)(json5@2.2.3)(webpack-bundle-analyzer@5.3.1)(webpack-dev-server@6.0.0)(webpack@5.109.2)
     transitivePeerDependencies:
       - bufferutil
-      - debug
       - supports-color
       - tslib
       - utf-8-validate
@@ -27528,101 +27192,68 @@ snapshots:
       flat: 5.0.2
       wildcard: 2.0.1
 
-  webpack-retry-chunk-load-plugin@3.1.1(webpack@5.106.2):
+  webpack-retry-chunk-load-plugin@3.1.1(webpack@5.109.2):
     dependencies:
       prettier: 2.8.8
-      webpack: 5.106.2(webpack-cli@7.0.2)
+      webpack: 5.109.2(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack-cli@7.2.2)
 
-  webpack-sources@3.3.4: {}
+  webpack-sources@3.5.1: {}
 
-  webpack-version-file-plugin@0.5.0(webpack@5.106.2):
+  webpack-version-file-plugin@0.5.0(webpack@5.109.2):
     dependencies:
       ejs: 3.1.10
       fs: 0.0.1-security
       underscore: 1.13.8
-      webpack: 5.106.2(webpack-cli@7.0.2)
+      webpack: 5.109.2(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack-cli@7.2.2)
 
   webpack-virtual-modules@0.6.2: {}
 
-  webpack@5.106.2(esbuild@0.27.4):
+  webpack@5.109.2(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack-cli@7.2.2):
     dependencies:
-      '@types/eslint-scope': 3.7.7
       '@types/estree': 1.0.9
       '@types/json-schema': 7.0.15
       '@webassemblyjs/ast': 1.14.1
       '@webassemblyjs/wasm-edit': 1.14.1
       '@webassemblyjs/wasm-parser': 1.14.1
-      acorn: 8.16.0
-      acorn-import-phases: 1.0.4(acorn@8.16.0)
-      browserslist: 4.28.2
+      acorn: 8.18.0
+      browserslist: 4.28.7
       chrome-trace-event: 1.0.4
-      enhanced-resolve: 5.20.1
-      es-module-lexer: 2.0.0
+      enhanced-resolve: 5.24.5
+      es-module-lexer: 2.3.1
       eslint-scope: 5.1.1
       events: 3.3.0
-      glob-to-regexp: 0.4.1
       graceful-fs: 4.2.11
-      loader-runner: 4.3.1
       mime-db: 1.54.0
+      minimizer-webpack-plugin: 5.6.1(clean-css@5.3.3)(cssnano@7.1.2)(csso@5.0.5)(esbuild@0.27.4)(html-minifier-terser@6.1.0)(lightningcss@1.33.0)(postcss@8.5.25)(uglify-js@3.19.3)(webpack@5.109.2)
       neo-async: 2.6.2
       schema-utils: 4.3.3
-      tapable: 2.3.2
-      terser-webpack-plugin: 5.5.0(esbuild@0.27.4)(webpack@5.106.2(esbuild@0.27.4))
-      watchpack: 2.5.1
-      webpack-sources: 3.3.4
-    transitivePeerDependencies:
-      - '@swc/core'
-      - esbuild
-      - uglify-js
-    optional: true
-
-  webpack@5.106.2(webpack-cli@7.0.2):
-    dependencies:
-      '@types/eslint-scope': 3.7.7
-      '@types/estree': 1.0.9
-      '@types/json-schema': 7.0.15
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/wasm-edit': 1.14.1
-      '@webassemblyjs/wasm-parser': 1.14.1
-      acorn: 8.16.0
-      acorn-import-phases: 1.0.4(acorn@8.16.0)
-      browserslist: 4.28.2
-      chrome-trace-event: 1.0.4
-      enhanced-resolve: 5.20.1
-      es-module-lexer: 2.0.0
-      eslint-scope: 5.1.1
-      events: 3.3.0
-      glob-to-regexp: 0.4.1
-      graceful-fs: 4.2.11
-      loader-runner: 4.3.1
-      mime-db: 1.54.0
-      neo-async: 2.6.2
-      schema-utils: 4.3.3
-      tapable: 2.3.2
-      terser-webpack-plugin: 5.5.0(webpack@5.106.2)
-      watchpack: 2.5.1
-      webpack-sources: 3.3.4
+      tapable: 2.3.3
+      watchpack: 2.5.2
+      webpack-sources: 3.5.1
     optionalDependencies:
-      webpack-cli: 7.0.2(webpack-bundle-analyzer@5.3.0)(webpack-dev-server@5.2.3)(webpack@5.106.2)
+      webpack-cli: 7.2.2(js-yaml@4.3.1)(json5@2.2.3)(webpack-bundle-analyzer@5.3.1)(webpack-dev-server@6.0.0)(webpack@5.109.2)
     transitivePeerDependencies:
+      - '@minify-html/node'
       - '@swc/core'
+      - '@swc/css'
+      - '@swc/html'
+      - clean-css
+      - cssnano
+      - csso
       - esbuild
+      - html-minifier-terser
+      - lightningcss
+      - postcss
       - uglify-js
 
-  websocket-driver@0.7.4:
-    dependencies:
-      http-parser-js: 0.5.10
-      safe-buffer: 5.2.1
-      websocket-extensions: 0.1.4
-
-  websocket-extensions@0.1.4: {}
-
   what-input@5.2.12: {}
 
   whatwg-encoding@3.1.1:
     dependencies:
       iconv-lite: 0.6.3
 
+  whatwg-mimetype@3.0.0: {}
+
   whatwg-mimetype@4.0.0: {}
 
   whatwg-url@14.2.0:
@@ -27637,37 +27268,6 @@ snapshots:
 
   when-exit@2.1.5: {}
 
-  which-boxed-primitive@1.1.1:
-    dependencies:
-      is-bigint: 1.1.0
-      is-boolean-object: 1.2.2
-      is-number-object: 1.1.1
-      is-string: 1.1.1
-      is-symbol: 1.1.1
-
-  which-builtin-type@1.2.1:
-    dependencies:
-      call-bound: 1.0.4
-      function.prototype.name: 1.1.8
-      has-tostringtag: 1.0.2
-      is-async-function: 2.1.1
-      is-date-object: 1.1.0
-      is-finalizationregistry: 1.1.1
-      is-generator-function: 1.1.2
-      is-regex: 1.2.1
-      is-weakref: 1.1.1
-      isarray: 2.0.5
-      which-boxed-primitive: 1.1.1
-      which-collection: 1.0.2
-      which-typed-array: 1.1.20
-
-  which-collection@1.0.2:
-    dependencies:
-      is-map: 2.0.3
-      is-set: 2.0.3
-      is-weakmap: 2.0.2
-      is-weakset: 2.0.4
-
   which-module@2.0.1: {}
 
   which-typed-array@1.1.20:
@@ -27688,6 +27288,10 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
+  which@3.0.1:
+    dependencies:
+      isexe: 2.0.0
+
   which@5.0.0:
     dependencies:
       isexe: 3.1.5
@@ -27696,6 +27300,10 @@ snapshots:
     dependencies:
       isexe: 4.0.0
 
+  which@7.0.0:
+    dependencies:
+      isexe: 4.0.0
+
   why-is-node-running@2.3.0:
     dependencies:
       siginfo: 2.0.0
@@ -27709,12 +27317,6 @@ snapshots:
 
   wordwrap@1.0.0: {}
 
-  wrap-ansi@10.0.0:
-    dependencies:
-      ansi-styles: 6.2.3
-      string-width: 8.2.1
-      strip-ansi: 7.2.0
-
   wrap-ansi@6.2.0:
     dependencies:
       ansi-styles: 4.3.0
@@ -27733,12 +27335,6 @@ snapshots:
       string-width: 5.1.2
       strip-ansi: 7.2.0
 
-  wrap-ansi@9.0.2:
-    dependencies:
-      ansi-styles: 6.2.3
-      string-width: 7.2.0
-      strip-ansi: 7.2.0
-
   wrappy@1.0.2: {}
 
   write-file-atomic@5.0.1:
@@ -27750,12 +27346,17 @@ snapshots:
     dependencies:
       signal-exit: 4.1.0
 
-  ws@8.20.0: {}
+  ws@8.21.1: {}
 
   wsl-utils@0.1.0:
     dependencies:
       is-wsl: 3.1.1
 
+  wsl-utils@0.3.1:
+    dependencies:
+      is-wsl: 3.1.1
+      powershell-utils: 0.1.0
+
   xml-name-validator@5.0.0: {}
 
   xml@1.0.1: {}
@@ -27784,9 +27385,7 @@ snapshots:
 
   yaml@1.10.3: {}
 
-  yaml@2.8.0: {}
-
-  yaml@2.8.4: {}
+  yaml@2.9.0: {}
 
   yargs-parser@18.1.3:
     dependencies:
@@ -27819,10 +27418,15 @@ snapshots:
       y18n: 5.0.8
       yargs-parser: 21.1.1
 
-  yauzl@2.10.0:
+  yargs@17.7.3:
     dependencies:
-      buffer-crc32: 0.2.13
-      fd-slicer: 1.1.0
+      cliui: 8.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
 
   yocto-queue@0.1.0: {}
 
@@ -27832,16 +27436,6 @@ snapshots:
       compress-commons: 6.0.2
       readable-stream: 4.7.0
 
-  zod-validation-error@3.5.4(zod@3.25.76):
-    dependencies:
-      zod: 3.25.76
-
-  zod-validation-error@4.0.2(zod@4.3.6):
-    dependencies:
-      zod: 4.3.6
-
-  zod@3.25.76: {}
-
-  zod@4.3.6: {}
+  zod@4.4.3: {}
 
   zwitch@2.0.4: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 413fa02d46..124da192d8 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,32 +1,57 @@
-nodeLinker: hoisted
 linkWorkspacePackages: true
+cleanupUnusedCatalogs: true
+ignorePatchFailures: false
+ignoreWorkspaceRootCheck: true
+minimumReleaseAgeStrict: true
+dedupePeerDependents: true
+dedupePeers: true
+
 packages:
     - "apps/*"
     - "packages/*"
-cleanupUnusedCatalogs: true
+    - "modules"
+    - "modules/*"
+
 catalog:
     # typescript
-    typescript: 6.0.3
+    "typescript": 7.0.2
+    "@typescript/native": npm:typescript@7.0.2
+    "@types/node": ts7.0
     # react
     react: ^19.0.0
     react-dom: ^19.0.0
     "@types/react": ^19.2.10
     "@types/react-dom": ^19.2.3
     # playwright
-    "@playwright/test": 1.59.1
-    "playwright-core": 1.59.1
+    "@playwright/test": 1.61.1
+    "playwright-core": 1.61.1
     # Compound
-    "@vector-im/compound-design-tokens": 10.1.1
-    "@vector-im/compound-web": 9.3.0
+    "@vector-im/compound-design-tokens": 10.2.1
+    "@vector-im/compound-web": 10.0.1
     # i18n
     matrix-web-i18n: 3.6.0
+    # emojibase
+    "@matrix-org/emojibase-bindings": 1.5.0
     # fonts
-    "@fontsource/inter": 5.2.8
+    "@fontsource/inter": 5.3.0
     # vite
-    vite: 8.0.10
-    vitest: 4.1.5
-    vitest-sonar-reporter: 3.0.0
-    "@vitest/coverage-v8": 4.1.5
+    vite: 8.2.0
+    vite-plugin-node-polyfills: 0.28.0
+    vite-plugin-svgr: 5.2.0
+    vitest: 4.1.10
+    "@vitest/spy": 4.1.10
+    "@vitest/coverage-v8": 4.1.10
+    "@vitest/browser-playwright": 4.1.10
+    "@vitejs/plugin-react": 6.0.5
+    unplugin-dts: 1.0.1
+    # nx
+    nx: 23.1.1
+
+catalogs:
+    ts6:
+        typescript: npm:@typescript/typescript6@6.0.2
+        "@types/node": ts6.0
+
 packageExtensions:
     fdir:
         dependencies:
@@ -36,4 +61,162 @@ packageExtensions:
         peerDependencies:
             # Silence warning
             vite: "^8.0.0"
-ignorePatchFailures: false
+    "@vitest/mocker":
+        peerDependencies:
+            vite: "^8.0.0"
+    vitest:
+        peerDependencies:
+            vite: "^8.0.0"
+
+allowBuilds:
+    # Needed to make the git dependency in layered.sh happy
+    matrix-js-sdk: true
+    "matrix-js-sdk@git+https://github.com/matrix-org/matrix-js-sdk.git": true
+    # Installs the CLI, which we do not need
+    "@sentry/cli": false
+    # Installs nx cloud client, which we do not need
+    nx: false
+    # Runs `vp config` to set up git hooks, which we do not need
+    unrs-resolver: false
+    # Prints funding banner
+    core-js: false
+    # Builds native bindings, which we do not need
+    cpu-features: false
+    # Copies the 7z binaries which match our arch, though somehow works without it
+    electron-winstaller: false
+    # Installs esbuild binary, though somehow works without it
+    esbuild: false
+    # Performs additional version checks, which we do not need
+    protobufjs: false
+    # Builds optional crypto binding, which we do not need
+    ssh2: false
+    # The following are to make wrangler-action happy - https://github.com/cloudflare/wrangler-action/issues/436
+    sharp: true
+    workerd: true
+
+patchedDependencies:
+    # Workaround for missing types export
+    "@vector-im/matrix-wysiwyg": patches/@vector-im__matrix-wysiwyg.patch
+    # Workaround for lack of React 19 support
+    react-blurhash: patches/react-blurhash.patch
+    # Workaround for https://github.com/nfrasser/linkifyjs/issues/429
+    linkify-html: patches/linkify-html.patch
+    # Workaround for typescript incompatibilities in an archived dependency - soon to be deleted
+    "@matrix-org/react-sdk-module-api": patches/@matrix-org__react-sdk-module-api.patch
+    # Workaround to access a private API
+    "@types/auto-launch": patches/@types__auto-launch.patch
+    # Workaround for jest still using commonjs and not being able to use the ESM version of await-lock
+    await-lock: patches/await-lock.patch
+    # Workaround for global type mismatches
+    jest-fixed-jsdom: patches/jest-fixed-jsdom.patch
+    # Workaround for jsdom being super opinionated and making it hard to tweak global properties
+    jsdom: patches/jsdom.patch
+    # Workaround for missing return types
+    postcss-mixins: patches/postcss-mixins.patch
+    # Workaround for some babel rules being false positively flagged
+    knip: patches/knip.patch
+    # Workaround for being stuck on an old version of plist due to electron-builder not supporting ESM yet
+    plist: patches/plist.patch
+    # Workaround for type fails
+    "@arcmantle/vite-plugin-import-css-sheet": patches/@arcmantle__vite-plugin-import-css-sheet.patch
+    # Workaround for scroll anchoring landing on transient placeholder rows (pending upstream)
+    "@tanstack/virtual-core@3.17.6": patches/@tanstack__virtual-core@3.17.6.patch
+
+peerDependencyRules:
+    allowedVersions:
+        react: "19"
+        react-dom: "19"
+        eslint: "8"
+        vite: "8"
+
+allowedDeprecatedVersions:
+    eslint: "8"
+    react-beautiful-dnd: "13"
+
+overrides:
+    pretty-format@30>react-is: 19.2.8
+    "@types/react": "catalog:"
+    "@types/react-dom": "catalog:"
+    caniuse-lite: 1.0.30001806
+    matrix-widget-api: "^1.18.0"
+    "@types/node": 25.9.3
+    config-file-ts: 0.2.8-rc1
+    node-abi: 4.33.0
+
+    # https://github.com/advisories/GHSA-6v5v-wf23-fmfq
+    markdown-it: ^14.3.0
+    axios@>1.0.0 <=1.16.1: ^1.16.1
+    # https://github.com/advisories/GHSA-g7r4-m6w7-qqqr
+    esbuild@<=0.27.4: 0.27.4
+    # https://github.com/advisories/GHSA-3jxr-9vmj-r5cp
+    # https://github.com/advisories/GHSA-mh99-v99m-4gvg
+    # https://github.com/advisories/GHSA-rgw5-rvv9-x895
+    brace-expansion@>=1 <1.1.18: ^1.1.18
+    # https://github.com/advisories/GHSA-rgw5-rvv9-x895
+    # https://github.com/advisories/GHSA-mh99-v99m-4gvg
+    brace-expansion@>=2 <2.1.4: ^2.1.4
+    # https://github.com/advisories/GHSA-rgw5-rvv9-x895
+    brace-expansion@>=5 <=5.0.5: ^5.0.9
+    # https://github.com/advisories/GHSA-mwp4-54f8-5fhr
+    ip-address@>=10 <10.1.1: ^10.3.1
+    yaml@>=2 <2.8.3: ^2.8.4
+    # https://github.com/advisories/GHSA-f38q-mgvj-vph7
+    # https://github.com/advisories/GHSA-j3f2-48v5-ccww
+    protobufjs@7 <7.5.8: ^7.6.5
+    "@protobufjs/utf8@1 <1.1.1": ^1.1.1
+    # https://github.com/advisories/GHSA-v3r7-h72x-cjcm
+    # https://github.com/advisories/GHSA-m8rv-5g2x-5cg5
+    # https://github.com/advisories/GHSA-8xcm-r25x-g524
+    undici@6 <6.28.0: ^6.28.0
+    # https://github.com/advisories/GHSA-vmh5-mc38-953g
+    # https://github.com/advisories/GHSA-vxpw-j846-p89q
+    # https://github.com/advisories/GHSA-hm92-r4w5-c3mj
+    # https://github.com/advisories/GHSA-p88m-4jfj-68fv
+    # https://github.com/advisories/GHSA-pr7r-676h-xcf6
+    # https://github.com/advisories/GHSA-35p6-xmwp-9g52
+    # https://github.com/advisories/GHSA-g8m3-5g58-fq7m
+    # https://github.com/advisories/GHSA-m8rv-5g2x-5cg5
+    undici@7 <7.28.0: ^7.29.0
+    # https://github.com/advisories/GHSA-m8rv-5g2x-5cg5
+    # https://github.com/advisories/GHSA-8xcm-r25x-g524
+    # https://github.com/advisories/GHSA-4cwx-7wf7-3272
+    undici@8 <8.9.0: ^8.9.0
+    # https://github.com/advisories/GHSA-fx2h-pf6j-xcff
+    # https://github.com/advisories/GHSA-4w7w-66w2-5vf9
+    # https://github.com/advisories/GHSA-v6wh-96g9-6wx3
+    # vitepress is the only consumer of vite <8; pin it to a patched vite 6 (it does not support vite 8).
+    vitepress>vite: ^6.4.3
+    # https://github.com/advisories/GHSA-c2j3-45gr-mqc4
+    dompurify@3 <=3.4.11: ^3.4.12
+    # https://github.com/advisories/GHSA-v422-hmwv-36x6
+    body-parser@2 <2.3.0: ^2.3.0
+    # https://github.com/advisories/GHSA-g2r8-wvmj-jf5w
+    nx: "catalog:"
+    # https://github.com/advisories/GHSA-r292-9mhp-454m
+    tar@7 <=7.5.20: ^7.5.21
+    # https://github.com/advisories/GHSA-2p49-hgcm-8545
+    svgo@3 <3.3.4: ^3.3.4
+    # https://github.com/advisories/GHSA-2p49-hgcm-8545
+    svgo@4 <4.0.2: ^4.0.2
+    # https://github.com/advisories/GHSA-7p8r-x3mc-p8w7
+    fast-uri@3 <3.1.5: ^3.1.5
+
+    # Convince api-extractor to use a newer Typescript version
+    "unplugin-dts>typescript": "catalog:ts6"
+    "@microsoft/api-extractor>typescript": "catalog:ts6"
+    # Hold some things back from ts7
+    "@arcmantle/vite-plugin-import-css-sheet>typescript": "catalog:ts6"
+    "react-docgen-typescript>typescript": "catalog:ts6"
+
+minimumReleaseAgeExclude:
+    - "matrix-js-sdk"
+    - "@matrix-org/*"
+    - "@vector-im/*"
+    - "@element-hq/*"
+    # Temporary for testing purposes
+    - "@typescript/*"
+    - typescript@7.0.2
+    # New timeline: 3.14.8/3.17.6 carry the upstream end-anchored-prepend fix
+    # (#1237); they were freshly published so are still inside the release-age
+    # window. Revisit once the release has aged past the cutoff.
+    - "@tanstack/*"
diff --git a/scripts/analyse_unused_exports.ts b/scripts/analyse_unused_exports.ts
index ca490bcc5a..a07c0e5d3a 100644
--- a/scripts/analyse_unused_exports.ts
+++ b/scripts/analyse_unused_exports.ts
@@ -1,12 +1,23 @@
 #!/usr/bin/env node
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
 
 import * as fs from "node:fs";
 import { exec } from "node:child_process";
+import { fileURLToPath } from "node:url";
 
 const includeJSSDK = process.argv.includes("--include-js-sdk");
 const ignore: string[] = [];
 
-ignore.push(...Object.values<string>(JSON.parse(fs.readFileSync(`${__dirname}/../components.json`, "utf-8"))));
+ignore.push(
+    ...Object.values<string>(
+        JSON.parse(fs.readFileSync(fileURLToPath(import.meta.resolve("../components.json")), "utf-8")),
+    ),
+);
 ignore.push("/index.ts");
 ignore.push("/jest-matrix-react.tsx");
 ignore.push("/customisations/");
diff --git a/scripts/find-unused-settings.ts b/scripts/find-unused-settings.ts
new file mode 100755
index 0000000000..9d85d35003
--- /dev/null
+++ b/scripts/find-unused-settings.ts
@@ -0,0 +1,228 @@
+#!/usr/bin/env node
+/*
+Copyright 2026 Element Creations 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.
+*/
+
+// Finds settings declared in apps/web/src/settings/Settings.tsx which are never
+// referenced anywhere else in apps/ outside of settings/ directories. This is a
+// rough heuristic (plain string search over the codebase) rather than a full
+// type-aware usage analysis, but setting names are unique enough in practice.
+
+import * as fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { execFileSync } from "node:child_process";
+import ts from "typescript";
+
+const ROOT = fileURLToPath(import.meta.resolve(".."));
+const SETTINGS_DIR = path.join(ROOT, "apps/web/src/settings");
+const SETTINGS_FILE = path.join(SETTINGS_DIR, "Settings.tsx");
+
+const EXCLUDE_GLOBS = [
+    // Only the settings *definitions* directory should be excluded from the usage search -
+    // there are plenty of other directories literally named "settings" (e.g.
+    // apps/web/src/components/views/settings/) which hold real usages and must stay included.
+    "apps/web/src/settings/**",
+    "*/*/test/**",
+    "*-test.*",
+    "*.test.*",
+].map((pattern) => path.relative(ROOT, pattern));
+
+// See https://docs.github.com/en/actions/using-workflows/workflow-commands-for-github-actions#setting-an-error-message
+const SETTINGS_FILE_RELATIVE = path.relative(ROOT, SETTINGS_FILE);
+
+// Settings that are only ever referenced from inside another setting's `controller: ...`
+// expression in Settings.tsx (both live in the excluded settings/ directory) are treated as
+// used. This is detected automatically by scanning controller text for other settings'
+// search terms, but keep this list as a manual escape hatch for cases the heuristic can't
+// see (e.g. usage mediated through a helper function rather than a literal reference).
+const KNOWN_USED_OVERRIDES = new Set<string>([
+    "test_setting", // only used in tests
+]);
+
+interface DeclaredSetting {
+    // The literal setting name (as passed to SettingsStore), used for reporting.
+    name: string;
+    // Text(s) that count as "usage" when found via git grep, e.g. both the enum
+    // member reference (`UIFeature.Registration`) and its resolved value.
+    searchTerms: string[];
+    line: number;
+    // Source text of this setting's own `controller: ...` property, if any. Settings are
+    // sometimes only ever read by another setting's controller (e.g. a UIFeatureController
+    // gating a different setting) - see KNOWN_USED_VIA_CONTROLLER below for how this is used.
+    controllerText?: string;
+}
+
+function parseFile(filePath: string): ts.SourceFile {
+    const content = fs.readFileSync(filePath, "utf-8");
+    return ts.createSourceFile(filePath, content, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
+}
+
+/** Maps `EnumName.MemberName` -> its string literal value, for every string enum under settings/. */
+function buildEnumLookup(): Map<string, string> {
+    const lookup = new Map<string, string>();
+    const files = fs.readdirSync(SETTINGS_DIR).filter((f) => f.endsWith(".ts") || f.endsWith(".tsx"));
+
+    for (const file of files) {
+        const sourceFile = parseFile(path.join(SETTINGS_DIR, file));
+
+        const visit = (node: ts.Node): void => {
+            if (ts.isEnumDeclaration(node)) {
+                for (const member of node.members) {
+                    if (member.initializer && ts.isStringLiteral(member.initializer)) {
+                        const memberName = member.name.getText(sourceFile);
+                        lookup.set(`${node.name.text}.${memberName}`, member.initializer.text);
+                    }
+                }
+            }
+            ts.forEachChild(node, visit);
+        };
+        visit(sourceFile);
+    }
+
+    return lookup;
+}
+
+/** Extracts every top-level key of `export const SETTINGS = { ... }` via the TS AST. */
+function extractSettingNames(enumLookup: Map<string, string>): DeclaredSetting[] {
+    const sourceFile = parseFile(SETTINGS_FILE);
+    const settings: DeclaredSetting[] = [];
+
+    let settingsObject: ts.ObjectLiteralExpression | undefined;
+    ts.forEachChild(sourceFile, (node) => {
+        if (
+            ts.isVariableStatement(node) &&
+            node.declarationList.declarations.some((d) => ts.isIdentifier(d.name) && d.name.text === "SETTINGS")
+        ) {
+            const decl = node.declarationList.declarations.find(
+                (d) => ts.isIdentifier(d.name) && d.name.text === "SETTINGS",
+            )!;
+            if (decl.initializer && ts.isObjectLiteralExpression(decl.initializer)) {
+                settingsObject = decl.initializer;
+            }
+        }
+    });
+
+    if (!settingsObject) {
+        throw new Error("Could not find `export const SETTINGS` object literal in Settings.tsx");
+    }
+
+    for (const prop of settingsObject.properties) {
+        if (!ts.isPropertyAssignment(prop)) continue;
+
+        const line = sourceFile.getLineAndCharacterOfPosition(prop.getStart(sourceFile)).line + 1;
+        const propName = prop.name;
+        const controllerText = findControllerText(prop.initializer, sourceFile);
+
+        if (ts.isIdentifier(propName) || ts.isStringLiteral(propName)) {
+            const name = propName.text;
+            settings.push({ name, searchTerms: [name], line, controllerText });
+        } else if (ts.isComputedPropertyName(propName)) {
+            const enumRef = propName.expression.getText(sourceFile);
+            const value = enumLookup.get(enumRef);
+            if (!value) {
+                console.warn(`Warning: could not resolve computed setting key [${enumRef}] at Settings.tsx:${line}`);
+                continue;
+            }
+            // Code typically references these via the enum member (e.g. `UIFeature.Registration`)
+            // rather than the resolved string, so both count as usage.
+            settings.push({ name: value, searchTerms: [enumRef, value], line, controllerText });
+        }
+    }
+
+    return settings;
+}
+
+/** Returns the source text of a setting definition's `controller: ...` property, if it has one. */
+function findControllerText(settingValue: ts.Expression, sourceFile: ts.SourceFile): string | undefined {
+    if (!ts.isObjectLiteralExpression(settingValue)) return undefined;
+
+    for (const member of settingValue.properties) {
+        if (ts.isPropertyAssignment(member) && ts.isIdentifier(member.name) && member.name.text === "controller") {
+            return member.initializer.getText(sourceFile);
+        }
+    }
+
+    return undefined;
+}
+
+/**
+ * Checks whether any of the given search terms appears anywhere under apps/ outside the
+ * settings definitions directory. Relies on the `git` binary being available on PATH.
+ */
+function isUsedOutsideSettings(searchTerms: string[]): boolean {
+    const patternArgs = searchTerms.flatMap((term) => ["-e", term]);
+    const excludeArgs = EXCLUDE_GLOBS.map((term) => `:(exclude)${term}`);
+    try {
+        execFileSync("git", ["grep", "-F", "-q", ...patternArgs, "--", "apps", ...excludeArgs], { cwd: ROOT });
+        return true;
+    } catch (e) {
+        if (typeof (e as { status?: number }).status === "number") return false;
+        throw e;
+    }
+}
+
+/** Checks whether another setting's `controller` expression references one of this setting's search terms. */
+function isReferencedByOtherController(setting: DeclaredSetting, allSettings: DeclaredSetting[]): boolean {
+    return allSettings.some(
+        (other) =>
+            other.name !== setting.name &&
+            other.controllerText !== undefined &&
+            setting.searchTerms.some((term) => other.controllerText!.includes(term)),
+    );
+}
+
+function printAnnotation(line: number, message: string): void {
+    const escape = (s: string): string => s.replaceAll("%", "%25").replaceAll("\r", "%0D").replaceAll("\n", "%0A");
+    console.log(`::error file=${SETTINGS_FILE_RELATIVE},line=${line},title=Unused setting::${escape(message)}`);
+}
+
+/** De-duplicates settings by name, keeping the first occurrence. */
+function dedupeSettingsByName(settings: DeclaredSetting[]): Map<string, DeclaredSetting> {
+    const firstByName = new Map<string, DeclaredSetting>();
+    for (const setting of settings) {
+        if (!firstByName.has(setting.name)) firstByName.set(setting.name, setting);
+    }
+    return firstByName;
+}
+
+function findUnusedSettings(candidates: Iterable<DeclaredSetting>, allSettings: DeclaredSetting[]): DeclaredSetting[] {
+    const unused: DeclaredSetting[] = [];
+    for (const setting of candidates) {
+        if (KNOWN_USED_OVERRIDES.has(setting.name)) continue;
+        if (isUsedOutsideSettings(setting.searchTerms)) continue;
+        if (isReferencedByOtherController(setting, allSettings)) continue;
+        unused.push(setting);
+    }
+    return unused;
+}
+
+function reportUnused(unused: DeclaredSetting[]): void {
+    unused.sort((a, b) => a.line - b.line);
+    console.error(`⛔ Found ${unused.length} setting(s) declared with no usage:\n`);
+    for (const { name, line } of unused) {
+        console.error(`  Settings.tsx:${line}: "${name}"`);
+        if (process.env.GITHUB_ACTIONS === "true") {
+            printAnnotation(line, `Setting "${name}" is declared but never used outside ${EXCLUDE_GLOBS}`);
+        }
+    }
+}
+
+function main(): void {
+    const enumLookup = buildEnumLookup();
+    const settings = extractSettingNames(enumLookup);
+    const firstByName = dedupeSettingsByName(settings);
+    const unused = findUnusedSettings(firstByName.values(), settings);
+
+    if (unused.length > 0) {
+        reportUnused(unused);
+        process.exit(1);
+    }
+
+    console.log(`✅ All ${firstByName.size} settings appear to be used.`);
+}
+
+main();
diff --git a/scripts/gen-workflow-mermaid.ts b/scripts/gen-workflow-mermaid.ts
index 9038a706de..dd66777292 100644
--- a/scripts/gen-workflow-mermaid.ts
+++ b/scripts/gen-workflow-mermaid.ts
@@ -1,3 +1,10 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
 import fs from "node:fs/promises";
 import path from "node:path";
 import YAML from "yaml";
@@ -192,19 +199,19 @@ interface WorkflowYaml {
         workflow_run?: {
             workflows: string[];
         }; // Magic
-        workflow_call?: {}; // Reusable
-        workflow_dispatch?: {}; // Manual
-        pull_request?: {};
-        merge_group?: {};
+        workflow_call?: unknown; // Reusable
+        workflow_dispatch?: unknown; // Manual
+        pull_request?: unknown;
+        merge_group?: unknown;
         push?: {
             tags?: string[];
             branches?: string[];
         };
         schedule?: { cron: string }[];
-        release?: {};
+        release?: unknown;
         //
-        label?: {};
-        issues?: {};
+        label?: unknown;
+        issues?: unknown;
     };
     jobs: {
         [job: string]: {
@@ -221,7 +228,7 @@ interface WorkflowYaml {
 type Trigger = Node;
 
 // TODO workflow_call reusables
-/* eslint-disable @typescript-eslint/naming-convention */
+
 const TRIGGERS: {
     [key in keyof WorkflowYaml["on"]]: (
         data: NonNullable<WorkflowYaml["on"][key]>,
@@ -266,13 +273,12 @@ const TRIGGERS: {
     // TODO should we be just dropping these?
     workflow_run: (data) => data.workflows.map((parent) => workflows.get(parent)).filter(Boolean) as Workflow[],
 };
-/* eslint-enable @typescript-eslint/naming-convention */
 
 const triggers = new Map<string, Trigger>(); // keyed by trigger id
 const projects = new Map<string, Project>(); // keyed by project name
 const workflows = new Map<string, Workflow>(); // keyed by workflow name
 
-function getTriggerNodes<K extends keyof WorkflowYaml["on"]>(key: K, workflow: Workflow, on?: string[]): Trigger[] {
+function getTriggerNodes(key: keyof WorkflowYaml["on"], workflow: Workflow, on?: string[]): Trigger[] {
     if (!TRIGGERS[key]) return [];
 
     if (on && !on.includes(key)) {
@@ -280,7 +286,7 @@ function getTriggerNodes<K extends keyof WorkflowYaml["on"]>(key: K, workflow: W
     }
 
     const data = workflow.on[key]!;
-    const nodes = toArray(TRIGGERS[key]!(data, workflow));
+    const nodes = toArray(TRIGGERS[key](data, workflow));
     return nodes.map((node) => {
         if (triggers.has(node.id)) return triggers.get(node.id)!;
         triggers.set(node.id, node);
@@ -561,7 +567,11 @@ export default async function main(dirs: string[], on?: string[], print = false,
                     subgraph.addNode(job);
                     if (job.needs) {
                         toArray(job.needs).forEach((req) => {
-                            subgraph.addEdge(node.jobs.find((job) => job.jobId === req)!, job, "needs");
+                            subgraph.addEdge(
+                                node.jobs.find((job) => job.jobId === req)!,
+                                job,
+                                "needs",
+                            );
                         });
                     }
                 }
diff --git a/scripts/layered.sh b/scripts/layered.sh
index 912ef56a32..5b172aaaae 100755
--- a/scripts/layered.sh
+++ b/scripts/layered.sh
@@ -4,7 +4,7 @@ set -ex
 
 # Creates a layered environment with the full repo for the app and SDKs cloned
 # and linked. This gives an element-web dev environment ready to build with
-# matching branches of react-sdk's dependencies so that changes can be tested
+# matching branches of matrix-js-sdk so that changes can be tested
 # in element-web.
 
 # Note that this style is different from the recommended developer setup: this
@@ -22,13 +22,15 @@ export PR_REPO=element-web
 
 js_sdk_dep=$(jq -r '.dependencies["matrix-js-sdk"]' < $(pnpm -w root)/../apps/web/package.json)
 
-# Set up the js-sdk first (unless package.json pins a specific version)
+# Set up the js-sdk (unless package.json pins a specific version)
 if [ "$js_sdk_dep" = "github:matrix-org/matrix-js-sdk#develop" ]; then
+    echo "layered.sh: Cloning matching branch of matrix-js-sdk"
     scripts/fetchdep.sh matrix-org matrix-js-sdk develop
 
     if [ -n "$JS_SDK_GITHUB_BASE_REF" ]; then
+        echo "layered.sh: Switching js-sdk to $JS_SDK_GITHUB_BASE_REF"
         git -C matrix-js-sdk fetch --depth 1 origin $JS_SDK_GITHUB_BASE_REF
-        git -C matrix-js-sdk checkout $JS_SDK_GITHUB_BASE_REF
+        git -C matrix-js-sdk -c advice.detachedHead=false checkout $JS_SDK_GITHUB_BASE_REF
     fi
     pnpm -C matrix-js-sdk install --frozen-lockfile --ignore-scripts
 
@@ -36,5 +38,5 @@ if [ "$js_sdk_dep" = "github:matrix-org/matrix-js-sdk#develop" ]; then
     pnpm -C apps/web link ./matrix-js-sdk
     pnpm link ./matrix-js-sdk
 else
-    echo "Skipping matrix-js-sdk fetch and link as package.json pins $js_sdk_dep"
+    echo "layered.sh: Skipping matrix-js-sdk fetch and link as package.json pins $js_sdk_dep"
 fi
diff --git a/scripts/pnpm-link.ts b/scripts/pnpm-link.ts
index 756494a183..e05db133de 100644
--- a/scripts/pnpm-link.ts
+++ b/scripts/pnpm-link.ts
@@ -14,13 +14,13 @@ Please see LICENSE files in the repository root for full details.
 // This tool is a helpful substitute to `pnpm link` as that modifies the package.json & pnpm-lock.yaml files.
 
 import * as fs from "node:fs/promises";
-import { join, dirname } from "node:path";
+import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { execSync } from "node:child_process";
 
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const configPath = join(__dirname, "..", ".link-config");
-const nodeModulesPath = join(__dirname, "..", "node_modules");
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const configPath = path.join(__dirname, "..", ".link-config");
+const nodeModulesPath = path.join(__dirname, "..", "node_modules");
 
 try {
     if (process.env.PLAYWRIGHT_COMMON_DOCKER) process.exit(0); // Skip in docker env
@@ -28,28 +28,40 @@ try {
     const configFile = await fs.readFile(configPath, "utf-8");
     for (const line of configFile.trim().split("\n")) {
         if (!line || line.startsWith("#")) continue;
-        const [dependency, path] = line.split("=");
-        const dependencyPath = join(nodeModulesPath, dependency);
+        const [dependency, targetPath, dir] = line.split("=");
+        const nodeModules = dir ? path.join(dir, "node_modules") : nodeModulesPath;
+        const dependencyPath = path.join(nodeModules, dependency);
 
         try {
-            const stat = await fs.stat(dependencyPath);
-            if (stat.isSymbolicLink()) {
-                const linkPath = await fs.readlink(dependencyPath);
-                if (linkPath === path) {
-                    // already done
-                    continue;
+            try {
+                const stat = await fs.lstat(dependencyPath);
+                console.log(`Existing is ${stat.isSymbolicLink() ? "symlink" : "directory"}`);
+                if (stat.isSymbolicLink()) {
+                    const linkPath = await fs.readlink(dependencyPath);
+                    if (linkPath === targetPath) {
+                        // already done
+                        continue;
+                    } else {
+                        await fs.unlink(dependencyPath);
+                    }
                 } else {
-                    await fs.unlink(dependencyPath);
+                    await fs.rm(dependencyPath, { recursive: true });
+                }
+            } catch (e: any) {
+                // fs.lstat throws ENOENT if the path doesn't exist (on Windows)
+                if (e.code === "ENOENT") {
+                    console.log("Received ENOENT error on dependency path - assuming it doesn't exist");
+                } else {
+                    throw e;
                 }
-            } else {
-                await fs.rm(dependencyPath, { recursive: true });
             }
 
-            console.log(`Linking ${dependency} to ${path}`);
-            await fs.symlink(path, dependencyPath);
+            console.log(`Linking ${dependency} to ${targetPath}`);
+            await fs.symlink(targetPath, dependencyPath, "junction"); // use a junction type to avoid EPERM errors on Windows
 
-            const pkgJson = await fs.readFile(join(path, "package.json"), "utf-8");
-            const pkgManager = JSON.parse(pkgJson)["packageManager"]?.split("@").at(0) ?? "yarn";
+            const pkgJson = JSON.parse(await fs.readFile(path.join(targetPath, "package.json"), "utf-8"));
+            const pkgManager =
+                pkgJson.devEngines?.packageManager?.name ?? pkgJson.packageManager?.split("@").at(0) ?? "yarn";
             // pnpm install may have wiped out the `node_modules` dir so we have to restore it
             execSync(`${pkgManager} install --ignore-scripts --frozen-lockfile`, {
                 cwd: dependencyPath,
diff --git a/sonar-project.properties b/sonar-project.properties
deleted file mode 100644
index 7a25cf4571..0000000000
--- a/sonar-project.properties
+++ /dev/null
@@ -1,68 +0,0 @@
-sonar.projectKey=element-web
-sonar.organization=element-hq
-
-# Encoding of the source code. Default is default system encoding
-#sonar.sourceEncoding=UTF-8
-
-sonar.sources=.
-sonar.tests=apps/web/test,apps/web/playwright,apps/desktop,packages
-sonar.test.inclusions=\
-  apps/web/test/*,\
-  apps/web/playwright/*,\
-  apps/desktop/playwright/*,\
-  apps/desktop/src/**/*.test.ts,\
-  packages/*/src/**/*.test.*,\
-  packages/*/src/test/**/*
-sonar.exclusions=\
-  apps/web/__mocks__,\
-  docs,\
-  apps/web/element.io,\
-  apps/web/nginx,\
-  apps/web/src/vector/modernizr.cjs,\
-  **/*.webm,\
-  **/*.ogg,\
-  **/*.mp3,\
-  **/*.woff2,\
-  **/*.ttf,\
-  **/*.webp,\
-  **/*.jpg,\
-  **/*.apng,\
-  **/*.ico,\
-  **/*.png,\
-  **/*.gif
-
-# Exclude translations and tests from the duplication check
-sonar.cpd.exclusions=\
-  **/src/i18n/strings/*.json,\
-  apps/**/test/**,\
-  apps/**/playwright/**,\
-  packages/**/test/**,\
-  packages/shared-components/src/**/*.stories.tsx,\
-  packages/playwright-common/**
-
-sonar.javascript.lcov.reportPaths=apps/web/coverage/lcov.info,packages/shared-components/coverage/lcov.info
-sonar.coverage.exclusions=\
-  apps/web/test/**/*,\
-  apps/web/playwright/**/*,\
-  apps/web/res/**/*,\
-  apps/web/scripts/**/*,\
-  apps/web/__mocks__/**/*,\
-  apps/web/I18nWebpackPlugin.ts,\
-  apps/web/recorder-worklet-loader.cjs,\
-  apps/web/src/components/views/dialogs/devtools/**/*,\
-  apps/web/src/utils/SessionLock.ts,\
-  apps/web/src/**/*.d.ts,\
-  apps/web/src/vector/mobile_guide/**/*,\
-  apps/desktop/electron-builder.ts,\
-  apps/desktop/scripts/**/*,\
-  apps/desktop/playwright/**/*,\
-  apps/desktop/hak/**/*,\
-  packages/shared-components/src/test/**/*,\
-  packages/shared-components/src/**/*.stories.tsx,\
-  packages/shared-components/scripts/**/*,\
-  packages/playwright-common/**/*,\
-  scripts/**/*,\
-  docs/**/*,\
-  **/*.config.*,\
-  knip.ts
-sonar.testExecutionReportPaths=apps/web/coverage/jest-sonar-report.xml
diff --git a/packages/vite-common/vite.config.ts b/vitest.config.ts
similarity index 54%
rename from packages/vite-common/vite.config.ts
rename to vitest.config.ts
index b45cd45912..84125c408b 100644
--- a/packages/vite-common/vite.config.ts
+++ b/vitest.config.ts
@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { defineConfig, type ViteUserConfig } from "vitest/config";
-import { type Reporter } from "vitest/reporters";
+import { type Reporter } from "vitest/node";
 import { env } from "node:process";
 
 const reporters: NonNullable<ViteUserConfig["test"]>["reporters"] = [["default"]];
@@ -16,7 +16,7 @@ const slowTestReporter: Reporter = {
         const tests = testModules
             .flatMap((m) => Array.from(m.children.allTests()))
             .filter((test) => test.diagnostic()?.slow);
-        tests.sort((x, y) => x.diagnostic()!.duration! - y.diagnostic()!.duration!);
+        tests.sort((x, y) => x.diagnostic()!.duration - y.diagnostic()!.duration);
         tests.reverse();
 
         if (tests.length > 0) {
@@ -31,13 +31,6 @@ const slowTestReporter: Reporter = {
 // if we're running under GHA, enable the GHA & Sonar reporters
 if (env["GITHUB_ACTIONS"] !== undefined) {
     reporters.push(["github-actions", { silent: false }]);
-    reporters.push([
-        "vitest-sonar-reporter",
-        {
-            outputFile: "coverage/sonar-report.xml",
-            onWritePath: (path): string => `${process.cwd()}/${path}`,
-        },
-    ]);
 
     // if we're running against the develop branch, also enable the slow test reporter
     if (env["GITHUB_REF"] == "refs/heads/develop") {
@@ -46,16 +39,34 @@ if (env["GITHUB_ACTIONS"] !== undefined) {
 }
 
 export default defineConfig({
+    oxc: {
+        // Configure the ts loader to handle all the files we may throw at it
+        include: /\.[cm]?tsx?$/,
+    },
     test: {
+        projects: [
+            "{apps,modules,packages}/*/vitest.config.ts",
+            // We run shared-components separately for now as vitest lacks support for nested projects
+            // https://github.com/vitest-dev/vitest/issues/8544
+            "!packages/shared-components",
+        ],
         coverage: {
             provider: "v8",
-            include: ["src/**/*.{ts,tsx}"],
-            reporter: [["lcov", { projectRoot: "../../" }]],
+            include: ["{apps,modules,packages}/*/src/**/*.{cts,ts,tsx}"],
+            exclude: [
+                // Exclude test files
+                "**/*.{stories,test}.{ts,tsx}",
+                // Exclude test utilities
+                "**/src/test/**",
+                // Exclude mocks
+                "**/src/**/*-{mock,mocks}.{ts,tsx}",
+                // Exclude type definition files
+                "**/*.d.ts",
+                // Exclude playwright-common as it is just test utilities
+                "packages/playwright-common/**",
+            ],
+            reporter: [["lcov"]],
         },
-        environment: "node",
         reporters,
-        pool: "threads",
-        globals: false,
-        include: ["src/**/*.test.{ts,tsx}"],
     },
 });